@mage-ui/components 0.0.99 → 1.0.4

package/dist/components/controls/date-picker/DatePicker.d.mts

@@ -0,0 +1,95 @@
+import { ComponentProps, ReactNode } from "react";
+import { DateValue } from "@mantine/dates";
+
+//#region src/components/controls/date-picker/DatePicker.d.ts
+type DatePickerProps = Omit<ComponentProps<'input'>, 'size' | 'value' | 'onChange'> & {
+  label?: ReactNode;
+  description?: ReactNode;
+  error?: ReactNode;
+  classNames?: DatePickerClassNames;
+  value?: DateValue;
+  onChange?: (date: Date | string | null) => void;
+  locale?: string;
+  valueFormat?: string;
+  firstDayOfWeek?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+  minDate?: Date;
+  maxDate?: Date;
+  clearable?: boolean;
+};
+declare const DatePicker: ({
+  classNames,
+  name,
+  label,
+  placeholder,
+  description,
+  error,
+  required,
+  value,
+  onChange,
+  locale,
+  valueFormat,
+  firstDayOfWeek,
+  minDate,
+  maxDate,
+  clearable
+}: DatePickerProps) => ReactNode;
+type DatePickerClassNames = InputClassNamesType & CalendarClassNamesType & CalendarHeaderClassNamesType & CalendarDayClassNamesType & CalendarWeekClassNamesType & CalendarMonthClassNamesType & CalendarMonthsListClassNamesType & CalendarYearsListClassNamesType & PopoverClassNamesType;
+type InputClassNamesType = {
+  datePicker?: string;
+  root?: string;
+  wrapper?: string;
+  input?: string;
+  label?: string;
+  error?: string;
+  description?: string;
+  placeholder?: string;
+  section?: string;
+  required?: string;
+  datePickerRoot?: string;
+};
+type CalendarHeaderClassNamesType = {
+  calendarHeaderControl?: string;
+  calendarHeader?: string;
+  calendarHeaderLevel?: string;
+  calendarHeaderControlIcon?: string;
+};
+type CalendarClassNamesType = {
+  levelsGroup?: string;
+  presetsList?: string;
+  presetButton?: string;
+};
+type CalendarDayClassNamesType = {
+  day?: string;
+};
+type CalendarWeekClassNamesType = {
+  weekDaysRow?: string;
+  weekDay?: string;
+  weekNumber?: string;
+};
+type CalendarMonthClassNamesType = {
+  month?: string;
+  monthRow?: string;
+  monthCell?: string;
+  monthThead?: string;
+  monthTbody?: string;
+};
+type CalendarMonthsListClassNamesType = {
+  monthsList?: string;
+  monthsListRow?: string;
+  monthsListCell?: string;
+  monthsListControl?: string;
+};
+type CalendarYearsListClassNamesType = {
+  yearsList?: string;
+  yearsListRow?: string;
+  yearsListCell?: string;
+  yearsListControl?: string;
+};
+type PopoverClassNamesType = {
+  dropdown?: string;
+  arrow?: string;
+  overlay?: string;
+};
+//#endregion
+export { DatePicker, DatePickerProps };
+//# sourceMappingURL=DatePicker.d.mts.map

package/dist/components/controls/date-picker/DatePicker.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.d.mts","names":[],"sources":["../../../../src/components/controls/date-picker/DatePicker.tsx"],"mappings":";;;;KAoDY,eAAA,GAAkB,IAAA,CAAK,cAAA;EACjC,KAAA,GAAQ,SAAA;EACR,WAAA,GAAc,SAAA;EACd,KAAA,GAAQ,SAAA;EACR,UAAA,GAAa,oBAAA;EACb,KAAA,GAAQ,SAAA;EACR,QAAA,IAAY,IAAA,EAAM,IAAA;EAClB,MAAA;EACA,WAAA;EACA,cAAA;EACA,OAAA,GAAU,IAAA;EACV,OAAA,GAAU,IAAA;EACV,SAAA;AAAA;AAAA,cAGW,UAAA;EAAc,UAAA;EAAA,IAAA;EAAA,KAAA;EAAA,WAAA;EAAA,WAAA;EAAA,KAAA;EAAA,QAAA;EAAA,KAAA;EAAA,QAAA;EAAA,MAAA;EAAA,WAAA;EAAA,cAAA;EAAA,OAAA;EAAA,OAAA;EAAA;AAAA,GAgBxB,eAAA,KAAkB,SAAA;AAAA,KAmChB,oBAAA,GACH,mBAAA,GACA,sBAAA,GACA,4BAAA,GACA,yBAAA,GACA,0BAAA,GACA,2BAAA,GACA,gCAAA,GACA,+BAAA,GACA,qBAAA;AAAA,KAEG,mBAAA;EACH,UAAA;EACA,IAAA;EACA,OAAA;EACA,KAAA;EACA,KAAA;EACA,KAAA;EACA,WAAA;EACA,WAAA;EACA,OAAA;EACA,QAAA;EACA,cAAA;AAAA;AAAA,KA+CG,4BAAA;EACH,qBAAA;EACA,cAAA;EACA,mBAAA;EACA,yBAAA;AAAA;AAAA,KAmBG,sBAAA;EACH,WAAA;EACA,WAAA;EACA,YAAA;AAAA;AAAA,KAWG,yBAAA;EACH,GAAA;AAAA;AAAA,KASG,0BAAA;EACH,WAAA;EACA,OAAA;EACA,UAAA;AAAA;AAAA,KAWG,2BAAA;EACH,KAAA;EACA,QAAA;EACA,SAAA;EACA,UAAA;EACA,UAAA;AAAA;AAAA,KAaG,gCAAA;EACH,UAAA;EACA,aAAA;EACA,cAAA;EACA,iBAAA;AAAA;AAAA,KAeG,+BAAA;EACH,SAAA;EACA,YAAA;EACA,aAAA;EACA,gBAAA;AAAA;AAAA,KAeG,qBAAA;EACH,QAAA;EACA,KAAA;EACA,OAAA;AAAA"}

package/dist/components/controls/date-picker/DatePicker.mjs

@@ -0,0 +1,2 @@
+import{Icon as e}from"../../data-display/icons/icon/Icon.mjs";import{cx as t}from"@mage-ui/styled-system/css";import{datePicker as n,datePickerArrow as r,datePickerButtonIcon as i,datePickerButtonIconRoot as a,datePickerCalendarHeader as o,datePickerCalendarHeaderControl as s,datePickerCalendarHeaderControlIcon as c,datePickerCalendarHeaderLevel as l,datePickerDatePickerRoot as u,datePickerDay as d,datePickerDescription as f,datePickerDropdown as p,datePickerError as m,datePickerIconIcon as h,datePickerIconIconRaw as g,datePickerIconIconRawRoot as _,datePickerIconRoot as v,datePickerInput as y,datePickerLabel as b,datePickerLevelsGroup as x,datePickerMonth as S,datePickerMonthCell as C,datePickerMonthRow as w,datePickerMonthTbody as T,datePickerMonthThead as E,datePickerMonthsList as D,datePickerMonthsListCell as O,datePickerMonthsListControl as k,datePickerMonthsListRow as A,datePickerOverlay as j,datePickerPlaceholder as M,datePickerPresetButton as N,datePickerPresetsList as P,datePickerRequired as F,datePickerRoot as I,datePickerSection as L,datePickerWeekNumber as ee,datePickerWeekday as R,datePickerWeekdaysRow as z,datePickerWrapper as B,datePickerYearsList as V,datePickerYearsListCell as H,datePickerYearsListControl as U,datePickerYearsListRow as W}from"@mage-ui/styled-system/recipes";import{jsx as G}from"react/jsx-runtime";import{DatePickerInput as K}from"@mantine/dates";const q=({classNames:t,name:n,label:r,placeholder:i,description:a,error:o,required:s,value:c,onChange:l,locale:u,valueFormat:d,firstDayOfWeek:f,minDate:p,maxDate:m,clearable:h})=>G(K,{name:n,label:r,placeholder:i,description:a,error:o,withAsterisk:s,value:c,onChange:l,locale:u,valueFormat:d,firstDayOfWeek:f,minDate:p,maxDate:m,clearable:h,classNames:oe(t),popoverProps:{classNames:ae(t)},leftSection:G(e,{path:`/icons/sprite-mage.svg`,name:`mage-date-picker-calendar`,classNames:Y(t)}),clearButtonProps:{className:X()}}),J=e=>({root:t(e?.datePicker??n(),e?.root??I()),wrapper:e?.wrapper??B(),input:t(e?.input??y(),`peer`),label:e?.label??b(),error:e?.error??m(),description:e?.description??f(),placeholder:e?.placeholder??M(),section:t(e?.section??L(),`group`),required:e?.required??F(),datePickerRoot:e?.datePickerRoot??u()}),Y=e=>({icon:e?.icon??h(),root:e?.root??v(),iconRaw:{iconRaw:e?.iconRaw?.iconRaw??g(),root:e?.iconRaw?.root??_()}}),X=e=>t(e?.buttonIcon??i(),e?.buttonIconRoot??a()),Z=e=>({calendarHeader:e?.calendarHeader??o(),calendarHeaderControl:e?.calendarHeaderControl??s(),calendarHeaderLevel:e?.calendarHeaderLevel??l(),calendarHeaderControlIcon:e?.calendarHeaderControlIcon??c()}),Q=e=>({levelsGroup:e?.levelsGroup??x(),presetsList:e?.presetsList??P(),presetButton:e?.presetButton??N()}),$=e=>({day:e?.day??d()}),te=e=>({weekdaysRow:e?.weekDaysRow??z(),weekday:e?.weekDay??R(),weekNumber:e?.weekNumber??ee()}),ne=e=>({month:e?.month??S(),monthRow:e?.monthRow??w(),monthThead:e?.monthThead??E(),monthTbody:e?.monthTbody??T(),monthCell:e?.monthCell??C()}),re=e=>({monthsList:e?.monthsList??D(),monthsListRow:e?.monthsListRow??A(),monthsListCell:e?.monthsListCell??O(),monthsListControl:e?.monthsListControl??k()}),ie=e=>({yearsList:e?.yearsList??V(),yearsListRow:e?.yearsListRow??W(),yearsListCell:e?.yearsListCell??H(),yearsListControl:e?.yearsListControl??U()}),ae=e=>({dropdown:e?.dropdown??p(),arrow:e?.arrow??r(),overlay:e?.overlay??j()}),oe=e=>({...J(e),...Q(e),...Z(e),...$(e),...te(e),...ne(e),...re(e),...ie(e)});export{q as DatePicker};
+//# sourceMappingURL=DatePicker.mjs.map

