goobs-frontend 0.122.2 → 0.122.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "goobs-frontend",
-  "version": "0.122.2",
+  "version": "0.122.4",
   "type": "module",
   "description": "A comprehensive React-based libary for building modern web applications",
   "license": "MIT",
@@ -47,35 +47,35 @@
     "zod-formik-adapter": "^1"
   },
   "devDependencies": {
-    "@babel/core": "^7.28.0",
-    "@babel/generator": "^7.28.0",
-    "@babel/parser": "^7.28.0",
-    "@babel/traverse": "^7.28.0",
-    "@babel/types": "^7.28.0",
-    "@chromatic-com/storybook": "^4.0.1",
+    "@babel/core": "^7.28",
+    "@babel/generator": "^7.28",
+    "@babel/parser": "^7.28",
+    "@babel/traverse": "^7.28",
+    "@babel/types": "^7.28",
+    "@chromatic-com/storybook": "^4",
     "@next/eslint-plugin-next": "^15",
     "@storybook/addon-onboarding": "^9",
     "@storybook/nextjs": "^9",
     "@storybook/react": "^9",
     "@storybook/test": "^8",
     "@types/babel__generator": "^7.27.0",
-    "@types/babel__traverse": "^7.20.7",
-    "@types/react": "^19.1.8",
-    "@types/react-dom": "^19.1.6",
-    "@typescript-eslint/eslint-plugin": "^8.37",
-    "@typescript-eslint/parser": "^8.37",
-    "autoprefixer": "^10.4.21",
-    "chromatic": "^13.1.2",
-    "eslint": "^9.30.1",
-    "eslint-config-next": "^15.3.5",
-    "eslint-config-prettier": "^10.1.5",
-    "eslint-plugin-prettier": "^5.5.1",
-    "eslint-plugin-storybook": "^9.0.15",
-    "eslint-plugin-tsc": "^2.0.0",
-    "eslint-plugin-unused-imports": "^4.1.4",
-    "prettier": "^3.6.2",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
+    "@types/babel__traverse": "^7",
+    "@types/react": "^19.1",
+    "@types/react-dom": "^19.1",
+    "@typescript-eslint/eslint-plugin": "^8",
+    "@typescript-eslint/parser": "^8",
+    "autoprefixer": "^10",
+    "chromatic": "^13.1",
+    "eslint": "^9",
+    "eslint-config-next": "^15",
+    "eslint-config-prettier": "^10",
+    "eslint-plugin-prettier": "^5",
+    "eslint-plugin-storybook": "^9",
+    "eslint-plugin-tsc": "^2",
+    "eslint-plugin-unused-imports": "^4",
+    "prettier": "^3",
+    "react": "^19",
+    "react-dom": "^19",
     "typescript": "^5"
   },
   "files": [

package/src/components/Card/index.tsx

@@ -6,34 +6,12 @@
 import React, { forwardRef, useState, useMemo } from 'react'
 import { getCardStyles } from '../../theme/card'
 import type { CardStyles } from '../../theme/card'
+import { SACRED_GLYPHS, injectKeyframes } from '../../theme/shared'
 
 // --------------------------------------------------------------------------
-// SACRED GLYPHS CONSTANTS
+// SACRED GLYPHS CONSTANTS (from shared)
 // --------------------------------------------------------------------------
 
-const SACRED_GLYPHS: string[] = [
-  '⧈',
-  '◊',
-  '✦',
-  '⟡',
-  '◈',
-  '⬟',
-  '◉',
-  '⬢',
-  '⟐',
-  '◆',
-  '⬝',
-  '⟢',
-  '◇',
-  '⬡',
-  '⬛',
-  '⟁',
-  '◊',
-  '⬜',
-  '⟐',
-  '◈',
-]
-
 // --------------------------------------------------------------------------
 // CARD PROPS
 // --------------------------------------------------------------------------
@@ -126,7 +104,7 @@ const SacredBackground: React.FC<{
             height: '100%',
             background:
               'linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.1), transparent)',
-            animation: 'shimmer 1.5s ease-in-out',
+            animation: 'sacredShimmer 1.5s ease-in-out',
             zIndex: 1,
           }}
         />
