@darajs/ui-components 0.4.8

package/dist/multiselect/multiselect.js

@@ -0,0 +1,231 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+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 { autoUpdate, flip, shift, useFloating, useInteractions, useRole } from '@floating-ui/react';
+import { useCombobox, useMultipleSelection } from 'downshift';
+import { useCallback, useMemo, useState } from 'react';
+import ReactDOM from 'react-dom';
+import styled from '@darajs/styled-components';
+import { Cross } from '@darajs/ui-icons';
+import ChevronButton from '../shared/chevron-button';
+import DropdownList from '../shared/dropdown-list';
+import Tooltip from '../tooltip/tooltip';
+import { matchWidthToReference } from '../utils';
+import { syncKbdHighlightIdx } from '../utils/syncKbdHighlightIdx';
+const { stateChangeTypes } = useCombobox;
+const tagHeight = 2;
+const tagTopMargin = 0.5;
+const Wrapper = styled.div `
+    display: inline-flex;
+    ${(props) => {
+    if (props.isDisabled) {
+        return `
+                cursor: not-allowed;
+            `;
+    }
+}}
+
+    width: 100%;
+    max-width: ${(props) => props.maxWidth};
+    max-height: ${(props) => props.maxRows * (tagHeight + tagTopMargin)}rem;
+
+    border-radius: ${(props) => (props.isOpen ? '0.25rem 0.25rem 0rem 0rem' : '0.25rem')};
+`;
+const InputWrapper = styled.div `
+    display: flex;
+    flex: 1 1 auto;
+    align-items: center;
+    justify-content: space-between;
+
+    width: 100%;
+    min-width: 10rem;
+    min-height: 2.5rem;
+    margin-right: 0.25rem;
+    padding: 0.25rem 0.5rem 0.25rem 1rem;
+
+    color: ${(props) => (props.isDisabled ? props.theme.colors.grey2 : props.theme.colors.text)};
+
+    background-color: ${(props) => props.theme.colors.grey1};
+    border: none;
+    border-radius: ${(props) => (props.isOpen ? '0.25rem 0.25rem 0rem 0rem' : '0.25rem')};
+
+    :hover {
+        background-color: ${(props) => (props.isDisabled ? props.theme.colors.grey1 : props.theme.colors.grey2)};
+    }
+
+    svg {
+        height: 0.8rem;
+    }
+
+    ${(props) => {
+    if (props.isDisabled) {
+        return `
+                border: 1px solid ${props.theme.colors.grey1};
+
+                svg {
+                    color: ${props.theme.colors.grey2};
+                    cursor: not-allowed;
+                }
+            `;
+    }
+    if (props.isErrored) {
+        return `border: 1px solid ${props.theme.colors.error};`;
+    }
+    return `
+            border: 1px solid ${props.isOpen ? props.theme.colors.grey3 : props.theme.colors.grey1};
+            :hover {
+                border: 1px solid ${props.theme.colors.grey3};
+
+            }
+        `;
+}}
+`;
+const Input = styled.input `
+    overflow: hidden;
+    flex: 1 1 auto;
+
+    margin-right: 0.5rem;
+    padding: 0;
+
+    font-size: ${(props) => (props.size ? `${props.size}rem` : props.theme.font.size)};
+    font-weight: 300;
+    color: ${(props) => props.theme.colors.grey6};
+    text-align: left;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    background-color: transparent;
+    border: none;
+    outline: 0;
+
+    :disabled {
+        cursor: not-allowed;
+    }
+`;
+const TagWrapper = styled.div `
+    overflow: auto;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    align-items: center;
+
+    width: 100%;
+    height: 100%;
+    max-height: ${(props) => props.maxRows * (tagHeight + tagTopMargin) - 0.25}rem;
+`;
+const Tag = styled.span `
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+
+    height: ${tagHeight}rem;
+    padding: 0 0.75rem;
+
+    font-size: 0.875rem;
+    color: ${(props) => (props.disabled ? props.theme.colors.grey3 : props.theme.colors.text)};
+
+    background-color: ${(props) => (props.disabled ? props.theme.colors.grey3 : props.theme.colors.blue3)};
+    border: 1px solid ${(props) => props.theme.colors.primary};
+    border-radius: 1rem;
+
+    svg {
+        width: 0.85rem;
+        height: 0.85rem;
+        margin-left: 0.25rem;
+        color: ${(props) => (props.disabled ? props.theme.colors.grey3 : props.theme.colors.text)};
+
+        :hover {
+            color: ${(props) => (props.disabled ? props.theme.colors.grey3 : props.theme.colors.primary)};
+        }
+    }
+`;
+const TagText = styled.span `
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+`;
+/**
+ * A multiselect select combobox component, accepts a list of items to select from and an onSelect handler to listen for
+ * changes. Renders currently selected items as list of tags which have a cross for removing them. Component will expand
+ * vertically to fit all selected items.
+ *
+ * @param {MultiSelectProps} props - the component props
+ */
+function MultiSelect(_a) {
+    var _b, _c;
+    var { maxWidth = '100%', maxRows = 3 } = _a, props = __rest(_a, ["maxWidth", "maxRows"]);
+    const [inputValue, setInputValue] = useState('');
+    const { getSelectedItemProps, getDropdownProps, addSelectedItem, removeSelectedItem, selectedItems } = useMultipleSelection(Object.assign({ initialSelectedItems: (_b = props.initialValue) !== null && _b !== void 0 ? _b : [], onSelectedItemsChange: (changes) => {
+            if (props.onSelect) {
+                props.onSelect(changes.selectedItems);
+            }
+        } }, ('selectedItems' in props && { selectedItems: (_c = props.selectedItems) !== null && _c !== void 0 ? _c : [] })));
+    const onTermChange = useCallback((term) => {
+        setInputValue(term);
+        if (props.onTermChange) {
+            props.onTermChange(term);
+        }
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [props.onTermChange]);
+    // If there is a term change function passed in then don't filter locally
+    const filteredItems = useMemo(() => props.onTermChange ?
+        props.items
+        : props.items.filter((item) => { var _a; return !selectedItems.includes(item) && ((_a = item.label) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(inputValue.toLowerCase())); }), [props.onTermChange, props.items, selectedItems, inputValue]);
+    const [kbdHighlightIdx, setKbdHighlightIdx] = useState();
+    const { isOpen, getMenuProps, getInputProps, getItemProps, getToggleButtonProps } = useCombobox(Object.assign(Object.assign({ defaultHighlightedIndex: -1, initialIsOpen: props.initialIsOpen, inputValue, itemToString: (item) => (item === null || item === void 0 ? void 0 : item.label) || '', items: filteredItems, onStateChange: ({ inputValue: internalInputVal, selectedItem, type }) => {
+            if (type === stateChangeTypes.InputChange) {
+                onTermChange(internalInputVal);
+            }
+            if ([stateChangeTypes.InputKeyDownEnter, stateChangeTypes.ItemClick, stateChangeTypes.InputBlur].includes(type)) {
+                if (selectedItem) {
+                    onTermChange('');
+                    addSelectedItem(selectedItem);
+                }
+            }
+        } }, syncKbdHighlightIdx(setKbdHighlightIdx)), { selectedItem: null, stateReducer: (state, { changes, type }) => {
+            if (type === stateChangeTypes.ItemClick || type === stateChangeTypes.InputKeyDownEnter) {
+                return Object.assign(Object.assign({}, changes), { isOpen: true });
+            }
+            return changes;
+        } }));
+    const { refs, floatingStyles, context } = useFloating({
+        open: isOpen,
+        middleware: [flip(), shift(), matchWidthToReference()],
+        whileElementsMounted: isOpen ? autoUpdate : undefined,
+    });
+    const role = useRole(context, { role: 'listbox' });
+    const { getReferenceProps, getFloatingProps } = useInteractions([role]);
+    return (_jsxs(Wrapper, { className: props.className, isDisabled: props.disabled, isOpen: isOpen, maxRows: maxRows, maxWidth: maxWidth, style: props.style, children: [_jsx(Tooltip, { content: props.errorMsg, disabled: !props.errorMsg, styling: "error", children: _jsxs(InputWrapper, { isDisabled: props.disabled, isOpen: isOpen, ref: refs.setReference, children: [_jsxs(TagWrapper, { maxRows: maxRows, children: [selectedItems.map((selectedItem, index) => (_jsxs(Tag, Object.assign({ disabled: props.disabled }, getSelectedItemProps({ index, selectedItem }), { children: [_jsx(TagText, { children: selectedItem.label }), _jsx(Cross, { asButton: true, onClick: (e) => {
+                                                // See https://github.com/downshift-js/downshift/issues/1188
+                                                e.stopPropagation();
+                                                return removeSelectedItem(selectedItem);
+                                            } })] }), selectedItem.value))), _jsx(Input, Object.assign({}, getInputProps(getDropdownProps({ preventKeyAction: isOpen })), getReferenceProps(), { disabled: props.disabled, placeholder: props.placeholder, size: props.size, style: { flex: '1 1 5ch' } }))] }), _jsx(ChevronButton, { disabled: props.disabled, isOpen: isOpen, getToggleButtonProps: getToggleButtonProps })] }) }), ReactDOM.createPortal(_jsx(DropdownList, { items: filteredItems, getItemProps: getItemProps, getFloatingProps: getFloatingProps, style: floatingStyles, isOpen: isOpen, getMenuProps: getMenuProps, size: props.size, ref: refs.setFloating, kbdHighlightIdx: kbdHighlightIdx }), document.body)] }));
+}
+export default MultiSelect;
+//# sourceMappingURL=multiselect.js.map

package/dist/multiselect/multiselect.js.map

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

package/dist/numeric-input/input-stepper.d.ts

@@ -0,0 +1,33 @@
+/**
+ * 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 { FunctionComponent } from 'react';
+interface InputStepperProps {
+    /** property that disables the stepper */
+    disabled: boolean;
+    /** callback that determines the logic for increasing or decreasing input value */
+    step: (value: number) => void;
+    /** Optional property to set how many steps the stepper should take */
+    stepSkip?: number;
+}
+/**
+ * A simple stepper component that can be added to an input component to increase or decrease its value
+ *
+ * @param props the component props
+ */
+declare const InputStepper: FunctionComponent<InputStepperProps>;
+export default InputStepper;
+//# sourceMappingURL=input-stepper.d.ts.map

