@eocrm/design-system 0.0.0-stage → 0.6.17

package/src/components/Text/Text.tokens.scss

@@ -0,0 +1,55 @@
+// Text.tokens.scss — Component-scoped tokens for <Text>. Base block, the
+// per-size font-size scale (xs/sm/md/lg/xl), per-weight (regular / medium /
+// semibold / bold), and per-tone foregrounds (default / muted / subtle /
+// accent / danger / success / warning). --font-family-sans is not tokenized
+// per migration rules.
+:root {
+  // Base
+  --text-font-weight: var(--font-weight-regular);
+  --text-line-height: var(--line-height-normal);
+  --text-fg: var(--color-fg);
+
+  // Size scale
+  --text-font-size-xs: var(--font-size-xs);
+  --text-font-size-sm: var(--font-size-sm);
+  --text-font-size-md: var(--font-size-md);
+  --text-font-size-lg: var(--font-size-lg);
+  --text-font-size-xl: var(--font-size-xl);
+
+  // Weight scale
+  --text-font-weight-regular: var(--font-weight-regular);
+  --text-font-weight-medium: var(--font-weight-medium);
+  --text-font-weight-semibold: var(--font-weight-semibold);
+  --text-font-weight-bold: var(--font-weight-bold);
+
+  // Tone foregrounds
+  --text-fg-default: var(--color-fg);
+  --text-fg-muted: var(--color-fg-muted);
+
+  // DEPRECATED (#521). tone="subtle" resolves to the muted treatment: OKLab dE
+  // between --color-fg-subtle and --color-fg-muted measured 0.0261 in light
+  // (0.0365 once #522 retuned --color-fg-muted, still barely over half the
+  // 0.065 floor this repo's perceptual gates use), so the library had been
+  // shipping one visible tier under two names. Dark (0.0707) still read as a
+  // step -- above this repo's own 0.065 floor -- so collapsing the tone IS a
+  // visible change in dark: subtle text there gets lighter. That is the
+  // accepted trade, not a no-op, and the JSDoc says so; a tier that exists in
+  // one theme only is not a tier.
+  // The token is kept, and kept as its OWN declaration aliasing the muted one,
+  // rather than deleting it or pointing .toneSubtle at --text-fg-muted: it is a
+  // published theming surface (OptionsPicker used to re-point it, and consumers
+  // may), so collapsing it here keeps every existing override working while the
+  // default stops claiming a distinction nobody can see. --color-fg-subtle
+  // itself is untouched -- Input's placeholder, LiquidEditor and the scrollbar
+  // still use it directly, and retiring a primitive is a separate decision.
+  --text-fg-subtle: var(--text-fg-muted);
+  --text-fg-accent: var(--color-accent);
+  --text-fg-danger: var(--color-danger);
+  --text-fg-success: var(--color-success);
+
+  // @contrast --color-warning on --color-bg = 2.14:1 light
+  // @contrast --color-warning-strong on --color-bg = 5.95:1 light
+  // warning uses --color-warning-strong; the bare --color-warning measures 2.14:1 here, below
+  // WCAG AA for text and below 1.4.11's 3:1 for a graphical object. See #481.
+  --text-fg-warning: var(--color-warning-strong);
+}

package/src/components/Text/Text.tsx

