@uva-glass/component-library 1.17.1 → 1.18.0

package/dist/assets/Backdrop.css

@@ -0,0 +1 @@
+._backdrop_k1x6d_1{bottom:0;left:0;position:fixed;right:0;top:0;z-index:100}@media (min-width: 28rem) and (min-height: 28rem){._backdrop_k1x6d_1{align-items:center;background:var(--color-black-transparent);display:flex;justify-content:center}}

package/dist/assets/Backdrop2.css

@@ -0,0 +1 @@
+.container{align-items:center;background-color:var(--color-white);border:2px dotted var(--color-black);display:flex;height:10rem;justify-content:center;padding:1rem;position:relative;width:10rem}

package/dist/assets/Container.css

@@ -1 +1 @@
-._container_13q1e_1{background-color:var(--color-white);border:2px dotted var(--color-black);padding:1rem;position:relative}._container--small_13q1e_8{height:10rem;width:10rem}._container--medium_13q1e_13{height:30rem;width:30rem}._container--large_13q1e_18{height:50rem;width:50rem}
+._container_u74kd_1{background-color:var(--color-white);border:2px dotted var(--color-black);padding:1rem;position:relative}._container--small_u74kd_8{height:10rem;width:10rem}._container--medium_u74kd_13{height:30rem;width:30rem}._container--large_u74kd_18{height:50rem;width:50rem}._container--hidden_u74kd_23{display:none}

package/dist/components/Backdrop/Backdrop.d.ts

@@ -0,0 +1,4 @@
+import { HTMLAttributes } from 'react';
+
+export type BackdropProps = Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'style'>;
+export declare const Backdrop: ({ children, ...restProps }: BackdropProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Backdrop/Backdrop.js

@@ -0,0 +1,8 @@
+import { jsx as r } from "react/jsx-runtime";
+import '../../assets/Backdrop.css';const s = "_backdrop_k1x6d_1", a = {
+  backdrop: s
+}, p = ({ children: o, ...c }) => /* @__PURE__ */ r("div", { ...c, className: a.backdrop, children: o });
+export {
+  p as Backdrop
+};
+//# sourceMappingURL=Backdrop.js.map

package/dist/components/Backdrop/Backdrop.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Backdrop.js","sources":["../../../src/components/Backdrop/Backdrop.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\n\nimport styles from './Backdrop.module.css';\n\nexport type BackdropProps = Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'style'>;\n\nexport const Backdrop = ({ children, ...restProps }: BackdropProps) => (\n  <div {...restProps} className={styles['backdrop']}>\n    {children}\n  </div>\n);\n"],"names":["Backdrop","children","restProps","jsx","styles"],"mappings":";;;GAMaA,IAAW,CAAC,EAAE,UAAAC,GAAU,GAAGC,EAAU,MAC/C,gBAAAC,EAAA,OAAA,EAAK,GAAGD,GAAW,WAAWE,EAAO,UACnC,UAAAH,EACH,CAAA;"}

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

@@ -0,0 +1,8 @@
+import { BackdropProps } from './Backdrop';
+
+type BackdropStoryProps = BackdropProps & {
+    visible: boolean;
+};
+declare const _default: import('@storybook/types').ComponentAnnotations<import('@storybook/react').ReactRenderer, BackdropStoryProps>;
+export default _default;
+export declare const BackdropExample: import('@storybook/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, BackdropStoryProps>;

package/dist/components/Backdrop/Backdrop.stories.js

@@ -0,0 +1,25 @@
+import { jsx as e } from "react/jsx-runtime";
+import { Backdrop as r } from "./Backdrop.js";
+import { Container as i } from "../storyComponents/Container/Container.js";
+import '../../assets/Backdrop2.css';const s = {
+  title: "Atoms/Backdrop",
+  component: r,
+  argTypes: {
+    children: {
+      control: "text"
+    },
+    visible: {
+      control: "boolean",
+      name: "Show Backdrop"
+    }
+  }
+}, t = (o) => /* @__PURE__ */ e(i, { visible: o.visible, children: /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e("div", { className: "container", children: o.children }) }) }), n = t.bind({});
+n.args = {
+  visible: !0,
+  children: "Dummy Overlay"
+};
+export {
+  n as BackdropExample,
+  s as default
+};
+//# sourceMappingURL=Backdrop.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Backdrop.stories.js","sources":["../../../src/components/Backdrop/Backdrop.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { BackdropProps } from './Backdrop';\n\nimport { Backdrop } from './Backdrop';\n\nimport { Container } from 'components/storyComponents/Container';\n\nimport './Backdrop.stories.css';\n\ntype BackdropStoryProps = BackdropProps & { visible: boolean };\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/Backdrop',\n  component: Backdrop,\n  argTypes: {\n    children: {\n      control: 'text',\n    },\n    visible: {\n      control: 'boolean',\n      name: 'Show Backdrop',\n    },\n  },\n} as Meta<BackdropStoryProps>;\n\nconst Template: StoryFn<BackdropStoryProps> = (args) => {\n  return (\n    <Container visible={args.visible}>\n      <Backdrop>\n        <div className=\"container\">{args.children}</div>\n      </Backdrop>\n    </Container>\n  );\n};\n\nexport const BackdropExample = Template.bind({});\nBackdropExample.args = {\n  visible: true,\n  children: 'Dummy Overlay',\n};\n"],"names":["Backdrop_stories","Backdrop","Template","args","jsx","Container","BackdropExample"],"mappings":";;;AAYA,MAAeA,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,UAAU;AAAA,MACR,SAAS;AAAA,IACX;AAAA,IACA,SAAS;AAAA,MACP,SAAS;AAAA,MACT,MAAM;AAAA,IACR;AAAA,EACF;AACF,GAEMC,IAAwC,CAACC,MAE1C,gBAAAC,EAAAC,GAAA,EAAU,SAASF,EAAK,SACvB,UAAC,gBAAAC,EAAAH,GAAA,EACC,UAAC,gBAAAG,EAAA,OAAA,EAAI,WAAU,aAAa,UAAKD,EAAA,SAAS,CAAA,GAC5C,EACF,CAAA,GAISG,IAAkBJ,EAAS,KAAK,EAAE;AAC/CI,EAAgB,OAAO;AAAA,EACrB,SAAS;AAAA,EACT,UAAU;AACZ;"}

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

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

