@bikdotai/bik-component-library 0.0.868-beta.6 → 0.0.868-beta.9

package/dist/esm/components/schedule-builder/ScheduleBuilder.styled.js

@@ -0,0 +1,168 @@
+import i from "styled-components";
+import { COLORS as t } from "../../constants/Theme.js";
+const o = 84, n = 8, d = i.div`
+	display: flex;
+	flex-direction: column;
+	min-width: 0;
+	gap: 6px;
+`, l = i(d)`
+	flex: 1 1 0;
+`, a = i(d)`
+	flex: 1 1 ${o + n}px;
+`, s = i.div`
+	display: flex;
+	flex-direction: row;
+	gap: 16px;
+	width: 100%;
+	align-items: flex-start;
+`, x = i.div`
+	height: 48px;
+`, c = i.div`
+	display: flex;
+	flex-direction: row;
+	gap: ${n}px;
+	align-items: flex-start;
+`, g = i.div`
+	flex: 1;
+	min-width: 0;
+`, f = i.div`
+	flex: 0 0 ${o}px;
+`, h = i.div`
+	width: 100%;
+	min-width: 0;
+`, m = i.div`
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	width: 337px;
+	max-width: 100%;
+`, w = i.div`
+	display: flex;
+	flex-direction: row;
+	align-items: flex-start;
+	gap: 4px;
+
+	svg {
+		flex: 0 0 16px;
+		width: 16px;
+		height: 16px;
+	}
+`, u = i.div`
+	display: flex;
+	align-items: center;
+	gap: 2px;
+`, v = i.span`
+	font-weight: 600;
+`, y = i.span`
+	color: ${t.content.negative};
+`, b = i.div`
+	box-sizing: border-box;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	gap: 4px;
+	padding: 16px;
+	flex: 1;
+	height: 56px;
+	border-radius: 4px;
+	border: 1px solid
+		${(e) => e.active ? t.background.inverseLight : t.stroke.primary};
+	background: ${(e) => e.active ? t.background.brandLight : t.surface.standard};
+	cursor: ${(e) => e.disabled ? "not-allowed" : "pointer"};
+	opacity: ${(e) => e.disabled ? 0.6 : 1};
+`, R = i.div`
+	display: flex;
+	flex-direction: row;
+	gap: 16px;
+	width: 100%;
+`, k = i.div`
+	height: 1px;
+	width: 100%;
+	background: ${t.stroke.primary};
+`, $ = i.div`
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	gap: 12px;
+	flex-wrap: wrap;
+`, S = i.div`
+	width: 44px;
+`, D = i.div`
+	width: 168px;
+`, C = i.div`
+	position: relative;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	gap: 8px;
+
+	/* connector spanning the 16px gap to the next run */
+	::before {
+		content: '';
+		position: absolute;
+		left: 4.5px;
+		top: 100%;
+		height: 16px;
+		width: 1px;
+		background: ${(e) => e.isLast ? "transparent" : t.stroke.brandLightAlt};
+	}
+`, I = i.div`
+	width: 10px;
+	height: 10px;
+	border-radius: 50%;
+	background: ${t.background.inverseLight};
+	flex-shrink: 0;
+	z-index: 1;
+`, L = i.div`
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	gap: 12px;
+	width: 100%;
+	justify-content: space-between;
+	padding-top: 16px;
+	border-top: 1px solid ${t.stroke.primary};
+`, M = i.div`
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+`, F = i.div`
+	display: flex;
+	flex-direction: column;
+	gap: ${(e) => e.gap ?? 12}px;
+	width: 100%;
+`, T = i.div`
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	gap: ${(e) => e.gap ?? 8}px;
+`;
+export {
+  w as CaptionWithIcon,
+  F as Column,
+  l as DateFieldColumn,
+  x as DatePickerSlot,
+  D as EndDateWrapper,
+  $ as EndsRow,
+  d as FieldColumn,
+  u as FieldLabel,
+  s as FieldsRow,
+  h as FrequencyDropdownSlot,
+  f as MeridiemDropdownSlot,
+  m as MonthDateGridSlot,
+  M as RefreshSegmentCopy,
+  L as RefreshSegmentRow,
+  y as RequiredMark,
+  T as Row,
+  S as RunCountInputWrapper,
+  k as SectionDivider,
+  b as SendModeOption,
+  R as SendModeRow,
+  v as SummaryHighlight,
+  g as TimeDropdownSlot,
+  a as TimeFieldColumn,
+  c as TimeInputRow,
+  I as UpcomingRunDot,
+  C as UpcomingRunItem
+};
+//# sourceMappingURL=ScheduleBuilder.styled.js.map

