@d4gger/design-system 2.7.0 → 3.0.1

package/dist/components/textAreaField/TextAreaField.cjs

@@ -0,0 +1,231 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var TextAreaField_exports = {};
+__export(TextAreaField_exports, {
+  TextAreaField: () => TextAreaField,
+  TextAreaFieldRoot: () => TextAreaFieldRoot,
+  TextAreaFieldTextarea: () => TextAreaFieldTextarea
+});
+module.exports = __toCommonJS(TextAreaField_exports);
+var React = __toESM(require("react"), 1);
+var import_classnames = __toESM(require("classnames"), 1);
+var import_react_slot = require("@radix-ui/react-slot");
+var import_extractProps = require("../../_internal/helpers/extractProps");
+var import_textAreaField = require("./textAreaField.props");
+var import_Label = require("../label/Label");
+var import_Text = require("../text/Text");
+var import_jsx_runtime = require("react/jsx-runtime");
+const TextAreaFieldContext = React.createContext({});
+function useTextAreaFieldContext() {
+  return React.useContext(TextAreaFieldContext);
+}
+const TextAreaFieldRoot = React.forwardRef((props, forwardedRef) => {
+  const {
+    asChild,
+    children,
+    className,
+    color,
+    defaultValue,
+    errorText,
+    helperText,
+    id,
+    invalid = false,
+    label,
+    maxLength,
+    onChange,
+    radius,
+    resize = "vertical",
+    showCount = true,
+    size = "md",
+    value,
+    variant = "surface",
+    ...textAreaFieldProps
+  } = (0, import_extractProps.extractProps)(props, import_textAreaField.textAreaFieldPropDefs);
+  const Comp = asChild ? import_react_slot.Slot : "div";
+  const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue ?? "");
+  const isControlled = value !== void 0;
+  const currentValue = isControlled ? value ?? "" : uncontrolledValue;
+  const currentLength = currentValue.length;
+  const handleChange = React.useCallback(
+    (e) => {
+      if (!isControlled) setUncontrolledValue(e.target.value);
+      onChange?.(e);
+    },
+    [isControlled, onChange]
+  );
+  const showHelper = helperText && !invalid;
+  const showError = errorText && invalid;
+  const helperId = id ? `${id}-helper` : void 0;
+  const errorId = id ? `${id}-error` : void 0;
+  const describedBy = [showHelper ? helperId : void 0, showError ? errorId : void 0].filter(Boolean).join(" ") || void 0;
+  const exceeds = maxLength !== void 0 && currentLength > maxLength;
+  const shellRef = React.useRef(null);
+  const dragState = React.useRef(null);
+  const handleGripPointerDown = React.useCallback(
+    (e) => {
+      if (resize === "none") return;
+      const shell = shellRef.current;
+      if (!shell) return;
+      e.preventDefault();
+      dragState.current = {
+        startX: e.clientX,
+        startY: e.clientY,
+        startW: shell.offsetWidth,
+        startH: shell.offsetHeight
+      };
+      try {
+        e.currentTarget.setPointerCapture(e.pointerId);
+      } catch {
+      }
+    },
+    [resize]
+  );
+  const handleGripPointerMove = React.useCallback(
+    (e) => {
+      const drag = dragState.current;
+      const shell = shellRef.current;
+      if (!drag || !shell) return;
+      if (resize === "horizontal" || resize === "both") {
+        shell.style.width = `${Math.max(120, drag.startW + e.clientX - drag.startX)}px`;
+      }
+      if (resize === "vertical" || resize === "both") {
+        shell.style.height = `${Math.max(40, drag.startH + e.clientY - drag.startY)}px`;
+      }
+    },
+    [resize]
+  );
+  const handleGripPointerUp = React.useCallback(() => {
+    dragState.current = null;
+  }, []);
+  const showGrip = resize !== "none";
+  const handleGripKeyDown = React.useCallback(
+    (e) => {
+      const shell = shellRef.current;
+      if (!shell) return;
+      const step = e.shiftKey ? 32 : 8;
+      let handled = true;
+      if ((resize === "vertical" || resize === "both") && (e.key === "ArrowUp" || e.key === "ArrowDown")) {
+        const delta = e.key === "ArrowDown" ? step : -step;
+        shell.style.height = `${Math.max(40, shell.offsetHeight + delta)}px`;
+      } else if ((resize === "horizontal" || resize === "both") && (e.key === "ArrowLeft" || e.key === "ArrowRight")) {
+        const delta = e.key === "ArrowRight" ? step : -step;
+        shell.style.width = `${Math.max(120, shell.offsetWidth + delta)}px`;
+      } else {
+        handled = false;
+      }
+      if (handled) e.preventDefault();
+    },
+    [resize]
+  );
+  const contextValue = React.useMemo(
+    () => ({ id, invalid, maxLength, fieldValue: currentValue, describedBy, handleChange }),
+    [id, invalid, maxLength, currentValue, describedBy, handleChange]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TextAreaFieldContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    Comp,
+    {
+      ...textAreaFieldProps,
+      ref: forwardedRef,
+      className: (0, import_classnames.default)(
+        "dsx-text-area-field",
+        `dsx-text-area-field--${size}`,
+        `dsx-text-area-field--${variant}`,
+        `dsx-text-area-field--resize-${resize}`,
+        invalid && "dsx-text-area-field--invalid",
+        className
+      ),
+      "data-accent-color": color,
+      "data-radius": radius,
+      "data-size": size,
+      "data-variant": variant,
+      children: [
+        label ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Label.Label, { htmlFor: id, className: "dsx-text-area-field__label", children: label }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref: shellRef, className: "dsx-text-area-field__shell", children: [
+          children,
+          showCount ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dsx-text-area-field__footer", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_Text.Text,
+            {
+              variant: "label-small",
+              tone: exceeds ? void 0 : "muted",
+              className: (0, import_classnames.default)(
+                "dsx-text-area-field__counter",
+                exceeds && "dsx-text-area-field__counter--exceed"
+              ),
+              "aria-live": "polite",
+              children: maxLength !== void 0 ? `${currentLength} / ${maxLength}` : `${currentLength}`
+            }
+          ) }) : null,
+          showGrip ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "div",
+            {
+              className: "dsx-text-area-field__grip",
+              role: "separator",
+              "aria-label": "Resize text area. Use arrow keys to resize.",
+              "aria-orientation": resize === "horizontal" ? "horizontal" : "vertical",
+              tabIndex: 0,
+              onPointerDown: handleGripPointerDown,
+              onPointerMove: handleGripPointerMove,
+              onPointerUp: handleGripPointerUp,
+              onKeyDown: handleGripKeyDown,
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 12 12", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M8.5 3.5 3.5 8.5M11 6 6 11", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) })
+            }
+          ) : null
+        ] }),
+        showError ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.Text, { variant: "label-small", id: errorId, className: "dsx-text-area-field__error", children: errorText }) : null,
+        showHelper ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.Text, { variant: "label-small", tone: "muted", id: helperId, className: "dsx-text-area-field__helper", children: helperText }) : null
+      ]
+    }
+  ) });
+});
+TextAreaFieldRoot.displayName = "TextAreaField";
+const TextAreaFieldTextarea = React.forwardRef(
+  ({ className, ...props }, forwardedRef) => {
+    const { id, invalid, maxLength, fieldValue, describedBy, handleChange } = useTextAreaFieldContext();
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "textarea",
+      {
+        ...props,
+        id,
+        maxLength,
+        value: fieldValue,
+        onChange: handleChange,
+        ref: forwardedRef,
+        className: (0, import_classnames.default)("dsx-text-area-field__textarea", className),
+        "aria-invalid": invalid || void 0,
+        "aria-describedby": describedBy
+      }
+    );
+  }
+);
+TextAreaFieldTextarea.displayName = "TextAreaFieldTextarea";
+const TextAreaField = Object.assign(TextAreaFieldRoot, {
+  Textarea: TextAreaFieldTextarea
+});
+//# sourceMappingURL=TextAreaField.cjs.map

