@ndlib/component-library 0.0.7-9.1

package/dist/components/elements/Button/Button.test.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { fireEvent } from '@testing-library/react';
+import { vi } from 'vitest';
+import { render } from '../../../utils/test';
+import { Button } from '.';
+const MockPrimaryIcon = () => _jsx("div", { children: "Mock Primary Icon" });
+const MockLeftIcon = () => _jsx("div", { children: "Mock Left Icon" });
+const MockRightIcon = () => _jsx("div", { children: "Mock Right Icon" });
+describe('Button', () => {
+    const mockClickHandler = vi.fn();
+    afterEach(() => {
+        vi.resetAllMocks();
+    });
+    it('renders without throwing an error', () => {
+        const { getByText } = render(_jsx(Button, { children: "Foo" }));
+        expect(getByText('Foo')).toBeInTheDocument();
+    });
+    it('renders icon component passed to it', () => {
+        const { getByText } = render(_jsxs(_Fragment, { children: [_jsx(Button, Object.assign({ leftIcon: MockLeftIcon }, { children: "Click Me" })), _jsx(Button, Object.assign({ primaryIcon: MockPrimaryIcon }, { children: "Click Me" })), _jsx(Button, Object.assign({ rightIcon: MockRightIcon }, { children: "Click Me" }))] }));
+        expect(getByText('Mock Primary Icon')).toBeDefined();
+        expect(getByText('Mock Left Icon')).toBeDefined();
+        expect(getByText('Mock Right Icon')).toBeDefined();
+    });
+    it('responds to click handlers', () => {
+        const { getByRole } = render(_jsx(Button, { onClick: mockClickHandler }));
+        fireEvent.click(getByRole('button'));
+        expect(mockClickHandler).toHaveBeenCalledTimes(1);
+    });
+    it('does not respond to click handler when disabled', () => {
+        const { getByRole } = render(_jsx(Button, { onClick: mockClickHandler, disabled: true }));
+        fireEvent.click(getByRole('button'));
+        expect(mockClickHandler).not.toHaveBeenCalled();
+    });
+    it('does not respond to click handler when loading', () => {
+        const { getByRole } = render(_jsx(Button, { onClick: mockClickHandler, loading: true }));
+        fireEvent.click(getByRole('button'));
+        expect(mockClickHandler).not.toHaveBeenCalled();
+    });
+});

package/dist/components/elements/Button/index.d.ts

@@ -0,0 +1,49 @@
+import React from 'react';
+import { StyledElementProps } from '../../../theme';
+import { COLOR } from '../../../theme/colors';
+export declare enum BUTTON_SIZE {
+    SM = "sm",
+    MD = "md",
+    LG = "lg"
+}
+export declare enum BUTTON_TYPE {
+    DEFAULT = "default",
+    TEXT = "text",
+    OUTLINE = "outline"
+}
+export type ButtonProps = StyledElementProps<HTMLButtonElement, {
+    size?: BUTTON_SIZE;
+    type?: BUTTON_TYPE;
+    color?: COLOR;
+    textColor?: COLOR;
+    customColor?: string;
+    primaryIcon?: React.FC<any>;
+    leftIcon?: React.FC<any>;
+    rightIcon?: React.FC<any>;
+    accessibleLabel?: string;
+    loading?: boolean;
+    disabled?: boolean;
+    disableFocusStyles?: boolean;
+}>;
+export declare const Button: React.ForwardRefExoticComponent<{
+    sx?: import("../../../theme").StylesProp | undefined;
+    children?: React.ReactNode;
+} & Omit<React.HTMLAttributes<HTMLButtonElement>, "children" | "onChange"> & {
+    size?: BUTTON_SIZE | undefined;
+    type?: BUTTON_TYPE | undefined;
+    color?: COLOR | undefined;
+    textColor?: COLOR | undefined;
+    customColor?: string | undefined;
+    primaryIcon?: React.FC<any> | undefined;
+    leftIcon?: React.FC<any> | undefined;
+    rightIcon?: React.FC<any> | undefined;
+    accessibleLabel?: string | undefined;
+    loading?: boolean | undefined;
+    disabled?: boolean | undefined;
+    disableFocusStyles?: boolean | undefined;
+} & {
+    htmlFor?: string | undefined;
+} & React.RefAttributes<HTMLButtonElement>>;
+type LinkButtonProps = Omit<ButtonProps, 'type' | 'color' | 'textColor'>;
+export declare const LinkButton: React.FC<LinkButtonProps>;
+export {};

