@digiform/wizard 0.2.9 → 0.2.11

package/ui/src/components/checkbox/checkbox.js

@@ -0,0 +1,20 @@
+"use client";
+import { jsx as o } from "react/jsx-runtime";
+import * as e from "@radix-ui/react-checkbox";
+import { Check as i } from "lucide-react";
+import * as s from "react";
+import { clsx as t } from "clsx";
+import c from "./checkbox.module.css.js";
+const l = s.forwardRef(({ className: r, ...m }, a) => /* @__PURE__ */ o(
+  e.Root,
+  {
+    ref: a,
+    className: t(c.checkbox, r),
+    ...m,
+    children: /* @__PURE__ */ o(e.Indicator, { className: c.checkboxIndicator, children: /* @__PURE__ */ o(i, { className: c.checkboxIcon }) })
+  }
+));
+l.displayName = e.Root.displayName;
+export {
+  l as Checkbox
+};

package/ui/src/components/checkbox/checkbox.module.css.js

@@ -0,0 +1,10 @@
+"use client";
+const c = "fb-checkbox_wsic0", o = "fb-checkboxIndicator_31Q4N", e = {
+  checkbox: c,
+  checkboxIndicator: o
+};
+export {
+  c as checkbox,
+  o as checkboxIndicator,
+  e as default
+};

package/ui/src/components/dialog/dialog.js

@@ -0,0 +1,67 @@
+"use client";
+import { jsx as i, jsxs as m } from "react/jsx-runtime";
+import * as a from "@radix-ui/react-dialog";
+import { X as n } from "lucide-react";
+import * as t from "react";
+import { clsx as r } from "clsx";
+import s from "./dialog.module.css.js";
+const h = a.Root, p = a.Portal, d = t.forwardRef(({ className: o, ...e }, l) => /* @__PURE__ */ i(
+  a.Overlay,
+  {
+    ref: l,
+    className: r(s.dialogOverlay, o),
+    ...e
+  }
+));
+d.displayName = a.Overlay.displayName;
+const g = t.forwardRef(({ className: o, children: e, ...l }, c) => /* @__PURE__ */ m(p, { children: [
+  /* @__PURE__ */ i(d, {}),
+  /* @__PURE__ */ m(
+    a.Content,
+    {
+      ref: c,
+      className: r(s.dialogContent, o),
+      ...l,
+      children: [
+        e,
+        /* @__PURE__ */ m(a.Close, { className: s.dialogClose, children: [
+          /* @__PURE__ */ i(n, { className: s.dialogCloseIcon }),
+          /* @__PURE__ */ i("span", { children: "Close" })
+        ] })
+      ]
+    }
+  )
+] }));
+g.displayName = a.Content.displayName;
+const N = ({
+  className: o,
+  ...e
+}) => /* @__PURE__ */ i("div", { className: r(s.dialogHeader, o), ...e });
+N.displayName = "DialogHeader";
+const f = t.forwardRef(({ className: o, ...e }, l) => /* @__PURE__ */ i(
+  a.Title,
+  {
+    ref: l,
+    className: r(s.dialogTitle, o),
+    ...e
+  }
+));
+f.displayName = a.Title.displayName;
+const y = t.forwardRef(({ className: o, ...e }, l) => /* @__PURE__ */ i(
+  a.Description,
+  {
+    ref: l,
+    className: r(s.dialogDescription, o),
+    ...e
+  }
+));
+y.displayName = a.Description.displayName;
+export {
+  h as Dialog,
+  g as DialogContent,
+  y as DialogDescription,
+  N as DialogHeader,
+  d as DialogOverlay,
+  p as DialogPortal,
+  f as DialogTitle
+};

package/ui/src/components/dialog/dialog.module.css.js

