shapes-ui 0.5.0 → 0.6.0

package/content/components/popover.mdx

@@ -10,6 +10,28 @@ description: Popover component that displays content anchored to a trigger eleme
 
 <InstallationBlock name="popover" />
 
+## Usage
+
+<UsageSection
+  from="@/components/ui/popover"
+  imports={[
+    "Popover",
+    "PopoverPopup",
+    "PopoverDescription",
+    "PopoverClose",
+    "PopoverTitle",
+    "PopoverTrigger",
+  ]}
+  anatomy={`<Popover>
+	<PopoverTrigger />
+	<PopoverPopup>
+		<PopoverTitle />
+		<PopoverDescription />
+		<PopoverClose />
+	</PopoverPopup>
+</Popover>;`}
+/>
+
 ## Examples
 
 ### Basic

package/content/components/preview-card.mdx

@@ -4,13 +4,25 @@ slug: preview-card
 description: Component that displays a preview of linked content when hovered.
 ---
 
-<RenderPreview name={'preview-card-demo'} />
-
+<RenderPreview name={"preview-card-demo"} />
 
 ## Installation
+
 <InstallationBlock name="preview-card" />
 
+## Usage
+
+<UsageSection
+  from="@/components/ui/preview-card"
+  imports={["PreviewCard", "PreviewCardTrigger", "PreviewCardPopup"]}
+  anatomy={`<PreviewCard>
+	<PreviewCardTrigger />
+	<PreviewCardPopup />
+</PreviewCard>;`}
+/>
+
 ## Examples
 
 ### Composed as CTA
+
 <RenderPreview name="preview-card-links" />

package/content/components/progress.mdx

@@ -4,4 +4,18 @@ slug: progress
 description: Progress bar component for displaying the status of a task.
 ---
 
-<RenderPreview name={'progress-demo'} />
+<RenderPreview name={"progress-demo"} />
+
+## Usage
+
+<UsageSection
+  from="@/components/ui/progress"
+  imports={["Progress", "ProgressLabel", "ProgressValue", "ProgressTrack", "ProgressIndicator"]}
+  anatomy={`<Progress>
+	<ProgressLabel />
+	<ProgressValue />
+	<ProgressTrack>
+		<ProgressIndicator />
+	</ProgressTrack>
+</Progress>;`}
+/>

package/content/components/radio.mdx

@@ -10,6 +10,17 @@ description: Radio button component for selecting a single option from a group.
 
 <InstallationBlock name="radio" />
 
+## Usage
+
+<UsageSection
+  from="@/components/ui/radio"
+  imports={["Radio", "RadioGroup"]}
+  anatomy={`<RadioGroup>
+	<Radio value="one" />
+	<Radio value="two" />
+</RadioGroup>;`}
+/>
+
 ## Examples
 
 ### Orientation

package/content/components/scroll-area.mdx

@@ -9,3 +9,26 @@ description: A scroll area component that provides a customizable and accessible
 ## Installation
 
 <InstallationBlock name="scroll-area" />
+
+## Usage
+
+<UsageSection
+  from="@/components/ui/scroll-area"
+  imports={[
+    "ScrollArea",
+    "ScrollAreaViewPort",
+    "ScrollAreaContent",
+    "ScrollAreaScrollbar",
+    "ScrollAreaThumb",
+    "ScrollAreaCorner",
+  ]}
+  anatomy={`<ScrollArea>
+	<ScrollAreaViewPort>
+		<ScrollAreaContent />
+	</ScrollAreaViewPort>
+	<ScrollAreaScrollbar>
+		<ScrollAreaThumb />
+	</ScrollAreaScrollbar>
+	<ScrollAreaCorner />
+</ScrollArea>;`}
+/>

package/content/components/select.mdx

@@ -12,6 +12,33 @@ description: Select component for choosing a predefined value in a dropdown menu
 
 ## Usage
 
+<UsageSection
+  from="@/components/ui/select"
+  imports={[
+    "Select",
+    "SelectPopup",
+    "SelectGroup",
+    "SelectItem",
+    "SelectLabel",
+    "SelectScrollDownButton",
+    "SelectScrollUpButton",
+    "SelectSeparator",
+    "SelectTrigger",
+    "SelectValue",
+  ]}
+  anatomy={`<Select>
+	<SelectTrigger>
+		<SelectValue />
+	</SelectTrigger>
+	<SelectPopup>
+		<SelectGroup>
+			<SelectLabel />
+			<SelectItem />
+		</SelectGroup>
+	</SelectPopup>
+</Select>;`}
+/>
+
 ## Examples
 
 ### Alignment

