shapes-ui 0.4.2 → 0.6.0

package/content/components/toast.mdx

@@ -3,3 +3,73 @@ title: Toast
 slug: toast
 description: A brief message that appears temporarily to inform users of an action or event.
 ---
+
+<RenderPreview name="toast-demo" />
+
+## Installation
+
+<InstallationBlock name="toast" />
+
+## Usage
+
+<UsageSection
+  from="@/components/ui/toast"
+  imports={["Toast", "ToastProvider", "globalToast", "useToast"]}
+  anatomy={`<ToastProvider>
+	<Toast />
+</ToastProvider>;`}
+/>
+
+## Examples
+
+### Positions
+
+Set `position` on `Toast` to choose where toasts appear in the viewport.
+
+<RenderPreview name="toast-positions" />
+
+### Stacking
+
+Toasts now stack with collapsed and expanded behavior based on Base UI's stack attributes.
+
+<RenderPreview name="toast-stacked" />
+
+### Anchored
+
+Pass `positionerProps` to `useToast().add` to anchor a toast to another element.
+
+<RenderPreview name="toast-anchored" />
+
+### Variants
+
+Use toast `type` to style default, success, and error notifications.
+
+<RenderPreview name="toast-variants" />
+
+### Action
+
+Use `actionProps` to render an inline action button like Undo.
+
+<RenderPreview name="toast-action" />
+
+### Promise
+
+Show loading, success, and error states around async work with `useToast().promise`.
+
+<RenderPreview name="toast-promise" />
+
+### Update Existing Toast
+
+Create a toast and then update it as the action progresses.
+
+<RenderPreview name="toast-update" />
+
+### Custom Timeout
+
+Control auto-dismiss timing with the `timeout` option.
+
+<RenderPreview name="toast-timeout" />
+
+### Default
+
+<RenderPreview name="toast-demo" />

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

@@ -4,8 +4,52 @@ slug: toggle
 description: A button that can be toggled between two states.
 ---
 
-<RenderPreview example="toggle-demo" />
+<RenderPreview name="toggle-demo" />
 
 ## Installation
 
-<InstallationBlock component="toggle" />
+<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
+
+Use `Toggle` for a single on/off state.
+
+<RenderPreview name="toggle-demo" />
+
+### Controlled Toggle
+
+Control the pressed state externally with `pressed` and `onPressedChange`.
+
+<RenderPreview name="toggle-controlled" />
+
+### Icon Fill on Press
+
+Add `data-slot="fill"` to a child icon to fill it when the toggle is pressed.
+
+<RenderPreview name="toggle-icon-fill" />
+
+### Toggle Group (Single)
+
+Use `ToggleGroup` with `value` on each `Toggle` to create an exclusive selection.
+
+<RenderPreview name="toggle-group-demo" />
+
+### Toggle Group (Multiple)
+
+Set `multiple` on `ToggleGroup` to allow more than one pressed toggle.
+
+<RenderPreview name="toggle-group-multiple" />

package/content/components/toolbar.mdx

@@ -3,3 +3,51 @@ title: Toolbar
 slug: toolbar
 description: A collection of buttons and controls organized in a horizontal bar.
 ---
+
+<RenderPreview name="toolbar-demo" />
+
+## Installation
+
+<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
+
+A simple formatting toolbar with grouped actions and separators.
+
+<RenderPreview name="toolbar-demo" />
+
+### With Menu
+
+Use `render` on `ToolbarButton` with a menu trigger to compose popup controls in the toolbar.
+
+<RenderPreview name="toolbar-menu" />
+
+### Input and Link
+
+A toolbar with a single trailing input and status link.
+
+<RenderPreview name="toolbar-input-link" />

package/content/components/tooltip.mdx

@@ -0,0 +1,38 @@
+---
+title: Tooltip
+slug: tooltip
+description: A popup that appears when an element is hovered or focused, showing a hint for sighted users.
+---
+
+<RenderPreview name="tooltip-demo" />
+
+## Installation
+
+<InstallationBlock name="tooltip" />
+
+## Usage
+
+<UsageSection
+  from="@/components/ui/tooltip"
+  imports={["Tooltip", "TooltipTrigger", "TooltipPopup", "TooltipProvider"]}
+  anatomy={`<TooltipProvider>
+	<Tooltip>
+		<TooltipTrigger />
+		<TooltipPopup />
+	</Tooltip>
+</TooltipProvider>;`}
+/>
+
+## Examples
+
+### Demo
+
+A simple tooltip with multiple icon buttons and different messages.
+
+<RenderPreview name="tooltip-demo" />
+
+### Positions
+
+Position tooltips on different sides relative to the trigger element.
+
+<RenderPreview name="tooltip-positions" />

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({
-  collections: [components],
+  content: [components, docs],
 });