@mage-ui/components 0.0.44 → 0.0.46

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

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime11 from "react/jsx-runtime";
+import * as react_jsx_runtime35 from "react/jsx-runtime";
 import { ComponentProps, ReactNode } from "react";
 
 //#region src/components/buttons/button/Button.d.ts
@@ -19,7 +19,7 @@ declare const Button: ({
   endSlot,
   children,
   ...props
-}: ButtonProps) => react_jsx_runtime11.JSX.Element;
+}: ButtonProps) => react_jsx_runtime35.JSX.Element;
 //# sourceMappingURL=Button.d.ts.map
 
 //#endregion

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

@@ -1,5 +1,5 @@
 import { ButtonProps } from "../button/Button.js";
-import * as react_jsx_runtime10 from "react/jsx-runtime";
+import * as react_jsx_runtime8 from "react/jsx-runtime";
 
 //#region src/components/buttons/button-icon/ButtonIcon.d.ts
 type ButtonIconProps = ButtonProps & {
@@ -15,7 +15,7 @@ declare const ButtonIcon: ({
   icon,
   classNames,
   ...props
-}: ButtonIconProps) => react_jsx_runtime10.JSX.Element;
+}: ButtonIconProps) => react_jsx_runtime8.JSX.Element;
 //# sourceMappingURL=ButtonIcon.d.ts.map
 
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonIcon.d.ts","names":[],"sources":["../../../../src/components/buttons/button-icon/ButtonIcon.tsx"],"sourcesContent":[],"mappings":";;;;KAMY,eAAA,GAAkB;;;EAAlB,UAAA,CAAA,EAAA;IASC,IAAA,CAAA,EAAA,MAkBZ;IAAA,IAAA,CAAA,EAAA,MAAA;EAAA,CAAA;CAlB0B;AAAA,cAAd,UAAc,EAAA,CAAA;EAAA,KAAA;EAAA,IAAA;EAAA,UAAA;EAAA,GAAA;AAAA,CAAA,EAKxB,eALwB,EAAA,GAKT,mBAAA,CAAA,GAAA,CAAA,OALS"}
+{"version":3,"file":"ButtonIcon.d.ts","names":[],"sources":["../../../../src/components/buttons/button-icon/ButtonIcon.tsx"],"sourcesContent":[],"mappings":";;;;KAMY,eAAA,GAAkB;;;EAAlB,UAAA,CAAA,EAAA;IASC,IAAA,CAAA,EAAA,MAkBZ;IAAA,IAAA,CAAA,EAAA,MAAA;EAAA,CAAA;CAlB0B;AAAA,cAAd,UAAc,EAAA,CAAA;EAAA,KAAA;EAAA,IAAA;EAAA,UAAA;EAAA,GAAA;AAAA,CAAA,EAKxB,eALwB,EAAA,GAKT,kBAAA,CAAA,GAAA,CAAA,OALS"}

package/dist/components/controls/dropdown/Combobox.d.ts

@@ -1,6 +1,6 @@
 import { DropdownBaseProps } from "./DropdownBase.js";
 import { InputTextProps } from "../input-text/InputText.js";
-import * as react_jsx_runtime41 from "react/jsx-runtime";
+import * as react_jsx_runtime38 from "react/jsx-runtime";
 import React from "react";
 
 //#region src/components/controls/dropdown/Combobox.d.ts
@@ -34,7 +34,7 @@ declare const Combobox: ({
   create,
   empty,
   ...props
-}: ComboboxProps) => react_jsx_runtime41.JSX.Element;
+}: ComboboxProps) => react_jsx_runtime38.JSX.Element;
 //# sourceMappingURL=Combobox.d.ts.map
 
 //#endregion

package/dist/components/controls/dropdown/DropdownBase.d.ts

@@ -19,6 +19,9 @@ type DropdownBaseProps = {
   endSlot?: React.ReactNode;
   startSlot?: React.ReactNode;
   children: React.ReactNode;
+  portal?: boolean;
+  position?: 'bottom' | 'bottom-start' | 'bottom-end' | 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';
+  width?: number | string;
 };
 //#endregion
 export { DropdownBaseProps };

package/dist/components/controls/dropdown/DropdownBase.js

@@ -1,2 +1,2 @@
-import{comboboxOptions as e,dropdown as t}from"@mage-ui/styled-system/recipes";import{Combobox as n,useCombobox as r}from"@mantine/core";import{jsx as i,jsxs as a}from"react/jsx-runtime";import{cloneElement as o}from"react";const s=({defaultOpened:s,readOnly:c,setQuery:l,setSelectedOption:u,selectedOption:d,target:f,classNames:p,children:m,endSlot:h,startSlot:g,..._})=>{let v=r({defaultOpened:s??!1,scrollBehavior:`smooth`,onDropdownClose:()=>{v.resetSelectedOption()}}),y=o(f,{...f?.props??{},onChange:({currentTarget:e})=>{l?.(e.value),v.openDropdown(),v.updateSelectedOptionIndex()},onBlur:()=>{l?.(d?.value??``)},onClick:()=>{c?v.toggleDropdown():v.openDropdown()},startSlot:g,endSlot:h});return a(n,{readOnly:c??!1,onOptionSubmit:e=>{u(e),l?.(e),v.closeDropdown()},store:v,withinPortal:!0,position:`bottom-start`,..._,children:[i(n.Target,{children:y}),i(n.Dropdown,{classNames:{dropdown:p?.dropdown??t()},children:i(n.Options,{classNames:{options:p?.options??e()},children:m})})]})};s.Option=n.Option,s.Option.displayName=`DropdownBase.Option`,s.Empty=n.Empty,s.Empty.displayName=`DropdownBase.Empty`;export{s as DropdownBase};
+import{comboboxOptions as e,dropdown as t}from"@mage-ui/styled-system/recipes";import{Combobox as n,useCombobox as r}from"@mantine/core";import{jsx as i,jsxs as a}from"react/jsx-runtime";import{cloneElement as o}from"react";const s=({defaultOpened:s,readOnly:c,setQuery:l,setSelectedOption:u,selectedOption:d,target:f,classNames:p,children:m,endSlot:h,startSlot:g,position:_,portal:v,width:y,...b})=>{let x=r({defaultOpened:s??!1,scrollBehavior:`smooth`,onDropdownClose:()=>{x.resetSelectedOption()}}),S=o(f,{...f?.props??{},onChange:({currentTarget:e})=>{l?.(e.value),x.openDropdown(),x.updateSelectedOptionIndex()},onBlur:()=>{l?.(d?.value??``)},onClick:()=>{c?x.toggleDropdown():x.openDropdown()},startSlot:g,endSlot:h});return a(n,{readOnly:c??!1,onOptionSubmit:e=>{u(e),l?.(e),x.closeDropdown()},store:x,withinPortal:v||!0,position:_||`bottom-start`,width:y||`auto`,...b,children:[i(n.Target,{children:S}),i(n.Dropdown,{classNames:{dropdown:p?.dropdown??t()},children:i(n.Options,{classNames:{options:p?.options??e()},children:m})})]})};s.Option=n.Option,s.Option.displayName=`DropdownBase.Option`,s.Empty=n.Empty,s.Empty.displayName=`DropdownBase.Empty`;export{s as DropdownBase};
 //# sourceMappingURL=DropdownBase.js.map

