@d4gger/design-system 2.7.0 → 3.0.0

package/dist/components/tagsInput/tagsInput.props.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tagsInput.props.d.ts","sourceRoot":"","sources":["../../../src/components/tagsInput/tagsInput.props.ts"],"names":[],"mappings":"AAQA,QAAA,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;CAsBtB,CAAA;AAED,OAAO,EAAE,iBAAiB,EAAE,CAAA"}
+{"version":3,"file":"tagsInput.props.d.ts","sourceRoot":"","sources":["../../../src/components/tagsInput/tagsInput.props.ts"],"names":[],"mappings":"AAQA,QAAA,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+CtB,CAAA;AAED,OAAO,EAAE,iBAAiB,EAAE,CAAA"}

package/dist/components/tagsInput/tagsInput.props.js

@@ -18,6 +18,26 @@ const tagsInputPropDefs = {
     type: "enum",
     values: tagsInputRadiusValues,
     default: void 0
+  },
+  delimiter: {
+    type: "string",
+    default: ","
+  },
+  addOnPaste: {
+    type: "boolean",
+    default: false
+  },
+  addOnBlur: {
+    type: "boolean",
+    default: false
+  },
+  disabled: {
+    type: "boolean",
+    default: false
+  },
+  invalid: {
+    type: "boolean",
+    default: false
   }
 };
 export {

package/dist/components/tagsInput/tagsInput.props.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/tagsInput/tagsInput.props.ts"],
-  "sourcesContent": ["import { asChildPropDef } from '../../_internal/props/asChild.prop'\n\nimport type { PropDef } from '../../_internal/props/propDef'\n\nconst tagsInputVariants = ['surface', 'classic', 'ghost'] as const\nconst tagsInputSizes = ['sm', 'md', 'lg'] as const\nconst tagsInputRadiusValues = ['none', 'sm', 'md', 'lg', 'full'] as const\n\nconst tagsInputPropDefs = {\n  ...asChildPropDef,\n  variant: {\n    type: 'enum',\n    values: tagsInputVariants,\n    default: 'surface',\n  },\n  size: {\n    type: 'enum',\n    values: tagsInputSizes,\n    default: 'md',\n  },\n  radius: {\n    type: 'enum',\n    values: tagsInputRadiusValues,\n    default: undefined,\n  },\n} satisfies {\n  asChild: PropDef\n  variant: PropDef<(typeof tagsInputVariants)[number]>\n  size: PropDef<(typeof tagsInputSizes)[number]>\n  radius: PropDef<(typeof tagsInputRadiusValues)[number]>\n}\n\nexport { tagsInputPropDefs }\n"],
-  "mappings": "AAAA,SAAS,sBAAsB;AAI/B,MAAM,oBAAoB,CAAC,WAAW,WAAW,OAAO;AACxD,MAAM,iBAAiB,CAAC,MAAM,MAAM,IAAI;AACxC,MAAM,wBAAwB,CAAC,QAAQ,MAAM,MAAM,MAAM,MAAM;AAE/D,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,SAAS;AAAA,IACP,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AACF;",
+  "sourcesContent": ["import { asChildPropDef } from '../../_internal/props/asChild.prop'\n\nimport type { PropDef } from '../../_internal/props/propDef'\n\nconst tagsInputVariants = ['surface', 'classic', 'ghost'] as const\nconst tagsInputSizes = ['sm', 'md', 'lg'] as const\nconst tagsInputRadiusValues = ['none', 'sm', 'md', 'lg', 'full'] as const\n\nconst tagsInputPropDefs = {\n  ...asChildPropDef,\n  variant: {\n    type: 'enum',\n    values: tagsInputVariants,\n    default: 'surface',\n  },\n  size: {\n    type: 'enum',\n    values: tagsInputSizes,\n    default: 'md',\n  },\n  radius: {\n    type: 'enum',\n    values: tagsInputRadiusValues,\n    default: undefined,\n  },\n  delimiter: {\n    type: 'string',\n    default: ',',\n  },\n  addOnPaste: {\n    type: 'boolean',\n    default: false,\n  },\n  addOnBlur: {\n    type: 'boolean',\n    default: false,\n  },\n  disabled: {\n    type: 'boolean',\n    default: false,\n  },\n  invalid: {\n    type: 'boolean',\n    default: false,\n  },\n} satisfies {\n  asChild: PropDef\n  variant: PropDef<(typeof tagsInputVariants)[number]>\n  size: PropDef<(typeof tagsInputSizes)[number]>\n  radius: PropDef<(typeof tagsInputRadiusValues)[number]>\n  delimiter: PropDef\n  addOnPaste: PropDef\n  addOnBlur: PropDef\n  disabled: PropDef\n  invalid: PropDef\n}\n\nexport { tagsInputPropDefs }\n"],
+  "mappings": "AAAA,SAAS,sBAAsB;AAI/B,MAAM,oBAAoB,CAAC,WAAW,WAAW,OAAO;AACxD,MAAM,iBAAiB,CAAC,MAAM,MAAM,IAAI;AACxC,MAAM,wBAAwB,CAAC,QAAQ,MAAM,MAAM,MAAM,MAAM;AAE/D,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,SAAS;AAAA,IACP,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,WAAW;AAAA,IACT,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AAAA,EACA,YAAY;AAAA,IACV,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AAAA,EACA,WAAW;AAAA,IACT,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AAAA,EACA,UAAU;AAAA,IACR,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AAAA,EACA,SAAS;AAAA,IACP,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AACF;",
   "names": []
 }

