tembro 2.0.3 → 2.0.5

package/dist/showcase/premium/tag-list/showcase.js

@@ -1,83 +0,0 @@
-import { TagList as e } from "../../../components/display/tag-list.js";
-import * as t from "react";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
-//#region src/showcase/premium/tag-list/showcase.tsx
-var i = "border-t border-[color:var(--aui-divider)] py-6", a = [
-	{
-		key: "react",
-		label: "React"
-	},
-	{
-		key: "typescript",
-		label: "TypeScript"
-	},
-	{
-		key: "dashboard",
-		label: "Dashboard"
-	},
-	{
-		key: "design-system",
-		label: "Design system"
-	},
-	{
-		key: "release",
-		label: "Release"
-	}
-];
-function o() {
-	let [o, s] = t.useState(a);
-	return /* @__PURE__ */ r("div", {
-		className: "space-y-0",
-		children: [/* @__PURE__ */ r("section", {
-			className: "pb-6",
-			children: [
-				/* @__PURE__ */ n("p", {
-					className: "text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted",
-					children: "Installed display primitive"
-				}),
-				/* @__PURE__ */ n("h3", {
-					className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
-					children: "TagList shows existing labels, not text entry"
-				}),
-				/* @__PURE__ */ n("p", {
-					className: "mt-3 max-w-2xl text-sm leading-6 aui-text-muted",
-					children: "Use TagList to display or lightly edit known labels. If the user must type new values, move to TagInput instead."
-				})
-			]
-		}), /* @__PURE__ */ n("section", {
-			className: i,
-			children: /* @__PURE__ */ r("div", {
-				className: "grid gap-6 xl:grid-cols-[1fr_360px]",
-				children: [/* @__PURE__ */ r("div", { children: [
-					/* @__PURE__ */ n("p", {
-						className: "text-lg font-semibold aui-text-strong",
-						children: "Editable metadata chips"
-					}),
-					/* @__PURE__ */ n("p", {
-						className: "mt-2 max-w-xl text-sm leading-6 aui-text-muted",
-						children: "Remove actions should stay small and secondary so the tags remain readable as content first."
-					}),
-					/* @__PURE__ */ n("div", {
-						className: "mt-5 rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4",
-						children: /* @__PURE__ */ n(e, {
-							items: o,
-							removable: !0,
-							onRemove: (e) => s((t) => t.filter((t) => t.key !== e.key))
-						})
-					})
-				] }), /* @__PURE__ */ r("div", {
-					className: "rounded-xl border border-[color:var(--aui-divider)] p-4",
-					children: [/* @__PURE__ */ n("p", {
-						className: "text-sm font-semibold aui-text-strong",
-						children: "Guidance"
-					}), /* @__PURE__ */ r("div", {
-						className: "mt-3 space-y-3 text-sm leading-6 aui-text-muted",
-						children: [/* @__PURE__ */ n("p", { children: "TagList is display-first. It should not impersonate a full input when creation is not available." }), /* @__PURE__ */ n("p", { children: "Use `max` when pages need a condensed summary and overflow should collapse into a count chip." })]
-					})]
-				})]
-			})
-		})]
-	});
-}
-//#endregion
-export { o as TagListShowcase };

package/dist/showcase/premium/watermark/index.cjs

@@ -1 +0,0 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./mock.cjs"),t=require("./showcase.cjs");exports.WatermarkShowcase=t.WatermarkShowcase,exports.watermarkMock=e.watermarkMock;

package/dist/showcase/premium/watermark/index.d.ts

@@ -1,2 +0,0 @@
-export { watermarkMock } from "./mock";
-export { WatermarkShowcase } from "./showcase";

package/dist/showcase/premium/watermark/index.js

@@ -1,3 +0,0 @@
-import { watermarkMock as e } from "./mock.js";
-import { WatermarkShowcase as t } from "./showcase.js";
-export { t as WatermarkShowcase, e as watermarkMock };

package/dist/showcase/premium/watermark/mock.cjs