package/dist/components/controls/dropdown/DropdownBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownBase.js","names":["MantineCombobox"],"sources":["../../../../src/components/controls/dropdown/DropdownBase.tsx"],"sourcesContent":["import { type ChangeEvent, cloneElement } from 'react';\n\nimport { comboboxOptions, dropdown } from '@mage-ui/styled-system/recipes';\nimport { Combobox as MantineCombobox, useCombobox } from '@mantine/core';\n\nexport type DropdownBaseProps = {\n  defaultOpened?: boolean;\n  readOnly?: boolean;\n  setQuery?: (value: string) => void;\n  selectedOption?: { id: string | number; value: string } | undefined;\n  setSelectedOption: (value: string | undefined) => void;\n  target: React.ReactElement;\n  classNames?: {\n    dropdown?: string;\n    options?: string;\n  };\n  endSlot?: React.ReactNode;\n  startSlot?: React.ReactNode;\n  children: React.ReactNode;\n};\n\nexport const DropdownBase = ({\n  defaultOpened,\n  readOnly,\n  setQuery,\n  setSelectedOption,\n  selectedOption,\n  target,\n  classNames,\n  children,\n  endSlot,\n  startSlot,\n  ...props\n}: DropdownBaseProps) => {\n  const combobox = useCombobox({\n    defaultOpened: defaultOpened ?? false,\n    scrollBehavior: 'smooth',\n    onDropdownClose: () => {\n      combobox.resetSelectedOption();\n    },\n  });\n\n  const targetComponent = cloneElement(target, {\n    ...(target?.props ?? {}),\n    onChange: ({\n      currentTarget,\n    }: ChangeEvent<HTMLInputElement | HTMLButtonElement>) => {\n      setQuery?.(currentTarget.value);\n      combobox.openDropdown();\n      combobox.updateSelectedOptionIndex();\n    },\n    onBlur: () => {\n      setQuery?.(selectedOption?.value ?? '');\n    },\n    onClick: () => {\n      if (readOnly) {\n        combobox.toggleDropdown();\n      } else {\n        combobox.openDropdown();\n      }\n    },\n    startSlot: startSlot,\n    endSlot: endSlot,\n  } as React.HTMLProps<HTMLInputElement | HTMLButtonElement>);\n\n  return (\n    <MantineCombobox\n      readOnly={readOnly ?? false}\n      onOptionSubmit={(option) => {\n        setSelectedOption(option);\n        setQuery?.(option);\n        combobox.closeDropdown();\n      }}\n      store={combobox}\n      withinPortal={true}\n      position='bottom-start'\n      {...props}\n    >\n      <MantineCombobox.Target>{targetComponent}</MantineCombobox.Target>\n      <MantineCombobox.Dropdown\n        classNames={{\n          dropdown: classNames?.dropdown ?? dropdown(),\n        }}\n      >\n        <MantineCombobox.Options\n          classNames={{\n            options: classNames?.options ?? comboboxOptions(),\n          }}\n        >\n          {children}\n        </MantineCombobox.Options>\n      </MantineCombobox.Dropdown>\n    </MantineCombobox>\n  );\n};\n\nDropdownBase.Option = MantineCombobox.Option;\nDropdownBase.Option.displayName = 'DropdownBase.Option';\nDropdownBase.Empty = MantineCombobox.Empty;\nDropdownBase.Empty.displayName = 'DropdownBase.Empty';\n"],"mappings":"gOAqBA,MAAa,EAAe,CAAC,CAC3B,gBACA,WACA,WACA,oBACA,iBACA,SACA,aACA,WACA,UACA,YACA,GAAG,EACe,GAAK,CASvB,IARM,EAAW,EAAY,CAC3B,cAAe,IAAiB,EAChC,eAAgB,SAChB,gBAAiB,IAAM,CACrB,EAAS,qBAAqB,AAC/B,CACF,EAAC,CAEI,EAAkB,EAAa,EAAQ,CAC3C,GAAI,GAAQ,OAAS,CAAE,EACvB,SAAU,CAAC,CACT,gBACkD,GAAK,CAGvD,AAFA,IAAW,EAAc,MAAM,CAC/B,EAAS,cAAc,CACvB,EAAS,2BAA2B,AACrC,EACD,OAAQ,IAAM,CACZ,IAAW,GAAgB,OAAS,GAAG,AACxC,EACD,QAAS,IAAM,CACb,AAAI,EACF,EAAS,gBAAgB,CAEzB,EAAS,cAAc,AAE1B,EACU,YACF,SACV,EAA0D,CAE3D,MACE,GAACA,EAAAA,CACC,SAAU,IAAY,EACtB,eAAgB,AAAC,GAAW,CAG1B,AAFA,EAAkB,EAAO,CACzB,IAAW,EAAO,CAClB,EAAS,eAAe,AACzB,EACD,MAAO,EACP,cAAc,EACd,SAAS,eACT,GAAI,YAEJ,EAACA,EAAgB,OAAA,CAAA,SAAQ,CAAA,EAAyC,CAClE,EAACA,EAAgB,SAAA,CACf,WAAY,CACV,SAAU,GAAY,UAAY,GAAU,AAC7C,WAED,EAACA,EAAgB,QAAA,CACf,WAAY,CACV,QAAS,GAAY,SAAW,GAAiB,AAClD,EAEA,YACuB,EACD,GACX,AAErB,EAKD,AAHA,EAAa,OAASA,EAAgB,OACtC,EAAa,OAAO,YAAc,sBAClC,EAAa,MAAQA,EAAgB,MACrC,EAAa,MAAM,YAAc"}
+{"version":3,"file":"DropdownBase.js","names":["MantineCombobox"],"sources":["../../../../src/components/controls/dropdown/DropdownBase.tsx"],"sourcesContent":["import { type ChangeEvent, cloneElement } from 'react';\n\nimport { comboboxOptions, dropdown } from '@mage-ui/styled-system/recipes';\nimport { Combobox as MantineCombobox, useCombobox } from '@mantine/core';\n\nexport type DropdownBaseProps = {\n  defaultOpened?: boolean;\n  readOnly?: boolean;\n  setQuery?: (value: string) => void;\n  selectedOption?: { id: string | number; value: string } | undefined;\n  setSelectedOption: (value: string | undefined) => void;\n  target: React.ReactElement;\n  classNames?: {\n    dropdown?: string;\n    options?: string;\n  };\n  endSlot?: React.ReactNode;\n  startSlot?: React.ReactNode;\n  children: React.ReactNode;\n  portal?: boolean;\n  position?:\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end';\n  width?: number | string;\n};\n\nexport const DropdownBase = ({\n  defaultOpened,\n  readOnly,\n  setQuery,\n  setSelectedOption,\n  selectedOption,\n  target,\n  classNames,\n  children,\n  endSlot,\n  startSlot,\n  position,\n  portal,\n  width,\n  ...props\n}: DropdownBaseProps) => {\n  const combobox = useCombobox({\n    defaultOpened: defaultOpened ?? false,\n    scrollBehavior: 'smooth',\n    onDropdownClose: () => {\n      combobox.resetSelectedOption();\n    },\n  });\n\n  const targetComponent = cloneElement(target, {\n    ...(target?.props ?? {}),\n    onChange: ({\n      currentTarget,\n    }: ChangeEvent<HTMLInputElement | HTMLButtonElement>) => {\n      setQuery?.(currentTarget.value);\n      combobox.openDropdown();\n      combobox.updateSelectedOptionIndex();\n    },\n    onBlur: () => {\n      setQuery?.(selectedOption?.value ?? '');\n    },\n    onClick: () => {\n      if (readOnly) {\n        combobox.toggleDropdown();\n      } else {\n        combobox.openDropdown();\n      }\n    },\n    // opened: combobox.isDropdownOpened,\n    startSlot: startSlot,\n    endSlot: endSlot,\n  } as React.HTMLProps<HTMLInputElement | HTMLButtonElement>);\n\n  return (\n    <MantineCombobox\n      readOnly={readOnly ?? false}\n      onOptionSubmit={(option) => {\n        setSelectedOption(option);\n        setQuery?.(option);\n        combobox.closeDropdown();\n      }}\n      store={combobox}\n      withinPortal={portal || true}\n      position={position || 'bottom-start'}\n      width={width || 'auto'}\n      {...props}\n    >\n      <MantineCombobox.Target>{targetComponent}</MantineCombobox.Target>\n      <MantineCombobox.Dropdown\n        classNames={{\n          dropdown: classNames?.dropdown ?? dropdown(),\n        }}\n      >\n        <MantineCombobox.Options\n          classNames={{\n            options: classNames?.options ?? comboboxOptions(),\n          }}\n        >\n          {children}\n        </MantineCombobox.Options>\n      </MantineCombobox.Dropdown>\n    </MantineCombobox>\n  );\n};\n\nDropdownBase.Option = MantineCombobox.Option;\nDropdownBase.Option.displayName = 'DropdownBase.Option';\nDropdownBase.Empty = MantineCombobox.Empty;\nDropdownBase.Empty.displayName = 'DropdownBase.Empty';\n"],"mappings":"gOAoCA,MAAa,EAAe,CAAC,CAC3B,gBACA,WACA,WACA,oBACA,iBACA,SACA,aACA,WACA,UACA,YACA,WACA,SACA,QACA,GAAG,EACe,GAAK,CASvB,IARM,EAAW,EAAY,CAC3B,cAAe,IAAiB,EAChC,eAAgB,SAChB,gBAAiB,IAAM,CACrB,EAAS,qBAAqB,AAC/B,CACF,EAAC,CAEI,EAAkB,EAAa,EAAQ,CAC3C,GAAI,GAAQ,OAAS,CAAE,EACvB,SAAU,CAAC,CACT,gBACkD,GAAK,CAGvD,AAFA,IAAW,EAAc,MAAM,CAC/B,EAAS,cAAc,CACvB,EAAS,2BAA2B,AACrC,EACD,OAAQ,IAAM,CACZ,IAAW,GAAgB,OAAS,GAAG,AACxC,EACD,QAAS,IAAM,CACb,AAAI,EACF,EAAS,gBAAgB,CAEzB,EAAS,cAAc,AAE1B,EAEU,YACF,SACV,EAA0D,CAE3D,MACE,GAACA,EAAAA,CACC,SAAU,IAAY,EACtB,eAAgB,AAAC,GAAW,CAG1B,AAFA,EAAkB,EAAO,CACzB,IAAW,EAAO,CAClB,EAAS,eAAe,AACzB,EACD,MAAO,EACP,aAAc,IAAU,EACxB,SAAU,GAAY,eACtB,MAAO,GAAS,OAChB,GAAI,YAEJ,EAACA,EAAgB,OAAA,CAAA,SAAQ,CAAA,EAAyC,CAClE,EAACA,EAAgB,SAAA,CACf,WAAY,CACV,SAAU,GAAY,UAAY,GAAU,AAC7C,WAED,EAACA,EAAgB,QAAA,CACf,WAAY,CACV,QAAS,GAAY,SAAW,GAAiB,AAClD,EAEA,YACuB,EACD,GACX,AAErB,EAKD,AAHA,EAAa,OAASA,EAAgB,OACtC,EAAa,OAAO,YAAc,sBAClC,EAAa,MAAQA,EAAgB,MACrC,EAAa,MAAM,YAAc"}

