@fabio.caffarello/react-design-system 3.8.0 → 3.10.0

package/dist/granular/ui/providers/AppProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppProvider.js","sources":["../../../../src/ui/providers/AppProvider.tsx"],"sourcesContent":["\"use client\";\n\n/* eslint-disable react-refresh/only-export-components */\nimport { type ReactNode, useMemo } from \"react\";\n\n/**\n * STRUCTURAL SOLUTION: Module Boundary Isolation with Explicit Initialization\n *\n * This solution ensures providers are initialized in the correct order by:\n * 1. Using a single atomic function that references all providers\n * 2. Ensuring all providers are in the same module boundary (no code splitting)\n * 3. Using explicit initialization order that cannot be broken by bundler\n *\n * The key: All provider references are in a single function execution context,\n * creating a module boundary that the bundler cannot break.\n */\n\n/**\n * TURBOPACK COMPATIBILITY: Import all providers from a single bundle\n *\n * By importing all providers from providers-bundle.ts, we ensure they're\n * all in the same module boundary. This prevents Turbopack from code-splitting\n * them incorrectly, which causes initialization order issues.\n */\nimport {\n  ProvidersBundle,\n  type ThemeProviderProps,\n  type ConfigProviderProps,\n  type ToastProviderProps,\n  type DialogProviderProps,\n} from \"./providers-bundle\";\n\n/**\n * Provider Initialization Guard\n *\n * Use ProvidersBundle to ensure all providers are in the same module boundary.\n * This prevents Turbopack from code-splitting providers incorrectly.\n */\nconst PROVIDER_INITIALIZATION_GUARD = ProvidersBundle;\n\n/**\n * AppProvider Configuration\n */\nexport interface AppProviderConfig {\n  theme?: Omit<ThemeProviderProps, \"children\">;\n  config?: Omit<ConfigProviderProps, \"children\">;\n  toast?: Omit<ToastProviderProps, \"children\">;\n  dialog?: Omit<DialogProviderProps, \"children\">;\n  providers?: {\n    theme?: boolean;\n    config?: boolean;\n    toast?: boolean;\n    dialog?: boolean;\n  };\n}\n\nexport interface AppProviderProps {\n  children: ReactNode;\n  config?: AppProviderConfig;\n}\n\n/**\n * Create provider stack with guaranteed initialization order\n *\n * This function uses the PROVIDER_INITIALIZATION_GUARD to ensure\n * all providers are initialized in the correct order. The guard object\n * creates a module boundary that prevents code splitting.\n */\nfunction createProviderStack(\n  children: ReactNode,\n  config: AppProviderConfig | undefined,\n): ReactNode {\n  const {\n    theme: themeConfig,\n    config: configConfig,\n    toast: toastConfig,\n    dialog: dialogConfig,\n    providers = {\n      theme: true,\n      config: true,\n      toast: true,\n      dialog: true,\n    },\n  } = config || {};\n\n  // CRITICAL: Use providers from the guard object\n  // This ensures they're all in the same module boundary\n  // The bundler cannot code-split or reorder code within this function\n\n  let content: ReactNode = children;\n\n  // Step 1: DialogProvider (most specific, wraps content)\n  if (providers.dialog) {\n    content = (\n      <PROVIDER_INITIALIZATION_GUARD.DialogProvider {...dialogConfig}>\n        {content}\n      </PROVIDER_INITIALIZATION_GUARD.DialogProvider>\n    );\n  }\n\n  // Step 2: ToastProvider (component-level, wraps content)\n  if (providers.toast) {\n    content = (\n      <PROVIDER_INITIALIZATION_GUARD.ToastProvider {...toastConfig}>\n        {content}\n      </PROVIDER_INITIALIZATION_GUARD.ToastProvider>\n    );\n  }\n\n  // Step 3: ConfigProvider (design system config, wraps content)\n  if (providers.config) {\n    content = (\n      <PROVIDER_INITIALIZATION_GUARD.ConfigProvider {...configConfig}>\n        {content}\n      </PROVIDER_INITIALIZATION_GUARD.ConfigProvider>\n    );\n  }\n\n  // Step 4: ThemeProvider (foundation, wraps everything) - MUST BE LAST\n  if (providers.theme) {\n    content = (\n      <PROVIDER_INITIALIZATION_GUARD.ThemeProvider {...themeConfig}>\n        {content}\n      </PROVIDER_INITIALIZATION_GUARD.ThemeProvider>\n    );\n  }\n\n  return content;\n}\n\n/**\n * AppProvider Component\n *\n * Root provider that composes all global providers of the design system.\n * Uses module boundary isolation to ensure correct initialization order.\n *\n * Provider Hierarchy:\n * ```\n * AppProvider (Root)\n *   ├── ThemeProvider (Design System Theme) - Foundation\n *   ├── ConfigProvider (Design System Config)\n *   └── ComponentProviders (optional, per feature)\n *       ├── ToastProvider\n *       └── DialogProvider\n * ```\n *\n * @example\n * ```tsx\n * <AppProvider>\n *   <App />\n * </AppProvider>\n * ```\n *\n * @example With custom configuration\n * ```tsx\n * <AppProvider config={{\n *   theme: { defaultTheme: 'dark' },\n *   config: { config: { features: { debug: true } } },\n *   toast: { maxToasts: 10 }\n * }}>\n *   <App />\n * </AppProvider>\n * ```\n */\nexport function AppProvider({ children, config }: AppProviderProps) {\n  // Use useMemo to ensure provider stack is created once\n  // This prevents React from re-evaluating and ensures stable reference\n  const providerStack = useMemo(\n    () => createProviderStack(children, config),\n    [children, config],\n  );\n\n  return <>{providerStack}</>;\n}\n\n/**\n * Hook to access AppProvider context\n *\n * This is a convenience hook that provides access to all provider contexts.\n * Individual hooks (useTheme, useConfig, etc.) should be used for specific contexts.\n */\nexport function useApp() {\n  // This hook can be extended in the future to provide unified access\n  // For now, use individual hooks: useTheme(), useConfig(), etc.\n  return {\n    // Placeholder for future unified API\n  };\n}\n"],"names":["PROVIDER_INITIALIZATION_GUARD","ProvidersBundle","createProviderStack","children","config","themeConfig","configConfig","toastConfig","dialogConfig","providers","content","__spreadProps","__spreadValues","AppProvider","providerStack","useMemo","useApp"],"mappings":";;;;;;;;;;;;;;;;AAsCA,MAAMA,IAAgCC;AA8BtC,SAASC,EACPC,GACAC,GACW;AACX,QAAM;AAAA,IACJ,OAAOC;AAAA,IACP,QAAQC;AAAA,IACR,OAAOC;AAAA,IACP,QAAQC;AAAA,IACR,WAAAC,IAAY;AAAA,MACV,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,QAAQ;AAAA,IAAA;AAAA,EACV,IACEL,KAAU,CAAA;AAMd,MAAIM,IAAqBP;AAGzB,SAAIM,EAAU,WACZC,sBACGV,EAA8B,gBAA9BW,EAAAC,EAAA,IAAiDJ,IAAjD,EACE,UAAAE,IACH,IAKAD,EAAU,UACZC,sBACGV,EAA8B,eAA9BW,EAAAC,EAAA,IAAgDL,IAAhD,EACE,UAAAG,IACH,IAKAD,EAAU,WACZC,sBACGV,EAA8B,gBAA9BW,EAAAC,EAAA,IAAiDN,IAAjD,EACE,UAAAI,IACH,IAKAD,EAAU,UACZC,sBACGV,EAA8B,eAA9BW,EAAAC,EAAA,IAAgDP,IAAhD,EACE,UAAAK,IACH,IAIGA;AACT;AAoCO,SAASG,EAAY,EAAE,UAAAV,GAAU,QAAAC,KAA4B;AAGlE,QAAMU,IAAgBC;AAAA,IACpB,MAAMb,EAAoBC,GAAUC,CAAM;AAAA,IAC1C,CAACD,GAAUC,CAAM;AAAA,EAAA;AAGnB,gCAAU,UAAAU,EAAA,CAAc;AAC1B;AAQO,SAASE,IAAS;AAGvB,SAAO;AAAA;AAAA,EAAA;AAGT;"}

package/dist/granular/ui/providers/ConfigProvider.js

