@rovula/ui 0.1.33 → 0.1.35

package/dist/cjs/types/patterns/form-dialog/FormDialog.d.ts

@@ -31,6 +31,11 @@ export type FormDialogProps = {
     extraAction?: FormDialogAction;
     scrollable?: boolean;
     className?: string;
+    headerClassName?: string;
+    titleClassName?: string;
+    descriptionClassName?: string;
+    bodyClassName?: string;
+    footerClassName?: string;
     /**
      * When provided, the confirm button becomes type="submit" and is linked to this form id.
      * Use together with a <Form id={formId} .../> inside children.

package/dist/cjs/types/patterns/form-dialog/FormDialog.stories.d.ts

@@ -20,6 +20,11 @@ declare const meta: {
         extraAction?: import("./FormDialog").FormDialogAction | undefined;
         scrollable?: boolean | undefined;
         className?: string | undefined;
+        headerClassName?: string | undefined;
+        titleClassName?: string | undefined;
+        descriptionClassName?: string | undefined;
+        bodyClassName?: string | undefined;
+        footerClassName?: string | undefined;
         formId?: string | undefined;
         testId?: string | undefined;
     }>) => import("react/jsx-runtime").JSX.Element)[];

package/dist/components/Popover/Popover.js

@@ -18,7 +18,7 @@ const Popover = PopoverPrimitive.Root;
 const PopoverTrigger = PopoverPrimitive.Trigger;
 const PopoverContent = React.forwardRef((_a, ref) => {
     var { className, align = "center", sideOffset = 4 } = _a, props = __rest(_a, ["className", "align", "sideOffset"]);
-    return (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Content, Object.assign({ ref: ref, align: align, sideOffset: sideOffset, className: cn("z-50 min-w-72 rounded-md border bg-modal-surface border-bg-stroke3 overflow-hidden p-0 text-text-g-contrast-medium shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className) }, props)) }));
+    return (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Content, Object.assign({ ref: ref, align: align, sideOffset: sideOffset, className: cn("z-50 min-w-72 rounded-md border bg-modal-surface border-bg-stroke3 overflow-hidden p-0 text-text-contrast-max shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className) }, props)) }));
 });
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 export { Popover, PopoverTrigger, PopoverContent };

package/dist/components/TextInput/TextInput.js

@@ -25,11 +25,7 @@ export const TextInput = forwardRef((_a, ref) => {
     const hasLeftSectionIcon = !!startIcon || !!renderStartIcon;
     const hasRightSectionIcon = !!endIcon || !!renderEndIcon;
     const feedbackStatus = status ||
-        (error || !!errorMessage
-            ? "error"
-            : warning || !!warningMessage
-                ? "warning"
-                : "default");
+        (error ? "error" : warning || !!warningMessage ? "warning" : "default");
     const isError = feedbackStatus === "error";
     const isWarning = feedbackStatus === "warning";
     const feedbackMessage = feedbackStatus === "error"

package/dist/components/TextInput/TextInput.stories.js

@@ -35,7 +35,7 @@ export const Default = {
  * Pair with `required={false}` + `hasClearIcon={false}` when mimicking inline fields.
  */
 export const NonFloatingLabel = {
-    render: () => (_jsxs("div", { className: "flex w-full max-w-4xl flex-col gap-8", children: [_jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("h4", { className: "typography-subtitle4 text-text-g-contrast-medium", children: ["Placeholder only \u2014 empty ", _jsx("code", { className: "typography-small2", children: "label" }), " ", "(no floating label, no label node)"] }), _jsx("p", { className: "typography-small2 text-text-g-contrast-low max-w-2xl", children: "Tab order follows DOM, like native inputs in a row." }), _jsxs("div", { className: "flex flex-row flex-wrap items-end gap-4", children: [_jsx(TextInput, { id: "nf-cell-lg", size: "lg", isFloatingLabel: false, label: "", required: false, hasClearIcon: false, keepFooterSpace: false, placeholder: "Column name", fullwidth: false, "aria-label": "Column name" }), _jsx(TextInput, { id: "nf-cell-md", size: "md", isFloatingLabel: false, label: "", required: false, hasClearIcon: false, keepFooterSpace: false, placeholder: "Column name", fullwidth: false, "aria-label": "Column name" }), _jsx(TextInput, { id: "nf-cell-sm", size: "sm", isFloatingLabel: false, label: "", required: false, hasClearIcon: false, keepFooterSpace: false, placeholder: "Column name", fullwidth: false, "aria-label": "Column name" })] })] }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("h4", { className: "typography-subtitle4 text-text-g-contrast-medium", children: "Static label inside field (non-floating layout)" }), _jsx("div", { className: "flex flex-row flex-wrap gap-4", children: _jsx(TextInput, { id: "nf-static-md", size: "md", isFloatingLabel: false, label: "Department", required: false, hasClearIcon: true, keepFooterSpace: true, placeholder: "e.g. Engineering", helperText: "Shown as fixed label + real placeholder.", fullwidth: false, className: "min-w-[240px]" }) })] })] })),
+    render: () => (_jsxs("div", { className: "flex w-full max-w-4xl flex-col gap-8", children: [_jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("h4", { className: "typography-subtitle4 text-text-g-contrast-medium", children: ["Placeholder only \u2014 empty", " ", _jsx("code", { className: "typography-small2", children: "label" }), " (no floating label, no label node)"] }), _jsx("p", { className: "typography-small2 text-text-g-contrast-low max-w-2xl", children: "Tab order follows DOM, like native inputs in a row." }), _jsxs("div", { className: "flex flex-row flex-wrap items-end gap-4", children: [_jsx(TextInput, { id: "nf-cell-lg", size: "lg", isFloatingLabel: false, label: "", required: false, hasClearIcon: false, keepFooterSpace: false, placeholder: "Column name", fullwidth: false, "aria-label": "Column name" }), _jsx(TextInput, { id: "nf-cell-md", size: "md", isFloatingLabel: false, label: "", required: false, hasClearIcon: false, keepFooterSpace: false, placeholder: "Column name", fullwidth: false, "aria-label": "Column name" }), _jsx(TextInput, { id: "nf-cell-sm", size: "sm", isFloatingLabel: false, label: "", required: false, hasClearIcon: false, keepFooterSpace: false, placeholder: "Column name", fullwidth: false, "aria-label": "Column name" })] })] }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("h4", { className: "typography-subtitle4 text-text-g-contrast-medium", children: "Static label inside field (non-floating layout)" }), _jsx("div", { className: "flex flex-row flex-wrap gap-4", children: _jsx(TextInput, { id: "nf-static-md", size: "md", isFloatingLabel: false, label: "Department", required: false, hasClearIcon: true, keepFooterSpace: true, placeholder: "e.g. Engineering", helperText: "Shown as fixed label + real placeholder.", fullwidth: false, className: "min-w-[240px]" }) })] })] })),
 };
 const InputWithRef = (props) => {
     const inputRef = useRef(null);
@@ -125,7 +125,7 @@ export const Format = {
 };
 const TrimOnCommitDemo = () => {
     const [value, setValue] = useState("");
-    return (_jsxs("div", { className: "flex flex-col gap-6 w-full max-w-md", children: [_jsxs("p", { className: "text-sm text-text-g-contrast-low", children: [_jsx("code", { children: "trimOnCommit" }), " trims leading and trailing whitespace when the user blurs the input or presses Enter. Try typing", " ", _jsx("code", { children: "\"hello   \"" }), " then click outside or press Enter."] }), _jsx(TextInput, { id: "trim-commit-demo", label: "Name", size: "lg", keepFooterSpace: true, helperText: `Stored value: "${value}"`, value: value, trimOnCommit: true, onChange: (e) => setValue(e.target.value) })] }));
+    return (_jsxs("div", { className: "flex flex-col gap-6 w-full max-w-md", children: [_jsxs("p", { className: "text-sm text-text-g-contrast-low", children: [_jsx("code", { children: "trimOnCommit" }), " trims leading and trailing whitespace when the user blurs the input or presses Enter. Try typing ", _jsx("code", { children: "\"hello \"" }), " ", "then click outside or press Enter."] }), _jsx(TextInput, { id: "trim-commit-demo", label: "Name", size: "lg", keepFooterSpace: true, helperText: `Stored value: "${value}"`, value: value, trimOnCommit: true, onChange: (e) => setValue(e.target.value) })] }));
 };
 export const TrimOnCommit = {
     render: () => _jsx(TrimOnCommitDemo, {}),