package/dist/components/controls/dropdown/{DropdownButton.d.ts → Menu.d.ts}

@@ -1,8 +1,9 @@
-import * as react_jsx_runtime42 from "react/jsx-runtime";
-import * as react43 from "react";
+import { DropdownBaseProps } from "./DropdownBase.js";
+import * as react_jsx_runtime39 from "react/jsx-runtime";
+import * as react40 from "react";
 
-//#region src/components/controls/dropdown/DropdownButton.d.ts
-type DropdownButtonProps = {
+//#region src/components/controls/dropdown/Menu.d.ts
+type MenuProps = Omit<DropdownBaseProps, 'setSelectedOption' | 'target' | 'opened'> & {
   label?: React.ReactNode;
   a11yLabel?: string;
   classNames?: {
@@ -19,7 +20,7 @@ type DropdownButtonProps = {
   endSlot?: React.ReactNode;
   startSlot?: React.ReactNode;
 };
-declare const DropdownButton: {
+declare const Menu: {
   ({
     label,
     a11yLabel,
@@ -29,20 +30,20 @@ declare const DropdownButton: {
     endSlot,
     startSlot,
     ...props
-  }: DropdownButtonProps): react_jsx_runtime42.JSX.Element;
+  }: MenuProps): react_jsx_runtime39.JSX.Element;
   Option: {
     ({
       children
-    }: DropdownButtonOptionProps): react43.ReactNode;
+    }: MenuOptionProps): react40.ReactNode;
     displayName: string;
   };
 };
-type DropdownButtonOptionProps = {
+type MenuOptionProps = {
   id: string | number;
   value: string;
   onClick: () => void;
   children?: React.ReactNode;
 };
 //#endregion
-export { DropdownButton, DropdownButtonProps };
-//# sourceMappingURL=DropdownButton.d.ts.map
+export { Menu, MenuProps };
+//# sourceMappingURL=Menu.d.ts.map

package/dist/components/controls/dropdown/Menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.d.ts","names":[],"sources":["../../../../src/components/controls/dropdown/Menu.tsx"],"sourcesContent":[],"mappings":";;;;;KAQY,SAAA,GAAY,KACtB;UAGQ,KAAA,CAAM;;;IAJJ,MAAA,CAAA,EAAS,MAAA;IAAA,QAAA,CAAA,EAAA,MAAA;EAAA,CAAA;EACF,gBADK,CAAA,EAAA;IAId,IAAA,CAAM,EAAA,MAAA;IAYH,KAAM,CAAA,EAAA,MAAA;IACP,KAAM,CAAA,EAAA,MAAA;IACJ,OAAM,CAAA,EAAA,MAAA;EAAS,CAAA;EAGhB,QAqDZ,CAAA,EA1DY,KAAA,CAAM,SA0DlB;EAAA,OAAA,CAAA,EAzDW,KAAA,CAAM,SAyDjB;EAAA,SAAA,CAAA,EAxDa,KAAA,CAAM,SAwDnB;;cArDY;;;;;;;;;;KASV,YAAS,mBAAA,CAAA,GAAA,CAAA;;;;OAqDkB,kBAAe,OAAA,CAAA;;;CArDjC;KA8CP,eAAA,GA9CO;MAqDkB,MAAA,GAAA,MAAA;EAAe,KAAA,EAAA,MAAA;EAAA,OAAA,EAAA,GAAA,GAAA,IAAA;EAPxC,QAAA,CAAA,EAIQ,KAAA,CAAM,SAJC"}

package/dist/components/controls/dropdown/{DropdownButton.js → Menu.js}

@@ -1,2 +1,2 @@
-import{Button as e}from"../../buttons/button/Button.js";import{DropdownBase as t}from"./DropdownBase.js";import{comboboxOption as n,dropdown as r}from"@mage-ui/styled-system/recipes";import{jsx as i}from"react/jsx-runtime";import{Children as a,isValidElement as o}from"react";const s=({label:c,a11yLabel:l,classNames:u,buttonClassNames:d,children:f,endSlot:p,startSlot:m,...h})=>{let g=a.toArray(f).filter(e=>o(e)&&e.type===s.Option),_=e=>{let t=g.find(t=>t.props.value===e);t&&t.props.onClick()};return i(t,{setSelectedOption:_,target:i(e,{classNames:d,...l&&{"aria-label":l},children:c}),classNames:{dropdown:u?.dropdown??r({size:`m`})},startSlot:m,endSlot:p,...h,children:g.map(e=>{let{id:r,value:a,children:o}=e.props;return i(t.Option,{value:a,classNames:{option:u?.option??n()},children:o},r)})})},c=({children:e})=>e;c.displayName=`DropdownButton.Option`,s.Option=c;export{s as DropdownButton};
-//# sourceMappingURL=DropdownButton.js.map
+import{Button as e}from"../../buttons/button/Button.js";import{DropdownBase as t}from"./DropdownBase.js";import{comboboxOption as n,dropdown as r}from"@mage-ui/styled-system/recipes";import{jsx as i}from"react/jsx-runtime";import{Children as a,isValidElement as o}from"react";const s=({label:c,a11yLabel:l,classNames:u,buttonClassNames:d,children:f,endSlot:p,startSlot:m,...h})=>{let g=a.toArray(f).filter(e=>o(e)&&e.type===s.Option),_=e=>{let t=g.find(t=>t.props.value===e);t&&t.props.onClick()};return i(t,{setSelectedOption:_,target:i(e,{classNames:d,...l&&{"aria-label":l},children:c}),classNames:{dropdown:u?.dropdown??r()},startSlot:m,endSlot:p,...h,children:g.map(e=>{let{id:r,value:a,children:o}=e.props;return i(t.Option,{value:a,classNames:{option:u?.option??n()},children:o},r)})})},c=({children:e})=>e;c.displayName=`Menu.Option`,s.Option=c;export{s as Menu};
+//# sourceMappingURL=Menu.js.map

package/dist/components/controls/dropdown/Menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.js","names":["value?: string","children"],"sources":["../../../../src/components/controls/dropdown/Menu.tsx"],"sourcesContent":["import { Children, isValidElement } from 'react';\n\nimport { comboboxOption, dropdown } from '@mage-ui/styled-system/recipes';\n// import type { FloatingPosition, PopoverWidth } from '@mantine/core';\nimport { Button } from '@/components/buttons';\n\nimport { DropdownBase, type DropdownBaseProps } from './DropdownBase';\n\nexport type MenuProps = Omit<\n  DropdownBaseProps,\n  'setSelectedOption' | 'target' | 'opened'\n> & {\n  label?: React.ReactNode;\n  a11yLabel?: string;\n  classNames?: {\n    option?: string;\n    dropdown?: string;\n  };\n  buttonClassNames?: {\n    root?: string;\n    inner?: string;\n    label?: string;\n    section?: string;\n  };\n  children?: React.ReactNode;\n  endSlot?: React.ReactNode;\n  startSlot?: React.ReactNode;\n};\n\nexport const Menu = ({\n  label,\n  a11yLabel,\n  classNames,\n  buttonClassNames,\n  children,\n  endSlot,\n  startSlot,\n  ...props\n}: MenuProps) => {\n  const options = Children.toArray(children).filter(\n    (child): child is React.ReactElement<MenuOptionProps> =>\n      isValidElement(child) && child.type === Menu.Option,\n  );\n\n  const handleOptionSelect = (value?: string) => {\n    const selected = options.find((child) => child.props.value === value);\n    if (selected) selected.props.onClick();\n  };\n\n  return (\n    <DropdownBase\n      setSelectedOption={handleOptionSelect}\n      target={\n        <Button\n          classNames={buttonClassNames}\n          {...(a11yLabel && { 'aria-label': a11yLabel })}\n        >\n          {label}\n        </Button>\n      }\n      classNames={{\n        dropdown: classNames?.dropdown ?? dropdown(),\n      }}\n      startSlot={startSlot}\n      endSlot={endSlot}\n      {...props}\n    >\n      {options.map((child) => {\n        const { id, value, children } = child.props;\n\n        return (\n          <DropdownBase.Option\n            key={id}\n            value={value}\n            classNames={{ option: classNames?.option ?? comboboxOption() }}\n          >\n            {children}\n          </DropdownBase.Option>\n        );\n      })}\n    </DropdownBase>\n  );\n};\n\ntype MenuOptionProps = {\n  id: string | number;\n  value: string;\n  onClick: () => void;\n  children?: React.ReactNode;\n};\n\nconst Option = ({ children }: MenuOptionProps) => {\n  return children;\n};\n\nOption.displayName = 'Menu.Option';\nMenu.Option = Option;\n"],"mappings":"oRA2FA,MA9Da,EAAO,CAAC,CACnB,QACA,YACA,aACA,mBACA,WACA,UACA,YACA,GAAG,EACO,GAAK,CAMf,IALM,EAAU,EAAS,QAAQ,EAAS,CAAC,OACzC,AAAC,GACC,EAAe,EAAM,EAAI,EAAM,OAAS,EAAK,OAChD,CAEK,EAAqB,AAACA,GAAmB,CAC7C,IAAM,EAAW,EAAQ,KAAK,AAAC,GAAU,EAAM,MAAM,QAAU,EAAM,CACrE,AAAI,GAAU,EAAS,MAAM,SAAS,AACvC,EAED,MACE,GAAC,EAAA,CACC,kBAAmB,EACnB,OACE,EAAC,EAAA,CACC,WAAY,EACZ,GAAK,GAAa,CAAE,aAAc,CAAW,WAE5C,GACM,CAEX,WAAY,CACV,SAAU,GAAY,UAAY,GAAU,AAC7C,EACU,YACF,UACT,GAAI,WAEH,EAAQ,IAAI,AAAC,GAAU,CACtB,GAAM,CAAE,KAAI,QAAO,SAAA,EAAU,CAAG,EAAM,MAEtC,MACE,GAAC,EAAa,OAAA,CAEL,QACP,WAAY,CAAE,OAAQ,GAAY,QAAU,GAAgB,AAAE,WAE7DC,GAJI,EAKe,AAEzB,EAAC,EACW,AAElB,EASK,EAAS,CAAC,CAAE,WAA2B,GACpC,EAIT,AADA,EAAO,YAAc,cACrB,EAAK,OAAS"}

package/dist/components/controls/dropdown/Select.d.ts

@@ -1,6 +1,6 @@
 import { DropdownBaseProps } from "./DropdownBase.js";
 import { InputTextProps } from "../input-text/InputText.js";
-import * as react_jsx_runtime44 from "react/jsx-runtime";
+import * as react_jsx_runtime41 from "react/jsx-runtime";
 
 //#region src/components/controls/dropdown/Select.d.ts
 type SelectProps = Omit<DropdownBaseProps, 'children' | 'onClick' | 'setQuery' | 'target'> & InputTextProps & {
@@ -23,7 +23,7 @@ declare const Select: ({
   options,
   classNames,
   ...props
-}: SelectProps) => react_jsx_runtime44.JSX.Element;
+}: SelectProps) => react_jsx_runtime41.JSX.Element;
 //# sourceMappingURL=Select.d.ts.map
 
 //#endregion

package/dist/components/controls/input-file/InputFile.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime45 from "react/jsx-runtime";
+import * as react_jsx_runtime42 from "react/jsx-runtime";
 
 //#region src/components/controls/input-file/InputFile.d.ts
 type InputFileProps = {
@@ -26,7 +26,7 @@ declare const InputFile: ({
   multiple,
   badgeClassName,
   ...props
-}: InputFileProps) => react_jsx_runtime45.JSX.Element;
+}: InputFileProps) => react_jsx_runtime42.JSX.Element;
 //# sourceMappingURL=InputFile.d.ts.map
 //#endregion
 export { InputFile, InputFileProps };

