@taiv/ui 2.1.5 → 2.1.6

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/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/package.json

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