@simplybusiness/mobius 4.8.7 → 4.8.8

package/dist/cjs/components/Checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  ChangeEvent,\n  forwardRef,\n  useRef,\n  useState,\n  KeyboardEvent,\n  MouseEvent,\n  useId,\n} from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { ErrorMessage } from \"../ErrorMessage\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { CheckboxElementType, CheckboxProps, CheckboxRef } from \"./types\";\nimport { spaceDelimitedList } from \"../../utils/spaceDelimitedList\";\n\nexport const Checkbox: ForwardedRefComponent<\n  CheckboxProps,\n  CheckboxElementType\n> = forwardRef((props: CheckboxProps, ref: CheckboxRef) => {\n  const {\n    id,\n    label,\n    isDisabled,\n    isRequired,\n    validationState,\n    onChange,\n    className,\n    errorMessage,\n    defaultSelected = false,\n    isReadOnly,\n    value,\n    [\"aria-describedby\"]: ariaDescribedBy,\n    ...rest\n  } = props;\n  const [selected, setSelected] = useState<boolean>(defaultSelected);\n  const fallbackRef = useRef<HTMLInputElement>(null);\n  const refObj = ref || fallbackRef;\n  const inputId = useId();\n  const checkboxClasses = classNames(\n    {\n      \"--is-disabled\": isDisabled,\n      \"--is-selected\": selected,\n      \"--is-valid\": validationState === \"valid\",\n      \"--is-invalid\": validationState === \"invalid\",\n      \"--is-required\": typeof isRequired === \"boolean\" && isRequired,\n      \"--is-optional\": typeof isRequired === \"boolean\" && !isRequired,\n    },\n    className,\n  );\n  // Append an additional wrapper class name to differenitate from input\n  const wrapperClasses = classNames(\n    \"mobius\",\n    \"mobius/Checkbox\",\n    checkboxClasses,\n  );\n  const inputClasses = classNames(\"mobius/CheckboxInput\", checkboxClasses);\n  const errorMessageId = useId();\n  const shouldErrorMessageShow = errorMessage ? errorMessageId : undefined;\n  const describedBy = spaceDelimitedList([\n    shouldErrorMessageShow,\n    ariaDescribedBy,\n  ]);\n  const labelId = useId();\n\n  const toggleState = () => {\n    setSelected(!selected);\n  };\n\n  const handleClick = (event: MouseEvent<CheckboxElementType>) => {\n    const isMouseEvent = event.clientX;\n\n    if (isMouseEvent) {\n      toggleState();\n    }\n  };\n\n  const handleChange = (event: ChangeEvent<CheckboxElementType>) => {\n    if (onChange) {\n      onChange(event);\n    }\n  };\n\n  const handleKeyDown = (event: KeyboardEvent) => {\n    if (event.code === \"Space\") {\n      toggleState();\n    }\n  };\n\n  return (\n    <>\n      <label id={labelId} className={wrapperClasses}>\n        <input\n          aria-describedby={describedBy}\n          aria-errormessage={shouldErrorMessageShow}\n          aria-invalid={validationState === \"invalid\"}\n          readOnly={isReadOnly}\n          disabled={isDisabled}\n          ref={refObj}\n          className={inputClasses}\n          onClick={handleClick}\n          onChange={handleChange}\n          onKeyDown={handleKeyDown}\n          type=\"checkbox\"\n          defaultChecked={defaultSelected}\n          required={isRequired}\n          id={id || inputId}\n          value={value}\n          {...rest}\n        />\n        <span className=\"mobius/CheckboxLabel\">{label}</span>\n      </label>\n      <ErrorMessage id={errorMessageId} errorMessage={errorMessage} />\n    </>\n  );\n});\n"],"names":["Checkbox","forwardRef","props","ref","id","label","isDisabled","isRequired","validationState","onChange","className","errorMessage","defaultSelected","isReadOnly","value","ariaDescribedBy","rest","selected","setSelected","useState","fallbackRef","useRef","refObj","inputId","useId","checkboxClasses","classNames","wrapperClasses","inputClasses","errorMessageId","shouldErrorMessageShow","undefined","describedBy","spaceDelimitedList","labelId","toggleState","handleClick","event","isMouseEvent","clientX","handleChange","handleKeyDown","code","input","aria-describedby","aria-errormessage","aria-invalid","readOnly","disabled","onClick","onKeyDown","type","defaultChecked","required","span","ErrorMessage"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;;;;+BAiBaA;;;eAAAA;;;;uBAPN;+DACgB;8BACM;oCAGM;;;;;;AAE5B,MAAMA,yBAGTC,IAAAA,iBAAU,EAAC,CAACC,OAAsBC;IACpC,MAAM,EACJC,EAAE,EACFC,KAAK,EACLC,UAAU,EACVC,UAAU,EACVC,eAAe,EACfC,QAAQ,EACRC,SAAS,EACTC,YAAY,EACZC,kBAAkB,KAAK,EACvBC,UAAU,EACVC,KAAK,EACL,CAAC,mBAAmB,EAAEC,eAAe,EACrC,GAAGC,MACJ,GAAGd;IACJ,MAAM,CAACe,UAAUC,YAAY,GAAGC,IAAAA,eAAQ,EAAUP;IAClD,MAAMQ,cAAcC,IAAAA,aAAM,EAAmB;IAC7C,MAAMC,SAASnB,OAAOiB;IACtB,MAAMG,UAAUC,IAAAA,YAAK;IACrB,MAAMC,kBAAkBC,IAAAA,eAAU,EAChC;QACE,iBAAiBpB;QACjB,iBAAiBW;QACjB,cAAcT,oBAAoB;QAClC,gBAAgBA,oBAAoB;QACpC,iBAAiB,OAAOD,eAAe,aAAaA;QACpD,iBAAiB,OAAOA,eAAe,aAAa,CAACA;IACvD,GACAG;IAEF,sEAAsE;IACtE,MAAMiB,iBAAiBD,IAAAA,eAAU,EAC/B,UACA,mBACAD;IAEF,MAAMG,eAAeF,IAAAA,eAAU,EAAC,wBAAwBD;IACxD,MAAMI,iBAAiBL,IAAAA,YAAK;IAC5B,MAAMM,yBAAyBnB,eAAekB,iBAAiBE;IAC/D,MAAMC,cAAcC,IAAAA,sCAAkB,EAAC;QACrCH;QACAf;KACD;IACD,MAAMmB,UAAUV,IAAAA,YAAK;IAErB,MAAMW,cAAc;QAClBjB,YAAY,CAACD;IACf;IAEA,MAAMmB,cAAc,CAACC;QACnB,MAAMC,eAAeD,MAAME,OAAO;QAElC,IAAID,cAAc;YAChBH;QACF;IACF;IAEA,MAAMK,eAAe,CAACH;QACpB,IAAI5B,UAAU;YACZA,SAAS4B;QACX;IACF;IAEA,MAAMI,gBAAgB,CAACJ;QACrB,IAAIA,MAAMK,IAAI,KAAK,SAAS;YAC1BP;QACF;IACF;IAEA,qBACE;;0BACE,sBAAC9B;gBAAMD,IAAI8B;gBAASxB,WAAWiB;;kCAC7B,qBAACgB;wBACCC,oBAAkBZ;wBAClBa,qBAAmBf;wBACnBgB,gBAActC,oBAAoB;wBAClCuC,UAAUlC;wBACVmC,UAAU1C;wBACVH,KAAKmB;wBACLZ,WAAWkB;wBACXqB,SAASb;wBACT3B,UAAU+B;wBACVU,WAAWT;wBACXU,MAAK;wBACLC,gBAAgBxC;wBAChByC,UAAU9C;wBACVH,IAAIA,MAAMmB;wBACVT,OAAOA;wBACN,GAAGE,IAAI;;kCAEV,qBAACsC;wBAAK5C,WAAU;kCAAwBL;;;;0BAE1C,qBAACkD,0BAAY;gBAACnD,IAAIyB;gBAAgBlB,cAAcA;;;;AAGtD"}
+{"version":3,"sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  ChangeEvent,\n  forwardRef,\n  useRef,\n  useState,\n  KeyboardEvent,\n  MouseEvent,\n  useId,\n} from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { ErrorMessage } from \"../ErrorMessage\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { CheckboxElementType, CheckboxProps, CheckboxRef } from \"./types\";\nimport { spaceDelimitedList } from \"../../utils/spaceDelimitedList\";\nimport { useValidationClasses } from \"../../hooks\";\n\nexport const Checkbox: ForwardedRefComponent<\n  CheckboxProps,\n  CheckboxElementType\n> = forwardRef((props: CheckboxProps, ref: CheckboxRef) => {\n  const {\n    id,\n    label,\n    isDisabled,\n    isRequired,\n    validationState,\n    isInvalid,\n    onChange,\n    className,\n    errorMessage,\n    defaultSelected = false,\n    isReadOnly,\n    value,\n    [\"aria-describedby\"]: ariaDescribedBy,\n    ...rest\n  } = props;\n  const [selected, setSelected] = useState<boolean>(defaultSelected);\n  const fallbackRef = useRef<HTMLInputElement>(null);\n  const refObj = ref || fallbackRef;\n  const inputId = useId();\n  const validationClasses = useValidationClasses({\n    validationState,\n    isInvalid,\n  });\n  const checkboxClasses = classNames(\n    {\n      \"--is-disabled\": isDisabled,\n      \"--is-selected\": selected,\n      \"--is-required\": typeof isRequired === \"boolean\" && isRequired,\n      \"--is-optional\": typeof isRequired === \"boolean\" && !isRequired,\n    },\n    validationClasses,\n    className,\n  );\n  // Append an additional wrapper class name to differenitate from input\n  const wrapperClasses = classNames(\n    \"mobius\",\n    \"mobius/Checkbox\",\n    checkboxClasses,\n  );\n  const inputClasses = classNames(\"mobius/CheckboxInput\", checkboxClasses);\n  const errorMessageId = useId();\n  const shouldErrorMessageShow = errorMessage ? errorMessageId : undefined;\n  const describedBy = spaceDelimitedList([\n    shouldErrorMessageShow,\n    ariaDescribedBy,\n  ]);\n  const labelId = useId();\n\n  const toggleState = () => {\n    setSelected(!selected);\n  };\n\n  const handleClick = (event: MouseEvent<CheckboxElementType>) => {\n    const isMouseEvent = event.clientX;\n\n    if (isMouseEvent) {\n      toggleState();\n    }\n  };\n\n  const handleChange = (event: ChangeEvent<CheckboxElementType>) => {\n    if (onChange) {\n      onChange(event);\n    }\n  };\n\n  const handleKeyDown = (event: KeyboardEvent) => {\n    if (event.code === \"Space\") {\n      toggleState();\n    }\n  };\n\n  return (\n    <>\n      <label id={labelId} className={wrapperClasses}>\n        <input\n          aria-describedby={describedBy}\n          aria-errormessage={shouldErrorMessageShow}\n          aria-invalid={isInvalid}\n          readOnly={isReadOnly}\n          disabled={isDisabled}\n          ref={refObj}\n          className={inputClasses}\n          onClick={handleClick}\n          onChange={handleChange}\n          onKeyDown={handleKeyDown}\n          type=\"checkbox\"\n          defaultChecked={defaultSelected}\n          required={isRequired}\n          id={id || inputId}\n          value={value}\n          {...rest}\n        />\n        <span className=\"mobius/CheckboxLabel\">{label}</span>\n      </label>\n      <ErrorMessage id={errorMessageId} errorMessage={errorMessage} />\n    </>\n  );\n});\n"],"names":["Checkbox","forwardRef","props","ref","id","label","isDisabled","isRequired","validationState","isInvalid","onChange","className","errorMessage","defaultSelected","isReadOnly","value","ariaDescribedBy","rest","selected","setSelected","useState","fallbackRef","useRef","refObj","inputId","useId","validationClasses","useValidationClasses","checkboxClasses","classNames","wrapperClasses","inputClasses","errorMessageId","shouldErrorMessageShow","undefined","describedBy","spaceDelimitedList","labelId","toggleState","handleClick","event","isMouseEvent","clientX","handleChange","handleKeyDown","code","input","aria-describedby","aria-errormessage","aria-invalid","readOnly","disabled","onClick","onKeyDown","type","defaultChecked","required","span","ErrorMessage"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;;;;+BAkBaA;;;eAAAA;;;;uBARN;+DACgB;8BACM;oCAGM;uBACE;;;;;;AAE9B,MAAMA,yBAGTC,IAAAA,iBAAU,EAAC,CAACC,OAAsBC;IACpC,MAAM,EACJC,EAAE,EACFC,KAAK,EACLC,UAAU,EACVC,UAAU,EACVC,eAAe,EACfC,SAAS,EACTC,QAAQ,EACRC,SAAS,EACTC,YAAY,EACZC,kBAAkB,KAAK,EACvBC,UAAU,EACVC,KAAK,EACL,CAAC,mBAAmB,EAAEC,eAAe,EACrC,GAAGC,MACJ,GAAGf;IACJ,MAAM,CAACgB,UAAUC,YAAY,GAAGC,IAAAA,eAAQ,EAAUP;IAClD,MAAMQ,cAAcC,IAAAA,aAAM,EAAmB;IAC7C,MAAMC,SAASpB,OAAOkB;IACtB,MAAMG,UAAUC,IAAAA,YAAK;IACrB,MAAMC,oBAAoBC,IAAAA,2BAAoB,EAAC;QAC7CnB;QACAC;IACF;IACA,MAAMmB,kBAAkBC,IAAAA,eAAU,EAChC;QACE,iBAAiBvB;QACjB,iBAAiBY;QACjB,iBAAiB,OAAOX,eAAe,aAAaA;QACpD,iBAAiB,OAAOA,eAAe,aAAa,CAACA;IACvD,GACAmB,mBACAf;IAEF,sEAAsE;IACtE,MAAMmB,iBAAiBD,IAAAA,eAAU,EAC/B,UACA,mBACAD;IAEF,MAAMG,eAAeF,IAAAA,eAAU,EAAC,wBAAwBD;IACxD,MAAMI,iBAAiBP,IAAAA,YAAK;IAC5B,MAAMQ,yBAAyBrB,eAAeoB,iBAAiBE;IAC/D,MAAMC,cAAcC,IAAAA,sCAAkB,EAAC;QACrCH;QACAjB;KACD;IACD,MAAMqB,UAAUZ,IAAAA,YAAK;IAErB,MAAMa,cAAc;QAClBnB,YAAY,CAACD;IACf;IAEA,MAAMqB,cAAc,CAACC;QACnB,MAAMC,eAAeD,MAAME,OAAO;QAElC,IAAID,cAAc;YAChBH;QACF;IACF;IAEA,MAAMK,eAAe,CAACH;QACpB,IAAI9B,UAAU;YACZA,SAAS8B;QACX;IACF;IAEA,MAAMI,gBAAgB,CAACJ;QACrB,IAAIA,MAAMK,IAAI,KAAK,SAAS;YAC1BP;QACF;IACF;IAEA,qBACE;;0BACE,sBAACjC;gBAAMD,IAAIiC;gBAAS1B,WAAWmB;;kCAC7B,qBAACgB;wBACCC,oBAAkBZ;wBAClBa,qBAAmBf;wBACnBgB,gBAAcxC;wBACdyC,UAAUpC;wBACVqC,UAAU7C;wBACVH,KAAKoB;wBACLZ,WAAWoB;wBACXqB,SAASb;wBACT7B,UAAUiC;wBACVU,WAAWT;wBACXU,MAAK;wBACLC,gBAAgB1C;wBAChB2C,UAAUjD;wBACVH,IAAIA,MAAMoB;wBACVT,OAAOA;wBACN,GAAGE,IAAI;;kCAEV,qBAACwC;wBAAK9C,WAAU;kCAAwBN;;;;0BAE1C,qBAACqD,0BAAY;gBAACtD,IAAI4B;gBAAgBpB,cAAcA;;;;AAGtD"}

package/dist/cjs/components/Checkbox/Checkbox.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Checkbox } from ".";
+type StoryType = StoryObj<typeof Checkbox>;
+declare const meta: Meta<typeof Checkbox>;
+export declare const Normal: StoryType;
+export declare const Disabled: StoryType;
+export declare const Valid: StoryType;
+export declare const Invalid: StoryType;
+export declare const LongLabel: StoryType;
+export default meta;

package/dist/cjs/components/Checkbox/Checkbox.stories.js

@@ -0,0 +1,83 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LongLabel = exports.Invalid = exports.Valid = exports.Disabled = exports.Normal = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const _1 = require(".");
+const utils_1 = require("../../utils");
+const meta = {
+    title: "Forms/Checkbox",
+    component: _1.Checkbox,
+    argTypes: Object.assign({ validationState: {
+            options: ["valid", "invalid", "neither"],
+            control: { type: "radio" },
+            mapping: {
+                valid: "valid",
+                invalid: "invalid",
+                neither: "",
+            },
+        }, label: {
+            control: { type: "text" },
+        } }, (0, utils_1.excludeControls)("selected", "setSelected", "isRequired", "isReadOnly", "defaultSelected", "value", "groupDisabled")),
+    decorators: [
+        Story => ((0, jsx_runtime_1.jsx)(utils_1.StoryContainer, { children: (0, jsx_runtime_1.jsx)(Story, {}) })),
+    ],
+};
+exports.Normal = {
+    render: (args) => (0, jsx_runtime_1.jsx)(_1.Checkbox, Object.assign({}, args)),
+    args: {
+        label: "I agree",
+        value: "agree",
+        isDisabled: false,
+        errorMessage: "",
+        defaultSelected: false,
+        isRequired: false,
+    },
+};
+exports.Disabled = {
+    render: (args) => (0, jsx_runtime_1.jsx)(_1.Checkbox, Object.assign({}, args)),
+    args: {
+        label: "I agree",
+        value: "agree",
+        isDisabled: true,
+        errorMessage: "",
+        defaultSelected: false,
+        isRequired: false,
+    },
+};
+exports.Valid = {
+    render: (args) => (0, jsx_runtime_1.jsx)(_1.Checkbox, Object.assign({}, args)),
+    args: {
+        label: "I agree",
+        value: "agree",
+        isDisabled: false,
+        errorMessage: "",
+        validationState: "valid",
+        defaultSelected: false,
+        isRequired: false,
+    },
+};
+exports.Invalid = {
+    render: (args) => (0, jsx_runtime_1.jsx)(_1.Checkbox, Object.assign({}, args)),
+    args: {
+        label: "I agree",
+        value: "agree",
+        isDisabled: false,
+        validationState: "invalid",
+        errorMessage: "This is an error message",
+        defaultSelected: false,
+        isRequired: false,
+    },
+};
+exports.LongLabel = {
+    render: (args) => (0, jsx_runtime_1.jsx)(_1.Checkbox, Object.assign({}, args)),
+    args: {
+        label: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Example", (0, jsx_runtime_1.jsx)("br", {}), "of", (0, jsx_runtime_1.jsx)("br", {}), "long", (0, jsx_runtime_1.jsx)("br", {}), "label", (0, jsx_runtime_1.jsx)("br", {}), "text", (0, jsx_runtime_1.jsx)("br", {})] })),
+        value: "agree",
+        isDisabled: false,
+        errorMessage: "",
+        defaultSelected: false,
+        isRequired: false,
+    },
+};
+exports.default = meta;
+//# sourceMappingURL=Checkbox.stories.js.map

package/dist/cjs/components/Checkbox/Checkbox.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.stories.js","sourceRoot":"","sources":["../../../../src/components/Checkbox/Checkbox.stories.tsx"],"names":[],"mappings":";;;;AACA,wBAA4C;AAC5C,uCAA8D;AAI9D,MAAM,IAAI,GAA0B;IAClC,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,WAAQ;IACnB,QAAQ,kBACN,eAAe,EAAE;YACf,OAAO,EAAE,CAAC,OAAO,EAAE,SAAS,EAAE,SAAS,CAAC;YACxC,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;YAC1B,OAAO,EAAE;gBACP,KAAK,EAAE,OAAO;gBACd,OAAO,EAAE,SAAS;gBAClB,OAAO,EAAE,EAAE;aACZ;SACF,EACD,KAAK,EAAE;YACL,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B,IACE,IAAA,uBAAe,EAChB,UAAU,EACV,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,iBAAiB,EACjB,OAAO,EACP,eAAe,CAChB,CACF;IACD,UAAU,EAAE;QACV,KAAK,CAAC,EAAE,CAAC,CACP,uBAAC,sBAAc,cACb,uBAAC,KAAK,KAAG,GACM,CAClB;KACF;CACF,CAAC;AAEW,QAAA,MAAM,GAAc;IAC/B,MAAM,EAAE,CAAC,IAAmB,EAAE,EAAE,CAAC,uBAAC,WAAQ,oBAAK,IAAI,EAAI;IACvD,IAAI,EAAE;QACJ,KAAK,EAAE,SAAS;QAChB,KAAK,EAAE,OAAO;QACd,UAAU,EAAE,KAAK;QACjB,YAAY,EAAE,EAAE;QAChB,eAAe,EAAE,KAAK;QACtB,UAAU,EAAE,KAAK;KAClB;CACF,CAAC;AAEW,QAAA,QAAQ,GAAc;IACjC,MAAM,EAAE,CAAC,IAAmB,EAAE,EAAE,CAAC,uBAAC,WAAQ,oBAAK,IAAI,EAAI;IACvD,IAAI,EAAE;QACJ,KAAK,EAAE,SAAS;QAChB,KAAK,EAAE,OAAO;QACd,UAAU,EAAE,IAAI;QAChB,YAAY,EAAE,EAAE;QAChB,eAAe,EAAE,KAAK;QACtB,UAAU,EAAE,KAAK;KAClB;CACF,CAAC;AAEW,QAAA,KAAK,GAAc;IAC9B,MAAM,EAAE,CAAC,IAAmB,EAAE,EAAE,CAAC,uBAAC,WAAQ,oBAAK,IAAI,EAAI;IACvD,IAAI,EAAE;QACJ,KAAK,EAAE,SAAS;QAChB,KAAK,EAAE,OAAO;QACd,UAAU,EAAE,KAAK;QACjB,YAAY,EAAE,EAAE;QAChB,eAAe,EAAE,OAAO;QACxB,eAAe,EAAE,KAAK;QACtB,UAAU,EAAE,KAAK;KAClB;CACF,CAAC;AAEW,QAAA,OAAO,GAAc;IAChC,MAAM,EAAE,CAAC,IAAmB,EAAE,EAAE,CAAC,uBAAC,WAAQ,oBAAK,IAAI,EAAI;IACvD,IAAI,EAAE;QACJ,KAAK,EAAE,SAAS;QAChB,KAAK,EAAE,OAAO;QACd,UAAU,EAAE,KAAK;QACjB,eAAe,EAAE,SAAS;QAC1B,YAAY,EAAE,0BAA0B;QACxC,eAAe,EAAE,KAAK;QACtB,UAAU,EAAE,KAAK;KAClB;CACF,CAAC;AAEW,QAAA,SAAS,GAAc;IAClC,MAAM,EAAE,CAAC,IAAmB,EAAE,EAAE,CAAC,uBAAC,WAAQ,oBAAK,IAAI,EAAI;IACvD,IAAI,EAAE;QACJ,KAAK,EAAE,CACL,wEAEE,gCAAM,QAEN,gCAAM,UAEN,gCAAM,WAEN,gCAAM,UAEN,gCAAM,IACL,CACJ;QACD,KAAK,EAAE,OAAO;QACd,UAAU,EAAE,KAAK;QACjB,YAAY,EAAE,EAAE;QAChB,eAAe,EAAE,KAAK;QACtB,UAAU,EAAE,KAAK;KAClB;CACF,CAAC;AAEF,kBAAe,IAAI,CAAC"}

package/dist/cjs/components/Checkbox/Checkbox.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/components/Checkbox/Checkbox.test.js

@@ -0,0 +1,174 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@testing-library/react");
+const user_event_1 = __importDefault(require("@testing-library/user-event"));
+const _1 = require(".");
+const CHECKBOX_CONTAINER_CLASS_NAME = "mobius/Checkbox";
+const CHECKBOX_CLASS_NAME = "mobius/CheckboxInput";
+describe("Checkbox", () => {
+    it("should render without error", () => {
+        const optionText = "Agree";
+        const component = (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Checkbox, { label: optionText, value: "value" }));
+        expect(component).toBeTruthy();
+    });
+    it("should call onChange when clicked", async () => {
+        const callback = jest.fn();
+        const optionText = "Agree";
+        const { getByLabelText } = (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Checkbox, { label: optionText, onChange: callback, value: "value" }));
+        const option = getByLabelText(optionText);
+        await user_event_1.default.click(option);
+        expect(callback).toHaveBeenCalled();
+        expect(option).toBeChecked();
+    });
+    it("should be selectable via keyboard", async () => {
+        const callback = jest.fn();
+        const optionText = "Agree";
+        const { getByLabelText } = (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Checkbox, { label: optionText, onChange: callback, value: "value" }));
+        const option = getByLabelText(optionText);
+        await user_event_1.default.tab();
+        await user_event_1.default.keyboard("[Space]");
+        expect(callback).toHaveBeenCalled();
+        expect(option).toBeChecked();
+        await user_event_1.default.keyboard("[Space]");
+        expect(callback).toHaveBeenCalled();
+        expect(option).not.toBeChecked();
+    });
+    it("should set the correct aria-describedby attribute", () => {
+        const optionText = "Agree";
+        const errorText = "This field is required";
+        const { getByLabelText } = (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Checkbox, { label: optionText, errorMessage: errorText }));
+        const option = getByLabelText(optionText);
+        expect(option).toHaveAccessibleDescription(errorText);
+    });
+    describe("isRequired", () => {
+        it("should set required attribute", () => {
+            const optionText = "Agree";
+            const { getByLabelText } = (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Checkbox, { label: optionText, value: "value", isRequired: true }));
+            const option = getByLabelText(optionText);
+            expect(option).toBeRequired();
+        });
+        it("should have className of --is-required when true", () => {
+            const optionText = "Agree";
+            const { getByLabelText } = (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Checkbox, { label: optionText, value: "value", isRequired: true }));
+            const option = getByLabelText(optionText);
+            expect(option).toHaveClass("--is-required");
+        });
+        it("should have className of --is-optional when false", () => {
+            const optionText = "Agree";
+            const { getByLabelText } = (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Checkbox, { label: optionText, value: "value", isRequired: false }));
+            const option = getByLabelText(optionText);
+            expect(option).toHaveClass("--is-optional");
+        });
+        it("should have neither --is-required nor --is-optional when unset", () => {
+            const optionText = "Agree";
+            const { getByLabelText } = (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Checkbox, { label: optionText, value: "value" }));
+            const option = getByLabelText(optionText);
+            expect(option).not.toHaveClass("--is-required");
+            expect(option).not.toHaveClass("--is-optional");
+        });
+    });
+    describe("uses correct class names", () => {
+        it("uses mobius Mobius class", () => {
+            const optionText = "Agree";
+            const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Checkbox, { label: optionText, value: "value" }));
+            expect(container.firstChild).toHaveClass("mobius");
+        });
+        it("uses base Mobius class", () => {
+            const optionText = "Agree";
+            const { getByLabelText } = (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Checkbox, { label: optionText, value: "value" }));
+            const option = getByLabelText(optionText);
+            expect(option).toHaveClass(CHECKBOX_CLASS_NAME);
+        });
+        it("includes disabled class name", () => {
+            const optionText = "Agree";
+            const { getByLabelText } = (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Checkbox, { label: optionText, isDisabled: true, value: "value" }));
+            const option = getByLabelText(optionText);
+            expect(option).toHaveClass("--is-disabled");
+        });
+        it("includes valid class name", () => {
+            const optionText = "Agree";
+            const { getByLabelText } = (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Checkbox, { label: optionText, validationState: "valid", value: "value" }));
+            const option = getByLabelText(optionText);
+            expect(option).toHaveClass("--is-valid");
+        });
+        it("includes invalid class name", () => {
+            const optionText = "Agree";
+            const { getByLabelText } = (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Checkbox, { label: optionText, validationState: "invalid", errorMessage: "There is a problem", value: "value" }));
+            const option = getByLabelText(optionText);
+            expect(option).toHaveClass("--is-invalid");
+        });
+        it("includes custom class name", () => {
+            const optionText = "Agree";
+            const customClass = "my-class";
+            const { getByLabelText } = (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Checkbox, { label: optionText, className: customClass, value: "value" }));
+            const option = getByLabelText(optionText);
+            expect(option).toHaveClass(customClass);
+            expect(option).toHaveClass(CHECKBOX_CLASS_NAME);
+        });
+        it("only sets id on the input element", () => {
+            const optionText = "Agree";
+            const testId = "test";
+            const { getByLabelText } = (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Checkbox, { id: testId, label: optionText, value: "value" }));
+            const option = getByLabelText(optionText);
+            expect(option).toHaveAttribute("id", testId);
+        });
+        it("includes focused and selected class names", async () => {
+            const optionText = "Agree";
+            const { getByLabelText } = (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Checkbox, { label: optionText, value: "value" }));
+            const option = getByLabelText(optionText);
+            await user_event_1.default.tab();
+            expect(option).toHaveClass(CHECKBOX_CLASS_NAME);
+            expect(option.closest("label")).toHaveClass(CHECKBOX_CONTAINER_CLASS_NAME);
+            await user_event_1.default.keyboard("[Space]");
+            expect(option).toHaveClass("--is-selected");
+        });
+    });
+    describe("when checkbox is disabled", () => {
+        it("renders disabled attribute", () => {
+            const optionText = "Agree";
+            const { getByLabelText } = (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Checkbox, { label: optionText, value: "value", isDisabled: true }));
+            const option = getByLabelText(optionText);
+            expect(option).toBeDisabled();
+        });
+    });
+    describe("when checkbox is invalid", () => {
+        it("renders aria-invalid attribute", () => {
+            const optionText = "Agree";
+            const { getByLabelText } = (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Checkbox, { label: optionText, value: "value", validationState: "invalid" }));
+            const option = getByLabelText(optionText);
+            expect(option).toHaveAttribute("aria-invalid", "true");
+        });
+    });
+    describe("when checkbox is read only", () => {
+        it("renders readonly attribute", () => {
+            const optionText = "Agree";
+            const { getByLabelText } = (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Checkbox, { label: optionText, value: "value", isReadOnly: true }));
+            const option = getByLabelText(optionText);
+            expect(option).toHaveAttribute("readonly");
+        });
+    });
+    describe("aria-errormessage", () => {
+        describe("when checkbox is accompanied by an error message", () => {
+            it("renders aria-erromessage with an id that matches error message id", () => {
+                const optionText = "Agree";
+                const { getByLabelText, getByTestId } = (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Checkbox, { label: optionText, value: "value", errorMessage: "This is an error" }));
+                const option = getByLabelText(optionText);
+                const errorMessageId = getByTestId("ErrorMessage");
+                expect(option).toHaveAttribute("aria-errormessage", errorMessageId.id);
+            });
+        });
+        describe("when radio is not accompanied by an error message", () => {
+            it("does not render aria-erromessage", () => {
+                const optionText = "Agree";
+                const { getByLabelText } = (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Checkbox, { label: optionText, value: "value" }));
+                const option = getByLabelText(optionText);
+                expect(option).not.toHaveAttribute("aria-errormessage");
+            });
+        });
+    });
+});
+//# sourceMappingURL=Checkbox.test.js.map