package/dist/esm/components/schedule-builder/ScheduleBuilder.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScheduleBuilder.styled.js","sources":["../../../../src/components/schedule-builder/ScheduleBuilder.styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '../../constants/Theme';\n\n/** Fixed width of the am/pm dropdown, and the gap separating it from the time box. */\nconst MERIDIEM_SLOT_WIDTH = 84;\nconst TIME_ROW_GAP = 8;\n\n/**\n * A labelled field column — \"Start date\" and \"Time\" sit side by side.\n * 6px label-to-input gap comes from the design's `input-large` component.\n */\nexport const FieldColumn = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tmin-width: 0;\n\tgap: 6px;\n`;\n\nexport const DateFieldColumn = styled(FieldColumn)`\n\tflex: 1 1 0;\n`;\n\n/**\n * Same share as the date column plus the am/pm dropdown's footprint (84px\n * wide + 8px gap), so the time box itself matches the date box rather than\n * being squeezed by the dropdown sitting beside it.\n */\nexport const TimeFieldColumn = styled(FieldColumn)`\n\tflex: 1 1 ${MERIDIEM_SLOT_WIDTH + TIME_ROW_GAP}px;\n`;\n\n/**\n * The Start date / Time row.\n *\n * Aligned to the top rather than centred: the time field grows taller when its\n * validation message appears, and a centred row would shift the date field up\n * and down with it.\n */\nexport const FieldsRow = styled.div`\n\tdisplay: flex;\n\tflex-direction: row;\n\tgap: 16px;\n\twidth: 100%;\n\talign-items: flex-start;\n`;\n\n/** Wraps the date picker so its button matches the 48px input height. */\nexport const DatePickerSlot = styled.div`\n\theight: 48px;\n`;\n\n/**\n * The time box and its am/pm dropdown.\n *\n * Top-aligned rather than centred: the validation message renders inside the\n * time slot, so a centred row would push am/pm downward as the message appears.\n */\nexport const TimeInputRow = styled.div`\n\tdisplay: flex;\n\tflex-direction: row;\n\tgap: ${TIME_ROW_GAP}px;\n\talign-items: flex-start;\n`;\n\n/** The hh:mm dropdown takes the free space; am/pm is fixed beside it. */\nexport const TimeDropdownSlot = styled.div`\n\tflex: 1;\n\tmin-width: 0;\n`;\n\nexport const MeridiemDropdownSlot = styled.div`\n\tflex: 0 0 ${MERIDIEM_SLOT_WIDTH}px;\n`;\n\n/**\n * Frequency field. Fills its column, which is a DateFieldColumn so it takes the\n * same share as Start date above it — the design has both as 337px halves of the\n * 690px row, rather than a fixed 220px box that drifts as the panel resizes.\n */\nexport const FrequencyDropdownSlot = styled.div`\n\twidth: 100%;\n\tmin-width: 0;\n`;\n\n/**\n * Monthly date grid. Fixed at 337px so six CHIP_WIDTH chips and their 8px gaps\n * wrap onto a tidy 6-per-row grid rather than reflowing with the panel width.\n */\nexport const MonthDateGridSlot = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 8px;\n\twidth: 337px;\n\tmax-width: 100%;\n`;\n\n/**\n * Icon + text caption under a picker, for both validation errors and the\n * skipped-month note. The icon is pinned to its 16px box and aligned to the\n * first line — as a bare flex child it would stretch and open a wide gap.\n */\nexport const CaptionWithIcon = styled.div`\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: flex-start;\n\tgap: 4px;\n\n\tsvg {\n\t\tflex: 0 0 16px;\n\t\twidth: 16px;\n\t\theight: 16px;\n\t}\n`;\n\n/** Field label row — holds the caption and its required asterisk. */\nexport const FieldLabel = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 2px;\n`;\n\n/** Frequency and time read in semibold inside the summary line. */\nexport const SummaryHighlight = styled.span`\n\tfont-weight: 600;\n`;\n\nexport const RequiredMark = styled.span`\n\tcolor: ${COLORS.content.negative};\n`;\n\n/** A single selectable send-mode card. */\nexport const SendModeOption = styled.div<{\n\tactive: boolean;\n\tdisabled: boolean;\n}>`\n\tbox-sizing: border-box;\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tgap: 4px;\n\tpadding: 16px;\n\tflex: 1;\n\theight: 56px;\n\tborder-radius: 4px;\n\tborder: 1px solid\n\t\t${(props) =>\n\t\t\tprops.active ? COLORS.background.inverseLight : COLORS.stroke.primary};\n\tbackground: ${(props) =>\n\t\tprops.active ? COLORS.background.brandLight : COLORS.surface.standard};\n\tcursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n\topacity: ${(props) => (props.disabled ? 0.6 : 1)};\n`;\n\n/** The row of send-mode cards. */\nexport const SendModeRow = styled.div`\n\tdisplay: flex;\n\tflex-direction: row;\n\tgap: 16px;\n\twidth: 100%;\n`;\n\n/** 1px rule between the send-mode radios and the fields below. */\nexport const SectionDivider = styled.div`\n\theight: 1px;\n\twidth: 100%;\n\tbackground: ${COLORS.stroke.primary};\n`;\n\n/** \"Ends\" row wraps when the three options do not fit on one line. */\nexport const EndsRow = styled.div`\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tgap: 12px;\n\tflex-wrap: wrap;\n`;\n\n/** 44px wide, 32px tall — the design's small input. */\nexport const RunCountInputWrapper = styled.div`\n\twidth: 44px;\n`;\n\nexport const EndDateWrapper = styled.div`\n\twidth: 168px;\n`;\n\nexport const UpcomingRunItem = styled.div<{ isLast: boolean }>`\n\tposition: relative;\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tgap: 8px;\n\n\t/* connector spanning the 16px gap to the next run */\n\t::before {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tleft: 4.5px;\n\t\ttop: 100%;\n\t\theight: 16px;\n\t\twidth: 1px;\n\t\tbackground: ${(props) =>\n\t\t\tprops.isLast ? 'transparent' : COLORS.stroke.brandLightAlt};\n\t}\n`;\n\nexport const UpcomingRunDot = styled.div`\n\twidth: 10px;\n\theight: 10px;\n\tborder-radius: 50%;\n\tbackground: ${COLORS.background.inverseLight};\n\tflex-shrink: 0;\n\tz-index: 1;\n`;\n\nexport const RefreshSegmentRow = styled.div`\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tgap: 12px;\n\twidth: 100%;\n\tjustify-content: space-between;\n\tpadding-top: 16px;\n\tborder-top: 1px solid ${COLORS.stroke.primary};\n`;\n\nexport const RefreshSegmentCopy = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 4px;\n`;\n\n/** Generic vertical stack — the library cannot rely on the app's utility classes. */\nexport const Column = styled.div<{ gap?: number }>`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: ${(props) => props.gap ?? 12}px;\n\twidth: 100%;\n`;\n\nexport const Row = styled.div<{ gap?: number }>`\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tgap: ${(props) => props.gap ?? 8}px;\n`;\n"],"names":["MERIDIEM_SLOT_WIDTH","TIME_ROW_GAP","FieldColumn","styled","DateFieldColumn","TimeFieldColumn","FieldsRow","DatePickerSlot","TimeInputRow","TimeDropdownSlot","MeridiemDropdownSlot","FrequencyDropdownSlot","MonthDateGridSlot","CaptionWithIcon","FieldLabel","SummaryHighlight","RequiredMark","COLORS","SendModeOption","props","SendModeRow","SectionDivider","EndsRow","RunCountInputWrapper","EndDateWrapper","UpcomingRunItem","UpcomingRunDot","RefreshSegmentRow","RefreshSegmentCopy","Column","Row"],"mappings":";;AAIA,MAAMA,IAAsB,IACtBC,IAAe,GAMRC,IAAcC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,GAOrBC,IAAkBD,EAAOD,CAAW;AAAA;AAAA,GASpCG,IAAkBF,EAAOD,CAAW;AAAA,aACpCF,IAAsBC,CAAY;AAAA,GAUlCK,IAAYH,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GASnBI,IAAiBJ,EAAO;AAAA;AAAA,GAUxBK,IAAeL,EAAO;AAAA;AAAA;AAAA,QAG3BF,CAAY;AAAA;AAAA,GAKPQ,IAAmBN,EAAO;AAAA;AAAA;AAAA,GAK1BO,IAAuBP,EAAO;AAAA,aAC9BH,CAAmB;AAAA,GAQnBW,IAAwBR,EAAO;AAAA;AAAA;AAAA,GAS/BS,IAAoBT,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAa3BU,IAAkBV,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAczBW,IAAaX,EAAO;AAAA;AAAA;AAAA;AAAA,GAOpBY,IAAmBZ,EAAO;AAAA;AAAA,GAI1Ba,IAAeb,EAAO;AAAA,UACzBc,EAAO,QAAQ,QAAQ;AAAA,GAIpBC,IAAiBf,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAcjC,CAACgB,MACFA,EAAM,SAASF,EAAO,WAAW,eAAeA,EAAO,OAAO,OAAO;AAAA,eACzD,CAACE,MACdA,EAAM,SAASF,EAAO,WAAW,aAAaA,EAAO,QAAQ,QAAQ;AAAA,WAC5D,CAACE,MAAWA,EAAM,WAAW,gBAAgB,SAAU;AAAA,YACtD,CAACA,MAAWA,EAAM,WAAW,MAAM,CAAE;AAAA,GAIpCC,IAAcjB,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,GAQrBkB,IAAiBlB,EAAO;AAAA;AAAA;AAAA,eAGtBc,EAAO,OAAO,OAAO;AAAA,GAIvBK,IAAUnB,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GASjBoB,IAAuBpB,EAAO;AAAA;AAAA,GAI9BqB,IAAiBrB,EAAO;AAAA;AAAA,GAIxBsB,IAAkBtB,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAetB,CAACgB,MACdA,EAAM,SAAS,gBAAgBF,EAAO,OAAO,aAAa;AAAA;AAAA,GAIhDS,IAAiBvB,EAAO;AAAA;AAAA;AAAA;AAAA,eAItBc,EAAO,WAAW,YAAY;AAAA;AAAA;AAAA,GAKhCU,IAAoBxB,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAQfc,EAAO,OAAO,OAAO;AAAA,GAGjCW,IAAqBzB,EAAO;AAAA;AAAA;AAAA;AAAA,GAO5B0B,IAAS1B,EAAO;AAAA;AAAA;AAAA,QAGrB,CAACgB,MAAUA,EAAM,OAAO,EAAE;AAAA;AAAA,GAIrBW,IAAM3B,EAAO;AAAA;AAAA;AAAA;AAAA,QAIlB,CAACgB,MAAUA,EAAM,OAAO,CAAC;AAAA;"}

