@cosxai/ui 1.0.0-alpha.1 → 1.0.0-alpha.3

package/src/components/Dropzone.tsx

@@ -0,0 +1,187 @@
+import { FileX, Upload } from 'lucide-react';
+import { useRef, useState, type ComponentProps, type ReactNode } from 'react';
+
+import { cn } from '../lib/cn';
+import { Button } from './Button';
+import { Icon } from './Icon';
+import { checkFiles, DEFAULT_MAX_SIZE, formatBytes, fromInput, hasFiles, readDataTransfer, type DroppedFile, type FileRules, type Rejected } from './status-files';
+import { useWindowDrop } from './WindowDrop';
+
+export type DropzoneLabels = {
+  idle?: string;
+  limit?: (maxSize: number) => string;
+  dragging?: string;
+  release?: (target: string) => string;
+  choose?: string;
+  chooseFolder?: string;
+  compact?: string;
+  refused?: (r: Rejected) => string;
+};
+
+export type DropzoneProps = Omit<ComponentProps<'div'>, 'onDrop' | 'children'> &
+  FileRules & {
+    /** Allow several files. @default true */
+    multiple?: boolean | undefined;
+    /** Offer "Choose a folder" too. */
+    directory?: boolean | undefined;
+    /** Folder name shown on hover: "Release to upload to <target>". */
+    target?: string | undefined;
+    /** One line, for list views. */
+    compact?: boolean | undefined;
+    disabled?: boolean | undefined;
+    /** Files that passed the checks, with folder paths. */
+    onFiles: (files: DroppedFile[]) => void;
+    /** Files refused, with the reason. */
+    onReject?: ((items: Rejected[]) => void) | undefined;
+    labels?: DropzoneLabels | undefined;
+    /** Extra actions beside Choose files. */
+    actions?: ReactNode;
+  };
+
+export function refusedText(r: Rejected, maxSize = DEFAULT_MAX_SIZE): string {
+  if (r.reason === 'type') {
+    const ext = r.file.name.includes('.') ? r.file.name.slice(r.file.name.lastIndexOf('.')) : r.file.name;
+    return `${ext} files aren’t supported`;
+  }
+  if (r.reason === 'size') return `Files over ${formatBytes(maxSize)} aren’t supported`;
+  return 'Folders nested this deep aren’t supported';
+}
+
+/**
+ * Dropzone — drop files or folders here, or choose them (a real button:
+ * drag and drop is never the only way). Idle: a dashed edge; while files
+ * are dragged into the window: lit; over the zone: the yellow field naming
+ * the folder; refused: says why, not just red.
+ */
+export function Dropzone({
+  accept,
+  maxSize = DEFAULT_MAX_SIZE,
+  maxDepth,
+  multiple = true,
+  directory = false,
+  target,
+  compact = false,
+  disabled = false,
+  onFiles,
+  onReject,
+  labels,
+  actions,
+  className,
+  ...rest
+}: DropzoneProps) {
+  const { dragging, setHoverTarget } = useWindowDrop();
+  const [over, setOver] = useState(false);
+  const [refused, setRefused] = useState<Rejected | null>(null);
+  const files = useRef<HTMLInputElement | null>(null);
+  const folder = useRef<HTMLInputElement | null>(null);
+  const depth = useRef(0);
+
+  const take = (items: DroppedFile[]) => {
+    const { accepted, rejected } = checkFiles(items, { accept, maxSize, maxDepth });
+    const kept = multiple ? accepted : accepted.slice(0, 1);
+    setRefused(kept.length === 0 && rejected[0] ? rejected[0] : null);
+    if (kept.length) onFiles(kept);
+    if (rejected.length) onReject?.(rejected);
+  };
+
+  const release = labels?.release ?? ((t: string) => `Release to upload to ${t}`);
+  const state = disabled ? 'disabled' : over ? 'over' : refused ? 'refused' : dragging ? 'dragging' : 'idle';
+
+  return (
+    <div
+      data-state={state}
+      onDragEnter={(e) => {
+        if (disabled || !hasFiles(e.dataTransfer)) return;
+        depth.current += 1;
+        setOver(true);
+        setRefused(null);
+        if (target) setHoverTarget(target);
+      }}
+      onDragOver={(e) => {
+        if (disabled || !hasFiles(e.dataTransfer)) return;
+        e.preventDefault();
+        e.dataTransfer.dropEffect = 'copy';
+      }}
+      onDragLeave={(e) => {
+        if (!hasFiles(e.dataTransfer)) return;
+        depth.current = Math.max(0, depth.current - 1);
+        if (depth.current === 0) {
+          setOver(false);
+          setHoverTarget(null);
+        }
+      }}
+      onDrop={(e) => {
+        if (disabled || !hasFiles(e.dataTransfer)) return;
+        e.preventDefault();
+        e.stopPropagation(); // the window layer must not also take it
+        depth.current = 0;
+        setOver(false);
+        setHoverTarget(null);
+        void readDataTransfer(e.dataTransfer).then(take);
+      }}
+      className={cn(
+        'flex rounded-lg border font-sans transition-[background-color,border-color] duration-[120ms] ease-standard',
+        compact ? 'items-center justify-between gap-3 px-4 py-2.5' : 'flex-col items-center justify-center gap-2 px-6 py-8 text-center',
+        state === 'idle' && 'border-dashed border-rule bg-transparent',
+        state === 'dragging' && 'border-dashed border-fg bg-yellow-wash-20 ink:bg-sunk',
+        state === 'over' && 'border-solid border-ink bg-brand-field text-ink',
+        state === 'refused' && 'border-dashed border-error bg-error-wash text-error-text ink:bg-error/20 ink:text-fg',
+        state === 'disabled' && 'border-dashed border-rule opacity-40',
+        className,
+      )}
+      {...rest}
+    >
+      <div className={cn('flex items-center', compact ? 'gap-2' : 'flex-col gap-2')}>
+        <Icon icon={state === 'refused' ? FileX : Upload} size={compact ? 16 : 20} />
+        <span aria-live="polite" className={cn('font-medium', compact ? 'text-small' : 'text-ui')}>
+          {state === 'over' && target
+            ? release(target)
+            : state === 'refused' && refused
+              ? (labels?.refused ?? ((r: Rejected) => refusedText(r, maxSize)))(refused)
+              : state === 'dragging' || state === 'over'
+                ? (labels?.dragging ?? 'Drop here')
+                : compact
+                  ? (labels?.compact ?? 'Drop files or choose')
+                  : (labels?.idle ?? (directory ? 'Drop files or folders' : 'Drop files'))}
+        </span>
+        {!compact && state === 'idle' && <span className="text-meta text-fg-secondary">{(labels?.limit ?? ((n: number) => `Up to ${formatBytes(n)} each`))(maxSize)}</span>}
+      </div>
+      <div className={cn('flex items-center gap-2', !compact && 'mt-2')}>
+        <Button size="sm" variant={compact ? 'secondary' : 'primary'} disabled={disabled} onClick={() => files.current?.click()}>
+          {labels?.choose ?? 'Choose files'}
+        </Button>
+        {directory && (
+          <Button size="sm" variant="ghost" disabled={disabled} onClick={() => folder.current?.click()}>
+            {labels?.chooseFolder ?? 'Choose a folder'}
+          </Button>
+        )}
+        {actions}
+      </div>
+      <input
+        ref={files}
+        type="file"
+        hidden
+        tabIndex={-1}
+        multiple={multiple}
+        accept={accept}
+        onChange={(e) => {
+          take(fromInput(e.target.files));
+          e.target.value = '';
+        }}
+      />
+      {directory && (
+        <input
+          ref={folder}
+          type="file"
+          hidden
+          tabIndex={-1}
+          {...({ webkitdirectory: '' } as object)}
+          onChange={(e) => {
+            take(fromInput(e.target.files));
+            e.target.value = '';
+          }}
+        />
+      )}
+    </div>
+  );
+}

