@techzyapp/ui-library 1.0.0

package/dist/TranslatedFields-CI0F9bHw.js

@@ -0,0 +1,82 @@
+import { jsx as R } from "react/jsx-runtime";
+import { forwardRef as V, useState as z, useRef as m, useEffect as j } from "react";
+import { u as D } from "./formContext-B7ln1Miy.js";
+import { b as w } from "./translations-D15tFHM1.js";
+import { T as J } from "./Tabs--DDM-zKe.js";
+import { h as M, n as P } from "./ConfigProvider-2c94kUOk.js";
+const Q = "_fields_aawaf_4", U = {
+  fields: Q
+}, se = V(
+  function({
+    children: A,
+    locales: F,
+    namespace: K,
+    value: b,
+    defaultValue: N,
+    onChange: f,
+    icon: O = "Global",
+    variant: W,
+    size: k,
+    "aria-label": x = "Translations",
+    className: _,
+    style: q
+  }, a) {
+    var S;
+    const E = M(), c = F ?? E, I = P(), p = K ?? I, t = D(), y = b !== void 0, [L, B] = z(N), i = (y ? b : L) ?? ((S = c[0]) == null ? void 0 : S.code) ?? "", h = (e) => {
+      y || B(e), f == null || f(e);
+    }, l = (e) => w(e, "", p), C = (e) => !!t && Object.keys(t.errors).some(
+      (s) => s.startsWith(l(e)) && (t.isSubmitted || t.touched[s] === !0)
+    ), T = m(null), G = (e) => {
+      T.current = e, typeof a == "function" ? a(e) : a && (a.current = e);
+    }, v = m(0), u = m(null);
+    if (j(() => {
+      const e = (t == null ? void 0 : t.submitCount) ?? 0;
+      if (!t || e === v.current) return;
+      v.current = e;
+      const s = Object.keys(t.errors);
+      if (s.length === 0) return;
+      const r = (n) => c.some((d) => n.startsWith(l(d.code)));
+      if (!s.every(r) || s.some((n) => n.startsWith(l(i)))) return;
+      const o = c.find((n) => s.some((d) => d.startsWith(l(n.code))));
+      o && o.code !== i && (u.current = o.code, h(o.code));
+    }, [t == null ? void 0 : t.submitCount]), j(() => {
+      var o;
+      if (u.current == null || u.current !== i) return;
+      u.current = null;
+      const e = T.current;
+      if (!e || !t) return;
+      const s = new Set(Object.keys(t.errors)), r = Array.from(e.querySelectorAll("[name]")).find(
+        (n) => s.has(n.getAttribute("name") ?? "")
+      );
+      (o = r == null ? void 0 : r.scrollIntoView) == null || o.call(r, { behavior: "smooth", block: "center" }), r == null || r.focus({ preventScroll: !0 });
+    }, [i]), c.length === 0) return null;
+    const H = c.map((e) => ({
+      value: e.code,
+      label: e.label ?? e.code,
+      icon: O,
+      // an invalid locale shows the Tabs error dot (a small red dot — no full-tab tint)
+      error: C(e.code),
+      // keyed by locale so switching tabs remounts the fields (no value/state bleed between locales)
+      content: /* @__PURE__ */ R("div", { className: U.fields, children: A((s) => w(e.code, s, p), e.code) }, e.code)
+    }));
+    return /* @__PURE__ */ R(
+      J,
+      {
+        ref: G,
+        className: _,
+        style: q,
+        items: H,
+        value: i,
+        onChange: h,
+        variant: W,
+        size: k,
+        queryKey: null,
+        "aria-label": x
+      }
+    );
+  }
+);
+export {
+  se as T
+};
+//# sourceMappingURL=TranslatedFields-CI0F9bHw.js.map

