@wakastellar/ui 3.5.0 → 4.0.0-dev.0

package/src/components/waka-coupon-input/WakaCouponInput.mdx

@@ -0,0 +1,69 @@
+import { Meta, Canvas, Controls, Source, ArgTypes } from '@storybook/addon-docs/blocks'
+import * as Stories from './WakaCouponInput.stories'
+
+<Meta of={Stories} />
+
+# WakaCouponInput
+
+Coupon code input with inline validation and apply button.
+
+## Installation
+
+The component is exported from the root entry point of `@wakastellar/ui`:
+
+<Source language="tsx" code={`import { WakaCouponInput } from '@wakastellar/ui'`} />
+
+If you use the CLI scaffolder:
+
+<Source language="bash" code={`npx wakastellar-ui add waka-coupon-input`} />
+
+## Usage
+
+<Canvas of={Stories.Default} />
+
+<Controls of={Stories.Default} />
+
+## Examples
+
+### With Applied Coupon
+
+<Canvas of={Stories.WithAppliedCoupon} />
+
+### Multiple Coupons
+
+<Canvas of={Stories.MultipleCoupons} />
+
+### Disabled
+
+<Canvas of={Stories.Disabled} />
+
+### Single Coupon Only
+
+<Canvas of={Stories.SingleCouponOnly} />
+
+
+## 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-coupon-input.md\`
+- See the [accessibility dimension report](?path=/docs/dimensions-accessibility--docs)

package/src/components/waka-coupon-input/WakaCouponInput.stories.tsx

@@ -8,7 +8,6 @@ const meta: Meta<typeof WakaCouponInput> = {
   parameters: {
     layout: "centered",
   },
-  tags: ["autodocs"],
   argTypes: {
     placeholder: {
       control: "text",

package/src/components/waka-credit-activity-feed/WakaCreditActivityFeed.mdx

@@ -0,0 +1,77 @@
+import { Meta, Canvas, Controls, Source, ArgTypes } from '@storybook/addon-docs/blocks'
+import * as Stories from './WakaCreditActivityFeed.stories'
+
+<Meta of={Stories} />
+
+# WakaCreditActivityFeed
+
+Reverse-chronological feed of credit-impacting actions.
+
+## Installation
+
+The component is exported from the root entry point of `@wakastellar/ui`:
+
+<Source language="tsx" code={`import { WakaCreditActivityFeed } from '@wakastellar/ui'`} />
+
+If you use the CLI scaffolder:
+
+<Source language="bash" code={`npx wakastellar-ui add waka-credit-activity-feed`} />
+
+## Usage
+
+<Canvas of={Stories.Default} />
+
+<Controls of={Stories.Default} />
+
+## Examples
+
+### With Load More
+
+<Canvas of={Stories.WithLoadMore} />
+
+### Animated
+
+<Canvas of={Stories.Animated} />
+
+### Empty
+
+<Canvas of={Stories.Empty} />
+
+### Loading
+
+<Canvas of={Stories.Loading} />
+
+### Limited Items
+
+<Canvas of={Stories.LimitedItems} />
+
+### All Types
+
+<Canvas of={Stories.AllTypes} />
+
+
+## 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-credit-activity-feed.md\`
+- See the [accessibility dimension report](?path=/docs/dimensions-accessibility--docs)

package/src/components/waka-credit-activity-feed/WakaCreditActivityFeed.stories.tsx

@@ -115,7 +115,6 @@ const meta: Meta<typeof WakaCreditActivityFeed> = {
       },
     },
   },
-  tags: ["autodocs"],
   argTypes: {
     maxItems: {
       control: { type: "number", min: 1, max: 20 },
@@ -259,3 +258,18 @@ export const AllTypes: 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: {
+    maxItems: 0,
+    showLoadMore: false,
+    loading: false,
+    animated: false,
+    emptyMessage: "",
+  },
+  render: (args) => <WakaCreditActivityFeed {...args} />,
+}

package/src/components/waka-credit-alert/WakaCreditAlert.mdx

@@ -0,0 +1,73 @@
+import { Meta, Canvas, Controls, Source, ArgTypes } from '@storybook/addon-docs/blocks'
+import * as Stories from './WakaCreditAlert.stories'
+
+<Meta of={Stories} />
+
+# WakaCreditAlert
+
+Alert banner shown when credit balance crosses a configured threshold.
+
+## Installation
+
+The component is exported from the root entry point of `@wakastellar/ui`:
+
+<Source language="tsx" code={`import { WakaCreditAlert } from '@wakastellar/ui'`} />
+
+If you use the CLI scaffolder:
+
+<Source language="bash" code={`npx wakastellar-ui add waka-credit-alert`} />
+
+## Usage
+
+<Canvas of={Stories.Info} />
+
+<Controls of={Stories.Info} />
+
+## Examples
+
+### Warning
+
+<Canvas of={Stories.Warning} />
+
+### Critical
+
+<Canvas of={Stories.Critical} />
+
+### Depleted
+
+<Canvas of={Stories.Depleted} />
+
+### With Top Up
+
+<Canvas of={Stories.WithTopUp} />
+
+### Dismissable
+
+<Canvas of={Stories.Dismissable} />
+
+
+## API Reference
+
+<ArgTypes of={Stories.Info} />
+
+## 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-credit-alert.md\`
+- See the [accessibility dimension report](?path=/docs/dimensions-accessibility--docs)

package/src/components/waka-credit-alert/WakaCreditAlert.stories.tsx

@@ -14,7 +14,6 @@ const meta: Meta<typeof WakaCreditAlert> = {
       },
     },
   },
