@knkcs/anker 1.9.4 → 1.10.1

package/CLAUDE-ANKER.md

@@ -90,6 +90,37 @@ Full spec with composition diagrams, slot tables, and authoring rules: `docs/pag
 
 ---
 
+## DataTable cells
+
+anker ships 16 reusable cell components for `<DataTable>` columns under `@knkcs/anker/components/data-table/cells`. **Use cells before composing primitives.** Inline `<Badge>` / `<Box>` / `<Text>` / `<Tooltip>` cell content fragments the visual language and silently misses later improvements (a11y, dark mode, density).
+
+**Rule:** cells are the contract — if no cell fits, file an issue and propose a new cell. Don't hand-roll.
+
+| Cell | Use for |
+|---|---|
+| `ActionCell` | row action icons |
+| `BooleanCell` | yes/no |
+| `CodeCell` | monospace code |
+| `ColorSwatchCell` | color swatch |
+| `CountCell` | "N items" |
+| `DateCell` | timestamps |
+| `DeviceCell` | User-Agent → browser/OS + tooltip |
+| `IdentityCell` | avatar + name (+ subText) |
+| `LinkCell` | internal link |
+| `MenuCell` | row overflow menu |
+| `NumberCell` | numbers |
+| `SlugCell` | mono IDs |
+| `StatusBadgeCell` | status pill (+ optional `tooltip`) |
+| `SwitchCell` | inline toggle |
+| `TruncatedTextCell` | text (+ optional `subText`, `maxLength`) |
+| `UrlCell` | external URL |
+
+Import path: `@knkcs/anker/components/data-table/cells`.
+
+Full slot/prop tables: `docs/react-table-reference.md`. Mapping guide for common column intents: `docs/page-patterns.md` §11.13.
+
+---
+
 ## Pointers
 
 - Full spec: anker GitHub Pages docs site (`/design-system`, `/page-patterns`)

package/dist/atoms/index.js

@@ -1,7 +1,7 @@
-import { Prose, Avatar } from '../chunk-ZFBDVERP.js';
-import { formatRelativeToCurrentWeekDateTime, formatRelativeDateTime } from '../chunk-NQN6LXYU.js';
-export { StatusBadge, formatRelativeDateTime, formatRelativeToCurrentWeekDateTime } from '../chunk-NQN6LXYU.js';
-import { Tooltip, Table, MenuRoot, MenuTrigger, MenuContent, MenuItem, Badge } from '../chunk-2QFOWHTU.js';
+import { Prose } from '../chunk-VOGT33LU.js';
+import { formatRelativeToCurrentWeekDateTime, formatRelativeDateTime } from '../chunk-ELQTHWXC.js';
+export { StatusBadge, formatRelativeDateTime, formatRelativeToCurrentWeekDateTime } from '../chunk-ELQTHWXC.js';
+import { Tooltip, Avatar, Table, MenuRoot, MenuTrigger, MenuContent, MenuItem, Badge } from '../chunk-2ZWZ2WAS.js';
 export { SearchInput } from '../chunk-E7KRPPCQ.js';
 import { Textarea } from '../chunk-NFZMG6ZL.js';
 import { text_input_default } from '../chunk-OU6H3KU4.js';

package/dist/{chunk-2QFOWHTU.js → chunk-2ZWZ2WAS.js}

@@ -1,9 +1,23 @@
-import { Menu, Portal, AbsoluteCenter, Tooltip as Tooltip$1 } from '@chakra-ui/react';
+import { AvatarGroup as AvatarGroup$1, Menu, Avatar as Avatar$1, Portal, AbsoluteCenter, Tooltip as Tooltip$1 } from '@chakra-ui/react';
 export { Badge, Table } from '@chakra-ui/react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { Check, ChevronRight } from 'lucide-react';
-import { jsx, jsxs } from 'react/jsx-runtime';
 
-// src/primitives/badge.tsx
+// src/primitives/avatar.tsx
+var Avatar = function Avatar2({
+  ref,
+  ...props
+}) {
+  const { name, src, srcSet, loading, icon, fallback, children, ...rest } = props;
+  return /* @__PURE__ */ jsxs(Avatar$1.Root, { ref, ...rest, children: [
+    /* @__PURE__ */ jsx(Avatar$1.Fallback, { name, children: icon || fallback }),
+    /* @__PURE__ */ jsx(Avatar$1.Image, { src, srcSet, loading }),
+    children
+  ] });
+};
+Avatar.displayName = "Avatar";
+var AvatarGroup = AvatarGroup$1;
+AvatarGroup.displayName = "AvatarGroup";
 var MenuContent = function MenuContent2({
   ref,
   ...props
@@ -104,6 +118,6 @@ var Tooltip = function Tooltip2({
 };
 Tooltip.displayName = "Tooltip";
 
-export { MenuArrow, MenuCheckboxItem, MenuContent, MenuContextTrigger, MenuItem, MenuItemCommand, MenuItemGroup, MenuItemText, MenuRadioItem, MenuRadioItemGroup, MenuRoot, MenuSeparator, MenuTrigger, MenuTriggerItem, Tooltip };
-//# sourceMappingURL=chunk-2QFOWHTU.js.map
-//# sourceMappingURL=chunk-2QFOWHTU.js.map
+export { Avatar, AvatarGroup, MenuArrow, MenuCheckboxItem, MenuContent, MenuContextTrigger, MenuItem, MenuItemCommand, MenuItemGroup, MenuItemText, MenuRadioItem, MenuRadioItemGroup, MenuRoot, MenuSeparator, MenuTrigger, MenuTriggerItem, Tooltip };
+//# sourceMappingURL=chunk-2ZWZ2WAS.js.map
+//# sourceMappingURL=chunk-2ZWZ2WAS.js.map

package/dist/chunk-2ZWZ2WAS.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/primitives/avatar.tsx","../src/primitives/menu.tsx","../src/primitives/tooltip.tsx"],"names":["Avatar","ChakraAvatar","ChakraAvatarGroup","MenuContent","jsx","ChakraMenu","MenuArrow","MenuCheckboxItem","jsxs","MenuRadioItem","MenuItemGroup","MenuTriggerItem","Tooltip","ChakraTooltip","Portal"],"mappings":"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","file":"chunk-2ZWZ2WAS.js","sourcesContent":["import {\n\tAvatar as ChakraAvatar,\n\tAvatarGroup as ChakraAvatarGroup,\n} from \"@chakra-ui/react\";\nimport type * as React from \"react\";\n\ntype ImageProps = React.ImgHTMLAttributes<HTMLImageElement>;\n\nexport interface AvatarProps extends ChakraAvatar.RootProps {\n\t/** Display name used to generate initials for the fallback. */\n\tname?: string;\n\t/** Image source URL. */\n\tsrc?: string;\n\t/** Image srcSet attribute for responsive images. */\n\tsrcSet?: string;\n\t/** Image loading strategy. */\n\tloading?: ImageProps[\"loading\"];\n\t/** Custom icon element shown as fallback. */\n\ticon?: React.ReactElement;\n\t/** Custom fallback content when no image or icon is provided. */\n\tfallback?: React.ReactNode;\n}\n\nexport const Avatar = function Avatar({\n\tref,\n\t...props\n}: AvatarProps & { ref?: React.Ref<HTMLDivElement> }) {\n\tconst { name, src, srcSet, loading, icon, fallback, children, ...rest } =\n\t\tprops;\n\treturn (\n\t\t<ChakraAvatar.Root ref={ref} {...rest}>\n\t\t\t<ChakraAvatar.Fallback name={name}>\n\t\t\t\t{icon || fallback}\n\t\t\t</ChakraAvatar.Fallback>\n\t\t\t<ChakraAvatar.Image src={src} srcSet={srcSet} loading={loading} />\n\t\t\t{children}\n\t\t</ChakraAvatar.Root>\n\t);\n};\nAvatar.displayName = \"Avatar\";\n\nexport const AvatarGroup = ChakraAvatarGroup;\nAvatarGroup.displayName = \"AvatarGroup\";\n","\"use client\";\n\nimport { AbsoluteCenter, Menu as ChakraMenu, Portal } from \"@chakra-ui/react\";\nimport { Check, ChevronRight } from \"lucide-react\";\nimport type * as React from \"react\";\n\ninterface MenuContentProps extends ChakraMenu.ContentProps {\n\t/** Whether to render the menu content inside a portal. @default true */\n\tportalled?: boolean;\n\t/** Container ref for the portal. */\n\tportalRef?: React.RefObject<HTMLElement | null>;\n}\n\nexport const MenuContent = function MenuContent({\n\tref,\n\t...props\n}: MenuContentProps & { ref?: React.Ref<HTMLDivElement> }) {\n\tconst { portalled = true, portalRef, ...rest } = props;\n\treturn (\n\t\t<Portal disabled={!portalled} container={portalRef}>\n\t\t\t<ChakraMenu.Positioner>\n\t\t\t\t<ChakraMenu.Content ref={ref} {...rest} />\n\t\t\t</ChakraMenu.Positioner>\n\t\t</Portal>\n\t);\n};\nMenuContent.displayName = \"MenuContent\";\n\nexport const MenuArrow = function MenuArrow({\n\tref,\n\t...props\n}: ChakraMenu.ArrowProps & { ref?: React.Ref<HTMLDivElement> }) {\n\treturn (\n\t\t<ChakraMenu.Arrow ref={ref} {...props}>\n\t\t\t<ChakraMenu.ArrowTip />\n\t\t</ChakraMenu.Arrow>\n\t);\n};\nMenuArrow.displayName = \"MenuArrow\";\n\nexport const MenuCheckboxItem = function MenuCheckboxItem({\n\tref,\n\t...props\n}: ChakraMenu.CheckboxItemProps & { ref?: React.Ref<HTMLDivElement> }) {\n\treturn (\n\t\t<ChakraMenu.CheckboxItem ps=\"8\" ref={ref} {...props}>\n\t\t\t<AbsoluteCenter axis=\"horizontal\" insetStart=\"4\" asChild>\n\t\t\t\t<ChakraMenu.ItemIndicator>\n\t\t\t\t\t<Check />\n\t\t\t\t</ChakraMenu.ItemIndicator>\n\t\t\t</AbsoluteCenter>\n\t\t\t{props.children}\n\t\t</ChakraMenu.CheckboxItem>\n\t);\n};\nMenuCheckboxItem.displayName = \"MenuCheckboxItem\";\n\nexport const MenuRadioItem = function MenuRadioItem({\n\tref,\n\t...props\n}: ChakraMenu.RadioItemProps & { ref?: React.Ref<HTMLDivElement> }) {\n\tconst { children, ...rest } = props;\n\treturn (\n\t\t<ChakraMenu.RadioItem ps=\"8\" ref={ref} {...rest}>\n\t\t\t<AbsoluteCenter axis=\"horizontal\" insetStart=\"4\" asChild>\n\t\t\t\t<ChakraMenu.ItemIndicator>\n\t\t\t\t\t<Check />\n\t\t\t\t</ChakraMenu.ItemIndicator>\n\t\t\t</AbsoluteCenter>\n\t\t\t<ChakraMenu.ItemText>{children}</ChakraMenu.ItemText>\n\t\t</ChakraMenu.RadioItem>\n\t);\n};\nMenuRadioItem.displayName = \"MenuRadioItem\";\n\nexport const MenuItemGroup = function MenuItemGroup({\n\tref,\n\t...props\n}: ChakraMenu.ItemGroupProps & { ref?: React.Ref<HTMLDivElement> }) {\n\tconst { title, children, ...rest } = props;\n\treturn (\n\t\t<ChakraMenu.ItemGroup ref={ref} {...rest}>\n\t\t\t{title && (\n\t\t\t\t<ChakraMenu.ItemGroupLabel userSelect=\"none\">\n\t\t\t\t\t{title}\n\t\t\t\t</ChakraMenu.ItemGroupLabel>\n\t\t\t)}\n\t\t\t{children}\n\t\t</ChakraMenu.ItemGroup>\n\t);\n};\nMenuItemGroup.displayName = \"MenuItemGroup\";\n\nexport interface MenuTriggerItemProps extends ChakraMenu.ItemProps {\n\t/** Icon rendered before the trigger item label. */\n\tstartIcon?: React.ReactNode;\n}\n\nexport const MenuTriggerItem = function MenuTriggerItem({\n\tref,\n\t...props\n}: MenuTriggerItemProps & { ref?: React.Ref<HTMLDivElement> }) {\n\tconst { startIcon, children, ...rest } = props;\n\treturn (\n\t\t<ChakraMenu.TriggerItem ref={ref} {...rest}>\n\t\t\t{startIcon}\n\t\t\t{children}\n\t\t\t<ChevronRight />\n\t\t</ChakraMenu.TriggerItem>\n\t);\n};\nMenuTriggerItem.displayName = \"MenuTriggerItem\";\n\nexport const MenuRadioItemGroup = ChakraMenu.RadioItemGroup;\nMenuRadioItemGroup.displayName = \"MenuRadioItemGroup\";\nexport const MenuContextTrigger = ChakraMenu.ContextTrigger;\nMenuContextTrigger.displayName = \"MenuContextTrigger\";\nexport const MenuRoot = ChakraMenu.Root;\nMenuRoot.displayName = \"MenuRoot\";\nexport const MenuSeparator = ChakraMenu.Separator;\nMenuSeparator.displayName = \"MenuSeparator\";\n\nexport const MenuItem = ChakraMenu.Item;\nMenuItem.displayName = \"MenuItem\";\nexport const MenuItemText = ChakraMenu.ItemText;\nMenuItemText.displayName = \"MenuItemText\";\nexport const MenuItemCommand = ChakraMenu.ItemCommand;\nMenuItemCommand.displayName = \"MenuItemCommand\";\nexport const MenuTrigger = ChakraMenu.Trigger;\nMenuTrigger.displayName = \"MenuTrigger\";\n","import { Tooltip as ChakraTooltip, Portal } from \"@chakra-ui/react\";\nimport type * as React from \"react\";\n\nexport interface TooltipProps extends ChakraTooltip.RootProps {\n\tshowArrow?: boolean;\n\tportalled?: boolean;\n\tportalRef?: React.RefObject<HTMLElement | null>;\n\tcontent: React.ReactNode;\n\tcontentProps?: ChakraTooltip.ContentProps;\n\tdisabled?: boolean;\n}\n\nexport const Tooltip = function Tooltip({\n\tref,\n\t...props\n}: TooltipProps & { ref?: React.Ref<HTMLDivElement> }) {\n\tconst {\n\t\tshowArrow,\n\t\tchildren,\n\t\tdisabled,\n\t\tportalled = true,\n\t\tcontent,\n\t\tcontentProps,\n\t\tportalRef,\n\t\t...rest\n\t} = props;\n\n\tif (disabled) return children;\n\n\treturn (\n\t\t<ChakraTooltip.Root {...rest}>\n\t\t\t<ChakraTooltip.Trigger asChild>{children}</ChakraTooltip.Trigger>\n\t\t\t<Portal disabled={!portalled} container={portalRef}>\n\t\t\t\t<ChakraTooltip.Positioner>\n\t\t\t\t\t<ChakraTooltip.Content ref={ref} {...contentProps}>\n\t\t\t\t\t\t{showArrow && (\n\t\t\t\t\t\t\t<ChakraTooltip.Arrow>\n\t\t\t\t\t\t\t\t<ChakraTooltip.ArrowTip />\n\t\t\t\t\t\t\t</ChakraTooltip.Arrow>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{content}\n\t\t\t\t\t</ChakraTooltip.Content>\n\t\t\t\t</ChakraTooltip.Positioner>\n\t\t\t</Portal>\n\t\t</ChakraTooltip.Root>\n\t);\n};\nTooltip.displayName = \"Tooltip\";\n"]}

package/dist/{chunk-NQN6LXYU.js → chunk-ELQTHWXC.js}

@@ -1,4 +1,4 @@
-import { Badge } from './chunk-2QFOWHTU.js';
+import { Badge } from './chunk-2ZWZ2WAS.js';
 import dayjs from 'dayjs';
 import calendarPlugin from 'dayjs/plugin/calendar.js';
 import relativeTime from 'dayjs/plugin/relativeTime.js';
@@ -46,5 +46,5 @@ var StatusBadge = (props) => {
 StatusBadge.displayName = "StatusBadge";
 
 export { StatusBadge, formatRelativeDateTime, formatRelativeToCurrentWeekDateTime };
-//# sourceMappingURL=chunk-NQN6LXYU.js.map
-//# sourceMappingURL=chunk-NQN6LXYU.js.map
+//# sourceMappingURL=chunk-ELQTHWXC.js.map
+//# sourceMappingURL=chunk-ELQTHWXC.js.map

package/dist/{chunk-NQN6LXYU.js.map → chunk-ELQTHWXC.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/atoms/datetime/utils/relative-date-time-utils.ts","../src/atoms/status-badge/status-badge.tsx"],"names":[],"mappings":";;;;;;;;;AAKA,KAAA,CAAM,OAAO,SAAS,CAAA;AACtB,KAAA,CAAM,OAAO,YAAY,CAAA;AACzB,KAAA,CAAM,OAAO,cAAc,CAAA;AAmBpB,SAAS,sBAAA,CACf,IAAA,EACA,QAAA,mBAAqB,IAAI,MAAK,EAC7B;AACD,EAAA,OAAO,KAAA,CAAM,IAAI,CAAA,CAAE,IAAA,CAAK,QAAQ,CAAA;AACjC;AAmBO,SAAS,mCAAA,CACf,IAAA,EACA,QAAA,mBAAqB,IAAI,MAAK,EAC7B;AACD,EAAA,MAAM,UAAU,KAAA,CAAM,IAAI,CAAA,CAAE,MAAA,CAAO,UAAU,KAAK,CAAA;AAElD,EAAA,IAAI,CAAC,OAAA,EAAS;AAGb,IAAA,OAAO,KAAA,CAAM,IAAI,CAAA,CAAE,QAAA,CAAS,QAAA,EAAU;AAAA,MACrC,QAAA,EAAU;AAAA,KACV,CAAA;AAAA,EACF;AAGA,EAAA,OAAO,sBAAA,CAAuB,MAAM,QAAQ,CAAA;AAC7C;ACtDO,IAAM,WAAA,GAA0C,CAAC,KAAA,KAAU;AACjE,EAAA,MAAM,EAAE,KAAA,EAAO,KAAA,EAAM,GAAI,KAAA;AAEzB,EAAA,MAAM,SAAA,GAAY,QAAQ,MAAM;AAC/B,IAAA,IAAI;AACH,MAAA,OAAO,cAAc,KAAK,CAAA;AAAA,IAC3B,CAAA,CAAA,MAAQ;AACP,MAAA,OAAO,OAAA;AAAA,IACR;AAAA,EACD,CAAA,EAAG,CAAC,KAAK,CAAC,CAAA;AAEV,EAAA,uBACC,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACA,EAAA,EAAI,KAAA;AAAA,MACJ,KAAA,EAAO,SAAA;AAAA,MACP,OAAA,EAAQ,MAAA;AAAA,MACR,EAAA,EAAI,CAAA;AAAA,MACJ,iBAAA,EAAmB,CAAA;AAAA,MAElB,QAAA,EAAA;AAAA;AAAA,GACF;AAEF;AAEA,WAAA,CAAY,WAAA,GAAc,aAAA","file":"chunk-NQN6LXYU.js","sourcesContent":["import dayjs from \"dayjs\";\nimport calendarPlugin from \"dayjs/plugin/calendar.js\";\nimport relativeTime from \"dayjs/plugin/relativeTime.js\";\nimport utcPlugin from \"dayjs/plugin/utc.js\";\n\ndayjs.extend(utcPlugin);\ndayjs.extend(relativeTime);\ndayjs.extend(calendarPlugin);\n\nimport type { DateType } from \"../types\";\n\n/**\n * A function that will return a string with how far a given date is in the past or future,\n * using a baseDate as reference. If the baseDate is not passed, the function will use today as reference.\n *\n * @param date - the date to be formatted\n * @param baseDate - the date that should be used as a reference (default is \"today\")\n * @returns a relative date\n *\n * @example\n * // Considering today as 18.08.2021\n * formatRelativeDateTime('2021-08-17T15:45:00') // returns \"a day ago\"\n *\n * @example\n * formatRelativeDateTime('2021-08-17T15:45:00', '2021-08-16') // returns \"in a day\"\n */\nexport function formatRelativeDateTime(\n\tdate: DateType,\n\tbaseDate: DateType = new Date(),\n) {\n\treturn dayjs(date).from(baseDate);\n}\n\n/**\n * A function that formats a date relative to Today or to the `baseDate` if passed.\n * If the date is not today, it will return a string with \"Yesterday ...\", \"Tomorrow ...\", etc\n * If the date is not in the current week, it return a string with \"DD MMM YYYY\" format\n * If the date is today, it will return a string with \"... ago\" or \"in ...\"\n *\n * @param date - the date to be formatted\n * @param baseDate - the date that should be used as a reference (default is \"today\")\n * @returns a relative date\n *\n * @example\n * // Considering today as 18.08.2021\n * formatRelativeToCurrentWeekDateTime('2021-08-17T15:45:00') // returns \"Yesterday at 3:45 PM\"\n *\n * @example\n * formatRelativeToCurrentWeekDateTime('2021-08-17T15:45:00', '2021-08-16') // returns \"Tomorrow at 3:45 PM\"\n */\nexport function formatRelativeToCurrentWeekDateTime(\n\tdate: DateType,\n\tbaseDate: DateType = new Date(),\n) {\n\tconst isToday = dayjs(date).isSame(baseDate, \"day\");\n\n\tif (!isToday) {\n\t\t// if the date is not today, we display it with \"Yesterday\", \"Tomorrow\", etc.\n\t\t// and if the date is not in the current week then it will display \"17 Aug 2021\"\n\t\treturn dayjs(date).calendar(baseDate, {\n\t\t\tsameElse: \"DD MMM YYYY\",\n\t\t});\n\t}\n\n\t// returns \"... ago\"\n\treturn formatRelativeDateTime(date, baseDate);\n}\n","import { readableColor } from \"color2k\";\nimport type React from \"react\";\nimport { useMemo } from \"react\";\nimport { Badge } from \"../../primitives/badge\";\n\nexport interface StatusBadgeProps {\n\t/** The display label for the badge */\n\tlabel: string;\n\t/** The background color for the badge (hex format, e.g. \"#ff0000\") */\n\tcolor: string;\n}\n\nexport const StatusBadge: React.FC<StatusBadgeProps> = (props) => {\n\tconst { label, color } = props;\n\n\tconst textColor = useMemo(() => {\n\t\ttry {\n\t\t\treturn readableColor(color);\n\t\t} catch {\n\t\t\treturn \"black\";\n\t\t}\n\t}, [color]);\n\n\treturn (\n\t\t<Badge\n\t\t\tbg={color}\n\t\t\tcolor={textColor}\n\t\t\trounded=\"base\"\n\t\t\tpx={2}\n\t\t\tmarginInlineStart={1}\n\t\t>\n\t\t\t{label}\n\t\t</Badge>\n\t);\n};\n\nStatusBadge.displayName = \"StatusBadge\";\n"]}
+{"version":3,"sources":["../src/atoms/datetime/utils/relative-date-time-utils.ts","../src/atoms/status-badge/status-badge.tsx"],"names":[],"mappings":";;;;;;;;;AAKA,KAAA,CAAM,OAAO,SAAS,CAAA;AACtB,KAAA,CAAM,OAAO,YAAY,CAAA;AACzB,KAAA,CAAM,OAAO,cAAc,CAAA;AAmBpB,SAAS,sBAAA,CACf,IAAA,EACA,QAAA,mBAAqB,IAAI,MAAK,EAC7B;AACD,EAAA,OAAO,KAAA,CAAM,IAAI,CAAA,CAAE,IAAA,CAAK,QAAQ,CAAA;AACjC;AAmBO,SAAS,mCAAA,CACf,IAAA,EACA,QAAA,mBAAqB,IAAI,MAAK,EAC7B;AACD,EAAA,MAAM,UAAU,KAAA,CAAM,IAAI,CAAA,CAAE,MAAA,CAAO,UAAU,KAAK,CAAA;AAElD,EAAA,IAAI,CAAC,OAAA,EAAS;AAGb,IAAA,OAAO,KAAA,CAAM,IAAI,CAAA,CAAE,QAAA,CAAS,QAAA,EAAU;AAAA,MACrC,QAAA,EAAU;AAAA,KACV,CAAA;AAAA,EACF;AAGA,EAAA,OAAO,sBAAA,CAAuB,MAAM,QAAQ,CAAA;AAC7C;ACtDO,IAAM,WAAA,GAA0C,CAAC,KAAA,KAAU;AACjE,EAAA,MAAM,EAAE,KAAA,EAAO,KAAA,EAAM,GAAI,KAAA;AAEzB,EAAA,MAAM,SAAA,GAAY,QAAQ,MAAM;AAC/B,IAAA,IAAI;AACH,MAAA,OAAO,cAAc,KAAK,CAAA;AAAA,IAC3B,CAAA,CAAA,MAAQ;AACP,MAAA,OAAO,OAAA;AAAA,IACR;AAAA,EACD,CAAA,EAAG,CAAC,KAAK,CAAC,CAAA;AAEV,EAAA,uBACC,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACA,EAAA,EAAI,KAAA;AAAA,MACJ,KAAA,EAAO,SAAA;AAAA,MACP,OAAA,EAAQ,MAAA;AAAA,MACR,EAAA,EAAI,CAAA;AAAA,MACJ,iBAAA,EAAmB,CAAA;AAAA,MAElB,QAAA,EAAA;AAAA;AAAA,GACF;AAEF;AAEA,WAAA,CAAY,WAAA,GAAc,aAAA","file":"chunk-ELQTHWXC.js","sourcesContent":["import dayjs from \"dayjs\";\nimport calendarPlugin from \"dayjs/plugin/calendar.js\";\nimport relativeTime from \"dayjs/plugin/relativeTime.js\";\nimport utcPlugin from \"dayjs/plugin/utc.js\";\n\ndayjs.extend(utcPlugin);\ndayjs.extend(relativeTime);\ndayjs.extend(calendarPlugin);\n\nimport type { DateType } from \"../types\";\n\n/**\n * A function that will return a string with how far a given date is in the past or future,\n * using a baseDate as reference. If the baseDate is not passed, the function will use today as reference.\n *\n * @param date - the date to be formatted\n * @param baseDate - the date that should be used as a reference (default is \"today\")\n * @returns a relative date\n *\n * @example\n * // Considering today as 18.08.2021\n * formatRelativeDateTime('2021-08-17T15:45:00') // returns \"a day ago\"\n *\n * @example\n * formatRelativeDateTime('2021-08-17T15:45:00', '2021-08-16') // returns \"in a day\"\n */\nexport function formatRelativeDateTime(\n\tdate: DateType,\n\tbaseDate: DateType = new Date(),\n) {\n\treturn dayjs(date).from(baseDate);\n}\n\n/**\n * A function that formats a date relative to Today or to the `baseDate` if passed.\n * If the date is not today, it will return a string with \"Yesterday ...\", \"Tomorrow ...\", etc\n * If the date is not in the current week, it return a string with \"DD MMM YYYY\" format\n * If the date is today, it will return a string with \"... ago\" or \"in ...\"\n *\n * @param date - the date to be formatted\n * @param baseDate - the date that should be used as a reference (default is \"today\")\n * @returns a relative date\n *\n * @example\n * // Considering today as 18.08.2021\n * formatRelativeToCurrentWeekDateTime('2021-08-17T15:45:00') // returns \"Yesterday at 3:45 PM\"\n *\n * @example\n * formatRelativeToCurrentWeekDateTime('2021-08-17T15:45:00', '2021-08-16') // returns \"Tomorrow at 3:45 PM\"\n */\nexport function formatRelativeToCurrentWeekDateTime(\n\tdate: DateType,\n\tbaseDate: DateType = new Date(),\n) {\n\tconst isToday = dayjs(date).isSame(baseDate, \"day\");\n\n\tif (!isToday) {\n\t\t// if the date is not today, we display it with \"Yesterday\", \"Tomorrow\", etc.\n\t\t// and if the date is not in the current week then it will display \"17 Aug 2021\"\n\t\treturn dayjs(date).calendar(baseDate, {\n\t\t\tsameElse: \"DD MMM YYYY\",\n\t\t});\n\t}\n\n\t// returns \"... ago\"\n\treturn formatRelativeDateTime(date, baseDate);\n}\n","import { readableColor } from \"color2k\";\nimport type React from \"react\";\nimport { useMemo } from \"react\";\nimport { Badge } from \"../../primitives/badge\";\n\nexport interface StatusBadgeProps {\n\t/** The display label for the badge */\n\tlabel: string;\n\t/** The background color for the badge (hex format, e.g. \"#ff0000\") */\n\tcolor: string;\n}\n\nexport const StatusBadge: React.FC<StatusBadgeProps> = (props) => {\n\tconst { label, color } = props;\n\n\tconst textColor = useMemo(() => {\n\t\ttry {\n\t\t\treturn readableColor(color);\n\t\t} catch {\n\t\t\treturn \"black\";\n\t\t}\n\t}, [color]);\n\n\treturn (\n\t\t<Badge\n\t\t\tbg={color}\n\t\t\tcolor={textColor}\n\t\t\trounded=\"base\"\n\t\t\tpx={2}\n\t\t\tmarginInlineStart={1}\n\t\t>\n\t\t\t{label}\n\t\t</Badge>\n\t);\n};\n\nStatusBadge.displayName = \"StatusBadge\";\n"]}

package/dist/chunk-VOGT33LU.js

@@ -0,0 +1,18 @@
+import { useRecipe, chakra } from '@chakra-ui/react';
+import { jsx } from 'react/jsx-runtime';
+
+// src/primitives/prose.tsx
+var Prose = ({
+  ref,
+  size,
+  ...props
+}) => {
+  const recipe = useRecipe({ key: "prose" });
+  const styles = recipe({ size });
+  return /* @__PURE__ */ jsx(chakra.div, { ref, css: styles, ...props });
+};
+Prose.displayName = "Prose";
+
+export { Prose };
+//# sourceMappingURL=chunk-VOGT33LU.js.map
+//# sourceMappingURL=chunk-VOGT33LU.js.map

package/dist/chunk-VOGT33LU.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/primitives/prose.tsx"],"names":[],"mappings":";;;;AAOO,IAAM,QAAQ,CAAC;AAAA,EACrB,GAAA;AAAA,EACA,IAAA;AAAA,EACA,GAAG;AACJ,CAAA,KAAwD;AACvD,EAAA,MAAM,MAAA,GAAS,SAAA,CAAU,EAAE,GAAA,EAAK,SAAS,CAAA;AACzC,EAAA,MAAM,MAAA,GAAS,MAAA,CAAO,EAAE,IAAA,EAAM,CAAA;AAC9B,EAAA,uBAAO,GAAA,CAAC,OAAO,GAAA,EAAP,EAAW,KAAU,GAAA,EAAK,MAAA,EAAS,GAAG,KAAA,EAAO,CAAA;AACtD;AACA,KAAA,CAAM,WAAA,GAAc,OAAA","file":"chunk-VOGT33LU.js","sourcesContent":["import { chakra, type HTMLChakraProps, useRecipe } from \"@chakra-ui/react\";\nimport type React from \"react\";\n\nexport interface ProseProps extends HTMLChakraProps<\"div\"> {\n\tsize?: \"md\" | \"lg\";\n}\n\nexport const Prose = ({\n\tref,\n\tsize,\n\t...props\n}: ProseProps & { ref?: React.Ref<HTMLDivElement> }) => {\n\tconst recipe = useRecipe({ key: \"prose\" });\n\tconst styles = recipe({ size });\n\treturn <chakra.div ref={ref} css={styles} {...props} />;\n};\nProse.displayName = \"Prose\";\n"]}

package/dist/components/index.d.ts

@@ -241,6 +241,31 @@ interface DateCellProps {
 }
 declare const DateCell: React__default.FC<DateCellProps>;
 
+interface DeviceCellProps {
+    /** Raw User-Agent string. Null/empty renders the empty cell value. */
+    userAgent: string | null | undefined;
+    /** Optional badge displayed to the right of the primary line (e.g. "Current"). */
+    badge?: {
+        label: string;
+        colorPalette?: string;
+    };
+}
+declare const DeviceCell: React__default.FC<DeviceCellProps>;
+
+interface IdentityCellProps {
+    /** Primary display name. Null/undefined renders the empty cell value. */
+    name: string | null | undefined;
+    /** Optional secondary line below the name (e.g., email, ID). */
+    subText?: React__default.ReactNode;
+    /** Avatar image source URL. */
+    avatarSrc?: string;
+    /** Initials shown as the avatar fallback. Auto-derived from `name` when omitted. */
+    avatarFallback?: string;
+    /** Avatar size; defaults to "sm" to match table density. */
+    size?: "sm" | "md";
+}
+declare const IdentityCell: React__default.FC<IdentityCellProps>;
+
 interface LinkCellProps {
     /** Route path for navigation. Renders em-dash when null/undefined. */
     to: string | null | undefined;
@@ -297,6 +322,12 @@ interface StatusBadgeCellProps {
     detail?: string | null;
     /** Color for the detail text. @default "fg.error" */
     detailColor?: string;
+    /**
+     * Optional tooltip content shown on hover/focus over the badge. Useful
+     * for status descriptions, full JSON payloads, or contextual hints that
+     * don't fit on the badge label.
+     */
+    tooltip?: React__default.ReactNode;
 }
 declare const StatusBadgeCell: React__default.FC<StatusBadgeCellProps>;
 
@@ -313,6 +344,12 @@ declare const SwitchCell: React__default.FC<SwitchCellProps>;
 interface TruncatedTextCellProps {
     value: string | null | undefined;
     maxLength?: number;
+    /**
+     * Optional secondary line rendered below the primary value in smaller,
+     * muted text (e.g. "created 2 days ago", target ID, contextual hint).
+     * Sub-text is `lineClamp={1}` and is not affected by `maxLength`.
+     */
+    subText?: React__default.ReactNode;
 }
 declare const TruncatedTextCell: React__default.FC<TruncatedTextCellProps>;
 
@@ -322,6 +359,22 @@ interface UrlCellProps {
 }
 declare const UrlCell: React__default.FC<UrlCellProps>;
 
+/**
+ * Parse a User-Agent string into a coarse browser + OS label.
+ *
+ * Used by `DeviceCell` to render "Chrome on macOS" style labels in
+ * sessions / device lists. The matchers are intentionally simple —
+ * they cover the common power-user browsers (Chrome, Safari, Firefox,
+ * Edge, Opera) on the common platforms (macOS, Windows, iOS, Android,
+ * Linux). Unknown browsers return `"Unknown"`; unknown OSes return `""`.
+ */
+declare function parseUserAgent(ua: string | undefined | null): {
+    browser: string;
+    os: string;
+};
+/** Format a parsed UA into the "Chrome on macOS" style label. */
+declare function formatUserAgent(ua: string | undefined | null): string;
+
 interface DataTableProps<T extends Record<string, unknown>> {
     /** Column definitions for TanStack Table */
     columns: ColumnDef<T, unknown>[];
@@ -896,4 +949,4 @@ interface WidgetProps {
 }
 declare const Widget: React__default.FC<WidgetProps>;
 
-export { ActionCell, type ActionCellAction, type ActionCellProps, BooleanCell, type BooleanCellProps, BulkActionBar, type BulkActionBarProps, type BulkActionProps, type BulkPopoverActionProps, Card, CardList, CardListData, type CardListDataProps, CardListItem, type CardListItemProps, type CardListMenuItem, type CardListProps, type CardProps, ChipPicker, type ChipPickerProps, CodeCell, type CodeCellProps, ColorSwatchCell, type ColorSwatchCellProps, ContextRail, type ContextRailHeaderProps, type ContextRailProps, type ContextRailSectionProps, CountCell, type CountCellProps, DataTable, type DataTableProps, DateCell, type DateCellProps, type DrawerProps, DrawerRoot, FactBox, type FactBoxAction, type FactBoxProps, InlineCreatableList, type InlineCreatableListProps, LabeledSwitch, type LabeledSwitchProps, LinkCell, type LinkCellProps, MenuCell, type MenuCellAction, type MenuCellProps, Modal, type ModalProps, NumberCell, type NumberCellProps, Pagination, type PaginationProps, SelectableCard, type SelectableCardBodyProps, type SelectableCardFooterProps, type SelectableCardProps, type SelectableCardThumbnailProps, Sidebar, type SidebarItemProps, type SidebarLogoProps, type SidebarSectionProps$1 as SidebarNavSectionProps, type SidebarProps, SidebarSection, type SidebarSectionProps, type SidebarUserMenuItemProps, type SidebarUserMenuProps, SlugCell, type SlugCellProps, StatusBadgeCell, type StatusBadgeCellProps, Stepper, StepperCompleted, StepperContainer, StepperContent, type StepperContentProps, StepperIcon, type StepperIconProps, type StepperProps, StepperProvider, StepperSeparator, type StepperSeparatorProps, StepperStep, type StepperStepProps, StepperStepTitle, StepperSteps, type StepperStepsProps, SwitchCell, type SwitchCellProps, CardList as Table, CardListData as TableData, type CardListDataProps as TableDataProps, CardListItem as TableItem, type CardListItemProps as TableItemProps, type CardListMenuItem as TableMenuItem, type CardListProps as TableProps, TimelineConnector, TimelineContent, TimelineDescription, TimelineIndicator, TimelineItem, type TimelineItemProps, TimelineRoot, type TimelineRootProps, TimelineSeparator, TimelineTitle, Toolbar, type ToolbarFilterChipProps, type ToolbarSearchProps, TreeViewBranch, TreeViewBranchContent, TreeViewBranchControl, TreeViewBranchIndicator, type TreeViewBranchProps, TreeViewBranchText, TreeViewBranchTrigger, TreeViewItem, TreeViewItemIndicator, type TreeViewItemProps, TreeViewItemText, TreeViewLabel, TreeViewNode, TreeViewRoot, type TreeViewRootProps, TreeViewTree, TruncatedTextCell, type TruncatedTextCellProps, UploadDropZone, type UploadDropZoneProps, UrlCell, type UrlCellProps, type UseStepProps, type UseStepperProps, type UseStepperReturn, Widget, type WidgetProps, emptyCellValue, pluralize, truncateText, useSidebarContext, useStep, useStepper, useStepperContext, useStepperNextButton, useStepperPrevButton };
+export { ActionCell, type ActionCellAction, type ActionCellProps, BooleanCell, type BooleanCellProps, BulkActionBar, type BulkActionBarProps, type BulkActionProps, type BulkPopoverActionProps, Card, CardList, CardListData, type CardListDataProps, CardListItem, type CardListItemProps, type CardListMenuItem, type CardListProps, type CardProps, ChipPicker, type ChipPickerProps, CodeCell, type CodeCellProps, ColorSwatchCell, type ColorSwatchCellProps, ContextRail, type ContextRailHeaderProps, type ContextRailProps, type ContextRailSectionProps, CountCell, type CountCellProps, DataTable, type DataTableProps, DateCell, type DateCellProps, DeviceCell, type DeviceCellProps, type DrawerProps, DrawerRoot, FactBox, type FactBoxAction, type FactBoxProps, IdentityCell, type IdentityCellProps, InlineCreatableList, type InlineCreatableListProps, LabeledSwitch, type LabeledSwitchProps, LinkCell, type LinkCellProps, MenuCell, type MenuCellAction, type MenuCellProps, Modal, type ModalProps, NumberCell, type NumberCellProps, Pagination, type PaginationProps, SelectableCard, type SelectableCardBodyProps, type SelectableCardFooterProps, type SelectableCardProps, type SelectableCardThumbnailProps, Sidebar, type SidebarItemProps, type SidebarLogoProps, type SidebarSectionProps$1 as SidebarNavSectionProps, type SidebarProps, SidebarSection, type SidebarSectionProps, type SidebarUserMenuItemProps, type SidebarUserMenuProps, SlugCell, type SlugCellProps, StatusBadgeCell, type StatusBadgeCellProps, Stepper, StepperCompleted, StepperContainer, StepperContent, type StepperContentProps, StepperIcon, type StepperIconProps, type StepperProps, StepperProvider, StepperSeparator, type StepperSeparatorProps, StepperStep, type StepperStepProps, StepperStepTitle, StepperSteps, type StepperStepsProps, SwitchCell, type SwitchCellProps, CardList as Table, CardListData as TableData, type CardListDataProps as TableDataProps, CardListItem as TableItem, type CardListItemProps as TableItemProps, type CardListMenuItem as TableMenuItem, type CardListProps as TableProps, TimelineConnector, TimelineContent, TimelineDescription, TimelineIndicator, TimelineItem, type TimelineItemProps, TimelineRoot, type TimelineRootProps, TimelineSeparator, TimelineTitle, Toolbar, type ToolbarFilterChipProps, type ToolbarSearchProps, TreeViewBranch, TreeViewBranchContent, TreeViewBranchControl, TreeViewBranchIndicator, type TreeViewBranchProps, TreeViewBranchText, TreeViewBranchTrigger, TreeViewItem, TreeViewItemIndicator, type TreeViewItemProps, TreeViewItemText, TreeViewLabel, TreeViewNode, TreeViewRoot, type TreeViewRootProps, TreeViewTree, TruncatedTextCell, type TruncatedTextCellProps, UploadDropZone, type UploadDropZoneProps, UrlCell, type UrlCellProps, type UseStepProps, type UseStepperProps, type UseStepperReturn, Widget, type WidgetProps, emptyCellValue, formatUserAgent, parseUserAgent, pluralize, truncateText, useSidebarContext, useStep, useStepper, useStepperContext, useStepperNextButton, useStepperPrevButton };

package/dist/components/index.js

@@ -1,11 +1,11 @@
 import { Collapsible, Skeleton, Separator, Checkbox as Checkbox$1 } from '../chunk-TXGJ7BNX.js';
-import { formatRelativeDateTime, StatusBadge } from '../chunk-NQN6LXYU.js';
-import { MenuItem, MenuRoot, MenuTrigger, MenuContent, Tooltip, Table } from '../chunk-2QFOWHTU.js';
+import { formatRelativeDateTime, StatusBadge } from '../chunk-ELQTHWXC.js';
+import { MenuItem, MenuRoot, MenuTrigger, MenuContent, Tooltip, Badge, Avatar, Table } from '../chunk-2ZWZ2WAS.js';
 import { Popover, PopoverTrigger, PopoverContent, PopoverBody, Switch } from '../chunk-WQIEF5N3.js';
 import { text_input_default } from '../chunk-OU6H3KU4.js';
 import { Button, IconButton } from '../chunk-JS7ZEZV3.js';
 export { AuthCard, PageHeader } from '../chunk-D5ICTOCW.js';
-import { Box, Flex, Heading, Text, HStack, Grid, GridItem, Code, Link, VStack, Spacer, Stack } from '../chunk-G4QMIXLC.js';
+import { Box, Flex, Heading, Text, HStack, Grid, GridItem, Code, VStack, Link, Spacer, Stack } from '../chunk-G4QMIXLC.js';
 import { PanelRightOpen, PanelRightClose, ChevronRight, Search, PanelLeftOpen, PanelLeftClose, X, Ellipsis, Plus, ChevronLeft, ArrowUp, ArrowDown, ArrowUpDown, ChevronDown, Check, Upload } from 'lucide-react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { createContext as createContext$1, Timeline, TreeView, Card as Card$1, Menu, Portal, Checkbox, Drawer, ButtonGroup, Dialog, useSlotRecipe, chakra } from '@chakra-ui/react';
@@ -699,6 +699,66 @@ var DateCell = ({
   return /* @__PURE__ */ jsx("span", { children: formatted });
 };
 DateCell.displayName = "DateCell";
+
+// src/components/data-table/cells/user-agent.ts
+function parseUserAgent(ua) {
+  if (!ua) return { browser: "Unknown", os: "" };
+  let browser = "Unknown";
+  if (/Edg\//.test(ua)) browser = "Edge";
+  else if (/Firefox\//.test(ua)) browser = "Firefox";
+  else if (/OPR\/|Opera/.test(ua)) browser = "Opera";
+  else if (/Chrome\//.test(ua)) browser = "Chrome";
+  else if (/Safari\//.test(ua)) browser = "Safari";
+  let os = "";
+  if (/Windows NT/.test(ua)) os = "Windows";
+  else if (/iPhone|iPad/.test(ua)) os = "iOS";
+  else if (/Mac OS X|Macintosh/.test(ua)) os = "macOS";
+  else if (/Android/.test(ua)) os = "Android";
+  else if (/Linux/.test(ua)) os = "Linux";
+  return { browser, os };
+}
+function formatUserAgent(ua) {
+  const { browser, os } = parseUserAgent(ua);
+  return os ? `${browser} on ${os}` : browser;
+}
+var DeviceCell = ({ userAgent, badge }) => {
+  if (userAgent == null || userAgent === "") {
+    return /* @__PURE__ */ jsx("span", { children: emptyCellValue });
+  }
+  const label = formatUserAgent(userAgent);
+  return /* @__PURE__ */ jsx(Tooltip, { content: userAgent, showArrow: true, children: /* @__PURE__ */ jsxs(VStack, { align: "start", gap: 0, children: [
+    /* @__PURE__ */ jsxs(HStack, { gap: 2, align: "center", children: [
+      /* @__PURE__ */ jsx(Text, { fontSize: "sm", fontWeight: "medium", lineClamp: 1, children: label }),
+      badge && /* @__PURE__ */ jsx(Badge, { colorPalette: badge.colorPalette, size: "xs", children: badge.label })
+    ] }),
+    /* @__PURE__ */ jsx(Text, { fontSize: "xs", color: "fg.muted", lineClamp: 1, children: userAgent })
+  ] }) });
+};
+DeviceCell.displayName = "DeviceCell";
+function deriveInitials(name) {
+  const parts = name.trim().split(/\s+/).filter(Boolean);
+  if (parts.length === 0) return "";
+  if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
+  return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+}
+var IdentityCell = ({
+  name,
+  subText,
+  avatarSrc,
+  avatarFallback,
+  size = "sm"
+}) => {
+  if (name == null) return /* @__PURE__ */ jsx("span", { children: emptyCellValue });
+  const initials = avatarFallback ?? deriveInitials(name);
+  return /* @__PURE__ */ jsxs(HStack, { gap: 2, align: "center", children: [
+    /* @__PURE__ */ jsx(Avatar, { size, name, src: avatarSrc, fallback: initials }),
+    /* @__PURE__ */ jsxs(VStack, { align: "start", gap: 0, children: [
+      /* @__PURE__ */ jsx(Text, { fontSize: "sm", fontWeight: "semibold", lineClamp: 1, children: name }),
+      subText != null && /* @__PURE__ */ jsx(Text, { fontSize: "xs", color: "fg.muted", lineClamp: 1, children: subText })
+    ] })
+  ] });
+};
+IdentityCell.displayName = "IdentityCell";
 var LinkCell = ({ to, label }) => {
   if (to == null) return /* @__PURE__ */ jsx("span", { children: emptyCellValue });
   return /* @__PURE__ */ jsx(Link, { color: "accent", asChild: true, children: /* @__PURE__ */ jsx(
@@ -791,18 +851,22 @@ var StatusBadgeCell = ({
   colorMap,
   fallbackColor = "gray",
   detail,
-  detailColor = "fg.error"
+  detailColor = "fg.error",
+  tooltip
 }) => {
   if (value == null) return /* @__PURE__ */ jsx("span", { children: emptyCellValue });
   const color = colorMap?.[value] ?? fallbackColor;
-  const badge = /* @__PURE__ */ jsx(StatusBadge, { label: value, color });
+  let badge = /* @__PURE__ */ jsx(StatusBadge, { label: value, color });
+  if (tooltip != null) {
+    badge = /* @__PURE__ */ jsx(Tooltip, { content: tooltip, showArrow: true, children: /* @__PURE__ */ jsx("span", { children: badge }) });
+  }
   if (detail) {
     return /* @__PURE__ */ jsxs(VStack, { align: "start", gap: 0.5, children: [
       badge,
       /* @__PURE__ */ jsx(Text, { fontSize: "xs", color: detailColor, children: detail })
     ] });
   }
-  return badge;
+  return /* @__PURE__ */ jsx(Fragment, { children: badge });
 };
 StatusBadgeCell.displayName = "StatusBadgeCell";
 var SwitchCell = ({
@@ -827,12 +891,18 @@ var SwitchCell = ({
 SwitchCell.displayName = "SwitchCell";
 var TruncatedTextCell = ({
   value,
-  maxLength
+  maxLength,
+  subText
 }) => {
   if (value == null) return /* @__PURE__ */ jsx("span", { children: emptyCellValue });
   const isTruncated = maxLength != null && value.length > maxLength;
   const display = isTruncated ? truncateText(value, maxLength) : value;
-  return /* @__PURE__ */ jsx("span", { title: isTruncated ? value : void 0, children: display });
+  const primary = /* @__PURE__ */ jsx("span", { title: isTruncated ? value : void 0, children: display });
+  if (subText == null) return primary;
+  return /* @__PURE__ */ jsxs(VStack, { align: "start", gap: 0, children: [
+    primary,
+    /* @__PURE__ */ jsx(Text, { fontSize: "xs", color: "fg.muted", lineClamp: 1, children: subText })
+  ] });
 };
 TruncatedTextCell.displayName = "TruncatedTextCell";
 var UrlCell = ({ value, label }) => {
@@ -2566,6 +2636,6 @@ var Widget = ({
 };
 Widget.displayName = "Widget";
 
-export { ActionCell, BooleanCell, BulkActionBar, Card, CardList, CardListData, CardListItem, ChipPicker, CodeCell, ColorSwatchCell, ContextRail, CountCell, DataTable, DateCell, DrawerRoot, FactBox, InlineCreatableList, LabeledSwitch, LinkCell, MenuCell, Modal, NumberCell, Pagination, SelectableCard, Sidebar, SidebarSection2 as SidebarSection, SlugCell, StatusBadgeCell, Stepper, StepperCompleted, StepperContainer, StepperContent, StepperIcon, StepperProvider, StepperSeparator, StepperStep, StepperStepTitle, StepperSteps, SwitchCell, CardList as Table, CardListData as TableData, CardListItem as TableItem, TimelineConnector, TimelineContent, TimelineDescription, TimelineIndicator, TimelineItem, TimelineRoot, TimelineSeparator, TimelineTitle, Toolbar, TreeViewBranch, TreeViewBranchContent, TreeViewBranchControl, TreeViewBranchIndicator, TreeViewBranchText, TreeViewBranchTrigger, TreeViewItem, TreeViewItemIndicator, TreeViewItemText, TreeViewLabel, TreeViewNode, TreeViewRoot, TreeViewTree, TruncatedTextCell, UploadDropZone, UrlCell, Widget, emptyCellValue, pluralize, truncateText, useSidebarContext, useStep, useStepper, useStepperContext, useStepperNextButton, useStepperPrevButton };
+export { ActionCell, BooleanCell, BulkActionBar, Card, CardList, CardListData, CardListItem, ChipPicker, CodeCell, ColorSwatchCell, ContextRail, CountCell, DataTable, DateCell, DeviceCell, DrawerRoot, FactBox, IdentityCell, InlineCreatableList, LabeledSwitch, LinkCell, MenuCell, Modal, NumberCell, Pagination, SelectableCard, Sidebar, SidebarSection2 as SidebarSection, SlugCell, StatusBadgeCell, Stepper, StepperCompleted, StepperContainer, StepperContent, StepperIcon, StepperProvider, StepperSeparator, StepperStep, StepperStepTitle, StepperSteps, SwitchCell, CardList as Table, CardListData as TableData, CardListItem as TableItem, TimelineConnector, TimelineContent, TimelineDescription, TimelineIndicator, TimelineItem, TimelineRoot, TimelineSeparator, TimelineTitle, Toolbar, TreeViewBranch, TreeViewBranchContent, TreeViewBranchControl, TreeViewBranchIndicator, TreeViewBranchText, TreeViewBranchTrigger, TreeViewItem, TreeViewItemIndicator, TreeViewItemText, TreeViewLabel, TreeViewNode, TreeViewRoot, TreeViewTree, TruncatedTextCell, UploadDropZone, UrlCell, Widget, emptyCellValue, formatUserAgent, parseUserAgent, pluralize, truncateText, useSidebarContext, useStep, useStepper, useStepperContext, useStepperNextButton, useStepperPrevButton };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map