@uxf/ui 11.45.1 → 11.47.0

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

@@ -28,15 +28,6 @@ const react_1 = __importStar(require("react"));
 const date_range_picker_input_1 = require("./date-range-picker-input");
 // import Docs from "./date-picker.docs.mdx";
 const action_1 = require("../utils/action");
-exports.default = {
-    title: "UI/DateRangePickerInput",
-    component: date_range_picker_input_1.DateRangePickerInput,
-    parameters: {
-        docs: {
-        // page: Docs,
-        },
-    },
-};
 function Default() {
     const [range, setRange] = (0, react_1.useState)(null);
     const onChange = (0, action_1.action)("onChange", setRange);

package/datetime-picker/datetime-picker.stories.d.ts

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

package/datetime-picker/datetime-picker.stories.js

@@ -27,10 +27,6 @@ exports.Default = Default;
 const react_1 = __importStar(require("react"));
 const action_1 = require("../utils/action");
 const datetime_picker_1 = require("./datetime-picker");
-exports.default = {
-    title: "UI/DatetimePicker",
-    component: datetime_picker_1.DatetimePicker,
-};
 function Default() {
     const [value, setValue] = (0, react_1.useState)(null);
     const onChange = (0, action_1.action)("onChange", setValue);

package/datetime-picker-input/datetime-picker-input.stories.d.ts

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

package/datetime-picker-input/datetime-picker-input.stories.js

@@ -28,10 +28,6 @@ const react_1 = __importStar(require("react"));
 const icon_1 = require("../icon");
 const action_1 = require("../utils/action");
 const datetime_picker_input_1 = require("./datetime-picker-input");
-exports.default = {
-    title: "UI/DatetimePickerInput",
-    component: datetime_picker_input_1.DatetimePickerInput,
-};
 function Default() {
     const [date, setDate] = (0, react_1.useState)(null);
     const onChange = (0, action_1.action)("onChange", setDate);

package/dialog/dialog.d.ts

@@ -1,11 +1,28 @@
-import { DialogVariant } from "@uxf/ui/dialog/theme";
-import React, { ReactNode } from "react";
+import { UseFloatingReturn } from "@floating-ui/react";
+import { DialogVariant, DialogWidth } from "@uxf/ui/dialog/theme";
+import React, { FC, HTMLProps, ReactNode, Ref } from "react";
+type GetFloatingElementProps = (userProps?: HTMLProps<HTMLElement>) => Record<string, unknown>;
 export interface DialogProps {
-    children: ReactNode;
+    children?: ReactNode;
     className?: string;
-    disableBackdropClose?: boolean;
-    onClose: () => void;
-    open: boolean;
+    context: UseFloatingReturn["context"];
+    isBackdropCloseDisabled?: boolean;
+    forwardedRef: Ref<HTMLDivElement>;
+    getFloatingProps: GetFloatingElementProps;
+    isOpen: boolean;
     variant?: DialogVariant;
+    width?: DialogWidth;
 }
+type DialogProviderProps = Pick<DialogProps, "variant" | "width" | "className" | "children">;
 export declare const Dialog: React.NamedExoticComponent<DialogProps>;
+type DialogCloseHandler = () => void;
+export declare function useDialog(dialogConfig?: {
+    onDialogClose?: DialogCloseHandler;
+    isBackdropCloseDisabled?: boolean;
+}): {
+    openDialog: (children: ReactNode) => void;
+    DialogProvider: FC<DialogProviderProps>;
+    closeDialog: DialogCloseHandler;
+    getFloatingElementProps: GetFloatingElementProps;
+};
+export {};

package/dialog/dialog.js

@@ -25,14 +25,51 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Dialog = void 0;
-const react_1 = require("@headlessui/react");
+exports.useDialog = useDialog;
+const react_1 = require("@floating-ui/react");
+const show_1 = require("@uxf/core-react/components/show");
+const use_latest_1 = require("@uxf/core-react/hooks/use-latest");
+const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
 const react_2 = __importStar(require("react"));
 exports.Dialog = (0, react_2.memo)((props) => {
-    var _a, _b;
-    return (react_2.default.createElement(react_1.Dialog, { className: `uxf-dialog uxf-dialog--variant-${(_a = props.variant) !== null && _a !== void 0 ? _a : "default"} ${(_b = props.className) !== null && _b !== void 0 ? _b : ""}`, onClose: props.disableBackdropClose ? () => null : props.onClose, open: props.open },
-        react_2.default.createElement(react_1.Dialog.Overlay, { className: "uxf-dialog__backdrop" }),
-        react_2.default.createElement("div", { className: "uxf-dialog__wrapper" },
-            react_2.default.createElement("div", { className: "uxf-dialog__body" },
-                react_2.default.createElement(react_1.Dialog.Panel, { className: "uxf-dialog__panel" }, props.children)))));
+    var _a, _b, _c;
+    return (react_2.default.createElement(react_1.FloatingPortal, null,
+        react_2.default.createElement(show_1.Show, { when: props.isOpen },
+            react_2.default.createElement(react_1.FloatingOverlay, { className: `uxf-dialog uxf-dialog__backdrop uxf-dialog--variant-${(_a = props.variant) !== null && _a !== void 0 ? _a : "default"} ${(_b = props.className) !== null && _b !== void 0 ? _b : ""} uxf-dialog--width-${(_c = props.width) !== null && _c !== void 0 ? _c : "default"}`, lockScroll: true },
+                react_2.default.createElement(react_1.FloatingFocusManager, { context: props.context, guards: true, initialFocus: 0, modal: true },
+                    react_2.default.createElement("div", { className: "uxf-dialog__wrapper" },
+                        react_2.default.createElement("div", { className: "uxf-dialog__body" },
+                            react_2.default.createElement("div", { className: "uxf-dialog__panel", ref: props.forwardedRef, ...props.getFloatingProps() }, props.children))))))));
 });
 exports.Dialog.displayName = "UxfUiDialog";
+function useDialog(dialogConfig) {
+    const [content, setContent] = (0, react_2.useState)(null);
+    const closeDialogHandler = (0, react_2.useCallback)(() => {
+        setContent(null);
+        if (dialogConfig === null || dialogConfig === void 0 ? void 0 : dialogConfig.onDialogClose) {
+            dialogConfig.onDialogClose();
+        }
+    }, [dialogConfig]);
+    const { refs, context } = (0, react_1.useFloating)({
+        open: (0, is_not_nil_1.isNotNil)(content),
+        onOpenChange(nextOpen, event, reason) {
+            if (!(reason === "outside-press" && (dialogConfig === null || dialogConfig === void 0 ? void 0 : dialogConfig.isBackdropCloseDisabled))) {
+                closeDialogHandler();
+            }
+        },
+    });
+    const click = (0, react_1.useClick)(context);
+    const role = (0, react_1.useRole)(context);
+    const dismiss = (0, react_1.useDismiss)(context, { outsidePressEvent: "mousedown" });
+    const { getReferenceProps, getFloatingProps } = (0, react_1.useInteractions)([click, role, dismiss]);
+    const latestContext = (0, use_latest_1.useLatest)(context);
+    const DialogProvider = (0, react_2.useCallback)((config) => {
+        return (react_2.default.createElement(exports.Dialog, { className: config === null || config === void 0 ? void 0 : config.className, context: latestContext.current, forwardedRef: refs.setFloating, getFloatingProps: getFloatingProps, isOpen: Boolean(content), variant: config === null || config === void 0 ? void 0 : config.variant, width: config === null || config === void 0 ? void 0 : config.width }, content));
+    }, [latestContext, refs.setFloating, getFloatingProps, content]);
+    return {
+        openDialog: setContent,
+        DialogProvider,
+        closeDialog: closeDialogHandler,
+        getFloatingElementProps: getReferenceProps,
+    };
+}

package/dialog/dialog.stories.js

@@ -1,41 +1,20 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Default = Default;
-const react_1 = __importStar(require("react"));
+const react_1 = __importDefault(require("react"));
 const button_1 = require("../button");
 const dialog_1 = require("./dialog");
 function Default() {
-    const [open, setOpen] = (0, react_1.useState)();
-    const storyDialog = (react_1.default.createElement("div", null,
-        react_1.default.createElement(button_1.Button, { onClick: () => setOpen(true) }, "Click to open modal - default")));
+    const { openDialog, DialogProvider, closeDialog } = (0, dialog_1.useDialog)();
     return (react_1.default.createElement(react_1.default.Fragment, null,
         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" }, storyDialog)),
-        open && (react_1.default.createElement(dialog_1.Dialog, { onClose: () => setOpen(true), open: open },
-            react_1.default.createElement("div", { className: "p-4" },
-                react_1.default.createElement("p", { className: "mb-3 text-lg font-bold" }, "Dialog"),
-                react_1.default.createElement(button_1.Button, { isFullWidth: true, onClick: () => setOpen(false) }, "Close dialog"))))));
+            react_1.default.createElement("div", { className: "space-y-2 p-20 lg:w-1/2" },
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement(button_1.Button, { onClick: () => openDialog(react_1.default.createElement("div", { className: "p-4" },
+                            react_1.default.createElement("p", { className: "mb-3 text-lg font-bold" }, "Dialog"),
+                            react_1.default.createElement(button_1.Button, { isFullWidth: true, onClick: closeDialog }, "Close dialog"))) }, "Click to open modal - default")))),
+        react_1.default.createElement(DialogProvider, null)));
 }

