@mittwald/flow-react-components 0.1.0-alpha.43 → 0.1.0-alpha.430

package/dist/js/SettingsProvider-D9oDS5r9.js

@@ -0,0 +1,98 @@
+"use client"
+/* */
+var y = Object.defineProperty;
+var J = (s, t, e) => t in s ? y(s, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[t] = e;
+var c = (s, t, e) => J(s, typeof t != "symbol" ? t + "" : t, e);
+import O, { createContext as b, useContext as v, useRef as x, useMemo as K, useEffect as j } from "react";
+import { makeAutoObservable as l, ObservableMap as a, toJS as E, autorun as P } from "mobx";
+import { getAsyncResource as R } from "@mittwald/react-use-promise";
+import { mapValues as g } from "remeda";
+const h = (s) => Object.fromEntries(s.entries());
+class i {
+  constructor(t = new a()) {
+    c(this, "settings");
+    this.settings = t, l(this);
+  }
+  set(t, e, n) {
+    this.settings.set(t, e.parse(E(n)));
+  }
+  get(t, e) {
+    return e.parse(this.settings.get(t));
+  }
+  clear(t) {
+    this.settings.delete(t);
+  }
+  get asJson() {
+    return g(h(this.settings), (t) => JSON.stringify(t));
+  }
+  static fromJson(t) {
+    return new i(
+      new a(
+        g(t, (e) => typeof e == "string" ? JSON.parse(e) : e)
+      )
+    );
+  }
+}
+class u {
+  constructor(t = new a()) {
+    c(this, "componentSettings");
+    this.componentSettings = t, l(this);
+  }
+  set(t, e, n, o) {
+    const r = this.componentSettings.get(t) ?? new i();
+    r.set(e, n, o), this.componentSettings.set(t, r);
+  }
+  get(t, e, n) {
+    return (this.componentSettings.get(t) ?? new i()).get(e, n);
+  }
+  clear(t, e) {
+    var n;
+    (n = this.componentSettings.get(t)) == null || n.clear(e);
+  }
+  get asJson() {
+    return g(h(this.componentSettings), (t) => t.asJson);
+  }
+  static fromJson(t) {
+    const e = g(t, (n) => i.fromJson(n));
+    return new u(new a(e));
+  }
+}
+class A {
+  constructor(t) {
+    c(this, "storageKey");
+    this.storageKey = t;
+  }
+  async load() {
+    const t = localStorage.getItem(this.storageKey);
+    return t === null ? {} : JSON.parse(t);
+  }
+  async store(t) {
+    localStorage.setItem(this.storageKey, JSON.stringify(t));
+  }
+}
+const I = (s) => {
+  switch (s.type) {
+    case "custom":
+      return s.store;
+    case "localStorage":
+      return new A(s.storageKey);
+  }
+  throw new Error(`Unsupported setting backend: ${s}`);
+}, p = b(void 0), F = () => v(p), L = (s) => {
+  const { children: t, id: e, ...n } = s, o = I(n), r = R(() => o.load(), [], {
+    loaderId: e
+  }), f = r.use(), m = x(Promise.resolve()), S = K(
+    () => u.fromJson(f),
+    [e]
+  ), d = () => {
+    const w = S.asJson;
+    m.current = m.current.then(async () => {
+      await o.store(w), r.refresh();
+    });
+  };
+  return j(() => P(d), [e]), /* @__PURE__ */ O.createElement(p.Provider, { value: S }, t);
+};
+export {
+  L as S,
+  F as u
+};

package/dist/js/SettingsProvider.js

@@ -0,0 +1,7 @@
+"use client"
+/* */
+import { S as t } from "./SettingsProvider-D9oDS5r9.js";
+export {
+  t as SettingsProvider,
+  t as default
+};

package/dist/js/Skeleton-CKLaTmDR.js

@@ -0,0 +1,22 @@
+"use client"
+/* */
+import r from "react";
+import m from "clsx";
+const a = "flow--skeleton", c = "flow--skeleton--shimmer", i = {
+  skeleton: a,
+  shimmer: c
+}, d = (e) => {
+  const { width: s, height: t, className: o, ...l } = e, n = m(i.skeleton, o);
+  return /* @__PURE__ */ r.createElement(
+    "div",
+    {
+      className: n,
+      "aria-hidden": !0,
+      style: { height: t, width: s },
+      ...l
+    }
+  );
+};
+export {
+  d as S
+};

package/dist/js/Skeleton.js

@@ -0,0 +1,7 @@
+"use client"
+/* */
+import { S as o } from "./Skeleton-CKLaTmDR.js";
+export {
+  o as Skeleton,
+  o as default
+};

package/dist/js/SkeletonText-B5ZghZhO.js

@@ -0,0 +1,13 @@
+"use client"
+/* */
+import e from "react";
+const l = "flow--skeleton-text", r = "flow--skeleton-text--shimmer", m = {
+  skeletonText: l,
+  shimmer: r
+}, i = (t) => {
+  const { width: s, style: o = {}, ...n } = t;
+  return /* @__PURE__ */ e.createElement("div", { "aria-hidden": !0, style: { width: s, ...o }, ...n }, /* @__PURE__ */ e.createElement("div", { className: m.skeletonText }));
+};
+export {
+  i as S
+};

package/dist/js/SkeletonText.js

@@ -0,0 +1,7 @@
+"use client"
+/* */
+import { S as t } from "./SkeletonText-B5ZghZhO.js";
+export {
+  t as SkeletonText,
+  t as default
+};

package/dist/js/Slider.js

@@ -0,0 +1,104 @@
+"use client"
+/* */
+import e from "react";
+import { f as E } from "./flowComponent-B1r5sCmz.js";
+import * as n from "react-aria-components";
+import h from "clsx";
+import "./propsContext-DzAKlmhS.js";
+import { PropsContextProvider as v } from "./PropsContextProvider.js";
+import "@react-aria/utils";
+import "remeda";
+import { B as i } from "./Button-E4IPlAeV.js";
+import "@tabler/icons-react";
+import "./Icon-mUEZToWz.js";
+import { I as w, a as N } from "./IconPlus-DtViS5Ul.js";
+import { useLocalizedStringFormatter as k } from "react-aria";
+const x = "flow--slider", P = "flow--slider--text", S = "flow--slider--value", T = "flow--slider--track", g = "flow--slider--fill", y = "flow--slider--initial-marker", F = "flow--slider--thumb", I = "flow--slider--increment", M = "flow--slider--decrement", C = "flow--slider--disabled", r = {
+  slider: x,
+  text: P,
+  value: S,
+  track: T,
+  fill: g,
+  initialMarker: y,
+  thumb: F,
+  increment: I,
+  decrement: M,
+  disabled: C
+}, z = { "de-DE": {
+  "slider.decrement": "Wert verkleinern",
+  "slider.increment": "Wert erhöhen"
+}, "en-EN": {
+  "slider.decrement": "Decrement value",
+  "slider.increment": "Increment value"
+} }, H = E("Slider", (m) => {
+  const {
+    className: c,
+    children: o,
+    name: d,
+    isDisabled: t,
+    defaultValue: l,
+    showInitialMarker: u,
+    ...f
+  } = m, p = h(
+    r.slider,
+    t && r.disabled,
+    c
+  ), s = k(z), b = {
+    Label: {
+      unstyled: !0
+    }
+  };
+  return /* @__PURE__ */ e.createElement(
+    n.Slider,
+    {
+      className: p,
+      isDisabled: t,
+      defaultValue: l,
+      ...f
+    },
+    /* @__PURE__ */ e.createElement("div", { className: r.text }, /* @__PURE__ */ e.createElement(n.SliderOutput, { className: r.value }), /* @__PURE__ */ e.createElement(v, { props: b }, o)),
+    /* @__PURE__ */ e.createElement(n.SliderTrack, { className: r.track }, ({ state: a }) => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(
+      i,
+      {
+        onPress: () => a.decrementThumb(0),
+        "aria-label": s.format("slider.decrement"),
+        size: "s",
+        variant: "plain",
+        className: r.decrement,
+        isDisabled: t,
+        excludeFromTabOrder: !0
+      },
+      /* @__PURE__ */ e.createElement(w, null)
+    ), /* @__PURE__ */ e.createElement(
+      i,
+      {
+        onPress: () => a.incrementThumb(0),
+        "aria-label": s.format("slider.increment"),
+        size: "s",
+        variant: "plain",
+        className: r.increment,
+        isDisabled: t,
+        excludeFromTabOrder: !0
+      },
+      /* @__PURE__ */ e.createElement(N, null)
+    ), /* @__PURE__ */ e.createElement(
+      "div",
+      {
+        className: r.fill,
+        style: { width: a.getThumbPercent(0) * 100 + "%" }
+      }
+    ), u && l && typeof l == "number" && /* @__PURE__ */ e.createElement(
+      "div",
+      {
+        className: r.initialMarker,
+        style: {
+          left: `calc(${a.getValuePercent(l) * 100}% - 2px)`
+        }
+      }
+    ), /* @__PURE__ */ e.createElement(n.SliderThumb, { name: d, className: r.thumb })))
+  );
+});
+export {
+  H as Slider,
+  H as default
+};

