@mage-ui/components 1.0.55 → 1.0.57

package/dist/components/navigations/breadcrumbs/Breadcrumbs.d.mts

@@ -1,6 +1,6 @@
 import { BreadcrumbsBarProps } from "./BreadcrumbsBar.mjs";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
-import { ReactNode } from "react";
+import React, { ReactNode } from "react";
 
 //#region src/components/navigations/breadcrumbs/Breadcrumbs.d.ts
 type BreadcrumbsProps = {
@@ -25,7 +25,7 @@ declare const Breadcrumbs: {
   Item: {
     ({
       children
-    }: ItemProps): ReactNode;
+    }: ItemProps): React.ReactNode;
     displayName: string;
   };
   Bar: {

package/dist/components/navigations/breadcrumbs/Breadcrumbs.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumbs.d.mts","names":[],"sources":["../../../../src/components/navigations/breadcrumbs/Breadcrumbs.tsx"],"mappings":";;;;;KAuBY,gBAAA;EACV,SAAA,GAAY,SAAA;EACZ,UAAA;IACE,WAAA;IACA,IAAA;IACA,OAAA;IACA,IAAA;IACA,IAAA;IACA,SAAA;IACA,OAAA;EAAA;EAEF,QAAA,GAAW,SAAA;AAAA;AAAA,cAGA,WAAA;EAAA;;;;KAIV,gBAAA,GAAgB,kBAAA,CAAA,GAAA,CAAA,OAAA;;;;OAmFS,SAAA,GAAS,SAAA;;;;;;;;;;;;;KAJhC,SAAA;EACH,QAAA,EAAU,SAAA;AAAA"}
+{"version":3,"file":"Breadcrumbs.d.mts","names":[],"sources":["../../../../src/components/navigations/breadcrumbs/Breadcrumbs.tsx"],"mappings":";;;;;KAwBY,gBAAA;EACV,SAAA,GAAY,SAAA;EACZ,UAAA;IACE,WAAA;IACA,IAAA;IACA,OAAA;IACA,IAAA;IACA,IAAA;IACA,SAAA;IACA,OAAA;EAAA;EAEF,QAAA,GAAW,SAAA;AAAA;AAAA,cAGA,WAAA;EAAA;;;;KAIV,gBAAA,GAAgB,kBAAA,CAAA,GAAA,CAAA,OAAA;;;;OAsFS,SAAA,GAAS,KAAA,CAAA,SAAA;;;;;;;;;;;;;KAJhC,SAAA;EACH,QAAA,EAAU,SAAA;AAAA"}

package/dist/components/navigations/breadcrumbs/Breadcrumbs.mjs

@@ -1,2 +1,2 @@
-import{BreadcrumbsBar as e}from"./BreadcrumbsBar.mjs";import{cx as t}from"@mage-ui/styled-system/css";import{breadcrumbs as n,breadcrumbsCurrent as r,breadcrumbsItem as i,breadcrumbsList as a,breadcrumbsRoot as o,breadcrumbsSeparator as s,breadcrumbsWrapper as c}from"@mage-ui/styled-system/recipes";import{Fragment as l,jsx as u,jsxs as d}from"react/jsx-runtime";import{Children as f,Fragment as p,cloneElement as m,isValidElement as h}from"react";const g=({separator:e=`/`,children:r,classNames:f})=>{let p=_(r);return u(`nav`,{"aria-label":`breadcrumb`,className:t(f?.breadcrumbs??n(),f?.root??o()),children:u(`div`,{className:f?.wrapper??c(),children:u(`ol`,{className:f?.list??a(),children:p.map((t,n)=>d(`li`,{className:f?.item??i(),children:[n<p.length-1&&d(l,{children:[t,u(`span`,{"aria-hidden":`true`,className:f?.separator??s(),children:e})]}),n===p.length-1&&v(t,f)]},t.key??`breadcrumbs-item-${n}`))})})})},_=e=>f.toArray(e).flatMap(e=>h(e)?e.type===p?_(e.props.children):e.type===y?[e]:[]:[]),v=(e,t)=>{if(h(e)&&h(e.props.children)){let t=e.props.children;return m(t,{"aria-current":`page`,...t.props??{}})}return u(`span`,{"aria-current":`page`,className:t?.current??r(),children:e})},y=({children:e})=>e;y.displayName=`Breadcrumbs.Item`,g.Item=y,g.Bar=e;export{g as Breadcrumbs};
+import{BreadcrumbsBar as e}from"./BreadcrumbsBar.mjs";import{cx as t}from"@mage-ui/styled-system/css";import{breadcrumbs as n,breadcrumbsCurrent as r,breadcrumbsItem as i,breadcrumbsLink as a,breadcrumbsList as o,breadcrumbsRoot as s,breadcrumbsSeparator as c,breadcrumbsWrapper as l}from"@mage-ui/styled-system/recipes";import{Fragment as u,jsx as d,jsxs as f}from"react/jsx-runtime";import p,{Children as m,Fragment as h,cloneElement as g,isValidElement as _}from"react";const v=({separator:e=`/`,children:r,classNames:m})=>{let h=y(r);return d(`nav`,{"aria-label":`breadcrumb`,className:t(m?.breadcrumbs??n(),m?.root??s()),children:d(`div`,{className:m?.wrapper??l(),children:d(`ol`,{className:m?.list??o(),children:h.map((t,n)=>f(`li`,{className:m?.item??i(),children:[n<h.length-1&&f(u,{children:[p.cloneElement(t,{className:a(),...t.props}),d(`span`,{"aria-hidden":`true`,className:m?.separator??c(),children:e})]}),n===h.length-1&&b(t,m)]},t.key??`breadcrumbs-item-${n}`))})})})},y=e=>m.toArray(e).flatMap(e=>_(e)?e.type===h?y(e.props.children):e.type===x?[e]:[]:[]),b=(e,t)=>{if(_(e)&&_(e.props.children)){let t=e.props.children;return g(t,{"aria-current":`page`,...t.props??{}})}return d(`span`,{"aria-current":`page`,className:t?.current??r(),children:e})},x=({children:e})=>e;x.displayName=`Breadcrumbs.Item`,v.Item=x,v.Bar=e;export{v as Breadcrumbs};
 //# sourceMappingURL=Breadcrumbs.mjs.map

package/dist/components/navigations/breadcrumbs/Breadcrumbs.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumbs.mjs","names":["Fragment"],"sources":["../../../../src/components/navigations/breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["import {\n  Children,\n  cloneElement,\n  Fragment,\n  type HTMLAttributes,\n  isValidElement,\n  type ReactElement,\n  type ReactNode,\n} from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n  breadcrumbs,\n  breadcrumbsCurrent,\n  breadcrumbsItem,\n  breadcrumbsList,\n  breadcrumbsRoot,\n  breadcrumbsSeparator,\n  breadcrumbsWrapper,\n} from '@mage-ui/styled-system/recipes';\n\nimport { BreadcrumbsBar } from './BreadcrumbsBar';\n\nexport type BreadcrumbsProps = {\n  separator?: ReactNode;\n  classNames?: {\n    breadcrumbs?: string;\n    root?: string;\n    wrapper?: string;\n    list?: string;\n    item?: string;\n    separator?: string;\n    current?: string;\n  };\n  children?: ReactNode;\n};\n\nexport const Breadcrumbs = ({\n  separator = '/',\n  children,\n  classNames,\n}: BreadcrumbsProps) => {\n  const items = getItems(children);\n\n  return (\n    <nav\n      aria-label='breadcrumb'\n      className={cx(\n        classNames?.breadcrumbs ?? breadcrumbs(),\n        classNames?.root ?? breadcrumbsRoot(),\n      )}\n    >\n      <div className={classNames?.wrapper ?? breadcrumbsWrapper()}>\n        <ol className={classNames?.list ?? breadcrumbsList()}>\n          {items.map((child, index) => (\n            <li\n              key={child.key ?? `breadcrumbs-item-${index}`}\n              className={classNames?.item ?? breadcrumbsItem()}\n            >\n              {index < items.length - 1 && (\n                <>\n                  {child}\n                  <span\n                    aria-hidden='true'\n                    className={classNames?.separator ?? breadcrumbsSeparator()}\n                  >\n                    {separator}\n                  </span>\n                </>\n              )}\n              {index === items.length - 1 && lastItem(child, classNames)}\n            </li>\n          ))}\n        </ol>\n      </div>\n    </nav>\n  );\n};\n\ntype Child = ReactElement<{ children?: ReactNode }>;\n\nconst getItems = (children: ReactNode): Child[] => {\n  return Children.toArray(children).flatMap((child) => {\n    if (!isValidElement<{ children?: ReactNode }>(child)) {\n      return [];\n    }\n\n    if (child.type === Fragment) {\n      return getItems(child.props.children);\n    }\n\n    if (child.type === Item) {\n      return [child];\n    }\n\n    return [];\n  });\n};\n\nconst lastItem = (\n  child: Child,\n  classNames?: BreadcrumbsProps['classNames'],\n) => {\n  if (isValidElement(child) && isValidElement(child.props.children)) {\n    const childChildren = child.props.children as Child;\n    return cloneElement(childChildren, {\n      'aria-current': 'page',\n      ...(childChildren.props ?? {}),\n    } as HTMLAttributes<HTMLElement>);\n  }\n  return (\n    <span\n      aria-current='page'\n      className={classNames?.current ?? breadcrumbsCurrent()}\n    >\n      {child}\n    </span>\n  );\n};\n\ntype ItemProps = {\n  children: ReactNode;\n};\n\nconst Item = ({ children }: ItemProps) => {\n  return children;\n};\n\nItem.displayName = 'Breadcrumbs.Item';\nBreadcrumbs.Item = Item;\nBreadcrumbs.Bar = BreadcrumbsBar;\n"],"mappings":"icAqCA,MAAa,GAAe,CAC1B,YAAY,IACZ,WACA,gBACsB,CACtB,IAAM,EAAQ,EAAS,EAAS,CAEhC,OACE,EAAC,MAAA,CACC,aAAW,aACX,UAAW,EACT,GAAY,aAAe,GAAa,CACxC,GAAY,MAAQ,GAAiB,CACtC,UAED,EAAC,MAAA,CAAI,UAAW,GAAY,SAAW,GAAoB,UACzD,EAAC,KAAA,CAAG,UAAW,GAAY,MAAQ,GAAiB,UACjD,EAAM,KAAK,EAAO,IACjB,EAAC,KAAA,CAEC,UAAW,GAAY,MAAQ,GAAiB,WAE/C,EAAQ,EAAM,OAAS,GACtB,EAAA,EAAA,CAAA,SAAA,CACG,EACD,EAAC,OAAA,CACC,cAAY,OACZ,UAAW,GAAY,WAAa,GAAsB,UAEzD,GACI,CAAA,CAAA,CACN,CAEJ,IAAU,EAAM,OAAS,GAAK,EAAS,EAAO,EAAW,CAAA,EAdrD,EAAM,KAAO,oBAAoB,IAenC,CACL,EACC,EACD,EACF,EAMJ,EAAY,GACT,EAAS,QAAQ,EAAS,CAAC,QAAS,GACpC,EAAyC,EAAM,CAIhD,EAAM,OAASA,EACV,EAAS,EAAM,MAAM,SAAS,CAGnC,EAAM,OAAS,EACV,CAAC,EAAM,CAGT,EAAE,CAXA,EAAE,CAYX,CAGE,GACJ,EACA,IACG,CACH,GAAI,EAAe,EAAM,EAAI,EAAe,EAAM,MAAM,SAAS,CAAE,CACjE,IAAM,EAAgB,EAAM,MAAM,SAClC,OAAO,EAAa,EAAe,CACjC,eAAgB,OAChB,GAAI,EAAc,OAAS,EAAE,CAC9B,CAAgC,CAEnC,OACE,EAAC,OAAA,CACC,eAAa,OACb,UAAW,GAAY,SAAW,GAAoB,UAErD,GACI,EAQL,GAAQ,CAAE,cACP,EAGT,EAAK,YAAc,mBACnB,EAAY,KAAO,EACnB,EAAY,IAAM"}
+{"version":3,"file":"Breadcrumbs.mjs","names":["Fragment"],"sources":["../../../../src/components/navigations/breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["import React, {\n  Children,\n  cloneElement,\n  Fragment,\n  type HTMLAttributes,\n  isValidElement,\n  type ReactElement,\n  type ReactNode,\n} from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n  breadcrumbs,\n  breadcrumbsCurrent,\n  breadcrumbsItem,\n  breadcrumbsLink,\n  breadcrumbsList,\n  breadcrumbsRoot,\n  breadcrumbsSeparator,\n  breadcrumbsWrapper,\n} from '@mage-ui/styled-system/recipes';\n\nimport { BreadcrumbsBar } from './BreadcrumbsBar';\n\nexport type BreadcrumbsProps = {\n  separator?: ReactNode;\n  classNames?: {\n    breadcrumbs?: string;\n    root?: string;\n    wrapper?: string;\n    list?: string;\n    item?: string;\n    separator?: string;\n    current?: string;\n  };\n  children?: ReactNode;\n};\n\nexport const Breadcrumbs = ({\n  separator = '/',\n  children,\n  classNames,\n}: BreadcrumbsProps) => {\n  const items = getItems(children);\n\n  return (\n    <nav\n      aria-label='breadcrumb'\n      className={cx(\n        classNames?.breadcrumbs ?? breadcrumbs(),\n        classNames?.root ?? breadcrumbsRoot(),\n      )}\n    >\n      <div className={classNames?.wrapper ?? breadcrumbsWrapper()}>\n        <ol className={classNames?.list ?? breadcrumbsList()}>\n          {items.map((child, index) => (\n            <li\n              key={child.key ?? `breadcrumbs-item-${index}`}\n              className={classNames?.item ?? breadcrumbsItem()}\n            >\n              {index < items.length - 1 && (\n                <>\n                  {React.cloneElement(child, {\n                    className: breadcrumbsLink(),\n                    ...child.props,\n                  })}\n                  <span\n                    aria-hidden='true'\n                    className={classNames?.separator ?? breadcrumbsSeparator()}\n                  >\n                    {separator}\n                  </span>\n                </>\n              )}\n              {index === items.length - 1 && lastItem(child, classNames)}\n            </li>\n          ))}\n        </ol>\n      </div>\n    </nav>\n  );\n};\n\ntype Child = ReactElement<{ children?: ReactNode; className?: string }>;\n\nconst getItems = (children: ReactNode): Child[] => {\n  return Children.toArray(children).flatMap((child) => {\n    if (!isValidElement<{ children?: ReactNode }>(child)) {\n      return [];\n    }\n\n    if (child.type === Fragment) {\n      return getItems(child.props.children);\n    }\n\n    if (child.type === Item) {\n      return [child];\n    }\n\n    return [];\n  });\n};\n\nconst lastItem = (\n  child: Child,\n  classNames?: BreadcrumbsProps['classNames'],\n) => {\n  if (isValidElement(child) && isValidElement(child.props.children)) {\n    const childChildren = child.props.children as Child;\n    return cloneElement(childChildren, {\n      'aria-current': 'page',\n      ...(childChildren.props ?? {}),\n    } as HTMLAttributes<HTMLElement>);\n  }\n  return (\n    <span\n      aria-current='page'\n      className={classNames?.current ?? breadcrumbsCurrent()}\n    >\n      {child}\n    </span>\n  );\n};\n\ntype ItemProps = {\n  children: ReactNode;\n};\n\nconst Item = ({ children }: ItemProps) => {\n  return children;\n};\n\nItem.displayName = 'Breadcrumbs.Item';\nBreadcrumbs.Item = Item;\nBreadcrumbs.Bar = BreadcrumbsBar;\n"],"mappings":"ydAsCA,MAAa,GAAe,CAC1B,YAAY,IACZ,WACA,gBACsB,CACtB,IAAM,EAAQ,EAAS,EAAS,CAEhC,OACE,EAAC,MAAA,CACC,aAAW,aACX,UAAW,EACT,GAAY,aAAe,GAAa,CACxC,GAAY,MAAQ,GAAiB,CACtC,UAED,EAAC,MAAA,CAAI,UAAW,GAAY,SAAW,GAAoB,UACzD,EAAC,KAAA,CAAG,UAAW,GAAY,MAAQ,GAAiB,UACjD,EAAM,KAAK,EAAO,IACjB,EAAC,KAAA,CAEC,UAAW,GAAY,MAAQ,GAAiB,WAE/C,EAAQ,EAAM,OAAS,GACtB,EAAA,EAAA,CAAA,SAAA,CACG,EAAM,aAAa,EAAO,CACzB,UAAW,GAAiB,CAC5B,GAAG,EAAM,MACV,CAAC,CACF,EAAC,OAAA,CACC,cAAY,OACZ,UAAW,GAAY,WAAa,GAAsB,UAEzD,GACI,CAAA,CAAA,CACN,CAEJ,IAAU,EAAM,OAAS,GAAK,EAAS,EAAO,EAAW,CAAA,EAjBrD,EAAM,KAAO,oBAAoB,IAkBnC,CACL,EACC,EACD,EACF,EAMJ,EAAY,GACT,EAAS,QAAQ,EAAS,CAAC,QAAS,GACpC,EAAyC,EAAM,CAIhD,EAAM,OAASA,EACV,EAAS,EAAM,MAAM,SAAS,CAGnC,EAAM,OAAS,EACV,CAAC,EAAM,CAGT,EAAE,CAXA,EAAE,CAYX,CAGE,GACJ,EACA,IACG,CACH,GAAI,EAAe,EAAM,EAAI,EAAe,EAAM,MAAM,SAAS,CAAE,CACjE,IAAM,EAAgB,EAAM,MAAM,SAClC,OAAO,EAAa,EAAe,CACjC,eAAgB,OAChB,GAAI,EAAc,OAAS,EAAE,CAC9B,CAAgC,CAEnC,OACE,EAAC,OAAA,CACC,eAAa,OACb,UAAW,GAAY,SAAW,GAAoB,UAErD,GACI,EAQL,GAAQ,CAAE,cACP,EAGT,EAAK,YAAc,mBACnB,EAAY,KAAO,EACnB,EAAY,IAAM"}

package/dist/components/navigations/breadcrumbs/BreadcrumbsBar.mjs

@@ -1,2 +1,2 @@
-import{cx as e}from"@mage-ui/styled-system/css";import{breadcrumbsBar as t,breadcrumbsBarButtonBack as n,breadcrumbsBarDivider as r,breadcrumbsBarRoot as i,breadcrumbsBarWrapper as a}from"@mage-ui/styled-system/recipes";import{jsx as o,jsxs as s}from"react/jsx-runtime";import{Breadcrumbs as c,Button as l,Icon as u}from"@mage-ui/components";const d=({backText:d,classNames:f,children:p,onBack:m})=>o(`div`,{className:e(f?.breadcrumbsBar??t(),f?.root??i()),children:s(`div`,{className:f?.wrapper??a(),children:[o(l,{startSlot:o(u,{path:`/icons/sprite-mage.svg`,name:`breadcrumbs-back`}),classNames:{button:f?.buttonBack??n()},onClick:m,children:d}),o(`span`,{className:f?.divider??r()}),o(c,{separator:o(u,{path:`/icons/sprite-mage.svg`,name:`breadcrumbs-separator`}),children:p})]})});d.displayName=`Breadcrumbs.Bar`;export{d as BreadcrumbsBar};
+import{cx as e}from"@mage-ui/styled-system/css";import{breadcrumbsBar as t,breadcrumbsBarButtonBack as n,breadcrumbsBarDivider as r,breadcrumbsBarRoot as i,breadcrumbsBarWrapper as a}from"@mage-ui/styled-system/recipes";import{jsx as o,jsxs as s}from"react/jsx-runtime";import{Breadcrumbs as c,Button as l,Icon as u}from"@mage-ui/components";const d=({backText:d,classNames:f,children:p,onBack:m})=>o(`div`,{className:e(f?.breadcrumbsBar??t(),f?.root??i()),children:s(`div`,{className:f?.wrapper??a(),children:[o(l,{startSlot:o(u,{path:`/icons/sprite-mage.svg`,name:`mage-breadcrumbs-back`}),classNames:{button:f?.buttonBack??n()},onClick:m,children:d}),o(`span`,{className:f?.divider??r()}),o(c,{separator:o(u,{path:`/icons/sprite-mage.svg`,name:`mage-breadcrumbs-separator`}),children:p})]})});d.displayName=`Breadcrumbs.Bar`;export{d as BreadcrumbsBar};
 //# sourceMappingURL=BreadcrumbsBar.mjs.map

package/dist/components/navigations/breadcrumbs/BreadcrumbsBar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"BreadcrumbsBar.mjs","names":[],"sources":["../../../../src/components/navigations/breadcrumbs/BreadcrumbsBar.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { Breadcrumbs, Button, Icon } from '@mage-ui/components';\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n  breadcrumbsBar,\n  breadcrumbsBarButtonBack,\n  breadcrumbsBarDivider,\n  breadcrumbsBarRoot,\n  breadcrumbsBarWrapper,\n} from '@mage-ui/styled-system/recipes';\n\nexport type BreadcrumbsBarProps = {\n  backText?: ReactNode;\n  classNames?: {\n    breadcrumbsBar?: string;\n    root?: string;\n    wrapper?: string;\n    divider?: string;\n    buttonBack?: string;\n  };\n  children?: ReactNode;\n  onBack?: () => void;\n};\n\nexport const BreadcrumbsBar = ({\n  backText,\n  classNames,\n  children,\n  onBack,\n}: BreadcrumbsBarProps): ReactNode => {\n  return (\n    <div\n      className={cx(\n        classNames?.breadcrumbsBar ?? breadcrumbsBar(),\n        classNames?.root ?? breadcrumbsBarRoot(),\n      )}\n    >\n      <div className={classNames?.wrapper ?? breadcrumbsBarWrapper()}>\n        <Button\n          startSlot={\n            <Icon path='/icons/sprite-mage.svg' name='breadcrumbs-back' />\n          }\n          classNames={{\n            button: classNames?.buttonBack ?? breadcrumbsBarButtonBack(),\n          }}\n          onClick={onBack}\n        >\n          {backText}\n        </Button>\n        <span className={classNames?.divider ?? breadcrumbsBarDivider()} />\n        <Breadcrumbs\n          separator={\n            <Icon path='/icons/sprite-mage.svg' name='breadcrumbs-separator' />\n          }\n        >\n          {children}\n        </Breadcrumbs>\n      </div>\n    </div>\n  );\n};\n\nBreadcrumbsBar.displayName = 'Breadcrumbs.Bar';\n"],"mappings":"sVAyBA,MAAa,GAAkB,CAC7B,WACA,aACA,WACA,YAGE,EAAC,MAAA,CACC,UAAW,EACT,GAAY,gBAAkB,GAAgB,CAC9C,GAAY,MAAQ,GAAoB,CACzC,UAED,EAAC,MAAA,CAAI,UAAW,GAAY,SAAW,GAAuB,WAC5D,EAAC,EAAA,CACC,UACE,EAAC,EAAA,CAAK,KAAK,yBAAyB,KAAK,oBAAqB,CAEhE,WAAY,CACV,OAAQ,GAAY,YAAc,GAA0B,CAC7D,CACD,QAAS,WAER,GACM,CACT,EAAC,OAAA,CAAK,UAAW,GAAY,SAAW,GAAuB,CAAA,CAAI,CACnE,EAAC,EAAA,CACC,UACE,EAAC,EAAA,CAAK,KAAK,yBAAyB,KAAK,yBAA0B,CAGpE,YACW,GACV,EACF,CAIV,EAAe,YAAc"}
+{"version":3,"file":"BreadcrumbsBar.mjs","names":[],"sources":["../../../../src/components/navigations/breadcrumbs/BreadcrumbsBar.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { Breadcrumbs, Button, Icon } from '@mage-ui/components';\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n  breadcrumbsBar,\n  breadcrumbsBarButtonBack,\n  breadcrumbsBarDivider,\n  breadcrumbsBarRoot,\n  breadcrumbsBarWrapper,\n} from '@mage-ui/styled-system/recipes';\n\nexport type BreadcrumbsBarProps = {\n  backText?: ReactNode;\n  classNames?: {\n    breadcrumbsBar?: string;\n    root?: string;\n    wrapper?: string;\n    divider?: string;\n    buttonBack?: string;\n  };\n  children?: ReactNode;\n  onBack?: () => void;\n};\n\nexport const BreadcrumbsBar = ({\n  backText,\n  classNames,\n  children,\n  onBack,\n}: BreadcrumbsBarProps): ReactNode => {\n  return (\n    <div\n      className={cx(\n        classNames?.breadcrumbsBar ?? breadcrumbsBar(),\n        classNames?.root ?? breadcrumbsBarRoot(),\n      )}\n    >\n      <div className={classNames?.wrapper ?? breadcrumbsBarWrapper()}>\n        <Button\n          startSlot={\n            <Icon path='/icons/sprite-mage.svg' name='mage-breadcrumbs-back' />\n          }\n          classNames={{\n            button: classNames?.buttonBack ?? breadcrumbsBarButtonBack(),\n          }}\n          onClick={onBack}\n        >\n          {backText}\n        </Button>\n        <span className={classNames?.divider ?? breadcrumbsBarDivider()} />\n        <Breadcrumbs\n          separator={\n            <Icon\n              path='/icons/sprite-mage.svg'\n              name='mage-breadcrumbs-separator'\n            />\n          }\n        >\n          {children}\n        </Breadcrumbs>\n      </div>\n    </div>\n  );\n};\n\nBreadcrumbsBar.displayName = 'Breadcrumbs.Bar';\n"],"mappings":"sVAyBA,MAAa,GAAkB,CAC7B,WACA,aACA,WACA,YAGE,EAAC,MAAA,CACC,UAAW,EACT,GAAY,gBAAkB,GAAgB,CAC9C,GAAY,MAAQ,GAAoB,CACzC,UAED,EAAC,MAAA,CAAI,UAAW,GAAY,SAAW,GAAuB,WAC5D,EAAC,EAAA,CACC,UACE,EAAC,EAAA,CAAK,KAAK,yBAAyB,KAAK,yBAA0B,CAErE,WAAY,CACV,OAAQ,GAAY,YAAc,GAA0B,CAC7D,CACD,QAAS,WAER,GACM,CACT,EAAC,OAAA,CAAK,UAAW,GAAY,SAAW,GAAuB,CAAA,CAAI,CACnE,EAAC,EAAA,CACC,UACE,EAAC,EAAA,CACC,KAAK,yBACL,KAAK,8BACL,CAGH,YACW,GACV,EACF,CAIV,EAAe,YAAc"}

