shapes-ui 0.4.2 → 0.6.0

package/content/components/field.mdx

@@ -10,11 +10,32 @@ description: Accessible form field components with built-in validation, labels,
 
 <InstallationBlock name="field" />
 
+## Usage
+
+<UsageSection
+  from="@/components/ui/field"
+  imports={[
+    "Field",
+    "FieldLabel",
+    "FieldControl",
+    "FieldDescription",
+    "FieldError",
+    "FieldItem",
+    "FieldValidity",
+  ]}
+  anatomy={`<Field>
+	<FieldLabel />
+	<FieldControl />
+	<FieldDescription />
+	<FieldError />
+</Field>;`}
+/>
+
 ## Examples
 
 ### Default
 
-Compose fields using `FieldRoot`, `FieldLabel`, `FieldControl`, and `FieldDescription`.
+Compose fields using `Field`, `FieldLabel`, `FieldControl`, and `FieldDescription`.
 
 <RenderPreview name="field-demo" />
 
@@ -38,6 +59,6 @@ Use the individual Field subcomponents to create custom field layouts with full
 
 ### Custom Control
 
-Replace the default `FieldControl` with any other input component for advanced use cases.
+Use `FieldControl` as the form control element or compose Base-compatible controls inside `Field` for advanced cases.
 
 <RenderPreview name="field-custom-control" />

package/content/components/fieldset.mdx

@@ -10,11 +10,21 @@ description: Groups related form fields with an accessible legend for semantic o
 
 <InstallationBlock name="fieldset" />
 
+## Usage
+
+<UsageSection
+  from="@/components/ui/fieldset"
+  imports={["Fieldset", "FieldsetLegend"]}
+  anatomy={`<Fieldset>
+	<FieldsetLegend />
+</Fieldset>;`}
+/>
+
 ## Examples
 
 ### Default
 
-Use `FieldsetRoot` and `FieldsetLegend` to group related fields with a descriptive legend.
+Use `Fieldset` and `FieldsetLegend` to group related fields with a descriptive legend.
 
 <RenderPreview name="fieldset-demo" />
 

package/content/components/form.mdx

@@ -10,6 +10,14 @@ description: Form wrapper component with consolidated error handling and field v
 
 <InstallationBlock name="form" />
 
+## Usage
+
+<UsageSection
+  from="@/components/ui/form"
+  imports={["Form"]}
+  anatomy={`<Form>{/* form fields */}</Form>;`}
+/>
+
 ## Examples
 
 ### Demo

package/content/components/input.mdx

@@ -10,6 +10,10 @@ description: Single-line text input field.
 
 <InstallationBlock name="input" />
 
+## Usage
+
+<UsageSection from="@/components/ui/input" imports={["Input"]} anatomy={`<Input />;`} />
+
 ## Examples
 
 ### Basic

package/content/components/menu.mdx

@@ -10,6 +10,33 @@ description: Dropdown menu component with support for items, groups, separators,
 
 <InstallationBlock name="menu" />
 
+## Usage
+
+<UsageSection
+  from="@/components/ui/menu"
+  imports={[
+    "Menu",
+    "MenuTrigger",
+    "MenuPopup",
+    "MenuGroup",
+    "MenuLabel",
+    "MenuItem",
+    "MenuSub",
+    "MenuSubTrigger",
+    "MenuCheckboxItem",
+    "MenuRadioGroup",
+    "MenuRadioItem",
+    "MenuSubPopup",
+    "MenuSeparator",
+  ]}
+  anatomy={`<Menu>
+	<MenuTrigger />
+	<MenuPopup>
+		<MenuItem />
+	</MenuPopup>
+</Menu>;`}
+/>
+
 ## Examples
 
 ### Sides and alignments

package/content/components/menubar.mdx

@@ -10,6 +10,37 @@ description: Menu bar providing commands and options for your application with d
 
 <InstallationBlock name="menubar" />
 
