@tpc-mare/mare-ui-components-react 0.1.1 → 0.1.3

package/dist/avatar/Avatar.d.ts

@@ -0,0 +1,2 @@
+import { AvatarProperties } from './Avatar.types';
+export declare function Avatar({ image, alt, label, size, id, }: AvatarProperties): import("react").JSX.Element;

package/dist/avatar/Avatar.types.d.ts

@@ -0,0 +1,26 @@
+import { AvatarSize } from '@tpc-development/mare-ui-components-core/avatar';
+export type { AvatarSize } from '@tpc-development/mare-ui-components-core/avatar';
+export interface AvatarProperties {
+    /**
+     * Image URL. Falls back to the initials derived from `label` while it's
+     * loading, missing, or fails to load.
+     */
+    image?: string;
+    /**
+     * `alt` text for the image.
+     */
+    alt?: string;
+    /**
+     * Full name used to derive the fallback initials (e.g. "Tomás Palacio" → "TP").
+     */
+    label?: string;
+    /**
+     * Size variant.
+     * @default 'small'
+     */
+    size?: AvatarSize;
+    /**
+     * Unique identifier for the avatar.
+     */
+    id?: string;
+}

package/dist/avatar/index.d.ts

@@ -0,0 +1,2 @@
+export { Avatar } from './Avatar';
+export type { AvatarProperties, AvatarSize } from './Avatar.types';

package/dist/avatar/index.js

@@ -0,0 +1,4 @@
+import { A as o } from "../shared/Avatar-D3QlO3Tz.js";
+export {
+  o as Avatar
+};

package/dist/drawer/Drawer.d.ts

@@ -0,0 +1,2 @@
+import { DrawerProperties } from './Drawer.types';
+export declare function Drawer({ open, onOpenChange, position, modal, closeOnEscape, dismissableMask, maskColor, shadow, portalContainer, header, footer, children, 'aria-label': ariaLabel, }: DrawerProperties): import("react").JSX.Element;

package/dist/drawer/Drawer.types.d.ts

@@ -0,0 +1,53 @@
+import { ReactNode, RefObject } from 'react';
+import { DrawerPosition } from '@tpc-development/mare-ui-components-core/drawer';
+export type { DrawerPosition } from '@tpc-development/mare-ui-components-core/drawer';
+export interface DrawerProperties {
+    /** Controlled open state. */
+    open: boolean;
+    /** Change handler — receives the next open state. */
+    onOpenChange?: (open: boolean) => void;
+    /** Which edge the panel docks to and slides in from. @default 'left' */
+    position?: DrawerPosition;
+    /** @default true */
+    modal?: boolean;
+    /** @default true */
+    closeOnEscape?: boolean;
+    /** Close when clicking the backdrop. @default true */
+    dismissableMask?: boolean;
+    /** Overrides the backdrop's background class. @default undefined (uses the token overlay color) */
+    maskColor?: string;
+    /** @default true */
+    shadow?: boolean;
+    /** Where the drawer portals to. Ark defaults to `document.body` — override
+     * this if your app scopes `data-theme` (or any other CSS custom property)
+     * to a sub-tree rather than the document root, otherwise the portaled
+     * drawer renders outside that scope and loses the tokens. */
+    portalContainer?: RefObject<HTMLElement | null>;
+    /** Typically a `<DrawerHeader />`. */
+    header?: ReactNode;
+    /** Typically a `<DrawerFooter>` with action buttons. */
+    footer?: ReactNode;
+    /** The scrollable body, between header and footer. */
+    children?: ReactNode;
+    /** Fallback accessible label when no title is rendered in the header. */
+    'aria-label'?: string;
+}
+export interface DrawerHeaderProperties {
+    title?: string;
+    /** Closes the drawer on click (matches the legacy header: the LEFT icon
+     * always closes, regardless of which glyph it shows). @default a close (X) icon */
+    leftIcon?: ReactNode;
+    /** Does NOT close the drawer on click — wire that yourself if you need it. @default undefined (no button) */
+    rightIcon?: ReactNode;
+    onLeftIconClick?: () => void;
+    onRightIconClick?: () => void;
+    /** @default false */
+    border?: boolean;
+    /** Shorter header, smaller inline padding — legacy's "slim" variant. @default false */
+    compact?: boolean;
+}
+export interface DrawerFooterProperties {
+    /** @default false */
+    border?: boolean;
+    children?: ReactNode;
+}

