shapes-ui 0.5.0 → 0.6.0

package/.github/workflows/pr-preview.yml

@@ -6,6 +6,8 @@ on:
             - opened
             - reopened
             - synchronize
+    pull_request_target:
+        types:
             - closed
 
 concurrency:
@@ -15,7 +17,7 @@ concurrency:
 jobs:
     deploy-preview:
         name: Deploy Preview
-        if: github.event.action != 'closed'
+        if: github.event_name == 'pull_request' && github.event.action != 'closed' && github.event.pull_request.head.repo.full_name == github.repository
         runs-on: ubuntu-latest
         permissions:
             contents: read
@@ -40,6 +42,7 @@ jobs:
             - name: Deploy Preview Worker
               uses: cloudflare/wrangler-action@v3
               with:
+                  wranglerVersion: "4"
                   apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
                   accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
                   command: "deploy --name shapes-ui-pr-${{ github.event.pull_request.number }}"
@@ -55,14 +58,18 @@ jobs:
 
     cleanup-preview:
         name: Cleanup Preview
-        if: github.event.action == 'closed'
+        if: github.event_name == 'pull_request_target' && github.event.action == 'closed'
         runs-on: ubuntu-latest
         permissions:
             contents: read
         steps:
             - name: Delete Preview Worker
               uses: cloudflare/wrangler-action@v3
+              env:
+                  CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+                  CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
               with:
+                  wranglerVersion: "4"
                   apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
                   accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
                   command: "delete shapes-ui-pr-${{ github.event.pull_request.number }} --force"

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # shapes-ui
 
+## 0.6.0
+
+### Minor Changes
+
+- dd156b6: UI updates, introduced anatomy and usage component
+- d5f5a73: updated docs components, added table of content, updated scripting
+
+### Patch Changes
+
+- 26c581e: Updated styles
+
 ## 0.5.0
 
 ### Minor Changes

package/README.md

@@ -1,5 +1,18 @@
 # Shapes UI
 
+## CLI
+
+- Create a new app: `npx shapes-ui create my-app`
+- Create and install deps: `npx shapes-ui create my-app --install`
+- Full setup in one step: `npx shapes-ui create my-app --full`
+- Full setup with style: `npx shapes-ui create my-app --full --style brutalist`
+- Full setup with palette: `npx shapes-ui create my-app --full --palette emerald --contrast-mode dynamic`
+- Full setup with paths: `npx shapes-ui create my-app --full --ui-path ./src/ui --css-path src/styles/globals.css`
+- Initialize in an existing project: `npx shapes-ui init`
+- Change palette later: `npx shapes-ui palette set rose --contrast-mode deterministic`
+- Add specific components: `npx shapes-ui add button card`
+- Add all components: `npx shapes-ui add --all`
+
 ## Community
 
 - [Contributing guide](CONTRIBUTING.md)

package/content/components/accordion.mdx

@@ -10,6 +10,19 @@ description: Expandable sections that reveal content one at a time, or multiple
 
 <InstallationBlock name="accordion" />
 
+## Usage
+
+<UsageSection
+  from="@/components/ui/accordion"
+  imports={["Accordion", "AccordionItem", "AccordionTrigger", "AccordionPanel"]}
+  anatomy={`<Accordion>
+	<AccordionItem>
+		<AccordionTrigger />
+		<AccordionPanel />
+	</AccordionItem>
+</Accordion>;`}
+/>
+
 ## Examples
 
 ### Default

package/content/components/alert-dialog.mdx

@@ -10,6 +10,40 @@ description: A modal dialog that interrupts the user with important content and
 
 <InstallationBlock name="alert-dialog" />
 
+## Usage
+
+<UsageSection
+  from="@/components/ui/alert-dialog"
+  imports={[
+    "AlertDialog",
+    "AlertDialogAction",
+    "AlertDialogCancel",
+    "AlertDialogPopup",
+    "AlertDialogDescription",
+    "AlertDialogFooter",
+    "AlertDialogHeader",
+    "AlertDialogMedia",
+    "AlertDialogOverlay",
+    "AlertDialogPortal",
+    "AlertDialogTitle",
+    "AlertDialogTrigger",
+  ]}
+  anatomy={`<AlertDialog>
+	<AlertDialogTrigger />
+	<AlertDialogPopup>
+		<AlertDialogHeader>
+			<AlertDialogMedia />
+			<AlertDialogTitle />
+			<AlertDialogDescription />
+		</AlertDialogHeader>
+		<AlertDialogFooter>
+			<AlertDialogCancel />
+			<AlertDialogAction />
+		</AlertDialogFooter>
+	</AlertDialogPopup>
+</AlertDialog>;`}
+/>
+
 ## Examples
 
 ### Default

