@mage-ui/components 0.0.98 → 1.0.3

package/dist/components/buttons/button/Button.d.mts

@@ -0,0 +1,27 @@
+import { ButtonVariantProps } from "@mage-ui/styled-system/recipes";
+import * as react_jsx_runtime1 from "react/jsx-runtime";
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+
+//#region src/components/buttons/button/Button.d.ts
+type ButtonProps = Omit<ComponentPropsWithoutRef<'button'>, 'style'> & {
+  classNames?: {
+    button?: string;
+    root?: string;
+    inner?: string;
+    label?: string;
+    section?: string;
+  };
+  startSlot?: ReactNode;
+  endSlot?: ReactNode;
+  children?: ReactNode;
+} & ButtonVariantProps;
+declare const Button: ({
+  classNames,
+  children,
+  startSlot,
+  endSlot,
+  ...props
+}: ButtonProps) => react_jsx_runtime1.JSX.Element;
+//#endregion
+export { Button, ButtonProps };
+//# sourceMappingURL=Button.d.mts.map

package/dist/components/buttons/button/Button.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.mts","names":[],"sources":["../../../../src/components/buttons/button/Button.tsx"],"mappings":";;;;;KAaY,WAAA,GAAc,IAAA,CAAK,wBAAA;EAC7B,UAAA;IACE,MAAA;IACA,IAAA;IACA,KAAA;IACA,KAAA;IACA,OAAA;EAAA;EAEF,SAAA,GAAY,SAAA;EACZ,OAAA,GAAU,SAAA;EACV,QAAA,GAAW,SAAA;AAAA,IACT,kBAAA;AAAA,cAES,MAAA;EAAU,UAAA;EAAA,QAAA;EAAA,SAAA;EAAA,OAAA;EAAA,GAAA;AAAA,GAMpB,WAAA,KAAW,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/buttons/button/Button.mjs

@@ -0,0 +1,2 @@
+import{cx as e}from"@mage-ui/styled-system/css";import{button as t,buttonInner as n,buttonLabel as r,buttonRoot as i,buttonSection as a}from"@mage-ui/styled-system/recipes";import{Button as o}from"@mantine/core";import{jsx as s}from"react/jsx-runtime";const c=({classNames:c,children:l,startSlot:u,endSlot:d,...f})=>s(o,{classNames:{inner:c?.inner??n(),label:c?.label??r(),root:e(c?.button??t(),c?.root??i()),section:c?.section??a()},leftSection:u,rightSection:d,...f,children:l});export{c as Button};
+//# sourceMappingURL=Button.mjs.map

package/dist/components/buttons/button/Button.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.mjs","names":["Button","MantineButton"],"sources":["../../../../src/components/buttons/button/Button.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n  type ButtonVariantProps,\n  button,\n  buttonInner,\n  buttonLabel,\n  buttonRoot,\n  buttonSection,\n} from '@mage-ui/styled-system/recipes';\nimport { Button as MantineButton } from '@mantine/core';\n\nexport type ButtonProps = Omit<ComponentPropsWithoutRef<'button'>, 'style'> & {\n  classNames?: {\n    button?: string;\n    root?: string;\n    inner?: string;\n    label?: string;\n    section?: string;\n  };\n  startSlot?: ReactNode;\n  endSlot?: ReactNode;\n  children?: ReactNode;\n} & ButtonVariantProps;\n\nexport const Button = ({\n  classNames,\n  children,\n  startSlot,\n  endSlot,\n  ...props\n}: ButtonProps) => {\n  return (\n    <MantineButton\n      classNames={{\n        inner: classNames?.inner ?? buttonInner(),\n        label: classNames?.label ?? buttonLabel(),\n        root: cx(\n          classNames?.button ?? button(),\n          classNames?.root ?? buttonRoot(),\n        ),\n        section: classNames?.section ?? buttonSection(),\n      }}\n      leftSection={startSlot}\n      rightSection={endSlot}\n      {...props}\n    >\n      {children}\n    </MantineButton>\n  );\n};\n"],"mappings":"4PA0BA,MAAaA,GAAU,CACrB,aACA,WACA,YACA,UACA,GAAG,KAGD,EAACC,EAAAA,CACC,WAAY,CACV,MAAO,GAAY,OAAS,GAAa,CACzC,MAAO,GAAY,OAAS,GAAa,CACzC,KAAM,EACJ,GAAY,QAAU,GAAQ,CAC9B,GAAY,MAAQ,GAAY,CACjC,CACD,QAAS,GAAY,SAAW,GAAe,CAChD,CACD,YAAa,EACb,aAAc,EACd,GAAI,EAEH,YACa"}

package/dist/components/buttons/button-action/ButtonAction.d.mts

@@ -0,0 +1,31 @@
+import { ButtonProps } from "../button/Button.mjs";
+import * as react_jsx_runtime2 from "react/jsx-runtime";
+import { ReactNode } from "react";
+
+//#region src/components/buttons/button-action/ButtonAction.d.ts
+type ButtonActionProps = Omit<ButtonProps, 'classNames'> & {
+  classNames?: Omit<NonNullable<ButtonProps['classNames']>, 'button'> & {
+    buttonAction?: string;
+    loader?: string;
+  };
+  loading: boolean;
+  loader?: ReactNode;
+  loadingText?: string;
+  successText?: string;
+  successDuration?: number;
+};
+declare const ButtonAction: ({
+  classNames,
+  startSlot,
+  endSlot,
+  children,
+  loading,
+  loader,
+  loadingText,
+  successText,
+  successDuration,
+  ...props
+}: ButtonActionProps) => react_jsx_runtime2.JSX.Element;
+//#endregion
+export { ButtonAction, ButtonActionProps };
+//# sourceMappingURL=ButtonAction.d.mts.map

package/dist/components/buttons/button-action/ButtonAction.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonAction.d.mts","names":[],"sources":["../../../../src/components/buttons/button-action/ButtonAction.tsx"],"mappings":";;;;;KAqBY,iBAAA,GAAoB,IAAA,CAAK,WAAA;EACnC,UAAA,GAAa,IAAA,CAAK,WAAA,CAAY,WAAA;IAC5B,YAAA;IACA,MAAA;EAAA;EAEF,OAAA;EACA,MAAA,GAAS,SAAA;EACT,WAAA;EACA,WAAA;EACA,eAAA;AAAA;AAAA,cAwEW,YAAA;EAAgB,UAAA;EAAA,SAAA;EAAA,OAAA;EAAA,QAAA;EAAA,OAAA;EAAA,MAAA;EAAA,WAAA;EAAA,WAAA;EAAA,eAAA;EAAA,GAAA;AAAA,GAW1B,iBAAA,KAAiB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/buttons/button-action/ButtonAction.mjs

@@ -0,0 +1,2 @@
+import{VisuallyHidden as e}from"../../misc/visually-hidden/VisuallyHidden.mjs";import{cx as t}from"@mage-ui/styled-system/css";import{buttonAction as n,buttonActionInner as r,buttonActionLabel as i,buttonActionLoader as a,buttonActionRoot as o,buttonActionSection as s}from"@mage-ui/styled-system/recipes";import{Button as c}from"@mantine/core";import{jsx as l,jsxs as u}from"react/jsx-runtime";import{useEffect as d,useEffectEvent as f,useRef as p,useState as m}from"react";const h=({loading:e,successText:t,successDuration:n=2e3})=>{let[r,i]=m(!1),a=p(e),o=f(()=>{if(!t)return;i(!0);let e=setTimeout(()=>{i(!1)},n);return()=>clearTimeout(e)});return d(()=>{a.current&&!e&&o(),a.current=e},[e,o]),e?`loading`:r?`success`:`idle`},g=(e,{loadingText:t,successText:n,children:r})=>({loading:{content:t??r,message:t},success:{content:n,message:n},idle:{content:r,message:null}})[e],_=({classNames:d,startSlot:f,endSlot:p,children:m,loading:_,loader:v,loadingText:y,successText:b,successDuration:x,...S})=>{let C=h({loading:_,successText:b,successDuration:x}),{content:w,message:T}=g(C,{loadingText:y,successText:b,children:m}),E=[`loading`,`success`].includes(C);return u(c,{classNames:{inner:d?.inner??r(),label:d?.label??i(),root:t(d?.buttonAction??n(),d?.root??o()),loader:d?.loader??a(),section:d?.section??s()},leftSection:f,rightSection:p,loading:_,disabled:E,"aria-busy":E,...S,children:[w,v&&v,l(e,{"aria-live":`polite`,children:T})]})};export{_ as ButtonAction};
+//# sourceMappingURL=ButtonAction.mjs.map

