@ndlib/component-library 0.0.37 → 0.0.38

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

@@ -24,6 +24,7 @@ type ButtonProps = StyledElementProps<HTMLButtonElement, {
     accessibleLabel?: string;
     loading?: boolean;
     disabled?: boolean;
+    disableFocusStyles?: boolean;
 }>;
 export declare const Button: React.ForwardRefExoticComponent<{
     sx?: import("../../../theme").StylesProp | undefined;
@@ -40,6 +41,7 @@ export declare const Button: React.ForwardRefExoticComponent<{
     accessibleLabel?: string | undefined;
     loading?: boolean | undefined;
     disabled?: boolean | undefined;
+    disableFocusStyles?: boolean | undefined;
 } & {
     htmlFor?: string | undefined;
 } & React.RefAttributes<HTMLButtonElement>>;

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

@@ -52,7 +52,7 @@ export var BUTTON_TYPE;
     // ARROW
 })(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 } = _a, rest = __rest(_a, ["size", "type", "color", "customColor", "textColor", "primaryIcon", "leftIcon", "rightIcon", "disabled", "children", "sx", "loading"]);
+    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();
@@ -126,7 +126,7 @@ export const Button = React.forwardRef((_a, ref) => {
         : 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': hoverStyles, ':focus': hoverStyles }, typographyStyles), sx) }, rest, { children: [leftIcon && (_jsx(Icon, { icon: leftIcon, size: typographyStyles.fontSize, sx: { mr: iconMargin[size] }, color: textColor })), _jsx("div", Object.assign({ css: {
+        }, 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',

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

@@ -5,3 +5,4 @@ export default meta;
 type Story = StoryObj<typeof Select>;
 export declare const Default: Story;
 export declare const WithLabel: Story;
+export declare const InvertedColors: Story;

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

@@ -6,6 +6,7 @@ import { useState } from 'react';
 import { Column } from '../../layout/Column';
 import { Group } from '../../Group';
 import { Heading, HEADING_SIZE } from '../../text/Heading';
+import { COLOR } from '../../../../theme/colors';
 const meta = {
     title: 'Elements/Fields/Select',
     component: Select,
@@ -33,3 +34,6 @@ export const Default = {
 export const WithLabel = {
     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: 2 }, label: "Fruit" })] }))) })),
 };
+export const InvertedColors = {
+    render: () => (_jsx(Column, Object.assign({ sx: { backgroundColor: COLOR.BLACK, p: 4 } }, { children: sizes.map((size) => (_jsxs(Group, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.MD, sx: { color: COLOR.WHITE } }, { children: size.label })), _jsx(StatefulSelect, { size: size.size, leftIcon: AppleIcon, sx: { mt: 2 }, inverted: true, label: "Fruit" })] }))) }))),
+};

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

@@ -1,3 +1,4 @@
+/** @jsxImportSource theme-ui */
 import React from 'react';
 import { StyledElementProps } from '../../../../theme';
 import { INPUT_SIZE } from '../TextInput';
@@ -8,10 +9,11 @@ type SelectProps<Value extends Key, Option extends BasicOption<Value>> = StyledE
     leftIcon?: React.FC<any>;
     value: Value;
     label?: string;
+    inverted?: boolean;
     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, label, onSelectOption, options, renderOption, renderOptionLabel: renderOptionLabelParam, sx, }: SelectProps<Value, Option>): import("react/jsx-runtime").JSX.Element;
+export declare function Select<Value extends Key, Option extends BasicOption<Value>>({ size: sizeParam, placeholder, leftIcon, value, label, onSelectOption, options, renderOption, inverted, renderOptionLabel: renderOptionLabelParam, sx, }: SelectProps<Value, Option>): React.JSX.Element;
 export {};

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

@@ -1,4 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
+/** @jsxImportSource theme-ui */
 import { useMemo, useState } from 'react';
 import _ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
 import { useFloating, size as sizeMiddleware, offset, autoPlacement, } from '@floating-ui/react';
