@knkcs/anker 1.10.1 → 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

@@ -263,6 +263,12 @@ interface IdentityCellProps {
     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>;
 
@@ -328,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>;
 

package/dist/components/index.js

@@ -1,5 +1,5 @@
 import { Collapsible, Skeleton, Separator, Checkbox as Checkbox$1 } from '../chunk-TXGJ7BNX.js';
-import { formatRelativeDateTime, StatusBadge } from '../chunk-ELQTHWXC.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';
@@ -746,12 +746,22 @@ var IdentityCell = ({
   subText,
   avatarSrc,
   avatarFallback,
-  size = "sm"
+  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 }),
+    /* @__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 })
@@ -852,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 }) });
   }