@pallasoft/ps-internal-components 1.5.0 → 1.6.0

package/dist/components/ps-sidebar-workspace-switcher.js

@@ -0,0 +1,41 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsSidebarWorkspaceSwitcher = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_react_1 = require("lucide-react");
+const ps_app_sidebar_config_js_1 = require("../constants/ps-app-sidebar-config.js");
+const use_ps_sidebar_js_1 = require("../hooks/use-ps-sidebar.js");
+const ps_link_service_js_1 = require("../services/ps-link-service.js");
+const ps_dropdown_menu_content_js_1 = require("./ps-dropdown-menu-content.js");
+const ps_dropdown_menu_item_js_1 = require("./ps-dropdown-menu-item.js");
+const ps_dropdown_menu_label_js_1 = require("./ps-dropdown-menu-label.js");
+const ps_dropdown_menu_trigger_js_1 = require("./ps-dropdown-menu-trigger.js");
+const ps_dropdown_menu_js_1 = require("./ps-dropdown-menu.js");
+const ps_sidebar_menu_button_js_1 = require("./ps-sidebar-menu-button.js");
+const ps_sidebar_menu_item_js_1 = require("./ps-sidebar-menu-item.js");
+const ps_sidebar_menu_js_1 = require("./ps-sidebar-menu.js");
+const ps_workspace_badge_js_1 = require("./ps-workspace-badge.js");
+const PsSidebarWorkspaceSwitcher = ({ appTitle, homeHref, logoAlt = ps_app_sidebar_config_js_1.PsAppSidebarConfig.logoAlt, logoSrc, renderLink, switcher, }) => {
+    const { isMobile } = (0, use_ps_sidebar_js_1.usePsSidebar)();
+    const active = switcher === undefined ? undefined : switcher.items.find((item) => item.active);
+    const brand = ((0, jsx_runtime_1.jsx)("div", { className: 'flex aspect-square size-8 shrink-0 items-center justify-center rounded-lg border bg-background', children: (0, jsx_runtime_1.jsx)("img", { alt: logoAlt, className: 'size-5 object-contain', src: logoSrc }) }));
+    if (switcher === undefined) {
+        return ((0, jsx_runtime_1.jsx)(ps_sidebar_menu_js_1.PsSidebarMenu, { children: (0, jsx_runtime_1.jsx)(ps_sidebar_menu_item_js_1.PsSidebarMenuItem, { children: (0, jsx_runtime_1.jsx)(ps_sidebar_menu_button_js_1.PsSidebarMenuButton, { asChild: true, size: 'lg', tooltip: appTitle, children: ps_link_service_js_1.PsLinkService.render(renderLink, {
+                        children: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [brand, (0, jsx_runtime_1.jsx)("span", { className: 'truncate font-semibold', children: appTitle })] })),
+                        className: '',
+                        href: homeHref,
+                    }) }) }) }));
+    }
+    return ((0, jsx_runtime_1.jsx)(ps_sidebar_menu_js_1.PsSidebarMenu, { children: (0, jsx_runtime_1.jsx)(ps_sidebar_menu_item_js_1.PsSidebarMenuItem, { children: (0, jsx_runtime_1.jsxs)(ps_dropdown_menu_js_1.PsDropdownMenu, { children: [(0, jsx_runtime_1.jsx)(ps_dropdown_menu_trigger_js_1.PsDropdownMenuTrigger, { asChild: true, children: (0, jsx_runtime_1.jsxs)(ps_sidebar_menu_button_js_1.PsSidebarMenuButton, { className: 'data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground', size: 'lg', tooltip: active === undefined ? appTitle : active.label, children: [active === undefined ? (brand) : ((0, jsx_runtime_1.jsx)(ps_workspace_badge_js_1.PsWorkspaceBadge, { active: true, iconUrl: active.iconUrl, initials: active.initials, size: 'lg' })), (0, jsx_runtime_1.jsxs)("div", { className: 'grid flex-1 text-left text-sm leading-tight', children: [(0, jsx_runtime_1.jsx)("span", { className: 'truncate font-semibold', children: active === undefined ? appTitle : active.label }), (0, jsx_runtime_1.jsx)("span", { className: 'truncate text-xs text-muted-foreground', children: active === undefined ? switcher.placeholder : appTitle })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronsUpDown, { className: 'ml-auto' })] }) }), (0, jsx_runtime_1.jsxs)(ps_dropdown_menu_content_js_1.PsDropdownMenuContent, { align: 'start', className: 'w-[--radix-dropdown-menu-trigger-width] min-w-60 rounded-lg', side: isMobile ? 'bottom' : 'right', sideOffset: 4, children: [(0, jsx_runtime_1.jsx)(ps_dropdown_menu_label_js_1.PsDropdownMenuLabel, { className: 'text-xs text-muted-foreground', children: switcher.label }), (0, jsx_runtime_1.jsx)(ps_dropdown_menu_item_js_1.PsDropdownMenuItem, { asChild: true, className: 'gap-2 p-2', children: ps_link_service_js_1.PsLinkService.render(renderLink, {
+                                    children: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [brand, (0, jsx_runtime_1.jsx)("span", { className: 'font-medium', children: appTitle })] })),
+                                    className: '',
+                                    href: homeHref,
+                                }) }), switcher.items.map((item) => ((0, jsx_runtime_1.jsx)(ps_dropdown_menu_item_js_1.PsDropdownMenuItem, { asChild: true, className: 'gap-2 p-2', children: ps_link_service_js_1.PsLinkService.render(renderLink, {
+                                    active: item.active,
+                                    children: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ps_workspace_badge_js_1.PsWorkspaceBadge, { active: item.active, iconUrl: item.iconUrl, initials: item.initials, size: 'lg' }), (0, jsx_runtime_1.jsxs)("span", { className: 'grid min-w-0 flex-1 leading-tight', children: [(0, jsx_runtime_1.jsx)("span", { className: 'truncate font-medium', children: item.label }), (0, jsx_runtime_1.jsx)("span", { className: 'truncate text-xs text-muted-foreground', children: item.description })] })] })),
+                                    className: '',
+                                    href: item.href,
+                                }) }, item.id)))] })] }) }) }));
+};
+exports.PsSidebarWorkspaceSwitcher = PsSidebarWorkspaceSwitcher;

package/dist/components/ps-sidebar.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import type { PsSidebarProps } from '../models/ps-sidebar-props.js';
+export declare const PsSidebar: React.ForwardRefExoticComponent<Omit<PsSidebarProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/ps-sidebar.js

@@ -0,0 +1,66 @@
+"use strict";
+'use client';
+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.PsSidebar = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const ps_sidebar_config_js_1 = require("../constants/ps-sidebar-config.js");
+const ps_sidebar_state_js_1 = require("../constants/ps-sidebar-state.js");
+const use_ps_sidebar_js_1 = require("../hooks/use-ps-sidebar.js");
+const ps_class_name_service_js_1 = require("../services/ps-class-name-service.js");
+const ps_sheet_content_js_1 = require("./ps-sheet-content.js");
+const ps_sheet_description_js_1 = require("./ps-sheet-description.js");
+const ps_sheet_header_js_1 = require("./ps-sheet-header.js");
+const ps_sheet_title_js_1 = require("./ps-sheet-title.js");
+const ps_sheet_js_1 = require("./ps-sheet.js");
+exports.PsSidebar = React.forwardRef(({ side = 'left', variant = 'sidebar', collapsible = 'offcanvas', className, children, ...props }, ref) => {
+    const { isMobile, state, openMobile, setOpenMobile } = (0, use_ps_sidebar_js_1.usePsSidebar)();
+    const isFramed = variant === 'floating' || variant === 'inset';
+    if (collapsible === 'none') {
+        return ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: ps_class_name_service_js_1.PsClassNameService.merge('flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground', className), ...props, children: children }));
+    }
+    if (isMobile) {
+        return ((0, jsx_runtime_1.jsx)(ps_sheet_js_1.PsSheet, { open: openMobile, onOpenChange: setOpenMobile, children: (0, jsx_runtime_1.jsxs)(ps_sheet_content_js_1.PsSheetContent, { "data-sidebar": 'sidebar', "data-mobile": 'true', className: 'w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden', style: { '--sidebar-width': ps_sidebar_config_js_1.PsSidebarConfig.widthMobile }, side: side, children: [(0, jsx_runtime_1.jsxs)(ps_sheet_header_js_1.PsSheetHeader, { className: 'sr-only', children: [(0, jsx_runtime_1.jsx)(ps_sheet_title_js_1.PsSheetTitle, { children: ps_sidebar_config_js_1.PsSidebarConfig.mobileTitle }), (0, jsx_runtime_1.jsx)(ps_sheet_description_js_1.PsSheetDescription, { children: ps_sidebar_config_js_1.PsSidebarConfig.mobileDescription })] }), (0, jsx_runtime_1.jsx)("div", { className: 'flex h-full w-full flex-col', children: children })] }) }));
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, className: 'group peer hidden text-sidebar-foreground md:block', "data-state": state, "data-collapsible": state === ps_sidebar_state_js_1.PsSidebarState.Collapsed ? collapsible : '', "data-variant": variant, "data-side": side, children: [(0, jsx_runtime_1.jsx)("div", { className: ps_class_name_service_js_1.PsClassNameService.merge('relative w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear', 'group-data-[collapsible=offcanvas]:w-0 group-data-[side=right]:rotate-180', isFramed
+                    ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'
+                    : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]') }), (0, jsx_runtime_1.jsx)("div", { className: ps_class_name_service_js_1.PsClassNameService.merge('fixed inset-y-0 z-docked hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex', side === 'left'
+                    ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
+                    : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]', isFramed
+                    ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'
+                    : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l', className), ...props, children: (0, jsx_runtime_1.jsx)("div", { "data-sidebar": 'sidebar', className: 'flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow', children: children }) })] }));
+});
+exports.PsSidebar.displayName = 'PsSidebar';

package/dist/constants/ps-app-sidebar-config.d.ts

@@ -0,0 +1,7 @@
+export declare const PsAppSidebarConfig: {
+    readonly account: "Account";
+    readonly breadcrumbLabel: "Breadcrumb";
+    readonly logoAlt: "App logo";
+    readonly signOut: "Sign out";
+    readonly switchLabel: "Switch";
+};

package/dist/constants/ps-app-sidebar-config.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsAppSidebarConfig = void 0;
+exports.PsAppSidebarConfig = {
+    account: 'Account',
+    breadcrumbLabel: 'Breadcrumb',
+    logoAlt: 'App logo',
+    signOut: 'Sign out',
+    switchLabel: 'Switch',
+};

package/dist/constants/ps-sidebar-config.d.ts

@@ -0,0 +1,14 @@
+export declare const PsSidebarConfig: {
+    readonly cookieMaxAgeSeconds: number;
+    readonly cookieName: "ps_sidebar_state";
+    readonly keyboardShortcut: "b";
+    readonly mobileBreakpoint: 768;
+    readonly mobileTitle: "Navigation";
+    readonly mobileDescription: "Pages and products in this app.";
+    readonly missingContext: "usePsSidebar must be used inside PsSidebarProvider.";
+    readonly railLabel: "Toggle sidebar";
+    readonly toggleLabel: "Toggle sidebar";
+    readonly width: "16rem";
+    readonly widthIcon: "3rem";
+    readonly widthMobile: "18rem";
+};

package/dist/constants/ps-sidebar-config.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsSidebarConfig = void 0;
+exports.PsSidebarConfig = {
+    cookieMaxAgeSeconds: 60 * 60 * 24 * 365,
+    cookieName: 'ps_sidebar_state',
+    keyboardShortcut: 'b',
+    mobileBreakpoint: 768,
+    mobileTitle: 'Navigation',
+    mobileDescription: 'Pages and products in this app.',
+    missingContext: 'usePsSidebar must be used inside PsSidebarProvider.',
+    railLabel: 'Toggle sidebar',
+    toggleLabel: 'Toggle sidebar',
+    width: '16rem',
+    widthIcon: '3rem',
+    widthMobile: '18rem',
+};

package/dist/constants/ps-sidebar-menu-button-variants.d.ts

@@ -0,0 +1,4 @@
+export declare const PsSidebarMenuButtonVariants: (props?: ({
+    variant?: "default" | "outline" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/dist/constants/ps-sidebar-menu-button-variants.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsSidebarMenuButtonVariants = void 0;
+const class_variance_authority_1 = require("class-variance-authority");
+exports.PsSidebarMenuButtonVariants = (0, class_variance_authority_1.cva)('peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', {
+    variants: {
+        variant: {
+            default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
+            outline: 'bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)]',
+        },
+        size: {
+            default: 'h-8 text-sm',
+            sm: 'h-7 text-xs',
+            lg: 'h-12 text-sm group-data-[collapsible=icon]:!p-0',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+        size: 'default',
+    },
+});

package/dist/constants/ps-sidebar-state.d.ts

@@ -0,0 +1,4 @@
+export declare enum PsSidebarState {
+    Collapsed = "collapsed",
+    Expanded = "expanded"
+}

package/dist/constants/ps-sidebar-state.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsSidebarState = void 0;
+var PsSidebarState;
+(function (PsSidebarState) {
+    PsSidebarState["Collapsed"] = "collapsed";
+    PsSidebarState["Expanded"] = "expanded";
+})(PsSidebarState || (exports.PsSidebarState = PsSidebarState = {}));

package/dist/contexts/ps-sidebar-context.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import type { PsSidebarContextData } from '../models/ps-sidebar-context-data.js';
+export declare const PsSidebarContext: React.Context<PsSidebarContextData | null>;

package/dist/contexts/ps-sidebar-context.js

@@ -0,0 +1,38 @@
+"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.PsSidebarContext = void 0;
+const React = __importStar(require("react"));
+exports.PsSidebarContext = React.createContext(null);

package/dist/esm/components/ps-alert-dialog-content.js

@@ -5,5 +5,5 @@ import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import { PsClassNameService } from '../services/ps-class-name-service.js';
 import { PsAlertDialogOverlay } from './ps-alert-dialog-overlay.js';
 import { PsAlertDialogPortal } from './ps-alert-dialog-portal.js';
-export const PsAlertDialogContent = React.forwardRef(({ className, ...props }, ref) => (_jsxs(PsAlertDialogPortal, { children: [_jsx(PsAlertDialogOverlay, {}), _jsx(AlertDialogPrimitive.Content, { ref: ref, className: PsClassNameService.merge('fixed left-[50%] top-[50%] z-modal grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg', className), ...props })] })));
+export const PsAlertDialogContent = React.forwardRef(({ className, ...props }, ref) => (_jsxs(PsAlertDialogPortal, { children: [_jsx(PsAlertDialogOverlay, {}), _jsx(AlertDialogPrimitive.Content, { ref: ref, className: PsClassNameService.merge('fixed left-[50%] top-[50%] z-modal grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 sm:rounded-lg', className), ...props })] })));
 PsAlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;

package/dist/esm/components/ps-alert-dialog-overlay.js

@@ -3,5 +3,5 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import { PsClassNameService } from '../services/ps-class-name-service.js';
-export const PsAlertDialogOverlay = React.forwardRef(({ className, ...props }, ref) => (_jsx(AlertDialogPrimitive.Overlay, { className: PsClassNameService.merge('fixed inset-0 z-overlay bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0', className), ...props, ref: ref })));
+export const PsAlertDialogOverlay = React.forwardRef(({ className, ...props }, ref) => (_jsx(AlertDialogPrimitive.Overlay, { className: PsClassNameService.merge('fixed inset-0 z-overlay bg-black/50 duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0', className), ...props, ref: ref })));
 PsAlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;

package/dist/esm/components/ps-app-sidebar.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PsSidebarContent } from './ps-sidebar-content.js';
+import { PsSidebarFooter } from './ps-sidebar-footer.js';
+import { PsSidebarHeader } from './ps-sidebar-header.js';
+import { PsSidebarNavGroups } from './ps-sidebar-nav-groups.js';
+import { PsSidebarRail } from './ps-sidebar-rail.js';
+import { PsSidebarUserMenu } from './ps-sidebar-user-menu.js';
+import { PsSidebarWorkspaceSwitcher } from './ps-sidebar-workspace-switcher.js';
+import { PsSidebar } from './ps-sidebar.js';
+export const PsAppSidebar = ({ appTitle, groups, homeHref, logoAlt, logoSrc, logoutHref, renderLink, user, workspaceSwitcher, }) => (_jsxs(PsSidebar, { collapsible: 'icon', children: [_jsx(PsSidebarHeader, { children: _jsx(PsSidebarWorkspaceSwitcher, { appTitle: appTitle, homeHref: homeHref, logoAlt: logoAlt, logoSrc: logoSrc, renderLink: renderLink, switcher: workspaceSwitcher }) }), _jsx(PsSidebarContent, { children: _jsx(PsSidebarNavGroups, { groups: groups, renderLink: renderLink }) }), user === null ? null : (_jsx(PsSidebarFooter, { children: _jsx(PsSidebarUserMenu, { logoutHref: logoutHref, user: user }) })), _jsx(PsSidebarRail, {})] }));

package/dist/esm/components/ps-dialog-content.js

@@ -6,5 +6,5 @@ import { X } from 'lucide-react';
 import { PsClassNameService } from '../services/ps-class-name-service.js';
 import { PsDialogOverlay } from './ps-dialog-overlay.js';
 import { PsDialogPortal } from './ps-dialog-portal.js';
-export const PsDialogContent = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(PsDialogPortal, { children: [_jsx(PsDialogOverlay, {}), _jsxs(DialogPrimitive.Content, { ref: ref, className: PsClassNameService.merge('fixed left-[50%] top-[50%] z-modal grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg', className), ...props, children: [children, _jsxs(DialogPrimitive.Close, { className: 'absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground', children: [_jsx(X, { className: 'h-4 w-4' }), _jsx("span", { className: 'sr-only', children: "Close" })] })] })] })));
+export const PsDialogContent = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(PsDialogPortal, { children: [_jsx(PsDialogOverlay, {}), _jsxs(DialogPrimitive.Content, { ref: ref, className: PsClassNameService.merge('fixed left-[50%] top-[50%] z-modal grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 sm:rounded-lg', className), ...props, children: [children, _jsxs(DialogPrimitive.Close, { className: 'absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground', children: [_jsx(X, { className: 'h-4 w-4' }), _jsx("span", { className: 'sr-only', children: "Close" })] })] })] })));
 PsDialogContent.displayName = DialogPrimitive.Content.displayName;

