@tpc-mare/mare-ui-components-react 0.1.6 → 0.1.7

package/dist/accordion/index.js

@@ -1,4 +1,4 @@
-import { A as c } from "../shared/Accordion-E6aTw9ir.js";
+import { A as c } from "../shared/Accordion-Cbs8KQ5v.js";
 export {
   c as Accordion
 };

package/dist/banner/Banner.d.ts

@@ -0,0 +1,2 @@
+import { BannerProperties } from './Banner.types';
+export declare function Banner({ severity, title, icon, disabled, closable, onClose, children, }: BannerProperties): import("react").JSX.Element;

package/dist/banner/Banner.types.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+import { BannerSeverity } from '@tpc-development/mare-ui-components-core/banner';
+export type { BannerSeverity } from '@tpc-development/mare-ui-components-core/banner';
+export interface BannerProperties {
+    /** @default 'neutral' */
+    severity?: BannerSeverity;
+    title?: string;
+    icon?: ReactNode;
+    /** @default false */
+    disabled?: boolean;
+    /** @default false */
+    closable?: boolean;
+    onClose?: () => void;
+    children?: ReactNode;
+}

package/dist/banner/index.d.ts

@@ -0,0 +1,2 @@
+export { Banner } from './Banner';
+export type { BannerProperties, BannerSeverity } from './Banner.types';

package/dist/banner/index.js

@@ -0,0 +1,4 @@
+import { B as e } from "../shared/Banner-BWyV9K8e.js";
+export {
+  e as Banner
+};

package/dist/checkbox/index.js

@@ -1,4 +1,4 @@
-import { C as r } from "../shared/Checkbox-fis7v2xS.js";
+import { C as r } from "../shared/Checkbox-D17WWbSe.js";
 export {
   r as Checkbox
 };

package/dist/combobox/index.js

@@ -1,4 +1,4 @@
-import { C as m } from "../shared/Combobox-DK6nHqAL.js";
+import { C as m } from "../shared/Combobox-CBa1lnAd.js";
 export {
   m as Combobox
 };

package/dist/date-picker/index.js

@@ -1,4 +1,4 @@
-import { D as a } from "../shared/DatePicker-CF9y6eAm.js";
+import { D as a } from "../shared/DatePicker-BQulFC2D.js";
 export {
   a as DatePicker
 };

package/dist/dialog/index.js

