\n \n \n \n )\n}\n"
},
{
"path": "apps/docs/components/docs/component-source.tsx",
"content": "'use client'\n\nimport * as React from 'react'\n\nimport CopyClipboardButton from '../copy-clipboard-button'\n\nexport default function ComponentSource({ children }) {\n const [Code] = React.Children.toArray(children) as React.ReactElement[]\n\n const codeString = React.useMemo(() => {\n if (\n typeof Code?.props['data-rehype-pretty-code-fragment'] !== 'undefined'\n ) {\n const [Button] = React.Children.toArray(\n Code.props.children,\n ) as React.ReactElement[]\n\n return Button?.props?.value || Button?.props?.__rawString__ || null\n }\n }, [Code])\n\n return (\n
\n
\n \n
\n {Code}\n
\n )\n}\n"
},
{
"path": "apps/docs/components/docs/heading.tsx",
"content": "'use client'\n\nimport * as React from 'react'\n\nimport { type TocItemProps } from '@/types'\n\ninterface HeadingProps extends TocItemProps {\n children: React.ReactNode\n}\n\nexport default function Heading({ slug, lvl, children }: HeadingProps) {\n const headingEl = React.createElement(\n `h${lvl}`,\n {\n id: slug,\n className:\n 'mt-0 scroll-mt-20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-400 focus-visible:ring-offset-2 dark:focus-visible:ring-slate-400 dark:focus-visible:ring-offset-slate-900 rounded-sm',\n tabIndex: -1,\n },\n children,\n )\n\n return
{headingEl}
\n}\n"
},
{
"path": "apps/docs/components/docs/jump-to-content-menu.tsx",
"content": "'use client'\n\nimport { ChevronDown } from 'lucide-react'\nimport { Button } from 'ui/src/button'\nimport {\n Menu,\n MenuContent,\n MenuHeader,\n MenuItem,\n MenuSection,\n MenuSeparator,\n} from 'ui/src/menu'\n\nimport { type TocItemProps } from '@/types'\n\nexport default function JumpToContentMenu({\n toc,\n}: {\n toc: Array\n}) {\n const focusAnchorElement = (anchor: string) => {\n const el = document?.getElementById(anchor)\n if (el) el.focus()\n }\n\n return (\n \n )\n}\n"
},
{
"path": "apps/docs/components/docs/list-stepper.tsx",
"content": "import * as React from 'react'\n\nexport function ListStepper({ children }: { children: React.ReactNode }) {\n return (\n \n {children}\n \n )\n}\n\nexport function ListStep({ children }: { children: React.ReactNode }) {\n return (\n
\n {children}\n
\n )\n}\n"
},
{
"path": "apps/docs/components/docs/markdown.tsx",
"content": "'use client'\n\nimport * as React from 'react'\n\nimport { type DocumentTypes } from 'contentlayer/generated'\nimport { useMDXComponent } from 'next-contentlayer/hooks'\nimport Link from 'next/link'\nimport { Tab, TabList, TabPanel, Tabs } from 'ui'\n\nimport Callout from '@/components/docs/callout'\nimport ComponentExample from '@/components/docs/component-example'\nimport ComponentSource from '@/components/docs/component-source'\nimport Heading from '@/components/docs/heading'\nimport { cx } from '@/lib/cva.config'\nimport { type NpmCommands } from '@/types'\n\nimport CopyClipboardButton from '../copy-clipboard-button'\nimport { ListStep, ListStepper } from './list-stepper'\n\ntype MarkdownProps = {\n doc: DocumentTypes\n}\n\nexport default function Markdown(props: MarkdownProps) {\n const { doc } = props\n const MDXComponent = useMDXComponent(doc.body.code)\n return (\n
\n )\n}\n"
},
{
"path": "apps/docs/components/edit-feedback.tsx",
"content": "export default function EditFeedbackLinks({\n title,\n contentPath,\n}: {\n title: string\n contentPath: string\n}) {\n const pageEditUrl = `https://github.com/IHIutch/draft-ui/tree/main/apps/docs/content/${contentPath}`\n const pageFeedbackUrl = new URL(\n `https://github.com/IHIutch/draft-ui/issues/new`,\n )\n pageFeedbackUrl.searchParams.set('title', `Feedback for “${title}”`)\n // Is this the right label to set? Do we need to make a new label for this?\n pageFeedbackUrl.searchParams.set('labels', 'documentation')\n\n return (\n
\n)\n"
},
{
"path": "apps/docs/components/fathom-analytics.tsx",
"content": "// Fathom.tsx\n'use client'\n\nimport { Suspense, useEffect } from 'react'\n\nimport { load, trackPageview } from 'fathom-client'\nimport { usePathname, useSearchParams } from 'next/navigation'\n\nfunction TrackPageView() {\n const pathname = usePathname()\n const searchParams = useSearchParams()\n useEffect(() => {\n load('ERIJKXRN', {\n includedDomains: ['draft-ui.com'],\n auto: false,\n })\n }, [])\n\n // Record a pageview when route changes\n useEffect(() => {\n trackPageview()\n }, [pathname, searchParams])\n\n return null\n}\n\nexport default function Fathom() {\n return (\n \n \n \n )\n}\n"
},
{
"path": "apps/docs/components/home-page/cta-section.tsx",
"content": "'use client'\n\nimport * as React from 'react'\n\nimport Link from 'next/link'\n\nimport { buttonVariants } from '@/components/ui'\n\nexport default function CtaSection() {\n return (\n
\n \n Get Started\n \n \n Components\n \n
\n )\n}\n"
},
{
"path": "apps/docs/components/home-page/example-section.tsx",
"content": "'use client'\n\nimport * as React from 'react'\n\nimport BreadcrumbsDefault from '@/registry/breadcrumbs/default'\nimport CheckboxGroupDefault from '@/registry/checkbox-group/default'\nimport ComboBoxWithButton from '@/registry/combobox/with-button'\nimport DatePickerDefault from '@/registry/date-picker/default'\nimport ModalDefault from '@/registry/modal/default'\nimport NumberInputMobile from '@/registry/number-field/with-mobile-stepper'\nimport SelectDefault from '@/registry/select/default'\nimport SliderDefault from '@/registry/slider/default'\nimport SwitchDefault from '@/registry/switch/default'\nimport TabsDefault from '@/registry/tabs/default'\n\nexport default function ExampleSection() {\n return (\n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n )\n}\n"
},
{
"path": "apps/docs/components/link-list.tsx",
"content": "'use client'\n\nimport Link from 'next/link'\nimport { usePathname } from 'next/navigation'\n\nimport { cx } from '@/lib/cva.config'\n\ntype LinkListItemProps = {\n isComing?: boolean\n isWip?: boolean\n isNew?: boolean\n slug: string\n title: string\n}\n\nexport default function LinkList({ list }: { list: LinkListItemProps[] }) {\n const pathname = usePathname()\n\n return (\n
\n )\n}\n"
},
{
"path": "apps/docs/components/page-toc.tsx",
"content": "'use client'\n\nimport { useEffect, useState } from 'react'\n\nimport { cx } from '@/lib/cva.config'\nimport { type TocItemProps } from '@/types'\n\nexport default function PageToc({\n headings,\n}: {\n headings?: Array\n}) {\n const activeHeading = useActiveHeading((headings || []).map((h) => h.slug))\n\n return (\n \n )\n}\n\nfunction useActiveHeading(itemIds: string[]) {\n const [activeId, setActiveId] = useState(null)\n\n useEffect(() => {\n const observer = new IntersectionObserver(\n (entries) => {\n entries.forEach((entry) => {\n if (entry.isIntersecting) {\n setActiveId(entry.target.id)\n }\n })\n },\n { rootMargin: `0% 0% -80% 0%` },\n )\n\n itemIds?.forEach((id) => {\n const element = document.getElementById(id)\n if (element) {\n observer.observe(element)\n }\n })\n\n return () => {\n itemIds?.forEach((id) => {\n const element = document.getElementById(id)\n if (element) {\n observer.unobserve(element)\n }\n })\n }\n }, [itemIds])\n\n return activeId\n}\n"
},
{
"path": "apps/docs/components/search-component.tsx",
"content": "'use client'\n\nimport { useState } from 'react'\n\nimport { Search } from 'lucide-react'\nimport Link from 'next/link'\n\nimport { DocSearchModal } from '@docsearch/react'\n\nimport '@docsearch/css/dist/style.css'\n\nimport { Button, IconButton } from 'ui'\n\nimport { cx } from '@/lib/cva.config'\n\nexport default function SearchComponent() {\n const [isOpen, setIsOpen] = useState(false)\n\n return (\n <>\n setIsOpen(true)}\n className=\"hidden items-center justify-start text-slate-600 md:flex md:w-72\"\n >\n \n Search the docs...\n \n setIsOpen(true)}\n aria-label=\"Search\"\n className=\"md:hidden\"\n size=\"sm\"\n variant=\"ghost\"\n >\n \n \n {isOpen ? (\n setIsOpen(false)}\n placeholder=\"Search the docs...\"\n hitComponent={Hit}\n transformItems={(items) => {\n return items.map((item, index) => {\n const a = document.createElement('a')\n a.href = item.url\n\n if (item.hierarchy?.lvl0) {\n item.hierarchy.lvl0 = item.hierarchy.lvl0.replace(/&/g, '&')\n }\n\n if (item._highlightResult?.hierarchy?.lvl0?.value) {\n item._highlightResult.hierarchy.lvl0.value =\n item._highlightResult.hierarchy.lvl0.value.replace(\n /&/g,\n '&',\n )\n }\n\n return {\n ...item,\n url: `${a.pathname}${a.hash}`,\n __is_result: () => true,\n // __is_parent: () =>\n // item.type === 'lvl1' && items.length > 1 && index === 0,\n // __is_child: () =>\n // item.type !== 'lvl1' &&\n // items.length > 1 &&\n // items[0].type === 'lvl1' &&\n // index !== 0,\n __is_first: () => index === 1,\n __is_last: () => index === items.length - 1 && index !== 0,\n }\n })\n }}\n />\n ) : null}\n \n )\n}\n\nconst Hit = ({ hit, children }) => {\n return (\n \n {children}\n \n )\n}\n"
},
{
"path": "apps/docs/components/theme-provider.tsx",
"content": "'use client'\n\nimport * as React from 'react'\n\nimport { ThemeProvider as NextThemesProvider } from 'next-themes'\nimport { type ThemeProviderProps } from 'next-themes/dist/types'\n\nexport default function ThemeProvider({\n children,\n ...props\n}: ThemeProviderProps) {\n return {children}\n}\n"
},
{
"path": "apps/docs/content/CHANGELOG.mdx",
"content": "---\ntitle: Changelog\ndescription: Stay up to date on the latest changes and updates\norder: 5\n---\n\n## January 2024\n\n- We have a **CLI** tool!\n - Thanks to [@jolbol1](https://github.com/jolbol1) and [@jacobparis](https://github.com/jacobparis) for getting this set up. And to [@kentcdodds](https://github.com/kentcdodds) for kicking this off and suggesting this approach.\n - Docs and installation have been updated to show how to install components with [`@sly-cli/sly`](https://github.com/jacobparis-insiders/sly/blob/main/cli/README.md)\n- Update **React Aria Components** to `1.0.0`\n - Breadcrumb now exposes `BreadcrumbLink` to correctly handle React Aria **`Link`** within components [@Littletonconnor](https://github.com/Littletonconnor) - [#20](https://github.com/IHIutch/draft-ui/pull/20)\n - Updates to installation to show how to integrate React Aria **`Link`** with various frameworks using [`RouterProvider`](https://react-spectrum.adobe.com/react-aria/routing.html).\n - No more `'use client'` needed. React Aria handles this automatically, behind the scenes.\n- Docs and code samples were tidied up significantly\n - You can now copy directly from `bash` snippets\n - Thanks to [@itsMapleLeaf's](https://github.com/itsMapleLeaf) [suggestion](https://twitter.com/heyImMapleLeaf/status/1723216226833346848), we're now using namespaced imports from React Aria Components. This has significantly increased readability and helps keep things simple.\n- Update Tailwind to `3.4.1`\n - While there were several exciting updates in this release, we've not yet integrated things like `:has()` and `size-*`. Since this change is still fairly fresh, we're going hold off on introducing those features because, well, not changing them won't break anything.\n- Several spelling and text fixes:\n - [@henrikvtcodes](https://github.com/henrikvtcodes) - [#3](https://github.com/IHIutch/draft-ui/pull/3),\n - [@Littletonconnor](https://github.com/Littletonconnor) - [#6](https://github.com/IHIutch/draft-ui/pull/6),\n - [@Littletonconnor](https://github.com/Littletonconnor) - [#8](https://github.com/IHIutch/draft-ui/pull/18)\n\n## November 2023\n\n- Update **React Aria Components** to RC (`1.0.0-rc.0`)!\n - Breadcrumb **`Item`** becomes **`Breadcrumb`**\n - ListBox **`Item`** becomes **`ListBoxItem`**\n - Menu **`Item`** becomes **`MenuItem`**\n - GridList **`Item`** becomes **`GridListItem`**\n - Replace **`validationState`** with **`isInvalid`** for error handling\n- Add React Aria Components Tailwind config and update various classNames\n- Update Installation instructions with specific React Aria Components version\n- Update `Slider` example to destructure `state` key\n- Replaces `class-variance-authority` with [`cva@beta`](https://beta.cva.style/getting-started/whats-new/)\n - Base component styles must now be located within the `base` property:\n - Replace `cn(...)` helper function with `cx(...)` by using `CVA` config and including `twMerge`\n - Removes `clsx` as a dependency because it is now included in CVA as `cx`\n- Updated red/error colors to be WCAG compliant\n- Added additional examples to the following components:\n - `Checkbox`\n - `CheckboxGroup`\n - `ComboBox`\n - `DatePicker`\n - `DateRangePicker`\n - `Input`\n - `NumberField`\n - `Radio`\n - `RadioGroup`\n - `Select`\n - `Tabs`\n - `TextField`\n\n## September 2023\n\n- Reordered components' classNames properly\n\n## August 2023\n\n- Doc updates\n- Update React imports in components\n- Add lots of new examples and variants:\n - `Button` variants\n - `Checkbox` variants\n - `ComboBox` examples\n - `DateInput` variants\n - `Input` variants\n - `Menu` examples\n - `Meter` examples\n - `NumberField` examples\n - `Radio` variants\n - `Switch` examples\n - `Tooltip` examples\n- Fixed a bunch of component layouts\n - Add `flex-col` to `Modal`\n - Add `w-full` to `NumberField`\n - Remove verbose classes from `RadioGroup`\n - Add `w-full` to `Select`\n - Remove `h-full` from vertical `Slider` variant\n\n## July 2023\n\nUsing `react-aria-components@1.0.0-alpha.5`\n\n- We have a logo and a homepage!\n- Docs updated; content pages are live including installation\n instructions\n- Components and the rest of the site support dark mode.\n- Tabs now use `--border-width` variable to avoid issues\n with nested tabs\n"
},
{
"path": "apps/docs/content/components/breadcrumbs.mdx",
"content": "---\ntitle: Breadcrumbs\ndescription: Breadcrumbs display a hierarchy of links to the current page or resource in an application.\nisComponent: true\n---\n\n\n By default, **`BreadcrumbLink`** uses a React Aria Component **`Link`**. To ensure this navigation works as expected with your framework, be sure to follow the Configure Routing step of the Draft UI installation.\n\n\n## Installation\n\n\n \n CLI\n Copy & Paste\n \n \n ```bash title=\"bash\"\n npx @sly-cli/sly add draft-ui breadcrumbs\n ```\n \n \n \n \n\n\n## Examples\n\n\n### Default\n\nThis is an example of the default Breadcrumb component\n\n\n"
},
{
"path": "apps/docs/content/components/button.mdx",
"content": "---\ntitle: Button\ndescription: A button allows a user to perform an action, with mouse, touch, and keyboard interactions.\nisComponent: true\n---\n\n## Installation\n\n\n \n CLI\n Copy & Paste\n \n \n ```bash title=\"bash\"\n npx @sly-cli/sly add draft-ui button\n ```\n \n \n \n \n\n\n## Examples\n\n### Default\n\nThe default **`Button`** uses variant `solid` and size `md`.\n\n\n\n### Themes\n\nYou can use the `variant` prop to alter the **`Button`** theme. Variants `solid`, `outline`, `subtle`, `ghost`, `destructive`, and `link` are included by default.\n\n\n\n### Sizes\n\nYou can use the `size` prop to alter the **`Button`** size. Sizes `xs`, `sm`, `md`, and `lg` are included by default.\n\n\n\n### Disabled\n\nUse the `isDisabled` prop to make the **`Button`** disabled.\n\n\n"
},
{
"path": "apps/docs/content/components/checkbox-group.mdx",
"content": "---\ntitle: Checkbox Group\ndescription: A checkbox group allows a user to select multiple items from a list of options.\nisComponent: true\n---\n\n## Installation\n\n\n \n CLI\n Copy & Paste\n \n \n ```bash title=\"bash\"\n npx @sly-cli/sly add draft-ui checkbox-group\n ```\n \n \n \n \n\n\n## Examples\n\n### Default\n\nThe default **`CheckboxGroup`** uses orientation `vertical`.\n\n\n\n### Horizontal\n\nSet the `orientation` prop to `horizontal` to use a horizontal **`CheckboxGroup`**.\n\n\n\n### Disabled\n\nUse the `isDisabled` prop to make the entire **`CheckboxGroup`** disabled.\n\n\n"
},
{
"path": "apps/docs/content/components/checkbox.mdx",
"content": "---\ntitle: Checkbox\ndescription: A checkbox allows a user to select multiple items from a list of individual items, or to mark one individual item as selected.\nisComponent: true\n---\n\n## Installation\n\n\n \n CLI\n Copy & Paste\n \n \n ```bash title=\"bash\"\n npx @sly-cli/sly add draft-ui checkbox\n ```\n \n \n \n \n\n\n## Examples\n\n### Default\n\nThe default **`Checkbox`** uses size `md`.\n\n\n\n### Sizes\n\nYou can use the `size` prop to alter the **`Checkbox`** size. Sizes `sm`, `md`, and `lg` are included by default.\n\n\n\n### Disabled\n\nUse the `isDisabled` prop to make an individual **`Checkbox`** disabled.\n\n\n"
},
{
"path": "apps/docs/content/components/combo-box.mdx",
"content": "---\ntitle: Combo Box\ndescription: A combo box combines a text input with a listbox, allowing users to filter a list of options to items matching a query.\nisComponent: true\n---\n\n## Installation\n\n\n \n CLI\n Copy & Paste\n \n \n ```bash title=\"bash\"\n npx @sly-cli/sly add draft-ui combobox\n ```\n \n \n \n \n\n\n## Examples\n\n### Default\n\nThis is the default **`ComboBox`**\n\n\n\n### With Button\n\nAny React Aria Component **`Button`** placed inside **`ComboBox`**, will automatically toggle the appearance of **`ComboBoxContent`** when pressed.\n\n\n\n### Disabled Keys\n\nTo disable specific **`ComboBoxItem`**'s, add an array of `disabledKey`'s to **`ComboBox`**. Ensure the **`ComboBoxItem`**'s have appropriate, corresponding `id`'s.\n\n\n\n### Disabled\n\nUse the `isDisabled` prop to disable the **`ComboxInput`** altogether.\n\n\n"
},
{
"path": "apps/docs/content/components/date-picker.mdx",
"content": "---\ntitle: Date Picker\ndescription: A date picker combines a DateField and a Calendar popover to allow users to enter or select a date and time value.\nisComponent: true\n---\n\n## Installation\n\n\n \n CLI\n Copy & Paste\n \n \n ```bash title=\"bash\"\n npx @sly-cli/sly add draft-ui date-picker\n ```\n \n \n \n \n\n\n## Examples\n\n### Default\n\nThis is the default **`DatePicker`** example.\n\n\n\n### Disabled\n\nUse the `isDisabled` prop to disable the entire **`DatePicker`** including the **`DateInput`**.\n\n\n"
},
{
"path": "apps/docs/content/components/date-range-picker.mdx",
"content": "---\ntitle: Date Range Picker\ndescription: A date range picker combines two DateFields and a RangeCalendar popover to allow users to enter or select a date and time range.\nisComponent: true\n---\n\n## Installation\n\n\n \n CLI\n Copy & Paste\n \n \n ```bash title=\"bash\"\n npx @sly-cli/sly add draft-ui date-range-picker\n ```\n \n \n \n \n\n\n## Examples\n\n### Default\n\nThis is the default **`DateRangePicker`**\n\n\n\n### Disabled\n\nUse the `isDisabled` prop to disable the entire **`DateRangePicker`** including the **`DateInput`**'s.\n\n\n"
},
{
"path": "apps/docs/content/components/grid-list.mdx",
"content": "---\ntitle: Grid List\ndescription: A grid list displays a list of interactive items, with support for keyboard navigation, single or multiple selection, and row actions.\nisComponent: true\nisWip: true\nisComing: true\n---\n\n## Installation\n\n\n \n CLI\n Copy & Paste\n \n \n ```bash title=\"bash\"\n npx @sly-cli/sly add draft-ui grid-list\n ```\n \n \n \n \n\n\n## Examples\n\n### Default\n\nThis is the default example\n\n---\n\n### Disabled\n\nThis is the disabled example\n\n---\n\n### With Label\n\nThis is an example with a label\n\n---\n\n### With Text\n\nThis is an example with text\n\n---\n\n### With Input\n\nThis is an example with a input\n"
},
{
"path": "apps/docs/content/components/icon-button.mdx",
"content": "---\ntitle: Icon Button\ndescription: Displays a form input field or a component that looks like an input field.\nisComponent: true\n---\n\n## Installation\n\n\n \n CLI\n Copy & Paste\n \n \n ```bash title=\"bash\"\n npx @sly-cli/sly add draft-ui icon-button\n ```\n \n \n \n \n\n\n## Examples\n\n### Default\n\nThe default **`IconButton`** uses variant `solid` and size `md`.\n\n\n When using an **`IconButton`** you should almost always use an `aria-label`.\n In some components, however, React Aria Components will automatically assign\n an `aria-label` to buttons.\n\n\n\n\n### Themes\n\nYou can use the `variant` prop to alter the button theme. Variants `solid`, `outline`, `subtle`, `ghost`, `destructive`, and `link` are included by default.\n\n\n\n### Sizes\n\nYou can use the `size` prop to alter the button size. Sizes `xs`, `sm`, `md`, and `lg` are included by default.\n\n\n\n### Disabled\n\nUse the `isDisabled` prop to make the **`IconButton`** disabled.\n\n\n"
},
{
"path": "apps/docs/content/components/input.mdx",
"content": "---\ntitle: Input\ndescription: Displays a form input field or a component that looks like an input field.\nisComponent: true\n---\n\n\n **`Input`** is a primitive component, it is not meant to be used on it's own.\n Typically, it is used in any component that handles raw text, such as\n **`TextField`**, **`NumberField`**, **`SearchField`**, and **`ComboxBox`**.\n\n\n## Installation\n\n\n \n CLI\n Copy & Paste\n \n \n ```bash title=\"bash\"\n npx @sly-cli/sly add draft-ui input\n ```\n \n \n \n \n\n\n## Examples\n\n### Default\n\nThe default **`Input`** uses size `md`.\n\n\n\n### Size\n\nYou can use the `size` prop to alter the input size. Sizes `xs`, `sm`, `md`, and `lg` are included by default.\n\n\n\n### Disabled\n\nUse the `disabled` prop to make the **`Input`** disabled.\n\n\n Currently, the **`Input`** component uses the `disabled` prop rather than `isDisabled`.\n\n\n\n"
},
{
"path": "apps/docs/content/components/label.mdx",
"content": "---\ntitle: Label\ndescription: Displays a form input field or a component that looks like an input field.\nisComponent: true\n---\n\n\n **`Label`** is a primitive component, it is not meant to be used on it's own.\n Many components that behave as form inputs automatically handle linking labels\n to their respective inputs, such as **`DatePicker`**, **`RadioGroup`**,\n **`Select`**, **`TextField`**, **`Switch`**, etc.\n\n\n## Installation\n\n\n \n CLI\n Copy & Paste\n \n \n ```bash title=\"bash\"\n npx @sly-cli/sly add draft-ui label\n ```\n \n \n \n \n\n\n## Examples\n\n### Default\n\nThis is the default **`Label`**\n\n\n"
},
{
"path": "apps/docs/content/components/menu.mdx",
"content": "---\ntitle: Menu\ndescription: A menu displays a list of actions or options that a user can choose.\nisComponent: true\n---\n\n## Installation\n\n\n \n CLI\n Copy & Paste\n \n \n ```bash title=\"bash\"\n npx @sly-cli/sly add draft-ui menu\n ```\n \n \n \n \n\n\n## Examples\n\n### Default\n\nThis is the default **`Menu`** example.\n\n\n\n### Disabled\n\nMake specific **`MenuItem`**'s disabled by adding their `id` to the **`MenuContent`**'s `disabledKeys` prop.\n\n\n\n### With Sections\n\nAdd sections to the menu by using **`MenuSection`** and **`MenuHeader`**.\n\n\n\n### As Checkbox List\n\n**`MenuItem`** can act checkboxes by setting the **`MenuContent`**'s `selectionMode` prop to `multiple`.\n\n\n\n### As Radio List\n\n**`MenuItem`** can act radios by setting the **`MenuContent`**'s `selectionMode` prop to `single`.\n\n\n\n### Complex Menu Items\n\n**Coming Soon**: An example showing how to properly create **`MenuItem`**s with complex content.\n"
},
{
"path": "apps/docs/content/components/meter.mdx",
"content": "---\ntitle: Meter\ndescription: A meter represents a quantity within a known range, or a fractional value.\nisComponent: true\n---\n\n## Installation\n\n\n \n CLI\n Copy & Paste\n \n \n ```bash title=\"bash\"\n npx @sly-cli/sly add draft-ui meter\n ```\n \n \n \n \n\n\n## Examples\n\n\n Althought similar to **`ProgressBar`**, **`Meter`** is used to represent an\n amount or quantity. For example: Storage space, download speed, or battery\n life.\n\n\n### Default\n\nThis is the default **`Meter`**\n\n\n\n### With Custom Children\n\n{/* TODO */}\n\n**Coming soon:** An example of **`Meter`** with custom children\n"
},
{
"path": "apps/docs/content/components/modal.mdx",
"content": "---\ntitle: Modal\ndescription: A modal is an overlay element which blocks interaction with elements outside it.\nisComponent: true\n---\n\n## Installation\n\n\n \n CLI\n Copy & Paste\n \n \n ```bash title=\"bash\"\n npx @sly-cli/sly add draft-ui modal\n ```\n \n \n \n \n\n\n## Examples\n\n### Default\n\nThe default **`Modal`** uses size `md`.\n\n\n\n### Sizes\n\nYou can use the `size` prop to alter the button size. Sizes `xs`, `sm`, `md`, `lg`, `xl`, and `full` are included by default.\n\n\n\n### Set Autofocus\n\nYou can manually control which element recieves focus when the **`Modal`** opens by setting `autoFocus` on a focusable element.\n\n\n\n### Dismissable\n\nModals are dismissable by clicking outside by default or by pressing the Esc key. To prevent this, set `isDismissable` to `false` and/or `isKeyboardDismissDisabled` to `true`.\n\n\n"
},
{
"path": "apps/docs/content/components/number-field.mdx",
"content": "---\ntitle: Number Field\ndescription: A number field allows a user to enter a number, and increment or decrement the value using stepper buttons.\nisComponent: true\n---\n\n## Installation\n\n\n \n CLI\n Copy & Paste\n \n \n ```bash title=\"bash\"\n npx @sly-cli/sly add draft-ui number-field\n ```\n \n \n \n \n\n\n## Examples\n\n### Default\n\nThis is the default **`NumberField`**\n\n\n\n### With Stepper\n\nThis is an example using the built-in **`NumberInputStepper`**.\n\n\n\n### With Mobile Stepper\n\nThis is an example of a custom **`NumberField`** that makes the stepper buttons easier to press on touch devices.\n\n\n\n### Disabled\n\nUse the `isDisabled` prop to make the **`NumberField`** disabled.\n\n\n"
},
{
"path": "apps/docs/content/components/progress-bar.mdx",
"content": "---\ntitle: Progress Bar\ndescription: Progress bars show either determinate or indeterminate progress of an operation over time.\nisComponent: true\n---\n\n## Installation\n\n\n \n CLI\n Copy & Paste\n \n \n ```bash title=\"bash\"\n npx @sly-cli/sly add draft-ui progress-bar\n ```\n \n \n \n \n\n\n## Examples\n\n\n Althought similar to **`Meter`**, **`ProgressBar`** is used to represent\n progress. In other words, it would typically be used in circumstances that\n start at zero and tend toward completion. For example: Loading progress,\n download progress, or battery charge progress.\n\n\n### Default\n\nThis is the default **`ProgressBar`**\n\n\n\n### With Custom Children\n\n{/* TODO */}\n\n**Coming soon:** This is an example with custom children\n"
},
{
"path": "apps/docs/content/components/radio-group.mdx",
"content": "---\ntitle: Radio Group\ndescription: A radio group allows a user to select a single item from a list of mutually exclusive options.\nisComponent: true\n---\n\n## Installation\n\n\n \n CLI\n Copy & Paste\n \n \n ```bash title=\"bash\"\n npx @sly-cli/sly add draft-ui radio-group\n ```\n \n \n \n \n\n\n## Examples\n\n### Default\n\nThe default **`RadioGroup`** uses orientation `vertical`.\n\n\n\n### Horizontal\n\nSet the `orientation` prop to `horizontal` to use a horizontal **`RadioGroup`**.\n\n\n\n### Disabled\n\nUse the `isDisabled` prop to make the entire **`RadioGroup`** disabled.\n\n\n"
},
{
"path": "apps/docs/content/components/radio.mdx",
"content": "---\ntitle: Radio\ndescription: Displays a form input field or a component that looks like an input field.\nisComponent: true\n---\n\n## Installation\n\n\n \n CLI\n Copy & Paste\n \n \n ```bash title=\"bash\"\n npx @sly-cli/sly add draft-ui radio\n ```\n \n \n \n \n\n\n## Examples\n\n\n **`Radio`** is a primitive component, it is not meant to be used on it's own. It must be wrapped in a **`RadioGroup`**.\n\n\n### Default\n\nThe default **`Radio`** uses size `md`.\n\n\n\n### Sizes\n\nYou can use the `size` prop to alter the **`Radio`** size. Sizes `sm`, `md`, and `lg` are included by default.\n\n\n\n### Disabled\n\nUse the `isDisabled` prop to make an individual **`Radio`** disabled.\n\n\n"
},
{
"path": "apps/docs/content/components/search-field.mdx",
"content": "---\ntitle: Search Field\ndescription: A search field allows a user to enter and clear a search query.\nisComponent: true\n---\n\n## Installation\n\n\n \n CLI\n Copy & Paste\n \n \n ```bash title=\"bash\"\n npx @sly-cli/sly add draft-ui search-field\n ```\n \n \n \n \n\n\n## Examples\n\n### Default\n\nThis is the default **`SearchField`**\n\n\n\n### With Clear Button\n\nUse **`SearchFieldClearButton`** to display a button that clear the **`SearchField`** input. By default, it will only show up when the input is not empty.\n\n\n"
},
{
"path": "apps/docs/content/components/select.mdx",
"content": "---\ntitle: Select\ndescription: A select displays a collapsible list of options and allows a user to select one of them.\nisComponent: true\n---\n\n## Installation\n\n\n \n CLI\n Copy & Paste\n \n \n ```bash title=\"bash\"\n npx @sly-cli/sly add draft-ui select\n ```\n \n \n \n \n\n\n## Examples\n\n### Default\n\nThis is the default **`Select`**.\n\n\n\n### Disabled\n\nUse the `isDisabled` prop to make the **`Select`** disabled.\n\n\n"
},
{
"path": "apps/docs/content/components/slider.mdx",
"content": "---\ntitle: Slider\ndescription: A slider allows a user to select one or more values within a range.\nisComponent: true\n---\n\n## Installation\n\n\n \n CLI\n Copy & Paste\n \n \n ```bash title=\"bash\"\n npx @sly-cli/sly add draft-ui slider\n ```\n \n \n \n \n\n\n## Examples\n\n### Default\n\nThe default **`Slider`** uses orientation `horizontal`.\n\n\n\n### Vertical\n\nSet the `orientation` prop to `vertical` to use a vertical **`Slider`**.\n\n\n `orientation` value passed to **`SliderFilledTrack`** must be set to `vertical` and you must give **`SliderTrack`** a specific height for this variation to be styled correctly.\n\n\n\n"
},
{
"path": "apps/docs/content/components/switch.mdx",
"content": "---\ntitle: Switch\ndescription: A text field allows a user to enter a plain text value with a keyboard.\nisComponent: true\n---\n\n## Installation\n\n\n \n CLI\n Copy & Paste\n \n \n ```bash title=\"bash\"\n npx @sly-cli/sly add draft-ui switch\n ```\n \n \n \n \n\n\n## Examples\n\n### Default\n\nThe default **`Switch`** uses size `md`.\n\n\n\n### Alignment\n\nSwitches can be either left or right aligned.\n\n\n\n### Sizes\n\nYou can use the `size` prop to alter the **`Switch`** size. Sizes `sm`, `md`, and `lg` are included by default.\n\n\n\n### Disabled\n\nUse the `isDisabled` prop to make the **`Switch`** disabled.\n\n\n"
},
{
"path": "apps/docs/content/components/table.mdx",
"content": "---\ntitle: Table\ndescription: A table displays data in rows and columns and enables a user to navigate its contents via directional navigation keys, and optionally supports row selection and sorting.\nisComponent: true\nisWip: true\nisComing: true\n---\n\n## Installation\n\n\n \n CLI\n Copy & Paste\n \n \n ```bash title=\"bash\"\n npx @sly-cli/sly add draft-ui table\n ```\n \n \n \n \n\n\n## Examples\n\n### Default\n\nThis is the default example\n\n---\n\n### Disabled\n\nThis is the disabled example\n\n---\n\n### With Label\n\nThis is an example with a label\n\n---\n\n### With Text\n\nThis is an example with text\n\n---\n\n### With Input\n\nThis is an example with a input\n"
},
{
"path": "apps/docs/content/components/tabs.mdx",
"content": "---\ntitle: Tabs\ndescription: Tabs organize content into multiple sections and allow users to navigate between them.\nisComponent: true\n---\n\n## Installation\n\n\n \n CLI\n Copy & Paste\n \n \n ```bash title=\"bash\"\n npx @sly-cli/sly add draft-ui tabs\n ```\n \n \n \n \n\n\n## Examples\n\n### Default\n\nThe default **`Tabs`** uses orientation `horizontal`.\n\n\n\n### Vertical\n\nSet the `orientation` prop to `vertical` to use vertical **`Tabs`**.\n\n\n\n### Disabled Keys\n\nUse `disabledKeys` prop to disable specific **`Tab`**'s **`ComboBox`**.\n\n\n\n### Disabled\n\nUse the `isDisabled` prop to disable all **`Tab`**'s.\n\n\n"
},
{
"path": "apps/docs/content/components/text-field.mdx",
"content": "---\ntitle: Text Field\ndescription: Displays a form input field or a component that looks like an input field.\nisComponent: true\n---\n\n## Installation\n\n\n \n CLI\n Copy & Paste\n \n \n ```bash title=\"bash\"\n npx @sly-cli/sly add draft-ui text-field\n ```\n \n \n \n \n\n\n## Examples\n\n### Default\n\nThis is the default **`TextField`**.\n\n\n\n### With Error\n\nUse the `isInvalid` prop to make an **`Input`** invalid. You can also include an error message to tell users why the `input` is invalid.\n\n\n\n### Disabled\n\nUse the `isDisabled` prop to make the **`Input`** disabled.\n\n\n"
},
{
"path": "apps/docs/content/components/toggle-button.mdx",
"content": "---\ntitle: Toggle Button\ndescription: A toggle button allows a user to toggle a selection on or off, for example switching between two states or modes.\nisComponent: true\nisWip: true\nisComing: true\n---\n\n## Installation\n\n\n \n CLI\n Copy & Paste\n \n \n ```bash title=\"bash\"\n npx @sly-cli/sly add draft-ui toggle-button\n ```\n \n \n \n \n\n\n## Examples\n\n### Default\n\n**Coming soon:** This is the default example\n\n{/* TODO */}\n\n---\n\n### Disabled\n\n**Coming soon:** This is the disabled example\n\n{/* TODO */}\n"
},
{
"path": "apps/docs/content/components/tooltip.mdx",
"content": "---\ntitle: Tooltip\ndescription: A tooltip displays a description of an element on hover or focus.\nisComponent: true\n---\n\n## Installation\n\n\n \n CLI\n Copy & Paste\n \n \n ```bash title=\"bash\"\n npx @sly-cli/sly add draft-ui tooltip\n ```\n \n \n \n \n\n\n## Examples\n\n### Default\n\nThe default **`Tooltip`** uses placement `top`.\n\n\n\n### Placement\n\nSet the `placement` prop to change the default **`Tooltip`** placement.\n\n\n"
},
{
"path": "apps/docs/content/getting-started/about.mdx",
"content": "---\ntitle: About\ndescription: The purpose of Draft UI is to make building accessible applications\n faster and easier than ever\norder: 4\n---\n\n## Make It Your Own\n\nI've intentionally avoided using the Tailwind config and\narbitrary values as much as possible. While you are welcome to copy\nand paste these components and use them in your projects as-is, the\ngoal of this project is to get your projects up and running as quickly\nas possible without having to worry about accessibility and\ninteractivity.\n\n## Special Thanks\n\nThere are many OSS projects who have inspired and power the backbone\nof this project. This project is a combination of other folks really\nhard work so I'd like to recognize and thank them:\n\n- [shadcn/ui](https://ui.shadcn.com): Without the inspiration of shadcn/ui, this project would not\n exist. The idea to create a beautiful, copy and paste library\n opened my eyes on how to make a useful tool without having to\n worry about bundling, distribution, and a bunch of other things I\n don't know much about.\n\n- [React Aria Components](https://react-spectrum.adobe.com/react-aria/react-aria-components.html): The backbone of this project. I consider React Aria to be the de\n facto accessibility library on the web. Creating React Aria\n Components has made it easier than ever to build UI that is\n functional and accessible to all users.\n\n I'd especially like to acknowledge [@devongovett](https://twitter.com/devongovett)\n who has been representing React Aria on Twitter and has been very\n communicative about the team's progress and quick to respond\n to feedback.\n\n- [Chakra UI](): Although not directly involved with this project, I leveraged\n many of their styling decisions where I wanted additional\n flexibility with components. I also heavily relied on their naming\n to conventions to compose components.\n\n I've also been heavily combing through their repo to better\n understand how their Storybook and Docs are working together.\n"
},
{
"path": "apps/docs/content/getting-started/cli.mdx",
"content": "---\ntitle: CLI\ndescription: Get started using Draft UI faster than ever by installing components right from the command line\nisNew: true\norder: 3\n---\n\n## Install Sly CLI\n\nYou're able to install Draft UI components from the command line thanks to an awesome project by [Jacob Paris](https://twitter.com/jacobmparis), [`@sly-cli/sly`](https://sly-cli.fly.dev/).\n\nRun the following code to add Draft UI to your project. **`sly`** will show you a list of components available to download.\n\n```bash title=\"bash\"\nnpx @sly-cli/sly add draft-ui\n```\n\n## Configuration\n\n**`@sly-cli/sly`** let's you configure some specific settings about how you want to install components from the CLI. Assuming you've followed the initial Draft UI installation instructions, this is what your `sly.json` should look like.\n\n```json title=\"sly.json\"\n{\n \"$schema\": \"https://sly-cli.fly.dev/registry/config.json\",\n \"libraries\": [\n {\n \"name\": \"draft-ui\",\n \"directory\": \"./components\",\n \"transformers\": [\"transform-sly-install.ts\"], // optional, otherwise leave empty\n \"postinstall\": [],\n }\n ]\n}\n```\n\nOf course, if you've made your own customizations, you should update your `sly.json` to match those changes.\n\n## Transformers\n\n**`sly`** also allows you to manipulate how you install your components via transformers.\n\nIn order to use transformers, you'll need to install **`sly`** into your project:\n```bash title=\"bash\"\nnpm install -D @sly-cli/sly\n```\n\nFor example, if you're using a different path alias for your directories, overwrite the default values automatically.\n\n```ts title=\"transform-sly-install.ts\"\nconst cvaConfig = '@/lib/cva.config'\n\n/**\n * @type {import('@sly-cli/sly/dist').Transformer}\n */\nexport default async function transformSlyInstall(input: string) {\n input = input.replace('@/lib/cva.config', cvaConfig)\n\n return input\n}\n```\n\nFor additional information on tranformers, go to the [`@sly-cli/sly` repo](https://github.com/jacobparis-insiders/sly/blob/main/cli/README.md#transformers).\n"
},
{
"path": "apps/docs/content/getting-started/installation.mdx",
"content": "---\ntitle: Installation\ndescription: Here's everything you need to get started\norder: 2\n---\n\n\n\n\n## Install TailwindCSS\n\nDepending on your project, steps to install Tailwind may vary.\nCheck out [their installation page](https://tailwindcss.com/docs/installation/framework-guides) for guidance.\n\n\n\n## Install Required Dependencies\n\n```bash title=\"bash\"\nnpm install react-aria-components@1.0.0 cva@beta tailwind-merge tailwindcss-animate tailwindcss-react-aria-components@1.0.0\n```\n\nThis project requires the following packages:\n\n- [react-aria-components@1.0.0](https://github.com/adobe/react-spectrum/tree/main/packages/react-aria-components)\n- [cva@beta](https://github.com/joe-bell/cva)\n- [tailwind-merge](https://github.com/dcastil/tailwind-merge)\n- [tailwindcss-animate](https://github.com/jamiebuilds/tailwindcss-animate)\n- [tailwindcss-react-aria-components@1.0.0](https://github.com/adobe/react-spectrum/tree/main/packages/tailwindcss-react-aria-components)\n\n\n\n## Install Icons\n\nDraft UI uses [Lucide Icons](https://lucide.dev/guide/packages/lucide-react) by default. You can use whichever library you prefer, but\nyou'll need to replace the default icons manually.\n\n```bash title=\"bash\"\nnpm install lucide-react\n```\n\n\n\n## Configure Path Aliases\n\nDraft UI uses the path alias @/\\* by default. If you\nwant to use a different alias, you'll need to update your\ncomponents.\n\n```json {3-6} title=\"tsconfig.json\"\n// ...\n{\n \"compilerOptions\": {\n \"baseUrl\": \".\",\n \"paths\": {\n \"@/*\": [\"./*\"]\n }\n }\n}\n// ...\n```\n\n\n\n## Configure Tailwind\n\nMake sure to include the `tailwindcss-animate` plugin.\n\n```js title=\"tailwind.config.js\"\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n darkMode: ['class'],\n content: ['app/**/*.{ts,tsx}', 'components/**/*.{ts,tsx}'],\n plugins: [\n require('tailwindcss-animate'),\n require('tailwindcss-react-aria-components'),\n ],\n}\n```\n\n\n\n## Configure CVA\n\nAdd **`twMerge`** to your `cva.config.ts`. This way, anytime you use the `cx(...)` function any conflicting Tailwind classes will be gracefully resolved.\n\n```ts title=\"cva.config.ts\"\nimport { defineConfig } from 'cva'\nimport { twMerge } from 'tailwind-merge'\n\nexport const { cva, cx, compose } = defineConfig({\n hooks: {\n onComplete: (className) => twMerge(className),\n },\n})\n```\n\n\n\n## Configure Routing (recommended)\nMany components use built-in **`Link`** components to handle navigation. By default, these links perform native browser navigation when they are interacted with.\n\nIn order for these links to work as expected with whichever framework you're using, wrap your application using React Aria's `RouterProvider` component.\n\n\n \n Next.js App\n Next.js Pages\n Remix\n React Router\n \n \n ```tsx title=\"app/provider.tsx\"\n 'use client'\n\n import { useRouter } from 'next/navigation'\n import { RouterProvider } from 'react-aria-components'\n\n export function ClientProviders({ children }) {\n const router = useRouter()\n\n return (\n \n {children}\n \n )\n }\n ```\n\n ```tsx title=\"app/layout.tsx\"\n import { ClientProviders } from './provider';\n\n export default function RootLayout({ children }) {\n return (\n \n \n {children}\n \n \n );\n }\n ```\n \n \n ```tsx title=\"pages/_app.tsx\"\n import type { AppProps } from 'next/app'\n import { useRouter } from 'next/router'\n import { RouterProvider } from 'react-aria-components'\n\n export default function MyApp({ Component, pageProps }: AppProps) {\n let router = useRouter()\n\n return (\n \n \n \n )\n }\n ```\n \n \n ```tsx title=\"app/root.tsx\"\n import { useNavigate, Outlet } from '@remix-run/react'\n import { RouterProvider } from 'react-aria-components'\n\n export default function App() {\n let navigate = useNavigate()\n\n return (\n \n \n {/* ... */}\n \n \n \n \n \n {/* ... */}\n \n \n )\n }\n ```\n \n \n ```tsx\n import { BrowserRouter, useNavigate } from 'react-router-dom'\n import { RouterProvider } from 'react-aria-components'\n\n function App() {\n let navigate = useNavigate()\n\n return (\n \n {/* Your app here... */}\n \n } />\n {/* ... */}\n \n \n )\n }\n\n \n \n \n ```\n \n\n\nFor more information, go to the React Aria [Client Side Routing](https://react-spectrum.adobe.com/react-aria/routing.html).\n\n\n\n\n\n## Configure @sly-cli/sly (optional)\n\nIf your installation varies from any of the configs described above (like if your components are in a different location) you'll want to update your `sly.json` to make sure your CLI installs work correctly.\n\nGo to the CLI page to learn more.\n\n\n\n## All Done!\n\nNow you're ready to start building your application!\n\n\n\n"
},
{
"path": "apps/docs/content/getting-started/introduction.mdx",
"content": "---\ntitle: Introduction\ndescription: Copy and paste-able components built with React Aria Components and\n Tailwind CSS\norder: 1\n---\n\nDraft UI has been massively inspired by **`shadcn/ui`** so I encourage you to take a look at [their introduction page](https://ui.shadcn.com/docs).\n\n---\n\nLong story short, Draft UI follows all the same ideals:\n\n- Copy and paste components give you full control over the component\n code, it is yours to use.\n- Modify and adapt to your hearts content, using these docs as a\n starting point.\n- These components should be able to be used in any framework that\n supports React.\n- Draft UI is free to use on any personal or commercial projects.\n And if you do, [let me know!](https://twitter.com/draft__ui)\n"
},
{
"path": "apps/docs/contentlayer.config.ts",
"content": "import { defineDocumentType, makeSource } from 'contentlayer/source-files'\n// @ts-ignore\nimport toc from 'markdown-toc'\nimport rehypePrettyCode from 'rehype-pretty-code'\nimport remarkGfm from 'remark-gfm'\nimport { visit } from 'unist-util-visit'\n\nimport { rehypeComponent } from './lib/rehype-component'\nimport { withTableOfContents } from './lib/remark/with-table-of-contents'\nimport { type TocItemProps } from './types'\n\nexport const ComponentDocument = defineDocumentType(() => ({\n name: 'ComponentDocument',\n filePathPattern: 'components/**/*.mdx',\n contentType: 'mdx',\n fields: {\n title: {\n type: 'string',\n required: true,\n },\n description: {\n type: 'string',\n },\n isComponent: {\n type: 'boolean',\n },\n isWip: {\n type: 'boolean',\n },\n isComing: {\n type: 'boolean',\n },\n },\n computedFields: {\n slug: {\n type: 'string',\n resolve: (post) => `/docs/${post._raw.flattenedPath}`,\n },\n toc: {\n type: 'json',\n resolve: (doc): TocItemProps => toc(doc.body.raw, { maxdepth: 3 }).json,\n },\n },\n}))\n\nexport const GeneralDocument = defineDocumentType(() => ({\n name: 'GeneralDocument',\n filePathPattern: 'getting-started/**/*.mdx',\n contentType: 'mdx',\n fields: {\n title: {\n type: 'string',\n required: true,\n },\n description: {\n type: 'string',\n required: true,\n },\n isNew: {\n type: 'boolean',\n },\n order: {\n type: 'number',\n required: true,\n },\n },\n computedFields: {\n slug: {\n type: 'string',\n resolve: (post) => `/${post._raw.flattenedPath}`,\n },\n toc: {\n type: 'json',\n resolve: (doc): TocItemProps => toc(doc.body.raw, { maxdepth: 3 }).json,\n },\n },\n}))\n\nexport const ChangelogDocument = defineDocumentType(() => ({\n name: 'ChangelogDocument',\n filePathPattern: 'CHANGELOG.mdx',\n contentType: 'mdx',\n fields: {\n title: {\n type: 'string',\n required: true,\n },\n description: {\n type: 'string',\n required: true,\n },\n order: {\n type: 'number',\n required: true,\n },\n },\n computedFields: {\n slug: {\n type: 'string',\n resolve: () => '/changelog',\n },\n toc: {\n type: 'json',\n resolve: (doc): TocItemProps => toc(doc.body.raw, { maxdepth: 2 }).json,\n },\n },\n}))\n\nexport default makeSource({\n contentDirPath: 'content',\n documentTypes: [ComponentDocument, ChangelogDocument, GeneralDocument],\n mdx: {\n rehypePlugins: [\n rehypeComponent,\n () => (tree) => {\n visit(tree, (node) => {\n if (node?.type === 'element' && node?.tagName === 'pre') {\n const [codeEl] = node.children\n if (codeEl.tagName !== 'code') {\n return\n }\n\n if (codeEl.data?.meta) {\n // Extract event from meta and pass it down the tree.\n const regex = /event=\"([^\"]*)\"/\n const match = codeEl.data?.meta.match(regex)\n if (match) {\n node.__event__ = match ? match[1] : null\n codeEl.data.meta = codeEl.data.meta.replace(regex, '')\n }\n }\n\n node.__rawString__ = codeEl.children?.[0].value\n node.__src__ = node.properties?.__src__\n node.__style__ = node.properties?.__style__\n }\n })\n },\n [\n // @ts-expect-error related: https://github.com/atomiks/rehype-pretty-code/issues/145\n rehypePrettyCode,\n {\n theme: 'dracula',\n onVisitLine(node) {\n // Prevent lines from collapsing in `display: grid` mode, and allow empty\n // lines to be copy/pasted\n if (node.children.length === 0) {\n node.children = [{ type: 'text', value: ' ' }]\n }\n },\n onVisitHighlightedLine(node) {\n node.properties?.className?.push('line--highlighted')\n },\n onVisitHighlightedWord(node) {\n node.properties.className = ['word--highlighted']\n },\n },\n ],\n () => (tree) => {\n visit(tree, (node) => {\n if (node?.type === 'element' && node?.tagName === 'figure') {\n if (!('data-rehype-pretty-code-figure' in node.properties)) {\n return\n }\n\n // Pass code snippet to figure wrapper\n if (node.__rawString__) {\n node.properties['__rawString__'] = node.__rawString__\n }\n\n // npm install\n if (node.__rawString__?.startsWith('npm install')) {\n const npmCommand = node.__rawString__\n node.properties['__npmCommand__'] = npmCommand\n node.properties['__yarnCommand__'] = npmCommand.replace(\n 'npm install',\n 'yarn add',\n )\n node.properties['__pnpmCommand__'] = npmCommand.replace(\n 'npm install',\n 'pnpm add',\n )\n node.properties['__niCommand__'] = npmCommand.replace(\n 'npm install',\n 'ni',\n )\n }\n\n // npx\n if (node.__rawString__?.startsWith('npx')) {\n const npmCommand = node.__rawString__\n node.properties['__npmCommand__'] = npmCommand\n node.properties['__yarnCommand__'] = npmCommand\n node.properties['__pnpmCommand__'] = npmCommand.replace(\n 'npx',\n 'pnpm dlx',\n )\n node.properties['__niCommand__'] = npmCommand.replace(\n 'npx',\n 'nlx',\n )\n }\n }\n })\n },\n ],\n remarkPlugins: [remarkGfm, withTableOfContents],\n },\n})\n"
},
{
"path": "apps/docs/lib/cva.config.ts",
"content": "import { defineConfig } from 'cva'\nimport { twMerge } from 'tailwind-merge'\n\nexport const { cva, cx, compose } = defineConfig({\n hooks: {\n onComplete: (className) => twMerge(className),\n },\n})\n"
},
{
"path": "apps/docs/lib/rehype-component.ts",
"content": "import fs from 'fs'\nimport path from 'path'\n\nimport { u } from 'unist-builder'\nimport { visit } from 'unist-util-visit'\n\nimport { type UnistNode, type UnistTree } from '@/types'\n\nimport { Index } from '../__registry__'\n\nexport function rehypeComponent() {\n return async (tree: UnistTree) => {\n visit(tree, (node: UnistNode) => {\n if (node.name === 'ComponentSource') {\n const src = getNodeAttributeByName(node, 'src')?.value as string\n if (!src) {\n return null\n }\n\n try {\n // Read the source file.\n const filePath = path.join(process.cwd(), src)\n let source = fs.readFileSync(filePath, 'utf8')\n source = source.replaceAll('export default', 'export')\n\n node.children?.push(\n u('element', {\n tagName: 'pre',\n properties: {\n __src__: src,\n },\n children: [\n u('element', {\n tagName: 'code',\n properties: {\n className: ['language-tsx'],\n },\n children: [\n {\n type: 'text',\n value: source,\n },\n ],\n }),\n ],\n }),\n )\n } catch (error) {\n console.error(error)\n }\n }\n\n if (node.name === 'ComponentExample') {\n const name = getNodeAttributeByName(node, 'name')?.value as string\n const story = getNodeAttributeByName(node, 'story')?.value as string\n\n if (!name || !story) {\n console.log('❌ name or story prop not passed on ComponentExample')\n return null\n }\n\n try {\n const component = Index[name][story]\n const src = component.file\n\n // Read the source file.\n const filePath = path.join(process.cwd(), src)\n let source = fs.readFileSync(filePath, 'utf8')\n source = source.replaceAll('export default', 'export')\n\n node.children?.push(\n u('element', {\n tagName: 'pre',\n properties: {\n __src__: src,\n },\n children: [\n u('element', {\n tagName: 'code',\n properties: {\n className: ['language-tsx'],\n },\n children: [\n {\n type: 'text',\n value: source,\n },\n ],\n }),\n ],\n }),\n )\n } catch (error) {\n console.error(error)\n }\n }\n })\n }\n}\n\nfunction getNodeAttributeByName(node: UnistNode, name: string) {\n return node.attributes?.find((attribute) => attribute.name === name)\n}\n"
},
{
"path": "apps/docs/lib/remark/with-table-of-contents.ts",
"content": "import Slugger from 'github-slugger'\nimport { toString } from 'hast-util-to-string'\nimport { visit } from 'unist-util-visit'\n\nexport function withTableOfContents() {\n const slugs = new Slugger()\n return (tree) => {\n visit(tree, 'heading', (node) => {\n node.data = node.data || {}\n node.data = { hName: 'Heading' }\n\n node.data.hProperties = node.data.hProperties || {}\n node.data.hProperties.lvl = node.depth\n node.data.hProperties.slug = slugs.slug(toString(node))\n })\n }\n}\n"
},
{
"path": "apps/docs/next.config.js",
"content": "// eslint-disable-next-line @typescript-eslint/no-var-requires\nconst { withContentlayer } = require('next-contentlayer')\n\n/** @type {import('next').NextConfig} */\nconst nextConfig = {\n experimental: {\n typedRoutes: true,\n },\n reactStrictMode: true,\n transpilePackages: ['ui'],\n redirects() {\n return [\n {\n source: '/docs/components',\n destination: '/docs/components/breadcrumbs',\n permanent: true,\n },\n // Old Links\n {\n source: '/getting-started',\n destination: '/getting-started/introduction',\n permanent: true,\n },\n {\n source: '/docs/introduction',\n destination: '/getting-started/introduction',\n permanent: true,\n },\n {\n source: '/docs/installation',\n destination: '/getting-started/installation',\n permanent: true,\n },\n {\n source: '/docs/about',\n destination: '/getting-started/about',\n permanent: true,\n },\n {\n source: '/docs/changelog',\n destination: '/changelog',\n permanent: true,\n },\n ]\n },\n}\n\nmodule.exports = withContentlayer(nextConfig)\n"
},
{
"path": "apps/docs/package.json",
"content": "{\n \"name\": \"docs\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"main\": \"src/index.ts\",\n \"types\": \"src/index.ts\",\n \"scripts\": {\n \"dev\": \"rm -rf .next & rm -rf .contentlayer && contentlayer build && next dev\",\n \"build\": \"contentlayer build && next build\",\n \"start\": \"next start\",\n \"lint\": \"eslint --ignore-path .gitignore '**/*.{js,jsx,cjs,mjs,ts,tsx,json}'\",\n \"typecheck\": \"tsc --noEmit --pretty\"\n },\n \"dependencies\": {\n \"@docsearch/react\": \"^3.4.0\",\n \"@vercel/analytics\": \"^1.0.1\",\n \"contentlayer\": \"0.3.4\",\n \"fathom-client\": \"^3.5.0\",\n \"fs-extra\": \"11.1.1\",\n \"gray-matter\": \"^4.0.3\",\n \"hast-util-to-string\": \"^3.0.0\",\n \"lucide-react\": \"^0.259.0\",\n \"markdown-toc\": \"^1.2.0\",\n \"next\": \"14.0.4\",\n \"next-contentlayer\": \"0.3.4\",\n \"next-themes\": \"^0.2.1\",\n \"react\": \"18.2.0\",\n \"react-aria-components\": \"1.0.0\",\n \"react-dom\": \"18.2.0\",\n \"react-stately\": \"^3.21.0\",\n \"rehype-pretty-code\": \"^0.12.3\",\n \"remark-gfm\": \"^3.0.1\",\n \"shikiji\": \"^0.9.0\",\n \"tailwind-merge\": \"^1.13.2\",\n \"ui\": \"workspace:*\",\n \"unist-util-visit\": \"^5.0.0\"\n },\n \"devDependencies\": {\n \"@tailwindcss/typography\": \"^0.5.9\",\n \"@types/node\": \"18.16.19\",\n \"@types/react\": \"18.0.27\",\n \"@types/react-dom\": \"18.0.10\",\n \"@types/unist\": \"^3.0.2\",\n \"autoprefixer\": \"^10.4.14\",\n \"eslint\": \"^8.56.0\",\n \"eslint-config-custom\": \"workspace:*\",\n \"eslint-plugin-mdx\": \"^2.3.2\",\n \"postcss\": \"^8.4.23\",\n \"postcss-config\": \"workspace:*\",\n \"tailwind-config\": \"workspace:*\",\n \"tailwindcss\": \"^3.4.1\",\n \"ts-config\": \"workspace:*\",\n \"ts-pattern\": \"^5.0.6\",\n \"typescript\": \"^5.1.6\",\n \"unist-builder\": \"^4.0.0\"\n }\n}\n"
},
{
"path": "apps/docs/postcss.config.js",
"content": "/** @type {import('postcss').Config} */\nmodule.exports = require('postcss-config/postcss.config.cjs')\n"
},
{
"path": "apps/docs/public/site.webmanifest",
"content": "{\"name\":\"\",\"short_name\":\"\",\"icons\":[{\"src\":\"/android-chrome-192x192.png\",\"sizes\":\"192x192\",\"type\":\"image/png\"},{\"src\":\"/android-chrome-512x512.png\",\"sizes\":\"512x512\",\"type\":\"image/png\"}],\"theme_color\":\"#ffffff\",\"background_color\":\"#ffffff\",\"display\":\"standalone\"}"
},
{
"path": "apps/docs/registry/breadcrumbs/default.tsx",
"content": "import { ChevronRight } from 'lucide-react'\nimport { BreadcrumbItem, BreadcrumbLink, Breadcrumbs } from 'ui'\n\nexport default function Default() {\n return (\n \n }>\n Home\n \n }>\n React Aria\n \n \n useBreadcrumbs\n \n \n )\n}"
},
{
"path": "apps/docs/registry/button/default.tsx",
"content": "import { Button } from 'ui'\n\nexport default function Default() {\n return \n}"
},
{
"path": "apps/docs/registry/button/disabled.tsx",
"content": "import { Button } from 'ui'\n\nexport default function Disabled() {\n return (\n
\n \n \n \n \n \n \n
\n )\n}"
},
{
"path": "apps/docs/registry/button/sizes.tsx",
"content": "import { Button } from 'ui'\n\nexport default function Sizes() {\n return (\n
\n \n \n \n \n
\n )\n}"
},
{
"path": "apps/docs/registry/button/theme.tsx",
"content": "import { Button } from 'ui'\n\nexport default function Theme() {\n return (\n