dolphincss 1.0.1 → 1.0.2

package/MainCss/glow.css

@@ -0,0 +1,108 @@
+/* ===== Global Glowing Effects ===== */
+.glow {
+  --glow-color: var(--color-primary);
+  --glow-intensity: 0.2;
+  --glow-spread: 15px;
+  --glow-blur: 8px;
+  @apply transition-all duration-300;
+}
+
+/* Glow on hover */
+.glow:hover {
+  box-shadow: 0 0 var(--glow-spread) var(--glow-blur) color-mix(in oklch, var(--glow-color) calc(var(--glow-intensity) * 100%), transparent);
+}
+
+/* Glow on focus */
+.glow:focus {
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--glow-color) 20%, transparent);
+}
+
+/* Color variants */
+.glow.primary {
+  --glow-color: var(--color-primary);
+}
+
+.glow.secondary {
+  --glow-color: var(--color-secondary);
+}
+
+.glow.success {
+  --glow-color: var(--color-success);
+}
+
+.glow.warning {
+  --glow-color: var(--color-warning);
+}
+
+.glow.danger {
+  --glow-color: var(--color-danger);
+}
+
+.glow.info {
+  --glow-color: var(--color-info);
+}
+
+/* Intensity variants */
+.glow.strong {
+  --glow-intensity: 0.4;
+  --glow-spread: 25px;
+}
+
+.glow.subtle {
+  --glow-intensity: 0.15;
+  --glow-spread: 10px;
+}
+
+/* Pulsing glow */
+.glow.pulse {
+  animation: dolphin-glow-pulse 3s ease-in-out infinite;
+}
+
+@keyframes dolphin-glow-pulse {
+  0%, 100% { 
+    box-shadow: 0 0 5px 2px color-mix(in oklch, var(--glow-color) 15%, transparent);
+  }
+  50% { 
+    box-shadow: 0 0 20px 8px color-mix(in oklch, var(--glow-color) 25%, transparent);
+  }
+}
+
+/* Wave glow */
+.glow.wave {
+  animation: ocean-wave 4s ease-in-out infinite;
+}
+
+@keyframes ocean-wave {
+  0%, 100% { 
+    box-shadow: 
+      0 0 10px 3px color-mix(in oklch, var(--color-primary) 20%, transparent),
+      0 0 20px 6px color-mix(in oklch, var(--color-info) 15%, transparent);
+  }
+  50% { 
+    box-shadow: 
+      0 0 15px 5px color-mix(in oklch, var(--color-primary) 25%, transparent),
+      0 0 25px 8px color-mix(in oklch, var(--color-info) 20%, transparent);
+  }
+}
+
+/* For inputs, we want to override the focus glow if the input has the glow class */
+.floatinglabel-input.glow:focus {
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--glow-color) 20%, transparent);
+}
+
+/* Ensure that the glow effect is not applied to disabled elements */
+.glow:disabled {
+  box-shadow: none !important;
+}
+
+/* Responsive glow - reduce on mobile */
+@media (max-width: 768px) {
+  .glow:hover {
+    --glow-spread: 12px;
+    --glow-blur: 6px;
+  }
+  
+  .glow:focus {
+    box-shadow: 0 0 0 2px color-mix(in oklch, var(--glow-color) 20%, transparent);
+  }
+}

package/MainCss/gradient.css

@@ -0,0 +1,13 @@
+
+  /* ===== Gradient Background ===== */
+  @layer components {
+  .gradient-bg {
+    @apply transition-all duration-500 rounded-md bg-no-repeat text-(--color-text);
+    background-size: 200% 200%;
+  }
+  .gradient-bg.primary { background-image: var(--gradient-primary) !important; }
+  .gradient-bg.success { background-image: var(--gradient-success) !important; }
+  .gradient-bg.warning { background-image: var(--gradient-warning) !important; }
+  .gradient-bg.danger { background-image: var(--gradient-danger) !important; }
+  .gradient-bg.info { background-image: var(--gradient-info) !important; }
+  }

package/MainCss/icon.css

