@timeax/form-palette 0.0.1

package/src/presets/ui/textarea.tsx

@@ -0,0 +1,634 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export interface TextareaIconControlProps {
+  // lower icons (overlaid in textarea-field)
+  leadingIcons?: React.ReactNode[];
+  trailingIcons?: React.ReactNode[];
+  icon?: React.ReactNode;
+
+  iconGap?: number;
+  leadingIconSpacing?: number;
+  trailingIconSpacing?: number;
+
+  // lower side controls (outside the text area by default)
+  leadingControl?: React.ReactNode;
+  trailingControl?: React.ReactNode;
+  leadingControlClassName?: string;
+  trailingControlClassName?: string;
+
+  /**
+   * If true, move the visual box (border, bg, radius, focus) from
+   * `textarea-field` to `textarea-inner` so the side controls are
+   * inside the same frame.
+   *
+   * Default: false (controls sit outside the border).
+   */
+  extendBoxToControls?: boolean;
+
+  /**
+   * If true, move the visual box all the way up to `textarea-box`,
+   * so the upper toolbox and the inner row share a single frame.
+   *
+   * When this is true, it overrides `extendBoxToControls`.
+   *
+   * Default: false.
+   */
+  extendBoxToToolbox?: boolean;
+
+  /**
+   * Extra padding knobs (same semantics as Input).
+   *
+   * px → symmetric horizontal padding
+   * py → symmetric vertical padding
+   * ps/pe → logical start/end padding adjustments
+   * pb → extra bottom padding (stacked with py)
+   */
+  px?: number;
+  py?: number;
+  ps?: number;
+  pe?: number;
+  pb?: number;
+
+  /**
+   * Extra classes merged into the raw <textarea>.
+   * (The box padding/border live on the wrappers.)
+   */
+  inputClassName?: string;
+}
+
+export interface TextareaSizeProps {
+  size?: "sm" | "md" | "lg" | (string & {});
+  density?:
+  | "compact"
+  | "normal"
+  | "relaxed"
+  | "dense"
+  | "loose"
+  | (string & {});
+}
+
+export interface TextareaProps
+  extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "size">,
+  TextareaIconControlProps,
+  TextareaSizeProps {
+  /**
+   * Auto-resize based on content.
+   * Default: true.
+   */
+  autoResize?: boolean;
+
+  /**
+   * Minimum number of visual rows.
+   * Default: 1.
+   */
+  rows?: number;
+
+  /**
+   * Maximum number of visual rows.
+   * Undefined → unlimited.
+   */
+  maxRows?: number;
+
+  /**
+   * Optional upper toolbox area.
+   */
+  upperControl?: React.ReactNode;
+  upperControlClassName?: string;
+}
+
+// ─────────────────────────────────────────────
+// Helpers
+// ─────────────────────────────────────────────
+
+function resolveSizeDensityClasses(size: unknown, density: unknown) {
+  const s = (size as string | undefined) ?? "md";
+  const d = (density as string | undefined) ?? "normal";
+
+  let textCls = "text-base md:text-sm";
+
+  if (s === "sm") {
+    textCls = "text-sm";
+  } else if (s === "lg") {
+    textCls = "text-base";
+  }
+
+  let densityCls = "";
+  if (d === "dense" || d === "compact") {
+    densityCls = "leading-tight";
+  } else if (d === "relaxed" || d === "loose") {
+    densityCls = "leading-relaxed";
+  }
+
+  return { textCls, densityCls };
+}
+
+function resolveBasePadding(size: unknown, density: unknown) {
+  // mirror Input baseline
+  let px = 12;
+  let py = 8;
+
+  const s = (size as string | undefined) ?? "md";
+  const d = (density as string | undefined) ?? "normal";
+
+  if (s === "sm") {
+    px = 10;
+    py = 6;
+  } else if (s === "lg") {
+    px = 14;
+    py = 10;
+  }
+
+  if (d === "dense" || d === "compact") {
+    py = Math.max(2, py - 1);
+  } else if (d === "relaxed" || d === "loose") {
+    py = py + 1;
+  }
+
+  return { px, py };
+}
+
+// ─────────────────────────────────────────────
+// Component
+// ─────────────────────────────────────────────
+
+export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  function Textarea(rawProps, forwardedRef) {
+    const {
+      // layout wrapper
+      className,
+      style,
+
+      // native textarea bits
+      disabled,
+      readOnly,
+      required,
+      onChange,
+      onFocus,
+      onBlur,
+      placeholder,
+
+      // size / density
+      size = "md",
+      density = "normal",
+
+      // auto-resize
+      autoResize = true,
+      rows: minRowsProp,
+      maxRows,
+
+      // controls / icons
+      leadingIcons,
+      trailingIcons,
+      icon,
+      iconGap,
+      leadingIconSpacing,
+      trailingIconSpacing,
+      leadingControl,
+      trailingControl,
+      leadingControlClassName,
+      trailingControlClassName,
+      extendBoxToControls = false,
+      extendBoxToToolbox = false,
+      px,
+      py,
+      ps,
+      pe,
+      pb,
+      inputClassName,
+
+      // upper toolbox
+      upperControl,
+      upperControlClassName,
+
+      // rest of <textarea> props
+      ...rest
+    } = rawProps;
+
+    const sizeKey = (size as string | undefined) ?? "md";
+    const densityKey = (density as string | undefined) ?? "normal";
+
+    const innerRef = React.useRef<HTMLTextAreaElement | null>(null);
+    React.useImperativeHandle(
+      forwardedRef,
+      () => innerRef.current as HTMLTextAreaElement,
+      []
+    );
+
+    // icons
+    const resolvedLeadingIcons: React.ReactNode[] = (() => {
+      if (leadingIcons && leadingIcons.length) return leadingIcons;
+      if (icon) return [icon];
+      return [];
+    })();
+    const resolvedTrailingIcons: React.ReactNode[] = trailingIcons ?? [];
+
+    const hasLeadingIcons = resolvedLeadingIcons.length > 0;
+    const hasTrailingIcons = resolvedTrailingIcons.length > 0;
+    const hasLeadingControl = !!leadingControl;
+    const hasTrailingControl = !!trailingControl;
+
+    const hasIcons = hasLeadingIcons || hasTrailingIcons;
+    const hasControls = hasLeadingControl || hasTrailingControl;
+    const hasExtras = hasIcons || hasControls;
+
+    const baseIconGap = iconGap ?? 1;
+    const leadingGap = leadingIconSpacing ?? baseIconGap;
+    const trailingGap = trailingIconSpacing ?? baseIconGap;
+
+    const leadingIconsRef = React.useRef<HTMLDivElement | null>(null);
+    const trailingIconsRef = React.useRef<HTMLDivElement | null>(null);
+    const [leadingIconsWidth, setLeadingIconsWidth] = React.useState(0);
+    const [trailingIconsWidth, setTrailingIconsWidth] = React.useState(0);
+
+    const measureIconWidths = React.useCallback(() => {
+      if (typeof window === "undefined") return;
+
+      const lead = leadingIconsRef.current;
+      const trail = trailingIconsRef.current;
+
+      if (lead) {
+        const rect = lead.getBoundingClientRect();
+        setLeadingIconsWidth(rect.width);
+      } else {
+        setLeadingIconsWidth(0);
+      }
+
+      if (trail) {
+        const rect = trail.getBoundingClientRect();
+        setTrailingIconsWidth(rect.width);
+      } else {
+        setTrailingIconsWidth(0);
+      }
+    }, []);
+
+    // MutationObserver → recompute icon widths when content changes
+    React.useLayoutEffect(() => {
+      if (
+        typeof window === "undefined" ||
+        typeof MutationObserver === "undefined"
+      ) {
+        measureIconWidths();
+        return;
+      }
+
+      const observers: MutationObserver[] = [];
+      const lead = leadingIconsRef.current;
+      const trail = trailingIconsRef.current;
+
+      if (lead) {
+        const obs = new MutationObserver(() => measureIconWidths());
+        obs.observe(lead, {
+          childList: true,
+          subtree: true,
+          attributes: true,
+        });
+        observers.push(obs);
+      }
+
+      if (trail) {
+        const obs = new MutationObserver(() => measureIconWidths());
+        obs.observe(trail, {
+          childList: true,
+          subtree: true,
+          attributes: true,
+        });
+        observers.push(obs);
+      }
+
+      measureIconWidths();
+
+      return () => observers.forEach((o) => o.disconnect());
+    }, [measureIconWidths, hasLeadingIcons, hasTrailingIcons]);
+
+    // row height / rows
+    const [rowHeight, setRowHeight] = React.useState<number | null>(null);
+    const baseMinRows = Math.max(minRowsProp ?? 1, 1);
+    const [rows, setRows] = React.useState<number>(baseMinRows);
+
+    // measure a single-row height from the textarea itself
+    React.useLayoutEffect(() => {
+      if (typeof window === "undefined") return;
+      const el = innerRef.current;
+      if (!el) return;
+
+      const prevValue = el.value;
+      const prevHeight = el.style.height;
+
+      el.value = "X";
+      el.style.height = "0px";
+      const singleRowHeight = el.scrollHeight;
+
+      el.value = prevValue;
+      el.style.height = prevHeight;
+
+      if (singleRowHeight > 0 && Number.isFinite(singleRowHeight)) {
+        setRowHeight(singleRowHeight);
+        setRows(baseMinRows);
+      }
+    }, [sizeKey, densityKey, baseMinRows]);
+
+    // auto-resize helper
+    const recomputeHeight = React.useCallback(() => {
+      if (!autoResize) return;
+      if (!innerRef.current) return;
+      if (!rowHeight) return;
+
+      const el = innerRef.current;
+
+      el.style.height = "0px";
+      const scrollH = el.scrollHeight;
+
+      // if empty, keep exactly minRows
+      if (!el.value || el.value.length === 0) {
+        const h = baseMinRows * rowHeight;
+        el.style.height = `${h}px`;
+        setRows(baseMinRows);
+        return;
+      }
+
+      const rawRows = scrollH / rowHeight;
+      let nextRows = Math.max(baseMinRows, Math.ceil(rawRows));
+      if (typeof maxRows === "number" && maxRows > 0) {
+        nextRows = Math.min(nextRows, maxRows);
+      }
+
+      const nextHeight = nextRows * rowHeight;
+      el.style.height = `${nextHeight}px`;
+      setRows(nextRows);
+    }, [autoResize, rowHeight, baseMinRows, maxRows]);
+
+    // run when controlled value changes or initial mount
+    React.useLayoutEffect(() => {
+      recomputeHeight();
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [recomputeHeight, rest.value, rest.defaultValue]);
+
+    // padding (frame-level)
+    const { px: pxDefault, py: pyDefault } = resolveBasePadding(size, density);
+
+    const extraPx = typeof px === "number" ? px : 0;
+    const extraPy = typeof py === "number" ? py : 0;
+    const extraPs = typeof ps === "number" ? ps : 0;
+    const extraPe = typeof pe === "number" ? pe : 0;
+    const extraPb = typeof pb === "number" ? pb : 0;
+
+    const basePaddingStart = pxDefault + extraPx + extraPs;
+    const basePaddingEnd = pxDefault + extraPx + extraPe;
+    const paddingTop = pyDefault + extraPy;
+    const paddingBottom = pyDefault + extraPy + extraPb;
+
+    // extra space text needs because of icons
+    const iconsLeftExtra =
+      hasLeadingIcons && leadingIconsWidth > 0
+        ? leadingIconsWidth + baseIconGap
+        : 0;
+
+    const iconsRightExtra =
+      hasTrailingIcons && trailingIconsWidth > 0
+        ? trailingIconsWidth + baseIconGap
+        : 0;
+
+    const { textCls, densityCls } = resolveSizeDensityClasses(size, density);
+
+    // vars for the frame: both base + adjusted
+    const vars: React.CSSProperties = {
+      "--fp-pl-base": `${basePaddingStart}px`,
+      "--fp-pr-base": `${basePaddingEnd}px`,
+      "--fp-pl": `${basePaddingStart + iconsLeftExtra}px`,
+      "--fp-pr": `${basePaddingEnd + iconsRightExtra}px`,
+      "--fp-pt": `${paddingTop}px`,
+      "--fp-pb": `${paddingBottom}px`,
+      "--fp-row-height": rowHeight ? `${rowHeight}px` : undefined,
+      "--fp-rows": rows,
+    } as React.CSSProperties;
+
+    const mergedWrapperStyle: React.CSSProperties = {
+      ...(style ?? {}),
+      ...vars,
+    };
+
+    // visual frame (border/background/focus)
+    const frameClasses = cn(
+      "border-input placeholder:text-muted-foreground focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]",
+      "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+      "dark:bg-input/30 rounded-md border bg-transparent shadow-xs transition-[color,box-shadow] outline-none",
+      "disabled:cursor-not-allowed disabled:opacity-50"
+    );
+
+    // padding utility using adjusted vars (--fp-pl / --fp-pr)
+    const framePaddingClasses = cn(
+      "px-(--fp-pl,--spacing(3)) pr-(--fp-pr,--spacing(3))",
+      "pt-(--fp-pt,--spacing(1)) pb-(--fp-pb,--spacing(1))"
+    );
+
+    // which element owns the frame?
+    const boxOnToolbox = extendBoxToToolbox;
+    const boxOnInner = !boxOnToolbox && extendBoxToControls;
+    const boxOnField = !boxOnToolbox && !boxOnInner;
+
+    const wrapperClasses = cn("w-full", className);
+
+    const boxClasses = cn(
+      "flex flex-col gap-1",
+      boxOnToolbox && frameClasses,
+      boxOnToolbox && framePaddingClasses
+    );
+
+    const innerRowClasses = cn(
+      "flex items-stretch gap-1",
+      boxOnInner && frameClasses,
+      boxOnInner && framePaddingClasses
+    );
+
+    const fieldWrapperClasses = cn(
+      "relative flex-1 min-w-0",
+      boxOnField && frameClasses,
+      boxOnField && framePaddingClasses
+    );
+
+    const textareaClasses = cn(
+      "block w-full min-h-[1px] resize-none bg-transparent border-none outline-none shadow-none",
+      "px-0 py-0",
+      "placeholder:text-muted-foreground",
+      textCls,
+      densityCls,
+      inputClassName
+    );
+
+    const focusTextarea = () => {
+      if (innerRef.current) innerRef.current.focus();
+    };
+
+    const handleFocus = React.useCallback(
+      (event: React.FocusEvent<HTMLTextAreaElement>) => {
+        onFocus?.(event);
+      },
+      [onFocus]
+    );
+
+    const handleBlur = React.useCallback(
+      (event: React.FocusEvent<HTMLTextAreaElement>) => {
+        onBlur?.(event);
+      },
+      [onBlur]
+    );
+
+    const handleChange = React.useCallback(
+      (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+        onChange?.(event);
+        // for uncontrolled usage, recompute on each keystroke
+        recomputeHeight();
+      },
+      [onChange, recomputeHeight]
+    );
+
+    const handleIconMouseDown = (e: React.MouseEvent) => {
+      e.preventDefault();
+      focusTextarea();
+    };
+
+    const controlCellStyle: React.CSSProperties | undefined =
+      rowHeight != null ? { height: `${rowHeight}px` } : undefined;
+
+    const lowerControlAlignStyle: React.CSSProperties = {
+      marginTop: "auto",
+      ...controlCellStyle,
+    };
+
+    const leadingArea = hasLeadingControl ? (
+      <div
+        data-slot="textarea-leading-area"
+        className={cn("flex flex-col h-full", leadingControlClassName)}
+      >
+        <div
+          data-slot="textarea-leading-control"
+          className="flex items-center mt-auto"
+          style={lowerControlAlignStyle}
+          onMouseDown={(e) => {
+            e.preventDefault();
+            focusTextarea();
+          }}
+        >
+          {leadingControl}
+        </div>
+      </div>
+    ) : null;
+
+    const trailingArea = hasTrailingControl ? (
+      <div
+        data-slot="textarea-trailing-area"
+        className={cn("flex flex-col h-full mt-auto", trailingControlClassName)}
+      >
+        <div
+          data-slot="textarea-trailing-control"
+          className="flex items-center"
+          style={lowerControlAlignStyle}
+          onMouseDown={(e) => {
+            e.preventDefault();
+            focusTextarea();
+          }}
+        >
+          {trailingControl}
+        </div>
+      </div>
+    ) : null;
+
+    return (
+      <div
+        data-slot="textarea-wrapper"
+        className={wrapperClasses}
+        style={mergedWrapperStyle}
+        data-size={sizeKey}
+        data-density={densityKey}
+      >
+        <div
+          data-slot="textarea-box"
+          className={boxClasses}
+          data-has-extras={hasExtras ? "true" : "false"}
+        >
+          {upperControl && (
+            <div
+              data-slot="textarea-upper"
+              className={cn("flex items-center", upperControlClassName)}
+            >
+              {upperControl}
+            </div>
+          )}
+
+          <div data-slot="textarea-inner" className={innerRowClasses}>
+            {leadingArea}
+
+            <div data-slot="textarea-field" className={fieldWrapperClasses}>
+              <textarea
+                ref={innerRef}
+                data-slot="textarea"
+                className={textareaClasses}
+                disabled={disabled}
+                readOnly={readOnly}
+                aria-required={required ? "true" : undefined}
+                rows={autoResize ? undefined : baseMinRows}
+                placeholder={placeholder}
+                onChange={handleChange}
+                onFocus={handleFocus}
+                onBlur={handleBlur}
+                {...rest}
+              />
+
+              {hasLeadingIcons && (
+                <div
+                  ref={leadingIconsRef}
+                  data-slot="textarea-leading-icons"
+                  className="pointer-events-auto absolute left-0 flex items-end"
+                  style={{
+                    gap: leadingGap,
+                    // anchor from base padding, NOT icon-adjusted padding
+                    paddingLeft: "var(--fp-pl-base)",
+                    bottom: "calc(var(--fp-pb, 0px) + 2px)",
+                  }}
+                  onMouseDown={handleIconMouseDown}
+                >
+                  {resolvedLeadingIcons.map((node, idx) => (
+                    <span
+                      key={idx}
+                      className="flex items-center justify-center"
+                    >
+                      {node}
+                    </span>
+                  ))}
+                </div>
+              )}
+
+              {hasTrailingIcons && (
+                <div
+                  ref={trailingIconsRef}
+                  data-slot="textarea-trailing-icons"
+                  className="pointer-events-auto absolute right-0 flex items-end"
+                  style={{
+                    gap: trailingGap,
+                    paddingRight: "var(--fp-pr-base)",
+                    bottom: "calc(var(--fp-pb, 0px) + 2px)",
+                  }}
+                  onMouseDown={handleIconMouseDown}
+                >
+                  {resolvedTrailingIcons.map((node, idx) => (
+                    <span
+                      key={idx}
+                      className="flex items-center justify-center"
+                    >
+                      {node}
+                    </span>
+                  ))}
+                </div>
+              )}
+            </div>
+
+            {trailingArea}
+          </div>
+        </div>
+      </div>
+    );
+  }
+);
+
+Textarea.displayName = "Textarea";