@kala-ui/react-app 0.1.0-beta.0

package/dist/components/sparkline-chart/sparkline-chart.js

@@ -0,0 +1,134 @@
+"use client";
+/**
+ * SparklineChart Component
+ * Small inline chart for use in cards and dashboards
+ * Optimized for compact display with minimal visual noise
+ */
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "@kala-ui/react/lib/utils";
+import { useThemeAwareChart } from "../charts/index.js";
+import { Chart } from "../charts/chart.js";
+export function SparklineChart({ data, type = "line", color, width = "100%", height = 64, tooltip = false, className, gradientFrom, gradientTo, animated = true, interactive = false, }) {
+    const { colors: themeColors, theme } = useThemeAwareChart();
+    const chartColor = color || themeColors.primary[0];
+    const options = {
+        chart: {
+            type,
+            sparkline: {
+                enabled: true,
+            },
+            animations: {
+                enabled: animated,
+                speed: 400,
+            },
+            toolbar: {
+                show: false,
+            },
+            zoom: {
+                enabled: false,
+            },
+        },
+        colors: [chartColor],
+        states: {
+            hover: {
+                filter: {
+                    type: interactive ? "lighten" : "none",
+                },
+            },
+            active: {
+                filter: {
+                    type: "none",
+                },
+            },
+        },
+        stroke: {
+            curve: "smooth",
+            width: type === "line" ? 2 : 0,
+        },
+        fill: {
+            type: type === "area" ? "gradient" : "solid",
+            ...(type === "area" && {
+                gradient: {
+                    shadeIntensity: 1,
+                    opacityFrom: 0.7,
+                    opacityTo: 0.1,
+                    stops: [0, 100],
+                    ...(gradientFrom &&
+                        gradientTo && {
+                        colorStops: [
+                            {
+                                offset: 0,
+                                color: gradientFrom,
+                                opacity: 0.7,
+                            },
+                            {
+                                offset: 100,
+                                color: gradientTo,
+                                opacity: 0.1,
+                            },
+                        ],
+                    }),
+                },
+            }),
+        },
+        tooltip: {
+            enabled: tooltip,
+            theme: theme === "dark" || theme === "accent" ? "dark" : "light",
+            x: {
+                show: false,
+            },
+            y: {
+                title: {
+                    formatter: () => "",
+                },
+            },
+            marker: {
+                show: false,
+            },
+        },
+        markers: {
+            size: 0,
+            hover: {
+                size: interactive ? 4 : 0,
+            },
+        },
+        grid: {
+            show: false,
+        },
+        xaxis: {
+            labels: {
+                show: false,
+            },
+            axisBorder: {
+                show: false,
+            },
+            axisTicks: {
+                show: false,
+            },
+            tooltip: {
+                enabled: false,
+            },
+            crosshairs: {
+                show: interactive,
+            },
+        },
+        yaxis: {
+            labels: {
+                show: false,
+            },
+        },
+        plotOptions: {
+            bar: {
+                columnWidth: "80%",
+            },
+        },
+    };
+    const series = [
+        {
+            name: "Value",
+            data: data,
+        },
+    ];
+    return (_jsx("div", { className: cn("sparkline-chart", className), children: _jsx(Chart, { options: options, series: series, type: type, height: height, width: width }) }));
+}

package/dist/components/user-menu-dropdown/index.d.ts

@@ -0,0 +1 @@
+export { UserMenuDropdown, type UserMenuDropdownProps, } from "./user-menu-dropdown";

package/dist/components/user-menu-dropdown/index.js

@@ -0,0 +1,2 @@
+"use client";
+export { UserMenuDropdown, } from "./user-menu-dropdown.js";

package/dist/components/user-menu-dropdown/user-menu-dropdown.d.ts

@@ -0,0 +1,31 @@
+export interface UserMenuDropdownProps extends Omit<React.ComponentProps<"button">, "color"> {
+    /**
+     * User information to display
+     */
+    user: {
+        name?: string;
+        email?: string;
+        avatar?: string;
+    };
+    /**
+     * Whether the dropdown is currently open
+     */
+    isOpen?: boolean;
+    /**
+     * Callback when dropdown open state changes
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Callback when logout is clicked
+     */
+    onLogout?: () => void;
+    /**
+     * Base URL for navigation links (default: '/admin')
+     */
+    baseUrl?: string;
+    /**
+     * Additional CSS classes for the trigger button
+     */
+    className?: string;
+}
+export declare function UserMenuDropdown({ user, isOpen, onOpenChange, onLogout, baseUrl, className, ref, ...props }: UserMenuDropdownProps): import("react").JSX.Element;

