@etus/ui 0.4.0-beta.2 → 0.4.0-beta.4

package/dist/chunk-5ZEYTBTU.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/workflow/ApprovalStatus/ApprovalStatus.variants.ts","../src/components/workflow/ApprovalStatus/ApprovalStatus.tsx"],"names":[],"mappings":"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","file":"chunk-5ZEYTBTU.js","sourcesContent":["import { cva } from \"class-variance-authority\"\n\n/**\n * ApprovalStatus variant styles using CVA\n */\nexport const approvalStatusVariants = cva(\n  \"inline-flex items-center font-medium transition-colors duration-150\",\n  {\n    variants: {\n      size: {\n        sm: \"h-5 text-xs gap-1 px-2 py-0.5\",\n        md: \"h-6 text-sm gap-1.5 px-2.5 py-0.5\",\n        lg: \"h-8 text-base gap-2 px-3 py-1\",\n      },\n      variant: {\n        default: \"rounded-full\",\n        compact: \"rounded-full\",\n        detailed: \"rounded-lg flex-col items-start gap-1 h-auto px-3 py-2\",\n        timeline: \"rounded-none flex-row items-start gap-2 h-auto px-0 py-0 bg-transparent\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n      variant: \"default\",\n    },\n  }\n)\n\n/**\n * Status-specific color styles using semantic tokens\n */\nexport const statusColorStyles: Record<string, string> = {\n  pending: \"bg-[color:var(--status-pending-bg)] text-[color:var(--status-pending-text)]\",\n  in_review: \"bg-[color:var(--status-in-review-bg)] text-[color:var(--status-in-review-text)]\",\n  approved: \"bg-[color:var(--status-approved-bg)] text-[color:var(--status-approved-text)]\",\n  rejected: \"bg-[color:var(--status-rejected-bg)] text-[color:var(--status-rejected-text)]\",\n  changes_requested: \"bg-[color:var(--status-changes-requested-bg)] text-[color:var(--status-changes-requested-text)]\",\n  escalated: \"bg-[color:var(--status-escalated-bg)] text-[color:var(--status-escalated-text)]\",\n  expired: \"bg-[color:var(--status-expired-bg)] text-[color:var(--status-expired-text)]\",\n  cancelled: \"bg-[color:var(--status-cancelled-bg)] text-[color:var(--status-cancelled-text)]\",\n}\n\n/**\n * Timeline variant status dot colors using semantic tokens\n */\nexport const timelineDotStyles: Record<string, string> = {\n  pending: \"bg-[color:var(--status-pending-dot)]\",\n  in_review: \"bg-[color:var(--status-in-review-dot)]\",\n  approved: \"bg-[color:var(--status-approved-dot)]\",\n  rejected: \"bg-[color:var(--status-rejected-dot)]\",\n  changes_requested: \"bg-[color:var(--status-changes-requested-dot)]\",\n  escalated: \"bg-[color:var(--status-escalated-dot)]\",\n  expired: \"bg-[color:var(--status-expired-dot)]\",\n  cancelled: \"bg-[color:var(--status-cancelled-dot)]\",\n}\n\n/**\n * Animation styles for pending states\n */\nexport const animationStyles = \"animate-pulse\"\n","import type {\n  ApprovalStatusProps,\n  ApprovalStatusType,\n  StatusConfig,\n} from \"./ApprovalStatus.types\"\nimport type { ComponentType, SVGProps } from \"react\"\n\nimport {\n  AlertCircle,\n  ArrowUpCircle,\n  CheckCircle2,\n  Clock,\n  Edit3,\n  Loader2,\n  Timer,\n  XCircle,\n} from \"lucide-react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport {\n  animationStyles,\n  approvalStatusVariants,\n  statusColorStyles,\n  timelineDotStyles,\n} from \"./ApprovalStatus.variants\"\n\n/**\n * Status configuration with icons and labels\n */\nconst statusConfig: Record<\n  ApprovalStatusType,\n  StatusConfig & { icon: ComponentType<SVGProps<SVGSVGElement>> }\n> = {\n  approved: {\n    icon: CheckCircle2,\n    label: \"Aprovado\",\n    labelEn: \"Approved\",\n  },\n  cancelled: {\n    icon: AlertCircle,\n    label: \"Cancelado\",\n    labelEn: \"Cancelled\",\n  },\n  changes_requested: {\n    icon: Edit3,\n    label: \"Alterações Solicitadas\",\n    labelEn: \"Changes Requested\",\n  },\n  escalated: {\n    icon: ArrowUpCircle,\n    label: \"Escalado\",\n    labelEn: \"Escalated\",\n  },\n  expired: {\n    icon: Timer,\n    label: \"Expirado\",\n    labelEn: \"Expired\",\n  },\n  in_review: {\n    icon: Loader2,\n    label: \"Em Análise\",\n    labelEn: \"In Review\",\n  },\n  pending: {\n    icon: Clock,\n    label: \"Pendente\",\n    labelEn: \"Pending\",\n  },\n  rejected: {\n    icon: XCircle,\n    label: \"Rejeitado\",\n    labelEn: \"Rejected\",\n  },\n}\n\n/**\n * Format timestamp to localized string\n */\nfunction formatTimestamp(date: Date): string {\n  return date.toLocaleDateString(\"pt-BR\", {\n    day: \"2-digit\",\n    hour: \"2-digit\",\n    minute: \"2-digit\",\n    month: \"short\",\n    year: \"numeric\",\n  })\n}\n\n/**\n * Get initials from a name\n */\nfunction getInitials(name: string): string {\n  return name\n    .split(\" \")\n    .map((word) => word[0])\n    .join(\"\")\n    .toUpperCase()\n    .slice(0, 2)\n}\n\n/**\n * Icon sizes per component size\n */\nconst iconSizeMap: Record<\"lg\" | \"md\" | \"sm\", string> = {\n  lg: \"size-4\",\n  md: \"size-3.5\",\n  sm: \"size-3\",\n}\n\n/**\n * ApprovalStatus displays the current state of an approval workflow\n *\n * @example\n * ```tsx\n * <ApprovalStatus status=\"approved\" />\n * <ApprovalStatus status=\"pending\" animated />\n * <ApprovalStatus\n *   status=\"approved\"\n *   variant=\"detailed\"\n *   approver={{ id: \"1\", name: \"Maria Silva\", role: \"Manager\" }}\n *   timestamp={new Date()}\n * />\n * ```\n */\nfunction ApprovalStatus({\n  animated = false,\n  approver,\n  className,\n  comment,\n  showIcon = true,\n  showLabel = true,\n  size = \"md\",\n  status,\n  timestamp,\n  variant = \"default\",\n  ...props\n}: ApprovalStatusProps) {\n  const config = statusConfig[status]\n  const Icon = config.icon\n  const iconSize = iconSizeMap[size]\n\n  // Build aria-label for accessibility\n  const ariaLabel = [\n    `Status: ${config.label}`,\n    approver ? `por ${approver.name}` : \"\",\n    timestamp ? `em ${formatTimestamp(timestamp)}` : \"\",\n  ]\n    .filter(Boolean)\n    .join(\" \")\n\n  // Animation class for pending states\n  const shouldAnimate = animated && (status === \"pending\" || status === \"in_review\")\n\n  // Compact variant: icon only with tooltip\n  if (variant === \"compact\") {\n    return (\n      <div\n        className={cn(\n          approvalStatusVariants({ size, variant }),\n          statusColorStyles[status],\n          shouldAnimate && animationStyles,\n          \"justify-center\",\n          className\n        )}\n        aria-label={ariaLabel}\n        data-slot=\"approval-status\"\n        role=\"status\"\n        title={config.label}\n        {...props}\n      >\n        {showIcon && <Icon aria-hidden=\"true\" className={iconSize} />}\n      </div>\n    )\n  }\n\n  // Timeline variant: vertical timeline style\n  if (variant === \"timeline\") {\n    return (\n      <div\n        className={cn(\n          approvalStatusVariants({ size, variant }),\n          className\n        )}\n        aria-label={ariaLabel}\n        aria-live=\"polite\"\n        data-slot=\"approval-status\"\n        role=\"status\"\n        {...props}\n      >\n        {/* Timeline dot */}\n        <div\n          className={cn(\n            \"mt-1 size-3 shrink-0 rounded-full\",\n            timelineDotStyles[status],\n            shouldAnimate && animationStyles\n          )}\n        />\n\n        {/* Content */}\n        <div className=\"flex flex-col gap-0.5\">\n          {/* Status with icon */}\n          <div className=\"flex items-center gap-1.5\">\n            {showIcon && (\n              <Icon aria-hidden=\"true\" className={cn(iconSize, \"text-muted-foreground\")} />\n            )}\n            {showLabel && (\n              <span className=\"font-medium\">{config.label}</span>\n            )}\n          </div>\n\n          {/* Approver info */}\n          {approver && (\n            <div className=\"flex items-center gap-1.5 text-sm text-muted-foreground\">\n              <span>{approver.name}</span>\n              {approver.role && (\n                <>\n                  <span className=\"text-muted-foreground/50\">·</span>\n                  <span>{approver.role}</span>\n                </>\n              )}\n            </div>\n          )}\n\n          {/* Timestamp */}\n          {timestamp && (\n            <time\n              className=\"text-xs text-muted-foreground\"\n              dateTime={timestamp.toISOString()}\n            >\n              {formatTimestamp(timestamp)}\n            </time>\n          )}\n\n          {/* Comment */}\n          {comment && (\n            <p className=\"mt-1 text-sm text-muted-foreground italic\">\n              \"{comment}\"\n            </p>\n          )}\n        </div>\n      </div>\n    )\n  }\n\n  // Detailed variant: status with approver and timestamp\n  if (variant === \"detailed\") {\n    return (\n      <div\n        className={cn(\n          approvalStatusVariants({ size, variant }),\n          \"bg-card border rounded-lg\",\n          className\n        )}\n        aria-label={ariaLabel}\n        aria-live=\"polite\"\n        data-slot=\"approval-status\"\n        role=\"status\"\n        {...props}\n      >\n        {/* Status badge row */}\n        <div className=\"flex items-center gap-1.5 w-full\">\n          <span\n            className={cn(\n              \"inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium\",\n              statusColorStyles[status],\n              shouldAnimate && animationStyles\n            )}\n          >\n            {showIcon && <Icon aria-hidden=\"true\" className=\"size-3\" />}\n            {showLabel && config.label}\n          </span>\n        </div>\n\n        {/* Approver info */}\n        {approver && (\n          <div className=\"flex items-center gap-2 w-full\">\n            {/* Avatar */}\n            <div className=\"size-6 shrink-0 rounded-full bg-muted flex items-center justify-center text-xs font-medium overflow-hidden\">\n              {approver.avatar ? (\n                <img\n                  alt={approver.name}\n                  className=\"size-full object-cover\"\n                  src={approver.avatar}\n                />\n              ) : (\n                <span>{getInitials(approver.name)}</span>\n              )}\n            </div>\n\n            <div className=\"flex flex-col min-w-0\">\n              <span className=\"text-sm font-medium truncate\">{approver.name}</span>\n              {approver.role && (\n                <span className=\"text-xs text-muted-foreground truncate\">\n                  {approver.role}\n                </span>\n              )}\n            </div>\n          </div>\n        )}\n\n        {/* Timestamp */}\n        {timestamp && (\n          <time\n            className=\"text-xs text-muted-foreground\"\n            dateTime={timestamp.toISOString()}\n          >\n            {formatTimestamp(timestamp)}\n          </time>\n        )}\n\n        {/* Comment */}\n        {comment && (\n          <p className=\"text-sm text-muted-foreground italic border-l-2 border-muted pl-2\">\n            \"{comment}\"\n          </p>\n        )}\n      </div>\n    )\n  }\n\n  // Default variant: simple badge\n  return (\n    <div\n      className={cn(\n        approvalStatusVariants({ size, variant }),\n        statusColorStyles[status],\n        shouldAnimate && animationStyles,\n        className\n      )}\n      aria-label={ariaLabel}\n      aria-live=\"polite\"\n      data-slot=\"approval-status\"\n      role=\"status\"\n      {...props}\n    >\n      {showIcon && <Icon aria-hidden=\"true\" className={iconSize} />}\n      {showLabel && <span>{config.label}</span>}\n    </div>\n  )\n}\n\nexport { ApprovalStatus, approvalStatusVariants, statusConfig }\n"]}