@@ -0,0 +1,95 @@
+"use client";
+var y = Object.defineProperty, v = Object.defineProperties;
+var E = Object.getOwnPropertyDescriptors;
+var u = Object.getOwnPropertySymbols;
+var C = Object.prototype.hasOwnProperty, P = Object.prototype.propertyIsEnumerable;
+var f = (n, e, r) => e in n ? y(n, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : n[e] = r, i = (n, e) => {
+  for (var r in e || (e = {}))
+    C.call(e, r) && f(n, r, e[r]);
+  if (u)
+    for (var r of u(e))
+      P.call(e, r) && f(n, r, e[r]);
+  return n;
+}, d = (n, e) => v(n, E(e));
+import { jsx as N } from "react/jsx-runtime";
+import { useMemo as a, useEffect as c, useContext as T, createContext as k } from "react";
+import { SPACING_TOKENS as O } from "../tokens/spacing.js";
+import { TYPOGRAPHY_TOKENS as x } from "../tokens/typography.js";
+import { BREAKPOINT_TOKENS as A } from "../tokens/breakpoints.js";
+import { ANIMATION_TOKENS as S } from "../tokens/animations.js";
+const _ = {
+  breakpoints: A,
+  spacing: O,
+  typography: x,
+  animations: S,
+  features: {
+    reducedMotion: !1,
+    highContrast: !1,
+    debug: !1
+  },
+  behavior: {
+    defaultAnimationDuration: 200,
+    defaultTransitionDuration: 150,
+    focusVisible: !0
+  }
+}, p = k(void 0);
+function L({
+  children: n,
+  config: e,
+  strategy: r = "default"
+}) {
+  const o = a(() => {
+    const t = i({}, _);
+    return e ? d(i(i({}, t), e), {
+      breakpoints: e.breakpoints || t.breakpoints,
+      spacing: e.spacing || t.spacing,
+      typography: e.typography || t.typography,
+      animations: e.animations || t.animations,
+      features: i(i({}, t.features), e.features),
+      behavior: i(i({}, t.behavior), e.behavior)
+    }) : t;
+  }, [e]);
+  c(() => {
+    typeof document != "undefined" && (o.features.reducedMotion ? document.documentElement.style.setProperty("--motion-reduce", "1") : document.documentElement.style.removeProperty("--motion-reduce"));
+  }, [o.features.reducedMotion]), c(() => {
+    typeof document != "undefined" && (o.features.highContrast ? document.documentElement.classList.add("high-contrast") : document.documentElement.classList.remove("high-contrast"));
+  }, [o.features.highContrast]);
+  const m = a(
+    () => (t) => o.spacing[t],
+    [o.spacing]
+  ), g = a(
+    () => (t) => o.breakpoints[t],
+    [o.breakpoints]
+  ), l = a(
+    () => (t) => {
+      var s;
+      return (s = o.features[t]) != null ? s : !1;
+    },
+    [o.features]
+  ), h = a(
+    () => (t) => {
+      console.warn(
+        "ConfigProvider: updateConfig called but config is immutable. Consider using state management for dynamic updates."
+      );
+    },
+    []
+  ), b = {
+    config: o,
+    getSpacing: m,
+    getBreakpoint: g,
+    isFeatureEnabled: l,
+    updateConfig: h
+  };
+  return /* @__PURE__ */ N(p.Provider, { value: b, children: n });
+}
+function R() {
+  const n = T(p);
+  if (n === void 0)
+    throw new Error("useConfig must be used within a ConfigProvider");
+  return n;
+}
+export {
+  L as ConfigProvider,
+  R as useConfig
+};
+//# sourceMappingURL=ConfigProvider.js.map

package/dist/granular/ui/providers/ConfigProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfigProvider.js","sources":["../../../../src/ui/providers/ConfigProvider.tsx"],"sourcesContent":["\"use client\";\n\n/* eslint-disable react-refresh/only-export-components */\nimport {\n  createContext,\n  useContext,\n  useMemo,\n  useEffect,\n  type ReactNode,\n} from \"react\";\nimport { SPACING_TOKENS } from \"../tokens/spacing\";\nimport { TYPOGRAPHY_TOKENS } from \"../tokens/typography\";\nimport { BREAKPOINT_TOKENS } from \"../tokens/breakpoints\";\nimport { ANIMATION_TOKENS } from \"../tokens/animations\";\nimport type { BreakpointName, BreakpointToken } from \"../tokens/breakpoints\";\nimport type { SpacingToken } from \"../tokens/spacing\";\n\n/**\n * Design System Configuration\n *\n * Centralizes all design system configuration including:\n * - Breakpoints for responsive design\n * - Design tokens (spacing, typography, colors)\n * - Behavior configurations (animations, transitions)\n * - Feature flags\n */\nexport interface DesignSystemConfig {\n  /**\n   * Responsive breakpoints\n   */\n  breakpoints: Record<\n    BreakpointName,\n    {\n      name: BreakpointName;\n      minWidth: number;\n      px: string;\n      rem: string;\n      tailwind: string;\n    }\n  >;\n\n  /**\n   * Spacing tokens\n   */\n  spacing: typeof SPACING_TOKENS;\n\n  /**\n   * Typography tokens\n   */\n  typography: typeof TYPOGRAPHY_TOKENS;\n\n  /**\n   * Animation tokens\n   */\n  animations: typeof ANIMATION_TOKENS;\n\n  /**\n   * Feature flags\n   */\n  features: {\n    /**\n     * Enable reduced motion for accessibility\n     */\n    reducedMotion?: boolean;\n\n    /**\n     * Enable high contrast mode\n     */\n    highContrast?: boolean;\n\n    /**\n     * Enable debug mode\n     */\n    debug?: boolean;\n  };\n\n  /**\n   * Behavior configurations\n   */\n  behavior: {\n    /**\n     * Default animation duration in ms\n     */\n    defaultAnimationDuration?: number;\n\n    /**\n     * Default transition duration in ms\n     */\n    defaultTransitionDuration?: number;\n\n    /**\n     * Enable focus visible outline\n     */\n    focusVisible?: boolean;\n  };\n}\n\n/**\n * Default design system configuration\n */\nconst defaultConfig: DesignSystemConfig = {\n  breakpoints: BREAKPOINT_TOKENS,\n  spacing: SPACING_TOKENS,\n  typography: TYPOGRAPHY_TOKENS,\n  animations: ANIMATION_TOKENS,\n  features: {\n    reducedMotion: false,\n    highContrast: false,\n    debug: false,\n  },\n  behavior: {\n    defaultAnimationDuration: 200,\n    defaultTransitionDuration: 150,\n    focusVisible: true,\n  },\n};\n\nexport interface ConfigContextValue {\n  config: DesignSystemConfig;\n  /**\n   * Get spacing token by scale\n   */\n  getSpacing: (scale: keyof typeof SPACING_TOKENS) => SpacingToken;\n  /**\n   * Get breakpoint value\n   */\n  getBreakpoint: (name: BreakpointName) => BreakpointToken;\n  /**\n   * Check if feature is enabled\n   */\n  isFeatureEnabled: (feature: keyof DesignSystemConfig[\"features\"]) => boolean;\n  /**\n   * Update configuration (for runtime updates)\n   */\n  updateConfig: (updates: Partial<DesignSystemConfig>) => void;\n}\n\nconst ConfigContext = createContext<ConfigContextValue | undefined>(undefined);\n\nexport interface ConfigProviderProps {\n  children: ReactNode;\n  /**\n   * Custom configuration to override defaults\n   */\n  config?: Partial<DesignSystemConfig>;\n  /**\n   * Strategy for configuration (default, custom, theme-based)\n   */\n  strategy?: \"default\" | \"custom\" | \"theme-based\";\n}\n\n/**\n * ConfigProvider Component\n *\n * Provides design system configuration context to the application.\n * Uses Strategy Pattern for different configuration strategies.\n *\n * @example\n * ```tsx\n * <ConfigProvider config={{ features: { debug: true } }}>\n *   <App />\n * </ConfigProvider>\n * ```\n */\nexport function ConfigProvider({\n  children,\n  config: customConfig,\n  strategy: _strategy = \"default\",\n}: ConfigProviderProps) {\n  // Merge custom config with defaults\n  const config = useMemo<DesignSystemConfig>(() => {\n    const baseConfig = { ...defaultConfig };\n\n    if (customConfig) {\n      return {\n        ...baseConfig,\n        ...customConfig,\n        breakpoints: customConfig.breakpoints || baseConfig.breakpoints,\n        spacing: customConfig.spacing || baseConfig.spacing,\n        typography: customConfig.typography || baseConfig.typography,\n        animations: customConfig.animations || baseConfig.animations,\n        features: {\n          ...baseConfig.features,\n          ...customConfig.features,\n        },\n        behavior: {\n          ...baseConfig.behavior,\n          ...customConfig.behavior,\n        },\n      };\n    }\n\n    return baseConfig;\n  }, [customConfig]);\n\n  // Apply reduced motion if enabled (SSR-safe)\n  useEffect(() => {\n    if (typeof document === \"undefined\") {\n      return;\n    }\n\n    if (config.features.reducedMotion) {\n      document.documentElement.style.setProperty(\"--motion-reduce\", \"1\");\n    } else {\n      document.documentElement.style.removeProperty(\"--motion-reduce\");\n    }\n  }, [config.features.reducedMotion]);\n\n  // Apply high contrast if enabled (SSR-safe)\n  useEffect(() => {\n    if (typeof document === \"undefined\") {\n      return;\n    }\n\n    if (config.features.highContrast) {\n      document.documentElement.classList.add(\"high-contrast\");\n    } else {\n      document.documentElement.classList.remove(\"high-contrast\");\n    }\n  }, [config.features.highContrast]);\n\n  const getSpacing = useMemo(\n    () => (scale: keyof typeof SPACING_TOKENS) => {\n      return config.spacing[scale];\n    },\n    [config.spacing],\n  );\n\n  const getBreakpoint = useMemo(\n    () => (name: BreakpointName) => {\n      return config.breakpoints[name];\n    },\n    [config.breakpoints],\n  );\n\n  const isFeatureEnabled = useMemo(\n    () => (feature: keyof DesignSystemConfig[\"features\"]) => {\n      return config.features[feature] ?? false;\n    },\n    [config.features],\n  );\n\n  const updateConfig = useMemo(\n    () => (_updates: Partial<DesignSystemConfig>) => {\n      // This is a placeholder - in a real implementation, you'd use state\n      // For now, config is immutable. Future enhancement could add state management.\n      console.warn(\n        \"ConfigProvider: updateConfig called but config is immutable. Consider using state management for dynamic updates.\",\n      );\n    },\n    [],\n  );\n\n  const value: ConfigContextValue = {\n    config,\n    getSpacing,\n    getBreakpoint,\n    isFeatureEnabled,\n    updateConfig,\n  };\n\n  return (\n    <ConfigContext.Provider value={value}>{children}</ConfigContext.Provider>\n  );\n}\n\n/**\n * Hook to use config context\n *\n * @throws Error if used outside ConfigProvider\n */\nexport function useConfig(): ConfigContextValue {\n  const context = useContext(ConfigContext);\n  if (context === undefined) {\n    throw new Error(\"useConfig must be used within a ConfigProvider\");\n  }\n  return context;\n}\n"],"names":["defaultConfig","BREAKPOINT_TOKENS","SPACING_TOKENS","TYPOGRAPHY_TOKENS","ANIMATION_TOKENS","ConfigContext","createContext","ConfigProvider","children","customConfig","_strategy","config","useMemo","baseConfig","__spreadValues","__spreadProps","useEffect","getSpacing","scale","getBreakpoint","name","isFeatureEnabled","feature","_a","updateConfig","_updates","value","jsx","useConfig","context","useContext"],"mappings":";;;;;;;;;;;;;;;;;;;AAoGA,MAAMA,IAAoC;AAAA,EACxC,aAAaC;AAAA,EACb,SAASC;AAAA,EACT,YAAYC;AAAA,EACZ,YAAYC;AAAA,EACZ,UAAU;AAAA,IACR,eAAe;AAAA,IACf,cAAc;AAAA,IACd,OAAO;AAAA,EAAA;AAAA,EAET,UAAU;AAAA,IACR,0BAA0B;AAAA,IAC1B,2BAA2B;AAAA,IAC3B,cAAc;AAAA,EAAA;AAElB,GAsBMC,IAAgBC,EAA8C,MAAS;AA2BtE,SAASC,EAAe;AAAA,EAC7B,UAAAC;AAAA,EACA,QAAQC;AAAA,EACR,UAAUC,IAAY;AACxB,GAAwB;AAEtB,QAAMC,IAASC,EAA4B,MAAM;AAC/C,UAAMC,IAAaC,EAAA,IAAKd;AAExB,WAAIS,IACKM,EAAAD,IAAA,IACFD,IACAJ,IAFE;AAAA,MAGL,aAAaA,EAAa,eAAeI,EAAW;AAAA,MACpD,SAASJ,EAAa,WAAWI,EAAW;AAAA,MAC5C,YAAYJ,EAAa,cAAcI,EAAW;AAAA,MAClD,YAAYJ,EAAa,cAAcI,EAAW;AAAA,MAClD,UAAUC,IAAA,IACLD,EAAW,WACXJ,EAAa;AAAA,MAElB,UAAUK,IAAA,IACLD,EAAW,WACXJ,EAAa;AAAA,IAClB,KAIGI;AAAA,EACT,GAAG,CAACJ,CAAY,CAAC;AAGjB,EAAAO,EAAU,MAAM;AACd,IAAI,OAAO,YAAa,gBAIpBL,EAAO,SAAS,gBAClB,SAAS,gBAAgB,MAAM,YAAY,mBAAmB,GAAG,IAEjE,SAAS,gBAAgB,MAAM,eAAe,iBAAiB;AAAA,EAEnE,GAAG,CAACA,EAAO,SAAS,aAAa,CAAC,GAGlCK,EAAU,MAAM;AACd,IAAI,OAAO,YAAa,gBAIpBL,EAAO,SAAS,eAClB,SAAS,gBAAgB,UAAU,IAAI,eAAe,IAEtD,SAAS,gBAAgB,UAAU,OAAO,eAAe;AAAA,EAE7D,GAAG,CAACA,EAAO,SAAS,YAAY,CAAC;AAEjC,QAAMM,IAAaL;AAAA,IACjB,MAAM,CAACM,MACEP,EAAO,QAAQO,CAAK;AAAA,IAE7B,CAACP,EAAO,OAAO;AAAA,EAAA,GAGXQ,IAAgBP;AAAA,IACpB,MAAM,CAACQ,MACET,EAAO,YAAYS,CAAI;AAAA,IAEhC,CAACT,EAAO,WAAW;AAAA,EAAA,GAGfU,IAAmBT;AAAA,IACvB,MAAM,CAACU,MAAkD;;AACvD,cAAOC,IAAAZ,EAAO,SAASW,CAAO,MAAvB,OAAAC,IAA4B;AAAA,IACrC;AAAA,IACA,CAACZ,EAAO,QAAQ;AAAA,EAAA,GAGZa,IAAeZ;AAAA,IACnB,MAAM,CAACa,MAA0C;AAG/C,cAAQ;AAAA,QACN;AAAA,MAAA;AAAA,IAEJ;AAAA,IACA,CAAA;AAAA,EAAC,GAGGC,IAA4B;AAAA,IAChC,QAAAf;AAAA,IACA,YAAAM;AAAA,IACA,eAAAE;AAAA,IACA,kBAAAE;AAAA,IACA,cAAAG;AAAA,EAAA;AAGF,SACE,gBAAAG,EAACtB,EAAc,UAAd,EAAuB,OAAAqB,GAAe,UAAAlB,EAAA,CAAS;AAEpD;AAOO,SAASoB,IAAgC;AAC9C,QAAMC,IAAUC,EAAWzB,CAAa;AACxC,MAAIwB,MAAY;AACd,UAAM,IAAI,MAAM,gDAAgD;AAElE,SAAOA;AACT;"}

