├── .editorconfig ├── .eslintrc.js ├── .eslintrs.js ├── .github ├── ISSUE_TEMPLATE.md ├── PULL_REQUEST_TEMPLATE.md └── workflows │ ├── release-rc.yaml │ ├── release.yaml │ └── tests.yml ├── .gitignore ├── .npmignore ├── .npmrc ├── .prettierignore ├── .vscode ├── launch.json ├── settings.json └── tasks.json ├── .zed └── settings.json ├── CONTRIBUTING.md ├── DEVELOPMENT.md ├── README.md ├── agents.md ├── apps └── www │ ├── .eslintrc.json │ ├── .gitignore │ ├── README.md │ ├── next.config.mjs │ ├── package.json │ ├── public │ └── assets │ │ ├── logo.png │ │ └── logo.svg │ ├── source.config.ts │ ├── src │ ├── app │ │ ├── (home) │ │ │ ├── page.module.css │ │ │ └── page.tsx │ │ ├── (llms) │ │ │ ├── llms-full.txt │ │ │ │ └── route.ts │ │ │ ├── llms.mdx │ │ │ │ └── [[...slug]] │ │ │ │ │ └── route.ts │ │ │ └── llms.txt │ │ │ │ └── route.ts │ │ ├── api │ │ │ └── search │ │ │ │ └── route.ts │ │ ├── docs │ │ │ ├── [[...slug]] │ │ │ │ ├── page.module.css │ │ │ │ └── page.tsx │ │ │ └── layout.tsx │ │ ├── examples │ │ │ └── page.tsx │ │ ├── icons │ │ │ ├── layout.tsx │ │ │ ├── page.module.css │ │ │ └── page.tsx │ │ ├── layout.tsx │ │ └── playground │ │ │ ├── layout.module.css │ │ │ ├── layout.tsx │ │ │ ├── page.module.css │ │ │ └── page.tsx │ ├── components │ │ ├── ai │ │ │ └── page-actions.tsx │ │ ├── datatable-demo.tsx │ │ ├── demo │ │ │ ├── demo-controls.tsx │ │ │ ├── demo-playground.tsx │ │ │ ├── demo-preview.tsx │ │ │ ├── demo.tsx │ │ │ ├── index.ts │ │ │ ├── styles.module.css │ │ │ └── types.ts │ │ ├── docs │ │ │ ├── docs-body.module.css │ │ │ ├── docs-body.tsx │ │ │ ├── index.ts │ │ │ ├── sidebar-item.module.css │ │ │ └── sidebar-item.tsx │ │ ├── editor │ │ │ ├── editor.module.css │ │ │ ├── editor.tsx │ │ │ └── index.ts │ │ ├── icon-details │ │ │ ├── icon-details.module.css │ │ │ ├── icon-details.tsx │ │ │ ├── icon-empty.tsx │ │ │ └── index.ts │ │ ├── linear-dropdown-demo.tsx │ │ ├── logo │ │ │ ├── index.ts │ │ │ ├── logo.module.css │ │ │ └── logo.tsx │ │ ├── navbar │ │ │ ├── index.ts │ │ │ ├── navbar.module.css │ │ │ └── navbar.tsx │ │ ├── playground │ │ │ ├── amount-examples.tsx │ │ │ ├── announcement-bar-examples.tsx │ │ │ ├── avatar-examples.tsx │ │ │ ├── badge-examples.tsx │ │ │ ├── breadcrumb-examples.tsx │ │ │ ├── button-examples.tsx │ │ │ ├── calendar-examples.tsx │ │ │ ├── callout-examples.tsx │ │ │ ├── checkbox-examples.tsx │ │ │ ├── chip-examples.tsx │ │ │ ├── code-block-examples.tsx │ │ │ ├── command-examples.tsx │ │ │ ├── container-examples.tsx │ │ │ ├── data-table-examples.tsx │ │ │ ├── dialog-examples.tsx │ │ │ ├── dropdown-menu-examples.tsx │ │ │ ├── empty-state-examples.tsx │ │ │ ├── filter-chip-examples.tsx │ │ │ ├── flex-examples.tsx │ │ │ ├── headline-examples.tsx │ │ │ ├── icon-button-examples.tsx │ │ │ ├── image-examples.tsx │ │ │ ├── index.ts │ │ │ ├── indicator-examples.tsx │ │ │ ├── input-field-examples.tsx │ │ │ ├── label-examples.tsx │ │ │ ├── link-examples.tsx │ │ │ ├── list-examples.tsx │ │ │ ├── playground-layout.module.css │ │ │ ├── playground-layout.tsx │ │ │ ├── popover-examples.tsx │ │ │ ├── radio-examples.tsx │ │ │ ├── search-examples.tsx │ │ │ ├── select-examples.tsx │ │ │ ├── separator-examples.tsx │ │ │ ├── sheet-examples.tsx │ │ │ ├── sidebar-examples.tsx │ │ │ ├── skeleton-examples.tsx │ │ │ ├── slider-examples.tsx │ │ │ ├── spinner-examples.tsx │ │ │ ├── switch-examples.tsx │ │ │ ├── table-examples.tsx │ │ │ ├── tabs-examples.tsx │ │ │ ├── text-area-examples.tsx │ │ │ ├── text-examples.tsx │ │ │ ├── toast-examples.tsx │ │ │ └── tooltip-examples.tsx │ │ ├── popover-color-picker.tsx │ │ ├── preview │ │ │ ├── index.ts │ │ │ ├── preview.module.css │ │ │ └── preview.tsx │ │ ├── tag │ │ │ ├── index.ts │ │ │ ├── tag.module.css │ │ │ └── tag.tsx │ │ ├── theme-customiser │ │ │ ├── index.ts │ │ │ ├── theme-customiser.module.css │ │ │ └── theme-customiser.tsx │ │ ├── theme-switcher │ │ │ ├── accent-toggle.module.css │ │ │ ├── accent-toggle.tsx │ │ │ ├── index.ts │ │ │ ├── theme-switcher.module.css │ │ │ ├── theme-switcher.tsx │ │ │ ├── theme-toggle.module.css │ │ │ └── theme-toggle.tsx │ │ └── theme.tsx │ ├── content │ │ └── docs │ │ │ ├── components │ │ │ ├── accordion │ │ │ │ ├── demo.ts │ │ │ │ ├── index.mdx │ │ │ │ └── props.ts │ │ │ ├── amount │ │ │ │ ├── demo.ts │ │ │ │ ├── index.mdx │ │ │ │ └── props.ts │ │ │ ├── announcement-bar │ │ │ │ ├── demo.ts │ │ │ │ ├── index.mdx │ │ │ │ └── props.ts │ │ │ ├── avatar │ │ │ │ ├── demo.ts │ │ │ │ ├── index.mdx │ │ │ │ └── props.ts │ │ │ ├── badge │ │ │ │ ├── demo.ts │ │ │ │ ├── index.mdx │ │ │ │ └── props.ts │ │ │ ├── breadcrumb │ │ │ │ ├── demo.ts │ │ │ │ ├── index.mdx │ │ │ │ └── props.ts │ │ │ ├── button │ │ │ │ ├── demo.ts │ │ │ │ ├── index.mdx │ │ │ │ └── props.ts │ │ │ ├── calendar │ │ │ │ ├── demo.ts │ │ │ │ ├── index.mdx │ │ │ │ └── props.ts │ │ │ ├── callout │ │ │ │ ├── demo.ts │ │ │ │ ├── index.mdx │ │ │ │ └── props.ts │ │ │ ├── checkbox │ │ │ │ ├── demo.ts │ │ │ │ ├── index.mdx │ │ │ │ └── props.ts │ │ │ ├── chip │ │ │ │ ├── demo.ts │ │ │ │ ├── index.mdx │ │ │ │ └── props.ts │ │ │ ├── code-block │ │ │ │ ├── demo.ts │ │ │ │ ├── index.mdx │ │ │ │ └── props.ts │ │ │ ├── color-picker │ │ │ │ ├── demo.ts │ │ │ │ ├── index.mdx │ │ │ │ └── props.ts │ │ │ ├── command │ │ │ │ ├── demo.ts │ │ │ │ ├── index.mdx │ │ │ │ └── props.ts │ │ │ ├── container │ │ │ │ ├── demo.ts │ │ │ │ ├── index.mdx │ │ │ │ └── props.ts │ │ │ ├── copy-button │ │ │ │ ├── demo.ts │ │ │ │ ├── index.mdx │ │ │ │ └── props.ts │ │ │ ├── datatable │ │ │ │ ├── demo.ts │ │ │ │ ├── index.mdx │ │ │ │ └── props.ts │ │ │ ├── dialog │ │ │ │ ├── demo.ts │ │ │ │ ├── index.mdx │ │ │ │ └── props.ts │ │ │ ├── dropdown │ │ │ │ ├── demo.ts │ │ │ │ ├── index.mdx │ │ │ │ └── props.ts │ │ │ ├── empty-state │ │ │ │ ├── demo.ts │ │ │ │ ├── index.mdx │ │ │ │ └── props.ts │ │ │ ├── flex │ │ │ │ ├── demo.ts │ │ │ │ ├── index.mdx │ │ │ │ └── props.ts │ │ │ ├── fliter-chip │ │ │ │ ├── demo.ts │ │ │ │ ├── index.mdx │ │ │ │ └── props.ts │ │ │ ├── grid │ │ │ │ ├── demo.ts │ │ │ │ ├── index.mdx │ │ │ │ └── props.ts │ │ │ ├── headline │ │ │ │ ├── demo.ts │ │ │ │ ├── index.mdx │ │ │ │ └── props.ts │ │ │ ├── icon-button │ │ │ │ ├── demo.ts │ │ │ │ ├── index.mdx │ │ │ │ └── props.ts │ │ │ ├── image │ │ │ │ ├── demo.ts │ │ │ │ ├── index.mdx │ │ │ │ └── props.ts │ │ │ ├── indicator │ │ │ │ ├── demo.ts │ │ │ │ ├── index.mdx │ │ │ │ └── props.ts │ │ │ ├── input-field │ │ │ │ ├── demo.ts │ │ │ │ ├── index.mdx │ │ │ │ └── props.ts │ │ │ ├── label │ │ │ │ ├── demo.ts │ │ │ │ ├── index.mdx │ │ │ │ └── props.ts │ │ │ ├── link │ │ │ │ ├── demo.ts │ │ │ │ ├── index.mdx │ │ │ │ └── props.ts │ │ │ ├── list │ │ │ │ ├── demo.ts │ │ │ │ ├── index.mdx │ │ │ │ └── props.ts │ │ │ ├── popover │ │ │ │ ├── demo.ts │ │ │ │ ├── index.mdx │ │ │ │ └── props.ts │ │ │ ├── radio │ │ │ │ ├── demo.ts │ │ │ │ ├── index.mdx │ │ │ │ └── props.ts │ │ │ ├── search │ │ │ │ ├── demo.ts │ │ │ │ ├── index.mdx │ │ │ │ └── props.ts │ │ │ ├── select │ │ │ │ ├── demo.ts │ │ │ │ ├── index.mdx │ │ │ │ └── props.ts │ │ │ ├── separator │ │ │ │ ├── demo.ts │ │ │ │ ├── index.mdx │ │ │ │ └── props.ts │ │ │ ├── sheet │ │ │ │ ├── demo.ts │ │ │ │ ├── index.mdx │ │ │ │ └── props.ts │ │ │ ├── sidebar │ │ │ │ ├── demo.ts │ │ │ │ ├── index.mdx │ │ │ │ └── props.ts │ │ │ ├── sidepanel │ │ │ │ ├── demo.ts │ │ │ │ ├── index.mdx │ │ │ │ └── props.ts │ │ │ ├── skeleton │ │ │ │ ├── demo.ts │ │ │ │ ├── index.mdx │ │ │ │ └── props.ts │ │ │ ├── slider │ │ │ │ ├── demo.ts │ │ │ │ ├── index.mdx │ │ │ │ └── props.ts │ │ │ ├── spinner │ │ │ │ ├── demo.ts │ │ │ │ ├── index.mdx │ │ │ │ └── props.ts │ │ │ ├── switch │ │ │ │ ├── demo.ts │ │ │ │ ├── index.mdx │ │ │ │ └── props.ts │ │ │ ├── table │ │ │ │ ├── demo.ts │ │ │ │ ├── index.mdx │ │ │ │ └── props.ts │ │ │ ├── tabs │ │ │ │ ├── demo.ts │ │ │ │ ├── index.mdx │ │ │ │ └── props.ts │ │ │ ├── text │ │ │ │ ├── demo.ts │ │ │ │ ├── index.mdx │ │ │ │ └── props.ts │ │ │ ├── textarea │ │ │ │ ├── demo.ts │ │ │ │ ├── index.mdx │ │ │ │ └── props.ts │ │ │ ├── toast │ │ │ │ ├── demo.ts │ │ │ │ ├── index.mdx │ │ │ │ └── props.ts │ │ │ └── tooltip │ │ │ │ ├── demo.ts │ │ │ │ ├── index.mdx │ │ │ │ └── props.ts │ │ │ ├── getting-started.mdx │ │ │ ├── index.mdx │ │ │ └── meta.json │ ├── lib │ │ ├── ai.ts │ │ ├── prettier.ts │ │ ├── remark.ts │ │ ├── source.ts │ │ ├── types.ts │ │ └── utils.ts │ └── styles.css │ └── tsconfig.json ├── biome.json ├── lefthook.yml ├── package.json ├── packages ├── eslint-config-custom │ ├── index.js │ └── package.json ├── plugin-vscode │ ├── .vscodeignore │ ├── LICENSE.md │ ├── README.md │ ├── assets │ │ ├── autocomplete.gif │ │ ├── hover.gif │ │ ├── logo.png │ │ └── settings.png │ ├── esbuild.js │ ├── package.json │ ├── src │ │ ├── client.ts │ │ ├── lib │ │ │ └── utils.ts │ │ ├── server.ts │ │ └── tokens │ │ │ ├── color.ts │ │ │ ├── effects.ts │ │ │ ├── index.ts │ │ │ ├── primitives │ │ │ ├── accent.ts │ │ │ ├── appearance.ts │ │ │ ├── gray.ts │ │ │ ├── index.ts │ │ │ └── style.ts │ │ │ ├── radius.ts │ │ │ ├── space.ts │ │ │ └── typography.ts │ └── tsconfig.json ├── raystack │ ├── .np-config.json │ ├── CHANGELOG.md │ ├── README.md │ ├── components │ │ ├── accordion │ │ │ ├── __tests__ │ │ │ │ └── accordion.test.tsx │ │ │ ├── accordion-content.tsx │ │ │ ├── accordion-item.tsx │ │ │ ├── accordion-root.tsx │ │ │ ├── accordion-trigger.tsx │ │ │ ├── accordion.module.css │ │ │ ├── accordion.tsx │ │ │ └── index.tsx │ │ ├── amount │ │ │ ├── __tests__ │ │ │ │ └── amount.test.tsx │ │ │ ├── amount.tsx │ │ │ └── index.tsx │ │ ├── announcement-bar │ │ │ ├── __tests__ │ │ │ │ └── announcement-bar.test.tsx │ │ │ ├── announcement-bar.module.css │ │ │ ├── announcement-bar.tsx │ │ │ └── index.tsx │ │ ├── avatar │ │ │ ├── __tests__ │ │ │ │ └── avatar.test.tsx │ │ │ ├── avatar.module.css │ │ │ ├── avatar.tsx │ │ │ ├── index.tsx │ │ │ └── utils.tsx │ │ ├── badge │ │ │ ├── __tests__ │ │ │ │ └── badge.test.tsx │ │ │ ├── badge.module.css │ │ │ ├── badge.tsx │ │ │ └── index.tsx │ │ ├── box │ │ │ ├── __tests__ │ │ │ │ └── box.test.tsx │ │ │ ├── box.module.css │ │ │ ├── box.tsx │ │ │ └── index.tsx │ │ ├── breadcrumb │ │ │ ├── __tests__ │ │ │ │ └── breadcrumb.test.tsx │ │ │ ├── breadcrumb-item.tsx │ │ │ ├── breadcrumb-misc.tsx │ │ │ ├── breadcrumb-root.tsx │ │ │ ├── breadcrumb.module.css │ │ │ ├── breadcrumb.tsx │ │ │ └── index.tsx │ │ ├── button │ │ │ ├── __tests__ │ │ │ │ └── button.test.tsx │ │ │ ├── button.module.css │ │ │ ├── button.tsx │ │ │ └── index.tsx │ │ ├── calendar │ │ │ ├── __tests__ │ │ │ │ └── calendar.test.tsx │ │ │ ├── calendar.module.css │ │ │ ├── calendar.tsx │ │ │ ├── date-picker.tsx │ │ │ ├── index.tsx │ │ │ └── range-picker.tsx │ │ ├── callout │ │ │ ├── __tests__ │ │ │ │ └── callout.test.tsx │ │ │ ├── callout.module.css │ │ │ ├── callout.tsx │ │ │ └── index.tsx │ │ ├── checkbox │ │ │ ├── __tests__ │ │ │ │ └── checkbox.test.tsx │ │ │ ├── checkbox.module.css │ │ │ ├── checkbox.tsx │ │ │ └── index.tsx │ │ ├── chip │ │ │ ├── __tests__ │ │ │ │ └── chip.test.tsx │ │ │ ├── chip.module.css │ │ │ ├── chip.tsx │ │ │ └── index.tsx │ │ ├── code-block │ │ │ ├── __tests__ │ │ │ │ └── code-block.test.tsx │ │ │ ├── code-block-code.tsx │ │ │ ├── code-block-language-select.tsx │ │ │ ├── code-block-misc.tsx │ │ │ ├── code-block-root.tsx │ │ │ ├── code-block.module.css │ │ │ ├── code-block.tsx │ │ │ ├── code.module.css │ │ │ └── index.tsx │ │ ├── color-picker │ │ │ ├── __tests__ │ │ │ │ └── color-picker.test.tsx │ │ │ ├── color-picker-alpha.tsx │ │ │ ├── color-picker-area.tsx │ │ │ ├── color-picker-hue.tsx │ │ │ ├── color-picker-input.tsx │ │ │ ├── color-picker-mode.tsx │ │ │ ├── color-picker-root.tsx │ │ │ ├── color-picker.module.css │ │ │ ├── color-picker.tsx │ │ │ ├── index.ts │ │ │ └── utils.ts │ │ ├── command │ │ │ ├── __tests__ │ │ │ │ └── command.test.tsx │ │ │ ├── command.module.css │ │ │ ├── command.tsx │ │ │ └── index.tsx │ │ ├── container │ │ │ ├── __tests__ │ │ │ │ └── container.test.tsx │ │ │ ├── container.module.css │ │ │ ├── container.tsx │ │ │ └── index.tsx │ │ ├── copy-button │ │ │ ├── __tests__ │ │ │ │ └── copy-button.test.tsx │ │ │ ├── copy-button.tsx │ │ │ └── index.tsx │ │ ├── data-table │ │ │ ├── __tests__ │ │ │ │ └── data-table.test.tsx │ │ │ ├── components │ │ │ │ ├── content.tsx │ │ │ │ ├── display-properties.tsx │ │ │ │ ├── display-settings.tsx │ │ │ │ ├── filters.tsx │ │ │ │ ├── grouping.tsx │ │ │ │ ├── ordering.tsx │ │ │ │ ├── search.tsx │ │ │ │ └── toolbar.tsx │ │ │ ├── context.tsx │ │ │ ├── data-table.module.css │ │ │ ├── data-table.tsx │ │ │ ├── data-table.types.tsx │ │ │ ├── hooks │ │ │ │ ├── useDataTable.tsx │ │ │ │ └── useFilters.tsx │ │ │ ├── index.ts │ │ │ └── utils │ │ │ │ ├── __tests__ │ │ │ │ ├── filter-operations.test.tsx │ │ │ │ └── index.test.tsx │ │ │ │ ├── filter-operations.tsx │ │ │ │ └── index.tsx │ │ ├── dialog │ │ │ ├── __tests__ │ │ │ │ └── dialog.test.tsx │ │ │ ├── dialog.module.css │ │ │ ├── dialog.tsx │ │ │ └── index.ts │ │ ├── dropdown-menu │ │ │ ├── __tests__ │ │ │ │ └── dropdown-menu.test.tsx │ │ │ ├── cell.module.css │ │ │ ├── cell.tsx │ │ │ ├── dropdown-menu-content.tsx │ │ │ ├── dropdown-menu-item.tsx │ │ │ ├── dropdown-menu-misc.tsx │ │ │ ├── dropdown-menu-root.tsx │ │ │ ├── dropdown-menu-trigger.tsx │ │ │ ├── dropdown-menu.module.css │ │ │ ├── dropdown-menu.tsx │ │ │ ├── index.ts │ │ │ ├── types.ts │ │ │ └── utils.ts │ │ ├── empty-state │ │ │ ├── __tests__ │ │ │ │ └── empty-state.test.tsx │ │ │ ├── empty-state.module.css │ │ │ ├── empty-state.tsx │ │ │ └── index.tsx │ │ ├── filter-chip │ │ │ ├── __tests__ │ │ │ │ └── filter-chip.test.tsx │ │ │ ├── filter-chip-operation.tsx │ │ │ ├── filter-chip.module.css │ │ │ ├── filter-chip.tsx │ │ │ └── index.tsx │ │ ├── flex │ │ │ ├── __tests__ │ │ │ │ └── flex.test.tsx │ │ │ ├── flex.module.css │ │ │ ├── flex.tsx │ │ │ └── index.tsx │ │ ├── grid │ │ │ ├── __tests__ │ │ │ │ └── grid.test.tsx │ │ │ ├── grid-item.tsx │ │ │ ├── grid.tsx │ │ │ ├── index.ts │ │ │ └── types.ts │ │ ├── headline │ │ │ ├── __tests__ │ │ │ │ └── headline.test.tsx │ │ │ ├── headline.module.css │ │ │ ├── headline.tsx │ │ │ └── index.tsx │ │ ├── icon-button │ │ │ ├── __tests__ │ │ │ │ └── icon-button.test.tsx │ │ │ ├── icon-button.module.css │ │ │ ├── icon-button.tsx │ │ │ └── index.tsx │ │ ├── image │ │ │ ├── __tests__ │ │ │ │ └── image.test.tsx │ │ │ ├── image.module.css │ │ │ ├── image.tsx │ │ │ └── index.tsx │ │ ├── indicator │ │ │ ├── __tests__ │ │ │ │ └── indicator.test.tsx │ │ │ ├── index.tsx │ │ │ ├── indicator.module.css │ │ │ └── indicator.tsx │ │ ├── input-field │ │ │ ├── __tests__ │ │ │ │ └── input-field.test.tsx │ │ │ ├── index.tsx │ │ │ ├── input-field.module.css │ │ │ └── input-field.tsx │ │ ├── label │ │ │ ├── __tests__ │ │ │ │ └── label.test.tsx │ │ │ ├── index.tsx │ │ │ ├── label.module.css │ │ │ └── label.tsx │ │ ├── link │ │ │ ├── __tests__ │ │ │ │ └── link.test.tsx │ │ │ ├── index.tsx │ │ │ ├── link.module.css │ │ │ └── link.tsx │ │ ├── list │ │ │ ├── __tests__ │ │ │ │ └── list.test.tsx │ │ │ ├── index.tsx │ │ │ ├── list.module.css │ │ │ └── list.tsx │ │ ├── popover │ │ │ ├── __tests__ │ │ │ │ └── popover.test.tsx │ │ │ ├── index.tsx │ │ │ ├── popover.module.css │ │ │ └── popover.tsx │ │ ├── radio │ │ │ ├── __tests__ │ │ │ │ └── radio.test.tsx │ │ │ ├── index.ts │ │ │ ├── radio.module.css │ │ │ └── radio.tsx │ │ ├── search │ │ │ ├── __tests__ │ │ │ │ └── search.test.tsx │ │ │ ├── index.ts │ │ │ ├── search.module.css │ │ │ └── search.tsx │ │ ├── select │ │ │ ├── __tests__ │ │ │ │ └── select.test.tsx │ │ │ ├── index.ts │ │ │ ├── select-content.tsx │ │ │ ├── select-item.tsx │ │ │ ├── select-misc.tsx │ │ │ ├── select-multiple-value.tsx │ │ │ ├── select-root.tsx │ │ │ ├── select-trigger.tsx │ │ │ ├── select-value.tsx │ │ │ ├── select.module.css │ │ │ ├── select.tsx │ │ │ └── types.ts │ │ ├── separator │ │ │ ├── __tests__ │ │ │ │ └── separator.test.tsx │ │ │ ├── index.tsx │ │ │ ├── separator.module.css │ │ │ └── separator.tsx │ │ ├── sheet │ │ │ ├── __tests__ │ │ │ │ └── sheet.test.tsx │ │ │ ├── index.tsx │ │ │ ├── sheet.module.css │ │ │ └── sheet.tsx │ │ ├── side-panel │ │ │ ├── __tests__ │ │ │ │ └── side-panel.test.tsx │ │ │ ├── index.tsx │ │ │ ├── side-panel.module.css │ │ │ └── side-panel.tsx │ │ ├── sidebar │ │ │ ├── __tests__ │ │ │ │ └── sidebar.test.tsx │ │ │ ├── index.tsx │ │ │ ├── sidebar-item.tsx │ │ │ ├── sidebar-main.tsx │ │ │ ├── sidebar-misc.tsx │ │ │ ├── sidebar-root.tsx │ │ │ ├── sidebar.module.css │ │ │ └── sidebar.tsx │ │ ├── skeleton │ │ │ ├── __tests__ │ │ │ │ └── skeleton.test.tsx │ │ │ ├── index.ts │ │ │ ├── skeleton.module.css │ │ │ └── skeleton.tsx │ │ ├── slider │ │ │ ├── __tests__ │ │ │ │ └── slider.test.tsx │ │ │ ├── index.tsx │ │ │ ├── slider.module.css │ │ │ ├── slider.tsx │ │ │ └── thumb.tsx │ │ ├── spinner │ │ │ ├── __tests__ │ │ │ │ └── spinner.test.tsx │ │ │ ├── index.tsx │ │ │ ├── spinner.module.css │ │ │ └── spinner.tsx │ │ ├── switch │ │ │ ├── __tests__ │ │ │ │ └── switch.test.tsx │ │ │ ├── index.ts │ │ │ ├── switch.module.css │ │ │ └── switch.tsx │ │ ├── table │ │ │ ├── __tests__ │ │ │ │ └── table.test.tsx │ │ │ ├── index.ts │ │ │ ├── table.module.css │ │ │ └── table.tsx │ │ ├── tabs │ │ │ ├── __tests__ │ │ │ │ └── tabs.test.tsx │ │ │ ├── index.tsx │ │ │ ├── tabs.module.css │ │ │ └── tabs.tsx │ │ ├── text-area │ │ │ ├── __tests__ │ │ │ │ └── text-area.test.tsx │ │ │ ├── index.tsx │ │ │ ├── text-area.module.css │ │ │ └── text-area.tsx │ │ ├── text │ │ │ ├── __tests__ │ │ │ │ └── text.test.tsx │ │ │ ├── index.tsx │ │ │ ├── text.module.css │ │ │ └── text.tsx │ │ ├── theme-provider │ │ │ ├── __tests__ │ │ │ │ └── theme-provider.test.tsx │ │ │ ├── index.tsx │ │ │ ├── switcher.tsx │ │ │ ├── theme.tsx │ │ │ └── types.ts │ │ ├── toast │ │ │ ├── __tests__ │ │ │ │ └── toast.test.tsx │ │ │ ├── index.tsx │ │ │ ├── toast.module.css │ │ │ └── toast.tsx │ │ └── tooltip │ │ │ ├── __tests__ │ │ │ └── tooltip.test.tsx │ │ │ ├── index.tsx │ │ │ ├── tooltip-provider.tsx │ │ │ ├── tooltip-root.tsx │ │ │ ├── tooltip.module.css │ │ │ ├── tooltip.tsx │ │ │ └── utils.ts │ ├── figma.config.json │ ├── figma │ │ └── button.figma.tsx │ ├── global.d.ts │ ├── hooks │ │ ├── index.tsx │ │ ├── useCopyToClipboard.tsx │ │ ├── useDebouncedState.tsx │ │ ├── useIsomorphicLayoutEffect.tsx │ │ └── useMouse.tsx │ ├── icons │ │ ├── assets │ │ │ ├── bell-slash.svg │ │ │ ├── bell.svg │ │ │ ├── buildings-filled.svg │ │ │ ├── check-circle-filled.svg │ │ │ ├── coin-colored.svg │ │ │ ├── coin.svg │ │ │ ├── cross-circle-filled.svg │ │ │ ├── filter.svg │ │ │ ├── organization.svg │ │ │ ├── shopping-bag-filled.svg │ │ │ ├── sidebar.svg │ │ │ └── triangle-right.svg │ │ ├── index.tsx │ │ └── svg.d.ts │ ├── index.tsx │ ├── normalize.css │ ├── package.json │ ├── rollup.config.mjs │ ├── scripts │ │ ├── bump-version.js │ │ ├── create-icons.js │ │ ├── update-figma-config.js │ │ └── validate-figma-config.js │ ├── style.css │ ├── styles │ │ ├── colors.css │ │ ├── effects.css │ │ ├── index.css │ │ ├── primitives │ │ │ ├── accent.css │ │ │ ├── appearance.css │ │ │ ├── gray.css │ │ │ └── z-index.css │ │ ├── radius.css │ │ ├── reset.css │ │ ├── spacing.css │ │ └── typography.css │ ├── tsconfig.json │ ├── types │ │ └── filters.tsx │ ├── vitest.config.mjs │ └── vitest.setup.ts └── tsconfig │ ├── base.json │ ├── nextjs.json │ ├── package.json │ └── react-library.json ├── pnpm-lock.yaml ├── pnpm-workspace.yaml ├── turbo.json └── vercel.json /.editorconfig: -------------------------------------------------------------------------------- 1 | # https://EditorConfig.org 2 | 3 | # top-most EditorConfig file 4 | root = true 5 | 6 | # Unix-style newlines with a newline ending every file 7 | [*] 8 | end_of_line = lf 9 | insert_final_newline = true 10 | charset = utf-8 11 | trim_trailing_whitespace = true 12 | 13 | # TypeScript, JavaScript, JSX, TSX, JSON files 14 | [*.{ts,tsx,js,jsx,json,jsonc}] 15 | indent_style = space 16 | indent_size = 2 17 | 18 | # CSS files 19 | [*.css] 20 | indent_style = space 21 | indent_size = 2 22 | 23 | # Markdown files 24 | [*.md] 25 | trim_trailing_whitespace = false 26 | indent_style = space 27 | indent_size = 2 28 | 29 | # Configuration files 30 | [*.{yml,yaml}] 31 | indent_style = space 32 | indent_size = 2 -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | // This project uses Biome instead of ESLint 3 | // Keep this file for backwards compatibility only 4 | root: true, 5 | extends: [], 6 | rules: {} 7 | }; 8 | -------------------------------------------------------------------------------- /.eslintrs.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | // This project uses Biome instead of ESLint 3 | // Keep this file for backwards compatibility and to avoid eslint conflicts 4 | root: true, 5 | extends: [], 6 | rules: {}, 7 | }; 8 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | ## Description 2 | 3 | [Provide a clear and concise description of the issue] 4 | 5 | ## Expected Behavior 6 | 7 | [Describe what you expected to happen] 8 | 9 | ## Current Behavior 10 | 11 | [Describe what actually happened] 12 | 13 | ## Steps to Reproduce 14 | 15 | 1. [First Step] 16 | 2. [Second Step] 17 | 3. [and so on...] 18 | 19 | ## Environment 20 | 21 | - OS: [e.g. Windows, MacOS] 22 | - Browser: [e.g. Chrome, Safari] 23 | - Version: [e.g. 22] 24 | 25 | ## Additional Context 26 | 27 | [Add any other context about the problem here] 28 | 29 | ## Screenshots 30 | 31 | [If applicable, add screenshots to help explain your problem] 32 | -------------------------------------------------------------------------------- /.github/workflows/tests.yml: -------------------------------------------------------------------------------- 1 | name: Tests 2 | 3 | on: 4 | pull_request: 5 | branches: [main] 6 | push: 7 | branches: [main] 8 | 9 | jobs: 10 | test-and-lint: 11 | runs-on: ubuntu-latest 12 | 13 | strategy: 14 | matrix: 15 | node-version: [18.x, 20.x] 16 | 17 | steps: 18 | - name: Checkout code 19 | uses: actions/checkout@v4 20 | 21 | - name: Setup pnpm 22 | uses: pnpm/action-setup@v4 23 | with: 24 | version: 9.3.0 25 | 26 | - name: Setup Node.js ${{ matrix.node-version }} 27 | uses: actions/setup-node@v4 28 | with: 29 | node-version: ${{ matrix.node-version }} 30 | cache: "pnpm" 31 | 32 | - name: Install dependencies 33 | run: pnpm install --frozen-lockfile 34 | 35 | - name: Run tests 36 | run: pnpm --filter=@raystack/apsara test 37 | 38 | - name: Check build 39 | run: pnpm build:apsara 40 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | node_modules 5 | .pnp 6 | .pnp.js 7 | 8 | # testing 9 | coverage 10 | 11 | # next.js 12 | .next/ 13 | out/ 14 | build 15 | dist 16 | 17 | # misc 18 | .DS_Store 19 | *.pem 20 | 21 | # debug 22 | npm-debug.log* 23 | yarn-debug.log* 24 | yarn-error.log* 25 | 26 | # local env files 27 | .env 28 | .env.local 29 | .env.development.local 30 | .env.test.local 31 | .env.production.local 32 | 33 | # turbo 34 | .turbo 35 | 36 | # vercel 37 | .vercel 38 | 39 | # vscode plugin 40 | *.vsix -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | v1/node_modules 3 | src 4 | tests 5 | .turbo 6 | .gitignore 7 | .npmignore 8 | rollup.config.mjs 9 | tsconfig.json 10 | *.log -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | auto-install-peers = true 2 | enable-pre-post-scripts=true 3 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | # This project uses Biome as a formatting, linting and import sorter toolchain. 2 | # Ignore everything 3 | * -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.2.0", 3 | "configurations": [ 4 | { 5 | "type": "extensionHost", 6 | "request": "launch", 7 | "name": "Apsara for VSCode", 8 | "runtimeExecutable": "${execPath}/packages/plugin-vscode", 9 | "args": [ 10 | "--extensionDevelopmentPath=${workspaceRoot}/packages/plugin-vscode" 11 | ], 12 | "outFiles": ["${workspaceRoot}/packages/plugin-vscode/dist/**/*.js"], 13 | "autoAttachChildProcesses": true, 14 | "preLaunchTask": "plugin-vscode: start-dev", 15 | "postDebugTask": "plugin-vscode: stop-dev" 16 | } 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "typescript.tsdk": "node_modules/typescript/lib", 3 | 4 | "biome.enabled": true, 5 | "editor.formatOnSave": true, 6 | "editor.codeActionsOnSave": { 7 | "source.fixAll.biome": "explicit", 8 | "source.organizeImports.biome": "explicit" 9 | }, 10 | 11 | "eslint.enable": false, 12 | 13 | "[javascript]": { 14 | "editor.defaultFormatter": "biomejs.biome" 15 | }, 16 | "[javascriptreact]": { 17 | "editor.defaultFormatter": "biomejs.biome" 18 | }, 19 | "[typescript]": { 20 | "editor.defaultFormatter": "biomejs.biome" 21 | }, 22 | "[typescriptreact]": { 23 | "editor.defaultFormatter": "biomejs.biome" 24 | }, 25 | "[json]": { 26 | "editor.defaultFormatter": "biomejs.biome" 27 | }, 28 | "[jsonc]": { 29 | "editor.defaultFormatter": "biomejs.biome" 30 | }, 31 | "[css]": { 32 | "editor.defaultFormatter": "biomejs.biome" 33 | }, 34 | "[markdown]": { 35 | "editor.defaultFormatter": "biomejs.biome" 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /.zed/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "formatter": { 3 | "language_server": { 4 | "name": "biome" 5 | } 6 | }, 7 | "code_actions_on_format": { 8 | "source.fixAll.biome": true, 9 | "source.organizeImports.biome": true 10 | }, 11 | "languages": { 12 | "JavaScript": { 13 | "formatter": { "name": "biome" } 14 | }, 15 | "JSX": { 16 | "formatter": { "name": "biome" } 17 | }, 18 | "TypeScript": { 19 | "formatter": { "name": "biome" } 20 | }, 21 | "TSX": { 22 | "formatter": { "name": "biome" } 23 | }, 24 | "JSON": { 25 | "formatter": { "name": "biome" } 26 | }, 27 | "JSON with Comments": { 28 | "formatter": { "name": "biome" } 29 | }, 30 | "CSS": { 31 | "formatter": { "name": "biome" } 32 | }, 33 | "Markdown": { 34 | "formatter": { "name": "biome" } 35 | } 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | packages/raystack/README.md -------------------------------------------------------------------------------- /apps/www/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["next/core-web-vitals", "next/typescript"] 3 | } 4 | -------------------------------------------------------------------------------- /apps/www/.gitignore: -------------------------------------------------------------------------------- 1 | # deps 2 | /node_modules 3 | 4 | # generated content 5 | .contentlayer 6 | .content-collections 7 | .source 8 | 9 | # test & build 10 | /coverage 11 | /.next/ 12 | /out/ 13 | /build 14 | *.tsbuildinfo 15 | 16 | # misc 17 | .DS_Store 18 | *.pem 19 | /.pnp 20 | .pnp.js 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | 25 | # others 26 | .env*.local 27 | .vercel 28 | next-env.d.ts -------------------------------------------------------------------------------- /apps/www/README.md: -------------------------------------------------------------------------------- 1 | # fuma-base 2 | 3 | This is a Next.js application generated with 4 | [Create Fumadocs](https://github.com/fuma-nama/fumadocs). 5 | 6 | Run development server: 7 | 8 | ```bash 9 | npm run dev 10 | # or 11 | pnpm dev 12 | # or 13 | yarn dev 14 | ``` 15 | 16 | Open http://localhost:3000 with your browser to see the result. 17 | 18 | ## Learn More 19 | 20 | To learn more about Next.js and Fumadocs, take a look at the following 21 | resources: 22 | 23 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js 24 | features and API. 25 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 26 | - [Fumadocs](https://fumadocs.vercel.app) - learn about Fumadocs 27 | -------------------------------------------------------------------------------- /apps/www/next.config.mjs: -------------------------------------------------------------------------------- 1 | import { createMDX } from 'fumadocs-mdx/next'; 2 | 3 | const withMDX = createMDX(); 4 | 5 | /** @type {import('next').NextConfig} */ 6 | const config = { 7 | reactStrictMode: true, 8 | typescript: { 9 | // !! WARN !! 10 | // Dangerously allow production builds to successfully complete even if 11 | // your project has type errors. 12 | // !! WARN !! 13 | ignoreBuildErrors: true 14 | }, 15 | eslint: { 16 | // Warning: This allows production builds to successfully complete even if 17 | // your project has ESLint errors. 18 | ignoreDuringBuilds: true 19 | }, 20 | experimental: { 21 | optimizePackageImports: ['shiki'] 22 | }, 23 | async rewrites() { 24 | return [ 25 | { 26 | source: '/docs/:path*.mdx', 27 | destination: '/llms.mdx/:path*' 28 | }, 29 | { 30 | source: '/docs/:path*.md', 31 | destination: '/llms.mdx/:path*' 32 | } 33 | ]; 34 | } 35 | }; 36 | 37 | export default withMDX(config); 38 | -------------------------------------------------------------------------------- /apps/www/public/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raystack/apsara/99ec1742f496d926e6f9aa3ede950332261e1bf5/apps/www/public/assets/logo.png -------------------------------------------------------------------------------- /apps/www/source.config.ts: -------------------------------------------------------------------------------- 1 | import * as path from 'node:path'; 2 | import { fileURLToPath } from 'url'; 3 | import { TagSchema } from '@/lib/types'; 4 | import { remarkInstall } from 'fumadocs-docgen'; 5 | import { 6 | defineConfig, 7 | defineDocs, 8 | frontmatterSchema 9 | } from 'fumadocs-mdx/config'; 10 | import { 11 | GeneratorOptions, 12 | createGenerator, 13 | remarkAutoTypeTable 14 | } from 'fumadocs-typescript'; 15 | 16 | const relative = (s: string): string => 17 | path.resolve(fileURLToPath(new URL(s, import.meta.url))); 18 | 19 | const tsconfig: GeneratorOptions = { 20 | tsconfigPath: relative('../tsconfig.json'), 21 | basePath: relative('../'), 22 | cache: false 23 | }; 24 | 25 | const generator = createGenerator(tsconfig); 26 | 27 | export const docs = defineDocs({ 28 | dir: 'src/content/docs', 29 | docs: { 30 | schema: frontmatterSchema.extend({ 31 | tag: TagSchema 32 | }) 33 | } 34 | }); 35 | 36 | export default defineConfig({ 37 | mdxOptions: { 38 | remarkPlugins: [remarkInstall, [remarkAutoTypeTable, { generator }]] 39 | } 40 | }); 41 | -------------------------------------------------------------------------------- /apps/www/src/app/(home)/page.module.css: -------------------------------------------------------------------------------- 1 | .main { 2 | flex: 1; 3 | display: flex; 4 | flex-direction: column; 5 | text-align: center; 6 | justify-content: center; 7 | align-items: center; 8 | gap: 48px; 9 | width: 100%; 10 | height: 100vh; 11 | } 12 | .links { 13 | display: flex; 14 | gap: 20px; 15 | align-items: center; 16 | max-width: 500px; 17 | width: 100%; 18 | } 19 | .card h3, 20 | .card p { 21 | text-align: start; 22 | } 23 | .card { 24 | flex: 1; 25 | } 26 | .info { 27 | display: flex; 28 | flex-direction: column; 29 | align-items: flex-start; 30 | max-width: 500px; 31 | text-align: start; 32 | gap: 20px; 33 | } 34 | .info h1 { 35 | font-size: 36px; 36 | font-weight: 500; 37 | line-height: 48px; 38 | max-width: 400px; 39 | margin-bottom: 0; 40 | } 41 | .info h3 { 42 | font-size: 20px; 43 | font-weight: 400; 44 | line-height: 28px; 45 | color: hsl(var(--fd-muted-foreground) / 1); 46 | } 47 | -------------------------------------------------------------------------------- /apps/www/src/app/(home)/page.tsx: -------------------------------------------------------------------------------- 1 | import Logo from "@/components/logo"; 2 | import { Card } from "fumadocs-ui/components/card"; 3 | import { Notebook, Paintbrush } from "lucide-react"; 4 | import styles from "./page.module.css"; 5 | 6 | export const metadata = { 7 | title: "Apsara", 8 | }; 9 | 10 | export default function HomePage() { 11 | return ( 12 |
13 |
14 | 15 |

