@rovula/ui 0.1.27 → 0.1.29

package/dist/components/TextInput/TextInput.js

@@ -16,7 +16,7 @@ import { helperTextVariant, iconActionVariant, inlineEndIconWrapperVariant, inli
 import { CircleAlert, CircleX, Search } from "lucide-react";
 import { cn } from "@/utils/cn";
 export const TextInput = forwardRef((_a, ref) => {
-    var { id, label, size = "md", rounded = "normal", variant = "outline", type = "text", iconMode = "solid", helperText, errorMessage, warningMessage, status, fullwidth = true, disabled = false, error = false, warning = false, required = true, isFloatingLabel = true, keepCloseIconOnValue = false, keepFooterSpace = true, hasClearIcon = true, hasSearchIcon = false, startIcon, endIcon, labelClassName, onClickStartIcon, onClickEndIcon, renderStartIcon, renderEndIcon, classes, normalize, format, trimOnCommit, normalizeOnCommit } = _a, props = __rest(_a, ["id", "label", "size", "rounded", "variant", "type", "iconMode", "helperText", "errorMessage", "warningMessage", "status", "fullwidth", "disabled", "error", "warning", "required", "isFloatingLabel", "keepCloseIconOnValue", "keepFooterSpace", "hasClearIcon", "hasSearchIcon", "startIcon", "endIcon", "labelClassName", "onClickStartIcon", "onClickEndIcon", "renderStartIcon", "renderEndIcon", "classes", "normalize", "format", "trimOnCommit", "normalizeOnCommit"]);
+    var { id, label, size = "md", rounded = "normal", variant = "outline", type = "text", iconMode = "flat", helperText, errorMessage, warningMessage, status, fullwidth = true, disabled = false, error = false, warning = false, required = true, isFloatingLabel = true, keepCloseIconOnValue = false, keepFooterSpace = true, hasClearIcon = true, hasSearchIcon = false, startIcon, endIcon, labelClassName, onClickStartIcon, onClickEndIcon, renderStartIcon, renderEndIcon, classes, normalize, format, trimOnCommit, normalizeOnCommit, placeholder } = _a, props = __rest(_a, ["id", "label", "size", "rounded", "variant", "type", "iconMode", "helperText", "errorMessage", "warningMessage", "status", "fullwidth", "disabled", "error", "warning", "required", "isFloatingLabel", "keepCloseIconOnValue", "keepFooterSpace", "hasClearIcon", "hasSearchIcon", "startIcon", "endIcon", "labelClassName", "onClickStartIcon", "onClickEndIcon", "renderStartIcon", "renderEndIcon", "classes", "normalize", "format", "trimOnCommit", "normalizeOnCommit", "placeholder"]);
     const inputRef = useRef(null);
     const _id = id || `${type}-${label}-input`;
     // Stable merged ref — identity never changes so Headless UI (or any library
@@ -49,6 +49,7 @@ export const TextInput = forwardRef((_a, ref) => {
         hasClearIcon: (iconMode === "flat" && hasRightSectionIcon) || hasClearIcon,
         leftSectionIcon: iconMode === "solid" ? hasLeftSectionIcon : false,
         rightSectionIcon: iconMode === "solid" ? hasRightSectionIcon : false,
+        floatingLabelPlaceholder: isFloatingLabel,
     });
     const labelClassname = labelVariant({
         size,
@@ -186,16 +187,17 @@ export const TextInput = forwardRef((_a, ref) => {
         renderEndIcon,
         handleOnClickRightSectionIcon,
     ]);
-    return (_jsxs("div", { className: `inline-flex flex-col ${fullwidth ? "w-full" : ""}`, children: [_jsxs("div", { className: "relative", children: [_jsx("input", Object.assign({}, props, { placeholder: " ", ref: stableRef, type: type, id: _id, disabled: disabled, value: displayValue, className: cn(inputClassname, props.className), onChange: normalize ? handleChange : props.onChange, onBlur: trimOnCommit || normalizeOnCommit ? handleBlur : props.onBlur, onKeyDown: trimOnCommit || normalizeOnCommit
+    const showLabel = isFloatingLabel || (label != null && String(label) !== "");
+    return (_jsxs("div", { className: `inline-flex flex-col ${fullwidth ? "w-full" : ""}`, children: [_jsxs("div", { className: "relative", children: [_jsx("input", Object.assign({}, props, { placeholder: isFloatingLabel ? " " : placeholder !== null && placeholder !== void 0 ? placeholder : "", ref: stableRef, type: type, id: _id, disabled: disabled, value: displayValue, className: cn(inputClassname, props.className), onChange: normalize ? handleChange : props.onChange, onBlur: trimOnCommit || normalizeOnCommit ? handleBlur : props.onBlur, onKeyDown: trimOnCommit || normalizeOnCommit
                             ? handleKeyDown
                             : props.onKeyDown })), hasSearchIcon && !hasLeftSectionIcon && (_jsx("div", { className: cn(inlineStartIconWrapperClassname, classes === null || classes === void 0 ? void 0 : classes.iconSearchWrapper), children: _jsx(Search, { className: cn(searchIconClassname, classes === null || classes === void 0 ? void 0 : classes.icon) }) })), startIconElement, hasClearIcon && !hasRightSectionIcon && (_jsx("div", { className: cn(inlineEndIconWrapperClassname, classes === null || classes === void 0 ? void 0 : classes.iconWrapper), style: {
                             display: keepCloseIconOnValue && props.value ? "flex" : undefined,
                         }, children: _jsx(CircleX, { className: cn(iconActionClassname, 
                             // 'fill-none stroke-current',
                             // "fill-none stroke-input-default-text hover:stroke-input-filled-text active:stroke-input-filled-text",
-                            classes === null || classes === void 0 ? void 0 : classes.icon), onMouseDown: handleClearInput }) })), endIconElement, _jsxs("label", { htmlFor: _id, className: cn(labelClassname), children: [label, " ", required && (_jsx("span", { className: cn("text-input-error", {
+                            classes === null || classes === void 0 ? void 0 : classes.icon), onMouseDown: handleClearInput }) })), endIconElement, showLabel && (_jsxs("label", { htmlFor: _id, className: cn(labelClassname, labelClassName), children: [label, " ", required && (_jsx("span", { className: cn("text-input-error", {
                                     "text-input-disable-text": disabled,
-                                }), children: "*" }))] })] }), (feedbackMessage || keepFooterSpace) && (_jsxs("span", { className: helperTextClassname, children: [feedbackMessage && (_jsx("span", { className: "h-full shrink-0", children: _jsx(CircleAlert, { width: 14, height: 14, className: cn("fill-none stroke-current", isError
+                                }), children: "*" }))] }))] }), (feedbackMessage || keepFooterSpace) && (_jsxs("span", { className: helperTextClassname, children: [feedbackMessage && (_jsx("span", { className: "h-full shrink-0", children: _jsx(CircleAlert, { width: 14, height: 14, className: cn("fill-none stroke-current", isError
                                 ? "text-input-error"
                                 : isWarning
                                     ? "text-warning"

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

@@ -29,6 +29,14 @@ export const Default = {
         return (_jsxs("div", { className: "flex flex-row gap-4 w-full", children: [_jsx(TextInput, Object.assign({ id: "1", size: "lg" }, args)), _jsx(TextInput, Object.assign({ id: "2", size: "md" }, args)), _jsx(TextInput, Object.assign({ id: "3", size: "sm" }, args))] }));
     },
 };
+/**
+ * `isFloatingLabel={false}` — visible **`placeholder`**, no floating animation,
+ * and no inner `<label>` when `label` is empty (e.g. table cells, compact filters).
+ * 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]" }) })] })] })),
+};
 const InputWithRef = (props) => {
     const inputRef = useRef(null);
     return (_jsx(TextInput, Object.assign({ id: "1", size: "lg" }, props, { ref: inputRef, labelClassName: "peer-focus:bg-red-500", onKeyDown: (e) => {

package/dist/components/TextInput/TextInput.styles.js

@@ -3,9 +3,14 @@ export const inputVariant = cva([
     "truncate",
     "border-0 outline-none",
     "flex w-auto box-border",
-    "peer text-input-filled-text placeholder:text-transparent bg-transparent caret-primary",
+    "peer text-input-filled-text bg-transparent caret-primary",
 ], {
     variants: {
+        /** When `true`, placeholder is transparent — floating label uses a space placeholder. */
+        floatingLabelPlaceholder: {
+            true: "placeholder:text-transparent",
+            false: "placeholder:text-input-default-text",
+        },
         size: {
             sm: "p-2 px-3 typography-small1",
             md: "py-2 px-3 typography-subtitle4",
@@ -140,6 +145,7 @@ export const inputVariant = cva([
         hasSearchIcon: false,
         leftSectionIcon: false, // TODO function style
         rightSectionIcon: false,
+        floatingLabelPlaceholder: true,
     },
 });
 export const labelVariant = cva([