jvetrau-ds 0.2.8 → 0.2.9

package/components/select/select.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/select/select.tsx"],"names":["classnames","jsx"],"mappings":";;;;;AASA,MAAM,SAAgC,CAAC;AAAA,EACrC,KAAA,GAAQ,SAAA;AAAA,EACR,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA,GAAW,KAAA;AAAA,EACX,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAUA,qBAAA,CAAW,QAAA,EAAU,SAAA,EAAW;AAAA,IAC9C,OAAO,KAAA,KAAU,OAAA;AAAA,IACjB,SAAS,KAAA,KAAU;AAAA,GAClB,CAAA;AAEH,EAAA,uBACEC,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,OAAA,EACd,QAAA,kBAAAA,cAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAU,eAAA;AAAA,MACV,QAAA;AAAA,MACC,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH,EACF,CAAA;AAEJ,CAAA;AAEA,IAAO,cAAA,GAAQ","file":"select.cjs","sourcesContent":["import React from 'react';\n//import './select.css';\nimport { classnames } from '../helpers/classnames';\n\nexport interface SelectProps\n  extends React.SelectHTMLAttributes<HTMLSelectElement> {\n  state?: 'default' | 'error' | 'success';\n}\n\nconst Select: React.FC<SelectProps> = ({\n  state = 'default',\n  className = '',\n  disabled = false,\n  children,\n  ...props\n}) => {\n  const classes = classnames('select', className, {\n    error: state === 'error',\n    success: state === 'success',\n    });\n\n  return (\n    <div className={classes}>\n      <select\n        className=\"select__field\"\n        disabled={disabled}\n        {...props}\n      >\n        {children}\n      </select>\n    </div>\n  );\n};\n\nexport default Select;"]}
+{"version":3,"sources":["../../../src/components/select/select.tsx"],"names":["classnames","jsx"],"mappings":";;;;;AAcA,MAAM,SAAgC,CAAC;AAAA,EACrC,KAAA,GAAQ,SAAA;AAAA,EACR,KAAA,GAAQ,SAAA;AAAA,EACR,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA,GAAW,KAAA;AAAA,EACX,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAUA,qBAAA;AAAA,IACd,QAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,MACE,iBACE,KAAA,KAAU,OAAA;AAAA,MACZ,mBACE,KAAA,KAAU,SAAA;AAAA,MACZ,uBACE,KAAA,KAAU,OAAA;AAAA,MACZ,yBACE,KAAA,KAAU,SAAA;AAAA,MACZ,qBACE,KAAA,KAAU;AAAA;AACd,GACF;AAEA,EAAA,uBACEC,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,OAAA,EACd,QAAA,kBAAAA,cAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAU,eAAA;AAAA,MACV,QAAA;AAAA,MACC,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH,EACF,CAAA;AAEJ,CAAA;AAEA,IAAO,cAAA,GAAQ","file":"select.cjs","sourcesContent":["import React from 'react';\nimport { classnames } from '../helpers/classnames';\n\ntype SelectWidth =\n  | 'short'\n  | 'default'\n  | 'max';\n\nexport interface SelectProps\n  extends React.SelectHTMLAttributes<HTMLSelectElement> {\n  state?: 'default' | 'error' | 'success';\n  width?: SelectWidth;\n}\n\nconst Select: React.FC<SelectProps> = ({\n  state = 'default',\n  width = 'default',\n  className = '',\n  disabled = false,\n  children,\n  ...props\n}) => {\n  const classes = classnames(\n    'select',\n    className,\n    {\n      'select--error':\n        state === 'error',\n      'select--success':\n        state === 'success',\n      'select--width-short':\n        width === 'short',\n      'select--width-default':\n        width === 'default',\n      'select--width-max':\n        width === 'max',\n    },\n  );\n\n  return (\n    <div className={classes}>\n      <select\n        className=\"select__field\"\n        disabled={disabled}\n        {...props}\n      >\n        {children}\n      </select>\n    </div>\n  );\n};\n\nexport default Select;\n"]}

package/components/select/select.css

@@ -30,7 +30,7 @@
 
   position: relative;
   display: inline-block;
-  width: 100%;
+  box-sizing: border-box;
 
   /* border */
   --select-border-width: var(--size-border-width-base);
@@ -51,6 +51,21 @@
   --select-transition-duration: 0.2s;
 }
 
+.select--width-short {
+  /* size */
+  width: fit-content;
+}
+
+.select--width-default {
+  /* size */
+  width: 400px;
+}
+
+.select--width-max {
+  /* size */
+  width: 100%;
+}
+
 .select__field {
   /* color */
   background: var(--select-bg);
@@ -61,6 +76,7 @@
   letter-spacing: inherit;
 
   /* size */
+  box-sizing: border-box;
   width: 100%;
   height: var(--select-height);
   padding-left: var(--select-padding-x);

package/components/select/select.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
+type SelectWidth = 'short' | 'default' | 'max';
 export interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
     state?: 'default' | 'error' | 'success';
+    width?: SelectWidth;
 }
 declare const Select: React.FC<SelectProps>;
 export default Select;

