@questpie/admin 1.1.1 → 2.0.0

package/dist/client/components/primitives/select-multi.mjs

@@ -0,0 +1,256 @@
+"use client";
+
+import { useResolveText } from "../../i18n/hooks.mjs";
+import { cn } from "../../lib/utils.mjs";
+import { useIsMobile } from "../../hooks/use-media-query.mjs";
+import { Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerTrigger } from "../ui/drawer.mjs";
+import { Badge } from "../ui/badge.mjs";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "../ui/command.mjs";
+import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover.mjs";
+import { flattenOptions } from "./types.mjs";
+import { Icon } from "@iconify/react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/components/primitives/select-multi.tsx
+/**
+* SelectMulti - Multi-select component with chips
+*
+* Features:
+* - Always searchable
+* - Responsive: Popover on desktop, Drawer on mobile
+* - Chip display with remove buttons
+* - Supports static and async options
+* - Keyboard navigation
+*
+* @example
+* ```tsx
+* <SelectMulti
+*   value={selectedTags}
+*   onChange={setSelectedTags}
+*   options={[
+*     { value: "react", label: "React" },
+*     { value: "vue", label: "Vue" },
+*     { value: "angular", label: "Angular" },
+*   ]}
+* />
+* ```
+*/
+function SelectMulti({ value = [], onChange, options: staticOptions = [], loadOptions, maxSelections, debounceMs = 300, loading: externalLoading = false, emptyMessage = "No options found", placeholder = "Select...", disabled, className, id, "aria-invalid": ariaInvalid, drawerTitle = "Select options", maxVisibleChips = 3 }) {
+	const resolveText = useResolveText();
+	const resolvedPlaceholder = resolveText(placeholder);
+	const resolvedEmptyMessage = resolveText(emptyMessage);
+	const resolvedDrawerTitle = resolveText(drawerTitle);
+	const [open, setOpen] = useState(false);
+	const [search, setSearch] = useState("");
+	const [dynamicOptions, setDynamicOptions] = useState([]);
+	const [isLoading, setIsLoading] = useState(false);
+	const debounceRef = useRef(null);
+	const isMobile = useIsMobile();
+	const flatStaticOptions = useMemo(() => flattenOptions(staticOptions), [staticOptions]);
+	const allOptions = useMemo(() => {
+		if (loadOptions) return dynamicOptions;
+		return flatStaticOptions;
+	}, [
+		loadOptions,
+		dynamicOptions,
+		flatStaticOptions
+	]);
+	const filteredOptions = useMemo(() => {
+		if (loadOptions) return allOptions;
+		if (!search) return allOptions;
+		return allOptions.filter((opt) => resolveText(opt.label).toLowerCase().includes(search.toLowerCase()));
+	}, [
+		allOptions,
+		search,
+		loadOptions,
+		resolveText
+	]);
+	useEffect(() => {
+		if (!loadOptions) return;
+		if (debounceRef.current) clearTimeout(debounceRef.current);
+		debounceRef.current = setTimeout(async () => {
+			setIsLoading(true);
+			try {
+				setDynamicOptions(await loadOptions(search));
+			} catch (error) {
+				console.error("Failed to load options:", error);
+				setDynamicOptions([]);
+			} finally {
+				setIsLoading(false);
+			}
+		}, debounceMs);
+		return () => {
+			if (debounceRef.current) clearTimeout(debounceRef.current);
+		};
+	}, [
+		search,
+		loadOptions,
+		debounceMs
+	]);
+	const getLabel = useCallback((val) => {
+		const option = allOptions.find((opt) => opt.value === val);
+		return option?.label ? resolveText(option.label) : String(val);
+	}, [allOptions, resolveText]);
+	const handleToggle = useCallback((selectedValue) => {
+		const typedValue = selectedValue;
+		if (value.includes(typedValue)) onChange(value.filter((v) => v !== typedValue));
+		else {
+			if (maxSelections && value.length >= maxSelections) return;
+			onChange([...value, typedValue]);
+		}
+	}, [
+		value,
+		onChange,
+		maxSelections
+	]);
+	const handleRemove = useCallback((removedValue, e) => {
+		e?.stopPropagation();
+		onChange(value.filter((v) => v !== removedValue));
+	}, [value, onChange]);
+	const handleClearAll = useCallback((e) => {
+		e.stopPropagation();
+		onChange([]);
+	}, [onChange]);
+	const showLoading = isLoading || externalLoading;
+	const canAddMore = !maxSelections || value.length < maxSelections;
+	const visibleChips = value.slice(0, maxVisibleChips);
+	const hiddenCount = value.length - maxVisibleChips;
+	const TriggerContent = /* @__PURE__ */ jsxs("div", {
+		id,
+		role: "combobox",
+		"aria-controls": "select-multi-list",
+		"aria-haspopup": "listbox",
+		"aria-expanded": open,
+		"aria-invalid": ariaInvalid,
+		tabIndex: 0,
+		className: cn("flex min-h-9 w-full flex-wrap items-center gap-1 rounded-md border border-input/80 bg-input/20 backdrop-blur-sm px-3 py-1.5 text-sm transition-colors", "focus-within:ring-2 focus-within:ring-ring focus-within:border-ring", disabled && "cursor-not-allowed opacity-50", ariaInvalid && "border-destructive ring-destructive/20", className),
+		children: [value.length === 0 ? /* @__PURE__ */ jsx("span", {
+			className: "text-muted-foreground text-xs",
+			children: resolvedPlaceholder
+		}) : /* @__PURE__ */ jsxs(Fragment, { children: [visibleChips.map((val) => /* @__PURE__ */ jsxs(Badge, {
+			variant: "secondary",
+			className: "gap-1 pr-1",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "truncate max-w-24",
+				children: getLabel(val)
+			}), !disabled && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: (e) => handleRemove(val, e),
+				className: "rounded-full hover:bg-muted-foreground/20 p-0.5",
+				children: /* @__PURE__ */ jsx(Icon, {
+					icon: "ph:x",
+					className: "size-2.5"
+				})
+			})]
+		}, String(val))), hiddenCount > 0 && /* @__PURE__ */ jsxs(Badge, {
+			variant: "outline",
+			className: "text-muted-foreground",
+			children: [
+				"+",
+				hiddenCount,
+				" more"
+			]
+		})] }), /* @__PURE__ */ jsxs("div", {
+			className: "ml-auto flex items-center gap-1 shrink-0",
+			children: [value.length > 0 && !disabled && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: handleClearAll,
+				className: "rounded-sm opacity-50 hover:opacity-100 hover:bg-muted p-0.5",
+				children: /* @__PURE__ */ jsx(Icon, {
+					icon: "ph:x",
+					className: "size-3"
+				})
+			}), /* @__PURE__ */ jsx(Icon, {
+				icon: "ph:plus",
+				className: "size-3.5 opacity-50"
+			})]
+		})]
+	});
+	const CommandContent = /* @__PURE__ */ jsxs(Command, {
+		shouldFilter: !loadOptions,
+		children: [
+			/* @__PURE__ */ jsx(CommandInput, {
+				placeholder: "Search...",
+				value: search,
+				onValueChange: setSearch
+			}),
+			/* @__PURE__ */ jsxs(CommandList, { children: [
+				showLoading && /* @__PURE__ */ jsx("div", {
+					className: "flex items-center justify-center py-6",
+					children: /* @__PURE__ */ jsx(Icon, {
+						icon: "ph:circle-notch",
+						className: "size-4 animate-spin text-muted-foreground"
+					})
+				}),
+				/* @__PURE__ */ jsx(CommandEmpty, { children: resolvedEmptyMessage }),
+				/* @__PURE__ */ jsx(CommandGroup, { children: filteredOptions.map((option) => {
+					const isSelected = value.includes(option.value);
+					const isDisabled = option.disabled || !isSelected && !canAddMore;
+					return /* @__PURE__ */ jsxs(CommandItem, {
+						value: String(option.value),
+						onSelect: handleToggle,
+						disabled: isDisabled,
+						children: [
+							/* @__PURE__ */ jsx("div", {
+								className: cn("flex size-4 items-center justify-center rounded-sm border", isSelected ? "bg-primary border-primary text-primary-foreground" : "border-muted-foreground/30"),
+								children: isSelected && /* @__PURE__ */ jsx(Icon, {
+									icon: "ph:check",
+									className: "size-3"
+								})
+							}),
+							option.icon,
+							/* @__PURE__ */ jsx("span", {
+								className: "truncate",
+								children: resolveText(option.label)
+							})
+						]
+					}, String(option.value));
+				}) })
+			] }),
+			maxSelections && /* @__PURE__ */ jsxs("div", {
+				className: "border-t p-2 text-center text-xs text-muted-foreground",
+				children: [
+					value.length,
+					" / ",
+					maxSelections,
+					" selected"
+				]
+			})
+		]
+	});
+	if (isMobile) return /* @__PURE__ */ jsxs(Drawer, {
+		open,
+		onOpenChange: setOpen,
+		children: [/* @__PURE__ */ jsx(DrawerTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx("button", {
+				type: "button",
+				disabled,
+				className: "w-full text-left",
+				children: TriggerContent
+			})
+		}), /* @__PURE__ */ jsxs(DrawerContent, { children: [/* @__PURE__ */ jsx(DrawerHeader, { children: /* @__PURE__ */ jsx(DrawerTitle, { children: resolvedDrawerTitle }) }), /* @__PURE__ */ jsx("div", {
+			className: "px-4 pb-6",
+			children: CommandContent
+		})] })]
+	});
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: setOpen,
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, { render: /* @__PURE__ */ jsx("button", {
+			type: "button",
+			disabled,
+			className: "w-full text-left",
+			children: TriggerContent
+		}) }), /* @__PURE__ */ jsx(PopoverContent, {
+			className: "w-(--anchor-width) p-0",
+			align: "start",
+			children: CommandContent
+		})]
+	});
+}
+
+//#endregion
+export { SelectMulti };
+//# sourceMappingURL=select-multi.mjs.map

