@tpc-mare/mare-ui-components-react 1.0.2 → 1.0.3

package/dist/{slider/Slider.types.d.ts → slider.d.ts}

@@ -1,24 +1,33 @@
-import { SliderOrientation } from '@tpc-development/mare-ui-components-core/slider';
-export type { SliderOrientation } from '@tpc-development/mare-ui-components-core/slider';
-export interface SliderProperties {
-    /**
-     * Controlled value — one number per thumb. A single slider is a
-     * 1-element array; a range is a 2-element array. `[start, end]`.
-     * @default [0]
-     */
-    value?: number[];
-    /** Change handler — receives the next value for every thumb. */
-    onValueChange?: (value: number[]) => void;
-    /** @default 0 */
-    min?: number;
-    /** @default 100 */
-    max?: number;
-    /** @default 1 */
-    step?: number;
-    /** @default 'horizontal' */
-    orientation?: SliderOrientation;
-    disabled?: boolean;
-    invalid?: boolean;
-    id?: string;
-    name?: string;
-}
+import { ForwardRefExoticComponent } from 'react';
+import { RefAttributes } from 'react';
+
+export declare const Slider: ForwardRefExoticComponent<SliderProperties & RefAttributes<HTMLDivElement>>;
+
+declare const SLIDER_ORIENTATIONS: readonly ["horizontal", "vertical"];
+
+export declare type SliderOrientation = (typeof SLIDER_ORIENTATIONS)[number];
+
+export declare interface SliderProperties {
+    /**
+     * Controlled value — one number per thumb. A single slider is a
+     * 1-element array; a range is a 2-element array. `[start, end]`.
+     * @default [0]
+     */
+    value?: number[];
+    /** Change handler — receives the next value for every thumb. */
+    onValueChange?: (value: number[]) => void;
+    /** @default 0 */
+    min?: number;
+    /** @default 100 */
+    max?: number;
+    /** @default 1 */
+    step?: number;
+    /** @default 'horizontal' */
+    orientation?: SliderOrientation;
+    disabled?: boolean;
+    invalid?: boolean;
+    id?: string;
+    name?: string;
+}
+
+export { }

package/dist/snackbar/index.js

