@repraze/kernelkit 0.0.0-stage → 0.1.0-alpha.0

package/dist/lib/recipes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"recipes.d.ts","sourceRoot":"","sources":["../../src/lib/recipes.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,wDAAwD;AACxD,eAAO,MAAM,SAAS,2FAA2F,CAAC;AAElH,2CAA2C;AAC3C,eAAO,MAAM,WAAW,gHACyF,CAAC;AAElH,iGAAiG;AACjG,eAAO,MAAM,YAAY,qNAC6L,CAAC;AAEvN,iFAAiF;AACjF,eAAO,MAAM,YAAY,+GACuF,CAAC;AAEjH,oCAAoC;AACpC,eAAO,MAAM,WAAW,yWACkV,CAAC;AAE3W,iFAAiF;AACjF,eAAO,MAAM,QAAQ,gcAC4a,CAAC;AAElc,0CAA0C;AAC1C,eAAO,MAAM,SAAS,0DAA0D,CAAC;AAEjF,wCAAwC;AACxC,eAAO,MAAM,aAAa,8BAA8B,CAAC;AAEzD,8DAA8D;AAC9D,eAAO,MAAM,QAAQ,0LACsK,CAAC;AAE5L,4EAA4E;AAC5E,eAAO,MAAM,OAAO,4CAA4C,CAAC;AAEjE,iHAAiH;AACjH,eAAO,MAAM,eAAe,kCAAkC,CAAC;AAE/D,yGAAyG;AACzG,eAAO,MAAM,WAAW,gFAAgF,CAAC"}

package/dist/lib/recipes.js

@@ -0,0 +1,30 @@
+/**
+ * Shared class recipes (GUIDELINES.md §3-§6). Components compose these so every control family
+ * shares one focus ring, one field surface, one popup surface and one list-item look. Plain strings:
+ * `cn()` can still override any part from `className`.
+ */
+/** Keyboard focus ring for standalone controls (§6). */
+export const focusRing = "outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50";
+/** aria-invalid look for controls (§6). */
+export const invalidRing = "aria-invalid:border-danger aria-invalid:ring-3 aria-invalid:ring-danger/20 dark:aria-invalid:ring-danger/40";
+/** Text-entry surface: input, textarea, select trigger, input-group, combobox chips (§4, §6). */
+export const fieldSurface = "rounded-lg border border-input bg-field transition-[color,background-color,border-color,box-shadow] placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:bg-field-disabled disabled:opacity-50";
+/** Floating panel: popover, menus, select/combobox list, hover card (§1, §3). */
+export const popupSurface = "rounded-lg border border-border bg-popover text-popover-foreground shadow-lg shadow-(color:--shadow-color)";
+/** Popup open/close motion (§6). */
+export const popupMotion = "origin-(--transform-origin) duration-100 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 motion-reduce:animate-none";
+/** Row inside a popup or list: menu item, select item, command item (§4, §6). */
+export const listItem = "relative flex min-h-8 cursor-default items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-highlighted:[&_svg:not([class*='text-'])]:text-accent-foreground";
+/** Group label inside a popup or list. */
+export const listLabel = "px-2 py-1.5 text-xs font-medium text-muted-foreground";
+/** Separator inside a popup or list. */
+export const listSeparator = "-mx-1 my-1 h-px bg-border";
+/** Modal backdrop for dialog, alert dialog, sheet, drawer. */
+export const backdrop = "fixed inset-0 isolate z-50 bg-black/40 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0"; // lint-design-ignore: scrim is not a role
+/** Title in cards, dialogs, sheets, popovers, empty states, alerts (§5). */
+export const heading = "font-heading font-medium tracking-tight";
+/** Empty track / placeholder: progress & meter tracks, skeletons, unlit segments. bg-muted vanishes on cards. */
+export const placeholderFill = "bg-foreground/10 hc:bg-border";
+/** Selected row (table, data table, code line, list): accent tint + 2px inset primary indicator (§6). */
+export const selectedRow = "bg-accent text-accent-foreground shadow-[inset_2px_0_0_var(--primary-text)]";
+//# sourceMappingURL=recipes.js.map

package/dist/lib/recipes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"recipes.js","sourceRoot":"","sources":["../../src/lib/recipes.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,wDAAwD;AACxD,MAAM,CAAC,MAAM,SAAS,GAAG,wFAAwF,CAAC;AAElH,2CAA2C;AAC3C,MAAM,CAAC,MAAM,WAAW,GACpB,6GAA6G,CAAC;AAElH,iGAAiG;AACjG,MAAM,CAAC,MAAM,YAAY,GACrB,kNAAkN,CAAC;AAEvN,iFAAiF;AACjF,MAAM,CAAC,MAAM,YAAY,GACrB,4GAA4G,CAAC;AAEjH,oCAAoC;AACpC,MAAM,CAAC,MAAM,WAAW,GACpB,sWAAsW,CAAC;AAE3W,iFAAiF;AACjF,MAAM,CAAC,MAAM,QAAQ,GACjB,6bAA6b,CAAC;AAElc,0CAA0C;AAC1C,MAAM,CAAC,MAAM,SAAS,GAAG,uDAAuD,CAAC;AAEjF,wCAAwC;AACxC,MAAM,CAAC,MAAM,aAAa,GAAG,2BAA2B,CAAC;AAEzD,8DAA8D;AAC9D,MAAM,CAAC,MAAM,QAAQ,GACjB,uLAAuL,CAAC,CAAC,0CAA0C;AAEvO,4EAA4E;AAC5E,MAAM,CAAC,MAAM,OAAO,GAAG,yCAAyC,CAAC;AAEjE,iHAAiH;AACjH,MAAM,CAAC,MAAM,eAAe,GAAG,+BAA+B,CAAC;AAE/D,yGAAyG;AACzG,MAAM,CAAC,MAAM,WAAW,GAAG,6EAA6E,CAAC"}