package/dist/client/components/primitives/select-multi.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-multi.mjs","names":[],"sources":["../../../../src/client/components/primitives/select-multi.tsx"],"sourcesContent":["\"use client\";\n\nimport { Icon } from \"@iconify/react\";\nimport type * as React from \"react\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { useIsMobile } from \"../../hooks/use-media-query\";\nimport { useResolveText } from \"../../i18n/hooks\";\nimport { cn } from \"../../lib/utils\";\nimport { Badge } from \"../ui/badge\";\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"../ui/command\";\nimport {\n  Drawer,\n  DrawerContent,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"../ui/drawer\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"../ui/popover\";\nimport type { BasePrimitiveProps, SelectOption, SelectOptions } from \"./types\";\nimport { flattenOptions } from \"./types\";\n\nexport interface SelectMultiProps<\n  TValue extends string = string,\n> extends BasePrimitiveProps {\n  /** Selected values */\n  value: TValue[];\n  /** Change handler */\n  onChange: (value: TValue[]) => void;\n  /** Static options */\n  options?: SelectOptions<TValue>;\n  /** Dynamic options loader */\n  loadOptions?: (search: string) => Promise<SelectOption<TValue>[]>;\n  /** Max selections */\n  maxSelections?: number;\n  /** Debounce delay for loadOptions (ms) */\n  debounceMs?: number;\n  /** External loading state */\n  loading?: boolean;\n  /** Empty state message */\n  emptyMessage?: string;\n  /** Title for mobile drawer */\n  drawerTitle?: string;\n  /** Max visible chips before collapsing */\n  maxVisibleChips?: number;\n}\n\n/**\n * SelectMulti - Multi-select component with chips\n *\n * Features:\n * - Always searchable\n * - Responsive: Popover on desktop, Drawer on mobile\n * - Chip display with remove buttons\n * - Supports static and async options\n * - Keyboard navigation\n *\n * @example\n * ```tsx\n * <SelectMulti\n *   value={selectedTags}\n *   onChange={setSelectedTags}\n *   options={[\n *     { value: \"react\", label: \"React\" },\n *     { value: \"vue\", label: \"Vue\" },\n *     { value: \"angular\", label: \"Angular\" },\n *   ]}\n * />\n * ```\n */\nexport function SelectMulti<TValue extends string = string>({\n  value = [],\n  onChange,\n  options: staticOptions = [],\n  loadOptions,\n  maxSelections,\n  debounceMs = 300,\n  loading: externalLoading = false,\n  emptyMessage = \"No options found\",\n  placeholder = \"Select...\",\n  disabled,\n  className,\n  id,\n  \"aria-invalid\": ariaInvalid,\n  drawerTitle = \"Select options\",\n  maxVisibleChips = 3,\n}: SelectMultiProps<TValue>) {\n  const resolveText = useResolveText();\n  const resolvedPlaceholder = resolveText(placeholder);\n  const resolvedEmptyMessage = resolveText(emptyMessage);\n  const resolvedDrawerTitle = resolveText(drawerTitle);\n  const [open, setOpen] = useState(false);\n  const [search, setSearch] = useState(\"\");\n  const [dynamicOptions, setDynamicOptions] = useState<SelectOption<TValue>[]>(\n    [],\n  );\n  const [isLoading, setIsLoading] = useState(false);\n  const debounceRef = useRef<ReturnType<typeof setTimeout>>(null);\n  const isMobile = useIsMobile();\n\n  // Flatten static options\n  const flatStaticOptions = useMemo(\n    () => flattenOptions(staticOptions),\n    [staticOptions],\n  );\n\n  // Merge static and dynamic options\n  const allOptions = useMemo(() => {\n    if (loadOptions) {\n      return dynamicOptions;\n    }\n    return flatStaticOptions;\n  }, [loadOptions, dynamicOptions, flatStaticOptions]);\n\n  // Filter options by search (for static options)\n  const filteredOptions = useMemo(() => {\n    if (loadOptions) {\n      return allOptions;\n    }\n    if (!search) {\n      return allOptions;\n    }\n    return allOptions.filter((opt) =>\n      resolveText(opt.label).toLowerCase().includes(search.toLowerCase()),\n    );\n  }, [allOptions, search, loadOptions, resolveText]);\n\n  // Load dynamic options\n  useEffect(() => {\n    if (!loadOptions) return;\n\n    if (debounceRef.current) {\n      clearTimeout(debounceRef.current);\n    }\n\n    debounceRef.current = setTimeout(async () => {\n      setIsLoading(true);\n      try {\n        const results = await loadOptions(search);\n        setDynamicOptions(results);\n      } catch (error) {\n        console.error(\"Failed to load options:\", error);\n        setDynamicOptions([]);\n      } finally {\n        setIsLoading(false);\n      }\n    }, debounceMs);\n\n    return () => {\n      if (debounceRef.current) {\n        clearTimeout(debounceRef.current);\n      }\n    };\n  }, [search, loadOptions, debounceMs]);\n\n  // Get label for a value\n  const getLabel = useCallback(\n    (val: TValue): string => {\n      const option = allOptions.find((opt) => opt.value === val);\n      return option?.label ? resolveText(option.label) : String(val);\n    },\n    [allOptions, resolveText],\n  );\n\n  const handleToggle = useCallback(\n    (selectedValue: string) => {\n      const typedValue = selectedValue as TValue;\n      const isSelected = value.includes(typedValue);\n\n      if (isSelected) {\n        onChange(value.filter((v) => v !== typedValue));\n      } else {\n        if (maxSelections && value.length >= maxSelections) return;\n        onChange([...value, typedValue]);\n      }\n    },\n    [value, onChange, maxSelections],\n  );\n\n  const handleRemove = useCallback(\n    (removedValue: TValue, e?: React.MouseEvent) => {\n      e?.stopPropagation();\n      onChange(value.filter((v) => v !== removedValue));\n    },\n    [value, onChange],\n  );\n\n  const handleClearAll = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation();\n      onChange([]);\n    },\n    [onChange],\n  );\n\n  const showLoading = isLoading || externalLoading;\n  const canAddMore = !maxSelections || value.length < maxSelections;\n\n  // Visible and hidden chips\n  const visibleChips = value.slice(0, maxVisibleChips);\n  const hiddenCount = value.length - maxVisibleChips;\n\n  const TriggerContent = (\n    <div\n      id={id}\n      role=\"combobox\"\n      aria-controls=\"select-multi-list\"\n      aria-haspopup=\"listbox\"\n      aria-expanded={open}\n      aria-invalid={ariaInvalid}\n      tabIndex={0}\n      className={cn(\n        \"flex min-h-9 w-full flex-wrap items-center gap-1 rounded-md border border-input/80 bg-input/20 backdrop-blur-sm px-3 py-1.5 text-sm transition-colors\",\n        \"focus-within:ring-2 focus-within:ring-ring focus-within:border-ring\",\n        disabled && \"cursor-not-allowed opacity-50\",\n        ariaInvalid && \"border-destructive ring-destructive/20\",\n        className,\n      )}\n    >\n      {value.length === 0 ? (\n        <span className=\"text-muted-foreground text-xs\">\n          {resolvedPlaceholder}\n        </span>\n      ) : (\n        <>\n          {visibleChips.map((val) => (\n            <Badge key={String(val)} variant=\"secondary\" className=\"gap-1 pr-1\">\n              <span className=\"truncate max-w-24\">{getLabel(val)}</span>\n              {!disabled && (\n                <button\n                  type=\"button\"\n                  onClick={(e) => handleRemove(val, e)}\n                  className=\"rounded-full hover:bg-muted-foreground/20 p-0.5\"\n                >\n                  <Icon icon=\"ph:x\" className=\"size-2.5\" />\n                </button>\n              )}\n            </Badge>\n          ))}\n          {hiddenCount > 0 && (\n            <Badge variant=\"outline\" className=\"text-muted-foreground\">\n              +{hiddenCount} more\n            </Badge>\n          )}\n        </>\n      )}\n      <div className=\"ml-auto flex items-center gap-1 shrink-0\">\n        {value.length > 0 && !disabled && (\n          <button\n            type=\"button\"\n            onClick={handleClearAll}\n            className=\"rounded-sm opacity-50 hover:opacity-100 hover:bg-muted p-0.5\"\n          >\n            <Icon icon=\"ph:x\" className=\"size-3\" />\n          </button>\n        )}\n        <Icon icon=\"ph:plus\" className=\"size-3.5 opacity-50\" />\n      </div>\n    </div>\n  );\n\n  const CommandContent = (\n    <Command shouldFilter={!loadOptions}>\n      <CommandInput\n        placeholder=\"Search...\"\n        value={search}\n        onValueChange={setSearch}\n      />\n      <CommandList>\n        {showLoading && (\n          <div className=\"flex items-center justify-center py-6\">\n            <Icon\n              icon=\"ph:circle-notch\"\n              className=\"size-4 animate-spin text-muted-foreground\"\n            />\n          </div>\n        )}\n        <CommandEmpty>{resolvedEmptyMessage}</CommandEmpty>\n        <CommandGroup>\n          {filteredOptions.map((option) => {\n            const isSelected = value.includes(option.value);\n            const isDisabled = option.disabled || (!isSelected && !canAddMore);\n\n            return (\n              <CommandItem\n                key={String(option.value)}\n                value={String(option.value)}\n                onSelect={handleToggle}\n                disabled={isDisabled}\n              >\n                <div\n                  className={cn(\n                    \"flex size-4 items-center justify-center rounded-sm border\",\n                    isSelected\n                      ? \"bg-primary border-primary text-primary-foreground\"\n                      : \"border-muted-foreground/30\",\n                  )}\n                >\n                  {isSelected && <Icon icon=\"ph:check\" className=\"size-3\" />}\n                </div>\n                {option.icon}\n                <span className=\"truncate\">{resolveText(option.label)}</span>\n              </CommandItem>\n            );\n          })}\n        </CommandGroup>\n      </CommandList>\n      {maxSelections && (\n        <div className=\"border-t p-2 text-center text-xs text-muted-foreground\">\n          {value.length} / {maxSelections} selected\n        </div>\n      )}\n    </Command>\n  );\n\n  // Mobile: Drawer\n  if (isMobile) {\n    return (\n      <Drawer open={open} onOpenChange={setOpen}>\n        <DrawerTrigger asChild>\n          <button\n            type=\"button\"\n            disabled={disabled}\n            className=\"w-full text-left\"\n          >\n            {TriggerContent}\n          </button>\n        </DrawerTrigger>\n        <DrawerContent>\n          <DrawerHeader>\n            <DrawerTitle>{resolvedDrawerTitle}</DrawerTitle>\n          </DrawerHeader>\n          <div className=\"px-4 pb-6\">{CommandContent}</div>\n        </DrawerContent>\n      </Drawer>\n    );\n  }\n\n  // Desktop: Popover\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger\n        render={\n          <button\n            type=\"button\"\n            disabled={disabled}\n            className=\"w-full text-left\"\n          >\n            {TriggerContent}\n          </button>\n        }\n      />\n      <PopoverContent className=\"w-(--anchor-width) p-0\" align=\"start\">\n        {CommandContent}\n      </PopoverContent>\n    </Popover>\n  );\n}\n"],"mappings":"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"}

