@optigrit/optigrit-ui 0.0.14 → 0.0.16

package/dist/components/index.js

@@ -1599,6 +1599,30 @@ var icons = {
   warning: /* @__PURE__ */ jsx37(WarningIcon, {}),
   info: /* @__PURE__ */ jsx37(InfoIcon, {})
 };
+var textStyles = {
+  success: "text-success-800",
+  error: "text-error-800",
+  warning: "text-warning-800",
+  info: "text-info-800"
+};
+var alertStyles = {
+  success: "bg-success-50 border-success-200 text-success-800",
+  error: "bg-error-50 border-error-200 text-error-800",
+  warning: "bg-warning-50 border-warning-200 text-warning-800",
+  info: "bg-info-50 border-info-200 text-info-800"
+};
+var iconStyles = {
+  success: "text-success-600",
+  error: "text-error-600",
+  warning: "text-warning-600",
+  info: "text-info-600"
+};
+var progressColors = {
+  success: "bg-success-900",
+  error: "bg-error-900",
+  warning: "bg-warning-900",
+  info: "bg-info-900"
+};
 function AlertComponent({ open, title, type, options, onClose }) {
   if (typeof window === "undefined") return null;
   const [progress, setProgress] = useState7(100);
@@ -1661,24 +1685,6 @@ function AlertComponent({ open, title, type, options, onClose }) {
     if (!options?.duration || remainingRef.current <= 0) return;
     startProgressAnimation(remainingRef.current);
   }, [options?.duration, startProgressAnimation]);
-  const alertStyles = {
-    success: "bg-green-50 border-green-200 text-green-800 dark:bg-green-950 dark:border-green-800 dark:text-green-300",
-    error: "bg-red-50 border-red-200 text-red-800 dark:bg-red-950 dark:border-red-800 dark:text-red-300",
-    warning: "bg-yellow-50 border-yellow-200 text-yellow-800 dark:bg-yellow-950 dark:border-yellow-800 dark:text-yellow-300",
-    info: "bg-blue-50 border-blue-200 text-blue-800 dark:bg-blue-950 dark:border-blue-800 dark:text-blue-300"
-  };
-  const iconStyles = {
-    success: "text-green-600 dark:text-green-400",
-    error: "text-red-600 dark:text-red-400",
-    warning: "text-yellow-600 dark:text-yellow-400",
-    info: "text-blue-600 dark:text-blue-400"
-  };
-  const progressColors = {
-    success: "bg-green-500",
-    error: "bg-red-500",
-    warning: "bg-yellow-500",
-    info: "bg-blue-500"
-  };
   return /* @__PURE__ */ jsx37(
     ShowWithAnimation,
     {
@@ -1710,12 +1716,12 @@ function AlertComponent({ open, title, type, options, onClose }) {
           children: [
             /* @__PURE__ */ jsxs18("div", { className: cn("flex gap-3 items-center px-4 pt-4", options?.content ? "pb-2" : "pb-4"), children: [
               /* @__PURE__ */ jsx37("div", { className: cn("flex-shrink-0", iconStyles[type]), children: icons[type] }),
-              /* @__PURE__ */ jsx37("h3", { className: "flex-1 text-sm font-semibold", children: title }),
+              /* @__PURE__ */ jsx37("h3", { className: cn("flex-1 text-sm font-semibold", textStyles[type]), children: title }),
               /* @__PURE__ */ jsx37(
                 "button",
                 {
                   onClick: onClose,
-                  className: "flex-shrink-0 opacity-50 hover:opacity-100 transition-opacity rounded-md",
+                  className: cn("flex-shrink-0 opacity-50 hover:opacity-100 transition-opacity rounded-md", textStyles[type]),
                   "aria-label": "Close Alert",
                   children: /* @__PURE__ */ jsx37(CloseIcon, {})
                 }
@@ -1726,7 +1732,7 @@ function AlertComponent({ open, title, type, options, onClose }) {
                 "button",
                 {
                   onClick: () => setShowContent(!showContent),
-                  className: "text-xs font-medium underline opacity-80 hover:opacity-100 transition-opacity flex items-center gap-1",
+                  className: cn("text-xs font-medium underline opacity-80 hover:opacity-100 transition-opacity flex items-center gap-1", textStyles[type]),
                   children: [
                     showContent ? "Less Info" : "More Info",
                     /* @__PURE__ */ jsx37(ChevronDownIcon, { className: cn("w-3 h-3 transition-transform duration-200", showContent ? "rotate-180" : "rotate-0") })
@@ -1736,7 +1742,7 @@ function AlertComponent({ open, title, type, options, onClose }) {
               /* @__PURE__ */ jsx37("div", { className: cn(
                 "grid transition-all duration-300 ease-in-out",
                 showContent ? "grid-rows-[1fr] opacity-100 mt-2" : "grid-rows-[0fr] opacity-0 mt-0"
-              ), children: /* @__PURE__ */ jsx37("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx37("div", { className: "text-sm opacity-90 leading-relaxed pb-1", children: options.content }) }) })
+              ), children: /* @__PURE__ */ jsx37("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx37("div", { className: cn("text-sm opacity-90 leading-relaxed pb-1", textStyles[type]), children: options.content }) }) })
             ] }),
             options?.duration && /* @__PURE__ */ jsx37("div", { className: "w-full h-1 bg-black/5 dark:bg-white/5 absolute bottom-0 left-0", children: /* @__PURE__ */ jsx37(
               "div",

package/index.css

@@ -43,7 +43,7 @@
         --primary-secondary: #94a3b8;
 
         --success: #34d399;
-        --error: #fef2f2;
+        --error: #fb7185;
         --warning: #fbbf24;
         --info: #60a5fa;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@optigrit/optigrit-ui",
-  "version": "0.0.14",
+  "version": "0.0.16",
   "description": "UI components library for optigrit apps",
   "license": "ISC",
   "author": "",

package/tailwind.preset.js

@@ -28,24 +28,26 @@ export default {
 
 function generateShades(color) {
   const shades = {
-    DEFAULT: '', 
-    100: '', 
-    200: '', 
-    300: '', 
-    400: '', 
-    500: '', 
-    600: '', 
-    700: '', 
-    800: '', 
-    900: ''
+    50: '',
+    DEFAULT: '',
+    100: '',
+    200: '',
+    300: '',
+    400: '',
+    500: '',
+    600: '',
+    700: '',
+    800: '',
+    900: '',
+    950: ''
   };
 
-  for(let shadeKey in shades) {
+  for (let shadeKey in shades) {
     const ratio = shadeKey === 'DEFAULT' ? 100 : parseInt(shadeKey) / 10;
     shades[shadeKey] = `
       rgb(
         from color-mix(
-          in srgb, ${color} ${ratio}%, var(--bg, white) ${100 - ratio}%
+          in srgb, ${color} ${ratio}%, var(--bg-secondary, white) ${100 - ratio}%
         ) r g b / <alpha-value>
       )
     `;