package/dist/components/elements/Button/index.js

@@ -0,0 +1,138 @@
+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 "theme-ui/jsx-runtime";
+import React from 'react';
+import { useTheme } from '../../../theme';
+import { COLOR } from '../../../theme/colors';
+import { TYPOGRAPHY_TYPE, getIconSize, getTypographyStyles, } from '../../../theme/typography';
+import { Icon } from '../Icon';
+import { useEnvironment } from '../../providers/env';
+import { SPINNER_SIZE, Spinner } from '../Spinner';
+export var BUTTON_SIZE;
+(function (BUTTON_SIZE) {
+    BUTTON_SIZE["SM"] = "sm";
+    BUTTON_SIZE["MD"] = "md";
+    BUTTON_SIZE["LG"] = "lg";
+})(BUTTON_SIZE || (BUTTON_SIZE = {}));
+const typographyMap = {
+    [BUTTON_SIZE.SM]: TYPOGRAPHY_TYPE.CONTROL_SMALL,
+    [BUTTON_SIZE.MD]: TYPOGRAPHY_TYPE.CONTROL_MEDIUM,
+    [BUTTON_SIZE.LG]: TYPOGRAPHY_TYPE.CONTROL_LARGE,
+};
+const defaultPaddingX = {
+    [BUTTON_SIZE.SM]: 2,
+    [BUTTON_SIZE.MD]: 3,
+    [BUTTON_SIZE.LG]: 4,
+};
+const defaultHeight = {
+    [BUTTON_SIZE.SM]: '2rem',
+    [BUTTON_SIZE.MD]: '2.5rem',
+    [BUTTON_SIZE.LG]: '3rem',
+};
+const iconMargin = {
+    [BUTTON_SIZE.SM]: 1,
+    [BUTTON_SIZE.MD]: 2,
+    [BUTTON_SIZE.LG]: 2,
+};
+export var BUTTON_TYPE;
+(function (BUTTON_TYPE) {
+    BUTTON_TYPE["DEFAULT"] = "default";
+    BUTTON_TYPE["TEXT"] = "text";
+    BUTTON_TYPE["OUTLINE"] = "outline";
+})(BUTTON_TYPE || (BUTTON_TYPE = {}));
+export const Button = React.forwardRef((_a, ref) => {
+    var { size: sizeParam, type: typeParam, color, customColor, textColor: textColorParam, primaryIcon, leftIcon, rightIcon, disabled: disabledParam, children, sx, loading, disableFocusStyles } = _a, rest = __rest(_a, ["size", "type", "color", "customColor", "textColor", "primaryIcon", "leftIcon", "rightIcon", "disabled", "children", "sx", "loading", "disableFocusStyles"]);
+    const disabled = disabledParam || loading;
+    const theme = useTheme();
+    const { flagInDevelopment } = useEnvironment();
+    let bg = COLOR.PRIMARY;
+    let borderColor = COLOR.TRANSPARENT;
+    let cursor = 'pointer';
+    let textColor = COLOR.BACKGROUND;
+    let hoverShadow = theme.boxShadow.NORMAL;
+    let hoverDecoration = undefined;
+    let hoverTransform = 'scale(1.03)';
+    const isTextButton = typeParam === BUTTON_TYPE.TEXT;
+    const isIconButton = primaryIcon;
+    const type = typeParam || BUTTON_TYPE.DEFAULT;
+    const size = sizeParam || BUTTON_SIZE.MD;
+    const paddingX = isIconButton || isTextButton ? 0 : defaultPaddingX[size];
+    const height = isTextButton ? undefined : defaultHeight[size];
+    const width = primaryIcon ? height : undefined;
+    if (isIconButton && !rest['aria-label']) {
+        flagInDevelopment('Icon buttons should include aria-label prop for accessibility');
+    }
+    if (isIconButton) {
+        hoverTransform = 'scale(1.05)';
+    }
+    if (type === BUTTON_TYPE.DEFAULT) {
+        bg = color || COLOR.SECONDARY;
+        textColor = COLOR.BLACK;
+    }
+    if (type === BUTTON_TYPE.TEXT) {
+        bg = COLOR.TRANSPARENT;
+        textColor = color || COLOR.PRIMARY;
+        hoverShadow = undefined;
+        hoverDecoration = 'underline';
+    }
+    if (type === BUTTON_TYPE.OUTLINE) {
+        bg = COLOR.BACKGROUND;
+        textColor = color || COLOR.TEXT;
+        borderColor = textColor;
+    }
+    if (textColorParam) {
+        textColor = textColorParam;
+    }
+    if (disabled) {
+        cursor = 'not-allowed';
+        if (bg === COLOR.BACKGROUND || bg === COLOR.TRANSPARENT) {
+            textColor = COLOR.GRAY;
+        }
+        else {
+            bg = COLOR.GRAY;
+        }
+    }
+    const typography = typographyMap[size];
+    const typographyStyles = getTypographyStyles(typography);
+    let body = children;
+    if (primaryIcon) {
+        body = (_jsx(Icon, { icon: primaryIcon, size: getIconSize(typographyStyles.fontSize), color: textColor }));
+    }
+    if (loading) {
+        body = (_jsxs("div", Object.assign({ sx: {
+                position: 'relative',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+            } }, { children: [_jsx(Spinner, { size: SPINNER_SIZE.SM, color: textColor, sx: { position: 'absolute' } }), _jsx("div", Object.assign({ sx: { visibility: 'hidden' } }, { children: body }))] })));
+    }
+    const hoverStyles = !disabled
+        ? {
+            boxShadow: hoverShadow,
+            transform: hoverTransform,
+            textDecoration: hoverDecoration,
+        }
+        : undefined;
+    return (_jsxs("button", Object.assign({ ref: ref, tabIndex: disabled ? -1 : 0, disabled: disabled, css: {
+            backgroundColor: customColor,
+        }, sx: Object.assign(Object.assign({ cursor, bg: customColor ? undefined : bg, color: textColor, px: paddingX, width: width, height: height, border: 'solid 1px', borderRadius: '4px', borderColor, display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center', ':hover': !disableFocusStyles ? hoverStyles : {}, ':focus': !disableFocusStyles ? hoverStyles : {} }, typographyStyles), sx) }, rest, { children: [leftIcon && (_jsx(Icon, { icon: leftIcon, size: typographyStyles.fontSize, sx: { mr: iconMargin[size] }, color: textColor })), _jsx("div", Object.assign({ css: {
+                    flexGrow: 1,
+                    justifyContent: 'flex-start',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                    textAlign: 'start',
+                } }, { children: body })), rightIcon && (_jsx(Icon, { icon: rightIcon, size: typographyStyles.fontSize, sx: { ml: iconMargin[size] }, color: textColor }))] })));
+});
+export const LinkButton = (props) => {
+    return (_jsx(Button, Object.assign({}, props, { color: COLOR.ND_BLUE_BRIGHT, textColor: COLOR.WHITE })));
+};

