├── .changeset ├── README.md └── config.json ├── .github ├── DISCUSSION_TEMPLATE │ └── requests.yml ├── ISSUE_TEMPLATE │ ├── bug_report.yml │ ├── config.yml │ └── feature_request.yml ├── actions │ └── setup │ │ └── action.yml ├── changeset-version.js ├── version-script-beta.js ├── version-script-next.js └── workflows │ ├── ci.yml │ ├── prerelease.yml │ ├── release.yml │ └── semantic-pr.yml ├── .gitignore ├── .prettierrc.cjs ├── .vscode └── settings.json ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── commitlint.config.mjs ├── package.json ├── packages ├── cli │ ├── .gitignore │ ├── .prettierignore │ ├── CHANGELOG.md │ ├── README.md │ ├── eslint.config.mjs │ ├── package.json │ ├── src │ │ ├── commands │ │ │ ├── add.ts │ │ │ └── init.ts │ │ ├── constants.ts │ │ ├── helpers │ │ │ ├── add-checks.ts │ │ │ ├── add-primitives.ts │ │ │ ├── get-config-paths.ts │ │ │ ├── get-config.ts │ │ │ ├── get-package-info.ts │ │ │ ├── get-project-info.ts │ │ │ ├── handle-error.ts │ │ │ ├── init-checks.ts │ │ │ ├── registry-api.ts │ │ │ ├── transformers │ │ │ │ ├── index.ts │ │ │ │ └── transform-import.ts │ │ │ └── updaters │ │ │ │ ├── index.ts │ │ │ │ ├── update-deps.ts │ │ │ │ └── update-files.ts │ │ ├── index.ts │ │ ├── registry │ │ │ ├── api.ts │ │ │ └── helpers.ts │ │ └── utils │ │ │ ├── get-package-manager.ts │ │ │ ├── index.ts │ │ │ ├── is-url.ts │ │ │ ├── logger.ts │ │ │ ├── resolve-import.ts │ │ │ └── spinner.ts │ ├── tsconfig.json │ └── tsup.config.ts ├── config │ ├── eslint │ │ ├── README.md │ │ ├── base.js │ │ ├── next.js │ │ ├── package.json │ │ └── react-internal.js │ └── ts-config │ │ ├── README.md │ │ ├── base.json │ │ ├── nextjs.json │ │ ├── package.json │ │ └── react-library.json └── schemas │ ├── index.ts │ ├── package.json │ ├── schema.ts │ └── types.ts ├── pnpm-lock.yaml ├── pnpm-workspace.yaml ├── turbo.json └── www ├── .gitignore ├── .prettierignore ├── content └── docs │ ├── components │ ├── buttons │ │ ├── button.mdx │ │ ├── file-trigger.mdx │ │ ├── meta.json │ │ └── toggle-button.mdx │ ├── colors │ │ ├── color-area.mdx │ │ ├── color-field.mdx │ │ ├── color-picker.mdx │ │ ├── color-slider.mdx │ │ ├── color-swatch-picker.mdx │ │ ├── color-swatch.mdx │ │ └── meta.json │ ├── data-display │ │ ├── avatar.mdx │ │ ├── badge.mdx │ │ ├── meta.json │ │ ├── separator.mdx │ │ └── table.mdx │ ├── date-and-time │ │ ├── calendar.mdx │ │ ├── date-field.mdx │ │ ├── date-picker.mdx │ │ ├── date-range-picker.mdx │ │ ├── meta.json │ │ ├── range-calendar.mdx │ │ └── time-field.mdx │ ├── drag-and-drop │ │ ├── drop-zone.mdx │ │ └── meta.json │ ├── feedback │ │ ├── alert.mdx │ │ ├── meta.json │ │ ├── progress-bar.mdx │ │ └── skeleton.mdx │ ├── forms-and-inputs │ │ ├── checkbox-group.mdx │ │ ├── checkbox.mdx │ │ ├── form.mdx │ │ ├── meta.json │ │ ├── number-field.mdx │ │ ├── radio-group.mdx │ │ ├── search-field.mdx │ │ ├── slider.mdx │ │ ├── switch.mdx │ │ ├── text-area.mdx │ │ └── text-field.mdx │ ├── menus-and-selection │ │ ├── combobox.mdx │ │ ├── command.mdx │ │ ├── list-box.mdx │ │ ├── menu.mdx │ │ ├── meta.json │ │ ├── select.mdx │ │ └── tag-group.mdx │ ├── meta.json │ ├── navigation │ │ ├── breadcrumbs.mdx │ │ ├── meta.json │ │ └── tabs.mdx │ └── overlays │ │ ├── dialog.mdx │ │ ├── drawer.mdx │ │ ├── meta.json │ │ ├── modal.mdx │ │ ├── overlay.mdx │ │ ├── popover.mdx │ │ └── tooltip.mdx │ ├── getting-started │ ├── changelog.mdx │ ├── community │ │ ├── contribution-guide.mdx │ │ ├── meta.json │ │ └── roadmap.mdx │ ├── design │ │ ├── color-system.mdx │ │ └── meta.json │ ├── guides │ │ └── dark-mode.mdx │ ├── installation.mdx │ ├── introduction.mdx │ └── meta.json │ └── meta.json ├── eslint.config.mjs ├── next.config.mjs ├── package.json ├── postcss.config.mjs ├── public ├── images │ ├── ghibli.png │ └── thumbnail.png └── r │ ├── brutalist │ ├── alert.json │ ├── avatar.json │ ├── badge.json │ ├── base.json │ ├── breadcrumbs.json │ ├── button.json │ ├── calendar.json │ ├── checkbox-group.json │ ├── checkbox.json │ ├── color-area.json │ ├── color-field.json │ ├── color-picker.json │ ├── color-slider.json │ ├── color-swatch-picker.json │ ├── color-swatch.json │ ├── color-thumb.json │ ├── combobox.json │ ├── command.json │ ├── date-field.json │ ├── date-input.json │ ├── date-picker.json │ ├── date-range-picker.json │ ├── dialog.json │ ├── drawer.json │ ├── drop-zone.json │ ├── field.json │ ├── file-trigger.json │ ├── focus-styles.json │ ├── form.json │ ├── index.json │ ├── input.json │ ├── kbd.json │ ├── list-box.json │ ├── loader.json │ ├── menu.json │ ├── modal.json │ ├── number-field.json │ ├── overlay.json │ ├── popover.json │ ├── progress-bar.json │ ├── radio-group.json │ ├── search-field.json │ ├── select.json │ ├── separator.json │ ├── skeleton.json │ ├── slider.json │ ├── switch.json │ ├── table.json │ ├── tabs.json │ ├── tag-group.json │ ├── text-area.json │ ├── text-field.json │ ├── text.json │ ├── time-field.json │ ├── toggle-button-group.json │ ├── toggle-button.json │ ├── tooltip.json │ ├── use-is-mobile.json │ └── utils.json │ ├── forest │ ├── alert.json │ ├── avatar.json │ ├── badge.json │ ├── base.json │ ├── breadcrumbs.json │ ├── button.json │ ├── calendar.json │ ├── checkbox-group.json │ ├── checkbox.json │ ├── color-area.json │ ├── color-field.json │ ├── color-picker.json │ ├── color-slider.json │ ├── color-swatch-picker.json │ ├── color-swatch.json │ ├── color-thumb.json │ ├── combobox.json │ ├── command.json │ ├── date-field.json │ ├── date-input.json │ ├── date-picker.json │ ├── date-range-picker.json │ ├── dialog.json │ ├── drawer.json │ ├── drop-zone.json │ ├── field.json │ ├── file-trigger.json │ ├── focus-styles.json │ ├── form.json │ ├── index.json │ ├── input.json │ ├── kbd.json │ ├── list-box.json │ ├── loader.json │ ├── menu.json │ ├── modal.json │ ├── number-field.json │ ├── overlay.json │ ├── popover.json │ ├── progress-bar.json │ ├── radio-group.json │ ├── search-field.json │ ├── select.json │ ├── separator.json │ ├── skeleton.json │ ├── slider.json │ ├── switch.json │ ├── table.json │ ├── tabs.json │ ├── tag-group.json │ ├── text-area.json │ ├── text-field.json │ ├── text.json │ ├── time-field.json │ ├── toggle-button-group.json │ ├── toggle-button.json │ ├── tooltip.json │ ├── use-is-mobile.json │ └── utils.json │ ├── high-contrast │ ├── alert.json │ ├── avatar.json │ ├── badge.json │ ├── base.json │ ├── breadcrumbs.json │ ├── button.json │ ├── calendar.json │ ├── checkbox-group.json │ ├── checkbox.json │ ├── color-area.json │ ├── color-field.json │ ├── color-picker.json │ ├── color-slider.json │ ├── color-swatch-picker.json │ ├── color-swatch.json │ ├── color-thumb.json │ ├── combobox.json │ ├── command.json │ ├── date-field.json │ ├── date-input.json │ ├── date-picker.json │ ├── date-range-picker.json │ ├── dialog.json │ ├── drawer.json │ ├── drop-zone.json │ ├── field.json │ ├── file-trigger.json │ ├── focus-styles.json │ ├── form.json │ ├── index.json │ ├── input.json │ ├── kbd.json │ ├── list-box.json │ ├── loader.json │ ├── menu.json │ ├── modal.json │ ├── number-field.json │ ├── overlay.json │ ├── popover.json │ ├── progress-bar.json │ ├── radio-group.json │ ├── search-field.json │ ├── select.json │ ├── separator.json │ ├── skeleton.json │ ├── slider.json │ ├── switch.json │ ├── table.json │ ├── tabs.json │ ├── tag-group.json │ ├── text-area.json │ ├── text-field.json │ ├── text.json │ ├── time-field.json │ ├── toggle-button-group.json │ ├── toggle-button.json │ ├── tooltip.json │ ├── use-is-mobile.json │ └── utils.json │ ├── material │ ├── alert.json │ ├── avatar.json │ ├── badge.json │ ├── base.json │ ├── breadcrumbs.json │ ├── button.json │ ├── calendar.json │ ├── checkbox-group.json │ ├── checkbox.json │ ├── color-area.json │ ├── color-field.json │ ├── color-picker.json │ ├── color-slider.json │ ├── color-swatch-picker.json │ ├── color-swatch.json │ ├── color-thumb.json │ ├── combobox.json │ ├── command.json │ ├── date-field.json │ ├── date-input.json │ ├── date-picker.json │ ├── date-range-picker.json │ ├── dialog.json │ ├── drawer.json │ ├── drop-zone.json │ ├── field.json │ ├── file-trigger.json │ ├── focus-styles.json │ ├── form.json │ ├── index.json │ ├── input.json │ ├── kbd.json │ ├── list-box.json │ ├── loader.json │ ├── menu.json │ ├── modal.json │ ├── number-field.json │ ├── overlay.json │ ├── popover.json │ ├── progress-bar.json │ ├── radio-group.json │ ├── search-field.json │ ├── select.json │ ├── separator.json │ ├── skeleton.json │ ├── slider.json │ ├── switch.json │ ├── table.json │ ├── tabs.json │ ├── tag-group.json │ ├── text-area.json │ ├── text-field.json │ ├── text.json │ ├── time-field.json │ ├── toggle-button-group.json │ ├── toggle-button.json │ ├── tooltip.json │ ├── use-is-mobile.json │ └── utils.json │ ├── minimalist │ ├── alert.json │ ├── avatar.json │ ├── badge.json │ ├── base.json │ ├── breadcrumbs.json │ ├── button.json │ ├── calendar.json │ ├── checkbox-group.json │ ├── checkbox.json │ ├── color-area.json │ ├── color-field.json │ ├── color-picker.json │ ├── color-slider.json │ ├── color-swatch-picker.json │ ├── color-swatch.json │ ├── color-thumb.json │ ├── combobox.json │ ├── command.json │ ├── date-field.json │ ├── date-input.json │ ├── date-picker.json │ ├── date-range-picker.json │ ├── dialog.json │ ├── drawer.json │ ├── drop-zone.json │ ├── field.json │ ├── file-trigger.json │ ├── focus-styles.json │ ├── form.json │ ├── index.json │ ├── input.json │ ├── kbd.json │ ├── list-box.json │ ├── loader.json │ ├── menu.json │ ├── modal.json │ ├── number-field.json │ ├── overlay.json │ ├── popover.json │ ├── progress-bar.json │ ├── radio-group.json │ ├── search-field.json │ ├── select.json │ ├── separator.json │ ├── skeleton.json │ ├── slider.json │ ├── switch.json │ ├── table.json │ ├── tabs.json │ ├── tag-group.json │ ├── text-area.json │ ├── text-field.json │ ├── text.json │ ├── time-field.json │ ├── toggle-button-group.json │ ├── toggle-button.json │ ├── tooltip.json │ ├── use-is-mobile.json │ └── utils.json │ └── retro │ ├── alert.json │ ├── avatar.json │ ├── badge.json │ ├── base.json │ ├── breadcrumbs.json │ ├── button.json │ ├── calendar.json │ ├── checkbox-group.json │ ├── checkbox.json │ ├── color-area.json │ ├── color-field.json │ ├── color-picker.json │ ├── color-slider.json │ ├── color-swatch-picker.json │ ├── color-swatch.json │ ├── color-thumb.json │ ├── combobox.json │ ├── command.json │ ├── date-field.json │ ├── date-input.json │ ├── date-picker.json │ ├── date-range-picker.json │ ├── dialog.json │ ├── drawer.json │ ├── drop-zone.json │ ├── field.json │ ├── file-trigger.json │ ├── focus-styles.json │ ├── form.json │ ├── index.json │ ├── input.json │ ├── kbd.json │ ├── list-box.json │ ├── loader.json │ ├── menu.json │ ├── modal.json │ ├── number-field.json │ ├── overlay.json │ ├── popover.json │ ├── progress-bar.json │ ├── radio-group.json │ ├── search-field.json │ ├── select.json │ ├── separator.json │ ├── skeleton.json │ ├── slider.json │ ├── switch.json │ ├── table.json │ ├── tabs.json │ ├── tag-group.json │ ├── text-area.json │ ├── text-field.json │ ├── text.json │ ├── time-field.json │ ├── toggle-button-group.json │ ├── toggle-button.json │ ├── tooltip.json │ ├── use-is-mobile.json │ └── utils.json ├── scripts ├── build-internal-registry.ts └── build-registry.ts ├── source.config.ts ├── src ├── __registry__ │ ├── .autogenerated │ ├── demos.tsx │ └── ui │ │ ├── alert.basic.tsx │ │ ├── alert.notch-2.tsx │ │ ├── alert.notch.tsx │ │ ├── avatar.basic.tsx │ │ ├── badge.basic.tsx │ │ ├── breadcrumbs.basic.tsx │ │ ├── button-group.basic.tsx │ │ ├── button.basic.tsx │ │ ├── button.brutalist.tsx │ │ ├── button.outline.tsx │ │ ├── button.ripple.tsx │ │ ├── calendar.basic.tsx │ │ ├── calendar.cal.tsx │ │ ├── checkbox-group.basic.tsx │ │ ├── checkbox.basic.tsx │ │ ├── color-area.basic.tsx │ │ ├── color-field.basic.tsx │ │ ├── color-picker.basic.tsx │ │ ├── color-slider.basic.tsx │ │ ├── color-swatch-picker.basic.tsx │ │ ├── color-swatch.basic.tsx │ │ ├── color-thumb.basic.tsx │ │ ├── combobox.basic.tsx │ │ ├── command.basic.tsx │ │ ├── date-field.basic.tsx │ │ ├── date-input.basic.tsx │ │ ├── date-picker.basic.tsx │ │ ├── date-range-picker.basic.tsx │ │ ├── dialog.basic.tsx │ │ ├── drawer.basic.tsx │ │ ├── drop-zone.basic.tsx │ │ ├── field.basic.tsx │ │ ├── file-trigger.basic.tsx │ │ ├── form.basic.tsx │ │ ├── form.react-hook-form.tsx │ │ ├── input.basic.tsx │ │ ├── kbd.basic.tsx │ │ ├── list-box.basic.tsx │ │ ├── loader.dots.tsx │ │ ├── loader.line.tsx │ │ ├── loader.ring.tsx │ │ ├── loader.tailspin.tsx │ │ ├── loader.wave.tsx │ │ ├── menu.basic.tsx │ │ ├── modal.basic.tsx │ │ ├── modal.blur.tsx │ │ ├── number-field.basic.tsx │ │ ├── overlay.basic.tsx │ │ ├── popover.basic.tsx │ │ ├── progress-bar.basic.tsx │ │ ├── radio-group.basic.tsx │ │ ├── ripple.tsx │ │ ├── search-field.basic.tsx │ │ ├── select.basic.tsx │ │ ├── separator.basic.tsx │ │ ├── skeleton.basic.tsx │ │ ├── slider.basic.tsx │ │ ├── switch.basic.tsx │ │ ├── table.basic.tsx │ │ ├── tabs.basic.tsx │ │ ├── tabs.motion.tsx │ │ ├── tag-group.basic.tsx │ │ ├── text-area.basic.tsx │ │ ├── text-field.basic.tsx │ │ ├── text.basic.tsx │ │ ├── time-field.basic.tsx │ │ ├── toggle-button-group.basic.tsx │ │ ├── toggle-button.basic.tsx │ │ ├── tooltip.basic.tsx │ │ └── tooltip.motion.tsx ├── app │ ├── (app) │ │ ├── docs │ │ │ └── [...slug] │ │ │ │ └── page.tsx │ │ ├── layout.tsx │ │ ├── providers.tsx │ │ └── styles │ │ │ ├── [styleName] │ │ │ ├── page.tsx │ │ │ ├── theme-editor │ │ │ │ ├── collapsible.tsx │ │ │ │ ├── colors.tsx │ │ │ │ ├── context.tsx │ │ │ │ ├── iconography.tsx │ │ │ │ ├── index.tsx │ │ │ │ └── typography.tsx │ │ │ └── toc.tsx │ │ │ ├── layout.tsx │ │ │ ├── page.tsx │ │ │ └── preview.tsx │ ├── (home) │ │ ├── layout.tsx │ │ └── page.tsx │ ├── api │ │ └── search │ │ │ └── route.ts │ ├── apple-icon.png │ ├── favicon.ico │ ├── icon.png │ ├── internal │ │ └── page.tsx │ ├── layout.tsx │ ├── manifest.ts │ ├── preview │ │ └── [styleName] │ │ │ ├── app-01 │ │ │ ├── (auth) │ │ │ │ ├── layout.tsx │ │ │ │ ├── login │ │ │ │ │ └── page.tsx │ │ │ │ └── register │ │ │ │ │ └── page.tsx │ │ │ ├── (marketing) │ │ │ │ ├── layout.tsx │ │ │ │ ├── page.tsx │ │ │ │ └── pricing │ │ │ │ │ └── page.tsx │ │ │ ├── app │ │ │ │ ├── layout.tsx │ │ │ │ └── overview │ │ │ │ │ └── page.tsx │ │ │ └── hooks │ │ │ │ └── use-api.ts │ │ │ ├── layout.tsx │ │ │ └── theme-updater.tsx │ ├── providers.tsx │ ├── robots.ts │ ├── sitemap.ts │ └── source.tsx ├── components │ ├── announcement.tsx │ ├── components-overview.tsx │ ├── dynamic-ui │ │ ├── alert.tsx │ │ ├── avatar.tsx │ │ ├── badge.tsx │ │ ├── breadcrumbs.tsx │ │ ├── button-group.tsx │ │ ├── button.tsx │ │ ├── calendar.tsx │ │ ├── checkbox-group.tsx │ │ ├── checkbox.tsx │ │ ├── color-area.tsx │ │ ├── color-field.tsx │ │ ├── color-picker.tsx │ │ ├── color-slider.tsx │ │ ├── color-swatch-picker.tsx │ │ ├── color-swatch.tsx │ │ ├── color-thumb.tsx │ │ ├── combobox.tsx │ │ ├── command.tsx │ │ ├── date-field.tsx │ │ ├── date-input.tsx │ │ ├── date-picker.tsx │ │ ├── date-range-picker.tsx │ │ ├── dialog.tsx │ │ ├── drawer.tsx │ │ ├── drop-zone.tsx │ │ ├── field.tsx │ │ ├── file-trigger.tsx │ │ ├── form.tsx │ │ ├── input.tsx │ │ ├── kbd.tsx │ │ ├── list-box.tsx │ │ ├── loader.tsx │ │ ├── menu.tsx │ │ ├── modal.tsx │ │ ├── number-field.tsx │ │ ├── overlay.tsx │ │ ├── popover.tsx │ │ ├── progress-bar.tsx │ │ ├── radio-group.tsx │ │ ├── ripple.tsx │ │ ├── search-field.tsx │ │ ├── select.tsx │ │ ├── separator.tsx │ │ ├── skeleton.tsx │ │ ├── slider.tsx │ │ ├── switch.tsx │ │ ├── table.tsx │ │ ├── tabs.tsx │ │ ├── tag-group.tsx │ │ ├── text-area.tsx │ │ ├── text-field.tsx │ │ ├── text.tsx │ │ ├── time-field.tsx │ │ ├── toggle-button-group.tsx │ │ ├── toggle-button.tsx │ │ └── tooltip.tsx │ ├── footer.tsx │ ├── header.tsx │ ├── icons.tsx │ ├── logo.tsx │ ├── mobile-nav.tsx │ ├── mode-provider.tsx │ ├── search-command.tsx │ ├── sidebar.tsx │ ├── site-theme-selector.tsx │ ├── theme-mode-switch.tsx │ └── ui │ │ ├── alert.tsx │ │ ├── avatar.tsx │ │ ├── badge.tsx │ │ ├── breadcrumbs.tsx │ │ ├── button.tsx │ │ ├── calendar.tsx │ │ ├── checkbox-group.tsx │ │ ├── checkbox.tsx │ │ ├── collapsible.tsx │ │ ├── color-area.tsx │ │ ├── color-field.tsx │ │ ├── color-picker.tsx │ │ ├── color-slider.tsx │ │ ├── color-swatch-picker.tsx │ │ ├── color-swatch.tsx │ │ ├── color-thumb.tsx │ │ ├── combobox.tsx │ │ ├── command.tsx │ │ ├── date-field.tsx │ │ ├── date-input.tsx │ │ ├── date-picker.tsx │ │ ├── date-range-picker.tsx │ │ ├── dialog.tsx │ │ ├── drop-zone.tsx │ │ ├── field.tsx │ │ ├── file-trigger.tsx │ │ ├── form.tsx │ │ ├── input.tsx │ │ ├── kbd.tsx │ │ ├── link.tsx │ │ ├── list-box.tsx │ │ ├── loader.tsx │ │ ├── menu.tsx │ │ ├── number-field.tsx │ │ ├── overlay.tsx │ │ ├── popover.tsx │ │ ├── progress-bar.tsx │ │ ├── radio-group.tsx │ │ ├── scroll-area.tsx │ │ ├── search-field.tsx │ │ ├── select.tsx │ │ ├── separator.tsx │ │ ├── skeleton.tsx │ │ ├── slider.tsx │ │ ├── switch.tsx │ │ ├── table.tsx │ │ ├── tabs.tsx │ │ ├── tag-group.tsx │ │ ├── text-area.tsx │ │ ├── text-field.tsx │ │ ├── text.tsx │ │ ├── time-field.tsx │ │ ├── toggle-button-group.tsx │ │ ├── toggle-button.tsx │ │ └── tooltip.tsx ├── config │ ├── index.ts │ └── site.tsx ├── hooks │ ├── use-copy-button.ts │ ├── use-debounce.ts │ ├── use-horizontal-resize.ts │ └── use-mounted.ts ├── lib │ ├── colors.ts │ ├── focus-styles.ts │ ├── fonts.ts │ ├── github.ts │ ├── string.ts │ └── utils.ts ├── modules │ ├── docs │ │ ├── actions │ │ │ └── code-to-html.ts │ │ ├── components │ │ │ ├── badge-palette.tsx │ │ │ ├── breadcrumbs.tsx │ │ │ ├── choices.tsx │ │ │ ├── code-block-client.tsx │ │ │ ├── code-block-mdx.tsx │ │ │ ├── code-block.tsx │ │ │ ├── code-client.tsx │ │ │ ├── code.tsx │ │ │ ├── component-preview-client.tsx │ │ │ ├── component-preview.tsx │ │ │ ├── docs-pager.tsx │ │ │ ├── font-loader.tsx │ │ │ ├── install-tabs.tsx │ │ │ ├── last-update.tsx │ │ │ ├── mdx-components.tsx │ │ │ ├── palette.tsx │ │ │ ├── style-selector.tsx │ │ │ ├── tabs.tsx │ │ │ └── toc.tsx │ │ ├── demos │ │ │ ├── alert │ │ │ │ ├── action.tsx │ │ │ │ ├── composition.tsx │ │ │ │ ├── content.tsx │ │ │ │ ├── custom-icon.tsx │ │ │ │ ├── default.tsx │ │ │ │ ├── title.tsx │ │ │ │ └── variants.tsx │ │ │ ├── avatar │ │ │ │ ├── composition.tsx │ │ │ │ ├── default.tsx │ │ │ │ ├── shape.tsx │ │ │ │ └── sizes.tsx │ │ │ ├── badge │ │ │ │ ├── default.tsx │ │ │ │ ├── icon.tsx │ │ │ │ ├── sizes.tsx │ │ │ │ └── variants.tsx │ │ │ ├── breadcrumbs │ │ │ │ ├── basic.tsx │ │ │ │ ├── composition.tsx │ │ │ │ ├── disabled.tsx │ │ │ │ ├── icon.tsx │ │ │ │ └── router-integration.tsx │ │ │ ├── button-group │ │ │ │ └── default.tsx │ │ │ ├── button │ │ │ │ ├── default.tsx │ │ │ │ ├── disabled.tsx │ │ │ │ ├── link-button.tsx │ │ │ │ ├── loading.tsx │ │ │ │ ├── prefix-and-suffix.tsx │ │ │ │ ├── shapes.tsx │ │ │ │ ├── sizes.tsx │ │ │ │ └── variants.tsx │ │ │ ├── calendar │ │ │ │ ├── composition.tsx │ │ │ │ ├── controlled.tsx │ │ │ │ ├── default.tsx │ │ │ │ ├── disabled.tsx │ │ │ │ ├── error-message.tsx │ │ │ │ ├── page-behaviour.tsx │ │ │ │ ├── read-only.tsx │ │ │ │ ├── uncontrolled.tsx │ │ │ │ ├── unvailable-dates.tsx │ │ │ │ ├── validation.tsx │ │ │ │ ├── variant.tsx │ │ │ │ └── visible-months.tsx │ │ │ ├── checkbox-group │ │ │ │ ├── cards.tsx │ │ │ │ ├── composition.tsx │ │ │ │ ├── controlled.tsx │ │ │ │ ├── default.tsx │ │ │ │ ├── description.tsx │ │ │ │ ├── disabled.tsx │ │ │ │ ├── error-message.tsx │ │ │ │ ├── label.tsx │ │ │ │ ├── read-only.tsx │ │ │ │ ├── required.tsx │ │ │ │ └── uncontrolled.tsx │ │ │ ├── checkbox │ │ │ │ ├── card.tsx │ │ │ │ ├── composition.tsx │ │ │ │ ├── controlled.tsx │ │ │ │ ├── default.tsx │ │ │ │ ├── disabled.tsx │ │ │ │ ├── indeterminate.tsx │ │ │ │ ├── read-only.tsx │ │ │ │ ├── uncontrolled.tsx │ │ │ │ └── variants.tsx │ │ │ ├── color-area │ │ │ │ ├── channels.tsx │ │ │ │ ├── composition.tsx │ │ │ │ ├── controlled.tsx │ │ │ │ ├── default.tsx │ │ │ │ ├── disabled.tsx │ │ │ │ └── uncontrolled.tsx │ │ │ ├── color-field │ │ │ │ ├── color-channel.tsx │ │ │ │ ├── composition.tsx │ │ │ │ ├── controlled.tsx │ │ │ │ ├── default.tsx │ │ │ │ ├── description.tsx │ │ │ │ ├── disabled.tsx │ │ │ │ ├── error-message.tsx │ │ │ │ ├── form.tsx │ │ │ │ ├── label.tsx │ │ │ │ ├── prefix-and-suffix.tsx │ │ │ │ ├── read-only.tsx │ │ │ │ ├── required.tsx │ │ │ │ ├── sizes.tsx │ │ │ │ └── uncontrolled.tsx │ │ │ ├── color-picker │ │ │ │ ├── channel-sliders.tsx │ │ │ │ ├── composition.tsx │ │ │ │ ├── controlled.tsx │ │ │ │ ├── default.tsx │ │ │ │ ├── options.tsx │ │ │ │ ├── swatches.tsx │ │ │ │ └── uncontrolled.tsx │ │ │ ├── color-slider │ │ │ │ ├── channel.tsx │ │ │ │ ├── composition.tsx │ │ │ │ ├── controlled.tsx │ │ │ │ ├── default.tsx │ │ │ │ ├── disabled.tsx │ │ │ │ ├── label.tsx │ │ │ │ ├── uncontrolled.tsx │ │ │ │ └── vertical.tsx │ │ │ ├── color-swatch-picker │ │ │ │ ├── basic.tsx │ │ │ │ ├── controlled.tsx │ │ │ │ └── disabled.tsx │ │ │ ├── color-swatch │ │ │ │ └── default.tsx │ │ │ ├── combobox │ │ │ │ ├── async-loading.tsx │ │ │ │ ├── basic.tsx │ │ │ │ ├── composition.tsx │ │ │ │ ├── controlled.tsx │ │ │ │ ├── custom-value.tsx │ │ │ │ ├── description.tsx │ │ │ │ ├── disabled.tsx │ │ │ │ ├── label.tsx │ │ │ │ ├── loading.tsx │ │ │ │ ├── required.tsx │ │ │ │ ├── sections.tsx │ │ │ │ ├── uncontrolled.tsx │ │ │ │ └── validation.tsx │ │ │ ├── command │ │ │ │ ├── basic.tsx │ │ │ │ └── dialog.tsx │ │ │ ├── date-field │ │ │ │ ├── composition.tsx │ │ │ │ ├── controlled.tsx │ │ │ │ ├── default.tsx │ │ │ │ ├── description.tsx │ │ │ │ ├── disabled.tsx │ │ │ │ ├── error-message.tsx │ │ │ │ ├── granularity.tsx │ │ │ │ ├── hide-time-zone.tsx │ │ │ │ ├── hour-cycle.tsx │ │ │ │ ├── label.tsx │ │ │ │ ├── placeholder.tsx │ │ │ │ ├── prefix-and-suffix.tsx │ │ │ │ ├── read-only.tsx │ │ │ │ ├── required.tsx │ │ │ │ ├── sizes.tsx │ │ │ │ ├── time-zones.tsx │ │ │ │ └── uncontrolled.tsx │ │ │ ├── date-picker │ │ │ │ ├── composition.tsx │ │ │ │ ├── controlled.tsx │ │ │ │ ├── default.tsx │ │ │ │ ├── description.tsx │ │ │ │ ├── disabled.tsx │ │ │ │ ├── error-message.tsx │ │ │ │ ├── granularity.tsx │ │ │ │ ├── hide-time-zone.tsx │ │ │ │ ├── hour-cycle.tsx │ │ │ │ ├── label.tsx │ │ │ │ ├── placeholder.tsx │ │ │ │ ├── prefix.tsx │ │ │ │ ├── read-only.tsx │ │ │ │ ├── required.tsx │ │ │ │ ├── sizes.tsx │ │ │ │ ├── time-zones.tsx │ │ │ │ └── uncontrolled.tsx │ │ │ ├── date-range-picker │ │ │ │ ├── composition.tsx │ │ │ │ ├── controlled.tsx │ │ │ │ ├── default.tsx │ │ │ │ ├── description.tsx │ │ │ │ ├── disabled.tsx │ │ │ │ ├── error-message.tsx │ │ │ │ ├── granularity.tsx │ │ │ │ ├── hide-time-zone.tsx │ │ │ │ ├── hour-cycle.tsx │ │ │ │ ├── label.tsx │ │ │ │ ├── loading.tsx │ │ │ │ ├── placeholder.tsx │ │ │ │ ├── prefix.tsx │ │ │ │ ├── read-only.tsx │ │ │ │ ├── required.tsx │ │ │ │ ├── sizes.tsx │ │ │ │ ├── time-zones.tsx │ │ │ │ └── uncontrolled.tsx │ │ │ ├── dialog │ │ │ │ ├── alert-dialog.tsx │ │ │ │ ├── async-form-submission.tsx │ │ │ │ ├── basic.tsx │ │ │ │ ├── composition.tsx │ │ │ │ ├── controlled.tsx │ │ │ │ ├── description.tsx │ │ │ │ ├── dismissable.tsx │ │ │ │ ├── drawer.tsx │ │ │ │ ├── inset-content.tsx │ │ │ │ ├── nested.tsx │ │ │ │ ├── popover.tsx │ │ │ │ ├── title.tsx │ │ │ │ └── types.tsx │ │ │ ├── drawer │ │ │ │ ├── basic.tsx │ │ │ │ └── placement.tsx │ │ │ ├── drop-zone │ │ │ │ ├── basic.tsx │ │ │ │ ├── disabled.tsx │ │ │ │ ├── events.tsx │ │ │ │ ├── file-trigger.tsx │ │ │ │ ├── label.tsx │ │ │ │ └── visual-feedback.tsx │ │ │ ├── file-trigger │ │ │ │ ├── default.tsx │ │ │ │ ├── directory-selection.tsx │ │ │ │ ├── file-types.tsx │ │ │ │ ├── media-capture.tsx │ │ │ │ └── multiple-files.tsx │ │ │ ├── form │ │ │ │ ├── basic.tsx │ │ │ │ ├── react-aria.tsx │ │ │ │ └── react-hook-form.tsx │ │ │ ├── list-box │ │ │ │ ├── async-loading.tsx │ │ │ │ ├── basic.tsx │ │ │ │ ├── composition.tsx │ │ │ │ ├── contact-list.tsx │ │ │ │ ├── controlled.tsx │ │ │ │ ├── disabled-items.tsx │ │ │ │ ├── empty-state.tsx │ │ │ │ ├── grid.tsx │ │ │ │ ├── horizontal.tsx │ │ │ │ ├── image-grid.tsx │ │ │ │ ├── item-variant.tsx │ │ │ │ ├── label-and-description.tsx │ │ │ │ ├── links.tsx │ │ │ │ ├── loading.tsx │ │ │ │ ├── prefix-and-suffix.tsx │ │ │ │ ├── sections.tsx │ │ │ │ ├── selection-behavior.tsx │ │ │ │ ├── selection-mode.tsx │ │ │ │ ├── separator.tsx │ │ │ │ └── uncontrolled.tsx │ │ │ ├── menu │ │ │ │ ├── basic.tsx │ │ │ │ ├── composition.tsx │ │ │ │ ├── controlled.tsx │ │ │ │ ├── disabled-items.tsx │ │ │ │ ├── item-variant.tsx │ │ │ │ ├── label-and-description.tsx │ │ │ │ ├── link-items.tsx │ │ │ │ ├── long-press.tsx │ │ │ │ ├── multiple-selection.tsx │ │ │ │ ├── overlay-type.tsx │ │ │ │ ├── placement.tsx │ │ │ │ ├── prefix-and-suffix.tsx │ │ │ │ ├── section.tsx │ │ │ │ ├── separator.tsx │ │ │ │ ├── shortcut.tsx │ │ │ │ ├── single-selection.tsx │ │ │ │ └── submenus.tsx │ │ │ ├── modal │ │ │ │ └── basic.tsx │ │ │ ├── number-field │ │ │ │ ├── composition.tsx │ │ │ │ ├── controlled.tsx │ │ │ │ ├── default.tsx │ │ │ │ ├── description.tsx │ │ │ │ ├── disabled.tsx │ │ │ │ ├── error-message.tsx │ │ │ │ ├── format-options.tsx │ │ │ │ ├── label.tsx │ │ │ │ ├── read-only.tsx │ │ │ │ ├── required.tsx │ │ │ │ ├── sizes.tsx │ │ │ │ └── uncontrolled.tsx │ │ │ ├── overlay │ │ │ │ ├── basic.tsx │ │ │ │ └── type.tsx │ │ │ ├── popover │ │ │ │ └── basic.tsx │ │ │ ├── progress-bar │ │ │ │ ├── composition.tsx │ │ │ │ ├── custom-value-label.tsx │ │ │ │ ├── default.tsx │ │ │ │ ├── duration.tsx │ │ │ │ ├── format-options.tsx │ │ │ │ ├── indeterminate.tsx │ │ │ │ ├── label.tsx │ │ │ │ ├── min-max-values.tsx │ │ │ │ ├── shape.tsx │ │ │ │ ├── sizes.tsx │ │ │ │ ├── value-label.tsx │ │ │ │ └── variants.tsx │ │ │ ├── radio-group │ │ │ │ ├── cards.tsx │ │ │ │ ├── composition.tsx │ │ │ │ ├── controlled.tsx │ │ │ │ ├── default.tsx │ │ │ │ ├── description.tsx │ │ │ │ ├── disabled.tsx │ │ │ │ ├── error-message.tsx │ │ │ │ ├── label.tsx │ │ │ │ ├── orientation.tsx │ │ │ │ ├── read-only.tsx │ │ │ │ ├── required.tsx │ │ │ │ └── uncontrolled.tsx │ │ │ ├── range-calendar │ │ │ │ ├── composition.tsx │ │ │ │ ├── controlled.tsx │ │ │ │ ├── default.tsx │ │ │ │ ├── disabled.tsx │ │ │ │ ├── error-message.tsx │ │ │ │ ├── non-contiguous-ranges.tsx │ │ │ │ ├── page-behaviour.tsx │ │ │ │ ├── read-only.tsx │ │ │ │ ├── uncontrolled.tsx │ │ │ │ ├── unvailable-dates.tsx │ │ │ │ ├── validation.tsx │ │ │ │ ├── variant.tsx │ │ │ │ └── visible-months.tsx │ │ │ ├── search-field │ │ │ │ ├── composition.tsx │ │ │ │ ├── controlled.tsx │ │ │ │ ├── default.tsx │ │ │ │ ├── description.tsx │ │ │ │ ├── disabled.tsx │ │ │ │ ├── error-message.tsx │ │ │ │ ├── form.tsx │ │ │ │ ├── label.tsx │ │ │ │ ├── read-only.tsx │ │ │ │ ├── required.tsx │ │ │ │ ├── sizes.tsx │ │ │ │ └── uncontrolled.tsx │ │ │ ├── select │ │ │ │ ├── async-loading.tsx │ │ │ │ ├── basic.tsx │ │ │ │ ├── composition.tsx │ │ │ │ ├── controlled.tsx │ │ │ │ ├── description.tsx │ │ │ │ ├── disabled.tsx │ │ │ │ ├── label.tsx │ │ │ │ ├── links.tsx │ │ │ │ ├── loading.tsx │ │ │ │ ├── placeholder.tsx │ │ │ │ ├── required.tsx │ │ │ │ ├── sections.tsx │ │ │ │ ├── uncontrolled.tsx │ │ │ │ └── validation.tsx │ │ │ ├── separator │ │ │ │ ├── card.tsx │ │ │ │ └── orientation.tsx │ │ │ ├── skeleton │ │ │ │ ├── api-simulation.tsx │ │ │ │ ├── card.tsx │ │ │ │ ├── children.tsx │ │ │ │ ├── fixed-size-children.tsx │ │ │ │ └── show.tsx │ │ │ ├── slider │ │ │ │ ├── composition.tsx │ │ │ │ ├── controlled.tsx │ │ │ │ ├── default.tsx │ │ │ │ ├── description.tsx │ │ │ │ ├── disabled.tsx │ │ │ │ ├── format-options.tsx │ │ │ │ ├── label.tsx │ │ │ │ ├── range.tsx │ │ │ │ ├── sizes.tsx │ │ │ │ ├── step.tsx │ │ │ │ ├── uncontrolled.tsx │ │ │ │ ├── value-label.tsx │ │ │ │ ├── value-scale.tsx │ │ │ │ └── vertical.tsx │ │ │ ├── switch │ │ │ │ ├── card.tsx │ │ │ │ ├── composition.tsx │ │ │ │ ├── controlled.tsx │ │ │ │ ├── default.tsx │ │ │ │ ├── disabled.tsx │ │ │ │ ├── label.tsx │ │ │ │ ├── sizes.tsx │ │ │ │ └── uncontrolled.tsx │ │ │ ├── table │ │ │ │ ├── basic.tsx │ │ │ │ ├── column-resizing.tsx │ │ │ │ ├── controlled.tsx │ │ │ │ ├── disabled-rows.tsx │ │ │ │ ├── disallow-empty-selection.tsx │ │ │ │ ├── dynamic-collection.tsx │ │ │ │ ├── empty-state.tsx │ │ │ │ ├── links.tsx │ │ │ │ ├── reordable.tsx │ │ │ │ ├── row-action.tsx │ │ │ │ ├── selection-behavior.tsx │ │ │ │ ├── selection-mode.tsx │ │ │ │ ├── selection-variant.tsx │ │ │ │ ├── selection.tsx │ │ │ │ ├── sorting.tsx │ │ │ │ ├── static-row-action.tsx │ │ │ │ ├── uncontrolled.tsx │ │ │ │ └── variants.tsx │ │ │ ├── tabs │ │ │ │ ├── basic.tsx │ │ │ │ ├── controlled.tsx │ │ │ │ ├── disabled.tsx │ │ │ │ ├── keyboard-activation.tsx │ │ │ │ ├── variant.tsx │ │ │ │ └── vertical.tsx │ │ │ ├── tag-group │ │ │ │ └── default.tsx │ │ │ ├── text-area │ │ │ │ ├── composition.tsx │ │ │ │ ├── controlled.tsx │ │ │ │ ├── default.tsx │ │ │ │ ├── description.tsx │ │ │ │ ├── disabled.tsx │ │ │ │ ├── error-message.tsx │ │ │ │ ├── form.tsx │ │ │ │ ├── label.tsx │ │ │ │ ├── prefix-and-suffix.tsx │ │ │ │ ├── read-only.tsx │ │ │ │ ├── required.tsx │ │ │ │ └── uncontrolled.tsx │ │ │ ├── text-field │ │ │ │ ├── composition.tsx │ │ │ │ ├── controlled.tsx │ │ │ │ ├── default.tsx │ │ │ │ ├── description.tsx │ │ │ │ ├── disabled.tsx │ │ │ │ ├── error-message.tsx │ │ │ │ ├── label.tsx │ │ │ │ ├── prefix-and-suffix.tsx │ │ │ │ ├── read-only.tsx │ │ │ │ ├── required.tsx │ │ │ │ ├── sizes.tsx │ │ │ │ └── uncontrolled.tsx │ │ │ ├── time-field │ │ │ │ ├── composition.tsx │ │ │ │ ├── controlled.tsx │ │ │ │ ├── default.tsx │ │ │ │ ├── description.tsx │ │ │ │ ├── disabled.tsx │ │ │ │ ├── error-message.tsx │ │ │ │ ├── granularity.tsx │ │ │ │ ├── hide-time-zone.tsx │ │ │ │ ├── hour-cycle.tsx │ │ │ │ ├── label.tsx │ │ │ │ ├── placeholder.tsx │ │ │ │ ├── prefix-and-suffix.tsx │ │ │ │ ├── read-only.tsx │ │ │ │ ├── required.tsx │ │ │ │ ├── sizes.tsx │ │ │ │ ├── time-zones.tsx │ │ │ │ └── uncontrolled.tsx │ │ │ ├── toggle-button-group │ │ │ │ └── default.tsx │ │ │ ├── toggle-button │ │ │ │ ├── controlled.tsx │ │ │ │ ├── default.tsx │ │ │ │ ├── disabled.tsx │ │ │ │ ├── shapes.tsx │ │ │ │ ├── sizes.tsx │ │ │ │ ├── uncontrolled.tsx │ │ │ │ └── variants.tsx │ │ │ └── tooltip │ │ │ │ ├── arrow.tsx │ │ │ │ ├── composition.tsx │ │ │ │ ├── container-padding.tsx │ │ │ │ ├── default.tsx │ │ │ │ ├── delay.tsx │ │ │ │ ├── flip.tsx │ │ │ │ ├── offset.tsx │ │ │ │ ├── placement.tsx │ │ │ │ ├── variant.tsx │ │ │ │ └── with-arrow.tsx │ │ ├── hooks │ │ │ └── use-toc-thumb.ts │ │ ├── lib │ │ │ ├── get-component-source.ts │ │ │ ├── get-file-source.ts │ │ │ ├── get-files-source.ts │ │ │ ├── get-github-last-edit.ts │ │ │ └── mdx-plugins │ │ │ │ ├── file-generator.ts │ │ │ │ ├── remark-docgen.ts │ │ │ │ ├── remark-inline-code.ts │ │ │ │ ├── remark-install.ts │ │ │ │ └── utils.ts │ │ └── utils.ts │ ├── registry │ │ ├── colors │ │ │ └── neutral │ │ │ │ ├── gray.ts │ │ │ │ ├── mauve.ts │ │ │ │ ├── neutral.ts │ │ │ │ ├── olive.ts │ │ │ │ ├── sage.ts │ │ │ │ ├── sand.ts │ │ │ │ ├── slate.ts │ │ │ │ ├── stone.ts │ │ │ │ └── zinc.ts │ │ ├── hooks │ │ │ ├── use-is-mobile.ts │ │ │ └── use-ripple.ts │ │ ├── index.ts │ │ ├── lib │ │ │ ├── focus-styles.ts │ │ │ └── utils.tsx │ │ ├── registry-base.ts │ │ ├── registry-hooks.ts │ │ ├── registry-icons.ts │ │ ├── registry-lib.ts │ │ ├── registry-styles.ts │ │ ├── registry-ui.ts │ │ ├── styles │ │ │ ├── brutalist.ts │ │ │ ├── ghibli.ts │ │ │ ├── material.ts │ │ │ ├── minimalist.ts │ │ │ ├── polaris.ts │ │ │ ├── primer.ts │ │ │ └── supabase.ts │ │ ├── types.ts │ │ └── ui │ │ │ ├── alert.basic.tsx │ │ │ ├── alert.notch-2.tsx │ │ │ ├── alert.notch.tsx │ │ │ ├── avatar.basic.tsx │ │ │ ├── badge.basic.tsx │ │ │ ├── breadcrumbs.basic.tsx │ │ │ ├── button-group.basic.tsx │ │ │ ├── button.basic.tsx │ │ │ ├── button.brutalist.tsx │ │ │ ├── button.outline.tsx │ │ │ ├── button.ripple.tsx │ │ │ ├── calendar.basic.tsx │ │ │ ├── calendar.cal.tsx │ │ │ ├── checkbox-group.basic.tsx │ │ │ ├── checkbox.basic.tsx │ │ │ ├── color-area.basic.tsx │ │ │ ├── color-field.basic.tsx │ │ │ ├── color-picker.basic.tsx │ │ │ ├── color-slider.basic.tsx │ │ │ ├── color-swatch-picker.basic.tsx │ │ │ ├── color-swatch.basic.tsx │ │ │ ├── color-thumb.basic.tsx │ │ │ ├── combobox.basic.tsx │ │ │ ├── command.basic.tsx │ │ │ ├── date-field.basic.tsx │ │ │ ├── date-input.basic.tsx │ │ │ ├── date-picker.basic.tsx │ │ │ ├── date-range-picker.basic.tsx │ │ │ ├── dialog.basic.tsx │ │ │ ├── drawer.basic.tsx │ │ │ ├── drop-zone.basic.tsx │ │ │ ├── field.basic.tsx │ │ │ ├── file-trigger.basic.tsx │ │ │ ├── form.basic.tsx │ │ │ ├── form.react-hook-form.tsx │ │ │ ├── input.basic.tsx │ │ │ ├── kbd.basic.tsx │ │ │ ├── list-box.basic.tsx │ │ │ ├── loader.dots.tsx │ │ │ ├── loader.line.tsx │ │ │ ├── loader.ring.tsx │ │ │ ├── loader.tailspin.tsx │ │ │ ├── loader.wave.tsx │ │ │ ├── menu.basic.tsx │ │ │ ├── modal.basic.tsx │ │ │ ├── modal.blur.tsx │ │ │ ├── number-field.basic.tsx │ │ │ ├── overlay.basic.tsx │ │ │ ├── popover.basic.tsx │ │ │ ├── progress-bar.basic.tsx │ │ │ ├── radio-group.basic.tsx │ │ │ ├── ripple.tsx │ │ │ ├── search-field.basic.tsx │ │ │ ├── select.basic.tsx │ │ │ ├── separator.basic.tsx │ │ │ ├── skeleton.basic.tsx │ │ │ ├── slider.basic.tsx │ │ │ ├── switch.basic.tsx │ │ │ ├── table.basic.tsx │ │ │ ├── tabs.basic.tsx │ │ │ ├── tabs.motion.tsx │ │ │ ├── tag-group.basic.tsx │ │ │ ├── text-area.basic.tsx │ │ │ ├── text-field.basic.tsx │ │ │ ├── text.basic.tsx │ │ │ ├── time-field.basic.tsx │ │ │ ├── toggle-button-group.basic.tsx │ │ │ ├── toggle-button.basic.tsx │ │ │ ├── tooltip.basic.tsx │ │ │ └── tooltip.motion.tsx │ └── styles │ │ ├── atoms │ │ └── styles-atom.ts │ │ ├── components │ │ ├── current-style-provider.tsx │ │ ├── font-loader.tsx │ │ ├── font-selector.tsx │ │ ├── fonts-provider.tsx │ │ ├── style-card.tsx │ │ ├── style-provider.tsx │ │ ├── styles-explorer.tsx │ │ ├── styles-overview.tsx │ │ └── theme-provider.tsx │ │ ├── constants │ │ └── defaults.ts │ │ ├── contexts │ │ ├── components-context.tsx │ │ ├── preferences-context.tsx │ │ └── style-context.ts │ │ ├── lib │ │ ├── create-dynamic-component.tsx │ │ ├── create-style.ts │ │ ├── create-theme.ts │ │ └── google-fonts.ts │ │ └── types.ts ├── registry │ ├── brutalist │ │ ├── hooks │ │ │ └── use-is-mobile.ts │ │ ├── lib │ │ │ ├── focus-styles.ts │ │ │ └── utils.tsx │ │ └── ui │ │ │ ├── alert.tsx │ │ │ ├── avatar.tsx │ │ │ ├── badge.tsx │ │ │ ├── breadcrumbs.tsx │ │ │ ├── button.tsx │ │ │ ├── calendar.tsx │ │ │ ├── checkbox-group.tsx │ │ │ ├── checkbox.tsx │ │ │ ├── color-area.tsx │ │ │ ├── color-field.tsx │ │ │ ├── color-picker.tsx │ │ │ ├── color-slider.tsx │ │ │ ├── color-swatch-picker.tsx │ │ │ ├── color-swatch.tsx │ │ │ ├── color-thumb.tsx │ │ │ ├── combobox.tsx │ │ │ ├── command.tsx │ │ │ ├── date-field.tsx │ │ │ ├── date-input.tsx │ │ │ ├── date-picker.tsx │ │ │ ├── date-range-picker.tsx │ │ │ ├── dialog.tsx │ │ │ ├── drawer.tsx │ │ │ ├── drop-zone.tsx │ │ │ ├── field.tsx │ │ │ ├── file-trigger.tsx │ │ │ ├── form.tsx │ │ │ ├── input.tsx │ │ │ ├── kbd.tsx │ │ │ ├── list-box.tsx │ │ │ ├── loader.tsx │ │ │ ├── menu.tsx │ │ │ ├── modal.tsx │ │ │ ├── number-field.tsx │ │ │ ├── overlay.tsx │ │ │ ├── popover.tsx │ │ │ ├── progress-bar.tsx │ │ │ ├── radio-group.tsx │ │ │ ├── search-field.tsx │ │ │ ├── select.tsx │ │ │ ├── separator.tsx │ │ │ ├── skeleton.tsx │ │ │ ├── slider.tsx │ │ │ ├── switch.tsx │ │ │ ├── table.tsx │ │ │ ├── tabs.tsx │ │ │ ├── tag-group.tsx │ │ │ ├── text-area.tsx │ │ │ ├── text-field.tsx │ │ │ ├── text.tsx │ │ │ ├── time-field.tsx │ │ │ ├── toggle-button-group.tsx │ │ │ ├── toggle-button.tsx │ │ │ └── tooltip.tsx │ ├── forest │ │ ├── hooks │ │ │ └── use-is-mobile.ts │ │ ├── lib │ │ │ ├── focus-styles.ts │ │ │ └── utils.tsx │ │ └── ui │ │ │ ├── alert.tsx │ │ │ ├── avatar.tsx │ │ │ ├── badge.tsx │ │ │ ├── breadcrumbs.tsx │ │ │ ├── button.tsx │ │ │ ├── calendar.tsx │ │ │ ├── checkbox-group.tsx │ │ │ ├── checkbox.tsx │ │ │ ├── color-area.tsx │ │ │ ├── color-field.tsx │ │ │ ├── color-picker.tsx │ │ │ ├── color-slider.tsx │ │ │ ├── color-swatch-picker.tsx │ │ │ ├── color-swatch.tsx │ │ │ ├── color-thumb.tsx │ │ │ ├── combobox.tsx │ │ │ ├── command.tsx │ │ │ ├── date-field.tsx │ │ │ ├── date-input.tsx │ │ │ ├── date-picker.tsx │ │ │ ├── date-range-picker.tsx │ │ │ ├── dialog.tsx │ │ │ ├── drawer.tsx │ │ │ ├── drop-zone.tsx │ │ │ ├── field.tsx │ │ │ ├── file-trigger.tsx │ │ │ ├── form.tsx │ │ │ ├── input.tsx │ │ │ ├── kbd.tsx │ │ │ ├── list-box.tsx │ │ │ ├── loader.tsx │ │ │ ├── menu.tsx │ │ │ ├── modal.tsx │ │ │ ├── number-field.tsx │ │ │ ├── overlay.tsx │ │ │ ├── popover.tsx │ │ │ ├── progress-bar.tsx │ │ │ ├── radio-group.tsx │ │ │ ├── search-field.tsx │ │ │ ├── select.tsx │ │ │ ├── separator.tsx │ │ │ ├── skeleton.tsx │ │ │ ├── slider.tsx │ │ │ ├── switch.tsx │ │ │ ├── table.tsx │ │ │ ├── tabs.tsx │ │ │ ├── tag-group.tsx │ │ │ ├── text-area.tsx │ │ │ ├── text-field.tsx │ │ │ ├── text.tsx │ │ │ ├── time-field.tsx │ │ │ ├── toggle-button-group.tsx │ │ │ ├── toggle-button.tsx │ │ │ └── tooltip.tsx │ ├── high-contrast │ │ ├── hooks │ │ │ └── use-is-mobile.ts │ │ ├── lib │ │ │ ├── focus-styles.ts │ │ │ └── utils.tsx │ │ └── ui │ │ │ ├── alert.tsx │ │ │ ├── avatar.tsx │ │ │ ├── badge.tsx │ │ │ ├── breadcrumbs.tsx │ │ │ ├── button.tsx │ │ │ ├── calendar.tsx │ │ │ ├── checkbox-group.tsx │ │ │ ├── checkbox.tsx │ │ │ ├── color-area.tsx │ │ │ ├── color-field.tsx │ │ │ ├── color-picker.tsx │ │ │ ├── color-slider.tsx │ │ │ ├── color-swatch-picker.tsx │ │ │ ├── color-swatch.tsx │ │ │ ├── color-thumb.tsx │ │ │ ├── combobox.tsx │ │ │ ├── command.tsx │ │ │ ├── date-field.tsx │ │ │ ├── date-input.tsx │ │ │ ├── date-picker.tsx │ │ │ ├── date-range-picker.tsx │ │ │ ├── dialog.tsx │ │ │ ├── drawer.tsx │ │ │ ├── drop-zone.tsx │ │ │ ├── field.tsx │ │ │ ├── file-trigger.tsx │ │ │ ├── form.tsx │ │ │ ├── input.tsx │ │ │ ├── kbd.tsx │ │ │ ├── list-box.tsx │ │ │ ├── loader.tsx │ │ │ ├── menu.tsx │ │ │ ├── modal.tsx │ │ │ ├── number-field.tsx │ │ │ ├── overlay.tsx │ │ │ ├── popover.tsx │ │ │ ├── progress-bar.tsx │ │ │ ├── radio-group.tsx │ │ │ ├── search-field.tsx │ │ │ ├── select.tsx │ │ │ ├── separator.tsx │ │ │ ├── skeleton.tsx │ │ │ ├── slider.tsx │ │ │ ├── switch.tsx │ │ │ ├── table.tsx │ │ │ ├── tabs.tsx │ │ │ ├── tag-group.tsx │ │ │ ├── text-area.tsx │ │ │ ├── text-field.tsx │ │ │ ├── text.tsx │ │ │ ├── time-field.tsx │ │ │ ├── toggle-button-group.tsx │ │ │ ├── toggle-button.tsx │ │ │ └── tooltip.tsx │ ├── material │ │ ├── hooks │ │ │ └── use-is-mobile.ts │ │ ├── lib │ │ │ ├── focus-styles.ts │ │ │ └── utils.tsx │ │ └── ui │ │ │ ├── alert.tsx │ │ │ ├── avatar.tsx │ │ │ ├── badge.tsx │ │ │ ├── breadcrumbs.tsx │ │ │ ├── button.tsx │ │ │ ├── calendar.tsx │ │ │ ├── checkbox-group.tsx │ │ │ ├── checkbox.tsx │ │ │ ├── color-area.tsx │ │ │ ├── color-field.tsx │ │ │ ├── color-picker.tsx │ │ │ ├── color-slider.tsx │ │ │ ├── color-swatch-picker.tsx │ │ │ ├── color-swatch.tsx │ │ │ ├── color-thumb.tsx │ │ │ ├── combobox.tsx │ │ │ ├── command.tsx │ │ │ ├── date-field.tsx │ │ │ ├── date-input.tsx │ │ │ ├── date-picker.tsx │ │ │ ├── date-range-picker.tsx │ │ │ ├── dialog.tsx │ │ │ ├── drawer.tsx │ │ │ ├── drop-zone.tsx │ │ │ ├── field.tsx │ │ │ ├── file-trigger.tsx │ │ │ ├── form.tsx │ │ │ ├── input.tsx │ │ │ ├── kbd.tsx │ │ │ ├── list-box.tsx │ │ │ ├── loader.tsx │ │ │ ├── menu.tsx │ │ │ ├── modal.tsx │ │ │ ├── number-field.tsx │ │ │ ├── overlay.tsx │ │ │ ├── popover.tsx │ │ │ ├── progress-bar.tsx │ │ │ ├── radio-group.tsx │ │ │ ├── search-field.tsx │ │ │ ├── select.tsx │ │ │ ├── separator.tsx │ │ │ ├── skeleton.tsx │ │ │ ├── slider.tsx │ │ │ ├── switch.tsx │ │ │ ├── table.tsx │ │ │ ├── tabs.tsx │ │ │ ├── tag-group.tsx │ │ │ ├── text-area.tsx │ │ │ ├── text-field.tsx │ │ │ ├── text.tsx │ │ │ ├── time-field.tsx │ │ │ ├── toggle-button-group.tsx │ │ │ ├── toggle-button.tsx │ │ │ └── tooltip.tsx │ ├── minimalist │ │ ├── hooks │ │ │ └── use-is-mobile.ts │ │ ├── lib │ │ │ ├── focus-styles.ts │ │ │ └── utils.tsx │ │ └── ui │ │ │ ├── alert.tsx │ │ │ ├── avatar.tsx │ │ │ ├── badge.tsx │ │ │ ├── breadcrumbs.tsx │ │ │ ├── button.tsx │ │ │ ├── calendar.tsx │ │ │ ├── checkbox-group.tsx │ │ │ ├── checkbox.tsx │ │ │ ├── color-area.tsx │ │ │ ├── color-field.tsx │ │ │ ├── color-picker.tsx │ │ │ ├── color-slider.tsx │ │ │ ├── color-swatch-picker.tsx │ │ │ ├── color-swatch.tsx │ │ │ ├── color-thumb.tsx │ │ │ ├── combobox.tsx │ │ │ ├── command.tsx │ │ │ ├── date-field.tsx │ │ │ ├── date-input.tsx │ │ │ ├── date-picker.tsx │ │ │ ├── date-range-picker.tsx │ │ │ ├── dialog.tsx │ │ │ ├── drawer.tsx │ │ │ ├── drop-zone.tsx │ │ │ ├── field.tsx │ │ │ ├── file-trigger.tsx │ │ │ ├── form.tsx │ │ │ ├── input.tsx │ │ │ ├── kbd.tsx │ │ │ ├── list-box.tsx │ │ │ ├── loader.tsx │ │ │ ├── menu.tsx │ │ │ ├── modal.tsx │ │ │ ├── number-field.tsx │ │ │ ├── overlay.tsx │ │ │ ├── popover.tsx │ │ │ ├── progress-bar.tsx │ │ │ ├── radio-group.tsx │ │ │ ├── search-field.tsx │ │ │ ├── select.tsx │ │ │ ├── separator.tsx │ │ │ ├── skeleton.tsx │ │ │ ├── slider.tsx │ │ │ ├── switch.tsx │ │ │ ├── table.tsx │ │ │ ├── tabs.tsx │ │ │ ├── tag-group.tsx │ │ │ ├── text-area.tsx │ │ │ ├── text-field.tsx │ │ │ ├── text.tsx │ │ │ ├── time-field.tsx │ │ │ ├── toggle-button-group.tsx │ │ │ ├── toggle-button.tsx │ │ │ └── tooltip.tsx │ └── retro │ │ ├── hooks │ │ └── use-is-mobile.ts │ │ ├── lib │ │ ├── focus-styles.ts │ │ └── utils.tsx │ │ └── ui │ │ ├── alert.tsx │ │ ├── avatar.tsx │ │ ├── badge.tsx │ │ ├── breadcrumbs.tsx │ │ ├── button.tsx │ │ ├── calendar.tsx │ │ ├── checkbox-group.tsx │ │ ├── checkbox.tsx │ │ ├── color-area.tsx │ │ ├── color-field.tsx │ │ ├── color-picker.tsx │ │ ├── color-slider.tsx │ │ ├── color-swatch-picker.tsx │ │ ├── color-swatch.tsx │ │ ├── color-thumb.tsx │ │ ├── combobox.tsx │ │ ├── command.tsx │ │ ├── date-field.tsx │ │ ├── date-input.tsx │ │ ├── date-picker.tsx │ │ ├── date-range-picker.tsx │ │ ├── dialog.tsx │ │ ├── drawer.tsx │ │ ├── drop-zone.tsx │ │ ├── field.tsx │ │ ├── file-trigger.tsx │ │ ├── form.tsx │ │ ├── input.tsx │ │ ├── kbd.tsx │ │ ├── list-box.tsx │ │ ├── loader.tsx │ │ ├── menu.tsx │ │ ├── modal.tsx │ │ ├── number-field.tsx │ │ ├── overlay.tsx │ │ ├── popover.tsx │ │ ├── progress-bar.tsx │ │ ├── radio-group.tsx │ │ ├── search-field.tsx │ │ ├── select.tsx │ │ ├── separator.tsx │ │ ├── skeleton.tsx │ │ ├── slider.tsx │ │ ├── switch.tsx │ │ ├── table.tsx │ │ ├── tabs.tsx │ │ ├── tag-group.tsx │ │ ├── text-area.tsx │ │ ├── text-field.tsx │ │ ├── text.tsx │ │ ├── time-field.tsx │ │ ├── toggle-button-group.tsx │ │ ├── toggle-button.tsx │ │ └── tooltip.tsx ├── styles │ ├── docs.css │ └── globals.css └── types │ └── globals.d.ts └── tsconfig.json /.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@3.0.3/schema.json", 3 | "changelog": "@changesets/cli/changelog", 4 | "commit": false, 5 | "fixed": [], 6 | "linked": [], 7 | "access": "restricted", 8 | "baseBranch": "main", 9 | "updateInternalDependencies": "patch", 10 | "ignore": [] 11 | } 12 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/config.yml: -------------------------------------------------------------------------------- 1 | blank_issues_enabled: false 2 | contact_links: 3 | - name: Question 4 | url: https://github.com/mehdibha/dotUI/discussions/new?category=general 5 | about: For usage questions, please usee GitHub Discussions instead of posting an issue. -------------------------------------------------------------------------------- /.github/actions/setup/action.yml: -------------------------------------------------------------------------------- 1 | name: "Setup and install" 2 | description: "Common setup steps for Actions" 3 | 4 | runs: 5 | using: composite 6 | steps: 7 | - uses: pnpm/action-setup@v3 8 | - uses: actions/setup-node@v4 9 | with: 10 | node-version: 22 11 | cache: "pnpm" 12 | 13 | - shell: bash 14 | run: pnpm install -------------------------------------------------------------------------------- /.github/workflows/semantic-pr.yml: -------------------------------------------------------------------------------- 1 | name: Semantic Pull Request 2 | 3 | on: 4 | pull_request_target: 5 | types: 6 | - opened 7 | - edited 8 | - synchronize 9 | - reopened 10 | 11 | permissions: 12 | pull-requests: read 13 | 14 | jobs: 15 | main: 16 | name: Validate PR title 17 | runs-on: ubuntu-latest 18 | steps: 19 | - uses: amannn/action-semantic-pull-request@v5 20 | env: 21 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "eslint.workingDirectories": [ 3 | "www", 4 | { "pattern": "packages/*/" }, 5 | { "pattern": "packages/config/*/" }, 6 | { "pattern": "templates/*/" } 7 | ], 8 | "tailwindCSS.experimental.classRegex": [ 9 | ["([\"'`][^\"'`]*.*?[\"'`])", "[\"'`]([^\"'`]*).*?[\"'`]"] 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /commitlint.config.mjs: -------------------------------------------------------------------------------- 1 | const config = { 2 | extends: ['@commitlint/config-conventional'], 3 | rules: { 4 | 'type-enum': [ 5 | 2, 6 | 'always', 7 | [ 8 | 'feat', 9 | 'fix', 10 | 'docs', 11 | 'chore', 12 | 'style', 13 | 'refactor', 14 | 'ci', 15 | 'test', 16 | 'revert', 17 | 'perf', 18 | 'vercel', 19 | ], 20 | ], 21 | }, 22 | }; 23 | 24 | export default config -------------------------------------------------------------------------------- /packages/cli/.gitignore: -------------------------------------------------------------------------------- 1 | components 2 | dist 3 | .turbo -------------------------------------------------------------------------------- /packages/cli/.prettierignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | .turbo -------------------------------------------------------------------------------- /packages/cli/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # dotui-cli 2 | 3 | ## 0.0.3 4 | 5 | ### Patch Changes 6 | 7 | - 8e882a0: Log under developement warn 8 | 9 | ## 0.0.2 10 | 11 | ### Patch Changes 12 | 13 | - bb51621: initial commit 14 | -------------------------------------------------------------------------------- /packages/cli/eslint.config.mjs: -------------------------------------------------------------------------------- 1 | import { config } from "@dotui/eslint-config/base"; 2 | 3 | /** @type {import("eslint").Linter.Config} */ 4 | export default config; 5 | -------------------------------------------------------------------------------- /packages/cli/src/constants.ts: -------------------------------------------------------------------------------- 1 | export const REGISTRY_URL = "http://localhost:3000/registry"; 2 | 3 | export const defaultConfig = { 4 | primitives: { 5 | button: "basic", 6 | "toggle-button": "basic", 7 | input: "basic", 8 | }, 9 | }; 10 | -------------------------------------------------------------------------------- /packages/cli/src/helpers/add-checks.ts: -------------------------------------------------------------------------------- 1 | import { getConfig } from "./get-config"; 2 | 3 | export async function addChecks(cwd: string) { 4 | const config = await getConfig(cwd); 5 | if (!config) throw new Error("Failed to load config."); 6 | return { config }; 7 | } 8 | -------------------------------------------------------------------------------- /packages/cli/src/helpers/get-config-paths.ts: -------------------------------------------------------------------------------- 1 | // import { z } from "zod"; 2 | 3 | // export const configSchema = z.object({ 4 | // cwd: z.string(), 5 | // tailwindConfig: z.string(), 6 | // tailwindCss: z.string(), 7 | // utils: z.string(), 8 | // components: z.string(), 9 | // lib: z.string(), 10 | // hooks: z.string(), 11 | // core: z.string(), 12 | // }); 13 | -------------------------------------------------------------------------------- /packages/cli/src/helpers/get-package-info.ts: -------------------------------------------------------------------------------- 1 | import fs from "fs-extra"; 2 | import path from "path"; 3 | import { type PackageJson } from "type-fest"; 4 | 5 | export function getPackageJson( 6 | cwd: string = "", 7 | shouldThrow: boolean = true 8 | ): PackageJson | null { 9 | const packageJsonPath = path.join(cwd, "package.json"); 10 | 11 | return fs.readJSONSync(packageJsonPath, { 12 | throws: shouldThrow, 13 | }) as PackageJson; 14 | } 15 | -------------------------------------------------------------------------------- /packages/cli/src/helpers/updaters/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./update-deps"; 2 | export * from "./update-files"; 3 | -------------------------------------------------------------------------------- /packages/cli/src/utils/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./spinner"; 2 | export * from "./logger"; 3 | export * from "./is-url"; 4 | export * from "./resolve-import"; 5 | export * from "./get-package-manager"; 6 | -------------------------------------------------------------------------------- /packages/cli/src/utils/is-url.ts: -------------------------------------------------------------------------------- 1 | export function isUrl(path: string) { 2 | try { 3 | new URL(path); 4 | return true; 5 | // eslint-disable-next-line @typescript-eslint/no-unused-vars 6 | } catch (error) { 7 | return false; 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /packages/cli/src/utils/resolve-import.ts: -------------------------------------------------------------------------------- 1 | import { 2 | createMatchPath, 3 | type ConfigLoaderSuccessResult, 4 | } from "tsconfig-paths"; 5 | 6 | export async function resolveImport( 7 | importPath: string, 8 | config: Pick 9 | ) { 10 | return createMatchPath(config.absoluteBaseUrl, config.paths)( 11 | importPath, 12 | undefined, 13 | () => true, 14 | [".ts", ".tsx"] 15 | ); 16 | } 17 | -------------------------------------------------------------------------------- /packages/cli/src/utils/spinner.ts: -------------------------------------------------------------------------------- 1 | import { spinner as spinner_ } from "@clack/prompts"; 2 | 3 | export function spinner() { 4 | return spinner_(); 5 | } 6 | -------------------------------------------------------------------------------- /packages/cli/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es2019", 4 | "moduleResolution": "node", 5 | "strict": true, 6 | "resolveJsonModule": true, 7 | "esModuleInterop": true, 8 | "skipLibCheck": false, 9 | "baseUrl": ".", 10 | "paths": { 11 | "@/*": ["./src/*"], 12 | "~/*": ["./*"] 13 | } 14 | }, 15 | "include": ["src/**/*.ts"], 16 | "exclude": ["node_modules", "templates", "dist"] 17 | } 18 | -------------------------------------------------------------------------------- /packages/cli/tsup.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "tsup"; 2 | 3 | export default defineConfig({ 4 | clean: true, 5 | dts: true, 6 | entry: ["src/index.ts"], 7 | format: ["esm", "cjs"], 8 | sourcemap: true, 9 | minify: false, 10 | target: "esnext", 11 | outDir: "dist", 12 | noExternal: ["@dotui/schemas"], 13 | }); 14 | -------------------------------------------------------------------------------- /packages/config/eslint/README.md: -------------------------------------------------------------------------------- 1 | # `@workspace/eslint-config` 2 | 3 | Shared eslint configuration for the workspace. 4 | -------------------------------------------------------------------------------- /packages/config/ts-config/README.md: -------------------------------------------------------------------------------- 1 | # `@dotui/ts-config` 2 | 3 | Shared typescript configuration for dotUI. 4 | -------------------------------------------------------------------------------- /packages/config/ts-config/nextjs.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://json.schemastore.org/tsconfig", 3 | "extends": "./base.json", 4 | "compilerOptions": { 5 | "plugins": [{ "name": "next" }], 6 | "module": "ESNext", 7 | "moduleResolution": "Bundler", 8 | "allowJs": true, 9 | "jsx": "preserve", 10 | "noEmit": true 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /packages/config/ts-config/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@dotui/ts-config", 3 | "version": "0.0.0", 4 | "private": true, 5 | "publishConfig": { 6 | "access": "public" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /packages/config/ts-config/react-library.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://json.schemastore.org/tsconfig", 3 | "extends": "./base.json", 4 | "compilerOptions": { 5 | "jsx": "react-jsx" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/schemas/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./schema" 2 | export * from "./types" -------------------------------------------------------------------------------- /packages/schemas/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@dotui/schemas", 3 | "version": "0.0.0", 4 | "description": "The registry for dotui", 5 | "main": "./index.ts", 6 | "private": true, 7 | "exports": { 8 | ".": "./index.ts", 9 | "./schema": "./schema.ts", 10 | "./types": "./types.ts" 11 | }, 12 | "dependencies": { 13 | "zod": "^3.24.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /pnpm-workspace.yaml: -------------------------------------------------------------------------------- 1 | packages: 2 | - "www" 3 | - "templates/*" 4 | - "packages/*" 5 | - "packages/config/*" -------------------------------------------------------------------------------- /www/.gitignore: -------------------------------------------------------------------------------- 1 | .source -------------------------------------------------------------------------------- /www/.prettierignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | .next 4 | build 5 | .content-collections -------------------------------------------------------------------------------- /www/content/docs/components/buttons/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages": [ 3 | "button", 4 | "button-group", 5 | "toggle-button", 6 | "toggle-button-group", 7 | "file-trigger" 8 | ] 9 | } 10 | -------------------------------------------------------------------------------- /www/content/docs/components/colors/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages": [ 3 | "color-area", 4 | "color-field", 5 | "color-slider", 6 | "color-swatch", 7 | "color-swatch-picker", 8 | "color-picker" 9 | ] 10 | } 11 | -------------------------------------------------------------------------------- /www/content/docs/components/data-display/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages": ["avatar", "badge", "separator", "table"] 3 | } 4 | -------------------------------------------------------------------------------- /www/content/docs/components/date-and-time/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages": [ 3 | "calendar", 4 | "range-calendar", 5 | "time-field", 6 | "date-field", 7 | "date-picker", 8 | "date-range-picker" 9 | ] 10 | } 11 | -------------------------------------------------------------------------------- /www/content/docs/components/drag-and-drop/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages": ["drop-zone"] 3 | } -------------------------------------------------------------------------------- /www/content/docs/components/feedback/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages": ["alert", "progress-bar"] 3 | } -------------------------------------------------------------------------------- /www/content/docs/components/forms-and-inputs/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages": [ 3 | "text-field", 4 | "text-area", 5 | "search-field", 6 | "number-field", 7 | "checkbox", 8 | "checkbox-group", 9 | "radio-group", 10 | "switch", 11 | "slider", 12 | "form" 13 | ] 14 | } -------------------------------------------------------------------------------- /www/content/docs/components/menus-and-selection/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages": ["menu", "list-box", "select", "combobox", "tag-group", "command"] 3 | } -------------------------------------------------------------------------------- /www/content/docs/components/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Components", 3 | "icon": "Box", 4 | "pages": [ 5 | "buttons", 6 | "forms-and-inputs", 7 | "menus-and-selection", 8 | "date-and-time", 9 | "colors", 10 | "drag-and-drop", 11 | "feedback", 12 | "layout", 13 | "data-display", 14 | "navigation", 15 | "overlays" 16 | ] 17 | } 18 | -------------------------------------------------------------------------------- /www/content/docs/components/navigation/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages": ["link", "tabs", "disclosure", "disclosure-group", "breadcrumbs"] 3 | } 4 | -------------------------------------------------------------------------------- /www/content/docs/components/overlays/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages": ["modal", "popover", "drawer", "overlay", "dialog", "tooltip"] 3 | } 4 | -------------------------------------------------------------------------------- /www/content/docs/getting-started/community/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Community", 3 | "pages": ["contribution-guide", "roadmap"] 4 | } 5 | -------------------------------------------------------------------------------- /www/content/docs/getting-started/design/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Design", 3 | "pages": ["foundations", "design-tokens", "color-system", "theming"] 4 | } 5 | -------------------------------------------------------------------------------- /www/content/docs/getting-started/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Getting started", 3 | "icon": "Book", 4 | "pages": [ 5 | "introduction", 6 | "installation", 7 | "guides", 8 | "design", 9 | "community", 10 | "changelog" 11 | ] 12 | } 13 | -------------------------------------------------------------------------------- /www/content/docs/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Docs", 3 | "pages": ["getting-started", "components", "[Palette][Styles](/styles)"] 4 | } 5 | -------------------------------------------------------------------------------- /www/eslint.config.mjs: -------------------------------------------------------------------------------- 1 | import { nextJsConfig } from "@dotui/eslint-config/next-js" 2 | 3 | /** @type {import("eslint").Linter.Config} */ 4 | export default nextJsConfig 5 | -------------------------------------------------------------------------------- /www/postcss.config.mjs: -------------------------------------------------------------------------------- 1 | const config = { 2 | plugins: { 3 | "@tailwindcss/postcss": {}, 4 | }, 5 | }; 6 | 7 | export default config; 8 | -------------------------------------------------------------------------------- /www/public/images/ghibli.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mehdibha/dotUI/9747c02474054aa37ced497bde1262ef61df7fdc/www/public/images/ghibli.png -------------------------------------------------------------------------------- /www/public/images/thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mehdibha/dotUI/9747c02474054aa37ced497bde1262ef61df7fdc/www/public/images/thumbnail.png -------------------------------------------------------------------------------- /www/public/r/brutalist/base.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json", 3 | "extends": "none", 4 | "name": "base", 5 | "type": "registry:style", 6 | "dependencies": [ 7 | "tailwind-variants", 8 | "react-aria-components", 9 | "tailwindcss-react-aria-components", 10 | "lucide-react" 11 | ], 12 | "registryDependencies": [ 13 | "http://localhost:3000/r/brutalist/utils.json", 14 | "http://localhost:3000/r/brutalist/focus-styles.json" 15 | ], 16 | "files": [] 17 | } -------------------------------------------------------------------------------- /www/public/r/brutalist/file-trigger.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json", 3 | "name": "file-trigger", 4 | "type": "registry:ui", 5 | "files": [ 6 | { 7 | "path": "src/registry/brutalist/ui/file-trigger.tsx", 8 | "content": "\"use client\";\n\nimport { FileTrigger, type FileTriggerProps } from \"react-aria-components\";\n\nexport type { FileTriggerProps };\nexport { FileTrigger };\n", 9 | "type": "registry:ui" 10 | } 11 | ] 12 | } -------------------------------------------------------------------------------- /www/public/r/brutalist/form.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json", 3 | "name": "form", 4 | "type": "registry:ui", 5 | "files": [ 6 | { 7 | "path": "src/registry/brutalist/ui/form.tsx", 8 | "content": "\"use client\";\r\n\r\nimport {\r\n Form as AriaForm,\r\n FormProps as AriaFormProps,\r\n} from \"react-aria-components\";\r\n\r\nexport type FormProps = AriaFormProps;\r\nexport { AriaForm as Form };\r\n", 9 | "type": "registry:ui" 10 | } 11 | ] 12 | } -------------------------------------------------------------------------------- /www/public/r/forest/base.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json", 3 | "extends": "none", 4 | "name": "base", 5 | "type": "registry:style", 6 | "dependencies": [ 7 | "tailwind-variants", 8 | "react-aria-components", 9 | "tailwindcss-react-aria-components", 10 | "lucide-react" 11 | ], 12 | "registryDependencies": [ 13 | "http://localhost:3000/r/forest/utils.json", 14 | "http://localhost:3000/r/forest/focus-styles.json" 15 | ], 16 | "files": [] 17 | } -------------------------------------------------------------------------------- /www/public/r/forest/file-trigger.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json", 3 | "name": "file-trigger", 4 | "type": "registry:ui", 5 | "files": [ 6 | { 7 | "path": "src/registry/forest/ui/file-trigger.tsx", 8 | "content": "\"use client\";\n\nimport { FileTrigger, type FileTriggerProps } from \"react-aria-components\";\n\nexport type { FileTriggerProps };\nexport { FileTrigger };\n", 9 | "type": "registry:ui" 10 | } 11 | ] 12 | } -------------------------------------------------------------------------------- /www/public/r/forest/form.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json", 3 | "name": "form", 4 | "type": "registry:ui", 5 | "files": [ 6 | { 7 | "path": "src/registry/forest/ui/form.tsx", 8 | "content": "\"use client\";\r\n\r\nimport {\r\n Form as AriaForm,\r\n FormProps as AriaFormProps,\r\n} from \"react-aria-components\";\r\n\r\nexport type FormProps = AriaFormProps;\r\nexport { AriaForm as Form };\r\n", 9 | "type": "registry:ui" 10 | } 11 | ] 12 | } -------------------------------------------------------------------------------- /www/public/r/high-contrast/base.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json", 3 | "extends": "none", 4 | "name": "base", 5 | "type": "registry:style", 6 | "dependencies": [ 7 | "tailwind-variants", 8 | "react-aria-components", 9 | "tailwindcss-react-aria-components", 10 | "lucide-react" 11 | ], 12 | "registryDependencies": [ 13 | "http://localhost:3000/r/high-contrast/utils.json", 14 | "http://localhost:3000/r/high-contrast/focus-styles.json" 15 | ], 16 | "files": [] 17 | } -------------------------------------------------------------------------------- /www/public/r/high-contrast/file-trigger.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json", 3 | "name": "file-trigger", 4 | "type": "registry:ui", 5 | "files": [ 6 | { 7 | "path": "src/registry/high-contrast/ui/file-trigger.tsx", 8 | "content": "\"use client\";\n\nimport { FileTrigger, type FileTriggerProps } from \"react-aria-components\";\n\nexport type { FileTriggerProps };\nexport { FileTrigger };\n", 9 | "type": "registry:ui" 10 | } 11 | ] 12 | } -------------------------------------------------------------------------------- /www/public/r/high-contrast/form.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json", 3 | "name": "form", 4 | "type": "registry:ui", 5 | "files": [ 6 | { 7 | "path": "src/registry/high-contrast/ui/form.tsx", 8 | "content": "\"use client\";\r\n\r\nimport {\r\n Form as AriaForm,\r\n FormProps as AriaFormProps,\r\n} from \"react-aria-components\";\r\n\r\nexport type FormProps = AriaFormProps;\r\nexport { AriaForm as Form };\r\n", 9 | "type": "registry:ui" 10 | } 11 | ] 12 | } -------------------------------------------------------------------------------- /www/public/r/material/base.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json", 3 | "extends": "none", 4 | "name": "base", 5 | "type": "registry:style", 6 | "dependencies": [ 7 | "tailwind-variants", 8 | "react-aria-components", 9 | "tailwindcss-react-aria-components", 10 | "lucide-react" 11 | ], 12 | "registryDependencies": [ 13 | "http://localhost:3000/r/material/utils.json", 14 | "http://localhost:3000/r/material/focus-styles.json" 15 | ], 16 | "files": [] 17 | } -------------------------------------------------------------------------------- /www/public/r/material/file-trigger.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json", 3 | "name": "file-trigger", 4 | "type": "registry:ui", 5 | "files": [ 6 | { 7 | "path": "src/registry/material/ui/file-trigger.tsx", 8 | "content": "\"use client\";\n\nimport { FileTrigger, type FileTriggerProps } from \"react-aria-components\";\n\nexport type { FileTriggerProps };\nexport { FileTrigger };\n", 9 | "type": "registry:ui" 10 | } 11 | ] 12 | } -------------------------------------------------------------------------------- /www/public/r/material/form.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json", 3 | "name": "form", 4 | "type": "registry:ui", 5 | "files": [ 6 | { 7 | "path": "src/registry/material/ui/form.tsx", 8 | "content": "\"use client\";\r\n\r\nimport {\r\n Form as AriaForm,\r\n FormProps as AriaFormProps,\r\n} from \"react-aria-components\";\r\n\r\nexport type FormProps = AriaFormProps;\r\nexport { AriaForm as Form };\r\n", 9 | "type": "registry:ui" 10 | } 11 | ] 12 | } -------------------------------------------------------------------------------- /www/public/r/minimalist/base.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json", 3 | "extends": "none", 4 | "name": "base", 5 | "type": "registry:style", 6 | "dependencies": [ 7 | "tailwind-variants", 8 | "react-aria-components", 9 | "tailwindcss-react-aria-components", 10 | "lucide-react" 11 | ], 12 | "registryDependencies": [ 13 | "http://localhost:3000/r/minimalist/utils.json", 14 | "http://localhost:3000/r/minimalist/focus-styles.json" 15 | ], 16 | "files": [] 17 | } -------------------------------------------------------------------------------- /www/public/r/minimalist/file-trigger.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json", 3 | "name": "file-trigger", 4 | "type": "registry:ui", 5 | "files": [ 6 | { 7 | "path": "src/registry/minimalist/ui/file-trigger.tsx", 8 | "content": "\"use client\";\n\nimport { FileTrigger, type FileTriggerProps } from \"react-aria-components\";\n\nexport type { FileTriggerProps };\nexport { FileTrigger };\n", 9 | "type": "registry:ui" 10 | } 11 | ] 12 | } -------------------------------------------------------------------------------- /www/public/r/minimalist/form.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json", 3 | "name": "form", 4 | "type": "registry:ui", 5 | "files": [ 6 | { 7 | "path": "src/registry/minimalist/ui/form.tsx", 8 | "content": "\"use client\";\r\n\r\nimport {\r\n Form as AriaForm,\r\n FormProps as AriaFormProps,\r\n} from \"react-aria-components\";\r\n\r\nexport type FormProps = AriaFormProps;\r\nexport { AriaForm as Form };\r\n", 9 | "type": "registry:ui" 10 | } 11 | ] 12 | } -------------------------------------------------------------------------------- /www/public/r/retro/base.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json", 3 | "extends": "none", 4 | "name": "base", 5 | "type": "registry:style", 6 | "dependencies": [ 7 | "tailwind-variants", 8 | "react-aria-components", 9 | "tailwindcss-react-aria-components", 10 | "lucide-react" 11 | ], 12 | "registryDependencies": [ 13 | "http://localhost:3000/r/retro/utils.json", 14 | "http://localhost:3000/r/retro/focus-styles.json" 15 | ], 16 | "files": [] 17 | } -------------------------------------------------------------------------------- /www/public/r/retro/file-trigger.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json", 3 | "name": "file-trigger", 4 | "type": "registry:ui", 5 | "files": [ 6 | { 7 | "path": "src/registry/retro/ui/file-trigger.tsx", 8 | "content": "\"use client\";\n\nimport { FileTrigger, type FileTriggerProps } from \"react-aria-components\";\n\nexport type { FileTriggerProps };\nexport { FileTrigger };\n", 9 | "type": "registry:ui" 10 | } 11 | ] 12 | } -------------------------------------------------------------------------------- /www/public/r/retro/form.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json", 3 | "name": "form", 4 | "type": "registry:ui", 5 | "files": [ 6 | { 7 | "path": "src/registry/retro/ui/form.tsx", 8 | "content": "\"use client\";\r\n\r\nimport {\r\n Form as AriaForm,\r\n FormProps as AriaFormProps,\r\n} from \"react-aria-components\";\r\n\r\nexport type FormProps = AriaFormProps;\r\nexport { AriaForm as Form };\r\n", 9 | "type": "registry:ui" 10 | } 11 | ] 12 | } -------------------------------------------------------------------------------- /www/src/__registry__/.autogenerated: -------------------------------------------------------------------------------- 1 | This directory is autogenerated. Do not edit its contents directly. -------------------------------------------------------------------------------- /www/src/__registry__/ui/file-trigger.basic.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { FileTrigger, type FileTriggerProps } from "react-aria-components"; 4 | 5 | export type { FileTriggerProps }; 6 | export { FileTrigger }; 7 | -------------------------------------------------------------------------------- /www/src/__registry__/ui/form.basic.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { 4 | Form as AriaForm, 5 | FormProps as AriaFormProps, 6 | } from "react-aria-components"; 7 | 8 | export type FormProps = AriaFormProps; 9 | export { AriaForm as Form }; 10 | -------------------------------------------------------------------------------- /www/src/__registry__/ui/kbd.basic.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { Keyboard } from "react-aria-components"; 4 | import { tv } from "tailwind-variants"; 5 | 6 | const KbdStyles = tv({ 7 | base: "text-fg-muted bg-bg inline-flex min-w-5 items-center justify-center rounded-sm border p-1 text-xs leading-none", 8 | }); 9 | 10 | type KbdProps = React.HTMLAttributes; 11 | const Kbd = ({ className, ...props }: KbdProps) => { 12 | return ; 13 | }; 14 | 15 | export type { KbdProps }; 16 | export { Kbd, KbdStyles }; 17 | -------------------------------------------------------------------------------- /www/src/app/(app)/styles/[styleName]/theme-editor/context.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export const ThemeEditorContext = React.createContext<{ 4 | isLoading: boolean; 5 | isEditMode: boolean; 6 | }>({ 7 | isLoading: false, 8 | isEditMode: false, 9 | }); 10 | 11 | export const useThemeEditorContext = () => React.useContext(ThemeEditorContext); 12 | -------------------------------------------------------------------------------- /www/src/app/(app)/styles/[styleName]/theme-editor/iconography.tsx: -------------------------------------------------------------------------------- 1 | export function ThemeIconography() { 2 | return
; 3 | } 4 | -------------------------------------------------------------------------------- /www/src/app/(app)/styles/page.tsx: -------------------------------------------------------------------------------- 1 | import { StylesExplorer } from "@/modules/styles/components/styles-explorer"; 2 | 3 | export default function ThemesPage() { 4 | return ( 5 |
6 |

Styles

7 |

8 | A style provide a complete design system with its own colors, fonts, 9 | icons, layout, and components. 10 |

11 | 12 |
13 | ); 14 | } 15 | -------------------------------------------------------------------------------- /www/src/app/apple-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mehdibha/dotUI/9747c02474054aa37ced497bde1262ef61df7fdc/www/src/app/apple-icon.png -------------------------------------------------------------------------------- /www/src/app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mehdibha/dotUI/9747c02474054aa37ced497bde1262ef61df7fdc/www/src/app/favicon.ico -------------------------------------------------------------------------------- /www/src/app/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mehdibha/dotUI/9747c02474054aa37ced497bde1262ef61df7fdc/www/src/app/icon.png -------------------------------------------------------------------------------- /www/src/app/preview/[styleName]/app-01/(auth)/layout.tsx: -------------------------------------------------------------------------------- 1 | export default function AuthLayout({ 2 | children, 3 | }: { 4 | children: React.ReactNode; 5 | }) { 6 | return ( 7 |
8 | {children} 9 |
10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /www/src/app/preview/[styleName]/app-01/(marketing)/pricing/page.tsx: -------------------------------------------------------------------------------- 1 | export default function PricingPage() { 2 | return
PricingPage
; 3 | } 4 | -------------------------------------------------------------------------------- /www/src/app/preview/[styleName]/app-01/hooks/use-api.ts: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export const useSimulateApiCall = ({ 4 | onSuccess, 5 | }: { 6 | onSuccess?: () => void; 7 | }) => { 8 | const [status, setStatus] = React.useState< 9 | "idle" | "loading" | "success" | "error" 10 | >("idle"); 11 | 12 | const simulateApiCall = async () => { 13 | setStatus("loading"); 14 | await new Promise((resolve) => setTimeout(resolve, 1000)); 15 | setStatus("success"); 16 | onSuccess?.(); 17 | }; 18 | 19 | return { status, simulateApiCall }; 20 | }; 21 | -------------------------------------------------------------------------------- /www/src/app/preview/[styleName]/theme-updater.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import React from "react"; 4 | import { useRouter } from "next/navigation"; 5 | 6 | export function ThemeUpdater() { 7 | const router = useRouter(); 8 | 9 | React.useEffect(() => { 10 | window.addEventListener("message", (event) => { 11 | if (event.data.type === "UPDATE_THEME") { 12 | const newThemeName = event.data.themeName; 13 | router.push(`/preview/${newThemeName}`); 14 | } 15 | }); 16 | }, [router]); 17 | return null; 18 | } 19 | -------------------------------------------------------------------------------- /www/src/app/robots.ts: -------------------------------------------------------------------------------- 1 | import { MetadataRoute } from "next"; 2 | import { siteConfig } from "@/config/site"; 3 | 4 | export default function robots(): MetadataRoute.Robots { 5 | const domain = siteConfig.url; 6 | 7 | return { 8 | rules: [ 9 | { 10 | userAgent: "*", 11 | allow: "/", 12 | }, 13 | ], 14 | sitemap: `${domain}/sitemap.xml`, 15 | }; 16 | } 17 | -------------------------------------------------------------------------------- /www/src/app/source.tsx: -------------------------------------------------------------------------------- 1 | import { createElement } from "react"; 2 | import { loader } from "fumadocs-core/source"; 3 | import { icons } from "lucide-react"; 4 | import { docs } from "~/.source"; 5 | 6 | export const source = loader({ 7 | baseUrl: "/docs", 8 | source: docs.toFumadocsSource(), 9 | icon: (icon) => { 10 | if (!icon) { 11 | return; 12 | } 13 | if (icon in icons) return createElement(icons[icon as keyof typeof icons]); 14 | }, 15 | }); 16 | -------------------------------------------------------------------------------- /www/src/components/announcement.tsx: -------------------------------------------------------------------------------- 1 | import { LayoutTemplateIcon } from "lucide-react"; 2 | import { Button } from "@/components/ui/button"; 3 | 4 | export function Announcement() { 5 | return ( 6 | 13 | ); 14 | } 15 | -------------------------------------------------------------------------------- /www/src/components/dynamic-ui/avatar.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/__registry__/ui/avatar.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/dynamic-ui/badge.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/__registry__/ui/badge.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/dynamic-ui/breadcrumbs.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/__registry__/ui/breadcrumbs.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/dynamic-ui/button-group.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/__registry__/ui/button-group.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/dynamic-ui/checkbox-group.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/__registry__/ui/checkbox-group.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/dynamic-ui/checkbox.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/__registry__/ui/checkbox.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/dynamic-ui/color-area.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/__registry__/ui/color-area.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/dynamic-ui/color-field.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/__registry__/ui/color-field.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/dynamic-ui/color-picker.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/__registry__/ui/color-picker.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/dynamic-ui/color-slider.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/__registry__/ui/color-slider.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/dynamic-ui/color-swatch-picker.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/__registry__/ui/color-swatch-picker.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/dynamic-ui/color-swatch.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/__registry__/ui/color-swatch.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/dynamic-ui/color-thumb.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/__registry__/ui/color-thumb.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/dynamic-ui/combobox.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/__registry__/ui/combobox.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/dynamic-ui/command.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/__registry__/ui/command.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/dynamic-ui/date-field.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/__registry__/ui/date-field.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/dynamic-ui/date-input.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/__registry__/ui/date-input.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/dynamic-ui/date-picker.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/__registry__/ui/date-picker.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/dynamic-ui/date-range-picker.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/__registry__/ui/date-range-picker.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/dynamic-ui/dialog.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/__registry__/ui/dialog.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/dynamic-ui/drawer.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/__registry__/ui/drawer.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/dynamic-ui/drop-zone.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/__registry__/ui/drop-zone.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/dynamic-ui/field.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/__registry__/ui/field.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/dynamic-ui/file-trigger.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/__registry__/ui/file-trigger.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/dynamic-ui/form.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/__registry__/ui/form.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/dynamic-ui/input.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/__registry__/ui/input.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/dynamic-ui/kbd.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/__registry__/ui/kbd.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/dynamic-ui/list-box.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/__registry__/ui/list-box.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/dynamic-ui/menu.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/__registry__/ui/menu.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/dynamic-ui/modal.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/__registry__/ui/modal.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/dynamic-ui/number-field.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/__registry__/ui/number-field.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/dynamic-ui/overlay.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/__registry__/ui/overlay.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/dynamic-ui/popover.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/__registry__/ui/popover.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/dynamic-ui/progress-bar.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/__registry__/ui/progress-bar.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/dynamic-ui/radio-group.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/__registry__/ui/radio-group.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/dynamic-ui/ripple.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/__registry__/ui/ripple"; 2 | -------------------------------------------------------------------------------- /www/src/components/dynamic-ui/search-field.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/__registry__/ui/search-field.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/dynamic-ui/select.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/__registry__/ui/select.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/dynamic-ui/separator.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/__registry__/ui/separator.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/dynamic-ui/skeleton.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/__registry__/ui/skeleton.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/dynamic-ui/slider.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/__registry__/ui/slider.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/dynamic-ui/switch.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/__registry__/ui/switch.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/dynamic-ui/table.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/__registry__/ui/table.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/dynamic-ui/tag-group.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/__registry__/ui/tag-group.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/dynamic-ui/text-area.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/__registry__/ui/text-area.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/dynamic-ui/text-field.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/__registry__/ui/text-field.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/dynamic-ui/text.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/__registry__/ui/text.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/dynamic-ui/time-field.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/__registry__/ui/time-field.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/dynamic-ui/toggle-button-group.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/__registry__/ui/toggle-button-group.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/dynamic-ui/toggle-button.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/__registry__/ui/toggle-button.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/ui/alert.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/modules/registry/ui/alert.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/ui/avatar.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/modules/registry/ui/avatar.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/ui/badge.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/modules/registry/ui/badge.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/ui/breadcrumbs.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/modules/registry/ui/breadcrumbs.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/ui/button.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/modules/registry/ui/button.outline"; 2 | -------------------------------------------------------------------------------- /www/src/components/ui/calendar.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/modules/registry/ui/calendar.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/ui/checkbox-group.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/modules/registry/ui/checkbox-group.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/ui/checkbox.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/modules/registry/ui/checkbox.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/ui/color-area.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/modules/registry/ui/color-area.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/ui/color-field.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/modules/registry/ui/color-field.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/ui/color-picker.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/modules/registry/ui/color-picker.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/ui/color-slider.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/modules/registry/ui/color-slider.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/ui/color-swatch-picker.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/modules/registry/ui/color-swatch-picker.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/ui/color-swatch.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/modules/registry/ui/color-swatch.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/ui/color-thumb.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/modules/registry/ui/color-thumb.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/ui/combobox.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/modules/registry/ui/combobox.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/ui/command.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/modules/registry/ui/command.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/ui/date-field.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/modules/registry/ui/date-field.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/ui/date-input.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/modules/registry/ui/date-input.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/ui/date-picker.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/modules/registry/ui/date-picker.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/ui/date-range-picker.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/modules/registry/ui/date-range-picker.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/ui/dialog.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/modules/registry/ui/dialog.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/ui/drop-zone.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/modules/registry/ui/drop-zone.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/ui/field.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/modules/registry/ui/field.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/ui/file-trigger.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/modules/registry/ui/file-trigger.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/ui/form.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/modules/registry/ui/form.react-hook-form"; 2 | -------------------------------------------------------------------------------- /www/src/components/ui/input.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/modules/registry/ui/input.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/ui/kbd.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/modules/registry/ui/kbd.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/ui/list-box.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/modules/registry/ui/list-box.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/ui/loader.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/modules/registry/ui/loader.ring"; 2 | -------------------------------------------------------------------------------- /www/src/components/ui/menu.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/modules/registry/ui/menu.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/ui/number-field.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/modules/registry/ui/number-field.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/ui/overlay.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/modules/registry/ui/overlay.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/ui/popover.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/modules/registry/ui/popover.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/ui/progress-bar.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/modules/registry/ui/progress-bar.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/ui/radio-group.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/modules/registry/ui/radio-group.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/ui/search-field.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/modules/registry/ui/search-field.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/ui/select.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/modules/registry/ui/select.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/ui/separator.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/modules/registry/ui/separator.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/ui/skeleton.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/modules/registry/ui/skeleton.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/ui/slider.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/modules/registry/ui/slider.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/ui/switch.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/modules/registry/ui/switch.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/ui/table.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/modules/registry/ui/table.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/ui/tabs.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/modules/registry/ui/tabs.motion"; 2 | -------------------------------------------------------------------------------- /www/src/components/ui/tag-group.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/modules/registry/ui/tag-group.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/ui/text-area.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/modules/registry/ui/text-area.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/ui/text-field.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/modules/registry/ui/text-field.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/ui/text.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/modules/registry/ui/text.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/ui/time-field.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/modules/registry/ui/time-field.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/ui/toggle-button-group.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/modules/registry/ui/toggle-button-group.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/ui/toggle-button.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/modules/registry/ui/toggle-button.basic"; 2 | -------------------------------------------------------------------------------- /www/src/components/ui/tooltip.tsx: -------------------------------------------------------------------------------- 1 | export * from "@/modules/registry/ui/tooltip.basic"; 2 | -------------------------------------------------------------------------------- /www/src/config/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./site"; 2 | -------------------------------------------------------------------------------- /www/src/hooks/use-debounce.ts: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export function useDebounce(value: T, delay: number): T { 4 | const [debouncedValue, setDebouncedValue] = React.useState(value); 5 | 6 | React.useEffect(() => { 7 | const handler = setTimeout(() => { 8 | setDebouncedValue(value); 9 | }, delay); 10 | 11 | return () => { 12 | clearTimeout(handler); 13 | }; 14 | }, [value, delay]); 15 | 16 | return debouncedValue; 17 | } 18 | -------------------------------------------------------------------------------- /www/src/hooks/use-mounted.ts: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export function useMounted() { 4 | const [isMounted, setIsMounted] = React.useState(false); 5 | 6 | React.useEffect(() => { 7 | setIsMounted(true); 8 | }, []); 9 | 10 | return isMounted; 11 | } 12 | -------------------------------------------------------------------------------- /www/src/lib/focus-styles.ts: -------------------------------------------------------------------------------- 1 | export * from "@/modules/registry/lib/focus-styles"; 2 | -------------------------------------------------------------------------------- /www/src/lib/fonts.ts: -------------------------------------------------------------------------------- 1 | import { Josefin_Sans, Geist_Mono, Geist } from "next/font/google"; 2 | 3 | export const josefinSans = Josefin_Sans({ 4 | subsets: ["latin"], 5 | variable: "--font-josefin", 6 | }); 7 | 8 | export const fontSans = Geist({ 9 | subsets: ["latin"], 10 | variable: "--font-sans", 11 | }); 12 | 13 | export const fontMono = Geist_Mono({ 14 | subsets: ["latin"], 15 | variable: "--font-mono", 16 | }); 17 | -------------------------------------------------------------------------------- /www/src/lib/utils.ts: -------------------------------------------------------------------------------- 1 | export * from "@/modules/registry/lib/utils"; 2 | -------------------------------------------------------------------------------- /www/src/modules/docs/components/font-loader.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export const FontLoader = ({ 4 | children, 5 | }: { 6 | children: React.ReactNode; 7 | font: string | string[]; 8 | }) => { 9 | return
{children}
; 10 | }; 11 | -------------------------------------------------------------------------------- /www/src/modules/docs/components/last-update.tsx: -------------------------------------------------------------------------------- 1 | import { getGithubLastEdit } from "@/lib/github"; 2 | 3 | export async function PageLastUpdate({ path }: { path: string }) { 4 | try { 5 | const date = await getGithubLastEdit(path); 6 | if (!date) return null; 7 | return ( 8 |

9 | Last updated on {date.toLocaleDateString()} 10 |

11 | ); 12 | } catch (e) { 13 | console.error(e); 14 | return null; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /www/src/modules/docs/components/style-selector.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mehdibha/dotUI/9747c02474054aa37ced497bde1262ef61df7fdc/www/src/modules/docs/components/style-selector.tsx -------------------------------------------------------------------------------- /www/src/modules/docs/demos/alert/action.tsx: -------------------------------------------------------------------------------- 1 | import { Alert } from "@/components/dynamic-ui/alert"; 2 | import { Button } from "@/components/dynamic-ui/button"; 3 | 4 | export default function AlertDemo() { 5 | return ( 6 | 9 | Upgrade 10 | 11 | } 12 | > 13 | You are currently on the free plan. Upgrade to unlock more features. 14 | 15 | ); 16 | } 17 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/alert/content.tsx: -------------------------------------------------------------------------------- 1 | import { Alert } from "@/components/dynamic-ui/alert"; 2 | 3 | export default function AlertDemo() { 4 | return ( 5 | 6 | Enter your payment method to complete your purchase. 7 | 8 | ); 9 | } 10 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/alert/custom-icon.tsx: -------------------------------------------------------------------------------- 1 | import { GlobeIcon } from "lucide-react"; 2 | import { Alert } from "@/components/dynamic-ui/alert"; 3 | 4 | export default function AlertDemo() { 5 | return } title="Hello world" />; 6 | } 7 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/alert/default.tsx: -------------------------------------------------------------------------------- 1 | import { Alert } from "@/components/dynamic-ui/alert"; 2 | import { Button } from "@/components/dynamic-ui/button"; 3 | 4 | export default function AlertDemo() { 5 | return ( 6 | 10 | Upgrade 11 | 12 | } 13 | > 14 | You are currently on the free plan. Upgrade to unlock more features. 15 | 16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/alert/title.tsx: -------------------------------------------------------------------------------- 1 | import { Alert } from "@/components/dynamic-ui/alert"; 2 | 3 | export default function AlertDemo() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/avatar/default.tsx: -------------------------------------------------------------------------------- 1 | import { Avatar } from "@/components/dynamic-ui/avatar"; 2 | 3 | export default function Demo() { 4 | return ( 5 |
6 | 11 | 16 |
17 | ); 18 | } 19 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/avatar/shape.tsx: -------------------------------------------------------------------------------- 1 | import { Avatar } from "@/components/dynamic-ui/avatar"; 2 | 3 | export default function Demo() { 4 | return ( 5 |
6 | 12 | 18 |
19 | ); 20 | } 21 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/avatar/sizes.tsx: -------------------------------------------------------------------------------- 1 | import { Avatar } from "@/components/dynamic-ui/avatar"; 2 | 3 | export default function Demo() { 4 | return ( 5 |
6 | {(["sm", "md", "lg"] as const).map((size) => ( 7 | 14 | ))} 15 |
16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/badge/default.tsx: -------------------------------------------------------------------------------- 1 | import { Badge } from "@/components/dynamic-ui/badge"; 2 | 3 | export default function Demo() { 4 | return Badge; 5 | } 6 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/badge/icon.tsx: -------------------------------------------------------------------------------- 1 | import { ShieldIcon } from "lucide-react"; 2 | import { Badge } from "@/components/dynamic-ui/badge"; 3 | 4 | export default function Demo() { 5 | return ( 6 |
7 | 8 | 9 | Badge 10 | 11 | 12 | 13 | Badge 14 | 15 | 16 | 17 | Badge 18 | 19 |
20 | ); 21 | } 22 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/badge/sizes.tsx: -------------------------------------------------------------------------------- 1 | import { Badge } from "@/components/dynamic-ui/badge"; 2 | 3 | export default function Demo() { 4 | return ( 5 |
6 | Small 7 | Medium 8 | Large 9 |
10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/badge/variants.tsx: -------------------------------------------------------------------------------- 1 | import { Badge } from "@/components/dynamic-ui/badge"; 2 | 3 | export default function Demo() { 4 | return ( 5 |
6 | neutral 7 | accent 8 | success 9 | danger 10 | warning 11 | info 12 |
13 | ); 14 | } 15 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/breadcrumbs/basic.tsx: -------------------------------------------------------------------------------- 1 | import { Breadcrumbs, Breadcrumb } from "@/components/dynamic-ui/breadcrumbs"; 2 | 3 | export default function Demo() { 4 | return ( 5 | 6 | Home 7 | Components 8 | Breadcrumbs 9 | 10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/breadcrumbs/disabled.tsx: -------------------------------------------------------------------------------- 1 | import { Breadcrumbs, Breadcrumb } from "@/components/dynamic-ui/breadcrumbs"; 2 | 3 | export default function Demo() { 4 | return ( 5 | 6 | Home 7 | Components 8 | Breadcrumbs 9 | 10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/breadcrumbs/icon.tsx: -------------------------------------------------------------------------------- 1 | import { HomeIcon } from "lucide-react"; 2 | import { Breadcrumbs, Breadcrumb } from "@/components/dynamic-ui/breadcrumbs"; 3 | 4 | export default function Demo() { 5 | return ( 6 | 7 | 8 | 9 | Home 10 | 11 | Components 12 | Breadcrumbs 13 | 14 | ); 15 | } 16 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/button-group/default.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { Button } from "@/components/dynamic-ui/button"; 4 | import { ButtonGroup } from "@/components/dynamic-ui/button-group"; 5 | 6 | export default function Demo() { 7 | return ( 8 | 9 | 10 | 11 | 12 | 13 | ); 14 | } 15 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/button/default.tsx: -------------------------------------------------------------------------------- 1 | import { Button } from "@/components/dynamic-ui/button"; 2 | 3 | export default function Demo() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/button/disabled.tsx: -------------------------------------------------------------------------------- 1 | import { Button } from "@/components/dynamic-ui/button"; 2 | 3 | export default function Demo() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/button/link-button.tsx: -------------------------------------------------------------------------------- 1 | import { LogInIcon } from "lucide-react"; 2 | import { Button } from "@/components/dynamic-ui/button"; 3 | 4 | export default function Demo() { 5 | return ( 6 | 9 | ); 10 | } 11 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/button/prefix-and-suffix.tsx: -------------------------------------------------------------------------------- 1 | import { UploadIcon } from "lucide-react"; 2 | import { Button } from "@/components/dynamic-ui/button"; 3 | 4 | export default function Demo() { 5 | return ( 6 |
7 | 8 | 9 |
10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/button/sizes.tsx: -------------------------------------------------------------------------------- 1 | import { Button } from "@/components/dynamic-ui/button"; 2 | 3 | export default function Demo() { 4 | return ( 5 |
6 | 7 | 8 | 9 |
10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/button/variants.tsx: -------------------------------------------------------------------------------- 1 | import { Button } from "@/components/dynamic-ui/button"; 2 | 3 | const variants = [ 4 | "default", 5 | "primary", 6 | "outline", 7 | "quiet", 8 | "success", 9 | "warning", 10 | "danger", 11 | "accent", 12 | ] as const; 13 | 14 | export default function Demo() { 15 | return ( 16 |
17 | {variants.map((variant) => ( 18 | 21 | ))} 22 |
23 | ); 24 | } 25 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/calendar/default.tsx: -------------------------------------------------------------------------------- 1 | import { Calendar } from "@/components/dynamic-ui/calendar"; 2 | 3 | export default function Demo() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/calendar/disabled.tsx: -------------------------------------------------------------------------------- 1 | import { Calendar } from "@/components/dynamic-ui/calendar"; 2 | 3 | export default function Demo() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/calendar/page-behaviour.tsx: -------------------------------------------------------------------------------- 1 | import { Calendar } from "@/components/dynamic-ui/calendar"; 2 | 3 | export default function Demo() { 4 | return ( 5 | 10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/calendar/read-only.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { getLocalTimeZone, today } from "@internationalized/date"; 4 | import { Calendar } from "@/components/dynamic-ui/calendar"; 5 | 6 | export default function Demo() { 7 | return ( 8 | 13 | ); 14 | } 15 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/calendar/uncontrolled.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import React from "react"; 4 | import { parseDate } from "@internationalized/date"; 5 | import { Calendar } from "@/components/dynamic-ui/calendar"; 6 | 7 | export default function Demo() { 8 | return ( 9 | 13 | ); 14 | } 15 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/calendar/validation.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { getLocalTimeZone, today } from "@internationalized/date"; 4 | import { Calendar } from "@/components/dynamic-ui/calendar"; 5 | 6 | export default function Demo() { 7 | return ( 8 | 12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/calendar/variant.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { parseDate } from "@internationalized/date"; 4 | import { Calendar } from "@/components/dynamic-ui/calendar"; 5 | 6 | export default function Demo() { 7 | return ( 8 | 13 | ); 14 | } 15 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/calendar/visible-months.tsx: -------------------------------------------------------------------------------- 1 | import { Calendar } from "@/components/dynamic-ui/calendar"; 2 | 3 | export default function Demo() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/checkbox-group/default.tsx: -------------------------------------------------------------------------------- 1 | import { Checkbox } from "@/components/dynamic-ui/checkbox"; 2 | import { CheckboxGroup } from "@/components/dynamic-ui/checkbox-group"; 3 | 4 | export default function Demo() { 5 | return ( 6 | 7 | Next.js 8 | Remix 9 | Gatsby 10 | 11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/checkbox-group/disabled.tsx: -------------------------------------------------------------------------------- 1 | import { Checkbox } from "@/components/dynamic-ui/checkbox"; 2 | import { CheckboxGroup } from "@/components/dynamic-ui/checkbox-group"; 3 | 4 | export default function Demo() { 5 | return ( 6 | 11 | Next.js 12 | Remix 13 | Gatsby 14 | 15 | ); 16 | } 17 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/checkbox-group/read-only.tsx: -------------------------------------------------------------------------------- 1 | import { Checkbox } from "@/components/dynamic-ui/checkbox"; 2 | import { CheckboxGroup } from "@/components/dynamic-ui/checkbox-group"; 3 | 4 | export default function Demo() { 5 | return ( 6 | 11 | Next.js 12 | Remix 13 | Gatsby 14 | 15 | ); 16 | } 17 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/checkbox-group/required.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Checkbox } from "@/components/dynamic-ui/checkbox"; 3 | import { CheckboxGroup } from "@/components/dynamic-ui/checkbox-group"; 4 | 5 | export default function Demo() { 6 | return ( 7 | 8 | Next.js 9 | Remix 10 | 11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/checkbox-group/uncontrolled.tsx: -------------------------------------------------------------------------------- 1 | import { Checkbox } from "@/components/dynamic-ui/checkbox"; 2 | import { CheckboxGroup } from "@/components/dynamic-ui/checkbox-group"; 3 | 4 | export default function Demo() { 5 | return ( 6 | 7 | Next.js 8 | Remix 9 | Gatsby 10 | 11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/checkbox/card.tsx: -------------------------------------------------------------------------------- 1 | import { Checkbox } from "@/components/dynamic-ui/checkbox"; 2 | 3 | export default function Demo() { 4 | return ( 5 | I agree to the terms and conditions 6 | ); 7 | } 8 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/checkbox/composition.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | CheckboxRoot, 3 | CheckboxIndicator, 4 | } from "@/components/dynamic-ui/checkbox"; 5 | 6 | export default function Demo() { 7 | return ( 8 | 9 | I agree to the terms and conditions 10 | 11 | 12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/checkbox/default.tsx: -------------------------------------------------------------------------------- 1 | import { Checkbox } from "@/components/dynamic-ui/checkbox"; 2 | 3 | export default function Demo() { 4 | return I accept the terms and conditions; 5 | } 6 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/checkbox/disabled.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { Checkbox } from "@/components/dynamic-ui/checkbox"; 4 | 5 | export default function Demo() { 6 | return I accept the terms and conditions; 7 | } 8 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/checkbox/indeterminate.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { Checkbox } from "@/components/dynamic-ui/checkbox"; 4 | 5 | export default function Demo() { 6 | return Select all; 7 | } 8 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/checkbox/read-only.tsx: -------------------------------------------------------------------------------- 1 | import { Checkbox } from "@/components/dynamic-ui/checkbox"; 2 | 3 | export default function Demo() { 4 | return ( 5 | 6 | I accept the terms and conditions 7 | 8 | ); 9 | } 10 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/checkbox/uncontrolled.tsx: -------------------------------------------------------------------------------- 1 | import { Checkbox } from "@/components/dynamic-ui/checkbox"; 2 | 3 | export default function Demo() { 4 | return I accept the terms and conditions; 5 | } 6 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/checkbox/variants.tsx: -------------------------------------------------------------------------------- 1 | import { Checkbox } from "@/components/dynamic-ui/checkbox"; 2 | 3 | export default function Demo() { 4 | return ( 5 |
6 | 7 | I agree to the terms and conditions 8 | 9 | 10 | I agree to the terms and conditions 11 | 12 |
13 | ); 14 | } 15 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/color-area/channels.tsx: -------------------------------------------------------------------------------- 1 | import { ColorArea } from "@/components/dynamic-ui/color-area"; 2 | 3 | export default function Demo() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/color-area/composition.tsx: -------------------------------------------------------------------------------- 1 | import { ColorAreaRoot } from "@/components/dynamic-ui/color-area"; 2 | import { ColorThumb } from "@/components/dynamic-ui/color-thumb"; 3 | 4 | export default function Demo() { 5 | return ( 6 | 7 | 8 | 9 | ); 10 | } 11 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/color-area/default.tsx: -------------------------------------------------------------------------------- 1 | import { ColorArea } from "@/components/dynamic-ui/color-area"; 2 | 3 | export default function Demo() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/color-area/disabled.tsx: -------------------------------------------------------------------------------- 1 | import { ColorArea } from "@/components/dynamic-ui/color-area"; 2 | 3 | export default function Demo() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/color-area/uncontrolled.tsx: -------------------------------------------------------------------------------- 1 | import { ColorArea } from "@/components/dynamic-ui/color-area"; 2 | 3 | export default function Demo() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/color-field/default.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import React from "react"; 4 | import { ColorField } from "@/components/dynamic-ui/color-field"; 5 | 6 | export default function Demo() { 7 | return ; 8 | } 9 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/color-field/description.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import React from "react"; 4 | import { ColorField } from "@/components/dynamic-ui/color-field"; 5 | 6 | export default function Demo() { 7 | return ; 8 | } 9 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/color-field/disabled.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { parseColor } from "react-aria-components"; 4 | import { ColorField } from "@/components/dynamic-ui/color-field"; 5 | 6 | export default function Demo() { 7 | return ; 8 | } 9 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/color-field/error-message.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import React from "react"; 4 | import { ColorField } from "@/components/dynamic-ui/color-field"; 5 | 6 | export default function Demo() { 7 | return ( 8 | 13 | ); 14 | } 15 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/color-field/form.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import React from "react"; 4 | import { ColorField } from "@/components/dynamic-ui/color-field"; 5 | 6 | export default function Demo() { 7 | return ; 8 | } 9 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/color-field/label.tsx: -------------------------------------------------------------------------------- 1 | import { ColorField } from "@/components/dynamic-ui/color-field"; 2 | 3 | export default function Demo() { 4 | return ( 5 |
6 | 7 | 8 |
9 | ); 10 | } 11 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/color-field/prefix-and-suffix.tsx: -------------------------------------------------------------------------------- 1 | import { PaletteIcon } from "lucide-react"; 2 | import { ColorField } from "@/components/dynamic-ui/color-field"; 3 | 4 | export default function Demo() { 5 | return ( 6 |
7 | } /> 8 | } /> 9 |
10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/color-field/read-only.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { ColorField } from "@/components/dynamic-ui/color-field"; 3 | 4 | export default function Demo() { 5 | return ; 6 | } 7 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/color-field/required.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { ColorField } from "@/components/dynamic-ui/color-field"; 3 | 4 | export default function Demo() { 5 | return ; 6 | } 7 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/color-field/sizes.tsx: -------------------------------------------------------------------------------- 1 | import { ColorField } from "@/components/dynamic-ui/color-field"; 2 | 3 | export default function Demo() { 4 | return ( 5 |
6 | 7 | 8 | 9 |
10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/color-field/uncontrolled.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { ColorField } from "@/components/dynamic-ui/color-field"; 3 | 4 | export default function Demo() { 5 | return ; 6 | } 7 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/color-picker/controlled.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import React from "react"; 4 | import { type Color, parseColor } from "react-aria-components"; 5 | import { ColorPicker } from "@/components/dynamic-ui/color-picker"; 6 | 7 | export default function Demo() { 8 | const [value, setValue] = React.useState( 9 | parseColor("hsl(26, 33%, 78%)") 10 | ); 11 | 12 | return ; 13 | } 14 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/color-picker/default.tsx: -------------------------------------------------------------------------------- 1 | import { ColorPicker } from "@/components/dynamic-ui/color-picker"; 2 | 3 | export default function Demo() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/color-picker/options.tsx: -------------------------------------------------------------------------------- 1 | import { ColorPicker } from "@/components/dynamic-ui/color-picker"; 2 | import { ColorSwatch } from "@/components/dynamic-ui/color-swatch"; 3 | 4 | export default function Demo() { 5 | return ( 6 | 7 | 8 | Fill color 9 | 10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/color-picker/uncontrolled.tsx: -------------------------------------------------------------------------------- 1 | import { ColorPicker } from "@/components/dynamic-ui/color-picker"; 2 | 3 | export default function Demo() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/color-slider/channel.tsx: -------------------------------------------------------------------------------- 1 | import { ColorSlider } from "@/components/dynamic-ui/color-slider"; 2 | 3 | export default function Demo() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/color-slider/composition.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | ColorSliderRoot, 3 | ColorSliderControl, 4 | ColorSliderOutput, 5 | } from "@/components/dynamic-ui/color-slider"; 6 | import { Label } from "@/components/dynamic-ui/field"; 7 | 8 | export default function Demo() { 9 | return ( 10 | 11 |
12 | 13 | 14 |
15 | 16 | 17 | ); 18 | } 19 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/color-slider/default.tsx: -------------------------------------------------------------------------------- 1 | import { ColorSlider } from "@/components/dynamic-ui/color-slider"; 2 | 3 | export default function Demo() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/color-slider/disabled.tsx: -------------------------------------------------------------------------------- 1 | import { ColorSlider } from "@/components/dynamic-ui/color-slider"; 2 | 3 | export default function Demo() { 4 | return ( 5 | 11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/color-slider/label.tsx: -------------------------------------------------------------------------------- 1 | import { ColorSlider } from "@/components/dynamic-ui/color-slider"; 2 | 3 | export default function Demo() { 4 | return ( 5 | 6 | ); 7 | } 8 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/color-slider/uncontrolled.tsx: -------------------------------------------------------------------------------- 1 | import { ColorSlider } from "@/components/dynamic-ui/color-slider"; 2 | 3 | export default function Demo() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/color-slider/vertical.tsx: -------------------------------------------------------------------------------- 1 | import { ColorSlider } from "@/components/dynamic-ui/color-slider"; 2 | 3 | export default function Demo() { 4 | return ( 5 | 10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/color-swatch/default.tsx: -------------------------------------------------------------------------------- 1 | import { ColorSwatch } from "@/components/dynamic-ui/color-swatch"; 2 | 3 | export default function Demo() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/combobox/loading.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Combobox, ComboboxItem } from "@/components/dynamic-ui/combobox"; 3 | 4 | export default function Demo() { 5 | return ( 6 | 7 | Red Panda 8 | Cat 9 | Dog 10 | Aardvark 11 | Kangaroo 12 | Snake 13 | 14 | ); 15 | } 16 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/date-field/composition.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import React from "react"; 4 | import { 5 | DateFieldInput, 6 | DateFieldRoot, 7 | } from "@/components/dynamic-ui/date-field"; 8 | import { Description, Label } from "@/components/dynamic-ui/field"; 9 | 10 | export default function Demo() { 11 | return ( 12 | 13 | 14 | 15 | Please select a time between 9 AM and 5 PM. 16 | 17 | ); 18 | } 19 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/date-field/default.tsx: -------------------------------------------------------------------------------- 1 | import { DateField } from "@/components/dynamic-ui/date-field"; 2 | 3 | export default function Demo() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/date-field/description.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import React from "react"; 4 | import { DateField } from "@/components/dynamic-ui/date-field"; 5 | 6 | export default function Demo() { 7 | return ( 8 | 9 | ); 10 | } 11 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/date-field/disabled.tsx: -------------------------------------------------------------------------------- 1 | import { DateField } from "@/components/dynamic-ui/date-field"; 2 | 3 | export default function Demo() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/date-field/error-message.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import React from "react"; 4 | import { DateField } from "@/components/dynamic-ui/date-field"; 5 | 6 | export default function Demo() { 7 | return ( 8 | 13 | ); 14 | } 15 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/date-field/hide-time-zone.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { parseZonedDateTime } from "@internationalized/date"; 4 | import { DateField } from "@/components/dynamic-ui/date-field"; 5 | 6 | export default function Demo() { 7 | return ( 8 | 15 | ); 16 | } 17 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/date-field/hour-cycle.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { DateField } from "@/components/dynamic-ui/date-field"; 4 | 5 | export default function Demo() { 6 | return ( 7 | 13 | ); 14 | } 15 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/date-field/label.tsx: -------------------------------------------------------------------------------- 1 | import { DateField } from "@/components/dynamic-ui/date-field"; 2 | 3 | export default function Demo() { 4 | return ( 5 |
6 | 7 | 8 |
9 | ); 10 | } 11 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/date-field/placeholder.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { CalendarDate } from "@internationalized/date"; 4 | import { DateField } from "@/components/dynamic-ui/date-field"; 5 | 6 | export default function Demo() { 7 | return ( 8 | 12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/date-field/prefix-and-suffix.tsx: -------------------------------------------------------------------------------- 1 | import { CalendarIcon } from "lucide-react"; 2 | import { DateField } from "@/components/dynamic-ui/date-field"; 3 | 4 | export default function Demo() { 5 | return ( 6 |
7 | } /> 8 | } /> 9 |
10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/date-field/read-only.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import React from "react"; 4 | import { CalendarDate } from "@internationalized/date"; 5 | import { DateField } from "@/components/dynamic-ui/date-field"; 6 | 7 | export default function Demo() { 8 | return ( 9 | 14 | ); 15 | } 16 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/date-field/required.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import React from "react"; 4 | import { DateField } from "@/components/dynamic-ui/date-field"; 5 | 6 | export default function Demo() { 7 | return ; 8 | } 9 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/date-field/sizes.tsx: -------------------------------------------------------------------------------- 1 | import { DateField } from "@/components/dynamic-ui/date-field"; 2 | 3 | export default function Demo() { 4 | return ( 5 |
6 | 7 | 8 | 9 |
10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/date-field/time-zones.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { parseAbsoluteToLocal } from "@internationalized/date"; 4 | import { DateField } from "@/components/dynamic-ui/date-field"; 5 | 6 | export default function Demo() { 7 | return ( 8 | 13 | ); 14 | } 15 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/date-field/uncontrolled.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import React from "react"; 4 | import { parseDate } from "@internationalized/date"; 5 | import { DateField } from "@/components/dynamic-ui/date-field"; 6 | 7 | export default function Demo() { 8 | return ( 9 | 10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/date-picker/default.tsx: -------------------------------------------------------------------------------- 1 | import { DatePicker } from "@/components/dynamic-ui/date-picker"; 2 | 3 | export default function Demo() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/date-picker/description.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import React from "react"; 4 | import { DatePicker } from "@/components/dynamic-ui/date-picker"; 5 | 6 | export default function Demo() { 7 | return ; 8 | } 9 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/date-picker/disabled.tsx: -------------------------------------------------------------------------------- 1 | import { DatePicker } from "@/components/dynamic-ui/date-picker"; 2 | 3 | export default function Demo() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/date-picker/error-message.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import React from "react"; 4 | import { DatePicker } from "@/components/dynamic-ui/date-picker"; 5 | 6 | export default function Demo() { 7 | return ( 8 | 13 | ); 14 | } 15 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/date-picker/hide-time-zone.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { parseZonedDateTime } from "@internationalized/date"; 4 | import { DatePicker } from "@/components/dynamic-ui/date-picker"; 5 | 6 | export default function Demo() { 7 | return ( 8 | 14 | ); 15 | } 16 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/date-picker/hour-cycle.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { DatePicker } from "@/components/dynamic-ui/date-picker"; 4 | 5 | export default function Demo() { 6 | return ( 7 | 12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/date-picker/label.tsx: -------------------------------------------------------------------------------- 1 | import { DatePicker } from "@/components/dynamic-ui/date-picker"; 2 | 3 | export default function Demo() { 4 | return ( 5 |
6 | 7 | 8 |
9 | ); 10 | } 11 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/date-picker/placeholder.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { CalendarDate } from "@internationalized/date"; 4 | import { DatePicker } from "@/components/dynamic-ui/date-picker"; 5 | 6 | export default function Demo() { 7 | return ( 8 | 12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/date-picker/prefix.tsx: -------------------------------------------------------------------------------- 1 | import { UsersIcon } from "lucide-react"; 2 | import { DatePicker } from "@/components/dynamic-ui/date-picker"; 3 | 4 | export default function Demo() { 5 | return } />; 6 | } 7 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/date-picker/read-only.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import React from "react"; 4 | import { CalendarDate } from "@internationalized/date"; 5 | import { DatePicker } from "@/components/dynamic-ui/date-picker"; 6 | 7 | export default function Demo() { 8 | return ( 9 | 14 | ); 15 | } 16 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/date-picker/required.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { DatePicker } from "@/components/dynamic-ui/date-picker"; 3 | 4 | export default function Demo() { 5 | return ; 6 | } 7 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/date-picker/sizes.tsx: -------------------------------------------------------------------------------- 1 | import { DatePicker } from "@/components/dynamic-ui/date-picker"; 2 | 3 | export default function Demo() { 4 | return ( 5 |
6 | 7 | 8 | 9 |
10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/date-picker/time-zones.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { parseAbsoluteToLocal } from "@internationalized/date"; 4 | import { DatePicker } from "@/components/dynamic-ui/date-picker"; 5 | 6 | export default function Demo() { 7 | return ( 8 | 9 | ); 10 | } 11 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/date-picker/uncontrolled.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import React from "react"; 4 | import { parseDate } from "@internationalized/date"; 5 | import { DatePicker } from "@/components/dynamic-ui/date-picker"; 6 | 7 | export default function Demo() { 8 | return ( 9 | 13 | ); 14 | } 15 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/date-range-picker/default.tsx: -------------------------------------------------------------------------------- 1 | import { DateRangePicker } from "@/components/dynamic-ui/date-range-picker"; 2 | 3 | export default function Demo() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/date-range-picker/description.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import React from "react"; 4 | import { DateRangePicker } from "@/components/dynamic-ui/date-range-picker"; 5 | 6 | export default function Demo() { 7 | return ( 8 | 9 | ); 10 | } 11 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/date-range-picker/disabled.tsx: -------------------------------------------------------------------------------- 1 | import { DateRangePicker } from "@/components/dynamic-ui/date-range-picker"; 2 | 3 | export default function Demo() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/date-range-picker/error-message.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import React from "react"; 4 | import { DateRangePicker } from "@/components/dynamic-ui/date-range-picker"; 5 | 6 | export default function Demo() { 7 | return ( 8 | 13 | ); 14 | } 15 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/date-range-picker/hide-time-zone.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { parseAbsoluteToLocal } from "@internationalized/date"; 4 | import { DateRangePicker } from "@/components/dynamic-ui/date-range-picker"; 5 | 6 | export default function Demo() { 7 | return ( 8 | 17 | ); 18 | } 19 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/date-range-picker/hour-cycle.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { DateRangePicker } from "@/components/dynamic-ui/date-range-picker"; 4 | 5 | export default function Demo() { 6 | return ( 7 | 12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/date-range-picker/label.tsx: -------------------------------------------------------------------------------- 1 | import { DateRangePicker } from "@/components/dynamic-ui/date-range-picker"; 2 | 3 | export default function Demo() { 4 | return ( 5 |
6 | 7 | 8 |
9 | ); 10 | } 11 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/date-range-picker/loading.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import React from "react"; 4 | import { DateRangePicker } from "@/components/dynamic-ui/date-range-picker"; 5 | 6 | export default function Demo() { 7 | return ; 8 | } 9 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/date-range-picker/placeholder.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { CalendarDate } from "@internationalized/date"; 4 | import { DateRangePicker } from "@/components/dynamic-ui/date-range-picker"; 5 | 6 | export default function Demo() { 7 | return ( 8 | 12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/date-range-picker/prefix.tsx: -------------------------------------------------------------------------------- 1 | import { PlaneIcon } from "lucide-react"; 2 | import { DateRangePicker } from "@/components/dynamic-ui/date-range-picker"; 3 | 4 | export default function Demo() { 5 | return } />; 6 | } 7 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/date-range-picker/read-only.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import React from "react"; 4 | import { parseAbsoluteToLocal } from "@internationalized/date"; 5 | import { DateRangePicker } from "@/components/dynamic-ui/date-range-picker"; 6 | 7 | export default function Demo() { 8 | return ( 9 | 17 | ); 18 | } 19 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/date-range-picker/required.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { DateRangePicker } from "@/components/dynamic-ui/date-range-picker"; 3 | 4 | export default function Demo() { 5 | return ; 6 | } 7 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/date-range-picker/sizes.tsx: -------------------------------------------------------------------------------- 1 | import { DateRangePicker } from "@/components/dynamic-ui/date-range-picker"; 2 | 3 | export default function Demo() { 4 | return ( 5 |
6 | 7 | 8 | 9 |
10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/date-range-picker/time-zones.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { parseAbsoluteToLocal } from "@internationalized/date"; 4 | import { DateRangePicker } from "@/components/dynamic-ui/date-range-picker"; 5 | 6 | export default function Demo() { 7 | return ( 8 | 14 | ); 15 | } 16 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/date-range-picker/uncontrolled.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import React from "react"; 4 | import { parseDate } from "@internationalized/date"; 5 | import { DateRangePicker } from "@/components/dynamic-ui/date-range-picker"; 6 | 7 | export default function Demo() { 8 | return ( 9 | 16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/drawer/basic.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Button } from "@/components/dynamic-ui/button"; 3 | import { DialogRoot, DialogContent } from "@/components/dynamic-ui/dialog"; 4 | import { Drawer } from "@/components/dynamic-ui/drawer"; 5 | 6 | export default function Demo() { 7 | return ( 8 | 9 | 10 | 11 | Drawer content 12 | 13 | 14 | ); 15 | } 16 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/drop-zone/basic.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { UploadIcon } from "lucide-react"; 3 | import { DropZone } from "@/components/dynamic-ui/drop-zone"; 4 | 5 | export default function Demo() { 6 | return ( 7 | 8 | 9 | 10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/drop-zone/disabled.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { UploadIcon } from "lucide-react"; 3 | import { DropZone, DropZoneLabel } from "@/components/dynamic-ui/drop-zone"; 4 | 5 | export default function Demo() { 6 | return ( 7 | 8 | 9 | Drag and drop files here 10 | 11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/drop-zone/visual-feedback.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import React from "react"; 4 | import { DropZone } from "@/components/dynamic-ui/drop-zone"; 5 | 6 | export default function Demo() { 7 | const [dropped, setDropped] = React.useState(false); 8 | return ( 9 | (types.has("image/png") ? "copy" : "cancel")} 11 | onDrop={() => setDropped(true)} 12 | > 13 | {dropped ? "Successful drop!" : "Drop files here"} 14 | 15 | ); 16 | } 17 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/file-trigger/file-types.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { UploadIcon } from "lucide-react"; 3 | import { Button } from "@/components/dynamic-ui/button"; 4 | import { FileTrigger } from "@/components/dynamic-ui/file-trigger"; 5 | 6 | export default function FileTriggerDemo() { 7 | return ( 8 | 9 | 10 | 11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/file-trigger/media-capture.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { CameraIcon } from "lucide-react"; 3 | import { Button } from "@/components/dynamic-ui/button"; 4 | import { FileTrigger } from "@/components/dynamic-ui/file-trigger"; 5 | 6 | export default function FileTriggerDemo() { 7 | return ( 8 | 9 | 10 | 11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/list-box/basic.tsx: -------------------------------------------------------------------------------- 1 | import { ListBox, ListBoxItem } from "@/components/dynamic-ui/list-box"; 2 | 3 | export default function Demo() { 4 | return ( 5 | 6 | Next.js 7 | Remix 8 | Astro 9 | Gatsby 10 | 11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/list-box/contact-list.tsx: -------------------------------------------------------------------------------- 1 | export default function Demo() { 2 | return

demo

; 3 | } 4 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/list-box/disabled-items.tsx: -------------------------------------------------------------------------------- 1 | import { ListBox, ListBoxItem } from "@/components/dynamic-ui/list-box"; 2 | 3 | export default function Demo() { 4 | return ( 5 | 6 | Next.js 7 | Remix 8 | Gatsby 9 | Astro 10 | 11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/list-box/empty-state.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { ListBox } from "@/components/dynamic-ui/list-box"; 4 | 5 | export default function Demo() { 6 | return ( 7 | "No results found."} 10 | > 11 | {[]} 12 | 13 | ); 14 | } 15 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/list-box/grid.tsx: -------------------------------------------------------------------------------- 1 | import { ListBox, ListBoxItem } from "@/components/dynamic-ui/list-box"; 2 | 3 | export default function Demo() { 4 | return ( 5 | 6 | Next.js 7 | Remix 8 | Astro 9 | Gatsby 10 | 11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/list-box/image-grid.tsx: -------------------------------------------------------------------------------- 1 | export default function Demo() { 2 | return

demo

; 3 | } 4 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/list-box/item-variant.tsx: -------------------------------------------------------------------------------- 1 | import { ListBox, ListBoxItem } from "@/components/dynamic-ui/list-box"; 2 | 3 | export default function Demo() { 4 | return ( 5 | 6 | View logs 7 | Manage domains 8 | Transfer project 9 | Delete project 10 | 11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/list-box/loading.tsx: -------------------------------------------------------------------------------- 1 | import { ListBox, ListBoxItem } from "@/components/dynamic-ui/list-box"; 2 | 3 | export default function Demo() { 4 | return ( 5 | 6 | User 1 7 | User 2 8 | User 3 9 | 10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/list-box/selection-behavior.tsx: -------------------------------------------------------------------------------- 1 | import { ListBox, ListBoxItem } from "@/components/dynamic-ui/list-box"; 2 | 3 | export default function Demo() { 4 | return ( 5 | 10 | Next.js 11 | Remix 12 | Astro 13 | Gatsby 14 | 15 | ); 16 | } 17 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/list-box/uncontrolled.tsx: -------------------------------------------------------------------------------- 1 | import { ListBox, ListBoxItem } from "@/components/dynamic-ui/list-box"; 2 | 3 | export default function Demo() { 4 | return ( 5 | 10 | Next.js 11 | Remix 12 | Astro 13 | Gatsby 14 | 15 | ); 16 | } 17 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/modal/basic.tsx: -------------------------------------------------------------------------------- 1 | import { Button } from "@/components/dynamic-ui/button"; 2 | import { DialogContent, DialogRoot } from "@/components/dynamic-ui/dialog"; 3 | import { Modal } from "@/components/dynamic-ui/modal"; 4 | 5 | export default function Demo() { 6 | return ( 7 | 8 | 9 | 10 | modal content 11 | 12 | 13 | ); 14 | } 15 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/number-field/default.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { NumberField } from "@/components/dynamic-ui/number-field"; 3 | 4 | export default function Demo() { 5 | return ; 6 | } 7 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/number-field/description.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { NumberField } from "@/components/dynamic-ui/number-field"; 3 | 4 | export default function Demo() { 5 | return ; 6 | } 7 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/number-field/disabled.tsx: -------------------------------------------------------------------------------- 1 | import { NumberField } from "@/components/dynamic-ui/number-field"; 2 | 3 | export default function Demo() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/number-field/error-message.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { NumberField } from "@/components/dynamic-ui/number-field"; 3 | 4 | export default function Demo() { 5 | return ( 6 | 11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/number-field/label.tsx: -------------------------------------------------------------------------------- 1 | import { NumberField } from "@/components/dynamic-ui/number-field"; 2 | 3 | export default function Demo() { 4 | return ( 5 |
6 | 7 | 8 |
9 | ); 10 | } 11 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/number-field/read-only.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { NumberField } from "@/components/dynamic-ui/number-field"; 3 | 4 | export default function Demo() { 5 | return ; 6 | } 7 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/number-field/required.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { NumberField } from "@/components/dynamic-ui/number-field"; 3 | 4 | export default function Demo() { 5 | return ; 6 | } 7 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/number-field/sizes.tsx: -------------------------------------------------------------------------------- 1 | import { NumberField } from "@/components/dynamic-ui/number-field"; 2 | 3 | export default function Demo() { 4 | return ( 5 |
6 | 7 | 8 | 9 |
10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/number-field/uncontrolled.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { NumberField } from "@/components/dynamic-ui/number-field"; 3 | 4 | export default function Demo() { 5 | return ; 6 | } 7 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/overlay/basic.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Button } from "@/components/dynamic-ui/button"; 3 | import { DialogContent, DialogRoot } from "@/components/dynamic-ui/dialog"; 4 | import { Overlay } from "@/components/dynamic-ui/overlay"; 5 | 6 | export default function Demo() { 7 | return ( 8 | 9 | 10 | 11 | some content 12 | 13 | 14 | ); 15 | } 16 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/progress-bar/composition.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import * as React from "react"; 4 | import { Label } from "react-aria-components"; 5 | import { 6 | ProgressBarIndicator, 7 | ProgressBarRoot, 8 | ProgressBarValueLabel, 9 | } from "@/components/dynamic-ui/progress-bar"; 10 | 11 | export default function Demo() { 12 | return ( 13 | 14 | 15 | 16 | 17 | 18 | ); 19 | } 20 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/progress-bar/custom-value-label.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import * as React from "react"; 4 | import { ProgressBar } from "@/components/dynamic-ui/progress-bar"; 5 | 6 | export default function Demo() { 7 | return ( 8 | 14 | ); 15 | } 16 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/progress-bar/default.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import * as React from "react"; 4 | import { ProgressBar } from "@/components/dynamic-ui/progress-bar"; 5 | 6 | export default function Demo() { 7 | const [progress, setProgress] = React.useState(13); 8 | 9 | React.useEffect(() => { 10 | const timer = setTimeout(() => setProgress(66), 500); 11 | return () => clearTimeout(timer); 12 | }, []); 13 | 14 | return ; 15 | } 16 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/progress-bar/format-options.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import * as React from "react"; 4 | import { ProgressBar } from "@/components/dynamic-ui/progress-bar"; 5 | 6 | export default function Demo() { 7 | return ( 8 | 14 | ); 15 | } 16 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/progress-bar/indeterminate.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import * as React from "react"; 4 | import { ProgressBar } from "@/components/dynamic-ui/progress-bar"; 5 | 6 | export default function Demo() { 7 | return ; 8 | } 9 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/progress-bar/label.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import * as React from "react"; 4 | import { ProgressBar } from "@/components/dynamic-ui/progress-bar"; 5 | 6 | export default function Demo() { 7 | return ( 8 |
9 | 10 | 11 |
12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/progress-bar/min-max-values.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import * as React from "react"; 4 | import { ProgressBar } from "@/components/dynamic-ui/progress-bar"; 5 | 6 | export default function Demo() { 7 | return ( 8 | 14 | ); 15 | } 16 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/progress-bar/shape.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import * as React from "react"; 4 | import { ProgressBar } from "@/components/dynamic-ui/progress-bar"; 5 | 6 | export default function Demo() { 7 | return ; 8 | } 9 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/progress-bar/sizes.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import * as React from "react"; 4 | import { ProgressBar } from "@/components/dynamic-ui/progress-bar"; 5 | 6 | const sizes = ["sm", "md", "lg"] as const; 7 | 8 | export default function Demo() { 9 | return ( 10 |
11 | {sizes.map((size) => ( 12 | 19 | ))} 20 |
21 | ); 22 | } 23 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/progress-bar/value-label.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import * as React from "react"; 4 | import { ProgressBar } from "@/components/dynamic-ui/progress-bar"; 5 | 6 | export default function Demo() { 7 | return ; 8 | } 9 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/progress-bar/variants.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { ProgressBar } from "@/components/dynamic-ui/progress-bar"; 3 | 4 | const variants = ["primary", "success", "accent", "danger", "warning"] as const; 5 | 6 | export default function Demo() { 7 | return ( 8 |
9 | {variants.map((variant) => ( 10 | 16 | ))} 17 |
18 | ); 19 | } 20 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/radio-group/default.tsx: -------------------------------------------------------------------------------- 1 | import { RadioGroup, Radio } from "@/components/dynamic-ui/radio-group"; 2 | 3 | export default function Demo() { 4 | return ( 5 | 6 | Small 7 | Medium 8 | Large 9 | 10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/radio-group/description.tsx: -------------------------------------------------------------------------------- 1 | import { RadioGroup, Radio } from "@/components/dynamic-ui/radio-group"; 2 | 3 | export default function Demo() { 4 | return ( 5 | 10 | Small 11 | Medium 12 | Large 13 | 14 | ); 15 | } 16 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/radio-group/error-message.tsx: -------------------------------------------------------------------------------- 1 | import { RadioGroup, Radio } from "@/components/dynamic-ui/radio-group"; 2 | 3 | export default function Demo() { 4 | return ( 5 | 11 | Small 12 | Medium 13 | Large 14 | 15 | ); 16 | } 17 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/radio-group/orientation.tsx: -------------------------------------------------------------------------------- 1 | import { RadioGroup, Radio } from "@/components/dynamic-ui/radio-group"; 2 | 3 | export default function Demo() { 4 | return ( 5 | 6 | Small 7 | Medium 8 | Large 9 | 10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/radio-group/read-only.tsx: -------------------------------------------------------------------------------- 1 | import { RadioGroup, Radio } from "@/components/dynamic-ui/radio-group"; 2 | 3 | export default function Demo() { 4 | return ( 5 | 6 | Small 7 | Medium 8 | Large 9 | 10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/radio-group/required.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { RadioGroup, Radio } from "@/components/dynamic-ui/radio-group"; 3 | 4 | export default function Demo() { 5 | return ( 6 | 7 | Small 8 | Large 9 | 10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/radio-group/uncontrolled.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { RadioGroup, Radio } from "@/components/dynamic-ui/radio-group"; 3 | 4 | export default function Demo() { 5 | return ( 6 | 7 | Small 8 | Medium 9 | Large 10 | 11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/range-calendar/default.tsx: -------------------------------------------------------------------------------- 1 | import { RangeCalendar } from "@/components/dynamic-ui/calendar"; 2 | 3 | export default function Demo() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/range-calendar/disabled.tsx: -------------------------------------------------------------------------------- 1 | import { RangeCalendar } from "@/components/dynamic-ui/calendar"; 2 | 3 | export default function Demo() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/range-calendar/page-behaviour.tsx: -------------------------------------------------------------------------------- 1 | import { RangeCalendar } from "@/components/dynamic-ui/calendar"; 2 | 3 | export default function Demo() { 4 | return ( 5 | 10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/range-calendar/read-only.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { parseDate } from "@internationalized/date"; 4 | import { RangeCalendar } from "@/components/dynamic-ui/calendar"; 5 | 6 | export default function Demo() { 7 | return ( 8 | 16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/range-calendar/uncontrolled.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import React from "react"; 4 | import { parseDate } from "@internationalized/date"; 5 | import { RangeCalendar } from "@/components/dynamic-ui/calendar"; 6 | 7 | export default function Demo() { 8 | return ( 9 | 16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/range-calendar/validation.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { getLocalTimeZone, today } from "@internationalized/date"; 4 | import { RangeCalendar } from "@/components/dynamic-ui/calendar"; 5 | 6 | export default function Demo() { 7 | return ( 8 | 12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/range-calendar/variant.tsx: -------------------------------------------------------------------------------- 1 | import { RangeCalendar } from "@/components/dynamic-ui/calendar"; 2 | 3 | export default function Demo() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/range-calendar/visible-months.tsx: -------------------------------------------------------------------------------- 1 | import { RangeCalendar } from "@/components/dynamic-ui/calendar"; 2 | 3 | export default function Demo() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/search-field/default.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { SearchField } from "@/components/dynamic-ui/search-field"; 3 | 4 | export default function Demo() { 5 | return ; 6 | } 7 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/search-field/description.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { SearchField } from "@/components/dynamic-ui/search-field"; 3 | 4 | export default function Demo() { 5 | return ; 6 | } 7 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/search-field/disabled.tsx: -------------------------------------------------------------------------------- 1 | import { SearchField } from "@/components/dynamic-ui/search-field"; 2 | 3 | export default function Demo() { 4 | return ( 5 | 6 | ); 7 | } 8 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/search-field/error-message.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { SearchField } from "@/components/dynamic-ui/search-field"; 3 | 4 | export default function Demo() { 5 | return ( 6 | 11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/search-field/form.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { SearchField } from "@/components/dynamic-ui/search-field"; 3 | 4 | export default function Demo() { 5 | return ; 6 | } 7 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/search-field/label.tsx: -------------------------------------------------------------------------------- 1 | import { SearchField } from "@/components/dynamic-ui/search-field"; 2 | 3 | export default function Demo() { 4 | return ( 5 |
6 | 7 | 8 |
9 | ); 10 | } 11 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/search-field/read-only.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { SearchField } from "@/components/dynamic-ui/search-field"; 3 | 4 | export default function Demo() { 5 | return ; 6 | } 7 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/search-field/required.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { SearchField } from "@/components/dynamic-ui/search-field"; 3 | 4 | export default function Demo() { 5 | return ; 6 | } 7 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/search-field/sizes.tsx: -------------------------------------------------------------------------------- 1 | import { SearchField } from "@/components/dynamic-ui/search-field"; 2 | 3 | export default function Demo() { 4 | return ( 5 |
6 | 7 | 8 | 9 |
10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/search-field/uncontrolled.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { SearchField } from "@/components/dynamic-ui/search-field"; 3 | 4 | export default function Demo() { 5 | return ; 6 | } 7 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/select/basic.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Select, SelectItem } from "@/components/dynamic-ui/select"; 3 | 4 | export default function Demo() { 5 | return ( 6 | 12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/select/description.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Select, SelectItem } from "@/components/dynamic-ui/select"; 3 | 4 | export default function Demo() { 5 | return ( 6 | 12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/select/disabled.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Select, SelectItem } from "@/components/dynamic-ui/select"; 3 | 4 | export default function Demo() { 5 | return ( 6 | 12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/select/label.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Select, SelectItem } from "@/components/dynamic-ui/select"; 3 | 4 | export default function Demo() { 5 | return ( 6 | 12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/select/links.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Select, SelectItem } from "@/components/dynamic-ui/select"; 3 | 4 | export default function Demo() { 5 | return ( 6 | 14 | ); 15 | } 16 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/select/loading.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Select, SelectItem } from "@/components/dynamic-ui/select"; 3 | 4 | export default function Demo() { 5 | return ( 6 | 12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/select/placeholder.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Select, SelectItem } from "@/components/dynamic-ui/select"; 3 | 4 | export default function Demo() { 5 | return ( 6 | 12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/select/required.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Select, SelectItem } from "@/components/dynamic-ui/select"; 3 | 4 | export default function Demo() { 5 | return ( 6 | 12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/select/uncontrolled.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Select, SelectItem } from "@/components/dynamic-ui/select"; 3 | 4 | export default function Demo() { 5 | return ( 6 | 12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/select/validation.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Select, SelectItem } from "@/components/dynamic-ui/select"; 3 | 4 | export default function Demo() { 5 | return ( 6 | 16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/skeleton/card.tsx: -------------------------------------------------------------------------------- 1 | import { Skeleton } from "@/components/dynamic-ui/skeleton"; 2 | 3 | export default function Demo() { 4 | return ( 5 |
6 | 7 |
8 | 9 |
10 | 11 | 12 |
13 |
14 |
15 | ); 16 | } 17 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/skeleton/children.tsx: -------------------------------------------------------------------------------- 1 | import { Button } from "@/components/dynamic-ui/button"; 2 | import { Skeleton } from "@/components/dynamic-ui/skeleton"; 3 | 4 | export default function Demo() { 5 | return ( 6 | 7 | 8 | 9 | ); 10 | } 11 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/skeleton/fixed-size-children.tsx: -------------------------------------------------------------------------------- 1 | import { Button } from "@/components/dynamic-ui/button"; 2 | import { Skeleton } from "@/components/dynamic-ui/skeleton"; 3 | 4 | export default function Demo() { 5 | return ( 6 | 7 | 8 | 9 | ); 10 | } 11 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/skeleton/show.tsx: -------------------------------------------------------------------------------- 1 | import { Button } from "@/components/dynamic-ui/button"; 2 | import { Skeleton } from "@/components/dynamic-ui/skeleton"; 3 | 4 | export default function Demo() { 5 | return ( 6 |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | ); 15 | } 16 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/slider/default.tsx: -------------------------------------------------------------------------------- 1 | import { Slider } from "@/components/dynamic-ui/slider"; 2 | 3 | export default function Demo() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/slider/description.tsx: -------------------------------------------------------------------------------- 1 | import { Slider } from "@/components/dynamic-ui/slider"; 2 | 3 | export default function Demo() { 4 | return ( 5 | 10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/slider/disabled.tsx: -------------------------------------------------------------------------------- 1 | import { Slider } from "@/components/dynamic-ui/slider"; 2 | 3 | export default function Demo() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/slider/format-options.tsx: -------------------------------------------------------------------------------- 1 | import { Slider } from "@/components/dynamic-ui/slider"; 2 | 3 | export default function Demo() { 4 | return ( 5 | 11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/slider/label.tsx: -------------------------------------------------------------------------------- 1 | import { Slider } from "@/components/dynamic-ui/slider"; 2 | 3 | export default function Demo() { 4 | return ( 5 |
6 | 7 | 8 |
9 | ); 10 | } 11 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/slider/range.tsx: -------------------------------------------------------------------------------- 1 | import { Slider } from "@/components/dynamic-ui/slider"; 2 | 3 | export default function Demo() { 4 | return ( 5 | 12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/slider/sizes.tsx: -------------------------------------------------------------------------------- 1 | import { Slider } from "@/components/dynamic-ui/slider"; 2 | 3 | export default function Demo() { 4 | return ( 5 |
6 | 7 | 8 | 9 |
10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/slider/step.tsx: -------------------------------------------------------------------------------- 1 | import { Slider } from "@/components/dynamic-ui/slider"; 2 | 3 | export default function Demo() { 4 | return ( 5 | 12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/slider/uncontrolled.tsx: -------------------------------------------------------------------------------- 1 | import { Slider } from "@/components/dynamic-ui/slider"; 2 | 3 | export default function Demo() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/slider/value-scale.tsx: -------------------------------------------------------------------------------- 1 | import { Slider } from "@/components/dynamic-ui/slider"; 2 | 3 | export default function Demo() { 4 | return ( 5 | 6 | ); 7 | } 8 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/slider/vertical.tsx: -------------------------------------------------------------------------------- 1 | import { Slider } from "@/components/dynamic-ui/slider"; 2 | 3 | export default function Demo() { 4 | return ( 5 | 11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/switch/card.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Switch } from "@/components/dynamic-ui/switch"; 3 | 4 | export default function Demo() { 5 | return Focus mode; 6 | } 7 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/switch/composition.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { 3 | SwitchIndicator, 4 | SwitchRoot, 5 | SwitchThumb, 6 | } from "@/components/dynamic-ui/switch"; 7 | 8 | export default function Demo() { 9 | return ( 10 | 11 | 12 | 13 | 14 | Focus mode 15 | 16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/switch/default.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Switch } from "@/components/dynamic-ui/switch"; 3 | 4 | export default function Demo() { 5 | return Focus mode; 6 | } 7 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/switch/disabled.tsx: -------------------------------------------------------------------------------- 1 | import { Switch } from "@/components/dynamic-ui/switch"; 2 | 3 | export default function Demo() { 4 | return ( 5 |
6 | 7 | Focus Mode 8 | 9 | Focus Mode 10 |
11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/switch/label.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Switch } from "@/components/dynamic-ui/switch"; 3 | 4 | export default function Demo() { 5 | return ( 6 |
7 | Focus mode 8 | 9 |
10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/switch/sizes.tsx: -------------------------------------------------------------------------------- 1 | import { Switch } from "@/components/dynamic-ui/switch"; 2 | 3 | export default function Demo() { 4 | return ( 5 |
6 | 7 | 8 | 9 |
10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/switch/uncontrolled.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Switch } from "@/components/dynamic-ui/switch"; 3 | 4 | export default function Demo() { 5 | return Airplane Mode; 6 | } 7 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/tabs/basic.tsx: -------------------------------------------------------------------------------- 1 | import { Tabs, TabList, TabPanel, Tab } from "@/components/dynamic-ui/tabs"; 2 | 3 | export default function Demo() { 4 | return ( 5 | 6 | 7 | Overview 8 | Usage 9 | Settings 10 | 11 | Overview content 12 | Usage content 13 | Settings content 14 | 15 | ); 16 | } 17 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/tabs/variant.tsx: -------------------------------------------------------------------------------- 1 | import { Tabs, TabList, TabPanel, Tab } from "@/components/dynamic-ui/tabs"; 2 | 3 | export default function Demo() { 4 | return ( 5 | 6 | 7 | Overview 8 | Usage 9 | Settings 10 | 11 | Overview content 12 | Usage content 13 | Settings content 14 | 15 | ); 16 | } 17 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/tag-group/default.tsx: -------------------------------------------------------------------------------- 1 | export default function Demo() { 2 | return
demo
; 3 | } 4 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/text-area/composition.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Description, Label } from "@/components/dynamic-ui/field"; 3 | import { TextAreaInput, InputRoot } from "@/components/dynamic-ui/input"; 4 | import { TextAreaRoot } from "@/components/dynamic-ui/text-area"; 5 | 6 | export default function Demo() { 7 | return ( 8 | 9 | 10 | 11 | 12 | 13 | Enter your comment. 14 | 15 | ); 16 | } 17 | -------------------------------------------------------------------------------- /www/src/modules/docs/demos/text-area/default.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import React from "react"; 4 | import { TextArea } from "@/components/dynamic-ui/text-area"; 5 | 6 | export default function Demo() { 7 | return