@@ -0,0 +1,197 @@
+import { forwardRef, type CSSProperties, type HTMLAttributes, type ReactNode } from 'react';
+import clsx from 'clsx';
+import styles from './Text.module.scss';
+
+/**
+ * Rendered element. Constrained to a small string union (not polymorphic).
+ * If you need to render Text as a router-aware link or a custom element, use
+ * `<Link>` (polymorphic via `as`) or `<Text as="span">` + your own wrapper —
+ * not a generic Text.
+ */
+export type TextAs = 'p' | 'span' | 'div' | 'label';
+
+/** Visual size. `'inherit'` takes font-size and line-height from the parent (inline runs inside headings). */
+export type TextSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'inherit';
+
+/** Color tone. `'subtle'` is deprecated and resolves to `'muted'` — see {@link TextProps.tone}. */
+export type TextTone =
+  | 'default'
+  | 'muted'
+  /** @deprecated Resolves to `muted` (#521) — changes dark-theme appearance. Use `muted`. */
+  | 'subtle'
+  | 'accent'
+  | 'danger'
+  | 'success'
+  | 'warning';
+
+/** Font weight. */
+export type TextWeight = 'regular' | 'medium' | 'semibold' | 'bold';
+
+/** Text alignment. */
+export type TextAlign = 'left' | 'center' | 'right';
+
+export interface TextProps extends HTMLAttributes<HTMLElement> {
+  /**
+   * Associates a `<label>` with its form control. Only meaningful when
+   * `as="label"` — passes through as the native `for` attribute.
+   */
+  htmlFor?: string;
+  /**
+   * Rendered element. Defaults to `'p'` (block, default body text). Use
+   * `'span'` for inline runs, `'div'` for block containers that can't be a
+   * `<p>` (e.g. when the body needs nested block-level elements that React
+   * would warn about inside `<p>`), `'label'` for form labels (pair with
+   * `htmlFor`).
+   */
+  as?: TextAs;
+  /**
+   * Visual size. Defaults to `'md'` (body text).
+   * - `xs` — 11px, dense metadata / captions
+   * - `sm` — 12px, small body / labels
+   * - `md` — 14px, body text (default)
+   * - `lg` — 16px, large body / lead text
+   * - `xl` — 20px, very large body (rare)
+   * - `inherit` — no fixed size; font-size AND line-height inherit from the
+   *   parent. For inline runs inside a heading (`as="span"` inside a
+   *   `<Title>` / `<PageHeader.Title>`) that must keep the heading's size —
+   *   e.g. a muted task-key prefix. Tone / weight still apply — font-weight
+   *   stays Text's own (default `regular`), it does NOT inherit; pass
+   *   `weight` to match the heading if needed.
+   */
+  size?: TextSize;
+  /**
+   * Color tone. Defaults to `'default'`.
+   * - `default` — `--color-fg`
+   * - `muted` — `--color-fg-muted` (for secondary copy)
+   * - `subtle` — **@deprecated (#521): resolves to `muted`. Use `muted`.**
+   *   In LIGHT theme the two neutrals were indistinguishable: OKLab ΔE 0.0261
+   *   when the deprecation was filed, 0.0365 after `--color-fg-muted` was retuned,
+   *   against the 0.065 floor this library's perceptual gates use. In DARK
+   *   they were 0.0707 apart — a real step — so **this deprecation changes
+   *   dark-theme appearance**: `subtle` text in dark gets lighter, moving from
+   *   `--color-fg-subtle` to `--color-fg-muted`. That is the accepted trade
+   *   (a tier that exists in one theme only is not a tier), but it is a
+   *   visual change, not the removal of a duplicate. `--text-fg-subtle` now
+   *   aliases `--text-fg-muted`, so nothing breaks at the type or build level;
+   *   if you need the old dark value back, override `--text-fg-subtle`.
+   * - `accent` — `--color-accent`
+   * - `danger` / `success` / `warning` — state-coded text
+   */
+  tone?: TextTone;
+  /** Font weight. Defaults to `'regular'`. */
+  weight?: TextWeight;
+  /** Text alignment. Defaults to `'left'`. */
+  align?: TextAlign;
+  /**
+   * Truncate to a single line with ellipsis. Defaults to `false`. Use inside
+   * narrow containers (table cells, card list rows). Mutually exclusive with
+   * `lineClamp` — if both are set, `lineClamp` wins.
+   */
+  truncate?: boolean;
+  /**
+   * Clamp to N lines with ellipsis (uses `-webkit-line-clamp`). Defaults to
+   * `undefined`. Overrides `truncate` when set. Example: `lineClamp={2}` for
+   * a 2-line description that ellipses on the third.
+   *
+   * If you also pass `style.WebkitLineClamp`, the `lineClamp` prop takes
+   * precedence — the component merges the dynamic line-clamp value into
+   * `style` AFTER spreading your `style`, so the prop wins.
+   */
+  lineClamp?: number;
+  /** Text content. */
+  children: ReactNode;
+}
+
+const SIZE_CLASS: Record<TextSize, string> = {
+  xs: styles.sizeXs,
+  sm: styles.sizeSm,
+  md: styles.sizeMd,
+  lg: styles.sizeLg,
+  xl: styles.sizeXl,
+  inherit: styles.sizeInherit,
+};
+
+const TONE_CLASS: Record<TextTone, string> = {
+  default: styles.toneDefault,
+  muted: styles.toneMuted,
+  subtle: styles.toneSubtle,
+  accent: styles.toneAccent,
+  danger: styles.toneDanger,
+  success: styles.toneSuccess,
+  warning: styles.toneWarning,
+};
+
+const WEIGHT_CLASS: Record<TextWeight, string> = {
+  regular: styles.weightRegular,
+  medium: styles.weightMedium,
+  semibold: styles.weightSemibold,
+  bold: styles.weightBold,
+};
+
+const ALIGN_CLASS: Record<TextAlign, string> = {
+  left: styles.alignLeft,
+  center: styles.alignCenter,
+  right: styles.alignRight,
+};
+
+/**
+ * Body / inline text primitive for all non-heading text (`p`, `span`, `div` or `label`).
+ * @see docs/components/Text.md
+ */
+export const Text = forwardRef<HTMLElement, TextProps>(function Text(
+  {
+    as = 'p',
+    size = 'md',
+    tone = 'default',
+    weight = 'regular',
+    align = 'left',
+    truncate = false,
+    lineClamp,
+    className,
+    style,
+    children,
+    ...rest
+  },
+  ref,
+) {
+  const Component = as;
+  // lineClamp overrides truncate when both are set — lineClamp is strictly
+  // more expressive.
+  const useLineClamp = typeof lineClamp === 'number' && lineClamp > 0;
+  const useTruncate = !useLineClamp && truncate;
+
+  // lineClamp's `-webkit-line-clamp` is a dynamic value — set inline rather
+  // than generate one class per N. Merge with any consumer-provided style.
+  const mergedStyle: CSSProperties | undefined = useLineClamp
+    ? { ...style, WebkitLineClamp: lineClamp }
+    : style;
+
+  // The rendered element type varies across the union, so the JSX ref slot
+  // expects an intersection of all four element ref types. We cast through
+  // unknown to satisfy it — the runtime type is always correct because
+  // Component is exactly `as`.
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const domRef = ref as unknown as React.Ref<any>;
+
+  // className merged above via clsx so consumer extensions stack with our classes;
+  // {...rest} last so any other consumer-passed attr can override ours (Pattern A).
+  return (
+    <Component
+      ref={domRef}
+      className={clsx(
+        styles.text,
+        SIZE_CLASS[size],
+        TONE_CLASS[tone],
+        WEIGHT_CLASS[weight],
+        ALIGN_CLASS[align],
+        useTruncate && styles.truncate,
+        useLineClamp && styles.lineClamp,
+        className,
+      )}
+      style={mergedStyle}
+      {...rest}
+    >
+      {children}
+    </Component>
+  );
+});