package/dist/js/Switch-BzPC0UXq.js

@@ -0,0 +1,39 @@
+"use client"
+/* */
+import e from "react";
+import * as n from "react-aria-components";
+import p from "clsx";
+import "@tabler/icons-react";
+import "./Icon-mUEZToWz.js";
+import { I as f } from "./IconCheck-y0I90xlL.js";
+import { I as h } from "./IconClose-njz0vW4D.js";
+import { L as w } from "./Label-p9Kj8evJ.js";
+import { C as b } from "./ClearPropsContext-CUvsbMn8.js";
+import "./propsContext-DzAKlmhS.js";
+import "@react-aria/utils";
+import "remeda";
+import "dot-prop";
+import { f as d } from "./flowComponent-B1r5sCmz.js";
+const E = "flow--switch--track", C = "flow--switch--handle", N = "flow--switch--label", t = {
+  switch: "flow--switch",
+  "label-leading": "flow--switch--label-leading",
+  track: E,
+  handle: C,
+  label: N
+}, R = d("Switch", (a) => {
+  const {
+    children: l,
+    className: o,
+    labelPosition: r = "trailing",
+    refProp: s,
+    ...c
+  } = a, m = p(
+    t.switch,
+    t[`label-${r}`],
+    o
+  );
+  return /* @__PURE__ */ e.createElement(b, null, /* @__PURE__ */ e.createElement(n.Switch, { ...c, className: m, ref: s }, ({ isSelected: i }) => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { className: t.track }, /* @__PURE__ */ e.createElement("div", { className: t.handle }, i ? /* @__PURE__ */ e.createElement(f, { size: "s" }) : /* @__PURE__ */ e.createElement(h, { size: "s" }))), l && /* @__PURE__ */ e.createElement(w, { className: t.label }, l))));
+});
+export {
+  R as S
+};

