@viasat/beam-react 2.29.1 → 2.36.0

package/lib/index.es.js

@@ -4,19 +4,19 @@ import { Alert as m } from "./Alert/Alert.es.js";
 import { Autocomplete as f } from "./Autocomplete/Autocomplete.es.js";
 import { Avatar as d } from "./Avatar/index.es.js";
 import { CloseButton as s } from "./CloseButton/CloseButton.es.js";
-import { Button as A, ButtonIconWrap as l } from "./Button/Button.es.js";
+import { Button as l, ButtonIconWrap as A } from "./Button/Button.es.js";
 import { Dialog as S } from "./Dialog/Dialog.es.js";
 import { Breadcrumb as v } from "./Breadcrumbs/Breadcrumbs.es.js";
 import { B as C } from "../chunks/BreadcrumbsItem.6c7NEqgi.js";
 import { EmptyState as P } from "./EmptyState/EmptyState.es.js";
 import { Badge as g } from "./Badge/Badge.es.js";
 import { BadgeDot as _ } from "./BadgeDot/BadgeDot.es.js";
-import { Box as D } from "./Box/Box.es.js";
+import { Box as O } from "./Box/Box.es.js";
 import { Checkbox as I } from "./Checkbox/Checkbox.es.js";
 import { Chip as E } from "./Chips/Chip.es.js";
 import { ChipGroup as b } from "./Chips/ChipGroup.es.js";
 import { Divider as y } from "./Divider/Divider.es.js";
-import { default as k } from "./FileUpload/FileUpload.es.js";
+import { default as M } from "./FileUpload/FileUpload.es.js";
 import { Flag as Y } from "./Flag/Flag.es.js";
 import { Form as w } from "./Form/Form.es.js";
 import { H as V } from "../chunks/form.context.D7b4066_.js";
@@ -30,14 +30,14 @@ import { List as xo } from "./List/List.es.js";
 import { ActionList as ao } from "./ActionList/ActionList.es.js";
 import { Logo as io } from "./Logo/Logo.es.js";
 import { Menu as so } from "./Menu/Menu.es.js";
-import { useMenuContext as Ao } from "./Menu/Menu.context.es.js";
+import { useMenuContext as lo } from "./Menu/Menu.context.es.js";
 import { NativeSelect as co } from "./NativeSelect/NativeSelect.es.js";
 import { Pagination as To } from "./Pagination/Pagination.es.js";
 import { ProgressBar as Bo } from "./ProgressBar/ProgressBar.es.js";
 import { RadioButton as Lo } from "./RadioButton/RadioButton.es.js";
-import { DRAWER_LAYOUT as No, HIDDEN_LAYOUT as go, LOCAL_STORAGE_SIDE_NAV_WIDTH_VAR_NAME as Ro, NO_LAYOUT as _o, OPAQUE_BACKDROP as Oo, RAIL_LAYOUT as Do, Root as Ho, SideNav as Io, SideNavBackdrops as ho, SideNavClosedLayouts as Eo, SideNavOpenLayouts as Go, TRANSPARENT_BACKDROP as bo } from "./SideNav/SideNav.es.js";
-import { SideNavProvider as yo, useSideNavContext as Mo } from "./SideNav/SideNavContext.es.js";
-import { SegmentedControl as Fo } from "./SegmentedControl/SegmentedControl.es.js";
+import { DRAWER_LAYOUT as No, HIDDEN_LAYOUT as go, LOCAL_STORAGE_SIDE_NAV_WIDTH_VAR_NAME as Ro, NO_LAYOUT as _o, OPAQUE_BACKDROP as Do, RAIL_LAYOUT as Oo, Root as Ho, SideNav as Io, SideNavBackdrops as ho, SideNavClosedLayouts as Eo, SideNavOpenLayouts as Go, TRANSPARENT_BACKDROP as bo } from "./SideNav/SideNav.es.js";
+import { SideNavProvider as yo, useSideNavContext as Fo } from "./SideNav/SideNavContext.es.js";
+import { SegmentedControl as ko } from "./SegmentedControl/SegmentedControl.es.js";
 import { Select as Wo } from "./Select/Select.es.js";
 import { Spinner as Ko } from "./Spinner/Spinner.es.js";
 import { StateLayer as Qo } from "./StateLayer/StateLayer.es.js";
@@ -50,22 +50,23 @@ import { TextArea as xr } from "./TextArea/TextArea.es.js";
 import { TextField as ar } from "./TextField/TextField.es.js";
 import { Toast as ir } from "./Toasts/Toast.es.js";
 import { T as nr, u as sr } from "../chunks/ToastContext.CYGy7l7R.js";
