@darajs/ui-components 1.0.0-a.1

package/dist/checkbox/checkbox-group.js

@@ -0,0 +1,116 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Copyright 2023 Impulse Innovations Limited
+ *
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { useEffect, useMemo, useState } from 'react';
+import styled from '@darajs/styled-components';
+import Checkbox from './checkbox';
+const CheckboxWrapper = styled.div `
+    user-select: none;
+    display: flex;
+    width: 100%;
+    border: none;
+`;
+const CheckboxGroupWrapper = styled.div `
+    color: ${(props) => props.theme.colors.text};
+`;
+const CheckboxInfo = styled.p `
+    font-size: 0.75rem;
+    color: ${(props) => props.theme.colors.grey4};
+`;
+function getInitialValue(initialValue) {
+    if (Array.isArray(initialValue)) {
+        return initialValue;
+    }
+    if (initialValue) {
+        return [initialValue];
+    }
+    return [];
+}
+function getInitialCheckedState(items, initialValues) {
+    if (initialValues) {
+        return items.map((item) => ({ state: initialValues.includes(item.value), value: item.value }));
+    }
+    return items.map((item) => ({ state: initialValues.includes(item.value), value: false }));
+}
+/**
+ * A checkbox group component
+ *
+ * @param {CheckboxGroupProps} props - the component props
+ */
+function CheckboxGroup(props) {
+    const [values, setValues] = useState(() => getInitialValue(props.values || props.initialValue));
+    const [checkedState, setCheckedState] = useState(() => getInitialCheckedState(props.items, values));
+    const isSelectPermitted = useMemo(() => {
+        if (!props.selectMax || values.length < props.selectMax) {
+            return true;
+        }
+        return false;
+    }, [values, props.selectMax]);
+    const infoMessage = useMemo(() => {
+        if (props.selectMax && props.selectMin) {
+            return `You can select from ${props.selectMin} to ${props.selectMax} options`;
+        }
+        if (props.selectMax) {
+            return `You can select up to ${props.selectMax} options`;
+        }
+        if (props.selectMin) {
+            return `You should select at least ${props.selectMin} options`;
+        }
+    }, [props.selectMax, props.selectMin]);
+    const onChangeValue = (event) => {
+        var _a;
+        const target = event.target;
+        const chosenIndex = Number(target.value);
+        const chosenValue = props.items[chosenIndex].value;
+        let newValues = [...values];
+        // find what the new values would be
+        if (values.includes(chosenValue)) {
+            newValues = newValues.filter((value) => value !== chosenValue);
+        }
+        else {
+            newValues.push(chosenValue);
+        }
+        // if new values would result in above the number permitted, only allow to uncheck selected checkboxes
+        // or if values below above permited/unconstrained then allow it to switch states
+        if ((newValues.length > props.selectMax && checkedState[chosenIndex]) ||
+            newValues.length <= props.selectMax ||
+            !props.selectMax) {
+            const indexToUpdate = checkedState.findIndex((item) => item.value === chosenValue);
+            checkedState[indexToUpdate].state = !checkedState[indexToUpdate].state;
+            setCheckedState(checkedState);
+            setValues(newValues);
+            if (!props.selectMin || newValues.length >= props.selectMin) {
+                (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, props.items.filter((item) => newValues.includes(item.value)), event);
+            }
+        }
+    };
+    useEffect(() => {
+        if (props.values) {
+            const valuesArray = props.values.map((value) => value.value);
+            setCheckedState(props.items.map((item) => ({ state: valuesArray.includes(item.value), value: item.value })));
+            setValues(valuesArray);
+        }
+    }, [props.values, props.items]);
+    return (_jsxs(CheckboxGroupWrapper, { className: props.className, style: props.style, children: [(props.selectMax || props.selectMin) && _jsx(CheckboxInfo, { children: infoMessage }), props.items.map((item, index) => {
+                var _a, _b;
+                return (_jsx(CheckboxWrapper, { "aria-disabled": props.disabled, children: _jsx(Checkbox, { disabled: isSelectPermitted
+                            ? props.disabled
+                            : ((_a = checkedState.find((option) => option.value === item.value)) === null || _a === void 0 ? void 0 : _a.state) === false, id: index, isListStyle: props.isListStyle, label: item.label ? item.label : item.value, onChange: (checked, e) => onChangeValue(e), selected: (_b = checkedState.find((option) => option.value === item.value)) === null || _b === void 0 ? void 0 : _b.state }) }, `item-${index}`));
+            })] }));
+}
+export default CheckboxGroup;
+//# sourceMappingURL=checkbox-group.js.map

