@classytic/fluid 0.1.2 → 0.2.0

package/dist/layout.js

@@ -1,62 +1,4 @@
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-import { jsx } from 'react/jsx-runtime';
-
-// src/utils.ts
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-var backgrounds = {
-  default: "bg-background",
-  muted: "bg-muted",
-  primary: "bg-primary text-primary-foreground",
-  transparent: "bg-transparent"
-};
-var paddings = {
-  none: "",
-  sm: "py-8 md:py-12",
-  md: "py-12 md:py-16",
-  lg: "py-16 md:py-24",
-  xl: "py-24 md:py-32"
-};
-function Section({
-  id,
-  children,
-  className,
-  background = "default",
-  padding = "sm"
-}) {
-  return /* @__PURE__ */ jsx(
-    "section",
-    {
-      id,
-      className: cn(backgrounds[background], paddings[padding], className),
-      children
-    }
-  );
-}
-var maxWidthClasses = {
-  sm: "max-w-screen-sm",
-  md: "max-w-screen-md",
-  lg: "max-w-screen-lg",
-  xl: "max-w-screen-xl",
-  "2xl": "max-w-screen-2xl",
-  "4xl": "max-w-4xl",
-  "5xl": "max-w-5xl",
-  "6xl": "max-w-6xl",
-  "7xl": "max-w-7xl",
-  full: "max-w-full"
-};
-function Container({
-  children,
-  className,
-  maxWidth = "7xl"
-}) {
-  const isFullWidth = maxWidth === "full";
-  const baseClass = isFullWidth ? "w-full px-4 sm:px-6 lg:px-10" : "mx-auto px-4 sm:px-6 lg:px-8";
-  return /* @__PURE__ */ jsx("div", { className: cn(baseClass, !isFullWidth && maxWidthClasses[maxWidth], className), children });
-}
-
-export { Container, Section, cn };
+export { Container, Section } from './chunk-H3NFL3GJ.js';
+export { cn } from './chunk-GUHK2DTW.js';
 //# sourceMappingURL=layout.js.map
 //# sourceMappingURL=layout.js.map

package/dist/layout.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/utils.ts","../src/layout/section.tsx","../src/layout/container.tsx"],"names":["jsx"],"mappings":";;;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACSA,IAAM,WAAA,GAA0C;AAAA,EAC9C,OAAA,EAAS,eAAA;AAAA,EACT,KAAA,EAAO,UAAA;AAAA,EACP,OAAA,EAAS,oCAAA;AAAA,EACT,WAAA,EAAa;AACf,CAAA;AAEA,IAAM,QAAA,GAAoC;AAAA,EACxC,IAAA,EAAM,EAAA;AAAA,EACN,EAAA,EAAI,eAAA;AAAA,EACJ,EAAA,EAAI,gBAAA;AAAA,EACJ,EAAA,EAAI,gBAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAEO,SAAS,OAAA,CAAQ;AAAA,EACtB,EAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA,GAAa,SAAA;AAAA,EACb,OAAA,GAAU;AACZ,CAAA,EAAiB;AACf,EAAA,uBACE,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,EAAA;AAAA,MACA,SAAA,EAAW,GAAG,WAAA,CAAY,UAAU,GAAG,QAAA,CAAS,OAAO,GAAG,SAAS,CAAA;AAAA,MAElE;AAAA;AAAA,GACH;AAEJ;ACjCA,IAAM,eAAA,GAA4C;AAAA,EAChD,EAAA,EAAI,iBAAA;AAAA,EACJ,EAAA,EAAI,iBAAA;AAAA,EACJ,EAAA,EAAI,iBAAA;AAAA,EACJ,EAAA,EAAI,iBAAA;AAAA,EACJ,KAAA,EAAO,kBAAA;AAAA,EACP,KAAA,EAAO,WAAA;AAAA,EACP,KAAA,EAAO,WAAA;AAAA,EACP,KAAA,EAAO,WAAA;AAAA,EACP,KAAA,EAAO,WAAA;AAAA,EACP,IAAA,EAAM;AACR,CAAA;AAEO,SAAS,SAAA,CAAU;AAAA,EACxB,QAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA,GAAW;AACb,CAAA,EAAmB;AACjB,EAAA,MAAM,cAAc,QAAA,KAAa,MAAA;AACjC,EAAA,MAAM,SAAA,GAAY,cACd,8BAAA,GACA,8BAAA;AAEJ,EAAA,uBACEA,GAAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,EAAA,CAAG,SAAA,EAAW,CAAC,WAAA,IAAe,eAAA,CAAgB,QAAQ,CAAA,EAAG,SAAS,GAC/E,QAAA,EACH,CAAA;AAEJ","file":"layout.js","sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n  return twMerge(clsx(inputs));\r\n}\r\n","import { cn } from \"../utils\";\r\nimport type { ReactNode } from \"react\";\r\n\r\ntype Background = \"default\" | \"muted\" | \"primary\" | \"transparent\";\r\ntype Padding = \"none\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\r\n\r\nexport interface SectionProps {\r\n  id?: string;\r\n  children: ReactNode;\r\n  className?: string;\r\n  background?: Background;\r\n  padding?: Padding;\r\n}\r\n\r\nconst backgrounds: Record<Background, string> = {\r\n  default: \"bg-background\",\r\n  muted: \"bg-muted\",\r\n  primary: \"bg-primary text-primary-foreground\",\r\n  transparent: \"bg-transparent\",\r\n};\r\n\r\nconst paddings: Record<Padding, string> = {\r\n  none: \"\",\r\n  sm: \"py-8 md:py-12\",\r\n  md: \"py-12 md:py-16\",\r\n  lg: \"py-16 md:py-24\",\r\n  xl: \"py-24 md:py-32\",\r\n};\r\n\r\nexport function Section({\r\n  id,\r\n  children,\r\n  className,\r\n  background = \"default\",\r\n  padding = \"sm\",\r\n}: SectionProps) {\r\n  return (\r\n    <section\r\n      id={id}\r\n      className={cn(backgrounds[background], paddings[padding], className)}\r\n    >\r\n      {children}\r\n    </section>\r\n  );\r\n}\r\n","import { cn } from \"../utils\";\r\nimport type { ReactNode } from \"react\";\r\n\r\ntype MaxWidth = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"4xl\" | \"5xl\" | \"6xl\" | \"7xl\" | \"full\";\r\n\r\nexport interface ContainerProps {\r\n  children: ReactNode;\r\n  className?: string;\r\n  maxWidth?: MaxWidth;\r\n}\r\n\r\nconst maxWidthClasses: Record<MaxWidth, string> = {\r\n  sm: \"max-w-screen-sm\",\r\n  md: \"max-w-screen-md\",\r\n  lg: \"max-w-screen-lg\",\r\n  xl: \"max-w-screen-xl\",\r\n  \"2xl\": \"max-w-screen-2xl\",\r\n  \"4xl\": \"max-w-4xl\",\r\n  \"5xl\": \"max-w-5xl\",\r\n  \"6xl\": \"max-w-6xl\",\r\n  \"7xl\": \"max-w-7xl\",\r\n  full: \"max-w-full\",\r\n};\r\n\r\nexport function Container({\r\n  children,\r\n  className,\r\n  maxWidth = \"7xl\",\r\n}: ContainerProps) {\r\n  const isFullWidth = maxWidth === \"full\";\r\n  const baseClass = isFullWidth\r\n    ? \"w-full px-4 sm:px-6 lg:px-10\"\r\n    : \"mx-auto px-4 sm:px-6 lg:px-8\";\r\n\r\n  return (\r\n    <div className={cn(baseClass, !isFullWidth && maxWidthClasses[maxWidth], className)}>\r\n      {children}\r\n    </div>\r\n  );\r\n}\r\n"]}
+{"version":3,"sources":[],"names":[],"mappings":"","file":"layout.js"}

