@uxf/ui 1.0.0-beta.10 → 1.0.0-beta.13

package/avatar/avatar.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { AvatarSizes } from "./theme";
+interface FileResponse {
+    uuid: string;
+    namespace?: string;
+    extension: string;
+}
+export interface AvatarProps {
+    src: FileResponse | string | null | undefined;
+    size?: keyof AvatarSizes;
+    rounded?: boolean;
+}
+export declare function Avatar(props: AvatarProps): JSX.Element;
+export {};

package/avatar/avatar.jsx

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Avatar = void 0;
+const cx_1 = require("@uxf/core/utils/cx");
+function Avatar(props) {
+    var _a;
+    const className = (0, cx_1.cx)("avatar", `avatar--size-${props.size}`, `avatar--variant-${(_a = props.circular) !== null && _a !== void 0 ? _a : "default"}`);
+    return <img src={props.src} className={className}/>;
+}
+exports.Avatar = Avatar;

package/avatar/avatar.stories.d.ts

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

package/avatar/avatar.stories.jsx

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const react_1 = __importDefault(require("react"));
+const storybook_config_1 = require("@uxf/ui/utils/storybook-config");
+const avatar_1 = require("./avatar");
+exports.default = {
+    title: "UI/Avatar",
+    component: avatar_1.Avatar,
+};
+function Default() {
+    const config = (0, storybook_config_1.useStorybookConfig)("Button");
+    return (<div className="space-y-4">
+      <div className="flex flex-row items-center space-x-4">
+        <avatar_1.Avatar src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" size="8"/>
+        <avatar_1.Avatar src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" size="10"/>
+        <avatar_1.Avatar src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" size="12"/>
+      </div>
+      <div className="flex flex-row items-center space-x-4">
+        <avatar_1.Avatar src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" size="8" variant="circular"/>
+        <avatar_1.Avatar src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" size="10" variant="circular"/>
+        <avatar_1.Avatar src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" size="12" variant="circular"/>
+      </div>
+    </div>);
+}
+exports.Default = Default;

package/avatar/theme.d.ts

@@ -0,0 +1,5 @@
+export interface AvatarSizes {
+    "8": true;
+    "10": true;
+    "12": true;
+}

package/avatar/theme.js

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

package/button/button.css

@@ -0,0 +1,75 @@
+.button {
+  @apply inline-flex items-center rounded font-medium shadow-md shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2;
+
+  &--disabled {
+    @apply pointer-events-none opacity-40;
+  }
+
+  &--size-xs {
+    @apply px-2.5 py-1.5 text-xs;
+  }
+
+  &--size-sm {
+    @apply px-3 py-2 text-sm leading-4;
+  }
+
+  &--size-default {
+    @apply px-4 py-2 text-sm;
+  }
+
+  &--size-lg {
+    @apply px-4 py-2 text-base;
+  }
+
+  &--size-xl {
+    @apply border px-6 py-3 text-base;
+  }
+
+  &--variant-outlined {
+    @apply border bg-white;
+
+    &.button--color-default {
+      @apply border-primary-500 text-primary-700 hover:bg-primary-50 focus:ring-primary-500;
+    }
+
+    &.button--color-white {
+      @apply border-gray-300 text-gray-700 hover:bg-gray-50 focus:ring-gray-500;
+    }
+
+    &.button--color-success {
+      @apply border-success-500 text-success-700 hover:bg-success-50 focus:ring-success-500;
+    }
+
+    &.button--color-warning {
+      @apply border-warning-500 text-warning-700 hover:bg-warning-50 focus:ring-warning-500;
+    }
+
+    &.button--color-error {
+      @apply border-error-500 text-error-700 hover:bg-error-50 focus:ring-error-500;
+    }
+  }
+
+  &--variant-default {
+    @apply border-transparent text-white;
+
+    &.button--color-default {
+      @apply bg-primary-500 hover:bg-primary-600 focus:ring-primary-400;
+    }
+
+    &.button--color-white {
+      @apply bg-gray-50 text-gray-700 shadow-none hover:bg-gray-100 focus:ring-gray-500;
+    }
+
+    &.button--color-success {
+      @apply bg-success-500 hover:bg-success-600 focus:ring-success-400;
+    }
+
+    &.button--color-warning {
+      @apply bg-warning-500 hover:bg-warning-600 focus:ring-warning-400;
+    }
+
+    &.button--color-error {
+      @apply bg-error-500 hover:bg-error-600 focus:ring-error-400;
+    }
+  }
+}

