@uxf/ui 11.25.1 → 11.27.0

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: "white" }, (_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: "error", disabled: props.isDisabled, onClick: onRemoveFile, size: "sm", variant: "white" }, (_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", 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"))))))));
 });
 exports.AvatarFileInput.displayName = "UxfUiAvatarFileInput";

package/button/README.md

@@ -1,5 +1,13 @@
 # Button
 
+[Figma](https://www.figma.com/design/InhbHrNUhDGbBvRDRonXsD/Vent-UI?node-id=4497-14244&t=7WrAFKP6MF42zYC6-4)
+
+## Css dependencies
+
+```css
+@import url("@uxf/ui/css/colors.css");
+```
+
 ### Props configuration
 
 ```tsx
@@ -8,12 +16,11 @@
 declare module "@uxf/ui/icon/theme" {
     export interface ButtonVariants {
         default: true;
-        outlined: true;
+        secondary: true;
         text: true;
     }
 
     export interface ButtonSizes {
-        xs: true;
         sm: true;
         default: true;
         lg: true;
@@ -22,47 +29,11 @@ declare module "@uxf/ui/icon/theme" {
 
     export interface ButtonColors {
         default: true;
-        white: true;
-        success: true;
+        positive: true;
+        negative: true;
         warning: true;
-        error: true;
-    }
-}
-```
-
-## Css
-
-```css
-// button.css
-
-.uxf-button {
-
-    &__text {
-
-    }
-
-    &.is-disabled {
-
-    }
-
-    &.is-loading {
-
-    }
-
-    &--full-width {
-
-    }
-
-    &--icon-button {
-
-    }
-
-    &--size-{{ size }} {
-
-    }
-
-    &--variant-{{ variant }} {
-
+        info: true;
+        inverted: true;
     }
 }
 ```

package/button/button.d.ts

@@ -5,12 +5,18 @@ import { NextLink } from "./next-link";
 export type ButtonVariant = keyof ButtonVariants;
 export type ButtonSize = keyof ButtonSizes;
 export type ButtonColor = keyof ButtonColors;
-export interface ButtonProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "type">, UseAnchorProps {
+export interface ButtonProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "type">, Omit<UseAnchorProps, "disabled" | "loading"> {
     as?: NextLink | "a";
     color?: ButtonColor;
     isFullWidth?: boolean;
     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

@@ -31,9 +31,13 @@ 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 Component = as;
+    const isDisabled = props.isDisabled || props.disabled;
+    const isLoading = props.isLoading || props.loading;
     const anchorProps = (0, use_anchor_props_1.useAnchorProps)({
         ...restProps,
-        className: (0, cx_1.cx)("uxf-button", `uxf-button--color-${color !== null && color !== void 0 ? color : "default"}`, `uxf-button--size-${size !== null && size !== void 0 ? size : "default"}`, `uxf-button--variant-${variant !== null && variant !== void 0 ? variant : "default"}`, isIconButton && "uxf-button--icon-button", isFullWidth && "uxf-button--full-width", className),
+        disabled: isDisabled,
+        loading: isLoading,
+        className: (0, cx_1.cx)("uxf-button", `uxf-button--color-${color !== null && color !== void 0 ? color : "default"}`, `uxf-button--size-${size !== null && size !== void 0 ? size : "default"}`, `uxf-button--variant-${variant !== null && variant !== void 0 ? variant : "default"}`, isDisabled && "uxf-button--is-disabled", isLoading && "uxf-button--is-loading", isIconButton && "uxf-button--icon-button", isFullWidth && "uxf-button--full-width", className),
     });
     return (react_1.default.createElement(Component, { ref: ref, ...anchorProps }, typeof props.children === "string" ? (react_1.default.createElement("span", { className: "uxf-button__text" }, props.children)) : (props.children)));
 });

package/button/button.stories.d.ts

@@ -1,2 +1,3 @@
 import React from "react";
+export declare function Basic(): React.JSX.Element;
 export declare function Default(): React.JSX.Element;

package/button/button.stories.js

@@ -23,11 +23,36 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Default = void 0;
+exports.Default = exports.Basic = void 0;
 const button_1 = require("@uxf/ui/button");
 const icon_1 = require("@uxf/ui/icon");
 const storybook_config_1 = require("@uxf/ui/utils/storybook-config");
 const react_1 = __importStar(require("react"));
+function Basic() {
+    const config = (0, storybook_config_1.useStorybookConfig)("Button");
+    // eslint-disable-next-line no-console
+    const onClick = console.log;
+    const gridColumnsCount = config.variants.length * config.sizes.length + 1;
+    const gridTemplateColumns = `repeat(${gridColumnsCount}, 100px)`;
+    return (react_1.default.createElement("div", { className: "p-4" },
+        react_1.default.createElement("div", { className: "grid gap-3 p-4", style: { gridTemplateColumns } },
+            react_1.default.createElement("div", null),
+            config.variants.map((variant) => (react_1.default.createElement("div", { key: variant, style: { gridColumn: "span 4" }, className: "border-b border-blue-500 pb-2 text-center text-xs text-gray-400" },
+                "variant=",
+                variant))),
+            react_1.default.createElement("div", null),
+            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 },
+            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" },
+                    react_1.default.createElement(button_1.Button, { color: color, onClick: onClick, size: size, variant: variant }, "Button")))))))))))));
+}
+exports.Basic = Basic;
 function Default() {
     const config = (0, storybook_config_1.useStorybookConfig)("Button");
     // eslint-disable-next-line no-console

package/button/theme.d.ts

@@ -1,12 +1,10 @@
 export interface ButtonVariants {
     default: true;
-    white: true;
-    outlined: true;
+    secondary: true;
     text: true;
 }
 export type ButtonVariant = keyof ButtonVariants;
 export interface ButtonSizes {
-    xs: true;
     sm: true;
     default: true;
     lg: true;
@@ -15,8 +13,10 @@ export interface ButtonSizes {
 export type ButtonSize = keyof ButtonSizes;
 export interface ButtonColors {
     default: true;
-    success: true;
-    error: true;
+    positive: true;
+    negative: true;
     warning: true;
+    info: true;
+    inverted: true;
 }
 export type ButtonColor = keyof ButtonColors;

package/button-group/button-group.stories.js

@@ -23,16 +23,16 @@ const Default = () => {
             react_1.default.createElement(button_1.Button, { isIconButton: true, onClick: onClick },
                 react_1.default.createElement(icon_1.Icon, { name: "check", size: 16 }))),
         react_1.default.createElement(index_1.ButtonGroup, null,
-            react_1.default.createElement(button_1.Button, { size: "sm", variant: "outlined", onClick: onClick }, "First"),
-            react_1.default.createElement(button_1.Button, { size: "sm", variant: "outlined", onClick: onClick }, "Second"),
-            react_1.default.createElement(button_1.Button, { size: "sm", variant: "outlined", onClick: onClick }, "Third")),
+            react_1.default.createElement(button_1.Button, { size: "sm", variant: "secondary", onClick: onClick }, "First"),
+            react_1.default.createElement(button_1.Button, { size: "sm", variant: "secondary", onClick: onClick }, "Second"),
+            react_1.default.createElement(button_1.Button, { size: "sm", variant: "secondary", onClick: onClick }, "Third")),
         react_1.default.createElement(index_1.ButtonGroup, null,
             react_1.default.createElement(tooltip_1.Tooltip, { content: "Tooltip" },
-                react_1.default.createElement(button_1.Button, { size: "sm", variant: "outlined", onClick: onClick }, "Button with tooltip")),
+                react_1.default.createElement(button_1.Button, { size: "sm", variant: "secondary", onClick: onClick }, "Button with tooltip")),
             react_1.default.createElement(tooltip_1.Tooltip, { content: "Tooltip" },
-                react_1.default.createElement(button_1.Button, { size: "sm", variant: "outlined", onClick: onClick }, "Second")),
+                react_1.default.createElement(button_1.Button, { size: "sm", variant: "secondary", onClick: onClick }, "Second")),
             react_1.default.createElement(tooltip_1.Tooltip, { content: "Tooltip" },
-                react_1.default.createElement(button_1.Button, { size: "sm", variant: "outlined", onClick: onClick }, "Third")))));
+                react_1.default.createElement(button_1.Button, { size: "sm", variant: "secondary", onClick: onClick }, "Third")))));
     return (react_1.default.createElement("div", { className: "flex flex-col lg:flex-row" },
         react_1.default.createElement("div", { className: "space-y-2 p-20 lg:w-1/2" }, component)));
 };

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