@@ -0,0 +1,41 @@
+/* Inputs with left icon */
+@layer components {
+.input-icon-left {
+  @apply relative w-full;
+}
+.input-icon-left > svg {
+  @apply absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-(--color-text-muted);
+}
+.input-icon-left > input,
+.input-icon-left > select {
+  @apply w-full pl-10 pr-3 py-2 rounded-md transition-all duration-200;
+}
+
+/* Inputs with right icon */
+.input-icon-right {
+  @apply relative w-full;
+}
+.input-icon-right > svg {
+  @apply absolute right-3 top-1/2 -translate-y-1/2 w-5 h-5 text-(--color-text-muted);
+}
+.input-icon-right > input,
+.input-icon-right > select {
+  @apply w-full pl-3 pr-10 py-2 rounded-md transition-all duration-200;
+}
+
+/* Buttons with left icon */
+.button-icon-left {
+  @apply relative inline-flex items-center justify-center gap-2;
+}
+.button-icon-left > svg {
+  @apply w-5 h-5;
+}
+
+/* Buttons with right icon */
+.button-icon-right {
+  @apply relative inline-flex items-center justify-center gap-2;
+}
+.button-icon-right > svg {
+  @apply w-5 h-5 order-last;
+}
+}

package/MainCss/kpi.css

@@ -0,0 +1,27 @@
+/* ===== KPI Card System ===== */
+@layer components {
+  .kpi-card {
+    @apply flex items-center justify-between p-4 rounded-xl shadow-md transition-all duration-300 hover:shadow-xl bg-(--color-surface) text-(--color-text);
+  }
+  .kpi-card .kpi-text { @apply flex flex-col; }
+  .kpi-card .kpi-text .kpi-title { @apply text-sm text-(--color-text-muted); }
+  .kpi-card .kpi-text .kpi-value { @apply text-2xl font-bold text-(--color-text); }
+  .kpi-card .kpi-text .kpi-change { @apply text-sm font-medium mt-1; }
+  .kpi-card .kpi-text .kpi-change.positive { @apply text-(--color-success); }
+  .kpi-card .kpi-text .kpi-change.negative { @apply text-(--color-danger); }
+  .kpi-card .kpi-chart {
+    @apply w-16 h-16 rounded-xl flex items-center justify-center transition-all duration-300 shadow-inner bg-(--color-primary) text-(--color-text);
+    position: relative;
+    overflow: hidden;
+  }
+  .kpi-card .kpi-chart::before {
+    content: '';
+    @apply absolute bottom-1 left-1 w-[calc(100%-0.5rem)] h-1/2 bg-gradient-to-r from-(--color-gradient-start) to-(--color-gradient-end) rounded-sm;
+  }
+  .kpi-card:hover .kpi-chart { @apply shadow-lg; }
+  @media (max-width: 768px) {
+    .kpi-card { @apply flex-col items-start gap-3; }
+    .kpi-card .kpi-chart { @apply w-12 h-12; }
+  }
+}
+  

package/MainCss/layout.css

@@ -0,0 +1,32 @@
+
+  /* ===== Layout System ===== */
+  @layer components {
+  .row { @apply flex flex-wrap gap-4; }
+  .col { @apply flex-1 min-w-[200px]; }
+  .col-1 { @apply flex-[1_1_8%]; }
+  .col-2 { @apply flex-[1_1_16%]; }
+  .col-3 { @apply flex-[1_1_25%]; }
+  .col-4 { @apply flex-[1_1_33%]; }
+  .col-5 { @apply flex-[1_1_41%]; }
+  .col-6 { @apply flex-[1_1_50%]; }
+  .col-7 { @apply flex-[1_1_58%]; }
+  .col-8 { @apply flex-[1_1_66%]; }
+  .col-9 { @apply flex-[1_1_75%]; }
+  .col-10 { @apply flex-[1_1_83%]; }
+  .col-11 { @apply flex-[1_1_91%]; }
+  .col-12 { @apply flex-[1_1_100%]; }
+  @media (max-width: 1024px) {
+    .col, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
+    .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 { @apply flex-[1_1_45%]; }
+  }
+  @media (max-width: 768px) {
+    .col, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
+    .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 { @apply flex-[1_1_100%]; }
+  }
+  .gap-0 { @apply gap-0; }
+  .gap-1 { @apply gap-1; }
+  .gap-2 { @apply gap-2; }
+  .gap-3 { @apply gap-3; }
+  .gap-4 { @apply gap-4; }
+  .gap-5 { @apply gap-5; }
+  }

