@ndlib/component-library 0.0.8 → 0.0.14

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

@@ -1,4 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import SearchIcon from '@mui/icons-material/Search';
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+import SettingsIcon from '@mui/icons-material/Settings';
 import { BUTTON_SIZE, BUTTON_TYPE, Button } from '.';
 import { GROUP_TYPE, Group } from '../Group';
 import { HEADING_SIZE, Heading } from '../text/Heading';
@@ -16,24 +19,54 @@ const sizes = [
     { size: BUTTON_SIZE.SM, label: 'Small' },
 ];
 export const Default = {
-    render: (args) => (_jsx(Column, { children: sizes.map(size => (_jsxs(Group, Object.assign({ type: GROUP_TYPE.REGION }, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.MD }, { children: size.label })), _jsx(Button, Object.assign({}, args, { size: size.size, sx: { mt: 1 } }))] })))) })),
+    render: (args) => (_jsx(Column, { children: sizes.map((size) => (_jsxs(Group, Object.assign({ type: GROUP_TYPE.REGION }, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.MD }, { children: size.label })), _jsx(Button, Object.assign({}, args, { size: size.size, sx: { mt: 1 } }))] })))) })),
     args: {
         type: BUTTON_TYPE.DEFAULT,
-        children: "Click Me"
-    }
+        children: 'Click Me',
+    },
 };
 export const CustomColor = {
-    render: (args) => (_jsx(Column, { children: sizes.map(size => (_jsxs(Group, Object.assign({ type: GROUP_TYPE.REGION }, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.MD }, { children: size.label })), _jsx(Button, Object.assign({}, args, { size: size.size, color: COLOR.SECONDARY, sx: { mt: 1 } }))] })))) })),
+    render: (args) => (_jsx(Column, { children: sizes.map((size) => (_jsxs(Group, Object.assign({ type: GROUP_TYPE.REGION }, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.MD }, { children: size.label })), _jsx(Button, Object.assign({}, args, { size: size.size, color: COLOR.SECONDARY, sx: { mt: 1 } }))] })))) })),
     args: {
         type: BUTTON_TYPE.DEFAULT,
-        children: "Click Me"
-    }
+        children: 'Click Me',
+    },
+};
+export const OutlineButton = {
+    render: (args) => (_jsx(Column, { children: sizes.map((size) => (_jsxs(Group, Object.assign({ type: GROUP_TYPE.REGION }, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.MD }, { children: size.label })), _jsx(Button, Object.assign({}, args, { size: size.size, sx: { mt: 1 } }))] })))) })),
+    args: {
+        type: BUTTON_TYPE.OUTLINE,
+        children: 'Click Me',
+        onClick: () => { },
+    },
 };
 export const TextButton = {
-    render: (args) => (_jsx(Column, { children: sizes.map(size => (_jsxs(Group, Object.assign({ type: GROUP_TYPE.REGION }, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.MD }, { children: size.label })), _jsx(Button, Object.assign({}, args, { size: size.size, sx: { mt: 1 } }))] })))) })),
+    render: (args) => (_jsx(Column, { children: sizes.map((size) => (_jsxs(Group, Object.assign({ type: GROUP_TYPE.REGION }, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.MD }, { children: size.label })), _jsx(Button, Object.assign({}, args, { size: size.size, sx: { mt: 1 } }))] })))) })),
+    args: {
+        type: BUTTON_TYPE.TEXT,
+        onClick: () => { },
+        children: 'Click Me',
+    },
+};
+export const IconButton = {
+    render: (args) => (_jsx(Column, { children: sizes.map((size) => (_jsxs(Group, Object.assign({ type: GROUP_TYPE.REGION }, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.MD }, { children: size.label })), _jsx(Button, Object.assign({}, args, { size: size.size, sx: { mt: 1 }, primaryIcon: SettingsIcon }))] })))) })),
     args: {
         type: BUTTON_TYPE.TEXT,
+        children: 'Click Me',
+        onClick: () => { },
+    },
+};
+export const LeftIcon = {
+    render: (args) => (_jsx(Column, { children: sizes.map((size) => (_jsxs(Group, Object.assign({ type: GROUP_TYPE.REGION }, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.MD }, { children: size.label })), _jsx(Button, Object.assign({}, args, { size: size.size, sx: { mt: 1 }, leftIcon: SearchIcon }))] })))) })),
+    args: {
+        onClick: () => { },
+        children: 'Search',
+    },
+};
+export const RightIcon = {
+    render: (args) => (_jsx(Column, { children: sizes.map((size) => (_jsxs(Group, Object.assign({ type: GROUP_TYPE.REGION }, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.MD }, { children: size.label })), _jsx(Button, Object.assign({}, args, { size: size.size, sx: { mt: 1 }, rightIcon: ArrowDropDownIcon }))] })))) })),
+    args: {
         onClick: () => { },
-        children: "Click Me"
-    }
+        children: 'Select',
+    },
 };

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