package/src/components/Text/index.ts

@@ -0,0 +1,2 @@
+export { Text } from './Text';
+export type { TextProps, TextAs, TextSize, TextTone, TextWeight, TextAlign } from './Text';

package/src/components/Textarea/Textarea.module.scss

@@ -0,0 +1,94 @@
+@use '../../styles/mixins' as *;
+@use './Textarea.tokens';
+
+.wrapper {
+  width: 100%;
+  display: block;
+}
+
+.textarea {
+  display: block;
+  width: 100%;
+  border: var(--border-width) solid var(--textarea-border-color);
+  border-radius: var(--textarea-radius);
+  background: var(--textarea-bg);
+  color: var(--textarea-fg);
+  font-family: inherit;
+  line-height: var(--textarea-line-height);
+  transition:
+    border-color var(--transition-fast),
+    box-shadow var(--transition-fast);
+
+  &::placeholder {
+    color: var(--textarea-placeholder-fg);
+  }
+
+  &:focus-visible {
+    border-color: var(--textarea-border-color-focus);
+
+    @include focus-ring(var(--textarea-ring-focus));
+  }
+
+  &:disabled {
+    background: var(--textarea-bg-disabled);
+    border-color: var(--textarea-border-color-disabled);
+    color: var(--textarea-fg-disabled);
+    cursor: not-allowed;
+  }
+
+  &[readonly] {
+    background: var(--textarea-bg-read-only);
+  }
+}
+
+// Size — typography + padding. NO height (textarea height comes from rows + autoGrow).
+.sizeSm {
+  padding: var(--textarea-padding-y-sm) var(--textarea-padding-x-sm);
+  font-size: var(--textarea-font-size-sm);
+}
+
+.sizeMd {
+  padding: var(--textarea-padding-y-md) var(--textarea-padding-x-md);
+  font-size: var(--textarea-font-size-md);
+}
+
+.sizeLg {
+  padding: var(--textarea-padding-y-lg) var(--textarea-padding-x-lg);
+  font-size: var(--textarea-font-size-lg);
+}
+
+// Resize direction
+.resizeNone {
+  resize: none;
+}
+
+.resizeVertical {
+  resize: vertical;
+}
+
+.resizeBoth {
+  resize: both;
+}
+
+.invalid {
+  border-color: var(--textarea-border-color-invalid);
+
+  &:focus-visible {
+    border-color: var(--textarea-border-color-invalid);
+
+    @include focus-ring(var(--textarea-ring-invalid));
+  }
+}
+
+// Counter — internal spacing between textarea and child counter. The counter
+// is a child element inside the wrapper, not a layout property at the
+// component boundary, so this is allowed.
+.counter {
+  display: block;
+  text-align: right;
+  // stylelint-disable-next-line property-disallowed-list -- internal spacing between textarea and its counter child
+  margin-top: var(--textarea-counter-margin-top);
+  font-size: var(--textarea-counter-font-size);
+  color: var(--textarea-counter-fg);
+  line-height: 1;
+}