package/dist/components/controls/input-password/InputPassword.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime46 from "react/jsx-runtime";
+import * as react_jsx_runtime43 from "react/jsx-runtime";
 import { ComponentProps, ReactNode } from "react";
 
 //#region src/components/controls/input-password/InputPassword.d.ts
@@ -26,7 +26,7 @@ declare const InputPassword: ({
   startSlot,
   endSlot,
   ...props
-}: InputPasswordProps) => react_jsx_runtime46.JSX.Element;
+}: InputPasswordProps) => react_jsx_runtime43.JSX.Element;
 //# sourceMappingURL=InputPassword.d.ts.map
 //#endregion
 export { InputPassword, InputPasswordProps };

package/dist/components/controls/input-text/InputText.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime47 from "react/jsx-runtime";
+import * as react_jsx_runtime44 from "react/jsx-runtime";
 import { ComponentProps, ReactNode } from "react";
 
 //#region src/components/controls/input-text/InputText.d.ts
@@ -25,7 +25,7 @@ declare const InputText: ({
   startSlot,
   endSlot,
   ...props
-}: InputTextProps) => react_jsx_runtime47.JSX.Element;
+}: InputTextProps) => react_jsx_runtime44.JSX.Element;
 //# sourceMappingURL=InputText.d.ts.map
 //#endregion
 export { InputText, InputTextProps };

package/dist/components/controls/textarea/Textarea.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime40 from "react/jsx-runtime";
+import * as react_jsx_runtime37 from "react/jsx-runtime";
 import { ComponentProps, ReactNode } from "react";
 
 //#region src/components/controls/textarea/Textarea.d.ts
@@ -27,7 +27,7 @@ declare const Textarea: ({
   autosize,
   onChange,
   ...props
-}: TextareaProps) => react_jsx_runtime40.JSX.Element;
+}: TextareaProps) => react_jsx_runtime37.JSX.Element;
 //# sourceMappingURL=Textarea.d.ts.map
 
 //#endregion

package/dist/components/data-display/avatar/Avatar.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime12 from "react/jsx-runtime";
+import * as react_jsx_runtime45 from "react/jsx-runtime";
 
 //#region src/components/data-display/avatar/Avatar.d.ts
 type AvatarProps = {
@@ -13,7 +13,7 @@ type AvatarProps = {
 declare const Avatar: ({
   classNames,
   ...props
-}: AvatarProps) => react_jsx_runtime12.JSX.Element;
+}: AvatarProps) => react_jsx_runtime45.JSX.Element;
 //# sourceMappingURL=Avatar.d.ts.map
 
 //#endregion

package/dist/components/data-display/badge/Badge.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime13 from "react/jsx-runtime";
+import * as react_jsx_runtime46 from "react/jsx-runtime";
 import React from "react";
 
 //#region src/components/data-display/badge/Badge.d.ts
