@arcote.tech/arc-ds 0.4.1

package/src/ds/search-select/search-select.tsx

@@ -0,0 +1,291 @@
+import { Input } from "../input/input";
+import { Search, ChevronDown, X, Check } from "lucide-react";
+import { useState, useRef, useEffect, useMemo, useCallback } from "react";
+import type { ReactNode } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+
+export interface SearchSelectOption {
+  value: string;
+  label: string;
+  icon?: ReactNode;
+}
+
+export interface SearchSelectProps {
+  value?: string;
+  onChange?: (value: string) => void;
+  options: SearchSelectOption[];
+  placeholder?: string;
+  searchPlaceholder?: string;
+  position?: "relative" | "absolute";
+  /** Direction the dropdown opens. Default: "down". */
+  direction?: "down" | "up";
+  /** Trigger button size. Default: "default". */
+  size?: "default" | "sm";
+  renderOption?: (option: SearchSelectOption, isActive: boolean, isSelected: boolean) => ReactNode;
+  allowClear?: boolean;
+}
+
+export function SearchSelect({
+  value,
+  onChange,
+  options,
+  placeholder = "Wybierz...",
+  searchPlaceholder = "Szukaj...",
+  position = "relative",
+  direction = "down",
+  size = "default",
+  renderOption,
+  allowClear = true,
+}: SearchSelectProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const [activeIndex, setActiveIndex] = useState(0);
+
+  const containerRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const selectedOption = useMemo(
+    () => options.find((o) => o.value === value),
+    [options, value],
+  );
+
+  const filtered = useMemo(() => {
+    if (!query.trim()) return options;
+    const q = query.toLowerCase().trim();
+    return options.filter((o) => o.label.toLowerCase().includes(q));
+  }, [options, query]);
+
+  useEffect(() => {
+    setActiveIndex((prev) => (filtered.length === 0 ? 0 : Math.min(prev, filtered.length - 1)));
+  }, [filtered.length]);
+
+  // Click outside
+  useEffect(() => {
+    if (!isOpen) return;
+    const handler = (e: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        setIsOpen(false);
+        setQuery("");
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [isOpen]);
+
+  // Scroll active into view
+  useEffect(() => {
+    if (!isOpen) return;
+    const el = containerRef.current?.querySelector("[data-active='true']");
+    if (el) el.scrollIntoView({ block: "nearest" });
+  }, [activeIndex, isOpen]);
+
+  const select = useCallback(
+    (val: string) => {
+      onChange?.(val);
+      setIsOpen(false);
+      setQuery("");
+    },
+    [onChange],
+  );
+
+  const clear = useCallback(() => {
+    onChange?.("");
+    setIsOpen(false);
+    setQuery("");
+  }, [onChange]);
+
+  const open = () => {
+    setIsOpen(true);
+    setActiveIndex(0);
+    setQuery("");
+    requestAnimationFrame(() => inputRef.current?.focus());
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        setActiveIndex((prev) => (filtered.length === 0 ? 0 : (prev + 1) % filtered.length));
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        setActiveIndex((prev) => (filtered.length === 0 ? 0 : (prev - 1 + filtered.length) % filtered.length));
+        break;
+      case "Enter":
+        e.preventDefault();
+        if (filtered.length > 0 && activeIndex < filtered.length) {
+          select(filtered[activeIndex].value);
+        }
+        break;
+      case "Escape":
+        e.preventDefault();
+        setIsOpen(false);
+        setQuery("");
+        break;
+    }
+  };
+
+  const defaultRenderOption = (opt: SearchSelectOption, isActive: boolean, isSelected: boolean) => (
+    <div className="flex items-center gap-2.5">
+      {opt.icon && <span className="shrink-0 text-muted-foreground">{opt.icon}</span>}
+      <span className={`flex-1 truncate text-sm ${isActive ? "text-primary font-medium" : ""}`}>
+        {opt.label}
+      </span>
+      {isSelected && <Check className="h-3.5 w-3.5 text-primary shrink-0" />}
+    </div>
+  );
+
+  const optionRenderer = renderOption ?? defaultRenderOption;
+
+  const isAbsolute = position === "absolute";
+  const isUp = direction === "up";
+  const triggerHeight = size === "sm" ? "h-8 text-xs px-2.5" : "h-10 md:h-9 text-base md:text-sm px-3";
+
+  return (
+    <div ref={containerRef} className={isAbsolute ? "relative" : ""}>
+      {/* Trigger */}
+      {!isOpen ? (
+        <button
+          type="button"
+          onClick={open}
+          className={`flex w-full items-center justify-between rounded-md border border-input bg-transparent ${triggerHeight} shadow-xs transition-colors hover:bg-muted/50`}
+        >
+          {selectedOption ? (
+            <div className="flex items-center gap-2 min-w-0">
+              {selectedOption.icon && <span className="shrink-0">{selectedOption.icon}</span>}
+              <span className="truncate">{selectedOption.label}</span>
+            </div>
+          ) : (
+            <span className="text-muted-foreground">{placeholder}</span>
+          )}
+          <div className="flex items-center gap-1 shrink-0">
+            {allowClear && value && (
+              <span
+                role="button"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  clear();
+                }}
+                className="rounded-full p-0.5 text-muted-foreground/50 hover:bg-muted hover:text-foreground transition-colors"
+              >
+                <X className="h-3 w-3" />
+              </span>
+            )}
+            <ChevronDown className="h-3.5 w-3.5 text-muted-foreground" />
+          </div>
+        </button>
+      ) : !isAbsolute ? (
+        /* Inline search — relative mode */
+        <div className="rounded-md border border-input overflow-hidden">
+          <div className="p-1.5">
+            <Input
+              ref={inputRef}
+              icon={Search}
+              size="sm"
+              value={query}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                setQuery(e.target.value);
+                setActiveIndex(0);
+              }}
+              onKeyDown={handleKeyDown}
+              placeholder={searchPlaceholder}
+              className="border-0 shadow-none focus-visible:ring-0 focus-visible:border-transparent"
+            />
+          </div>
+          {filtered.length > 0 && (
+            <div className="border-t border-border max-h-[192px] overflow-y-auto">
+              {filtered.map((opt, i) => (
+                <button
+                  key={opt.value}
+                  type="button"
+                  data-active={i === activeIndex}
+                  onClick={() => select(opt.value)}
+                  onMouseEnter={() => setActiveIndex(i)}
+                  className={`flex w-full items-center px-3 py-2 text-left transition-colors ${
+                    i === activeIndex ? "bg-primary/10" : "hover:bg-muted"
+                  }`}
+                >
+                  {optionRenderer(opt, i === activeIndex, opt.value === value)}
+                </button>
+              ))}
+            </div>
+          )}
+          {filtered.length === 0 && query && (
+            <div className="border-t border-border px-3 py-3 text-center text-xs text-muted-foreground">
+              Brak wyników
+            </div>
+          )}
+        </div>
+      ) : (
+        /* Trigger stays visible in absolute mode */
+        <button
+          type="button"
+          onClick={() => { setIsOpen(false); setQuery(""); }}
+          className={`flex w-full items-center justify-between rounded-md border border-ring bg-transparent ${triggerHeight} shadow-xs ring-[3px] ring-ring/50`}
+        >
+          {selectedOption ? (
+            <div className="flex items-center gap-2 min-w-0">
+              {selectedOption.icon && <span className="shrink-0">{selectedOption.icon}</span>}
+              <span className="truncate">{selectedOption.label}</span>
+            </div>
+          ) : (
+            <span className="text-muted-foreground">{placeholder}</span>
+          )}
+          <ChevronDown className="h-3.5 w-3.5 text-muted-foreground rotate-180 transition-transform" />
+        </button>
+      )}
+
+      {/* Absolute dropdown */}
+      <AnimatePresence>
+        {isOpen && isAbsolute && (
+          <motion.div
+            initial={{ opacity: 0, y: isUp ? 4 : -4 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: isUp ? 4 : -4 }}
+            transition={{ duration: 0.12 }}
+            className={`absolute left-0 right-0 z-50 rounded-md border border-input bg-card shadow-lg overflow-hidden ${isUp ? "bottom-full mb-1" : "mt-1"}`}
+          >
+            <div className="p-1.5">
+              <Input
+                ref={inputRef}
+                icon={Search}
+                size="sm"
+                value={query}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                  setQuery(e.target.value);
+                  setActiveIndex(0);
+                }}
+                onKeyDown={handleKeyDown}
+                placeholder={searchPlaceholder}
+                className="border-0 shadow-none focus-visible:ring-0 focus-visible:border-transparent"
+              />
+            </div>
+            {filtered.length > 0 && (
+              <div className="border-t border-border max-h-[192px] overflow-y-auto">
+                {filtered.map((opt, i) => (
+                  <button
+                    key={opt.value}
+                    type="button"
+                    data-active={i === activeIndex}
+                    onClick={() => select(opt.value)}
+                    onMouseEnter={() => setActiveIndex(i)}
+                    className={`flex w-full items-center px-3 py-2 text-left transition-colors ${
+                      i === activeIndex ? "bg-primary/10" : "hover:bg-muted"
+                    }`}
+                  >
+                    {optionRenderer(opt, i === activeIndex, opt.value === value)}
+                  </button>
+                ))}
+              </div>
+            )}
+            {filtered.length === 0 && query && (
+              <div className="border-t border-border px-3 py-3 text-center text-xs text-muted-foreground">
+                Brak wyników
+              </div>
+            )}
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}

package/src/ds/separator/separator.tsx

@@ -0,0 +1,26 @@
+import { Separator as SeparatorPrimitive } from "radix-ui";
+import { cn } from "../../lib/utils";
+import type { SeparatorProps } from "../types";
+
+/**
+ * Separator — DS wrapper nad Radix Separator.
+ */
+export function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: SeparatorProps) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className,
+      )}
+      {...props}
+    />
+  );
+}