package/dist/granular/ui/providers/DialogContext.js

@@ -0,0 +1,20 @@
+"use client";
+import { createContext as e, useContext as o } from "react";
+const n = e(
+  void 0
+);
+function r() {
+  const t = o(n);
+  if (!t)
+    throw new Error("Dialog components must be used within a Dialog component");
+  return t;
+}
+function u() {
+  return o(n);
+}
+export {
+  n as DialogContext,
+  r as useDialogContext,
+  u as useDialogContextOptional
+};
+//# sourceMappingURL=DialogContext.js.map

package/dist/granular/ui/providers/DialogContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogContext.js","sources":["../../../../src/ui/providers/DialogContext.tsx"],"sourcesContent":["\"use client\";\n\nimport { createContext, useContext } from \"react\";\n\nexport interface DialogContextValue {\n  isOpen: boolean;\n  onOpenChange: (open: boolean) => void;\n  onClose: () => void;\n  titleId?: string;\n  descriptionId?: string;\n}\n\nexport const DialogContext = createContext<DialogContextValue | undefined>(\n  undefined,\n);\n\nexport function useDialogContext(): DialogContextValue {\n  const context = useContext(DialogContext);\n  if (!context) {\n    throw new Error(\"Dialog components must be used within a Dialog component\");\n  }\n  return context;\n}\n\nexport function useDialogContextOptional(): DialogContextValue | undefined {\n  return useContext(DialogContext);\n}\n"],"names":["DialogContext","createContext","useDialogContext","context","useContext","useDialogContextOptional"],"mappings":";;AAYO,MAAMA,IAAgBC;AAAA,EAC3B;AACF;AAEO,SAASC,IAAuC;AACrD,QAAMC,IAAUC,EAAWJ,CAAa;AACxC,MAAI,CAACG;AACH,UAAM,IAAI,MAAM,0DAA0D;AAE5E,SAAOA;AACT;AAEO,SAASE,IAA2D;AACzE,SAAOD,EAAWJ,CAAa;AACjC;"}

package/dist/granular/ui/providers/DialogProvider.js

@@ -0,0 +1,32 @@
+"use client";
+import { jsx as n } from "react/jsx-runtime";
+import { useState as v, useEffect as y } from "react";
+import { DialogContext as a } from "./DialogContext.js";
+import { useFocusRestore as p } from "../hooks/useFocusRestore.js";
+function P({
+  children: i,
+  open: e,
+  defaultOpen: l = !1,
+  onOpenChange: t,
+  titleId: f,
+  descriptionId: u
+}) {
+  const [c, d] = v(l), o = e !== void 0 ? e : c, s = (r) => {
+    e === void 0 && d(r), t == null || t(r);
+  };
+  p(o), y(() => (o ? document.body.style.overflow = "hidden" : document.body.style.overflow = "", () => {
+    document.body.style.overflow = "";
+  }), [o]);
+  const m = {
+    isOpen: o,
+    onOpenChange: s,
+    onClose: () => s(!1),
+    titleId: f,
+    descriptionId: u
+  };
+  return /* @__PURE__ */ n(a.Provider, { value: m, children: i });
+}
+export {
+  P as DialogProvider
+};
+//# sourceMappingURL=DialogProvider.js.map