package/dist/TranslatedFields-CI0F9bHw.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TranslatedFields-CI0F9bHw.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, useTranslationsNamespace, type LocaleConfig } from '../../theme'\nimport { buildTranslationName } from '../../helpers/translations'\nimport type { IconName } from '../../icons/names'\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  /** Icon shown on each locale tab. 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 `'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'`). 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      icon = 'Global',\n      variant,\n      size,\n      'aria-label': ariaLabel = 'Translations',\n      className,\n      style,\n    },\n    ref,\n  ) {\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      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","icon","variant","size","ariaLabel","className","style","ref","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","jsx","styles","field","Tabs"],"mappings":"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"}

package/dist/TranslatedFields-DT3bYse6.cjs

@@ -0,0 +1,2 @@
+"use strict";const R=require("react/jsx-runtime"),c=require("react"),P=require("./formContext-bTWrqdEV.cjs"),j=require("./translations-CXEeeUDL.cjs"),V=require("./Tabs-BZcMnjdC.cjs"),S=require("./ConfigProvider-ByOFXVyP.cjs"),z="_fields_aawaf_4",D={fields:z},J=c.forwardRef(function({children:x,locales:F,namespace:N,value:b,defaultValue:w,onChange:d,icon:A="Global",variant:K,size:O,"aria-label":W="Translations",className:k,style:C},a){var q;const E=S.useLocales(),i=F??E,_=S.useTranslationsNamespace(),y=N??_,t=P.useFormContext(),T=b!==void 0,[I,L]=c.useState(w),l=(T?b:I)??((q=i[0])==null?void 0:q.code)??"",p=e=>{T||L(e),d==null||d(e)},u=e=>j.buildTranslationName(e,"",y),B=e=>!!t&&Object.keys(t.errors).some(s=>s.startsWith(u(e))&&(t.isSubmitted||t.touched[s]===!0)),v=c.useRef(null),G=e=>{v.current=e,typeof a=="function"?a(e):a&&(a.current=e)},h=c.useRef(0),f=c.useRef(null);if(c.useEffect(()=>{const e=(t==null?void 0:t.submitCount)??0;if(!t||e===h.current)return;h.current=e;const s=Object.keys(t.errors);if(s.length===0)return;const r=o=>i.some(m=>o.startsWith(u(m.code)));if(!s.every(r)||s.some(o=>o.startsWith(u(l))))return;const n=i.find(o=>s.some(m=>m.startsWith(u(o.code))));n&&n.code!==l&&(f.current=n.code,p(n.code))},[t==null?void 0:t.submitCount]),c.useEffect(()=>{var n;if(f.current==null||f.current!==l)return;f.current=null;const e=v.current;if(!e||!t)return;const s=new Set(Object.keys(t.errors)),r=Array.from(e.querySelectorAll("[name]")).find(o=>s.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})},[l]),i.length===0)return null;const H=i.map(e=>({value:e.code,label:e.label??e.code,icon:A,error:B(e.code),content:R.jsx("div",{className:D.fields,children:x(s=>j.buildTranslationName(e.code,s,y),e.code)},e.code)}));return R.jsx(V.Tabs,{ref:G,className:k,style:C,items:H,value:l,onChange:p,variant:K,size:O,queryKey:null,"aria-label":W})});exports.TranslatedFields=J;
+//# sourceMappingURL=TranslatedFields-DT3bYse6.cjs.map

package/dist/TranslatedFields-DT3bYse6.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TranslatedFields-DT3bYse6.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, useTranslationsNamespace, type LocaleConfig } from '../../theme'\nimport { buildTranslationName } from '../../helpers/translations'\nimport type { IconName } from '../../icons/names'\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  /** Icon shown on each locale tab. 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 `'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'`). 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      icon = 'Global',\n      variant,\n      size,\n      'aria-label': ariaLabel = 'Translations',\n      className,\n      style,\n    },\n    ref,\n  ) {\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      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","icon","variant","size","ariaLabel","className","style","ref","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","jsx","styles","field","Tabs"],"mappings":"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"}

package/dist/Typography-BFatE1_A.cjs

@@ -0,0 +1,2 @@
+"use strict";const l=require("react/jsx-runtime"),m=require("react"),i=require("clsx"),d="_typography_utbym_2",f="_h1_utbym_10",g="_h2_utbym_15",x="_h3_utbym_20",v="_h4_utbym_25",S="_subtitle_utbym_30",q="_body_utbym_34",z="_bodySmall_utbym_38",C="_caption_utbym_42",T="_uppercase_utbym_46",j="_truncate_utbym_53",o={typography:d,h1:f,h2:g,h3:x,h4:v,subtitle:S,body:q,bodySmall:z,caption:C,uppercase:T,truncate:j},R={h1:"h1",h2:"h2",h3:"h3",h4:"h4",subtitle:"h6",body:"p",bodySmall:"p",caption:"span",uppercase:"span"};function w(t){if(t)return t==="text"?"var(--tz-color-text)":t==="muted"?"var(--tz-color-primary-shade600)":`var(--tz-color-${t})`}const A=m.forwardRef(function({variant:e="body",as:n,color:c,align:r,truncate:y=!1,className:u,style:a,children:_,...p},h){const b=n??R[e],s=w(c);return l.jsx(b,{ref:h,className:i.clsx(o.typography,o[e],y&&o.truncate,u),style:{...s&&{color:s},...r&&{textAlign:r},...a},...p,children:_})});exports.Typography=A;
+//# sourceMappingURL=Typography-BFatE1_A.cjs.map

package/dist/Typography-BFatE1_A.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Typography-BFatE1_A.cjs","sources":["../src/components/Typography/Typography.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type CSSProperties,\n  type ElementType,\n  type HTMLAttributes,\n  type ReactNode,\n} from 'react'\nimport { clsx } from 'clsx'\nimport type { ThemeColor } from '../../theme'\nimport styles from './Typography.module.css'\n\nexport type TypographyVariant =\n  | 'h1'\n  | 'h2'\n  | 'h3'\n  | 'h4'\n  | 'subtitle'\n  | 'body'\n  | 'bodySmall'\n  | 'caption'\n  | 'uppercase'\n\nexport type TypographyAlign = 'left' | 'center' | 'right' | 'justify'\n\n/**\n * Text color: a theme palette token, the semantic `text` role, or `muted` (a soft primary shade for\n * secondary text). Omit to inherit the surrounding color.\n */\nexport type TypographyColor = ThemeColor | 'text' | 'muted'\n\n/** Default HTML element rendered for each variant. Override with the `as` prop. */\nconst variantElement: Record<TypographyVariant, ElementType> = {\n  h1: 'h1',\n  h2: 'h2',\n  h3: 'h3',\n  h4: 'h4',\n  subtitle: 'h6',\n  body: 'p',\n  bodySmall: 'p',\n  caption: 'span',\n  uppercase: 'span',\n}\n\nfunction resolveColor(color?: TypographyColor): string | undefined {\n  if (!color) return undefined\n  if (color === 'text') return 'var(--tz-color-text)'\n  if (color === 'muted') return 'var(--tz-color-primary-shade600)'\n  return `var(--tz-color-${color})`\n}\n\nexport interface TypographyProps extends Omit<HTMLAttributes<HTMLElement>, 'color'> {\n  /** Type scale + default element. `h1`–`h4` headings · `subtitle` · `body` (default) · `bodySmall` · `caption` · `uppercase`. */\n  variant?: TypographyVariant\n  /** Render a different HTML element (or component) than the variant's default — keeps the styling, changes the tag. */\n  as?: ElementType\n  /** Text color. Omit to inherit the surrounding color. */\n  color?: TypographyColor\n  /** Horizontal text alignment. */\n  align?: TypographyAlign\n  /** Clamp to a single line, hiding overflow with an ellipsis. */\n  truncate?: boolean\n  children?: ReactNode\n}\n\n/**\n * Text primitive for the design system. Each `variant` maps to a sensible HTML\n * element and a font size from the `--tz-font-size-*` scale; override the tag\n * with `as` when the semantics differ from the look. Default browser margins are\n * removed. Without a `color` it inherits the surrounding text color, mirroring\n * `Icon` and `Loader`.\n */\nexport const Typography = forwardRef<HTMLElement, TypographyProps>(function Typography(\n  { variant = 'body', as, color, align, truncate = false, className, style, children, ...props },\n  ref,\n) {\n  const Component = (as ?? variantElement[variant]) as ElementType\n  const resolvedColor = resolveColor(color)\n\n  return (\n    <Component\n      ref={ref}\n      className={clsx(styles.typography, styles[variant], truncate && styles.truncate, className)}\n      style={\n        {\n          ...(resolvedColor && { color: resolvedColor }),\n          ...(align && { textAlign: align }),\n          ...style,\n        } as CSSProperties\n      }\n      {...props}\n    >\n      {children}\n    </Component>\n  )\n})\n"],"names":["variantElement","resolveColor","color","Typography","forwardRef","variant","as","align","truncate","className","style","children","props","ref","Component","resolvedColor","jsx","clsx","styles"],"mappings":"8ZA+BMA,EAAyD,CAC7D,GAAI,KACJ,GAAI,KACJ,GAAI,KACJ,GAAI,KACJ,SAAU,KACV,KAAM,IACN,UAAW,IACX,QAAS,OACT,UAAW,MACb,EAEA,SAASC,EAAaC,EAA6C,CACjE,GAAKA,EACL,OAAIA,IAAU,OAAe,uBACzBA,IAAU,QAAgB,mCACvB,kBAAkBA,CAAK,GAChC,CAuBO,MAAMC,EAAaC,EAAAA,WAAyC,SACjE,CAAE,QAAAC,EAAU,OAAQ,GAAAC,EAAI,MAAAJ,EAAO,MAAAK,EAAO,SAAAC,EAAW,GAAO,UAAAC,EAAW,MAAAC,EAAO,SAAAC,EAAU,GAAGC,CAAA,EACvFC,EACA,CACA,MAAMC,EAAaR,GAAMN,EAAeK,CAAO,EACzCU,EAAgBd,EAAaC,CAAK,EAExC,OACEc,EAAAA,IAACF,EAAA,CACC,IAAAD,EACA,UAAWI,EAAAA,KAAKC,EAAO,WAAYA,EAAOb,CAAO,EAAGG,GAAYU,EAAO,SAAUT,CAAS,EAC1F,MACE,CACE,GAAIM,GAAiB,CAAE,MAAOA,CAAA,EAC9B,GAAIR,GAAS,CAAE,UAAWA,CAAA,EAC1B,GAAGG,CAAA,EAGN,GAAGE,EAEH,SAAAD,CAAA,CAAA,CAGP,CAAC"}