@@ -30,7 +31,7 @@ const buttonSizeMap = {
     [INPUT_SIZE.LG]: BUTTON_SIZE.LG,
 };
 const DEFAULT_WIDTH = '16rem';
-export function Select({ size: sizeParam, placeholder, leftIcon, value, label, onSelectOption, options, renderOption, renderOptionLabel: renderOptionLabelParam, sx, }) {
+export function Select({ size: sizeParam, placeholder, leftIcon, value, label, onSelectOption, options, renderOption, inverted, renderOptionLabel: renderOptionLabelParam, sx, }) {
     const theme = useTheme();
     const listboxId = useUniqueHtmlId('select-list-box');
     const inputId = useUniqueHtmlId('select-input');
@@ -116,16 +117,56 @@ export function Select({ size: sizeParam, placeholder, leftIcon, value, label, o
     const typography = typographyMap[size];
     const typographyStyles = getTypographyStyles(typography);
     const renderOptionLabel = renderOptionLabelParam || defaultRenderOptionLabel;
-    return (_jsxs(Box, Object.assign({ sx: { position: 'relative' } }, { children: [_jsx(Label, Object.assign({ htmlFor: inputId, typography: labelTypographyMap[size], sx: {
+    const focusStyles = {
+        boxShadow: inverted ? theme.boxShadow.INVERTED : theme.boxShadow.NORMAL,
+    };
+    return (_jsxs(Box, Object.assign({ sx: {
+            width: DEFAULT_WIDTH,
+            position: 'relative',
+            borderRadius: '4px',
+            backgroundColor: inverted ? COLOR.DARK_GRAY : COLOR.WHITE,
+            ':hover fieldset': focusStyles,
+            ':focus fieldset': focusStyles,
+        } }, { children: [_jsx("fieldset", Object.assign({ sx: {
+                    textAlign: 'left',
+                    position: 'absolute',
+                    inset: '-5px 0px 0px 0px',
+                    margin: '0px',
+                    padding: '0px 0.5rem',
+                    pointerEvents: 'none',
+                    borderRadius: 'inherit',
+                    borderStyle: 'solid',
+                    borderWidth: '1px',
+                    overflow: 'hidden',
+                    minWidth: '0%',
+                    borderColor: inverted ? COLOR.GRAY : COLOR.LIGHT_GRAY,
+                    zIndex: theme.zIndex.LABEL,
+                } }, { children: _jsx("legend", Object.assign({ style: {
+                        width: 'auto',
+                        float: 'unset',
+                        overflow: 'hidden',
+                        position: 'relative',
+                        display: 'block',
+                        padding: '0',
+                        height: '8px',
+                        fontSize: '0.75em',
+                        visibility: 'hidden',
+                        whiteSpace: 'nowrap',
+                    } }, { children: label && (_jsx(Label, Object.assign({ standalone: true, sx: {
+                            px: 1,
+                            position: 'relative',
+                            display: 'inline-flex',
+                            opacity: '0',
+                            visibility: 'hidden',
+                        }, typography: labelTypographyMap[size] }, { children: label }))) })) })), _jsx(Label, Object.assign({ htmlFor: inputId, typography: labelTypographyMap[size], sx: {
                     position: 'absolute',
-                    color: COLOR.ND_PROVOST_BLUE,
-                    backgroundColor: COLOR.WHITE,
                     left: '0.5rem',
                     lineHeight: 1,
                     zIndex: theme.zIndex.LABEL,
-                    px: size === INPUT_SIZE.SM ? 1 : 2,
+                    color: inverted ? COLOR.EXTRA_LIGHT_GRAY : COLOR.PRIMARY,
+                    px: 1,
                     top: labelOffsetMap[size],
-                } }, { children: label })), _jsx(Button, Object.assign({ ref: refs.setReference, 
+                } }, { children: label })), _jsx(Button, Object.assign({ ref: refs.setReference, disableFocusStyles: true, 
                 // A11y attributes
                 role: "combobox", "aria-controls": listboxId, "aria-expanded": isOpen, "aria-autocomplete": "none", "aria-activedescendant": isOpen && stagedOptionValue
                     ? getOptionId(stagedOptionValue)
@@ -138,14 +179,15 @@ export function Select({ size: sizeParam, placeholder, leftIcon, value, label, o
                     else {
                         close();
                     }
-                }, sx: Object.assign(Object.assign({ height, width: DEFAULT_WIDTH, border: 'solid 1px', borderColor: COLOR.GRAY, borderRadius: '4px', flexDirection: 'row', alignItems: 'center', position: 'relative', ':hover': {
-                        boxShadow: theme.boxShadow.NORMAL,
-                    }, ':focus': {
-                        boxShadow: theme.boxShadow.NORMAL,
-                    } }, typographyStyles), sx), leftIcon: leftIcon, rightIcon: ArrowDropDownIcon }, { children: currentOption ? renderOptionLabel(currentOption) : placeholder })), isOpen && (_jsx(ListBox, { id: listboxId, options: options, selected: value, focused: stagedOptionValue, selectOption: (option) => {
+                }, color: inverted ? COLOR.EXTRA_LIGHT_GRAY : COLOR.TEXT, sx: Object.assign(Object.assign({ height, width: '100%', border: 'solid 0px', 
+                    // borderColor: COLOR.GRAY,
+                    // borderRadius: '4px',
+                    flexDirection: 'row', alignItems: 'center', position: 'relative', zIndex: theme.zIndex.NORMAL, background: 'none' }, typographyStyles), sx), leftIcon: leftIcon, rightIcon: ArrowDropDownIcon }, { children: currentOption ? renderOptionLabel(currentOption) : placeholder })), isOpen && (_jsx(ListBox, { id: listboxId, options: options, selected: value, focused: stagedOptionValue, selectOption: (option) => {
                     onSelectOption && onSelectOption(option.value);
                     close();
                 }, ref: refs.setFloating, renderOption: renderOption, sx: {
                     zIndex: theme.zIndex.DROPDOWN,
-                }, style: Object.assign(Object.assign({ minWidth: dropdownMinWidth }, floatingStyles), { zIndex: 1 }) }))] })));
+                }, style: Object.assign(Object.assign({ minWidth: dropdownMinWidth }, floatingStyles), { boxShadow: inverted
+                        ? theme.boxShadow.INVERTED
+                        : theme.boxShadow.NORMAL }) }))] })));
 }

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

@@ -5,3 +5,4 @@ export default meta;
 type Story = StoryObj<typeof TextInput>;
 export declare const Default: Story;
 export declare const WithLabel: Story;
+export declare const Inverted: Story;

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

@@ -5,6 +5,7 @@ import { useState } from 'react';
 import { Column } from '../../layout/Column';
 import { Group } from '../../Group';
 import { Heading, HEADING_SIZE } from '../../text/Heading';
+import { COLOR } from '../../../../theme/colors';
 const meta = {
     title: 'Elements/Fields/TextInput',
     component: TextInput,
@@ -24,5 +25,8 @@ 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(StatefulInput, { size: size.size, leftIcon: SearchIcon, placeholder: "Placeholder", sx: { mt: 2 } })] }))) })),
 };
 export const WithLabel = {
-    render: () => (_jsx(Column, { children: sizes.map((size) => (_jsxs(Group, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.MD }, { children: size.label })), _jsx(StatefulInput, { size: size.size, leftIcon: SearchIcon, label: "Search", sx: { mt: 2 } })] }))) })),
+    render: () => (_jsx(Column, { children: sizes.map((size) => (_jsxs(Group, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.MD }, { children: size.label })), _jsx(StatefulInput, { size: size.size, leftIcon: SearchIcon, label: "Search", placeholder: "Placeholder", sx: { mt: 2 } })] }))) })),
+};
+export const Inverted = {
+    render: () => (_jsx(Column, Object.assign({ sx: { backgroundColor: COLOR.BLACK, p: 2 } }, { children: sizes.map((size) => (_jsxs(Group, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.MD, sx: { color: COLOR.WHITE } }, { children: size.label })), _jsx(StatefulInput, { size: size.size, leftIcon: SearchIcon, placeholder: "Placeholder", label: "Search", inverted: true, sx: { mt: 2 } })] }))) }))),
 };

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

