Git Product home page Git Product logo

chakra-ui / ark Goto Github PK

View Code? Open in Web Editor NEW
3.6K 19.0 100.0 30.78 MB

A headless library for building reusable, scalable design systems that works for a wide range of JS frameworks.

Home Page: https://ark-ui.com

License: MIT License

TypeScript 75.67% Vue 17.67% CSS 3.89% MDX 2.64% JavaScript 0.07% HTML 0.01% Svelte 0.05%
headless react vue solid color-picker accordion carousel checkbox combobox dialog

ark's Introduction

@ark

License GitHub Stars Downloads

What is Ark UI?

Ark UI is a headless, open-source UI library with over 30+ components designed for building reusable, scalable Design Systems. It supports a wide range of JavaScript frameworks, offering dedicated packages for each supported framework.

Components

React Solid Svelte Vue
Accordion
Avatar
Carousel
Checkbox
Clipboard
Collapsible
Color Picker
Combobox
Date Picker
Dialog
Editable
Field
Fieldset
File Upload
Hover Card
Menu
Number Input
Pagination
Pin Input
Popover
Presence
Progress - Circular
Progress - Linear
Radio Group
Rating Group
Segment Group
Select
Signature Pad
Slider
Splitter
Switch
Tabs
Tags Input
Time Picker
Timer
Toast
Toggle Group
Tooltip
Tree View

Documentation

For more detailed documentation and examples, please visit the official documentation.

Roadmap

You can request, vote for, and check upcoming features on our roadmap.

Contribution

We welcome contributions to Ark UI. Please read our contributing guidelines for more information on how to contribute.

License

This project is licensed under the terms of the MIT license.

ark's People

Contributors

anubra266 avatar carwack avatar codebender828 avatar crasite avatar cschroeter avatar gaic4o avatar github-actions[bot] avatar hi-reeve avatar iamdin avatar jeferson-sb avatar jonas-c avatar juliomuhlbauer avatar ludofischer avatar mathuraditya724 avatar naoto-ida avatar navaru avatar okinawaa avatar omikorin avatar raisiqueira avatar renatodeleao avatar renovate[bot] avatar rodrigoslino avatar ryoid avatar segunadebayo avatar shyrro avatar sjoleee avatar sumi-0011 avatar therealokoro avatar timkolberger avatar tylerapfledderer avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

ark's Issues

[Vue] Inconsistent component wrapper

Description

I noticed that the layout of the components I am creating were behaving differently and realized this was due to one (NumberInput) automatically rendering a wrapper div while the other (Select) did not render any wrapper. This leads to inconsistent layout behavior.

I haven't checked any of the other components yet, but it seems like they should maybe all be wrapped the same (or at least similarly) or not wrapped at all. The reproduction shows the two inputs side by side in a flex container and the effects of having one wrapped while the other isn't.

I know this is easily remedied by just adding a wrapper around the Select component, but again, personally I would opt for consistency right off-the-bat.

Link to Reproduction

https://nuxtstarterdhrjds-oyrs--3000--d830b1a2.local-credentialless.webcontainer.io/

Steps to reproduce

  1. Go to repro.
  2. See the wonky layout.

Ark UI Version

0.0.0-rc-20230428162935

Framework

  • React
  • Solid
  • Vue

Browser

Chromium 112.0.5615.165

Additional Information

No response

useDialogContext returned `undefined`. Seems you forgot to wrap component within <DialogProvider />

Description

I receive this message when attempting to use this dialog component in @ark-ui/solid.
useDialogContext returned `undefined`. Seems you forgot to wrap component within <DialogProvider />

Link to Reproduction

https://github.com/alrightsure/ark-solid-error-example

Steps to reproduce

  1. Run "pnpm i"
  2. Run "pnpm dev"
  3. View console errors

Ark UI Version

0.2.0

Framework

  • React
  • Solid
  • Vue

Browser

No response

Additional Information

No response

[Tabs] [Vue]: focused slot prop

Description

I know it's possible to use the @change event to accomplish the same thing, but it would be for DX to also have the selected tab (and focused tab) exposed as a slot props.

Proposed Solution or API

<Tabs v-slot="{ selectedTab, FocusedTab }">

Additional Information

No response

Docs: Inter font is not applied

Until a few days ago, the font(inter) was applied well, but now the basic font is applied.
Accessing the ark.ui.com page in ignito mode is the same.

Screenshot

image

Error: The requested module 'solid-js/web' does not provide an export named 'memo'

I'm using Solid with Astro in my project. When I use ark in a component that runs on the server (doesn't have client:only directive) I get this error:

/node_modules/.pnpm/@[email protected][email protected]/node_modules/@ark-ui/solid/dist/environment/environment.mjs:1
import { createComponent, memo, use, template } from 'solid-js/web';
                          ^^^^
SyntaxError: The requested module 'solid-js/web' does not provide an export named 'memo'
    at ModuleJob._instantiate (node:internal/modules/esm/module_job:123:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:189:5)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:530:24)
    at async nodeImport (/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-79892de8.js:54039:21)
    at async eval (/src/pages/_Editor.tsx:24:31)
    at async instantiateModule (/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-79892de8.js:53996:9)