package/content/components/autocomplete.mdx

@@ -10,8 +10,70 @@ description: Input field with autocomplete functionality and dropdown list of fi
 
 <InstallationBlock name="autocomplete" />
 
+## Usage
+
+<UsageSection
+	from="@/components/ui/autocomplete"
+	imports={[
+		"Autocomplete",
+		"AutocompleteValue",
+		"AutocompleteInput",
+		"AutocompleteTrigger",
+		"AutocompleteClear",
+		"AutocompletePopup",
+		"AutocompleteItem",
+		"AutocompleteEmpty",
+		"AutocompleteList",
+		"AutocompleteGroup",
+		"AutocompleteGroupLabel",
+		"AutocompleteSeparator",
+	]}
+	anatomy={`<Autocomplete>
+	<AutocompleteInput />
+	<AutocompleteTrigger />
+	<AutocompleteClear />
+	<AutocompleteValue />
+
+    <AutocompletePopup>
+    	<AutocompleteEmpty />
+    	<AutocompleteList>
+    		<AutocompleteGroup>
+    			<AutocompleteGroupLabel />
+    			<AutocompleteItem />
+    		</AutocompleteGroup>
+    		<AutocompleteSeparator />
+    	</AutocompleteList>
+    </AutocompletePopup>
+
+</Autocomplete>;`}
+/>
+
 ## Examples
 
+### Groups
+
+Use grouped sections with labels and separators for larger lists.
+
+<RenderPreview name="autocomplete-groups" />
+
+### No Clear Button
+
+Set `showClearButton={false}` to hide the clear action.
+
+<RenderPreview name="autocomplete-no-clear" />
+
+### Popup Alignment
+
+Control popup position with `align`, `side`, and offset props.
+
+<RenderPreview name="autocomplete-align" />
+
+### Controlled Value
+
+Use `value` and `onValueChange` to manage the selected value externally.
+
+<RenderPreview name="autocomplete-controlled" />
+
 ### Demo
 
 <RenderPreview name="autocomplete-demo" />

package/content/components/avatar.mdx

@@ -10,6 +10,17 @@ description: Profile image component with fallback for missing images or initial
 
 <InstallationBlock name="avatar" />
 
+## Usage
+
+<UsageSection
+  from="@/components/ui/avatar"
+  imports={["Avatar", "AvatarImage", "AvatarFallback"]}
+  anatomy={`<Avatar>
+	<AvatarImage src="" />
+	<AvatarFallback>LT</AvatarFallback>
+</Avatar>;`}
+/>
+
 ## Examples
 
 ### Demo

package/content/components/button.mdx

@@ -10,6 +10,14 @@ description: Composable buttons with predefined sizes and variants. Triggers eve
 
 <InstallationBlock name="button" />
 
+## Usage
+
+<UsageSection
+  from="@/components/ui/button"
+  imports={["Button", "buttonVariants"]}
+  anatomy={`<Button>Submit</Button>;`}
+/>
+
 ## Examples
 
 ### Sizes

package/content/components/checkbox.mdx

@@ -10,6 +10,17 @@ description: A control that allows users to toggle between checked and unchecked
 
 <InstallationBlock name="checkbox" />
 
+## Usage
+
+<UsageSection
+  from="@/components/ui/checkbox"
+  imports={["Checkbox"]}
+  anatomy={`<label>
+	<Checkbox />
+	Enable notifications
+</label>;`}
+/>
+
 ## Examples
 
 ### Default

package/content/components/collapsible.mdx

@@ -9,3 +9,14 @@ description: Expandable panel controlled by a trigger, ideal for hiding and show
 ## Installation
 
 <InstallationBlock name="collapsible" />
+
+## Usage
+
+<UsageSection
+  from="@/components/ui/collapsible"
+  imports={["Collapsible", "CollapsibleTrigger", "CollapsiblePanel"]}
+  anatomy={`<Collapsible>
+	<CollapsibleTrigger />
+	<CollapsiblePanel />
+</Collapsible>;`}
+/>

package/content/components/combobox.mdx

@@ -9,3 +9,36 @@ description: A searchable input with a list of predefined options.
 # Installation
 
 <InstallationBlock name="combobox" />
