@uva-glass/component-library 3.48.0 → 3.49.0

package/dist/assets/Slider.css

@@ -0,0 +1 @@
+._slider_wrapper_43bdt_1{align-items:center;display:flex;gap:1rem;width:100%}._slider_button_43bdt_8{align-items:center;appearance:none;aspect-ratio:1 / 1;background:none;border:1px solid transparent;border-radius:.25rem;color:var(--new-color-grey-700);cursor:pointer;display:flex;height:2rem;justify-content:center;width:2rem}._slider_button_43bdt_8:focus-visible{outline:.125rem dotted var(--new-color-navy-600);outline-offset:.125rem}._slider_button_43bdt_8:hover{border-color:var(--new-color-grey-700)}._slider_button_43bdt_8:disabled,._slider_button_43bdt_8:disabled:hover{border:none;cursor:not-allowed}._slider_trackwrapper_43bdt_38{display:flex;position:relative;width:100%}._slider_balloon_43bdt_44{color:var(--new-color-grey-700);position:absolute;text-align:center;top:-1.8125rem;white-space:nowrap}._slider_input_43bdt_52{appearance:none;background:var(--new-color-grey-400);flex-grow:1;height:.25rem}._slider_input_43bdt_52:focus-visible{outline:.125rem dotted var(--new-color-navy-600);outline-offset:.125rem}._slider_input_43bdt_52:disabled{cursor:not-allowed}._slider_input_43bdt_52::-webkit-slider-runnable-track{appearance:none;color:var(--new-color-navy-600);cursor:pointer;height:2rem;margin-top:-.125rem}._slider_input_43bdt_52:disabled::-webkit-slider-runnable-track{cursor:not-allowed}._slider_input_43bdt_52::-webkit-slider-thumb{appearance:none;background:var(--new-color-uva-white);border:2px solid var(--new-color-navy-800);border-radius:.125rem;cursor:pointer;height:var(--thumb-size);margin-top:calc(.5rem + 1px);position:relative;width:var(--thumb-size)}._slider_input_43bdt_52:disabled::-webkit-slider-thumb,._slider_input_43bdt_52:disabled:hover::-webkit-slider-thumb{background:var(--new-color-grey-700);border:2px solid var(--new-color-grey-700);cursor:not-allowed}._slider_input_43bdt_52::-moz-range-thumb{appearance:none;background:var(--new-color-uva-white);border:2px solid var(--new-color-navy-800);border-radius:.125rem;cursor:pointer;height:var(--thumb-size);margin-top:calc(-.25rem - 1px);position:relative;width:var(--thumb-size)}._slider_input_43bdt_52:disabled::-moz-range-thumb,._slider_input_43bdt_52:hover:disabled::-moz-range-thumb{background:var(--new-color-grey-700);border:2px solid var(--new-color-grey-700);cursor:not-allowed}._slider_input_43bdt_52::-ms-thumb{appearance:none;background:var(--new-color-uva-white);border:2px solid var(--new-color-navy-800);border-radius:.125rem;cursor:pointer;height:var(--thumb-size);margin-top:calc(-.25rem - 1px);position:relative;width:var(--thumb-size)}._slider_input_43bdt_52:disabled::-ms-thumb,._slider_input_43bdt_52:hover:disabled::-ms-thumb{background:var(--new-color-grey-700);border:2px solid var(--new-color-grey-700);cursor:not-allowed}._slider_input_43bdt_52::-webkit-slider-thumb:hover{background:var(--new-color-navy-200)}._slider_input_43bdt_52::-moz-range-thumb:hover{background:var(--new-color-navy-200)}._slider_input_43bdt_52::-ms-thumb:hover{background:var(--new-color-navy-200)}._slider_input_43bdt_52::-moz-range-progress{background-color:var(--new-color-navy-600)}._slider_input_43bdt_52::-moz-range-track{background-color:var(--new-color-grey-400)}._slider_input_43bdt_52::-ms-fill-lower{background-color:var(--new-color-navy-600)}._slider_input_43bdt_52::-ms-fill-upper{background-color:var(--new-color-grey-400)}

package/dist/components/Slider/Slider.d.ts