package/dist/esm/components/schedule-builder/ScheduleEndPicker.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+import { RecurrenceValue } from './model';
+export interface ScheduleEndPickerProps {
+    value: RecurrenceValue;
+    onChange: (patch: Partial<RecurrenceValue>) => void;
+    /** Earliest selectable end date — normally the series' own start date. */
+    minEndDate?: Date;
+    'data-test'?: string;
+}
+/**
+ * "Never / After N runs / On <date>".
+ *
+ * The run-count input and the end-date picker stay mounted and go disabled with
+ * their mode rather than unmounting, so the row keeps its width and the controls
+ * do not jump as the merchant switches between them.
+ */
+export declare const ScheduleEndPicker: React.FC<ScheduleEndPickerProps>;

package/dist/esm/components/schedule-builder/ScheduleEndPicker.js

@@ -0,0 +1,105 @@
+import { jsxs as a, jsx as r } from "react/jsx-runtime";
+import { COLORS as s } from "../../constants/Theme.js";
+import { BodySecondary as R } from "../TypographyStyle.js";
+import { RECURRENCE_END_MODE as e } from "./model.js";
+import { FieldColumn as u, FieldLabel as N, EndsRow as O, Row as p, RunCountInputWrapper as D, EndDateWrapper as _ } from "./ScheduleBuilder.styled.js";
+import { MAX_RECURRENCE_RUNS as m } from "./ScheduleHelper.js";
+import { RadioButton as l } from "../radioButton/RadioButton.js";
+import { Input as S } from "../input/Input.js";
+import { DatePickerWrapper as h } from "../datePicker/DatePickerWrapper.js";
+const c = s.background.inverseLight, F = ({
+  value: o,
+  onChange: t,
+  minEndDate: f,
+  "data-test": A
+}) => {
+  const n = o?.endMode ?? e.NEVER;
+  return /* @__PURE__ */ a(u, { "data-test": A, children: [
+    /* @__PURE__ */ r(N, { children: /* @__PURE__ */ r(R, { color: s.content.primary, children: "Ends" }) }),
+    /* @__PURE__ */ a(O, { children: [
+      /* @__PURE__ */ r(
+        l,
+        {
+          isActive: n === e.NEVER,
+          label: "Never",
+          value: e.NEVER,
+          onValueChange: () => t({ endMode: e.NEVER }),
+          activeColor: c,
+          skipSelectingOff: n === e.NEVER
+        }
+      ),
+      /* @__PURE__ */ a(p, { gap: 8, children: [
+        /* @__PURE__ */ r(
+          l,
+          {
+            isActive: n === e.AFTER_RUNS,
+            label: "After",
+            value: e.AFTER_RUNS,
+            onValueChange: () => t({ endMode: e.AFTER_RUNS }),
+            activeColor: c,
+            skipSelectingOff: n === e.AFTER_RUNS
+          }
+        ),
+        /* @__PURE__ */ r(D, { children: /* @__PURE__ */ r(
+          S,
+          {
+            variant: "small",
+            type: "number",
+            placeholder: String(m),
+            value: o?.endAfterRuns ? String(o.endAfterRuns) : "",
+            state: n === e.AFTER_RUNS ? "none" : "disabled",
+            onChangeText: (i) => {
+              const d = i.replace(/\D/g, "");
+              if (!d) {
+                t({ endAfterRuns: void 0 });
+                return;
+              }
+              t({
+                endAfterRuns: Math.min(
+                  Number(d),
+                  m
+                )
+              });
+            }
+          }
+        ) }),
+        /* @__PURE__ */ r(R, { color: s.content.primary, children: "runs" })
+      ] }),
+      /* @__PURE__ */ a(p, { gap: 8, children: [
+        /* @__PURE__ */ r(
+          l,
+          {
+            isActive: n === e.ON_DATE,
+            label: "On",
+            value: e.ON_DATE,
+            onValueChange: () => t({ endMode: e.ON_DATE }),
+            activeColor: c,
+            skipSelectingOff: n === e.ON_DATE
+          }
+        ),
+        /* @__PURE__ */ r(_, { children: /* @__PURE__ */ r(
+          h,
+          {
+            val: o?.endOnDate ? new Date(o.endOnDate * 1e3) : void 0,
+            disabled: n !== e.ON_DATE,
+            onChange: (i) => {
+              const d = Array.isArray(i) ? i[0] : i;
+              if (!d) return;
+              const E = new Date(d);
+              E.setHours(23, 59, 59, 0), t({
+                endMode: e.ON_DATE,
+                endOnDate: Math.floor(E.getTime() / 1e3)
+              });
+            },
+            calendarProps: { minDate: f },
+            pickerStyles: { top: 8, zIndex: 4 }
+          }
+        ) })
+      ] })
+    ] })
+  ] });
+};
+export {
+  F as ScheduleEndPicker
+};
+//# sourceMappingURL=ScheduleEndPicker.js.map