package/dist/client/components/primitives/select-single.mjs

@@ -0,0 +1,183 @@
+"use client";
+
+import { useResolveText } from "../../i18n/hooks.mjs";
+import { cn } from "../../lib/utils.mjs";
+import { Button } from "../ui/button.mjs";
+import { useIsMobile } from "../../hooks/use-media-query.mjs";
+import { Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerTrigger } from "../ui/drawer.mjs";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "../ui/command.mjs";
+import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover.mjs";
+import { flattenOptions } from "./types.mjs";
+import { Icon } from "@iconify/react";
+import { useQuery } from "@tanstack/react-query";
+import { useCallback, useDeferredValue, useId, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/components/primitives/select-single.tsx
+/**
+* SelectSingle - Single select component with search
+*
+* Features:
+* - Always searchable
+* - Responsive: Popover on desktop, Drawer on mobile
+* - Supports static and async options
+* - Keyboard navigation
+*
+* @example
+* ```tsx
+* <SelectSingle
+*   value={status}
+*   onChange={setStatus}
+*   options={[
+*     { value: "active", label: "Active" },
+*     { value: "inactive", label: "Inactive" },
+*   ]}
+* />
+* ```
+*/
+function SelectSingle({ value, onChange, options: staticOptions = [], loadOptions, queryKey, prefetchOnMount = false, clearable = true, loading: externalLoading = false, emptyMessage = "No options found", placeholder = "Select...", disabled, className, id, "aria-invalid": ariaInvalid, drawerTitle = "Select option" }) {
+	const resolveText = useResolveText();
+	const resolvedPlaceholder = resolveText(placeholder);
+	const resolvedEmptyMessage = resolveText(emptyMessage);
+	const resolvedDrawerTitle = resolveText(drawerTitle);
+	const [open, setOpen] = useState(false);
+	const [search, setSearch] = useState("");
+	const instanceId = useId();
+	const deferredSearch = useDeferredValue(search);
+	const isMobile = useIsMobile();
+	const flatStaticOptions = useMemo(() => flattenOptions(staticOptions), [staticOptions]);
+	const { data: dynamicOptions = [], isFetching } = useQuery({
+		queryKey: useMemo(() => queryKey ? queryKey(deferredSearch) : [
+			"select-single",
+			instanceId,
+			deferredSearch
+		], [
+			queryKey,
+			deferredSearch,
+			instanceId
+		]),
+		queryFn: () => loadOptions?.(deferredSearch) ?? Promise.resolve([]),
+		enabled: !!loadOptions && (open || prefetchOnMount),
+		staleTime: 3e4,
+		gcTime: 5 * 6e4
+	});
+	const allOptions = useMemo(() => {
+		if (!loadOptions) return flatStaticOptions;
+		if (flatStaticOptions.length === 0) return dynamicOptions;
+		const mergedMap = [...flatStaticOptions, ...dynamicOptions].reduce((map, opt) => new Map(map).set(opt.value, opt), /* @__PURE__ */ new Map());
+		return Array.from(mergedMap.values());
+	}, [
+		loadOptions,
+		dynamicOptions,
+		flatStaticOptions
+	]);
+	const filteredOptions = useMemo(() => {
+		if (loadOptions) return allOptions;
+		if (!search) return allOptions;
+		return allOptions.filter((opt) => resolveText(opt.label).toLowerCase().includes(search.toLowerCase()));
+	}, [
+		allOptions,
+		search,
+		loadOptions,
+		resolveText
+	]);
+	const getLabel = useCallback((val) => {
+		const option = allOptions.find((opt) => opt.value === val);
+		return option?.label ? resolveText(option.label) : String(val);
+	}, [allOptions, resolveText]);
+	const handleSelect = useCallback((selectedValue) => {
+		onChange(selectedValue);
+		setOpen(false);
+		setSearch("");
+	}, [onChange]);
+	const handleClear = useCallback((e) => {
+		e.stopPropagation();
+		onChange(null);
+	}, [onChange]);
+	const showLoading = isFetching || externalLoading;
+	const TriggerButton = /* @__PURE__ */ jsxs(Button, {
+		id,
+		variant: "outline",
+		role: "combobox",
+		"aria-expanded": open,
+		"aria-invalid": ariaInvalid,
+		disabled,
+		className: cn("w-full justify-between font-normal", !value && "text-muted-foreground", className),
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "truncate",
+			children: value ? getLabel(value) : resolvedPlaceholder
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-1 shrink-0",
+			children: [clearable && value && !disabled && /* @__PURE__ */ jsx("span", {
+				role: "button",
+				tabIndex: -1,
+				onClick: handleClear,
+				onKeyDown: (event) => {
+					if (event.key === "Enter" || event.key === " ") {
+						event.preventDefault();
+						handleClear(event);
+					}
+				},
+				className: "rounded-sm opacity-50 hover:opacity-100 hover:bg-muted p-0.5 -mr-1",
+				children: /* @__PURE__ */ jsx(Icon, {
+					icon: "ph:x",
+					className: "size-3"
+				})
+			}), /* @__PURE__ */ jsx(Icon, {
+				icon: "ph:caret-up-down",
+				className: "size-3.5 opacity-50"
+			})]
+		})]
+	});
+	const CommandContent = /* @__PURE__ */ jsxs(Command, {
+		shouldFilter: !loadOptions,
+		children: [/* @__PURE__ */ jsx(CommandInput, {
+			placeholder: "Search...",
+			value: search,
+			onValueChange: setSearch
+		}), /* @__PURE__ */ jsxs(CommandList, { children: [
+			showLoading && /* @__PURE__ */ jsx("div", {
+				className: "flex items-center justify-center py-6",
+				children: /* @__PURE__ */ jsx(Icon, {
+					icon: "ph:circle-notch",
+					className: "size-4 animate-spin text-muted-foreground"
+				})
+			}),
+			/* @__PURE__ */ jsx(CommandEmpty, { children: resolvedEmptyMessage }),
+			/* @__PURE__ */ jsx(CommandGroup, { children: filteredOptions.map((option) => /* @__PURE__ */ jsxs(CommandItem, {
+				value: String(option.value),
+				onSelect: handleSelect,
+				disabled: option.disabled,
+				"data-checked": value === option.value,
+				children: [option.icon, /* @__PURE__ */ jsx("span", {
+					className: "truncate",
+					children: resolveText(option.label)
+				})]
+			}, String(option.value))) })
+		] })]
+	});
+	if (isMobile) return /* @__PURE__ */ jsxs(Drawer, {
+		open,
+		onOpenChange: setOpen,
+		children: [/* @__PURE__ */ jsx(DrawerTrigger, {
+			asChild: true,
+			children: TriggerButton
+		}), /* @__PURE__ */ jsxs(DrawerContent, { children: [/* @__PURE__ */ jsx(DrawerHeader, { children: /* @__PURE__ */ jsx(DrawerTitle, { children: resolvedDrawerTitle }) }), /* @__PURE__ */ jsx("div", {
+			className: "px-4 pb-6",
+			children: CommandContent
+		})] })]
+	});
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: setOpen,
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, { render: TriggerButton }), /* @__PURE__ */ jsx(PopoverContent, {
+			className: "w-(--anchor-width) p-0",
+			align: "start",
+			children: CommandContent
+		})]
+	});
+}
+
+//#endregion
+export { SelectSingle };
+//# sourceMappingURL=select-single.mjs.map