package/dist/Typography-Cta6Rg4L.js

@@ -0,0 +1,51 @@
+import { jsx as b } from "react/jsx-runtime";
+import { forwardRef as l } from "react";
+import { clsx as i } from "clsx";
+const d = "_typography_utbym_2", f = "_h1_utbym_10", g = "_h2_utbym_15", v = "_h3_utbym_20", x = "_h4_utbym_25", S = "_subtitle_utbym_30", z = "_body_utbym_34", C = "_bodySmall_utbym_38", T = "_caption_utbym_42", j = "_uppercase_utbym_46", w = "_truncate_utbym_53", o = {
+  typography: d,
+  h1: f,
+  h2: g,
+  h3: v,
+  h4: x,
+  subtitle: S,
+  body: z,
+  bodySmall: C,
+  caption: T,
+  uppercase: j,
+  truncate: w
+}, A = {
+  h1: "h1",
+  h2: "h2",
+  h3: "h3",
+  h4: "h4",
+  subtitle: "h6",
+  body: "p",
+  bodySmall: "p",
+  caption: "span",
+  uppercase: "span"
+};
+function E(t) {
+  if (t)
+    return t === "text" ? "var(--tz-color-text)" : t === "muted" ? "var(--tz-color-primary-shade600)" : `var(--tz-color-${t})`;
+}
+const k = l(function({ variant: r = "body", as: s, color: y, align: e, truncate: p = !1, className: a, style: c, children: _, ...u }, h) {
+  const m = s ?? A[r], n = E(y);
+  return /* @__PURE__ */ b(
+    m,
+    {
+      ref: h,
+      className: i(o.typography, o[r], p && o.truncate, a),
+      style: {
+        ...n && { color: n },
+        ...e && { textAlign: e },
+        ...c
+      },
+      ...u,
+      children: _
+    }
+  );
+});
+export {
+  k as T
+};
+//# sourceMappingURL=Typography-Cta6Rg4L.js.map

