@wakastellar/ui 3.5.2 → 4.0.0

package/src/components/popover/Popover.stories.tsx

@@ -16,16 +16,14 @@ const meta: Meta<typeof Popover> = {
       },
     },
   },
-  tags: ['autodocs'],
 }
 
 export default meta
 type Story = StoryObj<typeof Popover>
 
 export const Default: Story = {
-  args: {},
-  render: (args) => (
-    <Popover {...args}>
+  render: () => (
+    <Popover>
       <PopoverTrigger asChild>
         <Button variant="outline">Open popover</Button>
       </PopoverTrigger>
@@ -197,3 +195,111 @@ export const SettingsPopover: Story = {
     </Popover>
   ),
 }
+
+export const ColorPicker: Story = {
+  render: () => (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button variant="outline" className="gap-2">
+          <span className="h-4 w-4 rounded-sm border bg-emerald-500" />
+          Pick a color
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-64">
+        <div className="space-y-3">
+          <p className="text-sm font-medium">Theme color</p>
+          <div className="grid grid-cols-6 gap-2">
+            {[
+              'bg-rose-500',
+              'bg-amber-500',
+              'bg-emerald-500',
+              'bg-sky-500',
+              'bg-violet-500',
+              'bg-zinc-500',
+            ].map((c) => (
+              <button
+                key={c}
+                aria-label={`Pick color ${c}`}
+                className={`h-8 w-8 rounded-md border ring-offset-2 transition hover:ring-2 hover:ring-primary ${c}`}
+              />
+            ))}
+          </div>
+          <Input placeholder="Custom hex (#RRGGBB)" className="font-mono text-sm" />
+        </div>
+      </PopoverContent>
+    </Popover>
+  ),
+}
+
+export const Confirmation: Story = {
+  render: () => (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button variant="destructive" size="sm">
+          Delete
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-72" side="top" align="end">
+        <div className="space-y-3">
+          <p className="text-sm font-semibold">Delete this item?</p>
+          <p className="text-xs text-muted-foreground">
+            This action cannot be undone. The item will be removed permanently.
+          </p>
+          <div className="flex justify-end gap-2">
+            <Button size="sm" variant="ghost">
+              Cancel
+            </Button>
+            <Button size="sm" variant="destructive">
+              Delete
+            </Button>
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  ),
+}
+
+export const ProfileMenu: Story = {
+  render: () => (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button variant="ghost" className="h-9 gap-2 px-2">
+          <span className="flex h-7 w-7 items-center justify-center rounded-full bg-primary text-xs font-medium text-primary-foreground">
+            CY
+          </span>
+          <span className="text-sm">Cyprien</span>
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-60 p-2" align="end">
+        <div className="border-b px-2 py-2">
+          <p className="text-sm font-medium">Cyprien Maurice</p>
+          <p className="text-xs text-muted-foreground">cyprien@wakastart.app</p>
+        </div>
+        <nav className="mt-2 space-y-0.5">
+          <button className="flex w-full items-center justify-between rounded-md px-2 py-1.5 text-sm hover:bg-muted">
+            Account settings
+            <span className="text-xs text-muted-foreground">⌘,</span>
+          </button>
+          <button className="flex w-full items-center justify-between rounded-md px-2 py-1.5 text-sm hover:bg-muted">
+            Billing
+          </button>
+          <button className="flex w-full items-center justify-between rounded-md px-2 py-1.5 text-sm hover:bg-muted">
+            Switch workspace
+          </button>
+          <div className="my-1 border-t" />
+          <button className="flex w-full items-center rounded-md px-2 py-1.5 text-sm text-destructive hover:bg-destructive/10">
+            Sign out
+          </button>
+        </nav>
+      </PopoverContent>
+    </Popover>
+  ),
+}
+
+/**
+ * Playground — generated to make the Storybook Controls panel functional.
+ * Exposes a default arg set wired to the component via {...args}.
+ */
+export const Playground: Story = {
+  render: (args) => <Popover {...args} />,
+}

package/src/components/progress/Progress.mdx

@@ -0,0 +1,81 @@
+import { Meta, Canvas, Controls, Source, ArgTypes } from '@storybook/addon-docs/blocks'
+import * as Stories from './Progress.stories'
+
+<Meta of={Stories} />
+
+# Progress
+
+Indeterminate or determinate horizontal progress bar; animates value changes smoothly.
+
+## Installation
+
+The component is exported from the root entry point of `@wakastellar/ui`:
+
+<Source language="tsx" code={`import { Progress } from '@wakastellar/ui'`} />
+
+If you use the CLI scaffolder:
+
+<Source language="bash" code={`npx wakastellar-ui add progress`} />
+
+## Usage
+
+<Canvas of={Stories.Default} />
+
+<Controls of={Stories.Default} />
+
+## Examples
+
+### Values
+
+<Canvas of={Stories.Values} />
+
+### Animated
+
+<Canvas of={Stories.Animated} />
+
+### Sizes
+
+<Canvas of={Stories.Sizes} />
+
+### With Label
+
+<Canvas of={Stories.WithLabel} />
+
+### Indeterminate
+
+<Canvas of={Stories.Indeterminate} />
+
+### Stepped Upload
+
+<Canvas of={Stories.SteppedUpload} />
+
+### Error
+
+<Canvas of={Stories.Error} />
+
+
+## API Reference
+
+<ArgTypes of={Stories.Default} />
+
+## Accessibility
+
+- Full keyboard navigation (Tab, Shift+Tab, Enter, Space, Arrow keys where applicable).
+- Compatible with screen readers via Radix UI primitives.
+- Focus ring visible at all times; never `outline: none` without a replacement.
+- Color contrast meets WCAG AA in both light and dark themes.
+
+## Theming
+
+All visual tokens are CSS custom properties consumed via Tailwind v4. Override
+in your app's `globals.css` to customize:
+
+<Source language="css" code={`:root {
+  --primary: oklch(0.65 0.18 250);
+  --primary-foreground: oklch(0.98 0 0);
+}`} />
+
+## Related
+
+- See the audit fiche: \`docs/audit/components/progress.md\`
+- See the [accessibility dimension report](?path=/docs/dimensions-accessibility--docs)

package/src/components/progress/Progress.stories.tsx

@@ -13,7 +13,6 @@ const meta: Meta<typeof Progress> = {
       },
     },
   },
-  tags: ['autodocs'],
   argTypes: {
     value: {
       control: { type: 'range', min: 0, max: 100, step: 1 },
@@ -28,8 +27,9 @@ type Story = StoryObj<typeof Progress>
 export const Default: Story = {
   args: {
     value: 60,
-    className: 'w-[300px]',
+    className: "w-[300px]",
   },
+  render: (args) => <Progress {...args} />,
 }
 
 export const Values: Story = {
@@ -102,3 +102,54 @@ export const WithLabel: Story = {
     </div>
   ),
 }
+
+export const Indeterminate: Story = {
+  render: function IndeterminateProgress() {
+    const [value, setValue] = React.useState(0)
+    React.useEffect(() => {
+      const id = setInterval(() => {
+        setValue((v) => (v >= 100 ? 0 : v + 10))
+      }, 400)
+      return () => clearInterval(id)
+    }, [])
+    return (
+      <div className="w-[300px] space-y-2">
+        <span className="text-sm text-muted-foreground">Reconnecting…</span>
+        <Progress value={value} />
+      </div>
+    )
+  },
+}
+
+export const SteppedUpload: Story = {
+  render: () => (
+    <div className="w-[320px] space-y-3 rounded-md border p-4">
+      <div className="flex justify-between text-sm">
+        <span className="font-medium">design-system.fig</span>
+        <span className="text-muted-foreground">8.2 MB / 12.4 MB</span>
+      </div>
+      <Progress value={66} />
+      <p className="text-xs text-muted-foreground">
+        Encrypting chunks · 3 of 5 complete
+      </p>
+    </div>
+  ),
+}
+
+export const Error: Story = {
+  render: () => (
+    <div className="w-[300px] space-y-2">
+      <div className="flex justify-between text-sm">
+        <span className="text-destructive">Upload failed</span>
+        <span className="text-muted-foreground">42%</span>
+      </div>
+      <Progress
+        value={42}
+        className="[&>div]:bg-destructive"
+      />
+      <p className="text-xs text-destructive">
+        Connection lost. Retry to resume from 42%.
+      </p>
+    </div>
+  ),
+}

package/src/components/progress/index.tsx

@@ -8,6 +8,7 @@ const Progress = React.forwardRef<
 >(({ className, value, ...props }, ref) => (
   <ProgressPrimitive.Root
     ref={ref}
+    value={value}
     className={cn(
       "relative h-4 w-full overflow-hidden rounded-full bg-secondary",
       className

package/src/components/radio-group/RadioGroup.mdx

@@ -0,0 +1,77 @@
+import { Meta, Canvas, Controls, Source, ArgTypes } from '@storybook/addon-docs/blocks'
+import * as Stories from './RadioGroup.stories'
+
+<Meta of={Stories} />
+
+# RadioGroup
+
+Mutually exclusive selection control; integrates with react-hook-form.
+
+## Installation
+
+The component is exported from the root entry point of `@wakastellar/ui`:
+
+<Source language="tsx" code={`import { RadioGroup } from '@wakastellar/ui'`} />
+
+If you use the CLI scaffolder:
+
+<Source language="bash" code={`npx wakastellar-ui add radio-group`} />
+
+## Usage
+
+<Canvas of={Stories.Default} />
+
+<Controls of={Stories.Default} />
+
+## Examples
+
+### Horizontal
+
+<Canvas of={Stories.Horizontal} />
+
+### With Description
+
+<Canvas of={Stories.WithDescription} />
+
+### Disabled
+
+<Canvas of={Stories.Disabled} />
+
+### Form Example
+
+<Canvas of={Stories.FormExample} />
+
+### Plan Picker
+
+<Canvas of={Stories.PlanPicker} />
+
+### Segmented Theme
+
+<Canvas of={Stories.SegmentedTheme} />
+
+
+## API Reference
+
+<ArgTypes of={Stories.Default} />
+
+## Accessibility
+
+- Full keyboard navigation (Tab, Shift+Tab, Enter, Space, Arrow keys where applicable).
+- Compatible with screen readers via Radix UI primitives.
+- Focus ring visible at all times; never `outline: none` without a replacement.
+- Color contrast meets WCAG AA in both light and dark themes.
+
+## Theming
+
+All visual tokens are CSS custom properties consumed via Tailwind v4. Override
+in your app's `globals.css` to customize:
+
+<Source language="css" code={`:root {
+  --primary: oklch(0.65 0.18 250);
+  --primary-foreground: oklch(0.98 0 0);
+}`} />
+
+## Related
+
+- See the audit fiche: \`docs/audit/components/radio-group.md\`
+- See the [accessibility dimension report](?path=/docs/dimensions-accessibility--docs)

package/src/components/radio-group/RadioGroup.stories.tsx

@@ -13,7 +13,6 @@ const meta: Meta<typeof RadioGroup> = {
       },
     },
   },
-  tags: ['autodocs'],
 }
 
 export default meta
@@ -136,3 +135,57 @@ export const FormExample: Story = {
     </form>
   ),
 }
+
+export const PlanPicker: Story = {
+  render: () => (
+    <RadioGroup defaultValue="pro" className="grid w-[420px] gap-3">
+      {[
+        { value: 'starter', name: 'Starter', price: '$9', desc: 'Up to 3 seats. Perfect to try things out.' },
+        { value: 'pro', name: 'Pro', price: '$29', desc: 'Unlimited seats, priority support.' },
+        { value: 'enterprise', name: 'Enterprise', price: 'Custom', desc: 'SSO, audit logs, dedicated CSM.' },
+      ].map((plan) => (
+        <Label
+          key={plan.value}
+          htmlFor={`plan-${plan.value}`}
+          className="flex cursor-pointer items-start gap-3 rounded-lg border p-4 hover:bg-muted/40 has-[:checked]:border-primary has-[:checked]:bg-primary/5"
+        >
+          <RadioGroupItem value={plan.value} id={`plan-${plan.value}`} className="mt-1" />
+          <div className="flex flex-1 items-center justify-between gap-3">
+            <div className="space-y-0.5">
+              <p className="text-sm font-medium">{plan.name}</p>
+              <p className="text-xs font-normal text-muted-foreground">
+                {plan.desc}
+              </p>
+            </div>
+            <span className="text-sm font-semibold">{plan.price}</span>
+          </div>
+        </Label>
+      ))}
+    </RadioGroup>
+  ),
+}
+
+export const SegmentedTheme: Story = {
+  render: () => (
+    <RadioGroup defaultValue="system" className="flex gap-1 rounded-lg border p-1">
+      {[
+        { value: 'light', label: 'Light' },
+        { value: 'system', label: 'System' },
+        { value: 'dark', label: 'Dark' },
+      ].map((opt) => (
+        <Label
+          key={opt.value}
+          htmlFor={`theme-${opt.value}`}
+          className="flex-1 cursor-pointer rounded-md px-3 py-1.5 text-center text-sm font-normal text-muted-foreground transition has-[:checked]:bg-background has-[:checked]:font-medium has-[:checked]:text-foreground has-[:checked]:shadow-sm"
+        >
+          <RadioGroupItem
+            value={opt.value}
+            id={`theme-${opt.value}`}
+            className="sr-only"
+          />
+          {opt.label}
+        </Label>
+      ))}
+    </RadioGroup>
+  ),
+}

package/src/components/scroll-area/ScrollArea.mdx

@@ -0,0 +1,77 @@
+import { Meta, Canvas, Controls, Source, ArgTypes } from '@storybook/addon-docs/blocks'
+import * as Stories from './ScrollArea.stories'
+
+<Meta of={Stories} />
+
+# ScrollArea
+
+Custom-styled scrollbar container that preserves native scroll behavior.
+
+## Installation
+
+The component is exported from the root entry point of `@wakastellar/ui`:
+
+<Source language="tsx" code={`import { ScrollArea } from '@wakastellar/ui'`} />
+
+If you use the CLI scaffolder:
+
+<Source language="bash" code={`npx wakastellar-ui add scroll-area`} />
+
+## Usage
+
+<Canvas of={Stories.Default} />
+
+<Controls of={Stories.Default} />
+
+## Examples
+
+### Horizontal
+
+<Canvas of={Stories.Horizontal} />
+
+### List
+
+<Canvas of={Stories.List} />
+
+### Card
+
+<Canvas of={Stories.Card} />
+
+### Code Block
+
+<Canvas of={Stories.CodeBlock} />
+
+### Fixed Sidebar
+
+<Canvas of={Stories.FixedSidebar} />
+
+### Chat Transcript
+
+<Canvas of={Stories.ChatTranscript} />
+
+
+## API Reference
+
+<ArgTypes of={Stories.Default} />
+
+## Accessibility
+
+- Full keyboard navigation (Tab, Shift+Tab, Enter, Space, Arrow keys where applicable).
+- Compatible with screen readers via Radix UI primitives.
+- Focus ring visible at all times; never `outline: none` without a replacement.
+- Color contrast meets WCAG AA in both light and dark themes.
+
+## Theming
+
+All visual tokens are CSS custom properties consumed via Tailwind v4. Override
+in your app's `globals.css` to customize:
+
+<Source language="css" code={`:root {
+  --primary: oklch(0.65 0.18 250);
+  --primary-foreground: oklch(0.98 0 0);
+}`} />
+
+## Related
+
+- See the audit fiche: \`docs/audit/components/scroll-area.md\`
+- See the [accessibility dimension report](?path=/docs/dimensions-accessibility--docs)

package/src/components/scroll-area/ScrollArea.stories.tsx

@@ -13,7 +13,6 @@ const meta: Meta<typeof ScrollArea> = {
       },
     },
   },
-  tags: ['autodocs'],
 }
 
 export default meta
@@ -151,3 +150,60 @@ console.log(memoFib(100));`}</code>
     </ScrollArea>
   ),
 }