package/dist/numeric-input/input-stepper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-stepper.d.ts","sourceRoot":"","sources":["../../src/numeric-input/input-stepper.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AACH,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAkD1C,UAAU,iBAAiB;IACvB,yCAAyC;IACzC,QAAQ,EAAE,OAAO,CAAC;IAClB,kFAAkF;IAClF,IAAI,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,sEAAsE;IACtE,QAAQ,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;;;GAIG;AAEH,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,CAgBtD,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/numeric-input/input-stepper.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from '@darajs/styled-components';
+import { ChevronDown, ChevronUp } from '@darajs/ui-icons';
+import Button from '../button/button';
+const StepperWrapper = styled.div `
+    cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
+
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+
+    box-sizing: border-box;
+    padding: 0.25rem 0;
+
+    border-radius: 0 0.25rem 0.25rem 0;
+`;
+const StepperButton = styled(Button) `
+    min-width: 0.75rem;
+    height: max-content;
+    padding: 0;
+    background-color: transparent !important;
+
+    svg {
+        cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
+        width: 0.75rem;
+        height: 0.75rem;
+        color: ${(props) => (props.disabled ? props.theme.colors.grey3 : props.theme.colors.grey4)};
+    }
+
+    :hover:not(:disabled) {
+        svg {
+            color: ${(props) => props.theme.colors.grey5};
+        }
+    }
+
+    :active:not(:disabled) {
+        svg {
+            transform: scale(0.75);
+        }
+    }
+`;
+/**
+ * A simple stepper component that can be added to an input component to increase or decrease its value
+ *
+ * @param props the component props
+ */
+const InputStepper = ({ disabled, step, stepSkip }) => {
+    const amountToStep = Math.abs(stepSkip !== null && stepSkip !== void 0 ? stepSkip : 1);
+    const stepUp = () => step(amountToStep);
+    const stepDown = () => step(amountToStep * -1);
+    return (_jsxs(StepperWrapper, { disabled: disabled, children: [_jsx(StepperButton, { disabled: disabled, onClick: stepUp, styling: "ghost", tabIndex: -1, children: _jsx(ChevronUp, {}) }), _jsx(StepperButton, { disabled: disabled, onClick: stepDown, styling: "ghost", tabIndex: -1, children: _jsx(ChevronDown, {}) })] }));
+};
+export default InputStepper;
+//# sourceMappingURL=input-stepper.js.map

