@pallasoft/ps-core-components 2.23.0 → 2.24.0

package/dist/components/ps-active-filter-chip.js

@@ -4,5 +4,5 @@ exports.PsActiveFilterChip = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ps_icons_1 = require("@pallasoft/ps-icons");
 const ps_pill_1 = require("./ps-pill");
-const PsActiveFilterChip = ({ id, label, onRemove, removeLabel, }) => ((0, jsx_runtime_1.jsx)("button", { "aria-label": removeLabel, className: 'ps-focus-ring shrink-0 rounded-full', id: id, onClick: onRemove, type: 'button', children: (0, jsx_runtime_1.jsx)(ps_pill_1.PsPill, { className: 'pr-2', tone: 'primary', children: (0, jsx_runtime_1.jsxs)("span", { className: 'flex items-center gap-1.5', children: [label, (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { className: 'h-3 w-3', iconKey: ps_icons_1.PsIconKey.Close })] }) }) }));
+const PsActiveFilterChip = ({ id, label, onRemove, removeLabel, }) => ((0, jsx_runtime_1.jsx)("button", { "aria-label": removeLabel, className: 'ps-focus-ring shrink-0 rounded-ps-control', id: id, onClick: onRemove, type: 'button', children: (0, jsx_runtime_1.jsx)(ps_pill_1.PsPill, { className: 'pr-2', tone: 'primary', children: (0, jsx_runtime_1.jsxs)("span", { className: 'flex items-center gap-1.5', children: [label, (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { className: 'h-3 w-3', iconKey: ps_icons_1.PsIconKey.Close })] }) }) }));
 exports.PsActiveFilterChip = PsActiveFilterChip;

package/dist/components/ps-badge.js

@@ -12,5 +12,5 @@ const toneClassNames = {
     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, isLoading = false, tone = 'neutral', }) => isLoading ? ((0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: ps_design_system_1.PallasoftClassNameService.merge('h-7 w-20', className), shape: ps_skeleton_shape_1.PsSkeletonShape.Block })) : ((0, jsx_runtime_1.jsx)("span", { className: ps_design_system_1.PallasoftClassNameService.merge('inline-flex min-h-7 w-fit items-center justify-center whitespace-nowrap rounded-full px-3 py-0.5 text-center text-xs font-semibold capitalize', toneClassNames[tone], className), children: children }));
+const PsBadge = ({ children, className, isLoading = false, tone = 'neutral', }) => isLoading ? ((0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: ps_design_system_1.PallasoftClassNameService.merge('h-7 w-20', className), shape: ps_skeleton_shape_1.PsSkeletonShape.Block })) : ((0, jsx_runtime_1.jsx)("span", { className: ps_design_system_1.PallasoftClassNameService.merge('inline-flex min-h-7 w-fit items-center justify-center whitespace-nowrap rounded-ps-control px-3 py-0.5 text-center text-xs font-semibold capitalize', toneClassNames[tone], className), children: children }));
 exports.PsBadge = PsBadge;

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

@@ -27,6 +27,6 @@ const PsEmptyState = ({ actions = [], badge, children, className, detail, descri
                                     ? 'mt-1.5 text-sm leading-6 text-ink/60'
                                     : 'mt-3 text-sm leading-6 text-ink/60', children: description })) : null, 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, children ? (0, jsx_runtime_1.jsx)("div", { className: 'mt-5 flex justify-center', children: children }) : null, actions.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: isInline
                                     ? 'mt-5 flex flex-col justify-center gap-2 sm:flex-row'
-                                    : '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, rel: action.rel, target: action.target, children: action.label }, `${action.href}-${action.label}`))) })) : null] })] }) }) }));
+                                    : '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 ps-control ps-control-padding inline-flex items-center justify-center rounded-ps-control border border-ps-control text-sm font-semibold', getActionClassName(action.variant)), href: action.href, rel: action.rel, target: action.target, children: action.label }, `${action.href}-${action.label}`))) })) : null] })] }) }) }));
 };
 exports.PsEmptyState = PsEmptyState;

package/dist/components/ps-fab.js

@@ -9,5 +9,5 @@ const positionClassNames = {
     '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 }));
+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 !rounded-full !px-0 shadow-lg', positionClassNames[position], className), ...props }));
 exports.PsFab = PsFab;

package/dist/components/ps-form-fields-skeleton.js

@@ -6,5 +6,5 @@ const ps_design_system_1 = require("@pallasoft/ps-design-system");
 const ps_page_skeleton_config_1 = require("../constants/ps-page-skeleton-config");
 const ps_skeleton_shape_1 = require("../constants/ps-skeleton-shape");
 const ps_skeleton_1 = require("./ps-skeleton");
-const PsFormFieldsSkeleton = ({ columnsClassName = ps_page_skeleton_config_1.PsPageSkeletonConfig.formColumnsClassName, fields = ps_page_skeleton_config_1.PsPageSkeletonConfig.formFields, }) => ((0, jsx_runtime_1.jsx)("div", { className: ps_design_system_1.PallasoftClassNameService.merge('grid gap-4', columnsClassName), children: fields.map((field) => ((0, jsx_runtime_1.jsxs)("div", { className: 'flex flex-col gap-2', children: [(0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: ps_page_skeleton_config_1.PsPageSkeletonConfig.formLabelClassName }), (0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: 'h-10 w-full', shape: ps_skeleton_shape_1.PsSkeletonShape.Block })] }, field))) }));
+const PsFormFieldsSkeleton = ({ columnsClassName = ps_page_skeleton_config_1.PsPageSkeletonConfig.formColumnsClassName, fields = ps_page_skeleton_config_1.PsPageSkeletonConfig.formFields, }) => ((0, jsx_runtime_1.jsx)("div", { className: ps_design_system_1.PallasoftClassNameService.merge('grid gap-4', columnsClassName), children: fields.map((field) => ((0, jsx_runtime_1.jsxs)("div", { className: 'flex flex-col gap-2', children: [(0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: ps_page_skeleton_config_1.PsPageSkeletonConfig.formLabelClassName }), (0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: 'h-ps-control w-full', shape: ps_skeleton_shape_1.PsSkeletonShape.Block })] }, field))) }));
 exports.PsFormFieldsSkeleton = PsFormFieldsSkeleton;

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

@@ -1,7 +1,9 @@
 import type { ButtonHTMLAttributes } from 'react';
 import { type PsIconKey } from '@pallasoft/ps-icons';
+import type { PsButtonProps } from './ps-button';
 export interface PsIconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
     iconKey: PsIconKey;
     label: string;
+    size?: PsButtonProps['size'];
 }
-export declare const PsIconButton: ({ className, iconKey, label, type, ...props }: PsIconButtonProps) => import("react").JSX.Element;
+export declare const PsIconButton: ({ className, iconKey, label, size, type, ...props }: PsIconButtonProps) => import("react").JSX.Element;

package/dist/components/ps-icon-button.js

