@openuidev/react-ui 0.9.16

package/dist/components/ImageBlock/dependencies.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dependencies.js","sourceRoot":"","sources":["../../../src/components/ImageBlock/dependencies.ts"],"names":[],"mappings":"AAAA,MAAM,YAAY,GAAG,CAAC,YAAY,CAAC,CAAC;AACpC,eAAe,YAAY,CAAC"}

package/dist/components/ImageBlock/imageBlock.css

@@ -0,0 +1 @@
+.openui-image-block-wrapper{height:240px;display:flex;justify-content:center;align-items:center;position:relative;isolation:isolate;border-radius:var(--openui-radius-2xl, 14px);padding:calc(var(--openui-space-l, 18px) - 2px) calc(var(--openui-space-l, 18px) + 2px);overflow:hidden}.openui-image-block-wrapper::before{content:"";position:absolute;inset:-20px;background-image:var(--bg-image);background-size:150%;background-position:center;background-repeat:no-repeat;opacity:.2;filter:blur(12px);z-index:0;border-radius:inherit}.openui-image-block-wrapper--mobile{height:auto;width:100%;padding:0}.openui-image-block-wrapper--error{visibility:hidden}.openui-image-block-image{height:100%;object-fit:cover;border:4px solid var(--openui-border-default, oklch(9.7% 0 0deg / 0.06));border-radius:var(--openui-radius-l, 10px);position:relative;z-index:1}.openui-image-block-image--mobile{border-radius:var(--openui-radius-2xl, 14px);width:100%;height:auto}.openui-image-block-image--error{visibility:hidden}.openui-image-block-loader{position:absolute;left:50%;top:50%;translate:-50% -50%;border-width:3px;border-style:solid;height:24px;width:24px;animation:openui-image-block-spin 1s linear infinite;border-radius:var(--openui-radius-full, 9999px);border-color:#d1d5db;border-top-color:#2563eb;z-index:2}@keyframes openui-image-block-spin{to{transform:rotate(360deg)}}

package/dist/components/ImageBlock/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./ImageBlock";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ImageBlock/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ImageBlock/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/dist/components/ImageBlock/index.js

@@ -0,0 +1,2 @@
+export * from "./ImageBlock";
+//# sourceMappingURL=index.js.map

package/dist/components/ImageBlock/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ImageBlock/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/dist/components/ImageBlock/stories/ImageBlock.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { ImageBlock } from "../ImageBlock";
+declare const meta: Meta<typeof ImageBlock>;
+export default meta;
+type Story = StoryObj<typeof ImageBlock>;
+export declare const Default: Story;
+export declare const Mobile: Story;
+export declare const Loading: Story;
+export declare const Error: Story;
+//# sourceMappingURL=ImageBlock.stories.d.ts.map

package/dist/components/ImageBlock/stories/ImageBlock.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageBlock.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/ImageBlock/stories/ImageBlock.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CA6BjC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAC;AAKzC,eAAO,MAAM,OAAO,EAAE,KAYrB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAYpB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAarB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAYnB,CAAC"}

package/dist/components/ImageBlock/stories/ImageBlock.stories.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ImageBlock } from "../ImageBlock";
+const meta = {
+    title: "Components/ImageBlock",
+    component: ImageBlock,
+    tags: ["autodocs"],
+    parameters: {
+        docs: {
+            description: {
+                component: "```tsx\nimport { ImageBlock } from '@openuidev/react-ui';\n```\n\nA hero/showcase image with a blurred backdrop effect, responsive sizing, and loading/error states.",
+            },
+        },
+    },
+    argTypes: {
+        src: {
+            control: "text",
+            description: "Image source URL",
+            table: { category: "Content" },
+        },
+        alt: {
+            control: "text",
+            description: "Alternative text for the image",
+            table: { category: "Content" },
+        },
+        className: {
+            control: false,
+            description: "Additional CSS classes",
+            table: { category: "Styling" },
+        },
+    },
+};
+export default meta;
+const sampleImage = "https://images.unsplash.com/photo-1738168246881-40f35f8aba0a?w=800&auto=format&fit=crop&q=60";
+export const Default = {
+    args: {
+        src: sampleImage,
+        alt: "Sample landscape",
+    },
+    decorators: [
+        (Story) => (_jsx("div", { style: { maxWidth: 600, margin: "auto" }, children: _jsx(Story, {}) })),
+    ],
+};
+export const Mobile = {
+    args: {
+        src: sampleImage,
+        alt: "Mobile view",
+    },
+    decorators: [
+        (Story) => (_jsx("div", { style: { maxWidth: 320, margin: "auto" }, children: _jsx(Story, {}) })),
+    ],
+};
+export const Loading = {
+    args: {
+        src: sampleImage,
+        alt: "Loading state",
+        imageLoading: true,
+    },
+    decorators: [
+        (Story) => (_jsx("div", { style: { maxWidth: 600, margin: "auto" }, children: _jsx(Story, {}) })),
+    ],
+};
+export const Error = {
+    args: {
+        src: "https://invalid-url-that-will-fail.example/image.jpg",
+        alt: "Broken image",
+    },
+    decorators: [
+        (Story) => (_jsx("div", { style: { maxWidth: 600, margin: "auto" }, children: _jsx(Story, {}) })),
+    ],
+};
+//# sourceMappingURL=ImageBlock.stories.js.map