@@ -17,7 +17,7 @@ declare const Badge: ({
   startSlot,
   classNames,
   ...props
-}: BadgeProps) => react_jsx_runtime13.JSX.Element;
+}: BadgeProps) => react_jsx_runtime46.JSX.Element;
 //# sourceMappingURL=Badge.d.ts.map
 
 //#endregion

package/dist/components/data-display/carousel/Carousel.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime14 from "react/jsx-runtime";
+import * as react_jsx_runtime47 from "react/jsx-runtime";
 import { ReactNode } from "react";
 
 //#region src/components/data-display/carousel/Carousel.d.ts
@@ -40,7 +40,7 @@ declare const Carousel: {
   ({
     classNames,
     ...props
-  }: CarouselProps): react_jsx_runtime14.JSX.Element;
+  }: CarouselProps): react_jsx_runtime47.JSX.Element;
   Slide: {
     ({
       children

package/dist/components/forms/form/Form.d.ts

@@ -11,7 +11,7 @@ import { FormDatePickerProps } from "./controls/FormDatePicker.js";
 import { FormInputFileProps } from "./controls/FormInputFile.js";
 import { FormInputPasswordProps } from "./controls/FormInputPassword.js";
 import { FormIfFieldProps } from "./controls/FormIfField.js";
-import * as react_jsx_runtime15 from "react/jsx-runtime";
+import * as react_jsx_runtime9 from "react/jsx-runtime";
 import { ReactNode } from "react";
 import { ZodEffects, ZodObject, ZodRawShape, z } from "zod";
 
@@ -29,11 +29,11 @@ declare const Form: {
     onSubmit,
     children,
     ...props
-  }: FormProps): react_jsx_runtime15.JSX.Element;
+  }: FormProps): react_jsx_runtime9.JSX.Element;
   InputText: {
     ({
       ...props
-    }: FormInputTextProps): react_jsx_runtime15.JSX.Element;
+    }: FormInputTextProps): react_jsx_runtime9.JSX.Element;
     displayName: string;
     rules: {
       required: (message?: string, min?: number) => z.ZodString;
@@ -44,7 +44,7 @@ declare const Form: {
       name,
       control,
       ...props
-    }: FormCheckboxProps): react_jsx_runtime15.JSX.Element;
+    }: FormCheckboxProps): react_jsx_runtime9.JSX.Element;
     displayName: string;
     rules: {
       required: (message?: string) => ZodEffects<z.ZodBoolean, boolean, boolean>;
@@ -56,7 +56,7 @@ declare const Form: {
       control,
       children,
       ...props
-    }: FormCheckboxGroupProps): react_jsx_runtime15.JSX.Element;
+    }: FormCheckboxGroupProps): react_jsx_runtime9.JSX.Element;
     displayName: string;
     rules: {
       required: (message?: string) => z.ZodArray<z.ZodString, "many">;
@@ -74,7 +74,7 @@ declare const Form: {
       name,
       control,
       ...props
-    }: FormComboboxProps): react_jsx_runtime15.JSX.Element;
+    }: FormComboboxProps): react_jsx_runtime9.JSX.Element;
     displayName: string;
     rules: {
       required: (message?: string, defaultValue?: {
@@ -104,20 +104,20 @@ declare const Form: {
       control,
       children,
       ...props
-    }: FormRadioGroupProps): react_jsx_runtime15.JSX.Element;
+    }: FormRadioGroupProps): react_jsx_runtime9.JSX.Element;
     displayName: string;
     rules: {
       required: (message?: string) => ZodEffects<z.ZodAny, any, any>;
     };
   };
   Radio: {
-    (props: RadioProps): react_jsx_runtime15.JSX.Element;
+    (props: RadioProps): react_jsx_runtime9.JSX.Element;
     displayName: string;
   };
   Textarea: {
     ({
       ...props
-    }: FormTextareaProps): react_jsx_runtime15.JSX.Element;
+    }: FormTextareaProps): react_jsx_runtime9.JSX.Element;
     displayName: string;
     rules: {
       required: (message?: string, min?: number) => z.ZodString;
@@ -128,7 +128,7 @@ declare const Form: {
       name,
       control,
       ...props
-    }: FormSelectProps): react_jsx_runtime15.JSX.Element;
+    }: FormSelectProps): react_jsx_runtime9.JSX.Element;
     displayName: string;
     rules: {
       required: (message?: string, defaultValue?: {
@@ -157,7 +157,7 @@ declare const Form: {
       name,
       control,
       ...props
-    }: FormDatePickerProps): react_jsx_runtime15.JSX.Element;
+    }: FormDatePickerProps): react_jsx_runtime9.JSX.Element;
     displayName: string;
     rules: {
       required: (message?: string) => ZodEffects<z.ZodUnion<[z.ZodType<Date, z.ZodTypeDef, Date>, ZodEffects<z.ZodString, string, string>]>, string | Date, string | Date>;
@@ -168,7 +168,7 @@ declare const Form: {
       control,
       name,
       ...props
-    }: FormInputFileProps): react_jsx_runtime15.JSX.Element;
+    }: FormInputFileProps): react_jsx_runtime9.JSX.Element;
     displayName: string;
     rules: {
       required: (message?: string, min?: number) => ZodEffects<z.ZodAny, any, any>;
@@ -177,7 +177,7 @@ declare const Form: {
   InputPassword: {
     ({
       ...props
-    }: FormInputPasswordProps): react_jsx_runtime15.JSX.Element;
+    }: FormInputPasswordProps): react_jsx_runtime9.JSX.Element;
     displayName: string;
     rules: {
       required: (message?: string) => z.ZodString;

package/dist/components/forms/form/Form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Form.d.ts","names":[],"sources":["../../../../src/components/forms/form/Form.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;;;;;;;;;KAwBY,SAAA;;UAEF,UAAU,eAAe,WAAW,UAAU;;YAE5C,KAAA,CAAM;;cAGL;;;;;;;KAMV,YAAS,mBAAA,CAAA,GAAA,CAAA;;;;OAAA;;;;;;;IAbA,CAAA;MAAA,IAAA;MAAS,OAAA;MAAA,GAAA;IAAA,CAAA,mBAAA,CAAA,iCAAA;IAAA,WAAA,EAAA,MAAA;IAED,KAAA,EAAA;MAAV,QAAA,EAAA,CAAA,OAAA,CAAA,EAAA,MAAA,EAAA,aAAA,aAAA,EAAA,OAAA,EAAA,OAAA,CAAA;IAA8C,CAAA;EAAW,CAAA;EAAZ,aAApB,EAAA;IAEvB,CAAA;MAAA,IAAM;MAAA,OAAA;MAAA,QAAA;MAAA,GAAA;IAAA,CAAA,wBAAA,CAAA,iCAAA;IAAS,WAAA,EAAA,MAAA;IAGd,KA8BZ,EAAA;MAAA,QAAA,EAAA,CAAA,OAAA,CAAA,EAAA,MAAA,EAAA,aAAA,YAAA,EAAA,MAAA,CAAA;IAAA,CAAA;;;;;;;IAxBE,CAAA;EAAS,CAAA;EAAA,QAAA,EAAA"}
+{"version":3,"file":"Form.d.ts","names":[],"sources":["../../../../src/components/forms/form/Form.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;;;;;;;;;KAwBY,SAAA;;UAEF,UAAU,eAAe,WAAW,UAAU;;YAE5C,KAAA,CAAM;;cAGL;;;;;;;KAMV,YAAS,kBAAA,CAAA,GAAA,CAAA;;;;OAAA;;;;;;;IAbA,CAAA;MAAA,IAAA;MAAS,OAAA;MAAA,GAAA;IAAA,CAAA,mBAAA,CAAA,gCAAA;IAAA,WAAA,EAAA,MAAA;IAED,KAAA,EAAA;MAAV,QAAA,EAAA,CAAA,OAAA,CAAA,EAAA,MAAA,EAAA,aAAA,aAAA,EAAA,OAAA,EAAA,OAAA,CAAA;IAA8C,CAAA;EAAW,CAAA;EAAZ,aAApB,EAAA;IAEvB,CAAA;MAAA,IAAM;MAAA,OAAA;MAAA,QAAA;MAAA,GAAA;IAAA,CAAA,wBAAA,CAAA,gCAAA;IAAS,WAAA,EAAA,MAAA;IAGd,KA8BZ,EAAA;MAAA,QAAA,EAAA,CAAA,OAAA,CAAA,EAAA,MAAA,EAAA,aAAA,YAAA,EAAA,MAAA,CAAA;IAAA,CAAA;;;;;;;IAxBE,CAAA;EAAS,CAAA;EAAA,QAAA,EAAA"}

package/dist/components/misc/visually-hidden/VisuallyHidden.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime1 from "react/jsx-runtime";
+import * as react_jsx_runtime36 from "react/jsx-runtime";
 import React from "react";
 
 //#region src/components/misc/visually-hidden/VisuallyHidden.d.ts
@@ -7,7 +7,7 @@ type VisuallyHiddenProps = {
 };
 declare const VisuallyHidden: ({
   children
-}: VisuallyHiddenProps) => react_jsx_runtime1.JSX.Element;
+}: VisuallyHiddenProps) => react_jsx_runtime36.JSX.Element;
 //# sourceMappingURL=VisuallyHidden.d.ts.map
 
 //#endregion

package/dist/components/misc/visually-hidden/VisuallyHidden.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VisuallyHidden.d.ts","names":[],"sources":["../../../../src/components/misc/visually-hidden/VisuallyHidden.tsx"],"sourcesContent":[],"mappings":";;;;KAKY,mBAAA;YACA,KAAA,CAAM;;AADN,cAIC,cAJkB,EACnB,CAAA;EAAA;AAAe,CAAT,EAG2B,mBAHlB,EAAA,GAGqC,kBAAA,CAAA,GAAA,CAAA,OAHrC;AAG3B"}
+{"version":3,"file":"VisuallyHidden.d.ts","names":[],"sources":["../../../../src/components/misc/visually-hidden/VisuallyHidden.tsx"],"sourcesContent":[],"mappings":";;;;KAKY,mBAAA;YACA,KAAA,CAAM;;AADN,cAIC,cAJkB,EACnB,CAAA;EAAA;AAAe,CAAT,EAG2B,mBAHlB,EAAA,GAGqC,mBAAA,CAAA,GAAA,CAAA,OAHrC;AAG3B"}

package/dist/components/navigation/breadcrumbs/Breadcrumbs.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime9 from "react/jsx-runtime";
+import * as react_jsx_runtime34 from "react/jsx-runtime";
 import { ReactNode } from "react";
 
 //#region src/components/navigation/breadcrumbs/Breadcrumbs.d.ts
@@ -17,7 +17,7 @@ declare const Breadcrumbs: {
     separator,
     children,
     classNames
-  }: BreadcrumbsProps): react_jsx_runtime9.JSX.Element;
+  }: BreadcrumbsProps): react_jsx_runtime34.JSX.Element;
   Item: {
     ({
       children

package/dist/components/navigation/breadcrumbs/Breadcrumbs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumbs.d.ts","names":[],"sources":["../../../../src/components/navigation/breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":[],"mappings":";;;;KAgBY,gBAAA;cACE;;IADF,IAAA,CAAA,EAAA,MAAA;IAAgB,IAAA,CAAA,EAAA,MAAA;IACd,IAAA,CAAA,EAAA,MAAA;IAOD,SAAA,CAAA,EAAA,MAAA;EAAS,CAAA;EAGT,QAAA,CAAA,EAHA,SA6CZ;CAAA;AAAA,cA1CY,WA0CZ,EAAA;;;;;KAtCE,mBAAgB,kBAAA,CAAA,GAAA,CAAA;;IAAhB,CAAA;MAAA;IAAA,CAAA,EAyDyB,SAzDzB,CAAA,EAyDkC,SAzDlC;IAAgB,WAAA,EAAA,MAAA;EAAA,CAAA;;KAqDd,SAAA,GAIgC;EAAA,QAAA,EAHzB,SAGyB;AAnBnC,CAAA"}
+{"version":3,"file":"Breadcrumbs.d.ts","names":[],"sources":["../../../../src/components/navigation/breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":[],"mappings":";;;;KAgBY,gBAAA;cACE;;IADF,IAAA,CAAA,EAAA,MAAA;IAAgB,IAAA,CAAA,EAAA,MAAA;IACd,IAAA,CAAA,EAAA,MAAA;IAOD,SAAA,CAAA,EAAA,MAAA;EAAS,CAAA;EAGT,QAAA,CAAA,EAHA,SA6CZ;CAAA;AAAA,cA1CY,WA0CZ,EAAA;;;;;KAtCE,mBAAgB,mBAAA,CAAA,GAAA,CAAA;;IAAhB,CAAA;MAAA;IAAA,CAAA,EAyDyB,SAzDzB,CAAA,EAyDkC,SAzDlC;IAAgB,WAAA,EAAA,MAAA;EAAA,CAAA;;KAqDd,SAAA,GAIgC;EAAA,QAAA,EAHzB,SAGyB;AAnBnC,CAAA"}

package/dist/components/navigation/tabs/Tabs.d.ts

@@ -1,7 +1,7 @@
 import { TabsListProps } from "./TabsList.js";
 import { TabsTabProps } from "./TabsTab.js";
 import { TabsPanelProps } from "./TabsPanel.js";
-import * as react_jsx_runtime2 from "react/jsx-runtime";
+import * as react_jsx_runtime1 from "react/jsx-runtime";
 import React from "react";
 
 //#region src/components/navigation/tabs/Tabs.d.ts
@@ -18,14 +18,14 @@ declare const Tabs: {
     classNames,
     children,
     ...props
-  }: TabsProps): react_jsx_runtime2.JSX.Element;
+  }: TabsProps): react_jsx_runtime1.JSX.Element;
   displayName: string;
   List: {
     ({
       classNames,
       children,
       ...props
-    }: TabsListProps): react_jsx_runtime2.JSX.Element;
+    }: TabsListProps): react_jsx_runtime1.JSX.Element;
     displayName: string;
   };
   Tab: {
@@ -35,7 +35,7 @@ declare const Tabs: {
       endSlot,
       children,
       ...props
-    }: TabsTabProps): react_jsx_runtime2.JSX.Element;
+    }: TabsTabProps): react_jsx_runtime1.JSX.Element;
     displayName: string;
   };
   Panel: {
@@ -43,7 +43,7 @@ declare const Tabs: {
       classNames,
       children,
       ...props
-    }: TabsPanelProps): react_jsx_runtime2.JSX.Element;
+    }: TabsPanelProps): react_jsx_runtime1.JSX.Element;
     displayName: string;
   };
 };