package/dist/components/elements/Dropdown/Dropdown.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Dropdown } from '.';
+declare const meta: Meta<typeof Dropdown>;
+export default meta;
+type Story = StoryObj<typeof Dropdown>;
+export declare const Default: Story;
+export declare const MatchWidth: Story;

package/dist/components/elements/Dropdown/Dropdown.stories.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+import { Button } from '../../elements/Button';
+import { Box } from '../../elements/layout/Box';
+import { Dropdown } from '.';
+import { Paragraph } from '../text/Paragraph';
+const meta = {
+    title: 'Elements/Dropdown',
+    component: Dropdown,
+    tags: ['autodocs'],
+};
+export default meta;
+const lorem = `Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+Nullam id nunc vitae magna aliquam aliquet. In hac habitasse platea dictumst.`;
+export const Default = {
+    render: () => (_jsx(Box, Object.assign({ sx: { width: '200px', height: '200px' } }, { children: _jsx(Dropdown, { renderAnchor: ({ anchorProps }) => (_jsx(Button, Object.assign({}, anchorProps, { rightIcon: ArrowDropDownIcon }, { children: "Open Dropdown" }))), renderDropdown: () => _jsx(Paragraph, { children: lorem }) }) }))),
+};
+export const MatchWidth = {
+    render: () => (_jsx(Box, Object.assign({ sx: { width: '200px', height: '200px' } }, { children: _jsx(Dropdown, { matchWidth: true, renderAnchor: ({ anchorProps }) => (_jsx(Button, Object.assign({}, anchorProps, { rightIcon: ArrowDropDownIcon }, { children: "Open Dropdown" }))), renderDropdown: () => _jsx(Paragraph, { children: lorem }) }) }))),
+};

