@taiv/ui 2.1.4 → 2.1.5

package/dist/components/Data/Cards/StatsCard/StatsCard.d.ts

@@ -3,7 +3,8 @@ import { CardProps } from '../../../Layout/Card/Card';
 import { primitives } from '../../../../constants/colors';
 import { formats, truncation } from '../../../../constants/data';
 export interface StatsCardProps extends Omit<CardProps, 'children'> {
-    value: number;
+    value: number | string;
+    valueColor?: string;
     title: string;
     description?: string;
     format?: keyof typeof formats;
@@ -14,5 +15,5 @@ export interface StatsCardProps extends Omit<CardProps, 'children'> {
     increaseDescription?: string;
     truncateAt?: keyof typeof truncation;
 }
-export declare const StatsCard: ({ value, format, isDelta, title, description, increaseDescription, icon: Icon, iconColor, tooltip, truncateAt, ...cardProps }: StatsCardProps) => React.JSX.Element;
+export declare const StatsCard: ({ value, valueColor, format, isDelta, title, description, increaseDescription, icon: Icon, iconColor, tooltip, truncateAt, ...cardProps }: StatsCardProps) => React.JSX.Element;
 //# sourceMappingURL=StatsCard.d.ts.map

package/dist/components/Data/Cards/StatsCard/StatsCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatsCard.d.ts","sourceRoot":"","sources":["../../../../../src/components/Data/Cards/StatsCard/StatsCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAQ,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAO5D,OAAO,EAAE,UAAU,EAAoB,MAAM,8BAA8B,CAAC;AAC5E,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAGjE,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IACjE,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,OAAO,OAAO,CAAC;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,OAAO,UAAU,CAAC;IACpC,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,UAAU,CAAC,EAAE,MAAM,OAAO,UAAU,CAAC;CACtC;AAED,eAAO,MAAM,SAAS,GAAI,+HAA4J,cAAc,sBAmEnM,CAAC"}
+{"version":3,"file":"StatsCard.d.ts","sourceRoot":"","sources":["../../../../../src/components/Data/Cards/StatsCard/StatsCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAQ,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAO5D,OAAO,EAAE,UAAU,EAAoB,MAAM,8BAA8B,CAAC;AAC5E,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAGjE,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IACjE,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,OAAO,OAAO,CAAC;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,OAAO,UAAU,CAAC;IACpC,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,UAAU,CAAC,EAAE,MAAM,OAAO,UAAU,CAAC;CACtC;AAED,eAAO,MAAM,SAAS,GAAI,2IAAwK,cAAc,sBAuE/M,CAAC"}

package/dist/components/Data/Cards/StatsCard/StatsCard.js

@@ -9,9 +9,9 @@ import { IconBadge } from '../../../Misc/IconBadge/IconBadge';
 import { success, neutral } from '../../../../constants/colors';
 import { formats, truncation } from '../../../../constants/data';
 import { spacing } from '../../../../constants/spacing';
-export const StatsCard = ({ value, format = 'decimal', isDelta = false, title, description, increaseDescription, icon: Icon, iconColor = 'blue', tooltip, truncateAt, ...cardProps }) => {
+export const StatsCard = ({ value, valueColor, format = 'decimal', isDelta = false, title, description, increaseDescription, icon: Icon, iconColor = 'blue', tooltip, truncateAt, ...cardProps }) => {
     const getDelta = () => {
-        const currentDirection = isDelta ? (value > 0 ? 'positive' : value < 0 ? 'negative' : null) : null;
+        const currentDirection = isDelta && typeof value === 'number' ? (value > 0 ? 'positive' : value < 0 ? 'negative' : null) : null;
         return {
             direction: currentDirection,
             color: currentDirection === 'positive' ? success[200] : currentDirection === 'negative' ? neutral[200] : undefined,
@@ -20,6 +20,10 @@ export const StatsCard = ({ value, format = 'decimal', isDelta = false, title, d
     };
     const delta = getDelta();
     const formatValue = () => {
+        // String values are display text (e.g. a status word) — render verbatim,
+        // no number formatting, truncation, or delta prefix.
+        if (typeof value === 'string')
+            return value;
         const config = formats[format];
         let formattedNumber;
         if (truncateAt && value >= truncation[truncateAt].threshold) {
@@ -42,5 +46,5 @@ export const StatsCard = ({ value, format = 'decimal', isDelta = false, title, d
         result = `${config.prefix}${result}${config.suffix}`;
         return result;
     };
-    return (_jsx(Card, { bg: neutral[25], animate: true, ...cardProps, children: _jsxs(Stack, { gap: spacing.lg, children: [_jsxs(Stack, { gap: spacing.xxs, children: [_jsxs(Group, { position: "apart", children: [_jsx(Title, { size: "3xl", weight: "bold", children: formatValue() }), Icon && _jsx(IconBadge, { icon: Icon, color: iconColor })] }), _jsxs(Group, { gap: spacing.sm, children: [_jsx(Title, { variant: "cardHeader", color: "#6D6D6D", weight: "medium", children: title }), tooltip && _jsx(InfoTooltip, { text: tooltip, maxWidth: "600px" })] })] }), _jsxs(Stack, { gap: "0", children: [description && _jsx(Text, { variant: "label", children: description }), delta.showIncrementalText && increaseDescription && (_jsx(Text, { variant: "label", color: delta.color, children: increaseDescription }))] })] }) }));
+    return (_jsx(Card, { bg: neutral[25], animate: true, ...cardProps, children: _jsxs(Stack, { gap: spacing.lg, children: [_jsxs(Stack, { gap: spacing.xxs, children: [_jsxs(Group, { position: "apart", children: [_jsx(Title, { size: "3xl", weight: "bold", color: valueColor, children: formatValue() }), Icon && _jsx(IconBadge, { icon: Icon, color: iconColor })] }), _jsxs(Group, { gap: spacing.sm, children: [_jsx(Title, { variant: "cardHeader", color: "#6D6D6D", weight: "medium", children: title }), tooltip && _jsx(InfoTooltip, { text: tooltip, maxWidth: "600px" })] })] }), _jsxs(Stack, { gap: "0", children: [description && _jsx(Text, { variant: "label", children: description }), delta.showIncrementalText && increaseDescription && (_jsx(Text, { variant: "label", color: delta.color, children: increaseDescription }))] })] }) }));
 };

package/dist/components/Data/Cards/StatsCard/StatsCard.stories.d.ts

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { StatsCard } from './StatsCard';
+declare const meta: Meta<typeof StatsCard>;
+export default meta;
+type Story = StoryObj<typeof StatsCard>;
+export declare const NumericValue: Story;
+export declare const StringHealthy: Story;
+export declare const StringIssuesDetected: Story;
+export declare const StringNeedsAttention: Story;
+export declare const StringNoDevices: Story;
+//# sourceMappingURL=StatsCard.stories.d.ts.map

package/dist/components/Data/Cards/StatsCard/StatsCard.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatsCard.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Data/Cards/StatsCard/StatsCard.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAGxC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAUhC,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,SAAS,CAAC,CAAC;AAExC,eAAO,MAAM,YAAY,EAAE,KAO1B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAQ3B,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KASlC,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAUlC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAQ7B,CAAC"}

package/dist/components/Data/Cards/StatsCard/StatsCard.stories.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { IconDeviceTvFilled } from '@tabler/icons-react';
+import { StatsCard } from './StatsCard';
+import { error } from '../../../../constants/colors';
+const meta = {
+    title: 'Components/Data/Cards/StatsCard',
+    component: StatsCard,
+    decorators: [
+        (Story) => (_jsx("div", { style: { width: '360px' }, children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+export const NumericValue = {
+    args: {
+        value: 42,
+        title: 'Items Active',
+        format: 'integer',
+        description: 'Across your rotation and active events',
+    },
+};
+export const StringHealthy = {
+    args: {
+        value: 'Healthy',
+        title: 'System Health',
+        description: 'All devices are operating as expected',
+        icon: _jsx(IconDeviceTvFilled, { size: 18 }),
+        iconColor: 'green',
+    },
+};
+export const StringIssuesDetected = {
+    args: {
+        value: 'Issues Detected',
+        title: 'System Health',
+        description: '2 of 5 devices have issues, your Taiv setup may not operate as expected',
+        icon: _jsx(IconDeviceTvFilled, { size: 18 }),
+        iconColor: 'yellow',
+    },
+};
+export const StringNeedsAttention = {
+    args: {
+        value: 'Needs Attention',
+        valueColor: error[200],
+        title: 'System Health',
+        description: '3 of 3 devices have issues, your Taiv setup may not operate as expected',
+        icon: _jsx(IconDeviceTvFilled, { size: 18 }),
+        iconColor: 'red',
+    },
+};
+export const StringNoDevices = {
+    args: {
+        value: 'No Devices',
+        title: 'System Health',
+        description: 'Add a device to get started with Taiv',
+        icon: _jsx(IconDeviceTvFilled, { size: 18 }),
+        iconColor: 'gray',
+    },
+};

package/dist/components/Info/Badge/Badge.d.ts

@@ -7,7 +7,11 @@ interface BadgeProps extends Omit<MantineBadgeProps, 'color' | 'leftSection'> {
     color?: BadgeColor;
     variant?: BadgeVariant;
     leftIcon?: React.ReactElement;
+    /** Shows click affordance (pointer cursor + hover feedback). Badge stays a
+     *  display element — wrap it in a button (e.g. UnstyledButton) for the
+     *  interaction itself. */
+    clickable?: boolean;
 }
-declare const Badge: ({ styles, color, variant, size, leftIcon, ...props }: BadgeProps) => React.JSX.Element;
+declare const Badge: ({ styles, color, variant, size, leftIcon, clickable, ...props }: BadgeProps) => React.JSX.Element;
 export { Badge, type BadgeProps };
 //# sourceMappingURL=Badge.d.ts.map

package/dist/components/Info/Badge/Badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../../src/components/Info/Badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAyB,UAAU,IAAI,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAKvF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACzC,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAE3D,UAAU,UAAW,SAAQ,IAAI,CAAC,iBAAiB,EAAE,OAAO,GAAG,aAAa,CAAC;IAC3E,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;CAC/B;AAED,QAAA,MAAM,KAAK,GAAI,sDAAqF,UAAU,sBAoC7G,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,CAAC"}
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../../src/components/Info/Badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAyB,UAAU,IAAI,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAKvF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACzC,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAE3D,UAAU,UAAW,SAAQ,IAAI,CAAC,iBAAiB,EAAE,OAAO,GAAG,aAAa,CAAC;IAC3E,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC9B;;8BAE0B;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,QAAA,MAAM,KAAK,GAAI,iEAAwG,UAAU,sBAyChI,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,CAAC"}

package/dist/components/Info/Badge/Badge.js

@@ -4,25 +4,30 @@ import { Badge as MantineBadge } from '@mantine/core';
 import { fontBase } from '../../../constants/font';
 import { badgeSizes } from './sizes';
 import { getVariantStyles } from './variants';
-const Badge = ({ styles, color = 'primary', variant = 'outline', size = 'md', leftIcon, ...props }) => {
+const Badge = ({ styles, color = 'primary', variant = 'outline', size = 'md', leftIcon, clickable = false, ...props }) => {
     const selectedSize = badgeSizes[size];
     const variantStyles = getVariantStyles(color);
     const selectedVariant = variantStyles[variant];
+    const cursor = clickable ? 'pointer' : 'default';
     const style = {
         root: {
             padding: selectedSize.padding,
             height: selectedSize.height,
-            cursor: 'default',
+            cursor,
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',
             ...selectedVariant,
+            ...(clickable && {
+                transition: 'filter 120ms ease',
+                '&:hover': { filter: 'brightness(0.96)' },
+            }),
         },
         inner: {
             ...fontBase,
             ...selectedSize.fontSize,
             textTransform: 'none',
-            cursor: 'default',
+            cursor,
         },
         leftSection: {
             display: 'flex',

package/dist/components/Info/Badge/Badge.stories.d.ts

@@ -11,5 +11,6 @@ export declare const Default: Story;
 export declare const Variants: Story;
 export declare const Colors: Story;
 export declare const Sizes: Story;
+export declare const Clickable: Story;
 export declare const WithLeftIcon: Story;
 //# sourceMappingURL=Badge.stories.d.ts.map

package/dist/components/Info/Badge/Badge.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Info/Badge/Badge.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAG5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAK1C,KAAK,cAAc,GAAG,MAAM,GAAG,WAAW,GAAG,kBAAkB,CAAC;AAEhE,KAAK,cAAc,GAAG,IAAI,CAAC,UAAU,EAAE,UAAU,CAAC,GAAG;IACnD,QAAQ,CAAC,EAAE,cAAc,CAAC;CAC3B,CAAC;AAEF,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,cAAc,CAwE9B,CAAC;AAQF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,cAAc,CAAC,CAAC;AAEtC,eAAO,MAAM,OAAO,EAAE,KAYrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAStB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAUpB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAQnB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAsC1B,CAAC"}
+{"version":3,"file":"Badge.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Info/Badge/Badge.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAG5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAK1C,KAAK,cAAc,GAAG,MAAM,GAAG,WAAW,GAAG,kBAAkB,CAAC;AAEhE,KAAK,cAAc,GAAG,IAAI,CAAC,UAAU,EAAE,UAAU,CAAC,GAAG;IACnD,QAAQ,CAAC,EAAE,cAAc,CAAC;CAC3B,CAAC;AAEF,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,cAAc,CAwE9B,CAAC;AAQF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,cAAc,CAAC,CAAC;AAEtC,eAAO,MAAM,OAAO,EAAE,KAYrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAStB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAUpB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAQnB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAcvB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAsC1B,CAAC"}

package/dist/components/Info/Badge/Badge.stories.js

@@ -103,6 +103,9 @@ export const Colors = {
 export const Sizes = {
     render: () => (_jsxs(Group, { gap: spacing.lg, align: "flex-end", children: [_jsx(Badge, { size: "sm", color: "primary", children: "Small" }), _jsx(Badge, { size: "md", color: "primary", children: "Medium" }), _jsx(Badge, { size: "lg", color: "primary", children: "Large" })] })),
 };
+export const Clickable = {
+    render: () => (_jsxs(Group, { gap: spacing.lg, children: [_jsx(Badge, { clickable: true, variant: "filled", color: "success", leftIcon: _jsx(IconCircleFilled, {}), children: "Healthy" }), _jsx(Badge, { clickable: true, variant: "filled", color: "error", leftIcon: _jsx(IconCircleFilled, {}), children: "Offline" }), _jsx(Badge, { variant: "filled", color: "neutral", children: "Not clickable" })] })),
+};
 export const WithLeftIcon = {
     render: () => (_jsxs(Stack, { gap: spacing.lg, children: [_jsxs(Group, { gap: spacing.lg, children: [_jsx(Badge, { size: "sm", leftIcon: _jsx(IconCheck, {}), color: "success", children: "Completed" }), _jsx(Badge, { size: "sm", variant: "filled", leftIcon: _jsx(IconCircleFilled, {}), color: "success", children: "Online" }), _jsx(Badge, { size: "sm", variant: "gradient", leftIcon: _jsx(IconCheck, {}), color: "success", children: "In Progress" })] }), _jsxs(Group, { gap: spacing.lg, children: [_jsx(Badge, { leftIcon: _jsx(IconCheck, {}), color: "success", children: "Completed" }), _jsx(Badge, { variant: "filled", leftIcon: _jsx(IconCircleFilled, {}), color: "success", children: "Online" }), _jsx(Badge, { variant: "gradient", leftIcon: _jsx(IconCheck, {}), color: "success", children: "In Progress" })] }), _jsxs(Group, { gap: spacing.lg, children: [_jsx(Badge, { size: "lg", leftIcon: _jsx(IconCheck, {}), color: "success", children: "Completed" }), _jsx(Badge, { size: "lg", variant: "filled", leftIcon: _jsx(IconCircleFilled, {}), color: "success", children: "Online" }), _jsx(Badge, { size: "lg", variant: "gradient", leftIcon: _jsx(IconCheck, {}), color: "success", children: "In Progress" })] })] })),
 };

package/dist/constants/colors.d.ts

@@ -50,6 +50,20 @@ export declare const salmon: {
     readonly 100: "#FFD1C7";
     readonly 200: "#FF806F";
 };
+export declare const pink: {
+    readonly 25: "#FFEBF5";
+    readonly 50: "#FFC2E0";
+    readonly 100: "#FF94CB";
+    readonly 200: "#FF69B4";
+    readonly 300: "#AB23B0";
+};
+export declare const brown: {
+    readonly 25: "#F9F1E7";
+    readonly 50: "#EBD3B3";
+    readonly 100: "#CE9752";
+    readonly 200: "#A55B00";
+    readonly 300: "#6E3D00";
+};
 export declare const teal: {
     readonly 25: "#E0F2F1";
     readonly 50: "#E0F2F1";
@@ -141,6 +155,13 @@ export declare const primitives: {
         readonly 200: "#00A6F4";
         readonly 300: "#0081CE";
     };
+    readonly brown: {
+        readonly 25: "#F9F1E7";
+        readonly 50: "#EBD3B3";
+        readonly 100: "#CE9752";
+        readonly 200: "#A55B00";
+        readonly 300: "#6E3D00";
+    };
     readonly gray: {
         readonly 25: "#F8FAFC";
         readonly 50: "#EDEDED";
@@ -157,6 +178,13 @@ export declare const primitives: {
         readonly 200: "#00DE6F";
         readonly 300: "#00A84F";
     };
+    readonly pink: {
+        readonly 25: "#FFEBF5";
+        readonly 50: "#FFC2E0";
+        readonly 100: "#FF94CB";
+        readonly 200: "#FF69B4";
+        readonly 300: "#AB23B0";
+    };
     readonly purple: {
         readonly 25: "#F3EEFF";
         readonly 50: "#C4A8FF";

package/dist/constants/colors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../src/constants/colors.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,KAAK,YAAY,CAAC;AAC/B,eAAO,MAAM,KAAK,YAAY,CAAC;AAE/B,eAAO,MAAM,IAAI;;;;;;;;CAQP,CAAC;AAEX,eAAO,MAAM,IAAI;;;;;;CAMP,CAAC;AAEX,eAAO,MAAM,KAAK;;;;;;CAMR,CAAC;AAGX,eAAO,MAAM,MAAM;;;;;;CAMT,CAAC;AAEX,eAAO,MAAM,GAAG;;;;;;CAMN,CAAC;AAGX,eAAO,MAAM,MAAM;;;;;;CAMT,CAAC;AAEX,eAAO,MAAM,MAAM;;;;;CAKT,CAAC;AAEX,eAAO,MAAM,IAAI;;;;;CAKP,CAAC;AAEX,eAAO,MAAM,OAAO;;;;;;CAAS,CAAC;AAC9B,eAAO,MAAM,KAAK;;;;;;CAAM,CAAC;AACzB,eAAO,MAAM,OAAO;;;;;;CAAQ,CAAC;AAC7B,eAAO,MAAM,OAAO;;;;;;CAAS,CAAC;AAC9B,eAAO,MAAM,OAAO;;;;;;;;CAAO,CAAC;AAE5B,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAOT,CAAC;AAGX,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CASb,CAAC"}
+{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../src/constants/colors.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,KAAK,YAAY,CAAC;AAC/B,eAAO,MAAM,KAAK,YAAY,CAAC;AAE/B,eAAO,MAAM,IAAI;;;;;;;;CAQP,CAAC;AAEX,eAAO,MAAM,IAAI;;;;;;CAMP,CAAC;AAEX,eAAO,MAAM,KAAK;;;;;;CAMR,CAAC;AAGX,eAAO,MAAM,MAAM;;;;;;CAMT,CAAC;AAEX,eAAO,MAAM,GAAG;;;;;;CAMN,CAAC;AAGX,eAAO,MAAM,MAAM;;;;;;CAMT,CAAC;AAEX,eAAO,MAAM,MAAM;;;;;CAKT,CAAC;AAEX,eAAO,MAAM,IAAI;;;;;;CAMP,CAAC;AAEX,eAAO,MAAM,KAAK;;;;;;CAMR,CAAC;AAEX,eAAO,MAAM,IAAI;;;;;CAKP,CAAC;AAEX,eAAO,MAAM,OAAO;;;;;;CAAS,CAAC;AAC9B,eAAO,MAAM,KAAK;;;;;;CAAM,CAAC;AACzB,eAAO,MAAM,OAAO;;;;;;CAAQ,CAAC;AAC7B,eAAO,MAAM,OAAO;;;;;;CAAS,CAAC;AAC9B,eAAO,MAAM,OAAO;;;;;;;;CAAO,CAAC;AAE5B,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAOT,CAAC;AAGX,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAWb,CAAC"}

package/dist/constants/colors.js

@@ -52,6 +52,20 @@ export const salmon = {
     100: "#FFD1C7",
     200: "#FF806F",
 };
+export const pink = {
+    25: "#FFEBF5",
+    50: "#FFC2E0",
+    100: "#FF94CB",
+    200: "#FF69B4",
+    300: "#AB23B0",
+};
+export const brown = {
+    25: "#F9F1E7",
+    50: "#EBD3B3",
+    100: "#CE9752",
+    200: "#A55B00",
+    300: "#6E3D00",
+};
 export const teal = {
     25: "#E0F2F1",
     50: "#E0F2F1",
@@ -75,8 +89,10 @@ export const colors = {
 // Primitive color exports - for purely aesthetic purpose, i.e. icons, backgrounds, etc. anything that we want to hardcode to a specific color
 export const primitives = {
     blue,
+    brown,
     gray,
     green,
+    pink,
     purple,
     red,
     salmon,

package/dist/utils/datetime.d.ts

@@ -1,3 +1,11 @@
+interface FormatRelativeTimeOptions {
+    /**
+     * Always return exact two-unit values ('5h 12m ago', '3d 4h ago') instead
+     * of collapsing to coarse tiers ('3w ago'). For dashboards/ops surfaces
+     * where "a while ago" isn't good enough.
+     */
+    precise?: boolean;
+}
 /**
  * Compact "time-since" string with minute/hour granularity. Past-only —
  * use this for "edited 5m ago", "uploaded 12h ago" style metadata where
@@ -8,11 +16,15 @@
  * @param reference The "now" to measure against. Defaults to the current
  *                  time; pass an explicit value to make output deterministic
  *                  in tests.
+ * @param options   `{ precise: true }` keeps exact two-unit output at every
+ *                  magnitude instead of the coarse w/mo/y tiers.
  *
  * @example
  *   formatRelativeTime(thirtySecondsAgo) // 'just now'
  *   formatRelativeTime(twelveHoursAgo)   // '12h ago'
  *   formatRelativeTime(threeWeeksAgo)    // '3w ago'
+ *   formatRelativeTime(threeWeeksAgo, undefined, { precise: true }) // '21d 4h ago'
  */
-export declare const formatRelativeTime: (input: string | number | Date, reference?: string | number | Date) => string;
+export declare const formatRelativeTime: (input: string | number | Date, reference?: string | number | Date, options?: FormatRelativeTimeOptions) => string;
+export {};
 //# sourceMappingURL=datetime.d.ts.map

package/dist/utils/datetime.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"datetime.d.ts","sourceRoot":"","sources":["../../src/utils/datetime.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,kBAAkB,GAC7B,OAAO,MAAM,GAAG,MAAM,GAAG,IAAI,EAC7B,YAAW,MAAM,GAAG,MAAM,GAAG,IAAiB,KAC7C,MAqBF,CAAC"}
+{"version":3,"file":"datetime.d.ts","sourceRoot":"","sources":["../../src/utils/datetime.ts"],"names":[],"mappings":"AAAA,UAAU,yBAAyB;IACjC;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,kBAAkB,GAC7B,OAAO,MAAM,GAAG,MAAM,GAAG,IAAI,EAC7B,YAAW,MAAM,GAAG,MAAM,GAAG,IAAiB,EAC9C,UAAS,yBAA8B,KACtC,MA4BF,CAAC"}

package/dist/utils/datetime.js

@@ -8,13 +8,16 @@
  * @param reference The "now" to measure against. Defaults to the current
  *                  time; pass an explicit value to make output deterministic
  *                  in tests.
+ * @param options   `{ precise: true }` keeps exact two-unit output at every
+ *                  magnitude instead of the coarse w/mo/y tiers.
  *
  * @example
  *   formatRelativeTime(thirtySecondsAgo) // 'just now'
  *   formatRelativeTime(twelveHoursAgo)   // '12h ago'
  *   formatRelativeTime(threeWeeksAgo)    // '3w ago'
+ *   formatRelativeTime(threeWeeksAgo, undefined, { precise: true }) // '21d 4h ago'
  */
-export const formatRelativeTime = (input, reference = new Date()) => {
+export const formatRelativeTime = (input, reference = new Date(), options = {}) => {
     const targetMs = input instanceof Date ? input.getTime() : new Date(input).getTime();
     const refMs = reference instanceof Date ? reference.getTime() : new Date(reference).getTime();
     if (Number.isNaN(targetMs) || Number.isNaN(refMs))
@@ -26,6 +29,12 @@ export const formatRelativeTime = (input, reference = new Date()) => {
     if (minutes < 60)
         return `${minutes}m ago`;
     const hours = Math.floor(minutes / 60);
+    if (options.precise) {
+        if (hours < 48)
+            return `${hours}h ${minutes % 60}m ago`;
+        const days = Math.floor(hours / 24);
+        return `${days}d ${hours % 24}h ago`;
+    }
     if (hours < 24)
         return `${hours}h ago`;
     const days = Math.floor(hours / 24);

package/package.json

@@ -85,5 +85,5 @@
     "storybook": "storybook dev -p 6006"
   },
   "types": "dist/index.d.ts",
-  "version": "2.1.4"
+  "version": "2.1.5"
 }