wip

components/docs/overlays/sheet/sheet-menu-demo.tsx

@@ -105,7 +105,7 @@ export default function SheetMenuDemo() {
                   <IconBrandCopilot /> Your Copilot
                 </Menu.Item>
                 <Menu.Item>
-                  <IconChart /> Your projects
+                  <IconChartBar /> Your projects
                 </Menu.Item>
                 <Menu.Item>
                   <IconStar /> Your stars

delete-me.txt

@@ -0,0 +1 @@
+bun run build:registry && next build && bun run build:sidebar

public/registry/anatomies/avatar-anatomy.json

@@ -0,0 +1,11 @@
+{
+  "name": "avatar-anatomy",
+  "files": [
+    {
+      "name": "avatar-anatomy.tsx",
+      "content": "import { Avatar } from \"ui\"\n\nexport default function AvatarAnatomy() {\n  return <Avatar src=\"https://i.pravatar.cc/150?img=61\" alt=\"...\" initials=\"SGT\" />\n}\n"
+    }
+  ],
+  "type": "components:anatomies",
+  "componentPath": "components/docs/anatomies/avatar-anatomy.tsx"
+}

public/registry/anatomies/breadcrumbs-anatomy.json

@@ -0,0 +1,11 @@
+{
+  "name": "breadcrumbs-anatomy",
+  "files": [
+    {
+      "name": "breadcrumbs-anatomy.tsx",
+      "content": "import { Breadcrumbs } from \"ui\"\n\nexport default function BreadcrumbsAnatomy() {\n  return (\n    <Breadcrumbs>\n      <Breadcrumbs.Item href=\"#\">Home</Breadcrumbs.Item>\n      <Breadcrumbs.Item href=\"#\">Design System</Breadcrumbs.Item>\n      <Breadcrumbs.Item>Collections</Breadcrumbs.Item>\n    </Breadcrumbs>\n  )\n}\n"
+    }
+  ],
+  "type": "components:anatomies",
+  "componentPath": "components/docs/anatomies/breadcrumbs-anatomy.tsx"
+}

public/registry/anatomies/button-anatomy.json

@@ -0,0 +1,11 @@
+{
+  "name": "button-anatomy",
+  "files": [
+    {
+      "name": "button-anatomy.tsx",
+      "content": "import { Button } from \"ui\"\n\nexport default function ButtonAnatomy() {\n  return <Button type=\"submit\">Label</Button>\n}\n"
+    }
+  ],
+  "type": "components:anatomies",
+  "componentPath": "components/docs/anatomies/button-anatomy.tsx"
+}

public/registry/anatomies/card-anatomy.json

@@ -0,0 +1,11 @@
+{
+  "name": "card-anatomy",
+  "files": [
+    {
+      "name": "card-anatomy.tsx",
+      "content": "import { Button, Card } from \"ui\"\n\nexport default function CardAnatomy() {\n  return (\n    <Card>\n      <Card.Header>\n        <Card.Title>Monthly Report</Card.Title>\n        <Card.Description>Financial summary for June</Card.Description>\n      </Card.Header>\n      <Card.Content>...</Card.Content>\n      <Card.Footer>\n        <Button>View Details</Button>\n      </Card.Footer>\n    </Card>\n  )\n}\n"
+    }
+  ],
+  "type": "components:anatomies",
+  "componentPath": "components/docs/anatomies/card-anatomy.tsx"
+}

public/registry/anatomies/carousel-anatomy.json

@@ -0,0 +1,11 @@
+{
+  "name": "carousel-anatomy",
+  "files": [
+    {
+      "name": "carousel-anatomy.tsx",
+      "content": "import { Carousel } from \"ui\"\n\nexport default function CarouselAnatomy() {\n  return (\n    <Carousel className=\"w-full max-w-xs **:data-[slot=card]:flex **:data-[slot=card]:h-56 **:data-[slot=card]:flex-col **:data-[slot=card]:overflow-hidden\">\n      <Carousel.Content>\n        <Carousel.Item className=\"basis-1/2\">1</Carousel.Item>\n        <Carousel.Item className=\"basis-1/2\">2</Carousel.Item>\n        <Carousel.Item className=\"basis-1/2\">3</Carousel.Item>\n      </Carousel.Content>\n\n      <Carousel.Handler>\n        <Carousel.Button slot=\"previous\" />\n        <Carousel.Button slot=\"next\" />\n      </Carousel.Handler>\n    </Carousel>\n  )\n}\n"
+    }
+  ],
+  "type": "components:anatomies",
+  "componentPath": "components/docs/anatomies/carousel-anatomy.tsx"
+}

public/registry/anatomies/chart-anatomy.json

@@ -0,0 +1,11 @@
+{
+  "name": "chart-anatomy",
+  "files": [
+    {
+      "name": "chart-anatomy.tsx",
+      "content": "import { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\nimport { Chart, ChartTooltip, ChartTooltipContent } from \"ui\"\n\nexport default function ChartAnatomy() {\n  return (\n    <Chart\n      config={{\n        first: {\n          label: \"...\",\n          color: \"var(--chart-1)\",\n        },\n      }}\n      className=\"min-h-[250px]\"\n    >\n      <AreaChart\n        accessibilityLayer\n        data={[\n          { month: \"January\", revenue: 12000 },\n          //...\n        ]}\n        margin={{ left: 12, right: 12 }}\n      >\n        <CartesianGrid />\n        <XAxis />\n        <ChartTooltip content={<ChartTooltipContent indicator=\"line\" />} />\n        <Area dataKey=\"revenue\" />\n      </AreaChart>\n    </Chart>\n  )\n}\n"
+    }
+  ],
+  "type": "components:anatomies",
+  "componentPath": "components/docs/anatomies/chart-anatomy.tsx"
+}

public/registry/anatomies/checkbox-anatomy.json

@@ -0,0 +1,11 @@
+{
+  "name": "checkbox-anatomy",
+  "files": [
+    {
+      "name": "checkbox-anatomy.tsx",
+      "content": "import { Checkbox } from \"ui\"\n\nexport default function CheckboxAnatomy() {\n  return <Checkbox>Enable notifications</Checkbox>\n}\n"
+    }
+  ],
+  "type": "components:anatomies",
+  "componentPath": "components/docs/anatomies/checkbox-anatomy.tsx"
+}

public/registry/anatomies/checkbox-group-anatomy.json

@@ -0,0 +1,11 @@
+{
+  "name": "checkbox-group-anatomy",
+  "files": [
+    {
+      "name": "checkbox-group-anatomy.tsx",
+      "content": "import { Checkbox, CheckboxGroup } from \"ui\"\n\nexport default function CheckboxGroupAnatomy() {\n  return (\n    <CheckboxGroup label=\"Settings\">\n      <Checkbox value=\"notifications\">Enable notifications</Checkbox>\n      <Checkbox value=\"auto_update\">Auto-update applications</Checkbox>\n      <Checkbox value=\"dark_mode\">Enable dark mode</Checkbox>\n    </CheckboxGroup>\n  )\n}\n"
+    }
+  ],
+  "type": "components:anatomies",
+  "componentPath": "components/docs/anatomies/checkbox-group-anatomy.tsx"
+}

public/registry/anatomies/choicebox-anatomy.json

@@ -0,0 +1,11 @@
+{
+  "name": "choicebox-anatomy",
+  "files": [
+    {
+      "name": "choicebox-anatomy.tsx",
+      "content": "import { Choicebox } from \"ui\"\n\nexport default function AccordionAnatomy() {\n  return (\n    <Choicebox aria-label=\"Select items\" selectionMode=\"multiple\">\n      <Choicebox.Item title=\"...\" description=\"...\" />\n      <Choicebox.Item title=\"...\" description=\"...\" />\n    </Choicebox>\n  )\n}\n"
+    }
+  ],
+  "type": "components:anatomies",
+  "componentPath": "components/docs/anatomies/choicebox-anatomy.tsx"
+}

public/registry/anatomies/color-area-anatomy.json

@@ -0,0 +1,11 @@
+{
+  "name": "color-area-anatomy",
+  "files": [
+    {
+      "name": "color-area-anatomy.tsx",
+      "content": "import { ColorArea } from \"ui\"\n\nexport default function ColorAreaAnatomy() {\n  return <ColorArea />\n}\n"
+    }
+  ],
+  "type": "components:anatomies",
+  "componentPath": "components/docs/anatomies/color-area-anatomy.tsx"
+}

public/registry/anatomies/color-field-anatomy.json

@@ -0,0 +1,11 @@
+{
+  "name": "color-field-anatomy",
+  "files": [
+    {
+      "name": "color-field-anatomy.tsx",
+      "content": "import { ColorField } from \"ui\"\n\nexport default function ColorFieldAnatomy() {\n  return <ColorField defaultValue=\"#0d6efd\" />\n}\n"
+    }
+  ],
+  "type": "components:anatomies",
+  "componentPath": "components/docs/anatomies/color-field-anatomy.tsx"
+}

public/registry/anatomies/color-picker-anatomy.json

@@ -0,0 +1,11 @@
+{
+  "name": "color-picker-anatomy",
+  "files": [
+    {
+      "name": "color-picker-anatomy.tsx",
+      "content": "\"use client\"\n\nimport { ColorPicker } from \"ui\"\n\nexport default function ColorPickerAnatomy() {\n  return (\n    <ColorPicker label=\"Theme Color\" description=\"Snag a color for the app theme\" defaultValue=\"hsl(216, 98%, 52%)\" />\n  )\n}\n"
+    }
+  ],
+  "type": "components:anatomies",
+  "componentPath": "components/docs/anatomies/color-picker-anatomy.tsx"
+}

public/registry/anatomies/color-slider-anatomy.json

@@ -0,0 +1,11 @@
+{
+  "name": "color-slider-anatomy",
+  "files": [
+    {
+      "name": "color-slider-anatomy.tsx",
+      "content": "import { ColorSlider } from \"ui\"\n\nexport default function ColorSliderAnatomy() {\n  return <ColorSlider channel=\"hue\" />\n}\n"
+    }
+  ],
+  "type": "components:anatomies",
+  "componentPath": "components/docs/anatomies/color-slider-anatomy.tsx"
+}

public/registry/anatomies/color-swatch-anatomy.json

@@ -0,0 +1,11 @@
+{
+  "name": "color-swatch-anatomy",
+  "files": [
+    {
+      "name": "color-swatch-anatomy.tsx",
+      "content": "import { ColorSwatch } from \"ui\"\n\nexport default function ColorSwatchAnatomy() {\n  return <ColorSwatch aria-label=\"Current color\" color=\"#0d6efd\" />\n}\n"
+    }
+  ],
+  "type": "components:anatomies",
+  "componentPath": "components/docs/anatomies/color-swatch-anatomy.tsx"
+}

public/registry/anatomies/color-swatch-picker-anatomy.json

@@ -0,0 +1,11 @@
+{
+  "name": "color-swatch-picker-anatomy",
+  "files": [
+    {
+      "name": "color-swatch-picker-anatomy.tsx",
+      "content": "import { ColorSwatchPicker } from \"ui\"\n\nexport default function ColorSwatchPickerAnatomy() {\n  return (\n    <ColorSwatchPicker aria-label=\"Pick color\">\n      <ColorSwatchPicker.Item color=\"#f59e0b\" />\n      <ColorSwatchPicker.Item color=\"#84cc16\" />\n      <ColorSwatchPicker.Item color=\"#0d6efd\" />\n    </ColorSwatchPicker>\n  )\n}\n"
+    }
+  ],
+  "type": "components:anatomies",
+  "componentPath": "components/docs/anatomies/color-swatch-picker-anatomy.tsx"
+}

public/registry/anatomies/color-wheel-anatomy.json

@@ -0,0 +1,11 @@
+{
+  "name": "color-wheel-anatomy",
+  "files": [
+    {
+      "name": "color-wheel-anatomy.tsx",
+      "content": "import { ColorWheel } from \"ui\"\n\nexport default function ColorWheelAnatomy() {\n  return <ColorWheel aria-label=\"Background color\" />\n}\n"
+    }
+  ],
+  "type": "components:anatomies",
+  "componentPath": "components/docs/anatomies/color-wheel-anatomy.tsx"
+}

public/registry/anatomies/combo-box-anatomy.json

@@ -0,0 +1,11 @@
+{
+  "name": "combo-box-anatomy",
+  "files": [
+    {
+      "name": "combo-box-anatomy.tsx",
+      "content": "import { ComboBox } from \"ui\"\n\nexport default function ComboBoxAnatomy() {\n  return (\n    <ComboBox placeholder=\"Select a user\" label=\"Users\">\n      <ComboBox.Input />\n      <ComboBox.List>\n        <ComboBox.Option>John Lennon</ComboBox.Option>\n        <ComboBox.Option>Paul McCartney</ComboBox.Option>\n        <ComboBox.Option>George Harrison</ComboBox.Option>\n        <ComboBox.Option>Ringo Starr</ComboBox.Option>\n      </ComboBox.List>\n    </ComboBox>\n  )\n}\n"
+    }
+  ],
+  "type": "components:anatomies",
+  "componentPath": "components/docs/anatomies/combo-box-anatomy.tsx"
+}

public/registry/anatomies/command-menu-anatomy.json

@@ -0,0 +1,11 @@
+{
+  "name": "command-menu-anatomy",
+  "files": [
+    {
+      "name": "command-menu-anatomy.tsx",
+      "content": "import { useState } from \"react\"\n\nimport { IconHome } from \"justd-icons\"\nimport { CommandMenu, Link } from \"ui\"\n\nexport default function CommandMenuAnatomy() {\n  const [isOpen, setIsOpen] = useState(false)\n  return (\n    <CommandMenu isOpen={isOpen} onOpenChange={setIsOpen}>\n      <CommandMenu.Input placeholder=\"Quick search...\" />\n      <CommandMenu.List>\n        <CommandMenu.Section separator heading=\"Pages\">\n          <CommandMenu.Item asChild>\n            <Link href=\"#\">\n              <IconHome /> Home\n            </Link>\n          </CommandMenu.Item>\n        </CommandMenu.Section>\n      </CommandMenu.List>\n    </CommandMenu>\n  )\n}\n"
+    }
+  ],
+  "type": "components:anatomies",
+  "componentPath": "components/docs/anatomies/command-menu-anatomy.tsx"
+}

public/registry/anatomies/description-list-anatomy.json

@@ -0,0 +1,11 @@
+{
+  "name": "description-list-anatomy",
+  "files": [
+    {
+      "name": "description-list-anatomy.tsx",
+      "content": "import { DescriptionList } from \"ui\"\n\nexport function DescriptionListAnatomy() {\n  return (\n    <DescriptionList>\n      <DescriptionList.Term>Invoice Number</DescriptionList.Term>\n      <DescriptionList.Details>INV-12345</DescriptionList.Details>\n      <DescriptionList.Term>Invoice Date</DescriptionList.Term>\n      <DescriptionList.Details>September 21, 2024</DescriptionList.Details>\n    </DescriptionList>\n  )\n}\n"
+    }
+  ],
+  "type": "components:anatomies",
+  "componentPath": "components/docs/anatomies/description-list-anatomy.tsx"
+}

public/registry/anatomies/disclosure-anatomy.json

@@ -0,0 +1,11 @@
+{
+  "name": "disclosure-anatomy",
+  "files": [
+    {
+      "name": "disclosure-anatomy.tsx",
+      "content": "import { Disclosure, DisclosurePanel, DisclosureTrigger } from \"ui\"\n\nexport default function DisclosureAnatomy() {\n  return (\n    <Disclosure>\n      <DisclosureTrigger>...</DisclosureTrigger>\n      <DisclosurePanel>...</DisclosurePanel>\n    </Disclosure>\n  )\n}\n"
+    }
+  ],
+  "type": "components:anatomies",
+  "componentPath": "components/docs/anatomies/disclosure-anatomy.tsx"
+}

public/registry/anatomies/disclosure-group-anatomy.json

@@ -0,0 +1,11 @@
+{
+  "name": "disclosure-group-anatomy",
+  "files": [
+    {
+      "name": "disclosure-group-anatomy.tsx",
+      "content": "import { Disclosure, DisclosureGroup, DisclosurePanel, DisclosureTrigger } from \"ui\"\n\nexport default function DisclosureAnatomy() {\n  return (\n    <DisclosureGroup defaultExpandedKeys={[\"x\"]}>\n      <Disclosure id=\"x\">\n        <DisclosureTrigger>Q1</DisclosureTrigger>\n        <DisclosurePanel>A1</DisclosurePanel>\n      </Disclosure>\n      <Disclosure id=\"y\">\n        <DisclosureTrigger>Q2</DisclosureTrigger>\n        <DisclosurePanel>A2</DisclosurePanel>\n      </Disclosure>\n      <Disclosure id=\"z\">\n        <DisclosureTrigger>Q3</DisclosureTrigger>\n        <DisclosurePanel>A3</DisclosurePanel>\n      </Disclosure>\n    </DisclosureGroup>\n  )\n}\n"
+    }
+  ],
+  "type": "components:anatomies",
+  "componentPath": "components/docs/anatomies/disclosure-group-anatomy.tsx"
+}

public/registry/anatomies/drawer-anatomy.json

@@ -0,0 +1,11 @@
+{
+  "name": "drawer-anatomy",
+  "files": [
+    {
+      "name": "drawer-anatomy.tsx",
+      "content": "import { Button, Drawer } from \"ui\"\n\nexport default function DrawerAnatomy() {\n  return (\n    <Drawer>\n      <Drawer.Trigger />\n      <Drawer.Content>\n        <Drawer.Header>\n          <Drawer.Title />\n          <Drawer.Description />\n        </Drawer.Header>\n        <Drawer.Body />\n        <Drawer.Footer>\n          <Drawer.Close />\n          <Button />\n        </Drawer.Footer>\n      </Drawer.Content>\n    </Drawer>\n  )\n}\n"
+    }
+  ],
+  "type": "components:anatomies",
+  "componentPath": "components/docs/anatomies/drawer-anatomy.tsx"
+}

public/registry/anatomies/drop-zone-anatomy.json

@@ -0,0 +1,11 @@
+{
+  "name": "drop-zone-anatomy",
+  "files": [
+    {
+      "name": "drop-zone-anatomy.tsx",
+      "content": "import { DropZone, Label } from \"ui\"\n\nexport default function DropZoneAnatomy() {\n  return (\n    <DropZone>\n      <Label>Toss your stuff here</Label>\n    </DropZone>\n  )\n}\n"
+    }
+  ],
+  "type": "components:anatomies",
+  "componentPath": "components/docs/anatomies/drop-zone-anatomy.tsx"
+}

public/registry/anatomies/file-trigger-anatomy.json

@@ -0,0 +1,11 @@
+{
+  "name": "file-trigger-anatomy",
+  "files": [
+    {
+      "name": "file-trigger-anatomy.tsx",
+      "content": "import { FileTrigger } from \"ui\"\n\nexport default function FileTriggerAnatomy() {\n  return <FileTrigger />\n}\n"
+    }
+  ],
+  "type": "components:anatomies",
+  "componentPath": "components/docs/anatomies/file-trigger-anatomy.tsx"
+}

public/registry/anatomies/grid-anatomy.json

@@ -0,0 +1,11 @@
+{
+  "name": "grid-anatomy",
+  "files": [
+    {
+      "name": "grid-anatomy.tsx",
+      "content": "import { Grid } from \"ui\"\n\nexport default function GridAnatomy() {\n  return (\n    <Grid columns={3}>\n      <Grid.Item />\n      <Grid.Item />\n      <Grid.Item />\n    </Grid>\n  )\n}\n"
+    }
+  ],
+  "type": "components:anatomies",
+  "componentPath": "components/docs/anatomies/grid-anatomy.tsx"
+}

public/registry/anatomies/grid-list-anatomy.json

@@ -0,0 +1,11 @@
+{
+  "name": "grid-list-anatomy",
+  "files": [
+    {
+      "name": "grid-list-anatomy.tsx",
+      "content": "import { GridList } from \"ui\"\n\nexport default function GridListAnatomy() {\n  return (\n    <GridList selectionMode=\"single\" aria-label=\"Bands\">\n      <GridList.Item>Nirvana</GridList.Item>\n      <GridList.Item>Radiohead</GridList.Item>\n      <GridList.Item>Arctic Monkeys</GridList.Item>\n    </GridList>\n  )\n}\n"
+    }
+  ],
+  "type": "components:anatomies",
+  "componentPath": "components/docs/anatomies/grid-list-anatomy.tsx"
+}

public/registry/anatomies/heading-anatomy.json

@@ -0,0 +1,11 @@
+{
+  "name": "heading-anatomy",
+  "files": [
+    {
+      "name": "heading-anatomy.tsx",
+      "content": "import { Heading } from \"ui\"\n\nexport default function HeadingAnatomy() {\n  return (\n    <>\n      <Heading level={2}>The quick brown fox jumps over the lazy dog</Heading>\n    </>\n  )\n}\n"
+    }
+  ],
+  "type": "components:anatomies",
+  "componentPath": "components/docs/anatomies/heading-anatomy.tsx"
+}

public/registry/anatomies/input-otp-anatomy.json

@@ -0,0 +1,11 @@
+{
+  "name": "input-otp-anatomy",
+  "files": [
+    {
+      "name": "input-otp-anatomy.tsx",
+      "content": "import { InputOTP } from \"ui\"\n\nexport default function InputOtpAnatomy() {\n  return (\n    <InputOTP maxLength={6}>\n      <InputOTP.Group>\n        <InputOTP.Slot index={0} />\n        <InputOTP.Slot index={1} />\n        <InputOTP.Slot index={2} />\n      </InputOTP.Group>\n      <InputOTP.Separator />\n      <InputOTP.Group>\n        <InputOTP.Slot index={3} />\n        <InputOTP.Slot index={4} />\n        <InputOTP.Slot index={5} />\n      </InputOTP.Group>\n    </InputOTP>\n  )\n}\n"
+    }
+  ],
+  "type": "components:anatomies",
+  "componentPath": "components/docs/anatomies/input-otp-anatomy.tsx"
+}

public/registry/anatomies/link-anatomy.json

@@ -0,0 +1,11 @@
+{
+  "name": "link-anatomy",
+  "files": [
+    {
+      "name": "link-anatomy.tsx",
+      "content": "import { Link } from \"ui\"\n\nexport default function LinkAnatomy() {\n  return (\n    <Link intent=\"primary\" href=\"#basic\">\n      Label\n    </Link>\n  )\n}\n"
+    }
+  ],
+  "type": "components:anatomies",
+  "componentPath": "components/docs/anatomies/link-anatomy.tsx"
+}