package/dist/index.d.ts

@@ -3,7 +3,7 @@ import { ButtonIcon, ButtonIconProps } from "./components/buttons/button-icon/Bu
 import { Checkbox, CheckboxProps } from "./components/controls/checkbox/Checkbox.js";
 import { DatePicker, DatePickerProps } from "./components/controls/date-picker/DatePicker.js";
 import { Combobox, ComboboxProps } from "./components/controls/dropdown/Combobox.js";
-import { DropdownButton, DropdownButtonProps } from "./components/controls/dropdown/DropdownButton.js";
+import { Menu, MenuProps } from "./components/controls/dropdown/Menu.js";
 import { Select, SelectProps } from "./components/controls/dropdown/Select.js";
 import { InputFile, InputFileProps } from "./components/controls/input-file/InputFile.js";
 import { InputPassword, InputPasswordProps } from "./components/controls/input-password/InputPassword.js";
@@ -24,4 +24,4 @@ import { VisuallyHidden, VisuallyHiddenProps } from "./components/misc/visually-
 import { Breadcrumbs, BreadcrumbsProps } from "./components/navigation/breadcrumbs/Breadcrumbs.js";
 import { Tabs, TabsProps } from "./components/navigation/tabs/Tabs.js";
 import { MageUiProvider, MageUiProviderProps } from "./providers/MageUiProvider.js";
