@midas-ds/components 17.10.17 → 17.11.1

package/CHANGELOG.md

@@ -1,3 +1,28 @@
+## 17.11.1 (2026-04-09)
+
+### 🧱 Updated Dependencies
+
+- Updated theme to 3.12.20
+
+## 17.11.0 (2026-04-08)
+
+### 🚀 Features
+
+- **components:** add TimeField component ([3c88d5371d](https://github.com/migrationsverket/midas/commit/3c88d5371d))
+
+### 🩹 Fixes
+
+- **components,time-field:** make TimeFieldProps generic, remove React.FC and data-testid ([73599aadbd](https://github.com/migrationsverket/midas/commit/73599aadbd))
+
+### 🏭 Refactoring
+
+- **components,date-field,time-field:** wrap DateField and TimeField in forwardRef ([7bd91d2d07](https://github.com/migrationsverket/midas/commit/7bd91d2d07))
+- **components,date-field:** make DateFieldProps generic and remove React.FC ([eefb171f3e](https://github.com/migrationsverket/midas/commit/eefb171f3e))
+
+### 🧪 Tests updated
+
+- **components,date-field,time-field:** add forwardRef tests for DateField and TimeField ([83f63f8692](https://github.com/migrationsverket/midas/commit/83f63f8692))
+
 ## 17.10.17 (2026-04-07)
 
 ### 🧱 Updated Dependencies

package/assets/TimeField.css

@@ -0,0 +1 @@
+._timeField_z8d4x_1{font-family:var(--midas-typography-font-family);display:flex;flex-direction:column;align-items:flex-start}._timeField_z8d4x_1[data-readonly] ._inputField_z8d4x_7{background-color:transparent;border-bottom-color:var(--midas-border-color-subtle)}._timeField_z8d4x_1[data-disabled] ._inputField_z8d4x_7{color:var(--midas-text-disabled);cursor:not-allowed;border-bottom-color:var(--midas-border-color-disabled);background-color:var(--midas-field-disabled)}._timeField_z8d4x_1[data-invalid] ._inputField_z8d4x_7{border:none;box-shadow:var(--midas-state-invalid)}._inputField_z8d4x_7{box-sizing:border-box;width:100%;min-height:var(--midas-size-control);display:flex;justify-content:space-between;align-items:center;background-color:var(--midas-field-01-base);border:1px solid transparent;border-bottom-color:var(--midas-border-color-primary);padding:0 0 0 1rem;position:relative}._inputField_z8d4x_7._medium_z8d4x_38{min-height:var(--midas-size-control-md)}._timeField_z8d4x_1:not([data-disabled],[data-readonly]) ._inputField_z8d4x_7 [data-hovered]{background-color:var(--midas-field-01-hover)}._clearButton_z8d4x_47{border:none;background-color:transparent}@media(forced-colors:active){._inputField_z8d4x_7{border:1px solid var(--midas-border-color-primary)}}

package/chunks/DateField-moMaM1xn.js

@@ -0,0 +1,89 @@
+import { jsxs as p, jsx as e } from "react/jsx-runtime";
+import * as F from "react";
+import { DateField as x, DateFieldStateContext as g } from "react-aria-components";
+import { c as d } from "./clsx-AexbMWKp.js";
+import { D as j, a as B } from "./DateInput-NzWcnB4y.js";
+import { F as f } from "./FieldError-krpMBtie.js";
+import { a as C, L as w } from "./Label-Cg0aAlnt.js";
+import { T as b } from "./Text-D0r_W4lH.js";
+import { C as L } from "./ClearButton-DkC8PIMi.js";
+import { FocusScope as S, useFocusManager as v } from "@react-aria/focus";
+import { u as N } from "./useLocalizedStringFormatter-BHvsRxDk.js";
+import '../assets/DateField.css';const V = { clear: "Clear date" }, R = { clear: "Rensa datum" }, T = {
+  en: V,
+  sv: R
+}, E = "_dateField_1ejwm_1", I = "_inputField_1ejwm_7", M = "_medium_1ejwm_38", P = "_clearButton_1ejwm_47", r = {
+  dateField: E,
+  inputField: I,
+  medium: M,
+  clearButton: P
+}, W = ({ isClearable: i, size: t, isDisabled: s, isReadOnly: o }) => {
+  const l = N(T), a = F.useContext(g), n = v(), m = () => {
+    a?.setValue(null), n?.focusFirst();
+  };
+  return i && a?.value != null && !o ? /* @__PURE__ */ e(
+    L,
+    {
+      onPress: m,
+      size: t,
+      isDisabled: s,
+      "aria-label": l.format("clear"),
+      className: d(r.clearButton, {
+        [r.medium]: t === "medium"
+      })
+    }
+  ) : null;
+}, U = F.forwardRef(
+  ({
+    className: i,
+    description: t,
+    errorMessage: s,
+    errorPosition: o = "top",
+    label: l,
+    size: a = "large",
+    popover: n,
+    isClearable: m = !1,
+    isReadOnly: c,
+    isDisabled: u,
+    ..._
+  }, h) => /* @__PURE__ */ p(
+    x,
+    {
+      ..._,
+      ref: h,
+      isReadOnly: c,
+      isDisabled: u,
+      className: d(r.dateField, i),
+      children: [
+        /* @__PURE__ */ e(C, { popover: n, children: l && /* @__PURE__ */ e(w, { children: l }) }),
+        t && /* @__PURE__ */ e(b, { slot: "description", children: t }),
+        o === "top" && /* @__PURE__ */ e(f, { children: s }),
+        /* @__PURE__ */ e(
+          "div",
+          {
+            className: d(r.inputField, {
+              [r.medium]: a === "medium"
+            }),
+            "data-testid": "date-field_input-field",
+            children: /* @__PURE__ */ p(S, { children: [
+              /* @__PURE__ */ e(j, { children: (D) => /* @__PURE__ */ e(B, { segment: D }) }),
+              /* @__PURE__ */ e(
+                W,
+                {
+                  isClearable: m,
+                  size: a,
+                  isDisabled: u,
+                  isReadOnly: c
+                }
+              )
+            ] })
+          }
+        ),
+        o === "bottom" && /* @__PURE__ */ e(f, { children: s })
+      ]
+    }
+  )
+);
+export {
+  U as D
+};

package/chunks/DateInput-NzWcnB4y.js

@@ -0,0 +1,29 @@
+import { jsx as a } from "react/jsx-runtime";
+import { DateSegment as n, DateInput as m } from "react-aria-components";
+import { c as s } from "./clsx-AexbMWKp.js";
+import '../assets/DateInput.css';const d = "_dateSegment_15g5c_1", o = {
+  dateSegment: d
+}, u = ({
+  className: t,
+  ...e
+}) => /* @__PURE__ */ a(
+  n,
+  {
+    className: s(o.dateSegment, t),
+    ...e
+  }
+), c = "_dateInput_14x1f_1", p = "_divider_14x1f_21", r = {
+  dateInput: c,
+  divider: p
+}, D = ({ className: t, ...e }) => /* @__PURE__ */ a(
+  m,
+  {
+    className: s(r.dateInput, t),
+    ...e
+  }
+);
+export {
+  D,
+  u as a,
+  r as s
+};

package/chunks/DateInputDivider-BHAwPkIR.js

@@ -0,0 +1,13 @@
+import { jsx as r } from "react/jsx-runtime";
+import { s } from "./DateInput-NzWcnB4y.js";
+const a = () => /* @__PURE__ */ r(
+  "span",
+  {
+    "aria-hidden": "true",
+    className: s.divider,
+    children: "-"
+  }
+);
+export {
+  a as D
+};

package/chunks/{DateRangePicker-BK8CbDCZ.js → DateRangePicker-BItgKNh8.js}

@@ -3,16 +3,17 @@ import { jsx as e, jsxs as h } from "react/jsx-runtime";
 import { Group as F, DatePickerStateContext as B, DateRangePickerStateContext as M, Popover as N, Dialog as S, DatePicker as R, DateRangePicker as G } from "react-aria-components";
 import { a as k } from "./clsx-AexbMWKp.js";
 import { C as L, R as w } from "./RangeCalendar-DxLInTav.js";
-import { D as P, b as f, a as I } from "./DateInputDivider-DwopMIb9.js";
+import { D as f, a as P } from "./DateInput-NzWcnB4y.js";
 import { F as _ } from "./FieldError-krpMBtie.js";
 import { a as g, L as y } from "./Label-Cg0aAlnt.js";
 import { T as D } from "./Text-D0r_W4lH.js";
 import * as v from "react";
-import { C as O } from "./ClearButton-DkC8PIMi.js";
-import { FocusScope as V, useFocusManager as T } from "@react-aria/focus";
-import { B as $ } from "./Button-GCROAMSl.js";
-import { c as A } from "./createLucideIcon-CP-mMPfa.js";
-import { u as b } from "./useLocalizedStringFormatter-BHvsRxDk.js";
+import { C as I } from "./ClearButton-DkC8PIMi.js";
+import { FocusScope as O, useFocusManager as V } from "@react-aria/focus";
+import { B as T } from "./Button-GCROAMSl.js";
+import { c as $ } from "./createLucideIcon-CP-mMPfa.js";
+import { u as j } from "./useLocalizedStringFormatter-BHvsRxDk.js";
+import { D as A } from "./DateInputDivider-BHAwPkIR.js";
 import '../assets/DateRangePicker.css';const E = [
   ["path", { d: "M8 2v4", key: "1cmpym" }],
   ["path", { d: "M16 2v4", key: "4m81vk" }],
@@ -24,7 +25,7 @@ import '../assets/DateRangePicker.css';const E = [
   ["path", { d: "M8 18h.01", key: "lrp35t" }],
   ["path", { d: "M12 18h.01", key: "mhygvu" }],
   ["path", { d: "M16 18h.01", key: "kzsmim" }]
-], W = A("calendar-days", E), q = { clear: "Clear date", "open-calendar": "Open calendar" }, H = { clear: "Rensa datum", "open-calendar": "Öppna kalender" }, j = {
+], W = $("calendar-days", E), q = { clear: "Clear date", "open-calendar": "Open calendar" }, H = { clear: "Rensa datum", "open-calendar": "Öppna kalender" }, C = {
   en: q,
   sv: H
 }, J = "_datePicker_13jtn_1", K = "_inputField_13jtn_8", Q = "_medium_13jtn_24", U = "_readOnly_13jtn_47", X = "_buttonGroup_13jtn_52", Y = "_iconButton_13jtn_58", Z = "_popover_13jtn_81 _dropdownAnimation_1ljkv_4", z = "_dialog_13jtn_85", a = {
@@ -42,9 +43,9 @@ import '../assets/DateRangePicker.css';const E = [
   isReadOnly: i,
   size: n
 }) => {
-  const o = v.useContext(B), s = v.useContext(M), l = b(j), d = T(), r = s ?? o, u = ee(r) ? !!r.value.start && r.value.end : !!r?.value;
+  const o = v.useContext(B), s = v.useContext(M), l = j(C), d = V(), r = s ?? o, u = ee(r) ? !!r.value.start && r.value.end : !!r?.value;
   return t && u && !i ? /* @__PURE__ */ e(
-    O,
+    I,
     {
       onPress: () => {
         r?.setValue(null), d?.focusFirst();
@@ -57,7 +58,7 @@ import '../assets/DateRangePicker.css';const E = [
       })
     }
   ) : null;
-}, C = ({
+}, b = ({
   children: t,
   isDisabled: c,
   isInvalid: i,
@@ -65,7 +66,7 @@ import '../assets/DateRangePicker.css';const E = [
   size: o = "large",
   isClearable: s = !1
 }) => {
-  const l = b(j);
+  const l = j(C);
   return /* @__PURE__ */ e(
     F,
     {
@@ -73,7 +74,7 @@ import '../assets/DateRangePicker.css';const E = [
         [a.medium]: o === "medium",
         [a.readOnly]: n
       }),
-      children: /* @__PURE__ */ h(V, { children: [
+      children: /* @__PURE__ */ h(O, { children: [
         t,
         /* @__PURE__ */ h("div", { className: a.buttonGroup, children: [
           /* @__PURE__ */ e(
@@ -86,7 +87,7 @@ import '../assets/DateRangePicker.css';const E = [
             }
           ),
           /* @__PURE__ */ e(
-            $,
+            T,
             {
               variant: "icon",
               "aria-label": l.format("open-calendar"),
@@ -111,7 +112,7 @@ import '../assets/DateRangePicker.css';const E = [
   );
 }, x = ({
   children: t
-}) => /* @__PURE__ */ e(N, { className: a.popover, children: /* @__PURE__ */ e(S, { className: a.dialog, children: t }) }), ke = ({
+}) => /* @__PURE__ */ e(N, { className: a.popover, children: /* @__PURE__ */ e(S, { className: a.dialog, children: t }) }), _e = ({
   className: t,
   description: c,
   errorMessage: i,
@@ -135,21 +136,21 @@ import '../assets/DateRangePicker.css';const E = [
       c && /* @__PURE__ */ e(D, { slot: "description", children: c }),
       n === "top" && /* @__PURE__ */ e(_, { children: i }),
       /* @__PURE__ */ e(
-        C,
+        b,
         {
           isClearable: l,
           isReadOnly: d,
           isDisabled: r,
           size: u,
           ...m,
-          children: /* @__PURE__ */ e(P, { children: (p) => /* @__PURE__ */ e(f, { segment: p }) })
+          children: /* @__PURE__ */ e(f, { children: (p) => /* @__PURE__ */ e(P, { segment: p }) })
         }
       ),
       n === "bottom" && /* @__PURE__ */ e(_, { children: i }),
       /* @__PURE__ */ e(x, { children: /* @__PURE__ */ e(L, {}) })
     ]
   }
-), _e = ({
+), fe = ({
   className: t,
   description: c,
   errorMessage: i,
@@ -173,7 +174,7 @@ import '../assets/DateRangePicker.css';const E = [
       c && /* @__PURE__ */ e(D, { slot: "description", children: c }),
       n === "top" && /* @__PURE__ */ e(_, { children: i }),
       /* @__PURE__ */ h(
-        C,
+        b,
         {
           isClearable: l,
           isReadOnly: d,
@@ -181,9 +182,9 @@ import '../assets/DateRangePicker.css';const E = [
           size: u,
           ...m,
           children: [
-            /* @__PURE__ */ e(P, { slot: "start", children: (p) => /* @__PURE__ */ e(f, { segment: p }) }),
-            /* @__PURE__ */ e(I, {}),
-            /* @__PURE__ */ e(P, { slot: "end", children: (p) => /* @__PURE__ */ e(f, { segment: p }) })
+            /* @__PURE__ */ e(f, { slot: "start", children: (p) => /* @__PURE__ */ e(P, { segment: p }) }),
+            /* @__PURE__ */ e(A, {}),
+            /* @__PURE__ */ e(f, { slot: "end", children: (p) => /* @__PURE__ */ e(P, { segment: p }) })
           ]
         }
       ),
@@ -193,6 +194,6 @@ import '../assets/DateRangePicker.css';const E = [
   }
 );
 export {
-  ke as D,
-  _e as a
+  _e as D,
+  fe as a
 };

package/chunks/TimeField-CEuBp21Z.js

@@ -0,0 +1,88 @@
+import { jsxs as p, jsx as e } from "react/jsx-runtime";
+import * as f from "react";
+import { TimeField as T, TimeFieldStateContext as g } from "react-aria-components";
+import { FocusScope as B, useFocusManager as C } from "@react-aria/focus";
+import { c as d } from "./clsx-AexbMWKp.js";
+import { D as b, a as L } from "./DateInput-NzWcnB4y.js";
+import { F } from "./FieldError-krpMBtie.js";
+import { a as S, L as v } from "./Label-Cg0aAlnt.js";
+import { T as z } from "./Text-D0r_W4lH.js";
+import { C as N } from "./ClearButton-DkC8PIMi.js";
+import { u as V } from "./useLocalizedStringFormatter-BHvsRxDk.js";
+import '../assets/TimeField.css';const j = { clear: "Clear time" }, D = { clear: "Rensa tid" }, R = {
+  en: j,
+  sv: D
+}, w = "_timeField_z8d4x_1", E = "_inputField_z8d4x_7", I = "_medium_z8d4x_38", M = "_clearButton_z8d4x_47", r = {
+  timeField: w,
+  inputField: E,
+  medium: I,
+  clearButton: M
+}, P = ({ isClearable: l, size: t, isDisabled: o, isReadOnly: s }) => {
+  const m = V(R), i = f.useContext(g), a = C(), n = () => {
+    i?.setValue(null), a?.focusFirst();
+  };
+  return l && i?.value != null && !s ? /* @__PURE__ */ e(
+    N,
+    {
+      onPress: n,
+      size: t,
+      isDisabled: o,
+      "aria-label": m.format("clear"),
+      className: d(r.clearButton, {
+        [r.medium]: t === "medium"
+      })
+    }
+  ) : null;
+}, Q = f.forwardRef(
+  ({
+    className: l,
+    description: t,
+    errorMessage: o,
+    errorPosition: s = "top",
+    label: m,
+    size: i = "large",
+    popover: a,
+    isClearable: n = !1,
+    isReadOnly: c,
+    isDisabled: u,
+    ..._
+  }, x) => /* @__PURE__ */ p(
+    T,
+    {
+      ..._,
+      ref: x,
+      isReadOnly: c,
+      isDisabled: u,
+      className: d(r.timeField, l),
+      children: [
+        /* @__PURE__ */ e(S, { popover: a, children: m && /* @__PURE__ */ e(v, { children: m }) }),
+        t && /* @__PURE__ */ e(z, { slot: "description", children: t }),
+        s === "top" && /* @__PURE__ */ e(F, { children: o }),
+        /* @__PURE__ */ e(
+          "div",
+          {
+            className: d(r.inputField, {
+              [r.medium]: i === "medium"
+            }),
+            children: /* @__PURE__ */ p(B, { children: [
+              /* @__PURE__ */ e(b, { children: (h) => /* @__PURE__ */ e(L, { segment: h }) }),
+              /* @__PURE__ */ e(
+                P,
+                {
+                  isClearable: n,
+                  size: i,
+                  isDisabled: u,
+                  isReadOnly: c
+                }
+              )
+            ] })
+          }
+        ),
+        s === "bottom" && /* @__PURE__ */ e(F, { children: o })
+      ]
+    }
+  )
+);
+export {
+  Q as T
+};

package/date-field/DateField.d.ts

@@ -2,7 +2,7 @@ import { DateFieldProps as AriaDateFieldProps, DateValue, ValidationResult } fro
 import { InfoPopoverProps } from '../label';
 import { Size } from '../common/types';
 import * as React from 'react';
-export interface DateFieldProps extends AriaDateFieldProps<DateValue> {
+export interface DateFieldProps<T extends DateValue> extends AriaDateFieldProps<T> {
     description?: string;
     errorMessage?: string | ((validation: ValidationResult) => string);
     errorPosition?: 'top' | 'bottom';
@@ -18,4 +18,6 @@ export interface DateFieldProps extends AriaDateFieldProps<DateValue> {
      */
     isClearable?: boolean;
 }
-export declare const DateField: React.FC<DateFieldProps>;
+export declare const DateField: <T extends DateValue>(props: DateFieldProps<T> & {
+    ref?: React.Ref<HTMLDivElement>;
+}) => React.ReactElement | null;

package/date-field/index.js

@@ -1,8 +1,9 @@
-import { D as t } from "../chunks/DateField-PU7fIO8a.js";
-import { D as r, a as o, b as p } from "../chunks/DateInputDivider-DwopMIb9.js";
+import { D as a } from "../chunks/DateField-moMaM1xn.js";
+import { D as r, a as o } from "../chunks/DateInput-NzWcnB4y.js";
+import { D as m } from "../chunks/DateInputDivider-BHAwPkIR.js";
 export {
-  t as DateField,
+  a as DateField,
   r as DateInput,
-  o as DateInputDivider,
-  p as DateSegment
+  m as DateInputDivider,
+  o as DateSegment
 };

package/date-picker/index.js

@@ -1,4 +1,4 @@
-import { D as r, a as t } from "../chunks/DateRangePicker-BK8CbDCZ.js";
+import { D as r, a as t } from "../chunks/DateRangePicker-BItgKNh8.js";
 export {
   r as DatePicker,
   t as DateRangePicker

package/index.d.ts

@@ -35,6 +35,7 @@ export * from './tabs';
 export * from './tag';
 export * from './text';
 export * from './textfield';
+export * from './time-field';
 export * from './toast';
 export * from './toggle-button';
 export * from './tooltip';

package/index.js

@@ -5,52 +5,54 @@ import { B as n, a as d } from "./chunks/Breadcrumb-Bs836gOn.js";
 import { B as l } from "./chunks/Button-GCROAMSl.js";
 import { B as g } from "./chunks/ButtonGroup-Dr6HOBo2.js";
 import { C as L, R as C } from "./chunks/RangeCalendar-DxLInTav.js";
-import { C as b, a as S, b as I, c as D, d as F, e as R, f as G } from "./chunks/Card-Br5b9Esq.js";
+import { C as b, a as S, b as D, c as I, d as F, e as R, f as G } from "./chunks/Card-Br5b9Esq.js";
 import { C as k } from "./chunks/CharacterCounter-Dgnv-orm.js";
 import { C as M } from "./chunks/Checkbox-CwzV5QbM.js";
 import { C as h } from "./chunks/CheckboxGroup-CF_3F36J.js";
 import { C as y } from "./chunks/ColorSchemeSwitch-Bp3PSGkA.js";
 import { C as N } from "./chunks/ComboBox-DQOqOcic.js";
-import { D as z } from "./chunks/DateField-PU7fIO8a.js";
-import { D as Q, a as V, b as Z } from "./chunks/DateInputDivider-DwopMIb9.js";
-import { D as q, a as J } from "./chunks/DateRangePicker-BK8CbDCZ.js";
-import { F as U } from "./chunks/FieldError-krpMBtie.js";
-import { F as X, a as Y } from "./chunks/FileListItem-CKF9HPjw.js";
-import { D as $, F as oo } from "./chunks/FileUpload-D6oyWcDA.js";
-import { G as ro } from "./chunks/Grid-CettmpaZ.js";
-import { G as to } from "./chunks/GridItem-z7zclNdT.js";
-import { H as po } from "./chunks/Heading-nfcRc2QF.js";
-import { I as mo } from "./chunks/InfoBanner-CWLvkP6D.js";
-import { L as fo } from "./chunks/Label-Cg0aAlnt.js";
-import { H as To, L as lo, N as co, S as go, a as uo } from "./chunks/Layout-DLe0UoSw.js";
-import { L as Co } from "./chunks/Link-CSIZehbN.js";
-import { L as bo } from "./chunks/LinkButton-Dzp8ZAPs.js";
-import { L as Io, a as Do } from "./chunks/Logo-DDykn5b2.js";
-import { M as Ro } from "./chunks/Dialog-BSWBlyJI.js";
-import { P as Po } from "./chunks/Popover-CjEPHe4A.js";
-import { P as vo } from "./chunks/ProgressBar-CBz_dIOH.js";
-import { R as Ao, a as ho } from "./chunks/Radio-CRHdSthr.js";
-import { S as yo } from "./chunks/SearchField-DRaSep82.js";
-import { S as No } from "./chunks/Select-DKNK3eh_.js";
-import { S as zo } from "./chunks/Skeleton-tiP1Syzf.js";
-import { S as Qo } from "./chunks/Spinner-CfKMn18u.js";
-import { C as Zo, a as jo, R as qo, T as Jo, b as Ko, c as Uo } from "./chunks/Table-DBdY7MIw.js";
-import { T as Xo, a as Yo, b as _o, c as $o } from "./chunks/TabList-CJSnr6O0.js";
-import { T as aa, a as ra, b as ea } from "./chunks/TagGroup-DPFh8qHR.js";
-import { T as sa } from "./chunks/Text-D0r_W4lH.js";
-import { I as xa, T as ma, a as ia, b as fa } from "./chunks/TextArea-C7l7_Kof.js";
-import { G as da, T as Ta, a as la, b as ca, t as ga } from "./chunks/Toast-BFq_0Ue4.js";
-import { T as La, a as Ca } from "./chunks/ToggleButtonGroup-DRnEEi5-.js";
-import { T as ba, a as Sa } from "./chunks/Tooltip-BYEaNkZG.js";
-import { L as Da } from "./chunks/ListBox-CRVACYCg.js";
-import { L as Ra, a as Ga, b as Pa, c as ka, d as va } from "./chunks/ListBoxHeader-1lJxEEFx.js";
-import { L as Aa, a as ha } from "./chunks/ListBoxEmptyState-BZpImC1g.js";
-import { M as ya, a as Ea, b as Na, c as wa, S as za } from "./chunks/Separator-CDRwpeHz.js";
-import { c as Qa } from "./chunks/clsx-AexbMWKp.js";
-import { DialogTrigger as Za, MenuTrigger as ja, RouterProvider as qa } from "react-aria-components";
-import { u as Ka } from "./chunks/useLocalizedStringFormatter-BHvsRxDk.js";
-import { useToastState as Wa } from "react-stately";
-const o = "17.10.17", a = {
+import { D as z } from "./chunks/DateField-moMaM1xn.js";
+import { D as Q, a as V } from "./chunks/DateInput-NzWcnB4y.js";
+import { D as j } from "./chunks/DateInputDivider-BHAwPkIR.js";
+import { D as J, a as K } from "./chunks/DateRangePicker-BItgKNh8.js";
+import { F as W } from "./chunks/FieldError-krpMBtie.js";
+import { F as Y, a as _ } from "./chunks/FileListItem-CKF9HPjw.js";
+import { D as oo, F as ao } from "./chunks/FileUpload-D6oyWcDA.js";
+import { G as eo } from "./chunks/Grid-CettmpaZ.js";
+import { G as so } from "./chunks/GridItem-z7zclNdT.js";
+import { H as xo } from "./chunks/Heading-nfcRc2QF.js";
+import { I as io } from "./chunks/InfoBanner-CWLvkP6D.js";
+import { L as no } from "./chunks/Label-Cg0aAlnt.js";
+import { H as lo, L as co, N as go, S as uo, a as Lo } from "./chunks/Layout-DLe0UoSw.js";
+import { L as Bo } from "./chunks/Link-CSIZehbN.js";
+import { L as So } from "./chunks/LinkButton-Dzp8ZAPs.js";
+import { L as Io, a as Fo } from "./chunks/Logo-DDykn5b2.js";
+import { M as Go } from "./chunks/Dialog-BSWBlyJI.js";
+import { P as ko } from "./chunks/Popover-CjEPHe4A.js";
+import { P as Mo } from "./chunks/ProgressBar-CBz_dIOH.js";
+import { R as ho, a as Ho } from "./chunks/Radio-CRHdSthr.js";
+import { S as Eo } from "./chunks/SearchField-DRaSep82.js";
+import { S as wo } from "./chunks/Select-DKNK3eh_.js";
+import { S as Oo } from "./chunks/Skeleton-tiP1Syzf.js";
+import { S as Vo } from "./chunks/Spinner-CfKMn18u.js";
+import { C as jo, a as qo, R as Jo, T as Ko, b as Uo, c as Wo } from "./chunks/Table-DBdY7MIw.js";
+import { T as Yo, a as _o, b as $o, c as oa } from "./chunks/TabList-CJSnr6O0.js";
+import { T as ra, a as ea, b as ta } from "./chunks/TagGroup-DPFh8qHR.js";
+import { T as pa } from "./chunks/Text-D0r_W4lH.js";
+import { I as ma, T as ia, a as fa, b as na } from "./chunks/TextArea-C7l7_Kof.js";
+import { T as Ta } from "./chunks/TimeField-CEuBp21Z.js";
+import { G as ca, T as ga, a as ua, b as La, t as Ca } from "./chunks/Toast-BFq_0Ue4.js";
+import { T as ba, a as Sa } from "./chunks/ToggleButtonGroup-DRnEEi5-.js";
+import { T as Ia, a as Fa } from "./chunks/Tooltip-BYEaNkZG.js";
+import { L as Ga } from "./chunks/ListBox-CRVACYCg.js";
+import { L as ka, a as va, b as Ma, c as Aa, d as ha } from "./chunks/ListBoxHeader-1lJxEEFx.js";
+import { L as ya, a as Ea } from "./chunks/ListBoxEmptyState-BZpImC1g.js";
+import { M as wa, a as za, b as Oa, c as Qa, S as Va } from "./chunks/Separator-CDRwpeHz.js";
+import { c as ja } from "./chunks/clsx-AexbMWKp.js";
+import { DialogTrigger as Ja, MenuTrigger as Ka, RouterProvider as Ua } from "react-aria-components";
+import { u as Xa } from "./chunks/useLocalizedStringFormatter-BHvsRxDk.js";
+import { useToastState as _a } from "react-stately";
+const o = "17.11.1", a = {
   version: o
 }, r = a.version;
 export {
@@ -65,96 +67,97 @@ export {
   L as Calendar,
   b as Card,
   S as CardActionArea,
-  I as CardActions,
-  D as CardContent,
+  D as CardActions,
+  I as CardContent,
   F as CardImage,
   R as CardLink,
   G as CardTitle,
-  Zo as Cell,
+  jo as Cell,
   k as CharacterCounter,
   M as Checkbox,
   h as CheckboxGroup,
   y as ColorSchemeSwitch,
-  jo as Column,
+  qo as Column,
   N as ComboBox,
   z as DateField,
   Q as DateInput,
-  V as DateInputDivider,
-  q as DatePicker,
-  J as DateRangePicker,
-  Z as DateSegment,
-  Za as DialogTrigger,
-  $ as DropZone,
-  U as FieldError,
-  X as FileList,
-  Y as FileListItem,
-  oo as FileTrigger,
-  da as GlobalToastRegion,
-  ro as Grid,
-  to as GridItem,
-  To as Header,
-  po as Heading,
-  mo as InfoBanner,
-  xa as Input,
-  fo as Label,
-  lo as Layout,
-  Co as Link,
-  bo as LinkButton,
-  Da as ListBox,
-  Ra as ListBoxButton,
-  Aa as ListBoxEmptyState,
-  Ga as ListBoxHeader,
-  Pa as ListBoxItem,
-  ka as ListBoxLoadMoreItem,
-  ha as ListBoxPopover,
-  va as ListBoxSection,
+  j as DateInputDivider,
+  J as DatePicker,
+  K as DateRangePicker,
+  V as DateSegment,
+  Ja as DialogTrigger,
+  oo as DropZone,
+  W as FieldError,
+  Y as FileList,
+  _ as FileListItem,
+  ao as FileTrigger,
+  ca as GlobalToastRegion,
+  eo as Grid,
+  so as GridItem,
+  lo as Header,
+  xo as Heading,
+  io as InfoBanner,
+  ma as Input,
+  no as Label,
+  co as Layout,
+  Bo as Link,
+  So as LinkButton,
+  Ga as ListBox,
+  ka as ListBoxButton,
+  ya as ListBoxEmptyState,
+  va as ListBoxHeader,
+  Ma as ListBoxItem,
+  Aa as ListBoxLoadMoreItem,
+  Ea as ListBoxPopover,
+  ha as ListBoxSection,
   Io as Logo,
-  Do as LogoContext,
-  ya as Menu,
-  Ea as MenuItem,
-  Na as MenuPopover,
-  wa as MenuSection,
-  ja as MenuTrigger,
-  Ro as Modal,
-  co as Navbar,
-  Po as Popover,
-  vo as ProgressBar,
-  Ao as Radio,
-  ho as RadioGroup,
+  Fo as LogoContext,
+  wa as Menu,
+  za as MenuItem,
+  Oa as MenuPopover,
+  Qa as MenuSection,
+  Ka as MenuTrigger,
+  Go as Modal,
+  go as Navbar,
+  ko as Popover,
+  Mo as ProgressBar,
+  ho as Radio,
+  Ho as RadioGroup,
   C as RangeCalendar,
-  qa as RouterProvider,
-  qo as Row,
-  yo as SearchField,
-  No as Select,
-  za as Separator,
-  go as Sidebar,
-  uo as SidebarLink,
-  zo as Skeleton,
-  Qo as Spinner,
-  Xo as Tab,
-  Yo as TabList,
-  _o as TabPanel,
-  Jo as Table,
-  Ko as TableBody,
-  Uo as TableHeader,
-  $o as Tabs,
-  aa as Tag,
-  ra as TagGroup,
-  ea as TagList,
-  sa as Text,
-  ma as TextArea,
-  ia as TextField,
-  fa as TextFieldBase,
-  Ta as Toast,
-  la as ToastProvider,
-  ca as ToastRegion,
-  La as ToggleButton,
-  Ca as ToggleButtonGroup,
-  ba as Tooltip,
-  Sa as TooltipTrigger,
+  Ua as RouterProvider,
+  Jo as Row,
+  Eo as SearchField,
+  wo as Select,
+  Va as Separator,
+  uo as Sidebar,
+  Lo as SidebarLink,
+  Oo as Skeleton,
+  Vo as Spinner,
+  Yo as Tab,
+  _o as TabList,
+  $o as TabPanel,
+  Ko as Table,
+  Uo as TableBody,
+  Wo as TableHeader,
+  oa as Tabs,
+  ra as Tag,
+  ea as TagGroup,
+  ta as TagList,
+  pa as Text,
+  ia as TextArea,
+  fa as TextField,
+  na as TextFieldBase,
+  Ta as TimeField,
+  ga as Toast,
+  ua as ToastProvider,
+  La as ToastRegion,
+  ba as ToggleButton,
+  Sa as ToggleButtonGroup,
+  Ia as Tooltip,
+  Fa as TooltipTrigger,
   r as VERSION,
-  Qa as clsx,
-  ga as toastQueue,
-  Ka as useLocalizedStringFormatter,
-  Wa as useToastState
+  ja as clsx,
+  Ca as toastQueue,
+  Xa as useLocalizedStringFormatter,
+  _a as useToastState
 };

package/package.json

@@ -14,7 +14,7 @@
   "description": "Midas Components",
   "homepage": "https://designsystem.migrationsverket.se/",
   "license": "CC0-1.0",
-  "version": "17.10.17",
+  "version": "17.11.1",
   "module": "./index.js",
   "type": "module",
   "main": "./index.js",
@@ -41,7 +41,7 @@
     "./*": "./*/index.js"
   },
   "dependencies": {
-    "@midas-ds/theme": "3.12.19",
+    "@midas-ds/theme": "3.12.20",
     "react-aria-components": "1.16.0"
   }
 }

package/time-field/TimeField.d.ts

@@ -0,0 +1,23 @@
+import { TimeFieldProps as AriaTimeFieldProps, TimeValue, ValidationResult } from 'react-aria-components';
+import { InfoPopoverProps } from '../label';
+import { Size } from '../common/types';
+import * as React from 'react';
+export interface TimeFieldProps<T extends TimeValue> extends AriaTimeFieldProps<T> {
+    description?: string;
+    errorMessage?: string | ((validation: ValidationResult) => string);
+    errorPosition?: 'top' | 'bottom';
+    label?: string;
+    /** Component size (large: height 48px, medium: height 40px)
+     *  @default 'large'
+     */
+    size?: Size;
+    /** An assistive text that helps the user understand the field better. Will be hidden in a popover with an info icon button. */
+    popover?: InfoPopoverProps;
+    /** Show a clear button to remove the selected time
+     * @default false
+     */
+    isClearable?: boolean;
+}
+export declare const TimeField: <T extends TimeValue>(props: TimeFieldProps<T> & {
+    ref?: React.Ref<HTMLDivElement>;
+}) => React.ReactElement | null;

package/time-field/TimeField.stories.d.ts

@@ -0,0 +1,35 @@
+import { StoryObj } from '@storybook/react-vite';
+import { TimeField } from './TimeField';
+type Story = StoryObj<typeof TimeField>;
+declare const _default: {
+    component: <T extends import('react-aria').TimeValue>(props: import('./TimeField').TimeFieldProps<T> & {
+        ref?: React.Ref<HTMLDivElement>;
+    }) => React.ReactElement | null;
+    title: string;
+    tags: string[];
+    parameters: {
+        a11y: {
+            config: {
+                rules: {
+                    id: string;
+                    selector: string;
+                    enabled: boolean;
+                }[];
+            };
+        };
+    };
+    args: {
+        errorPosition: "top";
+        label: string;
+        description: string;
+    };
+};
+export default _default;
+export declare const Primary: Story;
+export declare const Invalid: Story;
+export declare const Disabled: Story;
+export declare const ReadOnly: Story;
+export declare const WithDefaultValue: Story;
+export declare const WithClearButton: Story;
+export declare const WithSeconds: Story;
+export declare const HourCycle12: Story;

package/time-field/index.d.ts

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

package/time-field/index.js

@@ -0,0 +1,4 @@
+import { T as m } from "../chunks/TimeField-CEuBp21Z.js";
+export {
+  m as TimeField
+};

package/time-field/intl/translations.json.d.ts

@@ -0,0 +1,11 @@
+declare const _default: {
+  "en": {
+    "clear": "Clear time"
+  },
+  "sv": {
+    "clear": "Rensa tid"
+  }
+}
+;
+
+export default _default;

package/chunks/DateField-PU7fIO8a.js

@@ -1,91 +0,0 @@
-import { jsxs as p, jsx as e } from "react/jsx-runtime";
-import * as h from "react";
-import { DateField as D, DateFieldStateContext as x } from "react-aria-components";
-import { c as d } from "./clsx-AexbMWKp.js";
-import { D as g, b as j } from "./DateInputDivider-DwopMIb9.js";
-import { F } from "./FieldError-krpMBtie.js";
-import { a as B, L as C } from "./Label-Cg0aAlnt.js";
-import { T as b } from "./Text-D0r_W4lH.js";
-import { C as w } from "./ClearButton-DkC8PIMi.js";
-import { FocusScope as L, useFocusManager as S } from "@react-aria/focus";
-import { u as v } from "./useLocalizedStringFormatter-BHvsRxDk.js";
-import '../assets/DateField.css';const N = { clear: "Clear date" }, V = { clear: "Rensa datum" }, T = {
-  en: N,
-  sv: V
-}, E = "_dateField_1ejwm_1", I = "_inputField_1ejwm_7", M = "_medium_1ejwm_38", P = "_clearButton_1ejwm_47", s = {
-  dateField: E,
-  inputField: I,
-  medium: M,
-  clearButton: P
-}, R = ({
-  isClearable: i,
-  size: t,
-  isDisabled: o,
-  isReadOnly: r
-}) => {
-  const l = v(T), a = h.useContext(x), n = S(), m = () => {
-    a?.setValue(null), n?.focusFirst();
-  };
-  return i && a?.value != null && !r ? /* @__PURE__ */ e(
-    w,
-    {
-      onPress: m,
-      size: t,
-      isDisabled: o,
-      "aria-label": l.format("clear"),
-      className: d(s.clearButton, {
-        [s.medium]: t === "medium"
-      })
-    }
-  ) : null;
-}, Q = ({
-  className: i,
-  description: t,
-  errorMessage: o,
-  errorPosition: r = "top",
-  label: l,
-  size: a = "large",
-  popover: n,
-  isClearable: m = !1,
-  isReadOnly: c,
-  isDisabled: u,
-  ...f
-}) => /* @__PURE__ */ p(
-  D,
-  {
-    ...f,
-    isReadOnly: c,
-    isDisabled: u,
-    className: d(s.dateField, i),
-    children: [
-      /* @__PURE__ */ e(B, { popover: n, children: l && /* @__PURE__ */ e(C, { children: l }) }),
-      t && /* @__PURE__ */ e(b, { slot: "description", children: t }),
-      r === "top" && /* @__PURE__ */ e(F, { children: o }),
-      /* @__PURE__ */ e(
-        "div",
-        {
-          className: d(s.inputField, {
-            [s.medium]: a === "medium"
-          }),
-          "data-testid": "date-field_input-field",
-          children: /* @__PURE__ */ p(L, { children: [
-            /* @__PURE__ */ e(g, { children: (_) => /* @__PURE__ */ e(j, { segment: _ }) }),
-            /* @__PURE__ */ e(
-              R,
-              {
-                isClearable: m,
-                size: a,
-                isDisabled: u,
-                isReadOnly: c
-              }
-            )
-          ] })
-        }
-      ),
-      r === "bottom" && /* @__PURE__ */ e(F, { children: o })
-    ]
-  }
-);
-export {
-  Q as D
-};

package/chunks/DateInputDivider-DwopMIb9.js

@@ -1,36 +0,0 @@
-import { jsx as a } from "react/jsx-runtime";
-import { DateSegment as d, DateInput as i } from "react-aria-components";
-import { c as s } from "./clsx-AexbMWKp.js";
-import '../assets/DateInputDivider.css';const m = "_dateSegment_15g5c_1", c = {
-  dateSegment: m
-}, _ = ({
-  className: t,
-  ...e
-}) => /* @__PURE__ */ a(
-  d,
-  {
-    className: s(c.dateSegment, t),
-    ...e
-  }
-), o = "_dateInput_14x1f_1", r = "_divider_14x1f_21", n = {
-  dateInput: o,
-  divider: r
-}, g = ({ className: t, ...e }) => /* @__PURE__ */ a(
-  i,
-  {
-    className: s(n.dateInput, t),
-    ...e
-  }
-), I = () => /* @__PURE__ */ a(
-  "span",
-  {
-    "aria-hidden": "true",
-    className: n.divider,
-    children: "-"
-  }
-);
-export {
-  g as D,
-  I as a,
-  _ as b
-};