@xemahq/ui-kernel 0.1.12 → 0.3.0

package/src/ui/primitives/tag-multi-select.tsx

@@ -0,0 +1,241 @@
+import { Check, ChevronsUpDown, Plus, Search, X } from 'lucide-react';
+import { useMemo, useRef, useState, type KeyboardEvent } from 'react';
+
+import { Badge } from './badge';
+import { Button } from './button';
+import { Input } from './input';
+import { Popover, PopoverContent, PopoverTrigger } from './popover';
+import { ScrollArea } from './scroll-area';
+import { cn } from '../cn';
+
+export interface TagOption {
+  value: string;
+  label: string;
+  hint?: string;
+}
+
+export interface TagMultiSelectProps {
+  value: string[];
+  onChange: (next: string[]) => void;
+  options: TagOption[];
+  placeholder?: string;
+  searchPlaceholder?: string;
+  emptyMessage?: string;
+  /** Allow the user to add values that aren't in the predefined options. */
+  allowCustom?: boolean;
+  /** Badge tone for selected chips. */
+  chipVariant?: 'default' | 'secondary' | 'success' | 'destructive';
+  /** Extra className for the trigger. */
+  triggerClassName?: string;
+  disabled?: boolean;
+}
+
+const CHIP_CLASSES: Record<NonNullable<TagMultiSelectProps['chipVariant']>, string> = {
+  default: 'bg-primary/10 text-primary border-primary/20',
+  secondary: 'bg-secondary text-secondary-foreground border-secondary',
+  success: 'bg-success/10 text-success border-success/20',
+  destructive: 'bg-destructive/10 text-destructive border-destructive/20',
+};
+
+export function TagMultiSelect({
+  value,
+  onChange,
+  options,
+  placeholder = 'Select…',
+  searchPlaceholder = 'Search…',
+  emptyMessage = 'No matches',
+  allowCustom = false,
+  chipVariant = 'default',
+  triggerClassName,
+  disabled,
+}: Readonly<TagMultiSelectProps>) {
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState('');
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const selectedSet = useMemo(() => new Set(value), [value]);
+
+  const optionByValue = useMemo(() => {
+    const map = new Map<string, TagOption>();
+    options.forEach((o) => map.set(o.value, o));
+    return map;
+  }, [options]);
+
+  const filteredOptions = useMemo(() => {
+    const q = search.trim().toLowerCase();
+    if (!q) return options;
+    return options.filter(
+      (o) =>
+        o.label.toLowerCase().includes(q) ||
+        o.value.toLowerCase().includes(q) ||
+        (o.hint?.toLowerCase().includes(q) ?? false),
+    );
+  }, [options, search]);
+
+  const normalizedSearch = search.trim();
+  const canAddCustom =
+    allowCustom &&
+    normalizedSearch.length > 0 &&
+    !optionByValue.has(normalizedSearch) &&
+    !selectedSet.has(normalizedSearch);
+
+  const toggle = (val: string) => {
+    if (selectedSet.has(val)) {
+      onChange(value.filter((v) => v !== val));
+    } else {
+      onChange([...value, val]);
+    }
+  };
+
+  const remove = (val: string, e?: React.MouseEvent) => {
+    e?.stopPropagation();
+    onChange(value.filter((v) => v !== val));
+  };
+
+  const addCustom = () => {
+    if (!canAddCustom) return;
+    onChange([...value, normalizedSearch]);
+    setSearch('');
+    inputRef.current?.focus();
+  };
+
+  const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      if (canAddCustom) {
+        addCustom();
+      } else if (filteredOptions.length === 1) {
+        toggle(filteredOptions[0].value);
+      }
+    }
+  };
+
+  const chipClass = CHIP_CLASSES[chipVariant];
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          disabled={disabled}
+          className={cn(
+            'w-full min-h-9 h-auto justify-between font-normal py-1.5',
+            triggerClassName,
+          )}
+        >
+          <div className="flex flex-wrap gap-1 flex-1 text-left">
+            {value.length === 0 && (
+              <span className="text-ink-3 text-body-1">{placeholder}</span>
+            )}
+            {value.map((val) => {
+              const opt = optionByValue.get(val);
+              return (
+                <Badge
+                  key={val}
+                  variant="outline"
+                  className={cn('text-body-1 gap-1 pr-1', chipClass)}
+                >
+                  <span className="truncate max-w-[160px]">{opt?.label ?? val}</span>
+                  <span
+                    role="button"
+                    tabIndex={-1}
+                    onClick={(e) => remove(val, e)}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        remove(val);
+                      }
+                    }}
+                    className="rounded-sm hover:bg-paper-elev p-0.5"
+                    aria-label={`Remove ${opt?.label ?? val}`}
+                  >
+                    <X className="h-4 w-4" />
+                  </span>
+                </Badge>
+              );
+            })}
+          </div>
+          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        className="w-[--radix-popover-trigger-width] p-0"
+        align="start"
+        onOpenAutoFocus={(e) => {
+          e.preventDefault();
+          setTimeout(() => inputRef.current?.focus(), 30);
+        }}
+      >
+        <div className="relative border-b">
+          <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-ink-3" />
+          <Input
+            ref={inputRef}
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            onKeyDown={onKeyDown}
+            placeholder={searchPlaceholder}
+            className="h-9 text-body-1 pl-8 border-0 rounded-none focus-visible:ring-0 focus-visible:ring-offset-0"
+          />
+        </div>
+
+        <ScrollArea className="max-h-56">
+          <div className="p-1">
+            {filteredOptions.length === 0 && !canAddCustom && (
+              <p className="text-body-1 text-ink-3 text-center py-3">{emptyMessage}</p>
+            )}
+
+            {filteredOptions.map((opt) => {
+              const selected = selectedSet.has(opt.value);
+              return (
+                <button
+                  key={opt.value}
+                  type="button"
+                  onClick={() => toggle(opt.value)}
+                  className={cn(
+                    'w-full text-left text-body-1 px-2 py-1.5 rounded hover:bg-paper-elev transition-colors flex items-start gap-2',
+                    selected && 'bg-paper-elev/60',
+                  )}
+                >
+                  <span
+                    className={cn(
+                      'mt-0.5 h-4 w-4 shrink-0 rounded border flex items-center justify-center',
+                      selected
+                        ? 'bg-primary border-primary text-primary-foreground'
+                        : 'border-muted-foreground/40',
+                    )}
+                  >
+                    {selected && <Check className="h-4 w-4" />}
+                  </span>
+                  <span className="flex-1 min-w-0">
+                    <span className="font-medium block truncate">{opt.label}</span>
+                    {opt.hint && (
+                      <span className="text-body-1 text-ink-3 block truncate">
+                        {opt.hint}
+                      </span>
+                    )}
+                  </span>
+                </button>
+              );
+            })}
+
+            {canAddCustom && (
+              <button
+                type="button"
+                onClick={addCustom}
+                className="w-full text-left text-body-1 px-2 py-1.5 rounded hover:bg-paper-elev transition-colors flex items-center gap-2 border-t mt-1 pt-2"
+              >
+                <Plus className="h-4 w-4 text-ink-3" />
+                <span>
+                  Add <span className="font-mono font-medium">{normalizedSearch}</span>
+                </span>
+              </button>
+            )}
+          </div>
+        </ScrollArea>
+      </PopoverContent>
+    </Popover>
+  );
+}

package/src/ui/primitives/textarea.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+
+import { cn } from '../cn';
+
+export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({ className, ...props }, ref) => {
+  return (
+    <textarea
+      className={cn(
+        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-body-1 ring-offset-background placeholder:text-ink-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+Textarea.displayName = "Textarea";
+
+export { Textarea };

package/src/ui/primitives/tooltip.tsx

@@ -0,0 +1,30 @@
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import * as React from "react";
+
+import { cn } from '../cn';
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-body-1 text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className,
+      )}
+      {...props}
+    />
+  </TooltipPrimitive.Portal>
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };