@brycks/core-front 0.3.5 → 0.3.6

package/dist/components/utility/Logo/Logo.js.map

@@ -1 +1 @@
-{"version":3,"file":"Logo.js","sources":["../../../../src/components/utility/Logo/Logo.tsx"],"sourcesContent":["import { forwardRef, type CSSProperties, type ReactNode, type HTMLAttributes } from 'react'\nimport { cx } from '../../../utils/styles'\n\nexport type LogoSize = 'sm' | 'md' | 'lg' | 'xl'\n\nconst sizeMap: Record<LogoSize, number> = {\n  sm: 32,\n  md: 40,\n  lg: 56,\n  xl: 64,\n}\n\nconst fontSizeMap: Record<LogoSize, number> = {\n  sm: 14,\n  md: 18,\n  lg: 24,\n  xl: 28,\n}\n\nconst radiusMap: Record<LogoSize, number> = {\n  sm: 8,\n  md: 10,\n  lg: 14,\n  xl: 16,\n}\n\nexport interface LogoProps extends HTMLAttributes<HTMLDivElement> {\n  /** Size of the logo */\n  size?: LogoSize\n  /** Content to display (usually a letter or icon) */\n  children?: ReactNode\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nexport const Logo = forwardRef<HTMLDivElement, LogoProps>(\n  function Logo(\n    {\n      size = 'md',\n      children,\n      className,\n      testId,\n      style,\n      ...props\n    },\n    ref\n  ) {\n    const dimension = sizeMap[size]\n    const fontSize = fontSizeMap[size]\n    const radius = radiusMap[size]\n\n    const logoStyle: CSSProperties = {\n      width: dimension,\n      height: dimension,\n      minWidth: dimension,\n      borderRadius: radius,\n      background: 'linear-gradient(135deg, var(--brycks-primary-default) 0%, var(--brycks-primary-600) 100%)',\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      color: 'white',\n      fontWeight: 700,\n      fontSize,\n      boxShadow: '0 2px 8px rgba(59, 92, 233, 0.3)',\n      ...style,\n    }\n\n    return (\n      <div\n        ref={ref}\n        className={cx('brycks-logo', className)}\n        style={logoStyle}\n        data-testid={testId}\n        aria-hidden=\"true\"\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  }\n)\n\nLogo.displayName = 'Logo'\n"],"names":["sizeMap","fontSizeMap","radiusMap","Logo","forwardRef","size","children","className","testId","style","props","ref","dimension","fontSize","radius","logoStyle","jsx","cx"],"mappings":";;;AAKA,MAAMA,IAAoC;AAAA,EACxC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAEMC,IAAwC;AAAA,EAC5C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAEMC,IAAsC;AAAA,EAC1C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAaaC,IAAOC;AAAA,EAClB,SACE;AAAA,IACE,MAAAC,IAAO;AAAA,IACP,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,QAAAC;AAAA,IACA,OAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,GACA;AACA,UAAMC,IAAYZ,EAAQK,CAAI,GACxBQ,IAAWZ,EAAYI,CAAI,GAC3BS,IAASZ,EAAUG,CAAI,GAEvBU,IAA2B;AAAA,MAC/B,OAAOH;AAAA,MACP,QAAQA;AAAA,MACR,UAAUA;AAAA,MACV,cAAcE;AAAA,MACd,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,UAAAD;AAAA,MACA,WAAW;AAAA,MACX,GAAGJ;AAAA,IAAA;AAGL,WACE,gBAAAO;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAL;AAAA,QACA,WAAWM,EAAG,eAAeV,CAAS;AAAA,QACtC,OAAOQ;AAAA,QACP,eAAaP;AAAA,QACb,eAAY;AAAA,QACX,GAAGE;AAAA,QAEH,UAAAJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEAH,EAAK,cAAc;"}
+{"version":3,"file":"Logo.js","sources":["../../../../src/components/utility/Logo/Logo.tsx"],"sourcesContent":["import { forwardRef, type CSSProperties, type ReactNode, type HTMLAttributes } from 'react'\nimport { cx } from '../../../utils/styles'\n\nexport type LogoSize = 'sm' | 'md' | 'lg' | 'xl'\n\nconst sizeMap: Record<LogoSize, number> = {\n  sm: 32,\n  md: 40,\n  lg: 56,\n  xl: 64,\n}\n\nconst fontSizeMap: Record<LogoSize, number> = {\n  sm: 14,\n  md: 18,\n  lg: 24,\n  xl: 28,\n}\n\nconst radiusMap: Record<LogoSize, number> = {\n  sm: 8,\n  md: 10,\n  lg: 14,\n  xl: 16,\n}\n\nexport interface LogoProps extends HTMLAttributes<HTMLDivElement> {\n  /** Size of the logo */\n  size?: LogoSize\n  /** Content to display (usually a letter or icon) */\n  children?: ReactNode\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nexport const Logo = forwardRef<HTMLDivElement, LogoProps>(\n  function Logo(\n    {\n      size = 'md',\n      children,\n      className,\n      testId,\n      style,\n      ...props\n    },\n    ref\n  ) {\n    const dimension = sizeMap[size]\n    const fontSize = fontSizeMap[size]\n    const radius = radiusMap[size]\n\n    const logoStyle: CSSProperties = {\n      width: dimension,\n      height: dimension,\n      minWidth: dimension,\n      borderRadius: radius,\n      background: 'linear-gradient(135deg, var(--brycks-primary-default) 0%, var(--brycks-primary-hover) 100%)',\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      color: 'white',\n      fontWeight: 700,\n      fontSize,\n      boxShadow: '0 2px 8px rgba(59, 92, 233, 0.3)',\n      ...style,\n    }\n\n    return (\n      <div\n        ref={ref}\n        className={cx('brycks-logo', className)}\n        style={logoStyle}\n        data-testid={testId}\n        aria-hidden=\"true\"\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  }\n)\n\nLogo.displayName = 'Logo'\n"],"names":["sizeMap","fontSizeMap","radiusMap","Logo","forwardRef","size","children","className","testId","style","props","ref","dimension","fontSize","radius","logoStyle","jsx","cx"],"mappings":";;;AAKA,MAAMA,IAAoC;AAAA,EACxC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAEMC,IAAwC;AAAA,EAC5C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAEMC,IAAsC;AAAA,EAC1C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAaaC,IAAOC;AAAA,EAClB,SACE;AAAA,IACE,MAAAC,IAAO;AAAA,IACP,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,QAAAC;AAAA,IACA,OAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,GACA;AACA,UAAMC,IAAYZ,EAAQK,CAAI,GACxBQ,IAAWZ,EAAYI,CAAI,GAC3BS,IAASZ,EAAUG,CAAI,GAEvBU,IAA2B;AAAA,MAC/B,OAAOH;AAAA,MACP,QAAQA;AAAA,MACR,UAAUA;AAAA,MACV,cAAcE;AAAA,MACd,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,UAAAD;AAAA,MACA,WAAW;AAAA,MACX,GAAGJ;AAAA,IAAA;AAGL,WACE,gBAAAO;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAL;AAAA,QACA,WAAWM,EAAG,eAAeV,CAAS;AAAA,QACtC,OAAOQ;AAAA,QACP,eAAaP;AAAA,QACb,eAAY;AAAA,QACX,GAAGE;AAAA,QAEH,UAAAJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEAH,EAAK,cAAc;"}