package/dist/numeric-input/input-stepper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-stepper.js","sourceRoot":"","sources":["../../src/numeric-input/input-stepper.tsx"],"names":[],"mappings":";AAkBA,OAAO,MAAM,MAAM,2BAA2B,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAE1D,OAAO,MAAM,MAAM,kBAAkB,CAAC;AAMtC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAqB;cACxC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC;;;;;;;;;;CAUpE,CAAC;AAEF,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA;;;;;;;kBAOlB,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC;;;iBAGxD,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;;;;;qBAK7E,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK;;;;;;;;;CASvD,CAAC;AAWF;;;;GAIG;AAEH,MAAM,YAAY,GAAyC,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE;IACxF,MAAM,YAAY,GAAW,IAAI,CAAC,GAAG,CAAC,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,CAAC,CAAC,CAAC;IACrD,MAAM,MAAM,GAAG,GAAS,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IAC9C,MAAM,QAAQ,GAAG,GAAS,EAAE,CAAC,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC,CAAC;IAErD,OAAO,CACH,MAAC,cAAc,IAAC,QAAQ,EAAE,QAAQ,aAC9B,KAAC,aAAa,IAAC,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAC,OAAO,EAAC,QAAQ,EAAE,CAAC,CAAC,YAC5E,KAAC,SAAS,KAAG,GACD,EAEhB,KAAC,aAAa,IAAC,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAC,OAAO,EAAC,QAAQ,EAAE,CAAC,CAAC,YAC9E,KAAC,WAAW,KAAG,GACH,IACH,CACpB,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/numeric-input/numeric-input.d.ts