@@ -0,0 +1,14 @@
+export interface SliderProps {
+    min: number;
+    max: number;
+    value?: number;
+    step?: number;
+    units?: string;
+    navigationLabels?: {
+        increase: string;
+        decrease: string;
+    };
+    disabled?: boolean;
+    onChange?: (value: number) => void;
+}
+export declare const Slider: ({ min, max, value, step, units, navigationLabels, disabled, onChange, }: SliderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Slider/Slider.js

@@ -0,0 +1,111 @@
+import { jsxs as g, jsx as a } from "react/jsx-runtime";
+import { useState as S, useRef as m, useEffectEvent as x, useEffect as B } from "react";
+import { c as H } from "../../clsx-OuTLNxxd.js";
+import { Icon as E } from "../Icon/Icon.js";
+import '../../assets/Slider.css';const T = "_slider_wrapper_43bdt_1", j = "_slider_button_43bdt_8", C = "_slider_trackwrapper_43bdt_38", D = "_slider_balloon_43bdt_44", F = "_slider_input_43bdt_52", l = {
+  slider_wrapper: T,
+  slider_button: j,
+  slider_trackwrapper: C,
+  slider_balloon: D,
+  slider_input: F
+}, v = 0.5, I = 100, p = 16, U = 16, G = ({
+  min: t,
+  max: o,
+  value: i,
+  step: k = 1,
+  units: c,
+  navigationLabels: d,
+  disabled: n = !1,
+  onChange: _
+}) => {
+  const [s, f] = S(i !== void 0 ? i : (t + o) * v), [V, P] = S(""), u = m(null), w = m(null), b = m(null), N = (r) => {
+    const e = s + r * k;
+    e >= t && e <= o && (f(e), h(e), y(e), _ && _(e));
+  }, R = (r) => {
+    const e = Number(r.target.value);
+    f(e), h(e), y(e), _ && _(e);
+  }, h = (r) => {
+    if (!u.current) return;
+    const e = (r - t) / (o - t) * I;
+    n ? u.current.style.background = `linear-gradient(
+         to right, 
+         var(--new-color-grey-700) 0%, 
+         var(--new-color-grey-700) ${e}%, 
+         var(--new-color-grey-400) ${e}%, 
+         var(--new-color-grey-400) 100%)` : u.current.style.background = `linear-gradient(
+         to right, 
+         var(--new-color-navy-600) 0%, 
+         var(--new-color-navy-600) ${e}%, 
+         var(--new-color-grey-400) ${e}%, 
+         var(--new-color-grey-400) 100%)`;
+  }, y = (r) => {
+    if (w.current && b.current) {
+      const e = b.current.clientWidth, $ = w.current.clientWidth - p, W = (r - t) / (o - t) * $ - (e - p) * v, z = Math.max(0, Math.min(W, $ - e + p * v));
+      P(`${z}px`);
+    }
+  }, M = x((r) => {
+    f(r), h(r), y(r);
+  });
+  return B(() => {
+    i !== void 0 && M(i);
+  }, [i, n]), /* @__PURE__ */ g("div", { className: l.slider_wrapper, children: [
+    /* @__PURE__ */ a(
+      "button",
+      {
+        className: l.slider_button,
+        onClick: () => N(-1),
+        "aria-label": d?.decrease ? d.decrease : "Verlaag waarde",
+        disabled: n,
+        children: /* @__PURE__ */ a(E, { name: "Minus", size: 20 })
+      }
+    ),
+    /* @__PURE__ */ g("div", { className: l.slider_trackwrapper, ref: w, children: [
+      /* @__PURE__ */ g(
+        "div",
+        {
+          className: H(l.slider_balloon, { [l["slider_balloon--disabled"]]: n }),
+          style: { left: V },
+          ref: b,
+          children: [
+            s,
+            c && /* @__PURE__ */ a("span", { className: l.slider_units, children: c })
+          ]
+        }
+      ),
+      /* @__PURE__ */ a(
+        "input",
+        {
+          type: "range",
+          className: l.slider_input,
+          min: t,
+          max: o,
+          step: k,
+          value: s,
+          onChange: R,
+          ref: u,
+          style: { "--thumb-size": `${p / U}rem` },
+          "aria-valuemin": t,
+          "aria-valuemax": o,
+          "aria-valuenow": s,
+          "aria-valuetext": c ? `${s} ${c}` : `${s}`,
+          "aria-label": "Slider",
+          disabled: n
+        }
+      )
+    ] }),
+    /* @__PURE__ */ a(
+      "button",
+      {
+        className: l.slider_button,
+        onClick: () => N(1),
+        "aria-label": d?.increase ? d.increase : "Verhoog waarde",
+        disabled: n,
+        children: /* @__PURE__ */ a(E, { name: "Plus", size: 20 })
+      }
+    )
+  ] });
+};
+export {
+  G as Slider
+};
+//# sourceMappingURL=Slider.js.map

package/dist/components/Slider/Slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.js","sources":["../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import { useEffect, useEffectEvent, useRef, useState } from 'react';\r\nimport { clsx } from 'clsx';\r\n\r\nimport type { CSSProperties } from 'react';\r\n\r\nimport styles from './Slider.module.css';\r\n\r\nimport { Icon } from 'components/Icon';\r\n\r\nexport interface SliderProps {\r\n  /* The minimum value of the slider */\r\n  min: number;\r\n  /* The maximum value of the slider */\r\n  max: number;\r\n  /* The current value of the slider */\r\n  value?: number;\r\n  /* The step value of the slider */\r\n  step?: number;\r\n  /* The units to display next to the value */\r\n  units?: string;\r\n  /* aria-label labels for navigation buttons  */\r\n  navigationLabels?: { increase: string; decrease: string };\r\n  /* Whether the slider is disabled */\r\n  disabled?: boolean;\r\n  /* Callback function when the value changes */\r\n  onChange?: (value: number) => void;\r\n}\r\n\r\nconst HALF_STEP = 0.5;\r\nconst HUNDRED = 100;\r\nconst THUMB_SIZE = 16;\r\nconst REM = 16;\r\n\r\nexport const Slider = ({\r\n  min,\r\n  max,\r\n  value,\r\n  step = 1,\r\n  units,\r\n  navigationLabels,\r\n  disabled = false,\r\n  onChange,\r\n}: SliderProps) => {\r\n  const [sliderValue, setSliderValue] = useState(value !== undefined ? value : (min + max) * HALF_STEP);\r\n  const [balloonLeftPosition, setBalloonLeftPosition] = useState('');\r\n  const sliderRef = useRef<HTMLInputElement>(null);\r\n  const trackWrapperRef = useRef<HTMLDivElement>(null);\r\n  const balloonRef = useRef<HTMLDivElement>(null);\r\n\r\n  const handleButtonClick = (direction: number) => {\r\n    const newValue = sliderValue + direction * step;\r\n    if (newValue >= min && newValue <= max) {\r\n      setSliderValue(newValue);\r\n      paintValueOnTrack(newValue);\r\n      setFloaterPosition(newValue);\r\n      if (onChange) {\r\n        onChange(newValue);\r\n      }\r\n    }\r\n  };\r\n\r\n  const handleSliderChange = (event: React.ChangeEvent<HTMLInputElement>) => {\r\n    const newValue = Number(event.target.value);\r\n    setSliderValue(newValue);\r\n    paintValueOnTrack(newValue);\r\n    setFloaterPosition(newValue);\r\n    if (onChange) {\r\n      onChange(newValue);\r\n    }\r\n  };\r\n\r\n  const paintValueOnTrack = (valueToPaint: number) => {\r\n    if (!sliderRef.current) return;\r\n    const percentage = ((valueToPaint - min) / (max - min)) * HUNDRED;\r\n    if (disabled) {\r\n      sliderRef.current.style.background = `linear-gradient(\r\n         to right, \r\n         var(--new-color-grey-700) 0%, \r\n         var(--new-color-grey-700) ${percentage}%, \r\n         var(--new-color-grey-400) ${percentage}%, \r\n         var(--new-color-grey-400) 100%)`;\r\n    } else {\r\n      sliderRef.current.style.background = `linear-gradient(\r\n         to right, \r\n         var(--new-color-navy-600) 0%, \r\n         var(--new-color-navy-600) ${percentage}%, \r\n         var(--new-color-grey-400) ${percentage}%, \r\n         var(--new-color-grey-400) 100%)`;\r\n    }\r\n  };\r\n\r\n  const setFloaterPosition = (value: number) => {\r\n    if (trackWrapperRef.current && balloonRef.current) {\r\n      const balloonWidth = balloonRef.current.clientWidth;\r\n      const trackWidth = trackWrapperRef.current.clientWidth - THUMB_SIZE;\r\n      const position = ((value - min) / (max - min)) * trackWidth;\r\n      const leftPosition = position - (balloonWidth - THUMB_SIZE) * HALF_STEP;\r\n      const clampedLeft = Math.max(0, Math.min(leftPosition, trackWidth - balloonWidth + THUMB_SIZE * HALF_STEP));\r\n      setBalloonLeftPosition(`${clampedLeft}px`);\r\n    }\r\n  };\r\n\r\n  const initializeSlider = useEffectEvent((value: number) => {\r\n    setSliderValue(value);\r\n    paintValueOnTrack(value);\r\n    setFloaterPosition(value);\r\n  });\r\n\r\n  useEffect(() => {\r\n    if (value !== undefined) {\r\n      initializeSlider(value);\r\n    }\r\n  }, [value, disabled]);\r\n\r\n  return (\r\n    <div className={styles['slider_wrapper']}>\r\n      <button\r\n        className={styles['slider_button']}\r\n        onClick={() => handleButtonClick(-1)}\r\n        aria-label={navigationLabels?.decrease ? navigationLabels.decrease : 'Verlaag waarde'}\r\n        disabled={disabled}\r\n      >\r\n        <Icon name=\"Minus\" size={20} />\r\n      </button>\r\n      <div className={styles['slider_trackwrapper']} ref={trackWrapperRef}>\r\n        <div\r\n          className={clsx(styles['slider_balloon'], { [styles['slider_balloon--disabled']]: disabled })}\r\n          style={{ left: balloonLeftPosition }}\r\n          ref={balloonRef}\r\n        >\r\n          {sliderValue}\r\n          {units && <span className={styles['slider_units']}>{units}</span>}\r\n        </div>\r\n        <input\r\n          type=\"range\"\r\n          className={styles['slider_input']}\r\n          min={min}\r\n          max={max}\r\n          step={step}\r\n          value={sliderValue}\r\n          onChange={handleSliderChange}\r\n          ref={sliderRef}\r\n          style={{ '--thumb-size': `${THUMB_SIZE / REM}rem` } as CSSProperties}\r\n          aria-valuemin={min}\r\n          aria-valuemax={max}\r\n          aria-valuenow={sliderValue}\r\n          aria-valuetext={units ? `${sliderValue} ${units}` : `${sliderValue}`}\r\n          aria-label=\"Slider\"\r\n          disabled={disabled}\r\n        />\r\n      </div>\r\n      <button\r\n        className={styles['slider_button']}\r\n        onClick={() => handleButtonClick(1)}\r\n        aria-label={navigationLabels?.increase ? navigationLabels.increase : 'Verhoog waarde'}\r\n        disabled={disabled}\r\n      >\r\n        <Icon name=\"Plus\" size={20} />\r\n      </button>\r\n    </div>\r\n  );\r\n};\r\n"],"names":["HALF_STEP","HUNDRED","THUMB_SIZE","REM","Slider","min","max","value","step","units","navigationLabels","disabled","onChange","sliderValue","setSliderValue","useState","balloonLeftPosition","setBalloonLeftPosition","sliderRef","useRef","trackWrapperRef","balloonRef","handleButtonClick","direction","newValue","paintValueOnTrack","setFloaterPosition","handleSliderChange","event","valueToPaint","percentage","balloonWidth","trackWidth","leftPosition","clampedLeft","initializeSlider","useEffectEvent","useEffect","jsxs","styles","jsx","Icon","clsx"],"mappings":"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"}

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

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+import { SliderProps } from './Slider';
+declare const _default: Meta<SliderProps>;
+export default _default;
+export declare const SliderExample: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, SliderProps>;

package/dist/components/Slider/Slider.stories.js

@@ -0,0 +1,39 @@
+import { jsxs as o, Fragment as a, jsx as e } from "react/jsx-runtime";
+import { Slider as i } from "./Slider.js";
+const l = "<Slider min={number} max={number} value?={number} step?={number} units?={string} onChange?={(value: number) => void} />", h = {
+  title: "Atoms/Slider",
+  component: i,
+  argTypes: {
+    onChange: {
+      action: "Slider value",
+      table: {
+        disable: !0
+      }
+    }
+  },
+  parameters: {
+    inspectComponent: i,
+    codeString: l
+  }
+}, d = (n) => {
+  const t = (r) => {
+    n.onChange && n.onChange(r);
+  };
+  return /* @__PURE__ */ o(a, { children: [
+    /* @__PURE__ */ e("div", { style: { width: "150px" }, children: /* @__PURE__ */ e(i, { ...n, onChange: t }) }),
+    /* @__PURE__ */ e("div", { style: { width: "300px", marginTop: "40px" }, children: /* @__PURE__ */ e(i, { ...n, onChange: t, value: 40 }) }),
+    /* @__PURE__ */ e("div", { style: { width: "600px", marginTop: "40px" }, children: /* @__PURE__ */ e(i, { ...n, onChange: t, value: 60 }) })
+  ] });
+}, m = d.bind({});
+m.args = {
+  min: 0,
+  max: 100,
+  step: 5,
+  units: "%",
+  value: 80
+};
+export {
+  m as SliderExample,
+  h as default
+};
+//# sourceMappingURL=Slider.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.stories.js","sources":["../../../src/components/Slider/Slider.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\r\nimport type { SliderProps } from './Slider';\r\n\r\nimport { Slider } from './Slider';\r\n\r\nconst codeString =\r\n  '<Slider min={number} max={number} value?={number} step?={number} units?={string} onChange?={(value: number) => void} />';\r\n\r\n// eslint-disable-next-line import/no-default-export\r\nexport default {\r\n  title: 'Atoms/Slider',\r\n  component: Slider,\r\n  argTypes: {\r\n    onChange: {\r\n      action: 'Slider value',\r\n      table: {\r\n        disable: true,\r\n      },\r\n    },\r\n  },\r\n  parameters: {\r\n    inspectComponent: Slider,\r\n    codeString: codeString,\r\n  },\r\n} as Meta<SliderProps>;\r\n\r\nconst Template: StoryFn<SliderProps> = (args) => {\r\n  const handleSliderChange = (value: number) => {\r\n    if (args.onChange) {\r\n      args.onChange(value);\r\n    }\r\n  };\r\n\r\n  return (\r\n    <>\r\n      <div style={{ width: '150px' }}>\r\n        <Slider {...args} onChange={handleSliderChange} />\r\n      </div>\r\n      <div style={{ width: '300px', marginTop: '40px' }}>\r\n        <Slider {...args} onChange={handleSliderChange} value={40} />\r\n      </div>\r\n      <div style={{ width: '600px', marginTop: '40px' }}>\r\n        <Slider {...args} onChange={handleSliderChange} value={60} />\r\n      </div>\r\n    </>\r\n  );\r\n};\r\n\r\nexport const SliderExample = Template.bind({});\r\nSliderExample.args = {\r\n  min: 0,\r\n  max: 100,\r\n  step: 5,\r\n  units: '%',\r\n  value: 80,\r\n};\r\n"],"names":["codeString","Slider_stories","Slider","Template","args","handleSliderChange","value","jsxs","Fragment","jsx","SliderExample"],"mappings":";;AAKA,MAAMA,IACJ,2HAGFC,IAAe;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,UAAU;AAAA,MACR,QAAQ;AAAA,MACR,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EACF;AAAA,EAEF,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAiC,CAACC,MAAS;AAC/C,QAAMC,IAAqB,CAACC,MAAkB;AAC5C,IAAIF,EAAK,YACPA,EAAK,SAASE,CAAK;AAAA,EAEvB;AAEA,SACE,gBAAAC,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC,EAAC,OAAA,EAAI,OAAO,EAAE,OAAO,QAAA,GACnB,UAAA,gBAAAA,EAACP,GAAA,EAAQ,GAAGE,GAAM,UAAUC,EAAA,CAAoB,GAClD;AAAA,sBACC,OAAA,EAAI,OAAO,EAAE,OAAO,SAAS,WAAW,UACvC,UAAA,gBAAAI,EAACP,KAAQ,GAAGE,GAAM,UAAUC,GAAoB,OAAO,IAAI,GAC7D;AAAA,sBACC,OAAA,EAAI,OAAO,EAAE,OAAO,SAAS,WAAW,UACvC,UAAA,gBAAAI,EAACP,KAAQ,GAAGE,GAAM,UAAUC,GAAoB,OAAO,IAAI,EAAA,CAC7D;AAAA,EAAA,GACF;AAEJ,GAEaK,IAAgBP,EAAS,KAAK,CAAA,CAAE;AAC7CO,EAAc,OAAO;AAAA,EACnB,KAAK;AAAA,EACL,KAAK;AAAA,EACL,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AACT;"}

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

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

package/dist/components/Slider/index.js

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

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

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

package/dist/components/index.d.ts

@@ -52,6 +52,7 @@ export * from './SearchField';
 export * from './SectionNotification';
 export * from './SelectListbox';
 export * from './SelectListbox/SelectProvider';
+export * from './Slider';
 export * from './Sortable';
 export * from './Spinner';
 export * from './StatusBadge';

package/dist/components/index.js

@@ -5,7 +5,7 @@ import { AppStatusBar as a } from "./AppStatusBar/AppStatusBar.js";
 import { Attention as n } from "./Attention/Attention.js";
 import { Backdrop as c } from "./Backdrop/Backdrop.js";
 import { ButtonGroup as u } from "./ButtonGroup/ButtonGroup.js";
-import { Button as S } from "./Buttons/Button.js";
+import { Button as B } from "./Buttons/Button.js";
 import { LinkButton as b } from "./Buttons/LinkButton.js";
 import { MenuButton as k } from "./Buttons/MenuButton.js";
 import { Card as I } from "./Card/Card.js";
@@ -31,7 +31,7 @@ import { IconButton as fo } from "./IconButton/IconButton.js";
 import { InfoBanner as ao } from "./InfoBanner/InfoBanner.js";
 import { InfoMessage as no } from "./InfoMessage/InfoMessage.js";
 import { Input as co } from "./Input/Input.js";
-import { InputField as Bo } from "./InputField/InputField.js";
+import { InputField as So } from "./InputField/InputField.js";
 import { Label as so } from "./Label/Label.js";
 import { MenuLink as Co } from "./MenuLink/MenuLink.js";
 import { MetaDataList as Fo } from "./MetaDataList/MetaDataList.js";
@@ -54,15 +54,16 @@ import { SearchField as or } from "./SearchField/SearchField.js";
 import { SectionNotification as er } from "./SectionNotification/SectionNotification.js";
 import { SelectListbox as pr } from "./SelectListbox/SelectListbox.js";
 import { SelectProvider as fr, useSelect as mr } from "./SelectListbox/SelectProvider.js";
-import { Sortable as ir } from "./Sortable/Sortable.js";
-import { Spinner as lr } from "./Spinner/Spinner.js";
-import { StatusBadge as dr } from "./StatusBadge/StatusBage.js";
-import { StatusPill as Br } from "./StatusPill/StatusPill.js";
-import { TextArea as sr } from "./TextArea/TextArea.js";
-import { ToggleSwitch as Cr } from "./ToggleSwitch/ToggleSwitch.js";
-import { Tooltip as Fr } from "./Tooltip/Tooltip.js";
-import { VarIndicator as Mr } from "./VarIndicator/VarIndicator.js";
-import { WeekSelector as Lr } from "./WeekSelector/WeekSelector.js";
+import { Slider as ir } from "./Slider/Slider.js";
+import { Sortable as lr } from "./Sortable/Sortable.js";
+import { Spinner as dr } from "./Spinner/Spinner.js";
+import { StatusBadge as Sr } from "./StatusBadge/StatusBage.js";
+import { StatusPill as sr } from "./StatusPill/StatusPill.js";
+import { TextArea as Cr } from "./TextArea/TextArea.js";
+import { ToggleSwitch as Fr } from "./ToggleSwitch/ToggleSwitch.js";
+import { Tooltip as Mr } from "./Tooltip/Tooltip.js";
+import { VarIndicator as Lr } from "./VarIndicator/VarIndicator.js";
+import { WeekSelector as Rr } from "./WeekSelector/WeekSelector.js";
 export {
   e as Accordion,
   p as AccordionCard,
@@ -70,7 +71,7 @@ export {
   a as AppStatusBar,
   n as Attention,
   c as Backdrop,
-  S as Button,
+  B as Button,
   u as ButtonGroup,
   I as Card,
   g as Checkbox,
@@ -95,7 +96,7 @@ export {
   ao as InfoBanner,
   no as InfoMessage,
   co as Input,
-  Bo as InputField,
+  So as InputField,
   so as Label,
   b as LinkButton,
   k as MenuButton,
@@ -121,15 +122,16 @@ export {
   er as SectionNotification,
   pr as SelectListbox,
   fr as SelectProvider,
-  ir as Sortable,
-  lr as Spinner,
-  dr as StatusBadge,
-  Br as StatusPill,
-  sr as TextArea,
-  Cr as ToggleSwitch,
-  Fr as Tooltip,
-  Mr as VarIndicator,
-  Lr as WeekSelector,
+  ir as Slider,
+  lr as Sortable,
+  dr as Spinner,
+  Sr as StatusBadge,
+  sr as StatusPill,
+  Cr as TextArea,
+  Fr as ToggleSwitch,
+  Mr as Tooltip,
+  Lr as VarIndicator,
+  Rr as WeekSelector,
   mr 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

@@ -5,7 +5,7 @@ import { AppStatusBar as a } from "./components/AppStatusBar/AppStatusBar.js";
 import { Attention as n } from "./components/Attention/Attention.js";
 import { Backdrop as c } from "./components/Backdrop/Backdrop.js";
 import { ButtonGroup as u } from "./components/ButtonGroup/ButtonGroup.js";
-import { Button as S } from "./components/Buttons/Button.js";
+import { Button as B } from "./components/Buttons/Button.js";
 import { LinkButton as b } from "./components/Buttons/LinkButton.js";
 import { MenuButton as k } from "./components/Buttons/MenuButton.js";
 import { Card as I } from "./components/Card/Card.js";
@@ -31,7 +31,7 @@ import { IconButton as fo } from "./components/IconButton/IconButton.js";
 import { InfoBanner as ao } from "./components/InfoBanner/InfoBanner.js";
 import { InfoMessage as no } from "./components/InfoMessage/InfoMessage.js";
 import { Input as co } from "./components/Input/Input.js";
-import { InputField as Bo } from "./components/InputField/InputField.js";
+import { InputField as So } from "./components/InputField/InputField.js";
 import { Label as so } from "./components/Label/Label.js";
 import { MenuLink as Co } from "./components/MenuLink/MenuLink.js";
 import { MetaDataList as Fo } from "./components/MetaDataList/MetaDataList.js";
@@ -54,15 +54,16 @@ import { SearchField as or } from "./components/SearchField/SearchField.js";
 import { SectionNotification as er } from "./components/SectionNotification/SectionNotification.js";
 import { SelectListbox as pr } from "./components/SelectListbox/SelectListbox.js";
 import { SelectProvider as fr, useSelect as mr } from "./components/SelectListbox/SelectProvider.js";
-import { Sortable as ir } from "./components/Sortable/Sortable.js";
-import { Spinner as lr } from "./components/Spinner/Spinner.js";
-import { StatusBadge as dr } from "./components/StatusBadge/StatusBage.js";
-import { StatusPill as Br } from "./components/StatusPill/StatusPill.js";
-import { TextArea as sr } from "./components/TextArea/TextArea.js";
-import { ToggleSwitch as Cr } from "./components/ToggleSwitch/ToggleSwitch.js";
-import { Tooltip as Fr } from "./components/Tooltip/Tooltip.js";
-import { VarIndicator as Mr } from "./components/VarIndicator/VarIndicator.js";
-import { WeekSelector as Lr } from "./components/WeekSelector/WeekSelector.js";
+import { Slider as ir } from "./components/Slider/Slider.js";
+import { Sortable as lr } from "./components/Sortable/Sortable.js";
+import { Spinner as dr } from "./components/Spinner/Spinner.js";
+import { StatusBadge as Sr } from "./components/StatusBadge/StatusBage.js";
+import { StatusPill as sr } from "./components/StatusPill/StatusPill.js";
+import { TextArea as Cr } from "./components/TextArea/TextArea.js";
+import { ToggleSwitch as Fr } from "./components/ToggleSwitch/ToggleSwitch.js";
+import { Tooltip as Mr } from "./components/Tooltip/Tooltip.js";
+import { VarIndicator as Lr } from "./components/VarIndicator/VarIndicator.js";
+import { WeekSelector as Rr } from "./components/WeekSelector/WeekSelector.js";
 export {
   e as Accordion,
   p as AccordionCard,
@@ -70,7 +71,7 @@ export {
   a as AppStatusBar,
   n as Attention,
   c as Backdrop,
-  S as Button,
+  B as Button,
   u as ButtonGroup,
   I as Card,
   g as Checkbox,
@@ -95,7 +96,7 @@ export {
   ao as InfoBanner,
   no as InfoMessage,
   co as Input,
-  Bo as InputField,
+  So as InputField,
   so as Label,
   b as LinkButton,
   k as MenuButton,
@@ -121,15 +122,16 @@ export {
   er as SectionNotification,
   pr as SelectListbox,
   fr as SelectProvider,
-  ir as Sortable,
-  lr as Spinner,
-  dr as StatusBadge,
-  Br as StatusPill,
-  sr as TextArea,
-  Cr as ToggleSwitch,
-  Fr as Tooltip,
-  Mr as VarIndicator,
-  Lr as WeekSelector,
+  ir as Slider,
+  lr as Sortable,
+  dr as Spinner,
+  Sr as StatusBadge,
+  sr as StatusPill,
+  Cr as TextArea,
+  Fr as ToggleSwitch,
+  Mr as Tooltip,
+  Lr as VarIndicator,
+  Rr as WeekSelector,
   mr 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": "3.48.0",
+  "version": "3.49.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -47,7 +47,7 @@
     "@commitlint/config-conventional": "^20.0.0",
     "@react-aria/button": "^3.14.2",
     "@react-aria/dialog": "^3.5.31",
-    "@react-aria/focus": "^3.21.1",
+    "@react-aria/focus": "^3.21.2",
     "@react-aria/overlays": "^3.30.0",
     "@react-types/dialog": "^3.5.22",
     "@semantic-release/git": "^10.0.1",
@@ -61,16 +61,16 @@
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
     "@types/jest": "^30.0.0",
-    "@types/node": "^22.18.8",
-    "@types/react": "^19.2.0",
-    "@types/react-dom": "^19.2.0",
+    "@types/node": "^24.7.0",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.1",
     "@uva-glass/eslint-config": "^1.3.11",
     "@uva-glass/stylelint-config": "^1.2.3",
     "@vitejs/plugin-react": "^5.0.4",
     "babel-jest": "^30.2.0",
     "babel-plugin-transform-vite-meta-env": "^1.0.3",
     "clsx": "^2.1.1",
-    "eslint-plugin-react-hooks": "^6.0.0",
+    "eslint-plugin-react-hooks": "^6.1.1",
     "glob": "^11.0.3",
     "husky": "^9.1.7",
     "identity-obj-proxy": "^3.0.0",
@@ -84,14 +84,14 @@
     "react-router": "^7.9.3",
     "semantic-release": "^24.2.9",
     "storybook": "^9.1.10",
-    "style-dictionary": "^5.1.0",
+    "style-dictionary": "^5.1.1",
     "stylelint": "^16.24.0",
     "stylelint-config-recommended": "^17.0.0",
-    "stylelint-config-standard": "^39.0.0",
+    "stylelint-config-standard": "^39.0.1",
     "stylelint-order": "^7.0.0",
     "ts-node": "^10.9.2",
     "typescript": "^5.9.3",
-    "vite": "^7.1.8",
+    "vite": "^7.1.9",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-lib-inject-css": "^2.2.2",
     "vite-plugin-static-copy": "^3.1.3",
@@ -109,8 +109,8 @@
     "lexical": "^0.36.2"
   },
   "optionalDependencies": {
-    "@ast-grep/napi-linux-x64-gnu": "0.39.5",
-    "@rollup/rollup-linux-x64-gnu": "^4.52.3",
+    "@ast-grep/napi-linux-x64-gnu": "0.39.6",
+    "@rollup/rollup-linux-x64-gnu": "^4.52.4",
     "@rspack/binding-darwin-arm64": "1.5.8",
     "@rspack/binding-linux-x64-gnu": "1.5.8"
   }