ods-ant 0.2.0 → 0.4.1

package/dist-lib/navigation/Menu.cjs

@@ -0,0 +1,177 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-Bmb41Sf3.cjs`);const e=require(`../theme.cjs`);let t=require(`antd`),n=require(`react`),r=require(`react/jsx-runtime`);var i=`ds-menu-styles`,a=`ds-menu`,o={appNav:{mode:`horizontal`,inlineIndent:24,selectable:!0,width:`100%`},sideNav:{mode:`inline`,inlineIndent:20,selectable:!0,width:e.dsSemanticTokens.menu.width.side},sectionNav:{mode:`vertical`,inlineIndent:18,selectable:!0,width:e.dsSemanticTokens.menu.width.section},actionMenu:{mode:`vertical`,inlineIndent:16,selectable:!1,width:e.dsSemanticTokens.menu.width.action},compact:{mode:`vertical`,inlineIndent:14,selectable:!0,width:e.dsSemanticTokens.menu.width.compact}};function s(...e){return e.filter(Boolean).join(` `).trim()}function c(){if(typeof document>`u`||document.getElementById(i))return;let{menu:t,tag:n}=e.dsSemanticTokens,r=document.createElement(`style`);r.id=i,r.textContent=`
+    .${a}.ant-menu {
+      width: var(--ds-menu-width);
+      min-width: 0;
+      padding: var(--ds-menu-padding, 4px);
+      border: 0;
+      border-radius: var(--ds-menu-container-radius, 0);
+      background: var(--ds-menu-surface);
+      box-shadow: var(--ds-menu-shadow, none);
+      font-family: 'Nunito', sans-serif;
+      color: ${t.text.default};
+    }
+
+    .${a}.ant-menu,
+    .${a}.ant-menu .ant-menu-item,
+    .${a}.ant-menu .ant-menu-submenu-title,
+    .${a}.ant-menu .ant-menu-title-content,
+    .${a}.ant-menu .ant-menu-item-icon,
+    .${a}.ant-menu .ant-menu-submenu-arrow {
+      transition: none !important;
+      animation: none !important;
+    }
+
+    .${a}.ant-menu .ant-menu-item,
+    .${a}.ant-menu .ant-menu-submenu-title {
+      display: flex;
+      align-items: center;
+      gap: var(--ds-menu-gap);
+      min-height: var(--ds-menu-item-height);
+      height: var(--ds-menu-item-height);
+      line-height: var(--ds-menu-line-height);
+      margin: var(--ds-menu-item-margin, 2px 0);
+      padding-inline: var(--ds-menu-padding-x) !important;
+      border-radius: ${t.border.radius};
+      color: ${t.text.default};
+      font-size: var(--ds-menu-font-size);
+      font-weight: 600;
+      overflow: hidden;
+    }
+
+    .${a}.ant-menu .ant-menu-title-content {
+      min-width: 0;
+      margin-inline-start: 0 !important;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      line-height: var(--ds-menu-line-height);
+    }
+
+    .${a}.ant-menu .ant-menu-item > span:not(.ant-menu-title-content):first-child,
+    .${a}.ant-menu .ant-menu-submenu-title > span:not(.ant-menu-title-content):first-child,
+    .${a}.ant-menu .ant-menu-item-icon,
+    .${a}.ant-menu .ant-menu-submenu-title .ant-menu-item-icon {
+      flex: 0 0 auto;
+      width: var(--ds-menu-icon-size) !important;
+      min-width: var(--ds-menu-icon-size) !important;
+      height: var(--ds-menu-icon-size) !important;
+      color: ${t.icon.default};
+      font-size: var(--ds-menu-icon-size);
+      line-height: 1;
+    }
+
+    .${a}.ant-menu .ant-menu-item > span:not(.ant-menu-title-content):first-child svg,
+    .${a}.ant-menu .ant-menu-submenu-title > span:not(.ant-menu-title-content):first-child svg,
+    .${a}.ant-menu .ant-menu-item-icon svg,
+    .${a}.ant-menu .ant-menu-submenu-title .ant-menu-item-icon svg {
+      width: var(--ds-menu-icon-size) !important;
+      height: var(--ds-menu-icon-size) !important;
+    }
+
+    .${a}.ant-menu .ant-menu-submenu-arrow {
+      color: ${t.text.muted};
+    }
+
+    .${a}.ant-menu .ant-menu-item:not(.ant-menu-item-disabled):hover,
+    .${a}.ant-menu .ant-menu-submenu-title:not(.ant-menu-item-disabled):hover {
+      background: ${t.surface.hover};
+      color: ${t.text.active};
+    }
+
+    .${a}.ant-menu .ant-menu-item-selected,
+    .${a}.ant-menu .ant-menu-submenu-selected > .ant-menu-submenu-title {
+      background: ${t.surface.selected};
+      color: ${t.text.active};
+      font-weight: 700;
+    }
+
+    .${a}.ant-menu .ant-menu-item-selected .ant-menu-item-icon,
+    .${a}.ant-menu .ant-menu-submenu-selected > .ant-menu-submenu-title .ant-menu-item-icon,
+    .${a}.ant-menu .ant-menu-item-selected .ant-menu-submenu-arrow,
+    .${a}.ant-menu .ant-menu-submenu-selected > .ant-menu-submenu-title .ant-menu-submenu-arrow {
+      color: ${t.icon.active};
+    }
+
+    .${a}.ant-menu .ant-menu-item-disabled,
+    .${a}.ant-menu .ant-menu-submenu-disabled > .ant-menu-submenu-title {
+      color: ${t.text.disabled} !important;
+      background: transparent !important;
+      cursor: not-allowed;
+      opacity: 1;
+    }
+
+    .${a}.ant-menu .ant-menu-item-disabled .ant-menu-item-icon,
+    .${a}.ant-menu .ant-menu-submenu-disabled > .ant-menu-submenu-title .ant-menu-item-icon {
+      color: ${t.text.disabled} !important;
+    }
+
+    .${a}.ant-menu .ant-menu-item-danger,
+    .${a}.ant-menu .ant-menu-item-danger .ant-menu-item-icon {
+      color: ${t.text.danger};
+    }
+
+    .${a}.ant-menu .ant-menu-item-danger:not(.ant-menu-item-disabled):hover,
+    .${a}.ant-menu .ant-menu-item-danger.ant-menu-item-selected {
+      background: ${n.status.error.light.bg};
+      color: ${t.text.danger};
+    }
+
+    .${a}.ant-menu[data-ds-menu-variant='appNav'] {
+      --ds-menu-surface: ${t.surface.app};
+      --ds-menu-width: 100%;
+      --ds-menu-padding: 0;
+      border-bottom: 1px solid ${t.border.color};
+      border-radius: 0;
+    }
+
+    .${a}.ant-menu[data-ds-menu-variant='appNav'].ant-menu-horizontal {
+      line-height: var(--ds-menu-item-height);
+    }
+
+    .${a}.ant-menu[data-ds-menu-variant='appNav'].ant-menu-horizontal > .ant-menu-item,
+    .${a}.ant-menu[data-ds-menu-variant='appNav'].ant-menu-horizontal > .ant-menu-submenu > .ant-menu-submenu-title {
+      margin: 0;
+      border-radius: 0;
+      border-bottom: 4px solid transparent;
+    }
+
+    .${a}.ant-menu[data-ds-menu-variant='appNav'].ant-menu-horizontal > .ant-menu-item::after,
+    .${a}.ant-menu[data-ds-menu-variant='appNav'].ant-menu-horizontal > .ant-menu-submenu::after {
+      border-bottom: 0 !important;
+    }
+
+    .${a}.ant-menu[data-ds-menu-variant='appNav'].ant-menu-horizontal > .ant-menu-item-selected,
+    .${a}.ant-menu[data-ds-menu-variant='appNav'].ant-menu-horizontal > .ant-menu-submenu-selected > .ant-menu-submenu-title {
+      background: transparent;
+      border-bottom-color: ${t.border.selected};
+    }
+
+    .${a}.ant-menu[data-ds-menu-variant='sideNav'] {
+      --ds-menu-surface: ${t.surface.side};
+      --ds-menu-container-radius: 4px;
+    }
+
+    .${a}.ant-menu[data-ds-menu-variant='sectionNav'] {
+      --ds-menu-surface: ${t.surface.section};
+      border-left: 1px solid ${t.border.color};
+      border-radius: 0;
+    }
+
+    .${a}.ant-menu[data-ds-menu-variant='sectionNav'] .ant-menu-item-selected {
+      box-shadow: inset 4px 0 0 ${t.border.selected};
+    }
+
+    .${a}.ant-menu[data-ds-menu-variant='actionMenu'] {
+      --ds-menu-surface: ${t.surface.action};
+      --ds-menu-container-radius: 4px;
+      --ds-menu-shadow: 0 4px 12px rgba(30, 57, 78, 0.16);
+      border: 1px solid ${t.border.color};
+    }
+
+    .${a}.ant-menu[data-ds-menu-variant='compact'] {
+      --ds-menu-surface: ${t.surface.default};
+      --ds-menu-container-radius: 4px;
+      border: 1px solid ${t.border.color};
+    }
+  `,document.head.appendChild(r)}function l(t){return t===`appNav`?e.dsSemanticTokens.menu.size.app:t===`compact`||t===`actionMenu`?e.dsSemanticTokens.menu.size.compact:e.dsSemanticTokens.menu.size.standard}function u(t,n){let r=o[t],i=l(t);return{...n,"--ds-menu-width":n?.width??r.width,"--ds-menu-item-height":i.itemHeight,"--ds-menu-font-size":i.fontSize,"--ds-menu-line-height":i.lineHeight,"--ds-menu-padding-x":i.paddingX,"--ds-menu-icon-size":i.iconSize,"--ds-menu-gap":i.gap,"--ds-menu-surface":e.dsSemanticTokens.menu.surface.default}}var d=({dsVariant:e=`sideNav`,mode:i,inlineIndent:l,selectable:d,className:f,style:p,...m})=>{(0,n.useEffect)(()=>{c()},[]);let h=o[e];return(0,r.jsx)(t.Menu,{...m,className:s(a,f),"data-ds-menu-variant":e,inlineIndent:l??h.inlineIndent,mode:i??h.mode,selectable:d??h.selectable,style:u(e,p),theme:`light`})};d.displayName=`Menu`,exports.Menu=d;
+//# sourceMappingURL=Menu.cjs.map

package/dist-lib/navigation/Menu.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.cjs","names":[],"sources":["../../src/ds/navigation/Menu.tsx"],"sourcesContent":["import { Menu as AntMenu } from 'antd';\nimport type { MenuProps as AntMenuProps } from 'antd';\nimport type { CSSProperties } from 'react';\nimport { useEffect } from 'react';\nimport { dsSemanticTokens } from '../../theme/ontadaTheme';\n\nexport type DSMenuVariant = 'appNav' | 'sideNav' | 'sectionNav' | 'actionMenu' | 'compact';\n\ntype RestrictedAntVisualProps = 'theme';\n\nexport type MenuProps = Omit<AntMenuProps, RestrictedAntVisualProps> & {\n  /** Semantic DS menu variant. */\n  dsVariant?: DSMenuVariant;\n};\n\nconst STYLE_ID = 'ds-menu-styles';\nconst DS_MENU_CLASS = 'ds-menu';\n\ntype VariantDefaults = Pick<AntMenuProps, 'mode' | 'inlineIndent' | 'selectable'> & {\n  width?: number | string;\n};\n\nconst VARIANT_DEFAULTS: Record<DSMenuVariant, VariantDefaults> = {\n  appNav: { mode: 'horizontal', inlineIndent: 24, selectable: true, width: '100%' },\n  sideNav: { mode: 'inline', inlineIndent: 20, selectable: true, width: dsSemanticTokens.menu.width.side },\n  sectionNav: { mode: 'vertical', inlineIndent: 18, selectable: true, width: dsSemanticTokens.menu.width.section },\n  actionMenu: { mode: 'vertical', inlineIndent: 16, selectable: false, width: dsSemanticTokens.menu.width.action },\n  compact: { mode: 'vertical', inlineIndent: 14, selectable: true, width: dsSemanticTokens.menu.width.compact },\n};\n\nfunction mergeClassNames(...classNames: Array<string | undefined>) {\n  return classNames.filter(Boolean).join(' ').trim();\n}\n\nfunction injectStyles() {\n  if (typeof document === 'undefined') return;\n  if (document.getElementById(STYLE_ID)) return;\n\n  const { menu, tag } = dsSemanticTokens;\n  const style = document.createElement('style');\n  style.id = STYLE_ID;\n  style.textContent = `\n    .${DS_MENU_CLASS}.ant-menu {\n      width: var(--ds-menu-width);\n      min-width: 0;\n      padding: var(--ds-menu-padding, 4px);\n      border: 0;\n      border-radius: var(--ds-menu-container-radius, 0);\n      background: var(--ds-menu-surface);\n      box-shadow: var(--ds-menu-shadow, none);\n      font-family: 'Nunito', sans-serif;\n      color: ${menu.text.default};\n    }\n\n    .${DS_MENU_CLASS}.ant-menu,\n    .${DS_MENU_CLASS}.ant-menu .ant-menu-item,\n    .${DS_MENU_CLASS}.ant-menu .ant-menu-submenu-title,\n    .${DS_MENU_CLASS}.ant-menu .ant-menu-title-content,\n    .${DS_MENU_CLASS}.ant-menu .ant-menu-item-icon,\n    .${DS_MENU_CLASS}.ant-menu .ant-menu-submenu-arrow {\n      transition: none !important;\n      animation: none !important;\n    }\n\n    .${DS_MENU_CLASS}.ant-menu .ant-menu-item,\n    .${DS_MENU_CLASS}.ant-menu .ant-menu-submenu-title {\n      display: flex;\n      align-items: center;\n      gap: var(--ds-menu-gap);\n      min-height: var(--ds-menu-item-height);\n      height: var(--ds-menu-item-height);\n      line-height: var(--ds-menu-line-height);\n      margin: var(--ds-menu-item-margin, 2px 0);\n      padding-inline: var(--ds-menu-padding-x) !important;\n      border-radius: ${menu.border.radius};\n      color: ${menu.text.default};\n      font-size: var(--ds-menu-font-size);\n      font-weight: 600;\n      overflow: hidden;\n    }\n\n    .${DS_MENU_CLASS}.ant-menu .ant-menu-title-content {\n      min-width: 0;\n      margin-inline-start: 0 !important;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      line-height: var(--ds-menu-line-height);\n    }\n\n    .${DS_MENU_CLASS}.ant-menu .ant-menu-item > span:not(.ant-menu-title-content):first-child,\n    .${DS_MENU_CLASS}.ant-menu .ant-menu-submenu-title > span:not(.ant-menu-title-content):first-child,\n    .${DS_MENU_CLASS}.ant-menu .ant-menu-item-icon,\n    .${DS_MENU_CLASS}.ant-menu .ant-menu-submenu-title .ant-menu-item-icon {\n      flex: 0 0 auto;\n      width: var(--ds-menu-icon-size) !important;\n      min-width: var(--ds-menu-icon-size) !important;\n      height: var(--ds-menu-icon-size) !important;\n      color: ${menu.icon.default};\n      font-size: var(--ds-menu-icon-size);\n      line-height: 1;\n    }\n\n    .${DS_MENU_CLASS}.ant-menu .ant-menu-item > span:not(.ant-menu-title-content):first-child svg,\n    .${DS_MENU_CLASS}.ant-menu .ant-menu-submenu-title > span:not(.ant-menu-title-content):first-child svg,\n    .${DS_MENU_CLASS}.ant-menu .ant-menu-item-icon svg,\n    .${DS_MENU_CLASS}.ant-menu .ant-menu-submenu-title .ant-menu-item-icon svg {\n      width: var(--ds-menu-icon-size) !important;\n      height: var(--ds-menu-icon-size) !important;\n    }\n\n    .${DS_MENU_CLASS}.ant-menu .ant-menu-submenu-arrow {\n      color: ${menu.text.muted};\n    }\n\n    .${DS_MENU_CLASS}.ant-menu .ant-menu-item:not(.ant-menu-item-disabled):hover,\n    .${DS_MENU_CLASS}.ant-menu .ant-menu-submenu-title:not(.ant-menu-item-disabled):hover {\n      background: ${menu.surface.hover};\n      color: ${menu.text.active};\n    }\n\n    .${DS_MENU_CLASS}.ant-menu .ant-menu-item-selected,\n    .${DS_MENU_CLASS}.ant-menu .ant-menu-submenu-selected > .ant-menu-submenu-title {\n      background: ${menu.surface.selected};\n      color: ${menu.text.active};\n      font-weight: 700;\n    }\n\n    .${DS_MENU_CLASS}.ant-menu .ant-menu-item-selected .ant-menu-item-icon,\n    .${DS_MENU_CLASS}.ant-menu .ant-menu-submenu-selected > .ant-menu-submenu-title .ant-menu-item-icon,\n    .${DS_MENU_CLASS}.ant-menu .ant-menu-item-selected .ant-menu-submenu-arrow,\n    .${DS_MENU_CLASS}.ant-menu .ant-menu-submenu-selected > .ant-menu-submenu-title .ant-menu-submenu-arrow {\n      color: ${menu.icon.active};\n    }\n\n    .${DS_MENU_CLASS}.ant-menu .ant-menu-item-disabled,\n    .${DS_MENU_CLASS}.ant-menu .ant-menu-submenu-disabled > .ant-menu-submenu-title {\n      color: ${menu.text.disabled} !important;\n      background: transparent !important;\n      cursor: not-allowed;\n      opacity: 1;\n    }\n\n    .${DS_MENU_CLASS}.ant-menu .ant-menu-item-disabled .ant-menu-item-icon,\n    .${DS_MENU_CLASS}.ant-menu .ant-menu-submenu-disabled > .ant-menu-submenu-title .ant-menu-item-icon {\n      color: ${menu.text.disabled} !important;\n    }\n\n    .${DS_MENU_CLASS}.ant-menu .ant-menu-item-danger,\n    .${DS_MENU_CLASS}.ant-menu .ant-menu-item-danger .ant-menu-item-icon {\n      color: ${menu.text.danger};\n    }\n\n    .${DS_MENU_CLASS}.ant-menu .ant-menu-item-danger:not(.ant-menu-item-disabled):hover,\n    .${DS_MENU_CLASS}.ant-menu .ant-menu-item-danger.ant-menu-item-selected {\n      background: ${tag.status.error.light.bg};\n      color: ${menu.text.danger};\n    }\n\n    .${DS_MENU_CLASS}.ant-menu[data-ds-menu-variant='appNav'] {\n      --ds-menu-surface: ${menu.surface.app};\n      --ds-menu-width: 100%;\n      --ds-menu-padding: 0;\n      border-bottom: 1px solid ${menu.border.color};\n      border-radius: 0;\n    }\n\n    .${DS_MENU_CLASS}.ant-menu[data-ds-menu-variant='appNav'].ant-menu-horizontal {\n      line-height: var(--ds-menu-item-height);\n    }\n\n    .${DS_MENU_CLASS}.ant-menu[data-ds-menu-variant='appNav'].ant-menu-horizontal > .ant-menu-item,\n    .${DS_MENU_CLASS}.ant-menu[data-ds-menu-variant='appNav'].ant-menu-horizontal > .ant-menu-submenu > .ant-menu-submenu-title {\n      margin: 0;\n      border-radius: 0;\n      border-bottom: 4px solid transparent;\n    }\n\n    .${DS_MENU_CLASS}.ant-menu[data-ds-menu-variant='appNav'].ant-menu-horizontal > .ant-menu-item::after,\n    .${DS_MENU_CLASS}.ant-menu[data-ds-menu-variant='appNav'].ant-menu-horizontal > .ant-menu-submenu::after {\n      border-bottom: 0 !important;\n    }\n\n    .${DS_MENU_CLASS}.ant-menu[data-ds-menu-variant='appNav'].ant-menu-horizontal > .ant-menu-item-selected,\n    .${DS_MENU_CLASS}.ant-menu[data-ds-menu-variant='appNav'].ant-menu-horizontal > .ant-menu-submenu-selected > .ant-menu-submenu-title {\n      background: transparent;\n      border-bottom-color: ${menu.border.selected};\n    }\n\n    .${DS_MENU_CLASS}.ant-menu[data-ds-menu-variant='sideNav'] {\n      --ds-menu-surface: ${menu.surface.side};\n      --ds-menu-container-radius: 4px;\n    }\n\n    .${DS_MENU_CLASS}.ant-menu[data-ds-menu-variant='sectionNav'] {\n      --ds-menu-surface: ${menu.surface.section};\n      border-left: 1px solid ${menu.border.color};\n      border-radius: 0;\n    }\n\n    .${DS_MENU_CLASS}.ant-menu[data-ds-menu-variant='sectionNav'] .ant-menu-item-selected {\n      box-shadow: inset 4px 0 0 ${menu.border.selected};\n    }\n\n    .${DS_MENU_CLASS}.ant-menu[data-ds-menu-variant='actionMenu'] {\n      --ds-menu-surface: ${menu.surface.action};\n      --ds-menu-container-radius: 4px;\n      --ds-menu-shadow: 0 4px 12px rgba(30, 57, 78, 0.16);\n      border: 1px solid ${menu.border.color};\n    }\n\n    .${DS_MENU_CLASS}.ant-menu[data-ds-menu-variant='compact'] {\n      --ds-menu-surface: ${menu.surface.default};\n      --ds-menu-container-radius: 4px;\n      border: 1px solid ${menu.border.color};\n    }\n  `;\n\n  document.head.appendChild(style);\n}\n\nfunction getSizeTokens(dsVariant: DSMenuVariant) {\n  if (dsVariant === 'appNav') return dsSemanticTokens.menu.size.app;\n  if (dsVariant === 'compact' || dsVariant === 'actionMenu') return dsSemanticTokens.menu.size.compact;\n  return dsSemanticTokens.menu.size.standard;\n}\n\nfunction buildMenuStyle(dsVariant: DSMenuVariant, userStyle?: CSSProperties): CSSProperties {\n  const defaults = VARIANT_DEFAULTS[dsVariant];\n  const sizeTokens = getSizeTokens(dsVariant);\n  return {\n    ...userStyle,\n    ['--ds-menu-width' as string]: userStyle?.width ?? defaults.width,\n    ['--ds-menu-item-height' as string]: sizeTokens.itemHeight,\n    ['--ds-menu-font-size' as string]: sizeTokens.fontSize,\n    ['--ds-menu-line-height' as string]: sizeTokens.lineHeight,\n    ['--ds-menu-padding-x' as string]: sizeTokens.paddingX,\n    ['--ds-menu-icon-size' as string]: sizeTokens.iconSize,\n    ['--ds-menu-gap' as string]: sizeTokens.gap,\n    ['--ds-menu-surface' as string]: dsSemanticTokens.menu.surface.default,\n  };\n}\n\nexport const Menu = ({\n  dsVariant = 'sideNav',\n  mode,\n  inlineIndent,\n  selectable,\n  className,\n  style,\n  ...props\n}: MenuProps) => {\n  useEffect(() => {\n    injectStyles();\n  }, []);\n\n  const defaults = VARIANT_DEFAULTS[dsVariant];\n\n  return (\n    <AntMenu\n      {...props}\n      className={mergeClassNames(DS_MENU_CLASS, className)}\n      data-ds-menu-variant={dsVariant}\n      inlineIndent={inlineIndent ?? defaults.inlineIndent}\n      mode={mode ?? defaults.mode}\n      selectable={selectable ?? defaults.selectable}\n      style={buildMenuStyle(dsVariant, style)}\n      theme=\"light\"\n    />\n  );\n};\n\nMenu.displayName = 'Menu';"],"mappings":"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"}

package/dist-lib/navigation/Menu.js

@@ -0,0 +1,258 @@
+import { dsSemanticTokens as e } from "../theme.js";
+import { Menu as t } from "antd";
+import { useEffect as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/ds/navigation/Menu.tsx
+var i = "ds-menu-styles", a = "ds-menu", o = {
+	appNav: {
+		mode: "horizontal",
+		inlineIndent: 24,
+		selectable: !0,
+		width: "100%"
+	},
+	sideNav: {
+		mode: "inline",
+		inlineIndent: 20,
+		selectable: !0,
+		width: e.menu.width.side
+	},
+	sectionNav: {
+		mode: "vertical",
+		inlineIndent: 18,
+		selectable: !0,
+		width: e.menu.width.section
+	},
+	actionMenu: {
+		mode: "vertical",
+		inlineIndent: 16,
+		selectable: !1,
+		width: e.menu.width.action
+	},
+	compact: {
+		mode: "vertical",
+		inlineIndent: 14,
+		selectable: !0,
+		width: e.menu.width.compact
+	}
+};
+function s(...e) {
+	return e.filter(Boolean).join(" ").trim();
+}
+function c() {
+	if (typeof document > "u" || document.getElementById(i)) return;
+	let { menu: t, tag: n } = e, r = document.createElement("style");
+	r.id = i, r.textContent = `
+    .${a}.ant-menu {
+      width: var(--ds-menu-width);
+      min-width: 0;
+      padding: var(--ds-menu-padding, 4px);
+      border: 0;
+      border-radius: var(--ds-menu-container-radius, 0);
+      background: var(--ds-menu-surface);
+      box-shadow: var(--ds-menu-shadow, none);
+      font-family: 'Nunito', sans-serif;
+      color: ${t.text.default};
+    }
+
+    .${a}.ant-menu,
+    .${a}.ant-menu .ant-menu-item,
+    .${a}.ant-menu .ant-menu-submenu-title,
+    .${a}.ant-menu .ant-menu-title-content,
+    .${a}.ant-menu .ant-menu-item-icon,
+    .${a}.ant-menu .ant-menu-submenu-arrow {
+      transition: none !important;
+      animation: none !important;
+    }
+
+    .${a}.ant-menu .ant-menu-item,
+    .${a}.ant-menu .ant-menu-submenu-title {
+      display: flex;
+      align-items: center;
+      gap: var(--ds-menu-gap);
+      min-height: var(--ds-menu-item-height);
+      height: var(--ds-menu-item-height);
+      line-height: var(--ds-menu-line-height);
+      margin: var(--ds-menu-item-margin, 2px 0);
+      padding-inline: var(--ds-menu-padding-x) !important;
+      border-radius: ${t.border.radius};
+      color: ${t.text.default};
+      font-size: var(--ds-menu-font-size);
+      font-weight: 600;
+      overflow: hidden;
+    }
+
+    .${a}.ant-menu .ant-menu-title-content {
+      min-width: 0;
+      margin-inline-start: 0 !important;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      line-height: var(--ds-menu-line-height);
+    }
+
+    .${a}.ant-menu .ant-menu-item > span:not(.ant-menu-title-content):first-child,
+    .${a}.ant-menu .ant-menu-submenu-title > span:not(.ant-menu-title-content):first-child,
+    .${a}.ant-menu .ant-menu-item-icon,
+    .${a}.ant-menu .ant-menu-submenu-title .ant-menu-item-icon {
+      flex: 0 0 auto;
+      width: var(--ds-menu-icon-size) !important;
+      min-width: var(--ds-menu-icon-size) !important;
+      height: var(--ds-menu-icon-size) !important;
+      color: ${t.icon.default};
+      font-size: var(--ds-menu-icon-size);
+      line-height: 1;
+    }
+
+    .${a}.ant-menu .ant-menu-item > span:not(.ant-menu-title-content):first-child svg,
+    .${a}.ant-menu .ant-menu-submenu-title > span:not(.ant-menu-title-content):first-child svg,
+    .${a}.ant-menu .ant-menu-item-icon svg,
+    .${a}.ant-menu .ant-menu-submenu-title .ant-menu-item-icon svg {
+      width: var(--ds-menu-icon-size) !important;
+      height: var(--ds-menu-icon-size) !important;
+    }
+
+    .${a}.ant-menu .ant-menu-submenu-arrow {
+      color: ${t.text.muted};
+    }
+
+    .${a}.ant-menu .ant-menu-item:not(.ant-menu-item-disabled):hover,
+    .${a}.ant-menu .ant-menu-submenu-title:not(.ant-menu-item-disabled):hover {
+      background: ${t.surface.hover};
+      color: ${t.text.active};
+    }
+
+    .${a}.ant-menu .ant-menu-item-selected,
+    .${a}.ant-menu .ant-menu-submenu-selected > .ant-menu-submenu-title {
+      background: ${t.surface.selected};
+      color: ${t.text.active};
+      font-weight: 700;
+    }
+
+    .${a}.ant-menu .ant-menu-item-selected .ant-menu-item-icon,
+    .${a}.ant-menu .ant-menu-submenu-selected > .ant-menu-submenu-title .ant-menu-item-icon,
+    .${a}.ant-menu .ant-menu-item-selected .ant-menu-submenu-arrow,
+    .${a}.ant-menu .ant-menu-submenu-selected > .ant-menu-submenu-title .ant-menu-submenu-arrow {
+      color: ${t.icon.active};
+    }
+
+    .${a}.ant-menu .ant-menu-item-disabled,
+    .${a}.ant-menu .ant-menu-submenu-disabled > .ant-menu-submenu-title {
+      color: ${t.text.disabled} !important;
+      background: transparent !important;
+      cursor: not-allowed;
+      opacity: 1;
+    }
+
+    .${a}.ant-menu .ant-menu-item-disabled .ant-menu-item-icon,
+    .${a}.ant-menu .ant-menu-submenu-disabled > .ant-menu-submenu-title .ant-menu-item-icon {
+      color: ${t.text.disabled} !important;
+    }
+
+    .${a}.ant-menu .ant-menu-item-danger,
+    .${a}.ant-menu .ant-menu-item-danger .ant-menu-item-icon {
+      color: ${t.text.danger};
+    }
+
+    .${a}.ant-menu .ant-menu-item-danger:not(.ant-menu-item-disabled):hover,
+    .${a}.ant-menu .ant-menu-item-danger.ant-menu-item-selected {
+      background: ${n.status.error.light.bg};
+      color: ${t.text.danger};
+    }
+
+    .${a}.ant-menu[data-ds-menu-variant='appNav'] {
+      --ds-menu-surface: ${t.surface.app};
+      --ds-menu-width: 100%;
+      --ds-menu-padding: 0;
+      border-bottom: 1px solid ${t.border.color};
+      border-radius: 0;
+    }
+
+    .${a}.ant-menu[data-ds-menu-variant='appNav'].ant-menu-horizontal {
+      line-height: var(--ds-menu-item-height);
+    }
+
+    .${a}.ant-menu[data-ds-menu-variant='appNav'].ant-menu-horizontal > .ant-menu-item,
+    .${a}.ant-menu[data-ds-menu-variant='appNav'].ant-menu-horizontal > .ant-menu-submenu > .ant-menu-submenu-title {
+      margin: 0;
+      border-radius: 0;
+      border-bottom: 4px solid transparent;
+    }
+
+    .${a}.ant-menu[data-ds-menu-variant='appNav'].ant-menu-horizontal > .ant-menu-item::after,
+    .${a}.ant-menu[data-ds-menu-variant='appNav'].ant-menu-horizontal > .ant-menu-submenu::after {
+      border-bottom: 0 !important;
+    }
+
+    .${a}.ant-menu[data-ds-menu-variant='appNav'].ant-menu-horizontal > .ant-menu-item-selected,
+    .${a}.ant-menu[data-ds-menu-variant='appNav'].ant-menu-horizontal > .ant-menu-submenu-selected > .ant-menu-submenu-title {
+      background: transparent;
+      border-bottom-color: ${t.border.selected};
+    }
+
+    .${a}.ant-menu[data-ds-menu-variant='sideNav'] {
+      --ds-menu-surface: ${t.surface.side};
+      --ds-menu-container-radius: 4px;
+    }
+
+    .${a}.ant-menu[data-ds-menu-variant='sectionNav'] {
+      --ds-menu-surface: ${t.surface.section};
+      border-left: 1px solid ${t.border.color};
+      border-radius: 0;
+    }
+
+    .${a}.ant-menu[data-ds-menu-variant='sectionNav'] .ant-menu-item-selected {
+      box-shadow: inset 4px 0 0 ${t.border.selected};
+    }
+
+    .${a}.ant-menu[data-ds-menu-variant='actionMenu'] {
+      --ds-menu-surface: ${t.surface.action};
+      --ds-menu-container-radius: 4px;
+      --ds-menu-shadow: 0 4px 12px rgba(30, 57, 78, 0.16);
+      border: 1px solid ${t.border.color};
+    }
+
+    .${a}.ant-menu[data-ds-menu-variant='compact'] {
+      --ds-menu-surface: ${t.surface.default};
+      --ds-menu-container-radius: 4px;
+      border: 1px solid ${t.border.color};
+    }
+  `, document.head.appendChild(r);
+}
+function l(t) {
+	return t === "appNav" ? e.menu.size.app : t === "compact" || t === "actionMenu" ? e.menu.size.compact : e.menu.size.standard;
+}
+function u(t, n) {
+	let r = o[t], i = l(t);
+	return {
+		...n,
+		"--ds-menu-width": n?.width ?? r.width,
+		"--ds-menu-item-height": i.itemHeight,
+		"--ds-menu-font-size": i.fontSize,
+		"--ds-menu-line-height": i.lineHeight,
+		"--ds-menu-padding-x": i.paddingX,
+		"--ds-menu-icon-size": i.iconSize,
+		"--ds-menu-gap": i.gap,
+		"--ds-menu-surface": e.menu.surface.default
+	};
+}
+var d = ({ dsVariant: e = "sideNav", mode: i, inlineIndent: l, selectable: d, className: f, style: p, ...m }) => {
+	n(() => {
+		c();
+	}, []);
+	let h = o[e];
+	return /* @__PURE__ */ r(t, {
+		...m,
+		className: s(a, f),
+		"data-ds-menu-variant": e,
+		inlineIndent: l ?? h.inlineIndent,
+		mode: i ?? h.mode,
+		selectable: d ?? h.selectable,
+		style: u(e, p),
+		theme: "light"
+	});
+};
+d.displayName = "Menu";
+//#endregion
+export { d as Menu };
+
+//# sourceMappingURL=Menu.js.map

package/dist-lib/navigation/Menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.js","names":[],"sources":["../../src/ds/navigation/Menu.tsx"],"sourcesContent":["import { Menu as AntMenu } from 'antd';\nimport type { MenuProps as AntMenuProps } from 'antd';\nimport type { CSSProperties } from 'react';\nimport { useEffect } from 'react';\nimport { dsSemanticTokens } from '../../theme/ontadaTheme';\n\nexport type DSMenuVariant = 'appNav' | 'sideNav' | 'sectionNav' | 'actionMenu' | 'compact';\n\ntype RestrictedAntVisualProps = 'theme';\n\nexport type MenuProps = Omit<AntMenuProps, RestrictedAntVisualProps> & {\n  /** Semantic DS menu variant. */\n  dsVariant?: DSMenuVariant;\n};\n\nconst STYLE_ID = 'ds-menu-styles';\nconst DS_MENU_CLASS = 'ds-menu';\n\ntype VariantDefaults = Pick<AntMenuProps, 'mode' | 'inlineIndent' | 'selectable'> & {\n  width?: number | string;\n};\n\nconst VARIANT_DEFAULTS: Record<DSMenuVariant, VariantDefaults> = {\n  appNav: { mode: 'horizontal', inlineIndent: 24, selectable: true, width: '100%' },\n  sideNav: { mode: 'inline', inlineIndent: 20, selectable: true, width: dsSemanticTokens.menu.width.side },\n  sectionNav: { mode: 'vertical', inlineIndent: 18, selectable: true, width: dsSemanticTokens.menu.width.section },\n  actionMenu: { mode: 'vertical', inlineIndent: 16, selectable: false, width: dsSemanticTokens.menu.width.action },\n  compact: { mode: 'vertical', inlineIndent: 14, selectable: true, width: dsSemanticTokens.menu.width.compact },\n};\n\nfunction mergeClassNames(...classNames: Array<string | undefined>) {\n  return classNames.filter(Boolean).join(' ').trim();\n}\n\nfunction injectStyles() {\n  if (typeof document === 'undefined') return;\n  if (document.getElementById(STYLE_ID)) return;\n\n  const { menu, tag } = dsSemanticTokens;\n  const style = document.createElement('style');\n  style.id = STYLE_ID;\n  style.textContent = `\n    .${DS_MENU_CLASS}.ant-menu {\n      width: var(--ds-menu-width);\n      min-width: 0;\n      padding: var(--ds-menu-padding, 4px);\n      border: 0;\n      border-radius: var(--ds-menu-container-radius, 0);\n      background: var(--ds-menu-surface);\n      box-shadow: var(--ds-menu-shadow, none);\n      font-family: 'Nunito', sans-serif;\n      color: ${menu.text.default};\n    }\n\n    .${DS_MENU_CLASS}.ant-menu,\n    .${DS_MENU_CLASS}.ant-menu .ant-menu-item,\n    .${DS_MENU_CLASS}.ant-menu .ant-menu-submenu-title,\n    .${DS_MENU_CLASS}.ant-menu .ant-menu-title-content,\n    .${DS_MENU_CLASS}.ant-menu .ant-menu-item-icon,\n    .${DS_MENU_CLASS}.ant-menu .ant-menu-submenu-arrow {\n      transition: none !important;\n      animation: none !important;\n    }\n\n    .${DS_MENU_CLASS}.ant-menu .ant-menu-item,\n    .${DS_MENU_CLASS}.ant-menu .ant-menu-submenu-title {\n      display: flex;\n      align-items: center;\n      gap: var(--ds-menu-gap);\n      min-height: var(--ds-menu-item-height);\n      height: var(--ds-menu-item-height);\n      line-height: var(--ds-menu-line-height);\n      margin: var(--ds-menu-item-margin, 2px 0);\n      padding-inline: var(--ds-menu-padding-x) !important;\n      border-radius: ${menu.border.radius};\n      color: ${menu.text.default};\n      font-size: var(--ds-menu-font-size);\n      font-weight: 600;\n      overflow: hidden;\n    }\n\n    .${DS_MENU_CLASS}.ant-menu .ant-menu-title-content {\n      min-width: 0;\n      margin-inline-start: 0 !important;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      line-height: var(--ds-menu-line-height);\n    }\n\n    .${DS_MENU_CLASS}.ant-menu .ant-menu-item > span:not(.ant-menu-title-content):first-child,\n    .${DS_MENU_CLASS}.ant-menu .ant-menu-submenu-title > span:not(.ant-menu-title-content):first-child,\n    .${DS_MENU_CLASS}.ant-menu .ant-menu-item-icon,\n    .${DS_MENU_CLASS}.ant-menu .ant-menu-submenu-title .ant-menu-item-icon {\n      flex: 0 0 auto;\n      width: var(--ds-menu-icon-size) !important;\n      min-width: var(--ds-menu-icon-size) !important;\n      height: var(--ds-menu-icon-size) !important;\n      color: ${menu.icon.default};\n      font-size: var(--ds-menu-icon-size);\n      line-height: 1;\n    }\n\n    .${DS_MENU_CLASS}.ant-menu .ant-menu-item > span:not(.ant-menu-title-content):first-child svg,\n    .${DS_MENU_CLASS}.ant-menu .ant-menu-submenu-title > span:not(.ant-menu-title-content):first-child svg,\n    .${DS_MENU_CLASS}.ant-menu .ant-menu-item-icon svg,\n    .${DS_MENU_CLASS}.ant-menu .ant-menu-submenu-title .ant-menu-item-icon svg {\n      width: var(--ds-menu-icon-size) !important;\n      height: var(--ds-menu-icon-size) !important;\n    }\n\n    .${DS_MENU_CLASS}.ant-menu .ant-menu-submenu-arrow {\n      color: ${menu.text.muted};\n    }\n\n    .${DS_MENU_CLASS}.ant-menu .ant-menu-item:not(.ant-menu-item-disabled):hover,\n    .${DS_MENU_CLASS}.ant-menu .ant-menu-submenu-title:not(.ant-menu-item-disabled):hover {\n      background: ${menu.surface.hover};\n      color: ${menu.text.active};\n    }\n\n    .${DS_MENU_CLASS}.ant-menu .ant-menu-item-selected,\n    .${DS_MENU_CLASS}.ant-menu .ant-menu-submenu-selected > .ant-menu-submenu-title {\n      background: ${menu.surface.selected};\n      color: ${menu.text.active};\n      font-weight: 700;\n    }\n\n    .${DS_MENU_CLASS}.ant-menu .ant-menu-item-selected .ant-menu-item-icon,\n    .${DS_MENU_CLASS}.ant-menu .ant-menu-submenu-selected > .ant-menu-submenu-title .ant-menu-item-icon,\n    .${DS_MENU_CLASS}.ant-menu .ant-menu-item-selected .ant-menu-submenu-arrow,\n    .${DS_MENU_CLASS}.ant-menu .ant-menu-submenu-selected > .ant-menu-submenu-title .ant-menu-submenu-arrow {\n      color: ${menu.icon.active};\n    }\n\n    .${DS_MENU_CLASS}.ant-menu .ant-menu-item-disabled,\n    .${DS_MENU_CLASS}.ant-menu .ant-menu-submenu-disabled > .ant-menu-submenu-title {\n      color: ${menu.text.disabled} !important;\n      background: transparent !important;\n      cursor: not-allowed;\n      opacity: 1;\n    }\n\n    .${DS_MENU_CLASS}.ant-menu .ant-menu-item-disabled .ant-menu-item-icon,\n    .${DS_MENU_CLASS}.ant-menu .ant-menu-submenu-disabled > .ant-menu-submenu-title .ant-menu-item-icon {\n      color: ${menu.text.disabled} !important;\n    }\n\n    .${DS_MENU_CLASS}.ant-menu .ant-menu-item-danger,\n    .${DS_MENU_CLASS}.ant-menu .ant-menu-item-danger .ant-menu-item-icon {\n      color: ${menu.text.danger};\n    }\n\n    .${DS_MENU_CLASS}.ant-menu .ant-menu-item-danger:not(.ant-menu-item-disabled):hover,\n    .${DS_MENU_CLASS}.ant-menu .ant-menu-item-danger.ant-menu-item-selected {\n      background: ${tag.status.error.light.bg};\n      color: ${menu.text.danger};\n    }\n\n    .${DS_MENU_CLASS}.ant-menu[data-ds-menu-variant='appNav'] {\n      --ds-menu-surface: ${menu.surface.app};\n      --ds-menu-width: 100%;\n      --ds-menu-padding: 0;\n      border-bottom: 1px solid ${menu.border.color};\n      border-radius: 0;\n    }\n\n    .${DS_MENU_CLASS}.ant-menu[data-ds-menu-variant='appNav'].ant-menu-horizontal {\n      line-height: var(--ds-menu-item-height);\n    }\n\n    .${DS_MENU_CLASS}.ant-menu[data-ds-menu-variant='appNav'].ant-menu-horizontal > .ant-menu-item,\n    .${DS_MENU_CLASS}.ant-menu[data-ds-menu-variant='appNav'].ant-menu-horizontal > .ant-menu-submenu > .ant-menu-submenu-title {\n      margin: 0;\n      border-radius: 0;\n      border-bottom: 4px solid transparent;\n    }\n\n    .${DS_MENU_CLASS}.ant-menu[data-ds-menu-variant='appNav'].ant-menu-horizontal > .ant-menu-item::after,\n    .${DS_MENU_CLASS}.ant-menu[data-ds-menu-variant='appNav'].ant-menu-horizontal > .ant-menu-submenu::after {\n      border-bottom: 0 !important;\n    }\n\n    .${DS_MENU_CLASS}.ant-menu[data-ds-menu-variant='appNav'].ant-menu-horizontal > .ant-menu-item-selected,\n    .${DS_MENU_CLASS}.ant-menu[data-ds-menu-variant='appNav'].ant-menu-horizontal > .ant-menu-submenu-selected > .ant-menu-submenu-title {\n      background: transparent;\n      border-bottom-color: ${menu.border.selected};\n    }\n\n    .${DS_MENU_CLASS}.ant-menu[data-ds-menu-variant='sideNav'] {\n      --ds-menu-surface: ${menu.surface.side};\n      --ds-menu-container-radius: 4px;\n    }\n\n    .${DS_MENU_CLASS}.ant-menu[data-ds-menu-variant='sectionNav'] {\n      --ds-menu-surface: ${menu.surface.section};\n      border-left: 1px solid ${menu.border.color};\n      border-radius: 0;\n    }\n\n    .${DS_MENU_CLASS}.ant-menu[data-ds-menu-variant='sectionNav'] .ant-menu-item-selected {\n      box-shadow: inset 4px 0 0 ${menu.border.selected};\n    }\n\n    .${DS_MENU_CLASS}.ant-menu[data-ds-menu-variant='actionMenu'] {\n      --ds-menu-surface: ${menu.surface.action};\n      --ds-menu-container-radius: 4px;\n      --ds-menu-shadow: 0 4px 12px rgba(30, 57, 78, 0.16);\n      border: 1px solid ${menu.border.color};\n    }\n\n    .${DS_MENU_CLASS}.ant-menu[data-ds-menu-variant='compact'] {\n      --ds-menu-surface: ${menu.surface.default};\n      --ds-menu-container-radius: 4px;\n      border: 1px solid ${menu.border.color};\n    }\n  `;\n\n  document.head.appendChild(style);\n}\n\nfunction getSizeTokens(dsVariant: DSMenuVariant) {\n  if (dsVariant === 'appNav') return dsSemanticTokens.menu.size.app;\n  if (dsVariant === 'compact' || dsVariant === 'actionMenu') return dsSemanticTokens.menu.size.compact;\n  return dsSemanticTokens.menu.size.standard;\n}\n\nfunction buildMenuStyle(dsVariant: DSMenuVariant, userStyle?: CSSProperties): CSSProperties {\n  const defaults = VARIANT_DEFAULTS[dsVariant];\n  const sizeTokens = getSizeTokens(dsVariant);\n  return {\n    ...userStyle,\n    ['--ds-menu-width' as string]: userStyle?.width ?? defaults.width,\n    ['--ds-menu-item-height' as string]: sizeTokens.itemHeight,\n    ['--ds-menu-font-size' as string]: sizeTokens.fontSize,\n    ['--ds-menu-line-height' as string]: sizeTokens.lineHeight,\n    ['--ds-menu-padding-x' as string]: sizeTokens.paddingX,\n    ['--ds-menu-icon-size' as string]: sizeTokens.iconSize,\n    ['--ds-menu-gap' as string]: sizeTokens.gap,\n    ['--ds-menu-surface' as string]: dsSemanticTokens.menu.surface.default,\n  };\n}\n\nexport const Menu = ({\n  dsVariant = 'sideNav',\n  mode,\n  inlineIndent,\n  selectable,\n  className,\n  style,\n  ...props\n}: MenuProps) => {\n  useEffect(() => {\n    injectStyles();\n  }, []);\n\n  const defaults = VARIANT_DEFAULTS[dsVariant];\n\n  return (\n    <AntMenu\n      {...props}\n      className={mergeClassNames(DS_MENU_CLASS, className)}\n      data-ds-menu-variant={dsVariant}\n      inlineIndent={inlineIndent ?? defaults.inlineIndent}\n      mode={mode ?? defaults.mode}\n      selectable={selectable ?? defaults.selectable}\n      style={buildMenuStyle(dsVariant, style)}\n      theme=\"light\"\n    />\n  );\n};\n\nMenu.displayName = 'Menu';"],"mappings":"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"}