package/dist/checkbox/checkbox-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-group.js","sourceRoot":"","sources":["../../src/checkbox/checkbox-group.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;GAeG;AACH,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,MAAM,MAAM,2BAA2B,CAAC;AAG/C,OAAO,QAAQ,MAAM,YAAY,CAAC;AAOlC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;CAKjC,CAAC;AAEF,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA;aAC1B,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI;CAC9C,CAAC;AAEF,MAAM,YAAY,GAAG,MAAM,CAAC,CAAC,CAAA;;aAEhB,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK;CAC/C,CAAC;AAyBF,SAAS,eAAe,CAAC,YAAgC;IACrD,IAAI,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC,EAAE;QAC7B,OAAO,YAAY,CAAC;KACvB;IACD,IAAI,YAAY,EAAE;QACd,OAAO,CAAC,YAAY,CAAC,CAAC;KACzB;IACD,OAAO,EAAE,CAAC;AACd,CAAC;AAED,SAAS,sBAAsB,CAAC,KAAkB,EAAE,aAAyB;IACzE,IAAI,aAAa,EAAE;QACf,OAAO,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,aAAa,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;KAClG;IACD,OAAO,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,aAAa,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;AAC9F,CAAC;AAED;;;;GAIG;AACH,SAAS,aAAa,CAAC,KAAyB;IAC5C,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,eAAe,CAAC,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC;IAChG,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,sBAAsB,CAAC,KAAK,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC;IAEpG,MAAM,iBAAiB,GAAG,OAAO,CAAC,GAAG,EAAE;QACnC,IAAI,CAAC,KAAK,CAAC,SAAS,IAAI,MAAM,CAAC,MAAM,GAAG,KAAK,CAAC,SAAS,EAAE;YACrD,OAAO,IAAI,CAAC;SACf;QACD,OAAO,KAAK,CAAC;IACjB,CAAC,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;IAE9B,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE;QAC7B,IAAI,KAAK,CAAC,SAAS,IAAI,KAAK,CAAC,SAAS,EAAE;YACpC,OAAO,uBAAuB,KAAK,CAAC,SAAS,OAAO,KAAK,CAAC,SAAS,UAAU,CAAC;SACjF;QACD,IAAI,KAAK,CAAC,SAAS,EAAE;YACjB,OAAO,wBAAwB,KAAK,CAAC,SAAS,UAAU,CAAC;SAC5D;QACD,IAAI,KAAK,CAAC,SAAS,EAAE;YACjB,OAAO,8BAA8B,KAAK,CAAC,SAAS,UAAU,CAAC;SAClE;IACL,CAAC,EAAE,CAAC,KAAK,CAAC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;IAEvC,MAAM,aAAa,GAAG,CAAC,KAAwC,EAAQ,EAAE;;QACrE,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B,CAAC;QAChD,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QACzC,MAAM,WAAW,GAAG,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,KAAK,CAAC;QACnD,IAAI,SAAS,GAAG,CAAC,GAAG,MAAM,CAAC,CAAC;QAE5B,oCAAoC;QACpC,IAAI,MAAM,CAAC,QAAQ,CAAC,WAAW,CAAC,EAAE;YAC9B,SAAS,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,KAAK,WAAW,CAAC,CAAC;SAClE;aAAM;YACH,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;SAC/B;QAED,sGAAsG;QACtG,iFAAiF;QACjF,IACI,CAAC,SAAS,CAAC,MAAM,GAAG,KAAK,CAAC,SAAS,IAAI,YAAY,CAAC,WAAW,CAAC,CAAC;YACjE,SAAS,CAAC,MAAM,IAAI,KAAK,CAAC,SAAS;YACnC,CAAC,KAAK,CAAC,SAAS,EAClB;YACE,MAAM,aAAa,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,KAAK,WAAW,CAAC,CAAC;YACnF,YAAY,CAAC,aAAa,CAAC,CAAC,KAAK,GAAG,CAAC,YAAY,CAAC,aAAa,CAAC,CAAC,KAAK,CAAC;YACvE,eAAe,CAAC,YAAY,CAAC,CAAC;YAE9B,SAAS,CAAC,SAAS,CAAC,CAAC;YACrB,IAAI,CAAC,KAAK,CAAC,SAAS,IAAI,SAAS,CAAC,MAAM,IAAI,KAAK,CAAC,SAAS,EAAE;gBACzD,MAAA,KAAK,CAAC,QAAQ,sDACV,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAC5D,KAAK,CACR,CAAC;aACL;SACJ;IACL,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,KAAK,CAAC,MAAM,EAAE;YACd,MAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;YAC7D,eAAe,CACX,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAC9F,CAAC;YACF,SAAS,CAAC,WAAW,CAAC,CAAC;SAC1B;IACL,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;IAEhC,OAAO,CACH,MAAC,oBAAoB,IAAC,SAAS,EAAE,KAAK,CAAC,SAAS,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,aAC/D,CAAC,KAAK,CAAC,SAAS,IAAI,KAAK,CAAC,SAAS,CAAC,IAAI,KAAC,YAAY,cAAE,WAAW,GAAgB,EAClF,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;;gBAC7B,OAAO,CACH,KAAC,eAAe,qBAAgB,KAAK,CAAC,QAAQ,YAC1C,KAAC,QAAQ,IACL,QAAQ,EACJ,iBAAiB;4BACb,CAAC,CAAC,KAAK,CAAC,QAAQ;4BAChB,CAAC,CAAC,CAAA,MAAA,YAAY,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,0CAAE,KAAK,MAAK,KAAK,EAErF,EAAE,EAAE,KAAK,EACT,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,EAC3C,QAAQ,EAAE,CAAC,OAAO,EAAE,CAAC,EAAE,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC,EAC1C,QAAQ,EAAE,MAAA,YAAY,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,0CAAE,KAAK,GAC7E,IAZ+C,QAAQ,KAAK,EAAE,CAalD,CACrB,CAAC;YACN,CAAC,CAAC,IACiB,CAC1B,CAAC;AACN,CAAC;AAED,eAAe,aAAa,CAAC"}