I'm using your default Accordion example:

// Accordion.tsx
import {
  Accordion,
  AccordionTrigger,
  AccordionItem,
  AccordionContent,
} from '@ark-ui/solid'

export const CustomAccordion = () => {
  return (
    <Accordion>
      <AccordionItem value="panel-1">
        <AccordionTrigger>
          <button>Panel 1 trigger</button>
        </AccordionTrigger>
        <AccordionContent>Panel 1 content</AccordionContent>
      </AccordionItem>
    
      <AccordionItem value="panel-2">
        <AccordionTrigger>
          <button>Panel 2 trigger</button>
        </AccordionTrigger>
        <AccordionContent>Panel 2 content</AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}
// /pages/index.astro
---
  import { CustomAccordion } from "./Accordion"
---
<CustomAccordion client:load />

ark version: 0.0.0-rc-20230403193437 (the latest rc version)

[Dialog] [Vue]: add "unmount" prop

Description

Hello again,

While working on a reproduction to test #898, I encountered another opportunity for an improvement.

In the reproduction I have a nested dialog within another dialog. In the parent dialog I use the child dialog and pass two "action" buttons into the child dialogs' actions slot. This is the "correct" code, or rather it works as I intend it to.

Working code:

<template #actions>
  <div class="flex gap-5">
      <button
          @click="childDialog = false"
      >
          Cancel
      </button>

       <button
           childDialog = false;
           @click="$emit('close')"
       >
           Close parent
        </button>
  </div>
</template>

"Incorrect" code:

<template #actions>
  <div class="flex gap-5">
      <button
          @click="childDialog = false"
      >
          Cancel
      </button>

       <button
           @click="$emit('close')"
       >
           Close parent
        </button>
  </div>
</template>

Notice the omitted childDialog = false on the second button. This caused the childDialog ref to remain true when I tried to reopen the parent dialog and thus the child dialog would not open.

This is a long-winded way of pointing out that if the parent dialog were allowed to unmount completely, the childDialog ref would have reset and the "incorrect" code above would've still worked.

There are of course other instances where it might be desirable to unmount a component entirely and there might be other Ark components where an added :unmount prop would come in handy too (not sure which off the top of my head).

Proposed Solution or API

Add an :unmount prop to allow a component to unmount completely. In regards to Vue, this would essentially be the equivalent of v-if vs v-show.

Additional Information

No response

Improve support for recently released `defineProps` in Vue.

import type { NumberInputProps } from "@ark-ui/vue";

interface Props {
  label: string;
  id?: string;
  paddingRight?: number;
  paddingLeft?: number;
}

const props = defineProps<NumberInputProps & Props>();

Vue now supports passing types to the defineProps method since Vue 3.3.
However, with Ark types this shows different errors for some reason.

https://stackblitz.com/edit/nuxt-starter-3jzcrb?file=components%2FChildDialog.vue

Originally posted by @jiblett1000 in #918 (comment)

NB: this might be coming from the polymorphic factory types and might be solved by migrating to the asChild prop.

[Vue]: Allow for exposure of machine API to `v-slot` for needed components

Description

Part of an overall cleanup with the Vue package is being able to expose the individual component's machine API through the v-slot so that state such as boolean checks or selected values can be accessed by the user to then apply to custom structures within each component's wrapper.

If not immediately, considering to also apply the expose method with the APIs for added flexibility.

Additional Information

Related to #905

[Menu] [Vue]: slot props

Description

Just like was done for the Select component #831

Please expose slot props for isOpen and the highlightedItem (or whatever it should be named) state.

Proposed Solution or API

N/A

Additional Information

No response

Docs: Absolute positioning on Toast example

Hi, when exploring the docs website I stumbled upon the Toast example that bugs me. I assume the toast close trigger button is not in the proper position. I explored it and discovered that the utility classes t_4 and r_4 are not present in the build CSS.
It might be an issue with pandacss
image

[TabList] [Vue]: as controlled component

Description

This is something I think would greatly increase the flexibility of the Tabs component, particularly when using Tabs as a controlled component.

Essentially, sometimes it would be useful to use TabList elsewhere in the dom (a header outside of the page content for example), but still take advantage of say, the TabIndicator functionality.

Proposed Solution or API

If TabList also allowed the ability for it to be treated as a controlled component, you could sync both the Tabs and TabList components to the same ref while having them in separate locations.

Additional Information

No response

[Solid]: buttons inside tooltip triggers become un-clickable

Description

When I use a button inside of a tooltip trigger I expect the button to still be clickable.

Link to Reproduction

https://codesandbox.io/p/sandbox/happy-night-t0rptz?file=%2Fsrc%2FApp.tsx

Steps to reproduce

See the provided codesandbox link and click on the provided buttons. You will see that the counter increases with no tooltip but does not increase with a tooltip attached.

Ark UI Version

0.2.0

Framework

  • React
  • Solid
  • Vue

Browser

Firefox 112.0.2

Additional Information

No response

[NumberInput] [Vue]: v-model decimal error

🐛 Bug report

When using v-model with the number input, any decimal point gets formatted away on input.

💥 Steps to reproduce

  1. Enter number in input.
  2. Try adding decimal point.
  3. See value get reformatted without decimal and logged in the array below.

💻 Link to reproduction

I tried for the life of me to get any number of codesandboxes working, but they all just seem to hang indefinitely. Anyhow, created a stackblitz instead.

https://stackblitz.com/edit/nuxt-starter-frcagp?file=package.json,nuxt.config.ts,app.vue

🧐 Expected behavior

I expect to be able to use v-model and also be able to enter a decimal point in the field.

🧭 Possible Solution

No idea.

🌍 System information

Software Version(s)
Ark Version
Browser Chromium
Operating System Fedora

📝 Additional information

[Tabs] [Vue]: defaultValue name

Description

I know this is super nitpicking, but nonetheless; While looking at the Tabs docs just now, I noticed the use of the defaultValue being used in the "control the selected tab" section. Functionally I know this isn't an issue, but semantically speaking, using that name for this seems odd. You would only really set a default once, not repeatedly.

I propose either:

  1. Keeping defaultValue for (you guessed it) setting the default value and adding a second selectedTab (or selectedTab, etc) to control the active tab. I guess you would just have to deal with the scenario where both are set and have initial values and which would win out.

  2. Just rename defaultValue to selectedTab (or whatever) and then just use the initial state of the ref as the default value. Like so:

<Tabs :selectedTab="selectedTab">...</Tabs>

const selectedTab = ref('initial-value')

Just my two cents. Cheers!

Link to Reproduction

N/A

Steps to reproduce

N/A

Ark UI Version

0.2

Framework

  • React
  • Solid
  • Vue

Browser

No response

Additional Information

No response

[Docs]: Update Vue examples

Update all component examples for Vue to reflect complete SFC structure.

<script setup>
  /* ... */
</script>
<template>
  <!-- ... -->
</template>

Error: Failed to resolve entry for package "@ark-ui/vue".

Getting errors with Nuxt:

Screenshot 2023-04-15 at 19 52 11

Component:

<script setup lang="ts">
import {
  Tooltip,
  TooltipContent,
  TooltipPositioner,
  TooltipTrigger,
} from '@ark-ui/vue'

defineProps<{
  icon: string
  label: string
  description?: string
}>()
</script>

<template>
  <Tooltip flex items-center text-label text-xs>
    <TooltipTrigger>
      <Icon :name="icon" label-icon mr-1 /> {{ label }}
    </TooltipTrigger>
    <TooltipPositioner>
      <TooltipContent>{{ description }}</TooltipContent>
    </TooltipPositioner>
  </Tooltip>
</template>

[Tabs] [Vue]: some kebab-case props not working

Description

I noticed some props aren't working when they're kebab cased. It seems to be mostly ones binding an event. Of course this is easily fixed by switching those particular ones to camelCase, but considering autocomplete usually is kebab-cased and the vue style guide strongly recommends kebab in the template, it would be nice if this worked as expected.

I thought it might be a Vue issue, but I found a similar issue on the PrimeVue repo and the relevant PR that solved their issue.

primefaces/primevue#1263

From the PR:

This is hopefully resolved now, components with issues were DataTable and TreeTable mainly who need to access their >children. Since Vue 3 remove $children with no replacement, we had to use vnodes that caused this as we use camel by >default. Just like Vue does, we now do kebab-camel conversion for these components and the issue is resolved. If one >day $children is back, we'll migrate to that for sure. Thanks for everyone contributed to this issue. 4th of October is the >release for 3.7.3

So perhaps doing a similar prop name conversion might work here?

P.S. I titled this under the Tabs component but if I remember correctly, I was having this issue with others as well.

Link to Reproduction

https://stackblitz.com/edit/nuxt-starter-3jzcrb?file=components%2FCustomTabsComponent.vue

Steps to reproduce

notice the :on-change prop function doesn't run as is. Changing to :onChange on the Tabs component allows the function to run.

Ark UI Version

0.2

Framework

  • React
  • Solid
  • Vue

Browser

112.0.5615.165

Additional Information

No response

[Checkbox]: Need to click twice to see checkbox state change

Description

When I toggle the checkbox component on the ark-ui docs website
I expect it to change state at each click, but it only changes state after two clicks.

Bug is present in React Solid and Vue

Link to Reproduction

https://ark-ui.com/docs/react/components/checkbox

Steps to reproduce

  1. Go to https://ark-ui.com/docs/react/components/checkbox
  2. Click on the checkbox (clicked once)
  3. Click on the checkbox again (clicked twice)
  4. See error : checkbox doesn't change state
  5. Click on the checkbox again (clicked three times)
  6. See that it does changes the state after two clicks

Ark UI Version

@ark-ui/[email protected]

Framework

  • React
  • Solid
  • Vue

Browser

113.0.5672.92

Additional Information

Screen capture here :
Enregistrement_de_l’écran_2023-05-12_à_11_35_40_AdobeExpress (1)

Nuxt 3 / SSR support

Hello, great project !!

I'm trying this out in a Nuxt 3 project and it seems that some components only work on the client-side (Dialog for example). The error is ReferenceError: Element is not defined

I'm not sure if this is preventable or not.

[Select] [Vue]: Slot props / Default Slot

My onslaught continues :)