package/dist/components/navigations/sidebars/sidebar/Sidebar.d.mts

@@ -15,14 +15,19 @@ type SidebarClassNames = {
     list?: string;
     scrollArea?: string;
   };
+  collapseButton?: string;
 };
 type SidebarProps = {
   area?: string;
   topSlot?: ReactNode;
   bottomSlot?: ReactNode;
   classNames?: SidebarClassNames;
-  isCollapsed: boolean;
+  isCollapsed?: boolean;
+  defaultCollapsed?: boolean;
+  onCollapsedChange?: (collapsed: boolean) => void;
   expandedItems?: string[];
+  collapseButtonLabelCollapse?: string;
+  collapseButtonLabelExpand?: string;
   children?: ReactNode;
 };
 declare const Sidebar: {
@@ -30,9 +35,13 @@ declare const Sidebar: {
     area,
     classNames,
     isCollapsed,
+    defaultCollapsed,
+    onCollapsedChange,
     expandedItems,
     topSlot,
     bottomSlot,
+    collapseButtonLabelCollapse,
+    collapseButtonLabelExpand,
     children
   }: SidebarProps): ReactNode;
   displayName: string;

package/dist/components/navigations/sidebars/sidebar/Sidebar.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.d.mts","names":[],"sources":["../../../../../src/components/navigations/sidebars/sidebar/Sidebar.tsx"],"mappings":";;;;;;KAoBY,iBAAA;EACV,OAAA;EACA,IAAA;EACA,UAAA;EACA,OAAA;EACA,UAAA;EACA,GAAA;IACE,IAAA;IACA,IAAA;IACA,UAAA;EAAA;AAAA;AAAA,KAIQ,YAAA;EACV,IAAA;EACA,OAAA,GAAU,SAAA;EACV,UAAA,GAAa,SAAA;EACb,UAAA,GAAa,iBAAA;EACb,WAAA;EACA,aAAA;EACA,QAAA,GAAW,SAAA;AAAA;AAAA,cAGA,OAAA;EAAA;;;;;;;;KAQV,YAAA,GAAe,SAAA"}
+{"version":3,"file":"Sidebar.d.mts","names":[],"sources":["../../../../../src/components/navigations/sidebars/sidebar/Sidebar.tsx"],"mappings":";;;;;;KAwBY,iBAAA;EACV,OAAA;EACA,IAAA;EACA,UAAA;EACA,OAAA;EACA,UAAA;EACA,GAAA;IACE,IAAA;IACA,IAAA;IACA,UAAA;EAAA;EAEF,cAAA;AAAA;AAAA,KAGU,YAAA;EACV,IAAA;EACA,OAAA,GAAU,SAAA;EACV,UAAA,GAAa,SAAA;EACb,UAAA,GAAa,iBAAA;EACb,WAAA;EACA,gBAAA;EACA,iBAAA,IAAqB,SAAA;EACrB,aAAA;EACA,2BAAA;EACA,yBAAA;EACA,QAAA,GAAW,SAAA;AAAA;AAAA,cAgFA,OAAA;EAAA;;;;;;;;;;;;KAYV,YAAA,GAAe,SAAA"}