package/dist/checkbox/checkbox.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+import { InteractiveComponentProps } from '../types';
+export interface CheckboxProps extends InteractiveComponentProps<boolean> {
+    /** Standard react className property */
+    className?: string;
+    /** Whether the checkbox is disabled. */
+    disabled?: boolean;
+    /** id of the current checkbox */
+    id?: number;
+    /** Whether to show list style of checkbox */
+    isListStyle?: boolean;
+    /** Sets the label to appear next to the checkbox */
+    label?: string;
+    /** An optional onChange handler, will be called whenever the state of the checkbox changes */
+    onChange?: (checked: boolean, e: React.FormEvent<HTMLInputElement>) => void | Promise<void>;
+    /** An optional onCLick handler */
+    onClick?: (e: React.FormEvent<HTMLInputElement>) => void | Promise<void>;
+    /** Setting this puts the checkbox in controlled mode */
+    selected?: boolean;
+}
+/**
+ * A simple checkbox component
+ *
+ * @param {CheckboxProps} props - the component props
+ */
+declare function Checkbox(props: CheckboxProps): JSX.Element;
+export default Checkbox;
+//# sourceMappingURL=checkbox.d.ts.map

package/dist/checkbox/checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../src/checkbox/checkbox.tsx"],"names":[],"mappings":";AAoBA,OAAO,EAAE,yBAAyB,EAAE,MAAM,UAAU,CAAC;AA6HrD,MAAM,WAAW,aAAc,SAAQ,yBAAyB,CAAC,OAAO,CAAC;IACrE,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iCAAiC;IACjC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,6CAA6C;IAC7C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8FAA8F;IAC9F,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5F,kCAAkC;IAClC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACzE,wDAAwD;IACxD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;;;GAIG;AACH,iBAAS,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,GAAG,CAAC,OAAO,CAuCnD;AAED,eAAe,QAAQ,CAAC"}

