@techzyapp/ui-library 1.0.43 → 1.0.44

package/dist/{Toaster-9hZ5MuW7.cjs.map → Toaster-D4T89N1S.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"Toaster-9hZ5MuW7.cjs","sources":["../src/components/Toast/ToastItem.tsx","../src/components/Toast/Toaster.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react'\nimport { Alert } from '../Alert'\nimport { closeToast, removeToast, type ToastPosition, type ToastRecord } from './toastStore'\nimport styles from './Toaster.module.css'\n\n/** Exit-animation duration (matches `--tz-duration`) — how long to keep a closing toast mounted. */\nconst EXIT_MS = 300\n\nexport interface ToastItemProps {\n  toast: ToastRecord\n  /** Fallback auto-dismiss delay when the toast doesn't set its own. */\n  duration: number\n  position: ToastPosition\n}\n\n/**\n * One rendered toast — an `Alert` wrapped with the enter/exit animation, the auto-dismiss timer\n * (paused while hovered), and the close wiring. Internal to `Toaster`.\n */\nexport function ToastItem({ toast, duration, position }: ToastItemProps) {\n  const [visible, setVisible] = useState(false)\n  const ttl = toast.duration ?? duration\n  const timer = useRef<number | undefined>(undefined)\n  const remaining = useRef(ttl)\n  const startedAt = useRef(0)\n\n  // enter — flip `visible` on the next frame so the transition runs\n  useEffect(() => {\n    const raf = requestAnimationFrame(() => setVisible(true))\n    return () => cancelAnimationFrame(raf)\n  }, [])\n\n  // exit — when the store marks this toast closing, animate out then remove it\n  useEffect(() => {\n    if (toast.open) return\n    setVisible(false)\n    const t = window.setTimeout(() => removeToast(toast.id), EXIT_MS)\n    return () => window.clearTimeout(t)\n  }, [toast.open, toast.id])\n\n  // auto-dismiss timer, paused on hover (tracks the remaining time across pauses)\n  const clearTimer = () => {\n    if (timer.current != null) {\n      window.clearTimeout(timer.current)\n      timer.current = undefined\n    }\n  }\n  const resume = () => {\n    if (!toast.open || remaining.current === Infinity) return\n    clearTimer()\n    startedAt.current = Date.now()\n    timer.current = window.setTimeout(() => closeToast(toast.id), remaining.current)\n  }\n  const pause = () => {\n    if (timer.current == null) return\n    clearTimer()\n    remaining.current -= Date.now() - startedAt.current\n  }\n  useEffect(() => {\n    // (re)start from the full duration on open, and whenever an update-by-id changes `duration`\n    // (otherwise the original countdown keeps running against the stale ttl)\n    remaining.current = ttl\n    resume()\n    return clearTimer\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [toast.open, ttl])\n\n  return (\n    <div\n      className={styles.item}\n      data-open={visible ? 'true' : 'false'}\n      data-position={position}\n      onMouseEnter={pause}\n      onMouseLeave={resume}\n    >\n      <Alert\n        color={toast.color}\n        variant={toast.variant ?? 'contained'}\n        icon={toast.icon}\n        action={toast.action}\n        onClose={() => closeToast(toast.id)}\n        role=\"status\"\n        className={styles.alert}\n      >\n        {toast.message}\n      </Alert>\n    </div>\n  )\n}\n","import { useSyncExternalStore } from 'react'\nimport { createPortal } from 'react-dom'\nimport { useToastConfig } from '../../theme'\nimport { getToasts, subscribeToasts, type ToastPosition } from './toastStore'\nimport { ToastItem } from './ToastItem'\nimport styles from './Toaster.module.css'\n\nexport interface ToasterProps {\n  /** Corner the toasts stack in. Defaults to the app-wide `config.toast.position`, else `top-center`. */\n  position?: ToastPosition\n  /**\n   * Default auto-dismiss delay in ms; a per-toast `duration` overrides it. Defaults to the app-wide\n   * `config.toast.duration`, else `4000`.\n   */\n  duration?: number\n}\n\n/**\n * The toast viewport — mount it **once** near the app root. It portals to `<body>` at `--tz-z-toast`,\n * subscribes to the imperative `toast` store, and renders each toast as an animated, auto-dismissing\n * `Alert`. Drive it from anywhere with `toast.success('Saved')` / `toast.error(...)` / `toast.dismiss(id)`.\n * `position` / `duration` resolve **prop → `config.toast` → built-in default** (`top-center` / `4000`), so the\n * prop-less viewports `AdminRoot` / `RootLayout` mount follow the app config; outside a `ConfigProvider` the\n * built-in defaults apply.\n *\n * @example\n * <Toaster position=\"top-center\" />\n * // …elsewhere:\n * toast.success('Saved')\n */\nexport function Toaster({ position: positionProp, duration: durationProp }: ToasterProps) {\n  const config = useToastConfig()\n  const position = positionProp ?? config.position ?? 'top-center'\n  const duration = durationProp ?? config.duration ?? 4000\n  const toasts = useSyncExternalStore(subscribeToasts, getToasts, getToasts)\n\n  if (typeof document === 'undefined') return null\n\n  return createPortal(\n    <div className={styles.viewport} data-position={position} aria-live=\"polite\">\n      {toasts.map((t) => (\n        <ToastItem key={t.id} toast={t} duration={duration} position={position} />\n      ))}\n    </div>,\n    document.body,\n  )\n}\n"],"names":["EXIT_MS","ToastItem","toast","duration","position","visible","setVisible","useState","ttl","timer","useRef","remaining","startedAt","useEffect","raf","t","removeToast","clearTimer","resume","closeToast","pause","jsx","styles","Alert","Toaster","positionProp","durationProp","config","useToastConfig","toasts","useSyncExternalStore","subscribeToasts","getToasts","createPortal"],"mappings":"2SAMMA,EAAU,IAaT,SAASC,EAAU,CAAE,MAAAC,EAAO,SAAAC,EAAU,SAAAC,GAA4B,CACvE,KAAM,CAACC,EAASC,CAAU,EAAIC,EAAAA,SAAS,EAAK,EACtCC,EAAMN,EAAM,UAAYC,EACxBM,EAAQC,EAAAA,OAA2B,MAAS,EAC5CC,EAAYD,EAAAA,OAAOF,CAAG,EACtBI,EAAYF,EAAAA,OAAO,CAAC,EAG1BG,EAAAA,UAAU,IAAM,CACd,MAAMC,EAAM,sBAAsB,IAAMR,EAAW,EAAI,CAAC,EACxD,MAAO,IAAM,qBAAqBQ,CAAG,CACvC,EAAG,CAAA,CAAE,EAGLD,EAAAA,UAAU,IAAM,CACd,GAAIX,EAAM,KAAM,OAChBI,EAAW,EAAK,EAChB,MAAMS,EAAI,OAAO,WAAW,IAAMC,EAAAA,YAAYd,EAAM,EAAE,EAAGF,CAAO,EAChE,MAAO,IAAM,OAAO,aAAae,CAAC,CACpC,EAAG,CAACb,EAAM,KAAMA,EAAM,EAAE,CAAC,EAGzB,MAAMe,EAAa,IAAM,CACnBR,EAAM,SAAW,OACnB,OAAO,aAAaA,EAAM,OAAO,EACjCA,EAAM,QAAU,OAEpB,EACMS,EAAS,IAAM,CACf,CAAChB,EAAM,MAAQS,EAAU,UAAY,MACzCM,EAAA,EACAL,EAAU,QAAU,KAAK,IAAA,EACzBH,EAAM,QAAU,OAAO,WAAW,IAAMU,aAAWjB,EAAM,EAAE,EAAGS,EAAU,OAAO,EACjF,EACMS,EAAQ,IAAM,CACdX,EAAM,SAAW,OACrBQ,EAAA,EACAN,EAAU,SAAW,KAAK,IAAA,EAAQC,EAAU,QAC9C,EACAC,OAAAA,EAAAA,UAAU,KAGRF,EAAU,QAAUH,EACpBU,EAAA,EACOD,GAEN,CAACf,EAAM,KAAMM,CAAG,CAAC,EAGlBa,EAAAA,IAAC,MAAA,CACC,UAAWC,EAAO,KAClB,YAAWjB,EAAU,OAAS,QAC9B,gBAAeD,EACf,aAAcgB,EACd,aAAcF,EAEd,SAAAG,EAAAA,IAACE,EAAAA,MAAA,CACC,MAAOrB,EAAM,MACb,QAASA,EAAM,SAAW,YAC1B,KAAMA,EAAM,KACZ,OAAQA,EAAM,OACd,QAAS,IAAMiB,EAAAA,WAAWjB,EAAM,EAAE,EAClC,KAAK,SACL,UAAWoB,EAAO,MAEjB,SAAApB,EAAM,OAAA,CAAA,CACT,CAAA,CAGN,CC1DO,SAASsB,EAAQ,CAAE,SAAUC,EAAc,SAAUC,GAA8B,CACxF,MAAMC,EAASC,EAAAA,eAAA,EACTxB,EAAWqB,GAAgBE,EAAO,UAAY,aAC9CxB,EAAWuB,GAAgBC,EAAO,UAAY,IAC9CE,EAASC,EAAAA,qBAAqBC,kBAAiBC,EAAAA,UAAWA,EAAAA,SAAS,EAEzE,OAAI,OAAO,SAAa,IAAoB,KAErCC,EAAAA,aACLZ,EAAAA,IAAC,OAAI,UAAWC,EAAO,SAAU,gBAAelB,EAAU,YAAU,SACjE,SAAAyB,EAAO,IAAK,GACXR,EAAAA,IAACpB,GAAqB,MAAO,EAAG,SAAAE,EAAoB,SAAAC,GAApC,EAAE,EAAsD,CACzE,CAAA,CACH,EACA,SAAS,IAAA,CAEb"}
+{"version":3,"file":"Toaster-D4T89N1S.cjs","sources":["../src/components/Toast/ToastItem.tsx","../src/components/Toast/Toaster.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react'\nimport { Alert } from '../Alert'\nimport { closeToast, removeToast, type ToastPosition, type ToastRecord } from './toastStore'\nimport styles from './Toaster.module.css'\n\n/** Exit-animation duration (matches `--tz-duration`) — how long to keep a closing toast mounted. */\nconst EXIT_MS = 300\n\nexport interface ToastItemProps {\n  toast: ToastRecord\n  /** Fallback auto-dismiss delay when the toast doesn't set its own. */\n  duration: number\n  position: ToastPosition\n}\n\n/**\n * One rendered toast — an `Alert` wrapped with the enter/exit animation, the auto-dismiss timer\n * (paused while hovered), and the close wiring. Internal to `Toaster`.\n */\nexport function ToastItem({ toast, duration, position }: ToastItemProps) {\n  const [visible, setVisible] = useState(false)\n  const ttl = toast.duration ?? duration\n  const timer = useRef<number | undefined>(undefined)\n  const remaining = useRef(ttl)\n  const startedAt = useRef(0)\n\n  // enter — flip `visible` on the next frame so the transition runs\n  useEffect(() => {\n    const raf = requestAnimationFrame(() => setVisible(true))\n    return () => cancelAnimationFrame(raf)\n  }, [])\n\n  // exit — when the store marks this toast closing, animate out then remove it\n  useEffect(() => {\n    if (toast.open) return\n    setVisible(false)\n    const t = window.setTimeout(() => removeToast(toast.id), EXIT_MS)\n    return () => window.clearTimeout(t)\n  }, [toast.open, toast.id])\n\n  // auto-dismiss timer, paused on hover (tracks the remaining time across pauses)\n  const clearTimer = () => {\n    if (timer.current != null) {\n      window.clearTimeout(timer.current)\n      timer.current = undefined\n    }\n  }\n  const resume = () => {\n    if (!toast.open || remaining.current === Infinity) return\n    clearTimer()\n    startedAt.current = Date.now()\n    timer.current = window.setTimeout(() => closeToast(toast.id), remaining.current)\n  }\n  const pause = () => {\n    if (timer.current == null) return\n    clearTimer()\n    remaining.current -= Date.now() - startedAt.current\n  }\n  useEffect(() => {\n    // (re)start from the full duration on open, and whenever an update-by-id changes `duration`\n    // (otherwise the original countdown keeps running against the stale ttl)\n    remaining.current = ttl\n    resume()\n    return clearTimer\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [toast.open, ttl])\n\n  return (\n    <div\n      className={styles.item}\n      data-open={visible ? 'true' : 'false'}\n      data-position={position}\n      onMouseEnter={pause}\n      onMouseLeave={resume}\n    >\n      <Alert\n        color={toast.color}\n        variant={toast.variant ?? 'contained'}\n        icon={toast.icon}\n        action={toast.action}\n        onClose={() => closeToast(toast.id)}\n        role=\"status\"\n        className={styles.alert}\n      >\n        {toast.message}\n      </Alert>\n    </div>\n  )\n}\n","import { useSyncExternalStore } from 'react'\nimport { createPortal } from 'react-dom'\nimport { useToastConfig } from '../../theme'\nimport { getToasts, subscribeToasts, type ToastPosition } from './toastStore'\nimport { ToastItem } from './ToastItem'\nimport styles from './Toaster.module.css'\n\nexport interface ToasterProps {\n  /** Corner the toasts stack in. Defaults to the app-wide `config.toast.position`, else `top-center`. */\n  position?: ToastPosition\n  /**\n   * Default auto-dismiss delay in ms; a per-toast `duration` overrides it. Defaults to the app-wide\n   * `config.toast.duration`, else `4000`.\n   */\n  duration?: number\n}\n\n/**\n * The toast viewport — mount it **once** near the app root. It portals to `<body>` at `--tz-z-toast`,\n * subscribes to the imperative `toast` store, and renders each toast as an animated, auto-dismissing\n * `Alert`. Drive it from anywhere with `toast.success('Saved')` / `toast.error(...)` / `toast.dismiss(id)`.\n * `position` / `duration` resolve **prop → `config.toast` → built-in default** (`top-center` / `4000`), so the\n * prop-less viewports `AdminRoot` / `RootLayout` mount follow the app config; outside a `ConfigProvider` the\n * built-in defaults apply.\n *\n * @example\n * <Toaster position=\"top-center\" />\n * // …elsewhere:\n * toast.success('Saved')\n */\nexport function Toaster({ position: positionProp, duration: durationProp }: ToasterProps) {\n  const config = useToastConfig()\n  const position = positionProp ?? config.position ?? 'top-center'\n  const duration = durationProp ?? config.duration ?? 4000\n  const toasts = useSyncExternalStore(subscribeToasts, getToasts, getToasts)\n\n  if (typeof document === 'undefined') return null\n\n  return createPortal(\n    <div className={styles.viewport} data-position={position} aria-live=\"polite\">\n      {toasts.map((t) => (\n        <ToastItem key={t.id} toast={t} duration={duration} position={position} />\n      ))}\n    </div>,\n    document.body,\n  )\n}\n"],"names":["EXIT_MS","ToastItem","toast","duration","position","visible","setVisible","useState","ttl","timer","useRef","remaining","startedAt","useEffect","raf","t","removeToast","clearTimer","resume","closeToast","pause","jsx","styles","Alert","Toaster","positionProp","durationProp","config","useToastConfig","toasts","useSyncExternalStore","subscribeToasts","getToasts","createPortal"],"mappings":"2SAMMA,EAAU,IAaT,SAASC,EAAU,CAAE,MAAAC,EAAO,SAAAC,EAAU,SAAAC,GAA4B,CACvE,KAAM,CAACC,EAASC,CAAU,EAAIC,EAAAA,SAAS,EAAK,EACtCC,EAAMN,EAAM,UAAYC,EACxBM,EAAQC,EAAAA,OAA2B,MAAS,EAC5CC,EAAYD,EAAAA,OAAOF,CAAG,EACtBI,EAAYF,EAAAA,OAAO,CAAC,EAG1BG,EAAAA,UAAU,IAAM,CACd,MAAMC,EAAM,sBAAsB,IAAMR,EAAW,EAAI,CAAC,EACxD,MAAO,IAAM,qBAAqBQ,CAAG,CACvC,EAAG,CAAA,CAAE,EAGLD,EAAAA,UAAU,IAAM,CACd,GAAIX,EAAM,KAAM,OAChBI,EAAW,EAAK,EAChB,MAAMS,EAAI,OAAO,WAAW,IAAMC,EAAAA,YAAYd,EAAM,EAAE,EAAGF,CAAO,EAChE,MAAO,IAAM,OAAO,aAAae,CAAC,CACpC,EAAG,CAACb,EAAM,KAAMA,EAAM,EAAE,CAAC,EAGzB,MAAMe,EAAa,IAAM,CACnBR,EAAM,SAAW,OACnB,OAAO,aAAaA,EAAM,OAAO,EACjCA,EAAM,QAAU,OAEpB,EACMS,EAAS,IAAM,CACf,CAAChB,EAAM,MAAQS,EAAU,UAAY,MACzCM,EAAA,EACAL,EAAU,QAAU,KAAK,IAAA,EACzBH,EAAM,QAAU,OAAO,WAAW,IAAMU,aAAWjB,EAAM,EAAE,EAAGS,EAAU,OAAO,EACjF,EACMS,EAAQ,IAAM,CACdX,EAAM,SAAW,OACrBQ,EAAA,EACAN,EAAU,SAAW,KAAK,IAAA,EAAQC,EAAU,QAC9C,EACAC,OAAAA,EAAAA,UAAU,KAGRF,EAAU,QAAUH,EACpBU,EAAA,EACOD,GAEN,CAACf,EAAM,KAAMM,CAAG,CAAC,EAGlBa,EAAAA,IAAC,MAAA,CACC,UAAWC,EAAO,KAClB,YAAWjB,EAAU,OAAS,QAC9B,gBAAeD,EACf,aAAcgB,EACd,aAAcF,EAEd,SAAAG,EAAAA,IAACE,EAAAA,MAAA,CACC,MAAOrB,EAAM,MACb,QAASA,EAAM,SAAW,YAC1B,KAAMA,EAAM,KACZ,OAAQA,EAAM,OACd,QAAS,IAAMiB,EAAAA,WAAWjB,EAAM,EAAE,EAClC,KAAK,SACL,UAAWoB,EAAO,MAEjB,SAAApB,EAAM,OAAA,CAAA,CACT,CAAA,CAGN,CC1DO,SAASsB,EAAQ,CAAE,SAAUC,EAAc,SAAUC,GAA8B,CACxF,MAAMC,EAASC,EAAAA,eAAA,EACTxB,EAAWqB,GAAgBE,EAAO,UAAY,aAC9CxB,EAAWuB,GAAgBC,EAAO,UAAY,IAC9CE,EAASC,EAAAA,qBAAqBC,kBAAiBC,EAAAA,UAAWA,EAAAA,SAAS,EAEzE,OAAI,OAAO,SAAa,IAAoB,KAErCC,EAAAA,aACLZ,EAAAA,IAAC,OAAI,UAAWC,EAAO,SAAU,gBAAelB,EAAU,YAAU,SACjE,SAAAyB,EAAO,IAAK,GACXR,EAAAA,IAACpB,GAAqB,MAAO,EAAG,SAAAE,EAAoB,SAAAC,GAApC,EAAE,EAAsD,CACzE,CAAA,CACH,EACA,SAAS,IAAA,CAEb"}

