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

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

@@ -0,0 +1,19 @@
+import React from "react";
+import IconChevronLeft from "./icon-chevron-left";
+
+interface PreviousButtonProps {
+  onClick: () => void;
+}
+
+function PreviousButton(props: PreviousButtonProps) {
+  return (
+    <button
+      className="pointer-events-auto rounded-full bg-black bg-opacity-50 p-2"
+      onClick={props.onClick}
+    >
+      <IconChevronLeft />
+    </button>
+  );
+}
+
+export 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/context.tsx

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

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;

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

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import ImageGallery from "./image-gallery";
+declare const _default: {
+    title: string;
+    component: typeof ImageGallery;
+    parameters: {
+        actions: {
+            argTypesRegex: string;
+        };
+    };
+};
+export default _default;
+export declare function Default(): JSX.Element;

package/image-gallery/image-gallery.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 image_gallery_1 = __importDefault(require("./image-gallery"));
+const image_1 = __importDefault(require("./image"));
+exports.default = {
+    title: "Lab/ImageGallery",
+    component: image_gallery_1.default,
+    parameters: { actions: { argTypesRegex: "^on.*" } },
+};
+const images = [
+    "https://opentopo.app/hero_image.jpeg",
+    "https://opentopo.app/generated/area-18/d/9/d9033d93-ea48-4f66-b0c1-6045c091b326_1024_1024_c.jpg",
+    "https://opentopo.app/generated/area-16/f/4/f4a4ca79-ea9e-44d1-a4ec-3c8ccfbcc218_1024_1024_c.jpg",
+    "https://opentopo.app/generated/area-1/8/b/8b84e378-1f55-4ce7-b750-b504091cb833_1024_1024_c.jpg",
+    "https://opentopo.app/generated/area-2/e/7/e7ec532b-20c2-407e-9305-fa7cfb71f01f_1024_1024_c.jpg",
+];
+function Default() {
+    return (<image_gallery_1.default>
+      <div className="flex-direction flex gap-2">
+        {images.map((src) => (<image_1.default key={src} src={src} className="h-56 w-56 cursor-pointer object-cover transition-transform hover:scale-105"/>))}
+      </div>
+    </image_gallery_1.default>);
+}
+exports.Default = Default;

package/image-gallery/image-gallery.stories.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import ImageGallery from "./image-gallery";
+import Image from "./image";
+
+export default {
+  title: "Lab/ImageGallery",
+  component: ImageGallery,
+  parameters: { actions: { argTypesRegex: "^on.*" } },
+};
+
+const images = [
+  "https://opentopo.app/hero_image.jpeg",
+  "https://opentopo.app/generated/area-18/d/9/d9033d93-ea48-4f66-b0c1-6045c091b326_1024_1024_c.jpg",
+  "https://opentopo.app/generated/area-16/f/4/f4a4ca79-ea9e-44d1-a4ec-3c8ccfbcc218_1024_1024_c.jpg",
+  "https://opentopo.app/generated/area-1/8/b/8b84e378-1f55-4ce7-b750-b504091cb833_1024_1024_c.jpg",
+  "https://opentopo.app/generated/area-2/e/7/e7ec532b-20c2-407e-9305-fa7cfb71f01f_1024_1024_c.jpg",
+];
+
+export function Default() {
+  return (
+    <ImageGallery>
+      <div className="flex-direction flex gap-2">
+        {images.map((src) => (
+          <Image
+            key={src}
+            src={src}
+            className="h-56 w-56 cursor-pointer object-cover transition-transform hover:scale-105"
+          />
+        ))}
+      </div>
+    </ImageGallery>
+  );
+}

package/image-gallery/image-gallery.tsx

