@tpc-mare/mare-ui-components-react 0.1.2 → 0.1.4

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/badge/Badge.d.ts

@@ -0,0 +1,2 @@
+import { BadgeProperties } from './Badge.types';
+export declare function Badge({ severity, icon, children, }: BadgeProperties): import("react").JSX.Element;

package/dist/badge/Badge.types.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+import { BadgeSeverity } from '@tpc-development/mare-ui-components-core/badge';
+export type { BadgeSeverity } from '@tpc-development/mare-ui-components-core/badge';
+export interface BadgeProperties {
+    /** @default 'accent' */
+    severity?: BadgeSeverity;
+    /** Shown next to (or instead of) `children`. */
+    icon?: ReactNode;
+    /** The count/label. A bare dot renders when neither this nor `icon` is set. */
+    children?: ReactNode;
+}

package/dist/badge/index.d.ts

@@ -0,0 +1,2 @@
+export { Badge } from './Badge';
+export type { BadgeProperties, BadgeSeverity } from './Badge.types';

package/dist/badge/index.js

@@ -0,0 +1,4 @@
+import { B as o } from "../shared/Badge-WC6my4Aw.js";
+export {
+  o as Badge
+};

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,9 @@
+export { Avatar } from '../avatar';
+export type { AvatarProperties, AvatarSize } from '../avatar';
+export { Badge } from '../badge';
+export type { BadgeProperties, BadgeSeverity } from '../badge';
+export { Tag } from '../tag';
+export type { TagProperties, TagSeverity, TagSize } from '../tag';
 export { Button } from '../button';
 export type { ButtonProperties, ButtonSeverity, ButtonSize, ButtonVariant, IconPosition, } from '../button';
 export { SelectField } from '../select-field';
@@ -12,6 +18,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 +30,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,48 @@
-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/Badge-WC6my4Aw.js";
+import { T as p } from "../shared/Tag-BtbmgIwL.js";
+import { B as m } from "../shared/Button-AfMqNCme.js";
+import { S as l } from "../shared/SelectField-BSTmWjYy.js";
+import { C as F } from "../shared/Combobox-DeUG_muZ.js";
+import { T as d } from "../shared/Tabs-BqIorZYD.js";
+import { P as D } from "../shared/ProgressSpinner-B-lrS-tu.js";
+import { I as u, a as C } from "../shared/IconField-Dh6j6SL1.js";
+import { C as c, F as g, a as I, H as h } from "../shared/HelperText-CVWWvLCI.js";
+import { T as B } from "../shared/Textarea-iJhYTZos.js";
+import { S as A } from "../shared/SearchField-CgDz_s1O.js";
+import { I as P } from "../shared/InputNumber-D48wsE-o.js";
+import { C as k } from "../shared/Checkbox-DsM70wQl.js";
+import { R as G } from "../shared/RadioGroup-lw27DCoV.js";
+import { S as N } from "../shared/Switch-D6E2OmgE.js";
+import { D as q, a as y, b as z } from "../shared/DialogFooter-DLWy6Mln.js";
+import { D as J, a as K, b as O } from "../shared/DrawerFooter-DvUgumx0.js";
+import { M as U } 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,
+  a as Avatar,
+  t as Badge,
+  m as Button,
+  c as CharacterCount,
+  k as Checkbox,
+  F as Combobox,
+  q as Dialog,
+  y as DialogFooter,
+  z as DialogHeader,
+  J as Drawer,
+  K as DrawerFooter,
+  O as DrawerHeader,
+  g as FloatLabel,
+  I as FormField,
+  h 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
+  P as InputNumber,
+  C as InputText,
+  U as Menu,
+  D as ProgressSpinner,
+  G as RadioGroup,
+  A as SearchField,
+  l as SelectField,
+  N as Switch,
+  d as Tabs,
+  p as Tag,
+  B 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/Badge-WC6my4Aw.js

@@ -0,0 +1,35 @@
+import { jsxs as i } from "react/jsx-runtime";
+const s = `
+	mare:rounded-full mare:inline-flex mare:justify-center mare:items-center
+	mare:text-center mare:py-0 mare:tpc-typography-label-xs
+	mare:h-2 mare:min-w-2 mare:has-value:h-4 mare:has-value:min-w-4
+	mare:has-icon:px-0 mare:px-1
+	mare:data-severity-accent:bg-accent mare:data-severity-accent:text-on-accent
+	mare:data-severity-danger:bg-danger mare:data-severity-danger:text-on-danger
+	mare:data-severity-warning:bg-warning mare:data-severity-warning:text-on-warning
+	mare:data-severity-highlight:bg-highlight mare:data-severity-highlight:text-on-accent
+	mare:data-severity-positive:bg-positive mare:data-severity-positive:text-on-positive
+`;
+function c({
+  severity: r = "accent",
+  icon: e,
+  children: a
+}) {
+  const t = !!e, n = t || a != null;
+  return /* @__PURE__ */ i(
+    "span",
+    {
+      className: s,
+      "data-severity": r,
+      "data-has-value": n ? "true" : void 0,
+      "data-has-icon": t ? "true" : void 0,
+      children: [
+        e,
+        a
+      ]
+    }
+  );
+}
+export {
+  c as B
+};