package/components/select/select.js

@@ -3,15 +3,23 @@ import { classnames } from '../helpers/classnames';
 
 const Select = ({
   state = "default",
+  width = "default",
   className = "",
   disabled = false,
   children,
   ...props
 }) => {
-  const classes = classnames("select", className, {
-    error: state === "error",
-    success: state === "success"
-  });
+  const classes = classnames(
+    "select",
+    className,
+    {
+      "select--error": state === "error",
+      "select--success": state === "success",
+      "select--width-short": width === "short",
+      "select--width-default": width === "default",
+      "select--width-max": width === "max"
+    }
+  );
   return /* @__PURE__ */ jsx("div", { className: classes, children: /* @__PURE__ */ jsx(
     "select",
     {

package/components/select/select.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/select/select.tsx"],"names":[],"mappings":";;;AASA,MAAM,SAAgC,CAAC;AAAA,EACrC,KAAA,GAAQ,SAAA;AAAA,EACR,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA,GAAW,KAAA;AAAA,EACX,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAU,UAAA,CAAW,QAAA,EAAU,SAAA,EAAW;AAAA,IAC9C,OAAO,KAAA,KAAU,OAAA;AAAA,IACjB,SAAS,KAAA,KAAU;AAAA,GAClB,CAAA;AAEH,EAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,OAAA,EACd,QAAA,kBAAA,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAU,eAAA;AAAA,MACV,QAAA;AAAA,MACC,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH,EACF,CAAA;AAEJ,CAAA;AAEA,IAAO,cAAA,GAAQ","file":"select.js","sourcesContent":["import React from 'react';\n//import './select.css';\nimport { classnames } from '../helpers/classnames';\n\nexport interface SelectProps\n  extends React.SelectHTMLAttributes<HTMLSelectElement> {\n  state?: 'default' | 'error' | 'success';\n}\n\nconst Select: React.FC<SelectProps> = ({\n  state = 'default',\n  className = '',\n  disabled = false,\n  children,\n  ...props\n}) => {\n  const classes = classnames('select', className, {\n    error: state === 'error',\n    success: state === 'success',\n    });\n\n  return (\n    <div className={classes}>\n      <select\n        className=\"select__field\"\n        disabled={disabled}\n        {...props}\n      >\n        {children}\n      </select>\n    </div>\n  );\n};\n\nexport default Select;"]}
+{"version":3,"sources":["../../../src/components/select/select.tsx"],"names":[],"mappings":";;;AAcA,MAAM,SAAgC,CAAC;AAAA,EACrC,KAAA,GAAQ,SAAA;AAAA,EACR,KAAA,GAAQ,SAAA;AAAA,EACR,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA,GAAW,KAAA;AAAA,EACX,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAU,UAAA;AAAA,IACd,QAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,MACE,iBACE,KAAA,KAAU,OAAA;AAAA,MACZ,mBACE,KAAA,KAAU,SAAA;AAAA,MACZ,uBACE,KAAA,KAAU,OAAA;AAAA,MACZ,yBACE,KAAA,KAAU,SAAA;AAAA,MACZ,qBACE,KAAA,KAAU;AAAA;AACd,GACF;AAEA,EAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,OAAA,EACd,QAAA,kBAAA,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAU,eAAA;AAAA,MACV,QAAA;AAAA,MACC,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH,EACF,CAAA;AAEJ,CAAA;AAEA,IAAO,cAAA,GAAQ","file":"select.js","sourcesContent":["import React from 'react';\nimport { classnames } from '../helpers/classnames';\n\ntype SelectWidth =\n  | 'short'\n  | 'default'\n  | 'max';\n\nexport interface SelectProps\n  extends React.SelectHTMLAttributes<HTMLSelectElement> {\n  state?: 'default' | 'error' | 'success';\n  width?: SelectWidth;\n}\n\nconst Select: React.FC<SelectProps> = ({\n  state = 'default',\n  width = 'default',\n  className = '',\n  disabled = false,\n  children,\n  ...props\n}) => {\n  const classes = classnames(\n    'select',\n    className,\n    {\n      'select--error':\n        state === 'error',\n      'select--success':\n        state === 'success',\n      'select--width-short':\n        width === 'short',\n      'select--width-default':\n        width === 'default',\n      'select--width-max':\n        width === 'max',\n    },\n  );\n\n  return (\n    <div className={classes}>\n      <select\n        className=\"select__field\"\n        disabled={disabled}\n        {...props}\n      >\n        {children}\n      </select>\n    </div>\n  );\n};\n\nexport default Select;\n"]}

package/components/textarea/textarea.cjs

@@ -1,23 +1,87 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
 var classnames = require('../helpers/classnames');
 
+function parsePixelValue(value) {
+  const parsed = Number.parseFloat(value);
+  return Number.isFinite(parsed) ? parsed : 0;
+}
 const Textarea = ({
   state = "default",
+  width = "default",
+  autoGrow = false,
   className = "",
   disabled = false,
+  onInput,
   ...props
 }) => {
-  const classes = classnames.classnames("textarea", className, {
-    error: state === "error",
-    success: state === "success"
-  });
+  const textareaRef = react.useRef(null);
+  const resizeToContent = react.useCallback(() => {
+    const textarea = textareaRef.current;
+    if (!autoGrow || !textarea) {
+      return;
+    }
+    const computedStyle = window.getComputedStyle(textarea);
+    const lineHeight = parsePixelValue(
+      computedStyle.lineHeight
+    );
+    const borderHeight = parsePixelValue(
+      computedStyle.borderTopWidth
+    ) + parsePixelValue(
+      computedStyle.borderBottomWidth
+    );
+    const minHeight = parsePixelValue(
+      computedStyle.minHeight
+    );
+    const previousMinHeight = textarea.style.minHeight;
+    textarea.style.minHeight = "0px";
+    textarea.style.setProperty(
+      "--textarea-auto-height",
+      "0px"
+    );
+    const contentHeight = textarea.scrollHeight;
+    textarea.style.minHeight = previousMinHeight;
+    const nextHeight = Math.max(
+      contentHeight + lineHeight + borderHeight,
+      minHeight
+    );
+    textarea.style.setProperty(
+      "--textarea-auto-height",
+      `${nextHeight}px`
+    );
+  }, [autoGrow]);
+  react.useLayoutEffect(() => {
+    resizeToContent();
+  }, [
+    resizeToContent,
+    props.value,
+    width
+  ]);
+  const handleInput = (event) => {
+    resizeToContent();
+    onInput?.(event);
+  };
+  const classes = classnames.classnames(
+    "textarea",
+    className,
+    {
+      "textarea--error": state === "error",
+      "textarea--success": state === "success",
+      "textarea--width-short": width === "short",
+      "textarea--width-default": width === "default",
+      "textarea--width-max": width === "max",
+      "textarea--auto-grow": autoGrow
+    }
+  );
   return /* @__PURE__ */ jsxRuntime.jsx(
     "textarea",
     {
+      ref: textareaRef,
       className: classes,
       disabled,
+      onInput: handleInput,
       ...props
     }
   );

package/components/textarea/textarea.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/textarea/textarea.tsx"],"names":["classnames","jsx"],"mappings":";;;;;AASA,MAAM,WAAoC,CAAC;AAAA,EACzC,KAAA,GAAQ,SAAA;AAAA,EACR,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA,GAAW,KAAA;AAAA,EACX,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAUA,qBAAA,CAAW,UAAA,EAAY,SAAA,EAAW;AAAA,IAChD,OAAO,KAAA,KAAU,OAAA;AAAA,IACjB,SAAS,KAAA,KAAU;AAAA,GAClB,CAAA;AAEH,EAAA,uBACEC,cAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACX,QAAA;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ,CAAA;AAEA,IAAO,gBAAA,GAAQ","file":"textarea.cjs","sourcesContent":["import React from 'react';\n// import './textarea.css';\nimport { classnames } from '../helpers/classnames';\n\nexport interface TextareaProps\n  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {\n  state?: 'default' | 'error' | 'success';\n}\n\nconst Textarea: React.FC<TextareaProps> = ({\n  state = 'default',\n  className = '',\n  disabled = false,\n  ...props\n}) => {\n  const classes = classnames('textarea', className, {\n    error: state === 'error',\n    success: state === 'success',\n    });\n\n  return (\n    <textarea\n      className={classes}\n      disabled={disabled}\n      {...props}\n    />\n  );\n};\n\nexport default Textarea;"]}
+{"version":3,"sources":["../../../src/components/textarea/textarea.tsx"],"names":["useRef","useCallback","useLayoutEffect","classnames","jsx"],"mappings":";;;;;;AAmBA,SAAS,gBAAgB,KAAA,EAAe;AACtC,EAAA,MAAM,MAAA,GAAS,MAAA,CAAO,UAAA,CAAW,KAAK,CAAA;AAEtC,EAAA,OAAO,MAAA,CAAO,QAAA,CAAS,MAAM,CAAA,GACzB,MAAA,GACA,CAAA;AACN;AAEA,MAAM,WAAoC,CAAC;AAAA,EACzC,KAAA,GAAQ,SAAA;AAAA,EACR,KAAA,GAAQ,SAAA;AAAA,EACR,QAAA,GAAW,KAAA;AAAA,EACX,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA,GAAW,KAAA;AAAA,EACX,OAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,WAAA,GACJA,aAA4B,IAAI,CAAA;AAElC,EAAA,MAAM,eAAA,GACJC,kBAAY,MAAM;AAChB,IAAA,MAAM,WACJ,WAAA,CAAY,OAAA;AAEd,IAAA,IAAI,CAAC,QAAA,IAAY,CAAC,QAAA,EAAU;AAC1B,MAAA;AAAA,IACF;AAEA,IAAA,MAAM,aAAA,GACJ,MAAA,CAAO,gBAAA,CAAiB,QAAQ,CAAA;AAElC,IAAA,MAAM,UAAA,GACJ,eAAA;AAAA,MACE,aAAA,CAAc;AAAA,KAChB;AAEF,IAAA,MAAM,YAAA,GACJ,eAAA;AAAA,MACE,aAAA,CAAc;AAAA,KAChB,GACA,eAAA;AAAA,MACE,aAAA,CAAc;AAAA,KAChB;AAEF,IAAA,MAAM,SAAA,GACJ,eAAA;AAAA,MACE,aAAA,CAAc;AAAA,KAChB;AAEF,IAAA,MAAM,iBAAA,GACJ,SAAS,KAAA,CAAM,SAAA;AAEjB,IAAA,QAAA,CAAS,MAAM,SAAA,GACb,KAAA;AAEF,IAAA,QAAA,CAAS,KAAA,CAAM,WAAA;AAAA,MACb,wBAAA;AAAA,MACA;AAAA,KACF;AAEA,IAAA,MAAM,gBACJ,QAAA,CAAS,YAAA;AAEX,IAAA,QAAA,CAAS,MAAM,SAAA,GACb,iBAAA;AAEF,IAAA,MAAM,aAAa,IAAA,CAAK,GAAA;AAAA,MACtB,gBACE,UAAA,GACA,YAAA;AAAA,MACF;AAAA,KACF;AAEA,IAAA,QAAA,CAAS,KAAA,CAAM,WAAA;AAAA,MACb,wBAAA;AAAA,MACA,GAAG,UAAU,CAAA,EAAA;AAAA,KACf;AAAA,EACF,CAAA,EAAG,CAAC,QAAQ,CAAC,CAAA;AAEf,EAAAC,qBAAA,CAAgB,MAAM;AACpB,IAAA,eAAA,EAAgB;AAAA,EAClB,CAAA,EAAG;AAAA,IACD,eAAA;AAAA,IACA,KAAA,CAAM,KAAA;AAAA,IACN;AAAA,GACD,CAAA;AAED,EAAA,MAAM,WAAA,GAAc,CAClB,KAAA,KACG;AACH,IAAA,eAAA,EAAgB;AAChB,IAAA,OAAA,GAAU,KAAK,CAAA;AAAA,EACjB,CAAA;AAEA,EAAA,MAAM,OAAA,GAAUC,qBAAA;AAAA,IACd,UAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,MACE,mBACE,KAAA,KAAU,OAAA;AAAA,MACZ,qBACE,KAAA,KAAU,SAAA;AAAA,MACZ,yBACE,KAAA,KAAU,OAAA;AAAA,MACZ,2BACE,KAAA,KAAU,SAAA;AAAA,MACZ,uBACE,KAAA,KAAU,KAAA;AAAA,MACZ,qBAAA,EACE;AAAA;AACJ,GACF;AAEA,EAAA,uBACEC,cAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,GAAA,EAAK,WAAA;AAAA,MACL,SAAA,EAAW,OAAA;AAAA,MACX,QAAA;AAAA,MACA,OAAA,EAAS,WAAA;AAAA,MACR,GAAG;AAAA;AAAA,GACN;AAEJ,CAAA;AAEA,IAAO,gBAAA,GAAQ","file":"textarea.cjs","sourcesContent":["import React, {\n  useCallback,\n  useLayoutEffect,\n  useRef,\n} from 'react';\nimport { classnames } from '../helpers/classnames';\n\ntype TextareaWidth =\n  | 'short'\n  | 'default'\n  | 'max';\n\nexport interface TextareaProps\n  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {\n  state?: 'default' | 'error' | 'success';\n  width?: TextareaWidth;\n  autoGrow?: boolean;\n}\n\nfunction parsePixelValue(value: string) {\n  const parsed = Number.parseFloat(value);\n\n  return Number.isFinite(parsed)\n    ? parsed\n    : 0;\n}\n\nconst Textarea: React.FC<TextareaProps> = ({\n  state = 'default',\n  width = 'default',\n  autoGrow = false,\n  className = '',\n  disabled = false,\n  onInput,\n  ...props\n}) => {\n  const textareaRef =\n    useRef<HTMLTextAreaElement>(null);\n\n  const resizeToContent =\n    useCallback(() => {\n      const textarea =\n        textareaRef.current;\n\n      if (!autoGrow || !textarea) {\n        return;\n      }\n\n      const computedStyle =\n        window.getComputedStyle(textarea);\n\n      const lineHeight =\n        parsePixelValue(\n          computedStyle.lineHeight,\n        );\n\n      const borderHeight =\n        parsePixelValue(\n          computedStyle.borderTopWidth,\n        ) +\n        parsePixelValue(\n          computedStyle.borderBottomWidth,\n        );\n\n      const minHeight =\n        parsePixelValue(\n          computedStyle.minHeight,\n        );\n\n      const previousMinHeight =\n        textarea.style.minHeight;\n\n      textarea.style.minHeight =\n        '0px';\n\n      textarea.style.setProperty(\n        '--textarea-auto-height',\n        '0px',\n      );\n\n      const contentHeight =\n        textarea.scrollHeight;\n\n      textarea.style.minHeight =\n        previousMinHeight;\n\n      const nextHeight = Math.max(\n        contentHeight +\n          lineHeight +\n          borderHeight,\n        minHeight,\n      );\n\n      textarea.style.setProperty(\n        '--textarea-auto-height',\n        `${nextHeight}px`,\n      );\n    }, [autoGrow]);\n\n  useLayoutEffect(() => {\n    resizeToContent();\n  }, [\n    resizeToContent,\n    props.value,\n    width,\n  ]);\n\n  const handleInput = (\n    event: React.InputEvent<HTMLTextAreaElement>,\n  ) => {\n    resizeToContent();\n    onInput?.(event);\n  };\n\n  const classes = classnames(\n    'textarea',\n    className,\n    {\n      'textarea--error':\n        state === 'error',\n      'textarea--success':\n        state === 'success',\n      'textarea--width-short':\n        width === 'short',\n      'textarea--width-default':\n        width === 'default',\n      'textarea--width-max':\n        width === 'max',\n      'textarea--auto-grow':\n        autoGrow,\n    },\n  );\n\n  return (\n    <textarea\n      ref={textareaRef}\n      className={classes}\n      disabled={disabled}\n      onInput={handleInput}\n      {...props}\n    />\n  );\n};\n\nexport default Textarea;\n"]}

package/components/textarea/textarea.css

@@ -26,6 +26,7 @@
   --textarea-padding-x: var(--padding-control-horz);
   --textarea-padding-y: var(--padding-control-horz);
 
+  box-sizing: border-box;
   min-height: var(--textarea-min-height);
   padding: var(--textarea-padding-y) var(--textarea-padding-x);
 
@@ -55,6 +56,30 @@
     background-color var(--textarea-transition-duration) ease;
 }
 
+.textarea--width-short {
+  /* size */
+  width: auto;
+}
+
+.textarea--width-default {
+  /* size */
+  width: 400px;
+}
+
+.textarea--width-max {
+  /* size */
+  width: 100%;
+}
+
+.textarea--auto-grow {
+  /* size */
+  height: var(--textarea-auto-height);
+
+  /* motion */
+  overflow-y: hidden;
+  resize: none;
+}
+
 .textarea::placeholder {
   color: var(--textarea-placeholder);
 }

package/components/textarea/textarea.d.ts

@@ -1,6 +1,9 @@
 import React from 'react';
+type TextareaWidth = 'short' | 'default' | 'max';
 export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
     state?: 'default' | 'error' | 'success';
+    width?: TextareaWidth;
+    autoGrow?: boolean;
 }
 declare const Textarea: React.FC<TextareaProps>;
 export default Textarea;

package/components/textarea/textarea.js

@@ -1,21 +1,85 @@
 import { jsx } from 'react/jsx-runtime';
+import { useRef, useCallback, useLayoutEffect } from 'react';
 import { classnames } from '../helpers/classnames';
 
+function parsePixelValue(value) {
+  const parsed = Number.parseFloat(value);
+  return Number.isFinite(parsed) ? parsed : 0;
+}
 const Textarea = ({
   state = "default",
+  width = "default",
+  autoGrow = false,
   className = "",
   disabled = false,
+  onInput,
   ...props
 }) => {
-  const classes = classnames("textarea", className, {
-    error: state === "error",
-    success: state === "success"
-  });
+  const textareaRef = useRef(null);
+  const resizeToContent = useCallback(() => {
+    const textarea = textareaRef.current;
+    if (!autoGrow || !textarea) {
+      return;
+    }
+    const computedStyle = window.getComputedStyle(textarea);
+    const lineHeight = parsePixelValue(
+      computedStyle.lineHeight
+    );
+    const borderHeight = parsePixelValue(
+      computedStyle.borderTopWidth
+    ) + parsePixelValue(
+      computedStyle.borderBottomWidth
+    );
+    const minHeight = parsePixelValue(
+      computedStyle.minHeight
+    );
+    const previousMinHeight = textarea.style.minHeight;
+    textarea.style.minHeight = "0px";
+    textarea.style.setProperty(
+      "--textarea-auto-height",
+      "0px"
+    );
+    const contentHeight = textarea.scrollHeight;
+    textarea.style.minHeight = previousMinHeight;
+    const nextHeight = Math.max(
+      contentHeight + lineHeight + borderHeight,
+      minHeight
+    );
+    textarea.style.setProperty(
+      "--textarea-auto-height",
+      `${nextHeight}px`
+    );
+  }, [autoGrow]);
+  useLayoutEffect(() => {
+    resizeToContent();
+  }, [
+    resizeToContent,
+    props.value,
+    width
+  ]);
+  const handleInput = (event) => {
+    resizeToContent();
+    onInput?.(event);
+  };
+  const classes = classnames(
+    "textarea",
+    className,
+    {
+      "textarea--error": state === "error",
+      "textarea--success": state === "success",
+      "textarea--width-short": width === "short",
+      "textarea--width-default": width === "default",
+      "textarea--width-max": width === "max",
+      "textarea--auto-grow": autoGrow
+    }
+  );
   return /* @__PURE__ */ jsx(
     "textarea",
     {
+      ref: textareaRef,
       className: classes,
       disabled,
+      onInput: handleInput,
       ...props
     }
   );

package/components/textarea/textarea.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/textarea/textarea.tsx"],"names":[],"mappings":";;;AASA,MAAM,WAAoC,CAAC;AAAA,EACzC,KAAA,GAAQ,SAAA;AAAA,EACR,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA,GAAW,KAAA;AAAA,EACX,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAU,UAAA,CAAW,UAAA,EAAY,SAAA,EAAW;AAAA,IAChD,OAAO,KAAA,KAAU,OAAA;AAAA,IACjB,SAAS,KAAA,KAAU;AAAA,GAClB,CAAA;AAEH,EAAA,uBACE,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACX,QAAA;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ,CAAA;AAEA,IAAO,gBAAA,GAAQ","file":"textarea.js","sourcesContent":["import React from 'react';\n// import './textarea.css';\nimport { classnames } from '../helpers/classnames';\n\nexport interface TextareaProps\n  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {\n  state?: 'default' | 'error' | 'success';\n}\n\nconst Textarea: React.FC<TextareaProps> = ({\n  state = 'default',\n  className = '',\n  disabled = false,\n  ...props\n}) => {\n  const classes = classnames('textarea', className, {\n    error: state === 'error',\n    success: state === 'success',\n    });\n\n  return (\n    <textarea\n      className={classes}\n      disabled={disabled}\n      {...props}\n    />\n  );\n};\n\nexport default Textarea;"]}
+{"version":3,"sources":["../../../src/components/textarea/textarea.tsx"],"names":[],"mappings":";;;;AAmBA,SAAS,gBAAgB,KAAA,EAAe;AACtC,EAAA,MAAM,MAAA,GAAS,MAAA,CAAO,UAAA,CAAW,KAAK,CAAA;AAEtC,EAAA,OAAO,MAAA,CAAO,QAAA,CAAS,MAAM,CAAA,GACzB,MAAA,GACA,CAAA;AACN;AAEA,MAAM,WAAoC,CAAC;AAAA,EACzC,KAAA,GAAQ,SAAA;AAAA,EACR,KAAA,GAAQ,SAAA;AAAA,EACR,QAAA,GAAW,KAAA;AAAA,EACX,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA,GAAW,KAAA;AAAA,EACX,OAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,WAAA,GACJ,OAA4B,IAAI,CAAA;AAElC,EAAA,MAAM,eAAA,GACJ,YAAY,MAAM;AAChB,IAAA,MAAM,WACJ,WAAA,CAAY,OAAA;AAEd,IAAA,IAAI,CAAC,QAAA,IAAY,CAAC,QAAA,EAAU;AAC1B,MAAA;AAAA,IACF;AAEA,IAAA,MAAM,aAAA,GACJ,MAAA,CAAO,gBAAA,CAAiB,QAAQ,CAAA;AAElC,IAAA,MAAM,UAAA,GACJ,eAAA;AAAA,MACE,aAAA,CAAc;AAAA,KAChB;AAEF,IAAA,MAAM,YAAA,GACJ,eAAA;AAAA,MACE,aAAA,CAAc;AAAA,KAChB,GACA,eAAA;AAAA,MACE,aAAA,CAAc;AAAA,KAChB;AAEF,IAAA,MAAM,SAAA,GACJ,eAAA;AAAA,MACE,aAAA,CAAc;AAAA,KAChB;AAEF,IAAA,MAAM,iBAAA,GACJ,SAAS,KAAA,CAAM,SAAA;AAEjB,IAAA,QAAA,CAAS,MAAM,SAAA,GACb,KAAA;AAEF,IAAA,QAAA,CAAS,KAAA,CAAM,WAAA;AAAA,MACb,wBAAA;AAAA,MACA;AAAA,KACF;AAEA,IAAA,MAAM,gBACJ,QAAA,CAAS,YAAA;AAEX,IAAA,QAAA,CAAS,MAAM,SAAA,GACb,iBAAA;AAEF,IAAA,MAAM,aAAa,IAAA,CAAK,GAAA;AAAA,MACtB,gBACE,UAAA,GACA,YAAA;AAAA,MACF;AAAA,KACF;AAEA,IAAA,QAAA,CAAS,KAAA,CAAM,WAAA;AAAA,MACb,wBAAA;AAAA,MACA,GAAG,UAAU,CAAA,EAAA;AAAA,KACf;AAAA,EACF,CAAA,EAAG,CAAC,QAAQ,CAAC,CAAA;AAEf,EAAA,eAAA,CAAgB,MAAM;AACpB,IAAA,eAAA,EAAgB;AAAA,EAClB,CAAA,EAAG;AAAA,IACD,eAAA;AAAA,IACA,KAAA,CAAM,KAAA;AAAA,IACN;AAAA,GACD,CAAA;AAED,EAAA,MAAM,WAAA,GAAc,CAClB,KAAA,KACG;AACH,IAAA,eAAA,EAAgB;AAChB,IAAA,OAAA,GAAU,KAAK,CAAA;AAAA,EACjB,CAAA;AAEA,EAAA,MAAM,OAAA,GAAU,UAAA;AAAA,IACd,UAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,MACE,mBACE,KAAA,KAAU,OAAA;AAAA,MACZ,qBACE,KAAA,KAAU,SAAA;AAAA,MACZ,yBACE,KAAA,KAAU,OAAA;AAAA,MACZ,2BACE,KAAA,KAAU,SAAA;AAAA,MACZ,uBACE,KAAA,KAAU,KAAA;AAAA,MACZ,qBAAA,EACE;AAAA;AACJ,GACF;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,GAAA,EAAK,WAAA;AAAA,MACL,SAAA,EAAW,OAAA;AAAA,MACX,QAAA;AAAA,MACA,OAAA,EAAS,WAAA;AAAA,MACR,GAAG;AAAA;AAAA,GACN;AAEJ,CAAA;AAEA,IAAO,gBAAA,GAAQ","file":"textarea.js","sourcesContent":["import React, {\n  useCallback,\n  useLayoutEffect,\n  useRef,\n} from 'react';\nimport { classnames } from '../helpers/classnames';\n\ntype TextareaWidth =\n  | 'short'\n  | 'default'\n  | 'max';\n\nexport interface TextareaProps\n  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {\n  state?: 'default' | 'error' | 'success';\n  width?: TextareaWidth;\n  autoGrow?: boolean;\n}\n\nfunction parsePixelValue(value: string) {\n  const parsed = Number.parseFloat(value);\n\n  return Number.isFinite(parsed)\n    ? parsed\n    : 0;\n}\n\nconst Textarea: React.FC<TextareaProps> = ({\n  state = 'default',\n  width = 'default',\n  autoGrow = false,\n  className = '',\n  disabled = false,\n  onInput,\n  ...props\n}) => {\n  const textareaRef =\n    useRef<HTMLTextAreaElement>(null);\n\n  const resizeToContent =\n    useCallback(() => {\n      const textarea =\n        textareaRef.current;\n\n      if (!autoGrow || !textarea) {\n        return;\n      }\n\n      const computedStyle =\n        window.getComputedStyle(textarea);\n\n      const lineHeight =\n        parsePixelValue(\n          computedStyle.lineHeight,\n        );\n\n      const borderHeight =\n        parsePixelValue(\n          computedStyle.borderTopWidth,\n        ) +\n        parsePixelValue(\n          computedStyle.borderBottomWidth,\n        );\n\n      const minHeight =\n        parsePixelValue(\n          computedStyle.minHeight,\n        );\n\n      const previousMinHeight =\n        textarea.style.minHeight;\n\n      textarea.style.minHeight =\n        '0px';\n\n      textarea.style.setProperty(\n        '--textarea-auto-height',\n        '0px',\n      );\n\n      const contentHeight =\n        textarea.scrollHeight;\n\n      textarea.style.minHeight =\n        previousMinHeight;\n\n      const nextHeight = Math.max(\n        contentHeight +\n          lineHeight +\n          borderHeight,\n        minHeight,\n      );\n\n      textarea.style.setProperty(\n        '--textarea-auto-height',\n        `${nextHeight}px`,\n      );\n    }, [autoGrow]);\n\n  useLayoutEffect(() => {\n    resizeToContent();\n  }, [\n    resizeToContent,\n    props.value,\n    width,\n  ]);\n\n  const handleInput = (\n    event: React.InputEvent<HTMLTextAreaElement>,\n  ) => {\n    resizeToContent();\n    onInput?.(event);\n  };\n\n  const classes = classnames(\n    'textarea',\n    className,\n    {\n      'textarea--error':\n        state === 'error',\n      'textarea--success':\n        state === 'success',\n      'textarea--width-short':\n        width === 'short',\n      'textarea--width-default':\n        width === 'default',\n      'textarea--width-max':\n        width === 'max',\n      'textarea--auto-grow':\n        autoGrow,\n    },\n  );\n\n  return (\n    <textarea\n      ref={textareaRef}\n      className={classes}\n      disabled={disabled}\n      onInput={handleInput}\n      {...props}\n    />\n  );\n};\n\nexport default Textarea;\n"]}

package/index.d.ts

@@ -5,7 +5,7 @@
 export { default as Button, buttonLink, } from './components/button';
 export type { ButtonProps, } from './components/button';
 export { default as Input } from './components/input';
-export type { InputProps, InputWidth, } from './components/input';
+export type { InputProps } from './components/input';
 export { default as Textarea } from './components/textarea';
 export type { TextareaProps } from './components/textarea';
 export { default as Select } from './components/select';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jvetrau-ds",
-  "version": "0.2.8",
+  "version": "0.2.9",
   "description": "Multi-brand React design system with semantic tokens",
   "license": "UNLICENSED",
   "type": "module",

package/styles.css

@@ -2758,7 +2758,7 @@
   --flip-list-open-content-gap:
     var(--font-h2-margin);
   --flip-list-trigger-column-gap:
-    var(--margin-item);
+    var(--margin-icon);
   --flip-list-scroll-margin-block-start:
     0px;
 
@@ -2831,74 +2831,92 @@
   /* motion */
 }
 
-.flip-list__trigger {
+.flip-list__status {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  --flip-list-status-gap:
+    var(--margin-tag);
+
+  display: block;
+  align-self: flex-start;
+  min-width: 0;
+  max-width: 100%;
+  margin:
+    0
+    0
+    var(--flip-list-status-gap)
+    0;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.flip-list__heading {
   /* color */
-  background: transparent;
-  color: var(--flip-list-trigger-color);
 
   /* typography */
-  font: inherit;
-  text-align: left;
 
   /* size */
   display: flex;
   align-items: center;
-  justify-content: space-between;
   gap: var(--flip-list-trigger-column-gap);
   width: 100%;
   min-width: 0;
   max-width: 100%;
-  padding: 0;
 
   /* border */
-  border: 0;
 
   /* depth */
 
   /* motion */
-  cursor: pointer;
 }
 
-.flip-list__trigger:focus-visible {
+.flip-list__trigger {
   /* color */
+  background: transparent;
+  color: var(--flip-list-trigger-color);
 
   /* typography */
+  font: inherit;
+  text-align: left;
 
   /* size */
+  display: flex;
+  flex: 0 1 auto;
+  align-items: center;
+  min-width: 0;
+  max-width: 100%;
+  padding: 0;
 
   /* border */
-  outline:
-    var(--size-border-width-focus)
-    solid
-    currentColor;
-  outline-offset:
-    var(--size-border-offset-focus);
+  border: 0;
 
   /* depth */
 
   /* motion */
+  cursor: pointer;
 }
 
-.flip-list__status {
+.flip-list__trigger:focus-visible {
   /* color */
 
   /* typography */
 
   /* size */
-  --flip-list-status-gap:
-    var(--margin-tag);
-
-  display: block;
-  align-self: flex-start;
-  min-width: 0;
-  max-width: 100%;
-  margin:
-    0
-    0
-    var(--flip-list-status-gap)
-    0;
 
   /* border */
+  outline:
+    var(--size-border-width-focus)
+    solid
+    currentColor;
+  outline-offset:
+    var(--size-border-offset-focus);
 
   /* depth */
 
@@ -2927,7 +2945,6 @@
   text-underline-offset: from-font;
 
   /* size */
-  flex: 1 1 auto;
   min-width: 0;
   max-width: 100%;
   overflow-wrap: anywhere;
@@ -2955,6 +2972,21 @@
   /* motion */
 }
 
+.flip-list__status-icon {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  flex: 0 0 auto;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
 .flip-list__meta {
   /* color */
   color: var(--flip-list-meta-color);
@@ -2976,6 +3008,7 @@
   flex: 0 0 auto;
   min-width: 0;
   max-width: 100%;
+  margin-left: auto;
 
   /* border */
 
@@ -4264,7 +4297,7 @@
 
   position: relative;
   display: inline-block;
-  width: 100%;
+  box-sizing: border-box;
 
   /* border */
   --select-border-width: var(--size-border-width-base);
@@ -4285,6 +4318,21 @@
   --select-transition-duration: 0.2s;
 }
 
+.select--width-short {
+  /* size */
+  width: fit-content;
+}
+
+.select--width-default {
+  /* size */
+  width: 400px;
+}
+
+.select--width-max {
+  /* size */
+  width: 100%;
+}
+
 .select__field {
   /* color */
   background: var(--select-bg);
@@ -4295,6 +4343,7 @@
   letter-spacing: inherit;
 
   /* size */
+  box-sizing: border-box;
   width: 100%;
   height: var(--select-height);
   padding-left: var(--select-padding-x);
@@ -4700,6 +4749,7 @@
   --textarea-padding-x: var(--padding-control-horz);
   --textarea-padding-y: var(--padding-control-horz);
 
+  box-sizing: border-box;
   min-height: var(--textarea-min-height);
   padding: var(--textarea-padding-y) var(--textarea-padding-x);
 
@@ -4729,6 +4779,30 @@
     background-color var(--textarea-transition-duration) ease;
 }
 
+.textarea--width-short {
+  /* size */
+  width: auto;
+}
+
+.textarea--width-default {
+  /* size */
+  width: 400px;
+}
+
+.textarea--width-max {
+  /* size */
+  width: 100%;
+}
+
+.textarea--auto-grow {
+  /* size */
+  height: var(--textarea-auto-height);
+
+  /* motion */
+  overflow-y: hidden;
+  resize: none;
+}
+
 .textarea::placeholder {
   color: var(--textarea-placeholder);
 }