@mantis-core/ui 0.1.3 → 0.2.0

package/COMPONENTS.md

@@ -1,147 +1,20 @@
-# @mantis-core/ui Component Catalog
+# @mantis-core/ui Component Index
 
-This document describes what each exported UI component does, when to use it, and key integration notes.
+The detailed package documentation is now split into focused files under [`docs/`](./docs/README.md).
 
-## Export Groups
+## Start Here
 
-## Buttons
+- [Documentation index](./docs/README.md)
+- [Shared contracts](./docs/contracts/controller-props.md)
+- [Underlying library map](./docs/contracts/dependency-map.md)
+- [Style import guide](./docs/contracts/style-imports.md)
 
-- `Button`
-  - Generic action button with variant support.
-  - Use for reusable actions, not domain-specific behavior.
+## Key component docs
 
-## Loaders
-
-- `Loading`
-  - Wrapper and spinner/loading utilities for async states.
-
-## Forms
-
-- `CKEditorInput`
-  - Rich text editor input built around CKEditor.
-  - Includes content metrics type export.
-- `DateInput`
-  - Date picker field.
-- `DropDown`
-  - PrimeReact dropdown wrapper.
-- `ErrorMessage`
-  - Standardized field error rendering.
-- `FormFieldRender`
-  - Label + render prop + error wrapper for fields.
-- `HiddenField`
-  - Hidden input field support.
-- `MultiSelect`
-  - Multi-select control wrapper.
-- `NumberInput`
-  - Numeric input control.
-- `RenderField`
-  - Field renderer utility.
-- `Select`
-  - Select component wrapper.
-- `Switch`
-  - Boolean switch input.
-- `TextArea`
-  - Multi-line text input.
-- `TextInput`
-  - Standard text input.
-- `TimePicker`
-  - Time selection input.
-- `Toggle`
-  - Toggle control.
-- `ToggleInlineButton`
-  - Inline toggle button.
-- `UploadFilesPreview`
-  - Upload preview component with item/copy types.
-- `ControllerProps` (type)
-  - Shared control typing contract.
-
-## Tables
-
-- `TableToolbar`
-  - Header area for title, meta, and actions.
-- `TableFilterField`
-  - Wrapper for consistent table filter controls.
-- `ActionColumn`
-  - Action menu column helper.
-- `FilterPannel`
-  - Filter container panel.
-- `MultiSelectFilter`
-  - Multi-select filter utility for tables.
-- `IndexColumn`
-  - Index/ordinal column helper.
-- `MenuButton`
-  - Row action menu button.
-- `PaginatedTable`
-  - PrimeReact `DataTable` wrapper with Mantis Core defaults.
-  - Key props:
-    - `showIndexColumn`
-    - `showActionColumn`
-    - `useMantisCoreStyles`
-    - `actionColumnItems`
-
-## Page and Admin Layout
-
-- `FormSection`
-  - Structured form section block.
-- `PageTitle`
-  - Page heading helper.
-- `AdminPageHeader`
-  - Page header presentation component.
-- `AdminPageConfigurator`
-  - Configures admin page layout context.
-- `AdminPageLayoutProvider`
-  - Context provider for admin layout.
-- `useAdminPageLayout`
-  - Hook to read/update admin layout state.
-- `AdminPageLayoutShell`
-  - Shared admin page shell renderer.
-- `AdminBreadcrumbItem`, `AdminPageLayoutConfig` (types)
-  - Layout contract types.
-
-## Generic UI
-
-- `Pagination`
-  - Page navigation component.
-- `PaginationInfo`
-  - Current page range summary.
-- `PageSizeSelector`
-  - Page size control.
-- `RichTextPreview`
-  - Sanitized rich-text display helper.
-
-## Maps
-
-- `MapPicker`
-  - Dynamic import wrapper for client map rendering.
-- `MapPickerClient`
-  - Leaflet/react-leaflet map picker implementation.
-- `MapPickerOSM`
-  - OpenStreetMap picker variant.
-- `LatLng`, `MapPicker*Props` (types)
-  - Map contracts.
-
-## Runtime Notes
-
-1. Many components are client-side (`"use client"`).
-2. Map components depend on Leaflet assets and browser APIs.
-3. Table and paginator visuals depend on `@mantis-core/styles` classes.
-
-## Integration Rules
-
-1. Keep domain logic outside this package.
-2. Keep text/content generic when possible.
-3. If a component cannot be generic, keep it in app layer instead.
-4. Any new export must be added to:
-   - `src/index.ts`
-   - this file (`COMPONENTS.md`)
-   - package README if category-level behavior changes.
-
-## Suggested Validation For New Components
-
-```bash
-pnpm --filter @mantis-core/ui build
-pnpm --filter @mantis-core/ui typecheck
-pnpm lint
-```
-
-Also validate in at least one consuming app route.
+- [Button](./docs/components/button.md)
+- [TextInput](./docs/components/text-input.md)
+- [Select](./docs/components/select.md)
+- [PaginatedTable](./docs/components/paginated-table.md)
+- [ConfirmDialog](./docs/components/confirm-dialog.md)
+- [StatusBadge](./docs/components/status-badge.md)
+- [MapPicker](./docs/components/map-picker.md)