package/dist/components/text-area-field.css

@@ -0,0 +1,177 @@
+
+@import '../../_internal/baseInput.css';
+
+.dsx-text-area-field {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: var(--dsx-space-xs);
+  width: 100%;
+}
+
+.dsx-text-area-field__label {
+  display: block;
+}
+
+.dsx-text-area-field__shell {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  /* Native resize is off: the grip element below is the only affordance, so
+     behavior is identical in every engine and at every zoom. */
+  resize: none;
+  border-radius: var(--dsx-rounded-md);
+  border: var(--dsx-border-width-sm) solid var(--dsx-color-outline);
+  background: var(--dsx-color-surface);
+  transition:
+    border-color var(--dsx-motion-duration-fast, 150ms) var(--dsx-motion-easing-standard, ease),
+    box-shadow var(--dsx-motion-duration-fast, 150ms) var(--dsx-motion-easing-standard, ease);
+}
+
+.dsx-text-area-field__shell:focus-within {
+  border-color: var(--dsx-color-primary);
+  box-shadow: var(--dsx-shadow-focus-ring);
+}
+
+.dsx-text-area-field--invalid .dsx-text-area-field__shell {
+  border-color: var(--dsx-color-error);
+}
+
+/* Grip: a real element, not a native-box background. Vector artwork scales
+   with zoom, ink comes from tokens (both themes, no data-URI literals), and
+   the hit area is a full 16px square. Hidden for resize="none" (unrendered)
+   and on disabled shells. */
+.dsx-text-area-field__grip {
+  position: absolute;
+  right: 2px;
+  bottom: 2px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--dsx-space-md);
+  height: var(--dsx-space-md);
+  color: var(--dsx-color-on-surface-variant);
+  cursor: nwse-resize;
+  touch-action: none;
+}
+
+.dsx-text-area-field__grip:hover {
+  color: var(--dsx-color-on-surface);
+}
+
+.dsx-text-area-field__grip:focus-visible {
+  outline: none;
+  box-shadow: var(--dsx-shadow-focus-ring);
+  border-radius: var(--dsx-rounded-sm);
+}
+
+.dsx-text-area-field--resize-vertical .dsx-text-area-field__grip {
+  cursor: ns-resize;
+}
+
+.dsx-text-area-field--resize-horizontal .dsx-text-area-field__grip {
+  cursor: ew-resize;
+}
+
+.dsx-text-area-field__shell:where(:has(.dsx-text-area-field__textarea:disabled)) .dsx-text-area-field__grip {
+  display: none;
+}
+
+.dsx-text-area-field__textarea {
+  flex: 1;
+  width: 100%;
+  box-sizing: border-box;
+  border: 0;
+  background: transparent;
+  color: var(--dsx-color-on-surface);
+  font-family: var(--dsx-typography-body-medium-font-family), sans-serif;
+  font-size: var(--dsx-typography-body-medium-font-size);
+  font-weight: var(--dsx-typography-body-medium-font-weight);
+  line-height: var(--dsx-typography-body-medium-line-height);
+  outline: none;
+  /* The shell owns resizing; the control never shows its own grip. */
+  resize: none;
+}
+
+.dsx-text-area-field__textarea::placeholder {
+  color: var(--dsx-color-on-surface-variant);
+}
+
+.dsx-text-area-field__textarea:disabled {
+  cursor: var(--dsx-cursor-disabled, not-allowed);
+  opacity: 1;
+  color: var(--dsx-color-disabled-text);
+}
+
+.dsx-text-area-field__shell:where(:has(.dsx-text-area-field__textarea:disabled)) {
+  opacity: 1;
+  cursor: var(--dsx-cursor-disabled, not-allowed);
+  background: var(--dsx-color-disabled-surface);
+  color: var(--dsx-color-disabled-text);
+  border-color: var(--dsx-color-disabled-border);
+}
+
+.dsx-text-area-field__footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  /* Inline spacing comes from the shell; only bottom breathing room here. */
+  padding-block: var(--dsx-space-xs) var(--dsx-space-xs);
+}
+
+.dsx-text-area-field__counter {
+  color: var(--dsx-color-on-surface-variant);
+}
+
+.dsx-text-area-field__counter--exceed {
+  color: var(--dsx-color-error);
+}
+
+.dsx-text-area-field__error {
+  color: var(--dsx-color-error);
+}
+
+.dsx-text-area-field__helper {
+  color: var(--dsx-color-on-surface-variant);
+}
+
+.dsx-text-area-field--sm .dsx-text-area-field__shell {
+  min-height: calc(var(--dsx-density-textarea-min-height, var(--dsx-textarea-min-height-base)) * 0.75);
+  padding-inline: var(--dsx-density-control-padding-inline-sm, var(--dsx-space-sm));
+  padding-block: var(--dsx-density-control-padding-block-sm, var(--dsx-space-xs)) 0;
+}
+
+.dsx-text-area-field--sm .dsx-text-area-field__textarea {
+  font-size: var(--dsx-typography-body-small-font-size);
+}
+
+.dsx-text-area-field--md .dsx-text-area-field__shell {
+  min-height: var(--dsx-density-textarea-min-height, var(--dsx-textarea-min-height-base));
+  padding-inline: var(--dsx-density-control-padding-inline, var(--dsx-space-md));
+  padding-block: var(--dsx-density-control-padding-block, var(--dsx-space-sm)) 0;
+}
+
+.dsx-text-area-field--lg .dsx-text-area-field__shell {
+  min-height: calc(var(--dsx-density-textarea-min-height, var(--dsx-textarea-min-height-base)) * 1.25);
+  padding-inline: var(--dsx-density-control-padding-inline-lg, var(--dsx-space-lg));
+  padding-block: var(--dsx-density-control-padding-block-lg, var(--dsx-space-md)) 0;
+}
+
+.dsx-text-area-field--lg .dsx-text-area-field__textarea {
+  font-size: var(--dsx-typography-body-large-font-size);
+}
+
+.dsx-text-area-field--classic .dsx-text-area-field__shell {
+  background: var(--dsx-color-surface-raised);
+  box-shadow: var(--dsx-shadow-elevation-2);
+}
+
+.dsx-text-area-field--soft .dsx-text-area-field__shell {
+  background: var(--dsx-color-accent-surface);
+  border-color: transparent;
+}
+
+:where(.dsx-text-area-field--soft) .dsx-text-area-field__shell:focus-within {
+  border-color: var(--dsx-color-primary);
+}

