@pallasoft/ps-core-components 1.0.0

package/LICENSE

@@ -0,0 +1,32 @@
+Pallasoft Proprietary License
+
+Version 1.0, 23-Jan-2024
+
+1. Grant of License:
+   Pallasoft grants you a non-exclusive, non-transferable, revocable license to use the software, solely for internal business purposes.
+
+2. Restrictions:
+   You may not:
+   a. Distribute or sublicense the software to third parties.
+   b. Reverse engineer, decompile, or disassemble the software.
+   c. Remove or alter any proprietary notices or labels on the software.
+
+3. Ownership:
+   Pallasoft retains all right, title, and interest in and to the software, including all intellectual property rights.
+
+4. Confidentiality:
+   You agree to keep the software confidential and not disclose it to third parties.
+
+5. Support and Updates:
+   This license does not entitle you to support or updates. Pallasoft may, at its discretion, provide support and updates.
+
+6. Termination:
+   This license is effective until terminated. Pallasoft may terminate the license at any time if you breach any terms. Upon termination, you must cease using the software.
+
+7. Governing Law:
+   This license is governed by the Canadian Laws. Any disputes arising out of this license shall be resolved in the courts of Canada.
+
+8. Contact Information:
+   For inquiries regarding this license, contact operations@pallasoft.com.
+
+[End of License]

package/README.md

@@ -0,0 +1,10 @@
+# @pallasoft/ps-core-components
+
+Shared Pallasoft core components package.
+
+## Scripts
+
+- `npm run build` compiles the package into `dist`.
+- `npm run lint` runs ESLint using the shared package baseline.
+- `npm run format:check` checks Prettier formatting.
+- `npm run release` publishes through semantic-release.

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

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+export interface PsAccordionProps {
+    children: ReactNode;
+    className?: string;
+    isOpen: boolean;
+    label: ReactNode;
+    onToggle: () => void;
+    trailing?: ReactNode;
+}
+export declare const PsAccordion: ({ children, className, isOpen, label, onToggle, trailing, }: PsAccordionProps) => import("react").JSX.Element;

package/dist/components/ps-accordion.js

@@ -0,0 +1,41 @@
+"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.PsAccordion = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const AccordionPrimitive = __importStar(require("@radix-ui/react-accordion"));
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const PsAccordion = ({ children, className, isOpen, label, onToggle, trailing, }) => ((0, jsx_runtime_1.jsx)(AccordionPrimitive.Root, { type: 'single', collapsible: true, value: isOpen ? 'open' : '', onValueChange: onToggle, className: ps_design_system_1.PallasoftClassNameService.merge('overflow-hidden rounded-2xl border border-line/70 bg-mist/60', className), children: (0, jsx_runtime_1.jsxs)(AccordionPrimitive.Item, { value: 'open', children: [(0, jsx_runtime_1.jsx)(AccordionPrimitive.Header, { children: (0, jsx_runtime_1.jsxs)(AccordionPrimitive.Trigger, { className: 'ps-focus-ring flex w-full items-center justify-between gap-3 px-4 py-3.5', children: [(0, jsx_runtime_1.jsx)("span", { className: 'text-body-2 font-semibold text-ink', children: label }), trailing] }) }), (0, jsx_runtime_1.jsx)(AccordionPrimitive.Content, { className: 'ps-accordion-content', children: (0, jsx_runtime_1.jsx)("div", { className: 'border-t border-line/70 p-4', children: children }) })] }) }));
+exports.PsAccordion = PsAccordion;

package/dist/components/ps-action-tile.d.ts

@@ -0,0 +1,8 @@
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+export interface PsActionTileProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    description?: string;
+    icon?: ReactNode;
+    label: string;
+    variant?: 'default' | 'primary';
+}
+export declare const PsActionTile: ({ className, description, icon, label, type, variant, ...props }: PsActionTileProps) => import("react").JSX.Element;