package/dist/components/navigations/sidebars/sidebar/Sidebar.mjs

@@ -1,2 +1,2 @@
-import{ScrollAreaAutosize as e}from"../../../misc/scroll-area-autosize/ScrollAreaAutosize.mjs";import{SidebarProvider as t}from"./SidebarContext.mjs";import{NavList as n}from"./SidebarNavList.mjs";import{NavGroup as r}from"./SidebarNavGroup.mjs";import{NavItem as i}from"./SidebarNavItem.mjs";import{NavItemLink as a}from"./SidebarNavItemLink.mjs";import{SubNavItem as o}from"./SidebarSubNavItem.mjs";import{cx as s}from"@mage-ui/styled-system/css";import{sidebar as c,sidebarBottomSlot as l,sidebarNavRoot as u,sidebarRoot as d,sidebarScrollAreaAutosize as f,sidebarTopSlot as p}from"@mage-ui/styled-system/recipes";import{jsx as m,jsxs as h}from"react/jsx-runtime";const g=({area:r=`sidebar`,classNames:i,isCollapsed:a=!1,expandedItems:o,topSlot:g,bottomSlot:_,children:v})=>{let y=r===`sidebar`?void 0:{"--sidebar-grid-area":r};return m(t,{isCollapsed:a,expandedItems:o,children:h(`div`,{"data-collapsed":a?`true`:`false`,className:s(i?.sidebar??c(),i?.root??d(),`group`),style:y,children:[g?m(`div`,{className:i?.topSlot??p(),children:g}):null,m(`nav`,{className:i?.nav?.root??u(),children:m(e,{mah:`100%`,scrollbars:`y`,type:`hover`,classNames:{scrollArea:i?.nav?.scrollArea??f()},children:m(n,{classNames:i,children:v})})}),_?m(`div`,{className:i?.bottomSlot??l(),children:_}):null]})})};g.displayName=`Sidebar`,g.Item=i,g.Group=r,g.ItemLink=a,g.SubNav=o;export{g as Sidebar};
+"use client";import{ScrollAreaAutosize as e}from"../../../misc/scroll-area-autosize/ScrollAreaAutosize.mjs";import{ButtonIcon as t}from"../../../buttons/button-icon/ButtonIcon.mjs";import{SidebarProvider as n,useSidebarContext as r}from"./SidebarContext.mjs";import{NavList as i}from"./SidebarNavList.mjs";import{NavGroup as a}from"./SidebarNavGroup.mjs";import{NavItem as o}from"./SidebarNavItem.mjs";import{NavItemLink as s}from"./SidebarNavItemLink.mjs";import{SubNavItem as c}from"./SidebarSubNavItem.mjs";import{cx as l}from"@mage-ui/styled-system/css";import{buttonIconRoot as u,sidebar as d,sidebarBottomSlot as f,sidebarNavRoot as p,sidebarRoot as m,sidebarScrollAreaAutosize as h,sidebarTopSlot as g}from"@mage-ui/styled-system/recipes";import{jsx as _,jsxs as v}from"react/jsx-runtime";const y=({area:n=`sidebar`,topSlot:a,bottomSlot:o,classNames:s,collapseButtonLabelCollapse:c=`Collapse`,collapseButtonLabelExpand:y=`Expand`,children:b})=>{let{isCollapsed:x,toggleCollapsed:S}=r(),C=n===`sidebar`?void 0:{"--sidebar-grid-area":n};return v(`div`,{"data-collapsed":x?`true`:`false`,className:l(s?.sidebar??d(),s?.root??m(),`group`),style:C,children:[a?_(`div`,{className:s?.topSlot??g(),children:a}):null,_(`nav`,{className:s?.nav?.root??p(),children:_(e,{mah:`100%`,scrollbars:`y`,type:`hover`,classNames:{scrollArea:s?.nav?.scrollArea??h()},children:_(i,{classNames:s,children:b})})}),_(`div`,{className:s?.bottomSlot??f(),children:o||_(t,{path:`/icons/mage-icons.svg`,name:x?`mage-sidebar-expand`:`mage-sidebar-collapse`,label:x?y:c,classNames:{root:s?.collapseButton??u()},onClick:S})})]})},b=({area:e=`sidebar`,classNames:t,isCollapsed:r,defaultCollapsed:i=!1,onCollapsedChange:a,expandedItems:o,topSlot:s,bottomSlot:c,collapseButtonLabelCollapse:l=`Collapse`,collapseButtonLabelExpand:u=`Expand`,children:d})=>_(n,{isCollapsed:r,defaultCollapsed:i,onCollapsedChange:a,expandedItems:o,children:_(y,{area:e,classNames:t,topSlot:s,bottomSlot:c,collapseButtonLabelCollapse:l,collapseButtonLabelExpand:u,children:d})});b.displayName=`Sidebar`,b.Item=o,b.Group=a,b.ItemLink=s,b.SubNav=c;export{b as Sidebar};
 //# sourceMappingURL=Sidebar.mjs.map