@@ -1,4 +1,4 @@
-import { S as c, c as e } from "../shared/Snackbar-BhORbyt-.js";
+import { S as c, c as e } from "../shared/Snackbar-DP-b4GWx.js";
 export {
   c as Snackbar,
   e as createSnackbar

package/dist/{snackbar/Snackbar.types.d.ts → snackbar.d.ts}

@@ -1,42 +1,63 @@
-import { ReactNode, RefObject } from 'react';
-import { SnackbarSeverity, SnackbarPlacement } from '@tpc-development/mare-ui-components-core/snackbar';
-export type { SnackbarSeverity, SnackbarPlacement, } from '@tpc-development/mare-ui-components-core/snackbar';
-/** The payload for `controller.show()`/`.update()`. Framework-shaped on
- * purpose (ReactNode `detail`/`leading`) — this is why it lives in the
- * adapter, not in core alongside `SnackbarSeverity`/`SnackbarPlacement`. */
-export interface SnackbarShowOptions {
-    /** @default 'contrast' */
-    severity?: SnackbarSeverity;
-    detail: ReactNode;
-    /** Icon or image shown before the detail text. Mutually exclusive with
-     * nothing in particular — it's just whatever `ReactNode` you pass. */
-    leading?: ReactNode;
-    /** @default 3000, and never resolves lower than that. */
-    life?: number;
-    /** Progress bar filling over `life`, indicating time until auto-dismiss. @default false */
-    progressBar?: boolean;
-    action?: {
-        label: string;
-        onClick: () => void;
-    };
-}
-/** Returned by `createSnackbar()`. Mirrors the legacy `useToast()` service —
- * mount ONE `<Snackbar controller={controller} />` per controller, then push
- * messages into it from anywhere via `controller.show(...)`. */
-export interface SnackbarController {
-    /** Pushes a new message, returns its id. */
-    show(options: SnackbarShowOptions): string;
-    /** Dismisses one message by id, or every message in this controller if omitted. */
-    dismiss(id?: string): void;
-    update(id: string, options: Partial<SnackbarShowOptions>): void;
-}
-export interface SnackbarConfig {
-    /** @default 'bottom-center' */
-    placement?: SnackbarPlacement;
-}
-export interface SnackbarProperties {
-    controller: SnackbarController;
-    /** Where the toast stack portals to. Override if your app scopes
-     * `data-theme` to a sub-tree rather than the document root. */
-    portalContainer?: RefObject<HTMLElement | null>;
-}
+import { JSX as JSX_2 } from 'react';
+import { ReactNode } from 'react';
+import { RefObject } from 'react';
+
+export declare function createSnackbar(config?: SnackbarConfig): SnackbarController;
+
+export declare function Snackbar({ controller, portalContainer }: SnackbarProperties): JSX_2.Element;
+
+declare const SNACKBAR_SEVERITIES: readonly ["contrast", "secondary", "error"];
+
+export declare interface SnackbarConfig {
+    /** @default 'bottom-center' */
+    placement?: SnackbarPlacement;
+}
+
+/** Returned by `createSnackbar()`. Mirrors the legacy `useToast()` service —
+ * mount ONE `<Snackbar controller={controller} />` per controller, then push
+ * messages into it from anywhere via `controller.show(...)`. */
+export declare interface SnackbarController {
+    /** Pushes a new message, returns its id. */
+    show(options: SnackbarShowOptions): string;
+    /** Dismisses one message by id, or every message in this controller if omitted. */
+    dismiss(id?: string): void;
+    update(id: string, options: Partial<SnackbarShowOptions>): void;
+}
+
+/** No 'center' — Ark's Toast placement is edge-anchored (stack management),
+ * unlike the legacy PrimeVue Toast which could float mid-viewport. Dropped:
+ * no real usage exercised it (SnackbarBasic/SnackbarImage both use
+ * corner/edge placements) and faking it would fight Ark's own --x/--y/--scale
+ * stacking math instead of using it. */
+export declare type SnackbarPlacement = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+
+export declare interface SnackbarProperties {
+    controller: SnackbarController;
+    /** Where the toast stack portals to. Override if your app scopes
+     * `data-theme` to a sub-tree rather than the document root. */
+    portalContainer?: RefObject<HTMLElement | null>;
+}
+
+export declare type SnackbarSeverity = (typeof SNACKBAR_SEVERITIES)[number];
+
+/** The payload for `controller.show()`/`.update()`. Framework-shaped on
+ * purpose (ReactNode `detail`/`leading`) — this is why it lives in the
+ * adapter, not in core alongside `SnackbarSeverity`/`SnackbarPlacement`. */
+export declare interface SnackbarShowOptions {
+    /** @default 'contrast' */
+    severity?: SnackbarSeverity;
+    detail: ReactNode;
+    /** Icon or image shown before the detail text. Mutually exclusive with
+     * nothing in particular — it's just whatever `ReactNode` you pass. */
+    leading?: ReactNode;
+    /** @default 3000, and never resolves lower than that. */
+    life?: number;
+    /** Progress bar filling over `life`, indicating time until auto-dismiss. @default false */
+    progressBar?: boolean;
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+}
+
+export { }

package/dist/stepper/index.js

@@ -1,4 +1,4 @@
-import { S as r } from "../shared/Stepper-DrKKSn_j.js";
+import { S as r } from "../shared/Stepper-CudtdHSg.js";
 export {
   r as Stepper
 };

package/dist/stepper.d.ts

@@ -0,0 +1,38 @@
+import { JSX as JSX_2 } from 'react';
+
+export declare interface StepItemData {
+    title: string;
+    description?: string;
+    /** Consumer-defined extras (icon, content…) resolved in the adapter. */
+    [key: string]: unknown;
+}
+
+export declare function Stepper({ items, step, defaultStep, onStepChange, onStepComplete, linear, orientation, indicatorVariant, isStepValid, isStepSkippable, }: StepperProperties): JSX_2.Element;
+
+declare const STEPPER_ORIENTATIONS: readonly ["horizontal", "vertical"];
+
+/** Visual weight of the current/completed indicator — mirrors the legacy
+ * Vue `completeItem` mode ('default': accent only on current; 'strong':
+ * accent on current AND completed alike). */
+export declare type StepperIndicatorVariant = 'default' | 'strong';
+
+export declare type StepperOrientation = (typeof STEPPER_ORIENTATIONS)[number];
+
+export declare interface StepperProperties {
+    items: StepItemData[];
+    /** Controlled current step index (0-based). Omit to let Ark manage it. */
+    step?: number;
+    defaultStep?: number;
+    onStepChange?: (step: number) => void;
+    onStepComplete?: () => void;
+    /** Requires steps to be completed in order — blocks jumping ahead. */
+    linear?: boolean;
+    orientation?: StepperOrientation;
+    /** 'default': completed steps stay weak-accent. 'strong': completed steps
+     * get the same full-accent treatment as the current one. */
+    indicatorVariant?: StepperIndicatorVariant;
+    isStepValid?: (index: number) => boolean;
+    isStepSkippable?: (index: number) => boolean;
+}
+
+export { }

package/dist/switch/index.js

@@ -1,4 +1,4 @@
-import { S as t } from "../shared/Switch-B5DSQLFL.js";
+import { S as t } from "../shared/Switch-C1dd2rX1.js";
 export {
   t as Switch
 };

package/dist/{switch/Switch.types.d.ts → switch.d.ts}

@@ -1,59 +1,68 @@
-import { SwitchSize } from '@tpc-development/mare-ui-components-core/switch';
-import { ReactNode } from 'react';
-export type { SwitchSize } from '@tpc-development/mare-ui-components-core/switch';
-export interface SwitchProperties {
-    /**
-     * The controlled checked state.
-     */
-    checked?: boolean;
-    /**
-     * Initial checked state (uncontrolled mode).
-     */
-    defaultChecked?: boolean;
-    /**
-     * Handler called when checked state changes.
-     */
-    onCheckedChange?: (checked: boolean) => void;
-    /**
-     * The switch label (also usable via children).
-     */
-    children?: ReactNode;
-    /**
-     * Size variant.
-     * @default 'small'
-     */
-    size?: SwitchSize;
-    /**
-     * Disables interaction.
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * Marks the switch as invalid (red border).
-     * @default false
-     */
-    invalid?: boolean;
-    /**
-     * Makes the switch read-only.
-     * @default false
-     */
-    readOnly?: boolean;
-    /**
-     * Marks the switch as required for form validation.
-     * @default false
-     */
-    required?: boolean;
-    /**
-     * The name attribute for form submission.
-     */
-    name?: string;
-    /**
-     * The value submitted with the form when checked.
-     * @default 'on'
-     */
-    value?: string;
-    /**
-     * Unique identifier for the switch.
-     */
-    id?: string;
-}
+import { ForwardRefExoticComponent } from 'react';
+import { ReactNode } from 'react';
+import { RefAttributes } from 'react';
+
+export declare const Switch: ForwardRefExoticComponent<SwitchProperties & RefAttributes<HTMLInputElement>>;
+
+declare const SWITCH_SIZES: readonly ["small", "medium", "large"];
+
+export declare interface SwitchProperties {
+    /**
+     * The controlled checked state.
+     */
+    checked?: boolean;
+    /**
+     * Initial checked state (uncontrolled mode).
+     */
+    defaultChecked?: boolean;
+    /**
+     * Handler called when checked state changes.
+     */
+    onCheckedChange?: (checked: boolean) => void;
+    /**
+     * The switch label (also usable via children).
+     */
+    children?: ReactNode;
+    /**
+     * Size variant.
+     * @default 'small'
+     */
+    size?: SwitchSize;
+    /**
+     * Disables interaction.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Marks the switch as invalid (red border).
+     * @default false
+     */
+    invalid?: boolean;
+    /**
+     * Makes the switch read-only.
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Marks the switch as required for form validation.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * The name attribute for form submission.
+     */
+    name?: string;
+    /**
+     * The value submitted with the form when checked.
+     * @default 'on'
+     */
+    value?: string;
+    /**
+     * Unique identifier for the switch.
+     */
+    id?: string;
+}
+
+export declare type SwitchSize = (typeof SWITCH_SIZES)[number];
+
+export { }

package/dist/tabs/index.js

@@ -1,4 +1,4 @@
-import { T as r } from "../shared/Tabs-DuufYBV2.js";
+import { T as r } from "../shared/Tabs-lGGLALGR.js";
 export {
   r as Tabs
 };

package/dist/tabs.d.ts

@@ -0,0 +1,30 @@
+import { JSX as JSX_2 } from 'react';
+import { ReactNode } from 'react';
+
+declare const TAB_SIZES: readonly ["small", "medium"];
+
+export declare interface TabItem {
+    /** Unique id; matches the panel. */
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+
+export declare function Tabs({ value, onValueChange, items, size, fluid, renderTab, renderPanel, }: TabsReactProperties): JSX_2.Element;
+
+export declare type TabSize = (typeof TAB_SIZES)[number];
+
+export declare interface TabsProperties {
+    items: TabItem[];
+    size?: TabSize;
+    fluid?: boolean;
+}
+
+declare interface TabsReactProperties extends TabsProperties {
+    value?: string;
+    onValueChange?: (value: string) => void;
+    renderTab?: (item: TabItem) => ReactNode;
+    renderPanel?: (item: TabItem) => ReactNode;
+}
+
+export { }

package/dist/tag-chip/index.js

@@ -1,4 +1,4 @@
-import { T as p } from "../shared/TagChip-CP3aX2_G.js";
+import { T as p } from "../shared/TagChip-QQ6p0JgU.js";
 export {
   p as TagChip
 };

package/dist/{tag-chip/TagChip.types.d.ts → tag-chip.d.ts}

@@ -1,21 +1,33 @@
-import { ReactNode } from 'react';
-import { TagChipSeverity, TagChipSize } from '@tpc-development/mare-ui-components-core/tag-chip';
-export type { TagChipSeverity, TagChipSize, } from '@tpc-development/mare-ui-components-core/tag-chip';
-export interface TagChipProperties {
-    /** @default 'default' */
-    severity?: TagChipSeverity;
-    /** @default 'small' */
-    size?: TagChipSize;
-    disabled?: boolean;
-    /** Leading content icon. */
-    icon?: ReactNode;
-    /** Avatar image URL, rendered before the label. */
-    image?: string;
-    imageAlt?: string;
-    /** Shows a remove button and fires onRemove when clicked. @default false */
-    removable?: boolean;
-    onRemove?: () => void;
-    /** Accessible label for the remove button. @default 'Remove' */
-    removeLabel?: string;
-    children?: ReactNode;
-}
+import { JSX as JSX_2 } from 'react';
+import { ReactNode } from 'react';
+
+declare const TAG_CHIP_SEVERITIES: readonly ["default", "accent"];
+
+declare const TAG_CHIP_SIZES: readonly ["small", "medium"];
+
+export declare function TagChip({ severity, size, disabled, icon, image, imageAlt, removable, onRemove, removeLabel, children, }: TagChipProperties): JSX_2.Element;
+
+export declare interface TagChipProperties {
+    /** @default 'default' */
+    severity?: TagChipSeverity;
+    /** @default 'small' */
+    size?: TagChipSize;
+    disabled?: boolean;
+    /** Leading content icon. */
+    icon?: ReactNode;
+    /** Avatar image URL, rendered before the label. */
+    image?: string;
+    imageAlt?: string;
+    /** Shows a remove button and fires onRemove when clicked. @default false */
+    removable?: boolean;
+    onRemove?: () => void;
+    /** Accessible label for the remove button. @default 'Remove' */
+    removeLabel?: string;
+    children?: ReactNode;
+}
+
+export declare type TagChipSeverity = (typeof TAG_CHIP_SEVERITIES)[number];
+
+export declare type TagChipSize = (typeof TAG_CHIP_SIZES)[number];
+
+export { }

package/dist/tag.d.ts

@@ -0,0 +1,23 @@
+import { JSX as JSX_2 } from 'react';
+import { ReactNode } from 'react';
+
+export declare function Tag({ severity, size, icon, children, }: TagProperties): JSX_2.Element;
+
+declare const TAG_SEVERITIES: readonly ["accent", "accent-weak", "neutral", "positive", "warning", "danger"];
+
+declare const TAG_SIZES: readonly ["small", "medium", "large"];
+
+export declare interface TagProperties {
+    /** @default 'accent' */
+    severity?: TagSeverity;
+    /** @default 'small' */
+    size?: TagSize;
+    icon?: ReactNode;
+    children?: ReactNode;
+}
+
+export declare type TagSeverity = (typeof TAG_SEVERITIES)[number];
+
+export declare type TagSize = (typeof TAG_SIZES)[number];
+
+export { }

package/dist/textarea/index.js

@@ -1,4 +1,4 @@
-import { T as r } from "../shared/Textarea-DHJIWBRM.js";
+import { T as r } from "../shared/Textarea-CJfNbqGA.js";
 export {
   r as Textarea
 };

package/dist/textarea.d.ts

@@ -0,0 +1,26 @@
+import { ForwardRefExoticComponent } from 'react';
+import { RefAttributes } from 'react';
+import { TextareaHTMLAttributes } from 'react';
+
+declare type ForwardedNativeProperties = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'onChange' | 'className' | 'style'>;
+
+declare const INPUT_TEXT_SIZES: readonly ["small", "medium"];
+
+declare type InputTextSize = (typeof INPUT_TEXT_SIZES)[number];
+
+export declare const Textarea: ForwardRefExoticComponent<TextareaProperties & RefAttributes<HTMLTextAreaElement>>;
+
+export declare interface TextareaProperties extends ForwardedNativeProperties {
+    /** Valor controlado. Omítelo para dejar el campo uncontrolled (el DOM
+     * guarda el valor y `defaultValue` aplica). */
+    value?: string;
+    /** Controlled change handler — receives the next string value. */
+    onValueChange?: (value: string) => void;
+    size?: InputTextSize;
+    invalid?: boolean;
+    disabled?: boolean;
+    /** Grows the textarea to fit its content instead of showing a scrollbar. */
+    autoresize?: boolean;
+}
+
+export { }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tpc-mare/mare-ui-components-react",
   "description": "Mare components for React (headless base, MIT). Framework-agnostic design system, React adapter.",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "type": "module",
   "license": "MIT",
   "author": "The Palace Company",
@@ -12,7 +12,7 @@
   },
   "main": "./dist/index/index.js",
   "module": "./dist/index/index.js",
-  "types": "./dist/index/index.d.ts",
+  "types": "./dist/index.d.ts",
   "files": [
     "dist"
   ],
@@ -21,7 +21,7 @@
   ],
   "exports": {
     ".": {
-      "types": "./dist/index/index.d.ts",
+      "types": "./dist/index.d.ts",
       "import": "./dist/index/index.js"
     },
     "./styles.css": "./dist/styles.css",
@@ -33,30 +33,35 @@
     "./themes/baglioni-resorts.css": "./dist/themes/baglioni-resorts.css",
     "./utilities-standalone.css": "./dist/utilities-standalone.css",
     "./*": {
-      "types": "./dist/*/index.d.ts",
+      "types": "./dist/*.d.ts",
       "import": "./dist/*/index.js"
     }
   },
   "scripts": {
     "build": "vite build",
+    "test": "vitest run",
     "build-storybook": "storybook build",
     "dev": "vite build --watch",
     "storybook": "storybook dev -p 6100"
   },
   "peerDependencies": {
-    "@ark-ui/react": "^5.0.0",
+    "@ark-ui/react": ">=5.37.0",
+    "@tabler/icons-react": ">=3.0.0",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   },
   "dependencies": {
-    "@internationalized/date": "3.12.2",
-    "@tabler/icons-react": "^3.44.0",
+    "@internationalized/date": "^3.12.0",
     "tailwind-merge": "^3.4.0"
   },
   "devDependencies": {
     "@ark-ui/react": "^5.37.2",
+    "@tabler/icons-react": "^3.44.0",
     "@storybook/react-vite": "10.5.10",
     "@tailwindcss/vite": "^4.1.17",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/react": "^16.3.3",
+    "@testing-library/user-event": "^14.6.7",
     "@tpc-development/mare-ui-components-core": "workspace:^",
     "@tpc-development/mare-ui-core-styles": "workspace:^",
     "@tpc-development/mare-ui-storybook-addon": "workspace:^",
@@ -64,10 +69,12 @@
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react-swc": "^4.3.1",
+    "jsdom": "^30.0.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "typescript": "^5.9.3",
     "vite": "^7.2.4",
-    "vite-plugin-dts": "^4.5.4"
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^3.2.7"
   }
 }

