shapes-ui 0.4.2 → 0.6.0

package/.github/ISSUE_TEMPLATE/bug_report.yml

@@ -0,0 +1,47 @@
+name: Bug report
+description: Report a reproducible bug in Shapes UI
+title: "[Bug]: "
+labels:
+  - bug
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thanks for filing a bug report.
+  - type: input
+    id: summary
+    attributes:
+      label: Summary
+      description: Short description of the bug
+      placeholder: Button variant "ghost" has wrong text color
+    validations:
+      required: true
+  - type: textarea
+    id: steps
+    attributes:
+      label: Steps to reproduce
+      description: Exact steps so we can reproduce reliably
+      placeholder: |
+        1. Go to ...
+        2. Click ...
+        3. See error ...
+    validations:
+      required: true
+  - type: textarea
+    id: expected
+    attributes:
+      label: Expected behavior
+    validations:
+      required: true
+  - type: textarea
+    id: actual
+    attributes:
+      label: Actual behavior
+    validations:
+      required: true
+  - type: input
+    id: environment
+    attributes:
+      label: Environment
+      description: OS, browser, package manager, Node.js version
+      placeholder: macOS 15, Chrome 141, pnpm 9, Node 24

package/.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1 @@
+blank_issues_enabled: false

package/.github/ISSUE_TEMPLATE/feature_request.yml

@@ -0,0 +1,31 @@
+name: Feature request
+description: Propose an improvement or new component
+title: "[Feature]: "
+labels:
+  - enhancement
+body:
+  - type: input
+    id: problem
+    attributes:
+      label: Problem to solve
+      description: What problem are you trying to solve?
+      placeholder: I need a compact tooltip pattern for dense UIs
+    validations:
+      required: true
+  - type: textarea
+    id: proposal
+    attributes:
+      label: Proposed solution
+      description: Describe the API/UX you expect
+    validations:
+      required: true
+  - type: textarea
+    id: alternatives
+    attributes:
+      label: Alternatives considered
+      description: Any alternatives or workarounds you tried?
+  - type: textarea
+    id: additional
+    attributes:
+      label: Additional context
+      description: Links, mockups, examples, prior art

package/.github/pull_request_template.md

@@ -0,0 +1,14 @@
+## Summary
+
+-
+
+## Changes
+
+-
+
+## Checklist
+
+- [ ] I ran `pnpm test`
+- [ ] I ran `pnpm lint`
+- [ ] I added/updated docs or examples when needed
+- [ ] I added a changeset if this should be released

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

@@ -0,0 +1,75 @@
+name: PR Preview
+
+on:
+    pull_request:
+        types:
+            - opened
+            - reopened
+            - synchronize
+    pull_request_target:
+        types:
+            - closed
+
+concurrency:
+    group: pr-preview-${{ github.event.pull_request.number }}
+    cancel-in-progress: true
+
+jobs:
+    deploy-preview:
+        name: Deploy Preview
+        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
+            pull-requests: write
+        steps:
+            - name: Checkout Repo
+              uses: actions/checkout@v4
+
+            - name: Setup Node.js 24
+              uses: actions/setup-node@v4
+              with:
+                  node-version: 24
+
+            - name: Install pnpm
+              uses: pnpm/action-setup@v3
+              with:
+                  version: 9
+
+            - name: Install Dependencies
+              run: pnpm install --frozen-lockfile
+
+            - 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 }}"
+
+            - name: Comment Preview URL
+              uses: marocchino/sticky-pull-request-comment@v2
+              with:
+                  header: preview-url
+                  message: |
+                      Preview deployed
+
+                      https://shapes-ui-pr-${{ github.event.pull_request.number }}.workers.dev
+
+    cleanup-preview:
+        name: Cleanup Preview
+        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/.github/workflows/release.yml

@@ -44,3 +44,11 @@ jobs:
           title: "chore: version packages"
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Deploy Production Worker
+        if: steps.changesets.outputs.published == 'true'
+        uses: cloudflare/wrangler-action@v3
+        with:
+          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          command: deploy

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # 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
+
+- 7d13a9b: Added tooltip and examples
+- 798be1a: Updated component examples and styles
+
+### Patch Changes
+
+- 357a7eb: Switch style and exmaple updates
+- 43bfe67: Updated toolbar and examples
+- bc2c06c: UPdated select and select examples
+- 84e7508: Updated toggle and toggle group styles and examples
+- 1c68cea: Updated slider component and examples
+- 46d5f5d: Updated mobile nav to use drawer cmpoennt
+- 8fc90b8: Updated toast ui and examples
+- 33459d3: Updated examples and dependencies
+- 8ce682c: Updated tabs styles and examples
+
 ## 0.4.2
 
 ### Patch Changes

package/CODE_OF_CONDUCT.md

@@ -0,0 +1,41 @@
+# Code of Conduct
+
+## Our pledge
+
+We are committed to making participation in this project a harassment-free experience for everyone.
+
+## Our standards
+
+Examples of behavior that contributes to a positive environment:
+
+- Being respectful and constructive
+- Giving and accepting feedback gracefully
+- Focusing on what is best for the community
+- Showing empathy toward other people
+
+Examples of unacceptable behavior:
+
+- Harassment, discrimination, or personal attacks
+- Trolling, insulting, or derogatory comments
+- Public or private intimidation
+- Publishing others' private information without permission
+
+## Enforcement responsibilities
+
+Project maintainers are responsible for clarifying and enforcing standards of acceptable behavior.
+
+## Scope
+
+This Code of Conduct applies in project spaces and in public spaces when an individual is representing the project.
+
+## Reporting
+
+To report violations, contact:
+
+- **Email:** conduct@shapes-ui.dev
+
+All reports will be reviewed and investigated promptly and fairly.
+
+## Enforcement
+
+Maintainers may take any action they deem appropriate in response to unacceptable behavior, including warning or temporary/permanent ban from participation.

package/CONTRIBUTING.md

@@ -0,0 +1,52 @@
+# Contributing to Shapes UI
+
+Thanks for your interest in contributing.
+
+## Development setup
+
+- Use Node.js 24+
+- Use pnpm 9+
+
+Install dependencies:
+
+```bash
+pnpm install
+```
+
+Run locally:
+
+```bash
+pnpm dev
+```
+
+## Common commands
+
+- `pnpm dev` — start local dev server
+- `pnpm test` — run tests
+- `pnpm lint` — run lint checks
+- `pnpm build` — build app
+- `pnpm build:cli` — build CLI
+- `pnpm gen:examples` — generate examples
+- `pnpm gen:registry` — generate registry artifacts
+
+## Pull requests
+
+Before opening a PR:
+
+1. Keep changes focused and scoped.
+2. Run `pnpm test` and `pnpm lint`.
+3. Update docs/examples when behaviour changes.
+4. Add a changeset when a publishable package change is intended.
+
+PRs get a preview deployment automatically.
+
+## Release process
+
+Releases are handled through Changesets:
+
+- A release PR is created from changesets.
+- Production deployment runs when the release is published.
+
+## Reporting issues
+
+Use the issue templates for bug reports and feature requests so maintainers can triage quickly.

package/README.md

@@ -1 +1,19 @@
 # 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)
+- [Code of Conduct](CODE_OF_CONDUCT.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