package/dist/components/textAreaField/TextAreaField.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/textAreaField/TextAreaField.tsx"],
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport classNames from 'classnames'\nimport { Slot } from '@radix-ui/react-slot'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { textAreaFieldPropDefs } from './textAreaField.props'\nimport { Label } from '../label/Label'\nimport { Text } from '../text/Text'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype TextAreaFieldContextValue = {\n  id?: string\n  invalid?: boolean\n  maxLength?: number\n  fieldValue?: string\n  describedBy?: string\n}\n\nconst TextAreaFieldContext = React.createContext<TextAreaFieldContextValue>({})\n\nfunction useTextAreaFieldContext() {\n  return React.useContext(TextAreaFieldContext)\n}\n\ntype TextAreaFieldRootOwnProps = GetPropDefTypes<typeof textAreaFieldPropDefs> & {\n  id?: string\n  label?: string\n  helperText?: string\n  errorText?: string\n  value?: string\n  defaultValue?: string\n  onChange?: React.ChangeEventHandler<HTMLTextAreaElement>\n}\n\ninterface TextAreaFieldRootProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'onChange' | 'value'>, TextAreaFieldRootOwnProps {}\n\ntype TextAreaFieldRootElement = React.ComponentRef<'div'>\n\nconst TextAreaFieldRoot = React.forwardRef<TextAreaFieldRootElement, TextAreaFieldRootProps>((props, forwardedRef) => {\n  const {\n    asChild,\n    children,\n    className,\n    color,\n    defaultValue,\n    errorText,\n    helperText,\n    id,\n    invalid = false,\n    label,\n    maxLength,\n    onChange,\n    radius,\n    resize = 'vertical',\n    showCount = true,\n    size = 'md',\n    value,\n    variant = 'surface',\n    ...textAreaFieldProps\n  } = extractProps(props, textAreaFieldPropDefs)\n\n  const Comp = asChild ? Slot : 'div'\n\n  // Counter length: controlled value wins, otherwise internal state seeded from\n  // defaultValue. Past-max values are shown as-is (exceed-red, never truncated).\n  const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue ?? '')\n  const isControlled = value !== undefined\n  const currentValue = isControlled ? (value ?? '') : uncontrolledValue\n  const currentLength = currentValue.length\n\n  const handleChange = React.useCallback(\n    (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n      if (!isControlled) setUncontrolledValue(e.target.value)\n      onChange?.(e)\n    },\n    [isControlled, onChange],\n  )\n\n  const showHelper = helperText && !invalid\n  const showError = errorText && invalid\n  const helperId = id ? `${id}-helper` : undefined\n  const errorId = id ? `${id}-error` : undefined\n  const describedBy = [showHelper ? helperId : undefined, showError ? errorId : undefined]\n    .filter(Boolean)\n    .join(' ') || undefined\n\n  const exceeds = maxLength !== undefined && currentLength > maxLength\n\n  // Custom grip drag: the shell is the resizable surface (native resize is\n  // off everywhere, so the grip works identically in every engine, at every\n  // zoom). Pointer capture is guarded for non-pointer environments (tests).\n  const shellRef = React.useRef<HTMLDivElement>(null)\n  const dragState = React.useRef<{ startX: number; startY: number; startW: number; startH: number } | null>(null)\n\n  const handleGripPointerDown = React.useCallback(\n    (e: React.PointerEvent<HTMLDivElement>) => {\n      if (resize === 'none') return\n      const shell = shellRef.current\n      if (!shell) return\n      e.preventDefault()\n      dragState.current = {\n        startX: e.clientX,\n        startY: e.clientY,\n        startW: shell.offsetWidth,\n        startH: shell.offsetHeight,\n      }\n      try {\n        e.currentTarget.setPointerCapture(e.pointerId)\n      } catch {\n        // jsdom and other non-pointer environments: movement still applies.\n      }\n    },\n    [resize],\n  )\n\n  const handleGripPointerMove = React.useCallback(\n    (e: React.PointerEvent<HTMLDivElement>) => {\n      const drag = dragState.current\n      const shell = shellRef.current\n      if (!drag || !shell) return\n      if (resize === 'horizontal' || resize === 'both') {\n        shell.style.width = `${Math.max(120, drag.startW + e.clientX - drag.startX)}px`\n      }\n      if (resize === 'vertical' || resize === 'both') {\n        shell.style.height = `${Math.max(40, drag.startH + e.clientY - drag.startY)}px`\n      }\n    },\n    [resize],\n  )\n\n  const handleGripPointerUp = React.useCallback(() => {\n    dragState.current = null\n  }, [])\n\n  const showGrip = resize !== 'none'\n\n  // Keyboard resizing: arrows grow/shrink 8px (Shift: 32px), mirroring the\n  // drag clamps. The grip is focusable with an accessible name.\n  const handleGripKeyDown = React.useCallback(\n    (e: React.KeyboardEvent<HTMLDivElement>) => {\n      const shell = shellRef.current\n      if (!shell) return\n      const step = e.shiftKey ? 32 : 8\n      let handled = true\n      if ((resize === 'vertical' || resize === 'both') && (e.key === 'ArrowUp' || e.key === 'ArrowDown')) {\n        const delta = e.key === 'ArrowDown' ? step : -step\n        shell.style.height = `${Math.max(40, shell.offsetHeight + delta)}px`\n      } else if ((resize === 'horizontal' || resize === 'both') && (e.key === 'ArrowLeft' || e.key === 'ArrowRight')) {\n        const delta = e.key === 'ArrowRight' ? step : -step\n        shell.style.width = `${Math.max(120, shell.offsetWidth + delta)}px`\n      } else {\n        handled = false\n      }\n      if (handled) e.preventDefault()\n    },\n    [resize],\n  )\n\n  const contextValue = React.useMemo(\n    () => ({ id, invalid, maxLength, fieldValue: currentValue, describedBy, handleChange }),\n    [id, invalid, maxLength, currentValue, describedBy, handleChange],\n  )\n\n  return (\n    <TextAreaFieldContext.Provider value={contextValue}>\n      <Comp\n        {...textAreaFieldProps}\n        ref={forwardedRef}\n        className={classNames(\n          'dsx-text-area-field',\n          `dsx-text-area-field--${size}`,\n          `dsx-text-area-field--${variant}`,\n          `dsx-text-area-field--resize-${resize}`,\n          invalid && 'dsx-text-area-field--invalid',\n          className,\n        )}\n        data-accent-color={color}\n        data-radius={radius}\n        data-size={size}\n        data-variant={variant}\n      >\n        {label ? (\n          <Label htmlFor={id} className=\"dsx-text-area-field__label\">\n            {label}\n          </Label>\n        ) : null}\n        <div ref={shellRef} className=\"dsx-text-area-field__shell\">\n          {children}\n          {showCount ? (\n            <div className=\"dsx-text-area-field__footer\">\n              <Text\n                variant=\"label-small\"\n                tone={exceeds ? undefined : 'muted'}\n                className={classNames(\n                  'dsx-text-area-field__counter',\n                  exceeds && 'dsx-text-area-field__counter--exceed',\n                )}\n                aria-live=\"polite\"\n              >\n                {maxLength !== undefined ? `${currentLength} / ${maxLength}` : `${currentLength}`}\n              </Text>\n            </div>\n          ) : null}\n          {showGrip ? (\n            <div\n              className=\"dsx-text-area-field__grip\"\n              role=\"separator\"\n              aria-label=\"Resize text area. Use arrow keys to resize.\"\n              aria-orientation={resize === 'horizontal' ? 'horizontal' : 'vertical'}\n              tabIndex={0}\n              onPointerDown={handleGripPointerDown}\n              onPointerMove={handleGripPointerMove}\n              onPointerUp={handleGripPointerUp}\n              onKeyDown={handleGripKeyDown}\n            >\n              <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" aria-hidden=\"true\">\n                <path d=\"M8.5 3.5 3.5 8.5M11 6 6 11\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\n              </svg>\n            </div>\n          ) : null}\n        </div>\n        {showError ? (\n          <Text variant=\"label-small\" id={errorId} className=\"dsx-text-area-field__error\">\n            {errorText}\n          </Text>\n        ) : null}\n        {showHelper ? (\n          <Text variant=\"label-small\" tone=\"muted\" id={helperId} className=\"dsx-text-area-field__helper\">\n            {helperText}\n          </Text>\n        ) : null}\n      </Comp>\n    </TextAreaFieldContext.Provider>\n  )\n})\nTextAreaFieldRoot.displayName = 'TextAreaField'\n\ntype TextAreaFieldTextareaElement = React.ComponentRef<'textarea'>\n\ninterface TextAreaFieldTextareaProps extends Omit<React.ComponentPropsWithoutRef<'textarea'>, 'value' | 'defaultValue' | 'onChange' | 'maxLength'> {}\n\nconst TextAreaFieldTextarea = React.forwardRef<TextAreaFieldTextareaElement, TextAreaFieldTextareaProps>(\n  ({ className, ...props }, forwardedRef) => {\n    const { id, invalid, maxLength, fieldValue, describedBy, handleChange } = useTextAreaFieldContext() as TextAreaFieldContextValue & {\n      handleChange?: React.ChangeEventHandler<HTMLTextAreaElement>\n    }\n\n    return (\n      <textarea\n        {...props}\n        id={id}\n        maxLength={maxLength}\n        value={fieldValue}\n        onChange={handleChange}\n        ref={forwardedRef}\n        className={classNames('dsx-text-area-field__textarea', className)}\n        aria-invalid={invalid || undefined}\n        aria-describedby={describedBy}\n      />\n    )\n  },\n)\nTextAreaFieldTextarea.displayName = 'TextAreaFieldTextarea'\n\nconst TextAreaField: typeof TextAreaFieldRoot & {\n  Textarea: typeof TextAreaFieldTextarea\n} = Object.assign(TextAreaFieldRoot, {\n  Textarea: TextAreaFieldTextarea,\n})\n\nexport { TextAreaField, TextAreaFieldRoot, TextAreaFieldTextarea }\nexport type { TextAreaFieldRootProps, TextAreaFieldTextareaProps }\n"],
+  "mappings": "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",
+  "names": ["classNames"]
+}

package/dist/components/textAreaField/TextAreaField.d.cts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { textAreaFieldPropDefs } from './textAreaField.props.cjs';
+import type { GetPropDefTypes } from '../../_internal/props/propDef.cjs';
+type TextAreaFieldRootOwnProps = GetPropDefTypes<typeof textAreaFieldPropDefs> & {
+    id?: string;
+    label?: string;
+    helperText?: string;
+    errorText?: string;
+    value?: string;
+    defaultValue?: string;
+    onChange?: React.ChangeEventHandler<HTMLTextAreaElement>;
+};
+interface TextAreaFieldRootProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'onChange' | 'value'>, TextAreaFieldRootOwnProps {
+}
+declare const TextAreaFieldRoot: React.ForwardRefExoticComponent<TextAreaFieldRootProps & React.RefAttributes<HTMLDivElement>>;
+interface TextAreaFieldTextareaProps extends Omit<React.ComponentPropsWithoutRef<'textarea'>, 'value' | 'defaultValue' | 'onChange' | 'maxLength'> {
+}
+declare const TextAreaFieldTextarea: React.ForwardRefExoticComponent<TextAreaFieldTextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+declare const TextAreaField: typeof TextAreaFieldRoot & {
+    Textarea: typeof TextAreaFieldTextarea;
+};
+export { TextAreaField, TextAreaFieldRoot, TextAreaFieldTextarea };
+export type { TextAreaFieldRootProps, TextAreaFieldTextareaProps };
+//# sourceMappingURL=TextAreaField.d.cts.map

package/dist/components/textAreaField/TextAreaField.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextAreaField.d.cts","sourceRoot":"","sources":["../../../src/components/textAreaField/TextAreaField.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,OAAO,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAA;AAI7D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAgBpE,KAAK,yBAAyB,GAAG,eAAe,CAAC,OAAO,qBAAqB,CAAC,GAAG;IAC/E,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,mBAAmB,CAAC,CAAA;CACzD,CAAA;AAED,UAAU,sBAAuB,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,OAAO,GAAG,cAAc,GAAG,UAAU,GAAG,OAAO,CAAC,EAAE,yBAAyB;CAAG;AAInK,QAAA,MAAM,iBAAiB,+FAoMrB,CAAA;AAKF,UAAU,0BAA2B,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,UAAU,CAAC,EAAE,OAAO,GAAG,cAAc,GAAG,UAAU,GAAG,WAAW,CAAC;CAAG;AAErJ,QAAA,MAAM,qBAAqB,wGAoB1B,CAAA;AAGD,QAAA,MAAM,aAAa,EAAE,OAAO,iBAAiB,GAAG;IAC9C,QAAQ,EAAE,OAAO,qBAAqB,CAAA;CAGtC,CAAA;AAEF,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,qBAAqB,EAAE,CAAA;AAClE,YAAY,EAAE,sBAAsB,EAAE,0BAA0B,EAAE,CAAA"}

package/dist/components/textAreaField/TextAreaField.d.mts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { textAreaFieldPropDefs } from './textAreaField.props.js';
+import type { GetPropDefTypes } from '../../_internal/props/propDef.js';
+type TextAreaFieldRootOwnProps = GetPropDefTypes<typeof textAreaFieldPropDefs> & {
+    id?: string;
+    label?: string;
+    helperText?: string;
+    errorText?: string;
+    value?: string;
+    defaultValue?: string;
+    onChange?: React.ChangeEventHandler<HTMLTextAreaElement>;
+};
+interface TextAreaFieldRootProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'onChange' | 'value'>, TextAreaFieldRootOwnProps {
+}
+declare const TextAreaFieldRoot: React.ForwardRefExoticComponent<TextAreaFieldRootProps & React.RefAttributes<HTMLDivElement>>;
+interface TextAreaFieldTextareaProps extends Omit<React.ComponentPropsWithoutRef<'textarea'>, 'value' | 'defaultValue' | 'onChange' | 'maxLength'> {
+}
+declare const TextAreaFieldTextarea: React.ForwardRefExoticComponent<TextAreaFieldTextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+declare const TextAreaField: typeof TextAreaFieldRoot & {
+    Textarea: typeof TextAreaFieldTextarea;
+};
+export { TextAreaField, TextAreaFieldRoot, TextAreaFieldTextarea };
+export type { TextAreaFieldRootProps, TextAreaFieldTextareaProps };
+//# sourceMappingURL=TextAreaField.d.mts.map

package/dist/components/textAreaField/TextAreaField.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextAreaField.d.mts","sourceRoot":"","sources":["../../../src/components/textAreaField/TextAreaField.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,OAAO,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAA;AAI7D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAgBpE,KAAK,yBAAyB,GAAG,eAAe,CAAC,OAAO,qBAAqB,CAAC,GAAG;IAC/E,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,mBAAmB,CAAC,CAAA;CACzD,CAAA;AAED,UAAU,sBAAuB,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,OAAO,GAAG,cAAc,GAAG,UAAU,GAAG,OAAO,CAAC,EAAE,yBAAyB;CAAG;AAInK,QAAA,MAAM,iBAAiB,+FAoMrB,CAAA;AAKF,UAAU,0BAA2B,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,UAAU,CAAC,EAAE,OAAO,GAAG,cAAc,GAAG,UAAU,GAAG,WAAW,CAAC;CAAG;AAErJ,QAAA,MAAM,qBAAqB,wGAoB1B,CAAA;AAGD,QAAA,MAAM,aAAa,EAAE,OAAO,iBAAiB,GAAG;IAC9C,QAAQ,EAAE,OAAO,qBAAqB,CAAA;CAGtC,CAAA;AAEF,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,qBAAqB,EAAE,CAAA;AAClE,YAAY,EAAE,sBAAsB,EAAE,0BAA0B,EAAE,CAAA"}

package/dist/components/textAreaField/TextAreaField.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { textAreaFieldPropDefs } from './textAreaField.props.js';
+import type { GetPropDefTypes } from '../../_internal/props/propDef.js';
+type TextAreaFieldRootOwnProps = GetPropDefTypes<typeof textAreaFieldPropDefs> & {
+    id?: string;
+    label?: string;
+    helperText?: string;
+    errorText?: string;
+    value?: string;
+    defaultValue?: string;
+    onChange?: React.ChangeEventHandler<HTMLTextAreaElement>;
+};
+interface TextAreaFieldRootProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'onChange' | 'value'>, TextAreaFieldRootOwnProps {
+}
+declare const TextAreaFieldRoot: React.ForwardRefExoticComponent<TextAreaFieldRootProps & React.RefAttributes<HTMLDivElement>>;
+interface TextAreaFieldTextareaProps extends Omit<React.ComponentPropsWithoutRef<'textarea'>, 'value' | 'defaultValue' | 'onChange' | 'maxLength'> {
+}
+declare const TextAreaFieldTextarea: React.ForwardRefExoticComponent<TextAreaFieldTextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+declare const TextAreaField: typeof TextAreaFieldRoot & {
+    Textarea: typeof TextAreaFieldTextarea;
+};
+export { TextAreaField, TextAreaFieldRoot, TextAreaFieldTextarea };
+export type { TextAreaFieldRootProps, TextAreaFieldTextareaProps };
+//# sourceMappingURL=TextAreaField.d.ts.map

package/dist/components/textAreaField/TextAreaField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextAreaField.d.ts","sourceRoot":"","sources":["../../../src/components/textAreaField/TextAreaField.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,OAAO,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAA;AAI7D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAgBpE,KAAK,yBAAyB,GAAG,eAAe,CAAC,OAAO,qBAAqB,CAAC,GAAG;IAC/E,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,mBAAmB,CAAC,CAAA;CACzD,CAAA;AAED,UAAU,sBAAuB,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,OAAO,GAAG,cAAc,GAAG,UAAU,GAAG,OAAO,CAAC,EAAE,yBAAyB;CAAG;AAInK,QAAA,MAAM,iBAAiB,+FAoMrB,CAAA;AAKF,UAAU,0BAA2B,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,UAAU,CAAC,EAAE,OAAO,GAAG,cAAc,GAAG,UAAU,GAAG,WAAW,CAAC;CAAG;AAErJ,QAAA,MAAM,qBAAqB,wGAoB1B,CAAA;AAGD,QAAA,MAAM,aAAa,EAAE,OAAO,iBAAiB,GAAG;IAC9C,QAAQ,EAAE,OAAO,qBAAqB,CAAA;CAGtC,CAAA;AAEF,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,qBAAqB,EAAE,CAAA;AAClE,YAAY,EAAE,sBAAsB,EAAE,0BAA0B,EAAE,CAAA"}

package/dist/components/textAreaField/TextAreaField.js

@@ -0,0 +1,201 @@
+"use client";
+import * as React from "react";
+import classNames from "classnames";
+import { Slot } from "@radix-ui/react-slot";
+import { extractProps } from "../../_internal/helpers/extractProps.js";
+import { textAreaFieldPropDefs } from "./textAreaField.props.js";
+import { Label } from "../label/Label.js";
+import { Text } from "../text/Text.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+const TextAreaFieldContext = React.createContext({});
+function useTextAreaFieldContext() {
+  return React.useContext(TextAreaFieldContext);
+}
+const TextAreaFieldRoot = React.forwardRef((props, forwardedRef) => {
+  const {
+    asChild,
+    children,
+    className,
+    color,
+    defaultValue,
+    errorText,
+    helperText,
+    id,
+    invalid = false,
+    label,
+    maxLength,
+    onChange,
+    radius,
+    resize = "vertical",
+    showCount = true,
+    size = "md",
+    value,
+    variant = "surface",
+    ...textAreaFieldProps
+  } = extractProps(props, textAreaFieldPropDefs);
+  const Comp = asChild ? Slot : "div";
+  const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue ?? "");
+  const isControlled = value !== void 0;
+  const currentValue = isControlled ? value ?? "" : uncontrolledValue;
+  const currentLength = currentValue.length;
+  const handleChange = React.useCallback(
+    (e) => {
+      if (!isControlled) setUncontrolledValue(e.target.value);
+      onChange?.(e);
+    },
+    [isControlled, onChange]
+  );
+  const showHelper = helperText && !invalid;
+  const showError = errorText && invalid;
+  const helperId = id ? `${id}-helper` : void 0;
+  const errorId = id ? `${id}-error` : void 0;
+  const describedBy = [showHelper ? helperId : void 0, showError ? errorId : void 0].filter(Boolean).join(" ") || void 0;
+  const exceeds = maxLength !== void 0 && currentLength > maxLength;
+  const shellRef = React.useRef(null);
+  const dragState = React.useRef(null);
+  const handleGripPointerDown = React.useCallback(
+    (e) => {
+      if (resize === "none") return;
+      const shell = shellRef.current;
+      if (!shell) return;
+      e.preventDefault();
+      dragState.current = {
+        startX: e.clientX,
+        startY: e.clientY,
+        startW: shell.offsetWidth,
+        startH: shell.offsetHeight
+      };
+      try {
+        e.currentTarget.setPointerCapture(e.pointerId);
+      } catch {
+      }
+    },
+    [resize]
+  );
+  const handleGripPointerMove = React.useCallback(
+    (e) => {
+      const drag = dragState.current;
+      const shell = shellRef.current;
+      if (!drag || !shell) return;
+      if (resize === "horizontal" || resize === "both") {
+        shell.style.width = `${Math.max(120, drag.startW + e.clientX - drag.startX)}px`;
+      }
+      if (resize === "vertical" || resize === "both") {
+        shell.style.height = `${Math.max(40, drag.startH + e.clientY - drag.startY)}px`;
+      }
+    },
+    [resize]
+  );
+  const handleGripPointerUp = React.useCallback(() => {
+    dragState.current = null;
+  }, []);
+  const showGrip = resize !== "none";
+  const handleGripKeyDown = React.useCallback(
+    (e) => {
+      const shell = shellRef.current;
+      if (!shell) return;
+      const step = e.shiftKey ? 32 : 8;
+      let handled = true;
+      if ((resize === "vertical" || resize === "both") && (e.key === "ArrowUp" || e.key === "ArrowDown")) {
+        const delta = e.key === "ArrowDown" ? step : -step;
+        shell.style.height = `${Math.max(40, shell.offsetHeight + delta)}px`;
+      } else if ((resize === "horizontal" || resize === "both") && (e.key === "ArrowLeft" || e.key === "ArrowRight")) {
+        const delta = e.key === "ArrowRight" ? step : -step;
+        shell.style.width = `${Math.max(120, shell.offsetWidth + delta)}px`;
+      } else {
+        handled = false;
+      }
+      if (handled) e.preventDefault();
+    },
+    [resize]
+  );
+  const contextValue = React.useMemo(
+    () => ({ id, invalid, maxLength, fieldValue: currentValue, describedBy, handleChange }),
+    [id, invalid, maxLength, currentValue, describedBy, handleChange]
+  );
+  return /* @__PURE__ */ jsx(TextAreaFieldContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
+    Comp,
+    {
+      ...textAreaFieldProps,
+      ref: forwardedRef,
+      className: classNames(
+        "dsx-text-area-field",
+        `dsx-text-area-field--${size}`,
+        `dsx-text-area-field--${variant}`,
+        `dsx-text-area-field--resize-${resize}`,
+        invalid && "dsx-text-area-field--invalid",
+        className
+      ),
+      "data-accent-color": color,
+      "data-radius": radius,
+      "data-size": size,
+      "data-variant": variant,
+      children: [
+        label ? /* @__PURE__ */ jsx(Label, { htmlFor: id, className: "dsx-text-area-field__label", children: label }) : null,
+        /* @__PURE__ */ jsxs("div", { ref: shellRef, className: "dsx-text-area-field__shell", children: [
+          children,
+          showCount ? /* @__PURE__ */ jsx("div", { className: "dsx-text-area-field__footer", children: /* @__PURE__ */ jsx(
+            Text,
+            {
+              variant: "label-small",
+              tone: exceeds ? void 0 : "muted",
+              className: classNames(
+                "dsx-text-area-field__counter",
+                exceeds && "dsx-text-area-field__counter--exceed"
+              ),
+              "aria-live": "polite",
+              children: maxLength !== void 0 ? `${currentLength} / ${maxLength}` : `${currentLength}`
+            }
+          ) }) : null,
+          showGrip ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "dsx-text-area-field__grip",
+              role: "separator",
+              "aria-label": "Resize text area. Use arrow keys to resize.",
+              "aria-orientation": resize === "horizontal" ? "horizontal" : "vertical",
+              tabIndex: 0,
+              onPointerDown: handleGripPointerDown,
+              onPointerMove: handleGripPointerMove,
+              onPointerUp: handleGripPointerUp,
+              onKeyDown: handleGripKeyDown,
+              children: /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M8.5 3.5 3.5 8.5M11 6 6 11", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) })
+            }
+          ) : null
+        ] }),
+        showError ? /* @__PURE__ */ jsx(Text, { variant: "label-small", id: errorId, className: "dsx-text-area-field__error", children: errorText }) : null,
+        showHelper ? /* @__PURE__ */ jsx(Text, { variant: "label-small", tone: "muted", id: helperId, className: "dsx-text-area-field__helper", children: helperText }) : null
+      ]
+    }
+  ) });
+});
+TextAreaFieldRoot.displayName = "TextAreaField";
+const TextAreaFieldTextarea = React.forwardRef(
+  ({ className, ...props }, forwardedRef) => {
+    const { id, invalid, maxLength, fieldValue, describedBy, handleChange } = useTextAreaFieldContext();
+    return /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        ...props,
+        id,
+        maxLength,
+        value: fieldValue,
+        onChange: handleChange,
+        ref: forwardedRef,
+        className: classNames("dsx-text-area-field__textarea", className),
+        "aria-invalid": invalid || void 0,
+        "aria-describedby": describedBy
+      }
+    );
+  }
+);
+TextAreaFieldTextarea.displayName = "TextAreaFieldTextarea";
+const TextAreaField = Object.assign(TextAreaFieldRoot, {
+  Textarea: TextAreaFieldTextarea
+});
+export {
+  TextAreaField,
+  TextAreaFieldRoot,
+  TextAreaFieldTextarea
+};
+//# sourceMappingURL=TextAreaField.js.map

