@wakastellar/ui 4.0.0-dev.0 → 4.0.1

package/src/components/editor/waka-slash-menu.tsx

@@ -22,6 +22,24 @@ import { cn } from "../../utils/cn"
 
 // ─── Types ───────────────────────────────────────────────────────────────────
 
+/**
+ * Minimal Plate/Slate editor surface used by slash command actions.
+ *
+ * Slash command callbacks reach for editor methods that are contributed
+ * dynamically by plugins (`tf.<plugin>`, TipTap-style `chain()`) or by the
+ * Slate core (`insertNodes`). They are declared here structurally so command
+ * authors get an editor instead of `any`, while the dynamic surfaces stay
+ * accessible without forcing per-call narrowing.
+ */
+export interface SlashCommandEditor {
+  /** Inserts Slate nodes at the current selection. */
+  insertNodes: (nodes: unknown, options?: unknown) => void
+  /** Plate transform surface (`editor.tf.<plugin>.<op>`). */
+  tf: Record<string, Record<string, (...args: unknown[]) => void>>
+  /** Additional, plugin-provided members accessed dynamically. */
+  [key: string]: unknown
+}
+
 /** A single slash command entry */
 export interface SlashCommand {
   /** Unique key used for filtering */
@@ -40,8 +58,7 @@ export interface SlashCommand {
    * Action to execute when the command is selected.
    * Receives the Plate editor instance.
    */
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  action: (editor: any) => void
+  action: (editor: SlashCommandEditor) => void
 }
 
 export interface WakaSlashMenuProps {
@@ -55,6 +72,22 @@ export interface WakaSlashMenuProps {
 
 // ─── Default commands ────────────────────────────────────────────────────────
 
+/** Plate transform surface (`editor.tf.<plugin>.<op>`), accessed dynamically. */
+type EditorTransforms = { tf: Record<string, Record<string, (...args: unknown[]) => void>> }
+/** TipTap-style command chain surface (`editor.chain().focus()...run()`). */
+type EditorChain = { chain: () => Record<string, () => EditorChainStep> }
+type EditorChainStep = Record<string, () => EditorChainStep> & { run: () => void }
+
+/** Runs a Plate transform action, swallowing errors when the plugin is absent. */
+function runTransform(editor: unknown, fn: (tf: EditorTransforms["tf"]) => void) {
+  try { fn((editor as EditorTransforms).tf) } catch { /* plugin not loaded */ }
+}
+
+/** Runs a TipTap-style command chain, swallowing errors when unsupported. */
+function runChain(editor: unknown, fn: (chain: EditorChain["chain"]) => void) {
+  try { fn((editor as EditorChain).chain) } catch { /* command not loaded */ }
+}
+
 /** Default slash commands for WakaStart editors */
 export const DEFAULT_SLASH_COMMANDS: SlashCommand[] = [
   // Basic blocks
@@ -65,7 +98,7 @@ export const DEFAULT_SLASH_COMMANDS: SlashCommand[] = [
     icon: Heading1,
     group: "Blocs de base",
     keywords: ["heading", "titre", "h1"],
-    action: (e) => { try { e.tf.h1.toggle() } catch { /* */ } },
+    action: (e) => runTransform(e, (tf) => tf.h1.toggle()),
   },
   {
     key: "h2",
@@ -74,7 +107,7 @@ export const DEFAULT_SLASH_COMMANDS: SlashCommand[] = [
     icon: Heading2,
     group: "Blocs de base",
     keywords: ["heading", "titre", "h2"],
-    action: (e) => { try { e.tf.h2.toggle() } catch { /* */ } },
+    action: (e) => runTransform(e, (tf) => tf.h2.toggle()),
   },
   {
     key: "h3",
@@ -83,7 +116,7 @@ export const DEFAULT_SLASH_COMMANDS: SlashCommand[] = [
     icon: Heading3,
     group: "Blocs de base",
     keywords: ["heading", "titre", "h3"],
-    action: (e) => { try { e.tf.h3.toggle() } catch { /* */ } },
+    action: (e) => runTransform(e, (tf) => tf.h3.toggle()),
   },
   {
     key: "bulletList",
@@ -92,7 +125,7 @@ export const DEFAULT_SLASH_COMMANDS: SlashCommand[] = [
     icon: List,
     group: "Blocs de base",
     keywords: ["bullet", "list", "unordered", "puces"],
-    action: (e) => { try { e.chain().focus().toggleBulletList().run() } catch { /* */ } },
+    action: (e) => runChain(e, (chain) => chain().focus().toggleBulletList().run()),
   },
   {
     key: "numberedList",
@@ -101,7 +134,7 @@ export const DEFAULT_SLASH_COMMANDS: SlashCommand[] = [
     icon: ListOrdered,
     group: "Blocs de base",
     keywords: ["numbered", "list", "ordered", "numerotee"],
-    action: (e) => { try { e.chain().focus().toggleOrderedList().run() } catch { /* */ } },
+    action: (e) => runChain(e, (chain) => chain().focus().toggleOrderedList().run()),
   },
   {
     key: "blockquote",
@@ -110,7 +143,7 @@ export const DEFAULT_SLASH_COMMANDS: SlashCommand[] = [
     icon: Quote,
     group: "Blocs de base",
     keywords: ["quote", "citation", "blockquote"],
-    action: (e) => { try { e.tf.blockquote.toggle() } catch { /* */ } },
+    action: (e) => runTransform(e, (tf) => tf.blockquote.toggle()),
   },
   // Advanced blocks
   {
@@ -120,7 +153,7 @@ export const DEFAULT_SLASH_COMMANDS: SlashCommand[] = [
     icon: Table,
     group: "Blocs avances",
     keywords: ["table", "tableau", "grid"],
-    action: (e) => { try { e.tf.table.insert({ rows: 3, cols: 3 }) } catch { /* */ } },
+    action: (e) => runTransform(e, (tf) => tf.table.insert({ rows: 3, cols: 3 })),
   },
   {
     key: "columns",
@@ -129,7 +162,7 @@ export const DEFAULT_SLASH_COMMANDS: SlashCommand[] = [
     icon: Columns2,
     group: "Blocs avances",
     keywords: ["column", "colonne", "layout", "mise en page"],
-    action: (e) => { try { e.tf.column.insert() } catch { /* */ } },
+    action: (e) => runTransform(e, (tf) => tf.column.insert()),
   },
   {
     key: "callout",
@@ -138,7 +171,7 @@ export const DEFAULT_SLASH_COMMANDS: SlashCommand[] = [
     icon: MessageSquarePlus,
     group: "Blocs avances",
     keywords: ["callout", "alert", "info", "encart"],
-    action: (e) => { try { e.tf.callout.insert() } catch { /* */ } },
+    action: (e) => runTransform(e, (tf) => tf.callout.insert()),
   },
   {
     key: "codeBlock",
@@ -147,7 +180,7 @@ export const DEFAULT_SLASH_COMMANDS: SlashCommand[] = [
     icon: Code,
     group: "Blocs avances",
     keywords: ["code", "pre", "source"],
-    action: (e) => { try { e.chain().focus().toggleCodeBlock().run() } catch { /* */ } },
+    action: (e) => runChain(e, (chain) => chain().focus().toggleCodeBlock().run()),
   },
   // Insertions
   {
@@ -157,7 +190,7 @@ export const DEFAULT_SLASH_COMMANDS: SlashCommand[] = [
     icon: Link,
     group: "Insertions",
     keywords: ["link", "lien", "url", "href"],
-    action: (e) => { try { e.tf.link.toggle() } catch { /* */ } },
+    action: (e) => runTransform(e, (tf) => tf.link.toggle()),
   },
   {
     key: "image",
@@ -166,7 +199,7 @@ export const DEFAULT_SLASH_COMMANDS: SlashCommand[] = [
     icon: Image,
     group: "Insertions",
     keywords: ["image", "photo", "picture", "img"],
-    action: (e) => { try { e.tf.image.insert({ url: "" }) } catch { /* */ } },
+    action: (e) => runTransform(e, (tf) => tf.image.insert({ url: "" })),
   },
   {
     key: "divider",
@@ -175,7 +208,7 @@ export const DEFAULT_SLASH_COMMANDS: SlashCommand[] = [
     icon: Minus,
     group: "Insertions",
     keywords: ["divider", "separator", "hr", "line"],
-    action: (e) => { try { e.chain().focus().insertBreak().run() } catch { /* */ } },
+    action: (e) => runChain(e, (chain) => chain().focus().insertBreak().run()),
   },
   // AI
   {

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>
+  ),
+}