@mage-ui/components 1.0.51 → 1.0.52

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

@@ -1,3 +1,4 @@
+import { BreadcrumbsBarProps } from "./BreadcrumbsBar.mjs";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { ReactNode } from "react";
 
@@ -11,6 +12,7 @@ type BreadcrumbsProps = {
     list?: string;
     item?: string;
     separator?: string;
+    current?: string;
   };
   children?: ReactNode;
 };
@@ -26,6 +28,15 @@ declare const Breadcrumbs: {
     }: ItemProps): ReactNode;
     displayName: string;
   };
+  Bar: {
+    ({
+      backText,
+      classNames,
+      children,
+      onBack
+    }: BreadcrumbsBarProps): ReactNode;
+    displayName: string;
+  };
 };
 type ItemProps = {
   children: ReactNode;

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":";;;;KAoBY,gBAAA;EACV,SAAA,GAAY,SAAA;EACZ,UAAA;IACE,WAAA;IACA,IAAA;IACA,OAAA;IACA,IAAA;IACA,IAAA;IACA,SAAA;EAAA;EAEF,QAAA,GAAW,SAAA;AAAA;AAAA,cAGA,WAAA;EAAA;;;;KAIV,gBAAA,GAAgB,kBAAA,CAAA,GAAA,CAAA,OAAA;;;;OAkES,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":";;;;;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"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumbs.mjs","names":[],"sources":["../../../../src/components/navigations/breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["import {\n  Children,\n  cloneElement,\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\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  };\n  children?: ReactNode;\n};\n\nexport const Breadcrumbs = ({\n  separator = '/',\n  children,\n  classNames,\n}: BreadcrumbsProps) => {\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          {Children.map(children, (child, index) => {\n            if (\n              isValidElement<{ children: ReactNode }>(child) &&\n              child.type === Item\n            ) {\n              return (\n                <li\n                  key={child.key}\n                  className={classNames?.item ?? breadcrumbsItem()}\n                >\n                  {index < Children.count(children) - 1 && (\n                    <>\n                      {child}\n                      <span\n                        aria-hidden='true'\n                        className={\n                          classNames?.separator ?? breadcrumbsSeparator()\n                        }\n                      >\n                        {separator}\n                      </span>\n                    </>\n                  )}\n                  {index === Children.count(children) - 1 && lastItem(child)}\n                </li>\n              );\n            }\n          })}\n        </ol>\n      </div>\n    </nav>\n  );\n};\n\ntype Child = ReactElement<{ children?: ReactNode }>;\n\nconst lastItem = (child: Child) => {\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 aria-current='page' className={breadcrumbsCurrent()}>\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;\n"],"mappings":"6XAiCA,MAAa,GAAe,CAC1B,YAAY,IACZ,WACA,gBAGE,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,EAAS,IAAI,GAAW,EAAO,IAAU,CACxC,GACE,EAAwC,EAAM,EAC9C,EAAM,OAAS,EAEf,OACE,EAAC,KAAA,CAEC,UAAW,GAAY,MAAQ,GAAiB,WAE/C,EAAQ,EAAS,MAAM,EAAS,CAAG,GAClC,EAAA,EAAA,CAAA,SAAA,CACG,EACD,EAAC,OAAA,CACC,cAAY,OACZ,UACE,GAAY,WAAa,GAAsB,UAGhD,GACI,CAAA,CAAA,CACN,CAEJ,IAAU,EAAS,MAAM,EAAS,CAAG,GAAK,EAAS,EAAM,CAAA,EAhBrD,EAAM,IAiBR,EAGT,EACC,EACD,EACF,CAMJ,EAAY,GAAiB,CACjC,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,CAAK,eAAa,OAAO,UAAW,GAAoB,UACtD,GACI,EAQL,GAAQ,CAAE,cACP,EAGT,EAAK,YAAc,mBACnB,EAAY,KAAO"}
+{"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"}

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

@@ -0,0 +1,18 @@
+import { ReactNode } from "react";
+
+//#region src/components/navigations/breadcrumbs/BreadcrumbsBar.d.ts
+type BreadcrumbsBarProps = {
+  backText?: ReactNode;
+  classNames?: {
+    breadcrumbsBar?: string;
+    root?: string;
+    wrapper?: string;
+    divider?: string;
+    buttonBack?: string;
+  };
+  children?: ReactNode;
+  onBack?: () => void;
+};
+//#endregion
+export { BreadcrumbsBarProps };
+//# sourceMappingURL=BreadcrumbsBar.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BreadcrumbsBar.d.mts","names":[],"sources":["../../../../src/components/navigations/breadcrumbs/BreadcrumbsBar.tsx"],"mappings":";;;KAYY,mBAAA;EACV,QAAA,GAAW,SAAA;EACX,UAAA;IACE,cAAA;IACA,IAAA;IACA,OAAA;IACA,OAAA;IACA,UAAA;EAAA;EAEF,QAAA,GAAW,SAAA;EACX,MAAA;AAAA"}

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

@@ -0,0 +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};
+//# sourceMappingURL=BreadcrumbsBar.mjs.map

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

@@ -0,0 +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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mage-ui/components",
-  "version": "1.0.51",
+  "version": "1.0.52",
   "private": false,
   "description": "",
   "keywords": [],
@@ -25,8 +25,8 @@
     "rimraf": "^6.1.3",
     "tsdown": "^0.20.3",
     "typescript": "^5.9.3",
-    "@mage-ui/styled-system": "1.0.8",
-    "@mage-ui/preset": "1.0.51"
+    "@mage-ui/preset": "1.0.52",
+    "@mage-ui/styled-system": "1.0.8"
   },
   "peerDependencies": {
     "@hookform/resolvers": "^5.2.2",