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

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

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

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

@@ -1,13 +0,0 @@
-"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

@@ -1,19 +0,0 @@
-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.tsx

@@ -1,17 +0,0 @@
-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.stories.jsx

@@ -1,29 +0,0 @@
-"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

@@ -1,33 +0,0 @@
-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

@@ -1,59 +0,0 @@
-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.jsx

@@ -1,12 +0,0 @@
-"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

@@ -1,19 +0,0 @@
-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.ts

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

package/image-gallery/types.ts

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

package/image-gallery/use-image.ts

@@ -1,17 +0,0 @@
-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.ts

@@ -1,14 +0,0 @@
-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-element.jsx

@@ -1,11 +0,0 @@
-"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

@@ -1,30 +0,0 @@
-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.tsx

@@ -1,12 +0,0 @@
-import React, { ReactNode } from "react";
-import { forwardRef } from "../utils/forwardRef";
-
-interface InputLeftAddonProps {
-  children: ReactNode;
-}
-
-function InputLeftAddon(props: InputLeftAddonProps) {
-  return <div className="uxf-input__left-addon">{props.children}</div>;
-}
-
-export default InputLeftAddon;

package/input/input-left-element.tsx

@@ -1,11 +0,0 @@
-import React, { ReactNode } from "react";
-
-interface InputLeftElementProps {
-  children?: ReactNode;
-}
-
-function InputLeftElement(props: InputLeftElementProps) {
-  return <div className="uxf-input__left-element">{props.children}</div>;
-}
-
-export default InputLeftElement;

package/input/input-right-addon.tsx

@@ -1,11 +0,0 @@
-import React, { ReactNode } from "react";
-
-interface InputRightAddonProps {
-  children: ReactNode;
-}
-
-function InputRightAddon(props: InputRightAddonProps) {
-  return <div className="uxf-input__right-addon">{props.children}</div>;
-}
-
-export default InputRightAddon;

package/input/input-right-element.tsx

@@ -1,11 +0,0 @@
-import React, { ReactNode } from "react";
-
-interface InputRightElementProps {
-  children?: ReactNode;
-}
-
-function InputRightElement(props: InputRightElementProps) {
-  return <div className="uxf-input__right-element">{props.children}</div>;
-}
-
-export default InputRightElement;

package/input/input.css

@@ -1,75 +0,0 @@
-.uxf-input {
-  @apply rounded-md text-sm shadow-sm;
-
-  &__left-element,
-  &__right-element {
-    @apply text-gray-400;
-  }
-
-  &__left-element {
-    @apply pl-2;
-  }
-  &__right-element {
-    @apply pr-2;
-  }
-
-  &__left-addon,
-  &__right-addon {
-    @apply border border-gray-300 bg-gray-50 px-2 text-gray-500;
-  }
-
-  &__left-addon {
-    @apply rounded-l-md border-r-0;
-  }
-
-  &__right-addon {
-    @apply rounded-r-md border-l-0;
-  }
-
-  &__wrapper {
-    @apply h-10 rounded-md border border-gray-300;
-  }
-
-  &__element {
-    @apply bg-transparent outline-none;
-  }
-
-  &--has-right-addon {
-    .uxf-input__wrapper {
-      @apply rounded-r-none;
-    }
-  }
-
-  &--has-left-addon {
-    .uxf-input__wrapper {
-      @apply rounded-l-none;
-    }
-  }
-
-  &--focused {
-    .uxf-input__wrapper {
-      @apply border-primary-500 ring-1 ring-inset ring-primary-500 ring-offset-0;
-    }
-  }
-
-  &--invalid {
-    &.uxf-input--focused {
-      .uxf-input__wrapper {
-        @apply ring-1 ring-inset ring-error-500 ring-offset-0;
-      }
-    }
-
-    .uxf-input__wrapper {
-      @apply border-error-500 placeholder-error-300;
-
-      .uxf-input__left-element,
-      .uxf-input__right-element {
-        @apply text-error-500;
-      }
-
-      .uxf-input__element {
-        @apply text-error-900 placeholder-error-300;
-      }
-    }
-  }
-}

package/input/input.jsx

