@pallasoft/ps-input-components 3.3.1 → 3.3.3

package/dist/components/ps-checkbox.js

@@ -5,7 +5,7 @@ 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 react_aria_components_1 = require("react-aria-components");
-const PsCheckbox = ({ children, className, isDisabled, isIndeterminate, isLoading = false, isSelected, label, name, onChange, value, }) => isLoading ? ((0, jsx_runtime_1.jsx)("span", { "aria-busy": 'true', className: ps_design_system_1.PallasoftClassNameService.merge('ps-skeleton inline-block h-5 w-5 rounded-md', className), role: 'status', children: (0, jsx_runtime_1.jsx)("span", { className: 'sr-only', children: label }) })) : ((0, jsx_runtime_1.jsx)(react_aria_components_1.Checkbox, { "aria-label": children ? undefined : label, className: ps_design_system_1.PallasoftClassNameService.merge('group inline-flex cursor-pointer items-center gap-3 text-sm text-ink outline-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-45', className), isDisabled: isDisabled, isIndeterminate: isIndeterminate, isSelected: isSelected, name: name, onChange: onChange, value: value, children: ({ isIndeterminate: showDash, isSelected: showCheck }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: ps_design_system_1.PallasoftClassNameService.merge('flex h-[1.125rem] w-[1.125rem] shrink-0 items-center justify-center rounded-[0.35rem] border transition-colors duration-150 group-data-[focus-visible]:outline group-data-[focus-visible]:outline-2 group-data-[focus-visible]:outline-offset-2 group-data-[focus-visible]:outline-[rgb(var(--ps-color-primary-rgb))]', showCheck || showDash
+const PsCheckbox = ({ children, className, isDisabled, isIndeterminate, isLoading = false, isSelected, label, name, onChange, value, }) => isLoading ? ((0, jsx_runtime_1.jsx)("span", { "aria-busy": 'true', className: ps_design_system_1.PallasoftClassNameService.merge('ps-skeleton inline-block h-[1.125rem] w-[1.125rem] rounded-[0.35rem]', className), role: 'status', children: (0, jsx_runtime_1.jsx)("span", { className: 'sr-only', children: label }) })) : ((0, jsx_runtime_1.jsx)(react_aria_components_1.Checkbox, { "aria-label": children ? undefined : label, className: ps_design_system_1.PallasoftClassNameService.merge('group inline-flex cursor-pointer items-center gap-3 text-sm text-ink outline-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-45', className), isDisabled: isDisabled, isIndeterminate: isIndeterminate, isSelected: isSelected, name: name, onChange: onChange, value: value, children: ({ isIndeterminate: showDash, isSelected: showCheck }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: ps_design_system_1.PallasoftClassNameService.merge('flex h-[1.125rem] w-[1.125rem] shrink-0 items-center justify-center rounded-[0.35rem] border transition-colors duration-150 group-data-[focus-visible]:outline group-data-[focus-visible]:outline-2 group-data-[focus-visible]:outline-offset-2 group-data-[focus-visible]:outline-[rgb(var(--ps-color-primary-rgb))]', showCheck || showDash
                     ? 'border-primary bg-primary text-[color:var(--ps-color-primary-contrast)]'
                     : 'border-line bg-surface group-hover:border-primary/60 dark:border-white/20'), children: showDash ? ((0, jsx_runtime_1.jsx)("span", { className: 'block h-0.5 w-2.5 rounded-full bg-current' })) : showCheck ? ((0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'block h-3.5 w-3.5', iconKey: ps_icons_1.PsIconKey.Check, strokeWidth: 3 })) : null }), children] })) }));
 exports.PsCheckbox = PsCheckbox;

package/dist/components/ps-portable-text-editor.d.ts

@@ -3,10 +3,11 @@ import type { PsPortableTextEditorLabels } from '../portable-text-core/interface
 export interface PsPortableTextEditorProps {
     className?: string;
     disabled?: boolean;
+    invalid?: boolean;
     labels?: PsPortableTextEditorLabels;
     minRows?: number;
     onChange: (value: PortableTextBlock[]) => void;
     placeholder?: string;
     value: PortableTextBlock[];
 }
-export declare const PsPortableTextEditor: ({ className, disabled, labels, minRows, onChange, placeholder, value, }: PsPortableTextEditorProps) => import("react").JSX.Element;
+export declare const PsPortableTextEditor: ({ className, disabled, invalid, labels, minRows, onChange, placeholder, value, }: PsPortableTextEditorProps) => import("react").JSX.Element;

package/dist/components/ps-portable-text-editor.js