package/dist/components/text-field.css

@@ -33,6 +33,11 @@
   border-color: var(--dsx-color-error);
 }
 
+.dsx-text-field--invalid .dsx-text-field__shell:focus-within {
+  border-color: var(--dsx-color-error);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--dsx-color-error) 30%, transparent);
+}
+
 .dsx-text-field__input {
   flex: 1;
   border: 0;
@@ -72,6 +77,38 @@
   color: var(--dsx-color-on-surface-variant);
 }
 
+.dsx-text-field__slot[data-side='left'] {
+  padding-inline: 0 var(--dsx-space-sm);
+}
+
+.dsx-text-field__slot[data-side='right'] {
+  padding-inline: var(--dsx-space-sm) 0;
+}
+
+.dsx-text-field:where([data-radius='none']) .dsx-text-field__shell {
+  border-radius: 0;
+}
+
+.dsx-text-field:where([data-radius='sm']) .dsx-text-field__shell {
+  border-radius: var(--dsx-rounded-sm);
+}
+
+.dsx-text-field:where([data-radius='md']) .dsx-text-field__shell {
+  border-radius: var(--dsx-rounded-md);
+}
+
+.dsx-text-field:where([data-radius='lg']) .dsx-text-field__shell {
+  border-radius: var(--dsx-rounded-lg);
+}
+
+.dsx-text-field:where([data-radius='full']) .dsx-text-field__shell {
+  border-radius: var(--dsx-rounded-full);
+}
+
+.dsx-text-field:where([data-accent-color]) .dsx-text-field__shell:focus-within {
+  border-color: var(--dsx-color-accent-indicator);
+}
+
 .dsx-text-field__error {
   color: var(--dsx-color-error);
 }