package/dist/granular/ui/providers/DialogProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogProvider.js","sources":["../../../../src/ui/providers/DialogProvider.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState, useEffect, type ReactNode } from \"react\";\nimport { DialogContext, type DialogContextValue } from \"./DialogContext\";\nimport { useFocusRestore } from \"../hooks/useFocusRestore\";\n\nexport interface DialogProviderProps {\n  children: ReactNode;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  titleId?: string;\n  descriptionId?: string;\n}\n\nexport function DialogProvider({\n  children,\n  open: controlledOpen,\n  defaultOpen = false,\n  onOpenChange,\n  titleId,\n  descriptionId,\n}: DialogProviderProps) {\n  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);\n\n  // Use controlled or uncontrolled state\n  const isOpen =\n    controlledOpen !== undefined ? controlledOpen : uncontrolledOpen;\n  const setIsOpen = (newOpen: boolean) => {\n    if (controlledOpen === undefined) {\n      setUncontrolledOpen(newOpen);\n    }\n    onOpenChange?.(newOpen);\n  };\n\n  // Modal focus restore — consumed from the shared hook introduced in\n  // Phase 3 PR 1. Replaces an inline `previousActiveElement` ref +\n  // `setTimeout(0)` block that this hook now owns. Timing identity is\n  // preserved (the hook uses setTimeout(0)), so Dialog.test.tsx's\n  // restore tests do not need to change.\n  useFocusRestore(isOpen);\n\n  // Prevent body scroll when dialog is open\n  useEffect(() => {\n    if (isOpen) {\n      document.body.style.overflow = \"hidden\";\n    } else {\n      document.body.style.overflow = \"\";\n    }\n    return () => {\n      document.body.style.overflow = \"\";\n    };\n  }, [isOpen]);\n\n  const contextValue: DialogContextValue = {\n    isOpen,\n    onOpenChange: setIsOpen,\n    onClose: () => setIsOpen(false),\n    titleId,\n    descriptionId,\n  };\n\n  return (\n    <DialogContext.Provider value={contextValue}>\n      {children}\n    </DialogContext.Provider>\n  );\n}\n"],"names":["DialogProvider","children","controlledOpen","defaultOpen","onOpenChange","titleId","descriptionId","uncontrolledOpen","setUncontrolledOpen","useState","isOpen","setIsOpen","newOpen","useFocusRestore","useEffect","contextValue","DialogContext"],"mappings":";;;;;AAeO,SAASA,EAAe;AAAA,EAC7B,UAAAC;AAAA,EACA,MAAMC;AAAA,EACN,aAAAC,IAAc;AAAA,EACd,cAAAC;AAAA,EACA,SAAAC;AAAA,EACA,eAAAC;AACF,GAAwB;AACtB,QAAM,CAACC,GAAkBC,CAAmB,IAAIC,EAASN,CAAW,GAG9DO,IACJR,MAAmB,SAAYA,IAAiBK,GAC5CI,IAAY,CAACC,MAAqB;AACtC,IAAIV,MAAmB,UACrBM,EAAoBI,CAAO,GAE7BR,KAAA,QAAAA,EAAeQ;AAAA,EACjB;AAOA,EAAAC,EAAgBH,CAAM,GAGtBI,EAAU,OACJJ,IACF,SAAS,KAAK,MAAM,WAAW,WAE/B,SAAS,KAAK,MAAM,WAAW,IAE1B,MAAM;AACX,aAAS,KAAK,MAAM,WAAW;AAAA,EACjC,IACC,CAACA,CAAM,CAAC;AAEX,QAAMK,IAAmC;AAAA,IACvC,QAAAL;AAAA,IACA,cAAcC;AAAA,IACd,SAAS,MAAMA,EAAU,EAAK;AAAA,IAC9B,SAAAN;AAAA,IACA,eAAAC;AAAA,EAAA;AAGF,2BACGU,EAAc,UAAd,EAAuB,OAAOD,GAC5B,UAAAd,GACH;AAEJ;"}

package/dist/granular/ui/providers/ThemeProvider.js

@@ -0,0 +1,56 @@
+"use client";
+import { jsx as m } from "react/jsx-runtime";
+import { useState as d, useEffect as l, useContext as a, createContext as u } from "react";
+import { SEMANTIC_COLORS_LIGHT as h, SEMANTIC_COLORS_DARK as f } from "../tokens/colors/semantic.js";
+const c = u(void 0);
+function C({
+  children: o,
+  defaultTheme: n = "light",
+  storageKey: r = "theme"
+}) {
+  const [t, i] = d(() => {
+    if (typeof window == "undefined")
+      return n;
+    try {
+      const e = localStorage.getItem(r);
+      if (e === "light" || e === "dark")
+        return e;
+    } catch (e) {
+      console.warn("Failed to read theme from localStorage:", e);
+    }
+    return n;
+  });
+  l(() => {
+    if (typeof window != "undefined") {
+      try {
+        localStorage.setItem(r, t);
+      } catch (e) {
+        console.warn("Failed to save theme to localStorage:", e);
+      }
+      typeof document != "undefined" && (document.documentElement.classList.remove("light", "dark"), document.documentElement.classList.add(t));
+    }
+  }, [t, r]);
+  const s = {
+    theme: t,
+    toggleTheme: () => {
+      i((e) => e === "light" ? "dark" : "light");
+    },
+    setTheme: (e) => {
+      i(e);
+    },
+    colors: t === "light" ? h : f,
+    isDark: t === "dark"
+  };
+  return /* @__PURE__ */ m(c.Provider, { value: s, children: o });
+}
+function x() {
+  const o = a(c);
+  if (o === void 0)
+    throw new Error("useTheme must be used within a ThemeProvider");
+  return o;
+}
+export {
+  C as ThemeProvider,
+  x as useTheme
+};
+//# sourceMappingURL=ThemeProvider.js.map

package/dist/granular/ui/providers/ThemeProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeProvider.js","sources":["../../../../src/ui/providers/ThemeProvider.tsx"],"sourcesContent":["\"use client\";\n\n/* eslint-disable react-refresh/only-export-components */\nimport {\n  createContext,\n  useContext,\n  useEffect,\n  useState,\n  type ReactNode,\n} from \"react\";\nimport {\n  SEMANTIC_COLORS_LIGHT,\n  SEMANTIC_COLORS_DARK,\n  type SemanticColorName,\n  type SemanticColor,\n} from \"../tokens/colors/index\";\nimport type { ThemeMode } from \"../tokens\";\n\nexport interface ThemeContextValue {\n  theme: ThemeMode;\n  toggleTheme: () => void;\n  setTheme: (theme: ThemeMode) => void;\n  colors: Record<SemanticColorName, SemanticColor>;\n  isDark: boolean;\n}\n\nconst ThemeContext = createContext<ThemeContextValue | undefined>(undefined);\n\nexport interface ThemeProviderProps {\n  children: ReactNode;\n  defaultTheme?: ThemeMode;\n  storageKey?: string;\n}\n\n/**\n * ThemeProvider Component\n *\n * Provides theme context to the application.\n * Uses Strategy Pattern for different theme strategies (light, dark).\n * Uses Observer Pattern to notify components about theme changes.\n *\n * @example\n * ```tsx\n * <ThemeProvider defaultTheme=\"light\">\n *   <App />\n * </ThemeProvider>\n * ```\n */\nexport function ThemeProvider({\n  children,\n  defaultTheme = \"light\",\n  storageKey = \"theme\",\n}: ThemeProviderProps) {\n  const [theme, setThemeState] = useState<ThemeMode>(() => {\n    if (typeof window === \"undefined\") {\n      return defaultTheme;\n    }\n\n    try {\n      const stored = localStorage.getItem(storageKey);\n      if (stored === \"light\" || stored === \"dark\") {\n        return stored;\n      }\n    } catch (error) {\n      console.warn(\"Failed to read theme from localStorage:\", error);\n    }\n\n    return defaultTheme;\n  });\n\n  useEffect(() => {\n    // Only run in browser (SSR-safe)\n    if (typeof window === \"undefined\") {\n      return;\n    }\n\n    try {\n      localStorage.setItem(storageKey, theme);\n    } catch (error) {\n      console.warn(\"Failed to save theme to localStorage:\", error);\n    }\n\n    // Apply theme class to document root\n    if (typeof document !== \"undefined\") {\n      document.documentElement.classList.remove(\"light\", \"dark\");\n      document.documentElement.classList.add(theme);\n    }\n  }, [theme, storageKey]);\n\n  const toggleTheme = () => {\n    setThemeState((prev) => (prev === \"light\" ? \"dark\" : \"light\"));\n  };\n\n  const setTheme = (newTheme: ThemeMode) => {\n    setThemeState(newTheme);\n  };\n\n  const colors =\n    theme === \"light\" ? SEMANTIC_COLORS_LIGHT : SEMANTIC_COLORS_DARK;\n\n  const value: ThemeContextValue = {\n    theme,\n    toggleTheme,\n    setTheme,\n    colors,\n    isDark: theme === \"dark\",\n  };\n\n  return (\n    <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>\n  );\n}\n\n/**\n * Hook to use theme context\n */\nexport function useTheme(): ThemeContextValue {\n  const context = useContext(ThemeContext);\n  if (context === undefined) {\n    throw new Error(\"useTheme must be used within a ThemeProvider\");\n  }\n  return context;\n}\n"],"names":["ThemeContext","createContext","ThemeProvider","children","defaultTheme","storageKey","theme","setThemeState","useState","stored","error","useEffect","value","prev","newTheme","SEMANTIC_COLORS_LIGHT","SEMANTIC_COLORS_DARK","jsx","useTheme","context","useContext"],"mappings":";;;;AA0BA,MAAMA,IAAeC,EAA6C,MAAS;AAsBpE,SAASC,EAAc;AAAA,EAC5B,UAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,YAAAC,IAAa;AACf,GAAuB;AACrB,QAAM,CAACC,GAAOC,CAAa,IAAIC,EAAoB,MAAM;AACvD,QAAI,OAAO,UAAW;AACpB,aAAOJ;AAGT,QAAI;AACF,YAAMK,IAAS,aAAa,QAAQJ,CAAU;AAC9C,UAAII,MAAW,WAAWA,MAAW;AACnC,eAAOA;AAAA,IAEX,SAASC,GAAO;AACd,cAAQ,KAAK,2CAA2CA,CAAK;AAAA,IAC/D;AAEA,WAAON;AAAA,EACT,CAAC;AAED,EAAAO,EAAU,MAAM;AAEd,QAAI,OAAO,UAAW,aAItB;AAAA,UAAI;AACF,qBAAa,QAAQN,GAAYC,CAAK;AAAA,MACxC,SAASI,GAAO;AACd,gBAAQ,KAAK,yCAAyCA,CAAK;AAAA,MAC7D;AAGA,MAAI,OAAO,YAAa,gBACtB,SAAS,gBAAgB,UAAU,OAAO,SAAS,MAAM,GACzD,SAAS,gBAAgB,UAAU,IAAIJ,CAAK;AAAA;AAAA,EAEhD,GAAG,CAACA,GAAOD,CAAU,CAAC;AAatB,QAAMO,IAA2B;AAAA,IAC/B,OAAAN;AAAA,IACA,aAbkB,MAAM;AACxB,MAAAC,EAAc,CAACM,MAAUA,MAAS,UAAU,SAAS,OAAQ;AAAA,IAC/D;AAAA,IAYE,UAVe,CAACC,MAAwB;AACxC,MAAAP,EAAcO,CAAQ;AAAA,IACxB;AAAA,IASE,QANAR,MAAU,UAAUS,IAAwBC;AAAA,IAO5C,QAAQV,MAAU;AAAA,EAAA;AAGpB,SACE,gBAAAW,EAACjB,EAAa,UAAb,EAAsB,OAAAY,GAAe,UAAAT,EAAA,CAAS;AAEnD;AAKO,SAASe,IAA8B;AAC5C,QAAMC,IAAUC,EAAWpB,CAAY;AACvC,MAAImB,MAAY;AACd,UAAM,IAAI,MAAM,8CAA8C;AAEhE,SAAOA;AACT;"}

