@techzyapp/ui-library 1.0.25 → 1.0.28

package/dist/Card-6fiSEC0z.js

@@ -0,0 +1,121 @@
+import { jsx as o, jsxs as l } from "react/jsx-runtime";
+import { forwardRef as O, useState as F, useId as H } from "react";
+import { clsx as f } from "clsx";
+import { I as S } from "./Icon-DaTvzLBu.js";
+import { a as R } from "./names-r21QPjcU.js";
+import { S as U } from "./Skeleton-_-uGax2j.js";
+import { I as y } from "./IconButton-Dq17Fekm.js";
+const q = "_card_voi4g_3", G = "_flat_voi4g_14", J = "_header_voi4g_18", K = "_headerDivided_voi4g_27", L = "_headerMain_voi4g_31", P = "_icon_voi4g_39", Q = "_headerText_voi4g_43", V = "_title_voi4g_51", W = "_subtitle_voi4g_64", X = "_actions_voi4g_78", Y = "_chevron_voi4g_85", Z = "_collapsible_voi4g_93", $ = "_collapsed_voi4g_98", ee = "_collapsibleInner_voi4g_101", oe = "_foldable_voi4g_110", ae = "_body_voi4g_114", le = "_footer_voi4g_118", se = "_footerStart_voi4g_127", ne = "_footerEnd_voi4g_128", e = {
+  card: q,
+  flat: G,
+  header: J,
+  headerDivided: K,
+  headerMain: L,
+  icon: P,
+  headerText: Q,
+  title: V,
+  subtitle: W,
+  actions: X,
+  chevron: Y,
+  collapsible: Z,
+  collapsed: $,
+  collapsibleInner: ee,
+  foldable: oe,
+  body: ae,
+  footer: le,
+  footerStart: se,
+  footerEnd: ne
+}, te = new Set(R), me = O(function({
+  title: t,
+  subtitle: i,
+  icon: s,
+  color: E = "accent",
+  flat: M = !1,
+  actions: r,
+  footer: h,
+  footerStart: m,
+  collapsible: n = !1,
+  collapsed: u,
+  defaultCollapsed: D = !1,
+  onCollapsedChange: c,
+  loading: d = !1,
+  className: T,
+  children: _,
+  ...C
+}, k) {
+  const p = u !== void 0, [w, A] = F(D), a = n && (p ? u : w), N = H(), j = () => {
+    const x = !a;
+    p || A(x), c == null || c(x);
+  }, v = s == null ? null : typeof s == "string" && te.has(s) ? /* @__PURE__ */ o(S, { name: s }) : s, z = t != null || i != null || v != null || r != null || n, b = d || _ != null && _ !== "", g = h != null || m != null, I = b || g, B = I && !a;
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      ref: k,
+      className: f(e.card, M && e.flat, a && e.collapsed, T),
+      "aria-busy": d || void 0,
+      ...C,
+      children: [
+        z && /* @__PURE__ */ l("div", { className: f(e.header, B && e.headerDivided), children: [
+          /* @__PURE__ */ l("div", { className: e.headerMain, children: [
+            v != null && /* @__PURE__ */ o(
+              y,
+              {
+                variant: "filled",
+                size: "sm",
+                color: E,
+                nonClickable: !0,
+                "aria-hidden": !0,
+                className: e.icon,
+                children: v
+              }
+            ),
+            (t != null || i != null) && /* @__PURE__ */ l("div", { className: e.headerText, children: [
+              t != null && /* @__PURE__ */ o("div", { className: e.title, children: t }),
+              i != null && /* @__PURE__ */ o("div", { className: e.subtitle, children: i })
+            ] })
+          ] }),
+          (r != null || n) && /* @__PURE__ */ l("div", { className: e.actions, children: [
+            !a && r,
+            n && /* @__PURE__ */ o(
+              y,
+              {
+                variant: "text",
+                size: "sm",
+                "aria-label": a ? "Expand" : "Collapse",
+                "aria-expanded": !a,
+                "aria-controls": N,
+                onClick: j,
+                children: /* @__PURE__ */ o(
+                  S,
+                  {
+                    name: "ArrowUp3",
+                    className: e.chevron,
+                    "data-collapsed": a ? "true" : "false"
+                  }
+                )
+              }
+            )
+          ] })
+        ] }),
+        I && /* @__PURE__ */ o(
+          "div",
+          {
+            id: N,
+            className: f(e.collapsible, n && e.foldable),
+            children: /* @__PURE__ */ l("div", { className: e.collapsibleInner, children: [
+              b && /* @__PURE__ */ o("div", { className: e.body, children: d ? /* @__PURE__ */ o(U, { lines: 3 }) : _ }),
+              g && /* @__PURE__ */ l("div", { className: e.footer, children: [
+                /* @__PURE__ */ o("div", { className: e.footerStart, children: m }),
+                /* @__PURE__ */ o("div", { className: e.footerEnd, children: h })
+              ] })
+            ] })
+          }
+        )
+      ]
+    }
+  );
+});
+export {
+  me as C
+};
+//# sourceMappingURL=Card-6fiSEC0z.js.map

