nucleus-core-ts 0.8.7 → 0.8.8

package/dist/fe/components/AuthorizationPage/theme/index.js

@@ -0,0 +1,137 @@
+export const authorizationPageTheme = {
+    container: "min-h-screen bg-zinc-50 dark:bg-zinc-950 p-4 sm:p-6",
+    header: {
+        wrapper: "mb-6 sm:mb-8",
+        title: "text-2xl sm:text-3xl font-bold text-zinc-900 dark:text-zinc-100",
+        subtitle: "text-sm sm:text-base text-zinc-500 dark:text-zinc-400 mt-1"
+    },
+    tabs: {
+        wrapper: "flex gap-2 sm:gap-4 mb-4 sm:mb-6",
+        button: "px-3 sm:px-4 py-2 rounded-lg font-medium transition-colors text-sm sm:text-base",
+        buttonActive: "bg-blue-600 text-white",
+        buttonInactive: "bg-zinc-200 dark:bg-zinc-800 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-300 dark:hover:bg-zinc-700"
+    },
+    filters: {
+        wrapper: "mb-4 sm:mb-6 md:mb-6 lg:mb-8 xl:mb-8 2xl:mb-10",
+        row: "grid grid-cols-1 gap-3 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-8",
+        control: "flex flex-col justify-end",
+        search: "sm:col-span-2 md:col-span-2 lg:col-span-2 xl:col-span-3 2xl:col-span-4",
+        searchContainer: "w-full",
+        searchInput: "text-sm sm:text-sm md:text-sm lg:text-sm xl:text-base 2xl:text-base",
+        toggle: "items-start sm:items-end"
+    },
+    card: {
+        wrapper: "bg-white dark:bg-zinc-900 rounded-xl shadow-sm border border-zinc-200 dark:border-zinc-800 p-4 sm:p-6",
+        header: "text-lg sm:text-xl font-semibold text-zinc-900 dark:text-zinc-100 mb-4"
+    },
+    roleList: {
+        wrapper: "space-y-2",
+        item: "w-full text-left p-3 sm:p-4 rounded-lg cursor-pointer transition-colors border",
+        itemSelected: "bg-blue-50 dark:bg-blue-900/20 border-2 border-blue-500",
+        itemHover: "bg-zinc-50 dark:bg-zinc-800 border-zinc-200 dark:border-zinc-700 hover:border-blue-300 dark:hover:border-blue-700",
+        name: "font-medium text-zinc-900 dark:text-zinc-100",
+        description: "text-sm text-zinc-500 dark:text-zinc-400 mt-1",
+        badge: "ml-2 px-2 py-0.5 text-xs bg-purple-100 dark:bg-purple-900 text-purple-700 dark:text-purple-300 rounded-full",
+        deleteButton: "p-2 text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-colors"
+    },
+    claimList: {
+        wrapper: "space-y-4",
+        group: "border border-zinc-200 dark:border-zinc-700 rounded-lg overflow-hidden",
+        groupHeader: "bg-zinc-100 dark:bg-zinc-800 px-3 sm:px-4 py-2 font-medium text-zinc-700 dark:text-zinc-300 capitalize text-sm sm:text-base",
+        item: "px-3 sm:px-4 py-2",
+        itemAction: "text-sm font-mono text-zinc-900 dark:text-zinc-100 truncate",
+        itemDescription: "text-xs text-zinc-500 dark:text-zinc-400",
+        methodBadge: {
+            get: "bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300",
+            post: "bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300",
+            put: "bg-yellow-100 text-yellow-700 dark:bg-yellow-900 dark:text-yellow-300",
+            patch: "bg-yellow-100 text-yellow-700 dark:bg-yellow-900 dark:text-yellow-300",
+            delete: "bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300"
+        }
+    },
+    form: {
+        wrapper: "mb-4 sm:mb-6 p-3 sm:p-4 bg-zinc-50 dark:bg-zinc-800 rounded-lg",
+        title: "text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-3",
+        input: "w-full px-3 py-2 rounded-lg border border-zinc-300 dark:border-zinc-600 bg-white dark:bg-zinc-900 text-zinc-900 dark:text-zinc-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm sm:text-base",
+        button: "w-full px-4 py-2 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition-colors text-sm sm:text-base",
+        buttonDisabled: "opacity-50 cursor-not-allowed"
+    },
+    search: {
+        input: "w-full px-3 py-2 rounded-lg border border-zinc-300 dark:border-zinc-600 bg-white dark:bg-zinc-900 text-zinc-900 dark:text-zinc-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm sm:text-base mb-4"
+    },
+    checkbox: {
+        wrapper: "flex items-center gap-3 px-3 sm:px-4 py-2 hover:bg-zinc-50 dark:hover:bg-zinc-800 cursor-pointer",
+        input: "w-4 h-4 text-blue-600 rounded border-zinc-300 dark:border-zinc-600 focus:ring-blue-500",
+        label: "flex-1 min-w-0"
+    },
+    empty: {
+        wrapper: "text-center py-6 sm:py-8",
+        icon: "w-10 h-10 sm:w-12 sm:h-12 mx-auto text-purple-500 mb-2",
+        text: "text-zinc-600 dark:text-zinc-400"
+    },
+    loading: {
+        wrapper: "text-center py-6 sm:py-8",
+        text: "text-zinc-500 text-sm sm:text-base"
+    },
+    stats: {
+        text: "text-sm text-zinc-500 dark:text-zinc-400 mb-4"
+    }
+};
+export function extendAuthorizationPageTheme(overrides) {
+    return {
+        ...authorizationPageTheme,
+        ...overrides,
+        header: {
+            ...authorizationPageTheme.header,
+            ...overrides.header
+        },
+        tabs: {
+            ...authorizationPageTheme.tabs,
+            ...overrides.tabs
+        },
+        filters: {
+            ...authorizationPageTheme.filters,
+            ...overrides.filters
+        },
+        card: {
+            ...authorizationPageTheme.card,
+            ...overrides.card
+        },
+        roleList: {
+            ...authorizationPageTheme.roleList,
+            ...overrides.roleList
+        },
+        claimList: {
+            ...authorizationPageTheme.claimList,
+            ...overrides.claimList,
+            methodBadge: {
+                ...authorizationPageTheme.claimList.methodBadge,
+                ...overrides.claimList?.methodBadge
+            }
+        },
+        form: {
+            ...authorizationPageTheme.form,
+            ...overrides.form
+        },
+        search: {
+            ...authorizationPageTheme.search,
+            ...overrides.search
+        },
+        checkbox: {
+            ...authorizationPageTheme.checkbox,
+            ...overrides.checkbox
+        },
+        empty: {
+            ...authorizationPageTheme.empty,
+            ...overrides.empty
+        },
+        loading: {
+            ...authorizationPageTheme.loading,
+            ...overrides.loading
+        },
+        stats: {
+            ...authorizationPageTheme.stats,
+            ...overrides.stats
+        }
+    };
+}

