@uxf/ui 11.28.0 → 11.28.2

package/avatar-file-input/avatar-file-input.js

@@ -63,7 +63,7 @@ exports.AvatarFileInput = (0, react_1.forwardRef)((props, ref) => {
                 onSelectFile,
                 onRemoveFile,
             })) : (react_1.default.createElement("div", { className: "uxf-avatar-file-input__controls-buttons" },
-                react_1.default.createElement(button_1.Button, { className: "uxf-avatar-file-input__controls-button uxf-avatar-file-input__controls-button--select", disabled: props.isDisabled, onClick: onSelectFile, size: "sm", variant: "secondary" }, (_e = props.selectFileLabel) !== null && _e !== void 0 ? _e : "Upload image"),
-                !!props.value && !props.isDisabled && (react_1.default.createElement(button_1.Button, { className: "uxf-avatar-file-input__controls-button uxf-avatar-file-input__controls-button--remove", color: "negative", disabled: props.isDisabled, onClick: onRemoveFile, size: "sm", variant: "secondary" }, (_f = props.removeFileLabel) !== null && _f !== void 0 ? _f : "Remove avatar"))))))));
+                react_1.default.createElement(button_1.Button, { className: "uxf-avatar-file-input__controls-button uxf-avatar-file-input__controls-button--select", isDisabled: props.isDisabled, onClick: onSelectFile, size: "sm", variant: "secondary" }, (_e = props.selectFileLabel) !== null && _e !== void 0 ? _e : "Upload image"),
+                !!props.value && !props.isDisabled && (react_1.default.createElement(button_1.Button, { className: "uxf-avatar-file-input__controls-button uxf-avatar-file-input__controls-button--remove", color: "negative", isDisabled: props.isDisabled, onClick: onRemoveFile, size: "sm", variant: "secondary" }, (_f = props.removeFileLabel) !== null && _f !== void 0 ? _f : "Remove avatar"))))))));
 });
 exports.AvatarFileInput.displayName = "UxfUiAvatarFileInput";

package/button/button.d.ts

@@ -12,11 +12,7 @@ export interface ButtonProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement
     isIconButton?: boolean;
     size?: ButtonSize;
     variant?: ButtonVariant;
-    /** @deprecated use isLoading */
-    loading?: boolean;
     isLoading?: boolean;
-    /** @deprecated use isDisabled */
-    disabled?: boolean;
     isDisabled?: boolean;
 }
 export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLAnchorElement>>;

package/button/button.js

