@uxf/ui 10.0.0-beta.7 → 10.0.0-beta.74

package/combobox/combobox.stories.js

@@ -37,7 +37,7 @@ exports.default = {
 };
 const options = [
     { id: "one", label: "Option one" },
-    { id: "two", label: "Option two" },
+    { id: "two", label: "Option two disabled", disabled: true },
     { id: "three", label: "Option three" },
     { id: "four", label: "Option with diacritics (ěščřžýáíé)" },
 ];
@@ -52,7 +52,11 @@ function Default() {
         react_1.default.createElement(index_1.Combobox, { id: "combobox-1", label: "Combobox", name: "combobox", onChange: onChange, options: options, placeholder: "Vyberte...", value: value }),
         react_1.default.createElement(index_1.Combobox, { helperText: "Start typing to see options...", id: "combobox-1", label: "Combobox with helper text", name: "combobox", onChange: onChange, options: options, placeholder: "Vyberte...", value: value }),
         react_1.default.createElement(index_1.Combobox, { helperText: "Error message", id: "combobox-1", isInvalid: true, isRequired: true, label: "Combobox invalid", name: "combobox", onChange: onChange, options: options, placeholder: "Vyberte...", value: value }),
-        react_1.default.createElement(index_1.Combobox, { dropdownPlacement: "top", id: "combobox-1", label: "Combobox with dropdown top", name: "combobox", onChange: onChange, options: options, placeholder: "Vyberte...", isClearable: true, value: value })));
+        react_1.default.createElement(index_1.Combobox, { dropdownPlacement: "top", id: "combobox-1", label: "Combobox with dropdown top", name: "combobox", onChange: onChange, options: options, placeholder: "Vyberte...", isClearable: true, value: value }),
+        react_1.default.createElement(index_1.Combobox, { id: "combobox-render", label: "RenderOption", name: "combobox", onChange: onChange, options: options, placeholder: "Vyberte...", isClearable: true, value: value, renderOption: (option, isSelected) => (react_1.default.createElement(react_1.default.Fragment, null,
+                "Option: ",
+                option.label,
+                isSelected && " (selected)")) })));
     return (react_1.default.createElement("div", { className: "flex flex-col lg:flex-row" },
         react_1.default.createElement("div", { className: "light space-y-2 p-20 lg:w-1/2" }, storyComboboxes),
         react_1.default.createElement("div", { className: "dark space-y-2 bg-gray-900 p-20 lg:w-1/2" }, storyComboboxes)));

package/config/icons-config.d.ts

@@ -1,2 +1,2 @@
-export declare const ICONS_VERSION = "1685632683041";
+export declare const ICONS_VERSION = "1687765245583";
 export declare const ICON_SPRITE = "/.storybook/static-assets/icons-generated/_icon-sprite.svg";

package/config/icons-config.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ICON_SPRITE = exports.ICONS_VERSION = void 0;
-exports.ICONS_VERSION = "1685632683041";
+exports.ICONS_VERSION = "1687765245583";
 exports.ICON_SPRITE = "/.storybook/static-assets/icons-generated/_icon-sprite.svg";

package/config/icons.d.ts

@@ -75,14 +75,22 @@ export declare const ICONS: {
         readonly w: 384;
         readonly h: 512;
     };