package/dist/checkbox/checkbox.js

@@ -0,0 +1,162 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Copyright 2023 Impulse Innovations Limited
+ *
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { useEffect, useState } from 'react';
+import styled from '@darajs/styled-components';
+const CheckboxWrapper = styled.label `
+    cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
+    user-select: none;
+
+    position: relative;
+
+    display: flex;
+    align-items: center;
+
+    width: ${(props) => (props.isListStyle ? '100%' : 'fit-content')};
+    padding: 0.5625rem 0rem 0.5625rem 2rem;
+
+    font-size: 1rem;
+
+    border-radius: 0.25rem;
+
+    ${(props) => {
+    if (props.isListStyle && !props.disabled) {
+        return `
+                :hover {
+                    background-color: ${props.theme.colors.grey1};
+
+                    span {
+                        border: 1px solid ${props.theme.colors.grey4};
+                    }
+                }
+
+                :active {
+                    background-color: ${props.theme.colors.grey2};
+                }
+        `;
+    }
+}}
+
+    // sets checkmark indicator
+    span:after {
+        top: 0.05rem;
+        left: 0.3rem;
+        transform: rotate(45deg);
+
+        width: 0.3125rem;
+        height: 0.625rem;
+
+        border: solid ${(props) => props.theme.colors.grey5};
+        border-width: 0 2px 2px 0;
+    }
+
+    // Show the checkmark when checked
+    input:checked ~ span:after {
+        display: block;
+    }
+
+    :hover {
+        span,
+        input:checked ~ span {
+            background-color: ${(props) => {
+    if (props.disabled) {
+        return props.theme.colors.grey3;
+    }
+    if (props.isListStyle) {
+        return props.theme.colors.blue1;
+    }
+    return props.theme.colors.grey1;
+}};
+            border: 1px solid ${(props) => props.theme.colors.grey4};
+        }
+    }
+
+    :active {
+        span,
+        input:checked ~ span {
+            background-color: ${(props) => {
+    if (props.disabled) {
+        return props.theme.colors.grey3;
+    }
+    if (props.isListStyle) {
+        return props.theme.colors.blue1;
+    }
+    return props.theme.colors.grey2;
+}};
+        }
+    }
+`;
+const StyledCheckbox = styled.input `
+    cursor: pointer;
+    /* Hide the browser's default checkbox */
+    position: absolute;
+
+    width: 0;
+    height: 0;
+
+    opacity: 0;
+
+    :checked ~ span {
+        background-color: ${(props) => (props.disabled ? props.theme.colors.grey3 : props.theme.colors.blue1)};
+    }
+`;
+const StyledCheckmark = styled.span `
+    position: absolute;
+    left: 0.5rem;
+
+    width: 1rem;
+    height: 1rem;
+
+    background-color: ${(props) => (props.disabled ? props.theme.colors.grey3 : props.theme.colors.blue1)};
+    border: 1px solid ${(props) => (props.disabled ? props.theme.colors.grey3 : props.theme.colors.grey4)};
+    border-radius: 0.25rem;
+
+    // hidden checkmark indicator
+    :after {
+        content: '';
+        position: absolute;
+        display: none;
+    }
+`;
+/**
+ * A simple checkbox component
+ *
+ * @param {CheckboxProps} props - the component props
+ */
+function Checkbox(props) {
+    const [checked, setChecked] = useState(props.selected || props.initialValue);
+    useEffect(() => {
+        if (props.selected !== undefined) {
+            setChecked(props.selected);
+        }
+    }, [props.selected]);
+    const onClick = (e) => {
+        // Disabled removes all behaviour
+        if (props.disabled) {
+            return;
+        }
+        if (props.selected === undefined) {
+            setChecked(!checked);
+        }
+        if (props.onChange) {
+            props.onChange(!checked, e);
+        }
+    };
+    return (_jsxs(CheckboxWrapper, { className: props.className, disabled: props.disabled, isListStyle: props.isListStyle, children: [props.label, _jsx(StyledCheckbox, { "aria-disabled": props.disabled, checked: props.selected, disabled: props.disabled, isListStyle: props.isListStyle, onChange: (e) => onClick(e), onClick: props.onClick, type: "checkbox", value: props.id }), _jsx(StyledCheckmark, { disabled: props.disabled, isListStyle: props.isListStyle })] }));
+}
+export default Checkbox;
+//# sourceMappingURL=checkbox.js.map