@@ -1,8 +1,11 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+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 ".";
+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(() => {
@@ -12,6 +15,12 @@ describe('Button', () => {
         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'));

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

@@ -1,7 +1,6 @@
 /** @jsxImportSource theme-ui */
-import React from "react";
-import { StyledElementProps } from "../../../theme";
-import { COLOR } from "../../../theme/colors";
+import React from 'react';
+import { COLOR } from '../../../theme/colors';
 export declare enum BUTTON_SIZE {
     SM = "sm",
     MD = "md",
@@ -9,12 +8,18 @@ export declare enum BUTTON_SIZE {
 }
 export declare enum BUTTON_TYPE {
     DEFAULT = "default",
-    TEXT = "text"
+    TEXT = "text",
+    OUTLINE = "outline"
 }
-type ButtonProps = StyledElementProps<HTMLButtonElement, {
-    size?: BUTTON_SIZE;
-    type?: BUTTON_TYPE;
-    color?: COLOR;
-}>;
-export declare const Button: React.FC<ButtonProps>;
-export {};
+export declare const Button: React.ForwardRefExoticComponent<{
+    sx?: import("../../../theme").StylesProp | undefined;
+    children?: React.ReactNode;
+} & React.HTMLAttributes<HTMLButtonElement> & {
+    size?: BUTTON_SIZE | undefined;
+    type?: BUTTON_TYPE | undefined;
+    color?: COLOR | undefined;
+    primaryIcon?: React.FC<any> | undefined;
+    leftIcon?: React.FC<any> | undefined;
+    rightIcon?: React.FC<any> | undefined;
+    accessibleLabel?: string | undefined;
+} & React.RefAttributes<HTMLButtonElement>>;

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

@@ -9,9 +9,14 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "theme-ui/jsx-runtime";
-import { COLOR, colors } from "../../../theme/colors";
-import { TYPOGRAPHY_TYPE, getTypographyStyles } from "../../../theme/typography";
+import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
+/** @jsxImportSource theme-ui */
+import React, { useState } from 'react';
+import { useTheme } from '../../../theme';
+import { COLOR, colors } from '../../../theme/colors';
+import { TYPOGRAPHY_TYPE, getIconSize, getTypographyStyles, } from '../../../theme/typography';
+import { Icon } from '../Icon';
+import { useEnvironment } from '../../providers/env';
 export var BUTTON_SIZE;
 (function (BUTTON_SIZE) {
     BUTTON_SIZE["SM"] = "sm";
@@ -28,55 +33,100 @@ const defaultPaddingX = {
     [BUTTON_SIZE.MD]: 3,
     [BUTTON_SIZE.LG]: 3,
 };
-const defaultPaddingY = {
+const defaultHeight = {
+    [BUTTON_SIZE.SM]: '2rem',
+    [BUTTON_SIZE.MD]: '2.5rem',
+    [BUTTON_SIZE.LG]: '3rem',
+};
+const iconMargin = {
     [BUTTON_SIZE.SM]: 1,
-    [BUTTON_SIZE.MD]: 1,
-    [BUTTON_SIZE.LG]: 2
+    [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";
     // ARROW
 })(BUTTON_TYPE || (BUTTON_TYPE = {}));
-export const Button = (_a) => {
-    var { size: sizeParam, type: typeParam, color, sx } = _a, rest = __rest(_a, ["size", "type", "color", "sx"]);
+export const Button = React.forwardRef((_a, ref) => {
+    var { size: sizeParam, type: typeParam, color, primaryIcon, leftIcon, rightIcon, children, sx } = _a, rest = __rest(_a, ["size", "type", "color", "primaryIcon", "leftIcon", "rightIcon", "children", "sx"]);
+    const theme = useTheme();
+    const [hover, setHover] = useState(false);
+    const { flagInDevelopment } = useEnvironment();
     let bg = COLOR.PRIMARY;
-    let highlightColor = COLOR.PRIMARY_HIGHLIGHT;
+    let hoverBg = COLOR.PRIMARY_HIGHLIGHT;
     let textColor = COLOR.TEXT;
-    let highlightTextColor = undefined;
+    let hoverTextColor = undefined;
+    let borderColor = COLOR.TRANSPARENT;
+    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;
+    // const height = width;
+    if (isIconButton && !rest['aria-label']) {
+        flagInDevelopment('Icon buttons should include aria-label prop for accessibility');
+    }
+    if (isIconButton) {
+        hoverTransform = 'scale(1.15)';
+    }
     if (type === BUTTON_TYPE.DEFAULT) {
         bg = color || COLOR.PRIMARY;
-        highlightColor = bg === COLOR.PRIMARY
-            ? COLOR.PRIMARY_HIGHLIGHT
-            : bg === COLOR.SECONDARY
-                ? COLOR.SECONDARY_HIGHLIGHT
-                : bg;
-        textColor = bg === COLOR.PRIMARY
-            ? COLOR.TEXT_ON_PRIMARY
-            : bg === COLOR.SECONDARY
-                ? COLOR.TEXT_ON_SECONDARY
-                : COLOR.TEXT;
+        hoverBg =
+            bg === COLOR.PRIMARY
+                ? COLOR.PRIMARY_HIGHLIGHT
+                : bg === COLOR.SECONDARY
+                    ? COLOR.SECONDARY_HIGHLIGHT
+                    : bg;
+        textColor =
+            bg === COLOR.PRIMARY
+                ? COLOR.TEXT_ON_PRIMARY
+                : bg === COLOR.SECONDARY
+                    ? COLOR.TEXT_ON_SECONDARY
+                    : COLOR.TEXT;
+        hoverTextColor = textColor;
     }
     if (type === BUTTON_TYPE.TEXT) {
         bg = COLOR.TRANSPARENT;
+        hoverBg = bg;
         textColor = color || COLOR.PRIMARY;
-        highlightColor = textColor === COLOR.PRIMARY
-            ? COLOR.PRIMARY
-            : textColor === COLOR.SECONDARY
-                ? COLOR.SECONDARY
-                : bg;
-        highlightTextColor = COLOR.BACKGROUND;
+        hoverTextColor = textColor;
+        hoverShadow = undefined;
+        hoverDecoration = 'underline';
+    }
+    if (type === BUTTON_TYPE.OUTLINE) {
+        bg = COLOR.BACKGROUND;
+        hoverBg = COLOR.BACKGROUND;
+        textColor = color || COLOR.PRIMARY;
+        hoverTextColor = textColor;
+        borderColor = textColor;
     }
     const typography = typographyMap[size];
-    return (_jsx("button", Object.assign({ sx: Object.assign(Object.assign({ bg: bg || colors.primary, color: textColor, px: defaultPaddingX[size], py: defaultPaddingY[size], border: 'none', borderRadius: '4px', ":hover": {
-                bg: highlightColor,
-                color: highlightTextColor,
+    const typographyStyles = getTypographyStyles(typography);
+    return (_jsxs("button", Object.assign({ ref: ref, onMouseEnter: () => {
+            setHover(true);
+        }, onMouseLeave: () => {
+            setHover(false);
+        }, sx: Object.assign(Object.assign({ bg: bg || colors.primary, color: textColor, px: paddingX, width: width, height: height, border: 'solid 1px', borderRadius: '4px', borderColor, display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center', ':hover': {
+                bg: hoverBg,
+                color: hoverTextColor,
+                boxShadow: hoverShadow,
                 cursor: 'pointer',
-            }, ":focus": {
-                bg: highlightColor,
-                color: highlightTextColor
-            } }, getTypographyStyles(typography)), sx) }, rest)));
-};
+                transform: hoverTransform,
+                textDecoration: hoverDecoration,
+            } }, typographyStyles), sx) }, rest, { children: [leftIcon && (_jsx(Icon, { icon: leftIcon, size: typographyStyles.fontSize, sx: { mr: iconMargin[size] }, color: hover ? hoverTextColor : textColor })), _jsx("div", Object.assign({ css: {
+                    flexGrow: 1,
+                    justifyContent: 'flex-start',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                    textAlign: 'start',
+                } }, { children: primaryIcon ? (_jsx(Icon, { icon: primaryIcon, size: getIconSize(typographyStyles.fontSize), color: hover ? hoverTextColor : textColor })) : (children) })), rightIcon && (_jsx(Icon, { icon: rightIcon, size: typographyStyles.fontSize, sx: { ml: iconMargin[size] }, color: hover ? hoverTextColor : textColor }))] })));
+});

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,9 @@
+/** @jsxImportSource theme-ui */
+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", onClick: (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,6 @@
+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;

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

@@ -0,0 +1,23 @@
+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, {}) })),
+};

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { StyledElementProps } 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>;
+}, string>;
+export declare const CheckboxGroup: React.FC<CheckboxGroupProps>;
+export {};

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

@@ -0,0 +1,35 @@
+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 { 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, onChange } = _a, rest = __rest(_a, ["options", "checkedOptions", "onChange"]);
+    return (_jsx(Column, Object.assign({}, rest, { children: options.map((option) => (_jsx(Group, Object.assign({ type: GROUP_TYPE.RAW }, { children: ({ labelTargetId }) => (_jsxs(Row, Object.assign({ sx: {
+                    mb: 3,
+                    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.PARAGRAPH_MEDIUM)) }, { children: option.label }))] }))) })))) })));
+};

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

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

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

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

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

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

