@uva-glass/component-library 1.6.0 → 1.8.0

package/dist/assets/FieldHint.css

@@ -0,0 +1 @@
+._field-hint_f5ej1_1{font-size:.875rem}

package/dist/assets/Input.css

@@ -0,0 +1 @@
+._input_96vyw_1{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:1px solid var(--color-black);color:var(--color-black);font-family:inherit;font-size:inherit;height:2rem;margin:0;padding:0 .5rem}._input--numeric_96vyw_13{text-align:right;width:8rem}._input--error_96vyw_18,._input_96vyw_1:invalid{border-color:var(--color-chilean-fire)}._input--full-with_96vyw_23{min-width:100%;width:0}._input_96vyw_1::placeholder{color:var(--color-black-transparent);font-size:inherit;opacity:1}._input_96vyw_1[type=file]{border:none}._input_96vyw_1:disabled{color:var(--color-black-transparent)}

package/dist/assets/InputField.css

@@ -0,0 +1 @@
+.form{width:20%}.form-field{display:flex;flex-direction:column;gap:.5rem 1rem}

package/dist/assets/InputField2.css

@@ -0,0 +1 @@
+._input-field_16tae_1{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:1px solid;border-radius:.5rem;color:var(--color-black);font-family:inherit;font-size:inherit;height:2.75rem;margin:0;padding:0 .5rem;text-align:inherit}._input-field--large_16tae_15{height:3rem}._input-field_16tae_1:disabled{color:var(--color-scarpa-flow)}

package/dist/assets/Label.css

@@ -0,0 +1 @@
+._label_18mqr_1{font-weight:var(--semibold);text-align:left}

package/dist/components/IconButton/IconButton.stories.js

@@ -1,10 +1,10 @@
-import { jsx as t } from "react/jsx-runtime";
+import { jsx as o } from "react/jsx-runtime";
 import { f as a } from "../../index-Ca2Q7D5u.js";
