@knkcs/anker 1.9.4 → 1.10.0

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

@@ -297,6 +297,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 +319,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>;
 

package/dist/components/index.js

@@ -1,6 +1,6 @@
 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, 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';
@@ -791,18 +791,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 +831,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 }) => {