@appcorp/shadcn 1.1.4 → 1.1.6

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, members = _a.members, 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(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/ui/drawer.js

@@ -82,9 +82,7 @@ var DrawerContent = React.forwardRef(function (_a, ref) {
     var className = _a.className, children = _a.children, props = __rest(_a, ["className", "children"]);
     return (React.createElement(DrawerPortal, null,
         React.createElement(DrawerOverlay, null),
-        React.createElement(vaul_1.Drawer.Content, __assign({ ref: ref, className: (0, utils_1.cn)("fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background", className) }, props),
-            React.createElement("div", { className: "mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" }),
-            children)));
+        React.createElement(vaul_1.Drawer.Content, __assign({ ref: ref, className: (0, utils_1.cn)("fixed z-50 flex flex-col border bg-background", "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:rounded-t-[10px]", "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:rounded-b-[10px]", "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:h-full data-[vaul-drawer-direction=left]:w-[400px] data-[vaul-drawer-direction=left]:rounded-r-[10px]", "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:h-full data-[vaul-drawer-direction=right]:w-[400px] data-[vaul-drawer-direction=right]:rounded-l-[10px]", className) }, props), children)));
 });
 exports.DrawerContent = DrawerContent;
 DrawerContent.displayName = "DrawerContent";

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

@@ -34,5 +34,6 @@ export interface DashboardProps {
     members: Array<DashboardMemberItem>;
     navItems: Array<DashboardNavItem>;
     username: string;
+    showLanguageSelector?: boolean;
 }
 export declare const adminDashboardData: DashboardProps;

package/data/admin-dashboard.js

@@ -18,6 +18,7 @@ exports.adminDashboardData = {
     username: "Muntazim",
     email: "admin@byteducator.com",
     avatar: "/avatars/shadcn.jpg",
+    showLanguageSelector: true,
     members: [
         {
             name: "Subhan",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appcorp/shadcn",
-  "version": "1.1.4",
+  "version": "1.1.6",
   "scripts": {
     "build:next": "next build",
     "build:storybook": "storybook build -c .storybook -o .out",