@neuctra/ui 0.2.4 → 0.2.6

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

@@ -1,100 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect, useMemo } from "react";
-import { Container } from "./Container";
-/** 🎨 Preset Variants */
-const variantStyles = {
-    light: { background: "#ffffff", color: "#111827" },
-    dark: { background: "#0f172a", color: "#f9fafb" },
-    gradient: {
-        background: "linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)",
-        color: "#ffffff",
-    },
-    transparent: { background: "transparent", color: "#111827" },
-    primary: { background: "#3b82f6", color: "#ffffff" },
-};
-/** 🧩 Utility: Resolve responsive props safely */
-function resolveResponsive(prop, screen, fallback) {
-    if (prop == null)
-        return fallback;
-    if (typeof prop !== "object")
-        return prop;
-    return prop[screen] ?? fallback;
-}
-/** 📱 Determine current breakpoint */
-function getScreenSize(width) {
-    if (width < 768)
-        return "sm";
-    if (width < 1024)
-        return "md";
-    return "lg";
-}
-/**
- * 🧱 Section Component
- * A flexible layout wrapper that supports responsive backgrounds,
- * adaptive padding, and variant-based theming.
- */
-export const Section = ({ title, subtitle, variant = "light", background, overlay, color, paddingY = 60, paddingX = 20, size = "xl", height = "auto", align = "center", borderRadius = 0, className = "", style, children, }) => {
-    const [screenSize, setScreenSize] = useState("lg");
-    useEffect(() => {
-        const updateSize = () => setScreenSize(getScreenSize(window.innerWidth));
-        updateSize();
-        window.addEventListener("resize", updateSize);
-        return () => window.removeEventListener("resize", updateSize);
-    }, []);
-    const resolvedVariant = resolveResponsive(variant, screenSize, "light");
-    const theme = variantStyles[resolvedVariant];
-    const resolvedStyles = useMemo(() => {
-        const bg = resolveResponsive(background, screenSize, theme.background);
-        const textColor = resolveResponsive(color, screenSize, theme.color);
-        const overlayColor = resolveResponsive(overlay, screenSize);
-        const py = resolveResponsive(paddingY, screenSize, 60);
-        const px = resolveResponsive(paddingX, screenSize, 20);
-        const alignText = resolveResponsive(align, screenSize, "center");
-        const h = resolveResponsive(height, screenSize, "auto");
-        const radius = resolveResponsive(borderRadius, screenSize, 0);
-        return {
-            position: "relative",
-            background: bg,
-            color: textColor,
-            paddingTop: typeof py === "number" ? `${py}px` : py,
-            paddingBottom: typeof py === "number" ? `${py}px` : py,
-            paddingLeft: typeof px === "number" ? `${px}px` : px,
-            paddingRight: typeof px === "number" ? `${px}px` : px,
-            textAlign: alignText,
-            height: h,
-            borderRadius: typeof radius === "number" ? `${radius}px` : radius,
-            boxSizing: "border-box",
-            overflow: "hidden",
-            ...style,
-        };
-    }, [
-        background,
-        color,
-        overlay,
-        paddingY,
-        paddingX,
-        align,
-        height,
-        borderRadius,
-        theme,
-        screenSize,
-        style,
-    ]);
-    const resolvedOverlay = resolveResponsive(overlay, screenSize);
-    return (_jsxs("section", { style: resolvedStyles, className: className, children: [resolvedOverlay && (_jsx("div", { style: {
-                    position: "absolute",
-                    inset: 0,
-                    background: resolvedOverlay,
-                    pointerEvents: "none",
-                } })), _jsxs(Container, { size: resolveResponsive(size, screenSize, "xl"), className: "relative z-10", children: [(title || subtitle) && (_jsxs("header", { style: { marginBottom: 32 }, children: [title && (_jsx("h2", { style: {
-                                    fontSize: "2rem",
-                                    fontWeight: 700,
-                                    marginBottom: subtitle ? 8 : 0,
-                                }, children: title })), subtitle && (_jsx("p", { style: {
-                                    fontSize: "1.125rem",
-                                    color: resolvedVariant === "dark"
-                                        ? "rgba(255,255,255,0.7)"
-                                        : "rgba(0,0,0,0.6)",
-                                }, children: subtitle }))] })), children] })] }));
-};
-export default Section;

package/dist/types/src/components/avatar/AvatarGroup.d.ts

@@ -1,9 +0,0 @@
-import React from "react";
-interface AvatarGroupProps {
-    avatars: string[];
-    size?: "small" | "medium" | "large";
-    maxVisible?: number;
-    className?: string;
-}
-export declare const AvatarGroup: React.FC<AvatarGroupProps>;
-export {};

