@taiv/ui 2.1.4 → 2.1.6

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/components/Inputs/TextInputs/SearchBar/SearchBar.d.ts

@@ -1,8 +1,9 @@
-import React from 'react';
-import { TextInputProps } from '@mantine/core';
+import type { TextInputProps } from '@mantine/core';
+import type React from 'react';
 interface SearchBarProps extends TextInputProps {
     fullWidth?: boolean;
+    useHotkey?: boolean;
 }
-declare const SearchBar: ({ width, fullWidth, size, styles, ...props }: SearchBarProps) => React.JSX.Element;
+declare const SearchBar: ({ width, fullWidth, size, styles, useHotkey, id, onKeyDown, value, ...props }: SearchBarProps) => React.JSX.Element;
 export { SearchBar };
 //# sourceMappingURL=SearchBar.d.ts.map

package/dist/components/Inputs/TextInputs/SearchBar/SearchBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/TextInputs/SearchBar/SearchBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAO/C,UAAU,cAAe,SAAQ,cAAc;IAC7C,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,QAAA,MAAM,SAAS,GAAI,8CAA6D,cAAc,sBAmC7F,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"SearchBar.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/TextInputs/SearchBar/SearchBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAEpD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,UAAU,cAAe,SAAQ,cAAc;IAC7C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,QAAA,MAAM,SAAS,GAAI,+EAUhB,cAAc,sBAkGhB,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/components/Inputs/TextInputs/SearchBar/SearchBar.js

@@ -1,31 +1,71 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { TextInput } from '../TextInput/TextInput';
+import { useHotkeys, useId } from '@mantine/hooks';
 import { neutral, red } from '../../../../constants/colors';
 import { fontBase } from '../../../../constants/font';
 import { spacing } from '../../../../constants/spacing';
+import { useIsMac, useTablet, useTouchDevice } from '../../../../hooks';
+import { Text } from '../../../Typography/Text/Text';
 import { componentSizes } from '../shared/sizes';