It would be great to see some more (any?) slot props in the select component. Something along the lines of:

  <Select v-model="selectedOption" v-slot="{ isOpen }">
    <SelectLabel>Framework:</SelectLabel>
    <SelectTrigger>
      <button>{{ selectedOption?.label ?? 'Select' }}</button>
    </SelectTrigger>

    <Teleport to="body">
      <SelectPositioner>
        <SelectContent>
          <SelectOption 
            v-for="option in options" 
            :key="option.value" 
            v-slot="{ highlighted, selected, disabled }">
               <span>{{ option.label }}</span>
               <span v-if="selected">
                 <CheckIcon  />
               </span>
          </SelectOption>
        </SelectContent>
      </SelectPositioner>
    </Teleport>
  </Select>

While a lot of this can be achieved by using a template ref on the root element and using the api through that, I believe this is much better in terms of DX. Notably this adds the isOpen slot prop on the <Select> component as well as highlighted, active, disabled slot props on the SelectOption component.

Another thing of note is being able to pass in custom html through the default slot of SelectOption rather than the currently required props of label and value. This allows the addition of a checkmark (for example) for the selected item or whatever else the dev desires.

I'm trying to migrate from using headlessui. The DX of their components is great and provides a great example in general of what I'm talking about: https://headlessui.com/vue/listbox#listbox-option. Unfortunately, they don't seem particularly interested in adding more components.