package/dist/esm/components/ps-dialog-overlay.js

@@ -3,5 +3,5 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { PsClassNameService } from '../services/ps-class-name-service.js';
-export const PsDialogOverlay = React.forwardRef(({ className, ...props }, ref) => (_jsx(DialogPrimitive.Overlay, { ref: ref, className: PsClassNameService.merge('fixed inset-0 z-overlay bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0', className), ...props })));
+export const PsDialogOverlay = React.forwardRef(({ className, ...props }, ref) => (_jsx(DialogPrimitive.Overlay, { ref: ref, className: PsClassNameService.merge('fixed inset-0 z-overlay bg-black/50 duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0', className), ...props })));
 PsDialogOverlay.displayName = DialogPrimitive.Overlay.displayName;

package/dist/esm/components/ps-sheet-overlay.js

@@ -2,5 +2,5 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import * as SheetPrimitive from '@radix-ui/react-dialog';
 import { PsClassNameService } from '../services/ps-class-name-service.js';
-export const PsSheetOverlay = React.forwardRef(({ className, ...props }, ref) => (_jsx(SheetPrimitive.Overlay, { className: PsClassNameService.merge('fixed inset-0 z-overlay bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0', className), ...props, ref: ref })));
+export const PsSheetOverlay = React.forwardRef(({ className, ...props }, ref) => (_jsx(SheetPrimitive.Overlay, { className: PsClassNameService.merge('fixed inset-0 z-overlay bg-black/50 duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0', className), ...props, ref: ref })));
 PsSheetOverlay.displayName = SheetPrimitive.Overlay.displayName;