package/dist/esm/components/schedule-builder/ScheduleEndPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScheduleEndPicker.js","sources":["../../../../src/components/schedule-builder/ScheduleEndPicker.tsx"],"sourcesContent":["import React from 'react';\nimport { COLORS } from '../../constants/Theme';\nimport { DatePickerWrapper } from '../datePicker';\nimport { Input } from '../input';\nimport { RadioButton } from '../radioButton';\nimport { BodySecondary } from '../TypographyStyle';\nimport { RECURRENCE_END_MODE, RecurrenceValue } from './model';\nimport {\n\tEndDateWrapper,\n\tEndsRow,\n\tFieldColumn,\n\tFieldLabel,\n\tRow,\n\tRunCountInputWrapper,\n} from './ScheduleBuilder.styled';\nimport { MAX_RECURRENCE_RUNS } from './ScheduleHelper';\n\n/**\n * Radios in this section read brand purple when selected. The library defaults\n * to the positive green, which is not what the design shows.\n */\nconst RADIO_ACTIVE_COLOR = COLORS.background.inverseLight;\n\nexport interface ScheduleEndPickerProps {\n\tvalue: RecurrenceValue;\n\tonChange: (patch: Partial<RecurrenceValue>) => void;\n\t/** Earliest selectable end date — normally the series' own start date. */\n\tminEndDate?: Date;\n\t'data-test'?: string;\n}\n\n/**\n * \"Never / After N runs / On <date>\".\n *\n * The run-count input and the end-date picker stay mounted and go disabled with\n * their mode rather than unmounting, so the row keeps its width and the controls\n * do not jump as the merchant switches between them.\n */\nexport const ScheduleEndPicker: React.FC<ScheduleEndPickerProps> = ({\n\tvalue,\n\tonChange,\n\tminEndDate,\n\t'data-test': dataTest,\n}) => {\n\tconst endMode = value?.endMode ?? RECURRENCE_END_MODE.NEVER;\n\n\treturn (\n\t\t<FieldColumn data-test={dataTest}>\n\t\t\t<FieldLabel>\n\t\t\t\t<BodySecondary color={COLORS.content.primary}>Ends</BodySecondary>\n\t\t\t</FieldLabel>\n\t\t\t<EndsRow>\n\t\t\t\t<RadioButton\n\t\t\t\t\tisActive={endMode === RECURRENCE_END_MODE.NEVER}\n\t\t\t\t\tlabel=\"Never\"\n\t\t\t\t\tvalue={RECURRENCE_END_MODE.NEVER}\n\t\t\t\t\tonValueChange={() => onChange({ endMode: RECURRENCE_END_MODE.NEVER })}\n\t\t\t\t\tactiveColor={RADIO_ACTIVE_COLOR}\n\t\t\t\t\t// Inert only once selected — an end mode is always required, so the\n\t\t\t\t\t// active option cannot be clicked off.\n\t\t\t\t\tskipSelectingOff={endMode === RECURRENCE_END_MODE.NEVER}\n\t\t\t\t/>\n\n\t\t\t\t<Row gap={8}>\n\t\t\t\t\t<RadioButton\n\t\t\t\t\t\tisActive={endMode === RECURRENCE_END_MODE.AFTER_RUNS}\n\t\t\t\t\t\tlabel=\"After\"\n\t\t\t\t\t\tvalue={RECURRENCE_END_MODE.AFTER_RUNS}\n\t\t\t\t\t\tonValueChange={() =>\n\t\t\t\t\t\t\tonChange({ endMode: RECURRENCE_END_MODE.AFTER_RUNS })\n\t\t\t\t\t\t}\n\t\t\t\t\t\tactiveColor={RADIO_ACTIVE_COLOR}\n\t\t\t\t\t\tskipSelectingOff={endMode === RECURRENCE_END_MODE.AFTER_RUNS}\n\t\t\t\t\t/>\n\t\t\t\t\t<RunCountInputWrapper>\n\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\tvariant=\"small\"\n\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\tplaceholder={String(MAX_RECURRENCE_RUNS)}\n\t\t\t\t\t\t\tvalue={value?.endAfterRuns ? String(value.endAfterRuns) : ''}\n\t\t\t\t\t\t\tstate={\n\t\t\t\t\t\t\t\tendMode === RECURRENCE_END_MODE.AFTER_RUNS ? 'none' : 'disabled'\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tonChangeText={(input: string) => {\n\t\t\t\t\t\t\t\tconst digitsOnly = input.replace(/\\D/g, '');\n\t\t\t\t\t\t\t\tif (!digitsOnly) {\n\t\t\t\t\t\t\t\t\tonChange({ endAfterRuns: undefined });\n\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tonChange({\n\t\t\t\t\t\t\t\t\tendAfterRuns: Math.min(\n\t\t\t\t\t\t\t\t\t\tNumber(digitsOnly),\n\t\t\t\t\t\t\t\t\t\tMAX_RECURRENCE_RUNS,\n\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</RunCountInputWrapper>\n\t\t\t\t\t<BodySecondary color={COLORS.content.primary}>runs</BodySecondary>\n\t\t\t\t</Row>\n\n\t\t\t\t<Row gap={8}>\n\t\t\t\t\t<RadioButton\n\t\t\t\t\t\tisActive={endMode === RECURRENCE_END_MODE.ON_DATE}\n\t\t\t\t\t\tlabel=\"On\"\n\t\t\t\t\t\tvalue={RECURRENCE_END_MODE.ON_DATE}\n\t\t\t\t\t\tonValueChange={() =>\n\t\t\t\t\t\t\tonChange({ endMode: RECURRENCE_END_MODE.ON_DATE })\n\t\t\t\t\t\t}\n\t\t\t\t\t\tactiveColor={RADIO_ACTIVE_COLOR}\n\t\t\t\t\t\tskipSelectingOff={endMode === RECURRENCE_END_MODE.ON_DATE}\n\t\t\t\t\t/>\n\t\t\t\t\t<EndDateWrapper>\n\t\t\t\t\t\t<DatePickerWrapper\n\t\t\t\t\t\t\tval={\n\t\t\t\t\t\t\t\tvalue?.endOnDate ? new Date(value.endOnDate * 1000) : undefined\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tdisabled={endMode !== RECURRENCE_END_MODE.ON_DATE}\n\t\t\t\t\t\t\tonChange={(picked: Date | Date[]) => {\n\t\t\t\t\t\t\t\tconst dateValue = Array.isArray(picked) ? picked[0] : picked;\n\t\t\t\t\t\t\t\tif (!dateValue) return;\n\t\t\t\t\t\t\t\t// End of the chosen day, so a run landing that day still fires.\n\t\t\t\t\t\t\t\tconst endOfDay = new Date(dateValue);\n\t\t\t\t\t\t\t\tendOfDay.setHours(23, 59, 59, 0);\n\t\t\t\t\t\t\t\tonChange({\n\t\t\t\t\t\t\t\t\tendMode: RECURRENCE_END_MODE.ON_DATE,\n\t\t\t\t\t\t\t\t\tendOnDate: Math.floor(endOfDay.getTime() / 1000),\n\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tcalendarProps={{ minDate: minEndDate }}\n\t\t\t\t\t\t\tpickerStyles={{ top: 8, zIndex: 4 }}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</EndDateWrapper>\n\t\t\t\t</Row>\n\t\t\t</EndsRow>\n\t\t</FieldColumn>\n\t);\n};\n"],"names":["RADIO_ACTIVE_COLOR","COLORS","ScheduleEndPicker","value","onChange","minEndDate","dataTest","endMode","RECURRENCE_END_MODE","jsxs","FieldColumn","jsx","FieldLabel","BodySecondary","EndsRow","RadioButton","Row","RunCountInputWrapper","Input","MAX_RECURRENCE_RUNS","input","digitsOnly","EndDateWrapper","DatePickerWrapper","picked","dateValue","endOfDay"],"mappings":"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"}