package/dist/drawer/DrawerFooter.d.ts

@@ -0,0 +1,2 @@
+import { DrawerFooterProperties } from './Drawer.types';
+export declare function DrawerFooter({ border, children, }: DrawerFooterProperties): import("react").JSX.Element;

package/dist/drawer/DrawerHeader.d.ts

@@ -0,0 +1,2 @@
+import { DrawerHeaderProperties } from './Drawer.types';
+export declare function DrawerHeader({ title, leftIcon, rightIcon, onLeftIconClick, onRightIconClick, border, compact, }: DrawerHeaderProperties): import("react").JSX.Element;

package/dist/drawer/index.d.ts

@@ -0,0 +1,4 @@
+export { Drawer } from './Drawer';
+export { DrawerHeader } from './DrawerHeader';
+export { DrawerFooter } from './DrawerFooter';
+export type { DrawerProperties, DrawerPosition, DrawerHeaderProperties, DrawerFooterProperties, } from './Drawer.types';

package/dist/drawer/index.js

@@ -0,0 +1,6 @@
+import { D as e, a as o, b as D } from "../shared/DrawerFooter-DvUgumx0.js";
+export {
+  e as Drawer,
+  o as DrawerFooter,
+  D as DrawerHeader
+};

package/dist/index/index.d.ts

@@ -1,3 +1,5 @@
+export { Avatar } from '../avatar';
+export type { AvatarProperties, AvatarSize } from '../avatar';
 export { Button } from '../button';
 export type { ButtonProperties, ButtonSeverity, ButtonSize, ButtonVariant, IconPosition, } from '../button';
 export { SelectField } from '../select-field';
