@uxf/ui 11.74.0 → 11.74.1

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

@@ -0,0 +1,15 @@
+import { FC, ReactElement } from "react";
+import { ImageGalleryImageProps } from "../types";
+export interface GalleryProps {
+    closeButtonTitle?: string;
+    disableBackdropClose?: boolean;
+    onClose: () => void;
+    onNext: () => void;
+    onPrevious: () => void;
+    imageIndex: number;
+    images: ImageGalleryImageProps[];
+    prevButtonElement?: ReactElement;
+    nextButtonElement?: ReactElement;
+    closeButtonElement?: ReactElement;
+}
+export declare const Gallery: FC<GalleryProps>;

package/image-gallery/components/gallery.js

@@ -0,0 +1,80 @@
+"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.Gallery = void 0;
+const use_swipeable_1 = require("@uxf/core-react/swipeable/use-swipeable");
+const image_1 = require("@uxf/core/utils/image");
+const resizer_1 = require("@uxf/core/utils/resizer");
+const react_1 = __importStar(require("react"));
+const close_button_1 = require("./close-button");
+const dot_1 = require("./dot");
+const next_button_1 = require("./next-button");
+const prev_button_1 = require("./prev-button");
+const Gallery = (props) => {
+    var _a;
+    (0, react_1.useEffect)(() => {
+        const onKeyDown = (event) => {
+            switch (event.key) {
+                case "ArrowRight":
+                    props.onNext();
+                    break;
+                case "ArrowLeft":
+                    props.onPrevious();
+                    break;
+                case "Escape":
+                    props.onClose();
+                    break;
+            }
+        };
+        document.body.style.overflow = "hidden";
+        window.addEventListener("keydown", onKeyDown);
+        return () => {
+            document.body.style.overflow = "auto";
+            window.removeEventListener("keydown", onKeyDown);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const imageSrc = props.images[props.imageIndex].src;
+    const customContent = props.images[props.imageIndex].customContent;
+    const handlers = (0, use_swipeable_1.useSwipeable)({
+        onSwipedLeft: () => props.onNext(),
+        onSwipedRight: () => props.onPrevious(),
+        swipeDuration: 500,
+    });
+    return (react_1.default.createElement("div", { "aria-modal": true, className: "uxf-image-gallery", role: "dialog" },
+        react_1.default.createElement("div", { "aria-hidden": true, className: "uxf-image-gallery__backdrop", onClick: !props.disableBackdropClose ? props.onClose : undefined }),
+        react_1.default.createElement("div", { className: "uxf-image-gallery__close-button-wrapper" },
+            react_1.default.createElement(close_button_1.CloseButton, { buttonElement: props.closeButtonElement, onClick: props.onClose, text: props.closeButtonTitle })),
+        props.images.length > 1 && (react_1.default.createElement("div", { className: "uxf-image-gallery__buttons" },
+            react_1.default.createElement(prev_button_1.PrevButton, { buttonElement: props.prevButtonElement, onClick: props.onPrevious }),
+            react_1.default.createElement(next_button_1.NextButton, { buttonElement: props.nextButtonElement, onClick: props.onNext }))),
+        react_1.default.createElement("div", { className: "uxf-image-gallery__content", ...handlers },
+            react_1.default.createElement("div", { className: "uxf-image-gallery__inner" },
+                react_1.default.createElement("img", { alt: "", className: "uxf-image-gallery__image", src: typeof imageSrc === "string" ? imageSrc : ((_a = (0, resizer_1.resizerImageUrl)(imageSrc)) !== null && _a !== void 0 ? _a : "") }),
+                react_1.default.createElement("div", { className: "uxf-image-gallery__custom-content" }, customContent))),
+        props.images.length > 1 && (react_1.default.createElement("div", { className: "uxf-image-gallery__dots" }, props.images.map((image, index) => (react_1.default.createElement(dot_1.Dot, { active: index === props.imageIndex, key: (0, image_1.getImgUniqueIdentifier)(image.src) || index })))))));
+};
+exports.Gallery = Gallery;
+exports.Gallery.displayName = "UxfUiGallery";

package/image-gallery/components/next-button.d.ts

@@ -0,0 +1,7 @@
+import { FC, ReactElement } from "react";
+interface NextButtonProps {
+    onClick: () => void;
+    buttonElement?: ReactElement;
+}
+export declare const NextButton: FC<NextButtonProps>;
+export {};

package/image-gallery/components/next-button.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NextButton = void 0;
+const icon_1 = require("@uxf/ui/icon");
+const react_1 = __importDefault(require("react"));
+const NextButton = (props) => {
+    var _a;
+    return (react_1.default.createElement("button", { className: "uxf-image-gallery__button uxf-image-gallery__button--next", onClick: props.onClick }, (_a = props.buttonElement) !== null && _a !== void 0 ? _a : react_1.default.createElement(icon_1.Icon, { className: "uxf-image-gallery__button-icon", name: "chevronRight" })));
+};
+exports.NextButton = NextButton;
+exports.NextButton.displayName = "UxfUiNextButton";

package/image-gallery/components/prev-button.d.ts

@@ -0,0 +1,7 @@
+import { FC, ReactElement } from "react";
+interface PrevButtonProps {
+    onClick: () => void;
+    buttonElement?: ReactElement;
+}
+export declare const PrevButton: FC<PrevButtonProps>;
+export {};

package/image-gallery/components/prev-button.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PrevButton = void 0;
+const icon_1 = require("@uxf/ui/icon");
+const react_1 = __importDefault(require("react"));
+const PrevButton = (props) => {
+    var _a;
+    return (react_1.default.createElement("button", { className: "uxf-image-gallery__button uxf-image-gallery__button--prev", onClick: props.onClick }, (_a = props.buttonElement) !== null && _a !== void 0 ? _a : react_1.default.createElement(icon_1.Icon, { className: "uxf-image-gallery__button-icon", name: "chevronLeft" })));
+};
+exports.PrevButton = PrevButton;
+exports.PrevButton.displayName = "UxfUiPrevButton";

package/image-gallery/context.d.ts

@@ -0,0 +1,9 @@
+import { ImageGalleryImageProps } from "./types";
+type ContextType = {
+    registerImage: (props: ImageGalleryImageProps) => void;
+    unregisterImage: (props: ImageGalleryImageProps) => void;
+    openGallery: (props: ImageGalleryImageProps) => void;
+};
+export declare const ImageGalleryProvider: import("react").Provider<ContextType>;
+export declare const useImageGalleryContext: () => ContextType;
+export {};

package/image-gallery/context.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useImageGalleryContext = exports.ImageGalleryProvider = void 0;
+const react_1 = require("react");
+const ImageGalleryContext = (0, react_1.createContext)({
+    registerImage: () => null,
+    unregisterImage: () => null,
+    openGallery: () => null,
+});
+exports.ImageGalleryProvider = ImageGalleryContext.Provider;
+const useImageGalleryContext = () => (0, react_1.useContext)(ImageGalleryContext);
+exports.useImageGalleryContext = useImageGalleryContext;

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

@@ -0,0 +1,14 @@
+import { FC, ReactElement, ReactNode } from "react";
+import { GalleryProps } from "./components/gallery";
+export interface ImageGalleryProps {
+    children: ReactNode;
+    closeButtonTitle?: string;
+    disableBackdropClose?: GalleryProps["disableBackdropClose"];
+    prevButtonElement?: ReactElement;
+    nextButtonElement?: ReactElement;
+    closeButtonElement?: ReactElement;
+}
+/**
+ * @deprecated use `Lightbox` instead
+ */
+export declare const ImageGallery: FC<ImageGalleryProps>;

package/image-gallery/image-gallery.js

@@ -0,0 +1,58 @@
+"use strict";
+"use client";
+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.ImageGallery = void 0;
+const react_1 = __importStar(require("react"));
+const gallery_1 = require("./components/gallery");
+const context_1 = require("./context");
+/**
+ * @deprecated use `Lightbox` instead
+ */
+const ImageGallery = (props) => {
+    const [images, setImages] = (0, react_1.useState)([]);
+    const [imageIndex, setImageIndex] = (0, react_1.useState)(null);
+    const registerImage = (0, react_1.useCallback)((image) => setImages((v) => [...v, image]), []);
+    const unregisterImage = (0, react_1.useCallback)((image) => setImages((v) => v.filter((u) => u.src !== image.src)), []);
+    const openGallery = (0, react_1.useCallback)((image) => setImageIndex(images.findIndex((i) => i.src === image.src)), [images]);
+    const onPrevious = (0, react_1.useCallback)(() => {
+        setImageIndex((v) => (v === null ? null : v - 1));
+    }, []);
+    const onNext = (0, react_1.useCallback)(() => {
+        setImageIndex((v) => (v === null ? null : v + 1));
+    }, []);
+    // modulo bug https://stackoverflow.com/a/4467559
+    const moduloImageIndex = imageIndex === null
+        ? null
+        : imageIndex < 0
+            ? ((imageIndex % images.length) + images.length) % images.length
+            : imageIndex % images.length;
+    const contextValue = { registerImage, unregisterImage, openGallery };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(context_1.ImageGalleryProvider, { value: contextValue }, props.children),
+        typeof moduloImageIndex === "number" && (react_1.default.createElement(gallery_1.Gallery, { closeButtonElement: props.closeButtonElement, closeButtonTitle: props.closeButtonTitle, disableBackdropClose: props.disableBackdropClose, imageIndex: moduloImageIndex, images: images, nextButtonElement: props.nextButtonElement, onClose: () => setImageIndex(null), onNext: onNext, onPrevious: onPrevious, prevButtonElement: props.prevButtonElement }))));
+};
+exports.ImageGallery = ImageGallery;
+exports.ImageGallery.displayName = "UxfUiImageGallery";

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

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

package/image-gallery/image-gallery.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 image_gallery_stories_1 = require("./image-gallery.stories");
+(0, snap_test_1.snapTest)("render stories", react_1.default.createElement(image_gallery_stories_1.Default, null));

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

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

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

@@ -0,0 +1,36 @@
+"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 image_1 = require("@uxf/core/utils/image");
+const react_1 = __importDefault(require("react"));
+const icon_1 = require("../icon");
+const index_1 = require("./index");
+const images = [
+    { src: "https://opentopo.app/hero_image.jpeg", title: "Obr. 1" },
+    {
+        src: "https://opentopo.app/generated/area-18/d/9/d9033d93-ea48-4f66-b0c1-6045c091b326_1024_1024_c.jpg",
+        title: "Obr. 2",
+    },
+    {
+        src: "https://opentopo.app/generated/area-16/f/4/f4a4ca79-ea9e-44d1-a4ec-3c8ccfbcc218_1024_1024_c.jpg",
+        title: "Obr. 3",
+    },
+    {
+        src: "https://opentopo.app/generated/area-1/8/b/8b84e378-1f55-4ce7-b750-b504091cb833_1024_1024_c.jpg",
+        title: "Obr. 4",
+    },
+    {
+        src: "https://opentopo.app/generated/area-2/e/7/e7ec532b-20c2-407e-9305-fa7cfb71f01f_1024_1024_c.jpg",
+        title: "Obr. 5",
+    },
+];
+const nextButtonElement = react_1.default.createElement(icon_1.Icon, { className: "uxf-image-gallery__button-icon", name: "chevronRight" });
+const prevButtonElement = react_1.default.createElement(icon_1.Icon, { className: "uxf-image-gallery__button-icon", name: "chevronLeft" });
+const closeButtonElement = react_1.default.createElement(icon_1.Icon, { className: "uxf-image-gallery__button-icon", name: "xmarkLarge" });
+function Default() {
+    return (react_1.default.createElement(index_1.ImageGallery, { closeButtonElement: closeButtonElement, nextButtonElement: nextButtonElement, prevButtonElement: prevButtonElement },
+        react_1.default.createElement("div", { className: "flex-direction flex gap-2" }, images.map((image, index) => (react_1.default.createElement(index_1.ImageGallery.Image, { className: "size-56 cursor-pointer object-cover transition-transform hover:scale-105", customContent: image.title, key: (0, image_1.getImgUniqueIdentifier)(image.src) || index, src: image.src }))))));
+}

package/image-gallery/image.d.ts

@@ -0,0 +1,3 @@
+import { ImageGalleryImageProps } from "@uxf/ui/image-gallery/types";
+import { FC } from "react";
+export declare const Image: FC<ImageGalleryImageProps>;

package/image-gallery/image.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Image = void 0;
+const resizer_1 = require("@uxf/core/utils/resizer");
+const react_1 = __importDefault(require("react"));
+const use_image_1 = require("./use-image");
+const Image = (props) => {
+    var _a;
+    const openGallery = (0, use_image_1.useImage)(props);
+    return (
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions
+    react_1.default.createElement("img", { alt: props.alt, className: props.className, onClick: openGallery, src: typeof props.src === "string" ? props.src : ((_a = (0, resizer_1.resizerImageUrl)(props.src)) !== null && _a !== void 0 ? _a : ""), title: props.title }));
+};
+exports.Image = Image;
+exports.Image.displayName = "UxfUiImageGalleryImage";

package/image-gallery/index.d.ts

@@ -0,0 +1,5 @@
+export { useImage } from "./use-image";
+export declare const ImageGallery: import("react").FC<import("./image-gallery").ImageGalleryProps> & {
+    Image: import("react").FC<import("./types").ImageGalleryImageProps>;
+};
+export type { ImageGalleryImageProps } from "./types";

package/image-gallery/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageGallery = exports.useImage = void 0;
+const image_1 = require("./image");
+const image_gallery_1 = require("./image-gallery");
+var use_image_1 = require("./use-image");
+Object.defineProperty(exports, "useImage", { enumerable: true, get: function () { return use_image_1.useImage; } });
+exports.ImageGallery = Object.assign(image_gallery_1.ImageGallery, { Image: image_1.Image });

package/image-gallery/translations.d.ts

@@ -0,0 +1,11 @@
+declare const _default: {
+    "uxf-ui-image-gallery": {
+        "close-button": {
+            cs: string;
+            en: string;
+            sk: string;
+            de: string;
+        };
+    };
+};
+export default _default;

package/image-gallery/translations.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    "uxf-ui-image-gallery": {
+        "close-button": {
+            cs: "Zavřít",
+            en: "Close",
+            sk: "Zatvoriť",
+            de: "Schließen",
+        },
+    },
+};

