@mieweb/ui 0.7.1-dev.16 → 0.7.1-dev.18

package/dist/index.d.cts

@@ -2832,6 +2832,8 @@ interface BusinessHoursProps extends VariantProps<typeof containerVariants$1> {
     useShortDayNames?: boolean;
     /** Use 24-hour time format */
     use24Hour?: boolean;
+    /** Group days sharing identical hours into one row (e.g. "Mon, Wed, Fri · 8:00 AM - 11:00 AM") */
+    groupDays?: boolean;
     /** Show header with icon */
     showHeader?: boolean;
     /** Custom header text */
@@ -2839,7 +2841,7 @@ interface BusinessHoursProps extends VariantProps<typeof containerVariants$1> {
     /** Additional CSS classes */
     className?: string;
 }
-declare function BusinessHours({ schedule, variant, size, showStatus, highlightToday, useShortDayNames, use24Hour, showHeader, headerText, className, }: BusinessHoursProps): react_jsx_runtime.JSX.Element;
+declare function BusinessHours({ schedule, variant, size, showStatus, highlightToday, useShortDayNames, use24Hour, groupDays, showHeader, headerText, className, }: BusinessHoursProps): react_jsx_runtime.JSX.Element;
 interface CompactHoursProps {
     /** Business hours schedule data */
     schedule: BusinessHoursSchedule;
@@ -2873,11 +2875,19 @@ interface DaySchedule {
     day: number;
     hours: TimeSlot[];
 }
+
 interface BusinessHoursEditorProps {
     /** Current schedule data */
     value: DaySchedule[];
     /** Callback when schedule changes */
     onChange: (schedule: DaySchedule[]) => void;
+    /**
+     * Editing layout:
+     * - 'days' (default): one section per weekday, add hours per day
+     * - 'rules': compact rows where one time range applies to multiple days
+     *   (e.g. Mon/Wed/Fri 8:00–11:00). Emits the same DaySchedule[] shape.
+     */
+    variant?: 'days' | 'rules';
     /** Whether the editor is disabled */
     disabled?: boolean;
     /** Whether to show description field for each time slot */
@@ -2894,8 +2904,12 @@ interface BusinessHoursEditorProps {
 /**
  * BusinessHoursEditor provides an editable interface for managing business hours.
  * Supports multiple time slots per day with optional descriptions.
+ *
+ * The 'rules' variant edits the same schedule as grouped rows — each row is a
+ * set of day toggles plus one time range — which is faster when several days
+ * share the same hours.
  */
-declare function BusinessHoursEditor({ value, onChange, disabled, showDescription, use24Hour: _use24Hour, weekStartsOn, className, addHoursLabel, }: BusinessHoursEditorProps): react_jsx_runtime.JSX.Element;
+declare function BusinessHoursEditor({ variant, ...props }: BusinessHoursEditorProps): react_jsx_runtime.JSX.Element;
 declare function createDefaultSchedule(): DaySchedule[];
 declare function create24HourSchedule(): DaySchedule[];
 declare function createWeekdaySchedule(start?: string, end?: string): DaySchedule[];

package/dist/index.d.ts

@@ -2832,6 +2832,8 @@ interface BusinessHoursProps extends VariantProps<typeof containerVariants$1> {
     useShortDayNames?: boolean;
     /** Use 24-hour time format */
     use24Hour?: boolean;
+    /** Group days sharing identical hours into one row (e.g. "Mon, Wed, Fri · 8:00 AM - 11:00 AM") */
+    groupDays?: boolean;
     /** Show header with icon */
     showHeader?: boolean;
     /** Custom header text */
@@ -2839,7 +2841,7 @@ interface BusinessHoursProps extends VariantProps<typeof containerVariants$1> {
     /** Additional CSS classes */
     className?: string;
 }
-declare function BusinessHours({ schedule, variant, size, showStatus, highlightToday, useShortDayNames, use24Hour, showHeader, headerText, className, }: BusinessHoursProps): react_jsx_runtime.JSX.Element;
+declare function BusinessHours({ schedule, variant, size, showStatus, highlightToday, useShortDayNames, use24Hour, groupDays, showHeader, headerText, className, }: BusinessHoursProps): react_jsx_runtime.JSX.Element;
 interface CompactHoursProps {
     /** Business hours schedule data */
     schedule: BusinessHoursSchedule;
@@ -2873,11 +2875,19 @@ interface DaySchedule {
     day: number;
     hours: TimeSlot[];
 }
+
 interface BusinessHoursEditorProps {
     /** Current schedule data */
     value: DaySchedule[];
     /** Callback when schedule changes */
     onChange: (schedule: DaySchedule[]) => void;
+    /**
+     * Editing layout:
+     * - 'days' (default): one section per weekday, add hours per day
+     * - 'rules': compact rows where one time range applies to multiple days
+     *   (e.g. Mon/Wed/Fri 8:00–11:00). Emits the same DaySchedule[] shape.
+     */
+    variant?: 'days' | 'rules';
     /** Whether the editor is disabled */
     disabled?: boolean;
     /** Whether to show description field for each time slot */
@@ -2894,8 +2904,12 @@ interface BusinessHoursEditorProps {
 /**
  * BusinessHoursEditor provides an editable interface for managing business hours.
  * Supports multiple time slots per day with optional descriptions.
+ *
+ * The 'rules' variant edits the same schedule as grouped rows — each row is a
+ * set of day toggles plus one time range — which is faster when several days
+ * share the same hours.
  */
-declare function BusinessHoursEditor({ value, onChange, disabled, showDescription, use24Hour: _use24Hour, weekStartsOn, className, addHoursLabel, }: BusinessHoursEditorProps): react_jsx_runtime.JSX.Element;
+declare function BusinessHoursEditor({ variant, ...props }: BusinessHoursEditorProps): react_jsx_runtime.JSX.Element;
 declare function createDefaultSchedule(): DaySchedule[];
 declare function create24HourSchedule(): DaySchedule[];
 declare function createWeekdaySchedule(start?: string, end?: string): DaySchedule[];

package/dist/index.js

@@ -75,8 +75,8 @@ import './chunk-IQ4KQJAO.js';
 export { Breadcrumb, BreadcrumbSlash } from './chunk-5Y5FSR4N.js';
 import { evaluateDue, completedKeys, normalizeOrders } from './chunk-Y5KEFV5O.js';
 export { buildChartOrderRows, buildEncounterOrderRows, dueForOrder, evaluateDue, evaluateProgram, isApplicable } from './chunk-Y5KEFV5O.js';
-import { useCodeLookupConfig, RowActionToolbar, RowIconButton, toolbarKeyNav, parseSig, labelToMedicationFields, MedicationEditor } from './chunk-QOBNYNKZ.js';
-export { ALLERGY_TYPE_LABELS, AllergyList, AllergyManager, CodeLookupProvider, MEDICATION_STATUS_LABELS, MedicationEditor, MedicationList, MedicationReconciliation, RowActionToolbar, RowIconButton, labelToMedicationFields, lookupToMedicationFields, parseMedicationLabel, parseSig, toolbarKeyNav, useCodeLookupConfig } from './chunk-QOBNYNKZ.js';
+import { useCodeLookupConfig, RowActionToolbar, RowIconButton, toolbarKeyNav, parseSig, labelToMedicationFields, MedicationEditor } from './chunk-3SRBIXQX.js';
+export { ALLERGY_TYPE_LABELS, AllergyList, AllergyManager, CodeLookupProvider, MEDICATION_STATUS_LABELS, MedicationEditor, MedicationList, MedicationReconciliation, RowActionToolbar, RowIconButton, labelToMedicationFields, lookupToMedicationFields, parseMedicationLabel, parseSig, toolbarKeyNav, useCodeLookupConfig } from './chunk-3SRBIXQX.js';
 import { Textarea } from './chunk-AFGADE3B.js';
 export { Textarea, textareaVariants } from './chunk-AFGADE3B.js';
 import { Tooltip } from './chunk-FJ7YPVKV.js';
@@ -89,8 +89,8 @@ import { Select } from './chunk-DLBV42JD.js';
 export { Select, selectTriggerVariants } from './chunk-DLBV42JD.js';
 import { Card, CardHeader, CardContent, CardTitle } from './chunk-QYSUYB3S.js';
 export { Card, CardActions, CardBadge, CardCollapsible, CardContent, CardDescription, CardDivider, CardFooter, CardHeader, CardMedia, CardStat, CardTitle, cardAccentVariants, cardVariants } from './chunk-QYSUYB3S.js';
-import { DateInput } from './chunk-RGRSJYZF.js';
-export { DateInput } from './chunk-RGRSJYZF.js';
+import { DateInput } from './chunk-EGWWTIWS.js';
+export { DateInput } from './chunk-EGWWTIWS.js';
 import { Modal, ModalHeader, ModalTitle, ModalClose, ModalBody, ModalFooter } from './chunk-XMCIXHGH.js';
 export { Modal, ModalBody, ModalClose, ModalFooter, ModalHeader, ModalTitle, modalContentVariants, modalOverlayVariants } from './chunk-XMCIXHGH.js';
 import { Input, inputVariants } from './chunk-YXCE2HSK.js';
@@ -10013,6 +10013,50 @@ function LoadingSpinner({ className }) {
     }
   );
 }
+
+// src/components/BusinessHoursEditor/scheduleRules.ts
+function generateId2() {
+  return Math.random().toString(36).substring(2, 9);
+}
+function ruleSignature(slot) {
+  return `${slot.start}\0${slot.end}\0${slot.description ?? ""}`;
+}
+function scheduleToRules(schedule) {
+  const rulesBySignature = /* @__PURE__ */ new Map();
+  const orderedRules = [];
+  for (const day of schedule) {
+    for (const slot of day.hours) {
+      const signature = ruleSignature(slot);
+      const candidates = rulesBySignature.get(signature) ?? [];
+      let rule = candidates.find((r) => !r.days.includes(day.day));
+      if (!rule) {
+        rule = {
+          id: `rule-${orderedRules.length}`,
+          days: [],
+          start: slot.start,
+          end: slot.end,
+          description: slot.description
+        };
+        candidates.push(rule);
+        rulesBySignature.set(signature, candidates);
+        orderedRules.push(rule);
+      }
+      rule.days.push(day.day);
+    }
+  }
+  return orderedRules;
+}
+function rulesToSchedule(rules) {
+  return Array.from({ length: 7 }, (_, day) => ({
+    day,
+    hours: rules.filter((rule) => rule.days.includes(day)).map((rule, index) => ({
+      id: `slot-${day}-${index}`,
+      start: rule.start,
+      end: rule.end,
+      ...rule.description ? { description: rule.description } : {}
+    }))
+  }));
+}
 var DAY_NAMES = {
   0: "Sunday",
   1: "Monday",
@@ -10280,6 +10324,63 @@ function DayScheduleRow({
     }
   );
 }
+function GroupedScheduleRows({
+  officeHours,
+  useShortDayNames = false,
+  use24Hour = false
+}) {
+  const normalized = officeHours.map((dayHours) => ({
+    day: parseDayToNumber(dayHours.day),
+    hours: (dayHours.hours ?? []).map((range) => ({
+      start: range.start ?? "",
+      end: range.end ?? "",
+      ...range.description ? { description: range.description } : {}
+    }))
+  }));
+  const rules = scheduleToRules(normalized);
+  const closedDays = normalized.filter((dayHours) => dayHours.hours.length === 0).map((dayHours) => dayHours.day);
+  const dayNames = useShortDayNames ? DAY_NAMES_SHORT : DAY_NAMES;
+  const formatDays = (days) => days.map((day) => dayNames[day]).join(", ");
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    rules.map((rule) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-slot": "business-hours-grouped-row",
+        className: cn(dayRowVariants({ isToday: false })),
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "data-slot": "business-hours-day-name",
+              className: "min-w-[80px] font-medium",
+              children: formatDays(rule.days)
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { "data-slot": "business-hours-day-hours", className: "text-end", children: /* @__PURE__ */ jsx(TimeRangeDisplay, { range: rule, use24Hour }) })
+        ]
+      },
+      rule.id
+    )),
+    closedDays.length > 0 && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-slot": "business-hours-grouped-row",
+        className: cn(dayRowVariants({ isToday: false })),
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "data-slot": "business-hours-day-name",
+              className: "min-w-[80px] font-medium",
+              children: formatDays(closedDays)
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { "data-slot": "business-hours-day-hours", className: "text-end", children: /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Closed" }) })
+        ]
+      }
+    )
+  ] });
+}
 function BusinessHours({
   schedule,
   variant = "default",
@@ -10288,6 +10389,7 @@ function BusinessHours({
   highlightToday = true,
   useShortDayNames = false,
   use24Hour = false,
+  groupDays = false,
   showHeader = true,
   headerText = "Hours",
   className
@@ -10423,7 +10525,14 @@ function BusinessHours({
                 {
                   "data-slot": "business-hours-schedule",
                   className: "space-y-1 divide-y divide-neutral-100 dark:divide-neutral-800",
-                  children: schedule.officeHours.map((dayHours, idx) => /* @__PURE__ */ jsx(
+                  children: groupDays ? /* @__PURE__ */ jsx(
+                    GroupedScheduleRows,
+                    {
+                      officeHours: schedule.officeHours,
+                      useShortDayNames,
+                      use24Hour
+                    }
+                  ) : schedule.officeHours.map((dayHours, idx) => /* @__PURE__ */ jsx(
                     DayScheduleRow,
                     {
                       dayHours,
@@ -10560,9 +10669,6 @@ var DAY_NAMES2 = [
   "Saturday"
 ];
 var DAY_NAMES_SHORT2 = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
-function generateId2() {
-  return Math.random().toString(36).substring(2, 9);
-}
 function getOrderedDays(weekStartsOn) {
   if (weekStartsOn === 1) {
     return [1, 2, 3, 4, 5, 6, 0];
@@ -10578,6 +10684,15 @@ function ensureAllDays(schedule) {
   return result;
 }
 function BusinessHoursEditor({
+  variant = "days",
+  ...props
+}) {
+  if (variant === "rules") {
+    return /* @__PURE__ */ jsx(BusinessHoursRulesEditor, { ...props });
+  }
+  return /* @__PURE__ */ jsx(BusinessHoursDaysEditor, { ...props });
+}
+function BusinessHoursDaysEditor({
   value,
   onChange,
   disabled = false,
@@ -10847,6 +10962,208 @@ function BusinessHoursEditor({
     }
   );
 }
+function normalizeSchedule(schedule) {
+  return JSON.stringify(
+    ensureAllDays(schedule).map((day) => ({
+      day: day.day,
+      hours: day.hours.map((slot) => ({
+        start: slot.start,
+        end: slot.end,
+        description: slot.description ?? ""
+      }))
+    }))
+  );
+}
+function BusinessHoursRulesEditor({
+  value,
+  onChange,
+  disabled = false,
+  showDescription = true,
+  use24Hour = false,
+  weekStartsOn = 0,
+  className,
+  addHoursLabel = "Add Hours"
+}) {
+  const [rules, setRules] = React10.useState(
+    () => scheduleToRules(value)
+  );
+  const timeFormat = use24Hour ? "24-hour" : "12-hour";
+  const lastScheduleRef = React10.useRef(normalizeSchedule(value));
+  React10.useEffect(() => {
+    const incoming = normalizeSchedule(value);
+    if (incoming !== lastScheduleRef.current) {
+      lastScheduleRef.current = incoming;
+      setRules(scheduleToRules(value));
+    }
+  }, [value]);
+  const emit = useCallback(
+    (nextRules) => {
+      setRules(nextRules);
+      const schedule = rulesToSchedule(nextRules);
+      const normalized = normalizeSchedule(schedule);
+      if (normalized !== lastScheduleRef.current) {
+        lastScheduleRef.current = normalized;
+        onChange(schedule);
+      }
+    },
+    [onChange]
+  );
+  const handleAddRule = useCallback(() => {
+    emit([
+      ...rules,
+      { id: generateId2(), days: [], start: "09:00", end: "17:00" }
+    ]);
+  }, [emit, rules]);
+  const handleRemoveRule = useCallback(
+    (ruleId) => {
+      emit(rules.filter((rule) => rule.id !== ruleId));
+    },
+    [emit, rules]
+  );
+  const handleToggleDay = useCallback(
+    (ruleId, day) => {
+      emit(
+        rules.map(
+          (rule) => rule.id === ruleId ? {
+            ...rule,
+            days: rule.days.includes(day) ? rule.days.filter((d) => d !== day) : [...rule.days, day]
+          } : rule
+        )
+      );
+    },
+    [emit, rules]
+  );
+  const handleRuleChange = useCallback(
+    (ruleId, field, value2) => {
+      emit(
+        rules.map(
+          (rule) => rule.id === ruleId ? { ...rule, [field]: value2 } : rule
+        )
+      );
+    },
+    [emit, rules]
+  );
+  const orderedDays = getOrderedDays(weekStartsOn);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "business-hours-editor",
+      className: cn("business-hours-editor space-y-3", className),
+      children: [
+        rules.map((rule) => /* @__PURE__ */ jsxs(
+          "fieldset",
+          {
+            "data-slot": "business-hours-rule",
+            className: "flex flex-wrap items-center gap-2 border-b border-gray-200 pb-3 last:border-0 dark:border-gray-700",
+            children: [
+              /* @__PURE__ */ jsx("legend", { className: "sr-only", children: "Availability rule" }),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "data-slot": "business-hours-rule-days",
+                  className: "flex shrink-0 gap-1",
+                  children: orderedDays.map((day) => {
+                    const selected = rule.days.includes(day);
+                    return /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        "aria-pressed": selected,
+                        "aria-label": DAY_NAMES2[day],
+                        disabled,
+                        onClick: () => handleToggleDay(rule.id, day),
+                        className: cn(
+                          "inline-flex h-7 w-9 items-center justify-center rounded-full border text-xs font-medium transition-colors",
+                          "focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none",
+                          "disabled:cursor-not-allowed disabled:opacity-50",
+                          selected ? "border-primary-800 bg-primary-800 text-white" : "border-border text-muted-foreground hover:bg-muted hover:text-foreground"
+                        ),
+                        children: DAY_NAMES_SHORT2[day]
+                      },
+                      day
+                    );
+                  })
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: "w-32 sm:w-36", children: /* @__PURE__ */ jsx(
+                DateInput,
+                {
+                  inputType: "time",
+                  timeFormat,
+                  minuteStep: 15,
+                  value: rule.start,
+                  onChange: (time) => handleRuleChange(rule.id, "start", time),
+                  disabled,
+                  size: "sm",
+                  className: "text-sm",
+                  label: "Start time",
+                  hideLabel: true
+                }
+              ) }),
+              /* @__PURE__ */ jsx("span", { "data-slot": "business-hours-separator", className: "text-gray-400", children: "\u2013" }),
+              /* @__PURE__ */ jsx("div", { className: "w-32 sm:w-36", children: /* @__PURE__ */ jsx(
+                DateInput,
+                {
+                  inputType: "time",
+                  timeFormat,
+                  minuteStep: 15,
+                  value: rule.end,
+                  onChange: (time) => handleRuleChange(rule.id, "end", time),
+                  disabled,
+                  size: "sm",
+                  className: "text-sm",
+                  label: "End time",
+                  hideLabel: true
+                }
+              ) }),
+              showDescription && /* @__PURE__ */ jsx("div", { className: "min-w-[120px] flex-1", children: /* @__PURE__ */ jsx(
+                Input,
+                {
+                  type: "text",
+                  value: rule.description || "",
+                  onChange: (e) => handleRuleChange(rule.id, "description", e.target.value),
+                  placeholder: "Description (optional)",
+                  disabled,
+                  className: "text-sm",
+                  "aria-label": "Description"
+                }
+              ) }),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  type: "button",
+                  variant: "ghost",
+                  size: "sm",
+                  onClick: () => handleRemoveRule(rule.id),
+                  disabled,
+                  className: "text-red-500 hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-900/20",
+                  "aria-label": "Remove availability rule",
+                  children: /* @__PURE__ */ jsx(XIcon, { className: "h-4 w-4" })
+                }
+              )
+            ]
+          },
+          rule.id
+        )),
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "sm",
+            onClick: handleAddRule,
+            disabled,
+            className: "text-xs",
+            children: [
+              /* @__PURE__ */ jsx(PlusIcon2, { className: "me-1 h-3 w-3" }),
+              addHoursLabel
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
 function createDefaultSchedule() {
   return [
     { day: 0, hours: [] },