+## Usage
+
+<UsageSection
+  from="@/components/ui/menubar"
+  imports={[
+    "Menubar",
+    "Menu",
+    "MenuTrigger",
+    "MenuPopup",
+    "MenuGroup",
+    "MenuLabel",
+    "MenuItem",
+    "MenuSub",
+    "MenuSubPopup",
+    "MenuSubTrigger",
+    "MenuCheckboxItem",
+    "MenuRadioGroup",
+    "MenuRadioItem",
+    "MenuSeparator",
+    "MenuShortcut",
+  ]}
+  anatomy={`<Menubar>
+	<Menu>
+		<MenuTrigger />
+		<MenuPopup>
+			<MenuItem />
+		</MenuPopup>
+	</Menu>
+</Menubar>;`}
+/>
+
 Menubar relies on `Menu` component, but for the ease of use, it also provides a set of components that are built on top of `Menu` component with same styling and APIs.
 
 ## Examples

package/content/components/meter.mdx

@@ -10,6 +10,20 @@ description: Meter component that provides a graphical display of a numeric valu
 
 <InstallationBlock name="meter" />
 
+## Usage
+
+<UsageSection
+  from="@/components/ui/meter"
+  imports={["Meter", "MeterLabel", "MeterValue", "MeterTrack", "MeterIndicator"]}
+  anatomy={`<Meter>
+	<MeterLabel />
+	<MeterValue />
+	<MeterTrack>
+		<MeterIndicator />
+	</MeterTrack>
+</Meter>;`}
+/>
+
 ## Examples
 
 ### Default

package/content/components/navigation-menu.mdx

@@ -9,3 +9,31 @@ description: Navigation menu component for displaying a collection of links and
 ## Installation
 
 <InstallationBlock name="navigation-menu" />
+
+## Usage
+
+<UsageSection
+  from="@/components/ui/navigation-menu"
+  imports={[
+    "NavigationMenu",
+    "NavigationMenuList",
+    "NavigationMenuItem",
+    "NavigationMenuTrigger",
+    "NavigationMenuContent",
+    "NavigationMenuLink",
+    "NavigationMenuPopup",
+    "NavigationMenuViewport",
+    "NavigationMenuArrow",
+  ]}
+  anatomy={`<NavigationMenu>
+	<NavigationMenuList>
+		<NavigationMenuItem>
+			<NavigationMenuTrigger />
+			<NavigationMenuContent />
+		</NavigationMenuItem>
+	</NavigationMenuList>
+	<NavigationMenuViewport>
+		<NavigationMenuArrow />
+	</NavigationMenuViewport>
+</NavigationMenu>;`}
+/>

package/content/components/number-field.mdx

@@ -10,6 +10,31 @@ description: An input field component specifically designed for numeric input, w
 
 <InstallationBlock name="number-field" />
 
+## Usage
+
+<UsageSection
+  from="@/components/ui/number-field"
+  imports={[
+    "NumberField",
+    "NumberFieldScrubArea",
+    "NumberFieldScrubAreaCursor",
+    "NumberFieldGroup",
+    "NumberFieldDecrement",
+    "NumberFieldIncrement",
+    "NumberFieldInput",
+  ]}
+  anatomy={`<NumberField>
+	<NumberFieldScrubArea>
+		<NumberFieldScrubAreaCursor />
+	</NumberFieldScrubArea>
+	<NumberFieldGroup>
+		<NumberFieldDecrement />
+		<NumberFieldInput />
+		<NumberFieldIncrement />
+	</NumberFieldGroup>
+</NumberField>;`}
+/>
+
 ## Examples
 
 ### Basic

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

@@ -3,3 +3,34 @@ title: Radio
 slug: radio
 description: Radio button component for selecting a single option from a group.
 ---