@@ -5,5 +5,5 @@ 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 ps_icon_action_config_1 = require("../constants/ps-icon-action-config");
-const PsIconButton = ({ className, iconKey, label, type, ...props }) => ((0, jsx_runtime_1.jsx)("button", { ...props, "aria-label": label, className: ps_design_system_1.PallasoftClassNameService.merge(ps_icon_action_config_1.PsIconActionConfig.className, ps_icon_action_config_1.PsIconActionConfig.disabledClassName, className), title: label, type: type === 'submit' || type === 'reset' ? type : 'button', children: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: ps_icon_action_config_1.PsIconActionConfig.iconClassName, iconKey: iconKey }) }));
+const PsIconButton = ({ className, iconKey, label, size = 'default', type, ...props }) => ((0, jsx_runtime_1.jsx)("button", { ...props, "aria-label": label, className: ps_design_system_1.PallasoftClassNameService.merge(ps_icon_action_config_1.PsIconActionConfig.className, ps_icon_action_config_1.PsIconActionConfig.sizeClassNames[size], ps_icon_action_config_1.PsIconActionConfig.disabledClassName, className), title: label, type: type === 'submit' || type === 'reset' ? type : 'button', children: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: ps_icon_action_config_1.PsIconActionConfig.iconClassName, iconKey: iconKey }) }));
 exports.PsIconButton = PsIconButton;

package/dist/components/ps-icon-link.d.ts

@@ -1,10 +1,12 @@
 import type { ElementType } from 'react';
 import { type PsIconKey } from '@pallasoft/ps-icons';
+import type { PsButtonProps } from './ps-button';
 export interface PsIconLinkProps {
     className?: string;
     href: string;
     iconKey: PsIconKey;
     label: string;
     LinkComponent?: ElementType;
+    size?: PsButtonProps['size'];
 }
-export declare const PsIconLink: ({ className, href, iconKey, label, LinkComponent }: PsIconLinkProps) => import("react").JSX.Element;
+export declare const PsIconLink: ({ className, href, iconKey, label, LinkComponent, size, }: PsIconLinkProps) => import("react").JSX.Element;

package/dist/components/ps-icon-link.js

@@ -5,8 +5,8 @@ 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 ps_icon_action_config_1 = require("../constants/ps-icon-action-config");
-const PsIconLink = ({ className, href, iconKey, label, LinkComponent }) => {
-    const linkClassName = ps_design_system_1.PallasoftClassNameService.merge(ps_icon_action_config_1.PsIconActionConfig.className, className);
+const PsIconLink = ({ className, href, iconKey, label, LinkComponent, size = 'default', }) => {
+    const linkClassName = ps_design_system_1.PallasoftClassNameService.merge(ps_icon_action_config_1.PsIconActionConfig.className, ps_icon_action_config_1.PsIconActionConfig.sizeClassNames[size], className);
     const icon = ((0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: ps_icon_action_config_1.PsIconActionConfig.iconClassName, iconKey: iconKey }));
     return LinkComponent ? ((0, jsx_runtime_1.jsx)(LinkComponent, { "aria-label": label, className: linkClassName, prefetch: 'intent', title: label, to: href, children: icon })) : ((0, jsx_runtime_1.jsx)("a", { "aria-label": label, className: linkClassName, href: href, title: label, children: icon }));
 };

package/dist/components/ps-pill.js

@@ -12,5 +12,5 @@ const toneClassNames = {
     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, isLoading = false, tone = 'neutral', }) => isLoading ? ((0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: ps_design_system_1.PallasoftClassNameService.merge('h-8 w-24', className), shape: ps_skeleton_shape_1.PsSkeletonShape.Block })) : ((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 }) }));
+const PsPill = ({ children, className, isLoading = false, tone = 'neutral', }) => isLoading ? ((0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: ps_design_system_1.PallasoftClassNameService.merge('h-8 w-24', className), shape: ps_skeleton_shape_1.PsSkeletonShape.Block })) : ((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-ps-control 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-section-header.js

@@ -5,5 +5,5 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const ps_skeleton_shape_1 = require("../constants/ps-skeleton-shape");
 const ps_skeleton_1 = require("./ps-skeleton");
 const ps_skeleton_group_1 = require("./ps-skeleton-group");
-const PsSectionHeader = ({ description, eyebrow, isLoading = false, leading, title, trailing, }) => isLoading ? ((0, jsx_runtime_1.jsxs)(ps_skeleton_group_1.PsSkeletonGroup, { className: 'flex flex-wrap items-end justify-between gap-x-4 gap-y-3', label: title, children: [(0, jsx_runtime_1.jsxs)("div", { className: 'flex min-w-0 flex-1 basis-auto flex-col gap-2', children: [eyebrow ? (0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: 'h-2.5 w-24' }) : null, (0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: 'h-6 w-52' }), description ? (0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: 'h-3 w-72' }) : null] }), trailing ? (0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: 'h-10 w-32', shape: ps_skeleton_shape_1.PsSkeletonShape.Block }) : null] })) : ((0, jsx_runtime_1.jsxs)("div", { className: 'flex flex-wrap items-end justify-between gap-x-4 gap-y-3', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'flex min-w-0 flex-1 basis-auto flex-col gap-2', children: [leading, eyebrow ? ((0, jsx_runtime_1.jsx)("p", { className: 'text-[0.68rem] font-semibold uppercase tracking-[0.22em] text-ink/50', children: eyebrow })) : null, (0, jsx_runtime_1.jsx)("h1", { className: 'break-words text-xl font-extrabold text-ink sm:text-2xl', children: title }), description ? ((0, jsx_runtime_1.jsx)("p", { className: 'max-w-3xl text-sm leading-6 text-ink/60', children: description })) : null] }), trailing ? ((0, jsx_runtime_1.jsx)("div", { className: 'flex w-full shrink-0 items-center justify-end sm:ml-auto sm:w-auto', children: trailing })) : null] }));
+const PsSectionHeader = ({ description, eyebrow, isLoading = false, leading, title, trailing, }) => isLoading ? ((0, jsx_runtime_1.jsxs)(ps_skeleton_group_1.PsSkeletonGroup, { className: 'flex flex-wrap items-end justify-between gap-x-4 gap-y-3', label: title, children: [(0, jsx_runtime_1.jsxs)("div", { className: 'flex min-w-0 flex-1 basis-auto flex-col gap-2', children: [eyebrow ? (0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: 'h-2.5 w-24' }) : null, (0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: 'h-6 w-52' }), description ? (0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: 'h-3 w-72' }) : null] }), trailing ? (0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: 'h-ps-control w-32', shape: ps_skeleton_shape_1.PsSkeletonShape.Block }) : null] })) : ((0, jsx_runtime_1.jsxs)("div", { className: 'flex flex-wrap items-end justify-between gap-x-4 gap-y-3', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'flex min-w-0 flex-1 basis-auto flex-col gap-2', children: [leading, eyebrow ? ((0, jsx_runtime_1.jsx)("p", { className: 'text-[0.68rem] font-semibold uppercase tracking-[0.22em] text-ink/50', children: eyebrow })) : null, (0, jsx_runtime_1.jsx)("h1", { className: 'break-words text-xl font-extrabold text-ink sm:text-2xl', children: title }), description ? ((0, jsx_runtime_1.jsx)("p", { className: 'max-w-3xl text-sm leading-6 text-ink/60', children: description })) : null] }), trailing ? ((0, jsx_runtime_1.jsx)("div", { className: 'flex w-full shrink-0 items-center justify-end sm:ml-auto sm:w-auto', children: trailing })) : null] }));
 exports.PsSectionHeader = PsSectionHeader;

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

