indas-ui 0.0.1 → 0.1.0

package/dist/components/ui/buttons/button.js

@@ -0,0 +1,228 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../../lib/utils.js";
+import { Check, CheckCircle, XCircle, Minus, Plus } from "lucide-react";
+const STORAGE_KEY = 'fab-btn-pos';
+function DraggableFAB({ onClick, disabled, tooltip, children }) {
+    const [pos, setPos] = React.useState(null);
+    const dragging = React.useRef(false);
+    const hasMoved = React.useRef(false);
+    const startPointer = React.useRef({ x: 0, y: 0 });
+    const startPos = React.useRef({ x: 0, y: 0 });
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        try {
+            const saved = localStorage.getItem(STORAGE_KEY);
+            if (saved) {
+                setPos(JSON.parse(saved));
+                return;
+            }
+        }
+        catch { }
+        setPos({ x: window.innerWidth - 72, y: window.innerHeight - 120 });
+    }, []);
+    const clamp = (v, min, max) => Math.min(Math.max(v, min), max);
+    const onPointerDown = (e) => {
+        dragging.current = true;
+        hasMoved.current = false;
+        startPointer.current = { x: e.clientX, y: e.clientY };
+        const rect = ref.current.getBoundingClientRect();
+        startPos.current = { x: rect.left, y: rect.top };
+        ref.current.setPointerCapture(e.pointerId);
+        e.preventDefault();
+    };
+    const onPointerMove = (e) => {
+        if (!dragging.current)
+            return;
+        const dx = e.clientX - startPointer.current.x;
+        const dy = e.clientY - startPointer.current.y;
+        if (Math.abs(dx) > 4 || Math.abs(dy) > 4)
+            hasMoved.current = true;
+        const newPos = {
+            x: clamp(startPos.current.x + dx, 0, window.innerWidth - 56),
+            y: clamp(startPos.current.y + dy, 0, window.innerHeight - 56),
+        };
+        setPos(newPos);
+    };
+    const onPointerUp = (e) => {
+        if (!dragging.current)
+            return;
+        dragging.current = false;
+        if (pos)
+            localStorage.setItem(STORAGE_KEY, JSON.stringify(pos));
+        if (!hasMoved.current)
+            onClick?.(e);
+        e.preventDefault();
+    };
+    if (!pos)
+        return null;
+    return (_jsx("button", { ref: ref, disabled: disabled, style: { left: pos.x, top: pos.y, touchAction: 'none' }, className: cn("fixed z-50 lg:hidden", "h-14 w-14 rounded-xl shadow-lg rotate-45", "bg-[rgb(var(--color-primary))]/50 hover:bg-[rgb(var(--color-primary))]/65", "border-2 border-[rgb(var(--color-primary))]/60 hover:border-[rgb(var(--color-primary))]/75", "transition-colors duration-200 flex items-center justify-center", "disabled:opacity-50 disabled:cursor-not-allowed"), title: tooltip, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, children: children }));
+}
+// Helper to check if value is a valid React element (already rendered JSX)
+const isReactElement = (value) => {
+    return React.isValidElement(value);
+};
+// Helper to check if value is a React component (function or forwardRef)
+const isReactComponent = (value) => {
+    return typeof value === 'function' || (value && typeof value === 'object' && '$$typeof' in value);
+};
+const buttonVariants = {
+    primary: "bg-primary text-primary-foreground hover:bg-primary-hover focus-ring active:opacity-90",
+    secondary: "bg-secondary text-secondary-foreground hover:bg-secondary-hover focus-ring active:opacity-90",
+    tertiary: "bg-tertiary text-tertiary-foreground hover:bg-tertiary-hover focus-ring active:opacity-90",
+    outline: "border border-bd-default bg-bg-surface text-fg-default hover:bg-bg-hover focus-ring active:bg-bg-hover",
+    ghost: "text-fg-default hover:bg-bg-hover focus-ring active:bg-bg-hover",
+    destructive: "bg-error text-fg-inverse hover:bg-error-hover focus-ring-error active:opacity-90",
+    // Footer-specific variants with inline primary color styles
+    'footer-primary': "border-primary transition-opacity duration-200 hover:opacity-90 disabled:opacity-50",
+    'footer-secondary': "transition-opacity duration-200 hover:opacity-80 disabled:opacity-50",
+    // Action button variants with CSS variable colors (dark mode compatible)
+    'action-create': "bg-[rgb(var(--color-primary))]/10 hover:bg-[rgb(var(--color-primary))]/20 text-[rgb(var(--color-primary))] border border-[rgb(var(--color-primary))]/20",
+    'action-save': "bg-[rgb(var(--color-success))]/10 hover:bg-[rgb(var(--color-success))]/20 text-[rgb(var(--color-success))] border border-[rgb(var(--color-success))]/20",
+    'action-save-as': "bg-[rgb(var(--color-sky))]/10 hover:bg-[rgb(var(--color-sky))]/20 text-[rgb(var(--color-sky))] border border-[rgb(var(--color-sky))]/20",
+    'action-edit': "bg-[rgb(var(--color-warning))]/10 hover:bg-[rgb(var(--color-warning))]/20 text-[rgb(var(--color-warning))] border border-[rgb(var(--color-warning))]/20",
+    'action-delete': "bg-[rgb(var(--color-error))]/10 hover:bg-[rgb(var(--color-error))]/20 text-[rgb(var(--color-error))] border border-[rgb(var(--color-error))]/20",
+    'action-print': "bg-[rgb(var(--color-purple))]/10 hover:bg-[rgb(var(--color-purple))]/20 text-[rgb(var(--color-purple))] border border-[rgb(var(--color-purple))]/20",
+    'action-send': "bg-[rgb(var(--color-info))]/10 hover:bg-[rgb(var(--color-info))]/20 text-[rgb(var(--color-info))] border border-[rgb(var(--color-info))]/20",
+    'action-mail': "bg-[rgb(var(--color-error))]/10 hover:bg-[rgb(var(--color-error))]/20 text-[rgb(var(--color-error))] border border-[rgb(var(--color-error))]/20",
+    'action-download': "bg-[rgb(var(--color-success))]/10 hover:bg-[rgb(var(--color-success))]/20 text-[rgb(var(--color-success))] border border-[rgb(var(--color-success))]/20",
+    'action-refresh': "bg-[rgb(var(--color-neutral))]/10 hover:bg-[rgb(var(--color-neutral))]/20 text-[rgb(var(--color-neutral))] border border-[rgb(var(--color-neutral))]/20",
+    'action-cancel': "bg-[rgb(var(--bg-surface))] hover:bg-[rgb(var(--bg-subtle))] text-[rgb(var(--fg-default))] border border-[rgb(var(--bd-default))]",
+    'action-secondary': "bg-[rgb(var(--bg-surface))] hover:bg-[rgb(var(--bg-hover))] text-[rgb(var(--fg-default))] border border-[rgb(var(--bd-default))]",
+    'action-apply': "bg-[rgb(var(--color-teal))]/10 hover:bg-[rgb(var(--color-teal))]/20 text-[rgb(var(--color-teal))] border border-[rgb(var(--color-teal))]/20",
+    'action-back': "bg-[rgb(var(--bg-surface))] hover:bg-[rgb(var(--bg-subtle))] text-[rgb(var(--fg-default))] border border-[rgb(var(--bd-default))]"
+};
+const buttonSizes = {
+    xs: "h-6 px-2 py-1 text-xs font-medium", // Extra small - for card headers, compact UI
+    sm: "h-8 px-3 text-sm font-medium",
+    md: "h-10 px-4 text-sm font-medium",
+    lg: "h-12 px-6 text-base font-medium",
+    footer: "px-3 py-1.5 text-xs font-medium", // Compact footer size
+    action: "h-8 px-2 sm:px-3 text-[11px] sm:text-xs font-medium" // Action button size — compact on mobile
+};
+const iconOnlySizes = {
+    xs: "w-6 h-6 text-sm",
+    sm: "w-8 h-8 text-base",
+    md: "w-9 h-9 text-lg",
+    lg: "w-10 h-10 text-xl",
+    footer: "w-8 h-8 text-base",
+    action: "w-9 h-9 text-lg"
+};
+const Button = React.forwardRef(({ className, variant = 'primary', size = 'md', loading = false, icon: Icon, iconPosition = 'left', iconOnly = false, tooltip, fab = false, children, disabled, style, ...props }, ref) => {
+    const isDisabled = disabled || loading;
+    // Check if it's an action button variant
+    const isActionButton = variant?.startsWith('action-');
+    // Automatically use 'action' size for action button variants
+    const buttonSize = isActionButton && size === 'md' ? 'action' : size;
+    // Auto-assign icons for specific action variants if no icon provided
+    let resolvedIcon = Icon;
+    if (!Icon) {
+        if (variant === 'action-apply')
+            resolvedIcon = CheckCircle;
+        if (variant === 'action-cancel')
+            resolvedIcon = XCircle;
+    }
+    // FAB mode: inline button on desktop + floating circular button on mobile
+    if (fab && resolvedIcon) {
+        // Parkbuddy style: icon is h-8 w-8 stroke-[3] with primary color text
+        const fabIcon = isReactElement(resolvedIcon)
+            ? resolvedIcon
+            : isReactComponent(resolvedIcon)
+                ? React.createElement(resolvedIcon, { className: 'h-8 w-8 -rotate-45 text-[rgb(var(--color-primary))] stroke-[1.5]' })
+                : null;
+        return (_jsxs(_Fragment, { children: [_jsxs("button", { className: cn("inline-flex items-center justify-center gap-2 transition-all duration-200", "disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none", isActionButton ? "rounded-lg" : "rounded-md", buttonVariants[variant], buttonSizes[buttonSize], "hidden lg:inline-flex", className), ref: ref, disabled: isDisabled, style: style, title: tooltip, ...props, children: [resolvedIcon && iconPosition === 'left' && !loading && (isReactElement(resolvedIcon) ? resolvedIcon
+                            : isReactComponent(resolvedIcon) ? React.createElement(resolvedIcon, { className: isActionButton ? 'h-4 w-4' : 'h-4 w-4' })
+                                : null), children] }), _jsx(DraggableFAB, { onClick: props.onClick, disabled: isDisabled, tooltip: tooltip, children: fabIcon })] }));
+    }
+    // Icon-only mode: circular button with just icon
+    if (iconOnly) {
+        // For icon-only buttons, use ghost variant by default if not specified
+        const iconOnlyVariant = variant === 'primary' ? 'ghost' : variant;
+        return (_jsx("button", { ref: ref, type: "button", title: tooltip, disabled: isDisabled, className: cn('inline-flex items-center justify-center', 'rounded-full border-0', 'transition-colors duration-150 ease-in-out', 'focus:outline-none focus-visible:ring-2 focus-visible:ring-[rgb(var(--color-primary))] focus-visible:ring-offset-2', 'disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none', iconOnlyVariant === 'ghost' && [
+                'text-[rgb(var(--fg-muted))]',
+                'hover:bg-[rgb(var(--bg-hover))]',
+                'active:bg-[rgb(var(--bg-subtle))]'
+            ], iconOnlyVariant !== 'ghost' && buttonVariants[iconOnlyVariant], iconOnlySizes[buttonSize], className), style: style, ...props, children: loading ? (_jsxs("svg", { className: "animate-spin h-4 w-4", fill: "none", viewBox: "0 0 24 24", children: [_jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), _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" })] })) : Icon && isReactElement(Icon) ? (Icon) : Icon && isReactComponent(Icon) ? (React.createElement(Icon, { className: buttonSize === 'footer' ? 'h-3.5 w-3.5' : 'h-5 w-5' })) : null }));
+    }
+    // Apply inline styles for footer variants (uses CSS variables)
+    const footerStyles = variant === 'footer-primary'
+        ? { backgroundColor: 'rgb(var(--color-primary))', color: 'rgb(var(--color-primary-foreground))', ...style }
+        : variant === 'footer-secondary'
+            ? { borderColor: 'rgb(var(--color-primary))', color: 'rgb(var(--color-primary))', ...style }
+            : style;
+    // Action buttons: icon-only on mobile — ONLY when children is simple text
+    // Buttons with complex children (badges, chevrons, JSX) keep their full layout
+    const actionIconOnly = isActionButton && resolvedIcon && typeof children === 'string';
+    return (_jsxs("button", { className: cn(
+        // Base styles
+        "inline-flex items-center justify-center transition-all duration-200", "disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none", 
+        // Gap — tighter on mobile for action buttons
+        isActionButton ? "gap-1 sm:gap-1.5" : "gap-2", 
+        // Border radius - action buttons use rounded-lg, others use rounded-md
+        isActionButton ? "rounded-lg" : "rounded-md", 
+        // Variant styles
+        buttonVariants[variant], 
+        // Size styles
+        buttonSizes[buttonSize], 
+        // Action buttons: square icon-only on mobile (< sm), icon + text on sm+
+        actionIconOnly && "max-sm:px-0 max-sm:w-8 max-sm:h-8", className), ref: ref, disabled: isDisabled, style: footerStyles, title: tooltip || (actionIconOnly && typeof children === 'string' ? children : undefined), ...props, children: [loading && (_jsxs("svg", { className: "animate-spin h-4 w-4", fill: "none", viewBox: "0 0 24 24", children: [_jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), _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" })] })), resolvedIcon && iconPosition === 'left' && !loading && (isReactElement(resolvedIcon) ? (resolvedIcon) : isReactComponent(resolvedIcon) ? (React.createElement(resolvedIcon, { className: size === 'xs' ? 'h-3 w-3' : size === 'footer' ? 'h-3.5 w-3.5' : isActionButton ? 'h-3.5 w-3.5 sm:h-4 sm:w-4' : 'h-4 w-4' })) : null), actionIconOnly ? (_jsx("span", { className: "hidden sm:inline", children: children })) : (children), resolvedIcon && iconPosition === 'right' && !loading && (isReactElement(resolvedIcon) ? (resolvedIcon) : isReactComponent(resolvedIcon) ? (React.createElement(resolvedIcon, { className: size === 'xs' ? 'h-3 w-3' : size === 'footer' ? 'h-3.5 w-3.5' : isActionButton ? 'h-3.5 w-3.5 sm:h-4 sm:w-4' : 'h-4 w-4' })) : null)] }));
+});
+Button.displayName = "Button";
+export const CheckboxButton = React.forwardRef(({ checked = false, onChange, label, size = 'md', className, ...props }, ref) => {
+    const sizeClasses = {
+        xs: 'h-6 px-2 text-[10px] gap-1.5',
+        sm: 'h-8 px-2.5 text-xs gap-2',
+        md: 'h-10 px-2.5 text-xs gap-2'
+    };
+    const checkboxSizeClasses = {
+        xs: 'w-3 h-3',
+        sm: 'w-4 h-4',
+        md: 'w-4 h-4'
+    };
+    const checkIconClasses = {
+        xs: 'h-2 w-2',
+        sm: 'h-3 w-3',
+        md: 'h-3 w-3'
+    };
+    return (_jsxs("button", { ref: ref, type: "button", onClick: () => onChange?.(!checked), className: cn('inline-flex items-center rounded-full border font-medium transition-all duration-200', 'disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-[rgb(var(--bg-surface))]', sizeClasses[size], checked
+            ? 'bg-[rgb(var(--color-primary))]/10 hover:bg-[rgb(var(--color-primary))]/20 text-[rgb(var(--color-primary))] border-[rgb(var(--color-primary))]/20'
+            : 'bg-[rgb(var(--bg-surface))] hover:bg-[rgb(var(--bg-subtle))] text-[rgb(var(--fg-default))] border-[rgb(var(--bd-default))]', className), ...props, children: [_jsx("div", { className: cn('rounded flex items-center justify-center transition-all duration-200 flex-shrink-0', checkboxSizeClasses[size], checked
+                    ? 'bg-[rgb(var(--color-primary))] border-[rgb(var(--color-primary))]'
+                    : 'bg-transparent border border-[rgb(var(--bd-default))]'), children: checked && (_jsx(Check, { className: cn(checkIconClasses[size], 'text-white'), strokeWidth: 3 })) }), _jsx("span", { className: "whitespace-nowrap", children: label })] }));
+});
+CheckboxButton.displayName = "CheckboxButton";
+export const InputButton = React.forwardRef(({ label, size = 'md', className, inputClassName, suffix, stepper, onStep, canStep, disabled, ...props }, ref) => {
+    const decDisabled = !!disabled || (canStep ? !canStep('dec') : false);
+    const incDisabled = !!disabled || (canStep ? !canStep('inc') : false);
+    return (_jsxs("div", { className: cn('inline-flex items-center gap-2 px-2.5 rounded-lg border transition-all duration-200', 'bg-[rgb(var(--bg-subtle))] hover:bg-[rgb(var(--bg-hover))] border-[rgb(var(--bd-default))]', 'h-8', className), children: [_jsxs("span", { className: cn('font-medium whitespace-nowrap text-[rgb(var(--fg-default))]', 'text-xs'), children: [label, ":"] }), stepper && (_jsx("button", { type: "button", onClick: () => onStep?.('dec'), disabled: decDisabled, "aria-label": "Decrease", className: "h-5 w-5 inline-flex items-center justify-center rounded-md border border-[rgb(var(--bd-default))] bg-[rgb(var(--bg-surface))] text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-muted))] disabled:opacity-40 disabled:cursor-not-allowed", children: _jsx(Minus, { className: "h-3 w-3" }) })), _jsx("input", { ref: ref, type: "number", disabled: disabled, className: cn('w-12 text-xs font-bold rounded-md px-1.5 text-center', 'border-0 focus:outline-none focus:ring-0', 'bg-[rgb(var(--bg-surface))]', 'text-[rgb(var(--fg-default))]', 'placeholder:text-[rgb(var(--fg-muted))]', '[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none', 'h-5', inputClassName), ...props }), stepper && (_jsx("button", { type: "button", onClick: () => onStep?.('inc'), disabled: incDisabled, "aria-label": "Increase", className: "h-5 w-5 inline-flex items-center justify-center rounded-md border border-[rgb(var(--bd-default))] bg-[rgb(var(--bg-surface))] text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-muted))] disabled:opacity-40 disabled:cursor-not-allowed", children: _jsx(Plus, { className: "h-3 w-3" }) })), suffix && (_jsx("span", { className: "text-xs font-medium text-[rgb(var(--fg-default))]", children: suffix }))] }));
+});
+InputButton.displayName = "InputButton";
+const filterPillVariants = {
+    primary: {
+        selected: 'bg-[rgb(var(--color-primary))] text-white shadow-md',
+        unselected: 'bg-[rgb(var(--color-primary-subtle))] text-[rgb(var(--color-primary))] hover:opacity-80'
+    },
+    warning: {
+        selected: 'bg-[rgb(var(--color-warning))] text-white shadow-md',
+        unselected: 'bg-[rgb(var(--color-warning-subtle))] text-[rgb(var(--color-warning))] hover:opacity-80'
+    },
+    success: {
+        selected: 'bg-[rgb(var(--color-success))] text-white shadow-md',
+        unselected: 'bg-[rgb(var(--color-success-subtle))] text-[rgb(var(--color-success))] hover:opacity-80'
+    },
+    orange: {
+        selected: 'bg-[rgb(var(--color-orange))] text-white shadow-md',
+        unselected: 'bg-[rgb(var(--color-orange-subtle))] text-[rgb(var(--color-orange))] hover:opacity-80'
+    },
+    error: {
+        selected: 'bg-[rgb(var(--color-error))] text-white shadow-md',
+        unselected: 'bg-[rgb(var(--color-error-subtle))] text-[rgb(var(--color-error))] hover:opacity-80'
+    }
+};
+export const FilterPillButton = React.forwardRef(({ label, shortLabel, count, variant, isSelected, className, ...props }, ref) => {
+    const styles = filterPillVariants[variant];
+    return (_jsxs("button", { ref: ref, type: "button", className: cn('px-2 sm:px-3 py-1 sm:py-1.5 rounded-full text-[10px] sm:text-xs font-semibold transition-all', 'hover:scale-105 cursor-pointer', isSelected ? styles.selected : styles.unselected, className), ...props, children: [_jsx("span", { className: "hidden sm:inline", children: label }), shortLabel && _jsx("span", { className: "sm:hidden", children: shortLabel }), !shortLabel && _jsx("span", { className: "sm:hidden", children: label }), _jsxs("span", { className: "ml-0.5 sm:ml-1 opacity-75", children: ["(", count, ")"] })] }));
+});
+FilterPillButton.displayName = "FilterPillButton";
+export { Button };

package/dist/components/ui/card.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };

package/dist/components/ui/card.js

@@ -0,0 +1,17 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils.js";
+const Card = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("rounded-xl border bg-card text-card-foreground shadow", className), ...props })));
+Card.displayName = "Card";
+const CardHeader = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("flex flex-col space-y-1.5 p-6", className), ...props })));
+CardHeader.displayName = "CardHeader";
+const CardTitle = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("font-semibold leading-none tracking-tight", className), ...props })));
+CardTitle.displayName = "CardTitle";
+const CardDescription = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("text-sm text-muted-foreground", className), ...props })));
+CardDescription.displayName = "CardDescription";
+const CardContent = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("p-6 pt-0", className), ...props })));
+CardContent.displayName = "CardContent";
+const CardFooter = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("flex items-center p-6 pt-0", className), ...props })));
+CardFooter.displayName = "CardFooter";
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };

package/dist/components/ui/chart.d.ts

@@ -0,0 +1,83 @@
+import * as React from 'react';
+import type { EChartsOption } from 'echarts';
+declare const THEMES: {
+    readonly light: "";
+    readonly dark: ".dark";
+};
+export type ChartConfig = {
+    [k in string]: {
+        label?: React.ReactNode;
+        icon?: React.ComponentType;
+    } & ({
+        color?: string;
+        theme?: never;
+    } | {
+        color?: never;
+        theme: Record<keyof typeof THEMES, string>;
+    });
+};
+type ChartContextProps = {
+    config: ChartConfig;
+};
+declare function useChart(): ChartContextProps;
+interface ChartContainerProps extends React.ComponentProps<'div'> {
+    config: ChartConfig;
+    children: React.ReactNode;
+}
+declare const ChartContainer: React.ForwardRefExoticComponent<Omit<ChartContainerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ChartStyle: ({ id, config }: {
+    id: string;
+    config: ChartConfig;
+}) => React.JSX.Element;
+interface EChartsWrapperProps {
+    option: EChartsOption;
+    height?: number | string;
+    width?: number | string;
+    className?: string;
+    onEvents?: Record<string, (params: any) => void>;
+    loading?: boolean;
+}
+declare const EChartsWrapper: React.ForwardRefExoticComponent<EChartsWrapperProps & React.RefAttributes<any>>;
+interface ChartTooltipProps {
+    trigger?: 'item' | 'axis' | 'none';
+    formatter?: string | ((params: any) => string);
+    backgroundColor?: string;
+    borderColor?: string;
+    textStyle?: {
+        color?: string;
+        fontSize?: number;
+    };
+}
+declare const createTooltipConfig: ({ trigger, formatter, backgroundColor, borderColor, textStyle }?: ChartTooltipProps) => EChartsOption["tooltip"];
+interface ChartLegendProps {
+    position?: 'top' | 'bottom' | 'left' | 'right';
+    orient?: 'horizontal' | 'vertical';
+    itemWidth?: number;
+    itemHeight?: number;
+    textStyle?: {
+        color?: string;
+        fontSize?: number;
+    };
+}
+declare const createLegendConfig: ({ position, orient, itemWidth, itemHeight, textStyle }?: ChartLegendProps) => EChartsOption["legend"];
+interface ChartGridProps {
+    top?: number | string;
+    right?: number | string;
+    bottom?: number | string;
+    left?: number | string;
+    containLabel?: boolean;
+}
+declare const createGridConfig: ({ top, right, bottom, left, containLabel }?: ChartGridProps) => EChartsOption["grid"];
+declare function getColorsFromConfig(config: ChartConfig): string[];
+declare function getPayloadConfigFromPayload(config: ChartConfig, payload: unknown, key: string): {
+    label?: React.ReactNode;
+    icon?: React.ComponentType;
+} & ({
+    color?: string;
+    theme?: never;
+} | {
+    color?: never;
+    theme: Record<keyof typeof THEMES, string>;
+});
+export { ChartContainer, ChartStyle, EChartsWrapper, createTooltipConfig, createLegendConfig, createGridConfig, getColorsFromConfig, getPayloadConfigFromPayload, useChart, };
+export type { ChartContainerProps, EChartsWrapperProps, ChartTooltipProps, ChartLegendProps, ChartGridProps, };