package/dist/esm/components/ps-sidebar-content.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { PsClassNameService } from '../services/ps-class-name-service.js';
+export const PsSidebarContent = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, "data-sidebar": 'content', className: PsClassNameService.merge('flex min-h-0 flex-1 flex-col gap-2 overflow-auto [scrollbar-width:none] group-data-[collapsible=icon]:overflow-hidden [&::-webkit-scrollbar]:hidden', className), ...props })));
+PsSidebarContent.displayName = 'PsSidebarContent';

package/dist/esm/components/ps-sidebar-footer.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { PsClassNameService } from '../services/ps-class-name-service.js';
+export const PsSidebarFooter = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, "data-sidebar": 'footer', className: PsClassNameService.merge('flex flex-col gap-2 p-2', className), ...props })));
+PsSidebarFooter.displayName = 'PsSidebarFooter';

package/dist/esm/components/ps-sidebar-group-content.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { PsClassNameService } from '../services/ps-class-name-service.js';
+export const PsSidebarGroupContent = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, "data-sidebar": 'group-content', className: PsClassNameService.merge('w-full text-sm', className), ...props })));
+PsSidebarGroupContent.displayName = 'PsSidebarGroupContent';

package/dist/esm/components/ps-sidebar-group-label.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { PsClassNameService } from '../services/ps-class-name-service.js';
+export const PsSidebarGroupLabel = React.forwardRef(({ className, asChild = false, ...props }, ref) => {
+    const Component = asChild ? Slot : 'div';
+    return (_jsx(Component, { ref: ref, "data-sidebar": 'group-label', className: PsClassNameService.merge('flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 [&>svg]:size-4 [&>svg]:shrink-0', className), ...props }));
+});
+PsSidebarGroupLabel.displayName = 'PsSidebarGroupLabel';

