@alneas/appkit-react 0.1.0 → 0.2.0

package/dist/ui/components/theme/theme-switcher.d.ts

@@ -1,49 +1,118 @@
 /**
- * テーマスイッチャーのプロップス
+ * Display settings shared by the theme switchers; see ThemeModeSwitcher for setup.
+ *
+ * @see ThemeModeSwitcher for the canonical usage example.
  */
 export interface ThemeSwitcherProps {
-    /** 追加CSS */
+    /** Additional classes on the rendered control. */
     className?: string;
-    /** 表示形式 */
+    /** Presentation style; defaults to 'select'. Both 'toggle' and 'cycle' cycle values. */
     variant?: 'select' | 'toggle' | 'icon-group' | 'cycle';
     /**
-     * アイコンに背景を表示するか
-     * 暗い背景に配置する場合、trueにすると視認性が向上します
+     * Add a background to icon controls; defaults to false.
+     * Select controls ignore this setting.
      */
     withBackground?: boolean;
 }
 /**
- * テーマモードスイッチャー
+ * Switches between light, dark and system modes from theme context.
+ *
+ * @param props - Control classes, presentation variant and optional icon background.
  *
- * ライト/ダーク/システムを切り替えるUI。
+ * @returns A select, cycling button or group of mode buttons.
+ *
+ * @remarks Use inside ThemeProvider and import @alneas/appkit-react/styles. Defaults to
+ * select with no background; toggle/cycle advances light, dark, system. Before mount,
+ * controls use stable system/light placeholders, then reflect the provider state.
+ * The provider's storage setter may throw when browser storage is unavailable.
  *
  * @example
  * ```tsx
- * import { ThemeModeSwitcher } from "../../index.js";
- *
- * <ThemeModeSwitcher variant="toggle" />
+ * import '@alneas/appkit-react/styles';
+ * import { ThemeProvider, ThemeModeSwitcher } from '@alneas/appkit-react/ui/theme';
+ * export function ThemeControl() {
+ *   return <ThemeProvider><ThemeModeSwitcher variant="toggle" /></ThemeProvider>;
+ * }
  * ```
  */
 export declare function ThemeModeSwitcher({ className, variant, withBackground, }: ThemeSwitcherProps): import('react').JSX.Element;
 /**
- * カラーテーマ（プライマリ色）を切り替えるUIコンポーネント
+ * Switches the provider palette among default, blue, green, rose, orange and future.
+ *
+ * @param props - Control classes, variant (default select) and icon background (default false).
+ *
+ * @returns A palette select, cycling button or group of color buttons.
+ *
+ * @remarks Requires ThemeProvider and @alneas/appkit-react/styles. Toggle/cycle advances
+ * through the available values. Custom palette names are not listed. An unknown current
+ * palette displays Default in toggle/cycle, highlights no icon-group swatch and remains
+ * an unmatched select value.
+ * Provider localStorage setter errors propagate from interactions.
+ *
+ * @example
+ * ```tsx
+ * import '@alneas/appkit-react/styles';
+ * import { ThemeProvider, ColorThemeSwitcher } from '@alneas/appkit-react/ui/theme';
+ * export function Control() { return <ThemeProvider><ColorThemeSwitcher /></ThemeProvider>; }
+ * ```
  */
 export declare function ColorThemeSwitcher({ className, variant, withBackground, }: ThemeSwitcherProps): import('react').JSX.Element;
 /**
- * 表示の密度（余白など）をコンパクト、ノーマル、コンフォタブルに切り替えるUIコンポーネント
+ * Switches provider density among compact, normal and comfortable.
+ *
+ * @param props - Control classes, variant (default select) and icon background (default false).
+ *
+ * @returns A density select, cycling button or group of density buttons.
+ *
+ * @remarks Requires ThemeProvider and @alneas/appkit-react/styles. Toggle/cycle advances
+ * through the available values. Before mount the displayed density is normal.
+ * Provider localStorage setter errors propagate from interactions.
+ *
+ * @example
+ * ```tsx
+ * import '@alneas/appkit-react/styles';
+ * import { ThemeProvider, SpacingThemeSwitcher } from '@alneas/appkit-react/ui/theme';
+ * export function Control() { return <ThemeProvider><SpacingThemeSwitcher /></ThemeProvider>; }
+ * ```
  */
 export declare function SpacingThemeSwitcher({ className, variant, withBackground, }: ThemeSwitcherProps): import('react').JSX.Element;
+/**
+ * Visibility and presentation for ThemeSwitcherGroup; see its usage example.
+ * @see ThemeSwitcherGroup for the canonical usage example.
+ */
 export interface ThemeSwitcherGroupProps {
+    /** Classes on the outer group. */
     className?: string;
+    /** Classes passed to select controls; defaults to the styled input classes. */
     selectClassName?: string;
+    /** Show the mode control; defaults to true. */
     showThemeMode?: boolean;
+    /** Show the palette control; defaults to true. */
     showColorTheme?: boolean;
+    /** Show the density control; defaults to true. */
     showSpacingTheme?: boolean;
+    /** Mode presentation; defaults to select. */
     modeVariant?: 'select' | 'toggle' | 'icon-group';
+    /** Palette presentation; defaults to select. */
     colorVariant?: 'select' | 'toggle' | 'icon-group';
+    /** Density presentation; defaults to select. */
     spacingVariant?: 'select' | 'toggle' | 'icon-group';
 }
 /**
- * モード、カラー、表示密度の複数のテーマ設定をまとめて変更できるグループコンポーネント
+ * Groups optional mode, palette and density controls with visible labels.
+ *
+ * @param props - Group/select classes, visibility flags and per-control variants.
+ *
+ * @returns A vertical group; all three controls are visible as selects by default.
+ *
+ * @remarks Requires ThemeProvider and @alneas/appkit-react/styles. Each control persists
+ * through the provider; browser storage errors can propagate from interactions.
+ *
+ * @example
+ * ```tsx
+ * import '@alneas/appkit-react/styles';
+ * import { ThemeProvider, ThemeSwitcherGroup } from '@alneas/appkit-react/ui/theme';
+ * export function ThemeSettings() { return <ThemeProvider><ThemeSwitcherGroup /></ThemeProvider>; }
+ * ```
  */
 export declare function ThemeSwitcherGroup({ className, selectClassName, showThemeMode, showColorTheme, showSpacingTheme, modeVariant, colorVariant, spacingVariant, }: ThemeSwitcherGroupProps): import('react').JSX.Element;

package/dist/ui/components/theme/theme-switcher.js

