@glyphui/ui 0.3.0 → 0.5.0

package/dist/chart.js

@@ -1,457 +1,15 @@
 "use client";
-import { a as themedBorder, s as useComponentConfig, t as tv } from "./tv-DBAGlgXJ.js";
-import { useId } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import * as R from "recharts";
-//#region src/patterns/chart/chart.styles.ts
-const chartStyles = tv({ slots: {
-	root: "m-0 grid min-w-0 gap-3",
-	caption: "grid gap-0.5",
-	title: "text-small font-medium text-foreground",
-	description: "text-caption text-muted-foreground",
-	plot: "min-w-0 [&_.recharts-surface]:overflow-visible [&_.recharts-text]:fill-muted-foreground",
-	legend: "flex flex-wrap items-center gap-x-4 gap-y-1 text-caption text-muted-foreground",
-	legendItem: "inline-flex items-center gap-1.5",
-	swatch: "size-2.5 shrink-0 rounded-[2px]",
-	tooltip: ["grid min-w-36 gap-1.5 rounded-md border-border bg-raised px-3 py-2 text-caption text-foreground shadow-lg", themedBorder],
-	tooltipLabel: "font-medium text-foreground",
-	tooltipRow: "flex items-center gap-2",
-	tooltipName: "flex-1 text-muted-foreground",
-	tooltipValue: "font-mono font-medium tabular-nums text-foreground",
-	center: "pointer-events-none absolute inset-0 flex flex-col items-center justify-center text-center",
-	srOnly: "sr-only"
-} });
-//#endregion
-//#region src/patterns/chart/chart-parts.tsx
-const palette = [
-	"primary",
-	"info",
-	"success",
-	"warning",
-	"danger"
-];
-function resolveColor(color, index) {
-	const value = color ?? palette[index % palette.length];
-	return /^[a-z-]+$/.test(value) ? `var(--color-${value})` : value;
-}
-const defaultFormatter = (value) => typeof value === "number" ? value.toLocaleString() : String(value);
-function useChartParts() {
-	const [, slots] = useComponentConfig("Chart", {});
-	return {
-		s: chartStyles(),
-		slots
-	};
-}
-function ChartLegend({ items }) {
-	const { s, slots } = useChartParts();
-	return /* @__PURE__ */ jsx("ul", {
-		"data-slot": "chart-legend",
-		className: s.legend({ class: slots.legend }),
-		"aria-hidden": "true",
-		children: items.map((item, i) => /* @__PURE__ */ jsxs("li", {
-			className: s.legendItem({ class: slots.legendItem }),
-			children: [/* @__PURE__ */ jsx("span", {
-				className: s.swatch({ class: slots.swatch }),
-				style: { background: item.color }
-			}), item.label]
-		}, i))
-	});
-}
-function ChartTooltipCard({ active, payload, label, formatter, labelFormatter }) {
-	const { s, slots } = useChartParts();
-	if (!active || !payload?.length) return null;
-	return /* @__PURE__ */ jsxs("div", {
-		"data-slot": "chart-tooltip",
-		className: s.tooltip({ class: slots.tooltip }),
-		children: [label !== void 0 && label !== "" && /* @__PURE__ */ jsx("p", {
-			className: s.tooltipLabel({ class: slots.tooltipLabel }),
-			children: labelFormatter ? labelFormatter(label) : label
-		}), payload.map((item, i) => /* @__PURE__ */ jsxs("div", {
-			className: s.tooltipRow({ class: slots.tooltipRow }),
-			children: [
-				/* @__PURE__ */ jsx("span", {
-					className: s.swatch({ class: slots.swatch }),
-					style: { background: item.color ?? item.payload?.fill }
-				}),
-				/* @__PURE__ */ jsx("span", {
-					className: s.tooltipName({ class: slots.tooltipName }),
-					children: String(item.name ?? "")
-				}),
-				/* @__PURE__ */ jsx("span", {
-					className: s.tooltipValue({ class: slots.tooltipValue }),
-					children: formatter(Number(item.value))
-				})
-			]
-		}, i))]
-	});
-}
-/**
-* Wraps every chart in a `<figure>` with a caption and a visually hidden data table,
-* so screen-reader users get the numbers the chart shows.
-*/
-function ChartFrame({ title, description, hideTitle, className, legend, table, children }) {
-	const { s, slots } = useChartParts();
-	const titleId = useId();
-	return /* @__PURE__ */ jsxs("figure", {
-		"data-slot": "chart",
-		"aria-labelledby": titleId,
-		className: s.root({ class: [slots.root, className] }),
-		children: [
-			/* @__PURE__ */ jsxs("figcaption", {
-				className: hideTitle ? s.srOnly() : s.caption({ class: slots.caption }),
-				children: [/* @__PURE__ */ jsx("span", {
-					id: titleId,
-					className: s.title({ class: slots.title }),
-					children: title
-				}), description && /* @__PURE__ */ jsx("span", {
-					className: s.description({ class: slots.description }),
-					children: description
-				})]
-			}),
-			/* @__PURE__ */ jsx("div", {
-				className: s.plot({ class: slots.plot }),
-				"aria-hidden": "true",
-				children
-			}),
-			legend && legend.length > 1 && /* @__PURE__ */ jsx(ChartLegend, { items: legend }),
-			/* @__PURE__ */ jsxs("table", {
-				className: s.srOnly(),
-				children: [
-					/* @__PURE__ */ jsx("caption", { children: title }),
-					/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: table.columns.map((column) => /* @__PURE__ */ jsx("th", {
-						scope: "col",
-						children: column
-					}, column)) }) }),
-					/* @__PURE__ */ jsx("tbody", { children: table.rows.map((row, i) => /* @__PURE__ */ jsx("tr", { children: row.map((cell, j) => j === 0 ? /* @__PURE__ */ jsx("th", {
-						scope: "row",
-						children: cell
-					}, j) : /* @__PURE__ */ jsx("td", { children: cell }, j)) }, i)) })
-				]
-			})
-		]
-	});
-}
-//#endregion
-//#region src/patterns/chart/chart.tsx
-const axisTick = {
-	fill: "var(--color-muted-foreground)",
-	fontSize: 12
-};
-function useCartesian(props) {
-	const { data, index, series, title, valueFormatter = defaultFormatter } = props;
-	const resolved = series.map((item, i) => ({
-		...item,
-		label: item.label ?? item.key,
-		stroke: resolveColor(item.color, i)
-	}));
-	return {
-		resolved,
-		table: {
-			columns: [String(index), ...resolved.map((item) => item.label)],
-			rows: data.map((row) => [String(row[index]), ...resolved.map((item) => valueFormatter(Number(row[item.key])))])
-		},
-		legend: props.showLegend ?? series.length > 1 ? resolved.map((item) => ({
-			label: item.label,
-			color: item.stroke
-		})) : void 0,
-		valueFormatter,
-		title
-	};
-}
-function frameProps(props) {
-	return {
-		title: props.title,
-		description: props.description,
-		hideTitle: props.hideTitle,
-		className: props.className
-	};
-}
-function Axes({ index, showGrid = true, showYAxis = true, valueFormatter }) {
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-		showGrid && /* @__PURE__ */ jsx(R.CartesianGrid, {
-			vertical: false,
-			stroke: "var(--color-border)",
-			strokeDasharray: "3 3"
-		}),
-		/* @__PURE__ */ jsx(R.XAxis, {
-			dataKey: index,
-			tick: axisTick,
-			tickLine: false,
-			axisLine: false,
-			tickMargin: 8,
-			minTickGap: 16
-		}),
-		showYAxis && /* @__PURE__ */ jsx(R.YAxis, {
-			tick: axisTick,
-			tickLine: false,
-			axisLine: false,
-			width: 48,
-			tickFormatter: valueFormatter
-		})
-	] });
-}
-function tooltip(valueFormatter, cursor) {
-	return /* @__PURE__ */ jsx(R.Tooltip, {
-		cursor,
-		content: (p) => /* @__PURE__ */ jsx(ChartTooltipCard, {
-			active: p.active,
-			payload: p.payload,
-			label: p.label,
-			formatter: valueFormatter
-		})
-	});
-}
-/** Trends over time, one line per series. */
-function LineChart(props) {
-	const { resolved, table, legend, valueFormatter } = useCartesian(props);
-	return /* @__PURE__ */ jsx(ChartFrame, {
-		...frameProps(props),
-		legend,
-		table,
-		children: /* @__PURE__ */ jsx(R.ResponsiveContainer, {
-			width: "100%",
-			height: props.height ?? 240,
-			children: /* @__PURE__ */ jsxs(R.LineChart, {
-				data: props.data,
-				margin: {
-					top: 8,
-					right: 8,
-					bottom: 0,
-					left: 0
-				},
-				children: [
-					/* @__PURE__ */ jsx(Axes, {
-						index: props.index,
-						showGrid: props.showGrid,
-						showYAxis: props.showYAxis,
-						valueFormatter
-					}),
-					tooltip(valueFormatter, { stroke: "var(--color-border-strong)" }),
-					resolved.map((item) => /* @__PURE__ */ jsx(R.Line, {
-						dataKey: item.key,
-						name: item.label,
-						type: props.curve ?? "monotone",
-						stroke: item.stroke,
-						strokeWidth: 2,
-						dot: false,
-						activeDot: {
-							r: 4,
-							strokeWidth: 0
-						},
-						isAnimationActive: false
-					}, item.key))
-				]
-			})
-		})
-	});
-}
-/** Trends with filled areas. `stacked` shows how series add up to a total. */
-function AreaChart(props) {
-	const { resolved, table, legend, valueFormatter } = useCartesian(props);
-	const id = useId().replace(/:/g, "");
-	return /* @__PURE__ */ jsx(ChartFrame, {
-		...frameProps(props),
-		legend,
-		table,
-		children: /* @__PURE__ */ jsx(R.ResponsiveContainer, {
-			width: "100%",
-			height: props.height ?? 240,
-			children: /* @__PURE__ */ jsxs(R.AreaChart, {
-				data: props.data,
-				margin: {
-					top: 8,
-					right: 8,
-					bottom: 0,
-					left: 0
-				},
-				children: [
-					/* @__PURE__ */ jsx("defs", { children: resolved.map((item, i) => /* @__PURE__ */ jsxs("linearGradient", {
-						id: `${id}-${i}`,
-						x1: "0",
-						x2: "0",
-						y1: "0",
-						y2: "1",
-						children: [/* @__PURE__ */ jsx("stop", {
-							offset: "0%",
-							stopColor: item.stroke,
-							stopOpacity: .3
-						}), /* @__PURE__ */ jsx("stop", {
-							offset: "100%",
-							stopColor: item.stroke,
-							stopOpacity: 0
-						})]
-					}, item.key)) }),
-					/* @__PURE__ */ jsx(Axes, {
-						index: props.index,
-						showGrid: props.showGrid,
-						showYAxis: props.showYAxis,
-						valueFormatter
-					}),
-					tooltip(valueFormatter, { stroke: "var(--color-border-strong)" }),
-					resolved.map((item, i) => /* @__PURE__ */ jsx(R.Area, {
-						dataKey: item.key,
-						name: item.label,
-						type: "monotone",
-						stroke: item.stroke,
-						strokeWidth: 2,
-						fill: `url(#${id}-${i})`,
-						...props.stacked && { stackId: "stack" },
-						isAnimationActive: false
-					}, item.key))
-				]
-			})
-		})
-	});
-}
-/** Compare values across categories. `stacked` puts series on top of each other. */
-function BarChart(props) {
-	const { resolved, table, legend, valueFormatter } = useCartesian(props);
-	const radius = props.barRadius ?? 3;
-	return /* @__PURE__ */ jsx(ChartFrame, {
-		...frameProps(props),
-		legend,
-		table,
-		children: /* @__PURE__ */ jsx(R.ResponsiveContainer, {
-			width: "100%",
-			height: props.height ?? 240,
-			children: /* @__PURE__ */ jsxs(R.BarChart, {
-				data: props.data,
-				margin: {
-					top: 8,
-					right: 8,
-					bottom: 0,
-					left: 0
-				},
-				children: [
-					/* @__PURE__ */ jsx(Axes, {
-						index: props.index,
-						showGrid: props.showGrid,
-						showYAxis: props.showYAxis,
-						valueFormatter
-					}),
-					tooltip(valueFormatter, {
-						fill: "var(--color-muted)",
-						opacity: .6
-					}),
-					resolved.map((item, i) => /* @__PURE__ */ jsx(R.Bar, {
-						dataKey: item.key,
-						name: item.label,
-						fill: item.stroke,
-						radius: props.stacked && i < resolved.length - 1 ? 0 : [
-							radius,
-							radius,
-							0,
-							0
-						],
-						...props.stacked && { stackId: "stack" },
-						isAnimationActive: false
-					}, item.key))
-				]
-			})
-		})
-	});
-}
-/** Parts of a whole. Best with five or fewer slices. */
-function DonutChart(props) {
-	const { data, category, value, valueFormatter = defaultFormatter, size = 200 } = props;
-	const { s, slots } = useChartParts();
-	const rows = data.map((row) => row);
-	const colors = rows.map((_, i) => resolveColor(props.colors?.[i], i));
-	const table = {
-		columns: [String(category), String(value)],
-		rows: rows.map((row) => [String(row[category]), valueFormatter(Number(row[value]))])
-	};
-	const legend = props.showLegend ?? true ? rows.map((row, i) => ({
-		label: String(row[category]),
-		color: colors[i]
-	})) : void 0;
-	return /* @__PURE__ */ jsx(ChartFrame, {
-		title: props.title,
-		description: props.description,
-		hideTitle: props.hideTitle,
-		className: props.className,
-		legend,
-		table,
-		children: /* @__PURE__ */ jsxs("div", {
-			className: "relative mx-auto",
-			style: {
-				width: size,
-				height: size
-			},
-			children: [/* @__PURE__ */ jsx(R.ResponsiveContainer, {
-				width: "100%",
-				height: "100%",
-				children: /* @__PURE__ */ jsxs(R.PieChart, { children: [tooltip(valueFormatter, false), /* @__PURE__ */ jsx(R.Pie, {
-					data: rows,
-					dataKey: value,
-					nameKey: category,
-					innerRadius: "68%",
-					outerRadius: "100%",
-					paddingAngle: 2,
-					stroke: "var(--color-surface)",
-					strokeWidth: 2,
-					isAnimationActive: false,
-					children: rows.map((_, i) => /* @__PURE__ */ jsx(R.Cell, { fill: colors[i] }, i))
-				})] })
-			}), props.centerLabel && /* @__PURE__ */ jsx("div", {
-				className: s.center({ class: slots.center }),
-				children: props.centerLabel
-			})]
-		})
-	});
-}
-/** A tiny trend line without axes, for stat cards and table cells. */
-function Sparkline({ values, title, color, height = 36, area = true, className }) {
-	const id = useId().replace(/:/g, "");
-	const stroke = resolveColor(color, 0);
-	const data = values.map((v, i) => ({
-		i,
-		v
-	}));
-	return /* @__PURE__ */ jsx("div", {
-		role: "img",
-		"aria-label": title,
-		"data-slot": "sparkline",
-		className,
-		style: { height },
-		children: /* @__PURE__ */ jsx(R.ResponsiveContainer, {
-			width: "100%",
-			height: "100%",
-			children: /* @__PURE__ */ jsxs(R.AreaChart, {
-				data,
-				margin: {
-					top: 2,
-					right: 2,
-					bottom: 2,
-					left: 2
-				},
-				children: [/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", {
-					id,
-					x1: "0",
-					x2: "0",
-					y1: "0",
-					y2: "1",
-					children: [/* @__PURE__ */ jsx("stop", {
-						offset: "0%",
-						stopColor: stroke,
-						stopOpacity: area ? .25 : 0
-					}), /* @__PURE__ */ jsx("stop", {
-						offset: "100%",
-						stopColor: stroke,
-						stopOpacity: 0
-					})]
-				}) }), /* @__PURE__ */ jsx(R.Area, {
-					dataKey: "v",
-					type: "monotone",
-					stroke,
-					strokeWidth: 1.75,
-					fill: `url(#${id})`,
-					isAnimationActive: false,
-					dot: false
-				})]
-			})
-		})
-	});
-}
-//#endregion
-export { AreaChart, BarChart, DonutChart, LineChart, Sparkline, chartStyles };
+import { chartCardStyles, chartStyles } from "./patterns/chart/chart.styles.js";
+import { ChartLegend, ChartTooltipCard } from "./patterns/chart/chart-parts.js";
+import { AreaChart, BarChart, ComposedChart, LineChart } from "./patterns/chart/cartesian.js";
+import { exportChart, serializeChart } from "./patterns/chart/export.js";
+import { ChartCard } from "./patterns/chart/chart-card.js";
+import { FunnelChart } from "./patterns/chart/funnel.js";
+import { Heatmap } from "./patterns/chart/heatmap.js";
+import { DonutChart, PieChart } from "./patterns/chart/pie.js";
+import { Gauge, RadarChart, RadialBarChart } from "./patterns/chart/radial.js";
+import { SankeyChart } from "./patterns/chart/sankey.js";
+import { ScatterChart } from "./patterns/chart/scatter.js";
+import { Sparkline } from "./patterns/chart/sparkline.js";
+import { Treemap } from "./patterns/chart/treemap.js";
+export { AreaChart, BarChart, ChartCard, ChartLegend, ChartTooltipCard, ComposedChart, DonutChart, FunnelChart, Gauge, Heatmap, LineChart, PieChart, RadarChart, RadialBarChart, SankeyChart, ScatterChart, Sparkline, Treemap, chartCardStyles, chartStyles, exportChart, serializeChart };

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

