@paubox/ui 0.8.1 → 0.8.3

package/index.esm.js

@@ -1637,7 +1637,7 @@ function _templateObject3$7() {
     };
     return data;
 }
-function _templateObject4$4() {
+function _templateObject4$5() {
     var data = _tagged_template_literal$o([
         "\n  ",
         "\n  font-size: ",
@@ -1645,7 +1645,7 @@ function _templateObject4$4() {
         "rem;\n  letter-spacing: ",
         "px;\n  font-weight: 600;\n"
     ]);
-    _templateObject4$4 = function _templateObject() {
+    _templateObject4$5 = function _templateObject() {
         return data;
     };
     return data;
@@ -1928,7 +1928,7 @@ var commonStyles = css(_templateObject$o());
 var $headline100Regular = css(_templateObject1$d(), commonStyles, headline100FontSize / BASE_FONT_SIZE, headline100LineHeight / BASE_FONT_SIZE, headline100LetterSpacing);
 var $headline100Semibold = css(_templateObject2$a(), commonStyles, headline100FontSize / BASE_FONT_SIZE, headline100LineHeight / BASE_FONT_SIZE, headline100LetterSpacing);
 var $headline200Regular = css(_templateObject3$7(), commonStyles, headline200FontSize / BASE_FONT_SIZE, headline200LineHeight / BASE_FONT_SIZE, headline200LetterSpacing);
-var $headline200Semibold = css(_templateObject4$4(), commonStyles, headline200FontSize / BASE_FONT_SIZE, headline200LineHeight / BASE_FONT_SIZE, headline200LetterSpacing);
+var $headline200Semibold = css(_templateObject4$5(), commonStyles, headline200FontSize / BASE_FONT_SIZE, headline200LineHeight / BASE_FONT_SIZE, headline200LetterSpacing);
 var $headline300Regular = css(_templateObject5$3(), commonStyles, headline300FontSize / BASE_FONT_SIZE, headline300LineHeight / BASE_FONT_SIZE, headline300LetterSpacing);
 var $headline300Semibold = css(_templateObject6$3(), commonStyles, headline300FontSize / BASE_FONT_SIZE, headline300LineHeight / BASE_FONT_SIZE, headline300LetterSpacing);
 // PARAGRAPH
@@ -2080,12 +2080,12 @@ function _templateObject3$6() {
     };
     return data;
 }
-function _templateObject4$3() {
+function _templateObject4$4() {
     var data = _tagged_template_literal$n([
         "\n      background-color: ",
         ";\n    "
     ]);
-    _templateObject4$3 = function _templateObject() {
+    _templateObject4$4 = function _templateObject() {
         return data;
     };
     return data;
@@ -2152,7 +2152,7 @@ var AlertBar = function(props) {
     var textStyles = css(_templateObject2$9(), $paragraph200Regular);
     var alertStyles = {
         info: css(_templateObject3$6(), primary100),
-        warning: css(_templateObject4$3(), warning100),
+        warning: css(_templateObject4$4(), warning100),
         error: css(_templateObject5$2(), danger100),
         success: css(_templateObject6$2(), success100)
     };
@@ -2400,13 +2400,15 @@ var IconWrapper$3 = styled.span(_templateObject$l(), function(props) {
     return props.iconLeft ? '0 8px 0 0' : props.iconRight ? '0 0 0 8px' : '0';
 });
 var Button = /*#__PURE__*/ forwardRef(function(_param, ref) {
-    var IconLeft = _param.iconLeft, IconRight = _param.iconRight, children = _param.children, props = _object_without_properties$i(_param, [
+    var IconLeft = _param.iconLeft, IconRight = _param.iconRight, _param_type = _param.type, type = _param_type === void 0 ? 'button' : _param_type, children = _param.children, props = _object_without_properties$i(_param, [
         "iconLeft",
         "iconRight",
+        "type",
         "children"
     ]);
     return /*#__PURE__*/ jsxs(BaseButton, _object_spread_props$n(_object_spread$t({
-        ref: ref
+        ref: ref,
+        type: type
     }, props), {
         children: [
             IconLeft && /*#__PURE__*/ jsx(IconWrapper$3, {
@@ -22359,8 +22361,7 @@ function _tagged_template_literal$f(strings, raw) {
 }
 function _templateObject$f() {
     var data = _tagged_template_literal$f([
-        "\n    cursor: pointer;\n    width: 100%;\n    padding: 0 0.5rem;\n    display: flex;\n    flex-direction: row;\n    box-sizing: border-box;\n    white-space: nowrap;\n    gap: 0.5rem;\n\n    &:hover {\n      background-color: ",
-        ";\n    }\n  "
+        "\n    cursor: pointer;\n    width: 100%;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    box-sizing: border-box;\n    white-space: nowrap;\n    gap: 0.5rem;\n  "
     ]);
     _templateObject$f = function _templateObject() {
         return data;
@@ -22369,8 +22370,8 @@ function _templateObject$f() {
 }
 function _templateObject1$a() {
     var data = _tagged_template_literal$f([
-        "\n    cursor: pointer;\n    background-color: transparent;\n    text-align: left;\n    border: none;\n    padding: 1rem 0.625rem;\n    white-space: nowrap;\n    width: 100%;\n    ",
-        "\n  "
+        "\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 0.5rem;\n    &:hover {\n      background-color: ",
+        ";\n    }\n  "
     ]);
     _templateObject1$a = function _templateObject() {
         return data;
@@ -22379,7 +22380,8 @@ function _templateObject1$a() {
 }
 function _templateObject2$7() {
     var data = _tagged_template_literal$f([
-        "\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  "
+        "\n    cursor: pointer;\n    background-color: transparent;\n    text-align: left;\n    border: none;\n    padding: 1rem 0.625rem;\n    white-space: nowrap;\n    width: 100%;\n    ",
+        "\n  "
     ]);
     _templateObject2$7 = function _templateObject() {
         return data;
@@ -22388,44 +22390,65 @@ function _templateObject2$7() {
 }
 function _templateObject3$5() {
     var data = _tagged_template_literal$f([
-        "\n    display: inline-block;\n    width: 100%;\n  "
+        "\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  "
     ]);
     _templateObject3$5 = function _templateObject() {
         return data;
     };
     return data;
 }
+function _templateObject4$3() {
+    var data = _tagged_template_literal$f([
+        "\n    display: inline-block;\n    width: 100%;\n  "
+    ]);
+    _templateObject4$3 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
 var DropdownOption = function(param) {
-    var label = param.label, href = param.href, onClick = param.onClick, icon = param.icon;
-    var dropdownOptionStyles = css(_templateObject$f(), primary100);
-    var optionStyles = css(_templateObject1$a(), $paragraph200Regular);
-    var iconStyles = css(_templateObject2$7());
-    var dropdownOptionWrapper = css(_templateObject3$5());
+    var label = param.label, href = param.href, selected = param.selected, checkbox = param.checkbox, onClick = param.onClick, icon = param.icon;
+    var dropdownOptionStyles = css(_templateObject$f());
+    var checkboxStyles = css(_templateObject1$a(), primary100);
+    var optionStyles = css(_templateObject2$7(), $paragraph200Regular);
+    var iconStyles = css(_templateObject3$5());
+    var dropdownOptionWrapper = css(_templateObject4$3());
     return /*#__PURE__*/ jsx("div", {
         css: dropdownOptionWrapper,
         children: /*#__PURE__*/ jsxs("div", {
-            css: dropdownOptionStyles,
+            css: checkboxStyles,
             children: [
-                icon && /*#__PURE__*/ jsx("div", {
-                    css: iconStyles,
-                    children: icon
-                }),
-                href ? /*#__PURE__*/ jsx("a", {
-                    css: optionStyles,
-                    href: href,
+                checkbox && /*#__PURE__*/ jsx(Checkbox, {
+                    checked: selected,
                     onClick: function() {
                         return onClick === null || onClick === void 0 ? void 0 : onClick();
-                    },
-                    children: /*#__PURE__*/ jsx("div", {
-                        children: label
-                    })
-                }) : /*#__PURE__*/ jsx("button", {
-                    css: optionStyles,
-                    type: "button",
-                    onClick: function() {
-                        return onClick === null || onClick === void 0 ? void 0 : onClick();
-                    },
-                    children: label
+                    }
+                }),
+                /*#__PURE__*/ jsxs("div", {
+                    css: dropdownOptionStyles,
+                    children: [
+                        icon && /*#__PURE__*/ jsx("div", {
+                            css: iconStyles,
+                            children: icon
+                        }),
+                        href ? /*#__PURE__*/ jsx("a", {
+                            css: optionStyles,
+                            href: href,
+                            onClick: function() {
+                                return onClick === null || onClick === void 0 ? void 0 : onClick();
+                            },
+                            children: /*#__PURE__*/ jsx("div", {
+                                children: label
+                            })
+                        }) : /*#__PURE__*/ jsx("button", {
+                            css: optionStyles,
+                            type: "button",
+                            onClick: function() {
+                                return onClick === null || onClick === void 0 ? void 0 : onClick();
+                            },
+                            children: label
+                        })
+                    ]
                 })
             ]
         })
@@ -22872,11 +22895,13 @@ function _templateObject1$8() {
 function _templateObject2$5() {
     var data = _tagged_template_literal$d([
         "\n  flex: 1;\n  cursor: pointer;\n  border: 1px solid\n    ",
-        ";\n  background-color: ",
+        ";\n\n  background-color: ",
         ";\n  border-radius: 0.5rem;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  &::-ms-expand {\n    display: none;\n  }\n  color: ",
         ";\n  padding: ",
         ";\n  outline: none;\n  &::placeholder {\n    color: ",
         ";\n    opacity: 0.3;\n  }\n  transition: all 150ms ease-in-out;\n\n  &:focus-within {\n    border-color: ",
+        ";\n  }\n\n  &:hover {\n    background-color: ",
+        ";\n  }\n\n  &:focus {\n    background-color: ",
         ";\n  }\n\n  ",
         "\n"
     ]);
@@ -22931,11 +22956,11 @@ var InputWrapper = styled.div(_templateObject$d());
 var DropdownWrapper = styled.div(_templateObject1$8());
 // Style for the Select itself
 var BaseSelect = styled.select(_templateObject2$5(), function(param) {
-    var error = param.error, disabled = param.disabled;
-    return error && !disabled ? danger600 : neutral200;
+    var error = param.error, disabled = param.disabled, type = param.type;
+    return type === 'primary' ? error && !disabled ? danger600 : neutral200 : error && !disabled ? danger600 : 'transparent';
 }, function(param) {
-    var disabled = param.disabled;
-    return disabled ? neutral100 : 'white';
+    var disabled = param.disabled, type = param.type;
+    return disabled || type === 'secondary' ? neutral100 : 'white';
 }, textPrimary, function(param) {
     var sz = param.sz;
     return sz === 'lg' ? '0.5rem 0.563rem' : '0.375rem 0.563rem';
@@ -22943,18 +22968,28 @@ var BaseSelect = styled.select(_templateObject2$5(), function(param) {
     var error = param.error;
     return error ? danger600 : primary600;
 }, function(param) {
-    var sz = param.sz;
-    return sz === 'lg' ? $paragraph100Regular : $paragraph200Regular;
+    var type = param.type;
+    return type === 'primary' ? neutral100 : neutral200;
+}, function(param) {
+    var type = param.type;
+    return type === 'primary' ? neutral100 : neutral200;
+}, function(param) {
+    var sz = param.sz, type = param.type;
+    return type === 'primary' ? sz === 'lg' ? $paragraph100Regular : $paragraph200Regular : sz === 'lg' ? $paragraph100Semibold : $paragraph200Semibold;
 });
-var Chip = styled.button(_templateObject3$4(), neutral100, $label200Medium);
+var Chip = styled.button(_templateObject3$4(), function(param) {
+    var secondary = param.secondary;
+    return secondary ? neutral300 : neutral100;
+}, $label200Medium);
 var ChipWrapper = styled.div(_templateObject4$2(), function(param) {
     var sz = param.sz;
     return sz === 'lg' ? '0.5rem 0.563rem' : '0.375rem 0.563rem';
 });
 var MultiSelectChip = function(option) {
-    var label = option.label, onClick = option.onClick;
+    var label = option.label, onClick = option.onClick, _option_type = option.type, type = _option_type === void 0 ? 'primary' : _option_type;
     return /*#__PURE__*/ jsxs(Chip, {
         onClick: onClick,
+        secondary: type === 'secondary',
         children: [
             label,
             /*#__PURE__*/ jsx(Cancel, {})
@@ -22963,15 +22998,21 @@ var MultiSelectChip = function(option) {
 };
 // Style for the Icons
 var IconWrapper$1 = styled.span(_templateObject5$1());
-var PlaceholderOption = styled.option(_templateObject6$1(), $paragraph100Regular, textSecondary);
+var PlaceholderOption = styled.option(_templateObject6$1(), $paragraph100Semibold, textSecondary);
 var MultiSelect = function(_param) {
-    var _param_sz = _param.sz, sz = _param_sz === void 0 ? 'sm' : _param_sz; _param.error; var _param_options = _param.options, options = _param_options === void 0 ? [] : _param_options, props = _object_without_properties$a(_param, [
+    var _param_sz = _param.sz, sz = _param_sz === void 0 ? 'sm' : _param_sz; _param.error; var _param_options = _param.options, options = _param_options === void 0 ? [] : _param_options; _param.checkbox; var placeholder = _param.placeholder, initialValue = _param.initialValue, _param_type = _param.type, type = _param_type === void 0 ? 'primary' : _param_type, props = _object_without_properties$a(_param, [
         "sz",
         "error",
-        "options"
+        "options",
+        "checkbox",
+        "placeholder",
+        "initialValue",
+        "type"
     ]);
     var _useState = _sliced_to_array$7(useState(false), 2), open = _useState[0], setOpen = _useState[1];
-    var _useState1 = _sliced_to_array$7(useState([]), 2), values = _useState1[0], setValues = _useState1[1];
+    var _useState1 = _sliced_to_array$7(useState(initialValue ? [
+        initialValue
+    ] : []), 2), values = _useState1[0], setValues = _useState1[1];
     var toggleSelect = function(option) {
         setValues(function(prevValues) {
             if (prevValues.some(function(val) {
@@ -22991,6 +23032,7 @@ var MultiSelect = function(_param) {
             /*#__PURE__*/ jsxs(InputWrapper, {
                 children: [
                     /*#__PURE__*/ jsx(BaseSelect, _object_spread_props$d(_object_spread$h({}, props), {
+                        type: type,
                         onMouseDown: function(e) {
                             setOpen(!open);
                             e.stopPropagation();
@@ -23000,7 +23042,8 @@ var MultiSelect = function(_param) {
                             value: "",
                             disabled: true,
                             hidden: true,
-                            children: "Please select..."
+                            selected: true,
+                            children: "".concat(placeholder || 'Please select...')
                         })
                     })),
                     /*#__PURE__*/ jsx(IconWrapper$1, {
@@ -23010,6 +23053,7 @@ var MultiSelect = function(_param) {
                         sz: sz,
                         children: values.map(function(option) {
                             return /*#__PURE__*/ jsx(MultiSelectChip, _object_spread_props$d(_object_spread$h({}, option), {
+                                type: type,
                                 onClick: function() {
                                     return toggleSelect(option);
                                 }
@@ -23024,7 +23068,12 @@ var MultiSelect = function(_param) {
                 bottom: 110,
                 children: /*#__PURE__*/ jsx(Fragment, {
                     children: options.map(function(option) {
-                        return /*#__PURE__*/ jsx(DropdownOption, _object_spread_props$d(_object_spread$h({}, option), {
+                        return /*#__PURE__*/ jsx(DropdownOption, _object_spread_props$d(_object_spread$h({
+                            checkbox: true,
+                            selected: values.some(function(val) {
+                                return val.value === option.value;
+                            })
+                        }, option), {
                             onClick: function() {
                                 return toggleSelect(option);
                             }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@paubox/ui",
   "author": "Paubox, Inc.",
   "description": "Paubox Component Library",
-  "version": "0.8.1",
+  "version": "0.8.3",
   "type": "module",
   "private": false,
   "publishConfig": {

package/src/lib/Button/BaseButton.d.ts

@@ -1,5 +1,5 @@
 import { CSSProperties, MouseEventHandler } from 'react';
-export interface BaseButtonProps {
+export interface BaseButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     color?: 'primary' | 'secondary' | 'danger';
     disabled?: boolean;
     size?: 'large' | 'small';

package/src/lib/Dropdown/DropdownOption.d.ts

@@ -3,5 +3,7 @@ export interface DropdownOptionProps {
     href?: string;
     onClick?: () => void;
     icon?: React.ReactNode;
+    selected?: boolean;
+    checkbox?: boolean;
 }
-export declare const DropdownOption: ({ label, href, onClick, icon, }: DropdownOptionProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const DropdownOption: ({ label, href, selected, checkbox, onClick, icon, }: DropdownOptionProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/src/lib/Inputs/MultiSelect.d.ts

@@ -8,8 +8,12 @@ export interface MultiSelectProps extends React.InputHTMLAttributes<HTMLSelectEl
     leftIcon?: React.ElementType;
     rightIcon?: React.ElementType;
     options?: MultiSelectOption[];
+    checkbox?: boolean;
+    initialValue?: MultiSelectOption;
+    type?: 'primary' | 'secondary';
 }
 export interface ChipProps {
     sz?: 'sm' | 'lg';
+    secondary?: boolean;
 }
-export declare const MultiSelect: ({ sz, error, options, ...props }: MultiSelectProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const MultiSelect: ({ sz, error, options, checkbox, placeholder, initialValue, type, ...props }: MultiSelectProps) => import("@emotion/react/jsx-runtime").JSX.Element;