@uva-glass/component-library 3.12.0 → 3.13.0

package/dist/assets/InputField.css

@@ -1 +1 @@
-._input-field-wrapper_1h8mk_1{align-items:center;display:flex;position:relative}._input-field_1h8mk_1{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:1px solid;border-radius:.5rem;color:var(--color-black);flex:1;font-family:inherit;font-size:inherit;height:2.75rem;margin:0;padding:0 1rem;text-align:inherit}._input-field--large_1h8mk_22{height:3rem}._input-field--compact_1h8mk_26{max-width:6.25rem}._input-field_1h8mk_1:disabled{color:var(--color-scarpa-flow)}._input-field__clear-button_1h8mk_34{align-items:center;background:none;border:none;cursor:pointer;display:flex;height:100%;padding:0 1rem 0 .5rem;position:absolute;right:0}
+._input-field-wrapper_z4v9l_1{align-items:center;display:flex;position:relative}._input-field_z4v9l_1{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:1px solid;border-radius:.5rem;color:var(--color-black);flex:1;font-family:inherit;font-size:inherit;height:2.75rem;margin:0;padding:0 1rem;text-align:inherit}._input-field--large_z4v9l_22{height:3rem}._input-field--small_z4v9l_26{max-width:5.25rem}._input-field--compact_z4v9l_30{max-width:6.25rem}._input-field--white_z4v9l_34{background-color:var(--color-white)}._input-field_z4v9l_1:disabled{color:var(--color-scarpa-flow)}._input-field__clear-button_z4v9l_42{align-items:center;background:none;border:none;cursor:pointer;display:flex;height:100%;padding:0 1rem 0 .5rem;position:absolute;right:0}

package/dist/assets/variables.css

@@ -41,9 +41,9 @@
   --color-amour: #ffe5ec;
   --color-dandelion: #ffde66;
   --color-natural-wood: #fff6d6;
-  --color-uva-black: #1f1d20;
+  --color-uva-black: #1F1D20;
   --color-uva-red-transparent: rgba(189 0 50 / 10%);
-  --color-electric-violet: #9747ff;
+  --color-electric-violet: #9747FF;
   --color-lemon-grass: #99998a;
   --color-vista-blue: #8feabb;
   --color-medium-aquamarine: #62df9f;
@@ -53,5 +53,5 @@
   --color-columbia-blue: #a1e7fc;
   --color-light-cyan: #e1f8ff;
   --color-lavender-transparent: rgba(235 235 236 / 50%);
-  --color-natural-wool: #fff6d6;
+  --color-natural-wool: #FFF6D6;
 }

package/dist/components/InputField/InputField.d.ts

