enefit-design-system 0.0.17 → 0.2.13

package/README.md

@@ -2,4 +2,4 @@
 
 See the documentation at https://enefit-design-system.pages.dev
 
-.
+.

package/dist/Accordion/Accordion.css.js

@@ -0,0 +1 @@
+

package/dist/Accordion/Accordion.js

@@ -0,0 +1,140 @@
+"use client";
+import { j as i } from "../external/react/jsx-runtime.js";
+import { useContext as z, useRef as _, useState as g, useEffect as d } from "react";
+import p from "../external/classnames/index.js";
+import "../output/variables/variables.css.js";
+import "../output/variables/animations.css.js";
+import "../output/variables/focus.css.js";
+import "../output/variables/shadows.css.js";
+import "../output/variables/transitions.css.js";
+import "../output/variables/typography.css.js";
+import "../output/variables/forms.css.js";
+import T from "../output/icons/IconChevronDownAltSm.js";
+import "../Table/Table.css.js";
+import { AccordionContext as k } from "../AccordionGroup/AccordionGroup.js";
+import "./Accordion.css.js";
+import "../Select/SelectListOption.css.js";
+import "../Select/SelectList.css.js";
+import "../Autocomplete/Autocomplete.css.js";
+import "../Button/Button.js";
+import "../Calendar/Calendar.js";
+import "../Checkbox/Checkbox.js";
+import "../CheckboxGroup/CheckboxGroup.js";
+import "../Choice/Choice.js";
+import "../ChoiceCard/ChoiceCard.js";
+import "../Color/Color.js";
+import "../DatePicker/DatePicker.js";
+import "../Dialog/Dialog.js";
+import y from "../Heading/Heading.js";
+import "../InfoHint/InfoHint.js";
+import "../Modal/Modal.css.js";
+import "react-dom";
+import { useFocusRing as B } from "../external/@react-aria/focus/dist/useFocusRing.js";
+import "../Tooltip/Tooltip.css.js";
+import "../Notification/Notification.css.js";
+import "../Phone/PhoneSelect.js";
+import "../Phone/Phone.css.js";
+import "../Popover/Popover.js";
+import "../Radio/Radio.js";
+import "../RadioGroup/RadioGroup.js";
+import "../Searchfield/Searchfield.js";
+import "../Select/Select.js";
+import "../Slider/SliderThumb.css.js";
+import "../Slider/Slider.css.js";
+import "../Stack/Stack.css.js";
+import "../Switch/Switch.js";
+import "../SwitchGroup/SwitchGroup.js";
+import "../Tabs/Tabs.js";
+import "../Tab/Tab.css.js";
+import "../Textarea/Textarea.js";
+import "../Textfield/Textfield.js";
+import "../Toast/Toast.js";
+import "../Toast/ToastRegion.css.js";
+import "../Chart/Chart.js";
+import { useId as $ } from "../external/@react-aria/utils/dist/useId.js";
+import { mergeProps as G } from "../external/@react-aria/utils/dist/mergeProps.js";
+import { usePress as J } from "../external/@react-aria/interactions/dist/usePress.js";
+const Uo = (j) => {
+  const n = z(k), { mode: f, selectedKeys: o, setSelectedKeys: c } = n ?? {}, {
+    id: t = "",
+    title: N,
+    isOpen: v,
+    children: C,
+    className: E,
+    "aria-label": H,
+    "aria-labelledby": L,
+    "aria-describedby": P
+  } = j, l = _(null), m = _(null), { isFocusVisible: R, focusProps: A } = B(), [e, s] = g(v), [S, u] = g(0), b = $(), h = $();
+  d(() => {
+    n && (o != null && o.includes(t) && s(!0), !(o != null && o.includes(t)) && s(!1));
+  }, [n]);
+  const w = () => {
+    n ? (f === "single" && (o != null && o.includes(t) && (c([]), s(!1)), !(o != null && o.includes(t)) && (c([t]), s(!0))), f === "multiple" && (o != null && o.includes(t) && (s(!1), c(
+      (r) => r.filter((a) => a !== t)
+    )), !(o != null && o.includes(t)) && (s(!0), c((r) => [...r, t])))) : s((r) => !r);
+  }, { pressProps: I } = J({
+    onPress: w
+  });
+  d(() => {
+    l.current && l.current.querySelectorAll(
+      'a[href], button, input, select, textarea, [tabindex]:not([tabindex="-1"])'
+    ).forEach((a) => {
+      a.setAttribute("tabindex", e ? "0" : "-1");
+    });
+  }, [e]), d(() => {
+    const r = m.current;
+    if (!r)
+      return;
+    u(r.scrollHeight);
+    const a = (q) => {
+      u(q[0].target.scrollHeight);
+    }, x = new ResizeObserver(a);
+    return x.observe(r), () => {
+      x.unobserve(r);
+    };
+  }, [m]);
+  const O = p("eds-accordion", E), D = p("eds-accordion__button", {
+    "eds-accordion__button--open": e,
+    "eds-accordion__button--focused": R,
+    "eds-accordion__button--closed": !e
+  }), F = p("eds-accordion__icon", {
+    "eds-accordion__icon--rotate": e
+  }), V = p("eds-accordion__panel", {
+    "eds-accordion__panel--closed": !e
+  });
+  return /* @__PURE__ */ i.jsxs("div", { className: O, children: [
+    /* @__PURE__ */ i.jsx(y, { variant: "h5", as: "h3", className: "eds-accordion__header", children: /* @__PURE__ */ i.jsxs(
+      "button",
+      {
+        ...G(A, I),
+        id: b,
+        className: D,
+        "aria-expanded": e,
+        "aria-controls": h,
+        "aria-label": H,
+        "aria-labelledby": L,
+        "aria-describedby": P,
+        children: [
+          /* @__PURE__ */ i.jsx("span", { className: "eds-accordion__title", children: N }),
+          /* @__PURE__ */ i.jsx("span", { className: F, children: /* @__PURE__ */ i.jsx(T, { "aria-hidden": !0 }) })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ i.jsx(
+      "div",
+      {
+        role: "region",
+        id: h,
+        className: V,
+        ref: l,
+        style: e ? { height: S } : { height: 0 },
+        "aria-labelledby": b,
+        "aria-hidden": !e,
+        children: /* @__PURE__ */ i.jsx("div", { className: "eds-accordion__panel-wrapper", ref: m, children: C })
+      }
+    )
+  ] });
+};
+export {
+  Uo as default
+};

package/dist/AccordionGroup/AccordionGroup.css.js

@@ -0,0 +1 @@
+

package/dist/AccordionGroup/AccordionGroup.js

@@ -0,0 +1,21 @@
+"use client";
+import { j as o } from "../external/react/jsx-runtime.js";
+import { createContext as d, useState as m, useEffect as u } from "react";
+import p from "../external/classnames/index.js";
+import "./AccordionGroup.css.js";
+const f = d(null), v = (c) => {
+  const { mode: s = "single", selectedKeys: e = [], children: r, className: n } = c, [l, t] = m(e), i = {
+    mode: s,
+    selectedKeys: l,
+    setSelectedKeys: t
+  };
+  u(() => {
+    s === "single" && e.length > 1 && t([e[0]]);
+  }, [s, e]);
+  const a = p("eds-accordion-group", n);
+  return /* @__PURE__ */ o.jsx("div", { className: a, children: /* @__PURE__ */ o.jsx(f.Provider, { value: i, children: r }) });
+};
+export {
+  f as AccordionContext,
+  v as default
+};

package/dist/Autocomplete/Autocomplete.css.js

@@ -0,0 +1 @@
+

package/dist/Autocomplete/Autocomplete.js

@@ -0,0 +1,218 @@
+"use client";
+import { j as e } from "../external/react/jsx-runtime.js";
+import { useRef as s, useEffect as Q } from "react";
+import r from "../external/classnames/index.js";
+import "../output/variables/variables.css.js";
+import "../output/variables/animations.css.js";
+import "../output/variables/focus.css.js";
+import "../output/variables/shadows.css.js";
+import "../output/variables/transitions.css.js";
+import "../output/variables/typography.css.js";
+import "../output/variables/forms.css.js";
+import U from "../output/icons/IconCrossSm.js";
+import "../Table/Table.css.js";
+import "../AccordionGroup/AccordionGroup.js";
+import "../Accordion/Accordion.css.js";
+import W from "../Select/SelectList.js";
+import "./Autocomplete.css.js";
+import "../Button/Button.js";
+import "../Calendar/Calendar.js";
+import "../Checkbox/Checkbox.js";
+import "../CheckboxGroup/CheckboxGroup.js";
+import "../Choice/Choice.js";
+import "../ChoiceCard/ChoiceCard.js";
+import "../Color/Color.js";
+import "../DatePicker/DatePicker.js";
+import "../Dialog/Dialog.js";
+import "../InfoHint/InfoHint.js";
+import X from "../Label/Label.js";
+import "../Modal/Modal.css.js";
+import "react-dom";
+import { useFocusRing as v } from "../external/@react-aria/focus/dist/useFocusRing.js";
+import "../Tooltip/Tooltip.css.js";
+import "../Notification/Notification.css.js";
+import "../Phone/PhoneSelect.js";
+import "../Phone/Phone.css.js";
+import Y from "../Popover/Popover.js";
+import "../Radio/Radio.js";
+import "../RadioGroup/RadioGroup.js";
+import "../Searchfield/Searchfield.js";
+import "../Select/Select.js";
+import "../Slider/SliderThumb.css.js";
+import "../Slider/Slider.css.js";
+import N from "../Stack/Stack.js";
+import "../Switch/Switch.js";
+import "../SwitchGroup/SwitchGroup.js";
+import "../Tabs/Tabs.js";
+import "../Tab/Tab.css.js";
+import c from "../Text/Text.js";
+import "../Textarea/Textarea.js";
+import "../Textfield/Textfield.js";
+import "../Toast/Toast.js";
+import "../Toast/ToastRegion.css.js";
+import "../Chart/Chart.js";
+import { useFilter as Z } from "../external/@react-aria/i18n/dist/useFilter.js";
+import { useComboBoxState as ee } from "../external/@react-stately/combobox/dist/useComboBoxState.js";
+import { useComboBox as te } from "../external/@react-aria/combobox/dist/useComboBox.js";
+import { useSearchFieldState as oe } from "../external/@react-stately/searchfield/dist/useSearchFieldState.js";
+import { useSearchField as se } from "../external/@react-aria/searchfield/dist/useSearchField.js";
+import { useButton as re } from "../external/@react-aria/button/dist/useButton.js";
+import { mergeProps as P } from "../external/@react-aria/utils/dist/mergeProps.js";
+const pt = (o) => {
+  const { contains: B } = Z({ sensitivity: "base" }), t = ee({ ...o, defaultFilter: B }), i = s(null), m = s(null), p = s(null), n = s(null), u = s(null), d = s(null), { isOpen: F = !1, isNonModal: R = !1, isDisabled: S = !1 } = o, {
+    descriptionProps: f,
+    inputProps: C,
+    listBoxProps: I,
+    labelProps: b,
+    validationErrors: L,
+    errorMessageProps: M,
+    isInvalid: x
+  } = te(
+    {
+      ...o,
+      inputRef: i,
+      listBoxRef: m,
+      popoverRef: p
+    },
+    t
+  );
+  Q(() => {
+    t.setOpen(F);
+  }, [o.isOpen]);
+  const _ = {
+    label: o.label,
+    value: t.inputValue,
+    onChange: (J) => t.setInputValue(J)
+  }, V = oe(_), { clearButtonProps: w } = se(
+    _,
+    V,
+    i
+  ), { buttonProps: y } = re(w, u), { isFocusVisible: E, focusProps: O } = v({
+    isTextInput: !0
+  }), {
+    isFocusVisible: $,
+    focusProps: T
+  } = v({
+    isTextInput: !0
+  }), {
+    label: h,
+    description: a,
+    validationBehavior: z,
+    errorMessage: A,
+    descriptionSeverity: g = "regular",
+    labelSuffix: j,
+    tooltipTrigger: D,
+    clearButtonAriaLabel: k
+  } = o, K = r("eds-autocomplete", {
+    "eds-autocomplete--disabled": S
+  }), q = r("eds-autocomplete__textfield", {
+    "eds-autocomplete__textfield--focused": E,
+    "eds-autocomplete__textfield--focus-within": $,
+    "eds-autocomplete__textfield--invalid": x
+  }), G = r({
+    "eds-autocomplete__messages-description--regular": g === "regular",
+    "eds-autocomplete__messages-description--warning": g === "warning"
+  }), l = z === "native" ? L.join(" ") : A, H = l || a;
+  return /* @__PURE__ */ e.jsxs("div", { ref: d, className: K, children: [
+    /* @__PURE__ */ e.jsxs(N, { children: [
+      h && /* @__PURE__ */ e.jsxs("div", { className: "eds-autocomplete__label-container", children: [
+        /* @__PURE__ */ e.jsxs(
+          X,
+          {
+            weight: "600",
+            className: "eds-autocomplete__label",
+            ...b,
+            children: [
+              h,
+              j && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+                /* @__PURE__ */ e.jsx("span", { className: "eds-autocomplete__label-suffix-separator" }),
+                /* @__PURE__ */ e.jsx(
+                  c,
+                  {
+                    variant: "line",
+                    italic: !0,
+                    size: "small",
+                    className: "eds-autocomplete__label-suffix",
+                    children: j
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        D
+      ] }),
+      /* @__PURE__ */ e.jsxs("div", { ref: n, className: q, children: [
+        /* @__PURE__ */ e.jsx(
+          "input",
+          {
+            ...P(C, O),
+            ref: i,
+            className: "eds-autocomplete__textfield-input"
+          }
+        ),
+        t.inputValue && /* @__PURE__ */ e.jsx(
+          "button",
+          {
+            ...P(y, T),
+            ref: u,
+            className: r("eds-autocomplete__clear", {
+              "eds-autocomplete__clear--focused": $
+            }),
+            onKeyDown: void 0,
+            tabIndex: 0,
+            "aria-label": k,
+            "aria-describedby": `${b.id} ${f.id}`,
+            children: /* @__PURE__ */ e.jsx(
+              U,
+              {
+                "aria-hidden": "true",
+                className: "eds-autocomplete__clear-icon"
+              }
+            )
+          }
+        )
+      ] }),
+      H && /* @__PURE__ */ e.jsxs(N, { children: [
+        x && l && /* @__PURE__ */ e.jsx(
+          "div",
+          {
+            ...M,
+            children: /* @__PURE__ */ e.jsx(c, { variant: "line", size: "small", className: "eds-autocomplete__messages-error", children: l })
+          }
+        ),
+        a && /* @__PURE__ */ e.jsx(
+          "div",
+          {
+            ...f,
+            children: /* @__PURE__ */ e.jsx(c, { variant: "line", size: "small", className: G, children: a })
+          }
+        )
+      ] })
+    ] }),
+    t.isOpen && /* @__PURE__ */ e.jsx(
+      Y,
+      {
+        popoverRef: p,
+        triggerRef: n,
+        portalContainer: d.current,
+        state: t,
+        placement: "bottom start",
+        offset: 6,
+        className: "eds-autocomplete__popover",
+        isNonModal: R,
+        children: /* @__PURE__ */ e.jsx(
+          W,
+          {
+            ...I,
+            listBoxRef: m,
+            state: t
+          }
+        )
+      }
+    )
+  ] });
+};
+export {
+  pt as default
+};

package/dist/Button/Button.css.js

@@ -0,0 +1 @@
+

package/dist/Button/Button.js

@@ -0,0 +1,95 @@
+"use client";
+import { j as t } from "../external/react/jsx-runtime.js";
+import { forwardRef as I, useRef as k, cloneElement as C } from "react";
+import { mergeProps as b } from "../external/@react-aria/utils/dist/mergeProps.js";
+import { useObjectRef as E } from "../external/@react-aria/utils/dist/useObjectRef.js";
+import x from "../external/classnames/index.js";
+import z from "../Tooltip/Tooltip.js";
+import "./Button.css.js";
+import { useButton as D } from "../external/@react-aria/button/dist/useButton.js";
+import { useFocusRing as O } from "../external/@react-aria/focus/dist/useFocusRing.js";
+const U = I((d, $) => {
+  const {
+    children: s,
+    className: h,
+    variant: u = "primary",
+    size: f = "default",
+    inverted: j,
+    isIcon: o,
+    isFullWidth: N,
+    tooltipLabel: n,
+    tooltipWrapperClassName: R,
+    iconLeft: a,
+    iconRight: r,
+    element: p = "button",
+    isDisabled: B = !1
+  } = d, g = E($), L = k(
+    null
+  ), e = g || L, { buttonProps: v } = D(
+    { elementType: p, ...d },
+    e
+  ), { isFocusVisible: w, focusProps: y } = O(), c = x("eds-button", h, {
+    [`eds-button--${u}`]: u,
+    [`eds-button--${f}`]: f,
+    "eds-button--inverted": j,
+    "eds-button--full-width": N,
+    "eds-button--icon-only": o,
+    "eds-button--has-icons": a || r,
+    "eds-button-focus-ring": w,
+    "eds-button--disabled": B
+  }), P = x(
+    "eds-button-base",
+    R
+  ), i = b(v, y), m = /* @__PURE__ */ t.jsxs(
+    "button",
+    {
+      ...i,
+      ref: e,
+      className: c,
+      children: [
+        a,
+        /* @__PURE__ */ t.jsx("span", { className: "eds-label", children: s }),
+        r
+      ]
+    }
+  ), l = /* @__PURE__ */ t.jsx(
+    "button",
+    {
+      ...i,
+      ref: e,
+      className: c,
+      children: s
+    }
+  ), T = /* @__PURE__ */ t.jsx(z, { label: n, children: (F) => /* @__PURE__ */ t.jsx("span", { className: P, children: C(
+    l,
+    b(l.props, F)
+  ) }) }), W = /* @__PURE__ */ t.jsxs(
+    "a",
+    {
+      ...i,
+      role: void 0,
+      ref: e,
+      className: c,
+      children: [
+        a,
+        /* @__PURE__ */ t.jsx("span", { className: "eds-label", children: s }),
+        r
+      ]
+    }
+  );
+  switch (p) {
+    case "a":
+      return W;
+    case "button":
+      return o && !n ? l : o && n !== void 0 ? (console.warn(
+        "Button: `tooltipLabel` is deprecated. Use `Tooltip` component instead."
+      ), T) : m;
+    default:
+      return m;
+  }
+});
+U.displayName = "Button";
+export {
+  U as Button,
+  U as default
+};

package/dist/Calendar/Calendar.css.js

@@ -0,0 +1 @@
+

package/dist/Calendar/Calendar.js

@@ -0,0 +1,98 @@
+"use client";
+import { j as r } from "../external/react/jsx-runtime.js";
+import { createCalendar as n } from "../external/@internationalized/date/dist/createCalendar.js";
+import "../output/variables/variables.css.js";
+import "../output/variables/animations.css.js";
+import "../output/variables/focus.css.js";
+import "../output/variables/shadows.css.js";
+import "../output/variables/transitions.css.js";
+import "../output/variables/typography.css.js";
+import "../output/variables/forms.css.js";
+import d from "../output/icons/IconChevronLeftAltSm.js";
+import c from "../output/icons/IconChevronRightAltSm.js";
+import "../Table/Table.css.js";
+import "../external/classnames/index.js";
+import "react";
+import "../AccordionGroup/AccordionGroup.js";
+import "../Accordion/Accordion.css.js";
+import "../Select/SelectListOption.css.js";
+import "../Select/SelectList.css.js";
+import "../Autocomplete/Autocomplete.css.js";
+import { Button as i } from "../Button/Button.js";
+import "../Checkbox/Checkbox.js";
+import "../CheckboxGroup/CheckboxGroup.js";
+import "../Choice/Choice.js";
+import "../ChoiceCard/ChoiceCard.js";
+import "../Color/Color.js";
+import "../DatePicker/DatePicker.js";
+import "../Dialog/Dialog.js";
+import "../InfoHint/InfoHint.js";
+import "../Modal/Modal.css.js";
+import "react-dom";
+import "../Tooltip/Tooltip.css.js";
+import "../Notification/Notification.css.js";
+import "../Phone/PhoneSelect.js";
+import "../Phone/Phone.css.js";
+import "../Popover/Popover.js";
+import "../Radio/Radio.js";
+import "../RadioGroup/RadioGroup.js";
+import "../Searchfield/Searchfield.js";
+import "../Select/Select.js";
+import "../Slider/SliderThumb.css.js";
+import "../Slider/Slider.css.js";
+import "../Stack/Stack.css.js";
+import "../Switch/Switch.js";
+import "../SwitchGroup/SwitchGroup.js";
+import "../Tabs/Tabs.js";
+import "../Tab/Tab.css.js";
+import l from "../Text/Text.js";
+import "../Textarea/Textarea.js";
+import "../Textfield/Textfield.js";
+import "../Toast/Toast.js";
+import "../Toast/ToastRegion.css.js";
+import "../Chart/Chart.js";
+import f from "./CalendarGrid.js";
+import "./Calendar.css.js";
+import { useLocale as x } from "../external/@react-aria/i18n/dist/context.js";
+import { useCalendarState as u } from "../external/@react-stately/calendar/dist/useCalendarState.js";
+import { useCalendar as h } from "../external/@react-aria/calendar/dist/useCalendar.js";
+const $ = (t) => {
+  const { locale: e } = x(), o = u({
+    ...t,
+    locale: e,
+    createCalendar: n
+  }), { calendarProps: m, prevButtonProps: a, nextButtonProps: p, title: s } = h(t, o);
+  return /* @__PURE__ */ r.jsxs("div", { ...m, className: "eds-calendar", children: [
+    /* @__PURE__ */ r.jsxs("div", { className: "eds-calendar__header", children: [
+      /* @__PURE__ */ r.jsx(i, { ...a, variant: "tertiary", isIcon: !0, children: /* @__PURE__ */ r.jsx(
+        d,
+        {
+          "aria-hidden": "true",
+          className: "eds-calendar__icon"
+        }
+      ) }),
+      /* @__PURE__ */ r.jsx(
+        l,
+        {
+          variant: "line",
+          size: "small",
+          weight: "600",
+          className: "eds-calendar__title",
+          children: s
+        }
+      ),
+      /* @__PURE__ */ r.jsx(i, { ...p, variant: "tertiary", isIcon: !0, children: /* @__PURE__ */ r.jsx(
+        c,
+        {
+          "aria-hidden": "true",
+          className: "eds-calendar__icon"
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ r.jsx(f, { state: o })
+  ] });
+};
+$.displayName = "Calendar";
+export {
+  $ as default
+};

package/dist/Calendar/CalendarCell.css.js

@@ -0,0 +1 @@
+