package/dist/checkbox/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../src/checkbox/checkbox.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;GAeG;AACH,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,MAAM,MAAM,2BAA2B,CAAC;AAS/C,MAAM,eAAe,GAAG,MAAM,CAAC,KAAK,CAAsB;cAC5C,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC;;;;;;;;aAQxD,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,aAAa,CAAC;;;;;;;MAO9D,CAAC,KAAK,EAAE,EAAE;IACR,IAAI,KAAK,CAAC,WAAW,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;QACtC,OAAO;;wCAEqB,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK;;;4CAGpB,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK;;;;;wCAK5B,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK;;SAEvD,CAAC;KACD;AACL,CAAC;;;;;;;;;;;wBAWmB,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK;;;;;;;;;;;;gCAY3B,CAAC,KAAK,EAAE,EAAE;IAC1B,IAAI,KAAK,CAAC,QAAQ,EAAE;QAChB,OAAO,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;KACnC;IACD,IAAI,KAAK,CAAC,WAAW,EAAE;QACnB,OAAO,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;KACnC;IACD,OAAO,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;AACpC,CAAC;gCACmB,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK;;;;;;;gCAOnC,CAAC,KAAK,EAAE,EAAE;IAC1B,IAAI,KAAK,CAAC,QAAQ,EAAE;QAChB,OAAO,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;KACnC;IACD,IAAI,KAAK,CAAC,WAAW,EAAE;QACnB,OAAO,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;KACnC;IACD,OAAO,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;AACpC,CAAC;;;CAGZ,CAAC;AAEF,MAAM,cAAc,GAAG,MAAM,CAAC,KAAK,CAAsB;;;;;;;;;;;4BAW7B,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;;CAE5G,CAAC;AAEF,MAAM,eAAe,GAAG,MAAM,CAAC,IAAI,CAAsB;;;;;;;wBAOjC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;wBACjF,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;;;;;;;;;CASxG,CAAC;AAqBF;;;;GAIG;AACH,SAAS,QAAQ,CAAC,KAAoB;IAClC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,YAAY,CAAC,CAAC;IAE7E,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,KAAK,CAAC,QAAQ,KAAK,SAAS,EAAE;YAC9B,UAAU,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;SAC9B;IACL,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;IAErB,MAAM,OAAO,GAAG,CAAC,CAAgD,EAAQ,EAAE;QACvE,iCAAiC;QACjC,IAAI,KAAK,CAAC,QAAQ,EAAE;YAChB,OAAO;SACV;QAED,IAAI,KAAK,CAAC,QAAQ,KAAK,SAAS,EAAE;YAC9B,UAAU,CAAC,CAAC,OAAO,CAAC,CAAC;SACxB;QACD,IAAI,KAAK,CAAC,QAAQ,EAAE;YAChB,KAAK,CAAC,QAAQ,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC;SAC/B;IACL,CAAC,CAAC;IAEF,OAAO,CACH,MAAC,eAAe,IAAC,SAAS,EAAE,KAAK,CAAC,SAAS,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,WAAW,EAAE,KAAK,CAAC,WAAW,aAChG,KAAK,CAAC,KAAK,EACZ,KAAC,cAAc,qBACI,KAAK,CAAC,QAAQ,EAC7B,OAAO,EAAE,KAAK,CAAC,QAAQ,EACvB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,EAC3B,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,KAAK,CAAC,EAAE,GACjB,EACF,KAAC,eAAe,IAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,WAAW,EAAE,KAAK,CAAC,WAAW,GAAI,IAC/D,CACrB,CAAC;AACN,CAAC;AAED,eAAe,QAAQ,CAAC"}