-const SearchBar = ({ width, fullWidth = false, size = 'md', styles, ...props }) => {
+import { TextInput } from '../TextInput/TextInput';
+const SearchBar = ({ width, fullWidth = false, size = 'md', styles, useHotkey = false, id, onKeyDown, value, ...props }) => {
     const selectedSize = componentSizes[size || 'md'];
     const computedWidth = fullWidth ? '100%' : width || `${selectedSize.width}px`;
+    const inputId = useId(id);
+    const isTablet = useTablet();
+    const isTouchDevice = useTouchDevice();
+    const isMobile = isTablet || isTouchDevice;
+    const isMac = useIsMac();
+    const hotkeyEnabled = useHotkey && !isMobile;
+    const hasValue = Boolean(value);
+    useHotkeys(hotkeyEnabled
+        ? [
+            [
+                'mod+K',
+                (event) => {
+                    event.preventDefault();
+                    const el = document.getElementById(inputId);
+                    el === null || el === void 0 ? void 0 : el.focus();
+                    el === null || el === void 0 ? void 0 : el.select();
+                },
+            ],
+        ]
+        : [], []);
+    const handleKeyDown = (event) => {
+        if (hotkeyEnabled && event.key === 'Escape')
+            event.currentTarget.blur();
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+    };
     const style = {
         input: {
             ...fontBase,
-            fontSize: selectedSize.fontSize,
-            color: neutral[200],
-            border: `1px solid ${neutral[100]}`,
-            borderRadius: '8px',
-            height: `${selectedSize.height}px`,
-            transition: 'all 200ms ease-in-out',
             '&[data-invalid]': {
-                borderColor: red[200],
-                color: neutral[200],
                 '&::placeholder': {
                     color: red[200],
                 },
+                borderColor: red[200],
+                color: neutral[200],
             },
+            border: `1px solid ${neutral[100]}`,
+            borderRadius: '8px',
+            color: neutral[200],
+            fontSize: selectedSize.fontSize,
+            height: `${selectedSize.height}px`,
+            transition: 'all 200ms ease-in-out',
         },
+        ...(hotkeyEnabled
+            ? { rightSection: { justifyContent: 'flex-end', paddingRight: spacing.md } }
+            : {}),
         ...styles,
     };
-    return (_jsx(TextInput, { placeholder: "Search", width: computedWidth, styles: style, icon: _jsx("i", { className: "fas fa-search", style: { fontSize: 14, marginLeft: spacing.xxs } }), size: 'lg', fullWidth: fullWidth, ...props }));
+    const hotkeyHint = hotkeyEnabled && !hasValue ? (_jsx(Text, { span: true, variant: 'label', color: '#adb5bd', sx: {
+            alignItems: 'center',
+            display: 'inline-flex',
+            letterSpacing: 0.5,
+            lineHeight: 1,
+            pointerEvents: 'none',
+            userSelect: 'none',
+            whiteSpace: 'nowrap',
+        }, children: isMac ? '⌘+K' : 'Ctrl+K' })) : undefined;
+    return (_jsx(TextInput, { fullWidth: fullWidth, icon: _jsx("i", { className: 'fas fa-search', style: { fontSize: 14, marginLeft: spacing.xxs } }), id: inputId, onKeyDown: handleKeyDown, placeholder: 'Search', rightSection: hotkeyHint, rightSectionWidth: hotkeyEnabled ? (isMac ? 50 : 66) : undefined, size: 'lg', styles: style, value: value, width: computedWidth, ...props }));
 };
 export { SearchBar };

package/dist/components/Inputs/TextInputs/SearchBar/SearchBar.stories.d.ts

@@ -4,6 +4,7 @@ declare const meta: Meta<typeof SearchBar>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
+export declare const UseHotkey: Story;
 export declare const Variants: Story;
 export declare const Sizes: Story;
 export declare const States: Story;

package/dist/components/Inputs/TextInputs/SearchBar/SearchBar.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/TextInputs/SearchBar/SearchBar.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAGxC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CA2FhC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAiBrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAetB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAgBnB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAiBpB,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,KA2BrC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KA6C3B,CAAC"}
+{"version":3,"file":"SearchBar.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/TextInputs/SearchBar/SearchBar.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAGxC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAmGhC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAiBrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAavB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAetB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAgBnB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAiBpB,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,KA2BrC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KA6C3B,CAAC"}

package/dist/components/Inputs/TextInputs/SearchBar/SearchBar.stories.js

@@ -70,6 +70,14 @@ const meta = {
                 defaultValue: { summary: 'false' },
             },
         },
+        useHotkey: {
+            control: { type: 'boolean' },
+            description: '⌘K / Ctrl+K focuses this input from anywhere; shows a hint badge. Enable on one SearchBar per page.',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
         width: {
             control: { type: 'number' },
             description: 'Custom width in pixels',
@@ -112,6 +120,20 @@ export const Default = {
         },
     },
 };
