@arolariu/components 0.5.0 → 1.1.0

package/src/hooks/useLocalStorage.tsx

@@ -0,0 +1,111 @@
+"use client";
+
+import * as React from "react";
+
+/**
+ * Persists state to localStorage with SSR safety and JSON serialization.
+ *
+ * @remarks
+ * This hook synchronizes state with localStorage, allowing data to persist
+ * across page refreshes and browser sessions. It is SSR-safe and returns the
+ * initial value on the server until hydration completes. The hook also syncs
+ * state across tabs/windows via the `storage` event and handles JSON parse
+ * errors gracefully by falling back to the initial value.
+ *
+ * @typeParam T - The type of the value being stored.
+ * @param key - The localStorage key to store the value under.
+ * @param initialValue - The default value to use if no value is found in localStorage.
+ * @returns A tuple containing the current value and a setter function.
+ *
+ * @example
+ * ```tsx
+ * function UserSettings() {
+ *   const [theme, setTheme] = useLocalStorage("theme", "light");
+ *
+ *   return (
+ *     <button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
+ *       Toggle theme (current: {theme})
+ *     </button>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * function ShoppingCart() {
+ *   const [cart, setCart] = useLocalStorage<Product[]>("cart", []);
+ *
+ *   return (
+ *     <button onClick={() => setCart((prev) => [...prev, newProduct])}>
+ *       Add to cart ({cart.length} items)
+ *     </button>
+ *   );
+ * }
+ * ```
+ */
+export function useLocalStorage<T>(key: string, initialValue: T): [T, (value: T | ((prev: T) => T)) => void] {
+  const [storedValue, setStoredValue] = React.useState<T>(() => {
+    // SSR safety: return initial value on server
+    if (typeof globalThis.window === "undefined") {
+      return initialValue;
+    }
+
+    try {
+      const item = globalThis.window.localStorage.getItem(key);
+
+      return item !== null ? (JSON.parse(item) as T) : initialValue;
+    } catch (error) {
+      console.error(`Error reading localStorage key "${key}":`, error);
+
+      return initialValue;
+    }
+  });
+
+  const setValue = React.useCallback(
+    (value: T | ((prev: T) => T)) => {
+      try {
+        setStoredValue((currentValue) => {
+          const valueToStore = value instanceof Function ? value(currentValue) : value;
+
+          if (typeof globalThis.window !== "undefined") {
+            globalThis.window.localStorage.setItem(key, JSON.stringify(valueToStore));
+          }
+
+          return valueToStore;
+        });
+      } catch (error) {
+        console.error(`Error setting localStorage key "${key}":`, error);
+      }
+    },
+    [key],
+  );
+
+  React.useEffect(() => {
+    // SSR safety: window is not available on server
+    if (typeof globalThis.window === "undefined") {
+      return;
+    }
+
+    const handleStorageChange = (event: StorageEvent) => {
+      if (event.key !== key || event.storageArea !== globalThis.window.localStorage) {
+        return;
+      }
+
+      try {
+        const newValue = event.newValue !== null ? (JSON.parse(event.newValue) as T) : initialValue;
+
+        setStoredValue(newValue);
+      } catch (error) {
+        console.error(`Error parsing storage event for key "${key}":`, error);
+      }
+    };
+
+    globalThis.window.addEventListener("storage", handleStorageChange);
+
+    return () => {
+      globalThis.window.removeEventListener("storage", handleStorageChange);
+    };
+  }, [key, initialValue]);
+
+  return [storedValue, setValue];
+}

package/src/hooks/useMediaQuery.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import * as React from "react";
+
+/**
+ * Subscribes to a CSS media query and returns whether it currently matches.
+ * SSR-safe — returns `false` on the server until hydration.
+ *
+ * @param query - A valid CSS media query string (e.g. `"(min-width: 768px)"`).
+ * @returns `true` when the media query matches, `false` otherwise.
+ *
+ * @example
+ * ```tsx
+ * const isWide = useMediaQuery("(min-width: 1024px)");
+ * ```
+ */
+export function useMediaQuery(query: string): boolean {
+  const [matches, setMatches] = React.useState(false);
+
+  React.useEffect(() => {
+    const mql = globalThis.window.matchMedia(query);
+    const onChange = (event: MediaQueryListEvent) => {
+      setMatches(event.matches);
+    };
+
+    // eslint-disable-next-line react-hooks-extra/no-direct-set-state-in-use-effect
+    setMatches(mql.matches);
+    mql.addEventListener("change", onChange);
+
+    return () => mql.removeEventListener("change", onChange);
+  }, [query]);
+
+  return matches;
+}