package/dist/components/ps-action-tile.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsActionTile = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const variantClassNames = {
+    default: 'ps-action-tile',
+    primary: 'ps-action-tile ps-action-tile-primary',
+};
+const PsActionTile = ({ className, description, icon, label, type = 'button', variant = 'default', ...props }) => ((0, jsx_runtime_1.jsxs)("button", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-focus-ring w-full', variantClassNames[variant], className), type: type, ...props, children: [(0, jsx_runtime_1.jsxs)("span", { className: 'min-w-0', children: [(0, jsx_runtime_1.jsx)("span", { className: 'block break-words', children: label }), description ? ((0, jsx_runtime_1.jsx)("span", { className: ps_design_system_1.PallasoftClassNameService.merge('mt-0.5 block text-xs font-medium leading-5', variant === 'primary' ? 'text-white/75' : 'text-ink/50'), children: description })) : null] }), icon ? ((0, jsx_runtime_1.jsx)("span", { className: ps_design_system_1.PallasoftClassNameService.merge('flex h-9 w-9 shrink-0 items-center justify-center rounded-lg', variant === 'primary' ? 'bg-white/15 text-white' : 'ps-icon-surface'), children: icon })) : null] }));
+exports.PsActionTile = PsActionTile;

package/dist/components/ps-audio-spectrum.d.ts

@@ -0,0 +1,5 @@
+export interface PsAudioSpectrumProps {
+    className?: string;
+    levels: number[];
+}
+export declare const PsAudioSpectrum: (props: PsAudioSpectrumProps) => import("react").JSX.Element;

package/dist/components/ps-audio-spectrum.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsAudioSpectrum = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const MinBarHeightPercent = 10;
+const PsAudioSpectrum = (props) => {
+    return ((0, jsx_runtime_1.jsx)("div", { className: ps_design_system_1.PallasoftClassNameService.merge('flex h-full w-full items-end gap-2', props.className), children: props.levels.map((level, index) => {
+            const heightPercent = MinBarHeightPercent + Math.max(0, Math.min(1, level)) * (100 - MinBarHeightPercent);
+            return ((0, jsx_runtime_1.jsx)("span", { className: 'min-w-0 flex-1 rounded-full bg-[linear-gradient(180deg,_rgb(var(--ps-color-primary-rgb)/0.25)_0%,_rgb(var(--ps-color-primary-rgb))_100%)] transition-[height] duration-100 ease-out', style: { height: `${heightPercent}%` } }, index));
+        }) }));
+};
+exports.PsAudioSpectrum = PsAudioSpectrum;

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

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+export interface PsBadgeProps {
+    children: ReactNode;
+    className?: string;
+    tone?: 'danger' | 'neutral' | 'primary' | 'success' | 'warning';
+}
+export declare const PsBadge: ({ children, className, tone }: PsBadgeProps) => import("react").JSX.Element;

package/dist/components/ps-badge.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsBadge = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const toneClassNames = {
+    danger: 'bg-danger-soft text-danger dark:bg-rose-500/18 dark:text-rose-100',
+    neutral: 'bg-slate-100 text-slate-700 dark:bg-white/10 dark:text-slate-100',
+    primary: 'bg-primary-soft text-primary dark:bg-primary/22 dark:text-white',
+    success: 'bg-success-soft text-emerald-700 dark:bg-emerald-400/18 dark:text-emerald-50',
+    warning: 'bg-warning-soft text-amber-800 dark:bg-amber-400/18 dark:text-amber-50',
+};
+const PsBadge = ({ children, className, tone = 'neutral' }) => ((0, jsx_runtime_1.jsx)("span", { className: ps_design_system_1.PallasoftClassNameService.merge('inline-flex min-h-8 min-w-[5.5rem] w-fit items-center justify-center rounded-full px-5 py-1 text-center text-[0.72rem] font-black capitalize tracking-[0.01em]', toneClassNames[tone], className), children: children }));
+exports.PsBadge = PsBadge;

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

@@ -0,0 +1,11 @@
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+export interface PsButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    children: ReactNode;
+    isLoading?: boolean;
+    leadingIcon?: ReactNode;
+    loadingLabel?: string;
+    size?: 'compact' | 'default' | 'large';
+    trailingIcon?: ReactNode;
+    variant?: 'danger' | 'ghost' | 'primary' | 'secondary' | 'surface';
+}
+export declare const PsButton: ({ children, className, disabled, isLoading, leadingIcon, loadingLabel, size, trailingIcon, type, variant, ...props }: PsButtonProps) => import("react").JSX.Element;

package/dist/components/ps-button.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const sizeClassNames = {
+    compact: 'min-h-9 px-3 py-2 text-sm',
+    default: 'min-h-10 px-4 py-2.5 text-sm',
+    large: 'min-h-11 px-5 py-3 text-sm',
+};
+const variantClassNames = {
+    danger: 'border-danger bg-danger text-white hover:opacity-90',
+    ghost: 'border-transparent bg-transparent text-ink/60 hover:text-ink',
+    primary: 'border-primary bg-primary text-white',
+    secondary: 'ps-liquid ps-liquid-control bg-white/72 text-ink hover:border-primary/30 hover:text-primary dark:border-white/16 dark:bg-white/12 dark:hover:text-white',
+    surface: 'ps-liquid ps-liquid-control bg-white/72 text-ink hover:border-primary/30 dark:border-white/16 dark:bg-white/12',
+};
+const PsButton = ({ children, className, disabled, isLoading = false, leadingIcon, loadingLabel, size = 'default', trailingIcon, type = 'button', variant = 'secondary', ...props }) => ((0, jsx_runtime_1.jsxs)("button", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-focus-ring inline-flex max-w-full items-center justify-center gap-2 rounded-full border text-center font-semibold disabled:cursor-not-allowed disabled:opacity-50', sizeClassNames[size], variantClassNames[variant], className), "aria-busy": isLoading || undefined, disabled: disabled || isLoading, type: type, ...props, children: [isLoading ? ((0, jsx_runtime_1.jsx)("span", { "aria-hidden": 'true', className: 'h-4 w-4 shrink-0 animate-spin rounded-full border-2 border-current border-t-transparent' })) : leadingIcon ? ((0, jsx_runtime_1.jsx)("span", { className: 'shrink-0', children: leadingIcon })) : null, (0, jsx_runtime_1.jsx)("span", { className: 'truncate', children: isLoading && loadingLabel ? loadingLabel : children }), !isLoading && trailingIcon ? (0, jsx_runtime_1.jsx)("span", { className: 'shrink-0', children: trailingIcon }) : null] }));
+exports.PsButton = PsButton;

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

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+export interface PsCardProps {
+    children: ReactNode;
+    className?: string;
+    density?: 'compact' | 'normal' | 'spacious';
+    eyebrow?: string;
+    title?: string;
+    trailing?: ReactNode;
+    variant?: 'default' | 'elevated' | 'glass' | 'muted';
+}
+export declare const PsCard: ({ children, className, density, eyebrow, title, trailing, variant, }: PsCardProps) => import("react").JSX.Element;

package/dist/components/ps-card.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsCard = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const densityClassNames = {
+    compact: 'p-3',
+    normal: 'p-4',
+    spacious: 'p-5',
+};
+const variantClassNames = {
+    default: 'ps-card',
+    elevated: 'ps-card',
+    glass: 'ps-glass',
+    muted: 'ps-card-muted',
+};
+const PsCard = ({ children, className, density = 'normal', eyebrow, title, trailing, variant = 'default', }) => ((0, jsx_runtime_1.jsxs)("section", { className: ps_design_system_1.PallasoftClassNameService.merge('min-w-0 overflow-hidden rounded-ps-card', variantClassNames[variant], densityClassNames[density], className), children: [title ? ((0, jsx_runtime_1.jsxs)("div", { className: 'mb-3 flex min-w-0 items-start justify-between gap-3', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'min-w-0', children: [eyebrow ? ((0, jsx_runtime_1.jsx)("p", { className: 'ps-eyebrow break-words', children: eyebrow })) : null, (0, jsx_runtime_1.jsx)("h2", { className: 'mt-1 break-words text-base font-bold text-ink', children: title })] }), trailing ? (0, jsx_runtime_1.jsx)("div", { className: 'shrink-0', children: trailing }) : null] })) : null, children] }));
+exports.PsCard = PsCard;

package/dist/components/ps-draggable-grid.d.ts

@@ -0,0 +1,19 @@
+import type { JSX } from 'react';
+export interface PsDraggableGridItem {
+    id: string;
+    label: string;
+}
+export interface PsDraggableGridRenderOptions<TItem extends PsDraggableGridItem> {
+    handle: JSX.Element;
+    index: number;
+    isDragging: boolean;
+    item: TItem;
+}
+export interface PsDraggableGridProps<TItem extends PsDraggableGridItem> {
+    getItemClassName?: (item: TItem) => string;
+    items: TItem[];
+    onReorder: (items: TItem[]) => void;
+    onReorderEnd?: (items: TItem[]) => void;
+    renderItem: (options: PsDraggableGridRenderOptions<TItem>) => JSX.Element | null;
+}
+export declare const PsDraggableGrid: <TItem extends PsDraggableGridItem>({ getItemClassName, items, onReorder, onReorderEnd, renderItem, }: PsDraggableGridProps<TItem>) => JSX.Element;