@@ -1,65 +0,0 @@
-"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 Input(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, "InputElement");
-    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", leftAddon && "uxf-input--has-left-addon", leftElement && "uxf-input--has-left-element", rightElement && "uxf-input--has-right-element", rightAddon && "uxf-input--has-right-addon", focused && "uxf-input--focused", (mainInput === null || mainInput === void 0 ? void 0 : mainInput.props.isInvalid) && "uxf-input--invalid");
-    const onFocus = (e) => {
-        var _a, _b;
-        setFocused(true);
-        (_b = mainInput === null || mainInput === void 0 ? void 0 : (_a = mainInput.props).onFocus) === null || _b === void 0 ? void 0 : _b.call(_a, e);
-    };
-    const onBlur = (e) => {
-        var _a, _b;
-        setFocused(false);
-        (_b = mainInput === null || mainInput === void 0 ? void 0 : (_a = mainInput.props).onBlur) === null || _b === void 0 ? void 0 : _b.call(_a, 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 = Input;

package/input/input.stories.jsx

@@ -1,78 +0,0 @@
-"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 });
-exports.ComponentStructure = exports.Default = void 0;
-const react_1 = __importStar(require("react"));
-const component_structure_analyzer_1 = __importDefault(require("@uxf/ui/utils/component-structure-analyzer"));
-const action_1 = require("@uxf/ui/utils/action");
-const input_1 = require("@uxf/ui/input");
-exports.default = {
-    title: "UI/Input",
-    component: input_1.Input,
-};
-function Default() {
-    const [value, onChange] = (0, react_1.useState)("");
-    const [isInvalid, setInvalid] = (0, react_1.useState)(false);
-    return (<div className="space-y-2">
-      <input type="checkbox" checked={isInvalid} onChange={(e) => setInvalid(e.target.checked)}/>
-      <input_1.Input>
-        <input_1.Input.LeftAddon>InputLeftAddon</input_1.Input.LeftAddon>
-        <input_1.Input.LeftElement>InputLeftElement</input_1.Input.LeftElement>
-        <input_1.Input.Element value={value} onChange={(0, action_1.action)("onChange", onChange)} placeholder="Placeholder" isInvalid={isInvalid}/>
-        <input_1.Input.RightElement>InputRightElement</input_1.Input.RightElement>
-        <input_1.Input.RightAddon>InputRightAddon</input_1.Input.RightAddon>
-      </input_1.Input>
-      <input_1.Input>
-        <input_1.Input.LeftAddon>https://</input_1.Input.LeftAddon>
-        <input_1.Input.Element value={value} onChange={(0, action_1.action)("onChange", onChange)} placeholder="Placeholder" isInvalid={isInvalid}/>
-        <input_1.Input.RightAddon>.uxf.cz</input_1.Input.RightAddon>
-      </input_1.Input>
-      <input_1.Input>
-        <input_1.Input.LeftElement>🌷</input_1.Input.LeftElement>
-        <input_1.Input.Element value={value} onChange={(0, action_1.action)("onChange", onChange)} placeholder="Placeholder" isInvalid={isInvalid}/>
-        <input_1.Input.RightElement>🔔</input_1.Input.RightElement>
-      </input_1.Input>
-      <input_1.Input>
-        <input_1.Input.Element value={value} onChange={(0, action_1.action)("onChange", onChange)} placeholder="Placeholder" isInvalid={isInvalid}/>
-      </input_1.Input>
-    </div>);
-}
-exports.Default = Default;
-function ComponentStructure() {
-    const [value, onChange] = (0, react_1.useState)("");
-    return (<component_structure_analyzer_1.default>
-      <input_1.Input>
-        <input_1.Input.LeftAddon>Left addon</input_1.Input.LeftAddon>
-        <input_1.Input.LeftElement>Left element</input_1.Input.LeftElement>
-        <input_1.Input.Element value={value} onChange={onChange}/>
-        <input_1.Input.RightElement>Right element</input_1.Input.RightElement>
-        <input_1.Input.RightAddon>Right addon</input_1.Input.RightAddon>
-      </input_1.Input>
-    </component_structure_analyzer_1.default>);
-}
-exports.ComponentStructure = ComponentStructure;

package/input/input.stories.tsx

@@ -1,79 +0,0 @@
-import React, { useState } from "react";
-import ComponentStructureAnalyzer from "@uxf/ui/utils/component-structure-analyzer";
-import { action } from "@uxf/ui/utils/action";
-import { Input } from "@uxf/ui/input";
-
-export default {
-  title: "UI/Input",
-  component: Input,
-};
-
-export function Default() {
-  const [value, onChange] = useState("");
-  const [isInvalid, setInvalid] = useState(false);
-
-  return (
-    <div className="space-y-2">
-      <input
-        type="checkbox"
-        checked={isInvalid}
-        onChange={(e) => setInvalid(e.target.checked)}
-      />
-      <Input>
-        <Input.LeftAddon>InputLeftAddon</Input.LeftAddon>
-        <Input.LeftElement>InputLeftElement</Input.LeftElement>
-        <Input.Element
-          value={value}
-          onChange={action("onChange", onChange)}
-          placeholder="Placeholder"
-          isInvalid={isInvalid}
-        />
-        <Input.RightElement>InputRightElement</Input.RightElement>
-        <Input.RightAddon>InputRightAddon</Input.RightAddon>
-      </Input>
-      <Input>
-        <Input.LeftAddon>https://</Input.LeftAddon>
-        <Input.Element
-          value={value}
-          onChange={action("onChange", onChange)}
-          placeholder="Placeholder"
-          isInvalid={isInvalid}
-        />
-        <Input.RightAddon>.uxf.cz</Input.RightAddon>
-      </Input>
-      <Input>
-        <Input.LeftElement>🌷</Input.LeftElement>
-        <Input.Element
-          value={value}
-          onChange={action("onChange", onChange)}
-          placeholder="Placeholder"
-          isInvalid={isInvalid}
-        />
-        <Input.RightElement>🔔</Input.RightElement>
-      </Input>
-      <Input>
-        <Input.Element
-          value={value}
-          onChange={action("onChange", onChange)}
-          placeholder="Placeholder"
-          isInvalid={isInvalid}
-        />
-      </Input>
-    </div>
-  );
-}
-
-export function ComponentStructure() {
-  const [value, onChange] = useState("");
-  return (
-    <ComponentStructureAnalyzer>
-      <Input>
-        <Input.LeftAddon>Left addon</Input.LeftAddon>
-        <Input.LeftElement>Left element</Input.LeftElement>
-        <Input.Element value={value} onChange={onChange} />
-        <Input.RightElement>Right element</Input.RightElement>
-        <Input.RightAddon>Right addon</Input.RightAddon>
-      </Input>
-    </ComponentStructureAnalyzer>
-  );
-}