@sqrzro/admin 1.0.0-beta.7 → 2.0.0

package/dist/{types/components → components}/AutoSuggest/index.d.ts

@@ -1,60 +1,74 @@
-import React from 'react';
-import type { DropdownItem } from '../../core/DropdownPanel';
-import type { InputProps } from '../../utility/interfaces';
-interface AutoSuggestProps extends InputProps<string> {
-    /**
-     * An array of strings to filter for the suggestions. If a `remote` prop is specified, this is
-     * ignored.
-     */
-    data?: (DropdownItem | string)[] | null;
-    /** The URL for the endpoint that will return the suggestions */
-    remote?: string | null;
-}
-/**
- * As a user types, suggestions based on they've typed are displayed in a panel below. When a user
- * clicks a suggestion, the value is updated. Under the hood, it is more or less a combination of a
- * `TextInput` and a `DropdownPanel`.
- *
- * ## Request Methods
- *
- * At its most basic, the suggestions are a predefined array of `data`. However,
- * if the `remote` prop is specified, the AutoSuggest will `GET` that endpoint as the user types.
- * The following will be appended onto the query:
- *
- * ````
- * ?search={value}
- * ```
- *
- * The endpoint should then handle filtering the data, and returning an array of the results. If the
- * value of the input changes before the previous `GET` request has completed, that one is
- * cancelled and a new one started, with the updated search query.
- *
- * ## Data Formats
- *
- * The data returned should be one of two formats. The choice of format has an impact on how the
- * value is stored, and the label that is displayed.
- *
- * The most basic format is an array of strings. The value is stored as the string itself, and the
- * label displays the same string. This is most useful for situations where no relationships are
- * required on the backend, and the `AutoSuggest` is purely being used to assist the user in
- * defining a value.
- *
- * An example of this data would be:
- *
- * ```
- * ['apple', 'banana', 'carrot']
- * ```
- *
- * The second format is an array of objects. The value is stored as the `id` of the object, and the
- * label displays the `name` of the object. This is most useful for situations where a relationship
- * is required on the backend, and the `AutoSuggest` is being used to assist the user in defining
- * a value. With this format, the `AutoSuggest` works more like a `Dropdown`.
- *
- * For example:
- *
- * ```
- * [{ id: 1, name: 'apple' }, { id: 2, name: 'banana' }, { id: 3, name: 'carrot' }]
- * ```
- */
-declare const AutoSuggest: React.FunctionComponent<AutoSuggestProps>;
-export default AutoSuggest;
+import React from 'react';
+import PropTypes from 'prop-types';
+import type { DropdownItem } from '../../core/DropdownPanel';
+import type { InputProps } from '../../utility/interfaces';
+export interface AutoSuggestProps extends InputProps<string> {
+    /**
+     * An array of strings to filter for the suggestions. If a `remote` prop is specified, this is
+     * ignored.
+     */
+    data?: (DropdownItem | string)[] | null;
+    /** The URL for the endpoint that will return the suggestions */
+    remote?: string | null;
+}
+/**
+ * As a user types, suggestions based on they've typed are displayed in a panel below. When a user
+ * clicks a suggestion, the value is updated. Under the hood, it is more or less a combination of a
+ * `TextInput` and a `DropdownPanel`.
+ *
+ * ## Request Methods
+ *
+ * At its most basic, the suggestions are a predefined array of `data`. However,
+ * if the `remote` prop is specified, the AutoSuggest will `GET` that endpoint as the user types.
+ * The following will be appended onto the query:
+ *
+ * ````
+ * ?search={value}
+ * ```
+ *
+ * The endpoint should then handle filtering the data, and returning an array of the results. If the
+ * value of the input changes before the previous `GET` request has completed, that one is
+ * cancelled and a new one started, with the updated search query.
+ *
+ * ## Data Formats
+ *
+ * The data returned should be one of two formats. The choice of format has an impact on how the
+ * value is stored, and the label that is displayed.
+ *
+ * The most basic format is an array of strings. The value is stored as the string itself, and the
+ * label displays the same string. This is most useful for situations where no relationships are
+ * required on the backend, and the `AutoSuggest` is purely being used to assist the user in
+ * defining a value.
+ *
+ * An example of this data would be:
+ *
+ * ```
+ * ['apple', 'banana', 'carrot']
+ * ```
+ *
+ * The second format is an array of objects. The value is stored as the `id` of the object, and the
+ * label displays the `name` of the object. This is most useful for situations where a relationship
+ * is required on the backend, and the `AutoSuggest` is being used to assist the user in defining
+ * a value. With this format, the `AutoSuggest` works more like a `Dropdown`.
+ *
+ * For example:
+ *
+ * ```
+ * [{ id: 1, name: 'apple' }, { id: 2, name: 'banana' }, { id: 3, name: 'carrot' }]
+ * ```
+ */
+declare function AutoSuggest({ data, name, remote, value, hasError, onChange, }: AutoSuggestProps): React.ReactElement;
+declare namespace AutoSuggest {
+    var propTypes: {
+        name: PropTypes.Validator<string>;
+        data: PropTypes.Requireable<NonNullable<NonNullable<string | NonNullable<PropTypes.InferProps<{
+            id: PropTypes.Validator<string>;
+            name: PropTypes.Validator<string>;
+        }>>>>[]>;
+        hasError: PropTypes.Requireable<boolean>;
+        remote: PropTypes.Requireable<string>;
+        value: PropTypes.Requireable<string>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+}
+export default AutoSuggest;

package/dist/components/AutoSuggest/index.js

@@ -0,0 +1,143 @@
+'use client';
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { useAccessiblePanel, useClickOutside } from '@sqrzro/hooks';
+import { ApiService } from '@sqrzro/utility';
+import ErrorMessage from '../../components/ErrorMessage';
+import TextInput from '../../components/TextInput';
+import DropdownPanel from '../../core/DropdownPanel';
+import InputPanel from '../../core/InputPanel';
+// Import styles from './AutoSuggest.module.css';
+const transformSuggestions = (data) => {
+    if (!data) {
+        return [];
+    }
+    return data.map((item) => (typeof item === 'object' ? item : { id: item, name: item }));
+};
+/**
+ * As a user types, suggestions based on they've typed are displayed in a panel below. When a user
+ * clicks a suggestion, the value is updated. Under the hood, it is more or less a combination of a
+ * `TextInput` and a `DropdownPanel`.
+ *
+ * ## Request Methods
+ *
+ * At its most basic, the suggestions are a predefined array of `data`. However,
+ * if the `remote` prop is specified, the AutoSuggest will `GET` that endpoint as the user types.
+ * The following will be appended onto the query:
+ *
+ * ````
+ * ?search={value}
+ * ```
+ *
+ * The endpoint should then handle filtering the data, and returning an array of the results. If the
+ * value of the input changes before the previous `GET` request has completed, that one is
+ * cancelled and a new one started, with the updated search query.
+ *
+ * ## Data Formats
+ *
+ * The data returned should be one of two formats. The choice of format has an impact on how the
+ * value is stored, and the label that is displayed.
+ *
+ * The most basic format is an array of strings. The value is stored as the string itself, and the
+ * label displays the same string. This is most useful for situations where no relationships are
+ * required on the backend, and the `AutoSuggest` is purely being used to assist the user in
+ * defining a value.
+ *
+ * An example of this data would be:
+ *
+ * ```
+ * ['apple', 'banana', 'carrot']
+ * ```
+ *
+ * The second format is an array of objects. The value is stored as the `id` of the object, and the
+ * label displays the `name` of the object. This is most useful for situations where a relationship
+ * is required on the backend, and the `AutoSuggest` is being used to assist the user in defining
+ * a value. With this format, the `AutoSuggest` works more like a `Dropdown`.
+ *
+ * For example:
+ *
+ * ```
+ * [{ id: 1, name: 'apple' }, { id: 2, name: 'banana' }, { id: 3, name: 'carrot' }]
+ * ```
+ */
+function AutoSuggest({ data, name, remote, value, hasError, onChange, }) {
+    const [suggestions, setSuggestions] = useState(null);
+    const [isOpen, setIsOpen, node] = useClickOutside({ shouldHandleEnterKey: true });
+    const [isError, setIsError] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);
+    const getLocalData = (search) => {
+        if (!data?.length) {
+            return;
+        }
+        const rgx = new RegExp(`^${search}.*`, 'iu');
+        const response = data.filter((item) => rgx.exec(typeof item === 'string' ? item : item.name));
+        setIsOpen(Boolean(response.length));
+        setSuggestions(response);
+    };
+    const getData = async (search) => {
+        if (!remote) {
+            getLocalData(search);
+            return;
+        }
+        setIsLoading(true);
+        try {
+            const response = await ApiService.get([remote, { search }], {
+                isCancellable: true,
+            });
+            setSuggestions(response.data);
+        }
+        catch (err) {
+            setIsError(true);
+        }
+        setIsLoading(false);
+        setIsOpen(true);
+    };
+    const handleChange = (event) => {
+        if (onChange) {
+            onChange(event);
+        }
+        if (!event.target.value) {
+            setIsOpen(false);
+            return;
+        }
+        void getData(event.target.value);
+    };
+    const handleSuggest = (item) => {
+        const simpleEvent = {
+            target: { name, value: item.id },
+        };
+        if (onChange) {
+            onChange(simpleEvent);
+        }
+        setIsOpen(false);
+    };
+    if (isError) {
+        return React.createElement(ErrorMessage, { isMini: true });
+    }
+    const transformed = transformSuggestions(suggestions);
+    const { handleKeyboard } = useAccessiblePanel({
+        data: transformed,
+        name,
+        onChange,
+        value,
+    });
+    return (React.createElement("div", { ref: node, className: "/*clsx(styles.root, isOpen && styles.rootOpen)*/" },
+        React.createElement(TextInput, { hasError: hasError, isAutocomplete: false, isLoading: isLoading, name: name, onChange: handleChange, onKeyDown: handleKeyboard, value: value }),
+        isOpen && suggestions && suggestions.length ? (React.createElement(InputPanel, { isScrollable: true },
+            React.createElement(DropdownPanel, { data: transformed, name: name, onChange: ({ item }) => handleSuggest(item), value: value }))) : null));
+}
+AutoSuggest.propTypes = {
+    name: PropTypes.string.isRequired,
+    data: PropTypes.arrayOf(PropTypes.oneOfType([
+        PropTypes.string.isRequired,
+        PropTypes.shape({
+            id: PropTypes.string.isRequired,
+            name: PropTypes.string.isRequired,
+        }).isRequired,
+    ]).isRequired),
+    hasError: PropTypes.bool,
+    remote: PropTypes.string,
+    value: PropTypes.string,
+    onChange: PropTypes.func,
+};
+export default AutoSuggest;