package/dist/search.d.ts

@@ -0,0 +1,172 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode, KeyboardEvent } from 'react';
+import { U as UseBaseSearchReturn } from './use-base-search-AS5Z3SAy.js';
+
+interface SearchRootProps {
+    children: ReactNode;
+    hook: UseBaseSearchReturn;
+    className?: string;
+}
+/**
+ * Root search component that provides context to all child components
+ *
+ * @example
+ * <Search.Root hook={useMySearch()}>
+ *   <Search.Input />
+ *   <Search.Filters />
+ *   <Search.Actions />
+ * </Search.Root>
+ */
+declare function SearchRoot({ children, hook, className }: SearchRootProps): react_jsx_runtime.JSX.Element;
+
+interface SearchInputProps {
+    placeholder?: string;
+    className?: string;
+    disabled?: boolean;
+    showIcon?: boolean;
+    showClearButton?: boolean;
+    onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
+}
+/**
+ * Search input component using modern shadcn InputGroup pattern
+ *
+ * @example
+ * <Search.Input placeholder="Search..." />
+ */
+declare function SearchInput({ placeholder, className, disabled, showIcon, showClearButton, onKeyDown, ...props }: SearchInputProps): react_jsx_runtime.JSX.Element;
+
+interface SearchTypeOption {
+    value: string;
+    label: string;
+}
+interface SearchTypeInputProps {
+    placeholder?: string;
+    className?: string;
+    disabled?: boolean;
+    showIcon?: boolean;
+    showClearButton?: boolean;
+    searchTypeOptions?: SearchTypeOption[];
+    onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
+}
+/**
+ * Search input component with type selector using InputGroup pattern
+ *
+ * @example
+ * <Search.TypeInput
+ *   placeholder="Search..."
+ *   searchTypeOptions={[
+ *     { value: "_id", label: "ID" },
+ *     { value: "customerPhone", label: "Phone" },
+ *     { value: "customerEmail", label: "Email" },
+ *   ]}
+ * />
+ */
+declare function SearchTypeInput({ placeholder, className, disabled, showIcon, showClearButton, searchTypeOptions, onKeyDown, ...props }: SearchTypeInputProps): react_jsx_runtime.JSX.Element;
+
+interface SearchFiltersProps {
+    children: ReactNode;
+    title?: string;
+    description?: string;
+    disabled?: boolean;
+    className?: string;
+}
+/**
+ * Search filters component with mobile sheet support
+ *
+ * @example
+ * <Search.Filters>
+ *   <TagChoiceInput label="Category" ... />
+ *   <SelectInput label="Status" ... />
+ * </Search.Filters>
+ */
+declare function SearchFilters({ children, title, description, disabled, className, }: SearchFiltersProps): react_jsx_runtime.JSX.Element;
+
+interface SearchActionsProps {
+    showSearchButton?: boolean;
+    showClearButton?: boolean;
+    searchButtonText?: string;
+    clearButtonText?: string;
+    disabled?: boolean;
+    className?: string;
+}
+/**
+ * Search action buttons
+ */
+declare function SearchActions({ showSearchButton, showClearButton, searchButtonText, clearButtonText, disabled, className, }: SearchActionsProps): react_jsx_runtime.JSX.Element;
+
+interface SearchContainerProps {
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * Container for search input and action buttons
+ * Provides responsive layout
+ *
+ * @example
+ * <Search.Container>
+ *   <Search.Input />
+ *   <Search.Filters />
+ *   <Search.Actions />
+ * </Search.Container>
+ */
+declare function SearchContainer({ children, className }: SearchContainerProps): react_jsx_runtime.JSX.Element;
+
+interface SearchFilterActionsProps {
+    onClose?: () => void;
+    disabled?: boolean;
+}
+/**
+ * Filter actions component (Reset/Apply buttons)
+ * Used inside filter popovers/sheets
+ */
+declare function SearchFilterActions({ onClose, disabled }: SearchFilterActionsProps): react_jsx_runtime.JSX.Element;
+
+interface SearchProviderProps {
+    children: ReactNode;
+    value: UseBaseSearchReturn;
+}
+declare function SearchProvider({ children, value }: SearchProviderProps): react_jsx_runtime.JSX.Element;
+declare function useSearch(): UseBaseSearchReturn;
+
+/**
+ * Composable Search Component System
+ *
+ * @example
+ * ```tsx
+ * import { Search } from "@classytic/fluid";
+ *
+ * function MySearch() {
+ *   const searchHook = useMySearch();
+ *
+ *   return (
+ *     <Search.Root hook={searchHook}>
+ *       <Search.Container>
+ *         <Search.Input placeholder="Search..." />
+ *         <Search.Filters>
+ *           <SelectInput ... />
+ *           <TagChoiceInput ... />
+ *         </Search.Filters>
+ *         <Search.Actions />
+ *       </Search.Container>
+ *     </Search.Root>
+ *   );
+ * }
+ * ```
+ */
+
+type index_SearchActionsProps = SearchActionsProps;
+type index_SearchContainerProps = SearchContainerProps;
+type index_SearchFilterActionsProps = SearchFilterActionsProps;
+type index_SearchFiltersProps = SearchFiltersProps;
+type index_SearchInputProps = SearchInputProps;
+declare const index_SearchProvider: typeof SearchProvider;
+type index_SearchProviderProps = SearchProviderProps;
+type index_SearchRootProps = SearchRootProps;
+type index_SearchTypeInputProps = SearchTypeInputProps;
+type index_SearchTypeOption = SearchTypeOption;
+declare const index_useSearch: typeof useSearch;
+declare namespace index {
+  export { SearchActions as Actions, SearchContainer as Container, SearchFilterActions as FilterActions, SearchFilters as Filters, SearchInput as Input, SearchRoot as Root, type index_SearchActionsProps as SearchActionsProps, type index_SearchContainerProps as SearchContainerProps, type index_SearchFilterActionsProps as SearchFilterActionsProps, type index_SearchFiltersProps as SearchFiltersProps, type index_SearchInputProps as SearchInputProps, index_SearchProvider as SearchProvider, type index_SearchProviderProps as SearchProviderProps, type index_SearchRootProps as SearchRootProps, type index_SearchTypeInputProps as SearchTypeInputProps, type index_SearchTypeOption as SearchTypeOption, SearchTypeInput as TypeInput, index_useSearch as useSearch };
+}
+
+export { index as Search, type SearchActionsProps, type SearchContainerProps, type SearchFilterActionsProps, type SearchFiltersProps, type SearchInputProps, SearchProvider, type SearchProviderProps, type SearchRootProps, type SearchTypeInputProps, type SearchTypeOption, useSearch };

package/dist/search.js

@@ -0,0 +1,341 @@
+import { useIsMobile, SheetWrapper } from './chunk-J2YRTQE4.js';
+import { __export, cn } from './chunk-GUHK2DTW.js';
+import { createContext, useContext, useState } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Search, X, Filter, RotateCcw } from 'lucide-react';
+import { InputGroup, InputGroupAddon, InputGroupInput, InputGroupButton } from '@/components/ui/input-group';
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@/components/ui/select';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Popover, PopoverTrigger, PopoverContent } from '@/components/ui/popover';
+
+// src/components/search/index.ts
+var search_exports = {};
+__export(search_exports, {
+  Actions: () => SearchActions,
+  Container: () => SearchContainer,
+  FilterActions: () => SearchFilterActions,
+  Filters: () => SearchFilters,
+  Input: () => SearchInput,
+  Root: () => SearchRoot,
+  SearchProvider: () => SearchProvider,
+  TypeInput: () => SearchTypeInput,
+  useSearch: () => useSearch
+});
+var SearchContext = createContext(void 0);
+function SearchProvider({ children, value }) {
+  return /* @__PURE__ */ jsx(SearchContext.Provider, { value, children });
+}
+function useSearch() {
+  const context = useContext(SearchContext);
+  if (!context) {
+    throw new Error("useSearch must be used within SearchProvider");
+  }
+  return context;
+}
+function SearchRoot({ children, hook, className }) {
+  return /* @__PURE__ */ jsx(SearchProvider, { value: hook, children: /* @__PURE__ */ jsx("div", { className: cn("w-full", className), children }) });
+}
+function SearchInput({
+  placeholder = "Search...",
+  className,
+  disabled,
+  showIcon = true,
+  showClearButton = false,
+  onKeyDown,
+  ...props
+}) {
+  const { searchValue, setSearchValue, handleSearch } = useSearch();
+  const handleKeyDown = (event) => {
+    onKeyDown?.(event);
+    if (!event.defaultPrevented && event.key === "Enter" && !disabled) {
+      handleSearch?.();
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    InputGroup,
+    {
+      className: cn("h-10 flex-1 shadow-sm", className),
+      "data-disabled": disabled || void 0,
+      children: [
+        showIcon && /* @__PURE__ */ jsx(InputGroupAddon, { align: "inline-start", children: /* @__PURE__ */ jsx(Search, { className: "size-4" }) }),
+        /* @__PURE__ */ jsx(
+          InputGroupInput,
+          {
+            ...props,
+            type: "text",
+            placeholder,
+            value: searchValue || "",
+            onChange: (e) => setSearchValue?.(e.target.value),
+            onKeyDown: handleKeyDown,
+            disabled,
+            className: "text-base"
+          }
+        ),
+        showClearButton && searchValue && /* @__PURE__ */ jsx(InputGroupAddon, { align: "inline-end", children: /* @__PURE__ */ jsx(
+          InputGroupButton,
+          {
+            variant: "ghost",
+            size: "icon-sm",
+            onClick: () => setSearchValue?.(""),
+            disabled,
+            children: /* @__PURE__ */ jsx(X, { className: "size-4" })
+          }
+        ) })
+      ]
+    }
+  );
+}
+function SearchTypeInput({
+  placeholder = "Search...",
+  className,
+  disabled,
+  showIcon = true,
+  showClearButton = false,
+  searchTypeOptions = [],
+  onKeyDown,
+  ...props
+}) {
+  const { searchValue, setSearchValue, searchType, setSearchType, handleSearch } = useSearch();
+  const handleKeyDown = (event) => {
+    onKeyDown?.(event);
+    if (!event.defaultPrevented && event.key === "Enter" && !disabled) {
+      handleSearch?.();
+    }
+  };
+  const selectedOption = searchTypeOptions.find((opt) => opt.value === searchType);
+  return /* @__PURE__ */ jsxs(
+    InputGroup,
+    {
+      className: cn("h-10 flex-1 shadow-sm", className),
+      "data-disabled": disabled || void 0,
+      children: [
+        showIcon && /* @__PURE__ */ jsx(InputGroupAddon, { align: "inline-start", children: /* @__PURE__ */ jsx(Search, { className: "size-4" }) }),
+        searchTypeOptions.length > 0 && /* @__PURE__ */ jsxs(InputGroupAddon, { align: "inline-start", className: "pr-0", children: [
+          /* @__PURE__ */ jsxs(
+            Select,
+            {
+              value: searchType,
+              onValueChange: setSearchType,
+              disabled,
+              children: [
+                /* @__PURE__ */ jsx(SelectTrigger, { className: "h-7 w-auto border-0 bg-transparent px-2 text-sm font-medium shadow-none focus:ring-0", children: /* @__PURE__ */ jsx(SelectValue, { children: selectedOption?.label || searchTypeOptions[0]?.label }) }),
+                /* @__PURE__ */ jsx(SelectContent, { children: searchTypeOptions.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.value, children: option.label }, option.value)) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "h-6 w-px bg-border ml-1" })
+        ] }),
+        /* @__PURE__ */ jsx(
+          InputGroupInput,
+          {
+            ...props,
+            type: "text",
+            placeholder,
+            value: searchValue || "",
+            onChange: (e) => setSearchValue?.(e.target.value),
+            onKeyDown: handleKeyDown,
+            disabled,
+            className: "text-base"
+          }
+        ),
+        showClearButton && searchValue && /* @__PURE__ */ jsx(InputGroupAddon, { align: "inline-end", children: /* @__PURE__ */ jsx(
+          InputGroupButton,
+          {
+            variant: "ghost",
+            size: "icon-sm",
+            onClick: () => setSearchValue?.(""),
+            disabled,
+            children: /* @__PURE__ */ jsx(X, { className: "size-4" })
+          }
+        ) })
+      ]
+    }
+  );
+}
+function SearchFilterActions({ onClose, disabled }) {
+  const { handleSearch, clearSearch, hasActiveFilters } = useSearch();
+  const handleApply = () => {
+    handleSearch?.();
+    onClose?.();
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex gap-2 border-t bg-muted/30 p-4 pt-3 -mx-4 -mb-4", children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "outline",
+        size: "sm",
+        onClick: clearSearch,
+        className: "flex-1",
+        disabled: disabled || !hasActiveFilters,
+        children: "Reset"
+      }
+    ),
+    /* @__PURE__ */ jsxs(Button, { size: "sm", onClick: handleApply, className: "flex-1", disabled, children: [
+      /* @__PURE__ */ jsx(Search, { size: 16, className: "mr-2" }),
+      "Apply"
+    ] })
+  ] });
+}
+function SearchFilters({
+  children,
+  title = "Filters",
+  description = "Refine your search results",
+  disabled,
+  className
+}) {
+  const { hasActiveFilters, filters = {} } = useSearch();
+  const isMobile = useIsMobile();
+  const [isOpen, setIsOpen] = useState(false);
+  const activeFilterCount = Object.values(filters).filter((value) => {
+    if (Array.isArray(value)) {
+      return value.filter(Boolean).length > 0;
+    }
+    if (typeof value === "string") {
+      return value.trim().length > 0 && value !== "all";
+    }
+    if (typeof value === "number") {
+      return value !== void 0 && value !== null && !Number.isNaN(value);
+    }
+    if (typeof value === "boolean") {
+      return value;
+    }
+    return Boolean(value);
+  }).length;
+  const FilterContent = () => /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsx("div", { className: "space-y-4", children }),
+    /* @__PURE__ */ jsx(SearchFilterActions, { onClose: () => setIsOpen(false) })
+  ] });
+  const triggerButton = /* @__PURE__ */ jsxs(
+    Button,
+    {
+      variant: "outline",
+      size: "default",
+      className: cn(
+        "relative h-10 w-10 shrink-0 px-0 sm:w-auto sm:px-4",
+        hasActiveFilters && "bg-primary/10 border-primary hover:bg-primary/15"
+      ),
+      disabled,
+      "aria-label": "Open filters",
+      children: [
+        /* @__PURE__ */ jsx(Filter, { className: "size-4" }),
+        /* @__PURE__ */ jsx("span", { className: "hidden sm:inline ml-2", children: "Filters" }),
+        activeFilterCount > 0 && /* @__PURE__ */ jsx(
+          Badge,
+          {
+            variant: "secondary",
+            className: "absolute -right-1 -top-1 flex h-5 min-w-5 items-center justify-center rounded-full bg-primary px-1 text-xs font-medium text-primary-foreground",
+            children: activeFilterCount
+          }
+        )
+      ]
+    }
+  );
+  if (isMobile) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "outline",
+          size: "default",
+          className: cn(
+            "relative h-10 w-10 shrink-0 px-0",
+            hasActiveFilters && "bg-primary/10 border-primary hover:bg-primary/15"
+          ),
+          disabled,
+          "aria-label": "Open filters",
+          onClick: () => setIsOpen(true),
+          children: [
+            /* @__PURE__ */ jsx(Filter, { className: "size-4" }),
+            activeFilterCount > 0 && /* @__PURE__ */ jsx(
+              Badge,
+              {
+                variant: "secondary",
+                className: "absolute -right-1 -top-1 flex h-5 min-w-5 items-center justify-center rounded-full bg-primary px-1 text-xs font-medium text-primary-foreground",
+                children: activeFilterCount
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        SheetWrapper,
+        {
+          open: isOpen,
+          onOpenChange: setIsOpen,
+          title,
+          description,
+          side: "bottom",
+          size: "default",
+          children: /* @__PURE__ */ jsx(FilterContent, {})
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { render: triggerButton }),
+    /* @__PURE__ */ jsx(PopoverContent, { className: "w-80 p-4 sm:w-96", align: "end", sideOffset: 8, children: /* @__PURE__ */ jsx(FilterContent, {}) })
+  ] });
+}
+function SearchActions({
+  showSearchButton = true,
+  showClearButton = true,
+  searchButtonText,
+  clearButtonText = "Clear",
+  disabled,
+  className
+}) {
+  const { handleSearch, clearSearch, searchValue, hasActiveFilters, hasActiveSearch } = useSearch();
+  const isMobile = useIsMobile();
+  const canSearch = Boolean(searchValue?.trim() || hasActiveFilters);
+  const canClear = Boolean(searchValue?.trim() || hasActiveFilters || hasActiveSearch);
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2", className), children: [
+    showClearButton && canClear && (isMobile ? /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "outline",
+        size: "icon",
+        onClick: clearSearch,
+        "aria-label": clearButtonText,
+        title: clearButtonText,
+        className: "shrink-0",
+        children: /* @__PURE__ */ jsx(RotateCcw, {})
+      }
+    ) : /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "outline",
+        size: "default",
+        onClick: clearSearch,
+        className: "h-10 shrink-0",
+        children: clearButtonText
+      }
+    )),
+    showSearchButton && /* @__PURE__ */ jsxs(
+      Button,
+      {
+        size: "default",
+        onClick: handleSearch,
+        disabled: disabled || !canSearch,
+        className: "h-10 shrink-0 px-3 sm:px-4",
+        children: [
+          /* @__PURE__ */ jsx(
+            Search,
+            {
+              size: 16,
+              className: cn(searchButtonText ? "mr-2" : "sm:mr-2")
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: searchButtonText || "Search" })
+        ]
+      }
+    )
+  ] });
+}
+function SearchContainer({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex items-center gap-2 flex-1", className), children });
+}
+
+export { search_exports as Search, SearchProvider, useSearch };
+//# sourceMappingURL=search.js.map
+//# sourceMappingURL=search.js.map

package/dist/search.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/search/index.ts","../src/components/search/search-context.tsx","../src/components/search/search-root.tsx","../src/components/search/search-input.tsx","../src/components/search/search-type-input.tsx","../src/components/search/search-filter-actions.tsx","../src/components/search/search-filters.tsx","../src/components/search/search-actions.tsx","../src/components/search/search-container.tsx"],"names":["jsx","jsxs","InputGroup","InputGroupAddon","Search","InputGroupInput","InputGroupButton","X","Button"],"mappings":"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","file":"search.js","sourcesContent":["/**\r\n * Composable Search Component System\r\n *\r\n * @example\r\n * ```tsx\r\n * import { Search } from \"@classytic/fluid\";\r\n *\r\n * function MySearch() {\r\n *   const searchHook = useMySearch();\r\n *\r\n *   return (\r\n *     <Search.Root hook={searchHook}>\r\n *       <Search.Container>\r\n *         <Search.Input placeholder=\"Search...\" />\r\n *         <Search.Filters>\r\n *           <SelectInput ... />\r\n *           <TagChoiceInput ... />\r\n *         </Search.Filters>\r\n *         <Search.Actions />\r\n *       </Search.Container>\r\n *     </Search.Root>\r\n *   );\r\n * }\r\n * ```\r\n */\r\n\r\nexport { SearchRoot as Root, type SearchRootProps } from \"./search-root\";\r\nexport { SearchInput as Input, type SearchInputProps } from \"./search-input\";\r\nexport {\r\n  SearchTypeInput as TypeInput,\r\n  type SearchTypeInputProps,\r\n  type SearchTypeOption,\r\n} from \"./search-type-input\";\r\nexport { SearchFilters as Filters, type SearchFiltersProps } from \"./search-filters\";\r\nexport { SearchActions as Actions, type SearchActionsProps } from \"./search-actions\";\r\nexport { SearchContainer as Container, type SearchContainerProps } from \"./search-container\";\r\nexport {\r\n  SearchFilterActions as FilterActions,\r\n  type SearchFilterActionsProps,\r\n} from \"./search-filter-actions\";\r\nexport { useSearch, SearchProvider, type SearchProviderProps } from \"./search-context\";\r\n","\"use client\";\r\n\r\nimport { createContext, useContext, type ReactNode } from \"react\";\r\nimport type { UseBaseSearchReturn } from \"../../hooks/use-base-search\";\r\n\r\nconst SearchContext = createContext<UseBaseSearchReturn | undefined>(undefined);\r\n\r\nexport interface SearchProviderProps {\r\n  children: ReactNode;\r\n  value: UseBaseSearchReturn;\r\n}\r\n\r\nexport function SearchProvider({ children, value }: SearchProviderProps) {\r\n  return (\r\n    <SearchContext.Provider value={value}>{children}</SearchContext.Provider>\r\n  );\r\n}\r\n\r\nexport function useSearch(): UseBaseSearchReturn {\r\n  const context = useContext(SearchContext);\r\n  if (!context) {\r\n    throw new Error(\"useSearch must be used within SearchProvider\");\r\n  }\r\n  return context;\r\n}\r\n","\"use client\";\r\n\r\nimport type { ReactNode } from \"react\";\r\nimport { cn } from \"../../utils\";\r\nimport { SearchProvider } from \"./search-context\";\r\nimport type { UseBaseSearchReturn } from \"../../hooks/use-base-search\";\r\n\r\nexport interface SearchRootProps {\r\n  children: ReactNode;\r\n  hook: UseBaseSearchReturn;\r\n  className?: string;\r\n}\r\n\r\n/**\r\n * Root search component that provides context to all child components\r\n *\r\n * @example\r\n * <Search.Root hook={useMySearch()}>\r\n *   <Search.Input />\r\n *   <Search.Filters />\r\n *   <Search.Actions />\r\n * </Search.Root>\r\n */\r\nexport function SearchRoot({ children, hook, className }: SearchRootProps) {\r\n  return (\r\n    <SearchProvider value={hook}>\r\n      <div className={cn(\"w-full\", className)}>{children}</div>\r\n    </SearchProvider>\r\n  );\r\n}\r\n","\"use client\";\n\nimport type { KeyboardEvent, ChangeEvent } from \"react\";\nimport { Search, X } from \"lucide-react\";\nimport { cn } from \"../../utils\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n  InputGroupButton,\n} from \"@/components/ui/input-group\";\nimport { useSearch } from \"./search-context\";\n\nexport interface SearchInputProps {\n  placeholder?: string;\n  className?: string;\n  disabled?: boolean;\n  showIcon?: boolean;\n  showClearButton?: boolean;\n  onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;\n}\n\n/**\n * Search input component using modern shadcn InputGroup pattern\n *\n * @example\n * <Search.Input placeholder=\"Search...\" />\n */\nexport function SearchInput({\n  placeholder = \"Search...\",\n  className,\n  disabled,\n  showIcon = true,\n  showClearButton = false,\n  onKeyDown,\n  ...props\n}: SearchInputProps) {\n  const { searchValue, setSearchValue, handleSearch } = useSearch();\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n    onKeyDown?.(event);\n    if (!event.defaultPrevented && event.key === \"Enter\" && !disabled) {\n      handleSearch?.();\n    }\n  };\n\n  return (\n    <InputGroup\n      className={cn(\"h-10 flex-1 shadow-sm\", className)}\n      data-disabled={disabled || undefined}\n    >\n      {showIcon && (\n        <InputGroupAddon align=\"inline-start\">\n          <Search className=\"size-4\" />\n        </InputGroupAddon>\n      )}\n\n      <InputGroupInput\n        {...props}\n        type=\"text\"\n        placeholder={placeholder}\n        value={searchValue || \"\"}\n        onChange={(e: ChangeEvent<HTMLInputElement>) => setSearchValue?.(e.target.value)}\n        onKeyDown={handleKeyDown}\n        disabled={disabled}\n        className=\"text-base\"\n      />\n\n      {showClearButton && searchValue && (\n        <InputGroupAddon align=\"inline-end\">\n          <InputGroupButton\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            onClick={() => setSearchValue?.(\"\")}\n            disabled={disabled}\n          >\n            <X className=\"size-4\" />\n          </InputGroupButton>\n        </InputGroupAddon>\n      )}\n    </InputGroup>\n  );\n}\n","\"use client\";\n\nimport type { KeyboardEvent, ChangeEvent } from \"react\";\nimport { Search, X } from \"lucide-react\";\nimport { cn } from \"../../utils\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n  InputGroupButton,\n} from \"@/components/ui/input-group\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\";\nimport { useSearch } from \"./search-context\";\n\nexport interface SearchTypeOption {\n  value: string;\n  label: string;\n}\n\nexport interface SearchTypeInputProps {\n  placeholder?: string;\n  className?: string;\n  disabled?: boolean;\n  showIcon?: boolean;\n  showClearButton?: boolean;\n  searchTypeOptions?: SearchTypeOption[];\n  onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;\n}\n\n/**\n * Search input component with type selector using InputGroup pattern\n *\n * @example\n * <Search.TypeInput\n *   placeholder=\"Search...\"\n *   searchTypeOptions={[\n *     { value: \"_id\", label: \"ID\" },\n *     { value: \"customerPhone\", label: \"Phone\" },\n *     { value: \"customerEmail\", label: \"Email\" },\n *   ]}\n * />\n */\nexport function SearchTypeInput({\n  placeholder = \"Search...\",\n  className,\n  disabled,\n  showIcon = true,\n  showClearButton = false,\n  searchTypeOptions = [],\n  onKeyDown,\n  ...props\n}: SearchTypeInputProps) {\n  const { searchValue, setSearchValue, searchType, setSearchType, handleSearch } =\n    useSearch();\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n    onKeyDown?.(event);\n    if (!event.defaultPrevented && event.key === \"Enter\" && !disabled) {\n      handleSearch?.();\n    }\n  };\n\n  const selectedOption = searchTypeOptions.find((opt) => opt.value === searchType);\n\n  return (\n    <InputGroup\n      className={cn(\"h-10 flex-1 shadow-sm\", className)}\n      data-disabled={disabled || undefined}\n    >\n      {showIcon && (\n        <InputGroupAddon align=\"inline-start\">\n          <Search className=\"size-4\" />\n        </InputGroupAddon>\n      )}\n\n      {/* Search Type Selector */}\n      {searchTypeOptions.length > 0 && (\n        <InputGroupAddon align=\"inline-start\" className=\"pr-0\">\n          <Select\n            value={searchType}\n            onValueChange={setSearchType}\n            disabled={disabled}\n          >\n            <SelectTrigger className=\"h-7 w-auto border-0 bg-transparent px-2 text-sm font-medium shadow-none focus:ring-0\">\n              <SelectValue>\n                {selectedOption?.label || searchTypeOptions[0]?.label}\n              </SelectValue>\n            </SelectTrigger>\n            <SelectContent>\n              {searchTypeOptions.map((option) => (\n                <SelectItem key={option.value} value={option.value}>\n                  {option.label}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n          <div className=\"h-6 w-px bg-border ml-1\" />\n        </InputGroupAddon>\n      )}\n\n      <InputGroupInput\n        {...props}\n        type=\"text\"\n        placeholder={placeholder}\n        value={searchValue || \"\"}\n        onChange={(e: ChangeEvent<HTMLInputElement>) => setSearchValue?.(e.target.value)}\n        onKeyDown={handleKeyDown}\n        disabled={disabled}\n        className=\"text-base\"\n      />\n\n      {showClearButton && searchValue && (\n        <InputGroupAddon align=\"inline-end\">\n          <InputGroupButton\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            onClick={() => setSearchValue?.(\"\")}\n            disabled={disabled}\n          >\n            <X className=\"size-4\" />\n          </InputGroupButton>\n        </InputGroupAddon>\n      )}\n    </InputGroup>\n  );\n}\n","\"use client\";\r\n\r\nimport { Search } from \"lucide-react\";\r\nimport { Button } from \"@/components/ui/button\";\r\nimport { useSearch } from \"./search-context\";\r\n\r\nexport interface SearchFilterActionsProps {\r\n  onClose?: () => void;\r\n  disabled?: boolean;\r\n}\r\n\r\n/**\r\n * Filter actions component (Reset/Apply buttons)\r\n * Used inside filter popovers/sheets\r\n */\r\nexport function SearchFilterActions({ onClose, disabled }: SearchFilterActionsProps) {\r\n  const { handleSearch, clearSearch, hasActiveFilters } = useSearch();\r\n\r\n  const handleApply = () => {\r\n    handleSearch?.();\r\n    onClose?.();\r\n  };\r\n\r\n  return (\r\n    <div className=\"flex gap-2 border-t bg-muted/30 p-4 pt-3 -mx-4 -mb-4\">\r\n      <Button\r\n        variant=\"outline\"\r\n        size=\"sm\"\r\n        onClick={clearSearch}\r\n        className=\"flex-1\"\r\n        disabled={disabled || !hasActiveFilters}\r\n      >\r\n        Reset\r\n      </Button>\r\n      <Button size=\"sm\" onClick={handleApply} className=\"flex-1\" disabled={disabled}>\r\n        <Search size={16} className=\"mr-2\" />\r\n        Apply\r\n      </Button>\r\n    </div>\r\n  );\r\n}\r\n","\"use client\";\r\n\r\nimport { useState, type ReactNode } from \"react\";\r\nimport { Filter } from \"lucide-react\";\r\nimport { cn } from \"../../utils\";\r\nimport { Button } from \"@/components/ui/button\";\r\nimport { Badge } from \"@/components/ui/badge\";\r\nimport {\r\n  Popover,\r\n  PopoverContent,\r\n  PopoverTrigger,\r\n} from \"@/components/ui/popover\";\r\nimport { SheetWrapper } from \"../sheet-wrapper\";\r\nimport { useIsMobile } from \"../../hooks/use-mobile\";\r\nimport { useSearch } from \"./search-context\";\r\nimport { SearchFilterActions } from \"./search-filter-actions\";\r\n\r\nexport interface SearchFiltersProps {\r\n  children: ReactNode;\r\n  title?: string;\r\n  description?: string;\r\n  disabled?: boolean;\r\n  className?: string;\r\n}\r\n\r\n/**\r\n * Search filters component with mobile sheet support\r\n *\r\n * @example\r\n * <Search.Filters>\r\n *   <TagChoiceInput label=\"Category\" ... />\r\n *   <SelectInput label=\"Status\" ... />\r\n * </Search.Filters>\r\n */\r\nexport function SearchFilters({\r\n  children,\r\n  title = \"Filters\",\r\n  description = \"Refine your search results\",\r\n  disabled,\r\n  className,\r\n}: SearchFiltersProps) {\r\n  const { hasActiveFilters, filters = {} } = useSearch();\r\n  const isMobile = useIsMobile();\r\n  const [isOpen, setIsOpen] = useState(false);\r\n\r\n  // Count active filters (excluding default \"all\" values)\r\n  const activeFilterCount = Object.values(filters).filter((value) => {\r\n    if (Array.isArray(value)) {\r\n      return value.filter(Boolean).length > 0;\r\n    }\r\n    if (typeof value === \"string\") {\r\n      // Exclude \"all\" as it's the default/neutral state\r\n      return value.trim().length > 0 && value !== \"all\";\r\n    }\r\n    if (typeof value === \"number\") {\r\n      return value !== undefined && value !== null && !Number.isNaN(value);\r\n    }\r\n    if (typeof value === \"boolean\") {\r\n      return value;\r\n    }\r\n    return Boolean(value);\r\n  }).length;\r\n\r\n  const FilterContent = () => (\r\n    <div className=\"space-y-4\">\r\n      <div className=\"space-y-4\">{children}</div>\r\n      <SearchFilterActions onClose={() => setIsOpen(false)} />\r\n    </div>\r\n  );\r\n\r\n  const triggerButton = (\r\n    <Button\r\n      variant=\"outline\"\r\n      size=\"default\"\r\n      className={cn(\r\n        \"relative h-10 w-10 shrink-0 px-0 sm:w-auto sm:px-4\",\r\n        hasActiveFilters && \"bg-primary/10 border-primary hover:bg-primary/15\"\r\n      )}\r\n      disabled={disabled}\r\n      aria-label=\"Open filters\"\r\n    >\r\n      <Filter className=\"size-4\" />\r\n      <span className=\"hidden sm:inline ml-2\">Filters</span>\r\n      {activeFilterCount > 0 && (\r\n        <Badge\r\n          variant=\"secondary\"\r\n          className=\"absolute -right-1 -top-1 flex h-5 min-w-5 items-center justify-center rounded-full bg-primary px-1 text-xs font-medium text-primary-foreground\"\r\n        >\r\n          {activeFilterCount}\r\n        </Badge>\r\n      )}\r\n    </Button>\r\n  );\r\n\r\n  if (isMobile) {\r\n    return (\r\n      <>\r\n        <Button\r\n          variant=\"outline\"\r\n          size=\"default\"\r\n          className={cn(\r\n            \"relative h-10 w-10 shrink-0 px-0\",\r\n            hasActiveFilters && \"bg-primary/10 border-primary hover:bg-primary/15\"\r\n          )}\r\n          disabled={disabled}\r\n          aria-label=\"Open filters\"\r\n          onClick={() => setIsOpen(true)}\r\n        >\r\n          <Filter className=\"size-4\" />\r\n          {activeFilterCount > 0 && (\r\n            <Badge\r\n              variant=\"secondary\"\r\n              className=\"absolute -right-1 -top-1 flex h-5 min-w-5 items-center justify-center rounded-full bg-primary px-1 text-xs font-medium text-primary-foreground\"\r\n            >\r\n              {activeFilterCount}\r\n            </Badge>\r\n          )}\r\n        </Button>\r\n        <SheetWrapper\r\n          open={isOpen}\r\n          onOpenChange={setIsOpen}\r\n          title={title}\r\n          description={description}\r\n          side=\"bottom\"\r\n          size=\"default\"\r\n        >\r\n          <FilterContent />\r\n        </SheetWrapper>\r\n      </>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <Popover open={isOpen} onOpenChange={setIsOpen}>\r\n      <PopoverTrigger render={triggerButton} />\r\n      <PopoverContent className=\"w-80 p-4 sm:w-96\" align=\"end\" sideOffset={8}>\r\n        <FilterContent />\r\n      </PopoverContent>\r\n    </Popover>\r\n  );\r\n}\r\n","\"use client\";\r\n\r\nimport { Search, RotateCcw } from \"lucide-react\";\r\nimport { cn } from \"../../utils\";\r\nimport { Button } from \"@/components/ui/button\";\r\nimport { useSearch } from \"./search-context\";\r\nimport { useIsMobile } from \"../../hooks/use-mobile\";\r\n\r\nexport interface SearchActionsProps {\r\n  showSearchButton?: boolean;\r\n  showClearButton?: boolean;\r\n  searchButtonText?: string;\r\n  clearButtonText?: string;\r\n  disabled?: boolean;\r\n  className?: string;\r\n}\r\n\r\n/**\r\n * Search action buttons\r\n */\r\nexport function SearchActions({\r\n  showSearchButton = true,\r\n  showClearButton = true,\r\n  searchButtonText,\r\n  clearButtonText = \"Clear\",\r\n  disabled,\r\n  className,\r\n}: SearchActionsProps) {\r\n  const { handleSearch, clearSearch, searchValue, hasActiveFilters, hasActiveSearch } =\r\n    useSearch();\r\n  const isMobile = useIsMobile();\r\n\r\n  const canSearch = Boolean(searchValue?.trim() || hasActiveFilters);\r\n  const canClear = Boolean(searchValue?.trim() || hasActiveFilters || hasActiveSearch);\r\n\r\n  return (\r\n    <div className={cn(\"flex items-center gap-2\", className)}>\r\n      {showClearButton &&\r\n        canClear &&\r\n        (isMobile ? (\r\n          <Button\r\n            variant=\"outline\"\r\n            size=\"icon\"\r\n            onClick={clearSearch}\r\n            aria-label={clearButtonText}\r\n            title={clearButtonText}\r\n            className=\"shrink-0\"\r\n          >\r\n            <RotateCcw />\r\n          </Button>\r\n        ) : (\r\n          <Button\r\n            variant=\"outline\"\r\n            size=\"default\"\r\n            onClick={clearSearch}\r\n            className=\"h-10 shrink-0\"\r\n          >\r\n            {clearButtonText}\r\n          </Button>\r\n        ))}\r\n      {showSearchButton && (\r\n        <Button\r\n          size=\"default\"\r\n          onClick={handleSearch}\r\n          disabled={disabled || !canSearch}\r\n          className=\"h-10 shrink-0 px-3 sm:px-4\"\r\n        >\r\n          <Search\r\n            size={16}\r\n            className={cn(searchButtonText ? \"mr-2\" : \"sm:mr-2\")}\r\n          />\r\n          <span className=\"hidden sm:inline\">{searchButtonText || \"Search\"}</span>\r\n        </Button>\r\n      )}\r\n    </div>\r\n  );\r\n}\r\n","\"use client\";\r\n\r\nimport type { ReactNode } from \"react\";\r\nimport { cn } from \"../../utils\";\r\n\r\nexport interface SearchContainerProps {\r\n  children: ReactNode;\r\n  className?: string;\r\n}\r\n\r\n/**\r\n * Container for search input and action buttons\r\n * Provides responsive layout\r\n *\r\n * @example\r\n * <Search.Container>\r\n *   <Search.Input />\r\n *   <Search.Filters />\r\n *   <Search.Actions />\r\n * </Search.Container>\r\n */\r\nexport function SearchContainer({ children, className }: SearchContainerProps) {\r\n  return (\r\n    <div className={cn(\"flex items-center gap-2 flex-1\", className)}>\r\n      {children}\r\n    </div>\r\n  );\r\n}\r\n"]}