@shipfox/react-ui 0.14.0 → 0.15.0

package/dist/components/search/search-inline.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useRef, useState } from 'react';
+import { cn } from '../../utils/cn.js';
+import { Icon } from '../icon/index.js';
+import { searchInputVariants } from './search-variants.js';
+export function SearchInline({ className, variant, size, radius, value, onChange, onClear, showClearButton = true, ...props }) {
+    const inputRef = useRef(null);
+    const [internalValue, setInternalValue] = useState('');
+    const isControlled = value !== undefined;
+    const inputValue = isControlled ? value : internalValue;
+    const hasValue = Boolean(inputValue);
+    const isSmall = size === 'small';
+    const handleChange = useCallback((e)=>{
+        if (!isControlled) {
+            setInternalValue(e.target.value);
+        }
+        onChange?.(e);
+    }, [
+        isControlled,
+        onChange
+    ]);
+    const handleClear = useCallback(()=>{
+        if (!isControlled) {
+            setInternalValue('');
+        }
+        if (onChange && inputRef.current) {
+            inputRef.current.value = '';
+            const syntheticEvent = {
+                target: inputRef.current,
+                currentTarget: inputRef.current
+            };
+            onChange(syntheticEvent);
+        }
+        onClear?.();
+        inputRef.current?.focus();
+    }, [
+        isControlled,
+        onChange,
+        onClear
+    ]);
+    const handleKeyDown = useCallback((e)=>{
+        if (e.key === 'Escape' && hasValue) {
+            e.preventDefault();
+            handleClear();
+        }
+    }, [
+        hasValue,
+        handleClear
+    ]);
+    return /*#__PURE__*/ _jsxs("div", {
+        "data-slot": "search-inline",
+        className: cn(searchInputVariants({
+            variant,
+            size,
+            radius
+        }), className),
+        children: [
+            /*#__PURE__*/ _jsx(Icon, {
+                name: "searchLine",
+                className: cn('shrink-0 text-foreground-neutral-muted', isSmall ? 'size-14' : 'size-16')
+            }),
+            /*#__PURE__*/ _jsx("input", {
+                ref: inputRef,
+                type: "text",
+                value: inputValue,
+                onChange: handleChange,
+                onKeyDown: handleKeyDown,
+                className: cn('flex-1 bg-transparent outline-none min-w-0', 'text-foreground-neutral-base', 'placeholder:text-foreground-neutral-muted', 'disabled:cursor-not-allowed disabled:text-foreground-neutral-disabled'),
+                ...props
+            }),
+            showClearButton && hasValue && /*#__PURE__*/ _jsx("button", {
+                type: "button",
+                onClick: handleClear,
+                className: cn('shrink-0 cursor-pointer rounded-4 p-2 -mx-2', 'text-foreground-neutral-muted hover:text-foreground-neutral-subtle transition-colors'),
+                "aria-label": "Clear search",
+                children: /*#__PURE__*/ _jsx(Icon, {
+                    name: "closeLine",
+                    className: "size-16"
+                })
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=search-inline.js.map

package/dist/components/search/search-inline.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/search/search-inline.tsx"],"sourcesContent":["import type {VariantProps} from 'class-variance-authority';\nimport type {ComponentProps} from 'react';\nimport {useCallback, useRef, useState} from 'react';\nimport {cn} from 'utils/cn';\nimport {Icon} from '../icon';\nimport {searchInputVariants} from './search-variants';\n\nexport type SearchInlineProps = Omit<ComponentProps<'input'>, 'size'> &\n  VariantProps<typeof searchInputVariants> & {\n    showClearButton?: boolean;\n    onClear?: () => void;\n  };\n\nexport function SearchInline({\n  className,\n  variant,\n  size,\n  radius,\n  value,\n  onChange,\n  onClear,\n  showClearButton = true,\n  ...props\n}: SearchInlineProps) {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [internalValue, setInternalValue] = useState('');\n  const isControlled = value !== undefined;\n  const inputValue = isControlled ? value : internalValue;\n  const hasValue = Boolean(inputValue);\n  const isSmall = size === 'small';\n\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      if (!isControlled) {\n        setInternalValue(e.target.value);\n      }\n      onChange?.(e);\n    },\n    [isControlled, onChange],\n  );\n\n  const handleClear = useCallback(() => {\n    if (!isControlled) {\n      setInternalValue('');\n    }\n\n    if (onChange && inputRef.current) {\n      inputRef.current.value = '';\n      const syntheticEvent = {\n        target: inputRef.current,\n        currentTarget: inputRef.current,\n      } as React.ChangeEvent<HTMLInputElement>;\n      onChange(syntheticEvent);\n    }\n    onClear?.();\n    inputRef.current?.focus();\n  }, [isControlled, onChange, onClear]);\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLInputElement>) => {\n      if (e.key === 'Escape' && hasValue) {\n        e.preventDefault();\n        handleClear();\n      }\n    },\n    [hasValue, handleClear],\n  );\n\n  return (\n    <div\n      data-slot=\"search-inline\"\n      className={cn(searchInputVariants({variant, size, radius}), className)}\n    >\n      <Icon\n        name=\"searchLine\"\n        className={cn('shrink-0 text-foreground-neutral-muted', isSmall ? 'size-14' : 'size-16')}\n      />\n      <input\n        ref={inputRef}\n        type=\"text\"\n        value={inputValue}\n        onChange={handleChange}\n        onKeyDown={handleKeyDown}\n        className={cn(\n          'flex-1 bg-transparent outline-none min-w-0',\n          'text-foreground-neutral-base',\n          'placeholder:text-foreground-neutral-muted',\n          'disabled:cursor-not-allowed disabled:text-foreground-neutral-disabled',\n        )}\n        {...props}\n      />\n      {showClearButton && hasValue && (\n        <button\n          type=\"button\"\n          onClick={handleClear}\n          className={cn(\n            'shrink-0 cursor-pointer rounded-4 p-2 -mx-2',\n            'text-foreground-neutral-muted hover:text-foreground-neutral-subtle transition-colors',\n          )}\n          aria-label=\"Clear search\"\n        >\n          <Icon name=\"closeLine\" className=\"size-16\" />\n        </button>\n      )}\n    </div>\n  );\n}\n"],"names":["useCallback","useRef","useState","cn","Icon","searchInputVariants","SearchInline","className","variant","size","radius","value","onChange","onClear","showClearButton","props","inputRef","internalValue","setInternalValue","isControlled","undefined","inputValue","hasValue","Boolean","isSmall","handleChange","e","target","handleClear","current","syntheticEvent","currentTarget","focus","handleKeyDown","key","preventDefault","div","data-slot","name","input","ref","type","onKeyDown","button","onClick","aria-label"],"mappings":";AAEA,SAAQA,WAAW,EAAEC,MAAM,EAAEC,QAAQ,QAAO,QAAQ;AACpD,SAAQC,EAAE,QAAO,WAAW;AAC5B,SAAQC,IAAI,QAAO,UAAU;AAC7B,SAAQC,mBAAmB,QAAO,oBAAoB;AAQtD,OAAO,SAASC,aAAa,EAC3BC,SAAS,EACTC,OAAO,EACPC,IAAI,EACJC,MAAM,EACNC,KAAK,EACLC,QAAQ,EACRC,OAAO,EACPC,kBAAkB,IAAI,EACtB,GAAGC,OACe;IAClB,MAAMC,WAAWf,OAAyB;IAC1C,MAAM,CAACgB,eAAeC,iBAAiB,GAAGhB,SAAS;IACnD,MAAMiB,eAAeR,UAAUS;IAC/B,MAAMC,aAAaF,eAAeR,QAAQM;IAC1C,MAAMK,WAAWC,QAAQF;IACzB,MAAMG,UAAUf,SAAS;IAEzB,MAAMgB,eAAezB,YACnB,CAAC0B;QACC,IAAI,CAACP,cAAc;YACjBD,iBAAiBQ,EAAEC,MAAM,CAAChB,KAAK;QACjC;QACAC,WAAWc;IACb,GACA;QAACP;QAAcP;KAAS;IAG1B,MAAMgB,cAAc5B,YAAY;QAC9B,IAAI,CAACmB,cAAc;YACjBD,iBAAiB;QACnB;QAEA,IAAIN,YAAYI,SAASa,OAAO,EAAE;YAChCb,SAASa,OAAO,CAAClB,KAAK,GAAG;YACzB,MAAMmB,iBAAiB;gBACrBH,QAAQX,SAASa,OAAO;gBACxBE,eAAef,SAASa,OAAO;YACjC;YACAjB,SAASkB;QACX;QACAjB;QACAG,SAASa,OAAO,EAAEG;IACpB,GAAG;QAACb;QAAcP;QAAUC;KAAQ;IAEpC,MAAMoB,gBAAgBjC,YACpB,CAAC0B;QACC,IAAIA,EAAEQ,GAAG,KAAK,YAAYZ,UAAU;YAClCI,EAAES,cAAc;YAChBP;QACF;IACF,GACA;QAACN;QAAUM;KAAY;IAGzB,qBACE,MAACQ;QACCC,aAAU;QACV9B,WAAWJ,GAAGE,oBAAoB;YAACG;YAASC;YAAMC;QAAM,IAAIH;;0BAE5D,KAACH;gBACCkC,MAAK;gBACL/B,WAAWJ,GAAG,0CAA0CqB,UAAU,YAAY;;0BAEhF,KAACe;gBACCC,KAAKxB;gBACLyB,MAAK;gBACL9B,OAAOU;gBACPT,UAAUa;gBACViB,WAAWT;gBACX1B,WAAWJ,GACT,8CACA,gCACA,6CACA;gBAED,GAAGY,KAAK;;YAEVD,mBAAmBQ,0BAClB,KAACqB;gBACCF,MAAK;gBACLG,SAAShB;gBACTrB,WAAWJ,GACT,+CACA;gBAEF0C,cAAW;0BAEX,cAAA,KAACzC;oBAAKkC,MAAK;oBAAY/B,WAAU;;;;;AAK3C"}

package/dist/components/search/search-modal.d.ts

@@ -0,0 +1,25 @@
+import { Command as CommandPrimitive } from 'cmdk';
+import type { ComponentProps, ReactNode } from 'react';
+import { type ModalContentProps } from '../modal/modal';
+export type SearchContentProps = {
+    breakpoint?: string;
+} & Omit<ModalContentProps, 'open' | 'onOpenChange'>;
+export declare function SearchContent({ breakpoint, className, children, overlayClassName, onEscapeKeyDown, ...props }: SearchContentProps): import("react/jsx-runtime").JSX.Element;
+export type SearchInputProps = Omit<ComponentProps<typeof CommandPrimitive.Input>, 'value' | 'onValueChange'>;
+export declare function SearchInput({ className, ...props }: SearchInputProps): import("react/jsx-runtime").JSX.Element;
+export type SearchListProps = ComponentProps<typeof CommandPrimitive.List>;
+export declare function SearchList({ className, ...props }: SearchListProps): import("react/jsx-runtime").JSX.Element;
+export type SearchEmptyProps = ComponentProps<typeof CommandPrimitive.Empty>;
+export declare function SearchEmpty({ className, ...props }: SearchEmptyProps): import("react/jsx-runtime").JSX.Element;
+export type SearchGroupProps = ComponentProps<typeof CommandPrimitive.Group>;
+export declare function SearchGroup({ className, ...props }: SearchGroupProps): import("react/jsx-runtime").JSX.Element;
+export type SearchItemProps = ComponentProps<typeof CommandPrimitive.Item> & {
+    icon?: ReactNode;
+    description?: string;
+};
+export declare function SearchItem({ className, children, icon, description, ...props }: SearchItemProps): import("react/jsx-runtime").JSX.Element;
+export type SearchSeparatorProps = ComponentProps<typeof CommandPrimitive.Separator>;
+export declare function SearchSeparator({ className, ...props }: SearchSeparatorProps): import("react/jsx-runtime").JSX.Element;
+export type SearchFooterProps = ComponentProps<'div'>;
+export declare function SearchFooter({ className, ...props }: SearchFooterProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=search-modal.d.ts.map

package/dist/components/search/search-modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"search-modal.d.ts","sourceRoot":"","sources":["../../../src/components/search/search-modal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,IAAI,gBAAgB,EAAC,MAAM,MAAM,CAAC;AACjD,OAAO,KAAK,EAAC,cAAc,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AAKrD,OAAO,EAAiC,KAAK,iBAAiB,EAAC,MAAM,gBAAgB,CAAC;AAGtF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,GAAG,IAAI,CAAC,iBAAiB,EAAE,MAAM,GAAG,cAAc,CAAC,CAAC;AAErD,wBAAgB,aAAa,CAAC,EAC5B,UAAiC,EACjC,SAAS,EACT,QAAQ,EACR,gBAAgB,EAChB,eAAe,EACf,GAAG,KAAK,EACT,EAAE,kBAAkB,2CA8BpB;AAED,MAAM,MAAM,gBAAgB,GAAG,IAAI,CACjC,cAAc,CAAC,OAAO,gBAAgB,CAAC,KAAK,CAAC,EAC7C,OAAO,GAAG,eAAe,CAC1B,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,gBAAgB,2CAsBlE;AAED,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,CAAC;AAE3E,wBAAgB,UAAU,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,eAAe,2CAYhE;AAED,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,gBAAgB,CAAC,KAAK,CAAC,CAAC;AAE7E,wBAAgB,WAAW,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,gBAAgB,2CAQlE;AAED,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,gBAAgB,CAAC,KAAK,CAAC,CAAC;AAE7E,wBAAgB,WAAW,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,gBAAgB,2CAelE;AAED,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,GAAG;IAC3E,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,wBAAgB,UAAU,CAAC,EAAC,SAAS,EAAE,QAAQ,EAAE,IAAI,EAAE,WAAW,EAAE,GAAG,KAAK,EAAC,EAAE,eAAe,2CAsB7F;AAED,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,OAAO,gBAAgB,CAAC,SAAS,CAAC,CAAC;AAErF,wBAAgB,eAAe,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,oBAAoB,2CAQ1E;AAED,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AAEtD,wBAAgB,YAAY,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,iBAAiB,2CA0BpE"}

package/dist/components/search/search-modal.js

@@ -0,0 +1,162 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Command as CommandPrimitive } from 'cmdk';
+import { useCallback } from 'react';
+import { cn } from '../../utils/cn.js';
+import { Icon } from '../icon/index.js';
+import { Kbd } from '../kbd/index.js';
+import { Modal, ModalBody, ModalContent } from '../modal/modal.js';
+import { useSearchContext } from './search-context.js';
+export function SearchContent({ breakpoint = '(min-width: 768px)', className, children, overlayClassName, onEscapeKeyDown, ...props }) {
+    const { open, setOpen, searchValue, setSearchValue } = useSearchContext();
+    const handleEscapeKeyDown = useCallback((event)=>{
+        if (searchValue) {
+            event.preventDefault();
+            setSearchValue('');
+        } else {
+            onEscapeKeyDown?.(event);
+        }
+    }, [
+        searchValue,
+        setSearchValue,
+        onEscapeKeyDown
+    ]);
+    return /*#__PURE__*/ _jsx(Modal, {
+        open: open,
+        onOpenChange: setOpen,
+        breakpoint: breakpoint,
+        children: /*#__PURE__*/ _jsx(ModalContent, {
+            "data-slot": "search-content",
+            className: cn('top-[15%]! translate-y-0!', className),
+            overlayClassName: cn('backdrop-blur-sm', overlayClassName),
+            onEscapeKeyDown: handleEscapeKeyDown,
+            ...props,
+            children: /*#__PURE__*/ _jsx(ModalBody, {
+                className: "flex flex-col p-0 min-h-0 overflow-hidden md:overflow-clip",
+                children: children
+            })
+        })
+    });
+}
+export function SearchInput({ className, ...props }) {
+    const { open, searchValue, setSearchValue } = useSearchContext();
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "w-full shrink-0 flex items-center gap-8 border-b border-border-neutral-strong px-16 py-12",
+        children: [
+            /*#__PURE__*/ _jsx(Icon, {
+                name: "searchLine",
+                className: "size-16 shrink-0 text-foreground-neutral-muted"
+            }),
+            /*#__PURE__*/ _jsx(CommandPrimitive.Input, {
+                "data-slot": "search-input",
+                autoFocus: open,
+                value: searchValue,
+                onValueChange: setSearchValue,
+                className: cn('flex-1 bg-transparent text-sm leading-20 outline-none', 'placeholder:text-foreground-neutral-muted', 'disabled:cursor-not-allowed disabled:text-foreground-neutral-disabled', className),
+                ...props
+            }),
+            /*#__PURE__*/ _jsx(Kbd, {
+                children: "Esc"
+            })
+        ]
+    });
+}
+export function SearchList({ className, ...props }) {
+    return /*#__PURE__*/ _jsx(CommandPrimitive.List, {
+        "data-slot": "search-list",
+        className: cn('flex-1 min-h-0 w-full overflow-y-auto overflow-x-hidden px-8 py-4 scrollbar', 'md:max-h-400', className),
+        ...props
+    });
+}
+export function SearchEmpty({ className, ...props }) {
+    return /*#__PURE__*/ _jsx(CommandPrimitive.Empty, {
+        "data-slot": "search-empty",
+        className: cn('py-32 text-center text-sm text-foreground-neutral-muted', className),
+        ...props
+    });
+}
+export function SearchGroup({ className, ...props }) {
+    return /*#__PURE__*/ _jsx(CommandPrimitive.Group, {
+        "data-slot": "search-group",
+        className: cn('overflow-hidden', '[&_[cmdk-group-heading]]:px-8 [&_[cmdk-group-heading]]:py-4', '[&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:leading-20', '[&_[cmdk-group-heading]]:text-foreground-neutral-subtle', '[&_[cmdk-group-heading]]:select-none', className),
+        ...props
+    });
+}
+export function SearchItem({ className, children, icon, description, ...props }) {
+    return /*#__PURE__*/ _jsxs(CommandPrimitive.Item, {
+        "data-slot": "search-item",
+        className: cn('relative flex cursor-pointer select-none items-center gap-12 rounded-8 p-8', 'text-sm leading-20 text-foreground-neutral-subtle outline-none transition-colors', 'aria-selected:bg-background-components-hover aria-selected:text-foreground-neutral-base', 'data-[disabled=true]:pointer-events-none data-[disabled=true]:text-foreground-neutral-disabled', className),
+        ...props,
+        children: [
+            icon && /*#__PURE__*/ _jsx("span", {
+                className: "shrink-0 text-foreground-neutral-muted",
+                children: icon
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "flex-1 min-w-0",
+                children: [
+                    /*#__PURE__*/ _jsx("div", {
+                        className: "truncate",
+                        children: children
+                    }),
+                    description && /*#__PURE__*/ _jsx("div", {
+                        className: "truncate text-xs text-foreground-neutral-muted",
+                        children: description
+                    })
+                ]
+            })
+        ]
+    });
+}
+export function SearchSeparator({ className, ...props }) {
+    return /*#__PURE__*/ _jsx(CommandPrimitive.Separator, {
+        "data-slot": "search-separator",
+        className: cn('my-8 h-px bg-border-neutral-base', className),
+        ...props
+    });
+}
+export function SearchFooter({ className, ...props }) {
+    return /*#__PURE__*/ _jsxs("div", {
+        "data-slot": "search-footer",
+        className: cn('w-full shrink-0 flex items-center justify-end gap-12 px-16 py-12', 'border-t border-border-neutral-strong', 'bg-background-components-base', className),
+        ...props,
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: "flex items-center gap-8",
+                children: [
+                    /*#__PURE__*/ _jsx("span", {
+                        className: "text-xs font-medium text-foreground-neutral-subtle",
+                        children: "Navigation"
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "flex items-center gap-4",
+                        children: [
+                            /*#__PURE__*/ _jsx(Kbd, {
+                                children: "↓"
+                            }),
+                            /*#__PURE__*/ _jsx(Kbd, {
+                                children: "↑"
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: "h-12 w-px bg-border-neutral-strong"
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "flex items-center gap-8",
+                children: [
+                    /*#__PURE__*/ _jsx("span", {
+                        className: "text-xs font-medium text-foreground-neutral-subtle",
+                        children: "Open result"
+                    }),
+                    /*#__PURE__*/ _jsx(Kbd, {
+                        children: "↵"
+                    })
+                ]
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=search-modal.js.map

package/dist/components/search/search-modal.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/search/search-modal.tsx"],"sourcesContent":["import {Command as CommandPrimitive} from 'cmdk';\nimport type {ComponentProps, ReactNode} from 'react';\nimport {useCallback} from 'react';\nimport {cn} from 'utils/cn';\nimport {Icon} from '../icon';\nimport {Kbd} from '../kbd';\nimport {Modal, ModalBody, ModalContent, type ModalContentProps} from '../modal/modal';\nimport {useSearchContext} from './search-context';\n\nexport type SearchContentProps = {\n  breakpoint?: string;\n} & Omit<ModalContentProps, 'open' | 'onOpenChange'>;\n\nexport function SearchContent({\n  breakpoint = '(min-width: 768px)',\n  className,\n  children,\n  overlayClassName,\n  onEscapeKeyDown,\n  ...props\n}: SearchContentProps) {\n  const {open, setOpen, searchValue, setSearchValue} = useSearchContext();\n\n  const handleEscapeKeyDown = useCallback(\n    (event: KeyboardEvent) => {\n      if (searchValue) {\n        event.preventDefault();\n        setSearchValue('');\n      } else {\n        onEscapeKeyDown?.(event);\n      }\n    },\n    [searchValue, setSearchValue, onEscapeKeyDown],\n  );\n\n  return (\n    <Modal open={open} onOpenChange={setOpen} breakpoint={breakpoint}>\n      <ModalContent\n        data-slot=\"search-content\"\n        className={cn('top-[15%]! translate-y-0!', className)}\n        overlayClassName={cn('backdrop-blur-sm', overlayClassName)}\n        onEscapeKeyDown={handleEscapeKeyDown}\n        {...props}\n      >\n        <ModalBody className=\"flex flex-col p-0 min-h-0 overflow-hidden md:overflow-clip\">\n          {children}\n        </ModalBody>\n      </ModalContent>\n    </Modal>\n  );\n}\n\nexport type SearchInputProps = Omit<\n  ComponentProps<typeof CommandPrimitive.Input>,\n  'value' | 'onValueChange'\n>;\n\nexport function SearchInput({className, ...props}: SearchInputProps) {\n  const {open, searchValue, setSearchValue} = useSearchContext();\n\n  return (\n    <div className=\"w-full shrink-0 flex items-center gap-8 border-b border-border-neutral-strong px-16 py-12\">\n      <Icon name=\"searchLine\" className=\"size-16 shrink-0 text-foreground-neutral-muted\" />\n      <CommandPrimitive.Input\n        data-slot=\"search-input\"\n        autoFocus={open}\n        value={searchValue}\n        onValueChange={setSearchValue}\n        className={cn(\n          'flex-1 bg-transparent text-sm leading-20 outline-none',\n          'placeholder:text-foreground-neutral-muted',\n          'disabled:cursor-not-allowed disabled:text-foreground-neutral-disabled',\n          className,\n        )}\n        {...props}\n      />\n      <Kbd>Esc</Kbd>\n    </div>\n  );\n}\n\nexport type SearchListProps = ComponentProps<typeof CommandPrimitive.List>;\n\nexport function SearchList({className, ...props}: SearchListProps) {\n  return (\n    <CommandPrimitive.List\n      data-slot=\"search-list\"\n      className={cn(\n        'flex-1 min-h-0 w-full overflow-y-auto overflow-x-hidden px-8 py-4 scrollbar',\n        'md:max-h-400',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport type SearchEmptyProps = ComponentProps<typeof CommandPrimitive.Empty>;\n\nexport function SearchEmpty({className, ...props}: SearchEmptyProps) {\n  return (\n    <CommandPrimitive.Empty\n      data-slot=\"search-empty\"\n      className={cn('py-32 text-center text-sm text-foreground-neutral-muted', className)}\n      {...props}\n    />\n  );\n}\n\nexport type SearchGroupProps = ComponentProps<typeof CommandPrimitive.Group>;\n\nexport function SearchGroup({className, ...props}: SearchGroupProps) {\n  return (\n    <CommandPrimitive.Group\n      data-slot=\"search-group\"\n      className={cn(\n        'overflow-hidden',\n        '[&_[cmdk-group-heading]]:px-8 [&_[cmdk-group-heading]]:py-4',\n        '[&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:leading-20',\n        '[&_[cmdk-group-heading]]:text-foreground-neutral-subtle',\n        '[&_[cmdk-group-heading]]:select-none',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport type SearchItemProps = ComponentProps<typeof CommandPrimitive.Item> & {\n  icon?: ReactNode;\n  description?: string;\n};\n\nexport function SearchItem({className, children, icon, description, ...props}: SearchItemProps) {\n  return (\n    <CommandPrimitive.Item\n      data-slot=\"search-item\"\n      className={cn(\n        'relative flex cursor-pointer select-none items-center gap-12 rounded-8 p-8',\n        'text-sm leading-20 text-foreground-neutral-subtle outline-none transition-colors',\n        'aria-selected:bg-background-components-hover aria-selected:text-foreground-neutral-base',\n        'data-[disabled=true]:pointer-events-none data-[disabled=true]:text-foreground-neutral-disabled',\n        className,\n      )}\n      {...props}\n    >\n      {icon && <span className=\"shrink-0 text-foreground-neutral-muted\">{icon}</span>}\n      <div className=\"flex-1 min-w-0\">\n        <div className=\"truncate\">{children}</div>\n        {description && (\n          <div className=\"truncate text-xs text-foreground-neutral-muted\">{description}</div>\n        )}\n      </div>\n    </CommandPrimitive.Item>\n  );\n}\n\nexport type SearchSeparatorProps = ComponentProps<typeof CommandPrimitive.Separator>;\n\nexport function SearchSeparator({className, ...props}: SearchSeparatorProps) {\n  return (\n    <CommandPrimitive.Separator\n      data-slot=\"search-separator\"\n      className={cn('my-8 h-px bg-border-neutral-base', className)}\n      {...props}\n    />\n  );\n}\n\nexport type SearchFooterProps = ComponentProps<'div'>;\n\nexport function SearchFooter({className, ...props}: SearchFooterProps) {\n  return (\n    <div\n      data-slot=\"search-footer\"\n      className={cn(\n        'w-full shrink-0 flex items-center justify-end gap-12 px-16 py-12',\n        'border-t border-border-neutral-strong',\n        'bg-background-components-base',\n        className,\n      )}\n      {...props}\n    >\n      <div className=\"flex items-center gap-8\">\n        <span className=\"text-xs font-medium text-foreground-neutral-subtle\">Navigation</span>\n        <div className=\"flex items-center gap-4\">\n          <Kbd>↓</Kbd>\n          <Kbd>↑</Kbd>\n        </div>\n      </div>\n      <div className=\"h-12 w-px bg-border-neutral-strong\" />\n      <div className=\"flex items-center gap-8\">\n        <span className=\"text-xs font-medium text-foreground-neutral-subtle\">Open result</span>\n        <Kbd>↵</Kbd>\n      </div>\n    </div>\n  );\n}\n"],"names":["Command","CommandPrimitive","useCallback","cn","Icon","Kbd","Modal","ModalBody","ModalContent","useSearchContext","SearchContent","breakpoint","className","children","overlayClassName","onEscapeKeyDown","props","open","setOpen","searchValue","setSearchValue","handleEscapeKeyDown","event","preventDefault","onOpenChange","data-slot","SearchInput","div","name","Input","autoFocus","value","onValueChange","SearchList","List","SearchEmpty","Empty","SearchGroup","Group","SearchItem","icon","description","Item","span","SearchSeparator","Separator","SearchFooter"],"mappings":"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"}

package/dist/components/search/search-trigger.d.ts

@@ -0,0 +1,9 @@
+import type { VariantProps } from 'class-variance-authority';
+import type { ComponentProps } from 'react';
+import { searchTriggerVariants } from './search-variants';
+export type SearchTriggerProps = ComponentProps<'button'> & VariantProps<typeof searchTriggerVariants> & {
+    placeholder?: string;
+    shortcut?: string;
+};
+export declare function SearchTrigger({ className, variant, size, radius, placeholder, shortcut, ...props }: SearchTriggerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=search-trigger.d.ts.map

package/dist/components/search/search-trigger.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"search-trigger.d.ts","sourceRoot":"","sources":["../../../src/components/search/search-trigger.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,0BAA0B,CAAC;AAC3D,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,OAAO,CAAC;AAK1C,OAAO,EAAC,qBAAqB,EAAC,MAAM,mBAAmB,CAAC;AAExD,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC,QAAQ,CAAC,GACvD,YAAY,CAAC,OAAO,qBAAqB,CAAC,GAAG;IAC3C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEJ,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,OAAO,EACP,IAAI,EACJ,MAAM,EACN,WAAsB,EACtB,QAAe,EACf,GAAG,KAAK,EACT,EAAE,kBAAkB,2CAwBpB"}

package/dist/components/search/search-trigger.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../utils/cn.js';
+import { Icon } from '../icon/index.js';
+import { Kbd } from '../kbd/index.js';
+import { useSearchContext } from './search-context.js';
+import { searchTriggerVariants } from './search-variants.js';
+export function SearchTrigger({ className, variant, size, radius, placeholder = 'Search', shortcut = '⌘K', ...props }) {
+    const { setOpen } = useSearchContext();
+    const isSmall = size === 'small';
+    return /*#__PURE__*/ _jsxs("button", {
+        type: "button",
+        "data-slot": "search-trigger",
+        onClick: ()=>setOpen(true),
+        className: cn(searchTriggerVariants({
+            variant,
+            size,
+            radius
+        }), className),
+        ...props,
+        children: [
+            /*#__PURE__*/ _jsx(Icon, {
+                name: "searchLine",
+                className: cn('shrink-0', isSmall ? 'size-14' : 'size-16')
+            }),
+            /*#__PURE__*/ _jsx("span", {
+                className: "flex-1 text-left truncate",
+                children: placeholder
+            }),
+            /*#__PURE__*/ _jsx(Kbd, {
+                className: cn(isSmall && 'h-16 min-w-16 px-4 text-[10px]', radius === 'rounded' && 'rounded-full'),
+                children: shortcut
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=search-trigger.js.map

package/dist/components/search/search-trigger.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/search/search-trigger.tsx"],"sourcesContent":["import type {VariantProps} from 'class-variance-authority';\nimport type {ComponentProps} from 'react';\nimport {cn} from 'utils/cn';\nimport {Icon} from '../icon';\nimport {Kbd} from '../kbd';\nimport {useSearchContext} from './search-context';\nimport {searchTriggerVariants} from './search-variants';\n\nexport type SearchTriggerProps = ComponentProps<'button'> &\n  VariantProps<typeof searchTriggerVariants> & {\n    placeholder?: string;\n    shortcut?: string;\n  };\n\nexport function SearchTrigger({\n  className,\n  variant,\n  size,\n  radius,\n  placeholder = 'Search',\n  shortcut = '⌘K',\n  ...props\n}: SearchTriggerProps) {\n  const {setOpen} = useSearchContext();\n  const isSmall = size === 'small';\n\n  return (\n    <button\n      type=\"button\"\n      data-slot=\"search-trigger\"\n      onClick={() => setOpen(true)}\n      className={cn(searchTriggerVariants({variant, size, radius}), className)}\n      {...props}\n    >\n      <Icon name=\"searchLine\" className={cn('shrink-0', isSmall ? 'size-14' : 'size-16')} />\n      <span className=\"flex-1 text-left truncate\">{placeholder}</span>\n      <Kbd\n        className={cn(\n          isSmall && 'h-16 min-w-16 px-4 text-[10px]',\n          radius === 'rounded' && 'rounded-full',\n        )}\n      >\n        {shortcut}\n      </Kbd>\n    </button>\n  );\n}\n"],"names":["cn","Icon","Kbd","useSearchContext","searchTriggerVariants","SearchTrigger","className","variant","size","radius","placeholder","shortcut","props","setOpen","isSmall","button","type","data-slot","onClick","name","span"],"mappings":";AAEA,SAAQA,EAAE,QAAO,WAAW;AAC5B,SAAQC,IAAI,QAAO,UAAU;AAC7B,SAAQC,GAAG,QAAO,SAAS;AAC3B,SAAQC,gBAAgB,QAAO,mBAAmB;AAClD,SAAQC,qBAAqB,QAAO,oBAAoB;AAQxD,OAAO,SAASC,cAAc,EAC5BC,SAAS,EACTC,OAAO,EACPC,IAAI,EACJC,MAAM,EACNC,cAAc,QAAQ,EACtBC,WAAW,IAAI,EACf,GAAGC,OACgB;IACnB,MAAM,EAACC,OAAO,EAAC,GAAGV;IAClB,MAAMW,UAAUN,SAAS;IAEzB,qBACE,MAACO;QACCC,MAAK;QACLC,aAAU;QACVC,SAAS,IAAML,QAAQ;QACvBP,WAAWN,GAAGI,sBAAsB;YAACG;YAASC;YAAMC;QAAM,IAAIH;QAC7D,GAAGM,KAAK;;0BAET,KAACX;gBAAKkB,MAAK;gBAAab,WAAWN,GAAG,YAAYc,UAAU,YAAY;;0BACxE,KAACM;gBAAKd,WAAU;0BAA6BI;;0BAC7C,KAACR;gBACCI,WAAWN,GACTc,WAAW,kCACXL,WAAW,aAAa;0BAGzBE;;;;AAIT"}

package/dist/components/search/search-variants.d.ts

@@ -0,0 +1,14 @@
+import type { Transition } from 'framer-motion';
+export declare const searchInputVariants: (props?: ({
+    variant?: "primary" | "secondary" | null | undefined;
+    size?: "base" | "small" | null | undefined;
+    radius?: "rounded" | "squared" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const searchTriggerVariants: (props?: ({
+    variant?: "primary" | "secondary" | null | undefined;
+    size?: "base" | "small" | null | undefined;
+    radius?: "rounded" | "squared" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const searchDefaultTransition: Transition;
+export declare const SHORTCUT_KEY_REGEX: RegExp;
+//# sourceMappingURL=search-variants.d.ts.map

package/dist/components/search/search-variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"search-variants.d.ts","sourceRoot":"","sources":["../../../src/components/search/search-variants.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,eAAe,CAAC;AAiC9C,eAAO,MAAM,mBAAmB;;;;8EAc9B,CAAC;AAEH,eAAO,MAAM,qBAAqB;;;;8EA6BjC,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,UAIrC,CAAC;AAEF,eAAO,MAAM,kBAAkB,QAAiC,CAAC"}

package/dist/components/search/search-variants.js

@@ -0,0 +1,90 @@
+import { cva } from 'class-variance-authority';
+const sharedInputStyles = [
+    'inline-flex items-center gap-8',
+    'text-sm leading-20',
+    'transition-[color,box-shadow,background-color] outline-none'
+];
+const variantStyles = {
+    primary: {
+        base: [
+            'bg-background-field-base',
+            'shadow-button-neutral'
+        ],
+        focus: 'focus-within:shadow-border-interactive-with-active',
+        hover: 'hover:bg-background-field-hover',
+        focusVisible: 'focus-visible:shadow-border-interactive-with-active'
+    },
+    secondary: {
+        base: [
+            'bg-background-field-component',
+            'border border-border-neutral-strong'
+        ],
+        focus: 'focus-within:shadow-border-interactive-with-active',
+        hover: 'hover:bg-background-field-component-hover',
+        focusVisible: 'focus-visible:shadow-border-interactive-with-active'
+    }
+};
+const sizeStyles = {
+    base: 'h-32 px-8 py-6',
+    small: 'h-28 px-8 py-4'
+};
+const radiusStyles = {
+    rounded: 'rounded-full',
+    squared: 'rounded-6'
+};
+export const searchInputVariants = cva(sharedInputStyles, {
+    variants: {
+        variant: {
+            primary: [
+                ...variantStyles.primary.base,
+                variantStyles.primary.focus
+            ],
+            secondary: [
+                ...variantStyles.secondary.base,
+                variantStyles.secondary.focus
+            ]
+        },
+        size: sizeStyles,
+        radius: radiusStyles
+    },
+    defaultVariants: {
+        variant: 'primary',
+        size: 'base',
+        radius: 'squared'
+    }
+});
+export const searchTriggerVariants = cva([
+    ...sharedInputStyles,
+    'cursor-pointer text-foreground-neutral-muted',
+    'disabled:pointer-events-none disabled:cursor-not-allowed disabled:text-foreground-neutral-disabled'
+], {
+    variants: {
+        variant: {
+            primary: [
+                ...variantStyles.primary.base,
+                variantStyles.primary.hover,
+                variantStyles.primary.focusVisible
+            ],
+            secondary: [
+                ...variantStyles.secondary.base,
+                variantStyles.secondary.hover,
+                variantStyles.secondary.focusVisible
+            ]
+        },
+        size: sizeStyles,
+        radius: radiusStyles
+    },
+    defaultVariants: {
+        variant: 'primary',
+        size: 'base',
+        radius: 'squared'
+    }
+});
+export const searchDefaultTransition = {
+    type: 'spring',
+    stiffness: 400,
+    damping: 30
+};
+export const SHORTCUT_KEY_REGEX = /^(meta\+|cmd\+|ctrl\+|⌘\+?)/i;
+
+//# sourceMappingURL=search-variants.js.map

package/dist/components/search/search-variants.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/search/search-variants.ts"],"sourcesContent":["import {cva} from 'class-variance-authority';\nimport type {Transition} from 'framer-motion';\n\nconst sharedInputStyles = [\n  'inline-flex items-center gap-8',\n  'text-sm leading-20',\n  'transition-[color,box-shadow,background-color] outline-none',\n];\n\nconst variantStyles = {\n  primary: {\n    base: ['bg-background-field-base', 'shadow-button-neutral'],\n    focus: 'focus-within:shadow-border-interactive-with-active',\n    hover: 'hover:bg-background-field-hover',\n    focusVisible: 'focus-visible:shadow-border-interactive-with-active',\n  },\n  secondary: {\n    base: ['bg-background-field-component', 'border border-border-neutral-strong'],\n    focus: 'focus-within:shadow-border-interactive-with-active',\n    hover: 'hover:bg-background-field-component-hover',\n    focusVisible: 'focus-visible:shadow-border-interactive-with-active',\n  },\n};\n\nconst sizeStyles = {\n  base: 'h-32 px-8 py-6',\n  small: 'h-28 px-8 py-4',\n};\n\nconst radiusStyles = {\n  rounded: 'rounded-full',\n  squared: 'rounded-6',\n};\n\nexport const searchInputVariants = cva(sharedInputStyles, {\n  variants: {\n    variant: {\n      primary: [...variantStyles.primary.base, variantStyles.primary.focus],\n      secondary: [...variantStyles.secondary.base, variantStyles.secondary.focus],\n    },\n    size: sizeStyles,\n    radius: radiusStyles,\n  },\n  defaultVariants: {\n    variant: 'primary',\n    size: 'base',\n    radius: 'squared',\n  },\n});\n\nexport const searchTriggerVariants = cva(\n  [\n    ...sharedInputStyles,\n    'cursor-pointer text-foreground-neutral-muted',\n    'disabled:pointer-events-none disabled:cursor-not-allowed disabled:text-foreground-neutral-disabled',\n  ],\n  {\n    variants: {\n      variant: {\n        primary: [\n          ...variantStyles.primary.base,\n          variantStyles.primary.hover,\n          variantStyles.primary.focusVisible,\n        ],\n        secondary: [\n          ...variantStyles.secondary.base,\n          variantStyles.secondary.hover,\n          variantStyles.secondary.focusVisible,\n        ],\n      },\n      size: sizeStyles,\n      radius: radiusStyles,\n    },\n    defaultVariants: {\n      variant: 'primary',\n      size: 'base',\n      radius: 'squared',\n    },\n  },\n);\n\nexport const searchDefaultTransition: Transition = {\n  type: 'spring',\n  stiffness: 400,\n  damping: 30,\n};\n\nexport const SHORTCUT_KEY_REGEX = /^(meta\\+|cmd\\+|ctrl\\+|⌘\\+?)/i;\n"],"names":["cva","sharedInputStyles","variantStyles","primary","base","focus","hover","focusVisible","secondary","sizeStyles","small","radiusStyles","rounded","squared","searchInputVariants","variants","variant","size","radius","defaultVariants","searchTriggerVariants","searchDefaultTransition","type","stiffness","damping","SHORTCUT_KEY_REGEX"],"mappings":"AAAA,SAAQA,GAAG,QAAO,2BAA2B;AAG7C,MAAMC,oBAAoB;IACxB;IACA;IACA;CACD;AAED,MAAMC,gBAAgB;IACpBC,SAAS;QACPC,MAAM;YAAC;YAA4B;SAAwB;QAC3DC,OAAO;QACPC,OAAO;QACPC,cAAc;IAChB;IACAC,WAAW;QACTJ,MAAM;YAAC;YAAiC;SAAsC;QAC9EC,OAAO;QACPC,OAAO;QACPC,cAAc;IAChB;AACF;AAEA,MAAME,aAAa;IACjBL,MAAM;IACNM,OAAO;AACT;AAEA,MAAMC,eAAe;IACnBC,SAAS;IACTC,SAAS;AACX;AAEA,OAAO,MAAMC,sBAAsBd,IAAIC,mBAAmB;IACxDc,UAAU;QACRC,SAAS;YACPb,SAAS;mBAAID,cAAcC,OAAO,CAACC,IAAI;gBAAEF,cAAcC,OAAO,CAACE,KAAK;aAAC;YACrEG,WAAW;mBAAIN,cAAcM,SAAS,CAACJ,IAAI;gBAAEF,cAAcM,SAAS,CAACH,KAAK;aAAC;QAC7E;QACAY,MAAMR;QACNS,QAAQP;IACV;IACAQ,iBAAiB;QACfH,SAAS;QACTC,MAAM;QACNC,QAAQ;IACV;AACF,GAAG;AAEH,OAAO,MAAME,wBAAwBpB,IACnC;OACKC;IACH;IACA;CACD,EACD;IACEc,UAAU;QACRC,SAAS;YACPb,SAAS;mBACJD,cAAcC,OAAO,CAACC,IAAI;gBAC7BF,cAAcC,OAAO,CAACG,KAAK;gBAC3BJ,cAAcC,OAAO,CAACI,YAAY;aACnC;YACDC,WAAW;mBACNN,cAAcM,SAAS,CAACJ,IAAI;gBAC/BF,cAAcM,SAAS,CAACF,KAAK;gBAC7BJ,cAAcM,SAAS,CAACD,YAAY;aACrC;QACH;QACAU,MAAMR;QACNS,QAAQP;IACV;IACAQ,iBAAiB;QACfH,SAAS;QACTC,MAAM;QACNC,QAAQ;IACV;AACF,GACA;AAEF,OAAO,MAAMG,0BAAsC;IACjDC,MAAM;IACNC,WAAW;IACXC,SAAS;AACX,EAAE;AAEF,OAAO,MAAMC,qBAAqB,+BAA+B"}

package/dist/components/search/search.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+export type SearchProps = {
+    children: ReactNode;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    defaultOpen?: boolean;
+    shortcutKey?: string;
+    shouldFilter?: boolean;
+};
+export declare function Search({ children, open: controlledOpen, onOpenChange, defaultOpen, shortcutKey, shouldFilter, }: SearchProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=search.d.ts.map

package/dist/components/search/search.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"search.d.ts","sourceRoot":"","sources":["../../../src/components/search/search.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAIrC,MAAM,MAAM,WAAW,GAAG;IACxB,QAAQ,EAAE,SAAS,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AAEF,wBAAgB,MAAM,CAAC,EACrB,QAAQ,EACR,IAAI,EAAE,cAAc,EACpB,YAAY,EACZ,WAAmB,EACnB,WAAW,EACX,YAAmB,GACpB,EAAE,WAAW,2CAyBb"}

package/dist/components/search/search.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Command as CommandPrimitive } from 'cmdk';
+import { useCallback, useState } from 'react';
+import { SearchContext, useControllableState, useKeyboardShortcut } from './search-context.js';
+export function Search({ children, open: controlledOpen, onOpenChange, defaultOpen = false, shortcutKey, shouldFilter = true }) {
+    const [open, setOpen] = useControllableState(controlledOpen, defaultOpen, onOpenChange);
+    const [searchValue, setSearchValue] = useState('');
+    const handleOpen = useCallback(()=>setOpen(true), [
+        setOpen
+    ]);
+    useKeyboardShortcut(shortcutKey, handleOpen);
+    const handleSetOpen = useCallback((newOpen)=>{
+        if (!newOpen) {
+            setSearchValue('');
+        }
+        setOpen(newOpen);
+    }, [
+        setOpen
+    ]);
+    return /*#__PURE__*/ _jsx(SearchContext.Provider, {
+        value: {
+            open,
+            setOpen: handleSetOpen,
+            searchValue,
+            setSearchValue
+        },
+        children: /*#__PURE__*/ _jsx(CommandPrimitive, {
+            "data-slot": "search",
+            shouldFilter: shouldFilter,
+            children: children
+        })
+    });
+}
+
+//# sourceMappingURL=search.js.map

package/dist/components/search/search.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/search/search.tsx"],"sourcesContent":["import {Command as CommandPrimitive} from 'cmdk';\nimport type {ReactNode} from 'react';\nimport {useCallback, useState} from 'react';\nimport {SearchContext, useControllableState, useKeyboardShortcut} from './search-context';\n\nexport type SearchProps = {\n  children: ReactNode;\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  defaultOpen?: boolean;\n  shortcutKey?: string;\n  shouldFilter?: boolean;\n};\n\nexport function Search({\n  children,\n  open: controlledOpen,\n  onOpenChange,\n  defaultOpen = false,\n  shortcutKey,\n  shouldFilter = true,\n}: SearchProps) {\n  const [open, setOpen] = useControllableState(controlledOpen, defaultOpen, onOpenChange);\n  const [searchValue, setSearchValue] = useState('');\n\n  const handleOpen = useCallback(() => setOpen(true), [setOpen]);\n\n  useKeyboardShortcut(shortcutKey, handleOpen);\n\n  const handleSetOpen = useCallback(\n    (newOpen: boolean) => {\n      if (!newOpen) {\n        setSearchValue('');\n      }\n      setOpen(newOpen);\n    },\n    [setOpen],\n  );\n\n  return (\n    <SearchContext.Provider value={{open, setOpen: handleSetOpen, searchValue, setSearchValue}}>\n      <CommandPrimitive data-slot=\"search\" shouldFilter={shouldFilter}>\n        {children}\n      </CommandPrimitive>\n    </SearchContext.Provider>\n  );\n}\n"],"names":["Command","CommandPrimitive","useCallback","useState","SearchContext","useControllableState","useKeyboardShortcut","Search","children","open","controlledOpen","onOpenChange","defaultOpen","shortcutKey","shouldFilter","setOpen","searchValue","setSearchValue","handleOpen","handleSetOpen","newOpen","Provider","value","data-slot"],"mappings":";AAAA,SAAQA,WAAWC,gBAAgB,QAAO,OAAO;AAEjD,SAAQC,WAAW,EAAEC,QAAQ,QAAO,QAAQ;AAC5C,SAAQC,aAAa,EAAEC,oBAAoB,EAAEC,mBAAmB,QAAO,mBAAmB;AAW1F,OAAO,SAASC,OAAO,EACrBC,QAAQ,EACRC,MAAMC,cAAc,EACpBC,YAAY,EACZC,cAAc,KAAK,EACnBC,WAAW,EACXC,eAAe,IAAI,EACP;IACZ,MAAM,CAACL,MAAMM,QAAQ,GAAGV,qBAAqBK,gBAAgBE,aAAaD;IAC1E,MAAM,CAACK,aAAaC,eAAe,GAAGd,SAAS;IAE/C,MAAMe,aAAahB,YAAY,IAAMa,QAAQ,OAAO;QAACA;KAAQ;IAE7DT,oBAAoBO,aAAaK;IAEjC,MAAMC,gBAAgBjB,YACpB,CAACkB;QACC,IAAI,CAACA,SAAS;YACZH,eAAe;QACjB;QACAF,QAAQK;IACV,GACA;QAACL;KAAQ;IAGX,qBACE,KAACX,cAAciB,QAAQ;QAACC,OAAO;YAACb;YAAMM,SAASI;YAAeH;YAAaC;QAAc;kBACvF,cAAA,KAAChB;YAAiBsB,aAAU;YAAST,cAAcA;sBAChDN;;;AAIT"}