@@ -0,0 +1,59 @@
+import React, { ReactNode, useCallback, useState } from "react";
+import { ImageGalleryProvider } from "./context";
+import { ImageGalleryImageProps } from "./types";
+import Gallery from "./components/gallery";
+
+interface ImageGalleryProviderProps {
+  children: ReactNode;
+}
+
+function ImageGallery(props: ImageGalleryProviderProps) {
+  const [images, setImages] = useState<ImageGalleryImageProps[]>([]);
+  const [imageIndex, setImageIndex] = useState<null | number>(null);
+
+  const registerImage = (image: ImageGalleryImageProps) =>
+    setImages((v) => [...v, image]);
+
+  const unregisterImage = (image: ImageGalleryImageProps) =>
+    setImages((v) => v.filter((u) => u.src !== image.src));
+
+  const openGallery = (image: ImageGalleryImageProps) =>
+    setImageIndex(images.findIndex((i) => i.src === image.src));
+
+  const onPrevious = useCallback(() => {
+    setImageIndex((v) => (v === null ? null : v - 1));
+  }, []);
+
+  const onNext = 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 (
+    <>
+      <ImageGalleryProvider value={contextValue}>
+        {props.children}
+      </ImageGalleryProvider>
+      {typeof moduloImageIndex === "number" && (
+        <Gallery
+          onClose={() => setImageIndex(null)}
+          onNext={onNext}
+          onPrevious={onPrevious}
+          imageIndex={moduloImageIndex}
+          images={images}
+        />
+      )}
+    </>
+  );
+}
+
+export default ImageGallery;

package/image-gallery/image.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { ImageGalleryImageProps } from "@uxf/ui/image-gallery/types";
+declare function Image(props: ImageGalleryImageProps): JSX.Element;
+export default Image;

package/image-gallery/image.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"));
+const use_image_1 = require("./use-image");
+function Image(props) {
+    const openGallery = (0, use_image_1.useImage)(props);
+    return (<img src={props.src} alt={props.alt} title={props.title} className={props.className} onClick={() => openGallery(props)}/>);
+}
+exports.default = Image;

package/image-gallery/image.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { useImage } from "./use-image";
+import { ImageGalleryImageProps } from "@uxf/ui/image-gallery/types";
+
+function Image(props: ImageGalleryImageProps) {
+  const openGallery = useImage(props);
+
+  return (
+    <img
+      src={props.src}
+      alt={props.alt}
+      title={props.title}
+      className={props.className}
+      onClick={() => openGallery(props)}
+    />
+  );
+}
+
+export default Image;

package/image-gallery/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Image } from "./image";
+export { default as ImageGallery } from "./image-gallery";
+export * from "./use-image";

package/image-gallery/index.js

@@ -0,0 +1,25 @@
+"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.ImageGallery = exports.Image = void 0;
+var image_1 = require("./image");
+Object.defineProperty(exports, "Image", { enumerable: true, get: function () { return __importDefault(image_1).default; } });
+var image_gallery_1 = require("./image-gallery");
+Object.defineProperty(exports, "ImageGallery", { enumerable: true, get: function () { return __importDefault(image_gallery_1).default; } });
+__exportStar(require("./use-image"), exports);

package/image-gallery/index.ts

@@ -0,0 +1,3 @@
+export { default as Image } from "./image";
+export { default as ImageGallery } from "./image-gallery";
+export * from "./use-image";

package/image-gallery/types.d.ts

@@ -0,0 +1,6 @@
+export interface ImageGalleryImageProps {
+    src: string;
+    title?: string;
+    alt?: string;
+    className?: string;
+}

package/image-gallery/types.js

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

package/image-gallery/types.ts

@@ -0,0 +1,6 @@
+export interface ImageGalleryImageProps {
+  src: string;
+  title?: string;
+  alt?: string;
+  className?: string;
+}

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

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

package/image-gallery/use-image.js

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

package/image-gallery/use-image.ts

@@ -0,0 +1,17 @@
+import { useEffect } from "react";
+import { useImageGalleryContext } from "./context";
+import { ImageGalleryImageProps } from "./types";
+
+export function useImage(props: ImageGalleryImageProps) {
+  const { registerImage, unregisterImage, openGallery } =
+    useImageGalleryContext();
+
+  useEffect(() => {
+    registerImage(props);
+    return () => {
+      unregisterImage(props);
+    };
+  }, [props]);
+
+  return openGallery;
+}

package/input/index.d.ts

@@ -0,0 +1,12 @@
+import RootInput from "./input";
+import LeftElement from "./input-left-element";
+import RightElement from "./input-right-element";
+import LeftAddon from "./input-left-addon";
+import RightAddon from "./input-right-addon";
+export declare const Input: typeof RootInput & {
+    Element: import("react").ForwardRefExoticComponent<import("./input-element").InputElementProps & import("react").RefAttributes<HTMLInputElement>>;
+    LeftElement: typeof LeftElement;
+    RightElement: typeof RightElement;
+    LeftAddon: typeof LeftAddon;
+    RightAddon: typeof RightAddon;
+};