But, I like the concept of Ark, Zag, etc which is why I'm trying to switch over.

feat(react): improve split props fn

Two ideas that came to mind:

a) when using the splitProps fn I would love to define a target type that is used for autocompletion
b) when using the splitProps fn it should fail on typecheck if not all props are destructured. so if a new property is added our build pipeline would fail

here is an example:

interface Maschine {
  value?: string
  newProperty?: string // was added recently
}

const [machineProps, rest] = splitProps<Maschine>(props, ["value", "newProperty"]) // OK
const [machineProps, rest] = splitProps<Maschine>(props, ["value"]) // Error -> missing value newProperty

Love to hear your thoughts @TimKolberger

Cannot import Splitter (solid-js)

Description

import { Splitter } from '@ark-ui/solid'

Module '"@ark-ui/solid"' has no exported member 'Splitter'.

Link to Reproduction

Steps to reproduce

Ark UI Version

0.1.0

Framework

  • React
  • Solid
  • Vue

Browser

Chrome 112.0.5615.165 (Official Build) (64-bit)

Additional Information

docs: can't scroll sidebar

We can't scroll lateral menu.
The docs sidebar has an overflow-y_auto class but it's not present in builded css.
It's maybe an issue with pandacss

Capture d’écran 2023-03-28 à 20 47 41

[Select] [Vue] Missing ID prop

Description

Title pretty much sums it up. The id prop is missing from the Select component to be able to pass a UID to the machine.

Link to Reproduction

https://stackblitz.com/edit/nuxt-starter-dhrjds?file=nuxt.config.ts,components%2FCustomNumberInput.vue,package.json,components%2FCustomSelectInput.vue,app.vue

Steps to reproduce

Doesn't seem like a reproduction is really necessary for this, but it you go to the reproduction:

  1. Click on "Open in new Tab" on the top right.
  2. Open the browser developer console.
  3. See the logged error(s) extraneous non-props attributes (id) were passed to component... as the id prop isn't available on the select component.

Ark UI Version

0.0.0-rc-20230428162935

Framework

  • React
  • Solid
  • Vue

Browser

Chromium 112.0.5615.165

Additional Information

No response

Investigate rounding issue in `NumberInput`

Hello,

Another odd thing happening with NumberInput. I'm using the component for a currency input. I'm using a rounding function to round to the nearest 5 cents (0.05). I call the function within the setter of a computed ref to round the value, which sets it to another string ref and then I return that ref in the getter. Nothing too crazy. However, something is happening within NumberInput that will round the number up but not down. I've included a separate ref and associated watcher which rounds the number using the same rounding function and shows the correct value. For example:

If I enter 14.42, it should round to 14.4. Instead it stays at 14.42

If I enter 14.43, it should round to 14.5. It does as expected.

If I enter 14.46, it should round to 14.45. It does as expected. This is odd because now it's rounding down.

If I enter 14.48, it should round to 14.5. It does as expected

It's entirely possible there's a better way to handle this within NumberInput, however, this behavior is still inconsistent and so it seemed worth reporting. Here is the repo to see what I'm referring to.

https://stackblitz.com/edit/nuxt-starter-rpkhqh?file=app.vue,components%2FCustomNumberInput.vue

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Awaiting Schedule

