@schandlergarcia/sf-web-components 1.9.28 → 1.9.30

package/src/components/library/heroui/Meter.tsx

@@ -1,13 +0,0 @@
-import * as React from "react";
-import { Meter } from "@heroui/react";
-
-export interface HeroUIMeterProps {
-  children?: React.ReactNode;
-  [key: string]: any;
-}
-
-export default function HeroUIMeter({ children, ...props }: HeroUIMeterProps) {
-  return <Meter {...props}>{children}</Meter>;
-}
-
-export { Meter };

package/src/components/library/heroui/Modal.tsx

@@ -1,35 +0,0 @@
-import { Modal } from "@heroui/react";
-import type { ModalProps } from "@heroui/react";
-
-/**
- * HeroUI v3 Modal — compound component.
- *
- * Sub-components via dot notation on the named `Modal` export:
- *   Modal.Backdrop, Modal.Container, Modal.Dialog,
- *   Modal.CloseTrigger, Modal.Header, Modal.Icon,
- *   Modal.Heading, Modal.Body, Modal.Footer
- *
- * @example
- *   import { Modal } from "@/components/library";
- *   <Modal>
- *     <Button>Open</Button>
- *     <Modal.Backdrop>
- *       <Modal.Container>
- *         <Modal.Dialog>
- *           <Modal.CloseTrigger />
- *           <Modal.Header><Modal.Heading>Title</Modal.Heading></Modal.Header>
- *           <Modal.Body>…</Modal.Body>
- *           <Modal.Footer>…</Modal.Footer>
- *         </Modal.Dialog>
- *       </Modal.Container>
- *     </Modal.Backdrop>
- *   </Modal>
- */
-export interface HeroUIModalProps extends ModalProps {}
-
-export default function HeroUIModal(props: HeroUIModalProps) {
-  return <Modal {...props} />;
-}
-
-export { Modal };
-export type { ModalProps };

package/src/components/library/heroui/Pagination.tsx

@@ -1,11 +0,0 @@
-import { Pagination } from "@heroui/react";
-import type { PaginationProps } from "@heroui/react";
-
-export interface HeroUIPaginationProps extends PaginationProps {}
-
-export default function HeroUIPagination(props: HeroUIPaginationProps) {
-  return <Pagination {...props} />;
-}
-
-export { Pagination };
-export type { PaginationProps };

package/src/components/library/heroui/Popover.tsx

@@ -1,95 +0,0 @@
-import * as React from "react";
-
-/**
- * HeroUI v3 Popover — simple popover for shadcn compatibility.
- * Using native HTML/CSS since HeroUI v3 doesn't have a Popover component.
- *
- * @example
- *   import { Popover, PopoverTrigger, PopoverContent } from "@/components/library";
- *   <Popover>
- *     <PopoverTrigger>Open</PopoverTrigger>
- *     <PopoverContent>Content</PopoverContent>
- *   </Popover>
- */
-export interface HeroUIPopoverProps extends React.HTMLAttributes<HTMLDivElement> {
-  children?: React.ReactNode;
-  open?: boolean;
-  onOpenChange?: (open: boolean) => void;
-}
-
-export default function HeroUIPopover({ children, open, onOpenChange, ...props }: HeroUIPopoverProps) {
-  const [isOpen, setIsOpen] = React.useState(false);
-  const isControlled = open !== undefined;
-  const actualOpen = isControlled ? open : isOpen;
-
-  const handleOpenChange = (newOpen: boolean) => {
-    if (!isControlled) setIsOpen(newOpen);
-    onOpenChange?.(newOpen);
-  };
-
-  return (
-    <div className="relative inline-block" {...props}>
-      {React.Children.map(children, (child) => {
-        if (React.isValidElement(child)) {
-          return React.cloneElement(child, { open: actualOpen, onOpenChange: handleOpenChange } as any);
-        }
-        return child;
-      })}
-    </div>
-  );
-}
-
-export const Popover = HeroUIPopover;
-
-export interface PopoverTriggerProps {
-  children?: React.ReactNode;
-  open?: boolean;
-  onOpenChange?: (open: boolean) => void;
-  asChild?: boolean;
-  [key: string]: any;
-}
-
-export const PopoverTrigger = ({ children, open, onOpenChange, asChild, ...props }: PopoverTriggerProps) => {
-  const handleClick = () => onOpenChange?.(!open);
-
-  // If asChild is true, clone the child element with the props
-  if (asChild && React.isValidElement(children)) {
-    return React.cloneElement(children, {
-      ...props,
-      onClick: handleClick,
-    } as any);
-  }
-
-  // Otherwise, wrap in a button
-  return (
-    <button type="button" onClick={handleClick} {...props}>
-      {children}
-    </button>
-  );
-};
-
-export interface PopoverContentProps extends React.HTMLAttributes<HTMLDivElement> {
-  children?: React.ReactNode;
-  open?: boolean;
-  align?: "start" | "center" | "end";
-  sideOffset?: number;
-}
-
-export const PopoverContent = ({ children, open, className = "", align = "center", sideOffset = 4, ...props }: PopoverContentProps) => {
-  if (!open) return null;
-
-  const alignClasses: Record<string, string> = {
-    start: "left-0",
-    center: "left-1/2 -translate-x-1/2",
-    end: "right-0"
-  };
-
-  return (
-    <div
-      className={`absolute z-50 mt-${sideOffset} w-72 rounded-md border border-slate-200 bg-white p-4 text-slate-900 shadow-md dark:border-slate-800 dark:bg-slate-900 dark:text-slate-50 ${alignClasses[align] || alignClasses.center} ${className}`}
-      {...props}
-    >
-      {children}
-    </div>
-  );
-};