package/dist/components/navigations/sidebars/sidebar/Sidebar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.mjs","names":[],"sources":["../../../../../src/components/navigations/sidebars/sidebar/Sidebar.tsx"],"sourcesContent":["import type { CSSProperties, ReactNode } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n  sidebar,\n  sidebarBottomSlot,\n  sidebarNavRoot,\n  sidebarRoot,\n  sidebarScrollAreaAutosize,\n  sidebarTopSlot,\n} from '@mage-ui/styled-system/recipes';\n\nimport { ScrollAreaAutosize } from '../../../misc';\nimport { SidebarProvider } from './SidebarContext';\nimport { NavGroup } from './SidebarNavGroup';\nimport { NavItem } from './SidebarNavItem';\nimport { NavItemLink } from './SidebarNavItemLink';\nimport { NavList } from './SidebarNavList';\nimport { SubNavItem } from './SidebarSubNavItem';\n\nexport type SidebarClassNames = {\n  sidebar?: string;\n  root?: string;\n  scrollArea?: string;\n  topSlot?: string;\n  bottomSlot?: string;\n  nav?: {\n    root?: string;\n    list?: string;\n    scrollArea?: string;\n  };\n};\n\nexport type SidebarProps = {\n  area?: string;\n  topSlot?: ReactNode;\n  bottomSlot?: ReactNode;\n  classNames?: SidebarClassNames;\n  isCollapsed: boolean;\n  expandedItems?: string[];\n  children?: ReactNode;\n};\n\nexport const Sidebar = ({\n  area = 'sidebar',\n  classNames,\n  isCollapsed = false,\n  expandedItems,\n  topSlot,\n  bottomSlot,\n  children,\n}: SidebarProps): ReactNode => {\n  const style =\n    area !== 'sidebar'\n      ? ({ '--sidebar-grid-area': area } as CSSProperties &\n          Record<string, string>)\n      : undefined;\n\n  return (\n    <SidebarProvider isCollapsed={isCollapsed} expandedItems={expandedItems}>\n      <div\n        data-collapsed={isCollapsed ? 'true' : 'false'}\n        className={cx(\n          classNames?.sidebar ?? sidebar(),\n          classNames?.root ?? sidebarRoot(),\n          'group',\n        )}\n        style={style}\n      >\n        {topSlot ? (\n          <div className={classNames?.topSlot ?? sidebarTopSlot()}>\n            {topSlot}\n          </div>\n        ) : null}\n\n        <nav className={classNames?.nav?.root ?? sidebarNavRoot()}>\n          <ScrollAreaAutosize\n            mah='100%'\n            scrollbars='y'\n            type='hover'\n            classNames={{\n              scrollArea:\n                classNames?.nav?.scrollArea ?? sidebarScrollAreaAutosize(),\n            }}\n          >\n            <NavList classNames={classNames}>{children}</NavList>\n          </ScrollAreaAutosize>\n        </nav>\n\n        {bottomSlot ? (\n          <div className={classNames?.bottomSlot ?? sidebarBottomSlot()}>\n            {bottomSlot}\n          </div>\n        ) : null}\n      </div>\n    </SidebarProvider>\n  );\n};\n\nSidebar.displayName = 'Sidebar';\nSidebar.Item = NavItem;\nSidebar.Group = NavGroup;\nSidebar.ItemLink = NavItemLink;\nSidebar.SubNav = SubNavItem;\n"],"mappings":"2pBA2CA,MAAa,GAAW,CACtB,OAAO,UACP,aACA,cAAc,GACd,gBACA,UACA,aACA,cAC6B,CAC7B,IAAM,EACJ,IAAS,UAGL,IAAA,GAFC,CAAE,sBAAuB,EAAM,CAItC,OACE,EAAC,EAAA,CAA6B,cAA4B,yBACxD,EAAC,MAAA,CACC,iBAAgB,EAAc,OAAS,QACvC,UAAW,EACT,GAAY,SAAW,GAAS,CAChC,GAAY,MAAQ,GAAa,CACjC,QACD,CACM,kBAEN,EACC,EAAC,MAAA,CAAI,UAAW,GAAY,SAAW,GAAgB,UACpD,GACG,CACJ,KAEJ,EAAC,MAAA,CAAI,UAAW,GAAY,KAAK,MAAQ,GAAgB,UACvD,EAAC,EAAA,CACC,IAAI,OACJ,WAAW,IACX,KAAK,QACL,WAAY,CACV,WACE,GAAY,KAAK,YAAc,GAA2B,CAC7D,UAED,EAAC,EAAA,CAAoB,aAAa,YAAmB,EAClC,EACjB,CAEL,EACC,EAAC,MAAA,CAAI,UAAW,GAAY,YAAc,GAAmB,UAC1D,GACG,CACJ,OACA,EACU,EAItB,EAAQ,YAAc,UACtB,EAAQ,KAAO,EACf,EAAQ,MAAQ,EAChB,EAAQ,SAAW,EACnB,EAAQ,OAAS"}
+{"version":3,"file":"Sidebar.mjs","names":[],"sources":["../../../../../src/components/navigations/sidebars/sidebar/Sidebar.tsx"],"sourcesContent":["'use client';\n\nimport type { CSSProperties, ReactNode } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n  buttonIconRoot,\n  sidebar,\n  sidebarBottomSlot,\n  sidebarNavRoot,\n  sidebarRoot,\n  sidebarScrollAreaAutosize,\n  sidebarTopSlot,\n} from '@mage-ui/styled-system/recipes';\nimport { ButtonIcon } from '@/components/buttons';\n\nimport { ScrollAreaAutosize } from '../../../misc';\nimport { SidebarProvider, useSidebarContext } from './SidebarContext';\nimport { NavGroup } from './SidebarNavGroup';\nimport { NavItem } from './SidebarNavItem';\nimport { NavItemLink } from './SidebarNavItemLink';\nimport { NavList } from './SidebarNavList';\nimport { SubNavItem } from './SidebarSubNavItem';\n\nexport type SidebarClassNames = {\n  sidebar?: string;\n  root?: string;\n  scrollArea?: string;\n  topSlot?: string;\n  bottomSlot?: string;\n  nav?: {\n    root?: string;\n    list?: string;\n    scrollArea?: string;\n  };\n  collapseButton?: string;\n};\n\nexport type SidebarProps = {\n  area?: string;\n  topSlot?: ReactNode;\n  bottomSlot?: ReactNode;\n  classNames?: SidebarClassNames;\n  isCollapsed?: boolean;\n  defaultCollapsed?: boolean;\n  onCollapsedChange?: (collapsed: boolean) => void;\n  expandedItems?: string[];\n  collapseButtonLabelCollapse?: string;\n  collapseButtonLabelExpand?: string;\n  children?: ReactNode;\n};\n\ntype SidebarContentProps = {\n  area?: string;\n  topSlot?: ReactNode;\n  bottomSlot?: ReactNode;\n  classNames?: SidebarClassNames;\n  collapseButtonLabelCollapse?: string;\n  collapseButtonLabelExpand?: string;\n  children?: ReactNode;\n};\n\nconst SidebarContent = ({\n  area = 'sidebar',\n  topSlot,\n  bottomSlot,\n  classNames,\n  collapseButtonLabelCollapse = 'Collapse',\n  collapseButtonLabelExpand = 'Expand',\n  children,\n}: SidebarContentProps): ReactNode => {\n  const { isCollapsed, toggleCollapsed } = useSidebarContext();\n  const style =\n    area !== 'sidebar'\n      ? ({ '--sidebar-grid-area': area } as CSSProperties &\n          Record<string, string>)\n      : undefined;\n\n  return (\n    <div\n      data-collapsed={isCollapsed ? 'true' : 'false'}\n      className={cx(\n        classNames?.sidebar ?? sidebar(),\n        classNames?.root ?? sidebarRoot(),\n        'group',\n      )}\n      style={style}\n    >\n      {topSlot ? (\n        <div className={classNames?.topSlot ?? sidebarTopSlot()}>{topSlot}</div>\n      ) : null}\n\n      <nav className={classNames?.nav?.root ?? sidebarNavRoot()}>\n        <ScrollAreaAutosize\n          mah='100%'\n          scrollbars='y'\n          type='hover'\n          classNames={{\n            scrollArea:\n              classNames?.nav?.scrollArea ?? sidebarScrollAreaAutosize(),\n          }}\n        >\n          <NavList classNames={classNames}>{children}</NavList>\n        </ScrollAreaAutosize>\n      </nav>\n\n      <div className={classNames?.bottomSlot ?? sidebarBottomSlot()}>\n        {bottomSlot ? (\n          bottomSlot\n        ) : (\n          <ButtonIcon\n            path='/icons/mage-icons.svg'\n            name={isCollapsed ? 'mage-sidebar-expand' : 'mage-sidebar-collapse'}\n            label={\n              isCollapsed\n                ? collapseButtonLabelExpand\n                : collapseButtonLabelCollapse\n            }\n            classNames={{\n              root: classNames?.collapseButton ?? buttonIconRoot(),\n            }}\n            onClick={toggleCollapsed}\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport const Sidebar = ({\n  area = 'sidebar',\n  classNames,\n  isCollapsed,\n  defaultCollapsed = false,\n  onCollapsedChange,\n  expandedItems,\n  topSlot,\n  bottomSlot,\n  collapseButtonLabelCollapse = 'Collapse',\n  collapseButtonLabelExpand = 'Expand',\n  children,\n}: SidebarProps): ReactNode => {\n  return (\n    <SidebarProvider\n      isCollapsed={isCollapsed}\n      defaultCollapsed={defaultCollapsed}\n      onCollapsedChange={onCollapsedChange}\n      expandedItems={expandedItems}\n    >\n      <SidebarContent\n        area={area}\n        classNames={classNames}\n        topSlot={topSlot}\n        bottomSlot={bottomSlot}\n        collapseButtonLabelCollapse={collapseButtonLabelCollapse}\n        collapseButtonLabelExpand={collapseButtonLabelExpand}\n      >\n        {children}\n      </SidebarContent>\n    </SidebarProvider>\n  );\n};\n\nSidebar.displayName = 'Sidebar';\nSidebar.Item = NavItem;\nSidebar.Group = NavGroup;\nSidebar.ItemLink = NavItemLink;\nSidebar.SubNav = SubNavItem;\n"],"mappings":"4xBA8DA,MAAM,GAAkB,CACtB,OAAO,UACP,UACA,aACA,aACA,8BAA8B,WAC9B,4BAA4B,SAC5B,cACoC,CACpC,GAAM,CAAE,cAAa,mBAAoB,GAAmB,CACtD,EACJ,IAAS,UAGL,IAAA,GAFC,CAAE,sBAAuB,EAAM,CAItC,OACE,EAAC,MAAA,CACC,iBAAgB,EAAc,OAAS,QACvC,UAAW,EACT,GAAY,SAAW,GAAS,CAChC,GAAY,MAAQ,GAAa,CACjC,QACD,CACM,kBAEN,EACC,EAAC,MAAA,CAAI,UAAW,GAAY,SAAW,GAAgB,UAAG,GAAc,CACtE,KAEJ,EAAC,MAAA,CAAI,UAAW,GAAY,KAAK,MAAQ,GAAgB,UACvD,EAAC,EAAA,CACC,IAAI,OACJ,WAAW,IACX,KAAK,QACL,WAAY,CACV,WACE,GAAY,KAAK,YAAc,GAA2B,CAC7D,UAED,EAAC,EAAA,CAAoB,aAAa,YAAmB,EAClC,EACjB,CAEN,EAAC,MAAA,CAAI,UAAW,GAAY,YAAc,GAAmB,UAC1D,GAGC,EAAC,EAAA,CACC,KAAK,wBACL,KAAM,EAAc,sBAAwB,wBAC5C,MACE,EACI,EACA,EAEN,WAAY,CACV,KAAM,GAAY,gBAAkB,GAAgB,CACrD,CACD,QAAS,GACT,EAEA,GACF,EAIG,GAAW,CACtB,OAAO,UACP,aACA,cACA,mBAAmB,GACnB,oBACA,gBACA,UACA,aACA,8BAA8B,WAC9B,4BAA4B,SAC5B,cAGE,EAAC,EAAA,CACc,cACK,mBACC,oBACJ,yBAEf,EAAC,EAAA,CACO,OACM,aACH,UACG,aACiB,8BACF,4BAE1B,YACc,EACD,CAItB,EAAQ,YAAc,UACtB,EAAQ,KAAO,EACf,EAAQ,MAAQ,EAChB,EAAQ,SAAW,EACnB,EAAQ,OAAS"}

