@astryxdesign/core 0.1.5 → 0.1.6-canary.02f2602

package/dist/SideNav/SideNav.js

@@ -32,13 +32,14 @@ import { MobileNav } from "../MobileNav/MobileNav.js";
 import { useResizable } from "../Resizable/useResizable.js";
 import { ResizeHandle } from "../Resizable/ResizeHandle.js";
 import { themeProps } from "../utils/themeProps.js";
+import { useTranslator } from "../i18n/index.js";
 
 // =============================================================================
 // Constants
 // =============================================================================
 
 /** Width below which dragging collapses the sidebar (when collapsible). */
-import { jsxDEV as _jsxDEV, Fragment as _Fragment } from "react/jsx-dev-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const COLLAPSE_THRESHOLD = 160;
 
 // =============================================================================
@@ -116,6 +117,7 @@ export function SideNav({
   handleRef,
   ...props
 }) {
+  const t = useTranslator();
   // Parse collapsible prop
   const collapsibleConfig = typeof collapsible === 'object' ? collapsible : {};
   const isCollapsible = !!collapsible;
@@ -193,18 +195,18 @@ export function SideNav({
   // Topbar mode — heading + footerIcons in a horizontal bar
   // =========================================================================
   if (renderMode === 'topbar') {
-    return /*#__PURE__*/_jsxDEV("div", {
+    return /*#__PURE__*/_jsxs("div", {
       "data-testid": testId,
       ...mergeProps(themeProps('side-nav', {
         mode: 'topbar'
       }), stylex.props(styles.topbar, xstyle), className, style),
-      children: [header, /*#__PURE__*/_jsxDEV("div", {
+      children: [header, /*#__PURE__*/_jsx("div", {
         ...{
           className: "x78zum5 x6s0dn4 xzye2dw xvc5jky"
         },
         children: footerIcons
-      }, void 0, false)]
-    }, void 0, true);
+      })]
+    });
   }
 
   // =========================================================================
@@ -212,21 +214,21 @@ export function SideNav({
   // =========================================================================
   const hasDrawerFooter = !!(footer || footerIcons);
   if (renderMode === 'drawer') {
-    return /*#__PURE__*/_jsxDEV(MobileNav, {
+    return /*#__PURE__*/_jsxs(MobileNav, {
       header: header,
       "data-testid": testId,
-      children: [topContent, children, hasDrawerFooter && /*#__PURE__*/_jsxDEV("div", {
+      children: [topContent, children, hasDrawerFooter && /*#__PURE__*/_jsxs("div", {
         ...{
           className: "x78zum5 xdt5ytf xr1yuqi x1txdalj x1xye8es x11xkdxz x13fuv20 x1pc3f07"
         },
-        children: [footer, footerIcons && /*#__PURE__*/_jsxDEV("div", {
+        children: [footer, footerIcons && /*#__PURE__*/_jsx("div", {
           ...{
             className: "x78zum5 x6s0dn4 xzye2dw"
           },
           children: footerIcons
-        }, void 0, false)]
-      }, void 0, true)]
-    }, void 0, true);
+        })]
+      })]
+    });
   }
 
   // =========================================================================
@@ -234,19 +236,19 @@ export function SideNav({
   // Used when TopNav owns the drawer and SideNav items are nested inside
   // =========================================================================
   if (renderMode === 'drawer-content') {
-    return /*#__PURE__*/_jsxDEV(_Fragment, {
-      children: [topContent, children, hasDrawerFooter && /*#__PURE__*/_jsxDEV("div", {
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [topContent, children, hasDrawerFooter && /*#__PURE__*/_jsxs("div", {
         ...{
           className: "x78zum5 xdt5ytf xr1yuqi x1txdalj x1xye8es x11xkdxz x13fuv20 x1pc3f07"
         },
-        children: [footer, footerIcons && /*#__PURE__*/_jsxDEV("div", {
+        children: [footer, footerIcons && /*#__PURE__*/_jsx("div", {
           ...{
             className: "x78zum5 x6s0dn4 xzye2dw"
           },
           children: footerIcons
-        }, void 0, false)]
-      }, void 0, true)]
-    }, void 0, true);
+        })]
+      })]
+    });
   }
 
   // =========================================================================
@@ -264,14 +266,14 @@ export function SideNav({
     ...(style ?? {}),
     width: collapsed ? undefined : resizableHook.size
   } : style;
-  const navElement = /*#__PURE__*/_jsxDEV("nav", {
+  const navElement = /*#__PURE__*/_jsxs("nav", {
     ref: mergeRefs(ref, navRef),
     role: "navigation",
-    "aria-label": "Side navigation",
+    "aria-label": t('@astryx.sideNav.label'),
     "data-testid": testId,
     ...mergeProps(themeProps('side-nav'), stylex.props(styles.root, collapsed && styles.rootCollapsed, xstyle), className, resizableNavStyle),
     ...props,
-    children: [hasStickyTop && /*#__PURE__*/_jsxDEV("div", {
+    children: [hasStickyTop && /*#__PURE__*/_jsxs("div", {
       ...{
         0: {
           className: "x78zum5 xdt5ytf x2lah0s x7wzq59 x13vifvy x1vjfegm xgcd1z6 x1xye8es x1wesfrj xf314gf x1txdalj"
@@ -280,11 +282,11 @@ export function SideNav({
           className: "x78zum5 xdt5ytf x2lah0s x7wzq59 x13vifvy x1vjfegm xgcd1z6 x1xye8es x1wesfrj xf314gf x1txdalj x6s0dn4"
         }
       }[!!collapsed << 0],
-      children: [header, topContent && /*#__PURE__*/_jsxDEV("div", {
+      children: [header, topContent && /*#__PURE__*/_jsx("div", {
         ...{},
         children: topContent
-      }, void 0, false)]
-    }, void 0, true), /*#__PURE__*/_jsxDEV("div", {
+      })]
+    }), /*#__PURE__*/_jsx("div", {
       ...{
         0: {
           className: "x98rzlu x1odjw0f x6ikm8r xf314gf x1xye8es x1wesfrj"
@@ -312,7 +314,7 @@ export function SideNav({
         }
       }[!!collapsed << 2 | !!hasStickyTop << 1 | !!hasStickyBottom << 0],
       children: children
-    }, void 0, false), (hasStickyBottom || showCollapseButton) && /*#__PURE__*/_jsxDEV("div", {
+    }), (hasStickyBottom || showCollapseButton) && /*#__PURE__*/_jsxs("div", {
       ...{
         0: {
           className: "x78zum5 xdt5ytf x2lah0s xr1yuqi x7wzq59 x1ey2m1c xgcd1z6 x1txdalj xf314gf xfsso4q x1wesfrj x11xkdxz x13fuv20 x1pc3f07"
@@ -321,7 +323,7 @@ export function SideNav({
           className: "x78zum5 xdt5ytf x2lah0s xr1yuqi x7wzq59 x1ey2m1c xgcd1z6 x1txdalj xf314gf x1wesfrj x11xkdxz x13fuv20 x1pc3f07 xexx8yu"
         }
       }[!!collapsed << 0],
-      children: [footer, /*#__PURE__*/_jsxDEV("div", {
+      children: [footer, /*#__PURE__*/_jsxs("div", {
         ...{
           0: {
             className: "x78zum5 x6s0dn4 xzye2dw"
@@ -330,33 +332,33 @@ export function SideNav({
             className: "x78zum5 x6s0dn4 xzye2dw x3ieub6"
           }
         }[!!collapsed << 0],
-        children: [showCollapseButton && /*#__PURE__*/_jsxDEV(SideNavCollapseButton, {}, void 0, false), footerIcons]
-      }, void 0, true)]
-    }, void 0, true)]
-  }, void 0, true);
+        children: [showCollapseButton && /*#__PURE__*/_jsx(SideNavCollapseButton, {}), footerIcons]
+      })]
+    })]
+  });
 
   // Overlay drag handle inside the nav when resizable.
   // Uses ResizeHandle in overlay mode so the handle sits inside
   // the panel's overflow: clip bounds.
-  const content = showResizeHandle ? /*#__PURE__*/_jsxDEV("div", {
+  const content = showResizeHandle ? /*#__PURE__*/_jsxs("div", {
     ...{
       className: "x1n2onr6 x78zum5 x2lah0s x5yr21d"
     },
-    children: [navElement, /*#__PURE__*/_jsxDEV(ResizeHandle, {
+    children: [navElement, /*#__PURE__*/_jsx(ResizeHandle, {
       "data-testid": "astryx-sidenav-resize-handle",
       direction: "horizontal",
       position: "overlay",
       pillPlacement: "end",
       isAlwaysVisible: false,
       resizable: resizableHook.props,
-      label: "Resize sidebar"
-    }, void 0, false)]
-  }, void 0, true) : navElement;
+      label: t('@astryx.sideNav.resizeSidebar')
+    })]
+  }) : navElement;
   if (isCollapsible) {
-    return /*#__PURE__*/_jsxDEV(SideNavCollapseContext, {
+    return /*#__PURE__*/_jsx(SideNavCollapseContext, {
       value: collapseContext,
       children: content
-    }, void 0, false);
+    });
   }
   return content;
 }

package/dist/SideNav/SideNavCollapseButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SideNavCollapseButton.d.ts","sourceRoot":"","sources":["../../src/SideNav/SideNavCollapseButton.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAK5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,EAGL,KAAK,+BAA+B,EACrC,MAAM,0BAA0B,CAAC;AAwBlC,MAAM,WAAW,0BAA2B,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC9E,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,+BAA+B,GAAG,IAAI,CAAC,CAAC;IAEpE;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAMD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,GAAG,EACH,SAAS,EACT,KAAK,EACL,QAAQ,EACR,OAAO,EAAE,WAAW,EACpB,GAAG,KAAK,EACT,EAAE,0BAA0B,4BAgC5B;yBAvCe,qBAAqB"}
+{"version":3,"file":"SideNavCollapseButton.d.ts","sourceRoot":"","sources":["../../src/SideNav/SideNavCollapseButton.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAK5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,EAGL,KAAK,+BAA+B,EACrC,MAAM,0BAA0B,CAAC;AAyBlC,MAAM,WAAW,0BAA2B,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC9E,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,+BAA+B,GAAG,IAAI,CAAC,CAAC;IAEpE;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAMD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,GAAG,EACH,SAAS,EACT,KAAK,EACL,QAAQ,EACR,OAAO,EAAE,WAAW,EACpB,GAAG,KAAK,EACT,EAAE,0BAA0B,4BAiC5B;yBAxCe,qBAAqB"}

package/dist/SideNav/SideNavCollapseButton.js

@@ -25,11 +25,12 @@ import { Button } from "../Button/index.js";
 import { composeEventHandlers } from "../utils/index.js";
 import { useSideNavCollapse } from "./SideNavCollapseContext.js";
 import { useAppShellMobile } from "../AppShell/AppShellMobileContext.js";
+import { useTranslator } from "../i18n/index.js";
 
 // =============================================================================
 // Styles
 // =============================================================================
-import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 // =============================================================================
 // Types
 // =============================================================================
@@ -67,6 +68,7 @@ export function SideNavCollapseButton({
   onClick: onClickProp,
   ...props
 }) {
+  const t = useTranslator();
   const {
     isCollapsed,
     toggle,
@@ -81,13 +83,13 @@ export function SideNavCollapseButton({
   if (!isCollapsible || isMobile) {
     return null;
   }
-  return /*#__PURE__*/_jsxDEV(Button, {
+  return /*#__PURE__*/_jsx(Button, {
     ref: ref,
-    label: label ?? (isCollapsed ? 'Expand sidebar' : 'Collapse sidebar'),
+    label: label ?? (isCollapsed ? t('@astryx.sideNavCollapseButton.expandSidebar') : t('@astryx.sideNavCollapseButton.collapseSidebar')),
     variant: "ghost",
     ...props,
     onClick: composeEventHandlers(onClickProp, toggle),
-    icon: children ?? /*#__PURE__*/_jsxDEV("span", {
+    icon: children ?? /*#__PURE__*/_jsx("span", {
       ...{
         0: {
           className: "x3nfvp2 x6s0dn4 x11xpdln xuedmi6 xlr8y92"
@@ -97,9 +99,9 @@ export function SideNavCollapseButton({
         }
       }[!!isCollapsed << 0],
       children: getIcon('chevronLeft')
-    }, void 0, false),
+    }),
     isIconOnly: true
-  }, void 0, false);
+  });
 }
 SideNavCollapseButton.displayName = 'SideNavCollapseButton';
 function useSideNavCollapseState(handleRef) {

package/dist/SideNav/SideNavHeading.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SideNavHeading.d.ts","sourceRoot":"","sources":["../../src/SideNav/SideNavHeading.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAkB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAmBtD,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAErD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAoM5C,MAAM,WAAW,mBAAoB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACpE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAQD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,cAAc,CAAC,EAC7B,EAAE,EACF,IAAI,EACJ,OAAO,EACP,WAAW,EACX,YAAY,EACZ,gBAAgB,EAChB,UAAU,EACV,cAAc,EACd,gBAAgB,EAChB,IAAI,EACJ,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,GAAG,KAAK,EACT,EAAE,mBAAmB,sCAmbrB;yBApce,cAAc"}
+{"version":3,"file":"SideNavHeading.d.ts","sourceRoot":"","sources":["../../src/SideNav/SideNavHeading.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAkB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAmBtD,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAErD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAqM5C,MAAM,WAAW,mBAAoB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACpE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAQD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,cAAc,CAAC,EAC7B,EAAE,EACF,IAAI,EACJ,OAAO,EACP,WAAW,EACX,YAAY,EACZ,gBAAgB,EAChB,UAAU,EACV,cAAc,EACd,gBAAgB,EAChB,IAAI,EACJ,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,GAAG,KAAK,EACT,EAAE,mBAAmB,sCAobrB;yBArce,cAAc"}