package/dist/esm/components/schedule-builder/ScheduleFrequencyPicker.d.ts

@@ -0,0 +1,21 @@
+import { default as React } from 'react';
+import { RecurrenceValue } from './model';
+export interface ScheduleFrequencyPickerProps {
+    value: RecurrenceValue;
+    onChange: (patch: Partial<RecurrenceValue>) => void;
+    /**
+     * Width of the frequency menu. Defaults to matching its button — pass a
+     * measured width when the button sits in a narrow column and the menu should
+     * still be readable.
+     */
+    frequencyMenuWidth?: string;
+    'data-test'?: string;
+}
+/**
+ * Frequency, plus whichever "Repeat on" picker that frequency needs.
+ *
+ * Daily needs no picker, weekly needs day chips, monthly needs a preset dropdown
+ * and — for Custom — the 1-31 date grid. All three live here so a caller does not
+ * have to know which control belongs to which frequency.
+ */
+export declare const ScheduleFrequencyPicker: React.FC<ScheduleFrequencyPickerProps>;

package/dist/esm/components/schedule-builder/ScheduleFrequencyPicker.js

@@ -0,0 +1,136 @@
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { COLORS as o } from "../../constants/Theme.js";
+import y from "../../icons/Informational/General/Info.js";
+import { ChipSelectorGroup as O } from "../chip-selector/ChipSelectorGroup.js";
+import { BodySecondary as a, BodyCaption as u } from "../TypographyStyle.js";
+import { RECURRENCE_FREQUENCY as c, MONTHLY_REPEAT_OPTION as h } from "./model.js";
+import { Column as g, FieldsRow as A, DateFieldColumn as C, FieldLabel as s, FrequencyDropdownSlot as M, FieldColumn as b, CaptionWithIcon as m, Row as W, MonthDateGridSlot as N } from "./ScheduleBuilder.styled.js";
+import { ScheduleHelper as P, getSkippedMonthCaption as Y, LAST_DAY_CHIP_VALUE as R, DAY_CHIP_OPTIONS as k, CHIP_WIDTH as v, DATE_CHIP_OPTIONS as w } from "./ScheduleHelper.js";
+import { Dropdown as T } from "../dropdown/Dropdown.js";
+const E = [
+  { label: "Daily", value: c.DAILY },
+  { label: "Weekly", value: c.WEEKLY },
+  { label: "Monthly", value: c.MONTHLY }
+], H = [
+  { label: "First", value: h.FIRST },
+  { label: "Last", value: h.LAST },
+  { label: "Custom", value: h.CUSTOM }
+], Q = ({ value: l, onChange: d, frequencyMenuWidth: L, "data-test": D }) => {
+  const i = new P(l), f = i.frequency === c.WEEKLY, p = i.frequency === c.MONTHLY, I = p && l?.monthlyRepeatOption === h.CUSTOM, S = Y(l?.datesOfMonth), _ = [
+    ...l?.datesOfMonth ?? [],
+    ...l?.lastDaySelected ? [R] : []
+  ];
+  return /* @__PURE__ */ n(g, { gap: 12, "data-test": D, children: [
+    /* @__PURE__ */ n(A, { children: [
+      /* @__PURE__ */ n(C, { children: [
+        /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e(a, { color: o.content.primary, children: "Select frequency" }) }),
+        /* @__PURE__ */ e(M, { children: /* @__PURE__ */ e(
+          T,
+          {
+            size: "default",
+            isSearchable: !1,
+            isMultiSelect: !1,
+            options: E,
+            buttonWidth: "100%",
+            width: L || "100%",
+            placeHolderHeight: "48px",
+            placeHolder: "Select frequency",
+            value: E.find(
+              (t) => t.value === i.frequency
+            )?.label,
+            onSelect: (t) => {
+              const r = Array.isArray(t) ? t[0] : t;
+              r?.value && d({
+                frequency: r.value
+              });
+            }
+          }
+        ) })
+      ] }),
+      !f && !p && /* @__PURE__ */ e(C, { "aria-hidden": !0 }),
+      f && /* @__PURE__ */ n(b, { children: [
+        /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e(a, { color: o.content.primary, children: "Repeat on" }) }),
+        /* @__PURE__ */ e(
+          O,
+          {
+            "data-test": "recurrence-days-of-week",
+            ariaLabel: "Repeat on",
+            chipWidth: v,
+            options: k,
+            value: l?.daysOfWeek ?? [],
+            onChange: (t) => d({
+              daysOfWeek: t.filter(
+                (r) => typeof r == "number"
+              )
+            })
+          }
+        ),
+        i.isMissingWeeklyDays && /* @__PURE__ */ n(m, { children: [
+          /* @__PURE__ */ e(y, { size: 16, color: o.content.negative }),
+          /* @__PURE__ */ e(u, { color: o.content.negative, children: "Select day(s) above to send this weekly recurring" })
+        ] })
+      ] }),
+      p && /* @__PURE__ */ n(b, { children: [
+        /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e(a, { color: o.content.primary, children: "Repeat every" }) }),
+        /* @__PURE__ */ n(W, { gap: 8, children: [
+          /* @__PURE__ */ e(M, { children: /* @__PURE__ */ e(
+            T,
+            {
+              size: "default",
+              isSearchable: !1,
+              isMultiSelect: !1,
+              options: H,
+              buttonWidth: "100%",
+              width: "220px",
+              placeHolderHeight: "48px",
+              placeHolder: "Select",
+              value: H.find(
+                (t) => t.value === l?.monthlyRepeatOption
+              )?.label,
+              onSelect: (t) => {
+                const r = Array.isArray(t) ? t[0] : t;
+                r?.value && d({
+                  monthlyRepeatOption: r.value
+                });
+              }
+            }
+          ) }),
+          /* @__PURE__ */ e(a, { color: o.content.primary, children: "day of the month" })
+        ] })
+      ] })
+    ] }),
+    I && /* @__PURE__ */ n(N, { children: [
+      /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e(a, { color: o.content.primary, children: "Repeat on" }) }),
+      /* @__PURE__ */ e(
+        O,
+        {
+          "data-test": "recurrence-dates-of-month",
+          ariaLabel: "Repeat on dates",
+          chipWidth: v,
+          options: w,
+          size: "small",
+          wrap: !0,
+          value: _,
+          onChange: (t) => d({
+            datesOfMonth: t.filter(
+              (r) => typeof r == "number"
+            ),
+            lastDaySelected: t.includes(R)
+          })
+        }
+      ),
+      !!S && /* @__PURE__ */ n(m, { children: [
+        /* @__PURE__ */ e(y, { size: 16, color: o.content.secondary }),
+        /* @__PURE__ */ e(u, { color: o.content.secondary, children: S })
+      ] }),
+      i.isMissingMonthlyDates && /* @__PURE__ */ n(m, { children: [
+        /* @__PURE__ */ e(y, { size: 16, color: o.content.negative }),
+        /* @__PURE__ */ e(u, { color: o.content.negative, children: "Select day(s) above to send this monthly recurring" })
+      ] })
+    ] })
+  ] });
+};
+export {
+  Q as ScheduleFrequencyPicker
+};
+//# sourceMappingURL=ScheduleFrequencyPicker.js.map