package/dist/lib/utils.d.ts

@@ -0,0 +1,2 @@
+export { cn } from "cn";
+//# sourceMappingURL=utils.d.ts.map

package/dist/lib/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,EAAE,EAAC,MAAM,IAAI,CAAC"}

package/dist/lib/utils.js

@@ -0,0 +1,2 @@
+export { cn } from "cn";
+//# sourceMappingURL=utils.js.map

package/dist/lib/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,EAAE,EAAC,MAAM,IAAI,CAAC"}

package/dist/provider/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./theme";
+export * from "./theme-provider";
+//# sourceMappingURL=index.d.ts.map

package/dist/provider/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/provider/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,kBAAkB,CAAC"}

package/dist/provider/index.js

@@ -0,0 +1,3 @@
+export * from "./theme";
+export * from "./theme-provider";
+//# sourceMappingURL=index.js.map

package/dist/provider/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/provider/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,kBAAkB,CAAC"}

package/dist/provider/theme-provider.d.ts

@@ -0,0 +1,47 @@
+import { type ReactNode } from "react";
+import { type ResolvedMode, type ThemeScriptOptions, type ThemeState } from "./theme";
+export interface ThemeContextValue extends ThemeState {
+    /** `mode` with "system" resolved against the OS preference. */
+    resolvedMode: ResolvedMode;
+    setTheme: (patch: Partial<ThemeState>) => void;
+    setMode: (mode: ThemeState["mode"]) => void;
+    setContrast: (contrast: ThemeState["contrast"]) => void;
+    setAccent: (accent: ThemeState["accent"]) => void;
+    setRadius: (radius: ThemeState["radius"]) => void;
+}
+export interface ThemeProviderProps {
+    children?: ReactNode;
+    /** Initial values when nothing is stored. Default: system mode, normal contrast, pink, md radius. */
+    defaultTheme?: Partial<ThemeState>;
+    /** localStorage key; `null` disables persistence. */
+    storageKey?: string | null;
+    /** Force values regardless of storage/user choice (e.g. a site that is always red). */
+    forcedTheme?: Partial<ThemeState>;
+}
+/**
+ * Owns the app theme: applies `.light/.dark`, `.hc`, `.accent-*`, `.radius-*` to <html>, persists the
+ * choice and syncs it across tabs. Pair with <ThemeScript /> in <head> to avoid a flash on load.
+ */
+export declare function ThemeProvider({ children, defaultTheme, storageKey, forcedTheme, }: ThemeProviderProps): import("react").JSX.Element;
+/** Current theme and setters. Must be used under <ThemeProvider>. */
+export declare function useTheme(): ThemeContextValue;
+/** Renders the pre-paint script. Place in <head> (Next.js: in the root layout). */
+export declare function ThemeScript({ nonce, ...options }: ThemeScriptOptions & {
+    nonce?: string;
+}): import("react").JSX.Element;
+export interface ThemeScopeProps extends Omit<React.ComponentProps<"div">, "children"> {
+    children?: ReactNode;
+    /** Values not given inherit from the surrounding <ThemeProvider> (or the defaults). */
+    mode?: ResolvedMode;
+    contrast?: ThemeState["contrast"];
+    accent?: ThemeState["accent"];
+    radius?: ThemeState["radius"];
+}
+/**
+ * A subtree with its own theme (previews, side-by-side comparisons). Overlays opened inside portal into
+ * the scope, so they keep its colors and radius.
+ */
+export declare function ThemeScope({ mode, contrast, accent, radius, className, children, ...props }: ThemeScopeProps): import("react").JSX.Element;
+/** Container for `*.Portal` parts: the nearest ThemeScope's portal root, else document.body. */
+export declare function usePortalContainer(): HTMLElement | undefined;
+//# sourceMappingURL=theme-provider.d.ts.map