@@ -1,4 +1,4 @@
-import { D as e, a as r, b as D } from "../shared/DialogFooter-BwEB19v9.js";
+import { D as e, a as r, b as D } from "../shared/DialogFooter-0gaMdpXV.js";
 export {
   e as Dialog,
   r as DialogFooter,

package/dist/drawer/index.js

@@ -1,4 +1,4 @@
-import { D as e, a as o, b as D } from "../shared/DrawerFooter-C0SLP8KU.js";
+import { D as e, a as o, b as D } from "../shared/DrawerFooter-CpO7chLC.js";
 export {
   e as Drawer,
   o as DrawerFooter,

package/dist/index/index.d.ts

@@ -6,6 +6,8 @@ export { Badge } from '../badge';
 export type { BadgeProperties, BadgeSeverity } from '../badge';
 export { Tag } from '../tag';
 export type { TagProperties, TagSeverity, TagSize } from '../tag';
+export { Banner } from '../banner';
+export type { BannerProperties, BannerSeverity } from '../banner';
 export { Button } from '../button';
 export type { ButtonProperties, ButtonSeverity, ButtonSize, ButtonVariant, IconPosition, } from '../button';
 export { SelectField } from '../select-field';
@@ -22,8 +24,12 @@ export { Textarea } from '../textarea';
 export type { TextareaProperties } from '../textarea';
 export { SearchField } from '../search-field';
 export type { SearchFieldProperties } from '../search-field';
+export { Password, PasswordFooterItem } from '../password';
+export type { PasswordProperties } from '../password';
 export { InputNumber } from '../input-number';
 export type { InputNumberProperties, InputNumberSize, } from '../input-number';
+export { InputOtp } from '../input-otp';
+export type { InputOtpProperties, InputOtpSize } from '../input-otp';
 export { Checkbox } from '../checkbox';
 export type { CheckboxProperties, CheckboxSize, CheckedState, } from '../checkbox';
 export { RadioGroup } from '../radio-group';

package/dist/index/index.js

@@ -1,61 +1,68 @@
-import { A as a } from "../shared/Accordion-E6aTw9ir.js";
+import { A as a } from "../shared/Accordion-Cbs8KQ5v.js";
 import { A as t } from "../shared/Avatar-D3QlO3Tz.js";
 import { B as p } from "../shared/Badge-WC6my4Aw.js";
 import { T as m } from "../shared/Tag-BtbmgIwL.js";
-import { B as n } from "../shared/Button-AfMqNCme.js";
-import { S as i } from "../shared/SelectField-DNlX8uuG.js";
-import { C as S } from "../shared/Combobox-DK6nHqAL.js";
-import { T as D } from "../shared/Tabs-BqIorZYD.js";
-import { P as F } from "../shared/ProgressSpinner-B-lrS-tu.js";
+import { B as n } from "../shared/Banner-BWyV9K8e.js";
+import { B as i } from "../shared/Button-AfMqNCme.js";
+import { S } from "../shared/SelectField-dNCMdSYU.js";
+import { C as b } from "../shared/Combobox-CBa1lnAd.js";
+import { T as F } from "../shared/Tabs-BqIorZYD.js";
+import { P as u } from "../shared/ProgressSpinner-B-lrS-tu.js";
 import { I as T, a as g } from "../shared/IconField-Dh6j6SL1.js";
-import { C as P, F as I, a as h, H as k } from "../shared/HelperText-CVWWvLCI.js";
-import { T as A } from "../shared/Textarea-iJhYTZos.js";
-import { S as H } from "../shared/SearchField-DuA4ZkBL.js";
-import { I as R } from "../shared/InputNumber-D48wsE-o.js";
-import { C as G } from "../shared/Checkbox-fis7v2xS.js";
-import { R as N } from "../shared/RadioGroup-lw27DCoV.js";
-import { S as q } from "../shared/Switch-D6E2OmgE.js";
-import { D as z, a as E, b as J } from "../shared/DialogFooter-BwEB19v9.js";
-import { D as O, a as Q, b as U } from "../shared/DrawerFooter-C0SLP8KU.js";
-import { M as W } from "../shared/Menu-Cv9dU1iA.js";
-import { P as Y } from "../shared/PanelMenu-Ch4NsZD_.js";
-import { S as _, c as $ } from "../shared/Snackbar-C29nLHO9.js";
-import { S as or } from "../shared/Stepper-BYRV6yan.js";
-import { D as er } from "../shared/DatePicker-CF9y6eAm.js";
-import { P as sr } from "../shared/Paginator-CcN6wND7.js";
+import { C as w, F as B, a as h, H as k } from "../shared/HelperText-CVWWvLCI.js";
+import { T as H } from "../shared/Textarea-iJhYTZos.js";
+import { S as R } from "../shared/SearchField-9bL2s8zj.js";
+import { P as G, a as L } from "../shared/Password-vADi8ZJz.js";
+import { I as O } from "../shared/InputNumber-D48wsE-o.js";
+import { I as q } from "../shared/InputOtp-CUXXVP2E.js";
+import { C as z } from "../shared/Checkbox-D17WWbSe.js";
+import { R as J } from "../shared/RadioGroup-lw27DCoV.js";
+import { S as Q } from "../shared/Switch-D6E2OmgE.js";
+import { D as V, a as W, b as X } from "../shared/DialogFooter-0gaMdpXV.js";
+import { D as Z, a as _, b as $ } from "../shared/DrawerFooter-CpO7chLC.js";
+import { M as or } from "../shared/Menu-Cv9dU1iA.js";
+import { P as er } from "../shared/PanelMenu-CYbr6cvz.js";
+import { S as sr, c as pr } from "../shared/Snackbar-C29nLHO9.js";
+import { S as mr } from "../shared/Stepper-DApoMP1U.js";
+import { D as nr } from "../shared/DatePicker-BQulFC2D.js";
+import { P as ir } from "../shared/Paginator-Da0XKfF3.js";
 export {
   a as Accordion,
   t as Avatar,
   p as Badge,
-  n as Button,
-  P as CharacterCount,
-  G as Checkbox,
-  S as Combobox,
-  er as DatePicker,
-  z as Dialog,
-  E as DialogFooter,
-  J as DialogHeader,
-  O as Drawer,
-  Q as DrawerFooter,
-  U as DrawerHeader,
-  I as FloatLabel,
+  n as Banner,
+  i as Button,
+  w as CharacterCount,
+  z as Checkbox,
+  b as Combobox,
+  nr as DatePicker,
+  V as Dialog,
+  W as DialogFooter,
+  X as DialogHeader,
+  Z as Drawer,
+  _ as DrawerFooter,
+  $ as DrawerHeader,
+  B as FloatLabel,
   h as FormField,
   k as HelperText,
   T as IconField,
-  R as InputNumber,
+  O as InputNumber,
+  q as InputOtp,
   g as InputText,
-  W as Menu,
-  sr as Paginator,
-  Y as PanelMenu,
-  F as ProgressSpinner,
-  N as RadioGroup,
-  H as SearchField,
-  i as SelectField,
-  _ as Snackbar,
-  or as Stepper,
-  q as Switch,
-  D as Tabs,
+  or as Menu,
+  ir as Paginator,
+  er as PanelMenu,
+  G as Password,
+  L as PasswordFooterItem,
+  u as ProgressSpinner,
+  J as RadioGroup,
+  R as SearchField,
+  S as SelectField,
+  sr as Snackbar,
+  mr as Stepper,
+  Q as Switch,
+  F as Tabs,
   m as Tag,
-  A as Textarea,
-  $ as createSnackbar
+  H as Textarea,
+  pr as createSnackbar
 };

package/dist/input-otp/InputOtp.d.ts

@@ -0,0 +1,2 @@
+import { InputOtpProperties } from './InputOtp.types';
+export declare function InputOtp({ length, value, defaultValue, onValueChange, onComplete, size, mask, integerOnly, placeholder, invalid, disabled, readOnly, required, autoFocus, name, id, }: InputOtpProperties): import("react").JSX.Element;

package/dist/input-otp/InputOtp.types.d.ts

@@ -0,0 +1,27 @@
+import { InputOtpSize } from '@tpc-development/mare-ui-components-core/input-otp';
+export type { InputOtpSize } from '@tpc-development/mare-ui-components-core/input-otp';
+export interface InputOtpProperties {
+    /** Number of digit boxes to render. */
+    length?: number;
+    /** Controlled value, one character per digit. Omit to let Ark manage it. */
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    /** Fired once all digits are filled with a valid value. */
+    onComplete?: (value: string) => void;
+    size?: InputOtpSize;
+    /** Masks each digit like `type="password"`. */
+    mask?: boolean;
+    /** Restricts input to digits only. Set `false` for alphanumeric codes. */
+    integerOnly?: boolean;
+    /** Placeholder shown in each empty box. Defaults to '' (blank box) — Ark's
+     * own default is '○', which the Mare design doesn't use. */
+    placeholder?: string;
+    invalid?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    autoFocus?: boolean;
+    name?: string;
+    id?: string;
+}

package/dist/input-otp/index.d.ts

@@ -0,0 +1,2 @@
+export { InputOtp } from './InputOtp';
+export type { InputOtpProperties, InputOtpSize } from './InputOtp.types';

package/dist/input-otp/index.js

@@ -0,0 +1,4 @@
+import { I as o } from "../shared/InputOtp-CUXXVP2E.js";
+export {
+  o as InputOtp
+};

package/dist/paginator/index.js

@@ -1,4 +1,4 @@
-import { P as r } from "../shared/Paginator-CcN6wND7.js";
+import { P as r } from "../shared/Paginator-Da0XKfF3.js";
 export {
   r as Paginator
 };

package/dist/panel-menu/index.js

@@ -1,4 +1,4 @@
-import { P as n } from "../shared/PanelMenu-Ch4NsZD_.js";
+import { P as n } from "../shared/PanelMenu-CYbr6cvz.js";
 export {
   n as PanelMenu
 };

package/dist/password/Password.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+import { PasswordProperties } from './Password.types';
+export declare function Password({ value, onValueChange, size, rounded, invalid, disabled, toggleMask, showIcon, hideIcon, feedback, header, footer, promptLabel, weakLabel, mediumLabel, strongLabel, mediumRegex, strongRegex, ...native }: PasswordProperties): import("react").JSX.Element;
+/** A single requirement row for `footer` (e.g. "At least one uppercase"). */
+export declare function PasswordFooterItem({ children }: {
+    children?: ReactNode;
+}): import("react").JSX.Element;

package/dist/password/Password.types.d.ts

@@ -0,0 +1,39 @@
+import { InputHTMLAttributes, ReactNode } from 'react';
+import { InputTextSize } from '@tpc-development/mare-ui-components-core/input-text';
+type ForwardedNativeProperties = Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'size' | 'type' | 'className' | 'style'>;
+export interface PasswordProperties extends ForwardedNativeProperties {
+    /** Controlled value. */
+    value?: string;
+    /** Controlled change handler — receives the next string value. */
+    onValueChange?: (value: string) => void;
+    size?: InputTextSize;
+    rounded?: boolean;
+    invalid?: boolean;
+    disabled?: boolean;
+    /** Shows a button that toggles the value between hidden/visible. @default true */
+    toggleMask?: boolean;
+    /** Icon shown when the value is hidden — click reveals it. @default an eye icon */
+    showIcon?: ReactNode;
+    /** Icon shown when the value is visible — click hides it. @default an eye-off icon */
+    hideIcon?: ReactNode;
+    /** Shows the strength-meter panel while the field has focus. @default true */
+    feedback?: boolean;
+    /** Custom content at the top of the feedback panel. */
+    header?: ReactNode;
+    /** Custom content at the bottom of the feedback panel, below a divider —
+     * e.g. a list of `PasswordFooterItem`s describing the requirements. */
+    footer?: ReactNode;
+    /** Label shown before there's a value. @default 'Please enter a password' */
+    promptLabel?: string;
+    /** @default 'Weak' */
+    weakLabel?: string;
+    /** @default 'Medium' */
+    mediumLabel?: string;
+    /** @default 'Strong' */
+    strongLabel?: string;
+    /** Regex (as a string) a value must match to count as at least 'medium'. */
+    mediumRegex?: string;
+    /** Regex (as a string) a value must match to count as 'strong'. */
+    strongRegex?: string;
+}
+export {};

package/dist/password/index.d.ts

@@ -0,0 +1,2 @@
+export { Password, PasswordFooterItem } from './Password';
+export type { PasswordProperties } from './Password.types';

package/dist/password/index.js

@@ -0,0 +1,5 @@
+import { P as a, a as r } from "../shared/Password-vADi8ZJz.js";
+export {
+  a as Password,
+  r as PasswordFooterItem
+};

package/dist/search-field/index.js

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

package/dist/select-field/index.js

@@ -1,4 +1,4 @@
-import { S as o } from "../shared/SelectField-DNlX8uuG.js";
+import { S as o } from "../shared/SelectField-dNCMdSYU.js";
 export {
   o as SelectField
 };

package/dist/shared/{Accordion-E6aTw9ir.js → Accordion-Cbs8KQ5v.js}

@@ -1,6 +1,6 @@
 import { jsx as a, jsxs as m } from "react/jsx-runtime";
 import { Accordion as r } from "@ark-ui/react/accordion";
-import { C as c } from "./icons-Dfn6EUcz.js";
+import { C as c } from "./icons-bQxPPV8R.js";
 const d = "mare:w-full", u = (t) => `
 	mare:flex mare:flex-col
 	${t ? "mare:border-b mare:border-default" : ""}

package/dist/shared/Banner-BWyV9K8e.js

@@ -0,0 +1,52 @@
+import { jsxs as t, jsx as a } from "react/jsx-runtime";
+import { B as d } from "./Button-AfMqNCme.js";
+import { a as o } from "./icons-bQxPPV8R.js";
+const c = `
+	mare:w-full mare:max-w-md mare:rounded-tpc-container-s mare:p-4
+	mare:flex mare:items-start mare:justify-between mare:gap-4
+	mare:data-severity-neutral:bg-alternative
+	mare:data-severity-brand:bg-accent-weak
+	mare:data-severity-positive:bg-positive-weak
+	mare:data-severity-warning:bg-warning-weak
+	mare:data-severity-danger:bg-danger-weak
+`, p = "mare:flex mare:grow mare:items-start mare:gap-4", g = "mare:shrink-0 mare:text-default mare:[&>svg]:size-3.5", f = "mare:flex mare:grow mare:flex-col mare:gap-2", v = "mare:tpc-typography-label-m mare:text-default", y = (e) => `mare:tpc-typography-body-s ${e ? "mare:text-disabled" : "mare:text-default"}`, x = (e, r) => r ? "disabled" : e;
+function h({
+  severity: e = "neutral",
+  title: r,
+  icon: m,
+  disabled: s = !1,
+  closable: l = !1,
+  onClose: n,
+  children: i
+}) {
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      className: c,
+      "data-severity": x(e, s),
+      children: [
+        /* @__PURE__ */ t("div", { className: p, children: [
+          m && /* @__PURE__ */ a("span", { className: g, children: m }),
+          /* @__PURE__ */ t("div", { className: f, children: [
+            r && /* @__PURE__ */ a("p", { className: v, children: r }),
+            i && /* @__PURE__ */ a("div", { className: y(s), children: i })
+          ] })
+        ] }),
+        l && /* @__PURE__ */ a(
+          d,
+          {
+            severity: "ghost",
+            iconOnly: !0,
+            size: "xsmall",
+            icon: /* @__PURE__ */ a(o, {}),
+            onClick: n,
+            "aria-label": "Close"
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  h as B
+};

package/dist/shared/{Checkbox-fis7v2xS.js → Checkbox-D17WWbSe.js}

@@ -1,6 +1,6 @@
-import { jsxs as m, jsx as a } from "react/jsx-runtime";
-import { Checkbox as e } from "@ark-ui/react/checkbox";
-import { a as f, M as x } from "./icons-Dfn6EUcz.js";
+import { jsxs as m, jsx as e } from "react/jsx-runtime";
+import { Checkbox as a } from "@ark-ui/react/checkbox";
+import { b as f, M as x } from "./icons-bQxPPV8R.js";
 const v = `
 	mare:group/checkbox
 	mare:relative mare:inline-flex mare:items-center mare:gap-2
@@ -68,7 +68,7 @@ function M({
   id: u
 }) {
   return /* @__PURE__ */ m(
-    e.Root,
+    a.Root,
     {
       checked: s,
       defaultChecked: l,
@@ -87,24 +87,24 @@ function M({
       "data-size": r,
       children: [
         /* @__PURE__ */ m(
-          e.Control,
+          a.Control,
           {
             className: y,
             "data-size": r,
             children: [
-              /* @__PURE__ */ a(e.Indicator, { className: i, children: /* @__PURE__ */ a(
+              /* @__PURE__ */ e(a.Indicator, { className: i, children: /* @__PURE__ */ e(
                 f,
                 {
                   className: t,
                   "data-size": r
                 }
               ) }),
-              /* @__PURE__ */ a(
-                e.Indicator,
+              /* @__PURE__ */ e(
+                a.Indicator,
                 {
                   indeterminate: !0,
                   className: i,
-                  children: /* @__PURE__ */ a(
+                  children: /* @__PURE__ */ e(
                     x,
                     {
                       className: t,
@@ -116,15 +116,15 @@ function M({
             ]
           }
         ),
-        d && /* @__PURE__ */ a(
-          e.Label,
+        d && /* @__PURE__ */ e(
+          a.Label,
           {
             className: w,
             "data-size": r,
             children: d
           }
         ),
-        /* @__PURE__ */ a(e.HiddenInput, { className: C })
+        /* @__PURE__ */ e(a.HiddenInput, { className: C })
       ]
     }
   );

package/dist/shared/{Combobox-DK6nHqAL.js → Combobox-CBa1lnAd.js}

@@ -1,7 +1,7 @@
 import { jsxs as t, jsx as a } from "react/jsx-runtime";
 import { useState as T, useMemo as b } from "react";
 import { createListCollection as V, ComboboxRoot as _, ComboboxLabel as j, ComboboxControl as $, ComboboxTrigger as q, ComboboxClearTrigger as D, ComboboxPositioner as E, ComboboxContent as M, ComboboxInput as O, ComboboxEmpty as P, ComboboxItem as Q, ComboboxItemText as R, ComboboxItemIndicator as z } from "@ark-ui/react/combobox";
-import { b as A, C as B, S as F, a as G } from "./icons-Dfn6EUcz.js";
+import { c as A, C as B, S as F, b as G } from "./icons-bQxPPV8R.js";
 const H = {
   small: "mare:h-10",
   medium: "mare:h-12"

package/dist/shared/{DatePicker-CF9y6eAm.js → DatePicker-BQulFC2D.js}

@@ -2,7 +2,7 @@ import { jsxs as u, jsx as l, Fragment as ne } from "react/jsx-runtime";
 import { useState as er, useEffect as rr, useMemo as oe } from "react";
 import { DatePickerRoot as ar, DatePickerLabel as tr, DatePickerControl as nr, DatePickerTrigger as or, DatePickerContext as le, DatePickerClearTrigger as lr, DatePickerPositioner as ir, DatePickerContent as cr, DatePickerView as j, DatePickerViewControl as sr, DatePickerPrevTrigger as mr, DatePickerViewTrigger as dr, DatePickerRangeText as ie, DatePickerNextTrigger as ur, DatePickerTable as $e, DatePickerTableHead as hr, DatePickerTableRow as G, DatePickerTableHeader as fr, DatePickerTableBody as ge, DatePickerTableCell as be, DatePickerTableCellTrigger as xe } from "@ark-ui/react/date-picker";
 import { Portal as yr } from "@ark-ui/react/portal";
-import { h as pr, b as $r, d as gr, e as br } from "./icons-Dfn6EUcz.js";
+import { i as pr, c as $r, e as gr, f as br } from "./icons-bQxPPV8R.js";
 function O(e, r) {
   return e - r * Math.floor(e / r);
 }

package/dist/shared/{DialogFooter-BwEB19v9.js → DialogFooter-0gaMdpXV.js}

@@ -2,7 +2,7 @@ import { jsx as a, jsxs as i } from "react/jsx-runtime";
 import { Dialog as o } from "@ark-ui/react/dialog";
 import { Portal as w } from "@ark-ui/react/portal";
 import { B as n } from "./Button-AfMqNCme.js";
-import { g as _ } from "./icons-Dfn6EUcz.js";
+import { a as _ } from "./icons-bQxPPV8R.js";
 const k = (e) => `
 	mare:fixed mare:inset-0 mare:z-40
 	${e ?? "mare:bg-overlay"}

package/dist/shared/{DrawerFooter-C0SLP8KU.js → DrawerFooter-CpO7chLC.js}

@@ -2,7 +2,7 @@ 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 { g as y } from "./icons-Dfn6EUcz.js";
+import { a as y } from "./icons-bQxPPV8R.js";
 const _ = (e) => {
   switch (e) {
     case "left":

package/dist/shared/InputOtp-CUXXVP2E.js

@@ -0,0 +1,72 @@
+import { jsxs as I, jsx as m } from "react/jsx-runtime";
+import { PinInput as a } from "@ark-ui/react/pin-input";
+const j = "mare:flex mare:items-center mare:gap-2", w = {
+  small: "mare:w-10 mare:h-10 mare:px-3",
+  medium: "mare:w-12 mare:h-12 mare:px-3.5",
+  large: "mare:w-14 mare:h-14 mare:px-3"
+}, k = (e) => `
+	mare:text-center mare:tpc-typography-body-m
+	mare:appearance-none mare:rounded-input mare:outline-none
+	mare:text-default mare:placeholder:text-weak
+	mare:border mare:border-strong
+	mare:enabled:focus:border-2 mare:enabled:focus:border-accent
+	mare:disabled:text-disabled mare:disabled:border-disabled-default
+	mare:ark-invalid:border-2 mare:ark-invalid:border-danger
+	mare:transition-colors mare:duration-200
+	${w[e]}
+`, d = (e) => Array.from(e);
+function V({
+  length: e = 4,
+  value: o,
+  defaultValue: t,
+  onValueChange: i,
+  onComplete: l,
+  size: s = "medium",
+  mask: u = !1,
+  integerOnly: p = !0,
+  placeholder: c = "",
+  invalid: b,
+  disabled: f,
+  readOnly: x,
+  required: h,
+  autoFocus: v,
+  name: y,
+  id: g
+}) {
+  const C = k(s);
+  return /* @__PURE__ */ I(
+    a.Root,
+    {
+      id: g,
+      count: e,
+      value: o === void 0 ? void 0 : d(o),
+      defaultValue: t === void 0 ? void 0 : d(t),
+      otp: !0,
+      mask: u,
+      placeholder: c,
+      type: p ? "numeric" : "alphanumeric",
+      invalid: b,
+      disabled: f,
+      readOnly: x,
+      required: h,
+      autoFocus: v,
+      name: y,
+      onValueChange: (r) => i?.(r.value.join("")),
+      onValueComplete: (r) => l?.(r.value.join("")),
+      children: [
+        /* @__PURE__ */ m(a.Control, { className: j, children: Array.from({ length: e }, (r, n) => /* @__PURE__ */ m(
+          a.Input,
+          {
+            index: n,
+            className: C
+          },
+          n
+        )) }),
+        /* @__PURE__ */ m(a.HiddenInput, {})
+      ]
+    }
+  );
+}
+export {
+  V as I
+};

package/dist/shared/{Paginator-CcN6wND7.js → Paginator-Da0XKfF3.js}

@@ -2,8 +2,8 @@ import { jsxs as d, jsx as e } from "react/jsx-runtime";
 import { useRef as P, useState as w, useEffect as R } from "react";
 import { Pagination as c } from "@ark-ui/react/pagination";
 import { B as h } from "./Button-AfMqNCme.js";
-import { S as j } from "./SelectField-DNlX8uuG.js";
-import { c as N, d as k, e as W, f as I } from "./icons-Dfn6EUcz.js";
+import { S as j } from "./SelectField-dNCMdSYU.js";
+import { d as N, e as k, f as W, g as I } from "./icons-bQxPPV8R.js";
 const O = (a) => `
 	mare:w-full mare:flex mare:flex-wrap mare:items-center mare:gap-2
 	${a ? "mare:justify-between" : "mare:justify-center"}

package/dist/shared/{PanelMenu-Ch4NsZD_.js → PanelMenu-CYbr6cvz.js}

@@ -1,7 +1,7 @@
 import { jsx as a, jsxs as s, Fragment as u } from "react/jsx-runtime";
 import { useMemo as x } from "react";
 import { createTreeCollection as f, TreeView as n } from "@ark-ui/react/tree-view";
-import { C as b } from "./icons-Dfn6EUcz.js";
+import { C as b } from "./icons-bQxPPV8R.js";
 const g = "mare:flex mare:flex-col mare:gap-1", v = "mare:flex mare:flex-col mare:gap-1", k = `
 	mare:group mare:flex mare:items-center mare:gap-2 mare:min-h-10 mare:px-3 mare:py-2
 	mare:rounded-menu-item mare:cursor-pointer mare:select-none mare:outline-none