@pallasoft/ps-internal-components 1.0.0 → 1.1.0

package/dist/constants/ps-toggle-variants.d.ts

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

package/dist/constants/ps-toggle-variants.js

@@ -1,5 +1,8 @@
-import { cva } from 'class-variance-authority';
-export const PsToggleVariants = cva('inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0', {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsToggleVariants = void 0;
+const class_variance_authority_1 = require("class-variance-authority");
+exports.PsToggleVariants = (0, class_variance_authority_1.cva)('inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0', {
     variants: {
         variant: {
             default: 'bg-transparent',

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

@@ -1,2 +1,38 @@
-import * as React from 'react';
-export const PsChartContext = React.createContext(null);
+"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.PsChartContext = void 0;
+const React = __importStar(require("react"));
+exports.PsChartContext = React.createContext(null);

package/dist/contexts/ps-toggle-group-context.js

@@ -1,5 +1,41 @@
-import * as React from 'react';
-export const PsToggleGroupContext = React.createContext({
+"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.PsToggleGroupContext = void 0;
+const React = __importStar(require("react"));
+exports.PsToggleGroupContext = React.createContext({
     size: 'default',
     variant: 'default',
 });

package/dist/esm/components/ps-alert-description.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 PsAlertDescription = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: PsClassNameService.merge('text-sm [&_p]:leading-relaxed', className), ...props })));
+PsAlertDescription.displayName = 'PsAlertDescription';

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

@@ -0,0 +1,8 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+import { PsButtonVariants } from '../constants/ps-button-variants.js';
+import { PsClassNameService } from '../services/ps-class-name-service.js';
+export const PsAlertDialogAction = React.forwardRef(({ className, ...props }, ref) => (_jsx(AlertDialogPrimitive.Action, { ref: ref, className: PsClassNameService.merge(PsButtonVariants(), className), ...props })));
+PsAlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;

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

@@ -0,0 +1,8 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+import { PsButtonVariants } from '../constants/ps-button-variants.js';
+import { PsClassNameService } from '../services/ps-class-name-service.js';
+export const PsAlertDialogCancel = React.forwardRef(({ className, ...props }, ref) => (_jsx(AlertDialogPrimitive.Cancel, { ref: ref, className: PsClassNameService.merge(PsButtonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', className), ...props })));
+PsAlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;

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

@@ -0,0 +1,9 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } 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';
+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-50 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 })] })));
+PsAlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;

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

@@ -0,0 +1,7 @@
+'use client';
+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 PsAlertDialogDescription = React.forwardRef(({ className, ...props }, ref) => (_jsx(AlertDialogPrimitive.Description, { ref: ref, className: PsClassNameService.merge('text-sm text-muted-foreground', className), ...props })));
+PsAlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;

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

@@ -0,0 +1,5 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PsClassNameService } from '../services/ps-class-name-service.js';
+export const PsAlertDialogFooter = ({ className, ...props }) => (_jsx("div", { className: PsClassNameService.merge('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className), ...props }));
+PsAlertDialogFooter.displayName = 'PsAlertDialogFooter';

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

@@ -0,0 +1,5 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PsClassNameService } from '../services/ps-class-name-service.js';
+export const PsAlertDialogHeader = ({ className, ...props }) => (_jsx("div", { className: PsClassNameService.merge('flex flex-col space-y-2 text-center sm:text-left', className), ...props }));
+PsAlertDialogHeader.displayName = 'PsAlertDialogHeader';

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

@@ -0,0 +1,7 @@
+'use client';
+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-50 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 })));
+PsAlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;

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

@@ -0,0 +1,3 @@
+'use client';
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+export const PsAlertDialogPortal = AlertDialogPrimitive.Portal;

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

@@ -0,0 +1,7 @@
+'use client';
+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 PsAlertDialogTitle = React.forwardRef(({ className, ...props }, ref) => (_jsx(AlertDialogPrimitive.Title, { ref: ref, className: PsClassNameService.merge('text-lg font-semibold', className), ...props })));
+PsAlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;

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