@@ -0,0 +1,20 @@
+"use client";
+const o = "fb-dialogOverlay_GSMVm", l = "fb-dialogContent_neUay", a = "fb-dialogClose_QbWkj", i = "fb-dialogCloseIcon_kK8c6", e = "fb-dialogHeader_df1-u", d = "fb-dialogTitle_FS7k8", t = "fb-dialogDescription_uEgTa", g = {
+  dialogOverlay: o,
+  dialogContent: l,
+  dialogClose: a,
+  dialogCloseIcon: i,
+  dialogHeader: e,
+  dialogTitle: d,
+  dialogDescription: t
+};
+export {
+  g as default,
+  a as dialogClose,
+  i as dialogCloseIcon,
+  l as dialogContent,
+  t as dialogDescription,
+  e as dialogHeader,
+  o as dialogOverlay,
+  d as dialogTitle
+};

package/ui/src/components/form-header-base/form-header-base.js

@@ -0,0 +1,59 @@
+"use client";
+import { jsxs as s, jsx as l } from "react/jsx-runtime";
+import { clsx as u } from "clsx";
+import { ChevronLeft as h } from "lucide-react";
+import i from "./form-header-base.module.css.js";
+import { HeadingGroup as m, PreHeading as p, Heading as t, Button as C } from "@rijkshuisstijl-community/components-react";
+const b = ({
+  children: r,
+  onPrev: e,
+  disabled: a = !1,
+  isDisplayOnly: n = !1,
+  ...d
+}) => /* @__PURE__ */ s(
+  C,
+  {
+    appearance: "subtle-button",
+    onClick: n || !e ? void 0 : (o) => {
+      o.preventDefault(), e();
+    },
+    disabled: a || n,
+    className: n ? i.prevButtonDisabled : "",
+    ...d,
+    children: [
+      /* @__PURE__ */ l(h, {}),
+      r
+    ]
+  }
+), $ = ({
+  title: r,
+  stepNumber: e,
+  showStepNumber: a,
+  navigation: n,
+  onNavigate: d,
+  isEditing: f = !1,
+  children: o,
+  isDisplayOnly: v = !1
+}) => {
+  const c = f || v;
+  return /* @__PURE__ */ s("div", { className: u(i.container, c && i.disabled), children: [
+    n?.previous?.enabled && /* @__PURE__ */ l("div", { children: /* @__PURE__ */ l(
+      b,
+      {
+        disabled: c,
+        isDisplayOnly: v,
+        onPrev: () => !c && d && d("previous"),
+        children: n.previous.label || "Terug"
+      }
+    ) }),
+    /* @__PURE__ */ s(m, { children: [
+      a && e ? /* @__PURE__ */ l(p, { heading: r ? /* @__PURE__ */ l(t, { level: 2, children: r }) : /* @__PURE__ */ l(t, { level: 2, children: "" }), children: typeof e == "number" ? `Stap ${e}` : `Stap ${e?.current} van ${e?.total}` }) : null,
+      r && !(a && e) && /* @__PURE__ */ l(t, { level: 2, children: r })
+    ] }),
+    o && /* @__PURE__ */ l("div", { className: i.additionalContent, children: o })
+  ] });
+};
+export {
+  $ as FormHeaderBase,
+  $ as default
+};

package/ui/src/components/form-header-base/form-header-base.module.css.js

@@ -0,0 +1,14 @@
+"use client";
+const t = "fb-container_p6qC4", n = "fb-disabled_EuvTp", e = "fb-prevButtonDisabled_Wj2Qp", o = "fb-additionalContent_0tppE", a = {
+  container: t,
+  disabled: n,
+  prevButtonDisabled: e,
+  additionalContent: o
+};
+export {
+  o as additionalContent,
+  t as container,
+  a as default,
+  n as disabled,
+  e as prevButtonDisabled
+};

package/ui/src/components/input/input.js

@@ -0,0 +1,20 @@
+"use client";
+import { jsx as p } from "react/jsx-runtime";
+import * as s from "react";
+import { clsx as e } from "clsx";
+import i from "./input.module.css.js";
+const a = s.forwardRef(
+  ({ className: t, type: r, ...o }, m) => /* @__PURE__ */ p(
+    "input",
+    {
+      type: r,
+      className: e(i.input, t),
+      ref: m,
+      ...o
+    }
+  )
+);
+a.displayName = "Input";
+export {
+  a as Input
+};