package/MainCss/nav.css

@@ -0,0 +1,39 @@
+/* ===== Navigation System ===== */
+@layer components {
+  .nav-container {
+    @apply w-full flex items-center justify-between px-4 py-3 bg-(--color-surface) shadow-md transition-all duration-200;
+  }
+  .nav-brand { @apply text-lg font-bold text-(--color-text) select-none; }
+  .nav-ul { @apply flex gap-4 list-none m-0 p-0; }
+  .nav-ul-left { @apply flex-1 flex items-center; }
+  .nav-ul-right { @apply flex gap-4 items-center; }
+  .nav-li { @apply relative cursor-pointer transition-colors duration-200; }
+  .nav-li a {
+    @apply px-3 py-2 rounded-md text-(--color-text) hover:bg-(--color-primary) hover:text-(--color-text) transition-all duration-200;
+  }
+  .nav-li.active a { @apply bg-(--color-primary) text-(--color-text); }
+  .nav-dropdown {
+    @apply absolute top-full left-0 mt-1 bg-(--color-surface) shadow-lg rounded-md min-w-[8rem] opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50;
+  }
+  .nav-dropdown li {
+    @apply px-4 py-2 whitespace-nowrap hover:bg-(--color-primary) hover:text-(--color-text);
+  }
+  .nav-toggle { @apply block md:hidden cursor-pointer p-2 rounded-md hover:bg-(--color-border) transition-all duration-200; }
+  .nav-mobile { @apply hidden flex-col gap-2 mt-2 md:hidden; }
+  .nav-mobile.show { @apply flex; }
+  .nav-search-container { @apply relative flex items-center w-full max-w-xs transition-all duration-300; }
+  .nav-search-input {
+    @apply w-full pl-10 pr-10 py-2 rounded-full bg-(--color-surface) border border-(--color-border) text-(--color-text) focus:outline-none focus:ring-2 focus:ring-(--color-primary) focus:border-transparent transition-all duration-300 placeholder:text-(--color-text-muted);
+  }
+  .nav-search-icon {
+    @apply absolute left-3 top-1/2 -translate-y-1/2 text-(--color-text-muted) w-5 h-5;
+  }
+  .nav-search-clear {
+    @apply absolute right-3 top-1/2 -translate-y-1/2 text-(--color-text-muted) w-5 h-5 cursor-pointer opacity-0 transition-opacity duration-200 hover:text-(--color-primary);
+  }
+  .nav-search-input:not(:placeholder-shown) + .nav-search-clear { @apply opacity-100; }
+  @media (max-width: 768px) {
+    .nav-search-container { @apply max-w-full mt-2; }
+    .nav-search-input { @apply py-1.5 text-sm; }
+  }
+}

package/MainCss/size.css

@@ -0,0 +1,6 @@
+ /* ===== Button Sizes ===== */
+ @layer components {
+  .sm { @apply text-xs px-3 py-1.5; }
+  .md { @apply text-sm px-4 py-2; }
+  .lg { @apply text-base px-5 py-3; }
+ }

package/MainCss/table.css

