@mage-ui/components 0.0.75 → 0.0.77

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.
@@ -25,6 +25,7 @@ declare const Select: ({
25
25
  options,
26
26
  classNames,
27
27
  isClearable,
28
+ clearableIcon,
28
29
  ...props
29
30
  }: SelectProps) => react_jsx_runtime10.JSX.Element;
30
31
  //#endregion
@@ -1 +1 @@
1
- {"version":3,"file":"Select.d.ts","names":[],"sources":["../../../../src/components/controls/dropdown/Select.tsx"],"sourcesContent":[],"mappings":";;;;;KAiBY,WAAA,GAAc,KACxB,qEAGA;;;IAJU,KAAA,EAAA,MAAW;EAAA,CAAA,GAAA,SAAA,EAAA,GAAA,IAAA;SACrB,EAAA;IADwB,EAAA,EAAA,MAAA,GAAA,MAAA;IAIxB,KAAA,EAAA,MAAA;EAAc,CAAA,EAAA;EAYH,WA0DZ,CAAA,EAAA,OAAA;EAAA,aAAA,CAAA,EAAA,MAAA;YA1DsB,CAAA,EAAA;IAAA,MAAA,CAAA,EAAA,MAAA;;;AAAA,cAAV,MAAU,EAAA,CAAA;EAAA,aAAA;EAAA,iBAAA;EAAA,cAAA;EAAA,OAAA;EAAA,UAAA;EAAA,WAAA;EAAA,GAAA;AAAA,CAAA,EAQpB,WARoB,EAAA,GAQT,mBAAA,CAAA,GAAA,CAAA,OARS"}
1
+ {"version":3,"file":"Select.d.ts","names":[],"sources":["../../../../src/components/controls/dropdown/Select.tsx"],"sourcesContent":[],"mappings":";;;;;KAiBY,WAAA,GAAc,KACxB,qEAGA;;;IAJU,KAAA,EAAA,MAAW;EAAA,CAAA,GAAA,SAAA,EAAA,GAAA,IAAA;SACrB,EAAA;IADwB,EAAA,EAAA,MAAA,GAAA,MAAA;IAIxB,KAAA,EAAA,MAAA;EAAc,CAAA,EAAA;EAYH,WA4DZ,CAAA,EAAA,OAAA;EAAA,aAAA,CAAA,EAAA,MAAA;YA5DsB,CAAA,EAAA;IAAA,MAAA,CAAA,EAAA,MAAA;;;AAAA,cAAV,MAAU,EAAA,CAAA;EAAA,aAAA;EAAA,iBAAA;EAAA,cAAA;EAAA,OAAA;EAAA,UAAA;EAAA,WAAA;EAAA,aAAA;EAAA,GAAA;AAAA,CAAA,EASpB,WAToB,EAAA,GAST,mBAAA,CAAA,GAAA,CAAA,OATS"}
@@ -1,2 +1,2 @@
1
- import{DropdownBase as e}from"./DropdownBase.js";import{InputText as t}from"../input-text/InputText.js";import{clearSection as n,comboboxOption as r,input as i,inputLabel as a,inputRoot as o,inputSection as s,selectButton as c,selectSection as l}from"@mage-ui/styled-system/recipes";import{jsx 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,setSelectedOption:m,selectedOption:h,options:g,classNames:_,isClearable:v,...y})=>{let[b,x]=d(h?.value??``),S=g.map(t=>u(e.Option,{value:t.value,active:h?.id===t.id,classNames:{option:_?.option??r()},children:t.value},t.id)),C=e=>{let t=g.find(t=>t.value===e);m(t)};return u(e,{readOnly:!0,target:u(t,{readOnly:!0,classNames:{root:_?.root??o(),label:_?.label??a(),input:_?.input??f(i(),c()),section:_?.section??f(s(),v&&b?n():l())},value:b,...y}),selectedOption:h,setQuery:x,setSelectedOption:e=>C(e),width:`target`,isClearable:v,...y,children:S})};export{p as Select};
1
+ import{DropdownBase as e}from"./DropdownBase.js";import{InputText as t}from"../input-text/InputText.js";import{clearSection as n,comboboxOption as r,input as i,inputLabel as a,inputRoot as o,inputSection as s,selectButton as c,selectSection as l}from"@mage-ui/styled-system/recipes";import{jsx 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,setSelectedOption:m,selectedOption:h,options:g,classNames:_,isClearable:v,clearableIcon:y,...b})=>{let[x,S]=d(h?.value??``),C=g.map(t=>u(e.Option,{value:t.value,active:h?.id===t.id,classNames:{option:_?.option??r()},children:t.value},t.id)),w=e=>{let t=g.find(t=>t.value===e);m(t)};return u(e,{readOnly:!0,target:u(t,{readOnly:!0,classNames:{root:_?.root??o(),label:_?.label??a(),input:_?.input??f(i(),c()),section:_?.section??f(s(),v&&x?n():l())},value:x,...b}),selectedOption:h,setQuery:S,setSelectedOption:e=>w(e),width:`target`,isClearable:v,clearableIcon:y,...b,children:C})};export{p as Select};
2
2
  //# sourceMappingURL=Select.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Select.js","names":[],"sources":["../../../../src/components/controls/dropdown/Select.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n clearSection,\n comboboxOption,\n input,\n inputLabel,\n inputRoot,\n inputSection,\n selectButton,\n selectSection,\n} from '@mage-ui/styled-system/recipes';\nimport { InputText, type InputTextProps } from '@/components/controls';\n\nimport { DropdownBase, type DropdownBaseProps } from './DropdownBase';\n\nexport type SelectProps = 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 isClearable?: boolean;\n clearableIcon?: string;\n classNames?: {\n option?: string;\n };\n };\n\nexport const Select = ({\n defaultOpened = false,\n setSelectedOption,\n selectedOption,\n options,\n classNames,\n isClearable,\n ...props\n}: SelectProps) => {\n const [query, setQuery] = useState(selectedOption?.value ?? '');\n\n const dropdownOptions = options.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 onChange = (value: string | undefined) => {\n const selected = options.find((item) => item.value === value);\n setSelectedOption(selected);\n };\n\n return (\n <DropdownBase\n readOnly={true}\n target={\n <InputText\n readOnly\n classNames={{\n root: classNames?.root ?? inputRoot(),\n label: classNames?.label ?? inputLabel(),\n input: classNames?.input ?? cx(input(), selectButton()),\n section:\n classNames?.section ??\n cx(\n inputSection(),\n isClearable && query ? clearSection() : selectSection(),\n ),\n }}\n value={query}\n {...props}\n />\n }\n selectedOption={selectedOption}\n setQuery={setQuery}\n setSelectedOption={(option) => onChange(option)}\n width='target'\n isClearable={isClearable}\n {...props}\n >\n {dropdownOptions}\n </DropdownBase>\n );\n};\n"],"mappings":"oZAiCA,MAAa,GAAU,CACrB,gBAAgB,GAChB,oBACA,iBACA,UACA,aACA,cACA,GAAG,KACc,CACjB,GAAM,CAAC,EAAO,GAAY,EAAS,GAAgB,OAAS,GAAG,CAEzD,EAAkB,EAAQ,IAAK,GACnC,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,EAAY,GAA8B,CAC9C,IAAM,EAAW,EAAQ,KAAM,GAAS,EAAK,QAAU,EAAM,CAC7D,EAAkB,EAAS,EAG7B,OACE,EAAC,EAAA,CACC,SAAU,GACV,OACE,EAAC,EAAA,CACC,SAAA,GACA,WAAY,CACV,KAAM,GAAY,MAAQ,GAAW,CACrC,MAAO,GAAY,OAAS,GAAY,CACxC,MAAO,GAAY,OAAS,EAAG,GAAO,CAAE,GAAc,CAAC,CACvD,QACE,GAAY,SACZ,EACE,GAAc,CACd,GAAe,EAAQ,GAAc,CAAG,GAAe,CACxD,CACJ,CACD,MAAO,EACP,GAAI,GACJ,CAEY,iBACN,WACV,kBAAoB,GAAW,EAAS,EAAO,CAC/C,MAAM,SACO,cACb,GAAI,WAEH,GACY"}