@@ -13,6 +13,6 @@ const PsSiteHeader = ({ centerContent, className, homeHref, label, LinkComponent
     const renderLogo = (src, darkSrc, baseClassName) => darkSrc ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("img", { alt: logoAlt !== null && logoAlt !== undefined ? logoAlt : label, className: ps_design_system_1.PallasoftClassNameService.merge(baseClassName, 'dark:hidden', logoClassName), decoding: 'async', src: src }), (0, jsx_runtime_1.jsx)("img", { alt: logoAlt !== null && logoAlt !== undefined ? logoAlt : label, className: ps_design_system_1.PallasoftClassNameService.merge(baseClassName, 'hidden dark:block', logoClassName), decoding: 'async', src: darkSrc })] })) : ((0, jsx_runtime_1.jsx)("img", { alt: logoAlt !== null && logoAlt !== undefined ? logoAlt : label, className: ps_design_system_1.PallasoftClassNameService.merge(baseClassName, logoClassName), decoding: 'async', src: src }));
     const logoContent = logoSrcMobile ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: 'hidden sm:contents', children: renderLogo(logoSrc, logoSrcDark, 'h-8 w-auto') }), (0, jsx_runtime_1.jsx)("span", { className: 'contents sm:hidden', children: renderLogo(logoSrcMobile, logoSrcMobileDark, 'h-8 w-auto') }), showLabel ? (0, jsx_runtime_1.jsx)("span", { className: 'text-base font-bold text-ink', children: label }) : null] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [renderLogo(logoSrc, logoSrcDark, 'h-8 w-auto'), showLabel ? (0, jsx_runtime_1.jsx)("span", { className: 'text-base font-bold text-ink', children: label }) : null] }));
     const logoLink = LinkComponent ? ((0, jsx_runtime_1.jsx)(LinkComponent, { "aria-label": logoLabel, className: logoLinkClassName, prefetch: 'intent', to: homeHref, children: logoContent })) : ((0, jsx_runtime_1.jsx)("a", { "aria-label": logoLabel, className: logoLinkClassName, href: homeHref, children: logoContent }));
