dolphincss 1.0.6 → 1.1.7

package/MainCss/variable.css

@@ -1,196 +0,0 @@
-@import "tailwindcss";
-
-:root {
-  /* Primary Colors - Sea Blue */
-  --color-primary: oklch(55% 0.12 200);
-  --color-primary-dark: oklch(45% 0.14 200);
-  --color-secondary: oklch(60% 0.08 190);
-
-  /* Semantic Colors - Ocean Inspired */
-  --color-success: oklch(65% 0.12 160);
-  --color-warning: oklch(75% 0.15 80);
-  --color-danger: oklch(60% 0.15 10);
-  --color-info: oklch(70% 0.10 220);
-
-  /* Neutral Colors */
-  --color-surface: oklch(96% 0.01 210);
-  --color-surface-alt: oklch(92% 0.015 210);
-  --color-text: oklch(22% 0.03 210);
-  --color-text-muted: oklch(45% 0.04 210);
-  --color-border: oklch(85% 0.02 210);
-  --color-shadow: oklch(0% 0 0 / 0.2);
-
-  /* Gradients */
-  --gradient-primary: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
-  --gradient-success: linear-gradient(135deg, var(--color-success), oklch(60% 0.12 160));
-  --gradient-warning: linear-gradient(135deg, var(--color-warning), oklch(70% 0.15 80));
-  --gradient-danger: linear-gradient(135deg, var(--color-danger), oklch(55% 0.15 10));
-  --gradient-info: linear-gradient(135deg, var(--color-info), oklch(65% 0.11 220));
-  --gradient-ocean: linear-gradient(135deg, #a5f3fc, #67e8f9, #22d3ee);
-
-  /* ===== GLASSMORPHISM VARIABLES - UPDATED FOR BETTER VISIBILITY ===== */
-  --glass-bg: rgba(255, 255, 255, 0.25);  /* Increased opacity */
-  --glass-bg-alt: rgba(255, 255, 255, 0.35); /* More visible on hover */
-  --glass-border: rgba(255, 255, 255, 0.35); /* Stronger border */
-  --glass-border-alt: rgba(255, 255, 255, 0.25);
-  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* Enhanced shadow */
-  --glass-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.2);
-  --glass-blur: blur(20px); /* More blur for better effect */
-  --glass-blur-sm: blur(12px);
-  --glass-blur-lg: blur(24px);
-
-  /* Glass Background Colors for Variants */
-  --glass-primary-bg: rgba(59, 130, 246, 0.25);
-  --glass-success-bg: rgba(34, 197, 94, 0.25);
-  --glass-warning-bg: rgba(251, 191, 36, 0.25);
-  --glass-danger-bg: rgba(239, 68, 68, 0.25);
-  --glass-info-bg: rgba(59, 130, 246, 0.25);
-
-  /* Glass Border Colors for Variants */
-  --glass-primary-border: rgba(59, 130, 246, 0.4);
-  --glass-success-border: rgba(34, 197, 94, 0.4);
-  --glass-warning-border: rgba(251, 191, 36, 0.4);
-  --glass-danger-border: rgba(239, 68, 68, 0.4);
-  --glass-info-border: rgba(59, 130, 246, 0.4);
-
-  /* Glow Effects - Enhanced */
-  --glow-primary: 0 0 25px rgba(59, 130, 246, 0.5);
-  --glow-success: 0 0 25px rgba(34, 197, 94, 0.5);
-  --glow-warning: 0 0 25px rgba(251, 191, 36, 0.5);
-  --glow-danger: 0 0 25px rgba(239, 68, 68, 0.5);
-  --glow-info: 0 0 25px rgba(59, 130, 246, 0.5);
-  --glow-secondary: 0 0 25px rgba(139, 92, 246, 0.5);
-
-  /* Input Glow */
-  --glow-input: 0 0 0 3px rgba(59, 130, 246, 0.3);
-}
-
-[data-theme="dark"] {
-  /* Primary Colors */
-  --color-primary: oklch(45% 0.12 200);
-  --color-primary-dark: oklch(35% 0.14 200);
-  --color-secondary: oklch(48% 0.08 190);
-
-  /* Semantic Colors */
-  --color-success: oklch(55% 0.12 160);
-  --color-warning: oklch(65% 0.15 80);
-  --color-danger: oklch(55% 0.15 10);
-  --color-info: oklch(60% 0.10 220);
-
-  /* Neutral Colors */
-  --color-surface: oklch(18% 0.02 210);
-  --color-surface-alt: oklch(22% 0.025 210);
-  --color-text: oklch(98% 0 0);
-  --color-text-muted: oklch(80% 0.02 210);
-  --color-border: oklch(35% 0.03 210);
-  --color-shadow: oklch(0% 0 0 / 0.45); /* Darker shadow */
-
-  /* Gradients */
-  --gradient-primary: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
-  --gradient-ocean: linear-gradient(135deg, #164e63, #0e7490, #0891b2);
-
-  /* ===== GLASSMORPHISM (DARK MODE) - UPDATED FOR BETTER VISIBILITY ===== */
-  --glass-bg: rgba(15, 23, 42, 0.45);  /* Increased opacity */
-  --glass-bg-alt: rgba(15, 23, 42, 0.35);
-  --glass-border: rgba(255, 255, 255, 0.2); /* Better contrast */
-  --glass-border-alt: rgba(255, 255, 255, 0.15);
-  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); /* Stronger shadows */
-  --glass-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5);
-  --glass-blur: blur(20px);
-  --glass-blur-sm: blur(12px);
-  --glass-blur-lg: blur(24px);
-
-  /* Glass Background Colors for Dark Mode */
-  --glass-primary-bg: rgba(59, 130, 246, 0.3);
-  --glass-success-bg: rgba(34, 197, 94, 0.3);
-  --glass-warning-bg: rgba(251, 191, 36, 0.3);
-  --glass-danger-bg: rgba(239, 68, 68, 0.3);
-  --glass-info-bg: rgba(59, 130, 246, 0.3);
-
-  /* Glass Border Colors for Dark Mode */
-  --glass-primary-border: rgba(59, 130, 246, 0.5);
-  --glass-success-border: rgba(34, 197, 94, 0.5);
-  --glass-warning-border: rgba(251, 191, 36, 0.5);
-  --glass-danger-border: rgba(239, 68, 68, 0.5);
-  --glass-info-border: rgba(59, 130, 246, 0.5);
-
-  /* Glow Effects - Enhanced for Dark Mode */
-  --glow-primary: 0 0 30px rgba(59, 130, 246, 0.7);
-  --glow-success: 0 0 30px rgba(34, 197, 94, 0.7);
-  --glow-warning: 0 0 30px rgba(251, 191, 36, 0.7);
-  --glow-danger: 0 0 30px rgba(239, 68, 68, 0.7);
-  --glow-info: 0 0 30px rgba(59, 130, 246, 0.7);
-  --glow-secondary: 0 0 30px rgba(139, 92, 246, 0.7);
-
-  /* Input Glow for Dark Mode */
-  --glow-input: 0 0 0 3px rgba(59, 130, 246, 0.4);
-}
-
-/* ===== Dolphin Utility Classes ===== */
-.dolphin-glow { box-shadow: var(--glow-primary); }
-.dolphin-glow-success { box-shadow: var(--glow-success); }
-.dolphin-glow-warning { box-shadow: var(--glow-warning); }
-.dolphin-glow-danger { box-shadow: var(--glow-danger); }
-.dolphin-glow-info { box-shadow: var(--glow-info); }
-.dolphin-glow-secondary { box-shadow: var(--glow-secondary); }
-
-.ocean-gradient { background: var(--gradient-ocean); }
-.dolphin-gradient { background: var(--gradient-primary); }
-.sea-foam { background-color: var(--color-surface); }
-.deep-ocean { background-color: var(--color-surface-alt); }
-
-/* ===== Enhanced Glass Component Styles ===== */
-.glass {
-  @apply rounded-xl border transition-all duration-300 ease-out;
-  background-color: var(--glass-bg);
-  border-color: var(--glass-border);
-  backdrop-filter: var(--glass-blur);
-  box-shadow: var(--glass-shadow);
-}
-
-.glass:hover {
-  background-color: var(--glass-bg-alt);
-  border-color: var(--glass-border-alt);
-  backdrop-filter: var(--glass-blur-lg);
-  box-shadow: var(--glass-shadow-lg);
-}
-
-/* Glass Variants with Better Visibility */
-.glass-primary { 
-  background-color: var(--glass-primary-bg);
-  border-color: var(--glass-primary-border);
-}
-
-.glass-success { 
-  background-color: var(--glass-success-bg);
-  border-color: var(--glass-success-border);
-}
-
-.glass-warning { 
-  background-color: var(--glass-warning-bg);
-  border-color: var(--glass-warning-border);
-}
-
-.glass-danger { 
-  background-color: var(--glass-danger-bg);
-  border-color: var(--glass-danger-border);
-}
-
-.glass-info { 
-  background-color: var(--glass-info-bg);
-  border-color: var(--glass-info-border);
-}
-
-/* Ensure text remains visible on glass backgrounds */
-.glass,
-.glass-primary,
-.glass-success,
-.glass-warning,
-.glass-danger,
-.glass-info {
-  color: var(--color-text) !important;
-}
-
-.glass .text-muted {
-  color: var(--color-text-muted) !important;
-}

