@arcote.tech/arc-ds 0.5.2 → 0.5.6

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

@@ -10,33 +10,67 @@ export interface SearchSelectOption {
   icon?: ReactNode;
 }
 
-export interface SearchSelectProps {
-  value?: string;
-  onChange?: (value: string) => void;
+export interface SearchSelectTriggerProps {
+  selectedOption: SearchSelectOption | undefined;
+  placeholder: string;
+  open: () => void;
+}
+
+export interface SearchSelectMultiTriggerProps {
+  selectedOptions: SearchSelectOption[];
+  placeholder: string;
+  open: () => void;
+}
+
+// ─── Props union ───────────────────────────────────────────────
+
+interface SearchSelectBaseProps {
   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;
+  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) {
+interface SearchSelectSingleProps extends SearchSelectBaseProps {
+  multiple?: false;
+  value?: string;
+  onChange?: (value: string) => void;
+  renderTrigger?: (props: SearchSelectTriggerProps) => ReactNode;
+}
+
+interface SearchSelectMultiProps extends SearchSelectBaseProps {
+  multiple: true;
+  value?: string[];
+  onChange?: (value: string[]) => void;
+  renderTrigger?: (props: SearchSelectMultiTriggerProps) => ReactNode;
+}
+
+export type SearchSelectProps = SearchSelectSingleProps | SearchSelectMultiProps;
+
+// ─── Component ─────────────────────────────────────────────────
+
+export function SearchSelect(props: SearchSelectProps) {
+  const {
+    options,
+    placeholder = "Wybierz...",
+    searchPlaceholder = "Szukaj...",
+    position = "relative",
+    direction = "down",
+    size = "default",
+    renderOption,
+    allowClear = true,
+  } = props;
+
+  const isMulti = props.multiple === true;
+
   const [isOpen, setIsOpen] = useState(false);
   const [query, setQuery] = useState("");
   const [activeIndex, setActiveIndex] = useState(0);
@@ -44,11 +78,29 @@ export function SearchSelect({
   const containerRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
 
+  // ─── Value helpers ──────────────────────────────────────────
+
+  const singleValue = !isMulti ? (props.value ?? "") : "";
+  const multiValue = isMulti ? (props.value ?? []) : [];
+
   const selectedOption = useMemo(
-    () => options.find((o) => o.value === value),
-    [options, value],
+    () => (!isMulti ? options.find((o) => o.value === singleValue) : undefined),
+    [options, singleValue, isMulti],
+  );
+
+  const selectedOptions = useMemo(
+    () => (isMulti ? options.filter((o) => multiValue.includes(o.value)) : []),
+    [options, multiValue, isMulti],
+  );
+
+  const isSelected = useCallback(
+    (val: string) =>
+      isMulti ? multiValue.includes(val) : singleValue === val,
+    [isMulti, singleValue, multiValue],
   );
 
+  // ─── Filtering ──────────────────────────────────────────────
+
   const filtered = useMemo(() => {
     if (!query.trim()) return options;
     const q = query.toLowerCase().trim();
@@ -56,14 +108,19 @@ export function SearchSelect({
   }, [options, query]);
 
   useEffect(() => {
-    setActiveIndex((prev) => (filtered.length === 0 ? 0 : Math.min(prev, filtered.length - 1)));
+    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)) {
+      if (
+        containerRef.current &&
+        !containerRef.current.contains(e.target as Node)
+      ) {
         setIsOpen(false);
         setQuery("");
       }
@@ -79,42 +136,81 @@ export function SearchSelect({
     if (el) el.scrollIntoView({ block: "nearest" });
   }, [activeIndex, isOpen]);
 
-  const select = useCallback(
+  // ─── Actions ────────────────────────────────────────────────
+
+  const selectSingle = useCallback(
+    (val: string) => {
+      if (!isMulti) {
+        (props as SearchSelectSingleProps).onChange?.(val);
+        setIsOpen(false);
+        setQuery("");
+      }
+    },
+    [isMulti, props],
+  );
+
+  const toggleMulti = useCallback(
+    (val: string) => {
+      if (isMulti) {
+        const current = (props as SearchSelectMultiProps).value ?? [];
+        const next = current.includes(val)
+          ? current.filter((v) => v !== val)
+          : [...current, val];
+        (props as SearchSelectMultiProps).onChange?.(next);
+        // Keep dropdown open in multi mode
+      }
+    },
+    [isMulti, props],
+  );
+
+  const handleOptionClick = useCallback(
     (val: string) => {
-      onChange?.(val);
-      setIsOpen(false);
-      setQuery("");
+      if (isMulti) {
+        toggleMulti(val);
+      } else {
+        selectSingle(val);
+      }
     },
-    [onChange],
+    [isMulti, selectSingle, toggleMulti],
   );
 
   const clear = useCallback(() => {
-    onChange?.("");
+    if (isMulti) {
+      (props as SearchSelectMultiProps).onChange?.([]);
+    } else {
+      (props as SearchSelectSingleProps).onChange?.("");
+    }
     setIsOpen(false);
     setQuery("");
-  }, [onChange]);
+  }, [isMulti, props]);
 
-  const open = () => {
+  const open = useCallback(() => {
     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));
+        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));
+        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);
+          handleOptionClick(filtered[activeIndex].value);
         }
         break;
       case "Escape":
@@ -125,13 +221,23 @@ export function SearchSelect({
     }
   };
 
-  const defaultRenderOption = (opt: SearchSelectOption, isActive: boolean, isSelected: boolean) => (
+  // ─── Render helpers ─────────────────────────────────────────
+
+  const defaultRenderOption = (
+    opt: SearchSelectOption,
+    isActive: boolean,
+    isSel: 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.icon && (
+        <span className="shrink-0 text-muted-foreground">{opt.icon}</span>
+      )}
+      <span
+        className={`flex-1 truncate text-sm ${isActive ? "font-medium text-primary" : ""}`}
+      >
         {opt.label}
       </span>
-      {isSelected && <Check className="h-3.5 w-3.5 text-primary shrink-0" />}
+      {isSel && <Check className="h-3.5 w-3.5 shrink-0 text-primary" />}
     </div>
   );
 
@@ -139,100 +245,174 @@ export function SearchSelect({
 
   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";
+  const triggerHeight =
+    size === "sm" ? "h-8 text-xs px-2.5" : "h-10 md:h-9 text-base md:text-sm px-3";
+
+  const hasValue = isMulti ? multiValue.length > 0 : !!singleValue;
+
+  // ─── Trigger ────────────────────────────────────────────────
+
+  const renderDefaultTrigger = () => (
+    <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`}
+    >
+      {isMulti ? (
+        selectedOptions.length > 0 ? (
+          <span className="truncate">
+            {selectedOptions.map((o) => o.label).join(", ")}
+          </span>
+        ) : (
+          <span className="text-muted-foreground">{placeholder}</span>
+        )
+      ) : selectedOption ? (
+        <div className="flex min-w-0 items-center gap-2">
+          {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 shrink-0 items-center gap-1">
+        {allowClear && hasValue && (
+          <span
+            role="button"
+            onClick={(e) => {
+              e.stopPropagation();
+              clear();
+            }}
+            className="rounded-full p-0.5 text-muted-foreground/50 transition-colors hover:bg-muted hover:text-foreground"
+          >
+            <X className="h-3 w-3" />
+          </span>
+        )}
+        <ChevronDown className="h-3.5 w-3.5 text-muted-foreground" />
+      </div>
+    </button>
+  );
+
+  const renderCustomTrigger = () => {
+    if (isMulti && (props as SearchSelectMultiProps).renderTrigger) {
+      return (props as SearchSelectMultiProps).renderTrigger!({
+        selectedOptions,
+        placeholder,
+        open,
+      });
+    }
+    if (!isMulti && (props as SearchSelectSingleProps).renderTrigger) {
+      return (props as SearchSelectSingleProps).renderTrigger!({
+        selectedOption,
+        placeholder,
+        open,
+      });
+    }
+    return null;
+  };
+
+  const hasCustomTrigger = isMulti
+    ? !!(props as SearchSelectMultiProps).renderTrigger
+    : !!(props as SearchSelectSingleProps).renderTrigger;
+
+  // ─── Option list (shared between relative and absolute) ─────
+
+  const renderOptionList = () => (
+    <>
+      {filtered.length > 0 && (
+        <div className="max-h-[192px] overflow-y-auto border-t border-border">
+          {filtered.map((opt, i) => (
+            <button
+              key={opt.value}
+              type="button"
+              data-active={i === activeIndex}
+              onClick={() => handleOptionClick(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, isSelected(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>
+      )}
+    </>
+  );
+
+  const renderSearchInput = () => (
+    <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:border-transparent focus-visible:ring-0"
+      />
+    </div>
+  );
 
   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>
+        hasCustomTrigger ? (
+          renderCustomTrigger()
+        ) : (
+          renderDefaultTrigger()
+        )
       ) : !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 className="overflow-hidden rounded-md border border-input">
+          {renderSearchInput()}
+          {renderOptionList()}
         </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>
+        hasCustomTrigger ? (
+          renderCustomTrigger()
+        ) : (
+          <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`}
+          >
+            {isMulti ? (
+              selectedOptions.length > 0 ? (
+                <span className="truncate">
+                  {selectedOptions.map((o) => o.label).join(", ")}
+                </span>
+              ) : (
+                <span className="text-muted-foreground">{placeholder}</span>
+              )
+            ) : selectedOption ? (
+              <div className="flex min-w-0 items-center gap-2">
+                {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 rotate-180 text-muted-foreground transition-transform" />
+          </button>
+        )
       )}
 
       {/* Absolute dropdown */}
@@ -243,46 +423,10 @@ export function SearchSelect({
             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"}`}
+            className={`absolute left-0 right-0 z-50 overflow-hidden rounded-md border border-input bg-card shadow-lg ${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>
-            )}
+            {renderSearchInput()}
+            {renderOptionList()}
           </motion.div>
         )}
       </AnimatePresence>

package/src/ds/sidebar/sidebar.tsx

@@ -0,0 +1,60 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import type { ReactNode } from "react";
+import { cn } from "../../lib/utils";
+import { Box } from "../box/box";
+
+/**
+ * Sidebar — vertical container for navigation/auxiliary content beside main
+ * page content. Typically registered into a layout slot like `sidebar-left`.
+ *
+ * The `sticky` variant pins the sidebar next to the toolbar and stretches it
+ * to fill the visible viewport height. It relies on the CSS variable
+ * `--arc-toolbar-height` set by the desktop `Layout` (measured from the
+ * actual rendered toolbar via ResizeObserver). Falls back to `5rem` if the
+ * variable isn't set.
+ */
+export const sidebarVariants = cva("flex flex-col gap-3 p-4", {
+  variants: {
+    variant: {
+      default: "",
+      sticky:
+        "sticky top-[var(--arc-toolbar-height,5rem)] " +
+        "max-h-[calc(100vh-var(--arc-toolbar-height,5rem)-1rem)] " +
+        "overflow-y-auto",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+});
+
+export interface SidebarProps extends VariantProps<typeof sidebarVariants> {
+  children?: ReactNode;
+  className?: string;
+  /** Title rendered at the top with uppercase muted styling. */
+  title?: ReactNode;
+  /** Footer rendered at the bottom with a top border. */
+  footer?: ReactNode;
+}
+
+export function Sidebar({
+  variant,
+  children,
+  className,
+  title,
+  footer,
+}: SidebarProps) {
+  return (
+    <Box className={cn(sidebarVariants({ variant }), className)}>
+      {title && (
+        <h3 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+          {title}
+        </h3>
+      )}
+      <div className="flex-1 min-h-0">{children}</div>
+      {footer && (
+        <div className="pt-2 border-t border-border">{footer}</div>
+      )}
+    </Box>
+  );
+}

package/src/ds/types.ts

@@ -50,6 +50,7 @@ export interface ButtonProps {
     | "secondary"
     | "ghost"
     | "outline"
+    | "outline-dashed"
     | "destructive"
     | "link";
   size?: "default" | "sm" | "xs" | "lg" | "icon" | "icon-sm" | "icon-xs";

package/src/index.ts

@@ -54,7 +54,7 @@ export {
 } from "./ds/avatar/avatar";
 export { BentoCard } from "./ds/bento-card/bento-card";
 export type { BentoCardProps } from "./ds/bento-card/bento-card";
-export { BentoGrid, useBentoSpan } from "./ds/bento-grid/bento-grid";
+export { BentoGrid } from "./ds/bento-grid/bento-grid";
 export type { BentoGridProps } from "./ds/bento-grid/bento-grid";
 export { CardModal, CardFormModal, ModalActions } from "./ds/card-modal/card-modal";
 export type { CardModalProps, CardFormModalProps, ModalActionsProps } from "./ds/card-modal/card-modal";
@@ -63,10 +63,14 @@ export type { TagListProps } from "./ds/tag-list/tag-list";
 export { SuggestionList } from "./ds/suggestion-list/suggestion-list";
 export type { SuggestionListProps, InitialCloudConfig } from "./ds/suggestion-list/suggestion-list";
 export { SearchSelect } from "./ds/search-select/search-select";
-export type { SearchSelectProps, SearchSelectOption } from "./ds/search-select/search-select";
+export type { SearchSelectProps, SearchSelectOption, SearchSelectTriggerProps, SearchSelectMultiTriggerProps } from "./ds/search-select/search-select";
+export { EditableText } from "./ds/editable-text/editable-text";
+export type { EditableTextProps } from "./ds/editable-text/editable-text";
 export { Badge, badgeVariants } from "./ds/badge/badge";
 export { Box, boxVariants } from "./ds/box/box";
 export type { BoxProps } from "./ds/box/box";
+export { Sidebar, sidebarVariants } from "./ds/sidebar/sidebar";
+export type { SidebarProps } from "./ds/sidebar/sidebar";
 export {
   Button,
   buttonIconVariants,
@@ -111,6 +115,12 @@ export type { ChatToolLogProps } from "./ds/chat/chat-tool-log";
 export { ChatToolQuestion } from "./ds/chat/chat-tool-question";
 export type { ChatToolQuestionProps } from "./ds/chat/chat-tool-question";
 export { ChatInputProvider, useChatInput } from "./ds/chat/chat-input-provider";
+export {
+  ChatLabelsProvider,
+  useChatLabels,
+  defaultChatLabels,
+} from "./ds/chat/chat-labels";
+export type { ChatLabels } from "./ds/chat/chat-labels";
 export type {
   ChatMessageData,
   ChatModel,