package/input/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Input = void 0;
+const input_1 = __importDefault(require("./input"));
+const input_element_1 = __importDefault(require("./input-element"));
+const input_left_element_1 = __importDefault(require("./input-left-element"));
+const input_right_element_1 = __importDefault(require("./input-right-element"));
+const input_left_addon_1 = __importDefault(require("./input-left-addon"));
+const input_right_addon_1 = __importDefault(require("./input-right-addon"));
+exports.Input = Object.assign(input_1.default, {
+    Element: input_element_1.default,
+    LeftElement: input_left_element_1.default,
+    RightElement: input_right_element_1.default,
+    LeftAddon: input_left_addon_1.default,
+    RightAddon: input_right_addon_1.default,
+});

package/input/index.ts

@@ -0,0 +1,14 @@
+import RootInput from "./input";
+import Element from "./input-element";
+import LeftElement from "./input-left-element";
+import RightElement from "./input-right-element";
+import LeftAddon from "./input-left-addon";
+import RightAddon from "./input-right-addon";
+
+export const Input = Object.assign(RootInput, {
+  Element,
+  LeftElement,
+  RightElement,
+  LeftAddon,
+  RightAddon,
+});

package/input/input-basic.css

@@ -0,0 +1,18 @@
+.uxf-input {
+  @apply flex flex-row;
+}
+
+.uxf-input__wrapper {
+  @apply flex w-full flex-row;
+}
+
+.uxf-input__element {
+  @apply w-full px-2;
+}
+
+.uxf-input__left-element,
+.uxf-input__right-element,
+.uxf-input__left-addon,
+.uxf-input__right-addon {
+  @apply flex flex-row items-center whitespace-nowrap;
+}

package/input/input-element.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { FormControlProps } from "@uxf/ui/types/form-control-props";
+export interface InputElementProps extends FormControlProps<string> {
+    id?: string;
+    placeholder?: string;
+}
+declare const _default: React.ForwardRefExoticComponent<InputElementProps & React.RefAttributes<HTMLInputElement>>;
+export default _default;

package/input/input-element.jsx

@@ -0,0 +1,11 @@
+"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 forwardRef_1 = require("@uxf/ui/utils/forwardRef");
+function InputElement(props, ref) {
+    return (<input id={props.id} ref={ref} className="uxf-input__element" value={props.value} onFocus={props.onFocus} onBlur={props.onBlur} onChange={(event) => { var _a; return (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, event.target.value, event); }} placeholder={props.placeholder}/>);
+}
+exports.default = (0, forwardRef_1.forwardRef)("InputElement", InputElement);

package/input/input-element.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { forwardRef } from "@uxf/ui/utils/forwardRef";
+import { FormControlProps } from "@uxf/ui/types/form-control-props";
+
+export interface InputElementProps extends FormControlProps<string> {
+  id?: string;
+  placeholder?: string;
+}
+
+type InputTypeRef = HTMLInputElement;
+
+function InputElement(
+  props: InputElementProps,
+  ref: React.ForwardedRef<InputTypeRef>
+) {
+  return (
+    <input
+      id={props.id}
+      ref={ref}
+      className="uxf-input__element"
+      value={props.value}
+      onFocus={props.onFocus}
+      onBlur={props.onBlur}
+      onChange={(event) => props.onChange?.(event.target.value, event)}
+      placeholder={props.placeholder}
+    />
+  );
+}
+
+export default forwardRef("InputElement", InputElement);

package/input/input-left-addon.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from "react";
+interface InputLeftAddonProps {
+    children: ReactNode;
+}
+declare function InputLeftAddon(props: InputLeftAddonProps): JSX.Element;
+export default InputLeftAddon;

package/input/input-left-addon.jsx

@@ -0,0 +1,10 @@
+"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 InputLeftAddon(props) {
+    return <div className="uxf-input__left-addon">{props.children}</div>;
+}
+exports.default = InputLeftAddon;