@jcsoftdev/ui 0.0.0-stage → 0.1.1

package/src/forms/dropzone/dropzone.tsx

@@ -0,0 +1,127 @@
+"use client";
+
+import { Upload } from "lucide-react";
+import { type ChangeEvent, type DragEvent, useRef, useState } from "react";
+import { cn } from "../../utils/cn.js";
+
+export type DropzoneRejectionReason = "type" | "size";
+
+export interface DropzoneRejection {
+  file: File;
+  reason: DropzoneRejectionReason;
+}
+
+export interface DropzoneProps {
+  onFiles: (files: File[]) => void;
+  /** Called with the rejected files; the caller composes the user-facing message. */
+  onReject?: (rejections: DropzoneRejection[]) => void;
+  /** Accepted MIME types; supports wildcards such as `image/*`. */
+  acceptedTypes?: string[];
+  maxSizeBytes?: number;
+  multiple?: boolean;
+  title: string;
+  hint?: string;
+  browseLabel: string;
+  className?: string;
+}
+
+function isTypeAllowed(file: File, acceptedTypes?: string[]) {
+  if (!acceptedTypes || acceptedTypes.length === 0) return true;
+  return acceptedTypes.some((type) =>
+    type.endsWith("/*") ? file.type.startsWith(type.slice(0, -1)) : file.type === type,
+  );
+}
+
+function validateFiles(
+  files: File[],
+  acceptedTypes: string[] | undefined,
+  maxSizeBytes: number | undefined,
+) {
+  const accepted: File[] = [];
+  const rejected: DropzoneRejection[] = [];
+
+  for (const file of files) {
+    if (!isTypeAllowed(file, acceptedTypes)) {
+      rejected.push({ file, reason: "type" });
+    } else if (maxSizeBytes !== undefined && file.size > maxSizeBytes) {
+      rejected.push({ file, reason: "size" });
+    } else {
+      accepted.push(file);
+    }
+  }
+
+  return { accepted, rejected };
+}
+
+export function Dropzone({
+  onFiles,
+  onReject,
+  acceptedTypes,
+  maxSizeBytes,
+  multiple = true,
+  title,
+  hint,
+  browseLabel,
+  className,
+}: DropzoneProps) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [dragging, setDragging] = useState(false);
+
+  function process(list: FileList | null) {
+    if (!list || list.length === 0) return;
+    const { accepted, rejected } = validateFiles(Array.from(list), acceptedTypes, maxSizeBytes);
+    if (rejected.length > 0) onReject?.(rejected);
+    if (accepted.length > 0) onFiles(accepted);
+  }
+
+  function handleDrop(event: DragEvent<HTMLDivElement>) {
+    event.preventDefault();
+    setDragging(false);
+    process(event.dataTransfer.files);
+  }
+
+  function handleInputChange(event: ChangeEvent<HTMLInputElement>) {
+    process(event.target.files);
+    event.target.value = "";
+  }
+
+  return (
+    // biome-ignore lint/a11y/noStaticElementInteractions: the browse button is the keyboard-accessible path; dragging is an extra shortcut
+    <div
+      className={cn(
+        "@container/dropzone flex min-w-0 flex-col items-center gap-1.5 rounded-tile border-[1.5px] border-line-control border-dashed bg-surface-2 p-3 text-center text-ink-2 @min-[360px]/dropzone:p-5.5",
+        dragging && "border-accent-ink bg-accent-soft",
+        className,
+      )}
+      onDragOver={(event) => {
+        event.preventDefault();
+        setDragging(true);
+      }}
+      onDragLeave={() => setDragging(false)}
+      onDrop={handleDrop}
+    >
+      <Upload aria-hidden="true" className="size-4.5 @min-[360px]/dropzone:size-5.5" />
+      <b className="max-w-full text-control [overflow-wrap:anywhere]">{title}</b>
+      {hint ? (
+        <span className="max-w-full text-meta text-ink-3 [overflow-wrap:anywhere]">{hint}</span>
+      ) : null}
+      <button
+        type="button"
+        className="mt-1 inline-flex h-control-sm max-w-full items-center justify-center rounded-input border-control bg-surface-control px-3 font-semibold text-chip-text hover:bg-surface-2"
+        onClick={() => inputRef.current?.click()}
+      >
+        {browseLabel}
+      </button>
+      <input
+        ref={inputRef}
+        type="file"
+        multiple={multiple}
+        accept={acceptedTypes?.join(",")}
+        className="hidden"
+        tabIndex={-1}
+        aria-hidden="true"
+        onChange={handleInputChange}
+      />
+    </div>
+  );
+}