package/dist/components/ImageBlock/stories/ImageBlock.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageBlock.stories.js","sourceRoot":"","sources":["../../../../src/components/ImageBlock/stories/ImageBlock.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,MAAM,IAAI,GAA4B;IACpC,KAAK,EAAE,uBAAuB;IAC9B,SAAS,EAAE,UAAU;IACrB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,WAAW,EAAE;gBACX,SAAS,EACP,sKAAsK;aACzK;SACF;KACF;IACD,QAAQ,EAAE;QACR,GAAG,EAAE;YACH,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,kBAAkB;YAC/B,KAAK,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE;SAC/B;QACD,GAAG,EAAE;YACH,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,gCAAgC;YAC7C,KAAK,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE;SAC/B;QACD,SAAS,EAAE;YACT,OAAO,EAAE,KAAK;YACd,WAAW,EAAE,wBAAwB;YACrC,KAAK,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE;SAC/B;KACF;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAGpB,MAAM,WAAW,GACf,8FAA8F,CAAC;AAEjG,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,GAAG,EAAE,WAAW;QAChB,GAAG,EAAE,kBAAkB;KACxB;IACD,UAAU,EAAE;QACV,CAAC,KAAK,EAAE,EAAE,CAAC,CACT,cAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,YAC3C,KAAC,KAAK,KAAG,GACL,CACP;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAU;IAC3B,IAAI,EAAE;QACJ,GAAG,EAAE,WAAW;QAChB,GAAG,EAAE,aAAa;KACnB;IACD,UAAU,EAAE;QACV,CAAC,KAAK,EAAE,EAAE,CAAC,CACT,cAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,YAC3C,KAAC,KAAK,KAAG,GACL,CACP;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,GAAG,EAAE,WAAW;QAChB,GAAG,EAAE,eAAe;QACpB,YAAY,EAAE,IAAI;KACnB;IACD,UAAU,EAAE;QACV,CAAC,KAAK,EAAE,EAAE,CAAC,CACT,cAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,YAC3C,KAAC,KAAK,KAAG,GACL,CACP;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAU;IAC1B,IAAI,EAAE;QACJ,GAAG,EAAE,sDAAsD;QAC3D,GAAG,EAAE,cAAc;KACpB;IACD,UAAU,EAAE;QACV,CAAC,KAAK,EAAE,EAAE,CAAC,CACT,cAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,YAC3C,KAAC,KAAK,KAAG,GACL,CACP;KACF;CACF,CAAC"}

package/dist/components/ImageGallery/GalleryModal.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { ImageItem } from "./ImageGallery";
+export interface GalleryModalProps {
+    images: ImageItem[];
+    selectedImageIndex: number;
+    setSelectedImageIndex: (index: number) => void;
+    onClose: () => void;
+}
+export declare const GalleryModal: React.FC<GalleryModalProps>;
+//# sourceMappingURL=GalleryModal.d.ts.map

package/dist/components/ImageGallery/GalleryModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GalleryModal.d.ts","sourceRoot":"","sources":["../../../src/components/ImageGallery/GalleryModal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAIxE,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,qBAAqB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA2KpD,CAAC"}

package/dist/components/ImageGallery/GalleryModal.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { ChevronLeft, ChevronRight, X } from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { IconButton } from "../IconButton";
+import { useTheme } from "../ThemeProvider";
+export const GalleryModal = ({ images, selectedImageIndex, setSelectedImageIndex, onClose, }) => {
+    const [scrollButtons, setScrollButtons] = useState({ showLeft: false, showRight: false });
+    const carouselRef = useRef(null);
+    const modalContentRef = useRef(null);
+    const { portalThemeClassName } = useTheme();
+    // Check if scrolling is needed
+    const checkScroll = useCallback(() => {
+        if (!carouselRef.current)
+            return;
+        const container = carouselRef.current;
+        setScrollButtons({
+            showLeft: container.scrollLeft > 0,
+            showRight: container.scrollLeft + container.offsetWidth < container.scrollWidth,
+        });
+    }, []);
+    useEffect(() => {
+        if (!carouselRef.current) {
+            return;
+        }
+        const container = carouselRef.current;
+        // Initial check
+        checkScroll();
+        const resizeObserver = new ResizeObserver(checkScroll);
+        resizeObserver.observe(container);
+        container.addEventListener("scroll", checkScroll);
+        return () => {
+            container.removeEventListener("scroll", checkScroll);
+            resizeObserver.disconnect();
+        };
+    }, [checkScroll]);
+    // Handle modal lifecycle events (scroll lock, close on escape, close on outside click)
+    useEffect(() => {
+        // Disable body scroll
+        document.body.style.overflow = "hidden";
+        const handleKeyDown = (e) => {
+            if (e.key === "Escape") {
+                onClose();
+            }
+        };
+        const handleOutsideClick = (e) => {
+            if (modalContentRef.current && !modalContentRef.current.contains(e.target)) {
+                onClose();
+            }
+        };
+        document.addEventListener("keydown", handleKeyDown);
+        document.addEventListener("mousedown", handleOutsideClick);
+        // Cleanup
+        return () => {
+            document.body.style.overflow = "auto";
+            document.removeEventListener("keydown", handleKeyDown);
+            document.removeEventListener("mousedown", handleOutsideClick);
+        };
+    }, [onClose]);
+    const scroll = (direction) => {
+        if (carouselRef.current) {
+            const container = carouselRef.current;
+            const containerRect = container.getBoundingClientRect();
+            const scrollAmount = containerRect.width * 0.28;
+            if (direction === "left") {
+                container.scrollBy({
+                    left: -scrollAmount,
+                    behavior: "smooth",
+                });
+            }
+            else {
+                container.scrollBy({
+                    left: scrollAmount,
+                    behavior: "smooth",
+                });
+            }
+        }
+    };
+    // Memoize thumbnail click handler
+    const handleThumbnailClick = useCallback((index) => () => setSelectedImageIndex(index), [setSelectedImageIndex]);
+    return createPortal(_jsx("div", { className: clsx("openui-gallery__modal", portalThemeClassName), children: _jsxs("div", { className: "openui-gallery__modal-content", ref: modalContentRef, children: [_jsxs("div", { className: "openui-gallery__modal-header", children: [_jsx("span", { className: "openui-gallery__modal-heading", children: "All Photos" }), _jsx(IconButton, { size: "small", variant: "secondary", icon: _jsx(X, {}), onClick: onClose })] }), _jsx("div", { className: "openui-gallery__modal-main", children: _jsx("img", { src: images[selectedImageIndex]?.src, alt: images[selectedImageIndex]?.alt || `Gallery image ${selectedImageIndex + 1}` }) }), _jsxs("div", { className: "openui-gallery__modal-carousel-container", children: [scrollButtons.showLeft && (_jsx("div", { className: clsx("openui-gallery__modal-carousel-button-container", "openui-gallery__modal-carousel-button-container-left"), children: _jsx(IconButton, { className: clsx("openui-gallery__carousel-button", "openui-gallery__carousel-button--left"), onClick: () => scroll("left"), "aria-label": "Scroll images left", icon: _jsx(ChevronLeft, {}), variant: "secondary", size: "extra-small" }) })), _jsx("div", { className: "openui-gallery__modal-carousel", ref: carouselRef, children: images.map((image, index) => (_jsx("div", { className: clsx("openui-gallery__modal-thumbnail", index === selectedImageIndex && "openui-gallery__modal-thumbnail--active"), onClick: handleThumbnailClick(index), children: _jsx("img", { src: image.src, alt: image.alt || `Gallery thumbnail ${index + 1}` }) }, index))) }), scrollButtons.showRight && (_jsx("div", { className: clsx("openui-gallery__modal-carousel-button-container", "openui-gallery__modal-carousel-button-container-right"), children: _jsx(IconButton, { className: clsx("openui-gallery__carousel-button", "openui-gallery__carousel-button--right"), onClick: () => scroll("right"), "aria-label": "Scroll images right", icon: _jsx(ChevronRight, {}), variant: "secondary", size: "extra-small" }) }))] })] }) }), document.body);
+};
+//# sourceMappingURL=GalleryModal.js.map

package/dist/components/ImageGallery/GalleryModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GalleryModal.js","sourceRoot":"","sources":["../../../src/components/ImageGallery/GalleryModal.tsx"],"names":[],"mappings":"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"}

package/dist/components/ImageGallery/ImageGallery.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+export interface ImageItem {
+    src: string;
+    alt?: string;
+    details?: string;
+}
+export interface OpenUIGalleryProps {
+    images: ImageItem[];
+}
+export declare const ImageGallery: React.FC<OpenUIGalleryProps>;
+//# sourceMappingURL=ImageGallery.d.ts.map

package/dist/components/ImageGallery/ImageGallery.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageGallery.d.ts","sourceRoot":"","sources":["../../../src/components/ImageGallery/ImageGallery.tsx"],"names":[],"mappings":"AACA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAI9D,MAAM,WAAW,SAAS;IACxB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,SAAS,EAAE,CAAC;CACrB;AAkBD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA0DrD,CAAC"}

package/dist/components/ImageGallery/ImageGallery.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useCallback, useMemo, useState } from "react";
+import { Button } from "../Button";
+import { GalleryModal } from "./GalleryModal";
+const MAX_GRID_IMAGES = 5;
+const getLayoutClassName = (imageCount) => {
+    switch (imageCount) {
+        case 1:
+            return "openui-gallery--single";
+        case 2:
+            return "openui-gallery--double";
+        case 3:
+            return "openui-gallery--triple";
+        case 4:
+            return "openui-gallery--quad";
+        default:
+            return "openui-gallery--default";
+    }
+};
+export const ImageGallery = ({ images }) => {
+    const [showAll, setShowAll] = useState(false);
+    const [selectedImageIndex, setSelectedImageIndex] = useState(0);
+    // Memoize layout class to prevent recalculation
+    const layoutClass = useMemo(() => getLayoutClassName(images.length), [images.length]);
+    // Memoize whether to show button
+    const shouldShowButton = useMemo(() => images.length > MAX_GRID_IMAGES, [images.length]);
+    // Memoize visible images
+    const visibleImages = useMemo(() => images.slice(0, MAX_GRID_IMAGES), [images]);
+    // Memoize callbacks
+    const toggleShowAll = useCallback(() => {
+        setShowAll((prev) => !prev);
+    }, []);
+    const handleImageClick = useCallback((index) => {
+        setSelectedImageIndex(index);
+        setShowAll(true);
+    }, []);
+    const setSelectedImageIndexMemoized = useCallback((index) => {
+        setSelectedImageIndex(index);
+    }, []);
+    return (_jsxs("div", { className: clsx("openui-gallery", layoutClass), children: [_jsxs("div", { className: "openui-gallery__grid", children: [visibleImages.map((image, index) => (_jsx("div", { className: clsx("openui-gallery__image", index === 0 && "openui-gallery__image--main"), onClick: () => handleImageClick(index), children: _jsx("img", { src: image.src, alt: image.alt || `Gallery image ${index + 1}` }) }, index))), shouldShowButton && (_jsx("div", { className: "openui-gallery__show-all-button", children: _jsx(Button, { variant: "primary", size: "small", onClick: toggleShowAll, children: "Show All" }) }))] }), showAll && (_jsx(GalleryModal, { images: images, selectedImageIndex: selectedImageIndex, setSelectedImageIndex: setSelectedImageIndexMemoized, onClose: toggleShowAll }))] }));
+};
+//# sourceMappingURL=ImageGallery.js.map

package/dist/components/ImageGallery/ImageGallery.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageGallery.js","sourceRoot":"","sources":["../../../src/components/ImageGallery/ImageGallery.tsx"],"names":[],"mappings":"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"}

package/dist/components/ImageGallery/imageGallery.css