package/dist/components/controls/date-picker/DatePicker.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.mjs","names":[],"sources":["../../../../src/components/controls/date-picker/DatePicker.tsx"],"sourcesContent":["import type { ComponentProps, ReactNode } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n  datePicker,\n  datePickerArrow,\n  datePickerButtonIcon,\n  datePickerButtonIconRoot,\n  datePickerCalendarHeader,\n  datePickerCalendarHeaderControl,\n  datePickerCalendarHeaderControlIcon,\n  datePickerCalendarHeaderLevel,\n  datePickerDatePickerRoot,\n  datePickerDay,\n  datePickerDescription,\n  datePickerDropdown,\n  datePickerError,\n  datePickerIconIcon,\n  datePickerIconIconRaw,\n  datePickerIconIconRawRoot,\n  datePickerIconRoot,\n  datePickerInput,\n  datePickerLabel,\n  datePickerLevelsGroup,\n  datePickerMonth,\n  datePickerMonthCell,\n  datePickerMonthRow,\n  datePickerMonthsList,\n  datePickerMonthsListCell,\n  datePickerMonthsListControl,\n  datePickerMonthsListRow,\n  datePickerMonthTbody,\n  datePickerMonthThead,\n  datePickerOverlay,\n  datePickerPlaceholder,\n  datePickerPresetButton,\n  datePickerPresetsList,\n  datePickerRequired,\n  datePickerRoot,\n  datePickerSection,\n  datePickerWeekday,\n  datePickerWeekdaysRow,\n  datePickerWeekNumber,\n  datePickerWrapper,\n  datePickerYearsList,\n  datePickerYearsListCell,\n  datePickerYearsListControl,\n  datePickerYearsListRow,\n} from '@mage-ui/styled-system/recipes';\nimport { DatePickerInput, type DateValue } from '@mantine/dates';\nimport { Icon, type IconProps } from '@/components/data-display';\n\nexport type DatePickerProps = Omit<ComponentProps<'input'>, 'size' | 'value' | 'onChange'> & {\n  label?: ReactNode;\n  description?: ReactNode;\n  error?: ReactNode;\n  classNames?: DatePickerClassNames;\n  value?: DateValue;\n  onChange?: (date: Date | string | null) => void;\n  locale?: string;\n  valueFormat?: string;\n  firstDayOfWeek?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n  minDate?: Date;\n  maxDate?: Date;\n  clearable?: boolean;\n};\n\nexport const DatePicker = ({\n  classNames,\n  name,\n  label,\n  placeholder,\n  description,\n  error,\n  required,\n  value,\n  onChange,\n  locale,\n  valueFormat,\n  firstDayOfWeek,\n  minDate,\n  maxDate,\n  clearable,\n}: DatePickerProps): ReactNode => {\n  return (\n    <DatePickerInput\n      name={name}\n      label={label}\n      placeholder={placeholder}\n      description={description}\n      error={error}\n      withAsterisk={required}\n      value={value}\n      onChange={onChange}\n      locale={locale}\n      valueFormat={valueFormat}\n      firstDayOfWeek={firstDayOfWeek}\n      minDate={minDate}\n      maxDate={maxDate}\n      clearable={clearable}\n      classNames={datePickerClassNames(classNames)}\n      popoverProps={{\n        classNames: popoverClassNames(classNames),\n      }}\n      leftSection={\n        <Icon\n          path='/icons/sprite-mage.svg'\n          name='mage-date-picker-calendar'\n          classNames={iconClassNames(classNames)}\n        />\n      }\n      clearButtonProps={{\n        className: buttonIconClassNames(),\n      }}\n    />\n  );\n};\n\ntype DatePickerClassNames =\n  InputClassNamesType &\n  CalendarClassNamesType &\n  CalendarHeaderClassNamesType &\n  CalendarDayClassNamesType &\n  CalendarWeekClassNamesType &\n  CalendarMonthClassNamesType &\n  CalendarMonthsListClassNamesType &\n  CalendarYearsListClassNamesType &\n  PopoverClassNamesType;\n\ntype InputClassNamesType = {\n  datePicker?: string;\n  root?: string;\n  wrapper?: string;\n  input?: string;\n  label?: string;\n  error?: string;\n  description?: string;\n  placeholder?: string;\n  section?: string;\n  required?: string;\n  datePickerRoot?: string;\n};\n\nconst inputClassNames = (classNames?: InputClassNamesType) => {\n  return {\n    root: cx(\n      classNames?.datePicker ?? datePicker(),\n      classNames?.root ?? datePickerRoot(),\n    ),\n    wrapper: classNames?.wrapper ?? datePickerWrapper(),\n    input: cx(classNames?.input ?? datePickerInput(), 'peer'),\n    label: classNames?.label ?? datePickerLabel(),\n    error: classNames?.error ?? datePickerError(),\n    description: classNames?.description ?? datePickerDescription(),\n    placeholder: classNames?.placeholder ?? datePickerPlaceholder(),\n    section: cx(classNames?.section ?? datePickerSection(), 'group'),\n    required: classNames?.required ?? datePickerRequired(),\n    datePickerRoot: classNames?.datePickerRoot ?? datePickerDatePickerRoot(),\n  };\n};\n\ntype IconClassNamesType = IconProps['classNames'];\n\nconst iconClassNames = (classNames?: IconClassNamesType) => {\n  return {\n    icon: classNames?.icon ?? datePickerIconIcon(),\n    root: classNames?.root ?? datePickerIconRoot(),\n    iconRaw: {\n      iconRaw: classNames?.iconRaw?.iconRaw ?? datePickerIconIconRaw(),\n      root: classNames?.iconRaw?.root ?? datePickerIconIconRawRoot(),\n    },\n  };\n}\n\ntype ButtonIconClassNamesType = {\n  buttonIcon?: string;\n  buttonIconRoot?: string;\n}\n\nconst buttonIconClassNames = (classNames?: ButtonIconClassNamesType) => {\n  return cx(\n    classNames?.buttonIcon ?? datePickerButtonIcon(), \n    classNames?.buttonIconRoot ?? datePickerButtonIconRoot(),\n  );\n}\n\n\ntype CalendarHeaderClassNamesType = {\n  calendarHeaderControl?: string;\n  calendarHeader?: string;\n  calendarHeaderLevel?: string;\n  calendarHeaderControlIcon?: string;\n};\n\nconst calendarHeaderClassNames = (\n  classNames?: CalendarHeaderClassNamesType,\n) => {\n  return {\n    calendarHeader:\n      classNames?.calendarHeader ?? datePickerCalendarHeader(),\n    calendarHeaderControl:\n      classNames?.calendarHeaderControl ?? datePickerCalendarHeaderControl(),\n    calendarHeaderLevel:\n      classNames?.calendarHeaderLevel ?? datePickerCalendarHeaderLevel(),\n    calendarHeaderControlIcon:\n      classNames?.calendarHeaderControlIcon ??\n      datePickerCalendarHeaderControlIcon(),\n  };\n};\n\ntype CalendarClassNamesType = {\n  levelsGroup?: string;\n  presetsList?: string;\n  presetButton?: string;\n};\n\nconst calendarClassNames = (classNames?: CalendarClassNamesType) => {\n  return {\n    levelsGroup: classNames?.levelsGroup ?? datePickerLevelsGroup(),\n    presetsList: classNames?.presetsList ?? datePickerPresetsList(),\n    presetButton: classNames?.presetButton ?? datePickerPresetButton(),\n  };\n}\n\ntype CalendarDayClassNamesType = {\n  day?: string;\n};\n\nconst calendarDayClassNames = (classNames?: CalendarDayClassNamesType) => {\n  return {\n    day: classNames?.day ?? datePickerDay(),\n  };\n}\n\ntype CalendarWeekClassNamesType = {\n  weekDaysRow?: string;\n  weekDay?: string;\n  weekNumber?: string;\n};\n\nconst calendarWeekClassNames = (classNames?: CalendarWeekClassNamesType) => {\n  return {\n    weekdaysRow: classNames?.weekDaysRow ?? datePickerWeekdaysRow(),\n    weekday: classNames?.weekDay ?? datePickerWeekday(),\n    weekNumber: classNames?.weekNumber ?? datePickerWeekNumber(),\n  };\n}\n\ntype CalendarMonthClassNamesType = {\n  month?: string;\n  monthRow?: string;\n  monthCell?: string;\n  monthThead?: string;\n  monthTbody?: string;\n};\n\nconst calendarMonthClassNames = (classNames?: CalendarMonthClassNamesType) => {\n  return {\n    month: classNames?.month ?? datePickerMonth(),\n    monthRow: classNames?.monthRow ?? datePickerMonthRow(),\n    monthThead: classNames?.monthThead ?? datePickerMonthThead(),\n    monthTbody: classNames?.monthTbody ?? datePickerMonthTbody(),\n    monthCell: classNames?.monthCell ?? datePickerMonthCell(),\n  };\n};\n\ntype CalendarMonthsListClassNamesType = {\n  monthsList?: string;\n  monthsListRow?: string;\n  monthsListCell?: string;\n  monthsListControl?: string;\n};\n\nconst calendarMonthsListClassNames = (\n  classNames?: CalendarMonthsListClassNamesType,\n) => {\n  return {\n    monthsList: classNames?.monthsList ?? datePickerMonthsList(),\n    monthsListRow: classNames?.monthsListRow ?? datePickerMonthsListRow(),\n    monthsListCell: classNames?.monthsListCell ?? datePickerMonthsListCell(),\n    monthsListControl:\n      classNames?.monthsListControl ?? datePickerMonthsListControl(),\n  };\n};\n\ntype CalendarYearsListClassNamesType = {\n  yearsList?: string;\n  yearsListRow?: string;\n  yearsListCell?: string;\n  yearsListControl?: string;\n};\n\nconst calendarYearsListClassNames = (\n  classNames?: CalendarYearsListClassNamesType,\n) => {\n  return {\n    yearsList: classNames?.yearsList ?? datePickerYearsList(),\n    yearsListRow: classNames?.yearsListRow ?? datePickerYearsListRow(),\n    yearsListCell: classNames?.yearsListCell ?? datePickerYearsListCell(),\n    yearsListControl:\n      classNames?.yearsListControl ?? datePickerYearsListControl(),\n  };\n};\n\ntype PopoverClassNamesType = {\n  dropdown?: string;\n  arrow?: string;\n  overlay?: string;\n};\n\nconst popoverClassNames = (classNames?: PopoverClassNamesType) => {\n  return {\n    dropdown: classNames?.dropdown ?? datePickerDropdown(),\n    arrow: classNames?.arrow ?? datePickerArrow(),\n    overlay: classNames?.overlay ?? datePickerOverlay(),\n  };\n};\n\nconst datePickerClassNames = (classNames?: DatePickerClassNames) => {\n  return {\n    ...inputClassNames(classNames),\n    ...calendarClassNames(classNames),\n    ...calendarHeaderClassNames(classNames),\n    ...calendarDayClassNames(classNames),\n    ...calendarWeekClassNames(classNames),\n    ...calendarMonthClassNames(classNames),\n    ...calendarMonthsListClassNames(classNames),\n    ...calendarYearsListClassNames(classNames),\n  };\n};\n"],"mappings":"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"}

package/dist/components/controls/dropdown/Dropdown.d.mts

@@ -0,0 +1,83 @@
+import { ComboboxStore } from "@mantine/core";
+import "react/jsx-runtime";
+import { ReactNode } from "react";
+
+//#region src/components/controls/dropdown/Dropdown.d.ts
+type DefaultEndSlotClassNames = {
+  chevron?: {
+    iconWrapped?: string;
+    root?: string;
+    open?: {
+      iconRaw?: string;
+      root?: string;
+    };
+    close?: {
+      iconRaw?: string;
+      root?: string;
+    };
+  };
+  clearButton?: {
+    buttonIcon?: string;
+    root?: string;
+    icon?: string;
+    iconRaw?: {
+      iconRaw?: string;
+      root?: string;
+    };
+  };
+};
+type DropdownTextInputClassNames = {
+  textInput?: string;
+  root?: string;
+  label?: string;
+  description?: string;
+  error?: string;
+  wrapper?: string;
+  input?: string;
+  section?: string;
+  required?: string;
+  endSlot?: DefaultEndSlotClassNames;
+};
+type DropdownProps = {
+  onChange: (event: ComboboxStore, value?: string) => void;
+  onFocus: (event: ComboboxStore) => void;
+  onBlur: (event: ComboboxStore) => void;
+  onClick: (event: ComboboxStore) => void;
+  children: ReactNode;
+  startSlot?: ReactNode;
+  endSlot?: ReactNode;
+  readOnly?: boolean;
+  name?: string;
+  label?: ReactNode;
+  description?: ReactNode;
+  error?: ReactNode;
+  disabled?: boolean;
+  placeholder?: string;
+  withinPortal?: boolean;
+  keepMounted?: boolean;
+  clearable?: boolean;
+  chevron?: boolean;
+  offset?: number;
+  classNames?: {
+    dropdown?: string;
+    root?: string;
+    options?: string;
+    option?: string;
+    empty?: string;
+    search?: string;
+    textInput?: DropdownTextInputClassNames;
+    scrollArea?: {
+      scrollArea?: string;
+    };
+  };
+  value?: string;
+  search?: string;
+  setValue: (value: string | undefined, combobox: ComboboxStore) => void;
+  store?: ComboboxStore;
+  target?: ReactNode;
+  btnClearLabel?: string;
+  dropdownHeight?: number | string;
+};
+//#endregion
+export { DropdownProps, DropdownTextInputClassNames };
+//# sourceMappingURL=Dropdown.d.mts.map

package/dist/components/controls/dropdown/Dropdown.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.d.mts","names":[],"sources":["../../../../src/components/controls/dropdown/Dropdown.tsx"],"mappings":";;;;;KAqCY,wBAAA;EACV,OAAA;IACE,WAAA;IACA,IAAA;IACA,IAAA;MACE,OAAA;MACA,IAAA;IAAA;IAEF,KAAA;MACE,OAAA;MACA,IAAA;IAAA;EAAA;EAGJ,WAAA;IACE,UAAA;IACA,IAAA;IACA,IAAA;IACA,OAAA;MACE,OAAA;MACA,IAAA;IAAA;EAAA;AAAA;AAAA,KAKM,2BAAA;EACV,SAAA;EACA,IAAA;EACA,KAAA;EACA,WAAA;EACA,KAAA;EACA,OAAA;EACA,KAAA;EACA,OAAA;EACA,QAAA;EACA,OAAA,GAAU,wBAAA;AAAA;AAAA,KAGA,aAAA;EACV,QAAA,GAAW,KAAA,EAAO,aAAA,EAAe,KAAA;EACjC,OAAA,GAAU,KAAA,EAAO,aAAA;EACjB,MAAA,GAAS,KAAA,EAAO,aAAA;EAChB,OAAA,GAAU,KAAA,EAAO,aAAA;EACjB,QAAA,EAAU,SAAA;EACV,SAAA,GAAY,SAAA;EACZ,OAAA,GAAU,SAAA;EACV,QAAA;EACA,IAAA;EACA,KAAA,GAAQ,SAAA;EACR,WAAA,GAAc,SAAA;EACd,KAAA,GAAQ,SAAA;EACR,QAAA;EACA,WAAA;EACA,YAAA;EACA,WAAA;EACA,SAAA;EACA,OAAA;EACA,MAAA;EACA,UAAA;IACE,QAAA;IACA,IAAA;IACA,OAAA;IACA,MAAA;IACA,KAAA;IACA,MAAA;IACA,SAAA,GAAY,2BAAA;IACZ,UAAA;MACE,UAAA;IAAA;EAAA;EAGJ,KAAA;EACA,MAAA;EACA,QAAA,GAAW,KAAA,sBAA2B,QAAA,EAAU,aAAA;EAChD,KAAA,GAAQ,aAAA;EACR,MAAA,GAAS,SAAA;EACT,aAAA;EACA,cAAA;AAAA"}

package/dist/components/controls/dropdown/Dropdown.mjs