package/dist/esm/components/ps-sidebar-group.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { PsClassNameService } from '../services/ps-class-name-service.js';
+export const PsSidebarGroup = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, "data-sidebar": 'group', className: PsClassNameService.merge('relative flex w-full min-w-0 flex-col p-2', className), ...props })));
+PsSidebarGroup.displayName = 'PsSidebarGroup';

package/dist/esm/components/ps-sidebar-header.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { PsClassNameService } from '../services/ps-class-name-service.js';
+export const PsSidebarHeader = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, "data-sidebar": 'header', className: PsClassNameService.merge('flex flex-col gap-2 p-2', className), ...props })));
+PsSidebarHeader.displayName = 'PsSidebarHeader';

package/dist/esm/components/ps-sidebar-inset.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { PsClassNameService } from '../services/ps-class-name-service.js';
+export const PsSidebarInset = React.forwardRef(({ className, ...props }, ref) => (_jsx("main", { ref: ref, className: PsClassNameService.merge('relative flex w-full min-w-0 flex-1 flex-col bg-background peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow', className), ...props })));
+PsSidebarInset.displayName = 'PsSidebarInset';

package/dist/esm/components/ps-sidebar-layout.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from 'react';
+import { PsAppSidebarConfig } from '../constants/ps-app-sidebar-config.js';
+import { PsLinkService } from '../services/ps-link-service.js';
+import { PsAppSidebar } from './ps-app-sidebar.js';
+import { PsAppSwitcher } from './ps-app-switcher.js';
+import { PsBreadcrumbItem } from './ps-breadcrumb-item.js';
+import { PsBreadcrumbLink } from './ps-breadcrumb-link.js';
+import { PsBreadcrumbList } from './ps-breadcrumb-list.js';
+import { PsBreadcrumbPage } from './ps-breadcrumb-page.js';
+import { PsBreadcrumbSeparator } from './ps-breadcrumb-separator.js';
+import { PsBreadcrumb } from './ps-breadcrumb.js';
+import { PsSeparator } from './ps-separator.js';
+import { PsSidebarInset } from './ps-sidebar-inset.js';
+import { PsSidebarProvider } from './ps-sidebar-provider.js';
+import { PsSidebarTrigger } from './ps-sidebar-trigger.js';
+export const PsSidebarLayout = ({ actions, appSwitcher, children, crumbs = [], defaultOpen = true, ...sidebar }) => (_jsxs(PsSidebarProvider, { defaultOpen: defaultOpen, children: [_jsx(PsAppSidebar, { ...sidebar }), _jsxs(PsSidebarInset, { children: [_jsxs("header", { className: 'sticky top-0 z-header flex h-14 shrink-0 items-center gap-2 border-b bg-background/95 px-4 backdrop-blur supports-[backdrop-filter]:bg-background/80', children: [_jsx(PsSidebarTrigger, { className: '-ml-1' }), crumbs.length > 0 ? (_jsxs(_Fragment, { children: [_jsx(PsSeparator, { className: 'mr-1 h-4', orientation: 'vertical' }), _jsx(PsBreadcrumb, { "aria-label": PsAppSidebarConfig.breadcrumbLabel, className: 'min-w-0', children: _jsx(PsBreadcrumbList, { className: 'flex-nowrap', children: crumbs.map((crumb, index) => (_jsxs(React.Fragment, { children: [index > 0 ? _jsx(PsBreadcrumbSeparator, { className: 'hidden sm:block' }) : null, _jsx(PsBreadcrumbItem, { className: index < crumbs.length - 1 ? 'hidden min-w-0 sm:inline-flex' : 'min-w-0', children: index === crumbs.length - 1 ? (_jsx(PsBreadcrumbPage, { className: 'truncate', children: crumb.label })) : (_jsx(PsBreadcrumbLink, { asChild: true, children: PsLinkService.render(sidebar.renderLink, {
+                                                            children: crumb.label,
+                                                            className: 'truncate',
+                                                            href: crumb.href,
+                                                        }) })) })] }, crumb.href))) }) })] })) : null, _jsxs("div", { className: 'ml-auto flex shrink-0 items-center gap-1.5', children: [actions, appSwitcher === undefined ? null : _jsx(PsAppSwitcher, { ...appSwitcher })] })] }), _jsx("div", { className: 'flex min-w-0 flex-1 flex-col', children: children })] })] }));

