@uva-glass/component-library 3.32.0 → 3.33.0

package/dist/assets/TextArea.css

@@ -1 +1 @@
-._text-area__wrapper_1pu93_1{display:flex;flex-direction:column;gap:.5rem}._text-area__header_1pu93_7{align-items:baseline;display:flex;justify-content:space-between}._text-area__label_1pu93_13{font-family:inherit;font-size:inherit;font-weight:var(--semibold);line-height:var(--line-height-s)}._text-area__word-count_1pu93_20{color:var(--new-color-grey-600);font-size:var(--font-size-text-non-essential)}._text-area__word-count--alert_1pu93_25{color:var(--new-color-red-600);font-weight:700}._text-area_1pu93_1{border-radius:.5rem;font-family:inherit;font-size:inherit;min-height:5.25rem;overflow:hidden;padding:.5rem;resize:none;white-space:pre-wrap;width:100%;word-wrap:break-word}
+._text-area__wrapper_iztus_1{display:flex;flex-direction:column;gap:.5rem}._text-area__header_iztus_7{align-items:flex-end;display:flex;justify-content:space-between}._text-area__label-wrapper_iztus_13{display:flex;flex-direction:column;gap:.5rem}._text-area__label_iztus_13{font-family:inherit;font-size:inherit;font-weight:var(--semibold);line-height:var(--line-height-s)}._text-area__sub-label_iztus_26{color:var(--new-color-grey-700);font-size:var(--font-size-text-non-essential)}._text-area__word-count_iztus_31{color:var(--new-color-grey-600);font-size:var(--font-size-text-non-essential)}._text-area__word-count--alert_iztus_36{color:var(--new-color-red-600);font-weight:700}._text-area_iztus_1{border-radius:.5rem;font-family:inherit;font-size:inherit;min-height:5.25rem;overflow:hidden;padding:.5rem;resize:none;white-space:pre-wrap;width:100%;word-wrap:break-word}

package/dist/components/ExpandableInfoPanel/ExpandableInfoPanel.d.ts

@@ -10,5 +10,7 @@ export interface ExpandableInfoPanelProps {
     expandLabel?: string;
     /** Content to be displayed inside the expandable panel. */
     content: ReactNode | string;
+    /** Optional state. */
+    defaultOpen?: boolean;
 }