package/dist/design-system/themes/ThemeProvider.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const v=require("react/jsx-runtime"),s=require("react"),C=require("./lightTheme.cjs"),S=require("./darkTheme.cjs"),g=s.createContext(null),w="brycks-theme-mode";function x(o,n){return n?Object.keys(o).reduce((c,r)=>{const i=o[r],u=n[r];return typeof i=="object"&&typeof u=="object"?c[r]={...i,...u}:u!==void 0?c[r]=u:c[r]=i,c},{}):o}function O({children:o,config:n,skipCSSVariables:c=!1}){const[r,i]=s.useState(()=>typeof window>"u"?n?.defaultMode??"system":localStorage.getItem(w)??n?.defaultMode??"system"),[u,j]=s.useState(()=>typeof window>"u"?"light":window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light");s.useEffect(()=>{const e=window.matchMedia("(prefers-color-scheme: dark)"),d=f=>{j(f.matches?"dark":"light")};return e.addEventListener("change",d),()=>e.removeEventListener("change",d)},[]);const t=r==="system"?u:r,a=s.useMemo(()=>{const e=t==="dark"?S.darkTheme:C.lightTheme,d=t==="dark"?n?.dark:n?.light;return d?{name:e.name,colors:x(e.colors,d)}:e},[t,n]),l=s.useCallback(e=>{i(e),typeof window<"u"&&localStorage.setItem(w,e)},[]),b=s.useCallback(()=>{l(t==="dark"?"light":"dark")},[t,l]);s.useEffect(()=>{if(c||typeof document>"u")return;const e=document.documentElement;e.style.colorScheme=t,e.dataset.theme=t,t==="dark"?e.classList.add("dark"):e.classList.remove("dark");const d=(T,h="")=>Object.entries(T).reduce((y,[k,m])=>{const M=h?`${h}-${k}`:k;return typeof m=="object"&&m!==null?Object.assign(y,d(m,M)):typeof m=="string"&&(y[`--brycks-${M}`]=m),y},{}),f=d(a.colors);Object.entries(f).forEach(([T,h])=>{e.style.setProperty(T,h)})},[a,t,c]);const p=s.useMemo(()=>({theme:a,mode:r,resolvedMode:t,setMode:l,toggleMode:b}),[a,r,t,l,b]);return v.jsx(g.Provider,{value:p,children:o})}function E(){const o=s.useContext(g);if(!o)throw new Error("useTheme must be used within a ThemeProvider");return o}function P(){const{theme:o}=E();return o.colors}exports.ThemeContext=g;exports.ThemeProvider=O;exports.useTheme=E;exports.useThemeColors=P;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const S=require("react/jsx-runtime"),s=require("react"),x=require("./lightTheme.cjs"),O=require("./darkTheme.cjs"),y=s.createContext(null),M="brycks-theme-mode";function P(o,n){return n?Object.keys(o).reduce((c,r)=>{const m=o[r],u=n[r];return typeof m=="object"&&typeof u=="object"?c[r]={...m,...u}:u!==void 0?c[r]=u:c[r]=m,c},{}):o}function L({children:o,config:n,skipCSSVariables:c=!1}){const[r,m]=s.useState(()=>typeof window>"u"?n?.defaultMode??"system":localStorage.getItem(M)??n?.defaultMode??"system"),[u,C]=s.useState(()=>typeof window>"u"?"light":window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light");s.useEffect(()=>{const e=window.matchMedia("(prefers-color-scheme: dark)"),d=T=>{C(T.matches?"dark":"light")};return e.addEventListener("change",d),()=>e.removeEventListener("change",d)},[]);const t=r==="system"?u:r,h=s.useMemo(()=>{const e=t==="dark"?O.darkTheme:x.lightTheme,d=t==="dark"?n?.dark:n?.light;return d?{name:e.name,colors:P(e.colors,d)}:e},[t,n]),f=s.useCallback(e=>{m(e),typeof window<"u"&&localStorage.setItem(M,e)},[]),b=s.useCallback(()=>{f(t==="dark"?"light":"dark")},[t,f]);s.useEffect(()=>{if(c||typeof document>"u")return;const e=document.documentElement;e.style.colorScheme=t,e.dataset.theme=t,t==="dark"?e.classList.add("dark"):e.classList.remove("dark");const d=i=>i.replace(/[A-Z]/g,a=>`-${a.toLowerCase()}`),T=(i,a="")=>Object.entries(i).reduce((g,[v,l])=>{const k=d(v),w=a?`${a}-${k}`:k;return typeof l=="object"&&l!==null?Object.assign(g,T(l,w)):typeof l=="string"&&(g[`--brycks-${w}`]=l),g},{}),j=T(h.colors);Object.entries(j).forEach(([i,a])=>{e.style.setProperty(i,a)})},[h,t,c]);const E=s.useMemo(()=>({theme:h,mode:r,resolvedMode:t,setMode:f,toggleMode:b}),[h,r,t,f,b]);return S.jsx(y.Provider,{value:E,children:o})}function p(){const o=s.useContext(y);if(!o)throw new Error("useTheme must be used within a ThemeProvider");return o}function q(){const{theme:o}=p();return o.colors}exports.ThemeContext=y;exports.ThemeProvider=L;exports.useTheme=p;exports.useThemeColors=q;
 //# sourceMappingURL=ThemeProvider.cjs.map