@@ -1,11 +1,13 @@
 import { InputHTMLAttributes, ReactNode } from 'react';
 export interface InputFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'style'> {
-    /** The variant to render. Possible values: `undefined`, `large`. The default is `undefined`. */
+    /** The variant to render. */
     variant?: 'large';
-    /** The width to render. Possible values: `undefined`, `compact`. The default is `undefined`. */
-    width?: 'compact';
+    /** The width to render. */
+    width?: 'small' | 'compact';
     /** The type of the input element. */
     type?: 'text' | 'password' | 'email';
+    /** The background color of the input. InputField is by default transparent. */
+    background?: 'white';
     /** The id of the input element. */
     id: string;
     /** An element that represents a clear button. */

package/dist/components/InputField/InputField.js

@@ -1,57 +1,61 @@
-import { jsxs as h, jsx as p } from "react/jsx-runtime";
-import { forwardRef as k, useState as b, useRef as g, useEffect as x } from "react";
+import { jsxs as z, jsx as c } from "react/jsx-runtime";
+import { forwardRef as v, useState as b, useRef as g, useEffect as x } from "react";
 import { c as y } from "../../clsx-OuTLNxxd.js";
-import '../../assets/InputField.css';const i = {
-  "input-field-wrapper": "_input-field-wrapper_1h8mk_1",
-  "input-field": "_input-field_1h8mk_1",
-  "input-field--large": "_input-field--large_1h8mk_22",
-  "input-field--compact": "_input-field--compact_1h8mk_26",
-  "input-field__clear-button": "_input-field__clear-button_1h8mk_34"
-}, W = k(
+import '../../assets/InputField.css';const t = {
+  "input-field-wrapper": "_input-field-wrapper_z4v9l_1",
+  "input-field": "_input-field_z4v9l_1",
+  "input-field--large": "_input-field--large_z4v9l_22",
+  "input-field--small": "_input-field--small_z4v9l_26",
+  "input-field--compact": "_input-field--compact_z4v9l_30",
+  "input-field--white": "_input-field--white_z4v9l_34",
+  "input-field__clear-button": "_input-field__clear-button_z4v9l_42"
+}, W = v(
   ({
-    autoComplete: u = "off",
-    id: r,
+    autoComplete: s = "off",
+    id: u,
     value: e,
-    variant: f,
-    width: o,
-    type: s = "text",
-    clearTrigger: n,
-    onClear: c,
+    variant: _,
+    width: p,
+    type: o = "text",
+    background: r,
+    clearTrigger: l,
+    onClear: f,
     ...a
-  }, t) => {
-    const [_, d] = b(0), l = g(null);
+  }, i) => {
+    const [d, m] = b(0), n = g(null);
     x(() => {
-      l.current && d(l.current.offsetWidth);
+      n.current && m(n.current.offsetWidth);
     }, [e]);
-    const m = () => {
-      c && t && "current" in t && t.current && (c(), t.current.focus());
+    const h = () => {
+      f && i && "current" in i && i.current && (f(), i.current.focus());
     };
-    return /* @__PURE__ */ h("div", { className: i["input-field-wrapper"], children: [
-      /* @__PURE__ */ p(
+    return /* @__PURE__ */ z("div", { className: t["input-field-wrapper"], children: [
+      /* @__PURE__ */ c(
         "input",
         {
           ...a,
-          autoComplete: u,
-          ref: t,
-          id: r,
-          className: y(i["input-field"], {
-            [i["input-field--large"]]: f === "large",
-            [i["input-field--compact"]]: o === "compact"
+          autoComplete: s,
+          ref: i,
+          id: u,
+          className: y(t["input-field"], {
+            [t["input-field--large"]]: _ === "large",
+            [t[`input-field--${p}`]]: p,
+            [t[`input-field--${r}`]]: r
           }),
-          type: s,
+          type: o,
           value: e,
-          style: { paddingRight: e && n ? _ : void 0 }
+          style: { paddingRight: e && l ? d : void 0 }
         }
       ),
-      e && n && /* @__PURE__ */ p(
+      e && l && /* @__PURE__ */ c(
         "button",
         {
           type: "button",
-          className: i["input-field__clear-button"],
-          onClick: m,
-          ref: l,
-          "aria-label": `clear trigger for ${r}`,
-          children: n
+          className: t["input-field__clear-button"],
+          onClick: h,
+          ref: n,
+          "aria-label": `clear trigger for ${u}`,
+          children: l
         }
       )
     ] });

package/dist/components/InputField/InputField.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputField.js","sources":["../../../src/components/InputField/InputField.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef, useState } from 'react';\nimport { clsx } from 'clsx';\n\nimport type { InputHTMLAttributes, ReactNode } from 'react';\n\nimport styles from './InputField.module.css';\n\nexport interface InputFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'style'> {\n  /** The variant to render. Possible values: `undefined`, `large`. The default is `undefined`. */\n  variant?: 'large';\n  /** The width to render. Possible values: `undefined`, `compact`. The default is `undefined`. */\n  width?: 'compact';\n  /** The type of the input element. */\n  type?: 'text' | 'password' | 'email';\n  /** The id of the input element. */\n  id: string;\n  /** An element that represents a clear button. */\n  clearTrigger?: ReactNode;\n  /** The callback that is invoked when the clear button is triggered. */\n  onClear?: () => void;\n}\n\n/** Represents a component that renders an input field which can have a clear button. */\nexport const InputField = forwardRef<HTMLInputElement, InputFieldProps>(\n  (\n    {\n      autoComplete = 'off',\n      id,\n      value,\n      variant,\n      width,\n      type = 'text',\n      clearTrigger,\n      onClear,\n      ...restProps\n    }: InputFieldProps,\n    forwardedRef\n  ) => {\n    const [clearButtonWidth, setClearButtonWidth] = useState<number>(0);\n    const clearButtonRef = useRef<HTMLButtonElement>(null);\n\n    useEffect(() => {\n      if (clearButtonRef.current) {\n        setClearButtonWidth(clearButtonRef.current.offsetWidth);\n      }\n    }, [value]);\n\n    const handleClearTriggerClick = () => {\n      if (onClear && forwardedRef && 'current' in forwardedRef && forwardedRef.current) {\n        onClear();\n        forwardedRef.current.focus();\n      }\n    };\n\n    return (\n      <div className={styles['input-field-wrapper']}>\n        <input\n          {...restProps}\n          autoComplete={autoComplete}\n          ref={forwardedRef}\n          id={id}\n          className={clsx(styles['input-field'], {\n            [styles['input-field--large']]: variant === 'large',\n            [styles['input-field--compact']]: width === 'compact',\n          })}\n          type={type}\n          value={value}\n          style={{ paddingRight: value && clearTrigger ? clearButtonWidth : undefined }}\n        />\n        {value && clearTrigger && (\n          <button\n            type=\"button\"\n            className={styles['input-field__clear-button']}\n            onClick={handleClearTriggerClick}\n            ref={clearButtonRef}\n            aria-label={`clear trigger for ${id}`}\n          >\n            {clearTrigger}\n          </button>\n        )}\n      </div>\n    );\n  }\n);\n"],"names":["InputField","forwardRef","autoComplete","id","value","variant","width","type","clearTrigger","onClear","restProps","forwardedRef","clearButtonWidth","setClearButtonWidth","useState","clearButtonRef","useRef","useEffect","handleClearTriggerClick","jsxs","styles","jsx","clsx"],"mappings":";;;;;;;;;GAuBaA,IAAaC;AAAA,EACxB,CACE;AAAA,IACE,cAAAC,IAAe;AAAA,IACf,IAAAC;AAAA,IACA,OAAAC;AAAA,IACA,SAAAC;AAAA,IACA,OAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,cAAAC;AAAA,IACA,SAAAC;AAAA,IACA,GAAGC;AAAA,KAELC,MACG;AACH,UAAM,CAACC,GAAkBC,CAAmB,IAAIC,EAAiB,CAAC,GAC5DC,IAAiBC,EAA0B,IAAI;AAErD,IAAAC,EAAU,MAAM;AACd,MAAIF,EAAe,WACGF,EAAAE,EAAe,QAAQ,WAAW;AAAA,IACxD,GACC,CAACX,CAAK,CAAC;AAEV,UAAMc,IAA0B,MAAM;AACpC,MAAIT,KAAWE,KAAgB,aAAaA,KAAgBA,EAAa,YAC/DF,EAAA,GACRE,EAAa,QAAQ,MAAM;AAAA,IAE/B;AAEA,WACG,gBAAAQ,EAAA,OAAA,EAAI,WAAWC,EAAO,qBAAqB,GAC1C,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UACE,GAAGX;AAAA,UACJ,cAAAR;AAAA,UACA,KAAKS;AAAA,UACL,IAAAR;AAAA,UACA,WAAWmB,EAAKF,EAAO,aAAa,GAAG;AAAA,YACrC,CAACA,EAAO,oBAAoB,CAAC,GAAGf,MAAY;AAAA,YAC5C,CAACe,EAAO,sBAAsB,CAAC,GAAGd,MAAU;AAAA,UAAA,CAC7C;AAAA,UACD,MAAAC;AAAA,UACA,OAAAH;AAAA,UACA,OAAO,EAAE,cAAcA,KAASI,IAAeI,IAAmB,OAAU;AAAA,QAAA;AAAA,MAC9E;AAAA,MACCR,KAASI,KACR,gBAAAa;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAWD,EAAO,2BAA2B;AAAA,UAC7C,SAASF;AAAA,UACT,KAAKH;AAAA,UACL,cAAY,qBAAqBZ,CAAE;AAAA,UAElC,UAAAK;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,GAEJ;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"InputField.js","sources":["../../../src/components/InputField/InputField.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef, useState } from 'react';\nimport { clsx } from 'clsx';\n\nimport type { InputHTMLAttributes, ReactNode } from 'react';\n\nimport styles from './InputField.module.css';\n\nexport interface InputFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'style'> {\n  /** The variant to render. */\n  variant?: 'large';\n  /** The width to render. */\n  width?: 'small' | 'compact';\n  /** The type of the input element. */\n  type?: 'text' | 'password' | 'email';\n  /** The background color of the input. InputField is by default transparent. */\n  background?: 'white';\n  /** The id of the input element. */\n  id: string;\n  /** An element that represents a clear button. */\n  clearTrigger?: ReactNode;\n  /** The callback that is invoked when the clear button is triggered. */\n  onClear?: () => void;\n}\n\n/** Represents a component that renders an input field which can have a clear button. */\nexport const InputField = forwardRef<HTMLInputElement, InputFieldProps>(\n  (\n    {\n      autoComplete = 'off',\n      id,\n      value,\n      variant,\n      width,\n      type = 'text',\n      background,\n      clearTrigger,\n      onClear,\n      ...restProps\n    }: InputFieldProps,\n    forwardedRef\n  ) => {\n    const [clearButtonWidth, setClearButtonWidth] = useState<number>(0);\n    const clearButtonRef = useRef<HTMLButtonElement>(null);\n\n    useEffect(() => {\n      if (clearButtonRef.current) {\n        setClearButtonWidth(clearButtonRef.current.offsetWidth);\n      }\n    }, [value]);\n\n    const handleClearTriggerClick = () => {\n      if (onClear && forwardedRef && 'current' in forwardedRef && forwardedRef.current) {\n        onClear();\n        forwardedRef.current.focus();\n      }\n    };\n\n    return (\n      <div className={styles['input-field-wrapper']}>\n        <input\n          {...restProps}\n          autoComplete={autoComplete}\n          ref={forwardedRef}\n          id={id}\n          className={clsx(styles['input-field'], {\n            [styles['input-field--large']]: variant === 'large',\n            [styles[`input-field--${width}`]]: width,\n            [styles[`input-field--${background}`]]: background,\n          })}\n          type={type}\n          value={value}\n          style={{ paddingRight: value && clearTrigger ? clearButtonWidth : undefined }}\n        />\n        {value && clearTrigger && (\n          <button\n            type=\"button\"\n            className={styles['input-field__clear-button']}\n            onClick={handleClearTriggerClick}\n            ref={clearButtonRef}\n            aria-label={`clear trigger for ${id}`}\n          >\n            {clearTrigger}\n          </button>\n        )}\n      </div>\n    );\n  }\n);\n"],"names":["InputField","forwardRef","autoComplete","id","value","variant","width","type","background","clearTrigger","onClear","restProps","forwardedRef","clearButtonWidth","setClearButtonWidth","useState","clearButtonRef","useRef","useEffect","handleClearTriggerClick","jsxs","styles","jsx","clsx"],"mappings":";;;;;;;;;;;GAyBaA,IAAaC;AAAA,EACxB,CACE;AAAA,IACE,cAAAC,IAAe;AAAA,IACf,IAAAC;AAAA,IACA,OAAAC;AAAA,IACA,SAAAC;AAAA,IACA,OAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,YAAAC;AAAA,IACA,cAAAC;AAAA,IACA,SAAAC;AAAA,IACA,GAAGC;AAAA,KAELC,MACG;AACH,UAAM,CAACC,GAAkBC,CAAmB,IAAIC,EAAiB,CAAC,GAC5DC,IAAiBC,EAA0B,IAAI;AAErD,IAAAC,EAAU,MAAM;AACd,MAAIF,EAAe,WACGF,EAAAE,EAAe,QAAQ,WAAW;AAAA,IACxD,GACC,CAACZ,CAAK,CAAC;AAEV,UAAMe,IAA0B,MAAM;AACpC,MAAIT,KAAWE,KAAgB,aAAaA,KAAgBA,EAAa,YAC/DF,EAAA,GACRE,EAAa,QAAQ,MAAM;AAAA,IAE/B;AAEA,WACG,gBAAAQ,EAAA,OAAA,EAAI,WAAWC,EAAO,qBAAqB,GAC1C,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UACE,GAAGX;AAAA,UACJ,cAAAT;AAAA,UACA,KAAKU;AAAA,UACL,IAAAT;AAAA,UACA,WAAWoB,EAAKF,EAAO,aAAa,GAAG;AAAA,YACrC,CAACA,EAAO,oBAAoB,CAAC,GAAGhB,MAAY;AAAA,YAC5C,CAACgB,EAAO,gBAAgBf,CAAK,EAAE,CAAC,GAAGA;AAAA,YACnC,CAACe,EAAO,gBAAgBb,CAAU,EAAE,CAAC,GAAGA;AAAA,UAAA,CACzC;AAAA,UACD,MAAAD;AAAA,UACA,OAAAH;AAAA,UACA,OAAO,EAAE,cAAcA,KAASK,IAAeI,IAAmB,OAAU;AAAA,QAAA;AAAA,MAC9E;AAAA,MACCT,KAASK,KACR,gBAAAa;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAWD,EAAO,2BAA2B;AAAA,UAC7C,SAASF;AAAA,UACT,KAAKH;AAAA,UACL,cAAY,qBAAqBb,CAAE;AAAA,UAElC,UAAAM;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,GAEJ;AAAA,EAAA;AAGN;"}

package/dist/components/InputField/InputField.stories.js

@@ -1,9 +1,9 @@
-import { jsx as e } from "react/jsx-runtime";
+import { jsx as o } from "react/jsx-runtime";
 import { useState as d, useRef as g } from "react";
-import { fn as p } from "../../index-BCvy9BiK.js";
-import { InputField as o } from "./InputField.js";
+import { fn as l } from "../../index-BCvy9BiK.js";
+import { InputField as e } from "./InputField.js";
 import { Container as u } from "../../storyComponents/Container/Container.js";
-import { Icon as f } from "../Icon/Icon.js";
+import { Icon as h } from "../Icon/Icon.js";
 import "../Buttons/Button.js";
 import "../Buttons/LinkButton.js";
 import "@react-aria/button";
@@ -25,25 +25,33 @@ import "../SelectListbox/SelectListbox.js";
 import "../SelectListbox/SelectProvider.js";
 import "../Sortable/components/SortableItem.js";
 import "../../SortableProvider-DZggDO3M.js";
-const C = `
+const f = `
 // Has all HTMLInputElement props available except "className" and "style" 
 <InputField aria-labelledby={aria-labelledby} id={id} onChange={onChangeFunction}
   value={value} type={type} clearTrigger={clearTrigger} />
-`, h = (t) => {
+`, C = (t) => {
   const r = t.variant ?? [];
   return { ...t, variant: r.toString() };
 }, Q = {
   title: "Atoms/InputField",
-  component: o,
+  component: e,
   argTypes: {
     variant: {
       options: ["large"],
       control: "check"
     },
+    width: {
+      control: "radio",
+      options: [void 0, "small", "compact"]
+    },
     type: {
       control: "radio",
       options: ["text", "password", "email"]
     },
+    background: {
+      control: "check",
+      options: ["white"]
+    },
     id: {
       control: "text"
     },
@@ -54,23 +62,23 @@ const C = `
     }
   },
   parameters: {
-    inspectComponent: o,
-    codeString: C
+    inspectComponent: e,
+    codeString: f
   }
 }, a = (t) => {
-  const [r, n] = d(""), l = g(null), m = (c) => {
-    n(c.target.value), p()("handleChange");
+  const [r, n] = d(""), p = g(null), m = (c) => {
+    n(c.target.value), l()("handleChange");
   }, s = () => {
-    n(""), p()("handleClear");
+    n(""), l()("handleClear");
   };
-  return /* @__PURE__ */ e(u, { children: /* @__PURE__ */ e(
-    o,
+  return /* @__PURE__ */ o(u, { children: /* @__PURE__ */ o(
+    e,
     {
-      ...h(t),
+      ...C(t),
       value: r,
       onChange: m,
       onClear: s,
-      ref: l
+      ref: p
     }
   ) });
 }, i = {
@@ -89,7 +97,7 @@ b.args = {
 const y = a.bind({});
 y.args = {
   ...i,
-  clearTrigger: /* @__PURE__ */ e(f, { name: "Cross" })
+  clearTrigger: /* @__PURE__ */ o(h, { name: "Cross" })
 };
 export {
   v as InputFieldExample,

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

@@ -1 +1 @@
-{"version":3,"file":"InputField.stories.js","sources":["../../../src/components/InputField/InputField.stories.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport { fn } from '@storybook/test';\n\nimport type { ChangeEvent } from 'react';\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { InputFieldProps } from './InputField';\n\nimport { InputField } from './InputField';\n\nimport { Container } from 'storyComponents/Container';\nimport { Icon } from 'components';\n\nconst codeString = `\n// Has all HTMLInputElement props available except \"className\" and \"style\" \n<InputField aria-labelledby={aria-labelledby} id={id} onChange={onChangeFunction}\n  value={value} type={type} clearTrigger={clearTrigger} />\n`;\n\nconst transformArgs = (args: InputFieldProps) => {\n  // args.variant is provided as an array because the control type is set to a checkbox. So this transforms the selected value into its proper value: a string\n  const variantArray = (args.variant as unknown as string[]) ?? [];\n  return { ...args, ...{ variant: variantArray.toString() } } as InputFieldProps;\n};\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/InputField',\n  component: InputField,\n  argTypes: {\n    variant: {\n      options: ['large'],\n      control: 'check',\n    },\n    type: {\n      control: 'radio',\n      options: ['text', 'password', 'email'],\n    },\n    id: {\n      control: 'text',\n    },\n    autoComplete: {\n      table: {\n        disable: true,\n      },\n    },\n  },\n  parameters: {\n    inspectComponent: InputField,\n    codeString: codeString,\n  },\n} as Meta<InputFieldProps>;\n\nconst Template: StoryFn<InputFieldProps> = (args) => {\n  const [inputValue, setInputValue] = useState<InputFieldProps['value']>('');\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    setInputValue(event.target.value);\n    fn()('handleChange');\n  };\n\n  const handleClear = () => {\n    setInputValue('');\n    fn()('handleClear');\n  };\n\n  return (\n    <Container>\n      <InputField\n        {...transformArgs(args)}\n        value={inputValue}\n        onChange={handleChange}\n        onClear={handleClear}\n        ref={inputRef}\n      />\n    </Container>\n  );\n};\n\nconst defaultArgs: Partial<InputFieldProps> = {\n  type: 'text',\n  variant: undefined,\n  id: '4f9ca77d',\n};\n\nexport const InputFieldExample = Template.bind({});\nInputFieldExample.args = {\n  ...defaultArgs,\n};\n\nexport const WithStringClearTrigger = Template.bind({});\nWithStringClearTrigger.args = {\n  ...defaultArgs,\n  clearTrigger: 'Clear',\n};\n\nexport const WithIconClearTrigger = Template.bind({});\nWithIconClearTrigger.args = {\n  ...defaultArgs,\n  clearTrigger: <Icon name=\"Cross\" />,\n};\n"],"names":["codeString","transformArgs","args","variantArray","InputField_stories","InputField","Template","inputValue","setInputValue","useState","inputRef","useRef","handleChange","event","fn","handleClear","Container","jsx","defaultArgs","InputFieldExample","WithStringClearTrigger","WithIconClearTrigger","Icon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAYA,MAAMA,IAAa;AAAA;AAAA;AAAA;AAAA,GAMbC,IAAgB,CAACC,MAA0B;AAEzC,QAAAC,IAAgBD,EAAK,WAAmC,CAAC;AACxD,SAAA,EAAE,GAAGA,GAAW,SAASC,EAAa,SAAS,EAAI;AAC5D,GAGeC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS,CAAC,OAAO;AAAA,MACjB,SAAS;AAAA,IACX;AAAA,IACA,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,SAAS,CAAC,QAAQ,YAAY,OAAO;AAAA,IACvC;AAAA,IACA,IAAI;AAAA,MACF,SAAS;AAAA,IACX;AAAA,IACA,cAAc;AAAA,MACZ,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EAEJ;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAL;AAAA,EAAA;AAEJ,GAEMM,IAAqC,CAACJ,MAAS;AACnD,QAAM,CAACK,GAAYC,CAAa,IAAIC,EAAmC,EAAE,GACnEC,IAAWC,EAAyB,IAAI,GAExCC,IAAe,CAACC,MAAyC;AAC/C,IAAAL,EAAAK,EAAM,OAAO,KAAK,GAChCC,EAAA,EAAK,cAAc;AAAA,EACrB,GAEMC,IAAc,MAAM;AACxB,IAAAP,EAAc,EAAE,GAChBM,EAAA,EAAK,aAAa;AAAA,EACpB;AAEA,2BACGE,GACC,EAAA,UAAA,gBAAAC;AAAA,IAACZ;AAAA,IAAA;AAAA,MACE,GAAGJ,EAAcC,CAAI;AAAA,MACtB,OAAOK;AAAA,MACP,UAAUK;AAAA,MACV,SAASG;AAAA,MACT,KAAKL;AAAA,IAAA;AAAA,EAAA,GAET;AAEJ,GAEMQ,IAAwC;AAAA,EAC5C,MAAM;AAAA,EACN,SAAS;AAAA,EACT,IAAI;AACN,GAEaC,IAAoBb,EAAS,KAAK,CAAE,CAAA;AACjDa,EAAkB,OAAO;AAAA,EACvB,GAAGD;AACL;AAEO,MAAME,IAAyBd,EAAS,KAAK,CAAE,CAAA;AACtDc,EAAuB,OAAO;AAAA,EAC5B,GAAGF;AAAA,EACH,cAAc;AAChB;AAEO,MAAMG,IAAuBf,EAAS,KAAK,CAAE,CAAA;AACpDe,EAAqB,OAAO;AAAA,EAC1B,GAAGH;AAAA,EACH,cAAc,gBAAAD,EAACK,GAAK,EAAA,MAAK,QAAQ,CAAA;AACnC;"}
+{"version":3,"file":"InputField.stories.js","sources":["../../../src/components/InputField/InputField.stories.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport { fn } from '@storybook/test';\n\nimport type { ChangeEvent } from 'react';\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { InputFieldProps } from './InputField';\n\nimport { InputField } from './InputField';\n\nimport { Container } from 'storyComponents/Container';\nimport { Icon } from 'components';\n\nconst codeString = `\n// Has all HTMLInputElement props available except \"className\" and \"style\" \n<InputField aria-labelledby={aria-labelledby} id={id} onChange={onChangeFunction}\n  value={value} type={type} clearTrigger={clearTrigger} />\n`;\n\nconst transformArgs = (args: InputFieldProps) => {\n  // args.variant is provided as an array because the control type is set to a checkbox. So this transforms the selected value into its proper value: a string\n  const variantArray = (args.variant as unknown as string[]) ?? [];\n  return { ...args, ...{ variant: variantArray.toString() } } as InputFieldProps;\n};\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/InputField',\n  component: InputField,\n  argTypes: {\n    variant: {\n      options: ['large'],\n      control: 'check',\n    },\n    width: {\n      control: 'radio',\n      options: [undefined, 'small', 'compact'],\n    },\n    type: {\n      control: 'radio',\n      options: ['text', 'password', 'email'],\n    },\n    background: {\n      control: 'check',\n      options: ['white'],\n    },\n    id: {\n      control: 'text',\n    },\n    autoComplete: {\n      table: {\n        disable: true,\n      },\n    },\n  },\n  parameters: {\n    inspectComponent: InputField,\n    codeString: codeString,\n  },\n} as Meta<InputFieldProps>;\n\nconst Template: StoryFn<InputFieldProps> = (args) => {\n  const [inputValue, setInputValue] = useState<InputFieldProps['value']>('');\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    setInputValue(event.target.value);\n    fn()('handleChange');\n  };\n\n  const handleClear = () => {\n    setInputValue('');\n    fn()('handleClear');\n  };\n\n  return (\n    <Container>\n      <InputField\n        {...transformArgs(args)}\n        value={inputValue}\n        onChange={handleChange}\n        onClear={handleClear}\n        ref={inputRef}\n      />\n    </Container>\n  );\n};\n\nconst defaultArgs: Partial<InputFieldProps> = {\n  type: 'text',\n  variant: undefined,\n  id: '4f9ca77d',\n};\n\nexport const InputFieldExample = Template.bind({});\nInputFieldExample.args = {\n  ...defaultArgs,\n};\n\nexport const WithStringClearTrigger = Template.bind({});\nWithStringClearTrigger.args = {\n  ...defaultArgs,\n  clearTrigger: 'Clear',\n};\n\nexport const WithIconClearTrigger = Template.bind({});\nWithIconClearTrigger.args = {\n  ...defaultArgs,\n  clearTrigger: <Icon name=\"Cross\" />,\n};\n"],"names":["codeString","transformArgs","args","variantArray","InputField_stories","InputField","Template","inputValue","setInputValue","useState","inputRef","useRef","handleChange","event","fn","handleClear","Container","jsx","defaultArgs","InputFieldExample","WithStringClearTrigger","WithIconClearTrigger","Icon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAYA,MAAMA,IAAa;AAAA;AAAA;AAAA;AAAA,GAMbC,IAAgB,CAACC,MAA0B;AAEzC,QAAAC,IAAgBD,EAAK,WAAmC,CAAC;AACxD,SAAA,EAAE,GAAGA,GAAW,SAASC,EAAa,SAAS,EAAI;AAC5D,GAGeC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS,CAAC,OAAO;AAAA,MACjB,SAAS;AAAA,IACX;AAAA,IACA,OAAO;AAAA,MACL,SAAS;AAAA,MACT,SAAS,CAAC,QAAW,SAAS,SAAS;AAAA,IACzC;AAAA,IACA,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,SAAS,CAAC,QAAQ,YAAY,OAAO;AAAA,IACvC;AAAA,IACA,YAAY;AAAA,MACV,SAAS;AAAA,MACT,SAAS,CAAC,OAAO;AAAA,IACnB;AAAA,IACA,IAAI;AAAA,MACF,SAAS;AAAA,IACX;AAAA,IACA,cAAc;AAAA,MACZ,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EAEJ;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAL;AAAA,EAAA;AAEJ,GAEMM,IAAqC,CAACJ,MAAS;AACnD,QAAM,CAACK,GAAYC,CAAa,IAAIC,EAAmC,EAAE,GACnEC,IAAWC,EAAyB,IAAI,GAExCC,IAAe,CAACC,MAAyC;AAC/C,IAAAL,EAAAK,EAAM,OAAO,KAAK,GAChCC,EAAA,EAAK,cAAc;AAAA,EACrB,GAEMC,IAAc,MAAM;AACxB,IAAAP,EAAc,EAAE,GAChBM,EAAA,EAAK,aAAa;AAAA,EACpB;AAEA,2BACGE,GACC,EAAA,UAAA,gBAAAC;AAAA,IAACZ;AAAA,IAAA;AAAA,MACE,GAAGJ,EAAcC,CAAI;AAAA,MACtB,OAAOK;AAAA,MACP,UAAUK;AAAA,MACV,SAASG;AAAA,MACT,KAAKL;AAAA,IAAA;AAAA,EAAA,GAET;AAEJ,GAEMQ,IAAwC;AAAA,EAC5C,MAAM;AAAA,EACN,SAAS;AAAA,EACT,IAAI;AACN,GAEaC,IAAoBb,EAAS,KAAK,CAAE,CAAA;AACjDa,EAAkB,OAAO;AAAA,EACvB,GAAGD;AACL;AAEO,MAAME,IAAyBd,EAAS,KAAK,CAAE,CAAA;AACtDc,EAAuB,OAAO;AAAA,EAC5B,GAAGF;AAAA,EACH,cAAc;AAChB;AAEO,MAAMG,IAAuBf,EAAS,KAAK,CAAE,CAAA;AACpDe,EAAqB,OAAO;AAAA,EAC1B,GAAGH;AAAA,EACH,cAAc,gBAAAD,EAACK,GAAK,EAAA,MAAK,QAAQ,CAAA;AACnC;"}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@uva-glass/component-library",
   "author": "Team Glass - Frontend vrienden",
   "private": false,
-  "version": "3.12.0",
+  "version": "3.13.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -74,7 +74,7 @@
     "babel-plugin-transform-vite-meta-env": "^1.0.3",
     "clsx": "^2.1.1",
     "eslint-plugin-react-hooks": "^6.0.0",
-    "glob": "^11.0.1",
+    "glob": "^11.0.2",
     "husky": "^9.1.7",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
@@ -88,7 +88,7 @@
     "semantic-release": "^24.2.3",
     "storybook": "^8.6.12",
     "style-dictionary": "^4.3.3",
-    "stylelint": "^16.18.0",
+    "stylelint": "^16.19.0",
     "stylelint-config-recommended": "^16.0.0",
     "stylelint-config-standard": "^38.0.0",
     "stylelint-order": "^7.0.0",
@@ -99,7 +99,7 @@
     "vite-plugin-static-copy": "^2.3.1",
     "vite-plugin-svgr": "^4.3.0",
     "vite-tsconfig-paths": "^5.1.4",
-    "vite": "^6.3.2"
+    "vite": "^6.3.3"
   },
   "dependencies": {
     "@babel/preset-env": "^7.26.9",
@@ -113,8 +113,8 @@
   },
   "optionalDependencies": {
     "@rollup/rollup-linux-x64-gnu": "^4.40.0",
-    "@rspack/binding-darwin-arm64": "1.3.5",
-    "@rspack/binding-linux-x64-gnu": "1.3.5",
+    "@rspack/binding-darwin-arm64": "1.3.6",
+    "@rspack/binding-linux-x64-gnu": "1.3.6",
     "@ast-grep/napi-linux-x64-gnu": "0.37.0"
   }
 }