@actuate-media/cms-admin 0.10.0 → 0.11.0

package/src/components/TipTapEditor.tsx

@@ -152,11 +152,11 @@ function ToolbarButton({
       onClick={onClick}
       disabled={disabled}
       title={title}
-      className={`p-1.5 rounded transition-colors ${
+      className={`rounded p-1.5 transition-colors ${
         isActive
           ? 'bg-blue-100 text-blue-700'
           : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900'
-      } ${disabled ? 'opacity-40 cursor-not-allowed' : ''}`}
+      } ${disabled ? 'cursor-not-allowed opacity-40' : ''}`}
     >
       {children}
     </button>
@@ -164,7 +164,7 @@ function ToolbarButton({
 }
 
 function Divider() {
-  return <div className="w-px h-6 bg-gray-200 mx-1" />
+  return <div className="mx-1 h-6 w-px bg-gray-200" />
 }
 
 function Toolbar({ editor, onOpenMediaPicker }: { editor: Editor; onOpenMediaPicker: () => void }) {
@@ -186,42 +186,42 @@ function Toolbar({ editor, onOpenMediaPicker }: { editor: Editor; onOpenMediaPic
   const isInTable = editor.isActive('table')
 
   return (
-    <div className="border-b border-gray-200 bg-gray-50 p-2 flex items-center gap-0.5 flex-wrap sticky top-0 z-10">
+    <div className="sticky top-0 z-10 flex flex-wrap items-center gap-0.5 border-b border-gray-200 bg-gray-50 p-2">
       {/* Group 1: Text formatting */}
       <ToolbarButton
         onClick={() => editor.chain().focus().toggleBold().run()}
         isActive={editor.isActive('bold')}
         title="Bold (Ctrl+B)"
       >
-        <Bold className="w-4 h-4" />
+        <Bold className="h-4 w-4" />
       </ToolbarButton>
       <ToolbarButton
         onClick={() => editor.chain().focus().toggleItalic().run()}
         isActive={editor.isActive('italic')}
         title="Italic (Ctrl+I)"
       >
-        <Italic className="w-4 h-4" />
+        <Italic className="h-4 w-4" />
       </ToolbarButton>
       <ToolbarButton
         onClick={() => editor.chain().focus().toggleUnderline().run()}
         isActive={editor.isActive('underline')}
         title="Underline (Ctrl+U)"
       >
-        <Underline className="w-4 h-4" />
+        <Underline className="h-4 w-4" />
       </ToolbarButton>
       <ToolbarButton
         onClick={() => editor.chain().focus().toggleStrike().run()}
         isActive={editor.isActive('strike')}
         title="Strikethrough"
       >
-        <Strikethrough className="w-4 h-4" />
+        <Strikethrough className="h-4 w-4" />
       </ToolbarButton>
       <ToolbarButton
         onClick={() => editor.chain().focus().toggleCode().run()}
         isActive={editor.isActive('code')}
         title="Inline code"
       >
-        <Code className="w-4 h-4" />
+        <Code className="h-4 w-4" />
       </ToolbarButton>
 
       <Divider />
@@ -232,21 +232,21 @@ function Toolbar({ editor, onOpenMediaPicker }: { editor: Editor; onOpenMediaPic
         isActive={editor.isActive('heading', { level: 1 })}
         title="Heading 1"
       >
-        <Heading1 className="w-4 h-4" />
+        <Heading1 className="h-4 w-4" />
       </ToolbarButton>
       <ToolbarButton
         onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
         isActive={editor.isActive('heading', { level: 2 })}
         title="Heading 2"
       >
-        <Heading2 className="w-4 h-4" />
+        <Heading2 className="h-4 w-4" />
       </ToolbarButton>
       <ToolbarButton
         onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
         isActive={editor.isActive('heading', { level: 3 })}
         title="Heading 3"
       >
-        <Heading3 className="w-4 h-4" />
+        <Heading3 className="h-4 w-4" />
       </ToolbarButton>
 
       <Divider />
@@ -257,34 +257,34 @@ function Toolbar({ editor, onOpenMediaPicker }: { editor: Editor; onOpenMediaPic
         isActive={editor.isActive('bulletList')}
         title="Bullet list"
       >
-        <List className="w-4 h-4" />
+        <List className="h-4 w-4" />
       </ToolbarButton>
       <ToolbarButton
         onClick={() => editor.chain().focus().toggleOrderedList().run()}
         isActive={editor.isActive('orderedList')}
         title="Ordered list"
       >
-        <ListOrdered className="w-4 h-4" />
+        <ListOrdered className="h-4 w-4" />
       </ToolbarButton>
       <ToolbarButton
         onClick={() => editor.chain().focus().toggleBlockquote().run()}
         isActive={editor.isActive('blockquote')}
         title="Blockquote"
       >
-        <Quote className="w-4 h-4" />
+        <Quote className="h-4 w-4" />
       </ToolbarButton>
       <ToolbarButton
         onClick={() => editor.chain().focus().toggleCodeBlock().run()}
         isActive={editor.isActive('codeBlock')}
         title="Code block"
       >
-        <FileCode className="w-4 h-4" />
+        <FileCode className="h-4 w-4" />
       </ToolbarButton>
       <ToolbarButton
         onClick={() => editor.chain().focus().setHorizontalRule().run()}
         title="Horizontal rule"
       >
-        <Minus className="w-4 h-4" />
+        <Minus className="h-4 w-4" />
       </ToolbarButton>
 
       <Divider />
@@ -295,34 +295,34 @@ function Toolbar({ editor, onOpenMediaPicker }: { editor: Editor; onOpenMediaPic
         isActive={editor.isActive({ textAlign: 'left' })}
         title="Align left"
       >
-        <AlignLeft className="w-4 h-4" />
+        <AlignLeft className="h-4 w-4" />
       </ToolbarButton>
       <ToolbarButton
         onClick={() => editor.chain().focus().setTextAlign('center').run()}
         isActive={editor.isActive({ textAlign: 'center' })}
         title="Align center"
       >
-        <AlignCenter className="w-4 h-4" />
+        <AlignCenter className="h-4 w-4" />
       </ToolbarButton>
       <ToolbarButton
         onClick={() => editor.chain().focus().setTextAlign('right').run()}
         isActive={editor.isActive({ textAlign: 'right' })}
         title="Align right"
       >
-        <AlignRight className="w-4 h-4" />
+        <AlignRight className="h-4 w-4" />
       </ToolbarButton>
 
       <Divider />
 
       {/* Group 5: Insert */}
       <ToolbarButton onClick={addLink} isActive={editor.isActive('link')} title="Insert link">
-        <LinkIcon className="w-4 h-4" />
+        <LinkIcon className="h-4 w-4" />
       </ToolbarButton>
       <ToolbarButton onClick={onOpenMediaPicker} title="Insert image">
-        <ImageIcon className="w-4 h-4" />
+        <ImageIcon className="h-4 w-4" />
       </ToolbarButton>
       <ToolbarButton onClick={insertTable} title="Insert table (3×3)">
-        <TableIcon className="w-4 h-4" />
+        <TableIcon className="h-4 w-4" />
       </ToolbarButton>
 
       {/* Group 6: Table controls (visible only when cursor is inside a table) */}
@@ -333,43 +333,43 @@ function Toolbar({ editor, onOpenMediaPicker }: { editor: Editor; onOpenMediaPic
             onClick={() => editor.chain().focus().addColumnBefore().run()}
             title="Add column before"
           >
-            <Columns className="w-4 h-4" />
+            <Columns className="h-4 w-4" />
           </ToolbarButton>
           <ToolbarButton
             onClick={() => editor.chain().focus().addColumnAfter().run()}
             title="Add column after"
           >
-            <Columns className="w-4 h-4" />
+            <Columns className="h-4 w-4" />
           </ToolbarButton>
           <ToolbarButton
             onClick={() => editor.chain().focus().deleteColumn().run()}
             title="Delete column"
           >
-            <Columns className="w-4 h-4" />
+            <Columns className="h-4 w-4" />
           </ToolbarButton>
           <ToolbarButton
             onClick={() => editor.chain().focus().addRowBefore().run()}
             title="Add row before"
           >
-            <Rows className="w-4 h-4" />
+            <Rows className="h-4 w-4" />
           </ToolbarButton>
           <ToolbarButton
             onClick={() => editor.chain().focus().addRowAfter().run()}
             title="Add row after"
           >
-            <Rows className="w-4 h-4" />
+            <Rows className="h-4 w-4" />
           </ToolbarButton>
           <ToolbarButton
             onClick={() => editor.chain().focus().deleteRow().run()}
             title="Delete row"
           >
-            <Rows className="w-4 h-4" />
+            <Rows className="h-4 w-4" />
           </ToolbarButton>
           <ToolbarButton
             onClick={() => editor.chain().focus().deleteTable().run()}
             title="Delete table"
           >
-            <Trash2 className="w-4 h-4" />
+            <Trash2 className="h-4 w-4" />
           </ToolbarButton>
         </>
       )}
@@ -382,14 +382,14 @@ function Toolbar({ editor, onOpenMediaPicker }: { editor: Editor; onOpenMediaPic
         disabled={!editor.can().undo()}
         title="Undo"
       >
-        <Undo className="w-4 h-4" />
+        <Undo className="h-4 w-4" />
       </ToolbarButton>
       <ToolbarButton
         onClick={() => editor.chain().focus().redo().run()}
         disabled={!editor.can().redo()}
         title="Redo"
       >
-        <Redo className="w-4 h-4" />
+        <Redo className="h-4 w-4" />
       </ToolbarButton>
     </div>
   )
@@ -449,7 +449,7 @@ export function TipTapEditor({
 
   return (
     <div
-      className={`border border-gray-200 rounded-lg overflow-hidden bg-white ${className ?? ''}`}
+      className={`overflow-hidden rounded-lg border border-gray-200 bg-white ${className ?? ''}`}
     >
       {editable && <Toolbar editor={editor} onOpenMediaPicker={() => setMediaPickerOpen(true)} />}
       <EditorContent editor={editor} />

package/src/components/VersionHistory.tsx

@@ -93,27 +93,27 @@ export function VersionHistory({
   return (
     <div className="fixed inset-0 z-50 flex justify-end">
       <div className="fixed inset-0 bg-black/30" onClick={onClose} />
-      <div className="relative w-full max-w-md bg-white shadow-xl flex flex-col animate-in slide-in-from-right">
-        <div className="flex items-center justify-between px-4 py-3 border-b border-gray-200">
+      <div className="animate-in slide-in-from-right relative flex w-full max-w-md flex-col bg-white shadow-xl">
+        <div className="flex items-center justify-between border-b border-gray-200 px-4 py-3">
           <div className="flex items-center gap-2">
-            <Clock className="w-5 h-5 text-gray-600" />
+            <Clock className="h-5 w-5 text-gray-600" />
             <h2 className="text-lg font-semibold text-gray-900">Version History</h2>
           </div>
           <button
             onClick={onClose}
-            className="p-1.5 hover:bg-gray-100 rounded-lg transition-colors"
+            className="rounded-lg p-1.5 transition-colors hover:bg-gray-100"
           >
-            <X className="w-5 h-5 text-gray-500" />
+            <X className="h-5 w-5 text-gray-500" />
           </button>
         </div>
 
         <div className="flex-1 overflow-y-auto">
           {loading ? (
             <div className="flex items-center justify-center py-16">
-              <Loader2 className="w-6 h-6 animate-spin text-gray-400" />
+              <Loader2 className="h-6 w-6 animate-spin text-gray-400" />
             </div>
           ) : versions.length === 0 ? (
-            <div className="text-center py-16 text-sm text-gray-500">
+            <div className="py-16 text-center text-sm text-gray-500">
               No version history available
             </div>
           ) : (
@@ -126,23 +126,23 @@ export function VersionHistory({
                 const isLatest = index === 0
 
                 return (
-                  <div key={version.id} className="px-4 py-3 hover:bg-gray-50 transition-colors">
+                  <div key={version.id} className="px-4 py-3 transition-colors hover:bg-gray-50">
                     <div className="flex items-start justify-between gap-3">
-                      <div className="flex-1 min-w-0">
-                        <div className="flex items-center gap-2 mb-1">
+                      <div className="min-w-0 flex-1">
+                        <div className="mb-1 flex items-center gap-2">
                           <span
-                            className={`inline-flex px-2 py-0.5 rounded-full text-xs font-medium ${typeInfo.color}`}
+                            className={`inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${typeInfo.color}`}
                           >
                             {typeInfo.label}
                           </span>
                           {isLatest && (
-                            <span className="text-xs text-gray-400 font-medium">Current</span>
+                            <span className="text-xs font-medium text-gray-400">Current</span>
                           )}
                         </div>
                         <div className="flex items-center gap-3 text-xs text-gray-500">
                           {version.changedBy && (
                             <span className="flex items-center gap-1">
-                              <User className="w-3 h-3" />
+                              <User className="h-3 w-3" />
                               {version.changedBy.name ?? version.changedBy.email ?? 'Unknown'}
                             </span>
                           )}
@@ -155,12 +155,12 @@ export function VersionHistory({
                         <button
                           onClick={() => handleRestore(version)}
                           disabled={restoring === version.id}
-                          className="flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium text-blue-700 bg-blue-50 rounded-lg hover:bg-blue-100 transition-colors disabled:opacity-50"
+                          className="flex items-center gap-1.5 rounded-lg bg-blue-50 px-2.5 py-1.5 text-xs font-medium text-blue-700 transition-colors hover:bg-blue-100 disabled:opacity-50"
                         >
                           {restoring === version.id ? (
-                            <Loader2 className="w-3.5 h-3.5 animate-spin" />
+                            <Loader2 className="h-3.5 w-3.5 animate-spin" />
                           ) : (
-                            <RotateCcw className="w-3.5 h-3.5" />
+                            <RotateCcw className="h-3.5 w-3.5" />
                           )}
                           Restore
                         </button>

package/src/components/ui/Badge.tsx

@@ -1,27 +1,79 @@
-export interface BadgeProps {
-  status: 'published' | 'draft' | 'archived' | 'scheduled'
-}
+import type { HTMLAttributes, ReactNode } from 'react'
+import { cv, type VariantProps } from '../../lib/cv.js'
+
+const badge = cv('inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium', {
+  variants: {
+    tone: {
+      neutral: 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-300',
+      success: 'bg-emerald-100 text-emerald-800 dark:bg-emerald-900/30 dark:text-emerald-400',
+      warning: 'bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-400',
+      danger: 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400',
+      info: 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400',
+      primary: 'bg-[var(--primary)]/15 text-[var(--primary)] dark:bg-[var(--primary)]/25',
+    },
+    size: {
+      sm: 'px-2 py-0.5 text-[10px]',
+      md: 'px-2.5 py-0.5 text-xs',
+      lg: 'px-3 py-1 text-sm',
+    },
+  },
+  defaultVariants: { tone: 'neutral', size: 'md' },
+})
 
-const statusClasses: Record<BadgeProps['status'], string> = {
-  published: 'bg-emerald-100 text-emerald-800 dark:bg-emerald-900/30 dark:text-emerald-400',
-  draft: 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-300',
-  archived: 'bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-400',
-  scheduled: 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400',
+export type BadgeVariants = VariantProps<typeof badge>
+
+/**
+ * Map document statuses to badge tones. Exposed so callers can reuse the
+ * mapping (e.g. for the same status rendered as a dot indicator).
+ */
+export const STATUS_TONE: Record<DocumentStatus, BadgeVariants['tone']> = {
+  published: 'success',
+  draft: 'neutral',
+  archived: 'warning',
+  scheduled: 'info',
 }
 
-const statusLabels: Record<BadgeProps['status'], string> = {
+export const STATUS_LABEL: Record<DocumentStatus, string> = {
   published: 'Published',
   draft: 'Draft',
   archived: 'Archived',
   scheduled: 'Scheduled',
 }
 
-export function Badge({ status }: BadgeProps) {
+export type DocumentStatus = 'published' | 'draft' | 'archived' | 'scheduled'
+
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement>, BadgeVariants {
+  /**
+   * Shorthand for the canonical document status badge. When set, takes
+   * precedence over `tone` and uses the matching label.
+   */
+  status?: DocumentStatus
+  /** Render as outlined (border + transparent background). */
+  outline?: boolean
+  children?: ReactNode
+}
+
+const OUTLINE_CLASS = 'border border-current bg-transparent'
+
+/**
+ * Generic typed badge. Pass `status` for the canonical document-status
+ * variants (preserves the original Badge API), or `tone` / `outline` /
+ * `size` for everything else.
+ */
+export function Badge({ status, tone, outline, size, className, children, ...rest }: BadgeProps) {
+  const extras = [outline ? OUTLINE_CLASS : '', className].filter(Boolean).join(' ')
+  if (status) {
+    return (
+      <span className={badge({ tone: STATUS_TONE[status], size, class: extras })} {...rest}>
+        {children ?? STATUS_LABEL[status]}
+      </span>
+    )
+  }
   return (
-    <span
-      className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${statusClasses[status]}`}
-    >
-      {statusLabels[status]}
+    <span className={badge({ tone, size, class: extras })} {...rest}>
+      {children}
     </span>
   )
 }
+
+export { badge as badgeVariants }

package/src/components/ui/Button.tsx

@@ -1,47 +1,79 @@
 'use client'
 
-import { type ButtonHTMLAttributes, type ReactNode } from 'react'
+import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react'
+import { cv, type VariantProps } from '../../lib/cv.js'
 
-type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'ghost'
-type ButtonSize = 'sm' | 'md' | 'lg'
+const button = cv(
+  // Base classes apply to every variant.
+  'focus-visible:ring-offset-background inline-flex items-center justify-center gap-2 rounded-[var(--radius)] font-medium transition-colors focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        primary: 'bg-[var(--primary)] text-[var(--primary-foreground)] hover:opacity-90',
+        secondary: 'bg-[var(--secondary)] text-[var(--secondary-foreground)] hover:opacity-80',
+        danger: 'bg-[var(--destructive)] text-[var(--destructive-foreground)] hover:opacity-90',
+        ghost: 'bg-transparent text-[var(--foreground)] hover:bg-[var(--accent)]',
+        outline:
+          'border border-[var(--border)] bg-transparent text-[var(--foreground)] hover:bg-[var(--accent)]',
+        link: 'bg-transparent text-[var(--primary)] underline-offset-4 hover:underline',
+      },
+      size: {
+        xs: 'h-7 px-2 text-xs',
+        sm: 'h-8 px-2.5 text-xs',
+        md: 'h-9 px-4 text-sm',
+        lg: 'h-10 px-6 text-base',
+        icon: 'h-9 w-9 p-0',
+      },
+    },
+    defaultVariants: {
+      variant: 'primary',
+      size: 'md',
+    },
+  },
+)
 
-export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: ButtonVariant
-  size?: ButtonSize
-  loading?: boolean
-  children: ReactNode
-}
-
-const variantClasses: Record<ButtonVariant, string> = {
-  primary: 'bg-[var(--primary)] text-[var(--primary-foreground)] hover:opacity-90',
-  secondary: 'bg-[var(--secondary)] text-[var(--secondary-foreground)] hover:opacity-80',
-  danger: 'bg-[var(--destructive)] text-[var(--destructive-foreground)] hover:opacity-90',
-  ghost: 'bg-transparent hover:bg-[var(--accent)] text-[var(--foreground)]',
-}
+export type ButtonVariants = VariantProps<typeof button>
 
-const sizeClasses: Record<ButtonSize, string> = {
-  sm: 'px-2.5 py-1 text-xs',
-  md: 'px-4 py-2 text-sm',
-  lg: 'px-6 py-2.5 text-base',
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, ButtonVariants {
+  loading?: boolean
+  /** Stretch the button to fill its container width. */
+  full?: boolean
+  /** Icon rendered before the children. Use with `size="icon"` for icon-only buttons. */
+  leftIcon?: ReactNode
+  /** Icon rendered after the children. */
+  rightIcon?: ReactNode
+  children?: ReactNode
 }
 
-export function Button({
-  variant = 'primary',
-  size = 'md',
-  loading = false,
-  disabled,
-  children,
-  className = '',
-  ...rest
-}: ButtonProps) {
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
+  {
+    variant,
+    size,
+    full,
+    loading = false,
+    disabled,
+    leftIcon,
+    rightIcon,
+    children,
+    className,
+    ...rest
+  },
+  ref,
+) {
   return (
     <button
+      ref={ref}
       disabled={disabled || loading}
-      className={`inline-flex items-center justify-center gap-2 rounded-[var(--radius)] font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 ${variantClasses[variant]} ${sizeClasses[size]} ${className}`}
+      aria-busy={loading || undefined}
+      className={button({
+        variant,
+        size,
+        class: [full ? 'w-full' : '', className].filter(Boolean).join(' '),
+      })}
       {...rest}
     >
-      {loading && (
-        <svg className="h-4 w-4 animate-spin" viewBox="0 0 24 24" fill="none">
+      {loading ? (
+        <svg className="h-4 w-4 animate-spin" viewBox="0 0 24 24" fill="none" aria-hidden>
           <circle
             className="opacity-25"
             cx="12"
@@ -56,8 +88,13 @@ export function Button({
             d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"
           />
         </svg>
+      ) : (
+        leftIcon
       )}
       {children}
+      {!loading && rightIcon}
     </button>
   )
-}
+})
+
+export { button as buttonVariants }

package/src/components/ui/Card.tsx

@@ -0,0 +1,101 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from 'react'
+import { cv, type VariantProps } from '../../lib/cv.js'
+
+const card = cv(
+  'rounded-[var(--radius)] border border-[var(--border)] bg-[var(--card)] text-[var(--card-foreground)]',
+  {
+    variants: {
+      padding: {
+        none: 'p-0',
+        sm: 'p-4',
+        md: 'p-6',
+        lg: 'p-8',
+      },
+      elevation: {
+        flat: 'shadow-none',
+        sm: 'shadow-sm',
+        md: 'shadow-md',
+        lg: 'shadow-lg',
+      },
+    },
+    defaultVariants: { padding: 'md', elevation: 'sm' },
+  },
+)
+
+export type CardVariants = VariantProps<typeof card>
+
+const INTERACTIVE_CLASS = 'transition-shadow hover:shadow-md focus-within:shadow-md'
+
+export interface CardProps extends HTMLAttributes<HTMLDivElement>, CardVariants {
+  /** Apply hover/focus elevation transitions (e.g. for clickable cards). */
+  interactive?: boolean
+  children?: ReactNode
+}
+
+export const Card = forwardRef<HTMLDivElement, CardProps>(function Card(
+  { padding, elevation, interactive, className, children, ...rest },
+  ref,
+) {
+  const extras = [interactive ? INTERACTIVE_CLASS : '', className].filter(Boolean).join(' ')
+  return (
+    <div ref={ref} className={card({ padding, elevation, class: extras })} {...rest}>
+      {children}
+    </div>
+  )
+})
+
+/**
+ * Header slot — sits at the top of a card. Pair with CardTitle / CardDescription.
+ */
+export function CardHeader({ className = '', children, ...rest }: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div className={`flex flex-col space-y-1.5 ${className}`} {...rest}>
+      {children}
+    </div>
+  )
+}
+
+export function CardTitle({
+  className = '',
+  children,
+  ...rest
+}: HTMLAttributes<HTMLHeadingElement>) {
+  return (
+    <h3
+      className={`text-lg leading-tight font-semibold tracking-tight text-[var(--card-foreground)] ${className}`}
+      {...rest}
+    >
+      {children}
+    </h3>
+  )
+}
+
+export function CardDescription({
+  className = '',
+  children,
+  ...rest
+}: HTMLAttributes<HTMLParagraphElement>) {
+  return (
+    <p className={`text-sm text-[var(--muted-foreground)] ${className}`} {...rest}>
+      {children}
+    </p>
+  )
+}
+
+export function CardContent({ className = '', children, ...rest }: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div className={className} {...rest}>
+      {children}
+    </div>
+  )
+}
+
+export function CardFooter({ className = '', children, ...rest }: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div className={`flex items-center justify-end gap-2 pt-4 ${className}`} {...rest}>
+      {children}
+    </div>
+  )
+}
+
+export { card as cardVariants }

package/src/components/ui/DataTable.tsx

@@ -161,7 +161,7 @@ function RowActionsMenu({ actions, row }: { actions: RowAction[]; row: Row }) {
         <MoreVerticalIcon />
       </button>
       {open && (
-        <div className="absolute right-0 top-full z-50 mt-1 w-40 rounded-md border border-[var(--border)] bg-[var(--popover)] py-1 shadow-lg">
+        <div className="absolute top-full right-0 z-50 mt-1 w-40 rounded-md border border-[var(--border)] bg-[var(--popover)] py-1 shadow-lg">
           {actions.map((action) => (
             <button
               key={action.key}