rk-designsystem 1.3.4 → 1.4.0

package/dist/components/DateInput/index.js

@@ -1,115 +1,113 @@
 "use client";
-import { jsxs as S, jsx as g } from "react/jsx-runtime";
-import pe, { forwardRef as be, useEffect as O, useRef as P, useCallback as k, useState as me, useId as ve } from "react";
+import { jsxs as L, jsx as g } from "react/jsx-runtime";
+import pe, { forwardRef as be, useEffect as M, useRef as S, useCallback as k, useState as me, useId as ve } from "react";
 import { parse as ge, isValid as xe } from "date-fns";
-import a from "./styles.module.css.js";
+import o from "./styles.module.css.js";
 import { useLanguageOptional as he } from "../../context/LanguageContext.js";
 const x = (e) => {
-  const n = e.slice(0, 2), h = e.slice(2, 4), o = e.slice(4, 8);
-  return e.length > 4 ? `${n}.${h}.${o}` : e.length > 2 ? `${n}.${h}` : e.length > 0 ? n : "";
-}, N = (e) => (e || "").replace(/\D/g, "").slice(0, 8), q = (e) => {
+  const a = e.slice(0, 2), h = e.slice(2, 4), s = e.slice(4, 8);
+  return e.length > 4 ? `${a}.${h}.${s}` : e.length > 2 ? `${a}.${h}` : e.length > 0 ? a : "";
+}, N = (e) => (e || "").replace(/\D/g, "").slice(0, 8), O = (e) => {
   if (e.length < 8) return null;
-  const n = ge(x(e), "dd.MM.yyyy", /* @__PURE__ */ new Date());
-  return xe(n);
+  const a = ge(x(e), "dd.MM.yyyy", /* @__PURE__ */ new Date());
+  return xe(a);
 }, ye = be(
-  (e, n) => {
+  (e, a) => {
     const { t: h } = he();
-    O(() => {
+    M(() => {
       const r = "rk-dateinput-inline-styles";
       if (typeof document > "u" || document.getElementById(r)) return;
-      const t = Ie(a), m = document.createElement("style");
+      const t = Ie(o), m = document.createElement("style");
       m.id = r, m.textContent = t, document.head.prepend(m);
     }, []);
     const {
-      label: o,
+      label: s,
       suffixIcon: V,
-      onSuffixClick: c,
-      className: A,
-      inputWrapperClassName: H,
-      inputClassName: G,
+      onSuffixClick: u,
+      className: P,
+      inputWrapperClassName: q,
+      inputClassName: H,
       value: y,
-      defaultValue: J,
+      defaultValue: A,
       onChange: I,
       onValidationChange: $,
-      readOnly: K,
-      placeholder: Q = "dd.mm.åååå",
-      id: T,
-      name: U,
-      required: X,
+      readOnly: G,
+      placeholder: J = "dd.mm.åååå",
+      id: K,
+      name: Q,
+      required: T,
       disabled: w,
-      onClick: Y,
-      onFocus: Z,
+      onClick: U,
+      onFocus: X,
       onBlur: z,
-      autoComplete: _ = "off",
-      "aria-label": j,
-      "aria-labelledby": W,
+      autoComplete: Y = "off",
+      "aria-label": Z,
+      "aria-labelledby": _,
       description: C,
-      error: u,
+      error: c,
       "data-color": ee,
       "data-size": re,
       ...te
-    } = e, B = y !== void 0, f = P(null);
+    } = e, B = y !== void 0, f = S(null);
     pe.useImperativeHandle(
-      n,
+      a,
       () => f.current
     );
-    const R = P(null), i = k(
+    const j = S(null), l = k(
       (r, t) => {
-        r !== R.current && (R.current = r, $ == null || $(r, t));
+        r !== j.current && (j.current = r, $ == null || $(r, t));
       },
       [$]
     ), D = k(
       (r) => x(N(r)),
       []
-    ), [p, E] = me(
-      () => D(y ?? J)
+    ), [p, W] = me(
+      () => D(y ?? A)
     );
-    O(() => {
+    M(() => {
       if (B) {
         const r = D(y);
-        r !== p && (E(r), f.current && f.current.value !== r && (f.current.value = r));
+        r !== p && (W(r), f.current && f.current.value !== r && (f.current.value = r));
       }
     }, [y, B, p, D]);
     const oe = k(
       (r) => {
-        const t = r.target, m = p, s = N(t.value), d = x(s);
-        let l = 0;
-        const v = s.length;
-        v <= 2 ? l = v : v <= 4 ? l = v + 1 : l = v + 2, l = Math.min(l, d.length), E(d), t.value = d, t.setSelectionRange(l, l), (d !== m || B) && (I == null || I(r, d));
-        const fe = q(s);
-        (s.length === 0 || s.length === 8) && i(s.length === 0 ? null : fe, d);
+        const t = r.target, m = p, i = N(t.value), d = x(i);
+        let n = 0;
+        const v = i.length;
+        v <= 2 ? n = v : v <= 4 ? n = v + 1 : n = v + 2, n = Math.min(n, d.length), W(d), t.value = d, t.setSelectionRange(n, n), (d !== m || B) && (I == null || I(r, d));
+        const fe = O(i);
+        (i.length === 0 || i.length === 8) && l(i.length === 0 ? null : fe, d);
       },
-      [p, B, I, i]
+      [p, B, I, l]
     ), ae = k(
       (r) => {
         const t = N(r.target.value);
-        t.length === 0 ? i(null, "") : t.length < 8 ? i(!1, x(t)) : i(q(t), x(t)), z == null || z(r);
+        t.length === 0 ? l(null, "") : t.length < 8 ? l(!1, x(t)) : l(O(t), x(t)), z == null || z(r);
       },
-      [z, i]
-    ), ne = [a.fieldset, A].filter(Boolean).join(" "), le = [
-      a.inputWrapper,
-      H,
-      u ? a.inputWrapperError : ""
+      [z, l]
+    ), ne = [o.fieldset, P].filter(Boolean).join(" "), le = [
+      o.inputWrapper,
+      q,
+      c ? o.inputWrapperError : ""
     ].filter(Boolean).join(" "), ie = [
-      G
-    ].filter(Boolean).join(" "), se = [
-      a.suffixButton,
-      c ? a.suffixButtonInteractive : ""
-    ].filter(Boolean).join(" ");
-    !o && !j && !W && console.warn("Advarsel: DateInput-komponenten bør ha label, aria-label, eller aria-labelledby for tilgjengelighet.");
-    const de = ve(), b = T ?? `dateinput${de}`, F = o && typeof o == "string" ? `${b}-label` : void 0, L = C ? `${b}-desc` : void 0, M = u ? `${b}-err` : void 0, ce = [L, M].filter(Boolean).join(" ") || void 0, ue = W ?? F;
+      H
+    ].filter(Boolean).join(" "), de = [
+      o.suffixButton,
+      u ? o.suffixButtonInteractive : ""
+    ].filter(Boolean).join(" "), se = ve(), b = K ?? `dateinput${se}`, R = s ? `${b}-label` : void 0, E = C ? `${b}-desc` : void 0, F = c ? `${b}-err` : void 0, ue = [E, F].filter(Boolean).join(" ") || void 0, ce = _ ?? R;
     return (
       // --- Bruk data-color og data-size på den ytre wrapperen ---
-      /* @__PURE__ */ S(
+      /* @__PURE__ */ L(
         "div",
         {
           className: ne,
           "data-color": ee,
           "data-size": re,
           children: [
-            o && typeof o == "string" ? /* @__PURE__ */ g("label", { id: F, htmlFor: b, children: o }) : o,
-            C && /* @__PURE__ */ g("p", { id: L, className: a.description, children: C }),
-            /* @__PURE__ */ S("div", { className: le, children: [
+            s ? /* @__PURE__ */ g("label", { id: R, htmlFor: b, children: s }) : null,
+            C && /* @__PURE__ */ g("p", { id: E, className: o.description, children: C }),
+            /* @__PURE__ */ L("div", { className: le, children: [
               /* @__PURE__ */ g(
                 "input",
                 {
@@ -119,21 +117,21 @@ const x = (e) => {
                   pattern: "\\d{2}\\.\\d{2}\\.\\d{4}",
                   maxLength: 10,
                   value: p,
-                  readOnly: K,
-                  placeholder: Q,
+                  readOnly: G,
+                  placeholder: J,
                   id: b,
-                  name: U,
-                  required: X,
+                  name: Q,
+                  required: T,
                   disabled: w,
-                  onClick: Y,
+                  onClick: U,
                   onChange: oe,
-                  onFocus: Z,
+                  onFocus: X,
                   onBlur: ae,
-                  autoComplete: _,
-                  "aria-label": j,
-                  "aria-labelledby": ue,
-                  "aria-describedby": ce,
-                  "aria-invalid": !!u,
+                  autoComplete: Y,
+                  "aria-label": Z,
+                  "aria-labelledby": ce,
+                  "aria-describedby": ue,
+                  "aria-invalid": !!c,
                   className: ie,
                   ...te
                 }
@@ -142,17 +140,17 @@ const x = (e) => {
                 "button",
                 {
                   type: "button",
-                  className: se,
-                  onClick: w ? void 0 : c,
-                  tabIndex: c && !w ? 0 : -1,
-                  "aria-hidden": !c,
+                  className: de,
+                  onClick: w ? void 0 : u,
+                  tabIndex: u && !w ? 0 : -1,
+                  "aria-hidden": !u,
                   disabled: w,
-                  "aria-label": c ? h("dateInput.openDatePicker") : void 0,
+                  "aria-label": u ? h("dateInput.openDatePicker") : void 0,
                   children: V
                 }
               )
             ] }),
-            u && /* @__PURE__ */ g("p", { id: M, className: a.error, role: "alert", children: u })
+            c && /* @__PURE__ */ g("p", { id: F, className: o.error, role: "alert", children: c })
           ]
         }
       )
@@ -169,11 +167,11 @@ function Ie(e) {
   display: block;
   margin-bottom: var(--ds-size-1, 4px);
   font-weight: var(--ds-font-weight-medium, 500);
-  color: var(--ds-color-text-default, #2b2b2b);
+  color: var(--ds-color-neutral-text-default, #2b2b2b);
 }
 .${e.description} {
   font-size: var(--ds-font-size-2, 14px);
-  color: var(--ds-color-text-subtle, #5d5d5d);
+  color: var(--ds-color-neutral-text-subtle, #5d5d5d);
   margin-top: var(--ds-size-1, 4px);
   margin-bottom: var(--ds-size-2, 8px);
 }
@@ -187,7 +185,7 @@ function Ie(e) {
   align-items: stretch;
   width: 100%;
   position: relative;
-  border: var(--ds-border-width-default, 1px) solid var(--ds-color-border-default, #797979);
+  border: var(--ds-border-width-default, 1px) solid var(--ds-color-neutral-border-default, #797979);
   border-radius: var(--ds-border-radius-md, 4px);
   overflow: hidden;
   transition: border-color 0.1s ease-out, outline 0.1s ease-out;
@@ -204,8 +202,8 @@ function Ie(e) {
   flex-grow: 1;
   width: auto;
   min-width: 0;
-  background-color: var(--ds-color-background-default, #fff);
-  color: var(--ds-color-text-default, #2b2b2b);
+  background-color: var(--ds-color-neutral-background-default, #fff);
+  color: var(--ds-color-neutral-text-default, #2b2b2b);
   border: none;
   border-radius: 0;
   outline: none;
@@ -230,9 +228,9 @@ function Ie(e) {
   margin: 0;
   border: none;
   border-radius: 0;
-  border-left: var(--ds-border-width-default, 1px) solid var(--ds-color-border-default, #797979);
-  background-color: var(--ds-color-surface-tinted, #e8e8e8);
-  color: var(--ds-color-text-subtle, #5d5d5d);
+  border-left: var(--ds-border-width-default, 1px) solid var(--ds-color-neutral-border-default, #797979);
+  background-color: var(--ds-color-neutral-surface-tinted, #e8e8e8);
+  color: var(--ds-color-neutral-text-subtle, #5d5d5d);
   font-size: 1.25rem;
   box-sizing: border-box;
   cursor: default;
@@ -242,8 +240,8 @@ function Ie(e) {
   cursor: pointer;
 }
 .${e.suffixButtonInteractive}:hover:not(:disabled) {
-  color: var(--ds-color-text-default, #2b2b2b);
-  background-color: var(--ds-color-surface-hover, #dadada);
+  color: var(--ds-color-neutral-text-default, #2b2b2b);
+  background-color: var(--ds-color-neutral-surface-hover, #dadada);
 }
 .${e.suffixButton}:disabled {
   opacity: var(--ds-opacity-disabled, 0.3);

package/dist/components/DateInput/styles.module.css.js

@@ -1,5 +1,5 @@
 "use client";
-const t = "_fieldset_1d1ez_2", r = "_description_1d1ez_14", e = "_error_1d1ez_21", n = "_inputWrapper_1d1ez_30", i = "_inputWrapperError_1d1ez_42", o = "_suffixButton_1d1ez_80", s = "_suffixButtonInteractive_1d1ez_100", p = {
+const t = "_fieldset_1b5hv_7", r = "_description_1b5hv_19", e = "_error_1b5hv_26", n = "_inputWrapper_1b5hv_35", i = "_inputWrapperError_1b5hv_47", o = "_suffixButton_1b5hv_85", s = "_suffixButtonInteractive_1b5hv_105", p = {
   fieldset: t,
   description: r,
   error: e,