package/src/components/library/heroui/ProgressBar.tsx

@@ -1,14 +0,0 @@
-import type { ReactNode } from "react";
-import { ProgressBar } from "@heroui/react";
-import type { ProgressBarProps } from "@heroui/react";
-
-export interface HeroUIProgressBarProps extends ProgressBarProps {
-  children?: ReactNode;
-}
-
-export default function HeroUIProgressBar({ children, ...props }: HeroUIProgressBarProps) {
-  return <ProgressBar {...props}>{children}</ProgressBar>;
-}
-
-export { ProgressBar };
-export type { ProgressBarProps };

package/src/components/library/heroui/ProgressCircle.tsx

@@ -1,14 +0,0 @@
-import type { ReactNode } from "react";
-import { ProgressCircle } from "@heroui/react";
-import type { ProgressCircleProps } from "@heroui/react";
-
-export interface HeroUIProgressCircleProps extends ProgressCircleProps {
-  children?: ReactNode;
-}
-
-export default function HeroUIProgressCircle({ children, ...props }: HeroUIProgressCircleProps) {
-  return <ProgressCircle {...props}>{children}</ProgressCircle>;
-}
-
-export { ProgressCircle };
-export type { ProgressCircleProps };

package/src/components/library/heroui/ScrollShadow.tsx

@@ -1,14 +0,0 @@
-import type { ReactNode } from "react";
-import { ScrollShadow } from "@heroui/react";
-import type { ScrollShadowProps } from "@heroui/react";
-
-export interface HeroUIScrollShadowProps extends ScrollShadowProps {
-  children?: ReactNode;
-}
-
-export default function HeroUIScrollShadow({ children, ...props }: HeroUIScrollShadowProps) {
-  return <ScrollShadow {...props}>{children}</ScrollShadow>;
-}
-
-export { ScrollShadow };
-export type { ScrollShadowProps };

package/src/components/library/heroui/Select.tsx