These updates are awaiting their schedule. Click on a checkbox to get an update now.

  • chore(deps): update dependency svelte to v5.0.0-next.151
  • chore(deps): update dependency turbo to v2.0.2
  • chore(deps): lock file maintenance

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

Detected dependencies

bun
package.json
  • @biomejs/biome 1.8.0
  • @types/bun 1.1.3
  • lefthook 1.6.15
  • turbo 2.0.1
  • typescript 5.4.5
  • vercel 34.2.5
docker-compose
website/docker-compose.yml
  • postgres 16-alpine
github-actions
.github/composite-actions/install/action.yml
  • oven-sh/setup-bun v1
.github/workflows/quality.yml
  • actions/checkout v4
  • actions/checkout v4
  • actions/checkout v4
  • actions/checkout v4
  • actions/checkout v4
.github/workflows/release.yml
  • actions/checkout v4
  • oven-sh/setup-bun v1
  • slackapi/slack-github-action v1.26.0
npm
packages/anatomy/package.json
  • @zag-js/accordion 0.54.0
  • @zag-js/anatomy 0.54.0
  • @zag-js/avatar 0.54.0
  • @zag-js/carousel 0.54.0
  • @zag-js/checkbox 0.54.0
  • @zag-js/clipboard 0.54.0
  • @zag-js/collapsible 0.54.0
  • @zag-js/color-picker 0.54.0
  • @zag-js/color-utils 0.54.0
  • @zag-js/combobox 0.54.0
  • @zag-js/date-picker 0.54.0
  • @zag-js/date-utils 0.54.0
  • @zag-js/dialog 0.54.0
  • @zag-js/editable 0.54.0
  • @zag-js/file-upload 0.54.0
  • @zag-js/hover-card 0.54.0
  • @zag-js/menu 0.54.0
  • @zag-js/number-input 0.54.0
  • @zag-js/pagination 0.54.0
  • @zag-js/pin-input 0.54.0
  • @zag-js/popover 0.54.0
  • @zag-js/presence 0.54.0
  • @zag-js/progress 0.54.0
  • @zag-js/radio-group 0.54.0
  • @zag-js/rating-group 0.54.0
  • @zag-js/select 0.54.0
  • @zag-js/slider 0.54.0
  • @zag-js/splitter 0.54.0
  • @zag-js/switch 0.54.0
  • @zag-js/tabs 0.54.0
  • @zag-js/tags-input 0.54.0
  • @zag-js/toast 0.54.0
  • @zag-js/toggle-group 0.54.0
  • @zag-js/tooltip 0.54.0
  • @zag-js/tree-view 0.54.0
  • @release-it/keep-a-changelog 5.0.0
  • globby 14.0.1
  • release-it 17.3.0
  • typescript 5.4.5
  • vite 5.2.12
  • vite-plugin-dts 3.9.1
packages/react/package.json
  • @zag-js/accordion 0.54.0
  • @zag-js/avatar 0.54.0
  • @zag-js/carousel 0.54.0
  • @zag-js/checkbox 0.54.0
  • @zag-js/clipboard 0.54.0
  • @zag-js/collapsible 0.54.0
  • @zag-js/color-picker 0.54.0
  • @zag-js/color-utils 0.54.0
  • @zag-js/combobox 0.54.0
  • @zag-js/core 0.54.0
  • @zag-js/date-picker 0.54.0
  • @zag-js/date-utils 0.54.0
  • @zag-js/dom-query 0.54.0
  • @zag-js/dialog 0.54.0
  • @zag-js/editable 0.54.0
  • @zag-js/file-upload 0.54.0
  • @zag-js/file-utils 0.54.0
  • @zag-js/hover-card 0.54.0
  • @zag-js/i18n-utils 0.54.0
  • @zag-js/menu 0.54.0
  • @zag-js/number-input 0.54.0
  • @zag-js/pagination 0.54.0
  • @zag-js/pin-input 0.54.0
  • @zag-js/popover 0.54.0
  • @zag-js/presence 0.54.0
  • @zag-js/progress 0.54.0
  • @zag-js/radio-group 0.54.0
  • @zag-js/rating-group 0.54.0
  • @zag-js/react 0.54.0
  • @zag-js/select 0.54.0
  • @zag-js/slider 0.54.0
  • @zag-js/splitter 0.54.0
  • @zag-js/switch 0.54.0
  • @zag-js/tabs 0.54.0
  • @zag-js/tags-input 0.54.0
  • @zag-js/toast 0.54.0
  • @zag-js/toggle-group 0.54.0
  • @zag-js/tooltip 0.54.0
  • @zag-js/tree-view 0.54.0
  • @zag-js/types 0.54.0
  • @biomejs/biome 1.8.0
  • @release-it/keep-a-changelog 5.0.0
  • @storybook/addon-a11y 8.1.6
  • @storybook/addon-essentials 8.1.6
  • @storybook/react-vite 8.1.6
  • @storybook/react 8.1.6
  • @testing-library/dom 10.1.0
  • @testing-library/jest-dom 6.4.5
  • @testing-library/react 16.0.0
  • @testing-library/user-event 14.5.2
  • @types/jsdom 21.1.7
  • @types/react 18.3.3
  • @types/react-dom 18.3.0
  • @types/testing-library__jest-dom 5.14.9
  • @vitejs/plugin-react 4.3.0
  • globby 14.0.1
  • jsdom 24.1.0
  • lucide-react 0.390.0
  • react 18.3.1
  • react-dom 18.3.1
  • react-frame-component 5.2.7
  • react-hook-form 7.51.5
  • release-it 17.3.0
  • resize-observer-polyfill 1.5.1
  • storybook 8.1.6
  • typescript 5.4.5
  • vite 5.2.12
  • vite-plugin-dts 3.9.1
  • vitest 1.6.0
  • react >=18.0.0
  • react-dom >=18.0.0
