@tpc-mare/mare-ui-components-react 1.0.2 → 1.0.3-beta.0

package/dist/{password/Password.types.d.ts → password.d.ts}

@@ -1,39 +1,58 @@
-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 {};
+import { ForwardRefExoticComponent } from 'react';
+import { InputHTMLAttributes } from 'react';
+import { JSX as JSX_2 } from 'react';
+import { ReactNode } from 'react';
+import { RefAttributes } from 'react';
+
+declare type ForwardedNativeProperties = Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'defaultValue' | 'size' | 'type' | 'className' | 'style'>;
+
+declare const INPUT_TEXT_SIZES: readonly ["small", "medium"];
+
+declare type InputTextSize = (typeof INPUT_TEXT_SIZES)[number];
+
+export declare const Password: ForwardRefExoticComponent<PasswordProperties & RefAttributes<HTMLInputElement>>;
+
+/** A single requirement row for `footer` (e.g. "At least one uppercase"). */
+export declare function PasswordFooterItem({ children }: {
+    children?: ReactNode;
+}): JSX_2.Element;
+
+export declare interface PasswordProperties extends ForwardedNativeProperties {
+    /** Valor controlado. Omítelo para dejar el campo uncontrolled. */
+    value?: string;
+    /** Valor inicial cuando el campo es uncontrolled (sin `value`). */
+    defaultValue?: 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/{progress-bar/ProgressBar.types.d.ts → progress-bar.d.ts}

@@ -1,38 +1,45 @@
-export type ProgressBarMode = 'determinate' | 'indeterminate';
-export interface ProgressBarProperties {
-    /**
-     * The current value. Ignored when `mode` is `'indeterminate'`.
-     * @default 0
-     */
-    value?: number;
-    /**
-     * `'determinate'` shows a filled bar sized to `value`. `'indeterminate'`
-     * shows the looping two-bar animation (no known value/ETA).
-     * @default 'determinate'
-     */
-    mode?: ProgressBarMode;
-    /**
-     * The minimum allowed value.
-     * @default 0
-     */
-    min?: number;
-    /**
-     * The maximum allowed value.
-     * @default 100
-     */
-    max?: number;
-    /**
-     * Label rendered above the bar.
-     */
-    label?: string;
-    /**
-     * Shows the formatted value (e.g. "40%") next to the label.
-     * Ignored when `mode` is `'indeterminate'` (there's no value to show).
-     * @default false
-     */
-    showValue?: boolean;
-    /**
-     * Unique identifier for the progress bar.
-     */
-    id?: string;
-}
+import { JSX as JSX_2 } from 'react';
+
+export declare function ProgressBar({ value, mode, min, max, label, showValue, id, }: ProgressBarProperties): JSX_2.Element;
+
+export declare type ProgressBarMode = 'determinate' | 'indeterminate';
+
+export declare interface ProgressBarProperties {
+    /**
+     * The current value. Ignored when `mode` is `'indeterminate'`.
+     * @default 0
+     */
+    value?: number;
+    /**
+     * `'determinate'` shows a filled bar sized to `value`. `'indeterminate'`
+     * shows the looping two-bar animation (no known value/ETA).
+     * @default 'determinate'
+     */
+    mode?: ProgressBarMode;
+    /**
+     * The minimum allowed value.
+     * @default 0
+     */
+    min?: number;
+    /**
+     * The maximum allowed value.
+     * @default 100
+     */
+    max?: number;
+    /**
+     * Label rendered above the bar.
+     */
+    label?: string;
+    /**
+     * Shows the formatted value (e.g. "40%") next to the label.
+     * Ignored when `mode` is `'indeterminate'` (there's no value to show).
+     * @default false
+     */
+    showValue?: boolean;
+    /**
+     * Unique identifier for the progress bar.
+     */
+    id?: string;
+}
+
+export { }

package/dist/{progress-spinner/ProgressSpinner.d.ts → progress-spinner.d.ts}

@@ -1,10 +1,15 @@
-/**
- * Mare ProgressSpinner — React. Ark has no spinner (pure SVG + CSS), so it's
- * Mare-owned. Identical markup to the Vue version. Dash keyframe in styles.css.
- */
-export interface ProgressSpinnerProperties {
-    /** Extra classes for the <circle> (e.g. stroke color per Button severity). */
-    circleClass?: string;
-    className?: string;
-}
-export declare function ProgressSpinner({ circleClass, className, }: ProgressSpinnerProperties): import("react").JSX.Element;
+import { JSX as JSX_2 } from 'react';
+
+export declare function ProgressSpinner({ circleClass, className, }: ProgressSpinnerProperties): JSX_2.Element;
+
+/**
+ * Mare ProgressSpinner — React. Ark has no spinner (pure SVG + CSS), so it's
+ * Mare-owned. Identical markup to the Vue version. Dash keyframe in styles.css.
+ */
+export declare interface ProgressSpinnerProperties {
+    /** Extra classes for the <circle> (e.g. stroke color per Button severity). */
+    circleClass?: string;
+    className?: string;
+}
+
+export { }

package/dist/radio-group/index.js

@@ -1,4 +1,4 @@
-import { R as a } from "../shared/RadioGroup-B8CXU8-l.js";
+import { R as a } from "../shared/RadioGroup-CHgzVvZO.js";
 export {
   a as RadioGroup
 };

package/dist/{radio-group/RadioGroup.types.d.ts → radio-group.d.ts}

@@ -1,62 +1,81 @@
-import { RadioGroupSize, RadioGroupOrientation, RadioOptionItem } from '@tpc-development/mare-ui-components-core/radio-group';
-export type { RadioGroupSize, RadioGroupOrientation, RadioOptionItem, } from '@tpc-development/mare-ui-components-core/radio-group';
-export interface RadioGroupProperties {
-    /**
-     * The available options.
-     */
-    items: RadioOptionItem[];
-    /**
-     * The controlled selected value.
-     */
-    value?: string | null;
-    /**
-     * Initial selected value (uncontrolled mode).
-     */
-    defaultValue?: string;
-    /**
-     * Handler called when the selected value changes.
-     */
-    onValueChange?: (value: string) => void;
-    /**
-     * Size variant.
-     * @default 'small'
-     */
-    size?: RadioGroupSize;
-    /**
-     * Layout direction of the items.
-     * @default 'vertical'
-     */
-    orientation?: RadioGroupOrientation;
-    /**
-     * Disables the entire group.
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * Marks the group as invalid (red styling).
-     * @default false
-     */
-    invalid?: boolean;
-    /**
-     * Makes the group read-only.
-     * @default false
-     */
-    readOnly?: boolean;
-    /**
-     * Marks the group as required for form validation.
-     * @default false
-     */
-    required?: boolean;
-    /**
-     * The name attribute for form submission.
-     */
-    name?: string;
-    /**
-     * ID of an associated form element.
-     */
-    form?: string;
-    /**
-     * Unique identifier for the group.
-     */
-    id?: string;
-}
+import { ForwardRefExoticComponent } from 'react';
+import { RefAttributes } from 'react';
+
+declare const RADIO_GROUP_ORIENTATIONS: readonly ["horizontal", "vertical"];
+
+declare const RADIO_GROUP_SIZES: readonly ["small", "medium", "large"];
+
+export declare const RadioGroup: ForwardRefExoticComponent<RadioGroupProperties & RefAttributes<HTMLDivElement>>;
+
+export declare type RadioGroupOrientation = (typeof RADIO_GROUP_ORIENTATIONS)[number];
+
+export declare interface RadioGroupProperties {
+    /**
+     * The available options.
+     */
+    items: RadioOptionItem[];
+    /**
+     * The controlled selected value.
+     */
+    value?: string | null;
+    /**
+     * Initial selected value (uncontrolled mode).
+     */
+    defaultValue?: string;
+    /**
+     * Handler called when the selected value changes.
+     */
+    onValueChange?: (value: string) => void;
+    /**
+     * Size variant.
+     * @default 'small'
+     */
+    size?: RadioGroupSize;
+    /**
+     * Layout direction of the items.
+     * @default 'vertical'
+     */
+    orientation?: RadioGroupOrientation;
+    /**
+     * Disables the entire group.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Marks the group as invalid (red styling).
+     * @default false
+     */
+    invalid?: boolean;
+    /**
+     * Makes the group read-only.
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Marks the group as required for form validation.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * The name attribute for form submission.
+     */
+    name?: string;
+    /**
+     * ID of an associated form element.
+     */
+    form?: string;
+    /**
+     * Unique identifier for the group.
+     */
+    id?: string;
+}
+
+export declare type RadioGroupSize = (typeof RADIO_GROUP_SIZES)[number];
+
+export declare interface RadioOptionItem {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+
+export { }

package/dist/search-field/index.js

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

package/dist/search-field.d.ts

@@ -0,0 +1,55 @@
+import { ForwardRefExoticComponent } from 'react';
+import { InputHTMLAttributes } from 'react';
+import { ReactNode } from 'react';
+import { RefAttributes } from 'react';
+
+/** Native passthrough same as InputText, minus what SearchField owns/reshapes. */
+declare type ForwardedInputProperties = Omit<InputTextProperties, 'value' | 'onValueChange' | 'rounded' | 'defaultValue'>;
+
+declare type ForwardedNativeProperties = Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'defaultValue' | 'size' | 'className' | 'style'>;
+
+declare const INPUT_TEXT_SIZES: readonly ["small", "medium"];
+
+declare interface InputTextProperties extends ForwardedNativeProperties {
+    /** Valor controlado. Omítelo para dejar el campo uncontrolled (el DOM
+     * guarda el valor y `defaultValue` aplica). */
+    value?: string;
+    /** Valor inicial cuando el campo es uncontrolled (sin `value`). */
+    defaultValue?: string;
+    /** Controlled change handler — receives the next string value. */
+    onValueChange?: (value: string) => void;
+    size?: InputTextSize;
+    rounded?: boolean;
+    invalid?: boolean;
+    disabled?: boolean;
+}
+
+declare type InputTextSize = (typeof INPUT_TEXT_SIZES)[number];
+
+export declare const SearchField: ForwardRefExoticComponent<SearchFieldProperties & RefAttributes<HTMLInputElement>>;
+
+export declare interface SearchFieldProperties extends ForwardedInputProperties {
+    /** Valor controlado. Omítelo para dejar el campo uncontrolled. */
+    value?: string;
+    /** Valor inicial cuando el campo es uncontrolled (sin `value`). */
+    defaultValue?: 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/segmented-control/index.js

@@ -1,4 +1,4 @@
-import { S as r } from "../shared/SegmentedControl-BfE3jNM6.js";
+import { S as r } from "../shared/SegmentedControl-D3znmx9l.js";
 export {
   r as SegmentedControl
 };

package/dist/{segmented-control/SegmentedControl.types.d.ts → segmented-control.d.ts}

@@ -1,54 +1,70 @@
-import { ReactNode } from 'react';
-import { SegmentedControlSize, SegmentedControlOptionWidth, SegmentedControlOptionItem } from '@tpc-development/mare-ui-components-core/segmented-control';
-export type { SegmentedControlSize, SegmentedControlOptionWidth, SegmentedControlOptionItem, } from '@tpc-development/mare-ui-components-core/segmented-control';
-export interface SegmentedControlProperties {
-    /**
-     * The available segments.
-     */
-    items: SegmentedControlOptionItem[];
-    /**
-     * The controlled selected value.
-     */
-    value?: string;
-    /**
-     * Initial selected value (uncontrolled mode).
-     */
-    defaultValue?: string;
-    /**
-     * Handler called when the selected segment changes.
-     */
-    onValueChange?: (value: string) => void;
-    /**
-     * Size variant.
-     * @default 'small'
-     */
-    size?: SegmentedControlSize;
-    /**
-     * With 'equal', every segment takes up the same width (flex-1). Own Mare
-     * prop, not present in PrimeVue.
-     * @default 'auto'
-     */
-    optionWidth?: SegmentedControlOptionWidth;
-    /**
-     * Disables the entire group.
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * Replaces a segment's default text content — e.g. to add a leading
-     * icon. Receives the raw item.
-     */
-    renderOption?: (item: SegmentedControlOptionItem) => ReactNode;
-    /**
-     * The name attribute for form submission.
-     */
-    name?: string;
-    /**
-     * ID of an associated form element.
-     */
-    form?: string;
-    /**
-     * Unique identifier for the group.
-     */
-    id?: string;
-}
+import { JSX as JSX_2 } from 'react';
+import { ReactNode } from 'react';
+
+declare const SEGMENTED_CONTROL_SIZES: readonly ["small", "medium"];
+
+export declare function SegmentedControl({ items, value, defaultValue, onValueChange, size, optionWidth, disabled, renderOption, name, form, id, }: SegmentedControlProperties): JSX_2.Element;
+
+export declare interface SegmentedControlOptionItem {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+
+export declare type SegmentedControlOptionWidth = 'auto' | 'equal';
+
+export declare interface SegmentedControlProperties {
+    /**
+     * The available segments.
+     */
+    items: SegmentedControlOptionItem[];
+    /**
+     * The controlled selected value.
+     */
+    value?: string;
+    /**
+     * Initial selected value (uncontrolled mode).
+     */
+    defaultValue?: string;
+    /**
+     * Handler called when the selected segment changes.
+     */
+    onValueChange?: (value: string) => void;
+    /**
+     * Size variant.
+     * @default 'small'
+     */
+    size?: SegmentedControlSize;
+    /**
+     * With 'equal', every segment takes up the same width (flex-1). Own Mare
+     * prop, not present in PrimeVue.
+     * @default 'auto'
+     */
+    optionWidth?: SegmentedControlOptionWidth;
+    /**
+     * Disables the entire group.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Replaces a segment's default text content — e.g. to add a leading
+     * icon. Receives the raw item.
+     */
+    renderOption?: (item: SegmentedControlOptionItem) => ReactNode;
+    /**
+     * The name attribute for form submission.
+     */
+    name?: string;
+    /**
+     * ID of an associated form element.
+     */
+    form?: string;
+    /**
+     * Unique identifier for the group.
+     */
+    id?: string;
+}
+
+export declare type SegmentedControlSize = (typeof SEGMENTED_CONTROL_SIZES)[number];
+
+export { }

package/dist/select-field/index.js

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

package/dist/select-field.d.ts

@@ -0,0 +1,40 @@
+import { ForwardRefExoticComponent } from 'react';
+import { ReactNode } from 'react';
+import { RefAttributes } from 'react';
+
+declare const SELECT_FIELD_SIZES: readonly ["small", "medium"];
+
+export declare const SelectField: ForwardRefExoticComponent<SelectFieldReactProperties & RefAttributes<HTMLDivElement>>;
+
+export declare interface SelectFieldProperties {
+    options: SelectOptionItem[];
+    placeholder?: string;
+    size?: SelectFieldSize;
+    disabled?: boolean;
+    invalid?: boolean;
+    clearable?: boolean;
+    label?: string;
+}
+
+declare interface SelectFieldReactProperties extends SelectFieldProperties {
+    value?: string | null;
+    onValueChange?: (value: string | null) => void;
+    leadingIcon?: ReactNode;
+    indicator?: ReactNode;
+    clearIcon?: ReactNode;
+    checkIcon?: ReactNode;
+    renderValue?: (item: SelectOptionItem) => ReactNode;
+    renderOption?: (option: SelectOptionItem) => ReactNode;
+}
+
+export declare type SelectFieldSize = (typeof SELECT_FIELD_SIZES)[number];
+
+export declare interface SelectOptionItem {
+    label: string;
+    value: string;
+    disabled?: boolean;
+    /** Consumer-defined extras (icon, description…) resolved in the option slot. */
+    [key: string]: unknown;
+}
+
+export { }

package/dist/shared/{Accordion-BSmOrxH6.js → Accordion-QSdlMSst.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 { I as c } from "./IconChevronDown-ev2ML7Ex.js";
+import { IconChevronDown as c } from "@tabler/icons-react";
 const d = "mare:w-full", u = (t) => `
 	mare:flex mare:flex-col
 	${t ? "mare:border-b mare:border-default" : ""}
@@ -20,11 +20,14 @@ const d = "mare:w-full", u = (t) => `
 	mare:ark-closed:[animation:mare-panel-menu-branch-close_200ms_ease-in]
 `, x = "mare:pb-4";
 function w({
-  items: t,
+  /* Default a [] aunque el tipo diga que es requerido: `items={data}`
+   * con data de un fetch sin resolver llega `undefined` en el primer
+   * render y el .map() de abajo tiraba pantalla blanca. */
+  items: t = [],
   value: n,
   defaultValue: o,
-  onValueChange: s,
-  multiple: l = !1,
+  onValueChange: l,
+  multiple: s = !1,
   collapsible: i = !0
 }) {
   return /* @__PURE__ */ a(
@@ -33,9 +36,9 @@ function w({
       className: d,
       value: n,
       defaultValue: o,
-      multiple: l,
+      multiple: s,
       collapsible: i,
-      onValueChange: (e) => s?.(e.value),
+      onValueChange: (e) => l?.(e.value),
       children: t.map((e) => /* @__PURE__ */ m(
         r.Item,
         {