@uxf/ui 1.0.0-beta.11 → 1.0.0-beta.16

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/{styles → button}/button.css

@@ -1,31 +1,31 @@
 .button {
   @apply inline-flex items-center rounded font-medium shadow-md shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2;
 
-  &.button--disabled {
+  &--disabled {
     @apply pointer-events-none opacity-40;
   }
 
-  &.button--size-xs {
+  &--size-xs {
     @apply px-2.5 py-1.5 text-xs;
   }
 
-  &.button--size-sm {
+  &--size-sm {
     @apply px-3 py-2 text-sm leading-4;
   }
 
-  &.button--size-default {
+  &--size-default {
     @apply px-4 py-2 text-sm;
   }
 
-  &.button--size-lg {
+  &--size-lg {
     @apply px-4 py-2 text-base;
   }
 
-  &.button--size-xl {
+  &--size-xl {
     @apply border px-6 py-3 text-base;
   }
 
-  &.button--variant-outlined {
+  &--variant-outlined {
     @apply border bg-white;
 
     &.button--color-default {
@@ -49,7 +49,7 @@
     }
   }
 
-  &.button--variant-default {
+  &--variant-default {
     @apply border-transparent text-white;
 
     &.button--color-default {

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.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.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.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.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.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.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.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/icon-close.tsx

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

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/next-button.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import IconChevronRight from "./icon-chevron-right";
+
+interface NextButtonProps {
+  onClick: () => void;
+}
+
+function NextButton(props: NextButtonProps) {
+  return (
+    <button
+      className="pointer-events-auto rounded-full bg-black bg-opacity-50  p-2"
+      onClick={props.onClick}
+    >
+      <IconChevronRight />
+    </button>
+  );
+}
+
+export default NextButton;

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;