@lindaui/blocks 0.4.2 → 0.5.0

package/src/recording-overlay.tsx

@@ -0,0 +1,159 @@
+"use client";
+import { Mic, AlertCircle } from "lucide-react";
+import type { CSSProperties } from "react";
+
+export interface RecordingOverlayProps {
+  label: string;
+  description?: string;
+  elapsed: number;
+  error?: string | null;
+  onStop: () => void;
+  onCancel: () => void;
+  stopLabel?: string;
+  errorTitle?: string;
+  backLabel?: string;
+  /**
+   * `overlay` (default) covers its container on a fixed dark surface (`viewer-*`
+   * tokens) — for use over media. `inline` drops the absolute positioning and the
+   * forced dark background, filling its container and inheriting the panel's
+   * surface; its text is token-driven so it stays legible on a light or dark
+   * panel. Content is otherwise identical.
+   */
+  variant?: "overlay" | "inline";
+}
+
+/** Per-variant surface/text tokens so both read on their respective background. */
+function variantTokens(variant: "overlay" | "inline") {
+  if (variant === "inline") {
+    return {
+      root: "ti-fade flex h-full flex-col items-center justify-center gap-5 p-6 sm:gap-7",
+      text: "text-foreground",
+      muted: "text-muted-foreground",
+      // solid action button on an adaptive panel
+      solid: "bg-foreground text-background",
+    };
+  }
+  return {
+    root: "ti-fade absolute inset-0 z-[60] flex flex-col items-center justify-center gap-5 bg-viewer-bg p-8 text-viewer-foreground sm:gap-7",
+    text: "text-viewer-foreground",
+    muted: "text-viewer-foreground/70",
+    solid: "bg-white text-[oklch(0.16_0.02_240)]",
+  };
+}
+
+function fmtTime(sec: number): string {
+  const m = Math.floor(sec / 60);
+  const s = sec % 60;
+  return `${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
+}
+
+function Waveform() {
+  return (
+    <div
+      className="flex items-end justify-center gap-[3px]"
+      style={{ height: 48, width: "min(80%, 280px)" }}
+    >
+      {Array.from({ length: 40 }).map((_, i) => {
+        const seed = Math.abs(Math.sin(i * 12.9898) * 43758.5453) % 1;
+        const max = Math.max(6, (0.18 + seed * 0.82) * 48);
+        return (
+          <span
+            key={i}
+            className="rounded-full bg-destructive"
+            style={
+              {
+                width: 3,
+                animation: `ti-wf 0.9s ease-in-out ${(i % 11) * 0.07}s infinite`,
+                "--wfmax": `${max}px`,
+              } as CSSProperties
+            }
+          />
+        );
+      })}
+    </div>
+  );
+}
+
+export function RecordingOverlay({
+  label,
+  description,
+  elapsed,
+  error,
+  onStop,
+  onCancel,
+  stopLabel = "Detener",
+  errorTitle = "No se pudo acceder al micrófono",
+  backLabel = "Volver",
+  variant = "overlay",
+}: RecordingOverlayProps) {
+  const t = variantTokens(variant);
+
+  if (error) {
+    return (
+      <div className={`${t.root} text-center`}>
+        <div className="grid h-16 w-16 place-items-center rounded-full bg-destructive/15 text-destructive">
+          <AlertCircle className="h-8 w-8" />
+        </div>
+        <div className="max-w-[280px]">
+          <p className={`text-base font-semibold ${t.text}`}>{errorTitle}</p>
+          <p className={`mt-2 text-sm ${t.muted}`}>{error}</p>
+        </div>
+        <button
+          type="button"
+          onClick={onCancel}
+          className={`h-12 rounded-2xl px-6 text-[15px] font-semibold ${t.solid}`}
+        >
+          {backLabel}
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div className={t.root}>
+      <div className="relative grid h-[132px] w-[132px] place-items-center sm:h-[168px] sm:w-[168px]">
+        <span className="ti-rec-pulse absolute h-[132px] w-[132px] rounded-full bg-destructive/15 sm:h-[168px] sm:w-[168px]" />
+        <span
+          className="ti-rec-pulse absolute h-[132px] w-[132px] rounded-full bg-destructive/15 sm:h-[168px] sm:w-[168px]"
+          style={{ animationDelay: "0.9s" }}
+        />
+        <div className="grid h-[84px] w-[84px] place-items-center rounded-full bg-destructive text-white shadow-[0_10px_30px_-6px_var(--destructive)] sm:h-[108px] sm:w-[108px]">
+          <Mic className="h-8 w-8 sm:h-[42px] sm:w-[42px]" />
+        </div>
+      </div>
+
+      <div className="text-center">
+        <div className="inline-flex items-center gap-2">
+          <span className="ti-rec-blink h-2.5 w-2.5 rounded-full bg-destructive" />
+          <span className="text-sm font-semibold tracking-wide text-destructive">
+            {label}
+          </span>
+        </div>
+        <div
+          className={`mt-2 font-mono text-4xl font-medium tabular-nums ${t.text} sm:text-[46px]`}
+        >
+          {fmtTime(elapsed)}
+        </div>
+      </div>
+
+      <Waveform />
+
+      {description && (
+        <p
+          className={`max-w-[270px] text-center text-sm leading-relaxed ${t.muted}`}
+        >
+          {description}
+        </p>
+      )}
+
+      <button
+        type="button"
+        onClick={onStop}
+        className={`mt-1.5 grid h-16 w-16 place-items-center rounded-full ${t.solid} shadow-[0_6px_20px_-4px_rgba(0,0,0,0.5)]`}
+        aria-label={stopLabel}
+      >
+        <span className="h-6 w-6 rounded-md bg-destructive" />
+      </button>
+    </div>
+  );
+}

package/src/save-bar.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { Button, Spinner } from "@lindaui/ui/compound";
+import type { ReactNode } from "react";
+
+export interface SaveBarProps {
+  dirty: boolean;
+  saving: boolean;
+  form: string;
+  embedded?: boolean;
+  labels: { pending: ReactNode; upToDate: ReactNode; submit: ReactNode };
+}
+
+/** Submit an existing form by id without owning its data or persistence. */
+export function SaveBar({ dirty, saving, form, embedded = false, labels }: SaveBarProps) {
+  return (
+    <div className={embedded
+      ? "sticky bottom-0 z-10 border-border border-t bg-surface px-4 py-3 lg:px-6"
+      : "fixed inset-x-0 bottom-24 z-40 border-border border-y bg-surface px-4 py-3 lg:static lg:border-b-0 lg:px-8"}>
+      <div className="mx-auto flex max-w-4xl items-center justify-between gap-3">
+        <p aria-live="polite" className="text-muted text-sm">{dirty ? labels.pending : labels.upToDate}</p>
+        <Button
+          className="shrink-0 whitespace-nowrap"
+          form={form}
+          isDisabled={!dirty || saving}
+          isPending={saving}
+          type="submit"
+          variant="primary"
+        >
+          {({ isPending }) => <>{isPending && <Spinner color="current" size="sm" />}{labels.submit}</>}
+        </Button>
+      </div>
+    </div>
+  );
+}

package/src/settings-layout.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import { Button } from "@lindaui/ui/compound";
+import { cn } from "@lindaui/ui/cn";
+import type { ReactNode } from "react";
+
+export interface SettingsLayoutSection<Id extends string = string> {
+  id: Id;
+  label: string;
+  icon?: ReactNode;
+}
+
+export interface SettingsLayoutProps<Id extends string = string> {
+  sections: readonly SettingsLayoutSection<Id>[];
+  selected: Id;
+  onSelect: (id: Id) => void;
+  panels: Record<Id, ReactNode>;
+  footer?: ReactNode;
+  navigationLabel: string;
+  title?: ReactNode;
+  compact?: boolean;
+  idPrefix?: string;
+}
+
+/** Responsive section navigation with mounted, hidden panels and a footer slot. */
+export function SettingsLayout<Id extends string>({
+  sections,
+  panels,
+  selected,
+  onSelect,
+  footer,
+  navigationLabel,
+  title,
+  compact = false,
+  idPrefix = "settings",
+}: SettingsLayoutProps<Id>) {
+  return (
+    <div className={cn("mx-auto w-full max-w-5xl", compact ? "h-full p-0" : "p-4 pb-28 lg:p-8")}>
+      {title ? <h1 className="mb-6 font-semibold text-2xl tracking-tight">{title}</h1> : null}
+      <div
+        className={cn(
+          "overflow-hidden rounded-2xl border border-border bg-surface lg:grid lg:grid-cols-[220px_minmax(0,1fr)]",
+          compact ? "h-full min-h-0 rounded-none border-0" : "lg:min-h-[620px]",
+        )}
+      >
+        <nav
+          aria-label={navigationLabel}
+          className="min-h-0 min-w-0 overflow-x-auto border-border border-b bg-surface-secondary p-2 lg:overflow-y-auto lg:border-r lg:border-b-0 lg:p-3"
+        >
+          <div className="flex w-max gap-1 lg:w-full lg:flex-col">
+            {sections.map(({ id, icon, label }) => (
+              <Button
+                aria-controls={`${idPrefix}-${id}`}
+                aria-pressed={selected === id}
+                className={`shrink-0 justify-start gap-2 whitespace-nowrap rounded-lg px-3 text-sm lg:w-full ${selected === id ? "bg-default font-semibold text-foreground" : "text-muted"}`}
+                key={id}
+                onPress={() => onSelect(id)}
+                variant="ghost"
+              >
+                {icon}
+                {label}
+              </Button>
+            ))}
+          </div>
+        </nav>
+        <div className="flex min-h-0 min-w-0 flex-col">
+          <div className="min-h-0 flex-1 overflow-y-auto p-5 lg:p-8">
+            {sections.map(({ id, label }) => (
+              <section aria-label={label} hidden={selected !== id} id={`${idPrefix}-${id}`} key={id}>
+                {panels[id]}
+              </section>
+            ))}
+          </div>
+          {footer}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/source-selector.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import { Button, Dropdown, Label, Spinner } from "@lindaui/ui/compound";
+import { ChevronDown } from "lucide-react";
+import type { ReactNode } from "react";
+
+export interface SourceSelectorOption<Source extends string = string> {
+  key: Source;
+  label: string;
+  triggerLabel?: string;
+  icon?: ReactNode;
+  triggerIcon?: ReactNode;
+}
+
+export interface SourceSelectorProps<Source extends string = string> {
+  source: Source;
+  options: readonly SourceSelectorOption<Source>[];
+  onSourceChange: (source: Source) => void;
+  isLoading?: boolean;
+  ariaLabel?: string;
+}
+
+/** Controlled selection; option labels and icons are supplied by the product. */
+export function SourceSelector<Source extends string = string>({
+  source,
+  options,
+  onSourceChange,
+  isLoading,
+  ariaLabel = "Change source",
+}: SourceSelectorProps<Source>) {
+  const current = options.find((option) => option.key === source);
+
+  return (
+    <Dropdown>
+      <Button
+        className="h-6 min-w-0 gap-1 px-2 text-[10px]"
+        isPending={isLoading}
+        size="sm"
+        variant="tertiary"
+      >
+        {({ isPending }) => (
+          <>
+            {isPending ? <Spinner color="current" size="sm" /> : current?.triggerIcon ?? current?.icon}
+            {current?.triggerLabel ?? current?.label ?? source}
+            <ChevronDown size={12} />
+          </>
+        )}
+      </Button>
+      <Dropdown.Popover className="rounded-[14px]">
+        <Dropdown.Menu
+          aria-label={ariaLabel}
+          className="[&_[data-slot=menu-item]]:rounded-lg"
+          onAction={(key) => {
+            const option = options.find((item) => item.key === key);
+            if (option) onSourceChange(option.key);
+          }}
+          selectedKeys={[source]}
+          selectionMode="single"
+        >
+          {options.map((option) => (
+            <Dropdown.Item className="text-sm" id={option.key} key={option.key} textValue={option.label}>
+              <Dropdown.ItemIndicator />
+              {option.icon}
+              <Label>{option.label}</Label>
+            </Dropdown.Item>
+          ))}
+        </Dropdown.Menu>
+      </Dropdown.Popover>
+    </Dropdown>
+  );
+}

package/src/split-workspace.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { useIsDesktop } from "@lindaui/ui/use-media-query";
+import { WorkspaceBackButton } from "./workspace-back-button";
+
+export interface SplitWorkspaceProps {
+  media: ReactNode;
+  panel: ReactNode;
+  overlay?: ReactNode;
+  /**
+   * Custom back control (escape hatch). Wins over `backHref`/`backLabel`.
+   * Prefer `backHref`/`backLabel` — the default renders a legible pill over
+   * any media without the consumer having to guarantee contrast.
+   */
+  back?: ReactNode;
+  backHref?: string;
+  backLabel?: ReactNode;
+}
+
+export function SplitWorkspace({
+  media,
+  panel,
+  overlay,
+  back,
+  backHref,
+  backLabel = "Volver",
+}: SplitWorkspaceProps) {
+  const isDesktop = useIsDesktop();
+  const backNode =
+    back ??
+    (backHref != null ? (
+      <WorkspaceBackButton href={backHref} label={backLabel} />
+    ) : null);
+
+  return (
+    <div className="relative flex-1 min-h-0 overflow-hidden">
+      {isDesktop ? (
+        /* Desktop: two-column grid */
+        <div className="grid grid-cols-2 h-full">
+          <div
+            className="relative border-r overflow-hidden"
+            style={{ borderColor: "var(--viewer-border)" }}
+          >
+            {media}
+          </div>
+          <div className="flex flex-col bg-background h-full min-h-0 overflow-hidden px-0 sm:px-0">
+            {panel}
+          </div>
+        </div>
+      ) : (
+        /* Mobile: media top, panel stacked below */
+        <div className="flex flex-col h-full">
+          <div className="relative min-h-[40%] flex-1 min-h-0 overflow-hidden">{media}</div>
+          <div className="rounded-t-2xl bg-background shadow-lg overflow-y-auto max-h-[65%] sm:max-h-[60%]">
+            {panel}
+          </div>
+        </div>
+      )}
+
+      {/* back slot — legibility scrim + safe-area, top-left over the media */}
+      {backNode && (
+        <div className="pointer-events-none absolute inset-x-0 top-0 z-40 bg-linear-to-b from-black/25 to-transparent p-3 pt-[max(0.75rem,env(safe-area-inset-top))] pl-[max(0.875rem,env(safe-area-inset-left))]">
+          <div className="pointer-events-auto inline-block">{backNode}</div>
+        </div>
+      )}
+
+      {/* overlay */}
+      {overlay && (
+        <div className="absolute inset-0 z-[60]">{overlay}</div>
+      )}
+    </div>
+  );
+}

package/src/stat-card.tsx

@@ -0,0 +1,166 @@
+"use client";
+import type { ReactNode } from "react";
+import { TrendingUp, TrendingDown, Minus } from "lucide-react";
+import { Card, CardHeader, CardTitle, CardContent } from "@lindaui/ui/card";
+import { Badge } from "@lindaui/ui/badge";
+import { Skeleton } from "@lindaui/ui/skeleton";
+import { ChartContainer, type ChartConfig } from "@lindaui/ui/chart";
+import { LineChart, Line } from "recharts";
+
+export interface StatCardDelta {
+  value: string;
+  trend: "up" | "down" | "neutral";
+}
+
+export interface StatCardSparkline {
+  data: Array<Record<string, number>>;
+  dataKey: string;
+  color?: string;
+}
+
+export type StatCardTone = "primary" | "success" | "warning" | "danger" | "neutral";
+
+export interface StatCardProps {
+  label: ReactNode;
+  value: ReactNode;
+  delta?: StatCardDelta;
+  description?: ReactNode;
+  icon?: ReactNode;
+  sparkline?: StatCardSparkline;
+  /** "featured" = icono prominente arriba-izquierda + delta arriba-derecha +
+   *  valor grande + label abajo (estilo dashboard). Default = icono inline. */
+  variant?: "default" | "featured";
+  /** Tinte del icon box (y del valor en featured). Solo aplica a featured. */
+  tone?: StatCardTone;
+  className?: string;
+  /** Reemplaza value/delta/description por skeletons; label e icon quedan visibles. */
+  loading?: boolean;
+}
+
+const trendIcon = {
+  up: <TrendingUp className="h-3 w-3" />,
+  down: <TrendingDown className="h-3 w-3" />,
+  neutral: <Minus className="h-3 w-3" />,
+};
+
+const trendVariant: Record<StatCardDelta["trend"], "success" | "danger" | "default"> = {
+  up: "success",
+  down: "danger",
+  neutral: "default",
+};
+
+// Tonos via arbitrary values sobre los tokens canónicos (robustos: no dependen
+// de que HeroUI exponga text-success/text-warning como utilities).
+const toneStyles: Record<StatCardTone, { box: string; value: string }> = {
+  primary: { box: "bg-[var(--primary)]/10 text-[var(--primary)]", value: "text-[var(--primary)]" },
+  success: { box: "bg-[var(--success)]/12 text-[var(--success)]", value: "text-[var(--success)]" },
+  warning: { box: "bg-[var(--warning)]/12 text-[var(--warning)]", value: "text-[var(--warning)]" },
+  danger: { box: "bg-[var(--destructive)]/10 text-[var(--destructive)]", value: "text-[var(--destructive)]" },
+  neutral: { box: "bg-secondary text-muted-foreground", value: "text-foreground" },
+};
+
+function DeltaBadge({ delta }: { delta: StatCardDelta }) {
+  return (
+    <Badge variant={trendVariant[delta.trend]}>
+      <span className="flex items-center gap-0.5">
+        {trendIcon[delta.trend]}
+        {delta.value}
+      </span>
+    </Badge>
+  );
+}
+
+function Sparkline({ sparkline }: { sparkline: StatCardSparkline }) {
+  const config: ChartConfig = {
+    [sparkline.dataKey]: { color: sparkline.color ?? "var(--chart-1)" },
+  };
+  return (
+    <ChartContainer config={config} className="mt-3 h-12 w-full">
+      <LineChart data={sparkline.data}>
+        <Line
+          type="monotone"
+          dataKey={sparkline.dataKey}
+          stroke={sparkline.color ?? "var(--chart-1)"}
+          strokeWidth={2}
+          dot={false}
+        />
+      </LineChart>
+    </ChartContainer>
+  );
+}
+
+export function StatCard({
+  label,
+  value,
+  delta,
+  description,
+  icon,
+  sparkline,
+  variant = "default",
+  tone = "neutral",
+  className = "",
+  loading = false,
+}: StatCardProps) {
+  if (variant === "featured") {
+    const t = toneStyles[tone];
+    return (
+      <Card className={className}>
+        <CardContent className="p-5">
+          <div className="flex items-start justify-between gap-2">
+            {icon && (
+              <div className={`grid size-11 shrink-0 place-items-center rounded-xl ${t.box}`}>
+                {icon}
+              </div>
+            )}
+            {loading ? <Skeleton className="h-5 w-14 rounded-full" /> : delta && <DeltaBadge delta={delta} />}
+          </div>
+          {loading ? (
+            <Skeleton className="mt-4 h-8 w-20" />
+          ) : (
+            <div className={`mt-4 text-3xl font-semibold tabular-nums ${t.value}`}>{value}</div>
+          )}
+          <div className="mt-1 text-sm text-muted-foreground">{label}</div>
+          {loading ? (
+            <Skeleton className="mt-1.5 h-3 w-24" />
+          ) : (
+            description && <p className="mt-1.5 text-xs text-muted-foreground">{description}</p>
+          )}
+          {sparkline && <Sparkline sparkline={sparkline} />}
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card className={className}>
+      <CardHeader className="pb-2">
+        <div className="flex items-center justify-between gap-2">
+          <CardTitle className="text-sm font-medium text-muted-foreground">{label}</CardTitle>
+          {icon && <div className="h-4 w-4 text-muted-foreground">{icon}</div>}
+        </div>
+      </CardHeader>
+      <CardContent className="pt-0">
+        {loading ? (
+          <Skeleton className="h-7 w-24" />
+        ) : (
+          <div className="text-2xl font-semibold tabular-nums sm:text-3xl">{value}</div>
+        )}
+        {loading ? (
+          <Skeleton className="mt-1.5 h-4 w-14 rounded-full" />
+        ) : (
+          delta && (
+            <div className="mt-1 flex items-center gap-1">
+              <DeltaBadge delta={delta} />
+            </div>
+          )
+        )}
+        {loading ? (
+          <Skeleton className="mt-1.5 h-3 w-28" />
+        ) : (
+          description && <p className="mt-1.5 text-xs text-muted-foreground">{description}</p>
+        )}
+        {sparkline && <Sparkline sparkline={sparkline} />}
+      </CardContent>
+    </Card>
+  );
+}

package/src/stats-grid.tsx

@@ -0,0 +1,23 @@
+import type { ReactNode } from "react";
+
+export interface StatsGridProps {
+  children: ReactNode;
+  columns?: 2 | 3 | 4;
+  className?: string;
+}
+
+const lgColsClass: Record<2 | 3 | 4, string> = {
+  2: "lg:grid-cols-2",
+  3: "lg:grid-cols-3",
+  4: "lg:grid-cols-4",
+};
+
+export function StatsGrid({ children, columns = 4, className = "" }: StatsGridProps) {
+  return (
+    <div
+      className={`grid gap-4 grid-cols-1 sm:grid-cols-2 ${lgColsClass[columns]} ${className}`}
+    >
+      {children}
+    </div>
+  );
+}

package/src/status-filters.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { Badge, type BadgeColor } from "@lindaui/ui/compat";
+
+export interface StatusFiltersProps {
+  availableStatuses: string[];
+  colors?: Record<string, BadgeColor>;
+  counts?: Record<string, number>;
+  labels?: Record<string, string>;
+  onStatusToggle: (status: string) => void;
+  selectedStatuses: string[];
+}
+
+/** Controlled status chips; labels, colors and counts belong to the consumer. */
+export function StatusFilters({ availableStatuses, selectedStatuses, onStatusToggle, counts, labels, colors }: StatusFiltersProps) {
+  const handleToggle = (status: string) => () => onStatusToggle(status);
+  return <div className="flex flex-wrap gap-2">
+    {availableStatuses.map((status) => {
+      const isSelected = selectedStatuses.includes(status);
+      const count = counts?.[status] ?? 0;
+      return <button aria-pressed={isSelected} className="cursor-pointer transition-opacity hover:opacity-80" key={status} onClick={handleToggle(status)} type="button">
+        <Badge color={colors?.[status] ?? "default"} size="sm" variant={isSelected ? "solid" : "flat"}>
+          {labels?.[status] ?? status}{count > 0 ? ` (${count})` : ""}
+        </Badge>
+      </button>;
+    })}
+  </div>;
+}

package/src/stepper.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { ProgressBar } from "@lindaui/ui/compound";
+import type { ReactNode } from "react";
+
+export interface StepperProps {
+  /** Presentation only: the app supplies its own step/completion calculation. */
+  value: number;
+  label: string;
+  stepLabel?: ReactNode;
+  description?: ReactNode;
+  complete?: boolean;
+  variant?: "steps" | "compact";
+  className?: string;
+  formatValue?: (value: number) => ReactNode;
+}
+
+/** The progress presentation shared by onboarding steps and compact connection wizards. */
+export function Stepper({
+  value,
+  label,
+  stepLabel,
+  description,
+  complete = false,
+  variant = "steps",
+  className,
+  formatValue = (progress) => `${Math.round(progress)}%`,
+}: StepperProps) {
+  const progress = Number.isFinite(value) ? Math.max(0, Math.min(100, value)) : 0;
+  const compact = variant === "compact";
+  return (
+    <div className={className ?? (compact ? "mx-auto max-w-xs space-y-2" : "mb-6")}>
+      {!compact && (
+        <div className="mb-2 flex items-center justify-between font-bold text-muted text-xs uppercase tracking-widest">
+          <span>{stepLabel}</span>
+          <span>{formatValue(progress)}</span>
+        </div>
+      )}
+      <ProgressBar aria-label={label} color={complete ? "success" : "accent"} size="sm" value={progress}>
+        <ProgressBar.Track className={compact ? undefined : "rounded-full"}>
+          <ProgressBar.Fill className={compact ? undefined : "rounded-full"} />
+        </ProgressBar.Track>
+      </ProgressBar>
+      {description && <p className="text-muted text-xs">{description}</p>}
+    </div>
+  );
+}