@wakastellar/ui 3.5.0 → 4.0.0-dev.0

package/src/components/waka-dock/WakaDock.mdx

@@ -0,0 +1,95 @@
+import { Meta, Canvas, Controls, Source, ArgTypes } from '@storybook/addon-docs/blocks'
+import * as Stories from './WakaDock.stories'
+
+<Meta of={Stories} />
+
+# WakaDock
+
+macOS-style dock with magnification on hover; useful for command palettes and toolbars.
+
+> ⚠️ **Composant en refactor.** Ce composant est marqué `refactor` dans l'audit (cf. `docs/audit/components/waka-dock.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 { WakaDock } from '@wakastellar/ui'`} />
+
+If you use the CLI scaffolder:
+
+<Source language="bash" code={`npx wakastellar-ui add waka-dock`} />
+
+## Usage
+
+<Canvas of={Stories.Default} />
+
+<Controls of={Stories.Default} />
+
+## Examples
+
+### Positions
+
+<Canvas of={Stories.Positions} />
+
+### Sizes
+
+<Canvas of={Stories.Sizes} />
+
+### With Badges
+
+<Canvas of={Stories.WithBadges} />
+
+### With Active Indicator
+
+<Canvas of={Stories.WithActiveIndicator} />
+
+### Mac OS Style
+
+<Canvas of={Stories.MacOSStyle} />
+
+### Vertical Dock
+
+<Canvas of={Stories.VerticalDock} />
+
+### No Labels
+
+<Canvas of={Stories.NoLabels} />
+
+### Magnification Settings
+
+<Canvas of={Stories.MagnificationSettings} />
+
+### App Dock With Sections
+
+<Canvas of={Stories.AppDockWithSections} />
+
+### Dark Mode
+
+<Canvas of={Stories.DarkMode} />
+
+
+## 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-dock.md\`
+- See the [accessibility dimension report](?path=/docs/dimensions-accessibility--docs)

package/src/components/waka-dock/WakaDock.stories.tsx

@@ -31,7 +31,6 @@ const meta: Meta<typeof WakaDock> = {
       },
     },
   },