@@ -0,0 +1,15 @@
+import { AccordionVariants } from "./accordion.styles.js";
+import { Accordion } from "radix-ui";
+import { ComponentProps } from "react";
+//#region src/components/accordion/accordion.d.ts
+export type AccordionProps = ComponentProps<typeof Accordion.Root> & AccordionVariants;
+/**
+ * Stacked sections that expand one at a time (`type="single"`, collapsible) or
+ * independently (`type="multiple"`). Good for FAQs and dense settings.
+ */
+declare function Accordion$1(inProps: AccordionProps): import("react").JSX.Element;
+export declare function AccordionItem({ className, ...props }: ComponentProps<typeof Accordion.Item>): import("react").JSX.Element;
+export declare function AccordionTrigger({ className, children, ...props }: ComponentProps<typeof Accordion.Trigger>): import("react").JSX.Element;
+export declare function AccordionContent({ className, children, ...props }: ComponentProps<typeof Accordion.Content>): import("react").JSX.Element;
+//#endregion
+export { Accordion$1 as Accordion };

package/dist/components/accordion/accordion.js

@@ -0,0 +1,69 @@
+"use client";
+import { useComponentConfig } from "../../hooks/use-component-config.js";
+import { ChevronDownIcon } from "../../internal/icons.js";
+import { accordionStyles } from "./accordion.styles.js";
+import { Accordion } from "radix-ui";
+import { createContext, useContext } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/accordion/accordion.tsx
+const AccordionContext = createContext(null);
+function useParts() {
+	return useContext(AccordionContext) ?? {
+		s: accordionStyles(),
+		slots: {}
+	};
+}
+/**
+* Stacked sections that expand one at a time (`type="single"`, collapsible) or
+* independently (`type="multiple"`). Good for FAQs and dense settings.
+*/
+function Accordion$1(inProps) {
+	const [props, slots] = useComponentConfig("Accordion", inProps);
+	const { variant, className, ...rest } = props;
+	const s = accordionStyles({ variant });
+	return /* @__PURE__ */ jsx(AccordionContext.Provider, {
+		value: {
+			s,
+			slots
+		},
+		children: /* @__PURE__ */ jsx(Accordion.Root, {
+			"data-slot": "accordion",
+			className: s.root({ class: [slots.root, className] }),
+			...rest
+		})
+	});
+}
+function AccordionItem({ className, ...props }) {
+	const { s, slots } = useParts();
+	return /* @__PURE__ */ jsx(Accordion.Item, {
+		"data-slot": "accordion-item",
+		className: s.item({ class: [slots.item, className] }),
+		...props
+	});
+}
+function AccordionTrigger({ className, children, ...props }) {
+	const { s, slots } = useParts();
+	return /* @__PURE__ */ jsx(Accordion.Header, {
+		className: s.header({ class: slots.header }),
+		children: /* @__PURE__ */ jsxs(Accordion.Trigger, {
+			"data-slot": "accordion-trigger",
+			className: s.trigger({ class: [slots.trigger, className] }),
+			...props,
+			children: [children, /* @__PURE__ */ jsx(ChevronDownIcon, { className: s.chevron({ class: slots.chevron }) })]
+		})
+	});
+}
+function AccordionContent({ className, children, ...props }) {
+	const { s, slots } = useParts();
+	return /* @__PURE__ */ jsx(Accordion.Content, {
+		"data-slot": "accordion-content",
+		className: s.content({ class: slots.content }),
+		...props,
+		children: /* @__PURE__ */ jsx("div", {
+			className: s.contentInner({ class: [slots.contentInner, className] }),
+			children
+		})
+	});
+}
+//#endregion
+export { Accordion$1 as Accordion, AccordionContent, AccordionItem, AccordionTrigger };

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

