premium-ds 0.1.0

package/src/components/textarea/Textarea.tsx

@@ -0,0 +1,197 @@
+'use client';
+
+// Textarea.tsx - multiline input: TextField anatomy plus auto-grow, char meter, over-limit highlight, ⌘/Ctrl+↵ submit.
+
+import * as React from 'react';
+import { Icon } from '../icon/Icon';
+import { Collapse } from '../motion/Collapse';
+
+const RING_C = (2 * Math.PI * 7).toFixed(2);
+
+export interface TextareaProps extends Omit<
+  React.TextareaHTMLAttributes<HTMLTextAreaElement>,
+  'size' | 'rows' | 'onSubmit'
+> {
+  id?: string;
+  /** Label text (sentence case). */
+  label?: React.ReactNode;
+  required?: boolean;
+  optional?: boolean;
+  /** Neutral helper - shown when there's no validation message. */
+  helper?: React.ReactNode;
+  /** Sets the matching state (border + icon + colour). error wins over warning/success/helper. */
+  error?: React.ReactNode;
+  warning?: React.ReactNode;
+  success?: React.ReactNode;
+  value?: string;
+  onChange?: React.ChangeEventHandler<HTMLTextAreaElement>;
+  /** Fired on ⌘/Ctrl+Enter with the current text. */
+  onSubmit?: (value: string) => void;
+  /** Soft char limit: shows the meter + over-limit highlight. Does NOT truncate (use native maxLength for a hard stop). */
+  max?: number;
+  /** Visible rows before growing (default 3) and the cap before it scrolls (default 10). */
+  minRows?: number;
+  maxRows?: number;
+  /** Remaining-chars threshold that flips the meter amber. Default 20. */
+  warnAt?: number;
+  /** Footer hint, left of the meter - e.g. a ⌘↵ affordance. */
+  hint?: React.ReactNode;
+  /** md (default) - lg (prominent composer). */
+  size?: 'md' | 'lg';
+}
+
+export function Textarea({
+  id,
+  label,
+  required,
+  optional,
+  placeholder,
+  helper,
+  error,
+  warning,
+  success,
+  value = '',
+  onChange,
+  onSubmit,
+  max,
+  minRows = 3,
+  maxRows = 10,
+  warnAt = 20,
+  hint,
+  size,
+  disabled,
+  readOnly,
+  className = '',
+  ...rest
+}: TextareaProps) {
+  const taRef = React.useRef<HTMLTextAreaElement>(null);
+  const stackRef = React.useRef<HTMLDivElement>(null);
+  const mirrorRef = React.useRef<HTMLDivElement>(null);
+  const text = value ?? '';
+  const count = text.length;
+  const over = max ? Math.max(count - max, 0) : 0;
+  const remaining = max ? max - count : 0;
+  const meterState = over ? 'is-over' : max && remaining <= warnAt ? 'is-near' : '';
+
+  const state = error ? 'is-error' : warning ? 'is-warning' : success ? 'is-success' : '';
+  const msg = error || warning || success || helper;
+  const msgIcon = error ? 'warning-circle' : warning ? 'warning' : success ? 'check-circle' : null;
+
+  // Auto-grow without a caret jump: the .txa__stack wrapper animates its height and is overflow:clip while growing (a clip box can't scroll to the caret); scroll is enabled only past max-height.
+  const resize = () => {
+    const el = taRef.current,
+      stack = stackRef.current;
+    if (!el || !stack) return;
+    const start = stack.offsetHeight; // capture the start height before mutating layout below
+    el.style.height = 'auto';
+    el.style.height = el.scrollHeight + 'px';
+    const content = el.offsetHeight;
+    const maxPx = parseFloat(getComputedStyle(stack).maxHeight) || Infinity;
+    const target = Math.min(content, maxPx);
+    if (target === start) {
+      stack.style.overflowY = content > maxPx ? 'auto' : 'clip';
+      return;
+    }
+    stack.style.overflowY = 'clip';
+    stack.style.height = start + 'px';
+    void stack.offsetHeight; // force a reflow so the height transition runs from start
+    stack.style.height = target + 'px';
+  };
+  React.useLayoutEffect(resize, [text, size]);
+  React.useEffect(() => {
+    window.addEventListener('resize', resize);
+    return () => window.removeEventListener('resize', resize);
+  }, []);
+
+  const onKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (onSubmit && (e.metaKey || e.ctrlKey) && e.key === 'Enter') {
+      e.preventDefault();
+      onSubmit(text);
+    }
+    rest.onKeyDown && rest.onKeyDown(e);
+  };
+
+  const cls = ['fld', 'fld--txa', size === 'lg' && 'fld--lg', state, className]
+    .filter(Boolean)
+    .join(' ');
+  const boxCls = ['txa', disabled && 'is-disabled', readOnly && 'is-readonly']
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <div className={cls}>
+      {label && (
+        <label className="fld__label" htmlFor={id}>
+          {label}
+          {required && (
+            <span className="fld__req" aria-hidden="true">
+              *
+            </span>
+          )}
+          {optional && <span className="fld__optional">(optional)</span>}
+        </label>
+      )}
+      <div
+        className={boxCls}
+        style={{ '--txa-min-rows': minRows, '--txa-max-rows': maxRows } as React.CSSProperties}
+      >
+        <div className="txa__stack" ref={stackRef}>
+          <div className="txa__mirror" ref={mirrorRef} aria-hidden="true">
+            {over ? text.slice(0, max) : text}
+            {over ? <mark>{text.slice(max)}</mark> : null}
+            {'\n'}
+          </div>
+          <textarea
+            id={id}
+            className="txa__input"
+            ref={taRef}
+            rows={minRows}
+            value={text}
+            placeholder={placeholder}
+            disabled={disabled}
+            readOnly={readOnly}
+            onChange={onChange}
+            onKeyDown={onKeyDown}
+            onScroll={() => {
+              if (mirrorRef.current) mirrorRef.current.scrollTop = taRef.current.scrollTop;
+            }}
+            aria-invalid={error ? true : undefined}
+            {...rest}
+          />
+        </div>
+        {(max || hint) && (
+          <div className="txa__bar">
+            {hint && <span className="txa__hint">{hint}</span>}
+            {max && (
+              <span className={['txa__meter', meterState].filter(Boolean).join(' ')}>
+                <span className="txa__count">
+                  {over || remaining <= warnAt ? remaining : `${count} / ${max}`}
+                </span>
+                <svg
+                  className="txa__ring"
+                  viewBox="0 0 16 16"
+                  aria-hidden="true"
+                  style={
+                    {
+                      '--txa-ring-c': RING_C,
+                      '--txa-ring-p': Math.min(count / max, 1),
+                    } as React.CSSProperties
+                  }
+                >
+                  <circle className="txa__ring-trk" cx="8" cy="8" r="7" />
+                  <circle className="txa__ring-prg" cx="8" cy="8" r="7" />
+                </svg>
+              </span>
+            )}
+          </div>
+        )}
+      </div>
+      <Collapse open={!!msg} className="fld__msg-wrap">
+        <div className="fld__msg">
+          {msgIcon && <Icon name={msgIcon} size="sm" weight="fill" />}
+          {msg}
+        </div>
+      </Collapse>
+    </div>
+  );
+}

