@uva-glass/component-library 3.7.0 → 3.8.0

package/dist/assets/FormField.css

@@ -1 +1 @@
-._form-field_18714_1{display:flex;flex-direction:column;gap:.5rem 1rem}._form-field--outerspace_18714_7{margin:1.5rem 0}._form-field--inline_18714_11{align-items:center;flex-direction:row}
+._form-field_hcyqx_1{display:flex;flex-direction:column;gap:.5rem 1rem}._form-field--outerspace_hcyqx_7{margin:1.5rem 0}._form-field--inline_hcyqx_11{align-items:center;flex-direction:row}._form-field--align-start_hcyqx_16{align-items:flex-start}

package/dist/components/FormField/FormField.d.ts

@@ -4,6 +4,8 @@ export interface FormFieldProps extends HTMLAttributes<HTMLDivElement> {
     outerSpace?: boolean;
     /** true if the label and input field should be rendered on the same row; otherwise, false. The default is false. */
     inline?: boolean;
+    /** to be used in combination with 'inline'; true if the label and input field should be rendered on start of the same row; otherwise, false. The default is false. */
+    alignStart?: boolean;
 }
 /** Represents an element to wrap a label and input field. */
-export declare const FormField: ({ children, outerSpace, inline, ...rest }: PropsWithChildren<FormFieldProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const FormField: ({ children, outerSpace, inline, alignStart, ...rest }: PropsWithChildren<FormFieldProps>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/FormField/FormField.js

@@ -1,21 +1,23 @@
-import { jsx as l } from "react/jsx-runtime";
-import { c as m } from "../../clsx-OuTLNxxd.js";
-import '../../assets/FormField.css';const e = {
-  "form-field": "_form-field_18714_1",
-  "form-field--outerspace": "_form-field--outerspace_18714_7",
-  "form-field--inline": "_form-field--inline_18714_11"
-}, t = ({ children: f, outerSpace: o, inline: i, ...r }) => /* @__PURE__ */ l(
+import { jsx as m } from "react/jsx-runtime";
+import { c as s } from "../../clsx-OuTLNxxd.js";
+import '../../assets/FormField.css';const f = {
+  "form-field": "_form-field_hcyqx_1",
+  "form-field--outerspace": "_form-field--outerspace_hcyqx_7",
+  "form-field--inline": "_form-field--inline_hcyqx_11",
+  "form-field--align-start": "_form-field--align-start_hcyqx_16"
+}, a = ({ children: e, outerSpace: i, inline: r, alignStart: o, ...l }) => /* @__PURE__ */ m(
   "div",
   {
-    className: m(e["form-field"], {
-      [e["form-field--outerspace"]]: o,
-      [e["form-field--inline"]]: i
+    className: s(f["form-field"], {
+      [f["form-field--outerspace"]]: i,
+      [f["form-field--inline"]]: r,
+      [f["form-field--align-start"]]: o
     }),
-    ...r,
-    children: f
+    ...l,
+    children: e
   }
 );
 export {
-  t as FormField
+  a as FormField
 };
 //# sourceMappingURL=FormField.js.map

package/dist/components/FormField/FormField.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormField.js","sources":["../../../src/components/FormField/FormField.tsx"],"sourcesContent":["import classNames from 'clsx';\n\nimport type { HTMLAttributes, PropsWithChildren } from 'react';\n\nimport styles from './FormField.module.css';\n\nexport interface FormFieldProps extends HTMLAttributes<HTMLDivElement> {\n  /** true if a margin at the top and bottom should be added; otherwise, false. The default is false. */\n  outerSpace?: boolean;\n  /** true if the label and input field should be rendered on the same row; otherwise, false. The default is false. */\n  inline?: boolean;\n}\n\n/** Represents an element to wrap a label and input field. */\nexport const FormField = ({ children, outerSpace, inline, ...rest }: PropsWithChildren<FormFieldProps>) => (\n  <div\n    className={classNames(styles['form-field'], {\n      [styles['form-field--outerspace']]: outerSpace,\n      [styles['form-field--inline']]: inline,\n    })}\n    {...rest}\n  >\n    {children}\n  </div>\n);\n"],"names":["FormField","children","outerSpace","inline","rest","jsx","classNames","styles"],"mappings":";;;;;;GAcaA,IAAY,CAAC,EAAE,UAAAC,GAAU,YAAAC,GAAY,QAAAC,GAAQ,GAAGC,QAC3D,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,EAAWC,EAAO,YAAY,GAAG;AAAA,MAC1C,CAACA,EAAO,wBAAwB,CAAC,GAAGL;AAAA,MACpC,CAACK,EAAO,oBAAoB,CAAC,GAAGJ;AAAA,IAAA,CACjC;AAAA,IACA,GAAGC;AAAA,IAEH,UAAAH;AAAA,EAAA;AACH;"}
+{"version":3,"file":"FormField.js","sources":["../../../src/components/FormField/FormField.tsx"],"sourcesContent":["import classNames from 'clsx';\n\nimport type { HTMLAttributes, PropsWithChildren } from 'react';\n\nimport styles from './FormField.module.css';\n\nexport interface FormFieldProps extends HTMLAttributes<HTMLDivElement> {\n  /** true if a margin at the top and bottom should be added; otherwise, false. The default is false. */\n  outerSpace?: boolean;\n  /** true if the label and input field should be rendered on the same row; otherwise, false. The default is false. */\n  inline?: boolean;\n  /** to be used in combination with 'inline'; true if the label and input field should be rendered on start of the same row; otherwise, false. The default is false. */\n  alignStart?: boolean;\n}\n\n/** Represents an element to wrap a label and input field. */\nexport const FormField = ({ children, outerSpace, inline, alignStart, ...rest }: PropsWithChildren<FormFieldProps>) => (\n  <div\n    className={classNames(styles['form-field'], {\n      [styles['form-field--outerspace']]: outerSpace,\n      [styles['form-field--inline']]: inline,\n      [styles['form-field--align-start']]: alignStart,\n    })}\n    {...rest}\n  >\n    {children}\n  </div>\n);\n"],"names":["FormField","children","outerSpace","inline","alignStart","rest","jsx","classNames","styles"],"mappings":";;;;;;;GAgBaA,IAAY,CAAC,EAAE,UAAAC,GAAU,YAAAC,GAAY,QAAAC,GAAQ,YAAAC,GAAY,GAAGC,EAAA,MACvE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,EAAWC,EAAO,YAAY,GAAG;AAAA,MAC1C,CAACA,EAAO,wBAAwB,CAAC,GAAGN;AAAA,MACpC,CAACM,EAAO,oBAAoB,CAAC,GAAGL;AAAA,MAChC,CAACK,EAAO,yBAAyB,CAAC,GAAGJ;AAAA,IAAA,CACtC;AAAA,IACA,GAAGC;AAAA,IAEH,UAAAJ;AAAA,EAAA;AACH;"}

package/dist/components/FormField/FormField.stories.js

@@ -1,9 +1,9 @@
-import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
 import { FormField as o } from "./FormField.js";
 import { InputField as t } from "../InputField/InputField.js";
-import { Label as i } from "../Label/Label.js";
-import { Container as n } from "../../storyComponents/Container/Container.js";
-const a = "<FormField>{children}</FormField>", b = {
+import { Label as n } from "../Label/Label.js";
+import { Container as a } from "../../storyComponents/Container/Container.js";
+const i = "<FormField>{children}</FormField>", h = {
   title: "Atoms/FormField",
   component: o,
   argTypes: {
@@ -12,30 +12,34 @@ const a = "<FormField>{children}</FormField>", b = {
     },
     inline: {
       control: "boolean"
+    },
+    alignStart: {
+      control: "boolean"
     }
   },
   parameters: {
     inspectComponent: o,
-    codeString: a
+    codeString: i
   }
-}, m = (l) => /* @__PURE__ */ r(n, { children: [
-  /* @__PURE__ */ r(o, { ...l, children: [
-    /* @__PURE__ */ e(i, { htmlFor: "d6aa53fd", children: "Example label 1" }),
+}, m = (r) => /* @__PURE__ */ l(a, { children: [
+  /* @__PURE__ */ l(o, { ...r, children: [
+    /* @__PURE__ */ e(n, { htmlFor: "d6aa53fd", children: "Example label" }),
     /* @__PURE__ */ e(t, { id: "d6aa53fd" })
   ] }),
-  /* @__PURE__ */ r(o, { ...l, children: [
-    /* @__PURE__ */ e(i, { htmlFor: "4e7a2f22", children: "Example label 2" }),
+  /* @__PURE__ */ l(o, { ...r, children: [
+    /* @__PURE__ */ e(n, { htmlFor: "4e7a2f22", children: "Example very very very long label to display input alingment compared to label" }),
     /* @__PURE__ */ e(t, { id: "4e7a2f22" })
   ] })
 ] }), d = {
   outerSpace: !1,
-  inline: !1
-}, c = m.bind({});
-c.args = {
+  inline: !1,
+  alignStart: !1
+}, p = m.bind({});
+p.args = {
   ...d
 };
 export {
-  c as FormFieldExample,
-  b as default
+  p as FormFieldExample,
+  h as default
 };
 //# sourceMappingURL=FormField.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FormField.stories.js","sources":["../../../src/components/FormField/FormField.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { PropsWithChildren } from 'react';\nimport type { FormFieldProps } from './FormField';\n\nimport { FormField } from './FormField';\n\nimport { InputField } from 'components/InputField';\nimport { Label } from 'components/Label';\nimport { Container } from 'storyComponents/Container';\n\nconst codeString = '<FormField>{children}</FormField>';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/FormField',\n  component: FormField,\n  argTypes: {\n    outerSpace: {\n      control: 'boolean',\n    },\n    inline: {\n      control: 'boolean',\n    },\n  },\n  parameters: {\n    inspectComponent: FormField,\n    codeString: codeString,\n  },\n} as Meta<PropsWithChildren<FormFieldProps>>;\n\nconst Template: StoryFn<PropsWithChildren<FormFieldProps>> = (args) => (\n  <Container>\n    <FormField {...args}>\n      <Label htmlFor=\"d6aa53fd\">Example label 1</Label>\n      <InputField id=\"d6aa53fd\" />\n    </FormField>\n    <FormField {...args}>\n      <Label htmlFor=\"4e7a2f22\">Example label 2</Label>\n      <InputField id=\"4e7a2f22\" />\n    </FormField>\n  </Container>\n);\n\nconst defaultArgs: Partial<PropsWithChildren<FormFieldProps>> = {\n  outerSpace: false,\n  inline: false,\n};\n\nexport const FormFieldExample = Template.bind({});\nFormFieldExample.args = {\n  ...defaultArgs,\n};\n"],"names":["codeString","FormField_stories","FormField","Template","args","jsxs","Container","jsx","Label","InputField","defaultArgs","FormFieldExample"],"mappings":";;;;;AAUA,MAAMA,IAAa,qCAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,YAAY;AAAA,MACV,SAAS;AAAA,IACX;AAAA,IACA,QAAQ;AAAA,MACN,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAuD,CAACC,MAC5D,gBAAAC,EAACC,GACC,EAAA,UAAA;AAAA,EAAC,gBAAAD,EAAAH,GAAA,EAAW,GAAGE,GACb,UAAA;AAAA,IAAC,gBAAAG,EAAAC,GAAA,EAAM,SAAQ,YAAW,UAAe,mBAAA;AAAA,IACzC,gBAAAD,EAACE,GAAW,EAAA,IAAG,WAAW,CAAA;AAAA,EAAA,GAC5B;AAAA,EACA,gBAAAJ,EAACH,GAAW,EAAA,GAAGE,GACb,UAAA;AAAA,IAAC,gBAAAG,EAAAC,GAAA,EAAM,SAAQ,YAAW,UAAe,mBAAA;AAAA,IACzC,gBAAAD,EAACE,GAAW,EAAA,IAAG,WAAW,CAAA;AAAA,EAAA,EAC5B,CAAA;AAAA,GACF,GAGIC,IAA0D;AAAA,EAC9D,YAAY;AAAA,EACZ,QAAQ;AACV,GAEaC,IAAmBR,EAAS,KAAK,CAAE,CAAA;AAChDQ,EAAiB,OAAO;AAAA,EACtB,GAAGD;AACL;"}
+{"version":3,"file":"FormField.stories.js","sources":["../../../src/components/FormField/FormField.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { PropsWithChildren } from 'react';\nimport type { FormFieldProps } from './FormField';\n\nimport { FormField } from './FormField';\n\nimport { InputField } from 'components/InputField';\nimport { Label } from 'components/Label';\nimport { Container } from 'storyComponents/Container';\n\nconst codeString = '<FormField>{children}</FormField>';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/FormField',\n  component: FormField,\n  argTypes: {\n    outerSpace: {\n      control: 'boolean',\n    },\n    inline: {\n      control: 'boolean',\n    },\n    alignStart: {\n      control: 'boolean',\n    },\n  },\n  parameters: {\n    inspectComponent: FormField,\n    codeString: codeString,\n  },\n} as Meta<PropsWithChildren<FormFieldProps>>;\n\nconst Template: StoryFn<PropsWithChildren<FormFieldProps>> = (args) => (\n  <Container>\n    <FormField {...args}>\n      <Label htmlFor=\"d6aa53fd\">Example label</Label>\n      <InputField id=\"d6aa53fd\" />\n    </FormField>\n    <FormField {...args}>\n      <Label htmlFor=\"4e7a2f22\">Example very very very long label to display input alingment compared to label</Label>\n      <InputField id=\"4e7a2f22\" />\n    </FormField>\n  </Container>\n);\n\nconst defaultArgs: Partial<PropsWithChildren<FormFieldProps>> = {\n  outerSpace: false,\n  inline: false,\n  alignStart: false,\n};\n\nexport const FormFieldExample = Template.bind({});\nFormFieldExample.args = {\n  ...defaultArgs,\n};\n"],"names":["codeString","FormField_stories","FormField","Template","args","jsxs","Container","jsx","Label","InputField","defaultArgs","FormFieldExample"],"mappings":";;;;;AAUA,MAAMA,IAAa,qCAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,YAAY;AAAA,MACV,SAAS;AAAA,IACX;AAAA,IACA,QAAQ;AAAA,MACN,SAAS;AAAA,IACX;AAAA,IACA,YAAY;AAAA,MACV,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAuD,CAACC,MAC5D,gBAAAC,EAACC,GACC,EAAA,UAAA;AAAA,EAAC,gBAAAD,EAAAH,GAAA,EAAW,GAAGE,GACb,UAAA;AAAA,IAAC,gBAAAG,EAAAC,GAAA,EAAM,SAAQ,YAAW,UAAa,iBAAA;AAAA,IACvC,gBAAAD,EAACE,GAAW,EAAA,IAAG,WAAW,CAAA;AAAA,EAAA,GAC5B;AAAA,EACA,gBAAAJ,EAACH,GAAW,EAAA,GAAGE,GACb,UAAA;AAAA,IAAC,gBAAAG,EAAAC,GAAA,EAAM,SAAQ,YAAW,UAA8E,kFAAA;AAAA,IACxG,gBAAAD,EAACE,GAAW,EAAA,IAAG,WAAW,CAAA;AAAA,EAAA,EAC5B,CAAA;AAAA,GACF,GAGIC,IAA0D;AAAA,EAC9D,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,YAAY;AACd,GAEaC,IAAmBR,EAAS,KAAK,CAAE,CAAA;AAChDQ,EAAiB,OAAO;AAAA,EACtB,GAAGD;AACL;"}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@uva-glass/component-library",
   "author": "Team Glass - Frontend vrienden",
   "private": false,
-  "version": "3.7.0",
+  "version": "3.8.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -65,7 +65,7 @@
     "@testing-library/react": "^16.3.0",
     "@types/jest": "^29.5.14",
     "@types/node": "^22.14.0",
-    "@types/react-dom": "^19.1.1",
+    "@types/react-dom": "^19.1.2",
     "@types/react": "^19.1.0",
     "@uva-glass/eslint-config": "^1.3.10",
     "@uva-glass/stylelint-config": "^1.2.2",
@@ -95,11 +95,11 @@
     "ts-node": "^10.9.2",
     "typescript": "^5.8.3",
     "vite-plugin-dts": "^4.5.3",
-    "vite-plugin-lib-inject-css": "^2.2.1",
-    "vite-plugin-static-copy": "^2.3.0",
+    "vite-plugin-lib-inject-css": "^2.2.2",
+    "vite-plugin-static-copy": "^2.3.1",
     "vite-plugin-svgr": "^4.3.0",
     "vite-tsconfig-paths": "^5.1.4",
-    "vite": "^6.2.5"
+    "vite": "^6.2.6"
   },
   "dependencies": {
     "@babel/preset-env": "^7.26.9",
@@ -113,8 +113,8 @@
   },
   "optionalDependencies": {
     "@rollup/rollup-linux-x64-gnu": "^4.39.0",
-    "@rspack/binding-darwin-arm64": "1.3.3",
-    "@rspack/binding-linux-x64-gnu": "1.3.3",
+    "@rspack/binding-darwin-arm64": "1.3.4",
+    "@rspack/binding-linux-x64-gnu": "1.3.4",
     "@ast-grep/napi-linux-x64-gnu": "0.36.2"
   }
 }