@bikdotai/bik-component-library 0.0.865-beta.7 → 0.0.865-beta.8

package/dist/esm/components/datePicker/DatePickerWrapper.js

@@ -1,83 +1,85 @@
-import { jsxs as m, Fragment as w, jsx as o } from "react/jsx-runtime";
-import { useState as L, useRef as f } from "react";
-import k from "react-calendar";
-import { useOutside as b } from "../../hooks/useOutside.js";
-import A from "../../utils/DateUtils.js";
+import { jsxs as p, Fragment as A, jsx as n } from "react/jsx-runtime";
+import { format as P } from "date-fns";
+import { useState as R, useRef as y } from "react";
+import L from "react-calendar";
+import { useOutside as x } from "../../hooks/useOutside.js";
+import E from "../../utils/DateUtils.js";
 import { COLORS as r } from "../../constants/Theme.js";
-import P from "../../assets/icons/calendar.svg.js";
-import { BodyPrimary as R, BodySecondary as x } from "../TypographyStyle.js";
-import { DateBtn as E, PickerContainer as _ } from "./DatePickerWrapper.styled.js";
-import { DateButtonType as a } from "./model.js";
-const q = ({
-  val: t,
-  onChange: u,
-  calendarProps: D,
-  disabled: e,
-  pickerStyles: g,
-  nativeID: p,
-  maxDate: y,
-  minDate: d,
-  dateButtonType: n,
-  dateButtonStyles: S
+import O from "../../assets/icons/calendar.svg.js";
+import { BodyPrimary as _, BodySecondary as $ } from "../TypographyStyle.js";
+import { DateBtn as G, PickerContainer as j } from "./DatePickerWrapper.styled.js";
+import { DateButtonType as c } from "./model.js";
+const K = ({
+  val: e,
+  onChange: D,
+  calendarProps: g,
+  disabled: o,
+  pickerStyles: d,
+  nativeID: C,
+  maxDate: h,
+  minDate: w,
+  dateButtonType: i,
+  dateButtonStyles: k,
+  displayFormat: m,
+  placeholder: S
 }) => {
-  const [c, i] = L(!1), C = f(null), s = f(null);
-  b(s, () => {
-    i(!1);
+  const [f, s] = R(!1), b = y(null), l = y(null);
+  x(l, () => {
+    s(!1);
   });
-  const l = () => t ? Array.isArray(t) ? t?.[0]?.toString() && t?.[1]?.toString() ? `${new Date(t?.[0]?.toString()).toLocaleDateString()}-${new Date(
-    t?.[1]?.toString()
-  ).toLocaleDateString()}` : `${A.getPastDate(
-    /* @__PURE__ */ new Date(),
-    30
-  ).toLocaleDateString()}-${(/* @__PURE__ */ new Date()).toLocaleDateString()}` : new Date(t.toString()).toLocaleDateString() : (/* @__PURE__ */ new Date()).toLocaleDateString();
-  return /* @__PURE__ */ m(w, { children: [
-    /* @__PURE__ */ m(
-      E,
+  const t = (a) => m ? P(a, m) : a.toLocaleDateString(), u = () => e ? Array.isArray(e) ? e?.[0]?.toString() && e?.[1]?.toString() ? `${t(new Date(e[0].toString()))}-${t(
+    new Date(e[1].toString())
+  )}` : `${t(E.getPastDate(/* @__PURE__ */ new Date(), 30))}-${t(
+    /* @__PURE__ */ new Date()
+  )}` : t(new Date(e.toString())) : S ?? t(/* @__PURE__ */ new Date());
+  return /* @__PURE__ */ p(A, { children: [
+    /* @__PURE__ */ p(
+      G,
       {
-        id: p,
-        ref: C,
-        bgColor: e ? r.background.base : r.surface.standard,
+        id: C,
+        ref: b,
+        bgColor: o ? r.background.base : r.surface.standard,
         borderColor: r.stroke.primary,
-        onClick: () => i(!c),
-        dateButtonType: n || a.DEFAULT,
-        style: S,
+        onClick: () => s(!f),
+        dateButtonType: i || c.DEFAULT,
+        style: k,
         children: [
-          n === a.LARGE ? /* @__PURE__ */ o(
-            R,
+          i === c.LARGE ? /* @__PURE__ */ n(
+            _,
             {
               style: {
-                color: e ? r.content.inactive : r.content.primary,
+                color: o ? r.content.inactive : r.content.primary,
                 flex: 1
               },
-              children: l()
+              children: u()
             }
-          ) : /* @__PURE__ */ o(
-            x,
+          ) : /* @__PURE__ */ n(
+            $,
             {
               style: {
-                color: e ? r.content.inactive : r.content.primary,
+                color: o ? r.content.inactive : r.content.primary,
                 flex: 1
               },
-              children: l()
+              children: u()
             }
           ),
-          /* @__PURE__ */ o(
-            P,
+          /* @__PURE__ */ n(
+            O,
             {
-              width: n === a.LARGE ? 24 : 20,
-              height: n === a.LARGE ? 24 : 20,
-              color: e ? r.content.inactive : r.content.primary
+              width: i === c.LARGE ? 24 : 20,
+              height: i === c.LARGE ? 24 : 20,
+              color: o ? r.content.inactive : r.content.primary
             }
           )
         ]
       }
     ),
-    c && !e && /* @__PURE__ */ o(
-      _,
+    f && !o && /* @__PURE__ */ n(
+      j,
       {
-        ref: s,
+        ref: l,
         style: {
-          ...g
+          ...d
           // top: openUpwards ? 'auto' : 'calc(100% + 8px)',
           // bottom: openUpwards ? 'calc(100% + 8px)' : 'auto',
         },
@@ -86,18 +88,18 @@ const q = ({
         brandColor: r.background.brand,
         bgColor: r.surface.standard,
         borderColor: r.stroke.primary,
-        children: /* @__PURE__ */ o(
-          k,
+        children: /* @__PURE__ */ n(
+          L,
           {
             tileClassName: ["custom__tile"],
             className: ["custom__calendar"],
-            onChange: (h) => {
-              u(h), i(!1);
+            onChange: (a) => {
+              D(a), s(!1);
             },
-            maxDate: y,
-            minDate: d,
-            value: t ? Array.isArray(t) ? t.length === 2 ? [new Date(t[0]), new Date(t[1])] : null : new Date(t) : null,
-            ...D
+            maxDate: h,
+            minDate: w,
+            value: e ? Array.isArray(e) ? e.length === 2 ? [new Date(e[0]), new Date(e[1])] : null : new Date(e) : null,
+            ...g
           }
         )
       }
@@ -105,6 +107,6 @@ const q = ({
   ] });
 };
 export {
-  q as DatePickerWrapper
+  K as DatePickerWrapper
 };
 //# sourceMappingURL=DatePickerWrapper.js.map

package/dist/esm/components/datePicker/DatePickerWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePickerWrapper.js","sources":["../../../../src/components/datePicker/DatePickerWrapper.tsx"],"sourcesContent":["import React, { useRef, useState } from 'react';\nimport Calendar, { CalendarProps } from 'react-calendar';\nimport { CSSProperties } from 'styled-components';\nimport { useOutside } from '@src/hooks/useOutside';\nimport DateUtils from '@src/utils/DateUtils';\nimport { COLORS } from '@src/constants/Theme';\nimport CalendarIcon from '../../assets/icons/calendar.svg';\nimport { BodyPrimary, BodySecondary } from '../TypographyStyle';\nimport { DateBtn, PickerContainer } from './DatePickerWrapper.styled';\nimport { DateButtonType } from './model';\n\nexport const DatePickerWrapper: React.FC<{\n\tval?: Date | Date[];\n\tonChange: (val: Date | Date[]) => void;\n\tcalendarProps?: CalendarProps;\n\tpickerStyles?: CSSProperties;\n\tdateButtonStyles?: CSSProperties;\n\tnativeID?: string;\n\tdisabled?: boolean;\n\tmaxDate?: Date;\n\tminDate?: Date;\n\tdateButtonType?: DateButtonType;\n}> = ({\n\tval,\n\tonChange,\n\tcalendarProps,\n\tdisabled,\n\tpickerStyles,\n\tnativeID,\n\tmaxDate,\n\tminDate,\n\tdateButtonType,\n\tdateButtonStyles,\n}) => {\n\tconst [showPicker, setPicker] = useState(false);\n\t// const [openUpwards, setOpenUpwards] = useState(false);\n\tconst buttonRef = useRef<HTMLDivElement | null>(null);\n\tconst pickerRef = useRef<HTMLDivElement | null>(null);\n\n\tuseOutside(pickerRef, () => {\n\t\tsetPicker(false);\n\t});\n\n\t// useEffect(() => {\n\t// \tif (buttonRef.current && pickerRef.current) {\n\t// \t\tconst buttonRect = buttonRef.current.getBoundingClientRect();\n\t// \t\tconst pickerHeight = pickerRef.current.offsetHeight;\n\t// \t\tconst spaceBelow = window.innerHeight - buttonRect.bottom;\n\n\t// \t\t// If not enough space below, open upwards\n\t// \t\tsetOpenUpwards(spaceBelow < pickerHeight);\n\t// \t}\n\t// }, [showPicker]);\n\n\tconst getDisplayValue = () => {\n\t\treturn val\n\t\t\t? Array.isArray(val)\n\t\t\t\t? val?.[0]?.toString() && val?.[1]?.toString()\n\t\t\t\t\t? `${new Date(val?.[0]?.toString()).toLocaleDateString()}-${new Date(\n\t\t\t\t\t\t\tval?.[1]?.toString(),\n\t\t\t\t\t  ).toLocaleDateString()}`\n\t\t\t\t\t: `${DateUtils.getPastDate(\n\t\t\t\t\t\t\tnew Date(),\n\t\t\t\t\t\t\t30,\n\t\t\t\t\t  ).toLocaleDateString()}-${new Date().toLocaleDateString()}`\n\t\t\t\t: new Date(val.toString()).toLocaleDateString()\n\t\t\t: new Date().toLocaleDateString();\n\t};\n\treturn (\n\t\t<>\n\t\t\t<DateBtn\n\t\t\t\tid={nativeID}\n\t\t\t\tref={buttonRef}\n\t\t\t\tbgColor={disabled ? COLORS.background.base : COLORS.surface.standard}\n\t\t\t\tborderColor={COLORS.stroke.primary}\n\t\t\t\tonClick={() => setPicker(!showPicker)}\n\t\t\t\tdateButtonType={dateButtonType || DateButtonType.DEFAULT}\n\t\t\t\tstyle={dateButtonStyles}\n\t\t\t>\n\t\t\t\t{dateButtonType === DateButtonType.LARGE ? (\n\t\t\t\t\t<BodyPrimary\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tcolor: disabled\n\t\t\t\t\t\t\t\t? COLORS.content.inactive\n\t\t\t\t\t\t\t\t: COLORS.content.primary,\n\t\t\t\t\t\t\tflex: 1,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{getDisplayValue()}\n\t\t\t\t\t</BodyPrimary>\n\t\t\t\t) : (\n\t\t\t\t\t<BodySecondary\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tcolor: disabled\n\t\t\t\t\t\t\t\t? COLORS.content.inactive\n\t\t\t\t\t\t\t\t: COLORS.content.primary,\n\t\t\t\t\t\t\tflex: 1,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{getDisplayValue()}\n\t\t\t\t\t</BodySecondary>\n\t\t\t\t)}\n\t\t\t\t<CalendarIcon\n\t\t\t\t\twidth={dateButtonType === DateButtonType.LARGE ? 24 : 20}\n\t\t\t\t\theight={dateButtonType === DateButtonType.LARGE ? 24 : 20}\n\t\t\t\t\tcolor={disabled ? COLORS.content.inactive : COLORS.content.primary}\n\t\t\t\t/>\n\t\t\t</DateBtn>\n\t\t\t{showPicker && !disabled && (\n\t\t\t\t<PickerContainer\n\t\t\t\t\tref={\n\t\t\t\t\t\tpickerRef as\n\t\t\t\t\t\t\t| ((instance: HTMLDivElement | null) => void)\n\t\t\t\t\t\t\t| React.RefObject<HTMLDivElement>\n\t\t\t\t\t\t\t| null\n\t\t\t\t\t\t\t| undefined\n\t\t\t\t\t}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\t...pickerStyles,\n\t\t\t\t\t\t// top: openUpwards ? 'auto' : 'calc(100% + 8px)',\n\t\t\t\t\t\t// bottom: openUpwards ? 'calc(100% + 8px)' : 'auto',\n\t\t\t\t\t}}\n\t\t\t\t\tcontentPrimary={COLORS.content.primary}\n\t\t\t\t\tsubDued={COLORS.surface.subdued}\n\t\t\t\t\tbrandColor={COLORS.background.brand}\n\t\t\t\t\tbgColor={COLORS.surface.standard}\n\t\t\t\t\tborderColor={COLORS.stroke.primary}\n\t\t\t\t>\n\t\t\t\t\t<Calendar\n\t\t\t\t\t\ttileClassName={['custom__tile']}\n\t\t\t\t\t\tclassName={['custom__calendar']}\n\t\t\t\t\t\tonChange={(d) => {\n\t\t\t\t\t\t\tonChange(d);\n\t\t\t\t\t\t\tsetPicker(false);\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tmaxDate={maxDate}\n\t\t\t\t\t\tminDate={minDate}\n\t\t\t\t\t\tvalue={\n\t\t\t\t\t\t\tval\n\t\t\t\t\t\t\t\t? Array.isArray(val)\n\t\t\t\t\t\t\t\t\t? val.length === 2\n\t\t\t\t\t\t\t\t\t\t? [new Date(val[0]), new Date(val[1])]\n\t\t\t\t\t\t\t\t\t\t: null\n\t\t\t\t\t\t\t\t\t: new Date(val)\n\t\t\t\t\t\t\t\t: null\n\t\t\t\t\t\t}\n\t\t\t\t\t\t{...calendarProps}\n\t\t\t\t\t/>\n\t\t\t\t</PickerContainer>\n\t\t\t)}\n\t\t</>\n\t);\n};\n"],"names":["DatePickerWrapper","val","onChange","calendarProps","disabled","pickerStyles","nativeID","maxDate","minDate","dateButtonType","dateButtonStyles","showPicker","setPicker","useState","buttonRef","useRef","pickerRef","useOutside","getDisplayValue","DateUtils","jsxs","Fragment","DateBtn","COLORS","DateButtonType","jsx","BodyPrimary","BodySecondary","CalendarIcon","PickerContainer","Calendar","d"],"mappings":"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"}
+{"version":3,"file":"DatePickerWrapper.js","sources":["../../../../src/components/datePicker/DatePickerWrapper.tsx"],"sourcesContent":["import { format as formatDate } from 'date-fns';\nimport React, { useRef, useState } from 'react';\nimport Calendar, { CalendarProps } from 'react-calendar';\nimport { CSSProperties } from 'styled-components';\nimport { useOutside } from '@src/hooks/useOutside';\nimport DateUtils from '@src/utils/DateUtils';\nimport { COLORS } from '@src/constants/Theme';\nimport CalendarIcon from '../../assets/icons/calendar.svg';\nimport { BodyPrimary, BodySecondary } from '../TypographyStyle';\nimport { DateBtn, PickerContainer } from './DatePickerWrapper.styled';\nimport { DateButtonType } from './model';\n\nexport const DatePickerWrapper: React.FC<{\n\tval?: Date | Date[];\n\tonChange: (val: Date | Date[]) => void;\n\tcalendarProps?: CalendarProps;\n\tpickerStyles?: CSSProperties;\n\tdateButtonStyles?: CSSProperties;\n\tnativeID?: string;\n\tdisabled?: boolean;\n\tmaxDate?: Date;\n\tminDate?: Date;\n\tdateButtonType?: DateButtonType;\n\t/**\n\t * date-fns format for the button label, e.g. 'dd MMM yyyy' -> \"10 Aug 2026\".\n\t * Omit to keep the locale default (toLocaleDateString).\n\t */\n\tdisplayFormat?: string;\n\t/** Shown instead of a date when `val` is empty. */\n\tplaceholder?: string;\n}> = ({\n\tval,\n\tonChange,\n\tcalendarProps,\n\tdisabled,\n\tpickerStyles,\n\tnativeID,\n\tmaxDate,\n\tminDate,\n\tdateButtonType,\n\tdateButtonStyles,\n\tdisplayFormat,\n\tplaceholder,\n}) => {\n\tconst [showPicker, setPicker] = useState(false);\n\t// const [openUpwards, setOpenUpwards] = useState(false);\n\tconst buttonRef = useRef<HTMLDivElement | null>(null);\n\tconst pickerRef = useRef<HTMLDivElement | null>(null);\n\n\tuseOutside(pickerRef, () => {\n\t\tsetPicker(false);\n\t});\n\n\t// useEffect(() => {\n\t// \tif (buttonRef.current && pickerRef.current) {\n\t// \t\tconst buttonRect = buttonRef.current.getBoundingClientRect();\n\t// \t\tconst pickerHeight = pickerRef.current.offsetHeight;\n\t// \t\tconst spaceBelow = window.innerHeight - buttonRect.bottom;\n\n\t// \t\t// If not enough space below, open upwards\n\t// \t\tsetOpenUpwards(spaceBelow < pickerHeight);\n\t// \t}\n\t// }, [showPicker]);\n\n\t/** Honours `displayFormat` when given, else the locale default. */\n\tconst formatOne = (date: Date) =>\n\t\tdisplayFormat ? formatDate(date, displayFormat) : date.toLocaleDateString();\n\n\tconst getDisplayValue = () => {\n\t\tif (!val) {\n\t\t\treturn placeholder ?? formatOne(new Date());\n\t\t}\n\n\t\tif (Array.isArray(val)) {\n\t\t\treturn val?.[0]?.toString() && val?.[1]?.toString()\n\t\t\t\t? `${formatOne(new Date(val[0].toString()))}-${formatOne(\n\t\t\t\t\t\tnew Date(val[1].toString()),\n\t\t\t\t  )}`\n\t\t\t\t: `${formatOne(DateUtils.getPastDate(new Date(), 30))}-${formatOne(\n\t\t\t\t\t\tnew Date(),\n\t\t\t\t  )}`;\n\t\t}\n\n\t\treturn formatOne(new Date(val.toString()));\n\t};\n\treturn (\n\t\t<>\n\t\t\t<DateBtn\n\t\t\t\tid={nativeID}\n\t\t\t\tref={buttonRef}\n\t\t\t\tbgColor={disabled ? COLORS.background.base : COLORS.surface.standard}\n\t\t\t\tborderColor={COLORS.stroke.primary}\n\t\t\t\tonClick={() => setPicker(!showPicker)}\n\t\t\t\tdateButtonType={dateButtonType || DateButtonType.DEFAULT}\n\t\t\t\tstyle={dateButtonStyles}\n\t\t\t>\n\t\t\t\t{dateButtonType === DateButtonType.LARGE ? (\n\t\t\t\t\t<BodyPrimary\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tcolor: disabled\n\t\t\t\t\t\t\t\t? COLORS.content.inactive\n\t\t\t\t\t\t\t\t: COLORS.content.primary,\n\t\t\t\t\t\t\tflex: 1,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{getDisplayValue()}\n\t\t\t\t\t</BodyPrimary>\n\t\t\t\t) : (\n\t\t\t\t\t<BodySecondary\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tcolor: disabled\n\t\t\t\t\t\t\t\t? COLORS.content.inactive\n\t\t\t\t\t\t\t\t: COLORS.content.primary,\n\t\t\t\t\t\t\tflex: 1,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{getDisplayValue()}\n\t\t\t\t\t</BodySecondary>\n\t\t\t\t)}\n\t\t\t\t<CalendarIcon\n\t\t\t\t\twidth={dateButtonType === DateButtonType.LARGE ? 24 : 20}\n\t\t\t\t\theight={dateButtonType === DateButtonType.LARGE ? 24 : 20}\n\t\t\t\t\tcolor={disabled ? COLORS.content.inactive : COLORS.content.primary}\n\t\t\t\t/>\n\t\t\t</DateBtn>\n\t\t\t{showPicker && !disabled && (\n\t\t\t\t<PickerContainer\n\t\t\t\t\tref={\n\t\t\t\t\t\tpickerRef as\n\t\t\t\t\t\t\t| ((instance: HTMLDivElement | null) => void)\n\t\t\t\t\t\t\t| React.RefObject<HTMLDivElement>\n\t\t\t\t\t\t\t| null\n\t\t\t\t\t\t\t| undefined\n\t\t\t\t\t}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\t...pickerStyles,\n\t\t\t\t\t\t// top: openUpwards ? 'auto' : 'calc(100% + 8px)',\n\t\t\t\t\t\t// bottom: openUpwards ? 'calc(100% + 8px)' : 'auto',\n\t\t\t\t\t}}\n\t\t\t\t\tcontentPrimary={COLORS.content.primary}\n\t\t\t\t\tsubDued={COLORS.surface.subdued}\n\t\t\t\t\tbrandColor={COLORS.background.brand}\n\t\t\t\t\tbgColor={COLORS.surface.standard}\n\t\t\t\t\tborderColor={COLORS.stroke.primary}\n\t\t\t\t>\n\t\t\t\t\t<Calendar\n\t\t\t\t\t\ttileClassName={['custom__tile']}\n\t\t\t\t\t\tclassName={['custom__calendar']}\n\t\t\t\t\t\tonChange={(d) => {\n\t\t\t\t\t\t\tonChange(d);\n\t\t\t\t\t\t\tsetPicker(false);\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tmaxDate={maxDate}\n\t\t\t\t\t\tminDate={minDate}\n\t\t\t\t\t\tvalue={\n\t\t\t\t\t\t\tval\n\t\t\t\t\t\t\t\t? Array.isArray(val)\n\t\t\t\t\t\t\t\t\t? val.length === 2\n\t\t\t\t\t\t\t\t\t\t? [new Date(val[0]), new Date(val[1])]\n\t\t\t\t\t\t\t\t\t\t: null\n\t\t\t\t\t\t\t\t\t: new Date(val)\n\t\t\t\t\t\t\t\t: null\n\t\t\t\t\t\t}\n\t\t\t\t\t\t{...calendarProps}\n\t\t\t\t\t/>\n\t\t\t\t</PickerContainer>\n\t\t\t)}\n\t\t</>\n\t);\n};\n"],"names":["DatePickerWrapper","val","onChange","calendarProps","disabled","pickerStyles","nativeID","maxDate","minDate","dateButtonType","dateButtonStyles","displayFormat","placeholder","showPicker","setPicker","useState","buttonRef","useRef","pickerRef","useOutside","formatOne","date","formatDate","getDisplayValue","DateUtils","jsxs","Fragment","DateBtn","COLORS","DateButtonType","jsx","BodyPrimary","BodySecondary","CalendarIcon","PickerContainer","Calendar","d"],"mappings":"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"}

package/dist/esm/components/datePicker/index.d.ts

@@ -1,3 +1,4 @@
 export * from './DatePicker';
 export * from './DatePickerWrapper';
 export * from './TimePicker';
+export * from './model';

package/dist/esm/components/dropdown-button/DropdownButton.d.ts

@@ -17,10 +17,5 @@ export interface DropdownButtonProps {
         tooltipContent?: JSX.Element;
         placement?: Placement;
     };
-    /**
-     * Style overrides for the chevron/trigger button (button mode only),
-     * e.g. a tighter padding than the main button's.
-     */
-    chevronStyle?: React.CSSProperties;
 }
 export declare const DropdownButton: React.FC<DropdownButtonProps>;

package/dist/esm/components/dropdown-button/DropdownButton.js

@@ -6,7 +6,7 @@ import { IconButton as l } from "../icon-button/IconButton.js";
 import { Tooltip as x } from "../tooltips/Tooltip.js";
 import { Spinner as y } from "../spinner/Spinner.js";
 import { Button as b } from "../button/Button.js";
-const w = (o) => {
+const S = (o) => {
   const e = !!o.iconButtonProps, r = e ? o.iconButtonProps?.disabled : o.buttonProps?.disabled;
   if (e) {
     const { iconButtonProps: n, iconButtonTooltip: i } = o, d = /* @__PURE__ */ t(
@@ -115,8 +115,7 @@ const w = (o) => {
                   borderRadius: "0px",
                   borderTopRightRadius: "4px",
                   borderBottomRightRadius: "4px",
-                  ...o.buttonProps?.size === "xs" ? { border: "none", boxShadow: "none", borderRadius: "0px" } : {},
-                  ...o.chevronStyle ?? {}
+                  ...o.buttonProps?.size === "xs" ? { border: "none", boxShadow: "none", borderRadius: "0px" } : {}
                 }
               }
             )
@@ -127,6 +126,6 @@ const w = (o) => {
   );
 };
 export {
-  w as DropdownButton
+  S as DropdownButton
 };
 //# sourceMappingURL=DropdownButton.js.map

package/dist/esm/components/dropdown-button/DropdownButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownButton.js","sources":["../../../../src/components/dropdown-button/DropdownButton.tsx"],"sourcesContent":["import React from 'react';\nimport { DropdownPopover, DropdownProps } from '@src/components/dropdown';\nimport { Button } from '../button';\nimport { ButtonProps } from '../button/model';\nimport { SpinnerColorMap } from '../button/themes';\nimport { IconButton } from '../icon-button';\nimport { IconButtonProps } from '../icon-button/model';\nimport { Spinner } from '../spinner';\nimport { Placement, Tooltip } from '../tooltips';\nimport { DropdownButtonStyle, LoaderContainer } from './DropdownButton.style';\n\nexport interface DropdownButtonProps {\n\tdropdownProps: DropdownProps;\n\ticonProps: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\tbuttonProps?: ButtonProps;\n\ticonButtonProps?: IconButtonProps;\n\t/**\n\t * Optional tooltip shown only on the main icon button (icon mode),\n\t * not on the dropdown/chevron trigger.\n\t */\n\ticonButtonTooltip?: {\n\t\tbody?: string;\n\t\ttooltipContent?: JSX.Element;\n\t\tplacement?: Placement;\n\t};\n\t/**\n\t * Style overrides for the chevron/trigger button (button mode only),\n\t * e.g. a tighter padding than the main button's.\n\t */\n\tchevronStyle?: React.CSSProperties;\n}\n\nexport const DropdownButton: React.FC<DropdownButtonProps> = (props) => {\n\tconst isIconMode = !!props.iconButtonProps;\n\tconst disabled = isIconMode\n\t\t? props.iconButtonProps?.disabled\n\t\t: props.buttonProps?.disabled;\n\n\tif (isIconMode) {\n\t\tconst { iconButtonProps, iconButtonTooltip } = props;\n\t\tconst iconButton = (\n\t\t\t<IconButton\n\t\t\t\t{...iconButtonProps!}\n\t\t\t\tstyle={{\n\t\t\t\t\tborderRadius: '0px',\n\t\t\t\t\tborderTopLeftRadius: '4px',\n\t\t\t\t\tborderBottomLeftRadius: '4px',\n\t\t\t\t}}\n\t\t\t/>\n\t\t);\n\t\treturn (\n\t\t\t<DropdownButtonStyle\n\t\t\t\ttype={undefined}\n\t\t\t\tdisabled={disabled}\n\t\t\t\tisIconButton\n\t\t\t\ticonButtonType={iconButtonProps?.iconButtonType ?? 'primary'}\n\t\t\t\ticonButtonSize={iconButtonProps?.size ?? 'default'}\n\t\t\t>\n\t\t\t\t{iconButtonTooltip ? (\n\t\t\t\t\t<Tooltip\n\t\t\t\t\t\tbody={iconButtonTooltip.body}\n\t\t\t\t\t\ttooltipContent={iconButtonTooltip.tooltipContent}\n\t\t\t\t\t\tplacement={iconButtonTooltip.placement}\n\t\t\t\t\t>\n\t\t\t\t\t\t{iconButton}\n\t\t\t\t\t</Tooltip>\n\t\t\t\t) : (\n\t\t\t\t\ticonButton\n\t\t\t\t)}\n\t\t\t\t<div className=\"dd-button-divider\"></div>\n\t\t\t\t<div style={{ display: 'flex', alignItems: 'center' }}>\n\t\t\t\t\t<DropdownPopover {...props.dropdownProps} isChildLoading={false}>\n\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\tIcon={props.iconProps}\n\t\t\t\t\t\t\ticonButtonType={iconButtonProps?.iconButtonType ?? 'primary'}\n\t\t\t\t\t\t\tsize={iconButtonProps?.size}\n\t\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\tborderRadius: '0px',\n\t\t\t\t\t\t\t\tborderTopRightRadius: '4px',\n\t\t\t\t\t\t\t\tborderBottomRightRadius: '4px',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</DropdownPopover>\n\t\t\t\t</div>\n\t\t\t</DropdownButtonStyle>\n\t\t);\n\t}\n\n\tconst {\n\t\tonClick,\n\t\tLeadingIcon,\n\t\tLeadingIconStyles,\n\t\tIconComponent,\n\t\tTrailingIcon,\n\t\t...childButtonProps\n\t} = props.buttonProps!;\n\n\treturn (\n\t\t<DropdownButtonStyle\n\t\t\ttype={props.buttonProps!.buttonType}\n\t\t\tdisabled={props.buttonProps!.disabled}\n\t\t\tsize={props.buttonProps!.size}\n\t\t>\n\t\t\t{props.buttonProps?.isLoading && (\n\t\t\t\t<LoaderContainer type={props.buttonProps.buttonType}>\n\t\t\t\t\t<Spinner\n\t\t\t\t\t\tclassName=\"spinner\"\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\tcolor={SpinnerColorMap(\n\t\t\t\t\t\t\tprops.buttonProps.buttonType || 'primary',\n\t\t\t\t\t\t\tprops.buttonProps.inverse,\n\t\t\t\t\t\t)}\n\t\t\t\t\t/>\n\t\t\t\t</LoaderContainer>\n\t\t\t)}\n\n\t\t\t<Button\n\t\t\t\t{...props.buttonProps!}\n\t\t\t\tisLoading={false}\n\t\t\t\tstyle={{\n\t\t\t\t\tborderRadius: '0px',\n\t\t\t\t\tborderTopLeftRadius: '4px',\n\t\t\t\t\tborderBottomLeftRadius: '4px',\n\t\t\t\t\tborderRight: '0px',\n\t\t\t\t\t...(props.buttonProps?.size === 'xs'\n\t\t\t\t\t\t? { border: 'none', boxShadow: 'none', borderRadius: '0px' }\n\t\t\t\t\t\t: {}),\n\t\t\t\t}}\n\t\t\t/>\n\t\t\t<div className=\"dd-button-divider\"></div>\n\t\t\t<DropdownPopover\n\t\t\t\t{...props.dropdownProps}\n\t\t\t\tisChildLoading={props.buttonProps?.isLoading}\n\t\t\t>\n\t\t\t\t<Button\n\t\t\t\t\t{...childButtonProps}\n\t\t\t\t\tisLoading={false}\n\t\t\t\t\tbuttonText={''}\n\t\t\t\t\tTrailingIcon={props.iconProps}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tborderRadius: '0px',\n\t\t\t\t\t\tborderTopRightRadius: '4px',\n\t\t\t\t\t\tborderBottomRightRadius: '4px',\n\t\t\t\t\t\t...(props.buttonProps?.size === 'xs'\n\t\t\t\t\t\t\t? { border: 'none', boxShadow: 'none', borderRadius: '0px' }\n\t\t\t\t\t\t\t: {}),\n\t\t\t\t\t\t...(props.chevronStyle ?? {}),\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t</DropdownPopover>\n\t\t</DropdownButtonStyle>\n\t);\n};\n"],"names":["DropdownButton","props","isIconMode","disabled","iconButtonProps","iconButtonTooltip","iconButton","jsx","IconButton","jsxs","DropdownButtonStyle","Tooltip","DropdownPopover","onClick","LeadingIcon","LeadingIconStyles","IconComponent","TrailingIcon","childButtonProps","LoaderContainer","Spinner","SpinnerColorMap","Button"],"mappings":"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"}
+{"version":3,"file":"DropdownButton.js","sources":["../../../../src/components/dropdown-button/DropdownButton.tsx"],"sourcesContent":["import React from 'react';\nimport { DropdownPopover, DropdownProps } from '@src/components/dropdown';\nimport { Button } from '../button';\nimport { ButtonProps } from '../button/model';\nimport { SpinnerColorMap } from '../button/themes';\nimport { IconButton } from '../icon-button';\nimport { IconButtonProps } from '../icon-button/model';\nimport { Spinner } from '../spinner';\nimport { Placement, Tooltip } from '../tooltips';\nimport { DropdownButtonStyle, LoaderContainer } from './DropdownButton.style';\n\nexport interface DropdownButtonProps {\n\tdropdownProps: DropdownProps;\n\ticonProps: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\tbuttonProps?: ButtonProps;\n\ticonButtonProps?: IconButtonProps;\n\t/**\n\t * Optional tooltip shown only on the main icon button (icon mode),\n\t * not on the dropdown/chevron trigger.\n\t */\n\ticonButtonTooltip?: {\n\t\tbody?: string;\n\t\ttooltipContent?: JSX.Element;\n\t\tplacement?: Placement;\n\t};\n}\n\nexport const DropdownButton: React.FC<DropdownButtonProps> = (props) => {\n\tconst isIconMode = !!props.iconButtonProps;\n\tconst disabled = isIconMode\n\t\t? props.iconButtonProps?.disabled\n\t\t: props.buttonProps?.disabled;\n\n\tif (isIconMode) {\n\t\tconst { iconButtonProps, iconButtonTooltip } = props;\n\t\tconst iconButton = (\n\t\t\t<IconButton\n\t\t\t\t{...iconButtonProps!}\n\t\t\t\tstyle={{\n\t\t\t\t\tborderRadius: '0px',\n\t\t\t\t\tborderTopLeftRadius: '4px',\n\t\t\t\t\tborderBottomLeftRadius: '4px',\n\t\t\t\t}}\n\t\t\t/>\n\t\t);\n\t\treturn (\n\t\t\t<DropdownButtonStyle\n\t\t\t\ttype={undefined}\n\t\t\t\tdisabled={disabled}\n\t\t\t\tisIconButton\n\t\t\t\ticonButtonType={iconButtonProps?.iconButtonType ?? 'primary'}\n\t\t\t\ticonButtonSize={iconButtonProps?.size ?? 'default'}\n\t\t\t>\n\t\t\t\t{iconButtonTooltip ? (\n\t\t\t\t\t<Tooltip\n\t\t\t\t\t\tbody={iconButtonTooltip.body}\n\t\t\t\t\t\ttooltipContent={iconButtonTooltip.tooltipContent}\n\t\t\t\t\t\tplacement={iconButtonTooltip.placement}\n\t\t\t\t\t>\n\t\t\t\t\t\t{iconButton}\n\t\t\t\t\t</Tooltip>\n\t\t\t\t) : (\n\t\t\t\t\ticonButton\n\t\t\t\t)}\n\t\t\t\t<div className=\"dd-button-divider\"></div>\n\t\t\t\t<div style={{ display: 'flex', alignItems: 'center' }}>\n\t\t\t\t\t<DropdownPopover {...props.dropdownProps} isChildLoading={false}>\n\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\tIcon={props.iconProps}\n\t\t\t\t\t\t\ticonButtonType={iconButtonProps?.iconButtonType ?? 'primary'}\n\t\t\t\t\t\t\tsize={iconButtonProps?.size}\n\t\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\tborderRadius: '0px',\n\t\t\t\t\t\t\t\tborderTopRightRadius: '4px',\n\t\t\t\t\t\t\t\tborderBottomRightRadius: '4px',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</DropdownPopover>\n\t\t\t\t</div>\n\t\t\t</DropdownButtonStyle>\n\t\t);\n\t}\n\n\tconst {\n\t\tonClick,\n\t\tLeadingIcon,\n\t\tLeadingIconStyles,\n\t\tIconComponent,\n\t\tTrailingIcon,\n\t\t...childButtonProps\n\t} = props.buttonProps!;\n\n\treturn (\n\t\t<DropdownButtonStyle\n\t\t\ttype={props.buttonProps!.buttonType}\n\t\t\tdisabled={props.buttonProps!.disabled}\n\t\t\tsize={props.buttonProps!.size}\n\t\t>\n\t\t\t{props.buttonProps?.isLoading && (\n\t\t\t\t<LoaderContainer type={props.buttonProps.buttonType}>\n\t\t\t\t\t<Spinner\n\t\t\t\t\t\tclassName=\"spinner\"\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\tcolor={SpinnerColorMap(\n\t\t\t\t\t\t\tprops.buttonProps.buttonType || 'primary',\n\t\t\t\t\t\t\tprops.buttonProps.inverse,\n\t\t\t\t\t\t)}\n\t\t\t\t\t/>\n\t\t\t\t</LoaderContainer>\n\t\t\t)}\n\n\t\t\t<Button\n\t\t\t\t{...props.buttonProps!}\n\t\t\t\tisLoading={false}\n\t\t\t\tstyle={{\n\t\t\t\t\tborderRadius: '0px',\n\t\t\t\t\tborderTopLeftRadius: '4px',\n\t\t\t\t\tborderBottomLeftRadius: '4px',\n\t\t\t\t\tborderRight: '0px',\n\t\t\t\t\t...(props.buttonProps?.size === 'xs'\n\t\t\t\t\t\t? { border: 'none', boxShadow: 'none', borderRadius: '0px' }\n\t\t\t\t\t\t: {}),\n\t\t\t\t}}\n\t\t\t/>\n\t\t\t<div className=\"dd-button-divider\"></div>\n\t\t\t<DropdownPopover\n\t\t\t\t{...props.dropdownProps}\n\t\t\t\tisChildLoading={props.buttonProps?.isLoading}\n\t\t\t>\n\t\t\t\t<Button\n\t\t\t\t\t{...childButtonProps}\n\t\t\t\t\tisLoading={false}\n\t\t\t\t\tbuttonText={''}\n\t\t\t\t\tTrailingIcon={props.iconProps}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tborderRadius: '0px',\n\t\t\t\t\t\tborderTopRightRadius: '4px',\n\t\t\t\t\t\tborderBottomRightRadius: '4px',\n\t\t\t\t\t\t...(props.buttonProps?.size === 'xs'\n\t\t\t\t\t\t\t? { border: 'none', boxShadow: 'none', borderRadius: '0px' }\n\t\t\t\t\t\t\t: {}),\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t</DropdownPopover>\n\t\t</DropdownButtonStyle>\n\t);\n};\n"],"names":["DropdownButton","props","isIconMode","disabled","iconButtonProps","iconButtonTooltip","iconButton","jsx","IconButton","jsxs","DropdownButtonStyle","Tooltip","DropdownPopover","onClick","LeadingIcon","LeadingIconStyles","IconComponent","TrailingIcon","childButtonProps","LoaderContainer","Spinner","SpinnerColorMap","Button"],"mappings":"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"}

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

@@ -0,0 +1,22 @@
+import { default as React } from 'react';
+export interface RefreshSegmentToggleProps {
+    value: boolean;
+    onChange: (value: boolean) => void;
+    /**
+     * False when the audience cannot be recomputed — a static uploaded list, for
+     * instance. The switch reads off and goes inert rather than disappearing, so
+     * the merchant can see the option exists and is unavailable.
+     */
+    canRefresh?: boolean;
+    title?: string;
+    caption?: string;
+    'data-test'?: string;
+}
+/**
+ * "Refresh segment before each run".
+ *
+ * Kept separate from the pickers because it is not part of the schedule — it
+ * decides how the audience is resolved at send time, and a screen may want the
+ * schedule without offering this at all.
+ */
+export declare const RefreshSegmentToggle: React.FC<RefreshSegmentToggleProps>;

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

@@ -0,0 +1,31 @@
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { COLORS as t } from "../../constants/Theme.js";
+import { TitleSmall as h, BodyCaption as l } from "../TypographyStyle.js";
+import { RefreshSegmentRow as f, RefreshSegmentCopy as d } from "./ScheduleBuilder.styled.js";
+import { Switch as p } from "../switch/Switch.js";
+const b = ({
+  value: n,
+  onChange: m,
+  canRefresh: r = !0,
+  title: s = "Refresh segment before each run",
+  caption: i = "Recomputes who is in the segment before each run",
+  "data-test": a = "refresh-segment-before-each-run"
+}) => /* @__PURE__ */ o(f, { children: [
+  /* @__PURE__ */ o(d, { children: [
+    /* @__PURE__ */ e(h, { color: t.content.primary, children: s }),
+    /* @__PURE__ */ e(l, { color: t.content.secondary, children: i })
+  ] }),
+  /* @__PURE__ */ e(
+    p,
+    {
+      value: r && n,
+      disabled: !r,
+      onValueChange: async (c) => m(c),
+      "data-test": a
+    }
+  )
+] });
+export {
+  b as RefreshSegmentToggle
+};
+//# sourceMappingURL=RefreshSegmentToggle.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RefreshSegmentToggle.js","sources":["../../../../src/components/schedule-builder/RefreshSegmentToggle.tsx"],"sourcesContent":["import React from 'react';\nimport { COLORS } from '../../constants/Theme';\nimport { Switch } from '../switch';\nimport { BodyCaption, TitleSmall } from '../TypographyStyle';\nimport {\n\tRefreshSegmentCopy,\n\tRefreshSegmentRow,\n} from './ScheduleBuilder.styled';\n\nexport interface RefreshSegmentToggleProps {\n\tvalue: boolean;\n\tonChange: (value: boolean) => void;\n\t/**\n\t * False when the audience cannot be recomputed — a static uploaded list, for\n\t * instance. The switch reads off and goes inert rather than disappearing, so\n\t * the merchant can see the option exists and is unavailable.\n\t */\n\tcanRefresh?: boolean;\n\ttitle?: string;\n\tcaption?: string;\n\t'data-test'?: string;\n}\n\n/**\n * \"Refresh segment before each run\".\n *\n * Kept separate from the pickers because it is not part of the schedule — it\n * decides how the audience is resolved at send time, and a screen may want the\n * schedule without offering this at all.\n */\nexport const RefreshSegmentToggle: React.FC<RefreshSegmentToggleProps> = ({\n\tvalue,\n\tonChange,\n\tcanRefresh = true,\n\ttitle = 'Refresh segment before each run',\n\tcaption = 'Recomputes who is in the segment before each run',\n\t'data-test': dataTest = 'refresh-segment-before-each-run',\n}) => (\n\t<RefreshSegmentRow>\n\t\t<RefreshSegmentCopy>\n\t\t\t<TitleSmall color={COLORS.content.primary}>{title}</TitleSmall>\n\t\t\t<BodyCaption color={COLORS.content.secondary}>{caption}</BodyCaption>\n\t\t</RefreshSegmentCopy>\n\t\t<Switch\n\t\t\tvalue={canRefresh && value}\n\t\t\tdisabled={!canRefresh}\n\t\t\t// Switch's contract is async; this toggle is synchronous, so adapt rather\n\t\t\t// than push the Promise into every caller.\n\t\t\tonValueChange={async (next: boolean) => onChange(next)}\n\t\t\tdata-test={dataTest}\n\t\t/>\n\t</RefreshSegmentRow>\n);\n"],"names":["RefreshSegmentToggle","value","onChange","canRefresh","title","caption","dataTest","RefreshSegmentRow","jsxs","RefreshSegmentCopy","jsx","TitleSmall","COLORS","BodyCaption","Switch","next"],"mappings":";;;;;AA8BO,MAAMA,IAA4D,CAAC;AAAA,EACzE,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,OAAAC,IAAQ;AAAA,EACR,SAAAC,IAAU;AAAA,EACV,aAAaC,IAAW;AACzB,wBACEC,GAAA,EACA,UAAA;AAAA,EAAA,gBAAAC,EAACC,GAAA,EACA,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EAAW,OAAOC,EAAO,QAAQ,SAAU,UAAAR,GAAM;AAAA,sBACjDS,GAAA,EAAY,OAAOD,EAAO,QAAQ,WAAY,UAAAP,EAAA,CAAQ;AAAA,EAAA,GACxD;AAAA,EACA,gBAAAK;AAAA,IAACI;AAAA,IAAA;AAAA,MACA,OAAOX,KAAcF;AAAA,MACrB,UAAU,CAACE;AAAA,MAGX,eAAe,OAAOY,MAAkBb,EAASa,CAAI;AAAA,MACrD,aAAWT;AAAA,IAAA;AAAA,EAAA;AACZ,EAAA,CACD;"}

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

@@ -0,0 +1,79 @@
+import { default as React } from 'react';
+import { RecurrenceValue, SEND_MODE } from './model';
+import { SendModeItem } from './SendModeSelector';
+export interface ScheduleBuilderProps {
+    /** Which mode is selected. Drives what is rendered below the cards. */
+    sendMode?: SEND_MODE;
+    onSendModeChange: (mode: SEND_MODE) => void;
+    /**
+     * Modes on offer. Pass a subset to drop one — a screen that cannot send
+     * immediately should not show a "Send now" card it will reject.
+     */
+    sendModeOptions?: SendModeItem<SEND_MODE>[];
+    /** The date the schedule starts from. For RECURRING it is the first run. */
+    date?: Date;
+    onDateChange: (date: Date) => void;
+    /**
+     * Date the runs preview counts from, when it should differ from `date`.
+     *
+     * `date` follows the picker and changes the instant a day is clicked, which is
+     * usually too eager for the preview: a host validating the time separately does
+     * not want runs listed at a time that has not passed validation. Pass the
+     * validated value here and leave it undefined to hide the preview until then.
+     * Defaults to `date`.
+     */
+    previewStartDate?: Date;
+    /** 12-hour clock, "1"–"12". Empty while nothing is chosen. */
+    hours: string;
+    /** "0"–"59". Empty while nothing is chosen. */
+    minutes: string;
+    isAm: boolean;
+    /** Fires only for a parseable time, so partial typing does not clear state. */
+    onTimeChange: (time: {
+        hours: string;
+        minutes: string;
+    }) => void;
+    onMeridiemChange: (isAm: boolean) => void;
+    onTimeInvalidBlur?: () => void;
+    /** Shown under the time field. The caller owns validation. */
+    timeErrorMessage?: string;
+    /** Earliest selectable date, normally now plus whatever lead time applies. */
+    minDate?: Date;
+    /** The recurrence. Only read when sendMode is RECURRING. */
+    recurrence?: RecurrenceValue;
+    /**
+     * Receives only the fields that changed, so a caller holding this in redux can
+     * dispatch one action per field instead of replacing the whole object.
+     */
+    onRecurrenceChange: (patch: Partial<RecurrenceValue>) => void;
+    /** How many runs the preview lists. */
+    previewCount?: number;
+    /** Hide the runs preview, for a compact form that shows the summary elsewhere. */
+    hideUpcomingRuns?: boolean;
+    /** Greys out every control — an in-flight campaign that can no longer be moved. */
+    disabled?: boolean;
+    /** Menu width for the frequency dropdown; defaults to its button's width. */
+    frequencyMenuWidth?: string;
+    /**
+     * Rendered between the send-mode cards and the fields. For anything a host
+     * screen wants inline that is not part of the schedule itself — a
+     * best-time-to-send card, a segment-refresh switch, a warning banner.
+     */
+    children?: React.ReactNode;
+    'data-test'?: string;
+}
+/**
+ * Picks when something sends — once, at a set time, or on a repeating schedule.
+ *
+ * Controlled and free of any app state: values in, change handlers out. It owns
+ * the send-mode cards, the date and time, and — for a repeating schedule — the
+ * frequency, what it repeats on, when it ends, and a preview of the next runs.
+ *
+ * Deliberately domain-neutral. Nothing about campaigns, audiences or sending
+ * lives here, so anything that needs a schedule can use it. Host-specific extras
+ * go through `children`, which renders below the mode cards.
+ *
+ * Every part is also exported on its own, for a screen that needs the end picker
+ * or the runs preview without the rest.
+ */
+export declare const ScheduleBuilder: React.FC<ScheduleBuilderProps>;

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

@@ -0,0 +1,103 @@
+import { jsxs as m, jsx as e, Fragment as w } from "react/jsx-runtime";
+import { useMemo as s } from "react";
+import { SEND_MODE as o } from "./model.js";
+import { Column as u, SectionDivider as x } from "./ScheduleBuilder.styled.js";
+import { ScheduleEndPicker as y } from "./ScheduleEndPicker.js";
+import { ScheduleFrequencyPicker as G } from "./ScheduleFrequencyPicker.js";
+import { ScheduleHelper as L, UPCOMING_RUNS_PREVIEW_COUNT as W } from "./ScheduleHelper.js";
+import { SendModeSelector as j } from "./SendModeSelector.js";
+import { StartDateTimePicker as H } from "./StartDateTimePicker.js";
+import { UpcomingRunsPreview as M } from "./UpcomingRunsPreview.js";
+const q = [
+  { value: o.SEND_NOW, label: "Send now" },
+  { value: o.SCHEDULE, label: "Schedule" },
+  { value: o.RECURRING, label: "Set as recurring" }
+], $ = ({
+  sendMode: r,
+  onSendModeChange: h,
+  sendModeOptions: E = q,
+  date: a,
+  onDateChange: f,
+  previewStartDate: c,
+  hours: N,
+  minutes: g,
+  isAm: D,
+  onTimeChange: R,
+  onMeridiemChange: U,
+  onTimeInvalidBlur: _,
+  timeErrorMessage: b,
+  minDate: v,
+  recurrence: t,
+  onRecurrenceChange: d,
+  previewCount: p = W,
+  hideUpcomingRuns: O = !1,
+  disabled: C = !1,
+  frequencyMenuWidth: P,
+  children: F,
+  "data-test": I = "schedule-builder"
+}) => {
+  const l = r === o.RECURRING, T = !!r && r !== o.SEND_NOW, i = s(() => new L(t), [t]), S = c === void 0 ? a : c, n = s(
+    () => l ? i.computeUpcomingRuns(S, p) : [],
+    [i, S, p, l]
+  ), k = s(
+    () => i.buildSummary(n),
+    [i, n]
+  );
+  return /* @__PURE__ */ m(u, { gap: 16, "data-test": I, children: [
+    /* @__PURE__ */ e(
+      j,
+      {
+        options: E,
+        value: r,
+        onChange: h,
+        disabled: C,
+        "data-test": "schedule-builder-send-mode"
+      }
+    ),
+    F,
+    T && /* @__PURE__ */ m(w, { children: [
+      /* @__PURE__ */ e(x, {}),
+      /* @__PURE__ */ m(u, { gap: 12, children: [
+        /* @__PURE__ */ e(
+          H,
+          {
+            date: a,
+            onDateChange: f,
+            hours: N,
+            minutes: g,
+            isAm: D,
+            onTimeChange: R,
+            onMeridiemChange: U,
+            onTimeInvalidBlur: _,
+            timeErrorMessage: b,
+            dateLabel: l ? "Start date" : "Date",
+            minDate: v
+          }
+        ),
+        l && /* @__PURE__ */ m(u, { gap: 12, "data-test": "schedule-builder-recurrence", children: [
+          /* @__PURE__ */ e(
+            G,
+            {
+              value: t ?? {},
+              onChange: d,
+              frequencyMenuWidth: P
+            }
+          ),
+          /* @__PURE__ */ e(
+            y,
+            {
+              value: t ?? {},
+              onChange: d,
+              minEndDate: a
+            }
+          ),
+          !O && /* @__PURE__ */ e(M, { runs: n, summary: k })
+        ] })
+      ] })
+    ] })
+  ] });
+};
+export {
+  $ as ScheduleBuilder
+};
+//# sourceMappingURL=ScheduleBuilder.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScheduleBuilder.js","sources":["../../../../src/components/schedule-builder/ScheduleBuilder.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { RecurrenceValue, SEND_MODE } from './model';\nimport { Column, SectionDivider } from './ScheduleBuilder.styled';\nimport { ScheduleEndPicker } from './ScheduleEndPicker';\nimport { ScheduleFrequencyPicker } from './ScheduleFrequencyPicker';\nimport { ScheduleHelper, UPCOMING_RUNS_PREVIEW_COUNT } from './ScheduleHelper';\nimport { SendModeItem, SendModeSelector } from './SendModeSelector';\nimport { StartDateTimePicker } from './StartDateTimePicker';\nimport { UpcomingRunsPreview } from './UpcomingRunsPreview';\n\n/** The modes offered when the caller does not name its own. */\nconst DEFAULT_SEND_MODE_OPTIONS: SendModeItem<SEND_MODE>[] = [\n\t{ value: SEND_MODE.SEND_NOW, label: 'Send now' },\n\t{ value: SEND_MODE.SCHEDULE, label: 'Schedule' },\n\t{ value: SEND_MODE.RECURRING, label: 'Set as recurring' },\n];\n\nexport interface ScheduleBuilderProps {\n\t/** Which mode is selected. Drives what is rendered below the cards. */\n\tsendMode?: SEND_MODE;\n\tonSendModeChange: (mode: SEND_MODE) => void;\n\t/**\n\t * Modes on offer. Pass a subset to drop one — a screen that cannot send\n\t * immediately should not show a \"Send now\" card it will reject.\n\t */\n\tsendModeOptions?: SendModeItem<SEND_MODE>[];\n\n\t/** The date the schedule starts from. For RECURRING it is the first run. */\n\tdate?: Date;\n\tonDateChange: (date: Date) => void;\n\t/**\n\t * Date the runs preview counts from, when it should differ from `date`.\n\t *\n\t * `date` follows the picker and changes the instant a day is clicked, which is\n\t * usually too eager for the preview: a host validating the time separately does\n\t * not want runs listed at a time that has not passed validation. Pass the\n\t * validated value here and leave it undefined to hide the preview until then.\n\t * Defaults to `date`.\n\t */\n\tpreviewStartDate?: Date;\n\n\t/** 12-hour clock, \"1\"–\"12\". Empty while nothing is chosen. */\n\thours: string;\n\t/** \"0\"–\"59\". Empty while nothing is chosen. */\n\tminutes: string;\n\tisAm: boolean;\n\t/** Fires only for a parseable time, so partial typing does not clear state. */\n\tonTimeChange: (time: { hours: string; minutes: string }) => void;\n\tonMeridiemChange: (isAm: boolean) => void;\n\tonTimeInvalidBlur?: () => void;\n\t/** Shown under the time field. The caller owns validation. */\n\ttimeErrorMessage?: string;\n\t/** Earliest selectable date, normally now plus whatever lead time applies. */\n\tminDate?: Date;\n\n\t/** The recurrence. Only read when sendMode is RECURRING. */\n\trecurrence?: RecurrenceValue;\n\t/**\n\t * Receives only the fields that changed, so a caller holding this in redux can\n\t * dispatch one action per field instead of replacing the whole object.\n\t */\n\tonRecurrenceChange: (patch: Partial<RecurrenceValue>) => void;\n\n\t/** How many runs the preview lists. */\n\tpreviewCount?: number;\n\t/** Hide the runs preview, for a compact form that shows the summary elsewhere. */\n\thideUpcomingRuns?: boolean;\n\t/** Greys out every control — an in-flight campaign that can no longer be moved. */\n\tdisabled?: boolean;\n\t/** Menu width for the frequency dropdown; defaults to its button's width. */\n\tfrequencyMenuWidth?: string;\n\t/**\n\t * Rendered between the send-mode cards and the fields. For anything a host\n\t * screen wants inline that is not part of the schedule itself — a\n\t * best-time-to-send card, a segment-refresh switch, a warning banner.\n\t */\n\tchildren?: React.ReactNode;\n\t'data-test'?: string;\n}\n\n/**\n * Picks when something sends — once, at a set time, or on a repeating schedule.\n *\n * Controlled and free of any app state: values in, change handlers out. It owns\n * the send-mode cards, the date and time, and — for a repeating schedule — the\n * frequency, what it repeats on, when it ends, and a preview of the next runs.\n *\n * Deliberately domain-neutral. Nothing about campaigns, audiences or sending\n * lives here, so anything that needs a schedule can use it. Host-specific extras\n * go through `children`, which renders below the mode cards.\n *\n * Every part is also exported on its own, for a screen that needs the end picker\n * or the runs preview without the rest.\n */\nexport const ScheduleBuilder: React.FC<ScheduleBuilderProps> = ({\n\tsendMode,\n\tonSendModeChange,\n\tsendModeOptions = DEFAULT_SEND_MODE_OPTIONS,\n\tdate,\n\tonDateChange,\n\tpreviewStartDate,\n\thours,\n\tminutes,\n\tisAm,\n\tonTimeChange,\n\tonMeridiemChange,\n\tonTimeInvalidBlur,\n\ttimeErrorMessage,\n\tminDate,\n\trecurrence,\n\tonRecurrenceChange,\n\tpreviewCount = UPCOMING_RUNS_PREVIEW_COUNT,\n\thideUpcomingRuns = false,\n\tdisabled = false,\n\tfrequencyMenuWidth,\n\tchildren,\n\t'data-test': dataTest = 'schedule-builder',\n}) => {\n\tconst isRecurring = sendMode === SEND_MODE.RECURRING;\n\t// Send-now has no date to pick; the other modes do.\n\tconst showFields = !!sendMode && sendMode !== SEND_MODE.SEND_NOW;\n\n\tconst helper = useMemo(() => new ScheduleHelper(recurrence), [recurrence]);\n\n\t/**\n\t * Runs are previewed from the chosen date — or from `previewStartDate` when the\n\t * host validates separately — so the list stays empty rather than counting from\n\t * today and then jumping once a real date lands.\n\t */\n\tconst previewFrom = previewStartDate === undefined ? date : previewStartDate;\n\n\tconst upcomingRuns = useMemo(\n\t\t() =>\n\t\t\tisRecurring ? helper.computeUpcomingRuns(previewFrom, previewCount) : [],\n\t\t[helper, previewFrom, previewCount, isRecurring],\n\t);\n\n\tconst summary = useMemo(\n\t\t() => helper.buildSummary(upcomingRuns),\n\t\t[helper, upcomingRuns],\n\t);\n\n\treturn (\n\t\t<Column gap={16} data-test={dataTest}>\n\t\t\t<SendModeSelector\n\t\t\t\toptions={sendModeOptions}\n\t\t\t\tvalue={sendMode}\n\t\t\t\tonChange={onSendModeChange}\n\t\t\t\tdisabled={disabled}\n\t\t\t\tdata-test=\"schedule-builder-send-mode\"\n\t\t\t/>\n\t\t\t{children}\n\t\t\t{showFields && (\n\t\t\t\t<>\n\t\t\t\t\t<SectionDivider />\n\t\t\t\t\t<Column gap={12}>\n\t\t\t\t\t\t<StartDateTimePicker\n\t\t\t\t\t\t\tdate={date}\n\t\t\t\t\t\t\tonDateChange={onDateChange}\n\t\t\t\t\t\t\thours={hours}\n\t\t\t\t\t\t\tminutes={minutes}\n\t\t\t\t\t\t\tisAm={isAm}\n\t\t\t\t\t\t\tonTimeChange={onTimeChange}\n\t\t\t\t\t\t\tonMeridiemChange={onMeridiemChange}\n\t\t\t\t\t\t\tonTimeInvalidBlur={onTimeInvalidBlur}\n\t\t\t\t\t\t\ttimeErrorMessage={timeErrorMessage}\n\t\t\t\t\t\t\t// \"Start date\" only reads right when runs follow it.\n\t\t\t\t\t\t\tdateLabel={isRecurring ? 'Start date' : 'Date'}\n\t\t\t\t\t\t\tminDate={minDate}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{isRecurring && (\n\t\t\t\t\t\t\t<Column gap={12} data-test=\"schedule-builder-recurrence\">\n\t\t\t\t\t\t\t\t<ScheduleFrequencyPicker\n\t\t\t\t\t\t\t\t\tvalue={recurrence ?? {}}\n\t\t\t\t\t\t\t\t\tonChange={onRecurrenceChange}\n\t\t\t\t\t\t\t\t\tfrequencyMenuWidth={frequencyMenuWidth}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<ScheduleEndPicker\n\t\t\t\t\t\t\t\t\tvalue={recurrence ?? {}}\n\t\t\t\t\t\t\t\t\tonChange={onRecurrenceChange}\n\t\t\t\t\t\t\t\t\tminEndDate={date}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t{!hideUpcomingRuns && (\n\t\t\t\t\t\t\t\t\t<UpcomingRunsPreview runs={upcomingRuns} summary={summary} />\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</Column>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</Column>\n\t\t\t\t</>\n\t\t\t)}\n\t\t</Column>\n\t);\n};\n"],"names":["DEFAULT_SEND_MODE_OPTIONS","SEND_MODE","ScheduleBuilder","sendMode","onSendModeChange","sendModeOptions","date","onDateChange","previewStartDate","hours","minutes","isAm","onTimeChange","onMeridiemChange","onTimeInvalidBlur","timeErrorMessage","minDate","recurrence","onRecurrenceChange","previewCount","UPCOMING_RUNS_PREVIEW_COUNT","hideUpcomingRuns","disabled","frequencyMenuWidth","children","dataTest","isRecurring","showFields","helper","useMemo","ScheduleHelper","previewFrom","upcomingRuns","summary","jsxs","Column","jsx","SendModeSelector","Fragment","SectionDivider","StartDateTimePicker","ScheduleFrequencyPicker","ScheduleEndPicker","UpcomingRunsPreview"],"mappings":";;;;;;;;;;AAWA,MAAMA,IAAuD;AAAA,EAC5D,EAAE,OAAOC,EAAU,UAAU,OAAO,WAAA;AAAA,EACpC,EAAE,OAAOA,EAAU,UAAU,OAAO,WAAA;AAAA,EACpC,EAAE,OAAOA,EAAU,WAAW,OAAO,mBAAA;AACtC,GA+EaC,IAAkD,CAAC;AAAA,EAC/D,UAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,iBAAAC,IAAkBL;AAAA,EAClB,MAAAM;AAAA,EACA,cAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,MAAAC;AAAA,EACA,cAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,SAAAC;AAAA,EACA,YAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,cAAAC,IAAeC;AAAA,EACf,kBAAAC,IAAmB;AAAA,EACnB,UAAAC,IAAW;AAAA,EACX,oBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,aAAaC,IAAW;AACzB,MAAM;AACL,QAAMC,IAAcvB,MAAaF,EAAU,WAErC0B,IAAa,CAAC,CAACxB,KAAYA,MAAaF,EAAU,UAElD2B,IAASC,EAAQ,MAAM,IAAIC,EAAeb,CAAU,GAAG,CAACA,CAAU,CAAC,GAOnEc,IAAcvB,MAAqB,SAAYF,IAAOE,GAEtDwB,IAAeH;AAAA,IACpB,MACCH,IAAcE,EAAO,oBAAoBG,GAAaZ,CAAY,IAAI,CAAA;AAAA,IACvE,CAACS,GAAQG,GAAaZ,GAAcO,CAAW;AAAA,EAAA,GAG1CO,IAAUJ;AAAA,IACf,MAAMD,EAAO,aAAaI,CAAY;AAAA,IACtC,CAACJ,GAAQI,CAAY;AAAA,EAAA;AAGtB,SACC,gBAAAE,EAACC,GAAA,EAAO,KAAK,IAAI,aAAWV,GAC3B,UAAA;AAAA,IAAA,gBAAAW;AAAA,MAACC;AAAA,MAAA;AAAA,QACA,SAAShC;AAAA,QACT,OAAOF;AAAA,QACP,UAAUC;AAAA,QACV,UAAAkB;AAAA,QACA,aAAU;AAAA,MAAA;AAAA,IAAA;AAAA,IAEVE;AAAA,IACAG,KACA,gBAAAO,EAAAI,GAAA,EACC,UAAA;AAAA,MAAA,gBAAAF,EAACG,GAAA,EAAe;AAAA,MAChB,gBAAAL,EAACC,GAAA,EAAO,KAAK,IACZ,UAAA;AAAA,QAAA,gBAAAC;AAAA,UAACI;AAAA,UAAA;AAAA,YACA,MAAAlC;AAAA,YACA,cAAAC;AAAA,YACA,OAAAE;AAAA,YACA,SAAAC;AAAA,YACA,MAAAC;AAAA,YACA,cAAAC;AAAA,YACA,kBAAAC;AAAA,YACA,mBAAAC;AAAA,YACA,kBAAAC;AAAA,YAEA,WAAWW,IAAc,eAAe;AAAA,YACxC,SAAAV;AAAA,UAAA;AAAA,QAAA;AAAA,QAEAU,KACA,gBAAAQ,EAACC,GAAA,EAAO,KAAK,IAAI,aAAU,+BAC1B,UAAA;AAAA,UAAA,gBAAAC;AAAA,YAACK;AAAA,YAAA;AAAA,cACA,OAAOxB,KAAc,CAAA;AAAA,cACrB,UAAUC;AAAA,cACV,oBAAAK;AAAA,YAAA;AAAA,UAAA;AAAA,UAED,gBAAAa;AAAA,YAACM;AAAA,YAAA;AAAA,cACA,OAAOzB,KAAc,CAAA;AAAA,cACrB,UAAUC;AAAA,cACV,YAAYZ;AAAA,YAAA;AAAA,UAAA;AAAA,UAEZ,CAACe,KACD,gBAAAe,EAACO,GAAA,EAAoB,MAAMX,GAAc,SAAAC,EAAA,CAAkB;AAAA,QAAA,EAAA,CAE7D;AAAA,MAAA,EAAA,CAEF;AAAA,IAAA,EAAA,CACD;AAAA,EAAA,GAEF;AAEF;"}