@techzyapp/ui-library 1.0.27 → 1.0.29

package/dist/Switch-Jh2Ch8GO.js

@@ -0,0 +1,85 @@
+import { jsx as o, jsxs as p } from "react/jsx-runtime";
+import { forwardRef as R, useId as V, useState as A } from "react";
+import { clsx as b } from "clsx";
+import { u as D } from "./formContext-B7ln1Miy.js";
+const G = "_field_1hhz8_1", H = "_row_1hhz8_9", J = "_disabled_1hhz8_21", K = "_input_1hhz8_27", L = "_track_1hhz8_41", M = "_thumb_1hhz8_60", O = "_error_1hhz8_72", P = "_label_1hhz8_76", Q = "_required_1hhz8_81", T = "_sm_1hhz8_87", U = "_md_1hhz8_99", W = "_lg_1hhz8_111", t = {
+  field: G,
+  row: H,
+  disabled: J,
+  input: K,
+  track: L,
+  thumb: M,
+  error: O,
+  label: P,
+  required: Q,
+  sm: T,
+  md: U,
+  lg: W
+}, et = R(function({
+  label: n,
+  color: d = "accent",
+  size: v = "md",
+  error: k,
+  required: w = !1,
+  checked: h,
+  defaultChecked: x = !1,
+  onChange: l,
+  name: s,
+  onBlur: a,
+  disabled: _ = !1,
+  id: N,
+  className: g,
+  style: q,
+  ...S
+}, y) {
+  const I = V(), j = N ?? I, r = D(), m = !!(r && s), e = r && s ? r.field(s) : void 0, f = h !== void 0 ? h : m ? !!r.values[s] : void 0, u = f !== void 0, [B, C] = A(x), F = u ? f : B, z = k ?? (e == null ? void 0 : e.error) ?? !1, $ = (c) => {
+    const i = c.target.checked;
+    u || C(i), m && r.setValue(s, i), l == null || l(i);
+  }, E = (c) => {
+    e == null || e.onBlur(c), a == null || a(c);
+  };
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      className: b(
+        t.field,
+        z && t.error,
+        _ && t.disabled,
+        g
+      ),
+      style: {
+        "--tz-btn-rgb": `var(--tz-color-${d}-rgb)`,
+        "--tz-btn-on": `var(--tz-color-${d}-contrast, #fff)`,
+        ...q
+      },
+      children: /* @__PURE__ */ p("label", { className: b(t.row, t[v]), children: [
+        /* @__PURE__ */ o(
+          "input",
+          {
+            ref: y,
+            id: j,
+            name: s,
+            type: "checkbox",
+            role: "switch",
+            className: t.input,
+            checked: F,
+            onChange: $,
+            onBlur: E,
+            disabled: _,
+            "aria-invalid": z || void 0,
+            ...S
+          }
+        ),
+        /* @__PURE__ */ o("span", { className: t.track, "aria-hidden": "true", children: /* @__PURE__ */ o("span", { className: t.thumb }) }),
+        n != null && /* @__PURE__ */ p("span", { className: t.label, children: [
+          n,
+          w && /* @__PURE__ */ o("span", { className: t.required, "aria-hidden": "true", children: "*" })
+        ] })
+      ] })
+    }
+  );
+});
+export {
+  et as S
+};
+//# sourceMappingURL=Switch-Jh2Ch8GO.js.map