package/src/hooks/useMergedRefs.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import * as React from "react";
+
+/**
+ * Merges multiple refs into a single callback ref.
+ *
+ * @remarks
+ * This hook is essential when you need to attach multiple refs to the same element,
+ * such as combining a forwarded ref with an internal ref for measurements or
+ * imperative operations. All provided refs will receive the same element instance.
+ *
+ * Supports all ref types: callback refs, mutable ref objects, and `null`/`undefined`.
+ *
+ * @typeParam T - The type of the element being referenced.
+ * @param refs - An array of refs to merge. Can include callback refs, ref objects, or undefined.
+ * @returns A callback ref that updates all provided refs.
+ *
+ * @example
+ * ```tsx
+ * const MyComponent = React.forwardRef<HTMLDivElement, Props>((props, forwardedRef) => {
+ *   const internalRef = useRef<HTMLDivElement>(null);
+ *   const mergedRef = useMergedRefs(forwardedRef, internalRef);
+ *
+ *   return <div ref={mergedRef}>Content</div>;
+ * });
+ * ```
+ */
+export function useMergedRefs<T>(...refs: Array<React.Ref<T> | undefined>): React.RefCallback<T> {
+  return React.useCallback(
+    (element: T | null) => {
+      for (const ref of refs) {
+        if (!ref) {
+          continue;
+        }
+
+        if (typeof ref === "function") {
+          ref(element);
+        } else {
+          // Mutable ref object
+          (ref as React.MutableRefObject<T | null>).current = element;
+        }
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    refs,
+  );
+}

package/src/hooks/useOnClickOutside.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import * as React from "react";
+
+/**
+ * Detects clicks or touch events outside a referenced element.
+ *
+ * @remarks
+ * This hook is commonly used for implementing dropdown menus, modals, and popovers
+ * that should close when the user interacts outside their boundaries. It listens
+ * to both mouse and touch events to ensure broad device compatibility.
+ *
+ * The event listeners are automatically cleaned up when the component unmounts.
+ *
+ * @param ref - A ref object pointing to the element to monitor.
+ * @param handler - Callback invoked when a click or touch occurs outside the element.
+ *
+ * @example
+ * ```tsx
+ * function Dropdown() {
+ *   const [isOpen, setIsOpen] = useState(false);
+ *   const dropdownRef = useRef<HTMLDivElement>(null);
+ *
+ *   useOnClickOutside(dropdownRef, () => setIsOpen(false));
+ *
+ *   return (
+ *     <div ref={dropdownRef}>
+ *       {isOpen && <DropdownMenu />}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export function useOnClickOutside(ref: React.RefObject<HTMLElement | null>, handler: (event: MouseEvent | TouchEvent) => void): void {
+  React.useEffect(() => {
+    const listener = (event: MouseEvent | TouchEvent) => {
+      const element = ref.current;
+
+      // Do nothing if clicking ref's element or descendent elements
+      if (!element || element.contains(event.target as Node)) {
+        return;
+      }
+
+      handler(event);
+    };
+
+    globalThis.document.addEventListener("mousedown", listener);
+    globalThis.document.addEventListener("touchstart", listener);
+
+    return () => {
+      globalThis.document.removeEventListener("mousedown", listener);
+      globalThis.document.removeEventListener("touchstart", listener);
+    };
+  }, [ref, handler]);
+}

package/src/hooks/usePrefersContrast.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import {useMediaQuery} from "./useMediaQuery";
+
+/**
+ * Returns whether the user prefers higher contrast.
+ *
+ * @remarks
+ * Wraps a `prefers-contrast` media query in a semantic accessibility hook so components
+ * can adapt borders, focus states, and surface styling without repeating query strings.
+ *
+ * @returns `true` when `prefers-contrast: more` is active.
+ *
+ * @example
+ * ```tsx
+ * const highContrast = usePrefersContrast();
+ * ```
+ *
+ * @see {@link useMediaQuery} — Shared media-query subscription hook.
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast | MDN prefers-contrast}
+ */
+export function usePrefersContrast(): boolean {
+  return useMediaQuery("(prefers-contrast: more)");
+}

package/src/hooks/usePrevious.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import * as React from "react";
+
+/**
+ * Tracks and returns the previous value of a state or prop.
+ *
+ * @remarks
+ * This hook stores the value from the previous render cycle, allowing you to compare
+ * current and previous values. On the initial render, it returns `undefined` since
+ * there is no previous value yet.
+ *
+ * Useful for detecting changes, implementing undo functionality, or creating
+ * animations based on value transitions.
+ *
+ * @typeParam T - The type of the value being tracked.
+ * @param value - The current value to track.
+ * @returns The value from the previous render, or `undefined` on the first render.
+ *
+ * @example
+ * ```tsx
+ * function Counter() {
+ *   const [count, setCount] = useState(0);
+ *   const previousCount = usePrevious(count);
+ *
+ *   return (
+ *     <div>
+ *       <p>Current: {count}</p>
+ *       <p>Previous: {previousCount ?? "N/A"}</p>
+ *       <button onClick={() => setCount(count + 1)}>Increment</button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export function usePrevious<T>(value: T): T | undefined {
+  const ref = React.useRef<T | undefined>(undefined);
+
+  React.useEffect(() => {
+    ref.current = value;
+  }, [value]);
+
+  return ref.current;
+}

package/src/hooks/useReducedMotion.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+/**
+ * Returns whether the user prefers reduced motion.
+ *
+ * @remarks
+ * This hook is re-exported from `motion/react` so consumers can depend on the component
+ * library for motion-aware behavior without importing Motion directly.
+ *
+ * @returns `true` when `prefers-reduced-motion: reduce` is active, or `null` until the first client measurement when Motion has not resolved the preference yet.
+ *
+ * @example
+ * ```tsx
+ * const prefersReduced = useReducedMotion();
+ * ```
+ *
+ * @see {@link https://motion.dev/docs/react-use-reduced-motion | Motion useReducedMotion}
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion | MDN prefers-reduced-motion}
+ */
+export {useReducedMotion} from "motion/react";

package/src/hooks/useThrottle.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import * as React from "react";
+
+/**
+ * Throttles a callback function, limiting how often it can be invoked.
+ *
+ * @remarks
+ * This hook returns a throttled version of the provided callback that can only
+ * be executed once per specified interval. Subsequent calls within the interval
+ * are ignored. Useful for rate-limiting expensive operations triggered by high-frequency
+ * events like scrolling, resizing, or mouse movement.
+ *
+ * Unlike debouncing, throttling ensures the callback is invoked at regular intervals
+ * during continuous events, providing more predictable execution timing.
+ *
+ * @typeParam Args - The tuple type of the callback's arguments.
+ * @param callback - The function to throttle.
+ * @param delay - The minimum interval in milliseconds between invocations.
+ * @returns A throttled version of the callback.
+ *
+ * @example
+ * ```tsx
+ * function ScrollTracker() {
+ *   const [scrollPos, setScrollPos] = useState(0);
+ *
+ *   const handleScroll = useThrottle(() => {
+ *     setScrollPos(window.scrollY);
+ *   }, 200);
+ *
+ *   useEffect(() => {
+ *     window.addEventListener("scroll", handleScroll);
+ *     return () => window.removeEventListener("scroll", handleScroll);
+ *   }, [handleScroll]);
+ *
+ *   return <p>Scroll position: {scrollPos}</p>;
+ * }
+ * ```
+ */
+export function useThrottle<Args extends unknown[]>(callback: (...args: Args) => void, delay: number): (...args: Args) => void {
+  const lastRunRef = React.useRef(0);
+  const timeoutRef = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+  const callbackRef = React.useRef(callback);
+
+  React.useEffect(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+
+  React.useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        globalThis.clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+
+  return React.useCallback(
+    (...args: Args) => {
+      const now = Date.now();
+      const timeSinceLastRun = now - lastRunRef.current;
+
+      if (timeSinceLastRun >= delay) {
+        callbackRef.current(...args);
+        lastRunRef.current = now;
+      } else {
+        if (timeoutRef.current) {
+          globalThis.clearTimeout(timeoutRef.current);
+        }
+
+        timeoutRef.current = globalThis.setTimeout(() => {
+          callbackRef.current(...args);
+          lastRunRef.current = Date.now();
+        }, delay - timeSinceLastRun);
+      }
+    },
+    [delay],
+  );
+}

package/src/hooks/useTimeout.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import * as React from "react";
+
+/**
+ * Executes a callback after a specified delay with automatic cleanup.
+ *
+ * @remarks
+ * This hook wraps `setTimeout` and automatically clears the timeout when the component
+ * unmounts or when the delay changes. Setting `delay` to `null` disables the timeout.
+ *
+ * The timeout is reset whenever the `callback` or `delay` changes, ensuring the most
+ * recent callback is always executed.
+ *
+ * @param callback - The function to execute after the delay.
+ * @param delay - The delay in milliseconds, or `null` to disable the timeout.
+ *
+ * @example
+ * ```tsx
+ * function DelayedMessage() {
+ *   const [visible, setVisible] = useState(false);
+ *
+ *   useTimeout(() => {
+ *     setVisible(true);
+ *   }, 3000);
+ *
+ *   return visible ? <p>Message appeared!</p> : <p>Waiting...</p>;
+ * }
+ * ```
+ */
+export function useTimeout(callback: () => void, delay: number | null): void {
+  const savedCallback = React.useRef(callback);
+
+  React.useLayoutEffect(() => {
+    savedCallback.current = callback;
+  }, [callback]);
+
+  React.useEffect(() => {
+    if (delay === null) {
+      return;
+    }
+
+    const timeoutId = globalThis.setTimeout(() => {
+      savedCallback.current();
+    }, delay);
+
+    return () => {
+      globalThis.clearTimeout(timeoutId);
+    };
+  }, [delay]);
+}

package/src/index.css

@@ -1,73 +1,135 @@
-@import "tailwindcss";
-@config '../tailwind.config.ts';
-@custom-variant dark (&:is(.dark *));
-
 /*
-  The default border color has changed to `currentcolor` in Tailwind CSS v4,
-  so we've added these compatibility styles to make sure everything still
-  looks the same as it did with Tailwind CSS v3.
-
-  If we ever want to remove these styles, we need to add an explicit border
-  color utility to any element that depends on these defaults.
-*/
-@layer base {
-  *,
-  ::after,
-  ::before,
-  ::backdrop,
-  ::file-selector-button {
-    border-color: var(--color-gray-200, currentcolor);
-  }
-}
+ * @arolariu/components — Design Tokens
+ * Base UI + Mira-inspired style + Blue theme + Large radius (0.875rem)
+ *
+ * This file defines the CSS custom properties used across all component modules.
+ * Consumers can override any token by redefining the custom property in their own CSS.
+ */
 
 :root {
-  --sidebar: hsl(0 0% 98%);
-  --sidebar-foreground: hsl(240 5.3% 26.1%);
-  --sidebar-primary: hsl(240 5.9% 10%);
-  --sidebar-primary-foreground: hsl(0 0% 98%);
-  --sidebar-accent: hsl(240 4.8% 95.9%);
-  --sidebar-accent-foreground: hsl(240 5.9% 10%);
-  --sidebar-border: hsl(220 13% 91%);
-  --sidebar-ring: hsl(217.2 91.2% 59.8%);
-}
-.dark {
-  --sidebar: hsl(240 5.9% 10%);
-  --sidebar-foreground: hsl(240 4.8% 95.9%);
-  --sidebar-primary: hsl(224.3 76.3% 48%);
-  --sidebar-primary-foreground: hsl(0 0% 100%);
-  --sidebar-accent: hsl(240 3.7% 15.9%);
-  --sidebar-accent-foreground: hsl(240 4.8% 95.9%);
-  --sidebar-border: hsl(240 3.7% 15.9%);
-  --sidebar-ring: hsl(217.2 91.2% 59.8%);
+  /* Radius scale */
+  --ac-radius: 0.875rem;
+  --ac-radius-xs: calc(var(--ac-radius) * 0.4);
+  --ac-radius-sm: calc(var(--ac-radius) * 0.6);
+  --ac-radius-md: calc(var(--ac-radius) * 0.8);
+  --ac-radius-lg: var(--ac-radius);
+  --ac-radius-xl: calc(var(--ac-radius) * 1.4);
+
+  /* Core semantic tokens — Light mode */
+  --ac-background: oklch(1 0 0);
+  --ac-foreground: oklch(0.145 0.004 285.823);
+  --ac-card: oklch(1 0 0);
+  --ac-card-foreground: oklch(0.145 0.004 285.823);
+  --ac-popover: oklch(1 0 0);
+  --ac-popover-foreground: oklch(0.145 0.004 285.823);
+  --ac-primary: oklch(0.488 0.243 264.376);
+  --ac-primary-foreground: oklch(0.97 0.014 254.604);
+  --ac-secondary: oklch(0.967 0.001 286.375);
+  --ac-secondary-foreground: oklch(0.21 0.006 285.885);
+  --ac-muted: oklch(0.967 0.001 286.375);
+  --ac-muted-foreground: oklch(0.556 0.002 285.938);
+  --ac-accent: oklch(0.967 0.001 286.375);
+  --ac-accent-foreground: oklch(0.21 0.006 285.885);
+  --ac-destructive: oklch(0.577 0.245 27.325);
+  --ac-destructive-foreground: oklch(0.577 0.245 27.325);
+  --ac-success: oklch(0.627 0.194 149.214);
+  --ac-success-foreground: oklch(0.985 0 0);
+  --ac-warning: oklch(0.769 0.188 70.08);
+  --ac-warning-foreground: oklch(0.145 0.004 285.823);
+  --ac-info: oklch(0.488 0.243 264.376);
+  --ac-info-foreground: oklch(0.97 0.014 254.604);
+  --ac-border: oklch(0.922 0.004 286.32);
+  --ac-input: oklch(0.922 0.004 286.32);
+  --ac-ring: oklch(0.488 0.243 264.376);
+
+  /* Chart tokens */
+  --ac-chart-1: oklch(0.646 0.222 41.116);
+  --ac-chart-2: oklch(0.6 0.118 184.714);
+  --ac-chart-3: oklch(0.398 0.07 227.392);
+  --ac-chart-4: oklch(0.828 0.189 84.429);
+  --ac-chart-5: oklch(0.769 0.188 70.08);
+
+  /* Sidebar tokens */
+  --ac-sidebar: oklch(0.985 0 0);
+  --ac-sidebar-foreground: oklch(0.145 0.004 285.823);
+  --ac-sidebar-primary: oklch(0.488 0.243 264.376);
+  --ac-sidebar-primary-foreground: oklch(0.97 0.014 254.604);
+  --ac-sidebar-accent: oklch(0.967 0.001 286.375);
+  --ac-sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --ac-sidebar-border: oklch(0.922 0.004 286.32);
+  --ac-sidebar-ring: oklch(0.488 0.243 264.376);
+
+  /* Mira sizing scale — compact density */
+  --ac-size-xs: 1.25rem;   /* 20px — h-5 */
+  --ac-size-sm: 1.5rem;    /* 24px — h-6 */
+  --ac-size-md: 1.75rem;   /* 28px — h-7 */
+  --ac-size-default: 2rem; /* 32px — h-8 */
+  --ac-size-lg: 2.25rem;   /* 36px */
+
+  /* Typography scale — Mira compact */
+  --ac-text-xs: 0.75rem;
+  --ac-text-sm: 0.8125rem;
+  --ac-text-base: 0.875rem;
+  --ac-text-lg: 1rem;
+  --ac-text-xl: 1.125rem;
+
+  /* Spacing scale */
+  --ac-space-1: 0.25rem;
+  --ac-space-2: 0.5rem;
+  --ac-space-3: 0.75rem;
+  --ac-space-4: 1rem;
+  --ac-space-6: 1.5rem;
+  --ac-space-8: 2rem;
+
+  /* Transitions */
+  --ac-transition-fast: 100ms ease;
+  --ac-transition-normal: 150ms ease;
+  --ac-transition-slow: 200ms ease-in-out;
 }
 
-@theme inline {
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
-  --animate-accordion-down: accordion-down 0.2s ease-out;
-  --animate-accordion-up: accordion-up 0.2s ease-out;
+/* Dark mode tokens */
+.dark,
+[data-theme="dark"] {
+  --ac-background: oklch(0.145 0.004 285.823);
+  --ac-foreground: oklch(0.985 0 0);
+  --ac-card: oklch(0.145 0.004 285.823);
+  --ac-card-foreground: oklch(0.985 0 0);
+  --ac-popover: oklch(0.145 0.004 285.823);
+  --ac-popover-foreground: oklch(0.985 0 0);
+  --ac-primary: oklch(0.424 0.199 265.638);
+  --ac-primary-foreground: oklch(0.97 0.014 254.604);
+  --ac-secondary: oklch(0.269 0.006 285.885);
+  --ac-secondary-foreground: oklch(0.985 0 0);
+  --ac-muted: oklch(0.269 0.006 285.885);
+  --ac-muted-foreground: oklch(0.708 0.002 286.067);
+  --ac-accent: oklch(0.269 0.006 285.885);
+  --ac-accent-foreground: oklch(0.985 0 0);
+  --ac-destructive: oklch(0.704 0.191 22.216);
+  --ac-destructive-foreground: oklch(0.704 0.191 22.216);
+  --ac-success: oklch(0.527 0.164 149.214);
+  --ac-success-foreground: oklch(0.985 0 0);
+  --ac-warning: oklch(0.669 0.158 70.08);
+  --ac-warning-foreground: oklch(0.145 0.004 285.823);
+  --ac-info: oklch(0.424 0.199 265.638);
+  --ac-info-foreground: oklch(0.97 0.014 254.604);
+  --ac-border: oklch(0.269 0.006 285.885);
+  --ac-input: oklch(0.269 0.006 285.885);
+  --ac-ring: oklch(0.424 0.199 265.638);
 
-  @keyframes accordion-down {
-    from {
-      height: 0;
-    }
-    to {
-      height: var(--radix-accordion-content-height);
-    }
-  }
+  --ac-chart-1: oklch(0.488 0.243 264.376);
+  --ac-chart-2: oklch(0.696 0.17 162.48);
+  --ac-chart-3: oklch(0.769 0.188 70.08);
+  --ac-chart-4: oklch(0.627 0.265 303.9);
+  --ac-chart-5: oklch(0.645 0.246 16.439);
 
-  @keyframes accordion-up {
-    from {
-      height: var(--radix-accordion-content-height);
-    }
-    to {
-      height: 0;
-    }
-  }
+  --ac-sidebar: oklch(0.205 0.006 285.885);
+  --ac-sidebar-foreground: oklch(0.985 0 0);
+  --ac-sidebar-primary: oklch(0.424 0.199 265.638);
+  --ac-sidebar-primary-foreground: oklch(0.97 0.014 254.604);
+  --ac-sidebar-accent: oklch(0.269 0.006 285.885);
+  --ac-sidebar-accent-foreground: oklch(0.985 0 0);
+  --ac-sidebar-border: oklch(0.269 0.006 285.885);
+  --ac-sidebar-ring: oklch(0.424 0.199 265.638);
 }
+
+/* Note: No global * reset — consumers manage their own border/box-sizing defaults */