package/src/forms/dropzone/index.ts

@@ -0,0 +1,6 @@
+export {
+  Dropzone,
+  type DropzoneProps,
+  type DropzoneRejection,
+  type DropzoneRejectionReason,
+} from "./dropzone.js";

package/src/forms/emoji-picker/emoji-data.ts

@@ -0,0 +1,173 @@
+export interface EmojiEntry {
+  emoji: string;
+  /** Spanish name followed by search keywords. */
+  name: string;
+}
+
+export interface EmojiCategory {
+  id: string;
+  label: string;
+  /** Emoji shown on the category tab. */
+  icon: string;
+  emojis: EmojiEntry[];
+}
+
+const e = (emoji: string, name: string): EmojiEntry => ({ emoji, name });
+
+/** Small curated set, kept in its own module so apps that never open a picker do not ship it. */
+export const EMOJI_CATEGORIES: EmojiCategory[] = [
+  {
+    id: "caras",
+    label: "Caras",
+    icon: "😀",
+    emojis: [
+      e("😀", "sonrisa feliz"),
+      e("😃", "sonrisa grande alegre"),
+      e("😄", "risa ojos sonrientes"),
+      e("😁", "dientes sonrisa"),
+      e("😆", "carcajada"),
+      e("😅", "sudor nervioso alivio"),
+      e("😂", "llorar de risa"),
+      e("🤣", "rodar de risa"),
+      e("🙂", "sonrisa leve"),
+      e("😉", "guiño"),
+      e("😊", "sonrojado contento"),
+      e("😇", "angelito"),
+      e("🥰", "enamorado corazones"),
+      e("😍", "ojos de corazon encantado"),
+      e("😘", "beso"),
+      e("😋", "delicioso rico"),
+      e("😎", "genial lentes de sol"),
+      e("🤩", "asombrado estrellas"),
+      e("🤔", "pensando duda"),
+      e("😐", "neutral serio"),
+      e("😏", "picaro"),
+      e("😒", "aburrido fastidio"),
+      e("😔", "triste pensativo"),
+      e("😢", "llorando lagrima"),
+      e("😭", "llanto fuerte"),
+      e("😡", "enojado furioso"),
+      e("🥳", "fiesta celebrar"),
+      e("😴", "dormido sueño"),
+      e("🤯", "mente explotando"),
+      e("😱", "miedo grito"),
+    ],
+  },
+  {
+    id: "gestos",
+    label: "Gestos",
+    icon: "👍",
+    emojis: [
+      e("👍", "me gusta pulgar arriba bien"),
+      e("👎", "no me gusta pulgar abajo"),
+      e("👏", "aplausos"),
+      e("🙌", "manos arriba celebrar"),
+      e("🙏", "gracias por favor rezar"),
+      e("🤝", "acuerdo apreton de manos"),
+      e("💪", "fuerza musculo"),
+      e("👌", "perfecto ok"),
+      e("✌️", "paz victoria"),
+      e("🤞", "dedos cruzados suerte"),
+      e("🤘", "rock"),
+      e("👋", "saludo hola adios"),
+      e("👀", "ojos mirar"),
+      e("🫶", "manos corazon cariño"),
+      e("✍️", "escribir firma"),
+      e("💅", "uñas manicure"),
+    ],
+  },
+  {
+    id: "barberia",
+    label: "Barbería",
+    icon: "✂️",
+    emojis: [
+      e("✂️", "tijeras corte"),
+      e("💈", "poste de barberia"),
+      e("🧔", "barba hombre"),
+      e("👨‍🦲", "calvo rapado"),
+      e("👨‍🦱", "cabello rizado"),
+      e("💇‍♂️", "corte de cabello hombre"),
+      e("🪒", "navaja afeitar"),
+      e("🧴", "locion producto crema"),
+      e("🧼", "jabon limpieza"),
+      e("🚿", "ducha lavado"),
+      e("🪞", "espejo"),
+      e("⏰", "reloj alarma cita"),
+      e("📅", "calendario agenda"),
+      e("💸", "dinero pago"),
+      e("💳", "tarjeta pago"),
+      e("📱", "celular yape plin"),
+    ],
+  },
+  {
+    id: "simbolos",
+    label: "Símbolos",
+    icon: "❤️",
+    emojis: [
+      e("❤️", "corazon rojo amor"),
+      e("🧡", "corazon naranja"),
+      e("💛", "corazon amarillo"),
+      e("💚", "corazon verde"),
+      e("💙", "corazon azul"),
+      e("💜", "corazon morado"),
+      e("🖤", "corazon negro"),
+      e("💔", "corazon roto"),
+      e("💯", "cien perfecto"),
+      e("🔥", "fuego caliente genial"),
+      e("✨", "brillos destellos"),
+      e("⭐", "estrella"),
+      e("✅", "check listo hecho"),
+      e("❌", "cruz error cancelar"),
+      e("⚠️", "advertencia cuidado"),
+      e("❓", "pregunta"),
+      e("❗", "exclamacion importante"),
+      e("🎉", "confeti fiesta celebracion"),
+    ],
+  },
+  {
+    id: "comida",
+    label: "Comida",
+    icon: "☕",
+    emojis: [
+      e("☕", "cafe"),
+      e("🍵", "te infusion"),
+      e("🍺", "cerveza"),
+      e("🍻", "brindis cervezas"),
+      e("🥤", "refresco bebida"),
+      e("🍕", "pizza"),
+      e("🍔", "hamburguesa"),
+      e("🌮", "taco"),
+      e("🍗", "pollo pierna"),
+      e("🍟", "papas fritas"),
+      e("🍰", "pastel torta"),
+      e("🍫", "chocolate"),
+      e("🍎", "manzana fruta"),
+      e("🍌", "platano banana"),
+      e("🍇", "uvas"),
+      e("🥑", "palta aguacate"),
+    ],
+  },
+  {
+    id: "viajes",
+    label: "Lugares",
+    icon: "🚗",
+    emojis: [
+      e("🚗", "auto carro"),
+      e("🚌", "bus micro"),
+      e("🏍️", "moto"),
+      e("🚲", "bicicleta"),
+      e("✈️", "avion viaje"),
+      e("🏠", "casa hogar"),
+      e("🏢", "edificio oficina"),
+      e("🏪", "tienda local"),
+      e("🌞", "sol dia"),
+      e("🌙", "luna noche"),
+      e("🌧️", "lluvia"),
+      e("🌈", "arcoiris"),
+      e("🎵", "musica nota"),
+      e("⚽", "futbol pelota"),
+      e("🏆", "trofeo campeon"),
+      e("🎁", "regalo"),
+    ],
+  },
+];