package/dist/provider/theme-provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-provider.d.ts","sourceRoot":"","sources":["../../src/provider/theme-provider.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEH,KAAK,SAAS,EAQjB,MAAM,OAAO,CAAC;AAEf,OAAO,EAIH,KAAK,YAAY,EAIjB,KAAK,kBAAkB,EACvB,KAAK,UAAU,EAClB,MAAM,SAAS,CAAC;AAEjB,MAAM,WAAW,iBAAkB,SAAQ,UAAU;IACjD,+DAA+D;IAC/D,YAAY,EAAE,YAAY,CAAC;IAC3B,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC;IAC/C,OAAO,EAAE,CAAC,IAAI,EAAE,UAAU,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;IAC5C,WAAW,EAAE,CAAC,QAAQ,EAAE,UAAU,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC;IACxD,SAAS,EAAE,CAAC,MAAM,EAAE,UAAU,CAAC,QAAQ,CAAC,KAAK,IAAI,CAAC;IAClD,SAAS,EAAE,CAAC,MAAM,EAAE,UAAU,CAAC,QAAQ,CAAC,KAAK,IAAI,CAAC;CACrD;AAoCD,MAAM,WAAW,kBAAkB;IAC/B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,qGAAqG;IACrG,YAAY,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;IACnC,qDAAqD;IACrD,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,uFAAuF;IACvF,WAAW,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;CACrC;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAC1B,QAAQ,EACR,YAAY,EACZ,UAAgC,EAChC,WAAW,GACd,EAAE,kBAAkB,+BAkEpB;AAED,qEAAqE;AACrE,wBAAgB,QAAQ,IAAI,iBAAiB,CAM5C;AAED,mFAAmF;AACnF,wBAAgB,WAAW,CAAC,EAAC,KAAK,EAAE,GAAG,OAAO,EAAC,EAAE,kBAAkB,GAAG;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAC,+BAErF;AAED,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IAClF,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,uFAAuF;IACvF,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,QAAQ,CAAC,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC;IAClC,MAAM,CAAC,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC;IAC9B,MAAM,CAAC,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC;CACjC;AAED;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAC,EAAE,eAAe,+BAoB1G;AAED,gGAAgG;AAChG,wBAAgB,kBAAkB,IAAI,WAAW,GAAG,SAAS,CAE5D"}

package/dist/provider/theme-provider.js

@@ -0,0 +1,118 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useState, useSyncExternalStore, } from "react";
+import { applyTheme, DEFAULT_STORAGE_KEY, DEFAULT_THEME, sanitizeTheme, themeClassName, themeScript, } from "./theme";
+const ThemeContext = createContext(null);
+/** Element overlays portal into, so popups inside a ThemeScope keep its theme. */
+const PortalContainerContext = createContext(null);
+const useIsoLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+const DARK_QUERY = "(prefers-color-scheme: dark)";
+function subscribeSystem(onChange) {
+    const mq = window.matchMedia(DARK_QUERY);
+    mq.addEventListener("change", onChange);
+    return () => mq.removeEventListener("change", onChange);
+}
+function useSystemMode() {
+    return useSyncExternalStore(subscribeSystem, () => (window.matchMedia(DARK_QUERY).matches ? "dark" : "light"), () => "light");
+}
+function readStored(key, fallback) {
+    if (typeof window === "undefined") {
+        return fallback;
+    }
+    try {
+        return sanitizeTheme(JSON.parse(window.localStorage.getItem(key) ?? "null"), fallback);
+    }
+    catch {
+        return fallback;
+    }
+}
+/**
+ * Owns the app theme: applies `.light/.dark`, `.hc`, `.accent-*`, `.radius-*` to <html>, persists the
+ * choice and syncs it across tabs. Pair with <ThemeScript /> in <head> to avoid a flash on load.
+ */
+export function ThemeProvider({ children, defaultTheme, storageKey = DEFAULT_STORAGE_KEY, forcedTheme, }) {
+    const fallback = useMemo(() => ({ ...DEFAULT_THEME, ...defaultTheme }), [defaultTheme?.mode, defaultTheme?.contrast, defaultTheme?.accent, defaultTheme?.radius]);
+    // Server and first client render use the defaults; the stored value lands in a layout effect
+    // (the pre-paint script has already put the right classes on <html>, so nothing flashes).
+    const [stored, setStored] = useState(fallback);
+    useIsoLayoutEffect(() => {
+        if (storageKey) {
+            setStored(readStored(storageKey, fallback));
+        }
+    }, [storageKey, fallback]);
+    useEffect(() => {
+        if (!storageKey) {
+            return;
+        }
+        const onStorage = (e) => {
+            if (e.key === storageKey) {
+                setStored(readStored(storageKey, fallback));
+            }
+        };
+        window.addEventListener("storage", onStorage);
+        return () => window.removeEventListener("storage", onStorage);
+    }, [storageKey, fallback]);
+    const theme = useMemo(() => ({ ...stored, ...forcedTheme }), [stored, forcedTheme]);
+    const system = useSystemMode();
+    const resolvedMode = theme.mode === "system" ? system : theme.mode;
+    useIsoLayoutEffect(() => {
+        applyTheme(document.documentElement, { ...theme, mode: resolvedMode });
+    }, [theme.contrast, theme.accent, theme.radius, resolvedMode]);
+    const setTheme = useCallback((patch) => {
+        setStored((prev) => {
+            const next = sanitizeTheme({ ...prev, ...patch }, fallback);
+            if (storageKey) {
+                try {
+                    window.localStorage.setItem(storageKey, JSON.stringify(next));
+                }
+                catch {
+                    // storage blocked (private mode, quota): keep the in-memory choice
+                }
+            }
+            return next;
+        });
+    }, [storageKey, fallback]);
+    const value = useMemo(() => ({
+        ...theme,
+        resolvedMode,
+        setTheme,
+        setMode: (mode) => setTheme({ mode }),
+        setContrast: (contrast) => setTheme({ contrast }),
+        setAccent: (accent) => setTheme({ accent }),
+        setRadius: (radius) => setTheme({ radius }),
+    }), [theme, resolvedMode, setTheme]);
+    return _jsx(ThemeContext.Provider, { value: value, children: children });
+}
+/** Current theme and setters. Must be used under <ThemeProvider>. */
+export function useTheme() {
+    const ctx = useContext(ThemeContext);
+    if (!ctx) {
+        throw new Error("useTheme must be used within <ThemeProvider>");
+    }
+    return ctx;
+}
+/** Renders the pre-paint script. Place in <head> (Next.js: in the root layout). */
+export function ThemeScript({ nonce, ...options }) {
+    return _jsx("script", { nonce: nonce, suppressHydrationWarning: true, dangerouslySetInnerHTML: { __html: themeScript(options) } });
+}
+/**
+ * A subtree with its own theme (previews, side-by-side comparisons). Overlays opened inside portal into
+ * the scope, so they keep its colors and radius.
+ */
+export function ThemeScope({ mode, contrast, accent, radius, className, children, ...props }) {
+    const parent = useContext(ThemeContext);
+    const [container, setContainer] = useState(null);
+    const theme = {
+        mode: mode ?? parent?.resolvedMode ?? "light",
+        contrast: contrast ?? parent?.contrast ?? DEFAULT_THEME.contrast,
+        accent: accent ?? parent?.accent ?? DEFAULT_THEME.accent,
+        radius: radius ?? parent?.radius ?? DEFAULT_THEME.radius,
+    };
+    const classes = themeClassName(theme);
+    return (_jsxs("div", { "data-slot": "theme-scope", className: [classes, "bg-background text-foreground", className].filter(Boolean).join(" "), ...props, children: [_jsx(PortalContainerContext.Provider, { value: container, children: children }), _jsx("div", { ref: setContainer, "data-slot": "theme-scope-portal", className: classes })] }));
+}
+/** Container for `*.Portal` parts: the nearest ThemeScope's portal root, else document.body. */
+export function usePortalContainer() {
+    return useContext(PortalContainerContext) ?? undefined;
+}
+//# sourceMappingURL=theme-provider.js.map