-export { Avatar, AvatarProps, Badge, BadgeProps, Breadcrumbs, BreadcrumbsProps, Button, ButtonIcon, ButtonIconProps, ButtonProps, Carousel, CarouselProps, Checkbox, CheckboxProps, Combobox, ComboboxProps, DatePicker, DatePickerProps, DropdownButton, DropdownButtonProps, Form, FormProps, Icon, IconProps, IconRaw, IconRawProps, IconTheme, IconThemeProps, InputFile, InputFileProps, InputPassword, InputPasswordProps, InputText, InputTextProps, MageUiProvider, MageUiProviderProps, MultiSwitch, MultiSwitchProps, Radio, RadioIcon, RadioIconProps, RadioProps, Select, SelectProps, Table, Tabs, TabsProps, Textarea, TextareaProps, VisuallyHidden, VisuallyHiddenProps };
+export { Avatar, AvatarProps, Badge, BadgeProps, Breadcrumbs, BreadcrumbsProps, Button, ButtonIcon, ButtonIconProps, ButtonProps, Carousel, CarouselProps, Checkbox, CheckboxProps, Combobox, ComboboxProps, DatePicker, DatePickerProps, Form, FormProps, Icon, IconProps, IconRaw, IconRawProps, IconTheme, IconThemeProps, InputFile, InputFileProps, InputPassword, InputPasswordProps, InputText, InputTextProps, MageUiProvider, MageUiProviderProps, Menu, MenuProps, MultiSwitch, MultiSwitchProps, Radio, RadioIcon, RadioIconProps, RadioProps, Select, SelectProps, Table, Tabs, TabsProps, Textarea, TextareaProps, VisuallyHidden, VisuallyHiddenProps };

package/dist/index.js

@@ -1 +1 @@
-import{Button as e}from"./components/buttons/button/Button.js";import{Avatar as t}from"./components/data-display/avatar/Avatar.js";import{Badge as n}from"./components/data-display/badge/Badge.js";import{VisuallyHidden as r}from"./components/misc/visually-hidden/VisuallyHidden.js";import{Carousel as i}from"./components/data-display/carousel/Carousel.js";import{Icon as a}from"./components/data-display/icons/icon/Icon.js";import{IconRaw as o}from"./components/data-display/icons/icon-raw/IconRaw.js";import{IconTheme as s}from"./components/data-display/icons/icon-theme/IconTheme.js";import{Table as c}from"./components/data-display/tables/table/Table.js";import{ButtonIcon as l}from"./components/buttons/button-icon/ButtonIcon.js";import{Checkbox as u}from"./components/controls/checkbox/Checkbox.js";import{DatePicker as d}from"./components/controls/date-picker/DatePicker.js";import{Combobox as f}from"./components/controls/dropdown/Combobox.js";import{DropdownButton as p}from"./components/controls/dropdown/DropdownButton.js";import{Select as m}from"./components/controls/dropdown/Select.js";import{InputFile as h}from"./components/controls/input-file/InputFile.js";import{InputPassword as g}from"./components/controls/input-password/InputPassword.js";import{InputText as _}from"./components/controls/input-text/InputText.js";import{MultiSwitch as v}from"./components/controls/multi-switch/MultiSwitch.js";import{Radio as y}from"./components/controls/radio/Radio.js";import{RadioIcon as b}from"./components/controls/radio/RadioIcon.js";import{Textarea as x}from"./components/controls/textarea/Textarea.js";import{Form as S}from"./components/forms/form/Form.js";import{Breadcrumbs as C}from"./components/navigation/breadcrumbs/Breadcrumbs.js";import{Tabs as w}from"./components/navigation/tabs/Tabs.js";import{MageUiProvider as T}from"./providers/MageUiProvider.js";export{t as Avatar,n as Badge,C as Breadcrumbs,e as Button,l as ButtonIcon,i as Carousel,u as Checkbox,f as Combobox,d as DatePicker,p as DropdownButton,S as Form,a as Icon,o as IconRaw,s as IconTheme,h as InputFile,g as InputPassword,_ as InputText,T as MageUiProvider,v as MultiSwitch,y as Radio,b as RadioIcon,m as Select,c as Table,w as Tabs,x as Textarea,r as VisuallyHidden};
+import{Button as e}from"./components/buttons/button/Button.js";import{Avatar as t}from"./components/data-display/avatar/Avatar.js";import{Badge as n}from"./components/data-display/badge/Badge.js";import{VisuallyHidden as r}from"./components/misc/visually-hidden/VisuallyHidden.js";import{Carousel as i}from"./components/data-display/carousel/Carousel.js";import{Icon as a}from"./components/data-display/icons/icon/Icon.js";import{IconRaw as o}from"./components/data-display/icons/icon-raw/IconRaw.js";import{IconTheme as s}from"./components/data-display/icons/icon-theme/IconTheme.js";import{Table as c}from"./components/data-display/tables/table/Table.js";import{ButtonIcon as l}from"./components/buttons/button-icon/ButtonIcon.js";import{Checkbox as u}from"./components/controls/checkbox/Checkbox.js";import{DatePicker as d}from"./components/controls/date-picker/DatePicker.js";import{Combobox as f}from"./components/controls/dropdown/Combobox.js";import{Menu as p}from"./components/controls/dropdown/Menu.js";import{Select as m}from"./components/controls/dropdown/Select.js";import{InputFile as h}from"./components/controls/input-file/InputFile.js";import{InputPassword as g}from"./components/controls/input-password/InputPassword.js";import{InputText as _}from"./components/controls/input-text/InputText.js";import{MultiSwitch as v}from"./components/controls/multi-switch/MultiSwitch.js";import{Radio as y}from"./components/controls/radio/Radio.js";import{RadioIcon as b}from"./components/controls/radio/RadioIcon.js";import{Textarea as x}from"./components/controls/textarea/Textarea.js";import{Form as S}from"./components/forms/form/Form.js";import{Breadcrumbs as C}from"./components/navigation/breadcrumbs/Breadcrumbs.js";import{Tabs as w}from"./components/navigation/tabs/Tabs.js";import{MageUiProvider as T}from"./providers/MageUiProvider.js";export{t as Avatar,n as Badge,C as Breadcrumbs,e as Button,l as ButtonIcon,i as Carousel,u as Checkbox,f as Combobox,d as DatePicker,S as Form,a as Icon,o as IconRaw,s as IconTheme,h as InputFile,g as InputPassword,_ as InputText,T as MageUiProvider,p as Menu,v as MultiSwitch,y as Radio,b as RadioIcon,m as Select,c as Table,w as Tabs,x as Textarea,r as VisuallyHidden};

package/dist/panda.json

@@ -6,12 +6,15 @@
       "backgroundColor]___[value:primary.background.2.enabled",
       "backgroundColor]___[value:primary.background.2.hovered]___[cond:_hover",
       "backgroundColor]___[value:primary.background.2.actived]___[cond:_active",
+      "backgroundColor]___[value:primary.background.2.hovered]___[cond:_expanded",
       "backgroundColor]___[value:neutral.background.6.enabled",
       "backgroundColor]___[value:neutral.background.6.hovered]___[cond:_hover",
       "backgroundColor]___[value:neutral.background.6.actived]___[cond:_active",
+      "backgroundColor]___[value:neutral.background.6.hovered]___[cond:_expanded",
       "backgroundColor]___[value:danger.background.1.enabled",
       "backgroundColor]___[value:danger.background.1.hovered]___[cond:_hover",
       "backgroundColor]___[value:danger.background.1.actived]___[cond:_active",
+      "backgroundColor]___[value:danger.background.1.hovered]___[cond:_expanded",
       "color]___[value:primary.foreground.2.enabled",
       "borderColor]___[value:primary.stroke.3.enabled",
       "color]___[value:primary.foreground.2.hovered]___[cond:_hover",
@@ -20,20 +23,28 @@
       "color]___[value:primary.foreground.2.actived]___[cond:_active",
       "backgroundColor]___[value:neutral.background.2.actived]___[cond:_active",
       "borderColor]___[value:primary.stroke.3.actived]___[cond:_active",
+      "color]___[value:primary.foreground.2.hovered]___[cond:_expanded",
+      "backgroundColor]___[value:neutral.background.2.hovered]___[cond:_expanded",
+      "borderColor]___[value:primary.stroke.3.hovered]___[cond:_expanded",
       "color]___[value:neutral.foreground.2.enabled",
       "borderColor]___[value:neutral.stroke.7.enabled",
       "color]___[value:neutral.foreground.2.hovered]___[cond:_hover",
       "borderColor]___[value:neutral.stroke.7.hovered]___[cond:_hover",
       "color]___[value:neutral.foreground.2.actived]___[cond:_active",
       "borderColor]___[value:neutral.stroke.7.actived]___[cond:_active",