@@ -12,7 +12,7 @@ exports.default = {
 };
 const Default = () => {
     const component = (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(index_1.ButtonList, { menuMaxHeight: 350, visibleButtonsCount: 0, variant: "outlined", buttons: [
+        react_1.default.createElement(index_1.ButtonList, { menuMaxHeight: 350, visibleButtonsCount: 0, variant: "secondary", buttons: [
                 { label: "First item" },
                 { label: "Second item" },
                 { label: "Third item" },
@@ -25,7 +25,7 @@ const Default = () => {
                 { label: "Tenth item" },
                 { label: "Eleventh item" },
             ] }),
-        react_1.default.createElement(index_1.ButtonList, { visibleButtonsCount: 4, variant: "white", buttons: [
+        react_1.default.createElement(index_1.ButtonList, { visibleButtonsCount: 4, variant: "secondary", buttons: [
                 { label: "First item" },
                 { label: "Second item" },
                 { label: "Third item" },
@@ -34,27 +34,27 @@ const Default = () => {
         react_1.default.createElement(index_1.ButtonList, { visibleButtonsCount: 2, buttons: [
                 // eslint-disable-next-line no-console
                 { label: "First item", onClick: console.log },
-                { label: "Second item", color: "success" },
+                { label: "Second item", color: "positive" },
                 { label: "Third item" },
                 // eslint-disable-next-line no-console
                 { label: "Fourth item", onClick: console.log },
             ] }),
-        react_1.default.createElement(index_1.ButtonList, { visibleButtonsCount: 1, size: "xs", color: "error", variant: "outlined", buttons: [
+        react_1.default.createElement(index_1.ButtonList, { visibleButtonsCount: 1, size: "sm", color: "negative", variant: "secondary", buttons: [
                 // eslint-disable-next-line no-console
                 { icon: "check", label: "First item", onClick: console.log },
-                { icon: "user", label: "Second item", color: "success" },
+                { icon: "user", label: "Second item", color: "positive" },
                 { icon: "cloud", label: "Third item" },
                 // eslint-disable-next-line no-console
                 { icon: "xmarkLarge", label: "Fourth item", onClick: console.log },
             ], openButton: {} }),
-        react_1.default.createElement(index_1.ButtonList, { visibleButtonsCount: 3, size: "xs", color: "success", buttons: [
+        react_1.default.createElement(index_1.ButtonList, { visibleButtonsCount: 3, size: "sm", color: "positive", buttons: [
                 // eslint-disable-next-line no-console
-                { icon: "check", label: "First item", onClick: console.log, color: "error" },
-                { icon: "user", label: "Second item", color: "success", size: "default" },
+                { icon: "check", label: "First item", onClick: console.log, color: "negative" },
+                { icon: "user", label: "Second item", color: "positive", size: "default" },
                 { icon: "cloud", label: "Third item" },
                 // eslint-disable-next-line no-console
                 { icon: "xmarkLarge", label: "Fourth item", onClick: console.log },
-            ], openButton: { variant: "outlined", color: "default" } })));
+            ], openButton: { variant: "secondary", color: "default" } })));
     return (react_1.default.createElement("div", { className: "flex flex-col lg:flex-row" },
         react_1.default.createElement("div", { className: "space-y-2 p-20 lg:w-1/2" }, component)));
 };

package/calendar/calendar-navigation.js

@@ -9,10 +9,10 @@ const button_1 = require("../button");
 const icon_1 = require("../icon");
 const CalendarNavigation = (props) => {
     return (react_1.default.createElement("div", { className: "uxf-calendar-navigation" },
-        react_1.default.createElement(button_1.Button, { isIconButton: true, size: "sm", variant: "white", ...props.prevButtonProps },
+        react_1.default.createElement(button_1.Button, { isIconButton: true, size: "sm", variant: "secondary", ...props.prevButtonProps },
             react_1.default.createElement(icon_1.Icon, { name: "arrow-left", size: 16 })),
         props.selectButtonProps.onClick ? (react_1.default.createElement(button_1.Button, { variant: "text", size: "sm", color: "default", ...props.selectButtonProps })) : (react_1.default.createElement("p", { className: "uxf-calendar-navigation__title" }, props.selectButtonProps.children)),
-        react_1.default.createElement(button_1.Button, { isIconButton: true, size: "sm", variant: "white", ...props.nextButtonProps },
+        react_1.default.createElement(button_1.Button, { isIconButton: true, size: "sm", variant: "secondary", ...props.nextButtonProps },
             react_1.default.createElement(icon_1.Icon, { name: "arrow-right", size: 16 }))));
 };
 exports.CalendarNavigation = CalendarNavigation;

package/components.d.ts

@@ -6,6 +6,10 @@ import * as buttonStories from "./button/button.stories";
 import * as buttonGroupStories from "./button-group/button-group.stories";
 import * as buttonListStories from "./button-list/button-list.stories";
 import * as calendarStories from "./calendar/calendar.stories";
+import * as checkboxStories from "./checkbox/checkbox.stories";
+import * as checkboxButtonStories from "./checkbox-button/checkbox-button.stories";
+import * as checkboxInputStories from "./checkbox-input/checkbox-input.stories";
+import * as chipStories from "./chip/chip.stories";
 import * as colorRadioStories from "./color-radio/color-radio.stories";
 import * as colorRadioGroupStories from "./color-radio-group/color-radio-group.stories";
 import * as comboboxStories from "./combobox/combobox.stories";
@@ -22,10 +26,6 @@ import * as errorMessageStories from "./error-message/error-message.stories";
 import * as fileInputStories from "./file-input/file-input.stories";
 import * as flashMessagesStories from "./flash-messages/flash-messages.stories";
 import * as formComponentStories from "./form-component/form-component.stories";
-import * as checkboxStories from "./checkbox/checkbox.stories";
-import * as checkboxButtonStories from "./checkbox-button/checkbox-button.stories";
-import * as checkboxInputStories from "./checkbox-input/checkbox-input.stories";
-import * as chipStories from "./chip/chip.stories";
 import * as iconStories from "./icon/icon.stories";
 import * as imageGalleryStories from "./image-gallery/image-gallery.stories";
 import * as inputStories from "./input/input.stories";
@@ -86,6 +86,22 @@ export declare const components: {
         readonly title: "Calendar";
         readonly stories: typeof calendarStories;
     };
+    readonly checkbox: {
+        readonly title: "Checkbox";
+        readonly stories: typeof checkboxStories;
+    };
+    readonly "checkbox-button": {
+        readonly title: "CheckboxButton";
+        readonly stories: typeof checkboxButtonStories;
+    };
+    readonly "checkbox-input": {
+        readonly title: "CheckboxInput";
+        readonly stories: typeof checkboxInputStories;
+    };
+    readonly chip: {
+        readonly title: "Chip";
+        readonly stories: typeof chipStories;
+    };
     readonly "color-radio": {
         readonly title: "ColorRadio";
         readonly stories: typeof colorRadioStories;
@@ -150,22 +166,6 @@ export declare const components: {
         readonly title: "FormComponent";
         readonly stories: typeof formComponentStories;
     };
-    readonly checkbox: {
-        readonly title: "Checkbox";
-        readonly stories: typeof checkboxStories;
-    };
-    readonly "checkbox-button": {
-        readonly title: "CheckboxButton";
-        readonly stories: typeof checkboxButtonStories;
-    };
-    readonly "checkbox-input": {
-        readonly title: "CheckboxInput";
-        readonly stories: typeof checkboxInputStories;
-    };
-    readonly chip: {
-        readonly title: "Chip";
-        readonly stories: typeof chipStories;
-    };
     readonly icon: {
         readonly title: "Icon";
         readonly stories: typeof iconStories;

package/components.js

@@ -33,6 +33,10 @@ const buttonStories = __importStar(require("./button/button.stories"));
 const buttonGroupStories = __importStar(require("./button-group/button-group.stories"));
 const buttonListStories = __importStar(require("./button-list/button-list.stories"));
 const calendarStories = __importStar(require("./calendar/calendar.stories"));
+const checkboxStories = __importStar(require("./checkbox/checkbox.stories"));
+const checkboxButtonStories = __importStar(require("./checkbox-button/checkbox-button.stories"));
+const checkboxInputStories = __importStar(require("./checkbox-input/checkbox-input.stories"));
+const chipStories = __importStar(require("./chip/chip.stories"));
 const colorRadioStories = __importStar(require("./color-radio/color-radio.stories"));
 const colorRadioGroupStories = __importStar(require("./color-radio-group/color-radio-group.stories"));
 const comboboxStories = __importStar(require("./combobox/combobox.stories"));
@@ -49,10 +53,6 @@ const errorMessageStories = __importStar(require("./error-message/error-message.
 const fileInputStories = __importStar(require("./file-input/file-input.stories"));
 const flashMessagesStories = __importStar(require("./flash-messages/flash-messages.stories"));
 const formComponentStories = __importStar(require("./form-component/form-component.stories"));
-const checkboxStories = __importStar(require("./checkbox/checkbox.stories"));
-const checkboxButtonStories = __importStar(require("./checkbox-button/checkbox-button.stories"));
-const checkboxInputStories = __importStar(require("./checkbox-input/checkbox-input.stories"));
-const chipStories = __importStar(require("./chip/chip.stories"));
 const iconStories = __importStar(require("./icon/icon.stories"));
 const imageGalleryStories = __importStar(require("./image-gallery/image-gallery.stories"));
 const inputStories = __importStar(require("./input/input.stories"));
@@ -113,6 +113,22 @@ exports.components = {
         title: "Calendar",
         stories: calendarStories
     },
+    "checkbox": {
+        title: "Checkbox",
+        stories: checkboxStories
+    },
+    "checkbox-button": {
+        title: "CheckboxButton",
+        stories: checkboxButtonStories
+    },
+    "checkbox-input": {
+        title: "CheckboxInput",
+        stories: checkboxInputStories
+    },
+    "chip": {
+        title: "Chip",
+        stories: chipStories
+    },
     "color-radio": {
         title: "ColorRadio",
         stories: colorRadioStories
@@ -177,22 +193,6 @@ exports.components = {
         title: "FormComponent",
         stories: formComponentStories
     },
-    "checkbox": {
-        title: "Checkbox",
-        stories: checkboxStories
-    },
-    "checkbox-button": {
-        title: "CheckboxButton",
-        stories: checkboxButtonStories
-    },
-    "checkbox-input": {
-        title: "CheckboxInput",
-        stories: checkboxInputStories
-    },
-    "chip": {
-        title: "Chip",
-        stories: chipStories
-    },
     "icon": {
         title: "Icon",
         stories: iconStories

package/css/button.css

@@ -1,3 +1,16 @@
+:root {
+    /** button variables */
+    --uxf-button-height: theme("inputSize.default");
+    --uxf-button-border-radius: theme("borderRadius.md");
+    --uxf-button-font-size: theme("fontSize.sm");
+    --uxf-button-icon-size: theme("spacing.6");
+    --uxf-button-loading-size: theme("spacing.6");
+    --uxf-button-px: theme("spacing.4");
+    --uxf-button-border-color: initial;
+    --uxf-button-background-color: initial;
+    --uxf-button-text-color: initial;
+}
+
 @keyframes spinner {
     to {
         transform: rotate(360deg);
@@ -5,11 +18,35 @@
 }
 
 .uxf-button {
-    @apply inline-flex items-center justify-center rounded-md font-medium shadow-sm transition-colors
-        focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2;
+    align-items: center;
+    background-color: var(--uxf-button-background-color);
+    border-color: var(--uxf-button-border-color);
+    border-radius: var(--uxf-button-border-radius);
+    color: var(--uxf-button-text-color);
+    display: inline-flex;
+    font-size: var(--uxf-button-font-size);
+    font-weight: theme("fontWeight.medium");
+    height: var(--uxf-button-height);
+    justify-content: center;
+    padding: 0 var(--uxf-button-px);
+
+    @apply shadow-sm transition-colors;
+
+    &:focus-visible {
+        @apply ring-2 ring-offset-2;
+    }
+
+    &:focus {
+        outline: none;
+    }
+
+    &:hover {
+        background-color: var(--uxf-button-background-color-hover);
+    }
 
     .uxf-icon {
-        @apply h-6;
+        height: var(--uxf-button-icon-size);
+        width: var(--uxf-button-icon-size);
     }
 
     &__text {
@@ -17,21 +54,28 @@
     }
 
     &--full-width {
-        @apply flex w-full flex-row justify-center;
+        display: flex;
+        justify-content: center;
+        width: 100%;
     }
 
-    &.is-disabled {
-        @apply pointer-events-none;
+    &--icon-button {
+        padding: 0;
+        width: var(--uxf-button-height);
+    }
+
+    &--is-disabled {
+        pointer-events: none;
     }
 
     &.uxf-button--icon-button.is-loading {
         &::after {
-            @apply ml-0;
+            margin-left: 0;
         }
     }
 
-    &.is-loading {
-        @apply pointer-events-none;
+    &--is-loading {
+        pointer-events: none;
 
         &::after {
             animation: spinner 0.8s linear infinite;
@@ -39,9 +83,9 @@
             border-right: 2px solid transparent;
             border-top: 2px solid;
             content: "";
-            height: 20px;
+            height: var(--uxf-button-loading-size);
             margin-left: 8px;
-            width: 20px;
+            width: var(--uxf-button-loading-size);
         }
 
         &.uxf-button--icon-button::after {
@@ -49,265 +93,171 @@
         }
 
         .uxf-icon {
-            @apply hidden;
+            display: none;
         }
     }
 
-    &--size-xs {
-        @apply rounded px-2.5 text-xs;
-
-        height: theme("inputSize.xs");
-
-        &.is-loading::after {
-            height: 14px;
-            width: 14px;
-        }
-
-        &.uxf-button--icon-button {
-            @apply p-0;
-
-            width: theme("inputSize.xs");
-        }
-
-        .uxf-icon {
-            @apply h-4 w-4;
-        }
-    }
+    /* SIZES */
 
     &--size-sm {
-        @apply px-3 text-sm leading-none;
-
-        height: theme("inputSize.sm");
+        --uxf-button-px: theme("spacing.3");
+        --uxf-button-font-size: theme("fontSize.sm");
+        --uxf-button-height: theme("inputSize.sm");
+        --uxf-button-loading-size: theme("spacing.4");
+        --uxf-button-icon-size: theme("spacing.4");
 
-        &.is-loading::after {
-            height: 16px;
-            width: 16px;
-        }
-
-        &.uxf-button--icon-button {
-            @apply p-0;
-
-            width: theme("inputSize.sm");
-        }
-
-        .uxf-icon {
-            @apply h-4 w-4;
-        }
-    }
-
-    &--size-default {
-        @apply px-4 text-sm;
-
-        height: theme("inputSize.default");
-
-        &.uxf-button--icon-button {
-            width: theme("inputSize.default");
-
-            @apply p-0;
-        }
+        line-height: 1;
     }
 
     &--size-lg {
-        @apply px-4 text-base;
-
-        height: theme("inputSize.lg");
-
-        &.uxf-button--icon-button {
-            width: theme("inputSize.lg");
-
-            @apply p-0;
-        }
+        --uxf-button-font-size: theme("fontSize.base");
+        --uxf-button-height: theme("inputSize.lg");
     }
 
     &--size-xl {
-        @apply px-6 text-base;
-
-        height: theme("inputSize.xl");
-
-        &.uxf-button--icon-button {
-            @apply p-0;
-
-            width: theme("inputSize.xl");
-        }
+        --uxf-button-px: theme("spacing.6");
+        --uxf-button-font-size: theme("fontSize.base");
+        --uxf-button-height: theme("inputSize.xl");
     }
 
-    &--variant-outlined {
-        @apply border bg-white;
+    /* VARIANTS */
 
-        :root .dark & {
-            @apply bg-lightHigh;
-        }
+    &--variant-default {
+        --uxf-button-text-color: var(--uxf-color-base-text-inverted-high-emphasis);
 
         &.uxf-button--color-default {
-            @apply focus-visible:ring-primary border-primary text-primary is-hoverable:border-primary-700 is-hoverable:text-primary-700;
-
-            :root .dark & {
-                @apply border-primary text-primary is-hoverable:border-primary-300 is-hoverable:text-primary-300;
-            }
+            --uxf-button-background-color: var(--uxf-color-primary-surface-default);
+            --uxf-button-background-color-hover: var(--uxf-color-primary-surface-default-hover);
         }
 
-        &.uxf-button--color-success {
-            @apply focus-visible:ring-success border-success text-success is-hoverable:border-success-700 is-hoverable:text-success-700;
+        &.uxf-button--color-positive {
+            --uxf-button-background-color: var(--uxf-color-positive-surface-default);
+            --uxf-button-background-color-hover: var(--uxf-color-positive-surface-default-hover);
+        }
 
-            :root .dark & {
-                @apply border-success text-success is-hoverable:border-success-300 is-hoverable:text-success-300;
-            }
+        &.uxf-button--color-negative {
+            --uxf-button-background-color: var(--uxf-color-negative-surface-default);
+            --uxf-button-background-color-hover: var(--uxf-color-negative-surface-default-hover);
         }
 
         &.uxf-button--color-warning {
-            @apply focus-visible:ring-warning border-warning text-warning is-hoverable:border-warning-700 is-hoverable:text-warning-700;
+            --uxf-button-background-color: var(--uxf-color-warning-surface-default);
+            --uxf-button-background-color-hover: var(--uxf-color-warning-surface-default-hover);
+        }
 
-            :root .dark & {
-                @apply border-warning text-warning is-hoverable:border-warning-300 is-hoverable:text-warning-300;
-            }
+        &.uxf-button--color-info {
+            --uxf-button-background-color: var(--uxf-color-info-surface-default);
+            --uxf-button-background-color-hover: var(--uxf-color-info-surface-default-hover);
         }
 
-        &.uxf-button--color-error {
-            @apply focus-visible:ring-error  border-error text-error is-hoverable:border-error-700 is-hoverable:text-error-700;
+        &.uxf-button--color-inverted {
+            --uxf-button-background-color: var(--uxf-color-base-surface-main);
+            --uxf-button-background-color-hover: var(--uxf-color-base-surface-main-hover);
+            --uxf-button-text-color: var(--uxf-color-base-text-high-emphasis);
 
-            :root .dark & {
-                @apply border-error text-error is-hoverable:border-error-300 is-hoverable:text-error-300;
+            &.is-disabled {
+                --uxf-button-background-color: var(--uxf-color-base-surface-input-disabled);
+                --uxf-button-text-color: var(--uxf-color-base-text-disabled);
             }
         }
 
-        &.is-disabled {
-            @apply text-lightLow border-gray-300 bg-gray-300;
-
-            :root .dark & {
-                @apply text-darkLow border-gray-700 bg-gray-700;
-            }
+        &.uxf-button--is-disabled {
+            --uxf-button-text-color: theme("colors.white");
+            --uxf-button-background-color: var(--uxf-color-base-surface-disabled);
         }
     }
 
-    &--variant-default {
-        @apply text-white;
+    &--variant-secondary {
+        --uxf-button-background-color-hover: var(--uxf-color-base-surface-main-hover);
 
-        :root .dark & {
-            @apply focus-visible:ring-offset-gray-900;
-        }
+        border-style: solid;
+        border-width: 1px;
 
         &.uxf-button--color-default {
-            @apply focus-visible:ring-primary bg-primary is-hoverable:bg-primary-700;
-
-            :root .dark & {
-                @apply bg-primary is-hoverable:bg-primary-400;
-            }
-
-            &.is-disabled {
-                @apply text-lightLow bg-gray-300;
-
-                :root .dark & {
-                    @apply bg-gray-600 text-gray-400;
-                }
-            }
+            --uxf-button-border-color: var(--uxf-color-base-border-input);
+            --uxf-button-text-color: var(--uxf-color-base-text-high-emphasis);
         }
 
-        &.uxf-button--color-success {
-            @apply focus-visible:ring-success bg-success is-hoverable:bg-success-700;
-
-            :root .dark & {
-                @apply bg-success is-hoverable:bg-success-400;
-            }
-
-            &.is-disabled {
-                @apply text-lightLow bg-gray-300;
-
-                :root .dark & {
-                    @apply bg-gray-600 text-gray-400;
-                }
-            }
+        &.uxf-button--color-positive {
+            --uxf-button-border-color: var(--uxf-color-positive-border);
+            --uxf-button-text-color: var(--uxf-color-positive-text);
         }
 
-        &.uxf-button--color-error {
-            @apply focus-visible:ring-error bg-error is-hoverable:bg-error-700;
-
-            :root .dark & {
-                @apply bg-error is-hoverable:bg-error-400;
-            }
-
-            &.is-disabled {
-                @apply text-lightLow bg-gray-300;
-
-                :root .dark & {
-                    @apply bg-gray-600 text-gray-400;
-                }
-            }
+        &.uxf-button--color-negative {
+            --uxf-button-border-color: var(--uxf-color-negative-border);
+            --uxf-button-text-color: var(--uxf-color-negative-text);
         }
 
         &.uxf-button--color-warning {
-            @apply focus-visible:ring-warning bg-warning is-hoverable:bg-warning-700;
-
-            :root .dark & {
-                @apply bg-warning is-hoverable:bg-warning-400;
-            }
-
-            &.is-disabled {
-                @apply text-lightLow bg-gray-300;
-
-                :root .dark & {
-                    @apply bg-gray-600 text-gray-400;
-                }
-            }
+            --uxf-button-border-color: var(--uxf-color-warning-border);
+            --uxf-button-text-color: var(--uxf-color-warning-text);
         }
-    }
 
-    &--variant-white {
-        @apply focus-visible:ring-primary border-lightBorder text-lightMedium is-hoverable:bg-gray-100 border bg-white;
-
-        :root .dark & {
-            @apply border-darkBorder bg-lightHigh text-darkMedium is-hoverable:bg-gray-800 is-hoverable:text-darkHigh;
+        &.uxf-button--color-info {
+            --uxf-button-border-color: var(--uxf-color-info-border);
+            --uxf-button-text-color: var(--uxf-color-info-text);
         }
 
-        &.is-disabled {
-            @apply text-lightLow;
+        &.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--is-disabled {
+                --uxf-button-border-color: var(--uxf-color-base-surface-disabled);
+                --uxf-button-background-color: var(--uxf-color-base-surface-disabled);
+            }
 
             :root .dark & {
-                @apply border-darkBorder text-darkLow;
+                --uxf-button-background-color-hover: #d2d6db2f;
             }
         }
+
+        &.uxf-button--is-disabled {
+            --uxf-button-border-color: var(--uxf-color-base-border-input);
+            --uxf-button-text-color: var(--uxf-color-base-text-disabled);
+            --uxf-button-background-color: var(--uxf-color-base-surface-input-disabled);
+        }
     }
 
     &--variant-text {
-        @apply shadow-none;
+        --uxf-button-background-color-hover: var(--uxf-color-base-surface-main-hover);
 
-        &.uxf-button--color-default {
-            @apply text-lightMedium is-hoverable:text-lightHigh;
+        box-shadow: none;
 
-            :root .dark & {
-                @apply text-darkMedium is-hoverable:text-darkHigh;
-            }
+        &.uxf-button--color-default {
+            --uxf-button-text-color: var(--uxf-color-base-text-high-emphasis);
         }
 
-        &.uxf-button--color-success {
-            @apply text-success is-hoverable:text-success-700;
-
-            :root .dark & {
-                @apply is-hoverable:text-success-300;
-            }
+        &.uxf-button--color-positive {
+            --uxf-button-text-color: var(--uxf-color-positive-text);
         }
 
-        &.uxf-button--color-error {
-            @apply text-error is-hoverable:text-error-700;
-
-            :root .dark & {
-                @apply is-hoverable:text-error-300;
-            }
+        &.uxf-button--color-negative {
+            --uxf-button-text-color: var(--uxf-color-negative-text);
         }
 
         &.uxf-button--color-warning {
-            @apply text-warning is-hoverable:text-warning-700;
+            --uxf-button-text-color: var(--uxf-color-warning-text);
+        }
 
-            :root .dark & {
-                @apply is-hoverable:text-warning-300;
-            }
+        &.uxf-button--color-info {
+            --uxf-button-text-color: var(--uxf-color-info-text);
         }
 
-        &.is-disabled {
-            @apply text-lightLow;
+        /** 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;
 
             :root .dark & {
-                @apply text-darkLow;
+                --uxf-button-background-color-hover: #d2d6db2f;
+                --uxf-button-text-color: #d2d6db;
             }
         }
+
+        &.uxf-button--is-disabled {
+            --uxf-button-text-color: var(--uxf-color-base-text-disabled);
+        }
     }
 }

package/dropdown/dropdown.stories.js

@@ -21,7 +21,7 @@ const testDropdownItems = [
 function Default() {
     const storyDropdown = (react_2.default.createElement(react_2.default.Fragment, null,
         react_2.default.createElement(react_1.Menu, { as: "div", className: "relative" },
-            react_2.default.createElement(react_1.Menu.Button, { as: button_1.Button, color: "success", title: "Test" }, "Click me"),
+            react_2.default.createElement(react_1.Menu.Button, { as: button_1.Button, color: "positive", title: "Test" }, "Click me"),
             react_2.default.createElement(react_1.Menu.Items, { as: index_1.Dropdown.Items }, testDropdownItems.map((item) => (react_2.default.createElement(react_1.Menu.Item, { key: item.id }, ({ active }) => (react_2.default.createElement(index_1.Dropdown.Item, { className: `first-letter:uppercase ${active ? classes_1.CLASSES.IS_ACTIVE : ""}` }, item.title)))))))));
     return (react_2.default.createElement("div", { className: "flex" },
         react_2.default.createElement("div", { className: "grow gap-4 p-4" }, storyDropdown)));

package/message/message-content.js

@@ -9,9 +9,9 @@ const alert_bubble_1 = require("../alert-bubble");
 const button_1 = require("../button");
 const BUTTON_COLOR = {
     default: "default",
-    error: "error",
+    error: "negative",
     warning: "warning",
-    success: "success",
+    success: "positive",
 };
 const MessageContent = (props) => {
     var _a, _b, _c;
@@ -34,7 +34,7 @@ const MessageContent = (props) => {
                 react_1.default.createElement("p", { className: "uxf-message__description" }, props.description)),
             props.children),
         react_1.default.createElement("div", { className: "uxf-message__buttons-wrapper" },
-            react_1.default.createElement(button_1.Button, { className: "uxf-message__cancel-button", variant: "white", isFullWidth: isCentered, onClick: onCancelClick }, props.cancelLabel),
+            react_1.default.createElement(button_1.Button, { className: "uxf-message__cancel-button", variant: "secondary", isFullWidth: isCentered, onClick: onCancelClick }, props.cancelLabel),
             props.onAccept ? (react_1.default.createElement(button_1.Button, { className: "uxf-message__accept-button", color: BUTTON_COLOR[props.color], isFullWidth: isCentered, onClick: onAcceptClick }, (_c = props.acceptLabel) !== null && _c !== void 0 ? _c : "Ok")) : null)));
 };
 exports.MessageContent = MessageContent;

package/message/message.stories.d.ts

@@ -1,7 +1,2 @@
 import React from "react";
-declare const _default: {
-    title: string;
-    component: React.ForwardRefExoticComponent<React.RefAttributes<import("./message").MessageRef>>;
-};
-export default _default;
 export declare function Default(): React.JSX.Element;

package/message/message.stories.js

@@ -7,12 +7,7 @@ exports.Default = void 0;
 const button_1 = require("@uxf/ui/button");
 const react_1 = __importDefault(require("react"));
 const storybook_config_1 = require("../utils/storybook-config");
-const message_1 = require("./message");
 const message_service_1 = require("./message-service");
-exports.default = {
-    title: "UI/Message",
-    component: message_1.Message,
-};
 const getConfirmForSize = (variant, colors) => {
     const confirmTypes = colors.map((color) => (react_1.default.createElement("div", { className: "space-y-2", key: color },
         react_1.default.createElement(button_1.Button, { isFullWidth: true, onClick: () => message_service_1.MessageService.openConfirm({
@@ -66,7 +61,7 @@ const getConfirmForSize = (variant, colors) => {
         react_1.default.createElement("div", { className: "flex w-full flex-col gap-2" }, confirmTypes)));
 };
 function Default() {
-    const config = (0, storybook_config_1.useStorybookConfig)("Button");
+    const config = (0, storybook_config_1.useStorybookConfig)("Message");
     return (react_1.default.createElement("div", { className: "flex justify-center lg:flex-row dark:text-white" },
         react_1.default.createElement("div", { className: "space-y-4 rounded p-10" },
             react_1.default.createElement("div", { className: "uxf-typo-h5" }, "default"),

package/package.json

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

package/readmes.d.ts

@@ -9,6 +9,10 @@ export declare const readmes: {
     readonly "button-group": typeof alertBubbleReadme;
     readonly "button-list": typeof alertBubbleReadme;
     readonly calendar: typeof alertBubbleReadme;
+    readonly checkbox: typeof alertBubbleReadme;
+    readonly "checkbox-button": typeof alertBubbleReadme;
+    readonly "checkbox-input": typeof alertBubbleReadme;
+    readonly chip: typeof alertBubbleReadme;
     readonly "color-radio": typeof alertBubbleReadme;
     readonly "color-radio-group": typeof alertBubbleReadme;
     readonly combobox: typeof alertBubbleReadme;
@@ -25,10 +29,6 @@ export declare const readmes: {
     readonly "file-input": typeof alertBubbleReadme;
     readonly "flash-messages": typeof alertBubbleReadme;
     readonly "form-component": typeof alertBubbleReadme;
-    readonly checkbox: typeof alertBubbleReadme;
-    readonly "checkbox-button": typeof alertBubbleReadme;
-    readonly "checkbox-input": typeof alertBubbleReadme;
-    readonly chip: typeof alertBubbleReadme;
     readonly icon: typeof alertBubbleReadme;
     readonly "image-gallery": typeof alertBubbleReadme;
     readonly input: typeof alertBubbleReadme;

package/readmes.js

@@ -13,26 +13,26 @@ const README_md_5 = __importDefault(require("./button/README.md"));
 const README_md_6 = __importDefault(require("./button-group/README.md"));
 const README_md_7 = __importDefault(require("./button-list/README.md"));
 const README_md_8 = __importDefault(require("./calendar/README.md"));
-const README_md_9 = __importDefault(require("./color-radio/README.md"));
-const README_md_10 = __importDefault(require("./color-radio-group/README.md"));
-const README_md_11 = __importDefault(require("./combobox/README.md"));
-const README_md_12 = __importDefault(require("./date-picker/README.md"));
-const README_md_13 = __importDefault(require("./date-picker-input/README.md"));
-const README_md_14 = __importDefault(require("./date-range-picker/README.md"));
-const README_md_15 = __importDefault(require("./date-range-picker-input/README.md"));
-const README_md_16 = __importDefault(require("./datetime-picker/README.md"));
-const README_md_17 = __importDefault(require("./datetime-picker-input/README.md"));
-const README_md_18 = __importDefault(require("./dialog/README.md"));
-const README_md_19 = __importDefault(require("./dropdown/README.md"));
-const README_md_20 = __importDefault(require("./dropzone/README.md"));
-const README_md_21 = __importDefault(require("./error-message/README.md"));
-const README_md_22 = __importDefault(require("./file-input/README.md"));
-const README_md_23 = __importDefault(require("./flash-messages/README.md"));
-const README_md_24 = __importDefault(require("./form-component/README.md"));
-const README_md_25 = __importDefault(require("./checkbox/README.md"));
-const README_md_26 = __importDefault(require("./checkbox-button/README.md"));
-const README_md_27 = __importDefault(require("./checkbox-input/README.md"));
-const README_md_28 = __importDefault(require("./chip/README.md"));
+const README_md_9 = __importDefault(require("./checkbox/README.md"));
+const README_md_10 = __importDefault(require("./checkbox-button/README.md"));
+const README_md_11 = __importDefault(require("./checkbox-input/README.md"));
+const README_md_12 = __importDefault(require("./chip/README.md"));
+const README_md_13 = __importDefault(require("./color-radio/README.md"));
+const README_md_14 = __importDefault(require("./color-radio-group/README.md"));
+const README_md_15 = __importDefault(require("./combobox/README.md"));
+const README_md_16 = __importDefault(require("./date-picker/README.md"));
+const README_md_17 = __importDefault(require("./date-picker-input/README.md"));
+const README_md_18 = __importDefault(require("./date-range-picker/README.md"));
+const README_md_19 = __importDefault(require("./date-range-picker-input/README.md"));
+const README_md_20 = __importDefault(require("./datetime-picker/README.md"));
+const README_md_21 = __importDefault(require("./datetime-picker-input/README.md"));
+const README_md_22 = __importDefault(require("./dialog/README.md"));
+const README_md_23 = __importDefault(require("./dropdown/README.md"));
+const README_md_24 = __importDefault(require("./dropzone/README.md"));
+const README_md_25 = __importDefault(require("./error-message/README.md"));
+const README_md_26 = __importDefault(require("./file-input/README.md"));
+const README_md_27 = __importDefault(require("./flash-messages/README.md"));
+const README_md_28 = __importDefault(require("./form-component/README.md"));
 const README_md_29 = __importDefault(require("./icon/README.md"));
 const README_md_30 = __importDefault(require("./image-gallery/README.md"));
 const README_md_31 = __importDefault(require("./input/README.md"));
@@ -69,26 +69,26 @@ exports.readmes = {
     "button-group": README_md_6.default,
     "button-list": README_md_7.default,
     "calendar": README_md_8.default,
-    "color-radio": README_md_9.default,
-    "color-radio-group": README_md_10.default,
-    "combobox": README_md_11.default,
-    "date-picker": README_md_12.default,
-    "date-picker-input": README_md_13.default,
-    "date-range-picker": README_md_14.default,
-    "date-range-picker-input": README_md_15.default,
-    "datetime-picker": README_md_16.default,
-    "datetime-picker-input": README_md_17.default,
-    "dialog": README_md_18.default,
-    "dropdown": README_md_19.default,
-    "dropzone": README_md_20.default,
-    "error-message": README_md_21.default,
-    "file-input": README_md_22.default,
-    "flash-messages": README_md_23.default,
-    "form-component": README_md_24.default,
-    "checkbox": README_md_25.default,
-    "checkbox-button": README_md_26.default,
-    "checkbox-input": README_md_27.default,
-    "chip": README_md_28.default,
+    "checkbox": README_md_9.default,
+    "checkbox-button": README_md_10.default,
+    "checkbox-input": README_md_11.default,
+    "chip": README_md_12.default,
+    "color-radio": README_md_13.default,
+    "color-radio-group": README_md_14.default,
+    "combobox": README_md_15.default,
+    "date-picker": README_md_16.default,
+    "date-picker-input": README_md_17.default,
+    "date-range-picker": README_md_18.default,
+    "date-range-picker-input": README_md_19.default,
+    "datetime-picker": README_md_20.default,
+    "datetime-picker-input": README_md_21.default,
+    "dialog": README_md_22.default,
+    "dropdown": README_md_23.default,
+    "dropzone": README_md_24.default,
+    "error-message": README_md_25.default,
+    "file-input": README_md_26.default,
+    "flash-messages": README_md_27.default,
+    "form-component": README_md_28.default,
     "icon": README_md_29.default,
     "image-gallery": README_md_30.default,
     "input": README_md_31.default,

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: "white" },
+        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(icon_1.Icon, { className: "w-4", name: "copy" })), value: value })));
 }
 exports.Default = Default;

package/utils/storybook-config.d.ts

@@ -30,6 +30,9 @@ export interface StorybookConfig {
         colors: LozengeColor[];
         variants: LozengeVariant[];
     };
+    Message: {
+        colors: MessageColor[];
+    };
     Select: any;
 }
 export declare function useStorybookConfig<T extends keyof StorybookConfig>(key: T): StorybookConfig[T];

package/utils/storybook-config.js

@@ -31,9 +31,9 @@ exports.defaultConfig = {
         colors: ["default", "success", "error", "warning"],
     },
     Button: {
-        sizes: ["xs", "sm", "default", "lg", "xl"],
-        colors: ["default", "success", "error", "warning"],
-        variants: ["default", "outlined", "white", "text"],
+        sizes: ["sm", "default", "lg", "xl"],
+        colors: ["default", "positive", "negative", "warning", "info", "inverted"],
+        variants: ["default", "secondary", "text"],
     },
     Confirm: {
         colors: ["default", "success", "error", "warning"],
@@ -49,6 +49,9 @@ exports.defaultConfig = {
         colors: ["blue", "default", "green", "indigo", "orange", "red"],
         variants: ["default", "muted"],
     },
+    Message: {
+        colors: ["default", "success", "warning", "error"],
+    },
     Select: {},
 };
 // Context