@neuctra/ui 0.2.6 → 0.2.8

package/dist/src/components/basic/Button.js

@@ -5,24 +5,21 @@ import clsx from "clsx";
 /* -------------------------------------------------------------------------- */
 /*                               🔘 Button                                    */
 /* -------------------------------------------------------------------------- */
-export const Button = forwardRef(({ children, iconBefore, iconAfter, loading = false, loadingText = "Loading...", fullWidth = false, primaryTheme = true, primaryColor = "#3b82f6", size = "md", disabled, className, ...props }, ref) => {
+export const Button = forwardRef(({ children, iconBefore, iconAfter, loading = false, loadingText = "Loading...", fullWidth = false, variant = "default", size = "md", disabled, className, type = "button", // ✅ important fix
+...props }, ref) => {
+    const isDisabled = disabled || loading;
     /** 📏 Sizes */
     const sizeClasses = {
-        sm: "px-3 py-1.5 text-sm",
-        md: "px-5 py-2.5 text-sm",
-        lg: "px-6 py-3 text-base",
+        sm: "h-8 px-3 text-sm",
+        md: "h-10 px-4 text-sm",
+        lg: "h-12 px-6 text-base",
     };
-    /** 🎨 Theme styles */
-    const themeClasses = primaryTheme
-        ? "bg-[var(--primary)] text-white hover:bg-[var(--primary)]/90 focus:ring-[var(--primary)]/30"
-        : "";
-    /** 🎨 Dynamic fallback for non-primary theme */
-    const dynamicStyle = !primaryTheme
-        ? {
-            backgroundColor: primaryColor,
-            color: "#fff",
-        }
-        : {};
-    return (_jsx("button", { ref: ref, disabled: disabled || loading, style: !primaryTheme ? dynamicStyle : undefined, className: clsx("inline-flex items-center justify-center gap-2 font-medium rounded-lg transition-all duration-200", "focus:outline-none focus:ring-2 focus:ring-offset-1", sizeClasses[size], themeClasses, fullWidth && "w-full", (disabled || loading) && "opacity-60 cursor-not-allowed", className), ...props, children: loading ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "w-4 h-4 border-2 border-current border-t-transparent rounded-full animate-spin" }), _jsx("span", { children: loadingText })] })) : (_jsxs(_Fragment, { children: [iconBefore && (_jsx("span", { className: "flex items-center justify-center", children: iconBefore })), _jsx("span", { children: children }), iconAfter && (_jsx("span", { className: "flex items-center justify-center", children: iconAfter }))] })) }));
+    /** 🎨 Variants */
+    const variantClasses = {
+        default: "bg-blue-600 text-white hover:bg-blue-600/90",
+        outline: "border border-zinc-300 text-zinc-900 hover:bg-zinc-100 dark:border-zinc-700 dark:text-white dark:hover:bg-zinc-800",
+        ghost: "text-zinc-900 hover:bg-zinc-100 dark:text-white dark:hover:bg-zinc-800",
+    };
+    return (_jsx("button", { ref: ref, type: type, disabled: isDisabled, className: clsx("inline-flex items-center justify-center gap-2 rounded-lg font-medium transition-all duration-200", "focus:outline-none focus:ring-2 focus:ring-blue-500/30", "active:scale-[0.98]", sizeClasses[size], variantClasses[variant], fullWidth && "w-full", isDisabled && "opacity-60 cursor-not-allowed pointer-events-none", className), ...props, children: loading ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "w-4 h-4 border-2 border-current border-t-transparent rounded-full animate-spin" }), _jsx("span", { children: loadingText })] })) : (_jsxs(_Fragment, { children: [iconBefore && _jsx("span", { className: "flex", children: iconBefore }), _jsx("span", { children: children }), iconAfter && _jsx("span", { className: "flex", children: iconAfter })] })) }));
 });
 Button.displayName = "Button";

package/dist/src/components/basic/Text.js