@@ -0,0 +1,42 @@
+/**
+ * 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 * as React from 'react';
+import { InteractiveComponentProps } from '../types';
+export interface NumericInputProps extends InteractiveComponentProps<number>, Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'initialValue'> {
+    /** An optional parameter to restrict the field to just integers */
+    integerOnly?: boolean;
+    /** An optional property to set the maximum accepted value */
+    maxValue?: number;
+    /** An optional property to set the minimum accepted value */
+    minValue?: number;
+    /** An optional onChange handler for listening to changes in the input */
+    onChange?: (value: number, e?: React.SyntheticEvent<HTMLInputElement>) => void | Promise<void>;
+    /** An optional event listener for complete events (enter presses) */
+    onComplete?: () => void | Promise<void>;
+    /** An optional property to set how many steps the stepper should take */
+    stepSkip?: number;
+    /** An optional property to show input stepper control */
+    stepper?: boolean;
+}
+/**
+ * NumericInput is a wrapper around the input component that restricts the value to be numeric, either float or integer.
+ *
+ * @param props the component props
+ */
+declare const NumericInput: React.ForwardRefExoticComponent<NumericInputProps & React.RefAttributes<HTMLInputElement>>;
+export default NumericInput;
+//# sourceMappingURL=numeric-input.d.ts.map

package/dist/numeric-input/numeric-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"numeric-input.d.ts","sourceRoot":"","sources":["../../src/numeric-input/numeric-input.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,UAAU,CAAC;AAwHrD,MAAM,WAAW,iBACb,SAAQ,yBAAyB,CAAC,MAAM,CAAC,EAErC,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,UAAU,GAAG,OAAO,GAAG,cAAc,CAAC;IAC5F,mEAAmE;IACnE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,yEAAyE;IACzE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/F,qEAAqE;IACrE,UAAU,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACxC,yEAAyE;IACzE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,yDAAyD;IACzD,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;;GAIG;AACH,QAAA,MAAM,YAAY,4FAwHjB,CAAC;AAGF,eAAe,YAAY,CAAC"}

package/dist/numeric-input/numeric-input.js