package/dist/esm/components/ps-sidebar-menu-action.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { PsClassNameService } from '../services/ps-class-name-service.js';
+export const PsSidebarMenuAction = React.forwardRef(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
+    const Component = asChild ? Slot : 'button';
+    return (_jsx(Component, { ref: ref, "data-sidebar": 'menu-action', className: PsClassNameService.merge('absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground after:absolute after:-inset-2 after:md:hidden peer-data-[size=sm]/menu-button:top-1 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 group-data-[collapsible=icon]:hidden [&>svg]:size-4 [&>svg]:shrink-0', showOnHover &&
+            'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0', className), ...props }));
+});
+PsSidebarMenuAction.displayName = 'PsSidebarMenuAction';

package/dist/esm/components/ps-sidebar-menu-badge.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { PsClassNameService } from '../services/ps-class-name-service.js';
+export const PsSidebarMenuBadge = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, "data-sidebar": 'menu-badge', className: PsClassNameService.merge('pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground peer-data-[size=sm]/menu-button:top-1 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 group-data-[collapsible=icon]:hidden', className), ...props })));
+PsSidebarMenuBadge.displayName = 'PsSidebarMenuBadge';

package/dist/esm/components/ps-sidebar-menu-button.js

@@ -0,0 +1,20 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { PsSidebarMenuButtonVariants } from '../constants/ps-sidebar-menu-button-variants.js';
+import { PsSidebarState } from '../constants/ps-sidebar-state.js';
+import { usePsSidebar } from '../hooks/use-ps-sidebar.js';
+import { PsClassNameService } from '../services/ps-class-name-service.js';
+import { PsTooltipContent } from './ps-tooltip-content.js';
+import { PsTooltipTrigger } from './ps-tooltip-trigger.js';
+import { PsTooltip } from './ps-tooltip.js';
+export const PsSidebarMenuButton = React.forwardRef(({ asChild = false, isActive = false, variant = 'default', size = 'default', tooltip, className, ...props }, ref) => {
+    const Component = asChild ? Slot : 'button';
+    const { isMobile, state } = usePsSidebar();
+    const button = (_jsx(Component, { ref: ref, "data-sidebar": 'menu-button', "data-size": size, "data-active": isActive, className: PsClassNameService.merge(PsSidebarMenuButtonVariants({ variant, size }), className), ...props }));
+    if (tooltip === undefined)
+        return button;
+    return (_jsxs(PsTooltip, { children: [_jsx(PsTooltipTrigger, { asChild: true, children: button }), _jsx(PsTooltipContent, { align: 'center', hidden: state !== PsSidebarState.Collapsed || isMobile, side: 'right', children: tooltip })] }));
+});
+PsSidebarMenuButton.displayName = 'PsSidebarMenuButton';