package/button/button.d.ts

@@ -8,6 +8,7 @@ interface ButtonProps {
     loading?: boolean;
     startAdornment?: ReactNode;
     endAdornment?: ReactNode;
+    type?: "button" | "submit" | "reset";
     children: ReactNode;
 }
 declare function Button(props: ButtonProps): JSX.Element;

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.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/{stories → button}/button.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Button } from "@uxf/ui/button";
-import { useStorybookConfig } from "@uxf/ui/storybook";
+import { useStorybookConfig } from "@uxf/ui/utils/storybook-config";
 import { Fragment } from "react";
 
 export default {

package/button/button.tsx

@@ -0,0 +1,36 @@
+import React, { ReactNode } from "react";
+import { ButtonColors, ButtonSizes, ButtonVariants } from "@uxf/ui/button";
+import { cx } from "@uxf/core/utils/cx";
+
+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;
+}
+
+function Button(props: ButtonProps) {
+  const className = cx(
+    "button",
+    `button--color-${props.color ?? "default"}`,
+    `button--size-${props.size ?? "default"}`,
+    `button--variant-${props.variant ?? "default"}`,
+    props.disabled && `button--disabled`,
+    props.loading && `button--loading`
+  );
+
+  return (
+    <button type={props.type} className={className}>
+      {props.startAdornment}
+      {props.children}
+      {props.endAdornment}
+    </button>
+  );
+}
+
+export default Button;

package/button/index.js

@@ -21,4 +21,3 @@ 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);
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvYnV0dG9uL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBQUEsZ0RBQTBEO0FBQWpELGlIQUFBLE9BQU8sT0FBVTtBQUMxQix1REFBcUMifQ==

package/button/index.ts

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

package/button/theme.d.ts

@@ -11,5 +11,8 @@ export interface ButtonSizes {
 }
 export interface ButtonColors {
     default: true;
-    secondary: true;
+    white: true;
+    success: true;
+    warning: true;
+    error: true;
 }

package/button/theme.js

@@ -1,3 +1,2 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGhlbWUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvYnV0dG9uL3RoZW1lLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiIifQ==

package/button/theme.ts

@@ -0,0 +1,20 @@
+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/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/close-button.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import IconClose from "./icon-close";
+
+interface CloseButtonProps {
+  onClick: () => void;
+}
+
+function CloseButton(props: CloseButtonProps) {
+  return (
+    <button
+      className="bg-black bg-opacity-50 p-3"
+      onClick={() => props.onClick()}
+    >
+      <IconClose />
+    </button>
+  );
+}
+
+export 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/dot.tsx

@@ -0,0 +1,17 @@
+import { cx } from "@uxf/core/utils/cx";
+import React from "react";
+
+interface DotProps {
+  active?: boolean;
+}
+
+function Dot(props: DotProps) {
+  const className = cx(
+    "h-2 w-2 rounded-full",
+    props.active ? "bg-gray-500" : "bg-white"
+  );
+
+  return <div className={className} />;
+}
+
+export 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/gallery.tsx

@@ -0,0 +1,67 @@
+import CloseButton from "./close-button";
+import PreviousButton from "./previous-button";
+import NextButton from "./next-button";
+import Dot from "./dot";
+import React, { useEffect } from "react";
+import { ImageGalleryImageProps } from "../types";
+
+interface GalleryProps {
+  onClose: () => void;
+  onNext: () => void;
+  onPrevious: () => void;
+  imageIndex: number;
+  images: ImageGalleryImageProps[];
+}
+
+function Gallery(props: GalleryProps) {
+  useEffect(() => {
+    const onKeyDown = (event: KeyboardEvent) => {
+      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">
+        <CloseButton 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">
+            <PreviousButton onClick={props.onPrevious} />
+            <NextButton onClick={props.onNext} />
+          </div>
+        </div>
+      </div>
+      <div className="row mx-auto flex space-x-2 p-4">
+        {props.images.map((url, index) => (
+          <Dot key={url.src} active={index === props.imageIndex} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export 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-left.tsx

@@ -0,0 +1,18 @@
+import React from "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>
+  );
+}
+
+export 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-chevron-right.tsx

@@ -0,0 +1,18 @@
+import React from "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>
+  );
+}
+
+export 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;