package/dist/granular/ui/providers/ToastContext.js

@@ -0,0 +1,20 @@
+"use client";
+import { createContext as n, useContext as o } from "react";
+const e = n(
+  void 0
+);
+function s() {
+  const t = o(e);
+  if (!t)
+    throw new Error("Toast components must be used within a ToastProvider");
+  return t;
+}
+function i() {
+  return o(e);
+}
+export {
+  e as ToastContext,
+  s as useToastContext,
+  i as useToastContextOptional
+};
+//# sourceMappingURL=ToastContext.js.map

package/dist/granular/ui/providers/ToastContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastContext.js","sources":["../../../../src/ui/providers/ToastContext.tsx"],"sourcesContent":["\"use client\";\n\nimport { createContext, useContext } from \"react\";\n\nexport type ToastVariant = \"success\" | \"error\" | \"warning\" | \"info\";\n\nexport interface Toast {\n  id: string;\n  title: string;\n  description?: string;\n  variant: ToastVariant;\n  duration?: number; // in milliseconds, undefined = no auto-dismiss\n  action?: {\n    label: string;\n    onClick: () => void;\n  };\n}\n\nexport interface ToastContextValue {\n  toasts: Toast[];\n  addToast: (toast: Omit<Toast, \"id\">) => string;\n  removeToast: (id: string) => void;\n  clearAll: () => void;\n}\n\nexport const ToastContext = createContext<ToastContextValue | undefined>(\n  undefined,\n);\n\nexport function useToastContext(): ToastContextValue {\n  const context = useContext(ToastContext);\n  if (!context) {\n    throw new Error(\"Toast components must be used within a ToastProvider\");\n  }\n  return context;\n}\n\nexport function useToastContextOptional(): ToastContextValue | undefined {\n  return useContext(ToastContext);\n}\n"],"names":["ToastContext","createContext","useToastContext","context","useContext","useToastContextOptional"],"mappings":";;AAyBO,MAAMA,IAAeC;AAAA,EAC1B;AACF;AAEO,SAASC,IAAqC;AACnD,QAAMC,IAAUC,EAAWJ,CAAY;AACvC,MAAI,CAACG;AACH,UAAM,IAAI,MAAM,sDAAsD;AAExE,SAAOA;AACT;AAEO,SAASE,IAAyD;AACvE,SAAOD,EAAWJ,CAAY;AAChC;"}

package/dist/granular/ui/providers/ToastProvider.js

@@ -0,0 +1,47 @@
+"use client";
+var C = Object.defineProperty, P = Object.defineProperties;
+var S = Object.getOwnPropertyDescriptors;
+var d = Object.getOwnPropertySymbols;
+var $ = Object.prototype.hasOwnProperty, b = Object.prototype.propertyIsEnumerable;
+var u = (e, t, o) => t in e ? C(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o, l = (e, t) => {
+  for (var o in t || (t = {}))
+    $.call(t, o) && u(e, o, t[o]);
+  if (d)
+    for (var o of d(t))
+      b.call(t, o) && u(e, o, t[o]);
+  return e;
+}, m = (e, t) => P(e, S(t));
+import { jsx as g } from "react/jsx-runtime";
+import { useState as h, useCallback as c } from "react";
+import { ToastContext as j } from "./ToastContext.js";
+function y({
+  children: e,
+  defaultDuration: t = 5e3,
+  maxToasts: o = 5
+}) {
+  const [p, n] = h([]), T = c(
+    (r) => {
+      var i;
+      const s = `toast-${Date.now()}-${Math.random().toString(36).slice(2, 11)}`, a = m(l({}, r), {
+        id: s,
+        duration: (i = r.duration) != null ? i : t
+      });
+      return n((w) => [a, ...w].slice(0, o)), s;
+    },
+    [t, o]
+  ), f = c((r) => {
+    n((s) => s.filter((a) => a.id !== r));
+  }, []), v = c(() => {
+    n([]);
+  }, []), x = {
+    toasts: p,
+    addToast: T,
+    removeToast: f,
+    clearAll: v
+  };
+  return /* @__PURE__ */ g(j.Provider, { value: x, children: e });
+}
+export {
+  y as ToastProvider
+};
+//# sourceMappingURL=ToastProvider.js.map

package/dist/granular/ui/providers/ToastProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastProvider.js","sources":["../../../../src/ui/providers/ToastProvider.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState, useCallback, type ReactNode } from \"react\";\nimport {\n  ToastContext,\n  type Toast,\n  type ToastContextValue,\n} from \"./ToastContext\";\n\nexport interface ToastProviderProps {\n  children: ReactNode;\n  defaultDuration?: number; // Default auto-dismiss duration in ms\n  maxToasts?: number; // Maximum number of toasts to show\n}\n\nexport function ToastProvider({\n  children,\n  defaultDuration = 5000,\n  maxToasts = 5,\n}: ToastProviderProps) {\n  const [toasts, setToasts] = useState<Toast[]>([]);\n\n  const addToast = useCallback(\n    (toast: Omit<Toast, \"id\">): string => {\n      const id = `toast-${Date.now()}-${Math.random().toString(36).slice(2, 11)}`;\n      const newToast: Toast = {\n        ...toast,\n        id,\n        duration: toast.duration ?? defaultDuration,\n      };\n\n      setToasts((prev) => {\n        const updated = [newToast, ...prev];\n        // Limit number of toasts\n        return updated.slice(0, maxToasts);\n      });\n\n      return id;\n    },\n    [defaultDuration, maxToasts],\n  );\n\n  const removeToast = useCallback((id: string) => {\n    setToasts((prev) => prev.filter((toast) => toast.id !== id));\n  }, []);\n\n  const clearAll = useCallback(() => {\n    setToasts([]);\n  }, []);\n\n  const contextValue: ToastContextValue = {\n    toasts,\n    addToast,\n    removeToast,\n    clearAll,\n  };\n\n  return (\n    <ToastContext.Provider value={contextValue}>\n      {children}\n    </ToastContext.Provider>\n  );\n}\n"],"names":["ToastProvider","children","defaultDuration","maxToasts","toasts","setToasts","useState","addToast","useCallback","toast","id","newToast","__spreadProps","__spreadValues","_a","prev","removeToast","clearAll","contextValue","ToastContext"],"mappings":";;;;;;;;;;;;;;;;AAeO,SAASA,EAAc;AAAA,EAC5B,UAAAC;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,WAAAC,IAAY;AACd,GAAuB;AACrB,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAkB,CAAA,CAAE,GAE1CC,IAAWC;AAAA,IACf,CAACC,MAAqC;;AACpC,YAAMC,IAAK,SAAS,KAAK,IAAA,CAAK,IAAI,KAAK,OAAA,EAAS,SAAS,EAAE,EAAE,MAAM,GAAG,EAAE,CAAC,IACnEC,IAAkBC,EAAAC,EAAA,IACnBJ,IADmB;AAAA,QAEtB,IAAAC;AAAA,QACA,WAAUI,IAAAL,EAAM,aAAN,OAAAK,IAAkBZ;AAAA,MAAA;AAG9B,aAAAG,EAAU,CAACU,MACO,CAACJ,GAAU,GAAGI,CAAI,EAEnB,MAAM,GAAGZ,CAAS,CAClC,GAEMO;AAAA,IACT;AAAA,IACA,CAACR,GAAiBC,CAAS;AAAA,EAAA,GAGvBa,IAAcR,EAAY,CAACE,MAAe;AAC9C,IAAAL,EAAU,CAACU,MAASA,EAAK,OAAO,CAACN,MAAUA,EAAM,OAAOC,CAAE,CAAC;AAAA,EAC7D,GAAG,CAAA,CAAE,GAECO,IAAWT,EAAY,MAAM;AACjC,IAAAH,EAAU,CAAA,CAAE;AAAA,EACd,GAAG,CAAA,CAAE,GAECa,IAAkC;AAAA,IACtC,QAAAd;AAAA,IACA,UAAAG;AAAA,IACA,aAAAS;AAAA,IACA,UAAAC;AAAA,EAAA;AAGF,2BACGE,EAAa,UAAb,EAAsB,OAAOD,GAC3B,UAAAjB,GACH;AAEJ;"}

package/dist/granular/ui/providers/providers-bundle.js

@@ -0,0 +1,23 @@
+"use client";
+import { ThemeProvider as o } from "./ThemeProvider.js";
+import { useTheme as v } from "./ThemeProvider.js";
+import { ConfigProvider as r } from "./ConfigProvider.js";
+import { useConfig as u } from "./ConfigProvider.js";
+import { ToastProvider as e } from "./ToastProvider.js";
+import { DialogProvider as i } from "./DialogProvider.js";
+const d = {
+  ThemeProvider: o,
+  ConfigProvider: r,
+  ToastProvider: e,
+  DialogProvider: i
+};
+export {
+  r as ConfigProvider,
+  i as DialogProvider,
+  d as ProvidersBundle,
+  o as ThemeProvider,
+  e as ToastProvider,
+  u as useConfig,
+  v as useTheme
+};
+//# sourceMappingURL=providers-bundle.js.map