package/dist/checkbox/tri-state-checkbox.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import { InteractiveComponentProps } from '../types';
+export declare enum CheckboxState {
+    CHECKED = "checked",
+    INDETERMINATE = "indeterminate",
+    UNCHECKED = "unchecked"
+}
+export interface CheckboxProps extends InteractiveComponentProps<boolean> {
+    /** Set the check box to be checked */
+    allSelected?: boolean;
+    /** Set the check box to be unchecked */
+    noneSelected?: boolean;
+    /** An optional onChange handler, will be called whenever the state of the checkbox changes */
+    onChange?: (state: CheckboxState, e?: React.SyntheticEvent<HTMLInputElement, Event>) => void | Promise<void>;
+}
+/**
+ * A tri-state (or indeterminate) checkbox component
+ *
+ * @param {CheckboxProps} props - the component props
+ */
+declare function TriStateCheckbox(props: CheckboxProps): JSX.Element;
+export default TriStateCheckbox;
+//# sourceMappingURL=tri-state-checkbox.d.ts.map

package/dist/checkbox/tri-state-checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tri-state-checkbox.d.ts","sourceRoot":"","sources":["../../src/checkbox/tri-state-checkbox.tsx"],"names":[],"mappings":";AAoBA,OAAO,EAAE,yBAAyB,EAAE,MAAM,UAAU,CAAC;AAGrD,oBAAY,aAAa;IACrB,OAAO,YAAY;IACnB,aAAa,kBAAkB;IAC/B,SAAS,cAAc;CAC1B;AAiCD,MAAM,WAAW,aAAc,SAAQ,yBAAyB,CAAC,OAAO,CAAC;IACrE,sCAAsC;IACtC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,wCAAwC;IACxC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,8FAA8F;IAC9F,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,gBAAgB,EAAE,KAAK,CAAC,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CAChH;AAYD;;;;GAIG;AACH,iBAAS,gBAAgB,CAAC,KAAK,EAAE,aAAa,GAAG,GAAG,CAAC,OAAO,CAgC3D;AAED,eAAe,gBAAgB,CAAC"}

package/dist/checkbox/tri-state-checkbox.js

@@ -0,0 +1,87 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Copyright 2023 Impulse Innovations Limited
+ *
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { useEffect, useState } from 'react';
+import styled from '@darajs/styled-components';
+import Checkbox from './checkbox';
+export var CheckboxState;
+(function (CheckboxState) {
+    CheckboxState["CHECKED"] = "checked";
+    CheckboxState["INDETERMINATE"] = "indeterminate";
+    CheckboxState["UNCHECKED"] = "unchecked";
+})(CheckboxState || (CheckboxState = {}));
+const StyledTriStateCheckbox = styled.div `
+    ${(props) => {
+    if (props.state === CheckboxState.INDETERMINATE) {
+        return `
+                    span:after {
+                        display: block ;
+                        left: 0.07rem;
+                        top: 0.4rem;
+                        width: 0.75rem;
+                        border-radius: 0.25rem;
+                        height: 0px;
+                        border: 1px solid ${props.theme.colors.grey6};
+                        transform: rotate(0deg)
+                    }
+
+            `;
+    }
+}}
+`;
+function computeState(allSelected, noneSelected) {
+    if (noneSelected) {
+        return CheckboxState.UNCHECKED;
+    }
+    return allSelected ? CheckboxState.CHECKED : CheckboxState.INDETERMINATE;
+}
+function getControlledState(allSelected, noneSelected) {
+    if (allSelected) {
+        return allSelected;
+    }
+    if (noneSelected) {
+        return false;
+    }
+    return undefined;
+}
+/**
+ * A tri-state (or indeterminate) checkbox component
+ *
+ * @param {CheckboxProps} props - the component props
+ */
+function TriStateCheckbox(props) {
+    const [state, setState] = useState(computeState(props.allSelected, props.noneSelected));
+    useEffect(() => {
+        setState(computeState(props.allSelected, props.noneSelected));
+    }, [props.allSelected, props.noneSelected]);
+    const onClick = (checked, e) => {
+        setState(checked ? CheckboxState.CHECKED : CheckboxState.UNCHECKED);
+        if (props.onChange) {
+            if (state === CheckboxState.UNCHECKED) {
+                props.onChange(CheckboxState.CHECKED, e);
+            }
+            else {
+                props.onChange(CheckboxState.UNCHECKED, e);
+            }
+        }
+    };
+    return (_jsx(StyledTriStateCheckbox, { state: state, style: props.style, children: _jsx(Checkbox, { className: props.className, disabled: props.disabled, initialValue: state === CheckboxState.CHECKED, onChange: (checked, event) => {
+                onClick(checked, event);
+            }, selected: getControlledState(props.allSelected, props.noneSelected) }) }));
+}
+export default TriStateCheckbox;
+//# sourceMappingURL=tri-state-checkbox.js.map

