@moving-walls/design-system 1.0.23 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (35) hide show
  1. package/dist/components/ui/AdvancedTable/index.d.ts +3 -0
  2. package/dist/components/ui/AdvancedTable/types.d.ts +51 -0
  3. package/dist/components/ui/AdvancedTable/useAdvancedTable.d.ts +27 -0
  4. package/dist/components/ui/AgGridTable/types.d.ts +2 -0
  5. package/dist/components/ui/Calendar/index.d.ts +3 -0
  6. package/dist/components/ui/Calendar/types.d.ts +14 -0
  7. package/dist/components/ui/Calendar/useCalendar.d.ts +26 -0
  8. package/dist/components/ui/CollapsibleInfoPanel.d.ts +12 -0
  9. package/dist/components/ui/DateRangePicker.d.ts +6 -1
  10. package/dist/components/ui/DesktopOnly.d.ts +8 -0
  11. package/dist/components/ui/DragDrop/DragDropZone.d.ts +14 -0
  12. package/dist/components/ui/DragDrop/FilePreview.d.ts +7 -0
  13. package/dist/components/ui/DragDrop/SortableList.d.ts +8 -0
  14. package/dist/components/ui/DragDrop/index.d.ts +9 -0
  15. package/dist/components/ui/DragDrop/types.d.ts +12 -0
  16. package/dist/components/ui/DragDrop/useDragDrop.d.ts +16 -0
  17. package/dist/components/ui/FocusScope.d.ts +14 -0
  18. package/dist/components/ui/MobileDataCard.d.ts +18 -0
  19. package/dist/components/ui/MobileOnly.d.ts +8 -0
  20. package/dist/components/ui/MobilePagination.d.ts +10 -0
  21. package/dist/components/ui/MobileToolbar.d.ts +12 -0
  22. package/dist/components/ui/ResponsiveStack.d.ts +14 -0
  23. package/dist/components/ui/ScheduleGrid.d.ts +6 -1
  24. package/dist/components/ui/TimeRangePicker.d.ts +8 -1
  25. package/dist/components/ui/VisuallyHidden.d.ts +10 -0
  26. package/dist/components/ui/index.d.ts +22 -0
  27. package/dist/hooks/index.d.ts +3 -0
  28. package/dist/hooks/useMediaQuery.d.ts +6 -0
  29. package/dist/hooks/useResponsiveSheet.d.ts +19 -0
  30. package/dist/index.esm.js +794 -32
  31. package/dist/index.esm.js.map +1 -1
  32. package/dist/index.js +803 -30
  33. package/dist/index.js.map +1 -1
  34. package/dist/tsconfig.build.tsbuildinfo +1 -1
  35. package/package.json +4 -2
package/dist/index.esm.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import require$$1, { jsx, jsxs, Fragment } from 'react/jsx-runtime';
2
2
  import * as React from 'react';
3
- import React__default, { forwardRef, createElement, useLayoutEffect, useState, useRef, useEffect, createContext, useContext, useCallback, useMemo, isValidElement, cloneElement } from 'react';
3
+ import React__default, { forwardRef, createElement, useLayoutEffect, useState, useRef, useEffect, createContext, useContext, useCallback, useMemo, isValidElement, cloneElement, memo } from 'react';
4
4
  import * as ReactDOM from 'react-dom';
5
5
  import ReactDOM__default, { createPortal } from 'react-dom';
6
6
  import { ModuleRegistry, AllCommunityModule } from 'ag-grid-community';