package/dist/Typography-Cta6Rg4L.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Typography-Cta6Rg4L.js","sources":["../src/components/Typography/Typography.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type CSSProperties,\n  type ElementType,\n  type HTMLAttributes,\n  type ReactNode,\n} from 'react'\nimport { clsx } from 'clsx'\nimport type { ThemeColor } from '../../theme'\nimport styles from './Typography.module.css'\n\nexport type TypographyVariant =\n  | 'h1'\n  | 'h2'\n  | 'h3'\n  | 'h4'\n  | 'subtitle'\n  | 'body'\n  | 'bodySmall'\n  | 'caption'\n  | 'uppercase'\n\nexport type TypographyAlign = 'left' | 'center' | 'right' | 'justify'\n\n/**\n * Text color: a theme palette token, the semantic `text` role, or `muted` (a soft primary shade for\n * secondary text). Omit to inherit the surrounding color.\n */\nexport type TypographyColor = ThemeColor | 'text' | 'muted'\n\n/** Default HTML element rendered for each variant. Override with the `as` prop. */\nconst variantElement: Record<TypographyVariant, ElementType> = {\n  h1: 'h1',\n  h2: 'h2',\n  h3: 'h3',\n  h4: 'h4',\n  subtitle: 'h6',\n  body: 'p',\n  bodySmall: 'p',\n  caption: 'span',\n  uppercase: 'span',\n}\n\nfunction resolveColor(color?: TypographyColor): string | undefined {\n  if (!color) return undefined\n  if (color === 'text') return 'var(--tz-color-text)'\n  if (color === 'muted') return 'var(--tz-color-primary-shade600)'\n  return `var(--tz-color-${color})`\n}\n\nexport interface TypographyProps extends Omit<HTMLAttributes<HTMLElement>, 'color'> {\n  /** Type scale + default element. `h1`–`h4` headings · `subtitle` · `body` (default) · `bodySmall` · `caption` · `uppercase`. */\n  variant?: TypographyVariant\n  /** Render a different HTML element (or component) than the variant's default — keeps the styling, changes the tag. */\n  as?: ElementType\n  /** Text color. Omit to inherit the surrounding color. */\n  color?: TypographyColor\n  /** Horizontal text alignment. */\n  align?: TypographyAlign\n  /** Clamp to a single line, hiding overflow with an ellipsis. */\n  truncate?: boolean\n  children?: ReactNode\n}\n\n/**\n * Text primitive for the design system. Each `variant` maps to a sensible HTML\n * element and a font size from the `--tz-font-size-*` scale; override the tag\n * with `as` when the semantics differ from the look. Default browser margins are\n * removed. Without a `color` it inherits the surrounding text color, mirroring\n * `Icon` and `Loader`.\n */\nexport const Typography = forwardRef<HTMLElement, TypographyProps>(function Typography(\n  { variant = 'body', as, color, align, truncate = false, className, style, children, ...props },\n  ref,\n) {\n  const Component = (as ?? variantElement[variant]) as ElementType\n  const resolvedColor = resolveColor(color)\n\n  return (\n    <Component\n      ref={ref}\n      className={clsx(styles.typography, styles[variant], truncate && styles.truncate, className)}\n      style={\n        {\n          ...(resolvedColor && { color: resolvedColor }),\n          ...(align && { textAlign: align }),\n          ...style,\n        } as CSSProperties\n      }\n      {...props}\n    >\n      {children}\n    </Component>\n  )\n})\n"],"names":["variantElement","resolveColor","color","Typography","forwardRef","variant","as","align","truncate","className","style","children","props","ref","Component","resolvedColor","jsx","clsx","styles"],"mappings":";;;;;;;;;;;;;;;GA+BMA,IAAyD;AAAA,EAC7D,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,UAAU;AAAA,EACV,MAAM;AAAA,EACN,WAAW;AAAA,EACX,SAAS;AAAA,EACT,WAAW;AACb;AAEA,SAASC,EAAaC,GAA6C;AACjE,MAAKA;AACL,WAAIA,MAAU,SAAe,yBACzBA,MAAU,UAAgB,qCACvB,kBAAkBA,CAAK;AAChC;AAuBO,MAAMC,IAAaC,EAAyC,SACjE,EAAE,SAAAC,IAAU,QAAQ,IAAAC,GAAI,OAAAJ,GAAO,OAAAK,GAAO,UAAAC,IAAW,IAAO,WAAAC,GAAW,OAAAC,GAAO,UAAAC,GAAU,GAAGC,EAAA,GACvFC,GACA;AACA,QAAMC,IAAaR,KAAMN,EAAeK,CAAO,GACzCU,IAAgBd,EAAaC,CAAK;AAExC,SACE,gBAAAc;AAAA,IAACF;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,WAAWI,EAAKC,EAAO,YAAYA,EAAOb,CAAO,GAAGG,KAAYU,EAAO,UAAUT,CAAS;AAAA,MAC1F,OACE;AAAA,QACE,GAAIM,KAAiB,EAAE,OAAOA,EAAA;AAAA,QAC9B,GAAIR,KAAS,EAAE,WAAWA,EAAA;AAAA,QAC1B,GAAGG;AAAA,MAAA;AAAA,MAGN,GAAGE;AAAA,MAEH,UAAAD;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

package/dist/UserCard-BhqtX1vU.js

@@ -0,0 +1,74 @@
+import { jsxs as c, jsx as r } from "react/jsx-runtime";
+import { forwardRef as x } from "react";
+import { clsx as j } from "clsx";
+import { A as C } from "./Avatar-BJVCdo-K.js";
+import { B as U } from "./Button-DhEv0YFk.js";
+import { I } from "./Icon-CophpkHo.js";
+import { T as a } from "./Typography-Cta6Rg4L.js";
+import { a as N } from "./ConfigProvider-2c94kUOk.js";
+const S = "_card_ntjc1_3", T = "_identity_ntjc1_16", b = "_text_ntjc1_20", A = "_sm_ntjc1_33", B = "_lg_ntjc1_37", n = {
+  card: S,
+  identity: T,
+  text: b,
+  sm: A,
+  lg: B
+}, F = x(function({
+  name: t,
+  email: s,
+  avatar: l,
+  icon: e = "User",
+  color: d = "primary",
+  size: o = "md",
+  onLogout: i,
+  logoutLabel: m,
+  children: u,
+  className: _,
+  style: f,
+  ...p
+}, v) {
+  const y = N(), g = o === "lg" ? "lg" : o === "sm" ? "sm" : "md", h = o === "lg" ? "md" : "sm";
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      ref: v,
+      className: j(n.card, n[o], _),
+      style: f,
+      ...p,
+      children: [
+        /* @__PURE__ */ c("div", { className: n.identity, children: [
+          /* @__PURE__ */ r(
+            C,
+            {
+              size: g,
+              name: t,
+              src: l,
+              icon: t ? void 0 : e,
+              color: d
+            }
+          ),
+          (t != null || s != null) && /* @__PURE__ */ c("div", { className: n.text, children: [
+            t != null && /* @__PURE__ */ r(a, { variant: "bodySmall", truncate: !0, children: t }),
+            s != null && /* @__PURE__ */ r(a, { variant: "caption", color: "muted", truncate: !0, children: s })
+          ] })
+        ] }),
+        u,
+        i ? /* @__PURE__ */ r(
+          U,
+          {
+            variant: "filled",
+            color: "error",
+            size: h,
+            fullWidth: !0,
+            startIcon: /* @__PURE__ */ r(I, { name: "Logout2" }),
+            onClick: i,
+            children: m ?? y("userCard.signOut")
+          }
+        ) : null
+      ]
+    }
+  );
+});
+export {
+  F as U
+};
+//# sourceMappingURL=UserCard-BhqtX1vU.js.map

