@mage-ui/components 0.0.78 → 0.0.80

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,5 +1,5 @@
1
1
  import { ButtonProps } from "../button/Button.js";
2
- import * as react_jsx_runtime4 from "react/jsx-runtime";
2
+ import * as react_jsx_runtime5 from "react/jsx-runtime";
3
3
 
4
4
  //#region src/components/buttons/button-icon/ButtonIcon.d.ts
5
5
  type ButtonIconProps = ButtonProps & {
@@ -15,7 +15,7 @@ declare const ButtonIcon: ({
15
15
  icon,
16
16
  classNames,
17
17
  ...props
18
- }: ButtonIconProps) => react_jsx_runtime4.JSX.Element;
18
+ }: ButtonIconProps) => react_jsx_runtime5.JSX.Element;
19
19
  //#endregion
20
20
  export { ButtonIcon, ButtonIconProps };
21
21
  //# sourceMappingURL=ButtonIcon.d.ts.map
@@ -15,6 +15,7 @@ type ComboboxProps = Omit<DropdownBaseProps, 'children' | 'onClick' | 'setQuery'
15
15
  }[];
16
16
  creatable?: boolean;
17
17
  classNames?: {
18
+ dropdown?: string;
18
19
  option?: string;
19
20
  empty?: string;
20
21
  create?: string;
@@ -1 +1 @@
1
- {"version":3,"file":"Combobox.d.ts","names":[],"sources":["../../../../src/components/controls/dropdown/Combobox.tsx"],"sourcesContent":[],"mappings":";;;;;;KAgBY,aAAA,GAAgB,KAC1B,qEAGA;;;IAJU,KAAA,EAAA,MAAa;EAAA,CAAA,GAAA,SAAA,EAAA,GAAA,IAAA;SACvB,EAAA;IAD0B,EAAA,EAAA,MAAA,GAAA,MAAA;IAI1B,KAAA,EAAA,MAAA;KAaY;EAAe,SAAA,CAAA,EAAA,OAAA;EAGhB,UAAA,CAoFZ,EAAA;IAAA,MAAA,CAAA,EAAA,MAAA;IApFwB,KAAA,CAAA,EAAA,MAAA;IAAA,MAAA,CAAA,EAAA,MAAA;;QAAA,CAAA,EAAA,MAAA;OAAA,CAAA,EAAA,MAAA;SAAA,CAAA,EAHX,KAAA,CAAM,SAGK;;AAAA,cAAZ,QAAY,EAAA,CAAA;EAAA,aAAA;EAAA,SAAA;EAAA,iBAAA;EAAA,cAAA;EAAA,OAAA;EAAA,OAAA;EAAA,UAAA;EAAA,MAAA;EAAA,KAAA;EAAA,GAAA;AAAA,CAAA,EAWtB,aAXsB,EAAA,GAWT,kBAAA,CAAA,GAAA,CAAA,OAXS"}
1
+ {"version":3,"file":"Combobox.d.ts","names":[],"sources":["../../../../src/components/controls/dropdown/Combobox.tsx"],"sourcesContent":[],"mappings":";;;;;;KAiBY,aAAA,GAAgB,KAC1B,qEAGA;;;IAJU,KAAA,EAAA,MAAa;EAAA,CAAA,GAAA,SAAA,EAAA,GAAA,IAAA;SACvB,EAAA;IAD0B,EAAA,EAAA,MAAA,GAAA,MAAA;IAI1B,KAAA,EAAA,MAAA;KAcY;EAAe,SAAA,CAAA,EAAA,OAAA;EAGhB,UAAA,CAqFZ,EAAA;IAAA,QAAA,CAAA,EAAA,MAAA;IArFwB,MAAA,CAAA,EAAA,MAAA;IAAA,KAAA,CAAA,EAAA,MAAA;IAAA,MAAA,CAAA,EAAA,MAAA;;QAAA,CAAA,EAAA,MAAA;OAAA,CAAA,EAAA,MAAA;SAAA,CAAA,EAHX,KAAA,CAAM,SAGK;;AAAA,cAAZ,QAAY,EAAA,CAAA;EAAA,aAAA;EAAA,SAAA;EAAA,iBAAA;EAAA,cAAA;EAAA,OAAA;EAAA,OAAA;EAAA,UAAA;EAAA,MAAA;EAAA,KAAA;EAAA,GAAA;AAAA,CAAA,EAWtB,aAXsB,EAAA,GAWT,kBAAA,CAAA,GAAA,CAAA,OAXS"}
@@ -1,2 +1,2 @@
1
- import{Icon as e}from"../../data-display/icons/icon/Icon.js";import{DropdownBase as t}from"./DropdownBase.js";import{InputText as n}from"../input-text/InputText.js";import{comboboxEmpty as r,comboboxOption as i,icon as a,inputSection as o,selectSection as s}from"@mage-ui/styled-system/recipes";import{jsx as c,jsxs as l}from"react/jsx-runtime";import{useState as u}from"react";import{cx as d}from"@mage-ui/styled-system/css";const f=({defaultOpened:f=!1,creatable:p,setSelectedOption:m,selectedOption:h,endSlot:g,options:_,classNames:v,create:y,empty:b,...x})=>{let[S,C]=u(h?.value??``),w=(_.every(e=>e.value!==S)?_.filter(e=>e.value.toLowerCase().includes(S.toLowerCase().trim())):_).map(e=>c(t.Option,{value:e.value,active:h?.id===e.id,classNames:{option:v?.option??i()},children:e.value},e.id)),T=()=>p&&S?l(t.Option,{value:S,classNames:{option:v?.create??i({type:`create`})},children:[c(e,{name:`plus`,classNames:a({size:`m`})}),`${y??`Create`} '${S}'`]},S):c(t.Empty,{classNames:{empty:v?.empty??r()},children:b??`Nothing found`}),E=e=>{let t=_.find(t=>t.value===e);!t&&p&&e&&(t={id:`new`,value:e}),m(t)};return c(t,{readOnly:!1,target:c(n,{value:S,classNames:{section:v?.section??d(o(),s())},...x}),selectedOption:h,setQuery:C,setSelectedOption:e=>E(e),endSlot:g,children:w.length>0?w:c(T,{})})};export{f as Combobox};
1
+ import{Icon as e}from"../../data-display/icons/icon/Icon.js";import{DropdownBase as t}from"./DropdownBase.js";import{InputText as n}from"../input-text/InputText.js";import{comboboxEmpty as r,comboboxOption as i,dropdown as a,icon as o,inputSection as s,selectSection as c}from"@mage-ui/styled-system/recipes";import{jsx as l,jsxs as u}from"react/jsx-runtime";import{useState as d}from"react";import{cx as f}from"@mage-ui/styled-system/css";const p=({defaultOpened:p=!1,creatable:m,setSelectedOption:h,selectedOption:g,endSlot:_,options:v,classNames:y,create:b,empty:x,...S})=>{let[C,w]=d(g?.value??``),T=(v.every(e=>e.value!==C)?v.filter(e=>e.value.toLowerCase().includes(C.toLowerCase().trim())):v).map(e=>l(t.Option,{value:e.value,active:g?.id===e.id,classNames:{option:y?.option??i()},children:e.value},e.id)),E=()=>m&&C?u(t.Option,{value:C,classNames:{option:y?.create??i({type:`create`})},children:[l(e,{name:`plus`,classNames:o({size:`m`})}),`${b??`Create`} '${C}'`]},C):l(t.Empty,{classNames:{empty:y?.empty??r()},children:x??`Nothing found`}),D=e=>{let t=v.find(t=>t.value===e);!t&&m&&e&&(t={id:`new`,value:e}),h(t)};return l(t,{readOnly:!1,classNames:{dropdown:f(a(),y?.dropdown)},target:l(n,{value:C,classNames:{section:y?.section??f(s(),c())},...S}),selectedOption:g,setQuery:w,setSelectedOption:e=>D(e),endSlot:_,children:T.length>0?T:l(E,{})})};export{p as Combobox};
2
2
  //# sourceMappingURL=Combobox.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Combobox.js","names":[],"sources":["../../../../src/components/controls/dropdown/Combobox.tsx"],"sourcesContent":["import type React from 'react';\nimport { useState } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n comboboxEmpty,\n comboboxOption,\n icon,\n inputSection,\n selectSection,\n} from '@mage-ui/styled-system/recipes';\nimport { InputText, type InputTextProps } from '@/components/controls';\nimport { Icon } from '@/components/data-display';\n\nimport { DropdownBase, type DropdownBaseProps } from './DropdownBase';\n\nexport type ComboboxProps = Omit<\n DropdownBaseProps,\n 'children' | 'onClick' | 'setQuery' | 'target'\n> &\n InputTextProps & {\n setSelectedOption: (\n option: { id: string | number; value: string } | undefined,\n ) => void;\n options: { id: string | number; value: string }[];\n creatable?: boolean;\n classNames?: {\n option?: string;\n empty?: string;\n create?: string;\n };\n create?: string;\n empty?: string;\n endSlot?: React.ReactNode;\n };\n\nexport const Combobox = ({\n defaultOpened = false,\n creatable,\n setSelectedOption,\n selectedOption,\n endSlot,\n options,\n classNames,\n create,\n empty,\n ...props\n}: ComboboxProps) => {\n const [query, setQuery] = useState(selectedOption?.value ?? '');\n\n const shouldFilterOptions = options.every((item) => item.value !== query);\n const filteredOptions = shouldFilterOptions\n ? options.filter((item) =>\n item.value.toLowerCase().includes(query.toLowerCase().trim()),\n )\n : options;\n\n const dropdownOptions = filteredOptions.map((option) => (\n <DropdownBase.Option\n value={option.value}\n key={option.id}\n active={selectedOption?.id === option.id}\n classNames={{ option: classNames?.option ?? comboboxOption() }}\n >\n {option.value}\n </DropdownBase.Option>\n ));\n\n const MissingOption = () => {\n if (creatable && query) {\n return (\n <DropdownBase.Option\n value={query}\n key={query}\n classNames={{\n option: classNames?.create ?? comboboxOption({ type: 'create' }),\n }}\n >\n <Icon name='plus' classNames={icon({ size: 'm' })} />\n {`${create ?? 'Create'} '${query}'`}\n </DropdownBase.Option>\n );\n }\n return (\n <DropdownBase.Empty\n classNames={{ empty: classNames?.empty ?? comboboxEmpty() }}\n >\n {empty ?? 'Nothing found'}\n </DropdownBase.Empty>\n );\n };\n\n const onChange = (value: string | undefined) => {\n let selected = options.find((item) => item.value === value);\n if (!selected && creatable && value) {\n selected = { id: 'new', value };\n }\n setSelectedOption(selected);\n };\n\n return (\n <DropdownBase\n readOnly={false}\n target={\n <InputText\n value={query}\n classNames={{\n section: classNames?.section ?? cx(inputSection(), selectSection()),\n }}\n {...props}\n />\n }\n selectedOption={selectedOption}\n setQuery={setQuery}\n setSelectedOption={(option) => onChange(option)}\n endSlot={endSlot}\n >\n {dropdownOptions.length > 0 ? dropdownOptions : <MissingOption />}\n </DropdownBase>\n );\n};\n"],"mappings":"0aAoCA,MAAa,GAAY,CACvB,gBAAgB,GAChB,YACA,oBACA,iBACA,UACA,UACA,aACA,SACA,QACA,GAAG,KACgB,CACnB,GAAM,CAAC,EAAO,GAAY,EAAS,GAAgB,OAAS,GAAG,CASzD,GAPsB,EAAQ,MAAO,GAAS,EAAK,QAAU,EAAM,CAErE,EAAQ,OAAQ,GACd,EAAK,MAAM,aAAa,CAAC,SAAS,EAAM,aAAa,CAAC,MAAM,CAAC,CAC9D,CACD,GAEoC,IAAK,GAC3C,EAAC,EAAa,OAAA,CACZ,MAAO,EAAO,MAEd,OAAQ,GAAgB,KAAO,EAAO,GACtC,WAAY,CAAE,OAAQ,GAAY,QAAU,GAAgB,CAAE,UAE7D,EAAO,OAJH,EAAO,GAKQ,CACtB,CAEI,MACA,GAAa,EAEb,EAAC,EAAa,OAAA,CACZ,MAAO,EAEP,WAAY,CACV,OAAQ,GAAY,QAAU,EAAe,CAAE,KAAM,SAAU,CAAC,CACjE,WAED,EAAC,EAAA,CAAK,KAAK,OAAO,WAAY,EAAK,CAAE,KAAM,IAAK,CAAC,EAAI,CACpD,GAAG,GAAU,SAAS,IAAI,EAAM,GAAA,EAN5B,EAOe,CAIxB,EAAC,EAAa,MAAA,CACZ,WAAY,CAAE,MAAO,GAAY,OAAS,GAAe,CAAE,UAE1D,GAAS,iBACS,CAInB,EAAY,GAA8B,CAC9C,IAAI,EAAW,EAAQ,KAAM,GAAS,EAAK,QAAU,EAAM,CACvD,CAAC,GAAY,GAAa,IAC5B,EAAW,CAAE,GAAI,MAAO,QAAO,EAEjC,EAAkB,EAAS,EAG7B,OACE,EAAC,EAAA,CACC,SAAU,GACV,OACE,EAAC,EAAA,CACC,MAAO,EACP,WAAY,CACV,QAAS,GAAY,SAAW,EAAG,GAAc,CAAE,GAAe,CAAC,CACpE,CACD,GAAI,GACJ,CAEY,iBACN,WACV,kBAAoB,GAAW,EAAS,EAAO,CACtC,mBAER,EAAgB,OAAS,EAAI,EAAkB,EAAC,EAAA,EAAA,CAAgB,EACpD"}
1
+ {"version":3,"file":"Combobox.js","names":[],"sources":["../../../../src/components/controls/dropdown/Combobox.tsx"],"sourcesContent":["import type React from 'react';\nimport { useState } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n comboboxEmpty,\n comboboxOption,\n dropdown,\n icon,\n inputSection,\n selectSection,\n} from '@mage-ui/styled-system/recipes';\nimport { InputText, type InputTextProps } from '@/components/controls';\nimport { Icon } from '@/components/data-display';\n\nimport { DropdownBase, type DropdownBaseProps } from './DropdownBase';\n\nexport type ComboboxProps = Omit<\n DropdownBaseProps,\n 'children' | 'onClick' | 'setQuery' | 'target'\n> &\n InputTextProps & {\n setSelectedOption: (\n option: { id: string | number; value: string } | undefined,\n ) => void;\n options: { id: string | number; value: string }[];\n creatable?: boolean;\n classNames?: {\n dropdown?: string;\n option?: string;\n empty?: string;\n create?: string;\n };\n create?: string;\n empty?: string;\n endSlot?: React.ReactNode;\n };\n\nexport const Combobox = ({\n defaultOpened = false,\n creatable,\n setSelectedOption,\n selectedOption,\n endSlot,\n options,\n classNames,\n create,\n empty,\n ...props\n}: ComboboxProps) => {\n const [query, setQuery] = useState(selectedOption?.value ?? '');\n\n const shouldFilterOptions = options.every((item) => item.value !== query);\n const filteredOptions = shouldFilterOptions\n ? options.filter((item) =>\n item.value.toLowerCase().includes(query.toLowerCase().trim()),\n )\n : options;\n\n const dropdownOptions = filteredOptions.map((option) => (\n <DropdownBase.Option\n value={option.value}\n key={option.id}\n active={selectedOption?.id === option.id}\n classNames={{ option: classNames?.option ?? comboboxOption() }}\n >\n {option.value}\n </DropdownBase.Option>\n ));\n\n const MissingOption = () => {\n if (creatable && query) {\n return (\n <DropdownBase.Option\n value={query}\n key={query}\n classNames={{\n option: classNames?.create ?? comboboxOption({ type: 'create' }),\n }}\n >\n <Icon name='plus' classNames={icon({ size: 'm' })} />\n {`${create ?? 'Create'} '${query}'`}\n </DropdownBase.Option>\n );\n }\n return (\n <DropdownBase.Empty\n classNames={{ empty: classNames?.empty ?? comboboxEmpty() }}\n >\n {empty ?? 'Nothing found'}\n </DropdownBase.Empty>\n );\n };\n\n const onChange = (value: string | undefined) => {\n let selected = options.find((item) => item.value === value);\n if (!selected && creatable && value) {\n selected = { id: 'new', value };\n }\n setSelectedOption(selected);\n };\n\n return (\n <DropdownBase\n readOnly={false}\n classNames={{ dropdown: cx(dropdown(), classNames?.dropdown) }}\n target={\n <InputText\n value={query}\n classNames={{\n section: classNames?.section ?? cx(inputSection(), selectSection()),\n }}\n {...props}\n />\n }\n selectedOption={selectedOption}\n setQuery={setQuery}\n setSelectedOption={(option) => onChange(option)}\n endSlot={endSlot}\n >\n {dropdownOptions.length > 0 ? dropdownOptions : <MissingOption />}\n </DropdownBase>\n );\n};\n"],"mappings":"wbAsCA,MAAa,GAAY,CACvB,gBAAgB,GAChB,YACA,oBACA,iBACA,UACA,UACA,aACA,SACA,QACA,GAAG,KACgB,CACnB,GAAM,CAAC,EAAO,GAAY,EAAS,GAAgB,OAAS,GAAG,CASzD,GAPsB,EAAQ,MAAO,GAAS,EAAK,QAAU,EAAM,CAErE,EAAQ,OAAQ,GACd,EAAK,MAAM,aAAa,CAAC,SAAS,EAAM,aAAa,CAAC,MAAM,CAAC,CAC9D,CACD,GAEoC,IAAK,GAC3C,EAAC,EAAa,OAAA,CACZ,MAAO,EAAO,MAEd,OAAQ,GAAgB,KAAO,EAAO,GACtC,WAAY,CAAE,OAAQ,GAAY,QAAU,GAAgB,CAAE,UAE7D,EAAO,OAJH,EAAO,GAKQ,CACtB,CAEI,MACA,GAAa,EAEb,EAAC,EAAa,OAAA,CACZ,MAAO,EAEP,WAAY,CACV,OAAQ,GAAY,QAAU,EAAe,CAAE,KAAM,SAAU,CAAC,CACjE,WAED,EAAC,EAAA,CAAK,KAAK,OAAO,WAAY,EAAK,CAAE,KAAM,IAAK,CAAC,EAAI,CACpD,GAAG,GAAU,SAAS,IAAI,EAAM,GAAA,EAN5B,EAOe,CAIxB,EAAC,EAAa,MAAA,CACZ,WAAY,CAAE,MAAO,GAAY,OAAS,GAAe,CAAE,UAE1D,GAAS,iBACS,CAInB,EAAY,GAA8B,CAC9C,IAAI,EAAW,EAAQ,KAAM,GAAS,EAAK,QAAU,EAAM,CACvD,CAAC,GAAY,GAAa,IAC5B,EAAW,CAAE,GAAI,MAAO,QAAO,EAEjC,EAAkB,EAAS,EAG7B,OACE,EAAC,EAAA,CACC,SAAU,GACV,WAAY,CAAE,SAAU,EAAG,GAAU,CAAE,GAAY,SAAS,CAAE,CAC9D,OACE,EAAC,EAAA,CACC,MAAO,EACP,WAAY,CACV,QAAS,GAAY,SAAW,EAAG,GAAc,CAAE,GAAe,CAAC,CACpE,CACD,GAAI,GACJ,CAEY,iBACN,WACV,kBAAoB,GAAW,EAAS,EAAO,CACtC,mBAER,EAAgB,OAAS,EAAI,EAAkB,EAAC,EAAA,EAAA,CAAgB,EACpD"}
@@ -27,7 +27,6 @@ declare const InputFile: ({
27
27
  classNames,
28
28
  multiple,
29
29
  badgeClassName,
30
- leftSection,
31
30
  ...props
32
31
  }: InputFileProps) => react_jsx_runtime11.JSX.Element;
33
32
  //#endregion
@@ -1 +1 @@
1
- {"version":3,"file":"InputFile.d.ts","names":[],"sources":["../../../../src/components/controls/input-file/InputFile.tsx"],"sourcesContent":[],"mappings":";;;KAmBY,cAAA;;;IAAA,KAAA,CAAA,EAAA,MAAc;IAAA,WAAA,CAAA,EAAA,MAAA;IAiBhB,KAAA,CAAA,EAAA,MAAA;IAAO,OAAA,CAAA,EAAA,MAAA;IAED,KAAM,CAAA,EAAA,MAAA;IACD,OAAA,CAAA,EAAA,MAAA;IAAO,WAAA,CAAA,EAAA,MAAA;IAAI,WAAA,CAAA,EAAA,MAAA;EA4CnB,CAAA;EAmCZ,cAAA,CAAA,EAAA,MAAA;OAnCyB,CAAA,EAAA,MAAA;aAAA,CAAA,EAAA,MAAA;aAAA,CAAA,EAAA,MAAA;UAAA,CAAA,EAAA,OAAA;OAMvB,CAAA,EArDO,IAqDP,GArDc,IAqDd,EAAA,GAAA,IAAA;UAAc,CAAA,EAAA,OAAA;EA6BhB,WAAA,CAAA,EAhFe,KAAA,CAAM,SAgFrB;qBA/EoB,OAAO;;cA4Cf;;;;;;GAMV,mBAAc,mBAAA,CAAA,GAAA,CAAA"}
1
+ {"version":3,"file":"InputFile.d.ts","names":[],"sources":["../../../../src/components/controls/input-file/InputFile.tsx"],"sourcesContent":[],"mappings":";;;KAmBY,cAAA;;;IAAA,KAAA,CAAA,EAAA,MAAc;IAAA,WAAA,CAAA,EAAA,MAAA;IAiBhB,KAAA,CAAA,EAAA,MAAA;IAAO,OAAA,CAAA,EAAA,MAAA;IAED,KAAM,CAAA,EAAA,MAAA;IACD,OAAA,CAAA,EAAA,MAAA;IAAO,WAAA,CAAA,EAAA,MAAA;IAAI,WAAA,CAAA,EAAA,MAAA;EA4CnB,CAAA;EAiCZ,cAAA,CAAA,EAAA,MAAA;OAjCyB,CAAA,EAAA,MAAA;aAAA,CAAA,EAAA,MAAA;aAAA,CAAA,EAAA,MAAA;UAKvB,CAAA,EAAA,OAAA;OAAc,CAAA,EApDP,IAoDO,GApDA,IAoDA,EAAA,GAAA,IAAA;EA4BhB,QAAA,CAAA,EAAA,OAAA;gBA9Ee,KAAA,CAAM;qBACD,OAAO;;cA4Cf;;;;;GAKV,mBAAc,mBAAA,CAAA,GAAA,CAAA"}
@@ -1,2 +1,2 @@
1
- import{Icon as e}from"../../data-display/icons/icon/Icon.js";import{badge as t,icon as n,input as r,inputButton as i,inputDescription as a,inputError as o,inputFileGroup as s,inputFileInput as c,inputFilePlaceholder as l,inputFileSection as u,inputLabel as d,inputRoot as f,inputWrapper as p}from"@mage-ui/styled-system/recipes";import{Badge as m,FileInput as h,Group as g}from"@mantine/core";import{jsx as _}from"react/jsx-runtime";import{cx as v}from"@mage-ui/styled-system/css";const y=({value:e,badgeClassName:n})=>e===null?null:Array.isArray(e)?_(g,{classNames:{root:v(`group`,s())},children:e.map(e=>_(m,{classNames:{root:v(t({status:`neutral`}),n)},children:e.name},e.name))}):_(m,{classNames:{root:v(t({status:`neutral`}),n)},children:e.name}),b=({classNames:t,multiple:s,badgeClassName:m,leftSection:g,...b})=>_(h,{classNames:{root:v(t?.root??f(),`group`),label:t?.label??d(),required:t?.label??d(),description:t?.description??a(),error:t?.error??o(),wrapper:t?.wrapper??p(),input:t?.input??v(r(),c()),section:t?.section??u(),placeholder:t?.placeholder??l()},multiple:s,valueComponent:e=>_(y,{...e,badgeClassName:m??``}),clearable:!0,clearButtonProps:{className:t?.clearButton??i({variant:`ghost`,size:`s`,color:`danger`}),children:_(e,{name:`trash-01`,classNames:n({size:`s`})})},leftSection:g,...b});export{b as InputFile};
1
+ import{Icon as e}from"../../data-display/icons/icon/Icon.js";import{badge as t,icon as n,input as r,inputButton as i,inputDescription as a,inputError as o,inputFileGroup as s,inputFileInput as c,inputFilePlaceholder as l,inputFileSection as u,inputLabel as d,inputRoot as f,inputWrapper as p}from"@mage-ui/styled-system/recipes";import{Badge as m,FileInput as h,Group as g}from"@mantine/core";import{jsx as _}from"react/jsx-runtime";import{cx as v}from"@mage-ui/styled-system/css";const y=({value:e,badgeClassName:n})=>e===null?null:Array.isArray(e)?_(g,{classNames:{root:v(`group`,s())},children:e.map(e=>_(m,{classNames:{root:v(t({status:`neutral`}),n)},children:e.name},e.name))}):_(m,{classNames:{root:v(t({status:`neutral`}),n)},children:e.name}),b=({classNames:t,multiple:s,badgeClassName:m,...g})=>_(h,{classNames:{root:v(t?.root??f(),`group`),label:t?.label??d(),required:t?.label??d(),description:t?.description??a(),error:t?.error??o(),wrapper:t?.wrapper??p(),input:t?.input??v(r(),c()),section:t?.section??u(),placeholder:t?.placeholder??l()},multiple:s,valueComponent:e=>_(y,{...e,badgeClassName:m??``}),clearable:!0,clearButtonProps:{className:t?.clearButton??i({variant:`ghost`,size:`s`,color:`danger`}),children:_(e,{name:`trash-01`,classNames:n({size:`s`})})},...g});export{b as InputFile};
2
2
  //# sourceMappingURL=InputFile.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"InputFile.js","names":["props"],"sources":["../../../../src/components/controls/input-file/InputFile.tsx"],"sourcesContent":["import { cx } from '@mage-ui/styled-system/css';\nimport {\n badge,\n icon,\n input,\n inputButton,\n inputDescription,\n inputError,\n inputFileGroup,\n inputFileInput,\n inputFilePlaceholder,\n inputFileSection,\n inputLabel,\n inputRoot,\n inputWrapper,\n} from '@mage-ui/styled-system/recipes';\nimport { Badge, FileInput, Group } from '@mantine/core';\nimport { Icon } from '@/components/data-display';\n\nexport type InputFileProps = {\n classNames?: {\n root?: string;\n label?: string;\n description?: string;\n error?: string;\n wrapper?: string;\n input?: string;\n section?: string;\n placeholder?: string;\n clearButton?: string;\n };\n badgeClassName?: string;\n label?: string;\n description?: string;\n placeholder?: string;\n multiple?: boolean;\n value?: File | File[] | null;\n required?: boolean;\n leftSection?: React.ReactNode;\n onChange?: (files: File | File[] | null) => void;\n};\n\nconst ValueComponent = ({\n value,\n badgeClassName,\n}: {\n value: File | File[] | null;\n badgeClassName?: string;\n}) => {\n if (value === null) {\n return null;\n }\n\n if (Array.isArray(value)) {\n return (\n <Group\n classNames={{\n root: cx('group', inputFileGroup()),\n }}\n >\n {value.map((file) => (\n <Badge\n classNames={{\n root: cx(badge({ status: 'neutral' }), badgeClassName),\n }}\n key={file.name}\n >\n {file.name}\n </Badge>\n ))}\n </Group>\n );\n }\n\n return (\n <Badge\n classNames={{ root: cx(badge({ status: 'neutral' }), badgeClassName) }}\n >\n {value.name}\n </Badge>\n );\n};\n\nexport const InputFile = ({\n classNames,\n multiple,\n badgeClassName,\n leftSection,\n ...props\n}: InputFileProps) => {\n return (\n <FileInput\n classNames={{\n root: cx(classNames?.root ?? inputRoot(), 'group'),\n label: classNames?.label ?? inputLabel(),\n required: classNames?.label ?? inputLabel(),\n description: classNames?.description ?? inputDescription(),\n error: classNames?.error ?? inputError(),\n wrapper: classNames?.wrapper ?? inputWrapper(),\n input: classNames?.input ?? cx(input(), inputFileInput()),\n section: classNames?.section ?? inputFileSection(),\n placeholder: classNames?.placeholder ?? inputFilePlaceholder(),\n }}\n multiple={multiple}\n valueComponent={(props) => (\n <ValueComponent {...props} badgeClassName={badgeClassName ?? ''} />\n )}\n clearable\n clearButtonProps={{\n className:\n classNames?.clearButton ??\n inputButton({ variant: 'ghost', size: 's', color: 'danger' }),\n children: <Icon name='trash-01' classNames={icon({ size: 's' })} />,\n }}\n leftSection={leftSection}\n {...props}\n />\n );\n};\n"],"mappings":"ieA0CA,MAAM,GAAkB,CACtB,QACA,oBAKI,IAAU,KACL,KAGL,MAAM,QAAQ,EAAM,CAEpB,EAAC,EAAA,CACC,WAAY,CACV,KAAM,EAAG,QAAS,GAAgB,CAAC,CACpC,UAEA,EAAM,IAAK,GACV,EAAC,EAAA,CACC,WAAY,CACV,KAAM,EAAG,EAAM,CAAE,OAAQ,UAAW,CAAC,CAAE,EAAe,CACvD,UAGA,EAAK,MAFD,EAAK,KAGJ,CACR,EACI,CAKV,EAAC,EAAA,CACC,WAAY,CAAE,KAAM,EAAG,EAAM,CAAE,OAAQ,UAAW,CAAC,CAAE,EAAe,CAAE,UAErE,EAAM,MACD,CAIC,GAAa,CACxB,aACA,WACA,iBACA,cACA,GAAG,KAGD,EAAC,EAAA,CACC,WAAY,CACV,KAAM,EAAG,GAAY,MAAQ,GAAW,CAAE,QAAQ,CAClD,MAAO,GAAY,OAAS,GAAY,CACxC,SAAU,GAAY,OAAS,GAAY,CAC3C,YAAa,GAAY,aAAe,GAAkB,CAC1D,MAAO,GAAY,OAAS,GAAY,CACxC,QAAS,GAAY,SAAW,GAAc,CAC9C,MAAO,GAAY,OAAS,EAAG,GAAO,CAAE,GAAgB,CAAC,CACzD,QAAS,GAAY,SAAW,GAAkB,CAClD,YAAa,GAAY,aAAe,GAAsB,CAC/D,CACS,WACV,eAAiB,GACf,EAAC,EAAA,CAAe,GAAIA,EAAO,eAAgB,GAAkB,IAAM,CAErE,UAAA,GACA,iBAAkB,CAChB,UACE,GAAY,aACZ,EAAY,CAAE,QAAS,QAAS,KAAM,IAAK,MAAO,SAAU,CAAC,CAC/D,SAAU,EAAC,EAAA,CAAK,KAAK,WAAW,WAAY,EAAK,CAAE,KAAM,IAAK,CAAC,EAAI,CACpE,CACY,cACb,GAAI,GACJ"}
1
+ {"version":3,"file":"InputFile.js","names":["props"],"sources":["../../../../src/components/controls/input-file/InputFile.tsx"],"sourcesContent":["import { cx } from '@mage-ui/styled-system/css';\nimport {\n badge,\n icon,\n input,\n inputButton,\n inputDescription,\n inputError,\n inputFileGroup,\n inputFileInput,\n inputFilePlaceholder,\n inputFileSection,\n inputLabel,\n inputRoot,\n inputWrapper,\n} from '@mage-ui/styled-system/recipes';\nimport { Badge, FileInput, Group } from '@mantine/core';\nimport { Icon } from '@/components/data-display';\n\nexport type InputFileProps = {\n classNames?: {\n root?: string;\n label?: string;\n description?: string;\n error?: string;\n wrapper?: string;\n input?: string;\n section?: string;\n placeholder?: string;\n clearButton?: string;\n };\n badgeClassName?: string;\n label?: string;\n description?: string;\n placeholder?: string;\n multiple?: boolean;\n value?: File | File[] | null;\n required?: boolean;\n leftSection?: React.ReactNode;\n onChange?: (files: File | File[] | null) => void;\n};\n\nconst ValueComponent = ({\n value,\n badgeClassName,\n}: {\n value: File | File[] | null;\n badgeClassName?: string;\n}) => {\n if (value === null) {\n return null;\n }\n\n if (Array.isArray(value)) {\n return (\n <Group\n classNames={{\n root: cx('group', inputFileGroup()),\n }}\n >\n {value.map((file) => (\n <Badge\n classNames={{\n root: cx(badge({ status: 'neutral' }), badgeClassName),\n }}\n key={file.name}\n >\n {file.name}\n </Badge>\n ))}\n </Group>\n );\n }\n\n return (\n <Badge\n classNames={{ root: cx(badge({ status: 'neutral' }), badgeClassName) }}\n >\n {value.name}\n </Badge>\n );\n};\n\nexport const InputFile = ({\n classNames,\n multiple,\n badgeClassName,\n ...props\n}: InputFileProps) => {\n return (\n <FileInput\n classNames={{\n root: cx(classNames?.root ?? inputRoot(), 'group'),\n label: classNames?.label ?? inputLabel(),\n required: classNames?.label ?? inputLabel(),\n description: classNames?.description ?? inputDescription(),\n error: classNames?.error ?? inputError(),\n wrapper: classNames?.wrapper ?? inputWrapper(),\n input: classNames?.input ?? cx(input(), inputFileInput()),\n section: classNames?.section ?? inputFileSection(),\n placeholder: classNames?.placeholder ?? inputFilePlaceholder(),\n }}\n multiple={multiple}\n valueComponent={(props) => (\n <ValueComponent {...props} badgeClassName={badgeClassName ?? ''} />\n )}\n clearable\n clearButtonProps={{\n className:\n classNames?.clearButton ??\n inputButton({ variant: 'ghost', size: 's', color: 'danger' }),\n children: <Icon name='trash-01' classNames={icon({ size: 's' })} />,\n }}\n {...props}\n />\n );\n};\n"],"mappings":"ieA0CA,MAAM,GAAkB,CACtB,QACA,oBAKI,IAAU,KACL,KAGL,MAAM,QAAQ,EAAM,CAEpB,EAAC,EAAA,CACC,WAAY,CACV,KAAM,EAAG,QAAS,GAAgB,CAAC,CACpC,UAEA,EAAM,IAAK,GACV,EAAC,EAAA,CACC,WAAY,CACV,KAAM,EAAG,EAAM,CAAE,OAAQ,UAAW,CAAC,CAAE,EAAe,CACvD,UAGA,EAAK,MAFD,EAAK,KAGJ,CACR,EACI,CAKV,EAAC,EAAA,CACC,WAAY,CAAE,KAAM,EAAG,EAAM,CAAE,OAAQ,UAAW,CAAC,CAAE,EAAe,CAAE,UAErE,EAAM,MACD,CAIC,GAAa,CACxB,aACA,WACA,iBACA,GAAG,KAGD,EAAC,EAAA,CACC,WAAY,CACV,KAAM,EAAG,GAAY,MAAQ,GAAW,CAAE,QAAQ,CAClD,MAAO,GAAY,OAAS,GAAY,CACxC,SAAU,GAAY,OAAS,GAAY,CAC3C,YAAa,GAAY,aAAe,GAAkB,CAC1D,MAAO,GAAY,OAAS,GAAY,CACxC,QAAS,GAAY,SAAW,GAAc,CAC9C,MAAO,GAAY,OAAS,EAAG,GAAO,CAAE,GAAgB,CAAC,CACzD,QAAS,GAAY,SAAW,GAAkB,CAClD,YAAa,GAAY,aAAe,GAAsB,CAC/D,CACS,WACV,eAAiB,GACf,EAAC,EAAA,CAAe,GAAIA,EAAO,eAAgB,GAAkB,IAAM,CAErE,UAAA,GACA,iBAAkB,CAChB,UACE,GAAY,aACZ,EAAY,CAAE,QAAS,QAAS,KAAM,IAAK,MAAO,SAAU,CAAC,CAC/D,SAAU,EAAC,EAAA,CAAK,KAAK,WAAW,WAAY,EAAK,CAAE,KAAM,IAAK,CAAC,EAAI,CACpE,CACD,GAAI,GACJ"}
@@ -1,4 +1,4 @@
1
- import * as react_jsx_runtime5 from "react/jsx-runtime";
1
+ import * as react_jsx_runtime4 from "react/jsx-runtime";
2
2
  import { ReactNode } from "react";
3
3
 
4
4
  //#region src/components/navigation/breadcrumbs/Breadcrumbs.d.ts
@@ -17,7 +17,7 @@ declare const Breadcrumbs: {
17
17
  separator,
18
18
  children,
19
19
  classNames
20
- }: BreadcrumbsProps): react_jsx_runtime5.JSX.Element;
20
+ }: BreadcrumbsProps): react_jsx_runtime4.JSX.Element;
21
21
  Item: {
22
22
  ({
23
23
  children
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mage-ui/components",
3
- "version": "0.0.78",
3
+ "version": "0.0.80",
4
4
  "private": false,
5
5
  "description": "",
6
6
  "keywords": [],
@@ -26,8 +26,8 @@
26
26
  "rimraf": "^6.0.1",
27
27
  "tsdown": "^0.15.6",
28
28
  "typescript": "^5.9.3",
29
- "@mage-ui/preset": "0.0.78",
30
- "@mage-ui/styled-system": "0.0.78"
29
+ "@mage-ui/preset": "0.0.80",
30
+ "@mage-ui/styled-system": "0.0.80"
31
31
  },
32
32
  "peerDependencies": {
33
33
  "@hookform/resolvers": "^5.2.2",