@@ -63,6 +63,7 @@ function m({ className: o, variant: l = "select", withBackground: u = !1 }) {
 	}
 	let y = h ? d : "system";
 	return /* @__PURE__ */ a("select", {
+		"aria-label": "Mode",
 		className: e("h-9 rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", o),
 		value: y,
 		onChange: (e) => f(e.target.value),
@@ -108,6 +109,11 @@ function h({ className: s, variant: c = "select", withBackground: u = !1 }) {
 			value: "orange",
 			label: "Orange",
 			color: "bg-orange-500"
+		},
+		{
+			value: "future",
+			label: "Future",
+			color: "bg-cyan-500"
 		}
 	], h = p ? d : "default", g = () => {
 		let e = (m.findIndex((e) => e.value === d) + 1) % m.length;
@@ -148,6 +154,7 @@ function h({ className: s, variant: c = "select", withBackground: u = !1 }) {
 			})
 		}, t.value))
 	}) : /* @__PURE__ */ i("select", {
+		"aria-label": "Color",
 		className: s,
 		value: h,
 		onChange: (e) => f(e.target.value),
@@ -207,6 +214,7 @@ function g({ className: o, variant: s = "select", withBackground: c = !1 }) {
 			})]
 		}, e.value))
 	}) : /* @__PURE__ */ a("select", {
+		"aria-label": "Density",
 		className: o,
 		value: m,
 		onChange: (e) => p(e.target.value),

package/dist/ui/components/theme/theme-switcher.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme-switcher.js","names":["ThemeModeSwitcher","useTheme","isClient","useIsClient","modes","Sun","Moon","Monitor","handleCycle","nextIndex","m","theme","iconColorClass","withBackground","variant","isDark","resolvedTheme","Button","cn","className","activeTheme","setTheme","selectValue","ColorThemeSwitcher","colors","activeColorTheme","colorTheme","c","currentColor","Palette","setColorTheme","Check","SpacingThemeSwitcher","activeSpacingTheme","spacingTheme","spacings","Rows4","Rows3","Rows2","s","currentSpacing","IconComponent","setSpacingTheme","ThemeSwitcherGroup","showThemeMode","modeVariant","selectClassName","showColorTheme","colorVariant","showSpacingTheme","spacingVariant"],"sources":["../../../../src/ui/components/theme/theme-switcher.tsx"],"sourcesContent":["import { Moon, Sun, Monitor, Check, Rows2, Rows3, Rows4, Palette } from 'lucide-react';\nimport { useTheme } from './theme-context';\nimport { Button } from '../ui/button';\nimport { cn } from \"../../lib/utils\";\nimport { useIsClient } from \"../../lib/hooks/use-is-client\";\n\n/**\n * テーマスイッチャーのプロップス\n */\nexport interface ThemeSwitcherProps {\n  /** 追加CSS */\n  className?: string;\n  /** 表示形式 */\n  variant?: 'select' | 'toggle' | 'icon-group' | 'cycle';\n  /**\n   * アイコンに背景を表示するか\n   * 暗い背景に配置する場合、trueにすると視認性が向上します\n   */\n  withBackground?: boolean;\n}\n\n/**\n * テーマモードスイッチャー\n *\n * ライト/ダーク/システムを切り替えるUI。\n *\n * @example\n * ```tsx\n * import { ThemeModeSwitcher } from \"../..\";\n *\n * <ThemeModeSwitcher variant=\"toggle\" />\n * ```\n */\nexport function ThemeModeSwitcher({\n  className,\n  variant = 'select',\n  withBackground = false,\n}: ThemeSwitcherProps) {\n  const { theme, setTheme, resolvedTheme } = useTheme();\n  const isClient = useIsClient();\n\n  const modes: Array<{\n    value: 'light' | 'dark' | 'system';\n    label: string;\n    icon: typeof Sun;\n  }> = [\n    { value: 'light', label: 'Light', icon: Sun },\n    { value: 'dark', label: 'Dark', icon: Moon },\n    { value: 'system', label: 'System', icon: Monitor },\n  ];\n\n  const handleCycle = () => {\n    const currentIndex = modes.findIndex((m) => m.value === theme);\n    const nextIndex = (currentIndex + 1) % modes.length;\n    setTheme(modes[nextIndex].value);\n  };\n\n  // Icon color: use explicit foreground when withBackground, otherwise inherit from parent\n  const iconColorClass = withBackground ? 'text-foreground' : '';\n\n  if (variant === 'toggle' || variant === 'cycle') {\n    // SSR-safe: Use a consistent default for initial render\n    // After mount, use actual resolvedTheme\n    const isDark = isClient ? resolvedTheme === 'dark' : false;\n\n    return (\n      <Button\n        variant='ghost'\n        size='icon'\n        className={cn(className, withBackground && 'bg-background/80 hover:bg-background')}\n        onClick={handleCycle}\n        title={isClient ? `Current theme: ${theme} (${resolvedTheme})` : 'Toggle theme'}\n      >\n        <div className='relative h-5 w-5 flex items-center justify-center'>\n          <Sun\n            className={cn(\n              'h-5 w-5 transition-all',\n              iconColorClass,\n              isDark ? 'rotate-90 scale-0 opacity-0' : 'rotate-0 scale-100 opacity-100',\n            )}\n          />\n          <Moon\n            className={cn(\n              'absolute h-5 w-5 transition-all',\n              iconColorClass,\n              isDark ? 'rotate-0 scale-100 opacity-100' : '-rotate-90 scale-0 opacity-0',\n            )}\n          />\n        </div>\n        <span className='sr-only'>Toggle theme</span>\n      </Button>\n    );\n  }\n\n  if (variant === 'icon-group') {\n    // SSR-safe: Use defaultTheme for initial render, actual theme after mount\n    const activeTheme = isClient ? theme : 'system';\n    return (\n      <div\n        className={cn(\n          'flex items-center gap-1 border rounded-md p-1',\n          withBackground ? 'bg-background' : 'bg-transparent border-0',\n          className,\n        )}\n      >\n        {modes.map((m) => (\n          <Button\n            key={m.value}\n            variant={activeTheme === m.value ? 'secondary' : 'ghost'}\n            size='icon'\n            className='h-7 w-7'\n            onClick={() => setTheme(m.value)}\n            title={m.label}\n          >\n            <m.icon className='h-4 w-4' />\n            <span className='sr-only'>{m.label}</span>\n          </Button>\n        ))}\n      </div>\n    );\n  }\n\n  // SSR-safe: Use defaultTheme for initial render\n  const selectValue = isClient ? theme : 'system';\n  return (\n    <select\n      className={cn(\n        'h-9 rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',\n        className,\n      )}\n      value={selectValue}\n      onChange={(e) => setTheme(e.target.value as 'light' | 'dark' | 'system')}\n    >\n      <option value='light'>Light</option>\n      <option value='dark'>Dark</option>\n      <option value='system'>System</option>\n    </select>\n  );\n}\n\n/**\n * カラーテーマ（プライマリ色）を切り替えるUIコンポーネント\n */\nexport function ColorThemeSwitcher({\n  className,\n  variant = 'select',\n  withBackground = false,\n}: ThemeSwitcherProps) {\n  const { colorTheme, setColorTheme } = useTheme();\n  const isClient = useIsClient();\n\n  const colors = [\n    { value: 'default', label: 'Default', color: 'bg-zinc-600' },\n    { value: 'blue', label: 'Blue', color: 'bg-blue-500' },\n    { value: 'green', label: 'Green', color: 'bg-green-500' },\n    { value: 'rose', label: 'Rose', color: 'bg-rose-500' },\n    { value: 'orange', label: 'Orange', color: 'bg-orange-500' },\n  ];\n\n  // SSR-safe: Use default for initial render\n  const activeColorTheme = isClient ? colorTheme : 'default';\n\n  const handleCycle = () => {\n    const currentIndex = colors.findIndex((c) => c.value === colorTheme);\n    const nextIndex = (currentIndex + 1) % colors.length;\n    setColorTheme(colors[nextIndex].value);\n  };\n\n  const currentColor = colors.find((c) => c.value === activeColorTheme) || colors[0];\n\n  if (variant === 'toggle' || variant === 'cycle') {\n    // withBackground: colored background, white inset ring, white icon\n    // no background: just colored palette icon\n    if (withBackground) {\n      return (\n        <Button\n          variant='ghost'\n          size='icon'\n          className={cn(\n            'ring-2 ring-inset ring-white/80 hover:ring-white',\n            currentColor.color,\n            'hover:opacity-90',\n            className,\n          )}\n          onClick={handleCycle}\n          title={`Color: ${currentColor.label} (Click to cycle)`}\n          aria-label={`Current color: ${currentColor.label}. Click to cycle.`}\n        >\n          <Palette className='h-5 w-5 text-white' />\n          <span className='sr-only'>{currentColor.label}</span>\n        </Button>\n      );\n    }\n\n    // No background: just colored icon\n    return (\n      <Button\n        variant='ghost'\n        size='icon'\n        className={className}\n        onClick={handleCycle}\n        title={`Color: ${currentColor.label} (Click to cycle)`}\n        aria-label={`Current color: ${currentColor.label}. Click to cycle.`}\n      >\n        <Palette className={cn('h-5 w-5', currentColor.color.replace('bg-', 'text-'))} />\n        <span className='sr-only'>{currentColor.label}</span>\n      </Button>\n    );\n  }\n\n  if (variant === 'icon-group') {\n    return (\n      <div\n        className={cn(\n          'flex items-center gap-2 flex-wrap',\n          withBackground ? 'bg-background p-1 rounded-md border' : '',\n          className,\n        )}\n      >\n        {colors.map((c) => (\n          <button\n            key={c.value}\n            className={cn(\n              'h-6 w-6 rounded-full border border-input ring-offset-background hover:opacity-80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',\n              c.color,\n              activeColorTheme === c.value && 'ring-2 ring-ring ring-offset-2',\n            )}\n            onClick={() => setColorTheme(c.value)}\n            title={c.label}\n            aria-label={c.label}\n          >\n            {activeColorTheme === c.value && (\n              <Check className='h-3 w-3 text-white mx-auto' strokeWidth={3} />\n            )}\n          </button>\n        ))}\n      </div>\n    );\n  }\n\n  return (\n    <select\n      className={className}\n      value={activeColorTheme}\n      onChange={(e) => setColorTheme(e.target.value)}\n    >\n      {colors.map((c) => (\n        <option key={c.value} value={c.value}>\n          {c.label}\n        </option>\n      ))}\n    </select>\n  );\n}\n\n/**\n * 表示の密度（余白など）をコンパクト、ノーマル、コンフォタブルに切り替えるUIコンポーネント\n */\nexport function SpacingThemeSwitcher({\n  className,\n  variant = 'select',\n  withBackground = false,\n}: ThemeSwitcherProps) {\n  const { spacingTheme, setSpacingTheme } = useTheme();\n  const isClient = useIsClient();\n\n  // SSR-safe: Use default for initial render\n  const activeSpacingTheme = isClient ? spacingTheme : 'normal';\n\n  const spacings: Array<{\n    value: 'compact' | 'normal' | 'comfortable';\n    label: string;\n    icon: typeof Rows2;\n  }> = [\n    { value: 'compact', label: 'Compact', icon: Rows4 }, // More rows = tighter spacing\n    { value: 'normal', label: 'Normal', icon: Rows3 }, // Medium\n    { value: 'comfortable', label: 'Comfortable', icon: Rows2 }, // Fewer rows = more spacing\n  ];\n\n  const handleCycle = () => {\n    const currentIndex = spacings.findIndex((s) => s.value === spacingTheme);\n    const nextIndex = (currentIndex + 1) % spacings.length;\n    setSpacingTheme(spacings[nextIndex].value);\n  };\n\n  // Icon color: use explicit foreground when withBackground, otherwise inherit from parent\n  const iconColorClass = withBackground ? 'text-foreground' : '';\n\n  if (variant === 'toggle' || variant === 'cycle') {\n    const currentSpacing = spacings.find((s) => s.value === activeSpacingTheme) || spacings[1];\n    const IconComponent = currentSpacing.icon;\n\n    return (\n      <Button\n        variant='ghost'\n        size='icon'\n        className={cn(className, withBackground && 'bg-background/80 hover:bg-background')}\n        onClick={handleCycle}\n        title={`Spacing: ${currentSpacing.label} (Click to cycle)`}\n        aria-label={`Current spacing: ${currentSpacing.label}. Click to cycle.`}\n      >\n        <IconComponent className={cn('h-5 w-5', iconColorClass)} />\n        <span className='sr-only'>{currentSpacing.label}</span>\n      </Button>\n    );\n  }\n\n  if (variant === 'icon-group') {\n    return (\n      <div\n        className={cn(\n          'flex items-center gap-1 border rounded-md p-1',\n          withBackground ? 'bg-background' : 'bg-transparent border-0',\n          className,\n        )}\n      >\n        {spacings.map((s) => (\n          <Button\n            key={s.value}\n            variant={activeSpacingTheme === s.value ? 'secondary' : 'ghost'}\n            size='icon'\n            className='h-7 w-7'\n            onClick={() => setSpacingTheme(s.value)}\n            title={s.label}\n          >\n            <s.icon className='h-4 w-4' />\n            <span className='sr-only'>{s.label}</span>\n          </Button>\n        ))}\n      </div>\n    );\n  }\n\n  return (\n    <select\n      className={className}\n      value={activeSpacingTheme}\n      onChange={(e) => setSpacingTheme(e.target.value as 'compact' | 'normal' | 'comfortable')}\n    >\n      <option value='compact'>Compact</option>\n      <option value='normal'>Normal</option>\n      <option value='comfortable'>Comfortable</option>\n    </select>\n  );\n}\n\nexport interface ThemeSwitcherGroupProps {\n  className?: string;\n  selectClassName?: string;\n  showThemeMode?: boolean;\n  showColorTheme?: boolean;\n  showSpacingTheme?: boolean;\n  modeVariant?: 'select' | 'toggle' | 'icon-group';\n  colorVariant?: 'select' | 'toggle' | 'icon-group';\n  spacingVariant?: 'select' | 'toggle' | 'icon-group';\n}\n\n/**\n * モード、カラー、表示密度の複数のテーマ設定をまとめて変更できるグループコンポーネント\n */\nexport function ThemeSwitcherGroup({\n  className,\n  selectClassName = 'h-9 rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',\n  showThemeMode = true,\n  showColorTheme = true,\n  showSpacingTheme = true,\n  modeVariant = 'select',\n  colorVariant = 'select',\n  spacingVariant = 'select',\n}: ThemeSwitcherGroupProps) {\n  return (\n    <div className={cn(className, 'flex flex-col gap-3')}>\n      {showThemeMode && (\n        <div className='flex items-center justify-between gap-2'>\n          <span className='text-xs text-muted-foreground'>Mode</span>\n          <ThemeModeSwitcher\n            className={modeVariant === 'select' ? selectClassName : undefined}\n            variant={modeVariant}\n          />\n        </div>\n      )}\n      {showColorTheme && (\n        <div className='flex items-center justify-between gap-2'>\n          <span className='text-xs text-muted-foreground'>Color</span>\n          <ColorThemeSwitcher\n            className={colorVariant === 'select' ? selectClassName : undefined}\n            variant={colorVariant}\n          />\n        </div>\n      )}\n      {showSpacingTheme && (\n        <div className='flex items-center justify-between gap-2'>\n          <span className='text-xs text-muted-foreground'>Density</span>\n          <SpacingThemeSwitcher\n            className={spacingVariant === 'select' ? selectClassName : undefined}\n            variant={spacingVariant}\n          />\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"theme-switcher.js","names":["ThemeModeSwitcher","useTheme","isClient","useIsClient","modes","Sun","Moon","Monitor","handleCycle","nextIndex","m","theme","iconColorClass","withBackground","variant","isDark","resolvedTheme","Button","cn","className","activeTheme","setTheme","selectValue","ColorThemeSwitcher","colors","activeColorTheme","colorTheme","c","currentColor","Palette","setColorTheme","Check","SpacingThemeSwitcher","activeSpacingTheme","spacingTheme","spacings","Rows4","Rows3","Rows2","s","currentSpacing","IconComponent","setSpacingTheme","ThemeSwitcherGroup","showThemeMode","modeVariant","selectClassName","showColorTheme","colorVariant","showSpacingTheme","spacingVariant"],"sources":["../../../../src/ui/components/theme/theme-switcher.tsx"],"sourcesContent":["import { Moon, Sun, Monitor, Check, Rows2, Rows3, Rows4, Palette } from 'lucide-react';\nimport { useTheme } from './theme-context';\nimport { Button } from '../ui/button';\nimport { cn } from \"../../lib/utils\";\nimport { useIsClient } from \"../../lib/hooks/use-is-client\";\n\n/**\n * Display settings shared by the theme switchers; see ThemeModeSwitcher for setup.\n *\n * @see ThemeModeSwitcher for the canonical usage example.\n */\nexport interface ThemeSwitcherProps {\n  /** Additional classes on the rendered control. */\n  className?: string;\n  /** Presentation style; defaults to 'select'. Both 'toggle' and 'cycle' cycle values. */\n  variant?: 'select' | 'toggle' | 'icon-group' | 'cycle';\n  /**\n   * Add a background to icon controls; defaults to false.\n   * Select controls ignore this setting.\n   */\n  withBackground?: boolean;\n}\n\n/**\n * Switches between light, dark and system modes from theme context.\n *\n * @param props - Control classes, presentation variant and optional icon background.\n *\n * @returns A select, cycling button or group of mode buttons.\n *\n * @remarks Use inside ThemeProvider and import @alneas/appkit-react/styles. Defaults to\n * select with no background; toggle/cycle advances light, dark, system. Before mount,\n * controls use stable system/light placeholders, then reflect the provider state.\n * The provider's storage setter may throw when browser storage is unavailable.\n *\n * @example\n * ```tsx\n * import '@alneas/appkit-react/styles';\n * import { ThemeProvider, ThemeModeSwitcher } from '@alneas/appkit-react/ui/theme';\n * export function ThemeControl() {\n *   return <ThemeProvider><ThemeModeSwitcher variant=\"toggle\" /></ThemeProvider>;\n * }\n * ```\n */\nexport function ThemeModeSwitcher({\n  className,\n  variant = 'select',\n  withBackground = false,\n}: ThemeSwitcherProps) {\n  const { theme, setTheme, resolvedTheme } = useTheme();\n  const isClient = useIsClient();\n\n  const modes: Array<{\n    value: 'light' | 'dark' | 'system';\n    label: string;\n    icon: typeof Sun;\n  }> = [\n    { value: 'light', label: 'Light', icon: Sun },\n    { value: 'dark', label: 'Dark', icon: Moon },\n    { value: 'system', label: 'System', icon: Monitor },\n  ];\n\n  const handleCycle = () => {\n    const currentIndex = modes.findIndex((m) => m.value === theme);\n    const nextIndex = (currentIndex + 1) % modes.length;\n    setTheme(modes[nextIndex].value);\n  };\n\n  // Icon color: use explicit foreground when withBackground, otherwise inherit from parent\n  const iconColorClass = withBackground ? 'text-foreground' : '';\n\n  if (variant === 'toggle' || variant === 'cycle') {\n    // SSR-safe: Use a consistent default for initial render\n    // After mount, use actual resolvedTheme\n    const isDark = isClient ? resolvedTheme === 'dark' : false;\n\n    return (\n      <Button\n        variant='ghost'\n        size='icon'\n        className={cn(className, withBackground && 'bg-background/80 hover:bg-background')}\n        onClick={handleCycle}\n        title={isClient ? `Current theme: ${theme} (${resolvedTheme})` : 'Toggle theme'}\n      >\n        <div className='relative h-5 w-5 flex items-center justify-center'>\n          <Sun\n            className={cn(\n              'h-5 w-5 transition-all',\n              iconColorClass,\n              isDark ? 'rotate-90 scale-0 opacity-0' : 'rotate-0 scale-100 opacity-100',\n            )}\n          />\n          <Moon\n            className={cn(\n              'absolute h-5 w-5 transition-all',\n              iconColorClass,\n              isDark ? 'rotate-0 scale-100 opacity-100' : '-rotate-90 scale-0 opacity-0',\n            )}\n          />\n        </div>\n        <span className='sr-only'>Toggle theme</span>\n      </Button>\n    );\n  }\n\n  if (variant === 'icon-group') {\n    // SSR-safe: Use defaultTheme for initial render, actual theme after mount\n    const activeTheme = isClient ? theme : 'system';\n    return (\n      <div\n        className={cn(\n          'flex items-center gap-1 border rounded-md p-1',\n          withBackground ? 'bg-background' : 'bg-transparent border-0',\n          className,\n        )}\n      >\n        {modes.map((m) => (\n          <Button\n            key={m.value}\n            variant={activeTheme === m.value ? 'secondary' : 'ghost'}\n            size='icon'\n            className='h-7 w-7'\n            onClick={() => setTheme(m.value)}\n            title={m.label}\n          >\n            <m.icon className='h-4 w-4' />\n            <span className='sr-only'>{m.label}</span>\n          </Button>\n        ))}\n      </div>\n    );\n  }\n\n  // SSR-safe: Use defaultTheme for initial render\n  const selectValue = isClient ? theme : 'system';\n  return (\n    <select\n      aria-label='Mode'\n      className={cn(\n        'h-9 rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',\n        className,\n      )}\n      value={selectValue}\n      onChange={(e) => setTheme(e.target.value as 'light' | 'dark' | 'system')}\n    >\n      <option value='light'>Light</option>\n      <option value='dark'>Dark</option>\n      <option value='system'>System</option>\n    </select>\n  );\n}\n\n/**\n * Switches the provider palette among default, blue, green, rose, orange and future.\n *\n * @param props - Control classes, variant (default select) and icon background (default false).\n *\n * @returns A palette select, cycling button or group of color buttons.\n *\n * @remarks Requires ThemeProvider and @alneas/appkit-react/styles. Toggle/cycle advances\n * through the available values. Custom palette names are not listed. An unknown current\n * palette displays Default in toggle/cycle, highlights no icon-group swatch and remains\n * an unmatched select value.\n * Provider localStorage setter errors propagate from interactions.\n *\n * @example\n * ```tsx\n * import '@alneas/appkit-react/styles';\n * import { ThemeProvider, ColorThemeSwitcher } from '@alneas/appkit-react/ui/theme';\n * export function Control() { return <ThemeProvider><ColorThemeSwitcher /></ThemeProvider>; }\n * ```\n */\nexport function ColorThemeSwitcher({\n  className,\n  variant = 'select',\n  withBackground = false,\n}: ThemeSwitcherProps) {\n  const { colorTheme, setColorTheme } = useTheme();\n  const isClient = useIsClient();\n\n  const colors = [\n    { value: 'default', label: 'Default', color: 'bg-zinc-600' },\n    { value: 'blue', label: 'Blue', color: 'bg-blue-500' },\n    { value: 'green', label: 'Green', color: 'bg-green-500' },\n    { value: 'rose', label: 'Rose', color: 'bg-rose-500' },\n    { value: 'orange', label: 'Orange', color: 'bg-orange-500' },\n    { value: 'future', label: 'Future', color: 'bg-cyan-500' },\n  ];\n\n  // SSR-safe: Use default for initial render\n  const activeColorTheme = isClient ? colorTheme : 'default';\n\n  const handleCycle = () => {\n    const currentIndex = colors.findIndex((c) => c.value === colorTheme);\n    const nextIndex = (currentIndex + 1) % colors.length;\n    setColorTheme(colors[nextIndex].value);\n  };\n\n  const currentColor = colors.find((c) => c.value === activeColorTheme) || colors[0];\n\n  if (variant === 'toggle' || variant === 'cycle') {\n    // withBackground: colored background, white inset ring, white icon\n    // no background: just colored palette icon\n    if (withBackground) {\n      return (\n        <Button\n          variant='ghost'\n          size='icon'\n          className={cn(\n            'ring-2 ring-inset ring-white/80 hover:ring-white',\n            currentColor.color,\n            'hover:opacity-90',\n            className,\n          )}\n          onClick={handleCycle}\n          title={`Color: ${currentColor.label} (Click to cycle)`}\n          aria-label={`Current color: ${currentColor.label}. Click to cycle.`}\n        >\n          <Palette className='h-5 w-5 text-white' />\n          <span className='sr-only'>{currentColor.label}</span>\n        </Button>\n      );\n    }\n\n    // No background: just colored icon\n    return (\n      <Button\n        variant='ghost'\n        size='icon'\n        className={className}\n        onClick={handleCycle}\n        title={`Color: ${currentColor.label} (Click to cycle)`}\n        aria-label={`Current color: ${currentColor.label}. Click to cycle.`}\n      >\n        <Palette className={cn('h-5 w-5', currentColor.color.replace('bg-', 'text-'))} />\n        <span className='sr-only'>{currentColor.label}</span>\n      </Button>\n    );\n  }\n\n  if (variant === 'icon-group') {\n    return (\n      <div\n        className={cn(\n          'flex items-center gap-2 flex-wrap',\n          withBackground ? 'bg-background p-1 rounded-md border' : '',\n          className,\n        )}\n      >\n        {colors.map((c) => (\n          <button\n            key={c.value}\n            className={cn(\n              'h-6 w-6 rounded-full border border-input ring-offset-background hover:opacity-80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',\n              c.color,\n              activeColorTheme === c.value && 'ring-2 ring-ring ring-offset-2',\n            )}\n            onClick={() => setColorTheme(c.value)}\n            title={c.label}\n            aria-label={c.label}\n          >\n            {activeColorTheme === c.value && (\n              <Check className='h-3 w-3 text-white mx-auto' strokeWidth={3} />\n            )}\n          </button>\n        ))}\n      </div>\n    );\n  }\n\n  return (\n    <select\n      aria-label='Color'\n      className={className}\n      value={activeColorTheme}\n      onChange={(e) => setColorTheme(e.target.value)}\n    >\n      {colors.map((c) => (\n        <option key={c.value} value={c.value}>\n          {c.label}\n        </option>\n      ))}\n    </select>\n  );\n}\n\n/**\n * Switches provider density among compact, normal and comfortable.\n *\n * @param props - Control classes, variant (default select) and icon background (default false).\n *\n * @returns A density select, cycling button or group of density buttons.\n *\n * @remarks Requires ThemeProvider and @alneas/appkit-react/styles. Toggle/cycle advances\n * through the available values. Before mount the displayed density is normal.\n * Provider localStorage setter errors propagate from interactions.\n *\n * @example\n * ```tsx\n * import '@alneas/appkit-react/styles';\n * import { ThemeProvider, SpacingThemeSwitcher } from '@alneas/appkit-react/ui/theme';\n * export function Control() { return <ThemeProvider><SpacingThemeSwitcher /></ThemeProvider>; }\n * ```\n */\nexport function SpacingThemeSwitcher({\n  className,\n  variant = 'select',\n  withBackground = false,\n}: ThemeSwitcherProps) {\n  const { spacingTheme, setSpacingTheme } = useTheme();\n  const isClient = useIsClient();\n\n  // SSR-safe: Use default for initial render\n  const activeSpacingTheme = isClient ? spacingTheme : 'normal';\n\n  const spacings: Array<{\n    value: 'compact' | 'normal' | 'comfortable';\n    label: string;\n    icon: typeof Rows2;\n  }> = [\n    { value: 'compact', label: 'Compact', icon: Rows4 }, // More rows = tighter spacing\n    { value: 'normal', label: 'Normal', icon: Rows3 }, // Medium\n    { value: 'comfortable', label: 'Comfortable', icon: Rows2 }, // Fewer rows = more spacing\n  ];\n\n  const handleCycle = () => {\n    const currentIndex = spacings.findIndex((s) => s.value === spacingTheme);\n    const nextIndex = (currentIndex + 1) % spacings.length;\n    setSpacingTheme(spacings[nextIndex].value);\n  };\n\n  // Icon color: use explicit foreground when withBackground, otherwise inherit from parent\n  const iconColorClass = withBackground ? 'text-foreground' : '';\n\n  if (variant === 'toggle' || variant === 'cycle') {\n    const currentSpacing = spacings.find((s) => s.value === activeSpacingTheme) || spacings[1];\n    const IconComponent = currentSpacing.icon;\n\n    return (\n      <Button\n        variant='ghost'\n        size='icon'\n        className={cn(className, withBackground && 'bg-background/80 hover:bg-background')}\n        onClick={handleCycle}\n        title={`Spacing: ${currentSpacing.label} (Click to cycle)`}\n        aria-label={`Current spacing: ${currentSpacing.label}. Click to cycle.`}\n      >\n        <IconComponent className={cn('h-5 w-5', iconColorClass)} />\n        <span className='sr-only'>{currentSpacing.label}</span>\n      </Button>\n    );\n  }\n\n  if (variant === 'icon-group') {\n    return (\n      <div\n        className={cn(\n          'flex items-center gap-1 border rounded-md p-1',\n          withBackground ? 'bg-background' : 'bg-transparent border-0',\n          className,\n        )}\n      >\n        {spacings.map((s) => (\n          <Button\n            key={s.value}\n            variant={activeSpacingTheme === s.value ? 'secondary' : 'ghost'}\n            size='icon'\n            className='h-7 w-7'\n            onClick={() => setSpacingTheme(s.value)}\n            title={s.label}\n          >\n            <s.icon className='h-4 w-4' />\n            <span className='sr-only'>{s.label}</span>\n          </Button>\n        ))}\n      </div>\n    );\n  }\n\n  return (\n    <select\n      aria-label='Density'\n      className={className}\n      value={activeSpacingTheme}\n      onChange={(e) => setSpacingTheme(e.target.value as 'compact' | 'normal' | 'comfortable')}\n    >\n      <option value='compact'>Compact</option>\n      <option value='normal'>Normal</option>\n      <option value='comfortable'>Comfortable</option>\n    </select>\n  );\n}\n\n/**\n * Visibility and presentation for ThemeSwitcherGroup; see its usage example.\n * @see ThemeSwitcherGroup for the canonical usage example.\n */\nexport interface ThemeSwitcherGroupProps {\n  /** Classes on the outer group. */\n  className?: string;\n  /** Classes passed to select controls; defaults to the styled input classes. */\n  selectClassName?: string;\n  /** Show the mode control; defaults to true. */\n  showThemeMode?: boolean;\n  /** Show the palette control; defaults to true. */\n  showColorTheme?: boolean;\n  /** Show the density control; defaults to true. */\n  showSpacingTheme?: boolean;\n  /** Mode presentation; defaults to select. */\n  modeVariant?: 'select' | 'toggle' | 'icon-group';\n  /** Palette presentation; defaults to select. */\n  colorVariant?: 'select' | 'toggle' | 'icon-group';\n  /** Density presentation; defaults to select. */\n  spacingVariant?: 'select' | 'toggle' | 'icon-group';\n}\n\n/**\n * Groups optional mode, palette and density controls with visible labels.\n *\n * @param props - Group/select classes, visibility flags and per-control variants.\n *\n * @returns A vertical group; all three controls are visible as selects by default.\n *\n * @remarks Requires ThemeProvider and @alneas/appkit-react/styles. Each control persists\n * through the provider; browser storage errors can propagate from interactions.\n *\n * @example\n * ```tsx\n * import '@alneas/appkit-react/styles';\n * import { ThemeProvider, ThemeSwitcherGroup } from '@alneas/appkit-react/ui/theme';\n * export function ThemeSettings() { return <ThemeProvider><ThemeSwitcherGroup /></ThemeProvider>; }\n * ```\n */\nexport function ThemeSwitcherGroup({\n  className,\n  selectClassName = 'h-9 rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',\n  showThemeMode = true,\n  showColorTheme = true,\n  showSpacingTheme = true,\n  modeVariant = 'select',\n  colorVariant = 'select',\n  spacingVariant = 'select',\n}: ThemeSwitcherGroupProps) {\n  return (\n    <div className={cn(className, 'flex flex-col gap-3')}>\n      {showThemeMode && (\n        <div className='flex items-center justify-between gap-2'>\n          <span className='text-xs text-muted-foreground'>Mode</span>\n          <ThemeModeSwitcher\n            className={modeVariant === 'select' ? selectClassName : undefined}\n            variant={modeVariant}\n          />\n        </div>\n      )}\n      {showColorTheme && (\n        <div className='flex items-center justify-between gap-2'>\n          <span className='text-xs text-muted-foreground'>Color</span>\n          <ColorThemeSwitcher\n            className={colorVariant === 'select' ? selectClassName : undefined}\n            variant={colorVariant}\n          />\n        </div>\n      )}\n      {showSpacingTheme && (\n        <div className='flex items-center justify-between gap-2'>\n          <span className='text-xs text-muted-foreground'>Density</span>\n          <SpacingThemeSwitcher\n            className={spacingVariant === 'select' ? selectClassName : undefined}\n            variant={spacingVariant}\n          />\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/ui/components/ui/accordion.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.cjs","names":["React","AccordionPrimitive","cn","ChevronDownIcon","ChevronUpIcon","require_runtime","require_ui_lib_utils","react_jsx_runtime","react","_base_ui_react_accordion","lucide_react","Accordion","props","className","AccordionItem","AccordionTrigger","children","AccordionContent"],"sources":["../../../../src/ui/components/ui/accordion.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Accordion as AccordionPrimitive } from '@base-ui/react/accordion';\nimport { ChevronDownIcon, ChevronUpIcon } from 'lucide-react';\n\nimport { cn } from '../../lib/utils';\n\nconst Accordion = React.forwardRef<HTMLDivElement, AccordionPrimitive.Root.Props>(\n  ({ className, ...props }, ref) => (\n    <AccordionPrimitive.Root\n      ref={ref}\n      data-slot='accordion'\n      className={cn('flex w-full flex-col', className)}\n      {...props}\n    />\n  ),\n);\nAccordion.displayName = 'Accordion';\n\nconst AccordionItem = React.forwardRef<HTMLDivElement, AccordionPrimitive.Item.Props>(\n  ({ className, ...props }, ref) => (\n    <AccordionPrimitive.Item\n      ref={ref}\n      data-slot='accordion-item'\n      className={cn('not-last:border-b', className)}\n      {...props}\n    />\n  ),\n);\nAccordionItem.displayName = 'AccordionItem';\n\nconst AccordionTrigger = React.forwardRef<HTMLButtonElement, AccordionPrimitive.Trigger.Props>(\n  ({ className, children, ...props }, ref) => (\n    <AccordionPrimitive.Header className='flex'>\n      <AccordionPrimitive.Trigger\n        ref={ref}\n        data-slot='accordion-trigger'\n        className={cn(\n          'focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-lg py-2.5 text-left text-sm font-medium hover:underline focus-visible:ring-[3px] **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        <ChevronDownIcon\n          data-slot='accordion-trigger-icon'\n          className='pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden'\n        />\n        <ChevronUpIcon\n          data-slot='accordion-trigger-icon'\n          className='pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline'\n        />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  ),\n);\nAccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;\n\nconst AccordionContent = React.forwardRef<HTMLDivElement, AccordionPrimitive.Panel.Props>(\n  ({ className, children, ...props }, ref) => (\n    <AccordionPrimitive.Panel\n      ref={ref}\n      data-slot='accordion-content'\n      className='data-open:animate-accordion-down data-closed:animate-accordion-up text-sm overflow-hidden'\n      {...props}\n    >\n      <div\n        className={cn(\n          'pt-0 pb-2.5 [&_a]:hover:text-foreground h-(--accordion-panel-height) data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4',\n          className,\n        )}\n      >\n        {children}\n      </div>\n    </AccordionPrimitive.Panel>\n  ),\n);\nAccordionContent.displayName = AccordionPrimitive.Panel.displayName;\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent };\n"],"mappings":"A,oUAQA,IAAMW,EAAYX,EAAM,YACrB,CAAE,YAAW,GAAGY,GAAS,KACxB,EAAAL,EAAA,IAAA,CAACN,EAAAA,UAAmB,KAApB,CACO,MACL,YAAU,YACV,UAAWC,EAAAA,GAAG,uBAAwBW,CAAS,EAC/C,GAAID,CACL,CAAA,CAEL,EACA,EAAU,YAAc,YAExB,IAAME,EAAgBd,EAAM,YACzB,CAAE,YAAW,GAAGY,GAAS,KACxB,EAAAL,EAAA,IAAA,CAACN,EAAAA,UAAmB,KAApB,CACO,MACL,YAAU,iBACV,UAAWC,EAAAA,GAAG,oBAAqBW,CAAS,EAC5C,GAAID,CACL,CAAA,CAEL,EACA,EAAc,YAAc,gBAE5B,IAAMG,EAAmBf,EAAM,YAC5B,CAAE,YAAW,WAAU,GAAGY,GAAS,KAClC,EAAAL,EAAA,IAAA,CAACN,EAAAA,UAAmB,OAApB,CAA2B,UAAU,OACnC,UAAA,EAAAM,EAAA,KAAA,CAACN,EAAAA,UAAmB,QAApB,CACO,MACL,YAAU,oBACV,UAAWC,EAAAA,GACT,ufACAW,CACF,EACA,GAAID,EAPN,SAAA,CASGI,GACD,EAAAT,EAAA,IAAA,CAACJ,EAAAA,gBAAD,CACE,YAAU,yBACV,UAAU,2EACX,CAAA,GACD,EAAAI,EAAA,IAAA,CAACH,EAAAA,cAAD,CACE,YAAU,yBACV,UAAU,kFACX,CAAA,CACyB,C,EACH,CAAA,CAE/B,EACA,EAAiB,YAAcH,EAAAA,UAAmB,QAAQ,YAE1D,IAAMgB,EAAmBjB,EAAM,YAC5B,CAAE,YAAW,WAAU,GAAGY,GAAS,KAClC,EAAAL,EAAA,IAAA,CAACN,EAAAA,UAAmB,MAApB,CACO,MACL,YAAU,oBACV,UAAU,4FACV,GAAIW,EAEJ,UAAA,EAAAL,EAAA,IAAA,CAAC,MAAD,CACE,UAAWL,EAAAA,GACT,0LACAW,CACF,EAEC,UACE,CAAA,CACmB,CAAA,CAE9B,EACA,EAAiB,YAAcZ,EAAAA,UAAmB,MAAM,Y"}
+{"version":3,"file":"accordion.cjs","names":["React","AccordionPrimitive","cn","ChevronDownIcon","ChevronUpIcon","require_runtime","require_ui_lib_utils","react_jsx_runtime","react","_base_ui_react_accordion","lucide_react","Accordion","props","className","AccordionItem","AccordionTrigger","children","AccordionContent"],"sources":["../../../../src/ui/components/ui/accordion.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Accordion as AccordionPrimitive } from '@base-ui/react/accordion';\nimport { ChevronDownIcon, ChevronUpIcon } from 'lucide-react';\n\nimport { cn } from '../../lib/utils';\n\n/**\n * Coordinates expansion state for a collection of disclosure items.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered Accordion composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Compose triggers and content inside an AccordionItem under Accordion. Base UI owns selection, focus and keyboard behavior; the wrapper adds no expansion defaults. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<Accordion defaultValue={[\"details\"]}><AccordionItem value=\"details\"><AccordionTrigger>Details</AccordionTrigger><AccordionContent>Project details</AccordionContent></AccordionItem></Accordion>);\n * }\n * ```\n */\nconst Accordion = React.forwardRef<HTMLDivElement, AccordionPrimitive.Root.Props>(\n  ({ className, ...props }, ref) => (\n    <AccordionPrimitive.Root\n      ref={ref}\n      data-slot='accordion'\n      className={cn('flex w-full flex-col', className)}\n      {...props}\n    />\n  ),\n);\nAccordion.displayName = 'Accordion';\n\n/**\n * Associates one disclosure value with its trigger and collapsible panel.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered AccordionItem composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Compose triggers and content inside an AccordionItem under Accordion. Base UI owns selection, focus and keyboard behavior; the wrapper adds no expansion defaults. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<Accordion defaultValue={[\"details\"]}><AccordionItem value=\"details\"><AccordionTrigger>Details</AccordionTrigger><AccordionContent>Project details</AccordionContent></AccordionItem></Accordion>);\n * }\n * ```\n */\nconst AccordionItem = React.forwardRef<HTMLDivElement, AccordionPrimitive.Item.Props>(\n  ({ className, ...props }, ref) => (\n    <AccordionPrimitive.Item\n      ref={ref}\n      data-slot='accordion-item'\n      className={cn('not-last:border-b', className)}\n      {...props}\n    />\n  ),\n);\nAccordionItem.displayName = 'AccordionItem';\n\n/**\n * Renders a disclosure button inside a heading with open/closed chevron indicators.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered AccordionTrigger composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Compose triggers and content inside an AccordionItem under Accordion. Base UI owns selection, focus and keyboard behavior; the wrapper adds no expansion defaults. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<Accordion defaultValue={[\"details\"]}><AccordionItem value=\"details\"><AccordionTrigger>Details</AccordionTrigger><AccordionContent>Project details</AccordionContent></AccordionItem></Accordion>);\n * }\n * ```\n */\nconst AccordionTrigger = React.forwardRef<HTMLButtonElement, AccordionPrimitive.Trigger.Props>(\n  ({ className, children, ...props }, ref) => (\n    <AccordionPrimitive.Header className='flex'>\n      <AccordionPrimitive.Trigger\n        ref={ref}\n        data-slot='accordion-trigger'\n        className={cn(\n          'focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-lg py-2.5 text-left text-sm font-medium hover:underline focus-visible:ring-[3px] **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        <ChevronDownIcon\n          data-slot='accordion-trigger-icon'\n          className='pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden'\n        />\n        <ChevronUpIcon\n          data-slot='accordion-trigger-icon'\n          className='pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline'\n        />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  ),\n);\nAccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;\n\n/**\n * Renders an animated disclosure panel with an inner content wrapper.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered AccordionContent composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Compose triggers and content inside an AccordionItem under Accordion. Base UI owns selection, focus and keyboard behavior; the wrapper adds no expansion defaults. The ref prop forwards to the rendered control or container declared by the component ref type. className styles the inner content div, while remaining panel props target the Base UI panel.\n * @example\n * ```tsx\n * import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<Accordion defaultValue={[\"details\"]}><AccordionItem value=\"details\"><AccordionTrigger>Details</AccordionTrigger><AccordionContent>Project details</AccordionContent></AccordionItem></Accordion>);\n * }\n * ```\n */\nconst AccordionContent = React.forwardRef<HTMLDivElement, AccordionPrimitive.Panel.Props>(\n  ({ className, children, ...props }, ref) => (\n    <AccordionPrimitive.Panel\n      ref={ref}\n      data-slot='accordion-content'\n      className='data-open:animate-accordion-down data-closed:animate-accordion-up text-sm overflow-hidden'\n      {...props}\n    >\n      <div\n        className={cn(\n          'pt-0 pb-2.5 [&_a]:hover:text-foreground h-(--accordion-panel-height) data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4',\n          className,\n        )}\n      >\n        {children}\n      </div>\n    </AccordionPrimitive.Panel>\n  ),\n);\nAccordionContent.displayName = AccordionPrimitive.Panel.displayName;\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent };\n"],"mappings":"A,oUAuBA,IAAMW,EAAYX,EAAM,YACrB,CAAE,YAAW,GAAGY,GAAS,KACxB,EAAAL,EAAA,IAAA,CAACN,EAAAA,UAAmB,KAApB,CACO,MACL,YAAU,YACV,UAAWC,EAAAA,GAAG,uBAAwBW,CAAS,EAC/C,GAAID,CACL,CAAA,CAEL,EACA,EAAU,YAAc,YAiBxB,IAAME,EAAgBd,EAAM,YACzB,CAAE,YAAW,GAAGY,GAAS,KACxB,EAAAL,EAAA,IAAA,CAACN,EAAAA,UAAmB,KAApB,CACO,MACL,YAAU,iBACV,UAAWC,EAAAA,GAAG,oBAAqBW,CAAS,EAC5C,GAAID,CACL,CAAA,CAEL,EACA,EAAc,YAAc,gBAiB5B,IAAMG,EAAmBf,EAAM,YAC5B,CAAE,YAAW,WAAU,GAAGY,GAAS,KAClC,EAAAL,EAAA,IAAA,CAACN,EAAAA,UAAmB,OAApB,CAA2B,UAAU,OACnC,UAAA,EAAAM,EAAA,KAAA,CAACN,EAAAA,UAAmB,QAApB,CACO,MACL,YAAU,oBACV,UAAWC,EAAAA,GACT,ufACAW,CACF,EACA,GAAID,EAPN,SAAA,CASGI,GACD,EAAAT,EAAA,IAAA,CAACJ,EAAAA,gBAAD,CACE,YAAU,yBACV,UAAU,2EACX,CAAA,GACD,EAAAI,EAAA,IAAA,CAACH,EAAAA,cAAD,CACE,YAAU,yBACV,UAAU,kFACX,CAAA,CACyB,C,EACH,CAAA,CAE/B,EACA,EAAiB,YAAcH,EAAAA,UAAmB,QAAQ,YAiB1D,IAAMgB,EAAmBjB,EAAM,YAC5B,CAAE,YAAW,WAAU,GAAGY,GAAS,KAClC,EAAAL,EAAA,IAAA,CAACN,EAAAA,UAAmB,MAApB,CACO,MACL,YAAU,oBACV,UAAU,4FACV,GAAIW,EAEJ,UAAA,EAAAL,EAAA,IAAA,CAAC,MAAD,CACE,UAAWL,EAAAA,GACT,0LACAW,CACF,EAEC,UACE,CAAA,CACmB,CAAA,CAE9B,EACA,EAAiB,YAAcZ,EAAAA,UAAmB,MAAM,Y"}

package/dist/ui/components/ui/accordion.d.cts

@@ -1,7 +1,67 @@
 import { Accordion as AccordionPrimitive } from '@base-ui/react/accordion';
 import * as React from 'react';
+/**
+ * Coordinates expansion state for a collection of disclosure items.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered Accordion composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Compose triggers and content inside an AccordionItem under Accordion. Base UI owns selection, focus and keyboard behavior; the wrapper adds no expansion defaults. The ref prop forwards to the rendered control or container declared by the component ref type.
+ * @example
+ * ```tsx
+ * import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<Accordion defaultValue={["details"]}><AccordionItem value="details"><AccordionTrigger>Details</AccordionTrigger><AccordionContent>Project details</AccordionContent></AccordionItem></Accordion>);
+ * }
+ * ```
+ */
 declare const Accordion: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.Root.Props<any>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Associates one disclosure value with its trigger and collapsible panel.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered AccordionItem composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Compose triggers and content inside an AccordionItem under Accordion. Base UI owns selection, focus and keyboard behavior; the wrapper adds no expansion defaults. The ref prop forwards to the rendered control or container declared by the component ref type.
+ * @example
+ * ```tsx
+ * import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<Accordion defaultValue={["details"]}><AccordionItem value="details"><AccordionTrigger>Details</AccordionTrigger><AccordionContent>Project details</AccordionContent></AccordionItem></Accordion>);
+ * }
+ * ```
+ */
 declare const AccordionItem: React.ForwardRefExoticComponent<Omit<import('@base-ui/react').AccordionItemProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Renders a disclosure button inside a heading with open/closed chevron indicators.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered AccordionTrigger composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Compose triggers and content inside an AccordionItem under Accordion. Base UI owns selection, focus and keyboard behavior; the wrapper adds no expansion defaults. The ref prop forwards to the rendered control or container declared by the component ref type.
+ * @example
+ * ```tsx
+ * import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<Accordion defaultValue={["details"]}><AccordionItem value="details"><AccordionTrigger>Details</AccordionTrigger><AccordionContent>Project details</AccordionContent></AccordionItem></Accordion>);
+ * }
+ * ```
+ */
 declare const AccordionTrigger: React.ForwardRefExoticComponent<Omit<import('@base-ui/react').AccordionTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * Renders an animated disclosure panel with an inner content wrapper.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered AccordionContent composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Compose triggers and content inside an AccordionItem under Accordion. Base UI owns selection, focus and keyboard behavior; the wrapper adds no expansion defaults. The ref prop forwards to the rendered control or container declared by the component ref type. className styles the inner content div, while remaining panel props target the Base UI panel.
+ * @example
+ * ```tsx
+ * import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<Accordion defaultValue={["details"]}><AccordionItem value="details"><AccordionTrigger>Details</AccordionTrigger><AccordionContent>Project details</AccordionContent></AccordionItem></Accordion>);
+ * }
+ * ```
+ */
 declare const AccordionContent: React.ForwardRefExoticComponent<Omit<import('@base-ui/react').AccordionPanelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/dist/ui/components/ui/accordion.d.ts

@@ -1,7 +1,67 @@
 import { Accordion as AccordionPrimitive } from '@base-ui/react/accordion';
 import * as React from 'react';
+/**
+ * Coordinates expansion state for a collection of disclosure items.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered Accordion composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Compose triggers and content inside an AccordionItem under Accordion. Base UI owns selection, focus and keyboard behavior; the wrapper adds no expansion defaults. The ref prop forwards to the rendered control or container declared by the component ref type.
+ * @example
+ * ```tsx
+ * import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<Accordion defaultValue={["details"]}><AccordionItem value="details"><AccordionTrigger>Details</AccordionTrigger><AccordionContent>Project details</AccordionContent></AccordionItem></Accordion>);
+ * }
+ * ```
+ */
 declare const Accordion: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.Root.Props<any>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Associates one disclosure value with its trigger and collapsible panel.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered AccordionItem composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Compose triggers and content inside an AccordionItem under Accordion. Base UI owns selection, focus and keyboard behavior; the wrapper adds no expansion defaults. The ref prop forwards to the rendered control or container declared by the component ref type.
+ * @example
+ * ```tsx
+ * import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<Accordion defaultValue={["details"]}><AccordionItem value="details"><AccordionTrigger>Details</AccordionTrigger><AccordionContent>Project details</AccordionContent></AccordionItem></Accordion>);
+ * }
+ * ```
+ */
 declare const AccordionItem: React.ForwardRefExoticComponent<Omit<import('@base-ui/react').AccordionItemProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Renders a disclosure button inside a heading with open/closed chevron indicators.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered AccordionTrigger composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Compose triggers and content inside an AccordionItem under Accordion. Base UI owns selection, focus and keyboard behavior; the wrapper adds no expansion defaults. The ref prop forwards to the rendered control or container declared by the component ref type.
+ * @example
+ * ```tsx
+ * import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<Accordion defaultValue={["details"]}><AccordionItem value="details"><AccordionTrigger>Details</AccordionTrigger><AccordionContent>Project details</AccordionContent></AccordionItem></Accordion>);
+ * }
+ * ```
+ */
 declare const AccordionTrigger: React.ForwardRefExoticComponent<Omit<import('@base-ui/react').AccordionTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * Renders an animated disclosure panel with an inner content wrapper.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered AccordionContent composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Compose triggers and content inside an AccordionItem under Accordion. Base UI owns selection, focus and keyboard behavior; the wrapper adds no expansion defaults. The ref prop forwards to the rendered control or container declared by the component ref type. className styles the inner content div, while remaining panel props target the Base UI panel.
+ * @example
+ * ```tsx
+ * import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<Accordion defaultValue={["details"]}><AccordionItem value="details"><AccordionTrigger>Details</AccordionTrigger><AccordionContent>Project details</AccordionContent></AccordionItem></Accordion>);
+ * }
+ * ```
+ */
 declare const AccordionContent: React.ForwardRefExoticComponent<Omit<import('@base-ui/react').AccordionPanelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/dist/ui/components/ui/accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.js","names":["React","AccordionPrimitive","React$1","Accordion$1","Accordion","props","cn","className","AccordionItem","AccordionTrigger","children","ChevronDownIcon","ChevronUpIcon","AccordionContent"],"sources":["../../../../src/ui/components/ui/accordion.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Accordion as AccordionPrimitive } from '@base-ui/react/accordion';\nimport { ChevronDownIcon, ChevronUpIcon } from 'lucide-react';\n\nimport { cn } from '../../lib/utils';\n\nconst Accordion = React.forwardRef<HTMLDivElement, AccordionPrimitive.Root.Props>(\n  ({ className, ...props }, ref) => (\n    <AccordionPrimitive.Root\n      ref={ref}\n      data-slot='accordion'\n      className={cn('flex w-full flex-col', className)}\n      {...props}\n    />\n  ),\n);\nAccordion.displayName = 'Accordion';\n\nconst AccordionItem = React.forwardRef<HTMLDivElement, AccordionPrimitive.Item.Props>(\n  ({ className, ...props }, ref) => (\n    <AccordionPrimitive.Item\n      ref={ref}\n      data-slot='accordion-item'\n      className={cn('not-last:border-b', className)}\n      {...props}\n    />\n  ),\n);\nAccordionItem.displayName = 'AccordionItem';\n\nconst AccordionTrigger = React.forwardRef<HTMLButtonElement, AccordionPrimitive.Trigger.Props>(\n  ({ className, children, ...props }, ref) => (\n    <AccordionPrimitive.Header className='flex'>\n      <AccordionPrimitive.Trigger\n        ref={ref}\n        data-slot='accordion-trigger'\n        className={cn(\n          'focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-lg py-2.5 text-left text-sm font-medium hover:underline focus-visible:ring-[3px] **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        <ChevronDownIcon\n          data-slot='accordion-trigger-icon'\n          className='pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden'\n        />\n        <ChevronUpIcon\n          data-slot='accordion-trigger-icon'\n          className='pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline'\n        />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  ),\n);\nAccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;\n\nconst AccordionContent = React.forwardRef<HTMLDivElement, AccordionPrimitive.Panel.Props>(\n  ({ className, children, ...props }, ref) => (\n    <AccordionPrimitive.Panel\n      ref={ref}\n      data-slot='accordion-content'\n      className='data-open:animate-accordion-down data-closed:animate-accordion-up text-sm overflow-hidden'\n      {...props}\n    >\n      <div\n        className={cn(\n          'pt-0 pb-2.5 [&_a]:hover:text-foreground h-(--accordion-panel-height) data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4',\n          className,\n        )}\n      >\n        {children}\n      </div>\n    </AccordionPrimitive.Panel>\n  ),\n);\nAccordionContent.displayName = AccordionPrimitive.Panel.displayName;\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent };\n"],"mappings":";;;;;;;;AAQA,IAAMI,IAAYJ,EAAM,YACrB,EAAE,cAAW,GAAGK,KAAS,MACxB,kBAACJ,EAAmB,MAApB;CACO;CACL,aAAU;CACV,WAAWK,EAAG,wBAAwBC,CAAS;CAC/C,GAAIF;AACL,CAAA,CAEL;AACA,EAAU,cAAc;AAExB,IAAMG,IAAgBR,EAAM,YACzB,EAAE,cAAW,GAAGK,KAAS,MACxB,kBAACJ,EAAmB,MAApB;CACO;CACL,aAAU;CACV,WAAWK,EAAG,qBAAqBC,CAAS;CAC5C,GAAIF;AACL,CAAA,CAEL;AACA,EAAc,cAAc;AAE5B,IAAMI,IAAmBT,EAAM,YAC5B,EAAE,cAAW,aAAU,GAAGK,KAAS,MAClC,kBAACJ,EAAmB,QAApB;CAA2B,WAAU;CACnC,UAAA,kBAACA,EAAmB,SAApB;EACO;EACL,aAAU;EACV,WAAWK,EACT,wfACAC,CACF;EACA,GAAIF;EAPN,UAAA;GASGK;GACD,kBAACC,GAAD;IACE,aAAU;IACV,WAAU;GACX,CAAA;GACD,kBAACC,GAAD;IACE,aAAU;IACV,WAAU;GACX,CAAA;EACyB;;AACH,CAAA,CAE/B;AACA,EAAiB,cAAcX,EAAmB,QAAQ;AAE1D,IAAMY,IAAmBb,EAAM,YAC5B,EAAE,cAAW,aAAU,GAAGK,KAAS,MAClC,kBAACJ,EAAmB,OAApB;CACO;CACL,aAAU;CACV,WAAU;CACV,GAAII;CAEJ,UAAA,kBAAC,OAAD;EACE,WAAWC,EACT,2LACAC,CACF;EAEC;CACE,CAAA;AACmB,CAAA,CAE9B;AACA,EAAiB,cAAcN,EAAmB,MAAM"}
+{"version":3,"file":"accordion.js","names":["React","AccordionPrimitive","React$1","Accordion$1","Accordion","props","cn","className","AccordionItem","AccordionTrigger","children","ChevronDownIcon","ChevronUpIcon","AccordionContent"],"sources":["../../../../src/ui/components/ui/accordion.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Accordion as AccordionPrimitive } from '@base-ui/react/accordion';\nimport { ChevronDownIcon, ChevronUpIcon } from 'lucide-react';\n\nimport { cn } from '../../lib/utils';\n\n/**\n * Coordinates expansion state for a collection of disclosure items.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered Accordion composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Compose triggers and content inside an AccordionItem under Accordion. Base UI owns selection, focus and keyboard behavior; the wrapper adds no expansion defaults. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<Accordion defaultValue={[\"details\"]}><AccordionItem value=\"details\"><AccordionTrigger>Details</AccordionTrigger><AccordionContent>Project details</AccordionContent></AccordionItem></Accordion>);\n * }\n * ```\n */\nconst Accordion = React.forwardRef<HTMLDivElement, AccordionPrimitive.Root.Props>(\n  ({ className, ...props }, ref) => (\n    <AccordionPrimitive.Root\n      ref={ref}\n      data-slot='accordion'\n      className={cn('flex w-full flex-col', className)}\n      {...props}\n    />\n  ),\n);\nAccordion.displayName = 'Accordion';\n\n/**\n * Associates one disclosure value with its trigger and collapsible panel.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered AccordionItem composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Compose triggers and content inside an AccordionItem under Accordion. Base UI owns selection, focus and keyboard behavior; the wrapper adds no expansion defaults. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<Accordion defaultValue={[\"details\"]}><AccordionItem value=\"details\"><AccordionTrigger>Details</AccordionTrigger><AccordionContent>Project details</AccordionContent></AccordionItem></Accordion>);\n * }\n * ```\n */\nconst AccordionItem = React.forwardRef<HTMLDivElement, AccordionPrimitive.Item.Props>(\n  ({ className, ...props }, ref) => (\n    <AccordionPrimitive.Item\n      ref={ref}\n      data-slot='accordion-item'\n      className={cn('not-last:border-b', className)}\n      {...props}\n    />\n  ),\n);\nAccordionItem.displayName = 'AccordionItem';\n\n/**\n * Renders a disclosure button inside a heading with open/closed chevron indicators.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered AccordionTrigger composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Compose triggers and content inside an AccordionItem under Accordion. Base UI owns selection, focus and keyboard behavior; the wrapper adds no expansion defaults. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<Accordion defaultValue={[\"details\"]}><AccordionItem value=\"details\"><AccordionTrigger>Details</AccordionTrigger><AccordionContent>Project details</AccordionContent></AccordionItem></Accordion>);\n * }\n * ```\n */\nconst AccordionTrigger = React.forwardRef<HTMLButtonElement, AccordionPrimitive.Trigger.Props>(\n  ({ className, children, ...props }, ref) => (\n    <AccordionPrimitive.Header className='flex'>\n      <AccordionPrimitive.Trigger\n        ref={ref}\n        data-slot='accordion-trigger'\n        className={cn(\n          'focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-lg py-2.5 text-left text-sm font-medium hover:underline focus-visible:ring-[3px] **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        <ChevronDownIcon\n          data-slot='accordion-trigger-icon'\n          className='pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden'\n        />\n        <ChevronUpIcon\n          data-slot='accordion-trigger-icon'\n          className='pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline'\n        />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  ),\n);\nAccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;\n\n/**\n * Renders an animated disclosure panel with an inner content wrapper.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered AccordionContent composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Compose triggers and content inside an AccordionItem under Accordion. Base UI owns selection, focus and keyboard behavior; the wrapper adds no expansion defaults. The ref prop forwards to the rendered control or container declared by the component ref type. className styles the inner content div, while remaining panel props target the Base UI panel.\n * @example\n * ```tsx\n * import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<Accordion defaultValue={[\"details\"]}><AccordionItem value=\"details\"><AccordionTrigger>Details</AccordionTrigger><AccordionContent>Project details</AccordionContent></AccordionItem></Accordion>);\n * }\n * ```\n */\nconst AccordionContent = React.forwardRef<HTMLDivElement, AccordionPrimitive.Panel.Props>(\n  ({ className, children, ...props }, ref) => (\n    <AccordionPrimitive.Panel\n      ref={ref}\n      data-slot='accordion-content'\n      className='data-open:animate-accordion-down data-closed:animate-accordion-up text-sm overflow-hidden'\n      {...props}\n    >\n      <div\n        className={cn(\n          'pt-0 pb-2.5 [&_a]:hover:text-foreground h-(--accordion-panel-height) data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4',\n          className,\n        )}\n      >\n        {children}\n      </div>\n    </AccordionPrimitive.Panel>\n  ),\n);\nAccordionContent.displayName = AccordionPrimitive.Panel.displayName;\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent };\n"],"mappings":";;;;;;;;AAuBA,IAAMI,IAAYJ,EAAM,YACrB,EAAE,cAAW,GAAGK,KAAS,MACxB,kBAACJ,EAAmB,MAApB;CACO;CACL,aAAU;CACV,WAAWK,EAAG,wBAAwBC,CAAS;CAC/C,GAAIF;AACL,CAAA,CAEL;AACA,EAAU,cAAc;AAiBxB,IAAMG,IAAgBR,EAAM,YACzB,EAAE,cAAW,GAAGK,KAAS,MACxB,kBAACJ,EAAmB,MAApB;CACO;CACL,aAAU;CACV,WAAWK,EAAG,qBAAqBC,CAAS;CAC5C,GAAIF;AACL,CAAA,CAEL;AACA,EAAc,cAAc;AAiB5B,IAAMI,IAAmBT,EAAM,YAC5B,EAAE,cAAW,aAAU,GAAGK,KAAS,MAClC,kBAACJ,EAAmB,QAApB;CAA2B,WAAU;CACnC,UAAA,kBAACA,EAAmB,SAApB;EACO;EACL,aAAU;EACV,WAAWK,EACT,wfACAC,CACF;EACA,GAAIF;EAPN,UAAA;GASGK;GACD,kBAACC,GAAD;IACE,aAAU;IACV,WAAU;GACX,CAAA;GACD,kBAACC,GAAD;IACE,aAAU;IACV,WAAU;GACX,CAAA;EACyB;;AACH,CAAA,CAE/B;AACA,EAAiB,cAAcX,EAAmB,QAAQ;AAiB1D,IAAMY,IAAmBb,EAAM,YAC5B,EAAE,cAAW,aAAU,GAAGK,KAAS,MAClC,kBAACJ,EAAmB,OAApB;CACO;CACL,aAAU;CACV,WAAU;CACV,GAAII;CAEJ,UAAA,kBAAC,OAAD;EACE,WAAWC,EACT,2LACAC,CACF;EAEC;CACE,CAAA;AACmB,CAAA,CAE9B;AACA,EAAiB,cAAcN,EAAmB,MAAM"}

package/dist/ui/components/ui/adjustable-pane.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"adjustable-pane.cjs","names":["useRef","useState","useCallback","cn","ResizablePanelGroup","_Fragment","ResizablePanel","ResizableHandle","X","require_ui_lib_utils","require_ui_components_ui_resizable","react_jsx_runtime","react","lucide_react","AdjustablePane","vertical","side","containerRef","size","setSize","initialSize","prevInitialSize","setPrevInitialSize","clampedSize","minSize","maxSize","startDrag","container","rect","onMove","percent","ev","onUp","mainFlexPercent","computedMainFlex","open","computedPaneFlex","className","main","paneClassName","onClose"],"sources":["../../../../src/ui/components/ui/adjustable-pane.tsx"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\nimport { X } from 'lucide-react';\nimport { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '../ui/resizable';\nimport { cn } from '../../lib/utils';\n\n/**\n * AdjustablePane のプロパティ\n * Properties for the AdjustablePane component\n */\nexport type AdjustablePaneProps = {\n  /** ペインの表示位置 / Side to display the pane */\n  side?: 'right' | 'bottom';\n  /** ペインの開閉状態 / Whether the pane is open */\n  open: boolean;\n  /** ペインを閉じる時のコールバック / Callback when closing the pane */\n  onClose?: () => void;\n  /** 初期サイズ（パーセンテージ） / Initial size in percentage */\n  initialSize?: number;\n  /** 最小サイズ（パーセンテージ） / Minimum size in percentage */\n  minSize?: number;\n  /** 最大サイズ（パーセンテージ） / Maximum size in percentage */\n  maxSize?: number;\n  /** コンテナのクラス名 / Container className */\n  className?: string;\n  /** ペイン内部のクラス名 / Pane content className */\n  paneClassName?: string;\n  /** ペイン内のコンテンツ / Content rendered inside the pane */\n  children?: React.ReactNode;\n  /** メインエリアのコンテンツ / Content rendered in the main area */\n  main?: React.ReactNode;\n};\n\n/**\n * リサイズ可能なサイドペイン / ボトムペインコンポーネント。\n * マウスドラッグでサイズを調整でき、右側または下側に配置可能。\n *\n * A resizable side/bottom pane component with drag-to-resize,\n * close button, and configurable min/max sizes.\n *\n * @example\n * ```tsx\n * <AdjustablePane\n *   open={isOpen}\n *   onClose={() => setIsOpen(false)}\n *   initialSize={35}\n *   main={<MainContent />}\n * >\n *   <PaneContent />\n * </AdjustablePane>\n * ```\n */\nexport function AdjustablePane({\n  side = 'right',\n  open,\n  onClose,\n  initialSize = 30,\n  minSize = 20,\n  maxSize = 60,\n  className,\n  paneClassName,\n  children,\n  main,\n}: AdjustablePaneProps) {\n  const vertical = side === 'bottom';\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const [size, setSize] = useState<number>(initialSize);\n  const [prevInitialSize, setPrevInitialSize] = useState(initialSize);\n\n  if (initialSize !== prevInitialSize) {\n    setSize(initialSize);\n    setPrevInitialSize(initialSize);\n  }\n\n  const clampedSize = Math.min(Math.max(size, minSize), maxSize);\n\n  const startDrag = useCallback(\n    (e: React.MouseEvent) => {\n      e.preventDefault();\n      const container = containerRef.current;\n      if (!container) return;\n\n      const rect = container.getBoundingClientRect();\n\n      const onMove = (ev: MouseEvent) => {\n        if (vertical) {\n          const offset = rect.bottom - ev.clientY;\n          const percent = (offset / rect.height) * 100;\n          setSize(percent);\n        } else {\n          const offset = rect.right - ev.clientX;\n          const percent = (offset / rect.width) * 100;\n          setSize(percent);\n        }\n      };\n\n      const onUp = () => {\n        window.removeEventListener('mousemove', onMove);\n        window.removeEventListener('mouseup', onUp);\n      };\n\n      window.addEventListener('mousemove', onMove);\n      window.addEventListener('mouseup', onUp);\n    },\n    [vertical],\n  );\n\n  const mainFlexPercent = 100 - clampedSize;\n  const computedMainFlex = open ? `${mainFlexPercent}%` : '100%';\n  const computedPaneFlex = open ? `${clampedSize}%` : '0%';\n\n  return (\n    <div ref={containerRef} className={cn('h-full w-full', className)}>\n      <ResizablePanelGroup\n        data-panel-group-direction={vertical ? 'vertical' : 'horizontal'}\n        style={{ userSelect: 'none' }}\n      >\n        {side === 'right' ? (\n          <>\n            <ResizablePanel className='min-w-0' style={{ flex: `0 0 ${computedMainFlex}` }}>\n              <div className='h-full w-full overflow-auto'>{main}</div>\n            </ResizablePanel>\n            {open && (\n              <>\n                <ResizableHandle className='cursor-col-resize' onMouseDown={startDrag} />\n                <ResizablePanel\n                  className='min-w-[200px]'\n                  style={{ flex: `0 0 ${computedPaneFlex}` }}\n                >\n                  <div\n                    className={cn('h-full w-full overflow-auto border-l bg-card', paneClassName)}\n                  >\n                    <div className='sticky top-0 z-10 flex items-center justify-end gap-2 border-b bg-card px-2 py-1'>\n                      {onClose && (\n                        <button\n                          type='button'\n                          aria-label='Close pane'\n                          className='inline-flex h-7 w-7 items-center justify-center rounded hover:bg-muted'\n                          onClick={onClose}\n                        >\n                          <X className='h-4 w-4' />\n                        </button>\n                      )}\n                    </div>\n                    <div className='p-2'>{children}</div>\n                  </div>\n                </ResizablePanel>\n              </>\n            )}\n          </>\n        ) : (\n          <>\n            <ResizablePanel\n              className='min-h-0'\n              style={{ flex: `0 0 ${open ? `${100 - clampedSize}%` : '100%'}` }}\n            >\n              <div className='h-full w-full overflow-auto'>{main}</div>\n            </ResizablePanel>\n            {open && (\n              <>\n                <ResizableHandle className='cursor-row-resize' onMouseDown={startDrag} />\n                <ResizablePanel\n                  className='min-h-[160px]'\n                  style={{ flex: `0 0 ${open ? `${clampedSize}%` : '0%'}` }}\n                >\n                  <div\n                    className={cn('h-full w-full overflow-auto border-t bg-card', paneClassName)}\n                  >\n                    <div className='sticky top-0 z-10 flex items-center justify-end gap-2 border-b bg-card px-2 py-1'>\n                      {onClose && (\n                        <button\n                          type='button'\n                          aria-label='Close pane'\n                          className='inline-flex h-7 w-7 items-center justify-center rounded hover:bg-muted'\n                          onClick={onClose}\n                        >\n                          <X className='h-4 w-4' />\n                        </button>\n                      )}\n                    </div>\n                    <div className='p-2'>{children}</div>\n                  </div>\n                </ResizablePanel>\n              </>\n            )}\n          </>\n        )}\n      </ResizablePanelGroup>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"adjustable-pane.cjs","names":["useRef","useState","useCallback","cn","ResizablePanelGroup","_Fragment","ResizablePanel","ResizableHandle","X","require_ui_lib_utils","require_ui_components_ui_resizable","react_jsx_runtime","react","lucide_react","AdjustablePane","vertical","side","containerRef","size","setSize","initialSize","prevInitialSize","setPrevInitialSize","clampedSize","minSize","maxSize","startDrag","container","rect","onMove","percent","ev","onUp","mainFlexPercent","computedMainFlex","open","computedPaneFlex","className","main","paneClassName","onClose"],"sources":["../../../../src/ui/components/ui/adjustable-pane.tsx"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\nimport { X } from 'lucide-react';\nimport { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '../ui/resizable';\nimport { cn } from '../../lib/utils';\n\n/**\n * Controlled pane visibility, percentage size bounds and content for AdjustablePane.\n * @remarks Inherited native or primitive props keep their upstream types and behavior; this declaration documents only the wrapper-owned options.\n * @see AdjustablePane\n */\nexport type AdjustablePaneProps = {\n  /**\n   * Pane placement; defaults to right. bottom selects vertical resizing.\n   */\n  side?: 'right' | 'bottom';\n  /**\n   * Controlled visibility; the host updates this value in response to close/open requests.\n   */\n  open: boolean;\n  /**\n   * Called by the close button; the host must set open=false. Omitted hides the close button.\n   * @returns No value; complete the host callback action.\n   */\n  onClose?: () => void;\n  /**\n   * Initial pane share in percent (default 30); later changes reset local size before clamping.\n   */\n  initialSize?: number;\n  /**\n   * Minimum pane share in percent (default 20). Supply bounds in a consistent 0–100 range; the wrapper does not validate them.\n   */\n  minSize?: number;\n  /**\n   * Maximum pane share in percent (default 60). Supply a value at least minSize.\n   */\n  maxSize?: number;\n  /**\n   * Additional classes merged with wrapper styling; see the component for the targeted element.\n   */\n  className?: string;\n  /**\n   * Additional classes on the scrollable pane content container.\n   */\n  paneClassName?: string;\n  /**\n   * Content rendered in the wrapper's child region.\n   */\n  children?: React.ReactNode;\n  /**\n   * Content rendered in the remaining main panel.\n   */\n  main?: React.ReactNode;\n};\n\n/**\n * Divides a container between main content and a mouse-resizable right or bottom pane.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling. Wrapper defaults: side='right', initialSize=30, minSize=20, maxSize=60.\n * @returns The rendered AdjustablePane composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Give the host a nonzero width and height. open is controlled; onClose requests closure without changing it. Sizes are percentages clamped between minSize/maxSize. Changing initialSize resets local size. Drag listeners attach to window and are removed on mouseup; unmount during a drag does not install separate cleanup. This wrapper implements mouse resizing; it does not add keyboard resizing.\n * @example\n * ```tsx\n * import { AdjustablePane } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<AdjustablePane open side=\"right\" main={<p>Main content</p>}>Details</AdjustablePane>);\n * }\n * ```\n */\nexport function AdjustablePane({\n  side = 'right',\n  open,\n  onClose,\n  initialSize = 30,\n  minSize = 20,\n  maxSize = 60,\n  className,\n  paneClassName,\n  children,\n  main,\n}: AdjustablePaneProps) {\n  const vertical = side === 'bottom';\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const [size, setSize] = useState<number>(initialSize);\n  const [prevInitialSize, setPrevInitialSize] = useState(initialSize);\n\n  if (initialSize !== prevInitialSize) {\n    setSize(initialSize);\n    setPrevInitialSize(initialSize);\n  }\n\n  const clampedSize = Math.min(Math.max(size, minSize), maxSize);\n\n  const startDrag = useCallback(\n    (e: React.MouseEvent) => {\n      e.preventDefault();\n      const container = containerRef.current;\n      if (!container) return;\n\n      const rect = container.getBoundingClientRect();\n\n      const onMove = (ev: MouseEvent) => {\n        if (vertical) {\n          const offset = rect.bottom - ev.clientY;\n          const percent = (offset / rect.height) * 100;\n          setSize(percent);\n        } else {\n          const offset = rect.right - ev.clientX;\n          const percent = (offset / rect.width) * 100;\n          setSize(percent);\n        }\n      };\n\n      const onUp = () => {\n        window.removeEventListener('mousemove', onMove);\n        window.removeEventListener('mouseup', onUp);\n      };\n\n      window.addEventListener('mousemove', onMove);\n      window.addEventListener('mouseup', onUp);\n    },\n    [vertical],\n  );\n\n  const mainFlexPercent = 100 - clampedSize;\n  const computedMainFlex = open ? `${mainFlexPercent}%` : '100%';\n  const computedPaneFlex = open ? `${clampedSize}%` : '0%';\n\n  return (\n    <div ref={containerRef} className={cn('h-full w-full', className)}>\n      <ResizablePanelGroup\n        data-panel-group-direction={vertical ? 'vertical' : 'horizontal'}\n        style={{ userSelect: 'none' }}\n      >\n        {side === 'right' ? (\n          <>\n            <ResizablePanel className='min-w-0' style={{ flex: `0 0 ${computedMainFlex}` }}>\n              <div className='h-full w-full overflow-auto'>{main}</div>\n            </ResizablePanel>\n            {open && (\n              <>\n                <ResizableHandle className='cursor-col-resize' onMouseDown={startDrag} />\n                <ResizablePanel\n                  className='min-w-[200px]'\n                  style={{ flex: `0 0 ${computedPaneFlex}` }}\n                >\n                  <div\n                    className={cn('h-full w-full overflow-auto border-l bg-card', paneClassName)}\n                  >\n                    <div className='sticky top-0 z-10 flex items-center justify-end gap-2 border-b bg-card px-2 py-1'>\n                      {onClose && (\n                        <button\n                          type='button'\n                          aria-label='Close pane'\n                          className='inline-flex h-7 w-7 items-center justify-center rounded hover:bg-muted'\n                          onClick={onClose}\n                        >\n                          <X className='h-4 w-4' />\n                        </button>\n                      )}\n                    </div>\n                    <div className='p-2'>{children}</div>\n                  </div>\n                </ResizablePanel>\n              </>\n            )}\n          </>\n        ) : (\n          <>\n            <ResizablePanel\n              className='min-h-0'\n              style={{ flex: `0 0 ${open ? `${100 - clampedSize}%` : '100%'}` }}\n            >\n              <div className='h-full w-full overflow-auto'>{main}</div>\n            </ResizablePanel>\n            {open && (\n              <>\n                <ResizableHandle className='cursor-row-resize' onMouseDown={startDrag} />\n                <ResizablePanel\n                  className='min-h-[160px]'\n                  style={{ flex: `0 0 ${open ? `${clampedSize}%` : '0%'}` }}\n                >\n                  <div\n                    className={cn('h-full w-full overflow-auto border-t bg-card', paneClassName)}\n                  >\n                    <div className='sticky top-0 z-10 flex items-center justify-end gap-2 border-b bg-card px-2 py-1'>\n                      {onClose && (\n                        <button\n                          type='button'\n                          aria-label='Close pane'\n                          className='inline-flex h-7 w-7 items-center justify-center rounded hover:bg-muted'\n                          onClick={onClose}\n                        >\n                          <X className='h-4 w-4' />\n                        </button>\n                      )}\n                    </div>\n                    <div className='p-2'>{children}</div>\n                  </div>\n                </ResizablePanel>\n              </>\n            )}\n          </>\n        )}\n      </ResizablePanelGroup>\n    </div>\n  );\n}\n"],"mappings":"A,oOAqEA,SAAgBc,EAAe,CAC7B,OAAO,QACP,OACA,UACA,cAAc,GACd,UAAU,GACV,UAAU,GACV,YACA,gBACA,WACA,QACsB,CACtB,IAAMC,EAAWC,IAAS,SACpBC,GAAA,EAAejB,EAAAA,OAAAA,CAA8B,IAAI,EACjD,CAACkB,EAAMC,IAAA,EAAWlB,EAAAA,SAAAA,CAAiBmB,CAAW,EAC9C,CAACC,EAAiBC,IAAA,EAAsBrB,EAAAA,SAAAA,CAASmB,CAAW,EAE9DA,IAAgBC,IAClBF,EAAQC,CAAW,EACnBE,EAAmBF,CAAW,GAGhC,IAAMG,EAAc,KAAK,IAAI,KAAK,IAAIL,EAAMM,CAAO,EAAGC,CAAO,EAEvDC,GAAA,EAAYxB,EAAAA,YAAAA,CACf,GAAwB,CACvB,EAAE,eAAe,EACjB,IAAMyB,EAAYV,EAAa,QAC/B,GAAI,CAACU,EAAW,OAEhB,IAAMC,EAAOD,EAAU,sBAAsB,EAEvCE,EAAU,GAAmB,CACjC,GAAId,EAAU,CAEZ,IAAMe,GADSF,EAAK,OAASG,EAAG,SACNH,EAAK,OAAU,IACzCT,EAAQW,CAAO,CACjB,KAAO,CAEL,IAAMA,GADSF,EAAK,MAAQG,EAAG,SACLH,EAAK,MAAS,IACxCT,EAAQW,CAAO,CACjB,CACF,EAEME,MAAa,CACjB,OAAO,oBAAoB,YAAaH,CAAM,EAC9C,OAAO,oBAAoB,UAAWG,CAAI,CAC5C,EAEA,OAAO,iBAAiB,YAAaH,CAAM,EAC3C,OAAO,iBAAiB,UAAWG,CAAI,CACzC,EACA,CAACjB,CAAQ,CACX,EAEMkB,EAAkB,IAAMV,EACxBW,EAAmBC,EAAO,GAAGF,EAAgB,GAAK,OAClDG,EAAmBD,EAAO,GAAGZ,EAAY,GAAK,KAEpD,OACE,EAAAZ,EAAA,IAAA,CAAC,MAAD,CAAK,IAAKM,EAAc,UAAWd,EAAAA,GAAG,gBAAiBkC,CAAS,EAC9D,UAAA,EAAA1B,EAAA,IAAA,CAACP,EAAAA,oBAAD,CACE,6BAA4BW,EAAW,WAAa,aACpD,MAAO,CAAE,WAAY,MAAO,EAE3B,SAAAC,IAAS,SACR,EAAAL,EAAA,KAAA,CAAAN,EAAAA,SAAA,CAAA,SAAA,EACE,EAAAM,EAAA,IAAA,CAACL,EAAAA,eAAD,CAAgB,UAAU,UAAU,MAAO,CAAE,KAAM,OAAO4B,GAAmB,EAC3E,UAAA,EAAAvB,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,8BAA+B,SAAA2B,CAAU,CAAA,CAC1C,CAAA,EACfH,IACC,EAAAxB,EAAA,KAAA,CAAAN,EAAAA,SAAA,CAAA,SAAA,EACE,EAAAM,EAAA,IAAA,CAACJ,EAAAA,gBAAD,CAAiB,UAAU,oBAAoB,YAAamB,CAAY,CAAA,GACxE,EAAAf,EAAA,IAAA,CAACL,EAAAA,eAAD,CACE,UAAU,gBACV,MAAO,CAAE,KAAM,OAAO8B,GAAmB,EAEzC,UAAA,EAAAzB,EAAA,KAAA,CAAC,MAAD,CACE,UAAWR,EAAAA,GAAG,+CAAgDoC,CAAa,EAD7E,SAAA,EAGE,EAAA5B,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,mFACZ,SAAA6B,IACC,EAAA7B,EAAA,IAAA,CAAC,SAAD,CACE,KAAK,SACL,aAAW,aACX,UAAU,yEACV,QAAS6B,EAET,UAAA,EAAA7B,EAAA,IAAA,CAACH,EAAAA,EAAD,CAAG,UAAU,SAAW,CAAA,CAClB,CAAA,CAEP,CAAA,GACL,EAAAG,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,MAAO,UAAc,CAAA,CACjC,C,EACS,CAAA,CAChB,CAAA,CAAA,CAEJ,CAAA,CAAA,GAEF,EAAAA,EAAA,KAAA,CAAAN,EAAAA,SAAA,CAAA,SAAA,EACE,EAAAM,EAAA,IAAA,CAACL,EAAAA,eAAD,CACE,UAAU,UACV,MAAO,CAAE,KAAM,OAAO6B,EAAO,GAAG,IAAMZ,EAAY,GAAK,QAAS,EAEhE,UAAA,EAAAZ,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,8BAA+B,SAAA2B,CAAU,CAAA,CAC1C,CAAA,EACfH,IACC,EAAAxB,EAAA,KAAA,CAAAN,EAAAA,SAAA,CAAA,SAAA,EACE,EAAAM,EAAA,IAAA,CAACJ,EAAAA,gBAAD,CAAiB,UAAU,oBAAoB,YAAamB,CAAY,CAAA,GACxE,EAAAf,EAAA,IAAA,CAACL,EAAAA,eAAD,CACE,UAAU,gBACV,MAAO,CAAE,KAAM,OAAO6B,EAAO,GAAGZ,EAAY,GAAK,MAAO,EAExD,UAAA,EAAAZ,EAAA,KAAA,CAAC,MAAD,CACE,UAAWR,EAAAA,GAAG,+CAAgDoC,CAAa,EAD7E,SAAA,EAGE,EAAA5B,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,mFACZ,SAAA6B,IACC,EAAA7B,EAAA,IAAA,CAAC,SAAD,CACE,KAAK,SACL,aAAW,aACX,UAAU,yEACV,QAAS6B,EAET,UAAA,EAAA7B,EAAA,IAAA,CAACH,EAAAA,EAAD,CAAG,UAAU,SAAW,CAAA,CAClB,CAAA,CAEP,CAAA,GACL,EAAAG,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,MAAO,UAAc,CAAA,CACjC,C,EACS,CAAA,CAChB,CAAA,CAAA,CAEJ,CAAA,CAAA,CAEe,CAAA,CAClB,CAAA,CAET,C"}