@lobehub/ui 5.57.2 → 6.0.0-beta.1

package/es/dashboard/ConsoleNav/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/ConsoleNav/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar, responsive }) => {\n  // Fades out at once on collapse, but waits on expand until the width has room for the text.\n  const railFade = `\n    transition: opacity 120ms ease 80ms;\n\n    [data-collapsed='true'] & {\n      opacity: 0;\n      transition-delay: 0s;\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      transition: none;\n    }\n  `;\n\n  return {\n    badge: css`\n      flex: none;\n\n      min-inline-size: 20px;\n      padding-inline: 6px;\n      border-radius: 999px;\n\n      font-size: ${cssVar.fontSizeSM};\n      font-variant-numeric: tabular-nums;\n      color: ${cssVar.colorError};\n      text-align: center;\n\n      background: color-mix(in srgb, ${cssVar.colorError} 12%, transparent);\n\n      ${railFade}\n    `,\n    chevron: css`\n      flex: none;\n      transition:\n        transform 160ms ease,\n        opacity 120ms ease 80ms;\n\n      &[data-expanded='false'] {\n        transform: rotate(-90deg);\n      }\n\n      [data-collapsed='true'] & {\n        opacity: 0;\n        transition-delay: 0s;\n      }\n\n      @media (prefers-reduced-motion: reduce) {\n        transition: none;\n      }\n    `,\n    indicator: css`\n      display: flex;\n      flex: none;\n      align-items: center;\n      justify-content: center;\n\n      width: 18px;\n      height: 18px;\n      margin-inline-start: -6px;\n\n      color: ${cssVar.colorTextDescription};\n\n      transition: transform 160ms ease;\n\n      &[data-expanded='true'] {\n        transform: rotate(90deg);\n      }\n    `,\n    dot: css`\n      position: absolute;\n      inset-block-start: 7px;\n      inset-inline-end: 9px;\n\n      inline-size: 7px;\n      block-size: 7px;\n      border-radius: 999px;\n\n      opacity: 0;\n      background: ${cssVar.colorError};\n\n      transition: opacity 120ms ease;\n\n      [data-collapsed='true'] & {\n        opacity: 1;\n      }\n\n      @media (prefers-reduced-motion: reduce) {\n        transition: none;\n      }\n    `,\n    fold: css`\n      display: grid;\n      grid-template-rows: 1fr;\n      transition:\n        grid-template-rows 200ms ease,\n        margin 200ms ease,\n        opacity 120ms ease;\n\n      > div {\n        overflow: hidden;\n        min-block-size: 0;\n      }\n\n      &[data-folded='true'] {\n        grid-template-rows: 0fr;\n        opacity: 0;\n      }\n\n      &[data-folded='true']:not(:first-child) {\n        margin-block-start: -2px;\n      }\n\n      @media (prefers-reduced-motion: reduce) {\n        transition: none;\n      }\n    `,\n    group: css`\n      position: relative;\n\n      display: flex;\n      flex-direction: column;\n\n      margin-block-start: 12px;\n\n      transition: margin 200ms ease;\n\n      &::before {\n        content: '';\n\n        position: absolute;\n        inset-block-start: -6px;\n        inset-inline: 0;\n\n        block-size: 1px;\n\n        opacity: 0;\n        background: ${cssVar.colorBorderSecondary};\n\n        transition: opacity 200ms ease;\n      }\n\n      &[data-level='0'][data-icon='true'] {\n        margin-block-start: 2px;\n      }\n\n      &:not([data-level='0']) {\n        margin-block-start: 6px;\n      }\n\n      [data-collapsed='true'] & + &[data-level='0'][data-icon='false']::before {\n        opacity: 1;\n      }\n\n      [data-collapsed='true'] &[data-rail-empty='true'] {\n        margin-block-start: 0;\n\n        &::before {\n          opacity: 0;\n        }\n      }\n\n      @media (prefers-reduced-motion: reduce) {\n        transition: none;\n\n        &::before {\n          transition: none;\n        }\n      }\n    `,\n    groupHead: css`\n      position: relative;\n      display: flex;\n      flex-direction: column;\n    `,\n    groupHeader: css`\n      cursor: pointer;\n\n      display: flex;\n      gap: 8px;\n      align-items: center;\n      justify-content: space-between;\n\n      min-block-size: 32px;\n      padding-inline: 10px;\n      border: none;\n      border-radius: ${cssVar.borderRadius};\n\n      font-size: ${cssVar.fontSizeSM};\n      font-weight: 500;\n      color: ${cssVar.colorTextSecondary};\n      text-align: start;\n      white-space: nowrap;\n\n      background: none;\n\n      &:hover,\n      &[data-active='true'] {\n        color: ${cssVar.colorText};\n      }\n\n      &[data-icon='true'] {\n        gap: 10px;\n        justify-content: flex-start;\n        min-block-size: 36px;\n        font-size: ${cssVar.fontSize};\n\n        > [role='img'] {\n          justify-content: center;\n          inline-size: 18px;\n        }\n      }\n\n      &[data-level='0'][data-icon='true']:hover {\n        background: ${cssVar.colorFillTertiary};\n      }\n\n      /* Nested groups read as quiet subheadings with the indicator right after the label. */\n      &:not([data-level='0']) {\n        gap: 8px;\n        justify-content: flex-start;\n\n        min-block-size: 26px;\n\n        font-size: ${cssVar.fontSizeSM};\n        font-weight: 400;\n        color: ${cssVar.colorTextDescription};\n\n        > [data-label] {\n          flex: 0 1 auto;\n        }\n\n        &:hover,\n        &[data-active='true'] {\n          color: ${cssVar.colorTextSecondary};\n        }\n      }\n\n      &[data-indent='1'] {\n        padding-inline-start: 38px;\n      }\n\n      &[data-indent='2'] {\n        padding-inline-start: 56px;\n      }\n\n      > [role='img'] {\n        display: flex;\n        flex: none;\n      }\n    `,\n    groupItems: css`\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n      min-block-size: 0;\n    `,\n    groupPanel: css`\n      display: grid;\n      grid-template-rows: 1fr;\n      transition: grid-template-rows 160ms ease;\n\n      > div {\n        overflow: hidden;\n      }\n\n      &[data-expanded='false'] {\n        grid-template-rows: 0fr;\n      }\n\n      &[data-instant='true'] {\n        transition: none;\n      }\n    `,\n    item: css`\n      position: relative;\n\n      display: flex;\n      gap: 10px;\n      align-items: center;\n\n      min-block-size: 36px;\n      padding-inline: 10px;\n      border-radius: ${cssVar.borderRadius};\n\n      color: ${cssVar.colorTextSecondary};\n      text-decoration: none;\n      white-space: nowrap;\n\n      transition:\n        background 120ms ease,\n        color 120ms ease;\n\n      &:hover {\n        color: ${cssVar.colorText};\n        background: ${cssVar.colorFillTertiary};\n      }\n\n      &[data-active='true'] {\n        font-weight: 500;\n        color: ${cssVar.colorText};\n        background: ${cssVar.colorFillSecondary};\n      }\n\n      &[data-indent='1'],\n      &[data-indent='2'] {\n        min-block-size: 32px;\n        color: ${cssVar.colorText};\n      }\n\n      &[data-indent='1'] {\n        padding-inline-start: 38px;\n      }\n\n      &[data-indent='2'] {\n        padding-inline-start: 56px;\n      }\n\n      [data-collapsed='true'] &:not([data-indent='0']) {\n        padding-inline-start: 10px;\n      }\n\n      > [role='img'] {\n        display: flex;\n        flex: none;\n      }\n\n      ${responsive.mobile} {\n        min-block-size: 44px;\n      }\n    `,\n    itemLabel: css`\n      overflow: hidden;\n      flex: 1;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n\n      [data-collapsed='true'] & {\n        text-overflow: clip;\n      }\n\n      ${railFade}\n    `,\n    nav: css`\n      /* Scroll anchoring would jump the list in one frame while rail rows fold and unfold. */\n      overflow-anchor: none;\n      scrollbar-width: thin;\n\n      display: flex;\n      flex: 1;\n      flex-direction: column;\n      gap: 2px;\n\n      min-block-size: 0;\n      padding-block-end: 12px;\n      padding-inline: 8px;\n    `,\n    railLink: css`\n      position: absolute;\n      inset: 0;\n      border-radius: ${cssVar.borderRadius};\n      transition: background 120ms ease;\n\n      &:hover {\n        background: ${cssVar.colorFillTertiary};\n      }\n\n      &[data-active='true'] {\n        background: ${cssVar.colorFillSecondary};\n      }\n\n      @starting-style {\n        background: transparent;\n      }\n    `,\n    topItems: css`\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n      transition:\n        margin 200ms ease,\n        padding 200ms ease,\n        border-color 200ms ease;\n\n      &[data-divided='true'] {\n        margin-block-end: 6px;\n        padding-block-end: 8px;\n        border-block-end: 1px solid ${cssVar.colorBorderSecondary};\n      }\n\n      [data-collapsed='true'] &[data-rail-empty='true'] {\n        margin-block-end: 0;\n        padding-block-end: 0;\n        border-block-end-color: transparent;\n      }\n\n      @media (prefers-reduced-motion: reduce) {\n        transition: none;\n      }\n    `,\n  };\n});\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,QAAQ,iBAAiB;CAExE,MAAM,WAAW;;;;;;;;;;;;CAajB,OAAO;EACL,OAAO,GAAG;;;;;;;mBAOK,OAAO,WAAW;;eAEtB,OAAO,WAAW;;;uCAGM,OAAO,WAAW;;QAEjD,SAAS;;EAEb,SAAS,GAAG;;;;;;;;;;;;;;;;;;;EAmBZ,WAAW,GAAG;;;;;;;;;;eAUH,OAAO,qBAAqB;;;;;;;;EAQvC,KAAK,GAAG;;;;;;;;;;oBAUQ,OAAO,WAAW;;;;;;;;;;;;EAYlC,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;EA0BT,OAAO,GAAG;;;;;;;;;;;;;;;;;;;;sBAoBQ,OAAO,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiC9C,WAAW,GAAG;;;;;EAKd,aAAa,GAAG;;;;;;;;;;;uBAWG,OAAO,aAAa;;mBAExB,OAAO,WAAW;;eAEtB,OAAO,mBAAmB;;;;;;;;iBAQxB,OAAO,UAAU;;;;;;;qBAOb,OAAO,SAAS;;;;;;;;;sBASf,OAAO,kBAAkB;;;;;;;;;;qBAU1B,OAAO,WAAW;;iBAEtB,OAAO,qBAAqB;;;;;;;;mBAQ1B,OAAO,mBAAmB;;;;;;;;;;;;;;;;;EAiBzC,YAAY,GAAG;;;;;;EAMf,YAAY,GAAG;;;;;;;;;;;;;;;;;EAiBf,MAAM,GAAG;;;;;;;;;uBASU,OAAO,aAAa;;eAE5B,OAAO,mBAAmB;;;;;;;;;iBASxB,OAAO,UAAU;sBACZ,OAAO,kBAAkB;;;;;iBAK9B,OAAO,UAAU;sBACZ,OAAO,mBAAmB;;;;;;iBAM/B,OAAO,UAAU;;;;;;;;;;;;;;;;;;;;QAoB1B,WAAW,OAAO;;;;EAItB,WAAW,GAAG;;;;;;;;;;QAUV,SAAS;;EAEb,KAAK,GAAG;;;;;;;;;;;;;;EAcR,UAAU,GAAG;;;uBAGM,OAAO,aAAa;;;;sBAIrB,OAAO,kBAAkB;;;;sBAIzB,OAAO,mBAAmB;;;;;;;EAO5C,UAAU,GAAG;;;;;;;;;;;;sCAYqB,OAAO,qBAAqB;;;;;;;;;;;;;CAahE;AACF,CAAC"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/ConsoleNav/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport { media } from '@/styles/stylex/media.stylex';\n\nconst reducedMotion = '@media (prefers-reduced-motion: reduce)';\n\nexport const styles = stylex.create({\n  badge: {\n    borderRadius: 999,\n    flex: 'none',\n    paddingInline: 6,\n    backgroundColor: `color-mix(in srgb, ${cssVar.colorError} 12%, transparent)`,\n    color: cssVar.colorError,\n    fontSize: cssVar.fontSizeSM,\n    fontVariantNumeric: 'tabular-nums',\n    minInlineSize: 20,\n    textAlign: 'center',\n  },\n  chevron: {\n    flex: 'none',\n    transition: {\n      default: 'transform 160ms ease, opacity 120ms ease 80ms',\n      [reducedMotion]: 'none',\n    },\n  },\n  chevronFolded: {\n    transform: 'rotate(-90deg)',\n  },\n  dot: {\n    borderRadius: 999,\n    transition: { default: 'opacity 120ms ease', [reducedMotion]: 'none' },\n    backgroundColor: cssVar.colorError,\n    blockSize: 7,\n    inlineSize: 7,\n    insetBlockStart: 7,\n    insetInlineEnd: 9,\n    opacity: 0,\n    position: 'absolute',\n  },\n  dotRail: {\n    opacity: 1,\n  },\n  fold: {\n    transition: {\n      default: 'grid-template-rows 200ms ease, margin 200ms ease, opacity 120ms ease',\n      [reducedMotion]: 'none',\n    },\n    display: 'grid',\n    gridTemplateRows: '1fr',\n  },\n  foldBody: {\n    overflow: 'hidden',\n    minBlockSize: 0,\n  },\n  folded: {\n    gridTemplateRows: '0fr',\n    marginBlockStart: { 'default': null, ':not(:first-child)': -2 },\n    opacity: 0,\n  },\n  group: {\n    'transition': { default: 'margin 200ms ease', [reducedMotion]: 'none' },\n    'display': 'flex',\n    'flexDirection': 'column',\n    'marginBlockStart': 12,\n    'position': 'relative',\n    '::before': {\n      insetInline: 0,\n      transition: { default: 'opacity 200ms ease', [reducedMotion]: 'none' },\n      backgroundColor: cssVar.colorBorderSecondary,\n      blockSize: 1,\n      content: '\"\"',\n      insetBlockStart: -6,\n      opacity: 0,\n      position: 'absolute',\n    },\n  },\n  groupDivider: {\n    '::before': {\n      opacity: 1,\n    },\n  },\n  groupHead: {\n    display: 'flex',\n    flexDirection: 'column',\n    position: 'relative',\n  },\n  groupHeader: {\n    borderColor: 'currentcolor',\n    borderRadius: cssVar.borderRadius,\n    borderStyle: 'none',\n    borderWidth: 'medium',\n    gap: 8,\n    alignItems: 'center',\n    backgroundColor: 'transparent',\n    color: { 'default': cssVar.colorTextSecondary, ':hover': cssVar.colorText },\n    cursor: 'pointer',\n    display: 'flex',\n    fontSize: cssVar.fontSizeSM,\n    fontWeight: 500,\n    justifyContent: 'space-between',\n    minBlockSize: 32,\n    paddingInlineEnd: 10,\n    paddingInlineStart: 10,\n    textAlign: 'start',\n    whiteSpace: 'nowrap',\n  },\n  groupHeaderActive: {\n    color: cssVar.colorText,\n  },\n  groupHeaderIcon: {\n    gap: 10,\n    fontSize: cssVar.fontSize,\n    justifyContent: 'flex-start',\n    minBlockSize: 36,\n  },\n  groupHeaderIndent1: {\n    paddingInlineStart: 38,\n  },\n  groupHeaderIndent2: {\n    paddingInlineStart: 56,\n  },\n  groupHeaderNested: {\n    gap: 8,\n    color: { 'default': cssVar.colorTextDescription, ':hover': cssVar.colorTextSecondary },\n    fontSize: cssVar.fontSizeSM,\n    fontWeight: 400,\n    justifyContent: 'flex-start',\n    minBlockSize: 26,\n  },\n  groupHeaderNestedActive: {\n    color: cssVar.colorTextSecondary,\n  },\n  groupHeaderRailIcon: {\n    backgroundColor: { 'default': 'transparent', ':hover': cssVar.colorFillTertiary },\n  },\n  groupItems: {\n    gap: 2,\n    overflow: 'hidden',\n    display: 'flex',\n    flexDirection: 'column',\n    minBlockSize: 0,\n  },\n  groupLabelNested: {\n    flexBasis: 'auto',\n    flexGrow: '0',\n    flexShrink: '1',\n  },\n  groupLevelIcon: {\n    marginBlockStart: 2,\n  },\n  groupNested: {\n    marginBlockStart: 6,\n  },\n  groupPanel: {\n    transition: 'grid-template-rows 160ms ease',\n    display: 'grid',\n    gridTemplateRows: '1fr',\n  },\n  groupPanelCollapsed: {\n    gridTemplateRows: '0fr',\n  },\n  groupPanelInstant: {\n    transition: 'none',\n  },\n  groupRailEmpty: {\n    marginBlockStart: 0,\n  },\n  headerIcon: {\n    flex: 'none',\n    display: 'flex',\n  },\n  headerIconWide: {\n    inlineSize: 18,\n    justifyContent: 'center',\n  },\n  indicator: {\n    flex: 'none',\n    transition: 'transform 160ms ease',\n    alignItems: 'center',\n    color: cssVar.colorTextDescription,\n    display: 'flex',\n    justifyContent: 'center',\n    marginInlineStart: -6,\n    height: 18,\n    width: 18,\n  },\n  indicatorExpanded: {\n    transform: 'rotate(90deg)',\n  },\n  item: {\n    borderRadius: cssVar.borderRadius,\n    gap: 10,\n    textDecoration: 'none',\n    transition: 'background 120ms ease, color 120ms ease',\n    alignItems: 'center',\n    backgroundColor: { 'default': null, ':hover': cssVar.colorFillTertiary },\n    color: { 'default': cssVar.colorTextSecondary, ':hover': cssVar.colorText },\n    display: 'flex',\n    minBlockSize: { default: 36, [media.mobile]: 44 },\n    paddingInlineEnd: 10,\n    paddingInlineStart: 10,\n    position: 'relative',\n    whiteSpace: 'nowrap',\n  },\n  itemActive: {\n    backgroundColor: cssVar.colorFillSecondary,\n    color: cssVar.colorText,\n    fontWeight: 500,\n  },\n  itemIndent1: {\n    paddingInlineStart: 38,\n  },\n  itemIndent2: {\n    paddingInlineStart: 56,\n  },\n  itemIndented: {\n    color: cssVar.colorText,\n    minBlockSize: 32,\n  },\n  itemLabel: {\n    flex: '1',\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n  },\n  itemLabelRail: {\n    textOverflow: 'clip',\n  },\n  itemRailIndent: {\n    paddingInlineStart: 10,\n  },\n  nav: {\n    flex: '1',\n    gap: 2,\n    paddingInline: 8,\n    display: 'flex',\n    flexDirection: 'column',\n    minBlockSize: 0,\n    overflowAnchor: 'none',\n    paddingBlockEnd: 12,\n    scrollbarWidth: 'thin',\n  },\n  navIcon: {\n    flex: 'none',\n    display: 'flex',\n  },\n  railFade: {\n    transition: { default: 'opacity 120ms ease 80ms', [reducedMotion]: 'none' },\n  },\n  railFaded: {\n    opacity: 0,\n    transitionDelay: '0s',\n  },\n  railLink: {\n    inset: 0,\n    borderRadius: cssVar.borderRadius,\n    transition: 'background 120ms ease',\n    backgroundColor: { 'default': null, ':hover': cssVar.colorFillTertiary },\n    position: 'absolute',\n  },\n  railLinkActive: {\n    backgroundColor: cssVar.colorFillSecondary,\n  },\n  topItems: {\n    gap: 2,\n    transition: {\n      default: 'margin 200ms ease, padding 200ms ease, border-color 200ms ease',\n      [reducedMotion]: 'none',\n    },\n    display: 'flex',\n    flexDirection: 'column',\n  },\n  topItemsDivided: {\n    borderBlockEndColor: cssVar.colorBorderSecondary,\n    borderBlockEndStyle: 'solid',\n    borderBlockEndWidth: 1,\n    marginBlockEnd: 6,\n    paddingBlockEnd: 8,\n  },\n  topItemsRailEmpty: {\n    borderBlockEndColor: 'transparent',\n    marginBlockEnd: 0,\n    paddingBlockEnd: 0,\n  },\n});\n"],"mappings":"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"}

package/es/dashboard/ConsoleNav/type.d.mts

@@ -2,7 +2,7 @@ import { IconProps } from "../../Icon/type.mjs";
 import "../../Icon/index.mjs";
 import { ReactNode } from "react";
 //#region src/dashboard/ConsoleNav/type.d.ts
-interface ConsoleNavItem {
+export interface ConsoleNavItem {
   /** Count shown beside the label. Collapses to a dot on the icon rail. */
   badge?: number;
   /** Match only this path, not its descendants. `/` is always exact. */
@@ -14,7 +14,7 @@ interface ConsoleNavItem {
   icon?: IconProps['icon'];
   label: string;
 }
-interface ConsoleNavGroup {
+export interface ConsoleNavGroup {
   /** Start open or closed, overriding the nav-wide `defaultExpanded` for this group. */
   defaultExpanded?: boolean;
   /** Nested groups, listed after this group's own items. */
@@ -27,7 +27,7 @@ interface ConsoleNavGroup {
   key: string;
   label: string;
 }
-interface ConsoleNavLinkProps {
+export interface ConsoleNavLinkProps {
   'aria-current'?: 'page';
   'aria-label'?: string;
   'children': ReactNode;
@@ -41,7 +41,7 @@ interface ConsoleNavLinkProps {
   'onClick': () => void;
   'title'?: string;
 }
-interface ConsoleNavProps {
+export interface ConsoleNavProps {
   /** Show the icon rail. Defaults to the enclosing `ConsoleShell` state. */
   collapsed?: boolean;
   /**
@@ -67,5 +67,4 @@ interface ConsoleNavProps {
   storageKey?: string;
 }
 //#endregion
-export { ConsoleNavGroup, ConsoleNavItem, ConsoleNavLinkProps, ConsoleNavProps };
 //# sourceMappingURL=type.d.mts.map

package/es/dashboard/ConsoleShell/ConsoleBrand.mjs

@@ -2,20 +2,21 @@
 import { useConsoleShellState } from "./context.mjs";
 import { styles } from "./style.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
 //#region src/dashboard/ConsoleShell/ConsoleBrand.tsx
 function ConsoleBrand({ href = "/", label, logo, renderLink, title }) {
 	const shell = useConsoleShellState();
 	const content = title == null || title === false || title === "" ? logo : /* @__PURE__ */ jsxs("span", {
-		className: styles.brandLockup,
+		...stylex.props(styles.brandLockup),
 		children: [logo, /* @__PURE__ */ jsx("span", {
-			className: styles.brandName,
+			...stylex.props(styles.brandName),
 			children: title
 		})]
 	});
 	const linkProps = {
 		"aria-label": label ?? (typeof title === "string" ? title : "Home"),
 		"children": content,
-		"className": styles.brandAnchor,
+		"className": stylex.props(styles.brandAnchor).className ?? "",
 		href,
 		"onClick": () => shell?.closeNavigation()
 	};

package/es/dashboard/ConsoleShell/ConsoleBrand.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ConsoleBrand.mjs","names":[],"sources":["../../../src/dashboard/ConsoleShell/ConsoleBrand.tsx"],"sourcesContent":["'use client';\n\nimport { useConsoleShellState } from './context';\nimport { styles } from './style';\nimport type { ConsoleBrandProps } from './type';\n\nfunction ConsoleBrand({ href = '/', label, logo, renderLink, title }: ConsoleBrandProps) {\n  const shell = useConsoleShellState();\n  const content =\n    title == null || title === false || title === '' ? (\n      logo\n    ) : (\n      <span className={styles.brandLockup}>\n        {logo}\n        <span className={styles.brandName}>{title}</span>\n      </span>\n    );\n  const linkProps = {\n    'aria-label': label ?? (typeof title === 'string' ? title : 'Home'),\n    'children': content,\n    'className': styles.brandAnchor,\n    href,\n    'onClick': () => shell?.closeNavigation(),\n  };\n  if (renderLink) return renderLink(linkProps);\n  return (\n    <a\n      aria-label={linkProps['aria-label']}\n      className={linkProps.className}\n      href={href}\n      onClick={linkProps.onClick}\n    >\n      {content}\n    </a>\n  );\n}\n\nConsoleBrand.displayName = 'ConsoleBrand';\n\nexport default ConsoleBrand;\n"],"mappings":";;;;;AAMA,SAAS,aAAa,EAAE,OAAO,KAAK,OAAO,MAAM,YAAY,SAA4B;CACvF,MAAM,QAAQ,qBAAqB;CACnC,MAAM,UACJ,SAAS,QAAQ,UAAU,SAAS,UAAU,KAC5C,OAEA,qBAAC,QAAD;EAAM,WAAW,OAAO;EAAxB,UAAA,CACG,MACD,oBAAC,QAAD;GAAM,WAAW,OAAO;GAAY,UAAA;EAAY,CAAA,CAC5C;;CAEV,MAAM,YAAY;EAChB,cAAc,UAAU,OAAO,UAAU,WAAW,QAAQ;EAC5D,YAAY;EACZ,aAAa,OAAO;EACpB;EACA,iBAAiB,OAAO,gBAAgB;CAC1C;CACA,IAAI,YAAY,OAAO,WAAW,SAAS;CAC3C,OACE,oBAAC,KAAD;EACE,cAAY,UAAU;EACtB,WAAW,UAAU;EACf;EACN,SAAS,UAAU;EAElB,UAAA;CACA,CAAA;AAEP;AAEA,aAAa,cAAc"}
+{"version":3,"file":"ConsoleBrand.mjs","names":[],"sources":["../../../src/dashboard/ConsoleShell/ConsoleBrand.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\n\nimport { useConsoleShellState } from './context';\nimport { styles } from './style';\nimport type { ConsoleBrandProps } from './type';\n\nfunction ConsoleBrand({ href = '/', label, logo, renderLink, title }: ConsoleBrandProps) {\n  const shell = useConsoleShellState();\n  const content =\n    title == null || title === false || title === '' ? (\n      logo\n    ) : (\n      <span {...stylex.props(styles.brandLockup)}>\n        {logo}\n        <span {...stylex.props(styles.brandName)}>{title}</span>\n      </span>\n    );\n  const linkProps = {\n    'aria-label': label ?? (typeof title === 'string' ? title : 'Home'),\n    'children': content,\n    'className': stylex.props(styles.brandAnchor).className ?? '',\n    href,\n    'onClick': () => shell?.closeNavigation(),\n  };\n  if (renderLink) return renderLink(linkProps);\n  return (\n    <a\n      aria-label={linkProps['aria-label']}\n      className={linkProps.className}\n      href={href}\n      onClick={linkProps.onClick}\n    >\n      {content}\n    </a>\n  );\n}\n\nConsoleBrand.displayName = 'ConsoleBrand';\n\nexport default ConsoleBrand;\n"],"mappings":";;;;;;AAMA,SAAS,aAAa,EACpB,OAAO,KACP,OACA,MACA,YACA,SACoB;CACpB,MAAM,QAAQ,qBAAqB;CACnC,MAAM,UAAU,SAAS,QAAQ,UAAU,SAAS,UAAU,KAAK,OAAO,qBAAC,QAAD;EAAM,GAAI,OAAO,MAAM,OAAO,WAAW;EAAzC,UAAA,CACnE,MACD,oBAAC,QAAD;GAAM,GAAI,OAAO,MAAM,OAAO,SAAS;GAAI,UAAA;EAAY,CAAA,CACnD;;CACV,MAAM,YAAY;EAChB,cAAc,UAAU,OAAO,UAAU,WAAW,QAAQ;EAC5D,YAAY;EACZ,aAAa,OAAO,MAAM,OAAO,WAAW,CAAC,CAAC,aAAa;EAC3D;EACA,iBAAiB,OAAO,gBAAgB;CAC1C;CACA,IAAI,YAAY,OAAO,WAAW,SAAS;CAC3C,OAAO,oBAAC,KAAD;EAAG,cAAY,UAAU;EAAe,WAAW,UAAU;EAAiB;EAAM,SAAS,UAAU;EACzG,UAAA;CACA,CAAA;AACP;AACA,aAAa,cAAc"}

package/es/dashboard/ConsoleShell/ConsoleShell.d.mts

@@ -1,6 +1,6 @@
 import { ConsoleShellProps } from "./type.mjs";
 //#region src/dashboard/ConsoleShell/ConsoleShell.d.ts
-declare function ConsoleShell({ brand, breadcrumb, children, className, collapsed, collapseLabel, defaultCollapsed, expandLabel, footer, hotkey, navigation, onCollapsedChange, openNavigationLabel, skipToContentLabel, storageKey, tools, ...rest }: ConsoleShellProps): import("react").JSX.Element;
+declare function ConsoleShell({ brand, breadcrumb, children, className, collapsed, collapseLabel, defaultCollapsed, expandLabel, footer, hotkey, navigation, onCollapsedChange, openNavigationLabel, skipToContentLabel, storageKey, style, tools, ...rest }: ConsoleShellProps): import("react").JSX.Element;
 declare namespace ConsoleShell {
   var displayName: string;
 }

package/es/dashboard/ConsoleShell/ConsoleShell.mjs

@@ -1,12 +1,15 @@
 "use client";
+import { styleProps } from "../../styles/stylex/props.mjs";
+import Button from "../../Button/Button.mjs";
 import FlexBasic_default from "../../Flex/FlexBasic.mjs";
-import Button from "../../base-ui/Button/Button.mjs";
-import Drawer from "../../base-ui/Drawer/Drawer.mjs";
+import Drawer from "../../Drawer/Drawer.mjs";
 import { ConsoleShellContext } from "./context.mjs";
 import { useIsCompact, useLocalStorage, usePrefersReducedMotion } from "../hooks.mjs";
+import { consoleBrandMarker } from "./marker.stylex.mjs";
 import { styles } from "./style.mjs";
 import { useEffect, useId, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
 import { PanelLeft } from "lucide-react";
 //#region src/dashboard/ConsoleShell/ConsoleShell.tsx
 function isTypingTarget(target) {
@@ -14,7 +17,7 @@ function isTypingTarget(target) {
 	const tag = target.tagName;
 	return tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT" || target.isContentEditable;
 }
-function ConsoleShell({ brand, breadcrumb, children, className, collapsed, collapseLabel = "Collapse sidebar", defaultCollapsed = false, expandLabel = "Expand sidebar", footer, hotkey = true, navigation, onCollapsedChange, openNavigationLabel = "Open navigation", skipToContentLabel = "Skip to content", storageKey, tools, ...rest }) {
+function ConsoleShell({ brand, breadcrumb, children, className, collapsed, collapseLabel = "Collapse sidebar", defaultCollapsed = false, expandLabel = "Expand sidebar", footer, hotkey = true, navigation, onCollapsedChange, openNavigationLabel = "Open navigation", skipToContentLabel = "Skip to content", storageKey, style, tools, ...rest }) {
 	const mainId = `console-main-${useId().replaceAll(":", "")}`;
 	const shellRef = useRef(null);
 	const isCompact = useIsCompact();
@@ -61,40 +64,40 @@ function ConsoleShell({ brand, breadcrumb, children, className, collapsed, colla
 		value: stateFor(rail),
 		children: [
 			brand ? /* @__PURE__ */ jsx("div", {
-				className: styles.brand,
 				"data-collapsed": rail,
+				...stylex.props(styles.brand, consoleBrandMarker),
 				children: brand
 			}) : null,
 			navigation ? /* @__PURE__ */ jsx("div", {
-				className: styles.navSlot,
+				...stylex.props(styles.navSlot),
 				children: navigation
 			}) : null,
 			footer ? /* @__PURE__ */ jsx("div", {
-				className: styles.sidebarBottom,
+				...stylex.props(styles.sidebarBottom),
 				children: footer
 			}) : null
 		]
 	});
 	const toggleLabel = isCompact ? openNavigationLabel : railed ? expandLabel : collapseLabel;
 	return /* @__PURE__ */ jsxs("div", {
-		className: className ? `${styles.shell} ${className}` : styles.shell,
 		"data-console-shell": "",
 		ref: shellRef,
+		...styleProps(styles.shell, className, style),
 		...rest,
 		children: [
 			/* @__PURE__ */ jsx("a", {
-				className: styles.skipLink,
 				href: `#${mainId}`,
 				onClick: (event) => {
 					event.preventDefault();
 					document.getElementById(mainId)?.focus();
 				},
+				...stylex.props(styles.skipLink),
 				children: skipToContentLabel
 			}),
 			/* @__PURE__ */ jsx("aside", {
-				className: styles.sidebar,
 				"data-collapsed": railed,
 				"data-instant": reducedMotion,
+				...stylex.props(styles.sidebar, railed && styles.sidebarCollapsed, reducedMotion && styles.sidebarInstant),
 				children: !isCompact && sidebar(railed)
 			}),
 			isCompact ? /* @__PURE__ */ jsx(Drawer, {
@@ -109,9 +112,9 @@ function ConsoleShell({ brand, breadcrumb, children, className, collapsed, colla
 				})
 			}) : null,
 			/* @__PURE__ */ jsxs("div", {
-				className: styles.workspace,
+				...stylex.props(styles.workspace),
 				children: [/* @__PURE__ */ jsxs("header", {
-					className: styles.topbar,
+					...stylex.props(styles.topbar),
 					children: [
 						/* @__PURE__ */ jsx(Button, {
 							"aria-label": toggleLabel,
@@ -121,21 +124,21 @@ function ConsoleShell({ brand, breadcrumb, children, className, collapsed, colla
 						}),
 						/* @__PURE__ */ jsx("span", {
 							"aria-hidden": true,
-							className: styles.topbarDivider
+							...stylex.props(styles.topbarDivider)
 						}),
 						/* @__PURE__ */ jsx("div", {
-							className: styles.topbarMain,
+							...stylex.props(styles.topbarMain),
 							children: breadcrumb
 						}),
 						tools ? /* @__PURE__ */ jsx("div", {
-							className: styles.tools,
+							...stylex.props(styles.tools),
 							children: tools
 						}) : null
 					]
 				}), /* @__PURE__ */ jsx("main", {
-					className: styles.main,
 					id: mainId,
 					tabIndex: -1,
+					...stylex.props(styles.main),
 					children
 				})]
 			})

package/es/dashboard/ConsoleShell/ConsoleShell.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ConsoleShell.mjs","names":["Flexbox"],"sources":["../../../src/dashboard/ConsoleShell/ConsoleShell.tsx"],"sourcesContent":["'use client';\n\nimport { PanelLeft } from 'lucide-react';\nimport { useEffect, useId, useRef, useState } from 'react';\n\nimport Button from '@/base-ui/Button';\nimport { Drawer } from '@/base-ui/Drawer';\nimport { Flexbox } from '@/Flex';\n\nimport { useIsCompact, useLocalStorage, usePrefersReducedMotion } from '../hooks';\nimport { ConsoleShellContext } from './context';\nimport { styles } from './style';\nimport type { ConsoleShellProps, ConsoleShellState } from './type';\n\nfunction isTypingTarget(target: EventTarget | null) {\n  if (!(target instanceof HTMLElement)) return false;\n  const tag = target.tagName;\n  return tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT' || target.isContentEditable;\n}\n\nfunction ConsoleShell({\n  brand,\n  breadcrumb,\n  children,\n  className,\n  collapsed,\n  collapseLabel = 'Collapse sidebar',\n  defaultCollapsed = false,\n  expandLabel = 'Expand sidebar',\n  footer,\n  hotkey = true,\n  navigation,\n  onCollapsedChange,\n  openNavigationLabel = 'Open navigation',\n  skipToContentLabel = 'Skip to content',\n  storageKey,\n  tools,\n  ...rest\n}: ConsoleShellProps) {\n  const mainId = `console-main-${useId().replaceAll(':', '')}`;\n  const shellRef = useRef<HTMLDivElement>(null);\n  const isCompact = useIsCompact();\n  const reducedMotion = usePrefersReducedMotion();\n  const [storedCollapsed, setStoredCollapsed] = useLocalStorage(storageKey, defaultCollapsed);\n  const [drawerOpen, setDrawerOpen] = useState(false);\n  const isControlled = collapsed !== undefined;\n  const railCollapsed = isControlled ? collapsed : storedCollapsed;\n  const railed = railCollapsed && !isCompact;\n\n  const setCollapsed = (next: boolean) => {\n    if (!isControlled) setStoredCollapsed(next);\n    onCollapsedChange?.(next);\n  };\n\n  const closeNavigation = () => setDrawerOpen(false);\n  const toggleNavigation = () => {\n    if (isCompact) {\n      setDrawerOpen((open) => !open);\n      return;\n    }\n    setCollapsed(!railCollapsed);\n  };\n  const toggleRef = useRef(toggleNavigation);\n  toggleRef.current = toggleNavigation;\n\n  useEffect(() => {\n    if (!hotkey) return;\n    const node = shellRef.current;\n    if (!node) return;\n\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key.toLowerCase() !== 'b' || !(event.metaKey || event.ctrlKey) || event.altKey) {\n        return;\n      }\n      if (event.repeat || isTypingTarget(event.target)) return;\n      if (!node.contains(event.target as Node)) return;\n      event.preventDefault();\n      toggleRef.current();\n    };\n\n    document.addEventListener('keydown', onKeyDown);\n    return () => document.removeEventListener('keydown', onKeyDown);\n  }, [hotkey]);\n\n  const stateFor = (rail: boolean): ConsoleShellState => ({\n    closeNavigation,\n    collapsed: rail,\n    compact: isCompact,\n  });\n\n  const sidebar = (rail: boolean) => (\n    <ConsoleShellContext value={stateFor(rail)}>\n      {brand ? (\n        <div className={styles.brand} data-collapsed={rail}>\n          {brand}\n        </div>\n      ) : null}\n      {navigation ? <div className={styles.navSlot}>{navigation}</div> : null}\n      {footer ? <div className={styles.sidebarBottom}>{footer}</div> : null}\n    </ConsoleShellContext>\n  );\n\n  const toggleLabel = isCompact ? openNavigationLabel : railed ? expandLabel : collapseLabel;\n\n  return (\n    <div\n      className={className ? `${styles.shell} ${className}` : styles.shell}\n      data-console-shell=\"\"\n      ref={shellRef}\n      {...rest}\n    >\n      <a\n        className={styles.skipLink}\n        href={`#${mainId}`}\n        onClick={(event) => {\n          event.preventDefault();\n          document.getElementById(mainId)?.focus();\n        }}\n      >\n        {skipToContentLabel}\n      </a>\n      <aside className={styles.sidebar} data-collapsed={railed} data-instant={reducedMotion}>\n        {!isCompact && sidebar(railed)}\n      </aside>\n      {isCompact ? (\n        <Drawer noHeader open={drawerOpen} placement=\"left\" width={272} onClose={closeNavigation}>\n          <Flexbox height=\"100%\">{sidebar(false)}</Flexbox>\n        </Drawer>\n      ) : null}\n      <div className={styles.workspace}>\n        <header className={styles.topbar}>\n          <Button\n            aria-label={toggleLabel}\n            icon={PanelLeft}\n            type=\"text\"\n            onClick={toggleNavigation}\n          />\n          <span aria-hidden className={styles.topbarDivider} />\n          <div className={styles.topbarMain}>{breadcrumb}</div>\n          {tools ? <div className={styles.tools}>{tools}</div> : null}\n        </header>\n        <main className={styles.main} id={mainId} tabIndex={-1}>\n          {children}\n        </main>\n      </div>\n    </div>\n  );\n}\n\nConsoleShell.displayName = 'ConsoleShell';\n\nexport default ConsoleShell;\n"],"mappings":"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"}
+{"version":3,"file":"ConsoleShell.mjs","names":["Flexbox"],"sources":["../../../src/dashboard/ConsoleShell/ConsoleShell.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { PanelLeft } from 'lucide-react';\nimport { useEffect, useId, useRef, useState } from 'react';\n\nimport Button from '@/Button';\nimport { Drawer } from '@/Drawer';\nimport { Flexbox } from '@/Flex';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { useIsCompact, useLocalStorage, usePrefersReducedMotion } from '../hooks';\nimport { ConsoleShellContext } from './context';\nimport { consoleBrandMarker } from './marker.stylex';\nimport { styles } from './style';\nimport type { ConsoleShellProps, ConsoleShellState } from './type';\n\nfunction isTypingTarget(target: EventTarget | null) {\n  if (!(target instanceof HTMLElement)) return false;\n  const tag = target.tagName;\n  return tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT' || target.isContentEditable;\n}\n\nfunction ConsoleShell({\n  brand,\n  breadcrumb,\n  children,\n  className,\n  collapsed,\n  collapseLabel = 'Collapse sidebar',\n  defaultCollapsed = false,\n  expandLabel = 'Expand sidebar',\n  footer,\n  hotkey = true,\n  navigation,\n  onCollapsedChange,\n  openNavigationLabel = 'Open navigation',\n  skipToContentLabel = 'Skip to content',\n  storageKey,\n  style,\n  tools,\n  ...rest\n}: ConsoleShellProps) {\n  const mainId = `console-main-${useId().replaceAll(':', '')}`;\n  const shellRef = useRef<HTMLDivElement>(null);\n  const isCompact = useIsCompact();\n  const reducedMotion = usePrefersReducedMotion();\n  const [storedCollapsed, setStoredCollapsed] = useLocalStorage(storageKey, defaultCollapsed);\n  const [drawerOpen, setDrawerOpen] = useState(false);\n  const isControlled = collapsed !== undefined;\n  const railCollapsed = isControlled ? collapsed : storedCollapsed;\n  const railed = railCollapsed && !isCompact;\n\n  const setCollapsed = (next: boolean) => {\n    if (!isControlled) setStoredCollapsed(next);\n    onCollapsedChange?.(next);\n  };\n\n  const closeNavigation = () => setDrawerOpen(false);\n  const toggleNavigation = () => {\n    if (isCompact) {\n      setDrawerOpen((open) => !open);\n      return;\n    }\n    setCollapsed(!railCollapsed);\n  };\n  const toggleRef = useRef(toggleNavigation);\n  toggleRef.current = toggleNavigation;\n\n  useEffect(() => {\n    if (!hotkey) return;\n    const node = shellRef.current;\n    if (!node) return;\n\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key.toLowerCase() !== 'b' || !(event.metaKey || event.ctrlKey) || event.altKey) {\n        return;\n      }\n      if (event.repeat || isTypingTarget(event.target)) return;\n      if (!node.contains(event.target as Node)) return;\n      event.preventDefault();\n      toggleRef.current();\n    };\n\n    document.addEventListener('keydown', onKeyDown);\n    return () => document.removeEventListener('keydown', onKeyDown);\n  }, [hotkey]);\n\n  const stateFor = (rail: boolean): ConsoleShellState => ({\n    closeNavigation,\n    collapsed: rail,\n    compact: isCompact,\n  });\n\n  const sidebar = (rail: boolean) => (\n    <ConsoleShellContext value={stateFor(rail)}>\n      {brand ? (\n        <div data-collapsed={rail} {...stylex.props(styles.brand, consoleBrandMarker)}>\n          {brand}\n        </div>\n      ) : null}\n      {navigation ? <div {...stylex.props(styles.navSlot)}>{navigation}</div> : null}\n      {footer ? <div {...stylex.props(styles.sidebarBottom)}>{footer}</div> : null}\n    </ConsoleShellContext>\n  );\n\n  const toggleLabel = isCompact ? openNavigationLabel : railed ? expandLabel : collapseLabel;\n\n  return (\n    <div\n      data-console-shell=\"\"\n      ref={shellRef}\n      {...styleProps(styles.shell, className, style)}\n      {...rest}\n    >\n      <a\n        href={`#${mainId}`}\n        onClick={(event) => {\n          event.preventDefault();\n          document.getElementById(mainId)?.focus();\n        }}\n        {...stylex.props(styles.skipLink)}\n      >\n        {skipToContentLabel}\n      </a>\n      <aside\n        data-collapsed={railed}\n        data-instant={reducedMotion}\n        {...stylex.props(\n          styles.sidebar,\n          railed && styles.sidebarCollapsed,\n          reducedMotion && styles.sidebarInstant,\n        )}\n      >\n        {!isCompact && sidebar(railed)}\n      </aside>\n      {isCompact ? (\n        <Drawer noHeader open={drawerOpen} placement=\"left\" width={272} onClose={closeNavigation}>\n          <Flexbox height=\"100%\">{sidebar(false)}</Flexbox>\n        </Drawer>\n      ) : null}\n      <div {...stylex.props(styles.workspace)}>\n        <header {...stylex.props(styles.topbar)}>\n          <Button\n            aria-label={toggleLabel}\n            icon={PanelLeft}\n            type=\"text\"\n            onClick={toggleNavigation}\n          />\n          <span aria-hidden {...stylex.props(styles.topbarDivider)} />\n          <div {...stylex.props(styles.topbarMain)}>{breadcrumb}</div>\n          {tools ? <div {...stylex.props(styles.tools)}>{tools}</div> : null}\n        </header>\n        <main id={mainId} tabIndex={-1} {...stylex.props(styles.main)}>\n          {children}\n        </main>\n      </div>\n    </div>\n  );\n}\n\nConsoleShell.displayName = 'ConsoleShell';\n\nexport default ConsoleShell;\n"],"mappings":"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"}

package/es/dashboard/ConsoleShell/context.d.mts

@@ -1,6 +1,5 @@
 import { ConsoleShellState } from "./type.mjs";
 //#region src/dashboard/ConsoleShell/context.d.ts
-declare function useConsoleShell(): ConsoleShellState;
+export declare function useConsoleShell(): ConsoleShellState;
 //#endregion
-export { useConsoleShell };
 //# sourceMappingURL=context.d.mts.map

package/es/dashboard/ConsoleShell/marker.stylex.mjs

@@ -0,0 +1,9 @@
+//#region src/dashboard/ConsoleShell/marker.stylex.ts
+const consoleBrandMarker = {
+	lb1iwm6ff: "lb1iwm6ff",
+	$$css: true
+};
+//#endregion
+export { consoleBrandMarker };
+
+//# sourceMappingURL=marker.stylex.mjs.map

package/es/dashboard/ConsoleShell/marker.stylex.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"marker.stylex.mjs","names":[],"sources":["../../../src/dashboard/ConsoleShell/marker.stylex.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nexport const consoleBrandMarker = stylex.defineMarker();\n"],"mappings":";AACA,MAAa,qBAAqB;CAChC,WAAW;CACX,OAAO;AACT"}