@paubox/ui 0.14.3 → 0.14.5

package/index.esm.js

@@ -23136,7 +23136,7 @@ function _unsupported_iterable_to_array$e(o, minLen) {
 }
 function _templateObject$i() {
     var data = _tagged_template_literal$i([
-        "\n  display: flex;\n  align-items: center;\n  width: 100%;\n"
+        "\n  display: flex;\n  align-items: center;\n  width: 100%;\n  position: relative;\n"
     ]);
     _templateObject$i = function _templateObject() {
         return data;
@@ -23145,7 +23145,12 @@ function _templateObject$i() {
 }
 function _templateObject1$c() {
     var data = _tagged_template_literal$i([
-        "\n  display: flex;\n  align-items: center;\n  width: 100%;\n  position: relative;\n"
+        "\n  display: flex;\n  align-items: center;\n  width: max-content;\n  position: relative;\n  cursor: pointer;\n  &:hover {\n    background-color: ",
+        ";\n  }\n  transition: all 150ms ease-in-out;\n\n  &:focus-within {\n    border-color: ",
+        ";\n  }\n\n  &:focus {\n    background-color: ",
+        ";\n  }\n\n  border: 1px solid\n    ",
+        ";\n  border-radius: 0.5rem;\n\n  background-color: ",
+        ";\n"
     ]);
     _templateObject1$c = function _templateObject() {
         return data;
@@ -23154,16 +23159,11 @@ function _templateObject1$c() {
 }
 function _templateObject2$a() {
     var data = _tagged_template_literal$i([
-        "\n  flex: 1;\n  cursor: pointer;\n  border: 1px solid\n    ",
-        ";\n\n  background-color: ",
-        ";\n  border-radius: 0.5rem;\n\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  &::-ms-expand {\n    display: none;\n  }\n  &::placeholder {\n    color: ",
+        "\n  flex: 1;\n  z-index: 2;\n  cursor: pointer;\n  border: none;\n  background-color: transparent;\n\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  &::-ms-expand {\n    display: none;\n  }\n  &::placeholder {\n    color: ",
         ";\n  }\n  color: ",
         ";\n  padding: ",
         ";\n  padding-right: 2rem;\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    opacity: 0.3;\n  }\n\n  ",
         "\n"
     ]);
     _templateObject2$a = function _templateObject() {
@@ -23196,7 +23196,8 @@ function _templateObject4$6() {
 }
 function _templateObject5$1() {
     var data = _tagged_template_literal$i([
-        "\n  position: absolute;\n  right: 0.5rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"
+        "\n  position: absolute;\n  right: 0rem;\n  width: 2rem;\n  background-color: inherit;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 0;\n  border: none;\n  cursor: pointer;\n  z-index: 0;\n  transition: all 150ms ease-in-out;\n  transform: ",
+        ";\n"
     ]);
     _templateObject5$1 = function _templateObject() {
         return data;
@@ -23227,30 +23228,30 @@ function _templateObject7() {
 }
 // Wrapper for the Input and Icons
 var InputWrapper$2 = styled.div(_templateObject$i());
-var MultiSelectWrapper = styled.div(_templateObject1$c());
-// Style for the Select itself
-var BaseSelect$1 = styled.select(_templateObject2$a(), function(param) {
-    var error = param.error, disabled = param.disabled, type = param.type;
-    return type === 'primary' ? error && !disabled ? danger600 : neutral200 : error && !disabled ? danger600 : 'transparent';
-}, function(param) {
+var MultiSelectWrapper = styled.div(_templateObject1$c(), function(param) {
     var disabled = param.disabled, type = param.type;
     return disabled || type === 'secondary' ? neutral100 : 'white';
-}, neutral500, function(param) {
-    var value = param.value;
-    return Array.isArray(value) && value.length > 0 ? textPrimary : neutral500;
 }, function(param) {
-    var sz = param.sz;
-    return sz === 'lg' ? '0.5rem 0.563rem' : '0.375rem 0.563rem';
-}, textPrimaryDisabled, function(param) {
     var error = param.error;
     return error ? danger600 : primary600;
 }, function(param) {
     var type = param.type;
     return type === 'primary' ? neutral100 : neutral200;
 }, function(param) {
-    var type = param.type;
-    return type === 'primary' ? neutral100 : neutral200;
+    var error = param.error, disabled = param.disabled, type = param.type, open = param.open;
+    return type === 'primary' ? open ? primary600 : error && !disabled ? danger600 : neutral200 : error && !disabled ? danger600 : 'transparent';
+}, function(param) {
+    var disabled = param.disabled, type = param.type;
+    return disabled || type === 'secondary' ? neutral100 : 'white';
+});
+// Style for the Select itself
+var BaseSelect$1 = styled.select(_templateObject2$a(), neutral500, function(param) {
+    var value = param.value;
+    return Array.isArray(value) && value.length > 0 ? textPrimary : neutral500;
 }, function(param) {
+    var sz = param.sz;
+    return sz === 'lg' ? '0.5rem 0.563rem' : '0.375rem 0.563rem';
+}, textPrimaryDisabled, function(param) {
     var sz = param.sz, type = param.type;
     return type === 'primary' ? sz === 'lg' ? $paragraph100Regular : $paragraph200Regular : sz === 'lg' ? $paragraph100Semibold : $paragraph200Semibold;
 });
@@ -23278,11 +23279,14 @@ var MultiSelectChip = function(option) {
     });
 };
 // Style for the Icons
-var IconWrapper$2 = styled.span(_templateObject5$1());
+var IconWrapper$2 = styled.div(_templateObject5$1(), function(param) {
+    var open = param.open;
+    return open ? 'rotate(180deg)' : 'rotate(0deg)';
+});
 var PlaceholderOption = styled.option(_templateObject6(), $paragraph100Semibold, textSecondary);
 var SelectedOption = styled.option(_templateObject7(), $paragraph200Regular, textPrimary);
 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; _param.checkbox; var placeholder = _param.placeholder, label = _param.label, _param_chips = _param.chips, chips = _param_chips === void 0 ? false : _param_chips, values = _param.values, setValues = _param.setValues, _param_type = _param.type, type = _param_type === void 0 ? 'primary' : _param_type, props = _object_without_properties$d(_param, [
+    var _param_sz = _param.sz, sz = _param_sz === void 0 ? 'sm' : _param_sz, _param_error = _param.error, error = _param_error === void 0 ? false : _param_error, _param_options = _param.options, options = _param_options === void 0 ? [] : _param_options; _param.checkbox; var placeholder = _param.placeholder, label = _param.label, _param_chips = _param.chips, chips = _param_chips === void 0 ? false : _param_chips, values = _param.values, setValues = _param.setValues, _param_disabled = _param.disabled, disabled = _param_disabled === void 0 ? false : _param_disabled, _param_type = _param.type, type = _param_type === void 0 ? 'primary' : _param_type, props = _object_without_properties$d(_param, [
         "sz",
         "error",
         "options",
@@ -23292,6 +23296,7 @@ var MultiSelect = function(_param) {
         "chips",
         "values",
         "setValues",
+        "disabled",
         "type"
     ]);
     var _useState = _sliced_to_array$b(useState(false), 2), open = _useState[0], setOpen = _useState[1];
@@ -23306,13 +23311,17 @@ var MultiSelect = function(_param) {
         ]));
     };
     return /*#__PURE__*/ jsxs(MultiSelectWrapper, {
+        disabled: disabled,
+        type: type,
+        error: error,
+        open: open,
         children: [
             /*#__PURE__*/ jsxs(InputWrapper$2, {
                 children: [
                     /*#__PURE__*/ jsx(BaseSelect$1, _object_spread_props$j(_object_spread$n({
                         ref: selectRef,
                         onClick: function() {
-                            return setOpen(function(prev) {
+                            setOpen(function(prev) {
                                 return !prev;
                             });
                         }
@@ -23321,6 +23330,7 @@ var MultiSelect = function(_param) {
                         sz: sz,
                         value: values,
                         defaultValue: '',
+                        disabled: disabled,
                         children: !values.length ? /*#__PURE__*/ jsx(PlaceholderOption, {
                             value: "",
                             disabled: true,
@@ -23335,6 +23345,7 @@ var MultiSelect = function(_param) {
                         })
                     })),
                     /*#__PURE__*/ jsx(IconWrapper$2, {
+                        open: open,
                         children: /*#__PURE__*/ jsx(ChevronDown, {})
                     }),
                     chips && /*#__PURE__*/ jsx(ChipWrapper$1, {
@@ -24020,7 +24031,12 @@ function _templateObject$f() {
 }
 function _templateObject1$a() {
     var data = _tagged_template_literal$f([
-        "\n  display: flex;\n  align-items: center;\n  width: 100%;\n  position: relative;\n"
+        "\n  display: flex;\n  align-items: center;\n  width: max-content;\n  position: relative;\n  cursor: pointer;\n  &:hover {\n    background-color: ",
+        ";\n  }\n  transition: all 150ms ease-in-out;\n\n  &:focus-within {\n    border-color: ",
+        ";\n  }\n\n  &:focus {\n    background-color: ",
+        ";\n  }\n\n  border: 1px solid\n    ",
+        ";\n  border-radius: 0.5rem;\n\n  background-color: ",
+        ";\n"
     ]);
     _templateObject1$a = function _templateObject() {
         return data;
@@ -24029,15 +24045,11 @@ function _templateObject1$a() {
 }
 function _templateObject2$8() {
     var data = _tagged_template_literal$f([
-        "\n  flex: 1;\n  cursor: pointer;\n  border: 1px solid\n    ",
-        ";\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  flex: 1;\n  cursor: pointer;\n  border: none;\n  background-color: transparent;\n\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  &::-ms-expand {\n    display: none;\n  }\n  &::placeholder {\n    color: ",
+        ";\n  }\n  color: ",
         ";\n  padding: ",
         ";\n  padding-right: 2rem;\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    opacity: 0.3;\n  }\n\n  ",
         "\n"
     ]);
     _templateObject2$8 = function _templateObject() {
@@ -24047,7 +24059,8 @@ function _templateObject2$8() {
 }
 function _templateObject3$6() {
     var data = _tagged_template_literal$f([
-        "\n  position: absolute;\n  right: 0.5rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"
+        "\n  position: absolute;\n  right: 0rem;\n  width: 2rem;\n  background-color: inherit;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 0;\n  border: none;\n  cursor: pointer;\n  z-index: 0;\n  transition: all 150ms ease-in-out;\n  transform: ",
+        ";\n"
     ]);
     _templateObject3$6 = function _templateObject() {
         return data;
@@ -24067,37 +24080,40 @@ function _templateObject4$4() {
 }
 // Wrapper for the Input and Icons
 var InputWrapper = styled.div(_templateObject$f());
-var SelectWrapper = styled.div(_templateObject1$a());
-// Style for the Select itself
-var BaseSelect = styled.select(_templateObject2$8(), function(param) {
-    var error = param.error, disabled = param.disabled, type = param.type;
-    return type === 'primary' ? error && !disabled ? danger600 : neutral200 : error && !disabled ? danger600 : 'transparent';
-}, function(param) {
+var SelectWrapper = styled.div(_templateObject1$a(), function(param) {
     var disabled = param.disabled, type = param.type;
     return disabled || type === 'secondary' ? neutral100 : 'white';
 }, function(param) {
-    var value = param.value;
-    return value ? textPrimary : neutral500;
-}, function(param) {
-    var sz = param.sz;
-    return sz === 'lg' ? '0.5rem 0.563rem' : '0.375rem 0.563rem';
-}, textPrimaryDisabled, function(param) {
     var error = param.error;
     return error ? danger600 : primary600;
 }, function(param) {
     var type = param.type;
     return type === 'primary' ? neutral100 : neutral200;
 }, function(param) {
-    var type = param.type;
-    return type === 'primary' ? neutral100 : neutral200;
+    var error = param.error, disabled = param.disabled, type = param.type, open = param.open;
+    return type === 'primary' ? open ? primary600 : error && !disabled ? danger600 : neutral200 : error && !disabled ? danger600 : 'transparent';
 }, function(param) {
+    var disabled = param.disabled, type = param.type;
+    return disabled || type === 'secondary' ? neutral100 : 'white';
+});
+// Style for the Select itself
+var BaseSelect = styled.select(_templateObject2$8(), neutral500, function(param) {
+    var value = param.value;
+    return Array.isArray(value) && value.length > 0 ? textPrimary : neutral500;
+}, function(param) {
+    var sz = param.sz;
+    return sz === 'lg' ? '0.5rem 0.563rem' : '0.375rem 0.563rem';
+}, textPrimaryDisabled, function(param) {
     var sz = param.sz, type = param.type;
     return type === 'primary' ? sz === 'lg' ? $paragraph100Regular : $paragraph200Regular : sz === 'lg' ? $paragraph100Semibold : $paragraph200Semibold;
 });
-var IconWrapper$1 = styled.span(_templateObject3$6());
+var IconWrapper$1 = styled.div(_templateObject3$6(), function(param) {
+    var open = param.open;
+    return open ? 'rotate(180deg)' : 'rotate(0deg)';
+});
 var SelectOption = styled.option(_templateObject4$4(), $paragraph100Semibold, textSecondary);
 var Select = function(_param) {
-    var _param_sz = _param.sz, sz = _param_sz === void 0 ? 'sm' : _param_sz, _param_error = _param.error, error = _param_error === void 0 ? false : _param_error, _param_options = _param.options, options = _param_options === void 0 ? [] : _param_options; _param.checkbox; var placeholder = _param.placeholder, value = _param.value, setValue = _param.setValue; _param.initialValue; var _param_type = _param.type, type = _param_type === void 0 ? 'primary' : _param_type, props = _object_without_properties$a(_param, [
+    var _param_sz = _param.sz, sz = _param_sz === void 0 ? 'sm' : _param_sz, _param_error = _param.error, error = _param_error === void 0 ? false : _param_error, _param_options = _param.options, options = _param_options === void 0 ? [] : _param_options; _param.checkbox; var placeholder = _param.placeholder, value = _param.value, setValue = _param.setValue; _param.initialValue; var _param_type = _param.type, type = _param_type === void 0 ? 'primary' : _param_type, _param_disabled = _param.disabled, disabled = _param_disabled === void 0 ? false : _param_disabled, props = _object_without_properties$a(_param, [
         "sz",
         "error",
         "options",
@@ -24106,7 +24122,8 @@ var Select = function(_param) {
         "value",
         "setValue",
         "initialValue",
-        "type"
+        "type",
+        "disabled"
     ]);
     var _options_find;
     var _useState = _sliced_to_array$8(useState(false), 2), open = _useState[0], setOpen = _useState[1];
@@ -24116,6 +24133,10 @@ var Select = function(_param) {
         setOpen(false);
     };
     return /*#__PURE__*/ jsxs(SelectWrapper, {
+        disabled: disabled,
+        type: type,
+        error: error,
+        open: open,
         children: [
             /*#__PURE__*/ jsxs(InputWrapper, {
                 children: [
@@ -24128,6 +24149,7 @@ var Select = function(_param) {
                         }
                     }, props), {
                         type: type,
+                        disabled: disabled,
                         sz: sz,
                         value: value,
                         error: error,
@@ -24147,6 +24169,7 @@ var Select = function(_param) {
                         })
                     })),
                     /*#__PURE__*/ jsx(IconWrapper$1, {
+                        open: open,
                         children: /*#__PURE__*/ jsx(ChevronDown, {})
                     })
                 ]

package/package.json

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

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

@@ -17,4 +17,4 @@ export interface ChipProps {
     sz?: 'sm' | 'lg';
     secondary?: boolean;
 }
-export declare const MultiSelect: ({ sz, error, options, checkbox, placeholder, label, chips, values, setValues, type, ...props }: MultiSelectProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const MultiSelect: ({ sz, error, options, checkbox, placeholder, label, chips, values, setValues, disabled, type, ...props }: MultiSelectProps) => import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -16,4 +16,4 @@ export interface SelectProps extends BaseSelectProps {
     value: any;
     setValue: (value: string) => void;
 }
-export declare const Select: ({ sz, error, options, checkbox, placeholder, value, setValue, initialValue, type, ...props }: SelectProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Select: ({ sz, error, options, checkbox, placeholder, value, setValue, initialValue, type, disabled, ...props }: SelectProps) => import("@emotion/react/jsx-runtime").JSX.Element;