@@ -0,0 +1,2 @@
+import{ScrollAreaAutosize as e}from"../../misc/scroll-area-autosize/ScrollAreaAutosize.mjs";import{TextInput as t}from"../text-input/TextInput.mjs";import{Chevron as n}from"../utils/chevron/Chevron.mjs";import{ClearButton as r}from"../utils/clear-button/ClearButton.mjs";import{cx as i}from"@mage-ui/styled-system/css";import{dropdown as a,dropdownChevron as o,dropdownChevronIcon as s,dropdownChevronIconRoot as c,dropdownChevronRoot as l,dropdownClearButton as u,dropdownClearButtonIcon as d,dropdownClearButtonIconRaw as f,dropdownClearButtonIconRawRoot as p,dropdownClearButtonRoot as m,dropdownEmpty as h,dropdownOption as g,dropdownOptions as _,dropdownRoot as v,dropdownScrollAreaAutosize as y,dropdownTextInput as b,dropdownTextInputDescription as x,dropdownTextInputError as S,dropdownTextInputInput as C,dropdownTextInputLabel as w,dropdownTextInputRequired as T,dropdownTextInputRoot as E,dropdownTextInputSection as D,dropdownTextInputWrapper as O}from"@mage-ui/styled-system/recipes";import{Combobox as k,useCombobox as A}from"@mantine/core";import{Fragment as j,jsx as M,jsxs as N}from"react/jsx-runtime";function P({clearable:e,chevron:t,value:i,setValue:a,combobox:h,classNames:g,btnClearLabel:_=`Clear selection`}){return M(j,{children:e&&(i??``)!==``?M(r,{onClick:()=>{a(void 0,h),h.resetSelectedOption()},label:_,name:`mage-clear-button-x`,classNames:{buttonIcon:g?.clearButton?.buttonIcon??u(),root:g?.clearButton?.root??m(),icon:g?.clearButton?.icon??d(),iconRaw:{iconRaw:g?.clearButton?.iconRaw?.iconRaw??f(),root:g?.clearButton?.iconRaw?.root??p()}}}):t&&M(n,{chevronOpen:`mage-dropdown-chevron-down`,chevronClose:`mage-dropdown-chevron-up`,classNames:{iconWrapped:g?.chevron?.iconWrapped??o(),root:g?.chevron?.root??l(),open:{iconRaw:g?.chevron?.open?.iconRaw??s(),root:g?.chevron?.open?.root??c()},close:{iconRaw:g?.chevron?.close?.iconRaw??s(),root:g?.chevron?.close?.root??c({invert:!0})}}})})}function F({onChange:n,onBlur:r,onFocus:o,onClick:s,disabled:c,children:l,startSlot:u,endSlot:d,readOnly:f,label:p,placeholder:m,name:j,description:F,error:I,classNames:L,withinPortal:R,keepMounted:z,clearable:B,chevron:V,offset:H,value:U,search:W,setValue:G,store:K,target:q,btnClearLabel:J,dropdownHeight:Y=192}){let X=K??A({scrollBehavior:`smooth`,onDropdownClose:()=>X.resetSelectedOption()}),Z=(U??``)===``?`none`:`auto`,Q={};return B&&(Q[`--dropdown-text-input-right-section-pointer-events`]=Z),N(k,{width:`target`,store:X,withinPortal:R,keepMounted:z,offset:H||8,onOptionSubmit:e=>{G(e,X)},classNames:{dropdown:i(L?.dropdown??a(),L?.root??v()),options:L?.options??_(),option:L?.option??g(),empty:L?.empty??h(),search:L?.search},children:[M(k.Target,{children:q||M(t,{readOnly:f??!1,value:W??U??``,startSlot:u,endSlot:d??M(P,{clearable:B,chevron:V,value:U,setValue:G,combobox:X,btnClearLabel:J??`Clear selection`,classNames:L?.textInput?.endSlot}),onClick:e=>{s(X)},onChange:e=>{e.stopPropagation(),n(X,e.currentTarget?.value)},onFocus:e=>{o(X)},onBlur:e=>{r(X),e.stopPropagation()},label:p,placeholder:m,description:F,name:j,error:I,disabled:c,classNames:{root:L?.textInput?.root??E(),textInput:L?.textInput?.textInput??b(),label:L?.textInput?.label??w(),description:L?.textInput?.description??x(),error:L?.textInput?.error??S(),wrapper:L?.textInput?.wrapper??O(),input:L?.textInput?.input??C(),section:L?.textInput?.section??D(),required:L?.textInput?.required??T()},style:Q})}),M(k.Dropdown,{children:M(e,{type:`scroll`,mah:Y,classNames:{scrollArea:L?.scrollArea?.scrollArea??y()},children:l})})]})}F.Options=k.Options,F.Options.displayName=`Dropdown.Options`,F.Option=k.Option,F.Option.displayName=`Dropdown.Option`,F.Empty=k.Empty,F.Empty.displayName=`Dropdown.Empty`,F.Search=k.Search,F.Search.displayName=`Dropdown.Search`,F.EventsTarget=k.EventsTarget,F.EventsTarget.displayName=`Dropdown.EventsTarget`;export{F as Dropdown};
+//# sourceMappingURL=Dropdown.mjs.map

