UI Accordion

1"use client";
2 
3import { mixOklch, type RemocnTheme, useRemocnTheme } from "@/lib/remocn-ui";
4 
5export type AccordionState = "opened" | "closed";
6 
7type AccordionVariant = "default" | "ghost";
8 
9export interface AccordionProps {
10  state?: AccordionState;
11  style?: AccordionStyle;
12  title?: string;
13  content?: string;
14  contentHeight?: number;
15  variant?: AccordionVariant;
16  theme?: Partial<RemocnTheme>;
17  className?: string;
18}
19 
20const CARD_WIDTH = 440;
21 
22interface VariantTokens {
23  bordered: boolean;
24  closedBg: string;
25  openBg: string;
26}
27 
28function variantTokens(
29  variant: AccordionVariant,
30  theme: RemocnTheme,
31): VariantTokens {
32  const variants = {
33    ghost: {
34      bordered: false,
35      closedBg: theme.background,
36      openBg: mixOklch(theme.background, theme.muted, 0.25),
37    },
38    default: {
39      bordered: true,
40      closedBg: theme.background,
41      openBg: mixOklch(theme.background, theme.muted, 0.5),
42    },
43  };
44 
45  return variants[variant] ?? variants.default;
46}
47 
48export interface AccordionStyle {
49  panelHeight: number;
50  panelOpacity: number;
51  chevronRotation: number;
52  background: string;
53}
54 
55export interface AccordionStyleContext {
56  bordered: boolean;
57  closedBg: string;
58  openBg: string;
59  border: string;
60  foreground: string;
61  mutedForeground: string;
62}
63 
64export function accordionStyleContext(
65  variant: AccordionVariant,
66  theme: RemocnTheme,
67): AccordionStyleContext {
68  const tokens = variantTokens(variant, theme);
69  return {
70    bordered: tokens.bordered,
71    closedBg: tokens.closedBg,
72    openBg: tokens.openBg,
73    border: theme.border,
74    foreground: theme.foreground,
75    mutedForeground: theme.mutedForeground,
76  };
77}
78 
79export function accordionStyle(
80  state: AccordionState,
81  ctx: AccordionStyleContext,
82): AccordionStyle {
83  switch (state) {
84    case "opened":
85      return {
86        panelHeight: 1,
87        panelOpacity: 1,
88        chevronRotation: 180,
89        background: ctx.openBg,
90      };
91    default:
92      return {
93        panelHeight: 0,
94        panelOpacity: 0,
95        chevronRotation: 0,
96        background: ctx.closedBg,
97      };
98  }
99}
100 
101export function Accordion({
102  state = "closed",
103  style,
104  title = "Is it accessible?",
105  content = "Yes. It adheres to the WAI-ARIA design pattern.",
106  contentHeight = 64,
107  variant = "default",
108  theme: themeOverride,
109  className,
110}: AccordionProps) {
111  const theme = useRemocnTheme(themeOverride, "light");
112 
113  const ctx = accordionStyleContext(variant, theme);
114// … truncated