package/dist/components/textAreaField/TextAreaField.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/textAreaField/TextAreaField.tsx"],
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport classNames from 'classnames'\nimport { Slot } from '@radix-ui/react-slot'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { textAreaFieldPropDefs } from './textAreaField.props'\nimport { Label } from '../label/Label'\nimport { Text } from '../text/Text'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype TextAreaFieldContextValue = {\n  id?: string\n  invalid?: boolean\n  maxLength?: number\n  fieldValue?: string\n  describedBy?: string\n}\n\nconst TextAreaFieldContext = React.createContext<TextAreaFieldContextValue>({})\n\nfunction useTextAreaFieldContext() {\n  return React.useContext(TextAreaFieldContext)\n}\n\ntype TextAreaFieldRootOwnProps = GetPropDefTypes<typeof textAreaFieldPropDefs> & {\n  id?: string\n  label?: string\n  helperText?: string\n  errorText?: string\n  value?: string\n  defaultValue?: string\n  onChange?: React.ChangeEventHandler<HTMLTextAreaElement>\n}\n\ninterface TextAreaFieldRootProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'onChange' | 'value'>, TextAreaFieldRootOwnProps {}\n\ntype TextAreaFieldRootElement = React.ComponentRef<'div'>\n\nconst TextAreaFieldRoot = React.forwardRef<TextAreaFieldRootElement, TextAreaFieldRootProps>((props, forwardedRef) => {\n  const {\n    asChild,\n    children,\n    className,\n    color,\n    defaultValue,\n    errorText,\n    helperText,\n    id,\n    invalid = false,\n    label,\n    maxLength,\n    onChange,\n    radius,\n    resize = 'vertical',\n    showCount = true,\n    size = 'md',\n    value,\n    variant = 'surface',\n    ...textAreaFieldProps\n  } = extractProps(props, textAreaFieldPropDefs)\n\n  const Comp = asChild ? Slot : 'div'\n\n  // Counter length: controlled value wins, otherwise internal state seeded from\n  // defaultValue. Past-max values are shown as-is (exceed-red, never truncated).\n  const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue ?? '')\n  const isControlled = value !== undefined\n  const currentValue = isControlled ? (value ?? '') : uncontrolledValue\n  const currentLength = currentValue.length\n\n  const handleChange = React.useCallback(\n    (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n      if (!isControlled) setUncontrolledValue(e.target.value)\n      onChange?.(e)\n    },\n    [isControlled, onChange],\n  )\n\n  const showHelper = helperText && !invalid\n  const showError = errorText && invalid\n  const helperId = id ? `${id}-helper` : undefined\n  const errorId = id ? `${id}-error` : undefined\n  const describedBy = [showHelper ? helperId : undefined, showError ? errorId : undefined]\n    .filter(Boolean)\n    .join(' ') || undefined\n\n  const exceeds = maxLength !== undefined && currentLength > maxLength\n\n  // Custom grip drag: the shell is the resizable surface (native resize is\n  // off everywhere, so the grip works identically in every engine, at every\n  // zoom). Pointer capture is guarded for non-pointer environments (tests).\n  const shellRef = React.useRef<HTMLDivElement>(null)\n  const dragState = React.useRef<{ startX: number; startY: number; startW: number; startH: number } | null>(null)\n\n  const handleGripPointerDown = React.useCallback(\n    (e: React.PointerEvent<HTMLDivElement>) => {\n      if (resize === 'none') return\n      const shell = shellRef.current\n      if (!shell) return\n      e.preventDefault()\n      dragState.current = {\n        startX: e.clientX,\n        startY: e.clientY,\n        startW: shell.offsetWidth,\n        startH: shell.offsetHeight,\n      }\n      try {\n        e.currentTarget.setPointerCapture(e.pointerId)\n      } catch {\n        // jsdom and other non-pointer environments: movement still applies.\n      }\n    },\n    [resize],\n  )\n\n  const handleGripPointerMove = React.useCallback(\n    (e: React.PointerEvent<HTMLDivElement>) => {\n      const drag = dragState.current\n      const shell = shellRef.current\n      if (!drag || !shell) return\n      if (resize === 'horizontal' || resize === 'both') {\n        shell.style.width = `${Math.max(120, drag.startW + e.clientX - drag.startX)}px`\n      }\n      if (resize === 'vertical' || resize === 'both') {\n        shell.style.height = `${Math.max(40, drag.startH + e.clientY - drag.startY)}px`\n      }\n    },\n    [resize],\n  )\n\n  const handleGripPointerUp = React.useCallback(() => {\n    dragState.current = null\n  }, [])\n\n  const showGrip = resize !== 'none'\n\n  // Keyboard resizing: arrows grow/shrink 8px (Shift: 32px), mirroring the\n  // drag clamps. The grip is focusable with an accessible name.\n  const handleGripKeyDown = React.useCallback(\n    (e: React.KeyboardEvent<HTMLDivElement>) => {\n      const shell = shellRef.current\n      if (!shell) return\n      const step = e.shiftKey ? 32 : 8\n      let handled = true\n      if ((resize === 'vertical' || resize === 'both') && (e.key === 'ArrowUp' || e.key === 'ArrowDown')) {\n        const delta = e.key === 'ArrowDown' ? step : -step\n        shell.style.height = `${Math.max(40, shell.offsetHeight + delta)}px`\n      } else if ((resize === 'horizontal' || resize === 'both') && (e.key === 'ArrowLeft' || e.key === 'ArrowRight')) {\n        const delta = e.key === 'ArrowRight' ? step : -step\n        shell.style.width = `${Math.max(120, shell.offsetWidth + delta)}px`\n      } else {\n        handled = false\n      }\n      if (handled) e.preventDefault()\n    },\n    [resize],\n  )\n\n  const contextValue = React.useMemo(\n    () => ({ id, invalid, maxLength, fieldValue: currentValue, describedBy, handleChange }),\n    [id, invalid, maxLength, currentValue, describedBy, handleChange],\n  )\n\n  return (\n    <TextAreaFieldContext.Provider value={contextValue}>\n      <Comp\n        {...textAreaFieldProps}\n        ref={forwardedRef}\n        className={classNames(\n          'dsx-text-area-field',\n          `dsx-text-area-field--${size}`,\n          `dsx-text-area-field--${variant}`,\n          `dsx-text-area-field--resize-${resize}`,\n          invalid && 'dsx-text-area-field--invalid',\n          className,\n        )}\n        data-accent-color={color}\n        data-radius={radius}\n        data-size={size}\n        data-variant={variant}\n      >\n        {label ? (\n          <Label htmlFor={id} className=\"dsx-text-area-field__label\">\n            {label}\n          </Label>\n        ) : null}\n        <div ref={shellRef} className=\"dsx-text-area-field__shell\">\n          {children}\n          {showCount ? (\n            <div className=\"dsx-text-area-field__footer\">\n              <Text\n                variant=\"label-small\"\n                tone={exceeds ? undefined : 'muted'}\n                className={classNames(\n                  'dsx-text-area-field__counter',\n                  exceeds && 'dsx-text-area-field__counter--exceed',\n                )}\n                aria-live=\"polite\"\n              >\n                {maxLength !== undefined ? `${currentLength} / ${maxLength}` : `${currentLength}`}\n              </Text>\n            </div>\n          ) : null}\n          {showGrip ? (\n            <div\n              className=\"dsx-text-area-field__grip\"\n              role=\"separator\"\n              aria-label=\"Resize text area. Use arrow keys to resize.\"\n              aria-orientation={resize === 'horizontal' ? 'horizontal' : 'vertical'}\n              tabIndex={0}\n              onPointerDown={handleGripPointerDown}\n              onPointerMove={handleGripPointerMove}\n              onPointerUp={handleGripPointerUp}\n              onKeyDown={handleGripKeyDown}\n            >\n              <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" aria-hidden=\"true\">\n                <path d=\"M8.5 3.5 3.5 8.5M11 6 6 11\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\n              </svg>\n            </div>\n          ) : null}\n        </div>\n        {showError ? (\n          <Text variant=\"label-small\" id={errorId} className=\"dsx-text-area-field__error\">\n            {errorText}\n          </Text>\n        ) : null}\n        {showHelper ? (\n          <Text variant=\"label-small\" tone=\"muted\" id={helperId} className=\"dsx-text-area-field__helper\">\n            {helperText}\n          </Text>\n        ) : null}\n      </Comp>\n    </TextAreaFieldContext.Provider>\n  )\n})\nTextAreaFieldRoot.displayName = 'TextAreaField'\n\ntype TextAreaFieldTextareaElement = React.ComponentRef<'textarea'>\n\ninterface TextAreaFieldTextareaProps extends Omit<React.ComponentPropsWithoutRef<'textarea'>, 'value' | 'defaultValue' | 'onChange' | 'maxLength'> {}\n\nconst TextAreaFieldTextarea = React.forwardRef<TextAreaFieldTextareaElement, TextAreaFieldTextareaProps>(\n  ({ className, ...props }, forwardedRef) => {\n    const { id, invalid, maxLength, fieldValue, describedBy, handleChange } = useTextAreaFieldContext() as TextAreaFieldContextValue & {\n      handleChange?: React.ChangeEventHandler<HTMLTextAreaElement>\n    }\n\n    return (\n      <textarea\n        {...props}\n        id={id}\n        maxLength={maxLength}\n        value={fieldValue}\n        onChange={handleChange}\n        ref={forwardedRef}\n        className={classNames('dsx-text-area-field__textarea', className)}\n        aria-invalid={invalid || undefined}\n        aria-describedby={describedBy}\n      />\n    )\n  },\n)\nTextAreaFieldTextarea.displayName = 'TextAreaFieldTextarea'\n\nconst TextAreaField: typeof TextAreaFieldRoot & {\n  Textarea: typeof TextAreaFieldTextarea\n} = Object.assign(TextAreaFieldRoot, {\n  Textarea: TextAreaFieldTextarea,\n})\n\nexport { TextAreaField, TextAreaFieldRoot, TextAreaFieldTextarea }\nexport type { TextAreaFieldRootProps, TextAreaFieldTextareaProps }\n"],
+  "mappings": "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",
+  "names": []
+}