package/dist/components/navigations/sidebars/sidebar/SidebarContext.mjs

@@ -1,2 +1,2 @@
-import{jsx as e}from"react/jsx-runtime";import{createContext as t,useCallback as n,useContext as r,useEffect as i,useReducer as a}from"react";const o=t(0),s=()=>r(o),c=o.Provider,l=t(!1),u=()=>r(l),d=l.Provider,f=(e,t)=>{switch(t.type){case`TOGGLE`:return e.includes(t.id)?e.filter(e=>e!==t.id):[...e,t.id];case`OPEN_ONLY`:return[t.id];case`CLOSE`:return e.filter(e=>e!==t.id);case`CLOSE_ALL`:return[]}},p=t(null),m=()=>{let e=r(p);if(!e)throw Error(`Sidebar compound components must be used within <Sidebar>.`);return e},h=({isCollapsed:t,expandedItems:r=[],children:o})=>{let[s,c]=a(f,r);i(()=>{t&&c({type:`CLOSE_ALL`})},[t]);let l=n(e=>{c(t?s.includes(e)?{type:`CLOSE`,id:e}:{type:`OPEN_ONLY`,id:e}:{type:`TOGGLE`,id:e})},[t,s]);return e(p.Provider,{value:{isCollapsed:t,isItemExpanded:e=>s.includes(e),toggleItem:l},children:o})};export{d as MenuModeProvider,h as SidebarProvider,c as SubnavDepthProvider,u as useMenuMode,m as useSidebarContext,s as useSubnavDepth};
+import{jsx as e}from"react/jsx-runtime";import{createContext as t,useCallback as n,useContext as r,useEffect as i,useReducer as a,useState as o}from"react";const s=t(0),c=()=>r(s),l=s.Provider,u=t(!1),d=()=>r(u),f=u.Provider,p=(e,t)=>{switch(t.type){case`TOGGLE`:return e.includes(t.id)?e.filter(e=>e!==t.id):[...e,t.id];case`OPEN_ONLY`:return[t.id];case`CLOSE`:return e.filter(e=>e!==t.id);case`CLOSE_ALL`:return[]}},m=t(null),h=()=>{let e=r(m);if(!e)throw Error(`Sidebar compound components must be used within <Sidebar>.`);return e},g=({isCollapsed:t,defaultCollapsed:r=!1,onCollapsedChange:s,expandedItems:c=[],children:l})=>{let[u,d]=o(r),f=t??u,[h,g]=a(p,c),_=n(()=>{let e=!f;t===void 0&&d(e),s?.(e)},[f,t,s]);i(()=>{f&&g({type:`CLOSE_ALL`})},[f]);let v=n(e=>{g(f?h.includes(e)?{type:`CLOSE`,id:e}:{type:`OPEN_ONLY`,id:e}:{type:`TOGGLE`,id:e})},[f,h]);return e(m.Provider,{value:{isCollapsed:f,toggleCollapsed:_,isItemExpanded:e=>h.includes(e),toggleItem:v},children:l})};export{f as MenuModeProvider,g as SidebarProvider,l as SubnavDepthProvider,d as useMenuMode,h as useSidebarContext,c as useSubnavDepth};
 //# sourceMappingURL=SidebarContext.mjs.map

