@lindaui/blocks 0.4.2 → 0.5.0

package/src/app-shell.tsx

@@ -0,0 +1,166 @@
+"use client";
+
+import { Button } from "@lindaui/ui/compound";
+import { cn } from "@lindaui/ui/cn";
+import { Menu, PanelLeft, PanelLeftClose, X } from "lucide-react";
+import { useId, useState } from "react";
+import { useDrawerFocus } from "./app-shell/drawer-focus";
+import { MobileBottomNavigation, ShellLink, SidebarNavLink } from "./app-shell/navigation";
+import type { AppShellLabels, AppShellProps } from "./app-shell/types";
+
+export type {
+  AppShellBrand, AppShellImageProps, AppShellLabels, AppShellLinkProps, AppShellNavItem, AppShellProps,
+} from "./app-shell/types";
+export { AppShellFooter } from "./app-shell/footer";
+export type { AppShellFooterLabels, AppShellFooterProps, AppShellUser } from "./app-shell/footer";
+
+const defaultLabels: AppShellLabels = {
+  collapseSidebar: "Collapse sidebar",
+  expandSidebar: "Expand sidebar",
+  openMenu: "Open menu",
+  closeMenu: "Close menu",
+  mainNavigation: "Main navigation",
+  bottomNavigation: "Bottom navigation",
+};
+
+/** The original collapsible desktop sidebar, mobile drawer and floating bottom navigation. */
+export function AppShell({
+  children, navItems, sidebarTopSlot, sidebarFooterSlot, contentTopSlot, headerRightSlot,
+  brand, isVisiting = false, defaultCollapsed = false, labels: labelOverrides,
+  renderLink, renderImage,
+}: AppShellProps) {
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+  const [isCollapsed, setIsCollapsed] = useState(defaultCollapsed);
+  const drawerFocus = useDrawerFocus(sidebarOpen, () => setSidebarOpen(false));
+  const drawerId = useId();
+  const labels = { ...defaultLabels, ...labelOverrides };
+  // Preserve the existing slot API: the top slot follows desktop collapse state in both sidebars.
+  const topSlot = typeof sidebarTopSlot === "function" ? sidebarTopSlot(isCollapsed) : sidebarTopSlot;
+  const footer = (collapsed: boolean) => typeof sidebarFooterSlot === "function"
+    ? sidebarFooterSlot(collapsed) : sidebarFooterSlot;
+  const logo = (size: number, className: string) => {
+    if (!brand.logoSrc) return null;
+    const props = { alt: brand.label, className, height: size, src: brand.logoSrc, width: size };
+    return renderImage ? renderImage(props) : <img {...props} />;
+  };
+  const mobileBrand = (
+    <ShellLink className="flex items-center gap-2" href={brand.href} renderLink={renderLink}>
+      {logo(28, "h-7 w-7 rounded-lg")}
+      <span className="font-extrabold text-sm uppercase">{brand.label}</span>
+    </ShellLink>
+  );
+
+  return (
+    <div className="flex min-h-screen bg-background">
+      <aside className={cn(
+        "fixed z-40 hidden h-full flex-col lg:flex",
+        "border-border border-r",
+        "transition-all duration-300 ease-in-out",
+        isVisiting ? "bg-warning-soft dark:bg-warning/20" : "bg-background",
+        isCollapsed ? "w-16" : "w-48"
+      )}>
+        <div className={cn(
+          "flex h-14 items-center border-border border-b",
+          isCollapsed ? "flex-col justify-center gap-0 px-2" : "justify-between px-4"
+        )}>
+          <ShellLink
+            aria-label={brand.label}
+            className={cn("flex items-center gap-2", isCollapsed ? "mb-0" : "")}
+            href={brand.href}
+            renderLink={renderLink}
+          >
+            {logo(32, cn("rounded-lg", isCollapsed ? "h-7 w-7" : "h-8 w-8") ?? "")}
+            {isCollapsed ? null : <span className="font-extrabold text-sm uppercase">{brand.label}</span>}
+          </ShellLink>
+          {isCollapsed ? null : (
+            <Button
+              aria-label={labels.collapseSidebar}
+              className="text-muted hover:text-foreground"
+              isIconOnly onPress={() => setIsCollapsed(true)} size="sm" variant="ghost"
+            ><PanelLeftClose size={18} /></Button>
+          )}
+        </div>
+        {isCollapsed ? (
+          <div className="flex justify-center border-border border-b py-2">
+            <Button
+              aria-label={labels.expandSidebar}
+              className="text-muted hover:text-foreground"
+              isIconOnly onPress={() => setIsCollapsed(false)} size="sm" variant="ghost"
+            ><PanelLeft size={18} /></Button>
+          </div>
+        ) : null}
+        {topSlot ?? null}
+        <nav aria-label={labels.mainNavigation} className="flex-1 space-y-1 px-2 py-4">
+          {navItems.map((item) => (
+            <SidebarNavLink collapsed={isCollapsed} item={item} key={item.key} renderLink={renderLink} />
+          ))}
+        </nav>
+        {footer(isCollapsed)}
+      </aside>
+
+      <header className="!bg-transparent fixed top-0 right-0 left-0 z-50 border-border border-b backdrop-blur backdrop-saturate-200 lg:hidden dark:border-white/10">
+        <div className="flex h-14 items-center justify-between px-4">
+          <Button
+            ref={drawerFocus.triggerRef}
+            aria-label={sidebarOpen ? labels.closeMenu : labels.openMenu}
+            aria-controls={drawerId} aria-expanded={sidebarOpen}
+            isIconOnly onPress={() => setSidebarOpen(!sidebarOpen)} size="sm" variant="ghost"
+          >{sidebarOpen ? <X size={20} /> : <Menu size={20} />}</Button>
+          {mobileBrand}
+          {headerRightSlot}
+        </div>
+      </header>
+
+      {sidebarOpen ? (
+        <div
+          aria-label={labels.closeMenu}
+          className="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm lg:hidden"
+          onClick={() => setSidebarOpen(false)}
+          onKeyDown={(event) => {
+            if (["Enter", " ", "Escape"].includes(event.key)) {
+              event.preventDefault();
+              setSidebarOpen(false);
+            }
+          }}
+          role="button" tabIndex={0}
+        />
+      ) : null}
+
+      <aside
+        ref={drawerFocus.drawerRef}
+        id={drawerId}
+        inert={!sidebarOpen}
+        onKeyDown={drawerFocus.onKeyDown}
+        className={cn(
+          "fixed inset-y-0 left-0 z-[60] flex w-64 flex-col border-border border-r lg:hidden",
+          "transform transition-transform duration-300 ease-in-out",
+          isVisiting ? "bg-warning-soft dark:bg-warning/20" : "bg-background",
+          sidebarOpen ? "translate-x-0" : "-translate-x-full"
+        )}
+      >
+        <div className="flex h-14 items-center justify-between border-border border-b px-4">
+          {mobileBrand}
+          <Button aria-label={labels.closeMenu} isIconOnly onPress={() => setSidebarOpen(false)} size="sm" variant="ghost">
+            <X size={20} />
+          </Button>
+        </div>
+        {topSlot ?? null}
+        <nav aria-label={labels.mainNavigation} className="flex-1 space-y-1 p-3">
+          {navItems.map((item) => (
+            <SidebarNavLink item={item} key={item.key} onClick={() => setSidebarOpen(false)} renderLink={renderLink} />
+          ))}
+        </nav>
+        {footer(false)}
+      </aside>
+
+      <main className={cn(
+        "flex h-screen min-w-0 flex-1 flex-col overflow-x-hidden pt-14 transition-all duration-300 lg:pt-0",
+        isCollapsed ? "lg:ml-16" : "lg:ml-48"
+      )}>
+        {contentTopSlot}
+        <div className="min-h-0 flex-1 overflow-auto pb-20 lg:pb-0">{children}</div>
+      </main>
+      <MobileBottomNavigation navItems={navItems} isVisiting={isVisiting} label={labels.bottomNavigation} renderLink={renderLink} />
+    </div>
+  );
+}