package/dist/provider/theme-provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-provider.js","sourceRoot":"","sources":["../../src/provider/theme-provider.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EACH,aAAa,EAEb,WAAW,EACX,UAAU,EACV,SAAS,EACT,eAAe,EACf,OAAO,EACP,QAAQ,EACR,oBAAoB,GACvB,MAAM,OAAO,CAAC;AAEf,OAAO,EACH,UAAU,EACV,mBAAmB,EACnB,aAAa,EAEb,aAAa,EACb,cAAc,EACd,WAAW,GAGd,MAAM,SAAS,CAAC;AAYjB,MAAM,YAAY,GAAG,aAAa,CAA2B,IAAI,CAAC,CAAC;AAEnE,kFAAkF;AAClF,MAAM,sBAAsB,GAAG,aAAa,CAAqB,IAAI,CAAC,CAAC;AAEvE,MAAM,kBAAkB,GAAG,OAAO,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC;AAEvF,MAAM,UAAU,GAAG,8BAA8B,CAAC;AAElD,SAAS,eAAe,CAAC,QAAoB;IACzC,MAAM,EAAE,GAAG,MAAM,CAAC,UAAU,CAAC,UAAU,CAAC,CAAC;IACzC,EAAE,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;IACxC,OAAO,GAAG,EAAE,CAAC,EAAE,CAAC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;AAC5D,CAAC;AAED,SAAS,aAAa;IAClB,OAAO,oBAAoB,CACvB,eAAe,EACf,GAAG,EAAE,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,UAAU,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,EAChE,GAAG,EAAE,CAAC,OAAO,CAChB,CAAC;AACN,CAAC;AAED,SAAS,UAAU,CAAC,GAAW,EAAE,QAAoB;IACjD,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;QAChC,OAAO,QAAQ,CAAC;IACpB,CAAC;IACD,IAAI,CAAC;QACD,OAAO,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,MAAM,CAAC,EAAE,QAAQ,CAAC,CAAC;IAC3F,CAAC;IAAC,MAAM,CAAC;QACL,OAAO,QAAQ,CAAC;IACpB,CAAC;AACL,CAAC;AAYD;;;GAGG;AACH,MAAM,UAAU,aAAa,CAAC,EAC1B,QAAQ,EACR,YAAY,EACZ,UAAU,GAAG,mBAAmB,EAChC,WAAW,GACM;IACjB,MAAM,QAAQ,GAAG,OAAO,CACpB,GAAG,EAAE,CAAC,CAAC,EAAC,GAAG,aAAa,EAAE,GAAG,YAAY,EAAC,CAAC,EAC3C,CAAC,YAAY,EAAE,IAAI,EAAE,YAAY,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,CAAC,CAC3F,CAAC;IACF,6FAA6F;IAC7F,0FAA0F;IAC1F,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAa,QAAQ,CAAC,CAAC;IAC3D,kBAAkB,CAAC,GAAG,EAAE;QACpB,IAAI,UAAU,EAAE,CAAC;YACb,SAAS,CAAC,UAAU,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC,CAAC;QAChD,CAAC;IACL,CAAC,EAAE,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE3B,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,UAAU,EAAE,CAAC;YACd,OAAO;QACX,CAAC;QACD,MAAM,SAAS,GAAG,CAAC,CAAe,EAAE,EAAE;YAClC,IAAI,CAAC,CAAC,GAAG,KAAK,UAAU,EAAE,CAAC;gBACvB,SAAS,CAAC,UAAU,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC,CAAC;YAChD,CAAC;QACL,CAAC,CAAC;QACF,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QAC9C,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;IAClE,CAAC,EAAE,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE3B,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,EAAC,GAAG,MAAM,EAAE,GAAG,WAAW,EAAC,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC;IAClF,MAAM,MAAM,GAAG,aAAa,EAAE,CAAC;IAC/B,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC;IAEnE,kBAAkB,CAAC,GAAG,EAAE;QACpB,UAAU,CAAC,QAAQ,CAAC,eAAe,EAAE,EAAC,GAAG,KAAK,EAAE,IAAI,EAAE,YAAY,EAAC,CAAC,CAAC;IACzE,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,EAAE,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC,CAAC;IAE/D,MAAM,QAAQ,GAAG,WAAW,CACxB,CAAC,KAA0B,EAAE,EAAE;QAC3B,SAAS,CAAC,CAAC,IAAI,EAAE,EAAE;YACf,MAAM,IAAI,GAAG,aAAa,CAAC,EAAC,GAAG,IAAI,EAAE,GAAG,KAAK,EAAC,EAAE,QAAQ,CAAC,CAAC;YAC1D,IAAI,UAAU,EAAE,CAAC;gBACb,IAAI,CAAC;oBACD,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,UAAU,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC;gBAClE,CAAC;gBAAC,MAAM,CAAC;oBACL,mEAAmE;gBACvE,CAAC;YACL,CAAC;YACD,OAAO,IAAI,CAAC;QAChB,CAAC,CAAC,CAAC;IACP,CAAC,EACD,CAAC,UAAU,EAAE,QAAQ,CAAC,CACzB,CAAC;IAEF,MAAM,KAAK,GAAG,OAAO,CACjB,GAAG,EAAE,CAAC,CAAC;QACH,GAAG,KAAK;QACR,YAAY;QACZ,QAAQ;QACR,OAAO,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAC,IAAI,EAAC,CAAC;QACnC,WAAW,EAAE,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAC,QAAQ,EAAC,CAAC;QAC/C,SAAS,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAC,MAAM,EAAC,CAAC;QACzC,SAAS,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAC,MAAM,EAAC,CAAC;KAC5C,CAAC,EACF,CAAC,KAAK,EAAE,YAAY,EAAE,QAAQ,CAAC,CAClC,CAAC;IAEF,OAAO,KAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YAAG,QAAQ,GAAyB,CAAC;AACnF,CAAC;AAED,qEAAqE;AACrE,MAAM,UAAU,QAAQ;IACpB,MAAM,GAAG,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IACrC,IAAI,CAAC,GAAG,EAAE,CAAC;QACP,MAAM,IAAI,KAAK,CAAC,8CAA8C,CAAC,CAAC;IACpE,CAAC;IACD,OAAO,GAAG,CAAC;AACf,CAAC;AAED,mFAAmF;AACnF,MAAM,UAAU,WAAW,CAAC,EAAC,KAAK,EAAE,GAAG,OAAO,EAAwC;IAClF,OAAO,iBAAQ,KAAK,EAAE,KAAK,EAAE,wBAAwB,QAAC,uBAAuB,EAAE,EAAC,MAAM,EAAE,WAAW,CAAC,OAAO,CAAC,EAAC,GAAI,CAAC;AACtH,CAAC;AAWD;;;GAGG;AACH,MAAM,UAAU,UAAU,CAAC,EAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAkB;IACvG,MAAM,MAAM,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IACxC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAwB,IAAI,CAAC,CAAC;IACxE,MAAM,KAAK,GAAG;QACV,IAAI,EAAE,IAAI,IAAI,MAAM,EAAE,YAAY,IAAI,OAAO;QAC7C,QAAQ,EAAE,QAAQ,IAAI,MAAM,EAAE,QAAQ,IAAI,aAAa,CAAC,QAAQ;QAChE,MAAM,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,IAAI,aAAa,CAAC,MAAM;QACxD,MAAM,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,IAAI,aAAa,CAAC,MAAM;KAC3D,CAAC;IACF,MAAM,OAAO,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;IACtC,OAAO,CACH,4BACc,aAAa,EACvB,SAAS,EAAE,CAAC,OAAO,EAAE,+BAA+B,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,KACtF,KAAK,aAET,KAAC,sBAAsB,CAAC,QAAQ,IAAC,KAAK,EAAE,SAAS,YAAG,QAAQ,GAAmC,EAC/F,cAAK,GAAG,EAAE,YAAY,eAAY,oBAAoB,EAAC,SAAS,EAAE,OAAO,GAAI,IAC3E,CACT,CAAC;AACN,CAAC;AAED,gGAAgG;AAChG,MAAM,UAAU,kBAAkB;IAC9B,OAAO,UAAU,CAAC,sBAAsB,CAAC,IAAI,SAAS,CAAC;AAC3D,CAAC"}