package/dist/components/navigations/sidebars/sidebar/SidebarContext.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarContext.mjs","names":[],"sources":["../../../../../src/components/navigations/sidebars/sidebar/SidebarContext.tsx"],"sourcesContent":["import {\n  createContext,\n  type ReactNode,\n  useCallback,\n  useContext,\n  useEffect,\n  useReducer,\n} from 'react';\n\n// ---------------------------------------------------------------------------\n// Contexto para detectar el nivel de profundidad y aplicar isSubnav\n// ---------------------------------------------------------------------------\n\nconst SubnavDepthContext = createContext(0);\n\nexport const useSubnavDepth = () => useContext(SubnavDepthContext);\n\nexport const SubnavDepthProvider = SubnavDepthContext.Provider;\n\n// ---------------------------------------------------------------------------\n// Contexto para controlar el menu y poder desactivar tooltips\n// ---------------------------------------------------------------------------\n\nconst MenuModeContext = createContext(false);\n\nexport const useMenuMode = () => useContext(MenuModeContext);\n\nexport const MenuModeProvider = MenuModeContext.Provider;\n\n// ---------------------------------------------------------------------------\n// Contexto Sidebar\n// ---------------------------------------------------------------------------\n\ntype SidebarAction =\n  | { type: 'TOGGLE'; id: string }\n  | { type: 'OPEN_ONLY'; id: string }\n  | { type: 'CLOSE'; id: string }\n  | { type: 'CLOSE_ALL' };\n\nconst reducer = (state: string[], action: SidebarAction): string[] => {\n  switch (action.type) {\n    case 'TOGGLE':\n      return state.includes(action.id)\n        ? state.filter((id) => id !== action.id)\n        : [...state, action.id];\n\n    case 'OPEN_ONLY':\n      return [action.id];\n\n    case 'CLOSE':\n      return state.filter((id) => id !== action.id);\n\n    case 'CLOSE_ALL':\n      return [];\n  }\n};\n\ntype SidebarContextValue = {\n  isCollapsed: boolean;\n  isItemExpanded: (id: string) => boolean;\n  toggleItem: (id: string) => void;\n};\n\nconst SidebarContext = createContext<SidebarContextValue | null>(null);\n\nexport const useSidebarContext = (): SidebarContextValue => {\n  const ctx = useContext(SidebarContext);\n  if (!ctx) {\n    throw new Error(\n      'Sidebar compound components must be used within <Sidebar>.',\n    );\n  }\n  return ctx;\n};\n\ntype SidebarProviderProps = {\n  isCollapsed: boolean;\n  expandedItems?: string[];\n  children: ReactNode;\n};\n\nexport const SidebarProvider = ({\n  isCollapsed,\n  expandedItems = [],\n  children,\n}: SidebarProviderProps) => {\n  const [expanded, dispatch] = useReducer(reducer, expandedItems);\n\n  useEffect(() => {\n    if (isCollapsed) dispatch({ type: 'CLOSE_ALL' });\n  }, [isCollapsed]);\n\n  const toggleItem = useCallback(\n    (id: string) => {\n      if (isCollapsed) {\n        dispatch(\n          expanded.includes(id)\n            ? { type: 'CLOSE', id }\n            : { type: 'OPEN_ONLY', id },\n        );\n      } else {\n        dispatch({ type: 'TOGGLE', id });\n      }\n    },\n    [isCollapsed, expanded],\n  );\n\n  return (\n    <SidebarContext.Provider\n      value={{\n        isCollapsed,\n        isItemExpanded: (id) => expanded.includes(id),\n        toggleItem,\n      }}\n    >\n      {children}\n    </SidebarContext.Provider>\n  );\n};\n"],"mappings":"8IAaA,MAAM,EAAqB,EAAc,EAAE,CAE9B,MAAuB,EAAW,EAAmB,CAErD,EAAsB,EAAmB,SAMhD,EAAkB,EAAc,GAAM,CAE/B,MAAoB,EAAW,EAAgB,CAE/C,EAAmB,EAAgB,SAY1C,GAAW,EAAiB,IAAoC,CACpE,OAAQ,EAAO,KAAf,CACE,IAAK,SACH,OAAO,EAAM,SAAS,EAAO,GAAG,CAC5B,EAAM,OAAQ,GAAO,IAAO,EAAO,GAAG,CACtC,CAAC,GAAG,EAAO,EAAO,GAAG,CAE3B,IAAK,YACH,MAAO,CAAC,EAAO,GAAG,CAEpB,IAAK,QACH,OAAO,EAAM,OAAQ,GAAO,IAAO,EAAO,GAAG,CAE/C,IAAK,YACH,MAAO,EAAE,GAUT,EAAiB,EAA0C,KAAK,CAEzD,MAA+C,CAC1D,IAAM,EAAM,EAAW,EAAe,CACtC,GAAI,CAAC,EACH,MAAU,MACR,6DACD,CAEH,OAAO,GASI,GAAmB,CAC9B,cACA,gBAAgB,EAAE,CAClB,cAC0B,CAC1B,GAAM,CAAC,EAAU,GAAY,EAAW,EAAS,EAAc,CAE/D,MAAgB,CACV,GAAa,EAAS,CAAE,KAAM,YAAa,CAAC,EAC/C,CAAC,EAAY,CAAC,CAEjB,IAAM,EAAa,EAChB,GAAe,CAEZ,EADE,EAEA,EAAS,SAAS,EAAG,CACjB,CAAE,KAAM,QAAS,KAAI,CACrB,CAAE,KAAM,YAAa,KAAI,CAGtB,CAAE,KAAM,SAAU,KAAI,CAAC,EAGpC,CAAC,EAAa,EAAS,CACxB,CAED,OACE,EAAC,EAAe,SAAA,CACd,MAAO,CACL,cACA,eAAiB,GAAO,EAAS,SAAS,EAAG,CAC7C,aACD,CAEA,YACuB"}
+{"version":3,"file":"SidebarContext.mjs","names":[],"sources":["../../../../../src/components/navigations/sidebars/sidebar/SidebarContext.tsx"],"sourcesContent":["import {\n  createContext,\n  type ReactNode,\n  useCallback,\n  useContext,\n  useEffect,\n  useReducer,\n  useState,\n} from 'react';\n\n// ---------------------------------------------------------------------------\n// Contexto para detectar el nivel de profundidad y aplicar isSubnav\n// ---------------------------------------------------------------------------\n\nconst SubnavDepthContext = createContext(0);\n\nexport const useSubnavDepth = () => useContext(SubnavDepthContext);\n\nexport const SubnavDepthProvider = SubnavDepthContext.Provider;\n\n// ---------------------------------------------------------------------------\n// Contexto para controlar el menu y poder desactivar tooltips\n// ---------------------------------------------------------------------------\n\nconst MenuModeContext = createContext(false);\n\nexport const useMenuMode = () => useContext(MenuModeContext);\n\nexport const MenuModeProvider = MenuModeContext.Provider;\n\n// ---------------------------------------------------------------------------\n// Contexto Sidebar\n// ---------------------------------------------------------------------------\n\ntype SidebarAction =\n  | { type: 'TOGGLE'; id: string }\n  | { type: 'OPEN_ONLY'; id: string }\n  | { type: 'CLOSE'; id: string }\n  | { type: 'CLOSE_ALL' };\n\nconst reducer = (state: string[], action: SidebarAction): string[] => {\n  switch (action.type) {\n    case 'TOGGLE':\n      return state.includes(action.id)\n        ? state.filter((id) => id !== action.id)\n        : [...state, action.id];\n\n    case 'OPEN_ONLY':\n      return [action.id];\n\n    case 'CLOSE':\n      return state.filter((id) => id !== action.id);\n\n    case 'CLOSE_ALL':\n      return [];\n  }\n};\n\ntype SidebarContextValue = {\n  isCollapsed: boolean;\n  toggleCollapsed: () => void;\n  isItemExpanded: (id: string) => boolean;\n  toggleItem: (id: string) => void;\n};\n\nconst SidebarContext = createContext<SidebarContextValue | null>(null);\n\nexport const useSidebarContext = (): SidebarContextValue => {\n  const ctx = useContext(SidebarContext);\n  if (!ctx) {\n    throw new Error(\n      'Sidebar compound components must be used within <Sidebar>.',\n    );\n  }\n  return ctx;\n};\n\ntype SidebarProviderProps = {\n  isCollapsed?: boolean;\n  defaultCollapsed?: boolean;\n  onCollapsedChange?: (collapsed: boolean) => void;\n  expandedItems?: string[];\n  children: ReactNode;\n};\n\nexport const SidebarProvider = ({\n  isCollapsed: controlledCollapsed,\n  defaultCollapsed = false,\n  onCollapsedChange,\n  expandedItems = [],\n  children,\n}: SidebarProviderProps) => {\n  const [uncontrolledCollapsed, setUncontrolledCollapsed] =\n    useState(defaultCollapsed);\n  const isCollapsed = controlledCollapsed ?? uncontrolledCollapsed;\n  const [expanded, dispatch] = useReducer(reducer, expandedItems);\n\n  const toggleCollapsed = useCallback(() => {\n    const nextCollapsed = !isCollapsed;\n\n    if (controlledCollapsed === undefined) {\n      setUncontrolledCollapsed(nextCollapsed);\n    }\n\n    onCollapsedChange?.(nextCollapsed);\n  }, [isCollapsed, controlledCollapsed, onCollapsedChange]);\n\n  useEffect(() => {\n    if (isCollapsed) dispatch({ type: 'CLOSE_ALL' });\n  }, [isCollapsed]);\n\n  const toggleItem = useCallback(\n    (id: string) => {\n      if (isCollapsed) {\n        dispatch(\n          expanded.includes(id)\n            ? { type: 'CLOSE', id }\n            : { type: 'OPEN_ONLY', id },\n        );\n      } else {\n        dispatch({ type: 'TOGGLE', id });\n      }\n    },\n    [isCollapsed, expanded],\n  );\n\n  return (\n    <SidebarContext.Provider\n      value={{\n        isCollapsed,\n        toggleCollapsed,\n        isItemExpanded: (id) => expanded.includes(id),\n        toggleItem,\n      }}\n    >\n      {children}\n    </SidebarContext.Provider>\n  );\n};\n"],"mappings":"4JAcA,MAAM,EAAqB,EAAc,EAAE,CAE9B,MAAuB,EAAW,EAAmB,CAErD,EAAsB,EAAmB,SAMhD,EAAkB,EAAc,GAAM,CAE/B,MAAoB,EAAW,EAAgB,CAE/C,EAAmB,EAAgB,SAY1C,GAAW,EAAiB,IAAoC,CACpE,OAAQ,EAAO,KAAf,CACE,IAAK,SACH,OAAO,EAAM,SAAS,EAAO,GAAG,CAC5B,EAAM,OAAQ,GAAO,IAAO,EAAO,GAAG,CACtC,CAAC,GAAG,EAAO,EAAO,GAAG,CAE3B,IAAK,YACH,MAAO,CAAC,EAAO,GAAG,CAEpB,IAAK,QACH,OAAO,EAAM,OAAQ,GAAO,IAAO,EAAO,GAAG,CAE/C,IAAK,YACH,MAAO,EAAE,GAWT,EAAiB,EAA0C,KAAK,CAEzD,MAA+C,CAC1D,IAAM,EAAM,EAAW,EAAe,CACtC,GAAI,CAAC,EACH,MAAU,MACR,6DACD,CAEH,OAAO,GAWI,GAAmB,CAC9B,YAAa,EACb,mBAAmB,GACnB,oBACA,gBAAgB,EAAE,CAClB,cAC0B,CAC1B,GAAM,CAAC,EAAuB,GAC5B,EAAS,EAAiB,CACtB,EAAc,GAAuB,EACrC,CAAC,EAAU,GAAY,EAAW,EAAS,EAAc,CAEzD,EAAkB,MAAkB,CACxC,IAAM,EAAgB,CAAC,EAEnB,IAAwB,IAAA,IAC1B,EAAyB,EAAc,CAGzC,IAAoB,EAAc,EACjC,CAAC,EAAa,EAAqB,EAAkB,CAAC,CAEzD,MAAgB,CACV,GAAa,EAAS,CAAE,KAAM,YAAa,CAAC,EAC/C,CAAC,EAAY,CAAC,CAEjB,IAAM,EAAa,EAChB,GAAe,CAEZ,EADE,EAEA,EAAS,SAAS,EAAG,CACjB,CAAE,KAAM,QAAS,KAAI,CACrB,CAAE,KAAM,YAAa,KAAI,CAGtB,CAAE,KAAM,SAAU,KAAI,CAAC,EAGpC,CAAC,EAAa,EAAS,CACxB,CAED,OACE,EAAC,EAAe,SAAA,CACd,MAAO,CACL,cACA,kBACA,eAAiB,GAAO,EAAS,SAAS,EAAG,CAC7C,aACD,CAEA,YACuB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mage-ui/components",
-  "version": "1.0.55",
+  "version": "1.0.57",
   "private": false,
   "description": "",
   "keywords": [],
@@ -25,7 +25,7 @@
     "rimraf": "^6.1.3",
     "tsdown": "^0.20.3",
     "typescript": "^5.9.3",
-    "@mage-ui/preset": "1.0.55",
+    "@mage-ui/preset": "1.0.57",
     "@mage-ui/styled-system": "1.0.8"
   },
   "peerDependencies": {