@uva-glass/component-library 3.32.0 → 3.32.1

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/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.32.1",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",