package/src/components/textarea/textarea.css

@@ -0,0 +1,219 @@
+/* textarea.css - Textarea (multiline composer): the .txa box over the .fld shell, auto-grow, char meter, over-limit highlight. */
+
+.txa {
+  --txa-pad-y: var(--space-3);
+  --txa-pad-x: var(--space-4);
+  --txa-lh: var(--leading-body);
+  --txa-min-rows: 3;
+  --txa-max-rows: 10;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  background: var(--bg-inset);
+  border: var(--border-hairline) solid var(--border-default);
+  border-radius: var(--radius-lg);
+  transition: var(--transition-control);
+}
+.txa:hover:not(.is-disabled):not(.is-readonly):not(:focus-within) {
+  border-color: var(--border-strong);
+}
+.txa:focus-within {
+  border-color: var(--accent);
+  background: var(--bg-surface);
+  box-shadow: var(--ring-accent);
+}
+.txa.is-disabled {
+  background: var(--bg-muted);
+}
+.txa.is-readonly {
+  background: var(--bg-subtle);
+}
+
+/* The .txa__stack wrapper owns the height and is the only thing that animates; overflow:clip while growing (a clip box can't scroll to the caret - no jump), flipped to auto by JS only past max-rows. */
+.txa__stack {
+  position: relative;
+  min-height: calc(var(--txa-min-rows) * var(--txa-lh) + 2 * var(--txa-pad-y));
+  max-height: calc(var(--txa-max-rows) * var(--txa-lh) + 2 * var(--txa-pad-y));
+  overflow: clip;
+  transition: height var(--duration-base) var(--ease-standard);
+}
+.txa__input,
+.txa__mirror {
+  box-sizing: border-box;
+  width: 100%;
+  font: var(--type-body);
+  padding: var(--txa-pad-y) var(--txa-pad-x);
+  border-radius: inherit;
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+  word-break: break-word;
+}
+.txa__input {
+  position: relative;
+  z-index: 1;
+  display: block;
+  margin: 0;
+  border: 0;
+  background: transparent;
+  resize: none;
+  appearance: none;
+  -webkit-appearance: none;
+  outline: none;
+  color: var(--text-strong);
+  overflow: hidden;
+}
+.txa__input::placeholder {
+  color: var(--text-disabled);
+}
+.txa__input:disabled {
+  color: var(--text-disabled);
+  cursor: not-allowed;
+}
+.txa__input[readonly] {
+  color: var(--text-body);
+}
+
+/* over-limit highlight: faint tint + a danger underline on the excess chars */
+.txa__mirror {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 0;
+  color: transparent;
+  pointer-events: none;
+  user-select: none;
+}
+.txa__mirror mark {
+  color: transparent;
+  background: var(--danger-subtle);
+  border-radius: var(--radius-sm);
+  text-decoration: underline;
+  text-decoration-color: var(--danger);
+  text-decoration-thickness: 2px;
+  text-underline-offset: 3px;
+  -webkit-box-decoration-break: clone;
+  box-decoration-break: clone;
+}
+
+.txa__bar {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-2) var(--space-3);
+  border-top: var(--border-hairline) solid var(--border-subtle);
+  transition: border-color var(--duration-fast) var(--ease-standard);
+}
+.txa:focus-within .txa__bar {
+  border-top-color: var(--border-default);
+}
+.txa__hint {
+  font: var(--type-micro);
+  color: var(--text-subtle);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.txa__kbd {
+  font-family: var(--font-mono);
+  font-size: var(--size-micro);
+  line-height: 1;
+  color: var(--text-muted);
+  padding: var(--space-1);
+  border: var(--border-hairline) solid var(--border-default);
+  border-radius: var(--radius-sm);
+  background: var(--bg-surface);
+}
+
+.txa__meter {
+  margin-left: auto;
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+.txa__count {
+  font-family: var(--font-mono);
+  font-size: var(--size-micro);
+  line-height: 1;
+  font-variant-numeric: tabular-nums;
+  color: var(--text-subtle);
+  white-space: nowrap;
+  transition: color var(--duration-fast) var(--ease-standard);
+}
+.txa__ring {
+  width: var(--icon-sm);
+  height: var(--icon-sm);
+  flex: none;
+  transform: rotate(-90deg);
+}
+.txa__ring circle {
+  fill: none;
+  stroke-width: 2;
+}
+.txa__ring .txa__ring-trk {
+  stroke: var(--border-default);
+}
+.txa__ring .txa__ring-prg {
+  stroke: var(--accent);
+  stroke-linecap: round;
+  stroke-dasharray: var(--txa-ring-c);
+  stroke-dashoffset: calc(var(--txa-ring-c) * (1 - var(--txa-ring-p, 0)));
+  transition:
+    stroke-dashoffset var(--duration-base) var(--ease-standard),
+    stroke var(--duration-fast) var(--ease-standard);
+}
+.txa__meter.is-near .txa__ring-prg {
+  stroke: var(--warning);
+}
+.txa__meter.is-near .txa__count {
+  color: var(--warning-text);
+}
+.txa__meter.is-over .txa__ring-prg {
+  stroke: var(--danger);
+}
+.txa__meter.is-over .txa__count {
+  color: var(--danger-text);
+  font-weight: var(--weight-medium);
+}
+
+.fld.is-error .txa {
+  border-color: var(--danger);
+}
+.fld.is-error .txa:hover:not(.is-disabled):not(.is-readonly):not(:focus-within) {
+  border-color: var(--danger-text);
+}
+.fld.is-error .txa:focus-within {
+  box-shadow: var(--ring-danger);
+}
+.fld.is-warning .txa {
+  border-color: var(--warning);
+}
+.fld.is-warning .txa:hover:not(.is-disabled):not(.is-readonly):not(:focus-within) {
+  border-color: var(--warning-text);
+}
+.fld.is-warning .txa:focus-within {
+  box-shadow: var(--ring-warning);
+}
+.fld.is-success .txa {
+  border-color: var(--success);
+}
+.fld.is-success .txa:hover:not(.is-disabled):not(.is-readonly):not(:focus-within) {
+  border-color: var(--success-text);
+}
+.fld.is-success .txa:focus-within {
+  box-shadow: var(--ring-success);
+}
+
+.fld--txa.fld--lg .txa {
+  --txa-pad-y: var(--space-4);
+  --txa-lh: var(--leading-body-lg);
+}
+.fld--txa.fld--lg .txa__input,
+.fld--txa.fld--lg .txa__mirror {
+  font: var(--type-body-lg);
+}