packages/solid/package.json
  • @zag-js/accordion 0.54.0
  • @zag-js/avatar 0.54.0
  • @zag-js/carousel 0.54.0
  • @zag-js/checkbox 0.54.0
  • @zag-js/clipboard 0.54.0
  • @zag-js/collapsible 0.54.0
  • @zag-js/color-picker 0.54.0
  • @zag-js/combobox 0.54.0
  • @zag-js/date-picker 0.54.0
  • @zag-js/dialog 0.54.0
  • @zag-js/dom-query 0.54.0
  • @zag-js/editable 0.54.0
  • @zag-js/file-upload 0.54.0
  • @zag-js/hover-card 0.54.0
  • @zag-js/file-utils 0.54.0
  • @zag-js/i18n-utils 0.54.0
  • @zag-js/menu 0.54.0
  • @zag-js/number-input 0.54.0
  • @zag-js/pagination 0.54.0
  • @zag-js/pin-input 0.54.0
  • @zag-js/popover 0.54.0
  • @zag-js/presence 0.54.0
  • @zag-js/progress 0.54.0
  • @zag-js/radio-group 0.54.0
  • @zag-js/rating-group 0.54.0
  • @zag-js/select 0.54.0
  • @zag-js/slider 0.54.0
  • @zag-js/solid 0.54.0
  • @zag-js/splitter 0.54.0
  • @zag-js/switch 0.54.0
  • @zag-js/tabs 0.54.0
  • @zag-js/tags-input 0.54.0
  • @zag-js/toast 0.54.0
  • @zag-js/toggle-group 0.54.0
  • @zag-js/tooltip 0.54.0
  • @zag-js/tree-view 0.54.0
  • @zag-js/types 0.54.0
  • @biomejs/biome 1.8.0
  • @release-it/keep-a-changelog 5.0.0
  • @solidjs/testing-library 0.8.8
  • @storybook/addon-a11y 8.1.6
  • @storybook/addon-essentials 8.1.6
  • @testing-library/dom 10.1.0
  • @testing-library/jest-dom 6.4.5
  • @testing-library/user-event 14.5.2
  • @types/jsdom 21.1.7
  • @types/testing-library__jest-dom 5.14.9
  • globby 14.0.1
  • jsdom 24.1.0
  • lucide-solid 0.390.0
  • release-it 17.3.0
  • resize-observer-polyfill 1.5.1
  • rollup 4.18.0
  • rollup-preset-solid 2.0.1
  • solid-js 1.8.17
  • storybook 8.1.6
  • storybook-solidjs 1.0.0-beta.2
  • storybook-solidjs-vite 1.0.0-beta.2
  • typescript 5.4.5
  • vite 5.2.12
  • vite-plugin-solid 2.10.2
  • vitest 1.6.0
  • solid-js >=1.6.0
packages/svelte/package.json
  • @zag-js/avatar 0.54.0
  • @zag-js/core 0.54.0
  • @zag-js/svelte 0.54.0
  • @sveltejs/adapter-auto 3.2.1
  • @sveltejs/kit 2.5.10
  • @sveltejs/package 2.3.1
  • @sveltejs/vite-plugin-svelte 3.1.1
  • publint 0.2.8
  • svelte 5.0.0-next.148
  • svelte-check 3.8.0
  • tslib 2.6.3
  • typescript 5.4.5
  • vite 5.2.12
  • vitest 1.6.0
  • svelte 5.0.0-next.148