+
+export const FixedSidebar: Story = {
+  render: () => (
+    <ScrollArea className="h-[280px] w-[220px] rounded-md border">
+      <nav className="p-2">
+        {[
+          'Dashboard',
+          'Activity',
+          'Reports',
+          'Audit log',
+          'Members',
+          'Roles',
+          'Permissions',
+          'Integrations',
+          'Webhooks',
+          'API keys',
+          'Billing',
+          'Invoices',
+          'Plans',
+          'Notifications',
+          'Settings',
+        ].map((item) => (
+          <a
+            key={item}
+            href="#"
+            className="block rounded px-3 py-1.5 text-sm hover:bg-muted"
+          >
+            {item}
+          </a>
+        ))}
+      </nav>
+    </ScrollArea>
+  ),
+}
+
+export const ChatTranscript: Story = {
+  render: () => (
+    <ScrollArea className="h-[260px] w-[340px] rounded-md border p-4">
+      <div className="space-y-3 text-sm">
+        {Array.from({ length: 12 }).map((_, i) => (
+          <div
+            key={i}
+            className={
+              i % 2 === 0
+                ? 'rounded-lg bg-muted px-3 py-2'
+                : 'ml-8 rounded-lg bg-primary px-3 py-2 text-primary-foreground'
+            }
+          >
+            {i % 2 === 0
+              ? `Could you take a look at request #${1024 + i}?`
+              : 'On it — pulling the trace now.'}
+          </div>
+        ))}
+      </div>
+    </ScrollArea>
+  ),
+}