package/dist/UserCard-BhqtX1vU.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserCard-BhqtX1vU.js","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 { 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  /** Display name — the primary line, and the source of the avatar initials. */\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 + fonts + button). 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}\n\n/**\n * A compact account card — an `Avatar` + name/email and an optional **Sign out** button. Drop it into\n * the `RootLayout` `sidebarFooter` (or anywhere) for a consistent signed-in-user block across apps,\n * instead of hand-rolling the markup each time. 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 + type; `color` (default `primary`)\n * tints the avatar. 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    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      {...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        />\n        {(name != null || email != null) && (\n          <div className={styles.text}>\n            {name != null && (\n              <Typography variant=\"bodySmall\" truncate>\n                {name}\n              </Typography>\n            )}\n            {email != null && (\n              <Typography variant=\"caption\" color=\"muted\" truncate>\n                {email}\n              </Typography>\n            )}\n          </div>\n        )}\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","className","style","props","ref","t","useT","avatarSize","buttonSize","jsxs","clsx","styles","jsx","Avatar","Typography","Button","Icon"],"mappings":";;;;;;;;;;;;;;GAyCaA,IAAWC,EAA0C,SAChE;AAAA,EACE,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,MAAAC,IAAO;AAAA,EACP,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAIC,EAAA,GAEJC,IAAaV,MAAS,OAAO,OAAOA,MAAS,OAAO,OAAO,MAC3DW,IAAaX,MAAS,OAAO,OAAO;AAE1C,SACE,gBAAAY;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAL;AAAA,MACA,WAAWM,EAAKC,EAAO,MAAMA,EAAOd,CAAI,GAAGI,CAAS;AAAA,MACpD,OAAAC;AAAA,MACC,GAAGC;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAM,EAAC,OAAA,EAAI,WAAWE,EAAO,UAGrB,UAAA;AAAA,UAAA,gBAAAC;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,MAAMN;AAAA,cACN,MAAAf;AAAA,cACA,KAAKE;AAAA,cACL,MAAMF,IAAO,SAAYG;AAAA,cACzB,OAAAC;AAAA,YAAA;AAAA,UAAA;AAAA,WAEAJ,KAAQ,QAAQC,KAAS,2BACxB,OAAA,EAAI,WAAWkB,EAAO,MACpB,UAAA;AAAA,YAAAnB,KAAQ,QACP,gBAAAoB,EAACE,GAAA,EAAW,SAAQ,aAAY,UAAQ,IACrC,UAAAtB,EAAA,CACH;AAAA,YAEDC,KAAS,QACR,gBAAAmB,EAACE,GAAA,EAAW,SAAQ,WAAU,OAAM,SAAQ,UAAQ,IACjD,UAAArB,EAAA,CACH;AAAA,UAAA,EAAA,CAEJ;AAAA,QAAA,GAEJ;AAAA,QAECO;AAAA,QAEAF,IACC,gBAAAc;AAAA,UAACG;AAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,OAAM;AAAA,YACN,MAAMP;AAAA,YACN,WAAS;AAAA,YACT,WAAW,gBAAAI,EAACI,GAAA,EAAK,MAAK,UAAA,CAAU;AAAA,YAChC,SAASlB;AAAA,YAER,UAAAC,KAAeM,EAAE,kBAAkB;AAAA,UAAA;AAAA,QAAA,IAEpC;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;"}

package/dist/UserCard-OlLeyyS0.cjs

@@ -0,0 +1,2 @@
+"use strict";const t=require("react/jsx-runtime"),h=require("react"),p=require("clsx"),q=require("./Avatar-_ufXh3AY.cjs"),f=require("./Button-D4bfVNNa.cjs"),C=require("./Icon-CXTl_QAP.cjs"),i=require("./Typography-BFatE1_A.cjs"),T=require("./ConfigProvider-ByOFXVyP.cjs"),U="_card_ntjc1_3",I="_identity_ntjc1_16",N="_text_ntjc1_20",S="_sm_ntjc1_33",b="_lg_ntjc1_37",n={card:U,identity:I,text:N,sm:S,lg:b},A=h.forwardRef(function({name:r,email:c,avatar:o,icon:l="User",color:a="primary",size:s="md",onLogout:e,logoutLabel:d,children:u,className:x,style:_,...j},y){const g=T.useT(),m=s==="lg"?"lg":s==="sm"?"sm":"md",v=s==="lg"?"md":"sm";return t.jsxs("div",{ref:y,className:p.clsx(n.card,n[s],x),style:_,...j,children:[t.jsxs("div",{className:n.identity,children:[t.jsx(q.Avatar,{size:m,name:r,src:o,icon:r?void 0:l,color:a}),(r!=null||c!=null)&&t.jsxs("div",{className:n.text,children:[r!=null&&t.jsx(i.Typography,{variant:"bodySmall",truncate:!0,children:r}),c!=null&&t.jsx(i.Typography,{variant:"caption",color:"muted",truncate:!0,children:c})]})]}),u,e?t.jsx(f.Button,{variant:"filled",color:"error",size:v,fullWidth:!0,startIcon:t.jsx(C.Icon,{name:"Logout2"}),onClick:e,children:d??g("userCard.signOut")}):null]})});exports.UserCard=A;
+//# sourceMappingURL=UserCard-OlLeyyS0.cjs.map

package/dist/UserCard-OlLeyyS0.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserCard-OlLeyyS0.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 { 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  /** Display name — the primary line, and the source of the avatar initials. */\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 + fonts + button). 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}\n\n/**\n * A compact account card — an `Avatar` + name/email and an optional **Sign out** button. Drop it into\n * the `RootLayout` `sidebarFooter` (or anywhere) for a consistent signed-in-user block across apps,\n * instead of hand-rolling the markup each time. 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 + type; `color` (default `primary`)\n * tints the avatar. 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    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      {...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        />\n        {(name != null || email != null) && (\n          <div className={styles.text}>\n            {name != null && (\n              <Typography variant=\"bodySmall\" truncate>\n                {name}\n              </Typography>\n            )}\n            {email != null && (\n              <Typography variant=\"caption\" color=\"muted\" truncate>\n                {email}\n              </Typography>\n            )}\n          </div>\n        )}\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","className","style","props","ref","t","useT","avatarSize","buttonSize","jsxs","clsx","styles","jsx","Avatar","Typography","Button","Icon"],"mappings":"qZAyCaA,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,UAAAC,EACA,MAAAC,EACA,GAAGC,CACL,EACAC,EACA,CACA,MAAMC,EAAIC,EAAAA,KAAA,EAEJC,EAAaV,IAAS,KAAO,KAAOA,IAAS,KAAO,KAAO,KAC3DW,EAAaX,IAAS,KAAO,KAAO,KAE1C,OACEY,EAAAA,KAAC,MAAA,CACC,IAAAL,EACA,UAAWM,EAAAA,KAAKC,EAAO,KAAMA,EAAOd,CAAI,EAAGI,CAAS,EACpD,MAAAC,EACC,GAAGC,EAEJ,SAAA,CAAAM,EAAAA,KAAC,MAAA,CAAI,UAAWE,EAAO,SAGrB,SAAA,CAAAC,EAAAA,IAACC,EAAAA,OAAA,CACC,KAAMN,EACN,KAAAf,EACA,IAAKE,EACL,KAAMF,EAAO,OAAYG,EACzB,MAAAC,CAAA,CAAA,GAEAJ,GAAQ,MAAQC,GAAS,cACxB,MAAA,CAAI,UAAWkB,EAAO,KACpB,SAAA,CAAAnB,GAAQ,MACPoB,MAACE,EAAAA,WAAA,CAAW,QAAQ,YAAY,SAAQ,GACrC,SAAAtB,CAAA,CACH,EAEDC,GAAS,MACRmB,EAAAA,IAACE,EAAAA,WAAA,CAAW,QAAQ,UAAU,MAAM,QAAQ,SAAQ,GACjD,SAAArB,CAAA,CACH,CAAA,CAAA,CAEJ,CAAA,EAEJ,EAECO,EAEAF,EACCc,EAAAA,IAACG,EAAAA,OAAA,CACC,QAAQ,SACR,MAAM,QACN,KAAMP,EACN,UAAS,GACT,UAAWI,EAAAA,IAACI,EAAAA,KAAA,CAAK,KAAK,SAAA,CAAU,EAChC,QAASlB,EAER,SAAAC,GAAeM,EAAE,kBAAkB,CAAA,CAAA,EAEpC,IAAA,CAAA,CAAA,CAGV,CAAC"}

package/dist/access-DPUHbE-S.cjs

@@ -0,0 +1,2 @@
+"use strict";const r=require("react");let n=[];const c=new Set;function u(e){n=e??[],c.forEach(s=>s())}function t(){return n}function i(e){return!e||e.length===0?!0:e.some(s=>n.includes(s))}const o=e=>(c.add(e),()=>{c.delete(e)});function y(){return r.useSyncExternalStore(o,t,t)}exports.getAccessKeys=t;exports.hasAccess=i;exports.setAccessKeys=u;exports.useAccessKeys=y;
+//# sourceMappingURL=access-DPUHbE-S.cjs.map

package/dist/access-DPUHbE-S.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"access-DPUHbE-S.cjs","sources":["../src/helpers/access.ts"],"sourcesContent":["import { useSyncExternalStore } from 'react'\n\n// Module singleton — readable BOTH from React components (via `useAccessKeys`) and from\n// TanStack `beforeLoad` guards (via `hasAccess`), which run outside React.\nlet keys: string[] = []\nconst listeners = new Set<() => void>()\n\n/** Set the current user's accessKeys (call after login / getUser; pass `[]` on logout). */\nexport function setAccessKeys(next: string[]) {\n  keys = next ?? []\n  listeners.forEach((l) => l())\n}\n\n/** The current user's accessKeys (non-reactive read; safe outside React). */\nexport function getAccessKeys() {\n  return keys\n}\n\n/**\n * OR semantics: a route with no `roles` (omitted/empty) is public; otherwise the user needs at\n * least one matching key. Works outside React — used by route `beforeLoad` guards.\n */\nexport function hasAccess(roles?: string[]) {\n  if (!roles || roles.length === 0) return true\n  return roles.some((r) => keys.includes(r))\n}\n\n// hoisted so its identity is stable across renders — an inline arrow would make\n// useSyncExternalStore unsubscribe+resubscribe on every render of every consumer\nconst subscribe = (cb: () => void) => {\n  listeners.add(cb)\n  return () => {\n    listeners.delete(cb)\n  }\n}\n\n/** Reactive read for components — re-renders the subscriber when the keys change (login/logout). */\nexport function useAccessKeys() {\n  return useSyncExternalStore(subscribe, getAccessKeys, getAccessKeys)\n}\n"],"names":["keys","listeners","setAccessKeys","next","l","getAccessKeys","hasAccess","roles","r","subscribe","cb","useAccessKeys","useSyncExternalStore"],"mappings":"sCAIA,IAAIA,EAAiB,CAAA,EACrB,MAAMC,MAAgB,IAGf,SAASC,EAAcC,EAAgB,CAC5CH,EAAOG,GAAQ,CAAA,EACfF,EAAU,QAASG,GAAMA,EAAA,CAAG,CAC9B,CAGO,SAASC,GAAgB,CAC9B,OAAOL,CACT,CAMO,SAASM,EAAUC,EAAkB,CAC1C,MAAI,CAACA,GAASA,EAAM,SAAW,EAAU,GAClCA,EAAM,KAAMC,GAAMR,EAAK,SAASQ,CAAC,CAAC,CAC3C,CAIA,MAAMC,EAAaC,IACjBT,EAAU,IAAIS,CAAE,EACT,IAAM,CACXT,EAAU,OAAOS,CAAE,CACrB,GAIK,SAASC,GAAgB,CAC9B,OAAOC,uBAAqBH,EAAWJ,EAAeA,CAAa,CACrE"}