package/dist/esm/components/ps-sidebar-menu-item.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { PsClassNameService } from '../services/ps-class-name-service.js';
+export const PsSidebarMenuItem = React.forwardRef(({ className, ...props }, ref) => (_jsx("li", { ref: ref, "data-sidebar": 'menu-item', className: PsClassNameService.merge('group/menu-item relative', className), ...props })));
+PsSidebarMenuItem.displayName = 'PsSidebarMenuItem';

package/dist/esm/components/ps-sidebar-menu-sub-button.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { PsClassNameService } from '../services/ps-class-name-service.js';
+export const PsSidebarMenuSubButton = React.forwardRef(({ asChild = false, size = 'md', isActive = false, className, ...props }, ref) => {
+    const Component = asChild ? Slot : 'a';
+    return (_jsx(Component, { ref: ref, "data-sidebar": 'menu-sub-button', "data-size": size, "data-active": isActive, className: PsClassNameService.merge('flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground group-data-[collapsible=icon]:hidden [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground', size === 'sm' ? 'text-xs' : 'text-sm', className), ...props }));
+});
+PsSidebarMenuSubButton.displayName = 'PsSidebarMenuSubButton';

package/dist/esm/components/ps-sidebar-menu-sub-item.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { PsClassNameService } from '../services/ps-class-name-service.js';
+export const PsSidebarMenuSubItem = React.forwardRef(({ className, ...props }, ref) => (_jsx("li", { ref: ref, "data-sidebar": 'menu-sub-item', className: PsClassNameService.merge('', className), ...props })));
+PsSidebarMenuSubItem.displayName = 'PsSidebarMenuSubItem';

package/dist/esm/components/ps-sidebar-menu-sub.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { PsClassNameService } from '../services/ps-class-name-service.js';
+export const PsSidebarMenuSub = React.forwardRef(({ className, ...props }, ref) => (_jsx("ul", { ref: ref, "data-sidebar": 'menu-sub', className: PsClassNameService.merge('mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5 group-data-[collapsible=icon]:hidden', className), ...props })));
+PsSidebarMenuSub.displayName = 'PsSidebarMenuSub';

package/dist/esm/components/ps-sidebar-menu.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { PsClassNameService } from '../services/ps-class-name-service.js';
+export const PsSidebarMenu = React.forwardRef(({ className, ...props }, ref) => (_jsx("ul", { ref: ref, "data-sidebar": 'menu', className: PsClassNameService.merge('flex w-full min-w-0 flex-col gap-1', className), ...props })));
+PsSidebarMenu.displayName = 'PsSidebarMenu';

package/dist/esm/components/ps-sidebar-nav-groups.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { PsLinkService } from '../services/ps-link-service.js';
+import { PsSidebarGroupContent } from './ps-sidebar-group-content.js';
+import { PsSidebarGroupLabel } from './ps-sidebar-group-label.js';
+import { PsSidebarGroup } from './ps-sidebar-group.js';
+import { PsSidebarMenuBadge } from './ps-sidebar-menu-badge.js';
+import { PsSidebarMenuButton } from './ps-sidebar-menu-button.js';
+import { PsSidebarMenuItem } from './ps-sidebar-menu-item.js';
+import { PsSidebarMenu } from './ps-sidebar-menu.js';
+export const PsSidebarNavGroups = ({ groups, renderLink }) => (_jsx(_Fragment, { children: groups.map((group) => (_jsxs(PsSidebarGroup, { children: [_jsx(PsSidebarGroupLabel, { children: group.label }), _jsx(PsSidebarGroupContent, { children: _jsx(PsSidebarMenu, { children: group.items.map((item) => (_jsxs(PsSidebarMenuItem, { children: [_jsx(PsSidebarMenuButton, { asChild: true, isActive: item.active === true, tooltip: item.label, children: PsLinkService.render(renderLink, {
+                                    active: item.active,
+                                    children: (_jsxs(_Fragment, { children: [item.icon, _jsx("span", { children: item.label })] })),
+                                    className: '',
+                                    href: item.href,
+                                }) }), item.badge === undefined ? null : (_jsx(PsSidebarMenuBadge, { children: item.badge }))] }, item.id))) }) })] }, group.id))) }));

package/dist/esm/components/ps-sidebar-provider.js