package/content/components/separator.mdx

@@ -0,0 +1,29 @@
+---
+title: Separator
+slug: separator
+description: A visual and semantic divider used to separate related content.
+---
+
+<RenderPreview name="separator-horizontal" />
+
+## Installation
+
+<InstallationBlock name="separator" />
+
+## Usage
+
+<UsageSection from="@/components/ui/separator" imports={["Separator"]} anatomy={`<Separator />;`} />
+
+## Examples
+
+### Horizontal
+
+Use the default horizontal orientation to separate sections.
+
+<RenderPreview name="separator-horizontal" />
+
+### Vertical
+
+Use `orientation="vertical"` when separating inline items.
+
+<RenderPreview name="separator-demo" />

package/content/components/slider.mdx

@@ -10,6 +10,10 @@ description: Slider component for selecting a value or range of values.
 
 <InstallationBlock name="slider" />
 
+## Usage
+
+<UsageSection from="@/components/ui/slider" imports={["Slider"]} anatomy={`<Slider />;`} />
+
 ## Examples
 
 ### Basic

package/content/components/switch.mdx

@@ -10,6 +10,10 @@ description: Switch component that indicates whether a setting is on or off.
 
 <InstallationBlock name="switch" />
 
+## Usage
+
+<UsageSection from="@/components/ui/switch" imports={["Switch"]} anatomy={`<Switch />;`} />
+
 ## Examples
 
 ### With Label

package/content/components/tabs.mdx

@@ -10,6 +10,21 @@ description: Tabs component for toggling between related panels on the same page
 
 <InstallationBlock name="tabs" />
 
+## Usage
+
+<UsageSection
+  from="@/components/ui/tabs"
+  imports={["Tabs", "TabsList", "TabsTrigger", "TabsPanel", "tabsListVariants"]}
+  anatomy={`<Tabs defaultValue="tab-1">
+	<TabsList>
+		<TabsTrigger value="tab-1" />
+		<TabsTrigger value="tab-2" />
+	</TabsList>
+	<TabsPanel value="tab-1" />
+	<TabsPanel value="tab-2" />
+</Tabs>;`}
+/>
+
 ## Examples
 
 ### Default

package/content/components/toast.mdx

@@ -10,6 +10,16 @@ description: A brief message that appears temporarily to inform users of an acti
 
 <InstallationBlock name="toast" />
 
+## Usage
+
+<UsageSection
+  from="@/components/ui/toast"
+  imports={["Toast", "ToastProvider", "globalToast", "useToast"]}
+  anatomy={`<ToastProvider>
+	<Toast />
+</ToastProvider>;`}
+/>
+
 ## Examples
 
 ### Positions

package/content/components/toggle-group.mdx

@@ -0,0 +1,37 @@
+---
+title: Toggle Group
+slug: toggle-group
+description: A grouped set of toggles for single or multiple selection.
+---
+
+<RenderPreview name="toggle-group-demo" />
+
+## Installation
+
+<InstallationBlock name="toggle" />
+
+## Usage
+
+<UsageSection
+  from="@/components/ui/toggle"
+  imports={["Toggle", "ToggleGroup", "toggleVariants"]}
+  anatomy={`<ToggleGroup>
+	<Toggle value="left" />
+	<Toggle value="center" />
+	<Toggle value="right" />
+</ToggleGroup>;`}
+/>
+
+## Examples
+
+### Single
+
+Use `ToggleGroup` for an exclusive selection.
+
+<RenderPreview name="toggle-group-demo" />
+
+### Multiple
+
+Set `multiple` on `ToggleGroup` to allow selecting more than one option.
+
+<RenderPreview name="toggle-group-multiple" />

package/content/components/toggle.mdx

@@ -10,6 +10,18 @@ description: A button that can be toggled between two states.
 
 <InstallationBlock name="toggle" />
 
+## Usage
+
+<UsageSection
+  from="@/components/ui/toggle"
+  imports={["Toggle", "toggleVariants", "ToggleGroup"]}
+  anatomy={`<ToggleGroup>
+	<Toggle value="left" />
+	<Toggle value="center" />
+	<Toggle value="right" />
+</ToggleGroup>;`}
+/>
+
 ## Examples
 
 ### Toggle

package/content/components/toolbar.mdx

