npm - @alneas/appkit-react - Versions diffs - 0.1.0 → 0.3.0 - Mend

@alneas/appkit-react 0.1.0 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1983) hide show

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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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"}
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 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 CHANGED Viewed

@@ -1,2 +1,2 @@
-"use client";"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs");let n=require("react/jsx-runtime"),r=require("react");r=e.__toESM(r,1);let i=require("@base-ui/react/accordion"),a=require("lucide-react");var o=r.forwardRef(({className:e,...r},a)=>(0,n.jsx)(i.Accordion.Root,{ref:a,"data-slot":`accordion`,className:t.cn(`flex w-full flex-col`,e),...r}));o.displayName=`Accordion`;var s=r.forwardRef(({className:e,...r},a)=>(0,n.jsx)(i.Accordion.Item,{ref:a,"data-slot":`accordion-item`,className:t.cn(`not-last:border-b`,e),...r}));s.displayName=`AccordionItem`;var c=r.forwardRef(({className:e,children:r,...o},s)=>(0,n.jsx)(i.Accordion.Header,{className:`flex`,children:(0,n.jsxs)(i.Accordion.Trigger,{ref:s,"data-slot":`accordion-trigger`,className:t.cn(`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`,e),...o,children:[r,(0,n.jsx)(a.ChevronDownIcon,{"data-slot":`accordion-trigger-icon`,className:`pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden`}),(0,n.jsx)(a.ChevronUpIcon,{"data-slot":`accordion-trigger-icon`,className:`pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline`})]})}));c.displayName=i.Accordion.Trigger.displayName;var l=r.forwardRef(({className:e,children:r,...a},o)=>(0,n.jsx)(i.Accordion.Panel,{ref:o,"data-slot":`accordion-content`,className:`data-open:animate-accordion-down data-closed:animate-accordion-up text-sm overflow-hidden`,...a,children:(0,n.jsx)(`div`,{className:t.cn(`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`,e),children:r})}));l.displayName=i.Accordion.Panel.displayName,exports.Accordion=o,exports.AccordionContent=l,exports.AccordionItem=s,exports.AccordionTrigger=c;
+"use client";"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs");let n=require("react/jsx-runtime"),r=require("react");r=e.__toESM(r,1);let i=require("@base-ui/react/accordion"),a=require("lucide-react");function o({ref:e,className:r,...a}){return(0,n.jsx)(i.Accordion.Root,{ref:e,"data-slot":`accordion`,className:t.cn(`flex w-full flex-col`,r),...a})}o.displayName=`Accordion`;function s({ref:e,className:r,...a}){return(0,n.jsx)(i.Accordion.Item,{ref:e,"data-slot":`accordion-item`,className:t.cn(`not-last:border-b`,r),...a})}s.displayName=`AccordionItem`;function c({ref:e,className:r,children:o,...s}){return(0,n.jsx)(i.Accordion.Header,{className:`flex`,children:(0,n.jsxs)(i.Accordion.Trigger,{ref:e,"data-slot":`accordion-trigger`,className:t.cn(`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`,r),...s,children:[o,(0,n.jsx)(a.ChevronDownIcon,{"data-slot":`accordion-trigger-icon`,className:`pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden`}),(0,n.jsx)(a.ChevronUpIcon,{"data-slot":`accordion-trigger-icon`,className:`pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline`})]})})}c.displayName=i.Accordion.Trigger.displayName;function l({ref:e,className:r,children:a,...o}){return(0,n.jsx)(i.Accordion.Panel,{ref:e,"data-slot":`accordion-content`,className:`data-open:animate-accordion-down data-closed:animate-accordion-up text-sm overflow-hidden`,...o,children:(0,n.jsx)(`div`,{className:t.cn(`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`,r),children:a})})}l.displayName=i.Accordion.Panel.displayName,exports.Accordion=o,exports.AccordionContent=l,exports.AccordionItem=s,exports.AccordionTrigger=c;
 //# sourceMappingURL=accordion.cjs.map

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

	@@ -1 +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"}
