├── .cursorrules
├── .github
├── FUNDING.yml
├── ISSUE_TEMPLATE
│ ├── bug_report.yml
│ └── config.yml
├── composite-actions
│ └── install
│ │ └── action.yml
└── workflows
│ ├── pkg-pr.yml
│ └── quality.yml
├── .gitignore
├── .prettierrc
├── .storybook
├── styles.css
└── styles
│ ├── accordion.css
│ ├── angle-slider.css
│ ├── avatar.css
│ ├── carousel.css
│ ├── checkbox.css
│ ├── collapsible.css
│ ├── color-picker.css
│ ├── combobox.css
│ ├── date-picker.css
│ ├── dialog.css
│ ├── field.css
│ ├── file-upload.css
│ ├── floating-panel.css
│ ├── hover-card.css
│ ├── listbox.css
│ ├── menu.css
│ ├── number-input.css
│ ├── pagination.css
│ ├── password-input.css
│ ├── pin-input.css
│ ├── popover.css
│ ├── presence.css
│ ├── progress.css
│ ├── qr-code.css
│ ├── radio-group.css
│ ├── segment-group.css
│ ├── select.css
│ ├── signature-pad.css
│ ├── slider.css
│ ├── splitter.css
│ ├── steps.css
│ ├── switch.css
│ ├── tabs.css
│ ├── tags-input.css
│ ├── time-picker.css
│ ├── timer.css
│ ├── toast.css
│ ├── toggle-group.css
│ ├── tooltip.css
│ ├── tour.css
│ └── tree-view.css
├── .vscode
└── settings.json
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── biome.json
├── bun.lock
├── bunfig.toml
├── lefthook.yml
├── package.json
├── packages
├── react
│ ├── .storybook
│ │ ├── main.ts
│ │ └── preview.ts
│ ├── CHANGELOG.md
│ ├── LICENSE
│ ├── README.md
│ ├── clean-package.config.json
│ ├── package.json
│ ├── src
│ │ ├── components
│ │ │ ├── accordion
│ │ │ │ ├── accordion-context.tsx
│ │ │ │ ├── accordion-item-content.tsx
│ │ │ │ ├── accordion-item-context.tsx
│ │ │ │ ├── accordion-item-indicator.tsx
│ │ │ │ ├── accordion-item-trigger.tsx
│ │ │ │ ├── accordion-item.tsx
│ │ │ │ ├── accordion-root-provider.tsx
│ │ │ │ ├── accordion-root.tsx
│ │ │ │ ├── accordion.anatomy.ts
│ │ │ │ ├── accordion.stories.tsx
│ │ │ │ ├── accordion.ts
│ │ │ │ ├── examples
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── collapsible.tsx
│ │ │ │ │ ├── context
│ │ │ │ │ │ ├── focusedValue.tsx
│ │ │ │ │ │ ├── getItemState.tsx
│ │ │ │ │ │ ├── setValue.tsx
│ │ │ │ │ │ └── value.tsx
│ │ │ │ │ ├── controlled.tsx
│ │ │ │ │ ├── disabled.tsx
│ │ │ │ │ ├── horizontal.tsx
│ │ │ │ │ ├── lazy-mount.tsx
│ │ │ │ │ ├── multiple.tsx
│ │ │ │ │ ├── render-prop.tsx
│ │ │ │ │ ├── root-provider.tsx
│ │ │ │ │ ├── vertical.tsx
│ │ │ │ │ └── with-slider.tsx
│ │ │ │ ├── index.ts
│ │ │ │ ├── tests
│ │ │ │ │ ├── accordion.test.tsx
│ │ │ │ │ └── basic.tsx
│ │ │ │ ├── use-accordion-context.ts
│ │ │ │ ├── use-accordion-item-context.ts
│ │ │ │ ├── use-accordion-item-props-context.ts
│ │ │ │ └── use-accordion.ts
│ │ │ ├── anatomy.ts
│ │ │ ├── angle-slider
│ │ │ │ ├── angle-slider-context.tsx
│ │ │ │ ├── angle-slider-control.tsx
│ │ │ │ ├── angle-slider-hidden-input.tsx
│ │ │ │ ├── angle-slider-label.tsx
│ │ │ │ ├── angle-slider-marker-group.tsx
│ │ │ │ ├── angle-slider-marker.tsx
│ │ │ │ ├── angle-slider-root-provider.tsx
│ │ │ │ ├── angle-slider-root.tsx
│ │ │ │ ├── angle-slider-thumb.tsx
│ │ │ │ ├── angle-slider-value-text.tsx
│ │ │ │ ├── angle-slider.anatomy.tsx
│ │ │ │ ├── angle-slider.stories.tsx
│ │ │ │ ├── angle-slider.ts
│ │ │ │ ├── examples
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── controlled.tsx
│ │ │ │ │ └── step.tsx
│ │ │ │ ├── index.ts
│ │ │ │ ├── tests
│ │ │ │ │ ├── angle-slider.test.tsx
│ │ │ │ │ └── basic.tsx
│ │ │ │ ├── use-angle-slider-context.ts
│ │ │ │ └── use-angle-slider.ts
│ │ │ ├── avatar
│ │ │ │ ├── avatar-context.tsx
│ │ │ │ ├── avatar-fallback.tsx
│ │ │ │ ├── avatar-image.tsx
│ │ │ │ ├── avatar-root-provider.tsx
│ │ │ │ ├── avatar-root.tsx
│ │ │ │ ├── avatar.anatomy.ts
│ │ │ │ ├── avatar.stories.tsx
│ │ │ │ ├── avatar.ts
│ │ │ │ ├── examples
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── closed.tsx
│ │ │ │ │ ├── context.tsx
│ │ │ │ │ ├── events.tsx
│ │ │ │ │ ├── provider.tsx
│ │ │ │ │ └── root-provider.tsx
│ │ │ │ ├── index.ts
│ │ │ │ ├── tests
│ │ │ │ │ ├── avatar.test.tsx
│ │ │ │ │ └── basic.tsx
│ │ │ │ ├── use-avatar-context.ts
│ │ │ │ └── use-avatar.ts
│ │ │ ├── carousel
│ │ │ │ ├── carousel-autoplay-trigger.tsx
│ │ │ │ ├── carousel-context.tsx
│ │ │ │ ├── carousel-control.tsx
│ │ │ │ ├── carousel-indicator-group.tsx
│ │ │ │ ├── carousel-indicator.tsx
│ │ │ │ ├── carousel-item-group.tsx
│ │ │ │ ├── carousel-item.tsx
│ │ │ │ ├── carousel-next-trigger.tsx
│ │ │ │ ├── carousel-prev-trigger.tsx
│ │ │ │ ├── carousel-root-provider.tsx
│ │ │ │ ├── carousel-root.tsx
│ │ │ │ ├── carousel.anatomy.ts
│ │ │ │ ├── carousel.stories.tsx
│ │ │ │ ├── carousel.test.tsx
│ │ │ │ ├── carousel.ts
│ │ │ │ ├── examples
│ │ │ │ │ ├── autoplay.tsx
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── controlled.tsx
│ │ │ │ │ └── root-provider.tsx
│ │ │ │ ├── index.ts
│ │ │ │ ├── use-carousel-context.ts
│ │ │ │ └── use-carousel.ts
│ │ │ ├── checkbox
│ │ │ │ ├── checkbox-context.tsx
│ │ │ │ ├── checkbox-control.tsx
│ │ │ │ ├── checkbox-group.tsx
│ │ │ │ ├── checkbox-hidden-input.tsx
│ │ │ │ ├── checkbox-indicator.tsx
│ │ │ │ ├── checkbox-label.tsx
│ │ │ │ ├── checkbox-root-provider.tsx
│ │ │ │ ├── checkbox-root.tsx
│ │ │ │ ├── checkbox.anatomy.ts
│ │ │ │ ├── checkbox.stories.tsx
│ │ │ │ ├── checkbox.ts
│ │ │ │ ├── examples
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── controlled.tsx
│ │ │ │ │ ├── group-controlled.tsx
│ │ │ │ │ ├── group-with-form.tsx
│ │ │ │ │ ├── group-with-invalid.tsx
│ │ │ │ │ ├── group-with-select-all.tsx
│ │ │ │ │ ├── group.tsx
│ │ │ │ │ ├── indeterminate.tsx
│ │ │ │ │ ├── render-prop.tsx
│ │ │ │ │ ├── root-provider.tsx
│ │ │ │ │ └── with-field.tsx
│ │ │ │ ├── index.ts
│ │ │ │ ├── tests
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── checkbox.test.tsx
│ │ │ │ │ └── controlled.tsx
│ │ │ │ ├── use-checkbox-context.ts
│ │ │ │ ├── use-checkbox-group-context.tsx
│ │ │ │ ├── use-checkbox-group.ts
│ │ │ │ └── use-checkbox.ts
│ │ │ ├── client-only
│ │ │ │ ├── client-only.stories.tsx
│ │ │ │ ├── client-only.tsx
│ │ │ │ ├── examples
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ └── with-fallback.tsx
│ │ │ │ └── index.ts
│ │ │ ├── clipboard
│ │ │ │ ├── clipboard-context.tsx
│ │ │ │ ├── clipboard-control.tsx
│ │ │ │ ├── clipboard-indicator.tsx
│ │ │ │ ├── clipboard-input.tsx
│ │ │ │ ├── clipboard-label.tsx
│ │ │ │ ├── clipboard-root-provider.tsx
│ │ │ │ ├── clipboard-root.tsx
│ │ │ │ ├── clipboard-trigger.tsx
│ │ │ │ ├── clipboard-value-text.tsx
│ │ │ │ ├── clipboard.anatomy.ts
│ │ │ │ ├── clipboard.stories.tsx
│ │ │ │ ├── clipboard.ts
│ │ │ │ ├── examples
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── render-fn.tsx
│ │ │ │ │ └── root-provider.tsx
│ │ │ │ ├── index.ts
│ │ │ │ ├── tests
│ │ │ │ │ └── clipboard.test.tsx
│ │ │ │ ├── use-clipboard-context.ts
│ │ │ │ └── use-clipboard.ts
│ │ │ ├── collapsible
│ │ │ │ ├── collapsible-content.tsx
│ │ │ │ ├── collapsible-context.tsx
│ │ │ │ ├── collapsible-indicator.tsx
│ │ │ │ ├── collapsible-root-provider.tsx
│ │ │ │ ├── collapsible-root.tsx
│ │ │ │ ├── collapsible-trigger.tsx
│ │ │ │ ├── collapsible.anatomy.ts
│ │ │ │ ├── collapsible.stories.tsx
│ │ │ │ ├── collapsible.ts
│ │ │ │ ├── examples
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── initial-open.tsx
│ │ │ │ │ ├── lazy-mount-and-unmount-on-exit.tsx
│ │ │ │ │ ├── lazy-mount.tsx
│ │ │ │ │ ├── on-exit-complete.tsx
│ │ │ │ │ ├── root-provider.tsx
│ │ │ │ │ └── unmount-on-exit.tsx
│ │ │ │ ├── index.ts
│ │ │ │ ├── split-collapsible-props.ts
│ │ │ │ ├── tests
│ │ │ │ │ └── collapsible.test.tsx
│ │ │ │ ├── use-collapsible-context.ts
│ │ │ │ └── use-collapsible.ts
│ │ │ ├── collection.ts
│ │ │ ├── color-picker
│ │ │ │ ├── color-picker-area-background.tsx
│ │ │ │ ├── color-picker-area-thumb.tsx
│ │ │ │ ├── color-picker-area.tsx
│ │ │ │ ├── color-picker-channel-input.tsx
│ │ │ │ ├── color-picker-channel-slider-label.tsx
│ │ │ │ ├── color-picker-channel-slider-thumb.tsx
│ │ │ │ ├── color-picker-channel-slider-track.tsx
│ │ │ │ ├── color-picker-channel-slider-value-text.tsx
│ │ │ │ ├── color-picker-channel-slider.tsx
│ │ │ │ ├── color-picker-content.tsx
│ │ │ │ ├── color-picker-context.tsx
│ │ │ │ ├── color-picker-control.tsx
│ │ │ │ ├── color-picker-eye-dropper-trigger.tsx
│ │ │ │ ├── color-picker-format-select.tsx
│ │ │ │ ├── color-picker-format-trigger.tsx
│ │ │ │ ├── color-picker-hidden-input.tsx
│ │ │ │ ├── color-picker-label.tsx
│ │ │ │ ├── color-picker-positioner.tsx
│ │ │ │ ├── color-picker-root-provider.tsx
│ │ │ │ ├── color-picker-root.tsx
│ │ │ │ ├── color-picker-swatch-group.tsx
│ │ │ │ ├── color-picker-swatch-indicator.tsx
│ │ │ │ ├── color-picker-swatch-trigger.tsx
│ │ │ │ ├── color-picker-swatch.tsx
│ │ │ │ ├── color-picker-transparency-grid.tsx
│ │ │ │ ├── color-picker-trigger.tsx
│ │ │ │ ├── color-picker-value-swatch.tsx
│ │ │ │ ├── color-picker-value-text.tsx
│ │ │ │ ├── color-picker-view.tsx
│ │ │ │ ├── color-picker.anatomy.ts
│ │ │ │ ├── color-picker.stories.tsx
│ │ │ │ ├── color-picker.ts
│ │ │ │ ├── examples
│ │ │ │ │ ├── _template.tsx
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── controlled.tsx
│ │ │ │ │ ├── inline.tsx
│ │ │ │ │ ├── on-change-end.tsx
│ │ │ │ │ ├── root-provider.tsx
│ │ │ │ │ ├── slider-only.tsx
│ │ │ │ │ ├── swatch-only.tsx
│ │ │ │ │ ├── with-field.tsx
│ │ │ │ │ └── with-form-register.tsx
│ │ │ │ ├── index.ts
│ │ │ │ ├── tests
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ └── color-picker.test.tsx
│ │ │ │ ├── use-color-picker-area-props-context.ts
│ │ │ │ ├── use-color-picker-channel-props-context.ts
│ │ │ │ ├── use-color-picker-context.ts
│ │ │ │ ├── use-color-picker-format-context.ts
│ │ │ │ ├── use-color-picker-swatch-props-context.ts
│ │ │ │ └── use-color-picker.ts
│ │ │ ├── combobox
│ │ │ │ ├── combobox-clear-trigger.tsx
│ │ │ │ ├── combobox-content.tsx
│ │ │ │ ├── combobox-context.tsx
│ │ │ │ ├── combobox-control.tsx
│ │ │ │ ├── combobox-input.tsx
│ │ │ │ ├── combobox-item-context.tsx
│ │ │ │ ├── combobox-item-group-label.tsx
│ │ │ │ ├── combobox-item-group.tsx
│ │ │ │ ├── combobox-item-indicator.tsx
│ │ │ │ ├── combobox-item-text.tsx
│ │ │ │ ├── combobox-item.tsx
│ │ │ │ ├── combobox-label.tsx
│ │ │ │ ├── combobox-list.tsx
│ │ │ │ ├── combobox-positioner.tsx
│ │ │ │ ├── combobox-root-provider.tsx
│ │ │ │ ├── combobox-root.tsx
│ │ │ │ ├── combobox-trigger.tsx
│ │ │ │ ├── combobox.anatomy.ts
│ │ │ │ ├── combobox.stories.tsx
│ │ │ │ ├── combobox.ts
│ │ │ │ ├── examples
│ │ │ │ │ ├── advanced.tsx
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── filter.tsx
│ │ │ │ │ ├── links.tsx
│ │ │ │ │ ├── root-provider.tsx
│ │ │ │ │ └── with-field.tsx
│ │ │ │ ├── index.ts
│ │ │ │ ├── tests
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ └── combobox.test.tsx
│ │ │ │ ├── use-combobox-context.ts
│ │ │ │ ├── use-combobox-item-context.ts
│ │ │ │ ├── use-combobox-item-group-props-context.ts
│ │ │ │ ├── use-combobox-item-props-context.ts
│ │ │ │ └── use-combobox.ts
│ │ │ ├── date-picker
│ │ │ │ ├── date-picker-clear-trigger.tsx
│ │ │ │ ├── date-picker-content.tsx
│ │ │ │ ├── date-picker-context.tsx
│ │ │ │ ├── date-picker-control.tsx
│ │ │ │ ├── date-picker-input.tsx
│ │ │ │ ├── date-picker-label.tsx
│ │ │ │ ├── date-picker-month-select.tsx
│ │ │ │ ├── date-picker-next-trigger.tsx
│ │ │ │ ├── date-picker-positioner.tsx
│ │ │ │ ├── date-picker-preset-trigger.tsx
│ │ │ │ ├── date-picker-prev-trigger.tsx
│ │ │ │ ├── date-picker-range-text.tsx
│ │ │ │ ├── date-picker-root-provider.tsx
│ │ │ │ ├── date-picker-root.tsx
│ │ │ │ ├── date-picker-table-body.tsx
│ │ │ │ ├── date-picker-table-cell-trigger.tsx
│ │ │ │ ├── date-picker-table-cell.tsx
│ │ │ │ ├── date-picker-table-head.tsx
│ │ │ │ ├── date-picker-table-header.tsx
│ │ │ │ ├── date-picker-table-row.tsx
│ │ │ │ ├── date-picker-table.tsx
│ │ │ │ ├── date-picker-trigger.tsx
│ │ │ │ ├── date-picker-view-control.tsx
│ │ │ │ ├── date-picker-view-trigger.tsx
│ │ │ │ ├── date-picker-view.tsx
│ │ │ │ ├── date-picker-year-select.tsx
│ │ │ │ ├── date-picker.anatomy.ts
│ │ │ │ ├── date-picker.stories.tsx
│ │ │ │ ├── date-picker.ts
│ │ │ │ ├── examples
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── controlled.tsx
│ │ │ │ │ ├── format-parse.tsx
│ │ │ │ │ ├── month-picker.tsx
│ │ │ │ │ ├── range.tsx
│ │ │ │ │ ├── root-provider.tsx
│ │ │ │ │ ├── standalone.tsx
│ │ │ │ │ └── year-picker.tsx
│ │ │ │ ├── index.ts
│ │ │ │ ├── tests
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ └── date-picker.test.tsx
│ │ │ │ ├── use-date-picker-context.ts
│ │ │ │ ├── use-date-picker-table-cell-props-context.ts
│ │ │ │ ├── use-date-picker-table-props-context.ts
│ │ │ │ ├── use-date-picker-view-props-context.ts
│ │ │ │ └── use-date-picker.ts
│ │ │ ├── dialog
│ │ │ │ ├── dialog-backdrop.tsx
│ │ │ │ ├── dialog-close-trigger.tsx
│ │ │ │ ├── dialog-content.tsx
│ │ │ │ ├── dialog-context.tsx
│ │ │ │ ├── dialog-description.tsx
│ │ │ │ ├── dialog-positioner.tsx
│ │ │ │ ├── dialog-root-provider.tsx
│ │ │ │ ├── dialog-root.tsx
│ │ │ │ ├── dialog-title.tsx
│ │ │ │ ├── dialog-trigger.tsx
│ │ │ │ ├── dialog.anatomy.ts
│ │ │ │ ├── dialog.stories.tsx
│ │ │ │ ├── dialog.ts
│ │ │ │ ├── examples
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── controlled.tsx
│ │ │ │ │ ├── lazy-mount.tsx
│ │ │ │ │ ├── render-fn.tsx
│ │ │ │ │ └── root-provider.tsx
│ │ │ │ ├── index.ts
│ │ │ │ ├── tests
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ └── dialog.test.tsx
│ │ │ │ ├── use-dialog-context.ts
│ │ │ │ └── use-dialog.ts
│ │ │ ├── download-trigger
│ │ │ │ ├── download-trigger.stories.tsx
│ │ │ │ ├── download-trigger.tsx
│ │ │ │ ├── examples
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── svg.tsx
│ │ │ │ │ └── with-promise.tsx
│ │ │ │ └── index.ts
│ │ │ ├── editable
│ │ │ │ ├── editable-area.tsx
│ │ │ │ ├── editable-cancel-trigger.tsx
│ │ │ │ ├── editable-context.tsx
│ │ │ │ ├── editable-control.tsx
│ │ │ │ ├── editable-edit-trigger.tsx
│ │ │ │ ├── editable-input.tsx
│ │ │ │ ├── editable-label.tsx
│ │ │ │ ├── editable-preview.tsx
│ │ │ │ ├── editable-root-provider.tsx
│ │ │ │ ├── editable-root.tsx
│ │ │ │ ├── editable-submit-trigger.tsx
│ │ │ │ ├── editable.anatomy.ts
│ │ │ │ ├── editable.stories.tsx
│ │ │ │ ├── editable.ts
│ │ │ │ ├── examples
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── custom-controls.tsx
│ │ │ │ │ ├── double-click.tsx
│ │ │ │ │ ├── root-provider.tsx
│ │ │ │ │ └── with-field.tsx
│ │ │ │ ├── index.ts
│ │ │ │ ├── tests
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── controlled.tsx
│ │ │ │ │ └── editable.test.tsx
│ │ │ │ ├── use-editable-context.ts
│ │ │ │ └── use-editable.ts
│ │ │ ├── factory.test.tsx
│ │ │ ├── factory.ts
│ │ │ ├── field
│ │ │ │ ├── examples
│ │ │ │ │ ├── disabled.tsx
│ │ │ │ │ ├── input.tsx
│ │ │ │ │ ├── invalid.tsx
│ │ │ │ │ ├── required-indicator.tsx
│ │ │ │ │ ├── root-provider.tsx
│ │ │ │ │ ├── select.tsx
│ │ │ │ │ ├── shadow-dom.tsx
│ │ │ │ │ ├── textarea-autoresize.tsx
│ │ │ │ │ └── textarea.tsx
│ │ │ │ ├── field-context.tsx
│ │ │ │ ├── field-error-text.tsx
│ │ │ │ ├── field-helper-text.tsx
│ │ │ │ ├── field-input.tsx
│ │ │ │ ├── field-label.tsx
│ │ │ │ ├── field-required-indicator.tsx
│ │ │ │ ├── field-root-provider.tsx
│ │ │ │ ├── field-root.tsx
│ │ │ │ ├── field-select.tsx
│ │ │ │ ├── field-textarea.tsx
│ │ │ │ ├── field.anatomy.ts
│ │ │ │ ├── field.stories.tsx
│ │ │ │ ├── field.test.tsx
│ │ │ │ ├── field.ts
│ │ │ │ ├── index.ts
│ │ │ │ ├── use-field-context.ts
│ │ │ │ └── use-field.ts
│ │ │ ├── fieldset
│ │ │ │ ├── examples
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── phone-input.tsx
│ │ │ │ │ ├── root-provider.tsx
│ │ │ │ │ ├── with-checkbox.tsx
│ │ │ │ │ └── with-field.tsx
│ │ │ │ ├── fieldset-context.tsx
│ │ │ │ ├── fieldset-error-text.tsx
│ │ │ │ ├── fieldset-helper-text.tsx
│ │ │ │ ├── fieldset-legend.tsx
│ │ │ │ ├── fieldset-root-provider.tsx
│ │ │ │ ├── fieldset-root.tsx
│ │ │ │ ├── fieldset.anatomy.ts
│ │ │ │ ├── fieldset.stories.tsx
│ │ │ │ ├── fieldset.test.tsx
│ │ │ │ ├── fieldset.ts
│ │ │ │ ├── index.ts
│ │ │ │ ├── use-fieldset-context.ts
│ │ │ │ └── use-fieldset.ts
│ │ │ ├── file-upload
│ │ │ │ ├── examples
│ │ │ │ │ ├── accepted-file-types.tsx
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── clear-trigger.tsx
│ │ │ │ │ ├── directory-upload.tsx
│ │ │ │ │ ├── form-register.tsx
│ │ │ │ │ ├── form-set-value.tsx
│ │ │ │ │ ├── media-capture.tsx
│ │ │ │ │ ├── root-provider.tsx
│ │ │ │ │ ├── validation.tsx
│ │ │ │ │ └── with-field.tsx
│ │ │ │ ├── file-upload-clear-trigger.tsx
│ │ │ │ ├── file-upload-context.tsx
│ │ │ │ ├── file-upload-dropzone.tsx
│ │ │ │ ├── file-upload-hidden-input.tsx
│ │ │ │ ├── file-upload-item-delete-trigger.tsx
│ │ │ │ ├── file-upload-item-group.tsx
│ │ │ │ ├── file-upload-item-name.tsx
│ │ │ │ ├── file-upload-item-preview-image.tsx
│ │ │ │ ├── file-upload-item-preview.tsx
│ │ │ │ ├── file-upload-item-size-text.tsx
│ │ │ │ ├── file-upload-item.tsx
│ │ │ │ ├── file-upload-label.tsx
│ │ │ │ ├── file-upload-root-provider.tsx
│ │ │ │ ├── file-upload-root.tsx
│ │ │ │ ├── file-upload-trigger.tsx
│ │ │ │ ├── file-upload.anatomy.ts
│ │ │ │ ├── file-upload.stories.tsx
│ │ │ │ ├── file-upload.ts
│ │ │ │ ├── index.ts
│ │ │ │ ├── tests
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ └── file-upload.test.tsx
│ │ │ │ ├── use-file-upload-context.ts
│ │ │ │ ├── use-file-upload-item-props-context.ts
│ │ │ │ └── use-file-upload.ts
│ │ │ ├── floating-panel
│ │ │ │ ├── examples
│ │ │ │ │ ├── anchor-position.tsx
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── controlled-open.tsx
│ │ │ │ │ ├── controlled-position.tsx
│ │ │ │ │ ├── controlled-size.tsx
│ │ │ │ │ ├── lazy-mount.tsx
│ │ │ │ │ └── render-fn.tsx
│ │ │ │ ├── floating-panel-body.tsx
│ │ │ │ ├── floating-panel-close-trigger.tsx
│ │ │ │ ├── floating-panel-content.tsx
│ │ │ │ ├── floating-panel-context.tsx
│ │ │ │ ├── floating-panel-control.tsx
│ │ │ │ ├── floating-panel-drag-trigger.tsx
│ │ │ │ ├── floating-panel-header.tsx
│ │ │ │ ├── floating-panel-positioner.tsx
│ │ │ │ ├── floating-panel-resize-trigger.tsx
│ │ │ │ ├── floating-panel-root-provider.tsx
│ │ │ │ ├── floating-panel-root.tsx
│ │ │ │ ├── floating-panel-stage-trigger.tsx
│ │ │ │ ├── floating-panel-title.tsx
│ │ │ │ ├── floating-panel-trigger.tsx
│ │ │ │ ├── floating-panel.anatomy.ts
│ │ │ │ ├── floating-panel.stories.tsx
│ │ │ │ ├── floating-panel.ts
│ │ │ │ ├── index.ts
│ │ │ │ ├── use-floating-panel-context.ts
│ │ │ │ └── use-floating-panel.ts
│ │ │ ├── focus-trap
│ │ │ │ ├── examples
│ │ │ │ │ ├── autofocus.tsx
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ └── initial-focus.tsx
│ │ │ │ ├── focus-trap.stories.tsx
│ │ │ │ ├── focus-trap.tsx
│ │ │ │ └── index.ts
│ │ │ ├── format
│ │ │ │ ├── examples
│ │ │ │ │ ├── byte-basic.tsx
│ │ │ │ │ ├── byte-sizes.tsx
│ │ │ │ │ ├── byte-with-locale.tsx
│ │ │ │ │ ├── byte-with-unit-display.tsx
│ │ │ │ │ ├── byte-with-unit.tsx
│ │ │ │ │ ├── number-basic.tsx
│ │ │ │ │ ├── number-with-compact.tsx
│ │ │ │ │ ├── number-with-currency.tsx
│ │ │ │ │ ├── number-with-locale.tsx
│ │ │ │ │ ├── number-with-percentage.tsx
│ │ │ │ │ ├── number-with-unit.tsx
│ │ │ │ │ ├── relative-time-basic.tsx
│ │ │ │ │ └── relative-time-short.tsx
│ │ │ │ ├── format-byte.tsx
│ │ │ │ ├── format-number.tsx
│ │ │ │ ├── format-relative-time.tsx
│ │ │ │ ├── format.stories.tsx
│ │ │ │ ├── format.ts
│ │ │ │ └── index.ts
│ │ │ ├── frame
│ │ │ │ ├── examples
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── inherit-styles.tsx
│ │ │ │ │ ├── script.tsx
│ │ │ │ │ └── src-doc.tsx
│ │ │ │ ├── frame-content.tsx
│ │ │ │ ├── frame.stories.tsx
│ │ │ │ ├── frame.tsx
│ │ │ │ └── index.ts
│ │ │ ├── highlight
│ │ │ │ ├── examples
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── ignore-case.tsx
│ │ │ │ │ ├── match-all.tsx
│ │ │ │ │ ├── multiple.tsx
│ │ │ │ │ ├── with-input.tsx
│ │ │ │ │ └── with-repeating-text.tsx
│ │ │ │ ├── highlight.stories.tsx
│ │ │ │ ├── highlight.tsx
│ │ │ │ ├── index.ts
│ │ │ │ └── use-highlight.ts
│ │ │ ├── hover-card
│ │ │ │ ├── examples
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── controlled.tsx
│ │ │ │ │ ├── positioning.tsx
│ │ │ │ │ ├── render-prop.tsx
│ │ │ │ │ └── root-provider.tsx
│ │ │ │ ├── hover-card-arrow-tip.tsx
│ │ │ │ ├── hover-card-arrow.tsx
│ │ │ │ ├── hover-card-content.tsx
│ │ │ │ ├── hover-card-context.tsx
│ │ │ │ ├── hover-card-positioner.tsx
│ │ │ │ ├── hover-card-root-provider.tsx
│ │ │ │ ├── hover-card-root.tsx
│ │ │ │ ├── hover-card-trigger.tsx
│ │ │ │ ├── hover-card.anatomy.ts
│ │ │ │ ├── hover-card.stories.tsx
│ │ │ │ ├── hover-card.ts
│ │ │ │ ├── index.ts
│ │ │ │ ├── tests
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ └── hover-card.test.tsx
│ │ │ │ ├── use-hover-card-context.ts
│ │ │ │ └── use-hover-card.ts
│ │ │ ├── index.ts
│ │ │ ├── listbox
│ │ │ │ ├── examples
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── controlled.tsx
│ │ │ │ │ ├── disabled.tsx
│ │ │ │ │ ├── group.tsx
│ │ │ │ │ ├── multiple.tsx
│ │ │ │ │ ├── root-provider.tsx
│ │ │ │ │ └── value-text.tsx
│ │ │ │ ├── index.ts
│ │ │ │ ├── listbox-content.tsx
│ │ │ │ ├── listbox-context.ts
│ │ │ │ ├── listbox-input.tsx
│ │ │ │ ├── listbox-item-group-label.tsx
│ │ │ │ ├── listbox-item-group.tsx
│ │ │ │ ├── listbox-item-indicator.tsx
│ │ │ │ ├── listbox-item-text.tsx
│ │ │ │ ├── listbox-item.tsx
│ │ │ │ ├── listbox-label.tsx
│ │ │ │ ├── listbox-root-provider.tsx
│ │ │ │ ├── listbox-root.tsx
│ │ │ │ ├── listbox-value-text.tsx
│ │ │ │ ├── listbox.anatomy.ts
│ │ │ │ ├── listbox.stories.tsx
│ │ │ │ ├── listbox.test.tsx
│ │ │ │ ├── listbox.ts
│ │ │ │ ├── use-listbox-context.ts
│ │ │ │ ├── use-listbox-item-context.ts
│ │ │ │ ├── use-listbox-item-group-props.ts
│ │ │ │ ├── use-listbox-item-props-context.ts
│ │ │ │ └── use-listbox.ts
│ │ │ ├── menu
│ │ │ │ ├── examples
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── checkbox.tsx
│ │ │ │ │ ├── context.tsx
│ │ │ │ │ ├── controlled.tsx
│ │ │ │ │ ├── group.tsx
│ │ │ │ │ ├── multiple-menu.tsx
│ │ │ │ │ ├── nested.tsx
│ │ │ │ │ ├── radio-group.tsx
│ │ │ │ │ ├── render-prop.tsx
│ │ │ │ │ ├── root-provider.tsx
│ │ │ │ │ ├── select-event.tsx
│ │ │ │ │ └── separator.tsx
│ │ │ │ ├── index.ts
│ │ │ │ ├── menu-arrow-tip.tsx
│ │ │ │ ├── menu-arrow.tsx
│ │ │ │ ├── menu-checkbox-item.tsx
│ │ │ │ ├── menu-content.tsx
│ │ │ │ ├── menu-context-trigger.tsx
│ │ │ │ ├── menu-context.tsx
│ │ │ │ ├── menu-indicator.tsx
│ │ │ │ ├── menu-item-context.tsx
│ │ │ │ ├── menu-item-group-label.tsx
│ │ │ │ ├── menu-item-group.tsx
│ │ │ │ ├── menu-item-indicator.tsx
│ │ │ │ ├── menu-item-text.tsx
│ │ │ │ ├── menu-item.tsx
│ │ │ │ ├── menu-positioner.tsx
│ │ │ │ ├── menu-radio-item-group.tsx
│ │ │ │ ├── menu-radio-item.tsx
│ │ │ │ ├── menu-root-provider.tsx
│ │ │ │ ├── menu-root.tsx
│ │ │ │ ├── menu-separator.tsx
│ │ │ │ ├── menu-trigger-item.tsx
│ │ │ │ ├── menu-trigger.tsx
│ │ │ │ ├── menu.anatomy.ts
│ │ │ │ ├── menu.stories.tsx
│ │ │ │ ├── menu.ts
│ │ │ │ ├── tests
│ │ │ │ │ └── menu.test.tsx
│ │ │ │ ├── use-menu-context.ts
│ │ │ │ ├── use-menu-item-context.ts
│ │ │ │ ├── use-menu-item-group-context.ts
│ │ │ │ ├── use-menu-machine-context.ts
│ │ │ │ ├── use-menu-option-item-props-context.ts
│ │ │ │ ├── use-menu-trigger-item-context.ts
│ │ │ │ └── use-menu.ts
│ │ │ ├── number-input
│ │ │ │ ├── examples
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── form-usage.tsx
│ │ │ │ │ ├── formatted.tsx
│ │ │ │ │ ├── fraction-digits.tsx
│ │ │ │ │ ├── min-max.tsx
│ │ │ │ │ ├── mouse-wheel.tsx
│ │ │ │ │ ├── no-clamp.tsx
│ │ │ │ │ ├── render-fn.tsx
│ │ │ │ │ ├── root-provider.tsx
│ │ │ │ │ ├── scrubber.tsx
│ │ │ │ │ └── with-field.tsx
│ │ │ │ ├── index.ts
│ │ │ │ ├── number-input-context.tsx
│ │ │ │ ├── number-input-control.tsx
│ │ │ │ ├── number-input-decrement-trigger.tsx
│ │ │ │ ├── number-input-increment-trigger.tsx
│ │ │ │ ├── number-input-input.tsx
│ │ │ │ ├── number-input-label.tsx
│ │ │ │ ├── number-input-root-provider.tsx
│ │ │ │ ├── number-input-root.tsx
│ │ │ │ ├── number-input-scrubber.tsx
│ │ │ │ ├── number-input-value-text.tsx
│ │ │ │ ├── number-input.anatomy.ts
│ │ │ │ ├── number-input.stories.tsx
│ │ │ │ ├── number-input.ts
│ │ │ │ ├── tests
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ └── number-input.test.tsx
│ │ │ │ ├── use-number-input-context.ts
│ │ │ │ └── use-number-input.ts
│ │ │ ├── pagination
│ │ │ │ ├── examples
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── controlled.tsx
│ │ │ │ │ ├── customized.tsx
│ │ │ │ │ ├── link.tsx
│ │ │ │ │ └── root-provider.tsx
│ │ │ │ ├── index.ts
│ │ │ │ ├── pagination-context.tsx
│ │ │ │ ├── pagination-ellipsis.tsx
│ │ │ │ ├── pagination-item.tsx
│ │ │ │ ├── pagination-next-trigger.tsx
│ │ │ │ ├── pagination-prev-trigger.tsx
│ │ │ │ ├── pagination-root-provider.tsx
│ │ │ │ ├── pagination-root.tsx
│ │ │ │ ├── pagination.anatomy.ts
│ │ │ │ ├── pagination.stories.tsx
│ │ │ │ ├── pagination.ts
│ │ │ │ ├── tests
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ └── pagination.test.tsx
│ │ │ │ ├── use-pagination-context.ts
│ │ │ │ └── use-pagination.ts
│ │ │ ├── password-input
│ │ │ │ ├── examples
│ │ │ │ │ ├── autocomplete.tsx
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── controlled-visibility.tsx
│ │ │ │ │ ├── ignore-password-manager.tsx
│ │ │ │ │ ├── root-provider.tsx
│ │ │ │ │ └── with-field.tsx
│ │ │ │ ├── index.ts
│ │ │ │ ├── password-input-context.tsx
│ │ │ │ ├── password-input-control.tsx
│ │ │ │ ├── password-input-indicator.tsx
│ │ │ │ ├── password-input-input.tsx
│ │ │ │ ├── password-input-label.tsx
│ │ │ │ ├── password-input-root-provider.tsx
│ │ │ │ ├── password-input-root.tsx
│ │ │ │ ├── password-input-visibility-trigger.tsx
│ │ │ │ ├── password-input.anatomy.ts
│ │ │ │ ├── password-input.stories.tsx
│ │ │ │ ├── password-input.ts
│ │ │ │ ├── use-password-input-context.ts
│ │ │ │ └── use-password-input.ts
│ │ │ ├── pin-input
│ │ │ │ ├── examples
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── blurred.tsx
│ │ │ │ │ ├── customized.tsx
│ │ │ │ │ ├── initial-value.tsx
│ │ │ │ │ ├── otp-mode.tsx
│ │ │ │ │ ├── root-provider.tsx
│ │ │ │ │ ├── with-autofocus.tsx
│ │ │ │ │ ├── with-field.tsx
│ │ │ │ │ └── with-mask.tsx
│ │ │ │ ├── index.ts
│ │ │ │ ├── pin-input-context.tsx
│ │ │ │ ├── pin-input-control.tsx
│ │ │ │ ├── pin-input-hidden-input.tsx
│ │ │ │ ├── pin-input-input.tsx
│ │ │ │ ├── pin-input-label.tsx
│ │ │ │ ├── pin-input-root-provider.tsx
│ │ │ │ ├── pin-input-root.tsx
│ │ │ │ ├── pin-input.anatomy.ts
│ │ │ │ ├── pin-input.stories.tsx
│ │ │ │ ├── pin-input.ts
│ │ │ │ ├── tests
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ └── pin-input.test.tsx
│ │ │ │ ├── use-pin-input-context.ts
│ │ │ │ └── use-pin-input.ts
│ │ │ ├── popover
│ │ │ │ ├── examples
│ │ │ │ │ ├── anchor.tsx
│ │ │ │ │ ├── arrow.tsx
│ │ │ │ │ ├── as-child.tsx
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── close-behavior.tsx
│ │ │ │ │ ├── controlled.tsx
│ │ │ │ │ ├── disable-outside-click.tsx
│ │ │ │ │ ├── factory.tsx
│ │ │ │ │ ├── initial-focus.tsx
│ │ │ │ │ ├── lazy-mount.tsx
│ │ │ │ │ ├── modal.tsx
│ │ │ │ │ ├── nested-popover.tsx
│ │ │ │ │ ├── on-open-change.tsx
│ │ │ │ │ ├── portalled.tsx
│ │ │ │ │ ├── positioning.tsx
│ │ │ │ │ ├── render-fn.tsx
│ │ │ │ │ ├── root-provider.tsx
│ │ │ │ │ ├── same-width.tsx
│ │ │ │ │ └── with-dialog.tsx
│ │ │ │ ├── index.ts
│ │ │ │ ├── popover-anchor.tsx
│ │ │ │ ├── popover-arrow-tip.tsx
│ │ │ │ ├── popover-arrow.tsx
│ │ │ │ ├── popover-close-trigger.tsx
│ │ │ │ ├── popover-content.tsx
│ │ │ │ ├── popover-context.tsx
│ │ │ │ ├── popover-description.tsx
│ │ │ │ ├── popover-indicator.tsx
│ │ │ │ ├── popover-positioner.tsx
│ │ │ │ ├── popover-root-provider.tsx
│ │ │ │ ├── popover-root.tsx
│ │ │ │ ├── popover-title.tsx
│ │ │ │ ├── popover-trigger.tsx
│ │ │ │ ├── popover.anatomy.ts
│ │ │ │ ├── popover.stories.tsx
│ │ │ │ ├── popover.ts
│ │ │ │ ├── tests
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── controlled.tsx
│ │ │ │ │ └── popover.test.tsx
│ │ │ │ ├── use-popover-context.ts
│ │ │ │ └── use-popover.ts
│ │ │ ├── portal
│ │ │ │ ├── index.ts
│ │ │ │ ├── portal.test.tsx
│ │ │ │ └── portal.tsx
│ │ │ ├── presence
│ │ │ │ ├── examples
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── lazy-mount-and-unmount-on-exit.tsx
│ │ │ │ │ ├── lazy-mount.tsx
│ │ │ │ │ ├── skip-animation-on-mount.tsx
│ │ │ │ │ └── unmount-on-exit.tsx
│ │ │ │ ├── index.ts
│ │ │ │ ├── presence.stories.tsx
│ │ │ │ ├── presence.test.tsx
│ │ │ │ ├── presence.tsx
│ │ │ │ ├── split-presence-props.ts
│ │ │ │ ├── use-presence-context.ts
│ │ │ │ └── use-presence.ts
│ │ │ ├── progress
│ │ │ │ ├── examples
│ │ │ │ │ ├── circular
│ │ │ │ │ │ ├── basic.tsx
│ │ │ │ │ │ ├── controlled.tsx
│ │ │ │ │ │ ├── indeterminate.tsx
│ │ │ │ │ │ ├── initial-value.tsx
│ │ │ │ │ │ ├── min-max.tsx
│ │ │ │ │ │ ├── root-provider.tsx
│ │ │ │ │ │ └── value-text.tsx
│ │ │ │ │ └── linear
│ │ │ │ │ │ ├── basic.tsx
│ │ │ │ │ │ ├── controlled.tsx
│ │ │ │ │ │ ├── indeterminate.tsx
│ │ │ │ │ │ ├── initial-value.tsx
│ │ │ │ │ │ ├── min-max.tsx
│ │ │ │ │ │ ├── root-provider.tsx
│ │ │ │ │ │ ├── value-text.tsx
│ │ │ │ │ │ └── vertical.tsx
│ │ │ │ ├── index.ts
│ │ │ │ ├── progress-circle-range.tsx
│ │ │ │ ├── progress-circle-track.tsx
│ │ │ │ ├── progress-circle.tsx
│ │ │ │ ├── progress-circular.stories.tsx
│ │ │ │ ├── progress-context.tsx
│ │ │ │ ├── progress-label.tsx
│ │ │ │ ├── progress-linear.stories.tsx
│ │ │ │ ├── progress-range.tsx
│ │ │ │ ├── progress-root-provider.tsx
│ │ │ │ ├── progress-root.tsx
│ │ │ │ ├── progress-track.tsx
│ │ │ │ ├── progress-value-text.tsx
│ │ │ │ ├── progress-view.tsx
│ │ │ │ ├── progress.anatomy.ts
│ │ │ │ ├── progress.ts
│ │ │ │ ├── tests
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ └── progress.test.tsx
│ │ │ │ ├── use-progress-context.ts
│ │ │ │ └── use-progress.ts
│ │ │ ├── qr-code
│ │ │ │ ├── examples
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── controlled.tsx
│ │ │ │ │ ├── error-correction.tsx
│ │ │ │ │ ├── root-provider.tsx
│ │ │ │ │ └── with-overlay.tsx
│ │ │ │ ├── index.ts
│ │ │ │ ├── qr-code-context.tsx
│ │ │ │ ├── qr-code-download-trigger.tsx
│ │ │ │ ├── qr-code-frame.tsx
│ │ │ │ ├── qr-code-overlay.tsx
│ │ │ │ ├── qr-code-pattern.tsx
│ │ │ │ ├── qr-code-root-provider.tsx
│ │ │ │ ├── qr-code-root.tsx
│ │ │ │ ├── qr-code.anatomy.ts
│ │ │ │ ├── qr-code.stories.tsx
│ │ │ │ ├── qr-code.ts
│ │ │ │ ├── tests
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ └── qr-code.test.tsx
│ │ │ │ ├── use-qr-code-context.ts
│ │ │ │ └── use-qr-code.ts
│ │ │ ├── radio-group
│ │ │ │ ├── examples
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── disabled.tsx
│ │ │ │ │ ├── initial-value.tsx
│ │ │ │ │ ├── on-event.tsx
│ │ │ │ │ └── root-provider.tsx
│ │ │ │ ├── index.ts
│ │ │ │ ├── radio-group-context.tsx
│ │ │ │ ├── radio-group-indicator.tsx
│ │ │ │ ├── radio-group-item-context.tsx
│ │ │ │ ├── radio-group-item-control.tsx
│ │ │ │ ├── radio-group-item-hidden-input.tsx
│ │ │ │ ├── radio-group-item-text.tsx
│ │ │ │ ├── radio-group-item.tsx
│ │ │ │ ├── radio-group-label.tsx
│ │ │ │ ├── radio-group-root-provider.tsx
│ │ │ │ ├── radio-group-root.tsx
│ │ │ │ ├── radio-group.anatomy.ts
│ │ │ │ ├── radio-group.stories.tsx
│ │ │ │ ├── radio-group.ts
│ │ │ │ ├── tests
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ └── radio-group.test.tsx
│ │ │ │ ├── use-radio-group-context.ts
│ │ │ │ ├── use-radio-group-item-context.ts
│ │ │ │ ├── use-radio-group-item-props-context.ts
│ │ │ │ └── use-radio-group.ts
│ │ │ ├── rating-group
│ │ │ │ ├── examples
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── controlled.tsx
│ │ │ │ │ ├── disabled.tsx
│ │ │ │ │ ├── form-usage.tsx
│ │ │ │ │ ├── half-ratings.tsx
│ │ │ │ │ ├── initial-value.tsx
│ │ │ │ │ ├── read-only.tsx
│ │ │ │ │ ├── root-provider.tsx
│ │ │ │ │ └── with-field.tsx
│ │ │ │ ├── index.ts
│ │ │ │ ├── rating-group-context.tsx
│ │ │ │ ├── rating-group-control.tsx
│ │ │ │ ├── rating-group-hidden-input.tsx
│ │ │ │ ├── rating-group-item-context.tsx
│ │ │ │ ├── rating-group-item.tsx
│ │ │ │ ├── rating-group-label.tsx
│ │ │ │ ├── rating-group-root-provider.tsx
│ │ │ │ ├── rating-group-root.tsx
│ │ │ │ ├── rating-group.anatomy.ts
│ │ │ │ ├── rating-group.stories.tsx
│ │ │ │ ├── rating-group.ts
│ │ │ │ ├── tests
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ └── rating-group.test.tsx
│ │ │ │ ├── use-rating-group-context.ts
│ │ │ │ ├── use-rating-group-item-context.ts
│ │ │ │ └── use-rating-group.ts
│ │ │ ├── segment-group
│ │ │ │ ├── examples
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── conditional.tsx
│ │ │ │ │ ├── controlled.tsx
│ │ │ │ │ ├── disabled.tsx
│ │ │ │ │ ├── initial-value.tsx
│ │ │ │ │ └── root-provider.tsx
│ │ │ │ ├── index.ts
│ │ │ │ ├── segment-group-context.tsx
│ │ │ │ ├── segment-group-indicator.tsx
│ │ │ │ ├── segment-group-item-context.tsx
│ │ │ │ ├── segment-group-item-control.tsx
│ │ │ │ ├── segment-group-item-hidden-input.tsx
│ │ │ │ ├── segment-group-item-text.tsx
│ │ │ │ ├── segment-group-item.tsx
│ │ │ │ ├── segment-group-label.tsx
│ │ │ │ ├── segment-group-root-provider.tsx
│ │ │ │ ├── segment-group-root.tsx
│ │ │ │ ├── segment-group.anatomy.ts
│ │ │ │ ├── segment-group.stories.tsx
│ │ │ │ ├── segment-group.ts
│ │ │ │ ├── tests
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ └── segment-group.test.tsx
│ │ │ │ ├── use-segment-group-context.ts
│ │ │ │ ├── use-segment-group-item-context.ts
│ │ │ │ ├── use-segment-group-item-props-context.ts
│ │ │ │ └── use-segment-group.ts
│ │ │ ├── select
│ │ │ │ ├── examples
│ │ │ │ │ ├── advanced.tsx
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── controlled.tsx
│ │ │ │ │ ├── form-library-with-default-value.tsx
│ │ │ │ │ ├── form-library.tsx
│ │ │ │ │ ├── fully-controlled.tsx
│ │ │ │ │ ├── multiple.tsx
│ │ │ │ │ ├── overflow.tsx
│ │ │ │ │ ├── reactive-collection.tsx
│ │ │ │ │ ├── root-provider.tsx
│ │ │ │ │ ├── select-all.tsx
│ │ │ │ │ └── with-field.tsx
│ │ │ │ ├── index.ts
│ │ │ │ ├── select-clear-trigger.tsx
│ │ │ │ ├── select-content.tsx
│ │ │ │ ├── select-context.tsx
│ │ │ │ ├── select-control.tsx
│ │ │ │ ├── select-hidden-select.tsx
│ │ │ │ ├── select-indicator.tsx
│ │ │ │ ├── select-item-context.tsx
│ │ │ │ ├── select-item-group-label.tsx
│ │ │ │ ├── select-item-group.tsx
│ │ │ │ ├── select-item-indicator.tsx
│ │ │ │ ├── select-item-text.tsx
│ │ │ │ ├── select-item.tsx
│ │ │ │ ├── select-label.tsx
│ │ │ │ ├── select-list.tsx
│ │ │ │ ├── select-positioner.tsx
│ │ │ │ ├── select-root-provider.tsx
│ │ │ │ ├── select-root.tsx
│ │ │ │ ├── select-trigger.tsx
│ │ │ │ ├── select-value-text.tsx
│ │ │ │ ├── select.anatomy.ts
│ │ │ │ ├── select.stories.tsx
│ │ │ │ ├── select.ts
│ │ │ │ ├── tests
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ └── select.test.tsx
│ │ │ │ ├── use-select-context.ts
│ │ │ │ ├── use-select-item-context.ts
│ │ │ │ ├── use-select-item-group-props.tsx
│ │ │ │ ├── use-select-item-props-context.ts
│ │ │ │ └── use-select.ts
│ │ │ ├── signature-pad
│ │ │ │ ├── examples
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── image-preview.tsx
│ │ │ │ │ ├── root-provider.tsx
│ │ │ │ │ └── with-field.tsx
│ │ │ │ ├── index.ts
│ │ │ │ ├── signature-pad-clear-trigger.tsx
│ │ │ │ ├── signature-pad-context.tsx
│ │ │ │ ├── signature-pad-control.tsx
│ │ │ │ ├── signature-pad-guide.tsx
│ │ │ │ ├── signature-pad-hidden-input.tsx
│ │ │ │ ├── signature-pad-label.tsx
│ │ │ │ ├── signature-pad-root-provider.tsx
│ │ │ │ ├── signature-pad-root.tsx
│ │ │ │ ├── signature-pad-segment.tsx
│ │ │ │ ├── signature-pad.anatomy.ts
│ │ │ │ ├── signature-pad.stories.tsx
│ │ │ │ ├── signature-pad.ts
│ │ │ │ ├── tests
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ └── signature-pad.test.tsx
│ │ │ │ ├── use-signature-pad-context.ts
│ │ │ │ └── use-signature-pad.ts
│ │ │ ├── slider
│ │ │ │ ├── examples
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── center-origin.tsx
│ │ │ │ │ ├── dragging-indicator.tsx
│ │ │ │ │ ├── initial-value.tsx
│ │ │ │ │ ├── min-max.tsx
│ │ │ │ │ ├── on-event.tsx
│ │ │ │ │ ├── range.tsx
│ │ │ │ │ ├── root-provider.tsx
│ │ │ │ │ ├── step.tsx
│ │ │ │ │ ├── thumb-overlap.tsx
│ │ │ │ │ ├── vertical.tsx
│ │ │ │ │ └── with-marks.tsx
│ │ │ │ ├── index.ts
│ │ │ │ ├── slider-context.tsx
│ │ │ │ ├── slider-control.tsx
│ │ │ │ ├── slider-dragging-indicator.tsx
│ │ │ │ ├── slider-hidden-input.tsx
│ │ │ │ ├── slider-label.tsx
│ │ │ │ ├── slider-marker-group.tsx
│ │ │ │ ├── slider-marker.tsx
│ │ │ │ ├── slider-range.tsx
│ │ │ │ ├── slider-root-provider.tsx
│ │ │ │ ├── slider-root.tsx
│ │ │ │ ├── slider-thumb.tsx
│ │ │ │ ├── slider-track.tsx
│ │ │ │ ├── slider-value-text.tsx
│ │ │ │ ├── slider.anatomy.ts
│ │ │ │ ├── slider.stories.tsx
│ │ │ │ ├── slider.ts
│ │ │ │ ├── tests
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ └── slider.test.tsx
│ │ │ │ ├── use-slider-context.ts
│ │ │ │ ├── use-slider-thumb-props-context.ts
│ │ │ │ └── use-slider.ts
│ │ │ ├── splitter
│ │ │ │ ├── examples
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── collapsible.tsx
│ │ │ │ │ ├── events.tsx
│ │ │ │ │ ├── multiple-panels.tsx
│ │ │ │ │ ├── render-prop.tsx
│ │ │ │ │ ├── root-provider.tsx
│ │ │ │ │ └── vertical.tsx
│ │ │ │ ├── index.ts
│ │ │ │ ├── splitter-context.tsx
│ │ │ │ ├── splitter-panel.tsx
│ │ │ │ ├── splitter-resize-trigger.tsx
│ │ │ │ ├── splitter-root-provider.tsx
│ │ │ │ ├── splitter-root.tsx
│ │ │ │ ├── splitter.anatomy.ts
│ │ │ │ ├── splitter.stories.tsx
│ │ │ │ ├── splitter.test.tsx
│ │ │ │ ├── splitter.ts
│ │ │ │ ├── tests
│ │ │ │ │ └── basic.tsx
│ │ │ │ ├── use-splitter-context.ts
│ │ │ │ └── use-splitter.ts
│ │ │ ├── steps
│ │ │ │ ├── examples
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ └── root-provider.tsx
│ │ │ │ ├── index.ts
│ │ │ │ ├── steps-completed-content.tsx
│ │ │ │ ├── steps-content.tsx
│ │ │ │ ├── steps-context.tsx
│ │ │ │ ├── steps-indicator.tsx
│ │ │ │ ├── steps-item-context.tsx
│ │ │ │ ├── steps-item.tsx
│ │ │ │ ├── steps-list.tsx
│ │ │ │ ├── steps-next-trigger.tsx
│ │ │ │ ├── steps-prev-trigger.tsx
│ │ │ │ ├── steps-progress.tsx
│ │ │ │ ├── steps-root-provider.tsx
│ │ │ │ ├── steps-root.tsx
│ │ │ │ ├── steps-separator.tsx
│ │ │ │ ├── steps-trigger.tsx
│ │ │ │ ├── steps.anatomy.ts
│ │ │ │ ├── steps.stories.tsx
│ │ │ │ ├── steps.ts
│ │ │ │ ├── use-steps-context.ts
│ │ │ │ ├── use-steps-item-context.ts
│ │ │ │ ├── use-steps-item-props-context.ts
│ │ │ │ └── use-steps.ts
│ │ │ ├── switch
│ │ │ │ ├── examples
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── controlled.tsx
│ │ │ │ │ ├── disabled.tsx
│ │ │ │ │ ├── initial-value.tsx
│ │ │ │ │ ├── render-prop.tsx
│ │ │ │ │ ├── root-provider.tsx
│ │ │ │ │ └── with-field.tsx
│ │ │ │ ├── index.ts
│ │ │ │ ├── switch-context.tsx
│ │ │ │ ├── switch-control.tsx
│ │ │ │ ├── switch-hidden-input.tsx
│ │ │ │ ├── switch-label.tsx
│ │ │ │ ├── switch-root-provider.tsx
│ │ │ │ ├── switch-root.tsx
│ │ │ │ ├── switch-thumb.tsx
│ │ │ │ ├── switch.anatomy.ts
│ │ │ │ ├── switch.stories.tsx
│ │ │ │ ├── switch.ts
│ │ │ │ ├── tests
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ └── switch.test.tsx
│ │ │ │ ├── use-switch-context.ts
│ │ │ │ └── use-switch.ts
│ │ │ ├── tabs
│ │ │ │ ├── examples
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── controlled-forced.tsx
│ │ │ │ │ ├── controlled.tsx
│ │ │ │ │ ├── disabled-tab.tsx
│ │ │ │ │ ├── indicator.tsx
│ │ │ │ │ ├── initial-tab.tsx
│ │ │ │ │ ├── lazy-mount.tsx
│ │ │ │ │ ├── link-trigger.tsx
│ │ │ │ │ ├── manual.tsx
│ │ │ │ │ ├── root-provider.tsx
│ │ │ │ │ └── vertical.tsx
│ │ │ │ ├── index.ts
│ │ │ │ ├── tab-content.tsx
│ │ │ │ ├── tab-indicator.tsx
│ │ │ │ ├── tab-list.tsx
│ │ │ │ ├── tab-trigger.tsx
│ │ │ │ ├── tabs-context.tsx
│ │ │ │ ├── tabs-root-provider.tsx
│ │ │ │ ├── tabs-root.tsx
│ │ │ │ ├── tabs.anatomy.ts
│ │ │ │ ├── tabs.stories.tsx
│ │ │ │ ├── tabs.ts
│ │ │ │ ├── tests
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ └── tabs.test.tsx
│ │ │ │ ├── use-tabs-context.ts
│ │ │ │ └── use-tabs.ts
│ │ │ ├── tags-input
│ │ │ │ ├── examples
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── blur-behavior.tsx
│ │ │ │ │ ├── disabled-editing.tsx
│ │ │ │ │ ├── initial-value.tsx
│ │ │ │ │ ├── max-with-overflow.tsx
│ │ │ │ │ ├── on-event.tsx
│ │ │ │ │ ├── paste-behavior.tsx
│ │ │ │ │ ├── root-provider.tsx
│ │ │ │ │ ├── validated.tsx
│ │ │ │ │ └── with-field.tsx
│ │ │ │ ├── index.ts
│ │ │ │ ├── tags-input-clear-trigger.tsx
│ │ │ │ ├── tags-input-context.tsx
│ │ │ │ ├── tags-input-control.tsx
│ │ │ │ ├── tags-input-hidden-input.tsx
│ │ │ │ ├── tags-input-input.tsx
│ │ │ │ ├── tags-input-item-context.tsx
│ │ │ │ ├── tags-input-item-delete-trigger.tsx
│ │ │ │ ├── tags-input-item-input.tsx
│ │ │ │ ├── tags-input-item-preview.tsx
│ │ │ │ ├── tags-input-item-text.tsx
│ │ │ │ ├── tags-input-item.tsx
│ │ │ │ ├── tags-input-label.tsx
│ │ │ │ ├── tags-input-root-provider.tsx
│ │ │ │ ├── tags-input-root.tsx
│ │ │ │ ├── tags-input.anatomy.ts
│ │ │ │ ├── tags-input.stories.tsx
│ │ │ │ ├── tags-input.ts
│ │ │ │ ├── tests
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ └── tags-input.test.tsx
│ │ │ │ ├── use-tags-input-context.ts
│ │ │ │ ├── use-tags-input-item-context.ts
│ │ │ │ ├── use-tags-input-item-props-context.ts
│ │ │ │ └── use-tags-input.ts
│ │ │ ├── time-picker
│ │ │ │ ├── examples
│ │ │ │ │ ├── advanced.tsx
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ └── root-provider.tsx
│ │ │ │ ├── index.ts
│ │ │ │ ├── tests
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ └── time-picker.test.tsx
│ │ │ │ ├── time-picker-cell.tsx
│ │ │ │ ├── time-picker-clear-trigger.tsx
│ │ │ │ ├── time-picker-column.tsx
│ │ │ │ ├── time-picker-content.tsx
│ │ │ │ ├── time-picker-context.tsx
│ │ │ │ ├── time-picker-control.tsx
│ │ │ │ ├── time-picker-input.tsx
│ │ │ │ ├── time-picker-label.tsx
│ │ │ │ ├── time-picker-positioner.tsx
│ │ │ │ ├── time-picker-root-provider.tsx
│ │ │ │ ├── time-picker-root.tsx
│ │ │ │ ├── time-picker-spacer.tsx
│ │ │ │ ├── time-picker-trigger.tsx
│ │ │ │ ├── time-picker.anatomy.ts
│ │ │ │ ├── time-picker.stories.tsx
│ │ │ │ ├── time-picker.ts
│ │ │ │ ├── use-time-picker-column-props-context.ts
│ │ │ │ ├── use-time-picker-context.ts
│ │ │ │ └── use-time-picker.ts
│ │ │ ├── timer
│ │ │ │ ├── examples
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── countdown.tsx
│ │ │ │ │ ├── custom-interval.tsx
│ │ │ │ │ ├── events.tsx
│ │ │ │ │ ├── pomodoro.tsx
│ │ │ │ │ └── root-provider.tsx
│ │ │ │ ├── index.ts
│ │ │ │ ├── tests
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ └── timer.test.tsx
│ │ │ │ ├── timer-action-trigger.tsx
│ │ │ │ ├── timer-area.tsx
│ │ │ │ ├── timer-context.tsx
│ │ │ │ ├── timer-control.tsx
│ │ │ │ ├── timer-item.tsx
│ │ │ │ ├── timer-root-provider.tsx
│ │ │ │ ├── timer-root.tsx
│ │ │ │ ├── timer-separator.tsx
│ │ │ │ ├── timer.anatomy.ts
│ │ │ │ ├── timer.stories.tsx
│ │ │ │ ├── timer.ts
│ │ │ │ ├── use-timer-context.ts
│ │ │ │ └── use-timer.ts
│ │ │ ├── toast
│ │ │ │ ├── create-toaster.tsx
│ │ │ │ ├── examples
│ │ │ │ │ ├── action.tsx
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ └── update.tsx
│ │ │ │ ├── index.ts
│ │ │ │ ├── tests
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ └── toast.test.tsx
│ │ │ │ ├── toast-action-trigger.tsx
│ │ │ │ ├── toast-close-trigger.tsx
│ │ │ │ ├── toast-context.tsx
│ │ │ │ ├── toast-description.tsx
│ │ │ │ ├── toast-root.tsx
│ │ │ │ ├── toast-title.tsx
│ │ │ │ ├── toast.anatomy.ts
│ │ │ │ ├── toast.stories.tsx
│ │ │ │ ├── toast.ts
│ │ │ │ ├── toaster.tsx
│ │ │ │ └── use-toast-context.ts
│ │ │ ├── toggle-group
│ │ │ │ ├── examples
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── initial-value.tsx
│ │ │ │ │ ├── multiple.tsx
│ │ │ │ │ └── root-provider.tsx
│ │ │ │ ├── index.ts
│ │ │ │ ├── tests
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ └── toggle-group.test.tsx
│ │ │ │ ├── toggle-group-context.tsx
│ │ │ │ ├── toggle-group-item.tsx
│ │ │ │ ├── toggle-group-root-provider.tsx
│ │ │ │ ├── toggle-group-root.tsx
│ │ │ │ ├── toggle-group.anatomy.ts
│ │ │ │ ├── toggle-group.stories.tsx
│ │ │ │ ├── toggle-group.ts
│ │ │ │ ├── use-toggle-group-context.ts
│ │ │ │ └── use-toggle-group.ts
│ │ │ ├── toggle
│ │ │ │ ├── examples
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── controlled.tsx
│ │ │ │ │ ├── disabled.tsx
│ │ │ │ │ └── indicator.tsx
│ │ │ │ ├── index.ts
│ │ │ │ ├── toggle-context.tsx
│ │ │ │ ├── toggle-indicator.tsx
│ │ │ │ ├── toggle-root.tsx
│ │ │ │ ├── toggle.anatomy.ts
│ │ │ │ ├── toggle.stories.tsx
│ │ │ │ ├── toggle.ts
│ │ │ │ ├── use-toggle-context.ts
│ │ │ │ └── use-toggle.ts
│ │ │ ├── tooltip
│ │ │ │ ├── examples
│ │ │ │ │ ├── arrow.tsx
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── controlled.tsx
│ │ │ │ │ ├── positioning.tsx
│ │ │ │ │ ├── render-fn.tsx
│ │ │ │ │ ├── root-provider.tsx
│ │ │ │ │ └── timings.tsx
│ │ │ │ ├── index.ts
│ │ │ │ ├── tests
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ └── tooltip.test.tsx
│ │ │ │ ├── tooltip-arrow-tip.tsx
│ │ │ │ ├── tooltip-arrow.tsx
│ │ │ │ ├── tooltip-content.tsx
│ │ │ │ ├── tooltip-context.tsx
│ │ │ │ ├── tooltip-positioner.tsx
│ │ │ │ ├── tooltip-root-provider.tsx
│ │ │ │ ├── tooltip-root.tsx
│ │ │ │ ├── tooltip-trigger.tsx
│ │ │ │ ├── tooltip.anatomy.ts
│ │ │ │ ├── tooltip.stories.tsx
│ │ │ │ ├── tooltip.ts
│ │ │ │ ├── use-tooltip-context.ts
│ │ │ │ └── use-tooltip.ts
│ │ │ ├── tour
│ │ │ │ ├── examples
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── steps.tsx
│ │ │ │ │ └── tour.tsx
│ │ │ │ ├── index.ts
│ │ │ │ ├── tour-action-trigger.tsx
│ │ │ │ ├── tour-actions.tsx
│ │ │ │ ├── tour-arrow-tip.tsx
│ │ │ │ ├── tour-arrow.tsx
│ │ │ │ ├── tour-backdrop.tsx
│ │ │ │ ├── tour-close-trigger.tsx
│ │ │ │ ├── tour-content.tsx
│ │ │ │ ├── tour-context.tsx
│ │ │ │ ├── tour-control.tsx
│ │ │ │ ├── tour-description.tsx
│ │ │ │ ├── tour-positioner.tsx
│ │ │ │ ├── tour-progress-text.tsx
│ │ │ │ ├── tour-root.tsx
│ │ │ │ ├── tour-spotlight.tsx
│ │ │ │ ├── tour-title.tsx
│ │ │ │ ├── tour.anatomy.ts
│ │ │ │ ├── tour.stories.tsx
│ │ │ │ ├── tour.ts
│ │ │ │ ├── use-tour-context.ts
│ │ │ │ └── use-tour.ts
│ │ │ └── tree-view
│ │ │ │ ├── examples
│ │ │ │ ├── basic.tsx
│ │ │ │ └── root-provider.tsx
│ │ │ │ ├── index.ts
│ │ │ │ ├── tests
│ │ │ │ └── tree-view.test.tsx
│ │ │ │ ├── tree-view-branch-content.tsx
│ │ │ │ ├── tree-view-branch-control.tsx
│ │ │ │ ├── tree-view-branch-indent-guide.tsx
│ │ │ │ ├── tree-view-branch-indicator.tsx
│ │ │ │ ├── tree-view-branch-text.tsx
│ │ │ │ ├── tree-view-branch-trigger.tsx
│ │ │ │ ├── tree-view-branch.tsx
│ │ │ │ ├── tree-view-context.tsx
│ │ │ │ ├── tree-view-item-indicator.tsx
│ │ │ │ ├── tree-view-item-text.tsx
│ │ │ │ ├── tree-view-item.tsx
│ │ │ │ ├── tree-view-label.tsx
│ │ │ │ ├── tree-view-node-context.tsx
│ │ │ │ ├── tree-view-node-provider.tsx
│ │ │ │ ├── tree-view-root-provider.tsx
│ │ │ │ ├── tree-view-root.tsx
│ │ │ │ ├── tree-view-tree.tsx
│ │ │ │ ├── tree-view.anatomy.ts
│ │ │ │ ├── tree-view.stories.tsx
│ │ │ │ ├── tree-view.ts
│ │ │ │ ├── use-tree-view-context.ts
│ │ │ │ ├── use-tree-view-node-context.ts
│ │ │ │ ├── use-tree-view-node-props-context.ts
│ │ │ │ └── use-tree-view.ts
│ │ ├── index.ts
│ │ ├── providers
│ │ │ ├── environment
│ │ │ │ ├── environment-provider.tsx
│ │ │ │ ├── environment.stories.tsx
│ │ │ │ ├── environment.test.tsx
│ │ │ │ ├── examples
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── setup.tsx
│ │ │ │ │ ├── shadow-root.tsx
│ │ │ │ │ └── usage.tsx
│ │ │ │ ├── index.ts
│ │ │ │ └── use-environment-context.ts
│ │ │ ├── index.ts
│ │ │ └── locale
│ │ │ │ ├── examples
│ │ │ │ ├── basic.tsx
│ │ │ │ ├── setup.tsx
│ │ │ │ └── usage.tsx
│ │ │ │ ├── index.ts
│ │ │ │ ├── locale-provider.tsx
│ │ │ │ ├── locale.stories.tsx
│ │ │ │ ├── use-filter.ts
│ │ │ │ └── use-locale-context.ts
│ │ ├── setup-test.ts
│ │ ├── types.ts
│ │ ├── use-debugger.ts
│ │ └── utils
│ │ │ ├── compose-refs.ts
│ │ │ ├── create-context.ts
│ │ │ ├── create-split-props.test.ts
│ │ │ ├── create-split-props.ts
│ │ │ ├── render-strategy.ts
│ │ │ ├── run-if-fn.test.ts
│ │ │ ├── run-if-fn.ts
│ │ │ ├── use-controllable-state.ts
│ │ │ ├── use-debounce.ts
│ │ │ ├── use-effect-once.ts
│ │ │ ├── use-event.ts
│ │ │ └── use-safe-layout-effect.ts
│ ├── tsconfig.json
│ ├── v5.svg
│ └── vite.config.mts
├── solid
│ ├── .storybook
│ │ ├── main.ts
│ │ └── preview.ts
│ ├── CHANGELOG.md
│ ├── LICENSE
│ ├── README.md
│ ├── biome.json
│ ├── clean-package.config.json
│ ├── package.json
│ ├── src
│ │ ├── components
│ │ │ ├── accordion
│ │ │ │ ├── accordion-context.tsx
│ │ │ │ ├── accordion-item-content.tsx
│ │ │ │ ├── accordion-item-context.tsx
│ │ │ │ ├── accordion-item-indicator.tsx
│ │ │ │ ├── accordion-item-trigger.tsx
│ │ │ │ ├── accordion-item.tsx
│ │ │ │ ├── accordion-root-provider.tsx
│ │ │ │ ├── accordion-root.tsx
│ │ │ │ ├── accordion.anatomy.ts
│ │ │ │ ├── accordion.stories.tsx
│ │ │ │ ├── accordion.ts
│ │ │ │ ├── examples
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── collapsible.tsx
│ │ │ │ │ ├── context
│ │ │ │ │ │ ├── focusedValue.tsx
│ │ │ │ │ │ ├── getItemState.tsx
│ │ │ │ │ │ ├── setValue.tsx
│ │ │ │ │ │ └── value.tsx
│ │ │ │ │ ├── controlled.tsx
│ │ │ │ │ ├── disabled.tsx
│ │ │ │ │ ├── horizontal.tsx
│ │ │ │ │ ├── multiple.tsx
│ │ │ │ │ ├── render-prop.tsx
│ │ │ │ │ ├── root-provider.tsx
│ │ │ │ │ └── vertical.tsx
│ │ │ │ ├── index.tsx
│ │ │ │ ├── tests
│ │ │ │ │ ├── accordion.test.tsx
│ │ │ │ │ └── basic.tsx
│ │ │ │ ├── use-accordion-context.ts
│ │ │ │ ├── use-accordion-item-context.ts
│ │ │ │ ├── use-accordion-item-props-context.ts
│ │ │ │ └── use-accordion.ts
│ │ │ ├── anatomy.ts
│ │ │ ├── angle-slider
│ │ │ │ ├── angle-slider-context.tsx
│ │ │ │ ├── angle-slider-control.tsx
│ │ │ │ ├── angle-slider-hidden-input.tsx
│ │ │ │ ├── angle-slider-label.tsx
│ │ │ │ ├── angle-slider-marker-group.tsx
│ │ │ │ ├── angle-slider-marker.tsx
│ │ │ │ ├── angle-slider-root-provider.tsx
│ │ │ │ ├── angle-slider-root.tsx
│ │ │ │ ├── angle-slider-thumb.tsx
│ │ │ │ ├── angle-slider-value-text.tsx
│ │ │ │ ├── angle-slider.anatomy.tsx
│ │ │ │ ├── angle-slider.stories.tsx
│ │ │ │ ├── angle-slider.ts
│ │ │ │ ├── examples
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── controlled.tsx
│ │ │ │ │ └── step.tsx
│ │ │ │ ├── index.tsx
│ │ │ │ ├── use-angle-slider-context.ts
│ │ │ │ └── use-angle-slider.ts
│ │ │ ├── avatar
│ │ │ │ ├── avatar-context.tsx
│ │ │ │ ├── avatar-fallback.tsx
│ │ │ │ ├── avatar-image.tsx
│ │ │ │ ├── avatar-root-provider.tsx
│ │ │ │ ├── avatar-root.tsx
│ │ │ │ ├── avatar.anatomy.ts
│ │ │ │ ├── avatar.stories.tsx
│ │ │ │ ├── avatar.ts
│ │ │ │ ├── examples
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── closed.tsx
│ │ │ │ │ ├── context.tsx
│ │ │ │ │ ├── events.tsx
│ │ │ │ │ ├── provider.tsx
│ │ │ │ │ └── root-provider.tsx
│ │ │ │ ├── index.tsx
│ │ │ │ ├── tests
│ │ │ │ │ ├── avatar.test.tsx
│ │ │ │ │ └── basic.tsx
│ │ │ │ ├── use-avatar-context.ts
│ │ │ │ └── use-avatar.ts
│ │ │ ├── carousel
│ │ │ │ ├── carousel-autoplay-trigger.tsx
│ │ │ │ ├── carousel-context.tsx
│ │ │ │ ├── carousel-control.tsx
│ │ │ │ ├── carousel-indicator-group.tsx
│ │ │ │ ├── carousel-indicator.tsx
│ │ │ │ ├── carousel-item-group.tsx
│ │ │ │ ├── carousel-item.tsx
│ │ │ │ ├── carousel-next-trigger.tsx
│ │ │ │ ├── carousel-prev-trigger.tsx
│ │ │ │ ├── carousel-root-provider.tsx
│ │ │ │ ├── carousel-root.tsx
│ │ │ │ ├── carousel.anatomy.ts
│ │ │ │ ├── carousel.stories.tsx
│ │ │ │ ├── carousel.test.tsx
│ │ │ │ ├── carousel.ts
│ │ │ │ ├── examples
│ │ │ │ │ ├── autoplay.tsx
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── controlled.tsx
│ │ │ │ │ └── root-provider.tsx
│ │ │ │ ├── index.tsx
│ │ │ │ ├── use-carousel-context.ts
│ │ │ │ └── use-carousel.ts
│ │ │ ├── checkbox
│ │ │ │ ├── checkbox-context.tsx
│ │ │ │ ├── checkbox-control.tsx
│ │ │ │ ├── checkbox-group.tsx
│ │ │ │ ├── checkbox-hidden-input.tsx
│ │ │ │ ├── checkbox-indicator.tsx
│ │ │ │ ├── checkbox-label.tsx
│ │ │ │ ├── checkbox-root-provider.tsx
│ │ │ │ ├── checkbox-root.tsx
│ │ │ │ ├── checkbox.anatomy.ts
│ │ │ │ ├── checkbox.stories.tsx
│ │ │ │ ├── checkbox.ts
│ │ │ │ ├── examples
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── controlled.tsx
│ │ │ │ │ ├── group.tsx
│ │ │ │ │ ├── indeterminate.tsx
│ │ │ │ │ ├── render-prop.tsx
│ │ │ │ │ ├── root-provider.tsx
│ │ │ │ │ └── with-field.tsx
│ │ │ │ ├── index.tsx
│ │ │ │ ├── tests
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── checkbox.test.tsx
│ │ │ │ │ └── controlled.tsx
│ │ │ │ ├── use-checkbox-context.ts
│ │ │ │ ├── use-checkbox-group-context.tsx
│ │ │ │ ├── use-checkbox-group.ts
│ │ │ │ └── use-checkbox.ts
│ │ │ ├── client-only
│ │ │ │ ├── client-only.stories.tsx
│ │ │ │ ├── client-only.tsx
│ │ │ │ ├── examples
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ └── with-fallback.tsx
│ │ │ │ └── index.ts
│ │ │ ├── clipboard
│ │ │ │ ├── clipboard-context.tsx
│ │ │ │ ├── clipboard-control.tsx
│ │ │ │ ├── clipboard-indicator.tsx
│ │ │ │ ├── clipboard-input.tsx
│ │ │ │ ├── clipboard-label.tsx
│ │ │ │ ├── clipboard-root-provider.tsx
│ │ │ │ ├── clipboard-root.tsx
│ │ │ │ ├── clipboard-trigger.tsx
│ │ │ │ ├── clipboard-value-text.tsx
│ │ │ │ ├── clipboard.anatomy.ts
│ │ │ │ ├── clipboard.stories.tsx
│ │ │ │ ├── clipboard.ts
│ │ │ │ ├── examples
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── render-fn.tsx
│ │ │ │ │ └── root-provider.tsx
│ │ │ │ ├── index.tsx
│ │ │ │ ├── tests
│ │ │ │ │ └── clipboard.test.tsx
│ │ │ │ ├── use-clipboard-context.ts
│ │ │ │ └── use-clipboard.ts
│ │ │ ├── collapsible
│ │ │ │ ├── collapsible-content.tsx
│ │ │ │ ├── collapsible-context.tsx
│ │ │ │ ├── collapsible-indicator.tsx
│ │ │ │ ├── collapsible-root-provider.tsx
│ │ │ │ ├── collapsible-root.tsx
│ │ │ │ ├── collapsible-trigger.tsx
│ │ │ │ ├── collapsible.anatomy.ts
│ │ │ │ ├── collapsible.stories.tsx
│ │ │ │ ├── collapsible.ts
│ │ │ │ ├── examples
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── initial-open.tsx
│ │ │ │ │ ├── lazy-mount-and-unmount-on-exit.tsx
│ │ │ │ │ ├── lazy-mount.tsx
│ │ │ │ │ ├── on-exit-complete.tsx
│ │ │ │ │ ├── root-provider.tsx
│ │ │ │ │ └── unmount-on-exit.tsx
│ │ │ │ ├── index.tsx
│ │ │ │ ├── tests
│ │ │ │ │ └── collapsible.test.tsx
│ │ │ │ ├── use-collapsible-context.ts
│ │ │ │ └── use-collapsible.ts
│ │ │ ├── collection.ts
│ │ │ ├── color-picker
│ │ │ │ ├── color-picker-area-background.tsx
│ │ │ │ ├── color-picker-area-thumb.tsx
│ │ │ │ ├── color-picker-area.tsx
│ │ │ │ ├── color-picker-channel-input.tsx
│ │ │ │ ├── color-picker-channel-slider-label.tsx
│ │ │ │ ├── color-picker-channel-slider-thumb.tsx
│ │ │ │ ├── color-picker-channel-slider-track.tsx
│ │ │ │ ├── color-picker-channel-slider-value-text.tsx
│ │ │ │ ├── color-picker-channel-slider.tsx
│ │ │ │ ├── color-picker-content.tsx
│ │ │ │ ├── color-picker-context.tsx
│ │ │ │ ├── color-picker-control.tsx
│ │ │ │ ├── color-picker-eye-dropper-trigger.tsx
│ │ │ │ ├── color-picker-format-select.tsx
│ │ │ │ ├── color-picker-format-trigger.tsx
│ │ │ │ ├── color-picker-hidden-input.tsx
│ │ │ │ ├── color-picker-label.tsx
│ │ │ │ ├── color-picker-positioner.tsx
│ │ │ │ ├── color-picker-root-provider.tsx
│ │ │ │ ├── color-picker-root.tsx
│ │ │ │ ├── color-picker-swatch-group.tsx
│ │ │ │ ├── color-picker-swatch-indicator.tsx
│ │ │ │ ├── color-picker-swatch-trigger.tsx
│ │ │ │ ├── color-picker-swatch.tsx
│ │ │ │ ├── color-picker-transparency-grid.tsx
│ │ │ │ ├── color-picker-trigger.tsx
│ │ │ │ ├── color-picker-value-swatch.tsx
│ │ │ │ ├── color-picker-value-text.tsx
│ │ │ │ ├── color-picker-view.tsx
│ │ │ │ ├── color-picker.anatomy.ts
│ │ │ │ ├── color-picker.stories.tsx
│ │ │ │ ├── color-picker.ts
│ │ │ │ ├── examples
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── controlled.tsx
│ │ │ │ │ ├── root-provider.tsx
│ │ │ │ │ └── with-field.tsx
│ │ │ │ ├── index.tsx
│ │ │ │ ├── tests
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ └── color-picker.test.tsx
│ │ │ │ ├── use-color-picker-area-props-context.ts
│ │ │ │ ├── use-color-picker-channel-props-context.ts
│ │ │ │ ├── use-color-picker-context.ts
│ │ │ │ ├── use-color-picker-format-context.ts
│ │ │ │ ├── use-color-picker-swatch-props-context.ts
│ │ │ │ └── use-color-picker.ts
│ │ │ ├── combobox
│ │ │ │ ├── combobox-clear-trigger.tsx
│ │ │ │ ├── combobox-content.tsx
│ │ │ │ ├── combobox-context.tsx
│ │ │ │ ├── combobox-control.tsx
│ │ │ │ ├── combobox-input.tsx
│ │ │ │ ├── combobox-item-context.tsx
│ │ │ │ ├── combobox-item-group-label.tsx
│ │ │ │ ├── combobox-item-group.tsx
│ │ │ │ ├── combobox-item-indicator.tsx
│ │ │ │ ├── combobox-item-text.tsx
│ │ │ │ ├── combobox-item.tsx
│ │ │ │ ├── combobox-label.tsx
│ │ │ │ ├── combobox-list.tsx
│ │ │ │ ├── combobox-positioner.tsx
│ │ │ │ ├── combobox-root-provider.tsx
│ │ │ │ ├── combobox-root.tsx
│ │ │ │ ├── combobox-trigger.tsx
│ │ │ │ ├── combobox.anatomy.ts
│ │ │ │ ├── combobox.stories.tsx
│ │ │ │ ├── combobox.ts
│ │ │ │ ├── examples
│ │ │ │ │ ├── advanced.tsx
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── links.tsx
│ │ │ │ │ ├── root-provider.tsx
│ │ │ │ │ └── with-field.tsx
│ │ │ │ ├── index.tsx
│ │ │ │ ├── tests
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ └── combobox.test.tsx
│ │ │ │ ├── use-combobox-context.ts
│ │ │ │ ├── use-combobox-item-context.ts
│ │ │ │ ├── use-combobox-item-group-props-context.ts
│ │ │ │ ├── use-combobox-item-props-context.ts
│ │ │ │ └── use-combobox.ts
│ │ │ ├── date-picker
│ │ │ │ ├── date-picker-clear-trigger.tsx
│ │ │ │ ├── date-picker-content.tsx
│ │ │ │ ├── date-picker-context.tsx
│ │ │ │ ├── date-picker-control.tsx
│ │ │ │ ├── date-picker-input.tsx
│ │ │ │ ├── date-picker-label.tsx
│ │ │ │ ├── date-picker-month-select.tsx
│ │ │ │ ├── date-picker-next-trigger.tsx
│ │ │ │ ├── date-picker-positioner.tsx
│ │ │ │ ├── date-picker-preset-trigger.tsx
│ │ │ │ ├── date-picker-prev-trigger.tsx
│ │ │ │ ├── date-picker-range-text.tsx
│ │ │ │ ├── date-picker-root-provider.tsx
│ │ │ │ ├── date-picker-root.tsx
│ │ │ │ ├── date-picker-table-body.tsx
│ │ │ │ ├── date-picker-table-cell-trigger.tsx
│ │ │ │ ├── date-picker-table-cell.tsx
│ │ │ │ ├── date-picker-table-head.tsx
│ │ │ │ ├── date-picker-table-header.tsx
│ │ │ │ ├── date-picker-table-row.tsx
│ │ │ │ ├── date-picker-table.tsx
│ │ │ │ ├── date-picker-trigger.tsx
│ │ │ │ ├── date-picker-view-control.tsx
│ │ │ │ ├── date-picker-view-trigger.tsx
│ │ │ │ ├── date-picker-view.tsx
│ │ │ │ ├── date-picker-year-select.tsx
│ │ │ │ ├── date-picker.anatomy.ts
│ │ │ │ ├── date-picker.stories.tsx
│ │ │ │ ├── date-picker.ts
│ │ │ │ ├── examples
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── controlled.tsx
│ │ │ │ │ ├── range.tsx
│ │ │ │ │ ├── root-provider.tsx
│ │ │ │ │ └── standalone.tsx
│ │ │ │ ├── index.tsx
│ │ │ │ ├── tests
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ └── date-picker.test.tsx
│ │ │ │ ├── use-date-picker-context.ts
│ │ │ │ ├── use-date-picker-table-cell-props-context.ts
│ │ │ │ ├── use-date-picker-table-props-context.ts
│ │ │ │ ├── use-date-picker-view-props-context.ts
│ │ │ │ └── use-date-picker.ts
│ │ │ ├── dialog
│ │ │ │ ├── dialog-backdrop.tsx
│ │ │ │ ├── dialog-close-trigger.tsx
│ │ │ │ ├── dialog-content.tsx
│ │ │ │ ├── dialog-context.tsx
│ │ │ │ ├── dialog-description.tsx
│ │ │ │ ├── dialog-positioner.tsx
│ │ │ │ ├── dialog-root-provider.tsx
│ │ │ │ ├── dialog-root.tsx
│ │ │ │ ├── dialog-title.tsx
│ │ │ │ ├── dialog-trigger.tsx
│ │ │ │ ├── dialog.anatomy.ts
│ │ │ │ ├── dialog.stories.tsx
│ │ │ │ ├── dialog.ts
│ │ │ │ ├── examples
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── controlled.tsx
│ │ │ │ │ ├── lazy-mount.tsx
│ │ │ │ │ ├── render-fn.tsx
│ │ │ │ │ └── root-provider.tsx
│ │ │ │ ├── index.tsx
│ │ │ │ ├── tests
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ └── dialog.test.tsx
│ │ │ │ ├── use-dialog-context.ts
│ │ │ │ └── use-dialog.ts
│ │ │ ├── download-trigger
│ │ │ │ ├── download-trigger.stories.tsx
│ │ │ │ ├── download-trigger.tsx
│ │ │ │ ├── examples
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── svg.tsx
│ │ │ │ │ └── with-promise.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── editable
│ │ │ │ ├── editable-area.tsx
│ │ │ │ ├── editable-cancel-trigger.tsx
│ │ │ │ ├── editable-context.tsx
│ │ │ │ ├── editable-control.tsx
│ │ │ │ ├── editable-edit-trigger.tsx
│ │ │ │ ├── editable-input.tsx
│ │ │ │ ├── editable-label.tsx
│ │ │ │ ├── editable-preview.tsx
│ │ │ │ ├── editable-root-provider.tsx
│ │ │ │ ├── editable-root.tsx
│ │ │ │ ├── editable-submit-trigger.tsx
│ │ │ │ ├── editable.anatomy.ts
│ │ │ │ ├── editable.stories.tsx
│ │ │ │ ├── editable.ts
│ │ │ │ ├── examples
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── custom-controls.tsx
│ │ │ │ │ ├── root-provider.tsx
│ │ │ │ │ └── with-field.tsx
│ │ │ │ ├── index.tsx
│ │ │ │ ├── tests
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── controlled.tsx
│ │ │ │ │ └── editable.test.tsx
│ │ │ │ ├── use-editable-context.ts
│ │ │ │ └── use-editable.ts
│ │ │ ├── factory.test.tsx
│ │ │ ├── factory.tsx
│ │ │ ├── field
│ │ │ │ ├── examples
│ │ │ │ │ ├── disabled.tsx
│ │ │ │ │ ├── input.tsx
│ │ │ │ │ ├── required-indicator.tsx
│ │ │ │ │ ├── root-provider.tsx
│ │ │ │ │ ├── select.tsx
│ │ │ │ │ ├── textarea-autoresize.tsx
│ │ │ │ │ └── textarea.tsx
│ │ │ │ ├── field-context.tsx
│ │ │ │ ├── field-error-text.tsx
│ │ │ │ ├── field-helper-text.tsx
│ │ │ │ ├── field-input.tsx
│ │ │ │ ├── field-label.tsx
│ │ │ │ ├── field-required-indicator.tsx
│ │ │ │ ├── field-root-provider.tsx
│ │ │ │ ├── field-root.tsx
│ │ │ │ ├── field-select.tsx
│ │ │ │ ├── field-textarea.tsx
│ │ │ │ ├── field.anatomy.ts
│ │ │ │ ├── field.stories.tsx
│ │ │ │ ├── field.test.tsx
│ │ │ │ ├── field.ts
│ │ │ │ ├── index.tsx
│ │ │ │ ├── use-field-context.ts
│ │ │ │ └── use-field.ts
│ │ │ ├── fieldset
│ │ │ │ ├── examples
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── phone-input.tsx
│ │ │ │ │ ├── root-provider.tsx
│ │ │ │ │ ├── with-checkbox.tsx
│ │ │ │ │ └── with-field.tsx
│ │ │ │ ├── fieldset-context.tsx
│ │ │ │ ├── fieldset-error-text.tsx
│ │ │ │ ├── fieldset-helper-text.tsx
│ │ │ │ ├── fieldset-legend.tsx
│ │ │ │ ├── fieldset-root-provider.tsx
│ │ │ │ ├── fieldset-root.tsx
│ │ │ │ ├── fieldset.anatomy.ts
│ │ │ │ ├── fieldset.stories.tsx
│ │ │ │ ├── fieldset.test.tsx
│ │ │ │ ├── fieldset.ts
│ │ │ │ ├── fieldset.tsx
│ │ │ │ ├── index.tsx
│ │ │ │ ├── use-fieldset-context.ts
│ │ │ │ └── use-fieldset.ts
│ │ │ ├── file-upload
│ │ │ │ ├── examples
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── root-provider.tsx
│ │ │ │ │ └── with-field.tsx
│ │ │ │ ├── file-upload-clear-trigger.tsx
│ │ │ │ ├── file-upload-context.tsx
│ │ │ │ ├── file-upload-dropzone.tsx
│ │ │ │ ├── file-upload-hidden-input.tsx
│ │ │ │ ├── file-upload-item-delete-trigger.tsx
│ │ │ │ ├── file-upload-item-group.tsx
│ │ │ │ ├── file-upload-item-name.tsx
│ │ │ │ ├── file-upload-item-preview-image.tsx
│ │ │ │ ├── file-upload-item-preview.tsx
│ │ │ │ ├── file-upload-item-size-text.tsx
│ │ │ │ ├── file-upload-item.tsx
│ │ │ │ ├── file-upload-label.tsx
│ │ │ │ ├── file-upload-root-provider.tsx
│ │ │ │ ├── file-upload-root.tsx
│ │ │ │ ├── file-upload-trigger.tsx
│ │ │ │ ├── file-upload.anatomy.ts
│ │ │ │ ├── file-upload.stories.tsx
│ │ │ │ ├── file-upload.ts
│ │ │ │ ├── index.tsx
│ │ │ │ ├── tests
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ └── file-upload.test.tsx
│ │ │ │ ├── use-file-upload-context.ts
│ │ │ │ ├── use-file-upload-item-props-context.ts
│ │ │ │ └── use-file-upload.ts
│ │ │ ├── floating-panel
│ │ │ │ ├── examples
│ │ │ │ │ ├── anchor-position.tsx
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── controlled-open.tsx
│ │ │ │ │ ├── controlled-position.tsx
│ │ │ │ │ ├── controlled-size.tsx
│ │ │ │ │ ├── lazy-mount.tsx
│ │ │ │ │ └── render-fn.tsx
│ │ │ │ ├── floating-panel-body.tsx
│ │ │ │ ├── floating-panel-close-trigger.tsx
│ │ │ │ ├── floating-panel-content.tsx
│ │ │ │ ├── floating-panel-context.tsx
│ │ │ │ ├── floating-panel-control.tsx
│ │ │ │ ├── floating-panel-drag-trigger.tsx
│ │ │ │ ├── floating-panel-header.tsx
│ │ │ │ ├── floating-panel-positioner.tsx
│ │ │ │ ├── floating-panel-resize-trigger.tsx
│ │ │ │ ├── floating-panel-root-provider.tsx
│ │ │ │ ├── floating-panel-root.tsx
│ │ │ │ ├── floating-panel-stage-trigger.tsx
│ │ │ │ ├── floating-panel-title.tsx
│ │ │ │ ├── floating-panel-trigger.tsx
│ │ │ │ ├── floating-panel.anatomy.ts
│ │ │ │ ├── floating-panel.stories.tsx
│ │ │ │ ├── floating-panel.ts
│ │ │ │ ├── index.tsx
│ │ │ │ ├── use-floating-panel-context.ts
│ │ │ │ └── use-floating-panel.ts
│ │ │ ├── focus-trap
│ │ │ │ ├── examples
│ │ │ │ │ ├── autofocus.tsx
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ └── initial-focus.tsx
│ │ │ │ ├── focus-trap.stories.tsx
│ │ │ │ ├── focus-trap.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── format
│ │ │ │ ├── examples
│ │ │ │ │ ├── byte-basic.tsx
│ │ │ │ │ ├── byte-sizes.tsx
│ │ │ │ │ ├── byte-with-locale.tsx
│ │ │ │ │ ├── byte-with-unit-display.tsx
│ │ │ │ │ ├── byte-with-unit.tsx
│ │ │ │ │ ├── number-basic.tsx
│ │ │ │ │ ├── number-with-compact.tsx
│ │ │ │ │ ├── number-with-currency.tsx
│ │ │ │ │ ├── number-with-locale.tsx
│ │ │ │ │ ├── number-with-percentage.tsx
│ │ │ │ │ ├── number-with-unit.tsx
│ │ │ │ │ ├── relative-time-basic.tsx
│ │ │ │ │ └── relative-time-short.tsx
│ │ │ │ ├── format-byte.tsx
│ │ │ │ ├── format-number.tsx
│ │ │ │ ├── format-relative-time.tsx
│ │ │ │ ├── format.stories.tsx
│ │ │ │ ├── format.ts
│ │ │ │ └── index.tsx
│ │ │ ├── frame
│ │ │ │ ├── examples
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── script.tsx
│ │ │ │ │ └── src-doc.tsx
│ │ │ │ ├── frame-content.tsx
│ │ │ │ ├── frame.stories.tsx
│ │ │ │ ├── frame.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── highlight
│ │ │ │ ├── examples
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── ignore-case.tsx
│ │ │ │ │ ├── match-all.tsx
│ │ │ │ │ ├── multiple.tsx
│ │ │ │ │ └── with-input.tsx
│ │ │ │ ├── highlight.stories.tsx
│ │ │ │ ├── highlight.tsx
│ │ │ │ ├── index.tsx
│ │ │ │ └── use-highlight.ts
│ │ │ ├── hover-card
│ │ │ │ ├── examples
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── controlled.tsx
│ │ │ │ │ ├── positioning.tsx
│ │ │ │ │ ├── render-prop.tsx
│ │ │ │ │ └── root-provider.tsx
│ │ │ │ ├── hover-card-arrow-tip.tsx
│ │ │ │ ├── hover-card-arrow.tsx
│ │ │ │ ├── hover-card-content.tsx
│ │ │ │ ├── hover-card-context.tsx
│ │ │ │ ├── hover-card-positioner.tsx
│ │ │ │ ├── hover-card-root-provider.tsx
│ │ │ │ ├── hover-card-root.tsx
│ │ │ │ ├── hover-card-trigger.tsx
│ │ │ │ ├── hover-card.anatomy.ts
│ │ │ │ ├── hover-card.stories.tsx
│ │ │ │ ├── hover-card.ts
│ │ │ │ ├── index.tsx
│ │ │ │ ├── tests
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ └── hover-card.test.tsx
│ │ │ │ ├── use-hover-card-context.ts
│ │ │ │ └── use-hover-card.ts
│ │ │ ├── index.tsx
│ │ │ ├── listbox
│ │ │ │ ├── examples
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── controlled.tsx
│ │ │ │ │ ├── disabled.tsx
│ │ │ │ │ ├── group.tsx
│ │ │ │ │ ├── multiple.tsx
│ │ │ │ │ ├── root-provider.tsx
│ │ │ │ │ └── value-text.tsx
│ │ │ │ ├── index.tsx
│ │ │ │ ├── listbox-content.tsx
│ │ │ │ ├── listbox-input.tsx
│ │ │ │ ├── listbox-item-group-label.tsx
│ │ │ │ ├── listbox-item-group.tsx
│ │ │ │ ├── listbox-item-indicator.tsx
│ │ │ │ ├── listbox-item-text.tsx
│ │ │ │ ├── listbox-item.tsx
│ │ │ │ ├── listbox-label.tsx
│ │ │ │ ├── listbox-root-provider.tsx
│ │ │ │ ├── listbox-root.tsx
│ │ │ │ ├── listbox-value-text.tsx
│ │ │ │ ├── listbox.anatomy.ts
│ │ │ │ ├── listbox.stories.tsx
│ │ │ │ ├── listbox.test.tsx
│ │ │ │ ├── listbox.ts
│ │ │ │ ├── use-listbox-context.ts
│ │ │ │ ├── use-listbox-item-context.ts
│ │ │ │ ├── use-listbox-item-group-props-context.ts
│ │ │ │ ├── use-listbox-item-props-context.ts
│ │ │ │ └── use-listbox.ts
│ │ │ ├── menu
│ │ │ │ ├── examples
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── checkbox.tsx
│ │ │ │ │ ├── context.tsx
│ │ │ │ │ ├── controlled.tsx
│ │ │ │ │ ├── group.tsx
│ │ │ │ │ ├── nested.tsx
│ │ │ │ │ ├── radio-group.tsx
│ │ │ │ │ ├── render-prop.tsx
│ │ │ │ │ ├── root-provider.tsx
│ │ │ │ │ ├── select-event.tsx
│ │ │ │ │ └── separator.tsx
│ │ │ │ ├── index.tsx
│ │ │ │ ├── menu-arrow-tip.tsx
│ │ │ │ ├── menu-arrow.tsx
│ │ │ │ ├── menu-checkbox-item.tsx
│ │ │ │ ├── menu-content.tsx
│ │ │ │ ├── menu-context-trigger.tsx
│ │ │ │ ├── menu-context.tsx
│ │ │ │ ├── menu-indicator.tsx
│ │ │ │ ├── menu-item-context.tsx
│ │ │ │ ├── menu-item-group-label.tsx
│ │ │ │ ├── menu-item-group.tsx
│ │ │ │ ├── menu-item-indicator.tsx
│ │ │ │ ├── menu-item-text.tsx
│ │ │ │ ├── menu-item.tsx
│ │ │ │ ├── menu-positioner.tsx
│ │ │ │ ├── menu-radio-item-group.tsx
│ │ │ │ ├── menu-radio-item.tsx
│ │ │ │ ├── menu-root-provider.tsx
│ │ │ │ ├── menu-root.tsx
│ │ │ │ ├── menu-separator.tsx
│ │ │ │ ├── menu-trigger-item.tsx
│ │ │ │ ├── menu-trigger.tsx
│ │ │ │ ├── menu.anatomy.ts
│ │ │ │ ├── menu.stories.tsx
│ │ │ │ ├── menu.ts
│ │ │ │ ├── tests
│ │ │ │ │ └── menu.test.tsx
│ │ │ │ ├── use-menu-context.ts
│ │ │ │ ├── use-menu-item-context.ts
│ │ │ │ ├── use-menu-item-group-context.ts
│ │ │ │ ├── use-menu-machine-context.ts
│ │ │ │ ├── use-menu-option-item-props-context.ts
│ │ │ │ ├── use-menu-trigger-item-context.ts
│ │ │ │ └── use-menu.ts
│ │ │ ├── number-input
│ │ │ │ ├── examples
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── form-usage.tsx
│ │ │ │ │ ├── formatted.tsx
│ │ │ │ │ ├── fraction-digits.tsx
│ │ │ │ │ ├── min-max.tsx
│ │ │ │ │ ├── mouse-wheel.tsx
│ │ │ │ │ ├── no-clamp.tsx
│ │ │ │ │ ├── render-fn.tsx
│ │ │ │ │ ├── root-provider.tsx
│ │ │ │ │ ├── scrubber.tsx
│ │ │ │ │ └── with-field.tsx
│ │ │ │ ├── index.tsx
│ │ │ │ ├── number-input-context.tsx
│ │ │ │ ├── number-input-control.tsx
│ │ │ │ ├── number-input-decrement-trigger.tsx
│ │ │ │ ├── number-input-increment-trigger.tsx
│ │ │ │ ├── number-input-input.tsx
│ │ │ │ ├── number-input-label.tsx
│ │ │ │ ├── number-input-root-provider.tsx
│ │ │ │ ├── number-input-root.tsx
│ │ │ │ ├── number-input-scrubber.tsx
│ │ │ │ ├── number-input-value-text.tsx
│ │ │ │ ├── number-input.anatomy.ts
│ │ │ │ ├── number-input.stories.tsx
│ │ │ │ ├── number-input.ts
│ │ │ │ ├── tests
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ └── number-input.test.tsx
│ │ │ │ ├── use-number-input-context.ts
│ │ │ │ └── use-number-input.ts
│ │ │ ├── pagination
│ │ │ │ ├── examples
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── controlled.tsx
│ │ │ │ │ ├── customized.tsx
│ │ │ │ │ └── root-provider.tsx
│ │ │ │ ├── index.tsx
│ │ │ │ ├── pagination-context.tsx
│ │ │ │ ├── pagination-ellipsis.tsx
│ │ │ │ ├── pagination-item.tsx
│ │ │ │ ├── pagination-next-trigger.tsx
│ │ │ │ ├── pagination-prev-trigger.tsx
│ │ │ │ ├── pagination-root-provider.tsx
│ │ │ │ ├── pagination-root.tsx
│ │ │ │ ├── pagination.anatomy.ts
│ │ │ │ ├── pagination.stories.tsx
│ │ │ │ ├── pagination.ts
│ │ │ │ ├── tests
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ └── pagination.test.tsx
│ │ │ │ ├── use-pagination-context.ts
│ │ │ │ └── use-pagination.ts
│ │ │ ├── password-input
│ │ │ │ ├── examples
│ │ │ │ │ ├── autocomplete.tsx
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── controlled-visibility.tsx
│ │ │ │ │ ├── ignore-password-manager.tsx
│ │ │ │ │ ├── root-provider.tsx
│ │ │ │ │ └── with-field.tsx
│ │ │ │ ├── index.tsx
│ │ │ │ ├── password-input-context.tsx
│ │ │ │ ├── password-input-control.tsx
│ │ │ │ ├── password-input-indicator.tsx
│ │ │ │ ├── password-input-input.tsx
│ │ │ │ ├── password-input-label.tsx
│ │ │ │ ├── password-input-root-provider.tsx
│ │ │ │ ├── password-input-root.tsx
│ │ │ │ ├── password-input-visibility-trigger.tsx
│ │ │ │ ├── password-input.anatomy.ts
│ │ │ │ ├── password-input.stories.tsx
│ │ │ │ ├── password-input.ts
│ │ │ │ ├── use-password-input-context.ts
│ │ │ │ └── use-password-input.ts
│ │ │ ├── pin-input
│ │ │ │ ├── examples
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── blurred.tsx
│ │ │ │ │ ├── customized.tsx
│ │ │ │ │ ├── initial-value.tsx
│ │ │ │ │ ├── otp-mode.tsx
│ │ │ │ │ ├── root-provider.tsx
│ │ │ │ │ ├── with-field.tsx
│ │ │ │ │ └── with-mask.tsx
│ │ │ │ ├── index.tsx
│ │ │ │ ├── pin-input-context.tsx
│ │ │ │ ├── pin-input-control.tsx
│ │ │ │ ├── pin-input-hidden-input.tsx
│ │ │ │ ├── pin-input-input.tsx
│ │ │ │ ├── pin-input-label.tsx
│ │ │ │ ├── pin-input-root-provider.tsx
│ │ │ │ ├── pin-input-root.tsx
│ │ │ │ ├── pin-input.anatomy.ts
│ │ │ │ ├── pin-input.stories.tsx
│ │ │ │ ├── pin-input.ts
│ │ │ │ ├── tests
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ └── pin-input.test.tsx
│ │ │ │ ├── use-pin-input-context.ts
│ │ │ │ └── use-pin-input.ts
│ │ │ ├── popover
│ │ │ │ ├── examples
│ │ │ │ │ ├── arrow.tsx
│ │ │ │ │ ├── as-child.tsx
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── close-behavior.tsx
│ │ │ │ │ ├── controlled.tsx
│ │ │ │ │ ├── factory.tsx
│ │ │ │ │ ├── modal.tsx
│ │ │ │ │ ├── on-open-change.tsx
│ │ │ │ │ ├── portalled.tsx
│ │ │ │ │ ├── positioning.tsx
│ │ │ │ │ ├── render-fn.tsx
│ │ │ │ │ └── root-provider.tsx
│ │ │ │ ├── index.tsx
│ │ │ │ ├── popover-anchor.tsx
│ │ │ │ ├── popover-arrow-tip.tsx
│ │ │ │ ├── popover-arrow.tsx
│ │ │ │ ├── popover-close-trigger.tsx
│ │ │ │ ├── popover-content.tsx
│ │ │ │ ├── popover-context.tsx
│ │ │ │ ├── popover-description.tsx
│ │ │ │ ├── popover-indicator.tsx
│ │ │ │ ├── popover-positioner.tsx
│ │ │ │ ├── popover-root-provider.tsx
│ │ │ │ ├── popover-root.tsx
│ │ │ │ ├── popover-title.tsx
│ │ │ │ ├── popover-trigger.tsx
│ │ │ │ ├── popover.anatomy.ts
│ │ │ │ ├── popover.stories.tsx
│ │ │ │ ├── popover.ts
│ │ │ │ ├── tests
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── controlled.tsx
│ │ │ │ │ └── popover.test.tsx
│ │ │ │ ├── use-popover-context.ts
│ │ │ │ └── use-popover.ts
│ │ │ ├── presence
│ │ │ │ ├── examples
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── lazy-mount-and-unmount-on-exit.tsx
│ │ │ │ │ ├── lazy-mount.tsx
│ │ │ │ │ ├── skip-animation-on-mount.tsx
│ │ │ │ │ └── unmount-on-exit.tsx
│ │ │ │ ├── index.tsx
│ │ │ │ ├── presence.stories.tsx
│ │ │ │ ├── presence.test.tsx
│ │ │ │ ├── presence.tsx
│ │ │ │ ├── split-presence-props.ts
│ │ │ │ ├── use-presence-context.ts
│ │ │ │ └── use-presence.ts
│ │ │ ├── progress
│ │ │ │ ├── examples
│ │ │ │ │ ├── circular
│ │ │ │ │ │ ├── basic.tsx
│ │ │ │ │ │ ├── controlled.tsx
│ │ │ │ │ │ ├── indeterminate.tsx
│ │ │ │ │ │ ├── initial-value.tsx
│ │ │ │ │ │ ├── min-max.tsx
│ │ │ │ │ │ ├── root-provider.tsx
│ │ │ │ │ │ └── value-text.tsx
│ │ │ │ │ └── linear
│ │ │ │ │ │ ├── basic.tsx
│ │ │ │ │ │ ├── controlled.tsx
│ │ │ │ │ │ ├── indeterminate.tsx
│ │ │ │ │ │ ├── initial-value.tsx
│ │ │ │ │ │ ├── min-max.tsx
│ │ │ │ │ │ ├── root-provider.tsx
│ │ │ │ │ │ ├── value-text.tsx
│ │ │ │ │ │ └── vertical.tsx
│ │ │ │ ├── index.tsx
│ │ │ │ ├── progress-circle-range.tsx
│ │ │ │ ├── progress-circle-track.tsx
│ │ │ │ ├── progress-circle.tsx
│ │ │ │ ├── progress-circular.stories.tsx
│ │ │ │ ├── progress-context.tsx
│ │ │ │ ├── progress-label.tsx
│ │ │ │ ├── progress-linear.stories.tsx
│ │ │ │ ├── progress-range.tsx
│ │ │ │ ├── progress-root-provider.tsx
│ │ │ │ ├── progress-root.tsx
│ │ │ │ ├── progress-track.tsx
│ │ │ │ ├── progress-value-text.tsx
│ │ │ │ ├── progress-view.tsx
│ │ │ │ ├── progress.anatomy.ts
│ │ │ │ ├── progress.ts
│ │ │ │ ├── tests
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ └── progress.test.tsx
│ │ │ │ ├── use-progress-context.ts
│ │ │ │ └── use-progress.ts
│ │ │ ├── qr-code
│ │ │ │ ├── examples
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── controlled.tsx
│ │ │ │ │ ├── error-correction.tsx
│ │ │ │ │ ├── root-provider.tsx
│ │ │ │ │ └── with-overlay.tsx
│ │ │ │ ├── index.tsx
│ │ │ │ ├── qr-code-context.ts
│ │ │ │ ├── qr-code-download-trigger.tsx
│ │ │ │ ├── qr-code-frame.tsx
│ │ │ │ ├── qr-code-overlay.tsx
│ │ │ │ ├── qr-code-pattern.tsx
│ │ │ │ ├── qr-code-root-provider.tsx
│ │ │ │ ├── qr-code-root.tsx
│ │ │ │ ├── qr-code.anatomy.ts
│ │ │ │ ├── qr-code.stories.tsx
│ │ │ │ ├── qr-code.ts
│ │ │ │ ├── tests
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ └── qr-code.test.tsx
│ │ │ │ ├── use-qr-code-context.ts
│ │ │ │ └── use-qr-code.ts
│ │ │ ├── radio-group
│ │ │ │ ├── examples
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── disabled.tsx
│ │ │ │ │ ├── initial-value.tsx
│ │ │ │ │ ├── on-event.tsx
│ │ │ │ │ └── root-provider.tsx
│ │ │ │ ├── index.tsx
│ │ │ │ ├── radio-group-context.tsx
│ │ │ │ ├── radio-group-indicator.tsx
│ │ │ │ ├── radio-group-item-context.tsx
│ │ │ │ ├── radio-group-item-control.tsx
│ │ │ │ ├── radio-group-item-hidden-input.tsx
│ │ │ │ ├── radio-group-item-text.tsx
│ │ │ │ ├── radio-group-item.tsx
│ │ │ │ ├── radio-group-label.tsx
│ │ │ │ ├── radio-group-root-provider.tsx
│ │ │ │ ├── radio-group-root.tsx
│ │ │ │ ├── radio-group.anatomy.ts
│ │ │ │ ├── radio-group.stories.tsx
│ │ │ │ ├── radio-group.ts
│ │ │ │ ├── tests
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ └── radio-group.test.tsx
│ │ │ │ ├── use-radio-group-context.ts
│ │ │ │ ├── use-radio-group-item-context.ts
│ │ │ │ ├── use-radio-group-item-props-context.ts
│ │ │ │ └── use-radio-group.ts
│ │ │ ├── rating-group
│ │ │ │ ├── examples
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── controlled.tsx
│ │ │ │ │ ├── disabled.tsx
│ │ │ │ │ ├── form-usage.tsx
│ │ │ │ │ ├── half-ratings.tsx
│ │ │ │ │ ├── initial-value.tsx
│ │ │ │ │ ├── read-only.tsx
│ │ │ │ │ ├── root-provider.tsx
│ │ │ │ │ └── with-field.tsx
│ │ │ │ ├── index.tsx
│ │ │ │ ├── rating-group-context.tsx
│ │ │ │ ├── rating-group-control.tsx
│ │ │ │ ├── rating-group-hidden-input.tsx
│ │ │ │ ├── rating-group-item-context.tsx
│ │ │ │ ├── rating-group-item.tsx
│ │ │ │ ├── rating-group-label.tsx
│ │ │ │ ├── rating-group-root-provider.tsx
│ │ │ │ ├── rating-group-root.tsx
│ │ │ │ ├── rating-group.anatomy.ts
│ │ │ │ ├── rating-group.stories.tsx
│ │ │ │ ├── rating-group.ts
│ │ │ │ ├── tests
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ └── rating-group.test.tsx
│ │ │ │ ├── use-rating-group-context.ts
│ │ │ │ ├── use-rating-group-item-context.ts
│ │ │ │ └── use-rating-group.ts
│ │ │ ├── segment-group
│ │ │ │ ├── examples
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── controlled.tsx
│ │ │ │ │ ├── disabled.tsx
│ │ │ │ │ ├── initial-value.tsx
│ │ │ │ │ └── root-provider.tsx
│ │ │ │ ├── index.tsx
│ │ │ │ ├── segment-group-context.tsx
│ │ │ │ ├── segment-group-indicator.tsx
│ │ │ │ ├── segment-group-item-context.tsx
│ │ │ │ ├── segment-group-item-control.tsx
│ │ │ │ ├── segment-group-item-hidden-input.tsx
│ │ │ │ ├── segment-group-item-text.tsx
│ │ │ │ ├── segment-group-item.tsx
│ │ │ │ ├── segment-group-label.tsx
│ │ │ │ ├── segment-group-root-provider.tsx
│ │ │ │ ├── segment-group-root.tsx
│ │ │ │ ├── segment-group.anatomy.ts
│ │ │ │ ├── segment-group.stories.tsx
│ │ │ │ ├── segment-group.ts
│ │ │ │ ├── tests
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ └── segment-group.test.tsx
│ │ │ │ ├── use-segment-group-context.ts
│ │ │ │ ├── use-segment-group-item-context.ts
│ │ │ │ ├── use-segment-group-item-props-context.ts
│ │ │ │ └── use-segment-group.ts
│ │ │ ├── select
│ │ │ │ ├── examples
│ │ │ │ │ ├── advanced.tsx
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── controlled.tsx
│ │ │ │ │ ├── dynamic-items.tsx
│ │ │ │ │ ├── form-library.tsx
│ │ │ │ │ ├── multiple.tsx
│ │ │ │ │ ├── reactive-collection.tsx
│ │ │ │ │ ├── root-provider.tsx
│ │ │ │ │ ├── select-all.tsx
│ │ │ │ │ ├── with-field.tsx
│ │ │ │ │ └── with-shadow-root.tsx
│ │ │ │ ├── index.tsx
│ │ │ │ ├── select-clear-trigger.tsx
│ │ │ │ ├── select-content.tsx
│ │ │ │ ├── select-context.tsx
│ │ │ │ ├── select-control.tsx
│ │ │ │ ├── select-hidden-select.tsx
│ │ │ │ ├── select-indicator.tsx
│ │ │ │ ├── select-item-context.tsx
│ │ │ │ ├── select-item-group-label.tsx
│ │ │ │ ├── select-item-group.tsx
│ │ │ │ ├── select-item-indicator.tsx
│ │ │ │ ├── select-item-text.tsx
│ │ │ │ ├── select-item.tsx
│ │ │ │ ├── select-label.tsx
│ │ │ │ ├── select-list.tsx
│ │ │ │ ├── select-positioner.tsx
│ │ │ │ ├── select-root-provider.tsx
│ │ │ │ ├── select-root.tsx
│ │ │ │ ├── select-trigger.tsx
│ │ │ │ ├── select-value-text.tsx
│ │ │ │ ├── select.anatomy.ts
│ │ │ │ ├── select.stories.tsx
│ │ │ │ ├── select.ts
│ │ │ │ ├── tests
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ └── select.test.tsx
│ │ │ │ ├── use-select-context.ts
│ │ │ │ ├── use-select-item-context.ts
│ │ │ │ ├── use-select-item-group-props-context.ts
│ │ │ │ ├── use-select-item-props-context.ts
│ │ │ │ └── use-select.ts
│ │ │ ├── signature-pad
│ │ │ │ ├── examples
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── image-preview.tsx
│ │ │ │ │ ├── root-provider.tsx
│ │ │ │ │ └── with-field.tsx
│ │ │ │ ├── index.tsx
│ │ │ │ ├── signature-pad-clear-trigger.tsx
│ │ │ │ ├── signature-pad-context.tsx
│ │ │ │ ├── signature-pad-control.tsx
│ │ │ │ ├── signature-pad-guide.tsx
│ │ │ │ ├── signature-pad-hidden-input.tsx
│ │ │ │ ├── signature-pad-label.tsx
│ │ │ │ ├── signature-pad-root-provider.tsx
│ │ │ │ ├── signature-pad-root.tsx
│ │ │ │ ├── signature-pad-segment.tsx
│ │ │ │ ├── signature-pad.anatomy.ts
│ │ │ │ ├── signature-pad.stories.tsx
│ │ │ │ ├── signature-pad.ts
│ │ │ │ ├── tests
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ └── signature-pad.test.tsx
│ │ │ │ ├── use-signature-pad-context.ts
│ │ │ │ └── use-signature-pad.ts
│ │ │ ├── slider
│ │ │ │ ├── examples
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── center-origin.tsx
│ │ │ │ │ ├── dragging-indicator.tsx
│ │ │ │ │ ├── initial-value.tsx
│ │ │ │ │ ├── min-max.tsx
│ │ │ │ │ ├── on-event.tsx
│ │ │ │ │ ├── range.tsx
│ │ │ │ │ ├── root-provider.tsx
│ │ │ │ │ ├── step.tsx
│ │ │ │ │ ├── thumb-overlap.tsx
│ │ │ │ │ ├── vertical.tsx
│ │ │ │ │ └── with-marks.tsx
│ │ │ │ ├── index.tsx
│ │ │ │ ├── slider-context.tsx
│ │ │ │ ├── slider-control.tsx
│ │ │ │ ├── slider-dragging-indicator.tsx
│ │ │ │ ├── slider-hidden-input.tsx
│ │ │ │ ├── slider-label.tsx
│ │ │ │ ├── slider-marker-group.tsx
│ │ │ │ ├── slider-marker.tsx
│ │ │ │ ├── slider-range.tsx
│ │ │ │ ├── slider-root-provider.tsx
│ │ │ │ ├── slider-root.tsx
│ │ │ │ ├── slider-thumb.tsx
│ │ │ │ ├── slider-track.tsx
│ │ │ │ ├── slider-value-text.tsx
│ │ │ │ ├── slider.anatomy.ts
│ │ │ │ ├── slider.stories.tsx
│ │ │ │ ├── slider.ts
│ │ │ │ ├── tests
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ └── slider.test.tsx
│ │ │ │ ├── use-slider-context.ts
│ │ │ │ ├── use-slider-thumb-props-context.ts
│ │ │ │ └── use-slider.ts
│ │ │ ├── splitter
│ │ │ │ ├── examples
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── collapsible.tsx
│ │ │ │ │ ├── events.tsx
│ │ │ │ │ ├── multiple-panels.tsx
│ │ │ │ │ ├── render-prop.tsx
│ │ │ │ │ ├── root-provider.tsx
│ │ │ │ │ └── vertical.tsx
│ │ │ │ ├── index.tsx
│ │ │ │ ├── splitter-context.tsx
│ │ │ │ ├── splitter-panel.tsx
│ │ │ │ ├── splitter-resize-trigger.tsx
│ │ │ │ ├── splitter-root-provider.tsx
│ │ │ │ ├── splitter-root.tsx
│ │ │ │ ├── splitter.anatomy.ts
│ │ │ │ ├── splitter.stories.tsx
│ │ │ │ ├── splitter.ts
│ │ │ │ ├── tests
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ └── splitter.test.tsx
│ │ │ │ ├── use-splitter-context.ts
│ │ │ │ └── use-splitter.ts
│ │ │ ├── steps
│ │ │ │ ├── examples
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ └── root-provider.tsx
│ │ │ │ ├── index.tsx
│ │ │ │ ├── steps-completed-content.tsx
│ │ │ │ ├── steps-content.tsx
│ │ │ │ ├── steps-context.tsx
│ │ │ │ ├── steps-indicator.tsx
│ │ │ │ ├── steps-item-context.tsx
│ │ │ │ ├── steps-item.tsx
│ │ │ │ ├── steps-list.tsx
│ │ │ │ ├── steps-next-trigger.tsx
│ │ │ │ ├── steps-prev-trigger.tsx
│ │ │ │ ├── steps-progress.tsx
│ │ │ │ ├── steps-root-provider.tsx
│ │ │ │ ├── steps-root.tsx
│ │ │ │ ├── steps-separator.tsx
│ │ │ │ ├── steps-trigger.tsx
│ │ │ │ ├── steps.anatomy.ts
│ │ │ │ ├── steps.stories.tsx
│ │ │ │ ├── steps.ts
│ │ │ │ ├── use-steps-context.ts
│ │ │ │ ├── use-steps-item-context.ts
│ │ │ │ ├── use-steps-item-props-context.ts
│ │ │ │ └── use-steps.ts
│ │ │ ├── switch
│ │ │ │ ├── examples
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── controlled.tsx
│ │ │ │ │ ├── disabled.tsx
│ │ │ │ │ ├── initial-value.tsx
│ │ │ │ │ ├── render-prop.tsx
│ │ │ │ │ ├── root-provider.tsx
│ │ │ │ │ └── with-field.tsx
│ │ │ │ ├── index.tsx
│ │ │ │ ├── switch-context.tsx
│ │ │ │ ├── switch-control.tsx
│ │ │ │ ├── switch-hidden-input.tsx
│ │ │ │ ├── switch-label.tsx
│ │ │ │ ├── switch-root-provider.tsx
│ │ │ │ ├── switch-root.tsx
│ │ │ │ ├── switch-thumb.tsx
│ │ │ │ ├── switch.anatomy.ts
│ │ │ │ ├── switch.stories.tsx
│ │ │ │ ├── switch.ts
│ │ │ │ ├── tests
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ └── switch.test.tsx
│ │ │ │ ├── use-switch-context.ts
│ │ │ │ └── use-switch.ts
│ │ │ ├── tabs
│ │ │ │ ├── examples
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── controlled.tsx
│ │ │ │ │ ├── disabled-tab.tsx
│ │ │ │ │ ├── indicator.tsx
│ │ │ │ │ ├── initial-tab.tsx
│ │ │ │ │ ├── lazy-mount.tsx
│ │ │ │ │ ├── manual.tsx
│ │ │ │ │ ├── root-provider.tsx
│ │ │ │ │ └── vertical.tsx
│ │ │ │ ├── index.tsx
│ │ │ │ ├── tab-content.tsx
│ │ │ │ ├── tab-indicator.tsx
│ │ │ │ ├── tab-list.tsx
│ │ │ │ ├── tab-trigger.tsx
│ │ │ │ ├── tabs-context.tsx
│ │ │ │ ├── tabs-root-provider.tsx
│ │ │ │ ├── tabs-root.tsx
│ │ │ │ ├── tabs.anatomy.ts
│ │ │ │ ├── tabs.stories.tsx
│ │ │ │ ├── tabs.ts
│ │ │ │ ├── tests
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ └── tabs.test.tsx
│ │ │ │ ├── use-tabs-context.ts
│ │ │ │ └── use-tabs.ts
│ │ │ ├── tags-input
│ │ │ │ ├── examples
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── blur-behavior.tsx
│ │ │ │ │ ├── disabled-editing.tsx
│ │ │ │ │ ├── initial-value.tsx
│ │ │ │ │ ├── max-with-overflow.tsx
│ │ │ │ │ ├── on-event.tsx
│ │ │ │ │ ├── paste-behavior.tsx
│ │ │ │ │ ├── root-provider.tsx
│ │ │ │ │ ├── validated.tsx
│ │ │ │ │ └── with-field.tsx
│ │ │ │ ├── index.tsx
│ │ │ │ ├── tags-input-clear-trigger.tsx
│ │ │ │ ├── tags-input-context.tsx
│ │ │ │ ├── tags-input-control.tsx
│ │ │ │ ├── tags-input-hidden-input.tsx
│ │ │ │ ├── tags-input-input.tsx
│ │ │ │ ├── tags-input-item-context.tsx
│ │ │ │ ├── tags-input-item-delete-trigger.tsx
│ │ │ │ ├── tags-input-item-input.tsx
│ │ │ │ ├── tags-input-item-preview.tsx
│ │ │ │ ├── tags-input-item-text.tsx
│ │ │ │ ├── tags-input-item.tsx
│ │ │ │ ├── tags-input-label.tsx
│ │ │ │ ├── tags-input-root-provider.tsx
│ │ │ │ ├── tags-input-root.tsx
│ │ │ │ ├── tags-input.anatomy.ts
│ │ │ │ ├── tags-input.stories.tsx
│ │ │ │ ├── tags-input.ts
│ │ │ │ ├── tests
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ └── tags-input.test.tsx
│ │ │ │ ├── use-tags-input-context.ts
│ │ │ │ ├── use-tags-input-item-context.ts
│ │ │ │ ├── use-tags-input-item-props-context.ts
│ │ │ │ └── use-tags-input.ts
│ │ │ ├── time-picker
│ │ │ │ ├── examples
│ │ │ │ │ ├── advanced.tsx
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ └── root-provider.tsx
│ │ │ │ ├── index.tsx
│ │ │ │ ├── time-picker-cell.tsx
│ │ │ │ ├── time-picker-clear-trigger.tsx
│ │ │ │ ├── time-picker-column.tsx
│ │ │ │ ├── time-picker-content.tsx
│ │ │ │ ├── time-picker-context.tsx
│ │ │ │ ├── time-picker-control.tsx
│ │ │ │ ├── time-picker-input.tsx
│ │ │ │ ├── time-picker-label.tsx
│ │ │ │ ├── time-picker-positioner.tsx
│ │ │ │ ├── time-picker-root-provider.tsx
│ │ │ │ ├── time-picker-root.tsx
│ │ │ │ ├── time-picker-spacer.tsx
│ │ │ │ ├── time-picker-trigger.tsx
│ │ │ │ ├── time-picker.anatomy.ts
│ │ │ │ ├── time-picker.stories.tsx
│ │ │ │ ├── time-picker.ts
│ │ │ │ ├── use-time-picker-column-props-context.ts
│ │ │ │ ├── use-time-picker-context.ts
│ │ │ │ └── use-time-picker.ts
│ │ │ ├── timer
│ │ │ │ ├── examples
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── countdown.tsx
│ │ │ │ │ ├── events.tsx
│ │ │ │ │ └── root-provider.tsx
│ │ │ │ ├── index.tsx
│ │ │ │ ├── timer-action-trigger.tsx
│ │ │ │ ├── timer-area.tsx
│ │ │ │ ├── timer-context.tsx
│ │ │ │ ├── timer-control.tsx
│ │ │ │ ├── timer-item.tsx
│ │ │ │ ├── timer-root-provider.tsx
│ │ │ │ ├── timer-root.tsx
│ │ │ │ ├── timer-separator.tsx
│ │ │ │ ├── timer.anatomy.ts
│ │ │ │ ├── timer.stories.tsx
│ │ │ │ ├── timer.ts
│ │ │ │ ├── use-timer-context.ts
│ │ │ │ └── use-timer.ts
│ │ │ ├── toast
│ │ │ │ ├── create-toaster.tsx
│ │ │ │ ├── examples
│ │ │ │ │ ├── action.tsx
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ └── update.tsx
│ │ │ │ ├── index.tsx
│ │ │ │ ├── tests
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ └── toast.test.tsx
│ │ │ │ ├── toast-action-trigger.tsx
│ │ │ │ ├── toast-close-trigger.tsx
│ │ │ │ ├── toast-context.tsx
│ │ │ │ ├── toast-description.tsx
│ │ │ │ ├── toast-root.tsx
│ │ │ │ ├── toast-title.tsx
│ │ │ │ ├── toast.anatomy.ts
│ │ │ │ ├── toast.stories.tsx
│ │ │ │ ├── toast.ts
│ │ │ │ ├── toaster.tsx
│ │ │ │ └── use-toast-context.ts
│ │ │ ├── toggle-group
│ │ │ │ ├── examples
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── initial-value.tsx
│ │ │ │ │ ├── multiple.tsx
│ │ │ │ │ └── root-provider.tsx
│ │ │ │ ├── index.tsx
│ │ │ │ ├── tests
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ └── toggle-group.test.tsx
│ │ │ │ ├── toggle-group-context.tsx
│ │ │ │ ├── toggle-group-item.tsx
│ │ │ │ ├── toggle-group-root-provider.tsx
│ │ │ │ ├── toggle-group-root.tsx
│ │ │ │ ├── toggle-group.anatomy.ts
│ │ │ │ ├── toggle-group.stories.tsx
│ │ │ │ ├── toggle-group.ts
│ │ │ │ ├── use-toggle-group-context.ts
│ │ │ │ └── use-toggle-group.ts
│ │ │ ├── toggle
│ │ │ │ ├── examples
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── controlled.tsx
│ │ │ │ │ ├── disabled.tsx
│ │ │ │ │ └── indicator.tsx
│ │ │ │ ├── index.tsx
│ │ │ │ ├── toggle-context.tsx
│ │ │ │ ├── toggle-indicator.tsx
│ │ │ │ ├── toggle-root.tsx
│ │ │ │ ├── toggle.anatomy.ts
│ │ │ │ ├── toggle.stories.tsx
│ │ │ │ ├── toggle.ts
│ │ │ │ ├── use-toggle-context.ts
│ │ │ │ └── use-toggle.ts
│ │ │ ├── tooltip
│ │ │ │ ├── examples
│ │ │ │ │ ├── arrow.tsx
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── controlled.tsx
│ │ │ │ │ ├── positioning.tsx
│ │ │ │ │ ├── render-fn.tsx
│ │ │ │ │ ├── root-provider.tsx
│ │ │ │ │ └── timings.tsx
│ │ │ │ ├── index.tsx
│ │ │ │ ├── tests
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ └── tooltip.test.tsx
│ │ │ │ ├── tooltip-arrow-tip.tsx
│ │ │ │ ├── tooltip-arrow.tsx
│ │ │ │ ├── tooltip-content.tsx
│ │ │ │ ├── tooltip-context.tsx
│ │ │ │ ├── tooltip-positioner.tsx
│ │ │ │ ├── tooltip-root-provider.tsx
│ │ │ │ ├── tooltip-root.tsx
│ │ │ │ ├── tooltip-trigger.tsx
│ │ │ │ ├── tooltip.anatomy.ts
│ │ │ │ ├── tooltip.stories.tsx
│ │ │ │ ├── tooltip.ts
│ │ │ │ ├── use-tooltip-context.ts
│ │ │ │ └── use-tooltip.ts
│ │ │ ├── tour
│ │ │ │ ├── examples
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── steps.tsx
│ │ │ │ │ └── tour.tsx
│ │ │ │ ├── index.tsx
│ │ │ │ ├── tour-action-trigger.tsx
│ │ │ │ ├── tour-actions.tsx
│ │ │ │ ├── tour-arrow-tip.tsx
│ │ │ │ ├── tour-arrow.tsx
│ │ │ │ ├── tour-backdrop.tsx
│ │ │ │ ├── tour-close-trigger.tsx
│ │ │ │ ├── tour-content.tsx
│ │ │ │ ├── tour-context.tsx
│ │ │ │ ├── tour-control.tsx
│ │ │ │ ├── tour-description.tsx
│ │ │ │ ├── tour-positioner.tsx
│ │ │ │ ├── tour-progress-text.tsx
│ │ │ │ ├── tour-root.tsx
│ │ │ │ ├── tour-spotlight.tsx
│ │ │ │ ├── tour-title.tsx
│ │ │ │ ├── tour.anatomy.ts
│ │ │ │ ├── tour.stories.tsx
│ │ │ │ ├── tour.ts
│ │ │ │ ├── use-tour-context.ts
│ │ │ │ └── use-tour.ts
│ │ │ └── tree-view
│ │ │ │ ├── examples
│ │ │ │ ├── basic.tsx
│ │ │ │ └── root-provider.tsx
│ │ │ │ ├── index.tsx
│ │ │ │ ├── tests
│ │ │ │ └── tree-view.test.tsx
│ │ │ │ ├── tree-view-branch-content.tsx
│ │ │ │ ├── tree-view-branch-control.tsx
│ │ │ │ ├── tree-view-branch-indent-guide.tsx
│ │ │ │ ├── tree-view-branch-indicator.tsx
│ │ │ │ ├── tree-view-branch-text.tsx
│ │ │ │ ├── tree-view-branch-trigger.tsx
│ │ │ │ ├── tree-view-branch.tsx
│ │ │ │ ├── tree-view-context.tsx
│ │ │ │ ├── tree-view-item-indicator.tsx
│ │ │ │ ├── tree-view-item-text.tsx
│ │ │ │ ├── tree-view-item.tsx
│ │ │ │ ├── tree-view-label.tsx
│ │ │ │ ├── tree-view-node-context.ts
│ │ │ │ ├── tree-view-node-provider.tsx
│ │ │ │ ├── tree-view-root-provider.tsx
│ │ │ │ ├── tree-view-root.tsx
│ │ │ │ ├── tree-view-tree.tsx
│ │ │ │ ├── tree-view.anatomy.ts
│ │ │ │ ├── tree-view.stories.tsx
│ │ │ │ ├── tree-view.ts
│ │ │ │ ├── use-tree-view-context.ts
│ │ │ │ ├── use-tree-view-node-context.ts
│ │ │ │ ├── use-tree-view-node-props-context.ts
│ │ │ │ └── use-tree-view.ts
│ │ ├── index.tsx
│ │ ├── providers
│ │ │ ├── environment
│ │ │ │ ├── environment-provider.tsx
│ │ │ │ ├── environment.stories.tsx
│ │ │ │ ├── environment.test.tsx
│ │ │ │ ├── examples
│ │ │ │ │ ├── basic.tsx
│ │ │ │ │ ├── setup.tsx
│ │ │ │ │ └── usage.tsx
│ │ │ │ ├── index.tsx
│ │ │ │ └── use-environment-context.ts
│ │ │ ├── index.tsx
│ │ │ └── locale
│ │ │ │ ├── examples
│ │ │ │ ├── basic.tsx
│ │ │ │ ├── setup.tsx
│ │ │ │ └── usage.tsx
│ │ │ │ ├── index.tsx
│ │ │ │ ├── locale-provider.tsx
│ │ │ │ ├── locale.stories.tsx
│ │ │ │ ├── use-filter.ts
│ │ │ │ └── use-locale-context.ts
│ │ ├── setup-test.ts
│ │ ├── types.ts
│ │ ├── use-debugger.ts
│ │ └── utils
│ │ │ ├── compose-refs.ts
│ │ │ ├── create-context.ts
│ │ │ ├── create-split-props.test.ts
│ │ │ ├── create-split-props.ts
│ │ │ ├── render-strategy.ts
│ │ │ ├── run-if-fn.test.ts
│ │ │ ├── run-if-fn.ts
│ │ │ └── use-controllable-state.ts
│ ├── tsconfig.json
│ ├── tsup.config.ts
│ └── vite.config.mts
├── svelte
│ ├── .storybook
│ │ ├── main.ts
│ │ └── preview.ts
│ ├── CHANGELOG.md
│ ├── package.json
│ ├── src
│ │ ├── app.d.ts
│ │ ├── app.html
│ │ ├── lib
│ │ │ ├── components
│ │ │ │ ├── anatomy.ts
│ │ │ │ ├── avatar
│ │ │ │ │ ├── avatar-context.svelte
│ │ │ │ │ ├── avatar-fallback.svelte
│ │ │ │ │ ├── avatar-image.svelte
│ │ │ │ │ ├── avatar-root-provider.svelte
│ │ │ │ │ ├── avatar-root.svelte
│ │ │ │ │ ├── avatar.anatomy.ts
│ │ │ │ │ ├── avatar.stories.ts
│ │ │ │ │ ├── avatar.test.ts
│ │ │ │ │ ├── avatar.ts
│ │ │ │ │ ├── examples
│ │ │ │ │ │ ├── basic.svelte
│ │ │ │ │ │ ├── context.svelte
│ │ │ │ │ │ └── root-provider.svelte
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── use-avatar-context.ts
│ │ │ │ │ └── use-avatar.svelte.ts
│ │ │ │ ├── collection.ts
│ │ │ │ ├── factory
│ │ │ │ │ ├── examples
│ │ │ │ │ │ └── basic.svelte
│ │ │ │ │ ├── factory.svelte
│ │ │ │ │ ├── factory.test.ts
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── svg-element.svelte
│ │ │ │ ├── format
│ │ │ │ │ ├── examples
│ │ │ │ │ │ ├── byte-basic.svelte
│ │ │ │ │ │ ├── byte-sizes.svelte
│ │ │ │ │ │ ├── byte-with-locale.svelte
│ │ │ │ │ │ ├── byte-with-unit-display.svelte
│ │ │ │ │ │ ├── byte-with-unit.svelte
│ │ │ │ │ │ ├── number-basic.svelte
│ │ │ │ │ │ ├── number-with-compact.svelte
│ │ │ │ │ │ ├── number-with-currency.svelte
│ │ │ │ │ │ ├── number-with-locale.svelte
│ │ │ │ │ │ ├── number-with-percentage.svelte
│ │ │ │ │ │ └── number-with-unit.svelte
│ │ │ │ │ ├── format-byte.svelte
│ │ │ │ │ ├── format-number.svelte
│ │ │ │ │ ├── format.stories.ts
│ │ │ │ │ ├── format.ts
│ │ │ │ │ └── index.ts
│ │ │ │ ├── frame
│ │ │ │ │ ├── examples
│ │ │ │ │ │ ├── basic.svelte
│ │ │ │ │ │ ├── script.svelte
│ │ │ │ │ │ └── src-doc.svelte
│ │ │ │ │ ├── frame-content.svelte
│ │ │ │ │ ├── frame.stories.tsx
│ │ │ │ │ ├── frame.svelte
│ │ │ │ │ └── index.ts
│ │ │ │ ├── highlight
│ │ │ │ │ ├── examples
│ │ │ │ │ │ ├── basic.svelte
│ │ │ │ │ │ ├── ignore-case.svelte
│ │ │ │ │ │ └── match-all.svelte
│ │ │ │ │ ├── highlight.stories.ts
│ │ │ │ │ ├── highlight.svelte
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── use-highlight.svelte.ts
│ │ │ │ ├── index.ts
│ │ │ │ ├── portal
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── portal-consumer.svelte
│ │ │ │ │ └── portal.svelte
│ │ │ │ ├── presence
│ │ │ │ │ ├── examples
│ │ │ │ │ │ ├── basic.svelte
│ │ │ │ │ │ ├── lazy-mount-and-unmount-on-exit.svelte
│ │ │ │ │ │ ├── lazy-mount.svelte
│ │ │ │ │ │ ├── skip-animation-on-mount.svelte
│ │ │ │ │ │ └── unmount-on-exit.svelte
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── presence.stories.ts
│ │ │ │ │ ├── presence.svelte
│ │ │ │ │ ├── presence.test.ts
│ │ │ │ │ ├── split-presence-props.svelte.ts
│ │ │ │ │ ├── use-presence-context.ts
│ │ │ │ │ └── use-presence.svelte.ts
│ │ │ │ ├── progress
│ │ │ │ │ ├── examples
│ │ │ │ │ │ ├── circular
│ │ │ │ │ │ │ ├── basic.svelte
│ │ │ │ │ │ │ ├── indeterminate.svelte
│ │ │ │ │ │ │ ├── initial-value.svelte
│ │ │ │ │ │ │ ├── min-max.svelte
│ │ │ │ │ │ │ ├── root-provider.svelte
│ │ │ │ │ │ │ └── value-text.svelte
│ │ │ │ │ │ └── linear
│ │ │ │ │ │ │ ├── basic.svelte
│ │ │ │ │ │ │ ├── indeterminate.svelte
│ │ │ │ │ │ │ ├── initial-value.svelte
│ │ │ │ │ │ │ ├── min-max.svelte
│ │ │ │ │ │ │ ├── root-provider.svelte
│ │ │ │ │ │ │ └── value-text.svelte
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── progress-circle-range.svelte
│ │ │ │ │ ├── progress-circle-track.svelte
│ │ │ │ │ ├── progress-circle.svelte
│ │ │ │ │ ├── progress-circular.stories.ts
│ │ │ │ │ ├── progress-context.svelte
│ │ │ │ │ ├── progress-label.svelte
│ │ │ │ │ ├── progress-linear.stories.ts
│ │ │ │ │ ├── progress-range.svelte
│ │ │ │ │ ├── progress-root-provider.svelte
│ │ │ │ │ ├── progress-root.svelte
│ │ │ │ │ ├── progress-track.svelte
│ │ │ │ │ ├── progress-value-text.svelte
│ │ │ │ │ ├── progress-view.svelte
│ │ │ │ │ ├── progress.anatomy.ts
│ │ │ │ │ ├── progress.ts
│ │ │ │ │ ├── use-progress-context.ts
│ │ │ │ │ └── use-progress.svelte.ts
│ │ │ │ ├── qr-code
│ │ │ │ │ ├── examples
│ │ │ │ │ │ ├── basic.svelte
│ │ │ │ │ │ ├── context.svelte
│ │ │ │ │ │ ├── error-correction.svelte
│ │ │ │ │ │ ├── root-provider.svelte
│ │ │ │ │ │ └── with-overlay.svelte
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── qr-code-context.svelte
│ │ │ │ │ ├── qr-code-download-trigger.svelte
│ │ │ │ │ ├── qr-code-frame.svelte
│ │ │ │ │ ├── qr-code-overlay.svelte
│ │ │ │ │ ├── qr-code-pattern.svelte
│ │ │ │ │ ├── qr-code-root-provider.svelte
│ │ │ │ │ ├── qr-code-root.svelte
│ │ │ │ │ ├── qr-code.anatomy.ts
│ │ │ │ │ ├── qr-code.stories.ts
│ │ │ │ │ ├── qr-code.ts
│ │ │ │ │ ├── use-qr-code-context.ts
│ │ │ │ │ └── use-qr-code.svelte.ts
│ │ │ │ ├── slider
│ │ │ │ │ ├── examples
│ │ │ │ │ │ ├── basic.svelte
│ │ │ │ │ │ ├── center-origin.svelte
│ │ │ │ │ │ ├── dragging-indicator.svelte
│ │ │ │ │ │ ├── initial-value.svelte
│ │ │ │ │ │ ├── min-max.svelte
│ │ │ │ │ │ ├── on-event.svelte
│ │ │ │ │ │ ├── range.svelte
│ │ │ │ │ │ ├── root-provider.svelte
│ │ │ │ │ │ ├── step.svelte
│ │ │ │ │ │ ├── thumb-overlap.svelte
│ │ │ │ │ │ ├── vertical.svelte
│ │ │ │ │ │ └── with-marks.svelte
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── slider-context.svelte
│ │ │ │ │ ├── slider-control.svelte
│ │ │ │ │ ├── slider-dragging-indicator.svelte
│ │ │ │ │ ├── slider-hidden-input.svelte
│ │ │ │ │ ├── slider-label.svelte
│ │ │ │ │ ├── slider-marker-group.svelte
│ │ │ │ │ ├── slider-marker.svelte
│ │ │ │ │ ├── slider-range.svelte
│ │ │ │ │ ├── slider-root-provider.svelte
│ │ │ │ │ ├── slider-root.svelte
│ │ │ │ │ ├── slider-thumb-props-provider.svelte
│ │ │ │ │ ├── slider-thumb.svelte
│ │ │ │ │ ├── slider-track.svelte
│ │ │ │ │ ├── slider-value-text.svelte
│ │ │ │ │ ├── slider.anatomy.ts
│ │ │ │ │ ├── slider.stories.ts
│ │ │ │ │ ├── slider.ts
│ │ │ │ │ ├── use-slider-context.ts
│ │ │ │ │ ├── use-slider-thumb-props-context.ts
│ │ │ │ │ └── use-slider.svelte.ts
│ │ │ │ └── timer
│ │ │ │ │ ├── examples
│ │ │ │ │ ├── basic.svelte
│ │ │ │ │ ├── countdown.svelte
│ │ │ │ │ ├── custom-interval.svelte
│ │ │ │ │ ├── events.svelte
│ │ │ │ │ ├── pomodoro.svelte
│ │ │ │ │ └── root-provider.svelte
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── timer-action-trigger.svelte
│ │ │ │ │ ├── timer-area.svelte
│ │ │ │ │ ├── timer-context.svelte
│ │ │ │ │ ├── timer-control.svelte
│ │ │ │ │ ├── timer-item.svelte
│ │ │ │ │ ├── timer-root-provider.svelte
│ │ │ │ │ ├── timer-root.svelte
│ │ │ │ │ ├── timer-separator.svelte
│ │ │ │ │ ├── timer.anatomy.ts
│ │ │ │ │ ├── timer.stories.ts
│ │ │ │ │ ├── timer.ts
│ │ │ │ │ ├── use-timer-context.ts
│ │ │ │ │ └── use-timer.svelte.ts
│ │ │ ├── index.ts
│ │ │ ├── providers
│ │ │ │ ├── environment
│ │ │ │ │ ├── environment-provider.svelte
│ │ │ │ │ ├── environment.stories.ts
│ │ │ │ │ ├── examples
│ │ │ │ │ │ ├── basic.svelte
│ │ │ │ │ │ ├── setup.svelte
│ │ │ │ │ │ └── usage.svelte
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── use-environment-context.ts
│ │ │ │ ├── index.ts
│ │ │ │ └── locale
│ │ │ │ │ ├── examples
│ │ │ │ │ ├── basic.svelte
│ │ │ │ │ ├── setup.svelte
│ │ │ │ │ └── usage.svelte
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── locale-provider.svelte
│ │ │ │ │ ├── locale.stories.ts
│ │ │ │ │ └── use-locale-context.ts
│ │ │ ├── types.ts
│ │ │ └── utils
│ │ │ │ ├── create-context.ts
│ │ │ │ ├── create-split-props.ts
│ │ │ │ ├── render-strategy.ts
│ │ │ │ ├── run-if-fn.ts
│ │ │ │ └── tags.ts
│ │ ├── routes
│ │ │ └── +page.svelte
│ │ └── test-setup.ts
│ ├── svelte.config.js
│ ├── tsconfig.json
│ └── vite.config.ts
├── tsconfig.json
└── vue
│ ├── .storybook
│ └── main.ts
│ ├── CHANGELOG.md
│ ├── LICENSE
│ ├── README.md
│ ├── clean-package.config.json
│ ├── histoire.config.ts
│ ├── package.json
│ ├── src
│ ├── components
│ │ ├── accordion
│ │ │ ├── accordion-context.vue
│ │ │ ├── accordion-item-content.vue
│ │ │ ├── accordion-item-context.vue
│ │ │ ├── accordion-item-indicator.vue
│ │ │ ├── accordion-item-trigger.vue
│ │ │ ├── accordion-item.vue
│ │ │ ├── accordion-root-provider.vue
│ │ │ ├── accordion-root.vue
│ │ │ ├── accordion.anatomy.ts
│ │ │ ├── accordion.stories.vue
│ │ │ ├── accordion.ts
│ │ │ ├── accordion.types.ts
│ │ │ ├── examples
│ │ │ │ ├── accordion.vue
│ │ │ │ ├── basic.vue
│ │ │ │ ├── collapsible.vue
│ │ │ │ ├── context
│ │ │ │ │ ├── focusedValue.vue
│ │ │ │ │ ├── getItemState.vue
│ │ │ │ │ ├── setValue.vue
│ │ │ │ │ └── value.vue
│ │ │ │ ├── controlled.vue
│ │ │ │ ├── disabled.vue
│ │ │ │ ├── horizontal.vue
│ │ │ │ ├── multiple.vue
│ │ │ │ ├── render-prop.vue
│ │ │ │ ├── root-provider.vue
│ │ │ │ └── vertical.vue
│ │ │ ├── index.ts
│ │ │ ├── tests
│ │ │ │ ├── accordion.test.ts
│ │ │ │ └── accordion.test.vue
│ │ │ ├── use-accordion-context.ts
│ │ │ ├── use-accordion-item-context.ts
│ │ │ ├── use-accordion-item-props-context.ts
│ │ │ └── use-accordion.ts
│ │ ├── anatomy.ts
│ │ ├── angle-slider
│ │ │ ├── angle-slider-context.vue
│ │ │ ├── angle-slider-control.vue
│ │ │ ├── angle-slider-hidden-input.vue
│ │ │ ├── angle-slider-label.vue
│ │ │ ├── angle-slider-marker-group.vue
│ │ │ ├── angle-slider-marker.vue
│ │ │ ├── angle-slider-root-provider.vue
│ │ │ ├── angle-slider-root.vue
│ │ │ ├── angle-slider-thumb.vue
│ │ │ ├── angle-slider-value-text.vue
│ │ │ ├── angle-slider.anatomy.ts
│ │ │ ├── angle-slider.stories.vue
│ │ │ ├── angle-slider.ts
│ │ │ ├── angle-slider.types.ts
│ │ │ ├── examples
│ │ │ │ ├── basic.vue
│ │ │ │ ├── controlled.vue
│ │ │ │ └── steps.vue
│ │ │ ├── index.ts
│ │ │ ├── use-angle-slider-context.ts
│ │ │ └── use-angle-slider.ts
│ │ ├── avatar
│ │ │ ├── avatar-context.vue
│ │ │ ├── avatar-fallback.vue
│ │ │ ├── avatar-image.vue
│ │ │ ├── avatar-root-provider.vue
│ │ │ ├── avatar-root.vue
│ │ │ ├── avatar.anatomy.ts
│ │ │ ├── avatar.stories.vue
│ │ │ ├── avatar.ts
│ │ │ ├── avatar.types.ts
│ │ │ ├── examples
│ │ │ │ ├── basic.vue
│ │ │ │ ├── closed.vue
│ │ │ │ ├── context.vue
│ │ │ │ ├── events.vue
│ │ │ │ └── root-provider.vue
│ │ │ ├── index.ts
│ │ │ ├── use-avatar-context.ts
│ │ │ └── use-avatar.ts
│ │ ├── carousel
│ │ │ ├── carousel-autoplay-trigger.vue
│ │ │ ├── carousel-context.vue
│ │ │ ├── carousel-control.vue
│ │ │ ├── carousel-indicator-group.vue
│ │ │ ├── carousel-indicator.vue
│ │ │ ├── carousel-item-group.vue
│ │ │ ├── carousel-item.vue
│ │ │ ├── carousel-next-trigger.vue
│ │ │ ├── carousel-prev-trigger.vue
│ │ │ ├── carousel-root-provider.vue
│ │ │ ├── carousel-root.vue
│ │ │ ├── carousel.anatomy.ts
│ │ │ ├── carousel.stories.vue
│ │ │ ├── carousel.test.ts
│ │ │ ├── carousel.ts
│ │ │ ├── carousel.types.ts
│ │ │ ├── examples
│ │ │ │ ├── autoplay.vue
│ │ │ │ ├── basic.vue
│ │ │ │ ├── controlled.vue
│ │ │ │ └── root-provider.vue
│ │ │ ├── index.ts
│ │ │ ├── use-carousel-context.ts
│ │ │ └── use-carousel.ts
│ │ ├── checkbox
│ │ │ ├── checkbox-context.vue
│ │ │ ├── checkbox-control.vue
│ │ │ ├── checkbox-group.types.ts
│ │ │ ├── checkbox-group.vue
│ │ │ ├── checkbox-hidden-input.vue
│ │ │ ├── checkbox-indicator.vue
│ │ │ ├── checkbox-label.vue
│ │ │ ├── checkbox-root-provider.vue
│ │ │ ├── checkbox-root.vue
│ │ │ ├── checkbox.anatomy.ts
│ │ │ ├── checkbox.stories.vue
│ │ │ ├── checkbox.ts
│ │ │ ├── checkbox.types.ts
│ │ │ ├── examples
│ │ │ │ ├── basic.vue
│ │ │ │ ├── controlled.vue
│ │ │ │ ├── group-controlled.vue
│ │ │ │ ├── group.vue
│ │ │ │ ├── indeterminate.vue
│ │ │ │ ├── render-prop.vue
│ │ │ │ ├── root-provider.vue
│ │ │ │ └── with-field.vue
│ │ │ ├── index.ts
│ │ │ ├── tests
│ │ │ │ ├── checkbox.test.ts
│ │ │ │ ├── checkbox.test.vue
│ │ │ │ └── controlled-checkbox.test.vue
│ │ │ ├── use-checkbox-context.ts
│ │ │ ├── use-checkbox-group-context.tsx
│ │ │ ├── use-checkbox-group.ts
│ │ │ └── use-checkbox.ts
│ │ ├── client-only
│ │ │ ├── client-only.vue
│ │ │ └── index.ts
│ │ ├── clipboard
│ │ │ ├── clipboard-context.vue
│ │ │ ├── clipboard-control.vue
│ │ │ ├── clipboard-indicator.vue
│ │ │ ├── clipboard-input.vue
│ │ │ ├── clipboard-label.vue
│ │ │ ├── clipboard-root-provider.vue
│ │ │ ├── clipboard-root.vue
│ │ │ ├── clipboard-trigger.vue
│ │ │ ├── clipboard-value-text.vue
│ │ │ ├── clipboard.anatomy.ts
│ │ │ ├── clipboard.stories.vue
│ │ │ ├── clipboard.ts
│ │ │ ├── clipboard.types.ts
│ │ │ ├── examples
│ │ │ │ ├── basic.vue
│ │ │ │ ├── controlled.vue
│ │ │ │ ├── render-fn.vue
│ │ │ │ └── root-provider.vue
│ │ │ ├── index.ts
│ │ │ ├── tests
│ │ │ │ └── clipboard.test.vue
│ │ │ ├── use-clipboard-context.ts
│ │ │ └── use-clipboard.ts
│ │ ├── collapsible
│ │ │ ├── collapsible-content.vue
│ │ │ ├── collapsible-context.vue
│ │ │ ├── collapsible-indicator.vue
│ │ │ ├── collapsible-root-provider.vue
│ │ │ ├── collapsible-root.vue
│ │ │ ├── collapsible-trigger.vue
│ │ │ ├── collapsible.anatomy.ts
│ │ │ ├── collapsible.stories.vue
│ │ │ ├── collapsible.test.ts
│ │ │ ├── collapsible.ts
│ │ │ ├── collapsible.types.ts
│ │ │ ├── examples
│ │ │ │ ├── basic.vue
│ │ │ │ ├── controlled.vue
│ │ │ │ ├── lazy-mount-and-unmount-on-exit.vue
│ │ │ │ ├── lazy-mount.vue
│ │ │ │ ├── on-exit-complete.vue
│ │ │ │ ├── root-provider.vue
│ │ │ │ └── unmount-on-exit.vue
│ │ │ ├── index.ts
│ │ │ ├── use-collapsible-context.ts
│ │ │ └── use-collapsible.ts
│ │ ├── collection.ts
│ │ ├── color-picker
│ │ │ ├── color-picker-area-background.vue
│ │ │ ├── color-picker-area-thumb.vue
│ │ │ ├── color-picker-area.vue
│ │ │ ├── color-picker-channel-input.vue
│ │ │ ├── color-picker-channel-slider-label.vue
│ │ │ ├── color-picker-channel-slider-thumb.vue
│ │ │ ├── color-picker-channel-slider-track.vue
│ │ │ ├── color-picker-channel-slider-value-text.vue
│ │ │ ├── color-picker-channel-slider.vue
│ │ │ ├── color-picker-content.vue
│ │ │ ├── color-picker-context.vue
│ │ │ ├── color-picker-control.vue
│ │ │ ├── color-picker-eye-dropper-trigger.vue
│ │ │ ├── color-picker-format-select.vue
│ │ │ ├── color-picker-format-trigger.vue
│ │ │ ├── color-picker-hidden-input.vue
│ │ │ ├── color-picker-label.vue
│ │ │ ├── color-picker-positioner.vue
│ │ │ ├── color-picker-root-provider.vue
│ │ │ ├── color-picker-root.vue
│ │ │ ├── color-picker-swatch-group.vue
│ │ │ ├── color-picker-swatch-indicator.vue
│ │ │ ├── color-picker-swatch-trigger.vue
│ │ │ ├── color-picker-swatch.vue
│ │ │ ├── color-picker-transparency-grid.vue
│ │ │ ├── color-picker-trigger.vue
│ │ │ ├── color-picker-value-swatch.vue
│ │ │ ├── color-picker-value-text.vue
│ │ │ ├── color-picker-view.vue
│ │ │ ├── color-picker.anatomy.ts
│ │ │ ├── color-picker.stories.vue
│ │ │ ├── color-picker.ts
│ │ │ ├── color-picker.types.ts
│ │ │ ├── examples
│ │ │ │ ├── basic.vue
│ │ │ │ ├── controlled-open.vue
│ │ │ │ ├── controlled.vue
│ │ │ │ ├── root-provider.vue
│ │ │ │ └── with-field.vue
│ │ │ ├── index.ts
│ │ │ ├── tests
│ │ │ │ ├── color-picker.test.ts
│ │ │ │ └── color-picker.test.vue
│ │ │ ├── use-color-picker-area-props-context.ts
│ │ │ ├── use-color-picker-channel-props-context.ts
│ │ │ ├── use-color-picker-context.ts
│ │ │ ├── use-color-picker-format-context.ts
│ │ │ ├── use-color-picker-swatch-props-context.ts
│ │ │ └── use-color-picker.ts
│ │ ├── combobox
│ │ │ ├── combobox-clear-trigger.vue
│ │ │ ├── combobox-content.vue
│ │ │ ├── combobox-context.vue
│ │ │ ├── combobox-control.vue
│ │ │ ├── combobox-input.vue
│ │ │ ├── combobox-item-context.vue
│ │ │ ├── combobox-item-group-label.vue
│ │ │ ├── combobox-item-group.vue
│ │ │ ├── combobox-item-indicator.vue
│ │ │ ├── combobox-item-text.vue
│ │ │ ├── combobox-item.vue
│ │ │ ├── combobox-label.vue
│ │ │ ├── combobox-list.vue
│ │ │ ├── combobox-positioner.vue
│ │ │ ├── combobox-root-provider.vue
│ │ │ ├── combobox-root.vue
│ │ │ ├── combobox-trigger.vue
│ │ │ ├── combobox.anatomy.ts
│ │ │ ├── combobox.stories.vue
│ │ │ ├── combobox.ts
│ │ │ ├── combobox.types.ts
│ │ │ ├── examples
│ │ │ │ ├── advanced.vue
│ │ │ │ ├── basic.vue
│ │ │ │ ├── controlled.vue
│ │ │ │ ├── links.vue
│ │ │ │ ├── root-provider.vue
│ │ │ │ └── with-field.vue
│ │ │ ├── index.ts
│ │ │ ├── tests
│ │ │ │ ├── combobox.test.ts
│ │ │ │ └── combobox.test.vue
│ │ │ ├── use-combobox-context.ts
│ │ │ ├── use-combobox-item-context.ts
│ │ │ ├── use-combobox-item-group-props-context.ts
│ │ │ ├── use-combobox-item-props-context.ts
│ │ │ └── use-combobox.ts
│ │ ├── create-split-props.ts
│ │ ├── date-picker
│ │ │ ├── date-picker-clear-trigger.vue
│ │ │ ├── date-picker-content.vue
│ │ │ ├── date-picker-context.vue
│ │ │ ├── date-picker-control.vue
│ │ │ ├── date-picker-input.vue
│ │ │ ├── date-picker-label.vue
│ │ │ ├── date-picker-month-select.vue
│ │ │ ├── date-picker-next-trigger.vue
│ │ │ ├── date-picker-positioner.vue
│ │ │ ├── date-picker-preset-trigger.vue
│ │ │ ├── date-picker-prev-trigger.vue
│ │ │ ├── date-picker-range-text.vue
│ │ │ ├── date-picker-root-provider.vue
│ │ │ ├── date-picker-root.vue
│ │ │ ├── date-picker-table-body.vue
│ │ │ ├── date-picker-table-cell-trigger.vue
│ │ │ ├── date-picker-table-cell.vue
│ │ │ ├── date-picker-table-head.vue
│ │ │ ├── date-picker-table-header.vue
│ │ │ ├── date-picker-table-row.vue
│ │ │ ├── date-picker-table.vue
│ │ │ ├── date-picker-trigger.vue
│ │ │ ├── date-picker-view-control.vue
│ │ │ ├── date-picker-view-trigger.vue
│ │ │ ├── date-picker-view.vue
│ │ │ ├── date-picker-year-select.vue
│ │ │ ├── date-picker.anatomy.ts
│ │ │ ├── date-picker.stories.vue
│ │ │ ├── date-picker.ts
│ │ │ ├── date-picker.types.ts
│ │ │ ├── examples
│ │ │ │ ├── basic.vue
│ │ │ │ ├── controlled.vue
│ │ │ │ ├── range.vue
│ │ │ │ ├── root-provider.vue
│ │ │ │ └── standalone.vue
│ │ │ ├── index.ts
│ │ │ ├── tests
│ │ │ │ ├── date-picker.test.ts
│ │ │ │ └── date-picker.test.vue
│ │ │ ├── use-date-picker-context.ts
│ │ │ ├── use-date-picker-table-cell-props-context.ts
│ │ │ ├── use-date-picker-table-props-context.ts
│ │ │ ├── use-date-picker-view-props-context.ts
│ │ │ └── use-date-picker.ts
│ │ ├── dialog
│ │ │ ├── dialog-backdrop.vue
│ │ │ ├── dialog-close-trigger.vue
│ │ │ ├── dialog-content.vue
│ │ │ ├── dialog-context.vue
│ │ │ ├── dialog-description.vue
│ │ │ ├── dialog-positioner.vue
│ │ │ ├── dialog-root-provider.vue
│ │ │ ├── dialog-root.vue
│ │ │ ├── dialog-title.vue
│ │ │ ├── dialog-trigger.vue
│ │ │ ├── dialog.anatomy.ts
│ │ │ ├── dialog.stories.vue
│ │ │ ├── dialog.ts
│ │ │ ├── dialog.types.ts
│ │ │ ├── examples
│ │ │ │ ├── basic.vue
│ │ │ │ ├── controlled.vue
│ │ │ │ ├── lazy-mount.vue
│ │ │ │ ├── render-fn.vue
│ │ │ │ └── root-provider.vue
│ │ │ ├── index.ts
│ │ │ ├── tests
│ │ │ │ ├── dialog.test.ts
│ │ │ │ └── dialog.test.vue
│ │ │ ├── use-dialog-context.ts
│ │ │ └── use-dialog.ts
│ │ ├── download-trigger
│ │ │ ├── download-trigger.stories.vue
│ │ │ ├── download-trigger.vue
│ │ │ ├── examples
│ │ │ │ ├── basic.vue
│ │ │ │ ├── svg.vue
│ │ │ │ └── with-promise.vue
│ │ │ └── index.ts
│ │ ├── editable
│ │ │ ├── editable-area.vue
│ │ │ ├── editable-cancel-trigger.vue
│ │ │ ├── editable-context.vue
│ │ │ ├── editable-control.vue
│ │ │ ├── editable-edit-trigger.vue
│ │ │ ├── editable-input.vue
│ │ │ ├── editable-label.vue
│ │ │ ├── editable-preview.vue
│ │ │ ├── editable-root-provider.vue
│ │ │ ├── editable-root.vue
│ │ │ ├── editable-submit-trigger.vue
│ │ │ ├── editable.anatomy.ts
│ │ │ ├── editable.stories.vue
│ │ │ ├── editable.ts
│ │ │ ├── editable.types.ts
│ │ │ ├── examples
│ │ │ │ ├── basic.vue
│ │ │ │ ├── controlled.vue
│ │ │ │ ├── custom-controls.vue
│ │ │ │ ├── root-provider.vue
│ │ │ │ └── with-field.vue
│ │ │ ├── index.ts
│ │ │ ├── tests
│ │ │ │ ├── controlled-editable.test.vue
│ │ │ │ ├── editable.test.ts
│ │ │ │ └── editable.test.vue
│ │ │ ├── use-editable-context.ts
│ │ │ └── use-editable.ts
│ │ ├── factory.test.tsx
│ │ ├── factory.ts
│ │ ├── field
│ │ │ ├── examples
│ │ │ │ ├── disabled.vue
│ │ │ │ ├── input-controlled.vue
│ │ │ │ ├── input.vue
│ │ │ │ ├── reactive-invalid.vue
│ │ │ │ ├── required-indicator.vue
│ │ │ │ ├── root-provider.vue
│ │ │ │ ├── select-controlled.vue
│ │ │ │ ├── select.vue
│ │ │ │ ├── textarea-autoresize.vue
│ │ │ │ ├── textarea-controlled.vue
│ │ │ │ └── textarea.vue
│ │ │ ├── field-context.vue
│ │ │ ├── field-error-text.vue
│ │ │ ├── field-helper-text.vue
│ │ │ ├── field-input.vue
│ │ │ ├── field-label.vue
│ │ │ ├── field-required-indicator.vue
│ │ │ ├── field-root-provider.vue
│ │ │ ├── field-root.vue
│ │ │ ├── field-select.vue
│ │ │ ├── field-textarea.vue
│ │ │ ├── field.anatomy.ts
│ │ │ ├── field.stories.vue
│ │ │ ├── field.ts
│ │ │ ├── field.types.ts
│ │ │ ├── index.ts
│ │ │ ├── tests
│ │ │ │ ├── field.test.tsx
│ │ │ │ └── field.test.vue
│ │ │ ├── use-field-context.ts
│ │ │ └── use-field.ts
│ │ ├── fieldset
│ │ │ ├── examples
│ │ │ │ ├── basic.vue
│ │ │ │ ├── phone-input.vue
│ │ │ │ ├── with-checkbox.vue
│ │ │ │ └── with-field.vue
│ │ │ ├── fieldset-context.vue
│ │ │ ├── fieldset-error-text.vue
│ │ │ ├── fieldset-helper-text.vue
│ │ │ ├── fieldset-legend.vue
│ │ │ ├── fieldset-root-provider.vue
│ │ │ ├── fieldset-root.vue
│ │ │ ├── fieldset.anatomy.ts
│ │ │ ├── fieldset.stories.vue
│ │ │ ├── fieldset.ts
│ │ │ ├── fieldset.types.ts
│ │ │ ├── index.ts
│ │ │ ├── tests
│ │ │ │ ├── fieldset.test.tsx
│ │ │ │ └── fieldset.test.vue
│ │ │ ├── use-fieldset-context.ts
│ │ │ └── use-fieldset.ts
│ │ ├── file-upload
│ │ │ ├── examples
│ │ │ │ ├── basic.vue
│ │ │ │ ├── root-provider.vue
│ │ │ │ └── with-field.vue
│ │ │ ├── file-upload-clear-trigger.vue
│ │ │ ├── file-upload-context.vue
│ │ │ ├── file-upload-dropzone.vue
│ │ │ ├── file-upload-hidden-input.vue
│ │ │ ├── file-upload-item-delete-trigger.vue
│ │ │ ├── file-upload-item-group.vue
│ │ │ ├── file-upload-item-name.vue
│ │ │ ├── file-upload-item-preview-image.vue
│ │ │ ├── file-upload-item-preview.vue
│ │ │ ├── file-upload-item-size-text.vue
│ │ │ ├── file-upload-item.vue
│ │ │ ├── file-upload-label.vue
│ │ │ ├── file-upload-root-provider.vue
│ │ │ ├── file-upload-root.vue
│ │ │ ├── file-upload-trigger.vue
│ │ │ ├── file-upload.anatomy.ts
│ │ │ ├── file-upload.stories.vue
│ │ │ ├── file-upload.ts
│ │ │ ├── file-upload.types.ts
│ │ │ ├── index.ts
│ │ │ ├── tests
│ │ │ │ ├── file-upload.test.ts
│ │ │ │ └── file-upload.test.vue
│ │ │ ├── use-file-upload-context.ts
│ │ │ ├── use-file-upload-item-props-context.ts
│ │ │ └── use-file-upload.ts
│ │ ├── floating-panel
│ │ │ ├── examples
│ │ │ │ ├── anchor-position.vue
│ │ │ │ ├── basic.vue
│ │ │ │ ├── controlled-open.vue
│ │ │ │ ├── controlled-position.vue
│ │ │ │ ├── controlled-size.vue
│ │ │ │ ├── lazy-mount.vue
│ │ │ │ └── render-fn.vue
│ │ │ ├── floating-panel-body.vue
│ │ │ ├── floating-panel-close-trigger.vue
│ │ │ ├── floating-panel-content.vue
│ │ │ ├── floating-panel-context.vue
│ │ │ ├── floating-panel-control.vue
│ │ │ ├── floating-panel-drag-trigger.vue
│ │ │ ├── floating-panel-header.vue
│ │ │ ├── floating-panel-positioner.vue
│ │ │ ├── floating-panel-resize-trigger.vue
│ │ │ ├── floating-panel-root-provider.vue
│ │ │ ├── floating-panel-root.vue
│ │ │ ├── floating-panel-stage-trigger.vue
│ │ │ ├── floating-panel-title.vue
│ │ │ ├── floating-panel-trigger.vue
│ │ │ ├── floating-panel.anatomy.ts
│ │ │ ├── floating-panel.stories.vue
│ │ │ ├── floating-panel.ts
│ │ │ ├── floating-panel.types.ts
│ │ │ ├── index.ts
│ │ │ ├── use-floating-panel-context.ts
│ │ │ └── use-floating-panel.ts
│ │ ├── focus-trap
│ │ │ ├── examples
│ │ │ │ ├── autofocus.vue
│ │ │ │ ├── basic.vue
│ │ │ │ └── initial-focus.vue
│ │ │ ├── focus-trap.stories.vue
│ │ │ ├── focus-trap.types.ts
│ │ │ ├── focus-trap.vue
│ │ │ └── index.ts
│ │ ├── format
│ │ │ ├── examples
│ │ │ │ ├── byte-basic.vue
│ │ │ │ ├── byte-sizes.vue
│ │ │ │ ├── byte-with-locale.vue
│ │ │ │ ├── byte-with-unit-display.vue
│ │ │ │ ├── byte-with-unit.vue
│ │ │ │ ├── number-basic.vue
│ │ │ │ ├── number-with-compact.vue
│ │ │ │ ├── number-with-currency.vue
│ │ │ │ ├── number-with-locale.vue
│ │ │ │ ├── number-with-percentage.vue
│ │ │ │ ├── number-with-unit.vue
│ │ │ │ ├── relative-time-basic.vue
│ │ │ │ └── relative-time-short.vue
│ │ │ ├── format-byte.vue
│ │ │ ├── format-number.vue
│ │ │ ├── format-relative-time.vue
│ │ │ ├── format.stories.vue
│ │ │ ├── format.ts
│ │ │ └── index.ts
│ │ ├── frame
│ │ │ ├── examples
│ │ │ │ ├── basic.vue
│ │ │ │ ├── script.vue
│ │ │ │ └── src-doc.vue
│ │ │ ├── frame-content.vue
│ │ │ ├── frame.stories.vue
│ │ │ ├── frame.vue
│ │ │ └── index.ts
│ │ ├── highlight
│ │ │ ├── examples
│ │ │ │ ├── basic.vue
│ │ │ │ ├── ignore-case.vue
│ │ │ │ ├── match-all.vue
│ │ │ │ ├── multiple.vue
│ │ │ │ └── with-input.vue
│ │ │ ├── highlight.stories.vue
│ │ │ ├── highlight.types.ts
│ │ │ ├── highlight.vue
│ │ │ ├── index.ts
│ │ │ └── use-highlight.ts
│ │ ├── hover-card
│ │ │ ├── examples
│ │ │ │ ├── basic.vue
│ │ │ │ ├── controlled.vue
│ │ │ │ ├── positioning.vue
│ │ │ │ ├── render-prop.vue
│ │ │ │ └── root-provider.vue
│ │ │ ├── hover-card-arrow-tip.vue
│ │ │ ├── hover-card-arrow.vue
│ │ │ ├── hover-card-content.vue
│ │ │ ├── hover-card-context.vue
│ │ │ ├── hover-card-positioner.vue
│ │ │ ├── hover-card-root-provider.vue
│ │ │ ├── hover-card-root.vue
│ │ │ ├── hover-card-trigger.vue
│ │ │ ├── hover-card.anatomy.ts
│ │ │ ├── hover-card.stories.vue
│ │ │ ├── hover-card.ts
│ │ │ ├── hover-card.types.ts
│ │ │ ├── index.ts
│ │ │ ├── tests
│ │ │ │ ├── hover-card.test.ts
│ │ │ │ └── hover-card.test.vue
│ │ │ ├── use-hover-card-context.ts
│ │ │ └── use-hover-card.ts
│ │ ├── index.ts
│ │ ├── listbox
│ │ │ ├── examples
│ │ │ │ ├── basic.vue
│ │ │ │ ├── controlled.vue
│ │ │ │ ├── disabled.vue
│ │ │ │ ├── group.vue
│ │ │ │ ├── multiple.vue
│ │ │ │ ├── root-provider.vue
│ │ │ │ └── value-text.vue
│ │ │ ├── index.ts
│ │ │ ├── listbox-content.vue
│ │ │ ├── listbox-input.vue
│ │ │ ├── listbox-item-group-label.vue
│ │ │ ├── listbox-item-group.vue
│ │ │ ├── listbox-item-indicator.vue
│ │ │ ├── listbox-item-text.vue
│ │ │ ├── listbox-item.vue
│ │ │ ├── listbox-label.vue
│ │ │ ├── listbox-root-provider.vue
│ │ │ ├── listbox-root.vue
│ │ │ ├── listbox-value-text.vue
│ │ │ ├── listbox.anatomy.ts
│ │ │ ├── listbox.stories.vue
│ │ │ ├── listbox.ts
│ │ │ ├── listbox.types.ts
│ │ │ ├── tests
│ │ │ │ ├── listbox.test.ts
│ │ │ │ └── listbox.test.vue
│ │ │ ├── use-listbox-context.ts
│ │ │ ├── use-listbox-item-context.ts
│ │ │ ├── use-listbox-item-group-props-context.ts
│ │ │ ├── use-listbox-item-props-context.ts
│ │ │ └── use-listbox.ts
│ │ ├── menu
│ │ │ ├── examples
│ │ │ │ ├── basic.vue
│ │ │ │ ├── checkbox.vue
│ │ │ │ ├── context.vue
│ │ │ │ ├── controlled.vue
│ │ │ │ ├── group.vue
│ │ │ │ ├── nested.vue
│ │ │ │ ├── radio-group.vue
│ │ │ │ ├── render-prop.vue
│ │ │ │ ├── root-provider.vue
│ │ │ │ ├── select-event.vue
│ │ │ │ └── separator.vue
│ │ │ ├── index.ts
│ │ │ ├── menu-arrow-tip.vue
│ │ │ ├── menu-arrow.vue
│ │ │ ├── menu-checkbox-item.vue
│ │ │ ├── menu-content.vue
│ │ │ ├── menu-context-trigger.vue
│ │ │ ├── menu-context.vue
│ │ │ ├── menu-indicator.vue
│ │ │ ├── menu-item-context.vue
│ │ │ ├── menu-item-group-label.vue
│ │ │ ├── menu-item-group.vue
│ │ │ ├── menu-item-indicator.vue
│ │ │ ├── menu-item-text.vue
│ │ │ ├── menu-item.vue
│ │ │ ├── menu-positioner.vue
│ │ │ ├── menu-radio-item-group.vue
│ │ │ ├── menu-radio-item.vue
│ │ │ ├── menu-root-provider.vue
│ │ │ ├── menu-root.vue
│ │ │ ├── menu-separator.vue
│ │ │ ├── menu-trigger-item.vue
│ │ │ ├── menu-trigger.vue
│ │ │ ├── menu.anatomy.ts
│ │ │ ├── menu.stories.vue
│ │ │ ├── menu.ts
│ │ │ ├── menu.types.ts
│ │ │ ├── tests
│ │ │ │ ├── menu.test.ts
│ │ │ │ └── menu.test.vue
│ │ │ ├── use-menu-context.ts
│ │ │ ├── use-menu-item-context.ts
│ │ │ ├── use-menu-item-group-context.ts
│ │ │ ├── use-menu-machine-context.ts
│ │ │ ├── use-menu-option-item-props-context.ts
│ │ │ ├── use-menu-trigger-item-context.ts
│ │ │ └── use-menu.ts
│ │ ├── number-input
│ │ │ ├── examples
│ │ │ │ ├── basic.vue
│ │ │ │ ├── controlled.vue
│ │ │ │ ├── form-usage.vue
│ │ │ │ ├── formatted.vue
│ │ │ │ ├── fraction-digits.vue
│ │ │ │ ├── min-max.vue
│ │ │ │ ├── mouse-wheel.vue
│ │ │ │ ├── no-clamp.vue
│ │ │ │ ├── render-fn.vue
│ │ │ │ ├── root-provider.vue
│ │ │ │ ├── scrubber.vue
│ │ │ │ └── with-field.vue
│ │ │ ├── index.ts
│ │ │ ├── number-input-context.vue
│ │ │ ├── number-input-control.vue
│ │ │ ├── number-input-decrement-trigger.vue
│ │ │ ├── number-input-increment-trigger.vue
│ │ │ ├── number-input-input.vue
│ │ │ ├── number-input-label.vue
│ │ │ ├── number-input-root-provider.vue
│ │ │ ├── number-input-root.vue
│ │ │ ├── number-input-scrubber.vue
│ │ │ ├── number-input-value-text.vue
│ │ │ ├── number-input.anatomy.ts
│ │ │ ├── number-input.stories.vue
│ │ │ ├── number-input.ts
│ │ │ ├── number-input.types.ts
│ │ │ ├── tests
│ │ │ │ ├── number-input.test.ts
│ │ │ │ └── number-input.test.vue
│ │ │ ├── use-number-input-context.ts
│ │ │ └── use-number-input.ts
│ │ ├── pagination
│ │ │ ├── examples
│ │ │ │ ├── basic.vue
│ │ │ │ ├── customized.vue
│ │ │ │ └── root-provider.vue
│ │ │ ├── index.ts
│ │ │ ├── pagination-context.vue
│ │ │ ├── pagination-ellipsis.vue
│ │ │ ├── pagination-item.vue
│ │ │ ├── pagination-next-trigger.vue
│ │ │ ├── pagination-prev-trigger.vue
│ │ │ ├── pagination-root-provider.vue
│ │ │ ├── pagination-root.vue
│ │ │ ├── pagination.anatomy.ts
│ │ │ ├── pagination.stories.vue
│ │ │ ├── pagination.ts
│ │ │ ├── pagination.types.ts
│ │ │ ├── tests
│ │ │ │ ├── pagination.test.ts
│ │ │ │ └── pagination.test.vue
│ │ │ ├── use-pagination-context.ts
│ │ │ └── use-pagination.ts
│ │ ├── password-input
│ │ │ ├── examples
│ │ │ │ ├── autocomplete.vue
│ │ │ │ ├── basic.vue
│ │ │ │ ├── controlled-visibility.vue
│ │ │ │ ├── ignore-password-manager.vue
│ │ │ │ ├── root-provider.vue
│ │ │ │ └── with-field.vue
│ │ │ ├── index.ts
│ │ │ ├── password-input-context.vue
│ │ │ ├── password-input-control.vue
│ │ │ ├── password-input-indicator.vue
│ │ │ ├── password-input-input.vue
│ │ │ ├── password-input-label.vue
│ │ │ ├── password-input-root-provider.vue
│ │ │ ├── password-input-root.vue
│ │ │ ├── password-input-visibility-trigger.vue
│ │ │ ├── password-input.anatomy.ts
│ │ │ ├── password-input.stories.vue
│ │ │ ├── password-input.ts
│ │ │ ├── password-input.types.ts
│ │ │ ├── use-password-input-context.ts
│ │ │ └── use-password-input.ts
│ │ ├── pin-input
│ │ │ ├── examples
│ │ │ │ ├── basic.vue
│ │ │ │ ├── blurred.vue
│ │ │ │ ├── customized.vue
│ │ │ │ ├── initial-value.vue
│ │ │ │ ├── otp-mode.vue
│ │ │ │ ├── root-provider.vue
│ │ │ │ ├── with-field.vue
│ │ │ │ └── with-mask.vue
│ │ │ ├── index.ts
│ │ │ ├── pin-input-context.vue
│ │ │ ├── pin-input-control.vue
│ │ │ ├── pin-input-hidden-input.vue
│ │ │ ├── pin-input-input.vue
│ │ │ ├── pin-input-label.vue
│ │ │ ├── pin-input-root-provider.vue
│ │ │ ├── pin-input-root.vue
│ │ │ ├── pin-input.anatomy.ts
│ │ │ ├── pin-input.stories.vue
│ │ │ ├── pin-input.ts
│ │ │ ├── pin-input.types.ts
│ │ │ ├── tests
│ │ │ │ ├── pin-input.test.ts
│ │ │ │ └── pin-input.test.vue
│ │ │ ├── use-pin-input-context.ts
│ │ │ └── use-pin-input.ts
│ │ ├── popover
│ │ │ ├── examples
│ │ │ │ ├── arrow.vue
│ │ │ │ ├── as-child.vue
│ │ │ │ ├── basic.vue
│ │ │ │ ├── close-behavior.vue
│ │ │ │ ├── controlled.vue
│ │ │ │ ├── factory.vue
│ │ │ │ ├── modal.vue
│ │ │ │ ├── on-open-change.vue
│ │ │ │ ├── portalled.vue
│ │ │ │ ├── positioning.vue
│ │ │ │ ├── render-fn.vue
│ │ │ │ └── root-provider.vue
│ │ │ ├── index.ts
│ │ │ ├── popover-anchor.vue
│ │ │ ├── popover-arrow-tip.vue
│ │ │ ├── popover-arrow.vue
│ │ │ ├── popover-close-trigger.vue
│ │ │ ├── popover-content.vue
│ │ │ ├── popover-context.vue
│ │ │ ├── popover-description.vue
│ │ │ ├── popover-indicator.vue
│ │ │ ├── popover-positioner.vue
│ │ │ ├── popover-root-provider.vue
│ │ │ ├── popover-root.vue
│ │ │ ├── popover-title.vue
│ │ │ ├── popover-trigger.vue
│ │ │ ├── popover.anatomy.ts
│ │ │ ├── popover.stories.vue
│ │ │ ├── popover.ts
│ │ │ ├── popover.types.ts
│ │ │ ├── tests
│ │ │ │ ├── controlled-popover.test.vue
│ │ │ │ ├── popover.test.ts
│ │ │ │ └── popover.test.vue
│ │ │ ├── use-popover-context.ts
│ │ │ └── use-popover.ts
│ │ ├── presence
│ │ │ ├── examples
│ │ │ │ ├── basic.vue
│ │ │ │ ├── lazy-mount-and-unmount-on-exit.vue
│ │ │ │ ├── lazy-mount.vue
│ │ │ │ ├── skip-animation-on-mount.vue
│ │ │ │ └── unmount-on-exit.vue
│ │ │ ├── index.ts
│ │ │ ├── presence.stories.vue
│ │ │ ├── presence.types.ts
│ │ │ ├── presence.vue
│ │ │ ├── tests
│ │ │ │ ├── presence.test.ts
│ │ │ │ └── presence.test.vue
│ │ │ ├── use-presence-context.ts
│ │ │ └── use-presence.ts
│ │ ├── progress
│ │ │ ├── examples
│ │ │ │ ├── circular
│ │ │ │ │ ├── basic.vue
│ │ │ │ │ ├── controlled.vue
│ │ │ │ │ ├── indeterminate.vue
│ │ │ │ │ ├── initial-value.vue
│ │ │ │ │ ├── min-max.vue
│ │ │ │ │ ├── root-provider.vue
│ │ │ │ │ └── value-text.vue
│ │ │ │ └── linear
│ │ │ │ │ ├── basic.vue
│ │ │ │ │ ├── controlled.vue
│ │ │ │ │ ├── indeterminate.vue
│ │ │ │ │ ├── initial-value.vue
│ │ │ │ │ ├── min-max.vue
│ │ │ │ │ ├── root-provider.vue
│ │ │ │ │ └── value-text.vue
│ │ │ ├── index.ts
│ │ │ ├── progress-circle-range.vue
│ │ │ ├── progress-circle-track.vue
│ │ │ ├── progress-circle.vue
│ │ │ ├── progress-circular.stories.vue
│ │ │ ├── progress-context.vue
│ │ │ ├── progress-label.vue
│ │ │ ├── progress-linear.stories.vue
│ │ │ ├── progress-range.vue
│ │ │ ├── progress-root-provider.vue
│ │ │ ├── progress-root.vue
│ │ │ ├── progress-track.vue
│ │ │ ├── progress-value-text.vue
│ │ │ ├── progress-view.vue
│ │ │ ├── progress.anatomy.ts
│ │ │ ├── progress.ts
│ │ │ ├── progress.types.ts
│ │ │ ├── tests
│ │ │ │ ├── progress.test.ts
│ │ │ │ └── progress.test.vue
│ │ │ ├── use-progress-context.ts
│ │ │ └── use-progress.ts
│ │ ├── qr-code
│ │ │ ├── examples
│ │ │ │ ├── basic.vue
│ │ │ │ ├── controlled.vue
│ │ │ │ ├── error-correction.vue
│ │ │ │ ├── root-provider.vue
│ │ │ │ └── with-overlay.vue
│ │ │ ├── index.ts
│ │ │ ├── qr-code-context.vue
│ │ │ ├── qr-code-download-trigger.vue
│ │ │ ├── qr-code-frame.vue
│ │ │ ├── qr-code-overlay.vue
│ │ │ ├── qr-code-pattern.vue
│ │ │ ├── qr-code-root-provider.vue
│ │ │ ├── qr-code-root.vue
│ │ │ ├── qr-code.anatomy.ts
│ │ │ ├── qr-code.stories.vue
│ │ │ ├── qr-code.ts
│ │ │ ├── qr-code.types.ts
│ │ │ ├── tests
│ │ │ │ └── basic.vue
│ │ │ ├── use-qr-code-context.ts
│ │ │ └── use-qr-code.ts
│ │ ├── radio-group
│ │ │ ├── examples
│ │ │ │ ├── basic.vue
│ │ │ │ ├── disabled.vue
│ │ │ │ ├── initial-value.vue
│ │ │ │ ├── on-event.vue
│ │ │ │ └── root-provider.vue
│ │ │ ├── index.ts
│ │ │ ├── radio-group-context.vue
│ │ │ ├── radio-group-indicator.vue
│ │ │ ├── radio-group-item-context.vue
│ │ │ ├── radio-group-item-control.vue
│ │ │ ├── radio-group-item-hidden-input.vue
│ │ │ ├── radio-group-item-text.vue
│ │ │ ├── radio-group-item.vue
│ │ │ ├── radio-group-label.vue
│ │ │ ├── radio-group-root-provider.vue
│ │ │ ├── radio-group-root.vue
│ │ │ ├── radio-group.anatomy.ts
│ │ │ ├── radio-group.stories.vue
│ │ │ ├── radio-group.ts
│ │ │ ├── radio-group.types.ts
│ │ │ ├── tests
│ │ │ │ ├── radio-group.test.ts
│ │ │ │ └── radio-group.test.vue
│ │ │ ├── use-radio-group-context.ts
│ │ │ ├── use-radio-group-item-context.ts
│ │ │ ├── use-radio-group-item-props-context.ts
│ │ │ └── use-radio-group.ts
│ │ ├── rating-group
│ │ │ ├── examples
│ │ │ │ ├── basic.vue
│ │ │ │ ├── controlled.vue
│ │ │ │ ├── disabled.vue
│ │ │ │ ├── form-usage.vue
│ │ │ │ ├── half-ratings.vue
│ │ │ │ ├── initial-value.vue
│ │ │ │ ├── read-only.vue
│ │ │ │ ├── root-provider.vue
│ │ │ │ └── with-field.vue
│ │ │ ├── index.ts
│ │ │ ├── rating-group-context.vue
│ │ │ ├── rating-group-control.vue
│ │ │ ├── rating-group-hidden-input.vue
│ │ │ ├── rating-group-item-context.vue
│ │ │ ├── rating-group-item.vue
│ │ │ ├── rating-group-label.vue
│ │ │ ├── rating-group-root-provider.vue
│ │ │ ├── rating-group-root.vue
│ │ │ ├── rating-group.anatomy.ts
│ │ │ ├── rating-group.stories.vue
│ │ │ ├── rating-group.ts
│ │ │ ├── rating-group.types.ts
│ │ │ ├── tests
│ │ │ │ ├── rating-group.test.ts
│ │ │ │ └── rating-group.test.vue
│ │ │ ├── use-rating-group-context.ts
│ │ │ ├── use-rating-group-item-context.ts
│ │ │ └── use-rating-group.ts
│ │ ├── segment-group
│ │ │ ├── examples
│ │ │ │ ├── basic.vue
│ │ │ │ ├── controlled.vue
│ │ │ │ ├── disabled.vue
│ │ │ │ ├── initial-value.vue
│ │ │ │ └── root-provider.vue
│ │ │ ├── index.ts
│ │ │ ├── segment-group-context.vue
│ │ │ ├── segment-group-indicator.vue
│ │ │ ├── segment-group-item-context.vue
│ │ │ ├── segment-group-item-control.vue
│ │ │ ├── segment-group-item-hidden-input.vue
│ │ │ ├── segment-group-item-text.vue
│ │ │ ├── segment-group-item.vue
│ │ │ ├── segment-group-label.vue
│ │ │ ├── segment-group-root-provider.vue
│ │ │ ├── segment-group-root.vue
│ │ │ ├── segment-group.anatomy.ts
│ │ │ ├── segment-group.stories.vue
│ │ │ ├── segment-group.ts
│ │ │ ├── segment-group.types.ts
│ │ │ ├── tests
│ │ │ │ ├── segment-group.test.ts
│ │ │ │ └── segment-group.test.vue
│ │ │ ├── use-segment-group-context.ts
│ │ │ ├── use-segment-group-item-context.ts
│ │ │ ├── use-segment-group-item-props-context.ts
│ │ │ └── use-segment-group.ts
│ │ ├── select
│ │ │ ├── examples
│ │ │ │ ├── advanced.vue
│ │ │ │ ├── basic.vue
│ │ │ │ ├── controlled.vue
│ │ │ │ ├── multiple.vue
│ │ │ │ ├── reactive-collection.vue
│ │ │ │ ├── root-provider.vue
│ │ │ │ └── with-field.vue
│ │ │ ├── index.ts
│ │ │ ├── select-clear-trigger.vue
│ │ │ ├── select-content.vue
│ │ │ ├── select-context.vue
│ │ │ ├── select-control.vue
│ │ │ ├── select-hidden-select.vue
│ │ │ ├── select-indicator.vue
│ │ │ ├── select-item-context.vue
│ │ │ ├── select-item-group-label.vue
│ │ │ ├── select-item-group.vue
│ │ │ ├── select-item-indicator.vue
│ │ │ ├── select-item-text.vue
│ │ │ ├── select-item.vue
│ │ │ ├── select-label.vue
│ │ │ ├── select-list.vue
│ │ │ ├── select-positioner.vue
│ │ │ ├── select-root-provider.vue
│ │ │ ├── select-root.vue
│ │ │ ├── select-trigger.vue
│ │ │ ├── select-value-text.vue
│ │ │ ├── select.anatomy.ts
│ │ │ ├── select.stories.vue
│ │ │ ├── select.ts
│ │ │ ├── select.types.ts
│ │ │ ├── tests
│ │ │ │ ├── select.test.ts
│ │ │ │ └── select.test.vue
│ │ │ ├── use-select-context.ts
│ │ │ ├── use-select-item-context.ts
│ │ │ ├── use-select-item-group-props-context.ts
│ │ │ ├── use-select-item-props-context.ts
│ │ │ └── use-select.ts
│ │ ├── signature-pad
│ │ │ ├── examples
│ │ │ │ ├── basic.vue
│ │ │ │ ├── image-preview.vue
│ │ │ │ ├── root-provider.vue
│ │ │ │ └── with-field.vue
│ │ │ ├── index.ts
│ │ │ ├── signature-pad-clear-trigger.vue
│ │ │ ├── signature-pad-context.vue
│ │ │ ├── signature-pad-control.vue
│ │ │ ├── signature-pad-guide.vue
│ │ │ ├── signature-pad-hidden-input.vue
│ │ │ ├── signature-pad-label.vue
│ │ │ ├── signature-pad-root-provider.vue
│ │ │ ├── signature-pad-root.vue
│ │ │ ├── signature-pad-segment.vue
│ │ │ ├── signature-pad.anatomy.ts
│ │ │ ├── signature-pad.stories.vue
│ │ │ ├── signature-pad.ts
│ │ │ ├── signature-pad.types.ts
│ │ │ ├── tests
│ │ │ │ ├── signature-pad.test.ts
│ │ │ │ └── signature-pad.test.vue
│ │ │ ├── use-signature-pad-context.ts
│ │ │ └── use-signature-pad.ts
│ │ ├── slider
│ │ │ ├── examples
│ │ │ │ ├── basic.vue
│ │ │ │ ├── center-origin.vue
│ │ │ │ ├── dragging-indicator.vue
│ │ │ │ ├── initial-value.vue
│ │ │ │ ├── min-max.vue
│ │ │ │ ├── on-event.vue
│ │ │ │ ├── range.vue
│ │ │ │ ├── root-provider.vue
│ │ │ │ ├── step.vue
│ │ │ │ ├── vertical.vue
│ │ │ │ └── with-marks.vue
│ │ │ ├── index.ts
│ │ │ ├── slider-context.vue
│ │ │ ├── slider-control.vue
│ │ │ ├── slider-dragging-indicator.vue
│ │ │ ├── slider-hidden-input.vue
│ │ │ ├── slider-label.vue
│ │ │ ├── slider-marker-group.vue
│ │ │ ├── slider-marker.vue
│ │ │ ├── slider-range.vue
│ │ │ ├── slider-root-provider.vue
│ │ │ ├── slider-root.vue
│ │ │ ├── slider-thumb.vue
│ │ │ ├── slider-track.vue
│ │ │ ├── slider-value-text.vue
│ │ │ ├── slider.anatomy.ts
│ │ │ ├── slider.stories.vue
│ │ │ ├── slider.ts
│ │ │ ├── slider.types.ts
│ │ │ ├── tests
│ │ │ │ ├── slider.test.ts
│ │ │ │ └── slider.test.vue
│ │ │ ├── use-slider-context.ts
│ │ │ ├── use-slider-thumb-props-context.ts
│ │ │ └── use-slider.ts
│ │ ├── splitter
│ │ │ ├── examples
│ │ │ │ ├── basic.vue
│ │ │ │ ├── collapsible.vue
│ │ │ │ ├── events.vue
│ │ │ │ ├── multiple-panels.vue
│ │ │ │ ├── render-prop.vue
│ │ │ │ ├── root-provider.vue
│ │ │ │ └── vertical.vue
│ │ │ ├── index.ts
│ │ │ ├── splitter-context.vue
│ │ │ ├── splitter-panel.vue
│ │ │ ├── splitter-resize-trigger.vue
│ │ │ ├── splitter-root-provider.vue
│ │ │ ├── splitter-root.vue
│ │ │ ├── splitter.anatomy.ts
│ │ │ ├── splitter.stories.vue
│ │ │ ├── splitter.ts
│ │ │ ├── splitter.types.ts
│ │ │ ├── tests
│ │ │ │ └── splitter.test.vue
│ │ │ ├── use-splitter-context.ts
│ │ │ └── use-splitter.ts
│ │ ├── steps
│ │ │ ├── examples
│ │ │ │ ├── basic.vue
│ │ │ │ └── root-provider.vue
│ │ │ ├── index.ts
│ │ │ ├── steps-completed-content.vue
│ │ │ ├── steps-content.vue
│ │ │ ├── steps-context.vue
│ │ │ ├── steps-indicator.vue
│ │ │ ├── steps-item-context.vue
│ │ │ ├── steps-item.vue
│ │ │ ├── steps-list.vue
│ │ │ ├── steps-next-trigger.vue
│ │ │ ├── steps-prev-trigger.vue
│ │ │ ├── steps-progress.vue
│ │ │ ├── steps-root-provider.vue
│ │ │ ├── steps-root.vue
│ │ │ ├── steps-separator.vue
│ │ │ ├── steps-trigger.vue
│ │ │ ├── steps.anatomy.ts
│ │ │ ├── steps.stories.vue
│ │ │ ├── steps.ts
│ │ │ ├── steps.types.ts
│ │ │ ├── use-steps-context.ts
│ │ │ ├── use-steps-item-context.ts
│ │ │ ├── use-steps-item-props-context.ts
│ │ │ └── use-steps.ts
│ │ ├── switch
│ │ │ ├── examples
│ │ │ │ ├── basic.vue
│ │ │ │ ├── controlled.vue
│ │ │ │ ├── disabled.vue
│ │ │ │ ├── initial-value.vue
│ │ │ │ ├── render-prop.vue
│ │ │ │ ├── root-provider.vue
│ │ │ │ └── with-field.vue
│ │ │ ├── index.ts
│ │ │ ├── switch-context.vue
│ │ │ ├── switch-control.vue
│ │ │ ├── switch-hidden-input.vue
│ │ │ ├── switch-label.vue
│ │ │ ├── switch-root-provider.vue
│ │ │ ├── switch-root.vue
│ │ │ ├── switch-thumb.vue
│ │ │ ├── switch.anatomy.ts
│ │ │ ├── switch.stories.vue
│ │ │ ├── switch.ts
│ │ │ ├── switch.types.ts
│ │ │ ├── tests
│ │ │ │ ├── switch.test.ts
│ │ │ │ └── switch.test.vue
│ │ │ ├── use-switch-context.ts
│ │ │ └── use-switch.ts
│ │ ├── tabs
│ │ │ ├── examples
│ │ │ │ ├── basic.vue
│ │ │ │ ├── controlled.vue
│ │ │ │ ├── disabled-tab.vue
│ │ │ │ ├── indicator.vue
│ │ │ │ ├── initial-tab.vue
│ │ │ │ ├── lazy-mount.vue
│ │ │ │ ├── manual.vue
│ │ │ │ ├── root-provider.vue
│ │ │ │ └── vertical.vue
│ │ │ ├── index.ts
│ │ │ ├── tab-content.vue
│ │ │ ├── tab-indicator.vue
│ │ │ ├── tab-list.vue
│ │ │ ├── tab-trigger.vue
│ │ │ ├── tabs-context.vue
│ │ │ ├── tabs-root-provider.vue
│ │ │ ├── tabs-root.vue
│ │ │ ├── tabs.anatomy.ts
│ │ │ ├── tabs.stories.vue
│ │ │ ├── tabs.ts
│ │ │ ├── tabs.types.ts
│ │ │ ├── tests
│ │ │ │ ├── tabs.test.ts
│ │ │ │ └── tabs.test.vue
│ │ │ ├── use-tabs-context.ts
│ │ │ └── use-tabs.ts
│ │ ├── tags-input
│ │ │ ├── examples
│ │ │ │ ├── basic.vue
│ │ │ │ ├── blur-behavior.vue
│ │ │ │ ├── controlled.vue
│ │ │ │ ├── disabled-editing.vue
│ │ │ │ ├── initial-value.vue
│ │ │ │ ├── max-with-overflow.vue
│ │ │ │ ├── on-event.vue
│ │ │ │ ├── paste-behavior.vue
│ │ │ │ ├── root-provider.vue
│ │ │ │ ├── validated.vue
│ │ │ │ └── with-field.vue
│ │ │ ├── index.ts
│ │ │ ├── tags-input-clear-trigger.vue
│ │ │ ├── tags-input-context.vue
│ │ │ ├── tags-input-control.vue
│ │ │ ├── tags-input-hidden-input.vue
│ │ │ ├── tags-input-input.vue
│ │ │ ├── tags-input-item-context.vue
│ │ │ ├── tags-input-item-delete-trigger.vue
│ │ │ ├── tags-input-item-input.vue
│ │ │ ├── tags-input-item-preview.vue
│ │ │ ├── tags-input-item-text.vue
│ │ │ ├── tags-input-item.vue
│ │ │ ├── tags-input-label.vue
│ │ │ ├── tags-input-root-provider.vue
│ │ │ ├── tags-input-root.vue
│ │ │ ├── tags-input.anatomy.ts
│ │ │ ├── tags-input.stories.vue
│ │ │ ├── tags-input.ts
│ │ │ ├── tags-input.types.ts
│ │ │ ├── tests
│ │ │ │ ├── tags-input.test.ts
│ │ │ │ └── tags-input.test.vue
│ │ │ ├── use-tags-input-context.ts
│ │ │ ├── use-tags-input-item-context.ts
│ │ │ ├── use-tags-input-item-props-context.ts
│ │ │ └── use-tags-input.ts
│ │ ├── time-picker
│ │ │ ├── examples
│ │ │ │ ├── advanced.vue
│ │ │ │ ├── basic.vue
│ │ │ │ └── root-provider.vue
│ │ │ ├── index.ts
│ │ │ ├── tests
│ │ │ │ ├── time-picker.test.ts
│ │ │ │ └── time-picker.test.vue
│ │ │ ├── time-picker-cell.vue
│ │ │ ├── time-picker-clear-trigger.vue
│ │ │ ├── time-picker-column.vue
│ │ │ ├── time-picker-content.vue
│ │ │ ├── time-picker-context.vue
│ │ │ ├── time-picker-control.vue
│ │ │ ├── time-picker-input.vue
│ │ │ ├── time-picker-label.vue
│ │ │ ├── time-picker-positioner.vue
│ │ │ ├── time-picker-root-provider.vue
│ │ │ ├── time-picker-root.vue
│ │ │ ├── time-picker-spacer.vue
│ │ │ ├── time-picker-trigger.vue
│ │ │ ├── time-picker.anatomy.ts
│ │ │ ├── time-picker.stories.vue
│ │ │ ├── time-picker.ts
│ │ │ ├── time-picker.types.ts
│ │ │ ├── use-time-picker-column-props-context.ts
│ │ │ ├── use-time-picker-context.ts
│ │ │ └── use-time-picker.ts
│ │ ├── timer
│ │ │ ├── examples
│ │ │ │ ├── basic.vue
│ │ │ │ ├── countdown.vue
│ │ │ │ ├── events.vue
│ │ │ │ └── root-provider.vue
│ │ │ ├── index.ts
│ │ │ ├── timer-action-trigger.vue
│ │ │ ├── timer-area.vue
│ │ │ ├── timer-context.vue
│ │ │ ├── timer-control.vue
│ │ │ ├── timer-item.vue
│ │ │ ├── timer-root-provider.vue
│ │ │ ├── timer-root.vue
│ │ │ ├── timer-separator.vue
│ │ │ ├── timer.anatomy.ts
│ │ │ ├── timer.stories.vue
│ │ │ ├── timer.ts
│ │ │ ├── timer.types.ts
│ │ │ ├── use-timer-context.ts
│ │ │ └── use-timer.ts
│ │ ├── toast
│ │ │ ├── create-toaster.ts
│ │ │ ├── examples
│ │ │ │ ├── action.vue
│ │ │ │ ├── basic.vue
│ │ │ │ └── update.vue
│ │ │ ├── index.ts
│ │ │ ├── toast-action-trigger.vue
│ │ │ ├── toast-close-trigger.vue
│ │ │ ├── toast-context.vue
│ │ │ ├── toast-description.vue
│ │ │ ├── toast-root.vue
│ │ │ ├── toast-title.vue
│ │ │ ├── toast.anatomy.ts
│ │ │ ├── toast.stories.vue
│ │ │ ├── toast.test.ts
│ │ │ ├── toast.ts
│ │ │ ├── toaster.tsx
│ │ │ └── use-toast-context.ts
│ │ ├── toggle-group
│ │ │ ├── examples
│ │ │ │ ├── basic.vue
│ │ │ │ ├── controlled.vue
│ │ │ │ ├── initial-value.vue
│ │ │ │ ├── multiple.vue
│ │ │ │ └── root-provider.vue
│ │ │ ├── index.ts
│ │ │ ├── tests
│ │ │ │ ├── toggle-group.test.ts
│ │ │ │ └── toggle-group.test.vue
│ │ │ ├── toggle-group-context.vue
│ │ │ ├── toggle-group-item.vue
│ │ │ ├── toggle-group-root-provider.vue
│ │ │ ├── toggle-group-root.vue
│ │ │ ├── toggle-group.anatomy.ts
│ │ │ ├── toggle-group.stories.vue
│ │ │ ├── toggle-group.ts
│ │ │ ├── toggle-group.types.ts
│ │ │ ├── use-toggle-group-context.ts
│ │ │ └── use-toggle-group.ts
│ │ ├── toggle
│ │ │ ├── examples
│ │ │ │ ├── basic.vue
│ │ │ │ ├── controlled.vue
│ │ │ │ ├── disabled.vue
│ │ │ │ └── indicator.vue
│ │ │ ├── index.ts
│ │ │ ├── toggle-context.vue
│ │ │ ├── toggle-indicator.vue
│ │ │ ├── toggle-root.vue
│ │ │ ├── toggle.anatomy.ts
│ │ │ ├── toggle.stories.vue
│ │ │ ├── toggle.ts
│ │ │ ├── toggle.types.ts
│ │ │ ├── use-toggle-context.ts
│ │ │ └── use-toggle.ts
│ │ ├── tooltip
│ │ │ ├── examples
│ │ │ │ ├── arrow.vue
│ │ │ │ ├── basic.vue
│ │ │ │ ├── controlled.vue
│ │ │ │ ├── positioning.vue
│ │ │ │ ├── render-fn.vue
│ │ │ │ ├── root-provider.vue
│ │ │ │ └── timings.vue
│ │ │ ├── index.ts
│ │ │ ├── tests
│ │ │ │ ├── tooltip.test.ts
│ │ │ │ └── tooltip.test.vue
│ │ │ ├── tooltip-arrow-tip.vue
│ │ │ ├── tooltip-arrow.vue
│ │ │ ├── tooltip-content.vue
│ │ │ ├── tooltip-context.vue
│ │ │ ├── tooltip-positioner.vue
│ │ │ ├── tooltip-root-provider.vue
│ │ │ ├── tooltip-root.vue
│ │ │ ├── tooltip-trigger.vue
│ │ │ ├── tooltip.anatomy.ts
│ │ │ ├── tooltip.stories.vue
│ │ │ ├── tooltip.ts
│ │ │ ├── tooltip.types.ts
│ │ │ ├── use-tooltip-context.ts
│ │ │ └── use-tooltip.ts
│ │ ├── tour
│ │ │ ├── examples
│ │ │ │ ├── basic.vue
│ │ │ │ ├── steps.tsx
│ │ │ │ └── tour.vue
│ │ │ ├── index.ts
│ │ │ ├── tour-action-trigger.vue
│ │ │ ├── tour-actions.vue
│ │ │ ├── tour-arrow-tip.vue
│ │ │ ├── tour-arrow.vue
│ │ │ ├── tour-backdrop.vue
│ │ │ ├── tour-close-trigger.vue
│ │ │ ├── tour-content.vue
│ │ │ ├── tour-context.vue
│ │ │ ├── tour-control.vue
│ │ │ ├── tour-description.vue
│ │ │ ├── tour-positioner.vue
│ │ │ ├── tour-progress-text.vue
│ │ │ ├── tour-root.vue
│ │ │ ├── tour-spotlight.vue
│ │ │ ├── tour-title.vue
│ │ │ ├── tour.anatomy.ts
│ │ │ ├── tour.stories.vue
│ │ │ ├── tour.ts
│ │ │ ├── tour.types.ts
│ │ │ ├── use-tour-context.ts
│ │ │ └── use-tour.ts
│ │ ├── tree-view
│ │ │ ├── examples
│ │ │ │ ├── basic.vue
│ │ │ │ └── tree-node.vue
│ │ │ ├── index.ts
│ │ │ ├── tests
│ │ │ │ └── tree-view.test.ts
│ │ │ ├── tree-view-branch-content.vue
│ │ │ ├── tree-view-branch-control.vue
│ │ │ ├── tree-view-branch-indent-guide.vue
│ │ │ ├── tree-view-branch-indicator.vue
│ │ │ ├── tree-view-branch-text.vue
│ │ │ ├── tree-view-branch-trigger.vue
│ │ │ ├── tree-view-branch.vue
│ │ │ ├── tree-view-context.vue
│ │ │ ├── tree-view-item-indicator.vue
│ │ │ ├── tree-view-item-text.vue
│ │ │ ├── tree-view-item.vue
│ │ │ ├── tree-view-label.vue
│ │ │ ├── tree-view-node-context.vue
│ │ │ ├── tree-view-node-provider.vue
│ │ │ ├── tree-view-root-provider.vue
│ │ │ ├── tree-view-root.vue
│ │ │ ├── tree-view-tree.vue
│ │ │ ├── tree-view.anatomy.ts
│ │ │ ├── tree-view.stories.vue
│ │ │ ├── tree-view.ts
│ │ │ ├── tree-view.types.ts
│ │ │ ├── use-tree-view-context.ts
│ │ │ ├── use-tree-view-node-context.ts
│ │ │ ├── use-tree-view-node-props-context.ts
│ │ │ └── use-tree-view.ts
│ │ └── use-v-model.ts
│ ├── index.ts
│ ├── providers
│ │ ├── environment
│ │ │ ├── environment-provider.vue
│ │ │ ├── environment.stories.vue
│ │ │ ├── environment.test.ts
│ │ │ ├── examples
│ │ │ │ ├── basic.vue
│ │ │ │ ├── setup.vue
│ │ │ │ └── usage.vue
│ │ │ ├── index.ts
│ │ │ └── use-environment-context.ts
│ │ ├── index.ts
│ │ └── locale
│ │ │ ├── examples
│ │ │ ├── basic.vue
│ │ │ ├── setup.vue
│ │ │ └── usage.vue
│ │ │ ├── index.ts
│ │ │ ├── locale-provider.vue
│ │ │ ├── locale.stories.vue
│ │ │ ├── use-filter.ts
│ │ │ └── use-locale-context.ts
│ ├── setup-test.ts
│ ├── types.ts
│ ├── utils
│ │ ├── clean-props.ts
│ │ ├── create-context.ts
│ │ ├── dynamic.ts
│ │ ├── index.ts
│ │ ├── run-if-fn.test.ts
│ │ ├── run-if-fn.ts
│ │ ├── unref-element.ts
│ │ ├── use-emits-as-props.ts
│ │ ├── use-forward-expose.ts
│ │ ├── use-forward-props-emits.ts
│ │ ├── use-forward-props.ts
│ │ └── use-render-strategy.ts
│ └── vue.d.ts
│ ├── tsconfig.json
│ └── vite.config.mts
├── patches
└── happy-dom@17.4.4.patch
├── release-it.json
├── renovate.json
├── scripts
├── package.json
├── src
│ ├── check-exports.ts
│ ├── check-nodes.ts
│ ├── exports-check-local.ts
│ ├── exports-files.ts
│ ├── exports-sync.ts
│ ├── extend-types-with-tags.ts
│ ├── generate-prompt.ts
│ ├── generate-type-docs.ts
│ ├── generate-types.ts
│ ├── generate-vue-props.ts
│ ├── play.ts
│ └── symlink.ts
└── tsconfig.json
├── templates
├── next-js
│ ├── README.md
│ ├── next-env.d.ts
│ ├── next.config.ts
│ ├── package.json
│ ├── src
│ │ ├── app
│ │ │ ├── favicon.ico
│ │ │ ├── layout.tsx
│ │ │ └── page.tsx
│ │ └── components
│ │ │ ├── avatar.css
│ │ │ └── avatar.tsx
│ └── tsconfig.json
├── nuxt
│ ├── .gitignore
│ ├── README.md
│ ├── app.vue
│ ├── components
│ │ ├── avatar.css
│ │ └── avatar.vue
│ ├── nuxt.config.ts
│ ├── package.json
│ ├── public
│ │ ├── favicon.ico
│ │ └── robots.txt
│ ├── server
│ │ └── tsconfig.json
│ └── tsconfig.json
└── solid-start
│ ├── README.md
│ ├── app.config.ts
│ ├── package.json
│ ├── public
│ └── favicon.ico
│ ├── src
│ ├── app.css
│ ├── app.tsx
│ ├── components
│ │ ├── avatar.css
│ │ └── avatar.tsx
│ ├── entry-client.tsx
│ ├── entry-server.tsx
│ ├── global.d.ts
│ └── routes
│ │ ├── [...404].tsx
│ │ ├── about.tsx
│ │ └── index.tsx
│ └── tsconfig.json
├── turbo.json
└── website
├── README.md
├── docker-compose.yml
├── environment.d.ts
├── next-env.d.ts
├── next.config.mjs
├── package.json
├── panda.config.ts
├── park-ui.json
├── postcss.config.cjs
├── public
├── icon-192.png
├── icon-512.png
├── images
│ ├── architecture_dark.svg
│ ├── architecture_light.svg
│ ├── ark-logo-on-brand.svg
│ ├── hero.svg
│ ├── hero_dark.svg
│ ├── og-image.png
│ ├── pattern.svg
│ ├── pattern_dark.svg
│ ├── universe.svg
│ └── universe_dark.svg
└── static
│ └── v5-14071630.svg
├── schema.prisma
├── src
├── app
│ ├── (llms)
│ │ ├── llms-full.txt
│ │ │ └── route.ts
│ │ ├── llms-react.txt
│ │ │ └── route.ts
│ │ ├── llms-solid.txt
│ │ │ └── route.ts
│ │ ├── llms-svelte.txt
│ │ │ └── route.ts
│ │ ├── llms-vue.txt
│ │ │ └── route.ts
│ │ ├── llms.txt
│ │ │ └── route.ts
│ │ └── shared.ts
│ ├── actions.ts
│ ├── api
│ │ ├── auth
│ │ │ └── [...nextauth]
│ │ │ │ └── route.ts
│ │ ├── lemon
│ │ │ └── webhook
│ │ │ │ └── route.ts
│ │ └── types
│ │ │ └── [framework]
│ │ │ ├── [component]
│ │ │ └── route.ts
│ │ │ └── route.ts
│ ├── apple-icon.png
│ ├── auth
│ │ └── signin
│ │ │ └── page.tsx
│ ├── blog
│ │ ├── [slug]
│ │ │ └── page.tsx
│ │ └── page.tsx
│ ├── docs
│ │ ├── [...slug]
│ │ │ └── page.tsx
│ │ └── layout.tsx
│ ├── examples
│ │ ├── [id]
│ │ │ └── page.tsx
│ │ └── layout.tsx
│ ├── favicon.ico
│ ├── global.css
│ ├── icon.svg
│ ├── layout.tsx
│ ├── license
│ │ ├── layout.tsx
│ │ └── page.tsx
│ ├── manifest.ts
│ ├── opengraph-image.png
│ ├── page.tsx
│ ├── plus
│ │ ├── layout.tsx
│ │ ├── page.tsx
│ │ └── thank-you
│ │ │ └── page.tsx
│ ├── robots.ts
│ ├── sitemap.ts
│ └── twitter-image.png
├── components
│ ├── anatomy.tsx
│ ├── auth
│ │ ├── email-signin-form.tsx
│ │ ├── github-signin-button.tsx
│ │ ├── google-signin-button.tsx
│ │ ├── sign-in-button.tsx
│ │ ├── sign-in-link.tsx
│ │ ├── sign-out-button.tsx
│ │ └── user-button.tsx
│ ├── code-preview.tsx
│ ├── code-tabs.tsx
│ ├── color-mode-button.tsx
│ ├── command-menu.tsx
│ ├── component-preview.tsx
│ ├── component-types.tsx
│ ├── contact-dialog.tsx
│ ├── copy-to-clipboard-button.tsx
│ ├── data-attr-table.tsx
│ ├── emits-table.tsx
│ ├── example-preview.tsx
│ ├── example.tsx
│ ├── examples-preview.tsx
│ ├── faq.tsx
│ ├── iframe-example.tsx
│ ├── install-cmd.tsx
│ ├── key-bindings-table.tsx
│ ├── logo.tsx
│ ├── marketing
│ │ ├── code-examples.tsx
│ │ ├── code-snippets.ts
│ │ ├── community.tsx
│ │ ├── enterprise.tsx
│ │ ├── footer.tsx
│ │ ├── hero.tsx
│ │ ├── highlights.tsx
│ │ ├── icons.tsx
│ │ ├── navbar.tsx
│ │ ├── showcases.tsx
│ │ └── universe.tsx
│ ├── navigation
│ │ ├── breadcrumbs.tsx
│ │ ├── docs
│ │ │ ├── docs-footer.tsx
│ │ │ ├── docs-navbar.tsx
│ │ │ └── docs-sidebar.tsx
│ │ ├── examples
│ │ │ ├── examples-footer.tsx
│ │ │ ├── examples-navbar.tsx
│ │ │ └── examples-sidebar.tsx
│ │ ├── framework-select.tsx
│ │ ├── github-link.tsx
│ │ ├── mobile-navbar-links.tsx
│ │ ├── mobile-navbar.tsx
│ │ ├── mobile-sidebar-container.tsx
│ │ ├── navbar-container.tsx
│ │ ├── navbar-links.tsx
│ │ ├── navbar.tsx
│ │ ├── sidebar-container.tsx
│ │ ├── sidebar.recipe.ts
│ │ └── version-select.tsx
│ ├── page-header.tsx
│ ├── plus
│ │ ├── activation-form.tsx
│ │ ├── faqs.tsx
│ │ ├── get-in-touch.tsx
│ │ ├── mail-to-support.tsx
│ │ └── pricing-card.tsx
│ ├── pre.tsx
│ ├── props-table.tsx
│ ├── quickstart.tsx
│ ├── section-header.tsx
│ ├── submit-button.tsx
│ ├── table-of-content.tsx
│ ├── theme-image.tsx
│ ├── toaster.tsx
│ └── ui
│ │ ├── accordion.tsx
│ │ ├── alert.tsx
│ │ ├── avatar-group.tsx
│ │ ├── avatar.tsx
│ │ ├── badge.tsx
│ │ ├── button.tsx
│ │ ├── card.tsx
│ │ ├── carousel.tsx
│ │ ├── checkbox.tsx
│ │ ├── clipboard.tsx
│ │ ├── code.tsx
│ │ ├── collapsible.tsx
│ │ ├── color-picker.tsx
│ │ ├── combobox.tsx
│ │ ├── date-picker.tsx
│ │ ├── dialog.tsx
│ │ ├── drawer.tsx
│ │ ├── editable.tsx
│ │ ├── field.tsx
│ │ ├── file-upload.tsx
│ │ ├── form-label.tsx
│ │ ├── heading.tsx
│ │ ├── hover-card.tsx
│ │ ├── icon-button.tsx
│ │ ├── icon.tsx
│ │ ├── input.tsx
│ │ ├── kbd.tsx
│ │ ├── link.tsx
│ │ ├── menu.tsx
│ │ ├── number-input.tsx
│ │ ├── pagination.tsx
│ │ ├── pin-input.tsx
│ │ ├── popover.tsx
│ │ ├── primitives
│ │ ├── accordion.tsx
│ │ ├── alert.tsx
│ │ ├── avatar.tsx
│ │ ├── badge.tsx
│ │ ├── button.tsx
│ │ ├── card.tsx
│ │ ├── carousel.tsx
│ │ ├── checkbox.tsx
│ │ ├── clipboard.tsx
│ │ ├── code.tsx
│ │ ├── collapsible.tsx
│ │ ├── color-picker.tsx
│ │ ├── combobox.tsx
│ │ ├── date-picker.tsx
│ │ ├── dialog.tsx
│ │ ├── drawer.tsx
│ │ ├── editable.tsx
│ │ ├── field.tsx
│ │ ├── file-upload.tsx
│ │ ├── form-label.tsx
│ │ ├── heading.tsx
│ │ ├── hover-card.tsx
│ │ ├── icon-button.tsx
│ │ ├── icon.tsx
│ │ ├── input.tsx
│ │ ├── kbd.tsx
│ │ ├── link.tsx
│ │ ├── menu.tsx
│ │ ├── number-input.tsx
│ │ ├── pagination.tsx
│ │ ├── pin-input.tsx
│ │ ├── popover.tsx
│ │ ├── progress.tsx
│ │ ├── qr-code.tsx
│ │ ├── radio-button-group.tsx
│ │ ├── radio-group.tsx
│ │ ├── rating-group.tsx
│ │ ├── segment-group.tsx
│ │ ├── select.tsx
│ │ ├── signature-pad.tsx
│ │ ├── skeleton.tsx
│ │ ├── slider.tsx
│ │ ├── spinner.tsx
│ │ ├── splitter.tsx
│ │ ├── switch.tsx
│ │ ├── table.tsx
│ │ ├── tabs.tsx
│ │ ├── tags-input.tsx
│ │ ├── text.tsx
│ │ ├── textarea.tsx
│ │ ├── toast.tsx
│ │ ├── toggle-group.tsx
│ │ ├── tooltip.tsx
│ │ ├── tour.tsx
│ │ └── tree-view.tsx
│ │ ├── progress.tsx
│ │ ├── prose.tsx
│ │ ├── qr-code.tsx
│ │ ├── radio-button-group.tsx
│ │ ├── radio-group.tsx
│ │ ├── rating-group.tsx
│ │ ├── segment-group.tsx
│ │ ├── select.tsx
│ │ ├── signature-pad.tsx
│ │ ├── skeleton.tsx
│ │ ├── slider.tsx
│ │ ├── spinner.tsx
│ │ ├── splitter.tsx
│ │ ├── stepper.tsx
│ │ ├── switch.tsx
│ │ ├── table.tsx
│ │ ├── tabs.tsx
│ │ ├── tags-input.tsx
│ │ ├── text.tsx
│ │ ├── textarea.tsx
│ │ ├── toast.tsx
│ │ ├── toggle-group.tsx
│ │ ├── tooltip.tsx
│ │ ├── tour.tsx
│ │ └── tree-view.tsx
├── content
│ ├── blog
│ │ └── hello-world.mdx
│ ├── pages
│ │ ├── components
│ │ │ ├── accordion.mdx
│ │ │ ├── angle-slider.mdx
│ │ │ ├── avatar.mdx
│ │ │ ├── carousel.mdx
│ │ │ ├── checkbox.mdx
│ │ │ ├── clipboard.mdx
│ │ │ ├── collapsible.mdx
│ │ │ ├── color-picker.mdx
│ │ │ ├── combobox.mdx
│ │ │ ├── date-picker.mdx
│ │ │ ├── dialog.mdx
│ │ │ ├── editable.mdx
│ │ │ ├── field.mdx
│ │ │ ├── fieldset.mdx
│ │ │ ├── file-upload.mdx
│ │ │ ├── floating-panel.mdx
│ │ │ ├── hover-card.mdx
│ │ │ ├── listbox.mdx
│ │ │ ├── menu.mdx
│ │ │ ├── number-input.mdx
│ │ │ ├── pagination.mdx
│ │ │ ├── password-input.mdx
│ │ │ ├── pin-input.mdx
│ │ │ ├── popover.mdx
│ │ │ ├── progress-circular.mdx
│ │ │ ├── progress-linear.mdx
│ │ │ ├── qr-code.mdx
│ │ │ ├── radio-group.mdx
│ │ │ ├── rating-group.mdx
│ │ │ ├── segment-group.mdx
│ │ │ ├── select.mdx
│ │ │ ├── signature-pad.mdx
│ │ │ ├── slider.mdx
│ │ │ ├── splitter.mdx
│ │ │ ├── steps.mdx
│ │ │ ├── switch.mdx
│ │ │ ├── tabs.mdx
│ │ │ ├── tags-input.mdx
│ │ │ ├── timer.mdx
│ │ │ ├── toast.mdx
│ │ │ ├── toggle-group.mdx
│ │ │ ├── toggle.mdx
│ │ │ ├── tooltip.mdx
│ │ │ ├── tour.mdx
│ │ │ └── tree-view.mdx
│ │ ├── guides
│ │ │ ├── animation.mdx
│ │ │ ├── closed-components.mdx
│ │ │ ├── collection.mdx
│ │ │ ├── component-state.mdx
│ │ │ ├── composition.mdx
│ │ │ └── styling.mdx
│ │ ├── license.mdx
│ │ ├── overview
│ │ │ ├── about.mdx
│ │ │ ├── getting-started.mdx
│ │ │ ├── introduction.mdx
│ │ │ └── llms.txt.mdx
│ │ └── utilities
│ │ │ ├── download-trigger.mdx
│ │ │ ├── environment.mdx
│ │ │ ├── focus-trap.mdx
│ │ │ ├── format-byte.mdx
│ │ │ ├── format-number.mdx
│ │ │ ├── format-relative-time.mdx
│ │ │ ├── frame.mdx
│ │ │ ├── highlight.mdx
│ │ │ ├── locale.mdx
│ │ │ └── presence.mdx
│ ├── showcases.json
│ └── types
│ │ ├── react
│ │ ├── accordion.types.json
│ │ ├── angle-slider.types.json
│ │ ├── avatar.types.json
│ │ ├── carousel.types.json
│ │ ├── checkbox.types.json
│ │ ├── client-only.types.json
│ │ ├── clipboard.types.json
│ │ ├── collapsible.types.json
│ │ ├── color-picker.types.json
│ │ ├── combobox.types.json
│ │ ├── date-picker.types.json
│ │ ├── dialog.types.json
│ │ ├── download-trigger.types.json
│ │ ├── editable.types.json
│ │ ├── environment.types.json
│ │ ├── field.types.json
│ │ ├── fieldset.types.json
│ │ ├── file-upload.types.json
│ │ ├── floating-panel.types.json
│ │ ├── focus-trap.types.json
│ │ ├── format.types.json
│ │ ├── frame.types.json
│ │ ├── highlight.types.json
│ │ ├── hover-card.types.json
│ │ ├── listbox.types.json
│ │ ├── locale.types.json
│ │ ├── menu.types.json
│ │ ├── number-input.types.json
│ │ ├── pagination.types.json
│ │ ├── password-input.types.json
│ │ ├── pin-input.types.json
│ │ ├── popover.types.json
│ │ ├── portal.types.json
│ │ ├── presence.types.json
│ │ ├── progress.types.json
│ │ ├── qr-code.types.json
│ │ ├── radio-group.types.json
│ │ ├── rating-group.types.json
│ │ ├── segment-group.types.json
│ │ ├── select.types.json
│ │ ├── signature-pad.types.json
│ │ ├── slider.types.json
│ │ ├── splitter.types.json
│ │ ├── steps.types.json
│ │ ├── switch.types.json
│ │ ├── tabs.types.json
│ │ ├── tags-input.types.json
│ │ ├── time-picker.types.json
│ │ ├── timer.types.json
│ │ ├── toast.types.json
│ │ ├── toggle-group.types.json
│ │ ├── toggle.types.json
│ │ ├── tooltip.types.json
│ │ ├── tour.types.json
│ │ └── tree-view.types.json
│ │ ├── solid
│ │ ├── accordion.types.json
│ │ ├── angle-slider.types.json
│ │ ├── avatar.types.json
│ │ ├── carousel.types.json
│ │ ├── checkbox.types.json
│ │ ├── client-only.types.json
│ │ ├── clipboard.types.json
│ │ ├── collapsible.types.json
│ │ ├── color-picker.types.json
│ │ ├── combobox.types.json
│ │ ├── date-picker.types.json
│ │ ├── dialog.types.json
│ │ ├── download-trigger.types.json
│ │ ├── editable.types.json
│ │ ├── environment.types.json
│ │ ├── field.types.json
│ │ ├── fieldset.types.json
│ │ ├── file-upload.types.json
│ │ ├── floating-panel.types.json
│ │ ├── focus-trap.types.json
│ │ ├── format.types.json
│ │ ├── frame.types.json
│ │ ├── highlight.types.json
│ │ ├── hover-card.types.json
│ │ ├── listbox.types.json
│ │ ├── locale.types.json
│ │ ├── menu.types.json
│ │ ├── number-input.types.json
│ │ ├── pagination.types.json
│ │ ├── password-input.types.json
│ │ ├── pin-input.types.json
│ │ ├── popover.types.json
│ │ ├── presence.types.json
│ │ ├── progress.types.json
│ │ ├── qr-code.types.json
│ │ ├── radio-group.types.json
│ │ ├── rating-group.types.json
│ │ ├── segment-group.types.json
│ │ ├── select.types.json
│ │ ├── signature-pad.types.json
│ │ ├── slider.types.json
│ │ ├── splitter.types.json
│ │ ├── steps.types.json
│ │ ├── switch.types.json
│ │ ├── tabs.types.json
│ │ ├── tags-input.types.json
│ │ ├── time-picker.types.json
│ │ ├── timer.types.json
│ │ ├── toast.types.json
│ │ ├── toggle-group.types.json
│ │ ├── toggle.types.json
│ │ ├── tooltip.types.json
│ │ ├── tour.types.json
│ │ └── tree-view.types.json
│ │ └── vue
│ │ ├── accordion.types.json
│ │ ├── angle-slider.types.json
│ │ ├── avatar.types.json
│ │ ├── carousel.types.json
│ │ ├── checkbox.types.json
│ │ ├── client-only.types.json
│ │ ├── clipboard.types.json
│ │ ├── collapsible.types.json
│ │ ├── color-picker.types.json
│ │ ├── combobox.types.json
│ │ ├── date-picker.types.json
│ │ ├── dialog.types.json
│ │ ├── download-trigger.types.json
│ │ ├── editable.types.json
│ │ ├── environment.types.json
│ │ ├── field.types.json
│ │ ├── fieldset.types.json
│ │ ├── file-upload.types.json
│ │ ├── floating-panel.types.json
│ │ ├── focus-trap.types.json
│ │ ├── format.types.json
│ │ ├── frame.types.json
│ │ ├── highlight.types.json
│ │ ├── hover-card.types.json
│ │ ├── listbox.types.json
│ │ ├── locale.types.json
│ │ ├── menu.types.json
│ │ ├── number-input.types.json
│ │ ├── pagination.types.json
│ │ ├── password-input.types.json
│ │ ├── pin-input.types.json
│ │ ├── popover.types.json
│ │ ├── presence.types.json
│ │ ├── progress.types.json
│ │ ├── qr-code.types.json
│ │ ├── radio-group.types.json
│ │ ├── rating-group.types.json
│ │ ├── segment-group.types.json
│ │ ├── select.types.json
│ │ ├── signature-pad.types.json
│ │ ├── slider.types.json
│ │ ├── splitter.types.json
│ │ ├── steps.types.json
│ │ ├── switch.types.json
│ │ ├── tabs.types.json
│ │ ├── tags-input.types.json
│ │ ├── time-picker.types.json
│ │ ├── timer.types.json
│ │ ├── toast.types.json
│ │ ├── toggle-group.types.json
│ │ ├── toggle.types.json
│ │ ├── tooltip.types.json
│ │ ├── tour.types.json
│ │ └── tree-view.types.json
├── coral.ts
├── demos
│ ├── accordion.demo.tsx
│ ├── angle-slider.demo.tsx
│ ├── avatar.demo.tsx
│ ├── carousel.demo.tsx
│ ├── checkbox.demo.tsx
│ ├── clipboard.demo.tsx
│ ├── collapsible.demo.tsx
│ ├── color-picker.demo.tsx
│ ├── combobox.demo.tsx
│ ├── context-menu.demo.tsx
│ ├── date-picker.demo.tsx
│ ├── date-range-picker.demo.tsx
│ ├── dialog.demo.tsx
│ ├── editable.demo.tsx
│ ├── field.demo.tsx
│ ├── file-upload.demo.tsx
│ ├── floating-panel.demo.tsx
│ ├── format-byte.demo.tsx
│ ├── format-number.demo.tsx
│ ├── format-relative-time.demo.tsx
│ ├── frame.demo.tsx
│ ├── highlight.demo.tsx
│ ├── hover-card.demo.tsx
│ ├── index.ts
│ ├── listbox.demo.tsx
│ ├── menu.demo.tsx
│ ├── nested-menu.demo.tsx
│ ├── number-input.demo.tsx
│ ├── pagination.demo.tsx
│ ├── password-input.demo.tsx
│ ├── pin-input.demo.tsx
│ ├── popover.demo.tsx
│ ├── progress-circular.demo.tsx
│ ├── progress-linear.demo.tsx
│ ├── qr-code.demo.tsx
│ ├── radio-group.demo.tsx
│ ├── range-slider.demo.tsx
│ ├── rating-group.demo.tsx
│ ├── segment-group.demo.tsx
│ ├── select.demo.tsx
│ ├── signature-pad.demo.tsx
│ ├── slider.demo.tsx
│ ├── splitter.demo.tsx
│ ├── steps.demo.tsx
│ ├── switch.demo.tsx
│ ├── tabs.demo.tsx
│ ├── tags-input.demo.tsx
│ ├── timer.demo.tsx
│ ├── toast.demo.tsx
│ ├── toggle-group.demo.tsx
│ ├── toggle.demo.tsx
│ ├── tooltip.demo.tsx
│ ├── tour.demo.tsx
│ └── tree-view.demo.tsx
├── lib
│ ├── auth.ts
│ ├── create-style-context.tsx
│ ├── errors.ts
│ ├── examples.ts
│ ├── frameworks.ts
│ ├── license-key.ts
│ ├── nav-links.ts
│ ├── prisma.ts
│ ├── search.ts
│ ├── server-context.ts
│ ├── sidebar.ts
│ ├── stackblitz-react.ts
│ ├── stackblitz-solid.ts
│ ├── stackblitz-vue.ts
│ └── use-update-effect.ts
├── mdx-content.tsx
└── theme
│ └── recipes
│ ├── field.ts
│ └── tour.ts
├── tsconfig.json
└── velite.config.ts
/.storybook/styles/field.css:
--------------------------------------------------------------------------------
1 | [data-scope='field'][data-part='root'] {
2 | display: flex;
3 | flex-direction: column;
4 | gap: 6px;
5 | align-items: start;
6 | }
7 |
--------------------------------------------------------------------------------
/.storybook/styles/number-input.css:
--------------------------------------------------------------------------------
1 | [data-scope='number-input'][data-part='scrubber'] {
2 | width: 16px;
3 | height: 16px;
4 | background-color: red;
5 | }
6 |
--------------------------------------------------------------------------------
/.storybook/styles/tags-input.css:
--------------------------------------------------------------------------------
1 | [data-scope='tags-input'][data-part='item-preview'] {
2 | border-radius: 4px;
3 | padding: 0 8px;
4 | margin-right: 8px;
5 | }
6 |
7 | [data-scope='tags-input'][data-part='control'] {
8 | display: flex;
9 | gap: 2px;
10 | }
11 |
12 | [data-scope='tags-input'][data-part='item-preview'][data-highlighted] {
13 | background-color: aqua;
14 | }
15 |
--------------------------------------------------------------------------------
/.storybook/styles/toggle-group.css:
--------------------------------------------------------------------------------
1 | [data-state='on'] {
2 | border-color: blue;
3 | }
4 |
--------------------------------------------------------------------------------
/bunfig.toml:
--------------------------------------------------------------------------------
1 | [install]
2 | exact = true
--------------------------------------------------------------------------------
/packages/react/.storybook/preview.ts:
--------------------------------------------------------------------------------
1 | import type { Preview } from '@storybook/react'
2 | import '../../../.storybook/styles.css'
3 |
4 | const preview: Preview = {
5 | parameters: {
6 | options: {
7 | storySort: {
8 | method: 'alphabetical',
9 | },
10 | },
11 | layout: 'padded',
12 | },
13 | }
14 |
15 | export default preview
16 |
--------------------------------------------------------------------------------
/packages/react/src/components/accordion/accordion.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as accordionAnatomy } from '@zag-js/accordion'
2 |
--------------------------------------------------------------------------------
/packages/react/src/components/anatomy.ts:
--------------------------------------------------------------------------------
1 | export * from '@zag-js/anatomy'
2 |
--------------------------------------------------------------------------------
/packages/react/src/components/angle-slider/angle-slider.anatomy.tsx:
--------------------------------------------------------------------------------
1 | export { anatomy as angleSliderAnatomy } from '@zag-js/angle-slider'
2 |
--------------------------------------------------------------------------------
/packages/react/src/components/angle-slider/angle-slider.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta } from '@storybook/react'
2 |
3 | const meta: Meta = {
4 | title: 'Components / Angle Slider',
5 | }
6 |
7 | export default meta
8 |
9 | export { Basic } from './examples/basic'
10 | export { Step } from './examples/step'
11 | export { Controlled } from './examples/controlled'
12 |
--------------------------------------------------------------------------------
/packages/react/src/components/avatar/avatar-context.tsx:
--------------------------------------------------------------------------------
1 | import type { ReactNode } from 'react'
2 | import { type UseAvatarContext, useAvatarContext } from './use-avatar-context'
3 |
4 | export interface AvatarContextProps {
5 | children: (context: UseAvatarContext) => ReactNode
6 | }
7 |
8 | export const AvatarContext = (props: AvatarContextProps) => props.children(useAvatarContext())
9 |
--------------------------------------------------------------------------------
/packages/react/src/components/avatar/avatar.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as avatarAnatomy } from '@zag-js/avatar'
2 |
--------------------------------------------------------------------------------
/packages/react/src/components/avatar/examples/basic.tsx:
--------------------------------------------------------------------------------
1 | import { Avatar } from '@ark-ui/react/avatar'
2 |
3 | export const Basic = () => (
4 |
5 | PA
6 |
7 |
8 | )
9 |
--------------------------------------------------------------------------------
/packages/react/src/components/avatar/examples/context.tsx:
--------------------------------------------------------------------------------
1 | import { Avatar } from '@ark-ui/react/avatar'
2 |
3 | export const Context = () => (
4 |
5 | {(avatar) => {avatar.loaded ? 'PA' : 'Loading'}}
6 |
7 |
8 | )
9 |
--------------------------------------------------------------------------------
/packages/react/src/components/carousel/carousel.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as carouselAnatomy } from '@zag-js/carousel'
2 |
--------------------------------------------------------------------------------
/packages/react/src/components/checkbox/checkbox.anatomy.ts:
--------------------------------------------------------------------------------
1 | import { anatomy } from '@zag-js/checkbox'
2 |
3 | export const checkboxAnatomy = anatomy.extendWith('group')
4 |
--------------------------------------------------------------------------------
/packages/react/src/components/client-only/client-only.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta } from '@storybook/react'
2 |
3 | const meta: Meta = {
4 | title: 'Components / ClientOnly',
5 | }
6 |
7 | export default meta
8 |
9 | export { Basic } from './examples/basic'
10 | export { WithFallback } from './examples/with-fallback'
11 |
--------------------------------------------------------------------------------
/packages/react/src/components/client-only/examples/basic.tsx:
--------------------------------------------------------------------------------
1 | import { ClientOnly } from '../client-only'
2 |
3 | export const Basic = () => (
4 |
5 | This content is only rendered on the client side.
6 |
7 | )
8 |
--------------------------------------------------------------------------------
/packages/react/src/components/client-only/examples/with-fallback.tsx:
--------------------------------------------------------------------------------
1 | import { ClientOnly } from '../client-only'
2 |
3 | export const WithFallback = () => (
4 | Loading...}>
5 | This content is only rendered on the client side.
6 |
7 | )
8 |
--------------------------------------------------------------------------------
/packages/react/src/components/client-only/index.ts:
--------------------------------------------------------------------------------
1 | export { ClientOnly, type ClientOnlyProps } from './client-only'
2 |
--------------------------------------------------------------------------------
/packages/react/src/components/clipboard/clipboard.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as clipboardAnatomy } from '@zag-js/clipboard'
2 |
--------------------------------------------------------------------------------
/packages/react/src/components/clipboard/clipboard.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta } from '@storybook/react'
2 |
3 | const meta: Meta = {
4 | title: 'Components / Clipboard',
5 | }
6 |
7 | export default meta
8 |
9 | export { Basic } from './examples/basic'
10 | export { RenderFn } from './examples/render-fn'
11 | export { RootProvider } from './examples/root-provider'
12 |
--------------------------------------------------------------------------------
/packages/react/src/components/collapsible/collapsible.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as collapsibleAnatomy } from '@zag-js/collapsible'
2 |
--------------------------------------------------------------------------------
/packages/react/src/components/color-picker/color-picker.anatomy.ts:
--------------------------------------------------------------------------------
1 | import { anatomy } from '@zag-js/color-picker'
2 |
3 | export const colorPickerAnatomy = anatomy.extendWith('view')
4 |
--------------------------------------------------------------------------------
/packages/react/src/components/color-picker/examples/inline.tsx:
--------------------------------------------------------------------------------
1 | import { ColorPicker, parseColor } from '@ark-ui/react/color-picker'
2 | import { ColorPickerContent } from './_template'
3 |
4 | export const Inline = () => {
5 | return (
6 |
7 |
8 |
9 | )
10 | }
11 |
--------------------------------------------------------------------------------
/packages/react/src/components/combobox/combobox.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as comboboxAnatomy } from '@zag-js/combobox'
2 |
--------------------------------------------------------------------------------
/packages/react/src/components/date-picker/date-picker.anatomy.ts:
--------------------------------------------------------------------------------
1 | import { anatomy } from '@zag-js/date-picker'
2 |
3 | export const datePickerAnatomy = anatomy.extendWith('view')
4 |
--------------------------------------------------------------------------------
/packages/react/src/components/dialog/dialog-context.tsx:
--------------------------------------------------------------------------------
1 | import type { ReactNode } from 'react'
2 | import { type UseDialogContext, useDialogContext } from './use-dialog-context'
3 |
4 | export interface DialogContextProps {
5 | children: (context: UseDialogContext) => ReactNode
6 | }
7 |
8 | export const DialogContext = (props: DialogContextProps) => props.children(useDialogContext())
9 |
--------------------------------------------------------------------------------
/packages/react/src/components/dialog/dialog.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as dialogAnatomy } from '@zag-js/dialog'
2 |
--------------------------------------------------------------------------------
/packages/react/src/components/download-trigger/download-trigger.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta } from '@storybook/react'
2 |
3 | const meta: Meta = {
4 | title: 'Components / DownloadTrigger',
5 | }
6 |
7 | export default meta
8 |
9 | export { Basic } from './examples/basic'
10 | export { Svg } from './examples/svg'
11 | export { WithPromise } from './examples/with-promise'
12 |
--------------------------------------------------------------------------------
/packages/react/src/components/download-trigger/examples/basic.tsx:
--------------------------------------------------------------------------------
1 | import { DownloadTrigger } from '@ark-ui/react/download-trigger'
2 |
3 | export const Basic = () => {
4 | return (
5 |
6 | Download txt
7 |
8 | )
9 | }
10 |
--------------------------------------------------------------------------------
/packages/react/src/components/download-trigger/index.ts:
--------------------------------------------------------------------------------
1 | export { DownloadTrigger } from './download-trigger'
2 | export type { DownloadTriggerBaseProps, DownloadTriggerProps } from './download-trigger'
3 |
--------------------------------------------------------------------------------
/packages/react/src/components/editable/editable.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as editableAnatomy } from '@zag-js/editable'
2 |
--------------------------------------------------------------------------------
/packages/react/src/components/editable/examples/basic.tsx:
--------------------------------------------------------------------------------
1 | import { Editable } from '@ark-ui/react/editable'
2 |
3 | export const Basic = () => (
4 |
5 | Label
6 |
7 |
8 |
9 |
10 |
11 | )
12 |
--------------------------------------------------------------------------------
/packages/react/src/components/editable/examples/double-click.tsx:
--------------------------------------------------------------------------------
1 | import { Editable } from '@ark-ui/react/editable'
2 |
3 | export const DoubleClick = () => (
4 |
5 |
6 |
7 |
8 |
9 |
10 | )
11 |
--------------------------------------------------------------------------------
/packages/react/src/components/field/examples/invalid.tsx:
--------------------------------------------------------------------------------
1 | import { Field } from '@ark-ui/react/field'
2 |
3 | export const Invalid = () => (
4 |
5 | Email
6 |
7 | This is an error text
8 |
9 | )
10 |
--------------------------------------------------------------------------------
/packages/react/src/components/field/examples/required-indicator.tsx:
--------------------------------------------------------------------------------
1 | import { Field } from '@ark-ui/react/field'
2 |
3 | export const RequiredIndicator = () => {
4 | return (
5 |
6 |
7 | Username
8 |
9 |
10 |
11 |
12 | )
13 | }
14 |
--------------------------------------------------------------------------------
/packages/react/src/components/field/field-context.tsx:
--------------------------------------------------------------------------------
1 | import type { ReactNode } from 'react'
2 | import { type UseFieldContext, useFieldContext } from './use-field-context'
3 |
4 | export interface FieldContextProps {
5 | children: (context: UseFieldContext) => ReactNode
6 | }
7 |
8 | export const FieldContext = (props: FieldContextProps) => props.children(useFieldContext())
9 |
--------------------------------------------------------------------------------
/packages/react/src/components/field/field.anatomy.ts:
--------------------------------------------------------------------------------
1 | import { createAnatomy } from '@zag-js/anatomy'
2 |
3 | export const fieldAnatomy = createAnatomy('field').parts(
4 | 'root',
5 | 'errorText',
6 | 'helperText',
7 | 'input',
8 | 'label',
9 | 'select',
10 | 'textarea',
11 | 'requiredIndicator',
12 | )
13 | export const parts = fieldAnatomy.build()
14 |
--------------------------------------------------------------------------------
/packages/react/src/components/fieldset/fieldset.anatomy.ts:
--------------------------------------------------------------------------------
1 | import { createAnatomy } from '@zag-js/anatomy'
2 |
3 | export const fieldsetAnatomy = createAnatomy('fieldset').parts('root', 'errorText', 'helperText', 'legend')
4 | export const parts = fieldsetAnatomy.build()
5 |
--------------------------------------------------------------------------------
/packages/react/src/components/file-upload/file-upload.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as fileUploadAnatomy } from '@zag-js/file-upload'
2 |
--------------------------------------------------------------------------------
/packages/react/src/components/floating-panel/floating-panel.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as floatingPanelAnatomy } from '@zag-js/floating-panel'
2 |
--------------------------------------------------------------------------------
/packages/react/src/components/focus-trap/focus-trap.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta } from '@storybook/react'
2 |
3 | const meta: Meta = {
4 | title: 'Components / Focus Trap',
5 | }
6 |
7 | export default meta
8 |
9 | export { Basic } from './examples/basic'
10 | export { InitialFocus } from './examples/initial-focus'
11 | export { Autofocus } from './examples/autofocus'
12 |
--------------------------------------------------------------------------------
/packages/react/src/components/focus-trap/index.ts:
--------------------------------------------------------------------------------
1 | export { FocusTrap } from './focus-trap'
2 | export type { FocusTrapBaseProps, FocusTrapProps } from './focus-trap'
3 |
--------------------------------------------------------------------------------
/packages/react/src/components/format/examples/byte-basic.tsx:
--------------------------------------------------------------------------------
1 | import { Format } from '@ark-ui/react'
2 |
3 | export const ByteBasic = () => {
4 | return (
5 |
6 | File size:
7 |
8 | )
9 | }
10 |
--------------------------------------------------------------------------------
/packages/react/src/components/format/examples/byte-with-unit.tsx:
--------------------------------------------------------------------------------
1 | import { Format } from '@ark-ui/react'
2 |
3 | export const ByteWithUnit = () => {
4 | const value = 1450.45
5 | const unit = 'bit'
6 |
7 | return (
8 |
9 | File size:
10 |
11 | )
12 | }
13 |
--------------------------------------------------------------------------------
/packages/react/src/components/format/examples/number-basic.tsx:
--------------------------------------------------------------------------------
1 | import { Format } from '@ark-ui/react/format'
2 |
3 | export const NumberBasic = () => {
4 | return
5 | }
6 |
--------------------------------------------------------------------------------
/packages/react/src/components/format/examples/number-with-compact.tsx:
--------------------------------------------------------------------------------
1 | import { Format } from '@ark-ui/react/format'
2 |
3 | export const NumberWithCompact = () => {
4 | return
5 | }
6 |
--------------------------------------------------------------------------------
/packages/react/src/components/format/examples/number-with-currency.tsx:
--------------------------------------------------------------------------------
1 | import { Format } from '@ark-ui/react/format'
2 |
3 | export const NumberWithCurrency = () => {
4 | return
5 | }
6 |
--------------------------------------------------------------------------------
/packages/react/src/components/format/examples/number-with-locale.tsx:
--------------------------------------------------------------------------------
1 | import { Format } from '@ark-ui/react/format'
2 | import { LocaleProvider } from '@ark-ui/react/locale'
3 |
4 | export const NumberWithLocale = () => {
5 | return (
6 |
7 |
8 |
9 | )
10 | }
11 |
--------------------------------------------------------------------------------
/packages/react/src/components/format/examples/number-with-percentage.tsx:
--------------------------------------------------------------------------------
1 | import { Format } from '@ark-ui/react/format'
2 |
3 | export const NumberWithPercentage = () => {
4 | return
5 | }
6 |
--------------------------------------------------------------------------------
/packages/react/src/components/format/examples/number-with-unit.tsx:
--------------------------------------------------------------------------------
1 | import { Format } from '@ark-ui/react/format'
2 |
3 | export const NumberWithUnit = () => {
4 | return
5 | }
6 |
--------------------------------------------------------------------------------
/packages/react/src/components/format/examples/relative-time-basic.tsx:
--------------------------------------------------------------------------------
1 | import { Format } from '@ark-ui/react/format'
2 |
3 | export const RelativeTimeBasic = () => {
4 | return (
5 |
6 | Edited
7 |
8 | )
9 | }
10 |
--------------------------------------------------------------------------------
/packages/react/src/components/format/examples/relative-time-short.tsx:
--------------------------------------------------------------------------------
1 | import { Format } from '@ark-ui/react/format'
2 |
3 | export const RelativeTimeShort = () => {
4 | return (
5 |
6 | Edited
7 |
8 | )
9 | }
10 |
--------------------------------------------------------------------------------
/packages/react/src/components/format/format.ts:
--------------------------------------------------------------------------------
1 | export { FormatByte as Byte, type FormatByteProps as ByteProps } from './format-byte'
2 | export { FormatNumber as Number, type FormatNumberProps as NumberProps } from './format-number'
3 | export {
4 | FormatRelativeTime as RelativeTime,
5 | type FormatRelativeTimeProps as RelativeTimeProps,
6 | } from './format-relative-time'
7 |
--------------------------------------------------------------------------------
/packages/react/src/components/format/index.ts:
--------------------------------------------------------------------------------
1 | export { FormatByte, type FormatByteProps } from './format-byte'
2 | export { FormatNumber, type FormatNumberProps } from './format-number'
3 | export { FormatRelativeTime, type FormatRelativeTimeProps } from './format-relative-time'
4 |
5 | export * as Format from './format'
6 |
--------------------------------------------------------------------------------
/packages/react/src/components/frame/frame.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta } from '@storybook/react'
2 |
3 | const meta: Meta = {
4 | title: 'Components / Frame',
5 | }
6 |
7 | export default meta
8 |
9 | export { Basic } from './examples/basic'
10 | export { Script } from './examples/script'
11 | export { SrcDoc } from './examples/src-doc'
12 |
--------------------------------------------------------------------------------
/packages/react/src/components/frame/index.ts:
--------------------------------------------------------------------------------
1 | export { Frame } from './frame'
2 | export type { FrameBaseProps, FrameProps } from './frame'
3 |
--------------------------------------------------------------------------------
/packages/react/src/components/highlight/examples/basic.tsx:
--------------------------------------------------------------------------------
1 | import { Highlight } from '@ark-ui/react/highlight'
2 |
3 | export const Basic = () => {
4 | return (
5 |
9 | )
10 | }
11 |
--------------------------------------------------------------------------------
/packages/react/src/components/highlight/examples/ignore-case.tsx:
--------------------------------------------------------------------------------
1 | import { Highlight } from '@ark-ui/react/highlight'
2 |
3 | export const IgnoreCase = () => (
4 |
5 | )
6 |
--------------------------------------------------------------------------------
/packages/react/src/components/highlight/examples/multiple.tsx:
--------------------------------------------------------------------------------
1 | import { Highlight } from '@ark-ui/react/highlight'
2 |
3 | export const Multiple = () => {
4 | return (
5 |
9 | )
10 | }
11 |
--------------------------------------------------------------------------------
/packages/react/src/components/highlight/examples/with-repeating-text.tsx:
--------------------------------------------------------------------------------
1 | import { Highlight } from '@ark-ui/react/highlight'
2 |
3 | export const WithRepeatingText = () => {
4 | return
5 | }
6 |
--------------------------------------------------------------------------------
/packages/react/src/components/highlight/index.ts:
--------------------------------------------------------------------------------
1 | export { Highlight, type HighlightProps } from './highlight'
2 | export { useHighlight, type HighlightChunk, type UseHighlightProps } from './use-highlight'
3 |
--------------------------------------------------------------------------------
/packages/react/src/components/hover-card/hover-card.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as hoverCardAnatomy } from '@zag-js/hover-card'
2 |
--------------------------------------------------------------------------------
/packages/react/src/components/listbox/listbox.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as listboxAnatomy } from '@zag-js/listbox'
2 |
--------------------------------------------------------------------------------
/packages/react/src/components/menu/menu-context.tsx:
--------------------------------------------------------------------------------
1 | import type { ReactNode } from 'react'
2 | import { type UseMenuContext, useMenuContext } from './use-menu-context'
3 |
4 | export interface MenuContextProps {
5 | children: (context: UseMenuContext) => ReactNode
6 | }
7 |
8 | export const MenuContext = (props: MenuContextProps) => props.children(useMenuContext())
9 |
--------------------------------------------------------------------------------
/packages/react/src/components/menu/menu-item-context.tsx:
--------------------------------------------------------------------------------
1 | import type { ReactNode } from 'react'
2 | import { type UseMenuItemContext, useMenuItemContext } from './use-menu-item-context'
3 |
4 | export interface MenuItemContextProps {
5 | children: (context: UseMenuItemContext) => ReactNode
6 | }
7 |
8 | export const MenuItemContext = (props: MenuItemContextProps) => props.children(useMenuItemContext())
9 |
--------------------------------------------------------------------------------
/packages/react/src/components/menu/menu.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as menuAnatomy } from '@zag-js/menu'
2 |
--------------------------------------------------------------------------------
/packages/react/src/components/number-input/number-input.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as numberInputAnatomy } from '@zag-js/number-input'
2 |
--------------------------------------------------------------------------------
/packages/react/src/components/pagination/pagination.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as paginationAnatomy } from '@zag-js/pagination'
2 |
--------------------------------------------------------------------------------
/packages/react/src/components/password-input/password-input.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as passwordInputAnatomy } from '@zag-js/password-input'
2 |
--------------------------------------------------------------------------------
/packages/react/src/components/pin-input/pin-input.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as pinInputAnatomy } from '@zag-js/pin-input'
2 |
--------------------------------------------------------------------------------
/packages/react/src/components/popover/examples/as-child.tsx:
--------------------------------------------------------------------------------
1 | // @ts-expect-error - Required for examples
2 | import { Button } from '@acme/ui-lib'
3 | import { Popover } from '@ark-ui/react/popover'
4 |
5 | export const AsChild = () => (
6 |
7 |
8 |
9 |
10 |
11 | )
12 |
--------------------------------------------------------------------------------
/packages/react/src/components/popover/examples/factory.tsx:
--------------------------------------------------------------------------------
1 | import { ark } from '@ark-ui/react/factory'
2 |
3 | export const ArkFactory = () => (
4 |
5 |
6 | Ark UI
7 |
8 |
9 | )
10 |
--------------------------------------------------------------------------------
/packages/react/src/components/popover/popover-context.tsx:
--------------------------------------------------------------------------------
1 | import type { ReactNode } from 'react'
2 | import { type UsePopoverContext, usePopoverContext } from './use-popover-context'
3 |
4 | export interface PopoverContextProps {
5 | children: (context: UsePopoverContext) => ReactNode
6 | }
7 |
8 | export const PopoverContext = (props: PopoverContextProps) => props.children(usePopoverContext())
9 |
--------------------------------------------------------------------------------
/packages/react/src/components/popover/popover.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as popoverAnatomy } from '@zag-js/popover'
2 |
--------------------------------------------------------------------------------
/packages/react/src/components/portal/index.ts:
--------------------------------------------------------------------------------
1 | export { Portal, type PortalProps } from './portal'
2 |
--------------------------------------------------------------------------------
/packages/react/src/components/presence/index.ts:
--------------------------------------------------------------------------------
1 | export { Presence, type PresenceBaseProps, type PresenceProps } from './presence'
2 | export { splitPresenceProps } from './split-presence-props'
3 | export { usePresence, type UsePresenceProps, type UsePresenceReturn } from './use-presence'
4 | export { PresenceProvider, usePresenceContext, type UsePresenceContext } from './use-presence-context'
5 |
--------------------------------------------------------------------------------
/packages/react/src/components/progress/examples/linear/basic.tsx:
--------------------------------------------------------------------------------
1 | import { Progress } from '@ark-ui/react/progress'
2 |
3 | export const Basic = () => (
4 |
5 | Label
6 |
7 |
8 |
9 |
10 |
11 | )
12 |
--------------------------------------------------------------------------------
/packages/react/src/components/progress/examples/linear/indeterminate.tsx:
--------------------------------------------------------------------------------
1 | import { Progress } from '@ark-ui/react/progress'
2 |
3 | export const Indeterminate = () => (
4 |
5 | Label
6 |
7 |
8 |
9 |
10 |
11 | )
12 |
--------------------------------------------------------------------------------
/packages/react/src/components/progress/examples/linear/initial-value.tsx:
--------------------------------------------------------------------------------
1 | import { Progress } from '@ark-ui/react/progress'
2 |
3 | export const InitialValue = () => (
4 |
5 | Label
6 |
7 |
8 |
9 |
10 |
11 | )
12 |
--------------------------------------------------------------------------------
/packages/react/src/components/progress/examples/linear/vertical.tsx:
--------------------------------------------------------------------------------
1 | import { Progress } from '@ark-ui/react/progress'
2 |
3 | export const Vertical = () => (
4 |
5 | Label
6 |
7 |
8 |
9 |
10 |
11 | )
12 |
--------------------------------------------------------------------------------
/packages/react/src/components/progress/progress.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as progressAnatomy } from '@zag-js/progress'
2 |
--------------------------------------------------------------------------------
/packages/react/src/components/qr-code/examples/error-correction.tsx:
--------------------------------------------------------------------------------
1 | import { QrCode } from '@ark-ui/react/qr-code'
2 |
3 | export const ErrorCorrection = () => {
4 | return (
5 |
6 |
7 |
8 |
9 |
10 | )
11 | }
12 |
--------------------------------------------------------------------------------
/packages/react/src/components/qr-code/qr-code-context.tsx:
--------------------------------------------------------------------------------
1 | import type { ReactNode } from 'react'
2 | import { type UseQrCodeContext, useQrCodeContext } from './use-qr-code-context'
3 |
4 | export interface QrCodeContextProps {
5 | children: (context: UseQrCodeContext) => ReactNode
6 | }
7 |
8 | export const QrCodeContext = (props: QrCodeContextProps) => props.children(useQrCodeContext())
9 |
--------------------------------------------------------------------------------
/packages/react/src/components/qr-code/qr-code.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as qrCodeAnatomy } from '@zag-js/qr-code'
2 |
--------------------------------------------------------------------------------
/packages/react/src/components/radio-group/radio-group.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as radioGroupAnatomy } from '@zag-js/radio-group'
2 |
--------------------------------------------------------------------------------
/packages/react/src/components/rating-group/rating-group.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as ratingGroupAnatomy } from '@zag-js/rating-group'
2 |
--------------------------------------------------------------------------------
/packages/react/src/components/segment-group/segment-group.anatomy.ts:
--------------------------------------------------------------------------------
1 | import { anatomy } from '@zag-js/radio-group'
2 |
3 | export const segmentGroupAnatomy = anatomy.rename('segment-group')
4 |
5 | export const parts = segmentGroupAnatomy.build()
6 |
--------------------------------------------------------------------------------
/packages/react/src/components/select/select.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as selectAnatomy } from '@zag-js/select'
2 |
--------------------------------------------------------------------------------
/packages/react/src/components/signature-pad/signature-pad.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as signaturePadAnatomy } from '@zag-js/signature-pad'
2 |
--------------------------------------------------------------------------------
/packages/react/src/components/slider/slider-context.tsx:
--------------------------------------------------------------------------------
1 | import type { ReactNode } from 'react'
2 | import { type UseSliderContext, useSliderContext } from './use-slider-context'
3 |
4 | export interface SliderContextProps {
5 | children: (context: UseSliderContext) => ReactNode
6 | }
7 |
8 | export const SliderContext = (props: SliderContextProps) => props.children(useSliderContext())
9 |
--------------------------------------------------------------------------------
/packages/react/src/components/slider/slider.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as sliderAnatomy } from '@zag-js/slider'
2 |
--------------------------------------------------------------------------------
/packages/react/src/components/splitter/examples/basic.tsx:
--------------------------------------------------------------------------------
1 | import { Splitter } from '@ark-ui/react/splitter'
2 |
3 | export const Basic = () => (
4 |
5 | A
6 |
7 | B
8 |
9 | )
10 |
--------------------------------------------------------------------------------
/packages/react/src/components/splitter/splitter.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as splitterAnatomy } from '@zag-js/splitter'
2 |
--------------------------------------------------------------------------------
/packages/react/src/components/steps/steps.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as stepsAnatomy } from '@zag-js/steps'
2 |
--------------------------------------------------------------------------------
/packages/react/src/components/steps/steps.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta } from '@storybook/react'
2 |
3 | const meta: Meta = {
4 | title: 'Components / Steps',
5 | }
6 |
7 | export default meta
8 |
9 | export { Basic } from './examples/basic'
10 | export { RootProvider } from './examples/root-provider'
11 |
--------------------------------------------------------------------------------
/packages/react/src/components/switch/examples/basic.tsx:
--------------------------------------------------------------------------------
1 | import { Switch } from '@ark-ui/react/switch'
2 |
3 | export const Basic = () => (
4 |
5 |
6 |
7 |
8 | Label
9 |
10 |
11 | )
12 |
--------------------------------------------------------------------------------
/packages/react/src/components/switch/examples/disabled.tsx:
--------------------------------------------------------------------------------
1 | import { Switch } from '@ark-ui/react/switch'
2 |
3 | export const Disabled = () => {
4 | return (
5 |
6 |
7 |
8 |
9 | Label
10 |
11 |
12 | )
13 | }
14 |
--------------------------------------------------------------------------------
/packages/react/src/components/switch/examples/initial-value.tsx:
--------------------------------------------------------------------------------
1 | import { Switch } from '@ark-ui/react/switch'
2 |
3 | export const InitialValue = () => (
4 |
5 |
6 |
7 |
8 | Label
9 |
10 |
11 | )
12 |
--------------------------------------------------------------------------------
/packages/react/src/components/switch/switch-context.tsx:
--------------------------------------------------------------------------------
1 | import type { ReactNode } from 'react'
2 | import { type UseSwitchContext, useSwitchContext } from './use-switch-context'
3 |
4 | export interface SwitchContextProps {
5 | children: (context: UseSwitchContext) => ReactNode
6 | }
7 |
8 | export const SwitchContext = (props: SwitchContextProps) => props.children(useSwitchContext())
9 |
--------------------------------------------------------------------------------
/packages/react/src/components/switch/switch.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as switchAnatomy } from '@zag-js/switch'
2 |
--------------------------------------------------------------------------------
/packages/react/src/components/tabs/tabs-context.tsx:
--------------------------------------------------------------------------------
1 | import type { ReactNode } from 'react'
2 | import { type UseTabsContext, useTabsContext } from './use-tabs-context'
3 |
4 | export interface TabsContextProps {
5 | children: (context: UseTabsContext) => ReactNode
6 | }
7 |
8 | export const TabsContext = (props: TabsContextProps) => props.children(useTabsContext())
9 |
--------------------------------------------------------------------------------
/packages/react/src/components/tabs/tabs.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as tabsAnatomy } from '@zag-js/tabs'
2 |
--------------------------------------------------------------------------------
/packages/react/src/components/tags-input/tags-input.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as tagsInputAnatomy } from '@zag-js/tags-input'
2 |
--------------------------------------------------------------------------------
/packages/react/src/components/time-picker/time-picker.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as timePickerAnatomy } from '@zag-js/time-picker'
2 |
--------------------------------------------------------------------------------
/packages/react/src/components/time-picker/time-picker.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta } from '@storybook/react'
2 |
3 | const meta: Meta = {
4 | title: 'Components / Time Picker',
5 | }
6 |
7 | export default meta
8 |
9 | export { Advanced } from './examples/advanced'
10 | export { Basic } from './examples/basic'
11 | export { RootProvider } from './examples/root-provider'
12 |
--------------------------------------------------------------------------------
/packages/react/src/components/timer/examples/events.tsx:
--------------------------------------------------------------------------------
1 | import { Timer } from '@ark-ui/react/timer'
2 |
3 | export const Events = () => (
4 | console.log('Timer completed')}
7 | onTick={(details) => console.log('Tick:', details.formattedTime)}
8 | >
9 |
10 |
11 | )
12 |
--------------------------------------------------------------------------------
/packages/react/src/components/timer/timer-context.tsx:
--------------------------------------------------------------------------------
1 | import type { ReactNode } from 'react'
2 | import { type UseTimerContext, useTimerContext } from './use-timer-context'
3 |
4 | export interface TimerContextProps {
5 | children: (context: UseTimerContext) => ReactNode
6 | }
7 |
8 | export const TimerContext = (props: TimerContextProps) => props.children(useTimerContext())
9 |
--------------------------------------------------------------------------------
/packages/react/src/components/timer/timer.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as timerAnatomy } from '@zag-js/timer'
2 |
--------------------------------------------------------------------------------
/packages/react/src/components/toast/create-toaster.tsx:
--------------------------------------------------------------------------------
1 | import * as toast from '@zag-js/toast'
2 |
3 | export interface CreateToasterProps extends toast.StoreProps {}
4 |
5 | export interface CreateToasterReturn extends toast.Store {}
6 |
7 | export const createToaster = (props: toast.StoreProps): toast.Store => {
8 | return toast.createStore(props)
9 | }
10 |
--------------------------------------------------------------------------------
/packages/react/src/components/toast/toast-context.tsx:
--------------------------------------------------------------------------------
1 | import type { ReactNode } from 'react'
2 | import { type UseToastContext, useToastContext } from './use-toast-context'
3 |
4 | export interface ToastContextProps {
5 | children: (context: UseToastContext) => ReactNode
6 | }
7 |
8 | export const ToastContext = (props: ToastContextProps) => props.children(useToastContext())
9 |
--------------------------------------------------------------------------------
/packages/react/src/components/toast/toast.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as toastAnatomy } from '@zag-js/toast'
2 |
--------------------------------------------------------------------------------
/packages/react/src/components/toast/toast.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta } from '@storybook/react'
2 |
3 | const meta: Meta = {
4 | title: 'Components / Toast',
5 | }
6 |
7 | export default meta
8 |
9 | export { Action } from './examples/action'
10 | export { Basic } from './examples/basic'
11 | export { Update } from './examples/update'
12 |
--------------------------------------------------------------------------------
/packages/react/src/components/toggle-group/toggle-group.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as toggleGroupAnatomy } from '@zag-js/toggle-group'
2 |
--------------------------------------------------------------------------------
/packages/react/src/components/toggle/examples/basic.tsx:
--------------------------------------------------------------------------------
1 | import { Toggle } from '@ark-ui/react/toggle'
2 | import { BoldIcon } from 'lucide-react'
3 |
4 | export const Basic = () => {
5 | return (
6 |
7 |
8 |
9 | )
10 | }
11 |
--------------------------------------------------------------------------------
/packages/react/src/components/toggle/examples/disabled.tsx:
--------------------------------------------------------------------------------
1 | import { Toggle } from '@ark-ui/react/toggle'
2 | import { BoldIcon } from 'lucide-react'
3 |
4 | export const Disabled = () => {
5 | return (
6 |
7 |
8 |
9 | )
10 | }
11 |
--------------------------------------------------------------------------------
/packages/react/src/components/toggle/examples/indicator.tsx:
--------------------------------------------------------------------------------
1 | import { Toggle } from '@ark-ui/react/toggle'
2 | import { Volume, VolumeOff } from 'lucide-react'
3 |
4 | export const Indicator = () => {
5 | return (
6 |
7 | }>
8 |
9 |
10 |
11 | )
12 | }
13 |
--------------------------------------------------------------------------------
/packages/react/src/components/toggle/toggle-context.tsx:
--------------------------------------------------------------------------------
1 | import type { ReactNode } from 'react'
2 | import { type UseToggleContext, useToggleContext } from './use-toggle-context'
3 |
4 | export interface ToggleContextProps {
5 | children: (context: UseToggleContext) => ReactNode
6 | }
7 |
8 | export const ToggleContext = (props: ToggleContextProps) => props.children(useToggleContext())
9 |
--------------------------------------------------------------------------------
/packages/react/src/components/toggle/toggle.anatomy.ts:
--------------------------------------------------------------------------------
1 | import { createAnatomy } from '@zag-js/anatomy'
2 |
3 | export const toggleAnatomy = createAnatomy('toggle', ['root', 'indicator'])
4 |
5 | export const parts = toggleAnatomy.build()
6 |
--------------------------------------------------------------------------------
/packages/react/src/components/tooltip/examples/basic.tsx:
--------------------------------------------------------------------------------
1 | import { Tooltip } from '@ark-ui/react/tooltip'
2 |
3 | export const Basic = () => (
4 |
5 | Hover Me
6 |
7 | I am a tooltip!
8 |
9 |
10 | )
11 |
--------------------------------------------------------------------------------
/packages/react/src/components/tooltip/examples/timings.tsx:
--------------------------------------------------------------------------------
1 | import { Tooltip } from '@ark-ui/react/tooltip'
2 |
3 | export const Timings = () => (
4 |
5 | Hover Me
6 |
7 | I am a tooltip!
8 |
9 |
10 | )
11 |
--------------------------------------------------------------------------------
/packages/react/src/components/tooltip/tooltip-context.tsx:
--------------------------------------------------------------------------------
1 | import type { ReactNode } from 'react'
2 | import { type UseTooltipContext, useTooltipContext } from './use-tooltip-context'
3 |
4 | export interface TooltipContextProps {
5 | children: (context: UseTooltipContext) => ReactNode
6 | }
7 |
8 | export const TooltipContext = (props: TooltipContextProps) => props.children(useTooltipContext())
9 |
--------------------------------------------------------------------------------
/packages/react/src/components/tooltip/tooltip.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as tooltipAnatomy } from '@zag-js/tooltip'
2 |
--------------------------------------------------------------------------------
/packages/react/src/components/tour/tour-context.tsx:
--------------------------------------------------------------------------------
1 | import type { ReactNode } from 'react'
2 | import { type UseTourContext, useTourContext } from './use-tour-context'
3 |
4 | export interface TourContextProps {
5 | children: (context: UseTourContext) => ReactNode
6 | }
7 |
8 | export const TourContext = (props: TourContextProps) => props.children(useTourContext())
9 |
--------------------------------------------------------------------------------
/packages/react/src/components/tour/tour.anatomy.ts:
--------------------------------------------------------------------------------
1 | import { anatomy } from '@zag-js/tour'
2 |
3 | export const tourAnatomy = anatomy.extendWith('control')
4 |
--------------------------------------------------------------------------------
/packages/react/src/components/tour/tour.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta } from '@storybook/react'
2 |
3 | const meta: Meta = {
4 | title: 'Components / Tour',
5 | }
6 |
7 | export default meta
8 |
9 | export { Basic } from './examples/basic'
10 |
--------------------------------------------------------------------------------
/packages/react/src/components/tree-view/tree-view.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as treeViewAnatomy } from '@zag-js/tree-view'
2 |
--------------------------------------------------------------------------------
/packages/react/src/components/tree-view/tree-view.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta } from '@storybook/react'
2 |
3 | const meta: Meta = {
4 | title: 'Components / Tree View',
5 | }
6 |
7 | export default meta
8 |
9 | export { Basic } from './examples/basic'
10 | export { RootProvider } from './examples/root-provider'
11 |
--------------------------------------------------------------------------------
/packages/react/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from './components'
2 | export * from './providers'
3 | export type { Assign, Optional } from './types'
4 |
--------------------------------------------------------------------------------
/packages/react/src/providers/environment/environment.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta } from '@storybook/react'
2 |
3 | const meta: Meta = {
4 | title: 'Providers / Environment',
5 | }
6 |
7 | export default meta
8 |
9 | export { Basic } from './examples/basic'
10 | export { ShadowRoot } from './examples/shadow-root'
11 |
--------------------------------------------------------------------------------
/packages/react/src/providers/environment/examples/setup.tsx:
--------------------------------------------------------------------------------
1 | import { EnvironmentProvider } from '@ark-ui/react/environment'
2 | import Frame from 'react-frame-component'
3 |
4 | export const App = () => {
5 | return (
6 |
7 | {/* Your App */}
8 |
9 | )
10 | }
11 |
--------------------------------------------------------------------------------
/packages/react/src/providers/environment/examples/usage.tsx:
--------------------------------------------------------------------------------
1 | import { useEnvironmentContext } from '@ark-ui/react/environment'
2 |
3 | export const Usage = () => {
4 | const { getRootNode } = useEnvironmentContext()
5 |
6 | return {JSON.stringify(getRootNode(), null, 2)}
7 | }
8 |
--------------------------------------------------------------------------------
/packages/react/src/providers/index.ts:
--------------------------------------------------------------------------------
1 | export * from './environment'
2 | export * from './locale'
3 |
--------------------------------------------------------------------------------
/packages/react/src/providers/locale/examples/basic.tsx:
--------------------------------------------------------------------------------
1 | import { LocaleProvider } from '@ark-ui/react/locale'
2 | import { Usage } from './usage'
3 |
4 | export const Basic = () => {
5 | return (
6 |
7 |
8 |
9 | )
10 | }
11 |
--------------------------------------------------------------------------------
/packages/react/src/providers/locale/examples/setup.tsx:
--------------------------------------------------------------------------------
1 | import { LocaleProvider } from '@ark-ui/react/locale'
2 |
3 | export const App = () => {
4 | return {/* Your App */}
5 | }
6 |
--------------------------------------------------------------------------------
/packages/react/src/providers/locale/examples/usage.tsx:
--------------------------------------------------------------------------------
1 | import { useLocaleContext } from '@ark-ui/react/locale'
2 |
3 | export const Usage = () => {
4 | const { locale, dir } = useLocaleContext()
5 |
6 | return {JSON.stringify({ locale, dir }, null, 2)}
7 | }
8 |
--------------------------------------------------------------------------------
/packages/react/src/providers/locale/index.ts:
--------------------------------------------------------------------------------
1 | export { LocaleProvider, type LocaleProviderProps } from './locale-provider'
2 | export { useFilter, type UseFilterProps, type UseFilterReturn } from './use-filter'
3 | export { useLocaleContext, type UseLocaleContext } from './use-locale-context'
4 |
--------------------------------------------------------------------------------
/packages/react/src/providers/locale/locale.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta } from '@storybook/react'
2 |
3 | const meta: Meta = {
4 | title: 'Providers / Locale',
5 | }
6 |
7 | export default meta
8 |
9 | export { Basic } from './examples/basic'
10 |
--------------------------------------------------------------------------------
/packages/react/src/setup-test.ts:
--------------------------------------------------------------------------------
1 | import '@testing-library/jest-dom/vitest'
2 | import 'vitest-axe/extend-expect'
3 |
--------------------------------------------------------------------------------
/packages/react/src/types.ts:
--------------------------------------------------------------------------------
1 | export type Assign = Omit & U
2 | export type Optional = Pick, K> & Omit
3 | export type MaybePromise = T | Promise
4 |
--------------------------------------------------------------------------------
/packages/react/src/utils/use-safe-layout-effect.ts:
--------------------------------------------------------------------------------
1 | import { useEffect, useLayoutEffect } from 'react'
2 |
3 | export const useSafeLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect
4 |
--------------------------------------------------------------------------------
/packages/react/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../tsconfig.json",
3 | "compilerOptions": {
4 | "jsx": "preserve",
5 | "jsxImportSource": "react"
6 | },
7 | "include": ["src"]
8 | }
9 |
--------------------------------------------------------------------------------
/packages/solid/.storybook/preview.ts:
--------------------------------------------------------------------------------
1 | import type { Preview } from '@storybook/react'
2 | import '../../../.storybook/styles.css'
3 |
4 | const preview: Preview = {
5 | parameters: {
6 | options: {
7 | storySort: {
8 | method: 'alphabetical',
9 | },
10 | },
11 | layout: 'padded',
12 | },
13 | }
14 |
15 | export default preview
16 |
--------------------------------------------------------------------------------
/packages/solid/biome.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": ["../../biome.json"],
3 | "linter": {
4 | "rules": {
5 | "correctness": {
6 | "useJsxKeyInIterable": "off"
7 | }
8 | }
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/packages/solid/src/components/accordion/accordion.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as accordionAnatomy } from '@zag-js/accordion'
2 |
--------------------------------------------------------------------------------
/packages/solid/src/components/accordion/use-accordion-item-props-context.ts:
--------------------------------------------------------------------------------
1 | import type { ItemProps } from '@zag-js/accordion'
2 | import { createContext } from '../../utils/create-context'
3 |
4 | export const [AccordionItemPropsProvider, useAccordionItemPropsContext] = createContext({
5 | hookName: 'useAccordionItemPropsContext',
6 | providerName: '',
7 | })
8 |
--------------------------------------------------------------------------------
/packages/solid/src/components/anatomy.ts:
--------------------------------------------------------------------------------
1 | export * from '@zag-js/anatomy'
2 |
--------------------------------------------------------------------------------
/packages/solid/src/components/angle-slider/angle-slider.anatomy.tsx:
--------------------------------------------------------------------------------
1 | export { anatomy as angleSliderAnatomy } from '@zag-js/angle-slider'
2 |
--------------------------------------------------------------------------------
/packages/solid/src/components/angle-slider/angle-slider.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta } from 'storybook-solidjs'
2 |
3 | const meta: Meta = {
4 | title: 'Components / Angle Slider',
5 | }
6 |
7 | export default meta
8 |
9 | export { Basic } from './examples/basic'
10 | export { Step } from './examples/step'
11 | export { Controlled } from './examples/controlled'
12 |
--------------------------------------------------------------------------------
/packages/solid/src/components/avatar/avatar-context.tsx:
--------------------------------------------------------------------------------
1 | import type { JSX } from 'solid-js'
2 | import { type UseAvatarContext, useAvatarContext } from './use-avatar-context'
3 |
4 | export interface AvatarContextProps {
5 | children: (context: UseAvatarContext) => JSX.Element
6 | }
7 |
8 | export const AvatarContext = (props: AvatarContextProps) => props.children(useAvatarContext())
9 |
--------------------------------------------------------------------------------
/packages/solid/src/components/avatar/avatar.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as avatarAnatomy } from '@zag-js/avatar'
2 |
--------------------------------------------------------------------------------
/packages/solid/src/components/avatar/examples/basic.tsx:
--------------------------------------------------------------------------------
1 | import { Avatar } from '@ark-ui/solid/avatar'
2 |
3 | export const Basic = () => (
4 |
5 | PA
6 |
7 |
8 | )
9 |
--------------------------------------------------------------------------------
/packages/solid/src/components/avatar/tests/basic.tsx:
--------------------------------------------------------------------------------
1 | import { Avatar } from '../'
2 |
3 | export const ComponentUnderTest = (props: Avatar.RootProps) => {
4 | return (
5 |
6 | PA
7 |
8 |
9 | )
10 | }
11 |
--------------------------------------------------------------------------------
/packages/solid/src/components/carousel/carousel.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as carouselAnatomy } from '@zag-js/carousel'
2 |
--------------------------------------------------------------------------------
/packages/solid/src/components/checkbox/checkbox.anatomy.ts:
--------------------------------------------------------------------------------
1 | import { anatomy } from '@zag-js/checkbox'
2 |
3 | export const checkboxAnatomy = anatomy.extendWith('group')
4 |
--------------------------------------------------------------------------------
/packages/solid/src/components/client-only/client-only.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta } from 'storybook-solidjs'
2 |
3 | const meta: Meta = {
4 | title: 'Components / ClientOnly',
5 | }
6 |
7 | export default meta
8 |
9 | export { Basic } from './examples/basic'
10 | export { WithFallback } from './examples/with-fallback'
11 |
--------------------------------------------------------------------------------
/packages/solid/src/components/client-only/examples/basic.tsx:
--------------------------------------------------------------------------------
1 | import { ClientOnly } from '../client-only'
2 |
3 | export const Basic = () => (
4 |
5 | This content is only rendered on the client side.
6 |
7 | )
8 |
--------------------------------------------------------------------------------
/packages/solid/src/components/client-only/examples/with-fallback.tsx:
--------------------------------------------------------------------------------
1 | import { ClientOnly } from '../client-only'
2 |
3 | export const WithFallback = () => (
4 | Loading...}>
5 | This content is only rendered on the client side.
6 |
7 | )
8 |
--------------------------------------------------------------------------------
/packages/solid/src/components/client-only/index.ts:
--------------------------------------------------------------------------------
1 | export { ClientOnly, type ClientOnlyProps } from './client-only'
2 |
--------------------------------------------------------------------------------
/packages/solid/src/components/clipboard/clipboard.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as clipboardAnatomy } from '@zag-js/clipboard'
2 |
--------------------------------------------------------------------------------
/packages/solid/src/components/clipboard/clipboard.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta } from 'storybook-solidjs'
2 |
3 | const meta: Meta = {
4 | title: 'Components / Clipboard',
5 | }
6 |
7 | export default meta
8 |
9 | export { Basic } from './examples/basic'
10 | export { RenderFn } from './examples/render-fn'
11 | export { RootProvider } from './examples/root-provider'
12 |
--------------------------------------------------------------------------------
/packages/solid/src/components/collapsible/collapsible.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as collapsibleAnatomy } from '@zag-js/collapsible'
2 |
--------------------------------------------------------------------------------
/packages/solid/src/components/color-picker/color-picker.anatomy.ts:
--------------------------------------------------------------------------------
1 | import { anatomy } from '@zag-js/color-picker'
2 |
3 | export const colorPickerAnatomy = anatomy.extendWith('view')
4 |
--------------------------------------------------------------------------------
/packages/solid/src/components/combobox/combobox.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as comboboxAnatomy } from '@zag-js/combobox'
2 |
--------------------------------------------------------------------------------
/packages/solid/src/components/date-picker/date-picker.anatomy.ts:
--------------------------------------------------------------------------------
1 | import { anatomy } from '@zag-js/date-picker'
2 |
3 | export const datePickerAnatomy = anatomy.extendWith('view')
4 |
--------------------------------------------------------------------------------
/packages/solid/src/components/dialog/dialog-context.tsx:
--------------------------------------------------------------------------------
1 | import type { JSX } from 'solid-js'
2 | import { type UseDialogContext, useDialogContext } from './use-dialog-context'
3 |
4 | export interface DialogContextProps {
5 | children: (context: UseDialogContext) => JSX.Element
6 | }
7 |
8 | export const DialogContext = (props: DialogContextProps) => props.children(useDialogContext())
9 |
--------------------------------------------------------------------------------
/packages/solid/src/components/dialog/dialog.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as dialogAnatomy } from '@zag-js/dialog'
2 |
--------------------------------------------------------------------------------
/packages/solid/src/components/download-trigger/download-trigger.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta } from 'storybook-solidjs'
2 |
3 | const meta: Meta = {
4 | title: 'Components/DownloadTrigger',
5 | }
6 |
7 | export default meta
8 |
9 | export { Basic } from './examples/basic'
10 | export { Svg } from './examples/svg'
11 | export { WithPromise } from './examples/with-promise'
12 |
--------------------------------------------------------------------------------
/packages/solid/src/components/download-trigger/examples/basic.tsx:
--------------------------------------------------------------------------------
1 | import { DownloadTrigger } from '@ark-ui/solid/download-trigger'
2 |
3 | export const Basic = () => {
4 | return (
5 |
6 | Download txt
7 |
8 | )
9 | }
10 |
--------------------------------------------------------------------------------
/packages/solid/src/components/download-trigger/index.tsx:
--------------------------------------------------------------------------------
1 | export { DownloadTrigger } from './download-trigger'
2 | export type { DownloadTriggerBaseProps, DownloadTriggerProps } from './download-trigger'
3 |
--------------------------------------------------------------------------------
/packages/solid/src/components/editable/editable.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as editableAnatomy } from '@zag-js/editable'
2 |
--------------------------------------------------------------------------------
/packages/solid/src/components/editable/examples/basic.tsx:
--------------------------------------------------------------------------------
1 | import { Editable } from '@ark-ui/solid/editable'
2 |
3 | export const Basic = () => (
4 |
5 | Label
6 |
7 |
8 |
9 |
10 |
11 | )
12 |
--------------------------------------------------------------------------------
/packages/solid/src/components/field/examples/required-indicator.tsx:
--------------------------------------------------------------------------------
1 | import { Field } from '@ark-ui/solid/field'
2 |
3 | export const RequiredIndicator = () => {
4 | return (
5 |
6 |
7 | Username
8 |
9 |
10 |
11 |
12 | )
13 | }
14 |
--------------------------------------------------------------------------------
/packages/solid/src/components/field/field-context.tsx:
--------------------------------------------------------------------------------
1 | import type { JSX } from 'solid-js'
2 | import { type UseFieldContext, useFieldContext } from './use-field-context'
3 |
4 | export interface FieldContextProps {
5 | children: (context: UseFieldContext) => JSX.Element
6 | }
7 |
8 | export const FieldContext = (props: FieldContextProps) => props.children(useFieldContext())
9 |
--------------------------------------------------------------------------------
/packages/solid/src/components/field/field.anatomy.ts:
--------------------------------------------------------------------------------
1 | import { createAnatomy } from '@zag-js/anatomy'
2 |
3 | export const fieldAnatomy = createAnatomy('field').parts(
4 | 'root',
5 | 'errorText',
6 | 'helperText',
7 | 'input',
8 | 'label',
9 | 'select',
10 | 'textarea',
11 | 'requiredIndicator',
12 | )
13 | export const parts = fieldAnatomy.build()
14 |
--------------------------------------------------------------------------------
/packages/solid/src/components/fieldset/fieldset.anatomy.ts:
--------------------------------------------------------------------------------
1 | import { createAnatomy } from '@zag-js/anatomy'
2 |
3 | export const fieldsetAnatomy = createAnatomy('fieldset').parts('root', 'errorText', 'helperText', 'legend')
4 | export const parts = fieldsetAnatomy.build()
5 |
--------------------------------------------------------------------------------
/packages/solid/src/components/file-upload/file-upload.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as fileUploadAnatomy } from '@zag-js/file-upload'
2 |
--------------------------------------------------------------------------------
/packages/solid/src/components/file-upload/file-upload.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta } from 'storybook-solidjs'
2 |
3 | const meta: Meta = {
4 | title: 'Components / File Upload',
5 | }
6 |
7 | export default meta
8 |
9 | export { Basic } from './examples/basic'
10 | export { RootProvider } from './examples/root-provider'
11 | export { WithField } from './examples/with-field'
12 |
--------------------------------------------------------------------------------
/packages/solid/src/components/floating-panel/floating-panel.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as floatingPanelAnatomy } from '@zag-js/floating-panel'
2 |
--------------------------------------------------------------------------------
/packages/solid/src/components/focus-trap/focus-trap.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta } from 'storybook-solidjs'
2 |
3 | const meta: Meta = {
4 | title: 'Components / Focus Trap',
5 | }
6 |
7 | export default meta
8 |
9 | export { Basic } from './examples/basic'
10 | export { InitialFocus } from './examples/initial-focus'
11 | export { Autofocus } from './examples/autofocus'
12 |
--------------------------------------------------------------------------------
/packages/solid/src/components/focus-trap/index.tsx:
--------------------------------------------------------------------------------
1 | export { FocusTrap } from './focus-trap'
2 | export type { FocusTrapBaseProps, FocusTrapProps } from './focus-trap'
3 |
--------------------------------------------------------------------------------
/packages/solid/src/components/format/examples/byte-basic.tsx:
--------------------------------------------------------------------------------
1 | import { Format } from '@ark-ui/solid/format'
2 |
3 | export const ByteBasic = () => {
4 | return (
5 |
6 | File size:
7 |
8 | )
9 | }
10 |
--------------------------------------------------------------------------------
/packages/solid/src/components/format/examples/byte-with-unit.tsx:
--------------------------------------------------------------------------------
1 | import { Format } from '@ark-ui/solid/format'
2 |
3 | export const ByteWithUnit = () => {
4 | const value = 1450.45
5 | const unit = 'bit'
6 |
7 | return (
8 |
9 | File size:
10 |
11 | )
12 | }
13 |
--------------------------------------------------------------------------------
/packages/solid/src/components/format/examples/number-basic.tsx:
--------------------------------------------------------------------------------
1 | import { Format } from '@ark-ui/solid/format'
2 |
3 | export const NumberBasic = () => {
4 | return
5 | }
6 |
--------------------------------------------------------------------------------
/packages/solid/src/components/format/examples/number-with-compact.tsx:
--------------------------------------------------------------------------------
1 | import { Format } from '@ark-ui/solid/format'
2 |
3 | export const NumberWithCompact = () => {
4 | return
5 | }
6 |
--------------------------------------------------------------------------------
/packages/solid/src/components/format/examples/number-with-currency.tsx:
--------------------------------------------------------------------------------
1 | import { Format } from '@ark-ui/solid/format'
2 |
3 | export const NumberWithCurrency = () => {
4 | return
5 | }
6 |
--------------------------------------------------------------------------------
/packages/solid/src/components/format/examples/number-with-locale.tsx:
--------------------------------------------------------------------------------
1 | import { Format } from '@ark-ui/solid/format'
2 | import { LocaleProvider } from '@ark-ui/solid/locale'
3 |
4 | export const NumberWithLocale = () => {
5 | return (
6 |
7 |
8 |
9 | )
10 | }
11 |
--------------------------------------------------------------------------------
/packages/solid/src/components/format/examples/number-with-percentage.tsx:
--------------------------------------------------------------------------------
1 | import { Format } from '@ark-ui/solid/format'
2 |
3 | export const NumberWithPercentage = () => {
4 | return
5 | }
6 |
--------------------------------------------------------------------------------
/packages/solid/src/components/format/examples/number-with-unit.tsx:
--------------------------------------------------------------------------------
1 | import { Format } from '@ark-ui/solid/format'
2 |
3 | export const NumberWithUnit = () => {
4 | return
5 | }
6 |
--------------------------------------------------------------------------------
/packages/solid/src/components/format/examples/relative-time-basic.tsx:
--------------------------------------------------------------------------------
1 | import { Format } from '@ark-ui/solid/format'
2 |
3 | export const RelativeTimeBasic = () => {
4 | return (
5 |
6 | Edited
7 |
8 | )
9 | }
10 |
--------------------------------------------------------------------------------
/packages/solid/src/components/format/examples/relative-time-short.tsx:
--------------------------------------------------------------------------------
1 | import { Format } from '@ark-ui/solid/format'
2 |
3 | export const RelativeTimeShort = () => {
4 | return (
5 |
6 | Edited
7 |
8 | )
9 | }
10 |
--------------------------------------------------------------------------------
/packages/solid/src/components/format/format.ts:
--------------------------------------------------------------------------------
1 | export { FormatByte as Byte, type FormatByteProps as ByteProps } from './format-byte'
2 | export { FormatNumber as Number, type FormatNumberProps as NumberProps } from './format-number'
3 | export {
4 | FormatRelativeTime as RelativeTime,
5 | type FormatRelativeTimeProps as RelativeTimeProps,
6 | } from './format-relative-time'
7 |
--------------------------------------------------------------------------------
/packages/solid/src/components/format/index.tsx:
--------------------------------------------------------------------------------
1 | export { FormatByte, type FormatByteProps } from './format-byte'
2 | export { FormatNumber, type FormatNumberProps } from './format-number'
3 | export { FormatRelativeTime, type FormatRelativeTimeProps } from './format-relative-time'
4 |
5 | export * as Format from './format'
6 |
--------------------------------------------------------------------------------
/packages/solid/src/components/frame/frame.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta } from 'storybook-solidjs'
2 |
3 | const meta: Meta = {
4 | title: 'Components / Frame',
5 | }
6 |
7 | export default meta
8 |
9 | export { Basic } from './examples/basic'
10 | export { Script } from './examples/script'
11 | export { SrcDoc } from './examples/src-doc'
12 |
--------------------------------------------------------------------------------
/packages/solid/src/components/frame/index.tsx:
--------------------------------------------------------------------------------
1 | export { Frame } from './frame'
2 | export type { FrameBaseProps, FrameProps } from './frame'
3 |
--------------------------------------------------------------------------------
/packages/solid/src/components/highlight/examples/basic.tsx:
--------------------------------------------------------------------------------
1 | import { Highlight } from '@ark-ui/solid/highlight'
2 |
3 | export const Basic = () => {
4 | return (
5 |
9 | )
10 | }
11 |
--------------------------------------------------------------------------------
/packages/solid/src/components/highlight/examples/ignore-case.tsx:
--------------------------------------------------------------------------------
1 | import { Highlight } from '@ark-ui/solid/highlight'
2 |
3 | export const IgnoreCase = () => (
4 |
5 | )
6 |
--------------------------------------------------------------------------------
/packages/solid/src/components/highlight/examples/multiple.tsx:
--------------------------------------------------------------------------------
1 | import { Highlight } from '@ark-ui/solid/highlight'
2 |
3 | export const Multiple = () => {
4 | return (
5 |
9 | )
10 | }
11 |
--------------------------------------------------------------------------------
/packages/solid/src/components/highlight/index.tsx:
--------------------------------------------------------------------------------
1 | export { Highlight, type HighlightProps } from './highlight'
2 | export { useHighlight, type HighlightChunk, type UseHighlightProps } from './use-highlight'
3 |
--------------------------------------------------------------------------------
/packages/solid/src/components/hover-card/hover-card.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as hoverCardAnatomy } from '@zag-js/hover-card'
2 |
--------------------------------------------------------------------------------
/packages/solid/src/components/listbox/listbox.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as listboxAnatomy } from '@zag-js/listbox'
2 |
--------------------------------------------------------------------------------
/packages/solid/src/components/listbox/use-listbox-item-props-context.ts:
--------------------------------------------------------------------------------
1 | import type { ItemProps } from '@zag-js/listbox'
2 | import { createContext } from '../../utils/create-context'
3 |
4 | export const [ListboxItemPropsProvider, useListboxItemPropsContext] = createContext({
5 | hookName: 'useListboxItemPropsContext',
6 | providerName: '',
7 | })
8 |
--------------------------------------------------------------------------------
/packages/solid/src/components/menu/menu-context.tsx:
--------------------------------------------------------------------------------
1 | import type { JSX } from 'solid-js'
2 | import { type UseMenuContext, useMenuContext } from './use-menu-context'
3 |
4 | export interface MenuContextProps {
5 | children: (context: UseMenuContext) => JSX.Element
6 | }
7 |
8 | export const MenuContext = (props: MenuContextProps) => props.children(useMenuContext())
9 |
--------------------------------------------------------------------------------
/packages/solid/src/components/menu/menu-item-context.tsx:
--------------------------------------------------------------------------------
1 | import type { JSX } from 'solid-js'
2 | import { type UseMenuItemContext, useMenuItemContext } from './use-menu-item-context'
3 |
4 | export interface MenuItemContextProps {
5 | children: (context: UseMenuItemContext) => JSX.Element
6 | }
7 |
8 | export const MenuItemContext = (props: MenuItemContextProps) => props.children(useMenuItemContext())
9 |
--------------------------------------------------------------------------------
/packages/solid/src/components/menu/menu.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as menuAnatomy } from '@zag-js/menu'
2 |
--------------------------------------------------------------------------------
/packages/solid/src/components/number-input/number-input.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as numberInputAnatomy } from '@zag-js/number-input'
2 |
--------------------------------------------------------------------------------
/packages/solid/src/components/pagination/pagination.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as paginationAnatomy } from '@zag-js/pagination'
2 |
--------------------------------------------------------------------------------
/packages/solid/src/components/password-input/password-input.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as passwordInputAnatomy } from '@zag-js/password-input'
2 |
--------------------------------------------------------------------------------
/packages/solid/src/components/password-input/password-input.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta } from 'storybook-solidjs'
2 |
3 | const meta: Meta = {
4 | title: 'Components / Password Input',
5 | }
6 |
7 | export default meta
8 |
9 | export { Basic } from './examples/basic'
10 | export { WithField } from './examples/with-field'
11 | export { RootProvider } from './examples/root-provider'
12 |
--------------------------------------------------------------------------------
/packages/solid/src/components/pin-input/pin-input.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as pinInputAnatomy } from '@zag-js/pin-input'
2 |
--------------------------------------------------------------------------------
/packages/solid/src/components/popover/examples/as-child.tsx:
--------------------------------------------------------------------------------
1 | // @ts-expect-error
2 | import { Button } from '@acme/ui-lib'
3 | import { Popover } from '@ark-ui/solid/popover'
4 |
5 | export const Basic = () => (
6 |
7 | }>Open
8 |
9 | )
10 |
--------------------------------------------------------------------------------
/packages/solid/src/components/popover/popover-context.tsx:
--------------------------------------------------------------------------------
1 | import type { JSX } from 'solid-js'
2 | import { type UsePopoverContext, usePopoverContext } from './use-popover-context'
3 |
4 | export interface PopoverContextProps {
5 | children: (context: UsePopoverContext) => JSX.Element
6 | }
7 |
8 | export const PopoverContext = (props: PopoverContextProps) => props.children(usePopoverContext())
9 |
--------------------------------------------------------------------------------
/packages/solid/src/components/popover/popover.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as popoverAnatomy } from '@zag-js/popover'
2 |
--------------------------------------------------------------------------------
/packages/solid/src/components/presence/index.tsx:
--------------------------------------------------------------------------------
1 | export { Presence, type PresenceProps } from './presence'
2 | export { splitPresenceProps } from './split-presence-props'
3 | export { usePresence, type UsePresenceProps, type UsePresenceReturn } from './use-presence'
4 | export { PresenceProvider, usePresenceContext, type UsePresenceContext } from './use-presence-context'
5 |
--------------------------------------------------------------------------------
/packages/solid/src/components/progress/examples/linear/basic.tsx:
--------------------------------------------------------------------------------
1 | import { Progress } from '@ark-ui/solid/progress'
2 |
3 | export const Basic = () => (
4 |
5 | Label
6 |
7 |
8 |
9 |
10 |
11 | )
12 |
--------------------------------------------------------------------------------
/packages/solid/src/components/progress/examples/linear/indeterminate.tsx:
--------------------------------------------------------------------------------
1 | import { Progress } from '@ark-ui/solid/progress'
2 |
3 | export const Indeterminate = () => (
4 |
5 | Label
6 |
7 |
8 |
9 |
10 |
11 | )
12 |
--------------------------------------------------------------------------------
/packages/solid/src/components/progress/examples/linear/vertical.tsx:
--------------------------------------------------------------------------------
1 | import { Progress } from '@ark-ui/solid/progress'
2 |
3 | export const Vertical = () => (
4 |
5 | Label
6 |
7 |
8 |
9 |
10 |
11 | )
12 |
--------------------------------------------------------------------------------
/packages/solid/src/components/progress/progress.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as progressAnatomy } from '@zag-js/progress'
2 |
--------------------------------------------------------------------------------
/packages/solid/src/components/qr-code/examples/error-correction.tsx:
--------------------------------------------------------------------------------
1 | import { QrCode } from '@ark-ui/solid/qr-code'
2 |
3 | export const ErrorCorrection = () => {
4 | return (
5 |
6 |
7 |
8 |
9 |
10 | )
11 | }
12 |
--------------------------------------------------------------------------------
/packages/solid/src/components/qr-code/qr-code-context.ts:
--------------------------------------------------------------------------------
1 | import type { JSX } from 'solid-js'
2 | import { type UseQrCodeContext, useQrCodeContext } from './use-qr-code-context'
3 |
4 | export interface QrCodeContextProps {
5 | children: (context: UseQrCodeContext) => JSX.Element
6 | }
7 |
8 | export const QrCodeContext = (props: QrCodeContextProps) => props.children(useQrCodeContext())
9 |
--------------------------------------------------------------------------------
/packages/solid/src/components/qr-code/qr-code.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as qrCodeAnatomy } from '@zag-js/qr-code'
2 |
--------------------------------------------------------------------------------
/packages/solid/src/components/radio-group/radio-group.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as radioGroupAnatomy } from '@zag-js/radio-group'
2 |
--------------------------------------------------------------------------------
/packages/solid/src/components/rating-group/rating-group.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as ratingGroupAnatomy } from '@zag-js/rating-group'
2 |
--------------------------------------------------------------------------------
/packages/solid/src/components/segment-group/segment-group.anatomy.ts:
--------------------------------------------------------------------------------
1 | import { anatomy } from '@zag-js/radio-group'
2 |
3 | export const segmentGroupAnatomy = anatomy.rename('segment-group')
4 | export const parts = segmentGroupAnatomy.build()
5 |
--------------------------------------------------------------------------------
/packages/solid/src/components/select/select.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as selectAnatomy } from '@zag-js/select'
2 |
--------------------------------------------------------------------------------
/packages/solid/src/components/select/use-select-item-props-context.ts:
--------------------------------------------------------------------------------
1 | import type { ItemProps } from '@zag-js/select'
2 | import { createContext } from '../../utils/create-context'
3 |
4 | export const [SelectItemPropsProvider, useSelectItemPropsContext] = createContext({
5 | hookName: 'useSelectItemPropsContext',
6 | providerName: '',
7 | })
8 |
--------------------------------------------------------------------------------
/packages/solid/src/components/signature-pad/signature-pad.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as signaturePadAnatomy } from '@zag-js/signature-pad'
2 |
--------------------------------------------------------------------------------
/packages/solid/src/components/slider/slider-context.tsx:
--------------------------------------------------------------------------------
1 | import type { JSX } from 'solid-js'
2 | import { type UseSliderContext, useSliderContext } from './use-slider-context'
3 |
4 | export interface SliderContextProps {
5 | children: (context: UseSliderContext) => JSX.Element
6 | }
7 |
8 | export const SliderContext = (props: SliderContextProps) => props.children(useSliderContext())
9 |
--------------------------------------------------------------------------------
/packages/solid/src/components/slider/slider.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as sliderAnatomy } from '@zag-js/slider'
2 |
--------------------------------------------------------------------------------
/packages/solid/src/components/slider/use-slider-thumb-props-context.ts:
--------------------------------------------------------------------------------
1 | import type { ThumbProps } from '@zag-js/slider'
2 | import { createContext } from '../../utils/create-context'
3 |
4 | export const [SliderThumbPropsProvider, useSliderThumbPropsContext] = createContext({
5 | hookName: 'useSliderThumbPropsContext',
6 | providerName: '',
7 | })
8 |
--------------------------------------------------------------------------------
/packages/solid/src/components/splitter/splitter.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as splitterAnatomy } from '@zag-js/splitter'
2 |
--------------------------------------------------------------------------------
/packages/solid/src/components/splitter/tests/basic.tsx:
--------------------------------------------------------------------------------
1 | import { Splitter } from '../'
2 |
3 | export const ComponentUnderTest = () => (
4 |
5 | A
6 |
7 | B
8 |
9 | )
10 |
--------------------------------------------------------------------------------
/packages/solid/src/components/steps/steps.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as stepsAnatomy } from '@zag-js/steps'
2 |
--------------------------------------------------------------------------------
/packages/solid/src/components/steps/steps.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta } from '@storybook/react'
2 |
3 | const meta: Meta = {
4 | title: 'Components / Steps',
5 | }
6 |
7 | export default meta
8 |
9 | export { Basic } from './examples/basic'
10 | export { RootProvider } from './examples/root-provider'
11 |
--------------------------------------------------------------------------------
/packages/solid/src/components/switch/examples/basic.tsx:
--------------------------------------------------------------------------------
1 | import { Switch } from '@ark-ui/solid/switch'
2 |
3 | export const Basic = () => (
4 |
5 |
6 |
7 |
8 | Label
9 |
10 |
11 | )
12 |
--------------------------------------------------------------------------------
/packages/solid/src/components/switch/examples/disabled.tsx:
--------------------------------------------------------------------------------
1 | import { Switch } from '@ark-ui/solid/switch'
2 |
3 | export const Disabled = () => {
4 | return (
5 |
6 |
7 |
8 |
9 | Label
10 |
11 |
12 | )
13 | }
14 |
--------------------------------------------------------------------------------
/packages/solid/src/components/switch/examples/initial-value.tsx:
--------------------------------------------------------------------------------
1 | import { Switch } from '@ark-ui/solid/switch'
2 |
3 | export const InitialValue = () => (
4 |
5 |
6 |
7 |
8 | Label
9 |
10 |
11 | )
12 |
--------------------------------------------------------------------------------
/packages/solid/src/components/switch/switch-context.tsx:
--------------------------------------------------------------------------------
1 | import type { JSX } from 'solid-js'
2 | import { type UseSwitchContext, useSwitchContext } from './use-switch-context'
3 |
4 | export interface SwitchContextProps {
5 | children: (context: UseSwitchContext) => JSX.Element
6 | }
7 |
8 | export const SwitchContext = (props: SwitchContextProps) => props.children(useSwitchContext())
9 |
--------------------------------------------------------------------------------
/packages/solid/src/components/switch/switch.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as switchAnatomy } from '@zag-js/switch'
2 |
--------------------------------------------------------------------------------
/packages/solid/src/components/tabs/tabs-context.tsx:
--------------------------------------------------------------------------------
1 | import type { JSX } from 'solid-js'
2 | import { type UseTabsContext, useTabsContext } from './use-tabs-context'
3 |
4 | export interface TabsContextProps {
5 | children: (context: UseTabsContext) => JSX.Element
6 | }
7 |
8 | export const TabsContext = (props: TabsContextProps) => props.children(useTabsContext())
9 |
--------------------------------------------------------------------------------
/packages/solid/src/components/tabs/tabs.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as tabsAnatomy } from '@zag-js/tabs'
2 |
--------------------------------------------------------------------------------
/packages/solid/src/components/tags-input/tags-input.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as tagsInputAnatomy } from '@zag-js/tags-input'
2 |
--------------------------------------------------------------------------------
/packages/solid/src/components/time-picker/time-picker.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as timePickerAnatomy } from '@zag-js/time-picker'
2 |
--------------------------------------------------------------------------------
/packages/solid/src/components/time-picker/time-picker.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta } from 'storybook-solidjs'
2 |
3 | const meta: Meta = {
4 | title: 'Components / Time Picker',
5 | }
6 |
7 | export default meta
8 |
9 | export { Advanced } from './examples/advanced'
10 | export { Basic } from './examples/basic'
11 | export { RootProvider } from './examples/root-provider'
12 |
--------------------------------------------------------------------------------
/packages/solid/src/components/timer/examples/events.tsx:
--------------------------------------------------------------------------------
1 | import { Timer } from '@ark-ui/solid/timer'
2 |
3 | export const Events = () => (
4 | console.log('Timer completed')}
7 | onTick={(details) => console.log('Tick:', details.formattedTime)}
8 | >
9 |
10 |
11 | )
12 |
--------------------------------------------------------------------------------
/packages/solid/src/components/timer/timer-context.tsx:
--------------------------------------------------------------------------------
1 | import type { ReactNode } from 'react'
2 | import { type UseTimerContext, useTimerContext } from './use-timer-context'
3 |
4 | export interface TimerContextProps {
5 | children: (context: UseTimerContext) => ReactNode
6 | }
7 |
8 | export const TimerContext = (props: TimerContextProps) => props.children(useTimerContext())
9 |
--------------------------------------------------------------------------------
/packages/solid/src/components/timer/timer.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as timerAnatomy } from '@zag-js/timer'
2 |
--------------------------------------------------------------------------------
/packages/solid/src/components/toast/toast-context.tsx:
--------------------------------------------------------------------------------
1 | import type { JSX } from 'solid-js'
2 | import { type UseToastContext, useToastContext } from './use-toast-context'
3 |
4 | export interface ToastContextProps {
5 | children: (context: UseToastContext) => JSX.Element
6 | }
7 |
8 | export const ToastContext = (props: ToastContextProps) => props.children(useToastContext())
9 |
--------------------------------------------------------------------------------
/packages/solid/src/components/toast/toast.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as toastAnatomy } from '@zag-js/toast'
2 |
--------------------------------------------------------------------------------
/packages/solid/src/components/toast/toast.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta } from 'storybook-solidjs'
2 |
3 | const meta: Meta = {
4 | title: 'Components / Toast',
5 | }
6 |
7 | export default meta
8 |
9 | export { Basic } from './examples/basic'
10 |
--------------------------------------------------------------------------------
/packages/solid/src/components/toggle-group/toggle-group.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as toggleGroupAnatomy } from '@zag-js/toggle-group'
2 |
--------------------------------------------------------------------------------
/packages/solid/src/components/toggle/examples/basic.tsx:
--------------------------------------------------------------------------------
1 | import { Toggle } from '@ark-ui/solid/toggle'
2 | import { BoldIcon } from 'lucide-solid'
3 |
4 | export const Basic = () => {
5 | return (
6 |
7 |
8 |
9 | )
10 | }
11 |
--------------------------------------------------------------------------------
/packages/solid/src/components/toggle/examples/disabled.tsx:
--------------------------------------------------------------------------------
1 | import { Toggle } from '@ark-ui/solid/toggle'
2 | import { BoldIcon } from 'lucide-solid'
3 |
4 | export const Disabled = () => {
5 | return (
6 |
7 |
8 |
9 | )
10 | }
11 |
--------------------------------------------------------------------------------
/packages/solid/src/components/toggle/examples/indicator.tsx:
--------------------------------------------------------------------------------
1 | import { Toggle } from '@ark-ui/solid/toggle'
2 | import { Volume, VolumeOff } from 'lucide-solid'
3 |
4 | export const Indicator = () => {
5 | return (
6 |
7 | }>
8 |
9 |
10 |
11 | )
12 | }
13 |
--------------------------------------------------------------------------------
/packages/solid/src/components/toggle/toggle-context.tsx:
--------------------------------------------------------------------------------
1 | import type { JSX } from 'solid-js'
2 | import { type UseToggleContext, useToggleContext } from './use-toggle-context'
3 |
4 | export interface ToggleContextProps {
5 | children: (context: UseToggleContext) => JSX.Element
6 | }
7 |
8 | export const ToggleContext = (props: ToggleContextProps) => props.children(useToggleContext())
9 |
--------------------------------------------------------------------------------
/packages/solid/src/components/toggle/toggle.anatomy.ts:
--------------------------------------------------------------------------------
1 | import { createAnatomy } from '@zag-js/anatomy'
2 |
3 | export const toggleAnatomy = createAnatomy('toggle', ['root', 'indicator'])
4 |
5 | export const parts = toggleAnatomy.build()
6 |
--------------------------------------------------------------------------------
/packages/solid/src/components/tooltip/tooltip-context.tsx:
--------------------------------------------------------------------------------
1 | import type { JSX } from 'solid-js'
2 | import { type UseTooltipContext, useTooltipContext } from './use-tooltip-context'
3 |
4 | export interface TooltipContextProps {
5 | children: (context: UseTooltipContext) => JSX.Element
6 | }
7 |
8 | export const TooltipContext = (props: TooltipContextProps) => props.children(useTooltipContext())
9 |
--------------------------------------------------------------------------------
/packages/solid/src/components/tooltip/tooltip.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as tooltipAnatomy } from '@zag-js/tooltip'
2 |
--------------------------------------------------------------------------------
/packages/solid/src/components/tour/tour-context.tsx:
--------------------------------------------------------------------------------
1 | import type { JSX } from 'solid-js'
2 |
3 | import { type UseTourContext, useTourContext } from './use-tour-context'
4 |
5 | export interface TourContextProps {
6 | children: (context: UseTourContext) => JSX.Element
7 | }
8 |
9 | export const TourContext = (props: TourContextProps) => props.children(useTourContext())
10 |
--------------------------------------------------------------------------------
/packages/solid/src/components/tour/tour.anatomy.ts:
--------------------------------------------------------------------------------
1 | import { anatomy } from '@zag-js/tour'
2 |
3 | export const tourAnatomy = anatomy.extendWith('control')
4 |
--------------------------------------------------------------------------------
/packages/solid/src/components/tour/tour.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta } from 'storybook-solidjs'
2 |
3 | const meta: Meta = {
4 | title: 'Components / Tour',
5 | }
6 |
7 | export default meta
8 |
9 | export { Basic } from './examples/basic'
10 |
--------------------------------------------------------------------------------
/packages/solid/src/components/tree-view/tree-view.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as treeViewAnatomy } from '@zag-js/tree-view'
2 |
--------------------------------------------------------------------------------
/packages/solid/src/components/tree-view/tree-view.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta } from 'storybook-solidjs'
2 |
3 | const meta: Meta = {
4 | title: 'Components / Tree View',
5 | }
6 |
7 | export default meta
8 |
9 | export { Basic } from './examples/basic'
10 | export { RootProvider } from './examples/root-provider'
11 |
--------------------------------------------------------------------------------
/packages/solid/src/index.tsx:
--------------------------------------------------------------------------------
1 | export * from './components'
2 | export * from './providers'
3 | export type { Assign, Optional } from './types'
4 |
--------------------------------------------------------------------------------
/packages/solid/src/providers/environment/environment.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta } from 'storybook-solidjs'
2 |
3 | const meta: Meta = {
4 | title: 'Providers / Environment',
5 | }
6 |
7 | export default meta
8 |
9 | export { Basic } from './examples/basic'
10 |
--------------------------------------------------------------------------------
/packages/solid/src/providers/environment/examples/basic.tsx:
--------------------------------------------------------------------------------
1 | import { EnvironmentProvider } from '@ark-ui/solid/environment'
2 | import { Usage } from './usage'
3 |
4 | export const Basic = () => (
5 |
6 |
7 |
8 | )
9 |
--------------------------------------------------------------------------------
/packages/solid/src/providers/environment/examples/setup.tsx:
--------------------------------------------------------------------------------
1 | import { EnvironmentProvider } from '@ark-ui/solid/environment'
2 |
3 | export const App = () => {
4 | return (
5 |
8 | )
9 | }
10 |
--------------------------------------------------------------------------------
/packages/solid/src/providers/environment/examples/usage.tsx:
--------------------------------------------------------------------------------
1 | import { useEnvironmentContext } from '../use-environment-context'
2 |
3 | export const Usage = () => {
4 | const environment = useEnvironmentContext()
5 |
6 | return {JSON.stringify(environment().getRootNode(), null, 2)}
7 | }
8 |
--------------------------------------------------------------------------------
/packages/solid/src/providers/index.tsx:
--------------------------------------------------------------------------------
1 | export * from './environment'
2 | export * from './locale'
3 |
--------------------------------------------------------------------------------
/packages/solid/src/providers/locale/examples/basic.tsx:
--------------------------------------------------------------------------------
1 | import { LocaleProvider } from '@ark-ui/solid/locale'
2 | import { Usage } from './usage'
3 |
4 | export const Basic = () => {
5 | return (
6 |
7 |
8 |
9 | )
10 | }
11 |
--------------------------------------------------------------------------------
/packages/solid/src/providers/locale/examples/setup.tsx:
--------------------------------------------------------------------------------
1 | import { LocaleProvider } from '@ark-ui/solid/locale'
2 |
3 | export const App = () => {
4 | return {/* Your App */}
5 | }
6 |
--------------------------------------------------------------------------------
/packages/solid/src/providers/locale/examples/usage.tsx:
--------------------------------------------------------------------------------
1 | import { useLocaleContext } from '@ark-ui/solid/locale'
2 |
3 | export const Usage = () => {
4 | const locale = useLocaleContext()
5 |
6 | return {JSON.stringify(locale(), null, 2)}
7 | }
8 |
--------------------------------------------------------------------------------
/packages/solid/src/providers/locale/index.tsx:
--------------------------------------------------------------------------------
1 | export { LocaleProvider, type LocaleProviderProps } from './locale-provider'
2 | export { useFilter, type UseFilterProps, type UseFilterReturn } from './use-filter'
3 | export { useLocaleContext, type UseLocaleContext } from './use-locale-context'
4 |
--------------------------------------------------------------------------------
/packages/solid/src/providers/locale/locale.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta } from 'storybook-solidjs'
2 |
3 | const meta: Meta = {
4 | title: 'Providers / Locale',
5 | }
6 |
7 | export default meta
8 |
9 | export { Basic } from './examples/basic'
10 |
--------------------------------------------------------------------------------
/packages/solid/src/types.ts:
--------------------------------------------------------------------------------
1 | import type { Accessor } from 'solid-js'
2 |
3 | export type Assign = Omit & U
4 | export type Optional = Pick, K> & Omit
5 |
6 | export type CollectionItem = string | object
7 | export type MaybeAccessor = Accessor | T
8 | export type MaybePromise = T | Promise
9 |
--------------------------------------------------------------------------------
/packages/solid/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../tsconfig.json",
3 | "compilerOptions": {
4 | "jsx": "preserve",
5 | "jsxImportSource": "solid-js"
6 | },
7 | "include": ["src"]
8 | }
9 |
--------------------------------------------------------------------------------
/packages/svelte/.storybook/preview.ts:
--------------------------------------------------------------------------------
1 | import type { Preview } from '@storybook/react'
2 | import '../../../.storybook/styles.css'
3 |
4 | const preview: Preview = {
5 | parameters: {
6 | options: {
7 | storySort: {
8 | method: 'alphabetical',
9 | },
10 | },
11 | layout: 'padded',
12 | },
13 | }
14 |
15 | export default preview
16 |
--------------------------------------------------------------------------------
/packages/svelte/src/app.d.ts:
--------------------------------------------------------------------------------
1 | // See https://kit.svelte.dev/docs/types#app
2 | // for information about these interfaces
3 | declare global {
4 | namespace App {
5 | // interface Error {}
6 | // interface Locals {}
7 | // interface PageData {}
8 | // interface PageState {}
9 | // interface Platform {}
10 | }
11 | }
12 |
13 | export type {}
14 |
--------------------------------------------------------------------------------
/packages/svelte/src/app.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | %sveltekit.head%
7 |
8 |
9 | %sveltekit.body%
10 |
11 |
12 |
--------------------------------------------------------------------------------
/packages/svelte/src/lib/components/anatomy.ts:
--------------------------------------------------------------------------------
1 | export * from '@zag-js/anatomy'
2 |
--------------------------------------------------------------------------------
/packages/svelte/src/lib/components/avatar/avatar.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as avatarAnatomy } from '@zag-js/avatar'
2 |
--------------------------------------------------------------------------------
/packages/svelte/src/lib/components/avatar/examples/basic.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 | PA
7 |
8 |
9 |
--------------------------------------------------------------------------------
/packages/svelte/src/lib/components/avatar/use-avatar-context.ts:
--------------------------------------------------------------------------------
1 | import { createContext } from '$lib/utils/create-context'
2 | import type { UseAvatarReturn } from './use-avatar.svelte'
3 |
4 | export interface UseAvatarContext extends UseAvatarReturn {}
5 | export const [AvatarProvider, useAvatarContext] = createContext({
6 | key: 'AvatarContext',
7 | })
8 |
--------------------------------------------------------------------------------
/packages/svelte/src/lib/components/factory/index.ts:
--------------------------------------------------------------------------------
1 | export { default as Ark } from './factory.svelte'
2 |
--------------------------------------------------------------------------------
/packages/svelte/src/lib/components/format/examples/byte-basic.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 | File size:
9 |
10 |
11 |
--------------------------------------------------------------------------------
/packages/svelte/src/lib/components/format/examples/byte-sizes.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 | {#each byteSizes as size, index (index)}
9 |
10 |
11 |
12 | {/each}
13 |
9 | File size:
10 |
11 |
12 |
--------------------------------------------------------------------------------
/packages/svelte/src/lib/components/format/examples/number-basic.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
--------------------------------------------------------------------------------
/packages/svelte/src/lib/components/format/examples/number-with-compact.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
--------------------------------------------------------------------------------
/packages/svelte/src/lib/components/format/examples/number-with-currency.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
--------------------------------------------------------------------------------
/packages/svelte/src/lib/components/format/examples/number-with-locale.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
9 |
--------------------------------------------------------------------------------
/packages/svelte/src/lib/components/format/examples/number-with-percentage.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
--------------------------------------------------------------------------------
/packages/svelte/src/lib/components/format/examples/number-with-unit.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
--------------------------------------------------------------------------------
/packages/svelte/src/lib/components/format/format.ts:
--------------------------------------------------------------------------------
1 | export {
2 | default as Byte,
3 | type FormatByteProps as ByteBaseProps,
4 | type FormatByteProps as ByteProps,
5 | } from './format-byte.svelte'
6 | export {
7 | default as Number,
8 | type FormatNumberProps as NumberBaseProps,
9 | type FormatNumberProps as NumberProps,
10 | } from './format-number.svelte'
11 |
--------------------------------------------------------------------------------
/packages/svelte/src/lib/components/format/index.ts:
--------------------------------------------------------------------------------
1 | export { default as FormatByte, type FormatByteProps } from './format-byte.svelte'
2 | export { default as FormatNumber, type FormatNumberProps } from './format-number.svelte'
3 |
4 | export * as Format from './format'
5 |
--------------------------------------------------------------------------------
/packages/svelte/src/lib/components/frame/index.ts:
--------------------------------------------------------------------------------
1 | export { default as Frame } from './frame.svelte'
2 | export type { FrameBaseProps, FrameProps } from './frame.svelte'
3 |
--------------------------------------------------------------------------------
/packages/svelte/src/lib/components/highlight/examples/basic.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
9 |
--------------------------------------------------------------------------------
/packages/svelte/src/lib/components/highlight/examples/ignore-case.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
--------------------------------------------------------------------------------
/packages/svelte/src/lib/components/highlight/index.ts:
--------------------------------------------------------------------------------
1 | export { default as Highlight } from './highlight.svelte'
2 | export type { HighlightProps } from './highlight.svelte'
3 | export { useHighlight, type HighlightChunk, type UseHighlightProps } from './use-highlight.svelte'
4 |
--------------------------------------------------------------------------------
/packages/svelte/src/lib/components/index.ts:
--------------------------------------------------------------------------------
1 | export * from './avatar'
2 | export * from './factory'
3 | export * from './format'
4 | export * from './frame'
5 | export * from './highlight'
6 | export * from './portal'
7 | export * from './presence'
8 | export * from './qr-code'
9 | export * from './slider'
10 | export * from './timer'
11 |
--------------------------------------------------------------------------------
/packages/svelte/src/lib/components/portal/index.ts:
--------------------------------------------------------------------------------
1 | export { default as Portal } from './portal.svelte'
2 | export type { PortalProps } from './portal.svelte'
3 |
--------------------------------------------------------------------------------
/packages/svelte/src/lib/components/portal/portal-consumer.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 | {#if children}
8 | {@render children()}
9 | {/if}
10 |
--------------------------------------------------------------------------------
/packages/svelte/src/lib/components/presence/use-presence-context.ts:
--------------------------------------------------------------------------------
1 | import { createContext } from '../../utils/create-context'
2 | import type { UsePresenceReturn } from './use-presence.svelte'
3 |
4 | export interface UsePresenceContext extends UsePresenceReturn {}
5 |
6 | export const [PresenceProvider, usePresenceContext] = createContext({
7 | key: 'PresenceContext',
8 | })
9 |
--------------------------------------------------------------------------------
/packages/svelte/src/lib/components/progress/examples/linear/basic.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 | Label
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/packages/svelte/src/lib/components/progress/examples/linear/indeterminate.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 | Label
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/packages/svelte/src/lib/components/progress/examples/linear/initial-value.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 | Label
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/packages/svelte/src/lib/components/progress/progress.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as progressAnatomy } from '@zag-js/progress'
2 |
--------------------------------------------------------------------------------
/packages/svelte/src/lib/components/progress/use-progress-context.ts:
--------------------------------------------------------------------------------
1 | import { createContext } from '$lib/utils/create-context'
2 | import type { UseProgressReturn } from './use-progress.svelte'
3 |
4 | export interface UseProgressContext extends UseProgressReturn {}
5 | export const [ProgressProvider, useProgressContext] = createContext({
6 | key: 'ProgressContext',
7 | })
8 |
--------------------------------------------------------------------------------
/packages/svelte/src/lib/components/qr-code/examples/error-correction.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/packages/svelte/src/lib/components/qr-code/qr-code.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as qrCodeAnatomy } from '@zag-js/qr-code'
2 |
--------------------------------------------------------------------------------
/packages/svelte/src/lib/components/qr-code/use-qr-code-context.ts:
--------------------------------------------------------------------------------
1 | import { createContext } from '$lib/utils/create-context'
2 | import type { UseQrCodeReturn } from './use-qr-code.svelte'
3 |
4 | export interface UseQrCodeContext extends UseQrCodeReturn {}
5 | export const [QrCodeProvider, useQrCodeContext] = createContext({
6 | key: 'QrCodeContext',
7 | })
8 |
--------------------------------------------------------------------------------
/packages/svelte/src/lib/components/slider/slider-thumb-props-provider.svelte:
--------------------------------------------------------------------------------
1 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/packages/svelte/src/lib/components/slider/slider.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as sliderAnatomy } from '@zag-js/slider'
2 |
--------------------------------------------------------------------------------
/packages/svelte/src/lib/components/slider/use-slider-context.ts:
--------------------------------------------------------------------------------
1 | import { createContext } from '$lib/utils/create-context'
2 | import type { UseSliderReturn } from './use-slider.svelte'
3 |
4 | export interface UseSliderContext extends UseSliderReturn {}
5 | export const [SliderProvider, useSliderContext] = createContext({
6 | key: 'SliderContext',
7 | })
8 |
--------------------------------------------------------------------------------
/packages/svelte/src/lib/components/slider/use-slider-thumb-props-context.ts:
--------------------------------------------------------------------------------
1 | import { createContext } from '$lib/utils/create-context'
2 | import type { ThumbProps } from '@zag-js/slider'
3 |
4 | export const [SliderThumbPropsProvider, useSliderThumbPropsContext] = createContext({
5 | key: 'SliderThumbPropsContext',
6 | })
7 |
--------------------------------------------------------------------------------
/packages/svelte/src/lib/components/timer/timer.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as timerAnatomy } from '@zag-js/timer'
2 |
--------------------------------------------------------------------------------
/packages/svelte/src/lib/components/timer/use-timer-context.ts:
--------------------------------------------------------------------------------
1 | import { createContext } from '$lib/utils/create-context'
2 | import type { UseTimerReturn } from './use-timer.svelte'
3 |
4 | export interface UseTimerContext extends UseTimerReturn {}
5 |
6 | export const [TimerProvider, useTimerContext] = createContext({
7 | key: 'TimerContext',
8 | })
9 |
--------------------------------------------------------------------------------
/packages/svelte/src/lib/index.ts:
--------------------------------------------------------------------------------
1 | export * from './components'
2 | export * from './providers'
3 | export type { Assign, Optional } from './types'
4 |
--------------------------------------------------------------------------------
/packages/svelte/src/lib/providers/environment/environment.stories.ts:
--------------------------------------------------------------------------------
1 | import type { Meta } from '@storybook/svelte'
2 | import BasicExample from './examples/basic.svelte'
3 |
4 | const meta = {
5 | title: 'Providers / Environment',
6 | } as Meta
7 |
8 | export default meta
9 |
10 | export const Basic = {
11 | render: () => ({
12 | Component: BasicExample,
13 | }),
14 | }
15 |
--------------------------------------------------------------------------------
/packages/svelte/src/lib/providers/environment/examples/basic.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/packages/svelte/src/lib/providers/environment/examples/setup.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 |
8 |
--------------------------------------------------------------------------------
/packages/svelte/src/lib/providers/environment/examples/usage.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 | {JSON.stringify(environment?.getRootNode(), null, 2)}
8 |
--------------------------------------------------------------------------------
/packages/svelte/src/lib/providers/environment/index.ts:
--------------------------------------------------------------------------------
1 | export { default as EnvironmentProvider, type EnvironmentProviderProps } from './environment-provider.svelte'
2 | export { useEnvironmentContext, type RootNode, type UseEnvironmentContext } from './use-environment-context'
3 |
--------------------------------------------------------------------------------
/packages/svelte/src/lib/providers/index.ts:
--------------------------------------------------------------------------------
1 | export * from './locale'
2 |
--------------------------------------------------------------------------------
/packages/svelte/src/lib/providers/locale/examples/basic.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
9 |
--------------------------------------------------------------------------------
/packages/svelte/src/lib/providers/locale/examples/setup.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
--------------------------------------------------------------------------------
/packages/svelte/src/lib/providers/locale/examples/usage.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 | {JSON.stringify(locale, null, 2)}
8 |
--------------------------------------------------------------------------------
/packages/svelte/src/lib/providers/locale/index.ts:
--------------------------------------------------------------------------------
1 | export { default as LocaleProvider, type LocaleProviderProps } from './locale-provider.svelte'
2 | export { useLocaleContext, type UseLocaleContext } from './use-locale-context'
3 |
--------------------------------------------------------------------------------
/packages/svelte/src/routes/+page.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 | CS
7 |
8 |
9 |
--------------------------------------------------------------------------------
/packages/svelte/src/test-setup.ts:
--------------------------------------------------------------------------------
1 | import '@testing-library/jest-dom/vitest'
2 |
--------------------------------------------------------------------------------
/packages/vue/.storybook/main.ts:
--------------------------------------------------------------------------------
1 | import '../../../.storybook/styles.css'
2 |
--------------------------------------------------------------------------------
/packages/vue/src/components/accordion/accordion.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as accordionAnatomy } from '@zag-js/accordion'
2 |
--------------------------------------------------------------------------------
/packages/vue/src/components/anatomy.ts:
--------------------------------------------------------------------------------
1 | export * from '@zag-js/anatomy'
2 |
--------------------------------------------------------------------------------
/packages/vue/src/components/angle-slider/angle-slider.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as angleSliderAnatomy } from '@zag-js/angle-slider'
2 |
--------------------------------------------------------------------------------
/packages/vue/src/components/angle-slider/use-angle-slider-context.ts:
--------------------------------------------------------------------------------
1 | import { createContext } from '../../utils'
2 | import type { UseAngleSliderReturn } from './use-angle-slider'
3 |
4 | export interface UseAngleSliderContext extends UseAngleSliderReturn {}
5 |
6 | export const [AngleSliderProvider, useAngleSliderContext] = createContext('AngleSliderContext')
7 |
--------------------------------------------------------------------------------
/packages/vue/src/components/avatar/avatar.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as avatarAnatomy } from '@zag-js/avatar'
2 |
--------------------------------------------------------------------------------
/packages/vue/src/components/avatar/examples/basic.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 | PA
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/packages/vue/src/components/avatar/examples/events.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 | PA
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/packages/vue/src/components/avatar/use-avatar-context.ts:
--------------------------------------------------------------------------------
1 | import { createContext } from '../../utils'
2 | import type { UseAvatarReturn } from './use-avatar'
3 |
4 | export interface UseAvatarContext extends UseAvatarReturn {}
5 | export const [AvatarProvider, useAvatarContext] = createContext('AvatarContext')
6 |
--------------------------------------------------------------------------------
/packages/vue/src/components/carousel/carousel.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as carouselAnatomy } from '@zag-js/carousel'
2 |
--------------------------------------------------------------------------------
/packages/vue/src/components/carousel/use-carousel-context.ts:
--------------------------------------------------------------------------------
1 | import { createContext } from '../../utils'
2 | import type { UseCarouselReturn } from './use-carousel'
3 |
4 | export interface UseCarouselContext extends UseCarouselReturn {}
5 |
6 | export const [CarouselProvider, useCarouselContext] = createContext('CarouselContext')
7 |
--------------------------------------------------------------------------------
/packages/vue/src/components/checkbox/checkbox.anatomy.ts:
--------------------------------------------------------------------------------
1 | import { anatomy } from '@zag-js/checkbox'
2 |
3 | export const checkboxAnatomy = anatomy.extendWith('group')
4 |
--------------------------------------------------------------------------------
/packages/vue/src/components/client-only/index.ts:
--------------------------------------------------------------------------------
1 | export { default as ClientOnly, type ClientOnlyProps } from './client-only.vue'
2 |
--------------------------------------------------------------------------------
/packages/vue/src/components/clipboard/clipboard.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as clipboardAnatomy } from '@zag-js/clipboard'
2 |
--------------------------------------------------------------------------------
/packages/vue/src/components/clipboard/use-clipboard-context.ts:
--------------------------------------------------------------------------------
1 | import { createContext } from '../../utils'
2 | import type { UseClipboardReturn } from './use-clipboard'
3 |
4 | export interface UseClipboardContext extends UseClipboardReturn {}
5 |
6 | export const [ClipboardProvider, useClipboardContext] = createContext('ClipboardContext')
7 |
--------------------------------------------------------------------------------
/packages/vue/src/components/collapsible/collapsible.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as collapsibleAnatomy } from '@zag-js/collapsible'
2 |
--------------------------------------------------------------------------------
/packages/vue/src/components/collapsible/use-collapsible-context.ts:
--------------------------------------------------------------------------------
1 | import { createContext } from '../../utils'
2 | import type { UseCollapsibleReturn } from './use-collapsible'
3 |
4 | export interface UseCollapsibleContext extends UseCollapsibleReturn {}
5 |
6 | export const [CollapsibleProvider, useCollapsibleContext] = createContext('CollapsibleContext')
7 |
--------------------------------------------------------------------------------
/packages/vue/src/components/color-picker/color-picker.anatomy.ts:
--------------------------------------------------------------------------------
1 | import { anatomy } from '@zag-js/color-picker'
2 |
3 | export const colorPickerAnatomy = anatomy.extendWith('view')
4 |
--------------------------------------------------------------------------------
/packages/vue/src/components/color-picker/use-color-picker-context.ts:
--------------------------------------------------------------------------------
1 | import { createContext } from '../../utils'
2 | import type { UseColorPickerReturn } from './use-color-picker'
3 |
4 | export interface UseColorPickerContext extends UseColorPickerReturn {}
5 |
6 | export const [ColorPickerProvider, useColorPickerContext] = createContext('ColorPickerContext')
7 |
--------------------------------------------------------------------------------
/packages/vue/src/components/combobox/combobox.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as comboboxAnatomy } from '@zag-js/combobox'
2 |
--------------------------------------------------------------------------------
/packages/vue/src/components/combobox/use-combobox-item-props-context.ts:
--------------------------------------------------------------------------------
1 | import type { ItemProps } from '@zag-js/combobox'
2 | import { createContext } from '../../utils'
3 |
4 | export interface UseComboboxItemPropsContext extends ItemProps {}
5 |
6 | export const [ComboboxItemPropsProvider, useComboboxItemPropsContext] =
7 | createContext('ComboboxItemPropsContext')
8 |
--------------------------------------------------------------------------------
/packages/vue/src/components/date-picker/date-picker.anatomy.ts:
--------------------------------------------------------------------------------
1 | import { anatomy } from '@zag-js/date-picker'
2 |
3 | export const datePickerAnatomy = anatomy.extendWith('view')
4 |
--------------------------------------------------------------------------------
/packages/vue/src/components/date-picker/use-date-picker-context.ts:
--------------------------------------------------------------------------------
1 | import { createContext } from '../../utils'
2 | import type { UseDatePickerReturn } from './use-date-picker'
3 |
4 | export interface UseDatePickerContext extends UseDatePickerReturn {}
5 |
6 | export const [DatePickerProvider, useDatePickerContext] = createContext('DatePickerContext')
7 |
--------------------------------------------------------------------------------
/packages/vue/src/components/dialog/dialog.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as dialogAnatomy } from '@zag-js/dialog'
2 |
--------------------------------------------------------------------------------
/packages/vue/src/components/dialog/use-dialog-context.ts:
--------------------------------------------------------------------------------
1 | import { createContext } from '../../utils'
2 | import type { UseDialogReturn } from './use-dialog'
3 |
4 | export interface UseDialogContext extends UseDialogReturn {}
5 |
6 | export const [DialogProvider, useDialogContext] = createContext('DialogContext')
7 |
--------------------------------------------------------------------------------
/packages/vue/src/components/download-trigger/examples/basic.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 | Download txt
7 |
8 |
--------------------------------------------------------------------------------
/packages/vue/src/components/download-trigger/index.ts:
--------------------------------------------------------------------------------
1 | export { default as DownloadTrigger } from './download-trigger.vue'
2 | export type { DownloadTriggerProps, DownloadTriggerBaseProps } from './download-trigger.vue'
3 |
--------------------------------------------------------------------------------
/packages/vue/src/components/editable/editable.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as editableAnatomy } from '@zag-js/editable'
2 |
--------------------------------------------------------------------------------
/packages/vue/src/components/editable/use-editable-context.ts:
--------------------------------------------------------------------------------
1 | import { createContext } from '../../utils'
2 | import type { UseEditableReturn } from './use-editable'
3 |
4 | export interface UseEditableContext extends UseEditableReturn {}
5 |
6 | export const [EditableProvider, useEditableContext] = createContext('EditableContext')
7 |
--------------------------------------------------------------------------------
/packages/vue/src/components/field/field.anatomy.ts:
--------------------------------------------------------------------------------
1 | import { createAnatomy } from '@zag-js/anatomy'
2 |
3 | export const fieldAnatomy = createAnatomy('field').parts(
4 | 'root',
5 | 'errorText',
6 | 'helperText',
7 | 'input',
8 | 'label',
9 | 'select',
10 | 'textarea',
11 | 'requiredIndicator',
12 | )
13 | export const parts = fieldAnatomy.build()
14 |
--------------------------------------------------------------------------------
/packages/vue/src/components/field/use-field-context.ts:
--------------------------------------------------------------------------------
1 | import { createContext } from '../../utils'
2 | import type { UseFieldReturn } from './use-field'
3 |
4 | export interface UseFieldContext extends UseFieldReturn {}
5 | export const [FieldProvider, useFieldContext] = createContext('FieldContext')
6 |
--------------------------------------------------------------------------------
/packages/vue/src/components/fieldset/fieldset.anatomy.ts:
--------------------------------------------------------------------------------
1 | import { createAnatomy } from '@zag-js/anatomy'
2 |
3 | export const fieldsetAnatomy = createAnatomy('fieldset').parts('root', 'errorText', 'helperText', 'legend')
4 | export const parts = fieldsetAnatomy.build()
5 |
--------------------------------------------------------------------------------
/packages/vue/src/components/fieldset/fieldset.types.ts:
--------------------------------------------------------------------------------
1 | export interface RootProps {
2 | /**
3 | * Indicates whether the fieldset is disabled.
4 | */
5 | disabled?: boolean | 'true' | 'false'
6 | /**
7 | * The id of the fieldset.
8 | */
9 | id?: string
10 | /**
11 | * Indicates whether the fieldset is invalid.
12 | */
13 | invalid?: boolean
14 | }
15 |
--------------------------------------------------------------------------------
/packages/vue/src/components/fieldset/use-fieldset-context.ts:
--------------------------------------------------------------------------------
1 | import { createContext } from '../../utils'
2 | import type { UseFieldsetReturn } from './use-fieldset'
3 |
4 | export interface UseFieldsetContext extends UseFieldsetReturn {}
5 | export const [FieldsetProvider, useFieldsetContext] = createContext('FieldsetContext')
6 |
--------------------------------------------------------------------------------
/packages/vue/src/components/file-upload/file-upload.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as fileUploadAnatomy } from '@zag-js/file-upload'
2 |
--------------------------------------------------------------------------------
/packages/vue/src/components/file-upload/use-file-upload-context.ts:
--------------------------------------------------------------------------------
1 | import { createContext } from '../../utils'
2 | import type { UseFileUploadReturn } from './use-file-upload'
3 |
4 | export interface UseFileUploadContext extends UseFileUploadReturn {}
5 |
6 | export const [FileUploadProvider, useFileUploadContext] = createContext('FileUploadContext')
7 |
--------------------------------------------------------------------------------
/packages/vue/src/components/floating-panel/floating-panel.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as floatingPanelAnatomy } from '@zag-js/floating-panel'
2 |
--------------------------------------------------------------------------------
/packages/vue/src/components/focus-trap/index.ts:
--------------------------------------------------------------------------------
1 | export { default as FocusTrap } from './focus-trap.vue'
2 | export type { FocusTrapBaseProps, FocusTrapProps } from './focus-trap.vue'
3 |
--------------------------------------------------------------------------------
/packages/vue/src/components/format/examples/byte-basic.vue:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
9 | File size:
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/packages/vue/src/components/format/examples/byte-sizes.vue:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
13 |
14 |
--------------------------------------------------------------------------------
/packages/vue/src/components/format/examples/byte-with-unit.vue:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 |
10 | File size:
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/packages/vue/src/components/format/examples/number-basic.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 |
8 |
--------------------------------------------------------------------------------
/packages/vue/src/components/format/examples/number-with-compact.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 |
8 |
--------------------------------------------------------------------------------
/packages/vue/src/components/format/examples/number-with-currency.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 |
8 |
--------------------------------------------------------------------------------
/packages/vue/src/components/format/examples/number-with-locale.vue:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/packages/vue/src/components/format/examples/number-with-percentage.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 |
8 |
--------------------------------------------------------------------------------
/packages/vue/src/components/format/examples/number-with-unit.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 |
8 |
--------------------------------------------------------------------------------
/packages/vue/src/components/format/examples/relative-time-basic.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 | Edited
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/packages/vue/src/components/format/examples/relative-time-short.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 | Edited
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/packages/vue/src/components/format/index.ts:
--------------------------------------------------------------------------------
1 | export { default as FormatByte, type FormatByteProps } from './format-byte.vue'
2 | export { default as FormatNumber, type FormatNumberProps } from './format-number.vue'
3 | export { default as FormatRelativeTime, type FormatRelativeTimeProps } from './format-relative-time.vue'
4 |
5 | export * as Format from './format'
6 |
--------------------------------------------------------------------------------
/packages/vue/src/components/frame/index.ts:
--------------------------------------------------------------------------------
1 | export { default as Frame } from './frame.vue'
2 | export type { FrameProps, FrameBaseProps } from './frame.vue'
3 |
--------------------------------------------------------------------------------
/packages/vue/src/components/highlight/examples/basic.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
10 |
11 |
--------------------------------------------------------------------------------
/packages/vue/src/components/highlight/examples/ignore-case.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 |
8 |
--------------------------------------------------------------------------------
/packages/vue/src/components/highlight/examples/multiple.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
10 |
11 |
--------------------------------------------------------------------------------
/packages/vue/src/components/highlight/index.ts:
--------------------------------------------------------------------------------
1 | export { default as Highlight, type HighlightProps } from './highlight.vue'
2 | export { useHighlight, type HighlightChunk, type UseHighlightProps } from './use-highlight'
3 |
--------------------------------------------------------------------------------
/packages/vue/src/components/hover-card/hover-card.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as hoverCardAnatomy } from '@zag-js/hover-card'
2 |
--------------------------------------------------------------------------------
/packages/vue/src/components/hover-card/use-hover-card-context.ts:
--------------------------------------------------------------------------------
1 | import { createContext } from '../../utils'
2 | import type { UseHoverCardReturn } from './use-hover-card'
3 |
4 | export interface UseHoverCardContext extends UseHoverCardReturn {}
5 |
6 | export const [HoverCardProvider, useHoverCardContext] = createContext('HoverCardContext')
7 |
--------------------------------------------------------------------------------
/packages/vue/src/components/listbox/listbox.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as listboxAnatomy } from '@zag-js/listbox'
2 |
--------------------------------------------------------------------------------
/packages/vue/src/components/listbox/use-listbox-item-props-context.ts:
--------------------------------------------------------------------------------
1 | import type { ItemProps } from '@zag-js/listbox'
2 | import { createContext } from '../../utils'
3 |
4 | export interface UseListboxItemPropsContext extends ItemProps {}
5 |
6 | export const [ListboxItemPropsProvider, useListboxItemPropsContext] =
7 | createContext('ListboxItemPropsContext')
8 |
--------------------------------------------------------------------------------
/packages/vue/src/components/menu/menu.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as menuAnatomy } from '@zag-js/menu'
2 |
--------------------------------------------------------------------------------
/packages/vue/src/components/menu/use-menu-context.ts:
--------------------------------------------------------------------------------
1 | import { createContext } from '../../utils'
2 | import type { UseMenuReturn } from './use-menu'
3 |
4 | export type UseMenuContext = UseMenuReturn['api']
5 |
6 | export const [MenuProvider, useMenuContext] = createContext('MenuContext')
7 |
--------------------------------------------------------------------------------
/packages/vue/src/components/menu/use-menu-machine-context.ts:
--------------------------------------------------------------------------------
1 | import { createContext } from '../../utils'
2 | import type { UseMenuReturn } from './use-menu'
3 |
4 | export type UseMenuMachineContext = UseMenuReturn['machine'] | undefined
5 |
6 | export const [MenuMachineProvider, useMenuMachineContext] = createContext('MenuMachineContext')
7 |
--------------------------------------------------------------------------------
/packages/vue/src/components/menu/use-menu-option-item-props-context.ts:
--------------------------------------------------------------------------------
1 | import type { OptionItemProps } from '@zag-js/menu'
2 | import type { ComputedRef } from 'vue'
3 | import { createContext } from '../../utils'
4 |
5 | export const [MenuOptionItemPropsProvider, useMenuOptionItemPropsContext] =
6 | createContext>('MenuOptionItemPropsContext')
7 |
--------------------------------------------------------------------------------
/packages/vue/src/components/number-input/number-input.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as numberInputAnatomy } from '@zag-js/number-input'
2 |
--------------------------------------------------------------------------------
/packages/vue/src/components/number-input/use-number-input-context.ts:
--------------------------------------------------------------------------------
1 | import { createContext } from '../../utils'
2 | import type { UseNumberInputReturn } from './use-number-input'
3 |
4 | export interface UseNumberInputContext extends UseNumberInputReturn {}
5 |
6 | export const [NumberInputProvider, useNumberInputContext] = createContext('NumberInputContext')
7 |
--------------------------------------------------------------------------------
/packages/vue/src/components/pagination/pagination.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as paginationAnatomy } from '@zag-js/pagination'
2 |
--------------------------------------------------------------------------------
/packages/vue/src/components/pagination/use-pagination-context.ts:
--------------------------------------------------------------------------------
1 | import { createContext } from '../../utils'
2 | import type { UsePaginationReturn } from './use-pagination'
3 |
4 | export interface UsePaginationContext extends UsePaginationReturn {}
5 |
6 | export const [PaginationProvider, usePaginationContext] = createContext('PaginationContext')
7 |
--------------------------------------------------------------------------------
/packages/vue/src/components/password-input/password-input.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as passwordInputAnatomy } from '@zag-js/password-input'
2 |
--------------------------------------------------------------------------------
/packages/vue/src/components/password-input/use-password-input-context.ts:
--------------------------------------------------------------------------------
1 | import { createContext } from '../../utils'
2 | import type { UsePasswordInputReturn } from './use-password-input'
3 |
4 | export interface UsePasswordInputContext extends UsePasswordInputReturn {}
5 |
6 | export const [PasswordInputProvider, usePasswordInputContext] = createContext('PasswordInput')
7 |
--------------------------------------------------------------------------------
/packages/vue/src/components/pin-input/pin-input.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as pinInputAnatomy } from '@zag-js/pin-input'
2 |
--------------------------------------------------------------------------------
/packages/vue/src/components/pin-input/use-pin-input-context.ts:
--------------------------------------------------------------------------------
1 | import { createContext } from '../../utils'
2 | import type { UsePinInputReturn } from './use-pin-input'
3 |
4 | export interface UsePinInputContext extends UsePinInputReturn {}
5 |
6 | export const [PinInputProvider, usePinInputContext] = createContext('PinInputContext')
7 |
--------------------------------------------------------------------------------
/packages/vue/src/components/popover/examples/as-child.vue:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/packages/vue/src/components/popover/examples/factory.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 | Ark UI
8 |
9 |
10 |
--------------------------------------------------------------------------------
/packages/vue/src/components/popover/popover.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as popoverAnatomy } from '@zag-js/popover'
2 |
--------------------------------------------------------------------------------
/packages/vue/src/components/popover/use-popover-context.ts:
--------------------------------------------------------------------------------
1 | import { createContext } from '../../utils'
2 | import type { UsePopoverReturn } from './use-popover'
3 |
4 | export interface UsePopoverContext extends UsePopoverReturn {}
5 |
6 | export const [PopoverProvider, usePopoverContext] = createContext('PopoverContext')
7 |
--------------------------------------------------------------------------------
/packages/vue/src/components/presence/index.ts:
--------------------------------------------------------------------------------
1 | export { default as Presence, type PresenceProps, type PresenceEmits } from './presence.vue'
2 | export { type UsePresenceProps, type UsePresenceReturn, usePresence } from './use-presence'
3 | export { PresenceProvider, type UsePresenceContext, usePresenceContext } from './use-presence-context'
4 |
--------------------------------------------------------------------------------
/packages/vue/src/components/presence/use-presence-context.ts:
--------------------------------------------------------------------------------
1 | import { createContext } from '../../utils'
2 | import type { UsePresenceReturn } from './use-presence'
3 |
4 | export interface UsePresenceContext extends UsePresenceReturn {}
5 |
6 | export const [PresenceProvider, usePresenceContext] = createContext('PresenceContext')
7 |
--------------------------------------------------------------------------------
/packages/vue/src/components/progress/progress.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as progressAnatomy } from '@zag-js/progress'
2 |
--------------------------------------------------------------------------------
/packages/vue/src/components/progress/use-progress-context.ts:
--------------------------------------------------------------------------------
1 | import { createContext } from '../../utils'
2 | import type { UseProgressReturn } from './use-progress'
3 |
4 | export interface UseProgressContext extends UseProgressReturn {}
5 |
6 | export const [ProgressProvider, useProgressContext] = createContext('ProgressContext')
7 |
--------------------------------------------------------------------------------
/packages/vue/src/components/qr-code/qr-code.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as qrCodeAnatomy } from '@zag-js/qr-code'
2 |
--------------------------------------------------------------------------------
/packages/vue/src/components/qr-code/use-qr-code-context.ts:
--------------------------------------------------------------------------------
1 | import { createContext } from '../../utils'
2 | import type { UseQrCodeReturn } from './use-qr-code'
3 |
4 | export interface UseQrCodeContext extends UseQrCodeReturn {}
5 |
6 | export const [QrCodeProvider, useQrCodeContext] = createContext('QrCodeContext')
7 |
--------------------------------------------------------------------------------
/packages/vue/src/components/radio-group/radio-group.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as radioGroupAnatomy } from '@zag-js/radio-group'
2 |
--------------------------------------------------------------------------------
/packages/vue/src/components/radio-group/use-radio-group-context.ts:
--------------------------------------------------------------------------------
1 | import { createContext } from '../../utils'
2 | import type { UseRadioGroupReturn } from './use-radio-group'
3 |
4 | export interface UseRadioGroupContext extends UseRadioGroupReturn {}
5 |
6 | export const [RadioGroupProvider, useRadioGroupContext] = createContext('RadioGroupContext')
7 |
--------------------------------------------------------------------------------
/packages/vue/src/components/rating-group/rating-group.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as ratingGroupAnatomy } from '@zag-js/rating-group'
2 |
--------------------------------------------------------------------------------
/packages/vue/src/components/rating-group/use-rating-group-context.ts:
--------------------------------------------------------------------------------
1 | import { createContext } from '../../utils'
2 | import type { UseRatingGroupReturn } from './use-rating-group'
3 |
4 | export interface UseRatingGroupContext extends UseRatingGroupReturn {}
5 |
6 | export const [RatingGroupProvider, useRatingGroupContext] = createContext('RatingGroupContext')
7 |
--------------------------------------------------------------------------------
/packages/vue/src/components/segment-group/segment-group.anatomy.ts:
--------------------------------------------------------------------------------
1 | import { anatomy } from '@zag-js/radio-group'
2 |
3 | export const segmentGroupAnatomy = anatomy.rename('segment-group')
4 | export const parts = segmentGroupAnatomy.build()
5 |
--------------------------------------------------------------------------------
/packages/vue/src/components/segment-group/use-segment-group-context.ts:
--------------------------------------------------------------------------------
1 | import { createContext } from '../../utils'
2 | import type { UseSegmentGroupReturn } from './use-segment-group'
3 |
4 | export interface UseSegmentGroupContext extends UseSegmentGroupReturn {}
5 |
6 | export const [SegmentGroupProvider, useSegmentGroupContext] =
7 | createContext('SegmentGroupContext')
8 |
--------------------------------------------------------------------------------
/packages/vue/src/components/select/select.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as selectAnatomy } from '@zag-js/select'
2 |
--------------------------------------------------------------------------------
/packages/vue/src/components/select/use-select-item-props-context.ts:
--------------------------------------------------------------------------------
1 | import type { ItemProps } from '@zag-js/select'
2 | import { createContext } from '../../utils'
3 |
4 | export interface UseSelectItemPropsContext extends ItemProps {}
5 |
6 | export const [SelectItemPropsProvider, useSelectItemPropsContext] =
7 | createContext('SelectItemPropsContext')
8 |
--------------------------------------------------------------------------------
/packages/vue/src/components/signature-pad/signature-pad.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as signaturePadAnatomy } from '@zag-js/signature-pad'
2 |
--------------------------------------------------------------------------------
/packages/vue/src/components/signature-pad/use-signature-pad-context.ts:
--------------------------------------------------------------------------------
1 | import { createContext } from '../../utils'
2 | import type { UseSignaturePadReturn } from './use-signature-pad'
3 |
4 | export interface UseSignaturePadContext extends UseSignaturePadReturn {}
5 | export const [SignaturePadProvider, useSignaturePadContext] =
6 | createContext('SignaturePadContext')
7 |
--------------------------------------------------------------------------------
/packages/vue/src/components/slider/slider.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as sliderAnatomy } from '@zag-js/slider'
2 |
--------------------------------------------------------------------------------
/packages/vue/src/components/slider/use-slider-context.ts:
--------------------------------------------------------------------------------
1 | import { createContext } from '../../utils'
2 | import type { UseSliderReturn } from './use-slider'
3 |
4 | export interface UseSliderContext extends UseSliderReturn {}
5 |
6 | export const [SliderProvider, useSliderContext] = createContext('SliderContext')
7 |
--------------------------------------------------------------------------------
/packages/vue/src/components/slider/use-slider-thumb-props-context.ts:
--------------------------------------------------------------------------------
1 | import type { ThumbProps } from '@zag-js/slider'
2 | import { createContext } from '../../utils'
3 |
4 | export const [SliderThumbPropsProvider, useSliderThumbPropsContext] =
5 | createContext('SliderThumbPropsContext')
6 |
--------------------------------------------------------------------------------
/packages/vue/src/components/splitter/splitter.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as splitterAnatomy } from '@zag-js/splitter'
2 |
--------------------------------------------------------------------------------
/packages/vue/src/components/splitter/use-splitter-context.ts:
--------------------------------------------------------------------------------
1 | import { createContext } from '../../utils'
2 | import type { UseSplitterReturn } from './use-splitter'
3 |
4 | export interface UseSplitterContext extends UseSplitterReturn {}
5 |
6 | export const [SplitterProvider, useSplitterContext] = createContext('SplitterContext')
7 |
--------------------------------------------------------------------------------
/packages/vue/src/components/steps/steps.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as stepsAnatomy } from '@zag-js/steps'
2 |
--------------------------------------------------------------------------------
/packages/vue/src/components/steps/use-steps-context.ts:
--------------------------------------------------------------------------------
1 | import { createContext } from '../../utils'
2 | import type { UseStepsReturn } from './use-steps'
3 |
4 | export interface UseStepsContext extends UseStepsReturn {}
5 |
6 | export const [StepsProvider, useStepsContext] = createContext('StepsContext')
7 |
--------------------------------------------------------------------------------
/packages/vue/src/components/steps/use-steps-item-context.ts:
--------------------------------------------------------------------------------
1 | import type { ItemState } from '@zag-js/steps'
2 | import type { ComputedRef } from 'vue'
3 | import { createContext } from '../../utils'
4 |
5 | export interface UseStepsItemContext extends ComputedRef {}
6 |
7 | export const [StepsItemProvider, useStepsItemContext] = createContext('StepsItemContext')
8 |
--------------------------------------------------------------------------------
/packages/vue/src/components/steps/use-steps-item-props-context.ts:
--------------------------------------------------------------------------------
1 | import type { ItemProps } from '@zag-js/steps'
2 | import { createContext } from '../../utils'
3 |
4 | export interface UseStepsItemPropsContext extends ItemProps {}
5 |
6 | export const [StepsItemPropsProvider, useStepsItemPropsContext] =
7 | createContext('StepsItemPropsContext')
8 |
--------------------------------------------------------------------------------
/packages/vue/src/components/switch/examples/basic.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 |
8 |
9 |
10 | Label
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/packages/vue/src/components/switch/examples/disabled.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 |
8 |
9 |
10 | Label
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/packages/vue/src/components/switch/switch.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as switchAnatomy } from '@zag-js/switch'
2 |
--------------------------------------------------------------------------------
/packages/vue/src/components/switch/tests/switch.test.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 |
8 |
9 |
10 | Label
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/packages/vue/src/components/switch/use-switch-context.ts:
--------------------------------------------------------------------------------
1 | import { createContext } from '../../utils'
2 | import type { UseSwitchReturn } from './use-switch'
3 |
4 | export interface UseSwitchContext extends UseSwitchReturn {}
5 |
6 | export const [SwitchProvider, useSwitchContext] = createContext('SwitchContext')
7 |
--------------------------------------------------------------------------------
/packages/vue/src/components/tabs/tabs.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as tabsAnatomy } from '@zag-js/tabs'
2 |
--------------------------------------------------------------------------------
/packages/vue/src/components/tabs/use-tabs-context.ts:
--------------------------------------------------------------------------------
1 | import { createContext } from '../../utils'
2 | import type { UseTabsReturn } from './use-tabs'
3 |
4 | export interface UseTabsContext extends UseTabsReturn {}
5 |
6 | export const [TabsProvider, useTabsContext] = createContext('TabsContext')
7 |
--------------------------------------------------------------------------------
/packages/vue/src/components/tags-input/tags-input.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as tagsInputAnatomy } from '@zag-js/tags-input'
2 |
--------------------------------------------------------------------------------
/packages/vue/src/components/tags-input/use-tags-input-context.ts:
--------------------------------------------------------------------------------
1 | import { createContext } from '../../utils'
2 | import type { UseTagsInputReturn } from './use-tags-input'
3 |
4 | export interface UseTagsInputContext extends UseTagsInputReturn {}
5 |
6 | export const [TagsInputProvider, useTagsInputContext] = createContext('TagsInputContext')
7 |
--------------------------------------------------------------------------------
/packages/vue/src/components/time-picker/time-picker.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as timePickerAnatomy } from '@zag-js/time-picker'
2 |
--------------------------------------------------------------------------------
/packages/vue/src/components/time-picker/use-time-picker-context.ts:
--------------------------------------------------------------------------------
1 | import { createContext } from '../../utils/create-context'
2 | import type { UseTimePickerReturn } from './use-time-picker'
3 |
4 | export interface UseTimePickerContext extends UseTimePickerReturn {}
5 |
6 | export const [TimePickerProvider, useTimePickerContext] = createContext('TimePickerContext')
7 |
--------------------------------------------------------------------------------
/packages/vue/src/components/timer/timer.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as timerAnatomy } from '@zag-js/timer'
2 |
--------------------------------------------------------------------------------
/packages/vue/src/components/timer/use-timer-context.ts:
--------------------------------------------------------------------------------
1 | import { createContext } from '../../utils'
2 | import type { UseTimerReturn } from './use-timer'
3 |
4 | export interface UseTimerContext extends UseTimerReturn {}
5 |
6 | export const [TimerProvider, useTimerContext] = createContext('TimerContext')
7 |
--------------------------------------------------------------------------------
/packages/vue/src/components/toast/toast.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as toastAnatomy } from '@zag-js/toast'
2 |
--------------------------------------------------------------------------------
/packages/vue/src/components/toast/toast.stories.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/packages/vue/src/components/toggle-group/toggle-group.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as toggleGroupAnatomy } from '@zag-js/toggle-group'
2 |
--------------------------------------------------------------------------------
/packages/vue/src/components/toggle-group/use-toggle-group-context.ts:
--------------------------------------------------------------------------------
1 | import { createContext } from '../../utils'
2 | import type { UseToggleGroupReturn } from './use-toggle-group'
3 |
4 | export interface UseToggleGroupContext extends UseToggleGroupReturn {}
5 |
6 | export const [ToggleGroupProvider, useToggleGroupContext] = createContext('ToggleGroupContext')
7 |
--------------------------------------------------------------------------------
/packages/vue/src/components/toggle/examples/basic.vue:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/packages/vue/src/components/toggle/examples/disabled.vue:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/packages/vue/src/components/toggle/toggle.anatomy.ts:
--------------------------------------------------------------------------------
1 | import { createAnatomy } from '@zag-js/anatomy'
2 |
3 | export const toggleAnatomy = createAnatomy('toggle', ['root', 'indicator'])
4 |
5 | export const parts = toggleAnatomy.build()
6 |
--------------------------------------------------------------------------------
/packages/vue/src/components/toggle/use-toggle-context.ts:
--------------------------------------------------------------------------------
1 | import { createContext } from '../../utils'
2 | import type { UseToggleReturn } from './use-toggle'
3 |
4 | export interface UseToggleContext extends UseToggleReturn {}
5 |
6 | export const [ToggleProvider, useToggleContext] = createContext('ToggleContext')
7 |
--------------------------------------------------------------------------------
/packages/vue/src/components/tooltip/tooltip.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as tooltipAnatomy } from '@zag-js/tooltip'
2 |
--------------------------------------------------------------------------------
/packages/vue/src/components/tooltip/use-tooltip-context.ts:
--------------------------------------------------------------------------------
1 | import { createContext } from '../../utils'
2 | import type { UseTooltipReturn } from './use-tooltip'
3 |
4 | export interface UseTooltipContext extends UseTooltipReturn {}
5 |
6 | export const [TooltipProvider, useTooltipContext] = createContext('TooltipContext')
7 |
--------------------------------------------------------------------------------
/packages/vue/src/components/tour/tour.anatomy.ts:
--------------------------------------------------------------------------------
1 | import { anatomy } from '@zag-js/tour'
2 |
3 | export const tourAnatomy = anatomy.extendWith('control')
4 |
--------------------------------------------------------------------------------
/packages/vue/src/components/tour/tour.stories.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/packages/vue/src/components/tour/use-tour-context.ts:
--------------------------------------------------------------------------------
1 | import { createContext } from '../../utils'
2 | import type { UseTourReturn } from './use-tour'
3 |
4 | export interface UseTourContext extends UseTourReturn {}
5 |
6 | export const [TourProvider, useTourContext] = createContext('TourContext')
7 |
--------------------------------------------------------------------------------
/packages/vue/src/components/tree-view/tree-view.anatomy.ts:
--------------------------------------------------------------------------------
1 | export { anatomy as treeViewAnatomy } from '@zag-js/tree-view'
2 |
--------------------------------------------------------------------------------
/packages/vue/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from './components'
2 | export * from './providers'
3 | export { useEmitAsProps, useForwardProps, useForwardPropsEmits, useForwardExpose } from './utils'
4 | export type { Assign, Optional } from './types'
5 |
--------------------------------------------------------------------------------
/packages/vue/src/providers/environment/environment.stories.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/packages/vue/src/providers/environment/environment.test.ts:
--------------------------------------------------------------------------------
1 | import { render } from '@testing-library/vue'
2 | import ComponentUnderTest from './examples/basic.vue'
3 |
4 | describe('Environment', () => {
5 | it('should have access to the environment values', () => {
6 | render(ComponentUnderTest)
7 | })
8 | })
9 |
--------------------------------------------------------------------------------
/packages/vue/src/providers/environment/examples/basic.vue:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/packages/vue/src/providers/environment/examples/setup.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
9 |
10 |
--------------------------------------------------------------------------------
/packages/vue/src/providers/environment/examples/usage.vue:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 | {{ JSON.stringify(environment.getRootNode(), null, 2) }}
9 |
10 |
--------------------------------------------------------------------------------
/packages/vue/src/providers/index.ts:
--------------------------------------------------------------------------------
1 | export * from './environment'
2 | export * from './locale'
3 |
--------------------------------------------------------------------------------
/packages/vue/src/providers/locale/examples/basic.vue:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/packages/vue/src/providers/locale/examples/setup.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 |
8 |
--------------------------------------------------------------------------------
/packages/vue/src/providers/locale/examples/usage.vue:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 | {{ JSON.stringify(locale, null, 2) }}
9 |
10 |
--------------------------------------------------------------------------------
/packages/vue/src/providers/locale/index.ts:
--------------------------------------------------------------------------------
1 | export { default as LocaleProvider, type LocaleProviderProps } from './locale-provider.vue'
2 | export { useFilter, type UseFilterProps, type UseFilterReturn } from './use-filter'
3 | export { DEFAULT_LOCALE, useLocaleContext, type LocaleContext } from './use-locale-context'
4 |
--------------------------------------------------------------------------------
/packages/vue/src/providers/locale/locale.stories.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/packages/vue/src/utils/clean-props.ts:
--------------------------------------------------------------------------------
1 | export const cleanProps = (obj: T): { [K in keyof T]: T[K] } => {
2 | const result: Partial = {}
3 | for (const [key, value] of Object.entries(obj)) {
4 | if (value !== undefined) {
5 | result[key as keyof T] = value
6 | }
7 | }
8 | return result as { [K in keyof T]: T[K] }
9 | }
10 |
--------------------------------------------------------------------------------
/packages/vue/src/vue.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.vue' {
2 | import Vue from 'vue'
3 | export default Vue
4 | }
5 |
--------------------------------------------------------------------------------
/packages/vue/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../tsconfig.json",
3 | "compilerOptions": {
4 | "jsx": "preserve",
5 | "jsxImportSource": "vue",
6 | "noPropertyAccessFromIndexSignature": false,
7 | "types": ["vitest/globals"],
8 | "lib": ["ESNext", "DOM"]
9 | },
10 | "include": ["src"]
11 | }
12 |
--------------------------------------------------------------------------------
/templates/next-js/next-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 | ///
3 |
4 | // NOTE: This file should not be edited
5 | // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
6 |
--------------------------------------------------------------------------------
/templates/next-js/next.config.ts:
--------------------------------------------------------------------------------
1 | import type { NextConfig } from 'next'
2 |
3 | const nextConfig: NextConfig = {
4 | /* config options here */
5 | }
6 |
7 | export default nextConfig
8 |
--------------------------------------------------------------------------------
/templates/next-js/src/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chakra-ui/ark/46879e190433964cf7d28ebe48a891fd01f7aa03/templates/next-js/src/app/favicon.ico
--------------------------------------------------------------------------------
/templates/next-js/src/app/page.tsx:
--------------------------------------------------------------------------------
1 | import { Avatar } from '~/components/avatar'
2 |
3 | export default function Home() {
4 | return (
5 |
6 | Welcome to Ark UI
7 |
8 |
9 | )
10 | }
11 |
--------------------------------------------------------------------------------
/templates/nuxt/.gitignore:
--------------------------------------------------------------------------------
1 | # Nuxt dev/build outputs
2 | .output
3 | .data
4 | .nuxt
5 | .nitro
6 | .cache
7 | dist
8 |
9 | # Node dependencies
10 | node_modules
11 |
12 | # Logs
13 | logs
14 | *.log
15 |
16 | # Misc
17 | .DS_Store
18 | .fleet
19 | .idea
20 |
21 | # Local env files
22 | .env
23 | .env.*
24 | !.env.example
25 |
--------------------------------------------------------------------------------
/templates/nuxt/app.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 | Welcome to Ark UI!
7 |
8 |
9 |
--------------------------------------------------------------------------------
/templates/nuxt/nuxt.config.ts:
--------------------------------------------------------------------------------
1 | // https://nuxt.com/docs/api/configuration/nuxt-config
2 | export default defineNuxtConfig({
3 | compatibilityDate: '2024-11-01',
4 | devtools: { enabled: true },
5 | })
6 |
--------------------------------------------------------------------------------
/templates/nuxt/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chakra-ui/ark/46879e190433964cf7d28ebe48a891fd01f7aa03/templates/nuxt/public/favicon.ico
--------------------------------------------------------------------------------
/templates/nuxt/public/robots.txt:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/templates/nuxt/server/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../.nuxt/tsconfig.server.json"
3 | }
4 |
--------------------------------------------------------------------------------
/templates/nuxt/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | // https://nuxt.com/docs/guide/concepts/typescript
3 | "extends": "./.nuxt/tsconfig.json"
4 | }
5 |
--------------------------------------------------------------------------------
/templates/solid-start/app.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from '@solidjs/start/config'
2 |
3 | export default defineConfig({})
4 |
--------------------------------------------------------------------------------
/templates/solid-start/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chakra-ui/ark/46879e190433964cf7d28ebe48a891fd01f7aa03/templates/solid-start/public/favicon.ico
--------------------------------------------------------------------------------
/templates/solid-start/src/entry-client.tsx:
--------------------------------------------------------------------------------
1 | // @refresh reload
2 | import { StartClient, mount } from '@solidjs/start/client'
3 |
4 | // biome-ignore lint/style/noNonNullAssertion: This is a generated file
5 | mount(() => , document.getElementById('app')!)
6 |
--------------------------------------------------------------------------------
/templates/solid-start/src/global.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 |
--------------------------------------------------------------------------------
/templates/solid-start/src/routes/about.tsx:
--------------------------------------------------------------------------------
1 | import { Title } from '@solidjs/meta'
2 |
3 | export default function About() {
4 | return (
5 |
6 | About
7 | About
8 |
9 | )
10 | }
11 |
--------------------------------------------------------------------------------
/turbo.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://turborepo.org/schema.json",
3 | "tasks": {
4 | "build": {
5 | "outputs": [".next/**", "dist/**", ".velite/**", "!.next/cache/**", "styled-system/**"],
6 | "dependsOn": ["^build"]
7 | },
8 | "lint": {},
9 | "test:ci": {},
10 | "typecheck": {}
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/website/README.md:
--------------------------------------------------------------------------------
1 | ### Highlight COde Snippet
2 |
3 | ```jsx
4 | // [!code highlight:2]
5 |
6 |
7 | …
8 |
9 |
10 | …
11 |
12 |
13 | ```
14 |
--------------------------------------------------------------------------------
/website/environment.d.ts:
--------------------------------------------------------------------------------
1 | namespace NodeJS {
2 | interface ProcessEnv {
3 | ARK_PLUS_URL: string
4 | ARK_PLUS_API_KEY: string
5 | LEMON_SQUEEZY_WEBHOOK_SECRET: string
6 | SLACK_WEBHOOK_URL: string
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/website/next-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 | ///
3 |
4 | // NOTE: This file should not be edited
5 | // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
6 |
--------------------------------------------------------------------------------
/website/park-ui.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://park-ui.com/registry/latest/schema.json",
3 | "importAlias": "~/*",
4 | "jsFramework": "react",
5 | "outputPaths": {
6 | "componentsDir": "~/components/ui",
7 | "libDir": "~/lib"
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/website/postcss.config.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | plugins: {
3 | '@pandacss/dev/postcss': {},
4 | },
5 | }
6 |
--------------------------------------------------------------------------------
/website/public/icon-192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chakra-ui/ark/46879e190433964cf7d28ebe48a891fd01f7aa03/website/public/icon-192.png
--------------------------------------------------------------------------------
/website/public/icon-512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chakra-ui/ark/46879e190433964cf7d28ebe48a891fd01f7aa03/website/public/icon-512.png
--------------------------------------------------------------------------------
/website/public/images/og-image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chakra-ui/ark/46879e190433964cf7d28ebe48a891fd01f7aa03/website/public/images/og-image.png
--------------------------------------------------------------------------------
/website/src/app/api/auth/[...nextauth]/route.ts:
--------------------------------------------------------------------------------
1 | import { handlers } from '~/lib/auth'
2 | export const { GET, POST } = handlers
3 |
--------------------------------------------------------------------------------
/website/src/app/apple-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chakra-ui/ark/46879e190433964cf7d28ebe48a891fd01f7aa03/website/src/app/apple-icon.png
--------------------------------------------------------------------------------
/website/src/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chakra-ui/ark/46879e190433964cf7d28ebe48a891fd01f7aa03/website/src/app/favicon.ico
--------------------------------------------------------------------------------
/website/src/app/global.css:
--------------------------------------------------------------------------------
1 | @layer reset, base, tokens, recipes, utilities;
2 |
3 | .highlighted {
4 | background-color: rgba(150, 150, 150, 0.16);
5 | display: inline-block;
6 | width: 100%;
7 | }
8 |
9 | body {
10 | position: relative;
11 | }
12 |
--------------------------------------------------------------------------------
/website/src/app/opengraph-image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chakra-ui/ark/46879e190433964cf7d28ebe48a891fd01f7aa03/website/src/app/opengraph-image.png
--------------------------------------------------------------------------------
/website/src/app/robots.ts:
--------------------------------------------------------------------------------
1 | import type { MetadataRoute } from 'next'
2 |
3 | const robots = (): MetadataRoute.Robots => ({
4 | rules: {
5 | userAgent: '*',
6 | allow: '/',
7 | },
8 | sitemap: 'https://ark-ui.com/sitemap.xml',
9 | })
10 |
11 | export default robots
12 |
--------------------------------------------------------------------------------
/website/src/app/twitter-image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chakra-ui/ark/46879e190433964cf7d28ebe48a891fd01f7aa03/website/src/app/twitter-image.png
--------------------------------------------------------------------------------
/website/src/components/submit-button.tsx:
--------------------------------------------------------------------------------
1 | import { useFormStatus } from 'react-dom'
2 | import { Button, type ButtonProps } from './ui/button'
3 |
4 | export const SubmitButton = (props: ButtonProps) => {
5 | const { pending } = useFormStatus()
6 | return
7 | }
8 |
--------------------------------------------------------------------------------
/website/src/components/ui/accordion.tsx:
--------------------------------------------------------------------------------
1 | export * as Accordion from './primitives/accordion'
2 |
--------------------------------------------------------------------------------
/website/src/components/ui/alert.tsx:
--------------------------------------------------------------------------------
1 | export * as Alert from './primitives/alert'
2 |
--------------------------------------------------------------------------------
/website/src/components/ui/badge.tsx:
--------------------------------------------------------------------------------
1 | export { Badge, type BadgeProps } from './primitives/badge'
2 |
--------------------------------------------------------------------------------
/website/src/components/ui/card.tsx:
--------------------------------------------------------------------------------
1 | export * as Card from './primitives/card'
2 |
--------------------------------------------------------------------------------
/website/src/components/ui/carousel.tsx:
--------------------------------------------------------------------------------
1 | export * as Carousel from './primitives/carousel'
2 |
--------------------------------------------------------------------------------
/website/src/components/ui/clipboard.tsx:
--------------------------------------------------------------------------------
1 | export * as Clipboard from './primitives/clipboard'
2 |
--------------------------------------------------------------------------------
/website/src/components/ui/code.tsx:
--------------------------------------------------------------------------------
1 | export { Code, type CodeProps } from './primitives/code'
2 |
--------------------------------------------------------------------------------
/website/src/components/ui/collapsible.tsx:
--------------------------------------------------------------------------------
1 | export * as Collapsible from './primitives/collapsible'
2 |
--------------------------------------------------------------------------------
/website/src/components/ui/color-picker.tsx:
--------------------------------------------------------------------------------
1 | export * as ColorPicker from './primitives/color-picker'
2 |
--------------------------------------------------------------------------------
/website/src/components/ui/combobox.tsx:
--------------------------------------------------------------------------------
1 | export * as Combobox from './primitives/combobox'
2 |
--------------------------------------------------------------------------------
/website/src/components/ui/date-picker.tsx:
--------------------------------------------------------------------------------
1 | export * as DatePicker from './primitives/date-picker'
2 |
--------------------------------------------------------------------------------
/website/src/components/ui/dialog.tsx:
--------------------------------------------------------------------------------
1 | export * as Dialog from './primitives/dialog'
2 |
--------------------------------------------------------------------------------
/website/src/components/ui/drawer.tsx:
--------------------------------------------------------------------------------
1 | export * as Drawer from './primitives/drawer'
2 |
--------------------------------------------------------------------------------
/website/src/components/ui/editable.tsx:
--------------------------------------------------------------------------------
1 | export * as Editable from './primitives/editable'
2 |
--------------------------------------------------------------------------------
/website/src/components/ui/field.tsx:
--------------------------------------------------------------------------------
1 | export * as Field from './primitives/field'
2 |
--------------------------------------------------------------------------------
/website/src/components/ui/file-upload.tsx:
--------------------------------------------------------------------------------
1 | export * as FileUpload from './primitives/file-upload'
2 |
--------------------------------------------------------------------------------
/website/src/components/ui/form-label.tsx:
--------------------------------------------------------------------------------
1 | export { FormLabel, type FormLabelProps } from './primitives/form-label'
2 |
--------------------------------------------------------------------------------
/website/src/components/ui/heading.tsx:
--------------------------------------------------------------------------------
1 | export { Heading, type HeadingProps } from './primitives/heading'
2 |
--------------------------------------------------------------------------------
/website/src/components/ui/hover-card.tsx:
--------------------------------------------------------------------------------
1 | export * as HoverCard from './primitives/hover-card'
2 |
--------------------------------------------------------------------------------
/website/src/components/ui/icon-button.tsx:
--------------------------------------------------------------------------------
1 | export { IconButton, type IconButtonProps } from './primitives/icon-button'
2 |
--------------------------------------------------------------------------------
/website/src/components/ui/icon.tsx:
--------------------------------------------------------------------------------
1 | export { Icon, type IconProps } from './primitives/icon'
2 |
--------------------------------------------------------------------------------
/website/src/components/ui/input.tsx:
--------------------------------------------------------------------------------
1 | export { Input, type InputProps } from './primitives/input'
2 |
--------------------------------------------------------------------------------
/website/src/components/ui/kbd.tsx:
--------------------------------------------------------------------------------
1 | export { Kbd, type KbdProps } from './primitives/kbd'
2 |
--------------------------------------------------------------------------------
/website/src/components/ui/link.tsx:
--------------------------------------------------------------------------------
1 | export { Link, type LinkProps } from './primitives/link'
2 |
--------------------------------------------------------------------------------
/website/src/components/ui/menu.tsx:
--------------------------------------------------------------------------------
1 | export * as Menu from './primitives/menu'
2 |
--------------------------------------------------------------------------------
/website/src/components/ui/popover.tsx:
--------------------------------------------------------------------------------
1 | export * as Popover from './primitives/popover'
2 |
--------------------------------------------------------------------------------
/website/src/components/ui/primitives/badge.tsx:
--------------------------------------------------------------------------------
1 | import { ark } from '@ark-ui/react/factory'
2 | import { styled } from 'styled-system/jsx'
3 | import { badge } from 'styled-system/recipes'
4 | import type { ComponentProps } from 'styled-system/types'
5 |
6 | export type BadgeProps = ComponentProps
7 | export const Badge = styled(ark.div, badge)
8 |
--------------------------------------------------------------------------------
/website/src/components/ui/primitives/button.tsx:
--------------------------------------------------------------------------------
1 | import { ark } from '@ark-ui/react/factory'
2 | import { styled } from 'styled-system/jsx'
3 | import { button } from 'styled-system/recipes'
4 | import type { ComponentProps } from 'styled-system/types'
5 |
6 | export type ButtonProps = ComponentProps
7 | export const Button = styled(ark.button, button)
8 |
--------------------------------------------------------------------------------
/website/src/components/ui/primitives/code.tsx:
--------------------------------------------------------------------------------
1 | import { ark } from '@ark-ui/react/factory'
2 | import { styled } from 'styled-system/jsx'
3 | import { code } from 'styled-system/recipes'
4 | import type { ComponentProps } from 'styled-system/types'
5 |
6 | export type CodeProps = ComponentProps
7 | export const Code = styled(ark.code, code)
8 |
--------------------------------------------------------------------------------
/website/src/components/ui/primitives/form-label.tsx:
--------------------------------------------------------------------------------
1 | import { ark } from '@ark-ui/react/factory'
2 | import { styled } from 'styled-system/jsx'
3 | import { formLabel } from 'styled-system/recipes'
4 | import type { ComponentProps } from 'styled-system/types'
5 |
6 | export type FormLabelProps = ComponentProps
7 | export const FormLabel = styled(ark.label, formLabel)
8 |
--------------------------------------------------------------------------------
/website/src/components/ui/primitives/input.tsx:
--------------------------------------------------------------------------------
1 | import { ark } from '@ark-ui/react/factory'
2 | import { styled } from 'styled-system/jsx'
3 | import { input } from 'styled-system/recipes'
4 | import type { ComponentProps } from 'styled-system/types'
5 |
6 | export type InputProps = ComponentProps
7 | export const Input = styled(ark.input, input)
8 |
--------------------------------------------------------------------------------
/website/src/components/ui/primitives/kbd.tsx:
--------------------------------------------------------------------------------
1 | import { ark } from '@ark-ui/react/factory'
2 | import { styled } from 'styled-system/jsx'
3 | import { kbd } from 'styled-system/recipes'
4 | import type { ComponentProps } from 'styled-system/types'
5 |
6 | export type KbdProps = ComponentProps
7 | export const Kbd = styled(ark.kbd, kbd)
8 |
--------------------------------------------------------------------------------
/website/src/components/ui/primitives/spinner.tsx:
--------------------------------------------------------------------------------
1 | import { ark } from '@ark-ui/react/factory'
2 | import { styled } from 'styled-system/jsx'
3 | import { spinner } from 'styled-system/recipes'
4 | import type { ComponentProps } from 'styled-system/types'
5 |
6 | export type SpinnerProps = ComponentProps
7 | export const Spinner = styled(ark.div, spinner)
8 |
--------------------------------------------------------------------------------
/website/src/components/ui/primitives/textarea.tsx:
--------------------------------------------------------------------------------
1 | import { ark } from '@ark-ui/react/factory'
2 | import { styled } from 'styled-system/jsx'
3 | import { textarea } from 'styled-system/recipes'
4 | import type { ComponentProps } from 'styled-system/types'
5 |
6 | export type TextareaProps = ComponentProps
7 | export const Textarea = styled(ark.textarea, textarea)
8 |
--------------------------------------------------------------------------------
/website/src/components/ui/prose.tsx:
--------------------------------------------------------------------------------
1 | import { ark } from '@ark-ui/react/factory'
2 | import { styled } from 'styled-system/jsx'
3 | import { prose } from 'styled-system/recipes'
4 |
5 | export const Prose = styled(ark.article, prose)
6 |
--------------------------------------------------------------------------------
/website/src/components/ui/qr-code.tsx:
--------------------------------------------------------------------------------
1 | export * as QrCode from './primitives/qr-code'
2 |
--------------------------------------------------------------------------------
/website/src/components/ui/radio-button-group.tsx:
--------------------------------------------------------------------------------
1 | export * as RadioButtonGroup from './primitives/radio-button-group'
2 |
--------------------------------------------------------------------------------
/website/src/components/ui/radio-group.tsx:
--------------------------------------------------------------------------------
1 | export * as RadioGroup from './primitives/radio-group'
2 |
--------------------------------------------------------------------------------
/website/src/components/ui/segment-group.tsx:
--------------------------------------------------------------------------------
1 | export * as SegmentGroup from './primitives/segment-group'
2 |
--------------------------------------------------------------------------------
/website/src/components/ui/select.tsx:
--------------------------------------------------------------------------------
1 | export * as Select from './primitives/select'
2 |
--------------------------------------------------------------------------------
/website/src/components/ui/signature-pad.tsx:
--------------------------------------------------------------------------------
1 | export * as SignaturePad from './primitives/signature-pad'
2 |
--------------------------------------------------------------------------------
/website/src/components/ui/skeleton.tsx:
--------------------------------------------------------------------------------
1 | export { Skeleton, type SkeletonProps } from './primitives/skeleton'
2 |
--------------------------------------------------------------------------------
/website/src/components/ui/splitter.tsx:
--------------------------------------------------------------------------------
1 | export * as Splitter from './primitives/splitter'
2 |
--------------------------------------------------------------------------------
/website/src/components/ui/table.tsx:
--------------------------------------------------------------------------------
1 | export * as Table from './primitives/table'
2 |
--------------------------------------------------------------------------------
/website/src/components/ui/tabs.tsx:
--------------------------------------------------------------------------------
1 | export * as Tabs from './primitives/tabs'
2 |
--------------------------------------------------------------------------------
/website/src/components/ui/tags-input.tsx:
--------------------------------------------------------------------------------
1 | export * as TagsInput from './primitives/tags-input'
2 |
--------------------------------------------------------------------------------
/website/src/components/ui/text.tsx:
--------------------------------------------------------------------------------
1 | export { Text, type TextProps } from './primitives/text'
2 |
--------------------------------------------------------------------------------
/website/src/components/ui/textarea.tsx:
--------------------------------------------------------------------------------
1 | export { Textarea, type TextareaProps } from './primitives/textarea'
2 |
--------------------------------------------------------------------------------
/website/src/components/ui/toast.tsx:
--------------------------------------------------------------------------------
1 | export * as Toast from './primitives/toast'
2 |
--------------------------------------------------------------------------------
/website/src/components/ui/toggle-group.tsx:
--------------------------------------------------------------------------------
1 | export * as ToggleGroup from './primitives/toggle-group'
2 |
--------------------------------------------------------------------------------
/website/src/components/ui/tooltip.tsx:
--------------------------------------------------------------------------------
1 | export * as Tooltip from './primitives/tooltip'
2 |
--------------------------------------------------------------------------------
/website/src/components/ui/tour.tsx:
--------------------------------------------------------------------------------
1 | export { useTour } from '@ark-ui/react/tour'
2 | export * as Tour from './primitives/tour'
3 |
--------------------------------------------------------------------------------
/website/src/content/blog/hello-world.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: 'Design System #1: Avatar component'
3 | description: How to build an avatar component with Ark UI and Panda CSS
4 | date: '2025-05-26'
5 | author: 'Esther Adebayo'
6 | tags: ['react', 'javascript']
7 | ---
8 |
9 | Your blog content goes here...
10 |
--------------------------------------------------------------------------------
/website/src/content/types/react/client-only.types.json:
--------------------------------------------------------------------------------
1 | {
2 | "ClientOnly": {
3 | "props": {
4 | "fallback": {
5 | "type": "string | number | bigint | boolean | ReactElement> | Iterable | ReactPortal | Promise<...>",
6 | "isRequired": false
7 | }
8 | }
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/website/src/content/types/react/download-trigger.types.json:
--------------------------------------------------------------------------------
1 | {}
2 |
--------------------------------------------------------------------------------
/website/src/content/types/react/environment.types.json:
--------------------------------------------------------------------------------
1 | { "EnvironmentProvider": { "props": { "value": { "type": "RootNode | (() => RootNode)", "isRequired": false } } } }
2 |
--------------------------------------------------------------------------------
/website/src/content/types/react/focus-trap.types.json:
--------------------------------------------------------------------------------
1 | {}
2 |
--------------------------------------------------------------------------------
/website/src/content/types/react/frame.types.json:
--------------------------------------------------------------------------------
1 | {}
2 |
--------------------------------------------------------------------------------
/website/src/content/types/react/locale.types.json:
--------------------------------------------------------------------------------
1 | {
2 | "LocaleProvider": {
3 | "props": {
4 | "locale": {
5 | "type": "string",
6 | "defaultValue": "'en-US'",
7 | "isRequired": true,
8 | "description": "The locale to use for the application."
9 | }
10 | }
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/website/src/content/types/react/portal.types.json:
--------------------------------------------------------------------------------
1 | {
2 | "Portal": {
3 | "props": {
4 | "container": { "type": "RefObject", "isRequired": false },
5 | "disabled": { "type": "boolean", "isRequired": false }
6 | }
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/website/src/content/types/solid/client-only.types.json:
--------------------------------------------------------------------------------
1 | {}
2 |
--------------------------------------------------------------------------------
/website/src/content/types/solid/download-trigger.types.json:
--------------------------------------------------------------------------------
1 | {}
2 |
--------------------------------------------------------------------------------
/website/src/content/types/solid/environment.types.json:
--------------------------------------------------------------------------------
1 | { "EnvironmentProvider": { "props": { "value": { "type": "RootNode | (() => RootNode)", "isRequired": false } } } }
2 |
--------------------------------------------------------------------------------
/website/src/content/types/solid/focus-trap.types.json:
--------------------------------------------------------------------------------
1 | {}
2 |
--------------------------------------------------------------------------------
/website/src/content/types/solid/frame.types.json:
--------------------------------------------------------------------------------
1 | {}
2 |
--------------------------------------------------------------------------------
/website/src/content/types/solid/locale.types.json:
--------------------------------------------------------------------------------
1 | {
2 | "LocaleProvider": {
3 | "props": {
4 | "locale": {
5 | "type": "string",
6 | "defaultValue": "'en-US'",
7 | "isRequired": true,
8 | "description": "The locale to use for the application."
9 | }
10 | }
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/website/src/content/types/vue/client-only.types.json:
--------------------------------------------------------------------------------
1 | {}
2 |
--------------------------------------------------------------------------------
/website/src/content/types/vue/download-trigger.types.json:
--------------------------------------------------------------------------------
1 | {}
2 |
--------------------------------------------------------------------------------
/website/src/content/types/vue/environment.types.json:
--------------------------------------------------------------------------------
1 | { "EnvironmentProvider": { "props": { "value": { "type": "RootNode | (() => RootNode)", "isRequired": false } } } }
2 |
--------------------------------------------------------------------------------
/website/src/content/types/vue/focus-trap.types.json:
--------------------------------------------------------------------------------
1 | {}
2 |
--------------------------------------------------------------------------------
/website/src/content/types/vue/frame.types.json:
--------------------------------------------------------------------------------
1 | {}
2 |
--------------------------------------------------------------------------------
/website/src/content/types/vue/locale.types.json:
--------------------------------------------------------------------------------
1 | {
2 | "LocaleProvider": {
3 | "props": {
4 | "locale": {
5 | "type": "string",
6 | "defaultValue": "'en-US'",
7 | "isRequired": true,
8 | "description": "The locale to use for the application."
9 | }
10 | }
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/website/src/content/types/vue/toggle.types.json:
--------------------------------------------------------------------------------
1 | {}
2 |
--------------------------------------------------------------------------------
/website/src/demos/avatar.demo.tsx:
--------------------------------------------------------------------------------
1 | import { Avatar, type AvatarProps } from '~/components/ui/avatar'
2 |
3 | export const Demo = (props: AvatarProps) => {
4 | return
5 | }
6 |
--------------------------------------------------------------------------------
/website/src/demos/checkbox.demo.tsx:
--------------------------------------------------------------------------------
1 | import { Checkbox, type CheckboxProps } from '~/components/ui/checkbox'
2 |
3 | export const Demo = (props: CheckboxProps) => {
4 | return (
5 |
6 | Label
7 |
8 | )
9 | }
10 |
--------------------------------------------------------------------------------
/website/src/demos/number-input.demo.tsx:
--------------------------------------------------------------------------------
1 | import { NumberInput, type NumberInputProps } from '~/components/ui/number-input'
2 |
3 | export const Demo = (props: NumberInputProps) => {
4 | return (
5 |
6 | Label
7 |
8 | )
9 | }
10 |
--------------------------------------------------------------------------------
/website/src/demos/pagination.demo.tsx:
--------------------------------------------------------------------------------
1 | import { Pagination, type PaginationProps } from '~/components/ui/pagination'
2 |
3 | export const Demo = (props: Omit) => {
4 | return
5 | }
6 |
--------------------------------------------------------------------------------
/website/src/demos/pin-input.demo.tsx:
--------------------------------------------------------------------------------
1 | import { PinInput, type PinInputProps } from '~/components/ui/pin-input'
2 |
3 | export const Demo = (props: PinInputProps) => {
4 | return (
5 |
6 | Pin Input
7 |
8 | )
9 | }
10 |
--------------------------------------------------------------------------------
/website/src/demos/rating-group.demo.tsx:
--------------------------------------------------------------------------------
1 | import { RatingGroup, type RatingGroupProps } from '~/components/ui/rating-group'
2 |
3 | export const Demo = (props: RatingGroupProps) => {
4 | return (
5 |
6 | Label
7 |
8 | )
9 | }
10 |
--------------------------------------------------------------------------------
/website/src/demos/switch.demo.tsx:
--------------------------------------------------------------------------------
1 | import { Switch, type SwitchProps } from '~/components/ui/switch'
2 |
3 | export const Demo = (props: SwitchProps) => {
4 | return (
5 |
6 | Label
7 |
8 | )
9 | }
10 |
--------------------------------------------------------------------------------
/website/src/lib/license-key.ts:
--------------------------------------------------------------------------------
1 | export const generateLicenseKey = () =>
2 | (
3 | Math.random()
4 | .toString(36)
5 | .substring(2)
6 | .substring(0, 9)
7 | .match(/.{1,3}/g) ?? []
8 | )
9 | .join('-')
10 | .toUpperCase()
11 |
--------------------------------------------------------------------------------
/website/src/lib/prisma.ts:
--------------------------------------------------------------------------------
1 | import { PrismaClient } from '@prisma/client'
2 |
3 | declare global {
4 | var prisma: PrismaClient | undefined
5 | }
6 |
7 | // biome-ignore lint/suspicious/noRedeclare:
8 | export const prisma = global.prisma || new PrismaClient()
9 |
10 | if (process.env.NODE_ENV !== 'production') global.prisma = prisma
11 |
--------------------------------------------------------------------------------
/website/src/lib/server-context.ts:
--------------------------------------------------------------------------------
1 | import { cache } from 'react'
2 |
3 | export interface ServerContext {
4 | component?: string
5 | }
6 |
7 | export const getServerContext: () => ServerContext = cache(() => ({}))
8 |
--------------------------------------------------------------------------------