+      "color]___[value:neutral.foreground.2.hovered]___[cond:_expanded",
+      "borderColor]___[value:neutral.stroke.7.hovered]___[cond:_expanded",
       "color]___[value:danger.foreground.1.enabled",
       "borderColor]___[value:danger.stroke.1.enabled",
       "color]___[value:danger.foreground.1.hovered]___[cond:_hover",
       "borderColor]___[value:danger.stroke.1.hovered]___[cond:_hover",
       "color]___[value:danger.foreground.1.actived]___[cond:_active",
       "borderColor]___[value:danger.stroke.1.actived]___[cond:_active",
+      "color]___[value:danger.foreground.1.hovered]___[cond:_expanded",
+      "borderColor]___[value:danger.stroke.1.hovered]___[cond:_expanded",
       "srOnly]___[value:true",
       "position]___[value:bottom-start",
+      "width]___[value:auto",
       "color]___[value:neutral.foreground.2.onBrand.enabled",
       "backgroundColor]___[value:neutral.background.2.enabled",
       "color]___[value:primary.foreground.1.enabled",
@@ -137,9 +148,7 @@
       ],
       "comboboxEmpty": [],
       "selectSection": [],
-      "dropdown": [
-        "size]___[value:m]___[recipe:dropdown"
-      ],
+      "dropdown": [],
       "comboboxOptions": [],
       "selectButton": [],
       "inputFileGroup": [],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mage-ui/components",
-  "version": "0.0.44",
+  "version": "0.0.46",
   "private": false,
   "description": "",
   "keywords": [],
@@ -25,7 +25,7 @@
     "@types/react-dom": "^19.1.2",
     "rimraf": "^6.0.1",
     "tsdown": "^0.12.7",
-    "typescript": "^5.8.3"
+    "typescript": "^5.9.3"
   },
   "peerDependencies": {
     "@hookform/resolvers": "^5.0.1",
@@ -42,8 +42,8 @@
     "react-dom": "^19.1.0",
     "react-hook-form": "^7.56.4",
     "zod": "^3.25.42",
-    "@mage-ui/preset": "0.0.44",
-    "@mage-ui/styled-system": "0.0.44"
+    "@mage-ui/styled-system": "0.0.46",
+    "@mage-ui/preset": "0.0.46"
   },
   "engines": {
     "node": ">=22.14.0"

package/dist/components/controls/dropdown/DropdownButton.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DropdownButton.d.ts","names":[],"sources":["../../../../src/components/controls/dropdown/DropdownButton.tsx"],"sourcesContent":[],"mappings":";;;;KAOY,mBAAA;UACF,KAAA,CAAM;;;IADJ,MAAA,CAAA,EAAA,MAAA;IAAmB,QAAA,CAAA,EAAA,MAAA;EAAA,CAAA;EACN,gBAYN,CAAA,EAAA;IACP,IAAA,CAAM,EAAA,MAAA;IACJ,KAAM,CAAA,EAAA,MAAA;IAAS,KAAA,CAAA,EAAA,MAAA;IAGhB,OAAA,CAAA,EAAA,MAqDZ;EAAA,CAAA;EAAA,QAAA,CAAA,EA1DY,KAAA,CAAM,SA0DlB;YAzDW,KAAA,CAAM;cACJ,KAAA,CAAM;;cAGP;;;;;;;;;;KASV,sBAAmB,mBAAA,CAAA,GAAA,CAAA;;IAAnB,CAAA;MAAA;IAAA,CAAA,EAqD2B,yBArD3B,CAAA,EAqDoD,OAAA,CAAA,SArDpD;IAAmB,WAAA,EAAA,MAAA;EAAA,CAAA;;KA8CjB,yBAAA,GAOkD;EAAA,EAAA,EAAA,MAAA,GAAA,MAAA;EAPlD,KAAA,EAAA,MAAA;;aAIQ,KAAA,CAAM"}

package/dist/components/controls/dropdown/DropdownButton.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DropdownButton.js","names":["value?: string","children"],"sources":["../../../../src/components/controls/dropdown/DropdownButton.tsx"],"sourcesContent":["import { Children, isValidElement } from 'react';\n\nimport { comboboxOption, dropdown } from '@mage-ui/styled-system/recipes';\nimport { Button } from '@/components/buttons';\n\nimport { DropdownBase } from './DropdownBase';\n\nexport type DropdownButtonProps = {\n  label?: React.ReactNode;\n  a11yLabel?: string;\n  classNames?: {\n    option?: string;\n    dropdown?: string;\n  };\n  buttonClassNames?: {\n    root?: string;\n    inner?: string;\n    label?: string;\n    section?: string;\n  };\n  children?: React.ReactNode;\n  endSlot?: React.ReactNode;\n  startSlot?: React.ReactNode;\n};\n\nexport const DropdownButton = ({\n  label,\n  a11yLabel,\n  classNames,\n  buttonClassNames,\n  children,\n  endSlot,\n  startSlot,\n  ...props\n}: DropdownButtonProps) => {\n  const options = Children.toArray(children).filter(\n    (child): child is React.ReactElement<DropdownButtonOptionProps> =>\n      isValidElement(child) && child.type === DropdownButton.Option,\n  );\n\n  const handleOptionSelect = (value?: string) => {\n    const selected = options.find((child) => child.props.value === value);\n    if (selected) selected.props.onClick();\n  };\n\n  return (\n    <DropdownBase\n      setSelectedOption={handleOptionSelect}\n      target={\n        <Button\n          classNames={buttonClassNames}\n          {...(a11yLabel && { 'aria-label': a11yLabel })}\n        >\n          {label}\n        </Button>\n      }\n      classNames={{\n        dropdown: classNames?.dropdown ?? dropdown({ size: 'm' }),\n      }}\n      startSlot={startSlot}\n      endSlot={endSlot}\n      {...props}\n    >\n      {options.map((child) => {\n        const { id, value, children } = child.props;\n\n        return (\n          <DropdownBase.Option\n            key={id}\n            value={value}\n            classNames={{ option: classNames?.option ?? comboboxOption() }}\n          >\n            {children}\n          </DropdownBase.Option>\n        );\n      })}\n    </DropdownBase>\n  );\n};\n\ntype DropdownButtonOptionProps = {\n  id: string | number;\n  value: string;\n  onClick: () => void;\n  children?: React.ReactNode;\n};\n\nconst Option = ({ children }: DropdownButtonOptionProps) => {\n  return children;\n};\n\nOption.displayName = 'DropdownButton.Option';\nDropdownButton.Option = Option;\n"],"mappings":"oRAuFA,MA9Da,EAAiB,CAAC,CAC7B,QACA,YACA,aACA,mBACA,WACA,UACA,YACA,GAAG,EACiB,GAAK,CAMzB,IALM,EAAU,EAAS,QAAQ,EAAS,CAAC,OACzC,AAAC,GACC,EAAe,EAAM,EAAI,EAAM,OAAS,EAAe,OAC1D,CAEK,EAAqB,AAACA,GAAmB,CAC7C,IAAM,EAAW,EAAQ,KAAK,AAAC,GAAU,EAAM,MAAM,QAAU,EAAM,CACrE,AAAI,GAAU,EAAS,MAAM,SAAS,AACvC,EAED,MACE,GAAC,EAAA,CACC,kBAAmB,EACnB,OACE,EAAC,EAAA,CACC,WAAY,EACZ,GAAK,GAAa,CAAE,aAAc,CAAW,WAE5C,GACM,CAEX,WAAY,CACV,SAAU,GAAY,UAAY,EAAS,CAAE,KAAM,GAAK,EAAC,AAC1D,EACU,YACF,UACT,GAAI,WAEH,EAAQ,IAAI,AAAC,GAAU,CACtB,GAAM,CAAE,KAAI,QAAO,SAAA,EAAU,CAAG,EAAM,MAEtC,MACE,GAAC,EAAa,OAAA,CAEL,QACP,WAAY,CAAE,OAAQ,GAAY,QAAU,GAAgB,AAAE,WAE7DC,GAJI,EAKe,AAEzB,EAAC,EACW,AAElB,EASK,EAAS,CAAC,CAAE,WAAqC,GAC9C,EAIT,AADA,EAAO,YAAc,wBACrB,EAAe,OAAS"}