@@ -175,7 +153,7 @@ const SacredBackgroundGlyphs: React.FC<{ isHovered: boolean }> = ({
             transform: `rotate(${randoms[index]?.rotation ?? 0}deg)`,
             userSelect: 'none',
             transition: 'opacity 0.3s ease',
-            animation: `rotateGlyph ${randoms[index]?.duration ?? 60}s linear infinite`,
+            animation: `sacredGlyphRotate ${randoms[index]?.duration ?? 60}s linear infinite`,
           }}
         >
           {glyph}
@@ -195,6 +173,10 @@ export const Card = forwardRef<HTMLDivElement, CardProps>(
     const isDisabled = styles?.disabled
     const isSacredTheme = styles?.theme === 'sacred'
 
+    React.useEffect(() => {
+      injectKeyframes()
+    }, [])
+
     const computedStyles = useMemo(
       () => getCardStyles(styles, isHovered, isDisabled, elevation),
       [styles, isHovered, isDisabled, elevation]
@@ -294,6 +276,13 @@ export const CardHeader = forwardRef<HTMLDivElement, CardHeaderProps>(
     ref
   ) => {
     const computedStyles = useMemo(() => getCardStyles(styles), [styles])
+    const themeName = styles?.theme || 'light'
+    const subtitleColor =
+      themeName === 'sacred'
+        ? 'rgba(255, 215, 0, 0.75)'
+        : themeName === 'dark'
+          ? 'rgba(248, 250, 252, 0.7)'
+          : 'rgba(0, 0, 0, 0.6)'
 
     return (
       <div
@@ -320,7 +309,7 @@ export const CardHeader = forwardRef<HTMLDivElement, CardHeaderProps>(
             <div
               style={{
                 fontSize: '0.875rem',
-                color: 'rgba(0, 0, 0, 0.6)',
+                color: subtitleColor,
                 lineHeight: 1.43,
               }}
             >
@@ -340,20 +329,3 @@ export const CardHeader = forwardRef<HTMLDivElement, CardHeaderProps>(
 CardHeader.displayName = 'CardHeader'
 
 export default Card
-
-// Add keyframes for animations if needed
-if (typeof document !== 'undefined') {
-  const styleSheet = document.createElement('style')
-  styleSheet.textContent = `
-    @keyframes rotateGlyph {
-      0% { transform: rotate(0deg); }
-      100% { transform: rotate(360deg); }
-    }
-    
-    @keyframes shimmer {
-      0% { left: -100%; }
-      100% { left: 100%; }
-    }
-  `
-  document.head.appendChild(styleSheet)
-}

package/src/components/DataGrid/MetricCard/index.tsx

@@ -211,7 +211,9 @@ export default function MetricCard({
     const standardCardStyle: React.CSSProperties = {
       height: '100%',
       background: 'linear-gradient(135deg, #ffffff 0%, #f8fafc 100%)',
-      border: `2px solid ${rgbaColor(0.2)}`,
+      borderWidth: '2px',
+      borderStyle: 'solid',
+      borderColor: rgbaColor(0.2),
       borderRadius: '12px',
       transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
       cursor: 'pointer',
@@ -318,7 +320,9 @@ export default function MetricCard({
   const sacredCardStyle: React.CSSProperties = {
     height: '100%',
     background: `linear-gradient(135deg, ${egyptianStyles.cardBackground} 0%, rgba(22, 33, 62, 0.95) 100%)`,
-    border: `2px solid ${rgbaColor(0.5)}`,
+    borderWidth: '2px',
+    borderStyle: 'solid',
+    borderColor: rgbaColor(0.5),
     borderRadius: '12px',
     position: 'relative',
     overflow: 'hidden',
@@ -418,7 +422,9 @@ export default function MetricCard({
     padding: '8px',
     borderRadius: '8px',
     backgroundColor: rgbaColor(0.15),
-    border: `1px solid ${rgbaColor(0.3)}`,
+    borderWidth: '1px',
+    borderStyle: 'solid',
+    borderColor: rgbaColor(0.3),
     boxShadow: `0 0 10px ${rgbaColor(0.2)}`,
     display: 'flex',
     alignItems: 'center',

package/src/components/DataGrid/Table/CreationRow/index.tsx

@@ -24,6 +24,7 @@ import VLANField from '../../../Field/IPAM/VLAN'
 import CIDRField from '../../../Field/IPAM/CIDR'
 import SupernetField from '../../../Field/IPAM/Supernet'
 import MACAddressField from '../../../Field/IPAM/MACAddress'
+import USDField from '../../../Field/USD'
 
 interface CreationRowProps {
   columns: ColumnDef[]
@@ -71,6 +72,24 @@ const CreationRow: React.FC<CreationRowProps> = ({
     }
 
     switch (fieldConfig.type) {
+      case 'currency':
+      case 'usd': {
+        return (
+          <USDField
+            initialValue={String(value ?? '')}
+            onChange={(newValue: string) =>
+              onCreationFieldChange?.(column.field, newValue)
+            }
+            {...(fieldConfig.placeholder
+              ? { placeholder: fieldConfig.placeholder }
+              : {})}
+            {...(fieldConfig.helperText
+              ? { helperText: fieldConfig.helperText }
+              : {})}
+            styles={fieldStyles}
+          />
+        )
+      }
       case 'text':
         return (
           <TextField

package/src/components/DataGrid/types/index.ts

@@ -57,6 +57,8 @@ export interface ColumnDef {
     type:
       | 'text'
       | 'date'
+      | 'currency'
+      | 'usd'
       | 'dropdown'
       | 'searchableDropdown'
       | 'multiselect'

package/src/components/Table/index.tsx

@@ -1,27 +1,10 @@
 'use client'
 
 import React from 'react'
+import { getTableStyles } from '../../theme'
+import type { TableStyles as ThemeTableStyles } from '../../theme'
 
-// Alpha utility function
-const alpha = (color: string, opacity: number): string => {
-  if (color.startsWith('#')) {
-    const hex = color.slice(1)
-    const r = parseInt(hex.slice(0, 2), 16)
-    const g = parseInt(hex.slice(2, 4), 16)
-    const b = parseInt(hex.slice(4, 6), 16)
-    return `rgba(${r}, ${g}, ${b}, ${opacity})`
-  }
-  return color
-}
-
-export interface TableStyles {
-  theme?: 'sacred' | 'light' | 'dark'
-  backgroundColor?: string
-  borderColor?: string
-  width?: string
-  maxWidth?: string
-  borderRadius?: string
-}
+export type TableStyles = ThemeTableStyles
 
 export interface SimpleTableProps {
   children: React.ReactNode
@@ -31,7 +14,6 @@ export interface SimpleTableProps {
 export interface TableContainerProps {
   children: React.ReactNode
   styles?: TableStyles
-  sx?: React.CSSProperties
 }
 
 export interface TableHeadProps {
@@ -56,146 +38,28 @@ export interface TableCellProps {
   styles?: TableStyles
 }
 
-const getTableTheme = (styles?: TableStyles) => {
-  const theme = styles?.theme || 'light'
-  const goldColor = '#FFD700'
-
-  switch (theme) {
-    case 'sacred':
-      return {
-        container: {
-          backgroundColor: alpha('#000000', 0.8),
-          borderColor: alpha(goldColor, 0.3),
-          borderRadius: '8px',
-        },
-        table: {
-          backgroundColor: 'transparent',
-        },
-        header: {
-          backgroundColor: alpha(goldColor, 0.1),
-          borderColor: alpha(goldColor, 0.3),
-          color: goldColor,
-          fontFamily: '"Cinzel", serif',
-          fontWeight: 700,
-          textTransform: 'uppercase' as const,
-          letterSpacing: '0.05em',
-        },
-        cell: {
-          borderColor: alpha(goldColor, 0.2),
-          color: alpha(goldColor, 0.9),
-          fontFamily: '"Merriweather", serif',
-        },
-        row: {
-          '&:hover': {
-            backgroundColor: alpha(goldColor, 0.05),
-          },
-        },
-      }
-    case 'dark':
-      return {
-        container: {
-          backgroundColor: '#1a1a1a',
-          borderColor: '#333333',
-          borderRadius: '4px',
-        },
-        table: {
-          backgroundColor: 'transparent',
-        },
-        header: {
-          backgroundColor: '#2a2a2a',
-          borderColor: '#444444',
-          color: '#ffffff',
-          fontWeight: 600,
-        },
-        cell: {
-          borderColor: '#333333',
-          color: '#ffffff',
-        },
-        row: {
-          '&:hover': {
-            backgroundColor: alpha('#ffffff', 0.05),
-          },
-        },
-      }
-    default: // light
-      return {
-        container: {
-          backgroundColor: '#ffffff',
-          borderColor: '#e0e0e0',
-          borderRadius: '4px',
-        },
-        table: {
-          backgroundColor: 'transparent',
-        },
-        header: {
-          backgroundColor: '#f5f5f5',
-          borderColor: '#e0e0e0',
-          color: '#333333',
-          fontWeight: 600,
-        },
-        cell: {
-          borderColor: '#e0e0e0',
-          color: '#333333',
-        },
-        row: {
-          '&:hover': {
-            backgroundColor: alpha('#000000', 0.05),
-          },
-        },
-      }
-  }
-}
-
 export const TableContainer: React.FC<TableContainerProps> = ({
   children,
   styles,
-  sx,
 }) => {
-  const themeConfig = getTableTheme(styles)
-
-  const containerStyle: React.CSSProperties = {
-    ...themeConfig.container,
-    border: `1px solid ${themeConfig.container.borderColor}`,
-    overflowX: 'auto',
-    width: styles?.width || '100%',
-    maxWidth: styles?.maxWidth || '100%',
-    ...sx,
-  }
+  const themeConfig = getTableStyles(styles)
 
-  return <div style={containerStyle}>{children}</div>
+  return <div style={themeConfig.container}>{children}</div>
 }
 
 export const Table: React.FC<SimpleTableProps> = ({ children, styles }) => {
-  const themeConfig = getTableTheme(styles)
-
-  const tableStyle: React.CSSProperties = {
-    ...themeConfig.table,
-    width: '100%',
-    borderCollapse: 'collapse',
-    tableLayout: 'auto',
-  }
-
-  return <table style={tableStyle}>{children}</table>
+  const themeConfig = getTableStyles(styles)
+  return <table style={themeConfig.table}>{children}</table>
 }
 
 export const TableHead: React.FC<TableHeadProps> = ({ children, styles }) => {
-  const themeConfig = getTableTheme(styles)
-
-  const headStyle: React.CSSProperties = {
-    ...themeConfig.header,
-  }
-
-  return <thead style={headStyle}>{children}</thead>
+  const themeConfig = getTableStyles(styles)
+  return <thead style={themeConfig.header}>{children}</thead>
 }
 
 export const TableBody: React.FC<TableBodyProps> = ({ children, styles }) => {
-  const themeConfig = getTableTheme(styles)
-
-  const bodyStyle: React.CSSProperties = {
-    ...themeConfig.table,
-  }
-
-  return <tbody style={bodyStyle}>{children}</tbody>
+  const themeConfig = getTableStyles(styles)
+  return <tbody style={themeConfig.table}>{children}</tbody>
 }
 
 export const TableRow: React.FC<TableRowProps> = ({
@@ -203,19 +67,15 @@ export const TableRow: React.FC<TableRowProps> = ({
   hover = false,
   styles,
 }) => {
+  const themeConfig = getTableStyles(styles)
   const rowStyle: React.CSSProperties = {
-    ...(hover && {
-      transition: 'background-color 0.2s ease',
-    }),
+    ...themeConfig.row,
   }
 
   const handleMouseEnter = (e: React.MouseEvent<HTMLTableRowElement>) => {
-    if (hover && styles?.theme === 'sacred') {
-      e.currentTarget.style.backgroundColor = alpha('#FFD700', 0.05)
-    } else if (hover && styles?.theme === 'dark') {
-      e.currentTarget.style.backgroundColor = alpha('#ffffff', 0.05)
-    } else if (hover) {
-      e.currentTarget.style.backgroundColor = alpha('#000000', 0.05)
+    if (hover) {
+      e.currentTarget.style.backgroundColor =
+        themeConfig.rowHoverBackgroundColor
     }
   }
 
@@ -241,18 +101,15 @@ export const TableCell: React.FC<TableCellProps> = ({
   align = 'left',
   styles,
 }) => {
-  const themeConfig = getTableTheme(styles)
+  const themeConfig = getTableStyles(styles)
   const isHeader =
     React.isValidElement(children) &&
     (children as React.ReactElement).type === 'th'
 
   const cellStyle: React.CSSProperties = {
-    padding: '12px 16px',
+    ...themeConfig.cell,
     textAlign: align,
-    borderBottom: `1px solid ${themeConfig.cell.borderColor}`,
-    color: themeConfig.cell.color,
-    fontFamily: themeConfig.cell.fontFamily,
-    verticalAlign: 'middle',
+    borderBottom: `1px solid ${themeConfig.cell.borderColor || 'transparent'}`,
     ...(isHeader && themeConfig.header),
   }
 

package/src/index.ts

@@ -191,6 +191,10 @@ import type {
   MetricCardData,
 } from './components/DataGrid/types'
 
+// DataGrid components
+import MetricCard from './components/DataGrid/MetricCard'
+import MetricSection from './components/DataGrid/MetricSection'
+
 // Colors
 import {
   moss,
@@ -360,6 +364,7 @@ export { Fade }
 export { Slide }
 export { Zoom }
 export { BigCalendar }
+export { MetricCard, MetricSection }
 
 // Export utilities
 export { alpha, keyframes, css, commonKeyframes }

package/src/theme/card.ts

@@ -11,7 +11,9 @@ import { TRANSITIONS, SHADOWS } from './shared'
 export interface CardTheme {
   container: {
     background: string
-    border: string
+    borderWidth?: string
+    borderStyle?: React.CSSProperties['borderStyle']
+    borderColor?: string
     borderRadius: string
     boxShadow: string
     backdropFilter: string
@@ -86,6 +88,7 @@ export interface CardStyles {
   borderColor?: string
   borderRadius?: string
   borderWidth?: string
+  borderStyle?: React.CSSProperties['borderStyle']
   boxShadow?: string
   backdropFilter?: string
   backgroundImage?: string
@@ -136,7 +139,9 @@ export interface CardStyles {
 const lightTheme: CardTheme = {
   container: {
     background: 'rgba(255, 255, 255, 0.95)',
-    border: '1px solid rgba(226, 232, 240, 0.6)',
+    borderWidth: '1px',
+    borderStyle: 'solid',
+    borderColor: 'rgba(226, 232, 240, 0.6)',
     borderRadius: '8px',
     boxShadow: SHADOWS.light.small,
     backdropFilter: 'blur(8px)',
@@ -175,7 +180,9 @@ const lightTheme: CardTheme = {
 const darkTheme: CardTheme = {
   container: {
     background: 'rgba(30, 41, 59, 0.95)',
-    border: '1px solid rgba(71, 85, 105, 0.6)',
+    borderWidth: '1px',
+    borderStyle: 'solid',
+    borderColor: 'rgba(71, 85, 105, 0.6)',
     borderRadius: '8px',
     boxShadow: SHADOWS.dark.small,
     backdropFilter: 'blur(12px)',
@@ -219,7 +226,9 @@ const sacredTheme: CardTheme = {
       rgba(26, 26, 26, 0.97) 50%,
       rgba(10, 10, 10, 0.95) 100%
     )`,
-    border: '2px solid rgba(255, 215, 0, 0.4)',
+    borderWidth: '2px',
+    borderStyle: 'solid',
+    borderColor: 'rgba(255, 215, 0, 0.4)',
     borderRadius: '12px',
     boxShadow: `${SHADOWS.sacred.small}, 0 8px 32px rgba(0, 0, 0, 0.3)`,
     backdropFilter: 'blur(16px)',
@@ -337,6 +346,7 @@ export const getCardStyles = (
     boxShadow,
     ...(styles?.backgroundColor && { backgroundColor: styles.backgroundColor }),
     ...(styles?.borderColor && { borderColor: styles.borderColor }),
+    ...(styles?.borderWidth && { borderWidth: styles.borderWidth }),
     ...(styles?.borderRadius && { borderRadius: styles.borderRadius }),
     ...(styles?.boxShadow && { boxShadow: styles.boxShadow }),
     ...(styles?.color && { color: styles.color }),

package/src/theme/chip.ts

@@ -594,6 +594,27 @@ export const getChipStyles = (
 ) => {
   const themeConfig = getChipTheme(styles)
 
+  const parseBorder = (border: string) => {
+    if (!border) {
+      return {
+        width: undefined as string | undefined,
+        style: undefined as string | undefined,
+        color: undefined as string | undefined,
+      }
+    }
+    const parts = border.trim().split(' ')
+    const width = parts[0]
+    const style = parts[1]
+    const color = parts.slice(2).join(' ')
+    return { width, style, color }
+  }
+
+  const {
+    width: baseBorderWidth,
+    style: baseBorderStyle,
+    color: baseBorderColor,
+  } = parseBorder(themeConfig.container.border)
+
   const containerStyle: React.CSSProperties = {
     display: 'flex',
     alignItems: 'center',
@@ -601,7 +622,12 @@ export const getChipStyles = (
     overflow: styles?.whiteSpace === 'normal' ? 'visible' : 'hidden',
     transition: themeConfig.transition,
     borderRadius: themeConfig.container.borderRadius,
-    border: themeConfig.container.border,
+    borderWidth:
+      baseBorderStyle === 'none'
+        ? 0
+        : (baseBorderWidth as unknown as number | string),
+    borderStyle: baseBorderStyle as any,
+    borderColor: baseBorderColor,
     backgroundColor: themeConfig.container.background,
     backdropFilter: themeConfig.container.backdropFilter,
     boxShadow: themeConfig.container.boxShadow,
@@ -644,7 +670,7 @@ export const getChipStyles = (
       }),
     // Apply outline override
     ...(styles?.outline === false && {
-      border: 'none',
+      borderWidth: 0,
       boxShadow: 'none',
     }),
   }

package/src/theme/index.ts

@@ -556,3 +556,4 @@ export * from './list'
 export * from './paper'
 export * from './popover'
 export * from './pricingtable'
+export * from './table'

package/src/theme/table.ts

@@ -0,0 +1,188 @@
+// --------------------------------------------------------------------------
+// TABLE THEME SYSTEM
+// --------------------------------------------------------------------------
+import React from 'react'
+import { alpha } from '../utils/alpha'
+
+export interface TableTheme {
+  container: React.CSSProperties
+  table: React.CSSProperties
+  header: React.CSSProperties
+  cell: React.CSSProperties
+  row: React.CSSProperties
+  rowHoverBackgroundColor: string
+}
+
+export interface TableStyles {
+  theme?: 'sacred' | 'light' | 'dark'
+  backgroundColor?: string
+  borderColor?: string
+  borderRadius?: string
+  width?: string
+  maxWidth?: string
+  color?: string
+  headerBackgroundColor?: string
+  headerColor?: string
+  fontFamily?: string
+  cellBorderColor?: string
+}
+
+const goldColor = '#FFD700'
+
+const lightTheme: TableTheme = {
+  container: {
+    backgroundColor: '#ffffff',
+    borderColor: '#e0e0e0',
+    borderRadius: '4px',
+    borderStyle: 'solid',
+    borderWidth: '1px',
+    overflowX: 'auto',
+    width: '100%',
+    maxWidth: '100%',
+  },
+  table: {
+    backgroundColor: 'transparent',
+    width: '100%',
+    borderCollapse: 'collapse',
+    tableLayout: 'auto',
+  },
+  header: {
+    backgroundColor: '#f5f5f5',
+    borderBottom: '1px solid #e0e0e0',
+    color: '#333333',
+    fontWeight: 600,
+  },
+  cell: {
+    borderColor: '#e0e0e0',
+    color: '#333333',
+    padding: '12px 16px',
+    verticalAlign: 'middle',
+  },
+  row: {
+    transition: 'background-color 0.2s ease',
+  },
+  rowHoverBackgroundColor: alpha('#000000', 0.05),
+}
+
+const darkTheme: TableTheme = {
+  container: {
+    backgroundColor: '#1a1a1a',
+    borderColor: '#333333',
+    borderRadius: '4px',
+    borderStyle: 'solid',
+    borderWidth: '1px',
+    overflowX: 'auto',
+    width: '100%',
+    maxWidth: '100%',
+  },
+  table: {
+    backgroundColor: 'transparent',
+    width: '100%',
+    borderCollapse: 'collapse',
+    tableLayout: 'auto',
+  },
+  header: {
+    backgroundColor: '#2a2a2a',
+    borderBottom: '1px solid #444444',
+    color: '#ffffff',
+    fontWeight: 600,
+  },
+  cell: {
+    borderColor: '#333333',
+    color: '#ffffff',
+    padding: '12px 16px',
+    verticalAlign: 'middle',
+  },
+  row: {
+    transition: 'background-color 0.2s ease',
+  },
+  rowHoverBackgroundColor: alpha('#ffffff', 0.05),
+}
+
+const sacredTheme: TableTheme = {
+  container: {
+    backgroundColor: alpha('#000000', 0.8),
+    borderColor: alpha(goldColor, 0.3),
+    borderRadius: '8px',
+    borderStyle: 'solid',
+    borderWidth: '1px',
+    overflowX: 'auto',
+    width: '100%',
+    maxWidth: '100%',
+  },
+  table: {
+    backgroundColor: 'transparent',
+    width: '100%',
+    borderCollapse: 'collapse',
+    tableLayout: 'auto',
+  },
+  header: {
+    backgroundColor: alpha(goldColor, 0.1),
+    borderBottom: `1px solid ${alpha(goldColor, 0.3)}`,
+    color: goldColor,
+    fontFamily: '"Cinzel", serif',
+    fontWeight: 700,
+    textTransform: 'uppercase',
+    letterSpacing: '0.05em',
+  },
+  cell: {
+    borderColor: alpha(goldColor, 0.2),
+    color: alpha(goldColor, 0.9),
+    fontFamily: '"Merriweather", serif',
+    padding: '12px 16px',
+    verticalAlign: 'middle',
+  },
+  row: {
+    transition: 'background-color 0.2s ease',
+  },
+  rowHoverBackgroundColor: alpha(goldColor, 0.05),
+}
+
+export const tableThemes: Record<'light' | 'dark' | 'sacred', TableTheme> = {
+  light: lightTheme,
+  dark: darkTheme,
+  sacred: sacredTheme,
+}
+
+export const getTableTheme = (styles?: TableStyles): TableTheme => {
+  const theme: 'light' | 'dark' | 'sacred' = styles?.theme || 'light'
+  const base = tableThemes[theme]
+
+  const container: React.CSSProperties = {
+    ...base.container,
+    ...(styles?.backgroundColor && { backgroundColor: styles.backgroundColor }),
+    ...(styles?.borderColor && { borderColor: styles.borderColor }),
+    ...(styles?.borderRadius && { borderRadius: styles.borderRadius }),
+    ...(styles?.width && { width: styles.width }),
+    ...(styles?.maxWidth && { maxWidth: styles.maxWidth }),
+  }
+
+  const header: React.CSSProperties = {
+    ...base.header,
+    ...(styles?.headerBackgroundColor && {
+      backgroundColor: styles.headerBackgroundColor,
+    }),
+    ...(styles?.headerColor && { color: styles.headerColor }),
+    ...(styles?.fontFamily && { fontFamily: styles.fontFamily }),
+  }
+
+  const cell: React.CSSProperties = {
+    ...base.cell,
+    ...(styles?.color && { color: styles.color }),
+    ...(styles?.fontFamily && { fontFamily: styles.fontFamily }),
+    ...(styles?.cellBorderColor && { borderColor: styles.cellBorderColor }),
+  }
+
+  return {
+    container,
+    table: base.table,
+    header,
+    cell,
+    row: base.row,
+    rowHoverBackgroundColor: base.rowHoverBackgroundColor,
+  }
+}
+
+export const getTableStyles = (styles?: TableStyles): TableTheme => {
+  return getTableTheme(styles)
+}