package/dist/fe/components/AuthorizationPage/types/index.js

@@ -0,0 +1 @@
+export { };

package/dist/fe/components/Button/components/Button.js

@@ -0,0 +1,158 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useGSAP } from "@gsap/react";
+import gsap from "gsap";
+import { forwardRef, useLayoutEffect, useRef, useState } from "react";
+import { buttonTheme } from "../theme";
+import { cn } from "../utils/cn";
+gsap.registerPlugin(useGSAP);
+export const Button = /*#__PURE__*/ forwardRef(({ children, variant = "nucleus", size = "md", shape = "default", loading = false, disabled = false, fullWidth = false, leftIcon, rightIcon, iconOnly = false, ripple = true, pulse = false, className, onClick, onMouseEnter, onMouseLeave, ...props }, ref)=>{
+    const buttonRef = useRef(null);
+    const rippleContainerRef = useRef(null);
+    const contentRef = useRef(null);
+    const [buttonWidth, setButtonWidth] = useState(undefined);
+    const theme = buttonTheme;
+    const isDisabled = disabled || loading;
+    useLayoutEffect(()=>{
+        if (loading && buttonRef.current && !buttonWidth) {
+            setButtonWidth(buttonRef.current.offsetWidth);
+        }
+        if (!loading && buttonWidth) {
+            setButtonWidth(undefined);
+        }
+    }, [
+        loading,
+        buttonWidth
+    ]);
+    const { contextSafe } = useGSAP({
+        scope: buttonRef
+    });
+    const handleClick = contextSafe((e)=>{
+        if (isDisabled) return;
+        if (ripple && rippleContainerRef.current && buttonRef.current) {
+            const rect = buttonRef.current.getBoundingClientRect();
+            const x = e.clientX - rect.left;
+            const y = e.clientY - rect.top;
+            const size = Math.max(rect.width, rect.height) * 2;
+            const rippleEl = document.createElement("span");
+            rippleEl.className = theme.ripple.base;
+            rippleEl.style.width = `${size}px`;
+            rippleEl.style.height = `${size}px`;
+            rippleEl.style.left = `${x - size / 2}px`;
+            rippleEl.style.top = `${y - size / 2}px`;
+            rippleContainerRef.current.appendChild(rippleEl);
+            gsap.fromTo(rippleEl, {
+                scale: 0,
+                opacity: 0.6
+            }, {
+                scale: 1,
+                opacity: 0,
+                duration: 0.6,
+                ease: "power2.out",
+                onComplete: ()=>{
+                    rippleEl.remove();
+                }
+            });
+        }
+        if (contentRef.current) {
+            gsap.to(contentRef.current, {
+                scale: 0.95,
+                duration: 0.1,
+                ease: "power2.out",
+                onComplete: ()=>{
+                    gsap.to(contentRef.current, {
+                        scale: 1,
+                        duration: 0.2,
+                        ease: "elastic.out(1, 0.5)"
+                    });
+                }
+            });
+        }
+        onClick?.(e);
+    });
+    const handleMouseEnter = contextSafe((e)=>{
+        if (isDisabled) return;
+        onMouseEnter?.(e);
+    });
+    const handleMouseLeave = contextSafe((e)=>{
+        onMouseLeave?.(e);
+    });
+    const variantStyles = theme.variant[variant];
+    const renderIcon = (icon, position)=>{
+        if (!icon) return null;
+        return /*#__PURE__*/ _jsx("span", {
+            className: cn("inline-flex items-center justify-center shrink-0", theme.size[size].iconSize, loading && position === "left" && "opacity-0"),
+            children: icon
+        });
+    };
+    return /*#__PURE__*/ _jsxs("button", {
+        ref: (node)=>{
+            buttonRef.current = node;
+            if (typeof ref === "function") {
+                ref(node);
+            } else if (ref) {
+                ref.current = node;
+            }
+        },
+        type: "button",
+        disabled: isDisabled,
+        "aria-disabled": isDisabled,
+        "aria-busy": loading,
+        onClick: handleClick,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        className: cn(theme.base, theme.font.weight, theme.font.family, theme.transition, theme.focus, theme.disabled.opacity, theme.disabled.cursor, theme.shape[shape], iconOnly ? theme.iconOnly[size] : cn(theme.size[size].padding, theme.size[size].height), theme.size[size].text, theme.size[size].gap, variantStyles.background, variantStyles.text, variantStyles.border, variantStyles.shadow, !isDisabled && variantStyles.hover, !isDisabled && variantStyles.active, fullWidth && theme.fullWidth, pulse && !loading && theme.pulse.animation, className),
+        style: buttonWidth ? {
+            width: buttonWidth
+        } : undefined,
+        ...props,
+        children: [
+            /*#__PURE__*/ _jsx("span", {
+                ref: rippleContainerRef,
+                className: "absolute inset-0 overflow-hidden rounded-[inherit] pointer-events-none",
+                "aria-hidden": "true"
+            }),
+            /*#__PURE__*/ _jsxs("span", {
+                ref: contentRef,
+                className: cn("relative inline-flex items-center justify-center z-10", theme.size[size].gap),
+                children: [
+                    loading && /*#__PURE__*/ _jsx("span", {
+                        className: "absolute inset-0 flex items-center justify-center",
+                        "aria-hidden": "true",
+                        children: /*#__PURE__*/ _jsxs("svg", {
+                            className: cn("animate-spin", theme.size[size].iconSize),
+                            viewBox: "0 0 24 24",
+                            fill: "none",
+                            "aria-hidden": "true",
+                            children: [
+                                /*#__PURE__*/ _jsx("circle", {
+                                    className: "opacity-25",
+                                    cx: "12",
+                                    cy: "12",
+                                    r: "10",
+                                    stroke: "currentColor",
+                                    strokeWidth: "4"
+                                }),
+                                /*#__PURE__*/ _jsx("path", {
+                                    className: "opacity-75",
+                                    fill: "currentColor",
+                                    d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ _jsxs("span", {
+                        className: cn("inline-flex items-center", theme.size[size].gap, loading && "invisible"),
+                        "aria-hidden": loading,
+                        children: [
+                            renderIcon(leftIcon, "left"),
+                            children,
+                            renderIcon(rightIcon, "right")
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+});
+Button.displayName = "Button";

package/dist/fe/components/Button/components/ButtonSpinner.js

@@ -0,0 +1,52 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useGSAP } from "@gsap/react";
+import gsap from "gsap";
+import { useRef } from "react";
+import { buttonTheme } from "../theme";
+import { cn } from "../utils/cn";
+gsap.registerPlugin(useGSAP);
+export function ButtonSpinner({ size }) {
+    const spinnerRef = useRef(null);
+    const circleRef = useRef(null);
+    const theme = buttonTheme;
+    useGSAP(()=>{
+        if (!spinnerRef.current || !circleRef.current) return;
+        gsap.to(spinnerRef.current, {
+            rotate: 360,
+            duration: 1,
+            repeat: -1,
+            ease: "linear"
+        });
+        const circumference = 2 * Math.PI * 10;
+        gsap.set(circleRef.current, {
+            strokeDasharray: circumference,
+            strokeDashoffset: circumference * 0.75
+        });
+        gsap.to(circleRef.current, {
+            strokeDashoffset: circumference * 0.25,
+            duration: 1.5,
+            repeat: -1,
+            yoyo: true,
+            ease: "power2.inOut"
+        });
+    }, []);
+    return /*#__PURE__*/ _jsx("svg", {
+        ref: spinnerRef,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        className: cn(theme.spinner.size[size]),
+        "aria-hidden": "true",
+        children: /*#__PURE__*/ _jsx("circle", {
+            ref: circleRef,
+            cx: "12",
+            cy: "12",
+            r: "10",
+            stroke: "currentColor",
+            strokeWidth: "3",
+            strokeLinecap: "round",
+            fill: "none",
+            opacity: "0.9"
+        })
+    });
+}

package/dist/fe/components/Button/index.js

@@ -0,0 +1,3 @@
+export { Button } from "./components/Button";
+export { ButtonSpinner } from "./components/ButtonSpinner";
+export { buttonTheme, extendButtonTheme } from "./theme";

package/dist/fe/components/Button/theme/index.js

@@ -0,0 +1,186 @@
+export const buttonTheme = {
+    base: "relative inline-flex items-center justify-center overflow-hidden select-none",
+    display: "inline-flex",
+    alignment: "items-center justify-center",
+    font: {
+        weight: "font-semibold",
+        family: "font-sans"
+    },
+    transition: "transition-all duration-200 ease-out",
+    focus: "focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-violet-500 dark:focus-visible:ring-offset-gray-900",
+    disabled: {
+        opacity: "disabled:opacity-50",
+        cursor: "disabled:cursor-not-allowed disabled:pointer-events-none"
+    },
+    fullWidth: "w-full",
+    size: {
+        xs: {
+            padding: "px-2.5 py-1",
+            text: "text-xs",
+            height: "h-7",
+            iconSize: "w-3 h-3",
+            gap: "gap-1"
+        },
+        sm: {
+            padding: "px-3 py-1.5",
+            text: "text-sm",
+            height: "h-8",
+            iconSize: "w-3.5 h-3.5",
+            gap: "gap-1.5"
+        },
+        md: {
+            padding: "px-4 py-2",
+            text: "text-sm",
+            height: "h-10",
+            iconSize: "w-4 h-4",
+            gap: "gap-2"
+        },
+        lg: {
+            padding: "px-5 py-2.5",
+            text: "text-base",
+            height: "h-12",
+            iconSize: "w-5 h-5",
+            gap: "gap-2.5"
+        },
+        xl: {
+            padding: "px-6 py-3",
+            text: "text-lg",
+            height: "h-14",
+            iconSize: "w-6 h-6",
+            gap: "gap-3"
+        }
+    },
+    shape: {
+        default: "rounded-lg",
+        rounded: "rounded-xl",
+        pill: "rounded-full",
+        square: "rounded-none"
+    },
+    iconOnly: {
+        xs: "w-7 h-7 p-0",
+        sm: "w-8 h-8 p-0",
+        md: "w-10 h-10 p-0",
+        lg: "w-12 h-12 p-0",
+        xl: "w-14 h-14 p-0"
+    },
+    variant: {
+        nucleus: {
+            background: "bg-zinc-900 dark:bg-white",
+            text: "text-white dark:text-zinc-900",
+            border: "border-0",
+            shadow: "shadow-sm",
+            hover: "hover:bg-zinc-800 dark:hover:bg-zinc-100",
+            active: "active:bg-zinc-950 dark:active:bg-zinc-200 active:scale-[0.98]"
+        },
+        "nucleus-outline": {
+            background: "bg-transparent",
+            text: "text-zinc-900 dark:text-white",
+            border: "border-2 border-zinc-900 dark:border-white",
+            shadow: "",
+            hover: "hover:bg-zinc-900 hover:text-white dark:hover:bg-white dark:hover:text-zinc-900",
+            active: "active:bg-zinc-800 dark:active:bg-zinc-100 active:scale-[0.98]"
+        },
+        "nucleus-ghost": {
+            background: "bg-transparent",
+            text: "text-zinc-700 dark:text-zinc-300",
+            border: "border-0",
+            shadow: "",
+            hover: "hover:bg-zinc-100 dark:hover:bg-zinc-800",
+            active: "active:bg-zinc-200 dark:active:bg-zinc-700"
+        },
+        "nucleus-soft": {
+            background: "bg-zinc-100 dark:bg-zinc-800",
+            text: "text-zinc-900 dark:text-white",
+            border: "border-0",
+            shadow: "",
+            hover: "hover:bg-zinc-200 dark:hover:bg-zinc-700",
+            active: "active:bg-zinc-300 dark:active:bg-zinc-600 active:scale-[0.98]"
+        },
+        primary: {
+            background: "bg-blue-600 dark:bg-blue-500",
+            text: "text-white",
+            border: "border-0",
+            shadow: "shadow-md shadow-blue-500/20",
+            hover: "hover:bg-blue-500 hover:shadow-lg hover:shadow-blue-500/30 hover:-translate-y-0.5",
+            active: "active:bg-blue-700 active:translate-y-0 active:shadow-sm"
+        },
+        secondary: {
+            background: "bg-gray-100 dark:bg-gray-800",
+            text: "text-gray-900 dark:text-gray-100",
+            border: "border border-gray-200 dark:border-gray-700",
+            shadow: "shadow-sm",
+            hover: "hover:bg-gray-200 dark:hover:bg-gray-700 hover:shadow-md hover:-translate-y-0.5",
+            active: "active:bg-gray-300 dark:active:bg-gray-600 active:translate-y-0"
+        },
+        success: {
+            background: "bg-emerald-600 dark:bg-emerald-500",
+            text: "text-white",
+            border: "border-0",
+            shadow: "shadow-md shadow-emerald-500/20",
+            hover: "hover:bg-emerald-500 hover:shadow-lg hover:shadow-emerald-500/30 hover:-translate-y-0.5",
+            active: "active:bg-emerald-700 active:translate-y-0 active:shadow-sm"
+        },
+        warning: {
+            background: "bg-amber-500",
+            text: "text-white",
+            border: "border-0",
+            shadow: "shadow-md shadow-amber-500/20",
+            hover: "hover:bg-amber-400 hover:shadow-lg hover:shadow-amber-500/30 hover:-translate-y-0.5",
+            active: "active:bg-amber-600 active:translate-y-0 active:shadow-sm"
+        },
+        danger: {
+            background: "bg-red-600 dark:bg-red-500",
+            text: "text-white",
+            border: "border-0",
+            shadow: "shadow-md shadow-red-500/20",
+            hover: "hover:bg-red-500 hover:shadow-lg hover:shadow-red-500/30 hover:-translate-y-0.5",
+            active: "active:bg-red-700 active:translate-y-0 active:shadow-sm"
+        },
+        ghost: {
+            background: "bg-transparent",
+            text: "text-gray-700 dark:text-gray-300",
+            border: "border-0",
+            shadow: "",
+            hover: "hover:bg-gray-100 dark:hover:bg-gray-800",
+            active: "active:bg-gray-200 dark:active:bg-gray-700"
+        },
+        outline: {
+            background: "bg-transparent",
+            text: "text-gray-700 dark:text-gray-300",
+            border: "border-2 border-gray-300 dark:border-gray-600",
+            shadow: "",
+            hover: "hover:bg-gray-100 dark:hover:bg-gray-800 hover:border-gray-400 dark:hover:border-gray-500",
+            active: "active:bg-gray-200 dark:active:bg-gray-700"
+        },
+        link: {
+            background: "bg-transparent",
+            text: "text-violet-600 dark:text-violet-400",
+            border: "border-0",
+            shadow: "",
+            hover: "hover:underline hover:text-violet-700 dark:hover:text-violet-300",
+            active: "active:text-violet-800 dark:active:text-violet-200"
+        }
+    },
+    spinner: {
+        base: "animate-spin",
+        size: {
+            xs: "w-3 h-3",
+            sm: "w-3.5 h-3.5",
+            md: "w-4 h-4",
+            lg: "w-5 h-5",
+            xl: "w-6 h-6"
+        }
+    },
+    ripple: {
+        base: "absolute rounded-full bg-white/30 pointer-events-none"
+    },
+    pulse: {
+        animation: "animate-pulse"
+    }
+};
+export function extendButtonTheme(overrides) {
+    return {
+        ...buttonTheme,
+        ...overrides
+    };
+}

package/dist/fe/components/Button/types/index.js

@@ -0,0 +1 @@
+export { };

package/dist/fe/components/Button/utils/cn.js

@@ -0,0 +1,5 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}