@appcorp/shadcn 1.1.6 → 1.1.8

package/components/app-sidebar.js

@@ -26,7 +26,7 @@ var AppSidebar = function (_a) {
     var props = __rest(_a, []);
     return (react_1.default.createElement(sidebar_1.Sidebar, { collapsible: "icon" },
         react_1.default.createElement(sidebar_1.SidebarHeader, null,
-            react_1.default.createElement(team_switcher_1.TeamSwitcher, { members: props.members })),
+            react_1.default.createElement(team_switcher_1.TeamSwitcher, { profiles: props.profiles })),
         react_1.default.createElement(sidebar_1.SidebarContent, null,
             react_1.default.createElement(nav_main_1.NavMain, { items: props.navItems }),
             react_1.default.createElement(nav_projects_1.NavProjects, { apps: props.apps })),

package/components/dashboard.js

@@ -42,9 +42,9 @@ var sidebar_1 = require("./sidebar");
 var theme_switcher_1 = require("./ui/theme-switcher");
 var language_selector_1 = require("./ui/language-selector");
 var Dashboard = function (_a) {
-    var apps = _a.apps, avatar = _a.avatar, breadcrumbs = _a.breadcrumbs, children = _a.children, email = _a.email, members = _a.members, navItems = _a.navItems, username = _a.username, locale = _a.locale, onLocaleChange = _a.onLocaleChange, showLanguageSelector = _a.showLanguageSelector;
+    var apps = _a.apps, avatar = _a.avatar, breadcrumbs = _a.breadcrumbs, children = _a.children, email = _a.email, profiles = _a.profiles, navItems = _a.navItems, username = _a.username, locale = _a.locale, onLocaleChange = _a.onLocaleChange, showLanguageSelector = _a.showLanguageSelector;
     return (react_1.default.createElement(sidebar_1.SidebarProvider, null,
-        react_1.default.createElement(app_sidebar_1.AppSidebar, { username: username, email: email, members: members, avatar: avatar, navItems: navItems, apps: apps }),
+        react_1.default.createElement(app_sidebar_1.AppSidebar, { username: username, email: email, profiles: profiles, avatar: avatar, navItems: navItems, apps: apps }),
         react_1.default.createElement(sidebar_1.SidebarInset, null,
             react_1.default.createElement("header", { className: "flex h-16 shrink-0 items-center justify-between gap-2 border transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12" },
                 react_1.default.createElement("div", { className: "flex items-center gap-2 px-4" },

package/components/team-switcher.d.ts

@@ -1,7 +1,7 @@
 import { FC } from "react";
-import { DashboardMemberItem } from "../data/admin-dashboard";
+import { DashboardProfileItem } from "../data/admin-dashboard";
 interface TeamSwitcherProps {
-    members: DashboardMemberItem[];
+    profiles: DashboardProfileItem[];
 }
 export declare const TeamSwitcher: FC<TeamSwitcherProps>;
 export {};

package/components/team-switcher.js

@@ -11,9 +11,9 @@ var dropdown_menu_1 = require("./ui/dropdown-menu");
 var sidebar_1 = require("./sidebar");
 var avatar_1 = require("./ui/avatar");
 var TeamSwitcher = function (_a) {
-    var members = _a.members;
+    var profiles = _a.profiles;
     var isMobile = (0, sidebar_1.useSidebar)().isMobile;
-    var _b = react_1.default.useState(members[0]), activeMember = _b[0], setActiveMember = _b[1];
+    var _b = react_1.default.useState(profiles[0]), activeMember = _b[0], setActiveMember = _b[1];
     if (!activeMember) {
         return null;
     }
@@ -31,17 +31,17 @@ var TeamSwitcher = function (_a) {
                             react_1.default.createElement("span", { className: "truncate text-xs" }, activeMember.age)),
                         react_1.default.createElement(lucide_react_1.ChevronsUpDown, { className: "ml-auto" }))),
                 react_1.default.createElement(dropdown_menu_1.DropdownMenuContent, { className: "w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg", align: "start", side: isMobile ? "bottom" : "right", sideOffset: 4 },
-                    react_1.default.createElement(dropdown_menu_1.DropdownMenuLabel, { className: "text-muted-foreground text-xs" }, "Members"),
-                    members.map(function (member) { return (react_1.default.createElement(dropdown_menu_1.DropdownMenuItem, { key: member.name, onClick: function () { return setActiveMember(member); }, className: "gap-2 p-2" },
+                    react_1.default.createElement(dropdown_menu_1.DropdownMenuLabel, { className: "text-muted-foreground text-xs" }, "Profiles"),
+                    profiles.map(function (profile) { return (react_1.default.createElement(dropdown_menu_1.DropdownMenuItem, { key: profile.name, onClick: function () { return setActiveMember(profile); }, className: "gap-2 p-2" },
                         react_1.default.createElement("div", { className: "flex size-6 items-center justify-center rounded-md border" },
                             react_1.default.createElement(avatar_1.Avatar, { className: "size-6" },
-                                react_1.default.createElement(avatar_1.AvatarImage, { src: member.avatar, alt: member.name }),
-                                react_1.default.createElement(avatar_1.AvatarFallback, { className: "!focus:text-red-400" }, member.name.charAt(0)))),
-                        member.name)); }),
+                                react_1.default.createElement(avatar_1.AvatarImage, { src: profile.avatar, alt: profile.name }),
+                                react_1.default.createElement(avatar_1.AvatarFallback, { className: "!focus:text-red-400" }, profile.name.charAt(0)))),
+                        profile.name)); }),
                     react_1.default.createElement(dropdown_menu_1.DropdownMenuSeparator, null),
                     react_1.default.createElement(dropdown_menu_1.DropdownMenuItem, { className: "gap-2 p-2" },
                         react_1.default.createElement("div", { className: "flex size-6 items-center justify-center rounded-md border bg-transparent" },
                             react_1.default.createElement(lucide_react_1.Plus, { className: "size-4" })),
-                        react_1.default.createElement("div", { className: "text-muted-foreground font-medium" }, "Add Member")))))));
+                        react_1.default.createElement("div", { className: "text-muted-foreground font-medium" }, "Add Profile")))))));
 };
 exports.TeamSwitcher = TeamSwitcher;