@@ -21,6 +21,7 @@ export type TextInputProps = StyledElementProps<HTMLInputElement, {
     size?: INPUT_SIZE;
     leftIcon?: React.FC<any>;
     inline?: boolean;
+    inverted?: boolean;
     label?: string;
     value: string;
     onChange?: (value: string) => void;
@@ -33,6 +34,7 @@ export declare const TextInput: React.ForwardRefExoticComponent<{
     size?: INPUT_SIZE | undefined;
     leftIcon?: React.FC<any> | undefined;
     inline?: boolean | undefined;
+    inverted?: boolean | undefined;
     label?: string | undefined;
     value: string;
     onChange?: ((value: string) => void) | undefined;

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

@@ -50,7 +50,7 @@ const defaultHeight = {
     [INPUT_SIZE.LG]: '3rem',
 };
 export const TextInput = React.forwardRef((_a, ref) => {
-    var { value, label, onChange, onChangeRaw, onClick, inline, size: sizeParam, leftIcon, sx } = _a, rest = __rest(_a, ["value", "label", "onChange", "onChangeRaw", "onClick", "inline", "size", "leftIcon", "sx"]);
+    var { value, label, onChange, onChangeRaw, onClick, inline, inverted, size: sizeParam, leftIcon, sx } = _a, rest = __rest(_a, ["value", "label", "onChange", "onChangeRaw", "onClick", "inline", "inverted", "size", "leftIcon", "sx"]);
     const id = useUniqueHtmlId('text-input');
     const theme = useTheme();
     const size = sizeParam || INPUT_SIZE.MD;
@@ -59,27 +59,58 @@ export const TextInput = React.forwardRef((_a, ref) => {
     const height = defaultHeight[size];
     const typography = typographyMap[size];
     const typographyStyles = getTypographyStyles(typography);
+    const focusStyles = {
+        boxShadow: inverted ? theme.boxShadow.INVERTED : theme.boxShadow.NORMAL,
+    };
     return (_jsxs("div", Object.assign({ ref: ref, onClick: onClick, id: id, sx: Object.assign(Object.assign({ height,
-            display, px: paddingX, border: 'solid 1px', borderColor: COLOR.GRAY, borderRadius: '4px', flexDirection: 'row', position: 'relative', alignItems: 'center', ':hover': {
-                boxShadow: theme.boxShadow.NORMAL,
-            }, ':focus': {
-                boxShadow: theme.boxShadow.NORMAL,
-            } }, typographyStyles), sx) }, { children: [leftIcon && (_jsx(Icon, { icon: leftIcon, sx: {
+            display, px: paddingX, backgroundColor: inverted ? COLOR.DARK_GRAY : COLOR.WHITE, borderRadius: '4px', flexDirection: 'row', position: 'relative', alignItems: 'center', ':hover': focusStyles, ':focus': focusStyles }, typographyStyles), sx) }, { children: [_jsx("fieldset", Object.assign({ sx: {
+                    textAlign: 'left',
+                    position: 'absolute',
+                    inset: '-5px 0px 0px 0px',
+                    margin: '0px',
+                    padding: '0px 0.5rem',
+                    pointerEvents: 'none',
+                    borderRadius: 'inherit',
+                    borderStyle: 'solid',
+                    borderWidth: '1px',
+                    overflow: 'hidden',
+                    minWidth: '0%',
+                    borderColor: inverted ? COLOR.GRAY : COLOR.LIGHT_GRAY,
+                    zIndex: theme.zIndex.LABEL,
+                }, "aria-ignore": true }, { children: _jsx("legend", Object.assign({ style: {
+                        width: 'auto',
+                        float: 'unset',
+                        overflow: 'hidden',
+                        position: 'relative',
+                        display: 'block',
+                        padding: '0',
+                        height: '8px',
+                        fontSize: '0.75em',
+                        visibility: 'hidden',
+                        whiteSpace: 'nowrap',
+                    } }, { children: label && (_jsx(Label, Object.assign({ standalone: true, "aria-hidden": "true", sx: {
+                            px: 1,
+                            position: 'relative',
+                            display: 'inline-flex',
+                            opacity: '0',
+                            visibility: 'hidden',
+                        }, typography: labelTypographyMap[size] }, { children: label }))) })) })), leftIcon && (_jsx(Icon, { icon: leftIcon, color: inverted ? COLOR.EXTRA_LIGHT_GRAY : COLOR.TEXT, sx: {
                     mr: 2,
                     fontSize: getIconSize(typographyStyles.fontSize),
                 } })), _jsx("input", Object.assign({ value: value, onChange: (event) => {
                     onChange && onChange(event.target.value);
                     onChangeRaw && onChangeRaw(event);
-                }, sx: Object.assign(Object.assign({ px: 0, py: 0, width: '100%', border: 'none' }, typographyStyles), { ':focus': {
+                }, sx: Object.assign(Object.assign({ px: 0, py: 0, width: '100%', border: 'none', backgroundColor: inverted ? COLOR.DARK_GRAY : COLOR.WHITE, color: inverted ? COLOR.EXTRA_LIGHT_GRAY : COLOR.TEXT }, typographyStyles), { '::placeholder': {
+                        color: inverted ? COLOR.LIGHT_GRAY : COLOR.GRAY,
+                    }, ':focus': {
                         outline: 'none',
                     } }) }, rest)), label && (_jsx(Label, Object.assign({ htmlFor: id, typography: labelTypographyMap[size], sx: {
                     position: 'absolute',
-                    color: COLOR.ND_PROVOST_BLUE,
-                    backgroundColor: COLOR.WHITE,
+                    color: inverted ? COLOR.EXTRA_LIGHT_GRAY : COLOR.ND_PROVOST_BLUE,
                     left: '0.5rem',
                     lineHeight: 1,
                     zIndex: theme.zIndex.LABEL,
-                    px: size === INPUT_SIZE.SM ? 1 : 2,
+                    px: 1,
                     top: labelOffsetMap[size],
                 } }, { children: label })))] })));
 });

package/dist/theme/custom.d.ts

@@ -1,6 +1,7 @@
 export declare enum BOX_SHADOW {
     NORMAL = "0 0 8px #dfdfdf",
-    EMPHASIZED = "0 0 12px #d3d3d3"
+    EMPHASIZED = "0 0 12px #d3d3d3",
+    INVERTED = "0 0 8px #767676"
 }
 export declare enum Z_INDEX {
     NORMAL = 1,

package/dist/theme/custom.js

@@ -3,6 +3,7 @@ export var BOX_SHADOW;
 (function (BOX_SHADOW) {
     BOX_SHADOW["NORMAL"] = "0 0 8px #dfdfdf";
     BOX_SHADOW["EMPHASIZED"] = "0 0 12px #d3d3d3";
+    BOX_SHADOW["INVERTED"] = "0 0 8px #767676";
 })(BOX_SHADOW || (BOX_SHADOW = {}));
 export var Z_INDEX;
 (function (Z_INDEX) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndlib/component-library",
-  "version": "0.0.37",
+  "version": "0.0.38",
   "type": "module",
   "sideEffects": false,
   "files": [