@@ -1,11 +0,0 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { Watermark } from "@/index"
-
-export function Example() {
-  return (
-    <Watermark text="PRIVATE BETA">
-      <div className="grid h-28 place-items-center rounded-xl border bg-card">
-        Document surface
-      </div>
-    </Watermark>
-  )
-}`,cliCommand:`npx tembro add watermark`,highlights:[`Optional watermark for document and export previews`,`Works on any container content`,`Configurable watermark text and overlay style`],scenarios:[{title:`Confidential docs`,description:`Show usage watermark without blocking interaction.`},{title:`Design previews`,description:`Brand mark on generated screenshots.`},{title:`Shared exports`,description:`Visual indicator for internal staging artifacts.`}]};exports.watermarkMock=e;

package/dist/showcase/premium/watermark/mock.d.ts

@@ -1,2 +0,0 @@
-import type { ComponentDemoMock } from "../types";
-export declare const watermarkMock: ComponentDemoMock;

package/dist/showcase/premium/watermark/mock.js

@@ -1,26 +0,0 @@
-//#region src/showcase/premium/watermark/mock.ts
-var e = {
-	code: "import { Watermark } from \"@/index\"\n\nexport function Example() {\n  return (\n    <Watermark text=\"PRIVATE BETA\">\n      <div className=\"grid h-28 place-items-center rounded-xl border bg-card\">\n        Document surface\n      </div>\n    </Watermark>\n  )\n}",
-	cliCommand: "npx tembro add watermark",
-	highlights: [
-		"Optional watermark for document and export previews",
-		"Works on any container content",
-		"Configurable watermark text and overlay style"
-	],
-	scenarios: [
-		{
-			title: "Confidential docs",
-			description: "Show usage watermark without blocking interaction."
-		},
-		{
-			title: "Design previews",
-			description: "Brand mark on generated screenshots."
-		},
-		{
-			title: "Shared exports",
-			description: "Visual indicator for internal staging artifacts."
-		}
-	]
-};
-//#endregion
-export { e as watermarkMock };

package/dist/showcase/premium/watermark/showcase.cjs

@@ -1 +0,0 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/ui/button/index.cjs"),n=require("../../../components/display/watermark.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("react/jsx-runtime");var a=[`tembro`,`STAGING`,`DRAFT`,`PRIVATE BETA`];function o(){let[e,o]=r.useState(a[0]);return(0,i.jsxs)(`div`,{className:`space-y-4`,children:[(0,i.jsx)(`div`,{className:`flex flex-wrap gap-2`,children:a.map(n=>(0,i.jsx)(t.Button,{size:`sm`,variant:e===n?`default`:`outline`,onClick:()=>o(n),children:n},n))}),(0,i.jsx)(n.Watermark,{text:e,children:(0,i.jsx)(`div`,{className:`grid h-36 place-items-center rounded-xl border bg-card p-5 text-sm text-muted-foreground`,children:`This content keeps full interaction while visually marking environment.`})})]})}exports.WatermarkShowcase=o;

package/dist/showcase/premium/watermark/showcase.d.ts

@@ -1,2 +0,0 @@
-import * as React from "react";
-export declare function WatermarkShowcase(): React.JSX.Element;

package/dist/showcase/premium/watermark/showcase.js

@@ -1,34 +0,0 @@
-import { Button as e } from "../../../components/ui/button/index.js";
-import { Watermark as t } from "../../../components/display/watermark.js";
-import * as n from "react";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-//#region src/showcase/premium/watermark/showcase.tsx
-var a = [
-	"tembro",
-	"STAGING",
-	"DRAFT",
-	"PRIVATE BETA"
-];
-function o() {
-	let [o, s] = n.useState(a[0]);
-	return /* @__PURE__ */ i("div", {
-		className: "space-y-4",
-		children: [/* @__PURE__ */ r("div", {
-			className: "flex flex-wrap gap-2",
-			children: a.map((t) => /* @__PURE__ */ r(e, {
-				size: "sm",
-				variant: o === t ? "default" : "outline",
-				onClick: () => s(t),
-				children: t
-			}, t))
-		}), /* @__PURE__ */ r(t, {
-			text: o,
-			children: /* @__PURE__ */ r("div", {
-				className: "grid h-36 place-items-center rounded-xl border bg-card p-5 text-sm text-muted-foreground",
-				children: "This content keeps full interaction while visually marking environment."
-			})
-		})]
-	});
-}
-//#endregion
-export { o as WatermarkShowcase };

package/packages/cli/vendor/src/components/display/aspect-ratio.tsx

@@ -1,22 +0,0 @@
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-export type AspectRatioProps = React.ComponentProps<"div"> & {
-  ratio?: number
-}
-
-function AspectRatio({ ratio = 16 / 9, className, style, children, ...props }: AspectRatioProps) {
-  return (
-    <div
-      data-slot="aspect-ratio"
-      className={cn("relative w-full overflow-hidden", className)}
-      style={{ aspectRatio: String(ratio), ...style }}
-      {...props}
-    >
-      <div className="absolute inset-0">{children}</div>
-    </div>
-  )
-}
-
-export { AspectRatio }

package/packages/cli/vendor/src/components/display/entity-card.tsx

@@ -1,80 +0,0 @@
-import * as React from "react"
-
-import { Card } from "@/components/ui/card"
-import { cn, stopInteractivePropagation } from "@/lib/utils"
-
-export type EntityCardProps = Omit<React.ComponentProps<typeof Card>, "title"> & {
-  title: React.ReactNode
-  description?: React.ReactNode
-  media?: React.ReactNode
-  icon?: React.ReactNode
-  status?: React.ReactNode
-  meta?: React.ReactNode
-  actions?: React.ReactNode
-  footer?: React.ReactNode
-  selected?: boolean
-  disabled?: boolean
-  orientation?: "vertical" | "horizontal"
-  onSelect?: () => void
-}
-
-function EntityCard({ title, description, media, icon, status, meta, actions, footer, selected = false, disabled = false, orientation = "vertical", onSelect, className, ...props }: EntityCardProps) {
-  return (
-    <Card
-      data-slot="entity-card"
-      data-selected={selected || undefined}
-      data-disabled={disabled || undefined}
-      className={cn(
-        "overflow-hidden border-[color:var(--aui-surface-border)] bg-[color:color-mix(in_srgb,var(--aui-page-bg)_94%,white_6%)] shadow-sm transition duration-200 hover:-translate-y-0.5 hover:border-[color:color-mix(in_srgb,var(--aui-brand-strong)_26%,var(--aui-surface-border))] hover:shadow-md data-[selected=true]:border-[color:var(--aui-brand-strong)] data-[selected=true]:shadow-[0_0_0_1px_var(--aui-brand-strong),0_16px_36px_rgba(15,23,42,0.12)] data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-55 dark:bg-[color:color-mix(in_srgb,var(--aui-page-bg)_97%,black_3%)]",
-        onSelect && "cursor-pointer",
-        orientation === "horizontal" && "flex",
-        className
-      )}
-      onClick={onSelect}
-      {...props}
-    >
-      {media && (
-        <div
-          className={cn(
-            "overflow-hidden border-b border-[color:var(--aui-surface-border)] bg-[color:var(--aui-control-bg)]",
-            orientation === "horizontal" ? "w-36 shrink-0 border-b-0 border-r" : "aspect-video"
-          )}
-        >
-          {media}
-        </div>
-      )}
-      <div className="grid min-w-0 flex-1 gap-3 p-5">
-        <div className="flex items-start justify-between gap-3">
-          <div className="flex min-w-0 items-start gap-3">
-            {icon && (
-              <div className="flex size-10 shrink-0 items-center justify-center rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-control-bg)] text-muted-foreground shadow-sm">
-                {icon}
-              </div>
-            )}
-            <div className="grid min-w-0 gap-1">
-              <div className="flex flex-wrap items-center gap-2">
-                <div className="truncate text-base font-semibold tracking-tight text-foreground">{title}</div>
-                {status}
-              </div>
-              {description && <div className="line-clamp-2 text-sm leading-6 text-muted-foreground">{description}</div>}
-            </div>
-          </div>
-          {actions && (
-            <div
-              className="shrink-0"
-              onClick={stopInteractivePropagation}
-              onMouseDown={stopInteractivePropagation}
-              onDoubleClick={stopInteractivePropagation}
-            >
-              {actions}
-            </div>
-          )}
-        </div>
-        {meta && <div className="text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground">{meta}</div>}
-        {footer && <div className="border-t border-[color:var(--aui-surface-border)] pt-3 text-sm text-muted-foreground">{footer}</div>}
-      </div>
-    </Card>
-  )
-}
-
-export { EntityCard }

package/packages/cli/vendor/src/components/display/entity-header.tsx

@@ -1,80 +0,0 @@
-import * as React from "react"
-import { ChevronLeftIcon } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-export type EntityHeaderProps = React.ComponentProps<"div"> & {
-  title: React.ReactNode
-  description?: React.ReactNode
-  avatar?: React.ReactNode
-  badge?: React.ReactNode
-  actions?: React.ReactNode
-  breadcrumb?: React.ReactNode
-  backHref?: string
-  onBack?: () => void
-}
-
-function EntityHeader({
-  title,
-  description,
-  avatar,
-  badge,
-  actions,
-  breadcrumb,
-  backHref,
-  onBack,
-  className,
-  ...props
-}: EntityHeaderProps) {
-  return (
-    <div data-slot="entity-header" className={cn("flex flex-col gap-4 pb-6", className)} {...props}>
-      {/* Top row: Breadcrumb and optional back button */}
-      {(breadcrumb || backHref || onBack) && (
-        <div className="flex items-center gap-2">
-          {(backHref || onBack) && (
-            <button
-              type="button"
-              onClick={onBack}
-              className="inline-flex size-7 items-center justify-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground transition-colors"
-              aria-label="Go back"
-            >
-              {/* If using next/link etc., this would ideally be an 'asChild' setup, but we use an anchor tag or button based on props for simplicity */}
-              {backHref && !onBack ? (
-                <a href={backHref} className="flex h-full w-full items-center justify-center">
-                  <ChevronLeftIcon className="size-4" />
-                </a>
-              ) : (
-                <ChevronLeftIcon className="size-4" />
-              )}
-            </button>
-          )}
-          {breadcrumb}
-        </div>
-      )}
-
-      {/* Main row: Avatar, Title/Description/Badge, Actions */}
-      <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
-        <div className="flex min-w-0 items-center gap-4">
-          {avatar && <div className="shrink-0">{avatar}</div>}
-          <div className="min-w-0 flex-1 grid gap-1">
-            <div className="flex flex-wrap items-center gap-2">
-              <h1 className="truncate text-xl font-semibold tracking-tight text-foreground sm:text-2xl">{title}</h1>
-              {badge}
-            </div>
-            {description && (
-              <p className="truncate text-sm text-muted-foreground">{description}</p>
-            )}
-          </div>
-        </div>
-
-        {actions && (
-          <div className="flex shrink-0 items-center gap-2">
-            {actions}
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}
-
-export { EntityHeader }

package/packages/cli/vendor/src/components/display/file-card.tsx

@@ -1,61 +0,0 @@
-import * as React from "react"
-import { FileIcon, MoreHorizontalIcon } from "lucide-react"
-
-import { Button } from "@/components/ui/button"
-import { cn, stopInteractivePropagation } from "@/lib/utils"
-
-export type FileCardProps = React.ComponentProps<"div"> & {
-  name: React.ReactNode
-  description?: React.ReactNode
-  meta?: React.ReactNode
-  icon?: React.ReactNode
-  preview?: React.ReactNode
-  actions?: React.ReactNode
-  selected?: boolean
-  disabled?: boolean
-  onOpen?: () => void
-}
-
-function FileCard({ name, description, meta, icon, preview, actions, selected = false, disabled = false, onOpen, className, ...props }: FileCardProps) {
-  return (
-    <div
-      data-slot="file-card"
-      data-selected={selected || undefined}
-      data-disabled={disabled || undefined}
-      className={cn(
-        "group grid gap-3 rounded-lg border bg-card p-3 transition-colors hover:bg-muted/35 data-[selected=true]:border-primary data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-55",
-        onOpen && "cursor-pointer",
-        className
-      )}
-      onClick={onOpen}
-      {...props}
-    >
-      {preview && <div className="overflow-hidden rounded-md bg-muted">{preview}</div>}
-      <div className="flex items-start gap-3">
-        <div className="flex size-9 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground">
-          {icon ?? <FileIcon className="size-4" />}
-        </div>
-        <div className="min-w-0 flex-1">
-          <div className="truncate text-sm font-medium text-foreground">{name}</div>
-          {description && <div className="mt-0.5 line-clamp-2 text-xs text-muted-foreground">{description}</div>}
-          {meta && <div className="mt-2 text-xs text-muted-foreground">{meta}</div>}
-        </div>
-        {actions ?? (
-          <Button
-            type="button"
-            variant="ghost"
-            size="icon-xs"
-            onClick={stopInteractivePropagation}
-            onMouseDown={stopInteractivePropagation}
-            onDoubleClick={stopInteractivePropagation}
-          >
-            <MoreHorizontalIcon />
-            <span className="sr-only">File actions</span>
-          </Button>
-        )}
-      </div>
-    </div>
-  )
-}
-
-export { FileCard }

package/packages/cli/vendor/src/components/display/float-button.tsx

@@ -1,27 +0,0 @@
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-export type FloatButtonProps = React.ComponentProps<"button"> & {
-  placement?: "bottom-right" | "bottom-left" | "top-right" | "top-left"
-}
-
-const placementClassName = {
-  "bottom-right": "bottom-6 right-6",
-  "bottom-left": "bottom-6 left-6",
-  "top-right": "right-6 top-6",
-  "top-left": "left-6 top-6",
-}
-
-function FloatButton({ placement = "bottom-right", className, ...props }: FloatButtonProps) {
-  return (
-    <button
-      type="button"
-      data-slot="float-button"
-      className={cn("fixed z-50 inline-flex size-12 items-center justify-center rounded-full border bg-primary text-primary-foreground shadow-lg transition hover:opacity-90", placementClassName[placement], className)}
-      {...props}
-    />
-  )
-}
-
-export { FloatButton }

package/packages/cli/vendor/src/components/display/key-value-card.tsx

@@ -1,50 +0,0 @@
-import * as React from "react"
-
-import { Card, CardContent, CardDescription, CardHeader, CardTitle, type CardProps } from "@/components/ui/card"
-import { cn } from "@/lib/utils"
-
-export type KeyValueCardItem = {
-  key: string
-  label: React.ReactNode
-  value: React.ReactNode
-  description?: React.ReactNode
-}
-
-export type KeyValueCardProps = Omit<CardProps, "children"> & {
-  title?: React.ReactNode
-  description?: React.ReactNode
-  items: KeyValueCardItem[]
-  columns?: 1 | 2
-}
-
-function KeyValueCard({ title, description, items, columns = 1, className, ...props }: KeyValueCardProps) {
-  return (
-    <Card data-slot="key-value-card" className={className} {...props}>
-      {(title || description) && (
-        <CardHeader>
-          {title && <CardTitle>{title}</CardTitle>}
-          {description && <CardDescription>{description}</CardDescription>}
-        </CardHeader>
-      )}
-      <CardContent>
-        <dl
-          className={cn(
-            "grid gap-3",
-            columns === 1 && "grid-cols-1",
-            columns === 2 && "grid-cols-1 sm:grid-cols-2"
-          )}
-        >
-          {items.map((item) => (
-            <div key={item.key} data-slot="key-value-card-item" className="min-w-0 rounded-lg border bg-muted/25 p-3">
-              <dt className="text-xs font-medium uppercase tracking-wide text-muted-foreground">{item.label}</dt>
-              <dd className="mt-1 break-words text-sm font-semibold text-foreground">{item.value}</dd>
-              {item.description && <dd className="mt-1 text-xs leading-5 text-muted-foreground">{item.description}</dd>}
-            </div>
-          ))}
-        </dl>
-      </CardContent>
-    </Card>
-  )
-}
-
-export { KeyValueCard }

package/packages/cli/vendor/src/components/display/keyboard-shortcut.tsx

@@ -1,31 +0,0 @@
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-export type KeyboardShortcutProps = React.ComponentProps<"kbd"> & {
-  keys?: React.ReactNode[]
-  separator?: React.ReactNode
-}
-
-function KeyboardShortcut({ keys, separator = "+", className, children, ...props }: KeyboardShortcutProps) {
-  const content = keys?.length
-    ? keys.map((key, index) => (
-        <React.Fragment key={index}>
-          {index > 0 && <span className="text-muted-foreground">{separator}</span>}
-          <span>{key}</span>
-        </React.Fragment>
-      ))
-    : children
-
-  return (
-    <kbd
-      data-slot="keyboard-shortcut"
-      className={cn("inline-flex items-center gap-1 rounded border bg-muted px-1.5 py-0.5 font-mono text-[11px] font-medium text-muted-foreground", className)}
-      {...props}
-    >
-      {content}
-    </kbd>
-  )
-}
-
-export { KeyboardShortcut }

package/packages/cli/vendor/src/components/display/skeleton-form.tsx

@@ -1,51 +0,0 @@
-import * as React from "react"
-import { Skeleton } from "@/components/ui/skeleton"
-import { cn } from "@/lib/utils"
-
-export type SkeletonFormProps = React.ComponentProps<"div"> & {
-  fields?: number
-  showTitle?: boolean
-  showActions?: boolean
-  columns?: 1 | 2
-}
-
-function SkeletonForm({
-  fields = 4,
-  showTitle = true,
-  showActions = true,
-  columns = 1,
-  className,
-  ...props
-}: SkeletonFormProps) {
-  return (
-    <div data-slot="skeleton-form" className={cn("w-full space-y-6", className)} {...props}>
-      {showTitle && (
-        <div className="space-y-2 border-b pb-4">
-          <Skeleton className="h-6 w-1/3" />
-          <Skeleton className="h-4 w-1/2" />
-        </div>
-      )}
-      
-      <div className={cn(
-        "grid gap-6",
-        columns === 2 && "sm:grid-cols-2"
-      )}>
-        {Array.from({ length: fields }).map((_, i) => (
-          <div key={i} className="space-y-2">
-            <Skeleton className="h-4 w-20" />
-            <Skeleton className="h-10 w-full" />
-          </div>
-        ))}
-      </div>
-
-      {showActions && (
-        <div className="flex justify-end gap-2 pt-4">
-          <Skeleton className="h-10 w-24" />
-          <Skeleton className="h-10 w-24" />
-        </div>
-      )}
-    </div>
-  )
-}
-
-export { SkeletonForm }

package/packages/cli/vendor/src/components/display/skeleton-table.tsx

@@ -1,59 +0,0 @@
-import * as React from "react"
-import { Skeleton } from "@/components/ui/skeleton"
-import { cn } from "@/lib/utils"
-
-export type SkeletonTableProps = React.ComponentProps<"div"> & {
-  rows?: number
-  columns?: number
-  showHeader?: boolean
-  showToolbar?: boolean
-}
-
-function SkeletonTable({
-  rows = 5,
-  columns = 4,
-  showHeader = true,
-  showToolbar = false,
-  className,
-  ...props
-}: SkeletonTableProps) {
-  return (
-    <div data-slot="skeleton-table" className={cn("w-full space-y-4", className)} {...props}>
-      {showToolbar && (
-        <div className="flex items-center justify-between">
-          <Skeleton className="h-8 w-[250px]" />
-          <div className="flex items-center gap-2">
-            <Skeleton className="h-8 w-[100px]" />
-            <Skeleton className="h-8 w-[80px]" />
-          </div>
-        </div>
-      )}
-      <div className="rounded-md border">
-        {showHeader && (
-          <div className="border-b bg-muted/50">
-            <div className="flex px-4 py-3">
-              {Array.from({ length: columns }).map((_, i) => (
-                <div key={i} className="flex-1 pr-4">
-                  <Skeleton className="h-4 w-24" />
-                </div>
-              ))}
-            </div>
-          </div>
-        )}
-        <div className="divide-y">
-          {Array.from({ length: rows }).map((_, rowIndex) => (
-            <div key={rowIndex} className="flex px-4 py-3">
-              {Array.from({ length: columns }).map((_, colIndex) => (
-                <div key={colIndex} className="flex-1 pr-4">
-                  <Skeleton className={cn("h-4", colIndex === 0 ? "w-full max-w-[200px]" : "w-1/2")} />
-                </div>
-              ))}
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export { SkeletonTable }