package/dist/js/Switch.js

@@ -0,0 +1,7 @@
+"use client"
+/* */
+import { S as a } from "./Switch-BzPC0UXq.js";
+export {
+  a as Switch,
+  a as default
+};

package/dist/js/Table-D9mxW7Dh.js

@@ -0,0 +1,73 @@
+"use client"
+/* */
+import r, { Suspense as d } from "react";
+import * as c from "react-aria-components";
+import m from "clsx";
+import { S as f } from "./SkeletonText-B5ZghZhO.js";
+const w = "flow--table--table-container", N = "flow--table", h = "flow--table--column", u = "flow--table--cell", C = "flow--table--header", T = "flow--table--body", g = "flow--table--row", E = "flow--table--footer", n = {
+  tableContainer: w,
+  table: N,
+  column: h,
+  cell: u,
+  "horizontal-align-center": "flow--table--horizontal-align-center",
+  header: C,
+  body: T,
+  row: g,
+  footer: E,
+  "vertical-align-middle": "flow--table--vertical-align-middle"
+}, x = (t) => {
+  const { children: a, className: e, ...l } = t, o = m(n.body, e);
+  return /* @__PURE__ */ r.createElement(c.TableBody, { className: o, ...l }, a);
+}, A = (t) => {
+  const {
+    children: a,
+    className: e,
+    rowHeader: l,
+    horizontalAlign: o = "start",
+    ...s
+  } = t, i = m(
+    n.cell,
+    n[`horizontal-align-${o}`],
+    e
+  ), b = /* @__PURE__ */ r.createElement(d, { fallback: /* @__PURE__ */ r.createElement(f, { width: "100px" }) }, a);
+  return l ? /* @__PURE__ */ r.createElement(p, { className: i, ...s }, b) : /* @__PURE__ */ r.createElement(c.Cell, { className: i, ...s }, b);
+}, p = (t) => {
+  const { children: a, className: e, horizontalAlign: l = "start", ...o } = t, s = m(
+    n.column,
+    n[`horizontal-align-${l}`],
+    e
+  );
+  return /* @__PURE__ */ r.createElement(c.Column, { isRowHeader: !0, className: s, ...o }, a);
+}, H = (t) => {
+  const { children: a, className: e, ...l } = t, o = m(n.header, e);
+  return /* @__PURE__ */ r.createElement(c.TableHeader, { className: o, ...l }, a);
+}, R = (t) => {
+  const { children: a, className: e, footer: l, ...o } = t;
+  return /* @__PURE__ */ r.createElement(
+    c.Row,
+    {
+      className: (s) => m(
+        n.row,
+        l && n.footer,
+        typeof e == "function" ? e(s) : e
+      ),
+      ...o
+    },
+    a
+  );
+}, S = (t) => {
+  const { children: a, className: e, verticalAlign: l = "top", ...o } = t, s = m(
+    n.table,
+    n[`vertical-align-${l}`],
+    e
+  );
+  return /* @__PURE__ */ r.createElement("div", { className: n.tableContainer }, /* @__PURE__ */ r.createElement(c.Table, { className: s, ...o }, a));
+};
+export {
+  R as T,
+  S as a,
+  x as b,
+  A as c,
+  p as d,
+  H as e
+};