package/dist/provider/theme.d.ts

@@ -0,0 +1,42 @@
+/** Theme model shared by the provider, the pre-paint script and ThemeScope. No React here. */
+export declare const MODES: readonly ["system", "light", "dark"];
+export declare const CONTRASTS: readonly ["normal", "high"];
+/** TermiColor accents (same names and order as @repraze/termicolor's ACCENTS). */
+export declare const ACCENTS: readonly ["red", "orange", "yellow", "green", "cyan", "blue", "purple", "pink"];
+export declare const RADII: readonly ["none", "sm", "md", "lg", "xl"];
+export type Mode = (typeof MODES)[number];
+export type ResolvedMode = Exclude<Mode, "system">;
+export type Contrast = (typeof CONTRASTS)[number];
+export type Accent = (typeof ACCENTS)[number];
+export type Radius = (typeof RADII)[number];
+export interface ThemeState {
+    mode: Mode;
+    contrast: Contrast;
+    accent: Accent;
+    radius: Radius;
+}
+export declare const DEFAULT_THEME: ThemeState;
+export declare const DEFAULT_STORAGE_KEY = "kernelkit-theme";
+/** Keep only known values, falling back per field (storage may hold stale or hand-edited JSON). */
+export declare function sanitizeTheme(value: unknown, fallback: ThemeState): ThemeState;
+/** Class toggles for a theme scope: .light/.dark, .hc, .accent-<name>, .radius-<size>. */
+export declare function themeClasses(theme: Omit<ThemeState, "mode"> & {
+    mode: ResolvedMode;
+}): Record<string, boolean>;
+/** Space-separated class string for a resolved theme (for SSR markup and ThemeScope). */
+export declare function themeClassName(theme: Omit<ThemeState, "mode"> & {
+    mode: ResolvedMode;
+}): string;
+export declare function applyTheme(el: Element, theme: Omit<ThemeState, "mode"> & {
+    mode: ResolvedMode;
+}): void;
+export interface ThemeScriptOptions {
+    storageKey?: string;
+    defaults?: Partial<ThemeState>;
+}
+/**
+ * Inline script source that applies the stored theme to <html> before first paint. Put it in <head>
+ * (or use <ThemeScript />). Self-contained: it can't import anything, so it repeats the class logic.
+ */
+export declare function themeScript({ storageKey, defaults }?: ThemeScriptOptions): string;
+//# sourceMappingURL=theme.d.ts.map