16 | The design system
17 | for the next big thing 18 |

19 |

20 | Apsara is an elegant and beautiful re-usable React component library 21 | built using Radix UI. 22 |

23 |
24 |
25 | } 29 | href="/docs" 30 | className={styles.card} 31 | /> 32 | } 36 | href="/playground" 37 | className={styles.card} 38 | /> 39 |
40 |
41 | ); 42 | } 43 | -------------------------------------------------------------------------------- /apps/www/src/app/(llms)/llms-full.txt/route.ts: -------------------------------------------------------------------------------- 1 | import { getLLMText } from '@/lib/ai'; 2 | import { docs } from '@/lib/source'; 3 | 4 | // cached forever 5 | export const revalidate = false; 6 | 7 | export async function GET() { 8 | const scan = docs.getPages().map(getLLMText); 9 | const scanned = await Promise.all(scan); 10 | const header = 11 | 'This is the full developer documentation for Apsara Design System.'; 12 | 13 | return new Response(header + '\n\n' + scanned.join('\n\n***\n\n')); 14 | } 15 | -------------------------------------------------------------------------------- /apps/www/src/app/(llms)/llms.mdx/[[...slug]]/route.ts: -------------------------------------------------------------------------------- 1 | import { getLLMText } from '@/lib/ai'; 2 | import { docs } from '@/lib/source'; 3 | import { notFound } from 'next/navigation'; 4 | import { type NextRequest, NextResponse } from 'next/server'; 5 | 6 | // cached forever 7 | export const revalidate = false; 8 | 9 | export async function GET( 10 | _req: NextRequest, 11 | { params }: { params: Promise<{ slug?: string[] }> } 12 | ) { 13 | const { slug } = await params; 14 | const page = docs.getPage(slug); 15 | 16 | if (!page) notFound(); 17 | 18 | return new NextResponse(await getLLMText(page)); 19 | } 20 | 21 | export function generateStaticParams() { 22 | return docs.generateParams(); 23 | } 24 | -------------------------------------------------------------------------------- /apps/www/src/app/(llms)/llms.txt/route.ts: -------------------------------------------------------------------------------- 1 | import { docs } from '@/lib/source'; 2 | 3 | // cached forever 4 | export const revalidate = false; 5 | 6 | export async function GET() { 7 | const scanned: string[] = []; 8 | scanned.push('# Apsara Design System Documentation for LLMs'); 9 | const map = new Map(); 10 | 11 | for (const page of docs.getPages()) { 12 | const dir = page.slugs[0] ?? 'root'; 13 | const list = map.get(dir) ?? []; 14 | list.push(`- [${page.data.title}](${page.url}): ${page.data.description}`); 15 | map.set(dir, list); 16 | } 17 | 18 | for (const [key, value] of map) { 19 | scanned.push(`## ${key}`); 20 | scanned.push(value.join('\n')); 21 | } 22 | 23 | return new Response(scanned.join('\n\n')); 24 | } 25 | -------------------------------------------------------------------------------- /apps/www/src/app/api/search/route.ts: -------------------------------------------------------------------------------- 1 | import { docs } from "@/lib/source"; 2 | import { createFromSource } from "fumadocs-core/search/server"; 3 | 4 | export const { GET } = createFromSource(docs); 5 | -------------------------------------------------------------------------------- /apps/www/src/app/docs/[[...slug]]/page.module.css: -------------------------------------------------------------------------------- 1 | .title { 2 | display: flex; 3 | gap: 12px; 4 | align-items: center; 5 | } 6 | .actions { 7 | display: flex; 8 | align-items: center; 9 | } 10 | 11 | .container { 12 | display: flex; 13 | gap: 12px; 14 | align-items: center; 15 | justify-content: space-between; 16 | } 17 | -------------------------------------------------------------------------------- /apps/www/src/app/docs/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { ReactNode } from "react"; 2 | import { DocsLayout } from "fumadocs-ui/layouts/docs"; 3 | import { docs } from "@/lib/source"; 4 | import ThemeSwitcher from "@/components/theme-switcher"; 5 | import { SidebarItem } from "@/components/docs/sidebar-item"; 6 | 7 | export default function Layout({ children }: { children: ReactNode }) { 8 | return ( 9 | }} 12 | disableThemeSwitch={true} 13 | sidebar={{ 14 | collapsible: false, 15 | footer: , 16 | hideSearch: true, 17 | components: { 18 | Item: SidebarItem, 19 | }, 20 | }}> 21 | {children} 22 | 23 | ); 24 | } 25 | -------------------------------------------------------------------------------- /apps/www/src/app/icons/layout.tsx: -------------------------------------------------------------------------------- 1 | import { type ReactNode } from "react"; 2 | 3 | export const metadata = { 4 | title: "Apsara Icons", 5 | }; 6 | 7 | export default function Layout({ children }: { children: ReactNode }) { 8 | return children; 9 | } 10 | -------------------------------------------------------------------------------- /apps/www/src/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import { RootProvider } from "fumadocs-ui/provider"; 2 | import { Inter } from "next/font/google"; 3 | import type { ReactNode } from "react"; 4 | import Navbar from "@/components/navbar"; 5 | import "fumadocs-ui/style.css"; 6 | import "@raystack/apsara/style.css"; 7 | import "@/styles.css"; 8 | import { ThemeProvider } from "@/components/theme"; 9 | 10 | const inter = Inter({ 11 | subsets: ["latin"], 12 | }); 13 | 14 | export default function Layout({ children }: { children: ReactNode }) { 15 | return ( 16 | 17 | 18 | 19 | 20 | 26 | 27 | 28 | 29 | {children} 30 | 31 | 32 | 33 | 34 | ); 35 | } 36 | -------------------------------------------------------------------------------- /apps/www/src/app/playground/layout.module.css: -------------------------------------------------------------------------------- 1 | .container { 2 | position: relative; 3 | display: flex; 4 | min-height: 100vh; 5 | } 6 | .aside { 7 | position: sticky; 8 | top: var(--fd-nav-height); 9 | padding: 28px; 10 | height: fit-content; 11 | } 12 | .main { 13 | flex: 1; 14 | padding: 28px; 15 | display: flex; 16 | gap: 40px; 17 | flex-direction: column; 18 | align-items: flex-start; 19 | } 20 | -------------------------------------------------------------------------------- /apps/www/src/app/playground/layout.tsx: -------------------------------------------------------------------------------- 1 | import { type ReactNode } from "react"; 2 | import styles from "./layout.module.css"; 3 | import ThemeCustomizer from "@/components/theme-customiser"; 4 | 5 | export default function Layout({ children }: { children: ReactNode }) { 6 | return ( 7 |
8 |
{children}
9 | 12 |
13 | ); 14 | } 15 | -------------------------------------------------------------------------------- /apps/www/src/app/playground/page.module.css: -------------------------------------------------------------------------------- 1 | .container { 2 | display: flex; 3 | width: 100%; 4 | gap: 100px; 5 | flex-direction: column; 6 | padding-bottom: 100px; 7 | } 8 | -------------------------------------------------------------------------------- /apps/www/src/components/demo/demo.tsx: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | 3 | import * as Apsara from '@raystack/apsara'; 4 | import { Home, Info, Laugh, X } from 'lucide-react'; 5 | import NextLink from 'next/link'; 6 | import { Suspense } from 'react'; 7 | import DataTableDemo from '../datatable-demo'; 8 | import LinearDropdownDemo from '../linear-dropdown-demo'; 9 | import PopoverColorPicker from '../popover-color-picker'; 10 | import DemoPlayground from './demo-playground'; 11 | import DemoPreview from './demo-preview'; 12 | import { DemoProps } from './types'; 13 | 14 | export default function Demo(props: DemoProps) { 15 | const { 16 | data, 17 | scope = { 18 | ...Apsara, 19 | DataTableDemo, 20 | LinearDropdownDemo, 21 | PopoverColorPicker, 22 | Info, 23 | X, 24 | Home, 25 | Laugh, 26 | NextLink 27 | } 28 | } = props; 29 | 30 | if (data.type === 'code') { 31 | return ; 32 | } 33 | 34 | return ( 35 | 36 | 37 | 38 | ); 39 | } 40 | -------------------------------------------------------------------------------- /apps/www/src/components/demo/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from "./demo"; 2 | -------------------------------------------------------------------------------- /apps/www/src/components/demo/types.ts: -------------------------------------------------------------------------------- 1 | export type ScopeType = Record; 2 | 3 | type TabProps = { 4 | label: string; 5 | code: string; 6 | }; 7 | export type DemoPreviewProps = { 8 | type: "code"; 9 | code?: string; 10 | tabs?: { name: string; code: string }[]; 11 | scope?: ScopeType; 12 | codePreview?: string | TabProps[]; 13 | }; 14 | 15 | export type DemoPlaygroundProps = { 16 | type: "playground"; 17 | controls: ControlsType; 18 | getCode: GetCodeType; 19 | scope?: ScopeType; 20 | }; 21 | 22 | export type DemoProps = { 23 | scope?: ScopeType; 24 | data: Omit | Omit; 25 | }; 26 | 27 | export type ControlType = { 28 | type: "select" | "text" | "checkbox" | "number" | "icon"; 29 | options?: string[]; 30 | defaultValue?: string | boolean; 31 | initialValue?: string | boolean; 32 | min?: number; 33 | max?: number; 34 | }; 35 | 36 | export type ControlsType = Record; 37 | 38 | export type PropChangeHandlerType = ( 39 | prop: string, 40 | value: string | boolean | number, 41 | ) => void; 42 | 43 | export type ComponentPropsType = Record; 44 | 45 | export type GetCodeType = ( 46 | updatedProps: Record, 47 | props: Record, 48 | ) => string; 49 | -------------------------------------------------------------------------------- /apps/www/src/components/docs/docs-body.tsx: -------------------------------------------------------------------------------- 1 | import { forwardRef, HTMLAttributes } from "react"; 2 | import { cx } from "class-variance-authority"; 3 | import styles from "./docs-body.module.css"; 4 | 5 | export const DocsBody = forwardRef< 6 | HTMLDivElement, 7 | HTMLAttributes 8 | >((props, ref) => ( 9 |
10 | {props.children} 11 |
12 | )); 13 | 14 | export default DocsBody; 15 | -------------------------------------------------------------------------------- /apps/www/src/components/docs/index.ts: -------------------------------------------------------------------------------- 1 | export { default as DocsBody } from "./docs-body"; 2 | -------------------------------------------------------------------------------- /apps/www/src/components/docs/sidebar-item.module.css: -------------------------------------------------------------------------------- 1 | .item { 2 | display: flex; 3 | flex-direction: row; 4 | align-items: center; 5 | gap: 0.5rem; 6 | border-radius: 0.375rem; 7 | padding: 0.5rem 0.75rem; 8 | color: hsl(var(--fd-muted-foreground) / 1); 9 | transition-property: color, background-color, border-color; 10 | transition-duration: 100ms; 11 | overflow-wrap: anywhere; 12 | } 13 | 14 | .item svg { 15 | width: 1rem; 16 | height: 1rem; 17 | } 18 | 19 | .item.active { 20 | background-color: hsl(var(--fd-primary) / 0.1); 21 | font-weight: 500; 22 | color: hsl(var(--fd-primary) / 1); 23 | } 24 | 25 | .item:not(.active):hover { 26 | background-color: hsl(var(--fd-accent) / 0.5); 27 | color: hsl(var(--fd-accent-foreground) / 0.8); 28 | transition: none; 29 | } 30 | 31 | @media (min-width: 768px) { 32 | .item { 33 | padding: 0.375rem 0.5rem; 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /apps/www/src/components/docs/sidebar-item.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { docs } from "@/lib/source"; 4 | import { isActiveUrl } from "@/lib/utils"; 5 | import { PageTree } from "fumadocs-core/server"; 6 | import Link from "next/link"; 7 | import { usePathname } from "next/navigation"; 8 | import { useMemo } from "react"; 9 | import Tag from "../tag"; 10 | import styles from "./sidebar-item.module.css"; 11 | 12 | export function SidebarItem({ item }: { item: PageTree.Item }) { 13 | const tag = useMemo( 14 | () => docs.getNodePage(item)?.data?.tag ?? "", 15 | [item.url], 16 | ); 17 | 18 | const pathname = usePathname(); 19 | const active = 20 | item.url !== undefined && isActiveUrl(item.url, pathname, false); 21 | 22 | return ( 23 | 27 | {item.name} 28 | 29 | ); 30 | } 31 | -------------------------------------------------------------------------------- /apps/www/src/components/editor/editor.module.css: -------------------------------------------------------------------------------- 1 | .editor { 2 | border-top: 1px solid hsl(var(--fd-border) / 1); 3 | } 4 | .editor pre { 5 | overflow: auto !important; 6 | } 7 | .editor figure { 8 | border-top-left-radius: 0 !important; 9 | border-top-right-radius: 0 !important; 10 | border: none !important; 11 | } 12 | .editor [data-radix-scroll-area-viewport] { 13 | overscroll-behavior: auto; 14 | } 15 | -------------------------------------------------------------------------------- /apps/www/src/components/editor/editor.tsx: -------------------------------------------------------------------------------- 1 | import { DynamicCodeBlock } from "fumadocs-ui/components/dynamic-codeblock"; 2 | import styles from "./editor.module.css"; 3 | import { useMemo } from "react"; 4 | import { getFormattedCode } from "@/lib/prettier"; 5 | 6 | type props = { 7 | code?: string; 8 | }; 9 | 10 | export default function Editor({ code = "" }: props) { 11 | const formattedCode = useMemo(() => getFormattedCode(code), [code]); 12 | 13 | return ( 14 |
15 | 16 |
17 | ); 18 | } 19 | -------------------------------------------------------------------------------- /apps/www/src/components/editor/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from "./editor"; 2 | -------------------------------------------------------------------------------- /apps/www/src/components/icon-details/icon-empty.tsx: -------------------------------------------------------------------------------- 1 | import { cx } from "class-variance-authority"; 2 | import { MousePointerClick } from "lucide-react"; 3 | import styles from "./icon-details.module.css"; 4 | 5 | export default function IconEmpty() { 6 | return ( 7 |
8 | 9 |

Select an icon

10 |
11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /apps/www/src/components/icon-details/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from "./icon-details"; 2 | export * from "./icon-details"; 3 | export * from "./icon-empty"; 4 | -------------------------------------------------------------------------------- /apps/www/src/components/logo/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from "./logo"; 2 | -------------------------------------------------------------------------------- /apps/www/src/components/logo/logo.module.css: -------------------------------------------------------------------------------- 1 | .container { 2 | display: flex; 3 | gap: 8px; 4 | justify-content: center; 5 | align-items: center; 6 | } 7 | .container.large { 8 | gap: 16px; 9 | font-size: 2rem; 10 | font-weight: bold; 11 | } 12 | -------------------------------------------------------------------------------- /apps/www/src/components/logo/logo.tsx: -------------------------------------------------------------------------------- 1 | import Image from "next/image"; 2 | import { cx } from "class-variance-authority"; 3 | import styles from "./logo.module.css"; 4 | 5 | type Props = { 6 | variant?: "small" | "large"; 7 | onlyWordmark?: boolean; 8 | }; 9 | 10 | export default function Logo({ 11 | variant = "small", 12 | onlyWordmark = false, 13 | }: Props) { 14 | const size = variant === "small" ? 24 : 48; 15 | return ( 16 |
17 | 18 | {!onlyWordmark &&

Apsara

} 19 |
20 | ); 21 | } 22 | -------------------------------------------------------------------------------- /apps/www/src/components/navbar/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from "./navbar"; 2 | -------------------------------------------------------------------------------- /apps/www/src/components/navbar/navbar.module.css: -------------------------------------------------------------------------------- 1 | .navbar { 2 | display: flex; 3 | gap: 36px; 4 | align-items: center; 5 | position: sticky; 6 | top: 0; 7 | z-index: 100; 8 | height: var(--fd-nav-height); 9 | padding: 8px 16px; 10 | background: hsl(var(--fd-popover) / 1); 11 | border-bottom: 1px solid hsl(var(--fd-border) / 1); 12 | justify-content: space-between; 13 | } 14 | .links { 15 | display: flex; 16 | gap: 20px; 17 | align-items: center; 18 | } 19 | .actions { 20 | display: flex; 21 | gap: 12px; 22 | align-items: center; 23 | } 24 | .link { 25 | font-size: 14px; 26 | color: hsl(var(--fd-muted-foreground) / 1); 27 | transition: color 0.2s ease; 28 | } 29 | .link:hover { 30 | color: hsl(var(--fd-foreground) / 1); 31 | } 32 | .active { 33 | color: hsl(var(--fd-foreground) / 1); 34 | font-weight: 500; 35 | } 36 | .link svg { 37 | color: currentColor; 38 | } 39 | -------------------------------------------------------------------------------- /apps/www/src/components/playground/announcement-bar-examples.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import { AnnouncementBar, Flex } from "@raystack/apsara"; 3 | import PlaygroundLayout from "./playground-layout"; 4 | 5 | export function AnnouncementBarExamples() { 6 | return ( 7 | 8 | 9 | 14 | 19 | 24 | 25 | 26 | ); 27 | } 28 | -------------------------------------------------------------------------------- /apps/www/src/components/playground/badge-examples.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { Badge, Flex } from "@raystack/apsara"; 4 | import PlaygroundLayout from "./playground-layout"; 5 | import { Home, Laugh } from "lucide-react"; 6 | 7 | export function BadgeExamples() { 8 | return ( 9 | 10 | 11 | Accent 12 | Warning 13 | Danger 14 | Success 15 | Neutral 16 | Gradient 17 | 18 | 19 | Micro 20 | Small 21 | Regular 22 | 23 | 24 | }>Badge 25 | }>Badge 26 | Badge 27 | 28 | 29 | ); 30 | } 31 | -------------------------------------------------------------------------------- /apps/www/src/components/playground/breadcrumb-examples.tsx: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | 3 | import { Breadcrumb, Flex } from '@raystack/apsara'; 4 | import PlaygroundLayout from './playground-layout'; 5 | 6 | export function BreadcrumbExamples() { 7 | return ( 8 | 9 | 10 | 11 | Home 12 | 13 | { 18 | console.log('Clothes'); 19 | } 20 | }, 21 | { 22 | label: 'Electronics', 23 | onClick: () => { 24 | console.log('Electronics'); 25 | } 26 | } 27 | ]} 28 | > 29 | Products 30 | 31 | 32 | } current> 33 | Shoes 34 | 35 | 36 | 37 | 38 | ); 39 | } 40 | -------------------------------------------------------------------------------- /apps/www/src/components/playground/calendar-examples.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { Calendar, DatePicker, Flex, RangePicker } from "@raystack/apsara"; 4 | import PlaygroundLayout from "./playground-layout"; 5 | 6 | export function CalendarExamples() { 7 | return ( 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | ); 16 | } 17 | -------------------------------------------------------------------------------- /apps/www/src/components/playground/callout-examples.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { Button, Callout, Flex } from "@raystack/apsara"; 4 | import PlaygroundLayout from "./playground-layout"; 5 | 6 | export function CalloutExamples() { 7 | return ( 8 | 9 | 10 | Default Callout 11 | Success Callout 12 | Alert Callout 13 | Gradient Callout 14 | Accent Callout 15 | Attention Callout 16 | Normal Callout 17 | 18 | With Outline Callout 19 | 20 | alert("Dismissed!")}> 21 | Dismissible Callout 22 | 23 | Action}> 24 | A short message to attract user's attention 25 | 26 | 27 | 28 | ); 29 | } 30 | -------------------------------------------------------------------------------- /apps/www/src/components/playground/checkbox-examples.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { Checkbox, Flex } from "@raystack/apsara"; 4 | import PlaygroundLayout from "./playground-layout"; 5 | 6 | export function CheckboxExamples() { 7 | return ( 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /apps/www/src/components/playground/command-examples.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { Command, Flex } from "@raystack/apsara"; 4 | import PlaygroundLayout from "./playground-layout"; 5 | 6 | export function CommandExamples() { 7 | return ( 8 | 9 | 10 | 11 | 12 | 13 | No results found. 14 | 15 | Calendar 16 | Search Emoji 17 | Calculator 18 | 19 | 20 | 21 | Profile 22 | Billing 23 | Settings 24 | 25 | 26 | 27 | 28 | 29 | ); 30 | } 31 | -------------------------------------------------------------------------------- /apps/www/src/components/playground/data-table-examples.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import PlaygroundLayout from "./playground-layout"; 4 | import DataTableDemo from "../datatable-demo"; 5 | 6 | export function DataTableExamples() { 7 | return ( 8 | 9 | 10 | 11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /apps/www/src/components/playground/empty-state-examples.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { Button, EmptyState } from "@raystack/apsara"; 4 | import PlaygroundLayout from "./playground-layout"; 5 | import { X } from "lucide-react"; 6 | 7 | export function EmptyStateExamples() { 8 | return ( 9 | 10 | } 14 | primaryAction={} 15 | secondaryAction={} 16 | /> 17 | 18 | ); 19 | } 20 | -------------------------------------------------------------------------------- /apps/www/src/components/playground/filter-chip-examples.tsx: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | 3 | import { FilterChip, Flex } from '@raystack/apsara'; 4 | import { Info } from 'lucide-react'; 5 | import PlaygroundLayout from './playground-layout'; 6 | 7 | export function FilterChipExamples() { 8 | return ( 9 | 10 | 11 | } 14 | columnType='select' 15 | options={[ 16 | { label: 'Active', value: 'active' }, 17 | { label: 'Inactive', value: 'inactive' } 18 | ]} 19 | /> 20 | } columnType='date' /> 21 | } columnType='string' /> 22 | } columnType='number' /> 23 | 24 | 25 | ); 26 | } 27 | -------------------------------------------------------------------------------- /apps/www/src/components/playground/flex-examples.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { Flex, Button } from "@raystack/apsara"; 4 | import PlaygroundLayout from "./playground-layout"; 5 | 6 | export function FlexExamples() { 7 | return ( 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | ); 38 | } 39 | -------------------------------------------------------------------------------- /apps/www/src/components/playground/icon-button-examples.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { IconButton, Flex } from "@raystack/apsara"; 4 | import { Info } from "lucide-react"; 5 | import PlaygroundLayout from "./playground-layout"; 6 | 7 | export function IconButtonExamples() { 8 | return ( 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | ); 29 | } 30 | -------------------------------------------------------------------------------- /apps/www/src/components/playground/image-examples.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { Image, Flex } from "@raystack/apsara"; 4 | import PlaygroundLayout from "./playground-layout"; 5 | 6 | export function ImageExamples() { 7 | return ( 8 | 9 | 10 | Nature 17 | Nature 24 | Nature 31 | Nature 38 | 39 | 40 | ); 41 | } 42 | -------------------------------------------------------------------------------- /apps/www/src/components/playground/label-examples.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { Label, Flex } from "@raystack/apsara"; 4 | import PlaygroundLayout from "./playground-layout"; 5 | 6 | export function LabelExamples() { 7 | return ( 8 | 9 | 10 | 11 | 12 | 13 | 16 | 19 | 20 | 21 | ); 22 | } 23 | -------------------------------------------------------------------------------- /apps/www/src/components/playground/list-examples.tsx: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | 3 | import { Flex, List } from '@raystack/apsara'; 4 | import PlaygroundLayout from './playground-layout'; 5 | 6 | export function ListExamples() { 7 | return ( 8 | 9 | 10 | 11 | User Information 12 | 13 | Status 14 | Active 15 | 16 | 17 | Type 18 | Premium Account 19 | 20 | 21 | Created 22 | April 24, 2024 23 | 24 | 25 | 26 | 27 | ); 28 | } 29 | -------------------------------------------------------------------------------- /apps/www/src/components/playground/playground-layout.module.css: -------------------------------------------------------------------------------- 1 | .container { 2 | display: flex; 3 | gap: 28px; 4 | flex-direction: column; 5 | align-items: flex-start; 6 | } 7 | .container p { 8 | font-size: 24px; 9 | font-weight: 600; 10 | } 11 | -------------------------------------------------------------------------------- /apps/www/src/components/playground/playground-layout.tsx: -------------------------------------------------------------------------------- 1 | import { HTMLAttributes, ReactNode } from "react"; 2 | import styles from "./playground-layout.module.css"; 3 | import { cx } from "class-variance-authority"; 4 | 5 | type Props = { 6 | title?: string; 7 | } & HTMLAttributes; 8 | 9 | export default function PlaygroundLayout({ 10 | title, 11 | children, 12 | className, 13 | ...props 14 | }: Props) { 15 | return ( 16 |
17 | {title &&

{title}

} 18 | {children} 19 |
20 | ); 21 | } 22 | -------------------------------------------------------------------------------- /apps/www/src/components/playground/radio-examples.tsx: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | 3 | import { Flex, Radio } from '@raystack/apsara'; 4 | import PlaygroundLayout from './playground-layout'; 5 | 6 | export function RadioExamples() { 7 | return ( 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | ); 27 | } 28 | -------------------------------------------------------------------------------- /apps/www/src/components/playground/search-examples.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { Search, Flex } from "@raystack/apsara"; 4 | import PlaygroundLayout from "./playground-layout"; 5 | 6 | export function SearchExamples() { 7 | return ( 8 | 9 | 10 | 15 | 16 | 17 | 18 | 23 | 28 | 29 | 30 | 31 | 32 | ); 33 | } 34 | -------------------------------------------------------------------------------- /apps/www/src/components/playground/separator-examples.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { Separator, Flex, Text } from "@raystack/apsara"; 4 | import PlaygroundLayout from "./playground-layout"; 5 | 6 | export function SeparatorExamples() { 7 | return ( 8 | 9 | 10 | 15 | 16 | 17 | 18 | 19 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | ); 31 | } 32 | -------------------------------------------------------------------------------- /apps/www/src/components/playground/slider-examples.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { Slider, Flex, Text } from "@raystack/apsara"; 4 | import PlaygroundLayout from "./playground-layout"; 5 | 6 | export function SliderExamples() { 7 | return ( 8 | 9 | 10 | 11 | 16 | 17 | 18 | ); 19 | } 20 | -------------------------------------------------------------------------------- /apps/www/src/components/playground/spinner-examples.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { Spinner, Flex } from "@raystack/apsara"; 4 | import PlaygroundLayout from "./playground-layout"; 5 | 6 | export function SpinnerExamples() { 7 | return ( 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | ); 19 | } 20 | -------------------------------------------------------------------------------- /apps/www/src/components/playground/switch-examples.tsx: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | 3 | import { Flex, Switch, Text } from '@raystack/apsara'; 4 | import PlaygroundLayout from './playground-layout'; 5 | 6 | export function SwitchExamples() { 7 | return ( 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | Large (default): 19 | 20 | 21 | 22 | 23 | 24 | Small: 25 | 26 | 27 | 28 | 29 | 30 | 31 | ); 32 | } 33 | -------------------------------------------------------------------------------- /apps/www/src/components/playground/text-area-examples.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { TextArea, Flex } from "@raystack/apsara"; 4 | import PlaygroundLayout from "./playground-layout"; 5 | 6 | export function TextAreaExamples() { 7 | return ( 8 | 9 | 10 |