package/dist/components/buttons/button-action/ButtonAction.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonAction.mjs","names":["MantineButton","VisuallyHidden"],"sources":["../../../../src/components/buttons/button-action/ButtonAction.tsx"],"sourcesContent":["import {\n  type ReactNode,\n  useEffect,\n  useEffectEvent,\n  useRef,\n  useState,\n} from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n  buttonAction,\n  buttonActionInner,\n  buttonActionLabel,\n  buttonActionLoader,\n  buttonActionRoot,\n  buttonActionSection,\n} from '@mage-ui/styled-system/recipes';\nimport { Button as MantineButton } from '@mantine/core';\nimport type { ButtonProps } from '@/components/buttons/button/Button';\nimport { VisuallyHidden } from '@/components/misc/visually-hidden/VisuallyHidden';\n\nexport type ButtonActionProps = Omit<ButtonProps, 'classNames'> & {\n  classNames?: Omit<NonNullable<ButtonProps['classNames']>, 'button'> & {\n    buttonAction?: string;\n    loader?: string;\n  };\n  loading: boolean;\n  loader?: ReactNode;\n  loadingText?: string;\n  successText?: string;\n  successDuration?: number;\n};\n\ntype ButtonActionStatus = 'idle' | 'loading' | 'success';\n\nconst useButtonActionState = ({\n  loading,\n  successText,\n  successDuration = 2000,\n}: {\n  loading: boolean;\n  successText?: string;\n  successDuration?: number;\n}) => {\n  const [showSuccess, setShowSuccess] = useState(false);\n  const prevLoadingRef = useRef(loading);\n\n  const triggerSuccess = useEffectEvent(() => {\n    if (!successText) return;\n    setShowSuccess(true);\n    const timer = setTimeout(() => {\n      setShowSuccess(false);\n    }, successDuration);\n    return () => clearTimeout(timer);\n  });\n\n  useEffect(() => {\n    if (prevLoadingRef.current && !loading) {\n      triggerSuccess();\n    }\n    prevLoadingRef.current = loading;\n  }, [loading, triggerSuccess]);\n\n  const status: ButtonActionStatus = loading\n    ? 'loading'\n    : showSuccess\n    ? 'success'\n    : 'idle';\n\n  return status;\n};\n\nconst getButtonContent = (\n  status: ButtonActionStatus,\n  {\n    loadingText,\n    successText,\n    children,\n  }: {\n    loadingText?: string;\n    successText?: string;\n    children?: ReactNode;\n  },\n) => {\n  const state = {\n    loading: {\n      content: loadingText ?? children,\n      message: loadingText,\n    },\n    success: {\n      content: successText,\n      message: successText,\n    },\n    idle: {\n      content: children,\n      message: null,\n    },\n  };\n\n  return state[status];\n};\n\nexport const ButtonAction = ({\n  classNames,\n  startSlot,\n  endSlot,\n  children,\n  loading,\n  loader,\n  loadingText,\n  successText,\n  successDuration,\n  ...props\n}: ButtonActionProps) => {\n  const status = useButtonActionState({\n    loading,\n    successText,\n    successDuration,\n  });\n\n  const { content, message } = getButtonContent(status, {\n    loadingText,\n    successText,\n    children,\n  });\n\n  const disabled = ['loading', 'success'].includes(status);\n\n  return (\n    <MantineButton\n      classNames={{\n        inner: classNames?.inner ?? buttonActionInner(),\n        label: classNames?.label ?? buttonActionLabel(),\n        root: cx(\n          classNames?.buttonAction ?? buttonAction(),\n          classNames?.root ?? buttonActionRoot(),\n        ),\n        loader: classNames?.loader ?? buttonActionLoader(),\n        section: classNames?.section ?? buttonActionSection(),\n      }}\n      leftSection={startSlot}\n      rightSection={endSlot}\n      loading={loading}\n      disabled={disabled}\n      aria-busy={disabled}\n      {...props}\n    >\n      {content}\n      {/* TODO: preguntar si el slot loader se mostrará desde fuera siempre o poner uno interno por defecto (como autocomplete) */}\n      {/* TODO: mostrar o barra de carga o icono animado, los dos a la vez no. ¿Componente a banda? */}\n      {loader && loader}\n\n      <VisuallyHidden aria-live='polite'>{message}</VisuallyHidden>\n    </MantineButton>\n  );\n};\n"],"mappings":"2dAmCA,MAAM,GAAwB,CAC5B,UACA,cACA,kBAAkB,OAKd,CACJ,GAAM,CAAC,EAAa,GAAkB,EAAS,GAAM,CAC/C,EAAiB,EAAO,EAAQ,CAEhC,EAAiB,MAAqB,CAC1C,GAAI,CAAC,EAAa,OAClB,EAAe,GAAK,CACpB,IAAM,EAAQ,eAAiB,CAC7B,EAAe,GAAM,EACpB,EAAgB,CACnB,UAAa,aAAa,EAAM,EAChC,CAeF,OAbA,MAAgB,CACV,EAAe,SAAW,CAAC,GAC7B,GAAgB,CAElB,EAAe,QAAU,GACxB,CAAC,EAAS,EAAe,CAAC,CAEM,EAC/B,UACA,EACA,UACA,QAKA,GACJ,EACA,CACE,cACA,cACA,eAOY,CACZ,QAAS,CACP,QAAS,GAAe,EACxB,QAAS,EACV,CACD,QAAS,CACP,QAAS,EACT,QAAS,EACV,CACD,KAAM,CACJ,QAAS,EACT,QAAS,KACV,CACF,EAEY,GAGF,GAAgB,CAC3B,aACA,YACA,UACA,WACA,UACA,SACA,cACA,cACA,kBACA,GAAG,KACoB,CACvB,IAAM,EAAS,EAAqB,CAClC,UACA,cACA,kBACD,CAAC,CAEI,CAAE,UAAS,WAAY,EAAiB,EAAQ,CACpD,cACA,cACA,WACD,CAAC,CAEI,EAAW,CAAC,UAAW,UAAU,CAAC,SAAS,EAAO,CAExD,OACE,EAACA,EAAAA,CACC,WAAY,CACV,MAAO,GAAY,OAAS,GAAmB,CAC/C,MAAO,GAAY,OAAS,GAAmB,CAC/C,KAAM,EACJ,GAAY,cAAgB,GAAc,CAC1C,GAAY,MAAQ,GAAkB,CACvC,CACD,OAAQ,GAAY,QAAU,GAAoB,CAClD,QAAS,GAAY,SAAW,GAAqB,CACtD,CACD,YAAa,EACb,aAAc,EACL,UACC,WACV,YAAW,EACX,GAAI,YAEH,EAGA,GAAU,EAEX,EAACC,EAAAA,CAAe,YAAU,kBAAU,GAAyB,GAC/C"}

package/dist/components/buttons/button-icon/ButtonIcon.d.mts

@@ -0,0 +1,29 @@
+import * as react_jsx_runtime3 from "react/jsx-runtime";
+import { ComponentProps } from "react";
+
+//#region src/components/buttons/button-icon/ButtonIcon.d.ts
+type ButtonIconProps = ComponentProps<'button'> & {
+  name: string;
+  path: string;
+  label: string;
+  classNames?: {
+    buttonIcon?: string;
+    root?: string;
+    icon?: string;
+    iconRaw?: {
+      iconRaw?: string;
+      root?: string;
+    };
+  };
+};
+declare const ButtonIcon: ({
+  label,
+  name,
+  path,
+  onClick,
+  disabled,
+  classNames
+}: ButtonIconProps) => react_jsx_runtime3.JSX.Element;
+//#endregion
+export { ButtonIcon, ButtonIconProps };
+//# sourceMappingURL=ButtonIcon.d.mts.map

package/dist/components/buttons/button-icon/ButtonIcon.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonIcon.d.mts","names":[],"sources":["../../../../src/components/buttons/button-icon/ButtonIcon.tsx"],"mappings":";;;;KAcY,eAAA,GAAkB,cAAA;EAC5B,IAAA;EACA,IAAA;EACA,KAAA;EACA,UAAA;IACE,UAAA;IACA,IAAA;IACA,IAAA;IACA,OAAA;MACE,OAAA;MACA,IAAA;IAAA;EAAA;AAAA;AAAA,cAKO,UAAA;EAAc,KAAA;EAAA,IAAA;EAAA,IAAA;EAAA,OAAA;EAAA,QAAA;EAAA;AAAA,GAOxB,eAAA,KAAe,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/buttons/button-icon/ButtonIcon.mjs

@@ -0,0 +1,2 @@
+import{VisuallyHidden as e}from"../../misc/visually-hidden/VisuallyHidden.mjs";import{IconRaw as t}from"../../data-display/icons/icon-raw/IconRaw.mjs";import{cx as n}from"@mage-ui/styled-system/css";import{buttonIcon as r,buttonIconIcon as i,buttonIconIconRaw as a,buttonIconIconRawRoot as o,buttonIconRoot as s}from"@mage-ui/styled-system/recipes";import{ActionIcon as c}from"@mantine/core";import{jsx as l,jsxs as u}from"react/jsx-runtime";const d=({label:d,name:f,path:p,onClick:m,disabled:h,classNames:g})=>u(c,{classNames:{root:n(g?.buttonIcon??r(),g?.root??s()),icon:g?.icon??i()},onClick:m,disabled:h,children:[l(t,{path:p,name:f,classNames:{iconRaw:g?.iconRaw?.iconRaw??a(),root:g?.iconRaw?.root??o()}}),l(e,{children:d})]});export{d as ButtonIcon};
+//# sourceMappingURL=ButtonIcon.mjs.map

package/dist/components/buttons/button-icon/ButtonIcon.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonIcon.mjs","names":["VisuallyHidden"],"sources":["../../../../src/components/buttons/button-icon/ButtonIcon.tsx"],"sourcesContent":[" import type { ComponentProps } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n  buttonIcon,\n  buttonIconIcon,\n  buttonIconIconRaw,\n  buttonIconIconRawRoot,\n  buttonIconRoot,\n} from '@mage-ui/styled-system/recipes';\nimport { ActionIcon } from '@mantine/core';\nimport { IconRaw } from '@/components/data-display';\nimport { VisuallyHidden } from '@/components/misc';\n\nexport type ButtonIconProps = ComponentProps<'button'> & {\n  name: string;\n  path: string;\n  label: string;\n  classNames?: {\n    buttonIcon?: string;\n    root?: string;\n    icon?: string;\n    iconRaw?: {\n      iconRaw?: string;\n      root?: string;\n    };\n  };\n};\n\nexport const ButtonIcon = ({\n  label,\n  name,\n  path,\n  onClick,\n  disabled,\n  classNames,\n}: ButtonIconProps) => {\n  return (\n    <ActionIcon\n      classNames={{\n        root: cx(\n          classNames?.buttonIcon ?? buttonIcon(),\n          classNames?.root ?? buttonIconRoot(),\n        ),\n        icon: classNames?.icon ?? buttonIconIcon(),\n      }}\n      onClick={onClick}\n      disabled={disabled}\n    >\n      <IconRaw\n        path={path}\n        name={name}\n        classNames={{\n          iconRaw: classNames?.iconRaw?.iconRaw ?? buttonIconIconRaw(),\n          root: classNames?.iconRaw?.root ?? buttonIconIconRawRoot(),\n        }}\n      />\n      <VisuallyHidden>{label}</VisuallyHidden>\n    </ActionIcon>\n  );\n};\n"],"mappings":"0bA6BA,MAAa,GAAc,CACzB,QACA,OACA,OACA,UACA,WACA,gBAGE,EAAC,EAAA,CACC,WAAY,CACV,KAAM,EACJ,GAAY,YAAc,GAAY,CACtC,GAAY,MAAQ,GAAgB,CACrC,CACD,KAAM,GAAY,MAAQ,GAAgB,CAC3C,CACQ,UACC,qBAEV,EAAC,EAAA,CACO,OACA,OACN,WAAY,CACV,QAAS,GAAY,SAAS,SAAW,GAAmB,CAC5D,KAAM,GAAY,SAAS,MAAQ,GAAuB,CAC3D,EACD,CACF,EAACA,EAAAA,CAAAA,SAAgB,EAAA,CAAuB,CAAA,EAC7B"}