package/image-gallery/types.d.ts

@@ -0,0 +1,9 @@
+import { ImageSource } from "@uxf/core/utils/resizer";
+import { ReactNode } from "react";
+export interface ImageGalleryImageProps {
+    alt?: string;
+    className?: string;
+    customContent?: ReactNode;
+    src: ImageSource;
+    title?: string;
+}

package/image-gallery/types.js

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

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

@@ -0,0 +1,2 @@
+import { ImageGalleryImageProps } from "./types";
+export declare function useImage(props: ImageGalleryImageProps): () => void;

package/image-gallery/use-image.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useImage = useImage;
+const use_on_mount_1 = require("@uxf/core-react/hooks/use-on-mount");
+const react_1 = require("react");
+const context_1 = require("./context");
+function useImage(props) {
+    const { registerImage, unregisterImage, openGallery } = (0, context_1.useImageGalleryContext)();
+    (0, use_on_mount_1.useOnMount)(() => {
+        registerImage(props);
+        return () => {
+            unregisterImage(props);
+        };
+    });
+    return (0, react_1.useCallback)(() => openGallery(props), [props, openGallery]);
+}

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 {
+    actionElement?: 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,61 @@
+"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_nil_1 = require("@uxf/core/utils/is-nil");
+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-info-box uxf-info-box--${color} ${(0, is_nil_1.isNil)(props.description) || (0, is_nil_1.isNil)(props.title) ? "uxf-info-box--centered" : ""} ${(_c = props.className) !== null && _c !== void 0 ? _c : ""}`, ref: ref },
+        props.icon !== false && (react_1.default.createElement(icon_1.Icon, { className: "uxf-info-box__icon", name: props.icon || (0, exports.getDefaultIconName)(color) })),
+        react_1.default.createElement("div", { className: "uxf-info-box__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-info-box__title" }, props.title)),
+            react_1.default.createElement(show_1.Show, { when: (0, is_not_nil_1.isNotNil)(props.description) },
+                react_1.default.createElement("div", { className: "uxf-info-box__description" }, props.description))),
+        (0, is_not_nil_1.isNotNil)(props.actionElement) && (react_1.default.createElement("div", { className: "uxf-info-box__action-component" }, props.actionElement))));
+});
+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,20 @@
+"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, { actionElement: 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, { actionElement: react_1.default.createElement(button_1.Button, { color: "positive", variant: "secondary" }, "Button"), color: "positive", title: "Positive no description" }),
+        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" }),
+        react_1.default.createElement(info_box_1.InfoBox, { color: "neutral", description: "Neutral no title" })));
+}

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;

package/info-box/types.js

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

package/input/index.d.ts

@@ -0,0 +1,14 @@
+import { InputArrowIcon } from "./input-arrow-icon";
+export type { InputProps } from "./input";
+export type { InputElementProps } from "./input-element";
+export type { InputRemoveButtonProps } from "./input-remove-button";
+export type { InputGroupSize, InputGroupVariant } from "./theme";
+export declare const Input: import("react").ForwardRefExoticComponent<import("./input").InputProps & import("react").RefAttributes<HTMLInputElement>> & {
+    ArrowIcon: typeof InputArrowIcon;
+    Element: import("react").ForwardRefExoticComponent<import("./input-element").InputElementProps & import("react").RefAttributes<HTMLInputElement>>;
+    LeftAddon: import("react").FC<import("./input-left-addon").InputLeftAddonProps>;
+    LeftElement: import("react").FC<import("./input-left-element").InputLeftElementProps>;
+    RemoveButton: import("react").FC<import("./input-remove-button").InputRemoveButtonProps>;
+    RightAddon: import("react").FC<import("./input-right-addon").InputRightAddonProps>;
+    RightElement: import("react").FC<import("./input-right-element").InputRightElementProps>;
+};

package/input/index.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Input = void 0;
+const input_1 = require("./input");
+const input_arrow_icon_1 = require("./input-arrow-icon");
+const input_element_1 = require("./input-element");
+const input_left_addon_1 = require("./input-left-addon");
+const input_left_element_1 = require("./input-left-element");
+const input_remove_button_1 = require("./input-remove-button");
+const input_right_addon_1 = require("./input-right-addon");
+const input_right_element_1 = require("./input-right-element");
+exports.Input = Object.assign(input_1.Input, {
+    ArrowIcon: input_arrow_icon_1.InputArrowIcon,
+    Element: input_element_1.InputElement,
+    LeftAddon: input_left_addon_1.InputLeftAddon,
+    LeftElement: input_left_element_1.InputLeftElement,
+    RemoveButton: input_remove_button_1.InputRemoveButton,
+    RightAddon: input_right_addon_1.InputRightAddon,
+    RightElement: input_right_element_1.InputRightElement,
+});

package/input/input-arrow-icon.d.ts

@@ -0,0 +1,8 @@
+import { IconsSet } from "@uxf/ui/icon";
+import React from "react";
+interface Props {
+    iconName?: keyof IconsSet;
+    isOpen: boolean;
+}
+export declare function InputArrowIcon(props: Props): React.JSX.Element;
+export {};

package/input/input-arrow-icon.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputArrowIcon = InputArrowIcon;
+const classes_1 = require("@uxf/core/constants/classes");
+const cx_1 = require("@uxf/core/utils/cx");
+const icon_1 = require("@uxf/ui/icon");
+const react_1 = __importDefault(require("react"));
+function InputArrowIcon(props) {
+    var _a;
+    const iconName = (_a = props.iconName) !== null && _a !== void 0 ? _a : "caretDown";
+    return react_1.default.createElement(icon_1.Icon, { className: (0, cx_1.cx)("uxf-input__arrow-icon", props.isOpen && classes_1.CLASSES.IS_OPEN), name: iconName });
+}