1
+ {"version":3,"file":"Select.js","names":[],"sources":["../../../../src/components/controls/dropdown/Select.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n clearSection,\n comboboxOption,\n input,\n inputLabel,\n inputRoot,\n inputSection,\n selectButton,\n selectSection,\n} from '@mage-ui/styled-system/recipes';\nimport { InputText, type InputTextProps } from '@/components/controls';\n\nimport { DropdownBase, type DropdownBaseProps } from './DropdownBase';\n\nexport type SelectProps = 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 isClearable?: boolean;\n clearableIcon?: string;\n classNames?: {\n option?: string;\n };\n };\n\nexport const Select = ({\n defaultOpened = false,\n setSelectedOption,\n selectedOption,\n options,\n classNames,\n isClearable,\n clearableIcon,\n ...props\n}: SelectProps) => {\n const [query, setQuery] = useState(selectedOption?.value ?? '');\n\n const dropdownOptions = options.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 onChange = (value: string | undefined) => {\n const selected = options.find((item) => item.value === value);\n setSelectedOption(selected);\n };\n\n return (\n <DropdownBase\n readOnly={true}\n target={\n <InputText\n readOnly\n classNames={{\n root: classNames?.root ?? inputRoot(),\n label: classNames?.label ?? inputLabel(),\n input: classNames?.input ?? cx(input(), selectButton()),\n section:\n classNames?.section ??\n cx(\n inputSection(),\n isClearable && query ? clearSection() : selectSection(),\n ),\n }}\n value={query}\n {...props}\n />\n }\n selectedOption={selectedOption}\n setQuery={setQuery}\n setSelectedOption={(option) => onChange(option)}\n width='target'\n isClearable={isClearable}\n clearableIcon={clearableIcon}\n {...props}\n >\n {dropdownOptions}\n </DropdownBase>\n );\n};\n"],"mappings":"oZAiCA,MAAa,GAAU,CACrB,gBAAgB,GAChB,oBACA,iBACA,UACA,aACA,cACA,gBACA,GAAG,KACc,CACjB,GAAM,CAAC,EAAO,GAAY,EAAS,GAAgB,OAAS,GAAG,CAEzD,EAAkB,EAAQ,IAAK,GACnC,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,EAAY,GAA8B,CAC9C,IAAM,EAAW,EAAQ,KAAM,GAAS,EAAK,QAAU,EAAM,CAC7D,EAAkB,EAAS,EAG7B,OACE,EAAC,EAAA,CACC,SAAU,GACV,OACE,EAAC,EAAA,CACC,SAAA,GACA,WAAY,CACV,KAAM,GAAY,MAAQ,GAAW,CACrC,MAAO,GAAY,OAAS,GAAY,CACxC,MAAO,GAAY,OAAS,EAAG,GAAO,CAAE,GAAc,CAAC,CACvD,QACE,GAAY,SACZ,EACE,GAAc,CACd,GAAe,EAAQ,GAAc,CAAG,GAAe,CACxD,CACJ,CACD,MAAO,EACP,GAAI,GACJ,CAEY,iBACN,WACV,kBAAoB,GAAW,EAAS,EAAO,CAC/C,MAAM,SACO,cACE,gBACf,GAAI,WAEH,GACY"}
@@ -20,6 +20,7 @@ type InputFileProps = {
20
20
  multiple?: boolean;
21
21
  value?: File | File[] | null;
22
22
  required?: boolean;
23
+ leftSection?: React.ReactNode;
23
24
  onChange?: (files: File | File[] | null) => void;
24
25
  };