-  tags: ['autodocs'],
   argTypes: {
     level: {
       control: 'select',
@@ -168,3 +167,19 @@ export const Dismissable: 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: {
+    level: "info",
+    balance: 0,
+    threshold: 0,
+    message: "",
+    topUpLabel: "",
+    dismissable: false,
+  },
+  render: (args) => <WakaCreditAlert {...args} />,
+}

package/src/components/waka-credit-balance/WakaCreditBalance.mdx

@@ -0,0 +1,81 @@
+import { Meta, Canvas, Controls, Source, ArgTypes } from '@storybook/addon-docs/blocks'
+import * as Stories from './WakaCreditBalance.stories'
+
+<Meta of={Stories} />
+
+# WakaCreditBalance
+
+Numeric credit balance display with formatted total and currency suffix.
+
+## Installation
+
+The component is exported from the root entry point of `@wakastellar/ui`:
+
+<Source language="tsx" code={`import { WakaCreditBalance } from '@wakastellar/ui'`} />
+
+If you use the CLI scaffolder:
+
+<Source language="bash" code={`npx wakastellar-ui add waka-credit-balance`} />
+
+## Usage
+
+<Canvas of={Stories.Default} />
+
+<Controls of={Stories.Default} />
+
+## Examples
+
+### Variants
+
+<Canvas of={Stories.Variants} />
+
+### Sizes
+
+<Canvas of={Stories.Sizes} />
+
+### With Thresholds
+
+<Canvas of={Stories.WithThresholds} />
+
+### Low Balance
+
+<Canvas of={Stories.LowBalance} />
+
+### Critical Balance
+
+<Canvas of={Stories.CriticalBalance} />
+
+### Animated
+
+<Canvas of={Stories.Animated} />
+
+### Loading
+
+<Canvas of={Stories.Loading} />
+
+
+## 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-credit-balance.md\`
+- See the [accessibility dimension report](?path=/docs/dimensions-accessibility--docs)

package/src/components/waka-credit-balance/WakaCreditBalance.stories.tsx

@@ -14,7 +14,6 @@ const meta: Meta<typeof WakaCreditBalance> = {
       },
     },
   },
-  tags: ['autodocs'],
   argTypes: {
     variant: {
       control: 'select',
@@ -257,3 +256,18 @@ export const Loading: 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: {
+    variant: "card",
+    size: "sm",
+    balance: 0,
+    animated: false,
+    loading: false,
+  },
+  render: (args) => <WakaCreditBalance {...args} />,
+}

package/src/components/waka-credit-breakdown/WakaCreditBreakdown.mdx

@@ -0,0 +1,73 @@
+import { Meta, Canvas, Controls, Source, ArgTypes } from '@storybook/addon-docs/blocks'
+import * as Stories from './WakaCreditBreakdown.stories'
+
+<Meta of={Stories} />
+
+# WakaCreditBreakdown
+
+Detailed breakdown of credit consumption per feature and per period.
+
+## Installation
+
+The component is exported from the root entry point of `@wakastellar/ui`:
+
+<Source language="tsx" code={`import { WakaCreditBreakdown } from '@wakastellar/ui'`} />
+
+If you use the CLI scaffolder:
+
+<Source language="bash" code={`npx wakastellar-ui add waka-credit-breakdown`} />
+
+## Usage
+
+<Canvas of={Stories.Pie} />
+
+<Controls of={Stories.Pie} />
+
+## Examples
+
+### Donut
+
+<Canvas of={Stories.Donut} />
+
+### Bar
+
+<Canvas of={Stories.Bar} />
+
+### With Percentages
+
+<Canvas of={Stories.WithPercentages} />
+
+### Clickable
+
+<Canvas of={Stories.Clickable} />
+
+### Custom Colors
+
+<Canvas of={Stories.CustomColors} />
+
+
+## API Reference
+
+<ArgTypes of={Stories.Pie} />
+
+## 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-credit-breakdown.md\`
+- See the [accessibility dimension report](?path=/docs/dimensions-accessibility--docs)

package/src/components/waka-credit-breakdown/WakaCreditBreakdown.stories.tsx

@@ -40,7 +40,6 @@ const meta: Meta<typeof WakaCreditBreakdown> = {
       },
     },
   },