@@ -12,6 +14,8 @@ export { InputText, CharacterCount, FormField, FloatLabel, IconField, HelperText
 export type { InputTextProperties, InputTextSize, CharacterCountProperties, } from '../input-text';
 export { Textarea } from '../textarea';
 export type { TextareaProperties } from '../textarea';
+export { SearchField } from '../search-field';
+export type { SearchFieldProperties } from '../search-field';
 export { InputNumber } from '../input-number';
 export type { InputNumberProperties, InputNumberSize, } from '../input-number';
 export { Checkbox } from '../checkbox';
@@ -22,3 +26,7 @@ export { Switch } from '../switch';
 export type { SwitchProperties, SwitchSize } from '../switch';
 export { Dialog, DialogHeader, DialogFooter } from '../dialog';
 export type { DialogProperties, DialogSize, DialogHeaderProperties, DialogFooterProperties, DialogFooterLayout, } from '../dialog';
+export { Drawer, DrawerHeader, DrawerFooter } from '../drawer';
+export type { DrawerProperties, DrawerPosition, DrawerHeaderProperties, DrawerFooterProperties, } from '../drawer';
+export { Menu } from '../menu';
+export type { MenuProperties, MenuItemData, MenuSeparatorEntry, MenuGroupEntry, MenuEntry, } from '../menu';

package/dist/index/index.js

@@ -1,33 +1,44 @@
-import { B as a } from "../shared/Button-AfMqNCme.js";
-import { S as t } from "../shared/SelectField-BSTmWjYy.js";
-import { C as p } from "../shared/Combobox-DeUG_muZ.js";
-import { T as m } from "../shared/Tabs-BqIorZYD.js";
-import { P as l } from "../shared/ProgressSpinner-B-lrS-tu.js";
-import { C as b, F as n, a as C, H as F, I as u, b as T } from "../shared/HelperText-D656H0Lf.js";
-import { T as d } from "../shared/Textarea-0XAczkH1.js";
-import { I as S } from "../shared/InputNumber-D1KL6s55.js";
-import { C as D } from "../shared/Checkbox-DsM70wQl.js";
-import { R as H } from "../shared/RadioGroup-lw27DCoV.js";
-import { S as P } from "../shared/Switch-D6E2OmgE.js";
-import { D as k, a as w, b as G } from "../shared/DialogFooter-DLWy6Mln.js";
+import { A as a } from "../shared/Avatar-D3QlO3Tz.js";
+import { B as t } from "../shared/Button-AfMqNCme.js";
+import { S as p } from "../shared/SelectField-BSTmWjYy.js";
+import { C as m } from "../shared/Combobox-DeUG_muZ.js";
+import { T as l } from "../shared/Tabs-BqIorZYD.js";
+import { P as F } from "../shared/ProgressSpinner-B-lrS-tu.js";
+import { I as n, a as D } from "../shared/IconField-Dh6j6SL1.js";
+import { C as u, F as C, a as S, H as c } from "../shared/HelperText-CVWWvLCI.js";
+import { T as I } from "../shared/Textarea-iJhYTZos.js";
+import { S as h } from "../shared/SearchField-CgDz_s1O.js";
+import { I as H } from "../shared/InputNumber-D48wsE-o.js";
+import { C as B } from "../shared/Checkbox-DsM70wQl.js";
+import { R as P } from "../shared/RadioGroup-lw27DCoV.js";
+import { S as k } from "../shared/Switch-D6E2OmgE.js";
+import { D as G, a as L, b as N } from "../shared/DialogFooter-DLWy6Mln.js";
+import { D as q, a as y, b as z } from "../shared/DrawerFooter-DvUgumx0.js";
+import { M as J } from "../shared/Menu-Cv9dU1iA.js";
 export {
-  a as Button,
-  b as CharacterCount,
-  D as Checkbox,
-  p as Combobox,
-  k as Dialog,
-  w as DialogFooter,
-  G as DialogHeader,
-  n as FloatLabel,
-  C as FormField,
-  F as HelperText,
-  u as IconField,
-  S as InputNumber,
-  T as InputText,
-  l as ProgressSpinner,
-  H as RadioGroup,
-  t as SelectField,
-  P as Switch,
-  m as Tabs,
-  d as Textarea
+  a as Avatar,
+  t as Button,
+  u as CharacterCount,
+  B as Checkbox,
+  m as Combobox,
+  G as Dialog,
+  L as DialogFooter,
+  N as DialogHeader,
+  q as Drawer,
+  y as DrawerFooter,
+  z as DrawerHeader,
+  C as FloatLabel,
+  S as FormField,
+  c as HelperText,
+  n as IconField,
+  H as InputNumber,
+  D as InputText,
+  J as Menu,
+  F as ProgressSpinner,
+  P as RadioGroup,
+  h as SearchField,
+  p as SelectField,
+  k as Switch,
+  l as Tabs,
+  I as Textarea
 };

package/dist/input-number/index.js

@@ -1,4 +1,4 @@
-import { I as m } from "../shared/InputNumber-D1KL6s55.js";
+import { I as m } from "../shared/InputNumber-D48wsE-o.js";
 export {
   m as InputNumber
 };

package/dist/input-text/IconField.d.ts

@@ -2,6 +2,15 @@ import { ReactNode } from 'react';
 export interface IconFieldProperties {
     icon: ReactNode;
     position?: 'left' | 'right';
+    /** Dims the icon to match a disabled sibling input. IconField can't see
+     * that prop on its own (it lives on the input, not on IconField) — pass
+     * it through explicitly when composing (see SearchField). @default false */
+    disabled?: boolean;
+    /** Makes the icon a real click target (a `<button>`, not a decorative
+     * `<span>`). @default undefined (decorative) */
+    onIconClick?: () => void;
+    /** Accessible name for the button, when `onIconClick` is set. */
+    iconLabel?: string;
     children?: ReactNode;
 }
-export declare function IconField({ icon, position, children, }: IconFieldProperties): import("react").JSX.Element;
+export declare function IconField({ icon, position, disabled, onIconClick, iconLabel, children, }: IconFieldProperties): import("react").JSX.Element;

package/dist/input-text/field-layout.d.ts

@@ -1,6 +1,12 @@
 export interface FieldLayout {
     hasFloatLabel: boolean;
-    iconSide: 'left' | 'right' | null;
+    iconSide: 'left' | 'right' | 'both' | null;
 }
 export declare const FieldLayoutContext: import('react').Context<FieldLayout | null>;
 export declare const useFieldLayout: () => FieldLayout | null;
+/** Combines a parent IconField's side (if any) with this one's — nesting two
+ * IconFields (one 'left', one 'right') around the same input, e.g.
+ * SearchField's search + clear icons, needs both padded, not just the
+ * nearest one. Two IconFields on the SAME side is a consumer error; last one
+ * wins rather than throwing. */
+export declare const mergeIconSide: (parentSide: FieldLayout["iconSide"], ownSide: "left" | "right") => FieldLayout["iconSide"];

package/dist/input-text/index.js

@@ -1,9 +1,10 @@
-import { C as t, F as o, a as r, H as s, I as l, b as F } from "../shared/HelperText-D656H0Lf.js";
+import { I as o, a as r } from "../shared/IconField-Dh6j6SL1.js";
+import { C as s, F as l, a as F, H as p } from "../shared/HelperText-CVWWvLCI.js";
 export {
-  t as CharacterCount,
-  o as FloatLabel,
-  r as FormField,
-  s as HelperText,
-  l as IconField,
-  F as InputText
+  s as CharacterCount,
+  l as FloatLabel,
+  F as FormField,
+  p as HelperText,
+  o as IconField,
+  r as InputText
 };

package/dist/menu/Menu.d.ts

@@ -0,0 +1,2 @@
+import { MenuProperties } from './Menu.types';
+export declare function Menu({ trigger, items, onSelect, renderItem, portalContainer, }: MenuProperties): import("react").JSX.Element;

package/dist/menu/Menu.types.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode, RefObject } from 'react';
+import { MenuEntry, MenuItemData } from '@tpc-development/mare-ui-components-core/menu';
+export type { MenuItemData, MenuSeparatorEntry, MenuGroupEntry, MenuEntry, } from '@tpc-development/mare-ui-components-core/menu';
+export interface MenuProperties {
+    /** The element that opens the menu on click — typically a `<Button>`. */
+    trigger: ReactNode;
+    items: MenuEntry[];
+    /** Called with the selected item's `value` when an item (or an item
+     * inside a group) is chosen. */
+    onSelect?: (value: string) => void;
+    /** Custom render for an item's content (icon + label). Defaults to
+     * `item.icon` (if any) + `item.label`. */
+    renderItem?: (item: MenuItemData) => ReactNode;
+    /** Where the menu portals to. Ark defaults to `document.body` — override
+     * this if your app scopes `data-theme` (or any other CSS custom property)
+     * to a sub-tree rather than the document root, otherwise the portaled
+     * menu renders outside that scope and loses the tokens. */
+    portalContainer?: RefObject<HTMLElement | null>;
+}