package/PRIMEREACT_MAPPING.md

@@ -0,0 +1,6 @@
+# @mantis-core/ui Dependency Map
+
+The detailed dependency mapping now lives in focused package docs.
+
+- [Underlying library map](./docs/contracts/dependency-map.md)
+- [Component index](./docs/README.md)

package/README.md

@@ -1,22 +1,22 @@
 # @mantis-core/ui
 
-Reusable React component library for Mantis Core apps.
+Reusable React component library for Mantis Core applications.
 
 ## Purpose
 
-`@mantis-core/ui` centralizes shared UI primitives so feature teams can build pages without duplicating component logic across projects.
+`@mantis-core/ui` centralizes reusable UI building blocks for forms, tables, admin page layout, generic state handling, and maps. The package is intended to be domain-agnostic and portable across multiple apps.
 
 ## Scope
 
-- Generic UI components for forms, tables, admin layout, maps, and pagination.
-- Components intended to be reused by multiple verticals/apps.
-- Components designed to work with `@mantis-core/styles` (`mantis-core-*` class contract).
+- Reusable React components and helper types.
+- Wrappers around PrimeReact, `react-select`, CKEditor, and Leaflet where Mantis needs a stable contract.
+- Components that optionally consume the visual contracts defined in `@mantis-core/styles`.
 
-## Out Of Scope
+## Out of Scope
 
-- Domain-specific workflows (real estate, restaurant, carpentry, etc).
-- Business rules and domain orchestration.
-- App-level provider setup (handled by `@mantis-core/next-core`).
+- Business rules and domain-specific workflows.
+- App-level providers and framework bootstrapping.
+- Client branding logic outside shared tokens and styles.
 
 ## Installation
 
@@ -24,97 +24,81 @@ Reusable React component library for Mantis Core apps.
 pnpm add @mantis-core/ui @mantis-core/styles
 ```
 
-Make sure peer dependencies exist in the app (`react`, `react-dom`, `next`, `primereact`, `primeicons`).
+Required peers:
 
-## Styling Requirement
+- `react`
+- `react-dom`
+- `next`
+- `primereact`
+- `primeicons`
+- `react-hook-form`
 
-Components rely on style contracts from `@mantis-core/styles`.
-Import the required SCSS modules in your app, for example:
+Some exports also require optional peers already pulled by this package surface, such as CKEditor, `react-select`, `react-datepicker`, `leaflet`, and `react-leaflet`.
 
-```scss
-@use "@mantis-core/styles/scss/table.scss";
-@use "@mantis-core/styles/scss/paginator.scss";
-@use "@mantis-core/styles/scss/inputs.scss";
-```
-
-## Public API Strategy
+## Import Strategy
 
-Preferred import style:
+Preferred:
 
 ```ts