@@ -0,0 +1,65 @@
+import { VariantProps } from "../../utils/tv.js";
+import { StylesEntry } from "../../utils/registry.js";
+//#region src/components/accordion/accordion.styles.d.ts
+export declare const accordionStyles: import("tailwind-variants").TVReturnType<{
+  variant: {
+    default: {
+      item: string;
+    };
+    separated: {
+      root: string;
+      item: string[];
+    };
+  };
+}, {
+  root: string;
+  item: string;
+  header: string;
+  trigger: string[];
+  chevron: string;
+  content: string;
+  contentInner: string;
+}, undefined, {
+  variant: {
+    default: {
+      item: string;
+    };
+    separated: {
+      root: string;
+      item: string[];
+    };
+  };
+}, {
+  root: string;
+  item: string;
+  header: string;
+  trigger: string[];
+  chevron: string;
+  content: string;
+  contentInner: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  variant: {
+    default: {
+      item: string;
+    };
+    separated: {
+      root: string;
+      item: string[];
+    };
+  };
+}, {
+  root: string;
+  item: string;
+  header: string;
+  trigger: string[];
+  chevron: string;
+  content: string;
+  contentInner: string;
+}>>;
+export type AccordionVariants = VariantProps<typeof accordionStyles>;
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    Accordion: StylesEntry<typeof accordionStyles>;
+  }
+}
+//#endregion

