@neuctra/ui 0.2.5 → 0.2.7

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

@@ -1,51 +1,30 @@
+"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from "clsx";
 /* ---------------------------- Table Container ---------------------------- */
-export const Table = ({ children, style, className }) => (_jsx("div", { style: {
-        overflowX: "auto",
+export const Table = ({ children, style, className }) => (_jsx("div", { className: clsx("overflow-x-auto rounded-lg shadow-sm border border-gray-200", className), style: {
         background: "#ffffff",
-        borderRadius: 12,
-        boxShadow: "0 2px 6px rgba(0,0,0,0.05)",
-        border: "1px solid #e5e7eb",
         ...style,
-    }, className: className, children: _jsx("table", { style: {
-            width: "100%",
-            borderCollapse: "collapse",
+    }, children: _jsx("table", { className: "w-full border-collapse", style: {
             borderSpacing: 0,
             borderRadius: 12,
             overflow: "hidden",
         }, children: children }) }));
 /* ---------------------------- Table Head ---------------------------- */
-export const THead = ({ children, style, className, }) => (_jsx("thead", { className: className, style: {
-        backgroundColor: "#f3f4f6",
-        color: "#111827",
-        fontWeight: 600,
+export const THead = ({ children, style, className, }) => (_jsx("thead", { className: clsx("bg-gray-100 text-gray-900 font-semibold", className), style: {
         ...style,
     }, children: children }));
 /* ---------------------------- Table Body ---------------------------- */
-export const TBody = ({ children, style, className, }) => (_jsx("tbody", { className: className, style: {
-        backgroundColor: "#ffffff",
-        ...style,
+export const TBody = ({ children, style, className }) => (_jsx("tbody", { className: clsx("bg-white", className), style: { ...style }, children: children }));
+export const TRow = ({ children, style, className, onClick, hoverBgColor = "#f9fafb", darkMode = false, }) => (_jsx("tr", { className: clsx("transition-colors duration-200 cursor-default", onClick ? "hover:cursor-pointer" : "", className), style: { borderBottom: "1px solid #e5e7eb", ...style }, onClick: onClick, onMouseEnter: (e) => {
+        if (!darkMode)
+            e.currentTarget.style.backgroundColor = hoverBgColor;
+        else
+            e.currentTarget.style.backgroundColor = "#1f2937";
+    }, onMouseLeave: (e) => {
+        e.currentTarget.style.backgroundColor = "transparent";
     }, children: children }));
-/* ---------------------------- Table Row ---------------------------- */
-export const TRow = ({ children, style, className, }) => (_jsx("tr", { className: className, style: {
-        borderBottom: "1px solid #e5e7eb",
-        transition: "background 0.2s ease",
-        cursor: "default",
-        ...style,
-    }, onMouseEnter: (e) => (e.currentTarget.style.backgroundColor = "#f9fafb"), onMouseLeave: (e) => (e.currentTarget.style.backgroundColor = "transparent"), children: children }));
 /* ---------------------------- Table Head Cell ---------------------------- */
-export const TH = ({ children, style, className }) => (_jsx("th", { className: className, style: {
-        textAlign: "left",
-        padding: "12px 16px",
-        fontSize: "0.875rem",
-        color: "#374151",
-        borderBottom: "2px solid #e5e7eb",
-        ...style,
-    }, children: children }));
+export const TH = ({ children, style, className }) => (_jsx("th", { className: clsx("text-left px-4 py-3 text-sm text-gray-700 border-b-2 border-gray-200", className), style: { ...style }, children: children }));
 /* ---------------------------- Table Data Cell ---------------------------- */
-export const TD = ({ children, style, className }) => (_jsx("td", { className: className, style: {
-        padding: "12px 16px",
-        fontSize: "0.875rem",
-        color: "#4b5563",
-        ...style,
-    }, children: children }));
+export const TD = ({ children, style, className }) => (_jsx("td", { className: clsx("px-4 py-3 text-sm text-gray-600", className), style: { ...style }, children: children }));

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

@@ -61,11 +61,8 @@ export const Tabs = ({ tabs, defaultActive = 0, position = "top", variant = "sol
         ...activeTabStyle,
     };
     const inactiveTab = {
-        ...(variant === "outline"
-            ? { borderColor }
-            : variant === "underline"
-                ? { borderBottomColor: "transparent" }
-                : {}),
+        ...(variant === "outline" ? { borderColor } : {}),
+        ...(variant === "underline" ? { borderBottomColor: "transparent" } : {}),
         ...inactiveTabStyle,
     };
     const hoverTab = {
@@ -91,7 +88,6 @@ export const Tabs = ({ tabs, defaultActive = 0, position = "top", variant = "sol
     };
     /** 🧱 Layout */
     const isVertical = position === "left" || position === "right";
-    const layoutDir = isVertical ? "row" : "column";
     return (_jsxs("div", { ref: containerRef, className: `modern-tabs ${className}`, style: {
             display: "flex",
             flexDirection: isVertical ? (position === "right" ? "row-reverse" : "row") : "column",
@@ -114,12 +110,7 @@ export const Tabs = ({ tabs, defaultActive = 0, position = "top", variant = "sol
                             justifyContent: "space-between",
                             width: "100%",
                             fontSize: 16,
-                        }, children: [showDrawerLabel, _jsx("span", { children: drawerIcon })] }), drawerOpen && (_jsx("div", { style: {
-                            display: "flex",
-                            flexDirection: "column",
-                            marginTop: 8,
-                            gap,
-                        }, children: tabs.map((tab, i) => {
+                        }, children: [showDrawerLabel, _jsx("span", { children: drawerIcon })] }), drawerOpen && (_jsx("div", { style: { display: "flex", flexDirection: "column", marginTop: 8, gap }, children: tabs.map((tab, i) => {
                             const isActive = i === active;
                             const isHovered = hovered === i;
                             const isDisabled = tab.disabled;

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/src/index.js

@@ -3,11 +3,11 @@ import "./style.css"; // 🔹 Global styles import (keep this as the only CSS im
 // ✅ BASIC COMPONENT EXPORTS
 // ==============================
 // Alerts & Notifications
-export { Alert } from "./components/basic/Alert"; // ✅ Finalized
+export { ToastProvider, useToast } from "./components/basic/Alert"; // ✅ Modern ShadCN-style toast
 // Accordions
 export { Accordion } from "./components/basic/Accordation"; // ✅ Finalized
 // Avatars
-export { Avatar, AvatarGroup } from "./components/basic/Avatar"; // ✅ Finalized
+export { Avatar } from "./components/basic/Avatar"; // ✅ Finalized
 // Audio Components
 export { AudioPlayer } from "./components/basic/AudioPlayer"; // ✅ Finalized
 export { AudioGallery } from "./components/basic/AudioGallery"; // ✅ Finalized
@@ -15,15 +15,13 @@ export { AudioGallery } from "./components/basic/AudioGallery"; // ✅ Finalized
 export { Badge } from "./components/basic/Badge"; // ✅ Finalized
 // Buttons
 export { Button } from "./components/basic/Button"; // ✅ Finalized
-// Cards
-export { Card } from "./components/basic/Card"; // ✅ Finalized
 // ✅ Checkbox, Radio & Switch Components
 export { CheckboxGroup } from "./components/basic/CheckboxGroup";
 export { RadioGroup } from "./components/basic/RadioGroup";
 export { SwitchGroup } from "./components/basic/SwitchGroup";
 // Containers & Layout
 export { Container } from "./components/basic/Container"; // ✅ Finalized
-export { Flexbox } from "./components/basic/Flexbox"; // ✅ Finalized
+export { FlexView } from "./components/basic/FlexView"; // ✅ Finalized
 export { Stack, HStack, VStack } from "./components/basic/Stack"; // ✅ Finalized
 export { GridView } from "./components/basic/GridView"; // ✅ Finalized
 // Drawers

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

@@ -1,13 +1,11 @@
-import React from "react";
+import React, { ReactNode, CSSProperties } from "react";
 export interface AccordionItem {
-    title: string;
-    content: React.ReactNode;
+    title: string | ReactNode;
+    content: ReactNode;
 }
 export interface AccordionProps {
     items: AccordionItem[];
-    /** Allow multiple open items */
     allowMultiple?: boolean;
-    /** Default open indexes */
     defaultOpen?: number[];
     /** Appearance */
     borderColor?: string;
@@ -28,17 +26,15 @@ export interface AccordionProps {
     fontWeight?: string | number;
     contentFontSize?: string | number;
     contentFontWeight?: string | number;
-    /** Icon customization */
-    iconOpen?: React.ReactNode;
-    iconClose?: React.ReactNode;
+    /** Icon */
+    iconOpen?: ReactNode;
+    iconClose?: ReactNode;
     iconSize?: string | number;
-    /** Motion & style */
+    /** Motion */
     transitionDuration?: string;
     shadow?: string;
+    /** Class overrides */
     className?: string;
-    style?: React.CSSProperties;
+    style?: CSSProperties;
 }
-/**
- * 🧠 Industry-standard, minimal, and fully customizable Accordion
- */
 export declare const Accordion: React.FC<AccordionProps>;

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

@@ -1,30 +1,17 @@
-import React from "react";
+import React, { ReactNode } from "react";
 type AlertType = "success" | "error" | "warning" | "info";
-type AlertPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
-export interface AlertProps {
+interface Toast {
+    id: number;
     title?: string;
     description?: string;
     type?: AlertType;
-    dismissible?: boolean;
     duration?: number;
-    onClose?: () => void;
-    /** Customization */
-    icon?: React.ReactNode;
-    actionButton?: React.ReactNode;
-    position?: AlertPosition;
-    backgroundColor?: string;
-    borderColor?: string;
-    textColor?: string;
-    borderRadius?: string | number;
-    shadow?: string;
-    padding?: string | number;
-    fontSize?: string | number;
-    fontWeight?: number | string;
-    descriptionColor?: string;
-    animationDuration?: string;
-    maxWidth?: string;
-    className?: string;
-    style?: React.CSSProperties;
 }
-export declare const Alert: React.FC<AlertProps>;
+interface ToastContextProps {
+    addToast: (toast: Omit<Toast, "id">) => void;
+}
+export declare const useToast: () => ToastContextProps;
+export declare const ToastProvider: React.FC<{
+    children: ReactNode;
+}>;
 export {};

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

@@ -1,6 +1,7 @@
-import React from "react";
+import React, { CSSProperties } from "react";
 type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "responsive";
 type AvatarVariant = "circular" | "rounded" | "square";
+type StatusPosition = "top-left" | "top-right" | "bottom-left" | "bottom-right";
 interface AvatarProps {
     src?: string;
     alt?: string;
@@ -8,25 +9,15 @@ interface AvatarProps {
     variant?: AvatarVariant;
     isOnline?: boolean;
     isOffline?: boolean;
-    className?: string;
-    style?: React.CSSProperties;
-    statusClassName?: string;
-    statusStyle?: React.CSSProperties;
-    statusPosition?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
-    fallback?: string;
     ring?: boolean;
     ringColor?: string;
+    fallback?: string;
     onClick?: () => void;
-}
-interface AvatarGroupProps {
-    avatars: AvatarProps[];
-    max?: number;
-    size?: AvatarSize;
+    statusPosition?: StatusPosition;
     className?: string;
-    style?: React.CSSProperties;
-    spacing?: "tight" | "normal" | "loose";
-    direction?: "left" | "right";
+    statusClassName?: string;
+    style?: CSSProperties;
+    statusStyle?: CSSProperties;
 }
 export declare const Avatar: React.FC<AvatarProps>;
-export declare const AvatarGroup: React.FC<AvatarGroupProps>;
 export {};

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

@@ -1,25 +1,20 @@
-import React, { CSSProperties, ReactNode } from "react";
+import React from "react";
 export interface BadgeProps {
     text?: string;
-    color?: string;
-    textColor?: string;
-    borderColor?: string;
-    borderWidth?: string;
-    icon?: ReactNode;
+    icon?: React.ReactNode;
     iconPosition?: "left" | "right";
+    /** 🎨 Theme */
+    primaryTheme?: boolean;
+    primaryColor?: string;
+    /** 📏 Sizes */
+    size?: "sm" | "md" | "lg";
+    /** Shape */
     rounded?: boolean;
-    borderRadius?: string;
-    fontSize?: string;
-    fontWeight?: number | string;
-    horizontalPadding?: string;
-    verticalPadding?: string;
-    margin?: string;
-    shadow?: string;
+    /** Notification */
     notificationDot?: boolean;
     dotColor?: string;
     count?: number | string;
     pulse?: boolean;
-    style?: CSSProperties;
     className?: string;
     onClick?: () => void;
 }

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

@@ -1,26 +1,16 @@
-import React, { CSSProperties, FC } from "react";
-/** ⚙️ Props */
-export interface ButtonProps {
+import React from "react";
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     children: React.ReactNode;
-    type?: "button" | "submit" | "reset";
-    onClick?: React.MouseEventHandler<HTMLButtonElement>;
     iconBefore?: React.ReactNode;
     iconAfter?: React.ReactNode;
-    className?: string;
-    style?: CSSProperties;
-    fullWidth?: boolean;
-    disabled?: boolean;
     loading?: boolean;
     loadingText?: string;
-    /** 🎨 Theme options */
-    darkMode?: boolean;
-    baseColor?: string;
-    /** 🧩 Optional design tweaks */
+    fullWidth?: boolean;
+    /** 🎨 Theme */
+    primaryTheme?: boolean;
+    primaryColor?: string;
+    /** 📏 Sizes */
     size?: "sm" | "md" | "lg";
-    rounded?: boolean;
-    /** 🧱 Border visibility */
-    showBorder?: boolean;
+    className?: string;
 }
-/** 💎 Minimal customizable Button */
-export declare const Button: FC<ButtonProps>;
-export default Button;
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;

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

@@ -21,6 +21,7 @@ interface CheckboxGroupProps {
     iconUncheckedBorderColor?: string;
     textColor?: string;
     errorStyle?: React.CSSProperties;
+    darkMode?: boolean;
 }
 export declare const CheckboxGroup: React.FC<CheckboxGroupProps>;
 export {};

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

@@ -1,32 +1,15 @@
 import React from "react";
 type ContainerSize = "sm" | "md" | "lg" | "xl" | "2xl" | "full";
 export interface ContainerProps {
-    /** Predefined max-width based on common breakpoints */
     size?: ContainerSize;
-    /** Padding (accepts number in px or CSS string, e.g., '2rem') */
-    padding?: number | string;
-    /** Margin (accepts number in px or CSS string, e.g., 'auto' or '16px 8px') */
-    margin?: number | string;
-    /** Background color (any valid CSS color) */
-    backgroundColor?: string;
-    /** Center the container horizontally (adds `margin: 0 auto`) */
+    padding?: "none" | "sm" | "md" | "lg" | "xl";
     center?: boolean;
-    /** Custom width override (defaults to container max width) */
-    width?: string;
-    /** Optional height */
-    height?: string;
-    /** Border radius (accepts number in px or CSS string) */
-    borderRadius?: number | string;
-    /** Additional inline styles */
-    style?: React.CSSProperties;
-    /** Tailwind or custom class names */
     className?: string;
-    /** Container content */
     children: React.ReactNode;
 }
 /**
  * 🧱 Container Component
- * A flexible, responsive layout wrapper inspired by Tailwind's container.
+ * Fully responsive, Tailwind-first layout wrapper
  */
 export declare const Container: React.FC<ContainerProps>;
 export default Container;

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

@@ -1,33 +1,22 @@
-import React, { CSSProperties, ReactNode } from "react";
-export interface DrawerButtonProps {
+import React, { ReactNode } from "react";
+interface DrawerButtonProps {
     label?: string;
     icon?: ReactNode;
     iconPosition?: "left" | "right";
     onClick?: () => void;
-    color?: string;
-    textColor?: string;
-    borderRadius?: string;
-    padding?: string;
-    fontSize?: string;
-    gap?: string;
-    style?: CSSProperties;
     className?: string;
 }
 export declare const DrawerButton: React.FC<DrawerButtonProps>;
-export interface DrawerProps {
+interface DrawerProps {
     open: boolean;
     onClose?: () => void;
     position?: "left" | "right" | "top" | "bottom";
-    width?: string;
-    height?: string;
-    backgroundColor?: string;
-    backdropColor?: string;
-    transitionDuration?: number;
-    style?: CSSProperties;
+    size?: string;
     className?: string;
+    overlayClassName?: string;
     children?: ReactNode;
     showCloseButton?: boolean;
-    closeIconColor?: string;
-    closeButtonStyle?: CSSProperties;
+    closeButtonClassName?: string;
 }
 export declare const Drawer: React.FC<DrawerProps>;
+export {};

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

@@ -1,53 +1,33 @@
 import React from "react";
-export interface Option {
+export interface SelectOption {
     label: string;
     value: string;
     icon?: React.ReactNode;
-    disabled?: boolean;
-    description?: string;
 }
 export interface DropdownProps {
-    options: Option[];
+    label?: string;
+    name?: string;
     value?: string;
-    values?: string[];
     defaultValue?: string;
-    defaultValues?: string[];
-    onChange?: (value: string | string[]) => void;
+    onChange?: (name: string, value: string) => void;
+    options?: SelectOption[];
     placeholder?: string;
+    required?: boolean;
     disabled?: boolean;
-    searchable?: boolean;
-    multiSelect?: boolean;
-    clearable?: boolean;
-    virtualized?: boolean;
-    width?: string | number;
-    dropdownMaxHeight?: string;
-    borderRadius?: string;
-    boxShadow?: string;
-    borderColor?: string;
-    accentColor?: string;
-    theme?: "light" | "dark" | "custom";
-    menuBg?: string;
-    controlBg?: string;
-    textColor?: string;
-    hoverBg?: string;
-    selectedBg?: string;
-    disabledBg?: string;
-    disabledTextColor?: string;
-    placeholderColor?: string;
-    transitionDuration?: string;
-    className?: string;
-    controlClassName?: string;
-    menuClassName?: string;
+    error?: string | boolean;
+    success?: boolean;
+    helperText?: string;
+    labelIcon?: React.ElementType;
+    prefixIcon?: React.ElementType;
+    variant?: "dark" | "light";
+    /** 🔥 THEME SYSTEM */
+    primaryTheme?: boolean;
+    primaryColor?: string;
+    containerClassName?: string;
+    labelClassName?: string;
+    triggerClassName?: string;
+    dropdownClassName?: string;
     optionClassName?: string;
-    style?: React.CSSProperties;
-    controlStyle?: React.CSSProperties;
-    menuStyle?: React.CSSProperties;
-    optionStyle?: React.CSSProperties;
-    iconPrefix?: React.ReactNode;
-    iconSuffix?: React.ReactNode;
-    clearIcon?: React.ReactNode;
-    dropdownIcon?: React.ReactNode;
-    checkIcon?: React.ReactNode;
+    className?: string;
 }
 export declare const Dropdown: React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<HTMLDivElement>>;
-export default Dropdown;

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

@@ -0,0 +1,16 @@
+import React from "react";
+type ScreenSize = "sm" | "md" | "lg";
+type ResponsiveValue<T> = T | Partial<Record<ScreenSize, T>>;
+interface FlexViewProps {
+    direction?: ResponsiveValue<"row" | "column" | "row-reverse" | "column-reverse">;
+    align?: ResponsiveValue<"start" | "end" | "center" | "stretch" | "baseline">;
+    justify?: ResponsiveValue<"start" | "end" | "center" | "between" | "around" | "evenly">;
+    wrap?: ResponsiveValue<"nowrap" | "wrap" | "wrap-reverse">;
+    gap?: ResponsiveValue<1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12>;
+    padding?: ResponsiveValue<1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12>;
+    margin?: ResponsiveValue<1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12>;
+    className?: string;
+    children: React.ReactNode;
+}
+export declare const FlexView: React.FC<FlexViewProps>;
+export {};