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

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="button" 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_1 = require("@uxf/ui/storybook");
+const react_2 = require("react");
+exports.default = {
+    title: "UI/Button",
+    component: button_1.Button,
+};
+function Default() {
+    const config = (0, storybook_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_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_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.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/theme.js

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

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.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.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.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.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.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.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.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.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.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.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.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/index.js

@@ -23,4 +23,3 @@ Object.defineProperty(exports, "Image", { enumerable: true, get: function () { r
 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);
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvaW1hZ2UtZ2FsbGVyeS9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQUFBLGlDQUEyQztBQUFsQywrR0FBQSxPQUFPLE9BQVM7QUFDekIsaURBQTBEO0FBQWpELDhIQUFBLE9BQU8sT0FBZ0I7QUFDaEMsOENBQTRCIn0=

package/image-gallery/types.js

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

package/image-gallery/use-image.js

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

package/input/index.js

@@ -16,4 +16,3 @@ var input_left_addon_1 = require("./input-left-addon");
 Object.defineProperty(exports, "InputLeftAddon", { enumerable: true, get: function () { return __importDefault(input_left_addon_1).default; } });
 var input_right_addon_1 = require("./input-right-addon");
 Object.defineProperty(exports, "InputRightAddon", { enumerable: true, get: function () { return __importDefault(input_right_addon_1).default; } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvaW5wdXQvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7O0FBQUEsaUNBQTJDO0FBQWxDLCtHQUFBLE9BQU8sT0FBUztBQUN6Qiw2Q0FBc0Q7QUFBN0MsMEhBQUEsT0FBTyxPQUFjO0FBQzlCLDJEQUFtRTtBQUExRCx1SUFBQSxPQUFPLE9BQW9CO0FBQ3BDLDZEQUFxRTtBQUE1RCx5SUFBQSxPQUFPLE9BQXFCO0FBQ3JDLHVEQUErRDtBQUF0RCxtSUFBQSxPQUFPLE9BQWtCO0FBQ2xDLHlEQUFpRTtBQUF4RCxxSUFBQSxPQUFPLE9BQW1CIn0=

package/input/input-group.jsx

@@ -0,0 +1,63 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const cx_1 = require("@uxf/ui/utils/cx");
+function getChildrenById(children, componentName) {
+    return react_1.default.Children.toArray(children)
+        .filter(react_1.default.isValidElement)
+        .find((ch) => ch.type.displayName === componentName);
+}
+function InputGroup(props) {
+    const inputWrapperRef = (0, react_1.useRef)(null);
+    const inputRef = (0, react_1.useRef)(null);
+    const [focused, setFocused] = (0, react_1.useState)(false);
+    const mainInput = getChildrenById(props.children, "Input");
+    const leftAddon = getChildrenById(props.children, "InputLeftAddon");
+    const rightAddon = getChildrenById(props.children, "InputRightAddon");
+    const leftElement = getChildrenById(props.children, "InputLeftElement");
+    const rightElement = getChildrenById(props.children, "InputRightElement");
+    const inputGroupClasses = (0, cx_1.cx)("uxf-input-group", leftAddon && "uxf-input-group--has-left-addon", leftElement && "uxf-input-group--has-left-element", rightElement && "uxf-input-group--has-right-element", rightAddon && "uxf-input-group--has-right-addon", focused && "uxf-input-group--focused", (mainInput === null || mainInput === void 0 ? void 0 : mainInput.props.isInvalid) && "uxf-input-group--invalid");
+    const onFocus = (e) => {
+        setFocused(true);
+        mainInput === null || mainInput === void 0 ? void 0 : mainInput.props.onFocus(e);
+    };
+    const onBlur = (e) => {
+        setFocused(false);
+        mainInput === null || mainInput === void 0 ? void 0 : mainInput.props.onBlur(e);
+    };
+    return (<div className={inputGroupClasses}>
+      {leftAddon}
+      <div className="uxf-input-wrapper" ref={inputWrapperRef} onClick={() => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }}>
+        {leftElement}
+        {mainInput
+            ? react_1.default.cloneElement(mainInput, { ref: inputRef, onFocus, onBlur })
+            : null}
+        {rightElement}
+      </div>
+      {rightAddon}
+    </div>);
+}
+exports.default = InputGroup;

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;

package/input/input-left-element.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 InputLeftElement(props) {
+    return <div className="uxf-input-left-element">{props.children}</div>;
+}
+exports.default = InputLeftElement;

package/input/input-right-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 InputRightAddon(props) {
+    return <div className="uxf-input-right-addon">{props.children}</div>;
+}
+exports.default = InputRightAddon;

package/input/input-right-element.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 InputRightElement(props) {
+    return <div className="uxf-input-right-element">{props.children}</div>;
+}
+exports.default = InputRightElement;

package/input/input.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 Input(props, ref) {
+    return (<input id={props.id} ref={ref} className="uxf-input" 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)("Input", Input);