package/dist/components/user-menu-dropdown/user-menu-dropdown.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Avatar, AvatarFallback, AvatarImage } from "@kala-ui/react/avatar";
+import { Button } from "@kala-ui/react/button";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@kala-ui/react/dropdown-menu";
+import { cn } from "@kala-ui/react/lib/utils";
+import { LogOut, Settings, User } from "lucide-react";
+export function UserMenuDropdown({ user, isOpen, onOpenChange, onLogout, baseUrl = "/admin", className, ref, ...props }) {
+    const initials = user.name
+        ? user.name
+            .split(" ")
+            .map((n) => n[0])
+            .join("")
+            .toUpperCase()
+            .slice(0, 2)
+        : (user.email?.[0]?.toUpperCase() ?? "?");
+    const handleProfileClick = () => {
+        window.location.href = `${baseUrl}/profile`;
+    };
+    const handleSettingsClick = () => {
+        window.location.href = `${baseUrl}/profile/security`;
+    };
+    const handleLogoutClick = () => {
+        onLogout?.();
+    };
+    return (_jsxs(DropdownMenu, { ...(isOpen !== undefined && { open: isOpen }), ...(onOpenChange && { onOpenChange }), children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", ref: ref, className: cn("h-auto p-1 rounded-full hover:bg-accent", className), "aria-label": "User menu", ...props, children: _jsxs(Avatar, { className: "size-8", children: [user.avatar && (_jsx(AvatarImage, { src: user.avatar, alt: user.name ?? "User" })), _jsx(AvatarFallback, { className: "bg-primary text-primary-foreground text-sm font-medium", children: initials })] }) }) }), _jsxs(DropdownMenuContent, { align: "end", className: "w-56", children: [_jsx(DropdownMenuLabel, { children: _jsxs("div", { className: "flex flex-col space-y-1", children: [user.name && (_jsx("p", { className: "text-sm font-medium leading-none", children: user.name })), user.email && (_jsx("p", { className: "text-xs text-muted-foreground leading-none", children: user.email }))] }) }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { onClick: handleProfileClick, children: [_jsx(User, { className: "mr-2 size-4" }), "Profile"] }), _jsxs(DropdownMenuItem, { onClick: handleSettingsClick, children: [_jsx(Settings, { className: "mr-2 size-4" }), "Settings"] }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { onClick: handleLogoutClick, color: "destructive", children: [_jsx(LogOut, { className: "mr-2 size-4" }), "Logout"] })] })] }));
+}

package/dist/index.d.ts

@@ -0,0 +1,16 @@
+export * from "./components/app-shell";
+export * from "./components/charts";
+export * from "./components/data-table";
+export * from "./components/dnd";
+export * from "./components/footer";
+export * from "./components/header";
+export * from "./components/metric-card";
+export * from "./components/nav-link";
+export * from "./components/navigation";
+export * from "./components/session-card";
+export * from "./components/sidebar";
+export * from "./components/social-login-button";
+export * from "./components/social-login-buttons";
+export * from "./components/sparkline-chart";
+export * from "./components/user-menu-dropdown";
+export { isActivePath } from "./lib/active-path";

package/dist/index.js

@@ -0,0 +1,19 @@
+"use client";
+// Main entry point for @kala-ui/react-app
+// App-level composite components built on @kala-ui/react primitives.
+export * from "./components/app-shell/index.js";
+export * from "./components/charts/index.js";
+export * from "./components/data-table/index.js";
+export * from "./components/dnd/index.js";
+export * from "./components/footer/index.js";
+export * from "./components/header/index.js";
+export * from "./components/metric-card/index.js";
+export * from "./components/nav-link/index.js";
+export * from "./components/navigation/index.js";
+export * from "./components/session-card/index.js";
+export * from "./components/sidebar/index.js";
+export * from "./components/social-login-button/index.js";
+export * from "./components/social-login-buttons/index.js";
+export * from "./components/sparkline-chart/index.js";
+export * from "./components/user-menu-dropdown/index.js";
+export { isActivePath } from "./lib/active-path.js";

package/dist/lib/active-path.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Active-link check without false positives: "/admin" must not match
+ * pathname "/admin-panel", while "/users" still matches "/users/123".
+ */
+export declare function isActivePath(pathname: string, href: string): boolean;

package/dist/lib/active-path.js

@@ -0,0 +1,12 @@
+/**
+ * Active-link check without false positives: "/admin" must not match
+ * pathname "/admin-panel", while "/users" still matches "/users/123".
+ */
+export function isActivePath(pathname, href) {
+    const path = pathname.replace(/\/+$/, "") || "/";
+    const target = href.replace(/\/+$/, "");
+    if (target === "/" || target === "") {
+        return path === "/";
+    }
+    return path === target || path.startsWith(`${target}/`);
+}