@@ -0,0 +1 @@
+.openui-gallery{display:flex;flex-direction:column;width:100%;overflow:hidden;position:relative;border-radius:var(--openui-radius-m, 8px)}.openui-gallery__grid{display:grid;width:100%;max-height:376px;grid-gap:var(--openui-space-s, 8px)}.openui-gallery--single .openui-gallery__grid{grid-template-columns:1fr}.openui-gallery--double .openui-gallery__grid{grid-template-columns:repeat(2, 1fr)}.openui-gallery--triple .openui-gallery__grid{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}.openui-gallery--triple .openui-gallery__grid .openui-gallery__image:first-child{grid-row:1/-1}.openui-gallery--quad .openui-gallery__grid{grid-template-columns:repeat(4, 1fr);grid-template-rows:repeat(2, 1fr);grid-template-areas:"img1 img1 img2 img2 " "img1 img1 img3 img4"}.openui-gallery--quad .openui-gallery__grid .openui-gallery__image:nth-child(1){grid-area:img1}.openui-gallery--quad .openui-gallery__grid .openui-gallery__image:nth-child(2){grid-area:img2}.openui-gallery--quad .openui-gallery__grid .openui-gallery__image:nth-child(3){grid-area:img3}.openui-gallery--quad .openui-gallery__grid .openui-gallery__image:nth-child(4){grid-area:img4}.openui-gallery--default .openui-gallery__grid{grid-template-columns:2fr 1fr 1fr;grid-template-rows:1fr 1fr}.openui-gallery--default .openui-gallery__grid .openui-gallery__image:first-child{grid-row:1/-1}.openui-gallery__image{position:relative;overflow:hidden}.openui-gallery__image img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}.openui-gallery__image img:hover{transform:scale(1.05)}.openui-gallery__image--main img{height:100%}.openui-gallery__show-all-button{display:flex;align-items:center;justify-content:center;position:absolute;bottom:5px;right:5px}.openui-gallery__modal{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;z-index:1000;animation:fadeIn .3s ease;backdrop-filter:blur(3px);background-color:var(--openui-overlay, oklch(0% 0 0deg / 0.4))}.openui-gallery__modal-content{width:calc(100% - 80px);height:calc(100% - 80px);max-width:720px;max-height:640px;overflow:hidden;display:flex;flex-direction:column;box-sizing:border-box;border:1px solid var(--openui-border-default, oklch(9.7% 0 0deg / 0.06));background-color:var(--openui-foreground, oklch(99.4% 0 89.876deg));border-radius:var(--openui-radius-xl, 12px);gap:var(--openui-space-xl, 24px);padding-top:var(--openui-space-xl, 24px);padding-bottom:var(--openui-space-xl, 24px)}.openui-gallery__modal-header{display:flex;align-items:center;justify-content:space-between;padding-left:var(--openui-space-xl, 24px);padding-right:var(--openui-space-xl, 24px)}.openui-gallery__modal-heading{font:var(--openui-text-heading-xs);letter-spacing:var(--openui-text-heading-xs-letter-spacing);color:var(--openui-text-neutral-primary, oklch(9.7% 0 0deg))}.openui-gallery__modal-main{flex:1;min-height:0;display:flex;justify-content:center;align-items:center;padding-left:var(--openui-space-xl, 24px);padding-right:var(--openui-space-xl, 24px)}.openui-gallery__modal-main img{max-width:100%;max-height:100%;object-fit:contain;border-radius:var(--openui-radius-s, 6px)}.openui-gallery__modal-main:hover .openui-gallery__modal-details{display:flex}.openui-gallery__modal-carousel-container{position:relative;display:flex;align-items:center;justify-content:center;width:100%}.openui-gallery__modal-carousel{display:flex;gap:var(--openui-space-s, 8px);overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;padding-left:var(--openui-space-xl, 24px);padding-right:var(--openui-space-xl, 24px)}.openui-gallery__modal-carousel::-webkit-scrollbar{display:none}.openui-gallery__modal-carousel-button-container{position:absolute;top:50%;transform:translateY(-50%);z-index:1;display:flex;align-items:center;justify-content:center;background-color:var(--openui-foreground, oklch(99.4% 0 89.876deg));border-radius:var(--openui-radius-xs, 4px);overflow:hidden}.openui-gallery__modal-carousel-button-container-left{left:24px}.openui-gallery__modal-carousel-button-container-right{right:24px}.openui-gallery__modal-thumbnail{flex:1;height:116px;min-width:174px;cursor:pointer;opacity:.6;border-radius:var(--openui-radius-s, 6px);border:1px solid rgba(0,0,0,0);overflow:hidden;transition:opacity .2s ease;box-sizing:border-box}.openui-gallery__modal-thumbnail:hover{opacity:.8}.openui-gallery__modal-thumbnail--active{opacity:1;border-color:var(--openui-border-interactive-selected, oklch(9.7% 0 0deg));border-radius:var(--openui-radius-s, 6px)}.openui-gallery__modal-thumbnail img{width:100%;height:100%;object-fit:cover}@media(max-width: 768px){.openui-gallery--default .openui-gallery__grid{grid-template-columns:repeat(6, 1fr);grid-template-rows:repeat(2, 1fr);grid-template-areas:"img1 img1 img1  img2 img2 img2 " "img3 img3 img4  img4 img5 img5"}.openui-gallery--default .openui-gallery__grid .openui-gallery__image:nth-child(1){grid-area:img1}.openui-gallery--default .openui-gallery__grid .openui-gallery__image:nth-child(2){grid-area:img2}.openui-gallery--default .openui-gallery__grid .openui-gallery__image:nth-child(3){grid-area:img3}.openui-gallery--default .openui-gallery__grid .openui-gallery__image:nth-child(4){grid-area:img4}.openui-gallery--default .openui-gallery__grid .openui-gallery__image:nth-child(5){grid-area:img5}.openui-gallery--triple .openui-gallery__grid{grid-template-columns:repeat(2, 1fr);grid-template-rows:repeat(2, 1fr);grid-template-areas:"img1 img1" "img2 img3"}.openui-gallery--triple .openui-gallery__grid .openui-gallery__image:nth-child(1){grid-area:img1}.openui-gallery--triple .openui-gallery__grid .openui-gallery__image:nth-child(2){grid-area:img2}.openui-gallery--triple .openui-gallery__grid .openui-gallery__image:nth-child(3){grid-area:img3}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@media(max-width: 768px){.openui-gallery__modal-content{width:100%;height:100%;border-radius:0;max-height:none;max-width:none}}

package/dist/components/ImageGallery/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./GalleryModal";
+export * from "./ImageGallery";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ImageGallery/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ImageGallery/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC"}

package/dist/components/ImageGallery/index.js

@@ -0,0 +1,3 @@
+export * from "./GalleryModal";
+export * from "./ImageGallery";
+//# sourceMappingURL=index.js.map

package/dist/components/ImageGallery/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ImageGallery/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC"}

package/dist/components/ImageGallery/stories/imsgeGallery.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ImageGallery } from "../ImageGallery";
+declare const meta: Meta<typeof ImageGallery>;
+export default meta;
+type Story = StoryObj<typeof ImageGallery>;
+export declare const ImageGalleryStory: Story;
+//# sourceMappingURL=imsgeGallery.stories.d.ts.map

package/dist/components/ImageGallery/stories/imsgeGallery.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"imsgeGallery.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/ImageGallery/stories/imsgeGallery.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,YAAY,CAsBnC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,YAAY,CAAC,CAAC;AAE3C,eAAO,MAAM,iBAAiB,EAAE,KAyC/B,CAAC"}

package/dist/components/ImageGallery/stories/imsgeGallery.stories.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Card } from "../../Card";
+import { ImageGallery } from "../ImageGallery";
+const meta = {
+    title: "Components/ImageGallery",
+    component: ImageGallery,
+    parameters: {
+        layout: "centered",
+        docs: {
+            description: {
+                component: "```tsx\nimport { ImageGallery } from '@openui-ui/react-ui';\n```",
+            },
+        },
+    },
+    argTypes: {
+        images: {
+            control: false,
+            description: "The images to display in the gallery",
+            table: {
+                category: "Content",
+                type: { summary: "Array<{ src: string, alt: string, details?: string }>" },
+            },
+        },
+    },
+    tags: ["autodocs", "!dev"],
+};
+export default meta;
+export const ImageGalleryStory = {
+    render: (args) => (_jsx("div", { style: {
+            width: "800px",
+            height: "700px",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+        }, children: _jsx(Card, { style: { width: "600px" }, children: _jsx(ImageGallery, { ...args, images: [
+                    {
+                        src: "https://images.unsplash.com/photo-1526481280693-3bfa7568e0f3?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTB8fGphcGFufGVufDB8fDB8fHww",
+                    },
+                    {
+                        src: "https://plus.unsplash.com/premium_photo-1675610853926-6d69a0a99ea7?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTd8fGphcGFufGVufDB8fDB8fHww",
+                    },
+                    {
+                        src: "https://images.unsplash.com/photo-1554797589-7241bb691973?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTJ8fGphcGFufGVufDB8fDB8fHww",
+                    },
+                    {
+                        src: "https://images.unsplash.com/photo-1492571350019-22de08371fd3?q=80&w=3906&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+                    },
+                    {
+                        src: "https://plus.unsplash.com/premium_photo-1661878091370-4ccb8763756a?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8amFwYW58ZW58MHx8MHx8fDA%3D",
+                    },
+                    {
+                        src: "https://images.unsplash.com/photo-1740412662676-a3b16d74ee86?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxmZWF0dXJlZC1waG90b3MtZmVlZHwzfHx8ZW58MHx8fHx8",
+                    },
+                    {
+                        src: "https://images.unsplash.com/photo-1740386072835-938733c974e1?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxmZWF0dXJlZC1waG90b3MtZmVlZHwyNzh8fHxlbnwwfHx8fHw%3D",
+                    },
+                ] }) }) })),
+};
+//# sourceMappingURL=imsgeGallery.stories.js.map

package/dist/components/ImageGallery/stories/imsgeGallery.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"imsgeGallery.stories.js","sourceRoot":"","sources":["../../../../src/components/ImageGallery/stories/imsgeGallery.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAClC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,MAAM,IAAI,GAA8B;IACtC,KAAK,EAAE,yBAAyB;IAChC,SAAS,EAAE,YAAY;IACvB,UAAU,EAAE;QACV,MAAM,EAAE,UAAU;QAClB,IAAI,EAAE;YACJ,WAAW,EAAE;gBACX,SAAS,EAAE,kEAAkE;aAC9E;SACF;KACF;IACD,QAAQ,EAAE;QACR,MAAM,EAAE;YACN,OAAO,EAAE,KAAK;YACd,WAAW,EAAE,sCAAsC;YACnD,KAAK,EAAE;gBACL,QAAQ,EAAE,SAAS;gBACnB,IAAI,EAAE,EAAE,OAAO,EAAE,uDAAuD,EAAE;aAC3E;SACF;KACF;IACD,IAAI,EAAE,CAAC,UAAU,EAAE,MAAM,CAAC;CAC3B,CAAC;AAEF,eAAe,IAAI,CAAC;AAGpB,MAAM,CAAC,MAAM,iBAAiB,GAAU;IACtC,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CAChB,cACE,KAAK,EAAE;YACL,KAAK,EAAE,OAAO;YACd,MAAM,EAAE,OAAO;YACf,OAAO,EAAE,MAAM;YACf,cAAc,EAAE,QAAQ;YACxB,UAAU,EAAE,QAAQ;SACrB,YAED,KAAC,IAAI,IAAC,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,YAC7B,KAAC,YAAY,OACP,IAAI,EACR,MAAM,EAAE;oBACN;wBACE,GAAG,EAAE,uKAAuK;qBAC7K;oBACD;wBACE,GAAG,EAAE,6KAA6K;qBACnL;oBACD;wBACE,GAAG,EAAE,oKAAoK;qBAC1K;oBACD;wBACE,GAAG,EAAE,wKAAwK;qBAC9K;oBACD;wBACE,GAAG,EAAE,+KAA+K;qBACrL;oBACD;wBACE,GAAG,EAAE,+KAA+K;qBACrL;oBACD;wBACE,GAAG,EAAE,qLAAqL;qBAC3L;iBACF,GACD,GACG,GACH,CACP;CACF,CAAC"}

package/dist/components/Input/Input.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
+    styles?: React.CSSProperties;
+    className?: string;
+    size?: "small" | "medium" | "large";
+    hasError?: boolean;
+}
+export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=Input.d.ts.map

package/dist/components/Input/Input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC3F,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAQD,eAAO,MAAM,KAAK,qFAgBjB,CAAC"}

package/dist/components/Input/Input.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import React from "react";
+import { useFormControlContext } from "../FormControl/context";
+const sizes = {
+    small: "openui-input-small",
+    medium: "openui-input-medium",
+    large: "openui-input-large",
+};
+export const Input = React.forwardRef(({ className, styles, size = "medium", hasError, ...props }, ref) => {
+    const ctx = useFormControlContext();
+    const resolvedHasError = hasError ?? ctx?.hasError ?? false;
+    return (_jsx("input", { autoComplete: "off", ref: ref, className: clsx("openui-input", sizes[size], className, {
+            "openui-input-error": resolvedHasError,
+        }), style: styles, ...props }));
+});
+Input.displayName = "Input";
+//# sourceMappingURL=Input.js.map

package/dist/components/Input/Input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAS/D,MAAM,KAAK,GAAG;IACZ,KAAK,EAAE,oBAAoB;IAC3B,MAAM,EAAE,qBAAqB;IAC7B,KAAK,EAAE,oBAAoB;CACnB,CAAC;AAEX,MAAM,CAAC,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CACnC,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,IAAI,GAAG,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAClE,MAAM,GAAG,GAAG,qBAAqB,EAAE,CAAC;IACpC,MAAM,gBAAgB,GAAG,QAAQ,IAAI,GAAG,EAAE,QAAQ,IAAI,KAAK,CAAC;IAC5D,OAAO,CACL,gBACE,YAAY,EAAC,KAAK,EAClB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CAAC,cAAc,EAAE,KAAK,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE;YACtD,oBAAoB,EAAE,gBAAgB;SACvC,CAAC,EACF,KAAK,EAAE,MAAM,KACT,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC"}

package/dist/components/Input/dependencies.d.ts