package/dist/access-Db4knwyR.js

@@ -0,0 +1,25 @@
+import { useSyncExternalStore as r } from "react";
+let n = [];
+const t = /* @__PURE__ */ new Set();
+function i(e) {
+  n = e ?? [], t.forEach((s) => s());
+}
+function c() {
+  return n;
+}
+function a(e) {
+  return !e || e.length === 0 ? !0 : e.some((s) => n.includes(s));
+}
+const u = (e) => (t.add(e), () => {
+  t.delete(e);
+});
+function f() {
+  return r(u, c, c);
+}
+export {
+  c as g,
+  a as h,
+  i as s,
+  f as u
+};
+//# sourceMappingURL=access-Db4knwyR.js.map

package/dist/access-Db4knwyR.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"access-Db4knwyR.js","sources":["../src/helpers/access.ts"],"sourcesContent":["import { useSyncExternalStore } from 'react'\n\n// Module singleton — readable BOTH from React components (via `useAccessKeys`) and from\n// TanStack `beforeLoad` guards (via `hasAccess`), which run outside React.\nlet keys: string[] = []\nconst listeners = new Set<() => void>()\n\n/** Set the current user's accessKeys (call after login / getUser; pass `[]` on logout). */\nexport function setAccessKeys(next: string[]) {\n  keys = next ?? []\n  listeners.forEach((l) => l())\n}\n\n/** The current user's accessKeys (non-reactive read; safe outside React). */\nexport function getAccessKeys() {\n  return keys\n}\n\n/**\n * OR semantics: a route with no `roles` (omitted/empty) is public; otherwise the user needs at\n * least one matching key. Works outside React — used by route `beforeLoad` guards.\n */\nexport function hasAccess(roles?: string[]) {\n  if (!roles || roles.length === 0) return true\n  return roles.some((r) => keys.includes(r))\n}\n\n// hoisted so its identity is stable across renders — an inline arrow would make\n// useSyncExternalStore unsubscribe+resubscribe on every render of every consumer\nconst subscribe = (cb: () => void) => {\n  listeners.add(cb)\n  return () => {\n    listeners.delete(cb)\n  }\n}\n\n/** Reactive read for components — re-renders the subscriber when the keys change (login/logout). */\nexport function useAccessKeys() {\n  return useSyncExternalStore(subscribe, getAccessKeys, getAccessKeys)\n}\n"],"names":["keys","listeners","setAccessKeys","next","l","getAccessKeys","hasAccess","roles","r","subscribe","cb","useAccessKeys","useSyncExternalStore"],"mappings":";AAIA,IAAIA,IAAiB,CAAA;AACrB,MAAMC,wBAAgB,IAAA;AAGf,SAASC,EAAcC,GAAgB;AAC5C,EAAAH,IAAOG,KAAQ,CAAA,GACfF,EAAU,QAAQ,CAACG,MAAMA,EAAA,CAAG;AAC9B;AAGO,SAASC,IAAgB;AAC9B,SAAOL;AACT;AAMO,SAASM,EAAUC,GAAkB;AAC1C,SAAI,CAACA,KAASA,EAAM,WAAW,IAAU,KAClCA,EAAM,KAAK,CAACC,MAAMR,EAAK,SAASQ,CAAC,CAAC;AAC3C;AAIA,MAAMC,IAAY,CAACC,OACjBT,EAAU,IAAIS,CAAE,GACT,MAAM;AACX,EAAAT,EAAU,OAAOS,CAAE;AACrB;AAIK,SAASC,IAAgB;AAC9B,SAAOC,EAAqBH,GAAWJ,GAAeA,CAAa;AACrE;"}