package/dist/components/ps-draggable-grid.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsDraggableGrid = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const moveItem = (items, fromIndex, toIndex) => {
+    const nextItems = [...items];
+    const [movingItem] = nextItems.splice(fromIndex, 1);
+    nextItems.splice(toIndex, 0, movingItem);
+    return nextItems;
+};
+let draggedItemId;
+let latestItems = [];
+const DragHandleIcon = () => ((0, jsx_runtime_1.jsx)("span", { "aria-hidden": 'true', className: 'grid grid-cols-2 gap-[0.1875rem]', children: Array.from({ length: 6 }).map((_, index) => ((0, jsx_runtime_1.jsx)("span", { className: 'h-0.5 w-0.5 rounded-full bg-current' }, index))) }));
+const PsDraggableGrid = ({ getItemClassName, items, onReorder, onReorderEnd, renderItem, }) => {
+    latestItems = items;
+    const finishDrag = () => {
+        if (!draggedItemId)
+            return;
+        draggedItemId = undefined;
+        onReorderEnd?.(latestItems);
+    };
+    const moveDraggedItemTo = (targetItemId) => {
+        if (!draggedItemId || draggedItemId === targetItemId)
+            return;
+        const currentItems = latestItems;
+        const fromIndex = currentItems.findIndex((item) => item.id === draggedItemId);
+        const toIndex = currentItems.findIndex((item) => item.id === targetItemId);
+        if (fromIndex < 0 || toIndex < 0 || fromIndex === toIndex)
+            return;
+        const nextItems = moveItem(currentItems, fromIndex, toIndex);
+        latestItems = nextItems;
+        onReorder(nextItems);
+    };
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: items.map((item, index) => {
+            const isDragging = false;
+            const handle = ((0, jsx_runtime_1.jsx)("button", { "aria-label": `Move ${item.label}`, className: 'ps-focus-ring inline-flex h-6 w-6 shrink-0 cursor-grab items-center justify-center rounded-full text-slate-400/55 opacity-45 transition hover:bg-white/36 hover:text-slate-600 hover:opacity-90 active:cursor-grabbing dark:text-slate-300/45 dark:hover:bg-white/8 dark:hover:text-slate-100', draggable: true, onDragEnd: finishDrag, onDragStart: (event) => {
+                    event.dataTransfer.effectAllowed = 'move';
+                    event.dataTransfer.setData('text/plain', item.id);
+                    draggedItemId = item.id;
+                }, title: `Move ${item.label}`, type: 'button', children: (0, jsx_runtime_1.jsx)(DragHandleIcon, {}) }));
+            const renderedItem = renderItem({ handle, index, isDragging, item });
+            if (!renderedItem)
+                return null;
+            return ((0, jsx_runtime_1.jsx)("div", { className: `ps-page-enter min-w-0 rounded-[1.7rem] transition ${getItemClassName?.(item) ?? ''} ${isDragging ? 'scale-[0.985] opacity-70' : ''}`, onDragOver: (event) => {
+                    if (!draggedItemId)
+                        return;
+                    event.preventDefault();
+                    event.dataTransfer.dropEffect = 'move';
+                    moveDraggedItemTo(item.id);
+                }, onDrop: (event) => {
+                    event.preventDefault();
+                    finishDrag();
+                }, children: renderedItem }, item.id));
+        }) }));
+};
+exports.PsDraggableGrid = PsDraggableGrid;

package/dist/components/ps-empty-state.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react';
+export interface PsEmptyStateAction {
+    href: string;
+    label: string;
+    variant?: 'primary' | 'secondary';
+}
+export interface PsEmptyStateProps {
+    actions?: PsEmptyStateAction[];
+    badge?: string;
+    className?: string;
+    detail?: string;
+    description: string;
+    eyebrow?: string;
+    icon?: ReactNode;
+    title: string;
+}
+export declare const PsEmptyState: ({ actions, badge, className, detail, description, eyebrow, icon, title, }: PsEmptyStateProps) => import("react").JSX.Element;