-  tags: ['autodocs'],
   argTypes: {
     position: {
       control: 'select',
@@ -330,3 +329,17 @@ export const DarkMode: Story = {
     </div>
   ),
 }
+
+/**
+ * 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: {
+    position: "bottom",
+    size: "sm",
+    showLabels: false,
+    fixed: false,
+  },
+  render: (args) => <WakaDock {...args} />,
+}

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

@@ -40,6 +40,11 @@ export interface WakaDockProps {
 // Component
 // ============================================================================
 
+/**
+ * @deprecated Since v3.6 — will be removed in v4.0.
+ * Use the `@wakastellar/ui-docs` sub-package (`<DocDock>` with shared provider) instead.
+ * See `docs/audit/remove-relocate.md` §2.2.
+ */
 export function WakaDock({
   items,
   position = "bottom",
@@ -153,6 +158,7 @@ export function WakaDock({
 
             {/* Dock Item */}
             <button
+              type="button"
               onClick={item.onClick}
               className={cn(
                 "relative flex items-center justify-center rounded-xl transition-all duration-150",

package/src/components/waka-drawer/WakaDrawer.mdx

@@ -0,0 +1,85 @@
+import { Meta, Canvas, Controls, Source, ArgTypes } from '@storybook/addon-docs/blocks'
+import * as Stories from './WakaDrawer.stories'
+
+<Meta of={Stories} />
+
+# WakaDrawer
+
+Side drawer with focus trap and ESC dismissal; built on top of Radix Dialog.
+
+## Installation
+
+The component is exported from the root entry point of `@wakastellar/ui`:
+
+<Source language="tsx" code={`import { WakaDrawer } from '@wakastellar/ui'`} />
+
+If you use the CLI scaffolder:
+
+<Source language="bash" code={`npx wakastellar-ui add waka-drawer`} />
+
+## Usage
+
+<Canvas of={Stories.Default} />
+
+<Controls of={Stories.Default} />
+
+## Examples
+
+### Positions
+
+<Canvas of={Stories.Positions} />
+
+### Sizes
+
+<Canvas of={Stories.Sizes} />
+
+### With Footer
+
+<Canvas of={Stories.WithFooter} />
+
+### Navigation Menu
+
+<Canvas of={Stories.NavigationMenu} />
+
+### Filter Panel
+
+<Canvas of={Stories.FilterPanel} />
+
+### With Hook
+
+<Canvas of={Stories.WithHook} />
+
+### No Overlay
+
+<Canvas of={Stories.NoOverlay} />
+
+### Custom Content
+
+<Canvas of={Stories.CustomContent} />
+
+
+## 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-drawer.md\`
+- See the [accessibility dimension report](?path=/docs/dimensions-accessibility--docs)

package/src/components/waka-drawer/WakaDrawer.stories.tsx

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

package/src/components/waka-empty-state/WakaEmptyState.mdx

@@ -0,0 +1,69 @@
+import { Meta, Canvas, Controls, Source, ArgTypes } from '@storybook/addon-docs/blocks'
+import * as Stories from './WakaEmptyState.stories'
+
+<Meta of={Stories} />
+
+# WakaEmptyState
+
+Empty-state placeholder with illustration, title, description, and CTA.
+
+## Installation
+
+The component is exported from the root entry point of `@wakastellar/ui`:
+
+<Source language="tsx" code={`import { WakaEmptyState } from '@wakastellar/ui'`} />
+
+If you use the CLI scaffolder:
+
+<Source language="bash" code={`npx wakastellar-ui add waka-empty-state`} />
+
+## Usage
+
+<Canvas of={Stories.Default} />
+
+<Controls of={Stories.Default} />
+
+## Examples
+
+### Search State
+
+<Canvas of={Stories.SearchState} />
+
+### Error
+
+<Canvas of={Stories.Error} />
+
+### Empty Cart
+
+<Canvas of={Stories.EmptyCart} />
+
+### Small
+
+<Canvas of={Stories.Small} />
+
+
+## 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-empty-state.md\`
+- See the [accessibility dimension report](?path=/docs/dimensions-accessibility--docs)

package/src/components/waka-empty-state/WakaEmptyState.stories.tsx

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

package/src/components/waka-env-var-editor/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-error-shake/WakaErrorShake.mdx

@@ -0,0 +1,89 @@
+import { Meta, Canvas, Controls, Source, ArgTypes } from '@storybook/addon-docs/blocks'
+import * as Stories from './WakaErrorShake.stories'
+
+<Meta of={Stories} />
+
+# WakaErrorShake
+
+Imperative shake animation wrapper used for invalid form submissions.
+
+## Installation
+
+The component is exported from the root entry point of `@wakastellar/ui`:
+
+<Source language="tsx" code={`import { WakaErrorShake } from '@wakastellar/ui'`} />
+
+If you use the CLI scaffolder:
+
+<Source language="bash" code={`npx wakastellar-ui add waka-error-shake`} />
+
+## Usage
+
+<Canvas of={Stories.Default} />
+
+<Controls of={Stories.Default} />
+
+## Examples
+
+### Intensities
+
+<Canvas of={Stories.Intensities} />
+
+### With Glitch Effect
+
+<Canvas of={Stories.WithGlitchEffect} />
+
+### No Flash Effect
+
+<Canvas of={Stories.NoFlashEffect} />
+
+### Custom Flash Color
+
+<Canvas of={Stories.CustomFlashColor} />
+
+### Form Field Shake
+
+<Canvas of={Stories.FormFieldShake} />
+
+### With Ref
+
+<Canvas of={Stories.WithRef} />
+
+### With Hook
+
+<Canvas of={Stories.WithHook} />
+
+### Login Form Example
+
+<Canvas of={Stories.LoginFormExample} />
+
+### With Callback
+
+<Canvas of={Stories.WithCallback} />
+
+
+## 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-error-shake.md\`
+- See the [accessibility dimension report](?path=/docs/dimensions-accessibility--docs)

package/src/components/waka-error-shake/WakaErrorShake.stories.tsx

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

package/src/components/waka-feature-announcement/WakaFeatureAnnouncement.mdx

@@ -0,0 +1,61 @@
+import { Meta, Canvas, Controls, Source, ArgTypes } from '@storybook/addon-docs/blocks'
+import * as Stories from './WakaFeatureAnnouncement.stories'
+
+<Meta of={Stories} />
+
+# WakaFeatureAnnouncement
+
+Feature Announcement component for the WakaStart UI library.
+
+## Installation
+
+The component is exported from the root entry point of `@wakastellar/ui`:
+
+<Source language="tsx" code={`import { WakaFeatureAnnouncement } from '@wakastellar/ui'`} />
+
+If you use the CLI scaffolder:
+
+<Source language="bash" code={`npx wakastellar-ui add waka-feature-announcement`} />
+
+## Usage
+
+<Canvas of={Stories.Default} />
+
+<Controls of={Stories.Default} />
+
+## Examples
+
+### Banner
+
+<Canvas of={Stories.Banner} />
+
+### Single Feature
+
+<Canvas of={Stories.SingleFeature} />
+
+
+## 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-feature-announcement.md\`
+- See the [accessibility dimension report](?path=/docs/dimensions-accessibility--docs)

package/src/components/waka-feature-announcement/WakaFeatureAnnouncement.stories.tsx

@@ -5,7 +5,6 @@ const meta: Meta<typeof WakaFeatureAnnouncement> = {
   title: "UI/WakaFeatureAnnouncement",
   component: WakaFeatureAnnouncement,
   parameters: { layout: "centered" },
-  tags: ["autodocs"],
   argTypes: {
     variant: { control: "select", options: ["modal", "banner", "tooltip", "spotlight"], description: "Variante" },
     showDismiss: { control: "boolean", description: "Bouton fermer" },

package/src/components/waka-feature-flag-row/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-file-upload/WakaFileUpload.mdx

@@ -0,0 +1,81 @@
+import { Meta, Canvas, Controls, Source, ArgTypes } from '@storybook/addon-docs/blocks'
+import * as Stories from './WakaFileUpload.stories'
+
+<Meta of={Stories} />
+
+# WakaFileUpload
+
+File Upload component for the WakaStart UI library.
+
+## Installation
+
+The component is exported from the root entry point of `@wakastellar/ui`:
+
+<Source language="tsx" code={`import { WakaFileUpload } from '@wakastellar/ui'`} />
+
+If you use the CLI scaffolder:
+
+<Source language="bash" code={`npx wakastellar-ui add waka-file-upload`} />
+
+## Usage
+
+<Canvas of={Stories.Default} />
+
+<Controls of={Stories.Default} />
+
+## Examples
+
+### Button Variant
+
+<Canvas of={Stories.ButtonVariant} />
+
+### Inline Variant
+
+<Canvas of={Stories.InlineVariant} />
+
+### Images Only
+
+<Canvas of={Stories.ImagesOnly} />
+
+### PDF Only
+
+<Canvas of={Stories.PDFOnly} />
+
+### Single File
+
+<Canvas of={Stories.SingleFile} />
+
+### With Size Limit
+
+<Canvas of={Stories.WithSizeLimit} />
+
+### 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-file-upload.md\`
+- See the [accessibility dimension report](?path=/docs/dimensions-accessibility--docs)

package/src/components/waka-file-upload/WakaFileUpload.stories.tsx

@@ -7,7 +7,6 @@ const meta: Meta<typeof WakaFileUpload> = {
   parameters: {
     layout: "centered",
   },
-  tags: ["autodocs"],
   argTypes: {
     variant: {
       control: "select",

package/src/components/waka-floating-nav/WakaFloatingNav.mdx

@@ -0,0 +1,61 @@
+import { Meta, Canvas, Controls, Source, ArgTypes } from '@storybook/addon-docs/blocks'
+import * as Stories from './WakaFloatingNav.stories'
+
+<Meta of={Stories} />
+
+# WakaFloatingNav
+
+Floating Nav component for the WakaStart UI library.
+
+## Installation
+
+The component is exported from the root entry point of `@wakastellar/ui`:
+
+<Source language="tsx" code={`import { WakaFloatingNav } from '@wakastellar/ui'`} />
+
+If you use the CLI scaffolder:
+
+<Source language="bash" code={`npx wakastellar-ui add waka-floating-nav`} />
+
+## Usage
+
+<Canvas of={Stories.Default} />
+
+<Controls of={Stories.Default} />
+
+## Examples
+
+### With Labels
+
+<Canvas of={Stories.WithLabels} />
+
+### Top Position
+
+<Canvas of={Stories.TopPosition} />
+
+
+## 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-floating-nav.md\`
+- See the [accessibility dimension report](?path=/docs/dimensions-accessibility--docs)

package/src/components/waka-floating-nav/WakaFloatingNav.stories.tsx

@@ -6,7 +6,6 @@ const meta: Meta<typeof WakaFloatingNav> = {
   title: "Navigation/WakaFloatingNav",
   component: WakaFloatingNav,
   parameters: { layout: "centered" },
-  tags: ["autodocs"],
   argTypes: {
     position: { control: "select", options: ["bottom", "top", "left", "right"], description: "Position" },
     variant: { control: "select", options: ["pill", "bar", "floating"], description: "Variante" },