@@ -1,73 +0,0 @@
-import * as React from "react";
-import { Select as HeroSelect } from "@heroui/react";
-
-/**
- * HeroUI v3 Select wrapper with shadcn compatibility.
- *
- * Translates shadcn API to HeroUI:
- * - onValueChange -> onSelectionChange
- * - value -> selectedKeys
- */
-export interface HeroUISelectProps {
-  value?: string;
-  onValueChange?: (value: string) => void;
-  children?: React.ReactNode;
-  [key: string]: any;
-}
-
-export default function HeroUISelect({ value, onValueChange, children, ...props }: HeroUISelectProps) {
-  // Translate shadcn API to HeroUI API
-  const selectedKeys = value ? [value] : [];
-  const handleSelectionChange = (keys: any) => {
-    const selected = Array.from(keys)[0] as string;
-    onValueChange?.(selected || "");
-  };
-
-  const HeroSelectAny = HeroSelect as any;
-  return (
-    <HeroSelectAny
-      selectedKeys={selectedKeys}
-      onSelectionChange={handleSelectionChange}
-      {...props}
-    >
-      {children}
-    </HeroSelectAny>
-  );
-}
-
-// For direct HeroUI usage
-export const Select = HeroUISelect;
-
-// Shadcn-compatible subcomponents that just pass through children
-export interface SelectTriggerProps {
-  children?: React.ReactNode;
-  size?: string;
-  [key: string]: any;
-}
-
-export const SelectTrigger = ({ children }: SelectTriggerProps) => <>{children}</>;
-
-export interface SelectValueProps {
-  placeholder?: string;
-  [key: string]: any;
-}
-
-export const SelectValue = ({ placeholder }: SelectValueProps) => <span>{placeholder}</span>;
-
-export interface SelectContentProps {
-  children?: React.ReactNode;
-  [key: string]: any;
-}
-
-export const SelectContent = ({ children }: SelectContentProps) => <>{children}</>;
-
-export interface SelectItemProps {
-  value: string;
-  children?: React.ReactNode;
-  [key: string]: any;
-}
-
-export const SelectItem = ({ value, children, ...props }: SelectItemProps) => {
-  const HeroSelectAny = HeroSelect as any;
-  return <HeroSelectAny.Item key={value} {...props}>{children}</HeroSelectAny.Item>;
-};

package/src/components/library/heroui/Separator.tsx

@@ -1,11 +0,0 @@
-import { Separator } from "@heroui/react";
-import type { SeparatorProps } from "@heroui/react";
-
-export interface HeroUISeparatorProps extends SeparatorProps {}
-
-export default function HeroUISeparator(props: HeroUISeparatorProps) {
-  return <Separator {...props} />;
-}
-
-export { Separator };
-export type { SeparatorProps };

package/src/components/library/heroui/Skeleton.tsx

@@ -1,14 +0,0 @@
-import type { ReactNode } from "react";
-import { Skeleton } from "@heroui/react";
-import type { SkeletonProps } from "@heroui/react";
-
-export interface HeroUISkeletonProps extends SkeletonProps {
-  children?: ReactNode;
-}
-
-export default function HeroUISkeleton({ children, ...props }: HeroUISkeletonProps) {
-  return <Skeleton {...props}>{children}</Skeleton>;
-}
-
-export { Skeleton };
-export type { SkeletonProps };

package/src/components/library/heroui/Tabs.tsx

@@ -1,31 +0,0 @@
-import { Tabs } from "@heroui/react";
-
-/**
- * HeroUI v3 Tabs — compound component.
- *
- * Sub-components via dot notation on the named `Tabs` export:
- *   Tabs.List, Tabs.ListContainer, Tabs.Tab, Tabs.Panel,
- *   Tabs.Separator, Tabs.Indicator
- *
- * @example
- *   import { Tabs } from "@/components/library";
- *   <Tabs>
- *     <Tabs.List aria-label="Options">
- *       <Tabs.Tab id="overview">Overview</Tabs.Tab>
- *       <Tabs.Tab id="analytics">Analytics</Tabs.Tab>
- *     </Tabs.List>
- *     <Tabs.Panel id="overview">…</Tabs.Panel>
- *     <Tabs.Panel id="analytics">…</Tabs.Panel>
- *   </Tabs>
- */
-export interface HeroUITabsProps {
-  variant?: string;
-  [key: string]: any;
-}
-
-export default function HeroUITabs({ variant = "primary", ...props }: HeroUITabsProps) {
-  const TabsAny = Tabs as any;
-  return <TabsAny variant={variant} {...props} />;
-}
-
-export { Tabs };

package/src/components/library/heroui/Toast.tsx

@@ -1,28 +0,0 @@
-import { Toast, toast } from "@heroui/react";
-import type { ToastProps } from "@heroui/react";
-
-/**
- * HeroUI v3 Toast — notification system.
- *
- * SETUP: Add <Toast.Provider /> to your app root (_app.js).
- *
- * Then call the `toast` function from anywhere:
- *   toast("Event created");
- *   toast.success("Saved!");
- *   toast.warning("Check settings");
- *   toast.danger("Something failed");
- *   toast.promise(asyncFn(), { loading: "…", success: "Done", error: "Failed" });
- *
- * Sub-components via dot notation on the named `Toast` export:
- *   Toast.Provider, Toast.Indicator, Toast.Content,
- *   Toast.Title, Toast.Description, Toast.ActionButton,
- *   Toast.CloseButton
- */
-export interface HeroUIToastProps extends ToastProps {}
-
-export default function HeroUIToast(props: HeroUIToastProps) {
-  return <Toast {...props} />;
-}
-
-export { Toast, toast };
-export type { ToastProps };