-import { PaginatedTable, TableToolbar, FormFieldRender } from "@mantis-core/ui";
+import { PaginatedTable, TableToolbar, TextInput } from "@mantis-core/ui";
 ```
 
-Supported subpath imports:
+Supported subpaths:
 
 - `@mantis-core/ui/components/*`
 - `@mantis-core/ui/table-toolbar`
 - `@mantis-core/ui/table-filter-field`
 
-Use subpaths only when you need explicit boundaries.
-
-## Component Catalog
-
-See full catalog in [COMPONENTS.md](./COMPONENTS.md).
-
-Top-level categories:
-
-- Buttons: `Button`
-- Loaders: `Loading`
-- Forms: `CKEditorInput`, `TextInput`, `Select`, `Switch`, `UploadFilesPreview`, etc
-- Tables: `PaginatedTable`, `TableToolbar`, `TableFilterField`, `ActionColumn`, etc
-- Page/Admin layout: `AdminPageConfigurator`, `AdminPageLayoutProvider`, `AdminPageLayoutShell`
-- Generic UI: `Pagination`, `PaginationInfo`, `PageSizeSelector`, `RichTextPreview`
-- Maps: `MapPicker`, `MapPickerClient`, `MapPickerOSM`
-
-## Core Usage Patterns
+Use subpaths only when you need a narrow import boundary.
 
-### 1) Forms
+## Styling Model
 
-- Compose fields with `FormFieldRender` + specific input components.
-- Keep validation/business rules in the app layer.
+This package does not inject CSS automatically.
 
-### 2) Data Tables
+- PrimeReact wrappers inherit your PrimeReact theme plus any Mantis SCSS overrides you import.
+- Components with `mantis-core-*` classes require the matching partial from `@mantis-core/styles`.
+- Some components use utility classes or inline styles and do not depend on a Mantis SCSS partial.
 
-Recommended stack:
+Example:
 
-1. `TableToolbar`
-2. `TableFilterField` / `FilterPannel`
-3. `PaginatedTable`
-4. `Pagination` helpers when needed
+```scss
+@use "@mantis-core/styles/scss/buttons.scss";
+@use "@mantis-core/styles/scss/inputs.scss";
+@use "@mantis-core/styles/scss/select.scss";
+@use "@mantis-core/styles/scss/table.scss";
+@use "@mantis-core/styles/scss/confirm-dialog.scss";
+```
 
-### 3) Admin Page Layout
+## Documentation Index
 
-Use the layout contract together:
+- [docs/README.md](./docs/README.md): package documentation index
+- [COMPONENTS.md](./COMPONENTS.md): lightweight component index
+- [PRIMEREACT_MAPPING.md](./PRIMEREACT_MAPPING.md): lightweight dependency-map pointer
 
-- `AdminPageLayoutProvider`
-- `AdminPageLayoutShell`
-- `AdminPageConfigurator`
+## Public API Summary
 
-### 4) Maps
+Main export groups:
 
-- `MapPicker` is dynamic/SSR-safe wrapper.
-- `MapPickerClient` and `MapPickerOSM` run on client.
+- Buttons: `Button`
+- Loaders: `Loading`
+- Forms: `TextInput`, `TextArea`, `NumberInput`, `DropDown`, `DateInput`, `Select`, `AsyncSelect`, `Switch`, `Toggle`, `ToggleInlineButton`, `CKEditorInput`, `FileDropzone`, `UploadFilesPreview`
+- Form helpers: `RenderField`, `FormFieldRender`, `FormActionsBar`, `DirtyFormGuard`, `useDirtyFormGuard`, `ErrorMessage`, `HiddenField`
+- Tables: `PaginatedTable`, `TableToolbar`, `TableFilterField`, `ActionColumn`, `MenuButton`, `IndexColumn`, `FilterPannel`, `MultiSelectFilter`
+- Page layout: `AdminPageConfigurator`, `AdminPageLayoutProvider`, `useAdminPageLayout`, `AdminPageLayoutShell`, `AdminPageHeader`, `FormSection`, `PageTitle`
+- Generic UI: `Pagination`, `PaginationInfo`, `PageSizeSelector`, `RichTextPreview`, `StatusBadge`, `DataState`, `ConfirmDialog`
+- Maps: `MapPicker`, `MapPickerClient`, `MapPickerOSM`
 
-## Architecture Rules For Contributors
+## Contributor Rules
 
-1. New components must be domain-agnostic.
-2. Avoid direct business terms in props, labels, or naming.
-3. Keep runtime boundaries explicit (`"use client"` only when required).
-4. Export through `src/index.ts` and document in `COMPONENTS.md`.
-5. Preserve `mantis-core-*` visual contract for shared styles.
+1. Keep new exports domain-agnostic.
+2. Keep the public API anchored in `src/index.ts`.
+3. Document new exports in `COMPONENTS.md`.
+4. Update `PRIMEREACT_MAPPING.md` when the underlying implementation library changes.
+5. Preserve the `mantis-core-*` style contract where shared styles are intended.
 
-## Build
+## Local Validation
 
 ```bash
 pnpm --filter @mantis-core/ui build
 pnpm --filter @mantis-core/ui typecheck
 ```
-
-## Release Checklist
-
-1. Component behavior verified in consuming app.
-2. Props/types documented.
-3. `src/index.ts` export updated.
-4. `COMPONENTS.md` updated.
-5. Add changeset.

package/dist/components/Forms/AsyncSelect.d.ts

@@ -0,0 +1,20 @@
+import { ButtonVariant } from "../Buttons/Button";
+import React from "react";
+import type { Props as ReactSelectProps } from "react-select";
+import { ControllerProps } from "./types";
+type SelectOption = unknown;
+export interface AsyncSelectProps extends Omit<ReactSelectProps<SelectOption>, "name" | "defaultValue" | "options"> {
+    controller: ControllerProps;
+    block?: boolean;
+    variant?: ButtonVariant;
+    isCreatable?: boolean;
+    loadOptions: (inputValue: string) => Promise<readonly SelectOption[]> | readonly SelectOption[];
+    defaultOptions?: readonly SelectOption[] | boolean;
+    cacheOptions?: boolean;
+    debounceMs?: number;
+    onCreateOption?: (inputValue: string) => void | Promise<void>;
+    formatCreateLabel?: (inputValue: string) => React.ReactNode;
+}
+declare const AsyncSelect: React.FC<AsyncSelectProps>;
+export default AsyncSelect;
+//# sourceMappingURL=AsyncSelect.d.ts.map

package/dist/components/Forms/AsyncSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AsyncSelect.d.ts","sourceRoot":"","sources":["../../../src/components/Forms/AsyncSelect.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,OAAO,KAAyC,MAAM,OAAO,CAAC;AAI9D,OAAO,KAAK,EAAE,KAAK,IAAI,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE1C,KAAK,YAAY,GAAG,OAAO,CAAC;AAE5B,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,gBAAgB,CAAC,YAAY,CAAC,EAAE,MAAM,GAAG,cAAc,GAAG,SAAS,CAAC;IACjF,UAAU,EAAE,eAAe,CAAC;IAC5B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,OAAO,CAAC,SAAS,YAAY,EAAE,CAAC,GAAG,SAAS,YAAY,EAAE,CAAC;IAChG,cAAc,CAAC,EAAE,SAAS,YAAY,EAAE,GAAG,OAAO,CAAC;IACnD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9D,iBAAiB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;CAC7D;AAcD,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAkH3C,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/Forms/AsyncSelect.js

@@ -0,0 +1,77 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+import { useCallback, useEffect, useRef } from "react";
+import { Controller } from "react-hook-form";
+import { default as RAsyncSelect } from "react-select/async";
+import { default as RAsyncCreatableSelect } from "react-select/async-creatable";
+const SELECT_VARIANT_TOKENS = {
+    primary: { color: "--primary", foreground: "--primary-foreground" },
+    secondary: { color: "--secondary", foreground: "--secondary-foreground" },
+    accent: { color: "--accent", foreground: "--accent-foreground" },
+    success: { color: "--success", foreground: "--success-foreground" },
+    warning: { color: "--warning", foreground: "--warning-foreground" },
+    error: { color: "--error", foreground: "--error-foreground" },
+    info: { color: "--info", foreground: "--info-foreground" },
+    gray: { color: "--bluegray-500", foreground: "--primary-foreground" },
+    danger: { color: "--error", foreground: "--error-foreground" },
+};
+const AsyncSelect = (props) => {
+    const { controller, block, variant = "primary", isCreatable = false, loadOptions, defaultOptions = true, cacheOptions = true, debounceMs = 250, onCreateOption, formatCreateLabel, ...rest } = props;
+    const debounceRef = useRef(null);
+    const variantTokens = SELECT_VARIANT_TOKENS[variant];
+    const SelectComponent = (isCreatable ? RAsyncCreatableSelect : RAsyncSelect);
+    useEffect(() => {
+        return () => {
+            if (debounceRef.current) {
+                clearTimeout(debounceRef.current);
+            }
+        };
+    }, []);
+    const debouncedLoadOptions = useCallback((inputValue) => new Promise((resolve, reject) => {
+        const executeLoad = async () => {
+            try {
+                const options = await loadOptions(inputValue);
+                resolve(options ?? []);
+            }
+            catch (error) {
+                reject(error);
+            }
+        };
+        if (debounceRef.current) {
+            clearTimeout(debounceRef.current);
+        }
+        if (debounceMs <= 0) {
+            void executeLoad();
+            return;
+        }
+        debounceRef.current = setTimeout(() => {
+            void executeLoad();
+        }, debounceMs);
+    }), [debounceMs, loadOptions]);
+    return (_jsx(Controller, { defaultValue: controller.defaultValue ?? null, ...controller, render: ({ field, fieldState, formState }) => (_jsx(SelectComponent, { instanceId: field.name, id: field.name, className: classNames("select-input cursor-pointer", `select-variant-${variant}`, rest.className, {
+                "w-full": block,
+                "select-invalid": fieldState.invalid,
+            }), classNamePrefix: 'react-select', value: field.value, onChange: field.onChange, onBlur: field.onBlur, name: field.name, placeholder: 'SELECCIONAR', noOptionsMessage: () => "Sin resultados", loadingMessage: () => "Cargando...", ref: field.ref, cacheOptions: cacheOptions, defaultOptions: defaultOptions, loadOptions: debouncedLoadOptions, menuPortalTarget: typeof document !== "undefined" ? document.body : undefined, menuPosition: 'fixed', ...rest, ...(isCreatable
+                ? {
+                    onCreateOption: (inputValue) => {
+                        void onCreateOption?.(inputValue);
+                    },
+                    formatCreateLabel: formatCreateLabel ?? ((inputValue) => `Crear "${inputValue}"`),
+                }
+                : {}), isDisabled: formState.isSubmitting || rest.isDisabled || rest.isLoading, styles: {
+                menuPortal: (base) => ({
+                    ...base,
+                    zIndex: 1300,
+                    ["--select-accent"]: `var(${variantTokens.color})`,
+                    ["--select-accent-foreground"]: `var(${variantTokens.foreground})`,
+                }),
+                menu: (base) => ({
+                    ...base,
+                    zIndex: 1300,
+                }),
+                ...(rest.styles || {}),
+            } })) }));
+};
+export default AsyncSelect;
+//# sourceMappingURL=AsyncSelect.js.map

package/dist/components/Forms/AsyncSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AsyncSelect.js","sourceRoot":"","sources":["../../../src/components/Forms/AsyncSelect.tsx"],"names":[],"mappings":"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"}

package/dist/components/Forms/DirtyFormGuard.d.ts

@@ -0,0 +1,5 @@
+import { type UseDirtyFormGuardOptions } from "./useDirtyFormGuard";
+export type DirtyFormGuardProps = UseDirtyFormGuardOptions;
+declare const DirtyFormGuard: ({ isDirty, enabled, message }: DirtyFormGuardProps) => null;
+export default DirtyFormGuard;
+//# sourceMappingURL=DirtyFormGuard.d.ts.map

package/dist/components/Forms/DirtyFormGuard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DirtyFormGuard.d.ts","sourceRoot":"","sources":["../../../src/components/Forms/DirtyFormGuard.tsx"],"names":[],"mappings":"AAEA,OAA0B,EAAE,KAAK,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAEvF,MAAM,MAAM,mBAAmB,GAAG,wBAAwB,CAAC;AAE3D,QAAA,MAAM,cAAc,GAAI,+BAAsC,mBAAmB,SAGhF,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/Forms/DirtyFormGuard.js

@@ -0,0 +1,8 @@
+"use client";
+import useDirtyFormGuard from "./useDirtyFormGuard";
+const DirtyFormGuard = ({ isDirty, enabled = true, message }) => {
+    useDirtyFormGuard({ isDirty, enabled, message });
+    return null;
+};
+export default DirtyFormGuard;
+//# sourceMappingURL=DirtyFormGuard.js.map

package/dist/components/Forms/DirtyFormGuard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DirtyFormGuard.js","sourceRoot":"","sources":["../../../src/components/Forms/DirtyFormGuard.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,iBAAoD,MAAM,qBAAqB,CAAC;AAIvF,MAAM,cAAc,GAAG,CAAC,EAAE,OAAO,EAAE,OAAO,GAAG,IAAI,EAAE,OAAO,EAAuB,EAAE,EAAE;IACnF,iBAAiB,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,CAAC;IACjD,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/Forms/FileDropzone.d.ts

@@ -0,0 +1,29 @@
+import type { ControllerProps } from "./types";
+type FileDropzoneRejectCode = "too-many-files" | "file-too-large" | "invalid-file-type";
+export interface FileDropzoneRejectedFile {
+    file: File;
+    code: FileDropzoneRejectCode;
+    message: string;
+}
+export interface FileDropzoneProps {
+    controller?: ControllerProps;
+    value?: File[];
+    onChange?: (files: File[]) => void;
+    onFilesAccepted?: (files: File[]) => void;
+    onFilesRejected?: (rejections: FileDropzoneRejectedFile[]) => void;
+    multiple?: boolean;
+    maxFiles?: number;
+    maxSizeBytes?: number;
+    accept?: string | string[];
+    disabled?: boolean;
+    block?: boolean;
+    label?: string;
+    hint?: string;
+    dropTitle?: string;
+    dragOverTitle?: string;
+    className?: string;
+}
+declare const FileDropzone: ({ controller, value, onChange, ...rest }: FileDropzoneProps) => import("react/jsx-runtime").JSX.Element;
+export default FileDropzone;
+export type { FileDropzoneRejectCode };
+//# sourceMappingURL=FileDropzone.d.ts.map

package/dist/components/Forms/FileDropzone.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileDropzone.d.ts","sourceRoot":"","sources":["../../../src/components/Forms/FileDropzone.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE/C,KAAK,sBAAsB,GAAG,gBAAgB,GAAG,gBAAgB,GAAG,mBAAmB,CAAC;AAExF,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,IAAI,CAAC;IACX,IAAI,EAAE,sBAAsB,CAAC;IAC7B,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,iBAAiB;IAChC,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IACnC,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IAC1C,eAAe,CAAC,EAAE,CAAC,UAAU,EAAE,wBAAwB,EAAE,KAAK,IAAI,CAAC;IACnE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA+ND,QAAA,MAAM,YAAY,GAAI,0CAKnB,iBAAiB,4CAsBnB,CAAC;AAEF,eAAe,YAAY,CAAC;AAE5B,YAAY,EAAE,sBAAsB,EAAE,CAAC"}

package/dist/components/Forms/FileDropzone.js

@@ -0,0 +1,137 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "@mantis-core/utils";
+import { AlertCircle, File as FileIcon, UploadCloud, X } from "lucide-react";
+import { useMemo, useRef, useState } from "react";
+import { Controller } from "react-hook-form";
+const DEFAULT_DROP_TITLE = "Arrastra y suelta archivos aqui";
+const DEFAULT_DRAG_OVER_TITLE = "Suelta los archivos aqui";
+const DEFAULT_HINT = "o haz clic para seleccionar archivos";
+const toArray = (accept) => {
+    if (!accept)
+        return [];
+    if (Array.isArray(accept))
+        return accept.map((item) => item.trim()).filter(Boolean);
+    return accept
+        .split(",")
+        .map((item) => item.trim())
+        .filter(Boolean);
+};
+const isAcceptedType = (file, acceptList) => {
+    if (acceptList.length === 0)
+        return true;
+    const fileName = file.name.toLowerCase();
+    const fileType = file.type.toLowerCase();
+    return acceptList.some((rule) => {
+        const normalizedRule = rule.toLowerCase();
+        if (normalizedRule.startsWith(".")) {
+            return fileName.endsWith(normalizedRule);
+        }
+        if (normalizedRule.endsWith("/*")) {
+            const prefix = normalizedRule.slice(0, normalizedRule.length - 1);
+            return fileType.startsWith(prefix);
+        }
+        return fileType === normalizedRule;
+    });
+};
+const formatBytes = (bytes) => {
+    if (bytes < 1024)
+        return `${bytes} B`;
+    if (bytes < 1024 ** 2)
+        return `${(bytes / 1024).toFixed(1)} KB`;
+    return `${(bytes / 1024 ** 2).toFixed(1)} MB`;
+};
+const FileDropzoneInner = ({ value, onChange, onFilesAccepted, onFilesRejected, multiple = true, maxFiles = 10, maxSizeBytes = 10 * 1024 * 1024, accept, disabled = false, block = true, label, hint = DEFAULT_HINT, dropTitle = DEFAULT_DROP_TITLE, dragOverTitle = DEFAULT_DRAG_OVER_TITLE, className, }) => {
+    const [isDraggingOver, setIsDraggingOver] = useState(false);
+    const [lastRejections, setLastRejections] = useState([]);
+    const inputRef = useRef(null);
+    const acceptList = useMemo(() => toArray(accept), [accept]);
+    const appendFiles = (incomingFiles) => {
+        if (!incomingFiles || incomingFiles.length === 0 || disabled)
+            return;
+        const current = value ?? [];
+        const accepted = [];
+        const rejected = [];
+        for (const file of Array.from(incomingFiles)) {
+            if (!isAcceptedType(file, acceptList)) {
+                rejected.push({
+                    file,
+                    code: "invalid-file-type",
+                    message: `El archivo ${file.name} no cumple el tipo permitido.`,
+                });
+                continue;
+            }
+            if (file.size > maxSizeBytes) {
+                rejected.push({
+                    file,
+                    code: "file-too-large",
+                    message: `El archivo ${file.name} supera el maximo permitido (${formatBytes(maxSizeBytes)}).`,
+                });
+                continue;
+            }
+            if (!multiple && current.length + accepted.length >= 1) {
+                rejected.push({
+                    file,
+                    code: "too-many-files",
+                    message: "Solo se permite un archivo.",
+                });
+                continue;
+            }
+            if (current.length + accepted.length >= maxFiles) {
+                rejected.push({
+                    file,
+                    code: "too-many-files",
+                    message: `Solo se permiten ${maxFiles} archivos.`,
+                });
+                continue;
+            }
+            accepted.push(file);
+        }
+        if (accepted.length > 0) {
+            const mergedFiles = [...current, ...accepted];
+            onChange(mergedFiles);
+            onFilesAccepted?.(accepted);
+        }
+        if (rejected.length > 0) {
+            setLastRejections(rejected);
+            onFilesRejected?.(rejected);
+        }
+        else {
+            setLastRejections([]);
+        }
+    };
+    return (_jsxs("div", { className: cn("mantis-core-file-dropzone", className, { "w-full": block }), children: [label ? _jsx("p", { className: 'mantis-core-file-dropzone__label', children: label }) : null, _jsxs("div", { role: 'button', tabIndex: disabled ? -1 : 0, className: cn("mantis-core-file-dropzone__zone", {
+                    "mantis-core-file-dropzone__zone--drag": isDraggingOver && !disabled,
+                    "mantis-core-file-dropzone__zone--disabled": disabled,
+                }), onClick: () => !disabled && inputRef.current?.click(), onKeyDown: (event) => {
+                    if ((event.key === "Enter" || event.key === " ") && !disabled) {
+                        event.preventDefault();
+                        inputRef.current?.click();
+                    }
+                }, onDragOver: (event) => {
+                    event.preventDefault();
+                    if (!disabled)
+                        setIsDraggingOver(true);
+                }, onDragLeave: () => setIsDraggingOver(false), onDrop: (event) => {
+                    event.preventDefault();
+                    setIsDraggingOver(false);
+                    appendFiles(event.dataTransfer.files);
+                }, children: [_jsx("input", { ref: inputRef, type: 'file', className: 'hidden', disabled: disabled, multiple: multiple, accept: acceptList.join(","), onChange: (event) => {
+                            appendFiles(event.target.files);
+                            event.target.value = "";
+                        } }), _jsx("div", { className: 'mantis-core-file-dropzone__icon', children: _jsx(UploadCloud, { size: 22 }) }), _jsx("p", { className: 'mantis-core-file-dropzone__title', children: isDraggingOver && !disabled ? dragOverTitle : dropTitle }), _jsx("p", { className: 'mantis-core-file-dropzone__hint', children: hint })] }), value.length > 0 ? (_jsx("ul", { className: 'mantis-core-file-dropzone__list', children: value.map((file, index) => (_jsxs("li", { className: 'mantis-core-file-dropzone__item', children: [_jsxs("span", { className: 'mantis-core-file-dropzone__item-copy', children: [_jsx(FileIcon, { size: 14 }), _jsx("span", { className: 'mantis-core-file-dropzone__item-name', children: file.name }), _jsx("span", { className: 'mantis-core-file-dropzone__item-size', children: formatBytes(file.size) })] }), _jsx("button", { type: 'button', className: 'mantis-core-file-dropzone__remove', onClick: () => {
+                                const nextFiles = value.filter((_, itemIndex) => itemIndex !== index);
+                                onChange(nextFiles);
+                            }, title: 'Quitar archivo', disabled: disabled, children: _jsx(X, { size: 14 }) })] }, `${file.name}-${file.lastModified}-${index}`))) })) : null, lastRejections.length > 0 ? (_jsx("ul", { className: 'mantis-core-file-dropzone__error-list', children: lastRejections.map((rejection, index) => (_jsxs("li", { className: 'mantis-core-file-dropzone__error-item', children: [_jsx(AlertCircle, { size: 12 }), _jsx("span", { children: rejection.message })] }, `${rejection.file.name}-${rejection.code}-${index}`))) })) : null] }));
+};
+const FileDropzone = ({ controller, value, onChange, ...rest }) => {
+    if (controller) {
+        return (_jsx(Controller, { defaultValue: controller.defaultValue ?? [], ...controller, render: ({ field, formState }) => (_jsx(FileDropzoneInner, { ...rest, value: Array.isArray(field.value) ? field.value : [], onChange: (files) => {
+                    field.onChange(files);
+                    onChange?.(files);
+                }, disabled: formState.isSubmitting || rest.disabled })) }));
+    }
+    return _jsx(FileDropzoneInner, { ...rest, value: value ?? [], onChange: onChange ?? (() => undefined) });
+};
+export default FileDropzone;
+//# sourceMappingURL=FileDropzone.js.map