package/dist/js/Table.js

@@ -0,0 +1,16 @@
+"use client"
+/* */
+import { T as a, a as t } from "./Table-D9mxW7Dh.js";
+import { b as m, c as f, d as c, e as d } from "./Table-D9mxW7Dh.js";
+import o from "react";
+const b = (e) => /* @__PURE__ */ o.createElement(a, { ...e, footer: !0 });
+export {
+  t as Table,
+  m as TableBody,
+  f as TableCell,
+  c as TableColumn,
+  b as TableFooterRow,
+  d as TableHeader,
+  a as TableRow,
+  t as default
+};

package/dist/js/Tabs.js

@@ -0,0 +1,163 @@
+"use client"
+/* */
+import e, { useRef as N, useState as w, useEffect as M, useId as g, createContext as I, useContext as P } from "react";
+import * as T from "react-aria-components";
+import b from "clsx";
+import { TunnelExit as C, TunnelProvider as y, TunnelEntry as p } from "@mittwald/react-tunnel";
+import { f as S } from "./flowComponent-B1r5sCmz.js";
+import { useCallbackRef as O } from "use-callback-ref";
+import { a as A, C as B } from "./ContextMenuTrigger-Bc1ziP-n.js";
+import { M as K } from "./MenuItem-C6RgW6U3.js";
+import "./ContextMenuSection-D1i0qzNl.js";
+import { B as L } from "./Button-E4IPlAeV.js";
+import "@tabler/icons-react";
+import "./Icon-mUEZToWz.js";
+import { I as W } from "./IconContextMenu-B1vHRnf5.js";
+import { T as F } from "./Text-B17xjuUC.js";
+import "./propsContext-DzAKlmhS.js";
+import { PropsContextProvider as R } from "./PropsContextProvider.js";
+import "@react-aria/utils";
+import "remeda";
+import { A as x } from "./Activity-BtRjnhmA.js";
+const $ = "flow--tabs", j = "flow--tabs--list", q = {
+  tabs: $,
+  list: j
+}, z = "flow--tabs--tab-list", D = "flow--tabs--tab-list--context-menu-button", G = "flow--tabs--tab-list--titles", H = "flow--tabs--tab-list--collapsed", f = {
+  tabList: z,
+  contextMenuButton: D,
+  titles: G,
+  collapsed: H
+}, J = () => {
+  const o = N(), [n, r] = w(!1), a = O(null, (t) => {
+    s(), c(t);
+  }), l = ([
+    t
+  ]) => {
+    t && r(!t.isIntersecting);
+  }, c = (t = a.current) => {
+    if (t && t instanceof Element) {
+      const m = new IntersectionObserver(l, {
+        root: t.parentElement,
+        // 1 = invoke callback when the element is 100% visible within the parent element
+        threshold: 1
+      });
+      o.current = m, m.observe(t);
+    }
+  }, s = () => {
+    var t;
+    (t = o.current) == null || t.disconnect();
+  };
+  return M(() => (c(), s), [o.current]), {
+    ref: a,
+    isOverflowing: n
+  };
+}, Q = "flow--tabs--tab-title", U = "flow--tabs--tab-title--text", V = "flow--tabs--tab-title--menu-item", E = {
+  tabTitle: Q,
+  text: U,
+  menuItem: V
+}, X = (o) => {
+  const { className: n, ...r } = o, a = b(n, E.tabTitle);
+  return /* @__PURE__ */ e.createElement("div", { ...r, className: a, "data-selected": !0 }, /* @__PURE__ */ e.createElement(C, { id: "ActiveTitle" }));
+}, Y = (o) => {
+  const { selection: n, disabledKeys: r, onContextMenuSelectionChange: a } = o, l = g(), c = J(), s = c.isOverflowing, t = b(f.tabList, s && f.collapsed), m = (v) => {
+    a(v);
+  }, u = /* @__PURE__ */ e.createElement(T.TabList, { className: f.titles, ref: c.ref }, /* @__PURE__ */ e.createElement(C, { id: "Titles" })), d = s && /* @__PURE__ */ e.createElement(X, { id: l }), i = s && /* @__PURE__ */ e.createElement(A, null, /* @__PURE__ */ e.createElement(
+    L,
+    {
+      variant: "soft",
+      className: f.contextMenuButton,
+      color: "secondary",
+      "aria-labelledby": l
+    },
+    /* @__PURE__ */ e.createElement(W, null)
+  ), /* @__PURE__ */ e.createElement(
+    B,
+    {
+      disabledKeys: r,
+      selectedKeys: n ? [n] : void 0,
+      selectionMode: "navigation",
+      onAction: (v) => m(v)
+    },
+    /* @__PURE__ */ e.createElement(C, { id: "ContextMenuItems" })
+  ));
+  return /* @__PURE__ */ e.createElement("div", { className: t }, u, d, i);
+}, ve = S("Tabs", (o) => {
+  const {
+    children: n,
+    className: r,
+    defaultSelectedKey: a,
+    disabledKeys: l,
+    refProp: c,
+    onSelectionChange: s,
+    ...t
+  } = o, m = b(q.tabs, r), [u, d] = w(
+    a
+  );
+  return /* @__PURE__ */ e.createElement(y, null, n, /* @__PURE__ */ e.createElement(
+    T.Tabs,
+    {
+      slot: null,
+      className: m,
+      ...t,
+      selectedKey: u,
+      onSelectionChange: (i) => {
+        d(i), s && s(i);
+      },
+      disabledKeys: l,
+      ref: c
+    },
+    /* @__PURE__ */ e.createElement(
+      Y,
+      {
+        selection: u,
+        onContextMenuSelectionChange: (i) => {
+          d(i), s && s(i);
+        },
+        disabledKeys: l
+      }
+    ),
+    /* @__PURE__ */ e.createElement(C, { id: "Panels" })
+  ));
+}), h = I({
+  id: "undefined"
+}), Z = () => P(h), _ = h.Provider, xe = (o) => {
+  const { children: n, className: r, ...a } = o, { id: l } = Z(), c = b(E.tabTitle, r);
+  return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(p, { id: "Titles" }, /* @__PURE__ */ e.createElement(T.Tab, { ...a, id: l, className: c }, (s) => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(F, { emulateBoldWidth: !0 }, /* @__PURE__ */ e.createElement("span", { className: E.text }, n)), /* @__PURE__ */ e.createElement(p, { id: "ActiveTitle" }, s.isSelected && n)))), /* @__PURE__ */ e.createElement(p, { id: "ContextMenuItems" }, /* @__PURE__ */ e.createElement(K, { className: E.menuItem, id: l }, n)));
+}, k = "flow--tabs--tab--tab-panel", ee = {
+  tabPanel: k
+}, we = (o) => {
+  const { children: n, className: r, id: a, ...l } = o, c = b(ee.tabPanel, r), s = g(), t = a ?? s, m = (u) => {
+    const d = u.state.selectedKey === t, i = {
+      Content: {
+        wrapWith: /* @__PURE__ */ e.createElement(x, { isActive: d })
+      },
+      Section: {
+        wrapWith: /* @__PURE__ */ e.createElement(x, { isActive: d })
+      }
+    };
+    return /* @__PURE__ */ e.createElement(
+      R,
+      {
+        props: i,
+        dependencies: [d, n]
+      },
+      n
+    );
+  };
+  return /* @__PURE__ */ e.createElement(p, { id: "Panels" }, /* @__PURE__ */ e.createElement(_, { value: { id: t } }, /* @__PURE__ */ e.createElement(
+    T.TabPanel,
+    {
+      className: c,
+      shouldForceMount: !0,
+      id: t,
+      ...l
+    },
+    m
+  )));
+};
+export {
+  we as Tab,
+  xe as TabTitle,
+  ve as Tabs,
+  ve as default
+};