-    readonly videoFile: {
-        readonly w: 384;
+    readonly "triangle-exclamation": {
+        readonly w: 512;
         readonly h: 512;
     };
     readonly user: {
         readonly w: 448;
         readonly h: 512;
     };
+    readonly videoFile: {
+        readonly w: 384;
+        readonly h: 512;
+    };
+    readonly xmark: {
+        readonly w: 384;
+        readonly h: 512;
+    };
     readonly xmarkLarge: {
         readonly w: 448;
         readonly h: 512;
@@ -110,8 +118,10 @@ declare module "@uxf/ui/icon/theme" {
         "ellipsis-vertical": true;
         "file": true;
         "imageFile": true;
-        "videoFile": true;
+        "triangle-exclamation": true;
         "user": true;
+        "videoFile": true;
+        "xmark": true;
         "xmarkLarge": true;
     }
 }

package/config/icons.js

@@ -22,7 +22,9 @@ exports.ICONS = {
     "ellipsis-vertical": { w: 128, h: 512 },
     "file": { w: 384, h: 512 },
     "imageFile": { w: 384, h: 512 },
-    "videoFile": { w: 384, h: 512 },
+    "triangle-exclamation": { w: 512, h: 512 },
     "user": { w: 448, h: 512 },
+    "videoFile": { w: 384, h: 512 },
+    "xmark": { w: 384, h: 512 },
     "xmarkLarge": { w: 448, h: 512 },
 };

package/css/alert-bubble.css

@@ -0,0 +1,100 @@
+.uxf-alert-bubble {
+    --bg-color: unset;
+    --icon-color: unset;
+    --icon-size: unset;
+    --size: unset;
+
+    align-items: center;
+    background-color: var(--bg-color);
+    border-radius: 999px;
+    display: flex;
+    flex-shrink: 0;
+    height: var(--size);
+    justify-content: center;
+    width: var(--size);
+
+    &__icon {
+        color: var(--icon-color);
+        flex-shrink: 0;
+        height: var(--icon-size);
+        width: var(--icon-size);
+    }
+
+    &--color-default {
+        :root .light & {
+            --bg-color: theme("backgroundColor.primary.100");
+            --icon-color: theme("colors.primary.600");
+        }
+
+        :root .dark & {
+            --bg-color: theme("backgroundColor.primary.600");
+            --icon-color: theme("colors.primary.100");
+        }
+    }
+
+    &--color-warning {
+        :root .light & {
+            --bg-color: theme("backgroundColor.warning.100");
+            --icon-color: theme("colors.warning.600");
+        }
+
+        :root .dark & {
+            --bg-color: theme("backgroundColor.warning.600");
+            --icon-color: theme("colors.warning.100");
+        }
+    }
+
+    &--color-success {
+        :root .light & {
+            --bg-color: theme("backgroundColor.success.100");
+            --icon-color: theme("colors.success.600");
+        }
+
+        :root .dark & {
+            --bg-color: theme("backgroundColor.success.600");
+            --icon-color: theme("colors.success.100");
+        }
+    }
+
+    &--color-error {
+        :root .light & {
+            --bg-color: theme("backgroundColor.error.100");
+            --icon-color: theme("colors.error.600");
+        }
+
+        :root .dark & {
+            --bg-color: theme("backgroundColor.error.600");
+            --icon-color: theme("colors.error.100");
+        }
+    }
+
+    &--size-xs {
+        --size: theme("alertBubbleSize.xs");
+        --icon-size: 20px;
+    }
+
+    &--size-sm {
+        --size: theme("alertBubbleSize.sm");
+        --icon-size: 24px;
+    }
+
+    &--size-default {
+        --size: theme("alertBubbleSize.default");
+        --icon-size: 24px;
+    }
+
+    &--size-lg {
+        --size: theme("alertBubbleSize.lg");
+        --icon-size: 30px;
+    }
+
+    &--size-xl {
+        --size: theme("alertBubbleSize.xl");
+        --icon-size: 30px;
+    }
+
+    &--size-2xl {
+        --size: theme("alertBubbleSize.2xl");
+        --icon-size: 40px;
+    }
+}

package/css/avatar-file-input.css

@@ -1,82 +1,116 @@
 .uxf-avatar-file-input {
+    align-items: center;
+    display: flex;
+    gap: theme("spacing.4");
+
     &__input {
-        @apply hidden;
+        display: none;
+    }
+
+    &--variant-default {
+        .uxf-avatar-file-input__label {
+            border-radius: theme("borderRadius.full");
+        }
     }
 
     &__label {
-        @apply cursor-pointer h-20 w-20 rounded-full flex items-center justify-center border-2 border-dashed
-            transition-all duration-75 ease-in-out;
+        @apply transition-all duration-75;
+
+        align-items: center;
+        border-style: dashed;
+        border-width: theme("borderWidth.2");
+        cursor: pointer;
+        display: flex;
+        height: theme("height.20");
+        justify-content: center;
+        width: theme("width.20");
 
         :root .light & {
-            @apply border-lightLow;
+            border-color: theme("colors.lightBorder");
         }
 
         :root .dark & {
-            @apply border-lightBorder;
+            border-color: theme("colors.darkBorder");
         }
 
-        &__icon {
+        &-wrapper {
+            align-items: center;
+            display: flex;
+            gap: theme("spacing.4");
+        }
+
+        &-icon {
             :root .light & {
-                @apply text-lightLow;
+                color: theme("colors.lightLow");
             }
 
             :root .dark & {
-                @apply text-lightBorder;
+                color: theme("colors.lightBorder");
             }
 
             &.is-invalid {
                 :root .light & {
-                    @apply text-error;
+                    color: theme("colors.error.DEFAULT");
                 }
 
                 :root .dark & {
-                    @apply text-error;
+                    color: theme("colors.error.DEFAULT");
                 }
             }
         }
 
         &:hover {
-            @apply border-4;
+            border-width: theme("borderWidth.4");
         }
 
         &.is-invalid {
             :root .light & {
-                @apply border-error;
+                border-color: theme("colors.error.DEFAULT");
             }
 
             :root .dark & {
-                @apply border-error;
+                border-color: theme("colors.error.DEFAULT");
             }
         }
 
         &.is-disabled {
-            @apply cursor-not-allowed bg-lightLow/20;
+            background-color: theme("colors.lightLow/.20");
+            cursor: not-allowed;
 
             &:hover {
-                @apply border-2;
+                border-width: theme("borderWidth.2");
             }
         }
     }
 
     &__label-text {
-        @apply text-sm text-center;
+        @apply text-sm shadow-sm;
+
+        border: theme("borderWidth.DEFAULT") solid theme("colors.gray.300");
+        padding: theme("spacing[1.5]") theme("spacing.3");
+        text-align: center;
 
         :root .light & {
-            @apply text-lightLow;
+            color: theme("colors.lightHigh");
         }
 
         :root .dark & {
-            @apply text-lightBorder;
+            color: theme("colors.lightBorder");
         }
 
         &.is-invalid {
             :root .light & {
-                @apply text-error;
+                color: theme("colors.error.DEFAULT");
             }
 
             :root .dark & {
-                @apply text-error;
+                color: theme("colors.error.DEFAULT");
             }
         }
     }
+
+    &__image {
+        height: theme("height.20");
+        width: theme("width.20");
+    }
 }

package/css/avatar.css

@@ -1,15 +1,15 @@
 .uxf-avatar {
-    @apply relative inline-flex items-center justify-center h-10 w-10 rounded-full;
+    @apply relative inline-flex h-10 w-10 items-center justify-center rounded-full;
 
     &__image {
         @apply absolute left-0 top-0 block h-full w-full rounded-inherit object-cover;
     }
 
     :root .light & {
-        @apply text-gray-700 bg-gray-200;
+        @apply bg-gray-200 text-gray-700;
     }
 
     :root .dark & {
-        @apply text-gray-200 bg-gray-800;
+        @apply bg-gray-800 text-gray-200;
     }
 }

package/css/badge.css

@@ -2,22 +2,22 @@
     @apply inline-flex items-center justify-center font-bold;
 
     &--size-small {
-        @apply h-6 min-w-[24px] text-sm rounded-[12px] px-1.5;
+        @apply h-6 min-w-[24px] rounded-[12px] px-1.5 text-sm;
     }
 
     &--size-medium {
-        @apply h-8 min-w-[32px] text-base rounded-[16px] px-2;
+        @apply h-8 min-w-[32px] rounded-[16px] px-2 text-base;
     }
 
     &--size-large {
-        @apply h-10 min-w-[40px] text-lg rounded-[20px] px-2;
+        @apply h-10 min-w-[40px] rounded-[20px] px-2 text-lg;
     }
 
     :root .light & {
-        @apply text-white bg-primary;
+        @apply bg-primary text-white;
     }
 
     :root .dark & {
-        @apply text-gray-900 bg-white;
+        @apply bg-white text-gray-900;
     }
 }

package/css/button-group.css

@@ -1,6 +1,6 @@
 .uxf-button-group {
-    display: flex;
     align-items: center;
+    display: flex;
 
     .uxf-button {
         &:focus {

package/css/button-list.css

@@ -6,7 +6,7 @@
     }
 
     &__menu-items {
-        @apply absolute right-0 mt-2 w-40 divide-y rounded-md shadow-lg ring-1 focus:outline-none z-dropdown;
+        @apply absolute right-0 z-dropdown mt-2 w-40 divide-y rounded-md shadow-lg ring-1 focus:outline-none;
 
         :root .light & {
             @apply divide-gray-100 bg-white ring-black/5;
@@ -26,7 +26,7 @@
     }
 
     &__menu-button {
-        @apply flex px-3 py-2 space-x-3 text-sm is-hoverable:hover:cursor-pointer;
+        @apply flex space-x-3 px-3 py-2 text-sm is-hoverable:hover:cursor-pointer;
 
         :root .light & {
             @apply text-black hover:text-gray-800;

package/css/button.css

@@ -17,7 +17,7 @@
     }
 
     &--full-width {
-        @apply w-full flex flex-row justify-center;
+        @apply flex w-full flex-row justify-center;
     }
 
     &.is-disabled {
@@ -54,9 +54,9 @@
     }
 
     &--size-xs {
-        height: theme("inputSize.xs");
+        @apply rounded px-2.5 text-xs;
 
-        @apply px-2.5 text-xs rounded;
+        height: theme("inputSize.xs");
 
         &.is-loading::after {
             height: 14px;
@@ -64,9 +64,9 @@
         }
 
         &.uxf-button--icon-button {
-            width: theme("inputSize.xs");
-
             @apply p-0;
+
+            width: theme("inputSize.xs");
         }
 
         .uxf-icon {
@@ -75,19 +75,19 @@
     }
 
     &--size-sm {
-        height: theme("inputSize.sm");
-
         @apply px-3 text-sm leading-4;
 
+        height: theme("inputSize.sm");
+
         &.is-loading::after {
             height: 16px;
             width: 16px;
         }
 
         &.uxf-button--icon-button {
-            width: theme("inputSize.sm");
-
             @apply p-0;
+
+            width: theme("inputSize.sm");
         }
 
         .uxf-icon {
@@ -96,10 +96,10 @@
     }
 
     &--size-default {
-        height: theme("inputSize.default");
-
         @apply px-4 text-sm;
 
+        height: theme("inputSize.default");
+
         &.uxf-button--icon-button {
             width: theme("inputSize.default");
 
@@ -108,10 +108,10 @@
     }
 
     &--size-lg {
-        height: theme("inputSize.lg");
-
         @apply px-4 text-base;
 
+        height: theme("inputSize.lg");
+
         &.uxf-button--icon-button {
             width: theme("inputSize.lg");
 
@@ -120,14 +120,14 @@
     }
 
     &--size-xl {
-        height: theme("inputSize.xl");
-
         @apply px-6 text-base;
 
-        &.uxf-button--icon-button {
-            width: theme("inputSize.xl");
+        height: theme("inputSize.xl");
 
+        &.uxf-button--icon-button {
             @apply p-0;
+
+            width: theme("inputSize.xl");
         }
     }
 
@@ -146,11 +146,11 @@
             @apply focus-visible:ring-primary;
 
             :root .light & {
-                @apply text-primary border-primary is-hoverable:border-primary-700 is-hoverable:text-primary-700;
+                @apply border-primary text-primary is-hoverable:border-primary-700 is-hoverable:text-primary-700;
             }
 
             :root .dark & {
-                @apply text-primary border-primary is-hoverable:border-primary-300 is-hoverable:text-primary-300;
+                @apply border-primary text-primary is-hoverable:border-primary-300 is-hoverable:text-primary-300;
             }
         }
 
@@ -158,11 +158,23 @@
             @apply focus-visible:ring-success;
 
             :root .light & {
-                @apply text-success border-success is-hoverable:border-success-700 is-hoverable:text-success-700;
+                @apply border-success text-success is-hoverable:border-success-700 is-hoverable:text-success-700;
+            }
+
+            :root .dark & {
+                @apply border-success text-success is-hoverable:border-success-300 is-hoverable:text-success-300;
+            }
+        }
+
+        &.uxf-button--color-warning {
+            @apply focus-visible:ring-warning;
+
+            :root .light & {
+                @apply border-warning text-warning is-hoverable:border-warning-700 is-hoverable:text-warning-700;
             }
 
             :root .dark & {
-                @apply text-success border-success is-hoverable:border-success-300 is-hoverable:text-success-300;
+                @apply border-warning text-warning is-hoverable:border-warning-300 is-hoverable:text-warning-300;
             }
         }
 
@@ -170,11 +182,11 @@
             @apply focus-visible:ring-error;
 
             :root .light & {
-                @apply text-error border-error is-hoverable:border-error-700 is-hoverable:text-error-700;
+                @apply border-error text-error is-hoverable:border-error-700 is-hoverable:text-error-700;
             }
 
             :root .dark & {
-                @apply text-error border-error is-hoverable:border-error-300 is-hoverable:text-error-300;
+                @apply border-error text-error is-hoverable:border-error-300 is-hoverable:text-error-300;
             }
         }
 
@@ -261,17 +273,39 @@
                 }
             }
         }
+
+        &.uxf-button--color-warning {
+            @apply focus-visible:ring-warning;
+
+            :root .light & {
+                @apply bg-warning is-hoverable:bg-warning-700;
+            }
+
+            :root .dark & {
+                @apply bg-warning is-hoverable:bg-warning-400;
+            }
+
+            &.is-disabled {
+                :root .light & {
+                    @apply bg-gray-300 text-lightLow;
+                }
+
+                :root .dark & {
+                    @apply bg-gray-600 text-gray-400;
+                }
+            }
+        }
     }
 
     &--variant-white {
         @apply border focus-visible:ring-primary;
 
         :root .light & {
-            @apply border-lightBorder bg-white is-hoverable:bg-gray-100 text-lightMedium;
+            @apply border-lightBorder bg-white text-lightMedium is-hoverable:bg-gray-100;
         }
 
         :root .dark & {
-            @apply border-darkBorder text-darkMedium bg-lightHigh is-hoverable:bg-gray-800 is-hoverable:text-darkHigh;
+            @apply border-darkBorder bg-lightHigh text-darkMedium is-hoverable:bg-gray-800 is-hoverable:text-darkHigh;
         }
 
         &.is-disabled {
@@ -280,7 +314,7 @@
             }
 
             :root .dark & {
-                @apply text-darkLow border-darkBorder;
+                @apply border-darkBorder text-darkLow;
             }
         }
     }
@@ -322,6 +356,18 @@
             }
         }
 
+        &.uxf-button--color-warning {
+            @apply text-warning;
+
+            :root .light & {
+                @apply is-hoverable:text-warning-700;
+            }
+
+            :root .dark & {
+                @apply is-hoverable:text-warning-300;
+            }
+        }
+
         &.is-disabled {
             :root .light & {
                 @apply text-lightLow;