@@ -111,8 +148,8 @@
 }
 
 .dsx-text-field--classic .dsx-text-field__shell {
-  background: var(--dsx-color-surface);
-  box-shadow: var(--dsx-effect-shadow-1);
+  background: var(--dsx-color-surface-raised);
+  box-shadow: var(--dsx-shadow-elevation-2);
 }
 
 .dsx-text-field--soft .dsx-text-field__shell {

package/dist/components/text.css

@@ -17,6 +17,7 @@
   font-weight: var(--dsx-typography-body-medium-font-weight);
   line-height: var(--dsx-typography-body-medium-line-height);
   letter-spacing: var(--dsx-typography-body-medium-letter-spacing);
+  font-variation-settings: var(--dsx-typography-body-medium-font-variation-settings);
   text-transform: var(--dsx-typography-body-medium-text-transform);
   text-decoration: var(--dsx-typography-body-medium-text-decoration);
   color: var(--dsx-color-on-surface);
@@ -28,6 +29,7 @@
   font-weight: var(--dsx-typography-body-large-font-weight);
   line-height: var(--dsx-typography-body-large-line-height);
   letter-spacing: var(--dsx-typography-body-large-letter-spacing);
+  font-variation-settings: var(--dsx-typography-body-large-font-variation-settings);
   text-transform: var(--dsx-typography-body-large-text-transform);
   text-decoration: var(--dsx-typography-body-large-text-decoration);
 }
@@ -38,6 +40,7 @@
   font-weight: var(--dsx-typography-body-medium-font-weight);
   line-height: var(--dsx-typography-body-medium-line-height);
   letter-spacing: var(--dsx-typography-body-medium-letter-spacing);
+  font-variation-settings: var(--dsx-typography-body-medium-font-variation-settings);
   text-transform: var(--dsx-typography-body-medium-text-transform);
   text-decoration: var(--dsx-typography-body-medium-text-decoration);
 }
@@ -48,6 +51,7 @@
   font-weight: var(--dsx-typography-body-small-font-weight);
   line-height: var(--dsx-typography-body-small-line-height);
   letter-spacing: var(--dsx-typography-body-small-letter-spacing);
+  font-variation-settings: var(--dsx-typography-body-small-font-variation-settings);
   text-transform: var(--dsx-typography-body-small-text-transform);
   text-decoration: var(--dsx-typography-body-small-text-decoration);
 }
@@ -58,6 +62,7 @@
   font-weight: var(--dsx-typography-label-large-font-weight);
   line-height: var(--dsx-typography-label-large-line-height);
   letter-spacing: var(--dsx-typography-label-large-letter-spacing);
+  font-variation-settings: var(--dsx-typography-label-large-font-variation-settings);
   text-transform: var(--dsx-typography-label-large-text-transform);
   text-decoration: var(--dsx-typography-label-large-text-decoration);
 }
@@ -68,6 +73,7 @@
   font-weight: var(--dsx-typography-label-medium-font-weight);
   line-height: var(--dsx-typography-label-medium-line-height);
   letter-spacing: var(--dsx-typography-label-medium-letter-spacing);
+  font-variation-settings: var(--dsx-typography-label-medium-font-variation-settings);
   text-transform: var(--dsx-typography-label-medium-text-transform);
   text-decoration: var(--dsx-typography-label-medium-text-decoration);
 }
@@ -78,6 +84,7 @@
   font-weight: var(--dsx-typography-label-small-font-weight);
   line-height: var(--dsx-typography-label-small-line-height);
   letter-spacing: var(--dsx-typography-label-small-letter-spacing);