@@ -0,0 +1,29 @@
+ /*===== Table System ===== */
+ @layer components {
+  .table {
+    @apply w-full border-collapse transition-all duration-200 text-(--color-text);
+  }
+  .table th, .table td {
+    @apply px-4 py-2 border border-(--color-border) text-left font-medium transition-all duration-200;
+  }
+  .table.filled th, .table.filled td { background-color: var(--color-surface); color: var(--color-text); }
+  .table.outlined th, .table.outlined td {
+    @apply border-2 border-(--color-border) bg-transparent text-(--color-text);
+  }
+  .table.primary.filled th, .table.primary.filled td { background-color: var(--color-primary); color: var(--color-text); border-color: var(--color-primary); }
+  .table.secondary.filled th, .table.secondary.filled td { background-color: var(--color-secondary); color: var(--color-text); border-color: var(--color-secondary); }
+  .table.success.filled th, .table.success.filled td { background-color: var(--color-success); color: var(--color-text); border-color: var(--color-success); }
+  .table.warning.filled th, .table.warning.filled td { background-color: var(--color-warning); color: var(--color-text); border-color: var(--color-warning); }
+  .table.danger.filled th, .table.danger.filled td { background-color: var(--color-danger); color: var(--color-text); border-color: var(--color-danger); }
+  .table.info.filled th, .table.info.filled td { background-color: var(--color-info); color: var(--color-text); border-color: var(--color-info); }
+  .table.striped tbody tr:nth-child(even) { background-color: color-mix(in oklch, var(--color-surface), 10% oklch(0% 0 0)); }
+  .table tbody tr:hover { opacity: 0.95; }
+  .table.filled.primary tbody tr:hover { background-color: color-mix(in oklch, var(--color-primary), 10% oklch(0% 0 0)); }
+  .table.filled.success tbody tr:hover { background-color: color-mix(in oklch, var(--color-success), 10% oklch(0% 0 0)); }
+  .table.filled.warning tbody tr:hover { background-color: color-mix(in oklch, var(--color-warning), 10% oklch(0% 0 0)); }
+  .table.filled.danger tbody tr:hover { background-color: color-mix(in oklch, var(--color-danger), 10% oklch(0% 0 0)); }
+  .table.filled.info tbody tr:hover { background-color: color-mix(in oklch, var(--color-info), 10% oklch(0% 0 0)); }
+  [data-theme="dark"] .table th, [data-theme="dark"] .table td { border-color: var(--color-border); color: var(--color-text); }
+  [data-theme="dark"] .table.filled th, [data-theme="dark"] .table.filled td { background-color: var(--color-surface); color: var(--color-text); }
+  .table-responsive { @apply overflow-x-auto w-full; }
+ }

package/MainCss/variable.css

@@ -0,0 +1,61 @@
+@import "tailwindcss";
+
+:root {
+  /* Primary Colors - Sea Blue */
+  --color-primary: oklch(55% 0.12 200); /* light sea blue */
+  --color-primary-dark: oklch(45% 0.14 200);
+  --color-secondary: oklch(60% 0.08 190); /* turquoise-ish */
+
+  /* Semantic Colors - Ocean Inspired */
+  --color-success: oklch(65% 0.12 160); /* sea green */
+  --color-warning: oklch(75% 0.15 80);  /* coral-ish */
+  --color-danger: oklch(60% 0.15 10);   /* reddish coral */
+  --color-info: oklch(70% 0.10 220);    /* sky blue */
+
+  /* Neutral Colors */
+  --color-surface: oklch(96% 0.01 210); /* almost white sand */
+  --color-text: oklch(22% 0.03 210);    /* deep ocean text */
+  --color-text-muted: oklch(45% 0.04 210); /* slightly softer but readable */
+  --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));
+
+  /* ===== Dolphin Specific 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); }
+}
+
+[data-theme="dark"] {
+  /* Primary Colors */
+  --color-primary: oklch(45% 0.12 200); /* darker sea blue */
+  --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); /* dark ocean */
+  --color-text: oklch(98% 0 0); /* almost pure white text */
+  --color-text-muted: oklch(80% 0.02 210); /* dimmer, still visible */
+  --color-border: oklch(35% 0.03 210);
+  --color-shadow: oklch(0% 0 0 / 0.35);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dolphincss",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "type": "module",
   "description": "DolphinCSS - World-class TailwindCSS + React component library",
   "main": "dolphin-css.css",
@@ -23,6 +23,7 @@
   "license": "MIT",
   "dependencies": {
     "@tailwindcss/vite": "^4.1.16",
+    "lucide-react": "^0.547.0",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "tailwindcss": "^4.1.16"