package/src/components/select/Select.mdx

@@ -0,0 +1,81 @@
+import { Meta, Canvas, Controls, Source, ArgTypes } from '@storybook/addon-docs/blocks'
+import * as Stories from './Select.stories'
+
+<Meta of={Stories} />
+
+# Select
+
+Accessible dropdown built on Radix UI; supports controlled and uncontrolled state.
+
+## Installation
+
+The component is exported from the root entry point of `@wakastellar/ui`:
+
+<Source language="tsx" code={`import { Select } from '@wakastellar/ui'`} />
+
+If you use the CLI scaffolder:
+
+<Source language="bash" code={`npx wakastellar-ui add select`} />
+
+## Usage
+
+<Canvas of={Stories.Default} />
+
+<Controls of={Stories.Default} />
+
+## Examples
+
+### With Groups
+
+<Canvas of={Stories.WithGroups} />
+
+### With Default Value
+
+<Canvas of={Stories.WithDefaultValue} />
+
+### Disabled
+
+<Canvas of={Stories.Disabled} />
+
+### With Form
+
+<Canvas of={Stories.WithForm} />
+
+### Sizes
+
+<Canvas of={Stories.Sizes} />
+
+### Many Options
+
+<Canvas of={Stories.ManyOptions} />
+
+### Inline Label
+
+<Canvas of={Stories.InlineLabel} />
+
+
+## API Reference
+
+<ArgTypes of={Stories.Default} />
+
+## Accessibility
+
+- Full keyboard navigation (Tab, Shift+Tab, Enter, Space, Arrow keys where applicable).
+- Compatible with screen readers via Radix UI primitives.
+- Focus ring visible at all times; never `outline: none` without a replacement.
+- Color contrast meets WCAG AA in both light and dark themes.
+
+## Theming
+
+All visual tokens are CSS custom properties consumed via Tailwind v4. Override
+in your app's `globals.css` to customize:
+
+<Source language="css" code={`:root {
+  --primary: oklch(0.65 0.18 250);
+  --primary-foreground: oklch(0.98 0 0);
+}`} />
+
+## Related
+
+- See the audit fiche: \`docs/audit/components/select.md\`
+- See the [accessibility dimension report](?path=/docs/dimensions-accessibility--docs)