@@ -0,0 +1,234 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+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 * as React from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import styled from '@darajs/styled-components';
+import { CONTROL_KEYS, Key } from '../constants';
+import Input, { ErrorMessage } from '../input/input';
+import InputStepper from './input-stepper';
+const InputWrapper = styled.div `
+    display: flex;
+    flex-direction: row;
+
+    width: 22ch;
+    height: 2.5rem;
+    padding-right: 0.5rem;
+
+    background-color: ${(props) => props.theme.colors.grey1};
+    border: 1px solid ${(props) => (props.errorMsg ? props.theme.colors.error : props.theme.colors.grey1)};
+    border-radius: 0.25rem;
+
+    input {
+        height: calc(2.5rem - 2px);
+        border: none;
+        border-radius: 0.25rem;
+    }
+
+    div {
+        border: none;
+        border-radius: 0.25rem;
+
+        div {
+            border: none;
+            border-radius: 0.25rem;
+        }
+    }
+
+    :hover {
+        background-color: ${(props) => (props.disabled ? props.theme.colors.grey1 : props.theme.colors.grey2)};
+        /* stylelint-disable -- fails to parse the statement */
+        border: 1px solid
+            ${(props) => {
+    if (props.disabled) {
+        return props.theme.colors.grey1;
+    }
+    if (props.errorMsg) {
+        return props.theme.colors.error;
+    }
+    return props.theme.colors.grey2;
+}};
+        /* stylelint-enable */
+
+        input {
+            background-color: ${(props) => (props.disabled ? props.theme.colors.grey1 : props.theme.colors.grey2)};
+        }
+
+        div {
+            background-color: ${(props) => (props.disabled ? props.theme.colors.grey1 : props.theme.colors.grey2)};
+        }
+    }
+
+    :focus-within:not(:disabled) {
+        border: 1px solid ${(props) => (props.errorMsg ? props.theme.colors.error : props.theme.colors.grey3)};
+
+        input {
+            border: none;
+        }
+    }
+
+    /* Fix: Overrides the 22ch default width of the nested regular input */
+    > div:first-child {
+        width: 100%;
+        height: auto;
+    }
+`;
+/**
+ * A numeric characters only filter for the input component, can be applied to create a numeric input that prevents
+ * invalid entries rather than just erroring them
+ *
+ * @param integerOnly whether to limit the input to only accept integers
+ */
+const numericFilter = (integerOnly) => (e) => {
+    // Check for numbers
+    if (parseInt(e.key) || parseInt(e.key) === 0) {
+        return true;
+    }
+    // Check control keys
+    if (CONTROL_KEYS.includes(e.key)) {
+        return true;
+    }
+    const target = e.target;
+    // Check for decimal point and make sure there is only one
+    if (!integerOnly && e.key === Key.PERIOD && !target.value.includes(Key.PERIOD)) {
+        return true;
+    }
+    // Check for minus and make sure it's at the start
+    if (e.key === Key.MINUS && !e.shiftKey && target.selectionStart === 0 && !target.value.includes(Key.MINUS)) {
+        return true;
+    }
+    return false;
+};
+/**
+ * A helper function to get the initial value of the input, either from the value or the initialValue props
+ *
+ * @param value the value prop
+ * @param initialValue the initialValue prop
+ * @returns the initial value of the numeric input
+ */
+const getInitialValue = (value, initialValue) => {
+    if (Number.isFinite(value)) {
+        return String(value);
+    }
+    if (Number.isFinite(initialValue)) {
+        return String(initialValue);
+    }
+    return '';
+};
+/**
+ * NumericInput is a wrapper around the input component that restricts the value to be numeric, either float or integer.
+ *
+ * @param props the component props
+ */
+const NumericInput = React.forwardRef((_a, ref) => {
+    var { value, onChange, initialValue } = _a, props = __rest(_a, ["value", "onChange", "initialValue"]);
+    const keydownFilter = useMemo(() => numericFilter(props.integerOnly), [props.integerOnly]);
+    const [input, setInput] = useState(getInitialValue(value, initialValue));
+    const step = (v) => {
+        if (!input || input === '-') {
+            return;
+        }
+        const isFloat = input.includes('.');
+        const parsedValue = isFloat ? parseFloat(input) : parseInt(input);
+        let nextValueNumber = parsedValue + v;
+        let nextValueStr = String(nextValueNumber);
+        if (isFloat) {
+            const decimals = input.split('.')[1];
+            if (decimals) {
+                nextValueStr = (parsedValue + v / Math.pow(10, decimals.length)).toFixed(decimals.length);
+                nextValueNumber = parseFloat(nextValueStr);
+            }
+        }
+        // controlled
+        if (value !== undefined) {
+            onChange === null || onChange === void 0 ? void 0 : onChange(nextValueNumber, {
+                target: {
+                    value: nextValueStr,
+                },
+            });
+            // uncontrolled
+        }
+        else {
+            setInput(nextValueStr);
+        }
+    };
+    const onKeyDown = (e) => {
+        var _a, _b;
+        // run the keydown event handler if it exists
+        (_a = props.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(props, e);
+        if (!props.stepper) {
+            return;
+        }
+        const stepSkip = Math.abs((_b = props.stepSkip) !== null && _b !== void 0 ? _b : 1);
+        if (e.key === Key.UP) {
+            step(stepSkip);
+        }
+        if (e.key === Key.DOWN) {
+            step(stepSkip * -1);
+        }
+    };
+    const handleOnChange = useCallback((v, e) => {
+        const parsed = props.integerOnly ? parseInt(v) : parseFloat(v);
+        // uncontrolled component
+        if (value === undefined) {
+            setInput(v);
+            onChange === null || onChange === void 0 ? void 0 : onChange(parsed, e);
+            return;
+        }
+        // In controlled mode, we need to take over the input updates whenever the value is not a valid number
+        // This way onchange is only called with valid number updates and not when user is still entering a valid number
+        // if the value ends with a period, don't call onChange as it's not yet a valid number
+        if (v.endsWith('.')) {
+            setInput(v);
+            return;
+        }
+        // if the value is decimal and ends in a zero the user has also not changed the number/finished typing
+        if (v.includes('.') && v.endsWith('0')) {
+            setInput(v);
+            return;
+        }
+        // if the user is typing a negative number, don't call onChange until they have added the number
+        if (v === '-') {
+            setInput(v);
+            return;
+        }
+        // When the input ends with . and the user backspaces, we should update the input as the value won't have changed
+        if (input.endsWith('.')) {
+            setInput(v);
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(parsed, e);
+    }, [props.integerOnly, value, onChange, input]);
+    useEffect(() => {
+        setInput(getInitialValue(value, initialValue));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [value]);
+    return (_jsxs("div", { children: [_jsxs(InputWrapper, { disabled: props.disabled, errorMsg: props.errorMsg, stepper: props.stepper, style: props.style, children: [_jsx(Input, Object.assign({}, props, { keydownFilter: keydownFilter, onChange: handleOnChange, onKeyDown: onKeyDown, ref: ref, value: input })), props.stepper && _jsx(InputStepper, { disabled: props.disabled, step: step, stepSkip: props.stepSkip })] }), props.errorMsg && _jsx(ErrorMessage, { children: props.errorMsg })] }));
+});
+Input.displayName = 'NumericInput';
+export default NumericInput;
+//# sourceMappingURL=numeric-input.js.map

package/dist/numeric-input/numeric-input.js.map

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

package/dist/progress-bar/progress-bar.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+export interface ProgressBarProps {
+    /** Standard react className property */
+    className?: string;
+    /** Optional color prop for the progress bar, should be a hex code. Pass an array for multiple values */
+    color?: string | string[];
+    /** Optional label for the progress bar. If not provided, the progress will be displayed as a percentage. Pass an array for multiple values */
+    label?: React.ReactNode | React.ReactNode[];
+    /** The current progress as a percentage. Pass an array for multiple values */
+    progress: number | number[];
+    /** Set the progress bar to view as a smaller strip with no label */
+    small?: boolean;
+    /** Native react style property, can be used to fine tune the button appearance */
+    style?: React.CSSProperties;
+}
+/**
+ * A simple progress bar component, that displays the current progress to 100% as a bar with a small label
+ *
+ * @param props see interface for details
+ */
+declare function ProgressBar(props: ProgressBarProps): JSX.Element;
+export default ProgressBar;
+//# sourceMappingURL=progress-bar.d.ts.map