@@ -0,0 +1,3 @@
+'use client';
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+export const PsAlertDialogTrigger = AlertDialogPrimitive.Trigger;

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

@@ -0,0 +1,3 @@
+'use client';
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+export const PsAlertDialog = AlertDialogPrimitive.Root;

package/dist/esm/components/ps-alert-title.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 PsAlertTitle = React.forwardRef(({ className, ...props }, ref) => (_jsx("h5", { ref: ref, className: PsClassNameService.merge('mb-1 font-medium leading-none tracking-tight', className), ...props })));
+PsAlertTitle.displayName = 'PsAlertTitle';

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { PsAlertVariants } from '../constants/ps-alert-variants.js';
+import { PsClassNameService } from '../services/ps-class-name-service.js';
+export const PsAlert = React.forwardRef(({ className, variant, ...props }, ref) => (_jsx("div", { ref: ref, role: 'alert', className: PsClassNameService.merge(PsAlertVariants({ variant }), className), ...props })));
+PsAlert.displayName = 'PsAlert';

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

@@ -0,0 +1,22 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { LogOut } from 'lucide-react';
+import { PsClassNameService } from '../services/ps-class-name-service.js';
+import { PsAppSwitcher } from './ps-app-switcher.js';
+import { PsAvatarFallback } from './ps-avatar-fallback.js';
+import { PsAvatarImage } from './ps-avatar-image.js';
+import { PsAvatar } from './ps-avatar.js';
+import { PsButton } from './ps-button.js';
+import { PsDropdownMenuContent } from './ps-dropdown-menu-content.js';
+import { PsDropdownMenuItem } from './ps-dropdown-menu-item.js';
+import { PsDropdownMenuLabel } from './ps-dropdown-menu-label.js';
+import { PsDropdownMenuSeparator } from './ps-dropdown-menu-separator.js';
+import { PsDropdownMenuTrigger } from './ps-dropdown-menu-trigger.js';
+import { PsDropdownMenu } from './ps-dropdown-menu.js';
+import { PsWorkspaceSwitcher } from './ps-workspace-switcher.js';
+export const PsAppHeader = ({ appSwitcher, appTitle, logoAlt = 'Pallasoft logo', logoSrc, logoutHref, navItems = [], renderLink, user, workspaceSwitcher, }) => {
+    const link = (href, className, children, active) => renderLink ? (renderLink({ href, className, children, active })) : (_jsx("a", { href: href, className: className, "aria-current": active ? 'page' : undefined, children: children }));
+    return (_jsx("header", { className: 'sticky top-0 z-40 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/80', children: _jsxs("div", { className: 'mx-auto flex w-full max-w-screen-2xl flex-col gap-3 px-4 py-3 sm:px-6', children: [_jsxs("div", { className: 'flex min-w-0 items-center justify-between gap-3', children: [_jsxs("div", { className: 'flex min-w-0 flex-1 items-center gap-2.5', children: [_jsx("div", { className: 'flex size-9 shrink-0 items-center justify-center rounded-lg border bg-muted', children: _jsx("img", { alt: logoAlt, className: 'size-5 object-contain', src: logoSrc }) }), _jsx("h1", { className: 'shrink-0 truncate text-sm font-semibold text-foreground', children: appTitle }), workspaceSwitcher ? (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": 'true', className: 'text-muted-foreground/60', children: "/" }), _jsx(PsWorkspaceSwitcher, { switcher: workspaceSwitcher, renderLink: renderLink })] })) : null] }), _jsxs("div", { className: 'flex shrink-0 items-center gap-1.5', children: [appSwitcher ? _jsx(PsAppSwitcher, { ...appSwitcher }) : null, user ? (_jsxs(PsDropdownMenu, { children: [_jsx(PsDropdownMenuTrigger, { asChild: true, children: _jsxs(PsButton, { variant: 'outline', className: 'h-9 max-w-[min(14rem,56vw)] gap-2 px-1.5 sm:pl-1.5 sm:pr-3', children: [_jsxs(PsAvatar, { className: 'size-6', children: [user.avatarUrl ? (_jsx(PsAvatarImage, { alt: user.displayName, src: user.avatarUrl })) : null, _jsx(PsAvatarFallback, { className: 'text-xs', children: user.displayName.slice(0, 1).toUpperCase() })] }), _jsx("span", { className: 'hidden min-w-0 truncate sm:inline', children: user.displayName })] }) }), _jsxs(PsDropdownMenuContent, { align: 'end', className: 'w-56', children: [_jsxs(PsDropdownMenuLabel, { className: 'flex flex-col gap-0.5', children: [_jsx("span", { children: "Account" }), _jsx("span", { className: 'truncate text-xs font-normal text-muted-foreground', children: user.displayName })] }), _jsx(PsDropdownMenuSeparator, {}), _jsx("form", { action: logoutHref, method: 'post', children: _jsx(PsDropdownMenuItem, { asChild: true, children: _jsxs("button", { className: 'flex w-full cursor-pointer items-center gap-2', type: 'submit', children: [_jsx(LogOut, {}), "Sign out"] }) }) })] })] })) : null] })] }), navItems.length ? (_jsx("nav", { "aria-label": 'Primary', className: '-mb-px flex max-w-full gap-1 overflow-x-auto', children: navItems.map((item) => (_jsx(React.Fragment, { children: link(item.href, PsClassNameService.merge('inline-flex h-9 shrink-0 items-center rounded-md px-3 text-sm font-medium transition-colors', item.active
+                            ? 'bg-secondary text-secondary-foreground'
+                            : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'), item.label, item.active) }, item.id))) })) : null] }) }));
+};

package/dist/esm/components/ps-app-switcher-section.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PsAppSwitcherTile } from './ps-app-switcher-tile.js';
+export const PsAppSwitcherSection = ({ section }) => (_jsxs("section", { className: 'flex flex-col gap-1', children: [_jsx("h3", { className: 'px-2 text-xs font-medium text-muted-foreground', children: section.label }), _jsx("div", { className: 'grid grid-cols-3 gap-1', children: section.links.map((link) => (_jsx(PsAppSwitcherTile, { link: link }, `${section.category}-${link.key}`))) })] }));

package/dist/esm/components/ps-app-switcher-tile.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { PsAppSwitcherConfig } from '../constants/ps-app-switcher-config.js';
+import { PsClassNameService } from '../services/ps-class-name-service.js';
+export const PsAppSwitcherTile = ({ link }) => {
+    const [iconIndex, setIconIndex] = React.useState(0);
+    const iconUrls = [link.iconUrl, link.fallbackIconUrl].filter((url) => Boolean(url));
+    const iconUrl = iconIndex < iconUrls.length ? iconUrls[iconIndex] : null;
+    return (_jsxs("a", { href: link.url, target: link.external ? PsAppSwitcherConfig.externalTarget : undefined, rel: link.external ? PsAppSwitcherConfig.externalRel : undefined, "aria-current": link.current ? 'page' : undefined, title: link.name, className: PsClassNameService.merge('group flex min-w-0 flex-col items-center gap-2 rounded-lg px-1 py-2.5 text-center transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring', link.current && 'hover:bg-transparent'), children: [_jsx("span", { className: PsClassNameService.merge('flex size-10 items-center justify-center overflow-hidden rounded-full border bg-background text-xs font-semibold text-foreground transition-shadow', link.current &&
+                    'border-primary ring-2 ring-primary/30 ring-offset-2 ring-offset-background'), children: iconUrl ? (_jsx("img", { alt: '', className: 'size-6 object-contain', loading: 'lazy', onError: () => setIconIndex((current) => current + 1), src: iconUrl })) : (link.initials) }), _jsx("span", { className: PsClassNameService.merge('line-clamp-2 w-full text-xs leading-tight text-foreground', link.current && 'font-medium text-primary'), children: link.name })] }));
+};

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

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { LayoutGrid } from 'lucide-react';
+import { PsAppSwitcherConfig } from '../constants/ps-app-switcher-config.js';
+import { PsAppSwitcherService } from '../services/ps-app-switcher-service.js';
+import { PsAppSwitcherSection } from './ps-app-switcher-section.js';
+import { PsButton } from './ps-button.js';
+import { PsPopoverContent } from './ps-popover-content.js';
+import { PsPopoverTrigger } from './ps-popover-trigger.js';
+import { PsPopover } from './ps-popover.js';
+import { PsScrollArea } from './ps-scroll-area.js';
+import { PsSeparator } from './ps-separator.js';
+export const PsAppSwitcher = ({ currentAppKey, appUrls }) => {
+    const sections = React.useMemo(() => PsAppSwitcherService.sections(appUrls, currentAppKey), [appUrls, currentAppKey]);
+    return (_jsxs(PsPopover, { children: [_jsx(PsPopoverTrigger, { asChild: true, children: _jsx(PsButton, { variant: 'ghost', size: 'icon', "aria-label": PsAppSwitcherConfig.triggerLabel, title: PsAppSwitcherConfig.title, children: _jsx(LayoutGrid, {}) }) }), _jsx(PsPopoverContent, { align: 'end', sideOffset: 8, className: 'w-[min(22rem,calc(100vw-2rem))] p-0', children: _jsx(PsScrollArea, { className: 'h-[min(32rem,calc(100vh-6rem))]', children: _jsx("div", { className: 'flex flex-col gap-3 p-3', children: sections.map((section, index) => (_jsxs(React.Fragment, { children: [index > 0 ? _jsx(PsSeparator, {}) : null, _jsx(PsAppSwitcherSection, { section: section })] }, section.category))) }) }) })] }));
+};

package/dist/esm/components/ps-avatar-fallback.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import { PsClassNameService } from '../services/ps-class-name-service.js';
+export const PsAvatarFallback = React.forwardRef(({ className, ...props }, ref) => (_jsx(AvatarPrimitive.Fallback, { ref: ref, className: PsClassNameService.merge('flex h-full w-full items-center justify-center rounded-full bg-muted', className), ...props })));
+PsAvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;

package/dist/esm/components/ps-avatar-image.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import { PsClassNameService } from '../services/ps-class-name-service.js';
+export const PsAvatarImage = React.forwardRef(({ className, ...props }, ref) => (_jsx(AvatarPrimitive.Image, { ref: ref, className: PsClassNameService.merge('aspect-square h-full w-full', className), ...props })));
+PsAvatarImage.displayName = AvatarPrimitive.Image.displayName;

package/dist/esm/components/ps-avatar.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import { PsClassNameService } from '../services/ps-class-name-service.js';
+import { PsSkeleton } from './ps-skeleton.js';
+export const PsAvatar = React.forwardRef(({ className, isLoading = false, ...props }, ref) => isLoading ? (_jsx(PsSkeleton, { className: PsClassNameService.merge('h-10 w-10 shrink-0 rounded-full', className) })) : (_jsx(AvatarPrimitive.Root, { ref: ref, className: PsClassNameService.merge('relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full', className), ...props })));
+PsAvatar.displayName = AvatarPrimitive.Root.displayName;

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

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PsBadgeVariants } from '../constants/ps-badge-variants.js';
+import { PsClassNameService } from '../services/ps-class-name-service.js';
+import { PsSkeleton } from './ps-skeleton.js';
+export const PsBadge = ({ className, isLoading = false, variant, ...props }) => {
+    if (isLoading)
+        return _jsx(PsSkeleton, { className: PsClassNameService.merge('h-5 w-16 rounded-full', className) });
+    return (_jsx("div", { className: PsClassNameService.merge(PsBadgeVariants({ variant }), className), ...props }));
+};

package/dist/esm/components/ps-breadcrumb-ellipsis.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MoreHorizontal } from 'lucide-react';
+import { PsClassNameService } from '../services/ps-class-name-service.js';
+export const PsBreadcrumbEllipsis = ({ className, ...props }) => (_jsxs("span", { role: 'presentation', "aria-hidden": 'true', className: PsClassNameService.merge('flex h-9 w-9 items-center justify-center', className), ...props, children: [_jsx(MoreHorizontal, { className: 'h-4 w-4' }), _jsx("span", { className: 'sr-only', children: "More" })] }));
+PsBreadcrumbEllipsis.displayName = 'BreadcrumbElipssis';

package/dist/esm/components/ps-breadcrumb-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 PsBreadcrumbItem = React.forwardRef(({ className, ...props }, ref) => (_jsx("li", { ref: ref, className: PsClassNameService.merge('inline-flex items-center gap-1.5', className), ...props })));
+PsBreadcrumbItem.displayName = 'PsBreadcrumbItem';

package/dist/esm/components/ps-breadcrumb-link.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 PsBreadcrumbLink = React.forwardRef(({ asChild, className, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'a';
+    return (_jsx(Comp, { ref: ref, className: PsClassNameService.merge('transition-colors hover:text-foreground', className), ...props }));
+});
+PsBreadcrumbLink.displayName = 'PsBreadcrumbLink';

package/dist/esm/components/ps-breadcrumb-list.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 PsBreadcrumbList = React.forwardRef(({ className, ...props }, ref) => (_jsx("ol", { ref: ref, className: PsClassNameService.merge('flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5', className), ...props })));
+PsBreadcrumbList.displayName = 'PsBreadcrumbList';

package/dist/esm/components/ps-breadcrumb-page.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 PsBreadcrumbPage = React.forwardRef(({ className, ...props }, ref) => (_jsx("span", { ref: ref, role: 'link', "aria-disabled": 'true', "aria-current": 'page', className: PsClassNameService.merge('font-normal text-foreground', className), ...props })));
+PsBreadcrumbPage.displayName = 'PsBreadcrumbPage';

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

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ChevronRight } from 'lucide-react';
+import { PsClassNameService } from '../services/ps-class-name-service.js';
+export const PsBreadcrumbSeparator = ({ children, className, ...props }) => (_jsx("li", { role: 'presentation', "aria-hidden": 'true', className: PsClassNameService.merge('[&>svg]:w-3.5 [&>svg]:h-3.5', className), ...props, children: children !== null && children !== undefined ? children : _jsx(ChevronRight, {}) }));
+PsBreadcrumbSeparator.displayName = 'PsBreadcrumbSeparator';

package/dist/esm/components/ps-breadcrumb.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+export const PsBreadcrumb = React.forwardRef(({ ...props }, ref) => _jsx("nav", { ref: ref, "aria-label": 'breadcrumb', ...props }));
+PsBreadcrumb.displayName = 'PsBreadcrumb';

package/dist/esm/components/ps-button.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 { PsButtonVariants } from '../constants/ps-button-variants.js';
+import { PsClassNameService } from '../services/ps-class-name-service.js';
+export const PsButton = React.forwardRef(({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+    return (_jsx(Comp, { className: PsClassNameService.merge(PsButtonVariants({ variant, size, className })), ref: ref, ...props }));
+});
+PsButton.displayName = 'PsButton';

package/dist/esm/components/ps-calendar.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ChevronDown, ChevronLeft, ChevronRight } from 'lucide-react';
+import { DayPicker } from 'react-day-picker';
+import { PsButtonVariants } from '../constants/ps-button-variants.js';
+import { PsClassNameService } from '../services/ps-class-name-service.js';
+export const PsCalendar = ({ className, classNames, showOutsideDays = true, ...props }) => (_jsx(DayPicker, { className: PsClassNameService.merge('p-3', className), classNames: {
+        months: 'relative flex flex-col gap-4 sm:flex-row',
+        month: 'flex w-full flex-col gap-4',
+        nav: 'absolute inset-x-0 top-0 flex w-full items-center justify-between',
+        button_previous: PsClassNameService.merge(PsButtonVariants({ variant: 'ghost', size: 'icon' }), 'size-8 p-0 aria-disabled:opacity-50'),
+        button_next: PsClassNameService.merge(PsButtonVariants({ variant: 'ghost', size: 'icon' }), 'size-8 p-0 aria-disabled:opacity-50'),
+        month_caption: 'flex h-8 w-full items-center justify-center px-8',
+        caption_label: props.captionLayout === 'dropdown'
+            ? 'flex h-8 items-center gap-1 rounded-md pl-2 pr-1 text-sm font-medium [&>svg]:size-3.5 [&>svg]:text-muted-foreground'
+            : 'text-sm font-medium',
+        dropdowns: 'flex h-8 w-full items-center justify-center gap-1.5 text-sm font-medium',
+        dropdown_root: 'relative rounded-md border border-input shadow-sm has-[:focus]:border-ring has-[:focus]:ring-1 has-[:focus]:ring-ring',
+        dropdown: 'absolute inset-0 cursor-pointer opacity-0',
+        month_grid: 'w-full border-collapse',
+        weekdays: 'flex',
+        weekday: 'flex-1 select-none text-[0.8rem] font-normal text-muted-foreground',
+        week: 'mt-2 flex w-full',
+        day: 'relative aspect-square w-full select-none p-0 text-center text-sm',
+        day_button: PsClassNameService.merge(PsButtonVariants({ variant: 'ghost', size: 'icon' }), 'size-8 w-full p-0 font-normal aria-selected:opacity-100'),
+        selected: '[&>button]:bg-primary [&>button]:text-primary-foreground [&>button]:hover:bg-primary [&>button]:hover:text-primary-foreground',
+        today: '[&>button]:bg-accent [&>button]:text-accent-foreground',
+        outside: 'text-muted-foreground opacity-50',
+        disabled: 'text-muted-foreground opacity-50',
+        hidden: 'invisible',
+        ...classNames,
+    }, components: {
+        Chevron: ({ orientation }) => {
+            if (orientation === 'left')
+                return _jsx(ChevronLeft, { className: 'size-4' });
+            if (orientation === 'right')
+                return _jsx(ChevronRight, { className: 'size-4' });
+            return _jsx(ChevronDown, { className: 'size-3.5' });
+        },
+    }, showOutsideDays: showOutsideDays, ...props }));

package/dist/esm/components/ps-card-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 PsCardContent = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: PsClassNameService.merge('p-6 pt-0', className), ...props })));
+PsCardContent.displayName = 'PsCardContent';

package/dist/esm/components/ps-card-description.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 PsCardDescription = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: PsClassNameService.merge('text-sm text-muted-foreground', className), ...props })));
+PsCardDescription.displayName = 'PsCardDescription';

package/dist/esm/components/ps-card-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 PsCardFooter = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: PsClassNameService.merge('flex items-center p-6 pt-0', className), ...props })));
+PsCardFooter.displayName = 'PsCardFooter';