@@ -1,117 +1,25 @@
-import React, { useMemo } from "react";
-/** 🎨 Utility: generate lighter/darker shades */
-function adjustColor(color, amount) {
-    return ("#" +
-        color
-            .replace(/^#/, "")
-            .replace(/../g, (hex) => ("0" +
-            Math.min(255, Math.max(0, parseInt(hex, 16) + amount)).toString(16)).slice(-2)));
-}
-/** 🌈 Default color palettes */
-const defaultColors = {
-    light: {
-        default: "#111",
-        primary: "#2563eb",
-        secondary: "#64748b",
-        success: "#16a34a",
-        danger: "#dc2626",
-        white: "#ffffff",
-        muted: "#6b7280",
-    },
-    dark: {
-        default: "#f8fafc",
-        primary: "#60a5fa",
-        secondary: "#94a3b8",
-        success: "#22c55e",
-        danger: "#f87171",
-        white: "#ffffff",
-        muted: "#9ca3af",
-    },
+"use client";
+import React from "react";
+import clsx from "clsx";
+const sizeClasses = {
+    xs: "text-xs",
+    sm: "text-sm",
+    md: "text-base",
+    lg: "text-lg",
+    xl: "text-xl",
+    "2xl": "text-2xl",
 };
-/** 💬 Main Component (HTML-only tags) */
-export function Text({ as, children, color = "default", size = "md", weight = "normal", align = "left", transform = "none", italic = false, underline = false, strikethrough = false, truncate = false, selectable = true, hoverable = false, onClick, darkMode = false, baseColor, className = "", style = {}, ...rest }) {
-    // element type as provided (constrained to HTML tags)
+export function Text({ as, children, size = "md", weight = 400, align = "left", truncate = false, className, style, ...rest }) {
     const Element = (as || "p");
-    /** 🎨 Dynamic color palette generation */
-    const theme = useMemo(() => {
-        if (!baseColor)
-            return defaultColors[darkMode ? "dark" : "light"];
-        const lightMode = {
-            default: "#111",
-            primary: baseColor,
-            secondary: adjustColor(baseColor, -50),
-            success: adjustColor(baseColor, -30),
-            danger: "#dc2626",
-            white: "#ffffff",
-            muted: "#6b7280",
-        };
-        const darkModeTheme = {
-            default: "#f8fafc",
-            primary: adjustColor(baseColor, 80),
-            secondary: adjustColor(baseColor, 120),
-            success: adjustColor(baseColor, 100),
-            danger: "#f87171",
-            white: "#ffffff",
-            muted: "#9ca3af",
-        };
-        return darkMode ? darkModeTheme : lightMode;
-    }, [baseColor, darkMode]);
-    /** 📏 Font sizes */
-    const sizes = {
-        xs: "0.75rem",
-        sm: "0.875rem",
-        md: "1rem",
-        lg: "1.25rem",
-        xl: "1.5rem",
-        "2xl": "2rem",
-    };
-    /** 💅 Computed styles */
-    const computedStyle = {
-        color: theme[color] || color,
-        fontSize: sizes[size] || size,
-        fontWeight: weight,
-        textAlign: align,
-        textTransform: transform,
-        fontStyle: italic ? "italic" : "normal",
-        textDecoration: underline ? "underline" : strikethrough ? "line-through" : "none",
-        userSelect: selectable ? "text" : "none",
-        overflow: truncate ? "hidden" : undefined,
-        whiteSpace: truncate ? "nowrap" : undefined,
-        textOverflow: truncate ? "ellipsis" : undefined,
-        cursor: onClick ? "pointer" : "default",
-        transition: "all 0.25s ease-in-out",
-        ...style,
-    };
-    /** 🧠 Hover events (narrow to HTMLElement at runtime) */
-    const handleMouseEnter = (e) => {
-        if (!hoverable)
-            return;
-        const target = e.currentTarget;
-        if (target instanceof HTMLElement) {
-            target.style.opacity = "0.8";
-        }
-    };
-    const handleMouseLeave = (e) => {
-        if (!hoverable)
-            return;
-        const target = e.currentTarget;
-        if (target instanceof HTMLElement) {
-            target.style.opacity = "1";
-        }
-    };
-    /**
-     * Build props object. We cast only once to the correct intrinsic props type.
-     * This prevents TypeScript from having to compute giant unions for event types.
-     */
-    const props = {
-        className,
-        style: computedStyle,
-        onClick,
-        onMouseEnter: handleMouseEnter,
-        onMouseLeave: handleMouseLeave,
+    return React.createElement(Element, {
+        className: clsx("text-inherit", // ✅ inherits parent color
+        sizeClasses[size] || "", truncate && "truncate", className),
+        style: {
+            fontWeight: weight,
+            textAlign: align,
+            ...style,
+        },
         ...rest,
-    };
-    // Use React.createElement to avoid JSX generic complexity
-    return React.createElement(Element, props, children);
+    }, children);
 }
 export default Text;

package/dist/types/src/components/basic/Button.d.ts

@@ -6,9 +6,8 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
     loading?: boolean;
     loadingText?: string;
     fullWidth?: boolean;
-    /** 🎨 Theme */
-    primaryTheme?: boolean;
-    primaryColor?: string;
+    /** 🎨 Variants (shadcn style) */
+    variant?: "default" | "outline" | "ghost";
     /** 📏 Sizes */
     size?: "sm" | "md" | "lg";
     className?: string;