package/dist/.storybook/main.d.ts

@@ -1,3 +0,0 @@
-import { StorybookConfig } from '@storybook/react-vite';
-declare const config: StorybookConfig;
-export default config;

package/dist/.storybook/manager.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/.storybook/preview.d.ts

@@ -1,3 +0,0 @@
-import { Preview } from '@storybook/react-vite';
-declare const preview: Preview;
-export default preview;

package/dist/accordion/Accordion.d.ts

@@ -1,2 +0,0 @@
-import { AccordionProperties } from './Accordion.types';
-export declare function Accordion({ items, value, defaultValue, onValueChange, multiple, collapsible, }: AccordionProperties): import("react").JSX.Element;

package/dist/accordion/Accordion.types.d.ts

@@ -1,20 +0,0 @@
-import { ReactNode } from 'react';
-import { AccordionItemData } from '@tpc-development/mare-ui-components-core/accordion';
-export type { AccordionItemData } from '@tpc-development/mare-ui-components-core/accordion';
-export interface AccordionItemProperties extends AccordionItemData {
-    subtitle?: ReactNode;
-    content: ReactNode;
-}
-export interface AccordionProperties {
-    items: AccordionItemProperties[];
-    /** Controlled expanded item values. Omit to let Ark manage it. */
-    value?: string[];
-    defaultValue?: string[];
-    onValueChange?: (value: string[]) => void;
-    /** Whether multiple items can be expanded at once.
-     * @default false */
-    multiple?: boolean;
-    /** Whether an expanded item can be collapsed back by clicking it again.
-     * @default true */
-    collapsible?: boolean;
-}

package/dist/accordion/index.d.ts

@@ -1,2 +0,0 @@
-export { Accordion } from './Accordion';
-export type { AccordionProperties, AccordionItemProperties, AccordionItemData, } from './Accordion.types';

package/dist/avatar/Avatar.d.ts

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

package/dist/avatar/index.d.ts

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