package/dist/components/elements/Dropdown/index.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { StyledElementProps } from '../../../theme';
+type AnchorProps = Omit<React.HTMLAttributes<HTMLButtonElement>, 'color'>;
+type AnchorRenderFn = (params: {
+    anchorProps: AnchorProps;
+    isOpen: boolean;
+    setIsOpen: (isOpen: boolean) => void;
+}) => React.ReactNode;
+type DropdownRenderFn = (params: {
+    styles: React.CSSProperties;
+    ref: React.Ref<any>;
+    isOpen: boolean;
+    setIsOpen: (isOpen: boolean) => void;
+    id: string;
+}) => React.ReactNode;
+type DropdownProps = StyledElementProps<HTMLDivElement, {
+    renderAnchor: AnchorRenderFn;
+    renderDropdown: DropdownRenderFn;
+    shouldRenderDropdownContainer?: boolean;
+    matchWidth?: boolean;
+}>;
+export declare const Overlay: React.FC<StyledElementProps<HTMLDivElement>>;
+export declare const Dropdown: React.FC<DropdownProps>;
+export {};

package/dist/components/elements/Dropdown/index.js

@@ -0,0 +1,87 @@
+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, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, useState } from 'react';
+import { useTheme } from '../../../theme';
+import { autoPlacement, offset, size, useFloating } from '@floating-ui/react';
+import { Box } from '../../elements/layout/Box';
+import { useUniqueId } from '../../providers/uniqueIds';
+import { Z_INDEX } from '../../../theme/custom';
+import { COLOR } from '../../../theme/colors';
+export const Overlay = (props) => (_jsx(Box, Object.assign({}, props, { sx: {
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        width: '100vw',
+        height: '100vh',
+        zIndex: Z_INDEX.ELEVATED,
+    } })));
+export const Dropdown = (_a) => {
+    var { renderAnchor, renderDropdown, matchWidth, shouldRenderDropdownContainer = true } = _a, rest = __rest(_a, ["renderAnchor", "renderDropdown", "matchWidth", "shouldRenderDropdownContainer"]);
+    const [isOpen, setIsOpen] = useState(false);
+    const [dropdownMinWidth, setDropdownMinWidth] = useState('0px');
+    const [dropdownMaxWidth, setDropdownMaxWidth] = useState();
+    const dropdownId = useUniqueId('dropdown');
+    const anchorId = useUniqueId('dropdown-anchor');
+    const { boxShadow } = useTheme();
+    const { refs, floatingStyles } = useFloating({
+        placement: 'bottom-start',
+        middleware: [
+            offset(2),
+            size({
+                apply({ rects }) {
+                    setDropdownMinWidth(`${rects.reference.width}px`);
+                    if (matchWidth) {
+                        setDropdownMaxWidth(`${rects.reference.width}px`);
+                    }
+                },
+            }),
+            autoPlacement({
+                allowedPlacements: [
+                    'top-start',
+                    'bottom-start',
+                    'top-end',
+                    'bottom-end',
+                ],
+            }),
+        ],
+    });
+    const dropdownBoxStyles = Object.assign(Object.assign({}, floatingStyles), { minWidth: dropdownMinWidth, maxWidth: dropdownMaxWidth, zIndex: Z_INDEX.DIALOG, backgroundColor: COLOR.WHITE, boxShadow: boxShadow.NORMAL });
+    const onClick = useCallback(() => {
+        setIsOpen(!isOpen);
+    }, [isOpen]);
+    const dropdownAnchorProps = useMemo(() => ({
+        id: anchorId,
+        'aria-haspopup': true,
+        'aria-expanded': isOpen,
+        'aria-owns': dropdownId,
+        ref: refs.setReference,
+        onClick,
+    }), [refs, onClick, anchorId, isOpen, dropdownId]);
+    return (_jsxs(Box, Object.assign({}, rest, { children: [renderAnchor({
+                anchorProps: dropdownAnchorProps,
+                isOpen,
+                setIsOpen,
+            }), isOpen && (_jsxs(_Fragment, { children: [shouldRenderDropdownContainer ? (_jsx(Box, Object.assign({ id: dropdownId, ref: refs.setFloating, style: dropdownBoxStyles }, { children: renderDropdown({
+                            styles: dropdownBoxStyles,
+                            ref: refs.setFloating,
+                            setIsOpen,
+                            isOpen,
+                            id: dropdownId,
+                        }) }))) : (renderDropdown({
+                        styles: dropdownBoxStyles,
+                        ref: refs.setFloating,
+                        isOpen,
+                        setIsOpen,
+                        id: dropdownId,
+                    })), _jsx(Overlay, { onClick: () => setIsOpen(false) })] }))] })));
+};

