@geckou/ui-react 0.1.1 → 0.3.0

package/dist/components/ModalBox.js

@@ -0,0 +1,83 @@
+"use client";
+import { jsx as e, jsxs as c } from "react/jsx-runtime";
+import { useId as p, useRef as f, useEffect as d } from "react";
+const v = {
+  small: "max-w-[var(--mobile-lower-width,430px)]",
+  medium: "max-w-[var(--desktop-lower-width,1025px)]",
+  large: "max-w-[var(--contents-max-width,1440px)]"
+};
+function x() {
+  return /* @__PURE__ */ e(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 -960 960 960",
+      fill: "currentColor",
+      children: /* @__PURE__ */ e("path", { d: "m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z" })
+    }
+  );
+}
+function w({
+  isShown: r,
+  size: s = "medium",
+  onClose: t,
+  header: l,
+  footer: o,
+  children: u,
+  ariaLabel: n
+}) {
+  const i = p(), m = f(null);
+  return d(() => (r ? document.body.style.overflow = "hidden" : document.body.style.overflow = "", () => {
+    document.body.style.overflow = "";
+  }), [r]), d(() => {
+    var a;
+    r && ((a = m.current) == null || a.focus());
+  }, [r]), /* @__PURE__ */ e(
+    "div",
+    {
+      className: `fixed top-0 left-0 z-50 flex h-dvh w-dvw cursor-pointer items-center justify-center overflow-hidden bg-[#33333380] p-[var(--sp-larger,3rem)] backdrop-blur-sm transition-opacity duration-100 max-md:px-[var(--sp-large,1.5rem)] ${r ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0"}`,
+      "aria-hidden": !r,
+      inert: !r,
+      onClick: (a) => {
+        a.target === a.currentTarget && t();
+      },
+      children: /* @__PURE__ */ c(
+        "div",
+        {
+          ref: m,
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-labelledby": l ? i : void 0,
+          "aria-label": l ? void 0 : n ?? "ダイアログ",
+          tabIndex: -1,
+          className: `relative flex max-h-full w-full cursor-auto flex-col rounded-[var(--radius-small,0.1875rem)] bg-white drop-shadow-[0_0_6px_#33333355] ${v[s]}`,
+          children: [
+            l && /* @__PURE__ */ e(
+              "header",
+              {
+                id: i,
+                className: "border-b border-[#eee] px-[var(--sp-large,1.5rem)] py-[var(--sp-medium,0.75rem)] max-md:p-[var(--sp-medium,0.75rem)] [&>h2]:font-bold [&>h2]:text-[var(--fs-large,0.875rem)]",
+                children: l
+              }
+            ),
+            /* @__PURE__ */ e("div", { className: "flex-auto overflow-auto p-[var(--sp-large,1.5rem)] max-md:p-[var(--sp-medium,0.75rem)]", children: u }),
+            o && /* @__PURE__ */ e("footer", { className: "flex justify-center gap-[var(--sp-large,1.5rem)] border-t border-[#eee] px-[var(--sp-large,1.5rem)] py-[var(--sp-medium,0.75rem)] max-md:gap-[var(--sp-medium,0.75rem)] max-md:p-[var(--sp-medium,0.75rem)] max-md:[&>*]:flex-auto", children: o }),
+            /* @__PURE__ */ e(
+              "button",
+              {
+                type: "button",
+                "aria-label": "閉じる",
+                className: "absolute bottom-full left-full size-[var(--icon-medium,1.125rem)] cursor-pointer leading-none text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white [&>*]:size-full",
+                onClick: t,
+                children: /* @__PURE__ */ e(x, {})
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+export {
+  w as ModalBox
+};

package/dist/components/PopupBox.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode, Ref } from 'react';
+export type PopupBoxHandle = {
+    showPopup: () => void;
+};
+type Props = {
+    position?: {
+        x: 'left' | 'right' | 'center';
+        y: 'top' | 'bottom' | 'center';
+    };
+    ref?: Ref<PopupBoxHandle>;
+    children: ReactNode;
+};
+export declare function PopupBox({ position, ref, children, }: Props): import('react').ReactPortal | null;
+export {};

package/dist/components/PopupBox.js

@@ -0,0 +1,41 @@
+"use client";
+import { jsx as i } from "react/jsx-runtime";
+import { useState as o, useRef as c, useEffect as l, useImperativeHandle as f } from "react";
+import { createPortal as p } from "react-dom";
+import { COLOR as d } from "@geckou/ui-core";
+const x = {
+  left: "left-[max(calc((100vw-64rem)/2),1rem)]",
+  right: "right-[max(calc((100vw-64rem)/2),1rem)]",
+  center: "inset-0 m-auto"
+}, S = {
+  top: "top-14",
+  bottom: "bottom-4",
+  center: "inset-0 m-auto"
+};
+function y({
+  position: t = { x: "right", y: "top" },
+  ref: n,
+  children: m
+}) {
+  const [u, r] = o(!1), [s, a] = o(!1), e = c(null);
+  return l(() => (a(!0), () => {
+    e.current && clearTimeout(e.current);
+  }), []), f(n, () => ({
+    showPopup: () => {
+      r(!0), e.current && clearTimeout(e.current), e.current = setTimeout(() => r(!1), 3e3);
+    }
+  })), s ? p(
+    /* @__PURE__ */ i(
+      "div",
+      {
+        style: { borderColor: d.blue },
+        className: `pointer-events-none fixed z-50 h-max w-max max-w-40 rounded-[var(--radius-small,0.1875rem)] border bg-white p-[var(--sp-medium,0.75rem)] transition-[transform,opacity] duration-300 ${x[t.x]} ${S[t.y]} ${u ? "opacity-100" : "opacity-0"}`,
+        children: m
+      }
+    ),
+    document.body
+  ) : null;
+}
+export {
+  y as PopupBox
+};

package/dist/components/RadioButtons.d.ts

@@ -0,0 +1,13 @@
+import { Option, RadioButtonStyleForEachStatus, SelectValue } from '../types';
+type Props = {
+    value: SelectValue;
+    onChange?: (newValue: SelectValue) => void;
+    options: Option[];
+    name?: string;
+    isDisabled?: boolean;
+    isRequired?: boolean;
+    cssStyle?: RadioButtonStyleForEachStatus;
+    isDisableAnimation?: boolean;
+};
+export declare function RadioButtons({ value, onChange, options, name, isDisabled, isRequired, cssStyle, isDisableAnimation, }: Props): import("react").JSX.Element;
+export {};

package/dist/components/RadioButtons.js

@@ -0,0 +1,64 @@
+"use client";
+import { jsxs as n, jsx as c } from "react/jsx-runtime";
+import { useId as h } from "react";
+import { COLOR as r } from "@geckou/ui-core";
+function R({
+  value: s,
+  onChange: t,
+  options: b,
+  name: f,
+  isDisabled: o,
+  isRequired: p,
+  cssStyle: e,
+  isDisableAnimation: m
+}) {
+  var d, i;
+  const _ = s ?? "", x = h(), v = f ?? x, k = o ? e == null ? void 0 : e.disabled : e == null ? void 0 : e.default, l = {
+    textColor: o ? r.darkGray : r.black,
+    backgroundColor: o ? r.lightGray : r.white,
+    border: {
+      color: o ? r.darkGray : r.blue,
+      size: "1px"
+    },
+    ...k ?? {}
+  }, g = {
+    "--text-color": l.textColor,
+    "--border-color": (d = l.border) == null ? void 0 : d.color,
+    "--border-size": (i = l.border) == null ? void 0 : i.size,
+    "--background-color": l.backgroundColor,
+    "--duration": m ? "0s" : ".3s"
+  };
+  return /* @__PURE__ */ n("div", { className: "flex flex-wrap items-center gap-4", children: [
+    /* @__PURE__ */ c("style", { children: "@keyframes uiRadioPop{0%{scale:1}10%{scale:.8}50%{scale:1.2}100%{scale:1}}" }),
+    b.map((a) => {
+      const u = a.value === _;
+      return /* @__PURE__ */ n(
+        "label",
+        {
+          style: g,
+          className: `relative grid cursor-pointer grid-cols-[auto_1fr] items-center gap-2 before:inline-block before:aspect-square before:w-4 before:rounded-full before:transition-all before:duration-(--duration) before:ease-linear before:content-[''] has-[input:disabled]:cursor-not-allowed has-[input:focus-visible]:outline-2 has-[input:focus-visible]:outline-offset-2 has-[input:focus-visible]:outline-(--border-color) ${u ? "text-(--text-color) before:animate-[uiRadioPop_var(--duration)_ease-out] before:bg-(--border-color) before:shadow-[0_0_0_2px_var(--background-color)_inset,0_0_0_1px_var(--border-color)]" : "text-(--border-color) before:bg-(--background-color) before:shadow-[0_0_0_1px_var(--border-color)_inset]"}`,
+          children: [
+            /* @__PURE__ */ c(
+              "input",
+              {
+                type: "radio",
+                name: v,
+                value: a.value,
+                disabled: o,
+                required: p,
+                checked: u,
+                onChange: () => t == null ? void 0 : t(a.value),
+                className: "sr-only"
+              }
+            ),
+            /* @__PURE__ */ c("span", { children: a.label })
+          ]
+        },
+        a.value
+      );
+    })
+  ] });
+}
+export {
+  R as RadioButtons
+};

package/dist/components/SearchableSelectBox.d.ts

@@ -0,0 +1,14 @@
+import { InputBoxStyleForEachStatus, Option } from '../types';
+type Props = {
+    options: Option[];
+    value: string;
+    onChange?: (newValue: string) => void;
+    onSelect?: (newValue: string) => void;
+    name: string;
+    placeholder?: string;
+    isDisabled?: boolean;
+    searchTarget?: 'label' | 'value';
+    cssStyle?: InputBoxStyleForEachStatus;
+};
+export declare function SearchableSelectBox({ options, value, onChange, onSelect, name, placeholder, isDisabled, searchTarget, cssStyle, }: Props): import("react").JSX.Element;
+export {};

package/dist/components/SearchableSelectBox.js

@@ -0,0 +1,61 @@
+"use client";
+import { jsxs as N, jsx as n } from "react/jsx-runtime";
+import { useState as p, useRef as v, useEffect as w } from "react";
+import { TextBox as S } from "./TextBox.js";
+function F({
+  options: i,
+  value: t,
+  onChange: s,
+  onSelect: o,
+  name: x,
+  placeholder: b = "入力してください",
+  isDisabled: h,
+  searchTarget: E = "label",
+  cssStyle: O
+}) {
+  const [l, a] = p(t), [k, c] = p(!1), u = v(null), d = v(t);
+  w(() => {
+    d.current !== t && (d.current = t, a(t));
+  }, [t]), w(() => {
+    const e = (r) => {
+      const f = u.current;
+      f && !f.contains(r.target) && c(!1);
+    };
+    return document.addEventListener("pointerdown", e), () => document.removeEventListener("pointerdown", e);
+  }, []);
+  const m = l ? i.filter(
+    (e) => String(e[E]).toLowerCase().includes(l.toLowerCase())
+  ) : i, B = (e) => {
+    const r = String(e);
+    a(r), c(!!r), s == null || s(r);
+  }, L = (e) => {
+    const r = e.value.toString();
+    a(r), c(!1), s == null || s(r), o == null || o(r);
+  };
+  return /* @__PURE__ */ N("div", { ref: u, className: "relative", children: [
+    /* @__PURE__ */ n(
+      S,
+      {
+        name: x,
+        value: l,
+        onChange: B,
+        isDisabled: h,
+        placeholder: b,
+        cssStyle: O
+      }
+    ),
+    k && m.length > 0 && /* @__PURE__ */ n("div", { className: "absolute top-[calc(100%-var(--sp-min,0.1875rem))] left-0 z-[2] max-h-[calc(var(--bv,0.375rem)*56)] min-w-full overflow-auto rounded-[var(--radius-small,0.1875rem)] bg-white py-[var(--sp-small,0.375rem)] shadow-[0_0_6px_#33333333]", children: m.map((e) => /* @__PURE__ */ n(
+      "button",
+      {
+        type: "button",
+        className: "block w-full cursor-pointer p-[var(--sp-medium,0.75rem)] text-left text-[length:var(--fs-small,0.6875rem)] text-[var(--link-color,#1c4ac9)] hover:bg-[var(--hover-color,#EEF7FB)] hover:transition-all hover:duration-100",
+        onClick: () => L(e),
+        children: e.label
+      },
+      e.value
+    )) })
+  ] });
+}
+export {
+  F as SearchableSelectBox
+};

package/dist/components/SelectBox.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+import { Option, InputBoxStyleForEachStatus, SelectValue } from '../types';
+type Props = {
+    options: Array<Option | Record<string, Option[]>>;
+    name: string;
+    value?: SelectValue;
+    onChange?: (newValue: SelectValue) => void;
+    cssStyle?: InputBoxStyleForEachStatus;
+    placeholder?: string;
+    canOmitSelect?: boolean;
+    isDisabled?: boolean;
+    isRequired?: boolean;
+    arrow?: ReactNode;
+};
+export declare function SelectBox({ options, name, value, onChange, cssStyle, placeholder, canOmitSelect, isDisabled, isRequired, arrow, }: Props): import("react").JSX.Element;
+export {};

package/dist/components/SelectBox.js

@@ -0,0 +1,107 @@
+"use client";
+import { jsxs as f, jsx as r } from "react/jsx-runtime";
+import { MESSAGES as I } from "@geckou/ui-core";
+import { useState as O, useRef as x, useEffect as V, Fragment as q } from "react";
+import { InputBox as w } from "./InputBox.js";
+import { ErrorMessage as D } from "./ErrorMessage.js";
+import { KeyboardArrowDownIcon as F } from "./icons/KeyboardArrowDownIcon.js";
+function p(t) {
+  return typeof t == "object" && t !== null && "label" in t && typeof t.label == "string" && "value" in t;
+}
+function P({
+  options: t,
+  name: g,
+  value: E,
+  onChange: u,
+  cssStyle: a,
+  placeholder: o = "選択してください",
+  canOmitSelect: M,
+  isDisabled: s,
+  isRequired: m,
+  arrow: A
+}) {
+  var b, h;
+  const [B, C] = O([]), l = E ?? "", c = () => {
+    const e = [];
+    l === "" && m && e.push(I.required), C(e);
+  }, N = x(l), v = x(!1);
+  V(() => {
+    if (!v.current) {
+      if (l === N.current) {
+        l !== "" && c();
+        return;
+      }
+      v.current = !0;
+    }
+    c();
+  }, [l]);
+  const j = t.flatMap(
+    (e) => p(e) ? [e] : Object.values(e).flat()
+  ), k = (e) => {
+    const n = j.find(
+      (d) => String(d.value) === e
+    );
+    u == null || u(n ? n.value : e);
+  };
+  return /* @__PURE__ */ f(
+    w,
+    {
+      cssStyle: a,
+      className: "inline-flex [&>select]:flex-auto [&>select]:cursor-pointer [&>select]:pe-8",
+      isDisabled: s,
+      children: [
+        /* @__PURE__ */ f(
+          "select",
+          {
+            name: g,
+            value: l,
+            disabled: s,
+            required: m,
+            onChange: (e) => k(e.target.value),
+            onBlur: () => c(),
+            children: [
+              M ? /* @__PURE__ */ r("option", { value: "", children: o || "選択しない" }) : /* @__PURE__ */ r("option", { disabled: !0, value: "", children: o || "選択してください" }),
+              ["0", "NA"].includes(l.toString()) && s && /* @__PURE__ */ r("option", { disabled: !0, value: l, children: o || "選択してください" }),
+              t.map(
+                (e) => p(e) ? /* @__PURE__ */ r(
+                  "option",
+                  {
+                    value: e.value,
+                    disabled: e.isDisabled,
+                    children: e.label
+                  },
+                  e.value
+                ) : /* @__PURE__ */ f(q, { children: [
+                  Object.entries(e).map(([n, d]) => /* @__PURE__ */ r("optgroup", { label: n, children: d.map((i) => /* @__PURE__ */ r(
+                    "option",
+                    {
+                      value: i.value,
+                      disabled: i.isDisabled,
+                      children: i.label
+                    },
+                    i.value
+                  )) }, n)),
+                  /* @__PURE__ */ r("hr", {})
+                ] }, Object.keys(e)[0])
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ r("div", { className: "pointer-events-none absolute inset-y-0 end-2 flex items-center [&>*]:h-4 [&>*]:fill-current [&>*]:text-current", children: A ?? /* @__PURE__ */ r(F, {}) }),
+        /* @__PURE__ */ r(
+          D,
+          {
+            errorMessages: B,
+            cssStyle: {
+              textColor: (b = a == null ? void 0 : a.error) == null ? void 0 : b.backgroundColor,
+              backgroundColor: (h = a == null ? void 0 : a.error) == null ? void 0 : h.textColor
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  P as SelectBox
+};

package/dist/components/SlideDownUi.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode, Ref } from 'react';
+export type SlideDownUiHandle = {
+    isOpenedContents: () => boolean;
+    close: () => void;
+};
+type Props = {
+    isOpened?: boolean | null;
+    isHiddenArrow?: boolean;
+    isDisabled?: boolean;
+    isDisableClickOutside?: boolean;
+    duration?: number;
+    trigger: ReactNode;
+    children: ReactNode;
+    ref?: Ref<SlideDownUiHandle>;
+};
+export declare function SlideDownUi({ isOpened, isHiddenArrow, isDisabled, isDisableClickOutside, duration, trigger, children, ref, }: Props): import("react").JSX.Element;
+export {};

package/dist/components/SlideDownUi.js

@@ -0,0 +1,86 @@
+"use client";
+import { jsxs as v, jsx as i } from "react/jsx-runtime";
+import { useState as a, useRef as h, useImperativeHandle as E, useEffect as l } from "react";
+import { KeyboardArrowDownIcon as I } from "./icons/KeyboardArrowDownIcon.js";
+import { COLOR as N } from "@geckou/ui-core";
+function $({
+  isOpened: n = null,
+  isHiddenArrow: p = !1,
+  isDisabled: b = !1,
+  isDisableClickOutside: f = !1,
+  duration: c = 0.3,
+  trigger: g,
+  children: w,
+  ref: x
+}) {
+  const [t, r] = a(n || !1), [C, u] = a(n || !1), [y, H] = a(0), d = h(null), m = h(null), R = () => r((e) => !e);
+  E(x, () => ({
+    isOpenedContents: () => t,
+    close: () => r(!1)
+  })), l(() => {
+    typeof n == "boolean" && r(n);
+  }, [n]), l(() => {
+    if (f)
+      return;
+    const e = (s) => {
+      const o = d.current;
+      o && !o.contains(s.target) && r(!1);
+    };
+    return document.addEventListener("pointerdown", e), () => document.removeEventListener("pointerdown", e);
+  }, [f]), l(() => {
+    const e = m.current;
+    if (!e)
+      return;
+    const s = () => H(e.clientHeight);
+    s();
+    const o = new ResizeObserver(s);
+    return o.observe(e), () => o.disconnect();
+  }, []), l(() => {
+    if (!t) {
+      u(!1);
+      return;
+    }
+    const e = setTimeout(() => u(!0), c * 1e3);
+    return () => clearTimeout(e);
+  }, [t, c]);
+  const k = { "--link-color": N.blue };
+  return /* @__PURE__ */ v("div", { ref: d, style: k, children: [
+    /* @__PURE__ */ v(
+      "button",
+      {
+        type: "button",
+        disabled: b,
+        "aria-expanded": t,
+        className: "relative grid w-full cursor-pointer grid-cols-[1fr_auto] items-center justify-items-start text-(--link-color)",
+        onClick: (e) => {
+          e.preventDefault(), R();
+        },
+        children: [
+          /* @__PURE__ */ i("div", { className: "w-full text-left", children: g }),
+          !p && /* @__PURE__ */ i(
+            I,
+            {
+              className: `size-[var(--icon-medium,1.125rem)] flex-none text-(--link-color) transition-all duration-100 ${t ? "rotate-180" : ""}`
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ i(
+      "div",
+      {
+        style: {
+          height: t ? `${y}px` : 0,
+          transitionDuration: `${c}s`,
+          overflow: C ? "visible" : "hidden"
+        },
+        inert: !t,
+        className: "transition-[height]",
+        children: /* @__PURE__ */ i("div", { ref: m, children: w })
+      }
+    )
+  ] });
+}
+export {
+  $ as SlideDownUi
+};

package/dist/components/TabUI.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+type Tab = {
+    key: string;
+    label: string;
+};
+type Props = {
+    tabs: Tab[];
+    color?: {
+        active: string;
+        background: string;
+        text: string;
+    };
+    initialIndex?: number;
+    tabSlots?: Record<string, ReactNode>;
+    panelSlots?: Record<string, ReactNode>;
+};
+export declare function TabUI({ tabs, color, initialIndex, tabSlots, panelSlots, }: Props): import("react").JSX.Element;
+export {};

package/dist/components/TabUI.js

@@ -0,0 +1,76 @@
+"use client";
+import { jsxs as I, jsx as k } from "react/jsx-runtime";
+import { useState as $, useRef as v, useId as w } from "react";
+import { COLOR as T } from "@geckou/ui-core";
+function C({
+  tabs: r,
+  color: t,
+  initialIndex: p = 0,
+  tabSlots: d,
+  panelSlots: y
+}) {
+  const [c, o] = $(
+    () => {
+      var e, n;
+      return ((e = r[p]) == null ? void 0 : e.key) ?? ((n = r[0]) == null ? void 0 : n.key) ?? "";
+    }
+  ), s = v([]), a = w(), u = (e) => `${a}-tab-${e}`, f = (e) => `${a}-panel-${e}`, m = (e) => o(e), l = (e) => {
+    var n;
+    o(r[e].key), (n = s.current[e]) == null || n.focus();
+  }, h = (e) => {
+    if (e.key !== "ArrowLeft" && e.key !== "ArrowRight")
+      return;
+    const n = r.findIndex((g) => g.key === c);
+    if (n === -1)
+      return;
+    e.preventDefault();
+    const i = r.length - 1;
+    e.key === "ArrowLeft" ? l(n > 0 ? n - 1 : i) : l(n < i ? n + 1 : 0);
+  }, x = {
+    "--active-color": (t == null ? void 0 : t.active) || T.blue,
+    "--background-color": (t == null ? void 0 : t.background) || "transparent"
+  };
+  return /* @__PURE__ */ I("div", { children: [
+    /* @__PURE__ */ k(
+      "div",
+      {
+        style: x,
+        className: "flex bg-(--background-color)",
+        role: "tablist",
+        onKeyDown: h,
+        children: r.map((e, n) => /* @__PURE__ */ k(
+          "button",
+          {
+            id: u(e.key),
+            ref: (i) => {
+              s.current[n] = i;
+            },
+            type: "button",
+            role: "tab",
+            "aria-controls": f(e.key),
+            "aria-selected": c === e.key,
+            tabIndex: c === e.key ? 0 : -1,
+            className: `border-none bg-transparent px-4 py-2 text-base ${c === e.key ? "cursor-auto" : "cursor-pointer"}`,
+            onClick: () => m(e.key),
+            children: (d == null ? void 0 : d[e.key]) ?? e.label
+          },
+          e.key
+        ))
+      }
+    ),
+    r.map((e) => /* @__PURE__ */ k(
+      "div",
+      {
+        id: f(e.key),
+        role: "tabpanel",
+        "aria-labelledby": u(e.key),
+        hidden: c !== e.key,
+        children: y == null ? void 0 : y[`${e.key}Contents`]
+      },
+      `${e.key}_panel`
+    ))
+  ] });
+}
+export {
+  C as TabUI
+};

package/dist/components/TextArea.d.ts

@@ -0,0 +1,18 @@
+import { InputBoxStyleForEachStatus, Validates } from '../types';
+type InputValue = string | null;
+type Props = {
+    name: string;
+    value?: InputValue;
+    onChange?: (newValue: InputValue) => void;
+    cssStyle?: InputBoxStyleForEachStatus;
+    placeholder?: string;
+    isDisabled?: boolean;
+    isRequired?: boolean;
+    rows?: number;
+    maxLength?: number;
+    autocomplete?: string;
+    validates?: Validates;
+    autoAdjustHeight?: boolean;
+};
+export declare function TextArea({ name, value, onChange, cssStyle, placeholder, isDisabled, isRequired, rows, maxLength, autocomplete, validates, autoAdjustHeight, }: Props): import("react").JSX.Element;
+export {};