package/dist/components/buttons/button-icon-visual/ButtonIconVisual.d.mts

@@ -0,0 +1,28 @@
+import * as react_jsx_runtime4 from "react/jsx-runtime";
+import { ComponentProps } from "react";
+
+//#region src/components/buttons/button-icon-visual/ButtonIconVisual.d.ts
+type ButtonIconVisualProps = ComponentProps<'button'> & {
+  classNames?: {
+    buttonIconVisual?: string;
+    root?: string;
+    icon?: string;
+    iconRaw?: {
+      iconRaw?: string;
+      root?: string;
+    };
+  };
+  name: string;
+  label: string;
+  path: string;
+};
+declare const ButtonIconVisual: ({
+  classNames,
+  label,
+  name,
+  path,
+  disabled
+}: ButtonIconVisualProps) => react_jsx_runtime4.JSX.Element;
+//#endregion
+export { ButtonIconVisual, ButtonIconVisualProps };
+//# sourceMappingURL=ButtonIconVisual.d.mts.map

package/dist/components/buttons/button-icon-visual/ButtonIconVisual.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonIconVisual.d.mts","names":[],"sources":["../../../../src/components/buttons/button-icon-visual/ButtonIconVisual.tsx"],"mappings":";;;;KAcY,qBAAA,GAAwB,cAAA;EAClC,UAAA;IACE,gBAAA;IACA,IAAA;IACA,IAAA;IACA,OAAA;MACE,OAAA;MACA,IAAA;IAAA;EAAA;EAGJ,IAAA;EACA,KAAA;EACA,IAAA;AAAA;AAAA,cAGW,gBAAA;EAAoB,UAAA;EAAA,KAAA;EAAA,IAAA;EAAA,IAAA;EAAA;AAAA,GAM9B,qBAAA,KAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/buttons/button-icon-visual/ButtonIconVisual.mjs

@@ -0,0 +1,2 @@
+import{VisuallyHidden as e}from"../../misc/visually-hidden/VisuallyHidden.mjs";import{IconRaw as t}from"../../data-display/icons/icon-raw/IconRaw.mjs";import{cx as n}from"@mage-ui/styled-system/css";import{buttonIconVisual as r,buttonIconVisualIcon as i,buttonIconVisualIconRaw as a,buttonIconVisualIconRawRoot as o,buttonIconVisualRoot as s}from"@mage-ui/styled-system/recipes";import{ActionIcon as c}from"@mantine/core";import{jsx as l,jsxs as u}from"react/jsx-runtime";const d=({classNames:d,label:f,name:p,path:m,disabled:h})=>u(c,{classNames:{root:n(d?.buttonIconVisual??r(),d?.root??s()),icon:d?.icon??i()},component:`span`,"data-disabled":h,children:[l(t,{path:m,name:p,classNames:{iconRaw:d?.iconRaw?.iconRaw??a(),root:d?.iconRaw?.root??o()}}),l(e,{children:f})]});export{d as ButtonIconVisual};
+//# sourceMappingURL=ButtonIconVisual.mjs.map

package/dist/components/buttons/button-icon-visual/ButtonIconVisual.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonIconVisual.mjs","names":["VisuallyHidden"],"sources":["../../../../src/components/buttons/button-icon-visual/ButtonIconVisual.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n  buttonIconVisual,\n  buttonIconVisualIcon,\n  buttonIconVisualIconRaw,\n  buttonIconVisualIconRawRoot,\n  buttonIconVisualRoot,\n} from '@mage-ui/styled-system/recipes';\nimport { ActionIcon } from '@mantine/core';\nimport { IconRaw } from '@/components/data-display';\nimport { VisuallyHidden } from '@/components/misc';\n\nexport type ButtonIconVisualProps = ComponentProps<'button'> & {\n  classNames?: {\n    buttonIconVisual?: string;\n    root?: string;\n    icon?: string;\n    iconRaw?: {\n      iconRaw?: string;\n      root?: string;\n    };\n  };\n  name: string;\n  label: string;\n  path: string;\n};\n\nexport const ButtonIconVisual = ({\n  classNames,\n  label,\n  name,\n  path,\n  disabled,\n}: ButtonIconVisualProps) => {\n  return (\n    <ActionIcon\n      classNames={{\n        root: cx(\n          classNames?.buttonIconVisual ?? buttonIconVisual(),\n          classNames?.root ?? buttonIconVisualRoot(),\n        ),\n        icon: classNames?.icon ?? buttonIconVisualIcon(),\n      }}\n      component='span'\n      data-disabled={disabled}\n    >\n      <IconRaw\n        path={path}\n        name={name}\n        classNames={{\n          iconRaw: classNames?.iconRaw?.iconRaw ?? buttonIconVisualIconRaw(),\n          root: classNames?.iconRaw?.root ?? buttonIconVisualIconRawRoot(),\n        }}\n      />\n      <VisuallyHidden>{label}</VisuallyHidden>\n    </ActionIcon>\n  );\n};\n"],"mappings":"wdA6BA,MAAa,GAAoB,CAC/B,aACA,QACA,OACA,OACA,cAGE,EAAC,EAAA,CACC,WAAY,CACV,KAAM,EACJ,GAAY,kBAAoB,GAAkB,CAClD,GAAY,MAAQ,GAAsB,CAC3C,CACD,KAAM,GAAY,MAAQ,GAAsB,CACjD,CACD,UAAU,OACV,gBAAe,YAEf,EAAC,EAAA,CACO,OACA,OACN,WAAY,CACV,QAAS,GAAY,SAAS,SAAW,GAAyB,CAClE,KAAM,GAAY,SAAS,MAAQ,GAA6B,CACjE,EACD,CACF,EAACA,EAAAA,CAAAA,SAAgB,EAAA,CAAuB,CAAA,EAC7B"}

package/dist/components/buttons/button-visual/ButtonVisual.d.mts

@@ -0,0 +1,27 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { ReactNode } from "react";
+
+//#region src/components/buttons/button-visual/ButtonVisual.d.ts
+type ButtonVisualProps = {
+  classNames?: {
+    button?: string;
+    root?: string;
+    inner?: string;
+    label?: string;
+    section?: string;
+  };
+  startSlot?: ReactNode;
+  endSlot?: ReactNode;
+  disabled?: boolean;
+  children?: ReactNode;
+};
+declare const ButtonVisual: ({
+  classNames,
+  startSlot,
+  endSlot,
+  children,
+  disabled
+}: ButtonVisualProps) => react_jsx_runtime0.JSX.Element;
+//#endregion
+export { ButtonVisual, ButtonVisualProps };
+//# sourceMappingURL=ButtonVisual.d.mts.map

package/dist/components/buttons/button-visual/ButtonVisual.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonVisual.d.mts","names":[],"sources":["../../../../src/components/buttons/button-visual/ButtonVisual.tsx"],"mappings":";;;;KAYY,iBAAA;EACV,UAAA;IACE,MAAA;IACA,IAAA;IACA,KAAA;IACA,KAAA;IACA,OAAA;EAAA;EAEF,SAAA,GAAY,SAAA;EACZ,OAAA,GAAU,SAAA;EACV,QAAA;EACA,QAAA,GAAW,SAAA;AAAA;AAAA,cAGA,YAAA;EAAgB,UAAA;EAAA,SAAA;EAAA,OAAA;EAAA,QAAA;EAAA;AAAA,GAM1B,iBAAA,KAAiB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/buttons/button-visual/ButtonVisual.mjs

@@ -0,0 +1,2 @@
+import{cx as e}from"@mage-ui/styled-system/css";import{buttonVisual as t,buttonVisualInner as n,buttonVisualLabel as r,buttonVisualRoot as i,buttonVisualSection as a}from"@mage-ui/styled-system/recipes";import{Button as o}from"@mantine/core";import{jsx as s}from"react/jsx-runtime";const c=({classNames:c,startSlot:l,endSlot:u,children:d,disabled:f})=>s(o,{classNames:{root:e(c?.button??t(),c?.root??i()),inner:c?.inner??n(),label:c?.label??r(),section:c?.section??a()},leftSection:l,rightSection:u,"data-disabled":f,component:`span`,children:d});export{c as ButtonVisual};
+//# sourceMappingURL=ButtonVisual.mjs.map

package/dist/components/buttons/button-visual/ButtonVisual.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonVisual.mjs","names":["MantineButton"],"sources":["../../../../src/components/buttons/button-visual/ButtonVisual.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n  buttonVisual,\n  buttonVisualInner,\n  buttonVisualLabel,\n  buttonVisualRoot,\n  buttonVisualSection,\n} from '@mage-ui/styled-system/recipes';\nimport { Button as MantineButton } from '@mantine/core';\n\nexport type ButtonVisualProps = {\n  classNames?: {\n    button?: string;\n    root?: string;\n    inner?: string;\n    label?: string;\n    section?: string;\n  };\n  startSlot?: ReactNode;\n  endSlot?: ReactNode;\n  disabled?: boolean;\n  children?: ReactNode;\n};\n\nexport const ButtonVisual = ({\n  classNames,\n  startSlot,\n  endSlot,\n  children,\n  disabled,\n}: ButtonVisualProps) => {\n  return (\n    <MantineButton\n      classNames={{\n        root: cx(\n          classNames?.button ?? buttonVisual(),\n          classNames?.root ?? buttonVisualRoot(),\n        ),\n        inner: classNames?.inner ?? buttonVisualInner(),\n        label: classNames?.label ?? buttonVisualLabel(),\n        section: classNames?.section ?? buttonVisualSection(),\n      }}\n      leftSection={startSlot}\n      rightSection={endSlot}\n      data-disabled={disabled}\n      component='span'\n    >\n      {children}\n    </MantineButton>\n  );\n};\n"],"mappings":"0RA0BA,MAAa,GAAgB,CAC3B,aACA,YACA,UACA,WACA,cAGE,EAACA,EAAAA,CACC,WAAY,CACV,KAAM,EACJ,GAAY,QAAU,GAAc,CACpC,GAAY,MAAQ,GAAkB,CACvC,CACD,MAAO,GAAY,OAAS,GAAmB,CAC/C,MAAO,GAAY,OAAS,GAAmB,CAC/C,QAAS,GAAY,SAAW,GAAqB,CACtD,CACD,YAAa,EACb,aAAc,EACd,gBAAe,EACf,UAAU,OAET,YACa"}