package/dist/granular/ui/providers/providers-bundle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"providers-bundle.js","sources":["../../../../src/ui/providers/providers-bundle.ts"],"sourcesContent":["/**\n * PROVIDERS BUNDLE - Turbopack Compatibility\n *\n * This file creates a single module boundary for all providers to prevent\n * Turbopack from code-splitting them incorrectly. All providers are imported\n * and re-exported from this single file, ensuring they're in the same chunk.\n *\n * CRITICAL: This file must be imported before any provider is used to ensure\n * correct initialization order in Turbopack builds.\n */\n\n// Import all providers in dependency order\nimport {\n  ThemeProvider,\n  type ThemeProviderProps,\n  type ThemeContextValue,\n} from \"./ThemeProvider\";\nimport {\n  ConfigProvider,\n  type ConfigProviderProps,\n  type DesignSystemConfig,\n  type ConfigContextValue,\n} from \"./ConfigProvider\";\nimport { ToastProvider, type ToastProviderProps } from \"./ToastProvider\";\nimport { DialogProvider, type DialogProviderProps } from \"./DialogProvider\";\nimport { useTheme } from \"./ThemeProvider\";\nimport { useConfig } from \"./ConfigProvider\";\nimport {\n  useToastContext,\n  useToastContextOptional,\n  type Toast,\n  type ToastContextValue,\n  type ToastVariant,\n} from \"./ToastContext\";\nimport {\n  useDialogContext,\n  useDialogContextOptional,\n  type DialogContextValue,\n} from \"./DialogContext\";\nimport { ToastContext } from \"./ToastContext\";\nimport { DialogContext } from \"./DialogContext\";\n\n/**\n * Providers Bundle Object\n *\n * This object ensures all providers are referenced together, creating a\n * module boundary that Turbopack cannot break. By accessing providers\n * through this object, we guarantee they're all in the same chunk.\n */\nexport const ProvidersBundle = {\n  ThemeProvider,\n  ConfigProvider,\n  ToastProvider,\n  DialogProvider,\n  // Contexts\n  ToastContext,\n  DialogContext,\n  // Hooks\n  useTheme,\n  useConfig,\n  useToastContext,\n  useToastContextOptional,\n  useDialogContext,\n  useDialogContextOptional,\n} as const;\n\n// Re-export all providers individually for convenience\nexport {\n  ThemeProvider,\n  ConfigProvider,\n  ToastProvider,\n  DialogProvider,\n  useTheme,\n  useConfig,\n  useToastContext,\n  useToastContextOptional,\n  useDialogContext,\n  useDialogContextOptional,\n  ToastContext,\n  DialogContext,\n};\n\n// Re-export types\nexport type {\n  ThemeProviderProps,\n  ThemeContextValue,\n  ConfigProviderProps,\n  DesignSystemConfig,\n  ConfigContextValue,\n  ToastProviderProps,\n  DialogProviderProps,\n  Toast,\n  ToastContextValue,\n  ToastVariant,\n  DialogContextValue,\n};\n"],"names":["ProvidersBundle","ThemeProvider","ConfigProvider","ToastProvider","DialogProvider"],"mappings":";;;;;;;AAiDO,MAAMA,IAAkB;AAAA,EAC7B,eAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,eAAAC;AAAA,EACA,gBAAAC;AAWF;"}

package/dist/granular/ui/tokens/animations.js

@@ -0,0 +1,106 @@
+"use client";
+class a {
+  /**
+   * Create an animation token
+   */
+  static create(i, e = "ease-in-out") {
+    const s = {
+      fast: {
+        value: "150ms",
+        ms: 150,
+        tailwind: "duration-150"
+      },
+      base: {
+        value: "200ms",
+        ms: 200,
+        tailwind: "duration-200"
+      },
+      slow: {
+        value: "300ms",
+        ms: 300,
+        tailwind: "duration-300"
+      },
+      slower: {
+        value: "500ms",
+        ms: 500,
+        tailwind: "duration-500"
+      }
+    }, n = {
+      "ease-in": {
+        value: "cubic-bezier(0.4, 0, 1, 1)",
+        tailwind: "ease-in",
+        description: "Slow start, fast end"
+      },
+      "ease-out": {
+        value: "cubic-bezier(0, 0, 0.2, 1)",
+        tailwind: "ease-out",
+        description: "Fast start, slow end"
+      },
+      "ease-in-out": {
+        value: "cubic-bezier(0.4, 0, 0.2, 1)",
+        tailwind: "ease-in-out",
+        description: "Slow start and end, fast middle"
+      },
+      spring: {
+        value: "cubic-bezier(0.68, -0.55, 0.265, 1.55)",
+        tailwind: "ease-[cubic-bezier(0.68,-0.55,0.265,1.55)]",
+        description: "Spring-like bounce effect"
+      }
+    };
+    return {
+      duration: s[i],
+      easing: n[e]
+    };
+  }
+  /**
+   * Create a transition token
+   */
+  static createTransition(i, e = "base", s = "ease-in-out") {
+    const n = this.create(e, s), o = Array.isArray(i) ? i.join(", ") : i, r = [
+      n.duration.tailwind,
+      n.easing.tailwind
+    ].join(" ");
+    return {
+      property: o,
+      duration: n.duration.value,
+      timingFunction: n.easing.value,
+      tailwind: r
+    };
+  }
+}
+const c = {
+  fast: a.create("fast"),
+  base: a.create("base"),
+  slow: a.create("slow"),
+  slower: a.create("slower"),
+  // Common transitions
+  colors: a.createTransition(
+    ["color", "background-color", "border-color"],
+    "base"
+  ),
+  opacity: a.createTransition("opacity", "fast"),
+  transform: a.createTransition("transform", "base"),
+  all: a.createTransition("all", "base")
+};
+function l(t, i) {
+  return a.create(t, i);
+}
+function u(t, i = "ease-in-out") {
+  const e = a.create(t, i);
+  return `${e.duration.tailwind} ${e.easing.tailwind}`;
+}
+function d(t, i = "base", e = "ease-in-out") {
+  return a.createTransition(
+    t,
+    i,
+    e
+  ).tailwind;
+}
+export {
+  c as ANIMATION_TOKENS,
+  a as AnimationTokenFactory,
+  l as getAnimation,
+  u as getAnimationClass,
+  d as getTransitionClass
+};
+//# sourceMappingURL=animations.js.map

