@object-ui/components 2.0.0 → 3.0.0

package/src/stories-json/Accessibility.mdx

@@ -0,0 +1,297 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="Getting Started/Accessibility" />
+
+# Accessibility Reference
+
+ObjectUI targets **WCAG 2.1 Level AA** conformance. Every component inherits accessible
+primitives from [Radix UI](https://www.radix-ui.com/) and is styled with Tailwind CSS
+utility classes that respect user preferences for reduced motion and color contrast.
+
+---
+
+## Compliance Baseline
+
+| Standard | Level | Status |
+|---|---|---|
+| WCAG 2.1 | AA | ✅ Target conformance for all components |
+| WAI-ARIA 1.2 | — | ✅ Roles, states, and properties via Radix |
+| Section 508 | — | ✅ Covered by WCAG AA compliance |
+
+ObjectUI relies on **Radix UI** for its accessible primitive layer. Radix components
+ship with correct ARIA roles, keyboard interactions, and focus management built in.
+Shadcn UI wraps these primitives with Tailwind styling while preserving all accessibility
+behaviour.
+
+---
+
+## Keyboard Navigation Patterns
+
+All interactive components support keyboard navigation following WAI-ARIA authoring
+practices. Below is a reference of the patterns used across component types.
+
+### General Controls
+
+| Component | Key | Action |
+|---|---|---|
+| **Button** | `Enter` / `Space` | Activate the button |
+| **Link** | `Enter` | Follow the link |
+| **Toggle** | `Enter` / `Space` | Toggle the state |
+| All focusable | `Tab` | Move focus to next element |
+| All focusable | `Shift + Tab` | Move focus to previous element |
+
+### Composite Widgets
+
+| Component | Key | Action |
+|---|---|---|
+| **Tabs** | `Arrow Left` / `Arrow Right` | Move between tab triggers |
+| **Tabs** | `Enter` / `Space` | Activate focused tab |
+| **Tabs** | `Home` / `End` | Jump to first / last tab |
+| **Accordion** | `Arrow Up` / `Arrow Down` | Move between headers |
+| **Accordion** | `Enter` / `Space` | Expand / collapse section |
+| **Accordion** | `Home` / `End` | Jump to first / last header |
+| **Menu / DropdownMenu** | `Arrow Up` / `Arrow Down` | Navigate menu items |
+| **Menu / DropdownMenu** | `Enter` / `Space` | Activate item |
+| **Menu / DropdownMenu** | `Escape` | Close menu and return focus |
+| **NavigationMenu** | `Arrow Left` / `Arrow Right` | Move between top-level items |
+| **NavigationMenu** | `Arrow Down` | Open submenu |
+| **NavigationMenu** | `Escape` | Close submenu |
+
+### Form Fields
+
+| Component | Key | Action |
+|---|---|---|
+| **Input / Textarea** | Standard typing | Enter text |
+| **Select** | `Arrow Up` / `Arrow Down` | Navigate options |
+| **Select** | `Enter` | Select option |
+| **Select** | `Escape` | Close listbox |
+| **Checkbox** | `Space` | Toggle checked state |
+| **Radio Group** | `Arrow Up` / `Arrow Down` | Move selection |
+| **Switch** | `Space` | Toggle on/off |
+| **Slider** | `Arrow Left` / `Arrow Right` | Decrease / increase value |
+| **Slider** | `Home` / `End` | Set to minimum / maximum |
+| **DatePicker** | `Arrow Keys` | Navigate calendar grid |
+| **DatePicker** | `Enter` | Select date |
+| **DatePicker** | `Escape` | Close calendar popover |
+
+### Overlay Components
+
+| Component | Key | Action |
+|---|---|---|
+| **Dialog** | `Escape` | Close the dialog |
+| **Dialog** | `Tab` | Cycle focus within dialog (focus trap) |
+| **AlertDialog** | `Escape` | Close (if not critical) |
+| **AlertDialog** | `Tab` | Cycle focus within alert |
+| **Popover** | `Escape` | Close popover |
+| **Tooltip** | `Escape` | Dismiss tooltip |
+| **Sheet** | `Escape` | Close sheet overlay |
+| **Sheet** | `Tab` | Cycle focus within sheet |
+
+### Data Views (Plugins)
+
+| Component | Key | Action |
+|---|---|---|
+| **DataTable / Grid** | `Arrow Keys` | Navigate cells |
+| **DataTable / Grid** | `Enter` | Activate cell / begin editing |
+| **DataTable / Grid** | `Escape` | Cancel editing |
+| **DataTable / Grid** | `Tab` | Move to next focusable cell |
+| **Kanban** | `Tab` | Move between cards |
+| **Kanban** | `Enter` / `Space` | Open card detail |
+
+---
+
+## ARIA Roles and Attributes
+
+ObjectUI components emit the correct ARIA roles and attributes automatically through
+Radix primitives. Below is a reference of the key mappings.
+
+### Primitive Components
+
+| Component | ARIA Role | Key Attributes |
+|---|---|---|
+| **Button** | `button` | `aria-disabled`, `aria-pressed` (toggle) |
+| **Badge** | `status` | `aria-label` (when used as status indicator) |
+| **Card** | `region` | `aria-labelledby` (card title) |
+| **Separator** | `separator` | `aria-orientation` |
+| **Avatar** | `img` | `alt` text on image, fallback initials |
+| **Progress** | `progressbar` | `aria-valuenow`, `aria-valuemin`, `aria-valuemax` |
+| **Skeleton** | `status` | `aria-busy="true"`, `aria-label="Loading"` |
+
+### Composite Components
+
+| Component | ARIA Role | Key Attributes |
+|---|---|---|
+| **Tabs** | `tablist`, `tab`, `tabpanel` | `aria-selected`, `aria-controls`, `aria-labelledby` |
+| **Accordion** | `region` | `aria-expanded`, `aria-controls` on triggers |
+| **Breadcrumb** | `navigation` | `aria-label="Breadcrumb"`, `aria-current="page"` on active |
+| **NavigationMenu** | `navigation` | `aria-label`, `aria-expanded` on submenus |
+| **Carousel** | `region` | `aria-roledescription="carousel"`, `aria-label` on slides |
+
+### Form Components
+
+| Component | ARIA Role | Key Attributes |
+|---|---|---|
+| **Input** | `textbox` | `aria-required`, `aria-invalid`, `aria-describedby` (error/hint) |
+| **Textarea** | `textbox` | `aria-required`, `aria-invalid`, `aria-describedby` |
+| **Select** | `combobox` / `listbox` | `aria-expanded`, `aria-activedescendant`, `aria-required` |
+| **Checkbox** | `checkbox` | `aria-checked`, `aria-required` |
+| **Radio Group** | `radiogroup`, `radio` | `aria-checked`, `aria-required` |
+| **Switch** | `switch` | `aria-checked`, `aria-label` |
+| **Slider** | `slider` | `aria-valuenow`, `aria-valuemin`, `aria-valuemax`, `aria-label` |
+| **Label** | — | `for` / `htmlFor` association with input |
+
+### Overlay Components
+
+| Component | ARIA Role | Key Attributes |
+|---|---|---|
+| **Dialog** | `dialog` | `aria-modal="true"`, `aria-labelledby`, `aria-describedby` |
+| **AlertDialog** | `alertdialog` | `aria-modal="true"`, `aria-labelledby`, `aria-describedby` |
+| **Popover** | `dialog` | `aria-expanded` on trigger, auto `aria-labelledby` |
+| **Tooltip** | `tooltip` | `aria-describedby` on trigger element |
+| **Sheet** | `dialog` | `aria-modal="true"`, `aria-labelledby` |
+| **DropdownMenu** | `menu`, `menuitem` | `aria-expanded`, `aria-haspopup` |
+| **ContextMenu** | `menu`, `menuitem` | `aria-expanded`, `aria-haspopup` |
+
+### Data View Components
+
+| Component | ARIA Role | Key Attributes |
+|---|---|---|
+| **DataTable** | `table`, `row`, `cell` | `aria-sort` on sortable columns, `aria-rowcount` |
+| **Grid (AG Grid)** | `grid`, `row`, `gridcell` | `aria-colcount`, `aria-rowindex`, `aria-selected` |
+| **Kanban** | `list`, `listitem` | `aria-label` per column, `aria-grabbed` on draggable cards |
+
+---
+
+## Screen Reader Behaviour
+
+ObjectUI components are designed to work seamlessly with screen readers
+(NVDA, JAWS, VoiceOver, TalkBack). Key behaviours include:
+
+### Focus Management
+- **Dialogs and Sheets** trap focus within the overlay while open. On close, focus
+  returns to the trigger element.
+- **Menus and Popovers** return focus to their trigger on dismiss.
+- **Toast notifications** use `role="status"` with `aria-live="polite"` so screen
+  readers announce them without interrupting the user.
+
+### Live Regions
+- **Form validation errors** are linked via `aria-describedby`, so errors are announced
+  when the field receives focus.
+- **Loading states** use `aria-busy="true"` on the loading container and `aria-live`
+  regions to announce completion.
+- **Toast / Alert** components use `aria-live="polite"` or `aria-live="assertive"`
+  depending on urgency.
+
+### Landmark Regions
+- **AppShell** emits `<header>`, `<nav>`, `<main>`, and `<aside>` landmarks so screen
+  reader users can jump between sections.
+- **Breadcrumb** uses `<nav aria-label="Breadcrumb">` for quick landmark navigation.
+- **Sidebar** uses `<aside>` with a descriptive `aria-label`.
+
+### Announcements
+- **Sortable table columns** announce sort direction changes via `aria-sort`.
+- **Accordion** sections announce expanded/collapsed state.
+- **Tabs** announce the active tab label on selection.
+- **Carousel** announces slide transitions with `aria-roledescription`.
+
+---
+
+## Color Contrast Requirements
+
+ObjectUI uses Tailwind CSS design tokens (CSS custom properties) for all color
+values. The default theme meets WCAG AA contrast ratios:
+
+| Element | Minimum Ratio | Standard |
+|---|---|---|
+| Body text (`foreground` on `background`) | **4.5 : 1** | WCAG AA — Normal text |
+| Large text (≥ 18pt or ≥ 14pt bold) | **3 : 1** | WCAG AA — Large text |
+| UI components and graphical objects | **3 : 1** | WCAG 2.1 SC 1.4.11 |
+| Focus indicators | **3 : 1** | WCAG 2.1 SC 1.4.11 |
+
+### Theme Tokens
+
+All colors are defined as CSS variables in HSL format:
+
+```css
+:root {
+  --background: 0 0% 100%;
+  --foreground: 222 84% 5%;
+  --primary: 222 47% 11%;
+  --primary-foreground: 210 40% 98%;
+  --destructive: 0 84% 60%;
+  --destructive-foreground: 0 0% 98%;
+  --muted: 210 40% 96%;
+  --muted-foreground: 215 16% 47%;
+  /* ...additional tokens */
+}
+```
+
+When customising tokens, verify contrast ratios with a tool such as the
+[WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/) or the
+built-in Storybook accessibility panel.
+
+### Dark Mode
+
+ObjectUI supports a `.dark` class on the root element. The dark theme ships with
+its own set of tokens that maintain the same contrast ratios:
+
+```css
+.dark {
+  --background: 222 84% 5%;
+  --foreground: 210 40% 98%;
+  /* ...dark tokens */
+}
+```
+
+### Focus Indicators
+
+All interactive elements display a visible focus ring when navigated via keyboard.
+The default ring uses the `--ring` token and applies a `2px` outline with a `2px`
+offset, ensuring it meets the **3 : 1** non-text contrast requirement.
+
+```css
+:root {
+  --ring: 222 47% 11%;
+}
+```
+
+> **Tip:** Never remove focus outlines (`outline: none`) without providing an
+> equivalent visible indicator. ObjectUI's `focus-visible` styles handle this
+> automatically.
+
+---
+
+## Testing Accessibility
+
+### Storybook A11y Addon
+
+Every story in this Storybook can be audited via the **Accessibility** panel in the
+addons bar. It runs [axe-core](https://github.com/dequelabs/axe-core) checks and
+reports violations, passes, and incomplete audits.
+
+### Automated Testing
+
+Use `vitest` with `@testing-library/jest-dom` matchers for assertions like
+`toBeVisible()`, `toHaveAccessibleName()`, and `toHaveAttribute('aria-expanded')`.
+
+```tsx
+import { render, screen } from '@testing-library/react';
+import { axe, toHaveNoViolations } from 'jest-axe';
+
+expect.extend(toHaveNoViolations);
+
+it('Button has no accessibility violations', async () => {
+  const { container } = render(<Button>Click me</Button>);
+  const results = await axe(container);
+  expect(results).toHaveNoViolations();
+});
+```
+
+### Manual Testing Checklist
+
+- [ ] Navigate all interactive elements using only the keyboard (`Tab`, `Enter`, `Space`, `Escape`, `Arrow` keys).
+- [ ] Verify visible focus indicators on every focusable element.
+- [ ] Test with a screen reader (VoiceOver on macOS, NVDA on Windows).
+- [ ] Check colour contrast using the browser DevTools or WebAIM checker.
+- [ ] Confirm the page is usable at 200% browser zoom.
+- [ ] Verify `prefers-reduced-motion` is respected (animations are disabled or reduced).

package/src/stories-json/EdgeCases.stories.tsx

@@ -0,0 +1,160 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SchemaRenderer } from '../SchemaRenderer';
+import type { BaseSchema } from '@object-ui/types';
+
+const meta = {
+  title: 'Components / Edge Cases',
+  component: SchemaRenderer,
+  parameters: { layout: 'padded' },
+  tags: ['autodocs'],
+  argTypes: {
+    schema: { table: { disable: true } },
+  },
+} satisfies Meta<any>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const renderStory = (args: any) => <SchemaRenderer schema={args as unknown as BaseSchema} />;
+
+// ── Empty States ──────────────────────────────────────────────
+
+export const EmptyStateDefault: Story = {
+  name: 'Empty State – Default',
+  render: renderStory,
+  args: {
+    type: 'empty',
+    description: 'No items to display',
+  } as any,
+};
+
+export const EmptyStateWithAction: Story = {
+  name: 'Empty State – With Action',
+  render: renderStory,
+  args: {
+    type: 'empty',
+    description: 'No results found. Try a different search or create a new item.',
+    children: [
+      { type: 'button', content: 'Create New', variant: 'default', size: 'sm' },
+    ],
+  } as any,
+};
+
+// ── Loading / Spinner ─────────────────────────────────────────
+
+export const SpinnerSmall: Story = {
+  name: 'Spinner – Small',
+  render: renderStory,
+  args: {
+    type: 'spinner',
+    size: 'sm',
+    className: 'text-primary',
+  } as any,
+};
+
+export const SpinnerLarge: Story = {
+  name: 'Spinner – Large',
+  render: renderStory,
+  args: {
+    type: 'spinner',
+    size: 'lg',
+    className: 'text-primary',
+  } as any,
+};
+
+export const LoadingWithText: Story = {
+  name: 'Loading – With Text',
+  render: renderStory,
+  args: {
+    type: 'loading',
+    text: 'Please wait while we fetch your data…',
+    className: 'h-[200px]',
+  } as any,
+};
+
+// ── Overflow / Long Text ──────────────────────────────────────
+
+const LONG_TEXT =
+  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.';
+
+export const CardWithLongText: Story = {
+  name: 'Card – Very Long Text',
+  render: renderStory,
+  args: {
+    type: 'card',
+    className: 'w-[350px]',
+    title: 'This is an extremely long card title that should test how the component handles overflow and text wrapping gracefully',
+    description: LONG_TEXT,
+    children: [
+      {
+        type: 'text',
+        content: LONG_TEXT + ' ' + LONG_TEXT,
+      },
+    ],
+  } as any,
+};
+
+export const BadgeWithLongText: Story = {
+  name: 'Badge – Very Long Text',
+  render: renderStory,
+  args: {
+    type: 'badge',
+    label: 'This is an unusually long badge label that tests truncation and overflow behaviour in tight layouts',
+  } as any,
+};
+
+export const ButtonWithIconAndLongText: Story = {
+  name: 'Button – Icon + Long Text',
+  render: (args: any) => <SchemaRenderer schema={args as unknown as BaseSchema} />,
+  args: {
+    type: 'button',
+    props: { variant: 'default' },
+    children: [
+      { type: 'icon', name: 'download', className: 'mr-2 h-4 w-4' },
+      {
+        type: 'text',
+        content: 'Download All Reports For The Current Financial Year Including Amendments',
+      },
+    ],
+  } as any,
+};
+
+// ── RTL Layout ────────────────────────────────────────────────
+
+export const RTLCard: Story = {
+  name: 'RTL – Card Layout',
+  render: (args: any) => (
+    <div dir="rtl">
+      <SchemaRenderer schema={args as unknown as BaseSchema} />
+    </div>
+  ),
+  args: {
+    type: 'card',
+    className: 'w-[350px]',
+    title: 'عنوان البطاقة',
+    description: 'هذا النص باللغة العربية لاختبار تخطيط الاتجاه من اليمين إلى اليسار.',
+    children: [
+      { type: 'text', content: 'محتوى البطاقة الرئيسي يظهر هنا باللغة العربية.' },
+    ],
+    footer: [
+      { type: 'button', props: { variant: 'outline' }, children: [{ type: 'text', content: 'إلغاء' }] },
+      { type: 'button', children: [{ type: 'text', content: 'حفظ' }] },
+    ],
+  } as any,
+};
+
+export const RTLAlert: Story = {
+  name: 'RTL – Alert',
+  render: (args: any) => (
+    <div dir="rtl">
+      <SchemaRenderer schema={args as unknown as BaseSchema} />
+    </div>
+  ),
+  args: {
+    type: 'alert',
+    variant: 'destructive',
+    title: 'خطأ',
+    description: 'انتهت صلاحية الجلسة. الرجاء تسجيل الدخول مرة أخرى.',
+    className: 'w-[400px]',
+  } as any,
+};

package/src/stories-json/GettingStarted.mdx

@@ -0,0 +1,89 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="Getting Started" />
+
+# ObjectUI Component Library
+
+ObjectUI is a **server-driven UI engine** that renders enterprise interfaces from JSON metadata.
+Built on **React**, **Tailwind CSS**, and **Shadcn UI (Radix)**, it bridges the speed of
+low-code with the design quality of hand-crafted components.
+
+## Installation
+
+```bash
+# Core packages
+pnpm add @object-ui/types @object-ui/core @object-ui/react
+
+# UI layer
+pnpm add @object-ui/components @object-ui/fields @object-ui/layout
+```
+
+Peer dependencies — make sure these are in your project:
+
+```bash
+pnpm add react react-dom tailwindcss
+```
+
+## Quick Usage
+
+```tsx
+import { ObjectRenderer } from '@object-ui/react';
+
+const schema = {
+  type: 'Card',
+  props: { title: 'Hello' },
+  children: [
+    {
+      type: 'Text',
+      props: { content: 'Rendered from JSON!' },
+    },
+  ],
+};
+
+export default function App() {
+  return <ObjectRenderer schema={schema} />;
+}
+```
+
+The `ObjectRenderer` resolves each node in the schema tree against the **Component Registry**,
+producing a fully interactive React tree.
+
+## Accessibility
+
+Every component in ObjectUI follows the **WAI-ARIA** authoring practices provided by
+[Radix UI](https://www.radix-ui.com/). This means:
+
+- Correct ARIA roles and attributes out of the box
+- Full keyboard navigation support
+- Focus management for overlays, dialogs, and menus
+- Screen-reader-friendly labels and live regions
+
+Run the Storybook accessibility addon (included) to audit any story for violations.
+
+## Theme Configuration
+
+ObjectUI uses Tailwind CSS for styling. Customise the design tokens through your
+`tailwind.config` and CSS variables:
+
+```css
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222 84% 5%;
+    --primary: 222 47% 11%;
+    --primary-foreground: 210 40% 98%;
+    /* ...other tokens */
+  }
+}
+```
+
+All Shadcn-based components pick up these tokens automatically — no prop drilling required.
+
+## Explore
+
+Use the sidebar to browse every component. Each story shows:
+
+- **Live preview** — interact directly in the canvas
+- **Controls** — tweak props in real time
+- **Docs** — auto-generated API tables (when tagged with `autodocs`)
+- **Accessibility** — axe audit panel

package/src/stories-json/Introduction.mdx

@@ -0,0 +1,127 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="Getting Started/Introduction" />
+
+# ObjectUI — Universal Server-Driven UI Engine
+
+ObjectUI is a **JSON-to-UI rendering engine** for React that transforms declarative schemas
+into fully interactive enterprise interfaces. Built on **Shadcn UI**, **Radix Primitives**,
+and **Tailwind CSS**, it bridges the speed of low-code platforms with the design quality of
+hand-crafted components.
+
+---
+
+## Why ObjectUI?
+
+| Benefit | Description |
+|---|---|
+| **Schema-Driven** | Define your UI as JSON — render it anywhere with zero custom JSX. |
+| **Enterprise-Ready** | Dashboards, data grids, Kanbans, forms, and CRUDs out of the box. |
+| **Accessible by Default** | Every component inherits WAI-ARIA patterns from Radix UI. |
+| **Themeable** | Tailwind CSS design tokens + CSS variables — no prop drilling required. |
+| **Backend Agnostic** | Works with any API or data source; no server lock-in. |
+
+---
+
+## Architecture Overview
+
+ObjectUI follows a layered architecture where each layer has a single responsibility:
+
+```
+┌─────────────────────────────────────────────────────┐
+│                    Your Application                  │
+├─────────────────────────────────────────────────────┤
+│              @object-ui/react  (Runtime)             │
+│         ObjectRenderer · SchemaRenderer · Hooks      │
+├──────────┬──────────────────────────┬───────────────┤
+│ Plugins  │       @object-ui/fields  │  @object-ui/  │
+│ Grid,    │  Text, Number, Select,   │    layout     │
+│ Kanban,  │  Date, Checkbox, …       │  AppShell,    │
+│ Charts,  │                          │  Sidebar,     │
+│ Form, …  │                          │  Header       │
+├──────────┴──────────────────────────┴───────────────┤
+│           @object-ui/components  (Atoms)             │
+│     Button · Card · Badge · Dialog · Tabs · …        │
+├─────────────────────────────────────────────────────┤
+│              @object-ui/core  (Engine)               │
+│   Component Registry · Schema Validation ·           │
+│   Expression Evaluation · Data Binding               │
+├─────────────────────────────────────────────────────┤
+│              @object-ui/types  (Protocol)            │
+│     ComponentSchema · ActionSchema · FieldSchema     │
+│                  Pure TypeScript — 0 deps            │
+└─────────────────────────────────────────────────────┘
+```
+
+### Layer Breakdown
+
+1. **`@object-ui/types`** — Pure TypeScript interfaces that define the JSON protocol.
+   Zero runtime dependencies.
+2. **`@object-ui/core`** — The rendering engine: component registry, schema validation,
+   expression evaluation (`visible: "${data.age > 18}"`), and data binding. No UI code.
+3. **`@object-ui/components`** — Shadcn-based UI atoms (Button, Card, Badge, Dialog, etc.).
+   Pure presentation — no business logic.
+4. **`@object-ui/fields`** — Standard field renderers for form inputs (Text, Number,
+   Select, Date). Each field implements the `FieldWidgetProps` contract.
+5. **`@object-ui/layout`** — Page-level structure components (AppShell, Header, Sidebar).
+   Routing-aware composition.
+6. **`@object-ui/plugin-*`** — Complex view widgets (Grid, Kanban, Charts, Map, Gantt,
+   Form, Timeline). Heavy third-party dependencies are isolated here.
+7. **`@object-ui/react`** — The public runtime entry point that ties everything together.
+   Provides `ObjectRenderer`, hooks, and provider components.
+
+---
+
+## Quick Start
+
+```tsx
+import { ObjectRenderer } from '@object-ui/react';
+
+const schema = {
+  type: 'Card',
+  props: { title: 'Welcome' },
+  children: [
+    { type: 'Text', props: { content: 'Rendered from JSON!' } },
+    { type: 'Button', props: { label: 'Click me', variant: 'default' } },
+  ],
+};
+
+export default function App() {
+  return <ObjectRenderer schema={schema} />;
+}
+```
+
+The `ObjectRenderer` walks the schema tree, resolves each node against the **Component
+Registry**, and produces a fully interactive React component tree.
+
+---
+
+## Browsing This Storybook
+
+Use the **sidebar** on the left to explore every component. Stories are organised into:
+
+| Section | What You'll Find |
+|---|---|
+| **Getting Started** | Introduction, data binding guides, and setup instructions. |
+| **Primitives** | Base Shadcn atoms — Buttons, Cards, Badges, Inputs, Dialogs, and more. |
+| **Fields** | Form field renderers — text, number, select, date, checkbox, etc. |
+| **Plugins** | Complex view widgets — Data Grid, Kanban, Charts, Map, Gantt, Timeline. |
+| **Templates** | Pre-built page layouts — Dashboards, Reports, Sidebar navigation. |
+| **Apps** | Full application demos (e.g. CRM) composed from multiple plugins. |
+
+Each story provides:
+
+- **Canvas** — Live interactive preview.
+- **Controls** — Tweak JSON props in real time via the controls panel.
+- **Docs** — Auto-generated API reference (for stories tagged `autodocs`).
+- **Accessibility** — axe-core audit panel to check WCAG compliance.
+
+---
+
+## Documentation
+
+Full documentation, migration guides, and API references are available at the
+[ObjectUI docs site](https://objectui.dev).
+
+For source code and contribution guidelines, visit the
+[GitHub repository](https://github.com/objectstack-ai/objectui).

package/src/ui/slider.tsx

@@ -16,7 +16,7 @@ import { cn } from "../lib/utils"
 const Slider = React.forwardRef<
   React.ElementRef<typeof SliderPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
->(({ className, ...props }, ref) => (
+>(({ className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }, ref) => (
   <SliderPrimitive.Root
     ref={ref}
     className={cn(
@@ -28,7 +28,11 @@ const Slider = React.forwardRef<
     <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
       <SliderPrimitive.Range className="absolute h-full bg-primary" />
     </SliderPrimitive.Track>
-    <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
+    <SliderPrimitive.Thumb
+      aria-label={ariaLabel}
+      aria-labelledby={ariaLabelledBy}
+      className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
+    />
   </SliderPrimitive.Root>
 ))
 Slider.displayName = SliderPrimitive.Root.displayName