package/dist/cjs/components/Checkbox/Checkbox.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.test.js","sourceRoot":"","sources":["../../../../src/components/Checkbox/Checkbox.test.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/components/Checkbox/CheckboxGroup.d.ts

@@ -0,0 +1,3 @@
+import { ForwardedRefComponent } from "../../types/components";
+import { CheckboxGroupElementType, CheckboxGroupProps } from "./types";
+export declare const CheckboxGroup: ForwardedRefComponent<CheckboxGroupProps, CheckboxGroupElementType>;

package/dist/cjs/components/Checkbox/CheckboxGroup.js

@@ -15,13 +15,14 @@ const _dedupe = /*#__PURE__*/ _interop_require_default(require("classnames/dedup
 const _Label = require("../Label");
 const _ErrorMessage = require("../ErrorMessage");
 const _spaceDelimitedList = require("../../utils/spaceDelimitedList");
+const _hooks = require("../../hooks");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
 const CheckboxGroup = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
-    const { label, isDisabled = false, isRequired, validationState, orientation = "vertical", onChange, className, errorMessage, children, defaultValue = [], isReadOnly, itemsPerRow, ...rest } = props;
+    const { label, isDisabled = false, isRequired, validationState, isInvalid, orientation = "vertical", onChange, className, errorMessage, children, defaultValue = [], isReadOnly, itemsPerRow, ...rest } = props;
     const [selected, setSelected] = (0, _react.useState)(defaultValue);
     const checkboxGroupClasses = (0, _dedupe.default)("mobius", "mobius/CheckboxGroup", className, {
         "--is-horizontal": orientation === "horizontal",
@@ -29,11 +30,13 @@ const CheckboxGroup = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
         "--is-required": typeof isRequired === "boolean" && isRequired,
         "--is-optional": typeof isRequired === "boolean" && !isRequired
     });
+    const validationClasses = (0, _hooks.useValidationClasses)({
+        validationState,
+        isInvalid
+    });
     const labelClasses = (0, _dedupe.default)({
-        "--is-valid": validationState === "valid",
-        "--is-invalid": validationState === "invalid",
         "--is-disabled": isDisabled
-    });
+    }, validationClasses);
     const errorMessageId = (0, _react.useId)();
     const shouldErrorMessageShow = errorMessage ? errorMessageId : undefined;
     const describedBy = (0, _spaceDelimitedList.spaceDelimitedList)([
@@ -85,7 +88,7 @@ const CheckboxGroup = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
                             isDisabled,
                             isRequired,
                             isReadOnly,
-                            validationState,
+                            isInvalid,
                             defaultSelected: selected.includes(child.props.value),
                             onChange: handleChange,
                             "aria-describedby": describedBy

package/dist/cjs/components/Checkbox/CheckboxGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Checkbox/CheckboxGroup.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  Children,\n  forwardRef,\n  ReactElement,\n  cloneElement,\n  isValidElement,\n  useId,\n  ChangeEvent,\n  useState,\n  useEffect,\n} from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport {\n  CheckboxElementType,\n  CheckboxGroupElementType,\n  CheckboxGroupProps,\n  CheckboxGroupRef,\n} from \"./types\";\nimport { Label } from \"../Label\";\nimport { ErrorMessage } from \"../ErrorMessage\";\nimport { spaceDelimitedList } from \"../../utils/spaceDelimitedList\";\n\nexport const CheckboxGroup: ForwardedRefComponent<\n  CheckboxGroupProps,\n  CheckboxGroupElementType\n> = forwardRef((props: CheckboxGroupProps, ref: CheckboxGroupRef) => {\n  const {\n    label,\n    isDisabled = false,\n    isRequired,\n    validationState,\n    orientation = \"vertical\",\n    onChange,\n    className,\n    errorMessage,\n    children,\n    defaultValue = [],\n    isReadOnly,\n    itemsPerRow,\n    ...rest\n  } = props;\n  const [selected, setSelected] = useState<string[]>(defaultValue);\n  const checkboxGroupClasses = classNames(\n    \"mobius\",\n    \"mobius/CheckboxGroup\",\n    className,\n    {\n      \"--is-horizontal\": orientation === \"horizontal\",\n      \"--is-vertical\": orientation === \"vertical\",\n      \"--is-required\": typeof isRequired === \"boolean\" && isRequired,\n      \"--is-optional\": typeof isRequired === \"boolean\" && !isRequired,\n    },\n  );\n  const labelClasses = classNames({\n    \"--is-valid\": validationState === \"valid\",\n    \"--is-invalid\": validationState === \"invalid\",\n    \"--is-disabled\": isDisabled,\n  });\n  const errorMessageId = useId();\n  const shouldErrorMessageShow = errorMessage ? errorMessageId : undefined;\n  const describedBy = spaceDelimitedList([\n    shouldErrorMessageShow,\n    props[\"aria-describedby\"],\n  ]);\n  const labelId = useId();\n\n  const handleChange = (event: ChangeEvent<CheckboxElementType>) => {\n    const {\n      target: { value, checked },\n    } = event;\n\n    if (!checked) {\n      setSelected(selected.filter(item => item !== value));\n    }\n\n    if (checked) {\n      setSelected([...selected, value]);\n    }\n  };\n\n  useEffect(() => {\n    if (onChange) {\n      onChange(selected);\n    }\n  }, [selected, onChange]);\n\n  return (\n    <div\n      {...rest}\n      aria-labelledby={props[\"aria-labelledby\"] || labelId}\n      ref={ref}\n      className={checkboxGroupClasses}\n      role=\"group\"\n      style={\n        {\n          \"--checkbox-items-per-row\": itemsPerRow || Children.count(children),\n        } as React.CSSProperties\n      }\n    >\n      {label && (\n        <Label elementType=\"span\" id={labelId} className={labelClasses}>\n          {label}\n        </Label>\n      )}\n      <div className=\"mobius/CheckboxWrapper\">\n        {Children.map(children, child => {\n          if (isValidElement(child)) {\n            return cloneElement(child as ReactElement, {\n              isDisabled,\n              isRequired,\n              isReadOnly,\n              validationState,\n              defaultSelected: selected.includes(child.props.value),\n              onChange: handleChange,\n              \"aria-describedby\": describedBy,\n            });\n          }\n\n          return child;\n        })}\n      </div>\n      {errorMessage && (\n        <ErrorMessage id={errorMessageId} errorMessage={errorMessage} />\n      )}\n    </div>\n  );\n});\n"],"names":["CheckboxGroup","forwardRef","props","ref","label","isDisabled","isRequired","validationState","orientation","onChange","className","errorMessage","children","defaultValue","isReadOnly","itemsPerRow","rest","selected","setSelected","useState","checkboxGroupClasses","classNames","labelClasses","errorMessageId","useId","shouldErrorMessageShow","undefined","describedBy","spaceDelimitedList","labelId","handleChange","event","target","value","checked","filter","item","useEffect","div","aria-labelledby","role","style","Children","count","Label","elementType","id","map","child","isValidElement","cloneElement","defaultSelected","includes","ErrorMessage"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;;;;+BAyBaA;;;eAAAA;;;;uBAbN;+DACgB;uBAQD;8BACO;oCACM;;;;;;AAE5B,MAAMA,8BAGTC,IAAAA,iBAAU,EAAC,CAACC,OAA2BC;IACzC,MAAM,EACJC,KAAK,EACLC,aAAa,KAAK,EAClBC,UAAU,EACVC,eAAe,EACfC,cAAc,UAAU,EACxBC,QAAQ,EACRC,SAAS,EACTC,YAAY,EACZC,QAAQ,EACRC,eAAe,EAAE,EACjBC,UAAU,EACVC,WAAW,EACX,GAAGC,MACJ,GAAGd;IACJ,MAAM,CAACe,UAAUC,YAAY,GAAGC,IAAAA,eAAQ,EAAWN;IACnD,MAAMO,uBAAuBC,IAAAA,eAAU,EACrC,UACA,wBACAX,WACA;QACE,mBAAmBF,gBAAgB;QACnC,iBAAiBA,gBAAgB;QACjC,iBAAiB,OAAOF,eAAe,aAAaA;QACpD,iBAAiB,OAAOA,eAAe,aAAa,CAACA;IACvD;IAEF,MAAMgB,eAAeD,IAAAA,eAAU,EAAC;QAC9B,cAAcd,oBAAoB;QAClC,gBAAgBA,oBAAoB;QACpC,iBAAiBF;IACnB;IACA,MAAMkB,iBAAiBC,IAAAA,YAAK;IAC5B,MAAMC,yBAAyBd,eAAeY,iBAAiBG;IAC/D,MAAMC,cAAcC,IAAAA,sCAAkB,EAAC;QACrCH;QACAvB,KAAK,CAAC,mBAAmB;KAC1B;IACD,MAAM2B,UAAUL,IAAAA,YAAK;IAErB,MAAMM,eAAe,CAACC;QACpB,MAAM,EACJC,QAAQ,EAAEC,KAAK,EAAEC,OAAO,EAAE,EAC3B,GAAGH;QAEJ,IAAI,CAACG,SAAS;YACZhB,YAAYD,SAASkB,MAAM,CAACC,CAAAA,OAAQA,SAASH;QAC/C;QAEA,IAAIC,SAAS;YACXhB,YAAY;mBAAID;gBAAUgB;aAAM;QAClC;IACF;IAEAI,IAAAA,gBAAS,EAAC;QACR,IAAI5B,UAAU;YACZA,SAASQ;QACX;IACF,GAAG;QAACA;QAAUR;KAAS;IAEvB,qBACE,sBAAC6B;QACE,GAAGtB,IAAI;QACRuB,mBAAiBrC,KAAK,CAAC,kBAAkB,IAAI2B;QAC7C1B,KAAKA;QACLO,WAAWU;QACXoB,MAAK;QACLC,OACE;YACE,4BAA4B1B,eAAe2B,eAAQ,CAACC,KAAK,CAAC/B;QAC5D;;YAGDR,uBACC,qBAACwC,YAAK;gBAACC,aAAY;gBAAOC,IAAIjB;gBAASnB,WAAWY;0BAC/ClB;;0BAGL,qBAACkC;gBAAI5B,WAAU;0BACZgC,eAAQ,CAACK,GAAG,CAACnC,UAAUoC,CAAAA;oBACtB,kBAAIC,IAAAA,qBAAc,EAACD,QAAQ;wBACzB,qBAAOE,IAAAA,mBAAY,EAACF,OAAuB;4BACzC3C;4BACAC;4BACAQ;4BACAP;4BACA4C,iBAAiBlC,SAASmC,QAAQ,CAACJ,MAAM9C,KAAK,CAAC+B,KAAK;4BACpDxB,UAAUqB;4BACV,oBAAoBH;wBACtB;oBACF;oBAEA,OAAOqB;gBACT;;YAEDrC,8BACC,qBAAC0C,0BAAY;gBAACP,IAAIvB;gBAAgBZ,cAAcA;;;;AAIxD"}
+{"version":3,"sources":["../../../../src/components/Checkbox/CheckboxGroup.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  Children,\n  forwardRef,\n  ReactElement,\n  cloneElement,\n  isValidElement,\n  useId,\n  ChangeEvent,\n  useState,\n  useEffect,\n} from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport {\n  CheckboxElementType,\n  CheckboxGroupElementType,\n  CheckboxGroupProps,\n  CheckboxGroupRef,\n} from \"./types\";\nimport { Label } from \"../Label\";\nimport { ErrorMessage } from \"../ErrorMessage\";\nimport { spaceDelimitedList } from \"../../utils/spaceDelimitedList\";\nimport { useValidationClasses } from \"../../hooks\";\n\nexport const CheckboxGroup: ForwardedRefComponent<\n  CheckboxGroupProps,\n  CheckboxGroupElementType\n> = forwardRef((props: CheckboxGroupProps, ref: CheckboxGroupRef) => {\n  const {\n    label,\n    isDisabled = false,\n    isRequired,\n    validationState,\n    isInvalid,\n    orientation = \"vertical\",\n    onChange,\n    className,\n    errorMessage,\n    children,\n    defaultValue = [],\n    isReadOnly,\n    itemsPerRow,\n    ...rest\n  } = props;\n  const [selected, setSelected] = useState<string[]>(defaultValue);\n  const checkboxGroupClasses = classNames(\n    \"mobius\",\n    \"mobius/CheckboxGroup\",\n    className,\n    {\n      \"--is-horizontal\": orientation === \"horizontal\",\n      \"--is-vertical\": orientation === \"vertical\",\n      \"--is-required\": typeof isRequired === \"boolean\" && isRequired,\n      \"--is-optional\": typeof isRequired === \"boolean\" && !isRequired,\n    },\n  );\n  const validationClasses = useValidationClasses({\n    validationState,\n    isInvalid,\n  });\n  const labelClasses = classNames(\n    {\n      \"--is-disabled\": isDisabled,\n    },\n    validationClasses,\n  );\n  const errorMessageId = useId();\n  const shouldErrorMessageShow = errorMessage ? errorMessageId : undefined;\n  const describedBy = spaceDelimitedList([\n    shouldErrorMessageShow,\n    props[\"aria-describedby\"],\n  ]);\n  const labelId = useId();\n\n  const handleChange = (event: ChangeEvent<CheckboxElementType>) => {\n    const {\n      target: { value, checked },\n    } = event;\n\n    if (!checked) {\n      setSelected(selected.filter(item => item !== value));\n    }\n\n    if (checked) {\n      setSelected([...selected, value]);\n    }\n  };\n\n  useEffect(() => {\n    if (onChange) {\n      onChange(selected);\n    }\n  }, [selected, onChange]);\n\n  return (\n    <div\n      {...rest}\n      aria-labelledby={props[\"aria-labelledby\"] || labelId}\n      ref={ref}\n      className={checkboxGroupClasses}\n      role=\"group\"\n      style={\n        {\n          \"--checkbox-items-per-row\": itemsPerRow || Children.count(children),\n        } as React.CSSProperties\n      }\n    >\n      {label && (\n        <Label elementType=\"span\" id={labelId} className={labelClasses}>\n          {label}\n        </Label>\n      )}\n      <div className=\"mobius/CheckboxWrapper\">\n        {Children.map(children, child => {\n          if (isValidElement(child)) {\n            return cloneElement(child as ReactElement, {\n              isDisabled,\n              isRequired,\n              isReadOnly,\n              isInvalid,\n              defaultSelected: selected.includes(child.props.value),\n              onChange: handleChange,\n              \"aria-describedby\": describedBy,\n            });\n          }\n\n          return child;\n        })}\n      </div>\n      {errorMessage && (\n        <ErrorMessage id={errorMessageId} errorMessage={errorMessage} />\n      )}\n    </div>\n  );\n});\n"],"names":["CheckboxGroup","forwardRef","props","ref","label","isDisabled","isRequired","validationState","isInvalid","orientation","onChange","className","errorMessage","children","defaultValue","isReadOnly","itemsPerRow","rest","selected","setSelected","useState","checkboxGroupClasses","classNames","validationClasses","useValidationClasses","labelClasses","errorMessageId","useId","shouldErrorMessageShow","undefined","describedBy","spaceDelimitedList","labelId","handleChange","event","target","value","checked","filter","item","useEffect","div","aria-labelledby","role","style","Children","count","Label","elementType","id","map","child","isValidElement","cloneElement","defaultSelected","includes","ErrorMessage"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;;;;+BA0BaA;;;eAAAA;;;;uBAdN;+DACgB;uBAQD;8BACO;oCACM;uBACE;;;;;;AAE9B,MAAMA,8BAGTC,IAAAA,iBAAU,EAAC,CAACC,OAA2BC;IACzC,MAAM,EACJC,KAAK,EACLC,aAAa,KAAK,EAClBC,UAAU,EACVC,eAAe,EACfC,SAAS,EACTC,cAAc,UAAU,EACxBC,QAAQ,EACRC,SAAS,EACTC,YAAY,EACZC,QAAQ,EACRC,eAAe,EAAE,EACjBC,UAAU,EACVC,WAAW,EACX,GAAGC,MACJ,GAAGf;IACJ,MAAM,CAACgB,UAAUC,YAAY,GAAGC,IAAAA,eAAQ,EAAWN;IACnD,MAAMO,uBAAuBC,IAAAA,eAAU,EACrC,UACA,wBACAX,WACA;QACE,mBAAmBF,gBAAgB;QACnC,iBAAiBA,gBAAgB;QACjC,iBAAiB,OAAOH,eAAe,aAAaA;QACpD,iBAAiB,OAAOA,eAAe,aAAa,CAACA;IACvD;IAEF,MAAMiB,oBAAoBC,IAAAA,2BAAoB,EAAC;QAC7CjB;QACAC;IACF;IACA,MAAMiB,eAAeH,IAAAA,eAAU,EAC7B;QACE,iBAAiBjB;IACnB,GACAkB;IAEF,MAAMG,iBAAiBC,IAAAA,YAAK;IAC5B,MAAMC,yBAAyBhB,eAAec,iBAAiBG;IAC/D,MAAMC,cAAcC,IAAAA,sCAAkB,EAAC;QACrCH;QACA1B,KAAK,CAAC,mBAAmB;KAC1B;IACD,MAAM8B,UAAUL,IAAAA,YAAK;IAErB,MAAMM,eAAe,CAACC;QACpB,MAAM,EACJC,QAAQ,EAAEC,KAAK,EAAEC,OAAO,EAAE,EAC3B,GAAGH;QAEJ,IAAI,CAACG,SAAS;YACZlB,YAAYD,SAASoB,MAAM,CAACC,CAAAA,OAAQA,SAASH;QAC/C;QAEA,IAAIC,SAAS;YACXlB,YAAY;mBAAID;gBAAUkB;aAAM;QAClC;IACF;IAEAI,IAAAA,gBAAS,EAAC;QACR,IAAI9B,UAAU;YACZA,SAASQ;QACX;IACF,GAAG;QAACA;QAAUR;KAAS;IAEvB,qBACE,sBAAC+B;QACE,GAAGxB,IAAI;QACRyB,mBAAiBxC,KAAK,CAAC,kBAAkB,IAAI8B;QAC7C7B,KAAKA;QACLQ,WAAWU;QACXsB,MAAK;QACLC,OACE;YACE,4BAA4B5B,eAAe6B,eAAQ,CAACC,KAAK,CAACjC;QAC5D;;YAGDT,uBACC,qBAAC2C,YAAK;gBAACC,aAAY;gBAAOC,IAAIjB;gBAASrB,WAAWc;0BAC/CrB;;0BAGL,qBAACqC;gBAAI9B,WAAU;0BACZkC,eAAQ,CAACK,GAAG,CAACrC,UAAUsC,CAAAA;oBACtB,kBAAIC,IAAAA,qBAAc,EAACD,QAAQ;wBACzB,qBAAOE,IAAAA,mBAAY,EAACF,OAAuB;4BACzC9C;4BACAC;4BACAS;4BACAP;4BACA8C,iBAAiBpC,SAASqC,QAAQ,CAACJ,MAAMjD,KAAK,CAACkC,KAAK;4BACpD1B,UAAUuB;4BACV,oBAAoBH;wBACtB;oBACF;oBAEA,OAAOqB;gBACT;;YAEDvC,8BACC,qBAAC4C,0BAAY;gBAACP,IAAIvB;gBAAgBd,cAAcA;;;;AAIxD"}

package/dist/cjs/components/Checkbox/CheckboxGroup.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { CheckboxGroup } from ".";
+type StoryType = StoryObj<typeof CheckboxGroup>;
+declare const meta: Meta<typeof CheckboxGroup>;
+export declare const Normal: StoryType;
+export declare const Disabled: StoryType;
+export declare const Valid: StoryType;
+export declare const Invalid: StoryType;
+export default meta;

package/dist/cjs/components/Checkbox/CheckboxGroup.stories.js

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Invalid = exports.Valid = exports.Disabled = exports.Normal = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const _1 = require(".");
+const utils_1 = require("../../utils");
+const meta = {
+    title: "Forms/CheckboxGroup",
+    component: _1.CheckboxGroup,
+    argTypes: Object.assign({ validationState: {
+            options: ["valid", "invalid", "neither"],
+            control: { type: "radio" },
+            mapping: {
+                valid: "valid",
+                invalid: "invalid",
+                neither: "",
+            },
+        } }, (0, utils_1.excludeControls)("isRequired", "isReadOnly", "defaultValue", "value")),
+    decorators: [
+        Story => ((0, jsx_runtime_1.jsx)(utils_1.StoryContainer, { children: (0, jsx_runtime_1.jsx)(Story, {}) })),
+    ],
+};
+exports.Normal = {
+    render: (args) => ((0, jsx_runtime_1.jsxs)(_1.CheckboxGroup, Object.assign({}, args, { children: [(0, jsx_runtime_1.jsx)(_1.Checkbox, { label: "Option 1", value: "option1" }), (0, jsx_runtime_1.jsx)(_1.Checkbox, { label: "Option 2", value: "option2" }), (0, jsx_runtime_1.jsx)(_1.Checkbox, { label: "Option 3", value: "option3" })] }))),
+    args: {
+        label: "Value",
+        errorMessage: "",
+        isDisabled: false,
+        orientation: "vertical",
+        defaultValue: ["option1", "option3"],
+        isRequired: false,
+    },
+};
+exports.Disabled = {
+    render: (args) => ((0, jsx_runtime_1.jsxs)(_1.CheckboxGroup, Object.assign({}, args, { children: [(0, jsx_runtime_1.jsx)(_1.Checkbox, { label: "Option 1", value: "option1" }), (0, jsx_runtime_1.jsx)(_1.Checkbox, { label: "Option 2", value: "option2" }), (0, jsx_runtime_1.jsx)(_1.Checkbox, { label: "Option 3", value: "option3" })] }))),
+    args: {
+        label: "Value",
+        errorMessage: "",
+        isDisabled: true,
+        orientation: "vertical",
+        isRequired: false,
+    },
+};
+exports.Valid = {
+    render: (args) => ((0, jsx_runtime_1.jsxs)(_1.CheckboxGroup, Object.assign({}, args, { children: [(0, jsx_runtime_1.jsx)(_1.Checkbox, { label: "Option 1", value: "option1" }), (0, jsx_runtime_1.jsx)(_1.Checkbox, { label: "Option 2", value: "option2" }), (0, jsx_runtime_1.jsx)(_1.Checkbox, { label: "Option 3", value: "option3" })] }))),
+    args: {
+        label: "Value",
+        errorMessage: "",
+        isDisabled: false,
+        validationState: "valid",
+        orientation: "vertical",
+        isRequired: false,
+    },
+};
+exports.Invalid = {
+    render: (args) => ((0, jsx_runtime_1.jsxs)(_1.CheckboxGroup, Object.assign({}, args, { children: [(0, jsx_runtime_1.jsx)(_1.Checkbox, { label: "Option 1", value: "option1" }), (0, jsx_runtime_1.jsx)(_1.Checkbox, { label: "Option 2", value: "option2" }), (0, jsx_runtime_1.jsx)(_1.Checkbox, { label: "Option 3", value: "option3" })] }))),
+    args: {
+        label: "Value",
+        errorMessage: "This field is required",
+        isDisabled: false,
+        validationState: "invalid",
+        orientation: "vertical",
+        isRequired: false,
+    },
+};
+exports.default = meta;
+//# sourceMappingURL=CheckboxGroup.stories.js.map

package/dist/cjs/components/Checkbox/CheckboxGroup.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxGroup.stories.js","sourceRoot":"","sources":["../../../../src/components/Checkbox/CheckboxGroup.stories.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/components/Checkbox/CheckboxGroup.test.d.ts

@@ -0,0 +1 @@
+export {};