package/dist/esm/components/schedule-builder/ScheduleFrequencyPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScheduleFrequencyPicker.js","sources":["../../../../src/components/schedule-builder/ScheduleFrequencyPicker.tsx"],"sourcesContent":["import React from 'react';\nimport { COLORS } from '../../constants/Theme';\nimport Info from '../../icons/Informational/General/Info';\nimport { ChipSelectorGroup } from '../chip-selector';\nimport { Dropdown, DropdownOption, SingleOption } from '../dropdown';\nimport { BodyCaption, BodySecondary } from '../TypographyStyle';\nimport {\n\tMONTHLY_REPEAT_OPTION,\n\tRECURRENCE_FREQUENCY,\n\tRecurrenceValue,\n} from './model';\nimport {\n\tCaptionWithIcon,\n\tColumn,\n\tDateFieldColumn,\n\tFieldColumn,\n\tFieldLabel,\n\tFieldsRow,\n\tFrequencyDropdownSlot,\n\tMonthDateGridSlot,\n\tRow,\n} from './ScheduleBuilder.styled';\nimport {\n\tCHIP_WIDTH,\n\tDATE_CHIP_OPTIONS,\n\tDAY_CHIP_OPTIONS,\n\tgetSkippedMonthCaption,\n\tLAST_DAY_CHIP_VALUE,\n\tScheduleHelper,\n} from './ScheduleHelper';\n\nconst FREQUENCY_OPTIONS: SingleOption[] = [\n\t{ label: 'Daily', value: RECURRENCE_FREQUENCY.DAILY },\n\t{ label: 'Weekly', value: RECURRENCE_FREQUENCY.WEEKLY },\n\t{ label: 'Monthly', value: RECURRENCE_FREQUENCY.MONTHLY },\n];\n\n/** \"Repeat every\" presets for a monthly recurrence. */\nconst MONTHLY_REPEAT_OPTIONS: SingleOption[] = [\n\t{ label: 'First', value: MONTHLY_REPEAT_OPTION.FIRST },\n\t{ label: 'Last', value: MONTHLY_REPEAT_OPTION.LAST },\n\t{ label: 'Custom', value: MONTHLY_REPEAT_OPTION.CUSTOM },\n];\n\nexport interface ScheduleFrequencyPickerProps {\n\tvalue: RecurrenceValue;\n\tonChange: (patch: Partial<RecurrenceValue>) => void;\n\t/**\n\t * Width of the frequency menu. Defaults to matching its button — pass a\n\t * measured width when the button sits in a narrow column and the menu should\n\t * still be readable.\n\t */\n\tfrequencyMenuWidth?: string;\n\t'data-test'?: string;\n}\n\n/**\n * Frequency, plus whichever \"Repeat on\" picker that frequency needs.\n *\n * Daily needs no picker, weekly needs day chips, monthly needs a preset dropdown\n * and — for Custom — the 1-31 date grid. All three live here so a caller does not\n * have to know which control belongs to which frequency.\n */\nexport const ScheduleFrequencyPicker: React.FC<\n\tScheduleFrequencyPickerProps\n> = ({ value, onChange, frequencyMenuWidth, 'data-test': dataTest }) => {\n\tconst helper = new ScheduleHelper(value);\n\tconst isWeekly = helper.frequency === RECURRENCE_FREQUENCY.WEEKLY;\n\tconst isMonthly = helper.frequency === RECURRENCE_FREQUENCY.MONTHLY;\n\tconst isCustomMonthly =\n\t\tisMonthly && value?.monthlyRepeatOption === MONTHLY_REPEAT_OPTION.CUSTOM;\n\n\tconst skippedMonthCaption = getSkippedMonthCaption(value?.datesOfMonth);\n\n\t/** The last-day sentinel rides alongside the numeric dates in one chip group. */\n\tconst monthlyChipValue: (string | number)[] = [\n\t\t...(value?.datesOfMonth ?? []),\n\t\t...(value?.lastDaySelected ? [LAST_DAY_CHIP_VALUE] : []),\n\t];\n\n\treturn (\n\t\t<Column gap={12} data-test={dataTest}>\n\t\t\t<FieldsRow>\n\t\t\t\t{/*\n          Same flex share as the Start date column above it, per the design\n          where both fields are 337px halves of the 690px row.\n        */}\n\t\t\t\t<DateFieldColumn>\n\t\t\t\t\t<FieldLabel>\n\t\t\t\t\t\t<BodySecondary color={COLORS.content.primary}>\n\t\t\t\t\t\t\tSelect frequency\n\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t</FieldLabel>\n\t\t\t\t\t<FrequencyDropdownSlot>\n\t\t\t\t\t\t<Dropdown\n\t\t\t\t\t\t\tsize=\"default\"\n\t\t\t\t\t\t\tisSearchable={false}\n\t\t\t\t\t\t\tisMultiSelect={false}\n\t\t\t\t\t\t\toptions={FREQUENCY_OPTIONS}\n\t\t\t\t\t\t\tbuttonWidth=\"100%\"\n\t\t\t\t\t\t\twidth={frequencyMenuWidth || '100%'}\n\t\t\t\t\t\t\tplaceHolderHeight=\"48px\"\n\t\t\t\t\t\t\tplaceHolder=\"Select frequency\"\n\t\t\t\t\t\t\tvalue={\n\t\t\t\t\t\t\t\tFREQUENCY_OPTIONS.find(\n\t\t\t\t\t\t\t\t\t(option) => option.value === helper.frequency,\n\t\t\t\t\t\t\t\t)?.label\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tonSelect={(\n\t\t\t\t\t\t\t\tselected: DropdownOption | DropdownOption[] | null,\n\t\t\t\t\t\t\t) => {\n\t\t\t\t\t\t\t\tconst normalized = (\n\t\t\t\t\t\t\t\t\tArray.isArray(selected) ? selected[0] : selected\n\t\t\t\t\t\t\t\t) as SingleOption | null;\n\t\t\t\t\t\t\t\tif (!normalized?.value) return;\n\t\t\t\t\t\t\t\tonChange({\n\t\t\t\t\t\t\t\t\tfrequency: normalized.value as RECURRENCE_FREQUENCY,\n\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FrequencyDropdownSlot>\n\t\t\t\t</DateFieldColumn>\n\t\t\t\t{/*\n          Holds the other half of the row when no picker follows, so the\n          frequency field stays the same width as Start date instead of\n          stretching across the whole row.\n        */}\n\t\t\t\t{!isWeekly && !isMonthly && <DateFieldColumn aria-hidden />}\n\t\t\t\t{isWeekly && (\n\t\t\t\t\t<FieldColumn>\n\t\t\t\t\t\t<FieldLabel>\n\t\t\t\t\t\t\t<BodySecondary color={COLORS.content.primary}>\n\t\t\t\t\t\t\t\tRepeat on\n\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t</FieldLabel>\n\t\t\t\t\t\t<ChipSelectorGroup\n\t\t\t\t\t\t\tdata-test=\"recurrence-days-of-week\"\n\t\t\t\t\t\t\tariaLabel=\"Repeat on\"\n\t\t\t\t\t\t\tchipWidth={CHIP_WIDTH}\n\t\t\t\t\t\t\toptions={DAY_CHIP_OPTIONS}\n\t\t\t\t\t\t\tvalue={value?.daysOfWeek ?? []}\n\t\t\t\t\t\t\tonChange={(days) =>\n\t\t\t\t\t\t\t\tonChange({\n\t\t\t\t\t\t\t\t\tdaysOfWeek: days.filter(\n\t\t\t\t\t\t\t\t\t\t(day): day is number => typeof day === 'number',\n\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{helper.isMissingWeeklyDays && (\n\t\t\t\t\t\t\t<CaptionWithIcon>\n\t\t\t\t\t\t\t\t<Info size={16} color={COLORS.content.negative} />\n\t\t\t\t\t\t\t\t<BodyCaption color={COLORS.content.negative}>\n\t\t\t\t\t\t\t\t\tSelect day(s) above to send this weekly recurring\n\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t</CaptionWithIcon>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</FieldColumn>\n\t\t\t\t)}\n\t\t\t\t{isMonthly && (\n\t\t\t\t\t<FieldColumn>\n\t\t\t\t\t\t<FieldLabel>\n\t\t\t\t\t\t\t<BodySecondary color={COLORS.content.primary}>\n\t\t\t\t\t\t\t\tRepeat every\n\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t</FieldLabel>\n\t\t\t\t\t\t<Row gap={8}>\n\t\t\t\t\t\t\t<FrequencyDropdownSlot>\n\t\t\t\t\t\t\t\t<Dropdown\n\t\t\t\t\t\t\t\t\tsize=\"default\"\n\t\t\t\t\t\t\t\t\tisSearchable={false}\n\t\t\t\t\t\t\t\t\tisMultiSelect={false}\n\t\t\t\t\t\t\t\t\toptions={MONTHLY_REPEAT_OPTIONS}\n\t\t\t\t\t\t\t\t\tbuttonWidth=\"100%\"\n\t\t\t\t\t\t\t\t\twidth=\"220px\"\n\t\t\t\t\t\t\t\t\tplaceHolderHeight=\"48px\"\n\t\t\t\t\t\t\t\t\tplaceHolder=\"Select\"\n\t\t\t\t\t\t\t\t\tvalue={\n\t\t\t\t\t\t\t\t\t\tMONTHLY_REPEAT_OPTIONS.find(\n\t\t\t\t\t\t\t\t\t\t\t(option) => option.value === value?.monthlyRepeatOption,\n\t\t\t\t\t\t\t\t\t\t)?.label\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tonSelect={(\n\t\t\t\t\t\t\t\t\t\tselected: DropdownOption | DropdownOption[] | null,\n\t\t\t\t\t\t\t\t\t) => {\n\t\t\t\t\t\t\t\t\t\tconst normalized = (\n\t\t\t\t\t\t\t\t\t\t\tArray.isArray(selected) ? selected[0] : selected\n\t\t\t\t\t\t\t\t\t\t) as SingleOption | null;\n\t\t\t\t\t\t\t\t\t\tif (!normalized?.value) return;\n\t\t\t\t\t\t\t\t\t\tonChange({\n\t\t\t\t\t\t\t\t\t\t\tmonthlyRepeatOption:\n\t\t\t\t\t\t\t\t\t\t\t\tnormalized.value as MONTHLY_REPEAT_OPTION,\n\t\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</FrequencyDropdownSlot>\n\t\t\t\t\t\t\t<BodySecondary color={COLORS.content.primary}>\n\t\t\t\t\t\t\t\tday of the month\n\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t</Row>\n\t\t\t\t\t</FieldColumn>\n\t\t\t\t)}\n\t\t\t</FieldsRow>\n\n\t\t\t{isCustomMonthly && (\n\t\t\t\t<MonthDateGridSlot>\n\t\t\t\t\t<FieldLabel>\n\t\t\t\t\t\t<BodySecondary color={COLORS.content.primary}>\n\t\t\t\t\t\t\tRepeat on\n\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t</FieldLabel>\n\t\t\t\t\t<ChipSelectorGroup\n\t\t\t\t\t\tdata-test=\"recurrence-dates-of-month\"\n\t\t\t\t\t\tariaLabel=\"Repeat on dates\"\n\t\t\t\t\t\tchipWidth={CHIP_WIDTH}\n\t\t\t\t\t\toptions={DATE_CHIP_OPTIONS}\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\twrap\n\t\t\t\t\t\tvalue={monthlyChipValue}\n\t\t\t\t\t\tonChange={(selected) =>\n\t\t\t\t\t\t\tonChange({\n\t\t\t\t\t\t\t\tdatesOfMonth: selected.filter(\n\t\t\t\t\t\t\t\t\t(item): item is number => typeof item === 'number',\n\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\tlastDaySelected: selected.includes(LAST_DAY_CHIP_VALUE),\n\t\t\t\t\t\t\t})\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t\t{!!skippedMonthCaption && (\n\t\t\t\t\t\t<CaptionWithIcon>\n\t\t\t\t\t\t\t<Info size={16} color={COLORS.content.secondary} />\n\t\t\t\t\t\t\t<BodyCaption color={COLORS.content.secondary}>\n\t\t\t\t\t\t\t\t{skippedMonthCaption}\n\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t</CaptionWithIcon>\n\t\t\t\t\t)}\n\t\t\t\t\t{helper.isMissingMonthlyDates && (\n\t\t\t\t\t\t<CaptionWithIcon>\n\t\t\t\t\t\t\t<Info size={16} color={COLORS.content.negative} />\n\t\t\t\t\t\t\t<BodyCaption color={COLORS.content.negative}>\n\t\t\t\t\t\t\t\tSelect day(s) above to send this monthly recurring\n\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t</CaptionWithIcon>\n\t\t\t\t\t)}\n\t\t\t\t</MonthDateGridSlot>\n\t\t\t)}\n\t\t</Column>\n\t);\n};\n"],"names":["FREQUENCY_OPTIONS","RECURRENCE_FREQUENCY","MONTHLY_REPEAT_OPTIONS","MONTHLY_REPEAT_OPTION","ScheduleFrequencyPicker","value","onChange","frequencyMenuWidth","dataTest","helper","ScheduleHelper","isWeekly","isMonthly","isCustomMonthly","skippedMonthCaption","getSkippedMonthCaption","monthlyChipValue","LAST_DAY_CHIP_VALUE","jsxs","Column","FieldsRow","DateFieldColumn","jsx","FieldLabel","BodySecondary","COLORS","FrequencyDropdownSlot","Dropdown","option","selected","normalized","FieldColumn","ChipSelectorGroup","CHIP_WIDTH","DAY_CHIP_OPTIONS","days","day","CaptionWithIcon","Info","BodyCaption","Row","MonthDateGridSlot","DATE_CHIP_OPTIONS","item"],"mappings":"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"}