-    return ((0, jsx_runtime_1.jsx)("header", { ref: headerRef, className: ps_design_system_1.PallasoftClassNameService.merge('fixed inset-x-0 top-0 z-header px-6 pt-4', className), children: (0, jsx_runtime_1.jsxs)("nav", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-glass mx-auto flex max-w-6xl items-center gap-3 rounded-ps-card px-5 py-3', navClassName), children: [onBack ? ((0, jsx_runtime_1.jsx)("button", { "aria-label": 'Back', className: 'ps-focus-ring flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-ink md:hidden', onClick: onBack, type: 'button', children: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { iconKey: ps_icons_1.PsIconKey.ChevronRight, width: 20, height: 20, className: 'rotate-180' }) })) : null, (0, jsx_runtime_1.jsx)("div", { className: onBack ? 'hidden md:flex' : 'contents', children: logoLink }), (0, jsx_runtime_1.jsx)("div", { className: 'flex min-w-0 flex-1 items-center justify-center gap-3', children: centerContent }), trailing ? (0, jsx_runtime_1.jsx)("div", { className: 'flex shrink-0 items-center gap-2.5', children: trailing }) : null] }) }));
+    return ((0, jsx_runtime_1.jsx)("header", { ref: headerRef, className: ps_design_system_1.PallasoftClassNameService.merge('fixed inset-x-0 top-0 z-header px-6 pt-4', className), children: (0, jsx_runtime_1.jsxs)("nav", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-glass mx-auto flex max-w-6xl items-center gap-3 rounded-ps-card px-5 py-3', navClassName), children: [onBack ? ((0, jsx_runtime_1.jsx)("button", { "aria-label": 'Back', className: 'ps-focus-ring ps-control-square ps-control-compact flex shrink-0 items-center justify-center rounded-ps-control text-ink md:hidden', onClick: onBack, type: 'button', children: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { iconKey: ps_icons_1.PsIconKey.ChevronRight, width: 20, height: 20, className: 'rotate-180' }) })) : null, (0, jsx_runtime_1.jsx)("div", { className: onBack ? 'hidden md:flex' : 'contents', children: logoLink }), (0, jsx_runtime_1.jsx)("div", { className: 'flex min-w-0 flex-1 items-center justify-center gap-3', children: centerContent }), trailing ? (0, jsx_runtime_1.jsx)("div", { className: 'flex shrink-0 items-center gap-2.5', children: trailing }) : null] }) }));
 };
 exports.PsSiteHeader = PsSiteHeader;

package/dist/components/ps-start-preview.js

@@ -2,5 +2,5 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsStartPreview = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const PsStartPreview = ({ badge, children, note, title }) => ((0, jsx_runtime_1.jsxs)("div", { className: 'rounded-2xl border border-line/60 bg-surface/60 p-5', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'mb-4 flex items-center justify-between', children: [(0, jsx_runtime_1.jsx)("span", { className: 'text-sm font-bold text-ink', children: title }), badge === undefined ? null : ((0, jsx_runtime_1.jsx)("span", { className: 'rounded-full border border-warning/40 px-2.5 py-1 text-xs font-semibold text-warning', children: badge }))] }), (0, jsx_runtime_1.jsx)("ul", { className: 'flex flex-col', children: children }), note === undefined ? null : ((0, jsx_runtime_1.jsx)("p", { className: 'mt-4 border-t border-line/40 pt-4 text-xs leading-5 text-ink/45', children: note }))] }));
+const PsStartPreview = ({ badge, children, note, title }) => ((0, jsx_runtime_1.jsxs)("div", { className: 'rounded-2xl border border-line/60 bg-surface/60 p-5', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'mb-4 flex items-center justify-between', children: [(0, jsx_runtime_1.jsx)("span", { className: 'text-sm font-bold text-ink', children: title }), badge === undefined ? null : ((0, jsx_runtime_1.jsx)("span", { className: 'rounded-ps-control border border-warning/40 px-2.5 py-1 text-xs font-semibold text-warning', children: badge }))] }), (0, jsx_runtime_1.jsx)("ul", { className: 'flex flex-col', children: children }), note === undefined ? null : ((0, jsx_runtime_1.jsx)("p", { className: 'mt-4 border-t border-line/40 pt-4 text-xs leading-5 text-ink/45', children: note }))] }));
 exports.PsStartPreview = PsStartPreview;

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

@@ -7,7 +7,7 @@ const ps_theme_toggle_1 = require("./ps-theme-toggle");
 const PsThemeController = () => {
     const { resolvedMode, toggle } = (0, use_ps_theme_mode_1.usePsThemeMode)();
     if (resolvedMode === null)
-        return (0, jsx_runtime_1.jsx)("div", { className: 'h-11 w-11' });
+        return (0, jsx_runtime_1.jsx)("div", { className: 'ps-control-square' });
     return (0, jsx_runtime_1.jsx)(ps_theme_toggle_1.PsThemeToggle, { mode: resolvedMode, onClick: toggle });
 };
 exports.PsThemeController = PsThemeController;

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

@@ -6,6 +6,6 @@ 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' })] }));
+    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 ps-control ps-control-padding flex items-center gap-2 rounded-ps-control text-sm font-semibold 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: 'size-ps-control-icon-standalone', 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/constants/ps-button-classes.d.ts

@@ -1,4 +1,4 @@
-export declare const PsButtonBaseClassName = "ps-focus-ring relative inline-flex max-w-full items-center justify-center gap-2 rounded-full border text-center font-semibold";
+export declare const PsButtonBaseClassName = "ps-focus-ring relative inline-flex max-w-full items-center justify-center gap-2 rounded-ps-control border border-ps-control text-center text-sm font-semibold leading-5";
 export declare const PsButtonSizeClassNames: {
     compact: string;
     default: string;

package/dist/constants/ps-button-classes.js

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsLinkButtonVariantClassNames = exports.PsButtonVariantClassNames = exports.PsButtonSizeClassNames = exports.PsButtonBaseClassName = void 0;
-exports.PsButtonBaseClassName = 'ps-focus-ring relative inline-flex max-w-full items-center justify-center gap-2 rounded-full border text-center font-semibold';
+exports.PsButtonBaseClassName = 'ps-focus-ring relative inline-flex max-w-full items-center justify-center gap-2 rounded-ps-control border border-ps-control text-center text-sm font-semibold leading-5';
 exports.PsButtonSizeClassNames = {
-    compact: 'ps-control-compact px-3 py-2 text-sm',
-    default: 'ps-control ps-control-padding text-sm',
-    large: 'ps-control-large px-5 py-3 text-sm',
+    compact: 'ps-control-compact ps-control-padding-compact',
+    default: 'ps-control ps-control-padding',
+    large: 'ps-control-large ps-control-padding-large',
 };
 exports.PsButtonVariantClassNames = {
     danger: 'border-danger bg-danger text-white enabled:hover:opacity-90',

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

@@ -9,7 +9,7 @@ export declare const PsDragConfig: {
     readonly touchTolerance: 6;
 };
 export declare const PsDragClasses: {
-    readonly handle: "ps-focus-ring inline-flex h-7 w-7 shrink-0 cursor-grab touch-none items-center justify-center rounded-full text-slate-400/70 transition hover:bg-white/36 hover:text-slate-600 active:cursor-grabbing dark:text-slate-300/55 dark:hover:bg-white/8 dark:hover:text-slate-100";
+    readonly handle: "ps-focus-ring inline-flex h-7 w-7 shrink-0 cursor-grab touch-none items-center justify-center rounded-ps-control text-slate-400/70 transition hover:bg-white/36 hover:text-slate-600 active:cursor-grabbing dark:text-slate-300/55 dark:hover:bg-white/8 dark:hover:text-slate-100";
     readonly listItem: "min-w-0";
     readonly lifted: "cursor-grabbing rounded-xl bg-surface ring-1 ring-primary/30";
     readonly placeholder: "outline-dashed outline-2 outline-offset-[-2px] outline-primary/35";

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

@@ -12,7 +12,7 @@ exports.PsDragConfig = {
     touchTolerance: 6,
 };
 exports.PsDragClasses = {
-    handle: 'ps-focus-ring inline-flex h-7 w-7 shrink-0 cursor-grab touch-none items-center justify-center rounded-full text-slate-400/70 transition hover:bg-white/36 hover:text-slate-600 active:cursor-grabbing dark:text-slate-300/55 dark:hover:bg-white/8 dark:hover:text-slate-100',
+    handle: 'ps-focus-ring inline-flex h-7 w-7 shrink-0 cursor-grab touch-none items-center justify-center rounded-ps-control text-slate-400/70 transition hover:bg-white/36 hover:text-slate-600 active:cursor-grabbing dark:text-slate-300/55 dark:hover:bg-white/8 dark:hover:text-slate-100',
     listItem: 'min-w-0',
     lifted: 'cursor-grabbing rounded-xl bg-surface ring-1 ring-primary/30',
     placeholder: 'outline-dashed outline-2 outline-offset-[-2px] outline-primary/35',

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

@@ -9,7 +9,7 @@ export declare const PsDraggableGridConfig: {
     readonly touchTolerance: 6;
 };
 export declare const PsDraggableGridClasses: {
-    readonly handle: "ps-focus-ring inline-flex h-7 w-7 shrink-0 cursor-grab touch-none items-center justify-center rounded-full text-slate-400/70 transition hover:bg-white/36 hover:text-slate-600 active:cursor-grabbing dark:text-slate-300/55 dark:hover:bg-white/8 dark:hover:text-slate-100";
+    readonly handle: "ps-focus-ring inline-flex h-7 w-7 shrink-0 cursor-grab touch-none items-center justify-center rounded-ps-control text-slate-400/70 transition hover:bg-white/36 hover:text-slate-600 active:cursor-grabbing dark:text-slate-300/55 dark:hover:bg-white/8 dark:hover:text-slate-100";
     readonly item: "min-w-0 rounded-[1.7rem]";
     readonly lifted: "cursor-grabbing rounded-[1.7rem] ring-1 ring-primary/30";
     readonly placeholder: "rounded-[1.7rem] outline-dashed outline-2 outline-offset-[-2px] outline-primary/35";

package/dist/constants/ps-icon-action-config.d.ts

@@ -2,4 +2,9 @@ export declare const PsIconActionConfig: {
     className: string;
     disabledClassName: string;
     iconClassName: string;
+    sizeClassNames: {
+        compact: string;
+        default: string;
+        large: string;
+    };
 };

package/dist/constants/ps-icon-action-config.js

@@ -2,7 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsIconActionConfig = void 0;
 exports.PsIconActionConfig = {
-    className: 'ps-focus-ring relative inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl text-ink/65 transition-colors hover:bg-ink/5 hover:text-ink',
+    className: 'ps-focus-ring ps-control-square relative inline-flex shrink-0 items-center justify-center rounded-ps-control text-ink/65 transition-colors hover:bg-ink/5 hover:text-ink',
     disabledClassName: 'disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent',
-    iconClassName: 'block h-5 w-5 shrink-0',
+    iconClassName: 'block size-ps-control-icon-standalone shrink-0',
+    sizeClassNames: {
+        compact: 'ps-control-compact',
+        default: '',
+        large: 'ps-control-large',
+    },
 };

package/dist/constants/ps-pallasoft-sign-in-classes.d.ts

@@ -1,11 +1,11 @@
 export declare const PsPallasoftSignInClasses: {
-    readonly base: "ps-focus-ring ps-liquid ps-liquid-control group relative inline-flex max-w-full items-center justify-center gap-3 rounded-full border border-line bg-white font-semibold text-ink shadow-sm transition duration-200 hover:-translate-y-px hover:border-primary/40 hover:shadow-md active:translate-y-0 motion-reduce:transition-none motion-reduce:hover:translate-y-0 dark:border-white/15 dark:bg-white/10 dark:text-white dark:hover:border-white/30";
+    readonly base: "ps-focus-ring ps-liquid ps-liquid-control group relative inline-flex max-w-full items-center justify-center gap-3 rounded-ps-control border border-line bg-white font-semibold text-ink shadow-sm transition duration-200 hover:-translate-y-px hover:border-primary/40 hover:shadow-md active:translate-y-0 motion-reduce:transition-none motion-reduce:hover:translate-y-0 dark:border-white/15 dark:bg-white/10 dark:text-white dark:hover:border-white/30";
     readonly sizes: {
-        readonly default: "ps-control px-5 text-sm";
-        readonly large: "ps-control-large px-6 py-3 text-base";
+        readonly default: "ps-control ps-control-padding text-sm";
+        readonly large: "ps-control-large ps-control-padding-large text-sm";
     };
     readonly markSizes: {
-        readonly default: "h-5 w-5";
-        readonly large: "h-6 w-6";
+        readonly default: "size-ps-control-icon-standalone";
+        readonly large: "size-ps-control-icon-standalone";
     };
 };

package/dist/constants/ps-pallasoft-sign-in-classes.js

@@ -2,13 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsPallasoftSignInClasses = void 0;
 exports.PsPallasoftSignInClasses = {
-    base: 'ps-focus-ring ps-liquid ps-liquid-control group relative inline-flex max-w-full items-center justify-center gap-3 rounded-full border border-line bg-white font-semibold text-ink shadow-sm transition duration-200 hover:-translate-y-px hover:border-primary/40 hover:shadow-md active:translate-y-0 motion-reduce:transition-none motion-reduce:hover:translate-y-0 dark:border-white/15 dark:bg-white/10 dark:text-white dark:hover:border-white/30',
+    base: 'ps-focus-ring ps-liquid ps-liquid-control group relative inline-flex max-w-full items-center justify-center gap-3 rounded-ps-control border border-line bg-white font-semibold text-ink shadow-sm transition duration-200 hover:-translate-y-px hover:border-primary/40 hover:shadow-md active:translate-y-0 motion-reduce:transition-none motion-reduce:hover:translate-y-0 dark:border-white/15 dark:bg-white/10 dark:text-white dark:hover:border-white/30',
     sizes: {
-        default: 'ps-control px-5 text-sm',
-        large: 'ps-control-large px-6 py-3 text-base',
+        default: 'ps-control ps-control-padding text-sm',
+        large: 'ps-control-large ps-control-padding-large text-sm',
     },
     markSizes: {
-        default: 'h-5 w-5',
-        large: 'h-6 w-6',
+        default: 'size-ps-control-icon-standalone',
+        large: 'size-ps-control-icon-standalone',
     },
 };

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

@@ -19,7 +19,7 @@ exports.PsSkeletonConfig = {
         [ps_skeleton_shape_1.PsSkeletonShape.Text]: 'rounded-full',
     },
     shapeSizes: {
-        [ps_skeleton_shape_1.PsSkeletonShape.Block]: { height: 'h-11', width: 'w-full' },
+        [ps_skeleton_shape_1.PsSkeletonShape.Block]: { height: 'h-ps-control', width: 'w-full' },
         [ps_skeleton_shape_1.PsSkeletonShape.Circle]: { height: 'h-9', width: 'w-9' },
         [ps_skeleton_shape_1.PsSkeletonShape.Line]: { height: 'h-3', width: 'w-full' },
         [ps_skeleton_shape_1.PsSkeletonShape.Text]: { height: 'h-3', width: 'w-full' },

package/dist/esm/components/ps-active-filter-chip.js

@@ -1,4 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PsIcon, PsIconKey } from '@pallasoft/ps-icons';
 import { PsPill } from './ps-pill';
-export const PsActiveFilterChip = ({ id, label, onRemove, removeLabel, }) => (_jsx("button", { "aria-label": removeLabel, className: 'ps-focus-ring shrink-0 rounded-full', id: id, onClick: onRemove, type: 'button', children: _jsx(PsPill, { className: 'pr-2', tone: 'primary', children: _jsxs("span", { className: 'flex items-center gap-1.5', children: [label, _jsx(PsIcon, { className: 'h-3 w-3', iconKey: PsIconKey.Close })] }) }) }));
+export const PsActiveFilterChip = ({ id, label, onRemove, removeLabel, }) => (_jsx("button", { "aria-label": removeLabel, className: 'ps-focus-ring shrink-0 rounded-ps-control', id: id, onClick: onRemove, type: 'button', children: _jsx(PsPill, { className: 'pr-2', tone: 'primary', children: _jsxs("span", { className: 'flex items-center gap-1.5', children: [label, _jsx(PsIcon, { className: 'h-3 w-3', iconKey: PsIconKey.Close })] }) }) }));

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

@@ -9,4 +9,4 @@ const toneClassNames = {
     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',
 };
-export const PsBadge = ({ children, className, isLoading = false, tone = 'neutral', }) => isLoading ? (_jsx(PsSkeleton, { className: PallasoftClassNameService.merge('h-7 w-20', className), shape: PsSkeletonShape.Block })) : (_jsx("span", { className: PallasoftClassNameService.merge('inline-flex min-h-7 w-fit items-center justify-center whitespace-nowrap rounded-full px-3 py-0.5 text-center text-xs font-semibold capitalize', toneClassNames[tone], className), children: children }));
+export const PsBadge = ({ children, className, isLoading = false, tone = 'neutral', }) => isLoading ? (_jsx(PsSkeleton, { className: PallasoftClassNameService.merge('h-7 w-20', className), shape: PsSkeletonShape.Block })) : (_jsx("span", { className: PallasoftClassNameService.merge('inline-flex min-h-7 w-fit items-center justify-center whitespace-nowrap rounded-ps-control px-3 py-0.5 text-center text-xs font-semibold capitalize', toneClassNames[tone], className), children: children }));

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

@@ -24,5 +24,5 @@ export const PsEmptyState = ({ actions = [], badge, children, className, detail,
                                     ? 'mt-1.5 text-sm leading-6 text-ink/60'
                                     : 'mt-3 text-sm leading-6 text-ink/60', children: description })) : null, detail ? (_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, children ? _jsx("div", { className: 'mt-5 flex justify-center', children: children }) : null, actions.length > 0 ? (_jsx("div", { className: isInline
                                     ? 'mt-5 flex flex-col justify-center gap-2 sm:flex-row'
-                                    : 'mt-6 flex flex-col gap-2 sm:flex-row', children: actions.map((action) => (_jsx("a", { className: 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, rel: action.rel, target: action.target, children: action.label }, `${action.href}-${action.label}`))) })) : null] })] }) }) }));
+                                    : 'mt-6 flex flex-col gap-2 sm:flex-row', children: actions.map((action) => (_jsx("a", { className: PallasoftClassNameService.merge('ps-focus-ring ps-pressable ps-control ps-control-padding inline-flex items-center justify-center rounded-ps-control border border-ps-control text-sm font-semibold', getActionClassName(action.variant)), href: action.href, rel: action.rel, target: action.target, children: action.label }, `${action.href}-${action.label}`))) })) : null] })] }) }) }));
 };

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

