@uxf/ui 1.0.0-beta.81 → 1.0.0-beta.83

package/css/combobox.old.css

@@ -0,0 +1,102 @@
+.uxf-combobox {
+    @apply relative;
+
+    &__button {
+        @apply relative flex h-12 w-full cursor-default flex-row items-center rounded-lg py-3 px-4 text-left
+            outline-none before:absolute before:inset-0 before:pointer-events-none before:border before:rounded-lg;
+
+        :root .light & {
+            @apply bg-gray-100 text-lightHigh before:border-gray-200;
+
+            .is-empty {
+                @apply text-lightLow;
+            }
+        }
+
+        :root .dark & {
+            @apply bg-gray-800 text-darkHigh before:border-gray-700;
+
+            .is-empty {
+                @apply text-darkLow;
+            }
+        }
+
+        &.is-focused {
+            @apply ring-2;
+
+            :root .light & {
+                @apply before:border-none ring-primary-500;
+            }
+
+            :root .dark & {
+                @apply ring-primary-500;
+            }
+        }
+
+        &.is-invalid {
+            @apply ring-1;
+
+            :root .light & {
+                @apply ring-error-500 text-error-500;
+
+                .uxf-combobox__input {
+                    @apply placeholder:text-error-500;
+                }
+            }
+
+            :root .dark & {
+                @apply ring-error-500 text-error-500;
+
+                .uxf-combobox__input {
+                    @apply placeholder:text-error-500;
+                }
+            }
+        }
+    }
+
+    &__input {
+        @apply flex-grow bg-inherit focus-visible:ring-0 focus-visible:border-0 focus-visible:outline-none;
+
+        :root .light & {
+            @apply placeholder:text-lightLow;
+        }
+
+        :root .dark & {
+            @apply placeholder:text-darkLow;
+        }
+    }
+
+    &__button-icon {
+        @apply transition duration-300;
+
+        :root .light & {
+            @apply text-lightMedium;
+        }
+
+        :root .dark & {
+            @apply text-darkMedium;
+        }
+
+        &.is-open {
+            @apply -scale-y-100;
+        }
+    }
+
+    input:-webkit-autofill {
+        &,
+        &:hover,
+        &:focus {
+            margin: 1px 0;
+
+            :root .dark & {
+                -webkit-box-shadow: inset 0 0 0 1000px theme("colors.gray.800");
+                caret-color: white;
+                -webkit-text-fill-color: theme("colors.gray.300");
+            }
+
+            :root .light & {
+                -webkit-box-shadow: inset 0 0 0 1000px theme("colors.gray.100");
+            }
+        }
+    }
+}

package/css/dropdown.css

@@ -11,7 +11,7 @@
     }
 
     &__item {
-        @apply relative cursor-default select-none py-3 px-4 text-gray-800;
+        @apply relative cursor-default select-none py-2 px-4 text-gray-800;
 
         &.is-active {
             @apply bg-primary-500 text-white;

package/css/dropdown.old.css

@@ -0,0 +1,24 @@
+.uxf-dropdown {
+    @apply absolute z-10 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black
+        ring-opacity-5 focus:outline-none sm:text-sm;
+
+    &--bottom {
+        @apply mt-1;
+    }
+
+    &--top {
+        @apply -translate-y-1;
+    }
+
+    &__item {
+        @apply relative cursor-default select-none py-3 px-4 text-gray-800;
+
+        &.is-active {
+            @apply bg-primary-500 text-white;
+        }
+    }
+
+    &__items {
+        @apply absolute flex flex-col border border-black bg-white;
+    }
+}

package/css/input.css

@@ -1,8 +1,8 @@
 .uxf-input {
-    @apply rounded-lg text-base;
+    @apply rounded-md bg-white;
 
     :root .light & {
-        @apply bg-gray-100 text-gray-900;
+        @apply bg-white text-gray-900;
     }
 
     :root .dark & {
@@ -10,7 +10,7 @@
     }
 
     &__element {
-        @apply bg-transparent outline-none;
+        @apply bg-transparent outline-none placeholder:font-light;
 
         :root .light & {
             @apply placeholder:text-gray-400;
@@ -31,7 +31,7 @@
 
     &__left-addon,
     &__right-addon {
-        @apply border px-2;
+        @apply border px-2 bg-gray-100;
 
         :root .light & {
             @apply border-gray-200;
@@ -43,15 +43,15 @@
     }
 
     &__left-addon {
-        @apply rounded-l-lg border-r-0;
+        @apply rounded-l-md border-r-0;
     }
 
     &__right-addon {
-        @apply rounded-r-lg border-l-0;
+        @apply rounded-r-md border-l-0;
     }
 
     &__wrapper {
-        @apply rounded-lg border px-4 text-base;
+        @apply rounded-md border px-4;
 
         :root .light & {
             @apply border-gray-200;
@@ -62,15 +62,21 @@
         }
     }
 
+    &--size-small {
+        .uxf-input__wrapper {
+            @apply h-8 text-sm;
+        }
+    }
+
     &--size-default {
         .uxf-input__wrapper {
-            @apply h-12;
+            @apply h-9 text-base;
         }
     }
 
     &--size-large {
         .uxf-input__wrapper {
-            @apply h-14 text-lg;
+            @apply h-10 text-lg;
         }
     }
 
@@ -104,11 +110,11 @@
         @apply cursor-not-allowed;
 
         :root .light & {
-            @apply bg-gray-300;
+            @apply bg-gray-100;
         }
 
         :root .dark & {
-            @apply bg-gray-600;
+            @apply bg-gray-800;
         }
 
         .uxf-input__element {

package/css/input.old.css

@@ -0,0 +1,193 @@
+.uxf-input {
+    @apply rounded-lg text-base;
+
+    :root .light & {
+        @apply bg-gray-100 text-gray-900;
+    }
+
+    :root .dark & {
+        @apply bg-gray-800 text-gray-300;
+    }
+
+    &__element {
+        @apply bg-transparent outline-none;
+
+        :root .light & {
+            @apply placeholder:text-gray-400;
+        }
+
+        :root .dark & {
+            @apply placeholder:text-gray-400;
+        }
+    }
+
+    &__left-element {
+        @apply mr-2;
+    }
+
+    &__right-element {
+        @apply ml-2;
+    }
+
+    &__left-addon,
+    &__right-addon {
+        @apply border px-2;
+
+        :root .light & {
+            @apply border-gray-200;
+        }
+
+        :root .dark & {
+            @apply border-gray-700;
+        }
+    }
+
+    &__left-addon {
+        @apply rounded-l-lg border-r-0;
+    }
+
+    &__right-addon {
+        @apply rounded-r-lg border-l-0;
+    }
+
+    &__wrapper {
+        @apply rounded-lg border px-4 text-base;
+
+        :root .light & {
+            @apply border-gray-200;
+        }
+
+        :root .dark & {
+            @apply border-gray-700;
+        }
+    }
+
+    &--size-default {
+        .uxf-input__wrapper {
+            @apply h-12;
+        }
+    }
+
+    &--size-large {
+        .uxf-input__wrapper {
+            @apply h-14 text-lg;
+        }
+    }
+
+    &--has-right-addon {
+        .uxf-input__wrapper {
+            @apply rounded-r-none;
+        }
+    }
+
+    &--has-left-addon {
+        .uxf-input__wrapper {
+            @apply rounded-l-none;
+        }
+    }
+
+    &.is-focused {
+        .uxf-input__wrapper {
+            @apply ring-1 ring-inset ring-offset-0;
+
+            :root .light & {
+                @apply border-primary-500 ring-primary-500;
+            }
+
+            :root .dark & {
+                @apply border-primary-500 ring-primary-500;
+            }
+        }
+    }
+
+    &.is-disabled {
+        @apply cursor-not-allowed;
+
+        :root .light & {
+            @apply bg-gray-300;
+        }
+
+        :root .dark & {
+            @apply bg-gray-600;
+        }
+
+        .uxf-input__element {
+            @apply cursor-not-allowed;
+        }
+    }
+
+    &.is-readonly {
+        @apply cursor-text;
+
+        .uxf-input__element {
+            @apply cursor-text;
+        }
+
+        .uxf-input__wrapper {
+            @apply ring-0;
+        }
+
+        .uxf-input__wrapper,
+        .uxf-input__left-addon,
+        .uxf-input__right-addon {
+            :root .light & {
+                @apply border-gray-300;
+            }
+
+            :root .dark & {
+                @apply border-gray-500;
+            }
+        }
+    }
+
+    &.is-invalid {
+        &.is-focused {
+            .uxf-input__wrapper {
+                :root .light & {
+                    @apply ring-error-500 border-error-500;
+                }
+
+                :root .dark & {
+                    @apply ring-error-500 border-error-500;
+                }
+            }
+        }
+
+        .uxf-input__wrapper {
+            @apply border-error-500 placeholder:text-error-300;
+
+            .uxf-input__left-element,
+            .uxf-input__right-element {
+                @apply text-error-500;
+            }
+
+            .uxf-input__element {
+                :root .light & {
+                    @apply border-gray-300 text-error-500;
+                }
+
+                :root .dark & {
+                    @apply border-gray-500 text-error-500;
+                }
+            }
+        }
+    }
+
+    input:-webkit-autofill {
+        &,
+        &:hover,
+        &:focus {
+            margin: 1px 0;
+
+            :root .dark & {
+                -webkit-box-shadow: inset 0 0 0 1000px theme("colors.gray.800");
+                caret-color: white;
+                -webkit-text-fill-color: theme("colors.gray.300");
+            }
+
+            :root .light & {
+                -webkit-box-shadow: inset 0 0 0 1000px theme("colors.gray.100");
+            }
+        }
+    }
+}

package/css/pagination.css

@@ -2,7 +2,8 @@
     @apply isolate inline-flex rounded-md -space-x-px;
 
     &__button {
-        @apply relative inline-flex items-center border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-10 cursor-pointer h-10;
+        @apply relative inline-flex items-center border border-gray-300 bg-white px-4 py-2
+            text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-10 cursor-pointer h-10;
 
         &.is-selected {
             @apply z-10 bg-indigo-50 border border-primary-500 text-primary-600;
@@ -21,7 +22,7 @@
         }
 
         &.is-ellipsis {
-            @apply text-neutral-300 hover:bg-white pointer-events-none
+            @apply text-neutral-300 hover:bg-white pointer-events-none;
         }
     }
-}
+}

package/css/select.css

@@ -2,12 +2,16 @@
     @apply relative;
 
     &__button {
-        @apply relative flex h-12 w-full cursor-default flex-row items-center rounded-lg py-3 px-4 text-left
+        @apply relative flex h-9 w-full cursor-default flex-row items-center rounded-lg py-3 px-4 text-left
             outline-none focus-visible:ring-2 before:absolute before:inset-0 before:pointer-events-none before:border
             before:rounded-lg;
 
+        .uxf-icon {
+            @apply h-4;
+        }
+
         :root .light & {
-            @apply bg-gray-100 text-lightHigh before:border-gray-200 focus-visible:before:border-none
+            @apply bg-white text-lightHigh before:border-gray-200 focus-visible:before:border-none
                 focus-visible:ring-primary-500;
 
             .is-empty {

package/css/select.old.css

@@ -0,0 +1,66 @@
+.uxf-select {
+    @apply relative;
+
+    &__button {
+        @apply relative flex h-12 w-full cursor-default flex-row items-center rounded-lg py-3 px-4 text-left
+            outline-none focus-visible:ring-2 before:absolute before:inset-0 before:pointer-events-none before:border
+            before:rounded-lg;
+
+        :root .light & {
+            @apply bg-gray-100 text-lightHigh before:border-gray-200 focus-visible:before:border-none
+                focus-visible:ring-primary-500;
+
+            .is-empty {
+                @apply text-lightLow;
+            }
+        }
+
+        :root .dark & {
+            @apply bg-gray-800 text-darkHigh before:border-gray-700 focus-visible:ring-primary-500;
+
+            .is-empty {
+                @apply text-darkLow;
+            }
+        }
+
+        &.is-invalid {
+            @apply ring-1;
+
+            :root .light & {
+                @apply ring-error-500 text-error-500;
+
+                .is-empty {
+                    @apply text-error-500;
+                }
+            }
+
+            :root .dark & {
+                @apply ring-error-500 text-error-500;
+
+                .is-empty {
+                    @apply text-error-500;
+                }
+            }
+        }
+    }
+
+    &__button-text {
+        @apply flex-grow;
+    }
+
+    &__button-icon {
+        @apply transition duration-300;
+
+        :root .light & {
+            @apply text-lightMedium;
+        }
+
+        :root .dark & {
+            @apply text-darkMedium;
+        }
+
+        &.is-open {
+            @apply -scale-y-100;
+        }
+    }
+}

package/hooks/use-dropdown.js

@@ -13,7 +13,9 @@ function useDropdown(placement, matchWidth = false) {
                     Object.assign(elements.floating.style, {
                         left: x + "px",
                         maxHeight: Math.max(50, availableHeight) + "px",
-                        maxWidth: matchWidth ? availableWidth + "px" : undefined,
+                        maxWidth: matchWidth
+                            ? Math.min(availableWidth, elements.reference.getBoundingClientRect().width) + "px"
+                            : availableWidth,
                         position: strategy,
                         top: y + "px",
                     });

package/input/input.stories.d.ts

@@ -11,4 +11,5 @@ declare const _default: {
 };
 export default _default;
 export declare function Default(): JSX.Element;
+export declare function Sizes(): JSX.Element;
 export declare function ComponentStructure(): JSX.Element;

package/input/input.stories.js

@@ -26,11 +26,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ComponentStructure = exports.Default = void 0;
+exports.ComponentStructure = exports.Sizes = exports.Default = void 0;
 const react_1 = __importStar(require("react"));
 const component_structure_analyzer_1 = __importDefault(require("@uxf/ui/utils/component-structure-analyzer"));
 const action_1 = require("@uxf/ui/utils/action");
 const input_1 = require("@uxf/ui/input");
+const storybook_config_1 = require("../utils/storybook-config");
 exports.default = {
     title: "UI/Input",
     component: input_1.Input,
@@ -61,15 +62,24 @@ function Default() {
         react_1.default.createElement(input_1.Input, null,
             react_1.default.createElement(input_1.Input.Element, { value: value, onChange: (0, action_1.action)("onChange", onChange), placeholder: "Disabled", isInvalid: isInvalid, isDisabled: true })),
         react_1.default.createElement(input_1.Input, null,
-            react_1.default.createElement(input_1.Input.Element, { value: value, onChange: (0, action_1.action)("onChange", onChange), placeholder: "Read Only", isInvalid: isInvalid, isReadOnly: true })),
-        react_1.default.createElement(input_1.Input, { size: "large" },
-            react_1.default.createElement(input_1.Input.Element, { value: value, onChange: (0, action_1.action)("onChange", onChange), placeholder: "Size large", isInvalid: isInvalid }))));
+            react_1.default.createElement(input_1.Input.Element, { value: value, onChange: (0, action_1.action)("onChange", onChange), placeholder: "Read Only", isInvalid: isInvalid, isReadOnly: true }))));
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement("input", { type: "checkbox", checked: isInvalid, onChange: (e) => setInvalid(e.target.checked) }),
         react_1.default.createElement("div", { className: "light space-y-2 p-20" }, storyInputs),
         react_1.default.createElement("div", { className: "dark space-y-2 bg-gray-900 p-20" }, storyInputs)));
 }
 exports.Default = Default;
+function Sizes() {
+    const config = (0, storybook_config_1.useStorybookConfig)("Input");
+    const [value, setValue] = (0, react_1.useState)("");
+    return (react_1.default.createElement("div", { className: "space-y-4" }, config.sizes.map((size) => (react_1.default.createElement(input_1.Input, { key: size, size: size },
+        react_1.default.createElement(input_1.Input.LeftAddon, null, "LeftAddon"),
+        react_1.default.createElement(input_1.Input.LeftElement, null, "\uD83C\uDF37"),
+        react_1.default.createElement(input_1.Input.Element, { value: value, onChange: (0, action_1.action)("onChange", setValue), placeholder: size }),
+        react_1.default.createElement(input_1.Input.RightElement, null, "\uD83D\uDD14"),
+        react_1.default.createElement(input_1.Input.RightAddon, null, "RightAddon"))))));
+}
+exports.Sizes = Sizes;
 function ComponentStructure() {
     const [value, onChange] = (0, react_1.useState)("");
     return (react_1.default.createElement(component_structure_analyzer_1.default, null,

package/input/theme.d.ts

@@ -2,6 +2,7 @@ export interface InputGroupVariants {
     default: true;
 }
 export interface InputGroupSizes {
+    small: true;
     default: true;
     large: true;
 }

package/list-item/index.d.ts

@@ -1 +1 @@
-export { ListItem } from "./list-item";
+export * from "./list-item";

package/list-item/index.js

@@ -1,5 +1,17 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ListItem = void 0;
-var list_item_1 = require("./list-item");
-Object.defineProperty(exports, "ListItem", { enumerable: true, get: function () { return list_item_1.ListItem; } });
+__exportStar(require("./list-item"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/ui",
-  "version": "1.0.0-beta.81",
+  "version": "1.0.0-beta.83",
   "description": "",
   "publishConfig": {
     "access": "public"

package/select/select.d.ts

@@ -14,7 +14,6 @@ export interface SelectProps<Value = SelectValue, Option = SelectOption<Value>>
     helperText?: ReactNode;
     hiddenLabel?: boolean;
     iconName?: keyof IconsSet;
-    iconSize?: number;
     id?: string;
     keyExtractor?: (option: Option) => string | number;
     label?: ReactNode;

package/select/select.js

@@ -35,7 +35,7 @@ const use_dropdown_1 = require("../hooks/use-dropdown");
 const icon_1 = require("../icon");
 const label_1 = require("../label");
 exports.Select = (0, forwardRef_1.forwardRef)("Select", (props, ref) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c;
     const generatedId = (0, react_2.useId)();
     const id = (_a = props.id) !== null && _a !== void 0 ? _a : generatedId;
     const selectedOption = props.options.find((option) => option.id === props.value);
@@ -44,14 +44,12 @@ exports.Select = (0, forwardRef_1.forwardRef)("Select", (props, ref) => {
     const input = (0, useInputFocus_1.useInputFocus)(innerRef, props.onBlur, props.onFocus);
     const dropdown = (0, use_dropdown_1.useDropdown)((_b = props.dropdownPlacement) !== null && _b !== void 0 ? _b : "bottom", true);
     const stableRef = (0, react_2.useMemo)(() => (0, composeRefs_1.composeRefs)(innerRef, ref, dropdown.reference), [ref, dropdown.reference]);
-    const getIconClassName = (open) => (0, cx_1.cx)("uxf-select__button-icon", open && "is-open");
-    const iconName = (_c = props.iconName) !== null && _c !== void 0 ? _c : "caretDown";
-    const iconSize = (_d = props.iconSize) !== null && _d !== void 0 ? _d : 24;
+    const iconName = (_c = props.iconName) !== null && _c !== void 0 ? _c : "chevronDown";
     return (react_2.default.createElement(react_1.Listbox, { as: "div", className: (0, cx_1.cx)("uxf-select", props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isRequired && classes_1.CLASSES.IS_REQUIRED, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.className), onChange: (v) => { var _a; return (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, v.id); }, value: selectedOption, disabled: props.isDisabled || props.isReadOnly }, (renderProps) => (react_2.default.createElement(react_2.default.Fragment, null,
         react_2.default.createElement(react_1.Listbox.Label, { as: label_1.Label, isHidden: props.hiddenLabel, onClick: props.isDisabled || props.isReadOnly ? undefined : input.focus }, props.label),
         react_2.default.createElement(react_1.Listbox.Button, { as: "div", className: (0, cx_1.cx)("uxf-select__button", (renderProps.open || input.focused) && classes_1.CLASSES.IS_FOCUSED, renderProps.disabled && classes_1.CLASSES.IS_DISABLED, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isInvalid && classes_1.CLASSES.IS_INVALID, dropdown.placement === "bottom" && "is-open--bottom", dropdown.placement === "top" && "is-open--top", renderProps.open && "is-open"), onBlur: input.onBlur, onFocus: input.onFocus, tabIndex: props.isDisabled || props.isReadOnly ? undefined : 0, ref: stableRef, "aria-invalid": props.isInvalid, "aria-describedby": errorId },
             react_2.default.createElement("div", { className: (0, cx_1.cx)("uxf-select__button-text", !(selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) && "is-empty") }, (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) || props.placeholder),
-            react_2.default.createElement(icon_1.Icon, { className: getIconClassName(renderProps.open), name: iconName, size: iconSize })),
+            react_2.default.createElement(icon_1.Icon, { className: (0, cx_1.cx)("uxf-select__button-icon", renderProps.open && "is-open"), name: iconName })),
         react_2.default.createElement(react_1.Listbox.Options, { ref: dropdown.floating, className: (0, cx_1.cx)("uxf-dropdown", dropdown.placement === "bottom" && "uxf-dropdown--bottom", dropdown.placement === "top" && "uxf-dropdown--top") }, props.options.map((option) => {
             var _a, _b, _c, _d;
             return (react_2.default.createElement(react_1.Listbox.Option, { key: (_b = (_a = props.keyExtractor) === null || _a === void 0 ? void 0 : _a.call(props, option)) !== null && _b !== void 0 ? _b : option.id, value: option, className: (optionState) => (0, cx_1.cx)("uxf-dropdown__item", optionState.active && classes_1.CLASSES.IS_ACTIVE, optionState.disabled && classes_1.CLASSES.IS_DISABLED, optionState.selected && classes_1.CLASSES.IS_SELECTED) }, (_d = (_c = props.renderOption) === null || _c === void 0 ? void 0 : _c.call(props, option)) !== null && _d !== void 0 ? _d : option.label));

package/tabs/index.d.ts

@@ -1 +1 @@
-export { Tabs } from "./tabs";
+export * from "./tabs";