package/ui/src/components/input/input.module.css.js

@@ -0,0 +1,8 @@
+"use client";
+const t = "fb-input_RJ7IM", n = {
+  input: t
+};
+export {
+  n as default,
+  t as input
+};

package/ui/src/components/radio-group/radio-group.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsx as r } from "react/jsx-runtime";
+import * as o from "@radix-ui/react-radio-group";
+import { Circle as d } from "lucide-react";
+import * as t from "react";
+import { clsx as s } from "clsx";
+import a from "./radio-group.module.css.js";
+const c = t.forwardRef(({ className: i, ...e }, m) => /* @__PURE__ */ r(
+  o.Root,
+  {
+    className: s(a.radioGroup, i),
+    ...e,
+    ref: m
+  }
+));
+c.displayName = o.Root.displayName;
+const p = t.forwardRef(({ className: i, ...e }, m) => /* @__PURE__ */ r(
+  o.Item,
+  {
+    ref: m,
+    className: s(a.radioGroupItem, i),
+    ...e,
+    children: /* @__PURE__ */ r(o.Indicator, { className: a.radioIndicator, children: /* @__PURE__ */ r(d, { className: a.radioIndicatorIcon }) })
+  }
+));
+p.displayName = o.Item.displayName;
+export {
+  c as RadioGroup,
+  p as RadioGroupItem
+};

package/ui/src/components/radio-group/radio-group.module.css.js

@@ -0,0 +1,14 @@
+"use client";
+const o = "fb-radioGroup_PqpPn", r = "fb-radioGroupItem_r91M1", a = "fb-radioIndicator_PFyGX", d = "fb-radioIndicatorIcon_vSsbY", i = {
+  radioGroup: o,
+  radioGroupItem: r,
+  radioIndicator: a,
+  radioIndicatorIcon: d
+};
+export {
+  i as default,
+  o as radioGroup,
+  r as radioGroupItem,
+  a as radioIndicator,
+  d as radioIndicatorIcon
+};

package/ui/src/components/select/select.js

