@knkcs/anker 1.10.0 → 1.10.2

package/dist/atoms/index.d.ts

@@ -556,6 +556,8 @@ interface StatusBadgeProps {
     label: string;
     /** The background color for the badge (hex format, e.g. "#ff0000") */
     color: string;
+    /** Optional icon rendered inline before the label inside the badge. */
+    icon?: React__default.ReactNode;
 }
 declare const StatusBadge: React__default.FC<StatusBadgeProps>;
 

package/dist/atoms/index.js

@@ -1,6 +1,6 @@
 import { Prose } from '../chunk-VOGT33LU.js';
-import { formatRelativeToCurrentWeekDateTime, formatRelativeDateTime } from '../chunk-ELQTHWXC.js';
-export { StatusBadge, formatRelativeDateTime, formatRelativeToCurrentWeekDateTime } from '../chunk-ELQTHWXC.js';
+import { formatRelativeToCurrentWeekDateTime, formatRelativeDateTime } from '../chunk-ETY43HAI.js';
+export { StatusBadge, formatRelativeDateTime, formatRelativeToCurrentWeekDateTime } from '../chunk-ETY43HAI.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';

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

@@ -5,7 +5,7 @@ import relativeTime from 'dayjs/plugin/relativeTime.js';
 import utcPlugin from 'dayjs/plugin/utc.js';
 import { readableColor } from 'color2k';
 import { useMemo } from 'react';
-import { jsx } from 'react/jsx-runtime';
+import { jsxs } from 'react/jsx-runtime';
 
 dayjs.extend(utcPlugin);
 dayjs.extend(relativeTime);
@@ -23,7 +23,7 @@ function formatRelativeToCurrentWeekDateTime(date, baseDate = /* @__PURE__ */ ne
   return formatRelativeDateTime(date, baseDate);
 }
 var StatusBadge = (props) => {
-  const { label, color } = props;
+  const { label, color, icon } = props;
   const textColor = useMemo(() => {
     try {
       return readableColor(color);
@@ -31,7 +31,7 @@ var StatusBadge = (props) => {
       return "black";
     }
   }, [color]);
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     Badge,
     {
       bg: color,
@@ -39,12 +39,16 @@ var StatusBadge = (props) => {
       rounded: "base",
       px: 2,
       marginInlineStart: 1,
-      children: label
+      gap: 1,
+      children: [
+        icon,
+        label
+      ]
     }
   );
 };
 StatusBadge.displayName = "StatusBadge";
 
 export { StatusBadge, formatRelativeDateTime, formatRelativeToCurrentWeekDateTime };
-//# sourceMappingURL=chunk-ELQTHWXC.js.map
-//# sourceMappingURL=chunk-ELQTHWXC.js.map
+//# sourceMappingURL=chunk-ETY43HAI.js.map
+//# sourceMappingURL=chunk-ETY43HAI.js.map

package/dist/chunk-ETY43HAI.js.map

@@ -0,0 +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;ACpDO,IAAM,WAAA,GAA0C,CAAC,KAAA,KAAU;AACjE,EAAA,MAAM,EAAE,KAAA,EAAO,KAAA,EAAO,IAAA,EAAK,GAAI,KAAA;AAE/B,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,IAAA;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,MACnB,GAAA,EAAK,CAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,QAAA,IAAA;AAAA,QACA;AAAA;AAAA;AAAA,GACF;AAEF;AAEA,WAAA,CAAY,WAAA,GAAc,aAAA","file":"chunk-ETY43HAI.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\t/** Optional icon rendered inline before the label inside the badge. */\n\ticon?: React.ReactNode;\n}\n\nexport const StatusBadge: React.FC<StatusBadgeProps> = (props) => {\n\tconst { label, color, icon } = 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\tgap={1}\n\t\t>\n\t\t\t{icon}\n\t\t\t{label}\n\t\t</Badge>\n\t);\n};\n\nStatusBadge.displayName = \"StatusBadge\";\n"]}

package/dist/components/index.d.ts

@@ -241,6 +241,37 @@ 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";
+    /**
+     * Optional Chakra `colorPalette` forwarded to the underlying `Avatar`
+     * primitive (e.g. `"primary"`, `"secondary"`). Tints the fallback circle
+     * with the chosen palette. Omit for the default neutral-gray look.
+     */
+    colorPalette?: string;
+}
+declare const IdentityCell: React__default.FC<IdentityCellProps>;
+
 interface LinkCellProps {
     /** Route path for navigation. Renders em-dash when null/undefined. */
     to: string | null | undefined;
@@ -303,6 +334,11 @@ interface StatusBadgeCellProps {
      * don't fit on the badge label.
      */
     tooltip?: React__default.ReactNode;
+    /**
+     * Optional icon rendered inline before the label inside the badge (e.g.
+     * a `lucide-react` glyph). A small gap separates it from the label.
+     */
+    icon?: React__default.ReactNode;
 }
 declare const StatusBadgeCell: React__default.FC<StatusBadgeCellProps>;
 
@@ -334,6 +370,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>[];
@@ -908,4 +960,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-ELQTHWXC.js';
-import { MenuItem, MenuRoot, MenuTrigger, MenuContent, Tooltip, Table } from '../chunk-2ZWZ2WAS.js';
+import { formatRelativeDateTime, StatusBadge } from '../chunk-ETY43HAI.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,76 @@ 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",
+  colorPalette
+}) => {
+  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,
+        colorPalette
+      }
+    ),
+    /* @__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(
@@ -792,11 +862,12 @@ var StatusBadgeCell = ({
   fallbackColor = "gray",
   detail,
   detailColor = "fg.error",
-  tooltip
+  tooltip,
+  icon
 }) => {
   if (value == null) return /* @__PURE__ */ jsx("span", { children: emptyCellValue });
   const color = colorMap?.[value] ?? fallbackColor;
-  let badge = /* @__PURE__ */ jsx(StatusBadge, { label: value, color });
+  let badge = /* @__PURE__ */ jsx(StatusBadge, { label: value, color, icon });
   if (tooltip != null) {
     badge = /* @__PURE__ */ jsx(Tooltip, { content: tooltip, showArrow: true, children: /* @__PURE__ */ jsx("span", { children: badge }) });
   }
@@ -2576,6 +2647,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