@arcote.tech/arc-ds 0.4.1

package/src/ds/suggestion-list/suggestion-list.tsx

@@ -0,0 +1,406 @@
+import { Input } from "../input/input";
+import { Plus, X, Search, ChevronRight, Pencil } from "lucide-react";
+import { useState, useRef, useEffect, useMemo, useCallback } from "react";
+import type { ReactNode } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+
+export interface InitialCloudConfig {
+  count: number;
+  label?: ReactNode;
+  description?: ReactNode;
+}
+
+export interface SuggestionListProps<T> {
+  items: T[];
+  onChange: (items: T[]) => void;
+  suggestions: T[];
+
+  getKey?: (item: T) => string;
+  getSearchLabel?: (item: T) => string;
+  getIcon?: (item: T) => ReactNode;
+
+  renderItem?: (item: T, onRemove: () => void) => ReactNode;
+  renderSuggestion?: (item: T, isActive: boolean) => ReactNode;
+
+  allowCustom?: boolean;
+  allowDuplicates?: boolean;
+  createCustom?: (text: string) => T;
+  placeholder?: string;
+  max?: number;
+  initialCloud?: InitialCloudConfig;
+}
+
+const defaultGetKey = <T,>(item: T) => String(item);
+const defaultGetSearchLabel = <T,>(item: T) => String(item);
+const defaultCreateCustom = <T,>(text: string) => text as unknown as T;
+
+export function SuggestionList<T>({
+  items,
+  onChange,
+  suggestions,
+  getKey = defaultGetKey,
+  getSearchLabel = defaultGetSearchLabel,
+  getIcon,
+  renderItem,
+  renderSuggestion,
+  allowCustom = true,
+  allowDuplicates = false,
+  createCustom = defaultCreateCustom,
+  placeholder = "Wyszukaj...",
+  max,
+  initialCloud,
+}: SuggestionListProps<T>) {
+  const [inputValue, setInputValue] = useState("");
+  const [isEditing, setIsEditing] = useState(false);
+  const [activeIndex, setActiveIndex] = useState(0);
+  // Once user interacts (adds/removes or clicks "more"), we leave cloud mode permanently
+  const [cloudDismissed, setCloudDismissed] = useState(false);
+
+  const containerRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const safeItems = Array.isArray(items) ? items : [];
+
+  const selectedKeys = useMemo(
+    () => new Set(safeItems.map(getKey)),
+    [safeItems, getKey],
+  );
+
+  const filtered = useMemo(() => {
+    const query = inputValue.toLowerCase().trim();
+    return suggestions.filter((s) => {
+      if (!allowDuplicates && selectedKeys.has(getKey(s))) return false;
+      if (!query) return true;
+      return getSearchLabel(s).toLowerCase().includes(query);
+    });
+  }, [suggestions, inputValue, selectedKeys, getKey, getSearchLabel, allowDuplicates]);
+
+  const showCustomOption =
+    allowCustom &&
+    inputValue.trim() &&
+    !filtered.some(
+      (s) => getSearchLabel(s).toLowerCase() === inputValue.trim().toLowerCase(),
+    );
+
+  const totalOptions = filtered.length + (showCustomOption ? 1 : 0);
+
+  // Show cloud: initial state, no items, not dismissed, config provided
+  const showCloud = initialCloud && safeItems.length === 0 && !cloudDismissed && !isEditing;
+
+  useEffect(() => {
+    setActiveIndex((prev) => (totalOptions === 0 ? 0 : Math.min(prev, totalOptions - 1)));
+  }, [totalOptions]);
+
+  useEffect(() => {
+    if (!isEditing) return;
+    const handler = (e: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        setIsEditing(false);
+        setInputValue("");
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [isEditing]);
+
+  useEffect(() => {
+    if (!isEditing || !dropdownRef.current) return;
+    const active = dropdownRef.current.querySelector("[data-active='true']");
+    if (active) {
+      active.scrollIntoView({ block: "nearest" });
+    }
+  }, [activeIndex, isEditing]);
+
+  const addItem = useCallback(
+    (item: T) => {
+      if (max && safeItems.length >= max) return;
+      onChange([...safeItems, item]);
+      setInputValue("");
+      setActiveIndex(0);
+      setCloudDismissed(true);
+      requestAnimationFrame(() => inputRef.current?.focus());
+    },
+    [safeItems, onChange, max],
+  );
+
+  const removeItemByIndex = useCallback(
+    (index: number) => {
+      onChange(safeItems.filter((_, i) => i !== index));
+    },
+    [safeItems, onChange],
+  );
+
+  const selectActive = useCallback(() => {
+    if (totalOptions === 0) return;
+    if (activeIndex < filtered.length) {
+      addItem(filtered[activeIndex]);
+    } else if (showCustomOption) {
+      addItem(createCustom(inputValue.trim()));
+    }
+  }, [activeIndex, filtered, showCustomOption, addItem, createCustom, inputValue, totalOptions]);
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        setActiveIndex((prev) => (totalOptions === 0 ? 0 : (prev + 1) % totalOptions));
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        setActiveIndex((prev) => (totalOptions === 0 ? 0 : (prev - 1 + totalOptions) % totalOptions));
+        break;
+      case "Enter":
+        e.preventDefault();
+        selectActive();
+        break;
+      case "Escape":
+        e.preventDefault();
+        setIsEditing(false);
+        setInputValue("");
+        break;
+      case "Backspace":
+        if (!inputValue && safeItems.length > 0) {
+          onChange(safeItems.slice(0, -1));
+        }
+        break;
+    }
+  };
+
+  const openEditing = () => {
+    if (max && safeItems.length >= max) return;
+    setCloudDismissed(true);
+    setIsEditing(true);
+    setActiveIndex(0);
+    requestAnimationFrame(() => inputRef.current?.focus());
+  };
+
+  const isAtMax = max !== undefined && safeItems.length >= max;
+
+  const defaultRenderItem = (item: T, onRemove: () => void) => (
+    <div className="flex w-full items-center gap-3 px-3.5 py-2.5">
+      {getIcon && (
+        <span className="shrink-0 text-muted-foreground">{getIcon(item)}</span>
+      )}
+      <span className="flex-1 text-sm">{getSearchLabel(item)}</span>
+      <button
+        type="button"
+        onClick={(e) => {
+          e.stopPropagation();
+          onRemove();
+        }}
+        className="shrink-0 rounded-full p-1 text-muted-foreground/50 transition-colors hover:bg-muted hover:text-foreground"
+      >
+        <X className="h-3.5 w-3.5" />
+      </button>
+    </div>
+  );
+
+  const defaultRenderSuggestion = (item: T, isActive: boolean) => (
+    <div className="flex items-center gap-2.5">
+      {getIcon && (
+        <span className="shrink-0 text-muted-foreground">{getIcon(item)}</span>
+      )}
+      <span className={`block truncate text-sm ${isActive ? "text-primary font-medium" : ""}`}>
+        {getSearchLabel(item)}
+      </span>
+    </div>
+  );
+
+  const itemRenderer = renderItem ?? defaultRenderItem;
+  const suggestionRenderer = renderSuggestion ?? defaultRenderSuggestion;
+
+  const addFromCloud = useCallback(
+    (item: T) => {
+      if (max && safeItems.length >= max) return;
+      onChange([...safeItems, item]);
+      setInputValue("");
+      setActiveIndex(0);
+      setCloudDismissed(true);
+      setIsEditing(true);
+      requestAnimationFrame(() => inputRef.current?.focus());
+    },
+    [safeItems, onChange, max],
+  );
+
+  // ── Cloud view ──────────────────────────────────────────────
+  if (showCloud) {
+    const cloudCount = initialCloud.count;
+    const availableSuggestions = allowDuplicates
+      ? suggestions
+      : suggestions.filter((s) => !selectedKeys.has(getKey(s)));
+    const visibleSuggestions = availableSuggestions.slice(0, cloudCount);
+    const hasMore = availableSuggestions.length > cloudCount;
+
+    return (
+      <motion.div
+        initial={{ opacity: 0, y: 8 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.2 }}
+        className="space-y-3"
+      >
+        {(initialCloud.label || initialCloud.description) && (
+          <div className="text-center space-y-1 px-2">
+            {initialCloud.label && (
+              <p className="text-sm font-medium">{initialCloud.label}</p>
+            )}
+            {initialCloud.description && (
+              <p className="text-xs text-muted-foreground">{initialCloud.description}</p>
+            )}
+          </div>
+        )}
+        <div className="flex flex-wrap gap-2 justify-center">
+          {visibleSuggestions.map((item, i) => (
+            <motion.button
+              key={getKey(item)}
+              type="button"
+              initial={{ opacity: 0, scale: 0.9 }}
+              animate={{ opacity: 1, scale: 1 }}
+              transition={{ duration: 0.15, delay: i * 0.03 }}
+              onClick={() => addFromCloud(item)}
+              className="inline-flex items-center gap-1.5 rounded-xl border border-border bg-card px-3 py-1.5 text-sm transition-all hover:border-primary/40 hover:bg-primary/5 hover:text-primary hover:shadow-sm active:scale-95"
+            >
+              {getIcon && (
+                <span className="text-muted-foreground">{getIcon(item)}</span>
+              )}
+              {getSearchLabel(item)}
+            </motion.button>
+          ))}
+          {(hasMore || allowCustom) && (
+            <motion.button
+              type="button"
+              initial={{ opacity: 0, scale: 0.9 }}
+              animate={{ opacity: 1, scale: 1 }}
+              transition={{ duration: 0.15, delay: visibleSuggestions.length * 0.03 }}
+              onClick={openEditing}
+              className="inline-flex items-center gap-1.5 rounded-xl border border-dashed border-muted-foreground/30 px-3 py-1.5 text-sm text-muted-foreground transition-all hover:border-primary/40 hover:bg-primary/5 hover:text-primary active:scale-95"
+            >
+              {allowCustom ? (
+                <>
+                  <Pencil className="h-3 w-3" />
+                  Własny
+                </>
+              ) : (
+                <>
+                  Więcej
+                  <ChevronRight className="h-3 w-3" />
+                </>
+              )}
+            </motion.button>
+          )}
+        </div>
+      </motion.div>
+    );
+  }
+
+  // ── List view ───────────────────────────────────────────────
+  return (
+    <div ref={containerRef} className="rounded-xl border border-border overflow-hidden">
+      {/* Items */}
+      <AnimatePresence initial={false}>
+        {safeItems.map((item, index) => (
+          <motion.div
+            key={`${getKey(item)}-${index}`}
+            initial={{ height: 0, opacity: 0 }}
+            animate={{ height: "auto", opacity: 1 }}
+            exit={{ height: 0, opacity: 0 }}
+            transition={{ duration: 0.15 }}
+            className="overflow-hidden"
+          >
+            <div className="w-full border-b border-border last:border-b-0">
+              {itemRenderer(item, () => removeItemByIndex(index))}
+            </div>
+          </motion.div>
+        ))}
+      </AnimatePresence>
+
+      {/* Placeholder / Input + Dropdown */}
+      {!isAtMax && (
+        <div className={safeItems.length > 0 ? "border-t border-border" : ""}>
+          {isEditing ? (
+            <>
+              <div className="p-1.5">
+                <Input
+                  ref={inputRef}
+                  icon={Search}
+                  size="sm"
+                  value={inputValue}
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                    setInputValue(e.target.value);
+                    setActiveIndex(0);
+                  }}
+                  onKeyDown={handleKeyDown}
+                  placeholder={placeholder}
+                  className="border-0 shadow-none focus-visible:ring-0 focus-visible:border-transparent"
+                />
+              </div>
+              <AnimatePresence>
+                {totalOptions > 0 && (
+                  <motion.div
+                    ref={dropdownRef}
+                    initial={{ height: 0, opacity: 0 }}
+                    animate={{ height: "auto", opacity: 1 }}
+                    exit={{ height: 0, opacity: 0 }}
+                    transition={{ duration: 0.15 }}
+                    className="overflow-hidden border-t border-border"
+                  >
+                    <div className="max-h-[192px] overflow-y-auto">
+                      {filtered.map((item, i) => (
+                        <button
+                          key={`suggestion-${getKey(item)}-${i}`}
+                          type="button"
+                          data-active={i === activeIndex}
+                          onClick={() => addItem(item)}
+                          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"
+                          }`}
+                        >
+                          {suggestionRenderer(item, i === activeIndex)}
+                        </button>
+                      ))}
+                      {showCustomOption && (
+                        <button
+                          type="button"
+                          data-active={activeIndex === filtered.length}
+                          onClick={() => addItem(createCustom(inputValue.trim()))}
+                          onMouseEnter={() => setActiveIndex(filtered.length)}
+                          className={`flex w-full items-center gap-2 px-3 py-2 text-left text-sm transition-colors ${
+                            activeIndex === filtered.length ? "bg-primary/10" : "hover:bg-muted"
+                          }`}
+                        >
+                          <Plus className="h-3.5 w-3.5 text-muted-foreground" />
+                          <span>
+                            Dodaj <span className="font-medium text-primary">"{inputValue.trim()}"</span>
+                          </span>
+                        </button>
+                      )}
+                    </div>
+                  </motion.div>
+                )}
+              </AnimatePresence>
+            </>
+          ) : (
+            <button
+              type="button"
+              onClick={openEditing}
+              className="flex w-full items-center gap-2 px-3 py-2.5 text-sm text-muted-foreground transition-colors hover:bg-muted/50 hover:text-foreground"
+            >
+              <Plus className="h-3.5 w-3.5" />
+              {placeholder}
+            </button>
+          )}
+        </div>
+      )}
+
+      {/* Counter */}
+      {max && (
+        <div className="border-t border-border px-3 py-1.5">
+          <p className="text-xs text-muted-foreground">
+            {safeItems.length}/{max}
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/ds/tag-list/tag-list.tsx

@@ -0,0 +1,87 @@
+import { Input } from "../input/input";
+import { Plus, X } from "lucide-react";
+import { useState } from "react";
+import type { ReactNode } from "react";
+
+export interface TagListProps {
+  tags: string[];
+  onChange: (tags: string[]) => void;
+  placeholder?: string;
+  max?: number;
+  addLabel?: ReactNode;
+}
+
+export function TagList({ tags, onChange, placeholder, max, addLabel = "Dodaj" }: TagListProps) {
+  const [input, setInput] = useState("");
+
+  const addTag = () => {
+    const trimmed = input.trim();
+    if (!trimmed || tags.includes(trimmed)) return;
+    if (max && tags.length >= max) return;
+    onChange([...tags, trimmed]);
+    setInput("");
+  };
+
+  const removeTag = (tag: string) => {
+    onChange(tags.filter((t) => t !== tag));
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      addTag();
+    }
+    if (e.key === "Backspace" && !input && tags.length > 0) {
+      onChange(tags.slice(0, -1));
+    }
+  };
+
+  const isAtMax = max !== undefined && tags.length >= max;
+
+  return (
+    <div className="space-y-2">
+      {tags.length > 0 && (
+        <div className="flex flex-wrap gap-2">
+          {tags.map((tag) => (
+            <span
+              key={tag}
+              className="group inline-flex items-center gap-1.5 rounded-lg bg-primary/10 border border-primary/20 px-3 py-1.5 text-sm font-medium text-primary transition-colors hover:bg-primary/15"
+            >
+              {tag}
+              <button
+                onClick={() => removeTag(tag)}
+                className="rounded-full p-0.5 hover:bg-primary/20 transition-colors"
+              >
+                <X className="h-3 w-3" />
+              </button>
+            </span>
+          ))}
+        </div>
+      )}
+      {!isAtMax && (
+        <div className="flex gap-2">
+          <Input
+            value={input}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => setInput(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder={placeholder}
+            className="flex-1"
+          />
+          <button
+            onClick={addTag}
+            disabled={!input.trim()}
+            className="flex items-center gap-1.5 rounded-xl border border-border bg-card px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:opacity-40 disabled:pointer-events-none"
+          >
+            <Plus className="h-4 w-4" />
+            {addLabel}
+          </button>
+        </div>
+      )}
+      {max && (
+        <p className="text-xs text-muted-foreground">
+          {tags.length}/{max}
+        </p>
+      )}
+    </div>
+  );
+}

package/src/ds/tooltip/tooltip.tsx

@@ -0,0 +1,33 @@
+import {
+  Tooltip as ShadcnTooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "../../ui/tooltip";
+import type { TooltipProps } from "../types";
+
+/**
+ * Tooltip — DS wrapper nad shadcn Tooltip.
+ *
+ * Jeśli `content` jest falsy, renderuje children bez wrappera.
+ * Nadpisywalny przez DesignSystemProvider.
+ */
+export function Tooltip({
+  children,
+  content,
+  side = "bottom",
+  className,
+}: TooltipProps) {
+  if (!content) return children;
+
+  return (
+    <ShadcnTooltip>
+      <TooltipTrigger asChild>{children}</TooltipTrigger>
+      <TooltipContent
+        side={side}
+        className={className ?? "max-w-52 text-center"}
+      >
+        {content}
+      </TooltipContent>
+    </ShadcnTooltip>
+  );
+}

package/src/ds/transitions.ts

@@ -0,0 +1,12 @@
+/**
+ * DS layout transition presets.
+ * Jedno miejsce do tuningu animacji — wszystkie layout komponenty importują stąd.
+ */
+export const dsTransitions = {
+  /** Szybki spring — expand/collapse paneli, nav overflow. */
+  snappy: { type: "spring" as const, stiffness: 500, damping: 35 },
+  /** Łagodniejszy spring — layout morphing, Box. */
+  smooth: { type: "spring" as const, stiffness: 400, damping: 30 },
+  /** Prosty fade — overlay. */
+  fade: { duration: 0.15 },
+} as const;

package/src/ds/types.ts

@@ -0,0 +1,131 @@
+import type { ComponentType, ReactElement, ReactNode } from "react";
+
+// ---------------------------------------------------------------------------
+// Display Modes — uniwersalne layout hints
+// ---------------------------------------------------------------------------
+
+export type DisplayMode = "default" | "compact" | "minimal" | "expanded";
+
+// ---------------------------------------------------------------------------
+// Component overrides — pełna zamiana komponentu
+// ---------------------------------------------------------------------------
+
+/** Mapa nazw komponentów DS → ich implementacje. */
+export interface DSComponentMap {
+  Box: ComponentType<BoxProps>;
+  Button: ComponentType<ButtonProps>;
+  Tooltip: ComponentType<TooltipProps>;
+  Badge: ComponentType<BadgeProps>;
+  Separator: ComponentType<SeparatorProps>;
+  Avatar: ComponentType<AvatarProps>;
+  Input: ComponentType<InputProps>;
+}
+
+/** Partial override — moduł nadpisuje tylko wybrane komponenty. */
+export type DSComponentOverrides = Partial<DSComponentMap>;
+
+// ---------------------------------------------------------------------------
+// Variant overrides — merge z domyślnymi CVA wariantami
+// ---------------------------------------------------------------------------
+
+export type CVAVariantOverride = Record<string, Record<string, string>>;
+
+export type DSVariantOverrides = Partial<
+  Record<keyof DSComponentMap, CVAVariantOverride>
+>;
+
+// ---------------------------------------------------------------------------
+// Button
+// ---------------------------------------------------------------------------
+
+export interface ButtonProps {
+  icon?: ComponentType<{ className?: string }>;
+  label?: ReactNode;
+  right?: ReactNode;
+  tooltip?: ReactNode;
+  isActive?: boolean;
+  displayMode?: DisplayMode;
+  variant?:
+    | "default"
+    | "secondary"
+    | "ghost"
+    | "outline"
+    | "destructive"
+    | "link";
+  size?: "default" | "sm" | "xs" | "lg" | "icon" | "icon-sm" | "icon-xs";
+  className?: string;
+  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+  disabled?: boolean;
+  asChild?: boolean;
+}
+
+// ---------------------------------------------------------------------------
+// Tooltip
+// ---------------------------------------------------------------------------
+
+export interface TooltipProps {
+  children: ReactElement;
+  content?: ReactNode;
+  side?: "top" | "bottom" | "left" | "right";
+  className?: string;
+}
+
+// ---------------------------------------------------------------------------
+// Badge
+// ---------------------------------------------------------------------------
+
+export interface BadgeProps {
+  children?: ReactNode;
+  variant?: "default" | "secondary" | "destructive" | "outline" | "ghost";
+  display?: DisplayMode;
+  asChild?: boolean;
+  className?: string;
+}
+
+// ---------------------------------------------------------------------------
+// Separator
+// ---------------------------------------------------------------------------
+
+export interface SeparatorProps {
+  orientation?: "horizontal" | "vertical";
+  decorative?: boolean;
+  className?: string;
+}
+
+// ---------------------------------------------------------------------------
+// Avatar
+// ---------------------------------------------------------------------------
+
+export interface AvatarProps {
+  src?: string;
+  fallback?: ReactNode;
+  size?: "default" | "sm" | "lg" | "xs";
+  display?: DisplayMode;
+  className?: string;
+}
+
+// ---------------------------------------------------------------------------
+// Input
+// ---------------------------------------------------------------------------
+
+export interface InputProps extends Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  "size"
+> {
+  icon?: ComponentType<{ className?: string }>;
+  iconSide?: "left" | "right";
+  size?: "default" | "sm" | "xs" | "lg";
+  display?: DisplayMode;
+}
+
+// ---------------------------------------------------------------------------
+// Box
+// ---------------------------------------------------------------------------
+
+export interface BoxProps {
+  variant?: "default" | "ghost";
+  displayMode?: DisplayMode;
+  layoutId?: string;
+  className?: string;
+  children?: ReactNode;
+}