@@ -29,10 +29,8 @@ const cx_1 = require("@uxf/core/utils/cx");
 const react_1 = __importStar(require("react"));
 exports.Button = (0, react_1.forwardRef)((props, ref) => {
     // eslint-disable-next-line react/destructuring-assignment
-    const { as = "a", color, isIconButton, isFullWidth, size, variant, className, ...restProps } = props;
+    const { as = "a", color, isIconButton, isFullWidth, size, variant, className, isDisabled, isLoading, ...restProps } = props;
     const Component = as;
-    const isDisabled = props.isDisabled || props.disabled;
-    const isLoading = props.isLoading || props.loading;
     const anchorProps = (0, use_anchor_props_1.useAnchorProps)({
         ...restProps,
         disabled: isDisabled,

package/button/button.stories.js

@@ -44,13 +44,13 @@ function Basic() {
             config.variants.flatMap((variant) => config.sizes.map((size) => (react_1.default.createElement("div", { key: variant, className: "text-center text-xs text-gray-400" },
                 "size=",
                 size))))),
-        config.colors.map((color) => (react_1.default.createElement("div", { className: color === "inverted" ? "bg-[#1F2A37] dark:bg-white" : undefined, key: color },
+        config.colors.map((color) => (react_1.default.createElement("div", { className: color === "inverted" ? "min-w-fit bg-[#1F2A37] dark:bg-white" : undefined, key: color },
             react_1.default.createElement("div", { className: "grid gap-3 py-2", style: { gridTemplateColumns } },
                 react_1.default.createElement("div", { className: "flex items-center text-center text-xs text-gray-400" },
                     "color=",
                     color),
                 config.variants.map((variant) => (react_1.default.createElement(react_1.Fragment, { key: variant }, config.sizes.map((size) => (react_1.default.createElement("div", { key: `${size}${color}${variant}`, className: "flex items-center justify-center gap-2" },
-                    react_1.default.createElement(button_1.Button, { color: color, onClick: onClick, size: size, variant: variant, isLoading: true }, "Button"),
+                    react_1.default.createElement(button_1.Button, { color: color, onClick: onClick, size: size, variant: variant }, "Button"),
                     react_1.default.createElement(button_1.Button, { color: color, onClick: onClick, size: size, variant: variant, isIconButton: true },
                         react_1.default.createElement(icon_1.Icon, { name: "triangle-exclamation" }))))))))))))));
 }
@@ -71,11 +71,11 @@ function Default() {
             react_1.default.createElement("span", { className: "font-semibold" }, size)),
         react_1.default.createElement("div", { className: "flex flex-row items-start gap-2" },
             react_1.default.createElement(button_1.Button, { color: color, onClick: onClick, size: size, variant: variant }, "Default"),
-            react_1.default.createElement(button_1.Button, { color: color, loading: true, onClick: onClick, size: size, variant: variant }, "Loading"),
-            react_1.default.createElement(button_1.Button, { color: color, disabled: true, onClick: onClick, size: size, variant: variant }, "Disabled"),
+            react_1.default.createElement(button_1.Button, { color: color, isLoading: true, onClick: onClick, size: size, variant: variant }, "Loading"),
+            react_1.default.createElement(button_1.Button, { color: color, isDisabled: true, onClick: onClick, size: size, variant: variant }, "Disabled"),
             react_1.default.createElement(button_1.Button, { color: color, isIconButton: true, onClick: onClick, size: size, variant: variant },
                 react_1.default.createElement(icon_1.Icon, { name: "check" })),
-            react_1.default.createElement(button_1.Button, { color: color, isIconButton: true, onClick: onClick, size: size, variant: variant, loading: true },
+            react_1.default.createElement(button_1.Button, { color: color, isIconButton: true, onClick: onClick, size: size, variant: variant, isLoading: true },
                 react_1.default.createElement(icon_1.Icon, { name: "check" })),
             react_1.default.createElement(button_1.Button, { className: "w-[200px]", color: color, onClick: onClick, size: size, variant: variant }, "Custom width")),
         react_1.default.createElement(button_1.Button, { color: color, isFullWidth: true, onClick: onClick, size: size, variant: variant }, "Full width"),

package/button-list/button-list.stories.js

@@ -16,7 +16,7 @@ const Default = () => {
                 { label: "First item" },
                 { label: "Second item" },
                 { label: "Third item" },
-                { label: "Fourth item", disabled: true },
+                { label: "Fourth item", isDisabled: true },
                 { label: "Fifth item" },
                 { label: "Sixth item" },
                 { label: "Seventh item" },

package/css/button.css

@@ -172,6 +172,7 @@
 
     &--variant-secondary {
         --uxf-button-background-color-hover: var(--uxf-color-base-surface-main-hover);
+        --uxf-button-background-color: var(--uxf-color-base-surface-main);
 
         border-style: solid;
         border-width: 1px;
@@ -204,15 +205,12 @@
         &.uxf-button--color-inverted {
             --uxf-button-border-color: var(--uxf-color-base-border-inverted);
             --uxf-button-text-color: var(--uxf-color-base-text-inverted-high-emphasis);
-            --uxf-button-background-color-hover: #ffffff1f;
+            --uxf-button-background-color: var(--uxf-color-base-surface-inverted-main);
+            --uxf-button-background-color-hover: var(--uxf-color-base-surface-inverted-main-hover);
 
             &.uxf-button--is-disabled {
-                --uxf-button-border-color: var(--uxf-color-base-surface-disabled);
-                --uxf-button-background-color: var(--uxf-color-base-surface-disabled);
-            }
-
-            :root .dark & {
-                --uxf-button-background-color-hover: #d2d6db2f;
+                --uxf-button-text-color: var(--uxf-color-base-text-inverted-disabled);
+                --uxf-button-background-color: var(--uxf-color-base-surface-inverted-main);
             }
         }
 
@@ -248,14 +246,12 @@
             --uxf-button-text-color: var(--uxf-color-info-text);
         }
 
-        /** TODO @vejvis - UX musí doladit inverted button... teď je to strašnej hack */
         &.uxf-button--color-inverted {
             --uxf-button-text-color: var(--uxf-color-base-text-inverted-high-emphasis);
-            --uxf-button-background-color-hover: #ffffff1f;
+            --uxf-button-background-color-hover: var(--uxf-color-base-surface-inverted-main-hover);
 
-            :root .dark & {
-                --uxf-button-background-color-hover: #d2d6db2f;
-                --uxf-button-text-color: #d2d6db;
+            &.uxf-button--is-disabled {
+                --uxf-button-text-color: var(--uxf-color-base-text-inverted-disabled);
             }
         }
 

package/css/colors.css

@@ -6,10 +6,14 @@
     --uxf-color-base-surface-main-hover: #f3f4f6;
     --uxf-color-base-surface-input-disabled: #f3f4f6;
     --uxf-color-base-surface-disabled: #d2d6db;
+    --uxf-color-base-surface-inverted-main: #ffffff14;
+    --uxf-color-base-surface-inverted-main-hover: #ffffff29;
     --uxf-color-base-text-disabled: #9da4ae;
     --uxf-color-base-text-high-emphasis: #111927;
     --uxf-color-base-text-low-emphasis: #4d5761;
     --uxf-color-base-text-inverted-high-emphasis: #fff;
+    --uxf-color-base-text-inverted-low-emphasis: #fffc;
+    --uxf-color-base-text-inverted-disabled: #ffffffb3;
 
     /** primary */
     --uxf-color-primary-surface-default: #155dee;
@@ -47,10 +51,14 @@
         --uxf-color-base-surface-main-hover: #1f2a37;
         --uxf-color-base-surface-input-disabled: #4d5761;
         --uxf-color-base-surface-disabled: #d2d6db;
+        --uxf-color-base-surface-inverted-main: #20293914;
+        --uxf-color-base-surface-inverted-main-hover: #20293929;
         --uxf-color-base-text-disabled: #ffffff80;
         --uxf-color-base-text-high-emphasis: #fff;
         --uxf-color-base-text-low-emphasis: #ffffffbf;
         --uxf-color-base-text-inverted-high-emphasis: #111927;
+        --uxf-color-base-text-inverted-low-emphasis: #202939cc;
+        --uxf-color-base-text-inverted-disabled: #202939b3;
 
         /** primary */
         --uxf-color-primary-surface-default: #518bff;

package/css/icon.css

@@ -1,12 +1,10 @@
 .uxf-icon {
-    @apply h-[var(--i-h)] w-[var(--i-w)] shrink-0;
-
-    :root .dark & {
-        color: theme("colors.white");
-    }
+    flex-shrink: 0;
+    height: var(--i-h);
+    width: var(--i-w);
 
     & > use {
-        @apply pointer-events-none;
+        pointer-events: none;
     }
 
     &--color-default {

package/date-picker/date-picker-month.js

@@ -60,11 +60,11 @@ exports.DatePickerMonth = (0, react_1.memo)((props) => {
     }, [setViewMode]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(calendar_1.CalendarNavigation, { prevButtonProps: {
-                disabled: !canGoToPrevMonth,
+                isDisabled: !canGoToPrevMonth,
                 onClick: canGoToPrevMonth ? handleGoToPrevMonth : undefined,
                 title: "Předchozí měsíc",
             }, nextButtonProps: {
-                disabled: !canGoToNextMonth,
+                isDisabled: !canGoToNextMonth,
                 onClick: canGoToNextMonth ? handleGoToNextMonth : undefined,
                 title: "Nadcházející měsíc",
             }, selectButtonProps: {

package/date-picker/date-picker-year.js

@@ -62,11 +62,11 @@ exports.DatePickerYear = (0, react_1.memo)((props) => {
     }, [canGoToMonth, props]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(calendar_1.CalendarNavigation, { prevButtonProps: {
-                disabled: !canGoToPrevYear,
+                isDisabled: !canGoToPrevYear,
                 onClick: canGoToPrevYear ? handleGoToPrevYear : undefined,
                 title: "Předchozí rok",
             }, nextButtonProps: {
-                disabled: !canGoToNextYear,
+                isDisabled: !canGoToNextYear,
                 onClick: canGoToNextYear ? handleGoToNextYear : undefined,
                 title: "Nadcházející rok",
             }, selectButtonProps: {

package/date-range-picker/date-range-picker-month.js

@@ -52,11 +52,11 @@ exports.DateRangePickerMonth = (0, react_1.memo)((props) => {
     }, [props]);
     return (react_1.default.createElement("div", { className: "uxf-date-range-picker__month" },
         react_1.default.createElement(calendar_1.CalendarNavigation, { prevButtonProps: {
-                disabled: !canGoToPrevMonth,
+                isDisabled: !canGoToPrevMonth,
                 onClick: canGoToPrevMonth ? handleGoToPrevMonth : undefined,
                 title: "Předchozí měsíc",
             }, nextButtonProps: {
-                disabled: !canGoToNextMonth,
+                isDisabled: !canGoToNextMonth,
                 onClick: canGoToNextMonth ? handleGoToNextMonth : undefined,
                 title: "Nadcházející měsíc",
             }, selectButtonProps: {

package/date-range-picker/date-range-picker-year.js

@@ -63,11 +63,11 @@ exports.DateRangePickerYear = (0, react_1.memo)((props) => {
     }, [canGoToMonth, props]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(calendar_1.CalendarNavigation, { prevButtonProps: {
-                disabled: !canGoToPrevYear,
+                isDisabled: !canGoToPrevYear,
                 onClick: canGoToPrevYear ? handleGoToPrevYear : undefined,
                 title: "Předchozí rok",
             }, nextButtonProps: {
-                disabled: !canGoToNextYear,
+                isDisabled: !canGoToNextYear,
                 onClick: canGoToNextYear ? handleGoToNextYear : undefined,
                 title: "Nadcházející rok",
             }, selectButtonProps: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/ui",
-  "version": "11.28.0",
+  "version": "11.28.2",
   "description": "",
   "publishConfig": {
     "access": "public"

package/text-input/text-input.stories.js

@@ -53,7 +53,7 @@ function Default() {
         react_1.default.createElement(text_input_1.TextInput, { name: "readOnly", label: "Read only input", value: value, onChange: onChange, helperText: "Error helper text", leftAddon: "https://", rightAddon: ".cz", leftElement: "\uD83C\uDF37", rightElement: "\uD83D\uDD14", placeholder: "Some beautiful placeholder...", isReadOnly: true }),
         react_1.default.createElement(text_input_1.TextInput, { name: "disabled", label: "Disabled input", value: value, onChange: onChange, helperText: "Error helper text", leftAddon: "https://", rightAddon: ".cz", leftElement: "\uD83C\uDF37", rightElement: "\uD83D\uDD14", placeholder: "Some beautiful placeholder...", isDisabled: true }),
         react_1.default.createElement(text_input_1.TextInput, { name: "defaultHtmlTime", label: "Default html time input", value: timeValue, onChange: onTimeChange, placeholder: "Some beautiful placeholder...", type: "time" }),
-        react_1.default.createElement(text_input_1.TextInput, { name: "copyToClipboard", label: "Copy to clipboard input", leftAddon: "I can be copied!", onChange: onChange, placeholder: "Some beautiful placeholder...", rightAddon: react_1.default.createElement(button_1.Button, { className: "size-full rounded-l-none border-none", disabled: value === "", onClick: onCopy, variant: "secondary" },
+        react_1.default.createElement(text_input_1.TextInput, { name: "copyToClipboard", label: "Copy to clipboard input", leftAddon: "I can be copied!", onChange: onChange, placeholder: "Some beautiful placeholder...", rightAddon: react_1.default.createElement(button_1.Button, { className: "size-full rounded-l-none border-none", isDisabled: value === "", onClick: onCopy, variant: "secondary" },
                 react_1.default.createElement(icon_1.Icon, { className: "w-4", name: "copy" })), value: value })));
 }
 exports.Default = Default;