package/dist/granular/ui/tokens/animations.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"animations.js","sources":["../../../../src/ui/tokens/animations.ts"],"sourcesContent":["/**\n * Animation Tokens\n *\n * Centralized animation and transition system for consistent timing and easing.\n * Uses Factory Pattern for type-safe token creation.\n */\n\nexport type AnimationDuration = \"fast\" | \"base\" | \"slow\" | \"slower\";\nexport type EasingFunction = \"ease-in\" | \"ease-out\" | \"ease-in-out\" | \"spring\";\n\nexport interface AnimationToken {\n  duration: {\n    value: string;\n    ms: number;\n    tailwind: string;\n  };\n  easing: {\n    value: string;\n    tailwind: string;\n    description: string;\n  };\n}\n\nexport interface TransitionToken {\n  property: string;\n  duration: string;\n  timingFunction: string;\n  tailwind: string;\n}\n\n/**\n * Animation Token Factory\n * Creates animation tokens with consistent timing and easing\n */\nexport class AnimationTokenFactory {\n  /**\n   * Create an animation token\n   */\n  static create(\n    duration: AnimationDuration,\n    easing: EasingFunction = \"ease-in-out\",\n  ): AnimationToken {\n    const durationMap: Record<\n      AnimationDuration,\n      { value: string; ms: number; tailwind: string }\n    > = {\n      fast: {\n        value: \"150ms\",\n        ms: 150,\n        tailwind: \"duration-150\",\n      },\n      base: {\n        value: \"200ms\",\n        ms: 200,\n        tailwind: \"duration-200\",\n      },\n      slow: {\n        value: \"300ms\",\n        ms: 300,\n        tailwind: \"duration-300\",\n      },\n      slower: {\n        value: \"500ms\",\n        ms: 500,\n        tailwind: \"duration-500\",\n      },\n    };\n\n    const easingMap: Record<\n      EasingFunction,\n      { value: string; tailwind: string; description: string }\n    > = {\n      \"ease-in\": {\n        value: \"cubic-bezier(0.4, 0, 1, 1)\",\n        tailwind: \"ease-in\",\n        description: \"Slow start, fast end\",\n      },\n      \"ease-out\": {\n        value: \"cubic-bezier(0, 0, 0.2, 1)\",\n        tailwind: \"ease-out\",\n        description: \"Fast start, slow end\",\n      },\n      \"ease-in-out\": {\n        value: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n        tailwind: \"ease-in-out\",\n        description: \"Slow start and end, fast middle\",\n      },\n      spring: {\n        value: \"cubic-bezier(0.68, -0.55, 0.265, 1.55)\",\n        tailwind: \"ease-[cubic-bezier(0.68,-0.55,0.265,1.55)]\",\n        description: \"Spring-like bounce effect\",\n      },\n    };\n\n    return {\n      duration: durationMap[duration],\n      easing: easingMap[easing],\n    };\n  }\n\n  /**\n   * Create a transition token\n   */\n  static createTransition(\n    property: string | string[],\n    duration: AnimationDuration = \"base\",\n    easing: EasingFunction = \"ease-in-out\",\n  ): TransitionToken {\n    const durationToken = this.create(duration, easing);\n    const properties = Array.isArray(property) ? property.join(\", \") : property;\n    const tailwindClasses = [\n      durationToken.duration.tailwind,\n      durationToken.easing.tailwind,\n    ].join(\" \");\n\n    return {\n      property: properties,\n      duration: durationToken.duration.value,\n      timingFunction: durationToken.easing.value,\n      tailwind: tailwindClasses,\n    };\n  }\n}\n\n/**\n * Pre-defined animation tokens\n */\nexport const ANIMATION_TOKENS = {\n  fast: AnimationTokenFactory.create(\"fast\"),\n  base: AnimationTokenFactory.create(\"base\"),\n  slow: AnimationTokenFactory.create(\"slow\"),\n  slower: AnimationTokenFactory.create(\"slower\"),\n\n  // Common transitions\n  colors: AnimationTokenFactory.createTransition(\n    [\"color\", \"background-color\", \"border-color\"],\n    \"base\",\n  ),\n  opacity: AnimationTokenFactory.createTransition(\"opacity\", \"fast\"),\n  transform: AnimationTokenFactory.createTransition(\"transform\", \"base\"),\n  all: AnimationTokenFactory.createTransition(\"all\", \"base\"),\n} as const;\n\n/**\n * Helper function to get animation token\n */\nexport function getAnimation(\n  duration: AnimationDuration,\n  easing?: EasingFunction,\n): AnimationToken {\n  return AnimationTokenFactory.create(duration, easing);\n}\n\n/**\n * Helper function to get animation classes\n */\nexport function getAnimationClass(\n  duration: AnimationDuration,\n  easing: EasingFunction = \"ease-in-out\",\n): string {\n  const token = AnimationTokenFactory.create(duration, easing);\n  return `${token.duration.tailwind} ${token.easing.tailwind}`;\n}\n\n/**\n * Helper function to get transition classes\n */\nexport function getTransitionClass(\n  property: string | string[],\n  duration: AnimationDuration = \"base\",\n  easing: EasingFunction = \"ease-in-out\",\n): string {\n  const transition = AnimationTokenFactory.createTransition(\n    property,\n    duration,\n    easing,\n  );\n  return transition.tailwind;\n}\n"],"names":["AnimationTokenFactory","duration","easing","durationMap","easingMap","property","durationToken","properties","tailwindClasses","ANIMATION_TOKENS","getAnimation","getAnimationClass","token","getTransitionClass"],"mappings":";AAkCO,MAAMA,EAAsB;AAAA;AAAA;AAAA;AAAA,EAIjC,OAAO,OACLC,GACAC,IAAyB,eACT;AAChB,UAAMC,IAGF;AAAA,MACF,MAAM;AAAA,QACJ,OAAO;AAAA,QACP,IAAI;AAAA,QACJ,UAAU;AAAA,MAAA;AAAA,MAEZ,MAAM;AAAA,QACJ,OAAO;AAAA,QACP,IAAI;AAAA,QACJ,UAAU;AAAA,MAAA;AAAA,MAEZ,MAAM;AAAA,QACJ,OAAO;AAAA,QACP,IAAI;AAAA,QACJ,UAAU;AAAA,MAAA;AAAA,MAEZ,QAAQ;AAAA,QACN,OAAO;AAAA,QACP,IAAI;AAAA,QACJ,UAAU;AAAA,MAAA;AAAA,IACZ,GAGIC,IAGF;AAAA,MACF,WAAW;AAAA,QACT,OAAO;AAAA,QACP,UAAU;AAAA,QACV,aAAa;AAAA,MAAA;AAAA,MAEf,YAAY;AAAA,QACV,OAAO;AAAA,QACP,UAAU;AAAA,QACV,aAAa;AAAA,MAAA;AAAA,MAEf,eAAe;AAAA,QACb,OAAO;AAAA,QACP,UAAU;AAAA,QACV,aAAa;AAAA,MAAA;AAAA,MAEf,QAAQ;AAAA,QACN,OAAO;AAAA,QACP,UAAU;AAAA,QACV,aAAa;AAAA,MAAA;AAAA,IACf;AAGF,WAAO;AAAA,MACL,UAAUD,EAAYF,CAAQ;AAAA,MAC9B,QAAQG,EAAUF,CAAM;AAAA,IAAA;AAAA,EAE5B;AAAA;AAAA;AAAA;AAAA,EAKA,OAAO,iBACLG,GACAJ,IAA8B,QAC9BC,IAAyB,eACR;AACjB,UAAMI,IAAgB,KAAK,OAAOL,GAAUC,CAAM,GAC5CK,IAAa,MAAM,QAAQF,CAAQ,IAAIA,EAAS,KAAK,IAAI,IAAIA,GAC7DG,IAAkB;AAAA,MACtBF,EAAc,SAAS;AAAA,MACvBA,EAAc,OAAO;AAAA,IAAA,EACrB,KAAK,GAAG;AAEV,WAAO;AAAA,MACL,UAAUC;AAAA,MACV,UAAUD,EAAc,SAAS;AAAA,MACjC,gBAAgBA,EAAc,OAAO;AAAA,MACrC,UAAUE;AAAA,IAAA;AAAA,EAEd;AACF;AAKO,MAAMC,IAAmB;AAAA,EAC9B,MAAMT,EAAsB,OAAO,MAAM;AAAA,EACzC,MAAMA,EAAsB,OAAO,MAAM;AAAA,EACzC,MAAMA,EAAsB,OAAO,MAAM;AAAA,EACzC,QAAQA,EAAsB,OAAO,QAAQ;AAAA;AAAA,EAG7C,QAAQA,EAAsB;AAAA,IAC5B,CAAC,SAAS,oBAAoB,cAAc;AAAA,IAC5C;AAAA,EAAA;AAAA,EAEF,SAASA,EAAsB,iBAAiB,WAAW,MAAM;AAAA,EACjE,WAAWA,EAAsB,iBAAiB,aAAa,MAAM;AAAA,EACrE,KAAKA,EAAsB,iBAAiB,OAAO,MAAM;AAC3D;AAKO,SAASU,EACdT,GACAC,GACgB;AAChB,SAAOF,EAAsB,OAAOC,GAAUC,CAAM;AACtD;AAKO,SAASS,EACdV,GACAC,IAAyB,eACjB;AACR,QAAMU,IAAQZ,EAAsB,OAAOC,GAAUC,CAAM;AAC3D,SAAO,GAAGU,EAAM,SAAS,QAAQ,IAAIA,EAAM,OAAO,QAAQ;AAC5D;AAKO,SAASC,EACdR,GACAJ,IAA8B,QAC9BC,IAAyB,eACjB;AAMR,SALmBF,EAAsB;AAAA,IACvCK;AAAA,IACAJ;AAAA,IACAC;AAAA,EAAA,EAEgB;AACpB;"}

package/dist/granular/ui/tokens/borders.js

@@ -0,0 +1,54 @@
+"use client";
+class e {
+  /**
+   * Create a border width token
+   */
+  static createWidth(t) {
+    const a = {
+      none: {
+        px: 0,
+        tailwind: "border-0"
+      },
+      thin: {
+        px: 1,
+        tailwind: "border"
+      },
+      base: {
+        px: 1,
+        tailwind: "border"
+      },
+      medium: {
+        px: 2,
+        tailwind: "border-2"
+      },
+      thick: {
+        px: 4,
+        tailwind: "border-4"
+      }
+    }[t];
+    return {
+      value: a.px,
+      px: `${a.px}px`,
+      tailwind: a.tailwind
+    };
+  }
+  /**
+   * Create a complete border token
+   */
+  static create(t, i = "solid") {
+    return {
+      width: this.createWidth(t),
+      style: i,
+      description: `${t} ${i} border`
+    };
+  }
+}
+e.create("none"), e.create("thin"), e.create("base"), e.create("medium"), e.create("thick"), e.create("thin", "dashed"), e.create("base", "dashed"), e.create("thin", "dotted"), e.create("base", "dotted");
+function r(d) {
+  return e.createWidth(d).tailwind;
+}
+export {
+  e as BorderTokenFactory,
+  r as getBorderWidthClass
+};
+//# sourceMappingURL=borders.js.map

