@uxf/ui 11.32.0 → 11.33.2

package/button/button.d.ts

@@ -5,14 +5,12 @@ 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">, Omit<UseAnchorProps, "disabled" | "loading"> {
+export interface ButtonProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "type">, UseAnchorProps {
     as?: NextLink | "a";
     color?: ButtonColor;
     isFullWidth?: boolean;
     isIconButton?: boolean;
     size?: ButtonSize;
     variant?: ButtonVariant;
-    isLoading?: boolean;
-    isDisabled?: boolean;
 }
 export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLAnchorElement>>;

package/button/button.js

@@ -33,8 +33,8 @@ exports.Button = (0, react_1.forwardRef)((props, ref) => {
     const Component = as;
     const anchorProps = (0, use_anchor_props_1.useAnchorProps)({
         ...restProps,
-        disabled: isDisabled,
-        loading: isLoading,
+        isDisabled,
+        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.js

@@ -29,7 +29,10 @@ 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"));
+const toggle_1 = require("../toggle");
 function Basic() {
+    const [isDisabled, setIsDisabled] = (0, react_1.useState)(false);
+    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
     const config = (0, storybook_config_1.useStorybookConfig)("Button");
     // eslint-disable-next-line no-console
     const onClick = console.log;
@@ -37,7 +40,9 @@ function Basic() {
     const gridTemplateColumns = `repeat(${gridColumnsCount}, 180px)`;
     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),
+            react_1.default.createElement("div", null,
+                react_1.default.createElement(toggle_1.Toggle, { className: "p-0", label: "Disabled", name: "is-disabled", onChange: (value) => setIsDisabled(Boolean(value)), size: "sm", value: isDisabled }),
+                react_1.default.createElement(toggle_1.Toggle, { className: "p-0 pt-2", label: "Loading", name: "is-loading", onChange: (value) => setIsLoading(Boolean(value)), size: "sm", value: isLoading })),
             config.variants.map((variant) => (react_1.default.createElement("div", { className: "border-b border-blue-500 pb-2 text-center text-xs text-gray-400", key: variant, style: { gridColumn: "span 4" } },
                 "variant=",
                 variant))),
@@ -51,8 +56,8 @@ function Basic() {
                     "color=",
                     color),
                 config.variants.map((variant) => (react_1.default.createElement(react_1.Fragment, { key: variant }, config.sizes.map((size) => (react_1.default.createElement("div", { className: "flex items-center justify-center gap-2", key: `${size}${color}${variant}` },
-                    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, isIconButton: true, onClick: onClick, size: size, variant: variant },
+                    react_1.default.createElement(button_1.Button, { color: color, isDisabled: isDisabled, isLoading: isLoading, onClick: onClick, size: size, variant: variant }, "Button"),
+                    react_1.default.createElement(button_1.Button, { color: color, isDisabled: isDisabled, isIconButton: true, isLoading: isLoading, onClick: onClick, size: size, variant: variant },
                         react_1.default.createElement(icon_1.Icon, { name: "triangle-exclamation" }))))))))))))));
 }
 function Default() {

package/button-list/button-list.d.ts

@@ -9,6 +9,7 @@ export type SingleButtonProps = Omit<ButtonProps, "children"> & {
 export interface ButtonListProps {
     buttons: SingleButtonProps[];
     className?: string;
+    classNameDropdown?: string;
     openButton?: SingleButtonProps;
     visibleButtonsCount: number;
     color?: ButtonProps["color"];

package/button-list/button-list.js

@@ -39,7 +39,7 @@ const MenuButton = (0, react_3.forwardRef)((props, ref) => {
     const { variant, color, isIconButton, isFullWidth, size, icon, label, className, ...restProps } = props;
     const anchorProps = (0, use_anchor_props_1.useAnchorProps)({
         ...restProps,
-        className: (0, cx_1.cx)("uxf-button-list__menu-button", className),
+        className: (0, cx_1.cx)("uxf-button-list__menu-button", `uxf-button-list__menu-button--color-${color}`, `uxf-button-list__menu-button--variant-${variant}`, className),
     });
     return (react_3.default.createElement("a", { ref: ref, ...anchorProps },
         icon && react_3.default.createElement(icon_1.Icon, { className: "uxf-button-list__menu-button-icon", name: icon }),
@@ -73,9 +73,9 @@ const ButtonList = (props) => {
                     openButtonIcon && (react_3.default.createElement(icon_1.Icon, { className: "uxf-button-list__open-button-icon", name: openButtonIcon })),
                     openButtonLabel && (react_3.default.createElement("span", { className: "uxf-button-list__open-button-label" }, openButtonLabel))),
                 open && (react_3.default.createElement(react_1.FloatingPortal, null,
-                    react_3.default.createElement(react_2.Menu.Items, { className: "uxf-button-list__menu-items", ref: dropdown.refs.setFloating, style: dropdown.floatingStyles }, restButtons.map((button, index) => {
+                    react_3.default.createElement(react_2.Menu.Items, { className: (0, cx_1.cx)("uxf-button-list__menu-items", props.classNameDropdown), ref: dropdown.refs.setFloating, style: dropdown.floatingStyles }, restButtons.map((button, index) => {
                         var _a, _b, _c;
-                        return (react_3.default.createElement(react_2.Menu.Item, { key: index },
+                        return (react_3.default.createElement(react_2.Menu.Item, { disabled: button.isDisabled, key: index },
                             react_3.default.createElement(MenuButton, { ...button, color: (_a = button.color) !== null && _a !== void 0 ? _a : props.color, size: (_b = button.size) !== null && _b !== void 0 ? _b : props.size, variant: (_c = button.variant) !== null && _c !== void 0 ? _c : props.variant })));
                     }))))));
         }))));

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

@@ -15,7 +15,7 @@ function Default() {
     const component = (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(index_1.ButtonList, { buttons: [
                 { label: "First item" },
-                { label: "Second item" },
+                { label: "Second item", color: "negative" },
                 { label: "Third item" },
                 { label: "Fourth item", isDisabled: true },
                 { label: "Fifth item" },

package/css/button-list.css

@@ -1,17 +1,33 @@
 .uxf-button-list {
-    @apply flex items-center space-x-2;
+    align-items: center;
+    display: flex;
+    gap: theme("spacing.2");
 
     &__menu {
-        @apply relative;
-
         display: flex;
+        position: relative;
     }
 
     &__menu-items {
-        @apply z-dropdown absolute right-0 mt-2 w-40 divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black/5 focus:outline-none;
+        background-color: theme("colors.white");
+        border-radius: theme("borderRadius.md");
+        margin-top: theme("spacing.2");
+        overflow: auto;
+        position: absolute;
+        right: 0;
+        width: theme("width.40");
+        z-index: theme("zIndex.dropdown");
+
+        &:focus-visible {
+            outline: none;
+        }
+
+        @apply divide-y divide-gray-100 shadow-lg ring-1 ring-black/5;
 
         :root .dark & {
-            @apply divide-gray-700 bg-gray-900 ring-white/10;
+            background-color: theme("colors.gray.900");
+
+            @apply divide-gray-700 ring-white/10;
         }
     }
 
@@ -24,25 +40,41 @@
     }
 
     &__menu-button {
-        @apply is-hoverable:hover:cursor-pointer flex space-x-3 px-3 py-2 text-sm text-black hover:text-gray-800;
+        color: theme("colors.lightHigh");
+        display: flex;
+        gap: theme("spacing.3");
+        padding: theme("spacing.2") theme("spacing.3");
+
+        @apply is-hoverable:cursor-pointer is-hoverable:opacity-75 text-sm transition-opacity;
 
         :root .dark & {
-            @apply text-white hover:text-gray-200;
+            color: theme("colors.darkHigh");
         }
 
         &-icon {
-            @apply text-lightMedium w-3;
+            color: theme("colors.lightMedium");
+            width: theme("width.3");
 
             :root .dark & {
-                @apply text-darkMedium;
+                color: theme("colors.darkMedium");
             }
         }
 
         &.is-disabled {
-            @apply text-lightLow;
+            color: theme("colors.lightLow");
 
             :root .dark & {
-                @apply text-darkLow;
+                color: theme("colors.darkLow");
+            }
+        }
+
+        &--color {
+            &-negative {
+                color: theme("colors.red.500");
+
+                .uxf-button-list__menu-button-icon {
+                    color: theme("colors.red.500");
+                }
             }
         }
     }

package/css/colors.css

@@ -5,6 +5,7 @@
     --uxf-color-base-border-border: #e5e7eb;
     --uxf-color-base-surface-main: #fff;
     --uxf-color-base-surface-main-hover: #f3f4f6;
+    --uxf-color-base-surface-background: #f9fafb;
     --uxf-color-base-surface-input-disabled: #f3f4f6;
     --uxf-color-base-surface-disabled: #d2d6db;
     --uxf-color-base-surface-inverted-main: #ffffff14;
@@ -50,8 +51,10 @@
         /** base */
         --uxf-color-base-border-inverted: #3842501f;
         --uxf-color-base-border-input: #384250;
+        --uxf-color-base-border-border: #e5e7eb1f;
         --uxf-color-base-surface-main: #111927;
         --uxf-color-base-surface-main-hover: #1f2a37;
+        --uxf-color-base-surface-background: #1f2a37;
         --uxf-color-base-surface-input-disabled: #4d5761;
         --uxf-color-base-surface-disabled: #d2d6db;
         --uxf-color-base-surface-inverted-main: #20293914;
@@ -84,6 +87,8 @@
         --uxf-color-warning-border: #dc6803;
         --uxf-color-warning-surface-default: #fdb022;
         --uxf-color-warning-surface-default-hover: #fec84b;
+        --uxf-color-warning-surface-muted: #93370c;
+        --uxf-color-warning-icon-on-muted: #fec84b;
 
         /** info */
         --uxf-color-info-text: #b3b8db;

package/css/dialog.css

@@ -61,6 +61,7 @@
 
         .uxf-dialog__panel {
             @screen sm {
+                border-left: theme("borderWidth.DEFAULT") solid var(--uxf-color-base-border-border);
                 border-radius: 0;
             }
         }

package/css/modal-header.css

@@ -1,18 +1,18 @@
 :root {
     /** modal header variables */
-    --uxf-modal-header-background-color: var(--uxf-color-base-surface-main);
-    --uxf-modal-header-border-color: var(--uxf-color-base-border-border);
     --uxf-modal-header-border-width: theme("borderWidth.DEFAULT");
     --uxf-modal-header-description-font-size: theme("fontSize.caption");
     --uxf-modal-header-description-font-weight: theme("fontWeight.normal");
-    --uxf-modal-header-description-text-color: var(--uxf-color-base-text-low-emphasis);
     --uxf-modal-header-title-font-size: 18px;
     --uxf-modal-header-title-font-weight: theme("fontWeight.semibold");
     --uxf-modal-header-title-line-height: 1.3333;
-    --uxf-modal-header-title-text-color: var(--uxf-color-base-text-high-emphasis);
 }
 
 .uxf-modal-header {
+    --uxf-modal-header-background-color: var(--uxf-color-base-surface-main);
+    --uxf-modal-header-border-color: var(--uxf-color-base-border-border);
+    --uxf-modal-header-description-text-color: var(--uxf-color-base-text-low-emphasis);
+    --uxf-modal-header-title-text-color: var(--uxf-color-base-text-high-emphasis);
     --uxf-icon-color: var(--uxf-modal-header-title-text-color);
 
     background-color: var(--uxf-modal-header-background-color);

package/date-range-picker/date-range-picker.d.ts

@@ -3,10 +3,10 @@ import { CSSProperties, FC, PropsWithChildren, ReactNode } from "react";
 import { DateRangePickerValueType } from "./types";
 export interface DateRangePickerProps {
     bottomContent?: ReactNode;
-    closePopoverHandler: () => void;
     datesConfig?: DatesConfig[];
     numberOfMonths?: number;
     onChange: (data: DateRangePickerValueType) => void;
+    onClosePopover: () => void;
     selectedDates: DateRangePickerValueType;
     style?: CSSProperties;
     /** @deprecated */

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

@@ -24,6 +24,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Default = Default;
+const noop_1 = require("@uxf/core/utils/noop");
 const react_1 = __importStar(require("react"));
 const action_1 = require("../utils/action");
 const date_range_picker_1 = require("./date-range-picker");
@@ -34,6 +35,6 @@ exports.default = {
 function Default() {
     const [value, setValue] = (0, react_1.useState)(null);
     const onChange = (0, action_1.action)("onChange", setValue);
-    const testDatePickers = react_1.default.createElement(date_range_picker_1.DateRangePicker, { closePopoverHandler: close, onChange: onChange, selectedDates: value });
+    const testDatePickers = react_1.default.createElement(date_range_picker_1.DateRangePicker, { onChange: onChange, onClosePopover: noop_1.noop, selectedDates: value });
     return react_1.default.createElement("div", { className: "max-w-screen-sm space-y-4 rounded p-8" }, testDatePickers);
 }

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

@@ -57,6 +57,6 @@ exports.DateRangePickerInput = (0, react_1.forwardRef)((props, ref) => {
     const selectedDates = props.value
         ? { from: parsedFrom.isValid() ? parsedFrom.toDate() : null, to: parsedTo.isValid() ? parsedTo.toDate() : null }
         : null;
-    return (react_1.default.createElement(_input_with_popover_1._InputWithPopover, { ...restProps, placeholder: props.placeholder || "Vyberte datum...", ref: ref, triggerElement: (_a = props.triggerElement) !== null && _a !== void 0 ? _a : react_1.default.createElement(icon_1.Icon, { name: "calendar", size: 20 }), value: (_b = props.value) !== null && _b !== void 0 ? _b : "" }, ({ close }) => (react_1.default.createElement(date_range_picker_1.DateRangePicker, { bottomContent: props.bottomContent, closePopoverHandler: close, datesConfig: props.datesConfig, numberOfMonths: numberOfMonths, onChange: onDatePickerChange, selectedDates: selectedDates, style: props.style, unavailableDates: props.unavailableDates }))));
+    return (react_1.default.createElement(_input_with_popover_1._InputWithPopover, { ...restProps, placeholder: props.placeholder || "Vyberte datum...", ref: ref, triggerElement: (_a = props.triggerElement) !== null && _a !== void 0 ? _a : react_1.default.createElement(icon_1.Icon, { name: "calendar", size: 20 }), value: (_b = props.value) !== null && _b !== void 0 ? _b : "" }, ({ close }) => (react_1.default.createElement(date_range_picker_1.DateRangePicker, { bottomContent: props.bottomContent, datesConfig: props.datesConfig, numberOfMonths: numberOfMonths, onChange: onDatePickerChange, onClosePopover: close, selectedDates: selectedDates, style: props.style, unavailableDates: props.unavailableDates }))));
 });
 exports.DateRangePickerInput.displayName = "UxfUiDatePickerInput";

package/message/README.md

@@ -5,6 +5,7 @@ Use component [ModalDialog](/docs/ui/modal-dialog) and method [openModal()](/doc
 ## CSS dependencies
 
 ```css
+@import url("@uxf/ui/alert-bubble/alert-bubble.css");
 @import url("@uxf/ui/message/message.css");
 @import url("@uxf/ui/dialog/dialog.css");
 @import url("@uxf/ui/button/button.css");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/ui",
-  "version": "11.32.0",
+  "version": "11.33.2",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -18,7 +18,7 @@
     "@floating-ui/react": "0.26.23",
     "@headlessui/react": "1.7.14",
     "@uxf/core": "11.32.0",
-    "@uxf/core-react": "11.32.0",
+    "@uxf/core-react": "11.33.0",
     "@uxf/datepicker": "11.32.0",
     "@uxf/styles": "11.32.0",
     "color2k": "2.0.3",

package/time-picker/time-picker.d.ts

@@ -1,7 +1,7 @@
 import { OnTimeChangeType, TimeType } from "@uxf/datepicker/hooks/use-time-picker";
 import { FC } from "react";
 export interface TimePickerProps {
-    closePopoverHandler?: () => void;
+    onClosePopover?: () => void;
     onChange: (data: OnTimeChangeType) => void;
     preventScroll?: boolean;
     selectedTime: TimeType | null;

package/time-picker/time-picker.stories.js

@@ -24,6 +24,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Default = Default;
+const noop_1 = require("@uxf/core/utils/noop");
 const react_1 = __importStar(require("react"));
 const action_1 = require("../utils/action");
 const time_picker_1 = require("./time-picker");
@@ -34,7 +35,6 @@ exports.default = {
 function Default() {
     const [value, setValue] = (0, react_1.useState)(null);
     const onChange = (0, action_1.action)("onChange", setValue);
-    const onClose = () => null;
-    const testTimePickers = react_1.default.createElement(time_picker_1.TimePicker, { closePopoverHandler: onClose, onChange: onChange, selectedTime: value });
+    const testTimePickers = react_1.default.createElement(time_picker_1.TimePicker, { onChange: onChange, onClosePopover: noop_1.noop, selectedTime: value });
     return react_1.default.createElement("div", { className: "max-w-screen-sm space-y-4 rounded p-8" }, testTimePickers);
 }

package/time-picker-input/time-picker-input.js

@@ -77,6 +77,6 @@ exports.TimePickerInput = (0, react_1.forwardRef)((props, ref) => {
     }, [onChange]);
     const value = getValue(props.value);
     const selectedTime = getSelectedTime(props.value);
-    return (react_1.default.createElement(_input_with_popover_1._InputWithPopover, { ...props, className: className, onChange: onInputChange, placeholder: (_a = props.placeholder) !== null && _a !== void 0 ? _a : (0, dayjs_1.default)().format(exports.DISPLAY_TIME_FORMAT), ref: ref, triggerElement: (_b = props.triggerElement) !== null && _b !== void 0 ? _b : react_1.default.createElement(icon_1.Icon, { name: "clock", size: 20 }), value: value }, ({ close }) => (0, is_not_nil_1.isNotNil)(props.CustomTimePicker) ? (react_1.default.createElement(props.CustomTimePicker, { onChange: props.onChange, onClose: close, value: (0, is_time_string_1.isTimeString)(props.value) ? props.value : null })) : (react_1.default.createElement(time_picker_1.TimePicker, { closePopoverHandler: close, onChange: onTimePickerChange, preventScroll: true, selectedTime: selectedTime }))));
+    return (react_1.default.createElement(_input_with_popover_1._InputWithPopover, { ...props, className: className, onChange: onInputChange, placeholder: (_a = props.placeholder) !== null && _a !== void 0 ? _a : (0, dayjs_1.default)().format(exports.DISPLAY_TIME_FORMAT), ref: ref, triggerElement: (_b = props.triggerElement) !== null && _b !== void 0 ? _b : react_1.default.createElement(icon_1.Icon, { name: "clock", size: 20 }), value: value }, ({ close }) => (0, is_not_nil_1.isNotNil)(props.CustomTimePicker) ? (react_1.default.createElement(props.CustomTimePicker, { onChange: props.onChange, onClose: close, value: (0, is_time_string_1.isTimeString)(props.value) ? props.value : null })) : (react_1.default.createElement(time_picker_1.TimePicker, { onChange: onTimePickerChange, onClosePopover: close, preventScroll: true, selectedTime: selectedTime }))));
 });
 exports.TimePickerInput.displayName = "UxfUiTimePickerInput";