package/src/components/FileCard.tsx

@@ -0,0 +1,233 @@
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { Check, FileText, FileX, Folder, Link2, MessageSquare, Star, type LucideIcon } from 'lucide-react';
+import type { ComponentProps, MouseEvent, ReactNode } from 'react';
+
+import { cn } from '../lib/cn';
+import { Badge, type BadgeStatus } from './Badge';
+import { Spinner } from './Spinner';
+import { Tag } from './Tag';
+
+export type FileCardState = 'ready' | 'converting' | 'failed';
+
+export type FileCardProps = Omit<ComponentProps<'div'>, 'title' | 'onClick'> & {
+  title: ReactNode;
+  /** file · folder · link (a card that points elsewhere: dashed edge). @default "file" */
+  kind?: 'file' | 'folder' | 'link' | undefined;
+  /** The thumbnail. Without one the icon sits on linen. */
+  preview?: ReactNode;
+  /** Icon when there is no preview. Defaults by kind. */
+  icon?: LucideIcon | undefined;
+  /** Format tag: PDF, Word. */
+  type?: ReactNode;
+  /** Status in words; `status` picks the badge. */
+  statusLabel?: ReactNode;
+  status?: BadgeStatus | undefined;
+  /** The last line: "Updated 2 hours ago", "in Harbour / Site / 2026". */
+  meta?: ReactNode;
+  /** Comment count after the status; hidden at zero. */
+  comments?: number | undefined;
+  /** A small source label on the preview: "Dropbox". */
+  source?: ReactNode;
+  /** ready · converting (spinner and label) · failed (red wash, a Re-render action). */
+  state?: FileCardState | undefined;
+  stateLabel?: ReactNode;
+  onRerender?: (() => void) | undefined;
+  /** @default "Re-render" */
+  rerenderLabel?: string | undefined;
+  /** Link cards: the Remove link action beside the target. */
+  onRemoveLink?: (() => void) | undefined;
+  /** @default "Remove link" */
+  removeLinkLabel?: string | undefined;
+
+  selected?: boolean | undefined;
+  /** In selection mode the whole card toggles instead of opening. */
+  selectionMode?: boolean | undefined;
+  onSelectedChange?: ((selected: boolean) => void) | undefined;
+  /** Accessible name of the tick box. @default "Select" */
+  selectLabel?: string | undefined;
+
+  starred?: boolean | undefined;
+  onStarredChange?: ((starred: boolean) => void) | undefined;
+  /** @default "Star" */
+  starLabel?: string | undefined;
+
+  /** Opens the item (not in selection mode). */
+  onOpen?: (() => void) | undefined;
+  /** Every press of the card, with its modifiers — wire useSelection.handleClick here; replaces the default open / toggle. */
+  onPress?: ((event: MouseEvent<HTMLButtonElement>) => void) | undefined;
+};
+
+const KIND_ICON: Record<NonNullable<FileCardProps['kind']>, LucideIcon> = { file: FileText, folder: Folder, link: Link2 };
+
+/**
+ * FileCard — the library card shared by every grid. The title is the one
+ * real button, stretched over the card; the tick box, the star and inline
+ * actions sit above it and never open the card. In selection mode the
+ * whole card is the checkbox.
+ */
+export function FileCard({
+  title,
+  kind = 'file',
+  preview,
+  icon,
+  type,
+  statusLabel,
+  status,
+  meta,
+  comments,
+  source,
+  state = 'ready',
+  stateLabel,
+  onRerender,
+  rerenderLabel = 'Re-render',
+  onRemoveLink,
+  removeLinkLabel = 'Remove link',
+  selected = false,
+  selectionMode = false,
+  onSelectedChange,
+  selectLabel = 'Select',
+  starred,
+  onStarredChange,
+  starLabel = 'Star',
+  onOpen,
+  onPress,
+  className,
+  ...rest
+}: FileCardProps) {
+  const Glyph = icon ?? KIND_ICON[kind];
+  const press = (e: MouseEvent<HTMLButtonElement>) => {
+    if (onPress) onPress(e);
+    else if (selectionMode) onSelectedChange?.(!selected);
+    else onOpen?.();
+  };
+  const showTick = Boolean(onSelectedChange) && (selectionMode || selected);
+
+  return (
+    <div
+      data-selected={selected || undefined}
+      className={cn(
+        'group relative flex flex-col overflow-hidden rounded-lg bg-page text-fg',
+        'transition-[border-color] duration-[120ms] ease-standard',
+        kind === 'link' ? 'border border-dashed border-rule' : 'border border-rule',
+        selected ? 'border-2 border-fg' : 'hover:border-fg focus-within:border-fg',
+        className,
+      )}
+      {...rest}
+    >
+      {/* Preview */}
+      <div
+        className={cn(
+          'relative grid h-[180px] place-items-center text-fg',
+          selected ? 'bg-brand-field text-ink' : state === 'failed' ? 'bg-error-wash text-ink ink:bg-error/20 ink:text-fg' : kind === 'link' ? 'bg-page' : 'bg-sunk',
+        )}
+      >
+        {state === 'converting' ? (
+          <div className="flex flex-col items-center gap-2 text-small text-fg-secondary">
+            <Spinner size={16} />
+            {stateLabel}
+          </div>
+        ) : state === 'failed' ? (
+          <div className="flex flex-col items-center gap-2 text-small">
+            <FileX size={20} strokeWidth={1.75} aria-hidden />
+            <span>{stateLabel}</span>
+            {onRerender && (
+              <button
+                type="button"
+                onClick={onRerender}
+                className="relative z-10 cursor-pointer font-semibold underline underline-offset-2 outline-none focus-visible:shadow-(--focus-ring)"
+              >
+                {rerenderLabel}
+              </button>
+            )}
+          </div>
+        ) : (
+          (preview ?? <Glyph size={32} strokeWidth={1.5} aria-hidden />)
+        )}
+
+        {source && !showTick && (
+          <span className="absolute top-2.5 left-2.5 inline-flex items-center gap-1.5 rounded-sm bg-page px-1.5 py-1 text-[11px] font-semibold text-fg">
+            <span aria-hidden className="size-1.5 rounded-pill bg-brand-mark" />
+            {source}
+          </span>
+        )}
+
+        {onSelectedChange && (
+          <CheckboxPrimitive.Root
+            checked={selected}
+            onCheckedChange={(v) => onSelectedChange(v === true)}
+            aria-label={selectLabel}
+            className={cn(
+              'absolute top-2.5 left-2.5 z-10 grid size-5 cursor-pointer place-items-center rounded-xs border border-rule bg-page outline-none',
+              'data-[state=checked]:border-fg data-[state=checked]:bg-fg data-[state=checked]:text-page focus-visible:shadow-(--focus-ring)',
+              showTick ? 'opacity-100' : 'opacity-0 group-hover:opacity-100 focus-visible:opacity-100',
+            )}
+          >
+            <CheckboxPrimitive.Indicator>
+              <Check size={13} strokeWidth={2.5} aria-hidden />
+            </CheckboxPrimitive.Indicator>
+          </CheckboxPrimitive.Root>
+        )}
+
+        {onStarredChange && (
+          <button
+            type="button"
+            aria-label={starLabel}
+            aria-pressed={Boolean(starred)}
+            onClick={() => onStarredChange(!starred)}
+            className={cn(
+              'absolute top-2 right-2 z-10 grid size-7 cursor-pointer place-items-center rounded-md text-fg outline-none hover:bg-hover focus-visible:shadow-(--focus-ring)',
+              starred ? 'opacity-100' : 'opacity-0 group-hover:opacity-100 focus-visible:opacity-100',
+            )}
+          >
+            <Star size={15} strokeWidth={1.75} aria-hidden className={starred ? 'fill-brand-mark text-fg' : undefined} />
+          </button>
+        )}
+      </div>
+
+      {/* Body */}
+      <div className="flex min-w-0 flex-col gap-1.5 px-3.5 pt-3 pb-3.5">
+        <button
+          type="button"
+          onClick={press}
+          aria-pressed={selectionMode ? selected : undefined}
+          className={cn(
+            'min-w-0 cursor-pointer truncate text-left text-ui font-medium text-fg outline-none',
+            // Stretched: the whole card is this button's target.
+            'after:absolute after:inset-0 after:content-[""] focus-visible:after:rounded-lg focus-visible:after:shadow-(--focus-ring)',
+          )}
+        >
+          {title}
+        </button>
+        {(type || statusLabel || (comments ?? 0) > 0) && (
+          <div className="flex min-w-0 items-center gap-2">
+            {type && <Tag className="px-1.5 py-0.5 font-semibold text-fg">{type}</Tag>}
+            {statusLabel && <Badge status={status}>{statusLabel}</Badge>}
+            {(comments ?? 0) > 0 && (
+              <span className="ml-auto inline-flex items-center gap-1 text-meta text-fg-secondary">
+                <MessageSquare size={13} strokeWidth={1.75} aria-hidden />
+                <span className="tabular-nums">{comments}</span>
+              </span>
+            )}
+          </div>
+        )}
+        {(meta || onRemoveLink) && (
+          <div className="flex min-w-0 items-center gap-1 text-meta text-fg-secondary">
+            {meta && <span className="truncate">{meta}</span>}
+            {onRemoveLink && (
+              <>
+                {meta && <span aria-hidden>·</span>}
+                <button
+                  type="button"
+                  onClick={onRemoveLink}
+                  className="relative z-10 cursor-pointer text-fg-secondary outline-none hover:text-fg hover:underline focus-visible:shadow-(--focus-ring)"
+                >
+                  {removeLinkLabel}
+                </button>
+              </>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/FileRow.tsx

@@ -0,0 +1,159 @@
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { Check, FileText, Star, type LucideIcon } from 'lucide-react';
+import type { ComponentProps, MouseEvent, ReactNode } from 'react';
+
+import { cn } from '../lib/cn';
+import { Badge, type BadgeStatus } from './Badge';
+
+/** The shared column layout of a file list: [tick] icon · name · state · updated · [actions]. */
+const GRID = 'grid grid-cols-[20px_minmax(0,1fr)_minmax(96px,120px)_minmax(96px,160px)_32px] items-center gap-x-3';
+const GRID_SELECTABLE = 'grid grid-cols-[20px_20px_minmax(0,1fr)_minmax(96px,120px)_minmax(96px,160px)_32px] items-center gap-x-3';
+
+export type FileListProps = ComponentProps<'div'> & {
+  /** Column headings: name, state, updated. Omit for a headless list. */
+  columns?: { name: ReactNode; state: ReactNode; updated: ReactNode } | undefined;
+  /** Leave room for the tick column. */
+  selectable?: boolean | undefined;
+  /** Accessible name of the list. */
+  label: string;
+};
+
+/** FileList — the row container: optional headings, then FileRows. */
+export function FileList({ columns, selectable = false, label, className, children, ...rest }: FileListProps) {
+  return (
+    <div className={cn('flex flex-col', className)} {...rest}>
+      {columns && (
+        <div aria-hidden className={cn(selectable ? GRID_SELECTABLE : GRID, 'border-b border-rule px-3 pb-2 text-meta font-medium text-fg-secondary')}>
+          {selectable && <span />}
+          <span />
+          <span>{columns.name}</span>
+          <span>{columns.state}</span>
+          <span>{columns.updated}</span>
+          <span />
+        </div>
+      )}
+      <ul aria-label={label} className="m-0 flex list-none flex-col p-0">
+        {children}
+      </ul>
+    </div>
+  );
+}
+
+export type FileRowProps = Omit<ComponentProps<'li'>, 'title' | 'onClick'> & {
+  name: ReactNode;
+  icon?: LucideIcon | undefined;
+  statusLabel?: ReactNode;
+  status?: BadgeStatus | undefined;
+  /** "2 hours ago" — or, in search results, the location: "in Legal / 2026". */
+  updated?: ReactNode;
+  /** A wash for rows that need someone (attention) or are overdue (error). */
+  tone?: 'attention' | 'error' | undefined;
+  /** Match the FileList's selectable. */
+  selectable?: boolean | undefined;
+  selected?: boolean | undefined;
+  selectionMode?: boolean | undefined;
+  onSelectedChange?: ((selected: boolean) => void) | undefined;
+  /** @default "Select" */
+  selectLabel?: string | undefined;
+  starred?: boolean | undefined;
+  onStarredChange?: ((starred: boolean) => void) | undefined;
+  /** @default "Star" */
+  starLabel?: string | undefined;
+  onOpen?: (() => void) | undefined;
+  /** Every press with its modifiers — wire useSelection.handleClick; replaces the default open / toggle. */
+  onPress?: ((event: MouseEvent<HTMLButtonElement>) => void) | undefined;
+};
+
+/**
+ * FileRow — a list row: icon, name, state, updated or location, a star on
+ * hover. Like FileCard, the name is the one button stretched over the row;
+ * the tick box and the star sit above it and never open the row.
+ */
+export function FileRow({
+  name,
+  icon: Glyph = FileText,
+  statusLabel,
+  status,
+  updated,
+  tone,
+  selectable = false,
+  selected = false,
+  selectionMode = false,
+  onSelectedChange,
+  selectLabel = 'Select',
+  starred,
+  onStarredChange,
+  starLabel = 'Star',
+  onOpen,
+  onPress,
+  className,
+  ...rest
+}: FileRowProps) {
+  const press = (e: MouseEvent<HTMLButtonElement>) => {
+    if (onPress) onPress(e);
+    else if (selectionMode) onSelectedChange?.(!selected);
+    else onOpen?.();
+  };
+  return (
+    <li
+      data-selected={selected || undefined}
+      className={cn(
+        selectable ? GRID_SELECTABLE : GRID,
+        'group relative min-h-[42px] border-b border-rule-soft px-3 py-2 text-ui text-fg',
+        selected
+          ? 'bg-brand-field text-ink'
+          : tone === 'attention'
+            ? 'bg-yellow-wash-32 ink:bg-yellow-accent/15'
+            : tone === 'error'
+              ? 'bg-error-wash ink:bg-error/20'
+              : 'hover:bg-hover',
+        className,
+      )}
+      {...rest}
+    >
+      {selectable && (
+        <CheckboxPrimitive.Root
+          checked={selected}
+          onCheckedChange={(v) => onSelectedChange?.(v === true)}
+          aria-label={selectLabel}
+          className={cn(
+            'relative z-10 grid size-4 cursor-pointer place-items-center rounded-xs border border-rule bg-page outline-none',
+            'data-[state=checked]:border-fg data-[state=checked]:bg-fg data-[state=checked]:text-page focus-visible:shadow-(--focus-ring)',
+            selectionMode || selected ? 'opacity-100' : 'opacity-0 group-hover:opacity-100 focus-visible:opacity-100',
+          )}
+        >
+          <CheckboxPrimitive.Indicator>
+            <Check size={12} strokeWidth={2.5} aria-hidden />
+          </CheckboxPrimitive.Indicator>
+        </CheckboxPrimitive.Root>
+      )}
+      <Glyph size={16} strokeWidth={1.75} aria-hidden className="text-fg" />
+      <button
+        type="button"
+        onClick={press}
+        aria-pressed={selectionMode ? selected : undefined}
+        className="min-w-0 cursor-pointer truncate text-left outline-none after:absolute after:inset-0 after:content-[''] focus-visible:after:shadow-(--focus-ring)"
+      >
+        {name}
+      </button>
+      <span className="min-w-0">{statusLabel ? <Badge status={status}>{statusLabel}</Badge> : null}</span>
+      <span className={cn('min-w-0 truncate text-small', selected ? 'text-fg-on-yellow-secondary' : 'text-fg-secondary')}>{updated}</span>
+      <span className="flex justify-end">
+        {onStarredChange && (
+          <button
+            type="button"
+            aria-label={starLabel}
+            aria-pressed={Boolean(starred)}
+            onClick={() => onStarredChange(!starred)}
+            className={cn(
+              'relative z-10 grid size-7 cursor-pointer place-items-center rounded-md outline-none hover:bg-hover focus-visible:shadow-(--focus-ring)',
+              starred ? 'opacity-100' : 'opacity-0 group-hover:opacity-100 focus-visible:opacity-100',
+            )}
+          >
+            <Star size={15} strokeWidth={1.75} aria-hidden className={starred ? 'fill-brand-mark' : undefined} />
+          </button>
+        )}
+      </span>
+    </li>
+  );
+}