@uxf/ui 11.20.0 → 11.21.1

package/css/radio.css

@@ -1,101 +1,92 @@
 .uxf-radio {
-    @apply flex shrink-0 items-center justify-center rounded-full border transition focus-visible:ring-2;
+    @apply focus-visible:ring-primary flex shrink-0 items-center justify-center rounded-full border border-gray-400
+        transition focus-visible:ring-2;
+
+    :root .dark & {
+        @apply focus-visible:ring-primary border-gray-400 focus-visible:ring-offset-gray-900;
+    }
 
     &__inner {
         @apply block rounded-full opacity-0 transition;
     }
 
     &.is-selected {
-        .uxf-radio__inner {
-            @apply opacity-100;
-        }
-    }
+        @apply bg-primary border-none;
 
-    &--size-default {
-        @apply h-4 w-4;
+        :root .dark & {
+            @apply bg-primary border-none;
+        }
 
         .uxf-radio__inner {
-            @apply h-1.5 w-1.5;
+            @apply bg-white opacity-100;
+
+            :root .dark & {
+                @apply bg-white;
+            }
         }
     }
 
-    &--size-lg {
-        @apply size-6;
+    &.is-disabled {
+        @apply pointer-events-none border-gray-200;
 
-        .uxf-radio__inner {
-            @apply h-2.5 w-2.5;
+        :root .dark & {
+            @apply pointer-events-none border-gray-600;
         }
-    }
-
-    :root .light & {
-        @apply focus-visible:ring-primary border-gray-400;
 
         &.is-selected {
-            @apply bg-primary border-none;
+            @apply bg-gray-200;
 
-            .uxf-radio__inner {
-                @apply bg-white;
+            :root .dark & {
+                @apply bg-gray-600;
             }
         }
 
-        &.is-disabled {
-            @apply pointer-events-none border-gray-200;
-
-            &.is-selected {
-                @apply bg-gray-200;
-            }
+        .uxf-radio__inner {
+            @apply bg-gray-400;
 
-            .uxf-radio__inner {
-                @apply bg-gray-400;
+            :root .dark & {
+                @apply bg-gray-800;
             }
         }
+    }
 
-        &.is-invalid {
+    &.is-invalid {
+        @apply border-error;
+
+        :root .dark & {
             @apply border-error;
+        }
 
-            &.is-selected {
-                @apply bg-error;
-            }
+        &.is-selected {
+            @apply bg-error;
 
-            .uxf-radio__inner {
-                @apply bg-white;
+            :root .dark & {
+                @apply bg-error;
             }
         }
-    }
-
-    :root .dark & {
-        @apply focus-visible:ring-primary border-gray-400 focus-visible:ring-offset-gray-900;
 
-        &.is-selected {
-            @apply bg-primary border-none;
+        .uxf-radio__inner {
+            @apply bg-white;
 
-            .uxf-radio__inner {
+            :root .dark & {
                 @apply bg-white;
             }
         }
+    }
 
-        &.is-disabled {
-            @apply pointer-events-none border-gray-600;
-
-            &.is-selected {
-                @apply bg-gray-600;
-            }
+    &--size-default {
+        @apply size-4;
 
-            .uxf-radio__inner {
-                @apply bg-gray-800;
-            }
+        .uxf-radio__inner {
+            @apply size-1.5;
         }
+    }
 
-        &.is-invalid {
-            @apply border-error;
-
-            &.is-selected {
-                @apply bg-error;
-            }
+    &--size-lg {
+        @apply size-6;
 
-            .uxf-radio__inner {
-                @apply bg-white;
-            }
+        .uxf-radio__inner {
+            @apply size-2.5;
         }
     }
 }

package/css/select.css

@@ -0,0 +1,11 @@
+.uxf-select {
+    .uxf-input__element {
+        align-items: center;
+        display: flex;
+        min-width: 0;
+    }
+
+    .uxf-input__element-text {
+        @apply truncate;
+    }
+}

package/css/tabs.css

@@ -11,11 +11,8 @@
         @apply mb-6 w-full overflow-auto;
 
         &--default {
-            @apply relative before:pointer-events-none before:absolute before:bottom-0 before:w-full before:border-b-2;
-
-            :root .light & {
-                @apply before:border-b-gray-100;
-            }
+            @apply relative before:pointer-events-none before:absolute before:bottom-0 before:w-full before:border-b-2
+                before:border-b-gray-100;
 
             :root .dark & {
                 @apply before:border-b-gray-800;
@@ -23,11 +20,7 @@
         }
 
         &--segmented {
-            @apply rounded-lg;
-
-            :root .light & {
-                @apply bg-gray-100;
-            }
+            @apply rounded-lg bg-gray-100;
 
             :root .dark & {
                 @apply bg-gray-700;
@@ -59,12 +52,9 @@
             transition-colors focus-visible:ring-2 focus-visible:ring-offset-1;
 
         &--default {
-            @apply relative rounded-lg before:absolute before:bottom-[-6px] before:w-full before:border-b-2
-                before:opacity-0 before:transition;
-
-            :root .light & {
-                @apply text-lightMedium focus-visible:ring-primary hover:bg-gray-100;
-            }
+            @apply text-lightMedium focus-visible:ring-primary relative rounded-lg before:absolute before:bottom-[-6px]
+                before:w-full before:border-b-2
+                before:opacity-0 before:transition hover:bg-gray-100;
 
             :root .dark & {
                 @apply text-darkMedium focus-visible:ring-primary hover:bg-gray-800
@@ -72,11 +62,7 @@
             }
 
             &.is-active {
-                @apply before:opacity-100;
-
-                :root .light & {
-                    @apply text-lightHigh before:border-b-primary hover:bg-transparent;
-                }
+                @apply text-lightHigh before:border-b-primary before:opacity-100 hover:bg-transparent;
 
                 :root .dark & {
                     @apply text-darkHigh before:border-b-primary hover:bg-transparent;
@@ -84,9 +70,7 @@
             }
 
             &.is-disabled {
-                :root .light & {
-                    @apply text-lightLow;
-                }
+                @apply text-lightLow;
 
                 :root .dark & {
                     @apply text-darkLow;
@@ -95,12 +79,8 @@
         }
 
         &--segmented {
-            @apply rounded;
-
-            :root .light & {
-                @apply text-lightMedium hover:bg-primary-100 hover:text-primary-600 focus-visible:ring-primary
-                    bg-gray-100 focus-visible:ring-offset-gray-100;
-            }
+            @apply text-lightMedium hover:bg-primary-100 hover:text-primary-600 focus-visible:ring-primary rounded
+                bg-gray-100 focus-visible:ring-offset-gray-100;
 
             :root .dark & {
                 @apply text-darkMedium focus-visible:ring-primary bg-gray-700 hover:bg-gray-800
@@ -108,9 +88,7 @@
             }
 
             &.is-active {
-                :root .light & {
-                    @apply bg-primary text-white;
-                }
+                @apply bg-primary text-white;
 
                 :root .dark & {
                     @apply bg-primary text-white;
@@ -118,9 +96,7 @@
             }
 
             &.is-disabled {
-                :root .light & {
-                    @apply text-gray-400;
-                }
+                @apply text-gray-400;
 
                 :root .dark & {
                     @apply text-gray-500;

package/css/text-link.css

@@ -1,10 +1,7 @@
 .uxf-text-link {
-    @apply relative underline outline-none transition before:absolute before:-inset-1
-        focus-visible:before:rounded-lg focus-visible:before:border-2;
-
-    :root .light & {
-        @apply text-primary focus-visible:before:border-primary is-hoverable:text-primary-400;
-    }
+    @apply text-primary focus-visible:before:border-primary is-hoverable:text-primary-400 relative underline outline-none
+        transition before:absolute
+        before:-inset-1 focus-visible:before:rounded-lg focus-visible:before:border-2;
 
     :root .dark & {
         @apply text-primary focus-visible:before:border-primary is-hoverable:text-primary-400;

package/css/textarea.css

@@ -1,9 +1,7 @@
 .uxf-textarea {
-    :root .light & {
-        --bg-color: theme("colors.white");
-        --border-color: theme("colors.gray.200");
-        --color: theme("colors.gray.900");
-    }
+    --bg-color: theme("colors.white");
+    --border-color: theme("colors.gray.200");
+    --color: theme("colors.gray.900");
 
     :root .dark & {
         --bg-color: theme("colors.gray.800");
@@ -35,7 +33,8 @@
     }
 
     &.is-focused {
-        :root .light &,
+        --border-color: theme("colors.primary.DEFAULT");
+
         :root .dark & {
             --border-color: theme("colors.primary.DEFAULT");
         }
@@ -46,7 +45,9 @@
     }
 
     &.is-invalid {
-        :root .light &,
+        --border-color: var(--color);
+        --color: theme("colors.error.DEFAULT");
+
         :root .dark & {
             --border-color: var(--color);
             --color: theme("colors.error.DEFAULT");
@@ -54,14 +55,12 @@
     }
 
     &.is-readonly {
+        --bg-color: theme("colors.gray.300");
+        --border-color: theme("colors.gray.200");
+
         cursor: text;
         pointer-events: none;
 
-        :root .light & {
-            --bg-color: theme("colors.gray.300");
-            --border-color: theme("colors.gray.200");
-        }
-
         :root .dark & {
             --bg-color: theme("colors.gray.500");
             --border-color: theme("colors.gray.700");
@@ -73,11 +72,9 @@
     }
 
     &.is-disabled {
-        cursor: not-allowed;
+        --bg-color: theme("colors.gray.300");
 
-        :root .light & {
-            --bg-color: theme("colors.gray.300");
-        }
+        cursor: not-allowed;
 
         :root .dark & {
             --bg-color: theme("colors.gray.600");
@@ -96,14 +93,11 @@
         &:hover,
         &:focus {
             appearance: none;
+            background-color: theme("colors.white");
+            -webkit-box-shadow: inset 0 0 0 1000px theme("colors.white"); /* stylelint-disable-line property-no-vendor-prefix */
+            box-shadow: inset 0 0 0 1000px theme("colors.white");
             transition: background-color 5000s ease-in-out 0s !important;
 
-            :root .light & {
-                background-color: theme("colors.white");
-                -webkit-box-shadow: inset 0 0 0 1000px theme("colors.white"); /* stylelint-disable-line property-no-vendor-prefix */
-                box-shadow: inset 0 0 0 1000px theme("colors.white");
-            }
-
             :root .dark & {
                 -webkit-text-fill-color: theme("colors.gray.300");
                 background-color: theme("colors.gray.800");

package/css/toggle.css

@@ -1,6 +1,10 @@
 .uxf-toggle {
-    @apply relative inline-flex h-6 w-12 shrink-0 items-center rounded-full p-0.5 outline-none ring-offset-2
-        focus-visible:ring-2 [&>*]:active:w-[30px];
+    @apply focus-visible:ring-primary relative inline-flex h-6 w-12 shrink-0 items-center rounded-full bg-gray-200 p-0.5
+        outline-none ring-offset-2 focus-visible:ring-2 [&>*]:active:w-[30px];
+
+    :root .dark & {
+        @apply focus-visible:ring-primary bg-gray-400 focus-visible:ring-offset-gray-900;
+    }
 
     &__wrapper {
         @apply flex items-center justify-between space-x-4 p-4;
@@ -15,11 +19,7 @@
     }
 
     &__label {
-        @apply w-full;
-
-        :root .light & {
-            @apply text-lightMedium;
-        }
+        @apply text-lightMedium w-full;
 
         :root .dark & {
             @apply text-darkMedium;
@@ -27,52 +27,32 @@
     }
 
     &__inner {
-        @apply inline-block h-5 w-5 transform rounded-full bg-white transition-all;
-    }
+        @apply inline-block h-5 w-5 transform rounded-full bg-white bg-white transition-all;
 
-    &.is-disabled {
-        @apply pointer-events-none;
+        :root .dark & {
+            @apply bg-gray-900;
+        }
     }
 
     &.is-selected {
-        @apply [&>*]:translate-x-6 [&>*]:active:translate-x-[14px];
-    }
-
-    :root .light & {
-        @apply focus-visible:ring-primary bg-gray-200;
-
-        &__inner {
-            @apply bg-white;
-        }
+        @apply bg-primary [&>*]:translate-x-6 [&>*]:active:translate-x-[14px];
 
-        &.is-selected {
+        :root .dark & {
             @apply bg-primary;
         }
-
-        &.is-disabled {
-            @apply bg-gray-100;
-
-            .uxf-toggle__inner {
-                @apply bg-gray-400;
-            }
-        }
     }
 
-    :root .dark & {
-        @apply focus-visible:ring-primary bg-gray-400 focus-visible:ring-offset-gray-900;
-
-        &.is-selected {
-            @apply bg-primary;
-        }
+    &.is-disabled {
+        @apply pointer-events-none bg-gray-100;
 
-        &__inner {
-            @apply bg-gray-900;
+        :root .dark & {
+            @apply bg-gray-700;
         }
 
-        &.is-disabled {
-            @apply bg-gray-700;
+        .uxf-toggle__inner {
+            @apply bg-gray-400;
 
-            .uxf-toggle__inner {
+            :root .dark & {
                 @apply bg-gray-500;
             }
         }

package/dropdown/dropdown.js

@@ -39,7 +39,7 @@ const Item = (0, react_1.forwardRef)((props, ref) => {
 });
 Item.displayName = "UxfUiDropdownItem";
 const Items = (0, react_1.forwardRef)((props, ref) => {
-    return (react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-dropdown__items", props.className), ref: ref, role: props.role }, props.children));
+    return (react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-dropdown", props.className), ref: ref, role: props.role }, props.children));
 });
 exports.Dropdown = {
     Item,

package/dropzone/dropzone-input.js

@@ -24,8 +24,8 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DropzoneInput = void 0;
+const compose_refs_1 = require("@uxf/core-react/utils/compose-refs");
 const classes_1 = require("@uxf/core/constants/classes");
-const composeRefs_1 = require("@uxf/core/utils/composeRefs");
 const cx_1 = require("@uxf/core/utils/cx");
 const react_1 = __importStar(require("react"));
 const react_dropzone_1 = require("react-dropzone");
@@ -128,7 +128,7 @@ exports.DropzoneInput = (0, react_1.forwardRef)((props, ref) => {
         react_1.default.createElement("label", { ...getRootProps({
                 className: (0, cx_1.cx)("uxf-dropzone__label", props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.noClick && "cursor-auto"),
                 onClick: labelOnCLick,
-            }), ref: (0, composeRefs_1.composeRefs)(ref, rootRef) },
+            }), ref: (0, compose_refs_1.composeRefs)(ref, rootRef) },
             react_1.default.createElement(icon_1.Icon, { className: "uxf-dropzone__label__icon", name: (_b = props.icon) !== null && _b !== void 0 ? _b : "cloud" }),
             typeof props.label === "string" ? react_1.default.createElement("span", null, props.label) : props.label,
             react_1.default.createElement("input", { ...getInputProps({

package/file-input/file-input.js

@@ -25,8 +25,8 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FileInput = void 0;
 const use_input_focus_1 = require("@uxf/core-react/hooks/use-input-focus");
+const compose_refs_1 = require("@uxf/core-react/utils/compose-refs");
 const classes_1 = require("@uxf/core/constants/classes");
-const composeRefs_1 = require("@uxf/core/utils/composeRefs");
 const cx_1 = require("@uxf/core/utils/cx");
 const context_1 = require("@uxf/ui/context");
 const input_1 = require("@uxf/ui/input");
@@ -62,7 +62,7 @@ exports.FileInput = (0, react_1.forwardRef)((props, ref) => {
     };
     return (react_1.default.createElement(form_component_1.FormComponent, { className: (0, cx_1.cx)(input.focused && classes_1.CLASSES.IS_FOCUSED, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isReadOnly && classes_1.CLASSES.IS_READONLY), errorId: errorId, form: props.form, helperText: props.helperText, inputId: id, isRequired: props.isRequired, label: props.label, hiddenLabel: props.hiddenLabel, name: props.name },
         react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(_file_input_base_1._FileInputBase, { accept: props.accept, "aria-describedby": errorId, "aria-invalid": props.isInvalid, className: `uxf-file-input__input ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`, form: props.form, id: id, isDisabled: props.isDisabled || isUploading, isInvalid: props.isInvalid, isReadOnly: props.isReadOnly, isRequired: props.isRequired, maxFileSize: props.maxFileSize, name: props.name, onBlur: input.onBlur, onChange: onChange, onFocus: input.onFocus, onUploadError: props.onUploadError, onUploadFile: onUploadFile, ref: (0, composeRefs_1.composeRefs)(ref, innerRef), value: props.value }),
+            react_1.default.createElement(_file_input_base_1._FileInputBase, { accept: props.accept, "aria-describedby": errorId, "aria-invalid": props.isInvalid, className: `uxf-file-input__input ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`, form: props.form, id: id, isDisabled: props.isDisabled || isUploading, isInvalid: props.isInvalid, isReadOnly: props.isReadOnly, isRequired: props.isRequired, maxFileSize: props.maxFileSize, name: props.name, onBlur: input.onBlur, onChange: onChange, onFocus: input.onFocus, onUploadError: props.onUploadError, onUploadFile: onUploadFile, ref: (0, compose_refs_1.composeRefs)(ref, innerRef), value: props.value }),
             react_1.default.createElement("label", { className: (0, cx_1.cx)("uxf-input", "uxf-file-input__label", input.focused && classes_1.CLASSES.IS_FOCUSED, (props.isDisabled || props.isReadOnly) && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, isUploading && classes_1.CLASSES.IS_LOADING, isUploading && "uxf-file-input__label--has-right-addon", `uxf-input--size-${(_b = props.size) !== null && _b !== void 0 ? _b : "default"}`, `uxf-input--variant-${(_c = props.variant) !== null && _c !== void 0 ? _c : "default"}`), htmlFor: id },
                 react_1.default.createElement("div", { className: "uxf-input__left-addon uxf-file-input__label__button" }, !isUploading ? ((_d = props.uploadButtonLabel) !== null && _d !== void 0 ? _d : "Vyberte soubor") : (react_1.default.createElement(loader_1.Loader, { className: "uxf-file-input__label__loader", size: "sm" }))),
                 react_1.default.createElement("div", { className: "uxf-file-input__label__wrapper" },

package/flash-messages/flash-messages.js

@@ -25,7 +25,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FlashMessages = void 0;
 const react_1 = require("@headlessui/react");
-const useClickableProps_1 = require("@uxf/core/hooks/useClickableProps");
+const use_clickable_props_1 = require("@uxf/core-react/hooks/use-clickable-props");
 const react_2 = __importStar(require("react"));
 const flash_message_1 = require("./flash-message");
 exports.FlashMessages = (0, react_2.forwardRef)((props, ref) => {
@@ -82,7 +82,7 @@ exports.FlashMessages = (0, react_2.forwardRef)((props, ref) => {
         closeAll: innerRef.current.closeAll,
         open: innerRef.current.open,
     }), []);
-    const clickableProps = (0, useClickableProps_1.useClickableProps)({
+    const clickableProps = (0, use_clickable_props_1.useClickableProps)({
         className: `uxf-flash-messages__dismissable ${isCollapsed ? "is-collapsed" : ""}`,
         onMouseEnter: () => setIsCollapsed(false),
         onMouseLeave: () => setIsCollapsed(true),

package/icon/icon.d.ts

@@ -8,6 +8,7 @@ type NameOrComponentType = {
     Component: any;
 };
 export type IconProps = {
+    "aria-label"?: string;
     className?: string;
     mode?: "meet" | "slice";
     size?: number;

package/icon/icon.js

@@ -42,17 +42,17 @@ exports.Icon = (0, react_1.forwardRef)((props, ref) => {
         }
         : props.style;
     if (CustomComponent) {
-        return (react_1.default.createElement(CustomComponent, { className: className, preserveAspectRatio: preserveAspectRatio, ref: ref, role: "img", style: style }));
+        return (react_1.default.createElement(CustomComponent, { "aria-label": props["aria-label"], className: className, preserveAspectRatio: preserveAspectRatio, ref: ref, role: "img", style: style }));
     }
     if (props.name && props.name in componentContext.iconsConfig) {
         const icon = componentContext.iconsConfig[props.name];
-        return (react_1.default.createElement("svg", { className: className, preserveAspectRatio: preserveAspectRatio, ref: ref, role: "img", style: style, viewBox: `0 0 ${icon.w} ${icon.h}` },
+        return (react_1.default.createElement("svg", { "aria-label": props["aria-label"], className: className, preserveAspectRatio: preserveAspectRatio, ref: ref, role: "img", style: style, viewBox: `0 0 ${icon.w} ${icon.h}` },
             react_1.default.createElement("use", { xlinkHref: `${componentContext.spriteFilePath}#icon-sprite--${props.name}` })));
     }
     // eslint-disable-next-line no-console
     console.warn(`Icon "${props.name}" not found.`);
     return (react_1.default.createElement("span", { title: `icon "${props.name}" not found` },
-        react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512", width: props.size, height: props.size },
+        react_1.default.createElement("svg", { "aria-label": props["aria-label"], height: props.size, viewBox: "0 0 320 512", width: props.size, xmlns: "http://www.w3.org/2000/svg" },
             react_1.default.createElement("path", { d: "M144 416c-17.67 0-32 14.33-32 32s14.33 32.01 32 32.01s32-14.34 32-32.01S161.7 416 144 416zM211.2 32H104C46.66 32 0 78.66 0 136v16C0 165.3 10.75 176 24 176S48 165.3 48 152v-16c0-30.88 25.12-56 56-56h107.2C244.7 80 272 107.3 272 140.8c0 22.66-12.44 43.27-32.5 53.81L167 232.8C137.1 248 120 277.9 120 310.6V328c0 13.25 10.75 24.01 24 24.01S168 341.3 168 328V310.6c0-14.89 8.188-28.47 21.38-35.41l72.47-38.14C297.7 218.2 320 181.3 320 140.8C320 80.81 271.2 32 211.2 32z" }))));
 });
 exports.Icon.displayName = "UxfUiIcon";

package/icon/index.d.ts

@@ -1,2 +1,3 @@
 export { Icon } from "./icon";
 export type { IconProps } from "./icon";
+export type { IconsSet } from "./theme";

package/image-gallery/components/close-button.js

@@ -4,8 +4,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CloseButton = void 0;
+const icon_1 = require("@uxf/ui/icon");
 const react_1 = __importDefault(require("react"));
-const icon_1 = require("../../icon");
 const CloseButton = (props) => {
     var _a, _b;
     return (react_1.default.createElement("button", { className: "uxf-image-gallery__close-button", onClick: () => props.onClick() },

package/image-gallery/components/next-button.js

@@ -4,8 +4,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NextButton = void 0;
+const icon_1 = require("@uxf/ui/icon");
 const react_1 = __importDefault(require("react"));
-const icon_1 = require("../../icon");
 const NextButton = (props) => {
     var _a;
     return (react_1.default.createElement("button", { className: "uxf-image-gallery__button uxf-image-gallery__button--next", onClick: props.onClick }, (_a = props.buttonElement) !== null && _a !== void 0 ? _a : react_1.default.createElement(icon_1.Icon, { className: "uxf-image-gallery__button-icon", name: "chevronRight" })));

package/image-gallery/components/prev-button.js

@@ -4,8 +4,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PrevButton = void 0;
+const icon_1 = require("@uxf/ui/icon");
 const react_1 = __importDefault(require("react"));
-const icon_1 = require("../../icon");
 const PrevButton = (props) => {
     var _a;
     return (react_1.default.createElement("button", { className: "uxf-image-gallery__button uxf-image-gallery__button--prev", onClick: props.onClick }, (_a = props.buttonElement) !== null && _a !== void 0 ? _a : react_1.default.createElement(icon_1.Icon, { className: "uxf-image-gallery__button-icon", name: "chevronLeft" })));

package/input/README.md

@@ -5,4 +5,4 @@
 ```css
 @import url("@uxf/ui/input/input-basic.css");
 @import url("@uxf/ui/input/input.css");
-```
+```

package/input/index.d.ts

@@ -1,9 +1,11 @@
 /// <reference types="react" />
+import { InputArrowIcon } from "./input-arrow-icon";
 export type { InputProps } from "./input";
 export type { InputElementProps } from "./input-element";
 export type { InputRemoveButtonProps } from "./input-remove-button";
 export type { InputGroupSize, InputGroupVariant } from "./theme";
 export declare const Input: import("react").ForwardRefExoticComponent<import("./input").InputProps & import("react").RefAttributes<HTMLInputElement>> & {
+    ArrowIcon: typeof InputArrowIcon;
     Element: import("react").ForwardRefExoticComponent<import("./input-element").InputElementProps & import("react").RefAttributes<HTMLInputElement>>;
     LeftAddon: import("react").FC<import("./input-left-addon").InputLeftAddonProps>;
     LeftElement: import("react").FC<import("./input-left-element").InputLeftElementProps>;

package/input/index.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Input = void 0;
 const input_1 = require("./input");
+const input_arrow_icon_1 = require("./input-arrow-icon");
 const input_element_1 = require("./input-element");
 const input_left_addon_1 = require("./input-left-addon");
 const input_left_element_1 = require("./input-left-element");
@@ -9,6 +10,7 @@ const input_remove_button_1 = require("./input-remove-button");
 const input_right_addon_1 = require("./input-right-addon");
 const input_right_element_1 = require("./input-right-element");
 exports.Input = Object.assign(input_1.Input, {
+    ArrowIcon: input_arrow_icon_1.InputArrowIcon,
     Element: input_element_1.InputElement,
     LeftAddon: input_left_addon_1.InputLeftAddon,
     LeftElement: input_left_element_1.InputLeftElement,

package/input/input-arrow-icon.d.ts

@@ -0,0 +1,8 @@
+import { IconsSet } from "@uxf/ui/icon";
+import React from "react";
+interface Props {
+    iconName?: keyof IconsSet;
+    isOpen: boolean;
+}
+export declare function InputArrowIcon(props: Props): React.JSX.Element;
+export {};