package/dist/checkbox/tri-state-checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tri-state-checkbox.js","sourceRoot":"","sources":["../../src/checkbox/tri-state-checkbox.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;GAeG;AACH,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,MAAM,MAAM,2BAA2B,CAAC;AAG/C,OAAO,QAAQ,MAAM,YAAY,CAAC;AAElC,MAAM,CAAN,IAAY,aAIX;AAJD,WAAY,aAAa;IACrB,oCAAmB,CAAA;IACnB,gDAA+B,CAAA;IAC/B,wCAAuB,CAAA;AAC3B,CAAC,EAJW,aAAa,KAAb,aAAa,QAIxB;AAMD,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,CAAc;MACjD,CAAC,KAAK,EAAE,EAAE;IACR,IAAI,KAAK,CAAC,KAAK,KAAK,aAAa,CAAC,aAAa,EAAE;QAC7C,OAAO;;;;;;;;4CAQyB,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK;;;;aAIvD,CAAC;KACL;AACL,CAAC;CACJ,CAAC;AAEF,SAAS,YAAY,CAAC,WAAoB,EAAE,YAAqB;IAC7D,IAAI,YAAY,EAAE;QACd,OAAO,aAAa,CAAC,SAAS,CAAC;KAClC;IACD,OAAO,WAAW,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,aAAa,CAAC;AAC7E,CAAC;AAWD,SAAS,kBAAkB,CAAC,WAAoB,EAAE,YAAqB;IACnE,IAAI,WAAW,EAAE;QACb,OAAO,WAAW,CAAC;KACtB;IACD,IAAI,YAAY,EAAE;QACd,OAAO,KAAK,CAAC;KAChB;IACD,OAAO,SAAS,CAAC;AACrB,CAAC;AAED;;;;GAIG;AACH,SAAS,gBAAgB,CAAC,KAAoB;IAC1C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,KAAK,CAAC,WAAW,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC;IAExF,SAAS,CAAC,GAAG,EAAE;QACX,QAAQ,CAAC,YAAY,CAAC,KAAK,CAAC,WAAW,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC;IAClE,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC;IAE5C,MAAM,OAAO,GAAG,CAAC,OAAgB,EAAE,CAAoC,EAAQ,EAAE;QAC7E,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;QAEpE,IAAI,KAAK,CAAC,QAAQ,EAAE;YAChB,IAAI,KAAK,KAAK,aAAa,CAAC,SAAS,EAAE;gBACnC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC;aAC5C;iBAAM;gBACH,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC;aAC9C;SACJ;IACL,CAAC,CAAC;IAEF,OAAO,CACH,KAAC,sBAAsB,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,YACpD,KAAC,QAAQ,IACL,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,YAAY,EAAE,KAAK,KAAK,aAAa,CAAC,OAAO,EAC7C,QAAQ,EAAE,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE;gBACzB,OAAO,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;YAC5B,CAAC,EACD,QAAQ,EAAE,kBAAkB,CAAC,KAAK,CAAC,WAAW,EAAE,KAAK,CAAC,YAAY,CAAC,GACrE,GACmB,CAC5B,CAAC;AACN,CAAC;AAED,eAAe,gBAAgB,CAAC"}