package/dist/chunk-5ZKKXLPF.js

@@ -0,0 +1,177 @@
+import { cn } from './chunk-HRNDJU7D.js';
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+var headerVariants = cva(
+  [
+    // Base styles
+    "flex w-full items-center",
+    // Transition
+    "transition-colors"
+  ],
+  {
+    variants: {
+      variant: {
+        default: "bg-background border-b border-border",
+        transparent: "bg-transparent",
+        floating: "bg-background/80 backdrop-blur-sm border-b border-border/50 shadow-sm"
+      },
+      size: {
+        sm: "h-12",
+        md: "h-14",
+        lg: "h-16"
+      },
+      sticky: {
+        true: "sticky top-0 z-[var(--header-sticky-z-index)]",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md",
+      sticky: false
+    }
+  }
+);
+var headerContainerVariants = cva(
+  [
+    "flex w-full items-center gap-4 px-4"
+  ],
+  {
+    variants: {
+      contained: {
+        true: "mx-auto max-w-7xl",
+        false: ""
+      },
+      layout: {
+        // Brand left, Nav middle, Actions right (default)
+        default: "justify-between",
+        // Brand center; Nav and Actions on sides if provided
+        "logo-centered": "justify-center [&>[data-slot=header-brand]]:order-2 [&>[data-slot=header-nav]]:order-1 [&>[data-slot=header-actions]]:order-3 [&>[data-slot=header-nav]]:flex-1 [&>[data-slot=header-actions]]:flex-1",
+        // Nav left, Brand right (mirror of default)
+        "links-left": "justify-between [&>[data-slot=header-brand]]:order-2 [&>[data-slot=header-nav]]:order-1 [&>[data-slot=header-actions]]:order-3",
+        // Brand + Nav clustered center, Actions right
+        centered: "[&>[data-slot=header-brand]]:flex-none [&>[data-slot=header-nav]]:flex-1 [&>[data-slot=header-nav]]:justify-center [&>[data-slot=header-actions]]:flex-none [&>[data-slot=header-actions]]:ml-auto"
+      }
+    },
+    defaultVariants: {
+      contained: false,
+      layout: "default"
+    }
+  }
+);
+var headerBrandVariants = cva([
+  "flex shrink-0 items-center gap-2"
+]);
+var headerNavVariants = cva([
+  "hidden md:flex items-center gap-1"
+]);
+var headerActionsVariants = cva(
+  [
+    "flex items-center gap-2"
+  ],
+  {
+    variants: {
+      align: {
+        start: "justify-start",
+        center: "justify-center",
+        end: "justify-end"
+      }
+    },
+    defaultVariants: {
+      align: "end"
+    }
+  }
+);
+function Header({
+  className,
+  variant = "default",
+  size = "md",
+  sticky = false,
+  contained = false,
+  layout = "default",
+  containerClassName,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "header",
+    {
+      className: cn(headerVariants({ variant, size, sticky }), className),
+      "data-slot": "header",
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            headerContainerVariants({ contained, layout }),
+            containerClassName
+          ),
+          "data-layout": layout,
+          "data-slot": "header-container",
+          children
+        }
+      )
+    }
+  );
+}
+function HeaderBrand({
+  className,
+  asLink = false,
+  href = "/",
+  children,
+  ...props
+}) {
+  if (asLink) {
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        className: cn(headerBrandVariants(), className),
+        "data-slot": "header-brand",
+        href,
+        ...props,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(headerBrandVariants(), className),
+      "data-slot": "header-brand",
+      ...props,
+      children
+    }
+  );
+}
+function HeaderNav({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      className: cn(headerNavVariants(), className),
+      "data-slot": "header-nav",
+      ...props,
+      children
+    }
+  );
+}
+function HeaderActions({
+  className,
+  align = "end",
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(headerActionsVariants({ align }), className),
+      "data-slot": "header-actions",
+      ...props,
+      children
+    }
+  );
+}
+
+export { Header, HeaderActions, HeaderBrand, HeaderNav, headerActionsVariants, headerBrandVariants, headerContainerVariants, headerNavVariants, headerVariants };
+//# sourceMappingURL=chunk-5ZKKXLPF.js.map
+//# sourceMappingURL=chunk-5ZKKXLPF.js.map

