shapes-ui 0.4.1 → 0.5.0

package/content/components/toast.mdx

@@ -3,3 +3,63 @@ 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" />
+
+## 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.mdx

@@ -4,8 +4,40 @@ 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" />
+
+## 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,29 @@ title: Toolbar
 slug: toolbar
 description: A collection of buttons and controls organized in a horizontal bar.
 ---
+
+<RenderPreview name="toolbar-demo" />
+
+## Installation
+
+<InstallationBlock name="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,25 @@
+---
+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" />
+
+## 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-collections.ts

@@ -63,5 +63,5 @@ const components = defineCollection({
 });
 
 export default defineConfig({
-  collections: [components],
+  content: [components],
 });

package/examples/__index.tsx

@@ -574,12 +574,32 @@ export const examples: ExampleRegistry = {
         title: "Demo",
         code: lazy(() => import("./menubar-demo")),
       },
+      {
+        name: "menubar-advanced",
+        title: "Advanced",
+        code: lazy(() => import("./menubar-advanced")),
+      },
     ],
   },
   "meter": {
     title: "Meter",
     code: lazy(() => import("../src/components/ui/meter").then(m => ({ default: m.Meter }))),
     examples: [
+      {
+        name: "meter-no-value",
+        title: "No Value",
+        code: lazy(() => import("./meter-no-value")),
+      },
+      {
+        name: "meter-no-label",
+        title: "No Label",
+        code: lazy(() => import("./meter-no-label")),
+      },
+      {
+        name: "meter-flip",
+        title: "Flip",
+        code: lazy(() => import("./meter-flip")),
+      },
       {
         name: "meter-demo",
         title: "Demo",
@@ -602,17 +622,37 @@ export const examples: ExampleRegistry = {
     title: "Number Field",
     code: lazy(() => import("../src/components/ui/number-field").then(m => ({ default: m.NumberField }))),
     examples: [
+      {
+        name: "number-field-scrub",
+        title: "Scrub",
+        code: lazy(() => import("./number-field-scrub")),
+      },
       {
         name: "number-field-demo",
         title: "Demo",
         code: lazy(() => import("./number-field-demo")),
       },
+      {
+        name: "number-field-buttons-end",
+        title: "Buttons End",
+        code: lazy(() => import("./number-field-buttons-end")),
+      },
     ],
   },
   "popover": {
     title: "Popover",
     code: lazy(() => import("../src/components/ui/popover").then(m => ({ default: m.Popover }))),
     examples: [
+      {
+        name: "popover-positions",
+        title: "Positions",
+        code: lazy(() => import("./popover-positions")),
+      },
+      {
+        name: "popover-form",
+        title: "Form",
+        code: lazy(() => import("./popover-form")),
+      },
       {
         name: "popover-demo",
         title: "Demo",
@@ -624,6 +664,11 @@ export const examples: ExampleRegistry = {
     title: "Preview Card",
     code: lazy(() => import("../src/components/ui/preview-card").then(m => ({ default: m.PreviewCard }))),
     examples: [
+      {
+        name: "preview-card-links",
+        title: "Links",
+        code: lazy(() => import("./preview-card-links")),
+      },
       {
         name: "preview-card-demo",
         title: "Demo",
@@ -646,11 +691,26 @@ export const examples: ExampleRegistry = {
     title: "Radio",
     code: lazy(() => import("../src/components/ui/radio").then(m => ({ default: m.Radio }))),
     examples: [
+      {
+        name: "radio-orientation",
+        title: "Orientation",
+        code: lazy(() => import("./radio-orientation")),
+      },
+      {
+        name: "radio-description",
+        title: "Description",
+        code: lazy(() => import("./radio-description")),
+      },
       {
         name: "radio-demo",
         title: "Demo",
         code: lazy(() => import("./radio-demo")),
       },
+      {
+        name: "radio-card",
+        title: "Card",
+        code: lazy(() => import("./radio-card")),
+      },
     ],
   },
   "scroll-area": {
@@ -668,28 +728,98 @@ export const examples: ExampleRegistry = {
     title: "Select",
     code: lazy(() => import("../src/components/ui/select").then(m => ({ default: m.Select }))),
     examples: [
+      {
+        name: "select-scrollable",
+        title: "Scrollable",
+        code: lazy(() => import("./select-scrollable")),
+      },
+      {
+        name: "select-invalid",
+        title: "Invalid",
+        code: lazy(() => import("./select-invalid")),
+      },
+      {
+        name: "select-groups",
+        title: "Groups",
+        code: lazy(() => import("./select-groups")),
+      },
+      {
+        name: "select-disabled",
+        title: "Disabled",
+        code: lazy(() => import("./select-disabled")),
+      },
       {
         name: "select-demo",
         title: "Demo",
         code: lazy(() => import("./select-demo")),
       },
+      {
+        name: "select-alignment",
+        title: "Alignment",
+        code: lazy(() => import("./select-alignment")),
+      },
     ],
   },
   "slider": {
     title: "Slider",
     code: lazy(() => import("../src/components/ui/slider").then(m => ({ default: m.Slider }))),
     examples: [
+      {
+        name: "slider-vertical",
+        title: "Vertical",
+        code: lazy(() => import("./slider-vertical")),
+      },
+      {
+        name: "slider-range",
+        title: "Range",
+        code: lazy(() => import("./slider-range")),
+      },
+      {
+        name: "slider-multiple",
+        title: "Multiple",
+        code: lazy(() => import("./slider-multiple")),
+      },
+      {
+        name: "slider-edge",
+        title: "Edge",
+        code: lazy(() => import("./slider-edge")),
+      },
+      {
+        name: "slider-disabled",
+        title: "Disabled",
+        code: lazy(() => import("./slider-disabled")),
+      },
       {
         name: "slider-demo",
         title: "Demo",
         code: lazy(() => import("./slider-demo")),
       },
+      {
+        name: "slider-controlled",
+        title: "Controlled",
+        code: lazy(() => import("./slider-controlled")),
+      },
     ],
   },
   "switch": {
     title: "Switch",
     code: lazy(() => import("../src/components/ui/switch").then(m => ({ default: m.Switch }))),
     examples: [
+      {
+        name: "switch-with-label",
+        title: "With Label",
+        code: lazy(() => import("./switch-with-label")),
+      },
+      {
+        name: "switch-sizes",
+        title: "Sizes",
+        code: lazy(() => import("./switch-sizes")),
+      },
+      {
+        name: "switch-disabled",
+        title: "Disabled",
+        code: lazy(() => import("./switch-disabled")),
+      },
       {
         name: "switch-demo",
         title: "Demo",
@@ -701,6 +831,21 @@ export const examples: ExampleRegistry = {
     title: "Tabs",
     code: lazy(() => import("../src/components/ui/tabs").then(m => ({ default: m.Tabs }))),
     examples: [
+      {
+        name: "tabs-vertical",
+        title: "Vertical",
+        code: lazy(() => import("./tabs-vertical")),
+      },
+      {
+        name: "tabs-line",
+        title: "Line",
+        code: lazy(() => import("./tabs-line")),
+      },
+      {
+        name: "tabs-disabled",
+        title: "Disabled",
+        code: lazy(() => import("./tabs-disabled")),
+      },
       {
         name: "tabs-demo",
         title: "Demo",
@@ -712,28 +857,98 @@ export const examples: ExampleRegistry = {
     title: "Toast",
     code: lazy(() => import("../src/components/ui/toast").then(m => ({ default: m.Toast }))),
     examples: [
+      {
+        name: "toast-variants",
+        title: "Variants",
+        code: lazy(() => import("./toast-variants")),
+      },
+      {
+        name: "toast-update",
+        title: "Update",
+        code: lazy(() => import("./toast-update")),
+      },
+      {
+        name: "toast-timeout",
+        title: "Timeout",
+        code: lazy(() => import("./toast-timeout")),
+      },
+      {
+        name: "toast-stacked",
+        title: "Stacked",
+        code: lazy(() => import("./toast-stacked")),
+      },
+      {
+        name: "toast-promise",
+        title: "Promise",
+        code: lazy(() => import("./toast-promise")),
+      },
+      {
+        name: "toast-positions",
+        title: "Positions",
+        code: lazy(() => import("./toast-positions")),
+      },
       {
         name: "toast-demo",
         title: "Demo",
         code: lazy(() => import("./toast-demo")),
       },
+      {
+        name: "toast-anchored",
+        title: "Anchored",
+        code: lazy(() => import("./toast-anchored")),
+      },
+      {
+        name: "toast-action",
+        title: "Action",
+        code: lazy(() => import("./toast-action")),
+      },
     ],
   },
   "toggle": {
     title: "Toggle",
     code: lazy(() => import("../src/components/ui/toggle").then(m => ({ default: m.Toggle }))),
     examples: [
+      {
+        name: "toggle-icon-fill",
+        title: "Icon Fill",
+        code: lazy(() => import("./toggle-icon-fill")),
+      },
+      {
+        name: "toggle-group-multiple",
+        title: "Group Multiple",
+        code: lazy(() => import("./toggle-group-multiple")),
+      },
+      {
+        name: "toggle-group-demo",
+        title: "Group Demo",
+        code: lazy(() => import("./toggle-group-demo")),
+      },
       {
         name: "toggle-demo",
         title: "Demo",
         code: lazy(() => import("./toggle-demo")),
       },
+      {
+        name: "toggle-controlled",
+        title: "Controlled",
+        code: lazy(() => import("./toggle-controlled")),
+      },
     ],
   },
   "toolbar": {
     title: "Toolbar",
     code: lazy(() => import("../src/components/ui/toolbar").then(m => ({ default: m.Toolbar }))),
     examples: [
+      {
+        name: "toolbar-menu",
+        title: "Menu",
+        code: lazy(() => import("./toolbar-menu")),
+      },
+      {
+        name: "toolbar-input-link",
+        title: "Input Link",
+        code: lazy(() => import("./toolbar-input-link")),
+      },
       {
         name: "toolbar-demo",
         title: "Demo",
@@ -741,4 +956,20 @@ export const examples: ExampleRegistry = {
       },
     ],
   },
+  "tooltip": {
+    title: "Tooltip",
+    code: lazy(() => import("../src/components/ui/tooltip").then(m => ({ default: m.Tooltip }))),
+    examples: [
+      {
+        name: "tooltip-positions",
+        title: "Positions",
+        code: lazy(() => import("./tooltip-positions")),
+      },
+      {
+        name: "tooltip-demo",
+        title: "Demo",
+        code: lazy(() => import("./tooltip-demo")),
+      },
+    ],
+  },
 };

package/examples/checkbox-demo.tsx

@@ -3,7 +3,7 @@ import { Field, FieldLabel } from "@/components/ui/field";
 
 export default function CheckboxDemo() {
   return (
-    <Field orientation={"horizontal"} className={"mx-auto"}>
+    <Field className="mx-auto flex-row items-center *:w-auto">
       <Checkbox />
       <FieldLabel>Accept terms and conditions</FieldLabel>
     </Field>

package/examples/checkbox-form.tsx

@@ -6,7 +6,7 @@ import { Field, FieldDescription, FieldLabel } from "@/components/ui/field";
 export default function CheckboxFormDemo() {
   return (
     <form className="max-w-md space-y-4">
-      <Field name="marketing" orientation="horizontal">
+      <Field name="marketing">
         <FieldLabel>
           <Checkbox />
           <span className="text-sm">Marketing emails</span>
@@ -14,7 +14,7 @@ export default function CheckboxFormDemo() {
         <FieldDescription>Receive emails about new products and features.</FieldDescription>
       </Field>
 
-      <Field name="newsletter" orientation="horizontal">
+      <Field name="newsletter">
         <FieldLabel>
           <Checkbox />
           <span className="text-sm">Newsletter</span>
@@ -22,7 +22,7 @@ export default function CheckboxFormDemo() {
         <FieldDescription>Get our weekly newsletter with tips and updates.</FieldDescription>
       </Field>
 
-      <Field name="security" orientation="horizontal">
+      <Field name="security">
         <FieldLabel>
           <Checkbox defaultChecked />
           <span className="text-sm">Security alerts</span>

package/examples/field-custom-control.tsx

@@ -1,17 +1,41 @@
 import { Field, FieldLabel, FieldDescription } from "@/components/ui/field";
+import {
+  Select,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectPopup,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 
 export default function FieldCustomControl() {
   return (
     <Field name="color" className="max-w-md">
-      <FieldLabel>Favorite Color</FieldLabel>
-      <select className="flex h-9 w-full rounded-lg border border-input bg-background px-3 py-2 text-sm transition-colors focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-none">
-        <option value="">Select a color</option>
-        <option value="red">Red</option>
-        <option value="blue">Blue</option>
-        <option value="green">Green</option>
-        <option value="yellow">Yellow</option>
-      </select>
-      <FieldDescription>Select your favorite color from the dropdown.</FieldDescription>
+      <FieldLabel>Favourite Color</FieldLabel>
+      <Select items={colors}>
+        <SelectTrigger className="w-full max-w-48">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectPopup>
+          <SelectGroup>
+            <SelectLabel>Colors</SelectLabel>
+            {colors.map((color) => (
+              <SelectItem key={color.value} value={color.value}>
+                {color.label}
+              </SelectItem>
+            ))}
+          </SelectGroup>
+        </SelectPopup>
+      </Select>
+      <FieldDescription>Select your favourite color from the dropdown.</FieldDescription>
     </Field>
   );
 }
+
+const colors = [
+  { value: "red", label: "Red" },
+  { value: "blue", label: "Blue" },
+  { value: "green", label: "Green" },
+  { value: "yellow", label: "Yellow" },
+];

package/examples/form-demo.tsx

@@ -1,23 +1,18 @@
 import { Button } from "@/components/ui/button";
 import { Field, FieldLabel, FieldControl, FieldDescription } from "@/components/ui/field";
 import { Form } from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
 
 export default function FormDemo() {
   return (
-    <Form onSubmit={(e) => e.preventDefault()} className="w-full max-w-sm space-y-6">
-      <Field orientation="vertical">
+    <Form onFormSubmit={(event) => event.preventDefault()} className="w-full max-w-sm space-y-6">
+      <Field>
         <FieldLabel>Email</FieldLabel>
-        <FieldControl>
-          <Input type="email" placeholder="Enter your email" required />
-        </FieldControl>
+        <FieldControl type="email" placeholder="Enter your email" required />
         <FieldDescription>We'll never share your email.</FieldDescription>
       </Field>
-      <Field orientation="vertical">
+      <Field>
         <FieldLabel>Password</FieldLabel>
-        <FieldControl>
-          <Input type="password" placeholder="Enter your password" required />
-        </FieldControl>
+        <FieldControl type="password" placeholder="Enter your password" required />
       </Field>
       <Button type="submit" className="w-full">
         Submit

package/examples/menu-advanced.tsx

@@ -35,9 +35,7 @@ export default function MenuAdvancedDemo() {
 
   return (
     <Menu>
-      <MenuTrigger>
-        <Button variant="outline">Advanced menu</Button>
-      </MenuTrigger>
+      <MenuTrigger render={<Button variant="outline">Advanced menu</Button>} />
 
       <MenuPopup>
         <div className="flex items-center gap-2 p-3">