@@ -10,6 +10,28 @@ description: A collection of buttons and controls organized in a horizontal bar.
 
 <InstallationBlock name="toolbar" />
 
+## Usage
+
+<UsageSection
+  from="@/components/ui/toolbar"
+  imports={[
+    "Toolbar",
+    "ToolbarButton",
+    "ToolbarLink",
+    "ToolbarInput",
+    "ToolbarGroup",
+    "ToolbarSeparator",
+  ]}
+  anatomy={`<Toolbar>
+	<ToolbarGroup>
+		<ToolbarButton />
+		<ToolbarSeparator />
+		<ToolbarLink />
+	</ToolbarGroup>
+	<ToolbarInput />
+</Toolbar>;`}
+/>
+
 ## Examples
 
 ### Demo

package/content/components/tooltip.mdx

@@ -10,6 +10,19 @@ description: A popup that appears when an element is hovered or focused, showing
 
 <InstallationBlock name="tooltip" />
 
+## Usage
+
+<UsageSection
+  from="@/components/ui/tooltip"
+  imports={["Tooltip", "TooltipTrigger", "TooltipPopup", "TooltipProvider"]}
+  anatomy={`<TooltipProvider>
+	<Tooltip>
+		<TooltipTrigger />
+		<TooltipPopup />
+	</Tooltip>
+</TooltipProvider>;`}
+/>
+
 ## Examples
 
 ### Demo

package/content/docs/installation.mdx

@@ -0,0 +1,30 @@
+---
+title: Installation
+slug: installation
+description: Set up Shapes UI in your React project.
+---
+
+## Requirements
+
+- React project
+- Tailwind CSS v4
+
+## Quick start
+
+```bash
+npx shapes-ui init
+```
+
+During setup, you can choose a brand palette and contrast mode. Shapes will generate semantic color tokens in your configured CSS file and keep them inside a managed block.
+
+## Create with full setup
+
+```bash
+npx shapes-ui create my-app --full --palette emerald --contrast-mode deterministic
+```
+
+## Update palette later
+
+```bash
+npx shapes-ui palette set blue --contrast-mode dynamic
+```

package/content-collections.ts

@@ -4,6 +4,8 @@ import rehypePrettyCode from "rehype-pretty-code";
 import remarkGfm from "remark-gfm";
 import { z } from "zod";
 
+import { extractHeadingsFromMarkdown } from "./src/lib/docs-headings";
+
 const components = defineCollection({
   name: "components",
   directory: "content/components",
@@ -13,6 +15,67 @@ const components = defineCollection({
     slug: z.string(),
     description: z.string().optional(),
     content: z.string(),
+    referenceLink: z.string().optional(),
+  }),
+  transform: async (document, context) => {
+    const mdx = await compileMDX(context, document, {
+      files: (appender) => {
+        appender.file(
+          "@/components/docs/markdown/render-preview",
+          "./src/components/docs/markdown/render-preview.tsx",
+        );
+      },
+      remarkPlugins: [remarkGfm],
+      rehypePlugins: [
+        [
+          rehypePrettyCode,
+          {
+            theme: {
+              light: "github-light",
+              dark: "github-dark",
+            },
+            keepBackground: false,
+            transformers: [
+              {
+                name: "line-numbers",
+                pre(node: any) {
+                  node.properties["data-line-numbers"] = "";
+                },
+                line(node: any, line: number) {
+                  node.properties.className = ["line"];
+                  node.children.unshift({
+                    type: "element",
+                    tagName: "span",
+                    properties: {
+                      className: ["line-number"],
+                    },
+                    children: [{ type: "text", value: String(line) }],
+                  });
+                },
+              },
+            ],
+          },
+        ],
+      ],
+    });
+    return {
+      ...document,
+      mdx,
+      toc: extractHeadingsFromMarkdown(document.content),
+    };
+  },
+});
+
+const docs = defineCollection({
+  name: "docs",
+  directory: "content/docs",
+  include: "*.mdx",
+  schema: z.object({
+    title: z.string(),
+    slug: z.string(),
+    description: z.string().optional(),
+    content: z.string(),
+    referenceLink: z.string().optional(),
   }),
   transform: async (document, context) => {
     const mdx = await compileMDX(context, document, {
@@ -58,10 +121,11 @@ const components = defineCollection({
     return {
       ...document,
       mdx,
+      toc: extractHeadingsFromMarkdown(document.content),
     };
   },
 });
 
 export default defineConfig({
-  content: [components],
+  content: [components, docs],
 });