@uva-glass/component-library 1.32.3 → 1.33.0

package/dist/assets/Fieldset.css

@@ -0,0 +1 @@
+._fieldset_1pmtm_1{border:0;display:flex;flex-direction:column;gap:1rem;margin:0;padding:0}._fieldset--inline_1pmtm_10{column-gap:1.5rem;flex-direction:row}._fieldset__legend_1pmtm_15{font-weight:var(--semibold);padding:0}._fieldset__description_1pmtm_20{margin:0}

package/dist/components/Fieldset/Fieldset.d.ts

@@ -0,0 +1,9 @@
+import { PropsWithChildren, ReactNode } from 'react';
+
+export interface FieldsetProps {
+    description?: ReactNode;
+    descriptionId?: string;
+    inline?: boolean;
+    legend: string;
+}
+export declare const Fieldset: ({ inline, legend, description, descriptionId, children, }: PropsWithChildren<FieldsetProps>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Fieldset/Fieldset.js

@@ -0,0 +1,32 @@
+import { jsxs as i, jsx as l } from "react/jsx-runtime";
+import { c as f } from "../../clsx-OuTLNxxd.js";
+import '../../assets/Fieldset.css';const c = "_fieldset_1pmtm_1", m = "_fieldset__legend_1pmtm_15", o = "_fieldset__description_1pmtm_20", e = {
+  fieldset: c,
+  "fieldset--inline": "_fieldset--inline_1pmtm_10",
+  fieldset__legend: m,
+  fieldset__description: o
+}, a = ({
+  inline: t,
+  legend: d,
+  description: s,
+  descriptionId: _,
+  children: n
+}) => /* @__PURE__ */ i(
+  "fieldset",
+  {
+    className: f(e.fieldset, {
+      [e["fieldset--inline"]]: t
+    }),
+    children: [
+      /* @__PURE__ */ i("div", { children: [
+        /* @__PURE__ */ l("legend", { className: e.fieldset__legend, children: d }),
+        s && /* @__PURE__ */ l("p", { className: e.fieldset__description, id: _, children: s })
+      ] }),
+      n
+    ]
+  }
+);
+export {
+  a as Fieldset
+};
+//# sourceMappingURL=Fieldset.js.map

package/dist/components/Fieldset/Fieldset.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Fieldset.js","sources":["../../../src/components/Fieldset/Fieldset.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport type { PropsWithChildren, ReactNode } from 'react';\n\nimport styles from './Fieldset.module.css';\n\nexport interface FieldsetProps {\n  description?: ReactNode;\n  descriptionId?: string;\n  inline?: boolean;\n  legend: string;\n}\n\nexport const Fieldset = ({\n  inline,\n  legend,\n  description,\n  descriptionId,\n  children,\n}: PropsWithChildren<FieldsetProps>) => (\n  <fieldset\n    className={clsx(styles['fieldset'], {\n      [styles['fieldset--inline']]: inline,\n    })}\n  >\n    <div>\n      <legend className={styles['fieldset__legend']}>{legend}</legend>\n      {description && (\n        <p className={styles['fieldset__description']} id={descriptionId}>\n          {description}\n        </p>\n      )}\n    </div>\n    {children}\n  </fieldset>\n);\n"],"names":["Fieldset","inline","legend","description","descriptionId","children","jsxs","clsx","styles","jsx"],"mappings":";;;;;;;GAaaA,IAAW,CAAC;AAAA,EACvB,QAAAC;AAAA,EACA,QAAAC;AAAA,EACA,aAAAC;AAAA,EACA,eAAAC;AAAA,EACA,UAAAC;AACF,MACE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,EAAKC,EAAO,UAAa;AAAA,MAClC,CAACA,EAAO,kBAAkB,CAAC,GAAGP;AAAA,IAAA,CAC/B;AAAA,IAED,UAAA;AAAA,MAAA,gBAAAK,EAAC,OACC,EAAA,UAAA;AAAA,QAAA,gBAAAG,EAAC,UAAO,EAAA,WAAWD,EAAO,kBAAsB,UAAON,GAAA;AAAA,QACtDC,uBACE,KAAE,EAAA,WAAWK,EAAO,uBAA0B,IAAIJ,GAChD,UACHD,EAAA,CAAA;AAAA,MAAA,GAEJ;AAAA,MACCE;AAAA,IAAA;AAAA,EAAA;AACH;"}

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

@@ -0,0 +1,7 @@
+import { PropsWithChildren } from 'react';
+import { FieldsetProps } from './Fieldset';
+
+declare const _default: import('@storybook/types').ComponentAnnotations<import('@storybook/react').ReactRenderer, PropsWithChildren<FieldsetProps>>;
+export default _default;
+export declare const FieldsetExample: import('@storybook/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, PropsWithChildren<FieldsetProps>>;
+export declare const WithDescriptionExample: import('@storybook/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, PropsWithChildren<FieldsetProps>>;

package/dist/components/Fieldset/Fieldset.stories.js

@@ -0,0 +1,43 @@
+import { jsx as e, jsxs as l } from "react/jsx-runtime";
+import { Fieldset as s } from "./Fieldset.js";
+import { InputField as i } from "../InputField/InputField.js";
+import { Label as t } from "../Label/Label.js";
+import { Container as n } from "../storyComponents/Container/Container.js";
+import { FormField as r } from "../FormField/FormField.js";
+const g = {
+  title: "Atoms/Fieldset",
+  component: s,
+  argTypes: {
+    descriptionId: {
+      table: {
+        disable: !0
+      }
+    }
+  }
+}, o = (d) => /* @__PURE__ */ e(n, { size: "large", children: /* @__PURE__ */ l(s, { ...d, children: [
+  /* @__PURE__ */ l(r, { children: [
+    /* @__PURE__ */ e(t, { htmlFor: "d6aa53fd", children: "Example label 1" }),
+    /* @__PURE__ */ e(i, { id: "d6aa53fd" })
+  ] }),
+  /* @__PURE__ */ l(r, { children: [
+    /* @__PURE__ */ e(t, { htmlFor: "4e7a2f22", children: "Example label 2" }),
+    /* @__PURE__ */ e(i, { id: "4e7a2f22" })
+  ] })
+] }) }), a = {
+  legend: "Fieldset example",
+  inline: !1
+}, m = o.bind({});
+m.args = {
+  ...a
+};
+const p = o.bind({});
+p.args = {
+  ...a,
+  description: "A Fieldset groups several controls as well as labels"
+};
+export {
+  m as FieldsetExample,
+  p as WithDescriptionExample,
+  g as default
+};
+//# sourceMappingURL=Fieldset.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Fieldset.stories.js","sources":["../../../src/components/Fieldset/Fieldset.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { PropsWithChildren } from 'react';\nimport type { FieldsetProps } from './Fieldset';\n\nimport { Fieldset } from './Fieldset';\n\nimport { InputField } from 'components/InputField';\nimport { Label } from 'components/Label';\nimport { Container } from 'components/storyComponents/Container';\nimport { FormField } from 'components/FormField';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/Fieldset',\n  component: Fieldset,\n  argTypes: {\n    descriptionId: {\n      table: {\n        disable: true,\n      },\n    },\n  },\n} as Meta<PropsWithChildren<FieldsetProps>>;\n\nconst Template: StoryFn<PropsWithChildren<FieldsetProps>> = (args) => (\n  <Container size=\"large\">\n    <Fieldset {...args}>\n      <FormField>\n        <Label htmlFor=\"d6aa53fd\">Example label 1</Label>\n        <InputField id=\"d6aa53fd\" />\n      </FormField>\n      <FormField>\n        <Label htmlFor=\"4e7a2f22\">Example label 2</Label>\n        <InputField id=\"4e7a2f22\" />\n      </FormField>\n    </Fieldset>\n  </Container>\n);\n\nconst defaultArgs: Partial<PropsWithChildren<FieldsetProps>> = {\n  legend: 'Fieldset example',\n  inline: false,\n};\n\nexport const FieldsetExample = Template.bind({});\nFieldsetExample.args = {\n  ...defaultArgs,\n};\n\nexport const WithDescriptionExample = Template.bind({});\nWithDescriptionExample.args = {\n  ...defaultArgs,\n  description: 'A Fieldset groups several controls as well as labels',\n};\n"],"names":["Fieldset_stories","Fieldset","Template","args","jsx","Container","jsxs","FormField","Label","InputField","defaultArgs","FieldsetExample","WithDescriptionExample"],"mappings":";;;;;;AAYA,MAAeA,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,eAAe;AAAA,MACb,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AACF,GAEMC,IAAsD,CAACC,MAC1D,gBAAAC,EAAAC,GAAA,EAAU,MAAK,SACd,UAAA,gBAAAC,EAACL,GAAU,EAAA,GAAGE,GACZ,UAAA;AAAA,EAAA,gBAAAG,EAACC,GACC,EAAA,UAAA;AAAA,IAAC,gBAAAH,EAAAI,GAAA,EAAM,SAAQ,YAAW,UAAe,mBAAA;AAAA,IACzC,gBAAAJ,EAACK,GAAW,EAAA,IAAG,WAAW,CAAA;AAAA,EAAA,GAC5B;AAAA,oBACCF,GACC,EAAA,UAAA;AAAA,IAAC,gBAAAH,EAAAI,GAAA,EAAM,SAAQ,YAAW,UAAe,mBAAA;AAAA,IACzC,gBAAAJ,EAACK,GAAW,EAAA,IAAG,WAAW,CAAA;AAAA,EAAA,GAC5B;AAAA,EACF,CAAA,EACF,CAAA,GAGIC,IAAyD;AAAA,EAC7D,QAAQ;AAAA,EACR,QAAQ;AACV,GAEaC,IAAkBT,EAAS,KAAK,EAAE;AAC/CS,EAAgB,OAAO;AAAA,EACrB,GAAGD;AACL;AAEO,MAAME,IAAyBV,EAAS,KAAK,EAAE;AACtDU,EAAuB,OAAO;AAAA,EAC5B,GAAGF;AAAA,EACH,aAAa;AACf;"}

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

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

package/dist/components/Fieldset/index.js

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

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

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

package/dist/components/index.d.ts

@@ -8,6 +8,7 @@ export * from './Card';
 export * from './Checkbox';
 export * from './Drawer';
 export * from './FieldHint';
+export * from './Fieldset';
 export * from './FormField';
 export * from './Icon';
 export * from './IconButton';

package/dist/components/index.js

@@ -7,28 +7,29 @@ import { ButtonGroup as u } from "./ButtonGroup/ButtonGroup.js";
 import { Card as d } from "./Card/Card.js";
 import { Checkbox as S } from "./Checkbox/Checkbox.js";
 import { Drawer as M } from "./Drawer/Drawer.js";
-import { FieldHint as C } from "./FieldHint/FieldHint.js";
-import { FormField as L } from "./FormField/FormField.js";
-import { Icon as g } from "./Icon/Icon.js";
-import { IconButton as A } from "./IconButton/IconButton.js";
-import { InfoMessage as P } from "./InfoMessage/InfoMessage.js";
-import { Input as R } from "./Input/Input.js";
-import { InputField as w } from "./InputField/InputField.js";
-import { Label as G } from "./Label/Label.js";
-import { M as N } from "../MenuLink-CIzBwlKY.js";
-import { MetaDataList as T } from "./MetaDataList/MetaDataList.js";
-import { ModalDialog as q } from "./ModalDialog/ModalDialog.js";
-import { M as E } from "../MultiSelect-Cb4-L7lm.js";
-import { OverlayCloseButton as K } from "./OverlayCloseButton/OverlayCloseButton.js";
-import { ProgrammeCard as U } from "./ProgrammeCard/ProgrammeCard.js";
-import { RadioButton as W } from "./RadioButton/RadioButton.js";
-import { Repeater as Y } from "./Repeater/Repeater.js";
-import { SectionNotification as _ } from "./SectionNotification/SectionNotification.js";
-import { SelectListbox as oo } from "./SelectListbox/SelectListbox.js";
-import { SelectProvider as to, useSelect as eo } from "./SelectListbox/SelectProvider.js";
-import { Spinner as mo } from "./Spinner/Spinner.js";
-import { StatusPill as xo } from "./StatusPill/StatusPill.js";
-import { Tooltip as io } from "./Tooltip/Tooltip.js";
+import { FieldHint as I } from "./FieldHint/FieldHint.js";
+import { Fieldset as L } from "./Fieldset/Fieldset.js";
+import { FormField as g } from "./FormField/FormField.js";
+import { Icon as A } from "./Icon/Icon.js";
+import { IconButton as P } from "./IconButton/IconButton.js";
+import { InfoMessage as R } from "./InfoMessage/InfoMessage.js";
+import { Input as w } from "./Input/Input.js";
+import { InputField as G } from "./InputField/InputField.js";
+import { Label as N } from "./Label/Label.js";
+import { M as T } from "../MenuLink-CIzBwlKY.js";
+import { MetaDataList as q } from "./MetaDataList/MetaDataList.js";
+import { ModalDialog as E } from "./ModalDialog/ModalDialog.js";
+import { M as K } from "../MultiSelect-Cb4-L7lm.js";
+import { OverlayCloseButton as U } from "./OverlayCloseButton/OverlayCloseButton.js";
+import { ProgrammeCard as W } from "./ProgrammeCard/ProgrammeCard.js";
+import { RadioButton as Y } from "./RadioButton/RadioButton.js";
+import { Repeater as _ } from "./Repeater/Repeater.js";
+import { SectionNotification as oo } from "./SectionNotification/SectionNotification.js";
+import { SelectListbox as to } from "./SelectListbox/SelectListbox.js";
+import { SelectProvider as po, useSelect as mo } from "./SelectListbox/SelectProvider.js";
+import { Spinner as xo } from "./Spinner/Spinner.js";
+import { StatusPill as io } from "./StatusPill/StatusPill.js";
+import { Tooltip as lo } from "./Tooltip/Tooltip.js";
 export {
   t as Accordion,
   p as AppStatusBar,
@@ -39,28 +40,29 @@ export {
   d as Card,
   S as Checkbox,
   M as Drawer,
-  C as FieldHint,
-  L as FormField,
-  g as Icon,
-  A as IconButton,
-  P as InfoMessage,
-  R as Input,
-  w as InputField,
-  G as Label,
-  N as MenuLink,
-  T as MetaDataList,
-  q as ModalDialog,
-  E as MultiSelect,
-  K as OverlayCloseButton,
-  U as ProgrammeCard,
-  W as RadioButton,
-  Y as Repeater,
-  _ as SectionNotification,
-  oo as SelectListbox,
-  to as SelectProvider,
-  mo as Spinner,
-  xo as StatusPill,
-  io as Tooltip,
-  eo as useSelect
+  I as FieldHint,
+  L as Fieldset,
+  g as FormField,
+  A as Icon,
+  P as IconButton,
+  R as InfoMessage,
+  w as Input,
+  G as InputField,
+  N as Label,
+  T as MenuLink,
+  q as MetaDataList,
+  E as ModalDialog,
+  K as MultiSelect,
+  U as OverlayCloseButton,
+  W as ProgrammeCard,
+  Y as RadioButton,
+  _ as Repeater,
+  oo as SectionNotification,
+  to as SelectListbox,
+  po as SelectProvider,
+  xo as Spinner,
+  io as StatusPill,
+  lo as Tooltip,
+  mo 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

@@ -7,28 +7,29 @@ import { ButtonGroup as u } from "./components/ButtonGroup/ButtonGroup.js";
 import { Card as d } from "./components/Card/Card.js";
 import { Checkbox as S } from "./components/Checkbox/Checkbox.js";
 import { Drawer as M } from "./components/Drawer/Drawer.js";
-import { FieldHint as C } from "./components/FieldHint/FieldHint.js";
-import { FormField as L } from "./components/FormField/FormField.js";
-import { Icon as g } from "./components/Icon/Icon.js";
-import { IconButton as A } from "./components/IconButton/IconButton.js";
-import { InfoMessage as P } from "./components/InfoMessage/InfoMessage.js";
-import { Input as R } from "./components/Input/Input.js";
-import { InputField as w } from "./components/InputField/InputField.js";
-import { Label as G } from "./components/Label/Label.js";
-import { M as N } from "./MenuLink-CIzBwlKY.js";
-import { MetaDataList as T } from "./components/MetaDataList/MetaDataList.js";
-import { ModalDialog as q } from "./components/ModalDialog/ModalDialog.js";
-import { M as E } from "./MultiSelect-Cb4-L7lm.js";
-import { OverlayCloseButton as K } from "./components/OverlayCloseButton/OverlayCloseButton.js";
-import { ProgrammeCard as U } from "./components/ProgrammeCard/ProgrammeCard.js";
-import { RadioButton as W } from "./components/RadioButton/RadioButton.js";
-import { Repeater as Y } from "./components/Repeater/Repeater.js";
-import { SectionNotification as _ } from "./components/SectionNotification/SectionNotification.js";
-import { SelectListbox as oo } from "./components/SelectListbox/SelectListbox.js";
-import { SelectProvider as to, useSelect as eo } from "./components/SelectListbox/SelectProvider.js";
-import { Spinner as mo } from "./components/Spinner/Spinner.js";
-import { StatusPill as xo } from "./components/StatusPill/StatusPill.js";
-import { Tooltip as io } from "./components/Tooltip/Tooltip.js";
+import { FieldHint as I } from "./components/FieldHint/FieldHint.js";
+import { Fieldset as L } from "./components/Fieldset/Fieldset.js";
+import { FormField as g } from "./components/FormField/FormField.js";
+import { Icon as A } from "./components/Icon/Icon.js";
+import { IconButton as P } from "./components/IconButton/IconButton.js";
+import { InfoMessage as R } from "./components/InfoMessage/InfoMessage.js";
+import { Input as w } from "./components/Input/Input.js";
+import { InputField as G } from "./components/InputField/InputField.js";
+import { Label as N } from "./components/Label/Label.js";
+import { M as T } from "./MenuLink-CIzBwlKY.js";
+import { MetaDataList as q } from "./components/MetaDataList/MetaDataList.js";
+import { ModalDialog as E } from "./components/ModalDialog/ModalDialog.js";
+import { M as K } from "./MultiSelect-Cb4-L7lm.js";
+import { OverlayCloseButton as U } from "./components/OverlayCloseButton/OverlayCloseButton.js";
+import { ProgrammeCard as W } from "./components/ProgrammeCard/ProgrammeCard.js";
+import { RadioButton as Y } from "./components/RadioButton/RadioButton.js";
+import { Repeater as _ } from "./components/Repeater/Repeater.js";
+import { SectionNotification as oo } from "./components/SectionNotification/SectionNotification.js";
+import { SelectListbox as to } from "./components/SelectListbox/SelectListbox.js";
+import { SelectProvider as po, useSelect as mo } from "./components/SelectListbox/SelectProvider.js";
+import { Spinner as xo } from "./components/Spinner/Spinner.js";
+import { StatusPill as io } from "./components/StatusPill/StatusPill.js";
+import { Tooltip as lo } from "./components/Tooltip/Tooltip.js";
 export {
   t as Accordion,
   p as AppStatusBar,
@@ -39,28 +40,29 @@ export {
   d as Card,
   S as Checkbox,
   M as Drawer,
-  C as FieldHint,
-  L as FormField,
-  g as Icon,
-  A as IconButton,
-  P as InfoMessage,
-  R as Input,
-  w as InputField,
-  G as Label,
-  N as MenuLink,
-  T as MetaDataList,
-  q as ModalDialog,
-  E as MultiSelect,
-  K as OverlayCloseButton,
-  U as ProgrammeCard,
-  W as RadioButton,
-  Y as Repeater,
-  _ as SectionNotification,
-  oo as SelectListbox,
-  to as SelectProvider,
-  mo as Spinner,
-  xo as StatusPill,
-  io as Tooltip,
-  eo as useSelect
+  I as FieldHint,
+  L as Fieldset,
+  g as FormField,
+  A as Icon,
+  P as IconButton,
+  R as InfoMessage,
+  w as Input,
+  G as InputField,
+  N as Label,
+  T as MenuLink,
+  q as MetaDataList,
+  E as ModalDialog,
+  K as MultiSelect,
+  U as OverlayCloseButton,
+  W as ProgrammeCard,
+  Y as RadioButton,
+  _ as Repeater,
+  oo as SectionNotification,
+  to as SelectListbox,
+  po as SelectProvider,
+  xo as Spinner,
+  io as StatusPill,
+  lo as Tooltip,
+  mo 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.32.3",
+  "version": "1.33.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -67,7 +67,7 @@
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-react": "^7.34.2",
+    "eslint-plugin-react": "^7.34.3",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-refresh": "^0.4.7",
     "eslint-plugin-storybook": "^0.8.0",