package/dist/components/buttons/index.d.mts

@@ -0,0 +1,5 @@
+import { Button, ButtonProps } from "./button/Button.mjs";
+import { ButtonAction, ButtonActionProps } from "./button-action/ButtonAction.mjs";
+import { ButtonIcon, ButtonIconProps } from "./button-icon/ButtonIcon.mjs";
+import { ButtonIconVisual, ButtonIconVisualProps } from "./button-icon-visual/ButtonIconVisual.mjs";
+import { ButtonVisual, ButtonVisualProps } from "./button-visual/ButtonVisual.mjs";

package/dist/components/controls/autocomplete/Autocomplete.d.mts

@@ -0,0 +1,35 @@
+import { ComboboxProps } from "../combobox/Combobox.mjs";
+import * as react_jsx_runtime16 from "react/jsx-runtime";
+import { ReactNode } from "react";
+
+//#region src/components/controls/autocomplete/Autocomplete.d.ts
+type OptionProps = {
+  id: string | number;
+  value: string;
+};
+type AutocompleteProps = Omit<ComboboxProps, 'classNames' | 'endSlot' | 'options' | 'createNewItem' | 'chevron' | 'keepMounted' | 'clearable'> & {
+  url: string;
+  loadingSlot?: ReactNode;
+  minLength?: number;
+  classNames?: Omit<NonNullable<ComboboxProps['classNames']>, 'combobox' | 'create' | 'createIcon'> & {
+    autocomplete?: string;
+  };
+};
+declare const Autocomplete: ({
+  url,
+  name,
+  label,
+  description,
+  error,
+  disabled,
+  placeholder,
+  withinPortal,
+  startSlot,
+  loadingSlot,
+  emptyMessage,
+  minLength,
+  classNames
+}: AutocompleteProps) => react_jsx_runtime16.JSX.Element;
+//#endregion
+export { Autocomplete, AutocompleteProps, OptionProps };
+//# sourceMappingURL=Autocomplete.d.mts.map

package/dist/components/controls/autocomplete/Autocomplete.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Autocomplete.d.mts","names":[],"sources":["../../../../src/components/controls/autocomplete/Autocomplete.tsx"],"mappings":";;;;;KA6BY,WAAA;EACV,EAAA;EACA,KAAA;AAAA;AAAA,KAGU,iBAAA,GAAoB,IAAA,CAC9B,aAAA;EASA,GAAA;EACA,WAAA,GAAc,SAAA;EACd,SAAA;EACA,UAAA,GAAa,IAAA,CACX,WAAA,CAAY,aAAA;IAGZ,YAAA;EAAA;AAAA;AAAA,cAGS,YAAA;EAAgB,GAAA;EAAA,IAAA;EAAA,KAAA;EAAA,WAAA;EAAA,KAAA;EAAA,QAAA;EAAA,WAAA;EAAA,YAAA;EAAA,SAAA;EAAA,WAAA;EAAA,YAAA;EAAA,SAAA;EAAA;AAAA,GAc1B,iBAAA,KAAiB,mBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/controls/autocomplete/Autocomplete.mjs

@@ -0,0 +1,2 @@
+import{LoaderDot as e}from"../../data-display/loader-dot/LoaderDot.mjs";import{Combobox as t}from"../combobox/Combobox.mjs";import{cx as n}from"@mage-ui/styled-system/css";import{autocomplete as r,autocompleteClearButton as i,autocompleteClearButtonIcon as a,autocompleteClearButtonIconRaw as o,autocompleteClearButtonIconRawRoot as s,autocompleteClearButtonRoot as c,autocompleteEmpty as l,autocompleteOption as u,autocompleteOptions as d,autocompleteRoot as f,autocompleteScrollAreaAutosize as p,autocompleteTextInput as m,autocompleteTextInputDescription as h,autocompleteTextInputError as g,autocompleteTextInputInput as _,autocompleteTextInputLabel as v,autocompleteTextInputRequired as y,autocompleteTextInputRoot as b,autocompleteTextInputSection as x,autocompleteTextInputWrapper as S}from"@mage-ui/styled-system/recipes";import{jsx as C}from"react/jsx-runtime";import{useState as w}from"react";import{useQuery as T}from"@tanstack/react-query";import{useDebouncedCallback as E}from"@mantine/hooks";const D=({url:D,name:O,label:k,description:A,error:j,disabled:M,placeholder:N,withinPortal:P,startSlot:F,loadingSlot:I,emptyMessage:L,minLength:R=3,classNames:z})=>{let[B,V]=w(``),{data:H,isFetching:U,isLoading:W}=T({queryKey:[D,B],queryFn:async()=>{try{return await(await fetch(D)).json()}catch{return{data:[]}}},enabled:B.length>=R}),G=E(e=>{V(e)},500);return C(t,{name:O,label:k,description:A,placeholder:N,error:j,disabled:M,withinPortal:P,keepMounted:!1,clearable:!0,options:Array.isArray(H)?H.filter(e=>e.value.toLowerCase().includes(B.toLowerCase())):[],startSlot:F,endSlot:W||U?I||C(e,{}):void 0,onChange:e=>{G(e??``)},empty:H===void 0?null:L||`No results`,classNames:{combobox:z?.autocomplete??r(),root:z?.root??H===void 0?``:f(),options:z?.options??d(),option:z?.option??u(),empty:z?.empty??l(),scrollArea:{scrollArea:z?.scrollArea?.scrollArea??p()},textInput:{root:z?.textInput?.root??n(m(),b()),label:z?.textInput?.label??v(),description:z?.textInput?.description??h(),error:z?.textInput?.error??g(),wrapper:z?.textInput?.wrapper??S(),input:z?.textInput?.input??_(),section:z?.textInput?.section??x(),required:z?.textInput?.required??y(),endSlot:{clearButton:{buttonIcon:z?.textInput?.endSlot?.clearButton?.buttonIcon??i(),root:z?.textInput?.endSlot?.clearButton?.root??c(),icon:z?.textInput?.endSlot?.clearButton?.icon??a(),iconRaw:{iconRaw:z?.textInput?.endSlot?.clearButton?.iconRaw?.iconRaw??o(),root:z?.textInput?.endSlot?.clearButton?.iconRaw?.root??s()}}}}}})};export{D as Autocomplete};
+//# sourceMappingURL=Autocomplete.mjs.map