@@ -0,0 +1,115 @@
+"use client";
+import { jsxs as i, jsx as l } from "react/jsx-runtime";
+import * as e from "@radix-ui/react-select";
+import { ChevronDown as m, Check as f, ChevronUp as S } from "lucide-react";
+import * as s from "react";
+import { clsx as c } from "clsx";
+import a from "./select.module.css.js";
+const D = e.Root, T = e.Value, h = s.forwardRef(({ className: o, children: r, ...t }, n) => /* @__PURE__ */ i(
+  e.Trigger,
+  {
+    ref: n,
+    className: c(a.selectTrigger, o),
+    ...t,
+    children: [
+      r,
+      /* @__PURE__ */ l(e.Icon, { asChild: !0, children: /* @__PURE__ */ l(m, { className: a.selectTriggerIcon }) })
+    ]
+  }
+));
+h.displayName = e.Trigger.displayName;
+const p = s.forwardRef(({ className: o, ...r }, t) => /* @__PURE__ */ l(
+  e.ScrollUpButton,
+  {
+    ref: t,
+    className: c(a.selectScrollUpButton, o),
+    ...r,
+    children: /* @__PURE__ */ l(S, { className: a.selectScrollIcon })
+  }
+));
+p.displayName = e.ScrollUpButton.displayName;
+const d = s.forwardRef(({ className: o, ...r }, t) => /* @__PURE__ */ l(
+  e.ScrollDownButton,
+  {
+    ref: t,
+    className: c(a.selectScrollDownButton, o),
+    ...r,
+    children: /* @__PURE__ */ l(m, { className: a.selectScrollIcon })
+  }
+));
+d.displayName = e.ScrollDownButton.displayName;
+const I = s.forwardRef(({ className: o, children: r, position: t = "popper", ...n }, N) => /* @__PURE__ */ l(e.Portal, { children: /* @__PURE__ */ i(
+  e.Content,
+  {
+    ref: N,
+    className: c(
+      a.selectContent,
+      t === "popper" && a.popper,
+      o
+    ),
+    position: t,
+    avoidCollisions: !0,
+    collisionPadding: 10,
+    sideOffset: 5,
+    alignOffset: 0,
+    hideWhenDetached: !1,
+    ...n,
+    children: [
+      /* @__PURE__ */ l(p, {}),
+      /* @__PURE__ */ l(
+        e.Viewport,
+        {
+          className: c(
+            a.selectViewport,
+            t === "popper" && a.popper
+          ),
+          children: r
+        }
+      ),
+      /* @__PURE__ */ l(d, {})
+    ]
+  }
+) }));
+I.displayName = e.Content.displayName;
+const y = s.forwardRef(({ className: o, ...r }, t) => /* @__PURE__ */ l(
+  e.Label,
+  {
+    ref: t,
+    className: c(a.selectLabel, o),
+    ...r
+  }
+));
+y.displayName = e.Label.displayName;
+const w = s.forwardRef(({ className: o, children: r, ...t }, n) => /* @__PURE__ */ i(
+  e.Item,
+  {
+    ref: n,
+    className: c(a.selectItem, o),
+    ...t,
+    children: [
+      /* @__PURE__ */ l("span", { className: a.selectItemIndicator, children: /* @__PURE__ */ l(e.ItemIndicator, { children: /* @__PURE__ */ l(f, { className: a.selectItemIndicatorIcon }) }) }),
+      /* @__PURE__ */ l(e.ItemText, { children: r })
+    ]
+  }
+));
+w.displayName = e.Item.displayName;
+const u = s.forwardRef(({ className: o, ...r }, t) => /* @__PURE__ */ l(
+  e.Separator,
+  {
+    ref: t,
+    className: c(a.selectSeparator, o),
+    ...r
+  }
+));
+u.displayName = e.Separator.displayName;
+export {
+  D as Select,
+  I as SelectContent,
+  w as SelectItem,
+  y as SelectLabel,
+  d as SelectScrollDownButton,
+  p as SelectScrollUpButton,
+  u as SelectSeparator,
+  h as SelectTrigger,
+  T as SelectValue
+};

package/ui/src/components/select/select.module.css.js

@@ -0,0 +1,32 @@
+"use client";
+const e = "fb-selectTrigger_dj84x", t = "fb-selectTriggerIcon_V8dav", c = "fb-selectScrollUpButton_c6WZR", o = "fb-selectScrollDownButton_kmWY4", l = "fb-selectScrollIcon_IZbZG", s = "fb-selectContent_uJ-ZX", n = "fb-popper_uKkq9", r = "fb-selectViewport_wcTaR", I = "fb-selectLabel_hb7ig", a = "fb-selectItem_f23oZ", p = "fb-selectItemIndicator_PD-WQ", b = "fb-selectItemIndicatorIcon_kgB1I", i = "fb-selectSeparator_DS7X2", f = {
+  selectTrigger: e,
+  selectTriggerIcon: t,
+  selectScrollUpButton: c,
+  selectScrollDownButton: o,
+  selectScrollIcon: l,
+  selectContent: s,
+  popper: n,
+  selectViewport: r,
+  selectLabel: I,
+  selectItem: a,
+  selectItemIndicator: p,
+  selectItemIndicatorIcon: b,
+  selectSeparator: i
+};
+export {
+  f as default,
+  n as popper,
+  s as selectContent,
+  a as selectItem,
+  p as selectItemIndicator,
+  b as selectItemIndicatorIcon,
+  I as selectLabel,
+  o as selectScrollDownButton,
+  l as selectScrollIcon,
+  c as selectScrollUpButton,
+  i as selectSeparator,
+  e as selectTrigger,
+  t as selectTriggerIcon,
+  r as selectViewport
+};

package/ui/src/components/sheet/sheet.js

