@lindaui/blocks 0.4.2 → 0.5.0

package/src/entity-health-card.tsx

@@ -0,0 +1,53 @@
+"use client";
+import type { ReactNode } from "react";
+import { ChartCard } from "./chart-card";
+import { Badge } from "@lindaui/ui/badge";
+import { Divider } from "@lindaui/ui/divider";
+
+export type EntityHealthStatus = "default" | "success" | "warning" | "danger" | "info";
+
+export interface EntityHealthItem {
+  id: string;
+  label: string;
+  value: ReactNode;
+  status?: EntityHealthStatus;
+  statusLabel?: string;
+}
+
+export interface EntityHealthCardProps {
+  title: ReactNode;
+  description?: ReactNode;
+  items: EntityHealthItem[];
+  emptyLabel?: string;
+}
+
+/** Lista de salud de entidades genérica (ex-GymHealthCard, generalizado). */
+export function EntityHealthCard({
+  title,
+  description,
+  items,
+  emptyLabel = "Sin datos",
+}: EntityHealthCardProps) {
+  return (
+    <ChartCard title={title} description={description}>
+      {items.length === 0 ? (
+        <p className="py-4 text-center text-sm text-muted-foreground">{emptyLabel}</p>
+      ) : (
+        <div className="flex flex-col">
+          {items.map((item, i) => (
+            <div key={item.id}>
+              {i > 0 && <Divider />}
+              <div className="flex items-center justify-between gap-2 py-2.5">
+                <span className="truncate text-sm">{item.label}</span>
+                <div className="flex shrink-0 items-center gap-2">
+                  <span className="text-sm font-semibold tabular-nums">{item.value}</span>
+                  {item.status && <Badge variant={item.status}>{item.statusLabel ?? item.status}</Badge>}
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </ChartCard>
+  );
+}

package/src/entity-switcher.tsx

@@ -0,0 +1,126 @@
+"use client";
+
+import { Avatar, Chip, Description, Dropdown, Header, Label, Separator } from "@lindaui/ui/compound";
+import { cn } from "@lindaui/ui/cn";
+import { ChevronDown } from "lucide-react";
+import type { ReactNode } from "react";
+
+export interface EntitySwitcherItem {
+  identifier: string;
+  name: string;
+  description?: string | null;
+}
+
+export interface EntitySwitcherAction {
+  identifier: string;
+  label: string;
+  icon?: ReactNode;
+  className?: string;
+  onAction: () => void;
+}
+
+export interface EntitySwitcherLabels {
+  trigger: string;
+  menu: string;
+  section: string;
+  fallbackDescription?: string;
+  visiting?: string;
+}
+
+export interface EntitySwitcherProps<T extends EntitySwitcherItem = EntitySwitcherItem> {
+  currentEntity?: T | null;
+  entities: T[];
+  onSelect: (entity: T) => void;
+  labels: EntitySwitcherLabels;
+  isCollapsed?: boolean;
+  isVisiting?: boolean;
+  actions?: EntitySwitcherAction[];
+  renderAvatar?: (entity: T) => ReactNode;
+}
+
+/** Controlled, domain-neutral entity selector with the original compact sidebar anatomy. */
+export function EntitySwitcher<T extends EntitySwitcherItem>({
+  currentEntity, entities, onSelect, labels, isCollapsed = false,
+  isVisiting = false, actions = [], renderAvatar,
+}: EntitySwitcherProps<T>) {
+  if (!currentEntity) return null;
+
+  return (
+    <div className={cn("px-2 py-2", isCollapsed ? "flex justify-center" : "")}>
+      <Dropdown>
+        <Dropdown.Trigger aria-label={labels.trigger} className="w-full min-w-0">
+          <div className={cn(
+            "flex w-full min-w-0 cursor-pointer items-center gap-2 rounded-lg p-2 transition-colors hover:bg-surface-secondary",
+            isVisiting ? "ring-2 ring-warning ring-offset-1" : "",
+            isCollapsed ? "justify-center" : ""
+          )}>
+            <Avatar className="flex-shrink-0 transition-transform" color={isVisiting ? "warning" : "default"} size="sm">
+              {renderAvatar ? renderAvatar(currentEntity) : (
+                <Avatar.Fallback>{currentEntity.name.charAt(0).toUpperCase()}</Avatar.Fallback>
+              )}
+            </Avatar>
+            {!isCollapsed && (
+              <>
+                <div className="min-w-0 flex-1 overflow-hidden">
+                  <div className="flex min-w-0 items-center gap-1.5">
+                    <p className="truncate font-semibold text-sm">{currentEntity.name}</p>
+                    {isVisiting && labels.visiting ? (
+                      <Chip className="shrink-0" color="warning" size="sm" variant="soft">{labels.visiting}</Chip>
+                    ) : null}
+                  </div>
+                  <p className="truncate text-muted text-xs">{currentEntity.description || labels.fallbackDescription}</p>
+                </div>
+                <ChevronDown className="shrink-0 text-muted" size={16} />
+              </>
+            )}
+          </div>
+        </Dropdown.Trigger>
+        <Dropdown.Popover className="rounded-[14px]" placement="bottom start">
+          <Dropdown.Menu
+            aria-label={labels.menu}
+            className="w-60 [&_[data-slot=menu-item]]:rounded-lg"
+            onAction={(key) => {
+              const action = actions.find((item) => item.identifier === String(key));
+              if (action) {
+                action.onAction();
+                return;
+              }
+              const entity = entities.find((item) => item.identifier === String(key));
+              if (entity) onSelect(entity);
+            }}
+            selectedKeys={new Set([currentEntity.identifier])}
+            selectionMode="single"
+          >
+            <Dropdown.Section>
+              <Header>{labels.section}</Header>
+              {entities.map((entity) => (
+                <Dropdown.Item id={entity.identifier} key={entity.identifier} textValue={entity.name}>
+                  <Dropdown.ItemIndicator />
+                  <Avatar className="flex-shrink-0" size="sm">
+                    {renderAvatar ? renderAvatar(entity) : (
+                      <Avatar.Fallback>{entity.name.charAt(0).toUpperCase()}</Avatar.Fallback>
+                    )}
+                  </Avatar>
+                  <div className="flex min-w-0 flex-col">
+                    <Label>{entity.name}</Label>
+                    <Description>{entity.description}</Description>
+                  </div>
+                </Dropdown.Item>
+              ))}
+            </Dropdown.Section>
+            {actions.length > 0 ? <Separator /> : null}
+            {actions.length > 0 ? (
+              <Dropdown.Section>
+                {actions.map((action) => (
+                  <Dropdown.Item className={action.className} id={action.identifier} key={action.identifier} textValue={action.label}>
+                    {action.icon}<Label>{action.label}</Label>
+                  </Dropdown.Item>
+                ))}
+              </Dropdown.Section>
+            ) : null}
+          </Dropdown.Menu>
+        </Dropdown.Popover>
+      </Dropdown>
+    </div>
+  );
+}

package/src/fetching-indicator.tsx

@@ -0,0 +1,16 @@
+"use client";
+import { Spinner } from "@lindaui/ui/spinner";
+
+export interface FetchingIndicatorProps {
+  label?: string;
+}
+
+/** Pill chico de "actualizando" para superponer sobre contenido ya cargado. */
+export function FetchingIndicator({ label = "Actualizando…" }: FetchingIndicatorProps) {
+  return (
+    <div className="inline-flex items-center gap-1.5 rounded-full bg-secondary px-2.5 py-1 text-xs text-muted-foreground">
+      <Spinner aria-label={label} className="size-3" />
+      <span>{label}</span>
+    </div>
+  );
+}

package/src/field-array-form.tsx

@@ -0,0 +1,166 @@
+"use client";
+import { type ReactNode } from "react";
+import { useForm, useFieldArray, Controller } from "react-hook-form";
+import { Plus, X } from "lucide-react";
+import { Button } from "@lindaui/ui/button";
+import { Input } from "@lindaui/ui/input";
+import { Select } from "@lindaui/ui/select";
+
+export interface FieldArrayFormValues {
+  category: string;
+  name: string;
+  entries: { key: string; value: string }[];
+}
+
+export interface FieldArrayFormProps {
+  onSubmit: (values: FieldArrayFormValues) => void | Promise<void>;
+  options: { value: string; label: string }[];
+  categoryLabel?: string;
+  nameLabel?: string;
+  namePlaceholder?: string;
+  entriesLabel?: string;
+  addLabel?: string;
+  removeLabel?: string;
+  keyPlaceholder?: string;
+  valuePlaceholder?: string;
+  emptyHint?: ReactNode;
+  submitLabel?: string;
+  loading?: boolean;
+  defaultValues?: Partial<FieldArrayFormValues>;
+}
+
+export function FieldArrayForm({
+  onSubmit,
+  options,
+  categoryLabel = "Categoría",
+  nameLabel = "Nombre",
+  namePlaceholder,
+  entriesLabel = "Entradas",
+  addLabel = "Agregar entrada",
+  removeLabel = "Eliminar entrada",
+  keyPlaceholder = "Clave",
+  valuePlaceholder = "Valor",
+  emptyHint,
+  submitLabel = "Guardar",
+  loading = false,
+  defaultValues,
+}: FieldArrayFormProps) {
+  const { control, handleSubmit } = useForm<FieldArrayFormValues>({
+    defaultValues: {
+      category: defaultValues?.category ?? options[0]?.value ?? "",
+      name: defaultValues?.name ?? "",
+      entries: defaultValues?.entries ?? [],
+    },
+  });
+
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: "entries",
+  });
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} noValidate>
+      <div className="flex flex-col gap-4 px-4 py-4 sm:px-6 sm:py-5">
+        {/* Category Select via Controller */}
+        <div>
+          <label className="text-sm font-medium">{categoryLabel}</label>
+          <Controller
+            control={control}
+            name="category"
+            render={({ field }) => (
+              <Select
+                items={options}
+                value={field.value}
+                onChange={(val) => field.onChange(val)}
+              />
+            )}
+          />
+        </div>
+
+        {/* Name Input via Controller */}
+        <Controller
+          control={control}
+          name="name"
+          render={({ field }) => (
+            <Input
+              label={nameLabel}
+              placeholder={namePlaceholder}
+              value={field.value}
+              onChange={field.onChange}
+              onBlur={field.onBlur}
+              name={field.name}
+            />
+          )}
+        />
+
+        {/* Entries section */}
+        <div className="flex flex-col gap-2">
+          <p className="text-sm font-medium">{entriesLabel}</p>
+
+          {fields.length === 0 && emptyHint && (
+            <div className="text-sm text-muted-foreground">{emptyHint}</div>
+          )}
+
+          {fields.map((field, index) => (
+            <div key={field.id} className="flex flex-col gap-2 sm:flex-row sm:items-start">
+              <Controller
+                control={control}
+                name={`entries.${index}.key`}
+                render={({ field: f }) => (
+                  <div className="min-w-0 w-full">
+                    <Input
+                      placeholder={keyPlaceholder}
+                      aria-label={`${keyPlaceholder} ${index + 1}`}
+                      value={f.value}
+                      onChange={f.onChange}
+                      onBlur={f.onBlur}
+                      name={f.name}
+                      fullWidth
+                    />
+                  </div>
+                )}
+              />
+              <Controller
+                control={control}
+                name={`entries.${index}.value`}
+                render={({ field: f }) => (
+                  <div className="min-w-0 w-full">
+                    <Input
+                      placeholder={valuePlaceholder}
+                      aria-label={`${valuePlaceholder} ${index + 1}`}
+                      value={f.value}
+                      onChange={f.onChange}
+                      onBlur={f.onBlur}
+                      name={f.name}
+                      fullWidth
+                    />
+                  </div>
+                )}
+              />
+              <Button
+                variant="ghost"
+                onPress={() => remove(index)}
+                aria-label={removeLabel}
+                className="w-full sm:w-auto"
+              >
+                <X size={16} />
+              </Button>
+            </div>
+          ))}
+
+          <Button
+            variant="secondary"
+            onPress={() => append({ key: "", value: "" })}
+          >
+            <Plus size={16} />
+            {addLabel}
+          </Button>
+        </div>
+
+        <Button type="submit" isDisabled={loading}>
+          {submitLabel}
+        </Button>
+      </div>
+    </form>
+  );
+}

package/src/filter-bar.tsx

@@ -0,0 +1,203 @@
+"use client";
+
+import {
+  Button,
+  Checkbox,
+  CheckboxGroup,
+  CloseButton,
+  InputGroup,
+  Popover,
+  TextField,
+} from "@lindaui/ui/compound";
+import { cn } from "@lindaui/ui/cn";
+import { Filter, Search, SlidersHorizontal, type LucideIcon } from "lucide-react";
+import { useState, type ReactNode } from "react";
+
+export interface FilterOption {
+  key: string;
+  label: string;
+}
+
+export interface SortOption {
+  key: string;
+  label: string;
+}
+
+export interface FilterBarSearchProps {
+  className: string;
+  onChange: (value: string) => void;
+  placeholder: string;
+  value: string;
+}
+
+export interface FilterBarIconButtonProps {
+  icon: LucideIcon;
+  isActive: boolean;
+  tooltip: string;
+}
+
+export interface FilterBarProps {
+  className?: string;
+  searchValue: string;
+  onSearchChange: (value: string) => void;
+  searchPlaceholder?: string;
+  filterOptions?: FilterOption[];
+  selectedFilters?: string[];
+  onFilterChange?: (filters: string[]) => void;
+  filterLabel?: string;
+  clearFiltersLabel?: string;
+  clearSearchLabel?: string;
+  sortOptions?: SortOption[];
+  selectedSort?: string;
+  onSortChange?: (sort: string) => void;
+  sortLabel?: string;
+  renderSearchInput?: (props: FilterBarSearchProps) => ReactNode;
+  renderIconButton?: (props: FilterBarIconButtonProps) => ReactNode;
+}
+
+export function FilterBar({
+  searchValue,
+  onSearchChange,
+  searchPlaceholder = "Search...",
+  filterOptions,
+  selectedFilters = [],
+  onFilterChange,
+  filterLabel = "Filter",
+  clearFiltersLabel = "Clear filters",
+  clearSearchLabel = "Clear search",
+  sortOptions,
+  selectedSort,
+  onSortChange,
+  sortLabel = "Sort",
+  className,
+  renderSearchInput,
+  renderIconButton = (props) => <FilterIconButton {...props} />,
+}: FilterBarProps) {
+  const [isFilterOpen, setIsFilterOpen] = useState(false);
+  const [isSortOpen, setIsSortOpen] = useState(false);
+  const hasActiveFilters = selectedFilters.length > 0;
+  const searchProps = {
+    className: "min-w-0 flex-1",
+    onChange: onSearchChange,
+    placeholder: searchPlaceholder,
+    value: searchValue,
+  };
+
+  return (
+    <div className={cn("flex items-center gap-2", className)}>
+      {renderSearchInput ? (
+        renderSearchInput(searchProps)
+      ) : (
+        <FilterSearchInput {...searchProps} clearLabel={clearSearchLabel} />
+      )}
+      {filterOptions && filterOptions.length > 0 ? (
+        <Popover isOpen={isFilterOpen} onOpenChange={setIsFilterOpen}>
+          {renderIconButton({ icon: Filter, isActive: hasActiveFilters, tooltip: filterLabel })}
+          <Popover.Content className="min-w-[200px] p-4" placement="bottom end">
+            <Popover.Dialog className="space-y-3">
+              <p className="font-semibold text-sm">{filterLabel}</p>
+              <CheckboxGroup
+                aria-label={filterLabel}
+                onChange={(values) => onFilterChange?.(values)}
+                value={selectedFilters}
+              >
+                {filterOptions.map((option) => (
+                  <Checkbox key={option.key} value={option.key}>
+                    <Checkbox.Content>
+                      <Checkbox.Control>
+                        <Checkbox.Indicator />
+                      </Checkbox.Control>
+                      {option.label}
+                    </Checkbox.Content>
+                  </Checkbox>
+                ))}
+              </CheckboxGroup>
+              {hasActiveFilters ? (
+                <Button
+                  className="w-full text-danger"
+                  onPress={() => onFilterChange?.([])}
+                  size="sm"
+                  variant="ghost"
+                >
+                  {clearFiltersLabel}
+                </Button>
+              ) : null}
+            </Popover.Dialog>
+          </Popover.Content>
+        </Popover>
+      ) : null}
+      {sortOptions && sortOptions.length > 0 ? (
+        <Popover isOpen={isSortOpen} onOpenChange={setIsSortOpen}>
+          {renderIconButton({ icon: SlidersHorizontal, isActive: !!selectedSort, tooltip: sortLabel })}
+          <Popover.Content className="min-w-[200px] p-4" placement="bottom end">
+            <Popover.Dialog className="space-y-3">
+              <p className="font-semibold text-sm">{sortLabel}</p>
+              <div className="space-y-1">
+                {sortOptions.map((option) => (
+                  <Button
+                    className={cn(
+                      "w-full justify-start",
+                      selectedSort === option.key && "bg-accent-soft text-accent",
+                    )}
+                    key={option.key}
+                    onPress={() => {
+                      onSortChange?.(option.key);
+                      setIsSortOpen(false);
+                    }}
+                    size="sm"
+                    variant={selectedSort === option.key ? "tertiary" : "ghost"}
+                  >
+                    {option.label}
+                  </Button>
+                ))}
+              </div>
+            </Popover.Dialog>
+          </Popover.Content>
+        </Popover>
+      ) : null}
+    </div>
+  );
+}
+
+function FilterSearchInput({
+  value,
+  onChange,
+  placeholder,
+  className,
+  clearLabel,
+}: FilterBarSearchProps & { clearLabel: string }) {
+  return (
+    <TextField
+      aria-label={placeholder}
+      className={cn("w-full min-w-0", className)}
+      onChange={onChange}
+      value={value}
+    >
+      <InputGroup>
+        <InputGroup.Prefix>
+          <Search className="text-muted" size={18} />
+        </InputGroup.Prefix>
+        <InputGroup.Input className="text-sm" placeholder={placeholder} />
+        {value ? (
+          <InputGroup.Suffix>
+            <CloseButton aria-label={clearLabel} onPress={() => onChange("")} />
+          </InputGroup.Suffix>
+        ) : null}
+      </InputGroup>
+    </TextField>
+  );
+}
+
+function FilterIconButton({ icon: Icon, isActive, tooltip }: FilterBarIconButtonProps) {
+  return (
+    <Button
+      aria-label={tooltip}
+      className={cn("border border-border", isActive ? "border-accent" : "")}
+      isIconOnly
+      size="md"
+      variant={isActive ? "tertiary" : "ghost"}
+    >
+      <Icon size={20} />
+    </Button>
+  );
+}

package/src/image-viewer.tsx

@@ -0,0 +1,129 @@
+"use client";
+
+import { useState } from "react";
+import type { ReactNode } from "react";
+import { Scan, ZoomIn, ZoomOut, Frame } from "lucide-react";
+
+export interface ImageViewerProps {
+  src?: string;
+  alt?: string;
+  annotations?: ReactNode;
+  caption?: string;
+  placeholderLabel?: string;
+  dim?: number;
+  showControls?: boolean;
+  minZoom?: number;
+  maxZoom?: number;
+}
+
+export function ImageViewer({
+  src,
+  alt = "",
+  annotations,
+  caption,
+  placeholderLabel,
+  dim = 0,
+  showControls = false,
+  minZoom = 1,
+  maxZoom = 2.6,
+}: ImageViewerProps) {
+  const [zoom, setZoom] = useState(1);
+  const [imgOk, setImgOk] = useState(false);
+
+  const showPlaceholder = !src || !imgOk;
+
+  return (
+    <div className="absolute inset-0 overflow-hidden bg-viewer-bg text-viewer-foreground">
+      <div
+        className="absolute inset-0 grid place-items-center transition-transform duration-300"
+        style={{ transform: `scale(${zoom})` }}
+      >
+        {src && (
+          <img
+            src={src}
+            alt={alt}
+            onLoad={() => setImgOk(true)}
+            onError={() => setImgOk(false)}
+            className="max-h-full max-w-full object-contain"
+            style={{ display: imgOk ? "block" : "none" }}
+          />
+        )}
+        {showPlaceholder && (
+          <div className="grid place-items-center rounded-lg border border-dashed">
+            <div className="text-center p-4">
+              <Scan
+                className="mx-auto opacity-50"
+                style={{ width: 40, height: 40 }}
+                strokeWidth={1.3}
+              />
+              {placeholderLabel && (
+                <div className="mt-3 font-mono text-xs tracking-widest opacity-70">
+                  {placeholderLabel}
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* annotations slot — top-right */}
+      {annotations && (
+        <div className="absolute right-4 top-4 z-10">{annotations}</div>
+      )}
+
+      {/* caption — bottom-left */}
+      {caption && (
+        <div className="absolute bottom-3.5 left-4 font-mono text-[9px] opacity-40 sm:text-[10px]">
+          {caption}
+        </div>
+      )}
+
+      {/* zoom controls */}
+      {showControls && (
+        <div className="absolute bottom-4 left-3 z-20 flex items-center gap-1.5 sm:bottom-5 sm:left-4 sm:gap-2">
+          <button
+            type="button"
+            onClick={() =>
+              setZoom((z) => Math.max(minZoom, +(z - 0.2).toFixed(2)))
+            }
+            className="h-10 w-10 rounded-[10px] flex items-center justify-center sm:h-9 sm:w-9"
+            aria-label="Reducir zoom"
+          >
+            <ZoomOut className="h-[17px] w-[17px]" />
+          </button>
+          <span className="self-center min-w-9 text-center font-mono text-[11px] opacity-75">
+            {Math.round(zoom * 100)}%
+          </span>
+          <button
+            type="button"
+            onClick={() =>
+              setZoom((z) => Math.min(maxZoom, +(z + 0.2).toFixed(2)))
+            }
+            className="h-10 w-10 rounded-[10px] flex items-center justify-center sm:h-9 sm:w-9"
+            aria-label="Ampliar zoom"
+          >
+            <ZoomIn className="h-[17px] w-[17px]" />
+          </button>
+          <button
+            type="button"
+            onClick={() => setZoom(1)}
+            className="h-10 w-10 rounded-[10px] flex items-center justify-center sm:h-9 sm:w-9"
+            aria-label="Encuadrar"
+          >
+            <Frame className="h-4 w-4" />
+          </button>
+        </div>
+      )}
+
+      {/* dim overlay */}
+      {dim > 0 && (
+        <div
+          className="absolute inset-0 transition-opacity duration-300"
+          style={{
+            background: `color-mix(in oklch, var(--viewer-bg) ${Math.round(dim * 100)}%, transparent)`,
+          }}
+        />
+      )}
+    </div>
+  );
+}