package/dist/esm/components/ps-card-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 PsCardHeader = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: PsClassNameService.merge('flex flex-col space-y-1.5 p-6', className), ...props })));
+PsCardHeader.displayName = 'PsCardHeader';

package/dist/esm/components/ps-card-title.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 PsCardTitle = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: PsClassNameService.merge('font-semibold leading-none tracking-tight', className), ...props })));
+PsCardTitle.displayName = 'PsCardTitle';

package/dist/esm/components/ps-card.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 { PsSkeleton } from './ps-skeleton.js';
+export const PsCard = React.forwardRef(({ className, isLoading = false, ...props }, ref) => isLoading ? (_jsx(PsSkeleton, { className: PsClassNameService.merge('h-40 w-full rounded-xl', className) })) : (_jsx("div", { ref: ref, className: PsClassNameService.merge('rounded-xl border bg-card text-card-foreground shadow', className), ...props })));
+PsCard.displayName = 'PsCard';

package/dist/esm/components/ps-chart-container.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import * as RechartsPrimitive from 'recharts';
+import { PsChartContext } from '../contexts/ps-chart-context.js';
+import { PsChartService } from '../services/ps-chart-service.js';
+import { PsClassNameService } from '../services/ps-class-name-service.js';
+import { PsChartStyle } from './ps-chart-style.js';
+export const PsChartContainer = ({ id, className, children, config, ...props }) => {
+    const generated = React.useId();
+    const chartId = PsChartService.chartId(id, generated);
+    const value = React.useMemo(() => ({ config }), [config]);
+    return (_jsx(PsChartContext.Provider, { value: value, children: _jsxs("div", { "data-chart": chartId, "data-slot": 'chart', className: PsClassNameService.merge("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, children: [_jsx(PsChartStyle, { config: config, id: chartId }), _jsx(RechartsPrimitive.ResponsiveContainer, { children: children })] }) }));
+};

package/dist/esm/components/ps-chart-legend-content.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PsChartDefaults } from '../constants/ps-chart-defaults.js';
+import { usePsChart } from '../hooks/use-ps-chart.js';
+import { PsChartService } from '../services/ps-chart-service.js';
+import { PsClassNameService } from '../services/ps-class-name-service.js';
+export const PsChartLegendContent = ({ className, hideIcon = false, payload, verticalAlign = 'bottom', nameKey, }) => {
+    const { config } = usePsChart();
+    if (payload === undefined || payload.length === 0)
+        return null;
+    return (_jsx("div", { className: PsClassNameService.merge('flex items-center justify-center gap-4', verticalAlign === 'top' ? 'pb-3' : 'pt-3', className), children: payload.map((item) => {
+            const key = `${nameKey !== undefined ? nameKey : item.dataKey !== undefined ? String(item.dataKey) : PsChartDefaults.valueKey}`;
+            const itemConfig = PsChartService.itemFor(config, item, key);
+            return (_jsxs("div", { className: 'flex items-center gap-1.5 [&>svg]:size-3 [&>svg]:text-muted-foreground', children: [itemConfig !== undefined && itemConfig.icon !== undefined && !hideIcon ? (_jsx(itemConfig.icon, {})) : (_jsx("div", { className: 'size-2 shrink-0 rounded-[2px]', style: { backgroundColor: item.color } })), itemConfig !== undefined ? itemConfig.label : null] }, String(item.value)));
+        }) }));
+};

package/dist/esm/components/ps-chart-legend.js

@@ -0,0 +1,2 @@
+import * as RechartsPrimitive from 'recharts';
+export const PsChartLegend = RechartsPrimitive.Legend;

package/dist/esm/components/ps-chart-primitives.js

@@ -0,0 +1,14 @@
+import * as RechartsPrimitive from 'recharts';
+export const PsBarChart = RechartsPrimitive.BarChart;
+export const PsBar = RechartsPrimitive.Bar;
+export const PsLineChart = RechartsPrimitive.LineChart;
+export const PsLine = RechartsPrimitive.Line;
+export const PsAreaChart = RechartsPrimitive.AreaChart;
+export const PsArea = RechartsPrimitive.Area;
+export const PsPieChart = RechartsPrimitive.PieChart;
+export const PsPie = RechartsPrimitive.Pie;
+export const PsCell = RechartsPrimitive.Cell;
+export const PsXAxis = RechartsPrimitive.XAxis;
+export const PsYAxis = RechartsPrimitive.YAxis;
+export const PsCartesianGrid = RechartsPrimitive.CartesianGrid;
+export const PsLabelList = RechartsPrimitive.LabelList;

package/dist/esm/components/ps-chart-style.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PsChartService } from '../services/ps-chart-service.js';
+export const PsChartStyle = ({ id, config }) => {
+    const css = PsChartService.css(id, config);
+    if (css === '')
+        return null;
+    return _jsx("style", { dangerouslySetInnerHTML: { __html: css } });
+};

package/dist/esm/components/ps-chart-tooltip-content.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from 'react';
+import { PsChartDefaults } from '../constants/ps-chart-defaults.js';
+import { usePsChart } from '../hooks/use-ps-chart.js';
+import { PsChartService } from '../services/ps-chart-service.js';
+import { PsClassNameService } from '../services/ps-class-name-service.js';
+export const PsChartTooltipContent = ({ active, payload, className, indicator = 'dot', hideLabel = false, hideIndicator = false, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, }) => {
+    const { config } = usePsChart();
+    const tooltipLabel = React.useMemo(() => {
+        if (hideLabel || payload === undefined || payload.length === 0)
+            return null;
+        const [item] = payload;
+        const key = `${labelKey !== undefined ? labelKey : item.dataKey !== undefined ? String(item.dataKey) : item.name !== undefined ? String(item.name) : PsChartDefaults.valueKey}`;
+        const itemConfig = PsChartService.itemFor(config, item, key);
+        const value = labelKey === undefined && typeof label === 'string' && label in config
+            ? config[label].label
+            : itemConfig !== undefined
+                ? itemConfig.label
+                : undefined;
+        if (labelFormatter !== undefined)
+            return (_jsx("div", { className: PsClassNameService.merge('font-medium', labelClassName), children: labelFormatter(value !== undefined ? value : label, payload) }));
+        if (value === undefined && label === undefined)
+            return null;
+        return (_jsx("div", { className: PsClassNameService.merge('font-medium', labelClassName), children: value !== undefined ? value : label }));
+    }, [label, labelFormatter, payload, hideLabel, labelClassName, config, labelKey]);
+    if (active !== true || payload === undefined || payload.length === 0)
+        return null;
+    const nestLabel = payload.length === 1 && indicator !== 'dot';
+    return (_jsxs("div", { className: PsClassNameService.merge('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), children: [nestLabel ? null : tooltipLabel, _jsx("div", { className: 'grid gap-1.5', children: payload.map((item, index) => {
+                    const key = `${nameKey !== undefined ? nameKey : item.name !== undefined ? String(item.name) : item.dataKey !== undefined ? String(item.dataKey) : PsChartDefaults.valueKey}`;
+                    const itemConfig = PsChartService.itemFor(config, item, key);
+                    const payloadFill = typeof item.payload === 'object' && item.payload !== null && 'fill' in item.payload
+                        ? String(item.payload.fill)
+                        : undefined;
+                    const indicatorColor = color !== undefined ? color : payloadFill !== undefined ? payloadFill : item.color;
+                    return (_jsx("div", { className: PsClassNameService.merge('flex w-full flex-wrap items-stretch gap-2 [&>svg]:size-2.5 [&>svg]:text-muted-foreground', indicator === 'dot' && 'items-center'), children: formatter !== undefined && item.value !== undefined && item.name !== undefined ? (formatter(item.value, item.name, item, index, payload)) : (_jsxs(_Fragment, { children: [itemConfig !== undefined && itemConfig.icon !== undefined ? (_jsx(itemConfig.icon, {})) : hideIndicator ? null : (_jsx("div", { className: PsClassNameService.merge('shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]', indicator === 'dot' && 'size-2.5', indicator === 'line' && 'w-1', indicator === 'dashed' && 'w-0 border-[1.5px] border-dashed bg-transparent', nestLabel && indicator === 'dashed' && 'my-0.5'), style: {
+                                        '--color-bg': indicatorColor,
+                                        '--color-border': indicatorColor,
+                                    } })), _jsxs("div", { className: PsClassNameService.merge('flex flex-1 justify-between leading-none', nestLabel ? 'items-end' : 'items-center'), children: [_jsxs("div", { className: 'grid gap-1.5', children: [nestLabel ? tooltipLabel : null, _jsx("span", { className: 'text-muted-foreground', children: itemConfig !== undefined && itemConfig.label !== undefined
+                                                        ? itemConfig.label
+                                                        : item.name })] }), item.value !== undefined ? (_jsx("span", { className: 'font-mono font-medium tabular-nums text-foreground', children: typeof item.value === 'number'
+                                                ? item.value.toLocaleString()
+                                                : String(item.value) })) : null] })] })) }, String(item.dataKey)));
+                }) })] }));
+};

package/dist/esm/components/ps-chart-tooltip.js

@@ -0,0 +1,2 @@
+import * as RechartsPrimitive from 'recharts';
+export const PsChartTooltip = RechartsPrimitive.Tooltip;