├── .changeset
├── README.md
└── config.json
├── .github
├── FUNDING.yml
├── ISSUE_TEMPLATE
│ ├── 1-documentation_change.yml
│ ├── 2-bug_report.yml
│ └── config.yml
├── reproduire
│ └── needs-reproduction.md
└── workflows
│ ├── build-preview.yml
│ ├── ci.yml
│ ├── deploy-preview.yml
│ ├── deploy-prod.yml
│ ├── preview-release.yml
│ ├── release.yml
│ ├── reproduire-close.yml
│ └── reproduire.yml
├── .gitignore
├── .npmrc
├── .nvmrc
├── .prettierignore
├── .prettierrc
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── LICENSE
├── NOTICE.txt
├── README.md
├── TODO.md
├── docs
├── .gitignore
├── .prettierignore
├── LICENSE
├── README.md
├── content
│ ├── child-snippet.md
│ ├── components
│ │ ├── accordion.md
│ │ ├── alert-dialog.md
│ │ ├── aspect-ratio.md
│ │ ├── avatar.md
│ │ ├── button.md
│ │ ├── calendar.md
│ │ ├── checkbox.md
│ │ ├── collapsible.md
│ │ ├── combobox.md
│ │ ├── command.md
│ │ ├── context-menu.md
│ │ ├── date-field.md
│ │ ├── date-picker.md
│ │ ├── date-range-field.md
│ │ ├── date-range-picker.md
│ │ ├── dialog.md
│ │ ├── dropdown-menu.md
│ │ ├── label.md
│ │ ├── link-preview.md
│ │ ├── menubar.md
│ │ ├── meter.md
│ │ ├── navigation-menu.md
│ │ ├── pagination.md
│ │ ├── pin-input.md
│ │ ├── popover.md
│ │ ├── progress.md
│ │ ├── radio-group.md
│ │ ├── range-calendar.md
│ │ ├── rating-group.md
│ │ ├── scroll-area.md
│ │ ├── select.md
│ │ ├── separator.md
│ │ ├── slider.md
│ │ ├── switch.md
│ │ ├── tabs.md
│ │ ├── time-field.md
│ │ ├── time-range-field.md
│ │ ├── toggle-group.md
│ │ ├── toggle.md
│ │ ├── toolbar.md
│ │ └── tooltip.md
│ ├── dates.md
│ ├── figma-file.md
│ ├── getting-started.md
│ ├── introduction.md
│ ├── llms.md
│ ├── migration-guide.md
│ ├── policies
│ │ ├── changelog-conventions.md
│ │ ├── code-of-conduct.md
│ │ └── tracking-bugs-and-feature-requests.md
│ ├── ref.md
│ ├── state-management.md
│ ├── styling.md
│ ├── transitions.md
│ ├── type-helpers
│ │ ├── with-element-ref.md
│ │ ├── without-child.md
│ │ ├── without-children-or-child.md
│ │ └── without-children.md
│ └── utilities
│ │ ├── bits-config.md
│ │ ├── is-using-keyboard.md
│ │ ├── merge-props.md
│ │ ├── portal.md
│ │ └── use-id.md
├── mdsx.config.js
├── other
│ ├── build-demo-files.ts
│ ├── build-llms-txt.ts
│ ├── build-search-data.js
│ ├── code-block-prettier.js
│ └── update-velite-output.js
├── package.json
├── src
│ ├── app.d.ts
│ ├── app.html
│ ├── hooks.server.ts
│ ├── lib
│ │ ├── components
│ │ │ ├── api-ref
│ │ │ │ ├── css-vars-table.svelte
│ │ │ │ ├── data-attr-value-content.svelte
│ │ │ │ ├── data-attrs-table.svelte
│ │ │ │ ├── index.ts
│ │ │ │ ├── prop-copy.svelte
│ │ │ │ ├── prop-type-content.svelte
│ │ │ │ └── props-table.svelte
│ │ │ ├── api-section.svelte
│ │ │ ├── callout.svelte
│ │ │ ├── code-renders
│ │ │ │ └── app-css.svelte
│ │ │ ├── component-preview-v2.svelte
│ │ │ ├── component-preview.svelte
│ │ │ ├── copy-code-button.svelte
│ │ │ ├── demo-code-container.svelte
│ │ │ ├── demo-code-tabs.svelte
│ │ │ ├── demo-container.svelte
│ │ │ ├── demos
│ │ │ │ ├── accordion-demo-checkout-steps.svelte
│ │ │ │ ├── accordion-demo-custom-item.svelte
│ │ │ │ ├── accordion-demo-custom.svelte
│ │ │ │ ├── accordion-demo-horizontal-cards.svelte
│ │ │ │ ├── accordion-demo-multiple.svelte
│ │ │ │ ├── accordion-demo-single.svelte
│ │ │ │ ├── accordion-demo-transitions.svelte
│ │ │ │ ├── accordion-demo.svelte
│ │ │ │ ├── alert-dialog-demo.svelte
│ │ │ │ ├── aspect-ratio-demo.svelte
│ │ │ │ ├── avatar-demo-link-preview.svelte
│ │ │ │ ├── avatar-demo.svelte
│ │ │ │ ├── button-demo.svelte
│ │ │ │ ├── calendar-demo-presets.svelte
│ │ │ │ ├── calendar-demo-selects.svelte
│ │ │ │ ├── calendar-demo.svelte
│ │ │ │ ├── checkbox-demo-custom.svelte
│ │ │ │ ├── checkbox-demo-group.svelte
│ │ │ │ ├── checkbox-demo.svelte
│ │ │ │ ├── collapsible-demo-transitions.svelte
│ │ │ │ ├── collapsible-demo.svelte
│ │ │ │ ├── combobox-demo-auto-scroll-delay.svelte
│ │ │ │ ├── combobox-demo-transition.svelte
│ │ │ │ ├── combobox-demo.svelte
│ │ │ │ ├── command-demo-dialog.svelte
│ │ │ │ ├── command-demo.svelte
│ │ │ │ ├── context-menu-demo-transition.svelte
│ │ │ │ ├── context-menu-demo.svelte
│ │ │ │ ├── date-field-demo-custom.svelte
│ │ │ │ ├── date-field-demo.svelte
│ │ │ │ ├── date-picker-demo.svelte
│ │ │ │ ├── date-range-field-demo.svelte
│ │ │ │ ├── date-range-picker-demo.svelte
│ │ │ │ ├── dialog-demo-custom.svelte
│ │ │ │ ├── dialog-demo-nested.svelte
│ │ │ │ ├── dialog-demo.svelte
│ │ │ │ ├── dropdown-menu-demo-transition.svelte
│ │ │ │ ├── dropdown-menu-demo.svelte
│ │ │ │ ├── index.ts
│ │ │ │ ├── label-demo.svelte
│ │ │ │ ├── link-preview-demo-transition.svelte
│ │ │ │ ├── link-preview-demo.svelte
│ │ │ │ ├── menubar-demo.svelte
│ │ │ │ ├── meter-demo-custom.svelte
│ │ │ │ ├── meter-demo.svelte
│ │ │ │ ├── navigation-menu-demo-force-mount.svelte
│ │ │ │ ├── navigation-menu-demo.svelte
│ │ │ │ ├── navigation-menu-no-hover-demo.svelte
│ │ │ │ ├── navigation-menu-no-viewport-demo.svelte
│ │ │ │ ├── navigation-menu-submenu-demo.svelte
│ │ │ │ ├── navigation-menu-submenu-viewport-demo.svelte
│ │ │ │ ├── pagination-demo.svelte
│ │ │ │ ├── pin-input-demo.svelte
│ │ │ │ ├── popover-demo-transition.svelte
│ │ │ │ ├── popover-demo.svelte
│ │ │ │ ├── portal-demo.svelte
│ │ │ │ ├── progress-demo-custom.svelte
│ │ │ │ ├── progress-demo.svelte
│ │ │ │ ├── radio-group-demo.svelte
│ │ │ │ ├── range-calendar-demo.svelte
│ │ │ │ ├── rating-group-demo-custom.svelte
│ │ │ │ ├── rating-group-demo-half-stars.svelte
│ │ │ │ ├── rating-group-demo-no-hover.svelte
│ │ │ │ ├── rating-group-demo-rtl.svelte
│ │ │ │ ├── rating-group-demo.svelte
│ │ │ │ ├── scroll-area-demo-custom.svelte
│ │ │ │ ├── scroll-area-demo.svelte
│ │ │ │ ├── select-demo-auto-scroll-delay.svelte
│ │ │ │ ├── select-demo-custom-anchor.svelte
│ │ │ │ ├── select-demo-custom.svelte
│ │ │ │ ├── select-demo-multiple.svelte
│ │ │ │ ├── select-demo-transition.svelte
│ │ │ │ ├── select-demo.svelte
│ │ │ │ ├── separator-demo.svelte
│ │ │ │ ├── slider-demo-custom-steps.svelte
│ │ │ │ ├── slider-demo-multiple.svelte
│ │ │ │ ├── slider-demo-thumb-labels.svelte
│ │ │ │ ├── slider-demo-tick-labels.svelte
│ │ │ │ ├── slider-demo-ticks.svelte
│ │ │ │ ├── slider-demo-vertical.svelte
│ │ │ │ ├── slider-demo.svelte
│ │ │ │ ├── switch-demo-custom.svelte
│ │ │ │ ├── switch-demo.svelte
│ │ │ │ ├── tabs-demo.svelte
│ │ │ │ ├── time-field-demo-custom.svelte
│ │ │ │ ├── time-field-demo.svelte
│ │ │ │ ├── time-range-field-demo.svelte
│ │ │ │ ├── toggle-demo.svelte
│ │ │ │ ├── toggle-group-demo.svelte
│ │ │ │ ├── toolbar-demo.svelte
│ │ │ │ ├── tooltip-demo-custom-anchor.svelte
│ │ │ │ ├── tooltip-demo-custom.svelte
│ │ │ │ ├── tooltip-demo-delay-duration.svelte
│ │ │ │ ├── tooltip-demo-group.svelte
│ │ │ │ ├── tooltip-demo-transition.svelte
│ │ │ │ └── tooltip-demo.svelte
│ │ │ ├── doc-page-header.svelte
│ │ │ ├── doc-page.svelte
│ │ │ ├── examples
│ │ │ │ └── command
│ │ │ │ │ ├── command-wrapper.svelte
│ │ │ │ │ ├── framer
│ │ │ │ │ ├── framer-command.svelte
│ │ │ │ │ ├── framer.css
│ │ │ │ │ └── icons
│ │ │ │ │ │ ├── avatar.svelte
│ │ │ │ │ │ ├── badge.svelte
│ │ │ │ │ │ ├── button.svelte
│ │ │ │ │ │ ├── container.svelte
│ │ │ │ │ │ ├── index.ts
│ │ │ │ │ │ ├── input.svelte
│ │ │ │ │ │ ├── radio.svelte
│ │ │ │ │ │ ├── search.svelte
│ │ │ │ │ │ └── slider.svelte
│ │ │ │ │ ├── icons
│ │ │ │ │ ├── copied.svelte
│ │ │ │ │ ├── copy.svelte
│ │ │ │ │ ├── figma.svelte
│ │ │ │ │ ├── framer.svelte
│ │ │ │ │ ├── github.svelte
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── linear.svelte
│ │ │ │ │ ├── raycast.svelte
│ │ │ │ │ ├── slack.svelte
│ │ │ │ │ ├── vercel.svelte
│ │ │ │ │ └── youtube.svelte
│ │ │ │ │ ├── linear
│ │ │ │ │ ├── icons
│ │ │ │ │ │ ├── assign-to-me.svelte
│ │ │ │ │ │ ├── assign-to.svelte
│ │ │ │ │ │ ├── change-labels.svelte
│ │ │ │ │ │ ├── change-priority.svelte
│ │ │ │ │ │ ├── change-status.svelte
│ │ │ │ │ │ ├── index.ts
│ │ │ │ │ │ ├── remove-label.svelte
│ │ │ │ │ │ └── set-due-date.svelte
│ │ │ │ │ ├── linear-command.svelte
│ │ │ │ │ └── linear.css
│ │ │ │ │ ├── logo.svelte
│ │ │ │ │ ├── raycast
│ │ │ │ │ ├── icons
│ │ │ │ │ │ ├── clipboard.svelte
│ │ │ │ │ │ ├── finder.svelte
│ │ │ │ │ │ ├── hammer.svelte
│ │ │ │ │ │ ├── index.ts
│ │ │ │ │ │ ├── raycast-dark.svelte
│ │ │ │ │ │ ├── raycast-light.svelte
│ │ │ │ │ │ ├── star.svelte
│ │ │ │ │ │ └── window.svelte
│ │ │ │ │ ├── item.svelte
│ │ │ │ │ ├── raycast-command.svelte
│ │ │ │ │ ├── raycast.css
│ │ │ │ │ ├── sub-command.svelte
│ │ │ │ │ └── sub-item.svelte
│ │ │ │ │ ├── theme-switcher.svelte
│ │ │ │ │ └── vercel
│ │ │ │ │ ├── home.svelte
│ │ │ │ │ ├── icons
│ │ │ │ │ ├── contact.svelte
│ │ │ │ │ ├── docs.svelte
│ │ │ │ │ ├── feedback.svelte
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── plus.svelte
│ │ │ │ │ ├── projects.svelte
│ │ │ │ │ └── teams.svelte
│ │ │ │ │ ├── item.svelte
│ │ │ │ │ ├── projects.svelte
│ │ │ │ │ ├── vercel-command.svelte
│ │ │ │ │ └── vercel.css
│ │ │ ├── homepage
│ │ │ │ ├── card-air.svelte
│ │ │ │ ├── card-sound.svelte
│ │ │ │ ├── card-timer.svelte
│ │ │ │ ├── card-toggle.svelte
│ │ │ │ ├── home-select.svelte
│ │ │ │ ├── home-slider.svelte
│ │ │ │ ├── home-switch.svelte
│ │ │ │ ├── home-toolbar.svelte
│ │ │ │ ├── svg-accessible-dark.svelte
│ │ │ │ ├── svg-accessible.svelte
│ │ │ │ ├── svg-consistent.svelte
│ │ │ │ └── svg-customizable.svelte
│ │ │ ├── icons
│ │ │ │ ├── github.svelte
│ │ │ │ ├── index.ts
│ │ │ │ ├── logo.svelte
│ │ │ │ ├── stackblitz.svelte
│ │ │ │ ├── switch-off.svelte
│ │ │ │ ├── switch-on.svelte
│ │ │ │ └── x-com.svelte
│ │ │ ├── index.ts
│ │ │ ├── light-switch.svelte
│ │ │ ├── markdown
│ │ │ │ ├── a.svelte
│ │ │ │ ├── blockquote.svelte
│ │ │ │ ├── blueprint.svelte
│ │ │ │ ├── code.svelte
│ │ │ │ ├── h1.svelte
│ │ │ │ ├── h2.svelte
│ │ │ │ ├── h3.svelte
│ │ │ │ ├── h4.svelte
│ │ │ │ ├── h5.svelte
│ │ │ │ ├── h6.svelte
│ │ │ │ ├── hr.svelte
│ │ │ │ ├── img.svelte
│ │ │ │ ├── index.ts
│ │ │ │ ├── li.svelte
│ │ │ │ ├── ol.svelte
│ │ │ │ ├── p.svelte
│ │ │ │ ├── pre.svelte
│ │ │ │ ├── table.svelte
│ │ │ │ ├── td.svelte
│ │ │ │ ├── th.svelte
│ │ │ │ ├── tr.svelte
│ │ │ │ └── ul.svelte
│ │ │ ├── metadata.svelte
│ │ │ ├── navigation
│ │ │ │ ├── index.ts
│ │ │ │ ├── mobile-link.svelte
│ │ │ │ ├── mobile-nav.svelte
│ │ │ │ ├── sidebar-nav-items.svelte
│ │ │ │ ├── sidebar-nav-main-items.svelte
│ │ │ │ └── sidebar-nav.svelte
│ │ │ ├── open-in-stackblitz.svelte
│ │ │ ├── page-header
│ │ │ │ ├── index.ts
│ │ │ │ ├── page-header-description.svelte
│ │ │ │ ├── page-header-heading.svelte
│ │ │ │ └── page-header.svelte
│ │ │ ├── preview-switch.svelte
│ │ │ ├── search.svelte
│ │ │ ├── sidebar-sponsor.svelte
│ │ │ ├── site-header.svelte
│ │ │ ├── stackblitz-demo-layout.svelte
│ │ │ ├── steps.svelte
│ │ │ ├── tailwind-indicator.svelte
│ │ │ ├── toc
│ │ │ │ ├── toc-tree.svelte
│ │ │ │ └── toc.svelte
│ │ │ └── ui
│ │ │ │ ├── alert
│ │ │ │ ├── alert-description.svelte
│ │ │ │ ├── alert-title.svelte
│ │ │ │ ├── alert.svelte
│ │ │ │ └── index.ts
│ │ │ │ ├── badge.svelte
│ │ │ │ ├── button
│ │ │ │ ├── button.svelte
│ │ │ │ └── index.ts
│ │ │ │ ├── sheet
│ │ │ │ ├── index.ts
│ │ │ │ ├── sheet-content.svelte
│ │ │ │ ├── sheet-description.svelte
│ │ │ │ ├── sheet-footer.svelte
│ │ │ │ ├── sheet-header.svelte
│ │ │ │ ├── sheet-overlay.svelte
│ │ │ │ └── sheet-title.svelte
│ │ │ │ └── table
│ │ │ │ ├── index.ts
│ │ │ │ ├── table-body.svelte
│ │ │ │ ├── table-caption.svelte
│ │ │ │ ├── table-cell.svelte
│ │ │ │ ├── table-footer.svelte
│ │ │ │ ├── table-head.svelte
│ │ │ │ ├── table-header.svelte
│ │ │ │ ├── table-row.svelte
│ │ │ │ └── table.svelte
│ │ ├── config
│ │ │ ├── index.ts
│ │ │ ├── navigation.ts
│ │ │ └── site.ts
│ │ ├── content
│ │ │ ├── api-reference
│ │ │ │ ├── accordion.api.ts
│ │ │ │ ├── alert-dialog.api.ts
│ │ │ │ ├── aspect-ratio.api.ts
│ │ │ │ ├── avatar.api.ts
│ │ │ │ ├── bits-config.api.ts
│ │ │ │ ├── button.api.ts
│ │ │ │ ├── calendar.api.ts
│ │ │ │ ├── checkbox.api.ts
│ │ │ │ ├── collapsible.api.ts
│ │ │ │ ├── combobox.api.ts
│ │ │ │ ├── command.api.ts
│ │ │ │ ├── context-menu.api.ts
│ │ │ │ ├── date-field.api.ts
│ │ │ │ ├── date-picker.api.ts
│ │ │ │ ├── date-range-field.api.ts
│ │ │ │ ├── date-range-picker.api.ts
│ │ │ │ ├── dialog.api.ts
│ │ │ │ ├── dropdown-menu.api.ts
│ │ │ │ ├── extended-types
│ │ │ │ │ ├── accordion
│ │ │ │ │ │ ├── content-child-snippet-props.md
│ │ │ │ │ │ ├── content-children-snippet-props.md
│ │ │ │ │ │ └── index.ts
│ │ │ │ │ ├── avatar
│ │ │ │ │ │ ├── index.ts
│ │ │ │ │ │ ├── loading-status-prop.md
│ │ │ │ │ │ └── on-loading-status-change-prop.md
│ │ │ │ │ ├── checkbox
│ │ │ │ │ │ ├── checkbox-group-on-value-change-prop.md
│ │ │ │ │ │ ├── checkbox-root-child-snippet-props.md
│ │ │ │ │ │ ├── checkbox-root-children-snippet-props.md
│ │ │ │ │ │ ├── checkbox-root-on-checked-change-prop.md
│ │ │ │ │ │ ├── checkbox-root-on-indeterminate-change.md
│ │ │ │ │ │ ├── checkbox-root-state-data-attr.md
│ │ │ │ │ │ └── index.ts
│ │ │ │ │ ├── collapsible
│ │ │ │ │ │ ├── content-child-snippet-props.md
│ │ │ │ │ │ ├── content-children-snippet-props.md
│ │ │ │ │ │ └── index.ts
│ │ │ │ │ ├── combobox
│ │ │ │ │ │ ├── index.ts
│ │ │ │ │ │ └── scroll-alignment-prop.md
│ │ │ │ │ ├── command
│ │ │ │ │ │ ├── command-filter-prop.md
│ │ │ │ │ │ ├── command-on-state-change-prop.md
│ │ │ │ │ │ └── index.ts
│ │ │ │ │ ├── date-field
│ │ │ │ │ │ ├── date-field-editable-segment-part.md
│ │ │ │ │ │ ├── date-field-segment-part.md
│ │ │ │ │ │ └── index.ts
│ │ │ │ │ ├── date-range-field
│ │ │ │ │ │ ├── date-range-field-input-type-prop.md
│ │ │ │ │ │ └── index.ts
│ │ │ │ │ ├── dialog
│ │ │ │ │ │ ├── dialog-content-child-snippet-props.md
│ │ │ │ │ │ ├── dialog-overlay-child-snippet-props.md
│ │ │ │ │ │ └── index.ts
│ │ │ │ │ ├── floating
│ │ │ │ │ │ ├── align-prop.md
│ │ │ │ │ │ ├── collision-boundary-prop.md
│ │ │ │ │ │ ├── collision-padding-prop.md
│ │ │ │ │ │ ├── custom-anchor-prop.md
│ │ │ │ │ │ ├── floating-content-child-snippet-props.md
│ │ │ │ │ │ ├── index.ts
│ │ │ │ │ │ ├── side-prop.md
│ │ │ │ │ │ ├── sticky-prop.md
│ │ │ │ │ │ ├── strategy-prop.md
│ │ │ │ │ │ └── update-position-strategy-prop.md
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── menu
│ │ │ │ │ │ ├── index.ts
│ │ │ │ │ │ └── menu-checked-state-attr.md
│ │ │ │ │ ├── pagination
│ │ │ │ │ │ ├── index.ts
│ │ │ │ │ │ ├── pagination-child-snippet-props.md
│ │ │ │ │ │ ├── pagination-children-snippet-props.md
│ │ │ │ │ │ ├── pagination-on-page-change-prop.md
│ │ │ │ │ │ └── pagination-page-item-prop.md
│ │ │ │ │ ├── pin-input
│ │ │ │ │ │ ├── index.ts
│ │ │ │ │ │ ├── pin-input-cell-cell-prop.md
│ │ │ │ │ │ ├── pin-input-root-child-snippet-props.md
│ │ │ │ │ │ ├── pin-input-root-children-snippet-props.md
│ │ │ │ │ │ ├── pin-input-root-on-complete-prop.md
│ │ │ │ │ │ ├── pin-input-root-paste-transformer.md
│ │ │ │ │ │ ├── pin-input-root-push-password-manager-strategy.md
│ │ │ │ │ │ └── pin-input-root-text-align-prop.md
│ │ │ │ │ ├── portal
│ │ │ │ │ │ ├── index.ts
│ │ │ │ │ │ └── to-prop.md
│ │ │ │ │ ├── progress
│ │ │ │ │ │ ├── index.ts
│ │ │ │ │ │ └── progress-state-attr.md
│ │ │ │ │ ├── radio-group
│ │ │ │ │ │ ├── index.ts
│ │ │ │ │ │ └── radio-group-state-attr.md
│ │ │ │ │ ├── rating-group
│ │ │ │ │ │ ├── index.ts
│ │ │ │ │ │ ├── rating-group-aria-textvalue-prop.md
│ │ │ │ │ │ ├── rating-group-item-child-snippet-props.md
│ │ │ │ │ │ ├── rating-group-item-children-snippet-props.md
│ │ │ │ │ │ ├── rating-group-item-state.md
│ │ │ │ │ │ ├── rating-group-root-child-snippet-props.md
│ │ │ │ │ │ └── rating-group-root-children-snippet-props.md
│ │ │ │ │ ├── scroll-area
│ │ │ │ │ │ ├── index.ts
│ │ │ │ │ │ ├── scroll-area-type-prop.md
│ │ │ │ │ │ └── visible-hidden-prop.md
│ │ │ │ │ ├── select
│ │ │ │ │ │ ├── delay-prop.md
│ │ │ │ │ │ ├── index.ts
│ │ │ │ │ │ └── items-prop.md
│ │ │ │ │ ├── shared
│ │ │ │ │ │ ├── calendar-on-value-change-prop.md
│ │ │ │ │ │ ├── calendar-value-prop.md
│ │ │ │ │ │ ├── child-default-snippet-props.md
│ │ │ │ │ │ ├── date-field-input-child-snippet-props.md
│ │ │ │ │ │ ├── date-field-input-children-snippet-props.md
│ │ │ │ │ │ ├── date-field-segment-data-attr.md
│ │ │ │ │ │ ├── date-matcher-prop.md
│ │ │ │ │ │ ├── date-on-invalid-prop.md
│ │ │ │ │ │ ├── date-on-range-change-prop.md
│ │ │ │ │ │ ├── date-range-prop.md
│ │ │ │ │ │ ├── date-range-validate-prop.md
│ │ │ │ │ │ ├── date-validate-prop.md
│ │ │ │ │ │ ├── date-value-prop.md
│ │ │ │ │ │ ├── dir-prop.md
│ │ │ │ │ │ ├── escape-keydown-behavior-prop.md
│ │ │ │ │ │ ├── granularity-prop.md
│ │ │ │ │ │ ├── header-level-prop.md
│ │ │ │ │ │ ├── hour-cycle-prop.md
│ │ │ │ │ │ ├── index.ts
│ │ │ │ │ │ ├── interact-outside-behavior-prop.md
│ │ │ │ │ │ ├── month-prop.md
│ │ │ │ │ │ ├── noop-prop.md
│ │ │ │ │ │ ├── number-or-array-number-prop.md
│ │ │ │ │ │ ├── on-auto-focus-prop.md
│ │ │ │ │ │ ├── on-change-string-or-array-prop.md
│ │ │ │ │ │ ├── on-date-value-change-prop.md
│ │ │ │ │ │ ├── on-escape-keydown-prop.md
│ │ │ │ │ │ ├── on-focus-outside-prop.md
│ │ │ │ │ │ ├── on-interact-outside-prop.md
│ │ │ │ │ │ ├── on-number-value-change-prop.md
│ │ │ │ │ │ ├── on-open-change-prop.md
│ │ │ │ │ │ ├── on-placeholder-change-prop.md
│ │ │ │ │ │ ├── on-start-end-value-change-prop.md
│ │ │ │ │ │ ├── on-string-value-change-prop.md
│ │ │ │ │ │ ├── on-time-placeholder-change-prop.md
│ │ │ │ │ │ ├── on-time-start-end-value-change-prop.md
│ │ │ │ │ │ ├── on-time-value-change-prop.md
│ │ │ │ │ │ ├── open-child-snippet-props.md
│ │ │ │ │ │ ├── open-children-snippet-props.md
│ │ │ │ │ │ ├── open-closed-prop.md
│ │ │ │ │ │ ├── orientation-prop.md
│ │ │ │ │ │ ├── radio-item-child-snippet-props.md
│ │ │ │ │ │ ├── radio-item-children-snippet-props.md
│ │ │ │ │ │ ├── segment-part-prop.md
│ │ │ │ │ │ ├── single-or-multiple-prop.md
│ │ │ │ │ │ ├── slider-thumb-positioning-prop.md
│ │ │ │ │ │ ├── string-or-array-string-prop.md
│ │ │ │ │ │ ├── time-field-input-child-snippet-props.md
│ │ │ │ │ │ ├── time-field-input-children-snippet-props.md
│ │ │ │ │ │ ├── time-field-segment-data-attr.md
│ │ │ │ │ │ ├── time-granularity-prop.md
│ │ │ │ │ │ ├── time-on-invalid-prop.md
│ │ │ │ │ │ ├── time-on-range-change-prop.md
│ │ │ │ │ │ ├── time-range-prop.md
│ │ │ │ │ │ ├── time-segment-part-prop.md
│ │ │ │ │ │ ├── time-validate-prop.md
│ │ │ │ │ │ ├── time-value-prop.md
│ │ │ │ │ │ └── weekday-format-prop.md
│ │ │ │ │ ├── slider
│ │ │ │ │ │ ├── index.ts
│ │ │ │ │ │ ├── slider-root-child-snippet-props.md
│ │ │ │ │ │ ├── slider-root-children-snippet-props.md
│ │ │ │ │ │ ├── slider-root-on-value-change.md
│ │ │ │ │ │ └── slider-tick-label-position-prop.md
│ │ │ │ │ ├── switch
│ │ │ │ │ │ ├── index.ts
│ │ │ │ │ │ ├── switch-checked-data-attr.md
│ │ │ │ │ │ ├── switch-root-child-snippet-props.md
│ │ │ │ │ │ ├── switch-root-children-snippet-props.md
│ │ │ │ │ │ └── switch-root-on-checked-change.md
│ │ │ │ │ ├── tabs
│ │ │ │ │ │ ├── index.ts
│ │ │ │ │ │ ├── tabs-root-activation-mode.md
│ │ │ │ │ │ └── tabs-trigger-state.md
│ │ │ │ │ ├── time-field
│ │ │ │ │ │ ├── index.ts
│ │ │ │ │ │ └── time-field-editable-segment-part-part.md
│ │ │ │ │ ├── toggle
│ │ │ │ │ │ ├── index.ts
│ │ │ │ │ │ ├── toggle-root-on-pressed-change-prop.md
│ │ │ │ │ │ └── toggle-root-state-data-attr.md
│ │ │ │ │ └── tooltip
│ │ │ │ │ │ ├── index.ts
│ │ │ │ │ │ └── tooltip-state-data-attr.md
│ │ │ │ ├── helpers.ts
│ │ │ │ ├── index.ts
│ │ │ │ ├── label.api.ts
│ │ │ │ ├── link-preview.api.ts
│ │ │ │ ├── menu.api.ts
│ │ │ │ ├── menubar.api.ts
│ │ │ │ ├── meter.api.ts
│ │ │ │ ├── navigation-menu.api.ts
│ │ │ │ ├── pagination.api.ts
│ │ │ │ ├── pin-input.api.ts
│ │ │ │ ├── popover.api.ts
│ │ │ │ ├── portal.api.ts
│ │ │ │ ├── progress.api.ts
│ │ │ │ ├── radio-group.api.ts
│ │ │ │ ├── range-calendar.api.ts
│ │ │ │ ├── rating-group.api.ts
│ │ │ │ ├── scroll-area.api.ts
│ │ │ │ ├── select.api.ts
│ │ │ │ ├── separator.api.ts
│ │ │ │ ├── slider.api.ts
│ │ │ │ ├── switch.api.ts
│ │ │ │ ├── tabs.api.ts
│ │ │ │ ├── time-field.api.ts
│ │ │ │ ├── time-range-field.api.ts
│ │ │ │ ├── toggle-group.api.ts
│ │ │ │ ├── toggle.api.ts
│ │ │ │ ├── toolbar.api.ts
│ │ │ │ └── tooltip.api.ts
│ │ │ ├── constants.ts
│ │ │ └── index.ts
│ │ ├── scripts
│ │ │ └── build-search.ts
│ │ ├── styles
│ │ │ ├── app.css
│ │ │ ├── buttonVariants.ts
│ │ │ ├── command
│ │ │ │ ├── command.css
│ │ │ │ ├── globals.css
│ │ │ │ └── icons.css
│ │ │ ├── markdown.css
│ │ │ └── themes
│ │ │ │ ├── custom-dark.json
│ │ │ │ ├── custom-light.json
│ │ │ │ ├── serendipity-midnight.json
│ │ │ │ ├── serendipity-morning.json
│ │ │ │ ├── tokyo-night-light.json
│ │ │ │ └── tokyo-night-storm.json
│ │ ├── types
│ │ │ ├── api.ts
│ │ │ └── index.ts
│ │ └── utils
│ │ │ ├── copy-to-clipboard.svelte.ts
│ │ │ ├── docs.ts
│ │ │ ├── index.ts
│ │ │ ├── markdown.ts
│ │ │ ├── omit.ts
│ │ │ ├── open-in-stackblitz.ts
│ │ │ ├── search.ts
│ │ │ ├── styles.ts
│ │ │ ├── use-site-config.svelte.ts
│ │ │ └── use-toc.svelte.ts
│ └── routes
│ │ ├── (docs)
│ │ ├── +error.svelte
│ │ ├── +layout.svelte
│ │ ├── docs
│ │ │ ├── +page.ts
│ │ │ ├── [...slug]
│ │ │ │ ├── +page.svelte
│ │ │ │ └── +page.ts
│ │ │ ├── components
│ │ │ │ └── [name]
│ │ │ │ │ ├── +page.svelte
│ │ │ │ │ └── +page.ts
│ │ │ └── utilities
│ │ │ │ └── [name]
│ │ │ │ ├── +page.svelte
│ │ │ │ └── +page.ts
│ │ └── sink
│ │ │ ├── +page.svelte
│ │ │ ├── combobox.svelte
│ │ │ └── range-cal.svelte
│ │ ├── (examples)
│ │ └── examples
│ │ │ └── command
│ │ │ ├── +layout.svelte
│ │ │ ├── +page.svelte
│ │ │ └── sink
│ │ │ └── +page.svelte
│ │ ├── +layout.svelte
│ │ ├── +page.svelte
│ │ ├── +page.ts
│ │ ├── api
│ │ ├── demos.json
│ │ │ └── +server.ts
│ │ └── search.json
│ │ │ ├── +server.ts
│ │ │ └── search.json
│ │ ├── repro
│ │ └── +page.ts
│ │ └── stackblitz
│ │ └── +page.svelte
├── static
│ ├── CalSans-SemiBold.woff2
│ ├── abstract.png
│ ├── avatar-1.png
│ ├── favicon-dark.svg
│ ├── favicon-light.svg
│ ├── favicon.png
│ ├── img
│ │ ├── bring-own-style.png
│ │ ├── developer-exp.png
│ │ └── learn.png
│ ├── logo.svg
│ ├── logo
│ │ ├── bits-black.svg
│ │ ├── bits-color-dark-mode.svg
│ │ ├── bits-color-light-mode.svg
│ │ ├── bits-gradient-dark-mode.svg
│ │ ├── bits-gradient-light-mode.svg
│ │ └── bits-white.svg
│ └── og.png
├── svelte.config.js
├── tsconfig.json
├── velite.config.js
├── vite.config.ts
└── wrangler.jsonc
├── eslint.config.js
├── package.json
├── packages
└── bits-ui
│ ├── .gitignore
│ ├── .prettierignore
│ ├── CHANGELOG.md
│ ├── LICENSE
│ ├── README.md
│ ├── package.json
│ ├── src
│ ├── app.html
│ └── lib
│ │ ├── app.d.ts
│ │ ├── bits
│ │ ├── accordion
│ │ │ ├── accordion.svelte.ts
│ │ │ ├── components
│ │ │ │ ├── accordion-content.svelte
│ │ │ │ ├── accordion-header.svelte
│ │ │ │ ├── accordion-item.svelte
│ │ │ │ ├── accordion-trigger.svelte
│ │ │ │ └── accordion.svelte
│ │ │ ├── exports.ts
│ │ │ ├── index.ts
│ │ │ └── types.ts
│ │ ├── alert-dialog
│ │ │ ├── components
│ │ │ │ ├── alert-dialog-action.svelte
│ │ │ │ ├── alert-dialog-cancel.svelte
│ │ │ │ ├── alert-dialog-content.svelte
│ │ │ │ └── alert-dialog.svelte
│ │ │ ├── exports.ts
│ │ │ ├── index.ts
│ │ │ └── types.ts
│ │ ├── aspect-ratio
│ │ │ ├── aspect-ratio.svelte.ts
│ │ │ ├── components
│ │ │ │ └── aspect-ratio.svelte
│ │ │ ├── exports.ts
│ │ │ ├── index.ts
│ │ │ └── types.ts
│ │ ├── avatar
│ │ │ ├── avatar.svelte.ts
│ │ │ ├── components
│ │ │ │ ├── avatar-fallback.svelte
│ │ │ │ ├── avatar-image.svelte
│ │ │ │ └── avatar.svelte
│ │ │ ├── exports.ts
│ │ │ ├── index.ts
│ │ │ └── types.ts
│ │ ├── button
│ │ │ ├── components
│ │ │ │ └── button.svelte
│ │ │ ├── exports.ts
│ │ │ ├── index.ts
│ │ │ └── types.ts
│ │ ├── calendar
│ │ │ ├── calendar.svelte.ts
│ │ │ ├── components
│ │ │ │ ├── calendar-cell.svelte
│ │ │ │ ├── calendar-day.svelte
│ │ │ │ ├── calendar-grid-body.svelte
│ │ │ │ ├── calendar-grid-head.svelte
│ │ │ │ ├── calendar-grid-row.svelte
│ │ │ │ ├── calendar-grid.svelte
│ │ │ │ ├── calendar-head-cell.svelte
│ │ │ │ ├── calendar-header.svelte
│ │ │ │ ├── calendar-heading.svelte
│ │ │ │ ├── calendar-next-button.svelte
│ │ │ │ ├── calendar-prev-button.svelte
│ │ │ │ └── calendar.svelte
│ │ │ ├── exports.ts
│ │ │ ├── index.ts
│ │ │ └── types.ts
│ │ ├── checkbox
│ │ │ ├── checkbox.svelte.ts
│ │ │ ├── components
│ │ │ │ ├── checkbox-group-label.svelte
│ │ │ │ ├── checkbox-group.svelte
│ │ │ │ ├── checkbox-input.svelte
│ │ │ │ └── checkbox.svelte
│ │ │ ├── exports.ts
│ │ │ ├── index.ts
│ │ │ └── types.ts
│ │ ├── collapsible
│ │ │ ├── collapsible.svelte.ts
│ │ │ ├── components
│ │ │ │ ├── collapsible-content.svelte
│ │ │ │ ├── collapsible-trigger.svelte
│ │ │ │ └── collapsible.svelte
│ │ │ ├── exports.ts
│ │ │ ├── index.ts
│ │ │ └── types.ts
│ │ ├── combobox
│ │ │ ├── components
│ │ │ │ ├── combobox-input.svelte
│ │ │ │ ├── combobox-trigger.svelte
│ │ │ │ └── combobox.svelte
│ │ │ ├── exports.ts
│ │ │ ├── index.ts
│ │ │ └── types.ts
│ │ ├── command
│ │ │ ├── command.svelte.ts
│ │ │ ├── components
│ │ │ │ ├── _command-label.svelte
│ │ │ │ ├── command-empty.svelte
│ │ │ │ ├── command-group-heading.svelte
│ │ │ │ ├── command-group-items.svelte
│ │ │ │ ├── command-group.svelte
│ │ │ │ ├── command-input.svelte
│ │ │ │ ├── command-item.svelte
│ │ │ │ ├── command-link-item.svelte
│ │ │ │ ├── command-list.svelte
│ │ │ │ ├── command-loading.svelte
│ │ │ │ ├── command-separator.svelte
│ │ │ │ ├── command-viewport.svelte
│ │ │ │ └── command.svelte
│ │ │ ├── compute-command-score.ts
│ │ │ ├── exports.ts
│ │ │ ├── index.ts
│ │ │ ├── types.ts
│ │ │ └── utils.ts
│ │ ├── context-menu
│ │ │ ├── components
│ │ │ │ ├── context-menu-content-static.svelte
│ │ │ │ ├── context-menu-content.svelte
│ │ │ │ ├── context-menu-trigger.svelte
│ │ │ │ └── context-menu.svelte
│ │ │ ├── exports.ts
│ │ │ ├── index.ts
│ │ │ └── types.ts
│ │ ├── date-field
│ │ │ ├── components
│ │ │ │ ├── date-field-hidden-input.svelte
│ │ │ │ ├── date-field-input.svelte
│ │ │ │ ├── date-field-label.svelte
│ │ │ │ ├── date-field-segment.svelte
│ │ │ │ └── date-field.svelte
│ │ │ ├── date-field.svelte.ts
│ │ │ ├── exports.ts
│ │ │ ├── index.ts
│ │ │ └── types.ts
│ │ ├── date-picker
│ │ │ ├── components
│ │ │ │ ├── date-picker-calendar.svelte
│ │ │ │ ├── date-picker-content-static.svelte
│ │ │ │ ├── date-picker-content.svelte
│ │ │ │ ├── date-picker-trigger.svelte
│ │ │ │ └── date-picker.svelte
│ │ │ ├── date-picker.svelte.ts
│ │ │ ├── exports.ts
│ │ │ ├── index.ts
│ │ │ └── types.ts
│ │ ├── date-range-field
│ │ │ ├── components
│ │ │ │ ├── date-range-field-input.svelte
│ │ │ │ ├── date-range-field-label.svelte
│ │ │ │ └── date-range-field.svelte
│ │ │ ├── date-range-field.svelte.ts
│ │ │ ├── exports.ts
│ │ │ ├── index.ts
│ │ │ └── types.ts
│ │ ├── date-range-picker
│ │ │ ├── components
│ │ │ │ ├── date-range-picker-calendar.svelte
│ │ │ │ ├── date-range-picker-trigger.svelte
│ │ │ │ └── date-range-picker.svelte
│ │ │ ├── date-range-picker.svelte.ts
│ │ │ ├── exports.ts
│ │ │ ├── index.ts
│ │ │ └── types.ts
│ │ ├── dialog
│ │ │ ├── components
│ │ │ │ ├── dialog-close.svelte
│ │ │ │ ├── dialog-content.svelte
│ │ │ │ ├── dialog-description.svelte
│ │ │ │ ├── dialog-overlay.svelte
│ │ │ │ ├── dialog-title.svelte
│ │ │ │ ├── dialog-trigger.svelte
│ │ │ │ └── dialog.svelte
│ │ │ ├── dialog.svelte.ts
│ │ │ ├── exports.ts
│ │ │ ├── index.ts
│ │ │ └── types.ts
│ │ ├── dropdown-menu
│ │ │ ├── components
│ │ │ │ ├── dropdown-menu-content-static.svelte
│ │ │ │ └── dropdown-menu-content.svelte
│ │ │ ├── exports.ts
│ │ │ ├── index.ts
│ │ │ └── types.ts
│ │ ├── index.ts
│ │ ├── label
│ │ │ ├── components
│ │ │ │ └── label.svelte
│ │ │ ├── exports.ts
│ │ │ ├── index.ts
│ │ │ ├── label.svelte.ts
│ │ │ └── types.ts
│ │ ├── link-preview
│ │ │ ├── components
│ │ │ │ ├── link-preview-content-static.svelte
│ │ │ │ ├── link-preview-content.svelte
│ │ │ │ ├── link-preview-trigger.svelte
│ │ │ │ └── link-preview.svelte
│ │ │ ├── exports.ts
│ │ │ ├── index.ts
│ │ │ ├── link-preview.svelte.ts
│ │ │ └── types.ts
│ │ ├── menu
│ │ │ ├── components
│ │ │ │ ├── menu-arrow.svelte
│ │ │ │ ├── menu-checkbox-group.svelte
│ │ │ │ ├── menu-checkbox-item.svelte
│ │ │ │ ├── menu-content-static.svelte
│ │ │ │ ├── menu-content.svelte
│ │ │ │ ├── menu-group-heading.svelte
│ │ │ │ ├── menu-group.svelte
│ │ │ │ ├── menu-item.svelte
│ │ │ │ ├── menu-radio-group.svelte
│ │ │ │ ├── menu-radio-item.svelte
│ │ │ │ ├── menu-separator.svelte
│ │ │ │ ├── menu-sub-content-static.svelte
│ │ │ │ ├── menu-sub-content.svelte
│ │ │ │ ├── menu-sub-trigger.svelte
│ │ │ │ ├── menu-sub.svelte
│ │ │ │ ├── menu-trigger.svelte
│ │ │ │ └── menu.svelte
│ │ │ ├── exports.ts
│ │ │ ├── menu.svelte.ts
│ │ │ ├── types.ts
│ │ │ └── utils.ts
│ │ ├── menubar
│ │ │ ├── components
│ │ │ │ ├── menubar-content-static.svelte
│ │ │ │ ├── menubar-content.svelte
│ │ │ │ ├── menubar-menu.svelte
│ │ │ │ ├── menubar-trigger.svelte
│ │ │ │ └── menubar.svelte
│ │ │ ├── exports.ts
│ │ │ ├── index.ts
│ │ │ ├── menubar.svelte.ts
│ │ │ └── types.ts
│ │ ├── meter
│ │ │ ├── components
│ │ │ │ └── meter.svelte
│ │ │ ├── exports.ts
│ │ │ ├── index.ts
│ │ │ ├── meter.svelte.ts
│ │ │ └── types.ts
│ │ ├── navigation-menu
│ │ │ ├── components
│ │ │ │ ├── navigation-menu-content-impl.svelte
│ │ │ │ ├── navigation-menu-content.svelte
│ │ │ │ ├── navigation-menu-indicator-impl.svelte
│ │ │ │ ├── navigation-menu-indicator.svelte
│ │ │ │ ├── navigation-menu-item.svelte
│ │ │ │ ├── navigation-menu-link.svelte
│ │ │ │ ├── navigation-menu-list.svelte
│ │ │ │ ├── navigation-menu-sub.svelte
│ │ │ │ ├── navigation-menu-trigger.svelte
│ │ │ │ ├── navigation-menu-viewport.svelte
│ │ │ │ └── navigation-menu.svelte
│ │ │ ├── exports.ts
│ │ │ ├── index.ts
│ │ │ ├── navigation-menu.svelte.ts
│ │ │ └── types.ts
│ │ ├── pagination
│ │ │ ├── components
│ │ │ │ ├── pagination-next-button.svelte
│ │ │ │ ├── pagination-page.svelte
│ │ │ │ ├── pagination-prev-button.svelte
│ │ │ │ └── pagination.svelte
│ │ │ ├── exports.ts
│ │ │ ├── index.ts
│ │ │ ├── pagination.svelte.ts
│ │ │ └── types.ts
│ │ ├── pin-input
│ │ │ ├── components
│ │ │ │ ├── pin-input-cell.svelte
│ │ │ │ └── pin-input.svelte
│ │ │ ├── exports.ts
│ │ │ ├── index.ts
│ │ │ ├── pin-input.svelte.ts
│ │ │ ├── types.ts
│ │ │ └── usePasswordManager.svelte.ts
│ │ ├── popover
│ │ │ ├── components
│ │ │ │ ├── popover-arrow.svelte
│ │ │ │ ├── popover-close.svelte
│ │ │ │ ├── popover-content-static.svelte
│ │ │ │ ├── popover-content.svelte
│ │ │ │ ├── popover-trigger.svelte
│ │ │ │ └── popover.svelte
│ │ │ ├── exports.ts
│ │ │ ├── index.ts
│ │ │ ├── popover.svelte.ts
│ │ │ └── types.ts
│ │ ├── progress
│ │ │ ├── components
│ │ │ │ └── progress.svelte
│ │ │ ├── exports.ts
│ │ │ ├── index.ts
│ │ │ ├── progress.svelte.ts
│ │ │ └── types.ts
│ │ ├── radio-group
│ │ │ ├── components
│ │ │ │ ├── radio-group-input.svelte
│ │ │ │ ├── radio-group-item.svelte
│ │ │ │ └── radio-group.svelte
│ │ │ ├── exports.ts
│ │ │ ├── index.ts
│ │ │ ├── radio-group.svelte.ts
│ │ │ └── types.ts
│ │ ├── range-calendar
│ │ │ ├── components
│ │ │ │ ├── range-calendar-cell.svelte
│ │ │ │ ├── range-calendar-day.svelte
│ │ │ │ └── range-calendar.svelte
│ │ │ ├── exports.ts
│ │ │ ├── index.ts
│ │ │ ├── range-calendar.svelte.ts
│ │ │ └── types.ts
│ │ ├── rating-group
│ │ │ ├── components
│ │ │ │ ├── rating-group-input.svelte
│ │ │ │ ├── rating-group-item.svelte
│ │ │ │ └── rating-group.svelte
│ │ │ ├── exports.ts
│ │ │ ├── index.ts
│ │ │ ├── rating-group.svelte.ts
│ │ │ └── types.ts
│ │ ├── scroll-area
│ │ │ ├── components
│ │ │ │ ├── scroll-area-corner-impl.svelte
│ │ │ │ ├── scroll-area-corner.svelte
│ │ │ │ ├── scroll-area-scrollbar-auto.svelte
│ │ │ │ ├── scroll-area-scrollbar-hover.svelte
│ │ │ │ ├── scroll-area-scrollbar-scroll.svelte
│ │ │ │ ├── scroll-area-scrollbar-shared.svelte
│ │ │ │ ├── scroll-area-scrollbar-visible.svelte
│ │ │ │ ├── scroll-area-scrollbar-x.svelte
│ │ │ │ ├── scroll-area-scrollbar-y.svelte
│ │ │ │ ├── scroll-area-scrollbar.svelte
│ │ │ │ ├── scroll-area-thumb-impl.svelte
│ │ │ │ ├── scroll-area-thumb.svelte
│ │ │ │ ├── scroll-area-viewport.svelte
│ │ │ │ └── scroll-area.svelte
│ │ │ ├── exports.ts
│ │ │ ├── index.ts
│ │ │ ├── scroll-area.svelte.ts
│ │ │ └── types.ts
│ │ ├── select
│ │ │ ├── components
│ │ │ │ ├── select-content-static.svelte
│ │ │ │ ├── select-content.svelte
│ │ │ │ ├── select-group-heading.svelte
│ │ │ │ ├── select-group.svelte
│ │ │ │ ├── select-hidden-input.svelte
│ │ │ │ ├── select-item.svelte
│ │ │ │ ├── select-scroll-down-button.svelte
│ │ │ │ ├── select-scroll-up-button.svelte
│ │ │ │ ├── select-trigger.svelte
│ │ │ │ ├── select-viewport.svelte
│ │ │ │ └── select.svelte
│ │ │ ├── exports.ts
│ │ │ ├── index.ts
│ │ │ ├── select.svelte.ts
│ │ │ └── types.ts
│ │ ├── separator
│ │ │ ├── components
│ │ │ │ └── separator.svelte
│ │ │ ├── exports.ts
│ │ │ ├── index.ts
│ │ │ ├── separator.svelte.ts
│ │ │ └── types.ts
│ │ ├── slider
│ │ │ ├── components
│ │ │ │ ├── slider-range.svelte
│ │ │ │ ├── slider-thumb-label.svelte
│ │ │ │ ├── slider-thumb.svelte
│ │ │ │ ├── slider-tick-label.svelte
│ │ │ │ ├── slider-tick.svelte
│ │ │ │ └── slider.svelte
│ │ │ ├── exports.ts
│ │ │ ├── helpers.ts
│ │ │ ├── index.ts
│ │ │ ├── slider.svelte.ts
│ │ │ └── types.ts
│ │ ├── switch
│ │ │ ├── components
│ │ │ │ ├── switch-input.svelte
│ │ │ │ ├── switch-thumb.svelte
│ │ │ │ └── switch.svelte
│ │ │ ├── exports.ts
│ │ │ ├── index.ts
│ │ │ ├── switch.svelte.ts
│ │ │ └── types.ts
│ │ ├── tabs
│ │ │ ├── components
│ │ │ │ ├── tabs-content.svelte
│ │ │ │ ├── tabs-list.svelte
│ │ │ │ ├── tabs-trigger.svelte
│ │ │ │ └── tabs.svelte
│ │ │ ├── exports.ts
│ │ │ ├── index.ts
│ │ │ ├── tabs.svelte.ts
│ │ │ └── types.ts
│ │ ├── time-field
│ │ │ ├── components
│ │ │ │ ├── time-field-hidden-input.svelte
│ │ │ │ ├── time-field-input.svelte
│ │ │ │ ├── time-field-label.svelte
│ │ │ │ ├── time-field-segment.svelte
│ │ │ │ └── time-field.svelte
│ │ │ ├── exports.ts
│ │ │ ├── index.ts
│ │ │ ├── time-field.svelte.ts
│ │ │ └── types.ts
│ │ ├── time-range-field
│ │ │ ├── components
│ │ │ │ ├── time-range-field-input.svelte
│ │ │ │ ├── time-range-field-label.svelte
│ │ │ │ └── time-range-field.svelte
│ │ │ ├── exports.ts
│ │ │ ├── index.ts
│ │ │ ├── time-range-field.svelte.ts
│ │ │ └── types.ts
│ │ ├── toggle-group
│ │ │ ├── components
│ │ │ │ ├── toggle-group-item.svelte
│ │ │ │ └── toggle-group.svelte
│ │ │ ├── exports.ts
│ │ │ ├── index.ts
│ │ │ ├── toggle-group.svelte.ts
│ │ │ └── types.ts
│ │ ├── toggle
│ │ │ ├── components
│ │ │ │ └── toggle.svelte
│ │ │ ├── exports.ts
│ │ │ ├── index.ts
│ │ │ ├── toggle.svelte.ts
│ │ │ └── types.ts
│ │ ├── toolbar
│ │ │ ├── components
│ │ │ │ ├── toolbar-button.svelte
│ │ │ │ ├── toolbar-group-item.svelte
│ │ │ │ ├── toolbar-group.svelte
│ │ │ │ ├── toolbar-link.svelte
│ │ │ │ └── toolbar.svelte
│ │ │ ├── exports.ts
│ │ │ ├── index.ts
│ │ │ ├── toolbar.svelte.ts
│ │ │ └── types.ts
│ │ ├── tooltip
│ │ │ ├── components
│ │ │ │ ├── tooltip-arrow.svelte
│ │ │ │ ├── tooltip-content-static.svelte
│ │ │ │ ├── tooltip-content.svelte
│ │ │ │ ├── tooltip-provider.svelte
│ │ │ │ ├── tooltip-trigger.svelte
│ │ │ │ └── tooltip.svelte
│ │ │ ├── exports.ts
│ │ │ ├── index.ts
│ │ │ ├── tooltip.svelte.ts
│ │ │ ├── types.ts
│ │ │ └── utils.ts
│ │ └── utilities
│ │ │ ├── arrow
│ │ │ ├── arrow.svelte
│ │ │ ├── index.ts
│ │ │ └── types.ts
│ │ │ ├── config
│ │ │ ├── bits-config.ts
│ │ │ ├── components
│ │ │ │ └── bits-config.svelte
│ │ │ ├── exports.ts
│ │ │ ├── index.ts
│ │ │ ├── prop-resolvers.ts
│ │ │ └── types.ts
│ │ │ ├── dismissible-layer
│ │ │ ├── dismissible-layer.svelte
│ │ │ ├── index.ts
│ │ │ ├── types.ts
│ │ │ └── use-dismissable-layer.svelte.ts
│ │ │ ├── escape-layer
│ │ │ ├── escape-layer.svelte
│ │ │ ├── index.ts
│ │ │ ├── types.ts
│ │ │ └── use-escape-layer.svelte.ts
│ │ │ ├── floating-layer
│ │ │ ├── components
│ │ │ │ ├── floating-layer-anchor.svelte
│ │ │ │ ├── floating-layer-arrow.svelte
│ │ │ │ ├── floating-layer-content-static.svelte
│ │ │ │ ├── floating-layer-content.svelte
│ │ │ │ ├── floating-layer.svelte
│ │ │ │ └── index.ts
│ │ │ ├── index.ts
│ │ │ ├── types.ts
│ │ │ └── use-floating-layer.svelte.ts
│ │ │ ├── focus-scope
│ │ │ ├── focus-scope-stack.svelte.ts
│ │ │ ├── focus-scope.svelte
│ │ │ ├── index.ts
│ │ │ ├── types.ts
│ │ │ └── use-focus-scope.svelte.ts
│ │ │ ├── hidden-input.svelte
│ │ │ ├── index.ts
│ │ │ ├── is-using-keyboard
│ │ │ └── is-using-keyboard.svelte.ts
│ │ │ ├── mounted.svelte
│ │ │ ├── popper-layer
│ │ │ ├── index.ts
│ │ │ ├── popper-content.svelte
│ │ │ ├── popper-layer-force-mount.svelte
│ │ │ ├── popper-layer-inner.svelte
│ │ │ ├── popper-layer.svelte
│ │ │ └── types.ts
│ │ │ ├── portal
│ │ │ ├── index.ts
│ │ │ ├── portal-consumer.svelte
│ │ │ ├── portal.svelte
│ │ │ └── types.ts
│ │ │ ├── presence-layer
│ │ │ ├── index.ts
│ │ │ ├── presence-layer.svelte
│ │ │ ├── types.ts
│ │ │ └── use-presence.svelte.ts
│ │ │ ├── scroll-lock
│ │ │ ├── index.ts
│ │ │ └── scroll-lock.svelte
│ │ │ ├── text-selection-layer
│ │ │ ├── index.ts
│ │ │ ├── text-selection-layer.svelte
│ │ │ ├── types.ts
│ │ │ └── use-text-selection-layer.svelte.ts
│ │ │ └── visually-hidden
│ │ │ ├── index.ts
│ │ │ ├── types.ts
│ │ │ └── visually-hidden.svelte
│ │ ├── index.ts
│ │ ├── internal
│ │ ├── arrays.test.ts
│ │ ├── arrays.ts
│ │ ├── attrs.test.ts
│ │ ├── attrs.ts
│ │ ├── box-auto-reset.svelte.ts
│ │ ├── box.svelte.ts
│ │ ├── clamp.test.ts
│ │ ├── clamp.ts
│ │ ├── create-event-hook.svelte.ts
│ │ ├── create-id.ts
│ │ ├── create-shared-hook.svelte.ts
│ │ ├── date-time
│ │ │ ├── announcer.ts
│ │ │ ├── calendar-helpers.svelte.ts
│ │ │ ├── field
│ │ │ │ ├── helpers.ts
│ │ │ │ ├── parts.ts
│ │ │ │ ├── segments.ts
│ │ │ │ ├── time-helpers.ts
│ │ │ │ └── types.ts
│ │ │ ├── formatter.ts
│ │ │ ├── placeholders.ts
│ │ │ └── utils.ts
│ │ ├── debounce.test.ts
│ │ ├── debounce.ts
│ │ ├── dom.ts
│ │ ├── elements.ts
│ │ ├── events.ts
│ │ ├── floating-svelte
│ │ │ ├── floating-utils.svelte.ts
│ │ │ ├── types.ts
│ │ │ └── use-floating.svelte.ts
│ │ ├── focus.ts
│ │ ├── get-directional-keys.test.ts
│ │ ├── get-directional-keys.ts
│ │ ├── is.test.ts
│ │ ├── is.ts
│ │ ├── kbd-constants.ts
│ │ ├── kbd.ts
│ │ ├── locale.ts
│ │ ├── math.test.ts
│ │ ├── math.ts
│ │ ├── noop.ts
│ │ ├── should-trap-focus.ts
│ │ ├── sleep.ts
│ │ ├── tabbable.ts
│ │ ├── types.ts
│ │ ├── use-after-animations.svelte.ts
│ │ ├── use-arrow-navigation.ts
│ │ ├── use-body-scroll-lock.svelte.ts
│ │ ├── use-data-typeahead.svelte.ts
│ │ ├── use-dom-typeahead.svelte.ts
│ │ ├── use-form-control.svelte.ts
│ │ ├── use-grace-area.svelte.ts
│ │ ├── use-id.ts
│ │ ├── use-resize-observer.svelte.ts
│ │ ├── use-roving-focus.svelte.ts
│ │ ├── use-state-machine.svelte.ts
│ │ └── use-timeout-fn.svelte.ts
│ │ ├── shared
│ │ ├── attributes.ts
│ │ ├── css.d.ts
│ │ ├── date
│ │ │ └── types.ts
│ │ ├── index.ts
│ │ └── types.ts
│ │ └── types.ts
│ ├── svelte.config.js
│ ├── tsconfig.json
│ └── vite.config.ts
├── pnpm-lock.yaml
├── pnpm-workspace.yaml
└── tests
├── .gitignore
├── .npmrc
├── README.md
├── other
└── setup-test.ts
├── package.json
├── src
├── app.d.ts
├── app.html
└── tests
│ ├── accordion
│ ├── accordion-multi-test-controlled.svelte
│ ├── accordion-multi-test.svelte
│ ├── accordion-single-force-mount-test.svelte
│ ├── accordion-single-test-controlled.svelte
│ ├── accordion-single-test.svelte
│ ├── accordion-test-isolated.svelte
│ └── accordion.test.ts
│ ├── alert-dialog
│ ├── alert-dialog-force-mount-test.svelte
│ ├── alert-dialog-test.svelte
│ └── alert-dialog.test.ts
│ ├── avatar
│ ├── avatar-test.svelte
│ └── avatar.test.ts
│ ├── calendar
│ ├── calendar-multi-test.svelte
│ ├── calendar-test.svelte
│ └── calendar.test.ts
│ ├── checkbox
│ ├── checkbox-group-test.svelte
│ ├── checkbox-test.svelte
│ └── checkbox.test.ts
│ ├── collapsible
│ ├── collapsible-force-mount-test.svelte
│ ├── collapsible-test.svelte
│ └── collapsible.test.ts
│ ├── combobox
│ ├── combobox-force-mount-test.svelte
│ ├── combobox-multi-test.svelte
│ ├── combobox-test.svelte
│ └── combobox.test.ts
│ ├── command
│ ├── command-test.svelte
│ ├── command.test.ts
│ └── compute-command-score.test.ts
│ ├── context-menu
│ ├── context-menu-force-mount-test.svelte
│ ├── context-menu-test.svelte
│ └── context-menu.test.ts
│ ├── date-field
│ ├── date-field-test.svelte
│ └── date-field.test.ts
│ ├── date-range-field
│ ├── date-range-field-test.svelte
│ └── date-range-field.test.ts
│ ├── date-range-picker
│ ├── date-range-picker-test.svelte
│ └── date-range-picker.test.ts
│ ├── dialog
│ ├── dialog-nested-test.svelte
│ ├── dialog-test.svelte
│ └── dialog.test.ts
│ ├── dropdown-menu
│ ├── dropdown-menu-force-mount-test.svelte
│ ├── dropdown-menu-test.svelte
│ └── dropdown-menu.test.ts
│ ├── helpers
│ ├── calendar.ts
│ └── select.ts
│ ├── label
│ ├── label-test.svelte
│ └── label.test.ts
│ ├── link-preview
│ ├── link-preview-force-mount-test.svelte
│ ├── link-preview-test.svelte
│ └── link-preview.test.ts
│ ├── menubar
│ ├── menubar-menu-test.svelte
│ ├── menubar-test.svelte
│ └── menubar.test.ts
│ ├── meter
│ ├── meter-test.svelte
│ └── meter.test.ts
│ ├── navigation-menu
│ ├── navigation-menu-test.svelte
│ └── navigation-menu.test.ts
│ ├── outside-click.ts
│ ├── pagination
│ ├── pagination-test.svelte
│ └── pagination.test.ts
│ ├── pin-input
│ ├── pin-input-test.svelte
│ └── pin-input.test.ts
│ ├── popover
│ ├── popover-force-mount-test.svelte
│ ├── popover-siblings-test.svelte
│ ├── popover-test.svelte
│ └── popover.test.ts
│ ├── portal
│ ├── portal-test.svelte
│ └── portal.test.ts
│ ├── progress
│ ├── progress-test.svelte
│ └── progress.test.ts
│ ├── radio-group
│ ├── radio-group-popover-test.svelte
│ ├── radio-group-test.svelte
│ └── radio-group.test.ts
│ ├── range-calendar
│ ├── range-calendar-test.svelte
│ └── range-calendar.test.ts
│ ├── rating-group
│ ├── rating-group-test.svelte
│ └── rating-group.test.ts
│ ├── scroll-area
│ ├── scroll-area-test.svelte
│ └── scroll-area.test.ts
│ ├── select
│ ├── select-force-mount-test.svelte
│ ├── select-multi-test.svelte
│ ├── select-test.svelte
│ └── select.test.ts
│ ├── separator
│ ├── separator-test.svelte
│ └── separator.test.ts
│ ├── slider
│ ├── slider-range-test.svelte
│ ├── slider-test-multi.svelte
│ ├── slider-test-with-labels.svelte
│ └── slider.test.ts
│ ├── switch
│ ├── switch-test.svelte
│ └── switch.test.ts
│ ├── tabs
│ ├── tabs-test.svelte
│ └── tabs.test.ts
│ ├── time-field
│ ├── time-field-test.svelte
│ └── time-field.test.ts
│ ├── time-range-field
│ ├── time-range-field-test.svelte
│ └── time-range-field.test.ts
│ ├── toggle-group
│ ├── toggle-group-multi-test.svelte
│ ├── toggle-group-test.svelte
│ └── toggle-group.test.ts
│ ├── toggle
│ ├── toggle-test.svelte
│ └── toggle.test.ts
│ ├── toolbar
│ ├── toolbar-test.svelte
│ └── toolbar.test.ts
│ ├── tooltip
│ ├── tooltip-force-mount-test.svelte
│ ├── tooltip-popover-test.svelte
│ ├── tooltip-test.svelte
│ └── tooltip.test.ts
│ ├── utilities
│ ├── bits-config
│ │ ├── bits-config-test.svelte
│ │ └── bits-config.test.ts
│ └── is-using-keyboard
│ │ ├── index.test.ts
│ │ └── is-using-keyboard-test.svelte
│ └── utils.ts
├── static
└── favicon.png
├── svelte.config.js
├── tsconfig.json
└── vite.config.ts
/.changeset/README.md:
--------------------------------------------------------------------------------
1 | # Changesets
2 |
3 | Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
4 | with multi-package repos, or single-package repos to help you version and publish your code. You can
5 | find the full documentation for it [in our repository](https://github.com/changesets/changesets)
6 |
7 | We have a quick list of common questions to get you started engaging with this project in
8 | [our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)
9 |
--------------------------------------------------------------------------------
/.changeset/config.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://unpkg.com/@changesets/config@2.3.1/schema.json",
3 | "changelog": ["@svitejs/changesets-changelog-github-compact", { "repo": "huntabyte/bits-ui" }],
4 | "commit": false,
5 | "fixed": [],
6 | "linked": [],
7 | "access": "public",
8 | "baseBranch": "main",
9 | "updateInternalDependencies": "patch",
10 | "ignore": ["docs", "tests"]
11 | }
12 |
--------------------------------------------------------------------------------
/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | # These are supported funding model platforms
2 |
3 | github: [huntabyte]
4 | patreon: # Replace with a single Patreon username
5 | open_collective: # Replace with a single Open Collective username
6 | ko_fi: huntabyte
7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
9 | liberapay: # Replace with a single Liberapay username
10 | issuehunt: # Replace with a single IssueHunt username
11 | otechie: # Replace with a single Otechie username
12 | custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']
13 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/1-documentation_change.yml:
--------------------------------------------------------------------------------
1 | name: 📖 Report Docs Issue
2 | description: Suggest an addition or modification to the documentation
3 | labels: [triage]
4 | body:
5 | - type: dropdown
6 | attributes:
7 | label: Change Type
8 | description: What type of change are you proposing?
9 | options:
10 | - Addition
11 | - Correction
12 | - Removal
13 | - Cleanup (formatting, typos, etc.)
14 | validations:
15 | required: true
16 |
17 | - type: textarea
18 | attributes:
19 | label: Proposed Changes
20 | description: Describe the proposed changes and why they are necessary
21 | validations:
22 | required: true
23 |
--------------------------------------------------------------------------------
/.github/workflows/reproduire.yml:
--------------------------------------------------------------------------------
1 | name: Reproduire
2 | on:
3 | issues:
4 | types: [labeled]
5 |
6 | permissions:
7 | issues: write
8 |
9 | jobs:
10 | reproduire:
11 | runs-on: macos-latest
12 | steps:
13 | - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
14 | - uses: Hebilicious/reproduire@4b686ae9cbb72dad60f001d278b6e3b2ce40a9ac # v0.0.9-mp
15 | with:
16 | label: needs reproduction
17 |
--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | engine-strict=true
2 |
--------------------------------------------------------------------------------
/.nvmrc:
--------------------------------------------------------------------------------
1 | v20.15.1
--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | **/build
4 | **/.svelte-kit
5 | .env
6 | .env.*
7 | !.env.example
8 |
9 | # Ignore files for PNPM, NPM and YARN
10 | pnpm-lock.yaml
11 | package-lock.json
12 | yarn.lock
13 | **/.changeset/
14 | .prettierrc
15 | package.json
16 | .vercel
17 | .contentlayer
18 | .velite
19 | **/dist
20 |
21 | CHANGELOG.md
22 |
23 | vite.config.js.timestamp-*
24 | vite.config.ts.timestamp-*
25 | docs/src/routes/api/search.json/search.json
26 | docs/src/routes/api/demos.json/demos.json
27 | docs/src/routes/api/demos.json/stackblitz-files.json
--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "useTabs": true,
3 | "tabWidth": 4,
4 | "singleQuote": false,
5 | "trailingComma": "es5",
6 | "semi": true,
7 | "printWidth": 100,
8 | "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
9 | "overrides": [
10 | {
11 | "files": "*.svelte",
12 | "options": {
13 | "parser": "svelte"
14 | }
15 | }
16 | ],
17 | "tailwindFunctions": ["clsx", "cn", "tv"]
18 | }
19 |
--------------------------------------------------------------------------------
/docs/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | /build
4 | /dist
5 | /.svelte-kit
6 | /package
7 | .env
8 | .env.*
9 | !.env.example
10 | vite.config.js.timestamp-*
11 | vite.config.ts.timestamp-*
12 | .vercel
13 | .velite
14 |
15 | ## contentlayer build output
16 | .contentlayer
--------------------------------------------------------------------------------
/docs/.prettierignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | /build
4 | /.svelte-kit
5 | /package
6 | .env
7 | .env.*
8 | !.env.example
9 |
10 | # Ignore files for PNPM, NPM and YARN
11 | pnpm-lock.yaml
12 | package-lock.json
13 | yarn.lock
14 | .changeset/
15 | .prettierrc
16 | package.json
17 | .vercel
18 | .contentlayer
19 | .velite
20 | dist
21 |
22 | vite.config.js.timestamp-*
23 | vite.config.ts.timestamp-*
24 | docs/src/lib/content/api-reference/extended-types/**/*
25 | ./src/routes/api/search.json/search.json
--------------------------------------------------------------------------------
/docs/README.md:
--------------------------------------------------------------------------------
1 | # Bits UI Documentation
2 |
--------------------------------------------------------------------------------
/docs/content/components/button.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Button
3 | description: A component that if passed a `href` prop will render an anchor element instead of a button element.
4 | ---
5 |
6 |
10 |
11 |
12 |
13 | {#snippet preview()}
14 |
15 | {/snippet}
16 |
17 |
18 |
19 | ## Structure
20 |
21 | ```svelte
22 |
25 |
26 |
27 | ```
28 |
29 |
30 |
--------------------------------------------------------------------------------
/docs/content/components/label.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Label
3 | description: Identifies or describes associated UI elements.
4 | ---
5 |
6 |
10 |
11 |
12 |
13 | {#snippet preview()}
14 |
15 | {/snippet}
16 |
17 |
18 |
19 | ## Structure
20 |
21 | ```svelte
22 |
25 |
26 |
27 | ```
28 |
29 |
30 |
--------------------------------------------------------------------------------
/docs/content/components/separator.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Separator
3 | description: Visually separates content or UI elements for clarity and organization.
4 | ---
5 |
6 |
10 |
11 |
12 |
13 | {#snippet preview()}
14 |
15 | {/snippet}
16 |
17 |
18 |
19 | ## Structure
20 |
21 | ```svelte
22 |
25 |
26 |
27 | ```
28 |
29 |
30 |
--------------------------------------------------------------------------------
/docs/content/figma-file.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Figma
3 | description: Every component recreated in Figma.
4 | llms: false
5 | ---
6 |
7 | The Figma UI Kit is open sourced by [Pavel Stianko](https://twitter.com/pavel_stianko).
8 |
9 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | ## Grab a copy
19 |
20 | https://www.figma.com/community/file/1430229712135910564/bits-ui-kit
21 |
--------------------------------------------------------------------------------
/docs/content/utilities/is-using-keyboard.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: IsUsingKeyboard
3 | description: A utility to track whether the user is actively using the keyboard or not.
4 | ---
5 |
6 | ## Overview
7 |
8 | `IsUsingKeyboard` is a utility component that tracks whether the user is actively using the keyboard or not. This component is used internally by Bits UI components to provide keyboard accessibility features.
9 |
10 | It provides global state that is shared across all instances of the class to prevent duplicate event listener registration.
11 |
12 | ## Usage
13 |
14 | ```svelte
15 |
21 | ```
22 |
--------------------------------------------------------------------------------
/docs/content/utilities/use-id.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: useId
3 | description: A utility function to generate unique IDs.
4 | ---
5 |
6 | The `useId` function is a utility function that can be used to generate unique IDs. This function is used internally by all Bits UI components and is exposed for your convenience.
7 |
8 | ## Usage
9 |
10 | ```svelte
11 |
16 |
17 |
18 |
19 | ```
20 |
--------------------------------------------------------------------------------
/docs/other/code-block-prettier.js:
--------------------------------------------------------------------------------
1 | //@ts-check
2 |
3 | /** @type {import('prettier').Config} */
4 | export const codeBlockPrettierConfig = {
5 | useTabs: false,
6 | tabWidth: 2,
7 | singleQuote: false,
8 | trailingComma: "none",
9 | printWidth: 80,
10 | endOfLine: "lf",
11 | parser: "svelte",
12 | plugins: ["prettier-plugin-svelte"],
13 | overrides: [
14 | {
15 | files: "*.svelte",
16 | options: {
17 | parser: "svelte",
18 | },
19 | },
20 | ],
21 | bracketSameLine: false,
22 | };
23 |
--------------------------------------------------------------------------------
/docs/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 Platform {}
9 | }
10 |
11 | declare module "*.md";
12 | }
13 |
14 | export {};
15 |
--------------------------------------------------------------------------------
/docs/src/app.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
10 |
15 |
16 | %sveltekit.head%
17 |
18 |
19 |
20 |
24 | %sveltekit.body%
25 |
26 |
27 |
--------------------------------------------------------------------------------
/docs/src/hooks.server.ts:
--------------------------------------------------------------------------------
1 | export async function handle({ event, resolve }) {
2 | return await resolve(event);
3 | }
4 |
--------------------------------------------------------------------------------
/docs/src/lib/components/api-ref/index.ts:
--------------------------------------------------------------------------------
1 | export { default as DataAttrsTable } from "./data-attrs-table.svelte";
2 | export { default as PropsTable } from "./props-table.svelte";
3 | export { default as CSSVarsTable } from "./css-vars-table.svelte";
4 |
--------------------------------------------------------------------------------
/docs/src/lib/components/demos/accordion-demo-multiple.svelte:
--------------------------------------------------------------------------------
1 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/docs/src/lib/components/demos/accordion-demo-single.svelte:
--------------------------------------------------------------------------------
1 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/docs/src/lib/components/demos/aspect-ratio-demo.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 | 
11 |
12 |
--------------------------------------------------------------------------------
/docs/src/lib/components/demos/avatar-demo.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
9 |
15 |
16 |
--------------------------------------------------------------------------------
/docs/src/lib/components/demos/button-demo.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
10 | Unlimited
11 |
12 |
--------------------------------------------------------------------------------
/docs/src/lib/components/demos/dialog-demo-nested.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 | {#snippet title()}
9 | First Dialog
10 | {/snippet}
11 | {#snippet description()}
12 | This is the first dialog.
13 | {/snippet}
14 |
15 | {#snippet title()}
16 | Second Dialog
17 | {/snippet}
18 | {#snippet description()}
19 | This is the second dialog.
20 | {/snippet}
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/docs/src/lib/components/demos/portal-demo.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
10 |
Custom Anchor
11 |
16 |
10 | {#each durations as duration (duration)}
11 |
12 |
13 |
delayDuration={duration}
14 |
15 | {/each}
16 |
8 |
15 | {@render children?.()}
16 |
17 |
7 |
8 | {@render children?.()}
9 |
10 |
11 | {@render children?.()}
12 |
13 |
11 | {#each shortcut.split(" ") as key, i (i)}
12 | {key}
13 | {/each}
14 |
15 |
16 |
--------------------------------------------------------------------------------
/docs/src/lib/components/examples/command/vercel/icons/contact.svelte:
--------------------------------------------------------------------------------
1 |
15 |
--------------------------------------------------------------------------------
/docs/src/lib/components/examples/command/vercel/icons/docs.svelte:
--------------------------------------------------------------------------------
1 |
18 |
--------------------------------------------------------------------------------
/docs/src/lib/components/examples/command/vercel/icons/feedback.svelte:
--------------------------------------------------------------------------------
1 |
16 |
--------------------------------------------------------------------------------
/docs/src/lib/components/examples/command/vercel/icons/index.ts:
--------------------------------------------------------------------------------
1 | export { default as ContactIcon } from "./contact.svelte";
2 | export { default as DocsIcon } from "./docs.svelte";
3 | export { default as FeedbackIcon } from "./feedback.svelte";
4 | export { default as PlusIcon } from "./plus.svelte";
5 | export { default as ProjectsIcon } from "./projects.svelte";
6 | export { default as TeamsIcon } from "./teams.svelte";
7 |
--------------------------------------------------------------------------------
/docs/src/lib/components/examples/command/vercel/icons/plus.svelte:
--------------------------------------------------------------------------------
1 |
15 |
--------------------------------------------------------------------------------
/docs/src/lib/components/examples/command/vercel/icons/projects.svelte:
--------------------------------------------------------------------------------
1 |
17 |
--------------------------------------------------------------------------------
/docs/src/lib/components/examples/command/vercel/icons/teams.svelte:
--------------------------------------------------------------------------------
1 |
17 |
--------------------------------------------------------------------------------
/docs/src/lib/components/examples/command/vercel/item.svelte:
--------------------------------------------------------------------------------
1 |
17 |
18 |
19 | {@render children?.()}
20 | {#if shortcut}
21 |
22 | {#each shortcut.split(" ") as key (key)}
23 | {key}
24 | {/each}
25 |
26 | {/if}
27 |
28 |
--------------------------------------------------------------------------------
/docs/src/lib/components/examples/command/vercel/projects.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 | {#each { length: 6 } as _, i (i)}
6 | -
7 | Project {i + 1}
8 |
9 | {/each}
10 |
--------------------------------------------------------------------------------
/docs/src/lib/components/icons/index.ts:
--------------------------------------------------------------------------------
1 | export { default as GitHub } from "./github.svelte";
2 | export { default as SwitchOn } from "./switch-on.svelte";
3 | export { default as SwitchOff } from "./switch-off.svelte";
4 | export { default as Logo } from "./logo.svelte";
5 |
--------------------------------------------------------------------------------
/docs/src/lib/components/icons/stackblitz.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
13 |
--------------------------------------------------------------------------------
/docs/src/lib/components/icons/switch-off.svelte:
--------------------------------------------------------------------------------
1 |
4 |
7 |
8 |
--------------------------------------------------------------------------------
/docs/src/lib/components/icons/switch-on.svelte:
--------------------------------------------------------------------------------
1 |
4 |
7 |
8 |
--------------------------------------------------------------------------------
/docs/src/lib/components/icons/x-com.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
12 |
--------------------------------------------------------------------------------
/docs/src/lib/components/markdown/a.svelte:
--------------------------------------------------------------------------------
1 |
11 |
12 |
13 | {@render children?.()}
14 |
15 |
--------------------------------------------------------------------------------
/docs/src/lib/components/markdown/blockquote.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 | {@render children?.()}
10 |
11 |
--------------------------------------------------------------------------------
/docs/src/lib/components/markdown/blueprint.svelte:
--------------------------------------------------------------------------------
1 |
24 |
25 |
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/docs/src/lib/components/markdown/code.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
15 | {@render children?.()}
16 |
17 |
--------------------------------------------------------------------------------
/docs/src/lib/components/markdown/h1.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 | {@render children?.()}
10 |
11 |
--------------------------------------------------------------------------------
/docs/src/lib/components/markdown/h2.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 |
15 | {@render children?.()}
16 |
17 |
--------------------------------------------------------------------------------
/docs/src/lib/components/markdown/h3.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 |
12 | {@render children?.()}
13 |
14 |
--------------------------------------------------------------------------------
/docs/src/lib/components/markdown/h4.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 | {@render children?.()}
10 |
11 |
--------------------------------------------------------------------------------
/docs/src/lib/components/markdown/h5.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 | {@render children?.()}
10 |
11 |
--------------------------------------------------------------------------------
/docs/src/lib/components/markdown/h6.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 | {@render children?.()}
10 |
11 |
--------------------------------------------------------------------------------
/docs/src/lib/components/markdown/hr.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 |
--------------------------------------------------------------------------------
/docs/src/lib/components/markdown/img.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 | ![]()
9 |
--------------------------------------------------------------------------------
/docs/src/lib/components/markdown/li.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 | {@render children?.()}
9 |
10 |
--------------------------------------------------------------------------------
/docs/src/lib/components/markdown/ol.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 | {@render children?.()}
10 |
11 |
--------------------------------------------------------------------------------
/docs/src/lib/components/markdown/p.svelte:
--------------------------------------------------------------------------------
1 |
11 |
12 |
13 | {@render children?.()}
14 |
15 |
--------------------------------------------------------------------------------
/docs/src/lib/components/markdown/pre.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 |
14 | {@render children?.()}
15 |
16 |
--------------------------------------------------------------------------------
/docs/src/lib/components/markdown/table.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 |
10 | {@render children?.()}
11 |
12 |
19 | {@render children?.()}
20 | |
21 |
--------------------------------------------------------------------------------
/docs/src/lib/components/markdown/th.svelte:
--------------------------------------------------------------------------------
1 |
11 |
12 |
19 | {@render children?.()}
20 | |
21 |
--------------------------------------------------------------------------------
/docs/src/lib/components/markdown/tr.svelte:
--------------------------------------------------------------------------------
1 |
11 |
12 |
13 | {@render children?.()}
14 |
15 |
--------------------------------------------------------------------------------
/docs/src/lib/components/markdown/ul.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 | {@render children?.()}
10 |
11 |
--------------------------------------------------------------------------------
/docs/src/lib/components/navigation/index.ts:
--------------------------------------------------------------------------------
1 | export { default as SidebarNav } from "./sidebar-nav.svelte";
2 | export { default as SidebarNavItems } from "./sidebar-nav-items.svelte";
3 | export { default as SidebarNavMainItems } from "./sidebar-nav-main-items.svelte";
4 |
--------------------------------------------------------------------------------
/docs/src/lib/components/navigation/mobile-link.svelte:
--------------------------------------------------------------------------------
1 |
14 |
15 |
21 | {@render children?.()}
22 |
23 |
--------------------------------------------------------------------------------
/docs/src/lib/components/page-header/index.ts:
--------------------------------------------------------------------------------
1 | export { default as PageHeader } from "./page-header.svelte";
2 | export { default as PageHeaderHeading } from "./page-header-heading.svelte";
3 | export { default as PageHeaderDescription } from "./page-header-description.svelte";
4 |
--------------------------------------------------------------------------------
/docs/src/lib/components/page-header/page-header-description.svelte:
--------------------------------------------------------------------------------
1 |
11 |
12 |
19 | {@render children?.()}
20 |
21 |
--------------------------------------------------------------------------------
/docs/src/lib/components/page-header/page-header-heading.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 |
11 |
--------------------------------------------------------------------------------
/docs/src/lib/components/page-header/page-header.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 | {@render children?.()}
9 |
10 |
--------------------------------------------------------------------------------
/docs/src/lib/components/sidebar-sponsor.svelte:
--------------------------------------------------------------------------------
1 |
12 |
--------------------------------------------------------------------------------
/docs/src/lib/components/steps.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 | {@render children?.()}
9 |
10 |
--------------------------------------------------------------------------------
/docs/src/lib/components/tailwind-indicator.svelte:
--------------------------------------------------------------------------------
1 |
4 |
xs
5 |
sm
6 |
md
7 |
lg
8 |
xl
9 |
2xl
10 |
13 | {@render children?.()}
14 |
15 |
--------------------------------------------------------------------------------
/docs/src/lib/components/ui/alert/alert-title.svelte:
--------------------------------------------------------------------------------
1 |
12 |
13 |
14 | {@render children?.()}
15 |
16 |
--------------------------------------------------------------------------------
/docs/src/lib/components/ui/alert/alert.svelte:
--------------------------------------------------------------------------------
1 |
15 |
16 |
17 | {@render children?.()}
18 |
19 |
--------------------------------------------------------------------------------
/docs/src/lib/components/ui/badge.svelte:
--------------------------------------------------------------------------------
1 |
11 |
12 |
19 | {@render children?.()}
20 |
21 |
--------------------------------------------------------------------------------
/docs/src/lib/components/ui/button/button.svelte:
--------------------------------------------------------------------------------
1 |
14 |
15 |
18 |
--------------------------------------------------------------------------------
/docs/src/lib/components/ui/sheet/index.ts:
--------------------------------------------------------------------------------
1 | import { Dialog as SheetPrimitive } from "bits-ui";
2 | import Content from "./sheet-content.svelte";
3 | import Description from "./sheet-description.svelte";
4 | import Footer from "./sheet-footer.svelte";
5 | import Header from "./sheet-header.svelte";
6 | import Overlay from "./sheet-overlay.svelte";
7 | import Title from "./sheet-title.svelte";
8 |
9 | const Root = SheetPrimitive.Root;
10 | const Close = SheetPrimitive.Close;
11 | const Trigger = SheetPrimitive.Trigger;
12 | const Portal = SheetPrimitive.Portal;
13 |
14 | export { Close, Content, Description, Footer, Header, Overlay, Portal, Root, Title, Trigger };
15 |
--------------------------------------------------------------------------------
/docs/src/lib/components/ui/sheet/sheet-description.svelte:
--------------------------------------------------------------------------------
1 |
12 |
13 |
14 | {@render children?.()}
15 |
16 |
--------------------------------------------------------------------------------
/docs/src/lib/components/ui/sheet/sheet-footer.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 |
12 | {@render children?.()}
13 |
14 |
--------------------------------------------------------------------------------
/docs/src/lib/components/ui/sheet/sheet-header.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 | {@render children?.()}
10 |
11 |
--------------------------------------------------------------------------------
/docs/src/lib/components/ui/sheet/sheet-overlay.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 |
12 |
--------------------------------------------------------------------------------
/docs/src/lib/components/ui/sheet/sheet-title.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 | {@render children?.()}
10 |
11 |
--------------------------------------------------------------------------------
/docs/src/lib/components/ui/table/index.ts:
--------------------------------------------------------------------------------
1 | import Root from "./table.svelte";
2 | import Body from "./table-body.svelte";
3 | import Caption from "./table-caption.svelte";
4 | import Cell from "./table-cell.svelte";
5 | import Footer from "./table-footer.svelte";
6 | import Head from "./table-head.svelte";
7 | import Header from "./table-header.svelte";
8 | import Row from "./table-row.svelte";
9 |
10 | export {
11 | Root,
12 | Body,
13 | Caption,
14 | Cell,
15 | Footer,
16 | Head,
17 | Header,
18 | Row,
19 | //
20 | Root as Table,
21 | Body as TableBody,
22 | Caption as TableCaption,
23 | Cell as TableCell,
24 | Footer as TableFooter,
25 | Head as TableHead,
26 | Header as TableHeader,
27 | Row as TableRow,
28 | };
29 |
--------------------------------------------------------------------------------
/docs/src/lib/components/ui/table/table-body.svelte:
--------------------------------------------------------------------------------
1 |
11 |
12 |
13 | {@render children?.()}
14 |
15 |
--------------------------------------------------------------------------------
/docs/src/lib/components/ui/table/table-caption.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 | {@render children?.()}
10 |
11 |
--------------------------------------------------------------------------------
/docs/src/lib/components/ui/table/table-cell.svelte:
--------------------------------------------------------------------------------
1 |
11 |
12 | [role=checkbox]]:translate-y-[2px]",
15 | className
16 | )}
17 | {...restProps}
18 | >
19 | {@render children?.()}
20 | |
21 |
--------------------------------------------------------------------------------
/docs/src/lib/components/ui/table/table-footer.svelte:
--------------------------------------------------------------------------------
1 |
11 |
12 |
13 | {@render children?.()}
14 |
15 |
--------------------------------------------------------------------------------
/docs/src/lib/components/ui/table/table-head.svelte:
--------------------------------------------------------------------------------
1 |
11 |
12 | [role=checkbox]]:translate-y-[2px]",
15 | className
16 | )}
17 | {...restProps}
18 | >
19 | {@render children?.()}
20 | |
21 |
--------------------------------------------------------------------------------
/docs/src/lib/components/ui/table/table-header.svelte:
--------------------------------------------------------------------------------
1 |
11 |
12 |
13 | {@render children?.()}
14 |
15 |
--------------------------------------------------------------------------------
/docs/src/lib/components/ui/table/table-row.svelte:
--------------------------------------------------------------------------------
1 |
11 |
12 |
13 | {@render children?.()}
14 |
15 |
--------------------------------------------------------------------------------
/docs/src/lib/components/ui/table/table.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 |
10 | {@render children?.()}
11 |
12 |
$1")
4 | .replace(/\*\*([^*]+)\*\*/g, "$1")
5 | .replace(/\*([^*]+)\*/g, "$1")
6 | .replace(/_([^_]+)_/g, "$1")
7 | .replace(/~~([^~]+)~~/g, "$1")
8 | .replace(/\[([^\]]+)\]\(([^)]+)\)/g, "$1")
9 | .replace(/>([^>]+)\n/g, "$1
")
10 | .replace(/\n/g, "
");
11 | }
12 |
13 | export function parseTypeDef(text: string) {
14 | return text.replace(/\n/g, "
");
15 | }
16 |
--------------------------------------------------------------------------------
/docs/src/lib/utils/omit.ts:
--------------------------------------------------------------------------------
1 | type ValueOf = T[keyof T];
2 |
3 | export function omit, K extends keyof T>(
4 | obj: T,
5 | ...keys: K[]
6 | ): Omit {
7 | const result = {} as Omit;
8 | for (const key of Object.keys(obj)) {
9 | if (!keys.includes(key as unknown as K)) {
10 | result[key as keyof Omit] = obj[key] as ValueOf>;
11 | }
12 | }
13 | return result;
14 | }
15 |
--------------------------------------------------------------------------------
/docs/src/lib/utils/styles.ts:
--------------------------------------------------------------------------------
1 | import { type ClassValue, clsx } from "clsx";
2 | import { twMerge } from "tailwind-merge";
3 |
4 | export function cn(...inputs: ClassValue[]) {
5 | return twMerge(clsx(inputs));
6 | }
7 |
--------------------------------------------------------------------------------
/docs/src/routes/(docs)/+error.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 |
10 | {page.status}
11 |
12 | {message}
13 | Back to docs
14 |
15 |
--------------------------------------------------------------------------------
/docs/src/routes/(docs)/docs/+page.ts:
--------------------------------------------------------------------------------
1 | import { redirect } from "@sveltejs/kit";
2 |
3 | export async function load() {
4 | redirect(303, "/docs/introduction");
5 | }
6 |
--------------------------------------------------------------------------------
/docs/src/routes/(docs)/docs/[...slug]/+page.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 |
--------------------------------------------------------------------------------
/docs/src/routes/(docs)/docs/[...slug]/+page.ts:
--------------------------------------------------------------------------------
1 | import { docs, policyDocs, typeHelperDocs, utilityDocs } from "$content/index.js";
2 | import { getDoc } from "$lib/utils/docs.js";
3 | import type { EntryGenerator } from "./$types.js";
4 |
5 | export const prerender = true;
6 |
7 | export const entries: EntryGenerator = async () => {
8 | return [
9 | ...utilityDocs.map((doc) => ({
10 | slug: `utilities/${doc.slug}`,
11 | })),
12 | ...typeHelperDocs.map((doc) => ({
13 | slug: `type-helpers/${doc.slug}`,
14 | })),
15 | ...policyDocs.map((doc) => ({
16 | slug: `policies/${doc.slug}`,
17 | })),
18 | ...docs.map((doc) => ({
19 | slug: doc.slug,
20 | })),
21 | ];
22 | };
23 |
24 | export async function load(event) {
25 | return await getDoc(event.params.slug);
26 | }
27 |
--------------------------------------------------------------------------------
/docs/src/routes/(docs)/docs/components/[name]/+page.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 |
--------------------------------------------------------------------------------
/docs/src/routes/(docs)/docs/components/[name]/+page.ts:
--------------------------------------------------------------------------------
1 | import { componentDocs } from "$content/index.js";
2 | import { getComponentDoc } from "$lib/utils/docs.js";
3 | import type { EntryGenerator } from "./$types.js";
4 |
5 | export const prerender = true;
6 |
7 | export const entries: EntryGenerator = async () => {
8 | return componentDocs.map((doc) => ({
9 | name: doc.slug,
10 | }));
11 | };
12 |
13 | export async function load(event) {
14 | return await getComponentDoc(`components/${event.params.name}`);
15 | }
16 |
--------------------------------------------------------------------------------
/docs/src/routes/(docs)/docs/utilities/[name]/+page.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 |
--------------------------------------------------------------------------------
/docs/src/routes/(docs)/docs/utilities/[name]/+page.ts:
--------------------------------------------------------------------------------
1 | import { utilityDocs } from "$content/index.js";
2 | import { getUtilityDoc } from "$lib/utils/docs.js";
3 | import type { EntryGenerator } from "./$types.js";
4 |
5 | export const prerender = true;
6 |
7 | export const entries: EntryGenerator = async () => {
8 | return utilityDocs.map((doc) => ({
9 | name: doc.slug,
10 | }));
11 | };
12 |
13 | export async function load(event) {
14 | return await getUtilityDoc(`utilities/${event.params.name}`);
15 | }
16 |
--------------------------------------------------------------------------------
/docs/src/routes/(docs)/sink/+page.svelte:
--------------------------------------------------------------------------------
1 |
11 |
12 |
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/docs/src/routes/(examples)/examples/command/+layout.svelte:
--------------------------------------------------------------------------------
1 |
8 |
9 | {@render children?.()}
10 |
--------------------------------------------------------------------------------
/docs/src/routes/+layout.svelte:
--------------------------------------------------------------------------------
1 |
13 |
14 |
15 |
16 |
17 |
18 | {@render children()}
19 |
--------------------------------------------------------------------------------
/docs/src/routes/+page.ts:
--------------------------------------------------------------------------------
1 | export const prerender = true;
2 |
--------------------------------------------------------------------------------
/docs/src/routes/api/search.json/+server.ts:
--------------------------------------------------------------------------------
1 | import type { RequestHandler } from "@sveltejs/kit";
2 | import search from "./search.json" with { type: "json" };
3 |
4 | export const prerender = true;
5 |
6 | export const GET: RequestHandler = async () => {
7 | return Response.json(search);
8 | };
9 |
--------------------------------------------------------------------------------
/docs/src/routes/repro/+page.ts:
--------------------------------------------------------------------------------
1 | import { redirect } from "@sveltejs/kit";
2 | import type { PageLoad } from "./$types.js";
3 |
4 | export const load: PageLoad = async () => {
5 | redirect(303, "https://stackblitz.com/github/huntabyte/bits-ui-reproduction");
6 | };
7 |
--------------------------------------------------------------------------------
/docs/src/routes/stackblitz/+page.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
9 |
--------------------------------------------------------------------------------
/docs/static/CalSans-SemiBold.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huntabyte/bits-ui/696ff0b59c929c94b07f02a99b1818da1cecdabb/docs/static/CalSans-SemiBold.woff2
--------------------------------------------------------------------------------
/docs/static/abstract.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huntabyte/bits-ui/696ff0b59c929c94b07f02a99b1818da1cecdabb/docs/static/abstract.png
--------------------------------------------------------------------------------
/docs/static/avatar-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huntabyte/bits-ui/696ff0b59c929c94b07f02a99b1818da1cecdabb/docs/static/avatar-1.png
--------------------------------------------------------------------------------
/docs/static/favicon-dark.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/docs/static/favicon-light.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/docs/static/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huntabyte/bits-ui/696ff0b59c929c94b07f02a99b1818da1cecdabb/docs/static/favicon.png
--------------------------------------------------------------------------------
/docs/static/img/bring-own-style.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huntabyte/bits-ui/696ff0b59c929c94b07f02a99b1818da1cecdabb/docs/static/img/bring-own-style.png
--------------------------------------------------------------------------------
/docs/static/img/developer-exp.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huntabyte/bits-ui/696ff0b59c929c94b07f02a99b1818da1cecdabb/docs/static/img/developer-exp.png
--------------------------------------------------------------------------------
/docs/static/img/learn.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huntabyte/bits-ui/696ff0b59c929c94b07f02a99b1818da1cecdabb/docs/static/img/learn.png
--------------------------------------------------------------------------------
/docs/static/og.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huntabyte/bits-ui/696ff0b59c929c94b07f02a99b1818da1cecdabb/docs/static/og.png
--------------------------------------------------------------------------------
/docs/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./.svelte-kit/tsconfig.json",
3 | "compilerOptions": {
4 | "allowJs": true,
5 | "checkJs": true,
6 | "esModuleInterop": true,
7 | "forceConsistentCasingInFileNames": true,
8 | "resolveJsonModule": true,
9 | "skipLibCheck": true,
10 | "sourceMap": true,
11 | "strict": true,
12 | "moduleResolution": "NodeNext",
13 | "module": "NodeNext",
14 | "verbatimModuleSyntax": true,
15 | "allowSyntheticDefaultImports": true,
16 | "noEmit": true
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/docs/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { sveltekit } from "@sveltejs/kit/vite";
2 | import tailwindcss from "@tailwindcss/vite";
3 | import { defineConfig } from "vite";
4 |
5 | export default defineConfig({
6 | plugins: [tailwindcss(), sveltekit()],
7 | assetsInclude: ["**/*.md"],
8 | server: {
9 | fs: {
10 | strict: false,
11 | },
12 | },
13 | optimizeDeps: {
14 | exclude: ["bits-ui"],
15 | },
16 | resolve: { noExternal: true },
17 | });
18 |
--------------------------------------------------------------------------------
/packages/bits-ui/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | /build
4 | /dist
5 | /.svelte-kit
6 | /package
7 | .env
8 | .env.*
9 | !.env.example
10 | vite.config.js.timestamp-*
11 | vite.config.ts.timestamp-*
12 | .vercel
13 |
14 | ## contentlayer build output
15 | .contentlayer
--------------------------------------------------------------------------------
/packages/bits-ui/.prettierignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | /build
4 | /.svelte-kit
5 | /package
6 | .env
7 | .env.*
8 | !.env.example
9 |
10 | # Ignore files for PNPM, NPM and YARN
11 | pnpm-lock.yaml
12 | package-lock.json
13 | yarn.lock
14 | .changeset/
15 | .prettierrc
16 | package.json
17 | .vercel
18 | .contentlayer
19 | dist
20 |
21 | vite.config.js.timestamp-*
22 | vite.config.ts.timestamp-*
23 |
24 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/app.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
10 |
15 |
16 | %sveltekit.head%
17 |
18 |
19 |
23 | %sveltekit.body%
24 |
25 |
26 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/accordion/exports.ts:
--------------------------------------------------------------------------------
1 | export { default as Root } from "./components/accordion.svelte";
2 | export { default as Item } from "./components/accordion-item.svelte";
3 | export { default as Header } from "./components/accordion-header.svelte";
4 | export { default as Trigger } from "./components/accordion-trigger.svelte";
5 | export { default as Content } from "./components/accordion-content.svelte";
6 |
7 | export type {
8 | AccordionRootProps as RootProps,
9 | AccordionItemProps as ItemProps,
10 | AccordionHeaderProps as HeaderProps,
11 | AccordionTriggerProps as TriggerProps,
12 | AccordionContentProps as ContentProps,
13 | } from "./types.js";
14 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/accordion/index.ts:
--------------------------------------------------------------------------------
1 | export * as Accordion from "./exports.js";
2 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/alert-dialog/components/alert-dialog.svelte:
--------------------------------------------------------------------------------
1 |
20 |
21 | {@render children?.()}
22 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/alert-dialog/index.ts:
--------------------------------------------------------------------------------
1 | export * as AlertDialog from "./exports.js";
2 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/aspect-ratio/exports.ts:
--------------------------------------------------------------------------------
1 | export { default as Root } from "./components/aspect-ratio.svelte";
2 |
3 | export type { AspectRatioRootProps as RootProps } from "./types.js";
4 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/aspect-ratio/index.ts:
--------------------------------------------------------------------------------
1 | export * as AspectRatio from "./exports.js";
2 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/aspect-ratio/types.ts:
--------------------------------------------------------------------------------
1 | import type { WithChild, Without } from "$lib/internal/types.js";
2 | import type { BitsPrimitiveDivAttributes } from "$lib/shared/attributes.js";
3 |
4 | export type AspectRatioRootPropsWithoutHTML = WithChild<{
5 | /**
6 | * The aspect ratio of the image.
7 | *
8 | * @defaultValue 1
9 | */
10 | ratio?: number;
11 | }>;
12 |
13 | export type AspectRatioRootProps = AspectRatioRootPropsWithoutHTML &
14 | Without;
15 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/avatar/exports.ts:
--------------------------------------------------------------------------------
1 | export { default as Root } from "./components/avatar.svelte";
2 | export { default as Image } from "./components/avatar-image.svelte";
3 | export { default as Fallback } from "./components/avatar-fallback.svelte";
4 |
5 | export type {
6 | AvatarRootProps as RootProps,
7 | AvatarImageProps as ImageProps,
8 | AvatarFallbackProps as FallbackProps,
9 | } from "./types.js";
10 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/avatar/index.ts:
--------------------------------------------------------------------------------
1 | export * as Avatar from "./exports.js";
2 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/button/components/button.svelte:
--------------------------------------------------------------------------------
1 |
13 |
14 |
26 | {@render children?.()}
27 |
28 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/button/exports.ts:
--------------------------------------------------------------------------------
1 | export { default as Root } from "./components/button.svelte";
2 | export type { ButtonRootProps as RootProps } from "./types.js";
3 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/button/index.ts:
--------------------------------------------------------------------------------
1 | export * as Button from "./exports.js";
2 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/calendar/index.ts:
--------------------------------------------------------------------------------
1 | export * as Calendar from "./exports.js";
2 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/checkbox/components/checkbox-input.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 | {#if inputState.shouldRender}
9 |
10 | {/if}
11 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/checkbox/exports.ts:
--------------------------------------------------------------------------------
1 | export { default as Root } from "./components/checkbox.svelte";
2 | export { default as Group } from "./components/checkbox-group.svelte";
3 | export { default as GroupLabel } from "./components/checkbox-group-label.svelte";
4 | export type {
5 | CheckboxRootProps as RootProps,
6 | CheckboxGroupProps as GroupProps,
7 | CheckboxGroupLabelProps as GroupLabelProps,
8 | } from "./types.js";
9 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/checkbox/index.ts:
--------------------------------------------------------------------------------
1 | export * as Checkbox from "./exports.js";
2 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/collapsible/exports.ts:
--------------------------------------------------------------------------------
1 | export { default as Root } from "./components/collapsible.svelte";
2 | export { default as Content } from "./components/collapsible-content.svelte";
3 | export { default as Trigger } from "./components/collapsible-trigger.svelte";
4 |
5 | export type {
6 | CollapsibleRootProps as RootProps,
7 | CollapsibleContentProps as ContentProps,
8 | CollapsibleTriggerProps as TriggerProps,
9 | } from "./types.js";
10 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/collapsible/index.ts:
--------------------------------------------------------------------------------
1 | export * as Collapsible from "./exports.js";
2 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/combobox/index.ts:
--------------------------------------------------------------------------------
1 | export * as Combobox from "./exports.js";
2 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/command/index.ts:
--------------------------------------------------------------------------------
1 | export * as Command from "./exports.js";
2 | export { computeCommandScore } from "./compute-command-score.js";
3 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/context-menu/index.ts:
--------------------------------------------------------------------------------
1 | export * as ContextMenu from "./exports.js";
2 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/date-field/components/date-field-hidden-input.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 | {#if hiddenInputState.shouldRender}
9 |
10 | {/if}
11 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/date-field/exports.ts:
--------------------------------------------------------------------------------
1 | export { default as Root } from "./components/date-field.svelte";
2 | export { default as Input } from "./components/date-field-input.svelte";
3 | export { default as Label } from "./components/date-field-label.svelte";
4 | export { default as Segment } from "./components/date-field-segment.svelte";
5 |
6 | export type {
7 | DateFieldRootProps as RootProps,
8 | DateFieldInputProps as InputProps,
9 | DateFieldLabelProps as LabelProps,
10 | DateFieldSegmentProps as SegmentProps,
11 | // DateFieldDescriptionProps as DescriptionProps,
12 | } from "./types.js";
13 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/date-field/index.ts:
--------------------------------------------------------------------------------
1 | export * as DateField from "./exports.js";
2 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/date-picker/components/date-picker-content-static.svelte:
--------------------------------------------------------------------------------
1 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/date-picker/components/date-picker-content.svelte:
--------------------------------------------------------------------------------
1 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/date-picker/index.ts:
--------------------------------------------------------------------------------
1 | export * as DatePicker from "./exports.js";
2 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/date-range-field/exports.ts:
--------------------------------------------------------------------------------
1 | export { default as Root } from "./components/date-range-field.svelte";
2 | export { default as Input } from "./components/date-range-field-input.svelte";
3 | export { default as Label } from "./components/date-range-field-label.svelte";
4 | export { default as Segment } from "../date-field/components/date-field-segment.svelte";
5 |
6 | export type {
7 | DateRangeFieldRootProps as RootProps,
8 | DateRangeFieldLabelProps as LabelProps,
9 | DateRangeFieldInputProps as InputProps,
10 | DateRangeFieldSegmentProps as SegmentProps,
11 | } from "./types.js";
12 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/date-range-field/index.ts:
--------------------------------------------------------------------------------
1 | export * as DateRangeField from "./exports.js";
2 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/date-range-picker/index.ts:
--------------------------------------------------------------------------------
1 | export * as DateRangePicker from "./exports.js";
2 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/dialog/components/dialog.svelte:
--------------------------------------------------------------------------------
1 |
20 |
21 | {@render children?.()}
22 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/dialog/index.ts:
--------------------------------------------------------------------------------
1 | export * as Dialog from "./exports.js";
2 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/dropdown-menu/index.ts:
--------------------------------------------------------------------------------
1 | export * as DropdownMenu from "./exports.js";
2 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/label/exports.ts:
--------------------------------------------------------------------------------
1 | export { default as Root } from "./components/label.svelte";
2 | export type { LabelRootProps as RootProps } from "./types.js";
3 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/label/index.ts:
--------------------------------------------------------------------------------
1 | export * as Label from "./exports.js";
2 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/label/types.ts:
--------------------------------------------------------------------------------
1 | import type { WithChild, Without } from "$lib/internal/types.js";
2 | import type { BitsPrimitiveLabelAttributes } from "$lib/shared/attributes.js";
3 |
4 | export type LabelRootPropsWithoutHTML = WithChild;
5 |
6 | export type LabelRootProps = LabelRootPropsWithoutHTML &
7 | Without;
8 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/link-preview/index.ts:
--------------------------------------------------------------------------------
1 | export * as LinkPreview from "./exports.js";
2 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/menu/components/menu-arrow.svelte:
--------------------------------------------------------------------------------
1 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/menu/components/menu-sub.svelte:
--------------------------------------------------------------------------------
1 |
20 |
21 |
22 | {@render children?.()}
23 |
24 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/menubar/index.ts:
--------------------------------------------------------------------------------
1 | export * as Menubar from "./exports.js";
2 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/meter/exports.ts:
--------------------------------------------------------------------------------
1 | export { default as Root } from "./components/meter.svelte";
2 | export type { MeterRootProps as RootProps } from "./types.js";
3 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/meter/index.ts:
--------------------------------------------------------------------------------
1 | export * as Meter from "./exports.js";
2 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/meter/types.ts:
--------------------------------------------------------------------------------
1 | import type { WithChild, Without } from "$lib/internal/types.js";
2 | import type { BitsPrimitiveDivAttributes } from "$lib/shared/attributes.js";
3 |
4 | export type MeterRootPropsWithoutHTML = WithChild<{
5 | /**
6 | * The current value of the meter.
7 | *
8 | * @default 0
9 | */
10 | value?: number;
11 |
12 | /**
13 | * The maximum value of the meter.
14 | *
15 | * @default 100
16 | */
17 | max?: number;
18 |
19 | /**
20 | * The minimum value of the meter.
21 | *
22 | * @default 0
23 | */
24 | min?: number;
25 | }>;
26 |
27 | export type MeterRootProps = MeterRootPropsWithoutHTML &
28 | Without;
29 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/navigation-menu/index.ts:
--------------------------------------------------------------------------------
1 | export * as NavigationMenu from "./exports.js";
2 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/pagination/exports.ts:
--------------------------------------------------------------------------------
1 | export { default as Root } from "./components/pagination.svelte";
2 | export { default as PrevButton } from "./components/pagination-prev-button.svelte";
3 | export { default as NextButton } from "./components/pagination-next-button.svelte";
4 | export { default as Page } from "./components/pagination-page.svelte";
5 |
6 | export type {
7 | PaginationRootProps as RootProps,
8 | PaginationPrevButtonProps as PrevButtonProps,
9 | PaginationNextButtonProps as NextButtonProps,
10 | PaginationPageProps as PageProps,
11 | } from "./types.js";
12 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/pagination/index.ts:
--------------------------------------------------------------------------------
1 | export * as Pagination from "./exports.js";
2 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/pin-input/exports.ts:
--------------------------------------------------------------------------------
1 | export { default as Root } from "./components/pin-input.svelte";
2 | export { default as Cell } from "./components/pin-input-cell.svelte";
3 |
4 | export type { PinInputRootProps as RootProps, PinInputCellProps as CellProps } from "./types.js";
5 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/pin-input/index.ts:
--------------------------------------------------------------------------------
1 | export * as PinInput from "./exports.js";
2 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/popover/components/popover-arrow.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/popover/components/popover.svelte:
--------------------------------------------------------------------------------
1 |
20 |
21 |
22 | {@render children?.()}
23 |
24 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/popover/index.ts:
--------------------------------------------------------------------------------
1 | export * as Popover from "./exports.js";
2 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/progress/exports.ts:
--------------------------------------------------------------------------------
1 | export { default as Root } from "./components/progress.svelte";
2 |
3 | export type { ProgressRootProps as RootProps } from "./types.js";
4 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/progress/index.ts:
--------------------------------------------------------------------------------
1 | export * as Progress from "./exports.js";
2 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/radio-group/components/radio-group-input.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 | {#if inputState.shouldRender}
9 |
10 | {/if}
11 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/radio-group/exports.ts:
--------------------------------------------------------------------------------
1 | export { default as Root } from "./components/radio-group.svelte";
2 | export { default as Item } from "./components/radio-group-item.svelte";
3 |
4 | export type {
5 | RadioGroupRootProps as RootProps,
6 | RadioGroupItemProps as ItemProps,
7 | } from "./types.js";
8 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/radio-group/index.ts:
--------------------------------------------------------------------------------
1 | export * as RadioGroup from "./exports.js";
2 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/range-calendar/index.ts:
--------------------------------------------------------------------------------
1 | export * as RangeCalendar from "./exports.js";
2 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/rating-group/components/rating-group-input.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 | {#if inputState.shouldRender}
9 |
10 | {/if}
11 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/rating-group/exports.ts:
--------------------------------------------------------------------------------
1 | export { default as Root } from "./components/rating-group.svelte";
2 | export { default as Item } from "./components/rating-group-item.svelte";
3 |
4 | export type {
5 | RatingGroupRootProps as RootProps,
6 | RatingGroupItemProps as ItemProps,
7 | } from "./types.js";
8 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/rating-group/index.ts:
--------------------------------------------------------------------------------
1 | export * as RatingGroup from "./exports.js";
2 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/scroll-area/components/scroll-area-scrollbar-shared.svelte:
--------------------------------------------------------------------------------
1 |
12 |
13 | {#if child}
14 | {@render child({ props: mergedProps })}
15 | {:else}
16 |
17 | {@render children?.()}
18 |
19 | {/if}
20 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/scroll-area/components/scroll-area-scrollbar-visible.svelte:
--------------------------------------------------------------------------------
1 |
11 |
12 | {#if scrollbarVisibleState.scrollbar.opts.orientation.current === "horizontal"}
13 |
14 | {:else}
15 |
16 | {/if}
17 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/scroll-area/exports.ts:
--------------------------------------------------------------------------------
1 | export { default as Root } from "./components/scroll-area.svelte";
2 | export { default as Viewport } from "./components/scroll-area-viewport.svelte";
3 | export { default as Scrollbar } from "./components/scroll-area-scrollbar.svelte";
4 | export { default as Thumb } from "./components/scroll-area-thumb.svelte";
5 | export { default as Corner } from "./components/scroll-area-corner.svelte";
6 |
7 | export type {
8 | ScrollAreaRootProps as RootProps,
9 | ScrollAreaViewportProps as ViewportProps,
10 | ScrollAreaScrollbarProps as ScrollbarProps,
11 | ScrollAreaThumbProps as ThumbProps,
12 | ScrollAreaCornerProps as CornerProps,
13 | } from "./types.js";
14 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/scroll-area/index.ts:
--------------------------------------------------------------------------------
1 | export * as ScrollArea from "./exports.js";
2 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/select/components/select-hidden-input.svelte:
--------------------------------------------------------------------------------
1 |
12 |
13 | {#if hiddenInputState.shouldRender}
14 |
15 | {/if}
16 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/select/index.ts:
--------------------------------------------------------------------------------
1 | export * as Select from "./exports.js";
2 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/separator/exports.ts:
--------------------------------------------------------------------------------
1 | export { default as Root } from "./components/separator.svelte";
2 |
3 | export type { SeparatorRootProps as RootProps } from "./types.js";
4 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/separator/index.ts:
--------------------------------------------------------------------------------
1 | export * as Separator from "./exports.js";
2 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/separator/types.ts:
--------------------------------------------------------------------------------
1 | import type { WithChild, Without } from "$lib/internal/types.js";
2 | import type { Orientation } from "$lib/shared/index.js";
3 | import type { BitsPrimitiveDivAttributes } from "$lib/shared/attributes.js";
4 |
5 | export type SeparatorRootPropsWithoutHTML = WithChild<{
6 | /**
7 | * The orientation of the separator.
8 | *
9 | * @defaultValue "horizontal"
10 | */
11 | orientation?: Orientation;
12 |
13 | /**
14 | * Whether the separator is decorative and should be hidden from assistive technologies.
15 | *
16 | * @defaultValue false
17 | */
18 | decorative?: boolean;
19 | }>;
20 |
21 | export type SeparatorRootProps = SeparatorRootPropsWithoutHTML &
22 | Without;
23 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/slider/exports.ts:
--------------------------------------------------------------------------------
1 | export { default as Root } from "./components/slider.svelte";
2 | export { default as Range } from "./components/slider-range.svelte";
3 | export { default as Thumb } from "./components/slider-thumb.svelte";
4 | export { default as Tick } from "./components/slider-tick.svelte";
5 | export { default as TickLabel } from "./components/slider-tick-label.svelte";
6 | export { default as ThumbLabel } from "./components/slider-thumb-label.svelte";
7 |
8 | export type {
9 | SliderRootProps as RootProps,
10 | SliderRangeProps as RangeProps,
11 | SliderThumbProps as ThumbProps,
12 | SliderTickProps as TickProps,
13 | SliderTickLabelProps as TickLabelProps,
14 | SliderThumbLabelProps as ThumbLabelProps,
15 | } from "./types.js";
16 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/slider/index.ts:
--------------------------------------------------------------------------------
1 | export * as Slider from "./exports.js";
2 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/switch/components/switch-input.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 | {#if inputState.shouldRender}
9 |
10 | {/if}
11 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/switch/exports.ts:
--------------------------------------------------------------------------------
1 | export { default as Root } from "./components/switch.svelte";
2 | export { default as Thumb } from "./components/switch-thumb.svelte";
3 |
4 | export type { SwitchRootProps as RootProps, SwitchThumbProps as ThumbProps } from "./types.js";
5 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/switch/index.ts:
--------------------------------------------------------------------------------
1 | export * as Switch from "./exports.js";
2 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/tabs/exports.ts:
--------------------------------------------------------------------------------
1 | export { default as Root } from "./components/tabs.svelte";
2 | export { default as Content } from "./components/tabs-content.svelte";
3 | export { default as List } from "./components/tabs-list.svelte";
4 | export { default as Trigger } from "./components/tabs-trigger.svelte";
5 |
6 | export type {
7 | TabsRootProps as RootProps,
8 | TabsContentProps as ContentProps,
9 | TabsTriggerProps as TriggerProps,
10 | TabsListProps as ListProps,
11 | } from "./types.js";
12 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/tabs/index.ts:
--------------------------------------------------------------------------------
1 | export * as Tabs from "./exports.js";
2 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/time-field/components/time-field-hidden-input.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 | {#if hiddenInputState.shouldRender}
9 |
10 | {/if}
11 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/time-field/exports.ts:
--------------------------------------------------------------------------------
1 | export { default as Root } from "./components/time-field.svelte";
2 | export { default as Input } from "./components/time-field-input.svelte";
3 | export { default as Label } from "./components/time-field-label.svelte";
4 | export { default as Segment } from "./components/time-field-segment.svelte";
5 |
6 | export type {
7 | TimeFieldRootProps as RootProps,
8 | TimeFieldInputProps as InputProps,
9 | TimeFieldLabelProps as LabelProps,
10 | TimeFieldSegmentProps as SegmentProps,
11 | // DateFieldDescriptionProps as DescriptionProps,
12 | } from "./types.js";
13 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/time-field/index.ts:
--------------------------------------------------------------------------------
1 | export * as TimeField from "./exports.js";
2 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/time-range-field/exports.ts:
--------------------------------------------------------------------------------
1 | export { default as Root } from "./components/time-range-field.svelte";
2 | export { default as Input } from "./components/time-range-field-input.svelte";
3 | export { default as Label } from "./components/time-range-field-label.svelte";
4 | export { default as Segment } from "../time-field/components/time-field-segment.svelte";
5 |
6 | export type {
7 | TimeRangeFieldRootProps as RootProps,
8 | TimeRangeFieldLabelProps as LabelProps,
9 | TimeRangeFieldInputProps as InputProps,
10 | TimeRangeFieldSegmentProps as SegmentProps,
11 | } from "./types.js";
12 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/time-range-field/index.ts:
--------------------------------------------------------------------------------
1 | export * as TimeRangeField from "./exports.js";
2 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/toggle-group/exports.ts:
--------------------------------------------------------------------------------
1 | export { default as Root } from "./components/toggle-group.svelte";
2 | export { default as Item } from "./components/toggle-group-item.svelte";
3 |
4 | export type {
5 | ToggleGroupRootProps as RootProps,
6 | ToggleGroupItemProps as ItemProps,
7 | } from "./types.js";
8 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/toggle-group/index.ts:
--------------------------------------------------------------------------------
1 | export * as ToggleGroup from "./exports.js";
2 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/toggle/exports.ts:
--------------------------------------------------------------------------------
1 | export { default as Root } from "./components/toggle.svelte";
2 | export type { ToggleRootProps as RootProps } from "./types.js";
3 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/toggle/index.ts:
--------------------------------------------------------------------------------
1 | export * as Toggle from "./exports.js";
2 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/toolbar/exports.ts:
--------------------------------------------------------------------------------
1 | export { default as Root } from "./components/toolbar.svelte";
2 | export { default as Button } from "./components/toolbar-button.svelte";
3 | export { default as Link } from "./components/toolbar-link.svelte";
4 | export { default as Group } from "./components/toolbar-group.svelte";
5 | export { default as GroupItem } from "./components/toolbar-group-item.svelte";
6 |
7 | export type {
8 | ToolbarRootProps as RootProps,
9 | ToolbarButtonProps as ButtonProps,
10 | ToolbarLinkProps as LinkProps,
11 | ToolbarGroupProps as GroupProps,
12 | ToolbarGroupItemProps as GroupItemProps,
13 | } from "./types.js";
14 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/toolbar/index.ts:
--------------------------------------------------------------------------------
1 | export * as Toolbar from "./exports.js";
2 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/tooltip/components/tooltip-arrow.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/tooltip/index.ts:
--------------------------------------------------------------------------------
1 | export * as Tooltip from "./exports.js";
2 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/tooltip/utils.ts:
--------------------------------------------------------------------------------
1 | export const TOOLTIP_OPEN_EVENT = "tooltip.open";
2 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/utilities/arrow/index.ts:
--------------------------------------------------------------------------------
1 | export { default as Arrow } from "./arrow.svelte";
2 | export type { ArrowProps } from "./types.js";
3 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/utilities/arrow/types.ts:
--------------------------------------------------------------------------------
1 | import type { WithChild } from "$lib/internal/types.js";
2 | import type { BitsPrimitiveSpanAttributes } from "$lib/shared/attributes.js";
3 |
4 | export type ArrowPropsWithoutHTML = WithChild<{
5 | /**
6 | * The width of the arrow in pixels.
7 | *
8 | * @defaultValue 10
9 | */
10 | width?: number;
11 |
12 | /**
13 | * The height of the arrow in pixels.
14 | *
15 | * @defaultValue 5
16 | */
17 | height?: number;
18 | }>;
19 |
20 | export type ArrowProps = ArrowPropsWithoutHTML & BitsPrimitiveSpanAttributes;
21 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/utilities/config/components/bits-config.svelte:
--------------------------------------------------------------------------------
1 |
13 |
14 | {@render children?.()}
15 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/utilities/config/exports.ts:
--------------------------------------------------------------------------------
1 | export { default as BitsConfig } from "./components/bits-config.svelte";
2 | export { getBitsConfig, BitsConfigState } from "./bits-config.js";
3 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/utilities/config/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./exports.js";
2 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/utilities/config/types.ts:
--------------------------------------------------------------------------------
1 | import type { WithChildren } from "$lib/internal/types.js";
2 | import type { PortalTarget } from "$lib/bits/utilities/portal/types.js";
3 |
4 | export type BitsConfigPropsWithoutChildren = {
5 | /**
6 | * The default portal `to`/target to use for the `Portal` components throughout the app.
7 | */
8 | defaultPortalTo?: PortalTarget;
9 |
10 | /**
11 | * The default locale to use for the components that support localization.
12 | */
13 | defaultLocale?: string;
14 | };
15 | export type BitsConfigProps = WithChildren;
16 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/utilities/dismissible-layer/index.ts:
--------------------------------------------------------------------------------
1 | export { default as DismissibleLayer } from "./dismissible-layer.svelte";
2 |
3 | export type { DismissibleLayerProps } from "./types.js";
4 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/utilities/escape-layer/escape-layer.svelte:
--------------------------------------------------------------------------------
1 |
22 |
23 | {@render children?.()}
24 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/utilities/escape-layer/index.ts:
--------------------------------------------------------------------------------
1 | export { default as EscapeLayer } from "./escape-layer.svelte";
2 |
3 | export type { EscapeLayerProps } from "./types.js";
4 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/utilities/floating-layer/components/floating-layer-anchor.svelte:
--------------------------------------------------------------------------------
1 |
18 |
19 | {@render children?.()}
20 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/utilities/floating-layer/components/floating-layer-arrow.svelte:
--------------------------------------------------------------------------------
1 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/utilities/floating-layer/components/floating-layer-content-static.svelte:
--------------------------------------------------------------------------------
1 |
18 |
19 | {@render content?.({ props: {}, wrapperProps: {} })}
20 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/utilities/floating-layer/components/floating-layer.svelte:
--------------------------------------------------------------------------------
1 |
9 |
10 | {@render children?.()}
11 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/utilities/floating-layer/components/index.ts:
--------------------------------------------------------------------------------
1 | export { default as Anchor } from "./floating-layer-anchor.svelte";
2 | export { default as Arrow } from "./floating-layer-arrow.svelte";
3 | export { default as Content } from "./floating-layer-content.svelte";
4 | export { default as ContentStatic } from "./floating-layer-content-static.svelte";
5 | export { default as Root } from "./floating-layer.svelte";
6 |
7 | export type {
8 | FloatingLayerContentImplProps as ContentImplProps,
9 | FloatingLayerContentProps as ContentProps,
10 | FloatingLayerAnchorProps as AnchorProps,
11 | } from "../types.js";
12 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/utilities/floating-layer/index.ts:
--------------------------------------------------------------------------------
1 | export * as FloatingLayer from "./components/index.js";
2 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/utilities/focus-scope/index.ts:
--------------------------------------------------------------------------------
1 | export { default as FocusScope } from "./focus-scope.svelte";
2 |
3 | export type { FocusScopeProps } from "./types.js";
4 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/utilities/hidden-input.svelte:
--------------------------------------------------------------------------------
1 |
15 |
16 | {#if mergedProps.type === "checkbox"}
17 |
18 | {:else}
19 |
20 | {/if}
21 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/utilities/index.ts:
--------------------------------------------------------------------------------
1 | export { default as Mounted } from "./mounted.svelte";
2 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/utilities/mounted.svelte:
--------------------------------------------------------------------------------
1 |
19 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/utilities/popper-layer/index.ts:
--------------------------------------------------------------------------------
1 | export { default as PopperLayer } from "./popper-layer.svelte";
2 | export type { PopperLayerProps } from "./types.js";
3 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/utilities/popper-layer/popper-content.svelte:
--------------------------------------------------------------------------------
1 |
13 |
14 | {#if isStatic}
15 |
16 | {:else}
17 |
18 | {/if}
19 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/utilities/portal/index.ts:
--------------------------------------------------------------------------------
1 | export { default as Portal } from "./portal.svelte";
2 | export type { PortalProps } from "./types.js";
3 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/utilities/portal/portal-consumer.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 | {#key children}
8 | {@render children?.()}
9 | {/key}
10 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/utilities/portal/types.ts:
--------------------------------------------------------------------------------
1 | import type { Snippet } from "svelte";
2 |
3 | export type PortalTarget = Element | string;
4 |
5 | export type PortalProps = {
6 | /**
7 | * Where to portal the content to.
8 | *
9 | * @default document.body
10 | */
11 | to?: PortalTarget;
12 |
13 | /**
14 | * Disable portalling and render the component inline
15 | *
16 | * @defaultValue false
17 | */
18 | disabled?: boolean;
19 |
20 | /**
21 | * The children content to render within the portal.
22 | */
23 | children?: Snippet;
24 | };
25 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/utilities/presence-layer/index.ts:
--------------------------------------------------------------------------------
1 | export { default as PresenceLayer } from "./presence-layer.svelte";
2 |
3 | export type { PresenceLayerProps } from "./types.js";
4 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/utilities/presence-layer/presence-layer.svelte:
--------------------------------------------------------------------------------
1 |
13 |
14 | {#if forceMount || present || isPresent.current}
15 | {@render presence?.({ present: isPresent })}
16 | {/if}
17 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/utilities/presence-layer/types.ts:
--------------------------------------------------------------------------------
1 | import type { Snippet } from "svelte";
2 | import type { ReadableBox } from "svelte-toolbelt";
3 |
4 | export type PresenceLayerProps = {
5 | /**
6 | * Whether to force mount the component.
7 | */
8 | forceMount?: boolean;
9 | };
10 |
11 | export type PresenceLayerImplProps = PresenceLayerProps & {
12 | /**
13 | * The presence status.
14 | */
15 | present: boolean;
16 |
17 | presence?: Snippet<[{ present: { current: boolean } }]>;
18 |
19 | ref: ReadableBox;
20 | };
21 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/utilities/scroll-lock/index.ts:
--------------------------------------------------------------------------------
1 | export type ScrollLockProps = {
2 | /**
3 | * Whether to prevent body scrolling when the content is open.
4 | *
5 | * @defaultValue true
6 | */
7 | preventScroll?: boolean;
8 |
9 | /**
10 | * The delay in milliseconds before the scrollbar is restored after closing the
11 | * dialog. This is only applicable when using the `child` snippet for custom
12 | * transitions and `preventScroll` is `true`. You should set this to a value
13 | * greater than the transition duration to prevent content from shifting during
14 | * the transition.
15 | *
16 | * @defaultValue null
17 | */
18 | restoreScrollDelay?: number | null;
19 | };
20 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/utilities/scroll-lock/scroll-lock.svelte:
--------------------------------------------------------------------------------
1 |
9 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/utilities/text-selection-layer/index.ts:
--------------------------------------------------------------------------------
1 | export { default as TextSelectionLayer } from "./text-selection-layer.svelte";
2 |
3 | export type { TextSelectionLayerProps } from "./types.js";
4 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/utilities/visually-hidden/index.ts:
--------------------------------------------------------------------------------
1 | export { default as VisuallyHidden } from "./visually-hidden.svelte";
2 | export type * from "./types.js";
3 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/bits/utilities/visually-hidden/types.ts:
--------------------------------------------------------------------------------
1 | import type { WithChild } from "$lib/internal/types.js";
2 | import type { BitsPrimitiveSpanAttributes } from "$lib/shared/attributes.js";
3 |
4 | export type VisuallyHiddenProps = WithChild;
5 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/internal/clamp.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Clamps a number between a minimum and maximum value.
3 | */
4 | export function clamp(n: number, min: number, max: number) {
5 | return Math.min(max, Math.max(min, n));
6 | }
7 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/internal/create-id.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Creates a unique ID for a given uid and optional prefix.
3 | *
4 | * @param uid - the uid generated by $props.id()
5 | * @param prefix - optional prefix to use for the id (defaults to "bits")
6 | */
7 | export function createId(uid: string): string;
8 | export function createId(prefix: string, uid: string): string;
9 | export function createId(prefixOrUid: string, uid?: string): string {
10 | if (uid === undefined) return `bits-${prefixOrUid}`;
11 | return `bits-${prefixOrUid}-${uid}`;
12 | }
13 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/internal/debounce.ts:
--------------------------------------------------------------------------------
1 | // eslint-disable-next-line @typescript-eslint/no-explicit-any
2 | export function debounce any>(fn: T, wait = 500) {
3 | let timeout: NodeJS.Timeout | null = null;
4 |
5 | const debounced = (...args: Parameters) => {
6 | if (timeout !== null) {
7 | clearTimeout(timeout);
8 | }
9 | timeout = setTimeout(() => {
10 | fn(...args);
11 | }, wait);
12 | };
13 |
14 | debounced.destroy = () => {
15 | if (timeout !== null) {
16 | clearTimeout(timeout);
17 | timeout = null;
18 | }
19 | };
20 |
21 | return debounced;
22 | }
23 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/internal/elements.ts:
--------------------------------------------------------------------------------
1 | export function isOrContainsTarget(node: HTMLElement, target: Element) {
2 | return node === target || node.contains(target);
3 | }
4 |
5 | export function getOwnerDocument(el: Element | null | undefined) {
6 | return el?.ownerDocument ?? document;
7 | }
8 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/internal/kbd.ts:
--------------------------------------------------------------------------------
1 | export * as kbd from "./kbd-constants.js";
2 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/internal/locale.ts:
--------------------------------------------------------------------------------
1 | // https://github.com/melt-ui/melt-ui
2 | import type { Direction } from "$lib/shared/index.js";
3 |
4 | /**
5 | * Detects the text direction in the element.
6 | * @returns {Direction} The text direction ('ltr' for left-to-right or 'rtl' for right-to-left).
7 | */
8 | export function getElemDirection(elem: HTMLElement): Direction {
9 | const style = window.getComputedStyle(elem);
10 | const direction = style.getPropertyValue("direction");
11 |
12 | return direction as Direction;
13 | }
14 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/internal/math.ts:
--------------------------------------------------------------------------------
1 | export function linearScale(
2 | domain: [number, number],
3 | range: [number, number],
4 | clamp: boolean = true
5 | ): (x: number) => number {
6 | const [d0, d1] = domain;
7 | const [r0, r1] = range;
8 |
9 | const slope = (r1 - r0) / (d1 - d0);
10 |
11 | return (x: number) => {
12 | const result = r0 + slope * (x - d0);
13 | if (!clamp) return result;
14 | if (result > Math.max(r0, r1)) return Math.max(r0, r1);
15 | if (result < Math.min(r0, r1)) return Math.min(r0, r1);
16 | return result;
17 | };
18 | }
19 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/internal/noop.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * A no operation function (does nothing)
3 | */
4 | export function noop() {}
5 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/internal/should-trap-focus.ts:
--------------------------------------------------------------------------------
1 | export function shouldTrapFocus({
2 | forceMount,
3 | present,
4 | trapFocus,
5 | open,
6 | }: {
7 | forceMount: boolean;
8 | present: boolean;
9 | trapFocus: boolean;
10 | open: boolean;
11 | }): boolean {
12 | if (forceMount) {
13 | return open && trapFocus;
14 | }
15 | return present && trapFocus && open;
16 | }
17 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/internal/sleep.ts:
--------------------------------------------------------------------------------
1 | export function sleep(ms: number) {
2 | return new Promise((resolve) => setTimeout(resolve, ms));
3 | }
4 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/internal/use-form-control.svelte.ts:
--------------------------------------------------------------------------------
1 | import type { Getter } from "svelte-toolbelt";
2 | import { isBrowser } from "./is.js";
3 |
4 | export function useFormControl(getNode: Getter) {
5 | const isInForm = $derived.by(() => {
6 | if (!isBrowser) return false;
7 | const node = getNode();
8 | if (!node) return false;
9 | return Boolean(node.closest("form"));
10 | });
11 |
12 | return {
13 | get current() {
14 | return isInForm;
15 | },
16 | };
17 | }
18 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/internal/use-id.ts:
--------------------------------------------------------------------------------
1 | globalThis.bitsIdCounter ??= { current: 0 };
2 |
3 | /**
4 | * Generates a unique ID based on a global counter.
5 | */
6 | export function useId(prefix = "bits") {
7 | globalThis.bitsIdCounter.current++;
8 | return `${prefix}-${globalThis.bitsIdCounter.current}`;
9 | }
10 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/internal/use-resize-observer.svelte.ts:
--------------------------------------------------------------------------------
1 | import type { Getter } from "svelte-toolbelt";
2 |
3 | export function useResizeObserver(node: Getter, onResize: () => void) {
4 | $effect(() => {
5 | let rAF = 0;
6 | const _node = node();
7 | if (!_node) return;
8 | const resizeObserver = new ResizeObserver(() => {
9 | cancelAnimationFrame(rAF);
10 | rAF = window.requestAnimationFrame(onResize);
11 | });
12 |
13 | resizeObserver.observe(_node);
14 | return () => {
15 | window.cancelAnimationFrame(rAF);
16 | resizeObserver.unobserve(_node);
17 | };
18 | });
19 | }
20 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/shared/css.d.ts:
--------------------------------------------------------------------------------
1 | // eslint-disable-next-line @typescript-eslint/no-unused-vars
2 | import type * as CSS from "csstype";
3 |
4 | declare module "csstype" {
5 | interface Properties {
6 | // Allow any CSS Custom Properties
7 | // eslint-disable-next-line @typescript-eslint/no-explicit-any
8 | [index: `--${string}`]: any;
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/packages/bits-ui/src/lib/shared/types.ts:
--------------------------------------------------------------------------------
1 | export type FloatingContentSnippetProps = {
2 | /**
3 | * Whether the content is open or closed. Used alongside the `forceMount` prop to
4 | * conditionally render the content using Svelte transitions.
5 | */
6 | open: boolean;
7 |
8 | /**
9 | * Attributes to spread onto a wrapper element around the content.
10 | * Do not style the wrapper element, its styles are computed by Floating UI.
11 | */
12 | wrapperProps: Record;
13 | };
14 |
15 | export type StaticContentSnippetProps = Omit;
16 |
--------------------------------------------------------------------------------
/packages/bits-ui/svelte.config.js:
--------------------------------------------------------------------------------
1 | // @ts-check
2 | import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
3 |
4 | /** @type {import('@sveltejs/kit').Config} */
5 | const config = {
6 | preprocess: [vitePreprocess()],
7 | };
8 |
9 | export default config;
10 |
--------------------------------------------------------------------------------
/packages/bits-ui/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./.svelte-kit/tsconfig.json",
3 | "compilerOptions": {
4 | "allowJs": true,
5 | "checkJs": true,
6 | "esModuleInterop": true,
7 | "forceConsistentCasingInFileNames": true,
8 | "resolveJsonModule": true,
9 | "skipLibCheck": true,
10 | "sourceMap": true,
11 | "strict": true,
12 | "moduleResolution": "NodeNext",
13 | "module": "NodeNext",
14 | "verbatimModuleSyntax": true,
15 | "noUncheckedIndexedAccess": true,
16 | "erasableSyntaxOnly": true
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/pnpm-workspace.yaml:
--------------------------------------------------------------------------------
1 | packages:
2 | - "packages/*"
3 | - "docs"
4 | - "tests"
5 |
--------------------------------------------------------------------------------
/tests/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 |
3 | # Output
4 | .output
5 | .vercel
6 | /.svelte-kit
7 | /build
8 |
9 | # OS
10 | .DS_Store
11 | Thumbs.db
12 |
13 | # Env
14 | .env
15 | .env.*
16 | !.env.example
17 | !.env.test
18 |
19 | # Vite
20 | vite.config.js.timestamp-*
21 | vite.config.ts.timestamp-*
22 |
--------------------------------------------------------------------------------
/tests/.npmrc:
--------------------------------------------------------------------------------
1 | engine-strict=true
2 |
--------------------------------------------------------------------------------
/tests/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 {};
14 |
--------------------------------------------------------------------------------
/tests/src/app.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | %sveltekit.head%
8 |
9 |
10 | %sveltekit.body%
11 |
12 |
13 |
--------------------------------------------------------------------------------
/tests/src/tests/accordion/accordion-test-isolated.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 |
8 | open
9 |
10 | item 1
11 |
12 |
13 |
--------------------------------------------------------------------------------
/tests/src/tests/avatar/avatar-test.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
9 | HJ
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/tests/src/tests/checkbox/checkbox-test.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 | {checked}
9 |
10 | {#snippet children({ checked, indeterminate })}
11 |
12 | {#if indeterminate}
13 | indeterminate
14 | {:else}
15 | {checked}
16 | {/if}
17 |
18 | {/snippet}
19 |
20 |
21 |
--------------------------------------------------------------------------------
/tests/src/tests/collapsible/collapsible-test.svelte:
--------------------------------------------------------------------------------
1 |
9 |
10 |
11 | {open}
12 |
13 | Trigger
14 | Content
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/tests/src/tests/helpers/calendar.ts:
--------------------------------------------------------------------------------
1 | export function getSelectedDays(calendar: HTMLElement) {
2 | return Array.from(calendar.querySelectorAll("[data-bits-day][data-selected]"));
3 | }
4 |
5 | export function getSelectedDay(calendar: HTMLElement) {
6 | return calendar.querySelector("[data-bits-day][data-selected]") as HTMLElement;
7 | }
8 |
--------------------------------------------------------------------------------
/tests/src/tests/helpers/select.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Generates consistent test ids for select items, handling empty strings and null values
3 | * @param value - The value of the item
4 | * @returns The test id
5 | */
6 | export function generateTestId(value: string | null) {
7 | return value && value !== null ? value : "empty";
8 | }
9 | export function getTestId(item: { value: string | null }) {
10 | return item.value && item.value !== null ? item.value : "empty";
11 | }
12 |
--------------------------------------------------------------------------------
/tests/src/tests/label/label-test.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 | Label
7 |
8 |
9 |
--------------------------------------------------------------------------------
/tests/src/tests/meter/meter-test.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/tests/src/tests/progress/progress-test.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/tests/src/tests/separator/separator-test.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/tests/src/tests/switch/switch-test.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/tests/src/tests/toggle/toggle-test.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
9 | a
10 |
11 |
--------------------------------------------------------------------------------
/tests/src/tests/tooltip/tooltip-popover-test.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 |
8 |
9 | {#snippet child({ props })}
10 | Resize
11 | {/snippet}
12 |
13 |
14 |
15 |
16 |
17 |
18 | Hello World!
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/tests/src/tests/utilities/is-using-keyboard/is-using-keyboard-test.svelte:
--------------------------------------------------------------------------------
1 |
8 |
--------------------------------------------------------------------------------
/tests/static/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huntabyte/bits-ui/696ff0b59c929c94b07f02a99b1818da1cecdabb/tests/static/favicon.png
--------------------------------------------------------------------------------
/tests/svelte.config.js:
--------------------------------------------------------------------------------
1 | import adapter from "@sveltejs/adapter-auto";
2 | import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
3 |
4 | /** @type {import('@sveltejs/kit').Config} */
5 | const config = {
6 | // Consult https://kit.svelte.dev/docs/integrations#preprocessors
7 | // for more information about preprocessors
8 | preprocess: vitePreprocess(),
9 |
10 | kit: {
11 | // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
12 | // If your environment is not supported, or you settled on a specific environment, switch out the adapter.
13 | // See https://kit.svelte.dev/docs/adapters for more information about adapters.
14 | adapter: adapter(),
15 | },
16 | };
17 |
18 | export default config;
19 |
--------------------------------------------------------------------------------
/tests/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./.svelte-kit/tsconfig.json",
3 | "compilerOptions": {
4 | "allowJs": true,
5 | "checkJs": true,
6 | "esModuleInterop": true,
7 | "forceConsistentCasingInFileNames": true,
8 | "resolveJsonModule": true,
9 | "skipLibCheck": true,
10 | "sourceMap": true,
11 | "strict": true,
12 | "moduleResolution": "bundler"
13 | }
14 | // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
15 | // except $lib which is handled by https://kit.svelte.dev/docs/configuration#files
16 | //
17 | // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
18 | // from the referenced tsconfig.json - TypeScript does not merge them in
19 | }
20 |
--------------------------------------------------------------------------------