@usefragments/ui 1.0.0

package/dist/components/Theme/index.cjs

@@ -0,0 +1,353 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const index = require("../ComponentDefaults/index.cjs");
+const ThemeToggle_module = require("./ThemeToggle.module.scss.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const ThemeContext = React__namespace.createContext(null);
+function useSystemPreference() {
+  const [preference, setPreference] = React__namespace.useState("light");
+  React__namespace.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    setPreference(mq.matches ? "dark" : "light");
+    const handler = (e) => {
+      setPreference(e.matches ? "dark" : "light");
+    };
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, []);
+  return preference;
+}
+function useTheme() {
+  const context = React__namespace.useContext(ThemeContext);
+  if (!context) {
+    return {
+      mode: "system",
+      setMode: () => {
+      },
+      resolvedMode: "light",
+      systemPreference: "light",
+      toggleMode: () => {
+      }
+    };
+  }
+  return context;
+}
+function SunIcon({ size = 20 }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 256 256",
+      fill: "currentColor",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M120,40V16a8,8,0,0,1,16,0V40a8,8,0,0,1-16,0Zm72,88a64,64,0,1,1-64-64A64.07,64.07,0,0,1,192,128Zm-16,0a48,48,0,1,0-48,48A48.05,48.05,0,0,0,176,128ZM58.34,69.66A8,8,0,0,0,69.66,58.34l-16-16A8,8,0,0,0,42.34,53.66Zm0,116.68-16,16a8,8,0,0,0,11.32,11.32l16-16a8,8,0,0,0-11.32-11.32ZM192,72a8,8,0,0,0,5.66-2.34l16-16a8,8,0,0,0-11.32-11.32l-16,16A8,8,0,0,0,192,72Zm5.66,114.34a8,8,0,0,0-11.32,11.32l16,16a8,8,0,0,0,11.32-11.32ZM48,128a8,8,0,0,0-8-8H16a8,8,0,0,0,0,16H40A8,8,0,0,0,48,128Zm80,80a8,8,0,0,0-8,8v24a8,8,0,0,0,16,0V216A8,8,0,0,0,128,208Zm112-88H216a8,8,0,0,0,0,16h24a8,8,0,0,0,0-16Z" })
+    }
+  );
+}
+function MoonIcon({ size = 20 }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 256 256",
+      fill: "currentColor",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M233.54,142.23a8,8,0,0,0-8-2,88.08,88.08,0,0,1-109.8-109.8,8,8,0,0,0-10-10,104.84,104.84,0,0,0-52.91,37A104,104,0,0,0,136,224a103.09,103.09,0,0,0,62.52-20.88,104.84,104.84,0,0,0,37-52.91A8,8,0,0,0,233.54,142.23ZM188.9,190.34A88,88,0,0,1,65.66,67.11a89,89,0,0,1,31.4-26A106,106,0,0,0,96,56,104.11,104.11,0,0,0,200,160a106,106,0,0,0,14.92-1.06A89,89,0,0,1,188.9,190.34Z" })
+    }
+  );
+}
+function MonitorIcon({ size = 20 }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 256 256",
+      fill: "currentColor",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M208,40H48A24,24,0,0,0,24,64V176a24,24,0,0,0,24,24H208a24,24,0,0,0,24-24V64A24,24,0,0,0,208,40Zm8,136a8,8,0,0,1-8,8H48a8,8,0,0,1-8-8V64a8,8,0,0,1,8-8H208a8,8,0,0,1,8,8Zm-48,48a8,8,0,0,1-8,8H96a8,8,0,0,1,0-16h64A8,8,0,0,1,168,224Z" })
+    }
+  );
+}
+function ThemeProvider({
+  children,
+  componentDefaults,
+  defaultMode,
+  defaultTheme,
+  mode: controlledMode,
+  onModeChange,
+  storageKey = "fui-theme",
+  attribute = "data-theme"
+}) {
+  const systemPreference = useSystemPreference();
+  if (process.env.NODE_ENV !== "production" && defaultTheme !== void 0) {
+    console.warn(
+      "[Fragments] ThemeProvider: `defaultTheme` is deprecated. Use `defaultMode` instead. `defaultTheme` will be removed in v1.0."
+    );
+  }
+  const resolvedDefault = defaultMode ?? defaultTheme ?? "system";
+  const [internalMode, setInternalMode] = React__namespace.useState(resolvedDefault);
+  const [mounted, setMounted] = React__namespace.useState(false);
+  const isControlled = controlledMode !== void 0;
+  const mode = isControlled ? controlledMode : internalMode;
+  const resolvedMode = mode === "system" ? systemPreference : mode;
+  React__namespace.useEffect(() => {
+    if (typeof window === "undefined") return;
+    if (!isControlled && storageKey) {
+      const stored = localStorage.getItem(storageKey);
+      if (stored && ["light", "dark", "system"].includes(stored)) {
+        setInternalMode(stored);
+      }
+    }
+    setMounted(true);
+  }, [isControlled, storageKey]);
+  React__namespace.useEffect(() => {
+    if (typeof document === "undefined" || !mounted) return;
+    const root = document.documentElement;
+    if (attribute === "data-theme") {
+      root.setAttribute("data-theme", resolvedMode);
+    } else if (attribute === "class") {
+      root.classList.remove("light", "dark");
+      root.classList.add(resolvedMode);
+    }
+  }, [resolvedMode, attribute, mounted]);
+  React__namespace.useEffect(() => {
+    if (typeof window === "undefined" || !storageKey || !mounted) return;
+    localStorage.setItem(storageKey, mode);
+  }, [mode, storageKey, mounted]);
+  const setMode = React__namespace.useCallback(
+    (newMode) => {
+      if (!isControlled) {
+        setInternalMode(newMode);
+      }
+      onModeChange == null ? void 0 : onModeChange(newMode);
+    },
+    [isControlled, onModeChange]
+  );
+  const toggleMode = React__namespace.useCallback(() => {
+    const next = resolvedMode === "light" ? "dark" : "light";
+    setMode(next);
+  }, [resolvedMode, setMode]);
+  const contextValue = {
+    mode,
+    setMode,
+    resolvedMode,
+    systemPreference,
+    toggleMode
+  };
+  const themedChildren = /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, { value: contextValue, children });
+  if (!componentDefaults) {
+    return themedChildren;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(index.ComponentDefaultsProvider, { value: componentDefaults, children: themedChildren });
+}
+function ThemeToggle({
+  size: sizeProp,
+  showSystem = false,
+  value: controlledValue,
+  onValueChange,
+  "aria-label": ariaLabel,
+  className,
+  ...htmlProps
+}) {
+  const size = index.useResolvedControlSize(sizeProp);
+  const { mode: contextMode, setMode: setContextMode } = useTheme();
+  const isControlled = controlledValue !== void 0;
+  const currentMode = isControlled ? controlledValue : contextMode;
+  const handleModeChange = (newMode) => {
+    if (isControlled) {
+      onValueChange == null ? void 0 : onValueChange(newMode);
+    } else {
+      setContextMode(newMode);
+    }
+  };
+  const groupClasses = [
+    ThemeToggle_module.default.toggleGroup,
+    ThemeToggle_module.default[`size${size.charAt(0).toUpperCase() + size.slice(1)}`],
+    className
+  ].filter(Boolean).join(" ");
+  const getButtonClasses = (buttonMode) => {
+    return [ThemeToggle_module.default.toggleButton, currentMode === buttonMode && ThemeToggle_module.default.toggleButtonActive].filter(Boolean).join(" ");
+  };
+  const label = ariaLabel || "Theme toggle";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...htmlProps, className: groupClasses, role: "group", "aria-label": label, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        className: getButtonClasses("light"),
+        onClick: () => handleModeChange("light"),
+        "aria-pressed": currentMode === "light",
+        "aria-label": "Light mode",
+        children: /* @__PURE__ */ jsxRuntime.jsx(SunIcon, {})
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        className: getButtonClasses("dark"),
+        onClick: () => handleModeChange("dark"),
+        "aria-pressed": currentMode === "dark",
+        "aria-label": "Dark mode",
+        children: /* @__PURE__ */ jsxRuntime.jsx(MoonIcon, {})
+      }
+    ),
+    showSystem && !isControlled && /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        className: getButtonClasses("system"),
+        onClick: () => setContextMode("system"),
+        "aria-pressed": contextMode === "system",
+        "aria-label": "System preference",
+        children: /* @__PURE__ */ jsxRuntime.jsx(MonitorIcon, {})
+      }
+    )
+  ] });
+}
+const Theme = Object.assign(ThemeProvider, {
+  Root: ThemeProvider,
+  Provider: ThemeProvider,
+  Toggle: ThemeToggle,
+  useTheme
+});
+const RADIUS_PRESETS = {
+  sharp: { sm: "0", md: "0", lg: "0", xl: "0" },
+  subtle: { sm: "0.125rem", md: "0.25rem", lg: "0.375rem", xl: "0.5rem" },
+  default: { sm: "0.25rem", md: "0.429rem", lg: "0.571rem", xl: "0.857rem" },
+  rounded: { sm: "0.375rem", md: "0.5rem", lg: "0.75rem", xl: "1rem" },
+  pill: { sm: "0.5rem", md: "0.75rem", lg: "1rem", xl: "1.5rem" }
+};
+const DENSITY_CONFIGS = {
+  compact: {
+    baseUnit: 6,
+    baseFontSize: 14,
+    buttonHeightXs: 32,
+    buttonHeights: [32, 32, 36],
+    inputHeights: [32, 32, 36],
+    touchTargets: [32, 32, 40],
+    sidebarItemHeight: 32
+  },
+  default: {
+    baseUnit: 7,
+    baseFontSize: 14,
+    buttonHeightXs: 32,
+    buttonHeights: [32, 40, 44],
+    inputHeights: [32, 40, 44],
+    touchTargets: [32, 32, 44],
+    sidebarItemHeight: 32
+  },
+  relaxed: {
+    baseUnit: 8,
+    baseFontSize: 14,
+    buttonHeightXs: 32,
+    buttonHeights: [32, 44, 48],
+    inputHeights: [32, 44, 48],
+    touchTargets: [32, 40, 48],
+    sidebarItemHeight: 36
+  }
+};
+function pxToRem(px, baseFontSize) {
+  return `${px / baseFontSize}rem`;
+}
+function hexToRgb(hex) {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  if (!result) return null;
+  return [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)];
+}
+function adjustLightness(hex, amount) {
+  const rgb = hexToRgb(hex);
+  if (!rgb) return hex;
+  const [r, g, b] = rgb;
+  const adjust = (v) => Math.max(0, Math.min(255, Math.round(v + amount)));
+  return `#${adjust(r).toString(16).padStart(2, "0")}${adjust(g).toString(16).padStart(2, "0")}${adjust(b).toString(16).padStart(2, "0")}`;
+}
+function setVar(el, name, value) {
+  el.style.setProperty(name, value);
+}
+function configureTheme(options) {
+  if (typeof document === "undefined") return;
+  const root = document.documentElement;
+  if (options.brand) {
+    setVar(root, "--fui-color-accent", options.brand);
+    setVar(root, "--fui-color-accent-hover", adjustLightness(options.brand, -20));
+    setVar(root, "--fui-color-accent-active", adjustLightness(options.brand, -40));
+    setVar(root, "--fui-focus-ring-color", `${options.brand}66`);
+  }
+  if (options.danger) {
+    setVar(root, "--fui-color-danger", options.danger);
+    setVar(root, "--fui-color-danger-hover", adjustLightness(options.danger, -20));
+  }
+  if (options.success) setVar(root, "--fui-color-success", options.success);
+  if (options.warning) setVar(root, "--fui-color-warning", options.warning);
+  if (options.info) setVar(root, "--fui-color-info", options.info);
+  if (options.radiusStyle) {
+    const r = RADIUS_PRESETS[options.radiusStyle];
+    if (r) {
+      setVar(root, "--fui-radius-sm", r.sm);
+      setVar(root, "--fui-radius-md", r.md);
+      setVar(root, "--fui-radius-lg", r.lg);
+      setVar(root, "--fui-radius-xl", r.xl);
+    }
+  }
+  if (options.density) {
+    const d = DENSITY_CONFIGS[options.density];
+    if (d) {
+      const unitRem = d.baseUnit / d.baseFontSize;
+      setVar(root, "--fui-space-0-5", `${unitRem * 0.3}rem`);
+      setVar(root, "--fui-space-0-75", `${unitRem * 0.43}rem`);
+      setVar(root, "--fui-space-1", `${unitRem}rem`);
+      setVar(root, "--fui-space-2", `${unitRem * 2}rem`);
+      setVar(root, "--fui-space-3", `${unitRem * 3}rem`);
+      setVar(root, "--fui-space-4", `${unitRem * 4}rem`);
+      setVar(root, "--fui-space-5", `${unitRem * 5}rem`);
+      setVar(root, "--fui-space-6", `${unitRem * 6}rem`);
+      setVar(root, "--fui-space-8", `${unitRem * 8}rem`);
+      setVar(root, "--fui-space-10", `${unitRem * 10}rem`);
+      setVar(root, "--fui-space-12", `${unitRem * 12}rem`);
+      setVar(root, "--fui-button-height-xs", pxToRem(d.buttonHeightXs, d.baseFontSize));
+      setVar(root, "--fui-button-height-sm", pxToRem(d.buttonHeights[0], d.baseFontSize));
+      setVar(root, "--fui-button-height-md", pxToRem(d.buttonHeights[1], d.baseFontSize));
+      setVar(root, "--fui-button-height-lg", pxToRem(d.buttonHeights[2], d.baseFontSize));
+      setVar(root, "--fui-input-height-sm", pxToRem(d.inputHeights[0], d.baseFontSize));
+      setVar(root, "--fui-input-height", pxToRem(d.inputHeights[1], d.baseFontSize));
+      setVar(root, "--fui-input-height-lg", pxToRem(d.inputHeights[2], d.baseFontSize));
+      setVar(root, "--fui-touch-sm", pxToRem(d.touchTargets[0], d.baseFontSize));
+      setVar(root, "--fui-touch-md", pxToRem(d.touchTargets[1], d.baseFontSize));
+      setVar(root, "--fui-touch-lg", pxToRem(d.touchTargets[2], d.baseFontSize));
+      setVar(root, "--fui-target-size-min", pxToRem(32, d.baseFontSize));
+      setVar(root, "--fui-sidebar-item-height", pxToRem(d.sidebarItemHeight, d.baseFontSize));
+      setVar(root, "--fui-base-unit", `${d.baseUnit}px`);
+    }
+  }
+}
+exports.Theme = Theme;
+exports.ThemeProvider = ThemeProvider;
+exports.ThemeToggle = ThemeToggle;
+exports.configureTheme = configureTheme;
+exports.useTheme = useTheme;

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