package/dist/components/ui/chart.js

@@ -0,0 +1,113 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import ReactECharts from 'echarts-for-react';
+import { cn } from '../../lib/utils.js';
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: '', dark: '.dark' };
+const ChartContext = React.createContext(null);
+function useChart() {
+    const context = React.useContext(ChartContext);
+    if (!context) {
+        throw new Error('useChart must be used within a <ChartContainer />');
+    }
+    return context;
+}
+const ChartContainer = React.forwardRef(({ id, className, children, config, ...props }, ref) => {
+    const uniqueId = React.useId();
+    const chartId = `chart-${id || uniqueId.replace(/:/g, '')}`;
+    return (_jsx(ChartContext.Provider, { value: { config }, children: _jsxs("div", { "data-chart": chartId, ref: ref, className: cn('flex aspect-video justify-center text-xs', className), ...props, children: [_jsx(ChartStyle, { id: chartId, config: config }), children] }) }));
+});
+ChartContainer.displayName = 'Chart';
+const ChartStyle = ({ id, config }) => {
+    const colorConfig = Object.entries(config).filter(([, config]) => config.theme || config.color);
+    if (!colorConfig.length) {
+        return null;
+    }
+    return (_jsx("style", { dangerouslySetInnerHTML: {
+            __html: Object.entries(THEMES)
+                .map(([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+                .map(([key, itemConfig]) => {
+                const color = itemConfig.theme?.[theme] ||
+                    itemConfig.color;
+                return color ? `  --color-${key}: ${color};` : null;
+            })
+                .join('\n')}
+}
+`)
+                .join('\n'),
+        } }));
+};
+const EChartsWrapper = React.forwardRef(({ option, height = 300, width = '100%', className, onEvents, loading }, ref) => {
+    return (_jsx("div", { className: cn('w-full', className), children: _jsx(ReactECharts, { ref: ref, option: option, style: { height, width }, opts: { renderer: 'canvas' }, onEvents: onEvents, showLoading: loading }) }));
+});
+EChartsWrapper.displayName = 'EChartsWrapper';
+const createTooltipConfig = ({ trigger = 'axis', formatter, backgroundColor = 'rgba(255, 255, 255, 0.95)', borderColor = '#e5e7eb', textStyle = { color: '#344767', fontSize: 12 } } = {}) => {
+    return {
+        trigger,
+        formatter,
+        backgroundColor,
+        borderColor,
+        borderWidth: 1,
+        textStyle,
+        axisPointer: trigger === 'axis' ? { type: 'shadow' } : undefined
+    };
+};
+const createLegendConfig = ({ position = 'bottom', orient = 'horizontal', itemWidth = 12, itemHeight = 12, textStyle = { color: '#6c757d', fontSize: 12 } } = {}) => {
+    const positionConfig = {
+        top: { top: 0 },
+        bottom: { bottom: 0 },
+        left: { left: 0 },
+        right: { right: 0 }
+    };
+    return {
+        ...positionConfig[position],
+        left: position === 'left' || position === 'right' ? undefined : 'center',
+        orient,
+        itemWidth,
+        itemHeight,
+        textStyle
+    };
+};
+const createGridConfig = ({ top = 20, right = 20, bottom = 40, left = 40, containLabel = true } = {}) => {
+    return {
+        top,
+        right,
+        bottom,
+        left,
+        containLabel
+    };
+};
+// Helper to get colors from config
+function getColorsFromConfig(config) {
+    return Object.values(config)
+        .map(item => item.color || item.theme?.light)
+        .filter((color) => !!color);
+}
+// Helper to extract item config from a payload
+function getPayloadConfigFromPayload(config, payload, key) {
+    if (typeof payload !== 'object' || payload === null) {
+        return undefined;
+    }
+    const payloadPayload = 'payload' in payload &&
+        typeof payload.payload === 'object' &&
+        payload.payload !== null
+        ? payload.payload
+        : undefined;
+    let configLabelKey = key;
+    if (key in payload &&
+        typeof payload[key] === 'string') {
+        configLabelKey = payload[key];
+    }
+    else if (payloadPayload &&
+        key in payloadPayload &&
+        typeof payloadPayload[key] === 'string') {
+        configLabelKey = payloadPayload[key];
+    }
+    return configLabelKey in config
+        ? config[configLabelKey]
+        : config[key];
+}
+export { ChartContainer, ChartStyle, EChartsWrapper, createTooltipConfig, createLegendConfig, createGridConfig, getColorsFromConfig, getPayloadConfigFromPayload, useChart, };

package/dist/components/ui/display/boolean-badge.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface BooleanBadgeProps {
+    value: boolean;
+    variant?: 'success' | 'info' | 'primary';
+    className?: string;
+}
+export declare const BooleanBadge: React.ForwardRefExoticComponent<BooleanBadgeProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/ui/display/boolean-badge.js

@@ -0,0 +1,23 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { cn } from '../../../lib/utils.js';
+const variantStyles = {
+    success: {
+        true: 'text-green-600 bg-green-100',
+        false: 'text-gray-400 bg-gray-100',
+    },
+    info: {
+        true: 'text-blue-600 bg-blue-100',
+        false: 'text-gray-400 bg-gray-100',
+    },
+    primary: {
+        true: 'text-[rgb(var(--color-primary))] bg-[color-mix(in_srgb,rgb(var(--color-primary))_10%,white)]',
+        false: 'text-gray-400 bg-gray-100',
+    },
+};
+export const BooleanBadge = React.forwardRef(({ value, variant = 'success', className }, ref) => {
+    const styles = variantStyles[variant];
+    return (_jsx("span", { ref: ref, className: cn('inline-flex items-center justify-center w-5 h-5 rounded-full', value ? styles.true : styles.false, className), children: value ? '✓' : '✗' }));
+});
+BooleanBadge.displayName = 'BooleanBadge';

package/dist/components/ui/display/card.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+}
+export declare const Card: React.FC<CardProps>;
+export declare const CardHeader: React.FC<CardProps>;
+export declare const CardTitle: React.FC<CardProps>;
+export declare const CardDescription: React.FC<CardProps>;
+export declare const CardContent: React.FC<CardProps>;
+export declare const CardFooter: React.FC<CardProps>;

package/dist/components/ui/display/card.js

@@ -0,0 +1,11 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { clsx } from 'clsx';
+export const Card = ({ className, children, ...props }) => {
+    return (_jsx("div", { className: clsx('card-base', className), ...props, children: children }));
+};
+export const CardHeader = ({ className, ...props }) => (_jsx("div", { className: clsx('flex flex-col space-y-1.5 p-6', className), ...props }));
+export const CardTitle = ({ className, ...props }) => (_jsx("h3", { className: clsx('text-2xl font-semibold leading-none tracking-tight', className), ...props }));
+export const CardDescription = ({ className, ...props }) => (_jsx("p", { className: clsx('text-sm text-fg-muted', className), ...props }));
+export const CardContent = ({ className, ...props }) => (_jsx("div", { className: clsx('p-6 pt-0', className), ...props }));
+export const CardFooter = ({ className, ...props }) => (_jsx("div", { className: clsx('flex items-center p-6 pt-0', className), ...props }));

package/dist/components/ui/display/collapsible.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
+declare const Collapsible: React.ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleProps & React.RefAttributes<HTMLDivElement>>;
+declare const CollapsibleTrigger: React.ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const CollapsibleContent: React.ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleContentProps & React.RefAttributes<HTMLDivElement>>;
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };

package/dist/components/ui/display/collapsible.js

@@ -0,0 +1,6 @@
+'use client';
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
+const Collapsible = CollapsiblePrimitive.Root;
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };

package/dist/components/ui/display/separator.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+declare const Separator: React.ForwardRefExoticComponent<Omit<SeparatorPrimitive.SeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Separator };

package/dist/components/ui/display/separator.js

@@ -0,0 +1,8 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import { cn } from "../../../lib/utils.js";
+const Separator = React.forwardRef(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => (_jsx(SeparatorPrimitive.Root, { ref: ref, decorative: decorative, orientation: orientation, className: cn("shrink-0 bg-border", orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]", className), ...props })));
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+export { Separator };

package/dist/components/ui/display/stats-card.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+import { LucideIcon } from "lucide-react";
+export interface StatsCardProps {
+    title: string;
+    value: string | number;
+    icon?: LucideIcon;
+    trend?: {
+        value: number;
+        direction: 'up' | 'down';
+        label?: string;
+    };
+    description?: string;
+    className?: string;
+    variant?: 'default' | 'accent' | 'warning' | 'error';
+}
+export declare function StatsCard({ title, value, icon: Icon, trend, description, className, variant }: StatsCardProps): React.JSX.Element;
+export interface StatsGridProps {
+    children: React.ReactNode;
+    columns?: 1 | 2 | 3 | 4;
+    className?: string;
+}
+export declare function StatsGrid({ children, columns, className }: StatsGridProps): React.JSX.Element;

package/dist/components/ui/display/stats-card.js

@@ -0,0 +1,25 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TrendingUp, TrendingDown } from "lucide-react";
+import { cn } from "../../../lib/utils.js";
+import { Card } from "./card.js";
+const iconVariants = {
+    default: "bg-primary text-white",
+    accent: "bg-accent text-white",
+    warning: "bg-warning text-white",
+    error: "bg-error text-white"
+};
+export function StatsCard({ title, value, icon: Icon, trend, description, className, variant = 'default' }) {
+    const TrendIcon = trend?.direction === 'up' ? TrendingUp : TrendingDown;
+    const trendColor = trend?.direction === 'up' ? 'text-success' : 'text-error';
+    return (_jsx(Card, { className: cn("p-6 min-h-[140px] w-full", className), children: _jsxs("div", { className: "flex items-start gap-4", children: [Icon && (_jsx("div", { className: cn("flex-shrink-0 p-3 rounded-lg", iconVariants[variant]), children: _jsx(Icon, { className: "h-6 w-6" }) })), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsxs("div", { className: "flex items-baseline flex-wrap gap-2", children: [_jsx("p", { className: "text-2xl font-semibold text-fg-default truncate", children: typeof value === 'number' ? value.toLocaleString() : value }), trend && (_jsxs("div", { className: cn("flex items-center text-sm font-semibold", trendColor), children: [_jsx(TrendIcon, { className: "h-4 w-4 flex-shrink-0" }), _jsxs("span", { className: "ml-1", children: [Math.abs(trend.value), "%", trend.label && ` ${trend.label}`] })] }))] }), _jsx("p", { className: "text-sm font-medium text-fg-muted mt-2 line-clamp-2", children: title }), description && (_jsx("p", { className: "text-sm text-fg-subtle mt-1 line-clamp-1", children: description }))] })] }) }));
+}
+export function StatsGrid({ children, columns = 4, className }) {
+    const gridCols = {
+        1: "grid-cols-1",
+        2: "grid-cols-1 md:grid-cols-2",
+        3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
+        4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4"
+    };
+    return (_jsx("div", { className: cn("grid gap-4 sm:gap-6 w-full", gridCols[columns], className), children: children }));
+}

package/dist/components/ui/display/text.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+declare const textVariants: (props?: {
+    variant?: "primary" | "secondary" | "destructive" | "warning" | "success" | "link" | "default" | "muted" | "link-hover";
+    size?: "base" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl" | "4xl";
+    weight?: "bold" | "normal" | "medium" | "semibold";
+    align?: "left" | "right" | "center" | "justify";
+} & import("class-variance-authority/types").ClassProp) => string;
+export interface TextProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof textVariants> {
+    as?: 'span' | 'p' | 'div' | 'label' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    truncate?: boolean;
+}
+declare const Text: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<HTMLElement>>;
+export { Text, textVariants };