@@ -6,4 +6,4 @@ const positionClassNames = {
     'bottom-left': 'bottom-6 left-6',
     'bottom-center': 'bottom-6 left-1/2 -translate-x-1/2',
 };
-export const PsFab = ({ className, position = 'bottom-right', ...props }) => (_jsx(PsButton, { size: 'large', variant: 'primary', className: PallasoftClassNameService.merge('!fixed z-docked h-14 w-14 shrink-0 !px-0 shadow-lg', positionClassNames[position], className), ...props }));
+export const PsFab = ({ className, position = 'bottom-right', ...props }) => (_jsx(PsButton, { size: 'large', variant: 'primary', className: PallasoftClassNameService.merge('!fixed z-docked h-14 w-14 shrink-0 !rounded-full !px-0 shadow-lg', positionClassNames[position], className), ...props }));

package/dist/esm/components/ps-form-fields-skeleton.js

@@ -3,4 +3,4 @@ import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
 import { PsPageSkeletonConfig } from '../constants/ps-page-skeleton-config';
 import { PsSkeletonShape } from '../constants/ps-skeleton-shape';
 import { PsSkeleton } from './ps-skeleton';
-export const PsFormFieldsSkeleton = ({ columnsClassName = PsPageSkeletonConfig.formColumnsClassName, fields = PsPageSkeletonConfig.formFields, }) => (_jsx("div", { className: PallasoftClassNameService.merge('grid gap-4', columnsClassName), children: fields.map((field) => (_jsxs("div", { className: 'flex flex-col gap-2', children: [_jsx(PsSkeleton, { className: PsPageSkeletonConfig.formLabelClassName }), _jsx(PsSkeleton, { className: 'h-10 w-full', shape: PsSkeletonShape.Block })] }, field))) }));
+export const PsFormFieldsSkeleton = ({ columnsClassName = PsPageSkeletonConfig.formColumnsClassName, fields = PsPageSkeletonConfig.formFields, }) => (_jsx("div", { className: PallasoftClassNameService.merge('grid gap-4', columnsClassName), children: fields.map((field) => (_jsxs("div", { className: 'flex flex-col gap-2', children: [_jsx(PsSkeleton, { className: PsPageSkeletonConfig.formLabelClassName }), _jsx(PsSkeleton, { className: 'h-ps-control w-full', shape: PsSkeletonShape.Block })] }, field))) }));