package/dist/client/components/primitives/select-single.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-single.mjs","names":[],"sources":["../../../../src/client/components/primitives/select-single.tsx"],"sourcesContent":["\"use client\";\n\nimport { Icon } from \"@iconify/react\";\nimport { useQuery } from \"@tanstack/react-query\";\nimport type * as React from \"react\";\nimport { useCallback, useDeferredValue, useId, useMemo, useState } from \"react\";\nimport { useIsMobile } from \"../../hooks/use-media-query\";\nimport { useResolveText } from \"../../i18n/hooks\";\nimport { cn } from \"../../lib/utils\";\nimport { Button } from \"../ui/button\";\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"../ui/command\";\nimport {\n  Drawer,\n  DrawerContent,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"../ui/drawer\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"../ui/popover\";\nimport type { BasePrimitiveProps, SelectOption, SelectOptions } from \"./types\";\nimport { flattenOptions } from \"./types\";\n\nexport interface SelectSingleProps<\n  TValue extends string = string,\n> extends BasePrimitiveProps {\n  /** Selected value */\n  value: TValue | null;\n  /** Change handler */\n  onChange: (value: TValue | null) => void;\n  /** Static options */\n  options?: SelectOptions<TValue>;\n  /** Dynamic options loader */\n  loadOptions?: (search: string) => Promise<SelectOption<TValue>[]>;\n  /** Query key builder for loadOptions */\n  queryKey?: (search: string) => readonly unknown[];\n  /** Prefetch options on mount */\n  prefetchOnMount?: boolean;\n\n  /** Allow clearing selection */\n  clearable?: boolean;\n  /** Debounce delay for loadOptions (ms) */\n  debounceMs?: number;\n  /** External loading state */\n  loading?: boolean;\n  /** Empty state message */\n  emptyMessage?: string;\n  /** Title for mobile drawer */\n  drawerTitle?: string;\n}\n\n/**\n * SelectSingle - Single select component with search\n *\n * Features:\n * - Always searchable\n * - Responsive: Popover on desktop, Drawer on mobile\n * - Supports static and async options\n * - Keyboard navigation\n *\n * @example\n * ```tsx\n * <SelectSingle\n *   value={status}\n *   onChange={setStatus}\n *   options={[\n *     { value: \"active\", label: \"Active\" },\n *     { value: \"inactive\", label: \"Inactive\" },\n *   ]}\n * />\n * ```\n */\nexport function SelectSingle<TValue extends string = string>({\n  value,\n  onChange,\n  options: staticOptions = [],\n  loadOptions,\n  queryKey,\n  prefetchOnMount = false,\n  clearable = true,\n  loading: externalLoading = false,\n  emptyMessage = \"No options found\",\n  placeholder = \"Select...\",\n  disabled,\n  className,\n  id,\n  \"aria-invalid\": ariaInvalid,\n  drawerTitle = \"Select option\",\n}: SelectSingleProps<TValue>) {\n  const resolveText = useResolveText();\n  const resolvedPlaceholder = resolveText(placeholder);\n  const resolvedEmptyMessage = resolveText(emptyMessage);\n  const resolvedDrawerTitle = resolveText(drawerTitle);\n  const [open, setOpen] = useState(false);\n  const [search, setSearch] = useState(\"\");\n  const instanceId = useId();\n  const deferredSearch = useDeferredValue(search);\n  const isMobile = useIsMobile();\n\n  // Flatten static options\n  const flatStaticOptions = useMemo(\n    () => flattenOptions(staticOptions),\n    [staticOptions],\n  );\n\n  const loadOptionsKey = useMemo(\n    () =>\n      queryKey\n        ? queryKey(deferredSearch)\n        : [\"select-single\", instanceId, deferredSearch],\n    [queryKey, deferredSearch, instanceId],\n  );\n\n  const { data: dynamicOptions = [], isFetching } = useQuery({\n    queryKey: loadOptionsKey,\n    queryFn: () => loadOptions?.(deferredSearch) ?? Promise.resolve([]),\n    enabled: !!loadOptions && (open || prefetchOnMount),\n    staleTime: 30_000,\n    gcTime: 5 * 60_000,\n  });\n\n  // Merge static and dynamic options (immutable pattern for React Compiler)\n  const allOptions = useMemo(() => {\n    if (!loadOptions) {\n      return flatStaticOptions;\n    }\n    if (flatStaticOptions.length === 0) {\n      return dynamicOptions;\n    }\n    // Use reduce to build Map immutably - dynamic options override static\n    const mergedMap = [...flatStaticOptions, ...dynamicOptions].reduce(\n      (map, opt) => new Map(map).set(opt.value, opt),\n      new Map<TValue, SelectOption<TValue>>(),\n    );\n    return Array.from(mergedMap.values());\n  }, [loadOptions, dynamicOptions, flatStaticOptions]);\n\n  // Filter options by search (for static options)\n  const filteredOptions = useMemo(() => {\n    if (loadOptions) {\n      return allOptions; // Dynamic options are already filtered by server\n    }\n    if (!search) {\n      return allOptions;\n    }\n    return allOptions.filter((opt: SelectOption<TValue>) =>\n      resolveText(opt.label).toLowerCase().includes(search.toLowerCase()),\n    );\n  }, [allOptions, search, loadOptions, resolveText]);\n\n  // Get label for a value\n  const getLabel = useCallback(\n    (val: TValue): string => {\n      const option = allOptions.find(\n        (opt: SelectOption<TValue>) => opt.value === val,\n      );\n      return option?.label ? resolveText(option.label) : String(val);\n    },\n    [allOptions, resolveText],\n  );\n\n  const handleSelect = useCallback(\n    (selectedValue: string) => {\n      onChange(selectedValue as TValue);\n      setOpen(false);\n      setSearch(\"\");\n    },\n    [onChange],\n  );\n\n  const handleClear = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation();\n      onChange(null);\n    },\n    [onChange],\n  );\n\n  const showLoading = isFetching || externalLoading;\n\n  const TriggerButton = (\n    <Button\n      id={id}\n      variant=\"outline\"\n      role=\"combobox\"\n      aria-expanded={open}\n      aria-invalid={ariaInvalid}\n      disabled={disabled}\n      className={cn(\n        \"w-full justify-between font-normal\",\n        !value && \"text-muted-foreground\",\n        className,\n      )}\n    >\n      <span className=\"truncate\">\n        {value ? getLabel(value) : resolvedPlaceholder}\n      </span>\n      <div className=\"flex items-center gap-1 shrink-0\">\n        {clearable && value && !disabled && (\n          <span\n            role=\"button\"\n            tabIndex={-1}\n            onClick={handleClear}\n            onKeyDown={(event) => {\n              if (event.key === \"Enter\" || event.key === \" \") {\n                event.preventDefault();\n                handleClear(event as unknown as React.MouseEvent);\n              }\n            }}\n            className=\"rounded-sm opacity-50 hover:opacity-100 hover:bg-muted p-0.5 -mr-1\"\n          >\n            <Icon icon=\"ph:x\" className=\"size-3\" />\n          </span>\n        )}\n        <Icon icon=\"ph:caret-up-down\" className=\"size-3.5 opacity-50\" />\n      </div>\n    </Button>\n  );\n\n  const CommandContent = (\n    <Command shouldFilter={!loadOptions}>\n      <CommandInput\n        placeholder=\"Search...\"\n        value={search}\n        onValueChange={setSearch}\n      />\n      <CommandList>\n        {showLoading && (\n          <div className=\"flex items-center justify-center py-6\">\n            <Icon\n              icon=\"ph:circle-notch\"\n              className=\"size-4 animate-spin text-muted-foreground\"\n            />\n          </div>\n        )}\n        <CommandEmpty>{resolvedEmptyMessage}</CommandEmpty>\n        <CommandGroup>\n          {filteredOptions.map((option) => (\n            <CommandItem\n              key={String(option.value)}\n              value={String(option.value)}\n              onSelect={handleSelect}\n              disabled={option.disabled}\n              data-checked={value === option.value}\n            >\n              {option.icon}\n              <span className=\"truncate\">{resolveText(option.label)}</span>\n            </CommandItem>\n          ))}\n        </CommandGroup>\n      </CommandList>\n    </Command>\n  );\n\n  // Mobile: Drawer\n  if (isMobile) {\n    return (\n      <Drawer open={open} onOpenChange={setOpen}>\n        <DrawerTrigger asChild>{TriggerButton}</DrawerTrigger>\n        <DrawerContent>\n          <DrawerHeader>\n            <DrawerTitle>{resolvedDrawerTitle}</DrawerTitle>\n          </DrawerHeader>\n          <div className=\"px-4 pb-6\">{CommandContent}</div>\n        </DrawerContent>\n      </Drawer>\n    );\n  }\n\n  // Desktop: Popover\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger render={TriggerButton} />\n      <PopoverContent className=\"w-(--anchor-width) p-0\" align=\"start\">\n        {CommandContent}\n      </PopoverContent>\n    </Popover>\n  );\n}\n"],"mappings":"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"}