25
26
  declare const InputFile: ({
@@ -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;IAEI,KAAA,CAAA,EAAA,MAAA;IAAO,OAAA,CAAA,EAAA,MAAA;IAAI,WAAA,CAAA,EAAA,MAAA;IA4CnB,WAkCZ,CAAA,EAAA,MAAA;EAAA,CAAA;gBAlCyB,CAAA,EAAA,MAAA;OAAA,CAAA,EAAA,MAAA;aAAA,CAAA,EAAA,MAAA;aAKvB,CAAA,EAAA,MAAA;UAAc,CAAA,EAAA,OAAA;EA6BhB,KAAA,CAAA,EAhFS,IAgFT,GAhFgB,IAgFhB,EAAA,GAAA,IAAA;;qBA9EoB,OAAO;;cA4Cf;;;;;GAKV,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,...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()},leftSection:_(e,{name:`upload-02`,classNames:n({size:`m`})}),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};
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 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 leftSection={<Icon name='upload-02' classNames={icon({ size: 'm' })} />}\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":"ieAyCA,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,CACD,YAAa,EAAC,EAAA,CAAK,KAAK,YAAY,WAAY,EAAK,CAAE,KAAM,IAAK,CAAC,EAAI,CAC7D,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
+ {"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mage-ui/components",
3
- "version": "0.0.75",
3
+ "version": "0.0.77",
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.75",
30
- "@mage-ui/styled-system": "0.0.75"
29
+ "@mage-ui/preset": "0.0.77",
30
+ "@mage-ui/styled-system": "0.0.77"
31
31
  },
32
32
  "peerDependencies": {
33
33
  "@hookform/resolvers": "^5.2.2",