package/src/components/library/heroui/Toggle.tsx

@@ -1,18 +0,0 @@
-import { Switch } from "@heroui/react";
-import type { SwitchProps } from "@heroui/react";
-import { useThemeMode } from "../theme/AppThemeProvider";
-
-export interface HeroUIToggleProps extends Omit<SwitchProps, 'isSelected' | 'onChange'> {
-  label?: string;
-}
-
-export default function HeroUIToggle({ label = "Dark mode", ...props }: HeroUIToggleProps) {
-  const { mode, toggle } = useThemeMode();
-  const isSelected = mode === "dark";
-
-  return (
-    <Switch isSelected={isSelected} onChange={toggle} {...props}>
-      <Switch.Content>{label}</Switch.Content>
-    </Switch>
-  );
-}

package/src/components/library/heroui/Tooltip.tsx

@@ -1,24 +0,0 @@
-import { Tooltip } from "@heroui/react";
-import type { TooltipProps } from "@heroui/react";
-
-/**
- * HeroUI v3 Tooltip — compound component.
- *
- * Sub-components via dot notation on the named `Tooltip` export:
- *   Tooltip.Trigger, Tooltip.Content, Tooltip.Arrow
- *
- * @example
- *   import { Tooltip } from "@/components/library";
- *   <Tooltip>
- *     <Tooltip.Trigger><Button>Hover me</Button></Tooltip.Trigger>
- *     <Tooltip.Content>Helpful info</Tooltip.Content>
- *   </Tooltip>
- */
-export interface HeroUITooltipProps extends TooltipProps {}
-
-export default function HeroUITooltip(props: HeroUITooltipProps) {
-  return <Tooltip {...props} />;
-}
-
-export { Tooltip };
-export type { TooltipProps };

package/src/components/library/index.ts