package/dist/components/elements/Fields/AutoComplete/AutoComplete.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { AutoComplete } from '.';
+declare const meta: Meta<typeof AutoComplete>;
+export default meta;
+type Story = StoryObj<typeof AutoComplete>;
+export declare const Default: Story;

package/dist/components/elements/Fields/AutoComplete/AutoComplete.stories.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { AutoComplete } from '.';
+import { Paragraph, PARAGRAPH_SIZE } from '../../text/Paragraph';
+import { HEADING_SIZE, Heading } from '../../text/Heading';
+import { Column } from '../../layout/Column';
+import { Row } from '../../layout/Row';
+const options = [
+    {
+        label: 'Cucumber',
+        value: 'Cucumber',
+    },
+    {
+        label: 'Egg Plant',
+        value: 'Egg Plant',
+    },
+    {
+        label: 'Napa',
+        value: 'Napa',
+    },
+    {
+        label: 'Cabbage',
+        value: 'Cabbage',
+    },
+    {
+        label: 'Broccoli',
+        value: 'Broccoli',
+    },
+    {
+        label: 'Radish',
+        value: 'Radish',
+    },
+    {
+        label: 'Cauliflower',
+        value: 'Cauliflower',
+    },
+    {
+        label: 'Beet',
+        value: 'Beet',
+    },
+    {
+        label: 'Tomato',
+        value: 'Tomato',
+    },
+    {
+        label: 'Zuchinni',
+        value: 'Zuchinni',
+    },
+];
+function onSelect() {
+    return console.log('clicked');
+}
+const meta = {
+    title: 'Elements/Fields/AutoComplete',
+    component: AutoComplete,
+    tags: ['autodocs'],
+};
+export default meta;
+export const Default = {
+    render: () => (_jsx(_Fragment, { children: _jsx(Row, Object.assign({ justify: "space-between" }, { children: _jsxs(Column, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.LG }, { children: "Vegetables" })), _jsx("br", {}), _jsx(AutoComplete, { options: options, value: "cucumber", onSelect: onSelect }), _jsx("br", {}), _jsx(Paragraph, Object.assign({ size: PARAGRAPH_SIZE.LG }, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ultrices venenatis purus at porta. Etiam congue sapien leo, sed malesuada justo commodo in. Nunc consequat, massa non cursus posuere, magna eros lacinia lectus, eget lobortis mi erat ut justo. Maecenas nisi mi, mollis sed ornare vitae, pharetra sed augue. Curabitur mollis orci risus, sed imperdiet nisi aliquet et. Ut non elit nec magna rhoncus maximus sit amet ut dui. Mauris sit amet eleifend lectus. Aliquam consectetur posuere libero eu ultricies. Etiam rutrum non orci nec vulputate. Sed vel accumsan diam. Cras aliquet eros eros, sit amet pharetra eros tincidunt ut. Vestibulum est erat, eleifend dapibus eros vel, elementum vehicula risus. Etiam blandit condimentum sodales. Donec non libero in orci aliquam egestas fringilla eget purus. Suspendisse pellentesque at ligula ut accumsan." }))] }) })) })),
+};

package/dist/components/elements/Fields/AutoComplete/index.d.ts

@@ -0,0 +1,11 @@
+interface Option {
+    label: string;
+    value: string;
+}
+interface AutoCompleteProps {
+    value: string;
+    options: Option[];
+    onSelect: (option: string) => any;
+}
+export declare const AutoComplete: ({ value, options, onSelect, }: AutoCompleteProps) => import("react/jsx-runtime").JSX.Element;
+export default AutoComplete;

package/dist/components/elements/Fields/AutoComplete/index.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { COLOR } from '../../../../theme/colors';
+import { ListBox } from '../../ListBox';
+import { TextInput } from '../../Fields/TextInput';
+export const AutoComplete = ({ value, options, onSelect, }) => {
+    const [inputValue, setInputValue] = useState(value);
+    const [filteredOptions, setFilteredOptions] = useState(options);
+    const [showOptions, setShowOptions] = useState(false);
+    const handleChange = (value) => {
+        setInputValue(value);
+        const newFilteredOptions = options.filter((option) => option.label.toLowerCase().includes(value.toLowerCase()));
+        setFilteredOptions(newFilteredOptions);
+        setShowOptions(true);
+    };
+    const handleSelect = (selectedOption) => {
+        setShowOptions(false);
+        setInputValue(selectedOption.label);
+        onSelect(selectedOption.value);
+    };
+    return (_jsxs("div", { children: [_jsx(TextInput, { value: inputValue, onChange: handleChange }), showOptions && (_jsx(ListBox, { options: filteredOptions, selectOption: handleSelect, sx: {
+                    bg: COLOR.PRIMARY,
+                    marginTop: 2,
+                } }))] }));
+};
+export default AutoComplete;

package/dist/components/elements/Fields/Checkbox/Checkbox.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Checkbox } from './index';
+declare const meta: Meta<typeof Checkbox>;
+export default meta;
+type Story = StoryObj<typeof Checkbox>;
+export declare const Default: Story;

package/dist/components/elements/Fields/Checkbox/Checkbox.stories.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Checkbox } from './index';
+import { useState } from 'react';
+import { Row } from '../../layout/Row';
+const meta = {
+    title: 'Elements/Fields/Checkbox',
+    component: Checkbox,
+    tags: ['autodocs'],
+};
+export default meta;
+const StatefulCheckbox = (props) => {
+    const [checked, setChecked] = useState(false);
+    return _jsx(Checkbox, Object.assign({}, props, { checked: checked, onChange: setChecked }));
+};
+export const Default = {
+    render: () => (_jsx(Row, { children: _jsx(StatefulCheckbox, {}) })),
+};

package/dist/components/elements/Fields/Checkbox/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { StyledElementProps } from '../../../../theme';
+type CheckboxProps = StyledElementProps<HTMLInputElement, {
+    checked: boolean;
+    onChange: (value: boolean) => void;
+}, string>;
+export declare const Checkbox: React.FC<CheckboxProps>;
+export {};

package/dist/components/elements/Fields/Checkbox/index.js

@@ -0,0 +1,22 @@
+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 } from "theme-ui/jsx-runtime";
+import { useTheme } from '../../../../theme';
+export const Checkbox = (_a) => {
+    var { checked, onChange, sx } = _a, rest = __rest(_a, ["checked", "onChange", "sx"]);
+    const theme = useTheme();
+    return (_jsx("input", Object.assign({ type: "checkbox", onChange: (e) => {
+            onChange(e.target.checked);
+        }, checked: checked, sx: Object.assign({ margin: '0px', height: '1.25rem', width: '1.25rem', cursor: 'pointer', ':hover': {
+                boxShadow: theme.boxShadow,
+            } }, sx) }, rest)));
+};

package/dist/components/elements/Fields/CheckboxGroup/CheckboxGroup.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { CheckboxGroup } from './index';
+declare const meta: Meta<typeof CheckboxGroup>;
+export default meta;
+type Story = StoryObj<typeof CheckboxGroup>;
+export declare const Default: Story;
+export declare const Columns: Story;

package/dist/components/elements/Fields/CheckboxGroup/CheckboxGroup.stories.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CheckboxGroup } from './index';
+import { useState } from 'react';
+import { Row } from '../../layout/Row';
+const meta = {
+    title: 'Elements/Fields/CheckboxGroup',
+    component: CheckboxGroup,
+    tags: ['autodocs'],
+};
+export default meta;
+const options = [
+    { value: 'orange', label: 'Orange' },
+    { value: 'apple', label: 'Apple' },
+    { value: 'strawberry', label: 'Strawberry' },
+    { value: 'pineapple', label: 'Pineapple' },
+];
+const StatefulCheckboxGroup = (props) => {
+    const [checked, setChecked] = useState(new Set());
+    return (_jsx(CheckboxGroup, Object.assign({}, props, { checkedOptions: checked, options: options, onChange: setChecked })));
+};
+export const Default = {
+    render: () => (_jsx(Row, { children: _jsx(StatefulCheckboxGroup, {}) })),
+};
+export const Columns = {
+    render: () => (_jsx(Row, { children: _jsx(StatefulCheckboxGroup, { columns: 2 }) })),
+};

package/dist/components/elements/Fields/CheckboxGroup/index.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { StyledElementProps, StylesProp } from '../../../../theme';
+import { Key } from '../option';
+type Option = {
+    value: Key;
+    label: string;
+};
+type CheckboxGroupProps = StyledElementProps<HTMLDivElement, {
+    onChange: (value: Set<Key>) => void;
+    options: Option[];
+    checkedOptions?: Set<Key>;
+    columnStyles: StylesProp;
+    columns?: number;
+}, string>;
+export declare const CheckboxGroup: React.FC<CheckboxGroupProps>;
+export {};

package/dist/components/elements/Fields/CheckboxGroup/index.js

@@ -0,0 +1,49 @@
+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";
+import { useMemo } from 'react';
+import { Row } from '../../layout/Row';
+import { Checkbox } from '../Checkbox';
+import { Label } from '../../text/Label';
+import { Group } from '../../Group';
+import { GROUP_TYPE } from '../../Group';
+import { Column } from '../../layout/Column';
+import { TYPOGRAPHY_TYPE, getTypographyStyles, } from '../../../../theme/typography';
+export const CheckboxGroup = (_a) => {
+    var { options, checkedOptions, columns: columnsProp, columnStyles, onChange } = _a, rest = __rest(_a, ["options", "checkedOptions", "columns", "columnStyles", "onChange"]);
+    const columns = columnsProp || 1;
+    const optionsByColumn = useMemo(() => {
+        const optionsByColumn = [];
+        for (let i = 0; i < options.length; i++) {
+            const maxPerColumn = Math.ceil(options.length / columns);
+            const columnIndex = Math.floor(i / maxPerColumn);
+            if (optionsByColumn[columnIndex] === undefined) {
+                optionsByColumn[columnIndex] = [];
+            }
+            optionsByColumn[columnIndex].push(options[i]);
+        }
+        return optionsByColumn;
+    }, [options, columns]);
+    return (_jsx(Row, Object.assign({}, rest, { children: optionsByColumn.map((options, index) => (_jsx(Column, Object.assign({ grow: 1, sx: Object.assign({ mr: 4 }, columnStyles) }, { children: options.map((option) => (_jsx(Group, Object.assign({ type: GROUP_TYPE.RAW }, { children: ({ labelTargetId }) => (_jsxs(Row, Object.assign({ sx: {
+                        mb: 2,
+                        alignItems: 'center',
+                    } }, { children: [_jsx(Checkbox, { onChange: (checked) => {
+                                const updatedSet = new Set(checkedOptions || []);
+                                if (checked) {
+                                    updatedSet.add(option.value);
+                                }
+                                else {
+                                    updatedSet.delete(option.value);
+                                }
+                                onChange(updatedSet);
+                            }, checked: !!(checkedOptions === null || checkedOptions === void 0 ? void 0 : checkedOptions.has(option.value)), id: labelTargetId, sx: { mr: 2 } }), _jsx(Label, Object.assign({ sx: Object.assign({ cursor: 'pointer' }, getTypographyStyles(TYPOGRAPHY_TYPE.CONDENSED_TEXT_MEDIUM)) }, { children: option.label }))] }))) }), option.value))) }), index))) })));
+};

package/dist/components/elements/Fields/DatePicker/DatePicker.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { DatePicker } from '.';
+declare const meta: Meta<typeof DatePicker>;
+export default meta;
+type Story = StoryObj<typeof DatePicker>;
+export declare const Default: Story;
+export declare const Inline: Story;
+export declare const HighlightedDates: Story;