-import { ToastContainer as Ar } from "./Toasts/ToastContainer.es.js";
+import { ToastContainer as lr } from "./Toasts/ToastContainer.es.js";
 import { Tooltip as cr, TooltipIconTrigger as Sr } from "./Tooltip/Tooltip.es.js";
 import { Header as vr, InternalHeader as Br } from "./Header/Header.es.js";
 import { HeaderMasthead as Lr } from "./Header/HeaderMasthead.es.js";
 import { HeaderActionGroup as Nr } from "./Header/HeaderActionGroup.es.js";
 import { HeaderNavigation as Rr } from "./Header/HeaderNavigation.es.js";
-import { PortalContext as Or, usePortal as Dr } from "./PortalProvider/PortalContext.es.js";
+import { PortalContext as Dr, usePortal as Or } from "./PortalProvider/PortalContext.es.js";
 import { PortalProvider as Ir } from "./PortalProvider/PortalProvider.es.js";
 import { Popover as Er } from "./Popover/Popover.es.js";
 import { PageHeader as br } from "./PageHeader/PageHeader.es.js";
 import { PageLayout as yr } from "./PageLayout/PageLayout.es.js";
-import { Slider as kr } from "./Slider/Slider.es.js";
+import { Slider as Mr } from "./Slider/Slider.es.js";
 import { Card as Yr } from "./Card/Card.es.js";
 import { CardGroup as wr } from "./Card/CardGroup.es.js";
 import { Search as Vr } from "./Search/Search.es.js";