package/components/ui/area-chart-v1.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+interface ChartDataItem {
+    date: string;
+    desktop: number;
+    mobile: number;
+}
+export interface AreaChartV1Props {
+    dates: ChartDataItem[];
+    description: string;
+    title: string;
+    selectors: {
+        label: string;
+        value: string;
+        handleSelector: (f: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    }[];
+}
+export declare const AreaChartV1: ({ dates, description, title, selectors, }: AreaChartV1Props) => React.JSX.Element;
+export {};

package/components/ui/area-chart-v1.js

@@ -0,0 +1,110 @@
+"use client";
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AreaChartV1 = void 0;
+var React = __importStar(require("react"));
+var recharts_1 = require("recharts");
+var card_1 = require("../../components/ui/card");
+var chart_1 = require("../../components/ui/chart");
+var select_1 = require("../../components/ui/select");
+var chartConfig = {
+    visitors: {
+        label: "Visitors",
+    },
+    desktop: {
+        label: "Desktop",
+        color: "var(--chart-1)",
+    },
+    mobile: {
+        label: "Mobile",
+        color: "var(--chart-2)",
+    },
+};
+var AreaChartV1 = function (_a) {
+    var dates = _a.dates, description = _a.description, title = _a.title, selectors = _a.selectors;
+    var _b = React.useState("90d"), timeRange = _b[0], setTimeRange = _b[1];
+    var filteredData = dates.filter(function (item) {
+        var date = new Date(item.date);
+        var referenceDate = new Date("2024-06-30");
+        var daysToSubtract = 90;
+        if (timeRange === "30d") {
+            daysToSubtract = 30;
+        }
+        else if (timeRange === "7d") {
+            daysToSubtract = 7;
+        }
+        var startDate = new Date(referenceDate);
+        startDate.setDate(startDate.getDate() - daysToSubtract);
+        return date >= startDate;
+    });
+    return (React.createElement(card_1.Card, { className: "pt-0" },
+        React.createElement(card_1.CardHeader, { className: "flex items-center gap-2 space-y-0 border-b py-5 sm:flex-row" },
+            React.createElement("div", { className: "grid flex-1 gap-1" },
+                React.createElement(card_1.CardTitle, null, title),
+                React.createElement(card_1.CardDescription, null, description)),
+            React.createElement(select_1.Select, { value: timeRange, onValueChange: setTimeRange },
+                React.createElement(select_1.SelectTrigger, { className: "hidden w-[160px] rounded-lg sm:ml-auto sm:flex", "aria-label": "Select a value" },
+                    React.createElement(select_1.SelectValue, { placeholder: "Last 3 months" })),
+                React.createElement(select_1.SelectContent, { className: "rounded-xl" }, selectors.map(function (selector) { return (React.createElement(select_1.SelectItem, { onClick: function (f) { return selector.handleSelector(f); }, key: selector.label, value: selector.value }, selector.label)); })))),
+        React.createElement(card_1.CardContent, { className: "px-2 pt-4 sm:px-6 sm:pt-6" },
+            React.createElement(chart_1.ChartContainer, { config: chartConfig, className: "aspect-auto h-[250px] w-full" },
+                React.createElement(recharts_1.AreaChart, { data: filteredData },
+                    React.createElement("defs", null,
+                        React.createElement("linearGradient", { id: "fillDesktop", x1: "0", y1: "0", x2: "0", y2: "1" },
+                            React.createElement("stop", { offset: "5%", stopColor: "var(--color-desktop)", stopOpacity: 0.8 }),
+                            React.createElement("stop", { offset: "95%", stopColor: "var(--color-desktop)", stopOpacity: 0.1 })),
+                        React.createElement("linearGradient", { id: "fillMobile", x1: "0", y1: "0", x2: "0", y2: "1" },
+                            React.createElement("stop", { offset: "5%", stopColor: "var(--color-mobile)", stopOpacity: 0.8 }),
+                            React.createElement("stop", { offset: "95%", stopColor: "var(--color-mobile)", stopOpacity: 0.1 }))),
+                    React.createElement(recharts_1.CartesianGrid, { vertical: false }),
+                    React.createElement(recharts_1.XAxis, { dataKey: "date", tickLine: false, axisLine: false, tickMargin: 8, minTickGap: 32, tickFormatter: function (value) {
+                            var date = new Date(value);
+                            return date.toLocaleDateString("en-US", {
+                                month: "short",
+                                day: "numeric",
+                            });
+                        } }),
+                    React.createElement(chart_1.ChartTooltip, { cursor: false, content: React.createElement(chart_1.ChartTooltipContent, { labelFormatter: function (value) {
+                                return new Date(value).toLocaleDateString("en-US", {
+                                    month: "short",
+                                    day: "numeric",
+                                });
+                            }, indicator: "dot" }) }),
+                    React.createElement(recharts_1.Area, { dataKey: "mobile", type: "natural", fill: "url(#fillMobile)", stroke: "var(--color-mobile)", stackId: "a" }),
+                    React.createElement(recharts_1.Area, { dataKey: "desktop", type: "natural", fill: "url(#fillDesktop)", stroke: "var(--color-desktop)", stackId: "a" }),
+                    React.createElement(chart_1.ChartLegend, { content: React.createElement(chart_1.ChartLegendContent, null) }))))));
+};
+exports.AreaChartV1 = AreaChartV1;

package/components/ui/chart.d.ts

@@ -0,0 +1,62 @@
+import * as React from "react";
+import * as RechartsPrimitive from "recharts";
+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>;
+    });
+};
+declare const ChartContainer: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+    config: ChartConfig;
+    children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ChartStyle: ({ id, config }: {
+    id: string;
+    config: ChartConfig;
+}) => React.JSX.Element | null;
+declare const ChartTooltip: typeof RechartsPrimitive.Tooltip;
+declare const ChartTooltipContent: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+    active?: boolean;
+    payload?: Array<{
+        name?: string;
+        dataKey?: string;
+        value?: number;
+        type?: string;
+        color?: string;
+        payload?: Record<string, unknown>;
+        fill?: string;
+    }>;
+    label?: string;
+    labelFormatter?: (label: string, payload: unknown[]) => React.ReactNode;
+    formatter?: (value: unknown, name: string, item: unknown, index: number, payload: unknown) => React.ReactNode;
+    hideLabel?: boolean;
+    hideIndicator?: boolean;
+    indicator?: "line" | "dot" | "dashed";
+    nameKey?: string;
+    labelKey?: string;
+    labelClassName?: string;
+    color?: string;
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ChartLegend: typeof RechartsPrimitive.Legend;
+declare const ChartLegendContent: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+    payload?: Array<{
+        value?: string;
+        dataKey?: string;
+        type?: string;
+        color?: string;
+    }>;
+    verticalAlign?: "top" | "bottom";
+    hideIcon?: boolean;
+    nameKey?: string;
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle, };