package/src/components/Textarea/Textarea.tokens.scss

@@ -0,0 +1,48 @@
+// Textarea.tokens.scss — component-scoped tokens for <Textarea>. Mirrors Input field tokens but no height per size (textarea height comes from rows + autoGrow). Counter sits as a child below the field.
+:root {
+  // Surface
+  --textarea-bg: var(--color-bg);
+  --textarea-fg: var(--color-fg);
+  --textarea-border-color: var(--color-border-strong);
+  --textarea-radius: var(--radius-md);
+  --textarea-line-height: var(--line-height-normal);
+
+  // Placeholder
+  --textarea-placeholder-fg: var(--color-fg-subtle);
+
+  // Focus
+  --textarea-border-color-focus: var(--color-accent);
+  --textarea-ring-focus: var(--ring-accent);
+
+  // Disabled
+  --textarea-bg-disabled: var(--color-bg-subtle);
+  --textarea-border-color-disabled: var(--color-border);
+  --textarea-fg-disabled: var(--color-fg-subtle);
+
+  // ReadOnly
+  --textarea-bg-read-only: var(--color-bg-subtle);
+
+  // Invalid
+  --textarea-border-color-invalid: var(--color-danger);
+  --textarea-ring-invalid: var(--ring-danger);
+
+  // Size — vertical padding per size
+  --textarea-padding-y-sm: var(--space-1);
+  --textarea-padding-y-md: var(--space-2);
+  --textarea-padding-y-lg: var(--space-2);
+
+  // Size — horizontal padding per size
+  --textarea-padding-x-sm: var(--space-2);
+  --textarea-padding-x-md: var(--space-3);
+  --textarea-padding-x-lg: var(--space-3);
+
+  // Size — font-size per size
+  --textarea-font-size-sm: var(--font-size-sm);
+  --textarea-font-size-md: var(--font-size-md);
+  --textarea-font-size-lg: var(--font-size-lg);
+
+  // Counter
+  --textarea-counter-margin-top: var(--space-1);
+  --textarea-counter-font-size: var(--font-size-sm);
+  --textarea-counter-fg: var(--color-fg-muted);
+}

package/src/components/Textarea/Textarea.tsx