package/dist/components/Button/Button.stories.d.ts

@@ -0,0 +1,11 @@
+import type { ComponentMeta } from '@storybook/react';
+import Button from './index';
+declare const _default: ComponentMeta<typeof Button>;
+export default _default;
+export declare const Basic: any;
+export declare const Danger: any;
+export declare const Bordered: any;
+export declare const BorderedDanger: any;
+export declare const FullWidth: any;
+export declare const Disabled: any;
+export declare const Loading: any;

package/{src/components/Button/Button.story.tsx → dist/components/Button/Button.stories.js}

@@ -1,39 +1,41 @@
 import React from 'react';
-import type { Story } from '@storybook/react';
-
 import Button from './index';
-import type { ButtonProps } from './index';
-
 export default {
     title: 'Components/Button',
     component: Button,
 };
-
-const Template: Story<ButtonProps> = (props) => <Button {...props} />;
-
+const Template = (args) => (React.createElement(Button, { ...args }));
 export const Basic = Template.bind({});
-
 Basic.args = {
     children: 'Lorem Ipsum',
 };
-
 export const Danger = Template.bind({});
-
 Danger.args = {
     children: 'Lorem Ipsum',
     variant: 'danger',
 };
-
 export const Bordered = Template.bind({});
-
 Bordered.args = {
     children: 'Lorem Ipsum',
     variant: 'bordered',
 };
