shapes-ui 0.4.1 → 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/.idea/compiler.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="TypeScriptCompiler">
+    <option name="useServicePoweredTypesWasEnabledByExperiment" value="true" />
+  </component>
+</project>

package/.idea/copilot.data.migration.ask2agent.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="Ask2AgentMigrationStateService">
+    <option name="migrationStatus" value="COMPLETED" />
+  </component>
+</project>

package/.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # 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
+
+- 476148c: Updated menubar docs and stylings.
+- 60ac79e: Updated meter examples and stylings
+- a591c64: Added examples for preview card
+- 7f642b5: Updated number field component and examples
+- 30ebfe7: UPdated progress styles and example
+- c2be2cd: Updated popover component and examples
+- 2d38dfc: Updated navihation menu styles and demo
+
 ## 0.4.1
 
 ### 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/menubar.mdx

@@ -10,8 +10,10 @@ description: Menu bar providing commands and options for your application with d
 
 <InstallationBlock name="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
 
-### Demo
+### Submenus
 
-<RenderPreview name="menubar-demo" />
+<RenderPreview name="menubar-advanced" />

package/content/components/meter.mdx

@@ -12,6 +12,18 @@ description: Meter component that provides a graphical display of a numeric valu
 
 ## Examples
 
-### Demo
+### Default
 
 <RenderPreview name="meter-demo" />
+
+### Value only
+
+<RenderPreview name="meter-no-label" />
+
+### Label only
+
+<RenderPreview name="meter-no-value" />
+
+### Flip
+
+<RenderPreview name="meter-flip" />

package/content/components/navigation-menu.mdx

@@ -3,3 +3,9 @@ title: Navigation Menu
 slug: navigation-menu
 description: Navigation menu component for displaying a collection of links and dropdown menus.
 ---
+
+<RenderPreview name="navigation-menu-demo" />
+
+## Installation
+
+<InstallationBlock name="navigation-menu" />

package/content/components/number-field.mdx

@@ -3,3 +3,27 @@ title: Number Field
 slug: number-field
 description: An input field component specifically designed for numeric input, with built-in validation and formatting options
 ---
+
+<RenderPreview name="number-field-demo" />
+
+## Installation
+
+<InstallationBlock name="number-field" />
+
+## Examples
+
+### Basic
+
+Use data-align `start` and `end` to position increment and decrement controls at the start or end of the input.
+
+<RenderPreview name="number-field-demo" />
+
+### Scrub area
+
+A number field with a scrub area (drag over input to change value).
+
+<RenderPreview name="number-field-scrub" />
+
+### Buttons at end
+
+<RenderPreview name="number-field-buttons-end" />

package/content/components/popover.mdx

@@ -3,3 +3,23 @@ title: Popover
 slug: popover
 description: Popover component that displays content anchored to a trigger element.
 ---
+
+<RenderPreview name="popover-demo" />
+
+## Installation
+
+<InstallationBlock name="popover" />
+
+## Examples
+
+### Basic
+
+<RenderPreview name="popover-demo" />
+
+### Sides
+
+<RenderPreview name="popover-positions" />
+
+### Form
+
+<RenderPreview name="popover-form" />

package/content/components/preview-card.mdx

@@ -3,3 +3,14 @@ title: Preview Card
 slug: preview-card
 description: Component that displays a preview of linked content when hovered.
 ---
+
+<RenderPreview name={'preview-card-demo'} />
+
+
+## Installation
+<InstallationBlock name="preview-card" />
+
+## Examples
+
+### Composed as CTA
+<RenderPreview name="preview-card-links" />

package/content/components/progress.mdx

@@ -3,3 +3,5 @@ title: Progress
 slug: progress
 description: Progress bar component for displaying the status of a task.
 ---
+
+<RenderPreview name={'progress-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" />