package/dist/js/Text-B17xjuUC.js

@@ -0,0 +1,53 @@
+"use client"
+/* */
+import t from "react";
+import * as E from "react-aria-components";
+import { C as u } from "./ClearPropsContext-CUvsbMn8.js";
+import { PropsContextProvider as T } from "./PropsContextProvider.js";
+import "@react-aria/utils";
+import "./propsContext-DzAKlmhS.js";
+import "remeda";
+import w from "invariant";
+import { f as C } from "./flowComponent-B1r5sCmz.js";
+import { E as h } from "./EmulatedBoldText-Dtox8Wd1.js";
+import { W as y } from "./Wrap-DGT1h1o3.js";
+import P from "clsx";
+const k = "flow--text", N = "flow--text--light", W = "flow--text--dark", o = {
+  text: k,
+  light: N,
+  dark: W,
+  "align-start": "flow--text--align-start",
+  "align-center": "flow--text--align-center",
+  "align-end": "flow--text--align-end"
+}, F = C("Text", (r) => {
+  const {
+    children: i,
+    className: c,
+    elementType: e = "span",
+    emulateBoldWidth: p,
+    refProp: n,
+    color: l,
+    align: a = "start",
+    ...f
+  } = r, x = P(
+    o.text,
+    l && o[l],
+    a && o[`align-${a}`],
+    c
+  ), m = { ...f, className: x }, g = {
+    Link: {
+      inline: !0
+    }
+  }, s = /* @__PURE__ */ t.createElement(T, { props: g }, /* @__PURE__ */ t.createElement(y, { if: p }, /* @__PURE__ */ t.createElement(h, null, i)));
+  if (!r.slot) {
+    const d = e;
+    return /* @__PURE__ */ t.createElement(d, { ...m, ref: n }, s);
+  }
+  return w(
+    typeof e == "string",
+    "'elementType' in Text component must be of type string"
+  ), /* @__PURE__ */ t.createElement(u, null, /* @__PURE__ */ t.createElement(E.Text, { ...m, elementType: e, ref: n }, s));
+});
+export {
+  F as T
+};