@@ -0,0 +1,246 @@
+import {
+  forwardRef,
+  useCallback,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type ChangeEvent,
+  type TextareaHTMLAttributes,
+} from 'react';
+import clsx from 'clsx';
+import styles from './Textarea.module.scss';
+
+/**
+ * Field typography + padding scale. Pairs with Input's `size`.
+ *
+ * Unlike Input, size does NOT affect the textarea's height — height is
+ * driven by `minRows` (and capped by `maxRows` if auto-grow is on).
+ */
+export type TextareaSize = 'sm' | 'md' | 'lg';
+
+/** User-drag resize handle direction. Maps to CSS `resize`. */
+export type TextareaResize = 'none' | 'vertical' | 'both';
+
+export interface TextareaProps extends Omit<
+  TextareaHTMLAttributes<HTMLTextAreaElement>,
+  'size' | 'rows'
+> {
+  /**
+   * Toggles the error visual (red border + danger focus ring) and sets
+   * `aria-invalid="true"`. Pair with a visible error message and an
+   * `aria-describedby` pointer at the message id.
+   */
+  invalid?: boolean;
+
+  /**
+   * Visual size. Defaults to `'md'`. Affects typography + padding only, not
+   * height — that comes from `minRows`.
+   * - `'sm'` — tighter padding + `--font-size-sm`. Used in dense forms.
+   * - `'md'` — default padding + `--font-size-md`. Most form contexts.
+   * - `'lg'` — same padding as md but `--font-size-lg`. Hero / focus textareas.
+   *
+   * Note: this collapses the native HTML `<textarea size>` attribute. Use
+   * `style={{ width }}` or a parent container for explicit width.
+   */
+  size?: TextareaSize;
+
+  /**
+   * Block browser autofill AND password managers from offering to fill
+   * this textarea. Same heuristic as Input — see Input's JSDoc for the
+   * full set of opt-out attributes applied.
+   *
+   * Smart default: when omitted, block iff `autoComplete` is also omitted
+   * (or `'off'`). Explicit autocomplete hints opt back IN to autofill.
+   * Pass `true` to force-block, `false` to force-allow.
+   */
+  disableAutofill?: boolean;
+
+  /**
+   * Minimum visible rows. The textarea never renders shorter than this,
+   * regardless of content. Default: `3`. Also seeds the native `rows`
+   * attribute for SSR / no-JS rendering.
+   */
+  minRows?: number;
+
+  /**
+   * Maximum visible rows. Beyond this, content scrolls inside the field
+   * instead of expanding further. Only meaningful when `autoGrow` is true.
+   * Default: `undefined` (unbounded growth).
+   */
+  maxRows?: number;
+
+  /**
+   * When true, height adapts to content between `minRows` and `maxRows`.
+   * Default: `true`. When false, height locks at `minRows` and a scrollbar
+   * appears past it.
+   */
+  autoGrow?: boolean;
+
+  /**
+   * User-drag resize handle direction. Default: `'vertical'`.
+   *
+   * **Forced to `'none'`** when `autoGrow` is `true` — user-drag fights
+   * the auto-grow measurement and produces erratic behavior. To enable
+   * a resize handle, opt out of auto-grow with `autoGrow={false}`.
+   */
+  resize?: TextareaResize;
+
+  /**
+   * Show the character counter (`${value.length}` or
+   * `${value.length} / ${maxLength}` when both are set).
+   *
+   * Default: `true` when `maxLength` is set, `false` otherwise.
+   *
+   * The counter renders as a `<span aria-live="polite" aria-atomic="true">`
+   * inside the wrapper, below the textarea. It updates on every input —
+   * works for both controlled and uncontrolled textareas.
+   */
+  showCount?: boolean;
+}
+
+const AUTOFILL_DISABLED_PROPS = {
+  autoComplete: 'off' as const,
+  'data-1p-ignore': '' as const,
+  'data-lpignore': 'true' as const,
+  'data-form-type': 'other' as const,
+};
+
+const SIZE_CLASS: Record<TextareaSize, string> = {
+  sm: styles.sizeSm,
+  md: styles.sizeMd,
+  lg: styles.sizeLg,
+};
+
+const RESIZE_CLASS: Record<TextareaResize, string> = {
+  none: styles.resizeNone,
+  vertical: styles.resizeVertical,
+  both: styles.resizeBoth,
+};
+
+/**
+ * Multi-line text input with auto-grow, resize direction and an optional character counter.
+ * @see docs/components/Textarea.md
+ */
+export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function Textarea(
+  {
+    invalid,
+    size = 'md',
+    disableAutofill,
+    minRows = 3,
+    maxRows,
+    autoGrow = true,
+    resize = 'vertical',
+    showCount,
+    className,
+    value,
+    defaultValue,
+    onChange,
+    maxLength,
+    ...props
+  },
+  ref,
+) {
+  // Merge external ref with internal ref so we don't lose either.
+  const textareaRef = useRef<HTMLTextAreaElement | null>(null);
+  const setRefs = useCallback(
+    (node: HTMLTextAreaElement | null) => {
+      textareaRef.current = node;
+      if (typeof ref === 'function') ref(node);
+      else if (ref) ref.current = node;
+    },
+    [ref],
+  );
+
+  // Internal value mirror — keeps the counter in sync for uncontrolled
+  // inputs. For controlled inputs, currentValue tracks `value` directly.
+  const [internalValue, setInternalValue] = useState<string>(() => {
+    if (defaultValue == null) return '';
+    return String(defaultValue);
+  });
+  const isControlled = value !== undefined;
+  const currentValue = isControlled ? String(value) : internalValue;
+
+  const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
+    if (!isControlled) setInternalValue(e.target.value);
+    onChange?.(e);
+  };
+
+  // Auto-grow: synchronously after render, reset height to auto, then
+  // set to scrollHeight clamped between minRows and maxRows.
+  useLayoutEffect(() => {
+    const el = textareaRef.current;
+    if (!el) return;
+
+    if (!autoGrow) {
+      // Clear any prior auto-grow inline styles so toggling autoGrow OFF
+      // returns control to the native textarea (rows attribute + user drag).
+      el.style.height = '';
+      el.style.overflowY = '';
+      return;
+    }
+
+    // Reset to 'auto' first so scrollHeight reflects content, not the prior height.
+    el.style.height = 'auto';
+
+    const computed = window.getComputedStyle(el);
+    // jsdom may return 'normal' for lineHeight — fall back to 0 so the
+    // math degrades gracefully (minHeight becomes 0, target = scrollHeight).
+    const lineHeight = parseFloat(computed.lineHeight) || 0;
+    const paddingY =
+      (parseFloat(computed.paddingTop) || 0) + (parseFloat(computed.paddingBottom) || 0);
+    const borderY =
+      (parseFloat(computed.borderTopWidth) || 0) + (parseFloat(computed.borderBottomWidth) || 0);
+
+    const minHeight = lineHeight * minRows + paddingY + borderY;
+    const maxHeight = maxRows !== undefined ? lineHeight * maxRows + paddingY + borderY : Infinity;
+
+    const desired = el.scrollHeight + borderY;
+    const target = Math.min(Math.max(desired, minHeight), maxHeight);
+    el.style.height = `${target}px`;
+    el.style.overflowY = desired > maxHeight ? 'auto' : 'hidden';
+    // NOTE: `size` is in the deps array because it changes padding, which
+    // changes paddingY in the math above. Don't remove it.
+  }, [currentValue, autoGrow, minRows, maxRows, size]);
+
+  // Smart autofill default — same heuristic as Input.
+  const hasAutocompleteHint =
+    typeof props.autoComplete === 'string' && props.autoComplete !== 'off';
+  const blockAutofill = disableAutofill ?? !hasAutocompleteHint;
+
+  // Effective resize: auto-grow forces 'none' because user-drag and
+  // measured-height fight each other.
+  const effectiveResize: TextareaResize = autoGrow ? 'none' : resize;
+
+  const shouldShowCount = showCount ?? maxLength !== undefined;
+
+  return (
+    <div className={styles.wrapper}>
+      <textarea
+        ref={setRefs}
+        rows={minRows}
+        aria-invalid={invalid || undefined}
+        // Autofill blocking goes before {...props} — matches Input's spread
+        // order. Consumer's autoComplete wins; data-* opt-outs still apply.
+        {...(blockAutofill ? AUTOFILL_DISABLED_PROPS : {})}
+        value={value}
+        defaultValue={defaultValue}
+        maxLength={maxLength}
+        {...props}
+        onChange={handleChange}
+        className={clsx(
+          styles.textarea,
+          SIZE_CLASS[size],
+          RESIZE_CLASS[effectiveResize],
+          invalid && styles.invalid,
+          className,
+        )}
+      />
+      {shouldShowCount && (
+        <span className={styles.counter} aria-live="polite" aria-atomic="true">
+          {currentValue.length}
+          {maxLength !== undefined && ` / ${maxLength}`}
+        </span>
+      )}
+    </div>
+  );
+});

package/src/components/Textarea/index.ts

@@ -0,0 +1,2 @@
+export { Textarea } from './Textarea';
+export type { TextareaProps, TextareaSize, TextareaResize } from './Textarea';