package/dist/components/controls/autocomplete/Autocomplete.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Autocomplete.mjs","names":[],"sources":["../../../../src/components/controls/autocomplete/Autocomplete.tsx"],"sourcesContent":["import { useState, type ReactNode } from 'react';\nimport { Combobox, type ComboboxProps } from '../combobox/Combobox';\nimport { cx } from '@mage-ui/styled-system/css';\nimport { useQuery } from '@tanstack/react-query';\nimport { useDebouncedCallback } from '@mantine/hooks';\nimport {\n  autocomplete,\n  autocompleteClearButton,\n  autocompleteClearButtonIcon,\n  autocompleteClearButtonIconRaw,\n  autocompleteClearButtonIconRawRoot,\n  autocompleteClearButtonRoot,\n  autocompleteEmpty,\n  autocompleteOption,\n  autocompleteOptions,\n  autocompleteRoot,\n  autocompleteScrollAreaAutosize,\n  autocompleteTextInput,\n  autocompleteTextInputDescription,\n  autocompleteTextInputError,\n  autocompleteTextInputInput,\n  autocompleteTextInputLabel,\n  autocompleteTextInputRequired,\n  autocompleteTextInputRoot,\n  autocompleteTextInputSection,\n  autocompleteTextInputWrapper,\n} from '@mage-ui/styled-system/recipes';\nimport { LoaderDot } from '@/components/data-display';\n\nexport type OptionProps = {\n  id: string | number;\n  value: string;\n};\n\nexport type AutocompleteProps = Omit<\n  ComboboxProps,\n  | 'classNames'\n  | 'endSlot'\n  | 'options'\n  | 'createNewItem'\n  | 'chevron'\n  | 'keepMounted'\n  | 'clearable'\n> & {\n  url: string;\n  loadingSlot?: ReactNode;\n  minLength?: number;\n  classNames?: Omit<\n    NonNullable<ComboboxProps['classNames']>,\n    'combobox' | 'create' | 'createIcon'\n  > & {\n    autocomplete?: string;\n  };\n};\nexport const Autocomplete = ({\n  url,\n  name,\n  label,\n  description,\n  error,\n  disabled,\n  placeholder,\n  withinPortal,\n  startSlot,\n  loadingSlot,\n  emptyMessage,\n  minLength = 3,\n  classNames,\n}: AutocompleteProps) => {\n  const [query, setQuery] = useState('');\n\n  const { data, isFetching, isLoading } = useQuery<OptionProps[]>({\n    queryKey: [url, query],\n    // queryFn: async () => {\n    //   try {\n    //     const response = await fetch(url, {\n    //       method: 'POST',\n    //       headers: { 'Content-Type': 'application/json' },\n    //       body: JSON.stringify({ query }),\n    //     });\n    //     return await response.json();\n    //   } catch (_error) {\n    //     return { data: [] };\n    //   }\n    // },\n    queryFn: async () => {\n      try {\n        const response = await fetch(url);\n        return await response.json();\n      } catch (_error) {\n        return { data: [] };\n      }\n    },\n    enabled: query.length >= minLength,\n  });\n\n  const debounced = useDebouncedCallback((value: string) => {\n    setQuery(value);\n  }, 500);\n\n  const list: OptionProps[] = Array.isArray(data)\n    ? data.filter((itemList) =>\n        itemList.value.toLowerCase().includes(query.toLowerCase()),\n      )\n    : [];\n\n  return (\n    <Combobox\n      name={name}\n      label={label}\n      description={description}\n      placeholder={placeholder}\n      error={error}\n      disabled={disabled}\n      withinPortal={withinPortal}\n      keepMounted={false}\n      clearable={true}\n      options={list}\n      startSlot={startSlot}\n      endSlot={\n        isLoading || isFetching ? loadingSlot || <LoaderDot /> : undefined\n      }\n      onChange={(value) => {\n        debounced(value ?? '');\n      }}\n      empty={data === undefined ? null : emptyMessage || 'No results'}\n      classNames={{\n        combobox: classNames?.autocomplete ?? autocomplete(),\n        root: classNames?.root ?? data === undefined ? '' : autocompleteRoot(),\n        options: classNames?.options ?? autocompleteOptions(),\n        option: classNames?.option ?? autocompleteOption(),\n        empty: classNames?.empty ?? autocompleteEmpty(),\n        scrollArea: {\n          scrollArea:\n            classNames?.scrollArea?.scrollArea ??\n            autocompleteScrollAreaAutosize(),\n        },\n        textInput: {\n          root:\n            classNames?.textInput?.root ??\n            cx(autocompleteTextInput(), autocompleteTextInputRoot()),\n          label: classNames?.textInput?.label ?? autocompleteTextInputLabel(),\n          description:\n            classNames?.textInput?.description ??\n            autocompleteTextInputDescription(),\n          error: classNames?.textInput?.error ?? autocompleteTextInputError(),\n          wrapper:\n            classNames?.textInput?.wrapper ?? autocompleteTextInputWrapper(),\n          input: classNames?.textInput?.input ?? autocompleteTextInputInput(),\n          section:\n            classNames?.textInput?.section ?? autocompleteTextInputSection(),\n          required:\n            classNames?.textInput?.required ?? autocompleteTextInputRequired(),\n          endSlot: {\n            clearButton: {\n              buttonIcon:\n                classNames?.textInput?.endSlot?.clearButton?.buttonIcon ??\n                autocompleteClearButton(),\n              root:\n                classNames?.textInput?.endSlot?.clearButton?.root ??\n                autocompleteClearButtonRoot(),\n              icon:\n                classNames?.textInput?.endSlot?.clearButton?.icon ??\n                autocompleteClearButtonIcon(),\n              iconRaw: {\n                iconRaw:\n                  classNames?.textInput?.endSlot?.clearButton?.iconRaw\n                    ?.iconRaw ?? autocompleteClearButtonIconRaw(),\n                root:\n                  classNames?.textInput?.endSlot?.clearButton?.iconRaw?.root ??\n                  autocompleteClearButtonIconRawRoot(),\n              },\n            },\n          },\n        },\n      }}\n    />\n  );\n};\n"],"mappings":"8+BAsDA,MAAa,GAAgB,CAC3B,MACA,OACA,QACA,cACA,QACA,WACA,cACA,eACA,YACA,cACA,eACA,YAAY,EACZ,gBACuB,CACvB,GAAM,CAAC,EAAO,GAAY,EAAS,GAAG,CAEhC,CAAE,OAAM,aAAY,aAAc,EAAwB,CAC9D,SAAU,CAAC,EAAK,EAAM,CAatB,QAAS,SAAY,CACnB,GAAI,CAEF,OAAO,MADU,MAAM,MAAM,EAAI,EACX,MAAM,MACb,CACf,MAAO,CAAE,KAAM,EAAE,CAAE,GAGvB,QAAS,EAAM,QAAU,EAC1B,CAAC,CAEI,EAAY,EAAsB,GAAkB,CACxD,EAAS,EAAM,EACd,IAAI,CAQP,OACE,EAAC,EAAA,CACO,OACC,QACM,cACA,cACN,QACG,WACI,eACd,YAAa,GACb,UAAW,GACX,QAjBwB,MAAM,QAAQ,EAAK,CAC3C,EAAK,OAAQ,GACX,EAAS,MAAM,aAAa,CAAC,SAAS,EAAM,aAAa,CAAC,CAC3D,CACD,EAAE,CAcS,YACX,QACE,GAAa,EAAa,GAAe,EAAC,EAAA,EAAA,CAAY,CAAG,IAAA,GAE3D,SAAW,GAAU,CACnB,EAAU,GAAS,GAAG,EAExB,MAAO,IAAS,IAAA,GAAY,KAAO,GAAgB,aACnD,WAAY,CACV,SAAU,GAAY,cAAgB,GAAc,CACpD,KAAM,GAAY,MAAQ,IAAS,IAAA,GAAY,GAAK,GAAkB,CACtE,QAAS,GAAY,SAAW,GAAqB,CACrD,OAAQ,GAAY,QAAU,GAAoB,CAClD,MAAO,GAAY,OAAS,GAAmB,CAC/C,WAAY,CACV,WACE,GAAY,YAAY,YACxB,GAAgC,CACnC,CACD,UAAW,CACT,KACE,GAAY,WAAW,MACvB,EAAG,GAAuB,CAAE,GAA2B,CAAC,CAC1D,MAAO,GAAY,WAAW,OAAS,GAA4B,CACnE,YACE,GAAY,WAAW,aACvB,GAAkC,CACpC,MAAO,GAAY,WAAW,OAAS,GAA4B,CACnE,QACE,GAAY,WAAW,SAAW,GAA8B,CAClE,MAAO,GAAY,WAAW,OAAS,GAA4B,CACnE,QACE,GAAY,WAAW,SAAW,GAA8B,CAClE,SACE,GAAY,WAAW,UAAY,GAA+B,CACpE,QAAS,CACP,YAAa,CACX,WACE,GAAY,WAAW,SAAS,aAAa,YAC7C,GAAyB,CAC3B,KACE,GAAY,WAAW,SAAS,aAAa,MAC7C,GAA6B,CAC/B,KACE,GAAY,WAAW,SAAS,aAAa,MAC7C,GAA6B,CAC/B,QAAS,CACP,QACE,GAAY,WAAW,SAAS,aAAa,SACzC,SAAW,GAAgC,CACjD,KACE,GAAY,WAAW,SAAS,aAAa,SAAS,MACtD,GAAoC,CACvC,CACF,CACF,CACF,CACF,EACD"}

package/dist/components/controls/checkbox/Checkbox.d.mts

@@ -0,0 +1,65 @@
+import { CheckboxGroupProps } from "../checkbox-group/CheckboxGroup.mjs";
+import { ComponentProps, ReactNode } from "react";
+
+//#region src/components/controls/checkbox/Checkbox.d.ts
+type CheckboxProps = Omit<ComponentProps<'input'>, 'size'> & {
+  checked?: boolean;
+  label?: ReactNode;
+  description?: string;
+  error?: string;
+  name?: string;
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  classNames?: {
+    checkbox?: string;
+    root?: string;
+    input?: string;
+    icon?: string;
+    inner?: string;
+    body?: string;
+    bodyError?: string;
+    labelWrapper?: string;
+    labelRequired?: string;
+    label?: string;
+    description?: string;
+    error?: string;
+  };
+  indeterminate?: boolean;
+  hiddenLabel?: boolean;
+};
+declare const Checkbox: {
+  ({
+    classNames,
+    name,
+    label,
+    hiddenLabel,
+    description,
+    error,
+    onChange,
+    value,
+    id,
+    disabled,
+    readOnly,
+    required,
+    indeterminate,
+    checked
+  }: CheckboxProps): ReactNode;
+  displayName: string;
+  Group: {
+    ({
+      label,
+      error,
+      description,
+      children,
+      value,
+      onChange,
+      withAsterisk,
+      required,
+      disabled,
+      classNames
+    }: CheckboxGroupProps): ReactNode;
+    displayName: string;
+  };
+};
+//#endregion
+export { Checkbox, CheckboxProps };
+//# sourceMappingURL=Checkbox.d.mts.map

package/dist/components/controls/checkbox/Checkbox.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.d.mts","names":[],"sources":["../../../../src/components/controls/checkbox/Checkbox.tsx"],"mappings":";;;;KAsBY,aAAA,GAAgB,IAAA,CAAK,cAAA;EAC/B,OAAA;EACA,KAAA,GAAQ,SAAA;EACR,WAAA;EACA,KAAA;EACA,IAAA;EACA,QAAA,IAAY,KAAA,EAAO,KAAA,CAAM,WAAA,CAAY,gBAAA;EACrC,UAAA;IACE,QAAA;IACA,IAAA;IACA,KAAA;IACA,IAAA;IACA,KAAA;IACA,IAAA;IACA,SAAA;IACA,YAAA;IACA,aAAA;IACA,KAAA;IACA,WAAA;IACA,KAAA;EAAA;EAEF,aAAA;EACA,WAAA;AAAA;AAAA,cAGW,QAAA;EAAA;;;;;;;;;;;;;;;KAeV,aAAA,GAAgB,SAAA"}

package/dist/components/controls/checkbox/Checkbox.mjs

@@ -0,0 +1,2 @@
+import{CheckboxGroup as e}from"../checkbox-group/CheckboxGroup.mjs";import{cx as t}from"@mage-ui/styled-system/css";import{checkbox as n,checkboxBody as r,checkboxBodyError as i,checkboxDescription as a,checkboxError as o,checkboxIcon as s,checkboxInner as c,checkboxInput as l,checkboxLabel as u,checkboxLabelRequired as d,checkboxLabelWrapper as f,checkboxRoot as p}from"@mage-ui/styled-system/recipes";import{Checkbox as m}from"@mantine/core";import{Fragment as h,jsx as g,jsxs as _}from"react/jsx-runtime";import{visuallyHidden as v}from"@mage-ui/styled-system/patterns";const y=({classNames:e,name:y,label:b,hiddenLabel:x,description:S,error:C,onChange:w,value:T,id:E,disabled:D,readOnly:O,required:k,indeterminate:A,checked:j})=>{let M=k?g(`span`,{className:e?.labelRequired??d(),children:`*`}):null;return g(m,{classNames:{root:t(e?.checkbox??n(),e?.root??p()),input:t(e?.input??l(),`peer`),icon:e?.icon??s(),inner:e?.inner??c(),body:t(e?.body??r(),C&&(e?.bodyError??i())),labelWrapper:e?.labelWrapper??f(),label:t(e?.label??u(),x&&v()),description:e?.description??a(),error:e?.error??o()},label:_(h,{children:[b,` `,M]}),description:S,error:C,name:y,onChange:w,value:T,id:E,disabled:D,required:k,readOnly:O,indeterminate:A,checked:j})};y.displayName=`Checkbox`,y.Group=e;export{y as Checkbox};
+//# sourceMappingURL=Checkbox.mjs.map

package/dist/components/controls/checkbox/Checkbox.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.mjs","names":["Checkbox","MantineCheckbox"],"sources":["../../../../src/components/controls/checkbox/Checkbox.tsx"],"sourcesContent":["import type { ComponentProps, ReactNode } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n  checkbox,\n  checkboxBody,\n  checkboxBodyError,\n  checkboxInput,\n  checkboxDescription,\n  checkboxError,\n  checkboxIcon,\n  checkboxInner,\n  checkboxLabel,\n  checkboxLabelWrapper,\n  checkboxLabelRequired,\n  checkboxRoot,\n} from '@mage-ui/styled-system/recipes';\nimport { Checkbox as MantineCheckbox } from '@mantine/core';\n\nimport { CheckboxGroup } from '../checkbox-group/CheckboxGroup';\nimport { visuallyHidden } from '@mage-ui/styled-system/patterns';\n\nexport type CheckboxProps = Omit<ComponentProps<'input'>, 'size'> & {\n  checked?: boolean;\n  label?: ReactNode;\n  description?: string;\n  error?: string;\n  name?: string;\n  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;\n  classNames?: {\n    checkbox?: string;\n    root?: string;\n    input?: string;\n    icon?: string;\n    inner?: string;\n    body?: string;\n    bodyError?: string;\n    labelWrapper?: string;\n    labelRequired?: string;\n    label?: string;\n    description?: string;\n    error?: string;\n  };\n  indeterminate?: boolean;\n  hiddenLabel?: boolean;\n};\n\nexport const Checkbox = ({\n  classNames,\n  name,\n  label,\n  hiddenLabel,\n  description,\n  error,\n  onChange,\n  value,\n  id,\n  disabled,\n  readOnly,\n  required,\n  indeterminate,\n  checked,\n}: CheckboxProps): ReactNode => {\n  const requiredIndicator = required ? (\n    <span className={classNames?.labelRequired ?? checkboxLabelRequired()}>\n      *\n    </span>\n  ) : null;\n  return (\n    <MantineCheckbox\n      classNames={{\n        root: cx(\n          classNames?.checkbox ?? checkbox(),\n          classNames?.root ?? checkboxRoot(),\n        ),\n        input: cx(classNames?.input ?? checkboxInput(), 'peer'),\n        icon: classNames?.icon ?? checkboxIcon(),\n        inner: classNames?.inner ?? checkboxInner(),\n        body: cx(\n          classNames?.body ?? checkboxBody(),\n          error && (classNames?.bodyError ?? checkboxBodyError()),\n        ),\n        labelWrapper: classNames?.labelWrapper ?? checkboxLabelWrapper(),\n        label: cx(\n          classNames?.label ?? checkboxLabel(),\n          hiddenLabel && visuallyHidden(),\n        ),\n        description: classNames?.description ?? checkboxDescription(),\n        error: classNames?.error ?? checkboxError(),\n      }}\n      label={\n        <>\n          {label} {requiredIndicator}\n        </>\n      }\n      description={description}\n      error={error}\n      name={name}\n      onChange={onChange}\n      value={value}\n      id={id}\n      disabled={disabled}\n      required={required}\n      readOnly={readOnly}\n      indeterminate={indeterminate}\n      checked={checked}\n    />\n  );\n};\n\nCheckbox.displayName = 'Checkbox';\nCheckbox.Group = CheckboxGroup;\n"],"mappings":"+jBA+CA,MAAaA,GAAY,CACvB,aACA,OACA,QACA,cACA,cACA,QACA,WACA,QACA,KACA,WACA,WACA,WACA,gBACA,aAC8B,CAC9B,IAAM,EAAoB,EACxB,EAAC,OAAA,CAAK,UAAW,GAAY,eAAiB,GAAuB,UAAE,KAEhE,CACL,KACJ,OACE,EAACC,EAAAA,CACC,WAAY,CACV,KAAM,EACJ,GAAY,UAAY,GAAU,CAClC,GAAY,MAAQ,GAAc,CACnC,CACD,MAAO,EAAG,GAAY,OAAS,GAAe,CAAE,OAAO,CACvD,KAAM,GAAY,MAAQ,GAAc,CACxC,MAAO,GAAY,OAAS,GAAe,CAC3C,KAAM,EACJ,GAAY,MAAQ,GAAc,CAClC,IAAU,GAAY,WAAa,GAAmB,EACvD,CACD,aAAc,GAAY,cAAgB,GAAsB,CAChE,MAAO,EACL,GAAY,OAAS,GAAe,CACpC,GAAe,GAAgB,CAChC,CACD,YAAa,GAAY,aAAe,GAAqB,CAC7D,MAAO,GAAY,OAAS,GAAe,CAC5C,CACD,MACE,EAAA,EAAA,CAAA,SAAA,CACG,EAAM,IAAE,IACR,CAEQ,cACN,QACD,OACI,WACH,QACH,KACM,WACA,WACA,WACK,gBACN,WACT,EAIN,EAAS,YAAc,WACvB,EAAS,MAAQ"}

package/dist/components/controls/{checkbox/CheckboxGroup.d.ts → checkbox-group/CheckboxGroup.d.mts}

@@ -1,27 +1,26 @@
 import { ReactNode } from "react";
 
-//#region src/components/controls/checkbox/CheckboxGroup.d.ts
+//#region src/components/controls/checkbox-group/CheckboxGroup.d.ts
 type CheckboxGroupProps = {
   label?: ReactNode;
   error?: ReactNode;
   description?: ReactNode;
   children?: ReactNode;
   value?: string[];
-  name?: string;
   onChange?: (value: string[]) => void;
+  withAsterisk?: boolean;
+  required?: boolean;
+  disabled?: boolean;
   classNames?: {
+    checkboxGroup?: string;
     root?: string;
-    radio?: string;
-    icon?: string;
-    inner?: string;
-    body?: string;
-    labelWrapper?: string;
     label?: string;
+    required?: string;
     description?: string;
     error?: string;
-    groupRoot?: string;
+    list?: string;
   };
 };
 //#endregion
 export { CheckboxGroupProps };
-//# sourceMappingURL=CheckboxGroup.d.ts.map
+//# sourceMappingURL=CheckboxGroup.d.mts.map

package/dist/components/controls/checkbox-group/CheckboxGroup.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxGroup.d.mts","names":[],"sources":["../../../../src/components/controls/checkbox-group/CheckboxGroup.tsx"],"mappings":";;;KAcY,kBAAA;EACV,KAAA,GAAQ,SAAA;EACR,KAAA,GAAQ,SAAA;EACR,WAAA,GAAc,SAAA;EACd,QAAA,GAAW,SAAA;EACX,KAAA;EACA,QAAA,IAAY,KAAA;EACZ,YAAA;EACA,QAAA;EACA,QAAA;EACA,UAAA;IACE,aAAA;IACA,IAAA;IACA,KAAA;IACA,QAAA;IACA,WAAA;IACA,KAAA;IACA,IAAA;EAAA;AAAA"}

package/dist/components/controls/checkbox-group/CheckboxGroup.mjs

@@ -0,0 +1,2 @@
+import{cx as e}from"@mage-ui/styled-system/css";import{checkboxGroup as t,checkboxGroupDescription as n,checkboxGroupError as r,checkboxGroupGroup as i,checkboxGroupLabel as a,checkboxGroupRequired as o,checkboxGroupRoot as s}from"@mage-ui/styled-system/recipes";import{Checkbox as c}from"@mantine/core";import{jsx as l}from"react/jsx-runtime";const u=({label:u,error:d,description:f,children:p,value:m,onChange:h,withAsterisk:g,required:_,disabled:v,classNames:y})=>l(c.Group,{classNames:{root:e(y?.checkboxGroup??t(),y?.root??s()),label:y?.label??a(),required:y?.required??o(),description:y?.description??n(),error:y?.error??r()},label:u,description:f,error:d,value:m,onChange:h,disabled:v,required:_,withAsterisk:g,children:l(`div`,{className:y?.list??i(),children:p})});u.displayName=`Checkbox.Group`;export{u as CheckboxGroup};
+//# sourceMappingURL=CheckboxGroup.mjs.map

package/dist/components/controls/checkbox-group/CheckboxGroup.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxGroup.mjs","names":["CheckboxMantine"],"sources":["../../../../src/components/controls/checkbox-group/CheckboxGroup.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n  checkboxGroup,\n  checkboxGroupDescription,\n  checkboxGroupError,\n  checkboxGroupLabel,\n  checkboxGroupGroup,\n  checkboxGroupRequired,\n  checkboxGroupRoot,\n} from '@mage-ui/styled-system/recipes';\nimport { Checkbox as CheckboxMantine } from '@mantine/core';\n\nexport type CheckboxGroupProps = {\n  label?: ReactNode;\n  error?: ReactNode;\n  description?: ReactNode;\n  children?: ReactNode;\n  value?: string[];\n  onChange?: (value: string[]) => void;\n  withAsterisk?: boolean;\n  required?: boolean;\n  disabled?: boolean;\n  classNames?: {\n    checkboxGroup?: string;\n    root?: string;\n    label?: string;\n    required?: string;\n    description?: string;\n    error?: string;\n    list?: string;\n  };\n};\n\nexport const CheckboxGroup = ({\n  label,\n  error,\n  description,\n  children,\n  value,\n  onChange,\n  withAsterisk,\n  required,\n  disabled,\n  classNames,\n}: CheckboxGroupProps): ReactNode => {\n  return (\n    <CheckboxMantine.Group\n      classNames={{\n        root: cx(\n          classNames?.checkboxGroup ?? checkboxGroup(),\n          classNames?.root ?? checkboxGroupRoot(),\n        ),\n        label: classNames?.label ?? checkboxGroupLabel(),\n        required: classNames?.required ?? checkboxGroupRequired(),\n        description: classNames?.description ?? checkboxGroupDescription(),\n        error: classNames?.error ?? checkboxGroupError(),\n      }}\n      label={label}\n      description={description}\n      error={error}\n      value={value}\n      onChange={onChange}\n      disabled={disabled}\n      required={required}\n      withAsterisk={withAsterisk}\n      //TODO: withAsterisk={required}? - jo no lligaría la prop required amb withAsterisk, withAsterisk ha de ser independent per a certos casos, sustitueix el required i li treu l'atribut al input\n    >\n      <div className={classNames?.list ?? checkboxGroupGroup()}>{children}</div>\n    </CheckboxMantine.Group>\n  );\n};\n\nCheckboxGroup.displayName = 'Checkbox.Group';\n"],"mappings":"wVAmCA,MAAa,GAAiB,CAC5B,QACA,QACA,cACA,WACA,QACA,WACA,eACA,WACA,WACA,gBAGE,EAACA,EAAgB,MAAA,CACf,WAAY,CACV,KAAM,EACJ,GAAY,eAAiB,GAAe,CAC5C,GAAY,MAAQ,GAAmB,CACxC,CACD,MAAO,GAAY,OAAS,GAAoB,CAChD,SAAU,GAAY,UAAY,GAAuB,CACzD,YAAa,GAAY,aAAe,GAA0B,CAClE,MAAO,GAAY,OAAS,GAAoB,CACjD,CACM,QACM,cACN,QACA,QACG,WACA,WACA,WACI,wBAGd,EAAC,MAAA,CAAI,UAAW,GAAY,MAAQ,GAAoB,CAAG,YAAe,EACpD,CAI5B,EAAc,YAAc"}

package/dist/components/controls/combobox/Combobox.d.mts

@@ -0,0 +1,58 @@
+import { DropdownProps } from "../dropdown/Dropdown.mjs";
+import * as react_jsx_runtime15 from "react/jsx-runtime";
+
+//#region src/components/controls/combobox/Combobox.d.ts
+type ComboboxProps = Omit<DropdownProps, 'classNames' | 'onChange' | 'onBlur' | 'onFocus' | 'onClick' | 'setValue' | 'children'> & {
+  onChange?: (value?: string) => void;
+  creatable?: boolean;
+  options: {
+    id: string | number;
+    value: string;
+  }[];
+  empty?: string | null;
+  emptyMessage?: string;
+  createNewItem?: string;
+  classNames?: Omit<NonNullable<DropdownProps['classNames']>, 'dropdown' | 'search'> & {
+    combobox?: string;
+    create?: string;
+    createIcon?: {
+      createIcon?: string;
+      root?: string;
+      icon?: string;
+      iconRaw?: {
+        iconRaw?: string;
+        root?: string;
+      };
+    };
+    header?: string;
+    footer?: string;
+    group?: string;
+    groupLabel?: string;
+  };
+};
+declare const Combobox: ({
+  name,
+  label,
+  description,
+  error,
+  disabled,
+  placeholder,
+  withinPortal,
+  keepMounted,
+  clearable,
+  creatable,
+  chevron,
+  startSlot,
+  endSlot,
+  options,
+  readOnly,
+  empty,
+  emptyMessage,
+  createNewItem,
+  btnClearLabel,
+  onChange,
+  classNames
+}: ComboboxProps) => react_jsx_runtime15.JSX.Element;
+//#endregion
+export { Combobox, ComboboxProps };
+//# sourceMappingURL=Combobox.d.mts.map

package/dist/components/controls/combobox/Combobox.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Combobox.d.mts","names":[],"sources":["../../../../src/components/controls/combobox/Combobox.tsx"],"mappings":";;;;KAsCY,aAAA,GAAgB,IAAA,CAC1B,aAAA;EASA,QAAA,IAAY,KAAA;EACZ,SAAA;EACA,OAAA;IACE,EAAA;IACA,KAAA;EAAA;EAEF,KAAA;EACA,YAAA;EACA,aAAA;EACA,UAAA,GAAa,IAAA,CACX,WAAA,CAAY,aAAA;IAGZ,QAAA;IACA,MAAA;IACA,UAAA;MACE,UAAA;MACA,IAAA;MACA,IAAA;MACA,OAAA;QACE,OAAA;QACA,IAAA;MAAA;IAAA;IAGJ,MAAA;IACA,MAAA;IACA,KAAA;IACA,UAAA;EAAA;AAAA;AAAA,cAIS,QAAA;EAAY,IAAA;EAAA,KAAA;EAAA,WAAA;EAAA,KAAA;EAAA,QAAA;EAAA,WAAA;EAAA,YAAA;EAAA,WAAA;EAAA,SAAA;EAAA,SAAA;EAAA,OAAA;EAAA,SAAA;EAAA,OAAA;EAAA,OAAA;EAAA,QAAA;EAAA,KAAA;EAAA,YAAA;EAAA,aAAA;EAAA,aAAA;EAAA,QAAA;EAAA;AAAA,GAsBtB,aAAA,KAAa,mBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/controls/combobox/Combobox.mjs

@@ -0,0 +1,2 @@
+import{Icon as e}from"../../data-display/icons/icon/Icon.mjs";import{Dropdown as t}from"../dropdown/Dropdown.mjs";import{cx as n}from"@mage-ui/styled-system/css";import{combobox as ee,comboboxChevron as r,comboboxChevronIcon as i,comboboxChevronIconRoot as a,comboboxChevronRoot as o,comboboxClearButton as s,comboboxClearButtonIcon as te,comboboxClearButtonIconRaw as c,comboboxClearButtonIconRawRoot as l,comboboxClearButtonRoot as ne,comboboxEmpty as u,comboboxOption as re,comboboxOptionCreate as ie,comboboxOptionCreateCreate as ae,comboboxOptionCreateIcon as oe,comboboxOptionCreateIconIconRaw as se,comboboxOptionCreateIconIconRawRoot as d,comboboxOptionCreateIconRoot as f,comboboxOptions as p,comboboxRoot as m,comboboxScrollAreaAutosize as h,comboboxTextInput as g,comboboxTextInputDescription as _,comboboxTextInputError as v,comboboxTextInputInput as y,comboboxTextInputLabel as b,comboboxTextInputRequired as x,comboboxTextInputRoot as S,comboboxTextInputSection as C,comboboxTextInputWrapper as w}from"@mage-ui/styled-system/recipes";import{jsx as T,jsxs as E}from"react/jsx-runtime";import{useState as D}from"react";const O=({name:O,label:k,description:A,error:j,disabled:M,placeholder:N,withinPortal:P,keepMounted:F,clearable:I,creatable:L,chevron:R,startSlot:z,endSlot:B,options:V,readOnly:H,empty:U,emptyMessage:W,createNewItem:G,btnClearLabel:K,onChange:ce,classNames:q})=>{let[J,Y]=D({id:``,value:``}),[X,Z]=D(``),le=V.every(e=>e.value!==X),ue=V.some(e=>e.value.toLowerCase()===X.toLowerCase().trim()),Q=(le?V.filter(e=>e.value.toLowerCase().includes(X.toLowerCase().trim())):V).map(e=>T(t.Option,{value:e.value,children:e.value},e.id)),$=!(X.length>0);return T(t,{name:O,label:k,description:A,placeholder:N,disabled:M,error:j,withinPortal:P,keepMounted:F,clearable:I,chevron:R,readOnly:H,btnClearLabel:K,setValue:(e,t)=>{let n=V.find(t=>t.value===e);if(e===`$create`){Y({id:``,value:X}),Z(X),t.closeDropdown();return}if(e===void 0){Y({id:``,value:``}),Z(``);return}Y(n??{id:``,value:``}),Z(e),t.closeDropdown()},value:J?.value,search:X,startSlot:z,endSlot:B,onChange:(e,t)=>{e.openDropdown(),e.updateSelectedOptionIndex(),Z(t??``),ce?.(t??``)},onClick:e=>{e.openDropdown()},onFocus:e=>e.openDropdown(),onBlur:e=>{e.closeDropdown(),Z($?``:J?.value),$&&Y({id:``,value:``})},classNames:{dropdown:q?.combobox??ee(),root:q?.root??m(),options:q?.options??p(),option:q?.option??re(),empty:q?.empty??u(),scrollArea:{scrollArea:q?.scrollArea?.scrollArea??h()},textInput:{root:q?.textInput?.root??n(g(),S()),label:q?.textInput?.label??b(),description:q?.textInput?.description??_(),error:q?.textInput?.error??v(),wrapper:q?.textInput?.wrapper??w(),input:q?.textInput?.input??y(),section:q?.textInput?.section??C(),required:q?.textInput?.required??x(),endSlot:{chevron:{iconWrapped:q?.textInput?.endSlot?.chevron?.iconWrapped??r(),root:q?.textInput?.endSlot?.chevron?.root??o(),open:{iconRaw:q?.textInput?.endSlot?.chevron?.open?.iconRaw??i(),root:q?.textInput?.endSlot?.chevron?.open?.root??a()},close:{iconRaw:q?.textInput?.endSlot?.chevron?.close?.iconRaw??i(),root:q?.textInput?.endSlot?.chevron?.close?.root??a({invert:!0})}},clearButton:{buttonIcon:q?.textInput?.endSlot?.clearButton?.buttonIcon??s(),root:q?.textInput?.endSlot?.clearButton?.root??ne(),icon:q?.textInput?.endSlot?.clearButton?.icon??te(),iconRaw:{iconRaw:q?.textInput?.endSlot?.clearButton?.iconRaw?.iconRaw??c(),root:q?.textInput?.endSlot?.clearButton?.iconRaw?.root??l()}}}}},children:T(t.Options,{children:Q.length>0?Q:L?!ue&&X.trim().length>0&&E(t.Option,{classNames:{option:n(q?.create??ie(),ae())},value:`$create`,children:[T(e,{path:`/icons/sprite-mage.svg`,name:`mage-combobox-plus`,classNames:{icon:q?.createIcon?.createIcon??oe(),root:q?.createIcon?.root??f(),iconRaw:{iconRaw:q?.createIcon?.iconRaw?.iconRaw??se(),root:q?.createIcon?.iconRaw?.root??d()}}}),G??`Create`,` `,X]}):U!==null&&T(t.Empty,{classNames:{empty:q?.empty??u()},children:U??(W||`No results`)})})})};export{O as Combobox};
+//# sourceMappingURL=Combobox.mjs.map

package/dist/components/controls/combobox/Combobox.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Combobox.mjs","names":["combobox"],"sources":["../../../../src/components/controls/combobox/Combobox.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n  comboboxOptions,\n  comboboxOption,\n  comboboxEmpty,\n  comboboxRoot,\n  comboboxOptionCreateIcon,\n  comboboxOptionCreateIconRoot,\n  comboboxOptionCreateIconIconRaw,\n  comboboxOptionCreateIconIconRawRoot,\n  combobox,\n  comboboxOptionCreate,\n  comboboxOptionCreateCreate,\n  comboboxTextInput,\n  comboboxTextInputRoot,\n  comboboxTextInputLabel,\n  comboboxTextInputDescription,\n  comboboxTextInputError,\n  comboboxTextInputWrapper,\n  comboboxTextInputInput,\n  comboboxTextInputSection,\n  comboboxTextInputRequired,\n  comboboxChevron,\n  comboboxChevronRoot,\n  comboboxChevronIcon,\n  comboboxChevronIconRoot,\n  comboboxClearButton,\n  comboboxClearButtonRoot,\n  comboboxClearButtonIcon,\n  comboboxClearButtonIconRaw,\n  comboboxClearButtonIconRawRoot,\n  comboboxScrollAreaAutosize,\n} from '@mage-ui/styled-system/recipes';\nimport { Dropdown } from '../dropdown/Dropdown';\nimport { Icon } from '@/components/data-display';\nimport type { DropdownProps } from '../dropdown/Dropdown';\n\nexport type ComboboxProps = Omit<\n  DropdownProps,\n  | 'classNames'\n  | 'onChange'\n  | 'onBlur'\n  | 'onFocus'\n  | 'onClick'\n  | 'setValue'\n  | 'children'\n> & {\n  onChange?: (value?: string) => void;\n  creatable?: boolean;\n  options: {\n    id: string | number;\n    value: string;\n  }[];\n  empty?: string | null;\n  emptyMessage?: string;\n  createNewItem?: string;\n  classNames?: Omit<\n    NonNullable<DropdownProps['classNames']>,\n    'dropdown' | 'search'\n  > & {\n    combobox?: string;\n    create?: string;\n    createIcon?: {\n      createIcon?: string;\n      root?: string;\n      icon?: string;\n      iconRaw?: {\n        iconRaw?: string;\n        root?: string;\n      };\n    };\n    header?: string;\n    footer?: string;\n    group?: string;\n    groupLabel?: string;\n  };\n};\n\nexport const Combobox = ({\n  name,\n  label,\n  description,\n  error,\n  disabled,\n  placeholder,\n  withinPortal,\n  keepMounted,\n  clearable,\n  creatable,\n  chevron,\n  startSlot,\n  endSlot,\n  options,\n  readOnly,\n  empty,\n  emptyMessage,\n  createNewItem,\n  btnClearLabel,\n  onChange,\n  classNames,\n}: ComboboxProps) => {\n  const [value, setValue] = useState<{ id: string | number; value: string }>({\n    id: '',\n    value: '',\n  });\n  const [search, setSearch] = useState('');\n\n  const shouldFilterOptions = options.every((item) => item.value !== search);\n  const exactOptionMatch = options.some(\n    (item) => item.value.toLowerCase() === search.toLowerCase().trim(),\n  );\n\n  const filteredOptions = shouldFilterOptions\n    ? options.filter((item) =>\n        item.value.toLowerCase().includes(search.toLowerCase().trim()),\n      )\n    : options;\n\n  const optionsList = filteredOptions.map(\n    (item: { id: string | number; value: string }) => (\n      <Dropdown.Option value={item.value} key={item.id}>\n        {item.value}\n      </Dropdown.Option>\n    ),\n  );\n\n  const isEmpty = !(search.length > 0);\n\n  return (\n    <Dropdown\n      name={name}\n      label={label}\n      description={description}\n      placeholder={placeholder}\n      disabled={disabled}\n      error={error}\n      withinPortal={withinPortal}\n      keepMounted={keepMounted}\n      clearable={clearable}\n      chevron={chevron}\n      readOnly={readOnly}\n      btnClearLabel={btnClearLabel}\n      setValue={(val, combobox) => {\n        const option = options.find((option) => option.value === val);\n\n        if (val === '$create') {\n          setValue({ id: '', value: search });\n          setSearch(search);\n          combobox.closeDropdown();\n          return;\n        }\n        if (val === undefined) {\n          setValue({ id: '', value: '' });\n          setSearch('');\n          return;\n        }\n\n        setValue(option ?? { id: '', value: '' });\n        setSearch(val);\n        combobox.closeDropdown();\n      }}\n      value={value?.value}\n      search={search}\n      startSlot={startSlot}\n      endSlot={endSlot}\n      onChange={(combobox, value) => {\n        combobox.openDropdown();\n        combobox.updateSelectedOptionIndex();\n        setSearch(value ?? '');\n        onChange?.(value ?? '');\n      }}\n      onClick={(combobox) => {\n        combobox.openDropdown();\n      }}\n      onFocus={(combobox) => combobox.openDropdown()}\n      onBlur={(combobox) => {\n        combobox.closeDropdown();\n        setSearch(isEmpty ? '' : value?.value);\n        if (isEmpty) {\n          setValue({\n            id: '',\n            value: '',\n          });\n        }\n      }}\n      classNames={{\n        dropdown: classNames?.combobox ?? combobox(),\n        root: classNames?.root ?? comboboxRoot(),\n        options: classNames?.options ?? comboboxOptions(),\n        option: classNames?.option ?? comboboxOption(),\n        empty: classNames?.empty ?? comboboxEmpty(),\n        scrollArea: {\n          scrollArea:\n            classNames?.scrollArea?.scrollArea ?? comboboxScrollAreaAutosize(),\n        },\n        textInput: {\n          root:\n            classNames?.textInput?.root ??\n            cx(comboboxTextInput(), comboboxTextInputRoot()),\n          label: classNames?.textInput?.label ?? comboboxTextInputLabel(),\n          description:\n            classNames?.textInput?.description ??\n            comboboxTextInputDescription(),\n          error: classNames?.textInput?.error ?? comboboxTextInputError(),\n          wrapper: classNames?.textInput?.wrapper ?? comboboxTextInputWrapper(),\n          input: classNames?.textInput?.input ?? comboboxTextInputInput(),\n          section: classNames?.textInput?.section ?? comboboxTextInputSection(),\n          required:\n            classNames?.textInput?.required ?? comboboxTextInputRequired(),\n          endSlot: {\n            chevron: {\n              iconWrapped:\n                classNames?.textInput?.endSlot?.chevron?.iconWrapped ??\n                comboboxChevron(),\n              root:\n                classNames?.textInput?.endSlot?.chevron?.root ??\n                comboboxChevronRoot(),\n              open: {\n                iconRaw:\n                  classNames?.textInput?.endSlot?.chevron?.open?.iconRaw ??\n                  comboboxChevronIcon(),\n                root:\n                  classNames?.textInput?.endSlot?.chevron?.open?.root ??\n                  comboboxChevronIconRoot(),\n              },\n              close: {\n                iconRaw:\n                  classNames?.textInput?.endSlot?.chevron?.close?.iconRaw ??\n                  comboboxChevronIcon(),\n                root:\n                  classNames?.textInput?.endSlot?.chevron?.close?.root ??\n                  comboboxChevronIconRoot({ invert: true }),\n              },\n            },\n            clearButton: {\n              buttonIcon:\n                classNames?.textInput?.endSlot?.clearButton?.buttonIcon ??\n                comboboxClearButton(),\n              root:\n                classNames?.textInput?.endSlot?.clearButton?.root ??\n                comboboxClearButtonRoot(),\n              icon:\n                classNames?.textInput?.endSlot?.clearButton?.icon ??\n                comboboxClearButtonIcon(),\n              iconRaw: {\n                iconRaw:\n                  classNames?.textInput?.endSlot?.clearButton?.iconRaw\n                    ?.iconRaw ?? comboboxClearButtonIconRaw(),\n                root:\n                  classNames?.textInput?.endSlot?.clearButton?.iconRaw?.root ??\n                  comboboxClearButtonIconRawRoot(),\n              },\n            },\n          },\n        },\n      }}\n    >\n      <Dropdown.Options>\n        {optionsList.length > 0\n          ? optionsList\n          : creatable\n          ? !exactOptionMatch &&\n            search.trim().length > 0 && (\n              <Dropdown.Option\n                classNames={{\n                  option: cx(\n                    classNames?.create ?? comboboxOptionCreate(),\n                    comboboxOptionCreateCreate(),\n                  ),\n                }}\n                value='$create'\n              >\n                <Icon\n                  path='/icons/sprite-mage.svg'\n                  name='mage-combobox-plus'\n                  classNames={{\n                    icon:\n                      classNames?.createIcon?.createIcon ??\n                      comboboxOptionCreateIcon(),\n\n                    root:\n                      classNames?.createIcon?.root ??\n                      comboboxOptionCreateIconRoot(),\n                    iconRaw: {\n                      iconRaw:\n                        classNames?.createIcon?.iconRaw?.iconRaw ??\n                        comboboxOptionCreateIconIconRaw(),\n                      root:\n                        classNames?.createIcon?.iconRaw?.root ??\n                        comboboxOptionCreateIconIconRawRoot(),\n                    },\n                  }}\n                />\n                {createNewItem ?? 'Create'} {search}\n              </Dropdown.Option>\n            )\n          : empty !== null && (\n              <Dropdown.Empty\n                classNames={{ empty: classNames?.empty ?? comboboxEmpty() }}\n              >\n                {empty ?? (emptyMessage || 'No results')}\n              </Dropdown.Empty>\n            )}\n      </Dropdown.Options>\n    </Dropdown>\n  );\n};\n"],"mappings":"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"}