-
+export const BorderedDanger = Template.bind({});
+BorderedDanger.args = {
+    children: 'Lorem Ipsum',
+    variant: ['bordered', 'danger'],
+};
+export const FullWidth = Template.bind({});
+FullWidth.args = {
+    children: 'Lorem Ipsum',
+    isFullWidth: true,
+};
 export const Disabled = Template.bind({});
-
 Disabled.args = {
     children: 'Lorem Ipsum',
     isDisabled: true,
 };
+export const Loading = Template.bind({});
+Loading.args = {
+    children: 'Lorem Ipsum',
+    isLoading: true,
+};

package/dist/{types/components → components}/Button/index.d.ts

@@ -1,36 +1,49 @@
-import React from 'react';
-import type { ButtonVariant } from '../../utility/interfaces';
-export interface ButtonProps {
-    /** Probably the button text, but could be any HTML element or React component */
-    children: React.ReactNode;
-    /** If set to true, the Button will be greyed out and non-interactive */
-    isDisabled?: boolean | null;
-    isFullWidth?: boolean | null;
-    onClick?: React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement>;
-    /** If specified, the Button will be created as a Link element. */
-    to?: string;
-    /** The type of button. Button's with a type of `submit` will submit a parent form */
-    type?: 'button' | 'submit';
-    /** With the exception of `bordered` these variants correspond to the theme colours */
-    variant?: ButtonVariant | ButtonVariant[];
-}
-/**
- * Either a `Link` component or a `button` element, depending on whether a `to` prop is specified.
- *
- * As a `Link`, it provides navigation between pages, and as a `button` it will handle the
- * `onClick` function when clicked (if one is specified).
- *
- * ## to & onClick
- *
- * Although it is possible to omit both the `to` and `onClick` props, there will
- * be nearly zero situations where this would be useful. It is also possible to include both props.
- * This will create a `Link` component, and handle the `onClick` function before navigation.
- *
- * ## Styles
- *
- * The `Button` will stretch to the full width of its parent element. If you wish to have a smaller
- * width, you can wrap it in a `div`, and then wrap that `div` in a component with a flex property.
- * Components like `ListActions` and `ModalActions` do this for you.
- */
-declare const Button: React.FunctionComponent<ButtonProps>;
-export default Button;
+import React from 'react';
+import PropTypes from 'prop-types';
+import type { ButtonVariant } from '../../utility/interfaces';
+export interface ButtonProps {
+    /** Probably the button text, but could be any HTML element or React component */
+    children: React.ReactNode;
+    /** If set to true, the Button will be greyed out and non-interactive */
+    isDisabled?: boolean | null;
+    isFullWidth?: boolean | null;
+    isLoading?: boolean | null;
+    onClick?: React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement>;
+    /** If specified, the Button will be created as a Link element. */
+    to?: string;
+    /** The type of button. Button's with a type of `submit` will submit a parent form */
+    type?: 'button' | 'submit';
+    /** With the exception of `bordered` these variants correspond to the theme colours */
+    variant?: ButtonVariant | ButtonVariant[];
+}
+/**
+ * Either a `Link` component or a `button` element, depending on whether a `to` prop is specified.
+ *
+ * As a `Link`, it provides navigation between pages, and as a `button` it will handle the
+ * `onClick` function when clicked (if one is specified).
+ *
+ * ## to & onClick
+ *
+ * Although it is possible to omit both the `to` and `onClick` props, there will
+ * be nearly zero situations where this would be useful. It is also possible to include both props.
+ * This will create a `Link` component, and handle the `onClick` function before navigation.
+ *
+ * ## Styles
+ *
+ * The `Button` will stretch to the full width of its parent element. If you wish to have a smaller
+ * width, you can wrap it in a `div`, and then wrap that `div` in a component with a flex property.
+ * Components like `ListActions` and `ModalActions` do this for you.
+ */
+declare function Button({ to, children, type, variant, isDisabled, isFullWidth, isLoading, onClick, }: ButtonProps): React.ReactElement;
+declare namespace Button {
+    var propTypes: {
+        children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+        isDisabled: PropTypes.Requireable<boolean>;
+        isFullWidth: PropTypes.Requireable<boolean>;
+        to: PropTypes.Requireable<string>;
+        type: PropTypes.Requireable<string>;
+        variant: PropTypes.Requireable<NonNullable<NonNullable<ButtonVariant> | NonNullable<ButtonVariant>[] | null | undefined>>;
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+}
+export default Button;

package/dist/components/Button/index.js

@@ -0,0 +1,50 @@
+'use client';
+import React from 'react';
+import clsx from 'clsx';
+import PropTypes from 'prop-types';
+import Link from '../../components/Link';
+import Loader from '../../core/Loader';
+import useVariant from '../../hooks/useVariant';
+import { ButtonVariantPropType } from '../../utility/prop-types';
+/**
+ * Either a `Link` component or a `button` element, depending on whether a `to` prop is specified.
+ *
+ * As a `Link`, it provides navigation between pages, and as a `button` it will handle the
+ * `onClick` function when clicked (if one is specified).
+ *
+ * ## to & onClick
+ *
+ * Although it is possible to omit both the `to` and `onClick` props, there will
+ * be nearly zero situations where this would be useful. It is also possible to include both props.
+ * This will create a `Link` component, and handle the `onClick` function before navigation.
+ *
+ * ## Styles
+ *
+ * The `Button` will stretch to the full width of its parent element. If you wish to have a smaller
+ * width, you can wrap it in a `div`, and then wrap that `div` in a component with a flex property.
+ * Components like `ListActions` and `ModalActions` do this for you.
+ */
+function Button({ to, children, type, variant, isDisabled, isFullWidth, isLoading, onClick, }) {
+    const { applyVariantClassName } = useVariant(variant);
+    const className = clsx('text-white bg-blue-500 focus:ring-4 focus:outline-none focus:ring-cyan-300 dark:focus:ring-cyan-800 font-medium rounded-md text-sm px-5 py-2.5 text-center mr-2 mb-2', {
+        'opacity-30 pointer-events-none': isDisabled || isLoading,
+        'w-full': isFullWidth,
+    }, applyVariantClassName({ danger: 'bg-red-900' }));
+    if (to) {
+        return (React.createElement(Link, { className: className, onClick: onClick, to: to }, children));
+    }
+    return (React.createElement("button", { className: className, disabled: isDisabled || isLoading || false, onClick: onClick, type: type === 'submit' ? 'submit' : 'button' },
+        isLoading ? (React.createElement("div", { className: "absolute left-1/2 top-1/2 -translate-x-2/4 -translate-y-2/4" },
+            React.createElement(Loader, { isMini: true }))) : null,
+        children));
+}
+Button.propTypes = {
+    children: PropTypes.node.isRequired,
+    isDisabled: PropTypes.bool,
+    isFullWidth: PropTypes.bool,
+    to: PropTypes.string,
+    type: PropTypes.oneOf(['button', 'submit']),
+    variant: ButtonVariantPropType,
+    onClick: PropTypes.func,
+};
+export default Button;

package/dist/components/CalendarInput/index.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import type { InputProps } from '../../utility/interfaces';
+export interface CalendarInputProps extends InputProps<string> {
+    disabledDates?: string[] | ((date: string) => boolean);
+    isOptional?: boolean;
+    isPanelOnly?: boolean;
+    isRange?: boolean;
+}
+declare function CalendarInput({ disabledDates, hasError, isDisabled, isOptional, isPanelOnly, isRange, name, value, onChange, }: CalendarInputProps): React.ReactElement;
+declare namespace CalendarInput {
+    var propTypes: {
+        name: PropTypes.Validator<string>;
+        disabledDates: PropTypes.Requireable<NonNullable<string[] | ((...args: any[]) => any) | null | undefined>>;
+        hasError: PropTypes.Requireable<boolean>;
+        isDisabled: PropTypes.Requireable<boolean>;
+        isOptional: PropTypes.Requireable<boolean>;
+        isPanelOnly: PropTypes.Requireable<boolean>;
+        isRange: PropTypes.Requireable<boolean>;
+        value: PropTypes.Requireable<string>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+}
+export default CalendarInput;

package/dist/components/CalendarInput/index.js

@@ -0,0 +1,54 @@
+'use client';
+import React from 'react';
+import PropTypes from 'prop-types';
+import FormatService from '../../services/FormatService';
+import Calendar from '../../core/Calendar';
+import InputPanel from '../../core/InputPanel';
+import StaticTextInput from '../../core/StaticTextInput';
+import { useClickOutside } from '@sqrzro/hooks';
+const formatLabel = (value, isRange) => {
+    if (!value || typeof value !== 'string') {
+        return '';
+    }
+    if (!isRange) {
+        return FormatService.date(value);
+    }
+    const splitValues = value.split(',');
+    if (splitValues[0] === splitValues[1]) {
+        return FormatService.date(splitValues[0]);
+    }
+    return splitValues.map((item) => FormatService.date(item)).join(' - ');
+};
+function CalendarInput({ disabledDates, hasError, isDisabled, isOptional, isPanelOnly, isRange, name, value, onChange, }) {
+    const [isOpen, setIsOpen, node] = useClickOutside();
+    const toggleIsOpen = () => setIsOpen(!isOpen);
+    const handleChange = (event) => {
+        if (onChange) {
+            onChange(event);
+        }
+        setIsOpen(false);
+    };
+    const label = formatLabel(value, isRange);
+    if (isPanelOnly) {
+        return (React.createElement(Calendar, { disabledDates: disabledDates, isRange: isRange, name: name, onChange: handleChange, value: value || '' }));
+    }
+    return (React.createElement("div", { ref: node, className: "/*clsx(styles.root, isOpen && styles.rootIsOpen)*/" },
+        React.createElement(StaticTextInput, { hasError: hasError, icon: "calendar", isDisabled: isDisabled, isOptional: isOptional, label: label, name: name, onChange: handleChange, onClick: toggleIsOpen, value: value || '' }),
+        isOpen && !isDisabled ? (React.createElement(InputPanel, null,
+            React.createElement(Calendar, { disabledDates: disabledDates, isRange: isRange, name: name, onChange: handleChange, value: value || '' }))) : null));
+}
+CalendarInput.propTypes = {
+    name: PropTypes.string.isRequired,
+    disabledDates: PropTypes.oneOfType([
+        PropTypes.arrayOf(PropTypes.string.isRequired),
+        PropTypes.func,
+    ]),
+    hasError: PropTypes.bool,
+    isDisabled: PropTypes.bool,
+    isOptional: PropTypes.bool,
+    isPanelOnly: PropTypes.bool,
+    isRange: PropTypes.bool,
+    value: PropTypes.string,
+    onChange: PropTypes.func,
+};
+export default CalendarInput;

package/dist/{types/components → components}/CheckboxList/index.d.ts

@@ -1,17 +1,17 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import type { ChkRadDataItem } from '../../core/ChkRadList';
-import type { InputProps } from '../../utility/interfaces';
-interface CheckboxListProps extends InputProps<string[]> {
-    columns?: number;
-    data: ChkRadDataItem[];
-}
-declare const CheckboxList: {
-    ({ name, onChange, value, ...props }: CheckboxListProps): React.ReactElement;
-    propTypes: {
-        name: PropTypes.Validator<string>;
-        value: PropTypes.Requireable<string[]>;
-        onChange: PropTypes.Requireable<(...args: any[]) => any>;
-    };
-};
-export default CheckboxList;
+import React from 'react';
+import PropTypes from 'prop-types';
+import type { ChkRadDataItem } from '../../core/ChkRadList';
+import type { InputProps } from '../../utility/interfaces';
+interface CheckboxListProps extends InputProps<string[]> {
+    columns?: number;
+    data: ChkRadDataItem[];
+}
+declare function CheckboxList({ name, onChange, value, ...props }: CheckboxListProps): React.ReactElement;
+declare namespace CheckboxList {
+    var propTypes: {
+        name: PropTypes.Validator<string>;
+        value: PropTypes.Requireable<string[]>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+}
+export default CheckboxList;

package/dist/components/CheckboxList/index.js

@@ -0,0 +1,25 @@
+'use client';
+import React from 'react';
+import PropTypes from 'prop-types';
+import { toggleArrayItem } from '@sqrzro/utility';
+import ChkRadList from '../../core/ChkRadList';
+function CheckboxList({ name, onChange, value, ...props }) {
+    const handleChange = (event) => {
+        if (!onChange) {
+            return;
+        }
+        const newArray = toggleArrayItem(value || [], event.target.value);
+        const simpleEvent = {
+            item: event.item,
+            target: { name, value: newArray },
+        };
+        onChange(simpleEvent);
+    };
+    return (React.createElement(ChkRadList, { ...props, name: `${name}[]`, onChange: handleChange, type: "checkbox", value: value }));
+}
+CheckboxList.propTypes = {
+    name: PropTypes.string.isRequired,
+    value: PropTypes.arrayOf(PropTypes.string.isRequired),
+    onChange: PropTypes.func,
+};
+export default CheckboxList;

package/dist/components/CodeInput/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { InputProps } from '../../utility/interfaces';
+interface CodeInputProps extends InputProps<string> {
+    isAutoFocus?: boolean;
+    onFinalChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    size?: number;
+}
+declare function CodeInput({ hasError, id, isAutoFocus, isDisabled, name, onChange, onFinalChange, size, value, }: CodeInputProps): React.ReactElement;
+export default CodeInput;