@optigrit/optigrit-ui 0.0.14 → 0.0.15

package/dist/{chunk-ISRYL4WZ.js → chunk-OPUJUU32.js}

@@ -233,7 +233,6 @@ var Input = forwardRef((props, ref) => {
         "--border-color-hover": colorMix(primaryColor, 40),
         "--light-primary-color": colorMix(primaryColor, 50),
         "--primary-color": colorMix(primaryColor, 100),
-        "--autofill-bg-color": colorMix(primaryColor, 10, bgColor),
         width: fullWidth === void 0 || fullWidth ? "100%" : "auto",
         ...inputContainerProps?.style
       },
@@ -264,7 +263,7 @@ var Input = forwardRef((props, ref) => {
             ref,
             required: required === void 0 || required,
             className: cn(
-              "text-sm w-full h-full border-none outline-none rounded-lg transition-all duration-200 placeholder-[var(--placeholder-color)] text-[var(--text-color)] [&:-webkit-autofill]:[-webkit-text-fill-color:var(--text-color)] [&:-webkit-autofill]:[-webkit-box-shadow:_0_0_1000px_inset_var(--autofill-bg-color)] bg-[var(--bg-color)]",
+              "text-sm w-full h-full border-none outline-none rounded-sm transition-all duration-200 placeholder-[var(--placeholder-color)] text-[var(--text-color)] [&:-webkit-autofill]:[-webkit-text-fill-color:var(--text-color)] bg-[var(--bg-color)]",
               isFocus || !label || labelShrink === void 0 || labelShrink ? "" : "placeholder:opacity-0",
               inputProps.className
             ),

package/dist/components/index.js

@@ -6,7 +6,7 @@ import {
   ShowWithAnimation,
   Spinner,
   cn
-} from "../chunk-ISRYL4WZ.js";
+} from "../chunk-OPUJUU32.js";
 import "../chunk-MCQS3QNN.js";
 import {
   useKeyboardShortcuts
@@ -984,7 +984,7 @@ var TableContainer = forwardRef4(
       "div",
       {
         ref,
-        className: `w-full overflow-auto rounded-lg border bg-bg-secondary shadow-sm ${className}`,
+        className: `w-full overflow-auto rounded-lg border bg-white shadow-sm ${className}`,
         ...props,
         children
       }
@@ -1566,7 +1566,7 @@ function DrawerHeader({ children, className, style }) {
   return /* @__PURE__ */ jsx35(
     "div",
     {
-      className: cn("sticky top-0 z-20 backdrop-blur-sm bg-bg-secondary/60 px-4 py-3 border-b border-border", className),
+      className: cn("sticky top-0 z-20 backdrop-blur-sm bg-white/60 px-4 py-3 border-b border-border", className),
       style,
       children
     }
@@ -1579,7 +1579,7 @@ function DrawerFooter({ children, className, style }) {
   return /* @__PURE__ */ jsx36(
     "div",
     {
-      className: cn("sticky bottom-0 z-20 backdrop-blur-sm bg-bg-secondary/60 px-4 py-3 border-t border-border", className),
+      className: cn("sticky bottom-0 z-20 backdrop-blur-sm bg-white/60 px-4 py-3 border-t border-border", className),
       style,
       children
     }
@@ -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/dist/core/index.js

@@ -5,7 +5,7 @@ import {
   Show,
   ShowWithAnimation,
   Spinner
-} from "../chunk-ISRYL4WZ.js";
+} from "../chunk-OPUJUU32.js";
 import "../chunk-MCQS3QNN.js";
 import "../chunk-U65NGM6F.js";
 export {

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.15",
   "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>
       )
     `;