package/dist/chunk-5ZKKXLPF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/Header/Header.variants.ts","../src/components/navigation/Header/Header.tsx"],"names":[],"mappings":"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","file":"chunk-5ZKKXLPF.js","sourcesContent":["import { cva } from \"class-variance-authority\"\n\n/**\n * Header root variant styles\n */\nexport const headerVariants = cva(\n  [\n    // Base styles\n    \"flex w-full items-center\",\n    // Transition\n    \"transition-colors\",\n  ],\n  {\n    variants: {\n      variant: {\n        default: \"bg-background border-b border-border\",\n        transparent: \"bg-transparent\",\n        floating: \"bg-background/80 backdrop-blur-sm border-b border-border/50 shadow-sm\",\n      },\n      size: {\n        sm: \"h-12\",\n        md: \"h-14\",\n        lg: \"h-16\",\n      },\n      sticky: {\n        true: \"sticky top-0 z-[var(--header-sticky-z-index)]\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"md\",\n      sticky: false,\n    },\n  }\n)\n\n/**\n * Header container variant styles (inner wrapper)\n */\nexport const headerContainerVariants = cva(\n  [\n    \"flex w-full items-center gap-4 px-4\",\n  ],\n  {\n    variants: {\n      contained: {\n        true: \"mx-auto max-w-7xl\",\n        false: \"\",\n      },\n      layout: {\n        // Brand left, Nav middle, Actions right (default)\n        default: \"justify-between\",\n        // Brand center; Nav and Actions on sides if provided\n        \"logo-centered\":\n          \"justify-center [&>[data-slot=header-brand]]:order-2 [&>[data-slot=header-nav]]:order-1 [&>[data-slot=header-actions]]:order-3 [&>[data-slot=header-nav]]:flex-1 [&>[data-slot=header-actions]]:flex-1\",\n        // Nav left, Brand right (mirror of default)\n        \"links-left\":\n          \"justify-between [&>[data-slot=header-brand]]:order-2 [&>[data-slot=header-nav]]:order-1 [&>[data-slot=header-actions]]:order-3\",\n        // Brand + Nav clustered center, Actions right\n        centered:\n          \"[&>[data-slot=header-brand]]:flex-none [&>[data-slot=header-nav]]:flex-1 [&>[data-slot=header-nav]]:justify-center [&>[data-slot=header-actions]]:flex-none [&>[data-slot=header-actions]]:ml-auto\",\n      },\n    },\n    defaultVariants: {\n      contained: false,\n      layout: \"default\",\n    },\n  }\n)\n\n/**\n * HeaderBrand variant styles\n */\nexport const headerBrandVariants = cva([\n  \"flex shrink-0 items-center gap-2\",\n])\n\n/**\n * HeaderNav variant styles\n */\nexport const headerNavVariants = cva([\n  \"hidden md:flex items-center gap-1\",\n])\n\n/**\n * HeaderActions variant styles\n */\nexport const headerActionsVariants = cva(\n  [\n    \"flex items-center gap-2\",\n  ],\n  {\n    variants: {\n      align: {\n        start: \"justify-start\",\n        center: \"justify-center\",\n        end: \"justify-end\",\n      },\n    },\n    defaultVariants: {\n      align: \"end\",\n    },\n  }\n)\n","\"use client\"\n\nimport type {\n  HeaderActionsProps,\n  HeaderBrandProps,\n  HeaderNavProps,\n  HeaderProps,\n} from \"./Header.types\"\n\nimport { cn } from \"../../../lib/utils\"\nimport {\n  headerActionsVariants,\n  headerBrandVariants,\n  headerContainerVariants,\n  headerNavVariants,\n  headerVariants,\n} from \"./Header.variants\"\n\n/**\n * Header - A responsive header component for site navigation.\n *\n * Supports multiple visual variants, sizes, and sticky positioning.\n *\n * @example\n * <Header variant=\"default\" size=\"md\" sticky>\n *   <HeaderBrand asLink href=\"/\">Logo</HeaderBrand>\n *   <HeaderNav>\n *     <a href=\"/about\">About</a>\n *     <a href=\"/contact\">Contact</a>\n *   </HeaderNav>\n *   <HeaderActions>\n *     <Button>Sign In</Button>\n *   </HeaderActions>\n * </Header>\n */\nfunction Header({\n  className,\n  variant = \"default\",\n  size = \"md\",\n  sticky = false,\n  contained = false,\n  layout = \"default\",\n  containerClassName,\n  children,\n  ...props\n}: HeaderProps) {\n  return (\n    <header\n      className={cn(headerVariants({ variant, size, sticky }), className)}\n      data-slot=\"header\"\n      {...props}\n    >\n      <div\n        className={cn(\n          headerContainerVariants({ contained, layout }),\n          containerClassName\n        )}\n        data-layout={layout}\n        data-slot=\"header-container\"\n      >\n        {children}\n      </div>\n    </header>\n  )\n}\n\n/**\n * HeaderBrand - Logo/brand area of the header.\n *\n * Can optionally render as a link when asLink is true.\n */\nfunction HeaderBrand({\n  className,\n  asLink = false,\n  href = \"/\",\n  children,\n  ...props\n}: HeaderBrandProps) {\n  if (asLink) {\n    return (\n      <a\n        className={cn(headerBrandVariants(), className)}\n        data-slot=\"header-brand\"\n        href={href}\n        {...(props as React.ComponentProps<\"a\">)}\n      >\n        {children}\n      </a>\n    )\n  }\n\n  return (\n    <div\n      className={cn(headerBrandVariants(), className)}\n      data-slot=\"header-brand\"\n      {...props}\n    >\n      {children}\n    </div>\n  )\n}\n\n/**\n * HeaderNav - Navigation container for header links.\n */\nfunction HeaderNav({ className, children, ...props }: HeaderNavProps) {\n  return (\n    <nav\n      className={cn(headerNavVariants(), className)}\n      data-slot=\"header-nav\"\n      {...props}\n    >\n      {children}\n    </nav>\n  )\n}\n\n/**\n * HeaderActions - Actions container for buttons/controls.\n */\nfunction HeaderActions({\n  className,\n  align = \"end\",\n  children,\n  ...props\n}: HeaderActionsProps) {\n  return (\n    <div\n      className={cn(headerActionsVariants({ align }), className)}\n      data-slot=\"header-actions\"\n      {...props}\n    >\n      {children}\n    </div>\n  )\n}\n\nexport { Header, HeaderActions, HeaderBrand, HeaderNav }\n"]}