packages/vue/package.json
  • @zag-js/accordion 0.54.0
  • @zag-js/avatar 0.54.0
  • @zag-js/carousel 0.54.0
  • @zag-js/checkbox 0.54.0
  • @zag-js/clipboard 0.54.0
  • @zag-js/collapsible 0.54.0
  • @zag-js/color-picker 0.54.0
  • @zag-js/combobox 0.54.0
  • @zag-js/date-picker 0.54.0
  • @zag-js/dialog 0.54.0
  • @zag-js/dom-query 0.54.0
  • @zag-js/editable 0.54.0
  • @zag-js/file-upload 0.54.0
  • @zag-js/hover-card 0.54.0
  • @zag-js/i18n-utils 0.54.0
  • @zag-js/file-utils 0.54.0
  • @zag-js/menu 0.54.0
  • @zag-js/number-input 0.54.0
  • @zag-js/pagination 0.54.0
  • @zag-js/pin-input 0.54.0
  • @zag-js/popover 0.54.0
  • @zag-js/presence 0.54.0
  • @zag-js/progress 0.54.0
  • @zag-js/radio-group 0.54.0
  • @zag-js/rating-group 0.54.0
  • @zag-js/select 0.54.0
  • @zag-js/slider 0.54.0
  • @zag-js/splitter 0.54.0
  • @zag-js/switch 0.54.0
  • @zag-js/tabs 0.54.0
  • @zag-js/tags-input 0.54.0
  • @zag-js/toast 0.54.0
  • @zag-js/toggle-group 0.54.0
  • @zag-js/tooltip 0.54.0
  • @zag-js/tree-view 0.54.0
  • @zag-js/types 0.54.0
  • @zag-js/vue 0.54.0
  • @biomejs/biome 1.8.0
  • @histoire/plugin-vue 0.17.17
  • @release-it/keep-a-changelog 5.0.0
  • @testing-library/dom 10.1.0
  • @testing-library/jest-dom 6.4.5
  • @testing-library/user-event 14.5.2
  • @testing-library/vue 8.0.3
  • @types/jsdom 21.1.7
  • @types/testing-library__jest-dom 5.14.9
  • @vitejs/plugin-vue 5.0.5
  • @vitejs/plugin-vue-jsx 4.0.0
  • @vue/compiler-sfc 3.4.27
  • globby 14.0.1
  • histoire 0.17.17
  • jsdom 24.1.0
  • lucide-vue-next 0.390.0
  • release-it 17.3.0
  • resize-observer-polyfill 1.5.1
  • typescript 5.4.5
  • vite 5.2.12
  • vite-plugin-dts 3.9.1
  • vitest 1.6.0
  • vue 3.4.27
  • vue-tsc 2.0.19
  • vue >=3.0.0
scripts/package.json
  • @types/fs-extra 11.0.4
  • @types/voca 1.4.5
  • find-up 7.0.0
  • fs-extra 11.2.0
  • globby 14.0.1
  • pkg-dir 8.0.0
  • prettier 3.3.1
  • prettier-plugin-organize-imports 3.2.4
  • ts-morph 22.0.0
  • ts-pattern 5.1.2
  • typescript 5.4.5
  • voca 1.4.1
website/package.json
  • @auth/prisma-adapter 2.2.0
  • @biomejs/biome 1.8.0
  • @effect/schema 0.67.21
  • @icons-pack/react-simple-icons 9.5.0
  • @pandacss/dev 0.40.1
  • @park-ui/panda-preset 0.38.0
  • @prisma/client 5.15.0
  • @shikijs/transformers 1.6.2
  • @types/react 18.3.3
  • @types/react-dom 18.3.0
  • @uidotdev/usehooks 2.4.1
  • @zag-js/anatomy-icons 0.54.0
  • @zag-js/docs 0.54.0
  • effect 3.3.0
  • next 14.2.3
  • next-auth 5.0.0-beta.19
  • next-themes 0.3.0
  • pandacss-preset-typography 0.1.5
  • prisma 5.15.0
  • react 18.3.1
  • react-dom 18.3.1
  • rehype-autolink-headings 7.1.0
  • rehype-slug 6.0.0
  • shiki 1.6.2
  • typescript 5.4.5
  • velite 0.1.0-rc.3

  • Check this box to trigger a request for Renovate to run again on this repository

[Select] [Vue] [Feature]: Custom data structure

Hello,

This is related to #826. It would be great to be able to use a custom data structure for the Select component. This would make it possible to use any data source without having to translate it into { label: "", value: "" }.

Use case:

Consider this scenario; currently, I'm trying to implement this with a list of currencies. The currency object structure is:

{
  code: "USD",
  decimal_digits: 2,
  name: "US Dollar",
  name_plural: "US dollars",
  rounding: 0,
  symbol:  "$",
  symbol_native:  "$",
}

It would be great to use this data structure directly within the default slot of SelectOption and subsequently sync it with my state management without additional fuss. At the very least, being able to pass it in addition to the label and value keys would be potentially sufficient. For example:

{
  label: "US Dollar",
  value: "",
  customData: {
    code: "USD",
    decimal_digits: 2,
    name: "US Dollar",
    name_plural: "US dollars",
    rounding: 0,
    symbol:  "$",
    symbol_native:  "$",
}
}

Currently any additional data is stripped from the selected option.

I'm not sure if changing this would affect accessibility adversely, but just throwing it out there as I think it would greatly increase the flexibility of the component.

feat: Add Visual Testing Playgrounds

Currently, Ark uses the PreviewJS extension to preview component stories in all the frameworks.

Now with the release of Storybook v7, we would like to use this tool instead to provide more reliable and robust support in visual testing.