package/src/forms/emoji-picker/emoji-picker.tsx

@@ -0,0 +1,142 @@
+"use client";
+
+import { Search } from "lucide-react";
+import { type KeyboardEvent, useId, useMemo, useRef, useState } from "react";
+import { cn } from "../../utils/cn.js";
+import { EMOJI_CATEGORIES, type EmojiCategory, type EmojiEntry } from "./emoji-data.js";
+import { gridMove, searchEmojis } from "./model.js";
+
+export interface EmojiPickerProps {
+  onSelect?: (emoji: string) => void;
+  /** Replaces the built-in dataset (`EMOJI_CATEGORIES`). */
+  categories?: EmojiCategory[];
+  /** Initial category id. */
+  defaultCategory?: string;
+  searchPlaceholder?: string;
+  className?: string;
+}
+
+/**
+ * Emoji panel with search, category tabs and a keyboard-navigable grid (arrows, Home/End; Enter or
+ * Space picks). The panel adapts to its container width and holds no portal, so it works inline or
+ * inside a popover.
+ */
+export function EmojiPicker({
+  onSelect,
+  categories = EMOJI_CATEGORIES,
+  defaultCategory,
+  searchPlaceholder = "Buscar emoji",
+  className,
+}: EmojiPickerProps) {
+  const baseId = useId();
+  const grid = useRef<HTMLDivElement>(null);
+  const [query, setQuery] = useState("");
+  const [categoryId, setCategoryId] = useState(defaultCategory ?? categories[0]?.id);
+  const [active, setActive] = useState(0);
+
+  const searching = query.trim().length > 0;
+  const category = categories.find((c) => c.id === categoryId) ?? categories[0];
+  const entries: EmojiEntry[] = useMemo(
+    () => (searching ? searchEmojis(categories, query) : (category?.emojis ?? [])),
+    [searching, categories, query, category],
+  );
+  const current = Math.min(active, Math.max(0, entries.length - 1));
+
+  const columns = () => {
+    const template = grid.current ? getComputedStyle(grid.current).gridTemplateColumns : "";
+    return Math.max(1, template.split(" ").filter(Boolean).length);
+  };
+
+  const focusCell = (index: number) => {
+    setActive(index);
+    grid.current?.querySelector<HTMLElement>(`[data-index="${index}"]`)?.focus();
+  };
+
+  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    const next = gridMove(event.key, current, columns(), entries.length);
+    if (!["ArrowRight", "ArrowLeft", "ArrowDown", "ArrowUp", "Home", "End"].includes(event.key))
+      return;
+    event.preventDefault();
+    focusCell(next);
+  };
+
+  return (
+    <div
+      className={cn(
+        "@container/emoji flex w-full max-w-xs min-w-0 flex-col gap-density-sm rounded-popover border-card bg-surface-overlay p-card text-ink",
+        className,
+      )}
+    >
+      <label className="relative flex items-center">
+        <span className="sr-only">{searchPlaceholder}</span>
+        <Search
+          aria-hidden="true"
+          className="pointer-events-none absolute left-2.5 size-3.5 text-ink-3"
+        />
+        <input
+          type="search"
+          value={query}
+          placeholder={searchPlaceholder}
+          onChange={(event) => {
+            setQuery(event.target.value);
+            setActive(0);
+          }}
+          className="h-control-sm w-full min-w-0 rounded-input border-control bg-surface-control pr-2 pl-8 text-control text-ink placeholder:text-ink-3 focus:border-transparent focus:outline-2 focus:outline-accent-ink focus:-outline-offset-1"
+        />
+      </label>
+
+      {searching ? null : (
+        <div role="toolbar" aria-label="Categorías" className="flex flex-wrap gap-0.5">
+          {categories.map((c) => (
+            <button
+              key={c.id}
+              type="button"
+              title={c.label}
+              aria-label={c.label}
+              aria-pressed={c.id === category?.id}
+              onClick={() => {
+                setCategoryId(c.id);
+                setActive(0);
+              }}
+              className="pressable grid size-8 place-items-center rounded-button text-base hover:bg-surface-sunken aria-pressed:bg-accent-soft focus-visible:focus-ring"
+            >
+              <span aria-hidden="true">{c.icon}</span>
+            </button>
+          ))}
+        </div>
+      )}
+
+      <p id={`${baseId}-title`} className="text-ink-3 text-overline">
+        {searching ? `Resultados (${entries.length})` : category?.label}
+      </p>
+
+      {/* biome-ignore lint/a11y/useSemanticElements: arrow-key grid of buttons with a roving tabindex */}
+      <div
+        ref={grid}
+        role="group"
+        aria-labelledby={`${baseId}-title`}
+        onKeyDown={onKeyDown}
+        className="grid max-h-48 gap-0.5 overflow-y-auto [grid-template-columns:repeat(auto-fill,minmax(2rem,1fr))]"
+      >
+        {entries.map((entry, index) => (
+          <button
+            key={entry.emoji}
+            type="button"
+            data-index={index}
+            tabIndex={index === current ? 0 : -1}
+            aria-label={entry.name.split(" ").slice(0, 3).join(" ")}
+            title={entry.name.split(" ").slice(0, 3).join(" ")}
+            onFocus={() => setActive(index)}
+            onClick={() => onSelect?.(entry.emoji)}
+            className="pressable grid size-8 place-items-center rounded-button text-lg hover:bg-surface-sunken focus-visible:focus-ring"
+          >
+            <span aria-hidden="true">{entry.emoji}</span>
+          </button>
+        ))}
+        {entries.length === 0 ? (
+          <p className="col-span-full py-3 text-center text-ink-3 text-meta">Sin resultados</p>
+        ) : null}
+      </div>
+    </div>
+  );
+}

