@wakastellar/ui 3.5.2 → 4.0.0

package/src/components/waka-session-manager/WakaSessionManager.stories.tsx

@@ -1,29 +1,51 @@
 import type { Meta, StoryObj } from "@storybook/react"
-import { WakaSessionManager } from "./index"
+import { WakaSessionManager, type Session } from "./index"
 
 const meta: Meta<typeof WakaSessionManager> = {
   title: "Security/WakaSessionManager",
   component: WakaSessionManager,
   parameters: { layout: "centered" },
-  tags: ["autodocs"],
   argTypes: {
-    showLocation: { control: "boolean", description: "Afficher la localisation" },
-    showLogoutAll: { control: "boolean", description: "Bouton déconnexion globale" },
-    showLogoutOther: { control: "boolean", description: "Déconnexion autres sessions" },
+    showIpAddress: { control: "boolean", description: "Afficher l'adresse IP" },
+    timeFormat: { control: "select", options: ["relative", "absolute"], description: "Format des dates" },
+    defaultExpanded: { control: "boolean", description: "Sessions étendues par défaut" },
+    isLoading: { control: "boolean", description: "État de chargement" },
   },
 }
 
 export default meta
 type Story = StoryObj<typeof WakaSessionManager>
 
-const sessions = [
-  { id: "1", device: "Chrome on macOS", deviceType: "desktop" as const, location: { city: "Paris", country: "France" }, lastActive: new Date(), current: true, ip: "192.168.1.1" },
-  { id: "2", device: "Safari on iPhone", deviceType: "mobile" as const, location: { city: "Lyon", country: "France" }, lastActive: new Date(Date.now() - 3600000), current: false, ip: "10.0.0.1" },
-  { id: "3", device: "Firefox on Windows", deviceType: "desktop" as const, location: { city: "Berlin", country: "Germany" }, lastActive: new Date(Date.now() - 86400000), current: false, ip: "172.16.0.1" },
+const sessions: Session[] = [
+  {
+    id: "1",
+    device: { type: "desktop", browser: "Chrome", browserVersion: "120", os: "macOS", osVersion: "14" },
+    location: { city: "Paris", country: "France" },
+    ipAddress: "192.168.1.1",
+    lastActive: new Date(),
+    isCurrent: true,
+    status: "active",
+  },
+  {
+    id: "2",
+    device: { type: "mobile", browser: "Safari", os: "iOS", osVersion: "17", name: "iPhone 15 Pro" },
+    location: { city: "Lyon", country: "France" },
+    ipAddress: "10.0.0.1",
+    lastActive: new Date(Date.now() - 3600000),
+    status: "active",
+  },
+  {
+    id: "3",
+    device: { type: "desktop", browser: "Firefox", os: "Windows 11" },
+    location: { city: "Berlin", country: "Germany" },
+    ipAddress: "172.16.0.1",
+    lastActive: new Date(Date.now() - 86400000),
+    status: "idle",
+  },
 ]
 
 export const Default: Story = {
-  args: { sessions, showLocation: true, showLogoutAll: true, showLogoutOther: true },
+  args: { sessions, showIpAddress: true },
   render: (args) => (
     <div style={{ width: 500 }}>
       <WakaSessionManager {...args} />
@@ -32,7 +54,7 @@ export const Default: Story = {
 }
 
 export const SingleSession: Story = {
-  args: { sessions: [sessions[0]], showLocation: true },
+  args: { sessions: [sessions[0]], showIpAddress: true },
   render: (args) => (
     <div style={{ width: 500 }}>
       <WakaSessionManager {...args} />
@@ -40,8 +62,20 @@ export const SingleSession: Story = {
   ),
 }
 
-export const NoLocation: Story = {
-  args: { sessions, showLocation: false, showLogoutAll: true },
+export const MultipleSessions: Story = {
+  args: {
+    sessions: [
+      ...sessions,
+      {
+        id: "4",
+        device: { type: "tablet", browser: "Safari", os: "iPadOS", name: "iPad Pro" },
+        location: { city: "Madrid", country: "Spain" },
+        lastActive: new Date(Date.now() - 7 * 86400000),
+        status: "idle",
+      },
+    ],
+    showIpAddress: false,
+  },
   render: (args) => (
     <div style={{ width: 500 }}>
       <WakaSessionManager {...args} />
@@ -49,16 +83,8 @@ export const NoLocation: Story = {
   ),
 }
 
-export const ManySessions: Story = {
-  args: {
-    sessions: [
-      ...sessions,
-      { id: "4", device: "Edge on Windows", deviceType: "desktop" as const, lastActive: new Date(Date.now() - 172800000), current: false },
-      { id: "5", device: "Chrome on Android", deviceType: "mobile" as const, lastActive: new Date(Date.now() - 259200000), current: false },
-    ],
-    showLocation: true,
-    showLogoutAll: true,
-  },
+export const Loading: Story = {
+  args: { sessions: [], isLoading: true },
   render: (args) => (
     <div style={{ width: 500 }}>
       <WakaSessionManager {...args} />
@@ -66,3 +92,11 @@ export const ManySessions: Story = {
   ),
 }
 
+export const AbsoluteTime: Story = {
+  args: { sessions, showIpAddress: true, timeFormat: "absolute" },
+  render: (args) => (
+    <div style={{ width: 500 }}>
+      <WakaSessionManager {...args} />
+    </div>
+  ),
+}

package/src/components/waka-signature-pad/WakaSignaturePad.mdx

@@ -0,0 +1,89 @@
+import { Meta, Canvas, Controls, Source, ArgTypes } from '@storybook/addon-docs/blocks'
+import * as Stories from './WakaSignaturePad.stories'
+
+<Meta of={Stories} />
+
+# WakaSignaturePad
+
+Touch and pointer signature pad backed by a canvas; outputs PNG or SVG.
+
+## Installation
+
+The component is exported from the root entry point of `@wakastellar/ui`:
+
+<Source language="tsx" code={`import { WakaSignaturePad } from '@wakastellar/ui'`} />
+
+If you use the CLI scaffolder:
+
+<Source language="bash" code={`npx wakastellar-ui add waka-signature-pad`} />
+
+## Usage
+
+<Canvas of={Stories.Default} />
+
+<Controls of={Stories.Default} />
+
+## Examples
+
+### Blue Ink
+
+<Canvas of={Stories.BlueInk} />
+
+### Dark Mode
+
+<Canvas of={Stories.DarkMode} />
+
+### Disabled
+
+<Canvas of={Stories.Disabled} />
+
+### Read Only
+
+<Canvas of={Stories.ReadOnly} />
+
+### No Toolbar
+
+<Canvas of={Stories.NoToolbar} />
+
+### Custom Placeholder
+
+<Canvas of={Stories.CustomPlaceholder} />
+
+### Custom Pen Options
+
+<Canvas of={Stories.CustomPenOptions} />
+
+### Large Size
+
+<Canvas of={Stories.LargeSize} />
+
+### With Aspect Ratio
+
+<Canvas of={Stories.WithAspectRatio} />
+
+
+## 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/waka-signature-pad.md\`
+- See the [accessibility dimension report](?path=/docs/dimensions-accessibility--docs)

package/src/components/waka-signature-pad/WakaSignaturePad.stories.tsx

@@ -5,7 +5,6 @@ const meta: Meta<typeof WakaSignaturePad> = {
   title: "Forms/WakaSignaturePad",
   component: WakaSignaturePad,
   parameters: { layout: "centered" },
-  tags: ["autodocs"],
   argTypes: {
     penColor: { control: "color", description: "Couleur du stylo" },
     backgroundColor: { control: "color", description: "Couleur de fond" },

package/src/components/waka-signature-pad/index.tsx

@@ -245,7 +245,7 @@ export function useSignaturePad(options: UseSignaturePadOptions = {}): UseSignat
     const canvas = canvasRef.current
     if (!canvas) return ""
 
-    let svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${canvas.width}" height="${canvas.height}">`
+    let svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${canvas.width}" height="${canvas.height}" aria-hidden="true" focusable="false">`
 
     if (backgroundColor) {
       svg += `<rect width="100%" height="100%" fill="${backgroundColor}"/>`

package/src/components/waka-skeleton-wave/WakaSkeletonWave.mdx

@@ -0,0 +1,113 @@
+import { Meta, Canvas, Controls, Source, ArgTypes } from '@storybook/addon-docs/blocks'
+import * as Stories from './WakaSkeletonWave.stories'
+
+<Meta of={Stories} />
+
+# WakaSkeletonWave
+
+Skeleton placeholder with a moving shimmer wave; loading state for content blocks.
+
+## Installation
+
+The component is exported from the root entry point of `@wakastellar/ui`:
+
+<Source language="tsx" code={`import { WakaSkeletonWave } from '@wakastellar/ui'`} />
+
+If you use the CLI scaffolder:
+
+<Source language="bash" code={`npx wakastellar-ui add waka-skeleton-wave`} />
+
+## Usage
+
+<Canvas of={Stories.Default} />
+
+<Controls of={Stories.Default} />
+
+## Examples
+
+### Presets
+
+<Canvas of={Stories.Presets} />
+
+### Text Lines
+
+<Canvas of={Stories.TextLines} />
+
+### Avatar Sizes
+
+<Canvas of={Stories.AvatarSizes} />
+
+### Card Skeleton
+
+<Canvas of={Stories.CardSkeleton} />
+
+### Card Variations
+
+<Canvas of={Stories.CardVariations} />
+
+### List Skeleton
+
+<Canvas of={Stories.ListSkeleton} />
+
+### List Variations
+
+<Canvas of={Stories.ListVariations} />
+
+### Grid Skeleton
+
+<Canvas of={Stories.GridSkeleton} />
+
+### Grid Aspect Ratios
+
+<Canvas of={Stories.GridAspectRatios} />
+
+### Animation Speeds
+
+<Canvas of={Stories.AnimationSpeeds} />
+
+### Rounded Variants
+
+<Canvas of={Stories.RoundedVariants} />
+
+### Custom Colors
+
+<Canvas of={Stories.CustomColors} />
+
+### Profile Page Skeleton
+
+<Canvas of={Stories.ProfilePageSkeleton} />
+
+### Comments Skeleton
+
+<Canvas of={Stories.CommentsSkeleton} />
+
+### Table Skeleton
+
+<Canvas of={Stories.TableSkeleton} />
+
+
+## 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/waka-skeleton-wave.md\`
+- See the [accessibility dimension report](?path=/docs/dimensions-accessibility--docs)

package/src/components/waka-skeleton-wave/WakaSkeletonWave.stories.tsx

@@ -13,7 +13,6 @@ const meta: Meta<typeof WakaSkeletonWave> = {
       },
     },
   },
-  tags: ['autodocs'],
   argTypes: {
     preset: {
       control: 'select',

package/src/components/waka-skill-tree/index.tsx

@@ -1,3 +1,17 @@
+/**
+ * @deprecated SP1.relocates — Phase 1
+ *
+ * This surface has been relocated to `@wakastellar/ui-blocks-engagement` (workspace package
+ * `packages/ui-blocks-engagement`). The core `@wakastellar/ui` retains the original
+ * implementation for backward compatibility during phases 1–3 of the
+ * relocation plan; the duplicate will be removed in v4.0.
+ *
+ * Migration:
+ *   - Old: import { ... } from '@wakastellar/ui'
+ *   - New: import { ... } from '@wakastellar/ui-blocks-engagement'
+ *
+ * @deprecated Moved to `@wakastellar/ui-blocks-engagement` in v3.6 — core copy will be removed in v4.0.
+ */
 "use client"
 
 import * as React from "react"
@@ -508,6 +522,7 @@ function BranchProgress({ branch, progress, expanded, onToggle, skills }: Branch
   return (
     <div className="rounded-lg border bg-card p-3 transition-all duration-300">
       <button
+        type="button"
         onClick={onToggle}
         className="flex w-full items-center justify-between"
       >
@@ -718,6 +733,7 @@ export function WakaSkillTree({
           {zoomable && (
             <div className="flex items-center gap-2 rounded-full border bg-background px-3 py-1">
               <button
+                type="button"
                 onClick={() => handleZoom(-0.1)}
                 className="rounded-full p-1 hover:bg-muted transition-colors"
                 disabled={zoom <= 0.5}
@@ -728,6 +744,7 @@ export function WakaSkillTree({
                 {Math.round(zoom * 100)}%
               </span>
               <button
+                type="button"
                 onClick={() => handleZoom(0.1)}
                 className="rounded-full p-1 hover:bg-muted transition-colors"
                 disabled={zoom >= 2}
@@ -768,7 +785,7 @@ export function WakaSkillTree({
               transformOrigin: "top left",
             }}
             viewBox={`${bounds.minX} ${bounds.minY} ${canvasWidth} ${canvasHeight}`}
-          >
+           aria-hidden="true" focusable="false">
             {/* Gradient definitions */}
             <defs>
               {effectiveBranches.map(branch => (

package/src/components/waka-slider-range/WakaSliderRange.mdx

@@ -0,0 +1,69 @@
+import { Meta, Canvas, Controls, Source, ArgTypes } from '@storybook/addon-docs/blocks'
+import * as Stories from './WakaSliderRange.stories'
+
+<Meta of={Stories} />
+
+# WakaSliderRange
+
+Dual-thumb slider for numeric ranges; alias for Slider with `range` mode.
+
+## Installation
+
+The component is exported from the root entry point of `@wakastellar/ui`:
+
+<Source language="tsx" code={`import { WakaSliderRange } from '@wakastellar/ui'`} />
+
+If you use the CLI scaffolder:
+
+<Source language="bash" code={`npx wakastellar-ui add waka-slider-range`} />
+
+## Usage
+
+<Canvas of={Stories.Default} />
+
+<Controls of={Stories.Default} />
+
+## Examples
+
+### Price Range
+
+<Canvas of={Stories.PriceRange} />
+
+### Small Step
+
+<Canvas of={Stories.SmallStep} />
+
+### Disabled
+
+<Canvas of={Stories.Disabled} />
+
+### No Labels
+
+<Canvas of={Stories.NoLabels} />
+
+
+## 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/waka-slider-range.md\`
+- See the [accessibility dimension report](?path=/docs/dimensions-accessibility--docs)

package/src/components/waka-slider-range/WakaSliderRange.stories.tsx

@@ -5,7 +5,6 @@ const meta: Meta<typeof WakaSliderRange> = {
   title: "Forms/WakaSliderRange",
   component: WakaSliderRange,
   parameters: { layout: "centered" },
-  tags: ["autodocs"],
   argTypes: {
     min: { control: "number", description: "Valeur minimale" },
     max: { control: "number", description: "Valeur maximale" },

package/src/components/waka-spin-wheel/WakaSpinWheel.stories.tsx

@@ -100,9 +100,11 @@ export const Sizes: Story = {
 }
 
 export const WithIcons: Story = {
-  render: () => (
-    <WakaSpinWheel segments={prizeSegments} size="lg" />
-  ),
+  args: {
+    segments: prizeSegments,
+    size: "lg",
+  },
+  render: (args) => <WakaSpinWheel {...args} />,
 }
 
 export const PointerPositions: Story = {
@@ -282,18 +284,15 @@ export const CustomSpinSettings: Story = {
 }
 
 export const CustomCenterContent: Story = {
-  render: () => (
-    <WakaSpinWheel
-      segments={prizeSegments}
-      size="lg"
-      centerContent={
-        <div className="flex flex-col items-center">
+  args: {
+    segments: prizeSegments,
+    size: "lg",
+    centerContent: <div className="flex flex-col items-center">
           <Flame className="h-6 w-6 text-amber-900" />
           <span className="text-[10px] font-bold text-amber-900">GO!</span>
-        </div>
-      }
-    />
-  ),
+        </div>,
+  },
+  render: (args) => <WakaSpinWheel {...args} />,
 }
 
 export const DailySpinGame: Story = {
@@ -351,9 +350,11 @@ export const DailySpinGame: Story = {
 }
 
 export const NoLabels: Story = {
-  render: () => (
-    <WakaSpinWheel segments={prizeSegments} showLabels={false} />
-  ),
+  args: {
+    segments: prizeSegments,
+    showLabels: false,
+  },
+  render: (args) => <WakaSpinWheel {...args} />,
 }
 
 export const Disabled: Story = {

package/src/components/waka-spin-wheel/index.tsx

@@ -1,3 +1,17 @@
+/**
+ * @deprecated SP1.relocates — Phase 1
+ *
+ * This surface has been relocated to `@wakastellar/ui-blocks-engagement` (workspace package
+ * `packages/ui-blocks-engagement`). The core `@wakastellar/ui` retains the original
+ * implementation for backward compatibility during phases 1–3 of the
+ * relocation plan; the duplicate will be removed in v4.0.
+ *
+ * Migration:
+ *   - Old: import { ... } from '@wakastellar/ui'
+ *   - New: import { ... } from '@wakastellar/ui-blocks-engagement'
+ *
+ * @deprecated Moved to `@wakastellar/ui-blocks-engagement` in v3.6 — core copy will be removed in v4.0.
+ */
 "use client"
 
 import * as React from "react"

package/src/components/waka-spinner/WakaSpinner.stories.tsx

@@ -42,7 +42,7 @@ export default meta
 type Story = StoryObj<typeof WakaSpinner>
 
 export const Default: Story = {
-  args: {},
+  render: (args) => <WakaSpinner {...args} />,
 }
 
 export const Sizes: Story = {
@@ -89,9 +89,10 @@ export const Speeds: Story = {
 
 export const WithoutAsteroids: Story = {
   args: {
-    size: 'lg',
+    size: "lg",
     showAsteroids: false,
   },
+  render: (args) => <WakaSpinner {...args} />,
 }
 
 export const CustomColors: Story = {

package/src/components/waka-spinner/index.tsx

@@ -1,3 +1,17 @@
+/**
+ * @deprecated SP1.relocates — Phase 1
+ *
+ * This surface has been relocated to `@wakastellar/ui-effects-decorative` (workspace package
+ * `packages/ui-effects-decorative`). The core `@wakastellar/ui` retains the original
+ * implementation for backward compatibility during phases 1–3 of the
+ * relocation plan; the duplicate will be removed in v4.0.
+ *
+ * Migration:
+ *   - Old: import { ... } from '@wakastellar/ui'
+ *   - New: import { ... } from '@wakastellar/ui-effects-decorative'
+ *
+ * @deprecated Moved to `@wakastellar/ui-effects-decorative` in v3.6 — core copy will be removed in v4.0.
+ */
 "use client"
 
 import * as React from "react"

package/src/components/waka-sponsored-badge/WakaSponsoredBadge.mdx

@@ -0,0 +1,81 @@
+import { Meta, Canvas, Controls, Source, ArgTypes } from '@storybook/addon-docs/blocks'
+import * as Stories from './WakaSponsoredBadge.stories'
+
+<Meta of={Stories} />
+
+# WakaSponsoredBadge
+
+Discreet "sponsored" badge displayed on promoted cards.
+
+## Installation
+
+The component is exported from the root entry point of `@wakastellar/ui`:
+
+<Source language="tsx" code={`import { WakaSponsoredBadge } from '@wakastellar/ui'`} />
+
+If you use the CLI scaffolder:
+
+<Source language="bash" code={`npx wakastellar-ui add waka-sponsored-badge`} />
+
+## Usage
+
+<Canvas of={Stories.Default} />
+
+<Controls of={Stories.Default} />
+
+## Examples
+
+### With Sponsor
+
+<Canvas of={Stories.WithSponsor} />
+
+### Subtle
+
+<Canvas of={Stories.Subtle} />
+
+### Outline
+
+<Canvas of={Stories.Outline} />
+
+### Dark
+
+<Canvas of={Stories.Dark} />
+
+### Small
+
+<Canvas of={Stories.Small} />
+
+### Large
+
+<Canvas of={Stories.Large} />
+
+### Custom Label
+
+<Canvas of={Stories.CustomLabel} />
+
+
+## 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/waka-sponsored-badge.md\`
+- See the [accessibility dimension report](?path=/docs/dimensions-accessibility--docs)

package/src/components/waka-sponsored-badge/WakaSponsoredBadge.stories.tsx

@@ -5,7 +5,6 @@ const meta: Meta<typeof WakaSponsoredBadge> = {
   title: "Sponsoring/WakaSponsoredBadge",
   component: WakaSponsoredBadge,
   parameters: { layout: "centered" },
-  tags: ["autodocs"],
   argTypes: {
     variant: { control: "select", options: ["default", "subtle", "outline", "dark"], description: "Variante" },
     size: { control: "select", options: ["sm", "md", "lg"], description: "Taille" },