Primary points to consider:

  • Storybook has to be initialized within each individual framework, and not at the root. (This is recommended by the SB core team)
  • Look at doing the setup in the React package first as the baseline, then mirror with Vue, then SolidJS.
    • Investigate if there is still added configs needed for Solid (It looks like there is a pending PR to add Solid docs to SB for reference)
  • Use Storybook Vite Builder since the packages are set up with this bundler.

Edit: The React package has been given Storybook, but ran into issues for Vue. This will be incremental in trying to improve visual testing for all the packages.

  • Add Storybook for React - #768
  • Add Histoire or Vite Playground for Vue
  • Add Storybook or Other Option for SolidJS

Homepage: Cannot click on checkbox items in menu example

Description

When I open this menu and use arrow keys to navigate through items in the menu I expect all items clickable e.g. radio group items are all clickable but checkbox group items are not

image

Link to Reproduction

https://ark-ui.com/

Steps to reproduce

Ark UI Version

Current

Framework

  • React
  • Solid
  • Vue

Browser

Chrome 112.0.5615.165 (Official Build) (64-bit)

Additional Information

No response

[Vue]: Add 'as' prop to all components

Description

This is somewhat related to #842

In general, it would be great if all the Vue components accepted the as prop which allows rendering them as a particular element.

In reference to the above issue, it would allow using the Select component as a wrapper itself (or none if omitted) rather than adding a separate one around it.

But, in general I think it would allow greater customization across the library as whole.

Proposed Solution or API

A couple examples:

<Select as="div">
    <SelectContent as="div">
        <SelectOption as="div" />
    </SelectContent>
</Select

Chances are you wouldn't want to change SelectContent and SelectOption from their default ul and li tags. This is purely to illustrate the idea.

<Tabs as="section">
    <TabTrigger as="button" />
    <TabContent as="article" />
</Tabs>

Again; not sure this would make sense semantically speaking. Just illustrating.

Additional Information

No response

Expose {component}SplitProps

hey ! when wrapping components with ark-ui, I'd love to have some "splitProps" utils that would automatically split between my component props & the ones that can be passed to the ark-ui component

current implementation (props taken from the source here):
image

wanted:
image

Fix issue with read-only values in pin-input

This lets you still modify the value

export const Basic = () => (
  <PinInput value={["1", "2", "3"]}>
    {[0, 1, 2].map((id, index) => (
      <PinInputField key={id} index={index} />
    ))}
  </PinInput>
)

Module '"@ark-ui/solid"' has no exported member 'Dialog'

Hi friends! Sorry if it's too early for stuff like this, but I'm not able to import any components for the Dialog. When looking at intellisense there's actually only a handful of things that I can import.

image

@ark-ui/solid version: "^0.0.0-rc-20221106094212"
solid-js version: 1.6.8

If there's anything else I can do to help let me know! Thanks!

[Vue]: Unique ID doesn't work in SSR

Hey again,

Stumbled on an issue while using various components. The unique id created with the useId() utility within the component and passed to the machine isn't unique when using SSR. In addition, any id prop passed to the component is ignored. Doing a brief scan, it looks like some components are also still missing the id prop.

As of now, it seems the only solutions are either:

  1. Wrap every component in <ClientOnly>.

  2. Develop an SPA.

These reproductions show some issues stemming from this. In the Select repro, the second menu position is not where it should be. In the Editable repro, the active styling remains on the second input when focusing between the two inputs. In either one, wrapping the components in ClientOnly or adding ssr: false to the nuxt.config.ts should fix the issues and create a different id as expected (which you can see in the DOM).

https://stackblitz.com/edit/nuxt-starter-xzqjnc?file=app.vue

https://stackblitz.com/edit/nuxt-starter-g6mate?file=nuxt.config.ts

Hope this helps. Perhaps there's another solution I'm unaware of as well.

[Dialog] [Vue]: open prop not working as expected

Description

Here's my daily bug report 😜

I am currently trying to create a couple different generic dialog components and found the open prop to not be working as I expected. I need to be able to control the state of the dialog from the parent and so I was hoping to be able to pass the open prop through my custom dialog component and bind it to Dialog, however nothing happens...the dialog does not open.

The only way I've found is to either include the dialog trigger component within my custom dialog component (which essentially eliminates reusability) or pass in the trigger component through a slot which is not always ideal either.

Being able to trigger the dialog through a reactive variable in the parent or some global state is sometimes ideal, for example, If I have multiple different buttons throughout my app that activate the same dialog...

P.S. I've also swapped out the DialogCloseTrigger component within the custom dialog to illustrate the same effect (or lack thereof), not because I have a particular use-case for not using the close trigger component.

Link to Reproduction

https://stackblitz.com/edit/nuxt-starter-3jzcrb?file=app.vue,components%2FCustomDialog.vue

Steps to reproduce

  1. Click on "Open dialog" button.
  2. See the state of the dialogIsOpen ref above the button (but dialog not open).
  3. Change the initial ref value to true.
  4. Try closing the dialog.
  5. See the state of the dialogIsOpen ref above the button (but dialog not close).

Ark UI Version

0.2

Framework

  • React
  • Solid
  • Vue

Browser

113.0.5672.63

Additional Information

No response

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.