package/dist/client/components/primitives/text-input.mjs

@@ -0,0 +1,40 @@
+import { useResolveText } from "../../i18n/hooks.mjs";
+import { Input } from "../ui/input.mjs";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/client/components/primitives/text-input.tsx
+/**
+* Text Input Primitive
+*
+* A basic text input with value/onChange pattern.
+* Supports different input types: text, email, password, url, tel, search.
+*
+* @example
+* ```tsx
+* <TextInput
+*   value={email}
+*   onChange={setEmail}
+*   type="email"
+*   placeholder="Enter email"
+* />
+* ```
+*/
+function TextInput({ value, onChange, type = "text", placeholder, disabled, readOnly, maxLength, autoComplete, className, id, "aria-invalid": ariaInvalid }) {
+	return /* @__PURE__ */ jsx(Input, {
+		id,
+		type,
+		value,
+		onChange: (e) => onChange(e.target.value),
+		placeholder: useResolveText()(placeholder),
+		disabled,
+		readOnly,
+		maxLength,
+		autoComplete,
+		"aria-invalid": ariaInvalid,
+		className
+	});
+}
+
+//#endregion
+export { TextInput };
+//# sourceMappingURL=text-input.mjs.map

package/dist/client/components/primitives/text-input.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-input.mjs","names":[],"sources":["../../../../src/client/components/primitives/text-input.tsx"],"sourcesContent":["import { useResolveText } from \"../../i18n/hooks\";\nimport { Input } from \"../ui/input\";\nimport type { TextInputProps } from \"./types\";\n\n/**\n * Text Input Primitive\n *\n * A basic text input with value/onChange pattern.\n * Supports different input types: text, email, password, url, tel, search.\n *\n * @example\n * ```tsx\n * <TextInput\n *   value={email}\n *   onChange={setEmail}\n *   type=\"email\"\n *   placeholder=\"Enter email\"\n * />\n * ```\n */\nexport function TextInput({\n  value,\n  onChange,\n  type = \"text\",\n  placeholder,\n  disabled,\n  readOnly,\n  maxLength,\n  autoComplete,\n  className,\n  id,\n  \"aria-invalid\": ariaInvalid,\n}: TextInputProps) {\n  const resolveText = useResolveText();\n\n  return (\n    <Input\n      id={id}\n      type={type}\n      value={value}\n      onChange={(e) => onChange(e.target.value)}\n      placeholder={resolveText(placeholder)}\n      disabled={disabled}\n      readOnly={readOnly}\n      maxLength={maxLength}\n      autoComplete={autoComplete}\n      aria-invalid={ariaInvalid}\n      className={className}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAoBA,SAAgB,UAAU,EACxB,OACA,UACA,OAAO,QACP,aACA,UACA,UACA,WACA,cACA,WACA,IACA,gBAAgB,eACC;AAGjB,QACE,oBAAC;EACK;EACE;EACC;EACP,WAAW,MAAM,SAAS,EAAE,OAAO,MAAM;EACzC,aARgB,gBAAgB,CAQP,YAAY;EAC3B;EACA;EACC;EACG;EACd,gBAAc;EACH;GACX"}