package/dist/components/elements/Fields/Radio/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 Radio = (_a) => {
+    var { checked, onChange, sx } = _a, rest = __rest(_a, ["checked", "onChange", "sx"]);
+    const theme = useTheme();
+    return (_jsx("input", Object.assign({ type: "radio", onClick: (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/RadioGroup/RadioGroup.stories.d.ts

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

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

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

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { StyledElementProps } from '../../../../theme';
+import { Key } from '../option';
+type Option = {
+    value: Key;
+    label: string;
+};
+type RadioGroupProps = StyledElementProps<HTMLDivElement, {
+    onChange: (value: Key) => void;
+    options: Option[];
+    checked?: Key;
+}, string>;
+export declare const RadioGroup: React.FC<RadioGroupProps>;
+export {};

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

@@ -0,0 +1,28 @@
+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 { Row } from '../../layout/Row';
+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';
+import { Radio } from '../Radio';
+export const RadioGroup = (_a) => {
+    var { options, checked, onChange } = _a, rest = __rest(_a, ["options", "checked", "onChange"]);
+    return (_jsx(Column, Object.assign({}, rest, { children: options.map((option) => (_jsx(Group, Object.assign({ type: GROUP_TYPE.RAW }, { children: ({ labelTargetId }) => (_jsxs(Row, Object.assign({ sx: {
+                    mb: 3,
+                    alignItems: 'center',
+                } }, { children: [_jsx(Radio, { onChange: () => {
+                            onChange(option.value);
+                        }, checked: checked === option.value, id: labelTargetId, sx: { mr: 2 } }), _jsx(Label, Object.assign({ sx: Object.assign({ cursor: 'pointer' }, getTypographyStyles(TYPOGRAPHY_TYPE.PARAGRAPH_MEDIUM)) }, { children: option.label }))] }))) })))) })));
+};

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

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

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

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import AppleIcon from '@mui/icons-material/Apple';
+import { INPUT_SIZE } from '../TextInput';
+import { Select } from './index';
+import { useState } from 'react';
+import { Column } from '../../layout/Column';
+import { Group } from '../../Group';
+import { Heading, HEADING_SIZE } from '../../text/Heading';
+const meta = {
+    title: 'Elements/Fields/Select',
+    component: Select,
+    tags: ['autodocs'],
+};
+export default meta;
+const sizes = [
+    { label: 'Large', size: INPUT_SIZE.LG },
+    { label: 'Medium', size: INPUT_SIZE.MD },
+    { label: 'Small', size: INPUT_SIZE.SM },
+];
+const options = [
+    { value: 'orange', label: 'Orange' },
+    { value: 'apple', label: 'Apple' },
+    { value: 'strawberry', label: 'Strawberry' },
+    { value: 'pineapple', label: 'Pineapple' },
+];
+const StatefulSelect = (props) => {
+    const [value, setValue] = useState('');
+    return (_jsx(Select, Object.assign({ options: options }, props, { value: value, onSelectOption: setValue, placeholder: "Select A Fruit..." })));
+};
+export const Default = {
+    render: () => (_jsx(Column, { children: sizes.map((size) => (_jsxs(Group, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.MD }, { children: size.label })), _jsx(StatefulSelect, { size: size.size, leftIcon: AppleIcon, sx: { mt: 1 } })] }))) })),
+};

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { StyledElementProps } from '../../../../theme';
+import { INPUT_SIZE } from '../TextInput';
+import { BasicOption, Key, RenderOption, RenderOptionLabel } from '../option';
+type SelectProps<Value extends Key, Option extends BasicOption<Value>> = StyledElementProps<HTMLSelectElement, {
+    placeholder: string;
+    size?: INPUT_SIZE;
+    leftIcon?: React.FC<any>;
+    value: Value;
+    onSelectOption: (value: Value) => void;
+    options: Option[];
+    renderOption: RenderOption<Value, Option>;
+    renderOptionLabel: RenderOptionLabel<Option>;
+}, string>;
+export declare function Select<Value extends Key, Option extends BasicOption<Value>>({ size: sizeParam, placeholder, leftIcon, value, onSelectOption, options, renderOption, renderOptionLabel: renderOptionLabelParam, sx, }: SelectProps<Value, Option>): import("react/jsx-runtime").JSX.Element;
+export {};