package/dist/esm/components/ps-icon-button.js

@@ -2,4 +2,4 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
 import { PsIcon } from '@pallasoft/ps-icons';
 import { PsIconActionConfig } from '../constants/ps-icon-action-config';
-export const PsIconButton = ({ className, iconKey, label, type, ...props }) => (_jsx("button", { ...props, "aria-label": label, className: PallasoftClassNameService.merge(PsIconActionConfig.className, PsIconActionConfig.disabledClassName, className), title: label, type: type === 'submit' || type === 'reset' ? type : 'button', children: _jsx(PsIcon, { "aria-hidden": 'true', className: PsIconActionConfig.iconClassName, iconKey: iconKey }) }));
+export const PsIconButton = ({ className, iconKey, label, size = 'default', type, ...props }) => (_jsx("button", { ...props, "aria-label": label, className: PallasoftClassNameService.merge(PsIconActionConfig.className, PsIconActionConfig.sizeClassNames[size], PsIconActionConfig.disabledClassName, className), title: label, type: type === 'submit' || type === 'reset' ? type : 'button', children: _jsx(PsIcon, { "aria-hidden": 'true', className: PsIconActionConfig.iconClassName, iconKey: iconKey }) }));

package/dist/esm/components/ps-icon-link.js

@@ -2,8 +2,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
 import { PsIcon } from '@pallasoft/ps-icons';
 import { PsIconActionConfig } from '../constants/ps-icon-action-config';
-export const PsIconLink = ({ className, href, iconKey, label, LinkComponent }) => {
-    const linkClassName = PallasoftClassNameService.merge(PsIconActionConfig.className, className);
+export const PsIconLink = ({ className, href, iconKey, label, LinkComponent, size = 'default', }) => {
+    const linkClassName = PallasoftClassNameService.merge(PsIconActionConfig.className, PsIconActionConfig.sizeClassNames[size], className);
     const icon = (_jsx(PsIcon, { "aria-hidden": 'true', className: PsIconActionConfig.iconClassName, iconKey: iconKey }));
     return LinkComponent ? (_jsx(LinkComponent, { "aria-label": label, className: linkClassName, prefetch: 'intent', title: label, to: href, children: icon })) : (_jsx("a", { "aria-label": label, className: linkClassName, href: href, title: label, children: icon }));
 };

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

@@ -9,4 +9,4 @@ const toneClassNames = {
     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',
 };
-export const PsPill = ({ children, className, isLoading = false, tone = 'neutral', }) => isLoading ? (_jsx(PsSkeleton, { className: PallasoftClassNameService.merge('h-8 w-24', className), shape: PsSkeletonShape.Block })) : (_jsx("span", { className: 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: _jsx("span", { className: 'min-w-0 break-words', children: children }) }));
+export const PsPill = ({ children, className, isLoading = false, tone = 'neutral', }) => isLoading ? (_jsx(PsSkeleton, { className: PallasoftClassNameService.merge('h-8 w-24', className), shape: PsSkeletonShape.Block })) : (_jsx("span", { className: PallasoftClassNameService.merge('inline-flex min-h-8 min-w-[5.5rem] max-w-full items-center justify-center rounded-ps-control px-5 py-1 text-center text-[0.72rem] font-black capitalize tracking-[0.01em] ring-1 ring-inset', toneClassNames[tone], className), children: _jsx("span", { className: 'min-w-0 break-words', children: children }) }));

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

@@ -2,4 +2,4 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PsSkeletonShape } from '../constants/ps-skeleton-shape';
 import { PsSkeleton } from './ps-skeleton';
 import { PsSkeletonGroup } from './ps-skeleton-group';
-export const PsSectionHeader = ({ description, eyebrow, isLoading = false, leading, title, trailing, }) => isLoading ? (_jsxs(PsSkeletonGroup, { className: 'flex flex-wrap items-end justify-between gap-x-4 gap-y-3', label: title, children: [_jsxs("div", { className: 'flex min-w-0 flex-1 basis-auto flex-col gap-2', children: [eyebrow ? _jsx(PsSkeleton, { className: 'h-2.5 w-24' }) : null, _jsx(PsSkeleton, { className: 'h-6 w-52' }), description ? _jsx(PsSkeleton, { className: 'h-3 w-72' }) : null] }), trailing ? _jsx(PsSkeleton, { className: 'h-10 w-32', shape: PsSkeletonShape.Block }) : null] })) : (_jsxs("div", { className: 'flex flex-wrap items-end justify-between gap-x-4 gap-y-3', children: [_jsxs("div", { className: 'flex min-w-0 flex-1 basis-auto flex-col gap-2', children: [leading, eyebrow ? (_jsx("p", { className: 'text-[0.68rem] font-semibold uppercase tracking-[0.22em] text-ink/50', children: eyebrow })) : null, _jsx("h1", { className: 'break-words text-xl font-extrabold text-ink sm:text-2xl', children: title }), description ? (_jsx("p", { className: 'max-w-3xl text-sm leading-6 text-ink/60', children: description })) : null] }), trailing ? (_jsx("div", { className: 'flex w-full shrink-0 items-center justify-end sm:ml-auto sm:w-auto', children: trailing })) : null] }));
+export const PsSectionHeader = ({ description, eyebrow, isLoading = false, leading, title, trailing, }) => isLoading ? (_jsxs(PsSkeletonGroup, { className: 'flex flex-wrap items-end justify-between gap-x-4 gap-y-3', label: title, children: [_jsxs("div", { className: 'flex min-w-0 flex-1 basis-auto flex-col gap-2', children: [eyebrow ? _jsx(PsSkeleton, { className: 'h-2.5 w-24' }) : null, _jsx(PsSkeleton, { className: 'h-6 w-52' }), description ? _jsx(PsSkeleton, { className: 'h-3 w-72' }) : null] }), trailing ? _jsx(PsSkeleton, { className: 'h-ps-control w-32', shape: PsSkeletonShape.Block }) : null] })) : (_jsxs("div", { className: 'flex flex-wrap items-end justify-between gap-x-4 gap-y-3', children: [_jsxs("div", { className: 'flex min-w-0 flex-1 basis-auto flex-col gap-2', children: [leading, eyebrow ? (_jsx("p", { className: 'text-[0.68rem] font-semibold uppercase tracking-[0.22em] text-ink/50', children: eyebrow })) : null, _jsx("h1", { className: 'break-words text-xl font-extrabold text-ink sm:text-2xl', children: title }), description ? (_jsx("p", { className: 'max-w-3xl text-sm leading-6 text-ink/60', children: description })) : null] }), trailing ? (_jsx("div", { className: 'flex w-full shrink-0 items-center justify-end sm:ml-auto sm:w-auto', children: trailing })) : null] }));

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