@@ -1,147 +0,0 @@
-import * as React from 'react';
-
-export { default as AppThemeProvider, useThemeMode } from "./theme/AppThemeProvider";
-
-// UI primitives
-export { default as UIButton } from "./ui/UIButton";
-export { default as UIInput } from "./ui/UIInput";
-export { default as UIText } from "./ui/Text";
-export { default as UIContainer } from "./ui/Container";
-export { default as UIChip } from "./ui/Chip";
-export { default as Avatar } from "./ui/Avatar";
-export { default as EmptyState } from "./ui/EmptyState";
-export { default as Spinner } from "./ui/Spinner";
-export { default as Label } from "./ui/Label";
-export { default as Checkbox } from "./ui/Checkbox";
-export { default as FieldGroup } from "./ui/FieldGroup";
-
-// shadcn-compatible Card with subcomponents
-export { default as UICard, Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "./ui/Card";
-
-// shadcn-compatible Alert with subcomponents
-export { default as Alert, AlertTitle, AlertDescription, AlertAction } from "./ui/Alert";
-
-// shadcn-compatible components from heroui/ (HeroUI-based)
-export { default as HeroUIDialog, Dialog, DialogTrigger, DialogPortal, DialogClose, DialogOverlay, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription } from "./heroui/Dialog";
-export { default as HeroUIField, Field, FieldLabel, FieldDescription, FieldError } from "./heroui/Field";
-export { default as HeroUICollapsible } from "./heroui/Collapsible";
-export { Collapsible, CollapsibleTrigger, CollapsibleContent } from "./ui/Collapsible";
-export { default as HeroUIPopover, Popover, PopoverTrigger, PopoverContent } from "./heroui/Popover";
-export { default as HeroUIDatePicker, DatePicker, DatePickerTrigger, DatePickerContent, DatePickerCalendar, DatePickerRangeTrigger } from "./heroui/DatePicker";
-
-// Cards
-export { default as BaseCard } from "./cards/BaseCard";
-export { default as ChartCard } from "./cards/ChartCard";
-export { default as ListCard } from "./cards/ListCard";
-export { default as MetricCard } from "./cards/MetricCard";
-export { default as SectionCard } from "./cards/SectionCard";
-export { default as StatusCard } from "./cards/StatusCard";
-export { default as TableCard } from "./cards/TableCard";
-export { default as WidgetCard } from "./cards/WidgetCard";
-export { default as FeedPanel } from "./cards/FeedPanel";
-export { default as ActivityCard } from "./cards/ActivityCard";
-export { default as MetricsStrip } from "./cards/MetricsStrip";
-export { default as CalloutCard } from "./cards/CalloutCard";
-export { default as ActionList } from "./cards/ActionList";
-
-// Charts
-export { default as D3Chart } from "./charts/D3Chart";
-export { D3ChartTemplates } from "./charts/D3ChartTemplates";
-export { default as GeoMap } from "./charts/GeoMap";
-
-// Layout
-export { default as PageContainer } from "./layout/PageContainer";
-
-// Skeletons
-export { default as CardSkeleton } from "./skeletons/CardSkeleton";
-
-// Forms
-export { FormModal, FormRenderer, FormSection, FormField, useFormState } from "./forms";
-
-// Filters
-export { FilterBar, SearchFilter, SelectFilter, ToggleFilter } from "./filters";
-
-// Data mode
-export { default as DataModeProvider, useDataMode } from "./data/DataModeProvider";
-export { default as DataModeToggle } from "./data/DataModeToggle";
-export { default as useDataSource } from "./data/useDataSource";
-
-// Data utilities
-export { default as usePageFilters } from "./data/usePageFilters";
-export {
-  filterBySearch,
-  filterByValue,
-  filterByToggle,
-  filterByDateRange,
-  sortByKey,
-  applyFilters,
-} from "./data/filterUtils";
-
-// Chat / AI agent
-export {
-  ChatPanel,
-  ChatBar,
-  ChatMessageList,
-  ChatMessage,
-  ChatInput,
-  ChatTypingIndicator,
-  ChatSuggestions,
-  ChatToolCall,
-  ChatWelcome,
-  useChatState,
-} from "./chat";
-
-// HeroUI wrappers — existing
-export { default as HeroUIButton, Button } from "./heroui/Button";
-export { default as HeroUIInput } from "./heroui/Input";
-export { default as HeroUICard } from "./heroui/Card";
-export { default as HeroUIToggle } from "./heroui/Toggle";
-
-// HeroUI wrappers — navigation & layout
-export { default as HeroUITabs } from "./heroui/Tabs";
-export { default as HeroUIAccordion } from "./heroui/Accordion";
-export { default as HeroUIBreadcrumbs, Breadcrumbs } from "./heroui/Breadcrumbs";
-export { default as HeroUISeparator, Separator } from "./heroui/Separator";
-export { default as HeroUIPagination, Pagination } from "./heroui/Pagination";
-
-// Breadcrumb subcomponents for shadcn compatibility
-export const Breadcrumb = ({ children, ...props }: { children?: React.ReactNode; [key: string]: any }) => React.createElement('nav', { 'aria-label': 'breadcrumb', ...props }, children);
-export const BreadcrumbList = ({ children, ...props }: { children?: React.ReactNode; [key: string]: any }) => React.createElement('ol', { className: 'flex flex-wrap items-center gap-1.5 break-words text-sm text-slate-500 dark:text-slate-400', ...props }, children);
-export const BreadcrumbItem = ({ children, ...props }: { children?: React.ReactNode; [key: string]: any }) => React.createElement('li', { className: 'inline-flex items-center gap-1.5', ...props }, children);
-export const BreadcrumbLink = ({ href, children, asChild, ...props }: { href?: string; children?: React.ReactNode; asChild?: boolean; [key: string]: any }) => asChild ? React.createElement('span', props, children) : React.createElement('a', { href, className: 'transition-colors hover:text-slate-900 dark:hover:text-slate-50', ...props }, children);
-export const BreadcrumbPage = ({ children, ...props }: { children?: React.ReactNode; [key: string]: any }) => React.createElement('span', { role: 'link', 'aria-disabled': 'true', 'aria-current': 'page', className: 'font-normal text-slate-900 dark:text-slate-50', ...props }, children);
-export const BreadcrumbSeparator = ({ children, ...props }: { children?: React.ReactNode; [key: string]: any }) => React.createElement('li', { role: 'presentation', 'aria-hidden': 'true', ...props }, children ?? '/');
-export const BreadcrumbEllipsis = (props: { [key: string]: any }) => React.createElement('span', { role: 'presentation', 'aria-hidden': 'true', ...props }, '...');
-
-// Pagination subcomponents for shadcn compatibility
-export const PaginationContent = ({ children, ...props }: { children?: React.ReactNode; [key: string]: any }) => React.createElement('ul', { className: 'flex flex-row items-center gap-1', ...props }, children);
-export const PaginationItem = ({ children, ...props }: { children?: React.ReactNode; [key: string]: any }) => React.createElement('li', props, children);
-export const PaginationLink = ({ href, isActive, children, ...props }: { href?: string; isActive?: boolean; children?: React.ReactNode; [key: string]: any }) => React.createElement('a', { href, 'aria-current': isActive ? 'page' : undefined, className: `inline-flex items-center justify-center rounded-md text-sm font-medium h-9 min-w-9 px-4 py-2 ${isActive ? 'bg-slate-900 text-white dark:bg-slate-50 dark:text-slate-900' : 'hover:bg-slate-100 dark:hover:bg-slate-800'}`, ...props }, children);
-export const PaginationPrevious = ({ href, ...props }: { href?: string; [key: string]: any }) => React.createElement(PaginationLink, { href, ...props }, 'Previous');
-export const PaginationNext = ({ href, ...props }: { href?: string; [key: string]: any }) => React.createElement(PaginationLink, { href, ...props }, 'Next');
-export const PaginationEllipsis = (props: { [key: string]: any }) => React.createElement('span', { 'aria-hidden': true, ...props }, '...');
-
-// HeroUI wrappers — overlays
-export { default as HeroUIDrawer } from "./heroui/Drawer";
-export { default as HeroUIModal } from "./heroui/Modal";
-export { default as HeroUIDropdown } from "./heroui/Dropdown";
-export { default as HeroUITooltip } from "./heroui/Tooltip";
-export { default as HeroUIToast } from "./heroui/Toast";
-
-// HeroUI wrappers — feedback
-export { default as HeroUIAlert } from "./heroui/Alert";
-export { default as HeroUIBadge } from "./heroui/Badge";
-export { default as HeroUIProgressBar } from "./heroui/ProgressBar";
-export { default as HeroUIProgressCircle } from "./heroui/ProgressCircle";
-export { default as HeroUIMeter } from "./heroui/Meter";
-export { default as HeroUISkeleton, Skeleton } from "./heroui/Skeleton";
-
-// HeroUI wrappers — pickers & forms
-export { default as HeroUISelect } from "./heroui/Select";
-
-// Re-export full Radix Select suite from ui/Select for shadcn compatibility
-export { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "./ui/Select";
-
-// HeroUI wrappers — utilities
-export { default as HeroUIKbd, Kbd } from "./heroui/Kbd";
-export { default as HeroUIScrollShadow, ScrollShadow } from "./heroui/ScrollShadow";

package/src/components/library/layout/PageContainer.tsx

@@ -1,14 +0,0 @@
-import React from "react";
-
-export interface PageContainerProps {
-  className?: string;
-  children: React.ReactNode;
-}
-
-export default function PageContainer({ className = "", children }: PageContainerProps) {
-  return (
-    <div className={["mx-auto w-full max-w-6xl px-4 sm:px-6", className].filter(Boolean).join(" ")}>
-      {children}
-    </div>
-  );
-}

package/src/components/library/skeletons/CardSkeleton.tsx

@@ -1,31 +0,0 @@
-export interface CardSkeletonProps {
-  lines?: number;
-  className?: string;
-}
-
-export default function CardSkeleton({ lines = 3, className = "" }: CardSkeletonProps) {
-  return (
-    <div
-      className={[
-        "rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900",
-        className
-      ]
-        .filter(Boolean)
-        .join(" ")}
-      aria-busy="true"
-      aria-label="Loading"
-    >
-      <div className="space-y-3">
-        {Array.from({ length: lines }).map((_, i) => (
-          <div
-            key={i}
-            className={[
-              "h-4 animate-pulse rounded bg-slate-200 dark:bg-slate-800",
-              i === 0 ? "w-1/3" : i === 1 ? "w-2/3" : "w-1/2"
-            ].join(" ")}
-          />
-        ))}
-      </div>
-    </div>
-  );
-}