package/dist/ToggleButtonGroup-CGNRLxjg.cjs

@@ -0,0 +1,2 @@
+"use strict";const u=require("react/jsx-runtime"),i=require("react"),N=require("clsx"),W=require("./Icon-CBg21lKA.cjs"),z=i.createContext(null);function E(){return i.useContext(z)}const R="_toggleButton_1d0ht_4",M="_selected_1d0ht_31",O="_fullWidth_1d0ht_49",p="_sm_1d0ht_54",D="_md_1d0ht_60",F="_lg_1d0ht_66",L="_group_1d0ht_74",P="_vertical_1d0ht_77",s={toggleButton:R,selected:M,fullWidth:O,sm:p,md:D,lg:F,group:L,vertical:P},G=i.forwardRef(function({value:r,selected:a,onChange:o,color:c,size:g,fullWidth:m,disabled:b,className:x,style:B,children:h,onClick:n,...y},S){const e=E(),d=e?e.isSelected(r):a??!1,_=c??(e==null?void 0:e.color)??"primary",T=g??(e==null?void 0:e.size)??"md",v=!!(b||e!=null&&e.disabled),l=!e&&(m??!1);return u.jsx("button",{ref:S,type:"button",className:N.clsx(s.toggleButton,s[T],d&&s.selected,l&&s.fullWidth,x),style:{"--tz-btn-rgb":`var(--tz-color-${_}-rgb)`,...B},"aria-pressed":d,disabled:v,onClick:A=>{n==null||n(A),e?e.toggle(r):o==null||o(!d,r)},...y,children:h})}),$=new Set(W.ICON_NAMES),H=i.forwardRef(function({exclusive:r=!1,value:a,defaultValue:o,onChange:c,options:g,orientation:m="horizontal",size:b="md",color:x="primary",disabled:B=!1,fullWidth:h=!1,children:n,className:y,style:S,...e},d){const _=a!==void 0,[T,v]=i.useState(o),l=_?a:T,q={isSelected:t=>r?l===t:Array.isArray(l)&&l.includes(t),toggle:t=>{let f;if(r)f=l===t?null:t;else{const j=Array.isArray(l)?l:[];f=j.includes(t)?j.filter(w=>w!==t):[...j,t]}_||v(f),c==null||c(f)},size:b,color:x,disabled:B};return u.jsx("div",{ref:d,role:"group",className:N.clsx(s.group,m==="vertical"&&s.vertical,h&&s.fullWidth,y),style:S,...e,children:u.jsx(z.Provider,{value:q,children:g?g.map(t=>u.jsxs(G,{value:t.value,disabled:t.disabled,"aria-label":t.ariaLabel,children:[t.icon!=null&&(typeof t.icon=="string"&&$.has(t.icon)?u.jsx(W.Icon,{name:t.icon}):t.icon),t.label]},t.value)):n})})});exports.ToggleButton=G;exports.ToggleButtonGroup=H;
+//# sourceMappingURL=ToggleButtonGroup-CGNRLxjg.cjs.map

package/dist/{ToggleButtonGroup-Ci_DFvdt.cjs.map → ToggleButtonGroup-CGNRLxjg.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"ToggleButtonGroup-Ci_DFvdt.cjs","sources":["../src/components/ToggleButton/toggleButtonGroupContext.ts","../src/components/ToggleButton/ToggleButton.tsx","../src/components/ToggleButton/ToggleButtonGroup.tsx"],"sourcesContent":["import { createContext, useContext } from 'react'\nimport type { ThemeColor } from '../../theme'\nimport type { ToggleButtonSize } from './ToggleButton'\n\n/** Shared state a `<ToggleButtonGroup>` hands down to its `<ToggleButton>` children via context. */\nexport interface ToggleButtonGroupContextValue {\n  /** Whether a given button value is currently selected. */\n  isSelected: (value: string) => boolean\n  /** Toggle a button value — called by a child on click. */\n  toggle: (value: string) => void\n  size?: ToggleButtonSize\n  color?: ThemeColor\n  disabled?: boolean\n  // (no `fullWidth` — the group applies its own `.fullWidth` class on the container; a child only honors\n  // its own `fullWidth` prop when standalone, so passing it through context would be dead state)\n}\n\nexport const ToggleButtonGroupContext = createContext<ToggleButtonGroupContextValue | null>(null)\n\n/** Read the surrounding `<ToggleButtonGroup>` (or `null` when a `<ToggleButton>` is standalone). */\nexport function useToggleButtonGroup(): ToggleButtonGroupContextValue | null {\n  return useContext(ToggleButtonGroupContext)\n}\n","import { forwardRef, type ButtonHTMLAttributes, type CSSProperties, type ReactNode } from 'react'\nimport { clsx } from 'clsx'\nimport type { ThemeColor } from '../../theme'\nimport { useToggleButtonGroup } from './toggleButtonGroupContext'\nimport styles from './ToggleButton.module.css'\n\nexport type ToggleButtonSize = 'sm' | 'md' | 'lg'\n\nexport interface ToggleButtonProps extends Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  'color' | 'value' | 'onChange'\n> {\n  /** The value this button represents — its identity within a `ToggleButtonGroup`. */\n  value: string\n  /** Selected state for standalone use (inside a group, the group owns selection). */\n  selected?: boolean\n  /** Fires with the next selected state — standalone use only. */\n  onChange?: (selected: boolean, value: string) => void\n  /** Theme palette token tinting the selected state. Defaults to `primary`. */\n  color?: ThemeColor\n  /** Preset size. Defaults to `md`. */\n  size?: ToggleButtonSize\n  /** Stretch to fill the container width. */\n  fullWidth?: boolean\n  /** Button content — typically an `Icon`, text, or both. */\n  children?: ReactNode\n}\n\n/**\n * A two-state button that toggles between selected and unselected — the building block of\n * `ToggleButtonGroup` (which owns selection, size, color and disabled via context), but also usable\n * standalone with `selected` + `onChange`. Selected uses the soft `filled` tint of `color` (the shared\n * `--tz-btn-rgb` pattern); `aria-pressed` reflects the state. The ref points at the `<button>`.\n */\nexport const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(function ToggleButton(\n  {\n    value,\n    selected,\n    onChange,\n    color,\n    size,\n    fullWidth,\n    disabled,\n    className,\n    style,\n    children,\n    onClick,\n    ...props\n  },\n  ref,\n) {\n  const group = useToggleButtonGroup()\n  const isSelected = group ? group.isSelected(value) : (selected ?? false)\n  const resolvedColor = color ?? group?.color ?? 'primary'\n  const resolvedSize = size ?? group?.size ?? 'md'\n  const resolvedDisabled = Boolean(disabled || group?.disabled)\n  // standalone full-width uses a width:100% class; inside a group the group stretches the buttons\n  const resolvedFullWidth = !group && (fullWidth ?? false)\n\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      className={clsx(\n        styles.toggleButton,\n        styles[resolvedSize],\n        isSelected && styles.selected,\n        resolvedFullWidth && styles.fullWidth,\n        className,\n      )}\n      style={{ '--tz-btn-rgb': `var(--tz-color-${resolvedColor}-rgb)`, ...style } as CSSProperties}\n      aria-pressed={isSelected}\n      disabled={resolvedDisabled}\n      onClick={(event) => {\n        onClick?.(event)\n        if (group) group.toggle(value)\n        else onChange?.(!isSelected, value)\n      }}\n      {...props}\n    >\n      {children}\n    </button>\n  )\n})\n","import {\n  forwardRef,\n  useState,\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactNode,\n} from 'react'\nimport { clsx } from 'clsx'\nimport type { ThemeColor } from '../../theme'\nimport { ICON_NAMES, type IconName } from '../../icons/names'\nimport { Icon } from '../Icon'\nimport { ToggleButton, type ToggleButtonSize } from './ToggleButton'\nimport {\n  ToggleButtonGroupContext,\n  type ToggleButtonGroupContextValue,\n} from './toggleButtonGroupContext'\nimport styles from './ToggleButton.module.css'\n\nconst ICON_NAME_SET = new Set<string>(ICON_NAMES)\n\nexport type ToggleButtonGroupOrientation = 'horizontal' | 'vertical'\n\n/** A data-driven button for the `options` prop. */\nexport interface ToggleButtonOption {\n  value: string\n  label?: ReactNode\n  /** Leading icon — a known `IconName` or any node. */\n  icon?: IconName | ReactNode\n  disabled?: boolean\n  /** Accessible label (use for icon-only buttons). */\n  ariaLabel?: string\n}\n\nexport interface ToggleButtonGroupProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'color' | 'onChange' | 'defaultValue'\n> {\n  /**\n   * Single-selection (`value` is a `string | null`, like a segmented control) vs multiple (`value` is\n   * a `string[]`). Defaults to `false` (multiple), matching MUI.\n   */\n  exclusive?: boolean\n  /** Controlled value — a `string | null` when `exclusive`, else a `string[]`. */\n  value?: string | string[] | null\n  /** Initial value for uncontrolled use (same shape as `value`). */\n  defaultValue?: string | string[] | null\n  /** Fires with the next value (matches the `exclusive` shape). */\n  onChange?: (value: string | string[] | null) => void\n  /** Data-driven buttons — an alternative to passing `<ToggleButton>` children. */\n  options?: ToggleButtonOption[]\n  /** Lay the buttons in a row or a column. Defaults to `horizontal`. */\n  orientation?: ToggleButtonGroupOrientation\n  /** Preset size for every button. Defaults to `md`. */\n  size?: ToggleButtonSize\n  /** Theme palette token tinting selected buttons. Defaults to `primary`. */\n  color?: ThemeColor\n  /** Disables every button in the group. */\n  disabled?: boolean\n  /** Stretch the group to fill the width (buttons share it equally). */\n  fullWidth?: boolean\n  /** `<ToggleButton>` children (used when `options` is not given). */\n  children?: ReactNode\n}\n\n/**\n * Groups `<ToggleButton>`s into a joined, segmented control. **`exclusive`** picks single-selection\n * (`value` is a `string | null` — clicking the active button deselects it) vs multiple (`value` is a\n * `string[]`); both are controlled (`value` + `onChange`) or uncontrolled (`defaultValue`). Supply the\n * buttons via the data-driven `options` prop or as `<ToggleButton>` children — the group shares\n * `size`/`color`/`disabled`/`fullWidth` and the selection via context. `orientation` lays them in a\n * row or column; adjacent borders collapse so the strip reads as one control. `role=\"group\"`; styling\n * uses `--tz-*` tokens.\n */\nexport const ToggleButtonGroup = forwardRef<HTMLDivElement, ToggleButtonGroupProps>(\n  function ToggleButtonGroup(\n    {\n      exclusive = false,\n      value,\n      defaultValue,\n      onChange,\n      options,\n      orientation = 'horizontal',\n      size = 'md',\n      color = 'primary',\n      disabled = false,\n      fullWidth = false,\n      children,\n      className,\n      style,\n      ...props\n    },\n    ref,\n  ) {\n    const isControlled = value !== undefined\n    const [internal, setInternal] = useState<string | string[] | null | undefined>(defaultValue)\n    const current = isControlled ? value : internal\n\n    const isSelected = (v: string) =>\n      exclusive ? current === v : Array.isArray(current) && current.includes(v)\n\n    const toggle = (v: string) => {\n      let next: string | string[] | null\n      if (exclusive) {\n        next = current === v ? null : v // click the active button to deselect (MUI behavior)\n      } else {\n        const arr = Array.isArray(current) ? current : []\n        next = arr.includes(v) ? arr.filter((x) => x !== v) : [...arr, v]\n      }\n      if (!isControlled) setInternal(next)\n      onChange?.(next)\n    }\n\n    const ctx: ToggleButtonGroupContextValue = {\n      isSelected,\n      toggle,\n      size,\n      color,\n      disabled,\n    }\n\n    return (\n      <div\n        ref={ref}\n        role=\"group\"\n        className={clsx(\n          styles.group,\n          orientation === 'vertical' && styles.vertical,\n          fullWidth && styles.fullWidth,\n          className,\n        )}\n        style={style as CSSProperties}\n        {...props}\n      >\n        <ToggleButtonGroupContext.Provider value={ctx}>\n          {options\n            ? options.map((option) => (\n                <ToggleButton\n                  key={option.value}\n                  value={option.value}\n                  disabled={option.disabled}\n                  aria-label={option.ariaLabel}\n                >\n                  {option.icon != null &&\n                    (typeof option.icon === 'string' && ICON_NAME_SET.has(option.icon) ? (\n                      <Icon name={option.icon as IconName} />\n                    ) : (\n                      option.icon\n                    ))}\n                  {option.label}\n                </ToggleButton>\n              ))\n            : children}\n        </ToggleButtonGroupContext.Provider>\n      </div>\n    )\n  },\n)\n"],"names":["ToggleButtonGroupContext","createContext","useToggleButtonGroup","useContext","ToggleButton","forwardRef","value","selected","onChange","color","size","fullWidth","disabled","className","style","children","onClick","props","ref","group","isSelected","resolvedColor","resolvedSize","resolvedDisabled","resolvedFullWidth","jsx","clsx","styles","event","ICON_NAME_SET","ICON_NAMES","ToggleButtonGroup","exclusive","defaultValue","options","orientation","isControlled","internal","setInternal","useState","current","ctx","v","next","arr","x","option","jsxs","Icon"],"mappings":"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"}
+{"version":3,"file":"ToggleButtonGroup-CGNRLxjg.cjs","sources":["../src/components/ToggleButton/toggleButtonGroupContext.ts","../src/components/ToggleButton/ToggleButton.tsx","../src/components/ToggleButton/ToggleButtonGroup.tsx"],"sourcesContent":["import { createContext, useContext } from 'react'\nimport type { ThemeColor } from '../../theme'\nimport type { ToggleButtonSize } from './ToggleButton'\n\n/** Shared state a `<ToggleButtonGroup>` hands down to its `<ToggleButton>` children via context. */\nexport interface ToggleButtonGroupContextValue {\n  /** Whether a given button value is currently selected. */\n  isSelected: (value: string) => boolean\n  /** Toggle a button value — called by a child on click. */\n  toggle: (value: string) => void\n  size?: ToggleButtonSize\n  color?: ThemeColor\n  disabled?: boolean\n  // (no `fullWidth` — the group applies its own `.fullWidth` class on the container; a child only honors\n  // its own `fullWidth` prop when standalone, so passing it through context would be dead state)\n}\n\nexport const ToggleButtonGroupContext = createContext<ToggleButtonGroupContextValue | null>(null)\n\n/** Read the surrounding `<ToggleButtonGroup>` (or `null` when a `<ToggleButton>` is standalone). */\nexport function useToggleButtonGroup(): ToggleButtonGroupContextValue | null {\n  return useContext(ToggleButtonGroupContext)\n}\n","import { forwardRef, type ButtonHTMLAttributes, type CSSProperties, type ReactNode } from 'react'\nimport { clsx } from 'clsx'\nimport type { ThemeColor } from '../../theme'\nimport { useToggleButtonGroup } from './toggleButtonGroupContext'\nimport styles from './ToggleButton.module.css'\n\nexport type ToggleButtonSize = 'sm' | 'md' | 'lg'\n\nexport interface ToggleButtonProps extends Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  'color' | 'value' | 'onChange'\n> {\n  /** The value this button represents — its identity within a `ToggleButtonGroup`. */\n  value: string\n  /** Selected state for standalone use (inside a group, the group owns selection). */\n  selected?: boolean\n  /** Fires with the next selected state — standalone use only. */\n  onChange?: (selected: boolean, value: string) => void\n  /** Theme palette token tinting the selected state. Defaults to `primary`. */\n  color?: ThemeColor\n  /** Preset size. Defaults to `md`. */\n  size?: ToggleButtonSize\n  /** Stretch to fill the container width. */\n  fullWidth?: boolean\n  /** Button content — typically an `Icon`, text, or both. */\n  children?: ReactNode\n}\n\n/**\n * A two-state button that toggles between selected and unselected — the building block of\n * `ToggleButtonGroup` (which owns selection, size, color and disabled via context), but also usable\n * standalone with `selected` + `onChange`. Selected uses the soft `filled` tint of `color` (the shared\n * `--tz-btn-rgb` pattern); `aria-pressed` reflects the state. The ref points at the `<button>`.\n */\nexport const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(function ToggleButton(\n  {\n    value,\n    selected,\n    onChange,\n    color,\n    size,\n    fullWidth,\n    disabled,\n    className,\n    style,\n    children,\n    onClick,\n    ...props\n  },\n  ref,\n) {\n  const group = useToggleButtonGroup()\n  const isSelected = group ? group.isSelected(value) : (selected ?? false)\n  const resolvedColor = color ?? group?.color ?? 'primary'\n  const resolvedSize = size ?? group?.size ?? 'md'\n  const resolvedDisabled = Boolean(disabled || group?.disabled)\n  // standalone full-width uses a width:100% class; inside a group the group stretches the buttons\n  const resolvedFullWidth = !group && (fullWidth ?? false)\n\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      className={clsx(\n        styles.toggleButton,\n        styles[resolvedSize],\n        isSelected && styles.selected,\n        resolvedFullWidth && styles.fullWidth,\n        className,\n      )}\n      style={{ '--tz-btn-rgb': `var(--tz-color-${resolvedColor}-rgb)`, ...style } as CSSProperties}\n      aria-pressed={isSelected}\n      disabled={resolvedDisabled}\n      onClick={(event) => {\n        onClick?.(event)\n        if (group) group.toggle(value)\n        else onChange?.(!isSelected, value)\n      }}\n      {...props}\n    >\n      {children}\n    </button>\n  )\n})\n","import {\n  forwardRef,\n  useState,\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactNode,\n} from 'react'\nimport { clsx } from 'clsx'\nimport type { ThemeColor } from '../../theme'\nimport { ICON_NAMES, type IconName } from '../../icons/names'\nimport { Icon } from '../Icon'\nimport { ToggleButton, type ToggleButtonSize } from './ToggleButton'\nimport {\n  ToggleButtonGroupContext,\n  type ToggleButtonGroupContextValue,\n} from './toggleButtonGroupContext'\nimport styles from './ToggleButton.module.css'\n\nconst ICON_NAME_SET = new Set<string>(ICON_NAMES)\n\nexport type ToggleButtonGroupOrientation = 'horizontal' | 'vertical'\n\n/** A data-driven button for the `options` prop. */\nexport interface ToggleButtonOption {\n  value: string\n  label?: ReactNode\n  /** Leading icon — a known `IconName` or any node. */\n  icon?: IconName | ReactNode\n  disabled?: boolean\n  /** Accessible label (use for icon-only buttons). */\n  ariaLabel?: string\n}\n\nexport interface ToggleButtonGroupProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'color' | 'onChange' | 'defaultValue'\n> {\n  /**\n   * Single-selection (`value` is a `string | null`, like a segmented control) vs multiple (`value` is\n   * a `string[]`). Defaults to `false` (multiple), matching MUI.\n   */\n  exclusive?: boolean\n  /** Controlled value — a `string | null` when `exclusive`, else a `string[]`. */\n  value?: string | string[] | null\n  /** Initial value for uncontrolled use (same shape as `value`). */\n  defaultValue?: string | string[] | null\n  /** Fires with the next value (matches the `exclusive` shape). */\n  onChange?: (value: string | string[] | null) => void\n  /** Data-driven buttons — an alternative to passing `<ToggleButton>` children. */\n  options?: ToggleButtonOption[]\n  /** Lay the buttons in a row or a column. Defaults to `horizontal`. */\n  orientation?: ToggleButtonGroupOrientation\n  /** Preset size for every button. Defaults to `md`. */\n  size?: ToggleButtonSize\n  /** Theme palette token tinting selected buttons. Defaults to `primary`. */\n  color?: ThemeColor\n  /** Disables every button in the group. */\n  disabled?: boolean\n  /** Stretch the group to fill the width (buttons share it equally). */\n  fullWidth?: boolean\n  /** `<ToggleButton>` children (used when `options` is not given). */\n  children?: ReactNode\n}\n\n/**\n * Groups `<ToggleButton>`s into a joined, segmented control. **`exclusive`** picks single-selection\n * (`value` is a `string | null` — clicking the active button deselects it) vs multiple (`value` is a\n * `string[]`); both are controlled (`value` + `onChange`) or uncontrolled (`defaultValue`). Supply the\n * buttons via the data-driven `options` prop or as `<ToggleButton>` children — the group shares\n * `size`/`color`/`disabled`/`fullWidth` and the selection via context. `orientation` lays them in a\n * row or column; adjacent borders collapse so the strip reads as one control. `role=\"group\"`; styling\n * uses `--tz-*` tokens.\n */\nexport const ToggleButtonGroup = forwardRef<HTMLDivElement, ToggleButtonGroupProps>(\n  function ToggleButtonGroup(\n    {\n      exclusive = false,\n      value,\n      defaultValue,\n      onChange,\n      options,\n      orientation = 'horizontal',\n      size = 'md',\n      color = 'primary',\n      disabled = false,\n      fullWidth = false,\n      children,\n      className,\n      style,\n      ...props\n    },\n    ref,\n  ) {\n    const isControlled = value !== undefined\n    const [internal, setInternal] = useState<string | string[] | null | undefined>(defaultValue)\n    const current = isControlled ? value : internal\n\n    const isSelected = (v: string) =>\n      exclusive ? current === v : Array.isArray(current) && current.includes(v)\n\n    const toggle = (v: string) => {\n      let next: string | string[] | null\n      if (exclusive) {\n        next = current === v ? null : v // click the active button to deselect (MUI behavior)\n      } else {\n        const arr = Array.isArray(current) ? current : []\n        next = arr.includes(v) ? arr.filter((x) => x !== v) : [...arr, v]\n      }\n      if (!isControlled) setInternal(next)\n      onChange?.(next)\n    }\n\n    const ctx: ToggleButtonGroupContextValue = {\n      isSelected,\n      toggle,\n      size,\n      color,\n      disabled,\n    }\n\n    return (\n      <div\n        ref={ref}\n        role=\"group\"\n        className={clsx(\n          styles.group,\n          orientation === 'vertical' && styles.vertical,\n          fullWidth && styles.fullWidth,\n          className,\n        )}\n        style={style as CSSProperties}\n        {...props}\n      >\n        <ToggleButtonGroupContext.Provider value={ctx}>\n          {options\n            ? options.map((option) => (\n                <ToggleButton\n                  key={option.value}\n                  value={option.value}\n                  disabled={option.disabled}\n                  aria-label={option.ariaLabel}\n                >\n                  {option.icon != null &&\n                    (typeof option.icon === 'string' && ICON_NAME_SET.has(option.icon) ? (\n                      <Icon name={option.icon as IconName} />\n                    ) : (\n                      option.icon\n                    ))}\n                  {option.label}\n                </ToggleButton>\n              ))\n            : children}\n        </ToggleButtonGroupContext.Provider>\n      </div>\n    )\n  },\n)\n"],"names":["ToggleButtonGroupContext","createContext","useToggleButtonGroup","useContext","ToggleButton","forwardRef","value","selected","onChange","color","size","fullWidth","disabled","className","style","children","onClick","props","ref","group","isSelected","resolvedColor","resolvedSize","resolvedDisabled","resolvedFullWidth","jsx","clsx","styles","event","ICON_NAME_SET","ICON_NAMES","ToggleButtonGroup","exclusive","defaultValue","options","orientation","isControlled","internal","setInternal","useState","current","ctx","v","next","arr","x","option","jsxs","Icon"],"mappings":"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"}