@@ -8,5 +8,5 @@ const ps_portable_text_core_1 = require("../portable-text-core/components/ps-por
 const ps_portable_text_core_config_1 = require("../portable-text-core/constants/ps-portable-text-core-config");
 const ps_portable_text_editor_service_1 = require("../portable-text-core/services/ps-portable-text-editor-service");
 const ps_portable_text_toolbar_1 = require("./ps-portable-text-toolbar");
-const PsPortableTextEditor = ({ className, disabled = false, labels = ps_portable_text_core_config_1.PsPortableTextCoreConfig.labels, minRows = 4, onChange, placeholder, value, }) => ((0, jsx_runtime_1.jsx)(ps_portable_text_core_1.PsPortableTextCore, { className: ps_design_system_1.PallasoftClassNameService.merge(ps_portable_text_editor_config_1.PsPortableTextEditorConfig.classNames.root, className), classNames: ps_portable_text_editor_config_1.PsPortableTextEditorConfig.contentClassNames, disabled: disabled, editableClassName: ps_portable_text_editor_config_1.PsPortableTextEditorConfig.classNames.editable, fallback: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { "aria-hidden": 'true', className: ps_portable_text_editor_config_1.PsPortableTextEditorConfig.classNames.toolbar, children: (0, jsx_runtime_1.jsx)("span", { className: 'h-9' }) }), (0, jsx_runtime_1.jsx)("div", { "aria-hidden": 'true', className: ps_portable_text_editor_config_1.PsPortableTextEditorConfig.classNames.editable, style: { minHeight: ps_portable_text_editor_service_1.PsPortableTextEditorService.minHeight(minRows) } })] }), label: labels.editor, minRows: minRows, onChange: onChange, placeholder: placeholder, toolbar: (0, jsx_runtime_1.jsx)(ps_portable_text_toolbar_1.PsPortableTextToolbar, { disabled: disabled, labels: labels }), value: value }));
+const PsPortableTextEditor = ({ className, disabled = false, invalid = false, labels = ps_portable_text_core_config_1.PsPortableTextCoreConfig.labels, minRows = 4, onChange, placeholder, value, }) => ((0, jsx_runtime_1.jsx)(ps_portable_text_core_1.PsPortableTextCore, { className: ps_design_system_1.PallasoftClassNameService.merge(ps_portable_text_editor_config_1.PsPortableTextEditorConfig.classNames.root, invalid && ps_portable_text_editor_config_1.PsPortableTextEditorConfig.classNames.invalid, disabled && ps_portable_text_editor_config_1.PsPortableTextEditorConfig.classNames.disabled, className), classNames: ps_portable_text_editor_config_1.PsPortableTextEditorConfig.contentClassNames, disabled: disabled, editableClassName: ps_portable_text_editor_config_1.PsPortableTextEditorConfig.classNames.editable, fallback: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { "aria-hidden": 'true', className: ps_portable_text_editor_config_1.PsPortableTextEditorConfig.classNames.toolbar, children: (0, jsx_runtime_1.jsx)("span", { className: 'h-9' }) }), (0, jsx_runtime_1.jsx)("div", { "aria-hidden": 'true', className: ps_portable_text_editor_config_1.PsPortableTextEditorConfig.classNames.editable, style: { minHeight: ps_portable_text_editor_service_1.PsPortableTextEditorService.minHeight(minRows) } })] }), label: labels.editor, minRows: minRows, onChange: onChange, placeholder: placeholder, toolbar: (0, jsx_runtime_1.jsx)(ps_portable_text_toolbar_1.PsPortableTextToolbar, { disabled: disabled, labels: labels }), value: value }));
 exports.PsPortableTextEditor = PsPortableTextEditor;

package/dist/constants/ps-portable-text-editor-config.d.ts

