@putkoff/abstract-utilities 0.0.3 → 0.0.4

package/dist/esm/functions/ui_utils/src/button.d.ts

@@ -1,4 +1,5 @@
-import React from 'react';
-export declare function Button({ children, color, ...rest }: React.ButtonHTMLAttributes<HTMLButtonElement> & {
+export declare function Button({ children, color, variant, className, ...rest }: React.ButtonHTMLAttributes<HTMLButtonElement> & {
     color?: 'gray' | 'green' | 'blue';
+    variant?: 'default' | 'icon' | 'primary' | 'secondary';
+    className?: string;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/esm/index.js

@@ -1532,10 +1532,24 @@ function get_window_parts() {
 }
 
 function Button(_a) {
-    var { children, color = 'gray' } = _a, rest = __rest(_a, ["children", "color"]);
-    const base = 'rounded px-3 py-1 text-sm';
-    const palette = color === 'green' ? 'bg-green-600 text-white hover:bg-green-700' : 'bg-gray-200 hover:bg-gray-300';
-    return jsx("button", Object.assign({ className: `${base} ${palette}` }, rest, { children: children }));
+    var { children, color = 'gray', variant = 'default', className = '' } = _a, rest = __rest(_a, ["children", "color", "variant", "className"]);
+    const base = 'rounded px-3 py-1 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 transition-colors duration-150';
+    const variantStyles = {
+        default: '',
+        icon: 'p-1 bg-transparent hover:bg-gray-100',
+        primary: 'text-white',
+        secondary: '',
+    };
+    const palette = {
+        gray: variant === 'primary'
+            ? 'bg-gray-600 hover:bg-gray-700 focus:ring-gray-500'
+            : 'bg-gray-200 hover:bg-gray-300 focus:ring-gray-400',
+        green: 'bg-green-600 text-white hover:bg-green-700 focus:ring-green-500',
+        blue: variant === 'primary'
+            ? 'bg-blue-600 hover:bg-blue-700 focus:ring-blue-500'
+            : 'bg-blue-200 hover:bg-blue-300 focus:ring-blue-400',
+    };
+    return (jsx("button", Object.assign({ className: `${base} ${variantStyles[variant]} ${palette[color]} ${className}` }, rest, { children: children })));
 }
 
 function Checkbox(_a) {