@wakastellar/ui 3.5.2 → 4.0.0

package/src/components/waka-test-report/WakaTestReport.mdx

@@ -0,0 +1,93 @@
+import { Meta, Canvas, Controls, Source, ArgTypes } from '@storybook/addon-docs/blocks'
+import * as Stories from './WakaTestReport.stories'
+
+<Meta of={Stories} />
+
+# WakaTestReport
+
+Test run report with pass/fail counts, suite breakdown, and failure expander.
+
+## Installation
+
+The component is exported from the root entry point of `@wakastellar/ui`:
+
+<Source language="tsx" code={`import { WakaTestReport } from '@wakastellar/ui'`} />
+
+If you use the CLI scaffolder:
+
+<Source language="bash" code={`npx wakastellar-ui add waka-test-report`} />
+
+## Usage
+
+<Canvas of={Stories.Default} />
+
+<Controls of={Stories.Default} />
+
+## Examples
+
+### All Passing
+
+<Canvas of={Stories.AllPassing} />
+
+### All Failing
+
+<Canvas of={Stories.AllFailing} />
+
+### Mixed Results
+
+<Canvas of={Stories.MixedResults} />
+
+### Failed Only Filter
+
+<Canvas of={Stories.FailedOnlyFilter} />
+
+### No Coverage
+
+<Canvas of={Stories.NoCoverage} />
+
+### Low Coverage
+
+<Canvas of={Stories.LowCoverage} />
+
+### High Coverage
+
+<Canvas of={Stories.HighCoverage} />
+
+### Many Suites
+
+<Canvas of={Stories.ManySuites} />
+
+### Empty
+
+<Canvas of={Stories.Empty} />
+
+### CI Test Report
+
+<Canvas of={Stories.CITestReport} />
+
+
+## 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-test-report.md\`
+- See the [accessibility dimension report](?path=/docs/dimensions-accessibility--docs)

package/src/components/waka-test-report/WakaTestReport.stories.tsx

@@ -139,7 +139,6 @@ const meta: Meta<typeof WakaTestReport> = {
       },
     },
   },