@@ -1,8 +1,10 @@
 export declare const PsPortableTextEditorConfig: {
     readonly classNames: {
-        readonly editable: "ps-input-control w-full resize-none overflow-y-auto rounded-t-none border-t-0 leading-6 outline-none";
-        readonly root: "block";
-        readonly toolbar: "flex flex-wrap items-center gap-1 rounded-t-ps-control border border-line bg-white p-1 dark:bg-transparent";
+        readonly editable: "w-full resize-none overflow-y-auto border-0 bg-transparent px-3 py-2 leading-6 text-ink shadow-none outline-none focus:outline-none focus-visible:outline-none";
+        readonly disabled: "cursor-not-allowed opacity-50";
+        readonly invalid: "border-danger";
+        readonly root: "block overflow-hidden rounded-ps-control border border-line bg-white has-[:focus-visible]:outline has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-primary dark:bg-transparent";
+        readonly toolbar: "flex flex-wrap items-center gap-1 border-b border-line p-1";
         readonly button: "ps-focus-ring ps-control-compact inline-flex min-w-ps-control-compact items-center justify-center rounded-ps-control px-2 text-sm text-ink/70 transition-colors hover:bg-ink/5 hover:text-ink disabled:cursor-not-allowed disabled:opacity-40";
         readonly buttonActive: "bg-primary text-white hover:bg-primary hover:text-white";
         readonly separator: "mx-1 h-5 w-px bg-line";

package/dist/constants/ps-portable-text-editor-config.js

@@ -3,9 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsPortableTextEditorConfig = void 0;
 exports.PsPortableTextEditorConfig = {
     classNames: {
-        editable: 'ps-input-control w-full resize-none overflow-y-auto rounded-t-none border-t-0 leading-6 outline-none',
-        root: 'block',
-        toolbar: 'flex flex-wrap items-center gap-1 rounded-t-ps-control border border-line bg-white p-1 dark:bg-transparent',
+        editable: 'w-full resize-none overflow-y-auto border-0 bg-transparent px-3 py-2 leading-6 text-ink shadow-none outline-none focus:outline-none focus-visible:outline-none',
+        disabled: 'cursor-not-allowed opacity-50',
+        invalid: 'border-danger',
+        root: 'block overflow-hidden rounded-ps-control border border-line bg-white has-[:focus-visible]:outline has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-primary dark:bg-transparent',
+        toolbar: 'flex flex-wrap items-center gap-1 border-b border-line p-1',
         button: 'ps-focus-ring ps-control-compact inline-flex min-w-ps-control-compact items-center justify-center rounded-ps-control px-2 text-sm text-ink/70 transition-colors hover:bg-ink/5 hover:text-ink disabled:cursor-not-allowed disabled:opacity-40',
         buttonActive: 'bg-primary text-white hover:bg-primary hover:text-white',
         separator: 'mx-1 h-5 w-px bg-line',

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

@@ -2,6 +2,6 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
 import { PsIcon, PsIconKey } from '@pallasoft/ps-icons';
 import { Checkbox } from 'react-aria-components';
-export const PsCheckbox = ({ children, className, isDisabled, isIndeterminate, isLoading = false, isSelected, label, name, onChange, value, }) => isLoading ? (_jsx("span", { "aria-busy": 'true', className: PallasoftClassNameService.merge('ps-skeleton inline-block h-5 w-5 rounded-md', className), role: 'status', children: _jsx("span", { className: 'sr-only', children: label }) })) : (_jsx(Checkbox, { "aria-label": children ? undefined : label, className: PallasoftClassNameService.merge('group inline-flex cursor-pointer items-center gap-3 text-sm text-ink outline-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-45', className), isDisabled: isDisabled, isIndeterminate: isIndeterminate, isSelected: isSelected, name: name, onChange: onChange, value: value, children: ({ isIndeterminate: showDash, isSelected: showCheck }) => (_jsxs(_Fragment, { children: [_jsx("span", { className: PallasoftClassNameService.merge('flex h-[1.125rem] w-[1.125rem] shrink-0 items-center justify-center rounded-[0.35rem] border transition-colors duration-150 group-data-[focus-visible]:outline group-data-[focus-visible]:outline-2 group-data-[focus-visible]:outline-offset-2 group-data-[focus-visible]:outline-[rgb(var(--ps-color-primary-rgb))]', showCheck || showDash
+export const PsCheckbox = ({ children, className, isDisabled, isIndeterminate, isLoading = false, isSelected, label, name, onChange, value, }) => isLoading ? (_jsx("span", { "aria-busy": 'true', className: PallasoftClassNameService.merge('ps-skeleton inline-block h-[1.125rem] w-[1.125rem] rounded-[0.35rem]', className), role: 'status', children: _jsx("span", { className: 'sr-only', children: label }) })) : (_jsx(Checkbox, { "aria-label": children ? undefined : label, className: PallasoftClassNameService.merge('group inline-flex cursor-pointer items-center gap-3 text-sm text-ink outline-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-45', className), isDisabled: isDisabled, isIndeterminate: isIndeterminate, isSelected: isSelected, name: name, onChange: onChange, value: value, children: ({ isIndeterminate: showDash, isSelected: showCheck }) => (_jsxs(_Fragment, { children: [_jsx("span", { className: PallasoftClassNameService.merge('flex h-[1.125rem] w-[1.125rem] shrink-0 items-center justify-center rounded-[0.35rem] border transition-colors duration-150 group-data-[focus-visible]:outline group-data-[focus-visible]:outline-2 group-data-[focus-visible]:outline-offset-2 group-data-[focus-visible]:outline-[rgb(var(--ps-color-primary-rgb))]', showCheck || showDash
                     ? 'border-primary bg-primary text-[color:var(--ps-color-primary-contrast)]'
                     : 'border-line bg-surface group-hover:border-primary/60 dark:border-white/20'), children: showDash ? (_jsx("span", { className: 'block h-0.5 w-2.5 rounded-full bg-current' })) : showCheck ? (_jsx(PsIcon, { "aria-hidden": 'true', className: 'block h-3.5 w-3.5', iconKey: PsIconKey.Check, strokeWidth: 3 })) : null }), children] })) }));

package/dist/esm/components/ps-portable-text-editor.js

@@ -5,4 +5,4 @@ import { PsPortableTextCore } from '../portable-text-core/components/ps-portable
 import { PsPortableTextCoreConfig } from '../portable-text-core/constants/ps-portable-text-core-config';
 import { PsPortableTextEditorService } from '../portable-text-core/services/ps-portable-text-editor-service';
 import { PsPortableTextToolbar } from './ps-portable-text-toolbar';
-export const PsPortableTextEditor = ({ className, disabled = false, labels = PsPortableTextCoreConfig.labels, minRows = 4, onChange, placeholder, value, }) => (_jsx(PsPortableTextCore, { className: PallasoftClassNameService.merge(PsPortableTextEditorConfig.classNames.root, className), classNames: PsPortableTextEditorConfig.contentClassNames, disabled: disabled, editableClassName: PsPortableTextEditorConfig.classNames.editable, fallback: _jsxs(_Fragment, { children: [_jsx("div", { "aria-hidden": 'true', className: PsPortableTextEditorConfig.classNames.toolbar, children: _jsx("span", { className: 'h-9' }) }), _jsx("div", { "aria-hidden": 'true', className: PsPortableTextEditorConfig.classNames.editable, style: { minHeight: PsPortableTextEditorService.minHeight(minRows) } })] }), label: labels.editor, minRows: minRows, onChange: onChange, placeholder: placeholder, toolbar: _jsx(PsPortableTextToolbar, { disabled: disabled, labels: labels }), value: value }));
+export const PsPortableTextEditor = ({ className, disabled = false, invalid = false, labels = PsPortableTextCoreConfig.labels, minRows = 4, onChange, placeholder, value, }) => (_jsx(PsPortableTextCore, { className: PallasoftClassNameService.merge(PsPortableTextEditorConfig.classNames.root, invalid && PsPortableTextEditorConfig.classNames.invalid, disabled && PsPortableTextEditorConfig.classNames.disabled, className), classNames: PsPortableTextEditorConfig.contentClassNames, disabled: disabled, editableClassName: PsPortableTextEditorConfig.classNames.editable, fallback: _jsxs(_Fragment, { children: [_jsx("div", { "aria-hidden": 'true', className: PsPortableTextEditorConfig.classNames.toolbar, children: _jsx("span", { className: 'h-9' }) }), _jsx("div", { "aria-hidden": 'true', className: PsPortableTextEditorConfig.classNames.editable, style: { minHeight: PsPortableTextEditorService.minHeight(minRows) } })] }), label: labels.editor, minRows: minRows, onChange: onChange, placeholder: placeholder, toolbar: _jsx(PsPortableTextToolbar, { disabled: disabled, labels: labels }), value: value }));

package/dist/esm/constants/ps-portable-text-editor-config.js

@@ -1,8 +1,10 @@
 export const PsPortableTextEditorConfig = {
     classNames: {
-        editable: 'ps-input-control w-full resize-none overflow-y-auto rounded-t-none border-t-0 leading-6 outline-none',
-        root: 'block',
-        toolbar: 'flex flex-wrap items-center gap-1 rounded-t-ps-control border border-line bg-white p-1 dark:bg-transparent',
+        editable: 'w-full resize-none overflow-y-auto border-0 bg-transparent px-3 py-2 leading-6 text-ink shadow-none outline-none focus:outline-none focus-visible:outline-none',
+        disabled: 'cursor-not-allowed opacity-50',
+        invalid: 'border-danger',
+        root: 'block overflow-hidden rounded-ps-control border border-line bg-white has-[:focus-visible]:outline has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-primary dark:bg-transparent',
+        toolbar: 'flex flex-wrap items-center gap-1 border-b border-line p-1',
         button: 'ps-focus-ring ps-control-compact inline-flex min-w-ps-control-compact items-center justify-center rounded-ps-control px-2 text-sm text-ink/70 transition-colors hover:bg-ink/5 hover:text-ink disabled:cursor-not-allowed disabled:opacity-40',
         buttonActive: 'bg-primary text-white hover:bg-primary hover:text-white',
         separator: 'mx-1 h-5 w-px bg-line',

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pallasoft/ps-input-components",
-	"version": "3.3.1",
+	"version": "3.3.3",
 	"private": false,
 	"main": "./dist/index.js",
 	"module": "./dist/esm/index.js",