package/dist/provider/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/provider/theme.ts"],"names":[],"mappings":"AAAA,8FAA8F;AAE9F,eAAO,MAAM,KAAK,sCAAuC,CAAC;AAC1D,eAAO,MAAM,SAAS,6BAA8B,CAAC;AACrD,kFAAkF;AAClF,eAAO,MAAM,OAAO,iFAAkF,CAAC;AACvG,eAAO,MAAM,KAAK,2CAA4C,CAAC;AAE/D,MAAM,MAAM,IAAI,GAAG,CAAC,OAAO,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC;AAC1C,MAAM,MAAM,YAAY,GAAG,OAAO,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;AACnD,MAAM,MAAM,QAAQ,GAAG,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;AAClD,MAAM,MAAM,MAAM,GAAG,CAAC,OAAO,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC;AAC9C,MAAM,MAAM,MAAM,GAAG,CAAC,OAAO,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC;AAE5C,MAAM,WAAW,UAAU;IACvB,IAAI,EAAE,IAAI,CAAC;IACX,QAAQ,EAAE,QAAQ,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,aAAa,EAAE,UAA+E,CAAC;AAC5G,eAAO,MAAM,mBAAmB,oBAAoB,CAAC;AAErD,mGAAmG;AACnG,wBAAgB,aAAa,CAAC,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,GAAG,UAAU,CAU9E;AAED,0FAA0F;AAC1F,wBAAgB,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,MAAM,CAAC,GAAG;IAAC,IAAI,EAAE,YAAY,CAAA;CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAQ5G;AAED,yFAAyF;AACzF,wBAAgB,cAAc,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,MAAM,CAAC,GAAG;IAAC,IAAI,EAAE,YAAY,CAAA;CAAC,GAAG,MAAM,CAK7F;AAED,wBAAgB,UAAU,CAAC,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,MAAM,CAAC,GAAG;IAAC,IAAI,EAAE,YAAY,CAAA;CAAC,QAK7F;AAED,MAAM,WAAW,kBAAkB;IAC/B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;CAClC;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EAAC,UAAgC,EAAE,QAAQ,EAAC,GAAE,kBAAuB,GAAG,MAAM,CAUzG"}

package/dist/provider/theme.js