@@ -0,0 +1,71 @@
+"use client";
+import { jsx as r, jsxs as m } from "react/jsx-runtime";
+import * as e from "@radix-ui/react-dialog";
+import { X as p } from "lucide-react";
+import * as l from "react";
+import { clsx as i } from "clsx";
+import a from "./sheet.module.css.js";
+const w = e.Root, h = e.Portal, c = l.forwardRef(({ className: s, ...t }, o) => /* @__PURE__ */ r(
+  e.Overlay,
+  {
+    className: i(a.sheetOverlay, s),
+    ...t,
+    ref: o
+  }
+));
+c.displayName = e.Overlay.displayName;
+const N = l.forwardRef(({ side: s = "right", className: t, children: o, ...n }, d) => /* @__PURE__ */ m(h, { children: [
+  /* @__PURE__ */ r(c, {}),
+  /* @__PURE__ */ m(
+    e.Content,
+    {
+      ref: d,
+      className: i(
+        a.sheetContent,
+        a[`side-${s}`],
+        t
+      ),
+      ...n,
+      children: [
+        o,
+        /* @__PURE__ */ m(e.Close, { className: a.sheetClose, children: [
+          /* @__PURE__ */ r(p, { className: a.sheetCloseIcon }),
+          /* @__PURE__ */ r("span", { children: "Close" })
+        ] })
+      ]
+    }
+  )
+] }));
+N.displayName = e.Content.displayName;
+const f = ({
+  className: s,
+  ...t
+}) => /* @__PURE__ */ r("div", { className: i(a.sheetHeader, s), ...t });
+f.displayName = "SheetHeader";
+const y = l.forwardRef(({ className: s, ...t }, o) => /* @__PURE__ */ r(
+  e.Title,
+  {
+    ref: o,
+    className: i(a.sheetTitle, s),
+    ...t
+  }
+));
+y.displayName = e.Title.displayName;
+const C = l.forwardRef(({ className: s, ...t }, o) => /* @__PURE__ */ r(
+  e.Description,
+  {
+    ref: o,
+    className: i(a.sheetDescription, s),
+    ...t
+  }
+));
+C.displayName = e.Description.displayName;
+export {
+  w as Sheet,
+  N as SheetContent,
+  C as SheetDescription,
+  f as SheetHeader,
+  c as SheetOverlay,
+  h as SheetPortal,
+  y as SheetTitle
+};

package/ui/src/components/sheet/sheet.module.css.js

@@ -0,0 +1,46 @@
+"use client";
+const e = "fb-sheetOverlay_2nFRz", t = "fb-sheetOverlayFadeIn_AS-42", s = "fb-sheetOverlayFadeOut_Y-hE4", o = "fb-sheetContent_p2PyE", i = "fb-slideInFromTop_ujZFr", n = "fb-slideOutToTop_sjz0S", l = "fb-slideInFromBottom_5kG78", d = "fb-slideOutToBottom_03WBw", h = "fb-slideInFromLeft_iFt5a", r = "fb-slideOutToLeft_kRHa5", f = "fb-slideInFromRight_elDbR", c = "fb-slideOutToRight_HPV1P", b = "fb-sheetClose_sq3cW", F = "fb-sheetCloseIcon_2Z7S1", O = "fb-sheetHeader_w9TtP", a = "fb-sheetFooter_XN1p0", T = "fb-sheetTitle_F6nNH", _ = "fb-sheetDescription_AzWJb", m = {
+  sheetOverlay: e,
+  sheetOverlayFadeIn: t,
+  sheetOverlayFadeOut: s,
+  sheetContent: o,
+  "side-top": "fb-side-top_vnDBA",
+  slideInFromTop: i,
+  slideOutToTop: n,
+  "side-bottom": "fb-side-bottom_8Qo-6",
+  slideInFromBottom: l,
+  slideOutToBottom: d,
+  "side-left": "fb-side-left_iSyK6",
+  slideInFromLeft: h,
+  slideOutToLeft: r,
+  "side-right": "fb-side-right_q-l6-",
+  slideInFromRight: f,
+  slideOutToRight: c,
+  sheetClose: b,
+  sheetCloseIcon: F,
+  sheetHeader: O,
+  sheetFooter: a,
+  sheetTitle: T,
+  sheetDescription: _
+};
+export {
+  m as default,
+  b as sheetClose,
+  F as sheetCloseIcon,
+  o as sheetContent,
+  _ as sheetDescription,
+  a as sheetFooter,
+  O as sheetHeader,
+  e as sheetOverlay,
+  t as sheetOverlayFadeIn,
+  s as sheetOverlayFadeOut,
+  T as sheetTitle,
+  l as slideInFromBottom,
+  h as slideInFromLeft,
+  f as slideInFromRight,
+  i as slideInFromTop,
+  d as slideOutToBottom,
+  r as slideOutToLeft,
+  c as slideOutToRight,
+  n as slideOutToTop
+};

package/ui/src/components/textarea/textarea.js

@@ -0,0 +1,19 @@
+"use client";
+import { jsx as a } from "react/jsx-runtime";
+import * as o from "react";
+import { clsx as m } from "clsx";
+import s from "./textarea.module.css.js";
+const x = o.forwardRef(
+  ({ className: e, ...r }, t) => /* @__PURE__ */ a(
+    "textarea",
+    {
+      className: m(s.textarea, e),
+      ref: t,
+      ...r
+    }
+  )
+);
+x.displayName = "Textarea";
+export {
+  x as Textarea
+};

package/ui/src/components/textarea/textarea.module.css.js

@@ -0,0 +1,8 @@
+"use client";
+const t = "fb-textarea_p4K5i", e = {
+  textarea: t
+};
+export {
+  e as default,
+  t as textarea
+};

package/ui/src/design-system/components/FormFieldWrapper.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsxs as m, jsx as d } from "react/jsx-runtime";
+function o({
+  invalid: e,
+  errorMessage: r,
+  className: i = "",
+  input: t
+}) {
+  return /* @__PURE__ */ m("div", { className: `form-field-wrapper ${i}`, children: [
+    t,
+    e && r && /* @__PURE__ */ d("div", { className: "form-field-error mt-2 text-sm text-red-600", children: r })
+  ] });
+}
+export {
+  o as FormFieldWrapper
+};

package/ui/src/lib/assets/icons/Check.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+const h = (t) => /* @__PURE__ */ l(
+  "svg",
+  {
+    width: "12",
+    height: "12",
+    viewBox: "0 0 12 12",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...t,
+    children: [
+      /* @__PURE__ */ e("title", { children: "Check" }),
+      /* @__PURE__ */ e("g", { children: /* @__PURE__ */ e(
+        "path",
+        {
+          d: "M10.315 1.54056C10.0328 1.33206 9.63921 1.37231 9.40581 1.63331L5.43561 6.07521L3.04891 4.00781C2.79646 3.78956 2.42391 3.78661 2.16951 4.00101C1.91411 4.21511 1.85261 4.58276 2.02351 4.86841L4.91461 9.69336C5.03666 9.89696 5.25641 10.022 5.49371 10.0227H5.49616C5.73246 10.0227 5.95221 9.89941 6.07526 9.69701L10.4903 2.43701C10.6724 2.13771 10.5963 1.74901 10.315 1.54056Z",
+          fill: "currentColor"
+        }
+      ) })
+    ]
+  }
+);
+export {
+  h as default
+};

package/ui/src/lib/assets/icons/ChevronRight.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsxs as i, jsx as t } from "react/jsx-runtime";
+const l = (e) => /* @__PURE__ */ i(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    ...e,
+    children: [
+      /* @__PURE__ */ t("title", { children: "Chevron Right" }),
+      /* @__PURE__ */ t(
+        "path",
+        {
+          d: "M4.50918 13.5412C4.00833 13.0407 3.80799 12.39 4.35893 11.8895L8.21551 8.0356L4.30884 4.13162C3.80799 3.6311 3.95824 2.98044 4.4591 2.47993C4.95995 1.97942 5.61107 1.77921 6.11192 2.32978L10.9201 7.13468C11.421 7.63519 11.421 8.43601 10.9201 8.93652L6.16201 13.6914C5.66115 14.1919 5.01004 14.0417 4.50918 13.5412Z",
+          fill: "currentColor"
+        }
+      )
+    ]
+  }
+);
+export {
+  l as default
+};