package/dist/js/Text.js

@@ -0,0 +1,7 @@
+"use client"
+/* */
+import { T as a } from "./Text-B17xjuUC.js";
+export {
+  a as Text,
+  a as default
+};

package/dist/js/TextArea.js

@@ -0,0 +1,50 @@
+"use client"
+/* */
+import o, { useRef as h } from "react";
+import * as x from "react-aria-components";
+import { T as g } from "./TextFieldBase-C6S5_eRn.js";
+import { C as u } from "./ClearPropsContext-CUvsbMn8.js";
+import "./propsContext-DzAKlmhS.js";
+import { mergeRefs as d } from "@react-aria/utils";
+import "remeda";
+import "dot-prop";
+import { f as A } from "./flowComponent-B1r5sCmz.js";
+const H = "flow--text-area", R = {
+  textArea: H
+}, B = A("TextArea", (n) => {
+  const {
+    children: i,
+    placeholder: l,
+    rows: t = 5,
+    autoResizeMaxRows: a = t,
+    refProp: c,
+    ...m
+  } = n, e = h(null), s = (r) => `calc(var(--line-height--m) * ${r} + (var(--form-control--padding-y) * 2))`, p = () => {
+    if (e.current && t !== a) {
+      e.current.style.height = "0px";
+      const r = e.current.scrollHeight;
+      e.current.style.height = r + "px";
+    }
+  }, f = /* @__PURE__ */ o.createElement(
+    x.TextArea,
+    {
+      rows: t,
+      placeholder: l,
+      className: R.textArea,
+      ref: d(
+        c,
+        e
+      ),
+      onChange: p,
+      style: {
+        minHeight: s(t),
+        maxHeight: s(a)
+      }
+    }
+  );
+  return /* @__PURE__ */ o.createElement(u, null, /* @__PURE__ */ o.createElement(g, { ...m, input: f }, i));
+});
+export {
+  B as TextArea,
+  B as default
+};