package/dist/components/controls/dropdown/Dropdown.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.mjs","names":["MantineCombobox","TextInput"],"sources":["../../../../src/components/controls/dropdown/Dropdown.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport {\n  type ComboboxStore,\n  Combobox as MantineCombobox,\n  useCombobox,\n} from '@mantine/core';\nimport { TextInput } from '../text-input/TextInput';\nimport { ClearButton, Chevron } from '../utils';\nimport { ScrollAreaAutosize } from '../../misc';\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n  dropdown,\n  dropdownRoot,\n  dropdownChevron,\n  dropdownChevronRoot,\n  dropdownChevronIcon,\n  dropdownChevronIconRoot,\n  dropdownClearButton,\n  dropdownClearButtonRoot,\n  dropdownClearButtonIcon,\n  dropdownClearButtonIconRaw,\n  dropdownClearButtonIconRawRoot,\n  dropdownEmpty,\n  dropdownOption,\n  dropdownOptions,\n  dropdownTextInput,\n  dropdownTextInputDescription,\n  dropdownTextInputError,\n  dropdownTextInputInput,\n  dropdownTextInputLabel,\n  dropdownTextInputRequired,\n  dropdownTextInputRoot,\n  dropdownTextInputSection,\n  dropdownTextInputWrapper,\n  dropdownScrollAreaAutosize,\n} from '@mage-ui/styled-system/recipes';\n\nexport type DefaultEndSlotClassNames = {\n  chevron?: {\n    iconWrapped?: string;\n    root?: string;\n    open?: {\n      iconRaw?: string;\n      root?: string;\n    };\n    close?: {\n      iconRaw?: string;\n      root?: string;\n    };\n  };\n  clearButton?: {\n    buttonIcon?: string;\n    root?: string;\n    icon?: string;\n    iconRaw?: {\n      iconRaw?: string;\n      root?: string;\n    };\n  };\n};\n\nexport type DropdownTextInputClassNames = {\n  textInput?: string;\n  root?: string;\n  label?: string;\n  description?: string;\n  error?: string;\n  wrapper?: string;\n  input?: string;\n  section?: string;\n  required?: string;\n  endSlot?: DefaultEndSlotClassNames;\n};\n\nexport type DropdownProps = {\n  onChange: (event: ComboboxStore, value?: string) => void;\n  onFocus: (event: ComboboxStore) => void;\n  onBlur: (event: ComboboxStore) => void;\n  onClick: (event: ComboboxStore) => void;\n  children: ReactNode;\n  startSlot?: ReactNode;\n  endSlot?: ReactNode;\n  readOnly?: boolean;\n  name?: string;\n  label?: ReactNode;\n  description?: ReactNode;\n  error?: ReactNode;\n  disabled?: boolean;\n  placeholder?: string;\n  withinPortal?: boolean;\n  keepMounted?: boolean;\n  clearable?: boolean;\n  chevron?: boolean;\n  offset?: number;\n  classNames?: {\n    dropdown?: string;\n    root?: string;\n    options?: string;\n    option?: string;\n    empty?: string;\n    search?: string;\n    textInput?: DropdownTextInputClassNames;\n    scrollArea?: {\n      scrollArea?: string;\n    };\n  };\n  value?: string;\n  search?: string;\n  setValue: (value: string | undefined, combobox: ComboboxStore) => void;\n  store?: ComboboxStore;\n  target?: ReactNode;\n  btnClearLabel?: string;\n  dropdownHeight?: number | string;\n};\n\nexport type DefaultEndSlotProps = {\n  clearable?: boolean;\n  chevron?: boolean;\n  value?: string;\n  setValue: (val: string | undefined, combobox: ComboboxStore) => void;\n  combobox: ComboboxStore;\n  classNames?: DefaultEndSlotClassNames;\n  btnClearLabel: string;\n};\n\nfunction DefaultEndSlot({\n  clearable,\n  chevron,\n  value,\n  setValue,\n  combobox,\n  classNames,\n  btnClearLabel = 'Clear selection',\n}: DefaultEndSlotProps) {\n  const showClearable = clearable && (value ?? '') !== '';\n  return (\n    <>\n      {showClearable ? (\n        <ClearButton\n          onClick={() => {\n            setValue(undefined, combobox);\n            combobox.resetSelectedOption();\n          }}\n          label={btnClearLabel}\n          name='mage-clear-button-x'\n          classNames={{\n            buttonIcon:\n              classNames?.clearButton?.buttonIcon ?? dropdownClearButton(),\n            root: classNames?.clearButton?.root ?? dropdownClearButtonRoot(),\n            icon: classNames?.clearButton?.icon ?? dropdownClearButtonIcon(),\n            iconRaw: {\n              iconRaw:\n                classNames?.clearButton?.iconRaw?.iconRaw ??\n                dropdownClearButtonIconRaw(),\n              root:\n                classNames?.clearButton?.iconRaw?.root ??\n                dropdownClearButtonIconRawRoot(),\n            },\n          }}\n        />\n      ) : (\n        chevron && (\n          <Chevron\n            chevronOpen='mage-dropdown-chevron-down'\n            chevronClose='mage-dropdown-chevron-up'\n            classNames={{\n              iconWrapped:\n                classNames?.chevron?.iconWrapped ?? dropdownChevron(),\n              root: classNames?.chevron?.root ?? dropdownChevronRoot(),\n              open: {\n                iconRaw:\n                  classNames?.chevron?.open?.iconRaw ?? dropdownChevronIcon(),\n                root:\n                  classNames?.chevron?.open?.root ?? dropdownChevronIconRoot(),\n              },\n              close: {\n                iconRaw:\n                  classNames?.chevron?.close?.iconRaw ?? dropdownChevronIcon(),\n                root:\n                  classNames?.chevron?.close?.root ??\n                  dropdownChevronIconRoot({ invert: true }),\n              },\n            }}\n          />\n        )\n      )}\n    </>\n  );\n}\n\nexport function Dropdown({\n  onChange,\n  onBlur,\n  onFocus,\n  onClick,\n  disabled,\n  children,\n  startSlot,\n  endSlot,\n  readOnly,\n  label,\n  placeholder,\n  name,\n  description,\n  error,\n  classNames,\n  withinPortal,\n  keepMounted,\n  clearable,\n  chevron,\n  offset,\n  value,\n  search,\n  setValue,\n  store,\n  target,\n  btnClearLabel,\n  dropdownHeight = 192,\n}: DropdownProps) {\n  const combobox =\n    store ??\n    useCombobox({\n      scrollBehavior: 'smooth',\n      onDropdownClose: () => combobox.resetSelectedOption(),\n    });\n  const clearablePointerEvents = (value ?? '') !== '' ? 'auto' : 'none';\n  const style: Record<string, string> = {};\n  if (clearable) {\n    style['--dropdown-text-input-right-section-pointer-events' as string] =\n      clearablePointerEvents;\n  }\n  return (\n    <MantineCombobox\n      width='target'\n      store={combobox}\n      withinPortal={withinPortal}\n      keepMounted={keepMounted}\n      offset={offset || 8}\n      onOptionSubmit={(option) => {\n        setValue(option, combobox);\n      }}\n      classNames={{\n        dropdown: cx(\n          classNames?.dropdown ?? dropdown(),\n          classNames?.root ?? dropdownRoot(),\n        ),\n        options: classNames?.options ?? dropdownOptions(),\n        option: classNames?.option ?? dropdownOption(),\n        empty: classNames?.empty ?? dropdownEmpty(),\n        search: classNames?.search,\n      }}\n    >\n      <MantineCombobox.Target>\n        {target ? (\n          target\n        ) : (\n          <TextInput\n            readOnly={readOnly ?? false}\n            value={search ?? value ?? ''}\n            startSlot={startSlot}\n            endSlot={\n              endSlot ?? (\n                <DefaultEndSlot\n                  clearable={clearable}\n                  chevron={chevron}\n                  value={value}\n                  setValue={setValue}\n                  combobox={combobox}\n                  btnClearLabel={btnClearLabel ?? 'Clear selection'}\n                  classNames={classNames?.textInput?.endSlot}\n                />\n              )\n            }\n            onClick={(e) => {\n              onClick(combobox);\n              // e.stopPropagation();\n            }}\n            onChange={(e) => {\n              e.stopPropagation();\n              onChange(combobox, e.currentTarget?.value);\n            }}\n            onFocus={(e) => {\n              onFocus(combobox);\n              // e.stopPropagation();\n            }}\n            onBlur={(e) => {\n              onBlur(combobox);\n              e.stopPropagation();\n            }}\n            label={label}\n            placeholder={placeholder}\n            description={description}\n            name={name}\n            error={error}\n            disabled={disabled}\n            classNames={{\n              root: classNames?.textInput?.root ?? dropdownTextInputRoot(),\n              textInput: classNames?.textInput?.textInput ?? dropdownTextInput(),\n              label: classNames?.textInput?.label ?? dropdownTextInputLabel(),\n              description:\n                classNames?.textInput?.description ??\n                dropdownTextInputDescription(),\n              error: classNames?.textInput?.error ?? dropdownTextInputError(),\n              wrapper:\n                classNames?.textInput?.wrapper ?? dropdownTextInputWrapper(),\n              input: classNames?.textInput?.input ?? dropdownTextInputInput(),\n              section:\n                classNames?.textInput?.section ?? dropdownTextInputSection(),\n              required:\n                classNames?.textInput?.required ?? dropdownTextInputRequired(),\n            }}\n            style={style}\n          />\n        )}\n      </MantineCombobox.Target>\n      <MantineCombobox.Dropdown>\n        <ScrollAreaAutosize\n          type='scroll'\n          mah={dropdownHeight}\n          classNames={{\n            scrollArea:\n              classNames?.scrollArea?.scrollArea ?? dropdownScrollAreaAutosize(),\n          }}\n        >\n          {children}\n        </ScrollAreaAutosize>\n      </MantineCombobox.Dropdown>\n    </MantineCombobox>\n  );\n}\n\nDropdown.Options = MantineCombobox.Options;\nDropdown.Options.displayName = 'Dropdown.Options';\nDropdown.Option = MantineCombobox.Option;\nDropdown.Option.displayName = 'Dropdown.Option';\nDropdown.Empty = MantineCombobox.Empty;\nDropdown.Empty.displayName = 'Dropdown.Empty';\nDropdown.Search = MantineCombobox.Search;\nDropdown.Search.displayName = 'Dropdown.Search';\nDropdown.EventsTarget = MantineCombobox.EventsTarget;\nDropdown.EventsTarget.displayName = 'Dropdown.EventsTarget';\n"],"mappings":"+lCA6HA,SAAS,EAAe,CACtB,YACA,UACA,QACA,WACA,WACA,aACA,gBAAgB,mBACM,CAEtB,OACE,EAAA,EAAA,CAAA,SAFoB,IAAc,GAAS,MAAQ,GAI/C,EAAC,EAAA,CACC,YAAe,CACb,EAAS,IAAA,GAAW,EAAS,CAC7B,EAAS,qBAAqB,EAEhC,MAAO,EACP,KAAK,sBACL,WAAY,CACV,WACE,GAAY,aAAa,YAAc,GAAqB,CAC9D,KAAM,GAAY,aAAa,MAAQ,GAAyB,CAChE,KAAM,GAAY,aAAa,MAAQ,GAAyB,CAChE,QAAS,CACP,QACE,GAAY,aAAa,SAAS,SAClC,GAA4B,CAC9B,KACE,GAAY,aAAa,SAAS,MAClC,GAAgC,CACnC,CACF,EACD,CAEF,GACE,EAAC,EAAA,CACC,YAAY,6BACZ,aAAa,2BACb,WAAY,CACV,YACE,GAAY,SAAS,aAAe,GAAiB,CACvD,KAAM,GAAY,SAAS,MAAQ,GAAqB,CACxD,KAAM,CACJ,QACE,GAAY,SAAS,MAAM,SAAW,GAAqB,CAC7D,KACE,GAAY,SAAS,MAAM,MAAQ,GAAyB,CAC/D,CACD,MAAO,CACL,QACE,GAAY,SAAS,OAAO,SAAW,GAAqB,CAC9D,KACE,GAAY,SAAS,OAAO,MAC5B,EAAwB,CAAE,OAAQ,GAAM,CAAC,CAC5C,CACF,EACD,CAAA,CAGL,CAIP,SAAgB,EAAS,CACvB,WACA,SACA,UACA,UACA,WACA,WACA,YACA,UACA,WACA,QACA,cACA,OACA,cACA,QACA,aACA,eACA,cACA,YACA,UACA,SACA,QACA,SACA,WACA,QACA,SACA,gBACA,iBAAiB,KACD,CAChB,IAAM,EACJ,GACA,EAAY,CACV,eAAgB,SAChB,oBAAuB,EAAS,qBAAqB,CACtD,CAAC,CACE,GAA0B,GAAS,MAAQ,GAAc,OAAT,OAChD,EAAgC,EAAE,CAKxC,OAJI,IACF,EAAM,sDACJ,GAGF,EAACA,EAAAA,CACC,MAAM,SACN,MAAO,EACO,eACD,cACb,OAAQ,GAAU,EAClB,eAAiB,GAAW,CAC1B,EAAS,EAAQ,EAAS,EAE5B,WAAY,CACV,SAAU,EACR,GAAY,UAAY,GAAU,CAClC,GAAY,MAAQ,GAAc,CACnC,CACD,QAAS,GAAY,SAAW,GAAiB,CACjD,OAAQ,GAAY,QAAU,GAAgB,CAC9C,MAAO,GAAY,OAAS,GAAe,CAC3C,OAAQ,GAAY,OACrB,WAED,EAACA,EAAgB,OAAA,CAAA,SACd,GAGC,EAACC,EAAAA,CACC,SAAU,GAAY,GACtB,MAAO,GAAU,GAAS,GACf,YACX,QACE,GACE,EAAC,EAAA,CACY,YACF,UACF,QACG,WACA,WACV,cAAe,GAAiB,kBAChC,WAAY,GAAY,WAAW,SACnC,CAGN,QAAU,GAAM,CACd,EAAQ,EAAS,EAGnB,SAAW,GAAM,CACf,EAAE,iBAAiB,CACnB,EAAS,EAAU,EAAE,eAAe,MAAM,EAE5C,QAAU,GAAM,CACd,EAAQ,EAAS,EAGnB,OAAS,GAAM,CACb,EAAO,EAAS,CAChB,EAAE,iBAAiB,EAEd,QACM,cACA,cACP,OACC,QACG,WACV,WAAY,CACV,KAAM,GAAY,WAAW,MAAQ,GAAuB,CAC5D,UAAW,GAAY,WAAW,WAAa,GAAmB,CAClE,MAAO,GAAY,WAAW,OAAS,GAAwB,CAC/D,YACE,GAAY,WAAW,aACvB,GAA8B,CAChC,MAAO,GAAY,WAAW,OAAS,GAAwB,CAC/D,QACE,GAAY,WAAW,SAAW,GAA0B,CAC9D,MAAO,GAAY,WAAW,OAAS,GAAwB,CAC/D,QACE,GAAY,WAAW,SAAW,GAA0B,CAC9D,SACE,GAAY,WAAW,UAAY,GAA2B,CACjE,CACM,SACP,CAAA,CAEmB,CACzB,EAACD,EAAgB,SAAA,CAAA,SACf,EAAC,EAAA,CACC,KAAK,SACL,IAAK,EACL,WAAY,CACV,WACE,GAAY,YAAY,YAAc,GAA4B,CACrE,CAEA,YACkB,CAAA,CACI,CAAA,EACX,CAItB,EAAS,QAAUA,EAAgB,QACnC,EAAS,QAAQ,YAAc,mBAC/B,EAAS,OAASA,EAAgB,OAClC,EAAS,OAAO,YAAc,kBAC9B,EAAS,MAAQA,EAAgB,MACjC,EAAS,MAAM,YAAc,iBAC7B,EAAS,OAASA,EAAgB,OAClC,EAAS,OAAO,YAAc,kBAC9B,EAAS,aAAeA,EAAgB,aACxC,EAAS,aAAa,YAAc"}

package/dist/components/controls/dropzone/Dropzone.d.mts

@@ -0,0 +1,70 @@
+import { IconProps } from "../../data-display/icons/icon/Icon.mjs";
+import { LoaderOvalProps } from "../../data-display/loader-oval/LoaderOval.mjs";
+import "../../data-display/index.mjs";
+import * as react_jsx_runtime31 from "react/jsx-runtime";
+import { ReactNode } from "react";
+
+//#region src/components/controls/dropzone/Dropzone.d.ts
+type FileData = {
+  name: string;
+  size: number;
+  type: string;
+  date: string;
+  uploaded: boolean;
+  loading: boolean;
+  url: string;
+  error?: string;
+  progress?: number;
+};
+type DropzoneProps = {
+  children: ({
+    files,
+    isUploading,
+    removeFile
+  }: {
+    files: Record<string, FileData>;
+    isUploading: boolean;
+    removeFile: (fileName: string) => void;
+  }) => ReactNode;
+  initialFiles?: Record<string, FileData>;
+  maxFiles?: number;
+  data?: Record<string, unknown>;
+  url: string;
+  accept?: string[];
+  preventDropOnDocument?: boolean;
+  title?: ReactNode;
+  subtitle?: ReactNode;
+  hint?: ReactNode;
+  inputId?: string;
+  classNames?: {
+    dropzone?: string;
+    root?: string;
+    dropzoneDropzone?: {
+      root?: string;
+      inner?: string;
+    };
+    iconSlot?: string;
+    dropzoneIcon?: IconProps['classNames'];
+    loader?: LoaderOvalProps['classNames'];
+    textSlot?: string;
+    title?: string;
+    subtitle?: string;
+    hint?: string;
+  };
+};
+declare const Dropzone: ({
+  data,
+  children,
+  initialFiles,
+  maxFiles,
+  accept,
+  url,
+  title,
+  subtitle,
+  hint,
+  inputId,
+  classNames
+}: DropzoneProps) => react_jsx_runtime31.JSX.Element;
+//#endregion
+export { Dropzone, DropzoneProps, FileData };
+//# sourceMappingURL=Dropzone.d.mts.map

package/dist/components/controls/dropzone/Dropzone.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropzone.d.mts","names":[],"sources":["../../../../src/components/controls/dropzone/Dropzone.tsx"],"mappings":";;;;;;;KAyBY,QAAA;EACV,IAAA;EACA,IAAA;EACA,IAAA;EACA,IAAA;EACA,QAAA;EACA,OAAA;EACA,GAAA;EACA,KAAA;EACA,QAAA;AAAA;AAAA,KAGU,aAAA;EACV,QAAA;IACE,KAAA;IACA,WAAA;IACA;EAAA;IAEA,KAAA,EAAO,MAAA,SAAe,QAAA;IACtB,WAAA;IACA,UAAA,GAAa,QAAA;EAAA,MACT,SAAA;EACN,YAAA,GAAe,MAAA,SAAe,QAAA;EAC9B,QAAA;EACA,IAAA,GAAO,MAAA;EACP,GAAA;EACA,MAAA;EACA,qBAAA;EACA,KAAA,GAAQ,SAAA;EACR,QAAA,GAAW,SAAA;EACX,IAAA,GAAO,SAAA;EACP,OAAA;EACA,UAAA;IACE,QAAA;IACA,IAAA;IACA,gBAAA;MACE,IAAA;MACA,KAAA;IAAA;IAEF,QAAA;IACA,YAAA,GAAe,SAAA;IACf,MAAA,GAAS,eAAA;IACT,QAAA;IACA,KAAA;IACA,QAAA;IACA,IAAA;EAAA;AAAA;AAAA,cAIS,QAAA;EAAY,IAAA;EAAA,QAAA;EAAA,YAAA;EAAA,QAAA;EAAA,MAAA;EAAA,GAAA;EAAA,KAAA;EAAA,QAAA;EAAA,IAAA;EAAA,OAAA;EAAA;AAAA,GAYtB,aAAA,KAAa,mBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/controls/dropzone/Dropzone.mjs

@@ -0,0 +1,2 @@
+import{Icon as e}from"../../data-display/icons/icon/Icon.mjs";import{LoaderOval as t}from"../../data-display/loader-oval/LoaderOval.mjs";import{useDropzoneState as n}from"./use-dropzone-state.mjs";import{cx as r}from"@mage-ui/styled-system/css";import{dropzone as i,dropzoneDropzoneInner as a,dropzoneDropzoneRoot as o,dropzoneHint as s,dropzoneIcon as c,dropzoneIconSlot as l,dropzoneLoader as u,dropzoneLoaderRoot as d,dropzoneRoot as f,dropzoneSubtitle as p,dropzoneTextSlot as m,dropzoneTitle as h}from"@mage-ui/styled-system/recipes";import{Fragment as g,jsx as _,jsxs as v}from"react/jsx-runtime";import{useCallback as y,useRef as b}from"react";import{Dropzone as x}from"@mantine/dropzone";const S=({data:S,children:C,initialFiles:w={},maxFiles:T,accept:E,url:D,title:O,subtitle:k,hint:A,inputId:j,classNames:M})=>{let N=b(null),{files:P,isUploading:F,uploadMultipleFiles:I,removeFile:L}=n(D,w),R=y(async e=>{let t=Object.keys(P).length,n=(T??1/0)-t;n<=0||await I(e.slice(0,n),S)},[I,S,P,T]);return v(`div`,{className:r(M?.dropzone??i(),M?.root??f()),children:[v(x,{ref:N,onDrop:R,disabled:Object.keys(P).length>=(T??1/0),loading:F,accept:E,preventDropOnDocument:!0,inputProps:{id:j},classNames:{root:M?.dropzoneDropzone?.root??r(o(),`group`),inner:M?.dropzoneDropzone?.inner??a()},children:[_(`div`,{className:M?.iconSlot??l(),children:F?_(t,{classNames:{loader:M?.loader?.loader??u(),root:M?.loader?.root??d()}}):v(g,{children:[_(x.Idle,{children:_(e,{name:`mage-dropzone-upload-01`,path:`/icons/sprite-mage.svg`,classNames:{icon:M?.dropzoneIcon?.icon??c()}})}),_(x.Accept,{children:_(e,{name:`mage-dropzone-thumbs-up`,path:`/icons/sprite-mage.svg`,classNames:{icon:M?.dropzoneIcon?.icon??c()}})}),_(x.Reject,{children:_(e,{name:`mage-dropzone-thumbs-down`,path:`/icons/sprite-mage.svg`,classNames:{icon:M?.dropzoneIcon?.icon??c()}})})]})}),v(`div`,{className:M?.textSlot??m(),children:[_(`span`,{className:M?.title??h(),children:O||`Upload files`}),_(`span`,{className:M?.subtitle??p(),children:k||`Drag images here or click to select files`}),_(`span`,{className:M?.hint??s(),children:A||`Attach as many files as you like, each file should not exceed 5mb`})]})]}),Object.keys(P).length>0&&C({files:P,isUploading:F,removeFile:L})]})};export{S as Dropzone};
+//# sourceMappingURL=Dropzone.mjs.map

package/dist/components/controls/dropzone/Dropzone.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropzone.mjs","names":["Dropzone","MantineDropzone"],"sources":["../../../../src/components/controls/dropzone/Dropzone.tsx"],"sourcesContent":["import { Dropzone as MantineDropzone } from '@mantine/dropzone';\nimport { type ReactNode, useCallback, useRef } from 'react';\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n  dropzone,\n  dropzoneRoot,\n  dropzoneDropzoneInner,\n  dropzoneDropzoneRoot,\n  dropzoneIconSlot,\n  dropzoneIcon,\n  dropzoneTextSlot,\n  dropzoneTitle,\n  dropzoneSubtitle,\n  dropzoneHint,\n  dropzoneLoader,\n  dropzoneLoaderRoot,\n} from '@mage-ui/styled-system/recipes';\nimport {\n  Icon,\n  type IconProps,\n  LoaderOval,\n  type LoaderOvalProps,\n} from '@/components/data-display';\nimport { useDropzoneState } from './use-dropzone-state';\n\nexport type FileData = {\n  name: string;\n  size: number;\n  type: string;\n  date: string;\n  uploaded: boolean;\n  loading: boolean;\n  url: string;\n  error?: string;\n  progress?: number; // (0-100)\n};\n\nexport type DropzoneProps = {\n  children: ({\n    files,\n    isUploading,\n    removeFile,\n  }: {\n    files: Record<string, FileData>;\n    isUploading: boolean;\n    removeFile: (fileName: string) => void;\n  }) => ReactNode;\n  initialFiles?: Record<string, FileData>;\n  maxFiles?: number;\n  data?: Record<string, unknown>;\n  url: string;\n  accept?: string[];\n  preventDropOnDocument?: boolean;\n  title?: ReactNode;\n  subtitle?: ReactNode;\n  hint?: ReactNode;\n  inputId?: string;\n  classNames?: {\n    dropzone?: string;\n    root?: string;\n    dropzoneDropzone?: {\n      root?: string;\n      inner?: string;\n    };\n    iconSlot?: string;\n    dropzoneIcon?: IconProps['classNames'];\n    loader?: LoaderOvalProps['classNames'];\n    textSlot?: string;\n    title?: string;\n    subtitle?: string;\n    hint?: string;\n  };\n};\n\nexport const Dropzone = ({\n  data,\n  children,\n  initialFiles = {},\n  maxFiles,\n  accept,\n  url,\n  title,\n  subtitle,\n  hint,\n  inputId,\n  classNames,\n}: DropzoneProps) => {\n  const dropzoneRef = useRef<HTMLDivElement>(null);\n  const { files, isUploading, uploadMultipleFiles, removeFile } =\n    useDropzoneState(url, initialFiles);\n  const handleDrop = useCallback(\n    async (acceptedFiles: File[]) => {\n      const currentCount = Object.keys(files).length;\n      const max = maxFiles ?? Number.POSITIVE_INFINITY;\n      const remainingSlots = max - currentCount;\n      if (remainingSlots <= 0) {\n        return;\n      }\n      const filesToUpload = acceptedFiles.slice(0, remainingSlots);\n      await uploadMultipleFiles(filesToUpload, data);\n    },\n    [uploadMultipleFiles, data, files, maxFiles],\n  );  \n\n  return (\n    <div\n      className={cx(\n        classNames?.dropzone ?? dropzone(),\n        classNames?.root ?? dropzoneRoot(),\n      )}\n    >\n      <MantineDropzone\n        ref={dropzoneRef}\n        onDrop={handleDrop}\n        disabled={\n          Object.keys(files).length >= (maxFiles ?? Number.POSITIVE_INFINITY)\n        }\n        loading={isUploading}\n        accept={accept}\n        preventDropOnDocument\n        inputProps={{ id: inputId }}\n        classNames={{\n          root:\n            classNames?.dropzoneDropzone?.root ??\n            cx(dropzoneDropzoneRoot(), 'group'),\n          inner: classNames?.dropzoneDropzone?.inner ?? dropzoneDropzoneInner(),\n        }}\n      >\n        <div className={classNames?.iconSlot ?? dropzoneIconSlot()}>\n          {isUploading ? (\n            <LoaderOval\n              classNames={{\n                loader: classNames?.loader?.loader ?? dropzoneLoader(),\n                root: classNames?.loader?.root ?? dropzoneLoaderRoot(),\n              }}\n            />\n          ) : (\n            <>\n              <MantineDropzone.Idle>\n                <Icon\n                  name='mage-dropzone-upload-01'\n                  path='/icons/sprite-mage.svg'\n                  classNames={{\n                    icon: classNames?.dropzoneIcon?.icon ?? dropzoneIcon(),\n                  }}\n                />\n              </MantineDropzone.Idle>\n              <MantineDropzone.Accept>\n                <Icon\n                  name='mage-dropzone-thumbs-up'\n                  path='/icons/sprite-mage.svg'\n                  classNames={{\n                    icon: classNames?.dropzoneIcon?.icon ?? dropzoneIcon(),\n                  }}\n                />\n              </MantineDropzone.Accept>\n              <MantineDropzone.Reject>\n                <Icon\n                  name='mage-dropzone-thumbs-down'\n                  path='/icons/sprite-mage.svg'\n                  classNames={{\n                    icon: classNames?.dropzoneIcon?.icon ?? dropzoneIcon(),\n                  }}\n                />\n              </MantineDropzone.Reject>\n            </>\n          )}\n        </div>\n        <div className={classNames?.textSlot ?? dropzoneTextSlot()}>\n          <span className={classNames?.title ?? dropzoneTitle()}>\n            {title || 'Upload files'}\n          </span>\n          <span className={classNames?.subtitle ?? dropzoneSubtitle()}>\n            {subtitle || 'Drag images here or click to select files'}\n          </span>\n          <span className={classNames?.hint ?? dropzoneHint()}>\n            {hint ||\n              'Attach as many files as you like, each file should not exceed 5mb'}\n          </span>\n        </div>\n      </MantineDropzone>\n      {Object.keys(files).length > 0 &&\n        children({ files, isUploading, removeFile })}\n    </div>\n  );\n};\n"],"mappings":"wrBA0EA,MAAaA,GAAY,CACvB,OACA,WACA,eAAe,EAAE,CACjB,WACA,SACA,MACA,QACA,WACA,OACA,UACA,gBACmB,CACnB,IAAM,EAAc,EAAuB,KAAK,CAC1C,CAAE,QAAO,cAAa,sBAAqB,cAC/C,EAAiB,EAAK,EAAa,CAC/B,EAAa,EACjB,KAAO,IAA0B,CAC/B,IAAM,EAAe,OAAO,KAAK,EAAM,CAAC,OAElC,GADM,GAAY,KACK,EACzB,GAAkB,GAItB,MAAM,EADgB,EAAc,MAAM,EAAG,EAAe,CACnB,EAAK,EAEhD,CAAC,EAAqB,EAAM,EAAO,EAAS,CAC7C,CAED,OACE,EAAC,MAAA,CACC,UAAW,EACT,GAAY,UAAY,GAAU,CAClC,GAAY,MAAQ,GAAc,CACnC,WAED,EAACC,EAAAA,CACC,IAAK,EACL,OAAQ,EACR,SACE,OAAO,KAAK,EAAM,CAAC,SAAW,GAAY,KAE5C,QAAS,EACD,SACR,sBAAA,GACA,WAAY,CAAE,GAAI,EAAS,CAC3B,WAAY,CACV,KACE,GAAY,kBAAkB,MAC9B,EAAG,GAAsB,CAAE,QAAQ,CACrC,MAAO,GAAY,kBAAkB,OAAS,GAAuB,CACtE,WAED,EAAC,MAAA,CAAI,UAAW,GAAY,UAAY,GAAkB,UACvD,EACC,EAAC,EAAA,CACC,WAAY,CACV,OAAQ,GAAY,QAAQ,QAAU,GAAgB,CACtD,KAAM,GAAY,QAAQ,MAAQ,GAAoB,CACvD,CAAA,CACD,CAEF,EAAA,EAAA,CAAA,SAAA,CACE,EAACA,EAAgB,KAAA,CAAA,SACf,EAAC,EAAA,CACC,KAAK,0BACL,KAAK,yBACL,WAAY,CACV,KAAM,GAAY,cAAc,MAAQ,GAAc,CACvD,EACD,CAAA,CACmB,CACvB,EAACA,EAAgB,OAAA,CAAA,SACf,EAAC,EAAA,CACC,KAAK,0BACL,KAAK,yBACL,WAAY,CACV,KAAM,GAAY,cAAc,MAAQ,GAAc,CACvD,EACD,CAAA,CACqB,CACzB,EAACA,EAAgB,OAAA,CAAA,SACf,EAAC,EAAA,CACC,KAAK,4BACL,KAAK,yBACL,WAAY,CACV,KAAM,GAAY,cAAc,MAAQ,GAAc,CACvD,EACD,CAAA,CACqB,GACxB,EAED,CACN,EAAC,MAAA,CAAI,UAAW,GAAY,UAAY,GAAkB,WACxD,EAAC,OAAA,CAAK,UAAW,GAAY,OAAS,GAAe,UAClD,GAAS,gBACL,CACP,EAAC,OAAA,CAAK,UAAW,GAAY,UAAY,GAAkB,UACxD,GAAY,6CACR,CACP,EAAC,OAAA,CAAK,UAAW,GAAY,MAAQ,GAAc,UAChD,GACC,qEACG,GACH,CAAA,EACU,CACjB,OAAO,KAAK,EAAM,CAAC,OAAS,GAC3B,EAAS,CAAE,QAAO,cAAa,aAAY,CAAC,CAAA,EAC1C"}

package/dist/components/controls/dropzone/upload-service.mjs

@@ -0,0 +1,2 @@
+const e=async(e,t,n,r)=>{let i=new FormData;i.append(`file`,t),n&&Object.entries(n).forEach(([e,t])=>{i.append(e,t)});let a=new XMLHttpRequest;return new Promise((t,n)=>{if(a.readyState!==0){n(Error(`Ya hay una solicitud en progreso`));return}a.upload.addEventListener(`progress`,e=>{e.lengthComputable&&r&&r({loaded:e.loaded,total:e.total,percentage:Math.round(e.loaded/e.total*100)})}),a.addEventListener(`load`,()=>{if(a.status>=200&&a.status<300)try{t(JSON.parse(a.responseText))}catch{n(Error(`Error al parsear la respuesta`))}else try{let e=JSON.parse(a.responseText);n(Error(e.error||`Error al subir el archivo`))}catch{n(Error(`Error ${a.status}: ${a.statusText}`))}}),a.addEventListener(`error`,()=>{n(Error(`Error de red al subir el archivo`))}),a.addEventListener(`abort`,()=>{n(Error(`Subida cancelada`))}),a.timeout=3e4,a.addEventListener(`timeout`,()=>{n(Error(`Tiempo de espera agotado`))});try{a.open(`POST`,e),a.send(i)}catch{n(Error(`Error al iniciar la solicitud`))}})};export{e as uploadFile};
+//# sourceMappingURL=upload-service.mjs.map

package/dist/components/controls/dropzone/upload-service.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"upload-service.mjs","names":[],"sources":["../../../../src/components/controls/dropzone/upload-service.ts"],"sourcesContent":["export type UploadResponse = {\n  body: {\n    url: string;\n  };\n};\n\nexport type UploadProgress = {\n  loaded: number;\n  total: number;\n  percentage: number;\n};\n\nexport const uploadFile = async (\n  url: string,\n  file: File,\n  data?: Record<string, unknown>,\n  onProgress?: (progress: UploadProgress) => void,\n): Promise<UploadResponse> => {\n  const formData = new FormData();\n  formData.append('file', file);\n  if (data) {\n    Object.entries(data).forEach(([key, value]) => {\n      formData.append(key, value as string);\n    });\n  }\n  const xhr = new XMLHttpRequest();\n\n  return new Promise((resolve, reject) => {\n    // Prevenir múltiples solicitudes simultáneas\n    if (xhr.readyState !== 0) {\n      reject(new Error('Ya hay una solicitud en progreso'));\n      return;\n    }\n\n    xhr.upload.addEventListener('progress', (event) => {\n      if (event.lengthComputable && onProgress) {\n        const progress: UploadProgress = {\n          loaded: event.loaded,\n          total: event.total,\n          percentage: Math.round((event.loaded / event.total) * 100),\n        };\n        onProgress(progress);\n      }\n    });\n\n    xhr.addEventListener('load', () => {\n      if (xhr.status >= 200 && xhr.status < 300) {\n        try {\n          const response = JSON.parse(xhr.responseText);\n          resolve(response);\n        } catch (_) {\n          reject(new Error('Error al parsear la respuesta'));\n        }\n      } else {\n        try {\n          const errorData = JSON.parse(xhr.responseText);\n          reject(new Error(errorData.error || 'Error al subir el archivo'));\n        } catch {\n          reject(new Error(`Error ${xhr.status}: ${xhr.statusText}`));\n        }\n      }\n    });\n\n    xhr.addEventListener('error', () => {\n      reject(new Error('Error de red al subir el archivo'));\n    });\n\n    xhr.addEventListener('abort', () => {\n      reject(new Error('Subida cancelada'));\n    });\n\n    // Configurar timeout para evitar solicitudes colgadas\n    xhr.timeout = 30000; // 30 segundos\n    xhr.addEventListener('timeout', () => {\n      reject(new Error('Tiempo de espera agotado'));\n    });\n\n    try {\n      xhr.open('POST', url);\n      xhr.send(formData);\n    } catch (_) {\n      reject(new Error('Error al iniciar la solicitud'));\n    }\n  });\n};\n"],"mappings":"AAYA,MAAa,EAAa,MACxB,EACA,EACA,EACA,IAC4B,CAC5B,IAAM,EAAW,IAAI,SACrB,EAAS,OAAO,OAAQ,EAAK,CACzB,GACF,OAAO,QAAQ,EAAK,CAAC,SAAS,CAAC,EAAK,KAAW,CAC7C,EAAS,OAAO,EAAK,EAAgB,EACrC,CAEJ,IAAM,EAAM,IAAI,eAEhB,OAAO,IAAI,SAAS,EAAS,IAAW,CAEtC,GAAI,EAAI,aAAe,EAAG,CACxB,EAAW,MAAM,mCAAmC,CAAC,CACrD,OAGF,EAAI,OAAO,iBAAiB,WAAa,GAAU,CAC7C,EAAM,kBAAoB,GAM5B,EALiC,CAC/B,OAAQ,EAAM,OACd,MAAO,EAAM,MACb,WAAY,KAAK,MAAO,EAAM,OAAS,EAAM,MAAS,IAAI,CAC3D,CACmB,EAEtB,CAEF,EAAI,iBAAiB,WAAc,CACjC,GAAI,EAAI,QAAU,KAAO,EAAI,OAAS,IACpC,GAAI,CAEF,EADiB,KAAK,MAAM,EAAI,aAAa,CAC5B,MACP,CACV,EAAW,MAAM,gCAAgC,CAAC,MAGpD,GAAI,CACF,IAAM,EAAY,KAAK,MAAM,EAAI,aAAa,CAC9C,EAAW,MAAM,EAAU,OAAS,4BAA4B,CAAC,MAC3D,CACN,EAAW,MAAM,SAAS,EAAI,OAAO,IAAI,EAAI,aAAa,CAAC,GAG/D,CAEF,EAAI,iBAAiB,YAAe,CAClC,EAAW,MAAM,mCAAmC,CAAC,EACrD,CAEF,EAAI,iBAAiB,YAAe,CAClC,EAAW,MAAM,mBAAmB,CAAC,EACrC,CAGF,EAAI,QAAU,IACd,EAAI,iBAAiB,cAAiB,CACpC,EAAW,MAAM,2BAA2B,CAAC,EAC7C,CAEF,GAAI,CACF,EAAI,KAAK,OAAQ,EAAI,CACrB,EAAI,KAAK,EAAS,MACR,CACV,EAAW,MAAM,gCAAgC,CAAC,GAEpD"}

package/dist/components/controls/dropzone/use-dropzone-state.mjs

@@ -0,0 +1,2 @@
+import{uploadFile as e}from"./upload-service.mjs";import{useCallback as t,useRef as n,useState as r}from"react";const i=(i,a={})=>{let[o,s]=r((()=>{if(!a)return{};if(typeof a==`object`&&!(`name`in a))return a;if(typeof a==`object`&&`name`in a){let e=a;return{[e.name]:{name:e.name,size:e.size,type:e.type,date:e.date,uploaded:e.uploaded??!0,loading:e.loading??!1,url:e.url,error:e.error,progress:e.progress}}}return{}})()),[c,l]=r(!1),u=n(new Set),d=t(e=>{let t={name:e.name,size:e.size,type:e.type,url:``,uploaded:!1,loading:!1,progress:0,date:new Date().toLocaleString(`es-ES`,{timeZone:`Europe/Madrid`,year:`numeric`,month:`2-digit`,day:`2-digit`,hour:`2-digit`,minute:`2-digit`,second:`2-digit`})};return s(n=>({...n,[e.name]:t})),e.name},[]),f=t((e,t)=>{s(n=>({...n,[e]:{...n[e],progress:t,loading:t<100}}))},[]),p=t((e,t)=>{s(n=>({...n,[e]:{...n[e],uploaded:!0,loading:!1,progress:100,url:t}}))},[]),m=t((e,t)=>{s(n=>({...n,[e]:{...n[e],uploaded:!1,loading:!1,progress:0,error:t}}))},[]),h=t(e=>{s(t=>{let n={...t};return delete n[e],n}),u.current.delete(e)},[]),g=t(()=>{s({}),u.current.clear()},[]),_=t(e=>u.current.has(e),[]),v=t(e=>{u.current.add(e)},[]),y=t(e=>{u.current.delete(e)},[]),b=t(async(t,n)=>{let r=d(t);v(r);try{let{body:a}=await e(i,t,n,e=>{f(r,e.percentage)});p(r,a.url)}catch(e){console.error(`Error al subir archivo:`,e),m(r,e instanceof Error?e.message:`Error desconocido`)}finally{y(r)}},[d,v,f,p,m,y,i]);return{files:o,isUploading:c,setIsUploading:l,addFile:d,updateFileProgress:f,markFileAsUploaded:p,markFileAsError:m,removeFile:h,clearFiles:g,isFileUploading:_,addToUploadQueue:v,removeFromUploadQueue:y,uploadFileToServer:b,uploadMultipleFiles:t(async(e,t)=>{if(c){console.warn(`Ya hay una subida en progreso`);return}l(!0);try{for(let n of e)await b(n,t)}finally{l(!1)}},[c,l,b])}};export{i as useDropzoneState};
+//# sourceMappingURL=use-dropzone-state.mjs.map

package/dist/components/controls/dropzone/use-dropzone-state.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-dropzone-state.mjs","names":[],"sources":["../../../../src/components/controls/dropzone/use-dropzone-state.ts"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\nimport type { FileData } from './Dropzone';\nimport { uploadFile } from './upload-service';\n\nexport const useDropzoneState = (\n  url: string,\n  initialFiles: Record<string, FileData> | FileData | null | undefined = {},\n) => {\n  const normalizeInitialFiles = (): Record<string, FileData> => {\n    if (!initialFiles) return {};\n\n    if (typeof initialFiles === 'object' && !('name' in initialFiles)) {\n      return initialFiles as Record<string, FileData>;\n    }\n\n    if (typeof initialFiles === 'object' && 'name' in initialFiles) {\n      const fileData = initialFiles as FileData;\n      return {\n        [fileData.name]: {\n          name: fileData.name,\n          size: fileData.size,\n          type: fileData.type,\n          date: fileData.date,\n          uploaded: fileData.uploaded ?? true,\n          loading: fileData.loading ?? false,\n          url: fileData.url,\n          error: fileData.error,\n          progress: fileData.progress,\n        },\n      };\n    }\n\n    return {};\n  };\n\n  const [files, setFiles] = useState<Record<string, FileData>>(\n    normalizeInitialFiles(),\n  );\n  const [isUploading, setIsUploading] = useState(false);\n  const uploadQueue = useRef<Set<string>>(new Set());\n\n  const addFile = useCallback((file: File) => {\n    const fileData: FileData = {\n      name: file.name,\n      size: file.size,\n      type: file.type,\n      url: '',\n      uploaded: false,\n      loading: false,\n      progress: 0,\n      date: new Date().toLocaleString('es-ES', {\n        timeZone: 'Europe/Madrid',\n        year: 'numeric',\n        month: '2-digit',\n        day: '2-digit',\n        hour: '2-digit',\n        minute: '2-digit',\n        second: '2-digit',\n      }),\n    };\n\n    setFiles((prev) => ({\n      ...prev,\n      [file.name]: fileData,\n    }));\n\n    return file.name;\n  }, []);\n\n  const updateFileProgress = useCallback(\n    (fileName: string, progress: number) => {\n      setFiles((prev) => ({\n        ...prev,\n        [fileName]: {\n          ...prev[fileName],\n          progress,\n          loading: progress < 100,\n        },\n      }));\n    },\n    [],\n  );\n\n  const markFileAsUploaded = useCallback((fileName: string, url: string) => {\n    setFiles((prev) => ({\n      ...prev,\n      [fileName]: {\n        ...prev[fileName],\n        uploaded: true,\n        loading: false,\n        progress: 100,\n        url,\n      },\n    }));\n  }, []);\n\n  const markFileAsError = useCallback((fileName: string, error: string) => {\n    setFiles((prev) => ({\n      ...prev,\n      [fileName]: {\n        ...prev[fileName],\n        uploaded: false,\n        loading: false,\n        progress: 0,\n        error,\n      },\n    }));\n  }, []);\n\n  const removeFile = useCallback((fileName: string) => {\n    setFiles((prev) => {\n      const newFiles = { ...prev };\n      delete newFiles[fileName];\n      return newFiles;\n    });\n    uploadQueue.current.delete(fileName);\n  }, []);\n\n  const clearFiles = useCallback(() => {\n    setFiles({});\n    uploadQueue.current.clear();\n  }, []);\n\n  const isFileUploading = useCallback((fileName: string) => {\n    return uploadQueue.current.has(fileName);\n  }, []);\n\n  const addToUploadQueue = useCallback((fileName: string) => {\n    uploadQueue.current.add(fileName);\n  }, []);\n\n  const removeFromUploadQueue = useCallback((fileName: string) => {\n    uploadQueue.current.delete(fileName);\n  }, []);\n\n  const uploadFileToServer = useCallback(\n    async (file: File, data?: Record<string, unknown>) => {\n      const fileName = addFile(file);\n      addToUploadQueue(fileName);\n\n      try {\n        const { body } = await uploadFile(url, file, data, (progress) => {\n          updateFileProgress(fileName, progress.percentage);\n        });\n\n        markFileAsUploaded(fileName, body.url);\n      } catch (error) {\n        console.error('Error al subir archivo:', error);\n        markFileAsError(\n          fileName,\n          error instanceof Error ? error.message : 'Error desconocido',\n        );\n      } finally {\n        removeFromUploadQueue(fileName);\n      }\n    },\n    [\n      addFile,\n      addToUploadQueue,\n      updateFileProgress,\n      markFileAsUploaded,\n      markFileAsError,\n      removeFromUploadQueue,\n      url,\n    ],\n  );\n\n  const uploadMultipleFiles = useCallback(\n    async (acceptedFiles: File[], data?: Record<string, unknown>) => {\n      if (isUploading) {\n        console.warn('Ya hay una subida en progreso');\n        return;\n      }\n\n      setIsUploading(true);\n\n      try {\n        for (const file of acceptedFiles) {\n          await uploadFileToServer(file, data);\n        }\n      } finally {\n        setIsUploading(false);\n      }\n    },\n    [isUploading, setIsUploading, uploadFileToServer],\n  );\n\n  return {\n    files,\n    isUploading,\n    setIsUploading,\n    addFile,\n    updateFileProgress,\n    markFileAsUploaded,\n    markFileAsError,\n    removeFile,\n    clearFiles,\n    isFileUploading,\n    addToUploadQueue,\n    removeFromUploadQueue,\n    uploadFileToServer,\n    uploadMultipleFiles,\n  };\n};\n"],"mappings":"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"}

package/dist/components/controls/dropzone-files/DropzoneFiles.d.mts

@@ -0,0 +1,57 @@
+import { IconProps } from "../../data-display/icons/icon/Icon.mjs";
+import { IconWrappedProps } from "../../data-display/icons/icon-wrapped/IconWrapped.mjs";
+import { UploadedFileProps } from "../../data-display/uploaded-file/UploadedFile.mjs";
+import "../../data-display/index.mjs";
+import { DropzoneProps, FileData } from "../dropzone/Dropzone.mjs";
+import * as react_jsx_runtime16 from "react/jsx-runtime";
+import { ReactNode } from "react";
+
+//#region src/components/controls/dropzone-files/DropzoneFiles.d.ts
+type DropzoneFilesProps = {
+  label?: ReactNode;
+  description?: ReactNode;
+  error?: ReactNode;
+  title?: ReactNode;
+  subtitle?: ReactNode;
+  hint?: ReactNode;
+  initialFiles?: Record<string, FileData>;
+  maxFiles?: number;
+  accept?: string[];
+  url: string;
+  inputId?: string;
+  fileListHeight?: number | string;
+  classNames?: {
+    dropzoneFiles?: string;
+    root?: string;
+    labelWrapper?: string;
+    label?: string;
+    description?: string;
+    error?: string;
+    fileList?: string;
+    fileItem?: string;
+    uploadedFile?: UploadedFileProps['classNames'];
+    dropzone?: DropzoneProps['classNames'];
+    scrollArea?: {
+      scrollArea?: string;
+    };
+    startIconWrapped?: IconWrappedProps['classNames'];
+    startIcon?: IconProps['classNames'];
+  };
+};
+declare const DropzoneFiles: ({
+  label,
+  description,
+  error,
+  title,
+  subtitle,
+  hint,
+  initialFiles,
+  maxFiles,
+  accept,
+  url,
+  inputId,
+  classNames
+}: DropzoneFilesProps) => react_jsx_runtime16.JSX.Element;
+//#endregion
+export { DropzoneFiles, DropzoneFilesProps };
+//# sourceMappingURL=DropzoneFiles.d.mts.map

package/dist/components/controls/dropzone-files/DropzoneFiles.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropzoneFiles.d.mts","names":[],"sources":["../../../../src/components/controls/dropzone-files/DropzoneFiles.tsx"],"mappings":";;;;;;;;;KAkCY,kBAAA;EACV,KAAA,GAAQ,SAAA;EACR,WAAA,GAAc,SAAA;EACd,KAAA,GAAQ,SAAA;EACR,KAAA,GAAQ,SAAA;EACR,QAAA,GAAW,SAAA;EACX,IAAA,GAAO,SAAA;EACP,YAAA,GAAe,MAAA,SAAe,QAAA;EAC9B,QAAA;EACA,MAAA;EACA,GAAA;EACA,OAAA;EACA,cAAA;EACA,UAAA;IACE,aAAA;IACA,IAAA;IACA,YAAA;IACA,KAAA;IACA,WAAA;IACA,KAAA;IACA,QAAA;IACA,QAAA;IACA,YAAA,GAAe,iBAAA;IACf,QAAA,GAAW,aAAA;IACX,UAAA;MAAe,UAAA;IAAA;IACf,gBAAA,GAAmB,gBAAA;IACnB,SAAA,GAAY,SAAA;EAAA;AAAA;AAAA,cAIH,aAAA;EAAiB,KAAA;EAAA,WAAA;EAAA,KAAA;EAAA,KAAA;EAAA,QAAA;EAAA,IAAA;EAAA,YAAA;EAAA,QAAA;EAAA,MAAA;EAAA,GAAA;EAAA,OAAA;EAAA;AAAA,GAa3B,kBAAA,KAAkB,mBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/controls/dropzone-files/DropzoneFiles.mjs

@@ -0,0 +1,2 @@
+import{Icon as e}from"../../data-display/icons/icon/Icon.mjs";import{IconWrapped as t}from"../../data-display/icons/icon-wrapped/IconWrapped.mjs";import{UploadedFile as n}from"../../data-display/uploaded-file/UploadedFile.mjs";import{Dropzone as r}from"../dropzone/Dropzone.mjs";import{cx as i}from"@mage-ui/styled-system/css";import{dropzoneFiles as a,dropzoneFilesDescription as o,dropzoneFilesDropzone as s,dropzoneFilesError as c,dropzoneFilesFileItem as l,dropzoneFilesFileList as u,dropzoneFilesLabel as d,dropzoneFilesLabelWrapper as f,dropzoneFilesRoot as p,dropzoneFilesUploadedFile as m,dropzoneFilesUploadedFileStartIcon as h,dropzoneFilesUploadedFileStartIconIconRaw as g,dropzoneFilesUploadedFileStartIconIconRawRoot as _,dropzoneFilesUploadedFileStartIconRoot as v,dropzoneFilesUploadedFileStartIconWrapped as y,dropzoneFilesUploadedFileStartIconWrappedRoot as b}from"@mage-ui/styled-system/recipes";import{jsx as x,jsxs as S}from"react/jsx-runtime";import{useId as C}from"react";const w=({label:w,description:T,error:E,title:D,subtitle:O,hint:k,initialFiles:A,maxFiles:j,accept:M,url:N,inputId:P,classNames:F})=>{let I=C(),L=P??I;return S(`div`,{className:i(F?.dropzoneFiles??a(),F?.root??p()),children:[S(`div`,{className:F?.labelWrapper??f(),children:[w&&x(`label`,{htmlFor:L,className:F?.label??d(),children:w}),T&&x(`p`,{className:F?.description??o(),children:T})]}),x(r,{maxFiles:j,accept:M,url:N,initialFiles:A,inputId:L,title:D,subtitle:O,hint:k,classNames:{dropzone:F?.dropzone?.dropzone??s()},children:({files:r,removeFile:i})=>x(`ul`,{className:F?.fileList??u(),children:Object.values(r).map(r=>x(`li`,{className:F?.fileItem??l(),children:x(n,{fileName:r.name,fileSize:`${(r.size/1024).toFixed(1)} KB`,fileDate:r.date,fileType:r.type,url:r.url,onRemove:()=>i(r.name),startSlot:x(t,{classNames:{iconWrapped:F?.startIconWrapped?.iconWrapped??y(),root:F?.startIconWrapped?.root??b()},children:x(e,{name:`mage-uploadedfile-file-attachment-01`,path:`/icons/sprite-mage.svg`,classNames:{icon:F?.startIcon?.icon??h(),root:F?.startIcon?.root??v(),iconRaw:{iconRaw:F?.startIcon?.iconRaw?.iconRaw??g(),root:F?.startIcon?.iconRaw?.root??_()}}})}),classNames:{uploadedFile:F?.uploadedFile?.uploadedFile??m()}},r.name)},r.name))})}),E&&x(`p`,{className:F?.error??c(),children:E})]})};export{w as DropzoneFiles};
+//# sourceMappingURL=DropzoneFiles.mjs.map

package/dist/components/controls/dropzone-files/DropzoneFiles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropzoneFiles.mjs","names":[],"sources":["../../../../src/components/controls/dropzone-files/DropzoneFiles.tsx"],"sourcesContent":["import { useId, type ReactNode } from 'react';\nimport {\n  Dropzone,\n  type DropzoneProps,\n  type FileData,\n} from '../dropzone/Dropzone';\nimport {\n  Icon,\n  type IconProps,\n  IconWrapped,\n  type IconWrappedProps,\n  UploadedFile,\n  type UploadedFileProps,\n} from '@/components/data-display';\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n  dropzoneFiles,\n  dropzoneFilesRoot,\n  dropzoneFilesLabelWrapper,\n  dropzoneFilesLabel,\n  dropzoneFilesDescription,\n  dropzoneFilesFileList,\n  dropzoneFilesFileItem,\n  dropzoneFilesError,\n  dropzoneFilesDropzone,\n  dropzoneFilesUploadedFile,\n  dropzoneFilesUploadedFileStartIconWrapped,\n  dropzoneFilesUploadedFileStartIconWrappedRoot,\n  dropzoneFilesUploadedFileStartIcon,\n  dropzoneFilesUploadedFileStartIconRoot,\n  dropzoneFilesUploadedFileStartIconIconRaw,\n  dropzoneFilesUploadedFileStartIconIconRawRoot,\n} from '@mage-ui/styled-system/recipes';\n\nexport type DropzoneFilesProps = {\n  label?: ReactNode;\n  description?: ReactNode;\n  error?: ReactNode;\n  title?: ReactNode;\n  subtitle?: ReactNode;\n  hint?: ReactNode;\n  initialFiles?: Record<string, FileData>;\n  maxFiles?: number;\n  accept?: string[];\n  url: string;\n  inputId?: string;\n  fileListHeight?: number | string;\n  classNames?: {\n    dropzoneFiles?: string;\n    root?: string;\n    labelWrapper?: string;\n    label?: string;\n    description?: string;\n    error?: string;\n    fileList?: string;\n    fileItem?: string;\n    uploadedFile?: UploadedFileProps['classNames'];\n    dropzone?: DropzoneProps['classNames'];\n    scrollArea?: { scrollArea?: string };\n    startIconWrapped?: IconWrappedProps['classNames'];\n    startIcon?: IconProps['classNames'];\n  };\n};\n\nexport const DropzoneFiles = ({\n  label,\n  description,\n  error,\n  title,\n  subtitle,\n  hint,\n  initialFiles,\n  maxFiles,\n  accept,\n  url,\n  inputId,\n  classNames,\n}: DropzoneFilesProps) => {\n  const generatedId = useId();\n  const groupId = inputId ?? generatedId;\n\n  // TODO: gestionar error \n  // TOOD: gestionar required\n  return (\n    <div\n      className={cx(\n        classNames?.dropzoneFiles ?? dropzoneFiles(),\n        classNames?.root ?? dropzoneFilesRoot(),\n      )}\n    >\n      <div className={classNames?.labelWrapper ?? dropzoneFilesLabelWrapper()}>\n      {/* TODO: label obligatori / hidden */}\n      {label && (\n        <label\n          htmlFor={groupId}\n          className={classNames?.label ?? dropzoneFilesLabel()}\n        >\n          {label}\n        </label>\n      )}\n      {description && (\n        <p className={classNames?.description ?? dropzoneFilesDescription()}>\n          {description}\n        </p>\n      )}</div>\n      <Dropzone\n        maxFiles={maxFiles}\n        accept={accept}\n        url={url}\n        initialFiles={initialFiles}\n        inputId={groupId}\n        title={title}\n        subtitle={subtitle}\n        hint={hint}\n        classNames={{\n          dropzone: classNames?.dropzone?.dropzone ?? dropzoneFilesDropzone(),\n        }}\n      >\n        {({ files, removeFile }) => (\n            <ul className={classNames?.fileList ?? dropzoneFilesFileList()}>\n              {Object.values(files).map((file) => (\n                <li\n                  key={file.name}\n                  className={classNames?.fileItem ?? dropzoneFilesFileItem()}\n                >\n                  <UploadedFile\n                    key={file.name}\n                    fileName={file.name}\n                    fileSize={`${(file.size / 1024).toFixed(1)} KB`}\n                    fileDate={file.date}\n                    fileType={file.type}\n                    url={file.url}\n                    onRemove={() => removeFile(file.name)}\n                    startSlot={\n                      <IconWrapped\n                        classNames={{\n                          iconWrapped:\n                            classNames?.startIconWrapped?.iconWrapped ??\n                            dropzoneFilesUploadedFileStartIconWrapped(),\n                          root:\n                            classNames?.startIconWrapped?.root ??\n                            dropzoneFilesUploadedFileStartIconWrappedRoot(),\n                        }}\n                      >\n                        {/* TODO: mostrar icona segons extensió */}\n                        <Icon\n                          name='mage-uploadedfile-file-attachment-01'\n                          path='/icons/sprite-mage.svg'\n                          classNames={{\n                            icon:\n                              classNames?.startIcon?.icon ??\n                              dropzoneFilesUploadedFileStartIcon(),\n                            root:\n                              classNames?.startIcon?.root ??\n                              dropzoneFilesUploadedFileStartIconRoot(),\n                            iconRaw: {\n                              iconRaw:\n                                classNames?.startIcon?.iconRaw?.iconRaw ??\n                                dropzoneFilesUploadedFileStartIconIconRaw(),\n                              root:\n                                classNames?.startIcon?.iconRaw?.root ??\n                                dropzoneFilesUploadedFileStartIconIconRawRoot(),\n                            },\n                          }}\n                        />\n                      </IconWrapped>\n                    }\n                    classNames={{\n                      uploadedFile:\n                        classNames?.uploadedFile?.uploadedFile ??\n                        dropzoneFilesUploadedFile(),\n                    }}\n                  />\n                </li>\n              ))}\n            </ul>\n        )}\n      </Dropzone>\n      {error && (\n        <p className={classNames?.error ?? dropzoneFilesError()}>{error}</p>\n      )}\n    </div>\n  );\n};\n"],"mappings":"k+BAgEA,MAAa,GAAiB,CAC5B,QACA,cACA,QACA,QACA,WACA,OACA,eACA,WACA,SACA,MACA,UACA,gBACwB,CACxB,IAAM,EAAc,GAAO,CACrB,EAAU,GAAW,EAI3B,OACE,EAAC,MAAA,CACC,UAAW,EACT,GAAY,eAAiB,GAAe,CAC5C,GAAY,MAAQ,GAAmB,CACxC,WAED,EAAC,MAAA,CAAI,UAAW,GAAY,cAAgB,GAA2B,WAEtE,GACC,EAAC,QAAA,CACC,QAAS,EACT,UAAW,GAAY,OAAS,GAAoB,UAEnD,GACK,CAET,GACC,EAAC,IAAA,CAAE,UAAW,GAAY,aAAe,GAA0B,UAChE,GACC,CAAA,EACE,CACR,EAAC,EAAA,CACW,WACF,SACH,MACS,eACd,QAAS,EACF,QACG,WACJ,OACN,WAAY,CACV,SAAU,GAAY,UAAU,UAAY,GAAuB,CACpE,WAEC,CAAE,QAAO,gBACP,EAAC,KAAA,CAAG,UAAW,GAAY,UAAY,GAAuB,UAC3D,OAAO,OAAO,EAAM,CAAC,IAAK,GACzB,EAAC,KAAA,CAEC,UAAW,GAAY,UAAY,GAAuB,UAE1D,EAAC,EAAA,CAEC,SAAU,EAAK,KACf,SAAU,IAAI,EAAK,KAAO,MAAM,QAAQ,EAAE,CAAC,KAC3C,SAAU,EAAK,KACf,SAAU,EAAK,KACf,IAAK,EAAK,IACV,aAAgB,EAAW,EAAK,KAAK,CACrC,UACE,EAAC,EAAA,CACC,WAAY,CACV,YACE,GAAY,kBAAkB,aAC9B,GAA2C,CAC7C,KACE,GAAY,kBAAkB,MAC9B,GAA+C,CAClD,UAGD,EAAC,EAAA,CACC,KAAK,uCACL,KAAK,yBACL,WAAY,CACV,KACE,GAAY,WAAW,MACvB,GAAoC,CACtC,KACE,GAAY,WAAW,MACvB,GAAwC,CAC1C,QAAS,CACP,QACE,GAAY,WAAW,SAAS,SAChC,GAA2C,CAC7C,KACE,GAAY,WAAW,SAAS,MAChC,GAA+C,CAClD,CACF,EACD,EACU,CAEhB,WAAY,CACV,aACE,GAAY,cAAc,cAC1B,GAA2B,CAC9B,EA7CI,EAAK,KA8CV,EAlDG,EAAK,KAmDP,CACL,EACC,EAEA,CACV,GACC,EAAC,IAAA,CAAE,UAAW,GAAY,OAAS,GAAoB,UAAG,GAAU,GAElE"}

package/dist/components/controls/file-input/BaseFileInput.d.mts

@@ -0,0 +1,35 @@
+import { FileInputProps } from "@mantine/core";
+import "react/jsx-runtime";
+import { ReactNode } from "react";
+
+//#region src/components/controls/file-input/BaseFileInput.d.ts
+type BaseFileInputProps = Omit<FileInputProps, 'value' | 'defaultValue' | 'onChange' | 'classNames' | 'valueComponent' | 'multiple'> & {
+  label?: ReactNode;
+  description?: ReactNode;
+  placeholder?: ReactNode;
+  error?: ReactNode;
+  accept?: string;
+  required?: boolean;
+  disabled?: boolean;
+  multiple: boolean;
+  onChange?: (payload: File | File[] | null) => void;
+  valueComponent?: FileInputProps['valueComponent'];
+  classNames?: {
+    fileInput?: string;
+    root?: string;
+    label?: string;
+    required?: string;
+    description?: string;
+    error?: string;
+    wrapper?: string;
+    input?: string;
+    section?: string;
+    placeholder?: string;
+    startIcon?: {
+      icon?: string;
+    };
+  };
+};
+//#endregion
+export { BaseFileInputProps };
+//# sourceMappingURL=BaseFileInput.d.mts.map

package/dist/components/controls/file-input/BaseFileInput.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseFileInput.d.mts","names":[],"sources":["../../../../src/components/controls/file-input/BaseFileInput.tsx"],"mappings":";;;;;KAmBY,kBAAA,GAAqB,IAAA,CAC/B,cAAA;EAQA,KAAA,GAAQ,SAAA;EACR,WAAA,GAAc,SAAA;EACd,WAAA,GAAc,SAAA;EACd,KAAA,GAAQ,SAAA;EACR,MAAA;EACA,QAAA;EACA,QAAA;EACA,QAAA;EACA,QAAA,IAAY,OAAA,EAAS,IAAA,GAAO,IAAA;EAC5B,cAAA,GAAiB,cAAA;EACjB,UAAA;IACE,SAAA;IACA,IAAA;IACA,KAAA;IACA,QAAA;IACA,WAAA;IACA,KAAA;IACA,OAAA;IACA,KAAA;IACA,OAAA;IACA,WAAA;IACA,SAAA;MACE,IAAA;IAAA;EAAA;AAAA"}

package/dist/components/controls/file-input/BaseFileInput.mjs

@@ -0,0 +1,2 @@
+import{Icon as e}from"../../data-display/icons/icon/Icon.mjs";import{cx as t}from"@mage-ui/styled-system/css";import{fileInput as n,fileInputDescription as r,fileInputError as i,fileInputInput as a,fileInputLabel as o,fileInputPlaceholder as s,fileInputRequired as c,fileInputRoot as l,fileInputSection as u,fileInputStartIcon as d,fileInputWrapper as f}from"@mage-ui/styled-system/recipes";import{FileInput as p}from"@mantine/core";import{jsx as m}from"react/jsx-runtime";const h=({name:h,onBlur:g,onFocus:_,onChange:v,label:y,description:b,placeholder:x,error:S,multiple:C,accept:w,required:T,disabled:E,valueComponent:D,classNames:O})=>m(p,{name:h,onBlur:g,onFocus:_,onChange:e=>{v?.(e)},disabled:E,required:T,multiple:C,accept:w,clearable:!0,label:y,description:b,placeholder:x,error:S,valueComponent:D,leftSection:m(e,{name:`mage-dropzone-upload-01`,path:`/icons/sprite-mage.svg`,classNames:{icon:O?.startIcon?.icon??d()}}),classNames:{root:t(O?.fileInput??n(),O?.root??l(),`group`),label:O?.label??o(),required:O?.required??c(),description:O?.description??r(),error:O?.error??i(),wrapper:O?.wrapper??f(),input:t(O?.input??a(),`peer`),section:t(O?.section??u(),`group`),placeholder:O?.placeholder??s()}});export{h as BaseFileInput};
+//# sourceMappingURL=BaseFileInput.mjs.map

package/dist/components/controls/file-input/BaseFileInput.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseFileInput.mjs","names":["MantineFileInput"],"sources":["../../../../src/components/controls/file-input/BaseFileInput.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { cx } from '@mage-ui/styled-system/css';\nimport { Icon } from '@/components/data-display/icons/icon/Icon';\nimport {\n  fileInput,\n  fileInputDescription,\n  fileInputError,\n  fileInputInput,\n  fileInputLabel,\n  fileInputPlaceholder,\n  fileInputRequired,\n  fileInputRoot,\n  fileInputSection,\n  fileInputWrapper,\n  fileInputStartIcon,\n} from '@mage-ui/styled-system/recipes';\nimport type { FileInputProps as MantineFileInputProps } from '@mantine/core';\nimport { FileInput as MantineFileInput } from '@mantine/core';\n\nexport type BaseFileInputProps = Omit<\n  MantineFileInputProps,\n  | 'value'\n  | 'defaultValue'\n  | 'onChange'\n  | 'classNames'\n  | 'valueComponent'\n  | 'multiple'\n> & {\n  label?: ReactNode;\n  description?: ReactNode;\n  placeholder?: ReactNode;\n  error?: ReactNode;\n  accept?: string;\n  required?: boolean;\n  disabled?: boolean;\n  multiple: boolean;\n  onChange?: (payload: File | File[] | null) => void;\n  valueComponent?: MantineFileInputProps['valueComponent'];\n  classNames?: {\n    fileInput?: string;\n    root?: string;\n    label?: string;\n    required?: string;\n    description?: string;\n    error?: string;\n    wrapper?: string;\n    input?: string;\n    section?: string;\n    placeholder?: string;\n    startIcon?: {\n      icon?: string;\n    };\n  };\n};\n\nexport const BaseFileInput = ({\n  name,\n  onBlur,\n  onFocus,\n  onChange,\n  label,\n  description,\n  placeholder,\n  error,\n  multiple,\n  accept,\n  required,\n  disabled,\n  valueComponent,\n  classNames,\n}: BaseFileInputProps) => {\n  return (\n    <MantineFileInput\n      name={name}\n      onBlur={onBlur}\n      onFocus={onFocus}\n      onChange={(payload) => {\n        onChange?.(payload);\n      }}\n      disabled={disabled}\n      required={required}\n      multiple={multiple}\n      accept={accept}\n      clearable={true}\n      label={label}\n      description={description}\n      placeholder={placeholder}\n      error={error}\n      valueComponent={valueComponent}\n      leftSection={\n        <Icon\n          name='mage-dropzone-upload-01'\n          path='/icons/sprite-mage.svg'\n          classNames={{\n            icon: classNames?.startIcon?.icon ?? fileInputStartIcon(),\n          }}\n        />\n      }\n      classNames={{\n        root: cx(\n          classNames?.fileInput ?? fileInput(),\n          classNames?.root ?? fileInputRoot(),\n          'group',\n        ),\n        label: classNames?.label ?? fileInputLabel(),\n        required: classNames?.required ?? fileInputRequired(),\n        description: classNames?.description ?? fileInputDescription(),\n        error: classNames?.error ?? fileInputError(),\n        wrapper: classNames?.wrapper ?? fileInputWrapper(),\n        input: cx(classNames?.input ?? fileInputInput(), 'peer'),\n        section: cx(classNames?.section ?? fileInputSection(), 'group'),\n        placeholder: classNames?.placeholder ?? fileInputPlaceholder(),\n      }}\n    />\n  );\n};\n"],"mappings":"ydAuDA,MAAa,GAAiB,CAC5B,OACA,SACA,UACA,WACA,QACA,cACA,cACA,QACA,WACA,SACA,WACA,WACA,iBACA,gBAGE,EAACA,EAAAA,CACO,OACE,SACC,UACT,SAAW,GAAY,CACrB,IAAW,EAAQ,EAEX,WACA,WACA,WACF,SACR,UAAW,GACJ,QACM,cACA,cACN,QACS,iBAChB,YACE,EAAC,EAAA,CACC,KAAK,0BACL,KAAK,yBACL,WAAY,CACV,KAAM,GAAY,WAAW,MAAQ,GAAoB,CAC1D,EACD,CAEJ,WAAY,CACV,KAAM,EACJ,GAAY,WAAa,GAAW,CACpC,GAAY,MAAQ,GAAe,CACnC,QACD,CACD,MAAO,GAAY,OAAS,GAAgB,CAC5C,SAAU,GAAY,UAAY,GAAmB,CACrD,YAAa,GAAY,aAAe,GAAsB,CAC9D,MAAO,GAAY,OAAS,GAAgB,CAC5C,QAAS,GAAY,SAAW,GAAkB,CAClD,MAAO,EAAG,GAAY,OAAS,GAAgB,CAAE,OAAO,CACxD,QAAS,EAAG,GAAY,SAAW,GAAkB,CAAE,QAAQ,CAC/D,YAAa,GAAY,aAAe,GAAsB,CAC/D,EACD"}

package/dist/components/controls/file-input/FileInput.d.mts

@@ -0,0 +1,24 @@
+import { BaseFileInputProps } from "./BaseFileInput.mjs";
+import * as react_jsx_runtime20 from "react/jsx-runtime";
+
+//#region src/components/controls/file-input/FileInput.d.ts
+type FileInputProps = Omit<BaseFileInputProps, 'multiple' | 'valueComponent' | 'onChange'> & {
+  onChange?: (file: File | null) => void;
+};
+declare const FileInput: ({
+  name,
+  onBlur,
+  onFocus,
+  onChange,
+  label,
+  description,
+  placeholder,
+  error,
+  accept,
+  required,
+  disabled,
+  classNames
+}: FileInputProps) => react_jsx_runtime20.JSX.Element;
+//#endregion
+export { FileInput, FileInputProps };
+//# sourceMappingURL=FileInput.d.mts.map

package/dist/components/controls/file-input/FileInput.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileInput.d.mts","names":[],"sources":["../../../../src/components/controls/file-input/FileInput.tsx"],"mappings":";;;;KAEY,cAAA,GAAiB,IAAA,CAC3B,kBAAA;EAGA,QAAA,IAAY,IAAA,EAAM,IAAA;AAAA;AAAA,cAGP,SAAA;EAAa,IAAA;EAAA,MAAA;EAAA,OAAA;EAAA,QAAA;EAAA,KAAA;EAAA,WAAA;EAAA,WAAA;EAAA,KAAA;EAAA,MAAA;EAAA,QAAA;EAAA,QAAA;EAAA;AAAA,GAavB,cAAA,KAAc,mBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/controls/file-input/FileInput.mjs

@@ -0,0 +1,2 @@
+import{BaseFileInput as e}from"./BaseFileInput.mjs";import{jsx as t}from"react/jsx-runtime";const n=({name:n,onBlur:r,onFocus:i,onChange:a,label:o,description:s,placeholder:c,error:l,accept:u,required:d,disabled:f,classNames:p})=>t(e,{name:n,onBlur:r,onFocus:i,label:o,description:s,placeholder:c,error:l,accept:u,required:d,disabled:f,classNames:p,multiple:!1,onChange:e=>{a?.(e)}});export{n as FileInput};
+//# sourceMappingURL=FileInput.mjs.map

package/dist/components/controls/file-input/FileInput.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileInput.mjs","names":[],"sources":["../../../../src/components/controls/file-input/FileInput.tsx"],"sourcesContent":["import { BaseFileInput, type BaseFileInputProps } from './BaseFileInput';\n\nexport type FileInputProps = Omit<\n  BaseFileInputProps,\n  'multiple' | 'valueComponent' | 'onChange'\n> & {\n  onChange?: (file: File | null) => void;\n};\n\nexport const FileInput = ({\n  name,\n  onBlur,\n  onFocus,\n  onChange,\n  label,\n  description,\n  placeholder,\n  error,\n  accept,\n  required,\n  disabled,\n  classNames,\n}: FileInputProps) => {\n  return (\n    <BaseFileInput\n      name={name}\n      onBlur={onBlur}\n      onFocus={onFocus}\n      label={label}\n      description={description}\n      placeholder={placeholder}\n      error={error}\n      accept={accept}\n      required={required}\n      disabled={disabled}\n      classNames={classNames}\n      multiple={false}\n      onChange={(payload) => {\n        onChange?.(payload as File | null);\n      }}\n    />\n  );\n};\n\n"],"mappings":"4FASA,MAAa,GAAa,CACxB,OACA,SACA,UACA,WACA,QACA,cACA,cACA,QACA,SACA,WACA,WACA,gBAGE,EAAC,EAAA,CACO,OACE,SACC,UACF,QACM,cACA,cACN,QACC,SACE,WACA,WACE,aACZ,SAAU,GACV,SAAW,GAAY,CACrB,IAAW,EAAuB,GAEpC"}