package/src/forms/emoji-picker/index.ts

@@ -0,0 +1,3 @@
+export { EMOJI_CATEGORIES, type EmojiCategory, type EmojiEntry } from "./emoji-data.js";
+export { EmojiPicker, type EmojiPickerProps } from "./emoji-picker.js";
+export { gridMove, searchEmojis } from "./model.js";

package/src/forms/emoji-picker/model.ts

@@ -0,0 +1,49 @@
+import type { EmojiCategory, EmojiEntry } from "./emoji-data.js";
+
+function normalize(text: string): string {
+  return text.toLowerCase().normalize("NFD").replace(/[̀-ͯ]/g, "").trim();
+}
+
+/** Entries whose name contains every word of the query (accents and case ignored). */
+export function searchEmojis(categories: EmojiCategory[], query: string): EmojiEntry[] {
+  const words = normalize(query).split(/\s+/).filter(Boolean);
+  if (words.length === 0) return [];
+  const seen = new Set<string>();
+  const found: EmojiEntry[] = [];
+  for (const category of categories) {
+    for (const entry of category.emojis) {
+      if (seen.has(entry.emoji)) continue;
+      const haystack = normalize(entry.name);
+      if (words.every((word) => haystack.includes(word))) {
+        seen.add(entry.emoji);
+        found.push(entry);
+      }
+    }
+  }
+  return found;
+}
+
+/**
+ * Next index in a grid of `count` cells and `columns` columns for an arrow/Home/End key.
+ * Vertical moves that would leave the grid stay in place; the last row may be short.
+ */
+export function gridMove(key: string, index: number, columns: number, count: number): number {
+  if (count <= 0) return 0;
+  const last = count - 1;
+  switch (key) {
+    case "ArrowRight":
+      return Math.min(last, index + 1);
+    case "ArrowLeft":
+      return Math.max(0, index - 1);
+    case "ArrowDown":
+      return index + columns <= last ? index + columns : index;
+    case "ArrowUp":
+      return index - columns >= 0 ? index - columns : index;
+    case "Home":
+      return 0;
+    case "End":
+      return last;
+    default:
+      return index;
+  }
+}