@@ -0,0 +1,53 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { PsSidebarConfig } from '../constants/ps-sidebar-config.js';
+import { PsSidebarState } from '../constants/ps-sidebar-state.js';
+import { PsSidebarContext } from '../contexts/ps-sidebar-context.js';
+import { usePsIsMobile } from '../hooks/use-ps-is-mobile.js';
+import { PsClassNameService } from '../services/ps-class-name-service.js';
+import { PsTooltipProvider } from './ps-tooltip-provider.js';
+export const PsSidebarProvider = React.forwardRef(({ defaultOpen = true, open: openProp, onOpenChange, className, style, children, ...props }, ref) => {
+    const isMobile = usePsIsMobile();
+    const [openMobile, setOpenMobile] = React.useState(false);
+    const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
+    const open = openProp === undefined ? internalOpen : openProp;
+    const setOpen = React.useCallback((value) => {
+        if (onOpenChange === undefined)
+            setInternalOpen(value);
+        else
+            onOpenChange(value);
+        document.cookie = `${PsSidebarConfig.cookieName}=${value}; path=/; max-age=${PsSidebarConfig.cookieMaxAgeSeconds}; SameSite=Lax`;
+    }, [onOpenChange]);
+    const toggleSidebar = React.useCallback(() => {
+        if (isMobile)
+            setOpenMobile((current) => !current);
+        else
+            setOpen(!open);
+    }, [isMobile, open, setOpen]);
+    React.useEffect(() => {
+        const onKeyDown = (event) => {
+            if (event.key === PsSidebarConfig.keyboardShortcut && (event.metaKey || event.ctrlKey)) {
+                event.preventDefault();
+                toggleSidebar();
+            }
+        };
+        window.addEventListener('keydown', onKeyDown);
+        return () => window.removeEventListener('keydown', onKeyDown);
+    }, [toggleSidebar]);
+    const value = React.useMemo(() => ({
+        isMobile,
+        open,
+        openMobile,
+        setOpen,
+        setOpenMobile,
+        state: open ? PsSidebarState.Expanded : PsSidebarState.Collapsed,
+        toggleSidebar,
+    }), [isMobile, open, openMobile, setOpen, toggleSidebar]);
+    return (_jsx(PsSidebarContext.Provider, { value: value, children: _jsx(PsTooltipProvider, { delayDuration: 0, children: _jsx("div", { ref: ref, style: {
+                    '--sidebar-width': PsSidebarConfig.width,
+                    '--sidebar-width-icon': PsSidebarConfig.widthIcon,
+                    ...style,
+                }, className: PsClassNameService.merge('group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar', className), ...props, children: children }) }) }));
+});
+PsSidebarProvider.displayName = 'PsSidebarProvider';

package/dist/esm/components/ps-sidebar-rail.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { PsSidebarConfig } from '../constants/ps-sidebar-config.js';
+import { usePsSidebar } from '../hooks/use-ps-sidebar.js';
+import { PsClassNameService } from '../services/ps-class-name-service.js';
+export const PsSidebarRail = React.forwardRef(({ className, ...props }, ref) => {
+    const { toggleSidebar } = usePsSidebar();
+    return (_jsx("button", { ref: ref, "data-sidebar": 'rail', "aria-label": PsSidebarConfig.railLabel, tabIndex: -1, onClick: toggleSidebar, title: PsSidebarConfig.railLabel, type: 'button', className: PsClassNameService.merge('absolute inset-y-0 z-docked hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex', '[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize', '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize', 'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar', '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2 [[data-side=right][data-collapsible=offcanvas]_&]:-left-2', className), ...props }));
+});
+PsSidebarRail.displayName = 'PsSidebarRail';

package/dist/esm/components/ps-sidebar-separator.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { PsClassNameService } from '../services/ps-class-name-service.js';
+import { PsSeparator } from './ps-separator.js';
+export const PsSidebarSeparator = React.forwardRef(({ className, ...props }, ref) => (_jsx(PsSeparator, { ref: ref, "data-sidebar": 'separator', className: PsClassNameService.merge('mx-2 w-auto bg-sidebar-border', className), ...props })));
+PsSidebarSeparator.displayName = 'PsSidebarSeparator';

package/dist/esm/components/ps-sidebar-trigger.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { PanelLeft } from 'lucide-react';
+import { PsSidebarConfig } from '../constants/ps-sidebar-config.js';
+import { usePsSidebar } from '../hooks/use-ps-sidebar.js';
+import { PsClassNameService } from '../services/ps-class-name-service.js';
+import { PsButton } from './ps-button.js';
+export const PsSidebarTrigger = React.forwardRef(({ className, onClick, ...props }, ref) => {
+    const { toggleSidebar } = usePsSidebar();
+    return (_jsxs(PsButton, { ref: ref, "data-sidebar": 'trigger', variant: 'ghost', size: 'icon', className: PsClassNameService.merge('size-8', className), onClick: (event) => {
+            onClick?.(event);
+            toggleSidebar();
+        }, ...props, children: [_jsx(PanelLeft, {}), _jsx("span", { className: 'sr-only', children: PsSidebarConfig.toggleLabel })] }));
+});
+PsSidebarTrigger.displayName = 'PsSidebarTrigger';