-import { IconButton as o } from "./IconButton.js";
-import { Icon as n } from "../Icon/Icon.js";
-const f = {
+import { IconButton as e } from "./IconButton.js";
+import { Icon as l } from "../Icon/Icon.js";
+const m = {
   title: "Atoms/IconButton",
-  component: o,
+  component: e,
   argTypes: {
     variant: {
       options: ["destructive"],
@@ -33,18 +33,21 @@ const f = {
       }
     }
   }
-}, r = (e) => /* @__PURE__ */ t(o, { ...e }), l = r.bind({});
-l.args = {
+}, s = (t) => {
+  const n = t.variant ?? [], r = { ...t, variant: n.toString() };
+  return /* @__PURE__ */ o(e, { ...r });
+}, i = s.bind({});
+i.args = {
   "aria-label": "Trash",
   variant: "destructive",
   noBorder: !1,
   wide: !1,
   disabled: !1,
-  children: /* @__PURE__ */ t(n, { name: "Trash" }),
+  children: /* @__PURE__ */ o(l, { name: "Trash" }),
   onClick: a()
 };
 export {
-  l as IconButtonExample,
-  f as default
+  i as IconButtonExample,
+  m as default
 };
 //# sourceMappingURL=IconButton.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"IconButton.stories.js","sources":["../../../src/components/IconButton/IconButton.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { IconButtonProps } from 'components/IconButton';\n\nimport { IconButton } from 'components/IconButton';\nimport { Icon } from 'components/Icon';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/IconButton',\n  component: IconButton,\n  argTypes: {\n    variant: {\n      options: ['destructive'],\n      control: { type: 'check' },\n    },\n    noBorder: {\n      control: 'boolean',\n      default: false,\n    },\n    wide: {\n      control: 'boolean',\n      default: false,\n    },\n    'aria-label': {\n      table: {\n        disable: true,\n      },\n    },\n    type: {\n      options: ['button', 'submit', 'reset'],\n      control: { type: 'select' },\n    },\n    children: {\n      table: {\n        disable: true,\n      },\n    },\n  },\n} as Meta<IconButtonProps>;\n\nconst Template: StoryFn<IconButtonProps> = (args) => <IconButton {...args} />;\n\nexport const IconButtonExample = Template.bind({});\nIconButtonExample.args = {\n  'aria-label': 'Trash',\n  variant: 'destructive',\n  noBorder: false,\n  wide: false,\n  disabled: false,\n  children: <Icon name=\"Trash\" />,\n  onClick: fn(),\n};\n"],"names":["IconButton_stories","IconButton","Template","args","jsx","IconButtonExample","Icon","fn"],"mappings":";;;;AASA,MAAeA,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS,CAAC,aAAa;AAAA,MACvB,SAAS,EAAE,MAAM,QAAQ;AAAA,IAC3B;AAAA,IACA,UAAU;AAAA,MACR,SAAS;AAAA,MACT,SAAS;AAAA,IACX;AAAA,IACA,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,SAAS;AAAA,IACX;AAAA,IACA,cAAc;AAAA,MACZ,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,MAAM;AAAA,MACJ,SAAS,CAAC,UAAU,UAAU,OAAO;AAAA,MACrC,SAAS,EAAE,MAAM,SAAS;AAAA,IAC5B;AAAA,IACA,UAAU;AAAA,MACR,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AACF,GAEMC,IAAqC,CAACC,MAAU,gBAAAC,EAAAH,GAAA,EAAY,GAAGE,EAAM,CAAA,GAE9DE,IAAoBH,EAAS,KAAK,EAAE;AACjDG,EAAkB,OAAO;AAAA,EACvB,cAAc;AAAA,EACd,SAAS;AAAA,EACT,UAAU;AAAA,EACV,MAAM;AAAA,EACN,UAAU;AAAA,EACV,UAAU,gBAAAD,EAACE,GAAK,EAAA,MAAK,QAAQ,CAAA;AAAA,EAC7B,SAASC,EAAG;AACd;"}
+{"version":3,"file":"IconButton.stories.js","sources":["../../../src/components/IconButton/IconButton.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { IconButtonProps } from 'components/IconButton';\n\nimport { IconButton } from 'components/IconButton';\nimport { Icon } from 'components/Icon';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/IconButton',\n  component: IconButton,\n  argTypes: {\n    variant: {\n      options: ['destructive'],\n      control: { type: 'check' },\n    },\n    noBorder: {\n      control: 'boolean',\n      default: false,\n    },\n    wide: {\n      control: 'boolean',\n      default: false,\n    },\n    'aria-label': {\n      table: {\n        disable: true,\n      },\n    },\n    type: {\n      options: ['button', 'submit', 'reset'],\n      control: { type: 'select' },\n    },\n    children: {\n      table: {\n        disable: true,\n      },\n    },\n  },\n} as Meta<IconButtonProps>;\n\nconst Template: StoryFn<IconButtonProps> = (args) => {\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  const iconButtonArgs = { ...args, ...{ variant: variantArray.toString() } } as IconButtonProps;\n\n  return <IconButton {...iconButtonArgs} />;\n};\n\nexport const IconButtonExample = Template.bind({});\nIconButtonExample.args = {\n  'aria-label': 'Trash',\n  variant: 'destructive',\n  noBorder: false,\n  wide: false,\n  disabled: false,\n  children: <Icon name=\"Trash\" />,\n  onClick: fn(),\n};\n"],"names":["IconButton_stories","IconButton","Template","args","variantArray","iconButtonArgs","jsx","IconButtonExample","Icon","fn"],"mappings":";;;;AASA,MAAeA,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS,CAAC,aAAa;AAAA,MACvB,SAAS,EAAE,MAAM,QAAQ;AAAA,IAC3B;AAAA,IACA,UAAU;AAAA,MACR,SAAS;AAAA,MACT,SAAS;AAAA,IACX;AAAA,IACA,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,SAAS;AAAA,IACX;AAAA,IACA,cAAc;AAAA,MACZ,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,MAAM;AAAA,MACJ,SAAS,CAAC,UAAU,UAAU,OAAO;AAAA,MACrC,SAAS,EAAE,MAAM,SAAS;AAAA,IAC5B;AAAA,IACA,UAAU;AAAA,MACR,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AACF,GAEMC,IAAqC,CAACC,MAAS;AAE7C,QAAAC,IAAgBD,EAAK,WAAmC,IACxDE,IAAiB,EAAE,GAAGF,GAAW,SAASC,EAAa,SAAS;AAE/D,SAAA,gBAAAE,EAACL,GAAY,EAAA,GAAGI,EAAgB,CAAA;AACzC,GAEaE,IAAoBL,EAAS,KAAK,EAAE;AACjDK,EAAkB,OAAO;AAAA,EACvB,cAAc;AAAA,EACd,SAAS;AAAA,EACT,UAAU;AAAA,EACV,MAAM;AAAA,EACN,UAAU;AAAA,EACV,UAAU,gBAAAD,EAACE,GAAK,EAAA,MAAK,QAAQ,CAAA;AAAA,EAC7B,SAASC,EAAG;AACd;"}

package/dist/components/Input/Input.d.ts

@@ -0,0 +1,10 @@
+import { InputHTMLAttributes } from 'react';
+
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'style'> {
+    appearance?: 'error';
+    type?: 'text' | 'search' | 'password' | 'email' | 'file';
+    fullWidth?: boolean;
+    id: string;
+    isNumeric?: boolean;
+}
+export declare const Input: import('react').ForwardRefExoticComponent<InputProps & import('react').RefAttributes<HTMLInputElement>>;

package/dist/components/Input/Input.js

@@ -0,0 +1,28 @@
+import { jsx as _ } from "react/jsx-runtime";
+import { forwardRef as c } from "react";
+import { c as f } from "../../clsx-DB4S2d7J.js";
+import '../../assets/Input.css';const m = "_input_96vyw_1", t = {
+  input: m,
+  "input--numeric": "_input--numeric_96vyw_13",
+  "input--error": "_input--error_96vyw_18",
+  "input--full-with": "_input--full-with_96vyw_23"
+}, a = c(function({ id: r, appearance: n, type: i = "text", isNumeric: u, fullWidth: p, ...o }, e) {
+  return /* @__PURE__ */ _(
+    "input",
+    {
+      ...o,
+      ref: e,
+      id: r,
+      className: f(t.input, {
+        [t["input--error"]]: n === "error",
+        [t["input--full-with"]]: p,
+        [t["input--numeric"]]: u
+      }),
+      type: i
+    }
+  );
+});
+export {
+  a as Input
+};
+//# sourceMappingURL=Input.js.map

package/dist/components/Input/Input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","sources":["../../../src/components/Input/Input.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { clsx } from 'clsx';\n\nimport type { InputHTMLAttributes } from 'react';\n\nimport styles from './Input.module.css';\n\nexport interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'style'> {\n  appearance?: 'error';\n  type?: 'text' | 'search' | 'password' | 'email' | 'file';\n  fullWidth?: boolean;\n  id: string;\n  isNumeric?: boolean;\n}\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(function Input(\n  { id, appearance, type = 'text', isNumeric, fullWidth, ...restProps }: InputProps,\n  forwardedRef\n) {\n  return (\n    <input\n      {...restProps}\n      ref={forwardedRef}\n      id={id}\n      className={clsx(styles['input'], {\n        [styles['input--error']]: appearance === 'error',\n        [styles['input--full-with']]: fullWidth,\n        [styles['input--numeric']]: isNumeric,\n      })}\n      type={type}\n    />\n  );\n});\n"],"names":["Input","forwardRef","id","appearance","type","isNumeric","fullWidth","restProps","forwardedRef","jsx","clsx","styles"],"mappings":";;;;;;;;GAeaA,IAAQC,EAAyC,SAC5D,EAAE,IAAAC,GAAI,YAAAC,GAAY,MAAAC,IAAO,QAAQ,WAAAC,GAAW,WAAAC,GAAW,GAAGC,EAAA,GAC1DC,GACA;AAEE,SAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGF;AAAA,MACJ,KAAKC;AAAA,MACL,IAAAN;AAAA,MACA,WAAWQ,EAAKC,EAAO,OAAU;AAAA,QAC/B,CAACA,EAAO,cAAc,CAAC,GAAGR,MAAe;AAAA,QACzC,CAACQ,EAAO,kBAAkB,CAAC,GAAGL;AAAA,QAC9B,CAACK,EAAO,gBAAgB,CAAC,GAAGN;AAAA,MAAA,CAC7B;AAAA,MACD,MAAAD;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}

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