@@ -10,5 +10,5 @@ export const PsSiteHeader = ({ centerContent, className, homeHref, label, LinkCo
     const renderLogo = (src, darkSrc, baseClassName) => darkSrc ? (_jsxs(_Fragment, { children: [_jsx("img", { alt: logoAlt !== null && logoAlt !== undefined ? logoAlt : label, className: PallasoftClassNameService.merge(baseClassName, 'dark:hidden', logoClassName), decoding: 'async', src: src }), _jsx("img", { alt: logoAlt !== null && logoAlt !== undefined ? logoAlt : label, className: PallasoftClassNameService.merge(baseClassName, 'hidden dark:block', logoClassName), decoding: 'async', src: darkSrc })] })) : (_jsx("img", { alt: logoAlt !== null && logoAlt !== undefined ? logoAlt : label, className: PallasoftClassNameService.merge(baseClassName, logoClassName), decoding: 'async', src: src }));
     const logoContent = logoSrcMobile ? (_jsxs(_Fragment, { children: [_jsx("span", { className: 'hidden sm:contents', children: renderLogo(logoSrc, logoSrcDark, 'h-8 w-auto') }), _jsx("span", { className: 'contents sm:hidden', children: renderLogo(logoSrcMobile, logoSrcMobileDark, 'h-8 w-auto') }), showLabel ? _jsx("span", { className: 'text-base font-bold text-ink', children: label }) : null] })) : (_jsxs(_Fragment, { children: [renderLogo(logoSrc, logoSrcDark, 'h-8 w-auto'), showLabel ? _jsx("span", { className: 'text-base font-bold text-ink', children: label }) : null] }));
     const logoLink = LinkComponent ? (_jsx(LinkComponent, { "aria-label": logoLabel, className: logoLinkClassName, prefetch: 'intent', to: homeHref, children: logoContent })) : (_jsx("a", { "aria-label": logoLabel, className: logoLinkClassName, href: homeHref, children: logoContent }));
-    return (_jsx("header", { ref: headerRef, className: PallasoftClassNameService.merge('fixed inset-x-0 top-0 z-header px-6 pt-4', className), children: _jsxs("nav", { className: PallasoftClassNameService.merge('ps-glass mx-auto flex max-w-6xl items-center gap-3 rounded-ps-card px-5 py-3', navClassName), children: [onBack ? (_jsx("button", { "aria-label": 'Back', className: 'ps-focus-ring flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-ink md:hidden', onClick: onBack, type: 'button', children: _jsx(PsIcon, { iconKey: PsIconKey.ChevronRight, width: 20, height: 20, className: 'rotate-180' }) })) : null, _jsx("div", { className: onBack ? 'hidden md:flex' : 'contents', children: logoLink }), _jsx("div", { className: 'flex min-w-0 flex-1 items-center justify-center gap-3', children: centerContent }), trailing ? _jsx("div", { className: 'flex shrink-0 items-center gap-2.5', children: trailing }) : null] }) }));
+    return (_jsx("header", { ref: headerRef, className: PallasoftClassNameService.merge('fixed inset-x-0 top-0 z-header px-6 pt-4', className), children: _jsxs("nav", { className: PallasoftClassNameService.merge('ps-glass mx-auto flex max-w-6xl items-center gap-3 rounded-ps-card px-5 py-3', navClassName), children: [onBack ? (_jsx("button", { "aria-label": 'Back', className: 'ps-focus-ring ps-control-square ps-control-compact flex shrink-0 items-center justify-center rounded-ps-control text-ink md:hidden', onClick: onBack, type: 'button', children: _jsx(PsIcon, { iconKey: PsIconKey.ChevronRight, width: 20, height: 20, className: 'rotate-180' }) })) : null, _jsx("div", { className: onBack ? 'hidden md:flex' : 'contents', children: logoLink }), _jsx("div", { className: 'flex min-w-0 flex-1 items-center justify-center gap-3', children: centerContent }), trailing ? _jsx("div", { className: 'flex shrink-0 items-center gap-2.5', children: trailing }) : null] }) }));
 };

package/dist/esm/components/ps-start-preview.js

@@ -1,2 +1,2 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const PsStartPreview = ({ badge, children, note, title }) => (_jsxs("div", { className: 'rounded-2xl border border-line/60 bg-surface/60 p-5', children: [_jsxs("div", { className: 'mb-4 flex items-center justify-between', children: [_jsx("span", { className: 'text-sm font-bold text-ink', children: title }), badge === undefined ? null : (_jsx("span", { className: 'rounded-full border border-warning/40 px-2.5 py-1 text-xs font-semibold text-warning', children: badge }))] }), _jsx("ul", { className: 'flex flex-col', children: children }), note === undefined ? null : (_jsx("p", { className: 'mt-4 border-t border-line/40 pt-4 text-xs leading-5 text-ink/45', children: note }))] }));
+export const PsStartPreview = ({ badge, children, note, title }) => (_jsxs("div", { className: 'rounded-2xl border border-line/60 bg-surface/60 p-5', children: [_jsxs("div", { className: 'mb-4 flex items-center justify-between', children: [_jsx("span", { className: 'text-sm font-bold text-ink', children: title }), badge === undefined ? null : (_jsx("span", { className: 'rounded-ps-control border border-warning/40 px-2.5 py-1 text-xs font-semibold text-warning', children: badge }))] }), _jsx("ul", { className: 'flex flex-col', children: children }), note === undefined ? null : (_jsx("p", { className: 'mt-4 border-t border-line/40 pt-4 text-xs leading-5 text-ink/45', children: note }))] }));

package/dist/esm/components/ps-theme-controller.js

@@ -4,6 +4,6 @@ import { PsThemeToggle } from './ps-theme-toggle';
 export const PsThemeController = () => {
     const { resolvedMode, toggle } = usePsThemeMode();
     if (resolvedMode === null)
-        return _jsx("div", { className: 'h-11 w-11' });
+        return _jsx("div", { className: 'ps-control-square' });
     return _jsx(PsThemeToggle, { mode: resolvedMode, onClick: toggle });
 };

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

@@ -3,5 +3,5 @@ import { PallasoftClassNameService, PallasoftThemeMode, PallasoftThemeModeServic
 import { PsIcon } from '@pallasoft/ps-icons';
 export const PsThemeToggle = ({ className, mode, type = 'button', ...props }) => {
     const isDarkMode = mode === PallasoftThemeMode.Dark;
-    return (_jsxs("button", { "aria-label": isDarkMode ? 'Switch to light mode' : 'Switch to dark mode', className: 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: [_jsx(PsIcon, { className: 'h-5 w-5', iconKey: isDarkMode ? 'sun' : 'moon' }), _jsx("span", { className: 'hidden sm:inline', children: PallasoftThemeModeService.getNextMode(mode) === PallasoftThemeMode.Dark ? 'Dark' : 'Light' })] }));
+    return (_jsxs("button", { "aria-label": isDarkMode ? 'Switch to light mode' : 'Switch to dark mode', className: PallasoftClassNameService.merge('ps-focus-ring ps-glass ps-control ps-control-padding flex items-center gap-2 rounded-ps-control text-sm font-semibold text-ink transition hover:border-primary/30 hover:text-primary', className), type: type, ...props, children: [_jsx(PsIcon, { className: 'size-ps-control-icon-standalone', iconKey: isDarkMode ? 'sun' : 'moon' }), _jsx("span", { className: 'hidden sm:inline', children: PallasoftThemeModeService.getNextMode(mode) === PallasoftThemeMode.Dark ? 'Dark' : 'Light' })] }));
 };

package/dist/esm/constants/ps-button-classes.js

@@ -1,8 +1,8 @@
-export const PsButtonBaseClassName = 'ps-focus-ring relative inline-flex max-w-full items-center justify-center gap-2 rounded-full border text-center font-semibold';
+export const PsButtonBaseClassName = 'ps-focus-ring relative inline-flex max-w-full items-center justify-center gap-2 rounded-ps-control border border-ps-control text-center text-sm font-semibold leading-5';
 export const PsButtonSizeClassNames = {
-    compact: 'ps-control-compact px-3 py-2 text-sm',
-    default: 'ps-control ps-control-padding text-sm',
-    large: 'ps-control-large px-5 py-3 text-sm',
+    compact: 'ps-control-compact ps-control-padding-compact',
+    default: 'ps-control ps-control-padding',
+    large: 'ps-control-large ps-control-padding-large',
 };
 export const PsButtonVariantClassNames = {
     danger: 'border-danger bg-danger text-white enabled:hover:opacity-90',

package/dist/esm/constants/ps-drag-config.js

@@ -9,7 +9,7 @@ export const PsDragConfig = {
     touchTolerance: 6,
 };
 export const PsDragClasses = {
-    handle: 'ps-focus-ring inline-flex h-7 w-7 shrink-0 cursor-grab touch-none items-center justify-center rounded-full text-slate-400/70 transition hover:bg-white/36 hover:text-slate-600 active:cursor-grabbing dark:text-slate-300/55 dark:hover:bg-white/8 dark:hover:text-slate-100',
+    handle: 'ps-focus-ring inline-flex h-7 w-7 shrink-0 cursor-grab touch-none items-center justify-center rounded-ps-control text-slate-400/70 transition hover:bg-white/36 hover:text-slate-600 active:cursor-grabbing dark:text-slate-300/55 dark:hover:bg-white/8 dark:hover:text-slate-100',
     listItem: 'min-w-0',
     lifted: 'cursor-grabbing rounded-xl bg-surface ring-1 ring-primary/30',
     placeholder: 'outline-dashed outline-2 outline-offset-[-2px] outline-primary/35',

package/dist/esm/constants/ps-icon-action-config.js

@@ -1,5 +1,10 @@
 export const PsIconActionConfig = {
-    className: 'ps-focus-ring relative inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl text-ink/65 transition-colors hover:bg-ink/5 hover:text-ink',
+    className: 'ps-focus-ring ps-control-square relative inline-flex shrink-0 items-center justify-center rounded-ps-control text-ink/65 transition-colors hover:bg-ink/5 hover:text-ink',
     disabledClassName: 'disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent',
-    iconClassName: 'block h-5 w-5 shrink-0',
+    iconClassName: 'block size-ps-control-icon-standalone shrink-0',
+    sizeClassNames: {
+        compact: 'ps-control-compact',
+        default: '',
+        large: 'ps-control-large',
+    },
 };

package/dist/esm/constants/ps-pallasoft-sign-in-classes.js

@@ -1,11 +1,11 @@
 export const PsPallasoftSignInClasses = {
-    base: 'ps-focus-ring ps-liquid ps-liquid-control group relative inline-flex max-w-full items-center justify-center gap-3 rounded-full border border-line bg-white font-semibold text-ink shadow-sm transition duration-200 hover:-translate-y-px hover:border-primary/40 hover:shadow-md active:translate-y-0 motion-reduce:transition-none motion-reduce:hover:translate-y-0 dark:border-white/15 dark:bg-white/10 dark:text-white dark:hover:border-white/30',
+    base: 'ps-focus-ring ps-liquid ps-liquid-control group relative inline-flex max-w-full items-center justify-center gap-3 rounded-ps-control border border-line bg-white font-semibold text-ink shadow-sm transition duration-200 hover:-translate-y-px hover:border-primary/40 hover:shadow-md active:translate-y-0 motion-reduce:transition-none motion-reduce:hover:translate-y-0 dark:border-white/15 dark:bg-white/10 dark:text-white dark:hover:border-white/30',
     sizes: {
-        default: 'ps-control px-5 text-sm',
-        large: 'ps-control-large px-6 py-3 text-base',
+        default: 'ps-control ps-control-padding text-sm',
+        large: 'ps-control-large ps-control-padding-large text-sm',
     },
     markSizes: {
-        default: 'h-5 w-5',
-        large: 'h-6 w-6',
+        default: 'size-ps-control-icon-standalone',
+        large: 'size-ps-control-icon-standalone',
     },
 };

package/dist/esm/constants/ps-skeleton-config.js

@@ -16,7 +16,7 @@ export const PsSkeletonConfig = {
         [PsSkeletonShape.Text]: 'rounded-full',
     },
     shapeSizes: {
-        [PsSkeletonShape.Block]: { height: 'h-11', width: 'w-full' },
+        [PsSkeletonShape.Block]: { height: 'h-ps-control', width: 'w-full' },
         [PsSkeletonShape.Circle]: { height: 'h-9', width: 'w-9' },
         [PsSkeletonShape.Line]: { height: 'h-3', width: 'w-full' },
         [PsSkeletonShape.Text]: { height: 'h-3', width: 'w-full' },

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pallasoft/ps-core-components",
-	"version": "2.23.0",
+	"version": "2.24.0",
 	"private": false,
 	"main": "./dist/index.js",
 	"module": "./dist/esm/index.js",
@@ -35,7 +35,6 @@
 		"@dnd-kit/core": "^6.3.1",
 		"@dnd-kit/sortable": "^10.0.0",
 		"@dnd-kit/utilities": "^3.2.2",
-		"@pallasoft/ps-design-system": "^1.9.0",
 		"@pallasoft/ps-icons": "^1.5.4",
 		"@pallasoft/ps-motion-components": "^1.2.2",
 		"@pallasoft/ps-utilities": "^2.12.0",
@@ -53,6 +52,7 @@
 		"@commitlint/config-conventional": "^20.0.0",
 		"@eslint/compat": "^2.0.0",
 		"@ianvs/prettier-plugin-sort-imports": "^4.7.0",
+		"@pallasoft/ps-design-system": "^1.14.0",
 		"@semantic-release/changelog": "^6.0.3",
 		"@semantic-release/commit-analyzer": "^13.0.0",
 		"@semantic-release/git": "^10.0.1",