package/dialog/theme.d.ts

@@ -3,3 +3,11 @@ export interface DialogVariants {
     "drawer-right": true;
 }
 export type DialogVariant = keyof DialogVariants;
+export interface DialogWidths {
+    xs: true;
+    sm: true;
+    default: true;
+    lg: true;
+    xl: true;
+}
+export type DialogWidth = keyof DialogWidths;

package/dropdown/dropdown.stories.d.ts

@@ -1,10 +1,2 @@
 import React from "react";
-declare const _default: {
-    title: string;
-    component: {
-        Item: React.ForwardRefExoticComponent<import("./dropdown").DropdownItemProps & React.RefAttributes<HTMLAnchorElement>>;
-        Items: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-    };
-};
-export default _default;
 export declare function Default(): React.JSX.Element;

package/dropdown/dropdown.stories.js

@@ -9,10 +9,6 @@ const classes_1 = require("@uxf/core/constants/classes");
 const react_2 = __importDefault(require("react"));
 const button_1 = require("../button");
 const index_1 = require("./index");
-exports.default = {
-    title: "UI/Dropdown",
-    component: index_1.Dropdown,
-};
 const testDropdownItems = [
     { id: 1, title: "Test 1" },
     { id: 2, title: "Test 2" },

package/dropzone/dropzone.stories.d.ts

@@ -1,9 +1,2 @@
 import React from "react";
-declare const _default: {
-    title: string;
-    component: React.ForwardRefExoticComponent<import("./dropzone-input").DropzoneInputProps & React.RefAttributes<HTMLDivElement>> & {
-        List: typeof import("./dropzone-list").DropzoneList;
-    };
-};
-export default _default;
 export declare function Default(): React.JSX.Element;

package/dropzone/dropzone.stories.js

@@ -32,10 +32,6 @@ const toggle_1 = require("../toggle");
 const action_1 = require("../utils/action");
 const upload_file_mock_1 = require("../utils/mocks/upload-file.mock");
 const index_1 = require("./index");
-exports.default = {
-    title: "UI/Dropzone",
-    component: index_1.Dropzone,
-};
 const MB_SIZE = 1024 * 1024;
 function Default() {
     const [isDisabled, setIsDisabled] = (0, react_1.useState)(false);

package/error-message/error-message.stories.d.ts

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

package/error-message/error-message.stories.js

@@ -6,10 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Default = Default;
 const react_1 = __importDefault(require("react"));
 const index_1 = require("./index");
-exports.default = {
-    title: "UI/ErrorMessage",
-    component: index_1.ErrorMessage,
-};
 function Default() {
     return (react_1.default.createElement("div", { className: "space-y-2" },
         react_1.default.createElement(index_1.ErrorMessage, null, "This field is required.")));

package/file-input/file-input.stories.d.ts

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

package/file-input/file-input.stories.js

@@ -28,10 +28,6 @@ const react_1 = __importStar(require("react"));
 const action_1 = require("../utils/action");
 const upload_file_mock_1 = require("../utils/mocks/upload-file.mock");
 const index_1 = require("./index");
-exports.default = {
-    title: "UI/FileInput",
-    component: index_1.FileInput,
-};
 function Default() {
     const [value, setValue] = (0, react_1.useState)(null);
     const onChange = (0, action_1.action)("onChange", setValue);

package/flash-messages/flash-messages.stories.d.ts

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

package/flash-messages/flash-messages.stories.js

@@ -7,12 +7,7 @@ exports.Default = Default;
 const button_1 = require("@uxf/ui/button");
 const icon_1 = require("@uxf/ui/icon");
 const react_1 = __importDefault(require("react"));
-const flash_messages_1 = require("./flash-messages");
 const flash_messages_service_1 = require("./flash-messages-service");
-exports.default = {
-    title: "UI/FlashMessages",
-    component: flash_messages_1.FlashMessages,
-};
 // Random texts for flash message height testing
 const randomTexts = [
     "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa ex fuga neque. Delectus error, esse eum exercitationem iste iure maiores mollitia officia quasi reiciendis saepe voluptates voluptatum? Commodi, nulla, quo!",

package/form-component/form-component.stories.d.ts

@@ -1,12 +1,2 @@
 import React from "react";
-declare const _default: {
-    title: string;
-    component: React.ForwardRefExoticComponent<import("./form-component").FormComponentProps & React.RefAttributes<HTMLDivElement>>;
-    parameters: {
-        actions: {
-            argTypesRegex: string;
-        };
-    };
-};
-export default _default;
 export declare function Default(): React.JSX.Element;

package/form-component/form-component.stories.js

@@ -6,11 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Default = Default;
 const react_1 = __importDefault(require("react"));
 const form_component_1 = require("./form-component");
-exports.default = {
-    title: "UI/FormComponent",
-    component: form_component_1.FormComponent,
-    parameters: { actions: { argTypesRegex: "^on.*" } },
-};
 function Default() {
     return (react_1.default.createElement("div", { className: "space-y-4" },
         react_1.default.createElement(form_component_1.FormComponent, { helperText: "helper text", inputId: "default", label: "Default", name: "form-component" },

package/icon/icon.stories.d.ts

@@ -1,12 +1,4 @@
 import React from "react";
-declare const _default: {
-    title: string;
-    component: React.ForwardRefExoticComponent<import("./icon").IconProps & React.RefAttributes<SVGSVGElement>>;
-    parameters: {
-        docs: {};
-    };
-};
-export default _default;
 export declare function AllIcons(): React.JSX.Element;
 export declare function ColorAndSizes(): React.JSX.Element;
 export declare function CustomComponent(): React.JSX.Element;

package/icon/icon.stories.js

@@ -12,15 +12,6 @@ const react_1 = __importDefault(require("react"));
 const context_1 = require("../context");
 const icon_1 = require("./icon");
 // import Docs from "./icon.docs.mdx";
-exports.default = {
-    title: "UI/Icon",
-    component: icon_1.Icon,
-    parameters: {
-        docs: {
-        // page: Docs,
-        },
-    },
-};
 function AllIcons() {
     const iconContext = (0, context_1.useComponentContext)("icon");
     return (react_1.default.createElement("div", { className: "flex flex-row flex-wrap" }, Object.keys(iconContext.iconsConfig).map((iconName) => (react_1.default.createElement("div", { className: "flex size-28 flex-col items-center justify-center gap-3", key: iconName },

package/icons-config.js

@@ -140,4 +140,24 @@ module.exports = {
         height: 512,
         data: `<path d="M393.4 41.4c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3L269.3 256l169.3 169.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L224 301.3 54.6 470.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L178.7 256 9.4 86.6c-12.5-12.5-12.5-32.7 0-45.2s32.8-12.5 45.3 0L224 210.7 393.4 41.4z" fill="currentColor"/>`,
     },
+    "solid-badge-check": {
+        width: 24,
+        height: 24,
+        data: `<path d="M12.5 2.5C13.9062 2.5 15.1562 3.32031 15.7812 4.53125C17.0703 4.10156 18.5547 4.41406 19.5703 5.42969C20.5859 6.44531 20.8984 7.92969 20.4688 9.21875C21.6797 9.84375 22.5 11.0938 22.5 12.5C22.5 13.9453 21.6797 15.1953 20.4688 15.8203C20.8984 17.1094 20.5859 18.5547 19.5703 19.5703C18.5547 20.5859 17.0703 20.8984 15.7812 20.5078C15.1562 21.7188 13.9062 22.5 12.5 22.5C11.0547 22.5 9.80469 21.7188 9.17969 20.5078C7.89062 20.8984 6.44531 20.5859 5.42969 19.5703C4.41406 18.5547 4.10156 17.1094 4.49219 15.8203C3.28125 15.1953 2.5 13.9453 2.5 12.5C2.5 11.0938 3.28125 9.84375 4.49219 9.21875C4.10156 7.92969 4.41406 6.44531 5.42969 5.42969C6.44531 4.41406 7.89062 4.10156 9.17969 4.53125C9.80469 3.32031 11.0547 2.5 12.5 2.5ZM16.9141 10.6641C17.2656 10.3125 17.2656 9.72656 16.9141 9.375C16.5234 8.98438 15.9375 8.98438 15.5859 9.375L11.25 13.7109L9.41406 11.875C9.02344 11.4844 8.4375 11.4844 8.08594 11.875C7.69531 12.2266 7.69531 12.8125 8.08594 13.1641L10.5859 15.6641C10.9375 16.0547 11.5234 16.0547 11.9141 15.6641L16.9141 10.6641Z" fill="currentColor"/>/>`,
+    },
+    "solid-triangle-exclamation": {
+        width: 24,
+        height: 24,
+        data: `<path d="M12.5 3.75C13.0469 3.75 13.5547 4.0625 13.8281 4.53125L22.2656 18.9062C22.5391 19.4141 22.5391 20 22.2656 20.4688C21.9922 20.9766 21.4844 21.25 20.9375 21.25H4.0625C3.47656 21.25 2.96875 20.9766 2.69531 20.4688C2.42188 20 2.42188 19.4141 2.69531 18.9062L11.1328 4.53125C11.4062 4.0625 11.9141 3.75 12.5 3.75ZM12.5 8.75C11.9531 8.75 11.5625 9.17969 11.5625 9.6875V14.0625C11.5625 14.6094 11.9531 15 12.5 15C13.0078 15 13.4375 14.6094 13.4375 14.0625V9.6875C13.4375 9.17969 13.0078 8.75 12.5 8.75ZM13.75 17.5C13.75 16.8359 13.1641 16.25 12.5 16.25C11.7969 16.25 11.25 16.8359 11.25 17.5C11.25 18.2031 11.7969 18.75 12.5 18.75C13.1641 18.75 13.75 18.2031 13.75 17.5Z" fill="currentColor"/>`,
+    },
+    "solid-octagon-xmark": {
+        width: 24,
+        height: 24,
+        data: `<path d="M7.96875 3.35938C8.51562 2.8125 9.21875 2.53906 9.96094 2.53906H15C15.7422 2.53906 16.4453 2.8125 16.9922 3.35938L21.6406 8.00781C22.1875 8.55469 22.4609 9.25781 22.4609 10V15.0391C22.4609 15.7812 22.1875 16.4844 21.6406 17.0312L16.9922 21.6797C16.4453 22.2266 15.7422 22.5 15 22.5H9.96094C9.21875 22.5 8.51562 22.2266 7.96875 21.6797L3.32031 17.0312C2.77344 16.4844 2.5 15.7812 2.5 15.0391V10C2.5 9.25781 2.77344 8.55469 3.32031 8.00781L7.96875 3.35938ZM9.33594 9.33594C8.94531 9.72656 8.94531 10.3125 9.33594 10.6641L11.1719 12.5L9.33594 14.3359C8.94531 14.7266 8.94531 15.3125 9.33594 15.6641C9.6875 16.0547 10.2734 16.0547 10.625 15.6641L12.4609 13.8281L14.2969 15.6641C14.6875 16.0547 15.2734 16.0547 15.625 15.6641C16.0156 15.3125 16.0156 14.7266 15.625 14.3359L13.7891 12.5L15.625 10.6641C16.0156 10.3125 16.0156 9.72656 15.625 9.33594C15.2734 8.98438 14.6875 8.98438 14.2969 9.33594L12.4609 11.1719L10.625 9.33594C10.2734 8.98438 9.6875 8.98438 9.33594 9.33594Z" fill="currentColor"/>`,
+    },
+    "solid-circle-info": {
+        width: 24,
+        height: 24,
+        data: `<path d="M12.5 22.5C8.90625 22.5 5.625 20.625 3.82812 17.5C2.03125 14.4141 2.03125 10.625 3.82812 7.5C5.625 4.41406 8.90625 2.5 12.5 2.5C16.0547 2.5 19.3359 4.41406 21.1328 7.5C22.9297 10.625 22.9297 14.4141 21.1328 17.5C19.3359 20.625 16.0547 22.5 12.5 22.5ZM10.9375 15.625C10.3906 15.625 10 16.0547 10 16.5625C10 17.1094 10.3906 17.5 10.9375 17.5H14.0625C14.5703 17.5 15 17.1094 15 16.5625C15 16.0547 14.5703 15.625 14.0625 15.625H13.75V12.1875C13.75 11.6797 13.3203 11.25 12.8125 11.25H10.9375C10.3906 11.25 10 11.6797 10 12.1875C10 12.7344 10.3906 13.125 10.9375 13.125H11.875V15.625H10.9375ZM12.5 7.5C11.7969 7.5 11.25 8.08594 11.25 8.75C11.25 9.45312 11.7969 10 12.5 10C13.1641 10 13.75 9.45312 13.75 8.75C13.75 8.08594 13.1641 7.5 12.5 7.5Z" fill="currentColor"/>`,
+    },
 };

package/image-gallery/image-gallery.stories.d.ts

@@ -1,14 +1,2 @@
 import React from "react";
-declare const _default: {
-    title: string;
-    component: React.FC<import("./image-gallery").ImageGalleryProps> & {
-        Image: React.FC<import("./types").ImageGalleryImageProps>;
-    };
-    parameters: {
-        actions: {
-            argTypesRegex: string;
-        };
-    };
-};
-export default _default;
 export declare function Default(): React.JSX.Element;

package/image-gallery/image-gallery.stories.js

@@ -8,11 +8,6 @@ const image_1 = require("@uxf/core/utils/image");
 const react_1 = __importDefault(require("react"));
 const icon_1 = require("../icon");
 const index_1 = require("./index");
-exports.default = {
-    title: "Lab/ImageGallery",
-    component: index_1.ImageGallery,
-    parameters: { actions: { argTypesRegex: "^on.*" } },
-};
 const images = [
     { src: "https://opentopo.app/hero_image.jpeg", title: "Obr. 1" },
     {

package/info-box/README.md

@@ -0,0 +1,28 @@
+# InfoBox
+
+Figma: <a href="https://www.figma.com/design/InhbHrNUhDGbBvRDRonXsD/Vent-UI?node-id=3536-20607">zde</a>
+
+## Usage
+
+```tsx
+import { InfoBox } from "@uxf/ui/info-box";
+
+function Example() {
+    return (
+        <InfoBox
+            action={<Button color="negative" variant="secondary">Button</Button>}
+            color="negative"
+            description="Description.."
+            title="Title"
+        />
+    );
+}
+```
+
+## CSS dependencies
+
+```css
+@import url("@uxf/ui/css/info-box.css");
+@import url("@uxf/ui/css/icon.css");
+@import url("@uxf/ui/css/figma-colors.css");
+```

package/info-box/index.d.ts

@@ -0,0 +1,2 @@
+export { InfoBox, InfoboxProps } from "./info-box";
+export { InfoBoxColor, InfoboxWidth } from "./types";

package/info-box/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InfoBox = void 0;
+var info_box_1 = require("./info-box");
+Object.defineProperty(exports, "InfoBox", { enumerable: true, get: function () { return info_box_1.InfoBox; } });

package/info-box/info-box.d.ts

@@ -0,0 +1,15 @@
+import React, { ReactNode } from "react";
+import { IconName } from "../icon/types";
+import { InfoBoxColor } from "./types";
+import IntrinsicElements = React.JSX.IntrinsicElements;
+export declare const getDefaultIconName: (color: InfoBoxColor) => IconName;
+export interface InfoboxProps {
+    action?: ReactNode;
+    className?: string;
+    color?: InfoBoxColor;
+    description: ReactNode;
+    icon?: IconName | false;
+    title?: ReactNode;
+    titleElement?: keyof Pick<IntrinsicElements, "p" | "h1" | "h2" | "h3" | "h4">;
+}
+export declare const InfoBox: React.ForwardRefExoticComponent<InfoboxProps & React.RefAttributes<HTMLDivElement>>;

package/info-box/info-box.js

@@ -0,0 +1,59 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InfoBox = exports.getDefaultIconName = void 0;
+const show_1 = require("@uxf/core-react/components/show");
+const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
+const react_1 = __importStar(require("react"));
+const icon_1 = require("../icon");
+const getDefaultIconName = (color) => {
+    switch (color) {
+        case "negative":
+            return "solid-octagon-xmark";
+        case "positive":
+            return "solid-badge-check";
+        case "warning":
+            return "solid-triangle-exclamation";
+        case "brand":
+        case "info":
+        case "neutral":
+        default:
+            return "solid-circle-info";
+    }
+};
+exports.getDefaultIconName = getDefaultIconName;
+exports.InfoBox = (0, react_1.forwardRef)((props, ref) => {
+    var _a, _b, _c;
+    const color = (_a = props.color) !== null && _a !== void 0 ? _a : "warning";
+    const Component = (_b = props.titleElement) !== null && _b !== void 0 ? _b : "p";
+    return (react_1.default.createElement("div", { className: `uxf-infobox uxf-infobox--${color} ${(_c = props.className) !== null && _c !== void 0 ? _c : ""}`, ref: ref },
+        props.icon !== false && react_1.default.createElement(icon_1.Icon, { name: props.icon || (0, exports.getDefaultIconName)(color) }),
+        react_1.default.createElement("div", { className: "uxf-infobox__text-wrapper" },
+            react_1.default.createElement(show_1.Show, { when: (0, is_not_nil_1.isNotNil)(props.title) },
+                react_1.default.createElement(Component, { className: "uxf-infobox__title" }, props.title)),
+            react_1.default.createElement("p", { className: "uxf-infobox__description" }, props.description)),
+        (0, is_not_nil_1.isNotNil)(props.action) && react_1.default.createElement("div", { className: "uxf-info-box__action" }, props.action)));
+});
+exports.InfoBox.displayName = "UxfUiInfoBox";

package/info-box/info-box.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/info-box/info-box.spec.js

@@ -0,0 +1,9 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const snap_test_1 = require("../utils/snap-test");
+const info_box_stories_1 = require("./info-box.stories");
+(0, snap_test_1.snapTest)("render stories", react_1.default.createElement(info_box_stories_1.Default, null));

package/info-box/info-box.stories.d.ts

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

package/info-box/info-box.stories.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = Default;
+const react_1 = __importDefault(require("react"));
+const button_1 = require("../button");
+const info_box_1 = require("./info-box");
+const TEXT = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus faucibus molestie nisl. Cras elementum.";
+function Default() {
+    return (react_1.default.createElement("div", { className: "space-y-4 p-4" },
+        react_1.default.createElement(info_box_1.InfoBox, { action: react_1.default.createElement(button_1.Button, { color: "warning", variant: "secondary" }, "Button"), color: "warning", description: TEXT, title: "Warning" }),
+        react_1.default.createElement(info_box_1.InfoBox, { action: react_1.default.createElement(button_1.Button, { color: "positive", variant: "secondary" }, "Button"), color: "positive", description: TEXT, title: "Positive" }),
+        react_1.default.createElement(info_box_1.InfoBox, { color: "negative", description: TEXT, title: "Negative" }),
+        react_1.default.createElement(info_box_1.InfoBox, { color: "info", description: TEXT, title: "Info" }),
+        react_1.default.createElement(info_box_1.InfoBox, { color: "brand", description: TEXT, title: "Brand" }),
+        react_1.default.createElement(info_box_1.InfoBox, { color: "neutral", description: TEXT, title: "Neutral" })));
+}

package/info-box/theme.d.ts

@@ -0,0 +1,15 @@
+export interface InfoBoxColors {
+    brand: true;
+    info: true;
+    negative: true;
+    neutral: true;
+    positive: true;
+    warning: true;
+}
+export interface InfoboxWidths {
+    xs: true;
+    sm: true;
+    default: true;
+    lg: true;
+    xl: true;
+}

package/info-box/theme.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/info-box/types.d.ts

@@ -0,0 +1,3 @@
+import { InfoBoxColors, InfoboxWidths } from "./theme";
+export type InfoBoxColor = keyof InfoBoxColors;
+export type InfoboxWidth = keyof InfoboxWidths;