@wakastellar/ui 4.0.0 → 4.1.1

package/src/components/editor/waka-spec-editor.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import * as React from "react"
+import type { AnyPluginConfig, Descendant, SlateEditor, Value } from "platejs"
 import {
   BookOpen,
   CheckCircle2,
@@ -18,8 +19,24 @@ import { Textarea } from "../textarea"
 
 // ─── Types ───────────────────────────────────────────────────────────────────
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-type SlateNode = any
+type SlateNode = Descendant
+
+/** Plate runtime bundle resolved via dynamic import at mount time. */
+interface PlateBundle {
+  Plate: React.ComponentType<{
+    editor: SlateEditor
+    children?: React.ReactNode
+    onChange?: (ctx: { value: Value }) => void
+    readOnly?: boolean
+  }>
+  PlateContent: React.ComponentType<{
+    placeholder?: string
+    className?: string
+    readOnly?: boolean
+  }>
+  usePlateEditor: (config: { plugins?: AnyPluginConfig[]; value?: Value }) => SlateEditor
+  plugins: AnyPluginConfig[]
+}
 
 /** A predefined spec block template */
 export interface SpecBlockTemplate {
@@ -71,11 +88,9 @@ export interface WakaSpecEditorProps {
   /** Title change callback */
   onTitleChange?: (title: string) => void
   /** Extra Plate plugins */
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  extraPlugins?: any[]
+  extraPlugins?: AnyPluginConfig[]
   /** Ref to editor instance */
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  editorRef?: React.MutableRefObject<any>
+  editorRef?: React.MutableRefObject<SlateEditor | null>
 }
 
 // ─── Default spec block templates ────────────────────────────────────────────
@@ -383,10 +398,9 @@ export const WakaSpecEditor = React.forwardRef<HTMLDivElement, WakaSpecEditorPro
     },
     ref
   ) => {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const [bundle, setBundle] = React.useState<any>(null)
+    const [bundle, setBundle] = React.useState<PlateBundle | null>(null)
     const [loadError, setLoadError] = React.useState(false)
-    const internalEditorRef = React.useRef<unknown>(null)
+    const internalEditorRef = React.useRef<SlateEditor | null>(null)
     const effectiveEditorRef = editorRef ?? internalEditorRef
 
     const allTemplates = React.useMemo(
@@ -422,8 +436,7 @@ export const WakaSpecEditor = React.forwardRef<HTMLDivElement, WakaSpecEditorPro
               import("@platejs/indent/react"),
             ])
 
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          const plugins: any[] = [
+          const plugins: AnyPluginConfig[] = [
             basicNodes.BoldPlugin, basicNodes.ItalicPlugin, basicNodes.UnderlinePlugin,
             basicNodes.StrikethroughPlugin, basicNodes.CodePlugin, basicNodes.HighlightPlugin,
             basicNodes.SuperscriptPlugin, basicNodes.SubscriptPlugin,
@@ -607,18 +620,15 @@ function SpecEditorInner({
   extraPlugins,
   editorRef,
 }: {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  bundle: any
+  bundle: PlateBundle
   value?: SlateNode[]
   onChange?: (value: SlateNode[]) => void
   readOnly?: boolean
   placeholder?: string
   editorClassName?: string
   minHeight?: number
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  extraPlugins?: any[]
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  editorRef?: React.MutableRefObject<any>
+  extraPlugins?: AnyPluginConfig[]
+  editorRef?: React.MutableRefObject<SlateEditor | null>
 }) {
   const allPlugins = React.useMemo(
     () => [...plugins, ...(extraPlugins ?? [])],
@@ -627,7 +637,7 @@ function SpecEditorInner({
 
   const editor = usePlateEditor({
     plugins: allPlugins,
-    value: value ?? [{ type: "p", children: [{ text: "" }] }],
+    value: (value ?? [{ type: "p", children: [{ text: "" }] }]) as Value,
   })
 
   React.useEffect(() => {

package/src/components/index.ts

@@ -40,6 +40,8 @@ export * from './theme-selector'
 export * from './toast'
 export * from './toaster'
 export * from './toggle'
+export * from './toggle-group'
+export * from './resizable'
 export * from './tooltip'
 export * from './typography'
 export * from './DataTable'

package/src/components/input-otp/index.tsx

@@ -229,7 +229,9 @@ export const InputOTP = React.forwardRef<HTMLDivElement, InputOTPProps>(
           {Array.from({ length }).map((_, index) => (
             <React.Fragment key={index}>
               <input
-                ref={(el) => (inputsRef.current[index] = el)}
+                ref={(el) => {
+                  inputsRef.current[index] = el
+                }}
                 type={secure ? 'password' : 'text'}
                 inputMode={pattern === 'numeric' ? 'numeric' : 'text'}
                 maxLength={1}

package/src/components/resizable/Resizable.mdx

@@ -0,0 +1,73 @@
+import { Meta, Canvas, Controls, Source, ArgTypes } from '@storybook/addon-docs/blocks'
+import * as Stories from './Resizable.stories'
+
+<Meta of={Stories} />
+
+# Resizable
+
+Accessible resizable panel groups and layouts, built on
+[`react-resizable-panels`](https://github.com/bvaughn/react-resizable-panels).
+Use the `orientation` prop (`"horizontal"` by default, or `"vertical"`) to set
+the resize axis.
+
+## Installation
+
+The components are exported from the root entry point of `@wakastellar/ui`:
+
+<Source language="tsx" code={`import {
+  ResizablePanelGroup,
+  ResizablePanel,
+  ResizableHandle,
+} from '@wakastellar/ui'`} />
+
+If you use the CLI scaffolder:
+
+<Source language="bash" code={`npx wakastellar-ui add resizable`} />
+
+## Usage
+
+<Canvas of={Stories.Horizontal} />
+
+<Controls of={Stories.Horizontal} />
+
+## Examples
+
+### Vertical
+
+<Canvas of={Stories.Vertical} />
+
+### Three panels
+
+<Canvas of={Stories.ThreePanels} />
+
+## Anatomy
+
+<Source language="tsx" code={`<ResizablePanelGroup orientation="horizontal">
+  <ResizablePanel defaultSize={50}>One</ResizablePanel>
+  <ResizableHandle withHandle />
+  <ResizablePanel defaultSize={50}>Two</ResizablePanel>
+</ResizablePanelGroup>`} />
+
+## API Reference
+
+<ArgTypes of={Stories.Horizontal} />
+
+## Accessibility
+
+- The resize handle renders with `role="separator"` and is keyboard operable
+  (Arrow keys to resize, Home/End to snap).
+- Pass `withHandle` to surface a visible grip affordance for pointer users.
+- Touch targets are enlarged automatically on coarse pointers.
+
+## Theming
+
+All visual tokens are CSS custom properties consumed via Tailwind v4. The handle
+uses the `--border` token:
+
+<Source language="css" code={`:root {
+  --border: oklch(0.92 0 0);
+}`} />
+
+## Related
+
+- See the [accessibility dimension report](?path=/docs/dimensions-accessibility--docs)

package/src/components/resizable/Resizable.stories.tsx

@@ -0,0 +1,74 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from './index'
+
+const meta: Meta<typeof ResizablePanelGroup> = {
+  title: 'Components/Resizable',
+  component: ResizablePanelGroup,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'Accessible resizable panel groups and layouts, built on react-resizable-panels. Use the `orientation` prop ("horizontal" | "vertical").',
+      },
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof ResizablePanelGroup>
+
+export const Horizontal: Story = {
+  render: () => (
+    <ResizablePanelGroup
+      orientation="horizontal"
+      className="h-48 w-[480px] rounded-lg border"
+    >
+      <ResizablePanel defaultSize={50}>
+        <div className="flex h-full items-center justify-center p-6">Un</div>
+      </ResizablePanel>
+      <ResizableHandle withHandle />
+      <ResizablePanel defaultSize={50}>
+        <div className="flex h-full items-center justify-center p-6">Deux</div>
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  ),
+}
+
+export const Vertical: Story = {
+  render: () => (
+    <ResizablePanelGroup
+      orientation="vertical"
+      className="h-72 w-[480px] rounded-lg border"
+    >
+      <ResizablePanel defaultSize={40}>
+        <div className="flex h-full items-center justify-center p-6">Haut</div>
+      </ResizablePanel>
+      <ResizableHandle withHandle />
+      <ResizablePanel defaultSize={60}>
+        <div className="flex h-full items-center justify-center p-6">Bas</div>
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  ),
+}
+
+export const ThreePanels: Story = {
+  render: () => (
+    <ResizablePanelGroup
+      orientation="horizontal"
+      className="h-48 w-[600px] rounded-lg border"
+    >
+      <ResizablePanel defaultSize={25}>
+        <div className="flex h-full items-center justify-center p-6">Sidebar</div>
+      </ResizablePanel>
+      <ResizableHandle withHandle />
+      <ResizablePanel defaultSize={50}>
+        <div className="flex h-full items-center justify-center p-6">Contenu</div>
+      </ResizablePanel>
+      <ResizableHandle withHandle />
+      <ResizablePanel defaultSize={25}>
+        <div className="flex h-full items-center justify-center p-6">Aside</div>
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  ),
+}

package/src/components/resizable/index.tsx

@@ -0,0 +1,63 @@
+"use client"
+
+import * as React from "react"
+import { Group, Panel, Separator } from "react-resizable-panels"
+import { GripVertical } from "lucide-react"
+
+import { cn } from "../../utils/cn"
+
+/**
+ * Groupe de panneaux redimensionnables.
+ *
+ * S'appuie sur `react-resizable-panels` (v4). Utilise la prop `orientation`
+ * (`"horizontal"` par défaut, ou `"vertical"`) pour définir l'axe de
+ * redimensionnement.
+ */
+function ResizablePanelGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof Group>) {
+  return (
+    <Group
+      className={cn("flex h-full w-full items-stretch", className)}
+      {...props}
+    />
+  )
+}
+
+/**
+ * Panneau redimensionnable individuel. À placer comme enfant direct d'un
+ * `ResizablePanelGroup`.
+ */
+const ResizablePanel = Panel
+
+/**
+ * Poignée de redimensionnement entre deux panneaux (`role="separator"`).
+ *
+ * @param withHandle - Affiche un grip visuel centré sur la poignée.
+ */
+function ResizableHandle({
+  withHandle,
+  className,
+  ...props
+}: React.ComponentProps<typeof Separator> & {
+  withHandle?: boolean
+}) {
+  return (
+    <Separator
+      className={cn(
+        "relative flex items-center justify-center bg-border focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+        className
+      )}
+      {...props}
+    >
+      {withHandle && (
+        <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
+          <GripVertical className="h-2.5 w-2.5" />
+        </div>
+      )}
+    </Separator>
+  )
+}
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle }

package/src/components/toaster/Toaster.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react"
 import { Toaster } from "./index"
-import { useToast } from "../../hooks/useToast"
+import { useToast } from "../../hooks/use-toast"
 import { Button } from "../button"
 
 const ToasterDemo = () => {

package/src/components/toaster/index.tsx

@@ -6,7 +6,7 @@ import {
   ToastTitle,
   ToastViewport,
 } from "../toast"
-import { useToast } from "../../hooks/useToast"
+import { useToast } from "../../hooks/use-toast"
 
 export function Toaster() {
   const { toasts } = useToast()

package/src/components/toggle-group/ToggleGroup.mdx

@@ -0,0 +1,62 @@
+import { Meta, Canvas, Controls, Source, ArgTypes } from '@storybook/addon-docs/blocks'
+import * as Stories from './ToggleGroup.stories'
+
+<Meta of={Stories} />
+
+# ToggleGroup
+
+A set of two-state buttons that can be toggled on or off. The group propagates
+its `variant` and `size` to every item via React context, so individual items
+stay in sync without repetition.
+
+## Installation
+
+The component is exported from the root entry point of `@wakastellar/ui`:
+
+<Source language="tsx" code={`import { ToggleGroup, ToggleGroupItem } from '@wakastellar/ui'`} />
+
+If you use the CLI scaffolder:
+
+<Source language="bash" code={`npx wakastellar-ui add toggle-group`} />
+
+## Usage
+
+<Canvas of={Stories.Default} />
+
+<Controls of={Stories.Default} />
+
+## Examples
+
+### Outline (single selection)
+
+<Canvas of={Stories.Outline} />
+
+### Sizes
+
+<Canvas of={Stories.Sizes} />
+
+## API Reference
+
+<ArgTypes of={Stories.Default} />
+
+## Accessibility
+
+- Full keyboard navigation (Tab, Arrow keys, Enter, Space) via Radix UI Toggle Group.
+- `type="single"` enforces a single active item; `type="multiple"` allows several.
+- Each `ToggleGroupItem` should carry a meaningful `aria-label` when its content is icon-only.
+- Focus ring visible at all times; color contrast meets WCAG AA in 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 {
+  --accent: oklch(0.65 0.18 250);
+  --accent-foreground: oklch(0.98 0 0);
+}`} />
+
+## Related
+
+- Single-button counterpart: see the [Toggle](?path=/docs/components-toggle--docs) component.
+- See the [accessibility dimension report](?path=/docs/dimensions-accessibility--docs)

package/src/components/toggle-group/ToggleGroup.stories.tsx

@@ -0,0 +1,85 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { ToggleGroup, ToggleGroupItem } from './index'
+import { Bold, Italic, Underline, AlignLeft, AlignCenter, AlignRight } from 'lucide-react'
+
+const meta: Meta<typeof ToggleGroup> = {
+  title: 'Components/ToggleGroup',
+  component: ToggleGroup,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'A set of two-state buttons that can be toggled on or off. Variant and size propagate from the group to its items.',
+      },
+    },
+  },
+  argTypes: {
+    type: {
+      control: 'inline-radio',
+      options: ['single', 'multiple'],
+      description: 'Single or multiple selection mode',
+    },
+    variant: {
+      control: 'select',
+      options: ['default', 'outline'],
+      description: 'Visual style applied to all items',
+    },
+    size: {
+      control: 'select',
+      options: ['default', 'sm', 'lg'],
+      description: 'Size applied to all items',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof ToggleGroup>
+
+export const Default: Story = {
+  args: { type: 'multiple' },
+  render: (args) => (
+    <ToggleGroup {...args}>
+      <ToggleGroupItem value="bold" aria-label="Toggle bold">
+        <Bold className="h-4 w-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="italic" aria-label="Toggle italic">
+        <Italic className="h-4 w-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="underline" aria-label="Toggle underline">
+        <Underline className="h-4 w-4" />
+      </ToggleGroupItem>
+    </ToggleGroup>
+  ),
+}
+
+export const Outline: Story = {
+  render: () => (
+    <ToggleGroup type="single" variant="outline" defaultValue="center">
+      <ToggleGroupItem value="left" aria-label="Align left">
+        <AlignLeft className="h-4 w-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="center" aria-label="Align center">
+        <AlignCenter className="h-4 w-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="right" aria-label="Align right">
+        <AlignRight className="h-4 w-4" />
+      </ToggleGroupItem>
+    </ToggleGroup>
+  ),
+}
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex flex-col items-center gap-4">
+      <ToggleGroup type="single" size="sm" defaultValue="a">
+        <ToggleGroupItem value="a">SM</ToggleGroupItem>
+        <ToggleGroupItem value="b">SM</ToggleGroupItem>
+      </ToggleGroup>
+      <ToggleGroup type="single" size="lg" defaultValue="a">
+        <ToggleGroupItem value="a">LG</ToggleGroupItem>
+        <ToggleGroupItem value="b">LG</ToggleGroupItem>
+      </ToggleGroup>
+    </div>
+  ),
+}

package/src/components/toggle-group/index.tsx

@@ -0,0 +1,61 @@
+"use client"
+
+import * as React from "react"
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
+import { type VariantProps } from "class-variance-authority"
+
+import { cn } from "../../utils/cn"
+import { toggleVariants } from "../toggle"
+
+const ToggleGroupContext = React.createContext<
+  VariantProps<typeof toggleVariants>
+>({
+  size: "default",
+  variant: "default",
+})
+
+const ToggleGroup = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
+    VariantProps<typeof toggleVariants>
+>(({ className, variant, size, children, ...props }, ref) => (
+  <ToggleGroupPrimitive.Root
+    ref={ref}
+    className={cn("flex items-center justify-center gap-1", className)}
+    {...props}
+  >
+    <ToggleGroupContext.Provider value={{ variant, size }}>
+      {children}
+    </ToggleGroupContext.Provider>
+  </ToggleGroupPrimitive.Root>
+))
+
+ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName
+
+const ToggleGroupItem = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
+    VariantProps<typeof toggleVariants>
+>(({ className, children, variant, size, ...props }, ref) => {
+  const context = React.useContext(ToggleGroupContext)
+
+  return (
+    <ToggleGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  )
+})
+
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName
+
+export { ToggleGroup, ToggleGroupItem }

package/src/components/typography/index.tsx

@@ -120,7 +120,7 @@ export interface HeadingProps
  */
 const Heading = React.forwardRef<HTMLHeadingElement, HeadingProps>(
   ({ className, level = "h2", variant, asChild = false, ...props }, ref) => {
-    const Comp = (asChild ? Slot : level) as any
+    const Comp = (asChild ? Slot : level) as React.ElementType
     return (
       <Comp
         className={cn(headingVariants({ level, variant }), className)}

package/src/components/waka-ad-provider/index.tsx

@@ -114,7 +114,7 @@ export function useAdContext() {
 
 // ==================== Hooks ====================
 
-export function useAdVisibility(ref: React.RefObject<HTMLElement>, threshold = 0.5) {
+export function useAdVisibility(ref: React.RefObject<HTMLElement | null>, threshold = 0.5) {
   const [isVisible, setIsVisible] = useState(false)
   const [viewableTime, setViewableTime] = useState(0)
   const viewableStartRef = useRef<number | null>(null)
@@ -194,7 +194,7 @@ export function WakaAdProvider({ children, config, onEvent }: WakaAdProviderProp
           })
         }
 
-        window.googletag = window.googletag || ({ cmd: [] } as Window["googletag"])
+        window.googletag = window.googletag || ({ cmd: [] } as unknown as Window["googletag"])
         window.googletag.cmd.push(() => {
           window.googletag.pubads().enableSingleRequest()
           if (config.enableLazyLoad) {

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

@@ -36,7 +36,7 @@ export interface AdmincrumbItem {
   id: string
   name: string
   type: "partner" | "network" | "customer"
-  metadata?: Record<string, any>
+  metadata?: { count?: number } & Record<string, unknown>
 }
 
 export interface AdmincrumbLevel {
@@ -153,7 +153,7 @@ const AdmincrumbSelector = React.forwardRef<
           role="combobox"
           aria-expanded={open}
           className={cn(
-            selectorVariants({ variant: variant as any }),
+            selectorVariants({ variant }),
             selected?.id ? "border-primary/50" : ""
           )}
           disabled={isLoading || items.length === 0}

package/src/components/waka-allocation-matrix/index.tsx

@@ -404,16 +404,21 @@ export function useAllocationMatrix({
   const setAllocation = React.useCallback(
     (resourceId: string, consumerId: string, value: number) => {
       const key = getAllocationKey(resourceId, consumerId)
+      // Clamp once and use it for BOTH the stored value and the callback —
+      // previously the Map stored Math.max(0, value) but the callback reported
+      // the raw (possibly negative) value, so consumers saw a value the matrix
+      // never actually held.
+      const clamped = Math.max(0, value)
       setAllocations((prev) => {
         const next = new Map(prev)
-        if (value === 0) {
+        if (clamped === 0) {
           next.delete(key)
         } else {
-          next.set(key, Math.max(0, value))
+          next.set(key, clamped)
         }
         return next
       })
-      onAllocationChange?.(resourceId, consumerId, value)
+      onAllocationChange?.(resourceId, consumerId, clamped)
     },
     [onAllocationChange]
   )

package/src/components/waka-audit-log/index.tsx

@@ -16,6 +16,7 @@
 
 import * as React from "react"
 import { cn } from "../../utils/cn"
+import { localDateKey } from "../../utils/local-date"
 import {
   Activity,
   LogIn,
@@ -422,7 +423,7 @@ function formatFullTimestamp(date: Date): string {
 
 function formatLocation(location?: AuditLocation): string | null {
   if (!location) return null
-  const parts = []
+  const parts: string[] = []
   if (location.city) parts.push(location.city)
   if (location.country) parts.push(location.country)
   return parts.length > 0 ? parts.join(", ") : null
@@ -997,7 +998,7 @@ function FilterBar({ filters, onFilterChange, users, showSearch }: FilterBarProp
               <input
                 type="date"
                 aria-label="Start date"
-                value={filters.startDate?.toISOString().split("T")[0] || ""}
+                value={filters.startDate ? localDateKey(filters.startDate) : ""}
                 onChange={(e) =>
                   onFilterChange({
                     ...filters,
@@ -1010,7 +1011,7 @@ function FilterBar({ filters, onFilterChange, users, showSearch }: FilterBarProp
               <input
                 type="date"
                 aria-label="End date"
-                value={filters.endDate?.toISOString().split("T")[0] || ""}
+                value={filters.endDate ? localDateKey(filters.endDate) : ""}
                 onChange={(e) =>
                   onFilterChange({
                     ...filters,