-  tags: ['autodocs'],
   argTypes: {
     variant: {
       control: 'select',
@@ -184,3 +183,18 @@ export const CustomColors: 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: {
+    variant: "pie",
+    showPercentages: false,
+    showLegend: false,
+    height: 0,
+    animated: false,
+  },
+  render: (args) => <WakaCreditBreakdown {...args} />,
+}

package/src/components/waka-credit-burn-rate/WakaCreditBurnRate.mdx

@@ -0,0 +1,73 @@
+import { Meta, Canvas, Controls, Source, ArgTypes } from '@storybook/addon-docs/blocks'
+import * as Stories from './WakaCreditBurnRate.stories'
+
+<Meta of={Stories} />
+
+# WakaCreditBurnRate
+
+Credit Burn Rate component for the WakaStart UI library.
+
+## Installation
+
+The component is exported from the root entry point of `@wakastellar/ui`:
+
+<Source language="tsx" code={`import { WakaCreditBurnRate } from '@wakastellar/ui'`} />
+
+If you use the CLI scaffolder:
+
+<Source language="bash" code={`npx wakastellar-ui add waka-credit-burn-rate`} />
+
+## Usage
+
+<Canvas of={Stories.Default} />
+
+<Controls of={Stories.Default} />
+
+## Examples
+
+### Card
+
+<Canvas of={Stories.Card} />
+
+### With Projection
+
+<Canvas of={Stories.WithProjection} />
+
+### High Burn
+
+<Canvas of={Stories.HighBurn} />
+
+### Low Burn
+
+<Canvas of={Stories.LowBurn} />
+
+### Animated
+
+<Canvas of={Stories.Animated} />
+
+
+## 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-credit-burn-rate.md\`
+- See the [accessibility dimension report](?path=/docs/dimensions-accessibility--docs)

package/src/components/waka-credit-burn-rate/WakaCreditBurnRate.stories.tsx

@@ -95,7 +95,6 @@ const meta: Meta<typeof WakaCreditBurnRate> = {
       },
     },
   },
-  tags: ["autodocs"],
   argTypes: {
     variant: {
       control: "select",
@@ -225,3 +224,20 @@ export const Animated: 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: {
+    variant: "sparkline",
+    showProjection: false,
+    projectionDays: 0,
+    width: 0,
+    height: 0,
+    animated: false,
+    balance: 0,
+  },
+  render: (args) => <WakaCreditBurnRate {...args} />,
+}

package/src/components/waka-credit-card-input/WakaCreditCardInput.mdx

@@ -0,0 +1,73 @@
+import { Meta, Canvas, Controls, Source, ArgTypes } from '@storybook/addon-docs/blocks'
+import * as Stories from './WakaCreditCardInput.stories'
+
+<Meta of={Stories} />
+
+# WakaCreditCardInput
+
+Card number entry with brand detection, formatting, and expiration / CVC fields.
+
+## Installation
+
+The component is exported from the root entry point of `@wakastellar/ui`:
+
+<Source language="tsx" code={`import { WakaCreditCardInput } from '@wakastellar/ui'`} />
+
+If you use the CLI scaffolder:
+
+<Source language="bash" code={`npx wakastellar-ui add waka-credit-card-input`} />
+
+## Usage
+
+<Canvas of={Stories.Default} />
+
+<Controls of={Stories.Default} />
+
+## Examples
+
+### Inline Layout
+
+<Canvas of={Stories.InlineLayout} />
+
+### Without Preview
+
+<Canvas of={Stories.WithoutPreview} />
+
+### Small Size
+
+<Canvas of={Stories.SmallSize} />
+
+### Large Size
+
+<Canvas of={Stories.LargeSize} />
+
+### 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-credit-card-input.md\`
+- See the [accessibility dimension report](?path=/docs/dimensions-accessibility--docs)

package/src/components/waka-credit-card-input/WakaCreditCardInput.stories.tsx

@@ -8,7 +8,6 @@ const meta: Meta<typeof WakaCreditCardInput> = {
   parameters: {
     layout: "centered",
   },
-  tags: ["autodocs"],
   argTypes: {
     showCardPreview: {
       control: "boolean",