package/dist/Card-6fiSEC0z.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card-6fiSEC0z.js","sources":["../src/components/Card/Card.tsx"],"sourcesContent":["import { forwardRef, useId, useState, type HTMLAttributes, type ReactNode } from 'react'\nimport { clsx } from 'clsx'\nimport { Icon } from '../Icon'\nimport { Skeleton } from '../Skeleton'\nimport { IconButton } from '../IconButton'\nimport type { ThemeColor } from '../../theme'\nimport { ICON_NAMES, type IconName } from '../../icons/names'\nimport styles from './Card.module.css'\n\nconst ICON_NAME_SET = new Set<string>(ICON_NAMES)\n\nexport interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'color'> {\n  /** Header title (left, next to the icon). */\n  title?: ReactNode\n  /** Secondary muted line shown under the `title` (e.g. a short description). */\n  subtitle?: ReactNode\n  /** Leading header icon — a known `IconName` or any node. */\n  icon?: IconName | ReactNode\n  /** Theme color that tints the leading icon box. Defaults to `accent`. */\n  color?: ThemeColor\n  /** Marks the card flat (used by `PageLayout`). Cards are shadowless, so this currently adds no visual difference — it's a styling hook, not a distinct look. */\n  flat?: boolean\n  /** Header actions, placed at the end of the header row (before the collapse toggle). */\n  actions?: ReactNode\n  /** Footer content (e.g. actions), pinned to the **right** of the footer row. */\n  footer?: ReactNode\n  /** Footer content pinned to the **left** of the footer row (opposite `footer`). */\n  footerStart?: ReactNode\n  /** Adds a collapse/expand toggle to the header that folds the body + footer. */\n  collapsible?: boolean\n  /** Controlled collapsed state. */\n  collapsed?: boolean\n  /** Initial collapsed state for uncontrolled use. Defaults to `false`. */\n  defaultCollapsed?: boolean\n  /** Fires with the next collapsed state when the toggle is clicked. */\n  onCollapsedChange?: (collapsed: boolean) => void\n  /** Replace the body with skeleton lines while its data loads (header + footer stay). Defaults to `false`. */\n  loading?: boolean\n  /** Card body. */\n  children?: ReactNode\n}\n\n/**\n * A surface card with an optional header (icon + title + actions), a body, and a footer for actions.\n * `collapsible` adds a chevron that smoothly folds the body + footer (controlled via `collapsed`/\n * `onCollapsedChange`, or uncontrolled via `defaultCollapsed`). Token-only styling.\n */\nexport const Card = forwardRef<HTMLDivElement, CardProps>(function Card(\n  {\n    title,\n    subtitle,\n    icon,\n    color = 'accent',\n    flat = false,\n    actions,\n    footer,\n    footerStart,\n    collapsible = false,\n    collapsed,\n    defaultCollapsed = false,\n    onCollapsedChange,\n    loading = false,\n    className,\n    children,\n    ...props\n  },\n  ref,\n) {\n  const isControlled = collapsed !== undefined\n  const [internal, setInternal] = useState(defaultCollapsed)\n  const isCollapsed = collapsible && (isControlled ? collapsed! : internal)\n  const collapsibleId = useId() // ties the toggle to the fold region via aria-controls\n\n  const toggle = () => {\n    const next = !isCollapsed\n    if (!isControlled) setInternal(next)\n    onCollapsedChange?.(next)\n  }\n\n  const renderedIcon =\n    icon == null ? null : typeof icon === 'string' && ICON_NAME_SET.has(icon) ? (\n      <Icon name={icon as IconName} />\n    ) : (\n      icon\n    )\n\n  const hasHeader =\n    title != null || subtitle != null || renderedIcon != null || actions != null || collapsible\n  const hasBody = loading || (children != null && children !== '')\n  const hasFooter = footer != null || footerStart != null\n  const hasCollapsibleContent = hasBody || hasFooter\n  // The header is separated by a divider only while content is visible beneath it.\n  const headerDivided = hasCollapsibleContent && !isCollapsed\n\n  return (\n    <div\n      ref={ref}\n      className={clsx(styles.card, flat && styles.flat, isCollapsed && styles.collapsed, className)}\n      aria-busy={loading || undefined}\n      {...props}\n    >\n      {hasHeader && (\n        <div className={clsx(styles.header, headerDivided && styles.headerDivided)}>\n          <div className={styles.headerMain}>\n            {renderedIcon != null && (\n              <IconButton\n                variant=\"filled\"\n                size=\"sm\"\n                color={color}\n                nonClickable\n                aria-hidden\n                className={styles.icon}\n              >\n                {renderedIcon}\n              </IconButton>\n            )}\n            {(title != null || subtitle != null) && (\n              <div className={styles.headerText}>\n                {title != null && <div className={styles.title}>{title}</div>}\n                {subtitle != null && <div className={styles.subtitle}>{subtitle}</div>}\n              </div>\n            )}\n          </div>\n          {(actions != null || collapsible) && (\n            <div className={styles.actions}>\n              {!isCollapsed && actions}\n              {collapsible && (\n                <IconButton\n                  variant=\"text\"\n                  size=\"sm\"\n                  aria-label={isCollapsed ? 'Expand' : 'Collapse'}\n                  aria-expanded={!isCollapsed}\n                  aria-controls={collapsibleId}\n                  onClick={toggle}\n                >\n                  <Icon\n                    name=\"ArrowUp3\"\n                    className={styles.chevron}\n                    data-collapsed={isCollapsed ? 'true' : 'false'}\n                  />\n                </IconButton>\n              )}\n            </div>\n          )}\n        </div>\n      )}\n      {hasCollapsibleContent && (\n        <div\n          id={collapsibleId}\n          className={clsx(styles.collapsible, collapsible && styles.foldable)}\n        >\n          <div className={styles.collapsibleInner}>\n            {hasBody && (\n              <div className={styles.body}>{loading ? <Skeleton lines={3} /> : children}</div>\n            )}\n            {hasFooter && (\n              <div className={styles.footer}>\n                <div className={styles.footerStart}>{footerStart}</div>\n                <div className={styles.footerEnd}>{footer}</div>\n              </div>\n            )}\n          </div>\n        </div>\n      )}\n    </div>\n  )\n})\n"],"names":["ICON_NAME_SET","ICON_NAMES","Card","forwardRef","title","subtitle","icon","color","flat","actions","footer","footerStart","collapsible","collapsed","defaultCollapsed","onCollapsedChange","loading","className","children","props","ref","isControlled","internal","setInternal","useState","isCollapsed","collapsibleId","useId","toggle","next","renderedIcon","jsx","Icon","hasHeader","hasBody","hasFooter","hasCollapsibleContent","headerDivided","jsxs","clsx","styles","IconButton","Skeleton"],"mappings":"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"}

package/dist/Card-zTkvreQu.cjs

@@ -0,0 +1,2 @@
+"use strict";const s=require("react/jsx-runtime"),v=require("react"),h=require("clsx"),p=require("./Icon-BVULqOJD.cjs"),z=require("./names-BJnFU_5m.cjs"),O=require("./Skeleton-DK0lAjS9.cjs"),S=require("./IconButton-A2B0bqC-.cjs"),R="_card_voi4g_3",F="_flat_voi4g_14",H="_header_voi4g_18",U="_headerDivided_voi4g_27",G="_headerMain_voi4g_31",J="_icon_voi4g_39",K="_headerText_voi4g_43",L="_title_voi4g_51",P="_subtitle_voi4g_64",Q="_actions_voi4g_78",V="_chevron_voi4g_85",W="_collapsible_voi4g_93",X="_collapsed_voi4g_98",Y="_collapsibleInner_voi4g_101",Z="_foldable_voi4g_110",$="_body_voi4g_114",ee="_footer_voi4g_118",se="_footerStart_voi4g_127",oe="_footerEnd_voi4g_128",e={card:R,flat:F,header:H,headerDivided:U,headerMain:G,icon:J,headerText:K,title:L,subtitle:P,actions:Q,chevron:V,collapsible:W,collapsed:X,collapsibleInner:Y,foldable:Z,body:$,footer:ee,footerStart:se,footerEnd:oe},ne=new Set(z.ICON_NAMES),le=v.forwardRef(function({title:a,subtitle:t,icon:n,color:y="accent",flat:E=!1,actions:c,footer:u,footerStart:x,collapsible:l=!1,collapsed:f,defaultCollapsed:q=!1,onCollapsedChange:i,loading:r=!1,className:M,children:d,...D},T){const m=f!==void 0,[k,B]=v.useState(q),o=l&&(m?f:k),j=v.useId(),C=()=>{const I=!o;m||B(I),i==null||i(I)},_=n==null?null:typeof n=="string"&&ne.has(n)?s.jsx(p.Icon,{name:n}):n,w=a!=null||t!=null||_!=null||c!=null||l,N=r||d!=null&&d!=="",b=u!=null||x!=null,g=N||b,A=g&&!o;return s.jsxs("div",{ref:T,className:h.clsx(e.card,E&&e.flat,o&&e.collapsed,M),"aria-busy":r||void 0,...D,children:[w&&s.jsxs("div",{className:h.clsx(e.header,A&&e.headerDivided),children:[s.jsxs("div",{className:e.headerMain,children:[_!=null&&s.jsx(S.IconButton,{variant:"filled",size:"sm",color:y,nonClickable:!0,"aria-hidden":!0,className:e.icon,children:_}),(a!=null||t!=null)&&s.jsxs("div",{className:e.headerText,children:[a!=null&&s.jsx("div",{className:e.title,children:a}),t!=null&&s.jsx("div",{className:e.subtitle,children:t})]})]}),(c!=null||l)&&s.jsxs("div",{className:e.actions,children:[!o&&c,l&&s.jsx(S.IconButton,{variant:"text",size:"sm","aria-label":o?"Expand":"Collapse","aria-expanded":!o,"aria-controls":j,onClick:C,children:s.jsx(p.Icon,{name:"ArrowUp3",className:e.chevron,"data-collapsed":o?"true":"false"})})]})]}),g&&s.jsx("div",{id:j,className:h.clsx(e.collapsible,l&&e.foldable),children:s.jsxs("div",{className:e.collapsibleInner,children:[N&&s.jsx("div",{className:e.body,children:r?s.jsx(O.Skeleton,{lines:3}):d}),b&&s.jsxs("div",{className:e.footer,children:[s.jsx("div",{className:e.footerStart,children:x}),s.jsx("div",{className:e.footerEnd,children:u})]})]})})]})});exports.Card=le;
+//# sourceMappingURL=Card-zTkvreQu.cjs.map

package/dist/Card-zTkvreQu.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card-zTkvreQu.cjs","sources":["../src/components/Card/Card.tsx"],"sourcesContent":["import { forwardRef, useId, useState, type HTMLAttributes, type ReactNode } from 'react'\nimport { clsx } from 'clsx'\nimport { Icon } from '../Icon'\nimport { Skeleton } from '../Skeleton'\nimport { IconButton } from '../IconButton'\nimport type { ThemeColor } from '../../theme'\nimport { ICON_NAMES, type IconName } from '../../icons/names'\nimport styles from './Card.module.css'\n\nconst ICON_NAME_SET = new Set<string>(ICON_NAMES)\n\nexport interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'color'> {\n  /** Header title (left, next to the icon). */\n  title?: ReactNode\n  /** Secondary muted line shown under the `title` (e.g. a short description). */\n  subtitle?: ReactNode\n  /** Leading header icon — a known `IconName` or any node. */\n  icon?: IconName | ReactNode\n  /** Theme color that tints the leading icon box. Defaults to `accent`. */\n  color?: ThemeColor\n  /** Marks the card flat (used by `PageLayout`). Cards are shadowless, so this currently adds no visual difference — it's a styling hook, not a distinct look. */\n  flat?: boolean\n  /** Header actions, placed at the end of the header row (before the collapse toggle). */\n  actions?: ReactNode\n  /** Footer content (e.g. actions), pinned to the **right** of the footer row. */\n  footer?: ReactNode\n  /** Footer content pinned to the **left** of the footer row (opposite `footer`). */\n  footerStart?: ReactNode\n  /** Adds a collapse/expand toggle to the header that folds the body + footer. */\n  collapsible?: boolean\n  /** Controlled collapsed state. */\n  collapsed?: boolean\n  /** Initial collapsed state for uncontrolled use. Defaults to `false`. */\n  defaultCollapsed?: boolean\n  /** Fires with the next collapsed state when the toggle is clicked. */\n  onCollapsedChange?: (collapsed: boolean) => void\n  /** Replace the body with skeleton lines while its data loads (header + footer stay). Defaults to `false`. */\n  loading?: boolean\n  /** Card body. */\n  children?: ReactNode\n}\n\n/**\n * A surface card with an optional header (icon + title + actions), a body, and a footer for actions.\n * `collapsible` adds a chevron that smoothly folds the body + footer (controlled via `collapsed`/\n * `onCollapsedChange`, or uncontrolled via `defaultCollapsed`). Token-only styling.\n */\nexport const Card = forwardRef<HTMLDivElement, CardProps>(function Card(\n  {\n    title,\n    subtitle,\n    icon,\n    color = 'accent',\n    flat = false,\n    actions,\n    footer,\n    footerStart,\n    collapsible = false,\n    collapsed,\n    defaultCollapsed = false,\n    onCollapsedChange,\n    loading = false,\n    className,\n    children,\n    ...props\n  },\n  ref,\n) {\n  const isControlled = collapsed !== undefined\n  const [internal, setInternal] = useState(defaultCollapsed)\n  const isCollapsed = collapsible && (isControlled ? collapsed! : internal)\n  const collapsibleId = useId() // ties the toggle to the fold region via aria-controls\n\n  const toggle = () => {\n    const next = !isCollapsed\n    if (!isControlled) setInternal(next)\n    onCollapsedChange?.(next)\n  }\n\n  const renderedIcon =\n    icon == null ? null : typeof icon === 'string' && ICON_NAME_SET.has(icon) ? (\n      <Icon name={icon as IconName} />\n    ) : (\n      icon\n    )\n\n  const hasHeader =\n    title != null || subtitle != null || renderedIcon != null || actions != null || collapsible\n  const hasBody = loading || (children != null && children !== '')\n  const hasFooter = footer != null || footerStart != null\n  const hasCollapsibleContent = hasBody || hasFooter\n  // The header is separated by a divider only while content is visible beneath it.\n  const headerDivided = hasCollapsibleContent && !isCollapsed\n\n  return (\n    <div\n      ref={ref}\n      className={clsx(styles.card, flat && styles.flat, isCollapsed && styles.collapsed, className)}\n      aria-busy={loading || undefined}\n      {...props}\n    >\n      {hasHeader && (\n        <div className={clsx(styles.header, headerDivided && styles.headerDivided)}>\n          <div className={styles.headerMain}>\n            {renderedIcon != null && (\n              <IconButton\n                variant=\"filled\"\n                size=\"sm\"\n                color={color}\n                nonClickable\n                aria-hidden\n                className={styles.icon}\n              >\n                {renderedIcon}\n              </IconButton>\n            )}\n            {(title != null || subtitle != null) && (\n              <div className={styles.headerText}>\n                {title != null && <div className={styles.title}>{title}</div>}\n                {subtitle != null && <div className={styles.subtitle}>{subtitle}</div>}\n              </div>\n            )}\n          </div>\n          {(actions != null || collapsible) && (\n            <div className={styles.actions}>\n              {!isCollapsed && actions}\n              {collapsible && (\n                <IconButton\n                  variant=\"text\"\n                  size=\"sm\"\n                  aria-label={isCollapsed ? 'Expand' : 'Collapse'}\n                  aria-expanded={!isCollapsed}\n                  aria-controls={collapsibleId}\n                  onClick={toggle}\n                >\n                  <Icon\n                    name=\"ArrowUp3\"\n                    className={styles.chevron}\n                    data-collapsed={isCollapsed ? 'true' : 'false'}\n                  />\n                </IconButton>\n              )}\n            </div>\n          )}\n        </div>\n      )}\n      {hasCollapsibleContent && (\n        <div\n          id={collapsibleId}\n          className={clsx(styles.collapsible, collapsible && styles.foldable)}\n        >\n          <div className={styles.collapsibleInner}>\n            {hasBody && (\n              <div className={styles.body}>{loading ? <Skeleton lines={3} /> : children}</div>\n            )}\n            {hasFooter && (\n              <div className={styles.footer}>\n                <div className={styles.footerStart}>{footerStart}</div>\n                <div className={styles.footerEnd}>{footer}</div>\n              </div>\n            )}\n          </div>\n        </div>\n      )}\n    </div>\n  )\n})\n"],"names":["ICON_NAME_SET","ICON_NAMES","Card","forwardRef","title","subtitle","icon","color","flat","actions","footer","footerStart","collapsible","collapsed","defaultCollapsed","onCollapsedChange","loading","className","children","props","ref","isControlled","internal","setInternal","useState","isCollapsed","collapsibleId","useId","toggle","next","renderedIcon","jsx","Icon","hasHeader","hasBody","hasFooter","hasCollapsibleContent","headerDivided","jsxs","clsx","styles","IconButton","Skeleton"],"mappings":"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"}

package/dist/Checkbox-CTp1xFW7.cjs

@@ -0,0 +1,2 @@
+"use strict";const c=require("react/jsx-runtime"),o=require("react"),v=require("clsx"),A=require("./formContext-bTWrqdEV.cjs"),D="_field_c10y5_1",G="_row_c10y5_9",H="_disabled_c10y5_21",J="_input_c10y5_27",K="_box_c10y5_41",M="_check_c10y5_68",O="_dash_c10y5_83",P="_error_c10y5_105",Q="_label_c10y5_109",T="_required_c10y5_114",U="_sm_c10y5_120",W="_md_c10y5_125",X="_lg_c10y5_130",s={field:D,row:G,disabled:H,input:J,box:K,check:M,dash:O,error:P,label:Q,required:T,sm:U,md:W,lg:X},Y=o.forwardRef(function({label:u,color:f="accent",size:j="md",error:q,required:N=!1,indeterminate:x=!1,checked:h,defaultChecked:C=!1,onChange:a,name:t,onBlur:i,disabled:y=!1,id:w,className:R,style:g,...z},n){const I=o.useId(),B=w??I,d=o.useRef(null),E=o.useCallback(e=>{d.current=e,typeof n=="function"?n(e):n&&(n.current=e)},[n]);o.useLayoutEffect(()=>{d.current&&(d.current.indeterminate=x)},[x]);const l=A.useFormContext(),b=!!(l&&t),r=l&&t?l.field(t):void 0,m=h!==void 0?h:b?!!l.values[t]:void 0,k=m!==void 0,[F,$]=o.useState(C),L=k?m:F,p=q??(r==null?void 0:r.error)??!1,S=e=>{const _=e.target.checked;k||$(_),b&&l.setValue(t,_),a==null||a(_)},V=e=>{r==null||r.onBlur(e),i==null||i(e)};return c.jsx("div",{className:v.clsx(s.field,p&&s.error,y&&s.disabled,R),style:{"--tz-btn-rgb":`var(--tz-color-${f}-rgb)`,"--tz-btn-on":`var(--tz-color-${f}-contrast, #fff)`,...g},children:c.jsxs("label",{className:v.clsx(s.row,s[j]),children:[c.jsx("input",{ref:E,id:B,name:t,type:"checkbox",className:s.input,checked:L,onChange:S,onBlur:V,disabled:y,"aria-invalid":p||void 0,...z}),c.jsxs("span",{className:s.box,"aria-hidden":"true",children:[c.jsx("span",{className:s.check}),c.jsx("span",{className:s.dash})]}),u!=null&&c.jsxs("span",{className:s.label,children:[u,N&&c.jsx("span",{className:s.required,"aria-hidden":"true",children:"*"})]})]})})});exports.Checkbox=Y;
+//# sourceMappingURL=Checkbox-CTp1xFW7.cjs.map

package/dist/{Checkbox-fzJCwe0j.cjs.map → Checkbox-CTp1xFW7.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"Checkbox-fzJCwe0j.cjs","sources":["../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useId,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type ChangeEvent,\n  type CSSProperties,\n  type FocusEvent,\n  type InputHTMLAttributes,\n  type MutableRefObject,\n  type ReactNode,\n} from 'react'\nimport { clsx } from 'clsx'\nimport { useFormContext } from '../../form/formContext'\nimport type { ThemeColor } from '../../theme'\nimport styles from './Checkbox.module.css'\n\nexport type CheckboxSize = 'sm' | 'md' | 'lg'\n\nexport interface CheckboxProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'size' | 'color' | 'type' | 'onChange'\n> {\n  /** Text shown to the right of the box. */\n  label?: ReactNode\n  /** Theme palette token used for the checked fill. Defaults to `accent`. */\n  color?: ThemeColor\n  /** Preset size — box dimensions and label font. */\n  size?: CheckboxSize\n  /** Marks the field invalid — reddens the box only (no helper text). */\n  error?: boolean\n  /** Adds a red asterisk after the label. */\n  required?: boolean\n  /**\n   * Shows the **indeterminate** (mixed) dash instead of a check — for a \"select all\" that's only\n   * partially selected. Sets the native `indeterminate` property (announced as \"mixed\"), and takes\n   * visual precedence over `checked`. Purely a display/a11y state — clicking still toggles `checked`,\n   * so the consumer clears it (e.g. once all/none are selected).\n   */\n  indeterminate?: boolean\n  /** Controlled checked state. */\n  checked?: boolean\n  /** Initial checked state for uncontrolled use. Defaults to `false`. */\n  defaultChecked?: boolean\n  /** Fires with the next checked state. */\n  onChange?: (checked: boolean) => void\n}\n\n/**\n * A checkbox with a label. The native `<input type=\"checkbox\">` is visually hidden but fully\n * accessible (keyboard + screen reader); a styled box shows the state, filled with `color` and a\n * CSS checkmark when checked. Controlled (`checked` + `onChange`) or uncontrolled (`defaultChecked`),\n * and — like the other fields — binds to a surrounding `<Form>` by `name` (its form value is a\n * `boolean`). `error` reddens the box (no message text). Styling uses `--tz-*` tokens only.\n */\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(\n  {\n    label,\n    color = 'accent',\n    size = 'md',\n    error,\n    required = false,\n    indeterminate = false,\n    checked,\n    defaultChecked = false,\n    onChange,\n    name,\n    onBlur,\n    disabled = false,\n    id: idProp,\n    className,\n    style,\n    ...props\n  },\n  ref,\n) {\n  const reactId = useId()\n  const id = idProp ?? reactId\n\n  // `indeterminate` is a DOM property (not an attribute), so set it on the node — and merge our internal\n  // ref with the forwarded one so both see the same input. The `:indeterminate` pseudo drives the styling.\n  const innerRef = useRef<HTMLInputElement | null>(null)\n  const setRef = useCallback(\n    (node: HTMLInputElement | null) => {\n      innerRef.current = node\n      if (typeof ref === 'function') ref(node)\n      else if (ref) (ref as MutableRefObject<HTMLInputElement | null>).current = node\n    },\n    [ref],\n  )\n  useLayoutEffect(() => {\n    if (innerRef.current) innerRef.current.indeterminate = indeterminate\n  }, [indeterminate])\n\n  // Auto-bind to a surrounding <Form> by `name` — the form value is a boolean.\n  const form = useFormContext()\n  const isFormBound = Boolean(form && name)\n  const bound = form && name ? form.field(name) : undefined\n\n  const externalChecked: boolean | undefined =\n    checked !== undefined ? checked : isFormBound ? Boolean(form!.values[name!]) : undefined\n  const isControlled = externalChecked !== undefined\n  const [internal, setInternal] = useState<boolean>(defaultChecked)\n  const isChecked = isControlled ? externalChecked! : internal\n\n  const resolvedError = error ?? bound?.error ?? false\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const next = event.target.checked\n    if (!isControlled) setInternal(next)\n    if (isFormBound) form!.setValue(name!, next)\n    onChange?.(next)\n  }\n\n  const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n    bound?.onBlur(event)\n    onBlur?.(event)\n  }\n\n  return (\n    <div\n      className={clsx(\n        styles.field,\n        resolvedError && styles.error,\n        disabled && styles.disabled,\n        className,\n      )}\n      style={\n        {\n          '--tz-btn-rgb': `var(--tz-color-${color}-rgb)`,\n          '--tz-btn-on': `var(--tz-color-${color}-contrast, #fff)`,\n          ...style,\n        } as CSSProperties\n      }\n    >\n      <label className={clsx(styles.row, styles[size])}>\n        <input\n          ref={setRef}\n          id={id}\n          name={name}\n          type=\"checkbox\"\n          className={styles.input}\n          checked={isChecked}\n          onChange={handleChange}\n          onBlur={handleBlur}\n          disabled={disabled}\n          aria-invalid={resolvedError || undefined}\n          {...props}\n        />\n        <span className={styles.box} aria-hidden=\"true\">\n          <span className={styles.check} />\n          <span className={styles.dash} />\n        </span>\n        {label != null && (\n          <span className={styles.label}>\n            {label}\n            {required && (\n              <span className={styles.required} aria-hidden=\"true\">\n                *\n              </span>\n            )}\n          </span>\n        )}\n      </label>\n    </div>\n  )\n})\n"],"names":["Checkbox","forwardRef","label","color","size","error","required","indeterminate","checked","defaultChecked","onChange","name","onBlur","disabled","idProp","className","style","props","ref","reactId","useId","id","innerRef","useRef","setRef","useCallback","node","useLayoutEffect","form","useFormContext","isFormBound","bound","externalChecked","isControlled","internal","setInternal","useState","isChecked","resolvedError","handleChange","event","next","handleBlur","jsx","clsx","styles","jsxs"],"mappings":"meAyDaA,EAAWC,EAAAA,WAA4C,SAClE,CACE,MAAAC,EACA,MAAAC,EAAQ,SACR,KAAAC,EAAO,KACP,MAAAC,EACA,SAAAC,EAAW,GACX,cAAAC,EAAgB,GAChB,QAAAC,EACA,eAAAC,EAAiB,GACjB,SAAAC,EACA,KAAAC,EACA,OAAAC,EACA,SAAAC,EAAW,GACX,GAAIC,EACJ,UAAAC,EACA,MAAAC,EACA,GAAGC,CACL,EACAC,EACA,CACA,MAAMC,EAAUC,EAAAA,MAAA,EACVC,EAAKP,GAAUK,EAIfG,EAAWC,EAAAA,OAAgC,IAAI,EAC/CC,EAASC,EAAAA,YACZC,GAAkC,CACjCJ,EAAS,QAAUI,EACf,OAAOR,GAAQ,WAAYA,EAAIQ,CAAI,EAC9BR,IAAMA,EAAkD,QAAUQ,EAC7E,EACA,CAACR,CAAG,CAAA,EAENS,EAAAA,gBAAgB,IAAM,CAChBL,EAAS,UAASA,EAAS,QAAQ,cAAgBf,EACzD,EAAG,CAACA,CAAa,CAAC,EAGlB,MAAMqB,EAAOC,EAAAA,eAAA,EACPC,EAAc,GAAQF,GAAQjB,GAC9BoB,EAAQH,GAAQjB,EAAOiB,EAAK,MAAMjB,CAAI,EAAI,OAE1CqB,EACJxB,IAAY,OAAYA,EAAUsB,EAAc,EAAQF,EAAM,OAAOjB,CAAK,EAAK,OAC3EsB,EAAeD,IAAoB,OACnC,CAACE,EAAUC,CAAW,EAAIC,EAAAA,SAAkB3B,CAAc,EAC1D4B,EAAYJ,EAAeD,EAAmBE,EAE9CI,EAAgBjC,IAAS0B,GAAA,YAAAA,EAAO,QAAS,GAEzCQ,EAAgBC,GAAyC,CAC7D,MAAMC,EAAOD,EAAM,OAAO,QACrBP,GAAcE,EAAYM,CAAI,EAC/BX,GAAaF,EAAM,SAASjB,EAAO8B,CAAI,EAC3C/B,GAAA,MAAAA,EAAW+B,EACb,EAEMC,EAAcF,GAAwC,CAC1DT,GAAA,MAAAA,EAAO,OAAOS,GACd5B,GAAA,MAAAA,EAAS4B,EACX,EAEA,OACEG,EAAAA,IAAC,MAAA,CACC,UAAWC,EAAAA,KACTC,EAAO,MACPP,GAAiBO,EAAO,MACxBhC,GAAYgC,EAAO,SACnB9B,CAAA,EAEF,MACE,CACE,eAAgB,kBAAkBZ,CAAK,QACvC,cAAe,kBAAkBA,CAAK,mBACtC,GAAGa,CAAA,EAIP,SAAA8B,EAAAA,KAAC,SAAM,UAAWF,EAAAA,KAAKC,EAAO,IAAKA,EAAOzC,CAAI,CAAC,EAC7C,SAAA,CAAAuC,EAAAA,IAAC,QAAA,CACC,IAAKnB,EACL,GAAAH,EACA,KAAAV,EACA,KAAK,WACL,UAAWkC,EAAO,MAClB,QAASR,EACT,SAAUE,EACV,OAAQG,EACR,SAAA7B,EACA,eAAcyB,GAAiB,OAC9B,GAAGrB,CAAA,CAAA,SAEL,OAAA,CAAK,UAAW4B,EAAO,IAAK,cAAY,OACvC,SAAA,CAAAF,EAAAA,IAAC,OAAA,CAAK,UAAWE,EAAO,KAAA,CAAO,EAC/BF,EAAAA,IAAC,OAAA,CAAK,UAAWE,EAAO,IAAA,CAAM,CAAA,EAChC,EACC3C,GAAS,MACR4C,EAAAA,KAAC,OAAA,CAAK,UAAWD,EAAO,MACrB,SAAA,CAAA3C,EACAI,SACE,OAAA,CAAK,UAAWuC,EAAO,SAAU,cAAY,OAAO,SAAA,GAAA,CAErD,CAAA,CAAA,CAEJ,CAAA,CAAA,CAEJ,CAAA,CAAA,CAGN,CAAC"}
+{"version":3,"file":"Checkbox-CTp1xFW7.cjs","sources":["../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useId,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type ChangeEvent,\n  type CSSProperties,\n  type FocusEvent,\n  type InputHTMLAttributes,\n  type MutableRefObject,\n  type ReactNode,\n} from 'react'\nimport { clsx } from 'clsx'\nimport { useFormContext } from '../../form/formContext'\nimport type { ThemeColor } from '../../theme'\nimport styles from './Checkbox.module.css'\n\nexport type CheckboxSize = 'sm' | 'md' | 'lg'\n\nexport interface CheckboxProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'size' | 'color' | 'type' | 'onChange'\n> {\n  /** Text shown to the right of the box. */\n  label?: ReactNode\n  /** Theme palette token used for the checked fill. Defaults to `accent`. */\n  color?: ThemeColor\n  /** Preset size — box dimensions and label font. */\n  size?: CheckboxSize\n  /** Marks the field invalid — reddens the box only (no helper text). */\n  error?: boolean\n  /** Adds a red asterisk after the label. */\n  required?: boolean\n  /**\n   * Shows the **indeterminate** (mixed) dash instead of a check — for a \"select all\" that's only\n   * partially selected. Sets the native `indeterminate` property (announced as \"mixed\"), and takes\n   * visual precedence over `checked`. Purely a display/a11y state — clicking still toggles `checked`,\n   * so the consumer clears it (e.g. once all/none are selected).\n   */\n  indeterminate?: boolean\n  /** Controlled checked state. */\n  checked?: boolean\n  /** Initial checked state for uncontrolled use. Defaults to `false`. */\n  defaultChecked?: boolean\n  /** Fires with the next checked state. */\n  onChange?: (checked: boolean) => void\n}\n\n/**\n * A checkbox with a label. The native `<input type=\"checkbox\">` is visually hidden but fully\n * accessible (keyboard + screen reader); a styled box shows the state, filled with `color` and a\n * CSS checkmark when checked. Controlled (`checked` + `onChange`) or uncontrolled (`defaultChecked`),\n * and — like the other fields — binds to a surrounding `<Form>` by `name` (its form value is a\n * `boolean`). `error` reddens the box (no message text). Styling uses `--tz-*` tokens only.\n */\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(\n  {\n    label,\n    color = 'accent',\n    size = 'md',\n    error,\n    required = false,\n    indeterminate = false,\n    checked,\n    defaultChecked = false,\n    onChange,\n    name,\n    onBlur,\n    disabled = false,\n    id: idProp,\n    className,\n    style,\n    ...props\n  },\n  ref,\n) {\n  const reactId = useId()\n  const id = idProp ?? reactId\n\n  // `indeterminate` is a DOM property (not an attribute), so set it on the node — and merge our internal\n  // ref with the forwarded one so both see the same input. The `:indeterminate` pseudo drives the styling.\n  const innerRef = useRef<HTMLInputElement | null>(null)\n  const setRef = useCallback(\n    (node: HTMLInputElement | null) => {\n      innerRef.current = node\n      if (typeof ref === 'function') ref(node)\n      else if (ref) (ref as MutableRefObject<HTMLInputElement | null>).current = node\n    },\n    [ref],\n  )\n  useLayoutEffect(() => {\n    if (innerRef.current) innerRef.current.indeterminate = indeterminate\n  }, [indeterminate])\n\n  // Auto-bind to a surrounding <Form> by `name` — the form value is a boolean.\n  const form = useFormContext()\n  const isFormBound = Boolean(form && name)\n  const bound = form && name ? form.field(name) : undefined\n\n  const externalChecked: boolean | undefined =\n    checked !== undefined ? checked : isFormBound ? Boolean(form!.values[name!]) : undefined\n  const isControlled = externalChecked !== undefined\n  const [internal, setInternal] = useState<boolean>(defaultChecked)\n  const isChecked = isControlled ? externalChecked! : internal\n\n  const resolvedError = error ?? bound?.error ?? false\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const next = event.target.checked\n    if (!isControlled) setInternal(next)\n    if (isFormBound) form!.setValue(name!, next)\n    onChange?.(next)\n  }\n\n  const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n    bound?.onBlur(event)\n    onBlur?.(event)\n  }\n\n  return (\n    <div\n      className={clsx(\n        styles.field,\n        resolvedError && styles.error,\n        disabled && styles.disabled,\n        className,\n      )}\n      style={\n        {\n          '--tz-btn-rgb': `var(--tz-color-${color}-rgb)`,\n          '--tz-btn-on': `var(--tz-color-${color}-contrast, #fff)`,\n          ...style,\n        } as CSSProperties\n      }\n    >\n      <label className={clsx(styles.row, styles[size])}>\n        <input\n          ref={setRef}\n          id={id}\n          name={name}\n          type=\"checkbox\"\n          className={styles.input}\n          checked={isChecked}\n          onChange={handleChange}\n          onBlur={handleBlur}\n          disabled={disabled}\n          aria-invalid={resolvedError || undefined}\n          {...props}\n        />\n        <span className={styles.box} aria-hidden=\"true\">\n          <span className={styles.check} />\n          <span className={styles.dash} />\n        </span>\n        {label != null && (\n          <span className={styles.label}>\n            {label}\n            {required && (\n              <span className={styles.required} aria-hidden=\"true\">\n                *\n              </span>\n            )}\n          </span>\n        )}\n      </label>\n    </div>\n  )\n})\n"],"names":["Checkbox","forwardRef","label","color","size","error","required","indeterminate","checked","defaultChecked","onChange","name","onBlur","disabled","idProp","className","style","props","ref","reactId","useId","id","innerRef","useRef","setRef","useCallback","node","useLayoutEffect","form","useFormContext","isFormBound","bound","externalChecked","isControlled","internal","setInternal","useState","isChecked","resolvedError","handleChange","event","next","handleBlur","jsx","clsx","styles","jsxs"],"mappings":"meAyDaA,EAAWC,EAAAA,WAA4C,SAClE,CACE,MAAAC,EACA,MAAAC,EAAQ,SACR,KAAAC,EAAO,KACP,MAAAC,EACA,SAAAC,EAAW,GACX,cAAAC,EAAgB,GAChB,QAAAC,EACA,eAAAC,EAAiB,GACjB,SAAAC,EACA,KAAAC,EACA,OAAAC,EACA,SAAAC,EAAW,GACX,GAAIC,EACJ,UAAAC,EACA,MAAAC,EACA,GAAGC,CACL,EACAC,EACA,CACA,MAAMC,EAAUC,EAAAA,MAAA,EACVC,EAAKP,GAAUK,EAIfG,EAAWC,EAAAA,OAAgC,IAAI,EAC/CC,EAASC,EAAAA,YACZC,GAAkC,CACjCJ,EAAS,QAAUI,EACf,OAAOR,GAAQ,WAAYA,EAAIQ,CAAI,EAC9BR,IAAMA,EAAkD,QAAUQ,EAC7E,EACA,CAACR,CAAG,CAAA,EAENS,EAAAA,gBAAgB,IAAM,CAChBL,EAAS,UAASA,EAAS,QAAQ,cAAgBf,EACzD,EAAG,CAACA,CAAa,CAAC,EAGlB,MAAMqB,EAAOC,EAAAA,eAAA,EACPC,EAAc,GAAQF,GAAQjB,GAC9BoB,EAAQH,GAAQjB,EAAOiB,EAAK,MAAMjB,CAAI,EAAI,OAE1CqB,EACJxB,IAAY,OAAYA,EAAUsB,EAAc,EAAQF,EAAM,OAAOjB,CAAK,EAAK,OAC3EsB,EAAeD,IAAoB,OACnC,CAACE,EAAUC,CAAW,EAAIC,EAAAA,SAAkB3B,CAAc,EAC1D4B,EAAYJ,EAAeD,EAAmBE,EAE9CI,EAAgBjC,IAAS0B,GAAA,YAAAA,EAAO,QAAS,GAEzCQ,EAAgBC,GAAyC,CAC7D,MAAMC,EAAOD,EAAM,OAAO,QACrBP,GAAcE,EAAYM,CAAI,EAC/BX,GAAaF,EAAM,SAASjB,EAAO8B,CAAI,EAC3C/B,GAAA,MAAAA,EAAW+B,EACb,EAEMC,EAAcF,GAAwC,CAC1DT,GAAA,MAAAA,EAAO,OAAOS,GACd5B,GAAA,MAAAA,EAAS4B,EACX,EAEA,OACEG,EAAAA,IAAC,MAAA,CACC,UAAWC,EAAAA,KACTC,EAAO,MACPP,GAAiBO,EAAO,MACxBhC,GAAYgC,EAAO,SACnB9B,CAAA,EAEF,MACE,CACE,eAAgB,kBAAkBZ,CAAK,QACvC,cAAe,kBAAkBA,CAAK,mBACtC,GAAGa,CAAA,EAIP,SAAA8B,EAAAA,KAAC,SAAM,UAAWF,EAAAA,KAAKC,EAAO,IAAKA,EAAOzC,CAAI,CAAC,EAC7C,SAAA,CAAAuC,EAAAA,IAAC,QAAA,CACC,IAAKnB,EACL,GAAAH,EACA,KAAAV,EACA,KAAK,WACL,UAAWkC,EAAO,MAClB,QAASR,EACT,SAAUE,EACV,OAAQG,EACR,SAAA7B,EACA,eAAcyB,GAAiB,OAC9B,GAAGrB,CAAA,CAAA,SAEL,OAAA,CAAK,UAAW4B,EAAO,IAAK,cAAY,OACvC,SAAA,CAAAF,EAAAA,IAAC,OAAA,CAAK,UAAWE,EAAO,KAAA,CAAO,EAC/BF,EAAAA,IAAC,OAAA,CAAK,UAAWE,EAAO,IAAA,CAAM,CAAA,EAChC,EACC3C,GAAS,MACR4C,EAAAA,KAAC,OAAA,CAAK,UAAWD,EAAO,MACrB,SAAA,CAAA3C,EACAI,SACE,OAAA,CAAK,UAAWuC,EAAO,SAAU,cAAY,OAAO,SAAA,GAAA,CAErD,CAAA,CAAA,CAEJ,CAAA,CAAA,CAEJ,CAAA,CAAA,CAGN,CAAC"}

package/dist/Checkbox-DyKBIgVT.js

@@ -0,0 +1,98 @@
+import { jsx as n, jsxs as _ } from "react/jsx-runtime";
+import { forwardRef as A, useId as D, useRef as G, useCallback as H, useLayoutEffect as J, useState as K } from "react";
+import { clsx as v } from "clsx";
+import { u as M } from "./formContext-B7ln1Miy.js";
+const O = "_field_c10y5_1", P = "_row_c10y5_9", Q = "_disabled_c10y5_21", T = "_input_c10y5_27", U = "_box_c10y5_41", W = "_check_c10y5_68", X = "_dash_c10y5_83", Y = "_error_c10y5_105", Z = "_label_c10y5_109", ee = "_required_c10y5_114", se = "_sm_c10y5_120", ce = "_md_c10y5_125", te = "_lg_c10y5_130", e = {
+  field: O,
+  row: P,
+  disabled: Q,
+  input: T,
+  box: U,
+  check: W,
+  dash: X,
+  error: Y,
+  label: Z,
+  required: ee,
+  sm: se,
+  md: ce,
+  lg: te
+}, ie = A(function({
+  label: f,
+  color: u = "accent",
+  size: N = "md",
+  error: C,
+  required: w = !1,
+  indeterminate: h = !1,
+  checked: m,
+  defaultChecked: g = !1,
+  onChange: l,
+  name: c,
+  onBlur: a,
+  disabled: y = !1,
+  id: q,
+  className: z,
+  style: R,
+  ...I
+}, r) {
+  const j = D(), B = q ?? j, i = G(null), E = H(
+    (s) => {
+      i.current = s, typeof r == "function" ? r(s) : r && (r.current = s);
+    },
+    [r]
+  );
+  J(() => {
+    i.current && (i.current.indeterminate = h);
+  }, [h]);
+  const o = M(), p = !!(o && c), t = o && c ? o.field(c) : void 0, b = m !== void 0 ? m : p ? !!o.values[c] : void 0, x = b !== void 0, [F, $] = K(g), L = x ? b : F, k = C ?? (t == null ? void 0 : t.error) ?? !1, S = (s) => {
+    const d = s.target.checked;
+    x || $(d), p && o.setValue(c, d), l == null || l(d);
+  }, V = (s) => {
+    t == null || t.onBlur(s), a == null || a(s);
+  };
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      className: v(
+        e.field,
+        k && e.error,
+        y && e.disabled,
+        z
+      ),
+      style: {
+        "--tz-btn-rgb": `var(--tz-color-${u}-rgb)`,
+        "--tz-btn-on": `var(--tz-color-${u}-contrast, #fff)`,
+        ...R
+      },
+      children: /* @__PURE__ */ _("label", { className: v(e.row, e[N]), children: [
+        /* @__PURE__ */ n(
+          "input",
+          {
+            ref: E,
+            id: B,
+            name: c,
+            type: "checkbox",
+            className: e.input,
+            checked: L,
+            onChange: S,
+            onBlur: V,
+            disabled: y,
+            "aria-invalid": k || void 0,
+            ...I
+          }
+        ),
+        /* @__PURE__ */ _("span", { className: e.box, "aria-hidden": "true", children: [
+          /* @__PURE__ */ n("span", { className: e.check }),
+          /* @__PURE__ */ n("span", { className: e.dash })
+        ] }),
+        f != null && /* @__PURE__ */ _("span", { className: e.label, children: [
+          f,
+          w && /* @__PURE__ */ n("span", { className: e.required, "aria-hidden": "true", children: "*" })
+        ] })
+      ] })
+    }
+  );
+});
+export {
+  ie as C
+};
+//# sourceMappingURL=Checkbox-DyKBIgVT.js.map

package/dist/{Checkbox-ZYOSBYRt.js.map → Checkbox-DyKBIgVT.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Checkbox-ZYOSBYRt.js","sources":["../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useId,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type ChangeEvent,\n  type CSSProperties,\n  type FocusEvent,\n  type InputHTMLAttributes,\n  type MutableRefObject,\n  type ReactNode,\n} from 'react'\nimport { clsx } from 'clsx'\nimport { useFormContext } from '../../form/formContext'\nimport type { ThemeColor } from '../../theme'\nimport styles from './Checkbox.module.css'\n\nexport type CheckboxSize = 'sm' | 'md' | 'lg'\n\nexport interface CheckboxProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'size' | 'color' | 'type' | 'onChange'\n> {\n  /** Text shown to the right of the box. */\n  label?: ReactNode\n  /** Theme palette token used for the checked fill. Defaults to `accent`. */\n  color?: ThemeColor\n  /** Preset size — box dimensions and label font. */\n  size?: CheckboxSize\n  /** Marks the field invalid — reddens the box only (no helper text). */\n  error?: boolean\n  /** Adds a red asterisk after the label. */\n  required?: boolean\n  /**\n   * Shows the **indeterminate** (mixed) dash instead of a check — for a \"select all\" that's only\n   * partially selected. Sets the native `indeterminate` property (announced as \"mixed\"), and takes\n   * visual precedence over `checked`. Purely a display/a11y state — clicking still toggles `checked`,\n   * so the consumer clears it (e.g. once all/none are selected).\n   */\n  indeterminate?: boolean\n  /** Controlled checked state. */\n  checked?: boolean\n  /** Initial checked state for uncontrolled use. Defaults to `false`. */\n  defaultChecked?: boolean\n  /** Fires with the next checked state. */\n  onChange?: (checked: boolean) => void\n}\n\n/**\n * A checkbox with a label. The native `<input type=\"checkbox\">` is visually hidden but fully\n * accessible (keyboard + screen reader); a styled box shows the state, filled with `color` and a\n * CSS checkmark when checked. Controlled (`checked` + `onChange`) or uncontrolled (`defaultChecked`),\n * and — like the other fields — binds to a surrounding `<Form>` by `name` (its form value is a\n * `boolean`). `error` reddens the box (no message text). Styling uses `--tz-*` tokens only.\n */\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(\n  {\n    label,\n    color = 'accent',\n    size = 'md',\n    error,\n    required = false,\n    indeterminate = false,\n    checked,\n    defaultChecked = false,\n    onChange,\n    name,\n    onBlur,\n    disabled = false,\n    id: idProp,\n    className,\n    style,\n    ...props\n  },\n  ref,\n) {\n  const reactId = useId()\n  const id = idProp ?? reactId\n\n  // `indeterminate` is a DOM property (not an attribute), so set it on the node — and merge our internal\n  // ref with the forwarded one so both see the same input. The `:indeterminate` pseudo drives the styling.\n  const innerRef = useRef<HTMLInputElement | null>(null)\n  const setRef = useCallback(\n    (node: HTMLInputElement | null) => {\n      innerRef.current = node\n      if (typeof ref === 'function') ref(node)\n      else if (ref) (ref as MutableRefObject<HTMLInputElement | null>).current = node\n    },\n    [ref],\n  )\n  useLayoutEffect(() => {\n    if (innerRef.current) innerRef.current.indeterminate = indeterminate\n  }, [indeterminate])\n\n  // Auto-bind to a surrounding <Form> by `name` — the form value is a boolean.\n  const form = useFormContext()\n  const isFormBound = Boolean(form && name)\n  const bound = form && name ? form.field(name) : undefined\n\n  const externalChecked: boolean | undefined =\n    checked !== undefined ? checked : isFormBound ? Boolean(form!.values[name!]) : undefined\n  const isControlled = externalChecked !== undefined\n  const [internal, setInternal] = useState<boolean>(defaultChecked)\n  const isChecked = isControlled ? externalChecked! : internal\n\n  const resolvedError = error ?? bound?.error ?? false\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const next = event.target.checked\n    if (!isControlled) setInternal(next)\n    if (isFormBound) form!.setValue(name!, next)\n    onChange?.(next)\n  }\n\n  const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n    bound?.onBlur(event)\n    onBlur?.(event)\n  }\n\n  return (\n    <div\n      className={clsx(\n        styles.field,\n        resolvedError && styles.error,\n        disabled && styles.disabled,\n        className,\n      )}\n      style={\n        {\n          '--tz-btn-rgb': `var(--tz-color-${color}-rgb)`,\n          '--tz-btn-on': `var(--tz-color-${color}-contrast, #fff)`,\n          ...style,\n        } as CSSProperties\n      }\n    >\n      <label className={clsx(styles.row, styles[size])}>\n        <input\n          ref={setRef}\n          id={id}\n          name={name}\n          type=\"checkbox\"\n          className={styles.input}\n          checked={isChecked}\n          onChange={handleChange}\n          onBlur={handleBlur}\n          disabled={disabled}\n          aria-invalid={resolvedError || undefined}\n          {...props}\n        />\n        <span className={styles.box} aria-hidden=\"true\">\n          <span className={styles.check} />\n          <span className={styles.dash} />\n        </span>\n        {label != null && (\n          <span className={styles.label}>\n            {label}\n            {required && (\n              <span className={styles.required} aria-hidden=\"true\">\n                *\n              </span>\n            )}\n          </span>\n        )}\n      </label>\n    </div>\n  )\n})\n"],"names":["Checkbox","forwardRef","label","color","size","error","required","indeterminate","checked","defaultChecked","onChange","name","onBlur","disabled","idProp","className","style","props","ref","reactId","useId","id","innerRef","useRef","setRef","useCallback","node","useLayoutEffect","form","useFormContext","isFormBound","bound","externalChecked","isControlled","internal","setInternal","useState","isChecked","resolvedError","handleChange","event","next","handleBlur","jsx","clsx","styles","jsxs"],"mappings":"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"}
+{"version":3,"file":"Checkbox-DyKBIgVT.js","sources":["../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useId,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type ChangeEvent,\n  type CSSProperties,\n  type FocusEvent,\n  type InputHTMLAttributes,\n  type MutableRefObject,\n  type ReactNode,\n} from 'react'\nimport { clsx } from 'clsx'\nimport { useFormContext } from '../../form/formContext'\nimport type { ThemeColor } from '../../theme'\nimport styles from './Checkbox.module.css'\n\nexport type CheckboxSize = 'sm' | 'md' | 'lg'\n\nexport interface CheckboxProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'size' | 'color' | 'type' | 'onChange'\n> {\n  /** Text shown to the right of the box. */\n  label?: ReactNode\n  /** Theme palette token used for the checked fill. Defaults to `accent`. */\n  color?: ThemeColor\n  /** Preset size — box dimensions and label font. */\n  size?: CheckboxSize\n  /** Marks the field invalid — reddens the box only (no helper text). */\n  error?: boolean\n  /** Adds a red asterisk after the label. */\n  required?: boolean\n  /**\n   * Shows the **indeterminate** (mixed) dash instead of a check — for a \"select all\" that's only\n   * partially selected. Sets the native `indeterminate` property (announced as \"mixed\"), and takes\n   * visual precedence over `checked`. Purely a display/a11y state — clicking still toggles `checked`,\n   * so the consumer clears it (e.g. once all/none are selected).\n   */\n  indeterminate?: boolean\n  /** Controlled checked state. */\n  checked?: boolean\n  /** Initial checked state for uncontrolled use. Defaults to `false`. */\n  defaultChecked?: boolean\n  /** Fires with the next checked state. */\n  onChange?: (checked: boolean) => void\n}\n\n/**\n * A checkbox with a label. The native `<input type=\"checkbox\">` is visually hidden but fully\n * accessible (keyboard + screen reader); a styled box shows the state, filled with `color` and a\n * CSS checkmark when checked. Controlled (`checked` + `onChange`) or uncontrolled (`defaultChecked`),\n * and — like the other fields — binds to a surrounding `<Form>` by `name` (its form value is a\n * `boolean`). `error` reddens the box (no message text). Styling uses `--tz-*` tokens only.\n */\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(\n  {\n    label,\n    color = 'accent',\n    size = 'md',\n    error,\n    required = false,\n    indeterminate = false,\n    checked,\n    defaultChecked = false,\n    onChange,\n    name,\n    onBlur,\n    disabled = false,\n    id: idProp,\n    className,\n    style,\n    ...props\n  },\n  ref,\n) {\n  const reactId = useId()\n  const id = idProp ?? reactId\n\n  // `indeterminate` is a DOM property (not an attribute), so set it on the node — and merge our internal\n  // ref with the forwarded one so both see the same input. The `:indeterminate` pseudo drives the styling.\n  const innerRef = useRef<HTMLInputElement | null>(null)\n  const setRef = useCallback(\n    (node: HTMLInputElement | null) => {\n      innerRef.current = node\n      if (typeof ref === 'function') ref(node)\n      else if (ref) (ref as MutableRefObject<HTMLInputElement | null>).current = node\n    },\n    [ref],\n  )\n  useLayoutEffect(() => {\n    if (innerRef.current) innerRef.current.indeterminate = indeterminate\n  }, [indeterminate])\n\n  // Auto-bind to a surrounding <Form> by `name` — the form value is a boolean.\n  const form = useFormContext()\n  const isFormBound = Boolean(form && name)\n  const bound = form && name ? form.field(name) : undefined\n\n  const externalChecked: boolean | undefined =\n    checked !== undefined ? checked : isFormBound ? Boolean(form!.values[name!]) : undefined\n  const isControlled = externalChecked !== undefined\n  const [internal, setInternal] = useState<boolean>(defaultChecked)\n  const isChecked = isControlled ? externalChecked! : internal\n\n  const resolvedError = error ?? bound?.error ?? false\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const next = event.target.checked\n    if (!isControlled) setInternal(next)\n    if (isFormBound) form!.setValue(name!, next)\n    onChange?.(next)\n  }\n\n  const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n    bound?.onBlur(event)\n    onBlur?.(event)\n  }\n\n  return (\n    <div\n      className={clsx(\n        styles.field,\n        resolvedError && styles.error,\n        disabled && styles.disabled,\n        className,\n      )}\n      style={\n        {\n          '--tz-btn-rgb': `var(--tz-color-${color}-rgb)`,\n          '--tz-btn-on': `var(--tz-color-${color}-contrast, #fff)`,\n          ...style,\n        } as CSSProperties\n      }\n    >\n      <label className={clsx(styles.row, styles[size])}>\n        <input\n          ref={setRef}\n          id={id}\n          name={name}\n          type=\"checkbox\"\n          className={styles.input}\n          checked={isChecked}\n          onChange={handleChange}\n          onBlur={handleBlur}\n          disabled={disabled}\n          aria-invalid={resolvedError || undefined}\n          {...props}\n        />\n        <span className={styles.box} aria-hidden=\"true\">\n          <span className={styles.check} />\n          <span className={styles.dash} />\n        </span>\n        {label != null && (\n          <span className={styles.label}>\n            {label}\n            {required && (\n              <span className={styles.required} aria-hidden=\"true\">\n                *\n              </span>\n            )}\n          </span>\n        )}\n      </label>\n    </div>\n  )\n})\n"],"names":["Checkbox","forwardRef","label","color","size","error","required","indeterminate","checked","defaultChecked","onChange","name","onBlur","disabled","idProp","className","style","props","ref","reactId","useId","id","innerRef","useRef","setRef","useCallback","node","useLayoutEffect","form","useFormContext","isFormBound","bound","externalChecked","isControlled","internal","setInternal","useState","isChecked","resolvedError","handleChange","event","next","handleBlur","jsx","clsx","styles","jsxs"],"mappings":"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"}

package/dist/{Chip-DdKhcstm.js → Chip-C-5Z5wsC.js}

@@ -1,11 +1,11 @@
-import { jsxs as w, jsx as n } from "react/jsx-runtime";
-import { forwardRef as I } from "react";
-import { clsx as C } from "clsx";
-import { I as A } from "./Icon-DaTvzLBu.js";
-import { a as B } from "./ConfigProvider-DR9YMy9U.js";
-const N = "_chip_1yjgf_3", z = "_sm_1yjgf_20", T = "_md_1yjgf_25", $ = "_lg_1yjgf_30", E = "_contained_1yjgf_37", M = "_filled_1yjgf_42", P = "_outlined_1yjgf_46", R = "_text_1yjgf_51", q = "_clickable_1yjgf_57", D = "_disabled_1yjgf_82", F = "_startIcon_1yjgf_89", G = "_avatar_1yjgf_95", H = "_withAvatar_1yjgf_102", J = "_withDelete_1yjgf_106", L = "_deleteBtn_1yjgf_127", t = {
-  chip: N,
-  sm: z,
+import { jsxs as C, jsx as n } from "react/jsx-runtime";
+import { forwardRef as y } from "react";
+import { clsx as A } from "clsx";
+import { I as B } from "./Icon-DaTvzLBu.js";
+import { a as N } from "./ConfigProvider-B_RSn9bb.js";
+const z = "_chip_1utbf_3", j = "_sm_1utbf_20", T = "_md_1utbf_25", $ = "_lg_1utbf_30", E = "_contained_1utbf_37", M = "_filled_1utbf_42", P = "_outlined_1utbf_46", R = "_text_1utbf_51", q = "_clickable_1utbf_57", D = "_disabled_1utbf_82", F = "_startIcon_1utbf_89", G = "_avatar_1utbf_95", H = "_withAvatar_1utbf_102", J = "_withDelete_1utbf_106", L = "_deleteBtn_1utbf_127", t = {
+  chip: z,
+  sm: j,
   md: T,
   lg: $,
   contained: E,
@@ -19,36 +19,36 @@ const N = "_chip_1yjgf_3", z = "_sm_1yjgf_20", T = "_md_1yjgf_25", $ = "_lg_1yjg
   withAvatar: H,
   withDelete: J,
   deleteBtn: L
-}, X = I(function({
-  variant: d = "filled",
+}, X = y(function({
+  variant: u = "filled",
   color: r = "primary",
   size: _ = "md",
-  clickable: m = !1,
+  clickable: d = !1,
   disabled: c = !1,
   startIcon: f,
   avatar: o,
   onDelete: l,
-  deleteIcon: g,
-  deleteLabel: p,
-  deleteTabIndex: y,
+  deleteIcon: b,
+  deleteLabel: m,
+  deleteTabIndex: p,
   className: h,
-  style: j,
+  style: v,
   children: s,
   onKeyDown: i,
-  ...u
-}, b) {
-  const v = B(), e = m && !c, x = (a) => {
+  ...x
+}, k) {
+  const w = N(), e = d && !c, g = (a) => {
     a.stopPropagation(), c || l == null || l();
-  }, k = (a) => {
+  }, I = (a) => {
     e && (a.key === "Enter" || a.key === " ") && (a.preventDefault(), a.currentTarget.click()), i == null || i(a);
   };
-  return /* @__PURE__ */ w(
+  return /* @__PURE__ */ C(
     "div",
     {
-      ref: b,
-      className: C(
+      ref: k,
+      className: A(
         t.chip,
-        t[d],
+        t[u],
         t[_],
         e && t.clickable,
         c && t.disabled,
@@ -59,13 +59,13 @@ const N = "_chip_1yjgf_3", z = "_sm_1yjgf_20", T = "_md_1yjgf_25", $ = "_lg_1yjg
       style: {
         "--tz-btn-rgb": `var(--tz-color-${r}-rgb)`,
         "--tz-btn-on": `var(--tz-color-${r}-contrast, #fff)`,
-        ...j
+        ...v
       },
       role: e ? "button" : void 0,
       tabIndex: e ? 0 : void 0,
       "aria-disabled": c || void 0,
-      onKeyDown: k,
-      ...u,
+      onKeyDown: I,
+      ...x,
       children: [
         o ? /* @__PURE__ */ n("span", { className: t.avatar, children: o }) : f ? /* @__PURE__ */ n("span", { className: t.startIcon, children: f }) : null,
         s != null && s !== "" ? /* @__PURE__ */ n("span", { children: s }) : null,
@@ -74,12 +74,12 @@ const N = "_chip_1yjgf_3", z = "_sm_1yjgf_20", T = "_md_1yjgf_25", $ = "_lg_1yjg
           {
             type: "button",
             className: t.deleteBtn,
-            onClick: x,
+            onClick: g,
             onMouseDown: (a) => a.preventDefault(),
-            "aria-label": p ?? v("common.remove"),
-            tabIndex: y,
+            "aria-label": m ?? w("common.remove"),
+            tabIndex: p,
             disabled: c,
-            children: g ?? /* @__PURE__ */ n(A, { name: "CloseCircle", size: _ })
+            children: b ?? /* @__PURE__ */ n(B, { name: "CloseCircle", size: _ })
           }
         ) : null
       ]
@@ -89,4 +89,4 @@ const N = "_chip_1yjgf_3", z = "_sm_1yjgf_20", T = "_md_1yjgf_25", $ = "_lg_1yjg
 export {
   X as C
 };
-//# sourceMappingURL=Chip-DdKhcstm.js.map
+//# sourceMappingURL=Chip-C-5Z5wsC.js.map

package/dist/{Chip-DdKhcstm.js.map → Chip-C-5Z5wsC.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Chip-DdKhcstm.js","sources":["../src/components/Chip/Chip.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type CSSProperties,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n} from 'react'\nimport { clsx } from 'clsx'\nimport { useT, type ThemeColor } from '../../theme'\nimport { Icon } from '../Icon'\nimport styles from './Chip.module.css'\n\nexport type ChipVariant = 'contained' | 'filled' | 'outlined' | 'text'\nexport type ChipSize = 'sm' | 'md' | 'lg'\n\nexport interface ChipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'> {\n  /** Visual style. Defaults to `filled` (a soft tinted chip). */\n  variant?: ChipVariant\n  /** Theme palette token that tints the chip. Defaults to `primary`. */\n  color?: ThemeColor\n  /** Preset size — height + font. Defaults to `md`. */\n  size?: ChipSize\n  /** Makes the chip interactive (hover, pointer, keyboard, `onClick`). Off by default (a static tag). */\n  clickable?: boolean\n  /** Dims the chip and disables all interaction. */\n  disabled?: boolean\n  /** Leading icon (e.g. an `<Icon />`). Ignored when `avatar` is set. */\n  startIcon?: ReactNode\n  /** Leading avatar (e.g. an `<Avatar />`), sized to the chip and flush to the left. */\n  avatar?: ReactNode\n  /** When provided, shows a trailing delete button that calls this (its click won't trigger `onClick`). */\n  onDelete?: () => void\n  /** Custom delete icon. Defaults to a `CloseCircle`. */\n  deleteIcon?: ReactNode\n  /** Accessible label for the delete button. Defaults to `\"Remove\"`. */\n  deleteLabel?: string\n  /** Tab index for the delete button — pass `-1` when the chip lives inside a composite widget (e.g. a multi-select) that owns keyboard focus. */\n  deleteTabIndex?: number\n  /** Chip label. */\n  children?: ReactNode\n}\n\n/**\n * A compact tag/token. Static by default; `clickable` makes it an interactive `role=\"button\"`\n * (hover + Enter/Space). Supports a leading `startIcon` or `avatar` and a trailing delete button via\n * `onDelete`. Tinted by `color` through the shared `--tz-btn-rgb` / `--tz-btn-on` pattern across the\n * four standard variants. Token-only styling.\n */\nexport const Chip = forwardRef<HTMLDivElement, ChipProps>(function Chip(\n  {\n    variant = 'filled',\n    color = 'primary',\n    size = 'md',\n    clickable = false,\n    disabled = false,\n    startIcon,\n    avatar,\n    onDelete,\n    deleteIcon,\n    deleteLabel,\n    deleteTabIndex,\n    className,\n    style,\n    children,\n    onKeyDown,\n    ...props\n  },\n  ref,\n) {\n  const t = useT()\n  const interactive = clickable && !disabled\n\n  const handleDelete = (event: MouseEvent<HTMLButtonElement>) => {\n    event.stopPropagation()\n    if (!disabled) onDelete?.()\n  }\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    if (interactive && (event.key === 'Enter' || event.key === ' ')) {\n      event.preventDefault()\n      event.currentTarget.click()\n    }\n    onKeyDown?.(event)\n  }\n\n  return (\n    <div\n      ref={ref}\n      className={clsx(\n        styles.chip,\n        styles[variant],\n        styles[size],\n        interactive && styles.clickable,\n        disabled && styles.disabled,\n        avatar && styles.withAvatar,\n        onDelete && styles.withDelete,\n        className,\n      )}\n      style={\n        {\n          '--tz-btn-rgb': `var(--tz-color-${color}-rgb)`,\n          '--tz-btn-on': `var(--tz-color-${color}-contrast, #fff)`,\n          ...style,\n        } as CSSProperties\n      }\n      role={interactive ? 'button' : undefined}\n      tabIndex={interactive ? 0 : undefined}\n      aria-disabled={disabled || undefined}\n      onKeyDown={handleKeyDown}\n      {...props}\n    >\n      {avatar ? (\n        <span className={styles.avatar}>{avatar}</span>\n      ) : startIcon ? (\n        <span className={styles.startIcon}>{startIcon}</span>\n      ) : null}\n      {children != null && children !== '' ? <span>{children}</span> : null}\n      {onDelete ? (\n        <button\n          type=\"button\"\n          className={styles.deleteBtn}\n          onClick={handleDelete}\n          onMouseDown={(event) => event.preventDefault()}\n          aria-label={deleteLabel ?? t('common.remove')}\n          tabIndex={deleteTabIndex}\n          disabled={disabled}\n        >\n          {deleteIcon ?? <Icon name=\"CloseCircle\" size={size} />}\n        </button>\n      ) : null}\n    </div>\n  )\n})\n"],"names":["Chip","forwardRef","variant","color","size","clickable","disabled","startIcon","avatar","onDelete","deleteIcon","deleteLabel","deleteTabIndex","className","style","children","onKeyDown","props","ref","t","useT","interactive","handleDelete","event","handleKeyDown","jsxs","clsx","styles","jsx","Icon"],"mappings":";;;;;;;;;;;;;;;;;;;;;GAiDaA,IAAOC,EAAsC,SACxD;AAAA,EACE,SAAAC,IAAU;AAAA,EACV,OAAAC,IAAQ;AAAA,EACR,MAAAC,IAAO;AAAA,EACP,WAAAC,IAAY;AAAA,EACZ,UAAAC,IAAW;AAAA,EACX,WAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,aAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAIC,EAAA,GACJC,IAAchB,KAAa,CAACC,GAE5BgB,IAAe,CAACC,MAAyC;AAC7D,IAAAA,EAAM,gBAAA,GACDjB,KAAUG,KAAA,QAAAA;AAAA,EACjB,GAEMe,IAAgB,CAACD,MAAyC;AAC9D,IAAIF,MAAgBE,EAAM,QAAQ,WAAWA,EAAM,QAAQ,SACzDA,EAAM,eAAA,GACNA,EAAM,cAAc,MAAA,IAEtBP,KAAA,QAAAA,EAAYO;AAAA,EACd;AAEA,SACE,gBAAAE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAP;AAAA,MACA,WAAWQ;AAAA,QACTC,EAAO;AAAA,QACPA,EAAOzB,CAAO;AAAA,QACdyB,EAAOvB,CAAI;AAAA,QACXiB,KAAeM,EAAO;AAAA,QACtBrB,KAAYqB,EAAO;AAAA,QACnBnB,KAAUmB,EAAO;AAAA,QACjBlB,KAAYkB,EAAO;AAAA,QACnBd;AAAA,MAAA;AAAA,MAEF,OACE;AAAA,QACE,gBAAgB,kBAAkBV,CAAK;AAAA,QACvC,eAAe,kBAAkBA,CAAK;AAAA,QACtC,GAAGW;AAAA,MAAA;AAAA,MAGP,MAAMO,IAAc,WAAW;AAAA,MAC/B,UAAUA,IAAc,IAAI;AAAA,MAC5B,iBAAef,KAAY;AAAA,MAC3B,WAAWkB;AAAA,MACV,GAAGP;AAAA,MAEH,UAAA;AAAA,QAAAT,IACC,gBAAAoB,EAAC,QAAA,EAAK,WAAWD,EAAO,QAAS,UAAAnB,GAAO,IACtCD,IACF,gBAAAqB,EAAC,QAAA,EAAK,WAAWD,EAAO,WAAY,aAAU,IAC5C;AAAA,QACHZ,KAAY,QAAQA,MAAa,KAAK,gBAAAa,EAAC,QAAA,EAAM,UAAAb,GAAS,IAAU;AAAA,QAChEN,IACC,gBAAAmB;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,WAAWD,EAAO;AAAA,YAClB,SAASL;AAAA,YACT,aAAa,CAACC,MAAUA,EAAM,eAAA;AAAA,YAC9B,cAAYZ,KAAeQ,EAAE,eAAe;AAAA,YAC5C,UAAUP;AAAA,YACV,UAAAN;AAAA,YAEC,UAAAI,KAAc,gBAAAkB,EAACC,GAAA,EAAK,MAAK,eAAc,MAAAzB,EAAA,CAAY;AAAA,UAAA;AAAA,QAAA,IAEpD;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;"}
+{"version":3,"file":"Chip-C-5Z5wsC.js","sources":["../src/components/Chip/Chip.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type CSSProperties,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n} from 'react'\nimport { clsx } from 'clsx'\nimport { useT, type ThemeColor } from '../../theme'\nimport { Icon } from '../Icon'\nimport styles from './Chip.module.css'\n\nexport type ChipVariant = 'contained' | 'filled' | 'outlined' | 'text'\nexport type ChipSize = 'sm' | 'md' | 'lg'\n\nexport interface ChipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'> {\n  /** Visual style. Defaults to `filled` (a soft tinted chip). */\n  variant?: ChipVariant\n  /** Theme palette token that tints the chip. Defaults to `primary`. */\n  color?: ThemeColor\n  /** Preset size — height + font. Defaults to `md`. */\n  size?: ChipSize\n  /** Makes the chip interactive (hover, pointer, keyboard, `onClick`). Off by default (a static tag). */\n  clickable?: boolean\n  /** Dims the chip and disables all interaction. */\n  disabled?: boolean\n  /** Leading icon (e.g. an `<Icon />`). Ignored when `avatar` is set. */\n  startIcon?: ReactNode\n  /** Leading avatar (e.g. an `<Avatar />`), sized to the chip and flush to the left. */\n  avatar?: ReactNode\n  /** When provided, shows a trailing delete button that calls this (its click won't trigger `onClick`). */\n  onDelete?: () => void\n  /** Custom delete icon. Defaults to a `CloseCircle`. */\n  deleteIcon?: ReactNode\n  /** Accessible label for the delete button. Defaults to `\"Remove\"`. */\n  deleteLabel?: string\n  /** Tab index for the delete button — pass `-1` when the chip lives inside a composite widget (e.g. a multi-select) that owns keyboard focus. */\n  deleteTabIndex?: number\n  /** Chip label. */\n  children?: ReactNode\n}\n\n/**\n * A compact tag/token. Static by default; `clickable` makes it an interactive `role=\"button\"`\n * (hover + Enter/Space). Supports a leading `startIcon` or `avatar` and a trailing delete button via\n * `onDelete`. Tinted by `color` through the shared `--tz-btn-rgb` / `--tz-btn-on` pattern across the\n * four standard variants. Token-only styling.\n */\nexport const Chip = forwardRef<HTMLDivElement, ChipProps>(function Chip(\n  {\n    variant = 'filled',\n    color = 'primary',\n    size = 'md',\n    clickable = false,\n    disabled = false,\n    startIcon,\n    avatar,\n    onDelete,\n    deleteIcon,\n    deleteLabel,\n    deleteTabIndex,\n    className,\n    style,\n    children,\n    onKeyDown,\n    ...props\n  },\n  ref,\n) {\n  const t = useT()\n  const interactive = clickable && !disabled\n\n  const handleDelete = (event: MouseEvent<HTMLButtonElement>) => {\n    event.stopPropagation()\n    if (!disabled) onDelete?.()\n  }\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    if (interactive && (event.key === 'Enter' || event.key === ' ')) {\n      event.preventDefault()\n      event.currentTarget.click()\n    }\n    onKeyDown?.(event)\n  }\n\n  return (\n    <div\n      ref={ref}\n      className={clsx(\n        styles.chip,\n        styles[variant],\n        styles[size],\n        interactive && styles.clickable,\n        disabled && styles.disabled,\n        avatar && styles.withAvatar,\n        onDelete && styles.withDelete,\n        className,\n      )}\n      style={\n        {\n          '--tz-btn-rgb': `var(--tz-color-${color}-rgb)`,\n          '--tz-btn-on': `var(--tz-color-${color}-contrast, #fff)`,\n          ...style,\n        } as CSSProperties\n      }\n      role={interactive ? 'button' : undefined}\n      tabIndex={interactive ? 0 : undefined}\n      aria-disabled={disabled || undefined}\n      onKeyDown={handleKeyDown}\n      {...props}\n    >\n      {avatar ? (\n        <span className={styles.avatar}>{avatar}</span>\n      ) : startIcon ? (\n        <span className={styles.startIcon}>{startIcon}</span>\n      ) : null}\n      {children != null && children !== '' ? <span>{children}</span> : null}\n      {onDelete ? (\n        <button\n          type=\"button\"\n          className={styles.deleteBtn}\n          onClick={handleDelete}\n          onMouseDown={(event) => event.preventDefault()}\n          aria-label={deleteLabel ?? t('common.remove')}\n          tabIndex={deleteTabIndex}\n          disabled={disabled}\n        >\n          {deleteIcon ?? <Icon name=\"CloseCircle\" size={size} />}\n        </button>\n      ) : null}\n    </div>\n  )\n})\n"],"names":["Chip","forwardRef","variant","color","size","clickable","disabled","startIcon","avatar","onDelete","deleteIcon","deleteLabel","deleteTabIndex","className","style","children","onKeyDown","props","ref","t","useT","interactive","handleDelete","event","handleKeyDown","jsxs","clsx","styles","jsx","Icon"],"mappings":";;;;;;;;;;;;;;;;;;;;;GAiDaA,IAAOC,EAAsC,SACxD;AAAA,EACE,SAAAC,IAAU;AAAA,EACV,OAAAC,IAAQ;AAAA,EACR,MAAAC,IAAO;AAAA,EACP,WAAAC,IAAY;AAAA,EACZ,UAAAC,IAAW;AAAA,EACX,WAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,aAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAIC,EAAA,GACJC,IAAchB,KAAa,CAACC,GAE5BgB,IAAe,CAACC,MAAyC;AAC7D,IAAAA,EAAM,gBAAA,GACDjB,KAAUG,KAAA,QAAAA;AAAA,EACjB,GAEMe,IAAgB,CAACD,MAAyC;AAC9D,IAAIF,MAAgBE,EAAM,QAAQ,WAAWA,EAAM,QAAQ,SACzDA,EAAM,eAAA,GACNA,EAAM,cAAc,MAAA,IAEtBP,KAAA,QAAAA,EAAYO;AAAA,EACd;AAEA,SACE,gBAAAE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAP;AAAA,MACA,WAAWQ;AAAA,QACTC,EAAO;AAAA,QACPA,EAAOzB,CAAO;AAAA,QACdyB,EAAOvB,CAAI;AAAA,QACXiB,KAAeM,EAAO;AAAA,QACtBrB,KAAYqB,EAAO;AAAA,QACnBnB,KAAUmB,EAAO;AAAA,QACjBlB,KAAYkB,EAAO;AAAA,QACnBd;AAAA,MAAA;AAAA,MAEF,OACE;AAAA,QACE,gBAAgB,kBAAkBV,CAAK;AAAA,QACvC,eAAe,kBAAkBA,CAAK;AAAA,QACtC,GAAGW;AAAA,MAAA;AAAA,MAGP,MAAMO,IAAc,WAAW;AAAA,MAC/B,UAAUA,IAAc,IAAI;AAAA,MAC5B,iBAAef,KAAY;AAAA,MAC3B,WAAWkB;AAAA,MACV,GAAGP;AAAA,MAEH,UAAA;AAAA,QAAAT,IACC,gBAAAoB,EAAC,QAAA,EAAK,WAAWD,EAAO,QAAS,UAAAnB,GAAO,IACtCD,IACF,gBAAAqB,EAAC,QAAA,EAAK,WAAWD,EAAO,WAAY,aAAU,IAC5C;AAAA,QACHZ,KAAY,QAAQA,MAAa,KAAK,gBAAAa,EAAC,QAAA,EAAM,UAAAb,GAAS,IAAU;AAAA,QAChEN,IACC,gBAAAmB;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,WAAWD,EAAO;AAAA,YAClB,SAASL;AAAA,YACT,aAAa,CAACC,MAAUA,EAAM,eAAA;AAAA,YAC9B,cAAYZ,KAAeQ,EAAE,eAAe;AAAA,YAC5C,UAAUP;AAAA,YACV,UAAAN;AAAA,YAEC,UAAAI,KAAc,gBAAAkB,EAACC,GAAA,EAAK,MAAK,eAAc,MAAAzB,EAAA,CAAY;AAAA,UAAA;AAAA,QAAA,IAEpD;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;"}

package/dist/Chip-CqOqfafx.cjs

@@ -0,0 +1,2 @@
+"use strict";const c=require("react/jsx-runtime"),C=require("react"),I=require("clsx"),q=require("./Icon-BVULqOJD.cjs"),y=require("./ConfigProvider-BElY0HuV.cjs"),A="_chip_1utbf_3",B="_sm_1utbf_20",N="_md_1utbf_25",z="_lg_1utbf_30",P="_contained_1utbf_37",R="_filled_1utbf_42",T="_outlined_1utbf_46",$="_text_1utbf_51",E="_clickable_1utbf_57",M="_disabled_1utbf_82",D="_startIcon_1utbf_89",F="_avatar_1utbf_95",G="_withAvatar_1utbf_102",H="_withDelete_1utbf_106",J="_deleteBtn_1utbf_127",t={chip:A,sm:B,md:N,lg:z,contained:P,filled:R,outlined:T,text:$,clickable:E,disabled:M,startIcon:D,avatar:F,withAvatar:G,withDelete:H,deleteBtn:J},L=C.forwardRef(function({variant:d="filled",color:r="primary",size:_="md",clickable:f=!1,disabled:n=!1,startIcon:u,avatar:l,onDelete:s,deleteIcon:b,deleteLabel:h,deleteTabIndex:m,className:p,style:x,children:i,onKeyDown:o,...v},g){const k=y.useT(),a=f&&!n,w=e=>{e.stopPropagation(),n||s==null||s()},j=e=>{a&&(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),e.currentTarget.click()),o==null||o(e)};return c.jsxs("div",{ref:g,className:I.clsx(t.chip,t[d],t[_],a&&t.clickable,n&&t.disabled,l&&t.withAvatar,s&&t.withDelete,p),style:{"--tz-btn-rgb":`var(--tz-color-${r}-rgb)`,"--tz-btn-on":`var(--tz-color-${r}-contrast, #fff)`,...x},role:a?"button":void 0,tabIndex:a?0:void 0,"aria-disabled":n||void 0,onKeyDown:j,...v,children:[l?c.jsx("span",{className:t.avatar,children:l}):u?c.jsx("span",{className:t.startIcon,children:u}):null,i!=null&&i!==""?c.jsx("span",{children:i}):null,s?c.jsx("button",{type:"button",className:t.deleteBtn,onClick:w,onMouseDown:e=>e.preventDefault(),"aria-label":h??k("common.remove"),tabIndex:m,disabled:n,children:b??c.jsx(q.Icon,{name:"CloseCircle",size:_})}):null]})});exports.Chip=L;
+//# sourceMappingURL=Chip-CqOqfafx.cjs.map

package/dist/{Chip-gUH_7nQc.cjs.map → Chip-CqOqfafx.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"Chip-gUH_7nQc.cjs","sources":["../src/components/Chip/Chip.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type CSSProperties,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n} from 'react'\nimport { clsx } from 'clsx'\nimport { useT, type ThemeColor } from '../../theme'\nimport { Icon } from '../Icon'\nimport styles from './Chip.module.css'\n\nexport type ChipVariant = 'contained' | 'filled' | 'outlined' | 'text'\nexport type ChipSize = 'sm' | 'md' | 'lg'\n\nexport interface ChipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'> {\n  /** Visual style. Defaults to `filled` (a soft tinted chip). */\n  variant?: ChipVariant\n  /** Theme palette token that tints the chip. Defaults to `primary`. */\n  color?: ThemeColor\n  /** Preset size — height + font. Defaults to `md`. */\n  size?: ChipSize\n  /** Makes the chip interactive (hover, pointer, keyboard, `onClick`). Off by default (a static tag). */\n  clickable?: boolean\n  /** Dims the chip and disables all interaction. */\n  disabled?: boolean\n  /** Leading icon (e.g. an `<Icon />`). Ignored when `avatar` is set. */\n  startIcon?: ReactNode\n  /** Leading avatar (e.g. an `<Avatar />`), sized to the chip and flush to the left. */\n  avatar?: ReactNode\n  /** When provided, shows a trailing delete button that calls this (its click won't trigger `onClick`). */\n  onDelete?: () => void\n  /** Custom delete icon. Defaults to a `CloseCircle`. */\n  deleteIcon?: ReactNode\n  /** Accessible label for the delete button. Defaults to `\"Remove\"`. */\n  deleteLabel?: string\n  /** Tab index for the delete button — pass `-1` when the chip lives inside a composite widget (e.g. a multi-select) that owns keyboard focus. */\n  deleteTabIndex?: number\n  /** Chip label. */\n  children?: ReactNode\n}\n\n/**\n * A compact tag/token. Static by default; `clickable` makes it an interactive `role=\"button\"`\n * (hover + Enter/Space). Supports a leading `startIcon` or `avatar` and a trailing delete button via\n * `onDelete`. Tinted by `color` through the shared `--tz-btn-rgb` / `--tz-btn-on` pattern across the\n * four standard variants. Token-only styling.\n */\nexport const Chip = forwardRef<HTMLDivElement, ChipProps>(function Chip(\n  {\n    variant = 'filled',\n    color = 'primary',\n    size = 'md',\n    clickable = false,\n    disabled = false,\n    startIcon,\n    avatar,\n    onDelete,\n    deleteIcon,\n    deleteLabel,\n    deleteTabIndex,\n    className,\n    style,\n    children,\n    onKeyDown,\n    ...props\n  },\n  ref,\n) {\n  const t = useT()\n  const interactive = clickable && !disabled\n\n  const handleDelete = (event: MouseEvent<HTMLButtonElement>) => {\n    event.stopPropagation()\n    if (!disabled) onDelete?.()\n  }\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    if (interactive && (event.key === 'Enter' || event.key === ' ')) {\n      event.preventDefault()\n      event.currentTarget.click()\n    }\n    onKeyDown?.(event)\n  }\n\n  return (\n    <div\n      ref={ref}\n      className={clsx(\n        styles.chip,\n        styles[variant],\n        styles[size],\n        interactive && styles.clickable,\n        disabled && styles.disabled,\n        avatar && styles.withAvatar,\n        onDelete && styles.withDelete,\n        className,\n      )}\n      style={\n        {\n          '--tz-btn-rgb': `var(--tz-color-${color}-rgb)`,\n          '--tz-btn-on': `var(--tz-color-${color}-contrast, #fff)`,\n          ...style,\n        } as CSSProperties\n      }\n      role={interactive ? 'button' : undefined}\n      tabIndex={interactive ? 0 : undefined}\n      aria-disabled={disabled || undefined}\n      onKeyDown={handleKeyDown}\n      {...props}\n    >\n      {avatar ? (\n        <span className={styles.avatar}>{avatar}</span>\n      ) : startIcon ? (\n        <span className={styles.startIcon}>{startIcon}</span>\n      ) : null}\n      {children != null && children !== '' ? <span>{children}</span> : null}\n      {onDelete ? (\n        <button\n          type=\"button\"\n          className={styles.deleteBtn}\n          onClick={handleDelete}\n          onMouseDown={(event) => event.preventDefault()}\n          aria-label={deleteLabel ?? t('common.remove')}\n          tabIndex={deleteTabIndex}\n          disabled={disabled}\n        >\n          {deleteIcon ?? <Icon name=\"CloseCircle\" size={size} />}\n        </button>\n      ) : null}\n    </div>\n  )\n})\n"],"names":["Chip","forwardRef","variant","color","size","clickable","disabled","startIcon","avatar","onDelete","deleteIcon","deleteLabel","deleteTabIndex","className","style","children","onKeyDown","props","ref","t","useT","interactive","handleDelete","event","handleKeyDown","jsxs","clsx","styles","jsx","Icon"],"mappings":"2nBAiDaA,EAAOC,EAAAA,WAAsC,SACxD,CACE,QAAAC,EAAU,SACV,MAAAC,EAAQ,UACR,KAAAC,EAAO,KACP,UAAAC,EAAY,GACZ,SAAAC,EAAW,GACX,UAAAC,EACA,OAAAC,EACA,SAAAC,EACA,WAAAC,EACA,YAAAC,EACA,eAAAC,EACA,UAAAC,EACA,MAAAC,EACA,SAAAC,EACA,UAAAC,EACA,GAAGC,CACL,EACAC,EACA,CACA,MAAMC,EAAIC,EAAAA,KAAA,EACJC,EAAchB,GAAa,CAACC,EAE5BgB,EAAgBC,GAAyC,CAC7DA,EAAM,gBAAA,EACDjB,GAAUG,GAAA,MAAAA,GACjB,EAEMe,EAAiBD,GAAyC,CAC1DF,IAAgBE,EAAM,MAAQ,SAAWA,EAAM,MAAQ,OACzDA,EAAM,eAAA,EACNA,EAAM,cAAc,MAAA,GAEtBP,GAAA,MAAAA,EAAYO,EACd,EAEA,OACEE,EAAAA,KAAC,MAAA,CACC,IAAAP,EACA,UAAWQ,EAAAA,KACTC,EAAO,KACPA,EAAOzB,CAAO,EACdyB,EAAOvB,CAAI,EACXiB,GAAeM,EAAO,UACtBrB,GAAYqB,EAAO,SACnBnB,GAAUmB,EAAO,WACjBlB,GAAYkB,EAAO,WACnBd,CAAA,EAEF,MACE,CACE,eAAgB,kBAAkBV,CAAK,QACvC,cAAe,kBAAkBA,CAAK,mBACtC,GAAGW,CAAA,EAGP,KAAMO,EAAc,SAAW,OAC/B,SAAUA,EAAc,EAAI,OAC5B,gBAAef,GAAY,OAC3B,UAAWkB,EACV,GAAGP,EAEH,SAAA,CAAAT,EACCoB,EAAAA,IAAC,OAAA,CAAK,UAAWD,EAAO,OAAS,SAAAnB,EAAO,EACtCD,EACFqB,MAAC,OAAA,CAAK,UAAWD,EAAO,UAAY,WAAU,EAC5C,KACHZ,GAAY,MAAQA,IAAa,GAAKa,EAAAA,IAAC,OAAA,CAAM,SAAAb,EAAS,EAAU,KAChEN,EACCmB,EAAAA,IAAC,SAAA,CACC,KAAK,SACL,UAAWD,EAAO,UAClB,QAASL,EACT,YAAcC,GAAUA,EAAM,eAAA,EAC9B,aAAYZ,GAAeQ,EAAE,eAAe,EAC5C,SAAUP,EACV,SAAAN,EAEC,SAAAI,GAAckB,MAACC,EAAAA,KAAA,CAAK,KAAK,cAAc,KAAAzB,CAAA,CAAY,CAAA,CAAA,EAEpD,IAAA,CAAA,CAAA,CAGV,CAAC"}
+{"version":3,"file":"Chip-CqOqfafx.cjs","sources":["../src/components/Chip/Chip.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type CSSProperties,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n} from 'react'\nimport { clsx } from 'clsx'\nimport { useT, type ThemeColor } from '../../theme'\nimport { Icon } from '../Icon'\nimport styles from './Chip.module.css'\n\nexport type ChipVariant = 'contained' | 'filled' | 'outlined' | 'text'\nexport type ChipSize = 'sm' | 'md' | 'lg'\n\nexport interface ChipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'> {\n  /** Visual style. Defaults to `filled` (a soft tinted chip). */\n  variant?: ChipVariant\n  /** Theme palette token that tints the chip. Defaults to `primary`. */\n  color?: ThemeColor\n  /** Preset size — height + font. Defaults to `md`. */\n  size?: ChipSize\n  /** Makes the chip interactive (hover, pointer, keyboard, `onClick`). Off by default (a static tag). */\n  clickable?: boolean\n  /** Dims the chip and disables all interaction. */\n  disabled?: boolean\n  /** Leading icon (e.g. an `<Icon />`). Ignored when `avatar` is set. */\n  startIcon?: ReactNode\n  /** Leading avatar (e.g. an `<Avatar />`), sized to the chip and flush to the left. */\n  avatar?: ReactNode\n  /** When provided, shows a trailing delete button that calls this (its click won't trigger `onClick`). */\n  onDelete?: () => void\n  /** Custom delete icon. Defaults to a `CloseCircle`. */\n  deleteIcon?: ReactNode\n  /** Accessible label for the delete button. Defaults to `\"Remove\"`. */\n  deleteLabel?: string\n  /** Tab index for the delete button — pass `-1` when the chip lives inside a composite widget (e.g. a multi-select) that owns keyboard focus. */\n  deleteTabIndex?: number\n  /** Chip label. */\n  children?: ReactNode\n}\n\n/**\n * A compact tag/token. Static by default; `clickable` makes it an interactive `role=\"button\"`\n * (hover + Enter/Space). Supports a leading `startIcon` or `avatar` and a trailing delete button via\n * `onDelete`. Tinted by `color` through the shared `--tz-btn-rgb` / `--tz-btn-on` pattern across the\n * four standard variants. Token-only styling.\n */\nexport const Chip = forwardRef<HTMLDivElement, ChipProps>(function Chip(\n  {\n    variant = 'filled',\n    color = 'primary',\n    size = 'md',\n    clickable = false,\n    disabled = false,\n    startIcon,\n    avatar,\n    onDelete,\n    deleteIcon,\n    deleteLabel,\n    deleteTabIndex,\n    className,\n    style,\n    children,\n    onKeyDown,\n    ...props\n  },\n  ref,\n) {\n  const t = useT()\n  const interactive = clickable && !disabled\n\n  const handleDelete = (event: MouseEvent<HTMLButtonElement>) => {\n    event.stopPropagation()\n    if (!disabled) onDelete?.()\n  }\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    if (interactive && (event.key === 'Enter' || event.key === ' ')) {\n      event.preventDefault()\n      event.currentTarget.click()\n    }\n    onKeyDown?.(event)\n  }\n\n  return (\n    <div\n      ref={ref}\n      className={clsx(\n        styles.chip,\n        styles[variant],\n        styles[size],\n        interactive && styles.clickable,\n        disabled && styles.disabled,\n        avatar && styles.withAvatar,\n        onDelete && styles.withDelete,\n        className,\n      )}\n      style={\n        {\n          '--tz-btn-rgb': `var(--tz-color-${color}-rgb)`,\n          '--tz-btn-on': `var(--tz-color-${color}-contrast, #fff)`,\n          ...style,\n        } as CSSProperties\n      }\n      role={interactive ? 'button' : undefined}\n      tabIndex={interactive ? 0 : undefined}\n      aria-disabled={disabled || undefined}\n      onKeyDown={handleKeyDown}\n      {...props}\n    >\n      {avatar ? (\n        <span className={styles.avatar}>{avatar}</span>\n      ) : startIcon ? (\n        <span className={styles.startIcon}>{startIcon}</span>\n      ) : null}\n      {children != null && children !== '' ? <span>{children}</span> : null}\n      {onDelete ? (\n        <button\n          type=\"button\"\n          className={styles.deleteBtn}\n          onClick={handleDelete}\n          onMouseDown={(event) => event.preventDefault()}\n          aria-label={deleteLabel ?? t('common.remove')}\n          tabIndex={deleteTabIndex}\n          disabled={disabled}\n        >\n          {deleteIcon ?? <Icon name=\"CloseCircle\" size={size} />}\n        </button>\n      ) : null}\n    </div>\n  )\n})\n"],"names":["Chip","forwardRef","variant","color","size","clickable","disabled","startIcon","avatar","onDelete","deleteIcon","deleteLabel","deleteTabIndex","className","style","children","onKeyDown","props","ref","t","useT","interactive","handleDelete","event","handleKeyDown","jsxs","clsx","styles","jsx","Icon"],"mappings":"2nBAiDaA,EAAOC,EAAAA,WAAsC,SACxD,CACE,QAAAC,EAAU,SACV,MAAAC,EAAQ,UACR,KAAAC,EAAO,KACP,UAAAC,EAAY,GACZ,SAAAC,EAAW,GACX,UAAAC,EACA,OAAAC,EACA,SAAAC,EACA,WAAAC,EACA,YAAAC,EACA,eAAAC,EACA,UAAAC,EACA,MAAAC,EACA,SAAAC,EACA,UAAAC,EACA,GAAGC,CACL,EACAC,EACA,CACA,MAAMC,EAAIC,EAAAA,KAAA,EACJC,EAAchB,GAAa,CAACC,EAE5BgB,EAAgBC,GAAyC,CAC7DA,EAAM,gBAAA,EACDjB,GAAUG,GAAA,MAAAA,GACjB,EAEMe,EAAiBD,GAAyC,CAC1DF,IAAgBE,EAAM,MAAQ,SAAWA,EAAM,MAAQ,OACzDA,EAAM,eAAA,EACNA,EAAM,cAAc,MAAA,GAEtBP,GAAA,MAAAA,EAAYO,EACd,EAEA,OACEE,EAAAA,KAAC,MAAA,CACC,IAAAP,EACA,UAAWQ,EAAAA,KACTC,EAAO,KACPA,EAAOzB,CAAO,EACdyB,EAAOvB,CAAI,EACXiB,GAAeM,EAAO,UACtBrB,GAAYqB,EAAO,SACnBnB,GAAUmB,EAAO,WACjBlB,GAAYkB,EAAO,WACnBd,CAAA,EAEF,MACE,CACE,eAAgB,kBAAkBV,CAAK,QACvC,cAAe,kBAAkBA,CAAK,mBACtC,GAAGW,CAAA,EAGP,KAAMO,EAAc,SAAW,OAC/B,SAAUA,EAAc,EAAI,OAC5B,gBAAef,GAAY,OAC3B,UAAWkB,EACV,GAAGP,EAEH,SAAA,CAAAT,EACCoB,EAAAA,IAAC,OAAA,CAAK,UAAWD,EAAO,OAAS,SAAAnB,EAAO,EACtCD,EACFqB,MAAC,OAAA,CAAK,UAAWD,EAAO,UAAY,WAAU,EAC5C,KACHZ,GAAY,MAAQA,IAAa,GAAKa,EAAAA,IAAC,OAAA,CAAM,SAAAb,EAAS,EAAU,KAChEN,EACCmB,EAAAA,IAAC,SAAA,CACC,KAAK,SACL,UAAWD,EAAO,UAClB,QAASL,EACT,YAAcC,GAAUA,EAAM,eAAA,EAC9B,aAAYZ,GAAeQ,EAAE,eAAe,EAC5C,SAAUP,EACV,SAAAN,EAEC,SAAAI,GAAckB,MAACC,EAAAA,KAAA,CAAK,KAAK,cAAc,KAAAzB,CAAA,CAAY,CAAA,CAAA,EAEpD,IAAA,CAAA,CAAA,CAGV,CAAC"}

package/dist/ChoiceCardGroup-BSagRbPI.cjs

@@ -0,0 +1,2 @@
+"use strict";const s=require("react/jsx-runtime"),a=require("react"),$=require("clsx"),O=require("./formContext-bTWrqdEV.cjs"),V=require("./Typography-B6ASPrzT.cjs"),P=require("./names-BJnFU_5m.cjs"),H=require("./Icon-BVULqOJD.cjs"),w=a.createContext(null);function J(){return a.useContext(w)}const K="_group_fjrqx_2",Q="_groupLabel_fjrqx_8",U="_required_fjrqx_13",W="_grid_fjrqx_17",X="_card_fjrqx_24",Y="_disabled_fjrqx_42",Z="_selected_fjrqx_42",ee="_input_fjrqx_51",re="_error_fjrqx_55",se="_left_fjrqx_67",te="_text_fjrqx_71",oe="_sm_fjrqx_77",ce="_md_fjrqx_85",le="_lg_fjrqx_93",ne="_indicator_fjrqx_117",ie="_radioDot_fjrqx_162",ae="_iconBox_fjrqx_185",de="_label_fjrqx_212",_e="_description_fjrqx_219",r={group:K,groupLabel:Q,required:U,grid:W,card:X,disabled:Y,selected:Z,input:ee,error:re,left:se,text:te,sm:oe,md:ce,lg:le,indicator:ne,radioDot:ie,iconBox:ae,label:de,description:_e},xe=new Set(P.ICON_NAMES),R=a.forwardRef(function({value:c,label:d,description:_,icon:o,align:l,color:h,size:b,error:g,checked:x,onChange:f,name:S,disabled:I,className:z,style:A,...B},D){const e=J(),p=h??(e==null?void 0:e.color)??"primary",C=b??(e==null?void 0:e.size)??"md",v=g??(e==null?void 0:e.error)??!1,u=I??(e==null?void 0:e.disabled)??!1,i=S??(e==null?void 0:e.name),N=l??(e==null?void 0:e.align)??(o==null?"left":"center"),[j,y]=a.useState(!1),m=e?e.isSelected(c):x!==void 0?x:j,E=n=>{if(!u){if(e){e.toggle(c);return}x===void 0&&y(n.target.checked),f==null||f(n.target.checked)}},G=typeof o=="string"&&xe.has(o)?s.jsx(H.Icon,{name:o,size:C}):o;return s.jsxs("label",{className:$.clsx(r.card,r[C],N==="left"&&r.left,m&&r.selected,v&&r.error,u&&r.disabled,z),style:{"--tz-btn-rgb":`var(--tz-color-${p}-rgb)`,"--tz-btn-on":`var(--tz-color-${p}-contrast, #fff)`,...A},children:[s.jsx("input",{ref:D,type:e!=null&&e.exclusive?"radio":"checkbox",className:r.input,name:i,value:c,checked:m,onChange:E,disabled:u,"aria-invalid":v||void 0,...B}),s.jsx("span",{className:$.clsx(r.indicator,(e==null?void 0:e.exclusive)&&r.radioDot),"aria-hidden":"true"}),o!=null&&s.jsx("span",{className:r.iconBox,"aria-hidden":"true",children:G}),(d!=null||_!=null)&&s.jsxs("span",{className:r.text,children:[d!=null&&s.jsx("span",{className:r.label,children:d}),_!=null&&s.jsx("span",{className:r.description,children:_})]})]})}),fe=a.forwardRef(function({exclusive:c=!1,value:d,defaultValue:_,onChange:o,name:l,options:h,label:b,minCardWidth:g=160,align:x,size:f="md",color:S="primary",error:I,required:z=!1,disabled:A=!1,children:B,className:D,style:e,...p},C){const v=a.useId(),u=l??`choice-${v}`,i=O.useFormContext(),N=!!(i&&l),j=i&&l?i.field(l):void 0,y=d!==void 0?d:N?i.values[l]:void 0,m=y!==void 0,[E,G]=a.useState(_),n=m?y:E,k=I??(j==null?void 0:j.error)??!1,F={name:u,exclusive:c,isSelected:t=>c?n===t:Array.isArray(n)&&n.includes(t),toggle:t=>{let q;if(c)q=t;else{const L=Array.isArray(n)?n:[];q=L.includes(t)?L.filter(M=>M!==t):[...L,t]}m||G(q),N&&i.setValue(l,q),o==null||o(q)},size:f,align:x,color:S,disabled:A,error:k};return s.jsxs("div",{ref:C,role:c?"radiogroup":"group","aria-invalid":k||void 0,className:$.clsx(r.group,D),style:e,...p,children:[b!=null&&s.jsxs("span",{className:r.groupLabel,children:[s.jsx(V.Typography,{as:"span",variant:"bodySmall",color:"muted",children:b}),z&&s.jsx("span",{className:r.required,"aria-hidden":"true",children:"*"})]}),s.jsx("div",{className:r.grid,style:{"--cc-min":`${g}px`},children:s.jsx(w.Provider,{value:F,children:h?h.map(t=>s.jsx(R,{value:t.value,label:t.label,description:t.description,icon:t.icon,disabled:t.disabled},t.value)):B})})]})});exports.ChoiceCard=R;exports.ChoiceCardGroup=fe;
+//# sourceMappingURL=ChoiceCardGroup-BSagRbPI.cjs.map