package/components/ui/chart.js

@@ -0,0 +1,220 @@
+"use client";
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChartStyle = exports.ChartLegendContent = exports.ChartLegend = exports.ChartTooltipContent = exports.ChartTooltip = exports.ChartContainer = void 0;
+var React = __importStar(require("react"));
+var RechartsPrimitive = __importStar(require("recharts"));
+var utils_1 = require("../../lib/utils");
+// Format: { THEME_NAME: CSS_SELECTOR }
+var THEMES = { light: "", dark: ".dark" };
+var ChartContext = React.createContext(null);
+function useChart() {
+    var context = React.useContext(ChartContext);
+    if (!context) {
+        throw new Error("useChart must be used within a <ChartContainer />");
+    }
+    return context;
+}
+var ChartContainer = React.forwardRef(function (_a, ref) {
+    var id = _a.id, className = _a.className, children = _a.children, config = _a.config, props = __rest(_a, ["id", "className", "children", "config"]);
+    var uniqueId = React.useId();
+    var chartId = "chart-".concat(id || uniqueId.replace(/:/g, ""));
+    return (React.createElement(ChartContext.Provider, { value: { config: config } },
+        React.createElement("div", __assign({ "data-chart": chartId, ref: ref, className: (0, utils_1.cn)("flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none", className) }, props),
+            React.createElement(ChartStyle, { id: chartId, config: config }),
+            React.createElement(RechartsPrimitive.ResponsiveContainer, null, children))));
+});
+exports.ChartContainer = ChartContainer;
+ChartContainer.displayName = "Chart";
+var ChartStyle = function (_a) {
+    var id = _a.id, config = _a.config;
+    var colorConfig = Object.entries(config).filter(function (_a) {
+        var config = _a[1];
+        return config.theme || config.color;
+    });
+    if (!colorConfig.length) {
+        return null;
+    }
+    return (React.createElement("style", { dangerouslySetInnerHTML: {
+            __html: Object.entries(THEMES)
+                .map(function (_a) {
+                var theme = _a[0], prefix = _a[1];
+                return "\n".concat(prefix, " [data-chart=").concat(id, "] {\n").concat(colorConfig
+                    .map(function (_a) {
+                    var _b;
+                    var key = _a[0], itemConfig = _a[1];
+                    var color = ((_b = itemConfig.theme) === null || _b === void 0 ? void 0 : _b[theme]) ||
+                        itemConfig.color;
+                    return color ? "  --color-".concat(key, ": ").concat(color, ";") : null;
+                })
+                    .join("\n"), "\n}\n");
+            })
+                .join("\n"),
+        } }));
+};
+exports.ChartStyle = ChartStyle;
+var ChartTooltip = RechartsPrimitive.Tooltip;
+exports.ChartTooltip = ChartTooltip;
+var ChartTooltipContent = React.forwardRef(function (_a, ref) {
+    var active = _a.active, payload = _a.payload, className = _a.className, _b = _a.indicator, indicator = _b === void 0 ? "dot" : _b, _c = _a.hideLabel, hideLabel = _c === void 0 ? false : _c, _d = _a.hideIndicator, hideIndicator = _d === void 0 ? false : _d, label = _a.label, labelFormatter = _a.labelFormatter, labelClassName = _a.labelClassName, formatter = _a.formatter, color = _a.color, nameKey = _a.nameKey, labelKey = _a.labelKey;
+    var config = useChart().config;
+    var tooltipLabel = React.useMemo(function () {
+        var _a;
+        if (hideLabel || !(payload === null || payload === void 0 ? void 0 : payload.length)) {
+            return null;
+        }
+        var item = payload[0];
+        var key = "".concat(labelKey || (item === null || item === void 0 ? void 0 : item.dataKey) || (item === null || item === void 0 ? void 0 : item.name) || "value");
+        var itemConfig = getPayloadConfigFromPayload(config, item, key);
+        var value = !labelKey && typeof label === "string"
+            ? ((_a = config[label]) === null || _a === void 0 ? void 0 : _a.label) || label
+            : itemConfig === null || itemConfig === void 0 ? void 0 : itemConfig.label;
+        if (labelFormatter) {
+            return (React.createElement("div", { className: (0, utils_1.cn)("font-medium", labelClassName) }, labelFormatter(String(value !== null && value !== void 0 ? value : ""), payload !== null && payload !== void 0 ? payload : [])));
+        }
+        if (!value) {
+            return null;
+        }
+        return React.createElement("div", { className: (0, utils_1.cn)("font-medium", labelClassName) }, value);
+    }, [
+        label,
+        labelFormatter,
+        payload,
+        hideLabel,
+        labelClassName,
+        config,
+        labelKey,
+    ]);
+    if (!active || !(payload === null || payload === void 0 ? void 0 : payload.length)) {
+        return null;
+    }
+    var nestLabel = payload.length === 1 && indicator !== "dot";
+    return (React.createElement("div", { ref: ref, className: (0, utils_1.cn)("grid min-w-32 items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl", className) },
+        !nestLabel ? tooltipLabel : null,
+        React.createElement("div", { className: "grid gap-1.5" }, payload
+            .filter(function (item) { return item.type !== "none"; })
+            .map(function (item, index) {
+            var _a;
+            var key = "".concat(nameKey || item.name || item.dataKey || "value");
+            var itemConfig = getPayloadConfigFromPayload(config, item, key);
+            var indicatorColor = color || ((_a = item.payload) === null || _a === void 0 ? void 0 : _a.fill) || item.color;
+            return (React.createElement("div", { key: item.dataKey, className: (0, utils_1.cn)("flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground", indicator === "dot" && "items-center") }, formatter && (item === null || item === void 0 ? void 0 : item.value) !== undefined && item.name ? (formatter(item.value, item.name, item, index, item.payload)) : (React.createElement(React.Fragment, null,
+                (itemConfig === null || itemConfig === void 0 ? void 0 : itemConfig.icon) ? (React.createElement(itemConfig.icon, null)) : (!hideIndicator && (React.createElement("div", { className: (0, utils_1.cn)("shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]", {
+                        "h-2.5 w-2.5": indicator === "dot",
+                        "w-1": indicator === "line",
+                        "w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",
+                        "my-0.5": nestLabel && indicator === "dashed",
+                    }), style: {
+                        "--color-bg": indicatorColor,
+                        "--color-border": indicatorColor,
+                    } }))),
+                React.createElement("div", { className: (0, utils_1.cn)("flex flex-1 justify-between leading-none", nestLabel ? "items-end" : "items-center") },
+                    React.createElement("div", { className: "grid gap-1.5" },
+                        nestLabel ? tooltipLabel : null,
+                        React.createElement("span", { className: "text-muted-foreground" }, (itemConfig === null || itemConfig === void 0 ? void 0 : itemConfig.label) || item.name)),
+                    item.value && (React.createElement("span", { className: "font-mono font-medium tabular-nums text-foreground" }, item.value.toLocaleString())))))));
+        }))));
+});
+exports.ChartTooltipContent = ChartTooltipContent;
+ChartTooltipContent.displayName = "ChartTooltip";
+var ChartLegend = RechartsPrimitive.Legend;
+exports.ChartLegend = ChartLegend;
+var ChartLegendContent = React.forwardRef(function (_a, ref) {
+    var className = _a.className, _b = _a.hideIcon, hideIcon = _b === void 0 ? false : _b, payload = _a.payload, _c = _a.verticalAlign, verticalAlign = _c === void 0 ? "bottom" : _c, nameKey = _a.nameKey;
+    var config = useChart().config;
+    if (!(payload === null || payload === void 0 ? void 0 : payload.length)) {
+        return null;
+    }
+    return (React.createElement("div", { ref: ref, className: (0, utils_1.cn)("flex items-center justify-center gap-4", verticalAlign === "top" ? "pb-3" : "pt-3", className) }, payload
+        .filter(function (item) { return item.type !== "none"; })
+        .map(function (item) {
+        var key = "".concat(nameKey || item.dataKey || "value");
+        var itemConfig = getPayloadConfigFromPayload(config, item, key);
+        return (React.createElement("div", { key: item.value, className: (0, utils_1.cn)("flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground") },
+            (itemConfig === null || itemConfig === void 0 ? void 0 : itemConfig.icon) && !hideIcon ? (React.createElement(itemConfig.icon, null)) : (React.createElement("div", { className: "h-2 w-2 shrink-0 rounded-[2px]", style: {
+                    backgroundColor: item.color,
+                } })), itemConfig === null || itemConfig === void 0 ? void 0 :
+            itemConfig.label));
+    })));
+});
+exports.ChartLegendContent = ChartLegendContent;
+ChartLegendContent.displayName = "ChartLegend";
+// Helper to extract item config from a payload.
+function getPayloadConfigFromPayload(config, payload, key) {
+    if (typeof payload !== "object" || payload === null) {
+        return undefined;
+    }
+    var payloadPayload = "payload" in payload &&
+        typeof payload.payload === "object" &&
+        payload.payload !== null
+        ? payload.payload
+        : undefined;
+    var 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];
+}

package/components/ui/theme-switcher.d.ts

@@ -1,3 +1,34 @@
 import * as React from "react";
 import { Button } from "./button";
+declare const colorThemes: readonly [{
+    readonly name: "default";
+    readonly label: "Default";
+    readonly color: "bg-zinc-900";
+}, {
+    readonly name: "blue";
+    readonly label: "Blue";
+    readonly color: "bg-blue-600";
+}, {
+    readonly name: "green";
+    readonly label: "Green";
+    readonly color: "bg-green-600";
+}, {
+    readonly name: "orange";
+    readonly label: "Orange";
+    readonly color: "bg-orange-600";
+}, {
+    readonly name: "red";
+    readonly label: "Red";
+    readonly color: "bg-red-600";
+}, {
+    readonly name: "violet";
+    readonly label: "Violet";
+    readonly color: "bg-violet-600";
+}, {
+    readonly name: "yellow";
+    readonly label: "Yellow";
+    readonly color: "bg-yellow-500";
+}];
+export type ColorTheme = (typeof colorThemes)[number]["name"];
 export declare const ThemeSwitcher: ({ className, ...props }: React.ComponentProps<typeof Button>) => React.JSX.Element;
+export {};

package/components/ui/theme-switcher.js

@@ -61,14 +61,71 @@ var React = __importStar(require("react"));
 var next_themes_1 = require("next-themes");
 var lucide_react_1 = require("lucide-react");
 var button_1 = require("./button");
