@veracity/vui 5.1.1 → 5.2.0-alpha.395258.2606090726

package/dist/tabs/consts.js

@@ -16,5 +16,5 @@ const iconSizeMapper = {
 
 //#endregion
 export { colors, iconSizeMapper };
-globalThis.__vuiVersion__ = "5.1.1"
+globalThis.__vuiVersion__ = "5.2.0"
 //# sourceMappingURL=consts.js.map

package/dist/tabs/tab.js

@@ -19,5 +19,5 @@ Tab.displayName = "Tab";
 
 //#endregion
 export { TabBase, Tab as default };
-globalThis.__vuiVersion__ = "5.1.1"
+globalThis.__vuiVersion__ = "5.2.0"
 //# sourceMappingURL=tab.js.map

package/dist/tabs/tabs.js

@@ -78,5 +78,5 @@ Tabs.displayName = "Tabs";
 
 //#endregion
 export { TabsBase, Tabs as default };
-globalThis.__vuiVersion__ = "5.1.1"
+globalThis.__vuiVersion__ = "5.2.0"
 //# sourceMappingURL=tabs.js.map

package/dist/tabs/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","names":[],"sources":["../../src/tabs/tabs.tsx"],"sourcesContent":["import type { ReactElement } from 'react'\nimport { Children, useEffect } from 'react'\n\nimport { styled, useStyleConfig, vui } from '../core'\nimport { P } from '../p'\nimport { cs } from '../utils'\nimport Tab from './tab'\nimport type { TabIndexProps, TabProps, TabsProps } from './tabs.types'\nimport TabsNavBar from './tabsNavBar'\nimport { useTabsState } from './useTabsState'\n\nexport const TabsBase = styled.divBox<TabsProps>`\n  width: 100%;\n`\n\n/**\n * Implements Tabs navigation to switch between views. Implements Tabs navigation to switch between views. **Do not use as a top menu in a page!**\n */\nexport const Tabs = vui<'div', TabsProps>((props, ref) => {\n  const { actions, activeTabId, showBorder = true, children, className, size, onTabClick, ...rest } = props\n  const styles = useStyleConfig('Tabs', props)\n  const { tabs, setTabs, activeTabIndex, setActiveTabIndex, animationDirection, setAnimationDirection } = useTabsState(\n    'fadeIn',\n    0,\n  )\n\n  useEffect(() => {\n    const _tabs: TabIndexProps[] = []\n    if (children) {\n      // @ts-expect-error no idea\n      ;(Children.toArray(children) as ReactElement[]).forEach((child: ReactElement<TabProps>, index: number) => {\n        if (child?.props?.title)\n          _tabs.push({\n            id: child.props.id,\n            index: index,\n            title: child.props.title,\n            icon: child.props.icon,\n            className: child.props.className,\n            children: child.props.children,\n            disabled: child.props.disabled,\n            onClick: child.props.onClick,\n            onDelete: child.props.onDelete,\n          })\n      })\n    }\n    setTabs(_tabs)\n    if (activeTabId !== undefined) {\n      const tab = _tabs.find((t: TabIndexProps) => t?.id === activeTabId || t?.index === activeTabId)\n      if (tab?.index !== undefined) setActiveTabIndex(tab.index)\n    }\n  }, [children, activeTabId])\n\n  const onNavItemClick = (tabIndex: number, e: React.MouseEvent<HTMLLIElement, MouseEvent>) => {\n    const tab = tabs.find(t => t.index === tabIndex)\n    if (tab?.children !== undefined && tab?.index !== undefined) {\n      setAnimationDirection(tab.index < activeTabIndex ? 'fadeLeft' : 'fadeRight')\n      setActiveTabIndex(tab.index)\n      onTabClick?.(tab.id || tab.index)\n    }\n    tab?.onClick?.(e)\n  }\n\n  const activeTab = tabs?.[activeTabIndex]\n\n  return (\n    <TabsBase className={cs('vui-tabs', className)} ref={ref} {...styles.container} {...rest}>\n      {!!tabs?.length && (\n        <TabsNavBar\n          actions={actions}\n          activeNavItem={activeTabIndex}\n          animationDirection={animationDirection}\n          onNavItemClick={(tabIndex, e) => onNavItemClick(tabIndex, e)}\n          showBorder={showBorder}\n          size={size}\n          tabs={tabs}\n        />\n      )}\n      {tabs?.length ? (\n        <Tab onClick={activeTab?.onClick} title={activeTab?.title}>\n          {!activeTab?.disabled && activeTab?.children}\n        </Tab>\n      ) : (\n        <P p={2}>Please specify Tabs.</P>\n      )}\n    </TabsBase>\n  )\n})\n\nTabs.displayName = 'Tabs'\n\nexport default Tabs\n"],"mappings":";;;;;;;;;;;;AAWA,MAAa,WAAW,OAAO,MAAiB;;;;;;AAOhD,MAAa,OAAO,KAAuB,OAAO,QAAQ;CACxD,MAAM,EAAE,SAAS,aAAa,aAAa,MAAM,UAAU,WAAW,MAAM,YAAY,GAAG,SAAS;CACpG,MAAM,SAAS,eAAe,QAAQ,KAAK;CAC3C,MAAM,EAAE,MAAM,SAAS,gBAAgB,mBAAmB,oBAAoB,0BAA0B,aACtG,UACA,CACF;CAEA,gBAAgB;EACd,MAAM,QAAyB,CAAC;EAChC,IAAI,UAED,AAAC,SAAS,QAAQ,QAAQ,EAAqB,SAAS,OAA+B,UAAkB;GACxG,IAAI,OAAO,OAAO,OAChB,MAAM,KAAK;IACT,IAAI,MAAM,MAAM;IACT;IACP,OAAO,MAAM,MAAM;IACnB,MAAM,MAAM,MAAM;IAClB,WAAW,MAAM,MAAM;IACvB,UAAU,MAAM,MAAM;IACtB,UAAU,MAAM,MAAM;IACtB,SAAS,MAAM,MAAM;IACrB,UAAU,MAAM,MAAM;GACxB,CAAC;EACL,CAAC;EAEH,QAAQ,KAAK;EACb,IAAI,gBAAgB,QAAW;GAC7B,MAAM,MAAM,MAAM,MAAM,MAAqB,GAAG,OAAO,eAAe,GAAG,UAAU,WAAW;GAC9F,IAAI,KAAK,UAAU,QAAW,kBAAkB,IAAI,KAAK;EAC3D;CACF,GAAG,CAAC,UAAU,WAAW,CAAC;CAE1B,MAAM,kBAAkB,UAAkB,MAAmD;EAC3F,MAAM,MAAM,KAAK,MAAK,MAAK,EAAE,UAAU,QAAQ;EAC/C,IAAI,KAAK,aAAa,UAAa,KAAK,UAAU,QAAW;GAC3D,sBAAsB,IAAI,QAAQ,iBAAiB,aAAa,WAAW;GAC3E,kBAAkB,IAAI,KAAK;GAC3B,aAAa,IAAI,MAAM,IAAI,KAAK;EAClC;EACA,KAAK,UAAU,CAAC;CAClB;CAEA,MAAM,YAAY,OAAO;CAEzB,OACE,qBAAC,UAAD;EAAU,WAAW,GAAG,YAAY,SAAS;EAAQ;EAAK,GAAI,OAAO;EAAW,GAAI;YAApF,CACG,CAAC,CAAC,MAAM,UACP,oBAAC,YAAD;GACW;GACT,eAAe;GACK;GACpB,iBAAiB,UAAU,MAAM,eAAe,UAAU,CAAC;GAC/C;GACN;GACA;EACP,IAEF,MAAM,SACL,oBAAC,KAAD;GAAK,SAAS,WAAW;GAAS,OAAO,WAAW;aACjD,CAAC,WAAW,YAAY,WAAW;EACjC,KAEL,oBAAC,GAAD;GAAG,GAAG;aAAG;EAAuB,EAE1B;;AAEd,CAAC;AAED,KAAK,cAAc"}
+{"version":3,"file":"tabs.js","names":[],"sources":["../../src/tabs/tabs.tsx"],"sourcesContent":["import type { ReactElement } from 'react'\nimport { Children, useEffect } from 'react'\n\nimport { styled, useStyleConfig, vui } from '../core'\nimport { P } from '../p'\nimport { cs } from '../utils'\nimport Tab from './tab'\nimport type { TabIndexProps, TabProps, TabsProps } from './tabs.types'\nimport TabsNavBar from './tabsNavBar'\nimport { useTabsState } from './useTabsState'\n\nexport const TabsBase = styled.divBox<TabsProps>`\n  width: 100%;\n`\n\n/**\n * Implements Tabs navigation to switch between views. Implements Tabs navigation to switch between views. **Do not use as a top menu in a page!**\n */\nexport const Tabs = vui<'div', TabsProps>((props, ref) => {\n  const { actions, activeTabId, showBorder = true, children, className, size, onTabClick, ...rest } = props\n  const styles = useStyleConfig('Tabs', props)\n  const { tabs, setTabs, activeTabIndex, setActiveTabIndex, animationDirection, setAnimationDirection } = useTabsState(\n    'fadeIn',\n    0,\n  )\n\n  useEffect(() => {\n    const _tabs: TabIndexProps[] = []\n    if (children) {\n      // @ts-expect-error no idea\n      ;(Children.toArray(children) as ReactElement[]).forEach((child: ReactElement<TabProps>, index: number) => {\n        if (child?.props?.title)\n          _tabs.push({\n            id: child.props.id,\n            index: index,\n            title: child.props.title,\n            icon: child.props.icon,\n            className: child.props.className,\n            children: child.props.children,\n            disabled: child.props.disabled,\n            onClick: child.props.onClick,\n            onDelete: child.props.onDelete,\n          })\n      })\n    }\n    setTabs(_tabs)\n    if (activeTabId !== undefined) {\n      const tab = _tabs.find((t: TabIndexProps) => t?.id === activeTabId || t?.index === activeTabId)\n      if (tab?.index !== undefined) setActiveTabIndex(tab.index)\n    }\n  }, [children, activeTabId])\n\n  const onNavItemClick = (tabIndex: number, e: React.MouseEvent<HTMLLIElement, MouseEvent>) => {\n    const tab = tabs.find(t => t.index === tabIndex)\n    if (tab?.children !== undefined && tab?.index !== undefined) {\n      setAnimationDirection(tab.index < activeTabIndex ? 'fadeLeft' : 'fadeRight')\n      setActiveTabIndex(tab.index)\n      onTabClick?.(tab.id || tab.index)\n    }\n    tab?.onClick?.(e)\n  }\n\n  const activeTab = tabs?.[activeTabIndex]\n\n  return (\n    <TabsBase className={cs('vui-tabs', className)} ref={ref} {...styles.container} {...rest}>\n      {!!tabs?.length && (\n        <TabsNavBar\n          actions={actions}\n          activeNavItem={activeTabIndex}\n          animationDirection={animationDirection}\n          onNavItemClick={(tabIndex, e) => onNavItemClick(tabIndex, e)}\n          showBorder={showBorder}\n          size={size}\n          tabs={tabs}\n        />\n      )}\n      {tabs?.length ? (\n        <Tab onClick={activeTab?.onClick} title={activeTab?.title}>\n          {!activeTab?.disabled && activeTab?.children}\n        </Tab>\n      ) : (\n        <P p={2}>Please specify Tabs.</P>\n      )}\n    </TabsBase>\n  )\n})\n\nTabs.displayName = 'Tabs'\n\nexport default Tabs\n"],"mappings":";;;;;;;;;;;;AAWA,MAAa,WAAW,OAAO,MAAiB;;;;;;AAOhD,MAAa,OAAO,KAAuB,OAAO,QAAQ;CACxD,MAAM,EAAE,SAAS,aAAa,aAAa,MAAM,UAAU,WAAW,MAAM,YAAY,GAAG,SAAS;CACpG,MAAM,SAAS,eAAe,QAAQ,KAAK;CAC3C,MAAM,EAAE,MAAM,SAAS,gBAAgB,mBAAmB,oBAAoB,0BAA0B,aACtG,UACA,CACF;CAEA,gBAAgB;EACd,MAAM,QAAyB,CAAC;EAChC,IAAI,UAED,AAAC,SAAS,QAAQ,QAAQ,CAAC,CAAoB,SAAS,OAA+B,UAAkB;GACxG,IAAI,OAAO,OAAO,OAChB,MAAM,KAAK;IACT,IAAI,MAAM,MAAM;IACT;IACP,OAAO,MAAM,MAAM;IACnB,MAAM,MAAM,MAAM;IAClB,WAAW,MAAM,MAAM;IACvB,UAAU,MAAM,MAAM;IACtB,UAAU,MAAM,MAAM;IACtB,SAAS,MAAM,MAAM;IACrB,UAAU,MAAM,MAAM;GACxB,CAAC;EACL,CAAC;EAEH,QAAQ,KAAK;EACb,IAAI,gBAAgB,QAAW;GAC7B,MAAM,MAAM,MAAM,MAAM,MAAqB,GAAG,OAAO,eAAe,GAAG,UAAU,WAAW;GAC9F,IAAI,KAAK,UAAU,QAAW,kBAAkB,IAAI,KAAK;EAC3D;CACF,GAAG,CAAC,UAAU,WAAW,CAAC;CAE1B,MAAM,kBAAkB,UAAkB,MAAmD;EAC3F,MAAM,MAAM,KAAK,MAAK,MAAK,EAAE,UAAU,QAAQ;EAC/C,IAAI,KAAK,aAAa,UAAa,KAAK,UAAU,QAAW;GAC3D,sBAAsB,IAAI,QAAQ,iBAAiB,aAAa,WAAW;GAC3E,kBAAkB,IAAI,KAAK;GAC3B,aAAa,IAAI,MAAM,IAAI,KAAK;EAClC;EACA,KAAK,UAAU,CAAC;CAClB;CAEA,MAAM,YAAY,OAAO;CAEzB,OACE,qBAAC,UAAD;EAAU,WAAW,GAAG,YAAY,SAAS;EAAQ;EAAK,GAAI,OAAO;EAAW,GAAI;YAApF,CACG,CAAC,CAAC,MAAM,UACP,oBAAC,YAAD;GACW;GACT,eAAe;GACK;GACpB,iBAAiB,UAAU,MAAM,eAAe,UAAU,CAAC;GAC/C;GACN;GACA;EACP,IAEF,MAAM,SACL,oBAAC,KAAD;GAAK,SAAS,WAAW;GAAS,OAAO,WAAW;aACjD,CAAC,WAAW,YAAY,WAAW;EACjC,KAEL,oBAAC,GAAD;GAAG,GAAG;aAAG;EAAuB,EAE1B;;AAEd,CAAC;AAED,KAAK,cAAc"}

package/dist/tabs/tabsNavBar.js

@@ -3,9 +3,9 @@ import theme_default from "./theme.js";
 import vui from "../core/vui.js";
 import Box from "../box/box.js";
 import Icon from "../icon/icon.js";
+import { DismissButton } from "../button/buttons.js";
 import ListItem from "../list/listItem.js";
 import List from "../list/list.js";
-import TagButton from "../tag/tagButton.js";
 import { colors, iconSizeMapper } from "./consts.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 
@@ -55,11 +55,9 @@ const TabsNavBar = vui((props, ref) => {
 						size: iconSize
 					}), tab.title]
 				}),
-				!!tab.onDelete && /* @__PURE__ */ jsx(TagButton, {
+				!!tab.onDelete && /* @__PURE__ */ jsx(DismissButton, {
+					"aria-label": "Delete",
 					disabled: tab.disabled,
-					hoverBg: "skyBlue.80",
-					hoverColor: "seaBlue.main",
-					isRound: false,
 					ml: 1,
 					onClick: (e) => {
 						e.stopPropagation();
@@ -91,5 +89,5 @@ TabsNavBar.displayName = "TabsNavBar";
 
 //#endregion
 export { TabsNavBar as default };
-globalThis.__vuiVersion__ = "5.1.1"
+globalThis.__vuiVersion__ = "5.2.0"
 //# sourceMappingURL=tabsNavBar.js.map

package/dist/tabs/tabsNavBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabsNavBar.js","names":["theme"],"sources":["../../src/tabs/tabsNavBar.tsx"],"sourcesContent":["import Box from '../box'\nimport { vui } from '../core'\nimport { Icon } from '../icon'\nimport { List, ListItem } from '../list'\nimport { TagButton } from '../tag'\nimport type { Dict } from '../utils'\nimport { cs } from '../utils'\nimport { colors, iconSizeMapper } from './consts'\nimport type { NavBarIconSize, TabIndexProps, TabNavBarProps } from './tabs.types'\nimport theme from './theme'\n\nconst { activeBg, border, color, hover, main } = colors\n\nexport const TabsNavBar = vui<'div', TabNavBarProps>((props, ref) => {\n  const { actions, tabs, onNavItemClick, activeNavItem, animationDirection, showBorder, size = 'md' } = props\n  const iconSize: NavBarIconSize = iconSizeMapper?.[size as string] || 'md'\n\n  const { sizes } = (theme as Dict) ?? {}\n\n  const fontSize = sizes[size ?? 'md'].tabsNavBar.fontSize\n  const h = sizes[size ?? 'md'].tabsNavBar.h\n  const borderWidth = sizes[size ?? 'md'].tabsNavBar.borderWidth\n  const py = sizes[size ?? 'md'].tabsNavBar.py\n  const iconMarginRight = size === 'xxl' ? '16px' : '8px'\n\n  const isActive = (tab: TabIndexProps) => !tab.disabled && tab?.index === activeNavItem\n\n  return (\n    <List\n      alignItems=\"end\"\n      borderBottom={showBorder ? `1px solid ${border}` : 'none'}\n      className={cs('vui-tabsNavBar')}\n      display=\"flex\"\n      isInteractive\n      mb=\"20px\"\n      ref={ref}\n      w={1}\n    >\n      {tabs?.map?.(tab => (\n        <ListItem\n          activeBg={tab.disabled ? undefined : activeBg}\n          bg=\"white\"\n          className={`vui-tabsNavBarItem vui-tabsNavBarItem-${tab?.id}`}\n          color={isActive(tab) ? main : color}\n          disabled={tab.disabled}\n          display=\"inline-flex\"\n          fontSize={fontSize}\n          lineHeight=\"125%\"\n          fontWeight={400}\n          h={h}\n          hoverBg={tab.disabled ? undefined : hover}\n          key={tab.index}\n          onClick={e => onNavItemClick?.(tab.index || 0, e)}\n          position=\"relative\"\n          px=\"16px\"\n          py={py}\n        >\n          <Box alignItems=\"center\">\n            {!!tab.icon && <Icon mr={iconMarginRight} name={tab.icon} size={iconSize} />}\n            {tab.title}\n          </Box>\n          {!!tab.onDelete && (\n            <TagButton\n              disabled={tab.disabled}\n              hoverBg=\"skyBlue.80\"\n              hoverColor=\"seaBlue.main\"\n              isRound={false}\n              ml={1}\n              onClick={e => {\n                e.stopPropagation()\n                tab?.onDelete?.(e)\n              }}\n              title=\"Delete\"\n            />\n          )}\n          {isActive(tab) && (\n            <Box\n              animation={animationDirection}\n              bg={main}\n              bottom=\"-1px\"\n              className=\"vui-tabsNavBarItemActiveIndicator\"\n              h={borderWidth}\n              left={0}\n              position=\"absolute\"\n              w={1}\n            >\n              &nbsp;\n            </Box>\n          )}\n        </ListItem>\n      ))}\n      {!!actions && (\n        <Box ml=\"auto\" px={0.75} py={0.5}>\n          {actions}\n        </Box>\n      )}\n    </List>\n  )\n})\n\nTabsNavBar.displayName = 'TabsNavBar'\n\nexport default TabsNavBar\n"],"mappings":";;;;;;;;;;;;AAWA,MAAM,EAAE,UAAU,QAAQ,OAAO,OAAO,SAAS;AAEjD,MAAa,aAAa,KAA4B,OAAO,QAAQ;CACnE,MAAM,EAAE,SAAS,MAAM,gBAAgB,eAAe,oBAAoB,YAAY,OAAO,SAAS;CACtG,MAAM,WAA2B,iBAAiB,SAAmB;CAErE,MAAM,EAAE,UAAWA,iBAAkB,CAAC;CAEtC,MAAM,WAAW,MAAM,QAAQ,MAAM,WAAW;CAChD,MAAM,IAAI,MAAM,QAAQ,MAAM,WAAW;CACzC,MAAM,cAAc,MAAM,QAAQ,MAAM,WAAW;CACnD,MAAM,KAAK,MAAM,QAAQ,MAAM,WAAW;CAC1C,MAAM,kBAAkB,SAAS,QAAQ,SAAS;CAElD,MAAM,YAAY,QAAuB,CAAC,IAAI,YAAY,KAAK,UAAU;CAEzE,OACE,qBAAC,MAAD;EACE,YAAW;EACX,cAAc,aAAa,aAAa,WAAW;EACnD,WAAW,GAAG,gBAAgB;EAC9B,SAAQ;EACR;EACA,IAAG;EACE;EACL,GAAG;YARL,CAUG,MAAM,OAAM,QACX,qBAAC,UAAD;GACE,UAAU,IAAI,WAAW,SAAY;GACrC,IAAG;GACH,WAAW,yCAAyC,KAAK;GACzD,OAAO,SAAS,GAAG,IAAI,OAAO;GAC9B,UAAU,IAAI;GACd,SAAQ;GACE;GACV,YAAW;GACX,YAAY;GACT;GACH,SAAS,IAAI,WAAW,SAAY;GAEpC,UAAS,MAAK,iBAAiB,IAAI,SAAS,GAAG,CAAC;GAChD,UAAS;GACT,IAAG;GACC;aAhBN;IAkBE,qBAAC,KAAD;KAAK,YAAW;eAAhB,CACG,CAAC,CAAC,IAAI,QAAQ,oBAAC,MAAD;MAAM,IAAI;MAAiB,MAAM,IAAI;MAAM,MAAM;KAAW,IAC1E,IAAI,KACF;;IACJ,CAAC,CAAC,IAAI,YACL,oBAAC,WAAD;KACE,UAAU,IAAI;KACd,SAAQ;KACR,YAAW;KACX,SAAS;KACT,IAAI;KACJ,UAAS,MAAK;MACZ,EAAE,gBAAgB;MAClB,KAAK,WAAW,CAAC;KACnB;KACA,OAAM;IACP;IAEF,SAAS,GAAG,KACX,oBAAC,KAAD;KACE,WAAW;KACX,IAAI;KACJ,QAAO;KACP,WAAU;KACV,GAAG;KACH,MAAM;KACN,UAAS;KACT,GAAG;eACJ;IAEI;GAEC;KAtCH,IAAI,KAsCD,CACX,GACA,CAAC,CAAC,WACD,oBAAC,KAAD;GAAK,IAAG;GAAO,IAAI;GAAM,IAAI;aAC1B;EACE,EAEH;;AAEV,CAAC;AAED,WAAW,cAAc"}
+{"version":3,"file":"tabsNavBar.js","names":["theme"],"sources":["../../src/tabs/tabsNavBar.tsx"],"sourcesContent":["import Box from '../box'\nimport { DismissButton } from '../button'\nimport { vui } from '../core'\nimport { Icon } from '../icon'\nimport { List, ListItem } from '../list'\nimport type { Dict } from '../utils'\nimport { cs } from '../utils'\nimport { colors, iconSizeMapper } from './consts'\nimport type { NavBarIconSize, TabIndexProps, TabNavBarProps } from './tabs.types'\nimport theme from './theme'\n\nconst { activeBg, border, color, hover, main } = colors\n\nexport const TabsNavBar = vui<'div', TabNavBarProps>((props, ref) => {\n  const { actions, tabs, onNavItemClick, activeNavItem, animationDirection, showBorder, size = 'md' } = props\n  const iconSize: NavBarIconSize = iconSizeMapper?.[size as string] || 'md'\n\n  const { sizes } = (theme as Dict) ?? {}\n\n  const fontSize = sizes[size ?? 'md'].tabsNavBar.fontSize\n  const h = sizes[size ?? 'md'].tabsNavBar.h\n  const borderWidth = sizes[size ?? 'md'].tabsNavBar.borderWidth\n  const py = sizes[size ?? 'md'].tabsNavBar.py\n  const iconMarginRight = size === 'xxl' ? '16px' : '8px'\n\n  const isActive = (tab: TabIndexProps) => !tab.disabled && tab?.index === activeNavItem\n\n  return (\n    <List\n      alignItems=\"end\"\n      borderBottom={showBorder ? `1px solid ${border}` : 'none'}\n      className={cs('vui-tabsNavBar')}\n      display=\"flex\"\n      isInteractive\n      mb=\"20px\"\n      ref={ref}\n      w={1}\n    >\n      {tabs?.map?.(tab => (\n        <ListItem\n          activeBg={tab.disabled ? undefined : activeBg}\n          bg=\"white\"\n          className={`vui-tabsNavBarItem vui-tabsNavBarItem-${tab?.id}`}\n          color={isActive(tab) ? main : color}\n          disabled={tab.disabled}\n          display=\"inline-flex\"\n          fontSize={fontSize}\n          lineHeight=\"125%\"\n          fontWeight={400}\n          h={h}\n          hoverBg={tab.disabled ? undefined : hover}\n          key={tab.index}\n          onClick={e => onNavItemClick?.(tab.index || 0, e)}\n          position=\"relative\"\n          px=\"16px\"\n          py={py}\n        >\n          <Box alignItems=\"center\">\n            {!!tab.icon && <Icon mr={iconMarginRight} name={tab.icon} size={iconSize} />}\n            {tab.title}\n          </Box>\n          {!!tab.onDelete && (\n            <DismissButton\n              aria-label=\"Delete\"\n              disabled={tab.disabled}\n              ml={1}\n              onClick={e => {\n                e.stopPropagation()\n                tab?.onDelete?.(e)\n              }}\n              title=\"Delete\"\n            />\n          )}\n          {isActive(tab) && (\n            <Box\n              animation={animationDirection}\n              bg={main}\n              bottom=\"-1px\"\n              className=\"vui-tabsNavBarItemActiveIndicator\"\n              h={borderWidth}\n              left={0}\n              position=\"absolute\"\n              w={1}\n            >\n              &nbsp;\n            </Box>\n          )}\n        </ListItem>\n      ))}\n      {!!actions && (\n        <Box ml=\"auto\" px={0.75} py={0.5}>\n          {actions}\n        </Box>\n      )}\n    </List>\n  )\n})\n\nTabsNavBar.displayName = 'TabsNavBar'\n\nexport default TabsNavBar\n"],"mappings":";;;;;;;;;;;;AAWA,MAAM,EAAE,UAAU,QAAQ,OAAO,OAAO,SAAS;AAEjD,MAAa,aAAa,KAA4B,OAAO,QAAQ;CACnE,MAAM,EAAE,SAAS,MAAM,gBAAgB,eAAe,oBAAoB,YAAY,OAAO,SAAS;CACtG,MAAM,WAA2B,iBAAiB,SAAmB;CAErE,MAAM,EAAE,UAAWA,iBAAkB,CAAC;CAEtC,MAAM,WAAW,MAAM,QAAQ,KAAK,CAAC,WAAW;CAChD,MAAM,IAAI,MAAM,QAAQ,KAAK,CAAC,WAAW;CACzC,MAAM,cAAc,MAAM,QAAQ,KAAK,CAAC,WAAW;CACnD,MAAM,KAAK,MAAM,QAAQ,KAAK,CAAC,WAAW;CAC1C,MAAM,kBAAkB,SAAS,QAAQ,SAAS;CAElD,MAAM,YAAY,QAAuB,CAAC,IAAI,YAAY,KAAK,UAAU;CAEzE,OACE,qBAAC,MAAD;EACE,YAAW;EACX,cAAc,aAAa,aAAa,WAAW;EACnD,WAAW,GAAG,gBAAgB;EAC9B,SAAQ;EACR;EACA,IAAG;EACE;EACL,GAAG;YARL,CAUG,MAAM,OAAM,QACX,qBAAC,UAAD;GACE,UAAU,IAAI,WAAW,SAAY;GACrC,IAAG;GACH,WAAW,yCAAyC,KAAK;GACzD,OAAO,SAAS,GAAG,IAAI,OAAO;GAC9B,UAAU,IAAI;GACd,SAAQ;GACE;GACV,YAAW;GACX,YAAY;GACT;GACH,SAAS,IAAI,WAAW,SAAY;GAEpC,UAAS,MAAK,iBAAiB,IAAI,SAAS,GAAG,CAAC;GAChD,UAAS;GACT,IAAG;GACC;aAhBN;IAkBE,qBAAC,KAAD;KAAK,YAAW;eAAhB,CACG,CAAC,CAAC,IAAI,QAAQ,oBAAC,MAAD;MAAM,IAAI;MAAiB,MAAM,IAAI;MAAM,MAAM;KAAW,IAC1E,IAAI,KACF;;IACJ,CAAC,CAAC,IAAI,YACL,oBAAC,eAAD;KACE,cAAW;KACX,UAAU,IAAI;KACd,IAAI;KACJ,UAAS,MAAK;MACZ,EAAE,gBAAgB;MAClB,KAAK,WAAW,CAAC;KACnB;KACA,OAAM;IACP;IAEF,SAAS,GAAG,KACX,oBAAC,KAAD;KACE,WAAW;KACX,IAAI;KACJ,QAAO;KACP,WAAU;KACV,GAAG;KACH,MAAM;KACN,UAAS;KACT,GAAG;eACJ;IAEI;GAEC;KApCH,IAAI,KAoCD,CACX,GACA,CAAC,CAAC,WACD,oBAAC,KAAD;GAAK,IAAG;GAAO,IAAI;GAAM,IAAI;aAC1B;EACE,EAEH;;AAEV,CAAC;AAED,WAAW,cAAc"}

package/dist/tabs/theme.js

@@ -45,5 +45,5 @@ var theme_default = {
 
 //#endregion
 export { theme_default as default };
-globalThis.__vuiVersion__ = "5.1.1"
+globalThis.__vuiVersion__ = "5.2.0"
 //# sourceMappingURL=theme.js.map

package/dist/tabs/useTabsState.js

@@ -17,5 +17,5 @@ const useTabsState = (initialAnimation, tabIndex) => {
 
 //#endregion
 export { useTabsState };
-globalThis.__vuiVersion__ = "5.1.1"
+globalThis.__vuiVersion__ = "5.2.0"
 //# sourceMappingURL=useTabsState.js.map

package/dist/tag/index.d.ts

@@ -1,6 +1,3 @@
-import { TagProvider, useTagContext } from "./context.js";
-import { TagInnerProps, TagProps } from "./tag.types.js";
-import { TagButton } from "./tagButton.js";
-import { TagIcon } from "./tagIcon.js";
-import { TagText } from "./tagText.js";
-import { Tag, TagBase } from "./tag.js";
+import { TagContainerStyles, TagHierarchy, TagInnerProps, TagIntent, TagIntentTokens, TagProps, TagVariantCanonical } from "./tag.types.js";
+import { Tag } from "./tag.js";
+import { resolveTagVariantKey } from "./utils.js";

package/dist/tag/tag.d.ts

@@ -1,21 +1,14 @@
-import { SystemProps } from "../system/system.js";
 import { VuiComponent } from "../core/vui.js";
 import { TagProps } from "./tag.types.js";
-import { TagButton } from "./tagButton.js";
-import { TagIcon } from "./tagIcon.js";
-import { TagText } from "./tagText.js";
+
 //#region src/tag/tag.d.ts
-declare const TagBase: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, SystemProps, never>;
 /**
- * Displays text, icons or custom content. Can be made interactive or a link.
- * Exposes some props to the children via context.
+ * Displays text, icons or custom content. Can be made interactive or include a
+ * dismiss affordance. When `isInteractive` (or `onClick` without `onDelete`)
+ * is set, the tag renders as a `<button>` so it is keyboard-activatable.
  */
-declare const Tag: VuiComponent<"span", TagProps> & {
-  Button: typeof TagButton;
-  Icon: typeof TagIcon;
-  Text: typeof TagText;
-};
+declare const Tag: VuiComponent<"span", TagProps>;
 //#endregion
-export { Tag, TagBase };
+export { Tag };
 
 //# sourceMappingURL=tag.d.ts.map

package/dist/tag/tag.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tag.d.ts","names":[],"sources":["../../src/tag/tag.tsx"],"mappings":";;;;;;;cAWa,OAAA,8BAAO,eAAA,qCAAA,YAAA,EAsBnB,WAtBmB;;;;;cA2BP,GAAA,EAoHP,YAAA,SAAqB,QAAA;EACzB,MAAA,SAAe,SAAA;EACf,IAAA,SAAa,OAAA;EACb,IAAA,SAAa,OAAA;AAAA"}
+{"version":3,"file":"tag.d.ts","names":[],"sources":["../../src/tag/tag.tsx"],"mappings":";;;;;;;AA+CA;;cAAa,GAAA,EAuKP,YAAY,SAAS,QAAA"}

package/dist/tag/tag.js

@@ -1,127 +1,137 @@
 import { isReactText, isString } from "../utils/assertion.js";
 import { filterUndefined } from "../utils/object.js";
 import { cs } from "../utils/styles.js";
+import fontSizes_default from "../theme/foundations/fontSizes.js";
 import { useStyleConfig } from "../core/theme.js";
 import styled from "../core/styled.js";
 import vui from "../core/vui.js";
-import { TagProvider } from "./context.js";
-import TagButton from "./tagButton.js";
-import TagIcon from "./tagIcon.js";
-import TagText from "./tagText.js";
+import Icon from "../icon/icon.js";
+import T from "../t/t.js";
+import { DismissButton } from "../button/buttons.js";
+import { resolveTagVariantKey } from "./utils.js";
 import { useEffect, useMemo } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/tag/tag.tsx
+/** Outer container — rendered as <span> for static tags and <button> for interactive tags. */
 const TagBase = styled.spanBox`
+  /* Drives DismissButton color via cascade so the close affordance picks up the tag's text color. */
+  --vui-dismiss-fg: currentColor;
+
   align-items: center;
-  border-radius: xl;
   display: inline-flex;
   font-weight: medium;
   justify-content: center;
-  line-height: normal;
+  line-height: 1;
   max-width: 100%;
   position: relative;
   transition-duration: fast;
   width: fit-content;
 
   &:focus {
-    border-color: transparent;
     outline: none;
   }
 
-  &[aria-disabled='true'] {
-    opacity: 0.5;
-    cursor: not-allowed;
-    user-select: none;
-  }
+
 `;
 /**
-* Displays text, icons or custom content. Can be made interactive or a link.
-* Exposes some props to the children via context.
+* Displays text, icons or custom content. Can be made interactive or include a
+* dismiss affordance. When `isInteractive` (or `onClick` without `onDelete`)
+* is set, the tag renders as a `<button>` so it is keyboard-activatable.
 */
 const Tag = vui((props, ref) => {
-	const { casing, children, className, disabled, icon, startIcon, endIcon, iconLeft, iconRight, isFullWidth, isInteractive = props.onClick !== void 0 && props.onDelete === void 0, isRound, isTruncated = true, itemLeft, itemRight, onClick, onDelete, size = "md", text, variant = "subtleBlue", weight, ...rest } = props;
+	const { children, className, deleteLabel = "Remove", icon, startIcon, endIcon, iconLeft, iconRight, intent: intentProp, isInteractive = props.onClick !== void 0 && props.onDelete === void 0, isTruncated = true, itemLeft, itemRight, onClick, onDelete, size = "md", text, variant: variantProp, ...rest } = props;
+	const resolvedVariant = useMemo(() => resolveTagVariantKey(variantProp, intentProp), [variantProp, intentProp]);
+	useEffect(() => {
+		if (iconLeft !== void 0) console.warn("[Tag] `iconLeft` is deprecated. Use `startIcon` instead.");
+		if (iconRight !== void 0) console.warn("[Tag] `iconRight` is deprecated. Use `endIcon` instead.");
+		if (variantProp !== void 0 && !["subtle", "solid"].includes(variantProp) && /^(subtle|solid)(Brand|Success|Danger|Warning|Lavender|Eucalyptus|Terracotta|Grey)$/.test(variantProp)) console.warn(`[Tag] Combined variant "${variantProp}" is deprecated. Use separate \`variant\` + \`intent\` props instead (e.g. variant="subtle" intent="brand").`);
+	}, [
+		iconLeft,
+		iconRight,
+		variantProp
+	]);
 	const resolvedStartIcon = startIcon ?? iconLeft;
 	const resolvedEndIcon = endIcon ?? iconRight;
-	const { activeBg, h, hoverBg, spaceX: spaceXBase = 0, ...tagStyles } = useStyleConfig("Tag", props).container;
-	const context = useMemo(() => filterUndefined({
-		disabled,
-		size,
-		variant
-	}), [
-		disabled,
-		size,
-		variant
-	]);
-	const spaceX = spaceXBase / 8;
-	let spaceXText = (spaceXBase + 4) / 8;
-	if (size === "xs") spaceXText = spaceXBase / 8;
-	const pl = icon || itemLeft || resolvedStartIcon ? spaceX : spaceXText;
-	const pr = icon || itemRight || resolvedEndIcon ? spaceX : spaceXText;
-	const interactiveProps = !disabled && isInteractive ? {
+	const styles = useStyleConfig("Tag", {
+		...props,
+		variant: resolvedVariant
+	});
+	const { h, fontSize: themeFontSize, paddingX = 0, paddingY = 0, gapX = 0, borderRadius, bgHover, bgPressed, ...containerColors } = styles.container ?? {};
+	const dismissStyles = styles.dismiss ?? {};
+	const iconStyles = styles.icon ?? {};
+	const fontSize = `var(--vui-tag-font-size, ${fontSizes_default[themeFontSize] ?? themeFontSize}px)`;
+	const iconSize = `var(--vui-tag-icon-size, ${iconStyles.fontSize || "1rem"})`;
+	const TagIcon = ({ name, mr, ml }) => /* @__PURE__ */ jsx(Icon, {
+		className: "vui-tagIcon",
+		fontSize: iconSize,
+		h: iconSize,
+		ml,
+		mr,
+		w: iconSize,
+		name
+	});
+	const toPx = (v) => typeof v === "number" ? `${v}px` : v;
+	const pxX = toPx(paddingX);
+	const pxY = toPx(paddingY);
+	const pxGap = toPx(gapX);
+	const aliasedProps = filterUndefined({ borderRadius });
+	const interactiveStateProps = isInteractive ? filterUndefined({
+		hoverBg: bgHover,
+		activeBg: bgPressed
+	}) : void 0;
+	const interactiveProps = isInteractive ? {
+		as: "button",
+		type: "button",
 		cursor: "pointer",
-		hoverBg,
-		activeBg,
 		tabIndex: 0,
 		userSelect: "none"
 	} : {};
-	const aliasedProps = filterUndefined({
-		borderRadius: isRound ? h / 2 : void 0,
-		"aria-disabled": disabled,
-		fontWeight: weight,
-		textTransform: casing,
-		w: isFullWidth ? "100%" : void 0
-	});
-	useEffect(() => {
-		if (iconLeft !== void 0) console.warn("[Tag] `iconLeft` is deprecated. Use `startIcon` instead.");
-		if (iconRight !== void 0) console.warn("[Tag] `iconRight` is deprecated. Use `endIcon` instead.");
-	}, [iconLeft, iconRight]);
-	return /* @__PURE__ */ jsx(TagProvider, {
-		value: context,
-		children: /* @__PURE__ */ jsxs(TagBase, {
-			className: cs("vui-tag", className),
-			focusRing: 2,
-			h,
-			isTruncated,
-			onClick: !disabled ? onClick : void 0,
-			pl,
-			pr,
-			ref,
-			...tagStyles,
-			...interactiveProps,
-			...aliasedProps,
-			...rest,
-			children: [isString(icon) ? /* @__PURE__ */ jsx(TagIcon, { name: icon }) : icon, !icon && /* @__PURE__ */ jsxs(Fragment$1, { children: [
-				itemLeft,
-				isString(resolvedStartIcon) ? /* @__PURE__ */ jsx(TagIcon, {
-					mr: spaceX,
-					name: resolvedStartIcon
-				}) : resolvedStartIcon,
-				children ?? (isReactText(text) ? /* @__PURE__ */ jsx(TagText, {
-					isTruncated,
-					text
-				}) : text),
-				isString(resolvedEndIcon) ? /* @__PURE__ */ jsx(TagIcon, {
-					ml: spaceX,
-					name: resolvedEndIcon
-				}) : resolvedEndIcon,
-				onDelete ? /* @__PURE__ */ jsx(TagButton, {
-					"aria-label": "delete",
-					disabled,
-					isRound,
-					ml: spaceX,
-					onClick: (e) => onDelete?.(e)
-				}) : itemRight
-			] })]
-		})
+	return /* @__PURE__ */ jsxs(TagBase, {
+		className: cs("vui-tag", className),
+		focusRing: 2,
+		fontSize,
+		h,
+		isTruncated,
+		onClick,
+		px: pxX,
+		py: pxY,
+		ref,
+		variant: resolvedVariant,
+		...containerColors,
+		...interactiveProps,
+		...interactiveStateProps,
+		...aliasedProps,
+		...rest,
+		children: [isString(icon) ? /* @__PURE__ */ jsx(TagIcon, { name: icon }) : icon, !icon && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			itemLeft,
+			isString(resolvedStartIcon) ? /* @__PURE__ */ jsx(TagIcon, {
+				name: resolvedStartIcon,
+				mr: pxGap
+			}) : resolvedStartIcon,
+			children ?? (isReactText(text) ? /* @__PURE__ */ jsx(T, {
+				className: "vui-tagText",
+				fontSize: "inherit",
+				isTruncated,
+				children: text
+			}) : text),
+			isString(resolvedEndIcon) ? /* @__PURE__ */ jsx(TagIcon, {
+				name: resolvedEndIcon,
+				ml: pxGap
+			}) : resolvedEndIcon,
+			onDelete && !isInteractive ? /* @__PURE__ */ jsx(DismissButton, {
+				"aria-label": deleteLabel,
+				className: "vui-tagButton",
+				ml: pxGap,
+				onClick: onDelete,
+				...dismissStyles
+			}) : itemRight
+		] })]
 	});
 });
-Tag.Button = TagButton;
-Tag.Icon = TagIcon;
-Tag.Text = TagText;
 Tag.displayName = "Tag";
 
 //#endregion
-export { TagBase, Tag as default };
-globalThis.__vuiVersion__ = "5.1.1"
+export { Tag as default };
+globalThis.__vuiVersion__ = "5.2.0"
 //# sourceMappingURL=tag.js.map

package/dist/tag/tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"tag.js","names":[],"sources":["../../src/tag/tag.tsx"],"sourcesContent":["import { useEffect, useMemo } from 'react'\n\nimport type { VuiComponent } from '../core'\nimport { styled, useStyleConfig, vui } from '../core'\nimport { cs, filterUndefined, isReactText, isString } from '../utils'\nimport { TagProvider } from './context'\nimport type { TagProps } from './tag.types'\nimport TagButton from './tagButton'\nimport TagIcon from './tagIcon'\nimport TagText from './tagText'\n\nexport const TagBase = styled.spanBox`\n  align-items: center;\n  border-radius: xl;\n  display: inline-flex;\n  font-weight: medium;\n  justify-content: center;\n  line-height: normal;\n  max-width: 100%;\n  position: relative;\n  transition-duration: fast;\n  width: fit-content;\n\n  &:focus {\n    border-color: transparent;\n    outline: none;\n  }\n\n  &[aria-disabled='true'] {\n    opacity: 0.5;\n    cursor: not-allowed;\n    user-select: none;\n  }\n`\n/**\n * Displays text, icons or custom content. Can be made interactive or a link.\n * Exposes some props to the children via context.\n */\nexport const Tag = vui<'span', TagProps>((props, ref) => {\n  const {\n    casing,\n    children,\n    className,\n    disabled,\n    icon,\n    startIcon,\n    endIcon,\n    iconLeft,\n    iconRight,\n    isFullWidth,\n    isInteractive = props.onClick !== undefined && props.onDelete === undefined,\n    isRound,\n    isTruncated = true,\n    itemLeft,\n    itemRight,\n    onClick,\n    onDelete,\n    size = 'md',\n    text,\n    variant = 'subtleBlue',\n    weight,\n    ...rest\n  } = props\n\n  const resolvedStartIcon = startIcon ?? iconLeft\n  const resolvedEndIcon = endIcon ?? iconRight\n  const styles = useStyleConfig('Tag', props)\n  const { activeBg, h, hoverBg, spaceX: spaceXBase = 0, ...tagStyles } = styles.container\n\n  const context = useMemo(() => filterUndefined({ disabled, size, variant }), [disabled, size, variant])\n\n  const spaceX = spaceXBase / 8\n  let spaceXText = (spaceXBase + 4) / 8\n  if (size === 'xs') {\n    spaceXText = spaceXBase / 8\n  }\n\n  const pl = icon || itemLeft || resolvedStartIcon ? spaceX : spaceXText\n  const pr = icon || itemRight || resolvedEndIcon ? spaceX : spaceXText\n\n  const interactiveProps =\n    !disabled && isInteractive\n      ? {\n          cursor: 'pointer',\n          hoverBg,\n          activeBg,\n          tabIndex: 0,\n          userSelect: 'none',\n        }\n      : {}\n\n  const aliasedProps = filterUndefined({\n    borderRadius: isRound ? h / 2 : undefined,\n    'aria-disabled': disabled,\n    fontWeight: weight,\n    textTransform: casing,\n    w: isFullWidth ? '100%' : undefined,\n  })\n\n  useEffect(() => {\n    if (process.env.NODE_ENV !== 'production') {\n      if (iconLeft !== undefined) {\n        console.warn('[Tag] `iconLeft` is deprecated. Use `startIcon` instead.')\n      }\n      if (iconRight !== undefined) {\n        console.warn('[Tag] `iconRight` is deprecated. Use `endIcon` instead.')\n      }\n    }\n  }, [iconLeft, iconRight])\n\n  return (\n    <TagProvider value={context}>\n      <TagBase\n        className={cs('vui-tag', className)}\n        focusRing={2}\n        h={h}\n        isTruncated={isTruncated}\n        onClick={!disabled ? onClick : undefined}\n        pl={pl}\n        pr={pr}\n        ref={ref}\n        {...tagStyles}\n        {...interactiveProps}\n        {...aliasedProps}\n        {...rest}\n      >\n        {isString(icon) ? <TagIcon name={icon} /> : icon}\n\n        {!icon && (\n          <>\n            {itemLeft}\n\n            {isString(resolvedStartIcon) ? <TagIcon mr={spaceX} name={resolvedStartIcon} /> : resolvedStartIcon}\n\n            {children ?? (isReactText(text) ? <TagText {...{ isTruncated, text }} /> : text)}\n\n            {isString(resolvedEndIcon) ? <TagIcon ml={spaceX} name={resolvedEndIcon} /> : resolvedEndIcon}\n\n            {onDelete ? (\n              <TagButton\n                aria-label=\"delete\"\n                disabled={disabled}\n                isRound={isRound}\n                ml={spaceX}\n                onClick={e => onDelete?.(e)}\n              />\n            ) : (\n              itemRight\n            )}\n          </>\n        )}\n      </TagBase>\n    </TagProvider>\n  )\n}) as VuiComponent<'span', TagProps> & {\n  Button: typeof TagButton\n  Icon: typeof TagIcon\n  Text: typeof TagText\n}\n\nTag.Button = TagButton\nTag.Icon = TagIcon\nTag.Text = TagText\n\nTag.displayName = 'Tag'\n\nexport default Tag\n"],"mappings":";;;;;;;;;;;;;;AAWA,MAAa,UAAU,OAAO,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BrC,MAAa,MAAM,KAAuB,OAAO,QAAQ;CACvD,MAAM,EACJ,QACA,UACA,WACA,UACA,MACA,WACA,SACA,UACA,WACA,aACA,gBAAgB,MAAM,YAAY,UAAa,MAAM,aAAa,QAClE,SACA,cAAc,MACd,UACA,WACA,SACA,UACA,OAAO,MACP,MACA,UAAU,cACV,QACA,GAAG,SACD;CAEJ,MAAM,oBAAoB,aAAa;CACvC,MAAM,kBAAkB,WAAW;CAEnC,MAAM,EAAE,UAAU,GAAG,SAAS,QAAQ,aAAa,GAAG,GAAG,cAD1C,eAAe,OAAO,KACuC,EAAE;CAE9E,MAAM,UAAU,cAAc,gBAAgB;EAAE;EAAU;EAAM;CAAQ,CAAC,GAAG;EAAC;EAAU;EAAM;CAAO,CAAC;CAErG,MAAM,SAAS,aAAa;CAC5B,IAAI,cAAc,aAAa,KAAK;CACpC,IAAI,SAAS,MACX,aAAa,aAAa;CAG5B,MAAM,KAAK,QAAQ,YAAY,oBAAoB,SAAS;CAC5D,MAAM,KAAK,QAAQ,aAAa,kBAAkB,SAAS;CAE3D,MAAM,mBACJ,CAAC,YAAY,gBACT;EACE,QAAQ;EACR;EACA;EACA,UAAU;EACV,YAAY;CACd,IACA,CAAC;CAEP,MAAM,eAAe,gBAAgB;EACnC,cAAc,UAAU,IAAI,IAAI;EAChC,iBAAiB;EACjB,YAAY;EACZ,eAAe;EACf,GAAG,cAAc,SAAS;CAC5B,CAAC;CAED,gBAAgB;EAEZ,IAAI,aAAa,QACf,QAAQ,KAAK,0DAA0D;EAEzE,IAAI,cAAc,QAChB,QAAQ,KAAK,yDAAyD;CAG5E,GAAG,CAAC,UAAU,SAAS,CAAC;CAExB,OACE,oBAAC,aAAD;EAAa,OAAO;YAClB,qBAAC,SAAD;GACE,WAAW,GAAG,WAAW,SAAS;GAClC,WAAW;GACR;GACU;GACb,SAAS,CAAC,WAAW,UAAU;GAC3B;GACA;GACC;GACL,GAAI;GACJ,GAAI;GACJ,GAAI;GACJ,GAAI;aAZN,CAcG,SAAS,IAAI,IAAI,oBAAC,SAAD,EAAS,MAAM,KAAO,KAAI,MAE3C,CAAC,QACA;IACG;IAEA,SAAS,iBAAiB,IAAI,oBAAC,SAAD;KAAS,IAAI;KAAQ,MAAM;IAAoB,KAAI;IAEjF,aAAa,YAAY,IAAI,IAAI,oBAAC,SAAD;KAAe;KAAa;IAAS,KAAI;IAE1E,SAAS,eAAe,IAAI,oBAAC,SAAD;KAAS,IAAI;KAAQ,MAAM;IAAkB,KAAI;IAE7E,WACC,oBAAC,WAAD;KACE,cAAW;KACD;KACD;KACT,IAAI;KACJ,UAAS,MAAK,WAAW,CAAC;IAC3B,KAED;GAEF,IAEG;;CACE;AAEjB,CAAC;AAMD,IAAI,SAAS;AACb,IAAI,OAAO;AACX,IAAI,OAAO;AAEX,IAAI,cAAc"}
+{"version":3,"file":"tag.js","names":["fontSizes"],"sources":["../../src/tag/tag.tsx"],"sourcesContent":["import { useEffect, useMemo } from 'react'\n\nimport { DismissButton } from '../button'\nimport type { VuiComponent } from '../core'\nimport { styled, useStyleConfig, vui } from '../core'\nimport Icon from '../icon'\nimport T from '../t'\nimport { fontSizes } from '../theme'\nimport { cs, filterUndefined, isReactText, isString } from '../utils'\nimport type { TagProps } from './tag.types'\nimport { resolveTagVariantKey } from './utils'\n\n// ---------------------------------------------------------------------------\n// Styled primitives\n// ---------------------------------------------------------------------------\n\n/** Outer container — rendered as <span> for static tags and <button> for interactive tags. */\nconst TagBase = styled.spanBox`\n  /* Drives DismissButton color via cascade so the close affordance picks up the tag's text color. */\n  --vui-dismiss-fg: currentColor;\n\n  align-items: center;\n  display: inline-flex;\n  font-weight: medium;\n  justify-content: center;\n  line-height: 1;\n  max-width: 100%;\n  position: relative;\n  transition-duration: fast;\n  width: fit-content;\n\n  &:focus {\n    outline: none;\n  }\n\n\n`\n\n// ---------------------------------------------------------------------------\n// Tag component\n// ---------------------------------------------------------------------------\n\n/**\n * Displays text, icons or custom content. Can be made interactive or include a\n * dismiss affordance. When `isInteractive` (or `onClick` without `onDelete`)\n * is set, the tag renders as a `<button>` so it is keyboard-activatable.\n */\nexport const Tag = vui<'span', TagProps>((props, ref) => {\n  const {\n    children,\n    className,\n    deleteLabel = 'Remove',\n    icon,\n    startIcon,\n    endIcon,\n    iconLeft,\n    iconRight,\n    intent: intentProp,\n    isInteractive = props.onClick !== undefined && props.onDelete === undefined,\n    isTruncated = true,\n    itemLeft,\n    itemRight,\n    onClick,\n    onDelete,\n    size = 'md',\n    text,\n    variant: variantProp,\n    ...rest\n  } = props\n\n  // Resolve canonical theme key from the two-prop API (variant + intent).\n  const resolvedVariant = useMemo(\n    () => resolveTagVariantKey(variantProp, intentProp),\n    [variantProp, intentProp],\n  )\n\n  // Dev-mode deprecation warning for legacy combined variants.\n  useEffect(() => {\n    if (process.env.NODE_ENV !== 'production') {\n      if (iconLeft !== undefined) {\n        console.warn('[Tag] `iconLeft` is deprecated. Use `startIcon` instead.')\n      }\n      if (iconRight !== undefined) {\n        console.warn('[Tag] `iconRight` is deprecated. Use `endIcon` instead.')\n      }\n      if (\n        variantProp !== undefined &&\n        !['subtle', 'solid'].includes(variantProp) &&\n        /^(subtle|solid)(Brand|Success|Danger|Warning|Lavender|Eucalyptus|Terracotta|Grey)$/.test(variantProp)\n      ) {\n        console.warn(\n          `[Tag] Combined variant \"${variantProp}\" is deprecated. ` +\n            'Use separate `variant` + `intent` props instead (e.g. variant=\"subtle\" intent=\"brand\").',\n        )\n      }\n    }\n  }, [iconLeft, iconRight, variantProp])\n\n  const resolvedStartIcon = startIcon ?? iconLeft\n  const resolvedEndIcon = endIcon ?? iconRight\n\n  const styles = useStyleConfig('Tag', { ...props, variant: resolvedVariant })\n  const {\n    h,\n    fontSize: themeFontSize,\n    paddingX = 0,\n    paddingY = 0,\n    gapX = 0,\n    borderRadius,\n    bgHover,\n    bgPressed,\n    ...containerColors\n  } = styles.container ?? {}\n  const dismissStyles = styles.dismiss ?? {}\n  const iconStyles = styles.icon ?? {}\n\n  const resolvedFontSize = fontSizes[themeFontSize as keyof typeof fontSizes] ?? themeFontSize\n  const fontSize = `var(--vui-tag-font-size, ${resolvedFontSize}px)`\n\n  const resolvedIconSize = iconStyles.fontSize || '1rem'\n  const iconSize = `var(--vui-tag-icon-size, ${resolvedIconSize})`\n\n  const TagIcon = ({ name, mr, ml }: { name: string; mr?: string; ml?: string }) => (\n    <Icon className=\"vui-tagIcon\" fontSize={iconSize} h={iconSize} ml={ml} mr={mr} w={iconSize} name={name} />\n  )\n\n  // Theme numeric values are raw pixel measurements (mirrors button/theme.ts).\n  // Convert to px strings to bypass xstyled's `spaces` scale lookup on padding/gap props.\n  const toPx = (v: unknown) => (typeof v === 'number' ? `${v}px` : v)\n  const pxX = toPx(paddingX)\n  const pxY = toPx(paddingY)\n  const pxGap = toPx(gapX)\n\n  const aliasedProps = filterUndefined({\n    borderRadius,\n  })\n\n  const interactiveStateProps = isInteractive\n    ? filterUndefined({\n        hoverBg: bgHover,\n        activeBg: bgPressed,\n      })\n    : undefined\n\n  const interactiveProps = isInteractive\n    ? {\n        as: 'button' as const,\n        type: 'button' as const,\n        cursor: 'pointer',\n        tabIndex: 0,\n        userSelect: 'none',\n      }\n    : {}\n\n  return (\n    <TagBase\n      className={cs('vui-tag', className)}\n      focusRing={2}\n      fontSize={fontSize}\n      h={h}\n      isTruncated={isTruncated}\n      onClick={onClick}\n      px={pxX}\n      py={pxY}\n      ref={ref}\n      variant={resolvedVariant}\n      {...containerColors}\n      {...interactiveProps}\n      {...interactiveStateProps}\n      {...aliasedProps}\n      {...rest}\n    >\n      {isString(icon) ? <TagIcon name={icon} /> : icon}\n\n      {!icon && (\n        <>\n          {itemLeft}\n\n          {isString(resolvedStartIcon) ? (\n            <TagIcon name={resolvedStartIcon} mr={pxGap as string} />\n          ) : (\n            resolvedStartIcon\n          )}\n\n          {children ??\n            (isReactText(text) ? (\n              <T className=\"vui-tagText\" fontSize=\"inherit\" isTruncated={isTruncated}>\n                {text}\n              </T>\n            ) : (\n              text\n            ))}\n\n          {isString(resolvedEndIcon) ? (\n            <TagIcon name={resolvedEndIcon} ml={pxGap as string} />\n          ) : (\n            resolvedEndIcon\n          )}\n\n          {onDelete && !isInteractive ? (\n            <DismissButton\n              aria-label={deleteLabel}\n              className=\"vui-tagButton\"\n              ml={pxGap}\n              onClick={onDelete}\n              {...dismissStyles}\n            />\n          ) : (\n            itemRight\n          )}\n        </>\n      )}\n    </TagBase>\n  )\n}) as VuiComponent<'span', TagProps>\n\nTag.displayName = 'Tag'\n\nexport default Tag\n"],"mappings":";;;;;;;;;;;;;;;;AAiBA,MAAM,UAAU,OAAO,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;AA8B9B,MAAa,MAAM,KAAuB,OAAO,QAAQ;CACvD,MAAM,EACJ,UACA,WACA,cAAc,UACd,MACA,WACA,SACA,UACA,WACA,QAAQ,YACR,gBAAgB,MAAM,YAAY,UAAa,MAAM,aAAa,QAClE,cAAc,MACd,UACA,WACA,SACA,UACA,OAAO,MACP,MACA,SAAS,aACT,GAAG,SACD;CAGJ,MAAM,kBAAkB,cAChB,qBAAqB,aAAa,UAAU,GAClD,CAAC,aAAa,UAAU,CAC1B;CAGA,gBAAgB;EAEZ,IAAI,aAAa,QACf,QAAQ,KAAK,0DAA0D;EAEzE,IAAI,cAAc,QAChB,QAAQ,KAAK,yDAAyD;EAExE,IACE,gBAAgB,UAChB,CAAC,CAAC,UAAU,OAAO,CAAC,CAAC,SAAS,WAAW,KACzC,qFAAqF,KAAK,WAAW,GAErG,QAAQ,KACN,2BAA2B,YAAY,6GAEzC;CAGN,GAAG;EAAC;EAAU;EAAW;CAAW,CAAC;CAErC,MAAM,oBAAoB,aAAa;CACvC,MAAM,kBAAkB,WAAW;CAEnC,MAAM,SAAS,eAAe,OAAO;EAAE,GAAG;EAAO,SAAS;CAAgB,CAAC;CAC3E,MAAM,EACJ,GACA,UAAU,eACV,WAAW,GACX,WAAW,GACX,OAAO,GACP,cACA,SACA,WACA,GAAG,oBACD,OAAO,aAAa,CAAC;CACzB,MAAM,gBAAgB,OAAO,WAAW,CAAC;CACzC,MAAM,aAAa,OAAO,QAAQ,CAAC;CAGnC,MAAM,WAAW,4BADQA,kBAAU,kBAA4C,cACjB;CAG9D,MAAM,WAAW,4BADQ,WAAW,YAAY,OACc;CAE9D,MAAM,WAAW,EAAE,MAAM,IAAI,SAC3B,oBAAC,MAAD;EAAM,WAAU;EAAc,UAAU;EAAU,GAAG;EAAc;EAAQ;EAAI,GAAG;EAAgB;CAAO;CAK3G,MAAM,QAAQ,MAAgB,OAAO,MAAM,WAAW,GAAG,EAAE,MAAM;CACjE,MAAM,MAAM,KAAK,QAAQ;CACzB,MAAM,MAAM,KAAK,QAAQ;CACzB,MAAM,QAAQ,KAAK,IAAI;CAEvB,MAAM,eAAe,gBAAgB,EACnC,aACF,CAAC;CAED,MAAM,wBAAwB,gBAC1B,gBAAgB;EACd,SAAS;EACT,UAAU;CACZ,CAAC,IACD;CAEJ,MAAM,mBAAmB,gBACrB;EACE,IAAI;EACJ,MAAM;EACN,QAAQ;EACR,UAAU;EACV,YAAY;CACd,IACA,CAAC;CAEL,OACE,qBAAC,SAAD;EACE,WAAW,GAAG,WAAW,SAAS;EAClC,WAAW;EACD;EACP;EACU;EACJ;EACT,IAAI;EACJ,IAAI;EACC;EACL,SAAS;EACT,GAAI;EACJ,GAAI;EACJ,GAAI;EACJ,GAAI;EACJ,GAAI;YAfN,CAiBG,SAAS,IAAI,IAAI,oBAAC,SAAD,EAAS,MAAM,KAAO,KAAI,MAE3C,CAAC,QACA;GACG;GAEA,SAAS,iBAAiB,IACzB,oBAAC,SAAD;IAAS,MAAM;IAAmB,IAAI;GAAkB,KAExD;GAGD,aACE,YAAY,IAAI,IACf,oBAAC,GAAD;IAAG,WAAU;IAAc,UAAS;IAAuB;cACxD;GACA,KAEH;GAGH,SAAS,eAAe,IACvB,oBAAC,SAAD;IAAS,MAAM;IAAiB,IAAI;GAAkB,KAEtD;GAGD,YAAY,CAAC,gBACZ,oBAAC,eAAD;IACE,cAAY;IACZ,WAAU;IACV,IAAI;IACJ,SAAS;IACT,GAAI;GACL,KAED;EAEF,IAEG;;AAEb,CAAC;AAED,IAAI,cAAc"}

package/dist/tag/tag.types.d.ts

@@ -1,30 +1,68 @@
+import { AnyString } from "../utils/types.js";
 import { ThemingProps } from "../theme/types.js";
-import { TypographyProps } from "../system/typography.js";
 import { SystemProps } from "../system/system.js";
 import { IconProp } from "../icon/icon.types.js";
 import { JSX } from "react";
 
 //#region src/tag/tag.types.d.ts
+/** Visual hierarchy of the tag. */
+type TagHierarchy = 'subtle' | 'solid';
+/** Semantic intent / colour family of the tag. */
+type TagIntent = 'brand' | 'success' | 'danger' | 'warning' | 'lavender' | 'eucalyptus' | 'terracotta' | 'grey';
+/** Fully-qualified canonical variant keys (generated by theme.ts). */
+type TagVariantCanonical = 'subtleBrand' | 'subtleSuccess' | 'subtleDanger' | 'subtleWarning' | 'subtleLavender' | 'subtleEucalyptus' | 'subtleTerracotta' | 'subtleGrey' | 'solidBrand' | 'solidSuccess' | 'solidDanger' | 'solidWarning' | 'solidLavender' | 'solidEucalyptus' | 'solidTerracotta' | 'solidGrey';
+/** Token block per intent used by the generated theme approach. */
+interface TagIntentTokens {
+  solid: string;
+  solidHover: string;
+  solidPressed: string;
+  solidInverse: string;
+  subtle: string;
+  subtleHover: string;
+  subtlePressed: string;
+  subtleInverse: string;
+}
+/** Shape of a single container token object in a theme variant. */
+interface TagContainerStyles {
+  bg?: string;
+  color?: string;
+  /** Hover background applied when the tag is interactive. */
+  bgHover?: string;
+  /** Pressed (active) background applied when the tag is interactive. */
+  bgPressed?: string;
+  borderRadius?: string | number;
+  paddingX?: number;
+  paddingY?: number;
+  gapX?: number;
+  [key: string]: unknown;
+}
 type TagInnerProps = {
-  /** Alias for textTransform prop. @deprecated */casing?: TypographyProps['textTransform']; /** Available theme colors for this component. @deprecated */
-  colorScheme?: 'blue' | 'green' | 'grey' | 'prussian' | 'red' | 'yellow'; /** Displays tag and its content in disabled state with appropriate styling. */
-  disabled?: boolean; /** Icon that replaces any other content. */
+  /**
+   * Semantic intent (colour family) of the tag. Used together with `variant`.
+   * When both are set the resolved theme key is `${variant}${Intent}` (e.g. `subtleBrand`).
+   */
+  intent?: TagIntent | AnyString; /** Accessible label for the dismiss button when `onDelete` is provided. @default 'Remove' */
+  deleteLabel?: string; /** Icon that replaces any other content. */
   icon?: IconProp | JSX.Element; /** Icon displayed on the leading (left) side of the content. */
   startIcon?: IconProp | JSX.Element; /** Icon displayed on the trailing (right) side of the content. */
   endIcon?: IconProp | JSX.Element; /** Deprecated alias for `startIcon`. @deprecated */
   iconLeft?: IconProp | JSX.Element; /** Deprecated alias for `endIcon`. @deprecated */
-  iconRight?: IconProp | JSX.Element; /** Makes the button take full width of the container. @deprecated */
-  isFullWidth?: boolean; /** Makes item clickable and focusable with appropriate styling. The tag will be automatically interactive if the onClick is defined and onDelete is undefined */
-  isInteractive?: boolean; /** Rounds the borders. @default false */
-  isRound?: boolean; /** Socket displaying a custom item on the left. */
-  itemLeft?: React.ReactNode; /** Socket displaying a custom item on right left. */
+  iconRight?: IconProp | JSX.Element; /** Makes item clickable and focusable with appropriate styling. The tag will be automatically interactive if `onClick` is defined and `onDelete` is undefined. */
+  isInteractive?: boolean; /** @default true */
+  isTruncated?: boolean; /** Socket displaying a custom item on the left. */
+  itemLeft?: React.ReactNode; /** Socket displaying a custom item on the right. */
   itemRight?: React.ReactNode; /** If provided, displays a remove button with this function as onClick. */
   onDelete?: (nativeEvent?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void; /** Socket displaying text as alternative to children. */
-  text?: React.ReactNode; /** Alias for fontWeight prop. @deprecated */
-  weight?: TypographyProps['fontWeight'];
+  text?: React.ReactNode;
+  /**
+   * Visual hierarchy of the tag. Accepts the canonical hierarchy values
+   * (`'subtle' | 'solid'`) or the fully-qualified canonical keys
+   * (e.g. `'subtleBrand'`).
+   */
+  variant?: TagHierarchy | TagVariantCanonical | AnyString;
 };
 type TagProps = SystemProps & ThemingProps<'Tag'> & TagInnerProps;
 //#endregion
-export { TagInnerProps, TagProps };
+export { TagContainerStyles, TagHierarchy, TagInnerProps, TagIntent, TagIntentTokens, TagProps, TagVariantCanonical };
 
 //# sourceMappingURL=tag.types.d.ts.map

package/dist/tag/tag.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tag.types.d.ts","names":[],"sources":["../../src/tag/tag.types.ts"],"mappings":";;;;;;;KAMY,aAAA;kDAEV,MAAA,GAAS,eAAA;EAET,WAAA;EAEA,QAAA,YANuB;EAQvB,IAAA,GAAO,QAAA,GAAW,GAAA,CAAI,OAAA,EANb;EAQT,SAAA,GAAY,QAAA,GAAW,GAAA,CAAI,OAAA,EAFT;EAIlB,OAAA,GAAU,QAAA,GAAW,GAAA,CAAI,OAAA,EAFF;EAIvB,QAAA,GAAW,QAAA,GAAW,GAAA,CAAI,OAAA,EAFL;EAIrB,SAAA,GAAY,QAAA,GAAW,GAAA,CAAI,OAAA,EAFL;EAItB,WAAA,YAFuB;EAIvB,aAAA,YAMY;EAJZ,OAAA,YAM8D;EAJ9D,QAAA,GAAW,KAAA,CAAM,SAAA,EAMV;EAJP,SAAA,GAAY,KAAA,CAAM,SAAA,EAMM;EAJxB,QAAA,IAAY,WAAA,GAAc,KAAA,CAAM,UAAA,CAAW,iBAAA,EAAmB,UAAA,YA1B9D;EA4BA,IAAA,GAAO,KAAA,CAAM,SAAA,EA1Bb;EA4BA,MAAA,GAAS,eAAA;AAAA;AAAA,KAGC,QAAA,GAAW,WAAA,GAAc,YAAA,UAAsB,aAAA"}
+{"version":3,"file":"tag.types.d.ts","names":[],"sources":["../../src/tag/tag.types.ts"],"mappings":";;;;;;;;KAYY,YAAA;;KAGA,SAAA;;KAGA,mBAAA;AANZ;AAAA,UAyBiB,eAAA;EACf,KAAA;EACA,UAAA;EACA,YAAA;EACA,YAAA;EACA,MAAA;EACA,WAAA;EACA,aAAA;EACA,aAAA;AAAA;;UAIe,kBAAA;EACf,EAAA;EACA,KAAA;EAde;EAgBf,OAAA;;EAEA,SAAA;EACA,YAAA;EACA,QAAA;EACA,QAAA;EACA,IAAA;EAAA,CACC,GAAA;AAAA;AAAA,KAKS,aAAA;EApBV;;AAAa;AAIf;EAqBE,MAAA,GAAS,SAAA,GAAY,SAAA;EAErB,WAAA,WAtBA;EAwBA,IAAA,GAAO,QAAA,GAAW,GAAA,CAAI,OAAA,EArBtB;EAuBA,SAAA,GAAY,QAAA,GAAW,GAAA,CAAI,OAAA,EApB3B;EAsBA,OAAA,GAAU,QAAA,GAAW,GAAA,CAAI,OAAA,EApBzB;EAsBA,QAAA,GAAW,QAAA,GAAW,GAAA,CAAI,OAAA,EApBzB;EAsBD,SAAA,GAAY,QAAA,GAAW,GAAA,CAAI,OAAA,EAtBf;EAwBZ,aAAA,YAnBuB;EAqBvB,WAAA,YAhBS;EAkBT,QAAA,GAAW,KAAA,CAAM,SAAA,EAdV;EAgBP,SAAA,GAAY,KAAA,CAAM,SAAA,EAdN;EAgBZ,QAAA,IAAY,WAAA,GAAc,KAAA,CAAM,UAAA,CAAW,iBAAA,EAAmB,UAAA,YAdpD;EAgBV,IAAA,GAAO,KAAA,CAAM,SAAA;EAdF;;;;;EAoBX,OAAA,GAAU,YAAA,GAAe,mBAAA,GAAsB,SAAA;AAAA;AAAA,KAGrC,QAAA,GAAW,WAAA,GAAc,YAAA,UAAsB,aAAA"}