package/dist/components/Accordion/Accordion.d.cts

@@ -0,0 +1,43 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import type { IconName } from '../../icons/names';
+export type AccordionSize = 'sm' | 'md' | 'lg';
+/** A data-driven panel for the `items` prop. */
+export interface AccordionItemData {
+    value: string;
+    label: ReactNode;
+    /** Leading header icon — a known `IconName` or any node. */
+    icon?: IconName | ReactNode;
+    /** Collapsible body content. */
+    content: ReactNode;
+    disabled?: boolean;
+}
+export interface AccordionProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
+    /**
+     * Single-open (`value` is a `string | null` — opening one closes the others) vs multi-open (`value`
+     * is a `string[]`). Defaults to `false` (multiple).
+     */
+    exclusive?: boolean;
+    /** Controlled open value — a `string | null` when `exclusive`, else a `string[]`. */
+    value?: string | string[] | null;
+    /** Initial open value for uncontrolled use (same shape as `value`). */
+    defaultValue?: string | string[] | null;
+    /** Fires with the next open value (matches the `exclusive` shape). */
+    onChange?: (value: string | string[] | null) => void;
+    /** Data-driven panels — an alternative to passing `<AccordionItem>` children. */
+    items?: AccordionItemData[];
+    /** Preset size for every panel header. Defaults to `md`. */
+    size?: AccordionSize;
+    /** Disables every panel in the accordion. */
+    disabled?: boolean;
+    /** `<AccordionItem>` children (used when `items` is not given). */
+    children?: ReactNode;
+}
+/**
+ * A set of collapsible panels (settings sections, FAQs, grouped forms). **`exclusive`** picks
+ * single-open (`value` is a `string | null`) vs multi-open (`value` is a `string[]`); both are
+ * controlled (`value` + `onChange`) or uncontrolled (`defaultValue`). Supply panels via the
+ * data-driven `items` prop or as `<AccordionItem>` children — the group shares the open state, `size`,
+ * and `disabled` via context, and each body folds with the shared `grid-template-rows` animation
+ * (like `Card`'s `collapsible`). Token-only styling.
+ */
+export declare const Accordion: import("react").ForwardRefExoticComponent<AccordionProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Accordion/Accordion.d.ts

@@ -0,0 +1,43 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import type { IconName } from '../../icons/names';
+export type AccordionSize = 'sm' | 'md' | 'lg';
+/** A data-driven panel for the `items` prop. */
+export interface AccordionItemData {
+    value: string;
+    label: ReactNode;
+    /** Leading header icon — a known `IconName` or any node. */
+    icon?: IconName | ReactNode;
+    /** Collapsible body content. */
+    content: ReactNode;
+    disabled?: boolean;
+}
+export interface AccordionProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
+    /**
+     * Single-open (`value` is a `string | null` — opening one closes the others) vs multi-open (`value`
+     * is a `string[]`). Defaults to `false` (multiple).
+     */
+    exclusive?: boolean;
+    /** Controlled open value — a `string | null` when `exclusive`, else a `string[]`. */
+    value?: string | string[] | null;
+    /** Initial open value for uncontrolled use (same shape as `value`). */
+    defaultValue?: string | string[] | null;
+    /** Fires with the next open value (matches the `exclusive` shape). */
+    onChange?: (value: string | string[] | null) => void;
+    /** Data-driven panels — an alternative to passing `<AccordionItem>` children. */
+    items?: AccordionItemData[];
+    /** Preset size for every panel header. Defaults to `md`. */
+    size?: AccordionSize;
+    /** Disables every panel in the accordion. */
+    disabled?: boolean;
+    /** `<AccordionItem>` children (used when `items` is not given). */
+    children?: ReactNode;
+}
+/**
+ * A set of collapsible panels (settings sections, FAQs, grouped forms). **`exclusive`** picks
+ * single-open (`value` is a `string | null`) vs multi-open (`value` is a `string[]`); both are
+ * controlled (`value` + `onChange`) or uncontrolled (`defaultValue`). Supply panels via the
+ * data-driven `items` prop or as `<AccordionItem>` children — the group shares the open state, `size`,
+ * and `disabled` via context, and each body folds with the shared `grid-template-rows` animation
+ * (like `Card`'s `collapsible`). Token-only styling.
+ */
+export declare const Accordion: import("react").ForwardRefExoticComponent<AccordionProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Accordion/AccordionItem.d.cts