+
+## Usage
+
+<UsageSection
+  from="@/components/ui/combobox"
+  imports={[
+    "Combobox",
+    "ComboboxInput",
+    "ComboboxPopup",
+    "ComboboxList",
+    "ComboboxItem",
+    "ComboboxGroup",
+    "ComboboxLabel",
+    "ComboboxCollection",
+    "ComboboxEmpty",
+    "ComboboxSeparator",
+    "ComboboxChips",
+    "ComboboxChip",
+    "ComboboxChipsInput",
+    "ComboboxTrigger",
+    "ComboboxValue",
+    "useComboboxAnchor",
+  ]}
+  anatomy={`<Combobox>
+	<ComboboxInput />
+	<ComboboxTrigger />
+	<ComboboxPopup>
+		<ComboboxList>
+			<ComboboxItem />
+		</ComboboxList>
+	</ComboboxPopup>
+</Combobox>;`}
+/>

package/content/components/context-menu.mdx

@@ -9,3 +9,32 @@ description: Displays a context menu that appears at the pointer on right click
 # Installation
 
 <InstallationBlock name="context-menu" />
+
+## Usage
+
+<UsageSection
+  from="@/components/ui/context-menu"
+  imports={[
+    "ContextMenu",
+    "ContextMenuTrigger",
+    "ContextMenuPopup",
+    "ContextMenuItem",
+    "ContextMenuCheckboxItem",
+    "ContextMenuRadioItem",
+    "ContextMenuLabel",
+    "ContextMenuSeparator",
+    "ContextMenuShortcut",
+    "ContextMenuGroup",
+    "ContextMenuPortal",
+    "ContextMenuSub",
+    "ContextMenuSubPopup",
+    "ContextMenuSubTrigger",
+    "ContextMenuRadioGroup",
+  ]}
+  anatomy={`<ContextMenu>
+	<ContextMenuTrigger />
+	<ContextMenuPopup>
+		<ContextMenuItem />
+	</ContextMenuPopup>
+</ContextMenu>;`}
+/>

package/content/components/dialog.mdx

@@ -9,3 +9,36 @@ description: Modal overlay for confirmations and forms.
 ## Installation
 
 <InstallationBlock name="dialog" />
+
+## Usage
+
+<UsageSection
+  from="@/components/ui/dialog"
+  imports={[
+    "Dialog",
+    "DialogClose",
+    "DialogPopup",
+    "DialogDescription",
+    "DialogFooter",
+    "DialogHeader",
+    "DialogBackdrop",
+    "DialogPortal",
+    "DialogTitle",
+    "DialogTrigger",
+  ]}
+  anatomy={`<Dialog>
+	<DialogTrigger />
+	<DialogPortal>
+		<DialogBackdrop />
+		<DialogPopup>
+			<DialogHeader>
+				<DialogTitle />
+				<DialogDescription />
+			</DialogHeader>
+			<DialogFooter>
+				<DialogClose />
+			</DialogFooter>
+		</DialogPopup>
+	</DialogPortal>
+</Dialog>;`}
+/>

package/content/components/drawer.mdx

@@ -10,6 +10,44 @@ description: A slide-out panel from the edge of the screen.
 
 <InstallationBlock name="drawer" />
 
+## Usage
+
+<UsageSection
+  from="@/components/ui/drawer"
+  imports={[
+    "DrawerProvider",
+    "DrawerIndentBackground",
+    "DrawerIndent",
+    "Drawer",
+    "DrawerTrigger",
+    "DrawerPortal",
+    "DrawerClose",
+    "DrawerBackdrop",
+    "DrawerPopup",
+    "DrawerHeader",
+    "DrawerFooter",
+    "DrawerTitle",
+    "DrawerDescription",
+  ]}
+  anatomy={`<DrawerProvider>
+	<Drawer>
+		<DrawerTrigger />
+		<DrawerPortal>
+			<DrawerBackdrop />
+			<DrawerPopup>
+				<DrawerHeader>
+					<DrawerTitle />
+					<DrawerDescription />
+				</DrawerHeader>
+				<DrawerFooter>
+					<DrawerClose />
+				</DrawerFooter>
+			</DrawerPopup>
+		</DrawerPortal>
+	</Drawer>
+</DrawerProvider>;`}
+/>
+
 ## Examples
 
 ### Default

package/content/components/field.mdx

@@ -10,6 +10,27 @@ 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

package/content/components/fieldset.mdx

@@ -10,6 +10,16 @@ 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

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