@clubmed/trident-ui 2.0.0-beta.4 → 2.0.0-beta.6

package/chunks/DateField.js

@@ -1,6 +1,6 @@
 import { t as e } from "./clsx.js";
-import { useInternalStatus as t } from "../ui/hooks/useInternalStatus.js";
-import { useValue as n } from "../ui/hooks/useValue.js";
+import { useValue as t } from "../ui/hooks/useValue.js";
+import { useInternalStatus as n } from "../ui/hooks/useInternalStatus.js";
 import { FormControl as r } from "../ui/forms/FormControl.js";
 import { useCallback as i, useEffect as a, useId as o, useRef as s, useState as c } from "react";
 import { Icon as l } from "@clubmed/trident-icons";
@@ -71,10 +71,10 @@ var S = (e) => !e || !v(new Date(e)) ? "" : x(new Date(e), { representation: "da
 	let r = (e) => new Date(e.getFullYear(), e.getMonth(), e.getDate()), i = r(new Date(e));
 	return !(t && i < r(t) || n && i > r(n));
 }, w = (f) => {
-	let p = o(), { id: m = p, name: h = m, label: g, description: _, openDatepicker: v, validationStatus: b = "default", icon: x = "CalendarDefault", iconType: w, errorMessage: T, disabled: E = !1, required: D = !1, hideRequiredStar: O, dataTestId: k = "DateField", value: A, min: j, max: M, onChange: N, ...P } = f, F = s(null), [I, L] = c(!1), R = t({
+	let p = o(), { id: m = p, name: h = m, label: g, description: _, openDatepicker: v, validationStatus: b = "default", icon: x = "CalendarDefault", iconType: w, errorMessage: T, disabled: E = !1, required: D = !1, hideRequiredStar: O, dataTestId: k = "DateField", value: A, min: j, max: M, onChange: N, ...P } = f, F = s(null), [I, L] = c(!1), R = n({
 		isDisabled: E,
 		validationStatus: b
-	}), { setValue: z, value: B } = n({
+	}), { setValue: z, value: B } = t({
 		name: h,
 		formatter: S,
 		initialValue: A,

package/examples/checkbox-demo.js

@@ -1,27 +1,21 @@
 "use client";
-import { Checkbox as e } from "../ui/forms/checkboxes/Checkbox.js";
-import { useState as t } from "react";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { Clickable as e } from "../ui/Clickable.js";
+import { Checkbox as t } from "../ui/forms/checkboxes/Checkbox.js";
+import { useState as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
 //#region lib/examples/checkbox-demo.tsx
 function i() {
-	let [i, a] = t(!1), [o, s] = t(!1);
+	let [i, a] = n(!1);
 	return /* @__PURE__ */ r("div", {
 		className: "space-y-4",
-		children: [/* @__PURE__ */ n(e, {
-			name: "demo",
-			value: "demo-value",
-			checked: i,
-			onChange: (e) => a(e.target.checked),
-			children: "Basic checkbox"
-		}), /* @__PURE__ */ n(e, {
-			name: "demo2",
-			value: "demo-value2",
-			checked: o,
-			onChange: (e) => s(e.target.checked),
-			validationStatus: "error",
-			errorMessage: "This is an error",
-			children: "Checkbox with error"
-		})]
+		children: /* @__PURE__ */ r(e, {
+			onClick: () => a(!i),
+			children: /* @__PURE__ */ r(t, {
+				id: "demo",
+				name: "demo",
+				checked: i
+			})
+		})
 	});
 }
 //#endregion

package/examples/checkbox-demo.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox-demo.js","names":[],"sources":["../../lib/examples/checkbox-demo.tsx"],"sourcesContent":["'use client';\n\nimport { Checkbox } from '@/ui/forms/checkboxes/Checkbox';\nimport { useState } from 'react';\n\nexport default function CheckboxDemo() {\n  const [checked1, setChecked1] = useState(false);\n  const [checked2, setChecked2] = useState(false);\n\n  return (\n    <div className=\"space-y-4\">\n      <Checkbox\n        name=\"demo\"\n        value=\"demo-value\"\n        checked={checked1}\n        onChange={(e) => setChecked1(e.target.checked)}\n      >\n        Basic checkbox\n      </Checkbox>\n      <Checkbox\n        name=\"demo2\"\n        value=\"demo-value2\"\n        checked={checked2}\n        onChange={(e) => setChecked2(e.target.checked)}\n        validationStatus=\"error\"\n        errorMessage=\"This is an error\"\n      >\n        Checkbox with error\n      </Checkbox>\n    </div>\n  );\n}\n"],"mappings":";;;;;AAKA,SAAwB,IAAe;CACrC,IAAM,CAAC,GAAU,KAAe,EAAS,GAAM,EACzC,CAAC,GAAU,KAAe,EAAS,GAAM;AAE/C,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,GAAD;GACE,MAAK;GACL,OAAM;GACN,SAAS;GACT,WAAW,MAAM,EAAY,EAAE,OAAO,QAAQ;aAC/C;GAEU,CAAA,EACX,kBAAC,GAAD;GACE,MAAK;GACL,OAAM;GACN,SAAS;GACT,WAAW,MAAM,EAAY,EAAE,OAAO,QAAQ;GAC9C,kBAAiB;GACjB,cAAa;aACd;GAEU,CAAA,CAAA"}
+{"version":3,"file":"checkbox-demo.js","names":[],"sources":["../../lib/examples/checkbox-demo.tsx"],"sourcesContent":["'use client';\n\nimport { Clickable } from '@/ui/Clickable';\nimport { Checkbox } from '@/ui/forms/checkboxes/Checkbox';\nimport { useState } from 'react';\n\nexport default function CheckboxDemo() {\n  const [checked, setChecked] = useState(false);\n\n  return (\n    <div className=\"space-y-4\">\n      <Clickable onClick={() => setChecked(!checked)}>\n        <Checkbox id=\"demo\" name=\"demo\" checked={checked} />\n      </Clickable>\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAMA,SAAwB,IAAe;CACrC,IAAM,CAAC,GAAS,KAAc,EAAS,GAAM;AAE7C,QACE,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,GAAD;GAAW,eAAe,EAAW,CAAC,EAAQ;aAC5C,kBAAC,GAAD;IAAU,IAAG;IAAO,MAAK;IAAgB;IAAW,CAAA;GAC1C,CAAA;EACR,CAAA"}

package/examples/checkbox-disabled-demo.js

@@ -5,18 +5,21 @@ import { jsx as t, jsxs as n } from "react/jsx-runtime";
 function r() {
 	return /* @__PURE__ */ n("div", {
 		className: "space-y-4",
-		children: [/* @__PURE__ */ t(e, {
-			name: "disabled-unchecked",
-			value: "disabled",
-			disabled: !0,
-			children: "Disabled unchecked"
-		}), /* @__PURE__ */ t(e, {
-			name: "disabled-checked",
-			value: "disabled-checked",
-			disabled: !0,
-			checked: !0,
-			children: "Disabled checked"
-		})]
+		children: [
+			"Disabled unchecked",
+			/* @__PURE__ */ t(e, {
+				name: "disabled-unchecked",
+				value: "disabled",
+				disabled: !0
+			}),
+			"Disabled checked",
+			/* @__PURE__ */ t(e, {
+				name: "disabled-checked",
+				value: "disabled-checked",
+				disabled: !0,
+				checked: !0
+			})
+		]
 	});
 }
 //#endregion

package/examples/checkbox-disabled-demo.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox-disabled-demo.js","names":[],"sources":["../../lib/examples/checkbox-disabled-demo.tsx"],"sourcesContent":["'use client';\n\nimport { Checkbox } from '@/ui/forms/checkboxes/Checkbox';\n\nexport default function CheckboxDisabledDemo() {\n  return (\n    <div className=\"space-y-4\">\n      <Checkbox name=\"disabled-unchecked\" value=\"disabled\" disabled>\n        Disabled unchecked\n      </Checkbox>\n      <Checkbox name=\"disabled-checked\" value=\"disabled-checked\" disabled checked>\n        Disabled checked\n      </Checkbox>\n    </div>\n  );\n}\n"],"mappings":";;;;AAIA,SAAwB,IAAuB;AAC7C,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,GAAD;GAAU,MAAK;GAAqB,OAAM;GAAW,UAAA;aAAS;GAEnD,CAAA,EACX,kBAAC,GAAD;GAAU,MAAK;GAAmB,OAAM;GAAmB,UAAA;GAAS,SAAA;aAAQ;GAEjE,CAAA,CAAA"}
+{"version":3,"file":"checkbox-disabled-demo.js","names":[],"sources":["../../lib/examples/checkbox-disabled-demo.tsx"],"sourcesContent":["'use client';\n\nimport { Checkbox } from '@/ui/forms/checkboxes/Checkbox';\n\nexport default function CheckboxDisabledDemo() {\n  return (\n    <div className=\"space-y-4\">\n      Disabled unchecked\n      <Checkbox name=\"disabled-unchecked\" value=\"disabled\" disabled></Checkbox>\n      Disabled checked\n      <Checkbox name=\"disabled-checked\" value=\"disabled-checked\" disabled checked></Checkbox>\n    </div>\n  );\n}\n"],"mappings":";;;;AAIA,SAAwB,IAAuB;AAC7C,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf;GAA2B;GAEzB,kBAAC,GAAD;IAAU,MAAK;IAAqB,OAAM;IAAW,UAAA;IAAoB,CAAA;;GAEzE,kBAAC,GAAD;IAAU,MAAK;IAAmB,OAAM;IAAmB,UAAA;IAAS,SAAA;IAAmB,CAAA"}

package/examples/checkboxes-demo.js

@@ -1,21 +1,21 @@
 "use client";
-import { Checkbox as e } from "../ui/forms/checkboxes/Checkbox.js";
-import { Checkboxes as t } from "../ui/forms/checkboxes/Checkboxes.js";
+import { Checkboxes as e } from "../ui/forms/checkboxes/Checkboxes.js";
+import { FormCheckbox as t } from "../ui/forms/checkboxes/FormCheckbox.js";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region lib/examples/checkboxes-demo.tsx
 function i() {
-	return /* @__PURE__ */ r(t, {
+	return /* @__PURE__ */ r(e, {
 		name: "options",
 		children: [
-			/* @__PURE__ */ n(e, {
+			/* @__PURE__ */ n(t, {
 				value: "option1",
 				children: "Option 1"
 			}),
-			/* @__PURE__ */ n(e, {
+			/* @__PURE__ */ n(t, {
 				value: "option2",
 				children: "Option 2"
 			}),
-			/* @__PURE__ */ n(e, {
+			/* @__PURE__ */ n(t, {
 				value: "option3",
 				children: "Option 3"
 			})

package/examples/checkboxes-demo.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkboxes-demo.js","names":[],"sources":["../../lib/examples/checkboxes-demo.tsx"],"sourcesContent":["'use client';\n\nimport { Checkboxes } from '@/ui/forms/checkboxes/Checkboxes';\nimport { Checkbox } from '@/ui/forms/checkboxes/Checkbox';\n\nexport default function CheckboxesDemo() {\n  return (\n    <Checkboxes name=\"options\">\n      <Checkbox value=\"option1\">Option 1</Checkbox>\n      <Checkbox value=\"option2\">Option 2</Checkbox>\n      <Checkbox value=\"option3\">Option 3</Checkbox>\n    </Checkboxes>\n  );\n}\n"],"mappings":";;;;;AAKA,SAAwB,IAAiB;AACvC,QACE,kBAAC,GAAD;EAAY,MAAK;YAAjB;GACE,kBAAC,GAAD;IAAU,OAAM;cAAU;IAAmB,CAAA;GAC7C,kBAAC,GAAD;IAAU,OAAM;cAAU;IAAmB,CAAA;GAC7C,kBAAC,GAAD;IAAU,OAAM;cAAU;IAAmB,CAAA"}
+{"version":3,"file":"checkboxes-demo.js","names":[],"sources":["../../lib/examples/checkboxes-demo.tsx"],"sourcesContent":["'use client';\n\nimport { Checkboxes } from '@/ui/forms/checkboxes/Checkboxes';\nimport { FormCheckbox } from '@/ui/forms/checkboxes/FormCheckbox';\n\nexport default function CheckboxesDemo() {\n  return (\n    <Checkboxes name=\"options\">\n      <FormCheckbox value=\"option1\">Option 1</FormCheckbox>\n      <FormCheckbox value=\"option2\">Option 2</FormCheckbox>\n      <FormCheckbox value=\"option3\">Option 3</FormCheckbox>\n    </Checkboxes>\n  );\n}\n"],"mappings":";;;;;AAKA,SAAwB,IAAiB;AACvC,QACE,kBAAC,GAAD;EAAY,MAAK;YAAjB;GACE,kBAAC,GAAD;IAAc,OAAM;cAAU;IAAuB,CAAA;GACrD,kBAAC,GAAD;IAAc,OAAM;cAAU;IAAuB,CAAA;GACrD,kBAAC,GAAD;IAAc,OAAM;cAAU;IAAuB,CAAA"}

package/examples/checkboxes-with-form-control-demo.js

@@ -1,6 +1,6 @@
 "use client";
-import { Checkbox as e } from "../ui/forms/checkboxes/Checkbox.js";
-import { Checkboxes as t } from "../ui/forms/checkboxes/Checkboxes.js";
+import { Checkboxes as e } from "../ui/forms/checkboxes/Checkboxes.js";
+import { FormCheckbox as t } from "../ui/forms/checkboxes/FormCheckbox.js";
 import { FormControl as n } from "../ui/forms/FormControl.js";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region lib/examples/checkboxes-with-form-control-demo.tsx
@@ -8,19 +8,19 @@ function a() {
 	return /* @__PURE__ */ r(n, {
 		label: "Select options",
 		description: "Choose one or more options",
-		children: /* @__PURE__ */ i(t, {
+		children: /* @__PURE__ */ i(e, {
 			name: "options",
 			"aria-labelledby": "options-label",
 			children: [
-				/* @__PURE__ */ r(e, {
+				/* @__PURE__ */ r(t, {
 					value: "option1",
 					children: "Option 1"
 				}),
-				/* @__PURE__ */ r(e, {
+				/* @__PURE__ */ r(t, {
 					value: "option2",
 					children: "Option 2"
 				}),
-				/* @__PURE__ */ r(e, {
+				/* @__PURE__ */ r(t, {
 					value: "option3",
 					children: "Option 3"
 				})

package/examples/checkboxes-with-form-control-demo.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkboxes-with-form-control-demo.js","names":[],"sources":["../../lib/examples/checkboxes-with-form-control-demo.tsx"],"sourcesContent":["'use client';\n\nimport { FormControl } from '@/ui/forms/FormControl';\nimport { Checkboxes } from '@/ui/forms/checkboxes/Checkboxes';\nimport { Checkbox } from '@/ui/forms/checkboxes/Checkbox';\n\nexport default function CheckboxesWithFormControlDemo() {\n  return (\n    <FormControl label=\"Select options\" description=\"Choose one or more options\">\n      <Checkboxes name=\"options\" aria-labelledby=\"options-label\">\n        <Checkbox value=\"option1\">Option 1</Checkbox>\n        <Checkbox value=\"option2\">Option 2</Checkbox>\n        <Checkbox value=\"option3\">Option 3</Checkbox>\n      </Checkboxes>\n    </FormControl>\n  );\n}\n"],"mappings":";;;;;;AAMA,SAAwB,IAAgC;AACtD,QACE,kBAAC,GAAD;EAAa,OAAM;EAAiB,aAAY;YAC9C,kBAAC,GAAD;GAAY,MAAK;GAAU,mBAAgB;aAA3C;IACE,kBAAC,GAAD;KAAU,OAAM;eAAU;KAAmB,CAAA;IAC7C,kBAAC,GAAD;KAAU,OAAM;eAAU;KAAmB,CAAA;IAC7C,kBAAC,GAAD;KAAU,OAAM;eAAU;KAAmB,CAAA;;;EAEnC,CAAA"}
+{"version":3,"file":"checkboxes-with-form-control-demo.js","names":[],"sources":["../../lib/examples/checkboxes-with-form-control-demo.tsx"],"sourcesContent":["'use client';\n\nimport { FormControl } from '@/ui/forms/FormControl';\nimport { Checkboxes } from '@/ui/forms/checkboxes/Checkboxes';\nimport { FormCheckbox } from '@/ui/forms/checkboxes/FormCheckbox';\n\nexport default function CheckboxesWithFormControlDemo() {\n  return (\n    <FormControl label=\"Select options\" description=\"Choose one or more options\">\n      <Checkboxes name=\"options\" aria-labelledby=\"options-label\">\n        <FormCheckbox value=\"option1\">Option 1</FormCheckbox>\n        <FormCheckbox value=\"option2\">Option 2</FormCheckbox>\n        <FormCheckbox value=\"option3\">Option 3</FormCheckbox>\n      </Checkboxes>\n    </FormControl>\n  );\n}\n"],"mappings":";;;;;;AAMA,SAAwB,IAAgC;AACtD,QACE,kBAAC,GAAD;EAAa,OAAM;EAAiB,aAAY;YAC9C,kBAAC,GAAD;GAAY,MAAK;GAAU,mBAAgB;aAA3C;IACE,kBAAC,GAAD;KAAc,OAAM;eAAU;KAAuB,CAAA;IACrD,kBAAC,GAAD;KAAc,OAAM;eAAU;KAAuB,CAAA;IACrD,kBAAC,GAAD;KAAc,OAAM;eAAU;KAAuB,CAAA;;;EAE3C,CAAA"}

package/examples/form-checkbox-demo.d.ts

@@ -0,0 +1 @@
+export default function FormCheckboxDemo(): import("react/jsx-runtime").JSX.Element;

package/examples/form-checkbox-demo.js

@@ -0,0 +1,30 @@
+"use client";
+import { FormCheckbox as e } from "../ui/forms/checkboxes/FormCheckbox.js";
+import { useState as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region lib/examples/form-checkbox-demo.tsx
+function i() {
+	let [i, a] = t(!1), [o, s] = t(!1);
+	return /* @__PURE__ */ r("div", {
+		className: "space-y-4",
+		children: [/* @__PURE__ */ n(e, {
+			name: "demo",
+			value: "demo-value",
+			checked: i,
+			onChange: (e) => a(e.target.checked),
+			children: "Basic checkbox"
+		}), /* @__PURE__ */ n(e, {
+			name: "demo2",
+			value: "demo-value2",
+			checked: o,
+			onChange: (e) => s(e.target.checked),
+			validationStatus: "error",
+			errorMessage: "This field is required",
+			children: "Checkbox with validation"
+		})]
+	});
+}
+//#endregion
+export { i as default };
+
+//# sourceMappingURL=form-checkbox-demo.js.map

package/examples/form-checkbox-demo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-checkbox-demo.js","names":[],"sources":["../../lib/examples/form-checkbox-demo.tsx"],"sourcesContent":["'use client';\n\nimport { FormCheckbox } from '@/ui/forms/checkboxes/FormCheckbox';\nimport { useState } from 'react';\n\nexport default function FormCheckboxDemo() {\n  const [checked1, setChecked1] = useState(false);\n  const [checked2, setChecked2] = useState(false);\n\n  return (\n    <div className=\"space-y-4\">\n      <FormCheckbox\n        name=\"demo\"\n        value=\"demo-value\"\n        checked={checked1}\n        onChange={(e) => setChecked1(e.target.checked)}\n      >\n        Basic checkbox\n      </FormCheckbox>\n      <FormCheckbox\n        name=\"demo2\"\n        value=\"demo-value2\"\n        checked={checked2}\n        onChange={(e) => setChecked2(e.target.checked)}\n        validationStatus=\"error\"\n        errorMessage=\"This field is required\"\n      >\n        Checkbox with validation\n      </FormCheckbox>\n    </div>\n  );\n}\n"],"mappings":";;;;;AAKA,SAAwB,IAAmB;CACzC,IAAM,CAAC,GAAU,KAAe,EAAS,GAAM,EACzC,CAAC,GAAU,KAAe,EAAS,GAAM;AAE/C,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,GAAD;GACE,MAAK;GACL,OAAM;GACN,SAAS;GACT,WAAW,MAAM,EAAY,EAAE,OAAO,QAAQ;aAC/C;GAEc,CAAA,EACf,kBAAC,GAAD;GACE,MAAK;GACL,OAAM;GACN,SAAS;GACT,WAAW,MAAM,EAAY,EAAE,OAAO,QAAQ;GAC9C,kBAAiB;GACjB,cAAa;aACd;GAEc,CAAA,CAAA"}

package/examples/form-checkbox-disabled-demo.d.ts

@@ -0,0 +1 @@
+export default function FormCheckboxDisabledDemo(): import("react/jsx-runtime").JSX.Element;

package/examples/form-checkbox-disabled-demo.js

@@ -0,0 +1,25 @@
+"use client";
+import { FormCheckbox as e } from "../ui/forms/checkboxes/FormCheckbox.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region lib/examples/form-checkbox-disabled-demo.tsx
+function r() {
+	return /* @__PURE__ */ n("div", {
+		className: "space-y-4",
+		children: [/* @__PURE__ */ t(e, {
+			name: "disabled-unchecked",
+			value: "disabled",
+			disabled: !0,
+			children: "Disabled unchecked"
+		}), /* @__PURE__ */ t(e, {
+			name: "disabled-checked",
+			value: "disabled-checked",
+			disabled: !0,
+			checked: !0,
+			children: "Disabled checked"
+		})]
+	});
+}
+//#endregion
+export { r as default };
+
+//# sourceMappingURL=form-checkbox-disabled-demo.js.map

package/examples/form-checkbox-disabled-demo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-checkbox-disabled-demo.js","names":[],"sources":["../../lib/examples/form-checkbox-disabled-demo.tsx"],"sourcesContent":["'use client';\n\nimport { FormCheckbox } from '@/ui/forms/checkboxes/FormCheckbox';\n\nexport default function FormCheckboxDisabledDemo() {\n  return (\n    <div className=\"space-y-4\">\n      <FormCheckbox name=\"disabled-unchecked\" value=\"disabled\" disabled>\n        Disabled unchecked\n      </FormCheckbox>\n      <FormCheckbox name=\"disabled-checked\" value=\"disabled-checked\" disabled checked>\n        Disabled checked\n      </FormCheckbox>\n    </div>\n  );\n}\n"],"mappings":";;;;AAIA,SAAwB,IAA2B;AACjD,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,GAAD;GAAc,MAAK;GAAqB,OAAM;GAAW,UAAA;aAAS;GAEnD,CAAA,EACf,kBAAC,GAAD;GAAc,MAAK;GAAmB,OAAM;GAAmB,UAAA;GAAS,SAAA;aAAQ;GAEjE,CAAA,CAAA"}

package/package.json

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

package/styles/animate.css

@@ -13,7 +13,7 @@
   }
 }
 
-@keyframes bounceEnter {
+@keyframes bounce-enter {
   0% {
     opacity: 0;
     transform: scale(0.5);
@@ -28,7 +28,7 @@
   }
 }
 
-@keyframes bounceEnterStrong {
+@keyframes bounce-enter-strong {
   0% {
     opacity: 0;
     transform: scale(0.5);
@@ -43,7 +43,7 @@
   }
 }
 
-@keyframes bounceExit {
+@keyframes bounce-exit {
   0% {
     opacity: 1;
     transform: scale(1);
@@ -63,7 +63,7 @@
   }
 }
 
-@keyframes loaderDash {
+@keyframes loader-dash {
   0% {
     stroke-dashoffset: 38;
     stroke-dasharray: 38;
@@ -93,7 +93,7 @@
   }
 }
 
-@keyframes rotatesIn {
+@keyframes rotates-in {
   0% {
     transform: translateY(-20px);
     opacity: 0;
@@ -104,16 +104,16 @@
   }
 }
 
-@keyframes slideDown {
+@keyframes slide-down {
   0% {
-    transform: translateY(var(--tw-slideDown, -100%));
+    transform: translateY(var(--tw-slide-down, -100%));
   }
   100% {
     transform: translateY(0%);
   }
 }
 
-@keyframes slideRightEnter {
+@keyframes slide-right-enter {
   0% {
     transform: translateX(100%);
     opacity: 0;
@@ -124,7 +124,7 @@
   }
 }
 
-@keyframes slideRightExit {
+@keyframes slide-right-exit {
   0% {
     transform: translateX(0%);
   }
@@ -133,9 +133,9 @@
   }
 }
 
-@keyframes slideUp {
+@keyframes slide-up {
   0% {
-    transform: translateY(var(--tw-slideUp, 100%));
+    transform: translateY(var(--tw-slide-up, 100%));
   }
   100% {
     transform: translateY(0%);
@@ -178,7 +178,7 @@
   }
 }
 
-@keyframes backdropFadeIn {
+@keyframes backdrop-fade-in {
   0% {
     backdrop-filter: blur(0px);
     opacity: 0;
@@ -189,7 +189,7 @@
   }
 }
 
-@keyframes backdropFadeOut {
+@keyframes backdrop-fade-out {
   0% {
     backdrop-filter: blur(10px);
     opacity: 0.8;
@@ -200,7 +200,7 @@
   }
 }
 
-@keyframes backdropSweepIn {
+@keyframes backdrop-sweep-in {
   0% {
     backdrop-filter: blur(0px);
     opacity: 0;
@@ -213,7 +213,7 @@
   }
 }
 
-@keyframes backdropSweepOut {
+@keyframes backdrop-sweep-out {
   0% {
     backdrop-filter: blur(10px);
     opacity: 0.8;
@@ -246,7 +246,7 @@
   }
 }
 
-@keyframes toastEnter {
+@keyframes toast-enter {
   0% {
     transform: translateX(100%);
     opacity: 0;
@@ -257,7 +257,7 @@
   }
 }
 
-@keyframes toastExit {
+@keyframes toast-exit {
   0% {
     transform: translateX(0%);
   }
@@ -266,7 +266,7 @@
   }
 }
 
-@keyframes zoomIn {
+@keyframes zoom-in {
   0% {
     transform: scale(0.3);
     opacity: 0.3;
@@ -277,7 +277,7 @@
   }
 }
 
-@keyframes zoomOut {
+@keyframes zoom-out {
   0% {
     transform: scale(1);
     opacity: 1;

package/styles/theme.css

@@ -98,7 +98,7 @@
   --radius-16: 1rem;
   --radius-22: 1.375rem;
   --radius-32: 2rem;
-  --radius-pill: 7.5rem;
+  --radius-pill: calc(infinity * 1px);
   --radius-full: 100%;
 
   /* Breakpoints */
@@ -143,32 +143,32 @@
   --transition-duration-boop: 0.4s;
 
   --animate-none: none;
-  --animate-backdropFadeIn: backdropFadeIn 220ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards; /* NOT IN DCX */
-  --animate-backdropFadeOut: backdropFadeOut 180ms cubic-bezier(0.4, 0, 1, 1) forwards; /* NOT IN DCX */
-  --animate-backdropSweepIn: backdropSweepIn 300ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards; /* NOT IN DCX */
-  --animate-backdropSweepOut: backdropSweepOut 260ms cubic-bezier(0.4, 0, 1, 1) forwards; /* NOT IN DCX */
+  --animate-backdrop-fade-in: backdrop-fade-in 220ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards; /* NOT IN DCX */
+  --animate-backdrop-fade-out: backdrop-fade-out 180ms cubic-bezier(0.4, 0, 1, 1) forwards; /* NOT IN DCX */
+  --animate-backdrop-sweep-in: backdrop-sweep-in 300ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards; /* NOT IN DCX */
+  --animate-backdrop-sweep-out: backdrop-sweep-out 260ms cubic-bezier(0.4, 0, 1, 1) forwards; /* NOT IN DCX */
   --animate-boop: boop 230ms cubic-bezier(0.76, 0.24, 0.65, 0.85) normal both;
   --animate-bounce: bounce 1s infinite; /* NOT IN DCX */
-  --animate-bounceEnter: bounceEnter 500ms linear;
-  --animate-bounceEnterStrong: bounceEnterStrong 600ms linear;
-  --animate-bounceExit: bounceExit 500ms linear;
+  --animate-bounce-enter: bounce-enter 500ms linear;
+  --animate-bounce-enter-strong: bounce-enter-strong 600ms linear;
+  --animate-bounce-exit: bounce-exit 500ms linear;
   --animate-filling: filling 10s linear;
-  --animate-loaderDash: loaderDash 1.5s ease-in-out infinite;
+  --animate-loader-dash: loader-dash 1.5s ease-in-out infinite;
   --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; /* NOT IN DCX */
   --animate-pulsation: pulsation 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
   --animate-pulse: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-  --animate-rotatesIn: rotatesIn 0.4s ease-in-out;
-  --animate-slideDown: slideDown 0.5s ease-out;
-  --animate-slideRightEnter: slideRightEnter 0.4s ease;
-  --animate-slideRightExit: slideRightExit 0.4s ease;
-  --animate-slideUp: slideUp 0.5s ease-out;
+  --animate-rotates-in: rotates-in 0.4s ease-in-out;
+  --animate-slide-down: slide-down 0.5s ease-out;
+  --animate-slide-right-enter: slide-right-enter 0.4s ease;
+  --animate-slide-right-exit: slide-right-exit 0.4s ease;
+  --animate-slide-up: slide-up 0.5s ease-out;
   --animate-spin: spin 1s linear infinite;
   --animate-tick: tick 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s 1 normal forwards;
-  --animate-toastEnter: toastEnter 0.4s ease; /* NOT IN DCX */
-  --animate-toastExit: toastExit 0.4s ease; /* NOT IN DCX */
+  --animate-toast-enter: toast-enter 0.4s ease; /* NOT IN DCX */
+  --animate-toast-exit: toast-exit 0.4s ease; /* NOT IN DCX */
   --animate-tock: tock 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s 1 normal forwards;
   --animate-wave: wave 4s linear infinite;
-  --animate-zoomIn: zoomIn 220ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards; /* NOT IN DCX */
-  --animate-zoomOut: zoomOut 180ms cubic-bezier(0.4, 0, 1, 1) forwards; /* NOT IN DCX */
+  --animate-zoom-in: zoom-in 220ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards; /* NOT IN DCX */
+  --animate-zoom-out: zoom-out 180ms cubic-bezier(0.4, 0, 1, 1) forwards; /* NOT IN DCX */
   --animate-wiggle: wiggle 0.75s ease-in-out;
 }

package/styles/ui/button.css

@@ -18,14 +18,6 @@
     pointer-events: none;
   }
 
-  @media (hover: hover) and (pointer: fine) {
-    .button:active:not(:disabled) {
-      transform: scale(0.98);
-      /* TODO: replace with: */
-      /* @apply active:animate-boop; */
-    }
-  }
-
   /* themes */
   .button-outline,
   .button-solid {
@@ -45,7 +37,25 @@
     color: var(--button-primary);
   }
 
+  .button-solid {
+    background-color: color-mix(
+      in oklab,
+      var(--button-primary) var(--button-bg-opacity),
+      transparent
+    );
+    border-color: color-mix(
+      in oklab,
+      var(--button-primary) var(--button-border-opacity),
+      transparent
+    );
+    color: var(--button-secondary);
+  }
+
   @media (hover: hover) and (pointer: fine) {
+    .button:active:not(:disabled) {
+      transform: scale(0.98);
+    }
+
     .button-outline:active:not(:disabled),
     .button-outline:hover:not(:disabled),
     .button-outline:focus:not(:disabled),
@@ -62,23 +72,7 @@
       );
       color: var(--button-secondary);
     }
-  }
-
-  .button-solid {
-    background-color: color-mix(
-      in oklab,
-      var(--button-primary) var(--button-bg-opacity),
-      transparent
-    );
-    border-color: color-mix(
-      in oklab,
-      var(--button-primary) var(--button-border-opacity),
-      transparent
-    );
-    color: var(--button-secondary);
-  }
 
-  @media (hover: hover) and (pointer: fine) {
     .button-solid:active:not(:disabled),
     .button-solid:hover:not(:disabled),
     .button-solid:focus:not(:disabled),

package/styles/ui/controls.css

@@ -1,8 +1,7 @@
 @layer utilities {
   /* This file is for styling the controls of the form inputs (checkbox, radio, switch, filter) */
   /* Styling the controls by their HTML semantic allows us to visually guarantee the non-regression of this semantic */
-  /* Radio and Checkbox */
-  label > span > input[type='checkbox']:not([role='switch']),
+  /* Radio  */
   label > span > input[type='radio'] {
     opacity: 0;
     position: absolute;
@@ -10,7 +9,6 @@
     height: 100%;
     border: 0;
   }
-  label > span > input[type='checkbox']:not([role='switch']) + span,
   label > span > input[type='radio'] + span {
     @apply border transition-all duration-200;
     --tw-ring-color: transparent;
@@ -20,25 +18,20 @@
     align-items: center;
     justify-content: center;
   }
-  label > span > input[type='checkbox']:not([role='switch']) + span svg,
   label > span > input[type='radio'] + span svg {
     opacity: 0;
     transform: scale(0);
     transform-origin: center;
     transition: all var(--transition-duration-boop) var(--transition-fn-boop);
   }
-  label > span > input[type='checkbox']:not([role='switch']):checked + span svg,
   label > span > input[type='radio']:checked + span svg {
     opacity: 1;
     transform: scale(1);
   }
-  label > span > input[type='checkbox']:not([role='switch']):checked + span,
-  label > span > input[type='checkbox']:not([role='switch']):not([disabled]):hover + span,
   label > span > input[type='radio']:checked + span,
   label > span > input[type='radio']:not([disabled]):hover + span {
     @apply border-black;
   }
-  label > span > input[type='checkbox']:not([role='switch']):focus-visible + span,
   label > span > input[type='radio']:focus-visible + span {
     @apply ring-8;
     --tw-ring-color: color-mix(in oklab, var(--color-lavender) 20%, transparent);
@@ -46,9 +39,6 @@
   label > span > input[type='radio'] + span {
     @apply rounded-full;
   }
-  label > span > input[type='checkbox']:not([role='switch']) + span {
-    border-radius: calc(var(--spacing) * 8);
-  }
   /* Filter */
   @media (hover: hover) and (pointer: fine) {
     label:active > input[type='checkbox'][data-name='Filter']:not(:disabled) {

package/styles/variants.css

@@ -10,5 +10,3 @@
 }
 
 @custom-variant hoverable (@media (hover: hover) and (pointer: fine));
-
-@custom-variant popover ('open', '&:popover-open');

package/ui/Breadcrumb.d.ts

@@ -1,10 +1,10 @@
 import { ComponentPropsWithoutRef, FunctionComponent } from 'react';
 import { Theme } from './types/Theme';
 export interface BreadcrumbProps extends ComponentPropsWithoutRef<'nav'> {
-    items: ({
+    items: Array<{
         href: string;
         label: string;
-    } & ComponentPropsWithoutRef<'li'>)[];
+    }>;
     theme?: Theme;
 }
 export declare const Breadcrumb: FunctionComponent<BreadcrumbProps>;