package/dist/{ToggleButtonGroup-Mdskkjdh.js → ToggleButtonGroup-K6ZcrTZT.js}

@@ -1,12 +1,12 @@
-import { jsx as _, jsxs as h } from "react/jsx-runtime";
-import { useContext as E, createContext as w, forwardRef as N, useState as M } from "react";
+import { jsx as f, jsxs as E } from "react/jsx-runtime";
+import { useContext as j, createContext as w, forwardRef as N, useState as M } from "react";
 import { clsx as W } from "clsx";
-import { b as O, a as D } from "./Icon-D5TxgfCc.js";
+import { b as O, a as D } from "./Icon-B7DJn8Tw.js";
 const p = w(null);
 function F() {
-  return E(p);
+  return j(p);
 }
-const L = "_toggleButton_gj6n3_4", P = "_selected_gj6n3_29", R = "_fullWidth_gj6n3_45", $ = "_sm_gj6n3_50", q = "_md_gj6n3_56", H = "_lg_gj6n3_62", J = "_group_gj6n3_70", K = "_vertical_gj6n3_73", s = {
+const L = "_toggleButton_1d0ht_4", P = "_selected_1d0ht_31", R = "_fullWidth_1d0ht_49", $ = "_sm_1d0ht_54", q = "_md_1d0ht_60", H = "_lg_1d0ht_66", J = "_group_1d0ht_74", K = "_vertical_1d0ht_77", s = {
   toggleButton: L,
   selected: P,
   fullWidth: R,
@@ -17,20 +17,20 @@ const L = "_toggleButton_gj6n3_4", P = "_selected_gj6n3_29", R = "_fullWidth_gj6
   vertical: K
 }, Q = N(function({
   value: r,
-  selected: d,
+  selected: a,
   onChange: o,
   color: c,
   size: i,
-  fullWidth: f,
+  fullWidth: g,
   disabled: m,
   className: b,
-  style: B,
-  children: j,
-  onClick: n,
+  style: h,
+  children: B,
+  onClick: d,
   ...y
 }, S) {
-  const e = F(), a = e ? e.isSelected(r) : d ?? !1, u = c ?? (e == null ? void 0 : e.color) ?? "primary", v = i ?? (e == null ? void 0 : e.size) ?? "md", x = !!(m || e != null && e.disabled), l = !e && (f ?? !1);
-  return /* @__PURE__ */ _(
+  const e = F(), n = e ? e.isSelected(r) : a ?? !1, u = c ?? (e == null ? void 0 : e.color) ?? "primary", v = i ?? (e == null ? void 0 : e.size) ?? "md", x = !!(m || e != null && e.disabled), l = !e && (g ?? !1);
+  return /* @__PURE__ */ f(
     "button",
     {
       ref: S,
@@ -38,79 +38,79 @@ const L = "_toggleButton_gj6n3_4", P = "_selected_gj6n3_29", R = "_fullWidth_gj6
       className: W(
         s.toggleButton,
         s[v],
-        a && s.selected,
+        n && s.selected,
         l && s.fullWidth,
         b
       ),
-      style: { "--tz-btn-rgb": `var(--tz-color-${u}-rgb)`, ...B },
-      "aria-pressed": a,
+      style: { "--tz-btn-rgb": `var(--tz-color-${u}-rgb)`, ...h },
+      "aria-pressed": n,
       disabled: x,
       onClick: (A) => {
-        n == null || n(A), e ? e.toggle(r) : o == null || o(!a, r);
+        d == null || d(A), e ? e.toggle(r) : o == null || o(!n, r);
       },
       ...y,
-      children: j
+      children: B
     }
   );
 }), U = new Set(D), C = N(
   function({
     exclusive: r = !1,
-    value: d,
+    value: a,
     defaultValue: o,
     onChange: c,
     options: i,
-    orientation: f = "horizontal",
+    orientation: g = "horizontal",
     size: m = "md",
     color: b = "primary",
-    disabled: B = !1,
-    fullWidth: j = !1,
-    children: n,
+    disabled: h = !1,
+    fullWidth: B = !1,
+    children: d,
     className: y,
     style: S,
     ...e
-  }, a) {
-    const u = d !== void 0, [v, x] = M(o), l = u ? d : v, G = {
+  }, n) {
+    const u = a !== void 0, [v, x] = M(o), l = u ? a : v, G = {
       isSelected: (t) => r ? l === t : Array.isArray(l) && l.includes(t),
       toggle: (t) => {
-        let g;
+        let _;
         if (r)
-          g = l === t ? null : t;
+          _ = l === t ? null : t;
         else {
           const T = Array.isArray(l) ? l : [];
-          g = T.includes(t) ? T.filter((I) => I !== t) : [...T, t];
+          _ = T.includes(t) ? T.filter((I) => I !== t) : [...T, t];
         }
-        u || x(g), c == null || c(g);
+        u || x(_), c == null || c(_);
       },
       size: m,
       color: b,
-      disabled: B
+      disabled: h
     };
-    return /* @__PURE__ */ _(
+    return /* @__PURE__ */ f(
       "div",
       {
-        ref: a,
+        ref: n,
         role: "group",
         className: W(
           s.group,
-          f === "vertical" && s.vertical,
-          j && s.fullWidth,
+          g === "vertical" && s.vertical,
+          B && s.fullWidth,
           y
         ),
         style: S,
         ...e,
-        children: /* @__PURE__ */ _(p.Provider, { value: G, children: i ? i.map((t) => /* @__PURE__ */ h(
+        children: /* @__PURE__ */ f(p.Provider, { value: G, children: i ? i.map((t) => /* @__PURE__ */ E(
           Q,
           {
             value: t.value,
             disabled: t.disabled,
             "aria-label": t.ariaLabel,
             children: [
-              t.icon != null && (typeof t.icon == "string" && U.has(t.icon) ? /* @__PURE__ */ _(O, { name: t.icon }) : t.icon),
+              t.icon != null && (typeof t.icon == "string" && U.has(t.icon) ? /* @__PURE__ */ f(O, { name: t.icon }) : t.icon),
               t.label
             ]
           },
           t.value
-        )) : n })
+        )) : d })
       }
     );
   }
@@ -119,4 +119,4 @@ export {
   Q as T,
   C as a
 };
-//# sourceMappingURL=ToggleButtonGroup-Mdskkjdh.js.map
+//# sourceMappingURL=ToggleButtonGroup-K6ZcrTZT.js.map

package/dist/{ToggleButtonGroup-Mdskkjdh.js.map → ToggleButtonGroup-K6ZcrTZT.js.map}

@@ -1 +1 @@
-{"version":3,"file":"ToggleButtonGroup-Mdskkjdh.js","sources":["../src/components/ToggleButton/toggleButtonGroupContext.ts","../src/components/ToggleButton/ToggleButton.tsx","../src/components/ToggleButton/ToggleButtonGroup.tsx"],"sourcesContent":["import { createContext, useContext } from 'react'\nimport type { ThemeColor } from '../../theme'\nimport type { ToggleButtonSize } from './ToggleButton'\n\n/** Shared state a `<ToggleButtonGroup>` hands down to its `<ToggleButton>` children via context. */\nexport interface ToggleButtonGroupContextValue {\n  /** Whether a given button value is currently selected. */\n  isSelected: (value: string) => boolean\n  /** Toggle a button value — called by a child on click. */\n  toggle: (value: string) => void\n  size?: ToggleButtonSize\n  color?: ThemeColor\n  disabled?: boolean\n  // (no `fullWidth` — the group applies its own `.fullWidth` class on the container; a child only honors\n  // its own `fullWidth` prop when standalone, so passing it through context would be dead state)\n}\n\nexport const ToggleButtonGroupContext = createContext<ToggleButtonGroupContextValue | null>(null)\n\n/** Read the surrounding `<ToggleButtonGroup>` (or `null` when a `<ToggleButton>` is standalone). */\nexport function useToggleButtonGroup(): ToggleButtonGroupContextValue | null {\n  return useContext(ToggleButtonGroupContext)\n}\n","import { forwardRef, type ButtonHTMLAttributes, type CSSProperties, type ReactNode } from 'react'\nimport { clsx } from 'clsx'\nimport type { ThemeColor } from '../../theme'\nimport { useToggleButtonGroup } from './toggleButtonGroupContext'\nimport styles from './ToggleButton.module.css'\n\nexport type ToggleButtonSize = 'sm' | 'md' | 'lg'\n\nexport interface ToggleButtonProps extends Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  'color' | 'value' | 'onChange'\n> {\n  /** The value this button represents — its identity within a `ToggleButtonGroup`. */\n  value: string\n  /** Selected state for standalone use (inside a group, the group owns selection). */\n  selected?: boolean\n  /** Fires with the next selected state — standalone use only. */\n  onChange?: (selected: boolean, value: string) => void\n  /** Theme palette token tinting the selected state. Defaults to `primary`. */\n  color?: ThemeColor\n  /** Preset size. Defaults to `md`. */\n  size?: ToggleButtonSize\n  /** Stretch to fill the container width. */\n  fullWidth?: boolean\n  /** Button content — typically an `Icon`, text, or both. */\n  children?: ReactNode\n}\n\n/**\n * A two-state button that toggles between selected and unselected — the building block of\n * `ToggleButtonGroup` (which owns selection, size, color and disabled via context), but also usable\n * standalone with `selected` + `onChange`. Selected uses the soft `filled` tint of `color` (the shared\n * `--tz-btn-rgb` pattern); `aria-pressed` reflects the state. The ref points at the `<button>`.\n */\nexport const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(function ToggleButton(\n  {\n    value,\n    selected,\n    onChange,\n    color,\n    size,\n    fullWidth,\n    disabled,\n    className,\n    style,\n    children,\n    onClick,\n    ...props\n  },\n  ref,\n) {\n  const group = useToggleButtonGroup()\n  const isSelected = group ? group.isSelected(value) : (selected ?? false)\n  const resolvedColor = color ?? group?.color ?? 'primary'\n  const resolvedSize = size ?? group?.size ?? 'md'\n  const resolvedDisabled = Boolean(disabled || group?.disabled)\n  // standalone full-width uses a width:100% class; inside a group the group stretches the buttons\n  const resolvedFullWidth = !group && (fullWidth ?? false)\n\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      className={clsx(\n        styles.toggleButton,\n        styles[resolvedSize],\n        isSelected && styles.selected,\n        resolvedFullWidth && styles.fullWidth,\n        className,\n      )}\n      style={{ '--tz-btn-rgb': `var(--tz-color-${resolvedColor}-rgb)`, ...style } as CSSProperties}\n      aria-pressed={isSelected}\n      disabled={resolvedDisabled}\n      onClick={(event) => {\n        onClick?.(event)\n        if (group) group.toggle(value)\n        else onChange?.(!isSelected, value)\n      }}\n      {...props}\n    >\n      {children}\n    </button>\n  )\n})\n","import {\n  forwardRef,\n  useState,\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactNode,\n} from 'react'\nimport { clsx } from 'clsx'\nimport type { ThemeColor } from '../../theme'\nimport { ICON_NAMES, type IconName } from '../../icons/names'\nimport { Icon } from '../Icon'\nimport { ToggleButton, type ToggleButtonSize } from './ToggleButton'\nimport {\n  ToggleButtonGroupContext,\n  type ToggleButtonGroupContextValue,\n} from './toggleButtonGroupContext'\nimport styles from './ToggleButton.module.css'\n\nconst ICON_NAME_SET = new Set<string>(ICON_NAMES)\n\nexport type ToggleButtonGroupOrientation = 'horizontal' | 'vertical'\n\n/** A data-driven button for the `options` prop. */\nexport interface ToggleButtonOption {\n  value: string\n  label?: ReactNode\n  /** Leading icon — a known `IconName` or any node. */\n  icon?: IconName | ReactNode\n  disabled?: boolean\n  /** Accessible label (use for icon-only buttons). */\n  ariaLabel?: string\n}\n\nexport interface ToggleButtonGroupProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'color' | 'onChange' | 'defaultValue'\n> {\n  /**\n   * Single-selection (`value` is a `string | null`, like a segmented control) vs multiple (`value` is\n   * a `string[]`). Defaults to `false` (multiple), matching MUI.\n   */\n  exclusive?: boolean\n  /** Controlled value — a `string | null` when `exclusive`, else a `string[]`. */\n  value?: string | string[] | null\n  /** Initial value for uncontrolled use (same shape as `value`). */\n  defaultValue?: string | string[] | null\n  /** Fires with the next value (matches the `exclusive` shape). */\n  onChange?: (value: string | string[] | null) => void\n  /** Data-driven buttons — an alternative to passing `<ToggleButton>` children. */\n  options?: ToggleButtonOption[]\n  /** Lay the buttons in a row or a column. Defaults to `horizontal`. */\n  orientation?: ToggleButtonGroupOrientation\n  /** Preset size for every button. Defaults to `md`. */\n  size?: ToggleButtonSize\n  /** Theme palette token tinting selected buttons. Defaults to `primary`. */\n  color?: ThemeColor\n  /** Disables every button in the group. */\n  disabled?: boolean\n  /** Stretch the group to fill the width (buttons share it equally). */\n  fullWidth?: boolean\n  /** `<ToggleButton>` children (used when `options` is not given). */\n  children?: ReactNode\n}\n\n/**\n * Groups `<ToggleButton>`s into a joined, segmented control. **`exclusive`** picks single-selection\n * (`value` is a `string | null` — clicking the active button deselects it) vs multiple (`value` is a\n * `string[]`); both are controlled (`value` + `onChange`) or uncontrolled (`defaultValue`). Supply the\n * buttons via the data-driven `options` prop or as `<ToggleButton>` children — the group shares\n * `size`/`color`/`disabled`/`fullWidth` and the selection via context. `orientation` lays them in a\n * row or column; adjacent borders collapse so the strip reads as one control. `role=\"group\"`; styling\n * uses `--tz-*` tokens.\n */\nexport const ToggleButtonGroup = forwardRef<HTMLDivElement, ToggleButtonGroupProps>(\n  function ToggleButtonGroup(\n    {\n      exclusive = false,\n      value,\n      defaultValue,\n      onChange,\n      options,\n      orientation = 'horizontal',\n      size = 'md',\n      color = 'primary',\n      disabled = false,\n      fullWidth = false,\n      children,\n      className,\n      style,\n      ...props\n    },\n    ref,\n  ) {\n    const isControlled = value !== undefined\n    const [internal, setInternal] = useState<string | string[] | null | undefined>(defaultValue)\n    const current = isControlled ? value : internal\n\n    const isSelected = (v: string) =>\n      exclusive ? current === v : Array.isArray(current) && current.includes(v)\n\n    const toggle = (v: string) => {\n      let next: string | string[] | null\n      if (exclusive) {\n        next = current === v ? null : v // click the active button to deselect (MUI behavior)\n      } else {\n        const arr = Array.isArray(current) ? current : []\n        next = arr.includes(v) ? arr.filter((x) => x !== v) : [...arr, v]\n      }\n      if (!isControlled) setInternal(next)\n      onChange?.(next)\n    }\n\n    const ctx: ToggleButtonGroupContextValue = {\n      isSelected,\n      toggle,\n      size,\n      color,\n      disabled,\n    }\n\n    return (\n      <div\n        ref={ref}\n        role=\"group\"\n        className={clsx(\n          styles.group,\n          orientation === 'vertical' && styles.vertical,\n          fullWidth && styles.fullWidth,\n          className,\n        )}\n        style={style as CSSProperties}\n        {...props}\n      >\n        <ToggleButtonGroupContext.Provider value={ctx}>\n          {options\n            ? options.map((option) => (\n                <ToggleButton\n                  key={option.value}\n                  value={option.value}\n                  disabled={option.disabled}\n                  aria-label={option.ariaLabel}\n                >\n                  {option.icon != null &&\n                    (typeof option.icon === 'string' && ICON_NAME_SET.has(option.icon) ? (\n                      <Icon name={option.icon as IconName} />\n                    ) : (\n                      option.icon\n                    ))}\n                  {option.label}\n                </ToggleButton>\n              ))\n            : children}\n        </ToggleButtonGroupContext.Provider>\n      </div>\n    )\n  },\n)\n"],"names":["ToggleButtonGroupContext","createContext","useToggleButtonGroup","useContext","ToggleButton","forwardRef","value","selected","onChange","color","size","fullWidth","disabled","className","style","children","onClick","props","ref","group","isSelected","resolvedColor","resolvedSize","resolvedDisabled","resolvedFullWidth","jsx","clsx","styles","event","ICON_NAME_SET","ICON_NAMES","ToggleButtonGroup","exclusive","defaultValue","options","orientation","isControlled","internal","setInternal","useState","current","ctx","v","next","arr","x","option","jsxs","Icon"],"mappings":"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"}
+{"version":3,"file":"ToggleButtonGroup-K6ZcrTZT.js","sources":["../src/components/ToggleButton/toggleButtonGroupContext.ts","../src/components/ToggleButton/ToggleButton.tsx","../src/components/ToggleButton/ToggleButtonGroup.tsx"],"sourcesContent":["import { createContext, useContext } from 'react'\nimport type { ThemeColor } from '../../theme'\nimport type { ToggleButtonSize } from './ToggleButton'\n\n/** Shared state a `<ToggleButtonGroup>` hands down to its `<ToggleButton>` children via context. */\nexport interface ToggleButtonGroupContextValue {\n  /** Whether a given button value is currently selected. */\n  isSelected: (value: string) => boolean\n  /** Toggle a button value — called by a child on click. */\n  toggle: (value: string) => void\n  size?: ToggleButtonSize\n  color?: ThemeColor\n  disabled?: boolean\n  // (no `fullWidth` — the group applies its own `.fullWidth` class on the container; a child only honors\n  // its own `fullWidth` prop when standalone, so passing it through context would be dead state)\n}\n\nexport const ToggleButtonGroupContext = createContext<ToggleButtonGroupContextValue | null>(null)\n\n/** Read the surrounding `<ToggleButtonGroup>` (or `null` when a `<ToggleButton>` is standalone). */\nexport function useToggleButtonGroup(): ToggleButtonGroupContextValue | null {\n  return useContext(ToggleButtonGroupContext)\n}\n","import { forwardRef, type ButtonHTMLAttributes, type CSSProperties, type ReactNode } from 'react'\nimport { clsx } from 'clsx'\nimport type { ThemeColor } from '../../theme'\nimport { useToggleButtonGroup } from './toggleButtonGroupContext'\nimport styles from './ToggleButton.module.css'\n\nexport type ToggleButtonSize = 'sm' | 'md' | 'lg'\n\nexport interface ToggleButtonProps extends Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  'color' | 'value' | 'onChange'\n> {\n  /** The value this button represents — its identity within a `ToggleButtonGroup`. */\n  value: string\n  /** Selected state for standalone use (inside a group, the group owns selection). */\n  selected?: boolean\n  /** Fires with the next selected state — standalone use only. */\n  onChange?: (selected: boolean, value: string) => void\n  /** Theme palette token tinting the selected state. Defaults to `primary`. */\n  color?: ThemeColor\n  /** Preset size. Defaults to `md`. */\n  size?: ToggleButtonSize\n  /** Stretch to fill the container width. */\n  fullWidth?: boolean\n  /** Button content — typically an `Icon`, text, or both. */\n  children?: ReactNode\n}\n\n/**\n * A two-state button that toggles between selected and unselected — the building block of\n * `ToggleButtonGroup` (which owns selection, size, color and disabled via context), but also usable\n * standalone with `selected` + `onChange`. Selected uses the soft `filled` tint of `color` (the shared\n * `--tz-btn-rgb` pattern); `aria-pressed` reflects the state. The ref points at the `<button>`.\n */\nexport const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(function ToggleButton(\n  {\n    value,\n    selected,\n    onChange,\n    color,\n    size,\n    fullWidth,\n    disabled,\n    className,\n    style,\n    children,\n    onClick,\n    ...props\n  },\n  ref,\n) {\n  const group = useToggleButtonGroup()\n  const isSelected = group ? group.isSelected(value) : (selected ?? false)\n  const resolvedColor = color ?? group?.color ?? 'primary'\n  const resolvedSize = size ?? group?.size ?? 'md'\n  const resolvedDisabled = Boolean(disabled || group?.disabled)\n  // standalone full-width uses a width:100% class; inside a group the group stretches the buttons\n  const resolvedFullWidth = !group && (fullWidth ?? false)\n\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      className={clsx(\n        styles.toggleButton,\n        styles[resolvedSize],\n        isSelected && styles.selected,\n        resolvedFullWidth && styles.fullWidth,\n        className,\n      )}\n      style={{ '--tz-btn-rgb': `var(--tz-color-${resolvedColor}-rgb)`, ...style } as CSSProperties}\n      aria-pressed={isSelected}\n      disabled={resolvedDisabled}\n      onClick={(event) => {\n        onClick?.(event)\n        if (group) group.toggle(value)\n        else onChange?.(!isSelected, value)\n      }}\n      {...props}\n    >\n      {children}\n    </button>\n  )\n})\n","import {\n  forwardRef,\n  useState,\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactNode,\n} from 'react'\nimport { clsx } from 'clsx'\nimport type { ThemeColor } from '../../theme'\nimport { ICON_NAMES, type IconName } from '../../icons/names'\nimport { Icon } from '../Icon'\nimport { ToggleButton, type ToggleButtonSize } from './ToggleButton'\nimport {\n  ToggleButtonGroupContext,\n  type ToggleButtonGroupContextValue,\n} from './toggleButtonGroupContext'\nimport styles from './ToggleButton.module.css'\n\nconst ICON_NAME_SET = new Set<string>(ICON_NAMES)\n\nexport type ToggleButtonGroupOrientation = 'horizontal' | 'vertical'\n\n/** A data-driven button for the `options` prop. */\nexport interface ToggleButtonOption {\n  value: string\n  label?: ReactNode\n  /** Leading icon — a known `IconName` or any node. */\n  icon?: IconName | ReactNode\n  disabled?: boolean\n  /** Accessible label (use for icon-only buttons). */\n  ariaLabel?: string\n}\n\nexport interface ToggleButtonGroupProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'color' | 'onChange' | 'defaultValue'\n> {\n  /**\n   * Single-selection (`value` is a `string | null`, like a segmented control) vs multiple (`value` is\n   * a `string[]`). Defaults to `false` (multiple), matching MUI.\n   */\n  exclusive?: boolean\n  /** Controlled value — a `string | null` when `exclusive`, else a `string[]`. */\n  value?: string | string[] | null\n  /** Initial value for uncontrolled use (same shape as `value`). */\n  defaultValue?: string | string[] | null\n  /** Fires with the next value (matches the `exclusive` shape). */\n  onChange?: (value: string | string[] | null) => void\n  /** Data-driven buttons — an alternative to passing `<ToggleButton>` children. */\n  options?: ToggleButtonOption[]\n  /** Lay the buttons in a row or a column. Defaults to `horizontal`. */\n  orientation?: ToggleButtonGroupOrientation\n  /** Preset size for every button. Defaults to `md`. */\n  size?: ToggleButtonSize\n  /** Theme palette token tinting selected buttons. Defaults to `primary`. */\n  color?: ThemeColor\n  /** Disables every button in the group. */\n  disabled?: boolean\n  /** Stretch the group to fill the width (buttons share it equally). */\n  fullWidth?: boolean\n  /** `<ToggleButton>` children (used when `options` is not given). */\n  children?: ReactNode\n}\n\n/**\n * Groups `<ToggleButton>`s into a joined, segmented control. **`exclusive`** picks single-selection\n * (`value` is a `string | null` — clicking the active button deselects it) vs multiple (`value` is a\n * `string[]`); both are controlled (`value` + `onChange`) or uncontrolled (`defaultValue`). Supply the\n * buttons via the data-driven `options` prop or as `<ToggleButton>` children — the group shares\n * `size`/`color`/`disabled`/`fullWidth` and the selection via context. `orientation` lays them in a\n * row or column; adjacent borders collapse so the strip reads as one control. `role=\"group\"`; styling\n * uses `--tz-*` tokens.\n */\nexport const ToggleButtonGroup = forwardRef<HTMLDivElement, ToggleButtonGroupProps>(\n  function ToggleButtonGroup(\n    {\n      exclusive = false,\n      value,\n      defaultValue,\n      onChange,\n      options,\n      orientation = 'horizontal',\n      size = 'md',\n      color = 'primary',\n      disabled = false,\n      fullWidth = false,\n      children,\n      className,\n      style,\n      ...props\n    },\n    ref,\n  ) {\n    const isControlled = value !== undefined\n    const [internal, setInternal] = useState<string | string[] | null | undefined>(defaultValue)\n    const current = isControlled ? value : internal\n\n    const isSelected = (v: string) =>\n      exclusive ? current === v : Array.isArray(current) && current.includes(v)\n\n    const toggle = (v: string) => {\n      let next: string | string[] | null\n      if (exclusive) {\n        next = current === v ? null : v // click the active button to deselect (MUI behavior)\n      } else {\n        const arr = Array.isArray(current) ? current : []\n        next = arr.includes(v) ? arr.filter((x) => x !== v) : [...arr, v]\n      }\n      if (!isControlled) setInternal(next)\n      onChange?.(next)\n    }\n\n    const ctx: ToggleButtonGroupContextValue = {\n      isSelected,\n      toggle,\n      size,\n      color,\n      disabled,\n    }\n\n    return (\n      <div\n        ref={ref}\n        role=\"group\"\n        className={clsx(\n          styles.group,\n          orientation === 'vertical' && styles.vertical,\n          fullWidth && styles.fullWidth,\n          className,\n        )}\n        style={style as CSSProperties}\n        {...props}\n      >\n        <ToggleButtonGroupContext.Provider value={ctx}>\n          {options\n            ? options.map((option) => (\n                <ToggleButton\n                  key={option.value}\n                  value={option.value}\n                  disabled={option.disabled}\n                  aria-label={option.ariaLabel}\n                >\n                  {option.icon != null &&\n                    (typeof option.icon === 'string' && ICON_NAME_SET.has(option.icon) ? (\n                      <Icon name={option.icon as IconName} />\n                    ) : (\n                      option.icon\n                    ))}\n                  {option.label}\n                </ToggleButton>\n              ))\n            : children}\n        </ToggleButtonGroupContext.Provider>\n      </div>\n    )\n  },\n)\n"],"names":["ToggleButtonGroupContext","createContext","useToggleButtonGroup","useContext","ToggleButton","forwardRef","value","selected","onChange","color","size","fullWidth","disabled","className","style","children","onClick","props","ref","group","isSelected","resolvedColor","resolvedSize","resolvedDisabled","resolvedFullWidth","jsx","clsx","styles","event","ICON_NAME_SET","ICON_NAMES","ToggleButtonGroup","exclusive","defaultValue","options","orientation","isControlled","internal","setInternal","useState","current","ctx","v","next","arr","x","option","jsxs","Icon"],"mappings":"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"}

package/dist/{TranslatedFields-BpWU5ZcG.js → TranslatedFields-Clsr84XC.js}

@@ -2,10 +2,10 @@ import { jsx as m } from "react/jsx-runtime";
 import { forwardRef as D, useState as J, useRef as b, useEffect as R } from "react";
 import { u as M } from "./formContext-B7ln1Miy.js";
 import { b as j } from "./translations-D15tFHM1.js";
-import { f as P } from "./messages-BiRLMy1E.js";
-import { F as Q } from "./Flag-BEIqYQZg.js";
-import { T as U } from "./Tabs-BxZrgozI.js";
-import { a as X, i as Y, r as Z } from "./ConfigProvider-Dqfu7UBU.js";
+import { f as P } from "./messages-BZYBZ3GR.js";
+import { F as Q } from "./Flag-C1HwnZXJ.js";
+import { T as U } from "./Tabs-BXAHddi7.js";
+import { a as X, i as Y, r as Z } from "./ConfigProvider-CYgmMH4j.js";
 const $ = "_fields_aawaf_4", ee = {
   fields: $
 }, ue = D(
@@ -83,4 +83,4 @@ const $ = "_fields_aawaf_4", ee = {
 export {
   ue as T
 };
-//# sourceMappingURL=TranslatedFields-BpWU5ZcG.js.map
+//# sourceMappingURL=TranslatedFields-Clsr84XC.js.map

package/dist/{TranslatedFields-BpWU5ZcG.js.map → TranslatedFields-Clsr84XC.js.map}

@@ -1 +1 @@
-{"version":3,"file":"TranslatedFields-BpWU5ZcG.js","sources":["../src/components/TranslatedFields/TranslatedFields.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef, useState, type CSSProperties, type ReactNode } from 'react'\nimport { useFormContext } from '../../form/formContext'\nimport { useLocales, useT, useTranslationsNamespace, type LocaleConfig } from '../../theme'\nimport { buildTranslationName } from '../../helpers/translations'\nimport { flagFor } from '../../i18n/messages'\nimport type { IconName } from '../../icons/names'\nimport { Flag } from '../Flag'\nimport { Tabs, type TabsSize, type TabsVariant } from '../Tabs'\nimport styles from './TranslatedFields.module.css'\n\n/** Builds a field's namespaced form name for the active locale (`(field) => name`). */\nexport type TranslatedFieldName = (field: string) => string\n\nexport interface TranslatedFieldsProps {\n  /**\n   * Render the fields for one locale. `name(field)` returns the namespaced form name to put on each\n   * control (e.g. `translations[en-US].title`); `locale` is the active code. The same render runs per\n   * locale, so the fields are identical bar their names.\n   */\n  children: (name: TranslatedFieldName, locale: string) => ReactNode\n  /**\n   * Locales (one tab each). Defaults to the app's configured locales\n   * (`<ConfigProvider config={{ locales }}>`).\n   */\n  locales?: LocaleConfig[]\n  /**\n   * Top-level namespace for the field names (`<namespace>[<locale>].<field>`) and the nested object.\n   * Falls back to `<ConfigProvider config={{ keys: { translationsNamespace } }}>`, then `'translations'`.\n   * Pass to override per-instance (e.g. `'languages'`).\n   */\n  namespace?: string\n  /** Controlled active locale code. */\n  value?: string\n  /** Initial active locale code (uncontrolled). Defaults to the first locale. */\n  defaultValue?: string\n  /** Fires with the next active locale code. */\n  onChange?: (locale: string) => void\n  /**\n   * Show each locale's **flag** on its tab (matched by the language via `flagFor`). A language with no\n   * built-in flag falls back to the `icon`. Defaults to `true`; pass `false` to always use `icon`.\n   */\n  showFlags?: boolean\n  /** Fallback icon shown on a locale tab when its language has no flag (or `showFlags={false}`). Defaults to `'Global'`. */\n  icon?: IconName\n  /** Tab strip variant. Defaults to `Tabs`' default (`underline`). */\n  variant?: TabsVariant\n  /** Tab + field density. Defaults to `Tabs`' default (`md`). */\n  size?: TabsSize\n  /** Accessible label for the tablist. Defaults to the localized `translatedFields.label` (\"Translations\"). */\n  'aria-label'?: string\n  className?: string\n  style?: CSSProperties\n}\n\n/**\n * A tabbed group of **per-locale** form fields — one tab per content locale, each rendering the same\n * fields with locale-namespaced `name`s (`translations[<locale>].<field>` by default), so a `<Form>`\n * submits e.g. `translations[en-US].title` / `translations[ka-GE].title`. You supply the fields once\n * via a render function that receives a `name(field)` builder for the active locale; bring any field\n * component (`TextField`, `MultilineTextField`, a rich-text editor, …). Locales come from\n * `<ConfigProvider config={{ locales }}>` (override with the `locales` prop). The top-level word is the\n * `namespace` (default `'translations'`, e.g. `'languages'`). Each tab shows its language's **flag**\n * (matched via `flagFor`); a language with no built-in flag falls back to the `icon` (a `Global` icon by\n * default), and `showFlags={false}` uses the `icon` for every tab. While inside a `<Form>`, an incomplete\n * locale's tab shows a **dot**, and on submit the strip auto-advances to the first locale with errors\n * and focuses its field. Build the schema / defaults with `buildTranslations`; the form values stay\n * **flat** (`translations[en-US].title` — the `FormData` shape) — convert to/from the **nested** JSON\n * shape (`{ translations: { 'en-US': { title } } }`) with `nestTranslations` / `flattenTranslations`.\n * Requires the `Tabs` component.\n */\nexport const TranslatedFields = forwardRef<HTMLDivElement, TranslatedFieldsProps>(\n  function TranslatedFields(\n    {\n      children,\n      locales: localesProp,\n      namespace: namespaceProp,\n      value,\n      defaultValue,\n      onChange,\n      showFlags = true,\n      icon = 'Global',\n      variant,\n      size,\n      'aria-label': ariaLabelProp,\n      className,\n      style,\n    },\n    ref,\n  ) {\n    const t = useT()\n    const ariaLabel = ariaLabelProp ?? t('translatedFields.label')\n    const configLocales = useLocales()\n    const locales = localesProp ?? configLocales\n    // namespace: the `namespace` prop wins, else the ConfigProvider's (which falls back to the default)\n    const configNamespace = useTranslationsNamespace()\n    const namespace = namespaceProp ?? configNamespace\n    const form = useFormContext()\n\n    // active locale — controlled (`value`) or internal; falls back to the first locale\n    const isControlled = value !== undefined\n    const [internal, setInternal] = useState<string | undefined>(defaultValue)\n    const active = (isControlled ? value : internal) ?? locales[0]?.code ?? ''\n    const setActive = (next: string) => {\n      if (!isControlled) setInternal(next)\n      onChange?.(next)\n    }\n\n    // the namespaced-name prefix for a locale (e.g. `translations[en-US].`)\n    const prefixOf = (code: string) => buildTranslationName(code, '', namespace)\n    // a locale's tab is flagged when any of its fields is invalid AND the error is shown (submitted/touched)\n    const localeHasError = (code: string): boolean =>\n      !!form &&\n      Object.keys(form.errors).some(\n        (key) => key.startsWith(prefixOf(code)) && (form.isSubmitted || form.touched[key] === true),\n      )\n\n    // merge the forwarded ref with an internal one (to query the mounted fields for scroll/focus)\n    const rootRef = useRef<HTMLDivElement | null>(null)\n    const setRootRef = (node: HTMLDivElement | null) => {\n      rootRef.current = node\n      if (typeof ref === 'function') ref(node)\n      else if (ref) (ref as { current: HTMLDivElement | null }).current = node\n    }\n\n    // on each submit, if the active tab is complete but another locale has the only remaining errors,\n    // switch to it and focus its first invalid field (the form's own scroll can't reach an unmounted tab)\n    const lastSubmit = useRef(0)\n    const pendingFocus = useRef<string | null>(null)\n    useEffect(() => {\n      const count = form?.submitCount ?? 0\n      if (!form || count === lastSubmit.current) return\n      lastSubmit.current = count\n      const errorKeys = Object.keys(form.errors)\n      if (errorKeys.length === 0) return\n      const isTranslationKey = (k: string) => locales.some((l) => k.startsWith(prefixOf(l.code)))\n      // a non-translation field is still invalid → the form's scroll-to-error handles it (above the tabs)\n      if (!errorKeys.every(isTranslationKey)) return\n      // active locale already shows its (mounted) errors → nothing to switch to\n      if (errorKeys.some((k) => k.startsWith(prefixOf(active)))) return\n      const firstBad = locales.find((l) => errorKeys.some((k) => k.startsWith(prefixOf(l.code))))\n      if (firstBad && firstBad.code !== active) {\n        pendingFocus.current = firstBad.code\n        setActive(firstBad.code)\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [form?.submitCount])\n\n    // once the auto-switched tab has mounted, focus its first invalid field\n    useEffect(() => {\n      if (pendingFocus.current == null || pendingFocus.current !== active) return\n      pendingFocus.current = null\n      const root = rootRef.current\n      if (!root || !form) return\n      const errorKeys = new Set(Object.keys(form.errors))\n      const target = Array.from(root.querySelectorAll<HTMLElement>('[name]')).find((el) =>\n        errorKeys.has(el.getAttribute('name') ?? ''),\n      )\n      target?.scrollIntoView?.({ behavior: 'smooth', block: 'center' })\n      target?.focus({ preventScroll: true })\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [active])\n\n    if (locales.length === 0) return null\n\n    const items = locales.map((loc) => ({\n      value: loc.code,\n      label: loc.label ?? loc.code,\n      // the locale's flag when it has one (and flags are enabled), else the fallback `icon` (Global)\n      icon: showFlags && flagFor(loc.code) ? <Flag code={loc.code} /> : icon,\n      // an invalid locale shows the Tabs error dot (a small red dot — no full-tab tint)\n      error: localeHasError(loc.code),\n      // keyed by locale so switching tabs remounts the fields (no value/state bleed between locales)\n      content: (\n        <div key={loc.code} className={styles.fields}>\n          {children((field) => buildTranslationName(loc.code, field, namespace), loc.code)}\n        </div>\n      ),\n    }))\n\n    return (\n      <Tabs\n        ref={setRootRef}\n        className={className}\n        style={style}\n        items={items}\n        value={active}\n        onChange={setActive}\n        variant={variant}\n        size={size}\n        // locale tabs are internal UI — never sync them to the page URL\n        queryKey={null}\n        aria-label={ariaLabel}\n      />\n    )\n  },\n)\n"],"names":["TranslatedFields","forwardRef","children","localesProp","namespaceProp","value","defaultValue","onChange","showFlags","icon","variant","size","ariaLabelProp","className","style","ref","t","useT","ariaLabel","configLocales","useLocales","locales","configNamespace","useTranslationsNamespace","namespace","form","useFormContext","isControlled","internal","setInternal","useState","active","_a","setActive","next","prefixOf","code","buildTranslationName","localeHasError","key","rootRef","useRef","setRootRef","node","lastSubmit","pendingFocus","useEffect","count","errorKeys","isTranslationKey","k","l","firstBad","root","target","el","items","loc","flagFor","jsx","Flag","styles","field","Tabs"],"mappings":"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"}
+{"version":3,"file":"TranslatedFields-Clsr84XC.js","sources":["../src/components/TranslatedFields/TranslatedFields.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef, useState, type CSSProperties, type ReactNode } from 'react'\nimport { useFormContext } from '../../form/formContext'\nimport { useLocales, useT, useTranslationsNamespace, type LocaleConfig } from '../../theme'\nimport { buildTranslationName } from '../../helpers/translations'\nimport { flagFor } from '../../i18n/messages'\nimport type { IconName } from '../../icons/names'\nimport { Flag } from '../Flag'\nimport { Tabs, type TabsSize, type TabsVariant } from '../Tabs'\nimport styles from './TranslatedFields.module.css'\n\n/** Builds a field's namespaced form name for the active locale (`(field) => name`). */\nexport type TranslatedFieldName = (field: string) => string\n\nexport interface TranslatedFieldsProps {\n  /**\n   * Render the fields for one locale. `name(field)` returns the namespaced form name to put on each\n   * control (e.g. `translations[en-US].title`); `locale` is the active code. The same render runs per\n   * locale, so the fields are identical bar their names.\n   */\n  children: (name: TranslatedFieldName, locale: string) => ReactNode\n  /**\n   * Locales (one tab each). Defaults to the app's configured locales\n   * (`<ConfigProvider config={{ locales }}>`).\n   */\n  locales?: LocaleConfig[]\n  /**\n   * Top-level namespace for the field names (`<namespace>[<locale>].<field>`) and the nested object.\n   * Falls back to `<ConfigProvider config={{ keys: { translationsNamespace } }}>`, then `'translations'`.\n   * Pass to override per-instance (e.g. `'languages'`).\n   */\n  namespace?: string\n  /** Controlled active locale code. */\n  value?: string\n  /** Initial active locale code (uncontrolled). Defaults to the first locale. */\n  defaultValue?: string\n  /** Fires with the next active locale code. */\n  onChange?: (locale: string) => void\n  /**\n   * Show each locale's **flag** on its tab (matched by the language via `flagFor`). A language with no\n   * built-in flag falls back to the `icon`. Defaults to `true`; pass `false` to always use `icon`.\n   */\n  showFlags?: boolean\n  /** Fallback icon shown on a locale tab when its language has no flag (or `showFlags={false}`). Defaults to `'Global'`. */\n  icon?: IconName\n  /** Tab strip variant. Defaults to `Tabs`' default (`underline`). */\n  variant?: TabsVariant\n  /** Tab + field density. Defaults to `Tabs`' default (`md`). */\n  size?: TabsSize\n  /** Accessible label for the tablist. Defaults to the localized `translatedFields.label` (\"Translations\"). */\n  'aria-label'?: string\n  className?: string\n  style?: CSSProperties\n}\n\n/**\n * A tabbed group of **per-locale** form fields — one tab per content locale, each rendering the same\n * fields with locale-namespaced `name`s (`translations[<locale>].<field>` by default), so a `<Form>`\n * submits e.g. `translations[en-US].title` / `translations[ka-GE].title`. You supply the fields once\n * via a render function that receives a `name(field)` builder for the active locale; bring any field\n * component (`TextField`, `MultilineTextField`, a rich-text editor, …). Locales come from\n * `<ConfigProvider config={{ locales }}>` (override with the `locales` prop). The top-level word is the\n * `namespace` (default `'translations'`, e.g. `'languages'`). Each tab shows its language's **flag**\n * (matched via `flagFor`); a language with no built-in flag falls back to the `icon` (a `Global` icon by\n * default), and `showFlags={false}` uses the `icon` for every tab. While inside a `<Form>`, an incomplete\n * locale's tab shows a **dot**, and on submit the strip auto-advances to the first locale with errors\n * and focuses its field. Build the schema / defaults with `buildTranslations`; the form values stay\n * **flat** (`translations[en-US].title` — the `FormData` shape) — convert to/from the **nested** JSON\n * shape (`{ translations: { 'en-US': { title } } }`) with `nestTranslations` / `flattenTranslations`.\n * Requires the `Tabs` component.\n */\nexport const TranslatedFields = forwardRef<HTMLDivElement, TranslatedFieldsProps>(\n  function TranslatedFields(\n    {\n      children,\n      locales: localesProp,\n      namespace: namespaceProp,\n      value,\n      defaultValue,\n      onChange,\n      showFlags = true,\n      icon = 'Global',\n      variant,\n      size,\n      'aria-label': ariaLabelProp,\n      className,\n      style,\n    },\n    ref,\n  ) {\n    const t = useT()\n    const ariaLabel = ariaLabelProp ?? t('translatedFields.label')\n    const configLocales = useLocales()\n    const locales = localesProp ?? configLocales\n    // namespace: the `namespace` prop wins, else the ConfigProvider's (which falls back to the default)\n    const configNamespace = useTranslationsNamespace()\n    const namespace = namespaceProp ?? configNamespace\n    const form = useFormContext()\n\n    // active locale — controlled (`value`) or internal; falls back to the first locale\n    const isControlled = value !== undefined\n    const [internal, setInternal] = useState<string | undefined>(defaultValue)\n    const active = (isControlled ? value : internal) ?? locales[0]?.code ?? ''\n    const setActive = (next: string) => {\n      if (!isControlled) setInternal(next)\n      onChange?.(next)\n    }\n\n    // the namespaced-name prefix for a locale (e.g. `translations[en-US].`)\n    const prefixOf = (code: string) => buildTranslationName(code, '', namespace)\n    // a locale's tab is flagged when any of its fields is invalid AND the error is shown (submitted/touched)\n    const localeHasError = (code: string): boolean =>\n      !!form &&\n      Object.keys(form.errors).some(\n        (key) => key.startsWith(prefixOf(code)) && (form.isSubmitted || form.touched[key] === true),\n      )\n\n    // merge the forwarded ref with an internal one (to query the mounted fields for scroll/focus)\n    const rootRef = useRef<HTMLDivElement | null>(null)\n    const setRootRef = (node: HTMLDivElement | null) => {\n      rootRef.current = node\n      if (typeof ref === 'function') ref(node)\n      else if (ref) (ref as { current: HTMLDivElement | null }).current = node\n    }\n\n    // on each submit, if the active tab is complete but another locale has the only remaining errors,\n    // switch to it and focus its first invalid field (the form's own scroll can't reach an unmounted tab)\n    const lastSubmit = useRef(0)\n    const pendingFocus = useRef<string | null>(null)\n    useEffect(() => {\n      const count = form?.submitCount ?? 0\n      if (!form || count === lastSubmit.current) return\n      lastSubmit.current = count\n      const errorKeys = Object.keys(form.errors)\n      if (errorKeys.length === 0) return\n      const isTranslationKey = (k: string) => locales.some((l) => k.startsWith(prefixOf(l.code)))\n      // a non-translation field is still invalid → the form's scroll-to-error handles it (above the tabs)\n      if (!errorKeys.every(isTranslationKey)) return\n      // active locale already shows its (mounted) errors → nothing to switch to\n      if (errorKeys.some((k) => k.startsWith(prefixOf(active)))) return\n      const firstBad = locales.find((l) => errorKeys.some((k) => k.startsWith(prefixOf(l.code))))\n      if (firstBad && firstBad.code !== active) {\n        pendingFocus.current = firstBad.code\n        setActive(firstBad.code)\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [form?.submitCount])\n\n    // once the auto-switched tab has mounted, focus its first invalid field\n    useEffect(() => {\n      if (pendingFocus.current == null || pendingFocus.current !== active) return\n      pendingFocus.current = null\n      const root = rootRef.current\n      if (!root || !form) return\n      const errorKeys = new Set(Object.keys(form.errors))\n      const target = Array.from(root.querySelectorAll<HTMLElement>('[name]')).find((el) =>\n        errorKeys.has(el.getAttribute('name') ?? ''),\n      )\n      target?.scrollIntoView?.({ behavior: 'smooth', block: 'center' })\n      target?.focus({ preventScroll: true })\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [active])\n\n    if (locales.length === 0) return null\n\n    const items = locales.map((loc) => ({\n      value: loc.code,\n      label: loc.label ?? loc.code,\n      // the locale's flag when it has one (and flags are enabled), else the fallback `icon` (Global)\n      icon: showFlags && flagFor(loc.code) ? <Flag code={loc.code} /> : icon,\n      // an invalid locale shows the Tabs error dot (a small red dot — no full-tab tint)\n      error: localeHasError(loc.code),\n      // keyed by locale so switching tabs remounts the fields (no value/state bleed between locales)\n      content: (\n        <div key={loc.code} className={styles.fields}>\n          {children((field) => buildTranslationName(loc.code, field, namespace), loc.code)}\n        </div>\n      ),\n    }))\n\n    return (\n      <Tabs\n        ref={setRootRef}\n        className={className}\n        style={style}\n        items={items}\n        value={active}\n        onChange={setActive}\n        variant={variant}\n        size={size}\n        // locale tabs are internal UI — never sync them to the page URL\n        queryKey={null}\n        aria-label={ariaLabel}\n      />\n    )\n  },\n)\n"],"names":["TranslatedFields","forwardRef","children","localesProp","namespaceProp","value","defaultValue","onChange","showFlags","icon","variant","size","ariaLabelProp","className","style","ref","t","useT","ariaLabel","configLocales","useLocales","locales","configNamespace","useTranslationsNamespace","namespace","form","useFormContext","isControlled","internal","setInternal","useState","active","_a","setActive","next","prefixOf","code","buildTranslationName","localeHasError","key","rootRef","useRef","setRootRef","node","lastSubmit","pendingFocus","useEffect","count","errorKeys","isTranslationKey","k","l","firstBad","root","target","el","items","loc","flagFor","jsx","Flag","styles","field","Tabs"],"mappings":"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"}

package/dist/{TranslatedFields-SvS37hab.cjs → TranslatedFields-LdeJeHEp.cjs}

@@ -1,2 +1,2 @@
-"use strict";const b=require("react/jsx-runtime"),c=require("react"),z=require("./formContext-bTWrqdEV.cjs"),j=require("./translations-CXEeeUDL.cjs"),D=require("./messages-C_fRRCg6.cjs"),J=require("./Flag-B1ZvZVXi.cjs"),M=require("./Tabs-C4kB1yfG.cjs"),y=require("./ConfigProvider-Ci9Q2HLF.cjs"),Q="_fields_aawaf_4",U={fields:Q},X=c.forwardRef(function({children:x,locales:S,namespace:N,value:q,defaultValue:w,onChange:f,showFlags:A=!0,icon:K="Global",variant:O,size:W,"aria-label":g,className:k,style:C},l){var R;const E=y.useT(),L=g??E("translatedFields.label"),_=y.useLocales(),i=S??_,I=y.useTranslationsNamespace(),T=N??I,s=z.useFormContext(),p=q!==void 0,[B,G]=c.useState(w),a=(p?q:B)??((R=i[0])==null?void 0:R.code)??"",v=e=>{p||G(e),f==null||f(e)},u=e=>j.buildTranslationName(e,"",T),H=e=>!!s&&Object.keys(s.errors).some(t=>t.startsWith(u(e))&&(s.isSubmitted||s.touched[t]===!0)),F=c.useRef(null),P=e=>{F.current=e,typeof l=="function"?l(e):l&&(l.current=e)},h=c.useRef(0),d=c.useRef(null);if(c.useEffect(()=>{const e=(s==null?void 0:s.submitCount)??0;if(!s||e===h.current)return;h.current=e;const t=Object.keys(s.errors);if(t.length===0)return;const r=o=>i.some(m=>o.startsWith(u(m.code)));if(!t.every(r)||t.some(o=>o.startsWith(u(a))))return;const n=i.find(o=>t.some(m=>m.startsWith(u(o.code))));n&&n.code!==a&&(d.current=n.code,v(n.code))},[s==null?void 0:s.submitCount]),c.useEffect(()=>{var n;if(d.current==null||d.current!==a)return;d.current=null;const e=F.current;if(!e||!s)return;const t=new Set(Object.keys(s.errors)),r=Array.from(e.querySelectorAll("[name]")).find(o=>t.has(o.getAttribute("name")??""));(n=r==null?void 0:r.scrollIntoView)==null||n.call(r,{behavior:"smooth",block:"center"}),r==null||r.focus({preventScroll:!0})},[a]),i.length===0)return null;const V=i.map(e=>({value:e.code,label:e.label??e.code,icon:A&&D.flagFor(e.code)?b.jsx(J.Flag,{code:e.code}):K,error:H(e.code),content:b.jsx("div",{className:U.fields,children:x(t=>j.buildTranslationName(e.code,t,T),e.code)},e.code)}));return b.jsx(M.Tabs,{ref:P,className:k,style:C,items:V,value:a,onChange:v,variant:O,size:W,queryKey:null,"aria-label":L})});exports.TranslatedFields=X;
-//# sourceMappingURL=TranslatedFields-SvS37hab.cjs.map
+"use strict";const b=require("react/jsx-runtime"),c=require("react"),z=require("./formContext-bTWrqdEV.cjs"),j=require("./translations-CXEeeUDL.cjs"),D=require("./messages-CTHjpVJq.cjs"),J=require("./Flag-BvZB3295.cjs"),M=require("./Tabs-DiL1vNW3.cjs"),y=require("./ConfigProvider-Cf-awvZs.cjs"),Q="_fields_aawaf_4",U={fields:Q},X=c.forwardRef(function({children:x,locales:S,namespace:N,value:q,defaultValue:w,onChange:f,showFlags:A=!0,icon:K="Global",variant:O,size:W,"aria-label":g,className:k,style:C},l){var R;const E=y.useT(),L=g??E("translatedFields.label"),_=y.useLocales(),i=S??_,I=y.useTranslationsNamespace(),T=N??I,s=z.useFormContext(),p=q!==void 0,[B,G]=c.useState(w),a=(p?q:B)??((R=i[0])==null?void 0:R.code)??"",v=e=>{p||G(e),f==null||f(e)},u=e=>j.buildTranslationName(e,"",T),H=e=>!!s&&Object.keys(s.errors).some(t=>t.startsWith(u(e))&&(s.isSubmitted||s.touched[t]===!0)),F=c.useRef(null),P=e=>{F.current=e,typeof l=="function"?l(e):l&&(l.current=e)},h=c.useRef(0),d=c.useRef(null);if(c.useEffect(()=>{const e=(s==null?void 0:s.submitCount)??0;if(!s||e===h.current)return;h.current=e;const t=Object.keys(s.errors);if(t.length===0)return;const r=o=>i.some(m=>o.startsWith(u(m.code)));if(!t.every(r)||t.some(o=>o.startsWith(u(a))))return;const n=i.find(o=>t.some(m=>m.startsWith(u(o.code))));n&&n.code!==a&&(d.current=n.code,v(n.code))},[s==null?void 0:s.submitCount]),c.useEffect(()=>{var n;if(d.current==null||d.current!==a)return;d.current=null;const e=F.current;if(!e||!s)return;const t=new Set(Object.keys(s.errors)),r=Array.from(e.querySelectorAll("[name]")).find(o=>t.has(o.getAttribute("name")??""));(n=r==null?void 0:r.scrollIntoView)==null||n.call(r,{behavior:"smooth",block:"center"}),r==null||r.focus({preventScroll:!0})},[a]),i.length===0)return null;const V=i.map(e=>({value:e.code,label:e.label??e.code,icon:A&&D.flagFor(e.code)?b.jsx(J.Flag,{code:e.code}):K,error:H(e.code),content:b.jsx("div",{className:U.fields,children:x(t=>j.buildTranslationName(e.code,t,T),e.code)},e.code)}));return b.jsx(M.Tabs,{ref:P,className:k,style:C,items:V,value:a,onChange:v,variant:O,size:W,queryKey:null,"aria-label":L})});exports.TranslatedFields=X;
+//# sourceMappingURL=TranslatedFields-LdeJeHEp.cjs.map

package/dist/{TranslatedFields-SvS37hab.cjs.map → TranslatedFields-LdeJeHEp.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"TranslatedFields-SvS37hab.cjs","sources":["../src/components/TranslatedFields/TranslatedFields.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef, useState, type CSSProperties, type ReactNode } from 'react'\nimport { useFormContext } from '../../form/formContext'\nimport { useLocales, useT, useTranslationsNamespace, type LocaleConfig } from '../../theme'\nimport { buildTranslationName } from '../../helpers/translations'\nimport { flagFor } from '../../i18n/messages'\nimport type { IconName } from '../../icons/names'\nimport { Flag } from '../Flag'\nimport { Tabs, type TabsSize, type TabsVariant } from '../Tabs'\nimport styles from './TranslatedFields.module.css'\n\n/** Builds a field's namespaced form name for the active locale (`(field) => name`). */\nexport type TranslatedFieldName = (field: string) => string\n\nexport interface TranslatedFieldsProps {\n  /**\n   * Render the fields for one locale. `name(field)` returns the namespaced form name to put on each\n   * control (e.g. `translations[en-US].title`); `locale` is the active code. The same render runs per\n   * locale, so the fields are identical bar their names.\n   */\n  children: (name: TranslatedFieldName, locale: string) => ReactNode\n  /**\n   * Locales (one tab each). Defaults to the app's configured locales\n   * (`<ConfigProvider config={{ locales }}>`).\n   */\n  locales?: LocaleConfig[]\n  /**\n   * Top-level namespace for the field names (`<namespace>[<locale>].<field>`) and the nested object.\n   * Falls back to `<ConfigProvider config={{ keys: { translationsNamespace } }}>`, then `'translations'`.\n   * Pass to override per-instance (e.g. `'languages'`).\n   */\n  namespace?: string\n  /** Controlled active locale code. */\n  value?: string\n  /** Initial active locale code (uncontrolled). Defaults to the first locale. */\n  defaultValue?: string\n  /** Fires with the next active locale code. */\n  onChange?: (locale: string) => void\n  /**\n   * Show each locale's **flag** on its tab (matched by the language via `flagFor`). A language with no\n   * built-in flag falls back to the `icon`. Defaults to `true`; pass `false` to always use `icon`.\n   */\n  showFlags?: boolean\n  /** Fallback icon shown on a locale tab when its language has no flag (or `showFlags={false}`). Defaults to `'Global'`. */\n  icon?: IconName\n  /** Tab strip variant. Defaults to `Tabs`' default (`underline`). */\n  variant?: TabsVariant\n  /** Tab + field density. Defaults to `Tabs`' default (`md`). */\n  size?: TabsSize\n  /** Accessible label for the tablist. Defaults to the localized `translatedFields.label` (\"Translations\"). */\n  'aria-label'?: string\n  className?: string\n  style?: CSSProperties\n}\n\n/**\n * A tabbed group of **per-locale** form fields — one tab per content locale, each rendering the same\n * fields with locale-namespaced `name`s (`translations[<locale>].<field>` by default), so a `<Form>`\n * submits e.g. `translations[en-US].title` / `translations[ka-GE].title`. You supply the fields once\n * via a render function that receives a `name(field)` builder for the active locale; bring any field\n * component (`TextField`, `MultilineTextField`, a rich-text editor, …). Locales come from\n * `<ConfigProvider config={{ locales }}>` (override with the `locales` prop). The top-level word is the\n * `namespace` (default `'translations'`, e.g. `'languages'`). Each tab shows its language's **flag**\n * (matched via `flagFor`); a language with no built-in flag falls back to the `icon` (a `Global` icon by\n * default), and `showFlags={false}` uses the `icon` for every tab. While inside a `<Form>`, an incomplete\n * locale's tab shows a **dot**, and on submit the strip auto-advances to the first locale with errors\n * and focuses its field. Build the schema / defaults with `buildTranslations`; the form values stay\n * **flat** (`translations[en-US].title` — the `FormData` shape) — convert to/from the **nested** JSON\n * shape (`{ translations: { 'en-US': { title } } }`) with `nestTranslations` / `flattenTranslations`.\n * Requires the `Tabs` component.\n */\nexport const TranslatedFields = forwardRef<HTMLDivElement, TranslatedFieldsProps>(\n  function TranslatedFields(\n    {\n      children,\n      locales: localesProp,\n      namespace: namespaceProp,\n      value,\n      defaultValue,\n      onChange,\n      showFlags = true,\n      icon = 'Global',\n      variant,\n      size,\n      'aria-label': ariaLabelProp,\n      className,\n      style,\n    },\n    ref,\n  ) {\n    const t = useT()\n    const ariaLabel = ariaLabelProp ?? t('translatedFields.label')\n    const configLocales = useLocales()\n    const locales = localesProp ?? configLocales\n    // namespace: the `namespace` prop wins, else the ConfigProvider's (which falls back to the default)\n    const configNamespace = useTranslationsNamespace()\n    const namespace = namespaceProp ?? configNamespace\n    const form = useFormContext()\n\n    // active locale — controlled (`value`) or internal; falls back to the first locale\n    const isControlled = value !== undefined\n    const [internal, setInternal] = useState<string | undefined>(defaultValue)\n    const active = (isControlled ? value : internal) ?? locales[0]?.code ?? ''\n    const setActive = (next: string) => {\n      if (!isControlled) setInternal(next)\n      onChange?.(next)\n    }\n\n    // the namespaced-name prefix for a locale (e.g. `translations[en-US].`)\n    const prefixOf = (code: string) => buildTranslationName(code, '', namespace)\n    // a locale's tab is flagged when any of its fields is invalid AND the error is shown (submitted/touched)\n    const localeHasError = (code: string): boolean =>\n      !!form &&\n      Object.keys(form.errors).some(\n        (key) => key.startsWith(prefixOf(code)) && (form.isSubmitted || form.touched[key] === true),\n      )\n\n    // merge the forwarded ref with an internal one (to query the mounted fields for scroll/focus)\n    const rootRef = useRef<HTMLDivElement | null>(null)\n    const setRootRef = (node: HTMLDivElement | null) => {\n      rootRef.current = node\n      if (typeof ref === 'function') ref(node)\n      else if (ref) (ref as { current: HTMLDivElement | null }).current = node\n    }\n\n    // on each submit, if the active tab is complete but another locale has the only remaining errors,\n    // switch to it and focus its first invalid field (the form's own scroll can't reach an unmounted tab)\n    const lastSubmit = useRef(0)\n    const pendingFocus = useRef<string | null>(null)\n    useEffect(() => {\n      const count = form?.submitCount ?? 0\n      if (!form || count === lastSubmit.current) return\n      lastSubmit.current = count\n      const errorKeys = Object.keys(form.errors)\n      if (errorKeys.length === 0) return\n      const isTranslationKey = (k: string) => locales.some((l) => k.startsWith(prefixOf(l.code)))\n      // a non-translation field is still invalid → the form's scroll-to-error handles it (above the tabs)\n      if (!errorKeys.every(isTranslationKey)) return\n      // active locale already shows its (mounted) errors → nothing to switch to\n      if (errorKeys.some((k) => k.startsWith(prefixOf(active)))) return\n      const firstBad = locales.find((l) => errorKeys.some((k) => k.startsWith(prefixOf(l.code))))\n      if (firstBad && firstBad.code !== active) {\n        pendingFocus.current = firstBad.code\n        setActive(firstBad.code)\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [form?.submitCount])\n\n    // once the auto-switched tab has mounted, focus its first invalid field\n    useEffect(() => {\n      if (pendingFocus.current == null || pendingFocus.current !== active) return\n      pendingFocus.current = null\n      const root = rootRef.current\n      if (!root || !form) return\n      const errorKeys = new Set(Object.keys(form.errors))\n      const target = Array.from(root.querySelectorAll<HTMLElement>('[name]')).find((el) =>\n        errorKeys.has(el.getAttribute('name') ?? ''),\n      )\n      target?.scrollIntoView?.({ behavior: 'smooth', block: 'center' })\n      target?.focus({ preventScroll: true })\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [active])\n\n    if (locales.length === 0) return null\n\n    const items = locales.map((loc) => ({\n      value: loc.code,\n      label: loc.label ?? loc.code,\n      // the locale's flag when it has one (and flags are enabled), else the fallback `icon` (Global)\n      icon: showFlags && flagFor(loc.code) ? <Flag code={loc.code} /> : icon,\n      // an invalid locale shows the Tabs error dot (a small red dot — no full-tab tint)\n      error: localeHasError(loc.code),\n      // keyed by locale so switching tabs remounts the fields (no value/state bleed between locales)\n      content: (\n        <div key={loc.code} className={styles.fields}>\n          {children((field) => buildTranslationName(loc.code, field, namespace), loc.code)}\n        </div>\n      ),\n    }))\n\n    return (\n      <Tabs\n        ref={setRootRef}\n        className={className}\n        style={style}\n        items={items}\n        value={active}\n        onChange={setActive}\n        variant={variant}\n        size={size}\n        // locale tabs are internal UI — never sync them to the page URL\n        queryKey={null}\n        aria-label={ariaLabel}\n      />\n    )\n  },\n)\n"],"names":["TranslatedFields","forwardRef","children","localesProp","namespaceProp","value","defaultValue","onChange","showFlags","icon","variant","size","ariaLabelProp","className","style","ref","t","useT","ariaLabel","configLocales","useLocales","locales","configNamespace","useTranslationsNamespace","namespace","form","useFormContext","isControlled","internal","setInternal","useState","active","_a","setActive","next","prefixOf","code","buildTranslationName","localeHasError","key","rootRef","useRef","setRootRef","node","lastSubmit","pendingFocus","useEffect","count","errorKeys","isTranslationKey","k","l","firstBad","root","target","el","items","loc","flagFor","jsx","Flag","styles","field","Tabs"],"mappings":"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"}
+{"version":3,"file":"TranslatedFields-LdeJeHEp.cjs","sources":["../src/components/TranslatedFields/TranslatedFields.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef, useState, type CSSProperties, type ReactNode } from 'react'\nimport { useFormContext } from '../../form/formContext'\nimport { useLocales, useT, useTranslationsNamespace, type LocaleConfig } from '../../theme'\nimport { buildTranslationName } from '../../helpers/translations'\nimport { flagFor } from '../../i18n/messages'\nimport type { IconName } from '../../icons/names'\nimport { Flag } from '../Flag'\nimport { Tabs, type TabsSize, type TabsVariant } from '../Tabs'\nimport styles from './TranslatedFields.module.css'\n\n/** Builds a field's namespaced form name for the active locale (`(field) => name`). */\nexport type TranslatedFieldName = (field: string) => string\n\nexport interface TranslatedFieldsProps {\n  /**\n   * Render the fields for one locale. `name(field)` returns the namespaced form name to put on each\n   * control (e.g. `translations[en-US].title`); `locale` is the active code. The same render runs per\n   * locale, so the fields are identical bar their names.\n   */\n  children: (name: TranslatedFieldName, locale: string) => ReactNode\n  /**\n   * Locales (one tab each). Defaults to the app's configured locales\n   * (`<ConfigProvider config={{ locales }}>`).\n   */\n  locales?: LocaleConfig[]\n  /**\n   * Top-level namespace for the field names (`<namespace>[<locale>].<field>`) and the nested object.\n   * Falls back to `<ConfigProvider config={{ keys: { translationsNamespace } }}>`, then `'translations'`.\n   * Pass to override per-instance (e.g. `'languages'`).\n   */\n  namespace?: string\n  /** Controlled active locale code. */\n  value?: string\n  /** Initial active locale code (uncontrolled). Defaults to the first locale. */\n  defaultValue?: string\n  /** Fires with the next active locale code. */\n  onChange?: (locale: string) => void\n  /**\n   * Show each locale's **flag** on its tab (matched by the language via `flagFor`). A language with no\n   * built-in flag falls back to the `icon`. Defaults to `true`; pass `false` to always use `icon`.\n   */\n  showFlags?: boolean\n  /** Fallback icon shown on a locale tab when its language has no flag (or `showFlags={false}`). Defaults to `'Global'`. */\n  icon?: IconName\n  /** Tab strip variant. Defaults to `Tabs`' default (`underline`). */\n  variant?: TabsVariant\n  /** Tab + field density. Defaults to `Tabs`' default (`md`). */\n  size?: TabsSize\n  /** Accessible label for the tablist. Defaults to the localized `translatedFields.label` (\"Translations\"). */\n  'aria-label'?: string\n  className?: string\n  style?: CSSProperties\n}\n\n/**\n * A tabbed group of **per-locale** form fields — one tab per content locale, each rendering the same\n * fields with locale-namespaced `name`s (`translations[<locale>].<field>` by default), so a `<Form>`\n * submits e.g. `translations[en-US].title` / `translations[ka-GE].title`. You supply the fields once\n * via a render function that receives a `name(field)` builder for the active locale; bring any field\n * component (`TextField`, `MultilineTextField`, a rich-text editor, …). Locales come from\n * `<ConfigProvider config={{ locales }}>` (override with the `locales` prop). The top-level word is the\n * `namespace` (default `'translations'`, e.g. `'languages'`). Each tab shows its language's **flag**\n * (matched via `flagFor`); a language with no built-in flag falls back to the `icon` (a `Global` icon by\n * default), and `showFlags={false}` uses the `icon` for every tab. While inside a `<Form>`, an incomplete\n * locale's tab shows a **dot**, and on submit the strip auto-advances to the first locale with errors\n * and focuses its field. Build the schema / defaults with `buildTranslations`; the form values stay\n * **flat** (`translations[en-US].title` — the `FormData` shape) — convert to/from the **nested** JSON\n * shape (`{ translations: { 'en-US': { title } } }`) with `nestTranslations` / `flattenTranslations`.\n * Requires the `Tabs` component.\n */\nexport const TranslatedFields = forwardRef<HTMLDivElement, TranslatedFieldsProps>(\n  function TranslatedFields(\n    {\n      children,\n      locales: localesProp,\n      namespace: namespaceProp,\n      value,\n      defaultValue,\n      onChange,\n      showFlags = true,\n      icon = 'Global',\n      variant,\n      size,\n      'aria-label': ariaLabelProp,\n      className,\n      style,\n    },\n    ref,\n  ) {\n    const t = useT()\n    const ariaLabel = ariaLabelProp ?? t('translatedFields.label')\n    const configLocales = useLocales()\n    const locales = localesProp ?? configLocales\n    // namespace: the `namespace` prop wins, else the ConfigProvider's (which falls back to the default)\n    const configNamespace = useTranslationsNamespace()\n    const namespace = namespaceProp ?? configNamespace\n    const form = useFormContext()\n\n    // active locale — controlled (`value`) or internal; falls back to the first locale\n    const isControlled = value !== undefined\n    const [internal, setInternal] = useState<string | undefined>(defaultValue)\n    const active = (isControlled ? value : internal) ?? locales[0]?.code ?? ''\n    const setActive = (next: string) => {\n      if (!isControlled) setInternal(next)\n      onChange?.(next)\n    }\n\n    // the namespaced-name prefix for a locale (e.g. `translations[en-US].`)\n    const prefixOf = (code: string) => buildTranslationName(code, '', namespace)\n    // a locale's tab is flagged when any of its fields is invalid AND the error is shown (submitted/touched)\n    const localeHasError = (code: string): boolean =>\n      !!form &&\n      Object.keys(form.errors).some(\n        (key) => key.startsWith(prefixOf(code)) && (form.isSubmitted || form.touched[key] === true),\n      )\n\n    // merge the forwarded ref with an internal one (to query the mounted fields for scroll/focus)\n    const rootRef = useRef<HTMLDivElement | null>(null)\n    const setRootRef = (node: HTMLDivElement | null) => {\n      rootRef.current = node\n      if (typeof ref === 'function') ref(node)\n      else if (ref) (ref as { current: HTMLDivElement | null }).current = node\n    }\n\n    // on each submit, if the active tab is complete but another locale has the only remaining errors,\n    // switch to it and focus its first invalid field (the form's own scroll can't reach an unmounted tab)\n    const lastSubmit = useRef(0)\n    const pendingFocus = useRef<string | null>(null)\n    useEffect(() => {\n      const count = form?.submitCount ?? 0\n      if (!form || count === lastSubmit.current) return\n      lastSubmit.current = count\n      const errorKeys = Object.keys(form.errors)\n      if (errorKeys.length === 0) return\n      const isTranslationKey = (k: string) => locales.some((l) => k.startsWith(prefixOf(l.code)))\n      // a non-translation field is still invalid → the form's scroll-to-error handles it (above the tabs)\n      if (!errorKeys.every(isTranslationKey)) return\n      // active locale already shows its (mounted) errors → nothing to switch to\n      if (errorKeys.some((k) => k.startsWith(prefixOf(active)))) return\n      const firstBad = locales.find((l) => errorKeys.some((k) => k.startsWith(prefixOf(l.code))))\n      if (firstBad && firstBad.code !== active) {\n        pendingFocus.current = firstBad.code\n        setActive(firstBad.code)\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [form?.submitCount])\n\n    // once the auto-switched tab has mounted, focus its first invalid field\n    useEffect(() => {\n      if (pendingFocus.current == null || pendingFocus.current !== active) return\n      pendingFocus.current = null\n      const root = rootRef.current\n      if (!root || !form) return\n      const errorKeys = new Set(Object.keys(form.errors))\n      const target = Array.from(root.querySelectorAll<HTMLElement>('[name]')).find((el) =>\n        errorKeys.has(el.getAttribute('name') ?? ''),\n      )\n      target?.scrollIntoView?.({ behavior: 'smooth', block: 'center' })\n      target?.focus({ preventScroll: true })\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [active])\n\n    if (locales.length === 0) return null\n\n    const items = locales.map((loc) => ({\n      value: loc.code,\n      label: loc.label ?? loc.code,\n      // the locale's flag when it has one (and flags are enabled), else the fallback `icon` (Global)\n      icon: showFlags && flagFor(loc.code) ? <Flag code={loc.code} /> : icon,\n      // an invalid locale shows the Tabs error dot (a small red dot — no full-tab tint)\n      error: localeHasError(loc.code),\n      // keyed by locale so switching tabs remounts the fields (no value/state bleed between locales)\n      content: (\n        <div key={loc.code} className={styles.fields}>\n          {children((field) => buildTranslationName(loc.code, field, namespace), loc.code)}\n        </div>\n      ),\n    }))\n\n    return (\n      <Tabs\n        ref={setRootRef}\n        className={className}\n        style={style}\n        items={items}\n        value={active}\n        onChange={setActive}\n        variant={variant}\n        size={size}\n        // locale tabs are internal UI — never sync them to the page URL\n        queryKey={null}\n        aria-label={ariaLabel}\n      />\n    )\n  },\n)\n"],"names":["TranslatedFields","forwardRef","children","localesProp","namespaceProp","value","defaultValue","onChange","showFlags","icon","variant","size","ariaLabelProp","className","style","ref","t","useT","ariaLabel","configLocales","useLocales","locales","configNamespace","useTranslationsNamespace","namespace","form","useFormContext","isControlled","internal","setInternal","useState","active","_a","setActive","next","prefixOf","code","buildTranslationName","localeHasError","key","rootRef","useRef","setRootRef","node","lastSubmit","pendingFocus","useEffect","count","errorKeys","isTranslationKey","k","l","firstBad","root","target","el","items","loc","flagFor","jsx","Flag","styles","field","Tabs"],"mappings":"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"}

package/dist/{UserCard-VPaexedS.cjs → UserCard-CQOiWppq.cjs}

@@ -1,2 +1,2 @@
-"use strict";const t=require("react/jsx-runtime"),q=require("react"),p=require("clsx"),g=require("./Avatar-l48Ice6t.cjs"),C=require("./Button-Q_5uA-zc.cjs"),S=require("./Icon-B6lz-V0A.cjs"),a=require("./Skeleton-DK0lAjS9.cjs"),d=require("./Typography-d97DdbNd.cjs"),w=require("./ConfigProvider-Ci9Q2HLF.cjs"),T="_card_1fykc_3",U="_identity_1fykc_16",b="_text_1fykc_20",I="_sm_1fykc_33",N="_lg_1fykc_37",s={card:T,identity:U,text:b,sm:I,lg:N},A=q.forwardRef(function({name:c,email:n,avatar:l,icon:u="User",color:y="primary",size:e="md",onLogout:i,logoutLabel:x,children:m,loading:r=!1,className:_,style:f,...h},v){const o=w.useT(),j=e==="lg"?"lg":e==="sm"?"sm":"md",k=e==="lg"?"md":"sm";return t.jsxs("div",{ref:v,className:p.clsx(s.card,s[e],_),style:f,"aria-busy":r||void 0,...h,children:[t.jsxs("div",{className:s.identity,children:[t.jsx(g.Avatar,{size:j,name:c,src:l,icon:c?void 0:u,color:y,loading:r}),t.jsxs("div",{className:s.text,children:[t.jsx(d.Typography,{variant:"bodySmall",truncate:!0,children:r?t.jsx(a.Skeleton,{width:"60%"}):c??o("userCard.welcome")}),(r||n!=null)&&t.jsx(d.Typography,{variant:"caption",color:"muted",truncate:!0,children:r?t.jsx(a.Skeleton,{width:"85%"}):n})]})]}),m,i?t.jsx(C.Button,{variant:"filled",color:"error",size:k,fullWidth:!0,startIcon:t.jsx(S.Icon,{name:"Logout2"}),onClick:i,children:x??o("userCard.signOut")}):null]})});exports.UserCard=A;
-//# sourceMappingURL=UserCard-VPaexedS.cjs.map
+"use strict";const t=require("react/jsx-runtime"),q=require("react"),p=require("clsx"),g=require("./Avatar-BBqX1732.cjs"),C=require("./Button-Bxztlybi.cjs"),S=require("./Icon-CBg21lKA.cjs"),a=require("./Skeleton-DK0lAjS9.cjs"),d=require("./Typography-d97DdbNd.cjs"),w=require("./ConfigProvider-Cf-awvZs.cjs"),T="_card_1fykc_3",U="_identity_1fykc_16",b="_text_1fykc_20",I="_sm_1fykc_33",N="_lg_1fykc_37",s={card:T,identity:U,text:b,sm:I,lg:N},A=q.forwardRef(function({name:c,email:n,avatar:l,icon:u="User",color:y="primary",size:e="md",onLogout:i,logoutLabel:x,children:m,loading:r=!1,className:_,style:f,...h},v){const o=w.useT(),j=e==="lg"?"lg":e==="sm"?"sm":"md",k=e==="lg"?"md":"sm";return t.jsxs("div",{ref:v,className:p.clsx(s.card,s[e],_),style:f,"aria-busy":r||void 0,...h,children:[t.jsxs("div",{className:s.identity,children:[t.jsx(g.Avatar,{size:j,name:c,src:l,icon:c?void 0:u,color:y,loading:r}),t.jsxs("div",{className:s.text,children:[t.jsx(d.Typography,{variant:"bodySmall",truncate:!0,children:r?t.jsx(a.Skeleton,{width:"60%"}):c??o("userCard.welcome")}),(r||n!=null)&&t.jsx(d.Typography,{variant:"caption",color:"muted",truncate:!0,children:r?t.jsx(a.Skeleton,{width:"85%"}):n})]})]}),m,i?t.jsx(C.Button,{variant:"filled",color:"error",size:k,fullWidth:!0,startIcon:t.jsx(S.Icon,{name:"Logout2"}),onClick:i,children:x??o("userCard.signOut")}):null]})});exports.UserCard=A;
+//# sourceMappingURL=UserCard-CQOiWppq.cjs.map

package/dist/{UserCard-VPaexedS.cjs.map → UserCard-CQOiWppq.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"UserCard-VPaexedS.cjs","sources":["../src/components/UserCard/UserCard.tsx"],"sourcesContent":["import { forwardRef, type CSSProperties, type HTMLAttributes, type ReactNode } from 'react'\nimport { clsx } from 'clsx'\nimport { useT, type ThemeColor } from '../../theme'\nimport type { IconName } from '../../icons/names'\nimport { Avatar } from '../Avatar'\nimport { Button } from '../Button'\nimport { Icon } from '../Icon'\nimport { Skeleton } from '../Skeleton'\nimport { Typography } from '../Typography'\nimport styles from './UserCard.module.css'\n\nexport type UserCardSize = 'sm' | 'md' | 'lg'\n\nexport interface UserCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'> {\n  /**\n   * Display name — the primary line, and the source of the avatar initials. When omitted, the primary\n   * line falls back to a localized **\"Welcome\"** greeting (and the avatar shows the `icon`).\n   */\n  name?: string\n  /** Secondary line under the name (usually the email). */\n  email?: ReactNode\n  /** Avatar image URL (falls back to the initials from `name`, else the `icon`). */\n  avatar?: string\n  /** Fallback avatar icon when there's no image or name. Defaults to `'User'`. */\n  icon?: IconName\n  /** Theme palette token tinting the avatar. Defaults to `'primary'`. */\n  color?: ThemeColor\n  /** Preset size (avatar + button + card padding; the text stays fixed). Defaults to `'md'`. */\n  size?: UserCardSize\n  /** When provided, a **Sign out** button is shown that calls this. */\n  onLogout?: () => void\n  /** Sign-out button label. Defaults to `'Sign Out'`. */\n  logoutLabel?: ReactNode\n  /** Extra content between the identity row and the sign-out button (e.g. a link or menu). */\n  children?: ReactNode\n  /** Show skeletons for the avatar, name and email while the user is being fetched (sign-out stays usable). Defaults to `false`. */\n  loading?: boolean\n}\n\n/**\n * A compact account card — an `Avatar` + name/email and an optional **Sign out** button — for a consistent\n * signed-in-user block across apps, instead of hand-rolling the markup each time. The shell's sidebar renders\n * one itself (`config.sidebar.userCard` / the `RootLayout` `showUserCard` prop), so place it by hand only\n * elsewhere. Shows the image (`avatar`) → initials (from `name`) →\n * `icon` (default `User`) in priority order; renders the sign-out `Button` (filled `error`) only when\n * `onLogout` is given. `size` (`sm`/`md`/`lg`) scales the avatar, button and padding; `color` (default `primary`)\n * tints the avatar. `loading` swaps the avatar + name + email for skeletons. Own CSS module (token-only).\n */\nexport const UserCard = forwardRef<HTMLDivElement, UserCardProps>(function UserCard(\n  {\n    name,\n    email,\n    avatar,\n    icon = 'User',\n    color = 'primary',\n    size = 'md',\n    onLogout,\n    logoutLabel,\n    children,\n    loading = false,\n    className,\n    style,\n    ...props\n  },\n  ref,\n) {\n  const t = useT()\n  // the identity row + the sign-out button share the same visual size step\n  const avatarSize = size === 'lg' ? 'lg' : size === 'sm' ? 'sm' : 'md'\n  const buttonSize = size === 'lg' ? 'md' : 'sm'\n\n  return (\n    <div\n      ref={ref}\n      className={clsx(styles.card, styles[size], className)}\n      style={style as CSSProperties}\n      aria-busy={loading || undefined}\n      {...props}\n    >\n      <div className={styles.identity}>\n        {/* Avatar priority is image → icon → initials, so pass `icon` only as the last resort (no\n            name), otherwise a name would still show the icon instead of its initials */}\n        <Avatar\n          size={avatarSize}\n          name={name}\n          src={avatar}\n          icon={name ? undefined : icon}\n          color={color}\n          loading={loading}\n        />\n        <div className={styles.text}>\n          {/* primary line: the name, or a \"Welcome\" greeting fallback when no name is given */}\n          <Typography variant=\"bodySmall\" truncate>\n            {loading ? <Skeleton width=\"60%\" /> : (name ?? t('userCard.welcome'))}\n          </Typography>\n          {(loading || email != null) && (\n            <Typography variant=\"caption\" color=\"muted\" truncate>\n              {loading ? <Skeleton width=\"85%\" /> : email}\n            </Typography>\n          )}\n        </div>\n      </div>\n\n      {children}\n\n      {onLogout ? (\n        <Button\n          variant=\"filled\"\n          color=\"error\"\n          size={buttonSize}\n          fullWidth\n          startIcon={<Icon name=\"Logout2\" />}\n          onClick={onLogout}\n        >\n          {logoutLabel ?? t('userCard.signOut')}\n        </Button>\n      ) : null}\n    </div>\n  )\n})\n"],"names":["UserCard","forwardRef","name","email","avatar","icon","color","size","onLogout","logoutLabel","children","loading","className","style","props","ref","t","useT","avatarSize","buttonSize","jsxs","clsx","styles","jsx","Avatar","Typography","Skeleton","Button","Icon"],"mappings":"0bAgDaA,EAAWC,EAAAA,WAA0C,SAChE,CACE,KAAAC,EACA,MAAAC,EACA,OAAAC,EACA,KAAAC,EAAO,OACP,MAAAC,EAAQ,UACR,KAAAC,EAAO,KACP,SAAAC,EACA,YAAAC,EACA,SAAAC,EACA,QAAAC,EAAU,GACV,UAAAC,EACA,MAAAC,EACA,GAAGC,CACL,EACAC,EACA,CACA,MAAMC,EAAIC,EAAAA,KAAA,EAEJC,EAAaX,IAAS,KAAO,KAAOA,IAAS,KAAO,KAAO,KAC3DY,EAAaZ,IAAS,KAAO,KAAO,KAE1C,OACEa,EAAAA,KAAC,MAAA,CACC,IAAAL,EACA,UAAWM,EAAAA,KAAKC,EAAO,KAAMA,EAAOf,CAAI,EAAGK,CAAS,EACpD,MAAAC,EACA,YAAWF,GAAW,OACrB,GAAGG,EAEJ,SAAA,CAAAM,EAAAA,KAAC,MAAA,CAAI,UAAWE,EAAO,SAGrB,SAAA,CAAAC,EAAAA,IAACC,EAAAA,OAAA,CACC,KAAMN,EACN,KAAAhB,EACA,IAAKE,EACL,KAAMF,EAAO,OAAYG,EACzB,MAAAC,EACA,QAAAK,CAAA,CAAA,EAEFS,EAAAA,KAAC,MAAA,CAAI,UAAWE,EAAO,KAErB,SAAA,CAAAC,EAAAA,IAACE,EAAAA,WAAA,CAAW,QAAQ,YAAY,SAAQ,GACrC,SAAAd,EAAUY,EAAAA,IAACG,WAAA,CAAS,MAAM,KAAA,CAAM,EAAMxB,GAAQc,EAAE,kBAAkB,EACrE,GACEL,GAAWR,GAAS,OACpBoB,EAAAA,IAACE,EAAAA,WAAA,CAAW,QAAQ,UAAU,MAAM,QAAQ,SAAQ,GACjD,SAAAd,EAAUY,MAACG,EAAAA,UAAS,MAAM,MAAM,EAAKvB,CAAA,CACxC,CAAA,CAAA,CAEJ,CAAA,EACF,EAECO,EAEAF,EACCe,EAAAA,IAACI,EAAAA,OAAA,CACC,QAAQ,SACR,MAAM,QACN,KAAMR,EACN,UAAS,GACT,UAAWI,EAAAA,IAACK,EAAAA,KAAA,CAAK,KAAK,SAAA,CAAU,EAChC,QAASpB,EAER,SAAAC,GAAeO,EAAE,kBAAkB,CAAA,CAAA,EAEpC,IAAA,CAAA,CAAA,CAGV,CAAC"}
+{"version":3,"file":"UserCard-CQOiWppq.cjs","sources":["../src/components/UserCard/UserCard.tsx"],"sourcesContent":["import { forwardRef, type CSSProperties, type HTMLAttributes, type ReactNode } from 'react'\nimport { clsx } from 'clsx'\nimport { useT, type ThemeColor } from '../../theme'\nimport type { IconName } from '../../icons/names'\nimport { Avatar } from '../Avatar'\nimport { Button } from '../Button'\nimport { Icon } from '../Icon'\nimport { Skeleton } from '../Skeleton'\nimport { Typography } from '../Typography'\nimport styles from './UserCard.module.css'\n\nexport type UserCardSize = 'sm' | 'md' | 'lg'\n\nexport interface UserCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'> {\n  /**\n   * Display name — the primary line, and the source of the avatar initials. When omitted, the primary\n   * line falls back to a localized **\"Welcome\"** greeting (and the avatar shows the `icon`).\n   */\n  name?: string\n  /** Secondary line under the name (usually the email). */\n  email?: ReactNode\n  /** Avatar image URL (falls back to the initials from `name`, else the `icon`). */\n  avatar?: string\n  /** Fallback avatar icon when there's no image or name. Defaults to `'User'`. */\n  icon?: IconName\n  /** Theme palette token tinting the avatar. Defaults to `'primary'`. */\n  color?: ThemeColor\n  /** Preset size (avatar + button + card padding; the text stays fixed). Defaults to `'md'`. */\n  size?: UserCardSize\n  /** When provided, a **Sign out** button is shown that calls this. */\n  onLogout?: () => void\n  /** Sign-out button label. Defaults to `'Sign Out'`. */\n  logoutLabel?: ReactNode\n  /** Extra content between the identity row and the sign-out button (e.g. a link or menu). */\n  children?: ReactNode\n  /** Show skeletons for the avatar, name and email while the user is being fetched (sign-out stays usable). Defaults to `false`. */\n  loading?: boolean\n}\n\n/**\n * A compact account card — an `Avatar` + name/email and an optional **Sign out** button — for a consistent\n * signed-in-user block across apps, instead of hand-rolling the markup each time. The shell's sidebar renders\n * one itself (`config.sidebar.userCard` / the `RootLayout` `showUserCard` prop), so place it by hand only\n * elsewhere. Shows the image (`avatar`) → initials (from `name`) →\n * `icon` (default `User`) in priority order; renders the sign-out `Button` (filled `error`) only when\n * `onLogout` is given. `size` (`sm`/`md`/`lg`) scales the avatar, button and padding; `color` (default `primary`)\n * tints the avatar. `loading` swaps the avatar + name + email for skeletons. Own CSS module (token-only).\n */\nexport const UserCard = forwardRef<HTMLDivElement, UserCardProps>(function UserCard(\n  {\n    name,\n    email,\n    avatar,\n    icon = 'User',\n    color = 'primary',\n    size = 'md',\n    onLogout,\n    logoutLabel,\n    children,\n    loading = false,\n    className,\n    style,\n    ...props\n  },\n  ref,\n) {\n  const t = useT()\n  // the identity row + the sign-out button share the same visual size step\n  const avatarSize = size === 'lg' ? 'lg' : size === 'sm' ? 'sm' : 'md'\n  const buttonSize = size === 'lg' ? 'md' : 'sm'\n\n  return (\n    <div\n      ref={ref}\n      className={clsx(styles.card, styles[size], className)}\n      style={style as CSSProperties}\n      aria-busy={loading || undefined}\n      {...props}\n    >\n      <div className={styles.identity}>\n        {/* Avatar priority is image → icon → initials, so pass `icon` only as the last resort (no\n            name), otherwise a name would still show the icon instead of its initials */}\n        <Avatar\n          size={avatarSize}\n          name={name}\n          src={avatar}\n          icon={name ? undefined : icon}\n          color={color}\n          loading={loading}\n        />\n        <div className={styles.text}>\n          {/* primary line: the name, or a \"Welcome\" greeting fallback when no name is given */}\n          <Typography variant=\"bodySmall\" truncate>\n            {loading ? <Skeleton width=\"60%\" /> : (name ?? t('userCard.welcome'))}\n          </Typography>\n          {(loading || email != null) && (\n            <Typography variant=\"caption\" color=\"muted\" truncate>\n              {loading ? <Skeleton width=\"85%\" /> : email}\n            </Typography>\n          )}\n        </div>\n      </div>\n\n      {children}\n\n      {onLogout ? (\n        <Button\n          variant=\"filled\"\n          color=\"error\"\n          size={buttonSize}\n          fullWidth\n          startIcon={<Icon name=\"Logout2\" />}\n          onClick={onLogout}\n        >\n          {logoutLabel ?? t('userCard.signOut')}\n        </Button>\n      ) : null}\n    </div>\n  )\n})\n"],"names":["UserCard","forwardRef","name","email","avatar","icon","color","size","onLogout","logoutLabel","children","loading","className","style","props","ref","t","useT","avatarSize","buttonSize","jsxs","clsx","styles","jsx","Avatar","Typography","Skeleton","Button","Icon"],"mappings":"0bAgDaA,EAAWC,EAAAA,WAA0C,SAChE,CACE,KAAAC,EACA,MAAAC,EACA,OAAAC,EACA,KAAAC,EAAO,OACP,MAAAC,EAAQ,UACR,KAAAC,EAAO,KACP,SAAAC,EACA,YAAAC,EACA,SAAAC,EACA,QAAAC,EAAU,GACV,UAAAC,EACA,MAAAC,EACA,GAAGC,CACL,EACAC,EACA,CACA,MAAMC,EAAIC,EAAAA,KAAA,EAEJC,EAAaX,IAAS,KAAO,KAAOA,IAAS,KAAO,KAAO,KAC3DY,EAAaZ,IAAS,KAAO,KAAO,KAE1C,OACEa,EAAAA,KAAC,MAAA,CACC,IAAAL,EACA,UAAWM,EAAAA,KAAKC,EAAO,KAAMA,EAAOf,CAAI,EAAGK,CAAS,EACpD,MAAAC,EACA,YAAWF,GAAW,OACrB,GAAGG,EAEJ,SAAA,CAAAM,EAAAA,KAAC,MAAA,CAAI,UAAWE,EAAO,SAGrB,SAAA,CAAAC,EAAAA,IAACC,EAAAA,OAAA,CACC,KAAMN,EACN,KAAAhB,EACA,IAAKE,EACL,KAAMF,EAAO,OAAYG,EACzB,MAAAC,EACA,QAAAK,CAAA,CAAA,EAEFS,EAAAA,KAAC,MAAA,CAAI,UAAWE,EAAO,KAErB,SAAA,CAAAC,EAAAA,IAACE,EAAAA,WAAA,CAAW,QAAQ,YAAY,SAAQ,GACrC,SAAAd,EAAUY,EAAAA,IAACG,WAAA,CAAS,MAAM,KAAA,CAAM,EAAMxB,GAAQc,EAAE,kBAAkB,EACrE,GACEL,GAAWR,GAAS,OACpBoB,EAAAA,IAACE,EAAAA,WAAA,CAAW,QAAQ,UAAU,MAAM,QAAQ,SAAQ,GACjD,SAAAd,EAAUY,MAACG,EAAAA,UAAS,MAAM,MAAM,EAAKvB,CAAA,CACxC,CAAA,CAAA,CAEJ,CAAA,EACF,EAECO,EAEAF,EACCe,EAAAA,IAACI,EAAAA,OAAA,CACC,QAAQ,SACR,MAAM,QACN,KAAMR,EACN,UAAS,GACT,UAAWI,EAAAA,IAACK,EAAAA,KAAA,CAAK,KAAK,SAAA,CAAU,EAChC,QAASpB,EAER,SAAAC,GAAeO,EAAE,kBAAkB,CAAA,CAAA,EAEpC,IAAA,CAAA,CAAA,CAGV,CAAC"}

package/dist/{UserCard-cmZrMvwL.js → UserCard-Cr75RwZb.js}

@@ -1,12 +1,12 @@
 import { jsxs as e, jsx as t } from "react/jsx-runtime";
 import { forwardRef as S } from "react";
 import { clsx as b } from "clsx";
-import { A as g } from "./Avatar-ClcmN0ba.js";
-import { B as w } from "./Button-CtADzomU.js";
-import { b as U } from "./Icon-D5TxgfCc.js";
+import { A as g } from "./Avatar-CaYyv5wk.js";
+import { B as w } from "./Button-5LQtDA9d.js";
+import { b as U } from "./Icon-B7DJn8Tw.js";
 import { S as m } from "./Skeleton-_-uGax2j.js";
 import { T as d } from "./Typography-ChSuxgkc.js";
-import { a as N } from "./ConfigProvider-Dqfu7UBU.js";
+import { a as N } from "./ConfigProvider-CYgmMH4j.js";
 const T = "_card_1fykc_3", j = "_identity_1fykc_16", A = "_text_1fykc_20", B = "_sm_1fykc_33", I = "_lg_1fykc_37", o = {
   card: T,
   identity: j,
@@ -75,4 +75,4 @@ const T = "_card_1fykc_3", j = "_identity_1fykc_16", A = "_text_1fykc_20", B = "
 export {
   J as U
 };
-//# sourceMappingURL=UserCard-cmZrMvwL.js.map
+//# sourceMappingURL=UserCard-Cr75RwZb.js.map