package/dist/components/accordion/accordion.styles.js

@@ -0,0 +1,30 @@
+"use client";
+import { focusRing, themedBorder, transition } from "../../utils/styles.js";
+import { tv } from "../../utils/tv.js";
+//#region src/components/accordion/accordion.styles.ts
+const accordionStyles = /* @__PURE__ */ tv({
+	slots: {
+		root: "w-full",
+		item: "",
+		header: "flex",
+		trigger: [
+			"group flex flex-1 cursor-pointer items-center justify-between gap-4 rounded-xs py-4 text-left text-body font-medium text-foreground",
+			transition,
+			focusRing,
+			"hover:text-foreground/80 disabled:cursor-not-allowed disabled:opacity-50"
+		],
+		chevron: "size-4 shrink-0 text-faint-foreground transition-transform duration-(--glyph-duration-base) ease-standard group-data-[state=open]:rotate-180",
+		content: "overflow-hidden text-small text-muted-foreground data-[state=open]:animate-collapse-down data-[state=closed]:animate-collapse-up",
+		contentInner: "pb-4"
+	},
+	variants: { variant: {
+		default: { item: "border-b border-border last:border-b-0" },
+		separated: {
+			root: "grid gap-2",
+			item: ["rounded-lg border-border bg-surface px-4 shadow-xs", themedBorder]
+		}
+	} },
+	defaultVariants: { variant: "default" }
+});
+//#endregion
+export { accordionStyles };

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

@@ -0,0 +1,3 @@
+import { AccordionVariants, accordionStyles } from "./accordion.styles.js";
+import { Accordion, AccordionContent, AccordionItem, AccordionProps, AccordionTrigger } from "./accordion.js";
+export { Accordion, AccordionContent, AccordionItem, type AccordionProps, AccordionTrigger, type AccordionVariants, accordionStyles };