@@ -0,0 +1,58 @@
+/** Theme model shared by the provider, the pre-paint script and ThemeScope. No React here. */
+export const MODES = ["system", "light", "dark"];
+export const CONTRASTS = ["normal", "high"];
+/** TermiColor accents (same names and order as @repraze/termicolor's ACCENTS). */
+export const ACCENTS = ["red", "orange", "yellow", "green", "cyan", "blue", "purple", "pink"];
+export const RADII = ["none", "sm", "md", "lg", "xl"];
+export const DEFAULT_THEME = { mode: "system", contrast: "normal", accent: "pink", radius: "md" };
+export const DEFAULT_STORAGE_KEY = "kernelkit-theme";
+/** Keep only known values, falling back per field (storage may hold stale or hand-edited JSON). */
+export function sanitizeTheme(value, fallback) {
+    const v = (value && typeof value === "object" ? value : {});
+    const pick = (list, key) => list.includes(v[key]) ? v[key] : fallback[key];
+    return {
+        mode: pick(MODES, "mode"),
+        contrast: pick(CONTRASTS, "contrast"),
+        accent: pick(ACCENTS, "accent"),
+        radius: pick(RADII, "radius"),
+    };
+}
+/** Class toggles for a theme scope: .light/.dark, .hc, .accent-<name>, .radius-<size>. */
+export function themeClasses(theme) {
+    return {
+        light: theme.mode === "light",
+        dark: theme.mode === "dark",
+        hc: theme.contrast === "high",
+        ...Object.fromEntries(ACCENTS.map((a) => [`accent-${a}`, a === theme.accent])),
+        ...Object.fromEntries(RADII.map((r) => [`radius-${r}`, r === theme.radius])),
+    };
+}
+/** Space-separated class string for a resolved theme (for SSR markup and ThemeScope). */
+export function themeClassName(theme) {
+    return Object.entries(themeClasses(theme))
+        .filter(([, on]) => on)
+        .map(([name]) => name)
+        .join(" ");
+}
+export function applyTheme(el, theme) {
+    for (const [name, on] of Object.entries(themeClasses(theme))) {
+        el.classList.toggle(name, on);
+    }
+    el.style.colorScheme = theme.mode;
+}
+/**
+ * Inline script source that applies the stored theme to <html> before first paint. Put it in <head>
+ * (or use <ThemeScript />). Self-contained: it can't import anything, so it repeats the class logic.
+ */
+export function themeScript({ storageKey = DEFAULT_STORAGE_KEY, defaults } = {}) {
+    const d = { ...DEFAULT_THEME, ...defaults };
+    const lists = { mode: MODES, contrast: CONTRASTS, accent: ACCENTS, radius: RADII };
+    return `(function(){try{var k=${JSON.stringify(storageKey)},d=${JSON.stringify(d)},l=${JSON.stringify(lists)},s={};
+try{s=JSON.parse(localStorage.getItem(k))||{}}catch(e){}
+var t={};for(var f in l){t[f]=l[f].indexOf(s[f])>=0?s[f]:d[f]}
+var m=t.mode==="system"?(matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"):t.mode;
+var c=document.documentElement.classList;c.toggle("light",m==="light");c.toggle("dark",m==="dark");c.toggle("hc",t.contrast==="high");
+l.accent.forEach(function(a){c.toggle("accent-"+a,a===t.accent)});l.radius.forEach(function(r){c.toggle("radius-"+r,r===t.radius)});
+document.documentElement.style.colorScheme=m}catch(e){}})();`;
+}
+//# sourceMappingURL=theme.js.map

package/dist/provider/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","sourceRoot":"","sources":["../../src/provider/theme.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,146 @@
 {
-  "name": "@repraze/kernelkit",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+    "name": "@repraze/kernelkit",
+    "version": "0.1.0-alpha.0",
+    "description": "Modern, techy React components: every shadcn component on Base UI, Tailwind v4 and cva, themed by TermiColor.",
+    "keywords": [
+        "react",
+        "components",
+        "ui",
+        "shadcn",
+        "base-ui",
+        "tailwindcss",
+        "design-system",
+        "termicolor"
+    ],
+    "homepage": "https://repraze.github.io/kernelkit/",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/repraze/kernelkit.git",
+        "directory": "packages/kernelkit"
+    },
+    "bugs": "https://github.com/repraze/kernelkit/issues",
+    "author": "Thomas Dubosc (https://repraze.com)",
+    "license": "MIT",
+    "type": "module",
+    "sideEffects": [
+        "*.css"
+    ],
+    "exports": {
+        "./components/*": {
+            "@repraze/source": "./src/components/*.tsx",
+            "types": "./dist/components/*.d.ts",
+            "default": "./dist/components/*.js"
+        },
+        "./hooks/*": {
+            "@repraze/source": "./src/hooks/*.ts",
+            "types": "./dist/hooks/*.d.ts",
+            "default": "./dist/hooks/*.js"
+        },
+        "./lib/highlighter": {
+            "@repraze/source": "./src/lib/highlighter.tsx",
+            "types": "./dist/lib/highlighter.d.ts",
+            "default": "./dist/lib/highlighter.js"
+        },
+        "./lib/*": {
+            "@repraze/source": "./src/lib/*.ts",
+            "types": "./dist/lib/*.d.ts",
+            "default": "./dist/lib/*.js"
+        },
+        "./provider": {
+            "@repraze/source": "./src/provider/index.ts",
+            "types": "./dist/provider/index.d.ts",
+            "default": "./dist/provider/index.js"
+        },
+        "./theme": {
+            "@repraze/source": "./src/provider/theme.ts",
+            "types": "./dist/provider/theme.d.ts",
+            "default": "./dist/provider/theme.js"
+        },
+        "./styles.css": "./src/styles/kernelkit.css",
+        "./package.json": "./package.json"
+    },
+    "files": [
+        "dist",
+        "src",
+        "README.md"
+    ],
+    "scripts": {
+        "build": "rm -rf dist && tsc -p tsconfig.build.json",
+        "typecheck": "tsc --noEmit -p ."
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "peerDependencies": {
+        "react": ">=19",
+        "react-dom": ">=19",
+        "recharts": "^3.8.0",
+        "shiki": "^4.6.0",
+        "embla-carousel-react": "^8.6.0",
+        "cmdk": "^1.1.1",
+        "react-day-picker": "^10.0.2",
+        "date-fns": "^4.4.0",
+        "input-otp": "^1.5.0",
+        "react-resizable-panels": "^4.19.1",
+        "@tanstack/react-virtual": "^3.14.26",
+        "@shadcn/react": "^0.3.1"
+    },
+    "peerDependenciesMeta": {
+        "recharts": {
+            "optional": true
+        },
+        "shiki": {
+            "optional": true
+        },
+        "embla-carousel-react": {
+            "optional": true
+        },
+        "cmdk": {
+            "optional": true
+        },
+        "react-day-picker": {
+            "optional": true
+        },
+        "date-fns": {
+            "optional": true
+        },
+        "input-otp": {
+            "optional": true
+        },
+        "react-resizable-panels": {
+            "optional": true
+        },
+        "@tanstack/react-virtual": {
+            "optional": true
+        },
+        "@shadcn/react": {
+            "optional": true
+        }
+    },
+    "dependencies": {
+        "@base-ui/react": "^1.9.0",
+        "@repraze/termicolor": "^0.1.0-alpha.0",
+        "class-variance-authority": "^0.7.1",
+        "cn": "^0.2.6",
+        "lucide-react": "^1.69.0",
+        "tw-animate-css": "^1.4.0"
+    },
+    "devDependencies": {
+        "@types/react": "^19.3.0",
+        "@types/react-dom": "^19.3.0",
+        "react": "^19.3.1",
+        "react-dom": "^19.3.1",
+        "shadcn": "^4.23.0",
+        "tailwindcss": "^4.3.4",
+        "recharts": "^3.8.0",
+        "shiki": "^4.6.0",
+        "embla-carousel-react": "^8.6.0",
+        "cmdk": "^1.1.1",
+        "react-day-picker": "^10.0.2",
+        "date-fns": "^4.4.0",
+        "input-otp": "^1.5.0",
+        "react-resizable-panels": "^4.19.1",
+        "@tanstack/react-virtual": "^3.14.26",
+        "@shadcn/react": "^0.3.1"
+    }
+}

