@uva-glass/component-library 1.3.1 → 1.3.3

package/dist/components/hooks/usePositionedFloaters.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePositionedFloaters.js","sources":["../../../src/components/hooks/usePositionedFloaters.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\ninterface positionProps {\n  style: {\n    style: {\n      inset: string;\n    };\n  };\n  buttonStyle: {\n    buttonStyle: {\n      width: string;\n    };\n  };\n  status: boolean;\n}\n\ninterface optionProps {\n  mouseEvent: 'click' | 'hover';\n  position: 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';\n  offset: number;\n  maxFixedHeight?: `${number}${'px' | 'rem'}`;\n  horizontalPosition?: 'left' | 'right';\n}\n\nconst BODY_PADDING = 10;\nconst MIN_HEIGHT = 80;\nconst MIN_WIDTH = 220;\n\nexport function usePositionedFloaters<T extends HTMLElement = HTMLElement>(\n  positionedElement: T | null,\n  referenceElement: T | null,\n  options: optionProps\n): positionProps {\n  const [status, setStatus] = useState(false);\n  const defaultStyle = {\n    inset: '0 auto auto 0',\n    opacity: 0,\n    maxHeight: '100%',\n    maxWidth: '100%',\n    overflowX: 'hidden',\n    overflowY: 'auto',\n    margin: '0rem',\n  };\n\n  const [style, setStyle] = useState(defaultStyle);\n  const [buttonStyle, setButtonStyle] = useState({ width: 'auto' });\n\n  const sizeToPx = (size: `${number}${'px' | 'rem'}`): number => {\n    const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);\n    return size.indexOf('rem') !== -1 ? parseFloat(size) * rootFontSize : parseFloat(size);\n  };\n\n  const setHeight = (refRect: DOMRect, pos: string): number => {\n    if (!refRect) return 0;\n\n    const _maxHeight =\n      pos === 'bottom'\n        ? window.innerHeight - refRect.bottom - options.offset - BODY_PADDING\n        : refRect.top - options.offset - BODY_PADDING;\n\n    return !options.maxFixedHeight || sizeToPx(options.maxFixedHeight) > _maxHeight\n      ? _maxHeight\n      : sizeToPx(options.maxFixedHeight);\n  };\n\n  const setWidth = (refRect: DOMRect, pos: string): number => {\n    if (!refRect) return 0;\n\n    const _availableWidth =\n      pos === 'left' ? window.innerWidth - refRect.left - BODY_PADDING : refRect.right - BODY_PADDING;\n\n    return _availableWidth <= MIN_WIDTH ? MIN_WIDTH : _availableWidth;\n  };\n\n  const calcPosition = (): typeof defaultStyle => {\n    const positionedRect = (positionedElement as HTMLElement | null)?.getBoundingClientRect();\n    const referenceRect = (referenceElement as HTMLElement | null)?.getBoundingClientRect();\n    let yPos = 'bottom';\n    let xPos = 'left';\n\n    if (!referenceRect || !positionedRect) {\n      return defaultStyle;\n    }\n\n    setButtonStyle({ width: positionedRect.width + 'px' });\n\n    if (window.innerHeight - referenceRect.bottom - BODY_PADDING < MIN_HEIGHT) {\n      yPos = 'top';\n    }\n\n    if (window.innerWidth - referenceRect.left - BODY_PADDING < MIN_WIDTH || options.horizontalPosition === 'right') {\n      xPos = 'right';\n    }\n\n    return {\n      inset: `${yPos === 'bottom' ? referenceRect[yPos] + 'px' : 'auto'}\n              ${xPos === 'right' ? window.innerWidth - referenceRect[xPos] + 'px' : 'auto'}\n              ${yPos === 'top' ? window.innerHeight - referenceRect[yPos] + 'px' : 'auto'}\n              ${xPos === 'left' ? referenceRect[xPos] + 'px' : 'auto'}`,\n      maxHeight: `${setHeight(referenceRect, yPos)}px`,\n      maxWidth: `${setWidth(referenceRect, xPos)}px`,\n      overflowX: 'hidden',\n      overflowY: 'auto',\n      opacity: 1,\n      margin: `${options.offset}px 0`,\n    };\n  };\n\n  const handleMouseEvent = (): void => {\n    setStyle({\n      ...style,\n      ...calcPosition(),\n    });\n    setStatus(true);\n  };\n\n  const updatePosition = (): void => {\n    if (status) {\n      setStyle({\n        ...style,\n        ...calcPosition(),\n      });\n    }\n  };\n\n  const handleClickOutside = (evt: Event): void => {\n    if (\n      !referenceElement ||\n      (referenceElement as unknown as HTMLElement).contains(evt.target as Node) ||\n      !positionedElement ||\n      (positionedElement as unknown as HTMLElement).contains(evt.target as Node)\n    ) {\n      return;\n    }\n  };\n\n  useEffect(() => {\n    if (referenceElement !== null) {\n      if (options.mouseEvent === 'click') {\n        // eslint-disable-next-line no-extra-semi\n        (referenceElement as unknown as HTMLElement).addEventListener('click', handleMouseEvent);\n      } else {\n        // eslint-disable-next-line no-extra-semi\n        (referenceElement as unknown as HTMLElement).addEventListener('mouseenter', handleMouseEvent);\n        // eslint-disable-next-line no-extra-semi\n        (referenceElement as unknown as HTMLElement).addEventListener('mouseleave', handleClickOutside);\n      }\n      document.addEventListener('mousedown', handleClickOutside);\n      document.addEventListener('touchstart', handleClickOutside);\n      window.addEventListener('resize', updatePosition);\n    }\n\n    return () => {\n      if (referenceElement !== null) {\n        if (options.mouseEvent === 'click') {\n          // eslint-disable-next-line no-extra-semi\n          (referenceElement as unknown as HTMLElement).removeEventListener('click', handleMouseEvent);\n        } else {\n          // eslint-disable-next-line no-extra-semi\n          (referenceElement as unknown as HTMLElement).removeEventListener('mouseenter', handleMouseEvent);\n          // eslint-disable-next-line no-extra-semi\n          (referenceElement as unknown as HTMLElement).removeEventListener('mouseleave', handleClickOutside);\n        }\n        document.removeEventListener('mousedown', handleClickOutside);\n        document.removeEventListener('touchstart', handleClickOutside);\n        window.removeEventListener('resize', updatePosition);\n      }\n    };\n  });\n\n  return {\n    style: {\n      style,\n    },\n    buttonStyle: {\n      buttonStyle,\n    },\n    status,\n  };\n}\n"],"names":["BODY_PADDING","MIN_HEIGHT","MIN_WIDTH","usePositionedFloaters","positionedElement","referenceElement","options","status","setStatus","useState","defaultStyle","style","setStyle","buttonStyle","setButtonStyle","sizeToPx","size","rootFontSize","setHeight","refRect","pos","_maxHeight","setWidth","_availableWidth","calcPosition","positionedRect","referenceRect","yPos","xPos","handleMouseEvent","updatePosition","handleClickOutside","evt","useEffect"],"mappings":"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"}
+{"version":3,"file":"usePositionedFloaters.js","sources":["../../../src/components/hooks/usePositionedFloaters.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport { useDebounce } from './useDebounce';\n\ninterface positionProps {\n  style: {\n    style: {\n      inset: string;\n    };\n  };\n  status: boolean;\n}\n\ninterface optionProps {\n  mouseEvent: 'click' | 'hover';\n  position: 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';\n  offset: number;\n  maxFixedHeight?: `${number}${'px' | 'rem'}`;\n  horizontalPosition?: 'left' | 'right';\n  mobileBreakpoint?: `${number}${'px' | 'rem'}`;\n}\n\nconst BODY_PADDING = 10;\nconst MIN_HEIGHT = 45;\nconst MIN_WIDTH = 300;\nconst DEBOUNCE_DELAY = 0;\nconst MOBILE_BREAKPOINT = 768;\nconst HALF = 2;\n\nexport function usePositionedFloaters<T extends HTMLElement = HTMLElement>(\n  positionedElement: T | null,\n  referenceElement: T | null,\n  options: optionProps\n): positionProps {\n  const [status, setStatus] = useState(false);\n  const defaultStyle = {\n    inset: '0 auto auto 0',\n    opacity: 0,\n    maxHeight: '100%',\n    maxWidth: '100%',\n    overflowX: 'hidden',\n    overflowY: 'auto',\n    margin: '0rem',\n  };\n\n  const [style, setStyle] = useState(defaultStyle);\n\n  const sizeToPx = (size: `${number}${'px' | 'rem'}`): number => {\n    const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);\n    return size.indexOf('rem') !== -1 ? parseFloat(size) * rootFontSize : parseFloat(size);\n  };\n\n  const setHeight = (refRect: DOMRect, pos: string): number => {\n    if (!refRect) return 0;\n\n    const _maxHeight =\n      pos === 'bottom'\n        ? window.innerHeight - refRect.bottom - options.offset - BODY_PADDING\n        : refRect.top - options.offset - BODY_PADDING;\n\n    return !options.maxFixedHeight || sizeToPx(options.maxFixedHeight) > _maxHeight\n      ? _maxHeight\n      : sizeToPx(options.maxFixedHeight);\n  };\n\n  const setWidth = (refRect: DOMRect, pos: string): number => {\n    if (!refRect) return 0;\n\n    const _availableWidth =\n      pos === 'left' ? window.innerWidth - refRect.left - BODY_PADDING : refRect.right - BODY_PADDING;\n\n    return _availableWidth <= MIN_WIDTH ? MIN_WIDTH : _availableWidth;\n  };\n\n  const setLeft = (refRect: DOMRect, posRect: DOMRect, isMobile: boolean) => {\n    if (isMobile) {\n      return `${refRect.left - Math.abs(posRect.width - refRect.width) / HALF}px`;\n    } else {\n      return `${refRect.left}px`;\n    }\n  };\n\n  const calcPosition = (): typeof defaultStyle => {\n    const positionedRect = (positionedElement as HTMLElement | null)?.getBoundingClientRect();\n    const referenceRect = (referenceElement as HTMLElement | null)?.getBoundingClientRect();\n    let yPos = 'bottom';\n    let xPos = 'left';\n\n    const isMobile = window.matchMedia(\n      `(max-width: ${options.mobileBreakpoint ? sizeToPx(options.mobileBreakpoint) : MOBILE_BREAKPOINT}px)`\n    ).matches;\n\n    if (!referenceRect || !positionedRect) {\n      return defaultStyle;\n    }\n\n    if (window.innerHeight - referenceRect.bottom - BODY_PADDING < MIN_HEIGHT) {\n      yPos = 'top';\n    }\n\n    if (\n      (window.innerWidth - referenceRect.left - BODY_PADDING < MIN_WIDTH || options.horizontalPosition === 'right') &&\n      !isMobile\n    ) {\n      xPos = 'right';\n    }\n\n    return {\n      inset: `${yPos === 'bottom' ? referenceRect[yPos] + 'px' : 'auto'}\n              ${xPos === 'right' ? window.innerWidth - referenceRect[xPos] + 'px' : 'auto'}\n              ${yPos === 'top' ? window.innerHeight - referenceRect[yPos] + 'px' : 'auto'}\n              ${xPos === 'left' ? setLeft(referenceRect, positionedRect, isMobile) : 'auto'}`,\n      maxHeight: `${setHeight(referenceRect, yPos)}px`,\n      maxWidth: `${setWidth(referenceRect, xPos)}px`,\n      overflowX: 'hidden',\n      overflowY: 'auto',\n      opacity: 1,\n      margin: `${options.offset}px 0`,\n    };\n  };\n\n  const handleMouseEvent = (): void => {\n    setStyle({\n      ...style,\n      ...calcPosition(),\n    });\n    setStatus(true);\n  };\n\n  const updatePosition = (): void => {\n    if (status) {\n      setStyle({\n        ...style,\n        ...calcPosition(),\n      });\n    }\n  };\n\n  const handleClickOutside = (evt: Event): void => {\n    if (\n      !referenceElement ||\n      (referenceElement as unknown as HTMLElement).contains(evt.target as Node) ||\n      !positionedElement ||\n      (positionedElement as unknown as HTMLElement).contains(evt.target as Node)\n    ) {\n      return;\n    }\n  };\n\n  const debouncedUpdatePosition = useDebounce(updatePosition, DEBOUNCE_DELAY);\n\n  useEffect(() => {\n    if (referenceElement !== null) {\n      if (options.mouseEvent === 'click') {\n        // eslint-disable-next-line no-extra-semi\n        (referenceElement as unknown as HTMLElement).addEventListener('click', handleMouseEvent);\n      } else {\n        // eslint-disable-next-line no-extra-semi\n        (referenceElement as unknown as HTMLElement).addEventListener('mouseenter', handleMouseEvent);\n        // eslint-disable-next-line no-extra-semi\n        (referenceElement as unknown as HTMLElement).addEventListener('mouseleave', handleClickOutside);\n      }\n      document.addEventListener('mousedown', handleClickOutside);\n      document.addEventListener('touchstart', handleClickOutside);\n      window.addEventListener('resize', debouncedUpdatePosition);\n    }\n\n    return () => {\n      if (referenceElement !== null) {\n        if (options.mouseEvent === 'click') {\n          // eslint-disable-next-line no-extra-semi\n          (referenceElement as unknown as HTMLElement).removeEventListener('click', handleMouseEvent);\n        } else {\n          // eslint-disable-next-line no-extra-semi\n          (referenceElement as unknown as HTMLElement).removeEventListener('mouseenter', handleMouseEvent);\n          // eslint-disable-next-line no-extra-semi\n          (referenceElement as unknown as HTMLElement).removeEventListener('mouseleave', handleClickOutside);\n        }\n        document.removeEventListener('mousedown', handleClickOutside);\n        document.removeEventListener('touchstart', handleClickOutside);\n        window.removeEventListener('resize', debouncedUpdatePosition);\n      }\n    };\n  });\n\n  return {\n    style: {\n      style,\n    },\n    status,\n  };\n}\n"],"names":["BODY_PADDING","MIN_HEIGHT","MIN_WIDTH","DEBOUNCE_DELAY","MOBILE_BREAKPOINT","HALF","usePositionedFloaters","positionedElement","referenceElement","options","status","setStatus","useState","defaultStyle","style","setStyle","sizeToPx","size","rootFontSize","setHeight","refRect","pos","_maxHeight","setWidth","_availableWidth","setLeft","posRect","isMobile","calcPosition","positionedRect","referenceRect","yPos","xPos","handleMouseEvent","updatePosition","handleClickOutside","evt","debouncedUpdatePosition","useDebounce","useEffect"],"mappings":"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"}

package/dist/components/hooks/useResponsive.d.ts

@@ -0,0 +1,19 @@
+declare const BREAKPOINTS: {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    xxl: number;
+};
+type BreakpointState = Record<keyof typeof BREAKPOINTS, boolean>;
+type InitialBreakpoints = keyof typeof BREAKPOINTS | '_initial';
+type Orientation = 'portrait' | 'landscape' | null;
+type ResponsiveState = {
+    greaterThan: BreakpointState;
+    lessThan: BreakpointState;
+    orientation: Orientation;
+    mediaType: InitialBreakpoints;
+};
+export declare const useResponsive: () => ResponsiveState;
+export {};

package/dist/components/hooks/useResponsive.js

@@ -0,0 +1,33 @@
+import { useState as p, useEffect as u } from "react";
+const m = {
+  xs: 375,
+  sm: 576,
+  md: 768,
+  lg: 992,
+  xl: 1200,
+  xxl: 1400
+}, h = () => {
+  const a = (e, t) => t ? `(min-width: ${e}px)` : `(max-width: ${e - 1}px)`, n = (e) => typeof window < "u" ? window.matchMedia(e).matches : !1, i = () => {
+    const e = {
+      xs: !1,
+      sm: !1,
+      md: !1,
+      lg: !1,
+      xl: !1,
+      xxl: !1
+    }, t = { ...e }, r = { ...e };
+    Object.entries(m).forEach(([s, o]) => {
+      t[s] = n(a(o, !0)), r[s] = n(a(o, !1));
+    });
+    const d = n("(orientation: portrait)") ? "portrait" : n("(orientation: landscape)") ? "landscape" : null, f = Object.keys(t).findLast((s) => t[s]) || "_initial";
+    return { greaterThan: t, lessThan: r, orientation: d, mediaType: f };
+  }, [c, l] = p(i());
+  return u(() => {
+    const e = () => l(i());
+    return window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
+  }, []), c;
+};
+export {
+  h as useResponsive
+};
+//# sourceMappingURL=useResponsive.js.map

package/dist/components/hooks/useResponsive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useResponsive.js","sources":["../../../src/components/hooks/useResponsive.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nconst BREAKPOINTS = {\n  xs: 375,\n  sm: 576,\n  md: 768,\n  lg: 992,\n  xl: 1200,\n  xxl: 1400,\n};\n\ntype BreakpointState = Record<keyof typeof BREAKPOINTS, boolean>;\ntype InitialBreakpoints = keyof typeof BREAKPOINTS | '_initial';\ntype Orientation = 'portrait' | 'landscape' | null;\ntype ResponsiveState = {\n  greaterThan: BreakpointState;\n  lessThan: BreakpointState;\n  orientation: Orientation;\n  mediaType: InitialBreakpoints;\n};\n\nexport const useResponsive = (): ResponsiveState => {\n  const getMediaQuery = (size: number, greater: boolean): string => {\n    return greater ? `(min-width: ${size}px)` : `(max-width: ${size - 1}px)`;\n  };\n\n  const getMatches = (query: string) => {\n    if (typeof window !== 'undefined') {\n      return window.matchMedia(query).matches;\n    }\n    return false;\n  };\n\n  const createResponsiveObject = () => {\n    const initialBreakpointState: BreakpointState = {\n      xs: false,\n      sm: false,\n      md: false,\n      lg: false,\n      xl: false,\n      xxl: false,\n    };\n\n    const greaterThan = { ...initialBreakpointState };\n    const lessThan = { ...initialBreakpointState };\n\n    Object.entries(BREAKPOINTS).forEach(([key, size]) => {\n      greaterThan[key as keyof typeof BREAKPOINTS] = getMatches(getMediaQuery(size, true));\n      lessThan[key as keyof typeof BREAKPOINTS] = getMatches(getMediaQuery(size, false));\n    });\n\n    const orientation: Orientation = getMatches('(orientation: portrait)')\n      ? 'portrait'\n      : getMatches('(orientation: landscape)')\n        ? 'landscape'\n        : null;\n\n    const mediaType = (Object.keys(greaterThan).findLast((key) => greaterThan[key as keyof typeof greaterThan]) ||\n      '_initial') as InitialBreakpoints;\n\n    return { greaterThan, lessThan, orientation, mediaType };\n  };\n\n  const [responsive, setResponsive] = useState(createResponsiveObject());\n\n  useEffect(() => {\n    const handleChange = () => setResponsive(createResponsiveObject());\n\n    window.addEventListener('resize', handleChange);\n\n    return () => window.removeEventListener('resize', handleChange);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  return responsive;\n};\n"],"names":["BREAKPOINTS","useResponsive","getMediaQuery","size","greater","getMatches","query","createResponsiveObject","initialBreakpointState","greaterThan","lessThan","key","orientation","mediaType","responsive","setResponsive","useState","useEffect","handleChange"],"mappings":";AAEA,MAAMA,IAAc;AAAA,EAClB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,KAAK;AACP,GAYaC,IAAgB,MAAuB;AAC5C,QAAAC,IAAgB,CAACC,GAAcC,MAC5BA,IAAU,eAAeD,CAAI,QAAQ,eAAeA,IAAO,CAAC,OAG/DE,IAAa,CAACC,MACd,OAAO,SAAW,MACb,OAAO,WAAWA,CAAK,EAAE,UAE3B,IAGHC,IAAyB,MAAM;AACnC,UAAMC,IAA0C;AAAA,MAC9C,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,KAAK;AAAA,IAAA,GAGDC,IAAc,EAAE,GAAGD,KACnBE,IAAW,EAAE,GAAGF;AAEf,WAAA,QAAQR,CAAW,EAAE,QAAQ,CAAC,CAACW,GAAKR,CAAI,MAAM;AACnD,MAAAM,EAAYE,CAA+B,IAAIN,EAAWH,EAAcC,GAAM,EAAI,CAAC,GACnFO,EAASC,CAA+B,IAAIN,EAAWH,EAAcC,GAAM,EAAK,CAAC;AAAA,IAAA,CAClF;AAEK,UAAAS,IAA2BP,EAAW,yBAAyB,IACjE,aACAA,EAAW,0BAA0B,IACnC,cACA,MAEAQ,IAAa,OAAO,KAAKJ,CAAW,EAAE,SAAS,CAACE,MAAQF,EAAYE,CAA+B,CAAC,KACxG;AAEF,WAAO,EAAE,aAAAF,GAAa,UAAAC,GAAU,aAAAE,GAAa,WAAAC,EAAU;AAAA,EAAA,GAGnD,CAACC,GAAYC,CAAa,IAAIC,EAAST,EAAwB,CAAA;AAErE,SAAAU,EAAU,MAAM;AACd,UAAMC,IAAe,MAAMH,EAAcR,EAAwB,CAAA;AAE1D,kBAAA,iBAAiB,UAAUW,CAAY,GAEvC,MAAM,OAAO,oBAAoB,UAAUA,CAAY;AAAA,EAEhE,GAAG,CAAE,CAAA,GAEEJ;AACT;"}

package/dist/components/index.d.ts

@@ -5,3 +5,4 @@ export * from './IconButton';
 export * from './InfoMessage';
 export * from './SectionNotification';
 export * from './SelectListbox';
+export * from './SelectListbox/SelectProvider';

package/dist/components/index.js

@@ -1,17 +1,20 @@
 import { Button as r } from "./Button/Button.js";
 import { Card as f } from "./Card/Card.js";
 import { Icon as m } from "./Icon/Icon.js";
-import { IconButton as p } from "./IconButton/IconButton.js";
+import { IconButton as c } from "./IconButton/IconButton.js";
 import { InfoMessage as i } from "./InfoMessage/InfoMessage.js";
-import { SectionNotification as s } from "./SectionNotification/SectionNotification.js";
-import { SelectListbox as u } from "./SelectListbox/SelectListbox.js";
+import { SectionNotification as S } from "./SectionNotification/SectionNotification.js";
+import { SelectListbox as l } from "./SelectListbox/SelectListbox.js";
+import { SelectProvider as I, useSelect as d } from "./SelectListbox/SelectProvider.js";
 export {
   r as Button,
   f as Card,
   m as Icon,
-  p as IconButton,
+  c as IconButton,
   i as InfoMessage,
-  s as SectionNotification,
-  u as SelectListbox
+  S as SectionNotification,
+  l as SelectListbox,
+  I as SelectProvider,
+  d 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

@@ -1,17 +1,20 @@
 import { Button as r } from "./components/Button/Button.js";
 import { Card as f } from "./components/Card/Card.js";
 import { Icon as m } from "./components/Icon/Icon.js";
-import { IconButton as p } from "./components/IconButton/IconButton.js";
+import { IconButton as c } from "./components/IconButton/IconButton.js";
 import { InfoMessage as i } from "./components/InfoMessage/InfoMessage.js";
-import { SectionNotification as s } from "./components/SectionNotification/SectionNotification.js";
-import { SelectListbox as u } from "./components/SelectListbox/SelectListbox.js";
+import { SectionNotification as S } from "./components/SectionNotification/SectionNotification.js";
+import { SelectListbox as l } from "./components/SelectListbox/SelectListbox.js";
+import { SelectProvider as I, useSelect as d } from "./components/SelectListbox/SelectProvider.js";
 export {
   r as Button,
   f as Card,
   m as Icon,
-  p as IconButton,
+  c as IconButton,
   i as InfoMessage,
-  s as SectionNotification,
-  u as SelectListbox
+  S as SectionNotification,
+  l as SelectListbox,
+  I as SelectProvider,
+  d 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.3.1",
+  "version": "1.3.3",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/dist/SelectListbox.module-iJtzAajj.js

@@ -1,23 +0,0 @@
-import './assets/SelectListbox.css';
-const t = {
-  "visually-hidden": "_visually-hidden_z1tk2_1",
-  "select-listbox-container": "_select-listbox-container_z1tk2_3",
-  "select-listbox__wrapper": "_select-listbox__wrapper_z1tk2_7",
-  "select-listbox-trigger": "_select-listbox-trigger_z1tk2_17",
-  "select-listbox-trigger-label": "_select-listbox-trigger-label_z1tk2_32",
-  "select-listbox__wrapper--align-right": "_select-listbox__wrapper--align-right_z1tk2_40",
-  "select-listbox-trigger--bold": "_select-listbox-trigger--bold_z1tk2_44",
-  "select-listbox-trigger--pill": "_select-listbox-trigger--pill_z1tk2_48",
-  "select-listbox-trigger--pillLeft": "_select-listbox-trigger--pillLeft_z1tk2_53",
-  "select-listbox-trigger--pillRight": "_select-listbox-trigger--pillRight_z1tk2_58",
-  "select-listbox-trigger--noborder": "_select-listbox-trigger--noborder_z1tk2_72",
-  "select-listbox-trigger-icon": "_select-listbox-trigger-icon_z1tk2_84",
-  "select-listbox-trigger-icon--open": "_select-listbox-trigger-icon--open_z1tk2_89",
-  "select-listbox": "_select-listbox_z1tk2_3",
-  "select-listbox-option": "_select-listbox-option_z1tk2_103",
-  "select-listbox-option--active": "_select-listbox-option--active_z1tk2_116"
-};
-export {
-  t as s
-};
-//# sourceMappingURL=SelectListbox.module-iJtzAajj.js.map

package/dist/SelectListbox.module-iJtzAajj.js.map

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