+  font-variation-settings: var(--dsx-typography-label-small-font-variation-settings);
   text-transform: var(--dsx-typography-label-small-text-transform);
   text-decoration: var(--dsx-typography-label-small-text-decoration);
 }
@@ -127,6 +134,8 @@
   color: var(--dsx-color-on-inverse-background);
 }
 
+/* Foundations-only: consumed by FoundationText (`truncate` → `dsx-text--truncate`).
+   App-level Text/Heading write `dsx-truncate` (responsive/truncate.css) instead. */
 .dsx-text--truncate {
   overflow: hidden;
   text-overflow: ellipsis;

package/dist/components/textArea/textArea.props.cjs

@@ -25,7 +25,7 @@ var import_asChild = require("../../_internal/props/asChild.prop");
 const textareaVariants = ["classic", "surface", "soft"];
 const textareaSizes = ["sm", "md", "lg"];
 const textareaResizeValues = ["none", "vertical", "horizontal", "both"];
-const textareaRadiusValues = ["none", "sm", "md", "lg", "full"];
+const textareaRadiusValues = ["none", "sm", "md", "lg"];
 const textareaPropDefs = {
   ...import_asChild.asChildPropDef,
   invalid: {

package/dist/components/textArea/textArea.props.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/textArea/textArea.props.ts"],
-  "sourcesContent": ["import { asChildPropDef } from '../../_internal/props/asChild.prop'\n\nimport type { PropDef } from '../../_internal/props/propDef'\n\nconst textareaVariants = ['classic', 'surface', 'soft'] as const\nconst textareaSizes = ['sm', 'md', 'lg'] as const\nconst textareaResizeValues = ['none', 'vertical', 'horizontal', 'both'] as const\nconst textareaRadiusValues = ['none', 'sm', 'md', 'lg', 'full'] as const\n\nconst textareaPropDefs = {\n  ...asChildPropDef,\n  invalid: {\n    type: 'boolean',\n    default: false,\n  },\n  resize: {\n    type: 'enum',\n    values: textareaResizeValues,\n    default: 'vertical',\n  },\n  variant: {\n    type: 'enum',\n    values: textareaVariants,\n    default: 'surface',\n  },\n  size: {\n    type: 'enum',\n    values: textareaSizes,\n    default: 'md',\n  },\n  color: {\n    type: 'enum | string',\n    values: [] as const,\n    default: undefined,\n  },\n  radius: {\n    type: 'enum',\n    values: textareaRadiusValues,\n    default: undefined,\n  },\n} satisfies {\n  asChild: PropDef\n  invalid: PropDef\n  resize: PropDef<(typeof textareaResizeValues)[number]>\n  variant: PropDef<(typeof textareaVariants)[number]>\n  size: PropDef<(typeof textareaSizes)[number]>\n  color: PropDef<string>\n  radius: PropDef<(typeof textareaRadiusValues)[number]>\n}\n\nexport { textareaPropDefs }\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAA+B;AAI/B,MAAM,mBAAmB,CAAC,WAAW,WAAW,MAAM;AACtD,MAAM,gBAAgB,CAAC,MAAM,MAAM,IAAI;AACvC,MAAM,uBAAuB,CAAC,QAAQ,YAAY,cAAc,MAAM;AACtE,MAAM,uBAAuB,CAAC,QAAQ,MAAM,MAAM,MAAM,MAAM;AAE9D,MAAM,mBAAmB;AAAA,EACvB,GAAG;AAAA,EACH,SAAS;AAAA,IACP,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AAAA,EACA,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,SAAS;AAAA,IACP,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,OAAO;AAAA,IACL,MAAM;AAAA,IACN,QAAQ,CAAC;AAAA,IACT,SAAS;AAAA,EACX;AAAA,EACA,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AACF;",
+  "sourcesContent": ["import { asChildPropDef } from '../../_internal/props/asChild.prop'\n\nimport type { PropDef } from '../../_internal/props/propDef'\n\nconst textareaVariants = ['classic', 'surface', 'soft'] as const\nconst textareaSizes = ['sm', 'md', 'lg'] as const\nconst textareaResizeValues = ['none', 'vertical', 'horizontal', 'both'] as const\nconst textareaRadiusValues = ['none', 'sm', 'md', 'lg'] as const\n\nconst textareaPropDefs = {\n  ...asChildPropDef,\n  invalid: {\n    type: 'boolean',\n    default: false,\n  },\n  resize: {\n    type: 'enum',\n    values: textareaResizeValues,\n    default: 'vertical',\n  },\n  variant: {\n    type: 'enum',\n    values: textareaVariants,\n    default: 'surface',\n  },\n  size: {\n    type: 'enum',\n    values: textareaSizes,\n    default: 'md',\n  },\n  color: {\n    type: 'enum | string',\n    values: [] as const,\n    default: undefined,\n  },\n  radius: {\n    type: 'enum',\n    values: textareaRadiusValues,\n    default: undefined,\n  },\n} satisfies {\n  asChild: PropDef\n  invalid: PropDef\n  resize: PropDef<(typeof textareaResizeValues)[number]>\n  variant: PropDef<(typeof textareaVariants)[number]>\n  size: PropDef<(typeof textareaSizes)[number]>\n  color: PropDef<string>\n  radius: PropDef<(typeof textareaRadiusValues)[number]>\n}\n\nexport { textareaPropDefs }\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAA+B;AAI/B,MAAM,mBAAmB,CAAC,WAAW,WAAW,MAAM;AACtD,MAAM,gBAAgB,CAAC,MAAM,MAAM,IAAI;AACvC,MAAM,uBAAuB,CAAC,QAAQ,YAAY,cAAc,MAAM;AACtE,MAAM,uBAAuB,CAAC,QAAQ,MAAM,MAAM,IAAI;AAEtD,MAAM,mBAAmB;AAAA,EACvB,GAAG;AAAA,EACH,SAAS;AAAA,IACP,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AAAA,EACA,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,SAAS;AAAA,IACP,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,OAAO;AAAA,IACL,MAAM;AAAA,IACN,QAAQ,CAAC;AAAA,IACT,SAAS;AAAA,EACX;AAAA,EACA,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AACF;",
   "names": []
 }

package/dist/components/textArea/textArea.props.d.cts

@@ -25,7 +25,7 @@ declare const textareaPropDefs: {
     };
     radius: {
         type: "enum";
-        values: readonly ["none", "sm", "md", "lg", "full"];
+        values: readonly ["none", "sm", "md", "lg"];
         default: undefined;
     };
     asChild: {

package/dist/components/textArea/textArea.props.d.mts

@@ -25,7 +25,7 @@ declare const textareaPropDefs: {
     };
     radius: {
         type: "enum";
-        values: readonly ["none", "sm", "md", "lg", "full"];
+        values: readonly ["none", "sm", "md", "lg"];
         default: undefined;
     };
     asChild: {

package/dist/components/textArea/textArea.props.d.ts

@@ -25,7 +25,7 @@ declare const textareaPropDefs: {
     };
     radius: {
         type: "enum";
-        values: readonly ["none", "sm", "md", "lg", "full"];
+        values: readonly ["none", "sm", "md", "lg"];
         default: undefined;
     };
     asChild: {

package/dist/components/textArea/textArea.props.js

@@ -2,7 +2,7 @@ import { asChildPropDef } from "../../_internal/props/asChild.prop.js";
 const textareaVariants = ["classic", "surface", "soft"];
 const textareaSizes = ["sm", "md", "lg"];
 const textareaResizeValues = ["none", "vertical", "horizontal", "both"];
-const textareaRadiusValues = ["none", "sm", "md", "lg", "full"];
+const textareaRadiusValues = ["none", "sm", "md", "lg"];
 const textareaPropDefs = {
   ...asChildPropDef,
   invalid: {

package/dist/components/textArea/textArea.props.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/textArea/textArea.props.ts"],
-  "sourcesContent": ["import { asChildPropDef } from '../../_internal/props/asChild.prop'\n\nimport type { PropDef } from '../../_internal/props/propDef'\n\nconst textareaVariants = ['classic', 'surface', 'soft'] as const\nconst textareaSizes = ['sm', 'md', 'lg'] as const\nconst textareaResizeValues = ['none', 'vertical', 'horizontal', 'both'] as const\nconst textareaRadiusValues = ['none', 'sm', 'md', 'lg', 'full'] as const\n\nconst textareaPropDefs = {\n  ...asChildPropDef,\n  invalid: {\n    type: 'boolean',\n    default: false,\n  },\n  resize: {\n    type: 'enum',\n    values: textareaResizeValues,\n    default: 'vertical',\n  },\n  variant: {\n    type: 'enum',\n    values: textareaVariants,\n    default: 'surface',\n  },\n  size: {\n    type: 'enum',\n    values: textareaSizes,\n    default: 'md',\n  },\n  color: {\n    type: 'enum | string',\n    values: [] as const,\n    default: undefined,\n  },\n  radius: {\n    type: 'enum',\n    values: textareaRadiusValues,\n    default: undefined,\n  },\n} satisfies {\n  asChild: PropDef\n  invalid: PropDef\n  resize: PropDef<(typeof textareaResizeValues)[number]>\n  variant: PropDef<(typeof textareaVariants)[number]>\n  size: PropDef<(typeof textareaSizes)[number]>\n  color: PropDef<string>\n  radius: PropDef<(typeof textareaRadiusValues)[number]>\n}\n\nexport { textareaPropDefs }\n"],
-  "mappings": "AAAA,SAAS,sBAAsB;AAI/B,MAAM,mBAAmB,CAAC,WAAW,WAAW,MAAM;AACtD,MAAM,gBAAgB,CAAC,MAAM,MAAM,IAAI;AACvC,MAAM,uBAAuB,CAAC,QAAQ,YAAY,cAAc,MAAM;AACtE,MAAM,uBAAuB,CAAC,QAAQ,MAAM,MAAM,MAAM,MAAM;AAE9D,MAAM,mBAAmB;AAAA,EACvB,GAAG;AAAA,EACH,SAAS;AAAA,IACP,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AAAA,EACA,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,SAAS;AAAA,IACP,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,OAAO;AAAA,IACL,MAAM;AAAA,IACN,QAAQ,CAAC;AAAA,IACT,SAAS;AAAA,EACX;AAAA,EACA,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AACF;",
+  "sourcesContent": ["import { asChildPropDef } from '../../_internal/props/asChild.prop'\n\nimport type { PropDef } from '../../_internal/props/propDef'\n\nconst textareaVariants = ['classic', 'surface', 'soft'] as const\nconst textareaSizes = ['sm', 'md', 'lg'] as const\nconst textareaResizeValues = ['none', 'vertical', 'horizontal', 'both'] as const\nconst textareaRadiusValues = ['none', 'sm', 'md', 'lg'] as const\n\nconst textareaPropDefs = {\n  ...asChildPropDef,\n  invalid: {\n    type: 'boolean',\n    default: false,\n  },\n  resize: {\n    type: 'enum',\n    values: textareaResizeValues,\n    default: 'vertical',\n  },\n  variant: {\n    type: 'enum',\n    values: textareaVariants,\n    default: 'surface',\n  },\n  size: {\n    type: 'enum',\n    values: textareaSizes,\n    default: 'md',\n  },\n  color: {\n    type: 'enum | string',\n    values: [] as const,\n    default: undefined,\n  },\n  radius: {\n    type: 'enum',\n    values: textareaRadiusValues,\n    default: undefined,\n  },\n} satisfies {\n  asChild: PropDef\n  invalid: PropDef\n  resize: PropDef<(typeof textareaResizeValues)[number]>\n  variant: PropDef<(typeof textareaVariants)[number]>\n  size: PropDef<(typeof textareaSizes)[number]>\n  color: PropDef<string>\n  radius: PropDef<(typeof textareaRadiusValues)[number]>\n}\n\nexport { textareaPropDefs }\n"],
+  "mappings": "AAAA,SAAS,sBAAsB;AAI/B,MAAM,mBAAmB,CAAC,WAAW,WAAW,MAAM;AACtD,MAAM,gBAAgB,CAAC,MAAM,MAAM,IAAI;AACvC,MAAM,uBAAuB,CAAC,QAAQ,YAAY,cAAc,MAAM;AACtE,MAAM,uBAAuB,CAAC,QAAQ,MAAM,MAAM,IAAI;AAEtD,MAAM,mBAAmB;AAAA,EACvB,GAAG;AAAA,EACH,SAAS;AAAA,IACP,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AAAA,EACA,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,SAAS;AAAA,IACP,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,OAAO;AAAA,IACL,MAAM;AAAA,IACN,QAAQ,CAAC;AAAA,IACT,SAAS;AAAA,EACX;AAAA,EACA,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AACF;",
   "names": []
 }

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