@clubmed/trident-ui 2.0.0-beta.65 → 2.0.0-beta.67

package/examples/password-demo.js

@@ -4,6 +4,7 @@ import { jsx as t } from "react/jsx-runtime";
 //#region lib/examples/password-demo.tsx
 function n() {
 	return /* @__PURE__ */ t(e, {
+		name: "password",
 		label: "Password",
 		description: "Enter your password",
 		placeholder: "Enter password",

package/examples/password-demo.js.map

@@ -1 +1 @@
-{"version":3,"file":"password-demo.js","names":[],"sources":["../../lib/examples/password-demo.tsx"],"sourcesContent":["'use client';\n\nimport { Password } from '@/ui/forms/password/Password';\n\nexport default function PasswordDemo() {\n  return (\n    <Password\n      label=\"Password\"\n      description=\"Enter your password\"\n      placeholder=\"Enter password\"\n      validationMessages={[\n        {\n          label: 'At least 12 characters',\n          status: 'success',\n        },\n        {\n          label: 'At least one lowercase',\n          status: 'success',\n        },\n        {\n          label: 'At least one uppercase',\n          status: 'error',\n        },\n        {\n          label: \"At least one special character #$%&'()*\",\n          status: 'error',\n        },\n        {\n          label: 'At least one number',\n          status: 'error',\n        },\n      ]}\n    />\n  );\n}\n"],"mappings":";;;;AAIA,SAAwB,IAAe;AACrC,QACE,kBAAC,GAAD;EACE,OAAM;EACN,aAAY;EACZ,aAAY;EACZ,oBAAoB;GAClB;IACE,OAAO;IACP,QAAQ;IACT;GACD;IACE,OAAO;IACP,QAAQ;IACT;GACD;IACE,OAAO;IACP,QAAQ;IACT;GACD;IACE,OAAO;IACP,QAAQ;IACT;GACD;IACE,OAAO;IACP,QAAQ;;;EAGZ,CAAA"}
+{"version":3,"file":"password-demo.js","names":[],"sources":["../../lib/examples/password-demo.tsx"],"sourcesContent":["'use client';\n\nimport { Password } from '@/ui/forms/password/Password';\n\nexport default function PasswordDemo() {\n  return (\n    <Password\n      name=\"password\"\n      label=\"Password\"\n      description=\"Enter your password\"\n      placeholder=\"Enter password\"\n      validationMessages={[\n        {\n          label: 'At least 12 characters',\n          status: 'success',\n        },\n        {\n          label: 'At least one lowercase',\n          status: 'success',\n        },\n        {\n          label: 'At least one uppercase',\n          status: 'error',\n        },\n        {\n          label: \"At least one special character #$%&'()*\",\n          status: 'error',\n        },\n        {\n          label: 'At least one number',\n          status: 'error',\n        },\n      ]}\n    />\n  );\n}\n"],"mappings":";;;;AAIA,SAAwB,IAAe;AACrC,QACE,kBAAC,GAAD;EACE,MAAK;EACL,OAAM;EACN,aAAY;EACZ,aAAY;EACZ,oBAAoB;GAClB;IACE,OAAO;IACP,QAAQ;IACT;GACD;IACE,OAAO;IACP,QAAQ;IACT;GACD;IACE,OAAO;IACP,QAAQ;IACT;GACD;IACE,OAAO;IACP,QAAQ;IACT;GACD;IACE,OAAO;IACP,QAAQ;;;EAGZ,CAAA"}

package/examples/scrollbar-demo.js

@@ -3,6 +3,7 @@ import { jsx as t, jsxs as n } from "react/jsx-runtime";
 //#region lib/examples/scrollbar-demo.tsx
 function r() {
 	return /* @__PURE__ */ n("div", { children: [/* @__PURE__ */ t(e, {
+		"aria-label": "Demo horizontal scroller",
 		timelineName: "--scroller-outer",
 		scrollbarWidth: "60%",
 		children: /* @__PURE__ */ t("div", {
@@ -18,6 +19,7 @@ function r() {
 	}), /* @__PURE__ */ t("div", {
 		className: "bg-ultramarine p-8 -m-8 mt-8",
 		children: /* @__PURE__ */ t(e, {
+			"aria-label": "Dark horizontal scroller",
 			variant: "dark",
 			timelineName: "--scrollerDark-outer",
 			scrollbarWidth: "60%",

package/examples/scrollbar-demo.js.map

@@ -1 +1 @@
-{"version":3,"file":"scrollbar-demo.js","names":[],"sources":["../../lib/examples/scrollbar-demo.tsx"],"sourcesContent":["import { Scrollbar } from '../ui/Scrollbar';\n\nexport default function ScrollbarDemo() {\n  return (\n    <div>\n      <Scrollbar timelineName=\"--scroller-outer\" scrollbarWidth=\"60%\">\n        <div className=\"w-600 p-16\">\n          <div className=\"flex gap-8\">\n            {Array.from({ length: 20 }).map((_, i) => (\n              <div\n                key={i}\n                className=\"flex h-100 w-100 flex-shrink-0 items-center justify-center rounded-8 bg-ultramarine text-white\"\n              >\n                {i + 1}\n              </div>\n            ))}\n          </div>\n        </div>\n      </Scrollbar>\n      <div className=\"bg-ultramarine p-8 -m-8 mt-8\">\n        <Scrollbar variant=\"dark\" timelineName=\"--scrollerDark-outer\" scrollbarWidth=\"60%\">\n          <div className=\"w-600 p-16\">\n            <div className=\"flex gap-8\">\n              {Array.from({ length: 20 }).map((_, i) => (\n                <div\n                  key={i}\n                  className=\"flex h-100 w-100 flex-shrink-0 items-center justify-center rounded-8 bg-white text-black\"\n                >\n                  {i + 1}\n                </div>\n              ))}\n            </div>\n          </div>\n        </Scrollbar>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;AAEA,SAAwB,IAAgB;AACtC,QACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,GAAD;EAAW,cAAa;EAAmB,gBAAe;YACxD,kBAAC,OAAD;GAAK,WAAU;aACb,kBAAC,OAAD;IAAK,WAAU;cACZ,MAAM,KAAK,EAAE,QAAQ,IAAI,CAAC,CAAC,KAAK,GAAG,MAClC,kBAAC,OAAD;KAEE,WAAU;eAET,IAAI;KACD,EAJC,EAID,CACN;IACE,CAAA;GACF,CAAA;EACI,CAAA,EACZ,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,GAAD;GAAW,SAAQ;GAAO,cAAa;GAAuB,gBAAe;aAC3E,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,OAAD;KAAK,WAAU;eACZ,MAAM,KAAK,EAAE,QAAQ,IAAI,CAAC,CAAC,KAAK,GAAG,MAClC,kBAAC,OAAD;MAEE,WAAU;gBAET,IAAI;MACD,EAJC,EAID,CACN;KACE,CAAA;IACF,CAAA;GACI,CAAA;EACR,CAAA,CACF,EAAA,CAAA"}
+{"version":3,"file":"scrollbar-demo.js","names":[],"sources":["../../lib/examples/scrollbar-demo.tsx"],"sourcesContent":["import { Scrollbar } from '../ui/Scrollbar';\n\nexport default function ScrollbarDemo() {\n  return (\n    <div>\n      <Scrollbar\n        aria-label=\"Demo horizontal scroller\"\n        timelineName=\"--scroller-outer\"\n        scrollbarWidth=\"60%\"\n      >\n        <div className=\"w-600 p-16\">\n          <div className=\"flex gap-8\">\n            {Array.from({ length: 20 }).map((_, i) => (\n              <div\n                key={i}\n                className=\"flex h-100 w-100 flex-shrink-0 items-center justify-center rounded-8 bg-ultramarine text-white\"\n              >\n                {i + 1}\n              </div>\n            ))}\n          </div>\n        </div>\n      </Scrollbar>\n      <div className=\"bg-ultramarine p-8 -m-8 mt-8\">\n        <Scrollbar\n          aria-label=\"Dark horizontal scroller\"\n          variant=\"dark\"\n          timelineName=\"--scrollerDark-outer\"\n          scrollbarWidth=\"60%\"\n        >\n          <div className=\"w-600 p-16\">\n            <div className=\"flex gap-8\">\n              {Array.from({ length: 20 }).map((_, i) => (\n                <div\n                  key={i}\n                  className=\"flex h-100 w-100 flex-shrink-0 items-center justify-center rounded-8 bg-white text-black\"\n                >\n                  {i + 1}\n                </div>\n              ))}\n            </div>\n          </div>\n        </Scrollbar>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;AAEA,SAAwB,IAAgB;AACtC,QACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,GAAD;EACE,cAAW;EACX,cAAa;EACb,gBAAe;YAEf,kBAAC,OAAD;GAAK,WAAU;aACb,kBAAC,OAAD;IAAK,WAAU;cACZ,MAAM,KAAK,EAAE,QAAQ,IAAI,CAAC,CAAC,KAAK,GAAG,MAClC,kBAAC,OAAD;KAEE,WAAU;eAET,IAAI;KACD,EAJC,EAID,CACN;IACE,CAAA;GACF,CAAA;EACI,CAAA,EACZ,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,GAAD;GACE,cAAW;GACX,SAAQ;GACR,cAAa;GACb,gBAAe;aAEf,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,OAAD;KAAK,WAAU;eACZ,MAAM,KAAK,EAAE,QAAQ,IAAI,CAAC,CAAC,KAAK,GAAG,MAClC,kBAAC,OAAD;MAEE,WAAU;gBAET,IAAI;MACD,EAJC,EAID,CACN;KACE,CAAA;IACF,CAAA;GACI,CAAA;EACR,CAAA,CACF,EAAA,CAAA"}

package/examples/select-demo.js

@@ -4,6 +4,7 @@ import { jsx as t, jsxs as n } from "react/jsx-runtime";
 //#region lib/examples/select-demo.tsx
 function r() {
 	return /* @__PURE__ */ n(e, {
+		name: "country",
 		label: "Country",
 		description: "Select your country",
 		children: [

package/examples/select-demo.js.map

@@ -1 +1 @@
-{"version":3,"file":"select-demo.js","names":[],"sources":["../../lib/examples/select-demo.tsx"],"sourcesContent":["'use client';\n\nimport { Select } from '@/ui/forms/Select';\n\nexport default function SelectDemo() {\n  return (\n    <Select label=\"Country\" description=\"Select your country\">\n      <option value=\"\">Choose a country</option>\n      <option value=\"us\">United States</option>\n      <option value=\"uk\">United Kingdom</option>\n      <option value=\"ca\">Canada</option>\n      <option value=\"fr\">France</option>\n    </Select>\n  );\n}\n"],"mappings":";;;;AAIA,SAAwB,IAAa;AACnC,QACE,kBAAC,GAAD;EAAQ,OAAM;EAAU,aAAY;YAApC;GACE,kBAAC,UAAD;IAAQ,OAAM;cAAG;IAAyB,CAAA;GAC1C,kBAAC,UAAD;IAAQ,OAAM;cAAK;IAAsB,CAAA;GACzC,kBAAC,UAAD;IAAQ,OAAM;cAAK;IAAuB,CAAA;GAC1C,kBAAC,UAAD;IAAQ,OAAM;cAAK;IAAe,CAAA;GAClC,kBAAC,UAAD;IAAQ,OAAM;cAAK;IAAe,CAAA"}
+{"version":3,"file":"select-demo.js","names":[],"sources":["../../lib/examples/select-demo.tsx"],"sourcesContent":["'use client';\n\nimport { Select } from '@/ui/forms/Select';\n\nexport default function SelectDemo() {\n  return (\n    <Select name=\"country\" label=\"Country\" description=\"Select your country\">\n      <option value=\"\">Choose a country</option>\n      <option value=\"us\">United States</option>\n      <option value=\"uk\">United Kingdom</option>\n      <option value=\"ca\">Canada</option>\n      <option value=\"fr\">France</option>\n    </Select>\n  );\n}\n"],"mappings":";;;;AAIA,SAAwB,IAAa;AACnC,QACE,kBAAC,GAAD;EAAQ,MAAK;EAAU,OAAM;EAAU,aAAY;YAAnD;GACE,kBAAC,UAAD;IAAQ,OAAM;cAAG;IAAyB,CAAA;GAC1C,kBAAC,UAAD;IAAQ,OAAM;cAAK;IAAsB,CAAA;GACzC,kBAAC,UAAD;IAAQ,OAAM;cAAK;IAAuB,CAAA;GAC1C,kBAAC,UAAD;IAAQ,OAAM;cAAK;IAAe,CAAA;GAClC,kBAAC,UAAD;IAAQ,OAAM;cAAK;IAAe,CAAA"}

package/examples/slider-frame-demo.js

@@ -6,6 +6,7 @@ import { jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region lib/examples/slider-frame-demo.tsx
 function a() {
 	return /* @__PURE__ */ r(n, {
+		"aria-label": "Mountain Resort image carousel",
 		format: "horizontal",
 		className: "max-w-380",
 		items: Array.from({ length: 5 }, (e, t) => ({

package/examples/slider-frame-demo.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider-frame-demo.js","names":[],"sources":["../../lib/examples/slider-frame-demo.tsx"],"sourcesContent":["'use client';\n\nimport { FrameLabelsWrapper } from '@/ui/frame/FrameLabelsWrapper';\nimport { FrameTitle } from '@/ui/frame/FrameTitle';\nimport { SliderFrame } from '@/ui/frame/SliderFrame';\n\nexport default function SliderFrameDemo() {\n  return (\n    <SliderFrame\n      format=\"horizontal\"\n      className=\"max-w-380\"\n      items={Array.from({ length: 5 }, (_, i) => ({\n        alt: `Mountain landscape ${i + 1}`,\n        src: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4',\n      }))}\n      labels={{ next: 'Next image', previous: 'Previous image' }}\n    >\n      <FrameLabelsWrapper hasImage>\n        <FrameTitle className=\"w-full justify-center text-center\" hasImage>\n          <div>\n            <div className=\"text-b2 font-semibold\">Mountain Resort</div>\n            <div className=\"text-b3\">Winter Collection</div>\n          </div>\n        </FrameTitle>\n      </FrameLabelsWrapper>\n    </SliderFrame>\n  );\n}\n"],"mappings":";;;;;;AAMA,SAAwB,IAAkB;AACxC,QACE,kBAAC,GAAD;EACE,QAAO;EACP,WAAU;EACV,OAAO,MAAM,KAAK,EAAE,QAAQ,GAAG,GAAG,GAAG,OAAO;GAC1C,KAAK,sBAAsB,IAAI;GAC/B,KAAK;GACN,EAAE;EACH,QAAQ;GAAE,MAAM;GAAc,UAAU;GAAkB;YAE1D,kBAAC,GAAD;GAAoB,UAAA;aAClB,kBAAC,GAAD;IAAY,WAAU;IAAoC,UAAA;cACxD,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,OAAD;KAAK,WAAU;eAAwB;KAAqB,CAAA,EAC5D,kBAAC,OAAD;KAAK,WAAU;eAAU;KAAuB,CAAA,CAC5C,EAAA,CAAA;IACK,CAAA;GACM,CAAA;EACT,CAAA"}
+{"version":3,"file":"slider-frame-demo.js","names":[],"sources":["../../lib/examples/slider-frame-demo.tsx"],"sourcesContent":["'use client';\n\nimport { FrameLabelsWrapper } from '@/ui/frame/FrameLabelsWrapper';\nimport { FrameTitle } from '@/ui/frame/FrameTitle';\nimport { SliderFrame } from '@/ui/frame/SliderFrame';\n\nexport default function SliderFrameDemo() {\n  return (\n    <SliderFrame\n      aria-label=\"Mountain Resort image carousel\"\n      format=\"horizontal\"\n      className=\"max-w-380\"\n      items={Array.from({ length: 5 }, (_, i) => ({\n        alt: `Mountain landscape ${i + 1}`,\n        src: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4',\n      }))}\n      labels={{ next: 'Next image', previous: 'Previous image' }}\n    >\n      <FrameLabelsWrapper hasImage>\n        <FrameTitle className=\"w-full justify-center text-center\" hasImage>\n          <div>\n            <div className=\"text-b2 font-semibold\">Mountain Resort</div>\n            <div className=\"text-b3\">Winter Collection</div>\n          </div>\n        </FrameTitle>\n      </FrameLabelsWrapper>\n    </SliderFrame>\n  );\n}\n"],"mappings":";;;;;;AAMA,SAAwB,IAAkB;AACxC,QACE,kBAAC,GAAD;EACE,cAAW;EACX,QAAO;EACP,WAAU;EACV,OAAO,MAAM,KAAK,EAAE,QAAQ,GAAG,GAAG,GAAG,OAAO;GAC1C,KAAK,sBAAsB,IAAI;GAC/B,KAAK;GACN,EAAE;EACH,QAAQ;GAAE,MAAM;GAAc,UAAU;GAAkB;YAE1D,kBAAC,GAAD;GAAoB,UAAA;aAClB,kBAAC,GAAD;IAAY,WAAU;IAAoC,UAAA;cACxD,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,OAAD;KAAK,WAAU;eAAwB;KAAqB,CAAA,EAC5D,kBAAC,OAAD;KAAK,WAAU;eAAU;KAAuB,CAAA,CAC5C,EAAA,CAAA;IACK,CAAA;GACM,CAAA;EACT,CAAA"}

package/examples/slider-frame-with-button-demo.js

@@ -7,6 +7,7 @@ import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region lib/examples/slider-frame-with-button-demo.tsx
 function o() {
 	return /* @__PURE__ */ i(r, {
+		"aria-label": "Mountain Resort image carousel",
 		format: "horizontal",
 		className: "max-w-380",
 		items: Array.from({ length: 5 }, (e, t) => ({

package/examples/slider-frame-with-button-demo.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider-frame-with-button-demo.js","names":[],"sources":["../../lib/examples/slider-frame-with-button-demo.tsx"],"sourcesContent":["'use client';\n\nimport { Button } from '@/ui/buttons/Button';\nimport { FrameLabelsWrapper } from '@/ui/frame/FrameLabelsWrapper';\nimport { FrameTitle } from '@/ui/frame/FrameTitle';\nimport { SliderFrame } from '@/ui/frame/SliderFrame';\n\nexport default function SliderFrameWithButtonDemo() {\n  return (\n    <SliderFrame\n      format=\"horizontal\"\n      className=\"max-w-380\"\n      items={Array.from({ length: 5 }, (_, i) => ({\n        alt: `Mountain landscape ${i + 1}`,\n        src: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4',\n      }))}\n      labels={{ next: 'Next image', previous: 'Previous image' }}\n    >\n      <FrameLabelsWrapper hasImage>\n        <FrameTitle className=\"w-full justify-between\" hasImage>\n          <div>\n            <div className=\"text-b2 font-semibold\">Mountain Resort</div>\n            <div className=\"text-b3\">Winter</div>\n          </div>\n          <Button\n            aria-label=\"Explore Mountain Resort\"\n            className=\"pointer-events-auto shrink-0\"\n            color=\"white\"\n            icon=\"ArrowDefaultRight\"\n            theme=\"outline\"\n            variant=\"circle\"\n          />\n        </FrameTitle>\n      </FrameLabelsWrapper>\n    </SliderFrame>\n  );\n}\n"],"mappings":";;;;;;;AAOA,SAAwB,IAA4B;AAClD,QACE,kBAAC,GAAD;EACE,QAAO;EACP,WAAU;EACV,OAAO,MAAM,KAAK,EAAE,QAAQ,GAAG,GAAG,GAAG,OAAO;GAC1C,KAAK,sBAAsB,IAAI;GAC/B,KAAK;GACN,EAAE;EACH,QAAQ;GAAE,MAAM;GAAc,UAAU;GAAkB;YAE1D,kBAAC,GAAD;GAAoB,UAAA;aAClB,kBAAC,GAAD;IAAY,WAAU;IAAyB,UAAA;cAA/C,CACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,OAAD;KAAK,WAAU;eAAwB;KAAqB,CAAA,EAC5D,kBAAC,OAAD;KAAK,WAAU;eAAU;KAAY,CAAA,CACjC,EAAA,CAAA,EACN,kBAAC,GAAD;KACE,cAAW;KACX,WAAU;KACV,OAAM;KACN,MAAK;KACL,OAAM;KACN,SAAQ;KACR,CAAA,CAAA;;GAEe,CAAA;EACT,CAAA"}
+{"version":3,"file":"slider-frame-with-button-demo.js","names":[],"sources":["../../lib/examples/slider-frame-with-button-demo.tsx"],"sourcesContent":["'use client';\n\nimport { Button } from '@/ui/buttons/Button';\nimport { FrameLabelsWrapper } from '@/ui/frame/FrameLabelsWrapper';\nimport { FrameTitle } from '@/ui/frame/FrameTitle';\nimport { SliderFrame } from '@/ui/frame/SliderFrame';\n\nexport default function SliderFrameWithButtonDemo() {\n  return (\n    <SliderFrame\n      aria-label=\"Mountain Resort image carousel\"\n      format=\"horizontal\"\n      className=\"max-w-380\"\n      items={Array.from({ length: 5 }, (_, i) => ({\n        alt: `Mountain landscape ${i + 1}`,\n        src: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4',\n      }))}\n      labels={{ next: 'Next image', previous: 'Previous image' }}\n    >\n      <FrameLabelsWrapper hasImage>\n        <FrameTitle className=\"w-full justify-between\" hasImage>\n          <div>\n            <div className=\"text-b2 font-semibold\">Mountain Resort</div>\n            <div className=\"text-b3\">Winter</div>\n          </div>\n          <Button\n            aria-label=\"Explore Mountain Resort\"\n            className=\"pointer-events-auto shrink-0\"\n            color=\"white\"\n            icon=\"ArrowDefaultRight\"\n            theme=\"outline\"\n            variant=\"circle\"\n          />\n        </FrameTitle>\n      </FrameLabelsWrapper>\n    </SliderFrame>\n  );\n}\n"],"mappings":";;;;;;;AAOA,SAAwB,IAA4B;AAClD,QACE,kBAAC,GAAD;EACE,cAAW;EACX,QAAO;EACP,WAAU;EACV,OAAO,MAAM,KAAK,EAAE,QAAQ,GAAG,GAAG,GAAG,OAAO;GAC1C,KAAK,sBAAsB,IAAI;GAC/B,KAAK;GACN,EAAE;EACH,QAAQ;GAAE,MAAM;GAAc,UAAU;GAAkB;YAE1D,kBAAC,GAAD;GAAoB,UAAA;aAClB,kBAAC,GAAD;IAAY,WAAU;IAAyB,UAAA;cAA/C,CACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,OAAD;KAAK,WAAU;eAAwB;KAAqB,CAAA,EAC5D,kBAAC,OAAD;KAAK,WAAU;eAAU;KAAY,CAAA,CACjC,EAAA,CAAA,EACN,kBAAC,GAAD;KACE,cAAW;KACX,WAAU;KACV,OAAM;KACN,MAAK;KACL,OAAM;KACN,SAAQ;KACR,CAAA,CAAA;;GAEe,CAAA;EACT,CAAA"}

package/examples/slider-frame-with-tag-demo.js

@@ -8,6 +8,7 @@ import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region lib/examples/slider-frame-with-tag-demo.tsx
 function s() {
 	return /* @__PURE__ */ a(i, {
+		"aria-label": "Mountain Resort image carousel",
 		format: "horizontal",
 		className: "max-w-380",
 		items: Array.from({ length: 5 }, (e, t) => ({

package/examples/slider-frame-with-tag-demo.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider-frame-with-tag-demo.js","names":[],"sources":["../../lib/examples/slider-frame-with-tag-demo.tsx"],"sourcesContent":["'use client';\n\nimport { Button } from '@/ui/buttons/Button';\nimport { Tag } from '@/ui/Tag';\nimport { FrameLabelsWrapper } from '@/ui/frame/FrameLabelsWrapper';\nimport { FrameTitle } from '@/ui/frame/FrameTitle';\nimport { SliderFrame } from '@/ui/frame/SliderFrame';\n\nexport default function SliderFrameWithTagDemo() {\n  return (\n    <SliderFrame\n      format=\"horizontal\"\n      className=\"max-w-380\"\n      items={Array.from({ length: 5 }, (_, i) => ({\n        alt: `Mountain landscape ${i + 1}`,\n        src: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4',\n      }))}\n      labels={{ next: 'Next image', previous: 'Previous image' }}\n    >\n      <FrameLabelsWrapper hasImage>\n        <Tag\n          label=\"Best seller\"\n          className=\"mx-12 mt-12 self-start px-8 sm:mx-24 sm:mt-24 sm:px-16\"\n        />\n        <FrameTitle className=\"w-full justify-between\" hasImage>\n          <div>\n            <div className=\"text-b2 font-semibold\">Mountain Resort</div>\n            <div className=\"text-b3\">Winter</div>\n          </div>\n          <Button\n            aria-label=\"Explore Mountain Resort\"\n            className=\"pointer-events-auto shrink-0\"\n            color=\"white\"\n            icon=\"ArrowDefaultRight\"\n            theme=\"outline\"\n            variant=\"circle\"\n          />\n        </FrameTitle>\n      </FrameLabelsWrapper>\n    </SliderFrame>\n  );\n}\n"],"mappings":";;;;;;;;AAQA,SAAwB,IAAyB;AAC/C,QACE,kBAAC,GAAD;EACE,QAAO;EACP,WAAU;EACV,OAAO,MAAM,KAAK,EAAE,QAAQ,GAAG,GAAG,GAAG,OAAO;GAC1C,KAAK,sBAAsB,IAAI;GAC/B,KAAK;GACN,EAAE;EACH,QAAQ;GAAE,MAAM;GAAc,UAAU;GAAkB;YAE1D,kBAAC,GAAD;GAAoB,UAAA;aAApB,CACE,kBAAC,GAAD;IACE,OAAM;IACN,WAAU;IACV,CAAA,EACF,kBAAC,GAAD;IAAY,WAAU;IAAyB,UAAA;cAA/C,CACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,OAAD;KAAK,WAAU;eAAwB;KAAqB,CAAA,EAC5D,kBAAC,OAAD;KAAK,WAAU;eAAU;KAAY,CAAA,CACjC,EAAA,CAAA,EACN,kBAAC,GAAD;KACE,cAAW;KACX,WAAU;KACV,OAAM;KACN,MAAK;KACL,OAAM;KACN,SAAQ;KACR,CAAA,CAAA;;;EAGM,CAAA"}
+{"version":3,"file":"slider-frame-with-tag-demo.js","names":[],"sources":["../../lib/examples/slider-frame-with-tag-demo.tsx"],"sourcesContent":["'use client';\n\nimport { Button } from '@/ui/buttons/Button';\nimport { Tag } from '@/ui/Tag';\nimport { FrameLabelsWrapper } from '@/ui/frame/FrameLabelsWrapper';\nimport { FrameTitle } from '@/ui/frame/FrameTitle';\nimport { SliderFrame } from '@/ui/frame/SliderFrame';\n\nexport default function SliderFrameWithTagDemo() {\n  return (\n    <SliderFrame\n      aria-label=\"Mountain Resort image carousel\"\n      format=\"horizontal\"\n      className=\"max-w-380\"\n      items={Array.from({ length: 5 }, (_, i) => ({\n        alt: `Mountain landscape ${i + 1}`,\n        src: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4',\n      }))}\n      labels={{ next: 'Next image', previous: 'Previous image' }}\n    >\n      <FrameLabelsWrapper hasImage>\n        <Tag\n          label=\"Best seller\"\n          className=\"mx-12 mt-12 self-start px-8 sm:mx-24 sm:mt-24 sm:px-16\"\n        />\n        <FrameTitle className=\"w-full justify-between\" hasImage>\n          <div>\n            <div className=\"text-b2 font-semibold\">Mountain Resort</div>\n            <div className=\"text-b3\">Winter</div>\n          </div>\n          <Button\n            aria-label=\"Explore Mountain Resort\"\n            className=\"pointer-events-auto shrink-0\"\n            color=\"white\"\n            icon=\"ArrowDefaultRight\"\n            theme=\"outline\"\n            variant=\"circle\"\n          />\n        </FrameTitle>\n      </FrameLabelsWrapper>\n    </SliderFrame>\n  );\n}\n"],"mappings":";;;;;;;;AAQA,SAAwB,IAAyB;AAC/C,QACE,kBAAC,GAAD;EACE,cAAW;EACX,QAAO;EACP,WAAU;EACV,OAAO,MAAM,KAAK,EAAE,QAAQ,GAAG,GAAG,GAAG,OAAO;GAC1C,KAAK,sBAAsB,IAAI;GAC/B,KAAK;GACN,EAAE;EACH,QAAQ;GAAE,MAAM;GAAc,UAAU;GAAkB;YAE1D,kBAAC,GAAD;GAAoB,UAAA;aAApB,CACE,kBAAC,GAAD;IACE,OAAM;IACN,WAAU;IACV,CAAA,EACF,kBAAC,GAAD;IAAY,WAAU;IAAyB,UAAA;cAA/C,CACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,OAAD;KAAK,WAAU;eAAwB;KAAqB,CAAA,EAC5D,kBAAC,OAAD;KAAK,WAAU;eAAU;KAAY,CAAA,CACjC,EAAA,CAAA,EACN,kBAAC,GAAD;KACE,cAAW;KACX,WAAU;KACV,OAAM;KACN,MAAK;KACL,OAAM;KACN,SAAQ;KACR,CAAA,CAAA;;;EAGM,CAAA"}

package/examples/switch-demo.js

@@ -6,8 +6,9 @@ import { jsx as n, jsxs as r } from "react/jsx-runtime";
 function i() {
 	let [i, a] = t(!1);
 	return /* @__PURE__ */ r("div", {
-		className: "flex items-center gap-3",
+		className: "flex items-center gap-8",
 		children: [/* @__PURE__ */ n(e, {
+			"aria-label": "Enable notifications",
 			checked: i,
 			onChange: (e, t) => a(t)
 		}), /* @__PURE__ */ n("span", {

package/examples/switch-demo.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch-demo.js","names":[],"sources":["../../lib/examples/switch-demo.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { Switch } from '@/ui/forms/Switch';\n\nexport default function SwitchDemo() {\n  const [isEnabled, setIsEnabled] = useState(false);\n\n  return (\n    <div className=\"flex items-center gap-3\">\n      <Switch checked={isEnabled} onChange={(_, checked) => setIsEnabled(checked)} />\n      <span className=\"text-b2 font-semibold\">Enable notifications</span>\n    </div>\n  );\n}\n"],"mappings":";;;;;AAKA,SAAwB,IAAa;CACnC,IAAM,CAAC,GAAW,KAAgB,EAAS,GAAM;AAEjD,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,GAAD;GAAQ,SAAS;GAAW,WAAW,GAAG,MAAY,EAAa,EAAA;GAAY,CAAA,EAC/E,kBAAC,QAAD;GAAM,WAAU;aAAwB;GAA2B,CAAA,CAAA"}
+{"version":3,"file":"switch-demo.js","names":[],"sources":["../../lib/examples/switch-demo.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { Switch } from '@/ui/forms/Switch';\n\nexport default function SwitchDemo() {\n  const [isEnabled, setIsEnabled] = useState(false);\n\n  return (\n    <div className=\"flex items-center gap-8\">\n      <Switch\n        aria-label=\"Enable notifications\"\n        checked={isEnabled}\n        onChange={(_, checked) => setIsEnabled(checked)}\n      />\n      <span className=\"text-b2 font-semibold\">Enable notifications</span>\n    </div>\n  );\n}\n"],"mappings":";;;;;AAKA,SAAwB,IAAa;CACnC,IAAM,CAAC,GAAW,KAAgB,EAAS,GAAM;AAEjD,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,GAAD;GACE,cAAW;GACX,SAAS;GACT,WAAW,GAAG,MAAY,EAAa,EAAA;GACvC,CAAA,EACF,kBAAC,QAAD;GAAM,WAAU;aAAwB;GAA2B,CAAA,CAAA"}

package/examples/tabs-with-select-demo.js

@@ -22,6 +22,7 @@ function c() {
 		selected: 1,
 		children: [
 			/* @__PURE__ */ o(r, {
+				"aria-label": "Choose a tab",
 				className: "md:hidden w-full",
 				items: c
 			}),

package/examples/tabs-with-select-demo.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs-with-select-demo.js","names":[],"sources":["../../lib/examples/tabs-with-select-demo.tsx"],"sourcesContent":["import { Tab, TabList, TabPanel, Tabs, TabsBody, TabSelect } from '../ui/tabs/Tabs';\n\nexport default function TabsWithSelectDemo() {\n  const tabs = new Array(3).fill(undefined).map((_, n) => ({ label: `${n + 1}`, value: n + 1 }));\n\n  const bgs = (count: number) => {\n    switch (count % 3) {\n      case 0:\n        return 'bg-lightSand';\n      case 1:\n        return 'bg-saffron';\n      case 2:\n        return 'bg-lavender';\n      default:\n        return 'bg-sienna';\n    }\n  };\n  return (\n    <Tabs className=\"w-full\" selected={1}>\n      <TabSelect className=\"md:hidden w-full\" items={tabs} />\n      <TabList className=\"hidden md:flex\">\n        {tabs.map((tab) => {\n          return <Tab key={tab.label} label={`Tab - ${tab.label}`} value={tab.value} />;\n        })}\n      </TabList>\n      <TabsBody>\n        {tabs.map((tab) => {\n          return (\n            <TabPanel key={tab.label} value={tab.value}>\n              <div className={`p-16 ${bgs(tab.value)}`}>Panel - {tab.label}</div>\n            </TabPanel>\n          );\n        })}\n      </TabsBody>\n    </Tabs>\n  );\n}\n"],"mappings":";;;AAEA,SAAwB,IAAqB;CAC3C,IAAM,IAAO;;;;EAAY,CAAC,KAAK,KAAA,EAAU,CAAC,KAAK,GAAG,OAAO;EAAE,OAAO,GAAG,IAAI;EAAK,OAAO,IAAI;EAAG,EAAE,EAExF,KAAO,MAAkB;AAC7B,UAAQ,IAAQ,GAAhB;GACE,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,QACE,QAAO;;;AAGb,QACE,kBAAC,GAAD;EAAM,WAAU;EAAS,UAAU;YAAnC;GACE,kBAAC,GAAD;IAAW,WAAU;IAAmB,OAAO;IAAQ,CAAA;GACvD,kBAAC,GAAD;IAAS,WAAU;cAChB,EAAK,KAAK,MACF,kBAAC,GAAD;KAAqB,OAAO,SAAS,EAAI;KAAS,OAAO,EAAI;KAAS,EAA5D,EAAI,MAAwD,CAC7E;IACM,CAAA;GACV,kBAAC,GAAD,EAAA,UACG,EAAK,KAAK,MAEP,kBAAC,GAAD;IAA0B,OAAO,EAAI;cACnC,kBAAC,OAAD;KAAK,WAAW,QAAQ,EAAI,EAAI,MAAM;eAAtC,CAA0C,YAAS,EAAI,MAAY;;IAC1D,EAFI,EAAI,MAER,CAEb,EACO,CAAA;GACN"}
+{"version":3,"file":"tabs-with-select-demo.js","names":[],"sources":["../../lib/examples/tabs-with-select-demo.tsx"],"sourcesContent":["import { Tab, TabList, TabPanel, Tabs, TabsBody, TabSelect } from '../ui/tabs/Tabs';\n\nexport default function TabsWithSelectDemo() {\n  const tabs = new Array(3).fill(undefined).map((_, n) => ({ label: `${n + 1}`, value: n + 1 }));\n\n  const bgs = (count: number) => {\n    switch (count % 3) {\n      case 0:\n        return 'bg-lightSand';\n      case 1:\n        return 'bg-saffron';\n      case 2:\n        return 'bg-lavender';\n      default:\n        return 'bg-sienna';\n    }\n  };\n  return (\n    <Tabs className=\"w-full\" selected={1}>\n      <TabSelect aria-label=\"Choose a tab\" className=\"md:hidden w-full\" items={tabs} />\n      <TabList className=\"hidden md:flex\">\n        {tabs.map((tab) => {\n          return <Tab key={tab.label} label={`Tab - ${tab.label}`} value={tab.value} />;\n        })}\n      </TabList>\n      <TabsBody>\n        {tabs.map((tab) => {\n          return (\n            <TabPanel key={tab.label} value={tab.value}>\n              <div className={`p-16 ${bgs(tab.value)}`}>Panel - {tab.label}</div>\n            </TabPanel>\n          );\n        })}\n      </TabsBody>\n    </Tabs>\n  );\n}\n"],"mappings":";;;AAEA,SAAwB,IAAqB;CAC3C,IAAM,IAAO;;;;EAAY,CAAC,KAAK,KAAA,EAAU,CAAC,KAAK,GAAG,OAAO;EAAE,OAAO,GAAG,IAAI;EAAK,OAAO,IAAI;EAAG,EAAE,EAExF,KAAO,MAAkB;AAC7B,UAAQ,IAAQ,GAAhB;GACE,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,QACE,QAAO;;;AAGb,QACE,kBAAC,GAAD;EAAM,WAAU;EAAS,UAAU;YAAnC;GACE,kBAAC,GAAD;IAAW,cAAW;IAAe,WAAU;IAAmB,OAAO;IAAQ,CAAA;GACjF,kBAAC,GAAD;IAAS,WAAU;cAChB,EAAK,KAAK,MACF,kBAAC,GAAD;KAAqB,OAAO,SAAS,EAAI;KAAS,OAAO,EAAI;KAAS,EAA5D,EAAI,MAAwD,CAC7E;IACM,CAAA;GACV,kBAAC,GAAD,EAAA,UACG,EAAK,KAAK,MAEP,kBAAC,GAAD;IAA0B,OAAO,EAAI;cACnC,kBAAC,OAAD;KAAK,WAAW,QAAQ,EAAI,EAAI,MAAM;eAAtC,CAA0C,YAAS,EAAI,MAAY;;IAC1D,EAFI,EAAI,MAER,CAEb,EACO,CAAA;GACN"}

package/examples/text-field-demo.js

@@ -7,12 +7,14 @@ function r() {
 		className: "flex flex-col gap-16",
 		children: [
 			/* @__PURE__ */ t(e, {
+				name: "email",
 				label: "Email Address",
 				description: "Enter your email address",
 				placeholder: "you@example.com",
 				className: "max-w-sm"
 			}),
 			/* @__PURE__ */ t(e, {
+				name: "disabled",
 				label: "Disabled",
 				description: "This field is disabled",
 				placeholder: "Disabled input",
@@ -20,6 +22,7 @@ function r() {
 				className: "max-w-sm"
 			}),
 			/* @__PURE__ */ t(e, {
+				name: "search",
 				label: "With Icon",
 				description: "This field has an icon",
 				placeholder: "Search...",
@@ -28,6 +31,7 @@ function r() {
 				validationStatus: "success"
 			}),
 			/* @__PURE__ */ t(e, {
+				name: "error",
 				label: "Error",
 				description: "This field has an error message",
 				placeholder: "Enter your text",
@@ -37,6 +41,7 @@ function r() {
 				errorMessage: "This is an error message"
 			}),
 			/* @__PURE__ */ t(e, {
+				name: "success",
 				label: "Success",
 				description: "This field has a success message",
 				placeholder: "Enter your text",

package/examples/text-field-demo.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-field-demo.js","names":[],"sources":["../../lib/examples/text-field-demo.tsx"],"sourcesContent":["'use client';\n\nimport { TextField } from '@/ui/forms/TextField';\n\nexport default function TextFieldDemo() {\n  return (\n    <div className=\"flex flex-col gap-16\">\n      <TextField\n        label=\"Email Address\"\n        description=\"Enter your email address\"\n        placeholder=\"you@example.com\"\n        className=\"max-w-sm\"\n      />\n      <TextField\n        label=\"Disabled\"\n        description=\"This field is disabled\"\n        placeholder=\"Disabled input\"\n        disabled\n        className=\"max-w-sm\"\n      />\n      <TextField\n        label=\"With Icon\"\n        description=\"This field has an icon\"\n        placeholder=\"Search...\"\n        icon=\"PeopleSingle\"\n        className=\"max-w-sm\"\n        validationStatus=\"success\"\n      />\n      <TextField\n        label=\"Error\"\n        description=\"This field has an error message\"\n        placeholder=\"Enter your text\"\n        className=\"max-w-sm\"\n        clear=\"eke\"\n        validationStatus=\"error\"\n        errorMessage=\"This is an error message\"\n      />\n      <TextField\n        label=\"Success\"\n        description=\"This field has a success message\"\n        placeholder=\"Enter your text\"\n        className=\"max-w-sm\"\n        validationStatus=\"success\"\n      />\n    </div>\n  );\n}\n"],"mappings":";;;;AAIA,SAAwB,IAAgB;AACtC,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf;GACE,kBAAC,GAAD;IACE,OAAM;IACN,aAAY;IACZ,aAAY;IACZ,WAAU;IACV,CAAA;GACF,kBAAC,GAAD;IACE,OAAM;IACN,aAAY;IACZ,aAAY;IACZ,UAAA;IACA,WAAU;IACV,CAAA;GACF,kBAAC,GAAD;IACE,OAAM;IACN,aAAY;IACZ,aAAY;IACZ,MAAK;IACL,WAAU;IACV,kBAAiB;IACjB,CAAA;GACF,kBAAC,GAAD;IACE,OAAM;IACN,aAAY;IACZ,aAAY;IACZ,WAAU;IACV,OAAM;IACN,kBAAiB;IACjB,cAAa;IACb,CAAA;GACF,kBAAC,GAAD;IACE,OAAM;IACN,aAAY;IACZ,aAAY;IACZ,WAAU;IACV,kBAAiB;IACjB,CAAA"}
+{"version":3,"file":"text-field-demo.js","names":[],"sources":["../../lib/examples/text-field-demo.tsx"],"sourcesContent":["'use client';\n\nimport { TextField } from '@/ui/forms/TextField';\n\nexport default function TextFieldDemo() {\n  return (\n    <div className=\"flex flex-col gap-16\">\n      <TextField\n        name=\"email\"\n        label=\"Email Address\"\n        description=\"Enter your email address\"\n        placeholder=\"you@example.com\"\n        className=\"max-w-sm\"\n      />\n      <TextField\n        name=\"disabled\"\n        label=\"Disabled\"\n        description=\"This field is disabled\"\n        placeholder=\"Disabled input\"\n        disabled\n        className=\"max-w-sm\"\n      />\n      <TextField\n        name=\"search\"\n        label=\"With Icon\"\n        description=\"This field has an icon\"\n        placeholder=\"Search...\"\n        icon=\"PeopleSingle\"\n        className=\"max-w-sm\"\n        validationStatus=\"success\"\n      />\n      <TextField\n        name=\"error\"\n        label=\"Error\"\n        description=\"This field has an error message\"\n        placeholder=\"Enter your text\"\n        className=\"max-w-sm\"\n        clear=\"eke\"\n        validationStatus=\"error\"\n        errorMessage=\"This is an error message\"\n      />\n      <TextField\n        name=\"success\"\n        label=\"Success\"\n        description=\"This field has a success message\"\n        placeholder=\"Enter your text\"\n        className=\"max-w-sm\"\n        validationStatus=\"success\"\n      />\n    </div>\n  );\n}\n"],"mappings":";;;;AAIA,SAAwB,IAAgB;AACtC,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf;GACE,kBAAC,GAAD;IACE,MAAK;IACL,OAAM;IACN,aAAY;IACZ,aAAY;IACZ,WAAU;IACV,CAAA;GACF,kBAAC,GAAD;IACE,MAAK;IACL,OAAM;IACN,aAAY;IACZ,aAAY;IACZ,UAAA;IACA,WAAU;IACV,CAAA;GACF,kBAAC,GAAD;IACE,MAAK;IACL,OAAM;IACN,aAAY;IACZ,aAAY;IACZ,MAAK;IACL,WAAU;IACV,kBAAiB;IACjB,CAAA;GACF,kBAAC,GAAD;IACE,MAAK;IACL,OAAM;IACN,aAAY;IACZ,aAAY;IACZ,WAAU;IACV,OAAM;IACN,kBAAiB;IACjB,cAAa;IACb,CAAA;GACF,kBAAC,GAAD;IACE,MAAK;IACL,OAAM;IACN,aAAY;IACZ,aAAY;IACZ,WAAU;IACV,kBAAiB;IACjB,CAAA"}

package/examples/toggle-demo.js

@@ -4,10 +4,15 @@ import { useState as t } from "react";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region lib/examples/toggle-demo.tsx
 function i() {
-	let [i, a] = t(0);
+	let [i, a] = t(0), o = [
+		"Our selection",
+		"Exclusive Collection",
+		"Safari"
+	];
 	return /* @__PURE__ */ r("div", {
 		className: "space-y-16",
 		children: [/* @__PURE__ */ n(e, {
+			"aria-label": "Choose a collection",
 			items: [
 				{
 					color: "saffron",
@@ -29,11 +34,7 @@ function i() {
 			onClick: a
 		}), /* @__PURE__ */ r("p", {
 			className: "text-b3",
-			children: ["Active: ", [
-				"Our selection",
-				"Exclusive Collection",
-				"Safari"
-			][i]]
+			children: ["Active: ", o[i]]
 		})]
 	});
 }

package/examples/toggle-demo.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-demo.js","names":[],"sources":["../../lib/examples/toggle-demo.tsx"],"sourcesContent":["'use client';\nimport { useState } from 'react';\n\nimport { Toggle } from '@/ui/Toggle';\n\nexport default function ToggleDemo() {\n  const [active, setActive] = useState(0);\n  const labels = ['Our selection', 'Exclusive Collection', 'Safari'];\n\n  return (\n    <div className=\"space-y-16\">\n      <Toggle\n        items={[\n          { color: 'saffron', label: 'Our selection', id: 'id1' },\n          { color: 'ultramarine', label: 'Exclusive Collection', id: 'id2' },\n          { color: 'sienna', label: 'Safari', id: 'id3' },\n        ]}\n        index={active}\n        onClick={setActive}\n      />\n      <p className=\"text-b3\">Active: {labels[active]}</p>\n    </div>\n  );\n}\n"],"mappings":";;;;;AAKA,SAAwB,IAAa;CACnC,IAAM,CAAC,GAAQ,KAAa,EAAS,EAAE;AAGvC,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,GAAD;GACE,OAAO;IACL;KAAE,OAAO;KAAW,OAAO;KAAiB,IAAI;KAAO;IACvD;KAAE,OAAO;KAAe,OAAO;KAAwB,IAAI;KAAO;IAClE;KAAE,OAAO;KAAU,OAAO;KAAU,IAAI;;IACzC;GACD,OAAO;GACP,SAAS;GACT,CAAA,EACF,kBAAC,KAAD;GAAG,WAAU;aAAb,CAAuB,YAbZ;IAAC;IAAiB;IAAwB;IAAS,CAavB,GAAA"}
+{"version":3,"file":"toggle-demo.js","names":[],"sources":["../../lib/examples/toggle-demo.tsx"],"sourcesContent":["'use client';\nimport { useState } from 'react';\n\nimport { Toggle } from '@/ui/Toggle';\n\nexport default function ToggleDemo() {\n  const [active, setActive] = useState(0);\n  const labels = ['Our selection', 'Exclusive Collection', 'Safari'];\n\n  return (\n    <div className=\"space-y-16\">\n      <Toggle\n        aria-label=\"Choose a collection\"\n        items={[\n          { color: 'saffron', label: 'Our selection', id: 'id1' },\n          { color: 'ultramarine', label: 'Exclusive Collection', id: 'id2' },\n          { color: 'sienna', label: 'Safari', id: 'id3' },\n        ]}\n        index={active}\n        onClick={setActive}\n      />\n      <p className=\"text-b3\">Active: {labels[active]}</p>\n    </div>\n  );\n}\n"],"mappings":";;;;;AAKA,SAAwB,IAAa;CACnC,IAAM,CAAC,GAAQ,KAAa,EAAS,EAAE,EACjC,IAAS;EAAC;EAAiB;EAAwB;EAAS;AAElE,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,GAAD;GACE,cAAW;GACX,OAAO;IACL;KAAE,OAAO;KAAW,OAAO;KAAiB,IAAI;KAAO;IACvD;KAAE,OAAO;KAAe,OAAO;KAAwB,IAAI;KAAO;IAClE;KAAE,OAAO;KAAU,OAAO;KAAU,IAAI;;IACzC;GACD,OAAO;GACP,SAAS;GACT,CAAA,EACF,kBAAC,KAAD;GAAG,WAAU;aAAb,CAAuB,YAAS,EAAO,GAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clubmed/trident-ui",
-  "version": "2.0.0-beta.65",
+  "version": "2.0.0-beta.67",
   "type": "module",
   "description": "Shared ClubMed React UI components",
   "keywords": [

package/styles/index.css

@@ -15,5 +15,4 @@
 @import './ui/controls.css';
 @import './ui/number-field.css';
 @import './ui/range.css';
-@import './ui/tabs.css';
 @import './ui/chat-button.css';

package/styles/ui/tabs.css

@@ -1,19 +0,0 @@
-@layer components {
-  .tab-focus-pill {
-    transform: translateX(
-      calc(
-        var(--tab-index, 0) * -100% + var(--active-tab, 0) * 100% -
-          (var(--spacing) * 4 * (var(--tab-index) - var(--active-tab, 0)))
-      )
-    );
-  }
-
-  [dir='rtl'] .tab-focus-pill {
-    transform: translateX(
-      calc(
-        var(--tab-index) * 100% + var(--active-tab) * -100% +
-          (var(--spacing) * 4 * (var(--tab-index) - var(--active-tab)))
-      )
-    );
-  }
-}

package/ui/forms/PhoneFieldSplitInput.js

@@ -81,9 +81,20 @@ var _ = (e) => {
 				"bg-white": w !== "disabled",
 				"bg-pearl border-middleGrey": w === "disabled"
 			}),
-			children: [/* @__PURE__ */ g("div", {
+			children: [/* @__PURE__ */ h("select", {
+				disabled: f,
+				value: E,
+				onChange: (e) => A(e.nativeEvent, e.target.value),
+				className: "peer opacity-0 absolute inset-0 w-full h-full cursor-pointer outline-none",
+				id: `${S}-prefix`,
+				"aria-label": `${C}-prefix`,
+				children: o.map((e) => /* @__PURE__ */ h("option", {
+					value: e.code,
+					children: e.fullLabel ?? e.label ?? e.code
+				}, e.code))
+			}), /* @__PURE__ */ g("div", {
 				"aria-hidden": "true",
-				className: e("text-b3 rounded-pill w-full border px-20 py-12 font-semibold pointer-events-none flex items-center justify-between gap-8", {
+				className: e("text-b3 rounded-pill w-full border px-20 py-12 font-semibold pointer-events-none flex items-center justify-between gap-8 peer-focus-visible:ring-4 peer-focus-visible:ring-black peer-focus-visible:ring-offset-2", {
 					"border-middleGrey": w === "default",
 					"text-black bg-white": w !== "disabled",
 					"bg-pearl border-middleGrey text-black": w === "disabled",
@@ -96,17 +107,6 @@ var _ = (e) => {
 					width: "24px",
 					color: "black"
 				})]
-			}), /* @__PURE__ */ h("select", {
-				disabled: f,
-				value: E,
-				onChange: (e) => A(e.nativeEvent, e.target.value),
-				className: "opacity-0 absolute inset-0 w-full h-full cursor-pointer outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2",
-				id: `${S}-prefix`,
-				"aria-label": `${C}-prefix`,
-				children: o.map((e) => /* @__PURE__ */ h("option", {
-					value: e.code,
-					children: e.fullLabel ?? e.label ?? e.code
-				}, e.code))
 			})]
 		}), /* @__PURE__ */ g("div", {
 			className: "relative flex-1",

package/ui/forms/PhoneFieldSplitInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"PhoneFieldSplitInput.js","names":[],"sources":["../../../lib/ui/forms/PhoneFieldSplitInput.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { Icon, type IconicTypes } from '@clubmed/trident-icons';\nimport {\n  type ChangeEvent,\n  type InputHTMLAttributes,\n  type KeyboardEvent,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from 'react';\nimport {\n  calculateCursorPosition,\n  DEFAULT_PHONE_PREFIXES,\n  extractDigits,\n  formatPhoneDigits,\n  formatWithPattern,\n  getLiteralPrefixInfo,\n  type PhonePrefix,\n  stripLiteralPrefix,\n} from '../helpers/phone';\nimport { useInternalStatus } from '../hooks/useInternalStatus';\nimport type { FormControlProps } from './FormControl';\nimport type { PhoneValue } from './PhoneField';\n\ntype PhoneFieldChangeHandler = (event: Event, value: PhoneValue) => void;\n\nexport interface PhoneFieldSplitProps {\n  prefixes?: PhonePrefix[];\n  defaultPrefix?: string;\n}\n\nconst usePhoneField = (args: {\n  externalValue?: PhoneValue;\n  pattern: string;\n  defaultPrefix: string;\n  onChange?: PhoneFieldChangeHandler;\n}) => {\n  const { externalValue, pattern, defaultPrefix, onChange } = args;\n  const numberInputRef = useRef<HTMLInputElement>(null);\n  const cursorPositionRef = useRef<number | null>(null);\n  const [prefix, setPrefix] = useState(defaultPrefix);\n  const [number, setNumber] = useState('');\n\n  const emitChange = useCallback(\n    (event: Event, nextPrefix: string, nextNumber: string) => {\n      if (nextPrefix === prefix && nextNumber === number) {\n        return;\n      }\n\n      const full = `${nextPrefix} ${nextNumber}`.trim();\n\n      onChange?.(event, {\n        full,\n        prefix: nextPrefix,\n        number: nextNumber,\n        raw: extractDigits(full),\n      });\n    },\n    [number, onChange, prefix],\n  );\n\n  useEffect(() => {\n    if (cursorPositionRef.current !== null && numberInputRef.current) {\n      numberInputRef.current.setSelectionRange(\n        cursorPositionRef.current,\n        cursorPositionRef.current,\n      );\n      cursorPositionRef.current = null;\n    }\n  }, [number]);\n\n  useEffect(() => {\n    if (externalValue && typeof externalValue === 'object' && 'full' in externalValue) {\n      setPrefix(externalValue.prefix || defaultPrefix);\n      setNumber(externalValue.number || '');\n    }\n  }, [externalValue, defaultPrefix]);\n\n  const onKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLInputElement>) => {\n      if (e.key !== 'Backspace' && e.key !== 'Delete') {\n        return;\n      }\n\n      const cursorPosition = e.currentTarget.selectionStart || 0;\n      const selectionEnd = e.currentTarget.selectionEnd || 0;\n\n      if (cursorPosition !== selectionEnd) {\n        return;\n      }\n\n      const { literalPrefixDigits } = getLiteralPrefixInfo(pattern);\n\n      const targetChar =\n        e.key === 'Backspace' ? number[cursorPosition - 1] : number[cursorPosition];\n\n      if (!targetChar || /\\d/.test(targetChar)) {\n        return;\n      }\n\n      e.preventDefault();\n\n      const allDigits = stripLiteralPrefix(extractDigits(number), literalPrefixDigits);\n      const digitsBeforeCursor = stripLiteralPrefix(\n        extractDigits(number.substring(0, cursorPosition)),\n        literalPrefixDigits,\n      ).length;\n\n      let newDigits: string;\n      let targetCursorDigits: number;\n\n      if (e.key === 'Backspace') {\n        if (digitsBeforeCursor === 0) {\n          return;\n        }\n\n        newDigits =\n          allDigits.slice(0, digitsBeforeCursor - 1) + allDigits.slice(digitsBeforeCursor);\n        targetCursorDigits = digitsBeforeCursor - 1;\n      } else {\n        if (digitsBeforeCursor >= allDigits.length) {\n          return;\n        }\n\n        newDigits =\n          allDigits.slice(0, digitsBeforeCursor) + allDigits.slice(digitsBeforeCursor + 1);\n        targetCursorDigits = digitsBeforeCursor;\n      }\n\n      const formatted = formatWithPattern(newDigits, pattern);\n      cursorPositionRef.current = calculateCursorPosition(\n        targetCursorDigits,\n        formatted,\n        literalPrefixDigits,\n      );\n\n      setNumber(formatted);\n\n      emitChange(e.nativeEvent, prefix, formatted);\n    },\n    [emitChange, pattern, number, prefix],\n  );\n\n  const onInputChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      const formattedValue = formatPhoneDigits(\n        e.target.value,\n        pattern,\n        e.target.selectionStart || 0,\n      );\n      if (!formattedValue) return;\n\n      cursorPositionRef.current = formattedValue.nextCursor;\n      setNumber(formattedValue.formatted);\n\n      emitChange(e.nativeEvent, prefix, formattedValue.formatted);\n    },\n    [emitChange, pattern, prefix],\n  );\n\n  const onPrefixChange = useCallback(\n    (event: Event, newPrefix: string) => {\n      setPrefix(newPrefix);\n\n      emitChange(event, newPrefix, number);\n    },\n    [emitChange, number],\n  );\n\n  return { numberInputRef, prefix, number, onKeyDown, onInputChange, onPrefixChange };\n};\n\nexport interface PhoneFieldSplitInputProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'pattern'> {\n  value?: PhoneValue;\n  pattern?: string;\n  prefixes?: PhoneFieldSplitProps['prefixes'];\n  defaultPrefix?: PhoneFieldSplitProps['defaultPrefix'];\n  iconType?: IconicTypes;\n  validationStatus?: FormControlProps<PhoneValue>['validationStatus'];\n  onChange?: (event: Event, value: PhoneValue) => void;\n}\n\nexport const PhoneFieldSplitInput = ({\n  id,\n  name,\n  value: externalValue,\n  pattern = '## ## ## ## ##',\n  prefixes = DEFAULT_PHONE_PREFIXES,\n  defaultPrefix = prefixes[0]?.code || '+1',\n  placeholder = '',\n  iconType,\n  disabled = false,\n  required = false,\n  validationStatus = 'default',\n  onChange,\n  ...rest\n}: PhoneFieldSplitInputProps) => {\n  const internalId = useId();\n  const resolvedId = id ?? internalId;\n  const resolvedName = name ?? resolvedId;\n\n  const internalStatus = useInternalStatus({ isDisabled: disabled, validationStatus });\n  const { numberInputRef, prefix, number, onKeyDown, onInputChange, onPrefixChange } =\n    usePhoneField({\n      externalValue,\n      pattern,\n      defaultPrefix,\n      onChange,\n    });\n\n  return (\n    <div className=\"flex gap-8\">\n      <div\n        className={clsx('relative rounded-pill z-0 flex-shrink-0', {\n          'bg-white': internalStatus !== 'disabled',\n          'bg-pearl border-middleGrey': internalStatus === 'disabled',\n        })}\n      >\n        {/* Visible fake select showing the short label */}\n        <div\n          aria-hidden=\"true\"\n          className={clsx(\n            'text-b3 rounded-pill w-full border px-20 py-12 font-semibold pointer-events-none flex items-center justify-between gap-8',\n            {\n              'border-middleGrey': internalStatus === 'default',\n              'text-black bg-white': internalStatus !== 'disabled',\n              'bg-pearl border-middleGrey text-black': internalStatus === 'disabled',\n              'border-red': internalStatus === 'error',\n              'border-green': internalStatus === 'success',\n            },\n          )}\n        >\n          <span>{(prefixes as PhonePrefix[]).find((p) => p.code === prefix)?.label ?? prefix}</span>\n          <Icon name=\"ArrowDefaultDown\" type=\"svg\" width=\"24px\" color=\"black\" />\n        </div>\n\n        {/* Real select — invisible but interactive, uses fullLabel for dropdown options */}\n        <select\n          disabled={disabled}\n          value={prefix}\n          onChange={(e) => onPrefixChange(e.nativeEvent, e.target.value)}\n          className=\"opacity-0 absolute inset-0 w-full h-full cursor-pointer outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2\"\n          id={`${resolvedId}-prefix`}\n          aria-label={`${resolvedName}-prefix`}\n        >\n          {(prefixes as PhonePrefix[]).map((p) => (\n            <option key={p.code} value={p.code}>\n              {p.fullLabel ?? p.label ?? p.code}\n            </option>\n          ))}\n        </select>\n      </div>\n\n      <div className=\"relative flex-1\">\n        <input\n          {...(rest as Record<string, unknown>)}\n          ref={numberInputRef}\n          type=\"tel\"\n          disabled={disabled}\n          required={required}\n          value={number}\n          onChange={onInputChange}\n          onKeyDown={onKeyDown}\n          placeholder={placeholder}\n          className={clsx(\n            'text-b3 rounded-pill w-full border overflow-hidden px-20 py-12 font-normal outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2',\n            {\n              'border-middleGrey focus:border-black active:border-black':\n                internalStatus === 'default',\n              'pe-[52px]': internalStatus === 'error' || internalStatus === 'success',\n              'bg-white text-black': internalStatus !== 'disabled',\n              'bg-pearl border-middleGrey': internalStatus === 'disabled',\n              'border-red': internalStatus === 'error',\n              'border-green': internalStatus === 'success',\n            },\n          )}\n          aria-label={`${resolvedName}-number`}\n        />\n\n        <div\n          className={clsx(\n            'pointer-events-none absolute inset-0 flex items-center justify-end px-20 py-12',\n            {\n              'text-grey': internalStatus === 'disabled',\n              'text-red': internalStatus === 'error',\n              'text-green': internalStatus === 'success',\n            },\n          )}\n        >\n          <span className=\"flex gap-x-8\">\n            {internalStatus === 'error' && (\n              <Icon name=\"CrossDefault\" width=\"24px\" type={iconType} />\n            )}\n            {internalStatus === 'success' && (\n              <Icon name=\"CheckDefault\" width=\"24px\" type={iconType} />\n            )}\n          </span>\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"PhoneFieldSplitInput.js","names":[],"sources":["../../../lib/ui/forms/PhoneFieldSplitInput.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { Icon, type IconicTypes } from '@clubmed/trident-icons';\nimport {\n  type ChangeEvent,\n  type InputHTMLAttributes,\n  type KeyboardEvent,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from 'react';\nimport {\n  calculateCursorPosition,\n  DEFAULT_PHONE_PREFIXES,\n  extractDigits,\n  formatPhoneDigits,\n  formatWithPattern,\n  getLiteralPrefixInfo,\n  type PhonePrefix,\n  stripLiteralPrefix,\n} from '../helpers/phone';\nimport { useInternalStatus } from '../hooks/useInternalStatus';\nimport type { FormControlProps } from './FormControl';\nimport type { PhoneValue } from './PhoneField';\n\ntype PhoneFieldChangeHandler = (event: Event, value: PhoneValue) => void;\n\nexport interface PhoneFieldSplitProps {\n  prefixes?: PhonePrefix[];\n  defaultPrefix?: string;\n}\n\nconst usePhoneField = (args: {\n  externalValue?: PhoneValue;\n  pattern: string;\n  defaultPrefix: string;\n  onChange?: PhoneFieldChangeHandler;\n}) => {\n  const { externalValue, pattern, defaultPrefix, onChange } = args;\n  const numberInputRef = useRef<HTMLInputElement>(null);\n  const cursorPositionRef = useRef<number | null>(null);\n  const [prefix, setPrefix] = useState(defaultPrefix);\n  const [number, setNumber] = useState('');\n\n  const emitChange = useCallback(\n    (event: Event, nextPrefix: string, nextNumber: string) => {\n      if (nextPrefix === prefix && nextNumber === number) {\n        return;\n      }\n\n      const full = `${nextPrefix} ${nextNumber}`.trim();\n\n      onChange?.(event, {\n        full,\n        prefix: nextPrefix,\n        number: nextNumber,\n        raw: extractDigits(full),\n      });\n    },\n    [number, onChange, prefix],\n  );\n\n  useEffect(() => {\n    if (cursorPositionRef.current !== null && numberInputRef.current) {\n      numberInputRef.current.setSelectionRange(\n        cursorPositionRef.current,\n        cursorPositionRef.current,\n      );\n      cursorPositionRef.current = null;\n    }\n  }, [number]);\n\n  useEffect(() => {\n    if (externalValue && typeof externalValue === 'object' && 'full' in externalValue) {\n      setPrefix(externalValue.prefix || defaultPrefix);\n      setNumber(externalValue.number || '');\n    }\n  }, [externalValue, defaultPrefix]);\n\n  const onKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLInputElement>) => {\n      if (e.key !== 'Backspace' && e.key !== 'Delete') {\n        return;\n      }\n\n      const cursorPosition = e.currentTarget.selectionStart || 0;\n      const selectionEnd = e.currentTarget.selectionEnd || 0;\n\n      if (cursorPosition !== selectionEnd) {\n        return;\n      }\n\n      const { literalPrefixDigits } = getLiteralPrefixInfo(pattern);\n\n      const targetChar =\n        e.key === 'Backspace' ? number[cursorPosition - 1] : number[cursorPosition];\n\n      if (!targetChar || /\\d/.test(targetChar)) {\n        return;\n      }\n\n      e.preventDefault();\n\n      const allDigits = stripLiteralPrefix(extractDigits(number), literalPrefixDigits);\n      const digitsBeforeCursor = stripLiteralPrefix(\n        extractDigits(number.substring(0, cursorPosition)),\n        literalPrefixDigits,\n      ).length;\n\n      let newDigits: string;\n      let targetCursorDigits: number;\n\n      if (e.key === 'Backspace') {\n        if (digitsBeforeCursor === 0) {\n          return;\n        }\n\n        newDigits =\n          allDigits.slice(0, digitsBeforeCursor - 1) + allDigits.slice(digitsBeforeCursor);\n        targetCursorDigits = digitsBeforeCursor - 1;\n      } else {\n        if (digitsBeforeCursor >= allDigits.length) {\n          return;\n        }\n\n        newDigits =\n          allDigits.slice(0, digitsBeforeCursor) + allDigits.slice(digitsBeforeCursor + 1);\n        targetCursorDigits = digitsBeforeCursor;\n      }\n\n      const formatted = formatWithPattern(newDigits, pattern);\n      cursorPositionRef.current = calculateCursorPosition(\n        targetCursorDigits,\n        formatted,\n        literalPrefixDigits,\n      );\n\n      setNumber(formatted);\n\n      emitChange(e.nativeEvent, prefix, formatted);\n    },\n    [emitChange, pattern, number, prefix],\n  );\n\n  const onInputChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      const formattedValue = formatPhoneDigits(\n        e.target.value,\n        pattern,\n        e.target.selectionStart || 0,\n      );\n      if (!formattedValue) return;\n\n      cursorPositionRef.current = formattedValue.nextCursor;\n      setNumber(formattedValue.formatted);\n\n      emitChange(e.nativeEvent, prefix, formattedValue.formatted);\n    },\n    [emitChange, pattern, prefix],\n  );\n\n  const onPrefixChange = useCallback(\n    (event: Event, newPrefix: string) => {\n      setPrefix(newPrefix);\n\n      emitChange(event, newPrefix, number);\n    },\n    [emitChange, number],\n  );\n\n  return { numberInputRef, prefix, number, onKeyDown, onInputChange, onPrefixChange };\n};\n\nexport interface PhoneFieldSplitInputProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'pattern'> {\n  value?: PhoneValue;\n  pattern?: string;\n  prefixes?: PhoneFieldSplitProps['prefixes'];\n  defaultPrefix?: PhoneFieldSplitProps['defaultPrefix'];\n  iconType?: IconicTypes;\n  validationStatus?: FormControlProps<PhoneValue>['validationStatus'];\n  onChange?: (event: Event, value: PhoneValue) => void;\n}\n\nexport const PhoneFieldSplitInput = ({\n  id,\n  name,\n  value: externalValue,\n  pattern = '## ## ## ## ##',\n  prefixes = DEFAULT_PHONE_PREFIXES,\n  defaultPrefix = prefixes[0]?.code || '+1',\n  placeholder = '',\n  iconType,\n  disabled = false,\n  required = false,\n  validationStatus = 'default',\n  onChange,\n  ...rest\n}: PhoneFieldSplitInputProps) => {\n  const internalId = useId();\n  const resolvedId = id ?? internalId;\n  const resolvedName = name ?? resolvedId;\n\n  const internalStatus = useInternalStatus({ isDisabled: disabled, validationStatus });\n  const { numberInputRef, prefix, number, onKeyDown, onInputChange, onPrefixChange } =\n    usePhoneField({\n      externalValue,\n      pattern,\n      defaultPrefix,\n      onChange,\n    });\n\n  return (\n    <div className=\"flex gap-8\">\n      <div\n        className={clsx('relative rounded-pill z-0 flex-shrink-0', {\n          'bg-white': internalStatus !== 'disabled',\n          'bg-pearl border-middleGrey': internalStatus === 'disabled',\n        })}\n      >\n        {/* Real select — invisible but interactive, uses fullLabel for dropdown options */}\n        <select\n          disabled={disabled}\n          value={prefix}\n          onChange={(e) => onPrefixChange(e.nativeEvent, e.target.value)}\n          className=\"peer opacity-0 absolute inset-0 w-full h-full cursor-pointer outline-none\"\n          id={`${resolvedId}-prefix`}\n          aria-label={`${resolvedName}-prefix`}\n        >\n          {(prefixes as PhonePrefix[]).map((p) => (\n            <option key={p.code} value={p.code}>\n              {p.fullLabel ?? p.label ?? p.code}\n            </option>\n          ))}\n        </select>\n\n        {/* Visible fake select showing the short label */}\n        <div\n          aria-hidden=\"true\"\n          className={clsx(\n            'text-b3 rounded-pill w-full border px-20 py-12 font-semibold pointer-events-none flex items-center justify-between gap-8 peer-focus-visible:ring-4 peer-focus-visible:ring-black peer-focus-visible:ring-offset-2',\n            {\n              'border-middleGrey': internalStatus === 'default',\n              'text-black bg-white': internalStatus !== 'disabled',\n              'bg-pearl border-middleGrey text-black': internalStatus === 'disabled',\n              'border-red': internalStatus === 'error',\n              'border-green': internalStatus === 'success',\n            },\n          )}\n        >\n          <span>{(prefixes as PhonePrefix[]).find((p) => p.code === prefix)?.label ?? prefix}</span>\n          <Icon name=\"ArrowDefaultDown\" type=\"svg\" width=\"24px\" color=\"black\" />\n        </div>\n      </div>\n\n      <div className=\"relative flex-1\">\n        <input\n          {...(rest as Record<string, unknown>)}\n          ref={numberInputRef}\n          type=\"tel\"\n          disabled={disabled}\n          required={required}\n          value={number}\n          onChange={onInputChange}\n          onKeyDown={onKeyDown}\n          placeholder={placeholder}\n          className={clsx(\n            'text-b3 rounded-pill w-full border overflow-hidden px-20 py-12 font-normal outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2',\n            {\n              'border-middleGrey focus:border-black active:border-black':\n                internalStatus === 'default',\n              'pe-[52px]': internalStatus === 'error' || internalStatus === 'success',\n              'bg-white text-black': internalStatus !== 'disabled',\n              'bg-pearl border-middleGrey': internalStatus === 'disabled',\n              'border-red': internalStatus === 'error',\n              'border-green': internalStatus === 'success',\n            },\n          )}\n          aria-label={`${resolvedName}-number`}\n        />\n\n        <div\n          className={clsx(\n            'pointer-events-none absolute inset-0 flex items-center justify-end px-20 py-12',\n            {\n              'text-grey': internalStatus === 'disabled',\n              'text-red': internalStatus === 'error',\n              'text-green': internalStatus === 'success',\n            },\n          )}\n        >\n          <span className=\"flex gap-x-8\">\n            {internalStatus === 'error' && (\n              <Icon name=\"CrossDefault\" width=\"24px\" type={iconType} />\n            )}\n            {internalStatus === 'success' && (\n              <Icon name=\"CheckDefault\" width=\"24px\" type={iconType} />\n            )}\n          </span>\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/ui/forms/Select.js

@@ -70,7 +70,7 @@ var c = (c) => {
 							width: "24px",
 							type: g
 						}),
-						/* @__PURE__ */ o("button", {
+						/* @__PURE__ */ o("span", {
 							className: "pointer-events-auto inline-flex",
 							children: /* @__PURE__ */ o(a, {
 								name: "ArrowDefaultDown",

package/ui/forms/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","names":[],"sources":["../../../lib/ui/forms/Select.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { useValue } from '../hooks/useValue';\nimport { useInternalStatus } from '../hooks/useInternalStatus';\nimport { FormControl, type FormControlProps } from './FormControl';\nimport { Icon, type IconicTypes } from '@clubmed/trident-icons';\nimport { type SelectHTMLAttributes, useId } from 'react';\n\nexport interface SelectProps<Value>\n  extends FormControlProps<Value, SelectHTMLAttributes<HTMLSelectElement>> {\n  description?: string;\n  iconType?: IconicTypes;\n  errorMessage?: string;\n  dataTestId?: string;\n}\n\nexport const Select = <Value = string,>(props: SelectProps<Value>) => {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    label,\n    value: initialValue,\n    description,\n    validationStatus = 'default',\n    iconType,\n    errorMessage,\n    disabled = false,\n    required = false,\n    hideRequiredStar,\n    className,\n    dataTestId = id,\n    onChange,\n    children,\n    ...rest\n  } = props;\n\n  const { value, setValue } = useValue<Value>({ initialValue, onChange });\n  const internalStatus = useInternalStatus({\n    isDisabled: disabled,\n    validationStatus,\n  });\n\n  return (\n    <FormControl\n      id={id}\n      className={className}\n      label={label}\n      description={description}\n      dataName=\"TextField\"\n      dataTestId={dataTestId}\n      disabled={disabled}\n      required={required}\n      hideRequiredStar={hideRequiredStar}\n      validationStatus={validationStatus}\n      errorMessage={errorMessage}\n    >\n      <div\n        className={clsx('relative rounded-pill z-0', {\n          'bg-white': internalStatus !== 'disabled',\n          'bg-pearl border-middleGrey': internalStatus === 'disabled',\n        })}\n      >\n        <select\n          {...rest}\n          id={id}\n          name={name}\n          disabled={disabled}\n          required={required}\n          value={value as any}\n          onChange={(e) => {\n            setValue(e.target.value as Value, e.nativeEvent);\n          }}\n          className={clsx(\n            'text-b3 rounded-pill w-full border overflow-hidden px-20 py-12 font-normal outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2 appearance-none bg-transparent',\n            {\n              'border-middleGrey focus:border-black active:border-black pe-[52px]':\n                internalStatus === 'default',\n              'pe-[84px]': internalStatus === 'error' || internalStatus === 'success',\n              'text-black': internalStatus !== 'disabled',\n              'bg-pearl border-middleGrey': internalStatus === 'disabled',\n              'border-red': internalStatus === 'error',\n              'border-green': internalStatus === 'success',\n            },\n          )}\n          aria-label={name}\n        >\n          {children}\n        </select>\n\n        <div\n          className={clsx(\n            'pointer-events-none absolute inset-0 flex items-center justify-between px-20 py-12 -z-1',\n            {\n              'text-grey': internalStatus === 'disabled',\n              'text-red': internalStatus === 'error',\n              'text-green': internalStatus === 'success',\n            },\n          )}\n        >\n          <span className=\"ms-auto flex gap-x-8\">\n            {internalStatus === 'error' && (\n              <Icon name=\"CrossDefault\" width=\"24px\" type={iconType} />\n            )}\n\n            {internalStatus === 'success' && (\n              <Icon name=\"CheckDefault\" width=\"24px\" type={iconType} />\n            )}\n\n            <button className=\"pointer-events-auto inline-flex\">\n              <Icon name=\"ArrowDefaultDown\" type=\"svg\" width=\"24px\" color=\"black\" />\n            </button>\n          </span>\n        </div>\n      </div>\n    </FormControl>\n  );\n};\n"],"mappings":";;;;;;;;AAeA,IAAa,KAA2B,MAA8B;CACpE,IAAM,IAAa,GAAO,EAEpB,EACJ,QAAK,GACL,UAAO,GACP,UACA,OAAO,GACP,gBACA,sBAAmB,WACnB,aACA,iBACA,cAAW,IACX,cAAW,IACX,qBACA,cACA,gBAAa,GACb,aACA,aACA,GAAG,MACD,GAEE,EAAE,UAAO,gBAAa,EAAgB;EAAE;EAAc;EAAU,CAAC,EACjE,IAAiB,EAAkB;EACvC,YAAY;EACZ;EACD,CAAC;AAEF,QACE,kBAAC,GAAD;EACM;EACO;EACJ;EACM;EACb,UAAS;EACG;EACF;EACA;EACQ;EACA;EACJ;YAEd,kBAAC,OAAD;GACE,WAAW,EAAK,6BAA6B;IAC3C,YAAY,MAAmB;IAC/B,8BAA8B,MAAmB;IAClD,CAAC;aAJJ,CAME,kBAAC,UAAD;IACE,GAAI;IACA;IACE;IACI;IACA;IACH;IACP,WAAW,MAAM;AACf,OAAS,EAAE,OAAO,OAAgB,EAAE,YAAY;;IAElD,WAAW,EACT,oMACA;KACE,sEACE,MAAmB;KACrB,aAAa,MAAmB,WAAW,MAAmB;KAC9D,cAAc,MAAmB;KACjC,8BAA8B,MAAmB;KACjD,cAAc,MAAmB;KACjC,gBAAgB,MAAmB;KACpC,CACF;IACD,cAAY;IAEX;IACM,CAAA,EAET,kBAAC,OAAD;IACE,WAAW,EACT,2FACA;KACE,aAAa,MAAmB;KAChC,YAAY,MAAmB;KAC/B,cAAc,MAAmB;KAClC,CACF;cAED,kBAAC,QAAD;KAAM,WAAU;eAAhB;MACG,MAAmB,WAClB,kBAAC,GAAD;OAAM,MAAK;OAAe,OAAM;OAAO,MAAM;OAAY,CAAA;MAG1D,MAAmB,aAClB,kBAAC,GAAD;OAAM,MAAK;OAAe,OAAM;OAAO,MAAM;OAAY,CAAA;MAG3D,kBAAC,UAAD;OAAQ,WAAU;iBAChB,kBAAC,GAAD;QAAM,MAAK;QAAmB,MAAK;QAAM,OAAM;QAAO,OAAM;QAAU,CAAA;OAC/D,CAAA;MACJ;;IACH,CAAA,CACF;;EACM,CAAA"}
+{"version":3,"file":"Select.js","names":[],"sources":["../../../lib/ui/forms/Select.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { useValue } from '../hooks/useValue';\nimport { useInternalStatus } from '../hooks/useInternalStatus';\nimport { FormControl, type FormControlProps } from './FormControl';\nimport { Icon, type IconicTypes } from '@clubmed/trident-icons';\nimport { type SelectHTMLAttributes, useId } from 'react';\n\nexport interface SelectProps<Value>\n  extends FormControlProps<Value, SelectHTMLAttributes<HTMLSelectElement>> {\n  description?: string;\n  iconType?: IconicTypes;\n  errorMessage?: string;\n  dataTestId?: string;\n}\n\nexport const Select = <Value = string,>(props: SelectProps<Value>) => {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    label,\n    value: initialValue,\n    description,\n    validationStatus = 'default',\n    iconType,\n    errorMessage,\n    disabled = false,\n    required = false,\n    hideRequiredStar,\n    className,\n    dataTestId = id,\n    onChange,\n    children,\n    ...rest\n  } = props;\n\n  const { value, setValue } = useValue<Value>({ initialValue, onChange });\n  const internalStatus = useInternalStatus({\n    isDisabled: disabled,\n    validationStatus,\n  });\n\n  return (\n    <FormControl\n      id={id}\n      className={className}\n      label={label}\n      description={description}\n      dataName=\"TextField\"\n      dataTestId={dataTestId}\n      disabled={disabled}\n      required={required}\n      hideRequiredStar={hideRequiredStar}\n      validationStatus={validationStatus}\n      errorMessage={errorMessage}\n    >\n      <div\n        className={clsx('relative rounded-pill z-0', {\n          'bg-white': internalStatus !== 'disabled',\n          'bg-pearl border-middleGrey': internalStatus === 'disabled',\n        })}\n      >\n        <select\n          {...rest}\n          id={id}\n          name={name}\n          disabled={disabled}\n          required={required}\n          value={value as any}\n          onChange={(e) => {\n            setValue(e.target.value as Value, e.nativeEvent);\n          }}\n          className={clsx(\n            'text-b3 rounded-pill w-full border overflow-hidden px-20 py-12 font-normal outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2 appearance-none bg-transparent',\n            {\n              'border-middleGrey focus:border-black active:border-black pe-[52px]':\n                internalStatus === 'default',\n              'pe-[84px]': internalStatus === 'error' || internalStatus === 'success',\n              'text-black': internalStatus !== 'disabled',\n              'bg-pearl border-middleGrey': internalStatus === 'disabled',\n              'border-red': internalStatus === 'error',\n              'border-green': internalStatus === 'success',\n            },\n          )}\n          aria-label={name}\n        >\n          {children}\n        </select>\n\n        <div\n          className={clsx(\n            'pointer-events-none absolute inset-0 flex items-center justify-between px-20 py-12 -z-1',\n            {\n              'text-grey': internalStatus === 'disabled',\n              'text-red': internalStatus === 'error',\n              'text-green': internalStatus === 'success',\n            },\n          )}\n        >\n          <span className=\"ms-auto flex gap-x-8\">\n            {internalStatus === 'error' && (\n              <Icon name=\"CrossDefault\" width=\"24px\" type={iconType} />\n            )}\n\n            {internalStatus === 'success' && (\n              <Icon name=\"CheckDefault\" width=\"24px\" type={iconType} />\n            )}\n\n            <span className=\"pointer-events-auto inline-flex\">\n              <Icon name=\"ArrowDefaultDown\" type=\"svg\" width=\"24px\" color=\"black\" />\n            </span>\n          </span>\n        </div>\n      </div>\n    </FormControl>\n  );\n};\n"],"mappings":";;;;;;;;AAeA,IAAa,KAA2B,MAA8B;CACpE,IAAM,IAAa,GAAO,EAEpB,EACJ,QAAK,GACL,UAAO,GACP,UACA,OAAO,GACP,gBACA,sBAAmB,WACnB,aACA,iBACA,cAAW,IACX,cAAW,IACX,qBACA,cACA,gBAAa,GACb,aACA,aACA,GAAG,MACD,GAEE,EAAE,UAAO,gBAAa,EAAgB;EAAE;EAAc;EAAU,CAAC,EACjE,IAAiB,EAAkB;EACvC,YAAY;EACZ;EACD,CAAC;AAEF,QACE,kBAAC,GAAD;EACM;EACO;EACJ;EACM;EACb,UAAS;EACG;EACF;EACA;EACQ;EACA;EACJ;YAEd,kBAAC,OAAD;GACE,WAAW,EAAK,6BAA6B;IAC3C,YAAY,MAAmB;IAC/B,8BAA8B,MAAmB;IAClD,CAAC;aAJJ,CAME,kBAAC,UAAD;IACE,GAAI;IACA;IACE;IACI;IACA;IACH;IACP,WAAW,MAAM;AACf,OAAS,EAAE,OAAO,OAAgB,EAAE,YAAY;;IAElD,WAAW,EACT,oMACA;KACE,sEACE,MAAmB;KACrB,aAAa,MAAmB,WAAW,MAAmB;KAC9D,cAAc,MAAmB;KACjC,8BAA8B,MAAmB;KACjD,cAAc,MAAmB;KACjC,gBAAgB,MAAmB;KACpC,CACF;IACD,cAAY;IAEX;IACM,CAAA,EAET,kBAAC,OAAD;IACE,WAAW,EACT,2FACA;KACE,aAAa,MAAmB;KAChC,YAAY,MAAmB;KAC/B,cAAc,MAAmB;KAClC,CACF;cAED,kBAAC,QAAD;KAAM,WAAU;eAAhB;MACG,MAAmB,WAClB,kBAAC,GAAD;OAAM,MAAK;OAAe,OAAM;OAAO,MAAM;OAAY,CAAA;MAG1D,MAAmB,aAClB,kBAAC,GAAD;OAAM,MAAK;OAAe,OAAM;OAAO,MAAM;OAAY,CAAA;MAG3D,kBAAC,QAAD;OAAM,WAAU;iBACd,kBAAC,GAAD;QAAM,MAAK;QAAmB,MAAK;QAAM,OAAM;QAAO,OAAM;QAAU,CAAA;OACjE,CAAA;MACF;;IACH,CAAA,CACF;;EACM,CAAA"}

package/ui/forms/checkboxes/Checkboxes.d.ts

@@ -1,5 +1,10 @@
 import { HTMLAttributes } from 'react';
 import { FormControlProps } from '../FormControl';
 export interface CheckboxesProps<Value = string> extends Pick<FormControlProps<Value[]>, 'id' | 'name' | 'value' | 'onChange' | 'disabled' | 'readOnly' | 'tabIndex' | 'description' | 'validationStatus' | 'errorMessage'>, Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /**
+     * Should the tabIndex be overridden for each checkbox?
+     * @default true
+     */
+    overrideTabIndex?: boolean;
 }
 export declare function Checkboxes<Value = string>(props: CheckboxesProps<Value>): import("react/jsx-runtime").JSX.Element;

package/ui/forms/checkboxes/Checkboxes.js

@@ -4,7 +4,7 @@ import { Children as n, cloneElement as r, isValidElement as i, useId as a } fro
 import { jsx as o } from "react/jsx-runtime";
 //#region lib/ui/forms/checkboxes/Checkboxes.tsx
 function s(s) {
-	let c = a(), { id: l = c, name: u = l, children: d, value: f, defaultValue: p, onChange: m, disabled: h, readOnly: g, tabIndex: _ = 0, ...v } = s, { value: y, setValue: b } = t({
+	let c = a(), { id: l = c, name: u = l, children: d, value: f, defaultValue: p, onChange: m, disabled: h, readOnly: g, tabIndex: _ = 0, overrideTabIndex: v = !0, ...y } = s, { value: b, setValue: x } = t({
 		initialValue: f,
 		formatter(e) {
 			return e === void 0 ? e : [].concat(e);
@@ -13,8 +13,8 @@ function s(s) {
 		onChange: m
 	});
 	return /* @__PURE__ */ o("div", {
-		...v,
-		className: v.className,
+		...y,
+		className: y.className,
 		role: "listbox",
 		children: n.map(d, (t, n) => {
 			if (i(t)) {
@@ -25,12 +25,12 @@ function s(s) {
 					id: `${l}-${n}`,
 					disabled: h,
 					readOnly: g,
-					tabIndex: _ + n + 1,
+					tabIndex: v ? _ + n + 1 : _,
 					className: e(t.props.className || "mt-8 first:mt-0"),
-					checked: y.includes(i),
+					checked: b.includes(i),
 					onChange(...e) {
 						let t = e[0] instanceof Event ? e[0] : e[0]?.nativeEvent ?? new Event("change");
-						(typeof e[2] == "boolean" ? e[2] : typeof e[1] == "boolean" ? e[1] : e[0]?.target?.checked) ? b(y.concat(i), t) : b(y.filter((e) => e !== i), t);
+						(typeof e[2] == "boolean" ? e[2] : typeof e[1] == "boolean" ? e[1] : e[0]?.target?.checked) ? x(b.concat(i), t) : x(b.filter((e) => e !== i), t);
 					}
 				});
 			}

package/ui/forms/checkboxes/Checkboxes.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkboxes.js","names":[],"sources":["../../../../lib/ui/forms/checkboxes/Checkboxes.tsx"],"sourcesContent":["import { Children, cloneElement, type HTMLAttributes, isValidElement, useId } from 'react';\nimport type { FormControlProps } from '../FormControl';\nimport { useValue } from '../../hooks/useValue';\nimport type { CheckboxProps } from './Checkbox';\nimport clsx from 'clsx';\n\nexport interface CheckboxesProps<Value = string>\n  extends Pick<\n      FormControlProps<Value[]>,\n      | 'id'\n      | 'name'\n      | 'value'\n      | 'onChange'\n      | 'disabled'\n      | 'readOnly'\n      | 'tabIndex'\n      | 'description'\n      | 'validationStatus'\n      | 'errorMessage'\n    >,\n    Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {}\n\nexport function Checkboxes<Value = string>(props: CheckboxesProps<Value>) {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    children,\n    value: initialValue,\n    defaultValue,\n    onChange,\n    disabled,\n    readOnly,\n    tabIndex = 0,\n    ...rest\n  } = props;\n\n  const { value, setValue } = useValue<Value[]>({\n    initialValue,\n    formatter(value) {\n      return value !== undefined ? ([].concat(value as never) as Value[]) : value;\n    },\n    defaultValue: (defaultValue as Value[]) || ([] as Value[]),\n    onChange,\n  });\n\n  return (\n    <div {...rest} className={rest.className} role=\"listbox\">\n      {Children.map(children, (child, index) => {\n        if (isValidElement(child)) {\n          const propValue: Value = (child.props as CheckboxProps).value as Value;\n\n          return cloneElement(child, {\n            ...(child.props as any),\n            name,\n            id: `${id}-${index}`,\n            disabled,\n            readOnly,\n            tabIndex: tabIndex + index + 1,\n            className: clsx((child.props as any).className || 'mt-8 first:mt-0'),\n            checked: value.includes(propValue),\n            onChange(...args: unknown[]) {\n              const event =\n                args[0] instanceof Event\n                  ? args[0]\n                  : (args[0] as React.ChangeEvent<HTMLInputElement>)?.nativeEvent ??\n                    new Event('change');\n              const checked =\n                typeof args[2] === 'boolean'\n                  ? args[2]\n                  : typeof args[1] === 'boolean'\n                    ? args[1]\n                    : (args[0] as React.ChangeEvent<HTMLInputElement>)?.target?.checked;\n\n              if (checked) {\n                setValue(value.concat(propValue), event);\n              } else {\n                setValue(\n                  value.filter((v) => v !== propValue),\n                  event,\n                );\n              }\n            },\n          } as CheckboxProps);\n        }\n\n        return child;\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;;;AAsBA,SAAgB,EAA2B,GAA+B;CACxE,IAAM,IAAa,GAAO,EAEpB,EACJ,QAAK,GACL,UAAO,GACP,aACA,OAAO,GACP,iBACA,aACA,aACA,aACA,cAAW,GACX,GAAG,MACD,GAEE,EAAE,UAAO,gBAAa,EAAkB;EAC5C;EACA,UAAU,GAAO;AACf,UAAO,MAAU,KAAA,IAAqD,IAAxC,EAAE,CAAC,OAAO,EAAe;;EAEzD,cAAe,KAA6B,EAAE;EAC9C;EACD,CAAC;AAEF,QACE,kBAAC,OAAD;EAAK,GAAI;EAAM,WAAW,EAAK;EAAW,MAAK;YAC5C,EAAS,IAAI,IAAW,GAAO,MAAU;AACxC,OAAI,EAAe,EAAM,EAAE;IACzB,IAAM,IAAoB,EAAM,MAAwB;AAExD,WAAO,EAAa,GAAO;KACzB,GAAI,EAAM;KACV;KACA,IAAI,GAAG,EAAG,GAAG;KACb;KACA;KACA,UAAU,IAAW,IAAQ;KAC7B,WAAW,EAAM,EAAM,MAAc,aAAa,kBAAkB;KACpE,SAAS,EAAM,SAAS,EAAU;KAClC,SAAS,GAAG,GAAiB;MAC3B,IAAM,IACJ,EAAK,cAAc,QACf,EAAK,KACJ,EAAK,IAA4C,eAClD,IAAI,MAAM,SAAS;AAQzB,OANE,OAAO,EAAK,MAAO,YACf,EAAK,KACL,OAAO,EAAK,MAAO,YACjB,EAAK,KACJ,EAAK,IAA4C,QAAQ,WAGhE,EAAS,EAAM,OAAO,EAAU,EAAE,EAAM,GAExC,EACE,EAAM,QAAQ,MAAM,MAAM,EAAU,EACpC,EACD;;KAGN,CAAkB;;AAGrB,UAAO;IACP;EACE,CAAA"}
+{"version":3,"file":"Checkboxes.js","names":[],"sources":["../../../../lib/ui/forms/checkboxes/Checkboxes.tsx"],"sourcesContent":["import { Children, cloneElement, type HTMLAttributes, isValidElement, useId } from 'react';\nimport type { FormControlProps } from '../FormControl';\nimport { useValue } from '../../hooks/useValue';\nimport type { CheckboxProps } from './Checkbox';\nimport clsx from 'clsx';\n\nexport interface CheckboxesProps<Value = string>\n  extends Pick<\n      FormControlProps<Value[]>,\n      | 'id'\n      | 'name'\n      | 'value'\n      | 'onChange'\n      | 'disabled'\n      | 'readOnly'\n      | 'tabIndex'\n      | 'description'\n      | 'validationStatus'\n      | 'errorMessage'\n    >,\n    Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /**\n   * Should the tabIndex be overridden for each checkbox?\n   * @default true\n   */\n  overrideTabIndex?: boolean;\n}\n\nexport function Checkboxes<Value = string>(props: CheckboxesProps<Value>) {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    children,\n    value: initialValue,\n    defaultValue,\n    onChange,\n    disabled,\n    readOnly,\n    tabIndex = 0,\n    overrideTabIndex = true,\n    ...rest\n  } = props;\n\n  const { value, setValue } = useValue<Value[]>({\n    initialValue,\n    formatter(value) {\n      return value !== undefined ? ([].concat(value as never) as Value[]) : value;\n    },\n    defaultValue: (defaultValue as Value[]) || ([] as Value[]),\n    onChange,\n  });\n\n  return (\n    <div {...rest} className={rest.className} role=\"listbox\">\n      {Children.map(children, (child, index) => {\n        if (isValidElement(child)) {\n          const propValue: Value = (child.props as CheckboxProps).value as Value;\n\n          return cloneElement(child, {\n            ...(child.props as any),\n            name,\n            id: `${id}-${index}`,\n            disabled,\n            readOnly,\n            tabIndex: overrideTabIndex ? tabIndex + index + 1 : tabIndex,\n            className: clsx((child.props as any).className || 'mt-8 first:mt-0'),\n            checked: value.includes(propValue),\n            onChange(...args: unknown[]) {\n              const event =\n                args[0] instanceof Event\n                  ? args[0]\n                  : (args[0] as React.ChangeEvent<HTMLInputElement>)?.nativeEvent ??\n                    new Event('change');\n              const checked =\n                typeof args[2] === 'boolean'\n                  ? args[2]\n                  : typeof args[1] === 'boolean'\n                    ? args[1]\n                    : (args[0] as React.ChangeEvent<HTMLInputElement>)?.target?.checked;\n\n              if (checked) {\n                setValue(value.concat(propValue), event);\n              } else {\n                setValue(\n                  value.filter((v) => v !== propValue),\n                  event,\n                );\n              }\n            },\n          } as CheckboxProps);\n        }\n\n        return child;\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;;;AA4BA,SAAgB,EAA2B,GAA+B;CACxE,IAAM,IAAa,GAAO,EAEpB,EACJ,QAAK,GACL,UAAO,GACP,aACA,OAAO,GACP,iBACA,aACA,aACA,aACA,cAAW,GACX,sBAAmB,IACnB,GAAG,MACD,GAEE,EAAE,UAAO,gBAAa,EAAkB;EAC5C;EACA,UAAU,GAAO;AACf,UAAO,MAAU,KAAA,IAAqD,IAAxC,EAAE,CAAC,OAAO,EAAe;;EAEzD,cAAe,KAA6B,EAAE;EAC9C;EACD,CAAC;AAEF,QACE,kBAAC,OAAD;EAAK,GAAI;EAAM,WAAW,EAAK;EAAW,MAAK;YAC5C,EAAS,IAAI,IAAW,GAAO,MAAU;AACxC,OAAI,EAAe,EAAM,EAAE;IACzB,IAAM,IAAoB,EAAM,MAAwB;AAExD,WAAO,EAAa,GAAO;KACzB,GAAI,EAAM;KACV;KACA,IAAI,GAAG,EAAG,GAAG;KACb;KACA;KACA,UAAU,IAAmB,IAAW,IAAQ,IAAI;KACpD,WAAW,EAAM,EAAM,MAAc,aAAa,kBAAkB;KACpE,SAAS,EAAM,SAAS,EAAU;KAClC,SAAS,GAAG,GAAiB;MAC3B,IAAM,IACJ,EAAK,cAAc,QACf,EAAK,KACJ,EAAK,IAA4C,eAClD,IAAI,MAAM,SAAS;AAQzB,OANE,OAAO,EAAK,MAAO,YACf,EAAK,KACL,OAAO,EAAK,MAAO,YACjB,EAAK,KACJ,EAAK,IAA4C,QAAQ,WAGhE,EAAS,EAAM,OAAO,EAAU,EAAE,EAAM,GAExC,EACE,EAAM,QAAQ,MAAM,MAAM,EAAU,EACpC,EACD;;KAGN,CAAkB;;AAGrB,UAAO;IACP;EACE,CAAA"}