package/dist/client/components/primitives/textarea-input.mjs

@@ -0,0 +1,38 @@
+import { useResolveText } from "../../i18n/hooks.mjs";
+import { Textarea } from "../ui/textarea.mjs";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/client/components/primitives/textarea-input.tsx
+/**
+* Textarea Input Primitive
+*
+* A multi-line text input.
+*
+* @example
+* ```tsx
+* <TextareaInput
+*   value={description}
+*   onChange={setDescription}
+*   rows={4}
+*   placeholder="Enter description..."
+* />
+* ```
+*/
+function TextareaInput({ value, onChange, rows = 3, maxLength, placeholder, disabled, readOnly, className, id, "aria-invalid": ariaInvalid }) {
+	return /* @__PURE__ */ jsx(Textarea, {
+		id,
+		value,
+		onChange: (e) => onChange(e.target.value),
+		rows,
+		maxLength,
+		placeholder: useResolveText()(placeholder),
+		disabled,
+		readOnly,
+		"aria-invalid": ariaInvalid,
+		className
+	});
+}
+
+//#endregion
+export { TextareaInput };
+//# sourceMappingURL=textarea-input.mjs.map

package/dist/client/components/primitives/textarea-input.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea-input.mjs","names":[],"sources":["../../../../src/client/components/primitives/textarea-input.tsx"],"sourcesContent":["import { useResolveText } from \"../../i18n/hooks\";\nimport { Textarea } from \"../ui/textarea\";\nimport type { TextareaInputProps } from \"./types\";\n\n/**\n * Textarea Input Primitive\n *\n * A multi-line text input.\n *\n * @example\n * ```tsx\n * <TextareaInput\n *   value={description}\n *   onChange={setDescription}\n *   rows={4}\n *   placeholder=\"Enter description...\"\n * />\n * ```\n */\nexport function TextareaInput({\n  value,\n  onChange,\n  rows = 3,\n  maxLength,\n  placeholder,\n  disabled,\n  readOnly,\n  className,\n  id,\n  \"aria-invalid\": ariaInvalid,\n}: TextareaInputProps) {\n  const resolveText = useResolveText();\n\n  return (\n    <Textarea\n      id={id}\n      value={value}\n      onChange={(e) => onChange(e.target.value)}\n      rows={rows}\n      maxLength={maxLength}\n      placeholder={resolveText(placeholder)}\n      disabled={disabled}\n      readOnly={readOnly}\n      aria-invalid={ariaInvalid}\n      className={className}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAmBA,SAAgB,cAAc,EAC5B,OACA,UACA,OAAO,GACP,WACA,aACA,UACA,UACA,WACA,IACA,gBAAgB,eACK;AAGrB,QACE,oBAAC;EACK;EACG;EACP,WAAW,MAAM,SAAS,EAAE,OAAO,MAAM;EACnC;EACK;EACX,aATgB,gBAAgB,CASP,YAAY;EAC3B;EACA;EACV,gBAAc;EACH;GACX"}