package/eslint.config.js

@@ -1,29 +0,0 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-import { defineConfig, globalIgnores } from 'eslint/config'
-
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{js,jsx}'],
-    extends: [
-      js.configs.recommended,
-      reactHooks.configs['recommended-latest'],
-      reactRefresh.configs.vite,
-    ],
-    languageOptions: {
-      ecmaVersion: 2020,
-      globals: globals.browser,
-      parserOptions: {
-        ecmaVersion: 'latest',
-        ecmaFeatures: { jsx: true },
-        sourceType: 'module',
-      },
-    },
-    rules: {
-      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
-    },
-  },
-])

package/src/App.jsx

@@ -1,418 +0,0 @@
-import React, { useState } from "react";
-import '../src/dolphin-css/App.css'
-
-export default function App() {
-  const [theme, setTheme] = useState("light");
-  const [sidenavOpen, setSidenavOpen] = useState(true);
-  const [glassVariant, setGlassVariant] = useState("glass-primary");
-  const [userMenuOpen, setUserMenuOpen] = useState(false);
-  const [activeItem, setActiveItem] = useState("dashboard");
-  const [tableVariant, setTableVariant] = useState("glass-wave");
-
-  const toggleTheme = () => {
-    const newTheme = theme === "light" ? "dark" : "light";
-    setTheme(newTheme);
-    document.documentElement.setAttribute("data-theme", newTheme);
-  };
-
-  const navItems = [
-    { id: "dashboard", icon: "📊", label: "Dashboard" },
-    { id: "users", icon: "👥", label: "Users" },
-    { id: "reports", icon: "📈", label: "Reports" },
-    { id: "settings", icon: "⚙️", label: "Settings" },
-    { id: "analytics", icon: "📊", label: "Analytics" },
-    { id: "messages", icon: "💬", label: "Messages" },
-    { id: "tables", icon: "📋", label: "Tables Demo" }
-  ];
-
-  // Sample data for tables
-  const users = [
-    { id: 1, name: "John Dolphin", email: "john@dolphin.com", status: "Active", role: "Admin" },
-    { id: 2, name: "Sarah Ocean", email: "sarah@ocean.com", status: "Active", role: "User" },
-    { id: 3, name: "Mike Wave", email: "mike@wave.com", status: "Inactive", role: "Editor" },
-    { id: 4, name: "Emma Coral", email: "emma@coral.com", status: "Active", role: "User" }
-  ];
-
-  const products = [
-    { id: 1, name: "Dolphin Theme", price: "$49", stock: "25", sales: "142" },
-    { id: 2, name: "Ocean UI Kit", price: "$79", stock: "12", sales: "89" },
-    { id: 3, name: "Wave Components", price: "$29", stock: "45", sales: "234" },
-    { id: 4, name: "Coral Icons", price: "$19", stock: "0", sales: "567" }
-  ];
-
-  const tableVariants = [
-    { id: "glass-wave", name: "🌊 Glass Wave" },
-    { id: "neon-flow", name: "✨ Neon Flow" },
-    { id: "holo-matrix", name: "🌌 Holo Matrix" },
-    { id: "quantum-float", name: "🚀 Quantum Float" },
-    { id: "aqua-depth", name: "🌊 Aqua Depth" }
-  ];
-
-  const getStatusBadge = (status) => {
-    const variants = {
-      Active: "success",
-      Inactive: "warning"
-    };
-    return <span className={`badge sm ${variants[status]} filled`}>{status}</span>;
-  };
-
-  const getStockBadge = (stock) => {
-    if (stock === "0") return <span className="badge sm danger filled">Out of Stock</span>;
-    if (parseInt(stock) < 10) return <span className="badge sm warning filled">Low Stock</span>;
-    return <span className="badge sm success filled">In Stock</span>;
-  };
-
-  return (
-    <div className="flex min-h-screen ocean-gradient">
-      {/* Admin Side Navigation */}
-      <nav className={`admin-nav motion ${!sidenavOpen ? "collapsed" : ""} ${glassVariant}`}>
-        {/* Header */}
-        <div className="admin-nav-header">
-          <div className="admin-nav-brand">
-            <div className="admin-nav-logo">🌊</div>
-            <div className="admin-nav-title">DolphinCSS</div>
-          </div>
-        </div>
-
-        {/* Navigation Items */}
-        <div className="admin-nav-items">
-          {navItems.map(item => (
-            <a
-              key={item.id}
-              href="#"
-              className={`admin-nav-item motion ${activeItem === item.id ? "active" : ""}`}
-              onClick={(e) => {
-                e.preventDefault();
-                setActiveItem(item.id);
-              }}
-            >
-              <div className="admin-nav-icon">{item.icon}</div>
-              <div className="admin-nav-text">{item.label}</div>
-              <div className="admin-nav-tooltip">{item.label}</div>
-            </a>
-          ))}
-        </div>
-
-        {/* User Section */}
-        <div className="admin-nav-user">
-          <div className="admin-nav-avatar">JD</div>
-          <div className="admin-nav-user-info">
-            <div className="admin-nav-user-name">John Doe</div>
-            <div className="admin-nav-user-role">Administrator</div>
-          </div>
-        </div>
-
-        {/* Glass Variant Selector */}
-        <div className="admin-nav-section">
-          <h3 className="text-color-text text-sm font-semibold mb-2">Glass Style:</h3>
-          <div className="flex flex-wrap gap-1">
-            {["glass-primary", "glass-success", "glass-warning", "glass-danger", "glass-info"].map(variant => (
-              <button
-                key={variant}
-                className={`px-2 py-1 rounded text-xs border ${
-                  glassVariant === variant ? "border-color-primary bg-color-primary text-white" : "border-color-border text-color-text"
-                }`}
-                onClick={() => setGlassVariant(variant)}
-              >
-                {variant.split("-")[1]}
-              </button>
-            ))}
-          </div>
-        </div>
-
-        {/* Table Variant Selector */}
-        {activeItem === "tables" && (
-          <div className="admin-nav-section">
-            <h3 className="text-color-text text-sm font-semibold mb-2">Table Style:</h3>
-            <div className="flex flex-wrap gap-1">
-              {tableVariants.map(variant => (
-                <button
-                  key={variant.id}
-                  className={`px-2 py-1 rounded text-xs border ${
-                    tableVariant === variant.id ? "border-color-primary bg-color-primary text-white" : "border-color-border text-color-text"
-                  }`}
-                  onClick={() => setTableVariant(variant.id)}
-                >
-                  {variant.name}
-                </button>
-              ))}
-            </div>
-          </div>
-        )}
-
-        {/* Toggle Button */}
-        <button 
-          className="admin-nav-toggle"
-          onClick={() => setSidenavOpen(!sidenavOpen)}
-        >
-          {sidenavOpen ? "←" : "→"}
-        </button>
-      </nav>
-
-      {/* Main Content */}
-      <div className="flex-1 p-6">
-        <div className="flex items-center justify-between mb-6">
-          <h1 className="text-3xl font-bold text-color-text">
-            {activeItem === "tables" ? "World-Class Tables Demo" : "Admin Dashboard"}
-          </h1>
-          
-          <div className="flex items-center gap-3">
-            <button
-              className="filled primary md motion hover-pulse"
-              onClick={() => setSidenavOpen(!sidenavOpen)}
-            >
-              {sidenavOpen ? "← Collapse" : "→ Expand"}
-            </button>
-            
-            <button
-              className="outlined primary md motion"
-              onClick={toggleTheme}
-            >
-              {theme === "light" ? "🌙 Dark" : "☀️ Light"}
-            </button>
-          </div>
-        </div>
-
-        {/* Stats Cards */}
-        {activeItem !== "tables" && (
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
-            {[
-              { title: "Total Users", value: "12,458", change: "+12%", positive: true },
-              { title: "Revenue", value: "$45,678", change: "+8%", positive: true },
-              { title: "Orders", value: "2,345", change: "-3%", positive: false },
-              { title: "Conversion", value: "4.8%", change: "+2%", positive: true }
-            ].map((stat, index) => (
-              <div key={index} className="card motion hover-wave">
-                <div className="flex justify-between items-start">
-                  <div>
-                    <h3 className="text-color-text-muted text-sm font-medium">{stat.title}</h3>
-                    <p className="text-2xl font-bold text-color-text mt-1">{stat.value}</p>
-                  </div>
-                  <div className={`badge sm ${stat.positive ? "success" : "danger"} filled`}>
-                    {stat.change}
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
-        )}
-
-        {/* Conditional Content Based on Active Item */}
-        {activeItem === "dashboard" && (
-          <>
-            {/* Main Content Area */}
-            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-              {/* Glass Content */}
-              <div className="lg:col-span-2">
-                <div className={`glass glass-lg motion ${glassVariant}`}>
-                  <h2 className="text-color-text text-xl font-bold mb-3">Welcome to DolphinCSS</h2>
-                  <p className="text-color-text-muted mb-4">
-                    This is a modern admin dashboard built with DolphinCSS. Experience the power of 
-                    glass morphism, smooth animations, and customizable themes.
-                  </p>
-                  
-                  <div className="flex gap-3 mt-6">
-                    <button className="filled primary md">Get Started</button>
-                    <button className="outlined primary md">Learn More</button>
-                    <button 
-                      className="filled success md"
-                      onClick={() => setActiveItem("tables")}
-                    >
-                      🚀 See Tables
-                    </button>
-                  </div>
-                </div>
-              </div>
-
-              {/* Quick Actions */}
-              <div className="space-y-3">
-                <h3 className="text-color-text font-semibold mb-3">Quick Actions</h3>
-                
-                {[
-                  { icon: "➕", label: "Add User", variant: "primary" },
-                  { icon: "📧", label: "Send Email", variant: "success" },
-                  { icon: "📊", label: "Generate Report", variant: "warning" },
-                  { icon: "⚙️", label: "Settings", variant: "info" }
-                ].map((action, index) => (
-                  <button
-                    key={index}
-                    className={`w-full filled ${action.variant} md motion hover-pulse flex items-center gap-3`}
-                  >
-                    <span className="text-lg">{action.icon}</span>
-                    <span>{action.label}</span>
-                  </button>
-                ))}
-              </div>
-            </div>
-
-            {/* Current Active Section */}
-            <div className="mt-6">
-              <div className="card">
-                <h3 className="text-color-text font-semibold mb-3">
-                  Active Section: <span className="text-color-primary capitalize">{activeItem}</span>
-                </h3>
-                <p className="text-color-text-muted">
-                  You are currently viewing the {activeItem} section. Use the navigation menu to explore other sections.
-                </p>
-              </div>
-            </div>
-          </>
-        )}
-
-        {activeItem === "tables" && (
-          <div className="space-y-8">
-            {/* Table Controls */}
-            <div className="card">
-              <div className="flex flex-wrap items-center gap-4">
-                <div>
-                  <h3 className="text-color-text font-semibold mb-2">Table Variants:</h3>
-                  <div className="flex flex-wrap gap-2">
-                    {tableVariants.map(variant => (
-                      <button
-                        key={variant.id}
-                        className={`filled ${tableVariant === variant.id ? "primary" : "secondary"} sm motion`}
-                        onClick={() => setTableVariant(variant.id)}
-                      >
-                        {variant.name}
-                      </button>
-                    ))}
-                  </div>
-                </div>
-                
-                <div className="ml-auto">
-                  <div className="badge lg primary filled">
-                    Current: {tableVariants.find(v => v.id === tableVariant)?.name}
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            {/* Users Table */}
-            <div>
-              <div className="flex items-center justify-between mb-4">
-                <h2 className="text-2xl font-bold text-color-text">Users Table</h2>
-                <span className="badge primary outlined">Total: {users.length} users</span>
-              </div>
-
-              <div className="table-responsive">
-                <table className={`table ${tableVariant} mobile-cards motion-smooth`}>
-                  <thead>
-                    <tr className="bg-amber-300">
-                      <th>ID</th>
-                      <th>Name</th>
-                      <th>Email</th>
-                      <th>Status</th>
-                      <th>Role</th>
-                      <th>Actions</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {users.map(user => (
-                      <tr key={user.id} className="p-6">
-                        <td data-label="ID">#{user.id}</td>
-                        <td data-label="Name">
-                          <div className="flex items-center gap-3">
-                            <div className="w-8 h-8 rounded-full bg-color-primary flex items-center justify-center text-white text-sm">
-                              {user.name.charAt(0)}
-                            </div>
-                            {user.name}
-                          </div>
-                        </td>
-                        <td data-label="Email">{user.email}</td>
-                        <td data-label="Status">{getStatusBadge(user.status)}</td>
-                        <td data-label="Role">
-                          <span className="badge sm info outlined">{user.role}</span>
-                        </td>
-                        <td data-label="Actions">
-                          <div className="flex gap-2">
-                            <button className="filled success sm motion">Edit</button>
-                            <button className="filled danger sm motion">Delete</button>
-                          </div>
-                        </td>
-                      </tr>
-                    ))}
-                  </tbody>
-                </table>
-              </div>
-            </div>
-
-            {/* Products Table */}
-            <div>
-              <div className="flex items-center justify-between mb-4">
-                <h2 className="text-2xl font-bold text-color-text">Products Table</h2>
-                <span className="badge success outlined">Inventory Management</span>
-              </div>
-
-              <div className="table-responsive">
-                <table className={`table ${tableVariant} mobile-cards motion-smooth`}>
-                  <thead>
-                    <tr>
-                      <th>ID</th>
-                      <th>Product Name</th>
-                      <th>Price</th>
-                      <th>Stock</th>
-                      <th>Sales</th>
-                      <th>Actions</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {products.map(product => (
-                      <tr key={product.id}>
-                        <td data-label="ID">#{product.id}</td>
-                        <td data-label="Product Name">
-                          <div className="font-semibold text-color-text">{product.name}</div>
-                        </td>
-                        <td data-label="Price" className="font-bold text-color-primary">{product.price}</td>
-                        <td data-label="Stock">{getStockBadge(product.stock)}</td>
-                        <td data-label="Sales">
-                          <div className="flex items-center gap-2">
-                            <span className="font-semibold">{product.sales}</span>
-                            <span className="text-color-success text-sm">↑</span>
-                          </div>
-                        </td>
-                        <td data-label="Actions">
-                          <div className="flex gap-2">
-                            <button className="filled primary sm motion">View</button>
-                            <button className="outlined primary sm motion">Order</button>
-                          </div>
-                        </td>
-                      </tr>
-                    ))}
-                  </tbody>
-                </table>
-              </div>
-            </div>
-
-            {/* Stats Cards for Tables Page */}
-            <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
-              <div className="card motion hover-wave">
-                <div className="text-center">
-                  <div className="text-2xl font-bold text-color-primary mb-1">{users.length}</div>
-                  <div className="text-color-text-muted text-sm">Total Users</div>
-                </div>
-              </div>
-              <div className="card motion hover-wave">
-                <div className="text-center">
-                  <div className="text-2xl font-bold text-color-success mb-1">{products.length}</div>
-                  <div className="text-color-text-muted text-sm">Total Products</div>
-                </div>
-              </div>
-              <div className="card motion hover-wave">
-                <div className="text-center">
-                  <div className="text-2xl font-bold text-color-warning mb-1">{users.filter(u => u.status === 'Active').length}</div>
-                  <div className="text-color-text-muted text-sm">Active Users</div>
-                </div>
-              </div>
-              <div className="card motion hover-wave">
-                <div className="text-center">
-                  <div className="text-2xl font-bold text-color-info mb-1">{tableVariants.length}</div>
-                  <div className="text-color-text-muted text-sm">Table Variants</div>
-                </div>
-              </div>
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}

package/src/dolphin-css/App.css

@@ -1,21 +0,0 @@
-/* App.css - USE THESE RELATIVE PATHS */
-@import "tailwindcss";
-@import "../../MainCss/global.css";
-@import "../../MainCss/variable.css";
-@import "../../MainCss/badge.css";
-@import "../../MainCss/card.css";
-@import "../../MainCss/chartCard.css";
-@import "../../MainCss/darkVariable.css";
-@import "../../MainCss/form.css";
-@import "../../MainCss/glow.css";
-@import "../../MainCss/gradient.css";
-@import "../../MainCss/icon.css";
-@import "../../MainCss/kpi.css";
-@import "../../MainCss/layout.css";
-@import "../../MainCss/nav.css";
-@import "../../MainCss/radio.css";
-@import "../../MainCss/size.css";
-@import "../../MainCss/table.css";
-@import "../../MainCss/sideNave.css";
-@import "../../MainCss/glass.css";
-@import "../../MainCss/motion.css";

package/src/dolphin-css/index.css

@@ -1 +0,0 @@
-@import "tailwindcss";