@@ -0,0 +1,111 @@
+import * as React from "react";
+import { type ComponentDefaults } from "../ComponentDefaults";
+export type ThemeMode = "light" | "dark" | "system";
+export interface ThemeProviderProps {
+    children: React.ReactNode;
+    /** Default primitive component behavior for the subtree. */
+    componentDefaults?: ComponentDefaults;
+    /** Default theme mode for uncontrolled usage */
+    defaultMode?: ThemeMode;
+    /**
+     * @deprecated Use `defaultMode` instead. This alias will be removed in v1.0.
+     */
+    defaultTheme?: ThemeMode;
+    /** Controlled theme mode */
+    mode?: ThemeMode;
+    /** Callback when mode changes */
+    onModeChange?: (mode: ThemeMode) => void;
+    /** localStorage key for persistence (default: 'fui-theme') */
+    storageKey?: string;
+    /** How to apply theme to DOM */
+    attribute?: "data-theme" | "class";
+}
+export interface UseThemeReturn {
+    /** Current theme mode setting */
+    mode: ThemeMode;
+    /** Set the theme mode */
+    setMode: (mode: ThemeMode) => void;
+    /** Resolved mode (never 'system', always 'light' or 'dark') */
+    resolvedMode: "light" | "dark";
+    /** System preference detected from prefers-color-scheme */
+    systemPreference: "light" | "dark";
+    /** Toggle between light and dark (skips system) */
+    toggleMode: () => void;
+}
+export interface ThemeToggleProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Size of the toggle button */
+    size?: "sm" | "md" | "lg";
+    /** Whether to include system mode option (default: false) */
+    showSystem?: boolean;
+    /** Controlled value for custom usage (bypasses theme context) */
+    value?: "light" | "dark";
+    /** Callback when value changes (for controlled usage) */
+    onValueChange?: (value: "light" | "dark") => void;
+    /** Accessible label for the group */
+    "aria-label"?: string;
+}
+/**
+ * Hook to access theme context
+ */
+declare function useTheme(): UseThemeReturn;
+/**
+ * ThemeProvider - Provides theme context to children
+ * SSR-safe: initializes from localStorage in useEffect
+ */
+declare function ThemeProvider({ children, componentDefaults, defaultMode, defaultTheme, mode: controlledMode, onModeChange, storageKey, attribute, }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * ThemeToggle - Fragmented button group to toggle between light and dark themes
+ *
+ * Can be used in two modes:
+ * 1. Uncontrolled (default): Uses ThemeProvider context to get/set theme
+ * 2. Controlled: Pass `value` and `onValueChange` props for custom behavior
+ */
+declare function ThemeToggle({ size: sizeProp, showSystem, value: controlledValue, onValueChange, "aria-label": ariaLabel, className, ...htmlProps }: ThemeToggleProps): import("react/jsx-runtime").JSX.Element;
+export declare const Theme: typeof ThemeProvider & {
+    Root: typeof ThemeProvider;
+    Provider: typeof ThemeProvider;
+    Toggle: typeof ThemeToggle;
+    useTheme: typeof useTheme;
+};
+export { ThemeProvider, ThemeToggle, useTheme };
+import type { NeutralPalette, DensityPreset, RadiusStyle } from "../../utils/seed-derivation";
+export type { NeutralPalette, DensityPreset, RadiusStyle };
+export interface ConfigureThemeOptions {
+    /** Brand/accent color as hex */
+    brand?: string;
+    /** Neutral palette name */
+    neutral?: NeutralPalette;
+    /** Spacing density preset */
+    density?: DensityPreset;
+    /** Border radius style */
+    radiusStyle?: RadiusStyle;
+    /** Danger/error color as hex */
+    danger?: string;
+    /** Success color as hex */
+    success?: string;
+    /** Warning color as hex */
+    warning?: string;
+    /** Info color as hex */
+    info?: string;
+}
+/**
+ * Configure theme seeds at runtime via JS. Sets CSS custom properties on
+ * `:root` without requiring SCSS. Call this once at app startup.
+ *
+ * Note: For full control over all 120+ tokens, use the SCSS `@use...with()`
+ * approach. `configureTheme` covers the most commonly customized tokens.
+ *
+ * @example
+ * ```ts
+ * import { configureTheme } from '@usefragments/ui';
+ *
+ * configureTheme({
+ *   brand: '#6366f1',
+ *   neutral: 'ice',
+ *   density: 'compact',
+ *   radiusStyle: 'rounded',
+ * });
+ * ```
+ */
+export declare function configureTheme(options: ConfigureThemeOptions): void;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Theme/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Theme/index.tsx"],"names":[],"mappings":"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"}