+
+<RenderPreview name="radio-demo" />
+
+## Installation
+
+<InstallationBlock name="radio" />
+
+## Usage
+
+<UsageSection
+  from="@/components/ui/radio"
+  imports={["Radio", "RadioGroup"]}
+  anatomy={`<RadioGroup>
+	<Radio value="one" />
+	<Radio value="two" />
+</RadioGroup>;`}
+/>
+
+## Examples
+
+### Orientation
+
+<RenderPreview name="radio-orientation" />
+
+### Card Style
+
+<RenderPreview name="radio-card" />
+
+### Description
+
+<RenderPreview name="radio-description" />

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

@@ -3,3 +3,60 @@ title: Select
 slug: select
 description: Select component for choosing a predefined value in a dropdown menu.
 ---
+
+<RenderPreview name="select-demo" />
+
+## Installation
+
+<InstallationBlock name="select" />
+
+## 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
+
+<RenderPreview name="select-alignment" />
+
+### Groups
+
+<RenderPreview name="select-groups" />
+
+### Disabled
+
+<RenderPreview name="select-disabled" />
+
+### Invalid
+
+<RenderPreview name="select-invalid" />
+
+### Scrollable
+
+<RenderPreview name="select-scrollable" />

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

@@ -3,3 +3,55 @@ title: Slider
 slug: slider
 description: Slider component for selecting a value or range of values.
 ---
+
+<RenderPreview name="slider-demo" />
+
+## Installation
+
+<InstallationBlock name="slider" />
+
+## Usage
+
+<UsageSection from="@/components/ui/slider" imports={["Slider"]} anatomy={`<Slider />;`} />
+
+## Examples
+
+### Basic
+
+<RenderPreview name="slider-demo" />
+
+### Range
+
+Use an array with two values for a range slider.
+
+<RenderPreview name="slider-range" />
+
+### Multiple Thumbs
+
+Use an array with multiple values for multiple thumbs.
+
+<RenderPreview name="slider-multiple" />
+
+### Vertical
+
+Use `orientation="vertical"` for a vertical slider.
+
+<RenderPreview name="slider-vertical" />
+
+### Edge Alignment
+
+Use `thumbAlignment="edge"` to inset thumbs so they align to the track edge at min/max.
+
+<RenderPreview name="slider-edge" />
+
+### Controlled
+
+Use `value` and `onValueChange` to fully control slider state.
+
+<RenderPreview name="slider-controlled" />
+
+### Disabled
+
+Use the `disabled` prop to disable the slider.
+
+<RenderPreview name="slider-disabled" />

package/content/components/switch.mdx

@@ -3,3 +3,33 @@ title: Switch
 slug: switch
 description: Switch component that indicates whether a setting is on or off.
 ---
+
+<RenderPreview name="switch-demo" />
+
+## Installation
+
+<InstallationBlock name="switch" />
+
+## Usage
+
+<UsageSection from="@/components/ui/switch" imports={["Switch"]} anatomy={`<Switch />;`} />
+
+## Examples
+
+### With Label
+
+Use labels and helper text to make intent clear.
+
+<RenderPreview name="switch-with-label" />
+
+### Sizes
+
+Switch supports default and small sizes via the `size` prop.
+
+<RenderPreview name="switch-sizes" />
+
+### Disabled
+
+Disable interaction while preserving the current state.
+
+<RenderPreview name="switch-disabled" />

package/content/components/tabs.mdx

@@ -3,3 +3,50 @@ title: Tabs
 slug: tabs
 description: Tabs component for toggling between related panels on the same page.
 ---
+
+<RenderPreview name="tabs-demo" />
+
+## Installation
+
+<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
+
+A standard horizontal tabs layout.
+
+<RenderPreview name="tabs-demo" />
+
+### Line Variant
+
+Use the `line` variant for a compact, underlined appearance.
+
+<RenderPreview name="tabs-line" />
+
+### Vertical
+
+Set `orientation="vertical"` to stack triggers in a column.
+
+<RenderPreview name="tabs-vertical" />
+
+### Disabled Trigger
+
+Disable individual tab triggers with the `disabled` prop.
+
+<RenderPreview name="tabs-disabled" />