package/dist/granular/ui/tokens/borders.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"borders.js","sources":["../../../../src/ui/tokens/borders.ts"],"sourcesContent":["/**\n * Border Tokens\n *\n * Centralized border system for consistent borders and dividers.\n * Uses Factory Pattern for type-safe token creation.\n */\n\nexport type BorderWidth = \"none\" | \"thin\" | \"base\" | \"medium\" | \"thick\";\nexport type BorderStyle = \"solid\" | \"dashed\" | \"dotted\";\n\nexport interface BorderToken {\n  width: {\n    value: number;\n    px: string;\n    tailwind: string;\n  };\n  style: BorderStyle;\n  description: string;\n}\n\n/**\n * Border Token Factory\n * Creates border tokens with consistent values\n */\nexport class BorderTokenFactory {\n  /**\n   * Create a border width token\n   */\n  static createWidth(width: BorderWidth): BorderToken[\"width\"] {\n    const widthMap: Record<BorderWidth, { px: number; tailwind: string }> = {\n      none: {\n        px: 0,\n        tailwind: \"border-0\",\n      },\n      thin: {\n        px: 1,\n        tailwind: \"border\",\n      },\n      base: {\n        px: 1,\n        tailwind: \"border\",\n      },\n      medium: {\n        px: 2,\n        tailwind: \"border-2\",\n      },\n      thick: {\n        px: 4,\n        tailwind: \"border-4\",\n      },\n    };\n\n    const config = widthMap[width];\n    return {\n      value: config.px,\n      px: `${config.px}px`,\n      tailwind: config.tailwind,\n    };\n  }\n\n  /**\n   * Create a complete border token\n   */\n  static create(width: BorderWidth, style: BorderStyle = \"solid\"): BorderToken {\n    return {\n      width: this.createWidth(width),\n      style,\n      description: `${width} ${style} border`,\n    };\n  }\n}\n\n/**\n * Pre-defined border tokens\n */\nexport const BORDER_TOKENS = {\n  none: BorderTokenFactory.create(\"none\"),\n  thin: BorderTokenFactory.create(\"thin\"),\n  base: BorderTokenFactory.create(\"base\"),\n  medium: BorderTokenFactory.create(\"medium\"),\n  thick: BorderTokenFactory.create(\"thick\"),\n  // Dashed variants\n  thinDashed: BorderTokenFactory.create(\"thin\", \"dashed\"),\n  baseDashed: BorderTokenFactory.create(\"base\", \"dashed\"),\n  // Dotted variants\n  thinDotted: BorderTokenFactory.create(\"thin\", \"dotted\"),\n  baseDotted: BorderTokenFactory.create(\"base\", \"dotted\"),\n} as const;\n\n/**\n * Helper function to get border token\n */\nexport function getBorder(size: keyof typeof BORDER_TOKENS): BorderToken {\n  return BORDER_TOKENS[size];\n}\n\n/**\n * Helper function to get border width as Tailwind class\n */\nexport function getBorderWidthClass(width: BorderWidth): string {\n  return BorderTokenFactory.createWidth(width).tailwind;\n}\n\n/**\n * Helper function to get border style as Tailwind class\n */\nexport function getBorderStyleClass(style: BorderStyle): string {\n  const styleMap: Record<BorderStyle, string> = {\n    solid: \"border-solid\",\n    dashed: \"border-dashed\",\n    dotted: \"border-dotted\",\n  };\n  return styleMap[style];\n}\n\n/**\n * Helper function to get complete border classes\n */\nexport function getBorderClasses(\n  width: BorderWidth,\n  style: BorderStyle = \"solid\",\n): string {\n  return `${getBorderWidthClass(width)} ${getBorderStyleClass(style)}`;\n}\n"],"names":["BorderTokenFactory","width","config","style","getBorderWidthClass"],"mappings":";AAwBO,MAAMA,EAAmB;AAAA;AAAA;AAAA;AAAA,EAI9B,OAAO,YAAYC,GAA0C;AAwB3D,UAAMC,IAvBkE;AAAA,MACtE,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,UAAU;AAAA,MAAA;AAAA,MAEZ,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,UAAU;AAAA,MAAA;AAAA,MAEZ,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,UAAU;AAAA,MAAA;AAAA,MAEZ,QAAQ;AAAA,QACN,IAAI;AAAA,QACJ,UAAU;AAAA,MAAA;AAAA,MAEZ,OAAO;AAAA,QACL,IAAI;AAAA,QACJ,UAAU;AAAA,MAAA;AAAA,IACZ,EAGsBD,CAAK;AAC7B,WAAO;AAAA,MACL,OAAOC,EAAO;AAAA,MACd,IAAI,GAAGA,EAAO,EAAE;AAAA,MAChB,UAAUA,EAAO;AAAA,IAAA;AAAA,EAErB;AAAA;AAAA;AAAA;AAAA,EAKA,OAAO,OAAOD,GAAoBE,IAAqB,SAAsB;AAC3E,WAAO;AAAA,MACL,OAAO,KAAK,YAAYF,CAAK;AAAA,MAC7B,OAAAE;AAAA,MACA,aAAa,GAAGF,CAAK,IAAIE,CAAK;AAAA,IAAA;AAAA,EAElC;AACF;AAMQH,EAAmB,OAAO,MAAM,GAChCA,EAAmB,OAAO,MAAM,GAChCA,EAAmB,OAAO,MAAM,GAC9BA,EAAmB,OAAO,QAAQ,GACnCA,EAAmB,OAAO,OAAO,GAE5BA,EAAmB,OAAO,QAAQ,QAAQ,GAC1CA,EAAmB,OAAO,QAAQ,QAAQ,GAE1CA,EAAmB,OAAO,QAAQ,QAAQ,GAC1CA,EAAmB,OAAO,QAAQ,QAAQ;AAajD,SAASI,EAAoBH,GAA4B;AAC9D,SAAOD,EAAmB,YAAYC,CAAK,EAAE;AAC/C;"}

package/dist/granular/ui/tokens/breakpoints.js

@@ -0,0 +1,43 @@
+"use client";
+class t {
+  /**
+   * Create breakpoint token
+   */
+  static create(e) {
+    const i = {
+      sm: { minWidth: 640, tailwind: "sm" },
+      md: { minWidth: 768, tailwind: "md" },
+      lg: { minWidth: 1024, tailwind: "lg" },
+      xl: { minWidth: 1280, tailwind: "xl" },
+      "2xl": { minWidth: 1536, tailwind: "2xl" }
+    }[e];
+    return {
+      name: e,
+      minWidth: i.minWidth,
+      px: `${i.minWidth}px`,
+      rem: `${i.minWidth / 16}rem`,
+      tailwind: i.tailwind
+    };
+  }
+}
+const r = {
+  sm: t.create("sm"),
+  md: t.create("md"),
+  lg: t.create("lg"),
+  xl: t.create("xl"),
+  "2xl": t.create("2xl")
+};
+function d(n) {
+  return r[n];
+}
+function m(n, e = "min") {
+  const a = r[n];
+  return `@media (${e === "min" ? "min-width" : "max-width"}: ${a.px})`;
+}
+export {
+  r as BREAKPOINT_TOKENS,
+  t as BreakpointTokenFactory,
+  d as getBreakpoint,
+  m as getMediaQuery
+};
+//# sourceMappingURL=breakpoints.js.map

package/dist/granular/ui/tokens/breakpoints.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breakpoints.js","sources":["../../../../src/ui/tokens/breakpoints.ts"],"sourcesContent":["/**\n * Breakpoint Tokens\n *\n * Responsive breakpoints for consistent media queries.\n * Uses Factory Pattern for type-safe breakpoint creation.\n */\n\nexport type BreakpointName = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\n\nexport interface BreakpointToken {\n  name: BreakpointName;\n  minWidth: number;\n  px: string;\n  rem: string;\n  tailwind: string;\n}\n\n/**\n * Breakpoint Token Factory\n * Creates breakpoint tokens with consistent values\n */\nexport class BreakpointTokenFactory {\n  /**\n   * Create breakpoint token\n   */\n  static create(name: BreakpointName): BreakpointToken {\n    const breakpointMap: Record<\n      BreakpointName,\n      { minWidth: number; tailwind: string }\n    > = {\n      sm: { minWidth: 640, tailwind: \"sm\" },\n      md: { minWidth: 768, tailwind: \"md\" },\n      lg: { minWidth: 1024, tailwind: \"lg\" },\n      xl: { minWidth: 1280, tailwind: \"xl\" },\n      \"2xl\": { minWidth: 1536, tailwind: \"2xl\" },\n    };\n\n    const config = breakpointMap[name];\n    return {\n      name,\n      minWidth: config.minWidth,\n      px: `${config.minWidth}px`,\n      rem: `${config.minWidth / 16}rem`,\n      tailwind: config.tailwind,\n    };\n  }\n}\n\n/**\n * Pre-defined breakpoint tokens\n */\nexport const BREAKPOINT_TOKENS: Record<BreakpointName, BreakpointToken> = {\n  sm: BreakpointTokenFactory.create(\"sm\"),\n  md: BreakpointTokenFactory.create(\"md\"),\n  lg: BreakpointTokenFactory.create(\"lg\"),\n  xl: BreakpointTokenFactory.create(\"xl\"),\n  \"2xl\": BreakpointTokenFactory.create(\"2xl\"),\n} as const;\n\n/**\n * Helper function to get breakpoint token\n */\nexport function getBreakpoint(name: BreakpointName): BreakpointToken {\n  return BREAKPOINT_TOKENS[name];\n}\n\n/**\n * Helper function to create media query string\n */\nexport function getMediaQuery(\n  name: BreakpointName,\n  direction: \"min\" | \"max\" = \"min\",\n): string {\n  const breakpoint = BREAKPOINT_TOKENS[name];\n  const operator = direction === \"min\" ? \"min-width\" : \"max-width\";\n  return `@media (${operator}: ${breakpoint.px})`;\n}\n"],"names":["BreakpointTokenFactory","name","config","BREAKPOINT_TOKENS","getBreakpoint","getMediaQuery","direction","breakpoint"],"mappings":";AAqBO,MAAMA,EAAuB;AAAA;AAAA;AAAA;AAAA,EAIlC,OAAO,OAAOC,GAAuC;AAYnD,UAAMC,IARF;AAAA,MACF,IAAI,EAAE,UAAU,KAAK,UAAU,KAAA;AAAA,MAC/B,IAAI,EAAE,UAAU,KAAK,UAAU,KAAA;AAAA,MAC/B,IAAI,EAAE,UAAU,MAAM,UAAU,KAAA;AAAA,MAChC,IAAI,EAAE,UAAU,MAAM,UAAU,KAAA;AAAA,MAChC,OAAO,EAAE,UAAU,MAAM,UAAU,MAAA;AAAA,IAAM,EAGdD,CAAI;AACjC,WAAO;AAAA,MACL,MAAAA;AAAA,MACA,UAAUC,EAAO;AAAA,MACjB,IAAI,GAAGA,EAAO,QAAQ;AAAA,MACtB,KAAK,GAAGA,EAAO,WAAW,EAAE;AAAA,MAC5B,UAAUA,EAAO;AAAA,IAAA;AAAA,EAErB;AACF;AAKO,MAAMC,IAA6D;AAAA,EACxE,IAAIH,EAAuB,OAAO,IAAI;AAAA,EACtC,IAAIA,EAAuB,OAAO,IAAI;AAAA,EACtC,IAAIA,EAAuB,OAAO,IAAI;AAAA,EACtC,IAAIA,EAAuB,OAAO,IAAI;AAAA,EACtC,OAAOA,EAAuB,OAAO,KAAK;AAC5C;AAKO,SAASI,EAAcH,GAAuC;AACnE,SAAOE,EAAkBF,CAAI;AAC/B;AAKO,SAASI,EACdJ,GACAK,IAA2B,OACnB;AACR,QAAMC,IAAaJ,EAAkBF,CAAI;AAEzC,SAAO,WADUK,MAAc,QAAQ,cAAc,WAC3B,KAAKC,EAAW,EAAE;AAC9C;"}