package/dist/design-system/themes/ThemeProvider.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.cjs","sources":["../../../src/design-system/themes/ThemeProvider.tsx"],"sourcesContent":["/**\r\n * Brycks Design System - Theme Provider\r\n *\r\n * React context provider for theme management.\r\n * Handles light/dark mode switching and system preference detection.\r\n */\r\n\r\nimport {\r\n  createContext,\r\n  useCallback,\r\n  useContext,\r\n  useEffect,\r\n  useMemo,\r\n  useState,\r\n  type ReactNode,\r\n} from 'react'\r\nimport { lightTheme } from './lightTheme'\r\nimport { darkTheme } from './darkTheme'\r\nimport type { Theme, ThemeContextValue, ThemeMode, ThemeConfig, ThemeColors } from './types'\r\n\r\nconst ThemeContext = createContext<ThemeContextValue | null>(null)\r\n\r\n/** Storage key for persisting theme preference */\r\nconst THEME_STORAGE_KEY = 'brycks-theme-mode'\r\n\r\n/** Deep merge theme colors */\r\nfunction mergeThemeColors(base: ThemeColors, overrides?: Partial<ThemeColors>): ThemeColors {\r\n  if (!overrides) return base\r\n\r\n  return Object.keys(base).reduce((acc, key) => {\r\n    const baseValue = base[key as keyof ThemeColors]\r\n    const overrideValue = overrides[key as keyof ThemeColors]\r\n\r\n    if (typeof baseValue === 'object' && typeof overrideValue === 'object') {\r\n      acc[key as keyof ThemeColors] = { ...baseValue, ...overrideValue } as never\r\n    } else if (overrideValue !== undefined) {\r\n      acc[key as keyof ThemeColors] = overrideValue as never\r\n    } else {\r\n      acc[key as keyof ThemeColors] = baseValue as never\r\n    }\r\n\r\n    return acc\r\n  }, {} as ThemeColors)\r\n}\r\n\r\ninterface ThemeProviderProps {\r\n  /** Child components */\r\n  children: ReactNode\r\n  /** Theme configuration for customization */\r\n  config?: ThemeConfig\r\n  /** Skip injecting CSS variables (for SSR or custom handling) */\r\n  skipCSSVariables?: boolean\r\n}\r\n\r\nexport function ThemeProvider({\r\n  children,\r\n  config,\r\n  skipCSSVariables = false,\r\n}: ThemeProviderProps) {\r\n  const [mode, setModeState] = useState<ThemeMode>(() => {\r\n    if (typeof window === 'undefined') return config?.defaultMode ?? 'system'\r\n\r\n    const stored = localStorage.getItem(THEME_STORAGE_KEY) as ThemeMode | null\r\n    return stored ?? config?.defaultMode ?? 'system'\r\n  })\r\n\r\n  const [systemMode, setSystemMode] = useState<'light' | 'dark'>(() => {\r\n    if (typeof window === 'undefined') return 'light'\r\n    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'\r\n  })\r\n\r\n  // Listen to system preference changes\r\n  useEffect(() => {\r\n    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')\r\n    const handleChange = (e: MediaQueryListEvent) => {\r\n      setSystemMode(e.matches ? 'dark' : 'light')\r\n    }\r\n\r\n    mediaQuery.addEventListener('change', handleChange)\r\n    return () => mediaQuery.removeEventListener('change', handleChange)\r\n  }, [])\r\n\r\n  // Resolve actual mode (never 'system')\r\n  const resolvedMode = mode === 'system' ? systemMode : mode\r\n\r\n  // Build theme with any config overrides\r\n  const theme = useMemo<Theme>(() => {\r\n    const baseTheme = resolvedMode === 'dark' ? darkTheme : lightTheme\r\n    const overrides = resolvedMode === 'dark' ? config?.dark : config?.light\r\n\r\n    if (!overrides) return baseTheme\r\n\r\n    return {\r\n      name: baseTheme.name,\r\n      colors: mergeThemeColors(baseTheme.colors, overrides),\r\n    }\r\n  }, [resolvedMode, config])\r\n\r\n  // Persist mode to localStorage\r\n  const setMode = useCallback((newMode: ThemeMode) => {\r\n    setModeState(newMode)\r\n    if (typeof window !== 'undefined') {\r\n      localStorage.setItem(THEME_STORAGE_KEY, newMode)\r\n    }\r\n  }, [])\r\n\r\n  const toggleMode = useCallback(() => {\r\n    setMode(resolvedMode === 'dark' ? 'light' : 'dark')\r\n  }, [resolvedMode, setMode])\r\n\r\n  // Inject CSS variables\r\n  useEffect(() => {\r\n    if (skipCSSVariables || typeof document === 'undefined') return\r\n\r\n    const root = document.documentElement\r\n\r\n    // Set color scheme for native browser support\r\n    root.style.colorScheme = resolvedMode\r\n\r\n    // Set data attribute for CSS selectors\r\n    root.dataset.theme = resolvedMode\r\n\r\n    // Add/remove dark class for Tailwind CSS dark mode\r\n    if (resolvedMode === 'dark') {\r\n      root.classList.add('dark')\r\n    } else {\r\n      root.classList.remove('dark')\r\n    }\r\n\r\n    // Flatten and inject CSS variables\r\n    const flattenColors = (obj: Record<string, unknown>, prefix = ''): Record<string, string> => {\r\n      return Object.entries(obj).reduce(\r\n        (acc, [key, value]) => {\r\n          const varName = prefix ? `${prefix}-${key}` : key\r\n\r\n          if (typeof value === 'object' && value !== null) {\r\n            Object.assign(acc, flattenColors(value as Record<string, unknown>, varName))\r\n          } else if (typeof value === 'string') {\r\n            acc[`--brycks-${varName}`] = value\r\n          }\r\n\r\n          return acc\r\n        },\r\n        {} as Record<string, string>\r\n      )\r\n    }\r\n\r\n    const cssVars = flattenColors(theme.colors as unknown as Record<string, unknown>)\r\n    Object.entries(cssVars).forEach(([key, value]) => {\r\n      root.style.setProperty(key, value)\r\n    })\r\n\r\n    // Clean up function not needed as we just overwrite values\r\n  }, [theme, resolvedMode, skipCSSVariables])\r\n\r\n  const contextValue = useMemo<ThemeContextValue>(\r\n    () => ({\r\n      theme,\r\n      mode,\r\n      resolvedMode,\r\n      setMode,\r\n      toggleMode,\r\n    }),\r\n    [theme, mode, resolvedMode, setMode, toggleMode]\r\n  )\r\n\r\n  return <ThemeContext.Provider value={contextValue}>{children}</ThemeContext.Provider>\r\n}\r\n\r\n/** Hook to access theme context */\r\nexport function useTheme(): ThemeContextValue {\r\n  const context = useContext(ThemeContext)\r\n\r\n  if (!context) {\r\n    throw new Error('useTheme must be used within a ThemeProvider')\r\n  }\r\n\r\n  return context\r\n}\r\n\r\n/** Hook to get current theme colors */\r\nexport function useThemeColors() {\r\n  const { theme } = useTheme()\r\n  return theme.colors\r\n}\r\n\r\nexport { ThemeContext }\r\n"],"names":["ThemeContext","createContext","THEME_STORAGE_KEY","mergeThemeColors","base","overrides","acc","key","baseValue","overrideValue","ThemeProvider","children","config","skipCSSVariables","mode","setModeState","useState","systemMode","setSystemMode","useEffect","mediaQuery","handleChange","e","resolvedMode","theme","useMemo","baseTheme","darkTheme","lightTheme","setMode","useCallback","newMode","toggleMode","root","flattenColors","obj","prefix","value","varName","cssVars","contextValue","useTheme","context","useContext","useThemeColors"],"mappings":"mMAoBMA,EAAeC,EAAAA,cAAwC,IAAI,EAG3DC,EAAoB,oBAG1B,SAASC,EAAiBC,EAAmBC,EAA+C,CAC1F,OAAKA,EAEE,OAAO,KAAKD,CAAI,EAAE,OAAO,CAACE,EAAKC,IAAQ,CAC5C,MAAMC,EAAYJ,EAAKG,CAAwB,EACzCE,EAAgBJ,EAAUE,CAAwB,EAExD,OAAI,OAAOC,GAAc,UAAY,OAAOC,GAAkB,SAC5DH,EAAIC,CAAwB,EAAI,CAAE,GAAGC,EAAW,GAAGC,CAAA,EAC1CA,IAAkB,OAC3BH,EAAIC,CAAwB,EAAIE,EAEhCH,EAAIC,CAAwB,EAAIC,EAG3BF,CACT,EAAG,CAAA,CAAiB,EAfGF,CAgBzB,CAWO,SAASM,EAAc,CAC5B,SAAAC,EACA,OAAAC,EACA,iBAAAC,EAAmB,EACrB,EAAuB,CACrB,KAAM,CAACC,EAAMC,CAAY,EAAIC,EAAAA,SAAoB,IAC3C,OAAO,OAAW,IAAoBJ,GAAQ,aAAe,SAElD,aAAa,QAAQV,CAAiB,GACpCU,GAAQ,aAAe,QACzC,EAEK,CAACK,EAAYC,CAAa,EAAIF,EAAAA,SAA2B,IACzD,OAAO,OAAW,IAAoB,QACnC,OAAO,WAAW,8BAA8B,EAAE,QAAU,OAAS,OAC7E,EAGDG,EAAAA,UAAU,IAAM,CACd,MAAMC,EAAa,OAAO,WAAW,8BAA8B,EAC7DC,EAAgBC,GAA2B,CAC/CJ,EAAcI,EAAE,QAAU,OAAS,OAAO,CAC5C,EAEA,OAAAF,EAAW,iBAAiB,SAAUC,CAAY,EAC3C,IAAMD,EAAW,oBAAoB,SAAUC,CAAY,CACpE,EAAG,CAAA,CAAE,EAGL,MAAME,EAAeT,IAAS,SAAWG,EAAaH,EAGhDU,EAAQC,EAAAA,QAAe,IAAM,CACjC,MAAMC,EAAYH,IAAiB,OAASI,EAAAA,UAAYC,EAAAA,WAClDvB,EAAYkB,IAAiB,OAASX,GAAQ,KAAOA,GAAQ,MAEnE,OAAKP,EAEE,CACL,KAAMqB,EAAU,KAChB,OAAQvB,EAAiBuB,EAAU,OAAQrB,CAAS,CAAA,EAJ/BqB,CAMzB,EAAG,CAACH,EAAcX,CAAM,CAAC,EAGnBiB,EAAUC,cAAaC,GAAuB,CAClDhB,EAAagB,CAAO,EAChB,OAAO,OAAW,KACpB,aAAa,QAAQ7B,EAAmB6B,CAAO,CAEnD,EAAG,CAAA,CAAE,EAECC,EAAaF,EAAAA,YAAY,IAAM,CACnCD,EAAQN,IAAiB,OAAS,QAAU,MAAM,CACpD,EAAG,CAACA,EAAcM,CAAO,CAAC,EAG1BV,EAAAA,UAAU,IAAM,CACd,GAAIN,GAAoB,OAAO,SAAa,IAAa,OAEzD,MAAMoB,EAAO,SAAS,gBAGtBA,EAAK,MAAM,YAAcV,EAGzBU,EAAK,QAAQ,MAAQV,EAGjBA,IAAiB,OACnBU,EAAK,UAAU,IAAI,MAAM,EAEzBA,EAAK,UAAU,OAAO,MAAM,EAI9B,MAAMC,EAAgB,CAACC,EAA8BC,EAAS,KACrD,OAAO,QAAQD,CAAG,EAAE,OACzB,CAAC7B,EAAK,CAACC,EAAK8B,CAAK,IAAM,CACrB,MAAMC,EAAUF,EAAS,GAAGA,CAAM,IAAI7B,CAAG,GAAKA,EAE9C,OAAI,OAAO8B,GAAU,UAAYA,IAAU,KACzC,OAAO,OAAO/B,EAAK4B,EAAcG,EAAkCC,CAAO,CAAC,EAClE,OAAOD,GAAU,WAC1B/B,EAAI,YAAYgC,CAAO,EAAE,EAAID,GAGxB/B,CACT,EACA,CAAA,CAAC,EAICiC,EAAUL,EAAcV,EAAM,MAA4C,EAChF,OAAO,QAAQe,CAAO,EAAE,QAAQ,CAAC,CAAChC,EAAK8B,CAAK,IAAM,CAChDJ,EAAK,MAAM,YAAY1B,EAAK8B,CAAK,CACnC,CAAC,CAGH,EAAG,CAACb,EAAOD,EAAcV,CAAgB,CAAC,EAE1C,MAAM2B,EAAef,EAAAA,QACnB,KAAO,CACL,MAAAD,EACA,KAAAV,EACA,aAAAS,EACA,QAAAM,EACA,WAAAG,CAAA,GAEF,CAACR,EAAOV,EAAMS,EAAcM,EAASG,CAAU,CAAA,EAGjD,aAAQhC,EAAa,SAAb,CAAsB,MAAOwC,EAAe,SAAA7B,EAAS,CAC/D,CAGO,SAAS8B,GAA8B,CAC5C,MAAMC,EAAUC,EAAAA,WAAW3C,CAAY,EAEvC,GAAI,CAAC0C,EACH,MAAM,IAAI,MAAM,8CAA8C,EAGhE,OAAOA,CACT,CAGO,SAASE,GAAiB,CAC/B,KAAM,CAAE,MAAApB,CAAA,EAAUiB,EAAA,EAClB,OAAOjB,EAAM,MACf"}
+{"version":3,"file":"ThemeProvider.cjs","sources":["../../../src/design-system/themes/ThemeProvider.tsx"],"sourcesContent":["/**\r\n * Brycks Design System - Theme Provider\r\n *\r\n * React context provider for theme management.\r\n * Handles light/dark mode switching and system preference detection.\r\n */\r\n\r\nimport {\r\n  createContext,\r\n  useCallback,\r\n  useContext,\r\n  useEffect,\r\n  useMemo,\r\n  useState,\r\n  type ReactNode,\r\n} from 'react'\r\nimport { lightTheme } from './lightTheme'\r\nimport { darkTheme } from './darkTheme'\r\nimport type { Theme, ThemeContextValue, ThemeMode, ThemeConfig, ThemeColors } from './types'\r\n\r\nconst ThemeContext = createContext<ThemeContextValue | null>(null)\r\n\r\n/** Storage key for persisting theme preference */\r\nconst THEME_STORAGE_KEY = 'brycks-theme-mode'\r\n\r\n/** Deep merge theme colors */\r\nfunction mergeThemeColors(base: ThemeColors, overrides?: Partial<ThemeColors>): ThemeColors {\r\n  if (!overrides) return base\r\n\r\n  return Object.keys(base).reduce((acc, key) => {\r\n    const baseValue = base[key as keyof ThemeColors]\r\n    const overrideValue = overrides[key as keyof ThemeColors]\r\n\r\n    if (typeof baseValue === 'object' && typeof overrideValue === 'object') {\r\n      acc[key as keyof ThemeColors] = { ...baseValue, ...overrideValue } as never\r\n    } else if (overrideValue !== undefined) {\r\n      acc[key as keyof ThemeColors] = overrideValue as never\r\n    } else {\r\n      acc[key as keyof ThemeColors] = baseValue as never\r\n    }\r\n\r\n    return acc\r\n  }, {} as ThemeColors)\r\n}\r\n\r\ninterface ThemeProviderProps {\r\n  /** Child components */\r\n  children: ReactNode\r\n  /** Theme configuration for customization */\r\n  config?: ThemeConfig\r\n  /** Skip injecting CSS variables (for SSR or custom handling) */\r\n  skipCSSVariables?: boolean\r\n}\r\n\r\nexport function ThemeProvider({\r\n  children,\r\n  config,\r\n  skipCSSVariables = false,\r\n}: ThemeProviderProps) {\r\n  const [mode, setModeState] = useState<ThemeMode>(() => {\r\n    if (typeof window === 'undefined') return config?.defaultMode ?? 'system'\r\n\r\n    const stored = localStorage.getItem(THEME_STORAGE_KEY) as ThemeMode | null\r\n    return stored ?? config?.defaultMode ?? 'system'\r\n  })\r\n\r\n  const [systemMode, setSystemMode] = useState<'light' | 'dark'>(() => {\r\n    if (typeof window === 'undefined') return 'light'\r\n    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'\r\n  })\r\n\r\n  // Listen to system preference changes\r\n  useEffect(() => {\r\n    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')\r\n    const handleChange = (e: MediaQueryListEvent) => {\r\n      setSystemMode(e.matches ? 'dark' : 'light')\r\n    }\r\n\r\n    mediaQuery.addEventListener('change', handleChange)\r\n    return () => mediaQuery.removeEventListener('change', handleChange)\r\n  }, [])\r\n\r\n  // Resolve actual mode (never 'system')\r\n  const resolvedMode = mode === 'system' ? systemMode : mode\r\n\r\n  // Build theme with any config overrides\r\n  const theme = useMemo<Theme>(() => {\r\n    const baseTheme = resolvedMode === 'dark' ? darkTheme : lightTheme\r\n    const overrides = resolvedMode === 'dark' ? config?.dark : config?.light\r\n\r\n    if (!overrides) return baseTheme\r\n\r\n    return {\r\n      name: baseTheme.name,\r\n      colors: mergeThemeColors(baseTheme.colors, overrides),\r\n    }\r\n  }, [resolvedMode, config])\r\n\r\n  // Persist mode to localStorage\r\n  const setMode = useCallback((newMode: ThemeMode) => {\r\n    setModeState(newMode)\r\n    if (typeof window !== 'undefined') {\r\n      localStorage.setItem(THEME_STORAGE_KEY, newMode)\r\n    }\r\n  }, [])\r\n\r\n  const toggleMode = useCallback(() => {\r\n    setMode(resolvedMode === 'dark' ? 'light' : 'dark')\r\n  }, [resolvedMode, setMode])\r\n\r\n  // Inject CSS variables\r\n  useEffect(() => {\r\n    if (skipCSSVariables || typeof document === 'undefined') return\r\n\r\n    const root = document.documentElement\r\n\r\n    // Set color scheme for native browser support\r\n    root.style.colorScheme = resolvedMode\r\n\r\n    // Set data attribute for CSS selectors\r\n    root.dataset.theme = resolvedMode\r\n\r\n    // Add/remove dark class for Tailwind CSS dark mode\r\n    if (resolvedMode === 'dark') {\r\n      root.classList.add('dark')\r\n    } else {\r\n      root.classList.remove('dark')\r\n    }\r\n\r\n    // Flatten and inject CSS variables.\r\n    // Keys are converted to kebab-case so generated names match the ones the\r\n    // stylesheets consume (e.g. softHover -> --brycks-primary-soft-hover).\r\n    const toKebab = (key: string) => key.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`)\r\n    const flattenColors = (obj: Record<string, unknown>, prefix = ''): Record<string, string> => {\r\n      return Object.entries(obj).reduce(\r\n        (acc, [key, value]) => {\r\n          const segment = toKebab(key)\r\n          const varName = prefix ? `${prefix}-${segment}` : segment\r\n\r\n          if (typeof value === 'object' && value !== null) {\r\n            Object.assign(acc, flattenColors(value as Record<string, unknown>, varName))\r\n          } else if (typeof value === 'string') {\r\n            acc[`--brycks-${varName}`] = value\r\n          }\r\n\r\n          return acc\r\n        },\r\n        {} as Record<string, string>\r\n      )\r\n    }\r\n\r\n    const cssVars = flattenColors(theme.colors as unknown as Record<string, unknown>)\r\n    Object.entries(cssVars).forEach(([key, value]) => {\r\n      root.style.setProperty(key, value)\r\n    })\r\n\r\n    // Clean up function not needed as we just overwrite values\r\n  }, [theme, resolvedMode, skipCSSVariables])\r\n\r\n  const contextValue = useMemo<ThemeContextValue>(\r\n    () => ({\r\n      theme,\r\n      mode,\r\n      resolvedMode,\r\n      setMode,\r\n      toggleMode,\r\n    }),\r\n    [theme, mode, resolvedMode, setMode, toggleMode]\r\n  )\r\n\r\n  return <ThemeContext.Provider value={contextValue}>{children}</ThemeContext.Provider>\r\n}\r\n\r\n/** Hook to access theme context */\r\nexport function useTheme(): ThemeContextValue {\r\n  const context = useContext(ThemeContext)\r\n\r\n  if (!context) {\r\n    throw new Error('useTheme must be used within a ThemeProvider')\r\n  }\r\n\r\n  return context\r\n}\r\n\r\n/** Hook to get current theme colors */\r\nexport function useThemeColors() {\r\n  const { theme } = useTheme()\r\n  return theme.colors\r\n}\r\n\r\nexport { ThemeContext }\r\n"],"names":["ThemeContext","createContext","THEME_STORAGE_KEY","mergeThemeColors","base","overrides","acc","key","baseValue","overrideValue","ThemeProvider","children","config","skipCSSVariables","mode","setModeState","useState","systemMode","setSystemMode","useEffect","mediaQuery","handleChange","e","resolvedMode","theme","useMemo","baseTheme","darkTheme","lightTheme","setMode","useCallback","newMode","toggleMode","root","toKebab","m","flattenColors","obj","prefix","value","segment","varName","cssVars","contextValue","useTheme","context","useContext","useThemeColors"],"mappings":"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"}

