@arcote.tech/arc-ds 0.4.1

package/src/ds/form/fields/checkbox-select-field.tsx

@@ -0,0 +1,326 @@
+import { Input } from "../../input/input";
+import { Search, ChevronDown, Check } from "lucide-react";
+import { useState, useRef, useEffect, useMemo, useCallback, useContext } from "react";
+import type { ReactNode } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { FormFieldContext } from "../field";
+
+export interface CheckboxSelectOption {
+  value: string;
+  label: string;
+  icon?: ReactNode;
+}
+
+export interface CheckboxSelectFieldProps {
+  label?: ReactNode;
+  value?: string[];
+  onChange?: (value: string[]) => void;
+  options: CheckboxSelectOption[];
+  placeholder?: string;
+  searchPlaceholder?: string;
+  position?: "relative" | "absolute";
+  className?: string;
+  renderOption?: (option: CheckboxSelectOption, isActive: boolean, isSelected: boolean) => ReactNode;
+  /** Rendered as the last item inside the dropdown (e.g. "Add new" link). */
+  footerAction?: ReactNode;
+}
+
+export function CheckboxSelectField({
+  label,
+  value = [],
+  onChange,
+  options,
+  placeholder = "Wybierz...",
+  searchPlaceholder = "Szukaj...",
+  position = "relative",
+  className,
+  renderOption,
+  footerAction,
+}: CheckboxSelectFieldProps) {
+  const fieldCtx = useContext(FormFieldContext);
+  const hasError = fieldCtx?.errors && fieldCtx.messages?.length > 0;
+
+  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 triggerRef = useRef<HTMLButtonElement>(null);
+
+  const selectedCount = value.length;
+
+  const triggerLabel = useMemo(() => {
+    if (selectedCount === 0) return null;
+    if (selectedCount === options.length && options.length > 0) return "Wszystkie";
+
+    const selected = options.filter((o) => value.includes(o.value));
+    const joined = selected.map((o) => o.label).join(", ");
+
+    // Estimate if text fits — rough heuristic based on char count
+    if (joined.length <= 36) return joined;
+
+    // Show first item + count
+    const first = selected[0]?.label ?? "";
+    const rest = selected.length - 1;
+    return rest > 0 ? `${first} +${rest}` : first;
+  }, [value, options, selectedCount]);
+
+  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 toggle = useCallback(
+    (val: string) => {
+      const next = value.includes(val)
+        ? value.filter((v) => v !== val)
+        : [...value, val];
+      onChange?.(next);
+    },
+    [value, onChange],
+  );
+
+  const selectAll = useCallback(() => {
+    onChange?.(options.map((o) => o.value));
+  }, [options, onChange]);
+
+  const deselectAll = useCallback(() => {
+    onChange?.([]);
+  }, [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) {
+          toggle(filtered[activeIndex].value);
+        }
+        break;
+      case "Escape":
+        e.preventDefault();
+        setIsOpen(false);
+        setQuery("");
+        break;
+    }
+  };
+
+  const defaultRenderOption = (
+    opt: CheckboxSelectOption,
+    isActive: boolean,
+    isSelected: boolean,
+  ) => (
+    <div className="flex items-center gap-2.5">
+      <div
+        className={`flex h-4 w-4 shrink-0 items-center justify-center rounded border transition-colors ${
+          isSelected
+            ? "border-primary bg-primary"
+            : "border-input bg-transparent"
+        }`}
+      >
+        {isSelected && <Check className="h-3 w-3 text-primary-foreground" />}
+      </div>
+      {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>
+    </div>
+  );
+
+  const optionRenderer = renderOption ?? defaultRenderOption;
+  const isAbsolute = position === "absolute";
+
+  const dropdownContent = (
+    <>
+      <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>
+      {/* Select all / deselect all */}
+      <div className="flex items-center justify-between border-t border-border px-3 py-1.5">
+        <button
+          type="button"
+          onClick={selectAll}
+          className="text-[11px] text-primary hover:underline"
+        >
+          Zaznacz wszystkie
+        </button>
+        <button
+          type="button"
+          onClick={deselectAll}
+          className="text-[11px] text-muted-foreground hover:underline"
+        >
+          Odznacz wszystkie
+        </button>
+      </div>
+      {filtered.length > 0 && (
+        <div className="border-t border-border max-h-[240px] overflow-y-auto">
+          {filtered.map((opt, i) => (
+            <button
+              key={opt.value}
+              type="button"
+              data-active={i === activeIndex}
+              onClick={() => toggle(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,
+                value.includes(opt.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>
+      )}
+      {footerAction && (
+        <div className="border-t border-border px-3 py-2">
+          {footerAction}
+        </div>
+      )}
+    </>
+  );
+
+  return (
+    <div className={className}>
+      {label && (
+        <label className="block text-xs font-medium text-muted-foreground mb-1">
+          {label}
+        </label>
+      )}
+      <div ref={containerRef} className={isAbsolute ? "relative" : ""}>
+        {/* Trigger */}
+        {!isOpen ? (
+          <button
+            ref={triggerRef}
+            type="button"
+            onClick={open}
+            className="flex w-full items-center justify-between rounded-md border border-input bg-transparent px-3 h-10 md:h-9 text-base md:text-sm shadow-xs transition-colors hover:bg-muted/50"
+          >
+            {triggerLabel ? (
+              <span className="truncate">{triggerLabel}</span>
+            ) : (
+              <span className="text-muted-foreground">{placeholder}</span>
+            )}
+            <ChevronDown className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
+          </button>
+        ) : !isAbsolute ? (
+          /* Inline — relative mode */
+          <div className="rounded-md border border-input overflow-hidden">
+            {dropdownContent}
+          </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 px-3 h-10 md:h-9 text-base md:text-sm shadow-xs ring-[3px] ring-ring/50"
+          >
+            {triggerLabel ? (
+              <span className="truncate">{triggerLabel}</span>
+            ) : (
+              <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: -4 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -4 }}
+              transition={{ duration: 0.12 }}
+              className="absolute left-0 right-0 z-50 mt-1 rounded-md border border-input bg-card shadow-lg overflow-hidden"
+            >
+              {dropdownContent}
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+      {hasError && (
+        <p className="mt-1 text-xs text-destructive">
+          {fieldCtx.messages[0]}
+        </p>
+      )}
+    </div>
+  );
+}

package/src/ds/form/fields/index.ts

@@ -0,0 +1,14 @@
+export { TextField } from "./text-field";
+export type { TextFieldProps } from "./text-field";
+export { TextareaField } from "./textarea-field";
+export type { TextareaFieldProps } from "./textarea-field";
+export { TagField } from "./tag-field";
+export type { TagFieldProps } from "./tag-field";
+export { SelectField } from "./select-field";
+export type { SelectFieldProps } from "./select-field";
+export { SuggestionListField } from "./suggestion-list-field";
+export type { SuggestionListFieldProps } from "./suggestion-list-field";
+export { SearchSelectField } from "./search-select-field";
+export type { SearchSelectFieldProps } from "./search-select-field";
+export { CheckboxSelectField } from "./checkbox-select-field";
+export type { CheckboxSelectFieldProps, CheckboxSelectOption } from "./checkbox-select-field";

package/src/ds/form/fields/search-select-field.tsx

@@ -0,0 +1,41 @@
+import { useContext } from "react";
+import type { ReactNode } from "react";
+import { SearchSelect } from "../../search-select/search-select";
+import type { SearchSelectProps } from "../../search-select/search-select";
+import { FormFieldContext } from "../field";
+
+export type SearchSelectFieldProps = Omit<SearchSelectProps, "value" | "onChange"> & {
+  label?: ReactNode;
+  value?: string;
+  onChange?: (value: string) => void;
+  className?: string;
+};
+
+export function SearchSelectField({
+  label,
+  value,
+  onChange,
+  className,
+  ...rest
+}: SearchSelectFieldProps) {
+  const fieldCtx = useContext(FormFieldContext);
+  const hasError = fieldCtx?.errors && fieldCtx.messages?.length > 0;
+
+  return (
+    <div className={className}>
+      {label && (
+        <label className="block text-sm font-medium text-muted-foreground mb-1.5">
+          {label}
+        </label>
+      )}
+      <SearchSelect
+        value={value}
+        onChange={(val) => onChange?.(val)}
+        {...rest}
+      />
+      {hasError && (
+        <p className="mt-1 text-xs text-destructive">{fieldCtx.messages[0]}</p>
+      )}
+    </div>
+  );
+}

package/src/ds/form/fields/select-field.tsx

@@ -0,0 +1,42 @@
+import { useContext } from "react";
+import type { ReactNode } from "react";
+import { cn } from "../../../lib/utils";
+import { inputVariants } from "../../input/input";
+import { FormFieldContext } from "../field";
+
+export interface SelectFieldProps {
+  label?: ReactNode;
+  value?: string;
+  onChange?: (value: string) => void;
+  options: { value: string; label: string }[];
+  placeholder?: string;
+  className?: string;
+}
+
+export function SelectField({ label, value, onChange, options, placeholder, className }: SelectFieldProps) {
+  const fieldCtx = useContext(FormFieldContext);
+  const hasError = fieldCtx?.errors && fieldCtx.messages?.length > 0;
+
+  return (
+    <div className={className}>
+      {label && (
+        <label className="block text-sm font-medium text-muted-foreground mb-1.5">
+          {label}
+        </label>
+      )}
+      <select
+        value={value ?? ""}
+        onChange={(e) => onChange?.(e.target.value)}
+        className={cn(inputVariants({ size: "default" }), "appearance-none cursor-pointer bg-transparent")}
+      >
+        {placeholder && <option value="">{placeholder}</option>}
+        {options.map((opt) => (
+          <option key={opt.value} value={opt.value}>{opt.label}</option>
+        ))}
+      </select>
+      {hasError && (
+        <p className="mt-1 text-xs text-destructive">{fieldCtx.messages[0]}</p>
+      )}
+    </div>
+  );
+}

package/src/ds/form/fields/suggestion-list-field.tsx

@@ -0,0 +1,43 @@
+import { useContext } from "react";
+import type { ReactNode } from "react";
+import { SuggestionList } from "../../suggestion-list/suggestion-list";
+import type { SuggestionListProps } from "../../suggestion-list/suggestion-list";
+import { FormFieldContext } from "../field";
+
+export type SuggestionListFieldProps<T> = Omit<SuggestionListProps<T>, "items" | "onChange"> & {
+  label?: ReactNode;
+  value?: T[];
+  onChange?: (value: T[]) => void;
+  className?: string;
+};
+
+export function SuggestionListField<T>({
+  label,
+  value = [],
+  onChange,
+  className,
+  ...rest
+}: SuggestionListFieldProps<T>) {
+  const fieldCtx = useContext(FormFieldContext);
+  const hasError = fieldCtx?.errors && fieldCtx.messages?.length > 0;
+
+  const showLabel = label && !(rest.initialCloud && (!value || value.length === 0));
+
+  return (
+    <div className={className}>
+      {showLabel && (
+        <label className="block text-sm font-medium text-muted-foreground mb-1.5">
+          {label}
+        </label>
+      )}
+      <SuggestionList<T>
+        items={value}
+        onChange={(items) => onChange?.(items)}
+        {...rest}
+      />
+      {hasError && (
+        <p className="mt-1 text-xs text-destructive">{fieldCtx.messages[0]}</p>
+      )}
+    </div>
+  );
+}

package/src/ds/form/fields/tag-field.tsx

@@ -0,0 +1,39 @@
+import { useContext } from "react";
+import type { ReactNode } from "react";
+import { TagList } from "../../tag-list/tag-list";
+import { FormFieldContext } from "../field";
+
+export interface TagFieldProps {
+  label?: ReactNode;
+  placeholder?: string;
+  value?: string[];
+  onChange?: (value: string[]) => void;
+  max?: number;
+  addLabel?: ReactNode;
+  className?: string;
+}
+
+export function TagField({ label, placeholder, value = [], onChange, max, addLabel, className }: TagFieldProps) {
+  const fieldCtx = useContext(FormFieldContext);
+  const hasError = fieldCtx?.errors && fieldCtx.messages?.length > 0;
+
+  return (
+    <div className={className}>
+      {label && (
+        <label className="block text-sm font-medium text-muted-foreground mb-1.5">
+          {label}
+        </label>
+      )}
+      <TagList
+        tags={value}
+        onChange={(tags) => onChange?.(tags)}
+        placeholder={placeholder}
+        max={max}
+        addLabel={addLabel}
+      />
+      {hasError && (
+        <p className="mt-1 text-xs text-destructive">{fieldCtx.messages[0]}</p>
+      )}
+    </div>
+  );
+}

package/src/ds/form/fields/text-field.tsx

@@ -0,0 +1,35 @@
+import { useContext } from "react";
+import type { ReactNode } from "react";
+import { Input } from "../../input/input";
+import { FormFieldContext } from "../field";
+
+export interface TextFieldProps {
+  label?: ReactNode;
+  placeholder?: string;
+  value?: string;
+  onChange?: (value: string) => void;
+  className?: string;
+}
+
+export function TextField({ label, placeholder, value, onChange, className }: TextFieldProps) {
+  const fieldCtx = useContext(FormFieldContext);
+  const hasError = fieldCtx?.errors && fieldCtx.messages?.length > 0;
+
+  return (
+    <div className={className}>
+      {label && (
+        <label className="block text-sm font-medium text-muted-foreground mb-1.5">
+          {label}
+        </label>
+      )}
+      <Input
+        value={value}
+        onChange={(e: React.ChangeEvent<HTMLInputElement>) => onChange?.(e.target.value)}
+        placeholder={placeholder}
+      />
+      {hasError && (
+        <p className="mt-1 text-xs text-destructive">{fieldCtx.messages[0]}</p>
+      )}
+    </div>
+  );
+}

package/src/ds/form/fields/textarea-field.tsx

@@ -0,0 +1,81 @@
+import { useContext, useRef, useEffect, useCallback } from "react";
+import type { ReactNode } from "react";
+import { cn } from "../../../lib/utils";
+import { FormFieldContext } from "../field";
+
+export interface TextareaFieldProps {
+  label?: ReactNode;
+  placeholder?: string;
+  value?: string;
+  onChange?: (value: string) => void;
+  rows?: number;
+  maxHeight?: number;
+  className?: string;
+}
+
+export function TextareaField({ label, placeholder, value, onChange, rows = 1, maxHeight, className }: TextareaFieldProps) {
+  const fieldCtx = useContext(FormFieldContext);
+  const hasError = fieldCtx?.errors && fieldCtx.messages?.length > 0;
+  const ref = useRef<HTMLDivElement>(null);
+  const isComposing = useRef(false);
+
+  // Sync external value → DOM
+  useEffect(() => {
+    if (!ref.current) return;
+    if (ref.current.innerText !== (value ?? "")) {
+      ref.current.innerText = value ?? "";
+    }
+  }, [value]);
+
+  const handleInput = useCallback(() => {
+    if (isComposing.current) return;
+    const text = ref.current?.innerText ?? "";
+    onChange?.(text);
+  }, [onChange]);
+
+  const handlePaste = useCallback((e: React.ClipboardEvent) => {
+    e.preventDefault();
+    const text = e.clipboardData.getData("text/plain");
+    document.execCommand("insertText", false, text);
+  }, []);
+
+  const minHeight = `${rows * 1.5 + 1}rem`;
+
+  return (
+    <div className={className}>
+      {label && (
+        <label className="block text-sm font-medium text-muted-foreground mb-1.5">
+          {label}
+        </label>
+      )}
+      <div
+        ref={ref}
+        contentEditable
+        role="textbox"
+        aria-multiline="true"
+        onInput={handleInput}
+        onPaste={handlePaste}
+        onCompositionStart={() => { isComposing.current = true; }}
+        onCompositionEnd={() => {
+          isComposing.current = false;
+          handleInput();
+        }}
+        data-placeholder={placeholder}
+        className={cn(
+          "w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-2 text-base md:text-sm shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
+          "whitespace-pre-wrap break-words",
+          maxHeight && "overflow-y-auto",
+          "empty:before:content-[attr(data-placeholder)] empty:before:text-muted-foreground empty:before:pointer-events-none",
+        )}
+        style={{
+          minHeight,
+          maxHeight: maxHeight ? `${maxHeight}px` : undefined,
+        }}
+        suppressContentEditableWarning
+      />
+      {hasError && (
+        <p className="mt-1 text-xs text-destructive">{fieldCtx.messages[0]}</p>
+      )}
+    </div>
+  );
+}