@appcorp/shadcn 1.1.5 → 1.1.7

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.d.ts

@@ -1,3 +1,6 @@
 import { FC } from "react";
 import { DashboardProps } from "../data/admin-dashboard";
-export declare const Dashboard: FC<DashboardProps>;
+export declare const Dashboard: FC<DashboardProps & {
+    locale?: string;
+    onLocaleChange?: (val: string) => void;
+}>;

package/components/dashboard.js

@@ -39,12 +39,14 @@ var app_sidebar_1 = require("./app-sidebar");
 var breadcrumb_1 = require("./ui/breadcrumb");
 var separator_1 = require("./ui/separator");
 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;
+    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 gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12" },
+            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" },
                     react_1.default.createElement(sidebar_1.SidebarTrigger, { className: "-ml-1" }),
                     react_1.default.createElement(separator_1.Separator, { orientation: "vertical", className: "mr-2 data-[orientation=vertical]:h-4" }),
@@ -52,7 +54,10 @@ var Dashboard = function (_a) {
                         react_1.default.createElement(breadcrumb_1.BreadcrumbList, { className: "[&>*:last-child]:hidden" }, breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.map(function (breadcrumb) { return (react_1.default.createElement(react_1.Fragment, { key: breadcrumb.label },
                             react_1.default.createElement(breadcrumb_1.BreadcrumbItem, { className: "hidden md:block" },
                                 react_1.default.createElement(breadcrumb_1.BreadcrumbLink, { href: breadcrumb.href }, breadcrumb.label)),
-                            react_1.default.createElement(breadcrumb_1.BreadcrumbSeparator, { className: "hidden md:block" }))); }))))),
+                            react_1.default.createElement(breadcrumb_1.BreadcrumbSeparator, { className: "hidden md:block" }))); })))),
+                react_1.default.createElement("div", { className: "flex items-center gap-2 px-4" },
+                    showLanguageSelector && (react_1.default.createElement(language_selector_1.LanguageSelector, { value: locale, onChange: onLocaleChange })),
+                    react_1.default.createElement(theme_switcher_1.ThemeSwitcher, null))),
             children)));
 };
 exports.Dashboard = Dashboard;

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/language-selector.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+declare const SUPPORTED_LOCALES: readonly ["en", "es", "fr", "de"];
+export type Locale = (typeof SUPPORTED_LOCALES)[number];
+export declare const LanguageSelector: React.FC<{
+    className?: string;
+    /** Controlled value */
+    value?: string;
+    /** Called when user selects a value */
+    onChange?: (val: string) => void;
+}>;
+export {};

package/components/ui/language-selector.js

@@ -0,0 +1,63 @@
+"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.LanguageSelector = void 0;
+var React = __importStar(require("react"));
+var select_1 = require("./select");
+var utils_1 = require("../../lib/utils");
+var SUPPORTED_LOCALES = ["en", "es", "fr", "de"];
+var LanguageSelector = function (_a) {
+    var className = _a.className, value = _a.value, onChange = _a.onChange;
+    var initial = React.useMemo(function () { return value || SUPPORTED_LOCALES[0]; }, [value]);
+    var _b = React.useState(initial), selected = _b[0], setSelected = _b[1];
+    React.useEffect(function () {
+        if (value)
+            setSelected(value);
+    }, [value]);
+    var handleChange = function (locale) {
+        setSelected(locale);
+        onChange === null || onChange === void 0 ? void 0 : onChange(locale);
+    };
+    return (React.createElement(select_1.Select, { value: selected, onValueChange: handleChange },
+        React.createElement(select_1.SelectTrigger, { className: (0, utils_1.cn)("w-28", className) },
+            React.createElement(select_1.SelectValue, null, selected.toUpperCase())),
+        React.createElement(select_1.SelectContent, null,
+            React.createElement(select_1.SelectItem, { value: "en" }, "English"),
+            React.createElement(select_1.SelectItem, { value: "es" }, "Espa\u00F1ol"),
+            React.createElement(select_1.SelectItem, { value: "fr" }, "Fran\u00E7ais"),
+            React.createElement(select_1.SelectItem, { value: "de" }, "Deutsch"))));
+};
+exports.LanguageSelector = LanguageSelector;

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

@@ -0,0 +1,3 @@
+import * as React from "react";
+import { Button } from "./button";
+export declare const ThemeSwitcher: ({ className, ...props }: React.ComponentProps<typeof Button>) => React.JSX.Element;

package/components/ui/theme-switcher.js

@@ -0,0 +1,74 @@
+"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.ThemeSwitcher = void 0;
+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 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");
+    };
+    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" }))));
+};
+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,8 +31,9 @@ export interface DashboardProps {
     breadcrumbs?: Array<BreadcrumbItem>;
     children?: ReactNode;
     email: string;
-    members: Array<DashboardMemberItem>;
+    profiles: Array<DashboardProfileItem>;
     navItems: Array<DashboardNavItem>;
     username: string;
+    showLanguageSelector?: boolean;
 }
 export declare const adminDashboardData: DashboardProps;

package/data/admin-dashboard.js

@@ -16,17 +16,18 @@ exports.adminDashboardData = {
         },
     ],
     username: "Muntazim",
-    email: "admin@byteducator.com",
-    avatar: "/avatars/shadcn.jpg",
-    members: [
+    email: "admin@company.com",
+    avatar: "https://www.w3schools.com/w3images/avatar6.png",
+    showLanguageSelector: true,
+    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.5",
+  "version": "1.1.7",
   "scripts": {
     "build:next": "next build",
     "build:storybook": "storybook build -c .storybook -o .out",