@@ -0,0 +1,20 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type IconName } from '../../icons/names';
+export interface AccordionItemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** This item's identity within the `Accordion` (matched against the open value/values). */
+    value: string;
+    /** Header label. */
+    label: ReactNode;
+    /** Leading header icon — a known `IconName` or any node. */
+    icon?: IconName | ReactNode;
+    /** Disable this item (the group's `disabled` also applies). */
+    disabled?: boolean;
+    /** Collapsible body content. */
+    children?: ReactNode;
+}
+/**
+ * One collapsible panel inside an `<Accordion>` — a header (`label` + optional `icon` + a chevron that
+ * rotates) that toggles a smoothly-folding body (`grid-template-rows` animation). Reads the open state,
+ * size, and disabled flag from the surrounding `Accordion` via context.
+ */
+export declare const AccordionItem: import("react").ForwardRefExoticComponent<AccordionItemProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Accordion/AccordionItem.d.ts

@@ -0,0 +1,20 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type IconName } from '../../icons/names';
+export interface AccordionItemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** This item's identity within the `Accordion` (matched against the open value/values). */
+    value: string;
+    /** Header label. */
+    label: ReactNode;
+    /** Leading header icon — a known `IconName` or any node. */
+    icon?: IconName | ReactNode;
+    /** Disable this item (the group's `disabled` also applies). */
+    disabled?: boolean;
+    /** Collapsible body content. */
+    children?: ReactNode;
+}
+/**
+ * One collapsible panel inside an `<Accordion>` — a header (`label` + optional `icon` + a chevron that
+ * rotates) that toggles a smoothly-folding body (`grid-template-rows` animation). Reads the open state,
+ * size, and disabled flag from the surrounding `Accordion` via context.
+ */
+export declare const AccordionItem: import("react").ForwardRefExoticComponent<AccordionItemProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Accordion/accordionContext.d.cts

@@ -0,0 +1,13 @@
+import type { AccordionSize } from './Accordion';
+/** Shared state an `<Accordion>` hands down to its `<AccordionItem>`s via context. */
+export interface AccordionContextValue {
+    /** Whether a given item value is currently open. */
+    isOpen: (value: string) => boolean;
+    /** Toggle an item open/closed — called by a header on click. */
+    toggle: (value: string) => void;
+    size: AccordionSize;
+    disabled: boolean;
+}
+export declare const AccordionContext: import("react").Context<AccordionContextValue | null>;
+/** Read the surrounding `<Accordion>`. Throws if an `<AccordionItem>` is used outside one. */
+export declare function useAccordionContext(): AccordionContextValue;

package/dist/components/Accordion/accordionContext.d.ts

@@ -0,0 +1,13 @@
+import type { AccordionSize } from './Accordion';
+/** Shared state an `<Accordion>` hands down to its `<AccordionItem>`s via context. */
+export interface AccordionContextValue {
+    /** Whether a given item value is currently open. */
+    isOpen: (value: string) => boolean;
+    /** Toggle an item open/closed — called by a header on click. */
+    toggle: (value: string) => void;
+    size: AccordionSize;
+    disabled: boolean;
+}
+export declare const AccordionContext: import("react").Context<AccordionContextValue | null>;
+/** Read the surrounding `<Accordion>`. Throws if an `<AccordionItem>` is used outside one. */
+export declare function useAccordionContext(): AccordionContextValue;

package/dist/components/Accordion/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("../../Accordion-Dy_dM79Y.cjs");exports.Accordion=o.Accordion;exports.AccordionItem=o.AccordionItem;exports.default=o.Accordion;
+//# sourceMappingURL=index.cjs.map

package/dist/components/Accordion/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/Accordion/index.d.cts

@@ -0,0 +1,4 @@
+export { Accordion, Accordion as default } from './Accordion';
+export type { AccordionProps, AccordionSize, AccordionItemData } from './Accordion';
+export { AccordionItem } from './AccordionItem';
+export type { AccordionItemProps } from './AccordionItem';

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

@@ -0,0 +1,4 @@
+export { Accordion, Accordion as default } from './Accordion';
+export type { AccordionProps, AccordionSize, AccordionItemData } from './Accordion';
+export { AccordionItem } from './AccordionItem';
+export type { AccordionItemProps } from './AccordionItem';

package/dist/components/Accordion/index.js

@@ -0,0 +1,7 @@
+import { A as c, a as r, A } from "../../Accordion-CAxa1I-m.js";
+export {
+  c as Accordion,
+  r as AccordionItem,
+  A as default
+};
+//# sourceMappingURL=index.js.map

package/dist/components/Accordion/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/Alert/Alert.d.cts

@@ -0,0 +1,30 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type IconName } from '../../icons/names';
+import { type ThemeColor } from '../../theme';
+export type AlertVariant = 'contained' | 'filled' | 'outlined' | 'text';
+export interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color' | 'title'> {
+    /** Tint style. Defaults to `filled` (the soft tint). */
+    variant?: AlertVariant;
+    /** Brand / semantic palette token that tints the alert. Defaults to `info`. */
+    color?: ThemeColor;
+    /**
+     * Leading icon — a known `IconName`, any node, or `false` to hide it. Defaults to the semantic icon
+     * for `color` (success → `TickCircle`, error → `CloseCircle`, warning → `Warning`, info → `InfoCircle`).
+     */
+    icon?: IconName | ReactNode | false;
+    /** Trailing action (e.g. an `UNDO` button), placed before the close button. */
+    action?: ReactNode;
+    /** When provided, a trailing × close button appears that calls this. */
+    onClose?: () => void;
+    /** Accessible label for the close button. Defaults to `"Close"`. */
+    closeLabel?: string;
+    /** Alert message. */
+    children?: ReactNode;
+}
+/**
+ * A message banner — the library's inline feedback surface (info, success, warning, error). Tinted by
+ * `color` via the shared `--tz-btn-rgb` pattern across the 4 standard `variant`s; a semantic leading
+ * `icon` is auto-picked per color (override with `icon`, or `icon={false}` to drop it). An optional
+ * `action` slot (e.g. an `UNDO` button) and an `onClose` × button trail the message. `role="alert"`.
+ */
+export declare const Alert: import("react").ForwardRefExoticComponent<AlertProps & import("react").RefAttributes<HTMLDivElement>>;