package/src/area-chart.tsx

@@ -0,0 +1,85 @@
+"use client";
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
+  type ChartConfig,
+} from "@lindaui/ui/chart";
+import {
+  AreaChart as RAreaChart,
+  Area,
+  CartesianGrid,
+  XAxis,
+  YAxis,
+} from "recharts";
+
+export interface AreaChartProps {
+  data: Array<Record<string, string | number>>;
+  config: ChartConfig;
+  categoryKey: string;
+  series: string[];
+  variant?: "default" | "stacked" | "gradient";
+  className?: string;
+}
+
+export function AreaChart({
+  data,
+  config,
+  categoryKey,
+  series,
+  variant = "default",
+  className,
+}: AreaChartProps) {
+  const isStacked = variant === "stacked";
+  const isGradient = variant === "gradient";
+
+  return (
+    <ChartContainer config={config} className={className}>
+      <RAreaChart data={data}>
+        {isGradient && (
+          <defs>
+            {series.map((key) => (
+              <linearGradient
+                key={key}
+                id={`gradient-${key}`}
+                x1="0"
+                y1="0"
+                x2="0"
+                y2="1"
+              >
+                <stop
+                  offset="5%"
+                  stopColor={`var(--color-${key})`}
+                  stopOpacity={0.8}
+                />
+                <stop
+                  offset="95%"
+                  stopColor={`var(--color-${key})`}
+                  stopOpacity={0.1}
+                />
+              </linearGradient>
+            ))}
+          </defs>
+        )}
+        <CartesianGrid vertical={false} />
+        <XAxis dataKey={categoryKey} tickLine={false} axisLine={false} />
+        <YAxis tickLine={false} axisLine={false} />
+        <ChartTooltip content={<ChartTooltipContent />} />
+        {series.length > 1 && <ChartLegend content={<ChartLegendContent />} />}
+        {series.map((key) => (
+          <Area
+            key={key}
+            dataKey={key}
+            fill={
+              isGradient ? `url(#gradient-${key})` : `var(--color-${key})`
+            }
+            stroke={`var(--color-${key})`}
+            stackId={isStacked ? "a" : undefined}
+          />
+        ))}
+      </RAreaChart>
+    </ChartContainer>
+  );
+}