package/dist/menu/index.d.ts

@@ -0,0 +1,2 @@
+export { Menu } from './Menu';
+export type { MenuProperties, MenuItemData, MenuSeparatorEntry, MenuGroupEntry, MenuEntry, } from './Menu.types';

package/dist/menu/index.js

@@ -0,0 +1,4 @@
+import { M as r } from "../shared/Menu-Cv9dU1iA.js";
+export {
+  r as Menu
+};

package/dist/search-field/SearchField.d.ts

@@ -0,0 +1,2 @@
+import { SearchFieldProperties } from './SearchField.types';
+export declare function SearchField({ value, onValueChange, loading, clearable, disabled, leftIcon, clearIcon, rightIcon, onClear, ...native }: SearchFieldProperties): import("react").JSX.Element;

package/dist/search-field/SearchField.types.d.ts

@@ -0,0 +1,26 @@
+import { ReactNode } from 'react';
+import { InputTextProperties } from '../InputText';
+/** Native passthrough same as InputText, minus what SearchField owns/reshapes. */
+type ForwardedInputProperties = Omit<InputTextProperties, 'value' | 'onValueChange' | 'rounded'>;
+export interface SearchFieldProperties extends ForwardedInputProperties {
+    /** Controlled value. */
+    value?: string;
+    /** Controlled change handler — receives the next string value. */
+    onValueChange?: (value: string) => void;
+    /** Shows a spinner instead of the clear icon. @default false */
+    loading?: boolean;
+    /** Shows a clear (X) button when there's a value. @default false */
+    clearable?: boolean;
+    /** Overrides the left icon. @default a search icon */
+    leftIcon?: ReactNode;
+    /** Overrides the clear button's icon. @default a close (X) icon */
+    clearIcon?: ReactNode;
+    /** Replaces the clear/spinner logic entirely with your own right-side
+     * content (matches the legacy: a custom right icon takes over from the
+     * built-in clear button). @default undefined */
+    rightIcon?: ReactNode;
+    /** Fires when the built-in clear button is clicked (clears `value` too).
+     * Does NOT fire for a custom `rightIcon` — wire that yourself. */
+    onClear?: () => void;
+}
+export {};

