@darajs/ui-components 1.0.0-a.1

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

@@ -0,0 +1,199 @@
+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) => {
+    if (props.errorMsg)
+        return props.theme.colors.error;
+    return props.theme.colors.grey1;
+}};
+    border-radius: 0.25rem;
+
+    :focus-within:not(:disabled) {
+        border: 1px solid
+            ${(props) => {
+    if (props.errorMsg)
+        return props.theme.colors.error;
+    return props.theme.colors.grey3;
+}};
+
+        input {
+            border: none;
+        }
+    }
+
+    input {
+        width: calc(100% - 1.25rem);
+        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)};
+        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;
+}};
+
+        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)};
+        }
+    }
+`;
+/**
+ * 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((props, ref) => {
+    const keydownFilter = useMemo(() => numericFilter(props.integerOnly), [props.integerOnly]);
+    const [input, setInput] = useState(getInitialValue(props.value, props.initialValue));
+    const step = (value) => {
+        var _a;
+        if (!input || input === '-')
+            return;
+        const isFloat = input.includes('.');
+        const parsedValue = isFloat ? parseFloat(input) : parseInt(input);
+        let nextValueNumber = parsedValue + value;
+        let nextValueStr = String(nextValueNumber);
+        if (isFloat) {
+            const decimals = input.split('.')[1];
+            if (decimals) {
+                nextValueStr = (parsedValue + value / Math.pow(10, decimals.length)).toFixed(decimals.length);
+                nextValueNumber = parseFloat(nextValueStr);
+            }
+        }
+        // controlled
+        if (props.value !== undefined) {
+            (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, nextValueNumber, {
+                target: {
+                    value: nextValueStr,
+                },
+            });
+            // uncontrolled
+        }
+        else {
+            setInput(nextValueStr);
+        }
+    };
+    const onKeyDown = (e) => {
+        var _a;
+        if (!props.stepper)
+            return;
+        const stepSkip = Math.abs((_a = props.stepSkip) !== null && _a !== void 0 ? _a : 1);
+        if (e.key === Key.UP)
+            step(stepSkip);
+        if (e.key === Key.DOWN)
+            step(stepSkip * -1);
+    };
+    const onChange = useCallback((value, e) => {
+        var _a, _b;
+        const parsed = props.integerOnly ? parseInt(value) : parseFloat(value);
+        // uncontrolled component
+        if (props.value === undefined) {
+            setInput(value);
+            (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, parsed, e);
+            return;
+        }
+        // if the value ends with a period, don't call onChange as it's not yet a valid number
+        if (value.endsWith('.')) {
+            setInput(value);
+            return;
+        }
+        (_b = props.onChange) === null || _b === void 0 ? void 0 : _b.call(props, parsed, e);
+    }, [props.integerOnly, props.value]);
+    useEffect(() => {
+        setInput(getInitialValue(props.value, props.initialValue));
+    }, [props.value]);
+    return (_jsxs("div", { children: [_jsxs(InputWrapper, { disabled: props.disabled, errorMsg: props.errorMsg, stepper: props.stepper, children: [_jsx(Input, { autoFocus: props.autoFocus, className: props.className, disabled: props.disabled, keydownFilter: keydownFilter, maxValue: props.maxValue, minValue: props.minValue, onBlur: props.onBlur, onChange: onChange, onComplete: props.onComplete, onKeyDown: onKeyDown, placeholder: props.placeholder, ref: ref, style: props.style, 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

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

@@ -0,0 +1 @@
+{"version":3,"file":"progress-bar.d.ts","sourceRoot":"","sources":["../../src/progress-bar/progress-bar.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA4E/B,MAAM,WAAW,gBAAgB;IAC7B,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wGAAwG;IACxG,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC1B,8IAA8I;IAC9I,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAC;IAC5C,8EAA8E;IAC9E,QAAQ,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC5B,oEAAoE;IACpE,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,kFAAkF;IAClF,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC/B;AAED;;;;GAIG;AACH,iBAAS,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CAgCzD;AAED,eAAe,WAAW,CAAC"}

package/dist/progress-bar/progress-bar.js

@@ -0,0 +1,88 @@
+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 { sortBy } from 'lodash';
+import styled, { theme } from '@darajs/styled-components';
+const Track = styled.div `
+    position: relative;
+
+    overflow: hidden;
+    display: flex;
+
+    width: 100%;
+    height: ${(props) => (props.small ? '0.5rem' : '1rem')};
+
+    background-color: ${(props) => props.theme.colors.grey2};
+    border-radius: ${(props) => (props.small ? '0.25rem' : '0.5rem')};
+`;
+const Bar = styled.div `
+    position: absolute;
+
+    overflow: ${(props) => (props.multi ? 'hidden' : 'visible')};
+
+    height: 100%;
+
+    background-color: ${(props) => (props.color ? props.color : props.theme.colors.primary)};
+    border-radius: ${(props) => (props.small ? '0.25rem' : '0.5rem')};
+`;
+const Text = styled.span `
+    position: absolute;
+    right: 0.5rem;
+    bottom: 0.05rem;
+    left: 0.5rem;
+
+    height: 100%;
+
+    font-size: 0.75rem;
+    color: ${(props) => props.theme.colors.blue1};
+    text-align: end;
+`;
+const defaultColors = [theme.colors.primary, theme.colors.success, theme.colors.warning, theme.colors.error];
+/**
+ * Takes an input value and converts it into an array. If the input is undefined, it returns a default input array.
+ * If the input is already an array, it returns the input itself. Otherwise, it wraps the input inside an array.
+ *
+ * @param input - The input value that should be arrayified. It can be a value of type T, an array of T, or undefined.
+ * @param defaultInput - The default array to return in case the input is undefined.
+ *
+ * @returns The input arrayified as an array of type T.
+ *
+ * @typeparam T - The type of the elements in the array.
+ */
+const arrayify = (input, defaultInput) => {
+    if (typeof input === 'undefined')
+        return defaultInput;
+    if (Array.isArray(input))
+        return input;
+    return [input];
+};
+/**
+ * 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
+ */
+function ProgressBar(props) {
+    // We need to sort the values to properly render them, so we need to preserve the original index
+    const progresses = typeof props.progress === 'number'
+        ? [{ index: 0, value: props.progress }]
+        : sortBy([...props.progress.map((x, i) => ({ index: i, value: x }))], 'value').reverse();
+    const colors = arrayify(props.color, defaultColors.slice(0, progresses.length));
+    const labels = arrayify(props.label, progresses.map((x) => `${x.value}%`));
+    return (_jsx(Track, { className: props.className, multi: typeof props.progress !== 'number', small: props.small, style: props.style, children: progresses.map((progress, index) => (_jsx(Bar, { color: colors[progress.index], multi: typeof props.progress !== 'number', small: props.small, style: { width: `${progress.value}%` }, children: !props.small && _jsx(Text, { progress: progress.value, children: labels[progress.index] }) }, index))) }));
+}
+export default ProgressBar;
+//# sourceMappingURL=progress-bar.js.map

package/dist/progress-bar/progress-bar.js.map

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

package/dist/radio/radio-group.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { InteractiveComponentProps, Item } from '../types';
+export interface RadioGroupProps extends InteractiveComponentProps<Item> {
+    /** An optional value which determines the direction of the radio group components by default is vertical */
+    direction?: 'horizontal' | 'vertical';
+    /** Whether to show radio in list style */
+    isListStyle?: boolean;
+    /** The items to pick from the list. Each should have a label and a value */
+    items: Array<Item>;
+    /** An optional onChange handler, will be called whenever the state of the checkbox changes */
+    onChange?: (value: Item, e?: React.FormEvent<HTMLInputElement>) => void | Promise<void>;
+}
+/**
+ * A simple radio component
+ *
+ * @param {RadioGroupProps} props - the component props
+ */
+declare function RadioGroup(props: RadioGroupProps): JSX.Element;
+export default RadioGroup;
+//# sourceMappingURL=radio-group.d.ts.map

package/dist/radio/radio-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../src/radio/radio-group.tsx"],"names":[],"mappings":";AAsBA,OAAO,EAAE,yBAAyB,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAyH3D,MAAM,WAAW,eAAgB,SAAQ,yBAAyB,CAAC,IAAI,CAAC;IACpE,4GAA4G;IAC5G,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACtC,0CAA0C;IAC1C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,4EAA4E;IAC5E,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;IACnB,8FAA8F;IAC9F,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CAC3F;AAED;;;;GAIG;AACH,iBAAS,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,GAAG,CAAC,OAAO,CAwDvD;AAED,eAAe,UAAU,CAAC"}

package/dist/radio/radio-group.js

@@ -0,0 +1,158 @@
+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 isEqual from 'lodash/isEqual';
+import { nanoid } from 'nanoid';
+import { useEffect, useRef, useState } from 'react';
+import styled from '@darajs/styled-components';
+const RadioGroupWrapper = styled.div `
+    display: ${(props) => (props.isHorizontal ? 'flex' : 'block')};
+    gap: ${(props) => (props.isHorizontal ? '1.25rem' : '0rem')};
+`;
+const RadioWrapper = styled.label `
+    cursor: ${(props) => (props['aria-disabled'] ? 'not-allowed' : 'pointer')};
+    user-select: none;
+
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    justify-content: flex-start;
+
+    width: ${(props) => (props.isListStyle ? 'auto' : 'fit-content')};
+    height: 2.5rem;
+    padding: 0rem 0.5rem;
+
+    color: ${(props) => (props['aria-disabled'] ? props.theme.colors.grey3 : props.theme.colors.text)};
+
+    border: none;
+    border-radius: 0.25rem;
+
+    // sets checkmark indicator
+    span:after {
+        top: calc(0.25rem - 1px);
+        left: calc(0.25rem - 1px);
+
+        width: 0.5rem;
+        height: 0.5rem;
+
+        background-color: ${(props) => (props['aria-disabled'] ? props.theme.colors.grey3 : props.theme.colors.grey5)};
+        border-radius: 50%;
+    }
+
+    // Show the checkmark when checked
+    input:checked ~ span:after {
+        display: block;
+    }
+
+    // Controls background color change depending on style
+    ${(props) => {
+    if (props.isListStyle) {
+        return `:hover {
+                        background-color: ${props['aria-disabled'] ? 'none' : props.theme.colors.grey1}
+            }
+            :active {
+                background-color: ${props['aria-disabled'] ? 'none' : props.theme.colors.grey2}
+    }`;
+    }
+    return `
+        :hover {
+            span {
+            background-color: ${props['aria-disabled'] ? 'none' : props.theme.colors.grey1};
+            }
+        }
+
+        :active {
+            span {
+            background-color: ${props['aria-disabled'] ? 'none' : props.theme.colors.grey2};
+            }
+        }
+        `;
+}}
+
+    // Sets the outer rim color of radio button
+    :hover {
+        span {
+            border: 1px solid
+                ${(props) => (props['aria-disabled'] ? props.theme.colors.grey2 : props.theme.colors.grey4)};
+        }
+    }
+
+    :active {
+        span {
+            border: 1px solid
+                ${(props) => (props['aria-disabled'] ? props.theme.colors.grey2 : props.theme.colors.grey4)};
+        }
+    }
+`;
+// hides default html radio button
+const RadioButton = styled.input `
+    position: absolute;
+    opacity: 0;
+`;
+// customdot/circle for the radio button
+const StyledCheckmark = styled.span `
+    position: relative;
+    top: 0;
+    left: 0;
+
+    width: 1rem;
+    height: 1rem;
+
+    background-color: ${(props) => (props.disabled ? props.theme.colors.grey1 : props.theme.colors.blue1)};
+    border: 1px solid ${(props) => (props.disabled ? props.theme.colors.grey2 : props.theme.colors.grey3)};
+    border-radius: 50%;
+
+    :after {
+        content: '';
+        position: relative;
+        display: none;
+    }
+`;
+/**
+ * A simple radio component
+ *
+ * @param {RadioGroupProps} props - the component props
+ */
+function RadioGroup(props) {
+    const [currentSelected, setCurrentSelected] = useState(props.items.findIndex((item) => props.value !== undefined ? isEqual(item.value, props.value) : isEqual(item.value, props.initialValue)));
+    // radio needs a name that is unique to that radio component, so that more than one radio components on a page don't get mixed inputs
+    const uuid = useRef(null);
+    if (uuid.current === null) {
+        uuid.current = nanoid();
+    }
+    const onChangeValue = (event) => {
+        var _a;
+        const target = event.target;
+        const chosenIndex = Number(target.value);
+        setCurrentSelected(chosenIndex);
+        if (props.value !== undefined) {
+            (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, props.items[chosenIndex], event);
+        }
+        else {
+            setCurrentSelected(chosenIndex);
+        }
+    };
+    useEffect(() => {
+        setCurrentSelected(props.items.findIndex((item) => props.value !== undefined ? isEqual(item.value, props.value) : isEqual(item.value, props.initialValue)));
+    }, [props.value]);
+    return (_jsx(RadioGroupWrapper, { className: props.className, isHorizontal: props.direction === 'horizontal', style: props.style, children: props.items.map((item, index) => {
+            var _a;
+            return (_jsxs(RadioWrapper, { "aria-disabled": props.disabled, isListStyle: props.isListStyle, children: [_jsx(RadioButton, { checked: isEqual((_a = props.value) === null || _a === void 0 ? void 0 : _a.value, item.value) || currentSelected === index, disabled: props.disabled, name: uuid.current, onChange: (e) => onChangeValue(e), type: "radio", value: index }), _jsx(StyledCheckmark, { disabled: props.disabled }), item.label ? item.label : item.value] }, `item-${index}`));
+        }) }));
+}
+export default RadioGroup;
+//# sourceMappingURL=radio-group.js.map

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

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

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

@@ -0,0 +1,34 @@
+/**
+ * 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 SearchBarProps extends InteractiveComponentProps<string> {
+    /** An optional maximum length */
+    maxLength?: number;
+    /** An optional onChange handler for listening to changes in the input */
+    onChange?: (value: string, e?: React.SyntheticEvent<HTMLInputElement>) => void | Promise<void>;
+    /** An optional placeholder that will be used when the input is empty, defaults to '' */
+    placeholder?: string;
+}
+/**
+ * A search bar component, accepts an onChange handler to listen for changes.
+ *
+ * @param props - the component props
+ */
+declare function SearchBar(props: SearchBarProps): JSX.Element;
+export default SearchBar;
+//# sourceMappingURL=search-bar.d.ts.map

package/dist/search-bar/search-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"search-bar.d.ts","sourceRoot":"","sources":["../../src/search-bar/search-bar.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,UAAU,CAAC;AA6BrD,MAAM,WAAW,cAAe,SAAQ,yBAAyB,CAAC,MAAM,CAAC;IACrE,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,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,wFAAwF;IACxF,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;GAIG;AACH,iBAAS,SAAS,CAAC,KAAK,EAAE,cAAc,GAAG,GAAG,CAAC,OAAO,CAerD;AAED,eAAe,SAAS,CAAC"}

package/dist/search-bar/search-bar.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from '@darajs/styled-components';
+import { MagnifyingGlass } from '@darajs/ui-icons';
+import Input from '../input/input';
+const Wrapper = styled.div `
+    display: flex;
+    margin: 0rem 0.5rem;
+`;
+const SearchBarComponent = styled(Input) `
+    input {
+        padding-right: 2.25rem;
+    }
+
+    :hover:not(:disabled) {
+        input {
+            border: 1px solid ${(props) => props.theme.colors.grey3};
+        }
+    }
+`;
+const SearchBarIcon = styled(MagnifyingGlass) `
+    position: relative;
+    top: 0.625rem;
+    right: 1.75rem;
+
+    height: 1.25rem;
+
+    color: ${(props) => props.theme.colors.grey4};
+`;
+/**
+ * A search bar component, accepts an onChange handler to listen for changes.
+ *
+ * @param props - the component props
+ */
+function SearchBar(props) {
+    var _a;
+    return (_jsxs(Wrapper, { children: [_jsx(SearchBarComponent, { className: props.className, disabled: props.disabled, maxLength: props.maxLength, onChange: props.onChange, placeholder: (_a = props.placeholder) !== null && _a !== void 0 ? _a : 'Search', style: props.style, value: props.value }), _jsx(SearchBarIcon, {})] }));
+}
+export default SearchBar;
+//# sourceMappingURL=search-bar.js.map

package/dist/search-bar/search-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"search-bar.js","sourceRoot":"","sources":["../../src/search-bar/search-bar.tsx"],"names":[],"mappings":";AAkBA,OAAO,MAAM,MAAM,2BAA2B,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAEnD,OAAO,KAAK,MAAM,gBAAgB,CAAC;AAGnC,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAGzB,CAAC;AAEF,MAAM,kBAAkB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;;;;;;;gCAOR,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK;;;CAGlE,CAAC;AAEF,MAAM,aAAa,GAAG,MAAM,CAAC,eAAe,CAAC,CAAA;;;;;;;aAOhC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK;CAC/C,CAAC;AAWF;;;;GAIG;AACH,SAAS,SAAS,CAAC,KAAqB;;IACpC,OAAO,CACH,MAAC,OAAO,eACJ,KAAC,kBAAkB,IACf,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,WAAW,EAAE,MAAA,KAAK,CAAC,WAAW,mCAAI,QAAQ,EAC1C,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,KAAK,EAAE,KAAK,CAAC,KAAK,GACpB,EACF,KAAC,aAAa,KAAG,IACX,CACb,CAAC;AACN,CAAC;AAED,eAAe,SAAS,CAAC"}

package/dist/sectioned-list/sectioned-list.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+import { InteractiveComponentProps, Item } from '../types';
+export interface ListItem extends Item {
+    heading?: boolean;
+    section?: string;
+}
+export interface ListSection {
+    items: Array<Item>;
+    label: string;
+}
+export interface SectionedListProps extends InteractiveComponentProps<Item> {
+    /** An array of ListItem and/or ListSection objects to render */
+    items: Array<ListItem | ListSection>;
+    /** An optional onSelect handler for listening to changes in the selected item */
+    onSelect?: (item: ListItem) => void | Promise<void>;
+    /** Put the component in controlled mode and pass in the selectedItem */
+    selectedItem?: ListItem | Item;
+    /** Pass through of style property to the root element */
+    style?: React.CSSProperties;
+}
+/**
+ * A component for rendering lists, sectioned and non-sectioned. Takes an array of unpacked  ListItem objects and
+ * renders a searchable list.
+ *
+ * @param {SectionedListProps} props - the component props
+ */
+declare function SectionedList(props: SectionedListProps): JSX.Element;
+export default SectionedList;
+//# sourceMappingURL=sectioned-list.d.ts.map

package/dist/sectioned-list/sectioned-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sectioned-list.d.ts","sourceRoot":"","sources":["../../src/sectioned-list/sectioned-list.tsx"],"names":[],"mappings":";AAyBA,OAAO,EAAE,yBAAyB,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAwE3D,MAAM,WAAW,QAAS,SAAQ,IAAI;IAClC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,WAAW;IACxB,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,kBAAmB,SAAQ,yBAAyB,CAAC,IAAI,CAAC;IACvE,gEAAgE;IAChE,KAAK,EAAE,KAAK,CAAC,QAAQ,GAAG,WAAW,CAAC,CAAC;IACrC,iFAAiF;IACjF,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACpD,wEAAwE;IACxE,YAAY,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;IAC/B,yDAAyD;IACzD,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC/B;AAED;;;;;GAKG;AACH,iBAAS,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,GAAG,CAAC,OAAO,CAqO7D;AAED,eAAe,aAAa,CAAC"}