-  tags: ['autodocs'],
   argTypes: {
     showFailedOnly: {
       control: 'boolean',

package/src/components/waka-theme-creator/index.tsx

@@ -1,3 +1,17 @@
+/**
+ * @deprecated SP1.relocates — Phase 1
+ *
+ * This surface has been relocated to `@wakastellar/ui-blocks-internal` (workspace package
+ * `packages/ui-blocks-internal`). 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-internal'
+ *
+ * @deprecated Moved to `@wakastellar/ui-blocks-internal` in v3.6 — core copy will be removed in v4.0.
+ */
 "use client"
 
 import * as React from "react"

package/src/components/waka-theme-manager/index.tsx

@@ -1,3 +1,17 @@
+/**
+ * @deprecated SP1.relocates — Phase 1
+ *
+ * This surface has been relocated to `@wakastellar/ui-blocks-internal` (workspace package
+ * `packages/ui-blocks-internal`). 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-internal'
+ *
+ * @deprecated Moved to `@wakastellar/ui-blocks-internal` in v3.6 — core copy will be removed in v4.0.
+ */
 "use client"
 
 import * as React from "react"

package/src/components/waka-thread-view/WakaThreadView.mdx

@@ -0,0 +1,65 @@
+import { Meta, Canvas, Controls, Source, ArgTypes } from '@storybook/addon-docs/blocks'
+import * as Stories from './WakaThreadView.stories'
+
+<Meta of={Stories} />
+
+# WakaThreadView
+
+Threaded conversation view with replies, reactions, and load-more pagination.
+
+## Installation
+
+The component is exported from the root entry point of `@wakastellar/ui`:
+
+<Source language="tsx" code={`import { WakaThreadView } from '@wakastellar/ui'`} />
+
+If you use the CLI scaffolder:
+
+<Source language="bash" code={`npx wakastellar-ui add waka-thread-view`} />
+
+## Usage
+
+<Canvas of={Stories.Default} />
+
+<Controls of={Stories.Default} />
+
+## Examples
+
+### Loading
+
+<Canvas of={Stories.Loading} />
+
+### With More Replies
+
+<Canvas of={Stories.WithMoreReplies} />
+
+### Closed
+
+<Canvas of={Stories.Closed} />
+
+
+## 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-thread-view.md\`
+- See the [accessibility dimension report](?path=/docs/dimensions-accessibility--docs)

package/src/components/waka-thread-view/WakaThreadView.stories.tsx

@@ -7,7 +7,6 @@ const meta: Meta<typeof WakaThreadView> = {
   parameters: {
     layout: "padded",
   },
-  tags: ["autodocs"],
   argTypes: {
     showReplyInput: {
       control: "boolean",

package/src/components/waka-tilt-card/WakaTiltCard.mdx

@@ -0,0 +1,97 @@
+import { Meta, Canvas, Controls, Source, ArgTypes } from '@storybook/addon-docs/blocks'
+import * as Stories from './WakaTiltCard.stories'
+
+<Meta of={Stories} />
+
+# WakaTiltCard
+
+Card with built-in tilt-on-hover micro-interaction.
+
+## Installation
+
+The component is exported from the root entry point of `@wakastellar/ui`:
+
+<Source language="tsx" code={`import { WakaTiltCard } from '@wakastellar/ui'`} />
+
+If you use the CLI scaffolder:
+
+<Source language="bash" code={`npx wakastellar-ui add waka-tilt-card`} />
+
+## Usage
+
+<Canvas of={Stories.Default} />
+
+<Controls of={Stories.Default} />
+
+## Examples
+
+### With Glare
+
+<Canvas of={Stories.WithGlare} />
+
+### Tilt Intensities
+
+<Canvas of={Stories.TiltIntensities} />
+
+### Reverse Tilt
+
+<Canvas of={Stories.ReverseTilt} />
+
+### No Reset
+
+<Canvas of={Stories.NoReset} />
+
+### With Scale
+
+<Canvas of={Stories.WithScale} />
+
+### Showcase Card
+
+<Canvas of={Stories.ShowcaseCard} />
+
+### Showcase With Image
+
+<Canvas of={Stories.ShowcaseWithImage} />
+
+### Credit Card Style
+
+<Canvas of={Stories.CreditCardStyle} />
+
+### Product Showcase
+
+<Canvas of={Stories.ProductShowcase} />
+
+### Grid Of Cards
+
+<Canvas of={Stories.GridOfCards} />
+
+### Disabled
+
+<Canvas of={Stories.Disabled} />
+
+
+## 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-tilt-card.md\`
+- See the [accessibility dimension report](?path=/docs/dimensions-accessibility--docs)

package/src/components/waka-tilt-card/WakaTiltCard.stories.tsx

@@ -14,7 +14,6 @@ const meta: Meta<typeof WakaTiltCard> = {
       },
     },
   },
-  tags: ['autodocs'],
   argTypes: {
     maxTilt: {
       control: { type: 'range', min: 0, max: 45, step: 1 },
@@ -187,20 +186,17 @@ export const ShowcaseCard: Story = {
 }
 
 export const ShowcaseWithImage: Story = {
-  render: () => (
-    <WakaTiltShowcaseCard
-      title="Launch Your Project"
-      description="Deploy in seconds with our powerful infrastructure"
-      icon={<Rocket className="h-6 w-6 text-violet-500" />}
-      image="https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=400&h=200&fit=crop"
-      glowColor="rgb(139, 92, 246)"
-      footer={
-        <button className="w-full py-2 bg-primary text-primary-foreground rounded-lg font-medium">
+  args: {
+    title: "Launch Your Project",
+    description: "Deploy in seconds with our powerful infrastructure",
+    icon: <Rocket className="h-6 w-6 text-violet-500" />,
+    image: "https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=400&h=200&fit=crop",
+    glowColor: "rgb(139, 92, 246)",
+    footer: <button className="w-full py-2 bg-primary text-primary-foreground rounded-lg font-medium">
           Get Started
-        </button>
-      }
-    />
-  ),
+        </button>,
+  },
+  render: (args) => <WakaTiltShowcaseCard {...args} />,
 }
 
 export const CreditCardStyle: Story = {

package/src/components/waka-time-picker/WakaTimePicker.mdx

@@ -0,0 +1,89 @@
+import { Meta, Canvas, Controls, Source, ArgTypes } from '@storybook/addon-docs/blocks'
+import * as Stories from './WakaTimePicker.stories'
+
+<Meta of={Stories} />
+
+# WakaTimePicker
+
+Time picker with hour/minute/second wheels and 12/24h modes.
+
+## Installation
+
+The component is exported from the root entry point of `@wakastellar/ui`:
+
+<Source language="tsx" code={`import { WakaTimePicker } from '@wakastellar/ui'`} />
+
+If you use the CLI scaffolder:
+
+<Source language="bash" code={`npx wakastellar-ui add waka-time-picker`} />
+
+## Usage
+
+<Canvas of={Stories.Default} />
+
+<Controls of={Stories.Default} />
+
+## Examples
+
+### Format24h
+
+<Canvas of={Stories.Format24h} />
+
+### Format12h
+
+<Canvas of={Stories.Format12h} />
+
+### With Seconds
+
+<Canvas of={Stories.WithSeconds} />
+
+### With Minute Step
+
+<Canvas of={Stories.WithMinuteStep} />
+
+### With Min Max Time
+
+<Canvas of={Stories.WithMinMaxTime} />
+
+### Sizes
+
+<Canvas of={Stories.Sizes} />
+
+### With Error
+
+<Canvas of={Stories.WithError} />
+
+### Disabled
+
+<Canvas of={Stories.Disabled} />
+
+### Meeting Scheduler
+
+<Canvas of={Stories.MeetingScheduler} />
+
+
+## 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-time-picker.md\`
+- See the [accessibility dimension report](?path=/docs/dimensions-accessibility--docs)

package/src/components/waka-time-picker/WakaTimePicker.stories.tsx

@@ -13,7 +13,6 @@ const meta: Meta<typeof WakaTimePicker> = {
       },
     },
   },
-  tags: ['autodocs'],
   argTypes: {
     format: {
       control: 'select',
@@ -225,3 +224,17 @@ export const MeetingScheduler: Story = {
     )
   },
 }
+
+/**
+ * Playground — generated to make the Storybook Controls panel functional.
+ * Exposes a default arg set wired to the component via {...args}.
+ */
+export const Playground: Story = {
+  args: {
+    format: "12h",
+    size: "sm",
+    showSeconds: false,
+    disabled: false,
+  },
+  render: (args) => <WakaTimePicker {...args} />,
+}

package/src/components/waka-timeline/WakaTimeline.mdx

@@ -0,0 +1,77 @@
+import { Meta, Canvas, Controls, Source, ArgTypes } from '@storybook/addon-docs/blocks'
+import * as Stories from './WakaTimeline.stories'
+
+<Meta of={Stories} />
+
+# WakaTimeline
+
+Vertical timeline of events with timestamp, icon, and rich description.
+
+## Installation
+
+The component is exported from the root entry point of `@wakastellar/ui`:
+
+<Source language="tsx" code={`import { WakaTimeline } from '@wakastellar/ui'`} />
+
+If you use the CLI scaffolder:
+
+<Source language="bash" code={`npx wakastellar-ui add waka-timeline`} />
+
+## Usage
+
+<Canvas of={Stories.Default} />
+
+<Controls of={Stories.Default} />
+
+## Examples
+
+### Horizontal
+
+<Canvas of={Stories.Horizontal} />
+
+### Project Timeline
+
+<Canvas of={Stories.ProjectTimeline} />
+
+### With Error
+
+<Canvas of={Stories.WithError} />
+
+### Centered Line
+
+<Canvas of={Stories.CenteredLine} />
+
+### Small Size
+
+<Canvas of={Stories.SmallSize} />
+
+### Large Size
+
+<Canvas of={Stories.LargeSize} />
+
+
+## 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-timeline.md\`
+- See the [accessibility dimension report](?path=/docs/dimensions-accessibility--docs)

package/src/components/waka-timeline/WakaTimeline.stories.tsx

@@ -8,7 +8,6 @@ const meta: Meta<typeof WakaTimeline> = {
   parameters: {
     layout: "padded",
   },
-  tags: ["autodocs"],
   argTypes: {
     orientation: {
       control: "select",

package/src/components/waka-tooltip-tour/WakaTooltipTour.mdx

@@ -0,0 +1,59 @@
+import { Meta, Canvas, Controls, Source, ArgTypes } from '@storybook/addon-docs/blocks'
+import * as Stories from './WakaTooltipTour.stories'
+
+<Meta of={Stories} />
+
+# WakaTooltipTour
+
+Linear tour built from sequential tooltips; lighter alternative to WakaTourGuide.
+
+> ⚠️ **Composant en refactor.** Ce composant est marqué `refactor` dans l'audit (cf. `docs/audit/components/waka-tooltip-tour.md`). Il pourra être fusionné, scindé ou déplacé dans un sous-projet futur ; vérifiez la fiche d'audit avant tout usage massif.
+
+## Installation
+
+The component is exported from the root entry point of `@wakastellar/ui`:
+
+<Source language="tsx" code={`import { WakaTooltipTour } from '@wakastellar/ui'`} />
+
+If you use the CLI scaffolder:
+
+<Source language="bash" code={`npx wakastellar-ui add waka-tooltip-tour`} />
+
+## Usage
+
+<Canvas of={Stories.Default} />
+
+<Controls of={Stories.Default} />
+
+## Examples
+
+### Default
+
+<Canvas of={Stories.Default} />
+
+
+## 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-tooltip-tour.md\`
+- See the [accessibility dimension report](?path=/docs/dimensions-accessibility--docs)

package/src/components/waka-tooltip-tour/WakaTooltipTour.stories.tsx

@@ -6,7 +6,6 @@ const meta: Meta<typeof WakaTooltipTour> = {
   title: "Navigation/WakaTooltipTour",
   component: WakaTooltipTour,
   parameters: { layout: "padded" },
-  tags: ["autodocs"],
   argTypes: {
     isActive: { control: "boolean", description: "Tour actif" },
     showSkip: { control: "boolean", description: "Afficher le bouton skip" },

package/src/components/waka-tooltip-tour/index.tsx

@@ -520,6 +520,11 @@ function TooltipArrow({ top, left, rotation }: TooltipArrowProps) {
 // Main Component
 // ============================================================================
 
+/**
+ * @deprecated Since v3.6 — will be removed in v4.0.
+ * Use `WakaTour` compound (with `Tour.Step`, `Tour.Tooltip`) instead (futur).
+ * See `docs/audit/remove-relocate.md` §2.4.
+ */
 export function WakaTooltipTour({
   tourId,
   steps,

package/src/components/waka-tour-guide/WakaTourGuide.mdx

@@ -0,0 +1,59 @@
+import { Meta, Canvas, Controls, Source, ArgTypes } from '@storybook/addon-docs/blocks'
+import * as Stories from './WakaTourGuide.stories'
+
+<Meta of={Stories} />
+
+# WakaTourGuide
+
+Step-by-step product tour with spotlight, tooltip, and skip controls.
+
+> ⚠️ **Composant en refactor.** Ce composant est marqué `refactor` dans l'audit (cf. `docs/audit/components/waka-tour-guide.md`). Il pourra être fusionné, scindé ou déplacé dans un sous-projet futur ; vérifiez la fiche d'audit avant tout usage massif.
+
+## Installation
+
+The component is exported from the root entry point of `@wakastellar/ui`:
+
+<Source language="tsx" code={`import { WakaTourGuide } from '@wakastellar/ui'`} />
+
+If you use the CLI scaffolder:
+
+<Source language="bash" code={`npx wakastellar-ui add waka-tour-guide`} />
+
+## Usage
+
+<Canvas of={Stories.Default} />
+
+<Controls of={Stories.Default} />
+
+## Examples
+
+### Default
+
+<Canvas of={Stories.Default} />
+
+
+## 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-tour-guide.md\`
+- See the [accessibility dimension report](?path=/docs/dimensions-accessibility--docs)