package/dist/client/components/primitives/time-input.mjs

@@ -0,0 +1,72 @@
+"use client";
+
+import { useResolveText } from "../../i18n/hooks.mjs";
+import { cn } from "../../lib/utils.mjs";
+import { Icon } from "@iconify/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/components/primitives/time-input.tsx
+/**
+* Time Input Primitive
+*
+* A time-only input using the native HTML time picker.
+* Returns time as string in "HH:mm" or "HH:mm:ss" format.
+*
+* @example
+* ```tsx
+* <TimeInput
+*   value={selectedTime}
+*   onChange={setSelectedTime}
+*   placeholder="Select time"
+* />
+* ```
+*/
+function TimeInput({ value, onChange, precision = "minute", placeholder = "Select time", disabled, className, id, "aria-invalid": ariaInvalid }) {
+	const resolveText = useResolveText();
+	const handleChange = (e) => {
+		const timeValue = e.target.value;
+		onChange(timeValue || null);
+	};
+	const handleClear = (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		onChange(null);
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className: "relative",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: cn("flex h-9 w-full items-center gap-2 border border-input/80 bg-input/20 backdrop-blur-sm px-3 py-2 text-sm", "focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2", disabled && "cursor-not-allowed opacity-50", ariaInvalid && "border-destructive", className),
+			children: [
+				/* @__PURE__ */ jsx(Icon, {
+					icon: "ph:clock",
+					className: "size-4 text-muted-foreground"
+				}),
+				/* @__PURE__ */ jsx("input", {
+					type: "time",
+					id,
+					value: value ?? "",
+					onChange: handleChange,
+					step: precision === "second" ? 1 : 60,
+					disabled,
+					"aria-invalid": ariaInvalid,
+					placeholder: resolveText(placeholder),
+					className: cn("flex-1 bg-transparent outline-none", "placeholder:text-muted-foreground", "disabled:cursor-not-allowed", "[&::-webkit-calendar-picker-indicator]:hidden")
+				}),
+				value && !disabled && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: handleClear,
+					className: "text-muted-foreground hover:text-foreground",
+					tabIndex: -1,
+					children: /* @__PURE__ */ jsx(Icon, {
+						icon: "ph:x",
+						className: "size-4"
+					})
+				})
+			]
+		})
+	});
+}
+
+//#endregion
+export { TimeInput };
+//# sourceMappingURL=time-input.mjs.map