@rufous/ui 0.2.99 → 0.2.100

package/dist/main.cjs

@@ -1805,15 +1805,20 @@ var TextField = (0, import_react17.forwardRef)(({
   slotProps,
   InputProps,
   numberVariant,
+  multiline = false,
+  rows,
+  maxRows,
   ...props
 }, ref) => {
   const sxClass = useSx(sx);
-  const inputId = id || name || `tf-${Math.random().toString(36).substr(2, 9)}`;
+  const inputId = id || name || `tf-${Math.random().toString(36).substring(2, 11)}`;
+  const isTextarea = multiline || rows !== void 0 && rows > 1;
+  const resolvedRows = rows ?? (multiline ? 4 : void 0);
   const isFloating = Boolean(
     value !== void 0 && value !== "" || type === "date" || type === "time" || type === "datetime-local"
   );
   const hasLabel = Boolean(label);
-  const readOnly = slotProps?.input?.readOnly;
+  const readOnly = isTextarea ? slotProps?.textarea?.readOnly : slotProps?.input?.readOnly;
   const rootClasses = [
     "rf-text-field",
     `rf-text-field--${variant}`,
@@ -1826,7 +1831,8 @@ var TextField = (0, import_react17.forwardRef)(({
     hasLabel ? "rf-text-field--has-label" : "",
     InputProps?.startAdornment ? "rf-text-field--adorned-start" : "",
     InputProps?.endAdornment ? "rf-text-field--adorned-end" : "",
-    type === "number" && !disabled && !readOnly ? "rf-text-field--has-number-controls" : "",
+    isTextarea ? "rf-text-field--multiline" : "",
+    !isTextarea && type === "number" && !disabled && !readOnly ? "rf-text-field--has-number-controls" : "",
     sxClass,
     className
   ].filter(Boolean).join(" ");
@@ -1901,11 +1907,26 @@ var TextField = (0, import_react17.forwardRef)(({
         }
       }
     }
-    if (props.onKeyDown) {
-      props.onKeyDown(e);
-    }
+    if (props.onKeyDown) props.onKeyDown(e);
   };
-  return /* @__PURE__ */ import_react17.default.createElement("div", { ref, className: rootClasses, style }, /* @__PURE__ */ import_react17.default.createElement("div", { className: `rf-text-field__wrapper ${InputProps?.className || ""}`, style: InputProps?.style }, InputProps?.startAdornment && /* @__PURE__ */ import_react17.default.createElement("div", { className: "rf-text-field__adornment rf-text-field__adornment--start" }, InputProps.startAdornment), /* @__PURE__ */ import_react17.default.createElement(
+  const textareaStyle = maxRows ? { maxHeight: `calc(${maxRows} * var(--tf-line-height, 1.5em) + var(--tf-textarea-vpad, 18px) * 2)`, overflowY: "auto" } : {};
+  return /* @__PURE__ */ import_react17.default.createElement("div", { ref, className: rootClasses, style }, /* @__PURE__ */ import_react17.default.createElement("div", { className: `rf-text-field__wrapper ${InputProps?.className || ""}`, style: InputProps?.style }, InputProps?.startAdornment && /* @__PURE__ */ import_react17.default.createElement("div", { className: "rf-text-field__adornment rf-text-field__adornment--start" }, InputProps.startAdornment), isTextarea ? /* @__PURE__ */ import_react17.default.createElement(
+    "textarea",
+    {
+      id: inputId,
+      name,
+      className: "rf-text-field__input rf-text-field__textarea",
+      placeholder: placeholder || (variant === "outlined" ? " " : void 0),
+      value,
+      rows: resolvedRows,
+      required,
+      disabled,
+      readOnly,
+      style: textareaStyle,
+      ...slotProps?.textarea,
+      onChange
+    }
+  ) : /* @__PURE__ */ import_react17.default.createElement(
     "input",
     {
       ref: internalRef,
@@ -1925,7 +1946,7 @@ var TextField = (0, import_react17.forwardRef)(({
       ...props,
       onChange: handleChange
     }
-  ), InputProps?.endAdornment && /* @__PURE__ */ import_react17.default.createElement("div", { className: "rf-text-field__adornment rf-text-field__adornment--end" }, InputProps.endAdornment), type === "number" && !disabled && !readOnly && /* @__PURE__ */ import_react17.default.createElement("div", { className: "rf-text-field__number-controls" }, /* @__PURE__ */ import_react17.default.createElement("button", { type: "button", tabIndex: -1, onClick: handleIncrement, className: "rf-text-field__number-btn" }, /* @__PURE__ */ import_react17.default.createElement("svg", { width: "8", height: "5", viewBox: "0 0 8 5", fill: "currentColor" }, /* @__PURE__ */ import_react17.default.createElement("path", { d: "M4 0L8 5H0L4 0Z" }))), /* @__PURE__ */ import_react17.default.createElement("button", { type: "button", tabIndex: -1, onClick: handleDecrement, className: "rf-text-field__number-btn", style: { marginTop: 2 } }, /* @__PURE__ */ import_react17.default.createElement("svg", { width: "8", height: "5", viewBox: "0 0 8 5", fill: "currentColor" }, /* @__PURE__ */ import_react17.default.createElement("path", { d: "M4 5L0 0H8L4 5Z" })))), hasLabel && /* @__PURE__ */ import_react17.default.createElement("label", { htmlFor: inputId, className: "rf-text-field__label" }, label, " ", required && /* @__PURE__ */ import_react17.default.createElement("span", { className: "rf-text-field__asterisk" }, "*")), variant === "outlined" && /* @__PURE__ */ import_react17.default.createElement("fieldset", { className: "rf-text-field__notch" }, hasLabel ? /* @__PURE__ */ import_react17.default.createElement("legend", { className: "rf-text-field__legend" }, /* @__PURE__ */ import_react17.default.createElement("span", null, label, " ", required ? "*" : "")) : /* @__PURE__ */ import_react17.default.createElement("legend", { className: "rf-text-field__legend--empty" }))), helperText && /* @__PURE__ */ import_react17.default.createElement("div", { className: "rf-text-field__helper-text" }, helperText));
+  ), InputProps?.endAdornment && /* @__PURE__ */ import_react17.default.createElement("div", { className: "rf-text-field__adornment rf-text-field__adornment--end" }, InputProps.endAdornment), !isTextarea && type === "number" && !disabled && !readOnly && /* @__PURE__ */ import_react17.default.createElement("div", { className: "rf-text-field__number-controls" }, /* @__PURE__ */ import_react17.default.createElement("button", { type: "button", tabIndex: -1, onClick: handleIncrement, className: "rf-text-field__number-btn" }, /* @__PURE__ */ import_react17.default.createElement("svg", { width: "8", height: "5", viewBox: "0 0 8 5", fill: "currentColor" }, /* @__PURE__ */ import_react17.default.createElement("path", { d: "M4 0L8 5H0L4 0Z" }))), /* @__PURE__ */ import_react17.default.createElement("button", { type: "button", tabIndex: -1, onClick: handleDecrement, className: "rf-text-field__number-btn", style: { marginTop: 2 } }, /* @__PURE__ */ import_react17.default.createElement("svg", { width: "8", height: "5", viewBox: "0 0 8 5", fill: "currentColor" }, /* @__PURE__ */ import_react17.default.createElement("path", { d: "M4 5L0 0H8L4 5Z" })))), hasLabel && /* @__PURE__ */ import_react17.default.createElement("label", { htmlFor: inputId, className: "rf-text-field__label" }, label, " ", required && /* @__PURE__ */ import_react17.default.createElement("span", { className: "rf-text-field__asterisk" }, "*")), variant === "outlined" && /* @__PURE__ */ import_react17.default.createElement("fieldset", { className: "rf-text-field__notch" }, hasLabel ? /* @__PURE__ */ import_react17.default.createElement("legend", { className: "rf-text-field__legend" }, /* @__PURE__ */ import_react17.default.createElement("span", null, label, " ", required ? "*" : "")) : /* @__PURE__ */ import_react17.default.createElement("legend", { className: "rf-text-field__legend--empty" }))), helperText && /* @__PURE__ */ import_react17.default.createElement("div", { className: "rf-text-field__helper-text" }, helperText));
 });
 TextField.displayName = "TextField";
 

package/dist/main.css

@@ -6394,7 +6394,7 @@ pre {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  max-width: calc(133% - 24px);
+  max-width: calc(100% - 32px);
   position: absolute;
   left: 0;
   top: 0;
@@ -6408,11 +6408,13 @@ pre {
 }
 .rf-text-field--adorned-start:not(.rf-text-field--floating) .rf-text-field__label:not(.rf-text-field__wrapper:focus-within .rf-text-field__label):not(.rf-text-field__input:not(:placeholder-shown) ~ .rf-text-field__label) {
   transform: translate(36px, 16px) scale(1);
+  max-width: calc(100% - 50px);
 }
 .rf-text-field--floating .rf-text-field__label,
 .rf-text-field__wrapper:focus-within .rf-text-field__label,
 .rf-text-field__input:not(:placeholder-shown) ~ .rf-text-field__label {
   transform: translate(14px, -9px) scale(0.75);
+  max-width: calc(133% - 32px);
 }
 .rf-text-field__wrapper:focus-within .rf-text-field__label {
   color: var(--tf-primary-color);
@@ -6524,6 +6526,7 @@ pre {
 .rf-text-field--filled .rf-text-field__wrapper:focus-within .rf-text-field__label,
 .rf-text-field--filled .rf-text-field__input:not(:placeholder-shown) ~ .rf-text-field__label {
   transform: translate(12px, 7px) scale(0.75);
+  max-width: calc(133% - 32px);
 }
 .rf-text-field--filled.rf-text-field--disabled .rf-text-field__wrapper {
   background-color: rgba(0, 0, 0, 0.04);
@@ -6551,6 +6554,7 @@ pre {
 .rf-text-field--standard .rf-text-field__wrapper:focus-within .rf-text-field__label,
 .rf-text-field--standard .rf-text-field__input:not(:placeholder-shown) ~ .rf-text-field__label {
   transform: translate(0, 1.5px) scale(0.75);
+  max-width: calc(133% - 32px);
 }
 .rf-text-field--standard .rf-text-field__wrapper::after {
   left: 0;
@@ -6613,6 +6617,7 @@ pre {
 .rf-text-field--small.rf-text-field--outlined .rf-text-field__wrapper:focus-within .rf-text-field__label,
 .rf-text-field--small.rf-text-field--outlined .rf-text-field__input:not(:placeholder-shown) ~ .rf-text-field__label {
   transform: translate(14px, -9px) scale(0.75);
+  max-width: calc(133% - 32px);
 }
 .rf-text-field--small.rf-text-field--filled .rf-text-field__input {
   padding: 21px 12px 4px;
@@ -6627,6 +6632,7 @@ pre {
 .rf-text-field--small.rf-text-field--filled .rf-text-field__wrapper:focus-within .rf-text-field__label,
 .rf-text-field--small.rf-text-field--filled .rf-text-field__input:not(:placeholder-shown) ~ .rf-text-field__label {
   transform: translate(12px, 7px) scale(0.75);
+  max-width: calc(133% - 32px);
 }
 .rf-text-field__input[type=number]::-webkit-inner-spin-button,
 .rf-text-field__input[type=number]::-webkit-outer-spin-button {
@@ -6698,6 +6704,31 @@ pre {
 .rf-text-field--compact.rf-text-field--disabled .rf-text-field__wrapper:hover {
   border-color: rgba(0, 0, 0, 0.12);
 }
+.rf-text-field--multiline .rf-text-field__wrapper {
+  align-items: flex-start;
+  height: auto;
+}
+.rf-text-field__textarea {
+  resize: vertical;
+  height: auto;
+  min-height: 56px;
+  line-height: 1.5;
+  padding-top: 16.5px;
+  padding-bottom: 16.5px;
+  overflow-y: auto;
+}
+.rf-text-field--small .rf-text-field__textarea {
+  padding-top: 8.5px;
+  padding-bottom: 8.5px;
+  min-height: 38px;
+}
+.rf-text-field--multiline .rf-text-field__label {
+  transform-origin: left top;
+}
+.rf-text-field--multiline .rf-text-field__notch {
+  top: 0;
+  height: 100%;
+}
 
 /* lib/styles/rufous-text-editor.css */
 .rf-rte-wrapper {

package/dist/main.d.cts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { ReactNode, CSSProperties, InputHTMLAttributes, ReactElement, ComponentType } from 'react';
+import React__default, { ReactNode, CSSProperties, InputHTMLAttributes, TextareaHTMLAttributes, ReactElement, ComponentType } from 'react';
 
 declare const APP_THEMES: {
     default: {
@@ -554,6 +554,7 @@ interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'si
     /** Props applied to the `input` element natively. */
     slotProps?: {
         input?: InputHTMLAttributes<HTMLInputElement>;
+        textarea?: TextareaHTMLAttributes<HTMLTextAreaElement>;
     };
     /** Optional class name to apply to the outer wrapper */
     className?: string;
@@ -561,6 +562,21 @@ interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'si
     style?: CSSProperties;
     /** Scoped style overrides. Supports nested CSS selectors with & */
     sx?: SxProp;
+    /**
+     * Renders a `<textarea>` instead of `<input>`.
+     * Use together with `rows` to control height.
+     */
+    multiline?: boolean;
+    /**
+     * Number of visible text rows. Setting this to > 1 automatically
+     * enables multiline mode. Defaults to 4 when `multiline` is true.
+     */
+    rows?: number;
+    /**
+     * Maximum number of rows before a scrollbar appears.
+     * When set, the textarea grows up to this many rows then scrolls.
+     */
+    maxRows?: number;
 }
 declare const TextField: React__default.ForwardRefExoticComponent<TextFieldProps & React__default.RefAttributes<HTMLDivElement>>;
 

package/dist/main.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { ReactNode, CSSProperties, InputHTMLAttributes, ReactElement, ComponentType } from 'react';
+import React__default, { ReactNode, CSSProperties, InputHTMLAttributes, TextareaHTMLAttributes, ReactElement, ComponentType } from 'react';
 
 declare const APP_THEMES: {
     default: {
@@ -554,6 +554,7 @@ interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'si
     /** Props applied to the `input` element natively. */
     slotProps?: {
         input?: InputHTMLAttributes<HTMLInputElement>;
+        textarea?: TextareaHTMLAttributes<HTMLTextAreaElement>;
     };
     /** Optional class name to apply to the outer wrapper */
     className?: string;
@@ -561,6 +562,21 @@ interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'si
     style?: CSSProperties;
     /** Scoped style overrides. Supports nested CSS selectors with & */
     sx?: SxProp;
+    /**
+     * Renders a `<textarea>` instead of `<input>`.
+     * Use together with `rows` to control height.
+     */
+    multiline?: boolean;
+    /**
+     * Number of visible text rows. Setting this to > 1 automatically
+     * enables multiline mode. Defaults to 4 when `multiline` is true.
+     */
+    rows?: number;
+    /**
+     * Maximum number of rows before a scrollbar appears.
+     * When set, the textarea grows up to this many rows then scrolls.
+     */
+    maxRows?: number;
 }
 declare const TextField: React__default.ForwardRefExoticComponent<TextFieldProps & React__default.RefAttributes<HTMLDivElement>>;
 

package/dist/main.js

@@ -1597,7 +1597,9 @@ var Checkbox = ({
 };
 
 // lib/TextFields/TextField.tsx
-import React68, { forwardRef as forwardRef3 } from "react";
+import React68, {
+  forwardRef as forwardRef3
+} from "react";
 var NUMBER_BLOCKED_KEYS = ["e", "E", "+", "-"];
 var BLOCKED_KEYS_BY_VARIANT = {
   "integer": [...NUMBER_BLOCKED_KEYS, ".", ","],
@@ -1639,15 +1641,20 @@ var TextField = forwardRef3(({
   slotProps,
   InputProps,
   numberVariant,
+  multiline = false,
+  rows,
+  maxRows,
   ...props
 }, ref) => {
   const sxClass = useSx(sx);
-  const inputId = id || name || `tf-${Math.random().toString(36).substr(2, 9)}`;
+  const inputId = id || name || `tf-${Math.random().toString(36).substring(2, 11)}`;
+  const isTextarea = multiline || rows !== void 0 && rows > 1;
+  const resolvedRows = rows ?? (multiline ? 4 : void 0);
   const isFloating = Boolean(
     value !== void 0 && value !== "" || type === "date" || type === "time" || type === "datetime-local"
   );
   const hasLabel = Boolean(label);
-  const readOnly = slotProps?.input?.readOnly;
+  const readOnly = isTextarea ? slotProps?.textarea?.readOnly : slotProps?.input?.readOnly;
   const rootClasses = [
     "rf-text-field",
     `rf-text-field--${variant}`,
@@ -1660,7 +1667,8 @@ var TextField = forwardRef3(({
     hasLabel ? "rf-text-field--has-label" : "",
     InputProps?.startAdornment ? "rf-text-field--adorned-start" : "",
     InputProps?.endAdornment ? "rf-text-field--adorned-end" : "",
-    type === "number" && !disabled && !readOnly ? "rf-text-field--has-number-controls" : "",
+    isTextarea ? "rf-text-field--multiline" : "",
+    !isTextarea && type === "number" && !disabled && !readOnly ? "rf-text-field--has-number-controls" : "",
     sxClass,
     className
   ].filter(Boolean).join(" ");
@@ -1735,11 +1743,26 @@ var TextField = forwardRef3(({
         }
       }
     }
-    if (props.onKeyDown) {
-      props.onKeyDown(e);
-    }
+    if (props.onKeyDown) props.onKeyDown(e);
   };
-  return /* @__PURE__ */ React68.createElement("div", { ref, className: rootClasses, style }, /* @__PURE__ */ React68.createElement("div", { className: `rf-text-field__wrapper ${InputProps?.className || ""}`, style: InputProps?.style }, InputProps?.startAdornment && /* @__PURE__ */ React68.createElement("div", { className: "rf-text-field__adornment rf-text-field__adornment--start" }, InputProps.startAdornment), /* @__PURE__ */ React68.createElement(
+  const textareaStyle = maxRows ? { maxHeight: `calc(${maxRows} * var(--tf-line-height, 1.5em) + var(--tf-textarea-vpad, 18px) * 2)`, overflowY: "auto" } : {};
+  return /* @__PURE__ */ React68.createElement("div", { ref, className: rootClasses, style }, /* @__PURE__ */ React68.createElement("div", { className: `rf-text-field__wrapper ${InputProps?.className || ""}`, style: InputProps?.style }, InputProps?.startAdornment && /* @__PURE__ */ React68.createElement("div", { className: "rf-text-field__adornment rf-text-field__adornment--start" }, InputProps.startAdornment), isTextarea ? /* @__PURE__ */ React68.createElement(
+    "textarea",
+    {
+      id: inputId,
+      name,
+      className: "rf-text-field__input rf-text-field__textarea",
+      placeholder: placeholder || (variant === "outlined" ? " " : void 0),
+      value,
+      rows: resolvedRows,
+      required,
+      disabled,
+      readOnly,
+      style: textareaStyle,
+      ...slotProps?.textarea,
+      onChange
+    }
+  ) : /* @__PURE__ */ React68.createElement(
     "input",
     {
       ref: internalRef,
@@ -1759,7 +1782,7 @@ var TextField = forwardRef3(({
       ...props,
       onChange: handleChange
     }
-  ), InputProps?.endAdornment && /* @__PURE__ */ React68.createElement("div", { className: "rf-text-field__adornment rf-text-field__adornment--end" }, InputProps.endAdornment), type === "number" && !disabled && !readOnly && /* @__PURE__ */ React68.createElement("div", { className: "rf-text-field__number-controls" }, /* @__PURE__ */ React68.createElement("button", { type: "button", tabIndex: -1, onClick: handleIncrement, className: "rf-text-field__number-btn" }, /* @__PURE__ */ React68.createElement("svg", { width: "8", height: "5", viewBox: "0 0 8 5", fill: "currentColor" }, /* @__PURE__ */ React68.createElement("path", { d: "M4 0L8 5H0L4 0Z" }))), /* @__PURE__ */ React68.createElement("button", { type: "button", tabIndex: -1, onClick: handleDecrement, className: "rf-text-field__number-btn", style: { marginTop: 2 } }, /* @__PURE__ */ React68.createElement("svg", { width: "8", height: "5", viewBox: "0 0 8 5", fill: "currentColor" }, /* @__PURE__ */ React68.createElement("path", { d: "M4 5L0 0H8L4 5Z" })))), hasLabel && /* @__PURE__ */ React68.createElement("label", { htmlFor: inputId, className: "rf-text-field__label" }, label, " ", required && /* @__PURE__ */ React68.createElement("span", { className: "rf-text-field__asterisk" }, "*")), variant === "outlined" && /* @__PURE__ */ React68.createElement("fieldset", { className: "rf-text-field__notch" }, hasLabel ? /* @__PURE__ */ React68.createElement("legend", { className: "rf-text-field__legend" }, /* @__PURE__ */ React68.createElement("span", null, label, " ", required ? "*" : "")) : /* @__PURE__ */ React68.createElement("legend", { className: "rf-text-field__legend--empty" }))), helperText && /* @__PURE__ */ React68.createElement("div", { className: "rf-text-field__helper-text" }, helperText));
+  ), InputProps?.endAdornment && /* @__PURE__ */ React68.createElement("div", { className: "rf-text-field__adornment rf-text-field__adornment--end" }, InputProps.endAdornment), !isTextarea && type === "number" && !disabled && !readOnly && /* @__PURE__ */ React68.createElement("div", { className: "rf-text-field__number-controls" }, /* @__PURE__ */ React68.createElement("button", { type: "button", tabIndex: -1, onClick: handleIncrement, className: "rf-text-field__number-btn" }, /* @__PURE__ */ React68.createElement("svg", { width: "8", height: "5", viewBox: "0 0 8 5", fill: "currentColor" }, /* @__PURE__ */ React68.createElement("path", { d: "M4 0L8 5H0L4 0Z" }))), /* @__PURE__ */ React68.createElement("button", { type: "button", tabIndex: -1, onClick: handleDecrement, className: "rf-text-field__number-btn", style: { marginTop: 2 } }, /* @__PURE__ */ React68.createElement("svg", { width: "8", height: "5", viewBox: "0 0 8 5", fill: "currentColor" }, /* @__PURE__ */ React68.createElement("path", { d: "M4 5L0 0H8L4 5Z" })))), hasLabel && /* @__PURE__ */ React68.createElement("label", { htmlFor: inputId, className: "rf-text-field__label" }, label, " ", required && /* @__PURE__ */ React68.createElement("span", { className: "rf-text-field__asterisk" }, "*")), variant === "outlined" && /* @__PURE__ */ React68.createElement("fieldset", { className: "rf-text-field__notch" }, hasLabel ? /* @__PURE__ */ React68.createElement("legend", { className: "rf-text-field__legend" }, /* @__PURE__ */ React68.createElement("span", null, label, " ", required ? "*" : "")) : /* @__PURE__ */ React68.createElement("legend", { className: "rf-text-field__legend--empty" }))), helperText && /* @__PURE__ */ React68.createElement("div", { className: "rf-text-field__helper-text" }, helperText));
 });
 TextField.displayName = "TextField";
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rufous/ui",
   "private": false,
-  "version": "0.2.99",
+  "version": "0.2.100",
   "type": "module",
   "description": "Experimental: A lightweight React UI component library (Beta)",
   "style": "./dist/main.css",