package/dist/esm/components/schedule-builder/ScheduleHelper.d.ts

@@ -0,0 +1,110 @@
+import { ChipOption } from '../chip-selector';
+import { RECURRENCE_END_MODE, RECURRENCE_FREQUENCY, RecurrenceSummary, RecurrenceValue } from './model';
+/** How many upcoming runs the preview shows by default. */
+export declare const UPCOMING_RUNS_PREVIEW_COUNT = 3;
+/** Upper bound on `endAfterRuns`, matching the 3-digit input in the design. */
+export declare const MAX_RECURRENCE_RUNS = 999;
+/**
+ * Width of a single chip in the "Repeat on" pickers.
+ *
+ * Shared by the weekly day chips and the monthly date chips: both grids are
+ * drawn to the same 44px square in the design, and the monthly grid's 337px
+ * width assumes it, so the two cannot be sized independently.
+ */
+export declare const CHIP_WIDTH = 44;
+/** Highest date the monthly grid offers. */
+export declare const MAX_DATE_OF_MONTH = 31;
+/** Sentinel chip value for "Last day of the month", which is not a date. */
+export declare const LAST_DAY_CHIP_VALUE = "LAST_DAY";
+/** Short day labels, indexed by JS day number (0 = Sunday). */
+export declare const DAY_LABELS: string[];
+/** Selecting all seven days is stored as DAILY rather than a full weekly set. */
+export declare const DAYS_IN_WEEK = 7;
+/**
+ * Chips for the weekly "Repeat on" picker. Only the first letter is shown, so
+ * each chip carries the full day name for screen readers — S, T and S repeat.
+ */
+export declare const DAY_CHIP_OPTIONS: ChipOption[];
+/**
+ * Chips for the monthly "Repeat on" grid — 1 to 31, then "Last day of the
+ * month" as an independent option rather than an alias for the 31st.
+ */
+export declare const DATE_CHIP_OPTIONS: ChipOption[];
+/**
+ * "1st", "22nd", "13th" — the 11/12/13 exception is why this is not a plain
+ * lookup on the last digit.
+ */
+export declare const ordinal: (value: number) => string;
+/**
+ * "Mon", "Mon and Tue", "Mon, Tue and Thu" — no Oxford comma, and always "and"
+ * rather than "&". Shared by the weekly day names and the monthly ordinals.
+ */
+export declare const joinList: (items: string[]) => string;
+/** Caption warning that a chosen date does not exist in every month. */
+export declare const getSkippedMonthCaption: (datesOfMonth: number[] | undefined) => string | null;
+/**
+ * Works out when a recurring campaign actually runs.
+ *
+ * Kept free of React so the schedule preview and the eventual publish payload
+ * can both read run dates from one place.
+ */
+export declare class ScheduleHelper {
+    private readonly recurrence;
+    constructor(recurrence: RecurrenceValue | undefined);
+    get frequency(): RECURRENCE_FREQUENCY;
+    get endMode(): RECURRENCE_END_MODE;
+    /** Days a weekly recurrence repeats on, as JS day indices. */
+    get daysOfWeek(): number[];
+    /** Dates a monthly recurrence repeats on (1–31). */
+    get datesOfMonth(): number[];
+    /** Whether a monthly recurrence also runs on the last day of every month. */
+    get lastDaySelected(): boolean;
+    /** A weekly recurrence cannot run until at least one day is picked. */
+    get isMissingWeeklyDays(): boolean;
+    /** A monthly recurrence needs at least one date, or the last-day option. */
+    get isMissingMonthlyDates(): boolean;
+    /** True when the current selection cannot produce any run dates. */
+    get isMissingRunDays(): boolean;
+    /**
+     * Advances a date by one day.
+     *
+     * Every frequency walks day by day so `isRunDay` decides what counts. Monthly
+     * cannot use `setMonth`: it rolls a 31st into the following month for shorter
+     * months (31 Jan -> 3 Mar), whereas a missing date must skip that month
+     * outright.
+     */
+    private addInterval;
+    /** Last calendar date of the month the given date falls in. */
+    private static lastDateOfMonth;
+    /** Whether a candidate date is one the campaign actually runs on. */
+    private isRunDay;
+    /**
+     * Next `limit` run dates from `startDate`, respecting the end rule.
+     *
+     * Returns fewer than `limit` when the recurrence ends first, which is what
+     * lets the preview stop honestly instead of inventing runs.
+     */
+    computeUpcomingRuns(startDate: Date | null | undefined, limit?: number): Date[];
+    /**
+     * The days a weekly recurrence runs on, in Monday-first display order rather
+     * than the Sunday-first order the chip values are indexed by.
+     *
+     * Mon–Fri exactly collapses to "weekday", Sat+Sun to "weekend". All seven is
+     * not handled here — that is normalised to DAILY when the day is selected.
+     */
+    private get weeklyDayPhrase();
+    private get monthlyDatePhrase();
+    /**
+     * The semibold phrase after "Repeats". Weekly and monthly name the days they
+     * run on; daily is a plain adverb.
+     */
+    private get frequencyLabel();
+    /** The text following the time, which differs per end mode. */
+    private get endClause();
+    /**
+     * Summary shown under the upcoming runs, split so the frequency and time can
+     * be rendered in semibold as the design shows:
+     * "Repeats **daily** at **10:00 AM** with no end date, you can cancel anytime."
+     */
+    buildSummary(runs: Date[]): RecurrenceSummary | null;
+}