-export declare const ExpandableInfoPanel: ({ triggerLabel, mainHeader, collapseLabel, expandLabel, content, }: ExpandableInfoPanelProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ExpandableInfoPanel: ({ triggerLabel, mainHeader, collapseLabel, expandLabel, content, defaultOpen, }: ExpandableInfoPanelProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ExpandableInfoPanel/ExpandableInfoPanel.js

@@ -1,6 +1,6 @@
 import { jsxs as n, jsx as p } from "react/jsx-runtime";
-import { useState as s, useId as f } from "react";
-import { c as x } from "../../clsx-OuTLNxxd.js";
+import { useState as f, useId as x } from "react";
+import { c as b } from "../../clsx-OuTLNxxd.js";
 import { Icon as r } from "../Icon/Icon.js";
 import '../../assets/ExpandableInfoPanel.css';const a = {
   "expandable-info-panel_wrapper": "_expandable-info-panel_wrapper_v55q8_1",
@@ -8,28 +8,29 @@ import '../../assets/ExpandableInfoPanel.css';const a = {
   "expandable-info-panel_trigger": "_expandable-info-panel_trigger_v55q8_16",
   "expandable-info-panel_trigger--active": "_expandable-info-panel_trigger--active_v55q8_44",
   "expandable-info-panel_content-wrapper": "_expandable-info-panel_content-wrapper_v55q8_66"
-}, h = ({
+}, q = ({
   triggerLabel: l,
   mainHeader: o,
   collapseLabel: t = "",
   expandLabel: d = "",
-  content: _
+  content: _,
+  defaultOpen: c = !1
 }) => {
-  const [e, c] = s(!1), i = f();
+  const [e, s] = f(c), i = x();
   return /* @__PURE__ */ n("div", { className: a["expandable-info-panel_wrapper"], children: [
     /* @__PURE__ */ n("div", { className: a["expandable-info-panel_header"], children: [
       o,
       /* @__PURE__ */ n(
         "button",
         {
-          className: x(a["expandable-info-panel_trigger"], {
+          className: b(a["expandable-info-panel_trigger"], {
             [a["expandable-info-panel_trigger--active"]]: e
           }),
           type: "button",
           "aria-expanded": e,
           "aria-controls": i,
           "aria-label": `${l} - ${e ? t : d}`,
-          onClick: () => c(!e),
+          onClick: () => s(!e),
           children: [
             /* @__PURE__ */ p(r, { name: e ? "SquareInfoSolid" : "SquareInfo", size: 24 }),
             l,
@@ -45,6 +46,6 @@ import '../../assets/ExpandableInfoPanel.css';const a = {
   ] });
 };
 export {
-  h as ExpandableInfoPanel
+  q as ExpandableInfoPanel
 };
 //# sourceMappingURL=ExpandableInfoPanel.js.map

package/dist/components/ExpandableInfoPanel/ExpandableInfoPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExpandableInfoPanel.js","sources":["../../../src/components/ExpandableInfoPanel/ExpandableInfoPanel.tsx"],"sourcesContent":["import { useState, type ReactNode } from 'react';\r\nimport { clsx } from 'clsx';\r\nimport { useId } from 'react';\r\n\r\nimport styles from './ExpandableInfoPanel.module.css';\r\n\r\nimport { Icon } from 'components/Icon';\r\n\r\nexport interface ExpandableInfoPanelProps {\r\n  /** Label for the trigger button that toggles the expandable panel. */\r\n  triggerLabel: string;\r\n  /** Main header displayed inline left of the trigger button. */\r\n  mainHeader?: ReactNode | string;\r\n  /** Aria-label for the button when the panel is collapsed. */\r\n  collapseLabel?: string;\r\n  /** Aria-label for the button when the panel is expanded. */\r\n  expandLabel?: string;\r\n  /** Content to be displayed inside the expandable panel. */\r\n  content: ReactNode | string;\r\n}\r\n\r\nexport const ExpandableInfoPanel = ({\r\n  triggerLabel,\r\n  mainHeader,\r\n  collapseLabel = '',\r\n  expandLabel = '',\r\n  content,\r\n}: ExpandableInfoPanelProps) => {\r\n  const [active, setActive] = useState(false);\r\n  const contentId = useId();\r\n\r\n  return (\r\n    <div className={styles['expandable-info-panel_wrapper']}>\r\n      <div className={styles['expandable-info-panel_header']}>\r\n        {mainHeader}\r\n        <button\r\n          className={clsx(styles['expandable-info-panel_trigger'], {\r\n            [styles['expandable-info-panel_trigger--active']]: active,\r\n          })}\r\n          type=\"button\"\r\n          aria-expanded={active}\r\n          aria-controls={contentId}\r\n          aria-label={`${triggerLabel} - ${active ? collapseLabel : expandLabel}`}\r\n          onClick={() => setActive(!active)}\r\n        >\r\n          <Icon name={active ? 'SquareInfoSolid' : 'SquareInfo'} size={24} />\r\n          {triggerLabel}\r\n          <Icon name={active ? 'CheveronUp' : 'CheveronDown'} size={16} />\r\n        </button>\r\n      </div>\r\n      {active && (\r\n        <div id={contentId} className={styles['expandable-info-panel_content-wrapper']}>\r\n          <Icon name=\"SquareInfo\" size={24} />\r\n          <div>{content}</div>\r\n        </div>\r\n      )}\r\n    </div>\r\n  );\r\n};\r\n"],"names":["ExpandableInfoPanel","triggerLabel","mainHeader","collapseLabel","expandLabel","content","active","setActive","useState","contentId","useId","jsxs","styles","clsx","jsx","Icon"],"mappings":";;;;;;;;;;GAqBaA,IAAsB,CAAC;AAAA,EAClC,cAAAC;AAAA,EACA,YAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,aAAAC,IAAc;AAAA,EACd,SAAAC;AACF,MAAgC;AAC9B,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK,GACpCC,IAAYC,EAAA;AAElB,SACE,gBAAAC,EAAC,OAAA,EAAI,WAAWC,EAAO,+BAA+B,GACpD,UAAA;AAAA,IAAA,gBAAAD,EAAC,OAAA,EAAI,WAAWC,EAAO,8BAA8B,GAClD,UAAA;AAAA,MAAAV;AAAA,MACD,gBAAAS;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWE,EAAKD,EAAO,+BAA+B,GAAG;AAAA,YACvD,CAACA,EAAO,uCAAuC,CAAC,GAAGN;AAAA,UAAA,CACpD;AAAA,UACD,MAAK;AAAA,UACL,iBAAeA;AAAA,UACf,iBAAeG;AAAA,UACf,cAAY,GAAGR,CAAY,MAAMK,IAASH,IAAgBC,CAAW;AAAA,UACrE,SAAS,MAAMG,EAAU,CAACD,CAAM;AAAA,UAEhC,UAAA;AAAA,YAAA,gBAAAQ,EAACC,KAAK,MAAMT,IAAS,oBAAoB,cAAc,MAAM,IAAI;AAAA,YAChEL;AAAA,8BACAc,GAAA,EAAK,MAAMT,IAAS,eAAe,gBAAgB,MAAM,GAAA,CAAI;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAChE,GACF;AAAA,IACCA,uBACE,OAAA,EAAI,IAAIG,GAAW,WAAWG,EAAO,uCAAuC,GAC3E,UAAA;AAAA,MAAA,gBAAAE,EAACC,GAAA,EAAK,MAAK,cAAa,MAAM,IAAI;AAAA,MAClC,gBAAAD,EAAC,SAAK,UAAAT,EAAA,CAAQ;AAAA,IAAA,EAAA,CAChB;AAAA,EAAA,GAEJ;AAEJ;"}
+{"version":3,"file":"ExpandableInfoPanel.js","sources":["../../../src/components/ExpandableInfoPanel/ExpandableInfoPanel.tsx"],"sourcesContent":["import { useState, type ReactNode } from 'react';\r\nimport { clsx } from 'clsx';\r\nimport { useId } from 'react';\r\n\r\nimport styles from './ExpandableInfoPanel.module.css';\r\n\r\nimport { Icon } from 'components/Icon';\r\n\r\nexport interface ExpandableInfoPanelProps {\r\n  /** Label for the trigger button that toggles the expandable panel. */\r\n  triggerLabel: string;\r\n  /** Main header displayed inline left of the trigger button. */\r\n  mainHeader?: ReactNode | string;\r\n  /** Aria-label for the button when the panel is collapsed. */\r\n  collapseLabel?: string;\r\n  /** Aria-label for the button when the panel is expanded. */\r\n  expandLabel?: string;\r\n  /** Content to be displayed inside the expandable panel. */\r\n  content: ReactNode | string;\r\n  /** Optional state. */\r\n  defaultOpen?: boolean;\r\n}\r\n\r\nexport const ExpandableInfoPanel = ({\r\n  triggerLabel,\r\n  mainHeader,\r\n  collapseLabel = '',\r\n  expandLabel = '',\r\n  content,\r\n  defaultOpen = false,\r\n}: ExpandableInfoPanelProps) => {\r\n  const [active, setActive] = useState(defaultOpen);\r\n  const contentId = useId();\r\n\r\n  return (\r\n    <div className={styles['expandable-info-panel_wrapper']}>\r\n      <div className={styles['expandable-info-panel_header']}>\r\n        {mainHeader}\r\n        <button\r\n          className={clsx(styles['expandable-info-panel_trigger'], {\r\n            [styles['expandable-info-panel_trigger--active']]: active,\r\n          })}\r\n          type=\"button\"\r\n          aria-expanded={active}\r\n          aria-controls={contentId}\r\n          aria-label={`${triggerLabel} - ${active ? collapseLabel : expandLabel}`}\r\n          onClick={() => setActive(!active)}\r\n        >\r\n          <Icon name={active ? 'SquareInfoSolid' : 'SquareInfo'} size={24} />\r\n          {triggerLabel}\r\n          <Icon name={active ? 'CheveronUp' : 'CheveronDown'} size={16} />\r\n        </button>\r\n      </div>\r\n      {active && (\r\n        <div id={contentId} className={styles['expandable-info-panel_content-wrapper']}>\r\n          <Icon name=\"SquareInfo\" size={24} />\r\n          <div>{content}</div>\r\n        </div>\r\n      )}\r\n    </div>\r\n  );\r\n};\r\n"],"names":["ExpandableInfoPanel","triggerLabel","mainHeader","collapseLabel","expandLabel","content","defaultOpen","active","setActive","useState","contentId","useId","jsxs","styles","clsx","jsx","Icon"],"mappings":";;;;;;;;;;GAuBaA,IAAsB,CAAC;AAAA,EAClC,cAAAC;AAAA,EACA,YAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,aAAAC,IAAc;AAAA,EACd,SAAAC;AAAA,EACA,aAAAC,IAAc;AAChB,MAAgC;AAC9B,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAASH,CAAW,GAC1CI,IAAYC,EAAA;AAElB,SACE,gBAAAC,EAAC,OAAA,EAAI,WAAWC,EAAO,+BAA+B,GACpD,UAAA;AAAA,IAAA,gBAAAD,EAAC,OAAA,EAAI,WAAWC,EAAO,8BAA8B,GAClD,UAAA;AAAA,MAAAX;AAAA,MACD,gBAAAU;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWE,EAAKD,EAAO,+BAA+B,GAAG;AAAA,YACvD,CAACA,EAAO,uCAAuC,CAAC,GAAGN;AAAA,UAAA,CACpD;AAAA,UACD,MAAK;AAAA,UACL,iBAAeA;AAAA,UACf,iBAAeG;AAAA,UACf,cAAY,GAAGT,CAAY,MAAMM,IAASJ,IAAgBC,CAAW;AAAA,UACrE,SAAS,MAAMI,EAAU,CAACD,CAAM;AAAA,UAEhC,UAAA;AAAA,YAAA,gBAAAQ,EAACC,KAAK,MAAMT,IAAS,oBAAoB,cAAc,MAAM,IAAI;AAAA,YAChEN;AAAA,8BACAe,GAAA,EAAK,MAAMT,IAAS,eAAe,gBAAgB,MAAM,GAAA,CAAI;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAChE,GACF;AAAA,IACCA,uBACE,OAAA,EAAI,IAAIG,GAAW,WAAWG,EAAO,uCAAuC,GAC3E,UAAA;AAAA,MAAA,gBAAAE,EAACC,GAAA,EAAK,MAAK,cAAa,MAAM,IAAI;AAAA,MAClC,gBAAAD,EAAC,SAAK,UAAAV,EAAA,CAAQ;AAAA,IAAA,EAAA,CAChB;AAAA,EAAA,GAEJ;AAEJ;"}

package/dist/components/TextArea/TextArea.d.ts

@@ -3,9 +3,11 @@ export interface TextAreaProps {
     onChange: (value: string) => void;
     /** The label for the text area */
     label?: string;
+    /** Optional sub label for the text area */
+    subLabel?: string;
     /** The max amount of allowed charecters in the text area */
     maxCharacters?: number;
     /** The default value for the text area */
     defaultValue?: string;
 }
-export declare function TextArea({ onChange, label, maxCharacters, defaultValue }: TextAreaProps): import("react/jsx-runtime").JSX.Element;
+export declare function TextArea({ onChange, label, subLabel, maxCharacters, defaultValue }: TextAreaProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/TextArea/TextArea.js

@@ -1,40 +1,45 @@
-import { jsxs as _, jsx as n } from "react/jsx-runtime";
+import { jsxs as r, jsx as _ } from "react/jsx-runtime";
 import { useRef as x, useState as p } from "react";
 import { c as d } from "../../clsx-OuTLNxxd.js";
-import '../../assets/TextArea.css';const r = {
-  "text-area__wrapper": "_text-area__wrapper_1pu93_1",
-  "text-area__header": "_text-area__header_1pu93_7",
-  "text-area__label": "_text-area__label_1pu93_13",
-  "text-area__word-count": "_text-area__word-count_1pu93_20",
-  "text-area__word-count--alert": "_text-area__word-count--alert_1pu93_25",
-  "text-area": "_text-area_1pu93_1"
+import '../../assets/TextArea.css';const e = {
+  "text-area__wrapper": "_text-area__wrapper_iztus_1",
+  "text-area__header": "_text-area__header_iztus_7",
+  "text-area__label-wrapper": "_text-area__label-wrapper_iztus_13",
+  "text-area__label": "_text-area__label_iztus_13",
+  "text-area__sub-label": "_text-area__sub-label_iztus_26",
+  "text-area__word-count": "_text-area__word-count_iztus_31",
+  "text-area__word-count--alert": "_text-area__word-count--alert_iztus_36",
+  "text-area": "_text-area_iztus_1"
 };
-function w({ onChange: u, label: a, maxCharacters: t = 0, defaultValue: c = "" }) {
-  const e = x(null), [o, l] = p(0), s = () => {
-    e.current && (e.current.style.height = "auto", e.current.style.height = `${e.current.scrollHeight}px`, l(e.current.value.length), u(e.current.value.trim()));
+function b({ onChange: u, label: l, subLabel: s, maxCharacters: a = 0, defaultValue: c = "" }) {
+  const t = x(null), [n, o] = p(0), i = () => {
+    t.current && (t.current.style.height = "auto", t.current.style.height = `${t.current.scrollHeight}px`, o(t.current.value.length), u(t.current.value.trim()));
   };
-  return /* @__PURE__ */ _("div", { className: r["text-area__wrapper"], children: [
-    (a || t > 0) && /* @__PURE__ */ _("div", { className: r["text-area__header"], children: [
-      a && /* @__PURE__ */ n("span", { className: r["text-area__label"], children: a }),
-      t > 0 && /* @__PURE__ */ _("div", { className: r["text-area__word-count"], children: [
-        /* @__PURE__ */ n("span", { className: d({ [r["text-area__word-count--alert"]]: o === t }), children: o }),
+  return /* @__PURE__ */ r("div", { className: e["text-area__wrapper"], children: [
+    (l || a > 0) && /* @__PURE__ */ r("div", { className: e["text-area__header"], children: [
+      /* @__PURE__ */ r("span", { className: e["text-area__label-wrapper"], children: [
+        l && /* @__PURE__ */ _("span", { className: e["text-area__label"], children: l }),
+        s && /* @__PURE__ */ _("span", { className: e["text-area__sub-label"], children: s })
+      ] }),
+      a > 0 && /* @__PURE__ */ r("div", { className: e["text-area__word-count"], children: [
+        /* @__PURE__ */ _("span", { className: d({ [e["text-area__word-count--alert"]]: n === a }), children: n }),
         " / ",
-        t
+        a
       ] })
     ] }),
-    /* @__PURE__ */ n(
+    /* @__PURE__ */ _(
       "textarea",
       {
-        ref: e,
-        className: r["text-area"],
-        maxLength: t > 0 ? t : void 0,
-        onInput: s,
+        ref: t,
+        className: e["text-area"],
+        maxLength: a > 0 ? a : void 0,
+        onInput: i,
         defaultValue: c
       }
     )
   ] });
 }
 export {
-  w as TextArea
+  b as TextArea
 };
 //# sourceMappingURL=TextArea.js.map

package/dist/components/TextArea/TextArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.js","sources":["../../../src/components/TextArea/TextArea.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport { clsx } from 'clsx';\n\nimport styles from './TextArea.module.css';\n\nexport interface TextAreaProps {\n  /** Returns entered values as trimmed string */\n  onChange: (value: string) => void;\n  /** The label for the text area */\n  label?: string;\n  /** The max amount of allowed charecters in the text area */\n  maxCharacters?: number;\n  /** The default value for the text area */\n  defaultValue?: string;\n}\n\nexport function TextArea({ onChange, label, maxCharacters = 0, defaultValue = '' }: TextAreaProps) {\n  const textAreaRef = useRef<HTMLTextAreaElement>(null);\n  const [characterCount, setCharacterCount] = useState(0);\n\n  const handleInput = () => {\n    if (textAreaRef.current) {\n      textAreaRef.current.style.height = 'auto';\n      textAreaRef.current.style.height = `${textAreaRef.current.scrollHeight}px`;\n\n      setCharacterCount(textAreaRef.current.value.length);\n      onChange(textAreaRef.current.value.trim());\n    }\n  };\n\n  return (\n    <div className={styles['text-area__wrapper']}>\n      {(label || maxCharacters > 0) && (\n        <div className={styles['text-area__header']}>\n          {label && <span className={styles['text-area__label']}>{label}</span>}\n          {maxCharacters > 0 && (\n            <div className={styles['text-area__word-count']}>\n              <span className={clsx({ [styles['text-area__word-count--alert']]: characterCount === maxCharacters })}>\n                {characterCount}\n              </span>\n              &nbsp;/&nbsp;{maxCharacters}\n            </div>\n          )}\n        </div>\n      )}\n\n      <textarea\n        ref={textAreaRef}\n        className={styles['text-area']}\n        maxLength={maxCharacters > 0 ? maxCharacters : undefined}\n        onInput={handleInput}\n        defaultValue={defaultValue}\n      />\n    </div>\n  );\n}\n"],"names":["TextArea","onChange","label","maxCharacters","defaultValue","textAreaRef","useRef","characterCount","setCharacterCount","useState","handleInput","jsxs","styles","jsx","clsx"],"mappings":";;;;;;;;;;;AAgBO,SAASA,EAAS,EAAE,UAAAC,GAAU,OAAAC,GAAO,eAAAC,IAAgB,GAAG,cAAAC,IAAe,MAAqB;AACjG,QAAMC,IAAcC,EAA4B,IAAI,GAC9C,CAACC,GAAgBC,CAAiB,IAAIC,EAAS,CAAC,GAEhDC,IAAc,MAAM;AACxB,IAAIL,EAAY,YACdA,EAAY,QAAQ,MAAM,SAAS,QACnCA,EAAY,QAAQ,MAAM,SAAS,GAAGA,EAAY,QAAQ,YAAY,MAEtEG,EAAkBH,EAAY,QAAQ,MAAM,MAAM,GAClDJ,EAASI,EAAY,QAAQ,MAAM,KAAA,CAAM;AAAA,EAC3C;AAGF,SACE,gBAAAM,EAAC,OAAA,EAAI,WAAWC,EAAO,oBAAoB,GACvC,UAAA;AAAA,KAAAV,KAASC,IAAgB,MACzB,gBAAAQ,EAAC,SAAI,WAAWC,EAAO,mBAAmB,GACvC,UAAA;AAAA,MAAAV,uBAAU,QAAA,EAAK,WAAWU,EAAO,kBAAkB,GAAI,UAAAV,GAAM;AAAA,MAC7DC,IAAgB,KACf,gBAAAQ,EAAC,SAAI,WAAWC,EAAO,uBAAuB,GAC5C,UAAA;AAAA,QAAA,gBAAAC,EAAC,QAAA,EAAK,WAAWC,EAAK,EAAE,CAACF,EAAO,8BAA8B,CAAC,GAAGL,MAAmBJ,EAAA,CAAe,GACjG,UAAAI,EAAA,CACH;AAAA,QAAO;AAAA,QACOJ;AAAA,MAAA,EAAA,CAChB;AAAA,IAAA,GAEJ;AAAA,IAGF,gBAAAU;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAKR;AAAA,QACL,WAAWO,EAAO,WAAW;AAAA,QAC7B,WAAWT,IAAgB,IAAIA,IAAgB;AAAA,QAC/C,SAASO;AAAA,QACT,cAAAN;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;"}
+{"version":3,"file":"TextArea.js","sources":["../../../src/components/TextArea/TextArea.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport { clsx } from 'clsx';\n\nimport styles from './TextArea.module.css';\n\nexport interface TextAreaProps {\n  /** Returns entered values as trimmed string */\n  onChange: (value: string) => void;\n  /** The label for the text area */\n  label?: string;\n  /** Optional sub label for the text area */\n  subLabel?: string;\n  /** The max amount of allowed charecters in the text area */\n  maxCharacters?: number;\n  /** The default value for the text area */\n  defaultValue?: string;\n}\n\nexport function TextArea({ onChange, label, subLabel, maxCharacters = 0, defaultValue = '' }: TextAreaProps) {\n  const textAreaRef = useRef<HTMLTextAreaElement>(null);\n  const [characterCount, setCharacterCount] = useState(0);\n\n  const handleInput = () => {\n    if (textAreaRef.current) {\n      textAreaRef.current.style.height = 'auto';\n      textAreaRef.current.style.height = `${textAreaRef.current.scrollHeight}px`;\n\n      setCharacterCount(textAreaRef.current.value.length);\n      onChange(textAreaRef.current.value.trim());\n    }\n  };\n\n  return (\n    <div className={styles['text-area__wrapper']}>\n      {(label || maxCharacters > 0) && (\n        <div className={styles['text-area__header']}>\n          <span className={styles['text-area__label-wrapper']}>\n            {label && <span className={styles['text-area__label']}>{label}</span>}\n            {subLabel && <span className={styles['text-area__sub-label']}>{subLabel}</span>}\n          </span>\n          {maxCharacters > 0 && (\n            <div className={styles['text-area__word-count']}>\n              <span className={clsx({ [styles['text-area__word-count--alert']]: characterCount === maxCharacters })}>\n                {characterCount}\n              </span>\n              &nbsp;/&nbsp;{maxCharacters}\n            </div>\n          )}\n        </div>\n      )}\n\n      <textarea\n        ref={textAreaRef}\n        className={styles['text-area']}\n        maxLength={maxCharacters > 0 ? maxCharacters : undefined}\n        onInput={handleInput}\n        defaultValue={defaultValue}\n      />\n    </div>\n  );\n}\n"],"names":["TextArea","onChange","label","subLabel","maxCharacters","defaultValue","textAreaRef","useRef","characterCount","setCharacterCount","useState","handleInput","jsxs","styles","jsx","clsx"],"mappings":";;;;;;;;;;;;;AAkBO,SAASA,EAAS,EAAE,UAAAC,GAAU,OAAAC,GAAO,UAAAC,GAAU,eAAAC,IAAgB,GAAG,cAAAC,IAAe,MAAqB;AAC3G,QAAMC,IAAcC,EAA4B,IAAI,GAC9C,CAACC,GAAgBC,CAAiB,IAAIC,EAAS,CAAC,GAEhDC,IAAc,MAAM;AACxB,IAAIL,EAAY,YACdA,EAAY,QAAQ,MAAM,SAAS,QACnCA,EAAY,QAAQ,MAAM,SAAS,GAAGA,EAAY,QAAQ,YAAY,MAEtEG,EAAkBH,EAAY,QAAQ,MAAM,MAAM,GAClDL,EAASK,EAAY,QAAQ,MAAM,KAAA,CAAM;AAAA,EAC3C;AAGF,SACE,gBAAAM,EAAC,OAAA,EAAI,WAAWC,EAAO,oBAAoB,GACvC,UAAA;AAAA,KAAAX,KAASE,IAAgB,MACzB,gBAAAQ,EAAC,SAAI,WAAWC,EAAO,mBAAmB,GACxC,UAAA;AAAA,MAAA,gBAAAD,EAAC,QAAA,EAAK,WAAWC,EAAO,0BAA0B,GAC/C,UAAA;AAAA,QAAAX,uBAAU,QAAA,EAAK,WAAWW,EAAO,kBAAkB,GAAI,UAAAX,GAAM;AAAA,QAC7DC,KAAY,gBAAAW,EAAC,QAAA,EAAK,WAAWD,EAAO,sBAAsB,GAAI,UAAAV,EAAA,CAAS;AAAA,MAAA,GAC1E;AAAA,MACCC,IAAgB,KACf,gBAAAQ,EAAC,SAAI,WAAWC,EAAO,uBAAuB,GAC5C,UAAA;AAAA,QAAA,gBAAAC,EAAC,QAAA,EAAK,WAAWC,EAAK,EAAE,CAACF,EAAO,8BAA8B,CAAC,GAAGL,MAAmBJ,EAAA,CAAe,GACjG,UAAAI,EAAA,CACH;AAAA,QAAO;AAAA,QACOJ;AAAA,MAAA,EAAA,CAChB;AAAA,IAAA,GAEJ;AAAA,IAGF,gBAAAU;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAKR;AAAA,QACL,WAAWO,EAAO,WAAW;AAAA,QAC7B,WAAWT,IAAgB,IAAIA,IAAgB;AAAA,QAC/C,SAASO;AAAA,QACT,cAAAN;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;"}

package/dist/components/TextArea/TextArea.stories.d.ts

@@ -3,3 +3,4 @@ import { TextAreaProps } from './TextArea';
 declare const _default: Meta<TextAreaProps>;
 export default _default;
 export declare const TextAreaExample: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, TextAreaProps>;
+export declare const TextAreaSubtitleExample: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, TextAreaProps>;

package/dist/components/TextArea/TextArea.stories.js

@@ -1,31 +1,30 @@
-import { jsx as t } from "react/jsx-runtime";
-import { l as r } from "../../index-C2E9FY6V.js";
+import { jsx as r } from "react/jsx-runtime";
+import { l as a } from "../../index-C2E9FY6V.js";
 import { TextArea as e } from "./TextArea.js";
-const l = `
-  <TextArea label={label} maxCharacters={maxCharacters} defaultValue={string}/> `, p = {
+const o = `
+  <TextArea label={label} maxCharacters={maxCharacters} defaultValue={string}/> `, x = {
   title: "Atoms/TextArea",
   component: e,
-  argTypes: {
-    label: {
-      control: "text"
-    },
-    maxCharacters: {
-      control: "number"
-    }
-  },
-  parameters: {
-    inspectComponent: e,
-    codeString: l
-  }
-}, o = (a) => /* @__PURE__ */ t(e, { ...a }), m = o.bind({});
+  argTypes: { label: { control: "text" }, maxCharacters: { control: "number" } },
+  parameters: { inspectComponent: e, codeString: o }
+}, t = (l) => /* @__PURE__ */ r(e, { ...l }), m = t.bind({});
 m.args = {
   label: "Sample label",
   maxCharacters: 140,
   defaultValue: "Sample default value",
-  onChange: r()
+  onChange: a()
+};
+const s = t.bind({});
+s.args = {
+  label: "Sample label",
+  subLabel: "Sample sub label",
+  maxCharacters: 140,
+  defaultValue: "Sample default value",
+  onChange: a()
 };
 export {
   m as TextAreaExample,
-  p as default
+  s as TextAreaSubtitleExample,
+  x as default
 };
 //# sourceMappingURL=TextArea.stories.js.map

package/dist/components/TextArea/TextArea.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.stories.js","sources":["../../../src/components/TextArea/TextArea.stories.tsx"],"sourcesContent":["import { fn } from 'storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { TextAreaProps } from './TextArea';\n\nimport { TextArea } from './TextArea';\n\nconst codeString = `\n  <TextArea label={label} maxCharacters={maxCharacters} defaultValue={string}/> `;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/TextArea',\n  component: TextArea,\n  argTypes: {\n    label: {\n      control: 'text',\n    },\n    maxCharacters: {\n      control: 'number',\n    },\n  },\n  parameters: {\n    inspectComponent: TextArea,\n    codeString: codeString,\n  },\n} as Meta<TextAreaProps>;\n\nconst Template: StoryFn<TextAreaProps> = (args) => <TextArea {...args} />;\n\nexport const TextAreaExample = Template.bind({});\nTextAreaExample.args = {\n  label: 'Sample label',\n  maxCharacters: 140,\n  defaultValue: 'Sample default value',\n  onChange: fn(),\n};\n"],"names":["codeString","TextArea_stories","TextArea","Template","args","jsx","TextAreaExample","fn"],"mappings":";;;AAOA,MAAMA,IAAa;AAAA,mFAInBC,IAAe;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,OAAO;AAAA,MACL,SAAS;AAAA,IAAA;AAAA,IAEX,eAAe;AAAA,MACb,SAAS;AAAA,IAAA;AAAA,EACX;AAAA,EAEF,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAmC,CAACC,MAAS,gBAAAC,EAACH,GAAA,EAAU,GAAGE,GAAM,GAE1DE,IAAkBH,EAAS,KAAK,CAAA,CAAE;AAC/CG,EAAgB,OAAO;AAAA,EACrB,OAAO;AAAA,EACP,eAAe;AAAA,EACf,cAAc;AAAA,EACd,UAAUC,EAAA;AACZ;"}
+{"version":3,"file":"TextArea.stories.js","sources":["../../../src/components/TextArea/TextArea.stories.tsx"],"sourcesContent":["import { fn } from 'storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { TextAreaProps } from './TextArea';\n\nimport { TextArea } from './TextArea';\n\nconst codeString = `\n  <TextArea label={label} maxCharacters={maxCharacters} defaultValue={string}/> `;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/TextArea',\n  component: TextArea,\n  argTypes: { label: { control: 'text' }, maxCharacters: { control: 'number' } },\n  parameters: { inspectComponent: TextArea, codeString: codeString },\n} as Meta<TextAreaProps>;\n\nconst Template: StoryFn<TextAreaProps> = (args) => <TextArea {...args} />;\n\nexport const TextAreaExample = Template.bind({});\nTextAreaExample.args = {\n  label: 'Sample label',\n  maxCharacters: 140,\n  defaultValue: 'Sample default value',\n  onChange: fn(),\n};\n\nexport const TextAreaSubtitleExample = Template.bind({});\nTextAreaSubtitleExample.args = {\n  label: 'Sample label',\n  subLabel: 'Sample sub label',\n  maxCharacters: 140,\n  defaultValue: 'Sample default value',\n  onChange: fn(),\n};\n"],"names":["codeString","TextArea_stories","TextArea","Template","args","jsx","TextAreaExample","fn","TextAreaSubtitleExample"],"mappings":";;;AAOA,MAAMA,IAAa;AAAA,mFAInBC,IAAe;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU,EAAE,OAAO,EAAE,SAAS,OAAA,GAAU,eAAe,EAAE,SAAS,WAAS;AAAA,EAC3E,YAAY,EAAE,kBAAkBA,GAAU,YAAAF,EAAA;AAC5C,GAEMG,IAAmC,CAACC,MAAS,gBAAAC,EAACH,GAAA,EAAU,GAAGE,GAAM,GAE1DE,IAAkBH,EAAS,KAAK,CAAA,CAAE;AAC/CG,EAAgB,OAAO;AAAA,EACrB,OAAO;AAAA,EACP,eAAe;AAAA,EACf,cAAc;AAAA,EACd,UAAUC,EAAA;AACZ;AAEO,MAAMC,IAA0BL,EAAS,KAAK,CAAA,CAAE;AACvDK,EAAwB,OAAO;AAAA,EAC7B,OAAO;AAAA,EACP,UAAU;AAAA,EACV,eAAe;AAAA,EACf,cAAc;AAAA,EACd,UAAUD,EAAA;AACZ;"}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@uva-glass/component-library",
   "author": "Team Glass - Frontend vrienden",
   "private": false,
-  "version": "3.32.0",
+  "version": "3.33.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -83,14 +83,14 @@
     "react-router": "^7.6.3",
     "semantic-release": "^24.2.6",
     "storybook": "^9.0.14",
-    "style-dictionary": "^5.0.0",
+    "style-dictionary": "^5.0.1",
     "stylelint": "^16.21.0",
     "stylelint-config-recommended": "^16.0.0",
     "stylelint-config-standard": "^38.0.0",
     "stylelint-order": "^7.0.0",
     "ts-node": "^10.9.2",
     "typescript": "^5.8.3",
-    "vite": "^7.0.0",
+    "vite": "^7.0.3",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-lib-inject-css": "^2.2.2",
     "vite-plugin-static-copy": "^3.1.0",
@@ -108,8 +108,8 @@
     "lexical": "^0.32.1"
   },
   "optionalDependencies": {
-    "@ast-grep/napi-linux-x64-gnu": "0.38.6",
-    "@rollup/rollup-linux-x64-gnu": "^4.44.1",
+    "@ast-grep/napi-linux-x64-gnu": "0.38.7",
+    "@rollup/rollup-linux-x64-gnu": "^4.44.2",
     "@rspack/binding-darwin-arm64": "1.4.1",
     "@rspack/binding-linux-x64-gnu": "1.4.1"
   }