package/src/components/accordion.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+import {Accordion as AccordionPrimitive} from "@base-ui/react/accordion";
+import {focusRing} from "@repraze/kernelkit/lib/recipes";
+import {cva} from "class-variance-authority";
+import {cn} from "cn";
+import {ChevronDownIcon} from "lucide-react";
+
+/** `default`: rows split by lines. `outline`: the same rows inside a bordered `rounded-xl` panel. */
+const accordionVariants = cva("group/accordion flex w-full flex-col", {
+    variants: {
+        variant: {
+            default: "",
+            outline: "overflow-hidden rounded-xl border border-border bg-card",
+        },
+    },
+    defaultVariants: {variant: "default"},
+});
+
+function Accordion({
+    className,
+    variant = "default",
+    ...props
+}: AccordionPrimitive.Root.Props & {variant?: "default" | "outline"}) {
+    return (
+        <AccordionPrimitive.Root
+            data-slot="accordion"
+            data-variant={variant}
+            className={cn(accordionVariants({variant}), className)}
+            {...props}
+        />
+    );
+}
+
+function AccordionItem({className, ...props}: AccordionPrimitive.Item.Props) {
+    return (
+        <AccordionPrimitive.Item
+            data-slot="accordion-item"
+            className={cn("not-last:border-b not-last:border-border", className)}
+            {...props}
+        />
+    );
+}
+
+function AccordionTrigger({className, children, ...props}: AccordionPrimitive.Trigger.Props) {
+    return (
+        <AccordionPrimitive.Header data-slot="accordion-header" className="flex">
+            <AccordionPrimitive.Trigger
+                data-slot="accordion-trigger"
+                className={cn(
+                    focusRing,
+                    "group/accordion-trigger relative flex flex-1 items-center justify-between gap-2 rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-[color,background-color,border-color,box-shadow] duration-100",
+                    "hover:underline hover:underline-offset-4 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50",
+                    // outline variant: full-width rows with a hover wash instead of an underline
+                    "group-data-[variant=outline]/accordion:rounded-none group-data-[variant=outline]/accordion:px-4 group-data-[variant=outline]/accordion:hover:bg-hover group-data-[variant=outline]/accordion:hover:no-underline group-data-[variant=outline]/accordion:focus-visible:ring-inset",
+                    "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+                    className,
+                )}
+                {...props}
+            >
+                {children}
+                <ChevronDownIcon
+                    data-slot="accordion-trigger-icon"
+                    className="ml-auto text-muted-foreground transition-transform duration-150 group-aria-expanded/accordion-trigger:rotate-180 motion-reduce:transition-none"
+                />
+            </AccordionPrimitive.Trigger>
+        </AccordionPrimitive.Header>
+    );
+}
+
+function AccordionContent({className, children, ...props}: AccordionPrimitive.Panel.Props) {
+    return (
+        <AccordionPrimitive.Panel
+            data-slot="accordion-content"
+            className="h-(--accordion-panel-height) overflow-hidden text-sm text-muted-foreground transition-[height] duration-150 ease-out data-ending-style:h-0 data-starting-style:h-0 motion-reduce:transition-none"
+            {...props}
+        >
+            <div
+                data-slot="accordion-content-inner"
+                className={cn(
+                    "pt-0 pb-2.5 group-data-[variant=outline]/accordion:px-4 group-data-[variant=outline]/accordion:pb-4",
+                    "[&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+                    className,
+                )}
+            >
+                {children}
+            </div>
+        </AccordionPrimitive.Panel>
+    );
+}
+
+export {Accordion, AccordionContent, AccordionItem, AccordionTrigger, accordionVariants};