package/dist/chunk-5ZWFIDO2.js

@@ -0,0 +1,3 @@
+
+//# sourceMappingURL=chunk-5ZWFIDO2.js.map
+//# sourceMappingURL=chunk-5ZWFIDO2.js.map

package/dist/chunk-5ZWFIDO2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"chunk-5ZWFIDO2.js"}

package/dist/chunk-65YSTUD2.js

@@ -0,0 +1,206 @@
+import { cn } from './chunk-HRNDJU7D.js';
+import 'react';
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+var tableContainerVariants = cva(
+  // Base styles (always applied)
+  "relative w-full overflow-x-auto",
+  {
+    variants: {
+      bordered: {
+        true: "rounded-md border",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      bordered: false
+    }
+  }
+);
+var tableVariants = cva(
+  // Base styles (always applied)
+  "w-full caption-bottom text-sm",
+  {
+    variants: {
+      density: {
+        compact: "[&_td]:py-[var(--table-cell-padding-compact-y)] [&_th]:py-[var(--table-cell-padding-compact-y)]",
+        default: "[&_td]:py-[var(--table-cell-padding-default-y)] [&_th]:py-[var(--table-cell-padding-default-y)]",
+        comfortable: "[&_td]:py-[var(--table-cell-padding-comfortable-y)] [&_th]:py-[var(--table-cell-padding-comfortable-y)]"
+      }
+    },
+    defaultVariants: {
+      density: "default"
+    }
+  }
+);
+var tableRowVariants = cva(
+  // Base styles (always applied)
+  "border-b border-[color:var(--table-row-border)] transition-colors",
+  {
+    variants: {
+      hoverable: {
+        true: "hover:bg-[color:var(--table-row-hover)]",
+        false: ""
+      },
+      selected: {
+        true: "bg-[color:var(--table-row-selected)]",
+        false: ""
+      },
+      striped: {
+        true: "even:bg-[color:var(--table-row-striped)]",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      hoverable: true,
+      selected: false,
+      striped: false
+    }
+  }
+);
+var tableHeadVariants = cva(
+  // Base styles (always applied)
+  "text-[length:var(--text-size-sm-font-size)] h-[var(--table-header-height)] px-[var(--table-header-padding-x)] text-left align-middle font-medium text-[color:var(--table-header-fg)] whitespace-nowrap",
+  {
+    variants: {
+      sortable: {
+        true: "cursor-pointer select-none hover:bg-muted/50",
+        false: ""
+      },
+      sticky: {
+        true: "sticky top-0 bg-background z-10",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      sortable: false,
+      sticky: false
+    }
+  }
+);
+var tableCellVariants = cva(
+  // Base styles (always applied)
+  "px-[var(--table-cell-padding-x)] align-middle whitespace-nowrap text-[length:var(--table-cell-text)]",
+  {
+    variants: {
+      align: {
+        left: "text-left",
+        center: "text-center",
+        right: "text-right"
+      }
+    },
+    defaultVariants: {
+      align: "left"
+    }
+  }
+);
+function Table({ className, ref, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(tableContainerVariants(), "w-full overflow-x-auto"),
+      "data-slot": "table-container",
+      children: /* @__PURE__ */ jsx(
+        "table",
+        {
+          ref,
+          className: cn(tableVariants(), className),
+          "data-slot": "table",
+          ...props
+        }
+      )
+    }
+  );
+}
+function TableHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "thead",
+    {
+      className: cn("[&_tr]:border-b", className),
+      "data-slot": "table-header",
+      ...props
+    }
+  );
+}
+function TableBody({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "tbody",
+    {
+      className: cn("[&_tr:last-child]:border-0", className),
+      "data-slot": "table-body",
+      ...props
+    }
+  );
+}
+function TableFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "tfoot",
+    {
+      className: cn(
+        "bg-[color:var(--table-footer-bg)] border-[color:var(--table-footer-border)] border-t font-medium [&>tr]:last:border-b-0",
+        className
+      ),
+      "data-slot": "table-footer",
+      ...props
+    }
+  );
+}
+function TableRow({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "tr",
+    {
+      className: cn(
+        tableRowVariants(),
+        className
+      ),
+      "data-slot": "table-row",
+      ...props
+    }
+  );
+}
+function TableHead({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "th",
+    {
+      className: cn(
+        tableHeadVariants(),
+        "[&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      ),
+      "data-slot": "table-head",
+      ...props
+    }
+  );
+}
+function TableCell({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "td",
+    {
+      className: cn(
+        tableCellVariants(),
+        "[&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      ),
+      "data-slot": "table-cell",
+      ...props
+    }
+  );
+}
+function TableCaption({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "caption",
+    {
+      className: cn("text-[color:var(--table-caption-fg)] mt-[var(--table-caption-margin-top)] text-[length:var(--table-caption-text)]", className),
+      "data-slot": "table-caption",
+      ...props
+    }
+  );
+}
+
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };
+//# sourceMappingURL=chunk-65YSTUD2.js.map
+//# sourceMappingURL=chunk-65YSTUD2.js.map

package/dist/chunk-65YSTUD2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Table/Table.variants.ts","../src/components/data-display/Table/Table.tsx"],"names":[],"mappings":"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","file":"chunk-65YSTUD2.js","sourcesContent":["// Table/Table.variants.ts\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\n/**\n * Table container style variants using CVA\n *\n * @see https://cva.style/docs\n */\nexport const tableContainerVariants = cva(\n  // Base styles (always applied)\n  \"relative w-full overflow-x-auto\",\n  {\n    variants: {\n      bordered: {\n        true: \"rounded-md border\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      bordered: false,\n    },\n  }\n)\n\n/**\n * Table style variants\n */\nexport const tableVariants = cva(\n  // Base styles (always applied)\n  \"w-full caption-bottom text-sm\",\n  {\n    variants: {\n      density: {\n        compact: \"[&_td]:py-[var(--table-cell-padding-compact-y)] [&_th]:py-[var(--table-cell-padding-compact-y)]\",\n        default: \"[&_td]:py-[var(--table-cell-padding-default-y)] [&_th]:py-[var(--table-cell-padding-default-y)]\",\n        comfortable: \"[&_td]:py-[var(--table-cell-padding-comfortable-y)] [&_th]:py-[var(--table-cell-padding-comfortable-y)]\",\n      },\n    },\n    defaultVariants: {\n      density: \"default\",\n    },\n  }\n)\n\n/**\n * Table row style variants\n */\nexport const tableRowVariants = cva(\n  // Base styles (always applied)\n  \"border-b border-[color:var(--table-row-border)] transition-colors\",\n  {\n    variants: {\n      hoverable: {\n        true: \"hover:bg-[color:var(--table-row-hover)]\",\n        false: \"\",\n      },\n      selected: {\n        true: \"bg-[color:var(--table-row-selected)]\",\n        false: \"\",\n      },\n      striped: {\n        true: \"even:bg-[color:var(--table-row-striped)]\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      hoverable: true,\n      selected: false,\n      striped: false,\n    },\n  }\n)\n\n/**\n * Table header cell style variants\n */\nexport const tableHeadVariants = cva(\n  // Base styles (always applied)\n  \"text-[length:var(--text-size-sm-font-size)] h-[var(--table-header-height)] px-[var(--table-header-padding-x)] text-left align-middle font-medium text-[color:var(--table-header-fg)] whitespace-nowrap\",\n  {\n    variants: {\n      sortable: {\n        true: \"cursor-pointer select-none hover:bg-muted/50\",\n        false: \"\",\n      },\n      sticky: {\n        true: \"sticky top-0 bg-background z-10\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      sortable: false,\n      sticky: false,\n    },\n  }\n)\n\n/**\n * Table cell style variants\n */\nexport const tableCellVariants = cva(\n  // Base styles (always applied)\n  \"px-[var(--table-cell-padding-x)] align-middle whitespace-nowrap text-[length:var(--table-cell-text)]\",\n  {\n    variants: {\n      align: {\n        left: \"text-left\",\n        center: \"text-center\",\n        right: \"text-right\",\n      },\n    },\n    defaultVariants: {\n      align: \"left\",\n    },\n  }\n)\n\n// Export variant prop types\nexport type TableContainerVariantProps = VariantProps<typeof tableContainerVariants>\nexport type TableVariantProps = VariantProps<typeof tableVariants>\nexport type TableRowVariantProps = VariantProps<typeof tableRowVariants>\nexport type TableHeadVariantProps = VariantProps<typeof tableHeadVariants>\nexport type TableCellVariantProps = VariantProps<typeof tableCellVariants>\n","import * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport {\n  tableCellVariants,\n  tableContainerVariants,\n  tableHeadVariants,\n  tableRowVariants,\n  tableVariants,\n} from \"./Table.variants\"\n\nfunction Table({ className, ref, ...props }: React.ComponentProps<\"table\">) {\n  return (\n    <div\n      className={cn(tableContainerVariants(), \"w-full overflow-x-auto\")}\n      data-slot=\"table-container\"\n    >\n      <table\n        ref={ref}\n        className={cn(tableVariants(), className)}\n        data-slot=\"table\"\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction TableHeader({ className, ...props }: React.ComponentProps<\"thead\">) {\n  return (\n    <thead\n      className={cn(\"[&_tr]:border-b\", className)}\n      data-slot=\"table-header\"\n      {...props}\n    />\n  )\n}\n\nfunction TableBody({ className, ...props }: React.ComponentProps<\"tbody\">) {\n  return (\n    <tbody\n      className={cn(\"[&_tr:last-child]:border-0\", className)}\n      data-slot=\"table-body\"\n      {...props}\n    />\n  )\n}\n\nfunction TableFooter({ className, ...props }: React.ComponentProps<\"tfoot\">) {\n  return (\n    <tfoot\n      className={cn(\n        \"bg-[color:var(--table-footer-bg)] border-[color:var(--table-footer-border)] border-t font-medium [&>tr]:last:border-b-0\",\n        className\n      )}\n      data-slot=\"table-footer\"\n      {...props}\n    />\n  )\n}\n\nfunction TableRow({ className, ...props }: React.ComponentProps<\"tr\">) {\n  return (\n    <tr\n      className={cn(\n        tableRowVariants(),\n        className\n      )}\n      data-slot=\"table-row\"\n      {...props}\n    />\n  )\n}\n\nfunction TableHead({ className, ...props }: React.ComponentProps<\"th\">) {\n  return (\n    <th\n      className={cn(\n        tableHeadVariants(),\n        \"[&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]\",\n        className\n      )}\n      data-slot=\"table-head\"\n      {...props}\n    />\n  )\n}\n\nfunction TableCell({ className, ...props }: React.ComponentProps<\"td\">) {\n  return (\n    <td\n      className={cn(\n        tableCellVariants(),\n        \"[&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]\",\n        className\n      )}\n      data-slot=\"table-cell\"\n      {...props}\n    />\n  )\n}\n\nfunction TableCaption({\n  className,\n  ...props\n}: React.ComponentProps<\"caption\">) {\n  return (\n    <caption\n      className={cn(\"text-[color:var(--table-caption-fg)] mt-[var(--table-caption-margin-top)] text-[length:var(--table-caption-text)]\", className)}\n      data-slot=\"table-caption\"\n      {...props}\n    />\n  )\n}\n\nexport {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n}\n"]}