package/dist/types/src/components/avatar/AvatarWithStatus.d.ts

@@ -1,10 +0,0 @@
-import React from "react";
-interface AvatarWithStatusProps {
-    src: string;
-    alt?: string;
-    status?: "online" | "offline" | "away" | "busy";
-    size?: "small" | "medium" | "large";
-    className?: string;
-}
-export declare const AvatarWithStatus: React.FC<AvatarWithStatusProps>;
-export {};

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

@@ -1,28 +0,0 @@
-import { CSSProperties, ReactNode, ElementType, ForwardedRef, ReactElement, ComponentPropsWithoutRef } from "react";
-type CardVariant = string;
-type CardOwnProps = {
-    as?: ElementType;
-    children?: ReactNode;
-    className?: string;
-    variant?: CardVariant;
-    background?: string;
-    textColor?: string;
-    borderRadius?: string | number;
-    border?: string;
-    boxShadow?: string;
-    hoverShadow?: string;
-    padding?: string | number;
-    margin?: string | number;
-    width?: string | number;
-    height?: string | number;
-    style?: CSSProperties;
-    hoverStyle?: CSSProperties;
-    onClick?: () => void;
-};
-type CardProps<T extends ElementType = "div"> = CardOwnProps & Omit<ComponentPropsWithoutRef<T>, keyof CardOwnProps>;
-declare const Card: (<T extends ElementType = "div">(props: CardProps<T> & {
-    ref?: ForwardedRef<HTMLDivElement>;
-}) => ReactElement) & {
-    displayName: string;
-};
-export { Card };

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

@@ -1,25 +0,0 @@
-import React from "react";
-type ScreenSize = "sm" | "md" | "lg";
-type ResponsiveValue<T> = T | Partial<Record<ScreenSize, T>>;
-interface FlexboxProps {
-    direction?: ResponsiveValue<"row" | "column" | "row-reverse" | "column-reverse">;
-    align?: ResponsiveValue<"flex-start" | "flex-end" | "center" | "stretch" | "baseline">;
-    justify?: ResponsiveValue<"flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly">;
-    wrap?: ResponsiveValue<"nowrap" | "wrap" | "wrap-reverse">;
-    gap?: ResponsiveValue<number | string>;
-    padding?: ResponsiveValue<number | string>;
-    margin?: ResponsiveValue<number | string>;
-    backgroundColor?: ResponsiveValue<string>;
-    width?: ResponsiveValue<string>;
-    maxWidth?: ResponsiveValue<string>;
-    height?: ResponsiveValue<string>;
-    borderRadius?: ResponsiveValue<string>;
-    border?: ResponsiveValue<string>;
-    boxShadow?: ResponsiveValue<string>;
-    overflow?: ResponsiveValue<"visible" | "hidden" | "auto" | "scroll">;
-    children: React.ReactNode;
-    style?: React.CSSProperties;
-    className?: string;
-}
-export declare const Flexbox: React.FC<FlexboxProps>;
-export {};

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

@@ -1,36 +0,0 @@
-import React from "react";
-type ScreenSize = "sm" | "md" | "lg";
-type ResponsiveProp<T> = T | Partial<Record<ScreenSize, T>>;
-interface SectionProps {
-    /** Headings */
-    title?: string;
-    subtitle?: string;
-    /** Responsive variant styles */
-    variant?: ResponsiveProp<"light" | "dark" | "gradient" | "transparent" | "primary">;
-    /** Custom backgrounds */
-    background?: ResponsiveProp<string>;
-    overlay?: ResponsiveProp<string>;
-    color?: ResponsiveProp<string>;
-    /** Spacing */
-    paddingY?: ResponsiveProp<number | string>;
-    paddingX?: ResponsiveProp<number | string>;
-    /** Container size */
-    size?: ResponsiveProp<"sm" | "md" | "lg" | "xl" | "2xl" | "full">;
-    /** Section height */
-    height?: ResponsiveProp<string>;
-    /** Text alignment */
-    align?: ResponsiveProp<"left" | "center" | "right">;
-    /** Border radius */
-    borderRadius?: ResponsiveProp<number | string>;
-    /** Optional styling */
-    className?: string;
-    style?: React.CSSProperties;
-    children?: React.ReactNode;
-}
-/**
- * 🧱 Section Component
- * A flexible layout wrapper that supports responsive backgrounds,
- * adaptive padding, and variant-based theming.
- */
-export declare const Section: React.FC<SectionProps>;
-export default Section;