1	+ {"version":3,"file":"accordion.cjs","names":["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 /\nfunction Accordion({\n ref,\n className,\n ...props\n}: React.PropsWithoutRef<AccordionPrimitive.Root.Props> & React.RefAttributes<HTMLDivElement>) {\n return (\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 /\nfunction AccordionItem({\n ref,\n className,\n ...props\n}: React.PropsWithoutRef<AccordionPrimitive.Item.Props> & React.RefAttributes<HTMLDivElement>) {\n return (\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 /\nfunction AccordionTrigger({\n ref,\n className,\n children,\n ...props\n}: React.PropsWithoutRef<AccordionPrimitive.Trigger.Props> &\n React.RefAttributes<HTMLButtonElement>) {\n return (\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 */\nfunction AccordionContent({\n ref,\n className,\n children,\n ...props\n}: React.PropsWithoutRef<AccordionPrimitive.Panel.Props> & React.RefAttributes<HTMLDivElement>) {\n return (\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,SAASU,EAAU,CACjB,MACA,YACA,GAAGC,GAC0F,CAC7F,OACE,EAAAL,EAAA,IAAA,CAACN,EAAAA,UAAmB,KAApB,CACO,MACL,YAAU,YACV,UAAWC,EAAAA,GAAG,uBAAwBW,CAAS,EAC/C,GAAID,CACL,CAAA,CAEL,CACA,EAAU,YAAc,YAiBxB,SAASE,EAAc,CACrB,MACA,YACA,GAAGF,GAC0F,CAC7F,OACE,EAAAL,EAAA,IAAA,CAACN,EAAAA,UAAmB,KAApB,CACO,MACL,YAAU,iBACV,UAAWC,EAAAA,GAAG,oBAAqBW,CAAS,EAC5C,GAAID,CACL,CAAA,CAEL,CACA,EAAc,YAAc,gBAiB5B,SAASG,EAAiB,CACxB,MACA,YACA,WACA,GAAGH,GAEqC,CACxC,OACE,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,CACA,EAAiB,YAAcH,EAAAA,UAAmB,QAAQ,YAiB1D,SAASgB,EAAiB,CACxB,MACA,YACA,WACA,GAAGL,GAC2F,CAC9F,OACE,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,CACA,EAAiB,YAAcZ,EAAAA,UAAmB,MAAM,Y"}

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

@@ -1,7 +1,79 @@
 import { Accordion as AccordionPrimitive } from '@base-ui/react/accordion';
 import * as React from 'react';
-declare const Accordion: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.Root.Props<any>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const AccordionItem: React.ForwardRefExoticComponent<Omit<import('@base-ui/react').AccordionItemProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const AccordionTrigger: React.ForwardRefExoticComponent<Omit<import('@base-ui/react').AccordionTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-declare const AccordionContent: React.ForwardRefExoticComponent<Omit<import('@base-ui/react').AccordionPanelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * 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 function Accordion({ ref, className, ...props }: React.PropsWithoutRef<AccordionPrimitive.Root.Props> & React.RefAttributes<HTMLDivElement>): React.JSX.Element;
+declare namespace Accordion {
+    var displayName: string;
+}
+/**
+ * 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 function AccordionItem({ ref, className, ...props }: React.PropsWithoutRef<AccordionPrimitive.Item.Props> & React.RefAttributes<HTMLDivElement>): React.JSX.Element;
+declare namespace AccordionItem {
+    var displayName: string;
+}
+/**
+ * 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 function AccordionTrigger({ ref, className, children, ...props }: React.PropsWithoutRef<AccordionPrimitive.Trigger.Props> & React.RefAttributes<HTMLButtonElement>): React.JSX.Element;
+declare namespace AccordionTrigger {
+    var displayName: string | undefined;
+}
+/**
+ * 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 function AccordionContent({ ref, className, children, ...props }: React.PropsWithoutRef<AccordionPrimitive.Panel.Props> & React.RefAttributes<HTMLDivElement>): React.JSX.Element;
+declare namespace AccordionContent {
+    var displayName: string | undefined;
+}
 export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

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

@@ -1,7 +1,79 @@
 import { Accordion as AccordionPrimitive } from '@base-ui/react/accordion';
 import * as React from 'react';
-declare const Accordion: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.Root.Props<any>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const AccordionItem: React.ForwardRefExoticComponent<Omit<import('@base-ui/react').AccordionItemProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const AccordionTrigger: React.ForwardRefExoticComponent<Omit<import('@base-ui/react').AccordionTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-declare const AccordionContent: React.ForwardRefExoticComponent<Omit<import('@base-ui/react').AccordionPanelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * 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 function Accordion({ ref, className, ...props }: React.PropsWithoutRef<AccordionPrimitive.Root.Props> & React.RefAttributes<HTMLDivElement>): React.JSX.Element;
+declare namespace Accordion {
+    var displayName: string;
+}
+/**
+ * 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 function AccordionItem({ ref, className, ...props }: React.PropsWithoutRef<AccordionPrimitive.Item.Props> & React.RefAttributes<HTMLDivElement>): React.JSX.Element;
+declare namespace AccordionItem {
+    var displayName: string;
+}
+/**
+ * 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 function AccordionTrigger({ ref, className, children, ...props }: React.PropsWithoutRef<AccordionPrimitive.Trigger.Props> & React.RefAttributes<HTMLButtonElement>): React.JSX.Element;
+declare namespace AccordionTrigger {
+    var displayName: string | undefined;
+}
+/**
+ * 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 function AccordionContent({ ref, className, children, ...props }: React.PropsWithoutRef<AccordionPrimitive.Panel.Props> & React.RefAttributes<HTMLDivElement>): React.JSX.Element;
+declare namespace AccordionContent {
+    var displayName: string | undefined;
+}
 export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };