@uxf/ui 1.0.0-beta.22 → 1.0.0-beta.23

package/button/button.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from "react";
+import { ButtonColors, ButtonSizes, ButtonVariants } from "@uxf/ui/button";
+interface ButtonProps {
+    variant?: keyof ButtonVariants;
+    color?: keyof ButtonColors;
+    size?: keyof ButtonSizes;
+    disabled?: boolean;
+    loading?: boolean;
+    startAdornment?: ReactNode;
+    endAdornment?: ReactNode;
+    type?: "button" | "submit" | "reset";
+    children: ReactNode;
+}
+declare function Button(props: ButtonProps): JSX.Element;
+export default Button;

package/button/button.jsx

@@ -0,0 +1,17 @@
+"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 cx_1 = require("@uxf/core/utils/cx");
+function Button(props) {
+    var _a, _b, _c;
+    const className = (0, cx_1.cx)("button", `button--color-${(_a = props.color) !== null && _a !== void 0 ? _a : "default"}`, `button--size-${(_b = props.size) !== null && _b !== void 0 ? _b : "default"}`, `button--variant-${(_c = props.variant) !== null && _c !== void 0 ? _c : "default"}`, props.disabled && `button--disabled`, props.loading && `button--loading`);
+    return (<button type={props.type} className={className}>
+      {props.startAdornment}
+      {props.children}
+      {props.endAdornment}
+    </button>);
+}
+exports.default = Button;

package/button/button.stories.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { Button } from "@uxf/ui/button";
+declare const _default: {
+    title: string;
+    component: typeof Button;
+};
+export default _default;
+export declare function Default(): JSX.Element;
+export declare function Disabled(): JSX.Element;
+export declare function Loading(): JSX.Element;

package/button/button.stories.jsx

@@ -0,0 +1,59 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Loading = exports.Disabled = exports.Default = void 0;
+const react_1 = __importDefault(require("react"));
+const button_1 = require("@uxf/ui/button");
+const storybook_config_1 = require("@uxf/ui/utils/storybook-config");
+const react_2 = require("react");
+exports.default = {
+    title: "UI/Button",
+    component: button_1.Button,
+};
+function Default() {
+    const config = (0, storybook_config_1.useStorybookConfig)("Button");
+    return (<div className="space-y-2">
+      {config.variants.map((variant) => (<react_2.Fragment key={variant}>
+          {config.colors.map((color) => (<react_2.Fragment key={color}>
+              {config.sizes.map((size) => (<div>
+                  <button_1.Button key={size} variant={variant} color={color} size={size}>
+                    Button
+                  </button_1.Button>
+                </div>))}
+            </react_2.Fragment>))}
+        </react_2.Fragment>))}
+    </div>);
+}
+exports.Default = Default;
+function Disabled() {
+    const config = (0, storybook_config_1.useStorybookConfig)("Button");
+    return (<div className="space-y-2">
+      {config.variants.map((variant) => (<react_2.Fragment key={variant}>
+          {config.colors.map((color) => (<react_2.Fragment key={color}>
+              {config.sizes.map((size) => (<div>
+                  <button_1.Button key={size} variant={variant} color={color} size={size} disabled>
+                    Button
+                  </button_1.Button>
+                </div>))}
+            </react_2.Fragment>))}
+        </react_2.Fragment>))}
+    </div>);
+}
+exports.Disabled = Disabled;
+function Loading() {
+    const config = (0, storybook_config_1.useStorybookConfig)("Button");
+    return (<div className="space-y-2">
+      {config.variants.map((variant) => (<react_2.Fragment key={variant}>
+          {config.colors.map((color) => (<react_2.Fragment key={color}>
+              {config.sizes.map((size) => (<div>
+                  <button_1.Button key={size} variant={variant} color={color} size={size} loading>
+                    Button
+                  </button_1.Button>
+                </div>))}
+            </react_2.Fragment>))}
+        </react_2.Fragment>))}
+    </div>);
+}
+exports.Loading = Loading;

package/button/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Button } from "@uxf/ui/button/button";
+export * from "@uxf/ui/button/theme";

package/button/index.js

@@ -0,0 +1,23 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = void 0;
+var button_1 = require("@uxf/ui/button/button");
+Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return __importDefault(button_1).default; } });
+__exportStar(require("@uxf/ui/button/theme"), exports);