+export const UseHotkey = {
+    args: {
+        useHotkey: true,
+        fullWidth: false,
+        placeholder: 'Search',
+    },
+    parameters: {
+        docs: {
+            source: {
+                code: `<SearchBar useHotkey value={query} onChange={handleSearch} />`,
+            },
+        },
+    },
+};
 export const Variants = {
     render: () => (_jsxs(Group, { gap: "20px", children: [_jsx(SearchBar, { label: "Find Users", description: "Search by name, email, or username" }), _jsx(SearchBar, { placeholder: "Search products..." }), _jsx(SearchBar, { label: "Product Search", error: "Search query is too short" })] })),
     parameters: {

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/hooks/index.d.ts

@@ -5,7 +5,7 @@ export { useScrollLock } from './useScrollLock';
 export { useElementSize, useIntersection, useListState, useResizeObserver, useTimeout, useDebouncedValue } from '@mantine/hooks';
 export { useForm } from '@mantine/form';
 export type { UseFormReturnType } from '@mantine/form';
-export { useMediaQuery, useScreenSize, useMobile, useTablet, useLaptop, useDesktop, useWide, useTouchDevice } from './useMediaQuery';
+export { useMediaQuery, useScreenSize, useMobile, useTablet, useLaptop, useDesktop, useWide, useTouchDevice, useIsMac } from './useMediaQuery';
 export { useNotifications } from './useNotifications';
 export { useConfirmationModal } from './useConfirmationModal';
 export { useInfoModal } from './useInfoModal';

package/dist/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,YAAY,EAAE,iBAAiB,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACjI,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,YAAY,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACrI,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,YAAY,EAAE,iBAAiB,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACjI,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,YAAY,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC/I,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/hooks/index.js

@@ -4,7 +4,7 @@ export { useHeadroom } from './useHeadroom';
 export { useScrollLock } from './useScrollLock';
 export { useElementSize, useIntersection, useListState, useResizeObserver, useTimeout, useDebouncedValue } from '@mantine/hooks';
 export { useForm } from '@mantine/form';
-export { useMediaQuery, useScreenSize, useMobile, useTablet, useLaptop, useDesktop, useWide, useTouchDevice } from './useMediaQuery';
+export { useMediaQuery, useScreenSize, useMobile, useTablet, useLaptop, useDesktop, useWide, useTouchDevice, useIsMac } from './useMediaQuery';
 export { useNotifications } from './useNotifications';
 export { useConfirmationModal } from './useConfirmationModal';
 export { useInfoModal } from './useInfoModal';

package/dist/hooks/useMediaQuery.d.ts

@@ -8,4 +8,5 @@ export declare const useLaptop: () => boolean;
 export declare const useDesktop: () => boolean;
 export declare const useWide: () => boolean;
 export declare const useTouchDevice: () => boolean;
+export declare const useIsMac: () => boolean;
 //# sourceMappingURL=useMediaQuery.d.ts.map

package/dist/hooks/useMediaQuery.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useMediaQuery.d.ts","sourceRoot":"","sources":["../../src/hooks/useMediaQuery.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,IAAI,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AACvE,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAEvD,eAAO,MAAM,aAAa,6BAAuB,CAAC;AAElD,eAAO,MAAM,aAAa,QAAO,MAAM,OAAO,WAW7C,CAAC;AAEF,eAAO,MAAM,SAAS,eAA8D,CAAC;AACrF,eAAO,MAAM,SAAS,eAA8D,CAAC;AACrF,eAAO,MAAM,SAAS,eAA8D,CAAC;AACrF,eAAO,MAAM,UAAU,eAA+D,CAAC;AACvF,eAAO,MAAM,OAAO,eAA4D,CAAC;AACjF,eAAO,MAAM,cAAc,eAA2C,CAAC"}
+{"version":3,"file":"useMediaQuery.d.ts","sourceRoot":"","sources":["../../src/hooks/useMediaQuery.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,IAAI,oBAAoB,EAAS,MAAM,gBAAgB,CAAC;AAC9E,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAEvD,eAAO,MAAM,aAAa,6BAAuB,CAAC;AAElD,eAAO,MAAM,aAAa,QAAO,MAAM,OAAO,WAW7C,CAAC;AAEF,eAAO,MAAM,SAAS,eAA8D,CAAC;AACrF,eAAO,MAAM,SAAS,eAA8D,CAAC;AACrF,eAAO,MAAM,SAAS,eAA8D,CAAC;AACrF,eAAO,MAAM,UAAU,eAA+D,CAAC;AACvF,eAAO,MAAM,OAAO,eAA4D,CAAC;AACjF,eAAO,MAAM,cAAc,eAA2C,CAAC;AAEvE,eAAO,MAAM,QAAQ,eAA4B,CAAC"}

package/dist/hooks/useMediaQuery.js

@@ -1,4 +1,4 @@
-import { useMediaQuery as useMantineMediaQuery } from '@mantine/hooks';
+import { useMediaQuery as useMantineMediaQuery, useOs } from '@mantine/hooks';
 import { breakpoints } from '../constants/breakpoints';
 export const useMediaQuery = useMantineMediaQuery;
 export const useScreenSize = () => {
@@ -22,3 +22,4 @@ export const useLaptop = () => useMediaQuery(`(max-width: ${breakpoints.LAPTOP}p
 export const useDesktop = () => useMediaQuery(`(max-width: ${breakpoints.DESKTOP}px)`);
 export const useWide = () => useMediaQuery(`(max-width: ${breakpoints.WIDE}px)`);
 export const useTouchDevice = () => useMediaQuery('(pointer: coarse)');
+export const useIsMac = () => useOs() === 'macos';

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.6"
 }