package/dist/components/Backdrop/index.js

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

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

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

package/dist/components/index.d.ts

@@ -1,4 +1,5 @@
 export * from './AppStatusBar';
+export * from './Backdrop';
 export * from './Button';
 export * from './Card';
 export * from './FieldHint';

package/dist/components/index.js

@@ -1,40 +1,42 @@
 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 { FieldHint as n } from "./FieldHint/FieldHint.js";
-import { Icon as a } from "./Icon/Icon.js";
-import { IconButton as l } from "./IconButton/IconButton.js";
-import { InfoMessage as c } from "./InfoMessage/InfoMessage.js";
-import { Input as d } from "./Input/Input.js";
-import { InputField as I } from "./InputField/InputField.js";
-import { Label as M } from "./Label/Label.js";
-import { M as v } from "../MenuLink-DDAin3rf.js";
-import { MetaDataList as F } from "./MetaDataList/MetaDataList.js";
-import { OverlayCloseButton as k } from "./OverlayCloseButton/OverlayCloseButton.js";
-import { RadioButton as A } from "./RadioButton/RadioButton.js";
-import { SectionNotification as H } from "./SectionNotification/SectionNotification.js";
-import { SelectListbox as O } from "./SelectListbox/SelectListbox.js";
-import { SelectProvider as R, useSelect as h } from "./SelectListbox/SelectProvider.js";
-import { Spinner as q } from "./Spinner/Spinner.js";
+import { Backdrop as p } from "./Backdrop/Backdrop.js";
+import { Button as x } from "./Button/Button.js";
+import { Card as n } from "./Card/Card.js";
+import { FieldHint as i } from "./FieldHint/FieldHint.js";
+import { Icon as c } from "./Icon/Icon.js";
+import { IconButton as s } from "./IconButton/IconButton.js";
+import { InfoMessage as B } from "./InfoMessage/InfoMessage.js";
+import { Input as I } from "./Input/Input.js";
+import { InputField as M } from "./InputField/InputField.js";
+import { Label as k } from "./Label/Label.js";
+import { M as C } from "../MenuLink-DDAin3rf.js";
+import { MetaDataList as g } from "./MetaDataList/MetaDataList.js";
+import { OverlayCloseButton as A } from "./OverlayCloseButton/OverlayCloseButton.js";
+import { RadioButton as H } from "./RadioButton/RadioButton.js";
+import { SectionNotification as O } from "./SectionNotification/SectionNotification.js";
+import { SelectListbox as R } from "./SelectListbox/SelectListbox.js";
+import { SelectProvider as j, useSelect as q } from "./SelectListbox/SelectProvider.js";
+import { Spinner as z } from "./Spinner/Spinner.js";
 export {
   t as AppStatusBar,
-  p as Button,
-  x as Card,
-  n as FieldHint,
-  a as Icon,
-  l as IconButton,
-  c as InfoMessage,
-  d as Input,
-  I as InputField,
-  M as Label,
-  v as MenuLink,
-  F as MetaDataList,
-  k as OverlayCloseButton,
-  A as RadioButton,
-  H as SectionNotification,
-  O as SelectListbox,
-  R as SelectProvider,
-  q as Spinner,
-  h as useSelect
+  p as Backdrop,
+  x as Button,
+  n as Card,
+  i as FieldHint,
+  c as Icon,
+  s as IconButton,
+  B as InfoMessage,
+  I as Input,
+  M as InputField,
+  k as Label,
+  C as MenuLink,
+  g as MetaDataList,
+  A as OverlayCloseButton,
+  H as RadioButton,
+  O as SectionNotification,
+  R as SelectListbox,
+  j as SelectProvider,
+  z as Spinner,
+  q 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/components/storyComponents/Container/Container.d.ts

@@ -2,6 +2,7 @@ import { PropsWithChildren } from 'react';
 
 interface ContainerProps {
     size?: 'small' | 'medium' | 'large';
+    visible?: boolean;
 }
-export declare const Container: ({ children, size }: PropsWithChildren<ContainerProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const Container: ({ children, size, visible }: PropsWithChildren<ContainerProps>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/storyComponents/Container/Container.js

@@ -1,26 +1,28 @@
-import { jsxs as o, Fragment as t, jsx as r } from "react/jsx-runtime";
-import { c as i } from "../../../clsx-DB4S2d7J.js";
-import '../../../assets/Container.css';const c = "_container_13q1e_1", n = {
-  container: c,
-  "container--small": "_container--small_13q1e_8",
-  "container--medium": "_container--medium_13q1e_13",
-  "container--large": "_container--large_13q1e_18"
-}, s = ({ children: a, size: e = "medium" }) => /* @__PURE__ */ o(t, { children: [
+import { jsxs as t, Fragment as o, jsx as r } from "react/jsx-runtime";
+import { c } from "../../../clsx-DB4S2d7J.js";
+import '../../../assets/Container.css';const d = "_container_u74kd_1", n = {
+  container: d,
+  "container--small": "_container--small_u74kd_8",
+  "container--medium": "_container--medium_u74kd_13",
+  "container--large": "_container--large_u74kd_18",
+  "container--hidden": "_container--hidden_u74kd_23"
+}, _ = ({ children: a, size: e = "medium", visible: i = !0 }) => /* @__PURE__ */ t(o, { children: [
   /* @__PURE__ */ r("label", { htmlFor: "container", children: "Storybook container with 1rem padding" }),
   /* @__PURE__ */ r(
     "div",
     {
       id: "container",
-      className: i(n.container, {
+      className: c(n.container, {
         [n["container--small"]]: e === "small",
         [n["container--medium"]]: e === "medium",
-        [n["container--large"]]: e === "large"
+        [n["container--large"]]: e === "large",
+        [n["container--hidden"]]: !i
       }),
       children: a
     }
   )
 ] });
 export {
-  s as Container
+  _ as Container
 };
 //# sourceMappingURL=Container.js.map

package/dist/components/storyComponents/Container/Container.js.map

@@ -1 +1 @@
-{"version":3,"file":"Container.js","sources":["../../../../src/components/storyComponents/Container/Container.tsx"],"sourcesContent":["import clsx from 'clsx';\n\nimport type { PropsWithChildren } from 'react';\n\nimport styles from './Container.module.css';\n\ninterface ContainerProps {\n  size?: 'small' | 'medium' | 'large';\n}\n\nexport const Container = ({ children, size = 'medium' }: PropsWithChildren<ContainerProps>) => {\n  return (\n    <>\n      <label htmlFor=\"container\">Storybook container with 1rem padding</label>\n      <div\n        id=\"container\"\n        className={clsx(styles['container'], {\n          [styles['container--small']]: size === 'small',\n          [styles['container--medium']]: size === 'medium',\n          [styles['container--large']]: size === 'large',\n        })}\n      >\n        {children}\n      </div>\n    </>\n  );\n};\n"],"names":["Container","children","size","jsxs","Fragment","jsx","clsx","styles"],"mappings":";;;;;;;GAUaA,IAAY,CAAC,EAAE,UAAAC,GAAU,MAAAC,IAAO,eAGvC,gBAAAC,EAAAC,GAAA,EAAA,UAAA;AAAA,EAAC,gBAAAC,EAAA,SAAA,EAAM,SAAQ,aAAY,UAAqC,yCAAA;AAAA,EAChE,gBAAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAG;AAAA,MACH,WAAWC,EAAKC,EAAO,WAAc;AAAA,QACnC,CAACA,EAAO,kBAAkB,CAAC,GAAGL,MAAS;AAAA,QACvC,CAACK,EAAO,mBAAmB,CAAC,GAAGL,MAAS;AAAA,QACxC,CAACK,EAAO,kBAAkB,CAAC,GAAGL,MAAS;AAAA,MAAA,CACxC;AAAA,MAEA,UAAAD;AAAA,IAAA;AAAA,EACH;AACF,EAAA,CAAA;"}
+{"version":3,"file":"Container.js","sources":["../../../../src/components/storyComponents/Container/Container.tsx"],"sourcesContent":["import clsx from 'clsx';\n\nimport type { PropsWithChildren } from 'react';\n\nimport styles from './Container.module.css';\n\ninterface ContainerProps {\n  size?: 'small' | 'medium' | 'large';\n  visible?: boolean;\n}\n\nexport const Container = ({ children, size = 'medium', visible = true }: PropsWithChildren<ContainerProps>) => {\n  return (\n    <>\n      <label htmlFor=\"container\">Storybook container with 1rem padding</label>\n      <div\n        id=\"container\"\n        className={clsx(styles['container'], {\n          [styles['container--small']]: size === 'small',\n          [styles['container--medium']]: size === 'medium',\n          [styles['container--large']]: size === 'large',\n          [styles['container--hidden']]: !visible,\n        })}\n      >\n        {children}\n      </div>\n    </>\n  );\n};\n"],"names":["Container","children","size","visible","jsxs","Fragment","jsx","clsx","styles"],"mappings":";;;;;;;;GAWaA,IAAY,CAAC,EAAE,UAAAC,GAAU,MAAAC,IAAO,UAAU,SAAAC,IAAU,SAG3D,gBAAAC,EAAAC,GAAA,EAAA,UAAA;AAAA,EAAC,gBAAAC,EAAA,SAAA,EAAM,SAAQ,aAAY,UAAqC,yCAAA;AAAA,EAChE,gBAAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAG;AAAA,MACH,WAAWC,EAAKC,EAAO,WAAc;AAAA,QACnC,CAACA,EAAO,kBAAkB,CAAC,GAAGN,MAAS;AAAA,QACvC,CAACM,EAAO,mBAAmB,CAAC,GAAGN,MAAS;AAAA,QACxC,CAACM,EAAO,kBAAkB,CAAC,GAAGN,MAAS;AAAA,QACvC,CAACM,EAAO,mBAAmB,CAAC,GAAG,CAACL;AAAA,MAAA,CACjC;AAAA,MAEA,UAAAF;AAAA,IAAA;AAAA,EACH;AACF,EAAA,CAAA;"}

package/dist/index.js

@@ -1,40 +1,42 @@
 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 { FieldHint as n } from "./components/FieldHint/FieldHint.js";
-import { Icon as a } from "./components/Icon/Icon.js";
-import { IconButton as l } from "./components/IconButton/IconButton.js";
-import { InfoMessage as c } from "./components/InfoMessage/InfoMessage.js";
-import { Input as d } from "./components/Input/Input.js";
-import { InputField as I } from "./components/InputField/InputField.js";
-import { Label as M } from "./components/Label/Label.js";
-import { M as v } from "./MenuLink-DDAin3rf.js";
-import { MetaDataList as F } from "./components/MetaDataList/MetaDataList.js";
-import { OverlayCloseButton as k } from "./components/OverlayCloseButton/OverlayCloseButton.js";
-import { RadioButton as A } from "./components/RadioButton/RadioButton.js";
-import { SectionNotification as H } from "./components/SectionNotification/SectionNotification.js";
-import { SelectListbox as O } from "./components/SelectListbox/SelectListbox.js";
-import { SelectProvider as R, useSelect as h } from "./components/SelectListbox/SelectProvider.js";
-import { Spinner as q } from "./components/Spinner/Spinner.js";
+import { Backdrop as p } from "./components/Backdrop/Backdrop.js";
+import { Button as x } from "./components/Button/Button.js";
+import { Card as n } from "./components/Card/Card.js";
+import { FieldHint as i } from "./components/FieldHint/FieldHint.js";
+import { Icon as c } from "./components/Icon/Icon.js";
+import { IconButton as s } from "./components/IconButton/IconButton.js";
+import { InfoMessage as B } from "./components/InfoMessage/InfoMessage.js";
+import { Input as I } from "./components/Input/Input.js";
+import { InputField as M } from "./components/InputField/InputField.js";
+import { Label as k } from "./components/Label/Label.js";
+import { M as C } from "./MenuLink-DDAin3rf.js";
+import { MetaDataList as g } from "./components/MetaDataList/MetaDataList.js";
+import { OverlayCloseButton as A } from "./components/OverlayCloseButton/OverlayCloseButton.js";
+import { RadioButton as H } from "./components/RadioButton/RadioButton.js";
+import { SectionNotification as O } from "./components/SectionNotification/SectionNotification.js";
+import { SelectListbox as R } from "./components/SelectListbox/SelectListbox.js";
+import { SelectProvider as j, useSelect as q } from "./components/SelectListbox/SelectProvider.js";
+import { Spinner as z } from "./components/Spinner/Spinner.js";
 export {
   t as AppStatusBar,
-  p as Button,
-  x as Card,
-  n as FieldHint,
-  a as Icon,
-  l as IconButton,
-  c as InfoMessage,
-  d as Input,
-  I as InputField,
-  M as Label,
-  v as MenuLink,
-  F as MetaDataList,
-  k as OverlayCloseButton,
-  A as RadioButton,
-  H as SectionNotification,
-  O as SelectListbox,
-  R as SelectProvider,
-  q as Spinner,
-  h as useSelect
+  p as Backdrop,
+  x as Button,
+  n as Card,
+  i as FieldHint,
+  c as Icon,
+  s as IconButton,
+  B as InfoMessage,
+  I as Input,
+  M as InputField,
+  k as Label,
+  C as MenuLink,
+  g as MetaDataList,
+  A as OverlayCloseButton,
+  H as RadioButton,
+  O as SectionNotification,
+  R as SelectListbox,
+  j as SelectProvider,
+  z as Spinner,
+  q 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.17.1",
+  "version": "1.18.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -52,7 +52,7 @@
     "@storybook/react": "^8.1.5",
     "@storybook/react-vite": "^8.1.5",
     "@storybook/test": "^8.1.5",
-    "@types/node": "^20.12.12",
+    "@types/node": "^20.12.13",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^7.11.0",