+var dropdown_menu_1 = require("./dropdown-menu");
+var utils_1 = require("../../lib/utils");
+// Available color themes from globals.css
+var colorThemes = [
+    { name: "default", label: "Default", color: "bg-zinc-900" },
+    { name: "blue", label: "Blue", color: "bg-blue-600" },
+    { name: "green", label: "Green", color: "bg-green-600" },
+    { name: "orange", label: "Orange", color: "bg-orange-600" },
+    { name: "red", label: "Red", color: "bg-red-600" },
+    { name: "violet", label: "Violet", color: "bg-violet-600" },
+    { name: "yellow", label: "Yellow", color: "bg-yellow-500" },
+];
 var ThemeSwitcher = function (_a) {
-    var _b;
     var className = _a.className, props = __rest(_a, ["className"]);
-    var _c = (0, next_themes_1.useTheme)(), theme = _c.theme, setTheme = _c.setTheme, resolvedTheme = _c.resolvedTheme;
-    var current = (_b = (resolvedTheme || theme)) !== null && _b !== void 0 ? _b : "light";
-    var toggle = function () {
-        setTheme(current === "dark" ? "light" : "dark");
+    var _b = (0, next_themes_1.useTheme)(), theme = _b.theme, setTheme = _b.setTheme, resolvedTheme = _b.resolvedTheme;
+    var _c = React.useState(false), mounted = _c[0], setMounted = _c[1];
+    var _d = React.useState("default"), colorTheme = _d[0], setColorTheme = _d[1];
+    // Get the current mode (light/dark)
+    var isDark = resolvedTheme === "dark" || theme === "dark";
+    React.useEffect(function () {
+        setMounted(true);
+        // Read color theme from document class
+        var root = document.documentElement;
+        var currentColorTheme = colorThemes.find(function (t) {
+            return root.classList.contains("theme-".concat(t.name));
+        });
+        if (currentColorTheme) {
+            setColorTheme(currentColorTheme.name);
+        }
+    }, []);
+    var handleModeToggle = function () {
+        setTheme(isDark ? "light" : "dark");
+    };
+    var handleColorThemeChange = function (newColorTheme) {
+        var root = document.documentElement;
+        // Remove all theme classes
+        colorThemes.forEach(function (t) {
+            root.classList.remove("theme-".concat(t.name));
+        });
+        // Add new theme class (except for default which uses :root)
+        if (newColorTheme !== "default") {
+            root.classList.add("theme-".concat(newColorTheme));
+        }
+        setColorTheme(newColorTheme);
     };
-    return (React.createElement(button_1.Button, __assign({ variant: "ghost", size: "icon", onClick: toggle, "aria-label": "Toggle theme", className: className }, props), current === "dark" ? (React.createElement(lucide_react_1.Sun, { className: "size-4" })) : (React.createElement(lucide_react_1.Moon, { className: "size-4" }))));
+    if (!mounted) {
+        return (React.createElement(button_1.Button, __assign({ variant: "ghost", size: "icon", className: className }, props),
+            React.createElement(lucide_react_1.Palette, { className: "size-4" })));
+    }
+    return (React.createElement(dropdown_menu_1.DropdownMenu, null,
+        React.createElement(dropdown_menu_1.DropdownMenuTrigger, { asChild: true },
+            React.createElement(button_1.Button, __assign({ variant: "ghost", size: "icon", "aria-label": "Theme settings", className: className }, props),
+                React.createElement(lucide_react_1.Palette, { className: "size-4" }))),
+        React.createElement(dropdown_menu_1.DropdownMenuContent, { align: "end", className: "w-48" },
+            React.createElement(dropdown_menu_1.DropdownMenuLabel, null, "Mode"),
+            React.createElement(dropdown_menu_1.DropdownMenuItem, { onClick: handleModeToggle }, isDark ? (React.createElement(React.Fragment, null,
+                React.createElement(lucide_react_1.Sun, { className: "mr-2 size-4" }),
+                "Light Mode")) : (React.createElement(React.Fragment, null,
+                React.createElement(lucide_react_1.Moon, { className: "mr-2 size-4" }),
+                "Dark Mode"))),
+            React.createElement(dropdown_menu_1.DropdownMenuSeparator, null),
+            React.createElement(dropdown_menu_1.DropdownMenuLabel, null, "Color Theme"),
+            colorThemes.map(function (t) { return (React.createElement(dropdown_menu_1.DropdownMenuItem, { key: t.name, onClick: function () { return handleColorThemeChange(t.name); } },
+                React.createElement("span", { className: (0, utils_1.cn)("mr-2 size-4 rounded-full", t.color) }),
+                t.label,
+                colorTheme === t.name && React.createElement(lucide_react_1.Check, { className: "ml-auto size-4" }))); }))));
 };
 exports.ThemeSwitcher = ThemeSwitcher;

package/data/admin-dashboard.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
 import { Frame, PieChart } from "lucide-react";
-export interface DashboardMemberItem {
+export interface DashboardProfileItem {
     name: string;
     avatar: string;
     age: string;
@@ -31,7 +31,7 @@ export interface DashboardProps {
     breadcrumbs?: Array<BreadcrumbItem>;
     children?: ReactNode;
     email: string;
-    members: Array<DashboardMemberItem>;
+    profiles: Array<DashboardProfileItem>;
     navItems: Array<DashboardNavItem>;
     username: string;
     showLanguageSelector?: boolean;

package/data/admin-dashboard.js

@@ -16,18 +16,18 @@ exports.adminDashboardData = {
         },
     ],
     username: "Muntazim",
-    email: "admin@byteducator.com",
-    avatar: "/avatars/shadcn.jpg",
+    email: "admin@company.com",
+    avatar: "https://www.w3schools.com/w3images/avatar6.png",
     showLanguageSelector: true,
-    members: [
+    profiles: [
         {
             name: "Subhan",
-            avatar: "",
+            avatar: "https://www.w3schools.com/w3images/avatar6.png",
             age: "3 Yrs",
         },
         {
             name: "Mustajab",
-            avatar: "",
+            avatar: "https://www.w3schools.com/w3images/avatar6.png",
             age: "4 Yrs",
         },
     ],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appcorp/shadcn",
-  "version": "1.1.6",
+  "version": "1.1.8",
   "scripts": {
     "build:next": "next build",
     "build:storybook": "storybook build -c .storybook -o .out",
@@ -15,7 +15,7 @@
     "format:check": "prettier --check \"**/*.{js,jsx,ts,tsx,json,css,md}\"",
     "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,css,md}\"",
     "generate:sitemap": "scripts/generate-sitemap.sh",
-    "lint": "next lint",
+    "lint": "eslint .",
     "major": "npm version major",
     "minor": "npm version minor",
     "patch": "npm version patch",
@@ -66,7 +66,7 @@
     "@storybook/addon-docs": "^10.0.6",
     "@storybook/addon-onboarding": "^10.0.6",
     "@storybook/nextjs": "^10.0.6",
-    "@tailwindcss/postcss": "^4.1.14",
+    "@tailwindcss/postcss": "^4.1.17",
     "@tanstack/react-table": "^8.21.3",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
@@ -97,7 +97,7 @@
     "jotai": "^2.15.0",
     "lint-staged": "^16.2.4",
     "lodash.throttle": "^4.1.1",
-    "lucide-react": "^0.546.0",
+    "lucide-react": "^0.556.0",
     "motion": "^12.23.24",
     "next": "^15.5.6",
     "next-themes": "^0.4.6",
@@ -110,11 +110,12 @@
     "react-dropzone": "^14.3.8",
     "react-hook-form": "^7.66.1",
     "react-resizable-panels": "^3.0.6",
+    "recharts": "3.5.1",
     "rimraf": "^6.0.1",
     "sonner": "^2.0.7",
     "storybook": "^10.0.6",
     "tailwind-merge": "^3.3.1",
-    "tailwindcss": "3",
+    "tailwindcss": "^4.1.17",
     "ts-node": "^10.9.2",
     "typescript": "^5.9.3",
     "vaul": "^1.1.2",