package/dist/components/ps-empty-state.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsEmptyState = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const getActionClassName = (variant = 'secondary') => {
+    if (variant === 'primary') {
+        return 'border-primary bg-primary text-white hover:bg-primary-dark';
+    }
+    return 'border-line bg-surface text-ink hover:border-primary/40 hover:text-primary';
+};
+const PsEmptyState = ({ actions = [], badge, className, detail, description, eyebrow, icon, title, }) => ((0, jsx_runtime_1.jsx)("main", { className: ps_design_system_1.PallasoftClassNameService.merge('relative flex min-h-screen items-center justify-center bg-mist px-4 py-10 text-ink', className), children: (0, jsx_runtime_1.jsx)("section", { className: 'ps-card relative w-full max-w-2xl p-6 sm:p-8', children: (0, jsx_runtime_1.jsxs)("div", { className: 'flex flex-col gap-5 sm:flex-row sm:items-start', children: [icon ? ((0, jsx_runtime_1.jsx)("div", { className: 'ps-icon-surface h-14 w-14', children: icon })) : null, (0, jsx_runtime_1.jsxs)("div", { className: 'min-w-0 flex-1', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'flex flex-wrap items-center gap-2', children: [eyebrow ? ((0, jsx_runtime_1.jsx)("p", { className: 'text-xs font-semibold uppercase tracking-[0.22em] text-primary', children: eyebrow })) : null, eyebrow && badge ? (0, jsx_runtime_1.jsx)("span", { className: 'h-1 w-1 rounded-full bg-line' }) : null, badge ? ((0, jsx_runtime_1.jsx)("p", { className: 'text-xs font-semibold uppercase tracking-[0.22em] text-ink/40', children: badge })) : null] }), (0, jsx_runtime_1.jsx)("h1", { className: 'mt-3 text-3xl font-semibold tracking-tight sm:text-4xl', children: title }), (0, jsx_runtime_1.jsx)("p", { className: 'mt-3 text-sm leading-6 text-ink/60', children: description }), detail ? ((0, jsx_runtime_1.jsx)("p", { className: 'mt-4 rounded-2xl border border-line bg-mist px-4 py-3 text-left text-xs leading-5 text-ink/60', children: detail })) : null, actions.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: 'mt-6 flex flex-col gap-2 sm:flex-row', children: actions.map((action) => ((0, jsx_runtime_1.jsx)("a", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-focus-ring ps-pressable inline-flex items-center justify-center rounded-ps-control border px-4 py-3 text-sm font-semibold', getActionClassName(action.variant)), href: action.href, children: action.label }, `${action.href}-${action.label}`))) })) : null] })] }) }) }));
+exports.PsEmptyState = PsEmptyState;

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

@@ -0,0 +1,5 @@
+import type { PsButtonProps } from './ps-button';
+export interface PsFabProps extends PsButtonProps {
+    position?: 'bottom-center' | 'bottom-left' | 'bottom-right';
+}
+export declare const PsFab: ({ className, position, ...props }: PsFabProps) => import("react").JSX.Element;

package/dist/components/ps-fab.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsFab = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const ps_button_1 = require("./ps-button");
+const positionClassNames = {
+    'bottom-right': 'bottom-6 right-6',
+    'bottom-left': 'bottom-6 left-6',
+    'bottom-center': 'bottom-6 left-1/2 -translate-x-1/2',
+};
+const PsFab = ({ className, position = 'bottom-right', ...props }) => ((0, jsx_runtime_1.jsx)(ps_button_1.PsButton, { size: 'large', variant: 'primary', className: ps_design_system_1.PallasoftClassNameService.merge('fixed z-docked h-14 w-14 shrink-0 !px-0 shadow-lg', positionClassNames[position], className), ...props }));
+exports.PsFab = PsFab;

package/dist/components/ps-infinite-scroll.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+export interface PsInfiniteScrollProps {
+    children: ReactNode;
+    className?: string;
+    dataLength: number;
+    hasMore: boolean;
+    loader?: ReactNode;
+    next: () => void;
+}
+export declare const PsInfiniteScroll: ({ children, className, dataLength, hasMore, loader, next, }: PsInfiniteScrollProps) => import("react").JSX.Element;

package/dist/components/ps-infinite-scroll.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsInfiniteScroll = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_infinite_scroll_component_1 = __importDefault(require("react-infinite-scroll-component"));
+const ps_spinner_1 = require("./ps-spinner");
+const defaultLoader = ((0, jsx_runtime_1.jsx)("div", { className: 'flex w-full justify-center py-8', children: (0, jsx_runtime_1.jsx)(ps_spinner_1.PsSpinner, {}) }));
+const PsInfiniteScroll = ({ children, className, dataLength, hasMore, loader, next, }) => ((0, jsx_runtime_1.jsx)(react_infinite_scroll_component_1.default, { className: className, dataLength: dataLength, hasMore: hasMore, loader: loader ?? defaultLoader, next: next, children: children }));
+exports.PsInfiniteScroll = PsInfiniteScroll;

package/dist/components/ps-list-tile.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+export interface PsListTileProps {
+    children?: ReactNode;
+    className?: string;
+    density?: 'compact' | 'normal';
+    eyebrow?: string;
+    isPrivateTitle?: boolean;
+    subtitle?: string;
+    title: ReactNode;
+    variant?: 'card' | 'row';
+}
+export declare const PsListTile: ({ children, className, density, eyebrow, isPrivateTitle, subtitle, title, variant, }: PsListTileProps) => import("react").JSX.Element;

package/dist/components/ps-list-tile.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsListTile = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const densityClassNames = {
+    compact: 'py-2',
+    normal: 'py-2.5',
+};
+const variantClassNames = {
+    card: 'ps-surface px-3',
+    row: 'border-b border-line/70 px-0 last:border-b-0',
+};
+const PsListTile = ({ children, className, density = 'normal', eyebrow, isPrivateTitle = false, subtitle, title, variant = 'row', }) => ((0, jsx_runtime_1.jsxs)("div", { className: ps_design_system_1.PallasoftClassNameService.merge('min-w-0 overflow-hidden', variantClassNames[variant], densityClassNames[density], className), children: [eyebrow ? ((0, jsx_runtime_1.jsx)("p", { className: 'ps-eyebrow break-words', children: eyebrow })) : null, (0, jsx_runtime_1.jsx)("p", { className: ps_design_system_1.PallasoftClassNameService.merge('break-words text-sm font-semibold text-ink', eyebrow && 'mt-1', isPrivateTitle && 'private-number'), children: title }), subtitle ? (0, jsx_runtime_1.jsx)("p", { className: 'mt-1 break-words text-sm leading-5 text-slate-500', children: subtitle }) : null, children] }));
+exports.PsListTile = PsListTile;

package/dist/components/ps-metric-card.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+export interface PsMetricCardProps {
+    changeLabel?: string;
+    className?: string;
+    icon?: ReactNode;
+    label: string;
+    value: ReactNode;
+}
+export declare const PsMetricCard: ({ changeLabel, className, icon, label, value, }: PsMetricCardProps) => import("react").JSX.Element;

package/dist/components/ps-metric-card.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsMetricCard = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const PsMetricCard = ({ changeLabel, className, icon, label, value, }) => ((0, jsx_runtime_1.jsx)("section", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-metric-card min-w-0 p-3.5 sm:p-4', className), children: (0, jsx_runtime_1.jsxs)("div", { className: 'flex items-start justify-between gap-3', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'min-w-0', children: [(0, jsx_runtime_1.jsx)("p", { className: 'ps-eyebrow truncate', children: label }), (0, jsx_runtime_1.jsx)("p", { className: 'mt-2 truncate text-2xl font-semibold text-ink', children: value }), changeLabel ? (0, jsx_runtime_1.jsx)("p", { className: 'mt-1 text-sm text-slate-500', children: changeLabel }) : null] }), icon ? ((0, jsx_runtime_1.jsx)("div", { className: 'flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-primary-soft text-primary', children: icon })) : null] }) }));
+exports.PsMetricCard = PsMetricCard;

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

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+export interface PsPillProps {
+    children: ReactNode;
+    className?: string;
+    tone?: 'danger' | 'neutral' | 'primary' | 'success' | 'warning';
+}
+export declare const PsPill: ({ children, className, tone }: PsPillProps) => import("react").JSX.Element;

package/dist/components/ps-pill.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsPill = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const toneClassNames = {
+    danger: 'bg-rose-50 text-rose-700 ring-rose-100 dark:bg-rose-500/18 dark:text-rose-100 dark:ring-rose-300/22',
+    neutral: 'bg-slate-100 text-slate-700 ring-slate-200 dark:bg-white/10 dark:text-slate-100 dark:ring-white/12',
+    primary: 'bg-primary-soft text-primary ring-primary/12 dark:bg-primary/22 dark:text-white dark:ring-primary/32',
+    success: 'bg-emerald-50 text-emerald-700 ring-emerald-100 dark:bg-emerald-400/18 dark:text-emerald-50 dark:ring-emerald-200/22',
+    warning: 'bg-amber-50 text-amber-800 ring-amber-100 dark:bg-amber-400/18 dark:text-amber-50 dark:ring-amber-200/24',
+};
+const PsPill = ({ children, className, tone = 'neutral' }) => ((0, jsx_runtime_1.jsx)("span", { className: ps_design_system_1.PallasoftClassNameService.merge('inline-flex min-h-8 min-w-[5.5rem] max-w-full items-center justify-center rounded-full px-5 py-1 text-center text-[0.72rem] font-black capitalize tracking-[0.01em] ring-1 ring-inset', toneClassNames[tone], className), children: (0, jsx_runtime_1.jsx)("span", { className: 'min-w-0 break-words', children: children }) }));
+exports.PsPill = PsPill;

package/dist/components/ps-reflective-app-shell.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+export interface PsReflectiveAppShellProps {
+    children: ReactNode;
+    className?: string;
+    contentClassName?: string;
+    frameClassName?: string;
+    sidebar: ReactNode;
+    topbar: ReactNode;
+}
+export declare const PsReflectiveAppShell: ({ children, className, contentClassName, frameClassName, sidebar, topbar, }: PsReflectiveAppShellProps) => import("react").JSX.Element;

package/dist/components/ps-reflective-app-shell.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsReflectiveAppShell = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const PsReflectiveAppShell = ({ children, className, contentClassName, frameClassName, sidebar, topbar, }) => ((0, jsx_runtime_1.jsx)("section", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-reflective-frame min-h-screen text-ink lg:px-3 lg:py-3', className), children: (0, jsx_runtime_1.jsxs)("div", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-liquid-strong mx-auto grid h-screen min-h-0 overflow-hidden border-line/70 bg-white/70 backdrop-blur-2xl dark:border-white/10 dark:bg-surface/70 lg:h-[calc(100vh-1.5rem)] lg:max-w-[1720px] lg:grid-cols-[17rem_minmax(0,1fr)] lg:rounded-[1.5rem] lg:border', frameClassName), children: [sidebar, (0, jsx_runtime_1.jsxs)("div", { className: 'flex min-h-0 min-w-0 flex-col bg-white/32 dark:bg-white/[0.02]', children: [topbar, (0, jsx_runtime_1.jsx)("main", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-scrollbar min-h-0 flex-1 overflow-y-auto px-4 py-5 ps-page-enter sm:px-5 lg:px-6 xl:px-7', contentClassName), children: children })] })] }) }));
+exports.PsReflectiveAppShell = PsReflectiveAppShell;

package/dist/components/ps-section-header.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react';
+export interface PsSectionHeaderProps {
+    description?: string;
+    eyebrow?: string;
+    title: string;
+    trailing?: ReactNode;
+}
+export declare const PsSectionHeader: ({ description, eyebrow, title, trailing }: PsSectionHeaderProps) => import("react").JSX.Element;

package/dist/components/ps-section-header.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsSectionHeader = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const PsSectionHeader = ({ description, eyebrow, title, trailing }) => ((0, jsx_runtime_1.jsxs)("div", { className: 'flex flex-col justify-between gap-3 lg:flex-row lg:items-end', children: [(0, jsx_runtime_1.jsxs)("div", { children: [eyebrow ? ((0, jsx_runtime_1.jsx)("p", { className: 'text-[0.68rem] font-semibold uppercase tracking-[0.22em] text-slate-400', children: eyebrow })) : null, (0, jsx_runtime_1.jsx)("h1", { className: 'text-2xl font-extrabold text-ink', children: title }), description ? (0, jsx_runtime_1.jsx)("p", { className: 'mt-2 max-w-3xl text-sm leading-6 text-slate-500', children: description }) : null] }), trailing] }));
+exports.PsSectionHeader = PsSectionHeader;

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

@@ -0,0 +1,4 @@
+export interface PsSkeletonProps {
+    className?: string;
+}
+export declare const PsSkeleton: ({ className }: PsSkeletonProps) => import("react").JSX.Element;

package/dist/components/ps-skeleton.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsSkeleton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const PsSkeleton = ({ className }) => ((0, jsx_runtime_1.jsx)("div", { className: ps_design_system_1.PallasoftClassNameService.merge('animate-pulse rounded-full bg-mist', className) }));
+exports.PsSkeleton = PsSkeleton;

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

@@ -0,0 +1,6 @@
+import type { HTMLAttributes } from 'react';
+export interface PsSpinnerProps extends HTMLAttributes<HTMLDivElement> {
+    label?: string;
+    size?: 'default' | 'large' | 'small';
+}
+export declare const PsSpinner: ({ className, label, size, ...props }: PsSpinnerProps) => import("react").JSX.Element;

package/dist/components/ps-spinner.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsSpinner = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const sizeClassNames = {
+    small: 'h-4 w-4 border-2',
+    default: 'h-6 w-6 border-2',
+    large: 'h-8 w-8 border-[3px]',
+};
+const PsSpinner = ({ className, label = 'Loading', size = 'default', ...props }) => ((0, jsx_runtime_1.jsxs)("div", { className: ps_design_system_1.PallasoftClassNameService.merge('inline-flex items-center justify-center', className), ...props, children: [(0, jsx_runtime_1.jsx)("span", { "aria-hidden": 'true', className: ps_design_system_1.PallasoftClassNameService.merge('shrink-0 animate-spin rounded-full border-current border-t-transparent text-primary', sizeClassNames[size]) }), (0, jsx_runtime_1.jsx)("span", { className: 'sr-only', children: label })] }));
+exports.PsSpinner = PsSpinner;

package/dist/components/ps-theme-toggle.d.ts

@@ -0,0 +1,6 @@
+import { PallasoftThemeMode } from '@pallasoft/ps-design-system';
+import type { ButtonHTMLAttributes } from 'react';
+export interface PsThemeToggleProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    mode: PallasoftThemeMode;
+}
+export declare const PsThemeToggle: ({ className, mode, type, ...props }: PsThemeToggleProps) => import("react").JSX.Element;

package/dist/components/ps-theme-toggle.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsThemeToggle = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const ps_icons_1 = require("@pallasoft/ps-icons");
+const PsThemeToggle = ({ className, mode, type = 'button', ...props }) => {
+    const isDarkMode = mode === ps_design_system_1.PallasoftThemeMode.Dark;
+    return ((0, jsx_runtime_1.jsxs)("button", { "aria-label": isDarkMode ? 'Switch to light mode' : 'Switch to dark mode', className: ps_design_system_1.PallasoftClassNameService.merge('ps-focus-ring ps-glass flex h-11 items-center gap-2 rounded-2xl px-3 text-sm font-bold text-ink transition hover:border-primary/30 hover:text-primary', className), type: type, ...props, children: [(0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { className: 'h-5 w-5', iconKey: isDarkMode ? 'sun' : 'moon' }), (0, jsx_runtime_1.jsx)("span", { className: 'hidden sm:inline', children: ps_design_system_1.PallasoftThemeModeService.getNextMode(mode) === ps_design_system_1.PallasoftThemeMode.Dark ? 'Dark' : 'Light' })] }));
+};
+exports.PsThemeToggle = PsThemeToggle;

package/dist/components/ps-voice-orb.d.ts

@@ -0,0 +1,7 @@
+export interface PsVoiceOrbProps {
+    className?: string;
+    level?: number;
+    size?: number;
+    variant?: 'default' | 'error';
+}
+export declare const PsVoiceOrb: (props: PsVoiceOrbProps) => import("react").JSX.Element;

package/dist/components/ps-voice-orb.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsVoiceOrb = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const clamp = (value, min, max) => Math.max(min, Math.min(max, value));
+const PsVoiceOrb = (props) => {
+    const size = typeof props.size === 'number' ? props.size : 64;
+    const level = typeof props.level === 'number' ? clamp(props.level, 0, 1) : 0;
+    const isError = props.variant === 'error';
+    const glowGradient = isError
+        ? 'radial-gradient(circle, rgb(var(--ps-color-danger-rgb) / 0.55), rgb(var(--ps-color-danger-rgb) / 0.2) 70%, transparent)'
+        : 'radial-gradient(circle, rgb(var(--ps-color-primary-rgb) / 0.55), rgb(var(--ps-color-secondary-rgb) / 0.35) 70%, transparent)';
+    const coreGradient = isError
+        ? 'linear-gradient(135deg, rgb(var(--ps-color-danger-rgb)), rgb(var(--ps-color-danger-rgb) / 0.75))'
+        : 'linear-gradient(135deg, rgb(var(--ps-color-primary-rgb)), rgb(var(--ps-color-primary-dark-rgb)))';
+    return ((0, jsx_runtime_1.jsxs)("span", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-voice-orb relative inline-flex shrink-0 items-center justify-center', props.className), style: { width: size, height: size }, children: [(0, jsx_runtime_1.jsx)("style", { children: `
+				@keyframes ps-voice-orb-breathe {
+					0%, 100% { transform: scale(1); }
+					50% { transform: scale(1.06); }
+				}
+				@keyframes ps-voice-orb-drift {
+					0%, 100% { border-radius: 46% 54% 58% 42% / 44% 46% 54% 56%; }
+					50% { border-radius: 54% 46% 42% 58% / 56% 44% 56% 44%; }
+				}
+				.ps-voice-orb-glow {
+					animation: ps-voice-orb-drift 9s ease-in-out infinite;
+				}
+				.ps-voice-orb-core {
+					animation: ps-voice-orb-breathe 3.2s ease-in-out infinite;
+				}
+			` }), (0, jsx_runtime_1.jsx)("span", { className: 'ps-voice-orb-glow absolute inset-[10%] blur-md transition-transform duration-150 ease-out', style: {
+                    background: glowGradient,
+                    transform: `scale(${1 + level * 0.55})`,
+                } }), (0, jsx_runtime_1.jsx)("span", { className: 'ps-voice-orb-core absolute inset-[26%] flex items-center justify-center rounded-full shadow-lg transition-transform duration-150 ease-out', style: {
+                    background: coreGradient,
+                    transform: `scale(${1 + level * 0.28})`,
+                }, children: (0, jsx_runtime_1.jsx)("span", { className: 'h-[28%] w-[28%] rounded-full bg-white/70' }) })] }));
+};
+exports.PsVoiceOrb = PsVoiceOrb;

package/dist/hooks/use-ps-audio-spectrum.d.ts

@@ -0,0 +1,9 @@
+export interface UsePsAudioSpectrumOptions {
+    barCount?: number;
+    fftSize?: number;
+    smoothing?: number;
+}
+export interface UsePsAudioSpectrum {
+    levels: number[];
+}
+export declare const usePsAudioSpectrum: (audioElement: HTMLAudioElement | null, options?: UsePsAudioSpectrumOptions) => UsePsAudioSpectrum;

package/dist/hooks/use-ps-audio-spectrum.js

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePsAudioSpectrum = void 0;
+const react_1 = require("react");
+const DefaultBarCount = 12;
+const DefaultFftSize = 128;
+const DefaultSmoothing = 0.75;
+const usePsAudioSpectrum = (audioElement, options = {}) => {
+    const barCount = typeof options.barCount === 'number' ? options.barCount : DefaultBarCount;
+    const fftSize = typeof options.fftSize === 'number' ? options.fftSize : DefaultFftSize;
+    const smoothing = typeof options.smoothing === 'number' ? options.smoothing : DefaultSmoothing;
+    const [levels, setLevels] = (0, react_1.useState)(() => Array(barCount).fill(0));
+    const configRef = (0, react_1.useRef)({ barCount, fftSize, smoothing });
+    configRef.current = { barCount, fftSize, smoothing };
+    (0, react_1.useEffect)(() => {
+        if (!audioElement)
+            return;
+        const AudioContextClass = typeof window === 'undefined'
+            ? undefined
+            : window.AudioContext || window.webkitAudioContext;
+        if (!AudioContextClass)
+            return;
+        const audioContext = new AudioContextClass();
+        const analyser = audioContext.createAnalyser();
+        analyser.fftSize = configRef.current.fftSize;
+        analyser.smoothingTimeConstant = configRef.current.smoothing;
+        const source = audioContext.createMediaElementSource(audioElement);
+        source.connect(analyser);
+        analyser.connect(audioContext.destination);
+        const buffer = new Uint8Array(analyser.frequencyBinCount);
+        let animationFrame;
+        const tick = () => {
+            analyser.getByteFrequencyData(buffer);
+            const activeBarCount = configRef.current.barCount;
+            const binsPerBar = Math.max(1, Math.floor(buffer.length / activeBarCount));
+            const nextLevels = [];
+            for (let bar = 0; bar < activeBarCount; bar++) {
+                let sum = 0;
+                const start = bar * binsPerBar;
+                const end = start + binsPerBar;
+                for (let bin = start; bin < end; bin++) {
+                    sum += bin < buffer.length ? buffer[bin] : 0;
+                }
+                nextLevels.push(Math.min(1, sum / binsPerBar / 255));
+            }
+            setLevels(nextLevels);
+            animationFrame = requestAnimationFrame(tick);
+        };
+        const resumeAudioContext = () => {
+            if (audioContext.state === 'suspended')
+                audioContext.resume().catch(() => undefined);
+        };
+        resumeAudioContext();
+        audioElement.addEventListener('play', resumeAudioContext);
+        animationFrame = requestAnimationFrame(tick);
+        return () => {
+            cancelAnimationFrame(animationFrame);
+            audioElement.removeEventListener('play', resumeAudioContext);
+            source.disconnect();
+            analyser.disconnect();
+            audioContext.close().catch(() => undefined);
+        };
+    }, [audioElement]);
+    return { levels };
+};
+exports.usePsAudioSpectrum = usePsAudioSpectrum;

package/dist/hooks/use-ps-exit-transition.d.ts

@@ -0,0 +1,5 @@
+export interface UsePsExitTransitionResult {
+    isClosing: boolean;
+    shouldRender: boolean;
+}
+export declare const usePsExitTransition: (isOpen: boolean, durationMs?: number) => UsePsExitTransitionResult;

package/dist/hooks/use-ps-exit-transition.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePsExitTransition = void 0;
+const react_1 = require("react");
+const usePsExitTransition = (isOpen, durationMs = 180) => {
+    const [shouldRender, setShouldRender] = (0, react_1.useState)(isOpen);
+    const [isClosing, setIsClosing] = (0, react_1.useState)(false);
+    const timeoutRef = (0, react_1.useRef)();
+    const hasRenderedRef = (0, react_1.useRef)(isOpen);
+    (0, react_1.useEffect)(() => {
+        if (timeoutRef.current)
+            clearTimeout(timeoutRef.current);
+        if (isOpen) {
+            setShouldRender(true);
+            setIsClosing(false);
+            return;
+        }
+        if (!hasRenderedRef.current)
+            return;
+        setIsClosing(true);
+        timeoutRef.current = setTimeout(() => {
+            setShouldRender(false);
+            setIsClosing(false);
+        }, durationMs);
+        return () => {
+            if (timeoutRef.current)
+                clearTimeout(timeoutRef.current);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isOpen, durationMs]);
+    hasRenderedRef.current = shouldRender;
+    return { isClosing, shouldRender };
+};
+exports.usePsExitTransition = usePsExitTransition;

package/dist/hooks/use-ps-hide-on-scroll.d.ts

@@ -0,0 +1,4 @@
+export interface UsePsHideOnScrollOptions {
+    threshold?: number;
+}
+export declare const usePsHideOnScroll: (options?: UsePsHideOnScrollOptions) => boolean;

package/dist/hooks/use-ps-hide-on-scroll.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePsHideOnScroll = void 0;
+const react_1 = require("react");
+const usePsHideOnScroll = (options = {}) => {
+    const { threshold = 8 } = options;
+    const [hidden, setHidden] = (0, react_1.useState)(false);
+    const lastScrollY = (0, react_1.useRef)(0);
+    (0, react_1.useEffect)(() => {
+        lastScrollY.current = window.scrollY;
+        const onScroll = () => {
+            const currentScrollY = window.scrollY;
+            const delta = currentScrollY - lastScrollY.current;
+            if (currentScrollY <= 0) {
+                setHidden(false);
+                lastScrollY.current = currentScrollY;
+                return;
+            }
+            if (Math.abs(delta) < threshold)
+                return;
+            setHidden(delta > 0);
+            lastScrollY.current = currentScrollY;
+        };
+        window.addEventListener('scroll', onScroll, { passive: true });
+        return () => window.removeEventListener('scroll', onScroll);
+    }, [threshold]);
+    return hidden;
+};
+exports.usePsHideOnScroll = usePsHideOnScroll;

package/dist/hooks/use-ps-invisible-recaptcha.d.ts

@@ -0,0 +1,27 @@
+declare global {
+    interface Window {
+        grecaptcha?: {
+            ready: (callback: () => void) => void;
+            render: (container: HTMLElement, parameters: {
+                'sitekey': string;
+                'size': 'invisible';
+                'badge': PsRecaptchaBadgePosition;
+                'callback': (token: string) => void;
+                'expired-callback': () => void;
+                'error-callback': () => void;
+            }) => number;
+            execute: (widgetId: number) => void;
+            reset: (widgetId: number) => void;
+        };
+    }
+}
+export type PsRecaptchaBadgePosition = 'bottomright' | 'bottomleft' | 'inline';
+export interface UsePsInvisibleRecaptchaOptions {
+    siteKey: string;
+    badgePosition?: PsRecaptchaBadgePosition;
+}
+export interface UsePsInvisibleRecaptcha {
+    execute: () => Promise<string>;
+    isReady: boolean;
+}
+export declare const usePsInvisibleRecaptcha: ({ siteKey, badgePosition, }: UsePsInvisibleRecaptchaOptions) => UsePsInvisibleRecaptcha;

package/dist/hooks/use-ps-invisible-recaptcha.js

@@ -0,0 +1,93 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePsInvisibleRecaptcha = void 0;
+const react_1 = require("react");
+const SCRIPT_SRC = 'https://www.google.com/recaptcha/api.js?render=explicit';
+let scriptLoadPromise = null;
+const loadRecaptchaScript = () => {
+    if (scriptLoadPromise)
+        return scriptLoadPromise;
+    scriptLoadPromise = new Promise((resolve, reject) => {
+        const existing = document.querySelector(`script[src="${SCRIPT_SRC}"]`);
+        if (existing) {
+            existing.addEventListener('load', () => resolve());
+            existing.addEventListener('error', () => reject(new Error('Failed to load reCAPTCHA')));
+            if (window.grecaptcha)
+                resolve();
+            return;
+        }
+        const script = document.createElement('script');
+        script.src = SCRIPT_SRC;
+        script.async = true;
+        script.defer = true;
+        script.onload = () => resolve();
+        script.onerror = () => reject(new Error('Failed to load reCAPTCHA'));
+        document.head.appendChild(script);
+    });
+    return scriptLoadPromise;
+};
+const usePsInvisibleRecaptcha = ({ siteKey, badgePosition = 'bottomright', }) => {
+    const [isReady, setIsReady] = (0, react_1.useState)(false);
+    const widgetIdRef = (0, react_1.useRef)(null);
+    const containerRef = (0, react_1.useRef)(null);
+    const pendingRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        let isMounted = true;
+        const container = document.createElement('div');
+        container.style.display = 'none';
+        document.body.appendChild(container);
+        containerRef.current = container;
+        loadRecaptchaScript()
+            .then(() => {
+            if (!isMounted || !window.grecaptcha)
+                return;
+            window.grecaptcha.ready(() => {
+                if (!isMounted || !window.grecaptcha || !containerRef.current)
+                    return;
+                widgetIdRef.current = window.grecaptcha.render(containerRef.current, {
+                    'sitekey': siteKey,
+                    'size': 'invisible',
+                    'badge': badgePosition,
+                    'callback': (token) => {
+                        pendingRef.current?.resolve(token);
+                        pendingRef.current = null;
+                    },
+                    'expired-callback': () => {
+                        pendingRef.current?.reject(new Error('reCAPTCHA expired'));
+                        pendingRef.current = null;
+                    },
+                    'error-callback': () => {
+                        pendingRef.current?.reject(new Error('reCAPTCHA verification failed'));
+                        pendingRef.current = null;
+                    },
+                });
+                setIsReady(true);
+            });
+        })
+            .catch(() => {
+            if (isMounted)
+                setIsReady(false);
+        });
+        return () => {
+            isMounted = false;
+            container.remove();
+            containerRef.current = null;
+        };
+    }, [siteKey, badgePosition]);
+    const execute = (0, react_1.useCallback)(() => {
+        return new Promise((resolve, reject) => {
+            if (!window.grecaptcha || widgetIdRef.current === null) {
+                reject(new Error('reCAPTCHA is not ready yet'));
+                return;
+            }
+            pendingRef.current = { resolve, reject };
+            window.grecaptcha.execute(widgetIdRef.current);
+        }).finally(() => {
+            if (window.grecaptcha && widgetIdRef.current !== null) {
+                window.grecaptcha.reset(widgetIdRef.current);
+            }
+        });
+    }, []);
+    return { execute, isReady };
+};
+exports.usePsInvisibleRecaptcha = usePsInvisibleRecaptcha;

package/dist/hooks/use-ps-route-loader-data.d.ts

@@ -0,0 +1 @@
+export declare const createPsRouteLoaderDataHook: <T>(routeId: string) => () => T;

package/dist/hooks/use-ps-route-loader-data.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createPsRouteLoaderDataHook = void 0;
+const react_1 = require("@remix-run/react");
+const createPsRouteLoaderDataHook = (routeId) => {
+    let cache;
+    return () => {
+        const data = (0, react_1.useRouteLoaderData)(routeId);
+        if (data !== undefined)
+            cache = data;
+        if (cache === undefined)
+            throw new Error(`No loader data found for route "${routeId}"`);
+        return cache;
+    };
+};
+exports.createPsRouteLoaderDataHook = createPsRouteLoaderDataHook;

package/dist/hooks/use-ps-viewport.d.ts

@@ -0,0 +1,2 @@
+import { PallasoftViewportTier } from '@pallasoft/ps-design-system';
+export declare const usePsViewport: (defaultTier?: PallasoftViewportTier) => PallasoftViewportTier;

package/dist/hooks/use-ps-viewport.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePsViewport = void 0;
+const react_1 = require("react");
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const usePsViewport = (defaultTier = ps_design_system_1.PallasoftViewportTier.Desktop) => {
+    const [tier, setTier] = (0, react_1.useState)(defaultTier);
+    (0, react_1.useEffect)(() => {
+        const resolve = () => setTier(ps_design_system_1.PallasoftViewportService.getTier(window.innerWidth));
+        resolve();
+        const tabletQuery = window.matchMedia(ps_design_system_1.PallasoftViewportService.getTabletQuery());
+        const desktopQuery = window.matchMedia(ps_design_system_1.PallasoftViewportService.getDesktopQuery());
+        tabletQuery.addEventListener('change', resolve);
+        desktopQuery.addEventListener('change', resolve);
+        return () => {
+            tabletQuery.removeEventListener('change', resolve);
+            desktopQuery.removeEventListener('change', resolve);
+        };
+    }, []);
+    return tier;
+};
+exports.usePsViewport = usePsViewport;

package/dist/index.d.ts

@@ -0,0 +1,26 @@
+export * from './components/ps-accordion';
+export * from './components/ps-action-tile';
+export * from './components/ps-audio-spectrum';
+export * from './components/ps-badge';
+export * from './components/ps-button';
+export * from './components/ps-card';
+export * from './components/ps-draggable-grid';
+export * from './components/ps-empty-state';
+export * from './components/ps-fab';
+export * from './components/ps-infinite-scroll';
+export * from './components/ps-list-tile';
+export * from './components/ps-metric-card';
+export * from './components/ps-pill';
+export * from './components/ps-reflective-app-shell';
+export * from './components/ps-section-header';
+export * from './components/ps-skeleton';
+export * from './components/ps-spinner';
+export * from './components/ps-theme-toggle';
+export * from './components/ps-voice-orb';
+export * from './hooks/use-ps-audio-spectrum';
+export * from './hooks/use-ps-exit-transition';
+export * from './hooks/use-ps-hide-on-scroll';
+export * from './hooks/use-ps-invisible-recaptcha';
+export * from './hooks/use-ps-route-loader-data';
+export * from './hooks/use-ps-viewport';
+export * from './interfaces/ps-component-props';

package/dist/index.js

@@ -0,0 +1,42 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./components/ps-accordion"), exports);
+__exportStar(require("./components/ps-action-tile"), exports);
+__exportStar(require("./components/ps-audio-spectrum"), exports);
+__exportStar(require("./components/ps-badge"), exports);
+__exportStar(require("./components/ps-button"), exports);
+__exportStar(require("./components/ps-card"), exports);
+__exportStar(require("./components/ps-draggable-grid"), exports);
+__exportStar(require("./components/ps-empty-state"), exports);
+__exportStar(require("./components/ps-fab"), exports);
+__exportStar(require("./components/ps-infinite-scroll"), exports);
+__exportStar(require("./components/ps-list-tile"), exports);
+__exportStar(require("./components/ps-metric-card"), exports);
+__exportStar(require("./components/ps-pill"), exports);
+__exportStar(require("./components/ps-reflective-app-shell"), exports);
+__exportStar(require("./components/ps-section-header"), exports);
+__exportStar(require("./components/ps-skeleton"), exports);
+__exportStar(require("./components/ps-spinner"), exports);
+__exportStar(require("./components/ps-theme-toggle"), exports);
+__exportStar(require("./components/ps-voice-orb"), exports);
+__exportStar(require("./hooks/use-ps-audio-spectrum"), exports);
+__exportStar(require("./hooks/use-ps-exit-transition"), exports);
+__exportStar(require("./hooks/use-ps-hide-on-scroll"), exports);
+__exportStar(require("./hooks/use-ps-invisible-recaptcha"), exports);
+__exportStar(require("./hooks/use-ps-route-loader-data"), exports);
+__exportStar(require("./hooks/use-ps-viewport"), exports);
+__exportStar(require("./interfaces/ps-component-props"), exports);

package/dist/interfaces/ps-component-props.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+export interface PsBaseComponentProps {
+    className?: string;
+}
+export interface PsChildrenComponentProps extends PsBaseComponentProps {
+    children: ReactNode;
+}

package/dist/interfaces/ps-component-props.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/package.json

@@ -0,0 +1,75 @@
+{
+	"name": "@pallasoft/ps-core-components",
+	"version": "1.0.0",
+	"private": false,
+	"main": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"require": "./dist/index.js",
+			"default": "./dist/index.js"
+		}
+	},
+	"files": [
+		"/dist"
+	],
+	"scripts": {
+		"husky:prepare": "npx husky",
+		"build": "tsc",
+		"setup:graphify": "sh scripts/graphify-setup.sh",
+		"update:graphify": "sh scripts/graphify-update.sh",
+		"lint": "npm run lint:eslint",
+		"lint:fix": "npm run lint:eslint:fix",
+		"format:check": "npx prettier --check --ignore-unknown \"src/**/*.{ts,tsx,json,md}\"",
+		"format:prettier": "npx prettier --write \"src/**/*.{ts,tsx,json,md}\"",
+		"lint:eslint": "npx eslint \"src/**/*.{ts,tsx}\"",
+		"lint:eslint:fix": "npx eslint --fix \"src/**/*.{ts,tsx}\"",
+		"release": "semantic-release"
+	},
+	"dependencies": {
+		"@pallasoft/ps-design-system": "^1.0.0",
+		"@pallasoft/ps-icons": "^1.0.0",
+		"@radix-ui/react-accordion": "^1.2.12",
+		"react-infinite-scroll-component": "^6.1.1"
+	},
+	"peerDependencies": {
+		"@remix-run/react": "^2.0.0",
+		"react": "^18 || ^19"
+	},
+	"devDependencies": {
+		"@commitlint/cli": "^20.1.0",
+		"@commitlint/config-conventional": "^20.0.0",
+		"@eslint/compat": "^2.0.0",
+		"@ianvs/prettier-plugin-sort-imports": "^4.7.0",
+		"@semantic-release/changelog": "^6.0.3",
+		"@semantic-release/commit-analyzer": "^13.0.0",
+		"@semantic-release/git": "^10.0.1",
+		"@semantic-release/github": "^11.0.1",
+		"@semantic-release/npm": "^12.0.0",
+		"@semantic-release/release-notes-generator": "^14.0.1",
+		"@types/react": "^18.3.28",
+		"@typescript-eslint/eslint-plugin": "^8.48.0",
+		"@typescript-eslint/parser": "^8.48.0",
+		"commitlint": "^20.1.0",
+		"conventional-changelog-conventionalcommits": "^7.0.2",
+		"eslint": "^9.39.1",
+		"eslint-config-prettier": "^10.1.8",
+		"eslint-plugin-import": "^2.32.0",
+		"eslint-plugin-prettier": "^5.5.4",
+		"husky": "^9.1.7",
+		"lint-staged": "^16.2.7",
+		"prettier": "^3.6.2",
+		"semantic-release": "^24.2.0",
+		"ts-node": "^10.9.2",
+		"typescript": "^5.9.3"
+	},
+	"publishConfig": {
+		"access": "public",
+		"registry": "https://registry.npmjs.org/"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/pallasoft/ps-core-components.git"
+	}
+}