@@ -269,14 +269,17 @@ var Input = /*#__PURE__*/forwardRef(function (_a, ref) {
269
269
  label = _a.label,
270
270
  error = _a.error,
271
271
  helpText = _a.helpText,
272
- props = __rest$1(_a, ["className", "label", "error", "helpText"]);
272
+ id = _a.id,
273
+ props = __rest$1(_a, ["className", "label", "error", "helpText", "id"]);
273
274
  return jsxs("div", {
274
275
  className: "space-y-2",
275
276
  children: [label && jsx("label", {
277
+ htmlFor: id,
276
278
  className: "block text-sm font-normal leading-none text-mw-neutral-700 dark:text-mw-neutral-300",
277
279
  children: label
278
280
  }), jsx("input", Object.assign({
279
281
  ref: ref,
282
+ id: id,
280
283
  className: clsx('block w-full h-10 min-h-10 px-3 py-2 border rounded-md text-sm font-normal', 'focus:outline-none focus:ring-1 focus:ring-mw-primary-500 focus:border-transparent', 'disabled:opacity-50 disabled:cursor-not-allowed', error ? 'border-mw-error-300 text-mw-error-900 placeholder-mw-error-300 focus:ring-mw-error-500' : 'border-mw-neutral-100 dark:border-mw-neutral-600 text-mw-neutral-500 dark:text-white placeholder-mw-neutral-400', 'dark:bg-mw-neutral-800', className)
281
284
  }, props)), error && jsx("p", {
282
285
  className: "text-sm text-mw-error-600 dark:text-mw-error-400",
@@ -296,7 +299,8 @@ var Textarea = /*#__PURE__*/forwardRef(function (_a, ref) {
296
299
  helpText = _a.helpText,
297
300
  _a$resize = _a.resize,
298
301
  resize = _a$resize === void 0 ? 'vertical' : _a$resize,
299
- props = __rest$1(_a, ["className", "label", "error", "helpText", "resize"]);
302
+ id = _a.id,
303
+ props = __rest$1(_a, ["className", "label", "error", "helpText", "resize", "id"]);
300
304
  var resizeClasses = {
301
305
  none: 'resize-none',
302
306
  vertical: 'resize-y',
@@ -306,10 +310,12 @@ var Textarea = /*#__PURE__*/forwardRef(function (_a, ref) {
306
310
  return jsxs("div", {
307
311
  className: "space-y-2",
308
312
  children: [label && jsx("label", {
313
+ htmlFor: id,
309
314
  className: "block text-sm font-medium text-mw-neutral-700 dark:text-mw-neutral-300",
310
315
  children: label
311
316
  }), jsx("textarea", Object.assign({
312
317
  ref: ref,
318
+ id: id,
313
319
  className: clsx('block w-full px-3 py-2 border rounded-md shadow-sm min-h-[80px]', 'focus:outline-none focus:ring-2 focus:ring-mw-primary-500 focus:border-transparent', 'disabled:opacity-50 disabled:cursor-not-allowed', error ? 'border-mw-error-300 text-mw-error-900 placeholder-mw-error-300 focus:ring-mw-error-500' : 'border-mw-neutral-300 dark:border-mw-neutral-600 text-mw-neutral-900 dark:text-white placeholder-mw-neutral-400', 'dark:bg-mw-neutral-800', resizeClasses[resize], className)
314
320
  }, props)), error && jsx("p", {
315
321
  className: "text-sm text-mw-error-600 dark:text-mw-error-400",
@@ -327,7 +333,8 @@ var Checkbox = /*#__PURE__*/forwardRef(function (_a, ref) {
327
333
  label = _a.label,
328
334
  description = _a.description,
329
335
  error = _a.error,
330
- props = __rest$1(_a, ["className", "label", "description", "error"]);
336
+ id = _a.id,
337
+ props = __rest$1(_a, ["className", "label", "description", "error", "id"]);
331
338
  return jsxs("div", {
332
339
  className: "space-y-2",
333
340
  children: [jsxs("div", {
@@ -335,10 +342,12 @@ var Checkbox = /*#__PURE__*/forwardRef(function (_a, ref) {
335
342
  children: [jsx("input", Object.assign({
336
343
  type: "checkbox",
337
344
  ref: ref,
345
+ id: id,
338
346
  className: clsx('mt-0.5 h-4 w-4 rounded border-mw-neutral-100 dark:border-mw-neutral-600', 'accent-mw-primary-500 focus:ring-mw-primary-600 focus:ring-offset-2', 'disabled:opacity-50 disabled:cursor-not-allowed', error && 'border-mw-error-300 accent-mw-error-500 focus:ring-mw-error-500', className)
339
347
  }, props)), (label || description) && jsxs("div", {
340
348
  className: "flex-1 min-w-0",
341
349
  children: [label && jsx("label", {
350
+ htmlFor: id,
342
351
  className: "text-sm font-medium text-mw-neutral-500 dark:text-mw-neutral-300",
343
352
  children: label
344
353
  }), description && jsx("p", {
@@ -358,7 +367,8 @@ var Radio$1 = /*#__PURE__*/forwardRef(function (_a, ref) {
358
367
  label = _a.label,
359
368
  description = _a.description,
360
369
  error = _a.error,
361
- props = __rest$1(_a, ["className", "label", "description", "error"]);
370
+ id = _a.id,
371
+ props = __rest$1(_a, ["className", "label", "description", "error", "id"]);
362
372
  return jsxs("div", {
363
373
  className: "space-y-2",
364
374
  children: [jsxs("div", {
@@ -366,10 +376,12 @@ var Radio$1 = /*#__PURE__*/forwardRef(function (_a, ref) {
366
376
  children: [jsx("input", Object.assign({
367
377
  type: "radio",
368
378
  ref: ref,
379
+ id: id,
369
380
  className: clsx('mt-0.5 h-4 w-4 border-mw-neutral-100 dark:border-mw-neutral-600', 'accent-mw-primary-500 focus:ring-mw-primary-600 focus:ring-offset-2', 'disabled:opacity-50 disabled:cursor-not-allowed', error && 'border-mw-error-300 accent-mw-error-500 focus:ring-mw-error-500', className)
370
381
  }, props)), (label || description) && jsxs("div", {
371
382
  className: "flex-1 min-w-0",
372
383
  children: [label && jsx("label", {
384
+ htmlFor: id,
373
385
  className: "text-sm font-medium text-mw-neutral-500 dark:text-mw-neutral-300",
374
386
  children: label
375
387
  }), description && jsx("p", {
@@ -31434,7 +31446,7 @@ var AUTOFOCUS_ON_MOUNT = "focusScope.autoFocusOnMount";
31434
31446
  var AUTOFOCUS_ON_UNMOUNT = "focusScope.autoFocusOnUnmount";
31435
31447
  var EVENT_OPTIONS = { bubbles: false, cancelable: true };
31436
31448
  var FOCUS_SCOPE_NAME = "FocusScope";
31437
- var FocusScope = React.forwardRef((props, forwardedRef) => {
31449
+ var FocusScope$1 = React.forwardRef((props, forwardedRef) => {
31438
31450
  const { loop = false, trapped = false, onMountAutoFocus: onMountAutoFocusProp, onUnmountAutoFocus: onUnmountAutoFocusProp } = props, scopeProps = __rest$1(props, ["loop", "trapped", "onMountAutoFocus", "onUnmountAutoFocus"]);
31439
31451
  const [container, setContainer] = React.useState(null);
31440
31452
  const onMountAutoFocus = useCallbackRef$1(onMountAutoFocusProp);
@@ -31554,7 +31566,7 @@ var FocusScope = React.forwardRef((props, forwardedRef) => {
31554
31566
  }, [loop, trapped, focusScope.paused]);
31555
31567
  return /* @__PURE__ */ jsx(Primitive.div, Object.assign(Object.assign({ tabIndex: -1 }, scopeProps), { ref: composedRefs, onKeyDown: handleKeyDown }));
31556
31568
  });
31557
- FocusScope.displayName = FOCUS_SCOPE_NAME;
31569
+ FocusScope$1.displayName = FOCUS_SCOPE_NAME;
31558
31570
  function focusFirst(candidates, { select = false } = {}) {
31559
31571
  const previouslyFocusedElement = document.activeElement;
31560
31572
  for (const candidate of candidates) {
@@ -33906,10 +33918,10 @@ var VISUALLY_HIDDEN_STYLES = Object.freeze({
33906
33918
  wordWrap: "normal"
33907
33919
  });
33908
33920
  var NAME = "VisuallyHidden";
33909
- var VisuallyHidden = React.forwardRef((props, forwardedRef) => {
33921
+ var VisuallyHidden$1 = React.forwardRef((props, forwardedRef) => {
33910
33922
  return /* @__PURE__ */ jsx(Primitive.span, Object.assign(Object.assign({}, props), { ref: forwardedRef, style: Object.assign(Object.assign({}, VISUALLY_HIDDEN_STYLES), props.style) }));
33911
33923
  });
33912
- VisuallyHidden.displayName = NAME;
33924
+ VisuallyHidden$1.displayName = NAME;
33913
33925
 
33914
33926
  var getDefaultParent = function (originalTarget) {
33915
33927
  if (typeof document === 'undefined') {
@@ -35082,7 +35094,7 @@ var SelectContentImpl = React.forwardRef((props, forwardedRef) => {
35082
35094
  position,
35083
35095
  isPositioned,
35084
35096
  searchRef,
35085
- children: /* @__PURE__ */ jsx(ReactRemoveScroll, { as: Slot, allowPinchZoom: true, children: /* @__PURE__ */ jsx(FocusScope, {
35097
+ children: /* @__PURE__ */ jsx(ReactRemoveScroll, { as: Slot, allowPinchZoom: true, children: /* @__PURE__ */ jsx(FocusScope$1, {
35086
35098
  asChild: true,
35087
35099
  trapped: context.open,
35088
35100
  onMountAutoFocus: (event) => {
@@ -36124,8 +36136,7 @@ var daysOfWeek = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
36124
36136
  function DatePicker(_ref) {
36125
36137
  var value = _ref.value,
36126
36138
  onChange = _ref.onChange,
36127
- _ref$placeholder = _ref.placeholder,
36128
- placeholder = _ref$placeholder === void 0 ? 'Select date' : _ref$placeholder,
36139
+ placeholder = _ref.placeholder,
36129
36140
  _ref$disabled = _ref.disabled,
36130
36141
  disabled = _ref$disabled === void 0 ? false : _ref$disabled,
36131
36142
  className = _ref.className,
@@ -36362,9 +36373,10 @@ function CalendarMonth(_ref) {
36362
36373
  }
36363
36374
  // Next month's leading days
36364
36375
  var totalCells = Math.ceil(days.length / 7) * 7;
36365
- for (var _i = days.length; _i < totalCells; _i++) {
36366
- var _date2 = new Date(lastDayOfMonth);
36367
- _date2.setDate(_date2.getDate() + (_i - days.length + 1));
36376
+ var nextMonthStart = days.length;
36377
+ for (var _i = nextMonthStart; _i < totalCells; _i++) {
36378
+ var nextDay = _i - nextMonthStart + 1;
36379
+ var _date2 = new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1, nextDay);
36368
36380
  days.push({
36369
36381
  date: _date2,
36370
36382
  isCurrentMonth: false
@@ -36467,8 +36479,8 @@ function CalendarMonth(_ref) {
36467
36479
  function DateRangePicker(_ref3) {
36468
36480
  var value = _ref3.value,
36469
36481
  onChange = _ref3.onChange,
36470
- _ref3$placeholder = _ref3.placeholder,
36471
- placeholder = _ref3$placeholder === void 0 ? 'Select date range' : _ref3$placeholder,
36482
+ placeholder = _ref3.placeholder,
36483
+ labels = _ref3.labels,
36472
36484
  _ref3$disabled = _ref3.disabled,
36473
36485
  disabled = _ref3$disabled === void 0 ? false : _ref3$disabled;
36474
36486
  _ref3.required;
@@ -36485,6 +36497,7 @@ function DateRangePicker(_ref3) {
36485
36497
  presets = _ref3$presets === void 0 ? defaultPresets$1 : _ref3$presets,
36486
36498
  _ref3$align = _ref3.align,
36487
36499
  align = _ref3$align === void 0 ? 'left' : _ref3$align;
36500
+ var _a, _b;
36488
36501
  var _useState = useState(false),
36489
36502
  _useState2 = _slicedToArray(_useState, 2),
36490
36503
  isOpen = _useState2[0],
@@ -36650,7 +36663,7 @@ function DateRangePicker(_ref3) {
36650
36663
  className: "flex items-center justify-between px-3 py-2 border-t border-mw-neutral-200 dark:border-mw-neutral-700",
36651
36664
  children: [jsx("div", {
36652
36665
  className: "text-[11px] text-mw-neutral-500 dark:text-mw-neutral-400",
36653
- children: selectingStart ? 'Select start date' : 'Select end date'
36666
+ children: selectingStart ? (_a = labels === null || labels === void 0 ? void 0 : labels.selectStart) !== null && _a !== void 0 ? _a : 'Select start date' : (_b = labels === null || labels === void 0 ? void 0 : labels.selectEnd) !== null && _b !== void 0 ? _b : 'Select end date'
36654
36667
  }), jsxs("div", {
36655
36668
  className: "flex gap-2 items-center",
36656
36669
  children: [jsx("button", {
@@ -36811,8 +36824,7 @@ function TimePicker(_ref2) {
36811
36824
  label = _ref2.label,
36812
36825
  error = _ref2.error,
36813
36826
  helpText = _ref2.helpText,
36814
- _ref2$placeholder = _ref2.placeholder,
36815
- placeholder = _ref2$placeholder === void 0 ? 'Select time' : _ref2$placeholder,
36827
+ placeholder = _ref2.placeholder,
36816
36828
  className = _ref2.className,
36817
36829
  _ref2$size = _ref2.size,
36818
36830
  size = _ref2$size === void 0 ? 'md' : _ref2$size,
@@ -37178,8 +37190,7 @@ function TimeSelect(_ref) {
37178
37190
  function TimeRangePicker(_ref2) {
37179
37191
  var value = _ref2.value,
37180
37192
  onChange = _ref2.onChange,
37181
- _ref2$placeholder = _ref2.placeholder,
37182
- placeholder = _ref2$placeholder === void 0 ? 'Select time range' : _ref2$placeholder,
37193
+ placeholder = _ref2.placeholder,
37183
37194
  _ref2$disabled = _ref2.disabled,
37184
37195
  disabled = _ref2$disabled === void 0 ? false : _ref2$disabled;
37185
37196
  _ref2.required;
@@ -37192,8 +37203,10 @@ function TimeRangePicker(_ref2) {
37192
37203
  minTime = _ref2.minTime,
37193
37204
  maxTime = _ref2.maxTime,
37194
37205
  className = _ref2.className,
37206
+ labels = _ref2.labels,
37195
37207
  _ref2$presets = _ref2.presets,
37196
37208
  presets = _ref2$presets === void 0 ? defaultPresets : _ref2$presets;
37209
+ var _a, _b;
37197
37210
  var _useState5 = useState(value || {
37198
37211
  from: null,
37199
37212
  to: null
@@ -37330,13 +37343,13 @@ function TimeRangePicker(_ref2) {
37330
37343
  children: [jsxs("div", {
37331
37344
  children: [jsx("label", {
37332
37345
  className: "block text-sm font-medium mb-2 text-mw-neutral-900 dark:text-white",
37333
- children: "From Time"
37346
+ children: (_a = labels === null || labels === void 0 ? void 0 : labels.fromTime) !== null && _a !== void 0 ? _a : 'From Time'
37334
37347
  }), jsx(TimeSelect, {
37335
37348
  value: selectedRange.from,
37336
37349
  onChange: handleFromTimeChange,
37337
37350
  options: timeOptions,
37338
37351
  format: format,
37339
- placeholder: "Select start time",
37352
+ placeholder: labels === null || labels === void 0 ? void 0 : labels.selectStart,
37340
37353
  disabled: disabled,
37341
37354
  minTime: minTime,
37342
37355
  maxTime: selectedRange.to ? format === '12' ? convertTo24Hour(selectedRange.to) : selectedRange.to : maxTime
@@ -37344,13 +37357,13 @@ function TimeRangePicker(_ref2) {
37344
37357
  }), jsxs("div", {
37345
37358
  children: [jsx("label", {
37346
37359
  className: "block text-sm font-medium mb-2 text-mw-neutral-900 dark:text-white",
37347
- children: "To Time"
37360
+ children: (_b = labels === null || labels === void 0 ? void 0 : labels.toTime) !== null && _b !== void 0 ? _b : 'To Time'
37348
37361
  }), jsx(TimeSelect, {
37349
37362
  value: selectedRange.to,
37350
37363
  onChange: handleToTimeChange,
37351
37364
  options: timeOptions,
37352
37365
  format: format,
37353
- placeholder: "Select end time",
37366
+ placeholder: labels === null || labels === void 0 ? void 0 : labels.selectEnd,
37354
37367
  disabled: disabled || !selectedRange.from,
37355
37368
  minTime: selectedRange.from ? format === '12' ? convertTo24Hour(selectedRange.from) : selectedRange.from : minTime,
37356
37369
  maxTime: maxTime
@@ -38679,8 +38692,7 @@ function MultiSelect(_ref) {
38679
38692
  _ref$value = _ref.value,
38680
38693
  value = _ref$value === void 0 ? [] : _ref$value,
38681
38694
  onChange = _ref.onChange,
38682
- _ref$placeholder = _ref.placeholder,
38683
- placeholder = _ref$placeholder === void 0 ? 'Select...' : _ref$placeholder,
38695
+ placeholder = _ref.placeholder,
38684
38696
  label = _ref.label,
38685
38697
  _ref$disabled = _ref.disabled,
38686
38698
  disabled = _ref$disabled === void 0 ? false : _ref$disabled,
@@ -39137,7 +39149,8 @@ function ScheduleGrid(_ref) {
39137
39149
  _ref$presets = _ref.presets,
39138
39150
  presets = _ref$presets === void 0 ? DEFAULT_PRESETS : _ref$presets,
39139
39151
  _ref$showPresets = _ref.showPresets,
39140
- showPresets = _ref$showPresets === void 0 ? true : _ref$showPresets;
39152
+ showPresets = _ref$showPresets === void 0 ? true : _ref$showPresets,
39153
+ labels = _ref.labels;
39141
39154
  var _useState = useState('custom'),
39142
39155
  _useState2 = _slicedToArray(_useState, 2),
39143
39156
  selectedPreset = _useState2[0],
@@ -39260,6 +39273,7 @@ function ScheduleGrid(_ref) {
39260
39273
  onChange(newRules);
39261
39274
  };
39262
39275
  var renderHourGrid = function renderHourGrid(type, selectedHours) {
39276
+ var _a, _b;
39263
39277
  var allSelected = selectedHours.size === 24;
39264
39278
  var label = type === 'DEFAULT' ? 'Default Hours' : type === 'WEEKDAY' ? 'Weekday Hours (Mon-Fri)' : 'Weekend Hours (Sat-Sun)';
39265
39279
  var isExpanded = expandedSection === type.toLowerCase();
@@ -39294,7 +39308,7 @@ function ScheduleGrid(_ref) {
39294
39308
  return handleSelectAll(type);
39295
39309
  },
39296
39310
  className: "text-xs text-mw-primary-500 hover:text-mw-primary-600 font-medium",
39297
- children: allSelected ? 'Deselect All' : 'Select All 24 Hours'
39311
+ children: allSelected ? (_a = labels === null || labels === void 0 ? void 0 : labels.deselectAll) !== null && _a !== void 0 ? _a : 'Deselect All' : (_b = labels === null || labels === void 0 ? void 0 : labels.selectAll) !== null && _b !== void 0 ? _b : 'Select All 24 Hours'
39298
39312
  })
39299
39313
  }), jsx("div", {
39300
39314
  className: "grid grid-cols-6 gap-1.5",
@@ -42904,6 +42918,221 @@ function AdvancedTable(_ref3) {
42904
42918
  });
42905
42919
  }
42906
42920
 
42921
+ function getCellValue(row, column) {
42922
+ if (column.accessorFn) return column.accessorFn(row);
42923
+ if (column.accessorKey) return row[column.accessorKey];
42924
+ return undefined;
42925
+ }
42926
+ function useAdvancedTable(_ref) {
42927
+ var data = _ref.data,
42928
+ columns = _ref.columns,
42929
+ _ref$initialState = _ref.initialState,
42930
+ initialState = _ref$initialState === void 0 ? {} : _ref$initialState,
42931
+ _ref$getRowId = _ref.getRowId,
42932
+ getRowId = _ref$getRowId === void 0 ? function (_row, index) {
42933
+ return index;
42934
+ } : _ref$getRowId;
42935
+ var _useState = useState(initialState.sorting || []),
42936
+ _useState2 = _slicedToArray(_useState, 2),
42937
+ sorting = _useState2[0],
42938
+ setSorting = _useState2[1];
42939
+ var _useState3 = useState(initialState.filters || []),
42940
+ _useState4 = _slicedToArray(_useState3, 2),
42941
+ filters = _useState4[0],
42942
+ setFilters = _useState4[1];
42943
+ var _useState5 = useState(initialState.globalFilter || ''),
42944
+ _useState6 = _slicedToArray(_useState5, 2),
42945
+ globalFilter = _useState6[0],
42946
+ setGlobalFilter = _useState6[1];
42947
+ var _useState7 = useState(initialState.columnVisibility || {}),
42948
+ _useState8 = _slicedToArray(_useState7, 2),
42949
+ columnVisibility = _useState8[0],
42950
+ setColumnVisibility = _useState8[1];
42951
+ var _useState9 = useState(initialState.density || 'normal'),
42952
+ _useState0 = _slicedToArray(_useState9, 2),
42953
+ density = _useState0[0],
42954
+ setDensity = _useState0[1];
42955
+ var _useState1 = useState(new Set()),
42956
+ _useState10 = _slicedToArray(_useState1, 2),
42957
+ selectedRows = _useState10[0],
42958
+ setSelectedRows = _useState10[1];
42959
+ var visibleColumns = useMemo(function () {
42960
+ return columns.filter(function (col) {
42961
+ return columnVisibility[col.id] !== false && !col.hidden;
42962
+ });
42963
+ }, [columns, columnVisibility]);
42964
+ var toggleSort = useCallback(function (columnId) {
42965
+ setSorting(function (prev) {
42966
+ var existing = prev.find(function (s) {
42967
+ return s.columnId === columnId;
42968
+ });
42969
+ if (!existing) return [{
42970
+ columnId: columnId,
42971
+ direction: 'asc'
42972
+ }];
42973
+ if (existing.direction === 'asc') return [{
42974
+ columnId: columnId,
42975
+ direction: 'desc'
42976
+ }];
42977
+ return [];
42978
+ });
42979
+ }, []);
42980
+ var addFilter = useCallback(function (filter) {
42981
+ setFilters(function (prev) {
42982
+ var idx = prev.findIndex(function (f) {
42983
+ return f.columnId === filter.columnId;
42984
+ });
42985
+ if (idx >= 0) {
42986
+ var next = _toConsumableArray(prev);
42987
+ next[idx] = filter;
42988
+ return next;
42989
+ }
42990
+ return [].concat(_toConsumableArray(prev), [filter]);
42991
+ });
42992
+ }, []);
42993
+ var removeFilter = useCallback(function (columnId) {
42994
+ setFilters(function (prev) {
42995
+ return prev.filter(function (f) {
42996
+ return f.columnId !== columnId;
42997
+ });
42998
+ });
42999
+ }, []);
43000
+ var clearFilters = useCallback(function () {
43001
+ setFilters([]);
43002
+ setGlobalFilter('');
43003
+ }, []);
43004
+ var toggleColumnVisibility = useCallback(function (columnId) {
43005
+ setColumnVisibility(function (prev) {
43006
+ return Object.assign(Object.assign({}, prev), _defineProperty({}, columnId, prev[columnId] === false ? true : false));
43007
+ });
43008
+ }, []);
43009
+ var toggleRowSelection = useCallback(function (rowId) {
43010
+ setSelectedRows(function (prev) {
43011
+ var next = new Set(prev);
43012
+ if (next.has(rowId)) next["delete"](rowId);else next.add(rowId);
43013
+ return next;
43014
+ });
43015
+ }, []);
43016
+ var selectAllRows = useCallback(function () {
43017
+ setSelectedRows(new Set(data.map(function (row, i) {
43018
+ return getRowId(row, i);
43019
+ })));
43020
+ }, [data, getRowId]);
43021
+ var clearSelection = useCallback(function () {
43022
+ setSelectedRows(new Set());
43023
+ }, []);
43024
+ var processedData = useMemo(function () {
43025
+ var result = _toConsumableArray(data);
43026
+ // Apply global filter
43027
+ if (globalFilter) {
43028
+ var searchLower = globalFilter.toLowerCase();
43029
+ result = result.filter(function (row) {
43030
+ return columns.some(function (col) {
43031
+ if (!col.searchable && col.searchable !== undefined) return false;
43032
+ var value = getCellValue(row, col);
43033
+ return value != null && String(value).toLowerCase().includes(searchLower);
43034
+ });
43035
+ });
43036
+ }
43037
+ // Apply column filters
43038
+ var _iterator = _createForOfIteratorHelper(filters),
43039
+ _step;
43040
+ try {
43041
+ var _loop = function _loop() {
43042
+ var filter = _step.value;
43043
+ var column = columns.find(function (c) {
43044
+ return c.id === filter.columnId;
43045
+ });
43046
+ if (!column) return 1; // continue
43047
+ result = result.filter(function (row) {
43048
+ var value = getCellValue(row, column);
43049
+ if (value == null) return false;
43050
+ var strValue = String(value).toLowerCase();
43051
+ var filterValue = String(filter.value).toLowerCase();
43052
+ switch (filter.operator || 'contains') {
43053
+ case 'equals':
43054
+ return strValue === filterValue;
43055
+ case 'contains':
43056
+ return strValue.includes(filterValue);
43057
+ case 'startsWith':
43058
+ return strValue.startsWith(filterValue);
43059
+ case 'endsWith':
43060
+ return strValue.endsWith(filterValue);
43061
+ default:
43062
+ return strValue.includes(filterValue);
43063
+ }
43064
+ });
43065
+ };
43066
+ for (_iterator.s(); !(_step = _iterator.n()).done;) {
43067
+ if (_loop()) continue;
43068
+ }
43069
+ // Apply sorting
43070
+ } catch (err) {
43071
+ _iterator.e(err);
43072
+ } finally {
43073
+ _iterator.f();
43074
+ }
43075
+ if (sorting.length > 0) {
43076
+ var sort = sorting[0];
43077
+ var column = columns.find(function (c) {
43078
+ return c.id === sort.columnId;
43079
+ });
43080
+ if (column) {
43081
+ result.sort(function (a, b) {
43082
+ var aVal = getCellValue(a, column);
43083
+ var bVal = getCellValue(b, column);
43084
+ if (aVal == null && bVal == null) return 0;
43085
+ if (aVal == null) return 1;
43086
+ if (bVal == null) return -1;
43087
+ var cmp = String(aVal).localeCompare(String(bVal), undefined, {
43088
+ numeric: true
43089
+ });
43090
+ return sort.direction === 'desc' ? -cmp : cmp;
43091
+ });
43092
+ }
43093
+ }
43094
+ return result;
43095
+ }, [data, columns, sorting, filters, globalFilter]);
43096
+ var state = {
43097
+ sorting: sorting,
43098
+ filters: filters,
43099
+ globalFilter: globalFilter,
43100
+ columnVisibility: columnVisibility,
43101
+ columnOrder: columns.map(function (c) {
43102
+ return c.id;
43103
+ }),
43104
+ columnSizing: {},
43105
+ density: density,
43106
+ frozenColumns: {
43107
+ left: [],
43108
+ right: []
43109
+ }
43110
+ };
43111
+ return {
43112
+ // Data
43113
+ processedData: processedData,
43114
+ visibleColumns: visibleColumns,
43115
+ // State
43116
+ state: state,
43117
+ sorting: sorting,
43118
+ filters: filters,
43119
+ globalFilter: globalFilter,
43120
+ density: density,
43121
+ selectedRows: selectedRows,
43122
+ // Actions
43123
+ toggleSort: toggleSort,
43124
+ addFilter: addFilter,
43125
+ removeFilter: removeFilter,
43126
+ clearFilters: clearFilters,
43127
+ setGlobalFilter: setGlobalFilter,
43128
+ setDensity: setDensity,
43129
+ toggleColumnVisibility: toggleColumnVisibility,
43130
+ toggleRowSelection: toggleRowSelection,
43131
+ selectAllRows: selectAllRows,
43132
+ clearSelection: clearSelection
43133
+ };
43134
+ }
43135
+
42907
43136
  var emptyStateIcons = {
42908
43137
  noData: jsx(Database, {
42909
43138
  className: "w-12 h-12 text-mw-neutral-400"
@@ -47098,6 +47327,121 @@ function DayView(_ref4) {
47098
47327
  });
47099
47328
  }
47100
47329
 
47330
+ function useCalendar(_ref) {
47331
+ var value = _ref.value,
47332
+ _ref$events = _ref.events,
47333
+ events = _ref$events === void 0 ? [] : _ref$events,
47334
+ _ref$view = _ref.view,
47335
+ view = _ref$view === void 0 ? 'month' : _ref$view,
47336
+ onViewChange = _ref.onViewChange,
47337
+ onChange = _ref.onChange,
47338
+ _ref$hourFormat = _ref.hourFormat,
47339
+ hourFormat = _ref$hourFormat === void 0 ? 24 : _ref$hourFormat;
47340
+ var _useState = useState(value || new Date()),
47341
+ _useState2 = _slicedToArray(_useState, 2),
47342
+ currentDate = _useState2[0],
47343
+ setCurrentDate = _useState2[1];
47344
+ var _useState3 = useState(view),
47345
+ _useState4 = _slicedToArray(_useState3, 2),
47346
+ currentView = _useState4[0],
47347
+ setCurrentView = _useState4[1];
47348
+ var today = new Date();
47349
+ var _useMemo = useMemo(function () {
47350
+ return {
47351
+ year: currentDate.getFullYear(),
47352
+ month: currentDate.getMonth()
47353
+ };
47354
+ }, [currentDate]),
47355
+ year = _useMemo.year,
47356
+ month = _useMemo.month;
47357
+ var handleViewChange = useCallback(function (newView) {
47358
+ setCurrentView(newView);
47359
+ onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange(newView);
47360
+ }, [onViewChange]);
47361
+ var handleDateSelect = useCallback(function (date) {
47362
+ setCurrentDate(date);
47363
+ onChange === null || onChange === void 0 ? void 0 : onChange(date);
47364
+ }, [onChange]);
47365
+ var navigateMonth = useCallback(function (delta) {
47366
+ setCurrentDate(function (prev) {
47367
+ return new Date(prev.getFullYear(), prev.getMonth() + delta, 1);
47368
+ });
47369
+ }, []);
47370
+ var navigateWeek = useCallback(function (delta) {
47371
+ setCurrentDate(function (prev) {
47372
+ var d = new Date(prev);
47373
+ d.setDate(d.getDate() + delta * 7);
47374
+ return d;
47375
+ });
47376
+ }, []);
47377
+ var navigateDay = useCallback(function (delta) {
47378
+ setCurrentDate(function (prev) {
47379
+ var d = new Date(prev);
47380
+ d.setDate(d.getDate() + delta);
47381
+ return d;
47382
+ });
47383
+ }, []);
47384
+ var goToToday = useCallback(function () {
47385
+ setCurrentDate(new Date());
47386
+ }, []);
47387
+ var getEventsForDate = useCallback(function (date) {
47388
+ return events.filter(function (event) {
47389
+ return event.date.toDateString() === date.toDateString();
47390
+ });
47391
+ }, [events]);
47392
+ var getEventsForTimeSlot = useCallback(function (date, timeSlot) {
47393
+ var dateEvents = getEventsForDate(date);
47394
+ return dateEvents.filter(function (event) {
47395
+ if (event.allDay) return false;
47396
+ if (!event.startTime) return false;
47397
+ var eventStart = event.startTime;
47398
+ return eventStart === timeSlot;
47399
+ });
47400
+ }, [getEventsForDate]);
47401
+ var formatTime = useCallback(function (time) {
47402
+ if (hourFormat === 12) {
47403
+ var _time$split$map = time.split(':').map(Number),
47404
+ _time$split$map2 = _slicedToArray(_time$split$map, 2),
47405
+ hours = _time$split$map2[0],
47406
+ minutes = _time$split$map2[1];
47407
+ var ampm = hours >= 12 ? 'PM' : 'AM';
47408
+ var displayHours = hours % 12 || 12;
47409
+ return "".concat(displayHours, ":").concat(minutes.toString().padStart(2, '0'), " ").concat(ampm);
47410
+ }
47411
+ return time;
47412
+ }, [hourFormat]);
47413
+ var getWeekDates = useCallback(function (date) {
47414
+ var startOfWeek = new Date(date);
47415
+ var day = startOfWeek.getDay();
47416
+ var diff = startOfWeek.getDate() - day + (day === 0 ? -6 : 1);
47417
+ startOfWeek.setDate(diff);
47418
+ var weekDates = [];
47419
+ for (var i = 0; i < 7; i++) {
47420
+ var weekDate = new Date(startOfWeek);
47421
+ weekDate.setDate(startOfWeek.getDate() + i);
47422
+ weekDates.push(weekDate);
47423
+ }
47424
+ return weekDates;
47425
+ }, []);
47426
+ return {
47427
+ currentDate: currentDate,
47428
+ currentView: currentView,
47429
+ today: today,
47430
+ year: year,
47431
+ month: month,
47432
+ handleViewChange: handleViewChange,
47433
+ handleDateSelect: handleDateSelect,
47434
+ navigateMonth: navigateMonth,
47435
+ navigateWeek: navigateWeek,
47436
+ navigateDay: navigateDay,
47437
+ goToToday: goToToday,
47438
+ getEventsForDate: getEventsForDate,
47439
+ getEventsForTimeSlot: getEventsForTimeSlot,
47440
+ formatTime: formatTime,
47441
+ getWeekDates: getWeekDates
47442
+ };
47443
+ }
47444
+
47101
47445
  function cn$8() {
47102
47446
  for (var _len = arguments.length, classes = new Array(_len), _key = 0; _key < _len; _key++) {
47103
47447
  classes[_key] = arguments[_key];
@@ -49551,7 +49895,8 @@ function AgGridTableInner(props) {
49551
49895
  cacheBlockSize = props.cacheBlockSize,
49552
49896
  footerData = props.footerData,
49553
49897
  _props$pagination = props.pagination,
49554
- pagination = _props$pagination === void 0 ? true : _props$pagination;
49898
+ pagination = _props$pagination === void 0 ? true : _props$pagination,
49899
+ onBodyScrollEnd = props.onBodyScrollEnd;
49555
49900
  var gridRef = useRef(null);
49556
49901
  var apiRef = useRef(null);
49557
49902
  var isSortFromExternalRef = useRef(false);
@@ -49719,6 +50064,9 @@ function AgGridTableInner(props) {
49719
50064
  paginationPageSize: useGridPagination ? (_a = serverSideConfig === null || serverSideConfig === void 0 ? void 0 : serverSideConfig.pageSize) !== null && _a !== void 0 ? _a : 10 : undefined,
49720
50065
  paginationPageSizeSelector: useGridPagination ? (_b = serverSideConfig === null || serverSideConfig === void 0 ? void 0 : serverSideConfig.pageSizeSelector) !== null && _b !== void 0 ? _b : DEFAULT_PAGE_SIZE_SELECTOR : undefined,
49721
50066
  cacheBlockSize: cacheBlockSize,
50067
+ onBodyScrollEnd: onBodyScrollEnd ? function () {
50068
+ return onBodyScrollEnd();
50069
+ } : undefined,
49722
50070
  pinnedBottomRowData: footerData === null || footerData === void 0 ? void 0 : footerData.map(function (row, i) {
49723
50071
  return _typeof(row) === "object" && row !== null && !("id" in row) ? Object.assign(Object.assign({}, row), {
49724
50072
  id: "pinned-bottom-".concat(i)
@@ -49737,6 +50085,420 @@ function AgGridTableInner(props) {
49737
50085
  }
49738
50086
  var AgGridTable = AgGridTableInner;
49739
50087
 
50088
+ /**
50089
+ * A mobile-optimized card for displaying a single data row.
50090
+ * Replaces AG Grid table rows on mobile viewports.
50091
+ * Minimum 44px touch target when clickable.
50092
+ */
50093
+ var MobileDataCard = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function (_a, ref) {
50094
+ var title = _a.title,
50095
+ subtitle = _a.subtitle,
50096
+ statusBadge = _a.statusBadge,
50097
+ fields = _a.fields,
50098
+ actions = _a.actions,
50099
+ onClick = _a.onClick,
50100
+ className = _a.className,
50101
+ props = __rest$1(_a, ["title", "subtitle", "statusBadge", "fields", "actions", "onClick", "className"]);
50102
+ return jsxs("div", Object.assign({
50103
+ ref: ref,
50104
+ role: onClick ? 'button' : undefined,
50105
+ tabIndex: onClick ? 0 : undefined,
50106
+ onClick: onClick,
50107
+ onKeyDown: onClick ? function (e) {
50108
+ if (e.key === 'Enter') onClick();
50109
+ } : undefined,
50110
+ className: clsx('rounded-lg border border-mw-neutral-200 bg-white p-4', 'dark:border-mw-neutral-700 dark:bg-mw-neutral-800', onClick && 'cursor-pointer hover:border-mw-primary-300 dark:hover:border-mw-primary-600 min-h-[44px]', className)
50111
+ }, props, {
50112
+ children: [jsxs("div", {
50113
+ className: "flex items-start justify-between gap-2",
50114
+ children: [jsxs("div", {
50115
+ className: "flex-1 min-w-0",
50116
+ children: [jsx("p", {
50117
+ className: "text-sm font-medium text-mw-neutral-900 dark:text-mw-neutral-100 truncate",
50118
+ children: title
50119
+ }), subtitle && jsx("p", {
50120
+ className: "text-xs text-mw-neutral-500 dark:text-mw-neutral-400 mt-0.5",
50121
+ children: subtitle
50122
+ })]
50123
+ }), jsxs("div", {
50124
+ className: "flex items-center gap-2 flex-shrink-0",
50125
+ children: [statusBadge, actions]
50126
+ })]
50127
+ }), fields.length > 0 && jsx("div", {
50128
+ className: "grid grid-cols-2 gap-x-4 gap-y-2 mt-3",
50129
+ children: fields.map(function (_ref) {
50130
+ var label = _ref.label,
50131
+ value = _ref.value;
50132
+ return jsxs("div", {
50133
+ children: [jsx("p", {
50134
+ className: "text-xs text-mw-neutral-500 dark:text-mw-neutral-400",
50135
+ children: label
50136
+ }), jsx("p", {
50137
+ className: "text-sm text-mw-neutral-900 dark:text-mw-neutral-100",
50138
+ children: value
50139
+ })]
50140
+ }, label);
50141
+ })
50142
+ })]
50143
+ }));
50144
+ }));
50145
+ MobileDataCard.displayName = 'MobileDataCard';
50146
+
50147
+ /**
50148
+ * Prev/Next pagination for mobile card lists.
50149
+ * Shows "Page X of Y" with disabled states at boundaries.
50150
+ */
50151
+ var MobilePagination = /*#__PURE__*/forwardRef(function (_a, ref) {
50152
+ var page = _a.page,
50153
+ totalPages = _a.totalPages,
50154
+ onPageChange = _a.onPageChange,
50155
+ className = _a.className,
50156
+ props = __rest$1(_a, ["page", "totalPages", "onPageChange", "className"]);
50157
+ return jsxs("div", Object.assign({
50158
+ ref: ref,
50159
+ className: clsx('flex items-center justify-between px-2 py-3', className)
50160
+ }, props, {
50161
+ children: [jsx("button", {
50162
+ type: "button",
50163
+ "aria-label": "Previous page",
50164
+ disabled: page <= 1,
50165
+ onClick: function onClick() {
50166
+ return onPageChange(page - 1);
50167
+ },
50168
+ className: clsx('px-3 py-2 text-sm font-medium rounded-md min-h-[44px] min-w-[44px]', 'border border-mw-neutral-200 dark:border-mw-neutral-700', 'text-mw-neutral-700 dark:text-mw-neutral-300', 'enabled:hover:bg-mw-neutral-50 enabled:dark:hover:bg-mw-neutral-800', 'disabled:opacity-50 disabled:cursor-not-allowed'),
50169
+ children: "\u2190"
50170
+ }), jsxs("span", {
50171
+ className: "text-sm text-mw-neutral-600 dark:text-mw-neutral-400",
50172
+ children: [page, " / ", totalPages]
50173
+ }), jsx("button", {
50174
+ type: "button",
50175
+ "aria-label": "Next page",
50176
+ disabled: page >= totalPages,
50177
+ onClick: function onClick() {
50178
+ return onPageChange(page + 1);
50179
+ },
50180
+ className: clsx('px-3 py-2 text-sm font-medium rounded-md min-h-[44px] min-w-[44px]', 'border border-mw-neutral-200 dark:border-mw-neutral-700', 'text-mw-neutral-700 dark:text-mw-neutral-300', 'enabled:hover:bg-mw-neutral-50 enabled:dark:hover:bg-mw-neutral-800', 'disabled:opacity-50 disabled:cursor-not-allowed'),
50181
+ children: "\u2192"
50182
+ })]
50183
+ }));
50184
+ });
50185
+ MobilePagination.displayName = 'MobilePagination';
50186
+
50187
+ /**
50188
+ * A mobile-optimized toolbar with search input and optional filter button.
50189
+ * Filter button shows an active count badge when filters are applied.
50190
+ */
50191
+ var MobileToolbar = /*#__PURE__*/forwardRef(function (_a, ref) {
50192
+ var searchValue = _a.searchValue,
50193
+ onSearchChange = _a.onSearchChange,
50194
+ _a$searchPlaceholder = _a.searchPlaceholder,
50195
+ searchPlaceholder = _a$searchPlaceholder === void 0 ? 'Search...' : _a$searchPlaceholder,
50196
+ onFilterClick = _a.onFilterClick,
50197
+ activeFilterCount = _a.activeFilterCount,
50198
+ className = _a.className,
50199
+ props = __rest$1(_a, ["searchValue", "onSearchChange", "searchPlaceholder", "onFilterClick", "activeFilterCount", "className"]);
50200
+ return jsxs("div", Object.assign({
50201
+ ref: ref,
50202
+ className: clsx('flex items-center gap-2', className)
50203
+ }, props, {
50204
+ children: [jsxs("div", {
50205
+ className: "relative flex-1",
50206
+ children: [jsxs("svg", {
50207
+ className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-mw-neutral-400",
50208
+ xmlns: "http://www.w3.org/2000/svg",
50209
+ viewBox: "0 0 24 24",
50210
+ fill: "none",
50211
+ stroke: "currentColor",
50212
+ strokeWidth: "2",
50213
+ strokeLinecap: "round",
50214
+ strokeLinejoin: "round",
50215
+ "aria-hidden": "true",
50216
+ children: [jsx("circle", {
50217
+ cx: "11",
50218
+ cy: "11",
50219
+ r: "8"
50220
+ }), jsx("path", {
50221
+ d: "m21 21-4.3-4.3"
50222
+ })]
50223
+ }), jsx("input", {
50224
+ type: "search",
50225
+ role: "searchbox",
50226
+ value: searchValue,
50227
+ onChange: function onChange(e) {
50228
+ return onSearchChange(e.target.value);
50229
+ },
50230
+ placeholder: searchPlaceholder,
50231
+ className: clsx('w-full h-11 pl-10 pr-4 text-sm rounded-lg', 'border border-mw-neutral-200 bg-white', 'dark:border-mw-neutral-700 dark:bg-mw-neutral-800', 'text-mw-neutral-900 dark:text-mw-neutral-100', 'placeholder:text-mw-neutral-400 dark:placeholder:text-mw-neutral-500', 'focus:outline-none focus:ring-2 focus:ring-mw-primary-500 focus:border-mw-primary-500')
50232
+ })]
50233
+ }), onFilterClick && jsxs("button", {
50234
+ type: "button",
50235
+ "aria-label": "Filters",
50236
+ onClick: onFilterClick,
50237
+ className: clsx('relative flex items-center justify-center h-11 w-11 rounded-lg', 'border border-mw-neutral-200 bg-white', 'dark:border-mw-neutral-700 dark:bg-mw-neutral-800', 'text-mw-neutral-700 dark:text-mw-neutral-300', 'hover:bg-mw-neutral-50 dark:hover:bg-mw-neutral-700'),
50238
+ children: [jsxs("svg", {
50239
+ className: "h-5 w-5",
50240
+ xmlns: "http://www.w3.org/2000/svg",
50241
+ viewBox: "0 0 24 24",
50242
+ fill: "none",
50243
+ stroke: "currentColor",
50244
+ strokeWidth: "2",
50245
+ strokeLinecap: "round",
50246
+ strokeLinejoin: "round",
50247
+ "aria-hidden": "true",
50248
+ children: [jsx("line", {
50249
+ x1: "4",
50250
+ x2: "4",
50251
+ y1: "21",
50252
+ y2: "14"
50253
+ }), jsx("line", {
50254
+ x1: "4",
50255
+ x2: "4",
50256
+ y1: "10",
50257
+ y2: "3"
50258
+ }), jsx("line", {
50259
+ x1: "12",
50260
+ x2: "12",
50261
+ y1: "21",
50262
+ y2: "12"
50263
+ }), jsx("line", {
50264
+ x1: "12",
50265
+ x2: "12",
50266
+ y1: "8",
50267
+ y2: "3"
50268
+ }), jsx("line", {
50269
+ x1: "20",
50270
+ x2: "20",
50271
+ y1: "21",
50272
+ y2: "16"
50273
+ }), jsx("line", {
50274
+ x1: "20",
50275
+ x2: "20",
50276
+ y1: "12",
50277
+ y2: "3"
50278
+ }), jsx("line", {
50279
+ x1: "2",
50280
+ x2: "6",
50281
+ y1: "14",
50282
+ y2: "14"
50283
+ }), jsx("line", {
50284
+ x1: "10",
50285
+ x2: "14",
50286
+ y1: "8",
50287
+ y2: "8"
50288
+ }), jsx("line", {
50289
+ x1: "18",
50290
+ x2: "22",
50291
+ y1: "16",
50292
+ y2: "16"
50293
+ })]
50294
+ }), activeFilterCount != null && activeFilterCount > 0 && jsx("span", {
50295
+ className: "absolute -top-1 -right-1 flex h-5 w-5 items-center justify-center rounded-full bg-mw-primary-500 text-[10px] font-bold text-white",
50296
+ children: activeFilterCount
50297
+ })]
50298
+ })]
50299
+ }));
50300
+ });
50301
+ MobileToolbar.displayName = 'MobileToolbar';
50302
+
50303
+ /**
50304
+ * Renders children only on mobile (hidden on md+ screens).
50305
+ * Uses CSS-based visibility — both layouts are in the DOM.
50306
+ */
50307
+ var MobileOnly = /*#__PURE__*/forwardRef(function (_a, ref) {
50308
+ var children = _a.children,
50309
+ className = _a.className,
50310
+ props = __rest$1(_a, ["children", "className"]);
50311
+ return jsx("div", Object.assign({
50312
+ ref: ref,
50313
+ className: clsx('md:hidden', className)
50314
+ }, props, {
50315
+ children: children
50316
+ }));
50317
+ });
50318
+ MobileOnly.displayName = 'MobileOnly';
50319
+
50320
+ /**
50321
+ * Renders children only on desktop (hidden below md breakpoint).
50322
+ * Uses CSS-based visibility — both layouts are in the DOM.
50323
+ */
50324
+ var DesktopOnly = /*#__PURE__*/forwardRef(function (_a, ref) {
50325
+ var children = _a.children,
50326
+ className = _a.className,
50327
+ props = __rest$1(_a, ["children", "className"]);
50328
+ return jsx("div", Object.assign({
50329
+ ref: ref,
50330
+ className: clsx('hidden md:block', className)
50331
+ }, props, {
50332
+ children: children
50333
+ }));
50334
+ });
50335
+ DesktopOnly.displayName = 'DesktopOnly';
50336
+
50337
+ var breakpointRowClass = {
50338
+ sm: 'sm:flex-row',
50339
+ md: 'md:flex-row',
50340
+ lg: 'lg:flex-row',
50341
+ xl: 'xl:flex-row'
50342
+ };
50343
+ /**
50344
+ * Stacks children vertically on mobile, horizontally on desktop.
50345
+ * Replaces the common `flex flex-col md:flex-row` pattern.
50346
+ */
50347
+ var ResponsiveStack = /*#__PURE__*/forwardRef(function (_a, ref) {
50348
+ var _a$breakpoint = _a.breakpoint,
50349
+ breakpoint = _a$breakpoint === void 0 ? 'md' : _a$breakpoint,
50350
+ gap = _a.gap,
50351
+ _a$reverse = _a.reverse,
50352
+ reverse = _a$reverse === void 0 ? false : _a$reverse,
50353
+ children = _a.children,
50354
+ className = _a.className,
50355
+ props = __rest$1(_a, ["breakpoint", "gap", "reverse", "children", "className"]);
50356
+ return jsx("div", Object.assign({
50357
+ ref: ref,
50358
+ className: clsx('flex', reverse ? 'flex-col-reverse' : 'flex-col', breakpointRowClass[breakpoint], gap != null && "gap-".concat(gap), className)
50359
+ }, props, {
50360
+ children: children
50361
+ }));
50362
+ });
50363
+ ResponsiveStack.displayName = 'ResponsiveStack';
50364
+
50365
+ /**
50366
+ * A collapsible panel for secondary information on mobile.
50367
+ * Wraps the design system Accordion for converting sidebar panels
50368
+ * (tips, insights, help text) into expandable sections.
50369
+ */
50370
+ var CollapsibleInfoPanel = /*#__PURE__*/forwardRef(function (_a, ref) {
50371
+ var title = _a.title,
50372
+ icon = _a.icon,
50373
+ _a$defaultOpen = _a.defaultOpen,
50374
+ defaultOpen = _a$defaultOpen === void 0 ? false : _a$defaultOpen,
50375
+ children = _a.children,
50376
+ className = _a.className,
50377
+ props = __rest$1(_a, ["title", "icon", "defaultOpen", "children", "className"]);
50378
+ return jsx("div", Object.assign({
50379
+ ref: ref,
50380
+ className: clsx(className)
50381
+ }, props, {
50382
+ children: jsx(Accordion, {
50383
+ type: "single",
50384
+ defaultValue: defaultOpen ? 'panel' : undefined,
50385
+ children: jsxs(AccordionItem, {
50386
+ value: "panel",
50387
+ children: [jsxs(AccordionTrigger, {
50388
+ className: clsx('flex items-center gap-2 text-sm font-medium', 'text-mw-neutral-900 dark:text-mw-neutral-100'),
50389
+ children: [icon && jsx("span", {
50390
+ className: "flex-shrink-0",
50391
+ children: icon
50392
+ }), title]
50393
+ }), jsx(AccordionContent, {
50394
+ children: jsx("div", {
50395
+ className: "pt-2",
50396
+ children: children
50397
+ })
50398
+ })]
50399
+ })
50400
+ })
50401
+ }));
50402
+ });
50403
+ CollapsibleInfoPanel.displayName = 'CollapsibleInfoPanel';
50404
+
50405
+ /**
50406
+ * Renders content that is visually hidden but accessible to screen readers.
50407
+ * Use this instead of ad-hoc `sr-only` classes for consistent accessibility.
50408
+ */
50409
+ var VisuallyHidden = /*#__PURE__*/forwardRef(function (_a, ref) {
50410
+ var _a$as = _a.as,
50411
+ Component = _a$as === void 0 ? 'span' : _a$as,
50412
+ children = _a.children,
50413
+ style = _a.style,
50414
+ props = __rest$1(_a, ["as", "children", "style"]);
50415
+ return jsx(Component, Object.assign({
50416
+ ref: ref,
50417
+ style: Object.assign({
50418
+ position: 'absolute',
50419
+ width: '1px',
50420
+ height: '1px',
50421
+ padding: 0,
50422
+ margin: '-1px',
50423
+ overflow: 'hidden',
50424
+ clip: 'rect(0, 0, 0, 0)',
50425
+ whiteSpace: 'nowrap',
50426
+ borderWidth: 0
50427
+ }, style)
50428
+ }, props, {
50429
+ children: children
50430
+ }));
50431
+ });
50432
+ VisuallyHidden.displayName = 'VisuallyHidden';
50433
+
50434
+ var FOCUSABLE_SELECTOR = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]):not([disabled])';
50435
+ /**
50436
+ * Traps keyboard focus within its children.
50437
+ * Use in modals, dialogs, and sheets to prevent focus from escaping.
50438
+ */
50439
+ var FocusScope = /*#__PURE__*/forwardRef(function (_a, _ref) {
50440
+ var _a$trapped = _a.trapped,
50441
+ trapped = _a$trapped === void 0 ? false : _a$trapped,
50442
+ _a$autoFocus = _a.autoFocus,
50443
+ autoFocus = _a$autoFocus === void 0 ? false : _a$autoFocus,
50444
+ onEscape = _a.onEscape,
50445
+ children = _a.children,
50446
+ className = _a.className,
50447
+ props = __rest$1(_a, ["trapped", "autoFocus", "onEscape", "children", "className"]);
50448
+ var containerRef = useRef(null);
50449
+ var getFocusableElements = useCallback(function () {
50450
+ if (!containerRef.current) return [];
50451
+ return Array.from(containerRef.current.querySelectorAll(FOCUSABLE_SELECTOR));
50452
+ }, []);
50453
+ useEffect(function () {
50454
+ if (!autoFocus || !containerRef.current) return;
50455
+ var focusable = getFocusableElements();
50456
+ if (focusable.length > 0) {
50457
+ focusable[0].focus();
50458
+ }
50459
+ }, [autoFocus, getFocusableElements]);
50460
+ useEffect(function () {
50461
+ if (!trapped || !containerRef.current) return;
50462
+ var handleKeyDown = function handleKeyDown(e) {
50463
+ if (e.key === 'Escape' && onEscape) {
50464
+ onEscape();
50465
+ return;
50466
+ }
50467
+ if (e.key !== 'Tab') return;
50468
+ var focusable = getFocusableElements();
50469
+ if (focusable.length === 0) return;
50470
+ var first = focusable[0];
50471
+ var last = focusable[focusable.length - 1];
50472
+ if (e.shiftKey) {
50473
+ if (document.activeElement === first) {
50474
+ e.preventDefault();
50475
+ last.focus();
50476
+ }
50477
+ } else {
50478
+ if (document.activeElement === last) {
50479
+ e.preventDefault();
50480
+ first.focus();
50481
+ }
50482
+ }
50483
+ };
50484
+ var container = containerRef.current;
50485
+ container.addEventListener('keydown', handleKeyDown);
50486
+ return function () {
50487
+ return container.removeEventListener('keydown', handleKeyDown);
50488
+ };
50489
+ }, [trapped, onEscape, getFocusableElements]);
50490
+ return jsx("div", Object.assign({
50491
+ ref: function ref(node) {
50492
+ containerRef.current = node;
50493
+ if (typeof _ref === 'function') _ref(node);else if (_ref) _ref.current = node;
50494
+ },
50495
+ className: clsx(className)
50496
+ }, props, {
50497
+ children: children
50498
+ }));
50499
+ });
50500
+ FocusScope.displayName = 'FocusScope';
50501
+
49740
50502
  function PageHeader(_a) {
49741
50503
  var title = _a.title,
49742
50504
  description = _a.description,
@@ -57578,5 +58340,5 @@ function getShortcutCategory(shortcut) {
57578
58340
  // Version
57579
58341
  var version = '1.0.0';
57580
58342
 
57581
- export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvancedTable, AgGridTable, Alert, AlertCircleIcon, AlertTriangleIcon, AnimatedElement, AppHeader, Autocomplete, Avatar, AvatarFallback, AvatarGroup, AvatarImage, Badge, Breadcrumb, BreadcrumbItem, BreadcrumbSeparator, Button, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselSlide, CheckIcon, Checkbox, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, Chip, CloseIcon, CodeSnippet, Collapsible, CollapsibleCode, CollapsibleContent, CollapsibleTrigger, ColumnCustomizationDrawer, Command, CommandGroup, CommandItem, CommandSeparator, ConfirmSheet, Container, CounterAnimation, DataGrid, DatePicker, DateRangePicker, DescriptionList, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Display, DocumentEditor, DragDrop, Dropdown, DropdownContent, DropdownItem, Dropdown as DropdownMenu, DropdownContent as DropdownMenuContent, DropdownItem as DropdownMenuItem, DropdownMenuLabel, DropdownSeparator as DropdownMenuSeparator, DropdownTrigger as DropdownMenuTrigger, DropdownSeparator, DropdownTrigger, DynamicIcon, EmptyState, Fieldset, FileUpload, Filter, FlexContainer, FloatingElement, Footer, Form, FormActions, FormControl, FormDescription, FormError, FormField, FormGroup, FormItem, FormLabel, FormMessage, FormSection, GridContainer, HStack, Heading, Icon$2 as Icon, Image, ImageCarousel, ImageThumbnail, InfoIcon, Input, Label, List, ListItem, Loading, MWBounceLoader, MWBrandLoader, MWDotsLoader, MWHeartbeatLoader, MWLoader, MWMatrixLoader, MWProgressiveLoader, Menu, MenuCheckboxItem, MenuGroup, MenuItem, MenuRadioGroup, MenuRadioItem, MenuSeparator, MetricCard, MinusIcon, Modal, ModalBody, ModalFooter, ModalHeader, MultiSelect, Navigation, NavigationList, NoDataEmptyState, NoResultsEmptyState, Notification, NotificationBadge, NotificationBell, NotificationList, PageHeader, PageHero, Pagination, Panel, PanelGroup, PanelHeader, PanelResizer, PlusIcon, Popover, PopoverContent, PopoverTrigger, ProcessFlowAnimation, Progress, ProgressBar, Radio$1 as Radio, RadioGroup, RadioGroupItem, Rating, ResponsiveContainer, RichTextEditor, ScheduleGrid, ScrollArea, SearchBar, SearchIcon, SearchResults, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectRoot, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarCollapseToggle, SidebarContent, SidebarFooter, SidebarGroup, SidebarHeader, SidebarItem, SidebarNav, SidebarPanel, SidebarProvider, SidebarToggleButton, SidebarTrigger, SimpleSelect, Skeleton, Slider, SnackbarProvider, SortableList, Spinner, SplitPanel, Stack, StackPanel, StatusBadge, Stepper, Switch, SwitchGroup, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, Text, Textarea, ThemeToggle, Thumbnail, ThumbnailGallery, TimePicker, TimeRangePicker, Timeline, TimelineItem, ToastProvider, ToggleGroup, ToggleGroupItem, Tooltip, TreeView, VideoThumbnail, borderRadius, borderWidth, breakpoints, cn, colors, cssVariables, debounce, effects, findTreeNode, formatIconName$1 as formatIconName, generateColorVariations, generateIconCode, getAllNodeIds, getParentIds, hexToRgb, shadows, spacing, tokens, typography, useDragDrop, useFormContext, useIconSearch, useKeyboardShortcuts, useSidebar, useSidebarSafe, useSnackbar, useSnackbarHelpers, useToast, version, zIndex };
58343
+ export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvancedTable, AgGridTable, Alert, AlertCircleIcon, AlertTriangleIcon, AnimatedElement, AppHeader, Autocomplete, Avatar, AvatarFallback, AvatarGroup, AvatarImage, Badge, Breadcrumb, BreadcrumbItem, BreadcrumbSeparator, Button, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselSlide, CheckIcon, Checkbox, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, Chip, CloseIcon, CodeSnippet, Collapsible, CollapsibleCode, CollapsibleContent, CollapsibleInfoPanel, CollapsibleTrigger, ColumnCustomizationDrawer, Command, CommandGroup, CommandItem, CommandSeparator, ConfirmSheet, Container, CounterAnimation, DataGrid, DatePicker, DateRangePicker, DescriptionList, DesktopOnly, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Display, DocumentEditor, DragDrop, Dropdown, DropdownContent, DropdownItem, Dropdown as DropdownMenu, DropdownContent as DropdownMenuContent, DropdownItem as DropdownMenuItem, DropdownMenuLabel, DropdownSeparator as DropdownMenuSeparator, DropdownTrigger as DropdownMenuTrigger, DropdownSeparator, DropdownTrigger, DynamicIcon, EmptyState, Fieldset, FileUpload, Filter, FlexContainer, FloatingElement, FocusScope, Footer, Form, FormActions, FormControl, FormDescription, FormError, FormField, FormGroup, FormItem, FormLabel, FormMessage, FormSection, GridContainer, HStack, Heading, Icon$2 as Icon, Image, ImageCarousel, ImageThumbnail, InfoIcon, Input, Label, List, ListItem, Loading, MWBounceLoader, MWBrandLoader, MWDotsLoader, MWHeartbeatLoader, MWLoader, MWMatrixLoader, MWProgressiveLoader, Menu, MenuCheckboxItem, MenuGroup, MenuItem, MenuRadioGroup, MenuRadioItem, MenuSeparator, MetricCard, MinusIcon, MobileDataCard, MobileOnly, MobilePagination, MobileToolbar, Modal, ModalBody, ModalFooter, ModalHeader, MultiSelect, Navigation, NavigationList, NoDataEmptyState, NoResultsEmptyState, Notification, NotificationBadge, NotificationBell, NotificationList, PageHeader, PageHero, Pagination, Panel, PanelGroup, PanelHeader, PanelResizer, PlusIcon, Popover, PopoverContent, PopoverTrigger, ProcessFlowAnimation, Progress, ProgressBar, Radio$1 as Radio, RadioGroup, RadioGroupItem, Rating, ResponsiveContainer, ResponsiveStack, RichTextEditor, ScheduleGrid, ScrollArea, SearchBar, SearchIcon, SearchResults, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectRoot, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarCollapseToggle, SidebarContent, SidebarFooter, SidebarGroup, SidebarHeader, SidebarItem, SidebarNav, SidebarPanel, SidebarProvider, SidebarToggleButton, SidebarTrigger, SimpleSelect, Skeleton, Slider, SnackbarProvider, SortableList, Spinner, SplitPanel, Stack, StackPanel, StatusBadge, Stepper, Switch, SwitchGroup, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, Text, Textarea, ThemeToggle, Thumbnail, ThumbnailGallery, TimePicker, TimeRangePicker, Timeline, TimelineItem, ToastProvider, ToggleGroup, ToggleGroupItem, Tooltip, TreeView, VideoThumbnail, VisuallyHidden, borderRadius, borderWidth, breakpoints, cn, colors, cssVariables, debounce, effects, findTreeNode, formatIconName$1 as formatIconName, generateColorVariations, generateIconCode, getAllNodeIds, getParentIds, hexToRgb, shadows, spacing, tokens, typography, useAdvancedTable, useCalendar, useDragDrop, useFormContext, useIconSearch, useKeyboardShortcuts, useSidebar, useSidebarSafe, useSnackbar, useSnackbarHelpers, useToast, version, zIndex };
57582
58344
  //# sourceMappingURL=index.esm.js.map