package/src/audio-player.tsx

@@ -0,0 +1,74 @@
+"use client";
+import { useRef, useState } from "react";
+import { Play, Pause } from "lucide-react";
+import { IconButton } from "@lindaui/ui/icon-button";
+
+export interface AudioPlayerProps {
+  src: string;
+  durationSeconds?: number;
+  playLabel?: string;
+  pauseLabel?: string;
+}
+
+function formatDuration(seconds: number): string {
+  const m = Math.floor(seconds / 60);
+  const s = Math.floor(seconds % 60);
+  return `${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
+}
+
+// Alturas deterministas (mismo seed que recording-overlay) — barra estática,
+// no una waveform real del audio.
+const BAR_HEIGHTS = Array.from({ length: 24 }, (_, i) => {
+  const seed = Math.abs(Math.sin(i * 12.9898) * 43758.5453) % 1;
+  return Math.max(20, Math.round((0.25 + seed * 0.75) * 100));
+});
+
+/** Reproductor de nota de voz genérico: play/pause + waveform estática + duración. */
+export function AudioPlayer({
+  src,
+  durationSeconds,
+  playLabel = "Reproducir",
+  pauseLabel = "Pausar",
+}: AudioPlayerProps) {
+  const audioRef = useRef<HTMLAudioElement>(null);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [currentTime, setCurrentTime] = useState(0);
+
+  const toggle = () => {
+    const audio = audioRef.current;
+    if (!audio) return;
+    if (isPlaying) audio.pause();
+    else void audio.play();
+  };
+
+  return (
+    <div className="flex items-center gap-2.5 rounded-full bg-secondary px-2 py-1.5">
+      <audio
+        ref={audioRef}
+        src={src}
+        onPlay={() => setIsPlaying(true)}
+        onPause={() => setIsPlaying(false)}
+        onEnded={() => setIsPlaying(false)}
+        onTimeUpdate={(e) => setCurrentTime(e.currentTarget.currentTime)}
+      >
+        <track kind="captions" />
+      </audio>
+      <IconButton
+        aria-label={isPlaying ? pauseLabel : playLabel}
+        onPress={toggle}
+        variant="ghost"
+        size="sm"
+      >
+        {isPlaying ? <Pause className="size-4" /> : <Play className="size-4" />}
+      </IconButton>
+      <div className="flex h-6 flex-1 items-end gap-[2px]" aria-hidden="true">
+        {BAR_HEIGHTS.map((h, i) => (
+          <span key={i} className="w-[2.5px] rounded-full bg-primary/60" style={{ height: `${h}%` }} />
+        ))}
+      </div>
+      <span className="font-mono text-[11px] tabular-nums text-muted-foreground">
+        {formatDuration(durationSeconds ?? currentTime)}
+      </span>
+    </div>
+  );
+}

package/src/auth-layout.tsx

@@ -0,0 +1,132 @@
+"use client";
+import type { ReactNode } from "react";
+
+// Block: shell de autenticación split-screen. Panel de marca (solo desktop,
+// fondo oscuro estilo `viewer`) + panel de contenido (logo compacto en mobile,
+// título, descripción, slot para el form y footer). Mobile-first: stackea, el
+// panel de marca se oculta y aparece el logo compacto. API por slots, genérica
+// (sin acoplar dominio); el `children` recibe el form (ej. <LoginForm/>).
+
+export interface AuthFeature {
+  icon?: ReactNode;
+  label: string;
+}
+
+export interface AuthLayoutProps {
+  /** Marca (logo) del panel de marca (desktop). */
+  logo?: ReactNode;
+  /** Logo compacto del panel de contenido (mobile). Si no se pasa, usa `logo`. */
+  compactLogo?: ReactNode;
+  /** Contenido del panel de marca (solo desktop). Si no hay headline ni
+   *  features, el panel de marca se omite y queda solo el form centrado. */
+  brandHeadline?: ReactNode;
+  brandDescription?: ReactNode;
+  brandFeatures?: AuthFeature[];
+  brandFooter?: ReactNode;
+  /** Panel de contenido. */
+  title: ReactNode;
+  description?: ReactNode;
+  /** Nota al pie del panel de contenido (ej. "sesión protegida"). */
+  footer?: ReactNode;
+  /** El formulario u otro contenido de auth. */
+  children: ReactNode;
+}
+
+export function AuthLayout({
+  logo,
+  compactLogo,
+  brandHeadline,
+  brandDescription,
+  brandFeatures,
+  brandFooter,
+  title,
+  description,
+  footer,
+  children,
+}: AuthLayoutProps) {
+  const hasBrand =
+    brandHeadline != null ||
+    brandDescription != null ||
+    (brandFeatures != null && brandFeatures.length > 0) ||
+    brandFooter != null;
+
+  return (
+    <div
+      className={
+        hasBrand
+          ? "flex min-h-dvh flex-col lg:grid lg:grid-cols-[1.05fr_0.95fr]"
+          : "flex min-h-dvh flex-col"
+      }
+    >
+      {/* Panel de marca: solo desktop */}
+      {hasBrand && (
+        <div
+          className="relative hidden flex-col justify-between bg-viewer-bg p-12 text-viewer-foreground lg:flex"
+          style={{
+            backgroundImage:
+              "repeating-linear-gradient(135deg, color-mix(in oklch, var(--viewer-foreground) 3%, transparent) 0 2px, transparent 2px 13px)",
+          }}
+        >
+          {logo && <div className="flex items-center gap-2.5">{logo}</div>}
+
+          <div className="max-w-md">
+            {brandHeadline && (
+              <h1 className="text-3xl font-semibold leading-tight tracking-tight">
+                {brandHeadline}
+              </h1>
+            )}
+            {brandDescription && (
+              <p className="mt-4 text-sm leading-relaxed opacity-70">{brandDescription}</p>
+            )}
+            {brandFeatures && brandFeatures.length > 0 && (
+              <div className="mt-7 flex gap-6">
+                {brandFeatures.map((f, i) => (
+                  <div key={i} className="flex items-center gap-2 text-sm opacity-80">
+                    {f.icon}
+                    {f.label}
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+
+          {brandFooter ? (
+            <p className="text-xs opacity-40">{brandFooter}</p>
+          ) : (
+            <span aria-hidden />
+          )}
+        </div>
+      )}
+
+      {/* Panel de contenido */}
+      <div className="flex flex-1 flex-col justify-between p-6 pt-[max(env(safe-area-inset-top),2rem)] lg:justify-center lg:p-10 lg:pb-10">
+        <div className="mx-auto w-full max-w-[360px]">
+          {/* Logo compacto del panel de contenido. Con panel de marca: solo en
+              mobile (desktop ya lo tiene en la marca). Sin marca: siempre. */}
+          {(compactLogo ?? logo) && hasBrand && (
+            <div className="mb-10 flex items-center gap-2.5 lg:hidden">
+              {compactLogo ?? logo}
+            </div>
+          )}
+          {(compactLogo ?? logo) && !hasBrand && (
+            <div className="mb-10 flex items-center gap-2.5">{compactLogo ?? logo}</div>
+          )}
+
+          <h2 className="mb-1.5 text-[28px] font-semibold tracking-tight lg:text-2xl">
+            {title}
+          </h2>
+          {description && (
+            <p className="mb-7 text-sm text-muted-foreground">{description}</p>
+          )}
+          {children}
+        </div>
+
+        {footer && (
+          <div className="mx-auto mt-10 flex w-full max-w-[360px] items-center justify-center gap-1.5 text-xs text-muted-foreground lg:mt-6">
+            {footer}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/auth-provider.tsx

@@ -0,0 +1,29 @@
+"use client";
+import { createContext, useContext, type ReactNode } from "react";
+
+export interface AuthUser {
+  name?: string;
+  [key: string]: unknown;
+}
+
+interface AuthContextValue {
+  user: AuthUser | null;
+}
+
+const AuthContext = createContext<AuthContextValue>({ user: null });
+
+export function AuthProvider({
+  user,
+  children,
+}: {
+  user: AuthUser | null;
+  children: ReactNode;
+}) {
+  return (
+    <AuthContext.Provider value={{ user }}>{children}</AuthContext.Provider>
+  );
+}
+
+export function useAuth(): { user: AuthUser | null } {
+  return useContext(AuthContext);
+}

package/src/bar-chart.tsx

@@ -0,0 +1,78 @@
+"use client";
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
+  type ChartConfig,
+} from "@lindaui/ui/chart";
+import {
+  BarChart as RBarChart,
+  Bar,
+  CartesianGrid,
+  XAxis,
+  YAxis,
+} from "recharts";
+
+export interface BarChartProps {
+  data: Array<Record<string, string | number>>;
+  config: ChartConfig;
+  categoryKey: string;
+  series: string[];
+  variant?: "default" | "stacked" | "grouped" | "horizontal";
+  className?: string;
+}
+
+export function BarChart({
+  data,
+  config,
+  categoryKey,
+  series,
+  variant = "default",
+  className,
+}: BarChartProps) {
+  const isHorizontal = variant === "horizontal";
+  const isStacked = variant === "stacked";
+
+  return (
+    <ChartContainer config={config} className={className}>
+      <RBarChart
+        data={data}
+        layout={isHorizontal ? "vertical" : "horizontal"}
+      >
+        <CartesianGrid
+          vertical={isHorizontal}
+          horizontal={!isHorizontal}
+        />
+        {isHorizontal ? (
+          <>
+            <XAxis type="number" tickLine={false} axisLine={false} />
+            <YAxis
+              dataKey={categoryKey}
+              type="category"
+              tickLine={false}
+              axisLine={false}
+            />
+          </>
+        ) : (
+          <>
+            <XAxis dataKey={categoryKey} tickLine={false} axisLine={false} />
+            <YAxis tickLine={false} axisLine={false} />
+          </>
+        )}
+        <ChartTooltip content={<ChartTooltipContent />} />
+        {series.length > 1 && <ChartLegend content={<ChartLegendContent />} />}
+        {series.map((key) => (
+          <Bar
+            key={key}
+            dataKey={key}
+            fill={`var(--color-${key})`}
+            stackId={isStacked ? "a" : undefined}
+            radius={4}
+          />
+        ))}
+      </RBarChart>
+    </ChartContainer>
+  );
+}

package/src/channel-settings.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import { Tabs } from "@lindaui/ui/compound";
+import { useState, type ReactNode } from "react";
+
+export interface SettingsChannel {
+  id: string;
+  label: ReactNode;
+  status: ReactNode;
+  icon?: ReactNode;
+  isDisabled?: boolean;
+  panel: ReactNode | ((isSelected: boolean) => ReactNode);
+  /** Optional mounting order, independent of the tab order. */
+  panelOrder?: number;
+}
+
+export interface ChannelSettingsProps {
+  channels: readonly SettingsChannel[];
+  navigationLabel: string;
+  selected?: string;
+  defaultSelected?: string;
+  onSelect?: (id: string) => void;
+  className?: string;
+  /** Two channels retain the original two-column layout; other counts adapt automatically. */
+  listClassName?: string;
+}
+
+/** Every panel stays mounted so switching channels preserves form and challenge state. */
+export function ChannelSettings({
+  channels,
+  navigationLabel,
+  selected,
+  defaultSelected,
+  onSelect,
+  className = "w-full gap-5",
+  listClassName,
+}: ChannelSettingsProps) {
+  const [localSelected, setLocalSelected] = useState(defaultSelected ?? channels[0]?.id);
+  const current = selected ?? localSelected;
+
+  return (
+    <Tabs
+      className={className}
+      onSelectionChange={(key) => {
+        const id = String(key);
+        if (selected === undefined) setLocalSelected(id);
+        onSelect?.(id);
+      }}
+      selectedKey={current}
+      variant="secondary"
+    >
+      <Tabs.ListContainer className="w-full">
+        <Tabs.List
+          aria-label={navigationLabel}
+          className={listClassName ?? (channels.length === 2 ? "grid w-full grid-cols-2" : "grid w-full auto-cols-fr grid-flow-col")}
+        >
+          {channels.map(({ id, label, status, icon, isDisabled }) => (
+            <Tabs.Tab className="h-auto min-w-0 justify-start gap-3 px-3 py-4" id={id} isDisabled={isDisabled} key={id}>
+              {icon}
+              <span className="min-w-0 text-left">
+                <span className="block font-semibold text-sm">{label}</span>
+                <span className="block whitespace-normal font-normal text-muted text-xs">{status}</span>
+              </span>
+              <Tabs.Indicator />
+            </Tabs.Tab>
+          ))}
+        </Tabs.List>
+      </Tabs.ListContainer>
+      {[...channels].sort((a, b) => (a.panelOrder ?? 0) - (b.panelOrder ?? 0)).map(({ id, panel }) => (
+        <Tabs.Panel className={current === id ? "" : "hidden"} id={id} key={id} shouldForceMount>
+          {typeof panel === "function" ? panel(current === id) : panel}
+        </Tabs.Panel>
+      ))}
+    </Tabs>
+  );
+}

package/src/chart-card.tsx

@@ -0,0 +1,45 @@
+import type { ReactNode } from "react";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+} from "@lindaui/ui/card";
+
+export interface ChartCardProps {
+  title: ReactNode;
+  description?: ReactNode;
+  action?: ReactNode;
+  footer?: ReactNode;
+  children: ReactNode;
+  className?: string;
+}
+
+export function ChartCard({
+  title,
+  description,
+  action,
+  footer,
+  children,
+  className = "",
+}: ChartCardProps) {
+  return (
+    <Card className={className}>
+      <CardHeader className="pb-2">
+        <div className="flex items-start justify-between gap-4">
+          <div className="min-w-0 flex-1">
+            <CardTitle>{title}</CardTitle>
+            {description && (
+              <CardDescription className="mt-1">{description}</CardDescription>
+            )}
+          </div>
+          {action && <div className="shrink-0">{action}</div>}
+        </div>
+      </CardHeader>
+      <CardContent className="pt-0">{children}</CardContent>
+      {footer && <CardFooter>{footer}</CardFooter>}
+    </Card>
+  );
+}