@@ -0,0 +1,8 @@
+import { InputProps } from './Input';
+
+declare const _default: import('@storybook/types').ComponentAnnotations<import('@storybook/react').ReactRenderer, InputProps>;
+export default _default;
+export declare const InputExample: import('@storybook/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, InputProps>;
+export declare const FullWidth: import('@storybook/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, InputProps>;
+export declare const Numeric: import('@storybook/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, InputProps>;
+export declare const WithErrorAppearance: import('@storybook/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, InputProps>;

package/dist/components/Input/Input.stories.js

@@ -0,0 +1,41 @@
+import { jsx as a } from "react/jsx-runtime";
+import { Input as r } from "./Input.js";
+const u = {
+  title: "Atoms/Input",
+  component: r,
+  argTypes: {
+    appearance: {
+      table: {
+        disable: !0
+      }
+    },
+    type: {
+      control: "inline-radio"
+    }
+  },
+  args: {
+    id: "30daa7c7",
+    type: "text"
+  }
+}, t = (e) => /* @__PURE__ */ a(r, { ...e }), n = t.bind({});
+n.args = {};
+const o = t.bind({});
+o.args = {
+  fullWidth: !0
+};
+const i = t.bind({});
+i.args = {
+  isNumeric: !0
+};
+const p = t.bind({});
+p.args = {
+  appearance: "error"
+};
+export {
+  o as FullWidth,
+  n as InputExample,
+  i as Numeric,
+  p as WithErrorAppearance,
+  u as default
+};
+//# sourceMappingURL=Input.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Input.stories.js","sources":["../../../src/components/Input/Input.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { InputProps } from './Input';\n\nimport { Input } from './Input';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/Input',\n  component: Input,\n  argTypes: {\n    appearance: {\n      table: {\n        disable: true,\n      },\n    },\n    type: {\n      control: 'inline-radio',\n    },\n  },\n  args: {\n    id: '30daa7c7',\n    type: 'text',\n  },\n} as Meta<InputProps>;\n\nconst Template: StoryFn<InputProps> = (args) => {\n  return <Input {...args} />;\n};\n\nexport const InputExample = Template.bind({});\nInputExample.args = {};\n\nexport const FullWidth = Template.bind({});\nFullWidth.args = {\n  fullWidth: true,\n};\n\nexport const Numeric = Template.bind({});\nNumeric.args = {\n  isNumeric: true,\n};\n\nexport const WithErrorAppearance = Template.bind({});\nWithErrorAppearance.args = {\n  appearance: 'error',\n};\n"],"names":["Input_stories","Input","Template","args","jsx","InputExample","FullWidth","Numeric","WithErrorAppearance"],"mappings":";;AAMA,MAAeA,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,YAAY;AAAA,MACV,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,MAAM;AAAA,MACJ,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EACA,MAAM;AAAA,IACJ,IAAI;AAAA,IACJ,MAAM;AAAA,EACR;AACF,GAEMC,IAAgC,CAACC,MAC9B,gBAAAC,EAACH,GAAO,EAAA,GAAGE,EAAM,CAAA,GAGbE,IAAeH,EAAS,KAAK,EAAE;AAC5CG,EAAa,OAAO,CAAA;AAEb,MAAMC,IAAYJ,EAAS,KAAK,EAAE;AACzCI,EAAU,OAAO;AAAA,EACf,WAAW;AACb;AAEO,MAAMC,IAAUL,EAAS,KAAK,EAAE;AACvCK,EAAQ,OAAO;AAAA,EACb,WAAW;AACb;AAEO,MAAMC,IAAsBN,EAAS,KAAK,EAAE;AACnDM,EAAoB,OAAO;AAAA,EACzB,YAAY;AACd;"}

package/dist/components/Input/index.d.ts

@@ -0,0 +1 @@
+export * from './Input';

package/dist/components/Input/index.js

@@ -0,0 +1,5 @@
+import { Input as r } from "./Input.js";
+export {
+  r as Input
+};
+//# sourceMappingURL=index.js.map

package/dist/components/Input/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

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

@@ -0,0 +1,12 @@
+import { InputHTMLAttributes } from 'react';
+
+export interface InputFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'style'> {
+    variant?: 'large';
+    hint?: string;
+    spinnerAriaValueText: string;
+    isHintLoading?: boolean;
+    type?: 'text' | 'search' | 'password' | 'email';
+    autoComplete?: 'off';
+    id: string;
+}
+export declare const InputField: import('react').ForwardRefExoticComponent<InputFieldProps & import('react').RefAttributes<HTMLInputElement>>;

package/dist/components/InputField/InputField.js

@@ -0,0 +1,29 @@
+import { jsxs as m, Fragment as s, jsx as r } from "react/jsx-runtime";
+import { forwardRef as u } from "react";
+import { c } from "../../clsx-DB4S2d7J.js";
+import { FieldHint as _ } from "./components/FieldHint.js";
+import '../../assets/InputField2.css';const i = {
+  "input-field": "_input-field_16tae_1",
+  "input-field--large": "_input-field--large_16tae_15"
+}, v = u(
+  ({ autoComplete: l = "off", id: f, variant: o, hint: e, isHintLoading: t, spinnerAriaValueText: p, type: a = "text", ...n }, d) => /* @__PURE__ */ m(s, { children: [
+    /* @__PURE__ */ r(
+      "input",
+      {
+        ...n,
+        autoComplete: l,
+        ref: d,
+        id: f,
+        className: c(i["input-field"], {
+          [i["input-field--large"]]: o === "large"
+        }),
+        type: a
+      }
+    ),
+    (e || t) && /* @__PURE__ */ r(_, { loading: t, spinnerAriaValueText: p, value: e })
+  ] })
+);
+export {
+  v as InputField
+};
+//# sourceMappingURL=InputField.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InputField.js","sources":["../../../src/components/InputField/InputField.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { clsx } from 'clsx';\n\nimport type { InputHTMLAttributes } from 'react';\n\nimport styles from './InputField.module.css';\nimport { FieldHint } from './components/FieldHint';\n\nexport interface InputFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'style'> {\n  variant?: 'large';\n  hint?: string;\n  spinnerAriaValueText: string;\n  isHintLoading?: boolean;\n  type?: 'text' | 'search' | 'password' | 'email';\n  autoComplete?: 'off'\n  id: string;\n}\n\nexport const InputField = forwardRef<HTMLInputElement, InputFieldProps>(\n  (\n    { autoComplete = 'off', id, variant, hint, isHintLoading, spinnerAriaValueText, type = 'text', ...restProps }: InputFieldProps,\n    forwardedRef\n  ) => {\n    return (\n      <>\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          })}\n          type={type}\n        />\n        {(hint || isHintLoading) && <FieldHint loading={isHintLoading} spinnerAriaValueText={spinnerAriaValueText} value={hint} />}\n      </>\n    );\n  }\n);\n"],"names":["InputField","forwardRef","autoComplete","id","variant","hint","isHintLoading","spinnerAriaValueText","type","restProps","forwardedRef","jsxs","Fragment","jsx","clsx","styles","FieldHint"],"mappings":";;;;;;;GAkBaA,IAAaC;AAAA,EACxB,CACE,EAAE,cAAAC,IAAe,OAAO,IAAAC,GAAI,SAAAC,GAAS,MAAAC,GAAM,eAAAC,GAAe,sBAAAC,GAAsB,MAAAC,IAAO,QAAQ,GAAGC,EAAA,GAClGC,MAII,gBAAAC,EAAAC,GAAA,EAAA,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAGJ;AAAA,QACJ,cAAAP;AAAA,QACA,KAAKQ;AAAA,QACL,IAAAP;AAAA,QACA,WAAWW,EAAKC,EAAO,aAAa,GAAG;AAAA,UACrC,CAACA,EAAO,oBAAoB,CAAC,GAAGX,MAAY;AAAA,QAAA,CAC7C;AAAA,QACD,MAAAI;AAAA,MAAA;AAAA,IACF;AAAA,KACEH,KAAQC,MAAmB,gBAAAO,EAAAG,GAAA,EAAU,SAASV,GAAe,sBAAAC,GAA4C,OAAOF,GAAM;AAAA,EAC1H,EAAA,CAAA;AAGN;"}

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

@@ -0,0 +1,7 @@
+import { InputFieldProps } from './InputField';
+
+declare const _default: import('@storybook/types').ComponentAnnotations<import('@storybook/react').ReactRenderer, InputFieldProps>;
+export default _default;
+export declare const InputFieldExample: import('@storybook/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, InputFieldProps>;
+export declare const WithHint: import('@storybook/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, InputFieldProps>;
+export declare const WithLoadingHint: import('@storybook/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, InputFieldProps>;

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

@@ -0,0 +1,65 @@
+import { jsx as o } from "react/jsx-runtime";
+import { InputField as e } from "./InputField.js";
+import '../../assets/InputField.css';const r = (t) => {
+  const a = t.variant ?? [];
+  return { ...t, variant: a.toString() };
+}, m = {
+  title: "Atoms/InputField",
+  component: e,
+  argTypes: {
+    variant: {
+      options: ["large"],
+      control: "check"
+    },
+    hint: {
+      control: "text"
+    },
+    spinnerAriaValueText: {
+      control: "text"
+    },
+    isHintLoading: {
+      control: Boolean,
+      table: {
+        disable: !0
+      }
+    },
+    type: {
+      control: "radio",
+      options: ["text", "search", "password", "email"]
+    },
+    id: {
+      control: "text"
+    },
+    autoComplete: {
+      control: "radio",
+      options: ["off"]
+    }
+  }
+}, n = (t) => /* @__PURE__ */ o("div", { className: "form", children: /* @__PURE__ */ o("div", { className: "form-field", children: /* @__PURE__ */ o(e, { ...r(t) }) }) }), i = {
+  type: "text",
+  variant: void 0,
+  hint: void 0,
+  spinnerAriaValueText: "Loading",
+  autoComplete: "off",
+  id: "4f9ca77d"
+}, s = n.bind({});
+s.args = {
+  ...i
+};
+const l = n.bind({});
+l.args = {
+  ...i,
+  hint: "Example hint"
+};
+const d = n.bind({});
+d.args = {
+  ...i,
+  isHintLoading: !0
+};
+export {
+  s as InputFieldExample,
+  l as WithHint,
+  d as WithLoadingHint,
+  m as default
+};
+//# sourceMappingURL=InputField.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InputField.stories.js","sources":["../../../src/components/InputField/InputField.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { InputFieldProps } from './InputField';\n\nimport './InputField.stories.css';\n\nimport { InputField } from './InputField';\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    hint: {\n      control: 'text',\n    },\n    spinnerAriaValueText: {\n      control: 'text',\n    },\n    isHintLoading: {\n      control: Boolean,\n      table: {\n        disable: true,\n      },\n    },\n    type: {\n      control: 'radio',\n      options: ['text', 'search', 'password', 'email'],\n    },\n    id: {\n      control: 'text',\n    },\n    autoComplete: {\n      control: 'radio',\n      options: ['off'],\n    },\n  },\n} as Meta<InputFieldProps>;\n\nconst Template: StoryFn<InputFieldProps> = (args) => (\n  <div className=\"form\">\n    <div className=\"form-field\">\n      <InputField {...transformArgs(args)} />\n    </div>\n  </div>\n);\n\nconst defaultArgs: Partial<InputFieldProps> = {\n  type: 'text',\n  variant: undefined,\n  hint: undefined,\n  spinnerAriaValueText: 'Loading',\n  autoComplete: 'off',\n  id: '4f9ca77d',\n};\n\nexport const InputFieldExample = Template.bind({});\nInputFieldExample.args = {\n  ...defaultArgs,\n};\n\nexport const WithHint = Template.bind({});\nWithHint.args = {\n  ...defaultArgs,\n  hint: 'Example hint',\n};\n\nexport const WithLoadingHint = Template.bind({});\nWithLoadingHint.args = {\n  ...defaultArgs,\n  isHintLoading: true\n};\n"],"names":["transformArgs","args","variantArray","InputField_stories","InputField","Template","jsx","defaultArgs","InputFieldExample","WithHint","WithLoadingHint"],"mappings":";;AAOA,MAAMA,IAAgB,CAACC,MAA0B;AAEzC,QAAAC,IAAgBD,EAAK,WAAmC;AACvD,SAAA,EAAE,GAAGA,GAAW,SAASC,EAAa,SAAS;AACxD,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,IACX;AAAA,IACA,sBAAsB;AAAA,MACpB,SAAS;AAAA,IACX;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,MACT,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,SAAS,CAAC,QAAQ,UAAU,YAAY,OAAO;AAAA,IACjD;AAAA,IACA,IAAI;AAAA,MACF,SAAS;AAAA,IACX;AAAA,IACA,cAAc;AAAA,MACZ,SAAS;AAAA,MACT,SAAS,CAAC,KAAK;AAAA,IACjB;AAAA,EACF;AACF,GAEMC,IAAqC,CAACJ,wBACzC,OAAI,EAAA,WAAU,QACb,UAAC,gBAAAK,EAAA,OAAA,EAAI,WAAU,cACb,4BAACF,GAAY,EAAA,GAAGJ,EAAcC,CAAI,EAAG,CAAA,GACvC,EACF,CAAA,GAGIM,IAAwC;AAAA,EAC5C,MAAM;AAAA,EACN,SAAS;AAAA,EACT,MAAM;AAAA,EACN,sBAAsB;AAAA,EACtB,cAAc;AAAA,EACd,IAAI;AACN,GAEaC,IAAoBH,EAAS,KAAK,EAAE;AACjDG,EAAkB,OAAO;AAAA,EACvB,GAAGD;AACL;AAEO,MAAME,IAAWJ,EAAS,KAAK,EAAE;AACxCI,EAAS,OAAO;AAAA,EACd,GAAGF;AAAA,EACH,MAAM;AACR;AAEO,MAAMG,IAAkBL,EAAS,KAAK,EAAE;AAC/CK,EAAgB,OAAO;AAAA,EACrB,GAAGH;AAAA,EACH,eAAe;AACjB;"}

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

@@ -0,0 +1,7 @@
+interface Props {
+    value?: string;
+    spinnerAriaValueText: string;
+    loading?: boolean;
+}
+export declare function FieldHint({ value, spinnerAriaValueText, loading }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/InputField/components/FieldHint.js

@@ -0,0 +1,15 @@
+import { jsxs as r, jsx as n, Fragment as s } from "react/jsx-runtime";
+import { Spinner as f } from "../../Spinner/Spinner.js";
+import '../../../assets/FieldHint.css';const l = {
+  "field-hint": "_field-hint_f5ej1_1"
+};
+function m({ value: i, spinnerAriaValueText: e, loading: t }) {
+  return /* @__PURE__ */ r("span", { className: l["field-hint"], children: [
+    i && /* @__PURE__ */ n(s, { children: i }),
+    !i && t && /* @__PURE__ */ n(f, { ariaValueText: e })
+  ] });
+}
+export {
+  m as FieldHint
+};
+//# sourceMappingURL=FieldHint.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FieldHint.js","sources":["../../../../src/components/InputField/components/FieldHint.tsx"],"sourcesContent":["import styles from './FieldHint.module.css';\n\nimport { Spinner } from 'components/Spinner/Spinner';\n\ninterface Props {\n  value?: string;\n  spinnerAriaValueText: string;\n  loading?: boolean;\n}\n\nexport function FieldHint({ value, spinnerAriaValueText, loading }: Props) {\n  return (\n    <span className={styles['field-hint']}>\n      {value && <>{value}</>}\n      {!value && loading && <Spinner ariaValueText={spinnerAriaValueText} />}\n    </span>\n  );\n}\n"],"names":["FieldHint","value","spinnerAriaValueText","loading","jsxs","styles","jsx","Spinner"],"mappings":";;;;;AAUO,SAASA,EAAU,EAAE,OAAAC,GAAO,sBAAAC,GAAsB,SAAAC,KAAkB;AACzE,SACG,gBAAAC,EAAA,QAAA,EAAK,WAAWC,EAAO,YAAY,GACjC,UAAA;AAAA,IAAAJ,4BAAY,UAAMA,EAAA,CAAA;AAAA,IAClB,CAACA,KAASE,KAAY,gBAAAG,EAAAC,GAAA,EAAQ,eAAeL,GAAsB;AAAA,EACtE,EAAA,CAAA;AAEJ;"}

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

@@ -0,0 +1 @@
+export * from './InputField';

package/dist/components/InputField/index.js

@@ -0,0 +1,5 @@
+import { InputField as p } from "./InputField.js";
+export {
+  p as InputField
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/Label/Label.d.ts

@@ -0,0 +1,6 @@
+import { LabelHTMLAttributes } from 'react';
+
+export interface LabelProps extends Omit<LabelHTMLAttributes<HTMLLabelElement>, 'className' | 'style'> {
+    htmlFor: string;
+}
+export declare const Label: ({ children, htmlFor, ...restProps }: LabelProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Label/Label.js

@@ -0,0 +1,8 @@
+import { jsx as s } from "react/jsx-runtime";
+import '../../assets/Label.css';const b = "_label_18mqr_1", o = {
+  label: b
+}, c = ({ children: l, htmlFor: e, ...a }) => /* @__PURE__ */ s("label", { ...a, htmlFor: e, className: o.label, children: l });
+export {
+  c as Label
+};
+//# sourceMappingURL=Label.js.map

package/dist/components/Label/Label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label.js","sources":["../../../src/components/Label/Label.tsx"],"sourcesContent":["import type { LabelHTMLAttributes } from 'react';\n\nimport styles from './Label.module.css';\n\nexport interface LabelProps extends Omit<LabelHTMLAttributes<HTMLLabelElement>, 'className' | 'style'> {\n  htmlFor: string;\n}\n\nexport const Label = ({ children, htmlFor, ...restProps }: LabelProps) => (\n  <label {...restProps} htmlFor={htmlFor} className={styles['label']}>\n    {children}\n  </label>\n);\n"],"names":["Label","children","htmlFor","restProps","jsx","styles"],"mappings":";;;GAQaA,IAAQ,CAAC,EAAE,UAAAC,GAAU,SAAAC,GAAS,GAAGC,EAAU,MACrD,gBAAAC,EAAA,SAAA,EAAO,GAAGD,GAAW,SAAAD,GAAkB,WAAWG,EAAO,OACvD,UAAAJ,EACH,CAAA;"}

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

@@ -0,0 +1,5 @@
+import { LabelProps } from './Label';
+
+declare const _default: import('@storybook/types').ComponentAnnotations<import('@storybook/react').ReactRenderer, LabelProps>;
+export default _default;
+export declare const LabelExample: import('@storybook/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, LabelProps>;

package/dist/components/Label/Label.stories.js

@@ -0,0 +1,23 @@
+import { jsx as o } from "react/jsx-runtime";
+import { Label as t } from "./Label.js";
+const a = {
+  title: "Atoms/Label",
+  component: t,
+  argTypes: {
+    htmlFor: {
+      control: "text"
+    },
+    children: {
+      control: "text"
+    }
+  }
+}, r = (e) => /* @__PURE__ */ o(t, { ...e }), l = r.bind({});
+l.args = {
+  children: "Lorem Ipsum",
+  htmlFor: "bd79f7ec"
+};
+export {
+  l as LabelExample,
+  a as default
+};
+//# sourceMappingURL=Label.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Label.stories.js","sources":["../../../src/components/Label/Label.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { LabelProps } from './Label';\n\nimport { Label } from './Label';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/Label',\n  component: Label,\n  argTypes: {\n    htmlFor: {\n      control: 'text',\n    },\n    children: {\n      control: 'text',\n    },\n  },\n} as Meta<LabelProps>;\n\nconst Template: StoryFn<LabelProps> = (args) => <Label {...args} />;\n\nexport const LabelExample = Template.bind({});\nLabelExample.args = {\n  children: 'Lorem Ipsum',\n  htmlFor: 'bd79f7ec',\n};\n"],"names":["Label_stories","Label","Template","args","jsx","LabelExample"],"mappings":";;AAMA,MAAeA,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,IACX;AAAA,IACA,UAAU;AAAA,MACR,SAAS;AAAA,IACX;AAAA,EACF;AACF,GAEMC,IAAgC,CAACC,MAAU,gBAAAC,EAAAH,GAAA,EAAO,GAAGE,EAAM,CAAA,GAEpDE,IAAeH,EAAS,KAAK,EAAE;AAC5CG,EAAa,OAAO;AAAA,EAClB,UAAU;AAAA,EACV,SAAS;AACX;"}

package/dist/components/Label/index.d.ts

@@ -0,0 +1 @@
+export * from './Label';

package/dist/components/Label/index.js

@@ -0,0 +1,5 @@
+import { Label as r } from "./Label.js";
+export {
+  r as Label
+};
+//# sourceMappingURL=index.js.map

package/dist/components/Label/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/index.d.ts

@@ -4,6 +4,9 @@ export * from './Card';
 export * from './Icon';
 export * from './IconButton';
 export * from './InfoMessage';
+export * from './Input';
+export * from './InputField';
+export * from './Label';
 export * from './SectionNotification';
 export * from './SelectListbox';
 export * from './SelectListbox/SelectProvider';

package/dist/components/index.js

@@ -2,23 +2,29 @@ import { AppStatusBar as t } from "./AppStatusBar/AppStatusBar.js";
 import { Button as p } from "./Button/Button.js";
 import { Card as x } from "./Card/Card.js";
 import { Icon as n } from "./Icon/Icon.js";
-import { IconButton as i } from "./IconButton/IconButton.js";
-import { InfoMessage as a } from "./InfoMessage/InfoMessage.js";
-import { SectionNotification as u } from "./SectionNotification/SectionNotification.js";
-import { SelectListbox as B } from "./SelectListbox/SelectListbox.js";
-import { SelectProvider as d, useSelect as b } from "./SelectListbox/SelectProvider.js";
-import { Spinner as v } from "./Spinner/Spinner.js";
+import { IconButton as c } from "./IconButton/IconButton.js";
+import { InfoMessage as u } from "./InfoMessage/InfoMessage.js";
+import { Input as l } from "./Input/Input.js";
+import { InputField as I } from "./InputField/InputField.js";
+import { Label as B } from "./Label/Label.js";
+import { SectionNotification as L } from "./SectionNotification/SectionNotification.js";
+import { SelectListbox as v } from "./SelectListbox/SelectListbox.js";
+import { SelectProvider as C, useSelect as F } from "./SelectListbox/SelectProvider.js";
+import { Spinner as N } from "./Spinner/Spinner.js";
 export {
   t as AppStatusBar,
   p as Button,
   x as Card,
   n as Icon,
-  i as IconButton,
-  a as InfoMessage,
-  u as SectionNotification,
-  B as SelectListbox,
-  d as SelectProvider,
-  v as Spinner,
-  b as useSelect
+  c as IconButton,
+  u as InfoMessage,
+  l as Input,
+  I as InputField,
+  B as Label,
+  L as SectionNotification,
+  v as SelectListbox,
+  C as SelectProvider,
+  N as Spinner,
+  F as useSelect
 };
 //# sourceMappingURL=index.js.map

package/dist/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}

package/dist/index.js

@@ -2,23 +2,29 @@ import { AppStatusBar as t } from "./components/AppStatusBar/AppStatusBar.js";
 import { Button as p } from "./components/Button/Button.js";
 import { Card as x } from "./components/Card/Card.js";
 import { Icon as n } from "./components/Icon/Icon.js";
-import { IconButton as i } from "./components/IconButton/IconButton.js";
-import { InfoMessage as a } from "./components/InfoMessage/InfoMessage.js";
-import { SectionNotification as u } from "./components/SectionNotification/SectionNotification.js";
-import { SelectListbox as B } from "./components/SelectListbox/SelectListbox.js";
-import { SelectProvider as d, useSelect as b } from "./components/SelectListbox/SelectProvider.js";
-import { Spinner as v } from "./components/Spinner/Spinner.js";
+import { IconButton as c } from "./components/IconButton/IconButton.js";
+import { InfoMessage as u } from "./components/InfoMessage/InfoMessage.js";
+import { Input as l } from "./components/Input/Input.js";
+import { InputField as I } from "./components/InputField/InputField.js";
+import { Label as B } from "./components/Label/Label.js";
+import { SectionNotification as L } from "./components/SectionNotification/SectionNotification.js";
+import { SelectListbox as v } from "./components/SelectListbox/SelectListbox.js";
+import { SelectProvider as C, useSelect as F } from "./components/SelectListbox/SelectProvider.js";
+import { Spinner as N } from "./components/Spinner/Spinner.js";
 export {
   t as AppStatusBar,
   p as Button,
   x as Card,
   n as Icon,
-  i as IconButton,
-  a as InfoMessage,
-  u as SectionNotification,
-  B as SelectListbox,
-  d as SelectProvider,
-  v as Spinner,
-  b as useSelect
+  c as IconButton,
+  u as InfoMessage,
+  l as Input,
+  I as InputField,
+  B as Label,
+  L as SectionNotification,
+  v as SelectListbox,
+  C as SelectProvider,
+  N as Spinner,
+  F as useSelect
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@uva-glass/component-library",
   "author": "Team Glass - Frontend vrienden",
   "private": false,
-  "version": "1.6.0",
+  "version": "1.8.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -73,7 +73,7 @@
     "jest-environment-jsdom": "^29.7.0",
     "jest-junit": "^16.0.0",
     "jsdom": "^24.0.0",
-    "npm-run-all2": "^6.1.2",
+    "npm-run-all2": "^6.2.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "semantic-release": "^23.1.1",