package/src/forms/emoji-reaction-button/emoji-reaction-button.tsx

@@ -0,0 +1,112 @@
+"use client";
+
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { SmilePlus } from "lucide-react";
+import { useState } from "react";
+import { cn } from "../../utils/cn.js";
+import { EmojiPicker } from "../emoji-picker/emoji-picker.js";
+
+export interface EmojiReactionButtonProps {
+  emoji: string;
+  count: number;
+  /** Whether the current user has used this reaction. */
+  reacted?: boolean;
+  onToggle?: (reacted: boolean) => void;
+  disabled?: boolean;
+  className?: string;
+}
+
+/** Reaction chip: an emoji with its count, pressed when the current user reacted. */
+export function EmojiReactionButton({
+  emoji,
+  count,
+  reacted = false,
+  onToggle,
+  disabled,
+  className,
+}: EmojiReactionButtonProps) {
+  return (
+    <button
+      type="button"
+      aria-pressed={reacted}
+      aria-label={`${emoji} ${count}`}
+      disabled={disabled}
+      onClick={() => onToggle?.(!reacted)}
+      className={cn(
+        "pressable inline-flex h-control-sm items-center gap-1.5 rounded-badge border-control bg-surface-control px-2.5 text-control text-ink-2 tabular-nums hover:bg-surface-sunken focus-visible:focus-ring disabled:cursor-not-allowed disabled:opacity-50 aria-pressed:border-accent aria-pressed:bg-accent-soft aria-pressed:text-accent-ink",
+        className,
+      )}
+    >
+      <span aria-hidden="true">{emoji}</span>
+      <span aria-hidden="true">{count}</span>
+    </button>
+  );
+}
+
+export interface Reaction {
+  emoji: string;
+  count: number;
+  reacted?: boolean;
+}
+
+export interface EmojiReactionBarProps {
+  reactions: Reaction[];
+  /** Called with the emoji and the new reacted state, from a chip or from the picker. */
+  onReact?: (emoji: string, reacted: boolean) => void;
+  /** Portal target for the picker; pass an element to keep a scoped `data-style`. */
+  container?: HTMLElement | null;
+  addLabel?: string;
+  disabled?: boolean;
+  className?: string;
+}
+
+/** Row of reaction chips plus an "add reaction" button that opens an emoji picker. */
+export function EmojiReactionBar({
+  reactions,
+  onReact,
+  container,
+  addLabel = "Añadir reacción",
+  disabled,
+  className,
+}: EmojiReactionBarProps) {
+  const [open, setOpen] = useState(false);
+  return (
+    <div
+      className={cn("@container/reactions flex flex-wrap items-center gap-density-sm", className)}
+    >
+      {reactions.map((reaction) => (
+        <EmojiReactionButton
+          key={reaction.emoji}
+          {...reaction}
+          disabled={disabled}
+          onToggle={(next) => onReact?.(reaction.emoji, next)}
+        />
+      ))}
+      <PopoverPrimitive.Root open={open} onOpenChange={setOpen}>
+        <PopoverPrimitive.Trigger
+          disabled={disabled}
+          aria-label={addLabel}
+          className="pressable grid aspect-square h-control-sm place-items-center rounded-badge border-control bg-surface-control text-ink-3 hover:text-ink focus-visible:focus-ring disabled:cursor-not-allowed disabled:opacity-50"
+        >
+          <SmilePlus aria-hidden="true" className="size-4" />
+        </PopoverPrimitive.Trigger>
+        <PopoverPrimitive.Portal container={container}>
+          <PopoverPrimitive.Content
+            sideOffset={6}
+            collisionPadding={8}
+            className="z-85 w-72 max-w-(--radix-popover-content-available-width) rounded-popover shadow-overlay"
+          >
+            <EmojiPicker
+              className="max-w-none surface-overlay"
+              onSelect={(emoji) => {
+                const existing = reactions.find((r) => r.emoji === emoji);
+                onReact?.(emoji, !existing?.reacted);
+                setOpen(false);
+              }}
+            />
+          </PopoverPrimitive.Content>
+        </PopoverPrimitive.Portal>
+      </PopoverPrimitive.Root>
+    </div>
+  );
+}