@@ -0,0 +1,3 @@
+declare const dependencies: string[];
+export default dependencies;
+//# sourceMappingURL=dependencies.d.ts.map

package/dist/components/Input/dependencies.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dependencies.d.ts","sourceRoot":"","sources":["../../../src/components/Input/dependencies.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,YAAY,UAAY,CAAC;AAC/B,eAAe,YAAY,CAAC"}

package/dist/components/Input/dependencies.js

@@ -0,0 +1,3 @@
+const dependencies = ["Input"];
+export default dependencies;
+//# sourceMappingURL=dependencies.js.map

package/dist/components/Input/dependencies.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dependencies.js","sourceRoot":"","sources":["../../../src/components/Input/dependencies.ts"],"names":[],"mappings":"AAAA,MAAM,YAAY,GAAG,CAAC,OAAO,CAAC,CAAC;AAC/B,eAAe,YAAY,CAAC"}

package/dist/components/Input/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Input";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Input/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Input/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC"}

package/dist/components/Input/index.js

@@ -0,0 +1,2 @@
+export * from "./Input";
+//# sourceMappingURL=index.js.map

package/dist/components/Input/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Input/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC"}

package/dist/components/Input/input.css

@@ -0,0 +1 @@
+.openui-input{font:var(--openui-text-body-default);letter-spacing:var(--openui-text-body-default-letter-spacing);border:1px solid var(--openui-border-interactive, oklch(9.7% 0 0deg / 0.12));border-radius:var(--openui-radius-l, 10px);box-sizing:border-box;width:100%;gap:var(--openui-space-xs, 6px);background-color:var(--openui-highlight-subtle, oklch(9.7% 0 0deg / 0.02));color:var(--openui-text-neutral-primary, oklch(9.7% 0 0deg));transition:box-shadow .16s ease,border-color .16s ease,background-color .16s ease}.openui-input-small{border-radius:calc(var(--openui-radius-m, 8px) - 1px);padding:calc(var(--openui-space-2xs, 4px) - 1px) var(--openui-space-s, 8px)}.openui-input-medium{border-radius:var(--openui-radius-m, 8px);padding:calc(var(--openui-space-xs, 6px) - 1px) calc(var(--openui-space-m, 12px) - 1px)}.openui-input-large{padding:calc(var(--openui-space-s, 8px) - 1px) var(--openui-space-m, 12px)}.openui-input::placeholder{color:var(--openui-text-neutral-secondary, oklch(9.7% 0 0deg / 0.5))}.openui-input:focus{outline:none;box-shadow:0 0 0 2.5px var(--openui-border-default, oklch(9.7% 0 0deg / 0.06))}.openui-input:not(.openui-input-error):focus{border-color:var(--openui-border-interactive-emphasis, oklch(9.7% 0 0deg / 0.3))}.openui-input:disabled{background-color:var(--openui-sunk, oklch(9.7% 0 0deg / 0.04));border:1px solid var(--openui-border-default, oklch(9.7% 0 0deg / 0.06));cursor:not-allowed;color:var(--openui-text-neutral-tertiary, oklch(9.7% 0 0deg / 0.2))}.openui-input:not(:focus):not(:disabled):not(.openui-input-error):hover{border-color:var(--openui-border-interactive, oklch(9.7% 0 0deg / 0.12))}.openui-input-error{border-color:var(--openui-border-danger-emphasis, oklch(57.7% 0.215 27.325deg));box-shadow:0 0 0 2.5px var(--openui-border-danger, oklch(57.7% 0.215 27.325deg / 0.08))}.openui-input-error:focus{border-color:var(--openui-border-danger-emphasis, oklch(57.7% 0.215 27.325deg));box-shadow:0 0 0 2.5px var(--openui-border-danger, oklch(57.7% 0.215 27.325deg / 0.08))}

package/dist/components/Input/stories/Input.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Input } from "../Input";
+declare const meta: Meta<typeof Input>;
+export default meta;
+type Story = StoryObj<typeof Input>;
+export declare const Default: Story;
+export declare const ErrorState: Story;
+export declare const Controlled: Story;
+export declare const LengthValidation: Story;
+//# sourceMappingURL=Input.stories.d.ts.map

package/dist/components/Input/stories/Input.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/stories/Input.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAElD,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CAuF5B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,KAAK,CAAC,CAAC;AAEpC,eAAO,MAAM,OAAO,EAAE,KAgBrB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAiBxB,CAAC;AAeF,eAAO,MAAM,UAAU,EAAE,KAoBxB,CAAC;AAgBF,eAAO,MAAM,gBAAgB,EAAE,KA2B9B,CAAC"}