-import { v as jr } from "../chunks/useFormValidator.hook.CSmddwEt.js";
+import { DateField as jr } from "./wip/DateField/DateField.es.js";
+import { v as zr } from "../chunks/useFormValidator.hook.CSmddwEt.js";
 export {
   e as Accordion,
   p as AccordionGroup,
@@ -75,11 +76,11 @@ export {
   d as Avatar,
   g as Badge,
   _ as BadgeDot,
-  D as Box,
+  O as Box,
   v as Breadcrumb,
   C as BreadcrumbItem,
-  A as Button,
-  l as ButtonIconWrap,
+  l as Button,
+  A as ButtonIconWrap,
   Yr as Card,
   wr as CardGroup,
   I as Checkbox,
@@ -88,10 +89,11 @@ export {
   b as ChipGroup,
   s as CloseButton,
   No as DRAWER_LAYOUT,
+  jr as DateField,
   S as Dialog,
   y as Divider,
   P as EmptyState,
-  k as FileUpload,
+  M as FileUpload,
   Y as Flag,
   w as Form,
   go as HIDDEN_LAYOUT,
@@ -110,27 +112,27 @@ export {
   so as Menu,
   _o as NO_LAYOUT,
   co as NativeSelect,
-  Oo as OPAQUE_BACKDROP,
+  Do as OPAQUE_BACKDROP,
   br as PageHeader,
   yr as PageLayout,
   To as Pagination,
   Er as Popover,
-  Or as PortalContext,
+  Dr as PortalContext,
   Ir as PortalProvider,
   Bo as ProgressBar,
-  Do as RAIL_LAYOUT,
+  Oo as RAIL_LAYOUT,
   Lo as RadioButton,
   $ as RadioButtonGroup,
   Ho as Root,
   Vr as Search,
-  Fo as SegmentedControl,
+  ko as SegmentedControl,
   Wo as Select,
   Io as SideNav,
   ho as SideNavBackdrops,
   Eo as SideNavClosedLayouts,
   Go as SideNavOpenLayouts,
   yo as SideNavProvider,
-  kr as Slider,
+  Mr as Slider,
   Ko as Spinner,
   Qo as StateLayer,
   qo as Stepper,
@@ -142,15 +144,15 @@ export {
   xr as TextArea,
   ar as TextField,
   ir as Toast,
-  Ar as ToastContainer,
+  lr as ToastContainer,
   nr as ToastProvider,
   cr as Tooltip,
   Sr as TooltipIconTrigger,
   Jo as processMetadata,
   Xo as useBeamStepper,
-  Ao as useMenuContext,
-  Dr as usePortal,
-  Mo as useSideNavContext,
+  lo as useMenuContext,
+  Or as usePortal,
+  Fo as useSideNavContext,
   sr as useToast,
-  jr as validators
+  zr as validators
 };

package/lib/wip/DateField/DateField.Segment.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("react/jsx-runtime");require("clsx");require("react");const e=require("../../../chunks/DateField.Segment.7oCeBSNo.js");require("./DateField.utils.cjs.js");exports.DateFieldSegment=e.DateFieldSegment;

package/lib/wip/DateField/DateField.Segment.d.ts

@@ -0,0 +1,2 @@
+import { DateFieldSegmentProps } from './DateField.types';
+export declare const DateFieldSegment: ({ type, value, displayValue, isPlaceholder, isActive, disabled, readOnly, onFocus, onBlur, onInput, segmentRef, }: DateFieldSegmentProps) => import("react/jsx-runtime").JSX.Element;

package/lib/wip/DateField/DateField.Segment.es.js

@@ -0,0 +1,8 @@
+import "react/jsx-runtime";
+import "clsx";
+import "react";
+import { D as p } from "../../../chunks/DateField.Segment.DbjGMAPP.js";
+import "./DateField.utils.es.js";
+export {
+  p as DateFieldSegment
+};

package/lib/wip/DateField/DateField.Segments.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),t=require("../../../chunks/DateField.Segment.7oCeBSNo.js"),l=require("./DateField.utils.cjs.js"),i=[{type:"month",value:""},{type:"literal",value:"/"},{type:"day",value:""},{type:"literal",value:"/"},{type:"year",value:""}],F={month:"MM",day:"DD",year:"YYYY"},R=l.getSegmentOrder(i),v=({segmentText:n,segmentValues:r,focusedSegment:o,disabled:u,readOnly:c,onSegmentFocus:d,onSegmentBlur:y,onSegmentInput:m,registerSegmentRef:p})=>a.jsx("span",{className:t.styles[t.staticDateFieldClassNames.segments],children:i.map((s,D)=>{if(s.type==="literal")return a.jsx("span",{"aria-hidden":"true",className:t.styles[t.staticDateFieldClassNames.separator],children:s.value},`literal-${D}`);const e=s.type,g=F[e],{displayValue:S,isPlaceholder:_}=l.getSegmentDisplay(e,n[e],g);return a.jsx(t.DateFieldSegment,{type:e,value:r[e],displayValue:S,isPlaceholder:_,isActive:o===e,disabled:u,readOnly:c,onFocus:()=>d(e),onBlur:y,onInput:m,segmentRef:p(e)},e)})});exports.DateFieldSegments=v;exports.PARTS_ORDER=R;

package/lib/wip/DateField/DateField.Segments.d.ts

@@ -0,0 +1,17 @@
+import { FocusEvent } from 'react';
+import { FocusTarget, SegmentText, SegmentType, SegmentValues } from './DateField.types';
+export declare const PARTS_ORDER: ReadonlyArray<SegmentType>;
+export interface DateFieldSegmentsProps {
+    /** Per-segment raw strings — the single source of truth for display. */
+    segmentText: SegmentText;
+    /** Derived per-segment numbers for `aria-valuenow`. */
+    segmentValues: SegmentValues;
+    focusedSegment: FocusTarget;
+    disabled: boolean;
+    readOnly: boolean;
+    onSegmentFocus: (segment: SegmentType) => void;
+    onSegmentBlur: (event: FocusEvent<HTMLSpanElement>) => void;
+    onSegmentInput: (segment: SegmentType, char: string) => void;
+    registerSegmentRef: (segment: SegmentType) => (element: HTMLSpanElement | null) => void;
+}
+export declare const DateFieldSegments: ({ segmentText, segmentValues, focusedSegment, disabled, readOnly, onSegmentFocus, onSegmentBlur, onSegmentInput, registerSegmentRef, }: DateFieldSegmentsProps) => import("react/jsx-runtime").JSX.Element;

package/lib/wip/DateField/DateField.Segments.es.js

@@ -0,0 +1,61 @@
+import { jsx as a } from "react/jsx-runtime";
+import { s, a as l, D as h } from "../../../chunks/DateField.Segment.DbjGMAPP.js";
+import { getSegmentOrder as R, getSegmentDisplay as f } from "./DateField.utils.es.js";
+const n = [
+  { type: "month", value: "" },
+  { type: "literal", value: "/" },
+  { type: "day", value: "" },
+  { type: "literal", value: "/" },
+  { type: "year", value: "" }
+], A = {
+  month: "MM",
+  day: "DD",
+  year: "YYYY"
+}, P = R(n), Y = ({
+  segmentText: r,
+  segmentValues: o,
+  focusedSegment: i,
+  disabled: m,
+  readOnly: p,
+  onSegmentFocus: c,
+  onSegmentBlur: y,
+  onSegmentInput: u,
+  registerSegmentRef: d
+}) => /* @__PURE__ */ a("span", { className: s[l.segments], children: n.map((t, g) => {
+  if (t.type === "literal")
+    return /* @__PURE__ */ a(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: s[l.separator],
+        children: t.value
+      },
+      `literal-${g}`
+    );
+  const e = t.type, D = A[e], { displayValue: v, isPlaceholder: S } = f(
+    e,
+    r[e],
+    D
+  );
+  return /* @__PURE__ */ a(
+    h,
+    {
+      type: e,
+      value: o[e],
+      displayValue: v,
+      isPlaceholder: S,
+      isActive: i === e,
+      disabled: m,
+      readOnly: p,
+      onFocus: () => c(e),
+      onBlur: y,
+      onInput: u,
+      segmentRef: d(e)
+    },
+    e
+  );
+}) });
+export {
+  Y as DateFieldSegments,
+  P as PARTS_ORDER
+};

package/lib/wip/DateField/DateField.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),ce=require("clsx"),Fe=require("react"),e=require("../../../chunks/DateField.Segment.7oCeBSNo.js"),_e=require("../../../chunks/constants.hwjHOsvT.js"),be=require("../../../chunks/form.context.hesWPMlU.js"),fe=require("../../Form/contexts/label.context.cjs.js"),De=require("../../Form/contexts/helperText.context.cjs.js"),me=require("../../Form/hooks/useUniversalRef.hook.cjs.js"),r=require("./DateField.Segments.cjs.js"),xe=require("./DateField.utils.cjs.js"),pe=require("./useDateFieldFocus.cjs.js"),ge=require("./useDateFieldForm.cjs.js"),ve=require("./useDateFieldSegments.cjs.js"),ye=require("./useDateFieldValidity.cjs.js"),qe=require("./useDateFieldValue.cjs.js"),Se=require("./useInvalidState.cjs.js"),he=Fe.forwardRef(function({value:v,defaultValue:y,onChange:q,label:t=null,helperText:d=null,error:n,hideRequiredMarker:S=!1,validationRules:h,width:I,theme:o,fluid:w=!1,disabled:R=!1,readOnly:T=!1,required:P=!1,name:u,id:V,className:M,style:j,"aria-label":N,"aria-describedby":O,"aria-labelledby":B,...C},E){const{disabled:i,readOnly:c,required:F,invalid:H,errorMessageProvided:_,defaultValue:L,errorId:b,helperTextId:$,validationErrorsId:k,labelId:f,ariaDescribedBy:A,ariaLabelledBy:U,showErrors:W}=ge.useDateFieldForm({name:u,disabled:R,readOnly:T,required:P,defaultValue:y,error:n,hasHelperText:!!d,hasLabel:!!t,validationRules:h,ariaDescribedBy:O,ariaLabelledBy:B}),{refFn:z,ref:G}=me.useUniversalRef(E),{segmentRefs:J,registerSegmentRef:K}=ve.useDateFieldSegments(),{segmentText:Q,segmentValues:D,currentValue:m,wasTouched:X,appendDigit:Y,beginSegmentEdit:Z,commitOnBlur:ee}=qe.useDateFieldValue({value:v,defaultValue:L,onChange:q}),{focusedSegment:x,fieldTabIndex:ie,handleSegmentFocus:p,handleFieldFocus:le,handleFieldBlur:ae,handleFieldMouseDown:se,focusNext:re}=pe.useDateFieldFocus({disabled:i,fieldRef:G,segmentRefs:J,partsOrder:r.PARTS_ORDER,onSegmentFocusChange:Z,onFieldBlur:ee}),{isInvalid:te}=ye.useDateFieldValidity({segments:D,currentValue:m,wasTouched:X,isFocused:x!==null}),de=(a,s)=>{const{advanced:ue}=Y(a,s);ue&&re(a)},g=Se.useInvalidState({formInvalid:H,valueInvalid:te}),ne=a=>{if(i)return;const s=a.target.closest("label");!s||s.id!==f||(a.preventDefault(),p(r.PARTS_ORDER[0]))},oe=ce(e.styles[e.baseClassNamePrefix],o&&_e.themeClassName(o),w&&e.styles[`${e.classModifierPrefix}fluid`],g&&e.styles[`${e.classModifierPrefix}error`],i&&e.styles[`${e.classModifierPrefix}disabled`],c&&e.styles[`${e.classModifierPrefix}read-only`],M);return l.jsxs("div",{className:oe,style:{...j,maxWidth:I},onMouseDownCapture:ne,children:[l.jsx(fe.LabelProvider,{ctxId:f,ctxDisabled:i,ctxRequired:F&&!S,children:t}),l.jsx("div",{...C,ref:z,id:V,role:"group","aria-label":N,"aria-labelledby":U,"aria-disabled":i||void 0,"aria-required":F||void 0,"aria-invalid":g||void 0,"aria-describedby":A,"aria-errormessage":_?b:void 0,tabIndex:ie,className:e.styles[e.staticDateFieldClassNames.field],onMouseDown:se,onFocus:le,children:l.jsx(r.DateFieldSegments,{segmentText:Q,segmentValues:D,focusedSegment:x,disabled:i,readOnly:c,onSegmentFocus:p,onSegmentBlur:ae,onSegmentInput:de,registerSegmentRef:K})}),l.jsx("input",{type:"hidden",name:u,value:xe.toISODateString(m),disabled:i}),l.jsxs(De.HelperTextProvider,{ctxId:$,ctxDisabled:i,children:[d,_&&l.jsx(be.HelperText,{id:b,appearance:"negative",children:n})]}),W(k)]})});exports.DateField=he;

package/lib/wip/DateField/DateField.d.ts

@@ -0,0 +1,3 @@
+import { DateFieldProps } from './DateField.types';
+/** Segmented date input. */
+export declare const DateField: import('react').ForwardRefExoticComponent<DateFieldProps & import('react').RefAttributes<HTMLDivElement>>;

package/lib/wip/DateField/DateField.es.js

@@ -0,0 +1,191 @@
+import { jsxs as h, jsx as l } from "react/jsx-runtime";
+import ce from "clsx";
+import { forwardRef as pe } from "react";
+import { s as a, b as be, c as s, a as ge } from "../../../chunks/DateField.Segment.DbjGMAPP.js";
+import { t as ve } from "../../../chunks/constants.CKKGf1-i.js";
+import { H as Fe } from "../../../chunks/form.context.D7b4066_.js";
+import { LabelProvider as De } from "../../Form/contexts/label.context.es.js";
+import { HelperTextProvider as xe } from "../../Form/contexts/helperText.context.es.js";
+import { useUniversalRef as he } from "../../Form/hooks/useUniversalRef.hook.es.js";
+import { DateFieldSegments as Ie, PARTS_ORDER as I } from "./DateField.Segments.es.js";
+import { toISODateString as ye } from "./DateField.utils.es.js";
+import { useDateFieldFocus as Se } from "./useDateFieldFocus.es.js";
+import { useDateFieldForm as Re } from "./useDateFieldForm.es.js";
+import { useDateFieldSegments as Ne } from "./useDateFieldSegments.es.js";
+import { useDateFieldValidity as Ve } from "./useDateFieldValidity.es.js";
+import { useDateFieldValue as we } from "./useDateFieldValue.es.js";
+import { useInvalidState as Be } from "./useInvalidState.es.js";
+const Je = pe(
+  function({
+    value: y,
+    defaultValue: S,
+    onChange: R,
+    label: d = null,
+    helperText: t = null,
+    error: o,
+    hideRequiredMarker: N = !1,
+    validationRules: V,
+    width: w,
+    theme: n,
+    fluid: B = !1,
+    disabled: C = !1,
+    readOnly: O = !1,
+    required: T = !1,
+    name: u,
+    id: M,
+    className: P,
+    style: q,
+    "aria-label": E,
+    "aria-describedby": H,
+    "aria-labelledby": L,
+    ...$
+  }, j) {
+    const {
+      disabled: e,
+      readOnly: m,
+      required: f,
+      invalid: W,
+      errorMessageProvided: c,
+      defaultValue: A,
+      errorId: p,
+      helperTextId: U,
+      validationErrorsId: _,
+      labelId: b,
+      ariaDescribedBy: k,
+      ariaLabelledBy: z,
+      showErrors: G
+    } = Re({
+      name: u,
+      disabled: C,
+      readOnly: O,
+      required: T,
+      defaultValue: S,
+      error: o,
+      hasHelperText: !!t,
+      hasLabel: !!d,
+      validationRules: V,
+      ariaDescribedBy: H,
+      ariaLabelledBy: L
+    }), { refFn: J, ref: K } = he(j), { segmentRefs: Q, registerSegmentRef: X } = Ne(), {
+      segmentText: Y,
+      segmentValues: g,
+      currentValue: v,
+      wasTouched: Z,
+      appendDigit: ee,
+      beginSegmentEdit: ae,
+      commitOnBlur: re
+    } = we({
+      value: y,
+      defaultValue: A,
+      onChange: R
+    }), {
+      focusedSegment: F,
+      fieldTabIndex: le,
+      handleSegmentFocus: D,
+      handleFieldFocus: ie,
+      handleFieldBlur: se,
+      handleFieldMouseDown: de,
+      focusNext: te
+    } = Se({
+      disabled: e,
+      fieldRef: K,
+      segmentRefs: Q,
+      partsOrder: I,
+      onSegmentFocusChange: ae,
+      onFieldBlur: re
+    }), { isInvalid: oe } = Ve({
+      segments: g,
+      currentValue: v,
+      wasTouched: Z,
+      isFocused: F !== null
+    }), ne = (r, i) => {
+      const { advanced: fe } = ee(r, i);
+      fe && te(r);
+    }, x = Be({
+      formInvalid: W,
+      valueInvalid: oe
+    }), ue = (r) => {
+      if (e) return;
+      const i = r.target.closest("label");
+      !i || i.id !== b || (r.preventDefault(), D(I[0]));
+    }, me = ce(
+      a[be],
+      n && ve(n),
+      B && a[`${s}fluid`],
+      x && a[`${s}error`],
+      e && a[`${s}disabled`],
+      m && a[`${s}read-only`],
+      P
+    );
+    return /* @__PURE__ */ h(
+      "div",
+      {
+        className: me,
+        style: { ...q, maxWidth: w },
+        onMouseDownCapture: ue,
+        children: [
+          /* @__PURE__ */ l(
+            De,
+            {
+              ctxId: b,
+              ctxDisabled: e,
+              ctxRequired: f && !N,
+              children: d
+            }
+          ),
+          /* @__PURE__ */ l(
+            "div",
+            {
+              ...$,
+              ref: J,
+              id: M,
+              role: "group",
+              "aria-label": E,
+              "aria-labelledby": z,
+              "aria-disabled": e || void 0,
+              "aria-required": f || void 0,
+              "aria-invalid": x || void 0,
+              "aria-describedby": k,
+              "aria-errormessage": c ? p : void 0,
+              tabIndex: le,
+              className: a[ge.field],
+              onMouseDown: de,
+              onFocus: ie,
+              children: /* @__PURE__ */ l(
+                Ie,
+                {
+                  segmentText: Y,
+                  segmentValues: g,
+                  focusedSegment: F,
+                  disabled: e,
+                  readOnly: m,
+                  onSegmentFocus: D,
+                  onSegmentBlur: se,
+                  onSegmentInput: ne,
+                  registerSegmentRef: X
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ l(
+            "input",
+            {
+              type: "hidden",
+              name: u,
+              value: ye(v),
+              disabled: e
+            }
+          ),
+          /* @__PURE__ */ h(xe, { ctxId: U, ctxDisabled: e, children: [
+            t,
+            c && /* @__PURE__ */ l(Fe, { id: p, appearance: "negative", children: o })
+          ] }),
+          G(_)
+        ]
+      }
+    );
+  }
+);
+export {
+  Je as DateField
+};

package/lib/wip/DateField/DateField.types.cjs.js

@@ -0,0 +1 @@
+"use strict";

package/lib/wip/DateField/DateField.types.d.ts

@@ -0,0 +1,118 @@
+import { ComponentPropsWithRef, ReactElement, FocusEvent } from 'react';
+import { Nullable } from '@viasat/beam-shared/utils/types';
+import { ThemeTypes } from '@viasat/beam-shared/utils/constants';
+import { FormValidator } from '@viasat/beam-shared/components/form';
+type DateFieldInputAttributes = Omit<ComponentPropsWithRef<'input'>, 'value' | 'defaultValue' | 'onChange' | 'min' | 'max' | 'type' | 'size' | 'ref' | 'form' | 'autoComplete' | 'inputMode'>;
+export type SegmentType = 'day' | 'month' | 'year';
+export type FocusTarget = SegmentType | 'all' | null;
+/** Per-segment values. Month is 1-12 (NOT 0-11). */
+export interface SegmentValues {
+    day: number | null;
+    month: number | null;
+    year: number | null;
+}
+/** Per-segment raw input strings — the single source of truth. '' = empty. */
+export type SegmentText = Record<SegmentType, string>;
+export interface AppendDigitResult {
+    /** True when the segment completed and focus should auto-advance. */
+    advanced: boolean;
+    /** True when the digit was refused (invalid char, out-of-range, or full). */
+    rejected: boolean;
+}
+/** Shape mirrors `Intl.DateTimeFormatPart` so DF-8 can swap in locale-derived parts directly. */
+export type DateFieldPart = {
+    type: SegmentType | 'literal';
+    value: string;
+};
+export interface DateFieldProps extends DateFieldInputAttributes {
+    /**
+     * Specify HelperText for DateField
+     */
+    helperText?: Nullable<ReactElement>;
+    /**
+     * Specify if DateField is a required input
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Specify if the DateField displays with an asterisk
+     * @default false
+     */
+    hideRequiredMarker?: boolean;
+    /**
+     * Specify Label for DateField
+     */
+    label?: Nullable<ReactElement>;
+    /**
+     * Specify error text and display error state of a DateField
+     */
+    error?: boolean | string;
+    /**
+     * Specify if DateField displays in a read-only state
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Specify if DateField displays in a disabled state
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Specify if DateField is fluid
+     * @default false
+     */
+    fluid?: boolean;
+    /**
+     * Specify the width of DateField
+     */
+    width?: string;
+    /**
+     * Specify the theme of the DateField. By default it inherits the theme from the parent
+     */
+    theme?: ThemeTypes;
+    /**
+     * Specify form validation rules for DateField
+     */
+    validationRules?: Array<FormValidator>;
+    /**
+     * Controlled date value. Pass `null` to clear.
+     */
+    value?: Nullable<Date>;
+    /**
+     * Uncontrolled initial date value. Ignored when `value` is provided.
+     */
+    defaultValue?: Nullable<Date>;
+    /**
+     * Fires when the derived `Date | null` value transitions.
+     * In DF-1, user-input handlers don't exist yet — wired up in DF-2.
+     */
+    onChange?: (value: Nullable<Date>) => void;
+}
+/**
+ * Internal props for the segment subcomponent. Not part of the public API.
+ * `displayValue` / `isPlaceholder` are pre-computed from the segment string so
+ * the segment is pure render; `value` is the parsed number for `aria-valuenow`.
+ */
+export interface DateFieldSegmentProps {
+    type: SegmentType;
+    /** Numeric segment value — used for `aria-valuenow`. `null` when the segment has no committed value. */
+    value: Nullable<number>;
+    /** Pre-computed text to render inside the segment (buffer, formatted value, or placeholder). */
+    displayValue: string;
+    /** True when `displayValue` IS the placeholder (drives `data-placeholder` CSS hook). */
+    isPlaceholder: boolean;
+    isActive: boolean;
+    disabled: boolean;
+    readOnly: boolean;
+    onFocus: () => void;
+    onBlur: (event: FocusEvent<HTMLSpanElement>) => void;
+    /**
+     * Single-character input callback. DF-2 single-digit typing path. The
+     * orchestrator routes this into `appendDigit` and (on advance) `focusNext`.
+     * Multi-character input (paste, IME composition commit) is ignored here —
+     * DF-13 will add a paste-aware branch for whole-value parsing.
+     */
+    onInput: (type: SegmentType, char: string) => void;
+    segmentRef: (element: HTMLSpanElement | null) => void;
+}
+export {};

package/lib/wip/DateField/DateField.types.es.js

@@ -0,0 +1 @@
+

package/lib/wip/DateField/DateField.utils.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("./DateField.validation.cjs.js"),u={day:"",month:"",year:""},o=e=>e instanceof Date&&!Number.isNaN(e.getTime()),s=e=>{const{day:t,month:n,year:r}=e;if(t==null||n==null||r==null)return null;const a=new Date(r,n-1,t);return a.setFullYear(r),Number.isNaN(a.getTime())||a.getFullYear()!==r||a.getMonth()!==n-1||a.getDate()!==t?null:a},g=(e,t)=>e==null&&t==null?!0:e==null||t==null?!1:e.getTime()===t.getTime(),m=e=>{if(!o(e))return"";const t=String(e.getFullYear()).padStart(4,"0"),n=String(e.getMonth()+1).padStart(2,"0"),r=String(e.getDate()).padStart(2,"0");return`${t}-${n}-${r}`},d=e=>e.filter(t=>t.type!=="literal").map(t=>t.type),c=e=>o(e)?{day:String(e.getDate()).padStart(2,"0"),month:String(e.getMonth()+1).padStart(2,"0"),year:String(e.getFullYear()).padStart(4,"0")}:u,l=(e,t)=>{if(t===""||e==="year"&&t.length<i.SEGMENT_MAX_LENGTH.year)return null;const n=parseInt(t,10);return Number.isNaN(n)||n===0?null:n},S=e=>s({day:l("day",e.day),month:l("month",e.month),year:l("year",e.year)}),y=(e,t)=>t===""?"":t.padStart(i.SEGMENT_MAX_LENGTH[e],"0"),T=(e,t,n)=>t===""?{displayValue:n,isPlaceholder:!0}:{displayValue:t.padStart(i.SEGMENT_MAX_LENGTH[e],"0"),isPlaceholder:!1},p=e=>{const t=window.getSelection();if(!t)return;const n=document.createRange();n.selectNodeContents(e),t.removeAllRanges(),t.addRange(n)};exports.deriveValue=s;exports.deriveValueFromText=S;exports.getSegmentDisplay=T;exports.getSegmentOrder=d;exports.isSameDateValue=g;exports.normalizeSegmentText=y;exports.segmentNumber=l;exports.segmentTextFromValue=c;exports.selectElementContents=p;exports.toISODateString=m;

package/lib/wip/DateField/DateField.utils.d.ts

@@ -0,0 +1,26 @@
+import { Nullable } from '@viasat/beam-shared/utils/types';
+import { DateFieldPart, SegmentText, SegmentType, SegmentValues } from './DateField.types';
+export declare const deriveValue: (segments: SegmentValues) => Nullable<Date>;
+export declare const isSameDateValue: (a: Nullable<Date>, b: Nullable<Date>) => boolean;
+export declare const toISODateString: (value: Nullable<Date>) => string;
+/** Ordered segment types from a parts array (literals stripped). */
+export declare const getSegmentOrder: (parts: ReadonlyArray<DateFieldPart>) => ReadonlyArray<SegmentType>;
+/** Per-segment zero-padded strings from a Date. All-empty for null/invalid. */
+export declare const segmentTextFromValue: (value: Nullable<Date>) => SegmentText;
+/** The number a segment string contributes to the date / `aria-valuenow`, or
+ *  null when it shouldn't yet: empty, a parsed 0, or a year under 4 digits. */
+export declare const segmentNumber: (type: SegmentType, text: string) => Nullable<number>;
+/** Derives a Date from the per-segment strings (single source of truth). */
+export declare const deriveValueFromText: (text: SegmentText) => Nullable<Date>;
+/** Zero-pads a segment to its full width on blur (day/month → 2, year → 4),
+ *  e.g. "1" → "01" / "0001". No year minimum, so a lone "1" settles as year 1. */
+export declare const normalizeSegmentText: (type: SegmentType, text: string) => string;
+export interface SegmentDisplay {
+    displayValue: string;
+    isPlaceholder: boolean;
+}
+/** Placeholder when empty, else the digits zero-padded to the segment width
+ *  ("1" → "01" / "0001"). Display-only — the raw query drives append + value. */
+export declare const getSegmentDisplay: (type: SegmentType, text: string, placeholder: string) => SegmentDisplay;
+/** Selects an element's entire textContent (whole-segment highlight). */
+export declare const selectElementContents: (element: HTMLElement) => void;

package/lib/wip/DateField/DateField.utils.es.js

@@ -0,0 +1,45 @@
+import { SEGMENT_MAX_LENGTH as o } from "./DateField.validation.es.js";
+const s = { day: "", month: "", year: "" }, i = (e) => e instanceof Date && !Number.isNaN(e.getTime()), u = (e) => {
+  const { day: t, month: n, year: r } = e;
+  if (t == null || n == null || r == null) return null;
+  const a = new Date(r, n - 1, t);
+  return a.setFullYear(r), Number.isNaN(a.getTime()) || a.getFullYear() !== r || a.getMonth() !== n - 1 || a.getDate() !== t ? null : a;
+}, m = (e, t) => e == null && t == null ? !0 : e == null || t == null ? !1 : e.getTime() === t.getTime(), d = (e) => {
+  if (!i(e)) return "";
+  const t = String(e.getFullYear()).padStart(4, "0"), n = String(e.getMonth() + 1).padStart(2, "0"), r = String(e.getDate()).padStart(2, "0");
+  return `${t}-${n}-${r}`;
+}, c = (e) => e.filter(
+  (t) => t.type !== "literal"
+).map((t) => t.type), y = (e) => i(e) ? {
+  day: String(e.getDate()).padStart(2, "0"),
+  month: String(e.getMonth() + 1).padStart(2, "0"),
+  year: String(e.getFullYear()).padStart(4, "0")
+} : s, l = (e, t) => {
+  if (t === "" || e === "year" && t.length < o.year) return null;
+  const n = parseInt(t, 10);
+  return Number.isNaN(n) || n === 0 ? null : n;
+}, S = (e) => u({
+  day: l("day", e.day),
+  month: l("month", e.month),
+  year: l("year", e.year)
+}), p = (e, t) => t === "" ? "" : t.padStart(o[e], "0"), f = (e, t, n) => t === "" ? { displayValue: n, isPlaceholder: !0 } : {
+  displayValue: t.padStart(o[e], "0"),
+  isPlaceholder: !1
+}, N = (e) => {
+  const t = window.getSelection();
+  if (!t) return;
+  const n = document.createRange();
+  n.selectNodeContents(e), t.removeAllRanges(), t.addRange(n);
+};
+export {
+  u as deriveValue,
+  S as deriveValueFromText,
+  f as getSegmentDisplay,
+  c as getSegmentOrder,
+  m as isSameDateValue,
+  p as normalizeSegmentText,
+  l as segmentNumber,
+  y as segmentTextFromValue,
+  N as selectElementContents,
+  d as toISODateString
+};