package/src/forms/emoji-reaction-button/index.ts

@@ -0,0 +1,7 @@
+export {
+  EmojiReactionBar,
+  type EmojiReactionBarProps,
+  EmojiReactionButton,
+  type EmojiReactionButtonProps,
+  type Reaction,
+} from "./emoji-reaction-button.js";

package/src/forms/field/field.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { cloneElement, isValidElement, type ReactElement, useId } from "react";
+import { cn } from "../../utils/cn.js";
+import { Label } from "../label/index.js";
+
+interface ControlProps {
+  id?: string;
+  "aria-describedby"?: string;
+  "aria-invalid"?: boolean;
+}
+
+export interface FieldProps {
+  label: string;
+  hint?: string;
+  error?: string;
+  id?: string;
+  children: ReactElement<ControlProps>;
+  className?: string;
+}
+
+export function Field({ label, hint, error, id, children, className }: FieldProps) {
+  const generatedId = useId();
+  const controlId = id ?? generatedId;
+  const hintId = hint ? `${controlId}-hint` : undefined;
+  const errorId = error ? `${controlId}-error` : undefined;
+  const describedBy = [hintId, errorId].filter(Boolean).join(" ") || undefined;
+
+  const control = isValidElement(children)
+    ? cloneElement(children, {
+        id: controlId,
+        "aria-describedby": describedBy,
+        "aria-invalid": error ? true : undefined,
+      })
+    : children;
+
+  return (
+    <div className={cn("flex min-w-0 flex-col gap-1.25", className)}>
+      <Label htmlFor={controlId}>{label}</Label>
+      {control}
+      {hint ? (
+        <p id={hintId} className="text-meta text-ink-3">
+          {hint}
+        </p>
+      ) : null}
+      {error ? (
+        <p id={errorId} className="font-semibold text-danger text-meta" role="alert">
+          {error}
+        </p>
+      ) : null}
+    </div>
+  );
+}

package/src/forms/field/index.ts

@@ -0,0 +1 @@
+export { Field, type FieldProps } from "./field.js";