package/dist/{Switch-ESrhkpJC.js.map → Switch-Jh2Ch8GO.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Switch-ESrhkpJC.js","sources":["../src/components/Switch/Switch.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useId,\n  useState,\n  type ChangeEvent,\n  type CSSProperties,\n  type FocusEvent,\n  type InputHTMLAttributes,\n  type ReactNode,\n} from 'react'\nimport { clsx } from 'clsx'\nimport { useFormContext } from '../../form/formContext'\nimport type { ThemeColor } from '../../theme'\nimport styles from './Switch.module.css'\n\nexport type SwitchSize = 'sm' | 'md' | 'lg'\n\nexport interface SwitchProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'size' | 'color' | 'type' | 'onChange'\n> {\n  /** Text shown to the right of the switch. */\n  label?: ReactNode\n  /** Theme palette token used for the \"on\" fill. Defaults to `accent`. */\n  color?: ThemeColor\n  /** Preset size — track/thumb dimensions and label font. */\n  size?: SwitchSize\n  /** Marks the field invalid — reddens the track ring (no helper text). */\n  error?: boolean\n  /** Adds a red asterisk after the label. */\n  required?: boolean\n  /** Controlled on/off state. */\n  checked?: boolean\n  /** Initial state for uncontrolled use. Defaults to `false`. */\n  defaultChecked?: boolean\n  /** Fires with the next on/off state. */\n  onChange?: (checked: boolean) => void\n}\n\n/**\n * A toggle switch. The native `<input type=\"checkbox\" role=\"switch\">` is visually hidden but fully\n * accessible (keyboard + screen reader); a styled track + sliding thumb show the state, the track\n * filling with `color` when on. 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 track (no message text). Styling uses `--tz-*` tokens only.\n */\nexport const Switch = forwardRef<HTMLInputElement, SwitchProps>(function Switch(\n  {\n    label,\n    color = 'accent',\n    size = 'md',\n    error,\n    required = 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  // 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={ref}\n          id={id}\n          name={name}\n          type=\"checkbox\"\n          role=\"switch\"\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.track} aria-hidden=\"true\">\n          <span className={styles.thumb} />\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":["Switch","forwardRef","label","color","size","error","required","checked","defaultChecked","onChange","name","onBlur","disabled","idProp","className","style","props","ref","reactId","useId","id","form","useFormContext","isFormBound","bound","externalChecked","isControlled","internal","setInternal","useState","isChecked","resolvedError","handleChange","event","next","handleBlur","jsx","clsx","styles","jsxs"],"mappings":";;;;;;;;;;;;;;;;;GA8CaA,KAASC,EAA0C,SAC9D;AAAA,EACE,OAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,SAAAC;AAAA,EACA,gBAAAC,IAAiB;AAAA,EACjB,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,IAAIC;AAAA,EACJ,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAUC,EAAA,GACVC,IAAKP,KAAUK,GAGfG,IAAOC,EAAA,GACPC,IAAc,GAAQF,KAAQX,IAC9Bc,IAAQH,KAAQX,IAAOW,EAAK,MAAMX,CAAI,IAAI,QAE1Ce,IACJlB,MAAY,SAAYA,IAAUgB,IAAc,EAAQF,EAAM,OAAOX,CAAK,IAAK,QAC3EgB,IAAeD,MAAoB,QACnC,CAACE,GAAUC,CAAW,IAAIC,EAAkBrB,CAAc,GAC1DsB,IAAYJ,IAAeD,IAAmBE,GAE9CI,IAAgB1B,MAASmB,KAAA,gBAAAA,EAAO,UAAS,IAEzCQ,IAAe,CAACC,MAAyC;AAC7D,UAAMC,IAAOD,EAAM,OAAO;AAC1B,IAAKP,KAAcE,EAAYM,CAAI,GAC/BX,KAAaF,EAAM,SAASX,GAAOwB,CAAI,GAC3CzB,KAAA,QAAAA,EAAWyB;AAAA,EACb,GAEMC,IAAa,CAACF,MAAwC;AAC1D,IAAAT,KAAA,QAAAA,EAAO,OAAOS,IACdtB,KAAA,QAAAA,EAASsB;AAAA,EACX;AAEA,SACE,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACTC,EAAO;AAAA,QACPP,KAAiBO,EAAO;AAAA,QACxB1B,KAAY0B,EAAO;AAAA,QACnBxB;AAAA,MAAA;AAAA,MAEF,OACE;AAAA,QACE,gBAAgB,kBAAkBX,CAAK;AAAA,QACvC,eAAe,kBAAkBA,CAAK;AAAA,QACtC,GAAGY;AAAA,MAAA;AAAA,MAIP,UAAA,gBAAAwB,EAAC,WAAM,WAAWF,EAAKC,EAAO,KAAKA,EAAOlC,CAAI,CAAC,GAC7C,UAAA;AAAA,QAAA,gBAAAgC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAAnB;AAAA,YACA,IAAAG;AAAA,YACA,MAAAV;AAAA,YACA,MAAK;AAAA,YACL,MAAK;AAAA,YACL,WAAW4B,EAAO;AAAA,YAClB,SAASR;AAAA,YACT,UAAUE;AAAA,YACV,QAAQG;AAAA,YACR,UAAAvB;AAAA,YACA,gBAAcmB,KAAiB;AAAA,YAC9B,GAAGf;AAAA,UAAA;AAAA,QAAA;AAAA,QAEN,gBAAAoB,EAAC,QAAA,EAAK,WAAWE,EAAO,OAAO,eAAY,QACzC,UAAA,gBAAAF,EAAC,QAAA,EAAK,WAAWE,EAAO,MAAA,CAAO,GACjC;AAAA,QACCpC,KAAS,QACR,gBAAAqC,EAAC,QAAA,EAAK,WAAWD,EAAO,OACrB,UAAA;AAAA,UAAApC;AAAA,UACAI,uBACE,QAAA,EAAK,WAAWgC,EAAO,UAAU,eAAY,QAAO,UAAA,IAAA,CAErD;AAAA,QAAA,EAAA,CAEJ;AAAA,MAAA,EAAA,CAEJ;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}
+{"version":3,"file":"Switch-Jh2Ch8GO.js","sources":["../src/components/Switch/Switch.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useId,\n  useState,\n  type ChangeEvent,\n  type CSSProperties,\n  type FocusEvent,\n  type InputHTMLAttributes,\n  type ReactNode,\n} from 'react'\nimport { clsx } from 'clsx'\nimport { useFormContext } from '../../form/formContext'\nimport type { ThemeColor } from '../../theme'\nimport styles from './Switch.module.css'\n\nexport type SwitchSize = 'sm' | 'md' | 'lg'\n\nexport interface SwitchProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'size' | 'color' | 'type' | 'onChange'\n> {\n  /** Text shown to the right of the switch. */\n  label?: ReactNode\n  /** Theme palette token used for the \"on\" fill. Defaults to `accent`. */\n  color?: ThemeColor\n  /** Preset size — track/thumb dimensions and label font. */\n  size?: SwitchSize\n  /** Marks the field invalid — reddens the track ring (no helper text). */\n  error?: boolean\n  /** Adds a red asterisk after the label. */\n  required?: boolean\n  /** Controlled on/off state. */\n  checked?: boolean\n  /** Initial state for uncontrolled use. Defaults to `false`. */\n  defaultChecked?: boolean\n  /** Fires with the next on/off state. */\n  onChange?: (checked: boolean) => void\n}\n\n/**\n * A toggle switch. The native `<input type=\"checkbox\" role=\"switch\">` is visually hidden but fully\n * accessible (keyboard + screen reader); a styled track + sliding thumb show the state, the track\n * filling with `color` when on. 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 track (no message text). Styling uses `--tz-*` tokens only.\n */\nexport const Switch = forwardRef<HTMLInputElement, SwitchProps>(function Switch(\n  {\n    label,\n    color = 'accent',\n    size = 'md',\n    error,\n    required = 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  // 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={ref}\n          id={id}\n          name={name}\n          type=\"checkbox\"\n          role=\"switch\"\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.track} aria-hidden=\"true\">\n          <span className={styles.thumb} />\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":["Switch","forwardRef","label","color","size","error","required","checked","defaultChecked","onChange","name","onBlur","disabled","idProp","className","style","props","ref","reactId","useId","id","form","useFormContext","isFormBound","bound","externalChecked","isControlled","internal","setInternal","useState","isChecked","resolvedError","handleChange","event","next","handleBlur","jsx","clsx","styles","jsxs"],"mappings":";;;;;;;;;;;;;;;;;GA8CaA,KAASC,EAA0C,SAC9D;AAAA,EACE,OAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,SAAAC;AAAA,EACA,gBAAAC,IAAiB;AAAA,EACjB,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,IAAIC;AAAA,EACJ,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAUC,EAAA,GACVC,IAAKP,KAAUK,GAGfG,IAAOC,EAAA,GACPC,IAAc,GAAQF,KAAQX,IAC9Bc,IAAQH,KAAQX,IAAOW,EAAK,MAAMX,CAAI,IAAI,QAE1Ce,IACJlB,MAAY,SAAYA,IAAUgB,IAAc,EAAQF,EAAM,OAAOX,CAAK,IAAK,QAC3EgB,IAAeD,MAAoB,QACnC,CAACE,GAAUC,CAAW,IAAIC,EAAkBrB,CAAc,GAC1DsB,IAAYJ,IAAeD,IAAmBE,GAE9CI,IAAgB1B,MAASmB,KAAA,gBAAAA,EAAO,UAAS,IAEzCQ,IAAe,CAACC,MAAyC;AAC7D,UAAMC,IAAOD,EAAM,OAAO;AAC1B,IAAKP,KAAcE,EAAYM,CAAI,GAC/BX,KAAaF,EAAM,SAASX,GAAOwB,CAAI,GAC3CzB,KAAA,QAAAA,EAAWyB;AAAA,EACb,GAEMC,IAAa,CAACF,MAAwC;AAC1D,IAAAT,KAAA,QAAAA,EAAO,OAAOS,IACdtB,KAAA,QAAAA,EAASsB;AAAA,EACX;AAEA,SACE,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACTC,EAAO;AAAA,QACPP,KAAiBO,EAAO;AAAA,QACxB1B,KAAY0B,EAAO;AAAA,QACnBxB;AAAA,MAAA;AAAA,MAEF,OACE;AAAA,QACE,gBAAgB,kBAAkBX,CAAK;AAAA,QACvC,eAAe,kBAAkBA,CAAK;AAAA,QACtC,GAAGY;AAAA,MAAA;AAAA,MAIP,UAAA,gBAAAwB,EAAC,WAAM,WAAWF,EAAKC,EAAO,KAAKA,EAAOlC,CAAI,CAAC,GAC7C,UAAA;AAAA,QAAA,gBAAAgC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAAnB;AAAA,YACA,IAAAG;AAAA,YACA,MAAAV;AAAA,YACA,MAAK;AAAA,YACL,MAAK;AAAA,YACL,WAAW4B,EAAO;AAAA,YAClB,SAASR;AAAA,YACT,UAAUE;AAAA,YACV,QAAQG;AAAA,YACR,UAAAvB;AAAA,YACA,gBAAcmB,KAAiB;AAAA,YAC9B,GAAGf;AAAA,UAAA;AAAA,QAAA;AAAA,QAEN,gBAAAoB,EAAC,QAAA,EAAK,WAAWE,EAAO,OAAO,eAAY,QACzC,UAAA,gBAAAF,EAAC,QAAA,EAAK,WAAWE,EAAO,MAAA,CAAO,GACjC;AAAA,QACCpC,KAAS,QACR,gBAAAqC,EAAC,QAAA,EAAK,WAAWD,EAAO,OACrB,UAAA;AAAA,UAAApC;AAAA,UACAI,uBACE,QAAA,EAAK,WAAWgC,EAAO,UAAU,eAAY,QAAO,UAAA,IAAA,CAErD;AAAA,QAAA,EAAA,CAEJ;AAAA,MAAA,EAAA,CAEJ;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}