shapes-ui 0.4.2 → 0.5.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,68 @@
+name: PR Preview
+
+on:
+    pull_request:
+        types:
+            - opened
+            - reopened
+            - synchronize
+            - closed
+
+concurrency:
+    group: pr-preview-${{ github.event.pull_request.number }}
+    cancel-in-progress: true
+
+jobs:
+    deploy-preview:
+        name: Deploy Preview
+        if: github.event.action != 'closed'
+        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:
+                  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.action == 'closed'
+        runs-on: ubuntu-latest
+        permissions:
+            contents: read
+        steps:
+            - name: Delete Preview Worker
+              uses: cloudflare/wrangler-action@v3
+              with:
+                  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,24 @@
 # shapes-ui
 
+## 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,6 @@
 # Shapes UI
+
+## Community
+
+- [Contributing guide](CONTRIBUTING.md)
+- [Code of Conduct](CODE_OF_CONDUCT.md)

package/content/components/field.mdx

@@ -14,7 +14,7 @@ description: Accessible form field components with built-in validation, labels,
 
 ### Default
 
-Compose fields using `FieldRoot`, `FieldLabel`, `FieldControl`, and `FieldDescription`.
+Compose fields using `Field`, `FieldLabel`, `FieldControl`, and `FieldDescription`.
 
 <RenderPreview name="field-demo" />
 
@@ -38,6 +38,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

@@ -14,7 +14,7 @@ description: Groups related form fields with an accessible legend for semantic o
 
 ### 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/radio.mdx

@@ -3,3 +3,23 @@ title: Radio
 slug: radio
 description: Radio button component for selecting a single option from a group.
 ---
+
+<RenderPreview name="radio-demo" />
+
+## Installation
+
+<InstallationBlock name="radio" />
+
+## Examples
+
+### Orientation
+
+<RenderPreview name="radio-orientation" />
+
+### Card Style
+
+<RenderPreview name="radio-card" />
+
+### Description
+
+<RenderPreview name="radio-description" />

package/content/components/select.mdx

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

@@ -3,3 +3,51 @@ title: Slider
 slug: slider
 description: Slider component for selecting a value or range of values.
 ---
+
+<RenderPreview name="slider-demo" />
+
+## Installation
+
+<InstallationBlock name="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,29 @@ title: Switch
 slug: switch
 description: Switch component that indicates whether a setting is on or off.
 ---
+
+<RenderPreview name="switch-demo" />
+
+## Installation
+
+<InstallationBlock name="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,35 @@ title: Tabs
 slug: tabs
 description: Tabs component for toggling between related panels on the same page.
 ---
+
+<RenderPreview name="tabs-demo" />
+
+## Installation
+
+<InstallationBlock name="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" />

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],
 });