@epilot/spark-ui 0.19.0 → 0.20.1

package/dist/components/day-of-week-picker.cjs

@@ -7,34 +7,13 @@ let react_jsx_runtime = require("react/jsx-runtime");
 let cnfast = require("cnfast");
 //#region src/components/day-of-week-picker.tsx
 const WEEK_DAYS = [
-	{
-		value: "monday",
-		short: "Mon"
-	},
-	{
-		value: "tuesday",
-		short: "Tue"
-	},
-	{
-		value: "wednesday",
-		short: "Wed"
-	},
-	{
-		value: "thursday",
-		short: "Thu"
-	},
-	{
-		value: "friday",
-		short: "Fri"
-	},
-	{
-		value: "saturday",
-		short: "Sat"
-	},
-	{
-		value: "sunday",
-		short: "Sun"
-	}
+	"monday",
+	"tuesday",
+	"wednesday",
+	"thursday",
+	"friday",
+	"saturday",
+	"sunday"
 ];
 const WEEKDAYS_ONLY = [
 	"monday",
@@ -44,8 +23,9 @@ const WEEKDAYS_ONLY = [
 	"friday"
 ];
 const WEEKEND_ONLY = ["saturday", "sunday"];
-const ALL_DAYS = WEEK_DAYS.map((d) => d.value);
-const DayOfWeekPicker = react.forwardRef(({ className, disabled, onValueChange, showPresets = false, value, dayLabels, dayAriaLabels, presetLabels, presetsAriaLabel = "Day presets", daysAriaLabel = "Days of the week" }, ref) => {
+const ALL_DAYS = [...WEEK_DAYS];
+const DayOfWeekPicker = react.forwardRef(function DayOfWeekPicker(props, ref) {
+	const { className, disabled, onValueChange, showPresets = false, value, dayLabels, dayAriaLabels, daysAriaLabel } = props;
 	const selected = react.useMemo(() => new Set(value), [value]);
 	const toggle = (day) => {
 		const next = new Set(selected);
@@ -60,47 +40,47 @@ const DayOfWeekPicker = react.forwardRef(({ className, disabled, onValueChange,
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		ref,
 		className: (0, cnfast.cn)("flex flex-col gap-2", className),
-		children: [showPresets && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		children: [showPresets && props.showPresets ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			role: "group",
-			"aria-label": presetsAriaLabel,
+			"aria-label": props.presetsAriaLabel,
 			className: "flex flex-wrap gap-1.5",
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PresetButton, {
 					active: matches(WEEKDAYS_ONLY),
 					disabled,
 					onClick: () => setPreset(WEEKDAYS_ONLY),
-					children: presetLabels?.weekdays ?? "Weekdays"
+					children: props.presetLabels.weekdays
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PresetButton, {
 					active: matches(WEEKEND_ONLY),
 					disabled,
 					onClick: () => setPreset(WEEKEND_ONLY),
-					children: presetLabels?.weekend ?? "Weekend"
+					children: props.presetLabels.weekend
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PresetButton, {
 					active: matches(ALL_DAYS),
 					disabled,
 					onClick: () => setPreset(ALL_DAYS),
-					children: presetLabels?.everyDay ?? "Every day"
+					children: props.presetLabels.everyDay
 				})
 			]
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			role: "group",
 			"aria-label": daysAriaLabel,
 			className: "flex gap-1",
 			children: WEEK_DAYS.map((day) => {
-				const checked = selected.has(day.value);
-				const label = dayLabels?.[day.value] ?? day.short;
+				const checked = selected.has(day);
+				const label = dayLabels[day];
 				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 					type: "button",
 					role: "checkbox",
 					"aria-checked": checked,
-					"aria-label": dayAriaLabels?.[day.value] ?? label,
+					"aria-label": dayAriaLabels?.[day] ?? label,
 					disabled,
-					onClick: () => toggle(day.value),
+					onClick: () => toggle(day),
 					className: (0, cnfast.cn)("touch-target inline-flex h-9 flex-1 items-center justify-center rounded-full text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 motion-reduce:transition-none", checked ? "bg-base-accent-solid text-accent-contrast hover:bg-spark-9" : "bg-base-gray-soft text-gray-light hover:bg-gray-a4"),
 					children: label
-				}, day.value);
+				}, day);
 			})
 		})]
 	});

package/dist/components/day-of-week-picker.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"day-of-week-picker.cjs","names":["React"],"sources":["../../src/components/day-of-week-picker.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '../utils/cn'\n\nexport type WeekDay =\n  | 'monday'\n  | 'tuesday'\n  | 'wednesday'\n  | 'thursday'\n  | 'friday'\n  | 'saturday'\n  | 'sunday'\n\nexport const WEEK_DAYS: ReadonlyArray<{ value: WeekDay; short: string }> = [\n  { value: 'monday', short: 'Mon' },\n  { value: 'tuesday', short: 'Tue' },\n  { value: 'wednesday', short: 'Wed' },\n  { value: 'thursday', short: 'Thu' },\n  { value: 'friday', short: 'Fri' },\n  { value: 'saturday', short: 'Sat' },\n  { value: 'sunday', short: 'Sun' },\n]\n\nconst WEEKDAYS_ONLY: WeekDay[] = [\n  'monday',\n  'tuesday',\n  'wednesday',\n  'thursday',\n  'friday',\n]\nconst WEEKEND_ONLY: WeekDay[] = ['saturday', 'sunday']\nconst ALL_DAYS: WeekDay[] = WEEK_DAYS.map((d) => d.value)\n\ninterface DayOfWeekPickerProps {\n  value: WeekDay[]\n  onValueChange: (next: WeekDay[]) => void\n  disabled?: boolean\n  /** Show \"Weekdays / Weekend / Every day\" preset shortcuts above the chips. */\n  showPresets?: boolean\n  className?: string\n  /** Short labels (e.g. \"Mon\", \"Tue\") shown on each day chip. Defaults to English. */\n  dayLabels?: Partial<Record<WeekDay, string>>\n  /**\n   * Full accessible names per day (e.g. \"Monday\"). Used as each chip's\n   * `aria-label`. Falls back to the visible short label when omitted.\n   */\n  dayAriaLabels?: Partial<Record<WeekDay, string>>\n  /** Preset button labels. Each defaults to its English name. */\n  presetLabels?: {\n    weekdays?: React.ReactNode\n    weekend?: React.ReactNode\n    everyDay?: React.ReactNode\n  }\n  /** Accessible label for the preset row. Defaults to `\"Day presets\"`. */\n  presetsAriaLabel?: string\n  /** Accessible label for the day chip group. Defaults to `\"Days of the week\"`. */\n  daysAriaLabel?: string\n}\n\nconst DayOfWeekPicker = React.forwardRef<HTMLDivElement, DayOfWeekPickerProps>(\n  (\n    {\n      className,\n      disabled,\n      onValueChange,\n      showPresets = false,\n      value,\n      dayLabels,\n      dayAriaLabels,\n      presetLabels,\n      presetsAriaLabel = 'Day presets',\n      daysAriaLabel = 'Days of the week',\n    },\n    ref,\n  ) => {\n    const selected = React.useMemo(() => new Set(value), [value])\n\n    const toggle = (day: WeekDay) => {\n      const next = new Set(selected)\n      if (next.has(day)) {\n        next.delete(day)\n      } else {\n        next.add(day)\n      }\n      onValueChange(ALL_DAYS.filter((d) => next.has(d)))\n    }\n\n    const matches = (preset: WeekDay[]) =>\n      selected.size === preset.length && preset.every((d) => selected.has(d))\n\n    const setPreset = (preset: WeekDay[]) => {\n      onValueChange(preset)\n    }\n\n    return (\n      <div ref={ref} className={cn('flex flex-col gap-2', className)}>\n        {showPresets && (\n          <div\n            role=\"group\"\n            aria-label={presetsAriaLabel}\n            className=\"flex flex-wrap gap-1.5\"\n          >\n            <PresetButton\n              active={matches(WEEKDAYS_ONLY)}\n              disabled={disabled}\n              onClick={() => setPreset(WEEKDAYS_ONLY)}\n            >\n              {presetLabels?.weekdays ?? 'Weekdays'}\n            </PresetButton>\n            <PresetButton\n              active={matches(WEEKEND_ONLY)}\n              disabled={disabled}\n              onClick={() => setPreset(WEEKEND_ONLY)}\n            >\n              {presetLabels?.weekend ?? 'Weekend'}\n            </PresetButton>\n            <PresetButton\n              active={matches(ALL_DAYS)}\n              disabled={disabled}\n              onClick={() => setPreset(ALL_DAYS)}\n            >\n              {presetLabels?.everyDay ?? 'Every day'}\n            </PresetButton>\n          </div>\n        )}\n        <div role=\"group\" aria-label={daysAriaLabel} className=\"flex gap-1\">\n          {WEEK_DAYS.map((day) => {\n            const checked = selected.has(day.value)\n            const label = dayLabels?.[day.value] ?? day.short\n            const ariaLabel = dayAriaLabels?.[day.value] ?? label\n            return (\n              <button\n                key={day.value}\n                type=\"button\"\n                role=\"checkbox\"\n                aria-checked={checked}\n                aria-label={ariaLabel}\n                disabled={disabled}\n                onClick={() => toggle(day.value)}\n                className={cn(\n                  'touch-target inline-flex h-9 flex-1 items-center justify-center rounded-full text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 motion-reduce:transition-none',\n                  checked\n                    ? 'bg-base-accent-solid text-accent-contrast hover:bg-spark-9'\n                    : 'bg-base-gray-soft text-gray-light hover:bg-gray-a4',\n                )}\n              >\n                {label}\n              </button>\n            )\n          })}\n        </div>\n      </div>\n    )\n  },\n)\n\nDayOfWeekPicker.displayName = 'DayOfWeekPicker'\n\ninterface PresetButtonProps {\n  active: boolean\n  disabled?: boolean\n  onClick: () => void\n  children: React.ReactNode\n}\n\nfunction PresetButton({\n  active,\n  children,\n  disabled,\n  onClick,\n}: PresetButtonProps) {\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      disabled={disabled}\n      aria-pressed={active}\n      className={cn(\n        'touch-target inline-flex h-7 items-center justify-center rounded-full px-3 text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 motion-reduce:transition-none',\n        active\n          ? 'bg-base-accent-soft text-accent'\n          : 'bg-transparent text-gray-light hover:bg-gray-a3',\n      )}\n    >\n      {children}\n    </button>\n  )\n}\n\nexport { DayOfWeekPicker }\n"],"mappings":";;;;;;;;AAYA,MAAa,YAA8D;CACzE;EAAE,OAAO;EAAU,OAAO;CAAM;CAChC;EAAE,OAAO;EAAW,OAAO;CAAM;CACjC;EAAE,OAAO;EAAa,OAAO;CAAM;CACnC;EAAE,OAAO;EAAY,OAAO;CAAM;CAClC;EAAE,OAAO;EAAU,OAAO;CAAM;CAChC;EAAE,OAAO;EAAY,OAAO;CAAM;CAClC;EAAE,OAAO;EAAU,OAAO;CAAM;AAClC;AAEA,MAAM,gBAA2B;CAC/B;CACA;CACA;CACA;CACA;AACF;AACA,MAAM,eAA0B,CAAC,YAAY,QAAQ;AACrD,MAAM,WAAsB,UAAU,KAAK,MAAM,EAAE,KAAK;AA4BxD,MAAM,kBAAkBA,MAAM,YAE1B,EACE,WACA,UACA,eACA,cAAc,OACd,OACA,WACA,eACA,cACA,mBAAmB,eACnB,gBAAgB,sBAElB,QACG;CACH,MAAM,WAAWA,MAAM,cAAc,IAAI,IAAI,KAAK,GAAG,CAAC,KAAK,CAAC;CAE5D,MAAM,UAAU,QAAiB;EAC/B,MAAM,OAAO,IAAI,IAAI,QAAQ;EAC7B,IAAI,KAAK,IAAI,GAAG,GACd,KAAK,OAAO,GAAG;OAEf,KAAK,IAAI,GAAG;EAEd,cAAc,SAAS,QAAQ,MAAM,KAAK,IAAI,CAAC,CAAC,CAAC;CACnD;CAEA,MAAM,WAAW,WACf,SAAS,SAAS,OAAO,UAAU,OAAO,OAAO,MAAM,SAAS,IAAI,CAAC,CAAC;CAExE,MAAM,aAAa,WAAsB;EACvC,cAAc,MAAM;CACtB;CAEA,OACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAU;EAAK,YAAA,GAAA,OAAA,IAAc,uBAAuB,SAAS;YAA7D,CACG,eACC,iBAAA,GAAA,kBAAA,MAAC,OAAD;GACE,MAAK;GACL,cAAY;GACZ,WAAU;aAHZ;IAKE,iBAAA,GAAA,kBAAA,KAAC,cAAD;KACE,QAAQ,QAAQ,aAAa;KACnB;KACV,eAAe,UAAU,aAAa;eAErC,cAAc,YAAY;IACf,CAAA;IACd,iBAAA,GAAA,kBAAA,KAAC,cAAD;KACE,QAAQ,QAAQ,YAAY;KAClB;KACV,eAAe,UAAU,YAAY;eAEpC,cAAc,WAAW;IACd,CAAA;IACd,iBAAA,GAAA,kBAAA,KAAC,cAAD;KACE,QAAQ,QAAQ,QAAQ;KACd;KACV,eAAe,UAAU,QAAQ;eAEhC,cAAc,YAAY;IACf,CAAA;GACX;MAEP,iBAAA,GAAA,kBAAA,KAAC,OAAD;GAAK,MAAK;GAAQ,cAAY;GAAe,WAAU;aACpD,UAAU,KAAK,QAAQ;IACtB,MAAM,UAAU,SAAS,IAAI,IAAI,KAAK;IACtC,MAAM,QAAQ,YAAY,IAAI,UAAU,IAAI;IAE5C,OACE,iBAAA,GAAA,kBAAA,KAAC,UAAD;KAEE,MAAK;KACL,MAAK;KACL,gBAAc;KACd,cAPc,gBAAgB,IAAI,UAAU;KAQlC;KACV,eAAe,OAAO,IAAI,KAAK;KAC/B,YAAA,GAAA,OAAA,IACE,kRACA,UACI,+DACA,oDACN;eAEC;IACK,GAfD,IAAI,KAeH;GAEZ,CAAC;EACE,CAAA,CACF;;AAET,CACF;AAEA,gBAAgB,cAAc;AAS9B,SAAS,aAAa,EACpB,QACA,UACA,UACA,WACoB;CACpB,OACE,iBAAA,GAAA,kBAAA,KAAC,UAAD;EACE,MAAK;EACI;EACC;EACV,gBAAc;EACd,YAAA,GAAA,OAAA,IACE,gRACA,SACI,oCACA,iDACN;EAEC;CACK,CAAA;AAEZ"}
+{"version":3,"file":"day-of-week-picker.cjs","names":["React"],"sources":["../../src/components/day-of-week-picker.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '../utils/cn'\n\nexport type WeekDay =\n  | 'monday'\n  | 'tuesday'\n  | 'wednesday'\n  | 'thursday'\n  | 'friday'\n  | 'saturday'\n  | 'sunday'\n\nexport const WEEK_DAYS: readonly WeekDay[] = [\n  'monday',\n  'tuesday',\n  'wednesday',\n  'thursday',\n  'friday',\n  'saturday',\n  'sunday',\n] as const\n\nconst WEEKDAYS_ONLY: WeekDay[] = [\n  'monday',\n  'tuesday',\n  'wednesday',\n  'thursday',\n  'friday',\n]\nconst WEEKEND_ONLY: WeekDay[] = ['saturday', 'sunday']\nconst ALL_DAYS: WeekDay[] = [...WEEK_DAYS]\n\ntype DayOfWeekPickerBaseProps = {\n  value: WeekDay[]\n  onValueChange: (next: WeekDay[]) => void\n  disabled?: boolean\n  className?: string\n  dayLabels: Record<WeekDay, string>\n  dayAriaLabels?: Partial<Record<WeekDay, string>>\n  daysAriaLabel: string\n}\n\ntype DayOfWeekPickerWithPresets = DayOfWeekPickerBaseProps & {\n  showPresets: true\n  presetLabels: {\n    weekdays: React.ReactNode\n    weekend: React.ReactNode\n    everyDay: React.ReactNode\n  }\n  presetsAriaLabel: string\n}\n\ntype DayOfWeekPickerWithoutPresets = DayOfWeekPickerBaseProps & {\n  showPresets?: false\n  presetLabels?: never\n  presetsAriaLabel?: never\n}\n\ntype DayOfWeekPickerProps =\n  | DayOfWeekPickerWithPresets\n  | DayOfWeekPickerWithoutPresets\n\nconst DayOfWeekPicker = React.forwardRef<HTMLDivElement, DayOfWeekPickerProps>(\n  function DayOfWeekPicker(props, ref) {\n    const {\n      className,\n      disabled,\n      onValueChange,\n      showPresets = false,\n      value,\n      dayLabels,\n      dayAriaLabels,\n      daysAriaLabel,\n    } = props\n\n    const selected = React.useMemo(() => new Set(value), [value])\n\n    const toggle = (day: WeekDay) => {\n      const next = new Set(selected)\n      if (next.has(day)) {\n        next.delete(day)\n      } else {\n        next.add(day)\n      }\n      onValueChange(ALL_DAYS.filter((d) => next.has(d)))\n    }\n\n    const matches = (preset: WeekDay[]) =>\n      selected.size === preset.length && preset.every((d) => selected.has(d))\n\n    const setPreset = (preset: WeekDay[]) => {\n      onValueChange(preset)\n    }\n\n    return (\n      <div ref={ref} className={cn('flex flex-col gap-2', className)}>\n        {showPresets && props.showPresets ? (\n          <div\n            role=\"group\"\n            aria-label={props.presetsAriaLabel}\n            className=\"flex flex-wrap gap-1.5\"\n          >\n            <PresetButton\n              active={matches(WEEKDAYS_ONLY)}\n              disabled={disabled}\n              onClick={() => setPreset(WEEKDAYS_ONLY)}\n            >\n              {props.presetLabels.weekdays}\n            </PresetButton>\n            <PresetButton\n              active={matches(WEEKEND_ONLY)}\n              disabled={disabled}\n              onClick={() => setPreset(WEEKEND_ONLY)}\n            >\n              {props.presetLabels.weekend}\n            </PresetButton>\n            <PresetButton\n              active={matches(ALL_DAYS)}\n              disabled={disabled}\n              onClick={() => setPreset(ALL_DAYS)}\n            >\n              {props.presetLabels.everyDay}\n            </PresetButton>\n          </div>\n        ) : null}\n        <div role=\"group\" aria-label={daysAriaLabel} className=\"flex gap-1\">\n          {WEEK_DAYS.map((day) => {\n            const checked = selected.has(day)\n            const label = dayLabels[day]\n            const ariaLabel = dayAriaLabels?.[day] ?? label\n            return (\n              <button\n                key={day}\n                type=\"button\"\n                role=\"checkbox\"\n                aria-checked={checked}\n                aria-label={ariaLabel}\n                disabled={disabled}\n                onClick={() => toggle(day)}\n                className={cn(\n                  'touch-target inline-flex h-9 flex-1 items-center justify-center rounded-full text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 motion-reduce:transition-none',\n                  checked\n                    ? 'bg-base-accent-solid text-accent-contrast hover:bg-spark-9'\n                    : 'bg-base-gray-soft text-gray-light hover:bg-gray-a4',\n                )}\n              >\n                {label}\n              </button>\n            )\n          })}\n        </div>\n      </div>\n    )\n  },\n)\n\nDayOfWeekPicker.displayName = 'DayOfWeekPicker'\n\ninterface PresetButtonProps {\n  active: boolean\n  disabled?: boolean\n  onClick: () => void\n  children: React.ReactNode\n}\n\nfunction PresetButton({\n  active,\n  children,\n  disabled,\n  onClick,\n}: PresetButtonProps) {\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      disabled={disabled}\n      aria-pressed={active}\n      className={cn(\n        'touch-target inline-flex h-7 items-center justify-center rounded-full px-3 text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 motion-reduce:transition-none',\n        active\n          ? 'bg-base-accent-soft text-accent'\n          : 'bg-transparent text-gray-light hover:bg-gray-a3',\n      )}\n    >\n      {children}\n    </button>\n  )\n}\n\nexport { DayOfWeekPicker }\n"],"mappings":";;;;;;;;AAYA,MAAa,YAAgC;CAC3C;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,MAAM,gBAA2B;CAC/B;CACA;CACA;CACA;CACA;AACF;AACA,MAAM,eAA0B,CAAC,YAAY,QAAQ;AACrD,MAAM,WAAsB,CAAC,GAAG,SAAS;AAgCzC,MAAM,kBAAkBA,MAAM,WAC5B,SAAS,gBAAgB,OAAO,KAAK;CACnC,MAAM,EACJ,WACA,UACA,eACA,cAAc,OACd,OACA,WACA,eACA,kBACE;CAEJ,MAAM,WAAWA,MAAM,cAAc,IAAI,IAAI,KAAK,GAAG,CAAC,KAAK,CAAC;CAE5D,MAAM,UAAU,QAAiB;EAC/B,MAAM,OAAO,IAAI,IAAI,QAAQ;EAC7B,IAAI,KAAK,IAAI,GAAG,GACd,KAAK,OAAO,GAAG;OAEf,KAAK,IAAI,GAAG;EAEd,cAAc,SAAS,QAAQ,MAAM,KAAK,IAAI,CAAC,CAAC,CAAC;CACnD;CAEA,MAAM,WAAW,WACf,SAAS,SAAS,OAAO,UAAU,OAAO,OAAO,MAAM,SAAS,IAAI,CAAC,CAAC;CAExE,MAAM,aAAa,WAAsB;EACvC,cAAc,MAAM;CACtB;CAEA,OACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAU;EAAK,YAAA,GAAA,OAAA,IAAc,uBAAuB,SAAS;YAA7D,CACG,eAAe,MAAM,cACpB,iBAAA,GAAA,kBAAA,MAAC,OAAD;GACE,MAAK;GACL,cAAY,MAAM;GAClB,WAAU;aAHZ;IAKE,iBAAA,GAAA,kBAAA,KAAC,cAAD;KACE,QAAQ,QAAQ,aAAa;KACnB;KACV,eAAe,UAAU,aAAa;eAErC,MAAM,aAAa;IACR,CAAA;IACd,iBAAA,GAAA,kBAAA,KAAC,cAAD;KACE,QAAQ,QAAQ,YAAY;KAClB;KACV,eAAe,UAAU,YAAY;eAEpC,MAAM,aAAa;IACR,CAAA;IACd,iBAAA,GAAA,kBAAA,KAAC,cAAD;KACE,QAAQ,QAAQ,QAAQ;KACd;KACV,eAAe,UAAU,QAAQ;eAEhC,MAAM,aAAa;IACR,CAAA;GACX;OACH,MACJ,iBAAA,GAAA,kBAAA,KAAC,OAAD;GAAK,MAAK;GAAQ,cAAY;GAAe,WAAU;aACpD,UAAU,KAAK,QAAQ;IACtB,MAAM,UAAU,SAAS,IAAI,GAAG;IAChC,MAAM,QAAQ,UAAU;IAExB,OACE,iBAAA,GAAA,kBAAA,KAAC,UAAD;KAEE,MAAK;KACL,MAAK;KACL,gBAAc;KACd,cAPc,gBAAgB,QAAQ;KAQ5B;KACV,eAAe,OAAO,GAAG;KACzB,YAAA,GAAA,OAAA,IACE,kRACA,UACI,+DACA,oDACN;eAEC;IACK,GAfD,GAeC;GAEZ,CAAC;EACE,CAAA,CACF;;AAET,CACF;AAEA,gBAAgB,cAAc;AAS9B,SAAS,aAAa,EACpB,QACA,UACA,UACA,WACoB;CACpB,OACE,iBAAA,GAAA,kBAAA,KAAC,UAAD;EACE,MAAK;EACI;EACC;EACV,gBAAc;EACd,YAAA,GAAA,OAAA,IACE,gRACA,SACI,oCACA,iDACN;EAEC;CACK,CAAA;AAEZ"}

package/dist/components/day-of-week-picker.d.cts

@@ -4,35 +4,31 @@ import * as React$1 from "react";
 
 //#region src/components/day-of-week-picker.d.ts
 type WeekDay = 'monday' | 'tuesday' | 'wednesday' | 'thursday' | 'friday' | 'saturday' | 'sunday';
-declare const WEEK_DAYS: ReadonlyArray<{
-  value: WeekDay;
-  short: string;
-}>;
-interface DayOfWeekPickerProps {
+declare const WEEK_DAYS: readonly WeekDay[];
+type DayOfWeekPickerBaseProps = {
   value: WeekDay[];
   onValueChange: (next: WeekDay[]) => void;
   disabled?: boolean;
-  /** Show "Weekdays / Weekend / Every day" preset shortcuts above the chips. */
-  showPresets?: boolean;
   className?: string;
-  /** Short labels (e.g. "Mon", "Tue") shown on each day chip. Defaults to English. */
-  dayLabels?: Partial<Record<WeekDay, string>>;
-  /**
-   * Full accessible names per day (e.g. "Monday"). Used as each chip's
-   * `aria-label`. Falls back to the visible short label when omitted.
-   */
+  dayLabels: Record<WeekDay, string>;
   dayAriaLabels?: Partial<Record<WeekDay, string>>;
-  /** Preset button labels. Each defaults to its English name. */
-  presetLabels?: {
-    weekdays?: React$1.ReactNode;
-    weekend?: React$1.ReactNode;
-    everyDay?: React$1.ReactNode;
+  daysAriaLabel: string;
+};
+type DayOfWeekPickerWithPresets = DayOfWeekPickerBaseProps & {
+  showPresets: true;
+  presetLabels: {
+    weekdays: React$1.ReactNode;
+    weekend: React$1.ReactNode;
+    everyDay: React$1.ReactNode;
   };
-  /** Accessible label for the preset row. Defaults to `"Day presets"`. */
-  presetsAriaLabel?: string;
-  /** Accessible label for the day chip group. Defaults to `"Days of the week"`. */
-  daysAriaLabel?: string;
-}
+  presetsAriaLabel: string;
+};
+type DayOfWeekPickerWithoutPresets = DayOfWeekPickerBaseProps & {
+  showPresets?: false;
+  presetLabels?: never;
+  presetsAriaLabel?: never;
+};
+type DayOfWeekPickerProps = DayOfWeekPickerWithPresets | DayOfWeekPickerWithoutPresets;
 declare const DayOfWeekPicker: React$1.ForwardRefExoticComponent<DayOfWeekPickerProps & React$1.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { DayOfWeekPicker, WEEK_DAYS, WeekDay };

package/dist/components/day-of-week-picker.d.ts

@@ -4,35 +4,31 @@ import * as React$1 from "react";
 
 //#region src/components/day-of-week-picker.d.ts
 type WeekDay = 'monday' | 'tuesday' | 'wednesday' | 'thursday' | 'friday' | 'saturday' | 'sunday';
-declare const WEEK_DAYS: ReadonlyArray<{
-  value: WeekDay;
-  short: string;
-}>;
-interface DayOfWeekPickerProps {
+declare const WEEK_DAYS: readonly WeekDay[];
+type DayOfWeekPickerBaseProps = {
   value: WeekDay[];
   onValueChange: (next: WeekDay[]) => void;
   disabled?: boolean;
-  /** Show "Weekdays / Weekend / Every day" preset shortcuts above the chips. */
-  showPresets?: boolean;
   className?: string;
-  /** Short labels (e.g. "Mon", "Tue") shown on each day chip. Defaults to English. */
-  dayLabels?: Partial<Record<WeekDay, string>>;
-  /**
-   * Full accessible names per day (e.g. "Monday"). Used as each chip's
-   * `aria-label`. Falls back to the visible short label when omitted.
-   */
+  dayLabels: Record<WeekDay, string>;
   dayAriaLabels?: Partial<Record<WeekDay, string>>;
-  /** Preset button labels. Each defaults to its English name. */
-  presetLabels?: {
-    weekdays?: React$1.ReactNode;
-    weekend?: React$1.ReactNode;
-    everyDay?: React$1.ReactNode;
+  daysAriaLabel: string;
+};
+type DayOfWeekPickerWithPresets = DayOfWeekPickerBaseProps & {
+  showPresets: true;
+  presetLabels: {
+    weekdays: React$1.ReactNode;
+    weekend: React$1.ReactNode;
+    everyDay: React$1.ReactNode;
   };
-  /** Accessible label for the preset row. Defaults to `"Day presets"`. */
-  presetsAriaLabel?: string;
-  /** Accessible label for the day chip group. Defaults to `"Days of the week"`. */
-  daysAriaLabel?: string;
-}
+  presetsAriaLabel: string;
+};
+type DayOfWeekPickerWithoutPresets = DayOfWeekPickerBaseProps & {
+  showPresets?: false;
+  presetLabels?: never;
+  presetsAriaLabel?: never;
+};
+type DayOfWeekPickerProps = DayOfWeekPickerWithPresets | DayOfWeekPickerWithoutPresets;
 declare const DayOfWeekPicker: React$1.ForwardRefExoticComponent<DayOfWeekPickerProps & React$1.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { DayOfWeekPicker, WEEK_DAYS, WeekDay };

package/dist/components/day-of-week-picker.js

@@ -4,34 +4,13 @@ import * as React$1 from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/day-of-week-picker.tsx
 const WEEK_DAYS = [
-	{
-		value: "monday",
-		short: "Mon"
-	},
-	{
-		value: "tuesday",
-		short: "Tue"
-	},
-	{
-		value: "wednesday",
-		short: "Wed"
-	},
-	{
-		value: "thursday",
-		short: "Thu"
-	},
-	{
-		value: "friday",
-		short: "Fri"
-	},
-	{
-		value: "saturday",
-		short: "Sat"
-	},
-	{
-		value: "sunday",
-		short: "Sun"
-	}
+	"monday",
+	"tuesday",
+	"wednesday",
+	"thursday",
+	"friday",
+	"saturday",
+	"sunday"
 ];
 const WEEKDAYS_ONLY = [
 	"monday",
@@ -41,8 +20,9 @@ const WEEKDAYS_ONLY = [
 	"friday"
 ];
 const WEEKEND_ONLY = ["saturday", "sunday"];
-const ALL_DAYS = WEEK_DAYS.map((d) => d.value);
-const DayOfWeekPicker = React$1.forwardRef(({ className, disabled, onValueChange, showPresets = false, value, dayLabels, dayAriaLabels, presetLabels, presetsAriaLabel = "Day presets", daysAriaLabel = "Days of the week" }, ref) => {
+const ALL_DAYS = [...WEEK_DAYS];
+const DayOfWeekPicker = React$1.forwardRef(function DayOfWeekPicker(props, ref) {
+	const { className, disabled, onValueChange, showPresets = false, value, dayLabels, dayAriaLabels, daysAriaLabel } = props;
 	const selected = React$1.useMemo(() => new Set(value), [value]);
 	const toggle = (day) => {
 		const next = new Set(selected);
@@ -57,47 +37,47 @@ const DayOfWeekPicker = React$1.forwardRef(({ className, disabled, onValueChange
 	return /* @__PURE__ */ jsxs("div", {
 		ref,
 		className: cn("flex flex-col gap-2", className),
-		children: [showPresets && /* @__PURE__ */ jsxs("div", {
+		children: [showPresets && props.showPresets ? /* @__PURE__ */ jsxs("div", {
 			role: "group",
-			"aria-label": presetsAriaLabel,
+			"aria-label": props.presetsAriaLabel,
 			className: "flex flex-wrap gap-1.5",
 			children: [
 				/* @__PURE__ */ jsx(PresetButton, {
 					active: matches(WEEKDAYS_ONLY),
 					disabled,
 					onClick: () => setPreset(WEEKDAYS_ONLY),
-					children: presetLabels?.weekdays ?? "Weekdays"
+					children: props.presetLabels.weekdays
 				}),
 				/* @__PURE__ */ jsx(PresetButton, {
 					active: matches(WEEKEND_ONLY),
 					disabled,
 					onClick: () => setPreset(WEEKEND_ONLY),
-					children: presetLabels?.weekend ?? "Weekend"
+					children: props.presetLabels.weekend
 				}),
 				/* @__PURE__ */ jsx(PresetButton, {
 					active: matches(ALL_DAYS),
 					disabled,
 					onClick: () => setPreset(ALL_DAYS),
-					children: presetLabels?.everyDay ?? "Every day"
+					children: props.presetLabels.everyDay
 				})
 			]
-		}), /* @__PURE__ */ jsx("div", {
+		}) : null, /* @__PURE__ */ jsx("div", {
 			role: "group",
 			"aria-label": daysAriaLabel,
 			className: "flex gap-1",
 			children: WEEK_DAYS.map((day) => {
-				const checked = selected.has(day.value);
-				const label = dayLabels?.[day.value] ?? day.short;
+				const checked = selected.has(day);
+				const label = dayLabels[day];
 				return /* @__PURE__ */ jsx("button", {
 					type: "button",
 					role: "checkbox",
 					"aria-checked": checked,
-					"aria-label": dayAriaLabels?.[day.value] ?? label,
+					"aria-label": dayAriaLabels?.[day] ?? label,
 					disabled,
-					onClick: () => toggle(day.value),
+					onClick: () => toggle(day),
 					className: cn("touch-target inline-flex h-9 flex-1 items-center justify-center rounded-full text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 motion-reduce:transition-none", checked ? "bg-base-accent-solid text-accent-contrast hover:bg-spark-9" : "bg-base-gray-soft text-gray-light hover:bg-gray-a4"),
 					children: label
-				}, day.value);
+				}, day);
 			})
 		})]
 	});

package/dist/components/day-of-week-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"day-of-week-picker.js","names":["React"],"sources":["../../src/components/day-of-week-picker.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '../utils/cn'\n\nexport type WeekDay =\n  | 'monday'\n  | 'tuesday'\n  | 'wednesday'\n  | 'thursday'\n  | 'friday'\n  | 'saturday'\n  | 'sunday'\n\nexport const WEEK_DAYS: ReadonlyArray<{ value: WeekDay; short: string }> = [\n  { value: 'monday', short: 'Mon' },\n  { value: 'tuesday', short: 'Tue' },\n  { value: 'wednesday', short: 'Wed' },\n  { value: 'thursday', short: 'Thu' },\n  { value: 'friday', short: 'Fri' },\n  { value: 'saturday', short: 'Sat' },\n  { value: 'sunday', short: 'Sun' },\n]\n\nconst WEEKDAYS_ONLY: WeekDay[] = [\n  'monday',\n  'tuesday',\n  'wednesday',\n  'thursday',\n  'friday',\n]\nconst WEEKEND_ONLY: WeekDay[] = ['saturday', 'sunday']\nconst ALL_DAYS: WeekDay[] = WEEK_DAYS.map((d) => d.value)\n\ninterface DayOfWeekPickerProps {\n  value: WeekDay[]\n  onValueChange: (next: WeekDay[]) => void\n  disabled?: boolean\n  /** Show \"Weekdays / Weekend / Every day\" preset shortcuts above the chips. */\n  showPresets?: boolean\n  className?: string\n  /** Short labels (e.g. \"Mon\", \"Tue\") shown on each day chip. Defaults to English. */\n  dayLabels?: Partial<Record<WeekDay, string>>\n  /**\n   * Full accessible names per day (e.g. \"Monday\"). Used as each chip's\n   * `aria-label`. Falls back to the visible short label when omitted.\n   */\n  dayAriaLabels?: Partial<Record<WeekDay, string>>\n  /** Preset button labels. Each defaults to its English name. */\n  presetLabels?: {\n    weekdays?: React.ReactNode\n    weekend?: React.ReactNode\n    everyDay?: React.ReactNode\n  }\n  /** Accessible label for the preset row. Defaults to `\"Day presets\"`. */\n  presetsAriaLabel?: string\n  /** Accessible label for the day chip group. Defaults to `\"Days of the week\"`. */\n  daysAriaLabel?: string\n}\n\nconst DayOfWeekPicker = React.forwardRef<HTMLDivElement, DayOfWeekPickerProps>(\n  (\n    {\n      className,\n      disabled,\n      onValueChange,\n      showPresets = false,\n      value,\n      dayLabels,\n      dayAriaLabels,\n      presetLabels,\n      presetsAriaLabel = 'Day presets',\n      daysAriaLabel = 'Days of the week',\n    },\n    ref,\n  ) => {\n    const selected = React.useMemo(() => new Set(value), [value])\n\n    const toggle = (day: WeekDay) => {\n      const next = new Set(selected)\n      if (next.has(day)) {\n        next.delete(day)\n      } else {\n        next.add(day)\n      }\n      onValueChange(ALL_DAYS.filter((d) => next.has(d)))\n    }\n\n    const matches = (preset: WeekDay[]) =>\n      selected.size === preset.length && preset.every((d) => selected.has(d))\n\n    const setPreset = (preset: WeekDay[]) => {\n      onValueChange(preset)\n    }\n\n    return (\n      <div ref={ref} className={cn('flex flex-col gap-2', className)}>\n        {showPresets && (\n          <div\n            role=\"group\"\n            aria-label={presetsAriaLabel}\n            className=\"flex flex-wrap gap-1.5\"\n          >\n            <PresetButton\n              active={matches(WEEKDAYS_ONLY)}\n              disabled={disabled}\n              onClick={() => setPreset(WEEKDAYS_ONLY)}\n            >\n              {presetLabels?.weekdays ?? 'Weekdays'}\n            </PresetButton>\n            <PresetButton\n              active={matches(WEEKEND_ONLY)}\n              disabled={disabled}\n              onClick={() => setPreset(WEEKEND_ONLY)}\n            >\n              {presetLabels?.weekend ?? 'Weekend'}\n            </PresetButton>\n            <PresetButton\n              active={matches(ALL_DAYS)}\n              disabled={disabled}\n              onClick={() => setPreset(ALL_DAYS)}\n            >\n              {presetLabels?.everyDay ?? 'Every day'}\n            </PresetButton>\n          </div>\n        )}\n        <div role=\"group\" aria-label={daysAriaLabel} className=\"flex gap-1\">\n          {WEEK_DAYS.map((day) => {\n            const checked = selected.has(day.value)\n            const label = dayLabels?.[day.value] ?? day.short\n            const ariaLabel = dayAriaLabels?.[day.value] ?? label\n            return (\n              <button\n                key={day.value}\n                type=\"button\"\n                role=\"checkbox\"\n                aria-checked={checked}\n                aria-label={ariaLabel}\n                disabled={disabled}\n                onClick={() => toggle(day.value)}\n                className={cn(\n                  'touch-target inline-flex h-9 flex-1 items-center justify-center rounded-full text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 motion-reduce:transition-none',\n                  checked\n                    ? 'bg-base-accent-solid text-accent-contrast hover:bg-spark-9'\n                    : 'bg-base-gray-soft text-gray-light hover:bg-gray-a4',\n                )}\n              >\n                {label}\n              </button>\n            )\n          })}\n        </div>\n      </div>\n    )\n  },\n)\n\nDayOfWeekPicker.displayName = 'DayOfWeekPicker'\n\ninterface PresetButtonProps {\n  active: boolean\n  disabled?: boolean\n  onClick: () => void\n  children: React.ReactNode\n}\n\nfunction PresetButton({\n  active,\n  children,\n  disabled,\n  onClick,\n}: PresetButtonProps) {\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      disabled={disabled}\n      aria-pressed={active}\n      className={cn(\n        'touch-target inline-flex h-7 items-center justify-center rounded-full px-3 text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 motion-reduce:transition-none',\n        active\n          ? 'bg-base-accent-soft text-accent'\n          : 'bg-transparent text-gray-light hover:bg-gray-a3',\n      )}\n    >\n      {children}\n    </button>\n  )\n}\n\nexport { DayOfWeekPicker }\n"],"mappings":";;;;;AAYA,MAAa,YAA8D;CACzE;EAAE,OAAO;EAAU,OAAO;CAAM;CAChC;EAAE,OAAO;EAAW,OAAO;CAAM;CACjC;EAAE,OAAO;EAAa,OAAO;CAAM;CACnC;EAAE,OAAO;EAAY,OAAO;CAAM;CAClC;EAAE,OAAO;EAAU,OAAO;CAAM;CAChC;EAAE,OAAO;EAAY,OAAO;CAAM;CAClC;EAAE,OAAO;EAAU,OAAO;CAAM;AAClC;AAEA,MAAM,gBAA2B;CAC/B;CACA;CACA;CACA;CACA;AACF;AACA,MAAM,eAA0B,CAAC,YAAY,QAAQ;AACrD,MAAM,WAAsB,UAAU,KAAK,MAAM,EAAE,KAAK;AA4BxD,MAAM,kBAAkBA,QAAM,YAE1B,EACE,WACA,UACA,eACA,cAAc,OACd,OACA,WACA,eACA,cACA,mBAAmB,eACnB,gBAAgB,sBAElB,QACG;CACH,MAAM,WAAWA,QAAM,cAAc,IAAI,IAAI,KAAK,GAAG,CAAC,KAAK,CAAC;CAE5D,MAAM,UAAU,QAAiB;EAC/B,MAAM,OAAO,IAAI,IAAI,QAAQ;EAC7B,IAAI,KAAK,IAAI,GAAG,GACd,KAAK,OAAO,GAAG;OAEf,KAAK,IAAI,GAAG;EAEd,cAAc,SAAS,QAAQ,MAAM,KAAK,IAAI,CAAC,CAAC,CAAC;CACnD;CAEA,MAAM,WAAW,WACf,SAAS,SAAS,OAAO,UAAU,OAAO,OAAO,MAAM,SAAS,IAAI,CAAC,CAAC;CAExE,MAAM,aAAa,WAAsB;EACvC,cAAc,MAAM;CACtB;CAEA,OACE,qBAAC,OAAD;EAAU;EAAK,WAAW,GAAG,uBAAuB,SAAS;YAA7D,CACG,eACC,qBAAC,OAAD;GACE,MAAK;GACL,cAAY;GACZ,WAAU;aAHZ;IAKE,oBAAC,cAAD;KACE,QAAQ,QAAQ,aAAa;KACnB;KACV,eAAe,UAAU,aAAa;eAErC,cAAc,YAAY;IACf,CAAA;IACd,oBAAC,cAAD;KACE,QAAQ,QAAQ,YAAY;KAClB;KACV,eAAe,UAAU,YAAY;eAEpC,cAAc,WAAW;IACd,CAAA;IACd,oBAAC,cAAD;KACE,QAAQ,QAAQ,QAAQ;KACd;KACV,eAAe,UAAU,QAAQ;eAEhC,cAAc,YAAY;IACf,CAAA;GACX;MAEP,oBAAC,OAAD;GAAK,MAAK;GAAQ,cAAY;GAAe,WAAU;aACpD,UAAU,KAAK,QAAQ;IACtB,MAAM,UAAU,SAAS,IAAI,IAAI,KAAK;IACtC,MAAM,QAAQ,YAAY,IAAI,UAAU,IAAI;IAE5C,OACE,oBAAC,UAAD;KAEE,MAAK;KACL,MAAK;KACL,gBAAc;KACd,cAPc,gBAAgB,IAAI,UAAU;KAQlC;KACV,eAAe,OAAO,IAAI,KAAK;KAC/B,WAAW,GACT,kRACA,UACI,+DACA,oDACN;eAEC;IACK,GAfD,IAAI,KAeH;GAEZ,CAAC;EACE,CAAA,CACF;;AAET,CACF;AAEA,gBAAgB,cAAc;AAS9B,SAAS,aAAa,EACpB,QACA,UACA,UACA,WACoB;CACpB,OACE,oBAAC,UAAD;EACE,MAAK;EACI;EACC;EACV,gBAAc;EACd,WAAW,GACT,gRACA,SACI,oCACA,iDACN;EAEC;CACK,CAAA;AAEZ"}
+{"version":3,"file":"day-of-week-picker.js","names":["React"],"sources":["../../src/components/day-of-week-picker.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '../utils/cn'\n\nexport type WeekDay =\n  | 'monday'\n  | 'tuesday'\n  | 'wednesday'\n  | 'thursday'\n  | 'friday'\n  | 'saturday'\n  | 'sunday'\n\nexport const WEEK_DAYS: readonly WeekDay[] = [\n  'monday',\n  'tuesday',\n  'wednesday',\n  'thursday',\n  'friday',\n  'saturday',\n  'sunday',\n] as const\n\nconst WEEKDAYS_ONLY: WeekDay[] = [\n  'monday',\n  'tuesday',\n  'wednesday',\n  'thursday',\n  'friday',\n]\nconst WEEKEND_ONLY: WeekDay[] = ['saturday', 'sunday']\nconst ALL_DAYS: WeekDay[] = [...WEEK_DAYS]\n\ntype DayOfWeekPickerBaseProps = {\n  value: WeekDay[]\n  onValueChange: (next: WeekDay[]) => void\n  disabled?: boolean\n  className?: string\n  dayLabels: Record<WeekDay, string>\n  dayAriaLabels?: Partial<Record<WeekDay, string>>\n  daysAriaLabel: string\n}\n\ntype DayOfWeekPickerWithPresets = DayOfWeekPickerBaseProps & {\n  showPresets: true\n  presetLabels: {\n    weekdays: React.ReactNode\n    weekend: React.ReactNode\n    everyDay: React.ReactNode\n  }\n  presetsAriaLabel: string\n}\n\ntype DayOfWeekPickerWithoutPresets = DayOfWeekPickerBaseProps & {\n  showPresets?: false\n  presetLabels?: never\n  presetsAriaLabel?: never\n}\n\ntype DayOfWeekPickerProps =\n  | DayOfWeekPickerWithPresets\n  | DayOfWeekPickerWithoutPresets\n\nconst DayOfWeekPicker = React.forwardRef<HTMLDivElement, DayOfWeekPickerProps>(\n  function DayOfWeekPicker(props, ref) {\n    const {\n      className,\n      disabled,\n      onValueChange,\n      showPresets = false,\n      value,\n      dayLabels,\n      dayAriaLabels,\n      daysAriaLabel,\n    } = props\n\n    const selected = React.useMemo(() => new Set(value), [value])\n\n    const toggle = (day: WeekDay) => {\n      const next = new Set(selected)\n      if (next.has(day)) {\n        next.delete(day)\n      } else {\n        next.add(day)\n      }\n      onValueChange(ALL_DAYS.filter((d) => next.has(d)))\n    }\n\n    const matches = (preset: WeekDay[]) =>\n      selected.size === preset.length && preset.every((d) => selected.has(d))\n\n    const setPreset = (preset: WeekDay[]) => {\n      onValueChange(preset)\n    }\n\n    return (\n      <div ref={ref} className={cn('flex flex-col gap-2', className)}>\n        {showPresets && props.showPresets ? (\n          <div\n            role=\"group\"\n            aria-label={props.presetsAriaLabel}\n            className=\"flex flex-wrap gap-1.5\"\n          >\n            <PresetButton\n              active={matches(WEEKDAYS_ONLY)}\n              disabled={disabled}\n              onClick={() => setPreset(WEEKDAYS_ONLY)}\n            >\n              {props.presetLabels.weekdays}\n            </PresetButton>\n            <PresetButton\n              active={matches(WEEKEND_ONLY)}\n              disabled={disabled}\n              onClick={() => setPreset(WEEKEND_ONLY)}\n            >\n              {props.presetLabels.weekend}\n            </PresetButton>\n            <PresetButton\n              active={matches(ALL_DAYS)}\n              disabled={disabled}\n              onClick={() => setPreset(ALL_DAYS)}\n            >\n              {props.presetLabels.everyDay}\n            </PresetButton>\n          </div>\n        ) : null}\n        <div role=\"group\" aria-label={daysAriaLabel} className=\"flex gap-1\">\n          {WEEK_DAYS.map((day) => {\n            const checked = selected.has(day)\n            const label = dayLabels[day]\n            const ariaLabel = dayAriaLabels?.[day] ?? label\n            return (\n              <button\n                key={day}\n                type=\"button\"\n                role=\"checkbox\"\n                aria-checked={checked}\n                aria-label={ariaLabel}\n                disabled={disabled}\n                onClick={() => toggle(day)}\n                className={cn(\n                  'touch-target inline-flex h-9 flex-1 items-center justify-center rounded-full text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 motion-reduce:transition-none',\n                  checked\n                    ? 'bg-base-accent-solid text-accent-contrast hover:bg-spark-9'\n                    : 'bg-base-gray-soft text-gray-light hover:bg-gray-a4',\n                )}\n              >\n                {label}\n              </button>\n            )\n          })}\n        </div>\n      </div>\n    )\n  },\n)\n\nDayOfWeekPicker.displayName = 'DayOfWeekPicker'\n\ninterface PresetButtonProps {\n  active: boolean\n  disabled?: boolean\n  onClick: () => void\n  children: React.ReactNode\n}\n\nfunction PresetButton({\n  active,\n  children,\n  disabled,\n  onClick,\n}: PresetButtonProps) {\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      disabled={disabled}\n      aria-pressed={active}\n      className={cn(\n        'touch-target inline-flex h-7 items-center justify-center rounded-full px-3 text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 motion-reduce:transition-none',\n        active\n          ? 'bg-base-accent-soft text-accent'\n          : 'bg-transparent text-gray-light hover:bg-gray-a3',\n      )}\n    >\n      {children}\n    </button>\n  )\n}\n\nexport { DayOfWeekPicker }\n"],"mappings":";;;;;AAYA,MAAa,YAAgC;CAC3C;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,MAAM,gBAA2B;CAC/B;CACA;CACA;CACA;CACA;AACF;AACA,MAAM,eAA0B,CAAC,YAAY,QAAQ;AACrD,MAAM,WAAsB,CAAC,GAAG,SAAS;AAgCzC,MAAM,kBAAkBA,QAAM,WAC5B,SAAS,gBAAgB,OAAO,KAAK;CACnC,MAAM,EACJ,WACA,UACA,eACA,cAAc,OACd,OACA,WACA,eACA,kBACE;CAEJ,MAAM,WAAWA,QAAM,cAAc,IAAI,IAAI,KAAK,GAAG,CAAC,KAAK,CAAC;CAE5D,MAAM,UAAU,QAAiB;EAC/B,MAAM,OAAO,IAAI,IAAI,QAAQ;EAC7B,IAAI,KAAK,IAAI,GAAG,GACd,KAAK,OAAO,GAAG;OAEf,KAAK,IAAI,GAAG;EAEd,cAAc,SAAS,QAAQ,MAAM,KAAK,IAAI,CAAC,CAAC,CAAC;CACnD;CAEA,MAAM,WAAW,WACf,SAAS,SAAS,OAAO,UAAU,OAAO,OAAO,MAAM,SAAS,IAAI,CAAC,CAAC;CAExE,MAAM,aAAa,WAAsB;EACvC,cAAc,MAAM;CACtB;CAEA,OACE,qBAAC,OAAD;EAAU;EAAK,WAAW,GAAG,uBAAuB,SAAS;YAA7D,CACG,eAAe,MAAM,cACpB,qBAAC,OAAD;GACE,MAAK;GACL,cAAY,MAAM;GAClB,WAAU;aAHZ;IAKE,oBAAC,cAAD;KACE,QAAQ,QAAQ,aAAa;KACnB;KACV,eAAe,UAAU,aAAa;eAErC,MAAM,aAAa;IACR,CAAA;IACd,oBAAC,cAAD;KACE,QAAQ,QAAQ,YAAY;KAClB;KACV,eAAe,UAAU,YAAY;eAEpC,MAAM,aAAa;IACR,CAAA;IACd,oBAAC,cAAD;KACE,QAAQ,QAAQ,QAAQ;KACd;KACV,eAAe,UAAU,QAAQ;eAEhC,MAAM,aAAa;IACR,CAAA;GACX;OACH,MACJ,oBAAC,OAAD;GAAK,MAAK;GAAQ,cAAY;GAAe,WAAU;aACpD,UAAU,KAAK,QAAQ;IACtB,MAAM,UAAU,SAAS,IAAI,GAAG;IAChC,MAAM,QAAQ,UAAU;IAExB,OACE,oBAAC,UAAD;KAEE,MAAK;KACL,MAAK;KACL,gBAAc;KACd,cAPc,gBAAgB,QAAQ;KAQ5B;KACV,eAAe,OAAO,GAAG;KACzB,WAAW,GACT,kRACA,UACI,+DACA,oDACN;eAEC;IACK,GAfD,GAeC;GAEZ,CAAC;EACE,CAAA,CACF;;AAET,CACF;AAEA,gBAAgB,cAAc;AAS9B,SAAS,aAAa,EACpB,QACA,UACA,UACA,WACoB;CACpB,OACE,oBAAC,UAAD;EACE,MAAK;EACI;EACC;EACV,gBAAc;EACd,WAAW,GACT,gRACA,SACI,oCACA,iDACN;EAEC;CACK,CAAA;AAEZ"}

package/dist/components/energy-history-chart.cjs

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 require("../utils/chars.cjs");
 const require_utils_format = require("../utils/format.cjs");
-const require_components_energy_bar_chart = require("./energy-bar-chart.cjs");
+const require_components_bar_chart_with_total = require("./bar-chart-with-total.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/energy-history-chart.tsx
 /**
@@ -15,7 +15,7 @@ let react_jsx_runtime = require("react/jsx-runtime");
 function EnergyHistoryChart({ data, unit, formatValue, formatBucketLabel, labels, omitSeries, highlightedBucket, showHighlightLine, title, className, height = 260, categoryTicks }) {
 	const fmtValue = (value) => formatValue ? formatValue(value) : `${require_utils_format.twoDecimalFormat.format(value)} ${unit}`;
 	const omitted = new Set(omitSeries);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_energy_bar_chart.EnergyBarChart, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_bar_chart_with_total.BarChartWithTotal, {
 		data,
 		series: [
 			{

package/dist/components/energy-history-chart.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"energy-history-chart.cjs","names":["valueFormat","EnergyBarChart"],"sources":["../../src/components/energy-history-chart.tsx"],"sourcesContent":["import { NARROW_NBSP } from '../utils/chars'\nimport { twoDecimalFormat as valueFormat } from '../utils/format'\nimport type { BarChartSeries } from './bar-chart'\nimport { EnergyBarChart } from './energy-bar-chart'\n\nexport interface EnergyHistoryDatum {\n  /** Bucket label/id (e.g. weekday, day-of-month, month). */\n  bucket: string\n  /** Solar used on-site (kWh, ≥ 0). */\n  solar: number\n  /** Battery discharged (kWh, ≥ 0). */\n  battery: number\n  /** Grid imported (kWh, ≥ 0). */\n  grid: number\n  /** Grid feed-in (kWh, ≥ 0); drawn below the baseline as an export. */\n  gridFeedIn?: number\n}\n\nexport interface EnergyHistoryChartProps {\n  data: EnergyHistoryDatum[]\n  /** Axis/tooltip unit, e.g. \"kWh\". */\n  unit: string\n  formatValue?: (value: number) => string\n  /** Formats the hovered bucket in the tooltip header. Defaults to the raw bucket. */\n  formatBucketLabel?: (bucket: string) => string\n  labels: {\n    solar: string\n    battery: string\n    grid: string\n    /** Optional; when set, grid feed-in is drawn below the baseline. */\n    gridFeedIn?: string\n  }\n  /** Series to drop entirely (no legend entry, bar segment, or tooltip row). */\n  omitSeries?: readonly EnergyHistorySeriesKey[]\n  /** Bucket to mark with the current-period dashed line. */\n  highlightedBucket?: string\n  showHighlightLine?: boolean\n  title?: string\n  className?: string\n  height?: number\n  /** Subset of bucket ids to label on the x-axis. Defaults to all buckets. */\n  categoryTicks?: string[]\n}\n\nexport type EnergyHistorySeriesKey = 'solar' | 'battery' | 'grid' | 'gridFeedIn'\n\n/**\n * Energy-per-bucket stacked bar chart: solar (orange), battery (green) and grid\n * (blue) energy sources stacked per bucket, the total height being the energy\n * consumed. Grid feed-in (translucent blue) dips below the baseline as an\n * export. For cumulative energy (week/month/year views). Thin wrapper over the\n * shared visx `BarChart`, so it inherits the card tooltip and both indicators.\n */\nexport function EnergyHistoryChart({\n  data,\n  unit,\n  formatValue,\n  formatBucketLabel,\n  labels,\n  omitSeries,\n  highlightedBucket,\n  showHighlightLine,\n  title,\n  className,\n  height = 260,\n  categoryTicks,\n}: EnergyHistoryChartProps) {\n  const fmtValue = (value: number) =>\n    formatValue\n      ? formatValue(value)\n      : `${valueFormat.format(value)}${NARROW_NBSP}${unit}`\n\n  const omitted = new Set<EnergyHistorySeriesKey>(omitSeries)\n  const allSeries: BarChartSeries<EnergyHistoryDatum>[] = [\n    {\n      key: 'solar',\n      label: labels.solar,\n      color: 'var(--orange-9)',\n      getValue: (d) => d.solar,\n    },\n    {\n      key: 'battery',\n      label: labels.battery,\n      color: 'var(--green-9)',\n      getValue: (d) => d.battery,\n    },\n    {\n      key: 'grid',\n      label: labels.grid,\n      color: 'var(--blue-9)',\n      getValue: (d) => d.grid,\n    },\n    ...(labels.gridFeedIn !== undefined\n      ? [\n          {\n            key: 'gridFeedIn',\n            label: labels.gridFeedIn,\n            color: 'var(--blue-7)',\n            getValue: (d: EnergyHistoryDatum) =>\n              -Math.max(0, d.gridFeedIn ?? 0),\n          },\n        ]\n      : []),\n  ]\n  const series = allSeries.filter(\n    (s) => !omitted.has(s.key as EnergyHistorySeriesKey),\n  )\n\n  return (\n    <EnergyBarChart<EnergyHistoryDatum>\n      data={data}\n      series={series}\n      getCategory={(d) => d.bucket}\n      title={title}\n      yAxisUnit={unit}\n      height={height}\n      className={className}\n      formatValue={fmtValue}\n      categoryTicks={categoryTicks}\n      {...(formatBucketLabel && {\n        formatTooltipCategory: (category: string | number) =>\n          formatBucketLabel(String(category)),\n      })}\n      totalSuffix={unit}\n      totalFormat={{ maximumFractionDigits: 2 }}\n      {...(highlightedBucket !== undefined && {\n        highlightedCategory: highlightedBucket,\n      })}\n      {...(showHighlightLine !== undefined && { showHighlightLine })}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;AAqDA,SAAgB,mBAAmB,EACjC,MACA,MACA,aACA,mBACA,QACA,YACA,mBACA,mBACA,OACA,WACA,SAAS,KACT,iBAC0B;CAC1B,MAAM,YAAY,UAChB,cACI,YAAY,KAAK,IACjB,GAAGA,qBAAAA,iBAAY,OAAO,KAAK,KAAkB;CAEnD,MAAM,UAAU,IAAI,IAA4B,UAAU;CAoC1D,OACE,iBAAA,GAAA,kBAAA,KAACC,oCAAAA,gBAAD;EACQ;EACN,QAPW;GA9Bb;IACE,KAAK;IACL,OAAO,OAAO;IACd,OAAO;IACP,WAAW,MAAM,EAAE;GACrB;GACA;IACE,KAAK;IACL,OAAO,OAAO;IACd,OAAO;IACP,WAAW,MAAM,EAAE;GACrB;GACA;IACE,KAAK;IACL,OAAO,OAAO;IACd,OAAO;IACP,WAAW,MAAM,EAAE;GACrB;GACA,GAAI,OAAO,eAAe,KAAA,IACtB,CACE;IACE,KAAK;IACL,OAAO,OAAO;IACd,OAAO;IACP,WAAW,MACT,CAAC,KAAK,IAAI,GAAG,EAAE,cAAc,CAAC;GAClC,CACF,IACA,CAAC;EAEgB,EAAE,QACtB,MAAM,CAAC,QAAQ,IAAI,EAAE,GAA6B,CAMpC;EACb,cAAc,MAAM,EAAE;EACf;EACP,WAAW;EACH;EACG;EACX,aAAa;EACE;EACf,GAAK,qBAAqB,EACxB,wBAAwB,aACtB,kBAAkB,OAAO,QAAQ,CAAC,EACtC;EACA,aAAa;EACb,aAAa,EAAE,uBAAuB,EAAE;EACxC,GAAK,sBAAsB,KAAA,KAAa,EACtC,qBAAqB,kBACvB;EACA,GAAK,sBAAsB,KAAA,KAAa,EAAE,kBAAkB;CAC7D,CAAA;AAEL"}
+{"version":3,"file":"energy-history-chart.cjs","names":["valueFormat","BarChartWithTotal"],"sources":["../../src/components/energy-history-chart.tsx"],"sourcesContent":["import { NARROW_NBSP } from '../utils/chars'\nimport { twoDecimalFormat as valueFormat } from '../utils/format'\nimport type { BarChartSeries } from './bar-chart'\nimport { BarChartWithTotal } from './bar-chart-with-total'\n\nexport interface EnergyHistoryDatum {\n  /** Bucket label/id (e.g. weekday, day-of-month, month). */\n  bucket: string\n  /** Solar used on-site (kWh, ≥ 0). */\n  solar: number\n  /** Battery discharged (kWh, ≥ 0). */\n  battery: number\n  /** Grid imported (kWh, ≥ 0). */\n  grid: number\n  /** Grid feed-in (kWh, ≥ 0); drawn below the baseline as an export. */\n  gridFeedIn?: number\n}\n\nexport interface EnergyHistoryChartProps {\n  data: EnergyHistoryDatum[]\n  /** Axis/tooltip unit, e.g. \"kWh\". */\n  unit: string\n  formatValue?: (value: number) => string\n  /** Formats the hovered bucket in the tooltip header. Defaults to the raw bucket. */\n  formatBucketLabel?: (bucket: string) => string\n  labels: {\n    solar: string\n    battery: string\n    grid: string\n    /** Optional; when set, grid feed-in is drawn below the baseline. */\n    gridFeedIn?: string\n  }\n  /** Series to drop entirely (no legend entry, bar segment, or tooltip row). */\n  omitSeries?: readonly EnergyHistorySeriesKey[]\n  /** Bucket to mark with the current-period dashed line. */\n  highlightedBucket?: string\n  showHighlightLine?: boolean\n  title?: string\n  className?: string\n  height?: number\n  /** Subset of bucket ids to label on the x-axis. Defaults to all buckets. */\n  categoryTicks?: string[]\n}\n\nexport type EnergyHistorySeriesKey = 'solar' | 'battery' | 'grid' | 'gridFeedIn'\n\n/**\n * Energy-per-bucket stacked bar chart: solar (orange), battery (green) and grid\n * (blue) energy sources stacked per bucket, the total height being the energy\n * consumed. Grid feed-in (translucent blue) dips below the baseline as an\n * export. For cumulative energy (week/month/year views). Thin wrapper over the\n * shared visx `BarChart`, so it inherits the card tooltip and both indicators.\n */\nexport function EnergyHistoryChart({\n  data,\n  unit,\n  formatValue,\n  formatBucketLabel,\n  labels,\n  omitSeries,\n  highlightedBucket,\n  showHighlightLine,\n  title,\n  className,\n  height = 260,\n  categoryTicks,\n}: EnergyHistoryChartProps) {\n  const fmtValue = (value: number) =>\n    formatValue\n      ? formatValue(value)\n      : `${valueFormat.format(value)}${NARROW_NBSP}${unit}`\n\n  const omitted = new Set<EnergyHistorySeriesKey>(omitSeries)\n  const allSeries: BarChartSeries<EnergyHistoryDatum>[] = [\n    {\n      key: 'solar',\n      label: labels.solar,\n      color: 'var(--orange-9)',\n      getValue: (d) => d.solar,\n    },\n    {\n      key: 'battery',\n      label: labels.battery,\n      color: 'var(--green-9)',\n      getValue: (d) => d.battery,\n    },\n    {\n      key: 'grid',\n      label: labels.grid,\n      color: 'var(--blue-9)',\n      getValue: (d) => d.grid,\n    },\n    ...(labels.gridFeedIn !== undefined\n      ? [\n          {\n            key: 'gridFeedIn',\n            label: labels.gridFeedIn,\n            color: 'var(--blue-7)',\n            getValue: (d: EnergyHistoryDatum) =>\n              -Math.max(0, d.gridFeedIn ?? 0),\n          },\n        ]\n      : []),\n  ]\n  const series = allSeries.filter(\n    (s) => !omitted.has(s.key as EnergyHistorySeriesKey),\n  )\n\n  return (\n    <BarChartWithTotal<EnergyHistoryDatum>\n      data={data}\n      series={series}\n      getCategory={(d) => d.bucket}\n      title={title}\n      yAxisUnit={unit}\n      height={height}\n      className={className}\n      formatValue={fmtValue}\n      categoryTicks={categoryTicks}\n      {...(formatBucketLabel && {\n        formatTooltipCategory: (category: string | number) =>\n          formatBucketLabel(String(category)),\n      })}\n      totalSuffix={unit}\n      totalFormat={{ maximumFractionDigits: 2 }}\n      {...(highlightedBucket !== undefined && {\n        highlightedCategory: highlightedBucket,\n      })}\n      {...(showHighlightLine !== undefined && { showHighlightLine })}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;AAqDA,SAAgB,mBAAmB,EACjC,MACA,MACA,aACA,mBACA,QACA,YACA,mBACA,mBACA,OACA,WACA,SAAS,KACT,iBAC0B;CAC1B,MAAM,YAAY,UAChB,cACI,YAAY,KAAK,IACjB,GAAGA,qBAAAA,iBAAY,OAAO,KAAK,KAAkB;CAEnD,MAAM,UAAU,IAAI,IAA4B,UAAU;CAoC1D,OACE,iBAAA,GAAA,kBAAA,KAACC,wCAAAA,mBAAD;EACQ;EACN,QAPW;GA9Bb;IACE,KAAK;IACL,OAAO,OAAO;IACd,OAAO;IACP,WAAW,MAAM,EAAE;GACrB;GACA;IACE,KAAK;IACL,OAAO,OAAO;IACd,OAAO;IACP,WAAW,MAAM,EAAE;GACrB;GACA;IACE,KAAK;IACL,OAAO,OAAO;IACd,OAAO;IACP,WAAW,MAAM,EAAE;GACrB;GACA,GAAI,OAAO,eAAe,KAAA,IACtB,CACE;IACE,KAAK;IACL,OAAO,OAAO;IACd,OAAO;IACP,WAAW,MACT,CAAC,KAAK,IAAI,GAAG,EAAE,cAAc,CAAC;GAClC,CACF,IACA,CAAC;EAEgB,EAAE,QACtB,MAAM,CAAC,QAAQ,IAAI,EAAE,GAA6B,CAMpC;EACb,cAAc,MAAM,EAAE;EACf;EACP,WAAW;EACH;EACG;EACX,aAAa;EACE;EACf,GAAK,qBAAqB,EACxB,wBAAwB,aACtB,kBAAkB,OAAO,QAAQ,CAAC,EACtC;EACA,aAAa;EACb,aAAa,EAAE,uBAAuB,EAAE;EACxC,GAAK,sBAAsB,KAAA,KAAa,EACtC,qBAAqB,kBACvB;EACA,GAAK,sBAAsB,KAAA,KAAa,EAAE,kBAAkB;CAC7D,CAAA;AAEL"}

package/dist/components/energy-history-chart.js

@@ -1,7 +1,7 @@
 "use client";
 import "../utils/chars.js";
 import { twoDecimalFormat } from "../utils/format.js";
-import { EnergyBarChart } from "./energy-bar-chart.js";
+import { BarChartWithTotal } from "./bar-chart-with-total.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/energy-history-chart.tsx
 /**
@@ -14,7 +14,7 @@ import { jsx } from "react/jsx-runtime";
 function EnergyHistoryChart({ data, unit, formatValue, formatBucketLabel, labels, omitSeries, highlightedBucket, showHighlightLine, title, className, height = 260, categoryTicks }) {
 	const fmtValue = (value) => formatValue ? formatValue(value) : `${twoDecimalFormat.format(value)} ${unit}`;
 	const omitted = new Set(omitSeries);
-	return /* @__PURE__ */ jsx(EnergyBarChart, {
+	return /* @__PURE__ */ jsx(BarChartWithTotal, {
 		data,
 		series: [
 			{

package/dist/components/energy-history-chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"energy-history-chart.js","names":["valueFormat"],"sources":["../../src/components/energy-history-chart.tsx"],"sourcesContent":["import { NARROW_NBSP } from '../utils/chars'\nimport { twoDecimalFormat as valueFormat } from '../utils/format'\nimport type { BarChartSeries } from './bar-chart'\nimport { EnergyBarChart } from './energy-bar-chart'\n\nexport interface EnergyHistoryDatum {\n  /** Bucket label/id (e.g. weekday, day-of-month, month). */\n  bucket: string\n  /** Solar used on-site (kWh, ≥ 0). */\n  solar: number\n  /** Battery discharged (kWh, ≥ 0). */\n  battery: number\n  /** Grid imported (kWh, ≥ 0). */\n  grid: number\n  /** Grid feed-in (kWh, ≥ 0); drawn below the baseline as an export. */\n  gridFeedIn?: number\n}\n\nexport interface EnergyHistoryChartProps {\n  data: EnergyHistoryDatum[]\n  /** Axis/tooltip unit, e.g. \"kWh\". */\n  unit: string\n  formatValue?: (value: number) => string\n  /** Formats the hovered bucket in the tooltip header. Defaults to the raw bucket. */\n  formatBucketLabel?: (bucket: string) => string\n  labels: {\n    solar: string\n    battery: string\n    grid: string\n    /** Optional; when set, grid feed-in is drawn below the baseline. */\n    gridFeedIn?: string\n  }\n  /** Series to drop entirely (no legend entry, bar segment, or tooltip row). */\n  omitSeries?: readonly EnergyHistorySeriesKey[]\n  /** Bucket to mark with the current-period dashed line. */\n  highlightedBucket?: string\n  showHighlightLine?: boolean\n  title?: string\n  className?: string\n  height?: number\n  /** Subset of bucket ids to label on the x-axis. Defaults to all buckets. */\n  categoryTicks?: string[]\n}\n\nexport type EnergyHistorySeriesKey = 'solar' | 'battery' | 'grid' | 'gridFeedIn'\n\n/**\n * Energy-per-bucket stacked bar chart: solar (orange), battery (green) and grid\n * (blue) energy sources stacked per bucket, the total height being the energy\n * consumed. Grid feed-in (translucent blue) dips below the baseline as an\n * export. For cumulative energy (week/month/year views). Thin wrapper over the\n * shared visx `BarChart`, so it inherits the card tooltip and both indicators.\n */\nexport function EnergyHistoryChart({\n  data,\n  unit,\n  formatValue,\n  formatBucketLabel,\n  labels,\n  omitSeries,\n  highlightedBucket,\n  showHighlightLine,\n  title,\n  className,\n  height = 260,\n  categoryTicks,\n}: EnergyHistoryChartProps) {\n  const fmtValue = (value: number) =>\n    formatValue\n      ? formatValue(value)\n      : `${valueFormat.format(value)}${NARROW_NBSP}${unit}`\n\n  const omitted = new Set<EnergyHistorySeriesKey>(omitSeries)\n  const allSeries: BarChartSeries<EnergyHistoryDatum>[] = [\n    {\n      key: 'solar',\n      label: labels.solar,\n      color: 'var(--orange-9)',\n      getValue: (d) => d.solar,\n    },\n    {\n      key: 'battery',\n      label: labels.battery,\n      color: 'var(--green-9)',\n      getValue: (d) => d.battery,\n    },\n    {\n      key: 'grid',\n      label: labels.grid,\n      color: 'var(--blue-9)',\n      getValue: (d) => d.grid,\n    },\n    ...(labels.gridFeedIn !== undefined\n      ? [\n          {\n            key: 'gridFeedIn',\n            label: labels.gridFeedIn,\n            color: 'var(--blue-7)',\n            getValue: (d: EnergyHistoryDatum) =>\n              -Math.max(0, d.gridFeedIn ?? 0),\n          },\n        ]\n      : []),\n  ]\n  const series = allSeries.filter(\n    (s) => !omitted.has(s.key as EnergyHistorySeriesKey),\n  )\n\n  return (\n    <EnergyBarChart<EnergyHistoryDatum>\n      data={data}\n      series={series}\n      getCategory={(d) => d.bucket}\n      title={title}\n      yAxisUnit={unit}\n      height={height}\n      className={className}\n      formatValue={fmtValue}\n      categoryTicks={categoryTicks}\n      {...(formatBucketLabel && {\n        formatTooltipCategory: (category: string | number) =>\n          formatBucketLabel(String(category)),\n      })}\n      totalSuffix={unit}\n      totalFormat={{ maximumFractionDigits: 2 }}\n      {...(highlightedBucket !== undefined && {\n        highlightedCategory: highlightedBucket,\n      })}\n      {...(showHighlightLine !== undefined && { showHighlightLine })}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;;AAqDA,SAAgB,mBAAmB,EACjC,MACA,MACA,aACA,mBACA,QACA,YACA,mBACA,mBACA,OACA,WACA,SAAS,KACT,iBAC0B;CAC1B,MAAM,YAAY,UAChB,cACI,YAAY,KAAK,IACjB,GAAGA,iBAAY,OAAO,KAAK,KAAkB;CAEnD,MAAM,UAAU,IAAI,IAA4B,UAAU;CAoC1D,OACE,oBAAC,gBAAD;EACQ;EACN,QAPW;GA9Bb;IACE,KAAK;IACL,OAAO,OAAO;IACd,OAAO;IACP,WAAW,MAAM,EAAE;GACrB;GACA;IACE,KAAK;IACL,OAAO,OAAO;IACd,OAAO;IACP,WAAW,MAAM,EAAE;GACrB;GACA;IACE,KAAK;IACL,OAAO,OAAO;IACd,OAAO;IACP,WAAW,MAAM,EAAE;GACrB;GACA,GAAI,OAAO,eAAe,KAAA,IACtB,CACE;IACE,KAAK;IACL,OAAO,OAAO;IACd,OAAO;IACP,WAAW,MACT,CAAC,KAAK,IAAI,GAAG,EAAE,cAAc,CAAC;GAClC,CACF,IACA,CAAC;EAEgB,EAAE,QACtB,MAAM,CAAC,QAAQ,IAAI,EAAE,GAA6B,CAMpC;EACb,cAAc,MAAM,EAAE;EACf;EACP,WAAW;EACH;EACG;EACX,aAAa;EACE;EACf,GAAK,qBAAqB,EACxB,wBAAwB,aACtB,kBAAkB,OAAO,QAAQ,CAAC,EACtC;EACA,aAAa;EACb,aAAa,EAAE,uBAAuB,EAAE;EACxC,GAAK,sBAAsB,KAAA,KAAa,EACtC,qBAAqB,kBACvB;EACA,GAAK,sBAAsB,KAAA,KAAa,EAAE,kBAAkB;CAC7D,CAAA;AAEL"}
+{"version":3,"file":"energy-history-chart.js","names":["valueFormat"],"sources":["../../src/components/energy-history-chart.tsx"],"sourcesContent":["import { NARROW_NBSP } from '../utils/chars'\nimport { twoDecimalFormat as valueFormat } from '../utils/format'\nimport type { BarChartSeries } from './bar-chart'\nimport { BarChartWithTotal } from './bar-chart-with-total'\n\nexport interface EnergyHistoryDatum {\n  /** Bucket label/id (e.g. weekday, day-of-month, month). */\n  bucket: string\n  /** Solar used on-site (kWh, ≥ 0). */\n  solar: number\n  /** Battery discharged (kWh, ≥ 0). */\n  battery: number\n  /** Grid imported (kWh, ≥ 0). */\n  grid: number\n  /** Grid feed-in (kWh, ≥ 0); drawn below the baseline as an export. */\n  gridFeedIn?: number\n}\n\nexport interface EnergyHistoryChartProps {\n  data: EnergyHistoryDatum[]\n  /** Axis/tooltip unit, e.g. \"kWh\". */\n  unit: string\n  formatValue?: (value: number) => string\n  /** Formats the hovered bucket in the tooltip header. Defaults to the raw bucket. */\n  formatBucketLabel?: (bucket: string) => string\n  labels: {\n    solar: string\n    battery: string\n    grid: string\n    /** Optional; when set, grid feed-in is drawn below the baseline. */\n    gridFeedIn?: string\n  }\n  /** Series to drop entirely (no legend entry, bar segment, or tooltip row). */\n  omitSeries?: readonly EnergyHistorySeriesKey[]\n  /** Bucket to mark with the current-period dashed line. */\n  highlightedBucket?: string\n  showHighlightLine?: boolean\n  title?: string\n  className?: string\n  height?: number\n  /** Subset of bucket ids to label on the x-axis. Defaults to all buckets. */\n  categoryTicks?: string[]\n}\n\nexport type EnergyHistorySeriesKey = 'solar' | 'battery' | 'grid' | 'gridFeedIn'\n\n/**\n * Energy-per-bucket stacked bar chart: solar (orange), battery (green) and grid\n * (blue) energy sources stacked per bucket, the total height being the energy\n * consumed. Grid feed-in (translucent blue) dips below the baseline as an\n * export. For cumulative energy (week/month/year views). Thin wrapper over the\n * shared visx `BarChart`, so it inherits the card tooltip and both indicators.\n */\nexport function EnergyHistoryChart({\n  data,\n  unit,\n  formatValue,\n  formatBucketLabel,\n  labels,\n  omitSeries,\n  highlightedBucket,\n  showHighlightLine,\n  title,\n  className,\n  height = 260,\n  categoryTicks,\n}: EnergyHistoryChartProps) {\n  const fmtValue = (value: number) =>\n    formatValue\n      ? formatValue(value)\n      : `${valueFormat.format(value)}${NARROW_NBSP}${unit}`\n\n  const omitted = new Set<EnergyHistorySeriesKey>(omitSeries)\n  const allSeries: BarChartSeries<EnergyHistoryDatum>[] = [\n    {\n      key: 'solar',\n      label: labels.solar,\n      color: 'var(--orange-9)',\n      getValue: (d) => d.solar,\n    },\n    {\n      key: 'battery',\n      label: labels.battery,\n      color: 'var(--green-9)',\n      getValue: (d) => d.battery,\n    },\n    {\n      key: 'grid',\n      label: labels.grid,\n      color: 'var(--blue-9)',\n      getValue: (d) => d.grid,\n    },\n    ...(labels.gridFeedIn !== undefined\n      ? [\n          {\n            key: 'gridFeedIn',\n            label: labels.gridFeedIn,\n            color: 'var(--blue-7)',\n            getValue: (d: EnergyHistoryDatum) =>\n              -Math.max(0, d.gridFeedIn ?? 0),\n          },\n        ]\n      : []),\n  ]\n  const series = allSeries.filter(\n    (s) => !omitted.has(s.key as EnergyHistorySeriesKey),\n  )\n\n  return (\n    <BarChartWithTotal<EnergyHistoryDatum>\n      data={data}\n      series={series}\n      getCategory={(d) => d.bucket}\n      title={title}\n      yAxisUnit={unit}\n      height={height}\n      className={className}\n      formatValue={fmtValue}\n      categoryTicks={categoryTicks}\n      {...(formatBucketLabel && {\n        formatTooltipCategory: (category: string | number) =>\n          formatBucketLabel(String(category)),\n      })}\n      totalSuffix={unit}\n      totalFormat={{ maximumFractionDigits: 2 }}\n      {...(highlightedBucket !== undefined && {\n        highlightedCategory: highlightedBucket,\n      })}\n      {...(showHighlightLine !== undefined && { showHighlightLine })}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;;AAqDA,SAAgB,mBAAmB,EACjC,MACA,MACA,aACA,mBACA,QACA,YACA,mBACA,mBACA,OACA,WACA,SAAS,KACT,iBAC0B;CAC1B,MAAM,YAAY,UAChB,cACI,YAAY,KAAK,IACjB,GAAGA,iBAAY,OAAO,KAAK,KAAkB;CAEnD,MAAM,UAAU,IAAI,IAA4B,UAAU;CAoC1D,OACE,oBAAC,mBAAD;EACQ;EACN,QAPW;GA9Bb;IACE,KAAK;IACL,OAAO,OAAO;IACd,OAAO;IACP,WAAW,MAAM,EAAE;GACrB;GACA;IACE,KAAK;IACL,OAAO,OAAO;IACd,OAAO;IACP,WAAW,MAAM,EAAE;GACrB;GACA;IACE,KAAK;IACL,OAAO,OAAO;IACd,OAAO;IACP,WAAW,MAAM,EAAE;GACrB;GACA,GAAI,OAAO,eAAe,KAAA,IACtB,CACE;IACE,KAAK;IACL,OAAO,OAAO;IACd,OAAO;IACP,WAAW,MACT,CAAC,KAAK,IAAI,GAAG,EAAE,cAAc,CAAC;GAClC,CACF,IACA,CAAC;EAEgB,EAAE,QACtB,MAAM,CAAC,QAAQ,IAAI,EAAE,GAA6B,CAMpC;EACb,cAAc,MAAM,EAAE;EACf;EACP,WAAW;EACH;EACG;EACX,aAAa;EACE;EACf,GAAK,qBAAqB,EACxB,wBAAwB,aACtB,kBAAkB,OAAO,QAAQ,CAAC,EACtC;EACA,aAAa;EACb,aAAa,EAAE,uBAAuB,EAAE;EACxC,GAAK,sBAAsB,KAAA,KAAa,EACtC,qBAAqB,kBACvB;EACA,GAAK,sBAAsB,KAAA,KAAa,EAAE,kBAAkB;CAC7D,CAAA;AAEL"}