package/dist/search-field/index.d.ts

@@ -0,0 +1,2 @@
+export { SearchField } from './SearchField';
+export type { SearchFieldProperties } from './SearchField.types';

package/dist/search-field/index.js

@@ -0,0 +1,4 @@
+import { S as a } from "../shared/SearchField-CgDz_s1O.js";
+export {
+  a as SearchField
+};

package/dist/shared/Avatar-D3QlO3Tz.js

@@ -0,0 +1,59 @@
+import { jsxs as o, jsx as l } from "react/jsx-runtime";
+import { Avatar as m } from "@ark-ui/react/avatar";
+const s = (a) => a.normalize("NFD").replaceAll(/[̀-ͯ]/g, ""), d = (a) => {
+  if (!a) return "";
+  const e = a.trim().split(/\s+/).filter(Boolean);
+  if (e.length === 1)
+    return s(e[0].slice(0, 2)).toUpperCase();
+  const t = s(e[0][0]), r = s(e.at(-1)?.[0] ?? "");
+  return (t + r).toUpperCase();
+}, n = `
+	mare:inline-flex mare:items-center mare:justify-center
+	mare:rounded-full mare:bg-accent-weak mare:text-accent
+
+	mare:data-size-small:h-8 mare:data-size-small:w-8 mare:data-size-small:text-base
+	mare:data-size-medium:h-10 mare:data-size-medium:w-10 mare:data-size-medium:text-base
+`, c = `
+	mare:h-full mare:w-full mare:rounded-full mare:object-cover
+`, u = `
+	mare:rounded-full
+	mare:data-size-small:tpc-typography-body-s
+	mare:data-size-medium:tpc-typography-body-m
+`;
+function z({
+  image: a,
+  alt: e = "",
+  label: t = "",
+  size: r = "small",
+  id: i
+}) {
+  return /* @__PURE__ */ o(
+    m.Root,
+    {
+      id: i,
+      className: n,
+      "data-size": r,
+      children: [
+        /* @__PURE__ */ l(
+          m.Fallback,
+          {
+            className: u,
+            "data-size": r,
+            children: d(t)
+          }
+        ),
+        a && /* @__PURE__ */ l(
+          m.Image,
+          {
+            className: c,
+            src: a,
+            alt: e
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  z as A
+};

package/dist/shared/DrawerFooter-DvUgumx0.js

@@ -0,0 +1,172 @@
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { Dialog as t } from "@ark-ui/react/dialog";
+import { Portal as g } from "@ark-ui/react/portal";
+import { B as d } from "./Button-AfMqNCme.js";
+import { c as y } from "./icons-DeVfnVLm.js";
+const _ = (e) => {
+  switch (e) {
+    case "left":
+      return "translateX(-100%)";
+    case "right":
+      return "translateX(100%)";
+    case "top":
+      return "translateY(-100%)";
+    case "bottom":
+    case "full":
+      return "translateY(100%)";
+  }
+}, k = (e) => `
+	mare:fixed mare:inset-0 mare:z-40
+	${e ?? "mare:bg-overlay"}
+	mare:ark-open:[animation:mare-dialog-backdrop-enter_300ms_ease-out]
+	mare:ark-closed:[animation:mare-dialog-backdrop-exit_200ms_ease-in]
+`, v = {
+  left: "mare:justify-start",
+  right: "mare:justify-end",
+  top: "mare:flex-col mare:justify-start",
+  bottom: "mare:flex-col mare:justify-end",
+  full: ""
+}, N = (e) => `
+	mare:fixed mare:inset-0 mare:z-50 mare:flex
+	${v[e]}
+`, $ = {
+  left: "mare:w-screen mare:md:w-120",
+  right: "mare:w-screen mare:md:w-120",
+  top: "mare:border-b mare:border-default",
+  bottom: "mare:border-t mare:border-default",
+  full: "mare:w-screen mare:h-screen mare:max-h-full"
+}, j = (e) => `
+	mare:group/drawer mare:flex mare:flex-col
+	mare:bg-default mare:text-default
+	mare:outline-none
+	${e.shadow ? "mare:shadow-[0px_10px_15px_-3px_rgba(0,0,0,0.10),0px_4px_6px_-2px_rgba(0,0,0,0.05)]" : ""}
+	${$[e.position]}
+	mare:ark-open:[animation:mare-drawer-enter_300ms_ease-out]
+	mare:ark-closed:[animation:mare-drawer-exit_200ms_ease-in]
+`, C = (e) => `
+	mare:grow mare:overflow-y-auto mare:px-6 mare:pb-6
+	${e ? "mare:pt-6" : "mare:pt-0"}
+`, O = (e) => `
+	mare:flex mare:w-full mare:items-center mare:justify-between mare:shrink-0
+	mare:px-6
+	${e.compact ? "mare:h-auto mare:py-4" : "mare:h-14 mare:md:h-16"}
+	${e.border ? "mare:border-b mare:border-default" : ""}
+`, z = "mare:-ml-1.5", D = "mare:-mr-1.5", u = (e) => `
+	mare:grow mare:w-full mare:truncate mare:text-center
+	mare:tpc-typography-label-m mare:text-default
+	${e.hasRightIcon ? "" : "mare:mr-6.5"}
+	${e.hasLeftIcon ? "" : "mare:ml-6.5"}
+`, R = (e) => `
+	mare:flex mare:flex-col-reverse mare:sm:flex-row mare:justify-end
+	mare:gap-3 mare:sm:gap-4 mare:w-full
+	mare:*:w-full mare:sm:*:flex-1
+	mare:px-6 mare:pb-4 mare:sm:pb-6
+	${e ? "mare:pt-3 mare:sm:pt-6 mare:border-t mare:border-t-default" : "mare:pt-0"}
+`;
+function X({
+  open: e,
+  onOpenChange: a,
+  position: m = "left",
+  modal: l = !0,
+  closeOnEscape: s = !0,
+  dismissableMask: o = !0,
+  maskColor: n,
+  shadow: f = !0,
+  portalContainer: p,
+  header: c,
+  footer: x,
+  children: h,
+  "aria-label": b
+}) {
+  return /* @__PURE__ */ r(
+    t.Root,
+    {
+      open: e,
+      onOpenChange: (w) => a?.(w.open),
+      modal: l,
+      closeOnEscape: s,
+      closeOnInteractOutside: o,
+      "aria-label": b,
+      lazyMount: !0,
+      unmountOnExit: !0,
+      children: /* @__PURE__ */ i(g, { container: p, children: [
+        /* @__PURE__ */ r(t.Backdrop, { className: k(n) }),
+        /* @__PURE__ */ r(t.Positioner, { className: N(m), children: /* @__PURE__ */ i(
+          t.Content,
+          {
+            className: j({ position: m, shadow: f }),
+            style: {
+              "--mare-drawer-from": _(m)
+            },
+            children: [
+              c,
+              /* @__PURE__ */ r("div", { className: C(!!c), children: h }),
+              x
+            ]
+          }
+        ) })
+      ] })
+    }
+  );
+}
+function Y({
+  title: e,
+  leftIcon: a = /* @__PURE__ */ r(y, {}),
+  rightIcon: m,
+  onLeftIconClick: l,
+  onRightIconClick: s,
+  border: o = !1,
+  compact: n = !1
+}) {
+  return /* @__PURE__ */ i("div", { className: O({ border: o, compact: n }), children: [
+    a ? /* @__PURE__ */ r("div", { className: z, children: /* @__PURE__ */ r(t.CloseTrigger, { asChild: !0, children: /* @__PURE__ */ r(
+      d,
+      {
+        severity: "ghost",
+        iconOnly: !0,
+        size: "xsmall",
+        icon: a,
+        onClick: l
+      }
+    ) }) }) : null,
+    e ? /* @__PURE__ */ r(
+      t.Title,
+      {
+        className: u({
+          hasLeftIcon: !!a,
+          hasRightIcon: !!m
+        }),
+        children: e
+      }
+    ) : /* @__PURE__ */ r(
+      "span",
+      {
+        className: u({
+          hasLeftIcon: !!a,
+          hasRightIcon: !!m
+        })
+      }
+    ),
+    m ? /* @__PURE__ */ r("div", { className: D, children: /* @__PURE__ */ r(
+      d,
+      {
+        severity: "ghost",
+        iconOnly: !0,
+        size: "xsmall",
+        icon: m,
+        onClick: s
+      }
+    ) }) : null
+  ] });
+}
+function E({
+  border: e = !1,
+  children: a
+}) {
+  return /* @__PURE__ */ r("div", { className: R(e), children: a });
+}
+export {
+  X as D,
+  E as a,
+  Y as b
+};

package/dist/shared/HelperText-CVWWvLCI.js

@@ -0,0 +1,46 @@
+import { jsxs as i, jsx as r, Fragment as m } from "react/jsx-runtime";
+import { useFieldContext as s, FieldRoot as c, FieldLabel as d, FieldErrorText as u, FieldHelperText as h } from "@ark-ui/react/field";
+import { x as f, g, F as x, p as l, h as y } from "./field-layout-D34MpDMB.js";
+function L({ value: e, max: o }) {
+  const a = s()?.disabled ?? !1;
+  return /* @__PURE__ */ i("span", { className: f(a), children: [
+    e.length,
+    "/",
+    o
+  ] });
+}
+function N({
+  invalid: e = !1,
+  disabled: o = !1,
+  required: t = !1,
+  children: a
+}) {
+  return /* @__PURE__ */ r(
+    c,
+    {
+      invalid: e,
+      disabled: o,
+      required: t,
+      className: g,
+      children: a
+    }
+  );
+}
+const F = "mare:pointer-events-none mare:absolute mare:left-3 mare:origin-[0] mare:transition-all mare:duration-150 mare:tpc-typography-body-m mare:text-weak mare:top-1/2 mare:-translate-y-1/2 mare:group-focus-within:top-2 mare:group-focus-within:translate-y-0 mare:group-focus-within:tpc-typography-body-xs mare:group-has-[:is(input,textarea):not(:placeholder-shown)]:top-2 mare:group-has-[:is(input,textarea):not(:placeholder-shown)]:translate-y-0 mare:group-has-[:is(input,textarea):not(:placeholder-shown)]:tpc-typography-body-xs";
+function S({ label: e, children: o }) {
+  const t = { hasFloatLabel: !0, iconSide: null }, a = `${F} mare:group-has-[.mare-icon-left_svg]:left-10 mare:group-has-[textarea]:top-2 mare:group-has-[textarea]:translate-y-0`, n = /* @__PURE__ */ i(m, { children: [
+    o,
+    /* @__PURE__ */ r(d, { className: a, children: e })
+  ] }), p = !s() ? /* @__PURE__ */ r(c, { className: l, children: n }) : /* @__PURE__ */ r("div", { className: l, children: n });
+  return /* @__PURE__ */ r(x.Provider, { value: t, children: p });
+}
+function H({ children: e }) {
+  const t = s()?.invalid ?? !1, a = y(t);
+  return t ? /* @__PURE__ */ r(u, { className: a, children: e }) : /* @__PURE__ */ r(h, { className: a, children: e });
+}
+export {
+  L as C,
+  S as F,
+  H,
+  N as a
+};