package/dist/design-system/themes/ThemeProvider.js

@@ -1,78 +1,78 @@
-import { jsx as x } from "react/jsx-runtime";
-import { createContext as O, useState as T, useEffect as k, useMemo as M, useCallback as b, useContext as S } from "react";
-import { lightTheme as L } from "./lightTheme.js";
-import { darkTheme as P } from "./darkTheme.js";
-const j = O(null), E = "brycks-theme-mode";
-function V(o, s) {
-  return s ? Object.keys(o).reduce((d, r) => {
-    const m = o[r], c = s[r];
-    return typeof m == "object" && typeof c == "object" ? d[r] = { ...m, ...c } : c !== void 0 ? d[r] = c : d[r] = m, d;
+import { jsx as O } from "react/jsx-runtime";
+import { createContext as S, useState as b, useEffect as k, useMemo as T, useCallback as M, useContext as P } from "react";
+import { lightTheme as $ } from "./lightTheme.js";
+import { darkTheme as V } from "./darkTheme.js";
+const j = S(null), E = "brycks-theme-mode";
+function A(o, s) {
+  return s ? Object.keys(o).reduce((n, r) => {
+    const a = o[r], c = s[r];
+    return typeof a == "object" && typeof c == "object" ? n[r] = { ...a, ...c } : c !== void 0 ? n[r] = c : n[r] = a, n;
   }, {}) : o;
 }
-function H({
+function N({
   children: o,
   config: s,
-  skipCSSVariables: d = !1
+  skipCSSVariables: n = !1
 }) {
-  const [r, m] = T(() => typeof window > "u" ? s?.defaultMode ?? "system" : localStorage.getItem(E) ?? s?.defaultMode ?? "system"), [c, v] = T(() => typeof window > "u" ? "light" : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
+  const [r, a] = b(() => typeof window > "u" ? s?.defaultMode ?? "system" : localStorage.getItem(E) ?? s?.defaultMode ?? "system"), [c, v] = b(() => typeof window > "u" ? "light" : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
   k(() => {
-    const e = window.matchMedia("(prefers-color-scheme: dark)"), n = (f) => {
-      v(f.matches ? "dark" : "light");
+    const e = window.matchMedia("(prefers-color-scheme: dark)"), d = (h) => {
+      v(h.matches ? "dark" : "light");
     };
-    return e.addEventListener("change", n), () => e.removeEventListener("change", n);
+    return e.addEventListener("change", d), () => e.removeEventListener("change", d);
   }, []);
-  const t = r === "system" ? c : r, a = M(() => {
-    const e = t === "dark" ? P : L, n = t === "dark" ? s?.dark : s?.light;
-    return n ? {
+  const t = r === "system" ? c : r, l = T(() => {
+    const e = t === "dark" ? V : $, d = t === "dark" ? s?.dark : s?.light;
+    return d ? {
       name: e.name,
-      colors: V(e.colors, n)
+      colors: A(e.colors, d)
     } : e;
-  }, [t, s]), u = b((e) => {
-    m(e), typeof window < "u" && localStorage.setItem(E, e);
-  }, []), p = b(() => {
-    u(t === "dark" ? "light" : "dark");
-  }, [t, u]);
+  }, [t, s]), f = M((e) => {
+    a(e), typeof window < "u" && localStorage.setItem(E, e);
+  }, []), g = M(() => {
+    f(t === "dark" ? "light" : "dark");
+  }, [t, f]);
   k(() => {
-    if (d || typeof document > "u") return;
+    if (n || typeof document > "u") return;
     const e = document.documentElement;
     e.style.colorScheme = t, e.dataset.theme = t, t === "dark" ? e.classList.add("dark") : e.classList.remove("dark");
-    const n = (h, l = "") => Object.entries(h).reduce(
-      (y, [g, i]) => {
-        const w = l ? `${l}-${g}` : g;
-        return typeof i == "object" && i !== null ? Object.assign(y, n(i, w)) : typeof i == "string" && (y[`--brycks-${w}`] = i), y;
+    const d = (i) => i.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`), h = (i, m = "") => Object.entries(i).reduce(
+      (y, [L, u]) => {
+        const p = d(L), w = m ? `${m}-${p}` : p;
+        return typeof u == "object" && u !== null ? Object.assign(y, h(u, w)) : typeof u == "string" && (y[`--brycks-${w}`] = u), y;
       },
       {}
-    ), f = n(a.colors);
-    Object.entries(f).forEach(([h, l]) => {
-      e.style.setProperty(h, l);
+    ), x = h(l.colors);
+    Object.entries(x).forEach(([i, m]) => {
+      e.style.setProperty(i, m);
     });
-  }, [a, t, d]);
-  const C = M(
+  }, [l, t, n]);
+  const C = T(
     () => ({
-      theme: a,
+      theme: l,
       mode: r,
       resolvedMode: t,
-      setMode: u,
-      toggleMode: p
+      setMode: f,
+      toggleMode: g
     }),
-    [a, r, t, u, p]
+    [l, r, t, f, g]
   );
-  return /* @__PURE__ */ x(j.Provider, { value: C, children: o });
+  return /* @__PURE__ */ O(j.Provider, { value: C, children: o });
 }
-function $() {
-  const o = S(j);
+function I() {
+  const o = P(j);
   if (!o)
     throw new Error("useTheme must be used within a ThemeProvider");
   return o;
 }
-function K() {
-  const { theme: o } = $();
+function Q() {
+  const { theme: o } = I();
   return o.colors;
 }
 export {
   j as ThemeContext,
-  H as ThemeProvider,
-  $ as useTheme,
-  K as useThemeColors
+  N as ThemeProvider,
+  I as useTheme,
+  Q as useThemeColors
 };
 //# sourceMappingURL=ThemeProvider.js.map

package/dist/design-system/themes/ThemeProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.js","sources":["../../../src/design-system/themes/ThemeProvider.tsx"],"sourcesContent":["/**\r\n * Brycks Design System - Theme Provider\r\n *\r\n * React context provider for theme management.\r\n * Handles light/dark mode switching and system preference detection.\r\n */\r\n\r\nimport {\r\n  createContext,\r\n  useCallback,\r\n  useContext,\r\n  useEffect,\r\n  useMemo,\r\n  useState,\r\n  type ReactNode,\r\n} from 'react'\r\nimport { lightTheme } from './lightTheme'\r\nimport { darkTheme } from './darkTheme'\r\nimport type { Theme, ThemeContextValue, ThemeMode, ThemeConfig, ThemeColors } from './types'\r\n\r\nconst ThemeContext = createContext<ThemeContextValue | null>(null)\r\n\r\n/** Storage key for persisting theme preference */\r\nconst THEME_STORAGE_KEY = 'brycks-theme-mode'\r\n\r\n/** Deep merge theme colors */\r\nfunction mergeThemeColors(base: ThemeColors, overrides?: Partial<ThemeColors>): ThemeColors {\r\n  if (!overrides) return base\r\n\r\n  return Object.keys(base).reduce((acc, key) => {\r\n    const baseValue = base[key as keyof ThemeColors]\r\n    const overrideValue = overrides[key as keyof ThemeColors]\r\n\r\n    if (typeof baseValue === 'object' && typeof overrideValue === 'object') {\r\n      acc[key as keyof ThemeColors] = { ...baseValue, ...overrideValue } as never\r\n    } else if (overrideValue !== undefined) {\r\n      acc[key as keyof ThemeColors] = overrideValue as never\r\n    } else {\r\n      acc[key as keyof ThemeColors] = baseValue as never\r\n    }\r\n\r\n    return acc\r\n  }, {} as ThemeColors)\r\n}\r\n\r\ninterface ThemeProviderProps {\r\n  /** Child components */\r\n  children: ReactNode\r\n  /** Theme configuration for customization */\r\n  config?: ThemeConfig\r\n  /** Skip injecting CSS variables (for SSR or custom handling) */\r\n  skipCSSVariables?: boolean\r\n}\r\n\r\nexport function ThemeProvider({\r\n  children,\r\n  config,\r\n  skipCSSVariables = false,\r\n}: ThemeProviderProps) {\r\n  const [mode, setModeState] = useState<ThemeMode>(() => {\r\n    if (typeof window === 'undefined') return config?.defaultMode ?? 'system'\r\n\r\n    const stored = localStorage.getItem(THEME_STORAGE_KEY) as ThemeMode | null\r\n    return stored ?? config?.defaultMode ?? 'system'\r\n  })\r\n\r\n  const [systemMode, setSystemMode] = useState<'light' | 'dark'>(() => {\r\n    if (typeof window === 'undefined') return 'light'\r\n    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'\r\n  })\r\n\r\n  // Listen to system preference changes\r\n  useEffect(() => {\r\n    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')\r\n    const handleChange = (e: MediaQueryListEvent) => {\r\n      setSystemMode(e.matches ? 'dark' : 'light')\r\n    }\r\n\r\n    mediaQuery.addEventListener('change', handleChange)\r\n    return () => mediaQuery.removeEventListener('change', handleChange)\r\n  }, [])\r\n\r\n  // Resolve actual mode (never 'system')\r\n  const resolvedMode = mode === 'system' ? systemMode : mode\r\n\r\n  // Build theme with any config overrides\r\n  const theme = useMemo<Theme>(() => {\r\n    const baseTheme = resolvedMode === 'dark' ? darkTheme : lightTheme\r\n    const overrides = resolvedMode === 'dark' ? config?.dark : config?.light\r\n\r\n    if (!overrides) return baseTheme\r\n\r\n    return {\r\n      name: baseTheme.name,\r\n      colors: mergeThemeColors(baseTheme.colors, overrides),\r\n    }\r\n  }, [resolvedMode, config])\r\n\r\n  // Persist mode to localStorage\r\n  const setMode = useCallback((newMode: ThemeMode) => {\r\n    setModeState(newMode)\r\n    if (typeof window !== 'undefined') {\r\n      localStorage.setItem(THEME_STORAGE_KEY, newMode)\r\n    }\r\n  }, [])\r\n\r\n  const toggleMode = useCallback(() => {\r\n    setMode(resolvedMode === 'dark' ? 'light' : 'dark')\r\n  }, [resolvedMode, setMode])\r\n\r\n  // Inject CSS variables\r\n  useEffect(() => {\r\n    if (skipCSSVariables || typeof document === 'undefined') return\r\n\r\n    const root = document.documentElement\r\n\r\n    // Set color scheme for native browser support\r\n    root.style.colorScheme = resolvedMode\r\n\r\n    // Set data attribute for CSS selectors\r\n    root.dataset.theme = resolvedMode\r\n\r\n    // Add/remove dark class for Tailwind CSS dark mode\r\n    if (resolvedMode === 'dark') {\r\n      root.classList.add('dark')\r\n    } else {\r\n      root.classList.remove('dark')\r\n    }\r\n\r\n    // Flatten and inject CSS variables\r\n    const flattenColors = (obj: Record<string, unknown>, prefix = ''): Record<string, string> => {\r\n      return Object.entries(obj).reduce(\r\n        (acc, [key, value]) => {\r\n          const varName = prefix ? `${prefix}-${key}` : key\r\n\r\n          if (typeof value === 'object' && value !== null) {\r\n            Object.assign(acc, flattenColors(value as Record<string, unknown>, varName))\r\n          } else if (typeof value === 'string') {\r\n            acc[`--brycks-${varName}`] = value\r\n          }\r\n\r\n          return acc\r\n        },\r\n        {} as Record<string, string>\r\n      )\r\n    }\r\n\r\n    const cssVars = flattenColors(theme.colors as unknown as Record<string, unknown>)\r\n    Object.entries(cssVars).forEach(([key, value]) => {\r\n      root.style.setProperty(key, value)\r\n    })\r\n\r\n    // Clean up function not needed as we just overwrite values\r\n  }, [theme, resolvedMode, skipCSSVariables])\r\n\r\n  const contextValue = useMemo<ThemeContextValue>(\r\n    () => ({\r\n      theme,\r\n      mode,\r\n      resolvedMode,\r\n      setMode,\r\n      toggleMode,\r\n    }),\r\n    [theme, mode, resolvedMode, setMode, toggleMode]\r\n  )\r\n\r\n  return <ThemeContext.Provider value={contextValue}>{children}</ThemeContext.Provider>\r\n}\r\n\r\n/** Hook to access theme context */\r\nexport function useTheme(): ThemeContextValue {\r\n  const context = useContext(ThemeContext)\r\n\r\n  if (!context) {\r\n    throw new Error('useTheme must be used within a ThemeProvider')\r\n  }\r\n\r\n  return context\r\n}\r\n\r\n/** Hook to get current theme colors */\r\nexport function useThemeColors() {\r\n  const { theme } = useTheme()\r\n  return theme.colors\r\n}\r\n\r\nexport { ThemeContext }\r\n"],"names":["ThemeContext","createContext","THEME_STORAGE_KEY","mergeThemeColors","base","overrides","acc","key","baseValue","overrideValue","ThemeProvider","children","config","skipCSSVariables","mode","setModeState","useState","systemMode","setSystemMode","useEffect","mediaQuery","handleChange","e","resolvedMode","theme","useMemo","baseTheme","darkTheme","lightTheme","setMode","useCallback","newMode","toggleMode","root","flattenColors","obj","prefix","value","varName","cssVars","contextValue","useTheme","context","useContext","useThemeColors"],"mappings":"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"}
+{"version":3,"file":"ThemeProvider.js","sources":["../../../src/design-system/themes/ThemeProvider.tsx"],"sourcesContent":["/**\r\n * Brycks Design System - Theme Provider\r\n *\r\n * React context provider for theme management.\r\n * Handles light/dark mode switching and system preference detection.\r\n */\r\n\r\nimport {\r\n  createContext,\r\n  useCallback,\r\n  useContext,\r\n  useEffect,\r\n  useMemo,\r\n  useState,\r\n  type ReactNode,\r\n} from 'react'\r\nimport { lightTheme } from './lightTheme'\r\nimport { darkTheme } from './darkTheme'\r\nimport type { Theme, ThemeContextValue, ThemeMode, ThemeConfig, ThemeColors } from './types'\r\n\r\nconst ThemeContext = createContext<ThemeContextValue | null>(null)\r\n\r\n/** Storage key for persisting theme preference */\r\nconst THEME_STORAGE_KEY = 'brycks-theme-mode'\r\n\r\n/** Deep merge theme colors */\r\nfunction mergeThemeColors(base: ThemeColors, overrides?: Partial<ThemeColors>): ThemeColors {\r\n  if (!overrides) return base\r\n\r\n  return Object.keys(base).reduce((acc, key) => {\r\n    const baseValue = base[key as keyof ThemeColors]\r\n    const overrideValue = overrides[key as keyof ThemeColors]\r\n\r\n    if (typeof baseValue === 'object' && typeof overrideValue === 'object') {\r\n      acc[key as keyof ThemeColors] = { ...baseValue, ...overrideValue } as never\r\n    } else if (overrideValue !== undefined) {\r\n      acc[key as keyof ThemeColors] = overrideValue as never\r\n    } else {\r\n      acc[key as keyof ThemeColors] = baseValue as never\r\n    }\r\n\r\n    return acc\r\n  }, {} as ThemeColors)\r\n}\r\n\r\ninterface ThemeProviderProps {\r\n  /** Child components */\r\n  children: ReactNode\r\n  /** Theme configuration for customization */\r\n  config?: ThemeConfig\r\n  /** Skip injecting CSS variables (for SSR or custom handling) */\r\n  skipCSSVariables?: boolean\r\n}\r\n\r\nexport function ThemeProvider({\r\n  children,\r\n  config,\r\n  skipCSSVariables = false,\r\n}: ThemeProviderProps) {\r\n  const [mode, setModeState] = useState<ThemeMode>(() => {\r\n    if (typeof window === 'undefined') return config?.defaultMode ?? 'system'\r\n\r\n    const stored = localStorage.getItem(THEME_STORAGE_KEY) as ThemeMode | null\r\n    return stored ?? config?.defaultMode ?? 'system'\r\n  })\r\n\r\n  const [systemMode, setSystemMode] = useState<'light' | 'dark'>(() => {\r\n    if (typeof window === 'undefined') return 'light'\r\n    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'\r\n  })\r\n\r\n  // Listen to system preference changes\r\n  useEffect(() => {\r\n    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')\r\n    const handleChange = (e: MediaQueryListEvent) => {\r\n      setSystemMode(e.matches ? 'dark' : 'light')\r\n    }\r\n\r\n    mediaQuery.addEventListener('change', handleChange)\r\n    return () => mediaQuery.removeEventListener('change', handleChange)\r\n  }, [])\r\n\r\n  // Resolve actual mode (never 'system')\r\n  const resolvedMode = mode === 'system' ? systemMode : mode\r\n\r\n  // Build theme with any config overrides\r\n  const theme = useMemo<Theme>(() => {\r\n    const baseTheme = resolvedMode === 'dark' ? darkTheme : lightTheme\r\n    const overrides = resolvedMode === 'dark' ? config?.dark : config?.light\r\n\r\n    if (!overrides) return baseTheme\r\n\r\n    return {\r\n      name: baseTheme.name,\r\n      colors: mergeThemeColors(baseTheme.colors, overrides),\r\n    }\r\n  }, [resolvedMode, config])\r\n\r\n  // Persist mode to localStorage\r\n  const setMode = useCallback((newMode: ThemeMode) => {\r\n    setModeState(newMode)\r\n    if (typeof window !== 'undefined') {\r\n      localStorage.setItem(THEME_STORAGE_KEY, newMode)\r\n    }\r\n  }, [])\r\n\r\n  const toggleMode = useCallback(() => {\r\n    setMode(resolvedMode === 'dark' ? 'light' : 'dark')\r\n  }, [resolvedMode, setMode])\r\n\r\n  // Inject CSS variables\r\n  useEffect(() => {\r\n    if (skipCSSVariables || typeof document === 'undefined') return\r\n\r\n    const root = document.documentElement\r\n\r\n    // Set color scheme for native browser support\r\n    root.style.colorScheme = resolvedMode\r\n\r\n    // Set data attribute for CSS selectors\r\n    root.dataset.theme = resolvedMode\r\n\r\n    // Add/remove dark class for Tailwind CSS dark mode\r\n    if (resolvedMode === 'dark') {\r\n      root.classList.add('dark')\r\n    } else {\r\n      root.classList.remove('dark')\r\n    }\r\n\r\n    // Flatten and inject CSS variables.\r\n    // Keys are converted to kebab-case so generated names match the ones the\r\n    // stylesheets consume (e.g. softHover -> --brycks-primary-soft-hover).\r\n    const toKebab = (key: string) => key.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`)\r\n    const flattenColors = (obj: Record<string, unknown>, prefix = ''): Record<string, string> => {\r\n      return Object.entries(obj).reduce(\r\n        (acc, [key, value]) => {\r\n          const segment = toKebab(key)\r\n          const varName = prefix ? `${prefix}-${segment}` : segment\r\n\r\n          if (typeof value === 'object' && value !== null) {\r\n            Object.assign(acc, flattenColors(value as Record<string, unknown>, varName))\r\n          } else if (typeof value === 'string') {\r\n            acc[`--brycks-${varName}`] = value\r\n          }\r\n\r\n          return acc\r\n        },\r\n        {} as Record<string, string>\r\n      )\r\n    }\r\n\r\n    const cssVars = flattenColors(theme.colors as unknown as Record<string, unknown>)\r\n    Object.entries(cssVars).forEach(([key, value]) => {\r\n      root.style.setProperty(key, value)\r\n    })\r\n\r\n    // Clean up function not needed as we just overwrite values\r\n  }, [theme, resolvedMode, skipCSSVariables])\r\n\r\n  const contextValue = useMemo<ThemeContextValue>(\r\n    () => ({\r\n      theme,\r\n      mode,\r\n      resolvedMode,\r\n      setMode,\r\n      toggleMode,\r\n    }),\r\n    [theme, mode, resolvedMode, setMode, toggleMode]\r\n  )\r\n\r\n  return <ThemeContext.Provider value={contextValue}>{children}</ThemeContext.Provider>\r\n}\r\n\r\n/** Hook to access theme context */\r\nexport function useTheme(): ThemeContextValue {\r\n  const context = useContext(ThemeContext)\r\n\r\n  if (!context) {\r\n    throw new Error('useTheme must be used within a ThemeProvider')\r\n  }\r\n\r\n  return context\r\n}\r\n\r\n/** Hook to get current theme colors */\r\nexport function useThemeColors() {\r\n  const { theme } = useTheme()\r\n  return theme.colors\r\n}\r\n\r\nexport { ThemeContext }\r\n"],"names":["ThemeContext","createContext","THEME_STORAGE_KEY","mergeThemeColors","base","overrides","acc","key","baseValue","overrideValue","ThemeProvider","children","config","skipCSSVariables","mode","setModeState","useState","systemMode","setSystemMode","useEffect","mediaQuery","handleChange","e","resolvedMode","theme","useMemo","baseTheme","darkTheme","lightTheme","setMode","useCallback","newMode","toggleMode","root","toKebab","flattenColors","obj","prefix","value","segment","varName","cssVars","contextValue","useTheme","context","useContext","useThemeColors"],"mappings":"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"}

package/dist/design-system/tokens/zIndex.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o={hide:-1,auto:"auto",base:0,docked:10,dropdown:1e3,sticky:1100,banner:1200,overlay:1300,modal:1400,popover:1500,skipLink:1600,toast:1700,tooltip:1800};exports.zIndex=o;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={hide:-1,auto:"auto",base:0,docked:10,dropdown:1e3,sticky:1100,banner:1200,overlay:1300,modal:1400,drawer:1400,popover:1500,skipLink:1600,toast:1700,tooltip:1800};exports.zIndex=e;
 //# sourceMappingURL=zIndex.cjs.map

package/dist/design-system/tokens/zIndex.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"zIndex.cjs","sources":["../../../src/design-system/tokens/zIndex.ts"],"sourcesContent":["/**\r\n * Brycks Design System - Z-Index Tokens\r\n *\r\n * Layering system for consistent stacking context management.\r\n */\r\n\r\n/** Z-index scale */\r\nexport const zIndex = {\r\n  /** Hidden - below everything */\r\n  hide: -1,\r\n  /** Auto - default stacking */\r\n  auto: 'auto',\r\n  /** Base - normal content */\r\n  base: 0,\r\n  /** Docked - sticky elements */\r\n  docked: 10,\r\n  /** Dropdown - menus, selects */\r\n  dropdown: 1000,\r\n  /** Sticky - sticky headers */\r\n  sticky: 1100,\r\n  /** Banner - notification banners */\r\n  banner: 1200,\r\n  /** Overlay - backdrop overlays */\r\n  overlay: 1300,\r\n  /** Modal - dialog windows */\r\n  modal: 1400,\r\n  /** Popover - popovers, tooltips */\r\n  popover: 1500,\r\n  /** Skiplink - accessibility skip links */\r\n  skipLink: 1600,\r\n  /** Toast - notification toasts */\r\n  toast: 1700,\r\n  /** Tooltip - tooltips (highest) */\r\n  tooltip: 1800,\r\n} as const\r\n\r\nexport type ZIndex = keyof typeof zIndex\r\n"],"names":["zIndex"],"mappings":"gFAOO,MAAMA,EAAS,CAEpB,KAAM,GAEN,KAAM,OAEN,KAAM,EAEN,OAAQ,GAER,SAAU,IAEV,OAAQ,KAER,OAAQ,KAER,QAAS,KAET,MAAO,KAEP,QAAS,KAET,SAAU,KAEV,MAAO,KAEP,QAAS,IACX"}
+{"version":3,"file":"zIndex.cjs","sources":["../../../src/design-system/tokens/zIndex.ts"],"sourcesContent":["/**\r\n * Brycks Design System - Z-Index Tokens\r\n *\r\n * Layering system for consistent stacking context management.\r\n */\r\n\r\n/** Z-index scale */\r\nexport const zIndex = {\r\n  /** Hidden - below everything */\r\n  hide: -1,\r\n  /** Auto - default stacking */\r\n  auto: 'auto',\r\n  /** Base - normal content */\r\n  base: 0,\r\n  /** Docked - sticky elements */\r\n  docked: 10,\r\n  /** Dropdown - menus, selects */\r\n  dropdown: 1000,\r\n  /** Sticky - sticky headers */\r\n  sticky: 1100,\r\n  /** Banner - notification banners */\r\n  banner: 1200,\r\n  /** Overlay - backdrop overlays */\r\n  overlay: 1300,\r\n  /** Modal - dialog windows */\r\n  modal: 1400,\r\n  /** Drawer - side panels (same layer as modal) */\r\n  drawer: 1400,\r\n  /** Popover - popovers, tooltips */\r\n  popover: 1500,\r\n  /** Skiplink - accessibility skip links */\r\n  skipLink: 1600,\r\n  /** Toast - notification toasts */\r\n  toast: 1700,\r\n  /** Tooltip - tooltips (highest) */\r\n  tooltip: 1800,\r\n} as const\r\n\r\nexport type ZIndex = keyof typeof zIndex\r\n"],"names":["zIndex"],"mappings":"gFAOO,MAAMA,EAAS,CAEpB,KAAM,GAEN,KAAM,OAEN,KAAM,EAEN,OAAQ,GAER,SAAU,IAEV,OAAQ,KAER,OAAQ,KAER,QAAS,KAET,MAAO,KAEP,OAAQ,KAER,QAAS,KAET,SAAU,KAEV,MAAO,KAEP,QAAS,IACX"}

package/dist/design-system/tokens/zIndex.js

@@ -17,6 +17,8 @@ const o = {
   overlay: 1300,
   /** Modal - dialog windows */
   modal: 1400,
+  /** Drawer - side panels (same layer as modal) */
+  drawer: 1400,
   /** Popover - popovers, tooltips */
   popover: 1500,
   /** Skiplink - accessibility skip links */

package/dist/design-system/tokens/zIndex.js.map

@@ -1 +1 @@
-{"version":3,"file":"zIndex.js","sources":["../../../src/design-system/tokens/zIndex.ts"],"sourcesContent":["/**\r\n * Brycks Design System - Z-Index Tokens\r\n *\r\n * Layering system for consistent stacking context management.\r\n */\r\n\r\n/** Z-index scale */\r\nexport const zIndex = {\r\n  /** Hidden - below everything */\r\n  hide: -1,\r\n  /** Auto - default stacking */\r\n  auto: 'auto',\r\n  /** Base - normal content */\r\n  base: 0,\r\n  /** Docked - sticky elements */\r\n  docked: 10,\r\n  /** Dropdown - menus, selects */\r\n  dropdown: 1000,\r\n  /** Sticky - sticky headers */\r\n  sticky: 1100,\r\n  /** Banner - notification banners */\r\n  banner: 1200,\r\n  /** Overlay - backdrop overlays */\r\n  overlay: 1300,\r\n  /** Modal - dialog windows */\r\n  modal: 1400,\r\n  /** Popover - popovers, tooltips */\r\n  popover: 1500,\r\n  /** Skiplink - accessibility skip links */\r\n  skipLink: 1600,\r\n  /** Toast - notification toasts */\r\n  toast: 1700,\r\n  /** Tooltip - tooltips (highest) */\r\n  tooltip: 1800,\r\n} as const\r\n\r\nexport type ZIndex = keyof typeof zIndex\r\n"],"names":["zIndex"],"mappings":"AAOO,MAAMA,IAAS;AAAA;AAAA,EAEpB,MAAM;AAAA;AAAA,EAEN,MAAM;AAAA;AAAA,EAEN,MAAM;AAAA;AAAA,EAEN,QAAQ;AAAA;AAAA,EAER,UAAU;AAAA;AAAA,EAEV,QAAQ;AAAA;AAAA,EAER,QAAQ;AAAA;AAAA,EAER,SAAS;AAAA;AAAA,EAET,OAAO;AAAA;AAAA,EAEP,SAAS;AAAA;AAAA,EAET,UAAU;AAAA;AAAA,EAEV,OAAO;AAAA;AAAA,EAEP,SAAS;AACX;"}
+{"version":3,"file":"zIndex.js","sources":["../../../src/design-system/tokens/zIndex.ts"],"sourcesContent":["/**\r\n * Brycks Design System - Z-Index Tokens\r\n *\r\n * Layering system for consistent stacking context management.\r\n */\r\n\r\n/** Z-index scale */\r\nexport const zIndex = {\r\n  /** Hidden - below everything */\r\n  hide: -1,\r\n  /** Auto - default stacking */\r\n  auto: 'auto',\r\n  /** Base - normal content */\r\n  base: 0,\r\n  /** Docked - sticky elements */\r\n  docked: 10,\r\n  /** Dropdown - menus, selects */\r\n  dropdown: 1000,\r\n  /** Sticky - sticky headers */\r\n  sticky: 1100,\r\n  /** Banner - notification banners */\r\n  banner: 1200,\r\n  /** Overlay - backdrop overlays */\r\n  overlay: 1300,\r\n  /** Modal - dialog windows */\r\n  modal: 1400,\r\n  /** Drawer - side panels (same layer as modal) */\r\n  drawer: 1400,\r\n  /** Popover - popovers, tooltips */\r\n  popover: 1500,\r\n  /** Skiplink - accessibility skip links */\r\n  skipLink: 1600,\r\n  /** Toast - notification toasts */\r\n  toast: 1700,\r\n  /** Tooltip - tooltips (highest) */\r\n  tooltip: 1800,\r\n} as const\r\n\r\nexport type ZIndex = keyof typeof zIndex\r\n"],"names":["zIndex"],"mappings":"AAOO,MAAMA,IAAS;AAAA;AAAA,EAEpB,MAAM;AAAA;AAAA,EAEN,MAAM;AAAA;AAAA,EAEN,MAAM;AAAA;AAAA,EAEN,QAAQ;AAAA;AAAA,EAER,UAAU;AAAA;AAAA,EAEV,QAAQ;AAAA;AAAA,EAER,QAAQ;AAAA;AAAA,EAER,SAAS;AAAA;AAAA,EAET,OAAO;AAAA;AAAA,EAEP,QAAQ;AAAA;AAAA,EAER,SAAS;AAAA;AAAA,EAET,UAAU;AAAA;AAAA,EAEV,OAAO;AAAA;AAAA,EAEP,SAAS;AACX;"}

package/dist/feedback.d.ts

@@ -27,6 +27,8 @@ export declare interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>,
     isDismissible?: boolean;
     /** Callback when dismissed */
     onDismiss?: () => void;
+    /** Accessible label of the dismiss button */
+    dismissLabel?: string;
     /** Custom class name */
     className?: string;
     /** Test ID */
@@ -58,6 +60,8 @@ export declare interface DrawerProps extends Omit<HTMLAttributes<HTMLDivElement>
     closeOnEscape?: boolean;
     /** Whether to show close button */
     showCloseButton?: boolean;
+    /** Accessible label of the close button */
+    closeLabel?: string;
     /** Whether to show overlay */
     showOverlay?: boolean;
     /** Custom class name */
@@ -87,6 +91,8 @@ export declare interface ModalProps extends Omit<HTMLAttributes<HTMLDivElement>,
     closeOnEscape?: boolean;
     /** Whether to show close button */
     showCloseButton?: boolean;
+    /** Accessible label of the close button */
+    closeLabel?: string;
     /** Custom class name */
     className?: string;
     /** Test ID */
@@ -200,6 +206,8 @@ export declare interface ToastProps extends Omit<HTMLAttributes<HTMLDivElement>,
     onClose?: () => void;
     /** Whether to show close button */
     showCloseButton?: boolean;
+    /** Accessible label of the close button */
+    closeLabel?: string;
     /** Action button */
     action?: ReactNode;
     /** Custom icon */

package/dist/form.d.ts

@@ -81,6 +81,12 @@ export declare interface ComboboxProps {
     creatable?: boolean;
     /** Callback when creating new option */
     onCreate?: (inputValue: string) => void;
+    /** Label of the create-option button */
+    createLabel?: (inputValue: string) => ReactNode;
+    /** Accessible label of the clear button */
+    clearLabel?: string;
+    /** Accessible label of the options listbox (when no aria-label is given) */
+    listboxLabel?: string;
     /** Custom class name */
     className?: string;
     /** Test ID */
@@ -609,6 +615,10 @@ export declare interface TagInputProps {
     suggestions?: TagItem[];
     /** Custom tag renderer */
     renderTag?: (tag: TagItem, onRemove: () => void) => ReactNode;
+    /** Message shown when the tag limit is reached */
+    maxTagsMessage?: (maxTags: number) => string;
+    /** Message shown when a duplicate tag is rejected */
+    duplicateMessage?: string;
     /** Label for accessibility */
     'aria-label'?: string;
     /** Custom class name */

package/dist/index.d.ts

@@ -110,6 +110,8 @@ export declare interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>,
     isDismissible?: boolean;
     /** Callback when dismissed */
     onDismiss?: () => void;
+    /** Accessible label of the dismiss button */
+    dismissLabel?: string;
     /** Custom class name */
     className?: string;
     /** Test ID */
@@ -1202,6 +1204,8 @@ export declare interface DrawerProps extends Omit<HTMLAttributes<HTMLDivElement>
     closeOnEscape?: boolean;
     /** Whether to show close button */
     showCloseButton?: boolean;
+    /** Accessible label of the close button */
+    closeLabel?: string;
     /** Whether to show overlay */
     showOverlay?: boolean;
     /** Custom class name */
@@ -2518,6 +2522,8 @@ export declare interface ModalProps extends Omit<HTMLAttributes<HTMLDivElement>,
     closeOnEscape?: boolean;
     /** Whether to show close button */
     showCloseButton?: boolean;
+    /** Accessible label of the close button */
+    closeLabel?: string;
     /** Custom class name */
     className?: string;
     /** Test ID */
@@ -2640,6 +2646,23 @@ export declare const pageHeaderSpacing: {
 
 export declare const Pagination: ForwardRefExoticComponent<PaginationProps & RefAttributes<HTMLElement>>;
 
+declare interface PaginationLabels {
+    /** aria-label of the nav landmark */
+    navigation?: string;
+    /** aria-label of the first-page button */
+    first?: string;
+    /** aria-label of the previous-page button */
+    previous?: string;
+    /** aria-label of the next-page button */
+    next?: string;
+    /** aria-label of the last-page button */
+    last?: string;
+    /** aria-label of a numbered page button */
+    page?: (page: number) => string;
+    /** Visible text of the `simple` variant */
+    of?: (page: number, totalPages: number) => string;
+}
+
 export declare interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange'> {
     /** Current page (1-indexed) */
     page: number;
@@ -2659,6 +2682,8 @@ export declare interface PaginationProps extends Omit<HTMLAttributes<HTMLElement
     showPrevNext?: boolean;
     /** Whether the component is disabled */
     disabled?: boolean;
+    /** Localizable labels (merged over English defaults) */
+    labels?: PaginationLabels;
     /** Custom class name */
     className?: string;
     /** Test ID */
@@ -3933,6 +3958,8 @@ export declare interface ToastProps extends Omit<HTMLAttributes<HTMLDivElement>,
     onClose?: () => void;
     /** Whether to show close button */
     showCloseButton?: boolean;
+    /** Accessible label of the close button */
+    closeLabel?: string;
     /** Action button */
     action?: ReactNode;
     /** Custom icon */
@@ -4298,6 +4325,8 @@ export declare const zIndex: {
     readonly overlay: 1300;
     /** Modal - dialog windows */
     readonly modal: 1400;
+    /** Drawer - side panels (same layer as modal) */
+    readonly drawer: 1400;
     /** Popover - popovers, tooltips */
     readonly popover: 1500;
     /** Skiplink - accessibility skip links */

package/dist/navigation.d.ts

@@ -237,6 +237,23 @@ export declare type MenuSize = 'sm' | 'md' | 'lg';
 
 export declare const Pagination: ForwardRefExoticComponent<PaginationProps & RefAttributes<HTMLElement>>;
 
+declare interface PaginationLabels {
+    /** aria-label of the nav landmark */
+    navigation?: string;
+    /** aria-label of the first-page button */
+    first?: string;
+    /** aria-label of the previous-page button */
+    previous?: string;
+    /** aria-label of the next-page button */
+    next?: string;
+    /** aria-label of the last-page button */
+    last?: string;
+    /** aria-label of a numbered page button */
+    page?: (page: number) => string;
+    /** Visible text of the `simple` variant */
+    of?: (page: number, totalPages: number) => string;
+}
+
 export declare interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange'> {
     /** Current page (1-indexed) */
     page: number;
@@ -256,6 +273,8 @@ export declare interface PaginationProps extends Omit<HTMLAttributes<HTMLElement
     showPrevNext?: boolean;
     /** Whether the component is disabled */
     disabled?: boolean;
+    /** Localizable labels (merged over English defaults) */
+    labels?: PaginationLabels;
     /** Custom class name */
     className?: string;
     /** Test ID */