package/button/theme.d.ts

@@ -0,0 +1,18 @@
+export interface ButtonVariants {
+    outlined: true;
+    default: true;
+}
+export interface ButtonSizes {
+    xs: true;
+    sm: true;
+    default: true;
+    lg: true;
+    xl: true;
+}
+export interface ButtonColors {
+    default: true;
+    white: true;
+    success: true;
+    warning: true;
+    error: true;
+}

package/dropdown/dropdown.d.ts

@@ -0,0 +1,10 @@
+import { UseAnchorProps } from "@uxf/core/hooks/useAnchorProps";
+import { AnchorHTMLAttributes, HTMLAttributes } from "react";
+interface ItemProps extends AnchorHTMLAttributes<HTMLAnchorElement>, UseAnchorProps {
+}
+declare type ItemsProps = HTMLAttributes<HTMLDivElement>;
+export declare const Dropdown: {
+    Item: import("react").ForwardRefExoticComponent<ItemProps & import("react").RefAttributes<HTMLAnchorElement>>;
+    Items: import("react").ForwardRefExoticComponent<ItemsProps & import("react").RefAttributes<HTMLDivElement>>;
+};
+export {};

package/dropdown/dropdown.jsx

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Dropdown = void 0;
+const useAnchorProps_1 = require("@uxf/core/hooks/useAnchorProps");
+const forwardRef_1 = require("@uxf/ui/utils/forwardRef");
+function Item(props, ref) {
+    const { children, className, ...restProps } = props;
+    const anchorProps = (0, useAnchorProps_1.useAnchorProps)({
+        className: `uxf-dropdown-item ${className || ""}`,
+        role: "menuitem",
+        ...restProps,
+    });
+    return (<a ref={ref} {...anchorProps}>
+      {children}
+    </a>);
+}
+function Items(props, ref) {
+    const { children, className, role = "menu", ...restProps } = props;
+    return (<div className={`uxf-dropdown-items`} ref={ref} role={role} {...restProps}>
+      {children}
+    </div>);
+}
+exports.Dropdown = {
+    Item: (0, forwardRef_1.forwardRef)("Item.", Item),
+    Items: (0, forwardRef_1.forwardRef)("Items", Items),
+};

package/dropdown/index.d.ts

@@ -0,0 +1 @@
+export { Dropdown } from "./dropdown";

package/dropdown/index.js

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

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

@@ -0,0 +1,7 @@
+import { ReactNode } from "react";
+interface Props {
+    id?: string | undefined;
+    children?: ReactNode;
+}
+declare function ErrorMessage(props: Props): JSX.Element;
+export default ErrorMessage;

package/error-message/error-message.jsx

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+function ErrorMessage(props) {
+    return (<p id={props.id} className="uxf-error-message">
+      {props.children}
+    </p>);
+}
+exports.default = ErrorMessage;

package/{avatar/avatar.stories.d.ts → error-message/error-message.stories.d.ts}

@@ -1,8 +1,8 @@
 /// <reference types="react" />
-import { Avatar } from "./avatar";
+import { ErrorMessage } from "./index";
 declare const _default: {
     title: string;
-    component: typeof Avatar;
+    component: typeof ErrorMessage;
 };
 export default _default;
 export declare function Default(): JSX.Element;

package/error-message/error-message.stories.jsx

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const index_1 = require("./index");
+exports.default = {
+    title: "UI/ErrorMessage",
+    component: index_1.ErrorMessage,
+};
+function Default() {
+    return (<div className="space-y-2">
+      <index_1.ErrorMessage>This field is required.</index_1.ErrorMessage>
+    </div>);
+}
+exports.Default = Default;

package/error-message/index.d.ts

@@ -0,0 +1 @@
+export { default as ErrorMessage } from "./error-message";

package/error-message/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ErrorMessage = void 0;
+var error_message_1 = require("./error-message");
+Object.defineProperty(exports, "ErrorMessage", { enumerable: true, get: function () { return __importDefault(error_message_1).default; } });

package/hooks/use-dropdown.d.ts

@@ -0,0 +1,7 @@
+import { Placement } from "@floating-ui/react-dom";
+import { CSSProperties } from "react";
+export declare function useDropdown(placement: Placement, matchWidth?: boolean): {
+    floating: (node: HTMLElement | null) => void;
+    reference: (node: (Element | import("@floating-ui/core").VirtualElement) | null) => void;
+    style: Partial<CSSProperties>;
+};

package/hooks/use-dropdown.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDropdown = void 0;
+const react_dom_1 = require("@floating-ui/react-dom");
+const react_1 = require("react");
+function useDropdown(placement, matchWidth = false) {
+    var _a, _b;
+    const [sizeData, setSizeData] = (0, react_1.useState)(null);
+    const { floating, reference, refs, strategy, update, x, y } = (0, react_dom_1.useFloating)({
+        placement,
+        middleware: [
+            (0, react_dom_1.flip)(),
+            (0, react_dom_1.shift)(),
+            (0, react_dom_1.size)({
+                apply: setSizeData,
+            }),
+        ],
+    });
+    (0, react_1.useEffect)(() => {
+        if (!refs.reference.current || !refs.floating.current) {
+            return;
+        }
+        return (0, react_dom_1.autoUpdate)(refs.reference.current, refs.floating.current, update);
+    }, [refs.reference, refs.floating, update]);
+    return {
+        floating,
+        reference,
+        style: {
+            left: x !== null && x !== void 0 ? x : undefined,
+            maxHeight: (_a = sizeData === null || sizeData === void 0 ? void 0 : sizeData.height) !== null && _a !== void 0 ? _a : undefined,
+            maxWidth: matchWidth ? (_b = sizeData === null || sizeData === void 0 ? void 0 : sizeData.reference.width) !== null && _b !== void 0 ? _b : undefined : undefined,
+            position: strategy,
+            top: y !== null && y !== void 0 ? y : undefined,
+        },
+    };
+}
+exports.useDropdown = useDropdown;

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+interface CloseButtonProps {
+    onClick: () => void;
+}
+declare function CloseButton(props: CloseButtonProps): JSX.Element;
+export default CloseButton;

package/image-gallery/components/close-button.jsx

@@ -0,0 +1,13 @@
+"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 icon_close_1 = __importDefault(require("./icon-close"));
+function CloseButton(props) {
+    return (<button className="bg-black bg-opacity-50 p-3" onClick={() => props.onClick()}>
+      <icon_close_1.default />
+    </button>);
+}
+exports.default = CloseButton;

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+interface DotProps {
+    active?: boolean;
+}
+declare function Dot(props: DotProps): JSX.Element;
+export default Dot;

package/image-gallery/components/dot.jsx

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const cx_1 = require("@uxf/core/utils/cx");
+const react_1 = __importDefault(require("react"));
+function Dot(props) {
+    const className = (0, cx_1.cx)("h-2 w-2 rounded-full", props.active ? "bg-gray-500" : "bg-white");
+    return <div className={className}/>;
+}
+exports.default = Dot;

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { ImageGalleryImageProps } from "../types";
+interface GalleryProps {
+    onClose: () => void;
+    onNext: () => void;
+    onPrevious: () => void;
+    imageIndex: number;
+    images: ImageGalleryImageProps[];
+}
+declare function Gallery(props: GalleryProps): JSX.Element;
+export default Gallery;

package/image-gallery/components/gallery.jsx

@@ -0,0 +1,74 @@
+"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 });
+const close_button_1 = __importDefault(require("./close-button"));
+const previous_button_1 = __importDefault(require("./previous-button"));
+const next_button_1 = __importDefault(require("./next-button"));
+const dot_1 = __importDefault(require("./dot"));
+const react_1 = __importStar(require("react"));
+function Gallery(props) {
+    (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);
+        };
+    }, []);
+    return (<div className="fixed inset-0 top-0 bottom-0 z-50 flex flex-col bg-black bg-opacity-75 transition-opacity">
+      <div className="flex justify-end">
+        <close_button_1.default onClick={props.onClose}/>
+      </div>
+      <div className="container mx-auto flex h-full flex-1 flex-col">
+        <div className="relative flex flex-1 items-center justify-center">
+          <img className="absolute left-0 right-0 top-0 h-full w-full object-contain" src={props.images[props.imageIndex].src}/>
+          <div className="pointer-events-none absolute inset-0 flex items-center justify-between p-2">
+            <previous_button_1.default onClick={props.onPrevious}/>
+            <next_button_1.default onClick={props.onNext}/>
+          </div>
+        </div>
+      </div>
+      <div className="row mx-auto flex space-x-2 p-4">
+        {props.images.map((url, index) => (<dot_1.default key={url.src} active={index === props.imageIndex}/>))}
+      </div>
+    </div>);
+}
+exports.default = Gallery;

package/image-gallery/components/icon-chevron-left.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare function IconChevronLeft(): JSX.Element;
+export default IconChevronLeft;

package/image-gallery/components/icon-chevron-left.jsx

@@ -0,0 +1,12 @@
+"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"));
+function IconChevronLeft() {
+    return (<svg xmlns="http://www.w3.org/2000/svg" className="h-10 w-10 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+      <path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7"/>
+    </svg>);
+}
+exports.default = IconChevronLeft;

package/image-gallery/components/icon-chevron-right.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare function IconChevronRight(): JSX.Element;
+export default IconChevronRight;

package/image-gallery/components/icon-chevron-right.jsx

@@ -0,0 +1,12 @@
+"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"));
+function IconChevronRight() {
+    return (<svg xmlns="http://www.w3.org/2000/svg" className="h-10 w-10 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+      <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7"/>
+    </svg>);
+}
+exports.default = IconChevronRight;

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare function IconClose(): JSX.Element;
+export default IconClose;

package/image-gallery/components/icon-close.jsx

@@ -0,0 +1,12 @@
+"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"));
+function IconClose() {
+    return (<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2} className="h-10 w-10 text-white">
+      <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12"/>
+    </svg>);
+}
+exports.default = IconClose;

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+interface NextButtonProps {
+    onClick: () => void;
+}
+declare function NextButton(props: NextButtonProps): JSX.Element;
+export default NextButton;

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

@@ -0,0 +1,13 @@
+"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 icon_chevron_right_1 = __importDefault(require("./icon-chevron-right"));
+function NextButton(props) {
+    return (<button className="pointer-events-auto rounded-full bg-black bg-opacity-50  p-2" onClick={props.onClick}>
+      <icon_chevron_right_1.default />
+    </button>);
+}
+exports.default = NextButton;

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+interface PreviousButtonProps {
+    onClick: () => void;
+}
+declare function PreviousButton(props: PreviousButtonProps): JSX.Element;
+export default PreviousButton;

package/image-gallery/components/previous-button.jsx

@@ -0,0 +1,13 @@
+"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 icon_chevron_left_1 = __importDefault(require("./icon-chevron-left"));
+function PreviousButton(props) {
+    return (<button className="pointer-events-auto rounded-full bg-black bg-opacity-50 p-2" onClick={props.onClick}>
+      <icon_chevron_left_1.default />
+    </button>);
+}
+exports.default = PreviousButton;

package/image-gallery/context.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { ImageGalleryImageProps } from "./types";
+declare 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.jsx

@@ -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,6 @@
+import { ReactNode } from "react";
+interface ImageGalleryProviderProps {
+    children: ReactNode;
+}
+declare function ImageGallery(props: ImageGalleryProviderProps): JSX.Element;
+export default ImageGallery;

package/image-gallery/image-gallery.jsx

@@ -0,0 +1,58 @@
+"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 });
+const react_1 = __importStar(require("react"));
+const context_1 = require("./context");
+const gallery_1 = __importDefault(require("./components/gallery"));
+function ImageGallery(props) {
+    const [images, setImages] = (0, react_1.useState)([]);
+    const [imageIndex, setImageIndex] = (0, react_1.useState)(null);
+    const registerImage = (image) => setImages((v) => [...v, image]);
+    const unregisterImage = (image) => setImages((v) => v.filter((u) => u.src !== image.src));
+    const openGallery = (image) => setImageIndex(images.findIndex((i) => i.src === image.src));
+    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 (<>
+      <context_1.ImageGalleryProvider value={contextValue}>
+        {props.children}
+      </context_1.ImageGalleryProvider>
+      {typeof moduloImageIndex === "number" && (<gallery_1.default onClose={() => setImageIndex(null)} onNext={onNext} onPrevious={onPrevious} imageIndex={moduloImageIndex} images={images}/>)}
+    </>);
+}
+exports.default = ImageGallery;