@moving-walls/design-system 1.0.24 → 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 (34) 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/Calendar/index.d.ts +3 -0
  5. package/dist/components/ui/Calendar/types.d.ts +14 -0
  6. package/dist/components/ui/Calendar/useCalendar.d.ts +26 -0
  7. package/dist/components/ui/CollapsibleInfoPanel.d.ts +12 -0
  8. package/dist/components/ui/DateRangePicker.d.ts +6 -1
  9. package/dist/components/ui/DesktopOnly.d.ts +8 -0
  10. package/dist/components/ui/DragDrop/DragDropZone.d.ts +14 -0
  11. package/dist/components/ui/DragDrop/FilePreview.d.ts +7 -0
  12. package/dist/components/ui/DragDrop/SortableList.d.ts +8 -0
  13. package/dist/components/ui/DragDrop/index.d.ts +9 -0
  14. package/dist/components/ui/DragDrop/types.d.ts +12 -0
  15. package/dist/components/ui/DragDrop/useDragDrop.d.ts +16 -0
  16. package/dist/components/ui/FocusScope.d.ts +14 -0
  17. package/dist/components/ui/MobileDataCard.d.ts +18 -0
  18. package/dist/components/ui/MobileOnly.d.ts +8 -0
  19. package/dist/components/ui/MobilePagination.d.ts +10 -0
  20. package/dist/components/ui/MobileToolbar.d.ts +12 -0
  21. package/dist/components/ui/ResponsiveStack.d.ts +14 -0
  22. package/dist/components/ui/ScheduleGrid.d.ts +6 -1
  23. package/dist/components/ui/TimeRangePicker.d.ts +8 -1
  24. package/dist/components/ui/VisuallyHidden.d.ts +10 -0
  25. package/dist/components/ui/index.d.ts +22 -0
  26. package/dist/hooks/index.d.ts +3 -0
  27. package/dist/hooks/useMediaQuery.d.ts +6 -0
  28. package/dist/hooks/useResponsiveSheet.d.ts +19 -0
  29. package/dist/index.esm.js +785 -28
  30. package/dist/index.esm.js.map +1 -1
  31. package/dist/index.js +794 -26
  32. package/dist/index.js.map +1 -1
  33. package/dist/tsconfig.build.tsbuildinfo +1 -1
  34. 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,
@@ -36468,8 +36479,8 @@ function CalendarMonth(_ref) {
36468
36479
  function DateRangePicker(_ref3) {
36469
36480
  var value = _ref3.value,
36470
36481
  onChange = _ref3.onChange,
36471
- _ref3$placeholder = _ref3.placeholder,
36472
- placeholder = _ref3$placeholder === void 0 ? 'Select date range' : _ref3$placeholder,
36482
+ placeholder = _ref3.placeholder,
36483
+ labels = _ref3.labels,
36473
36484
  _ref3$disabled = _ref3.disabled,
36474
36485
  disabled = _ref3$disabled === void 0 ? false : _ref3$disabled;
36475
36486
  _ref3.required;
@@ -36486,6 +36497,7 @@ function DateRangePicker(_ref3) {
36486
36497
  presets = _ref3$presets === void 0 ? defaultPresets$1 : _ref3$presets,
36487
36498
  _ref3$align = _ref3.align,
36488
36499
  align = _ref3$align === void 0 ? 'left' : _ref3$align;
36500
+ var _a, _b;
36489
36501
  var _useState = useState(false),
36490
36502
  _useState2 = _slicedToArray(_useState, 2),
36491
36503
  isOpen = _useState2[0],
@@ -36651,7 +36663,7 @@ function DateRangePicker(_ref3) {
36651
36663
  className: "flex items-center justify-between px-3 py-2 border-t border-mw-neutral-200 dark:border-mw-neutral-700",
36652
36664
  children: [jsx("div", {
36653
36665
  className: "text-[11px] text-mw-neutral-500 dark:text-mw-neutral-400",
36654
- 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'
36655
36667
  }), jsxs("div", {
36656
36668
  className: "flex gap-2 items-center",
36657
36669
  children: [jsx("button", {
@@ -36812,8 +36824,7 @@ function TimePicker(_ref2) {
36812
36824
  label = _ref2.label,
36813
36825
  error = _ref2.error,
36814
36826
  helpText = _ref2.helpText,
36815
- _ref2$placeholder = _ref2.placeholder,
36816
- placeholder = _ref2$placeholder === void 0 ? 'Select time' : _ref2$placeholder,
36827
+ placeholder = _ref2.placeholder,
36817
36828
  className = _ref2.className,
36818
36829
  _ref2$size = _ref2.size,
36819
36830
  size = _ref2$size === void 0 ? 'md' : _ref2$size,
@@ -37179,8 +37190,7 @@ function TimeSelect(_ref) {
37179
37190
  function TimeRangePicker(_ref2) {
37180
37191
  var value = _ref2.value,
37181
37192
  onChange = _ref2.onChange,
37182
- _ref2$placeholder = _ref2.placeholder,
37183
- placeholder = _ref2$placeholder === void 0 ? 'Select time range' : _ref2$placeholder,
37193
+ placeholder = _ref2.placeholder,
37184
37194
  _ref2$disabled = _ref2.disabled,
37185
37195
  disabled = _ref2$disabled === void 0 ? false : _ref2$disabled;
37186
37196
  _ref2.required;
@@ -37193,8 +37203,10 @@ function TimeRangePicker(_ref2) {
37193
37203
  minTime = _ref2.minTime,
37194
37204
  maxTime = _ref2.maxTime,
37195
37205
  className = _ref2.className,
37206
+ labels = _ref2.labels,
37196
37207
  _ref2$presets = _ref2.presets,
37197
37208
  presets = _ref2$presets === void 0 ? defaultPresets : _ref2$presets;
37209
+ var _a, _b;
37198
37210
  var _useState5 = useState(value || {
37199
37211
  from: null,
37200
37212
  to: null
@@ -37331,13 +37343,13 @@ function TimeRangePicker(_ref2) {
37331
37343
  children: [jsxs("div", {
37332
37344
  children: [jsx("label", {
37333
37345
  className: "block text-sm font-medium mb-2 text-mw-neutral-900 dark:text-white",
37334
- children: "From Time"
37346
+ children: (_a = labels === null || labels === void 0 ? void 0 : labels.fromTime) !== null && _a !== void 0 ? _a : 'From Time'
37335
37347
  }), jsx(TimeSelect, {
37336
37348
  value: selectedRange.from,
37337
37349
  onChange: handleFromTimeChange,
37338
37350
  options: timeOptions,
37339
37351
  format: format,
37340
- placeholder: "Select start time",
37352
+ placeholder: labels === null || labels === void 0 ? void 0 : labels.selectStart,
37341
37353
  disabled: disabled,
37342
37354
  minTime: minTime,
37343
37355
  maxTime: selectedRange.to ? format === '12' ? convertTo24Hour(selectedRange.to) : selectedRange.to : maxTime
@@ -37345,13 +37357,13 @@ function TimeRangePicker(_ref2) {
37345
37357
  }), jsxs("div", {
37346
37358
  children: [jsx("label", {
37347
37359
  className: "block text-sm font-medium mb-2 text-mw-neutral-900 dark:text-white",
37348
- children: "To Time"
37360
+ children: (_b = labels === null || labels === void 0 ? void 0 : labels.toTime) !== null && _b !== void 0 ? _b : 'To Time'
37349
37361
  }), jsx(TimeSelect, {
37350
37362
  value: selectedRange.to,
37351
37363
  onChange: handleToTimeChange,
37352
37364
  options: timeOptions,
37353
37365
  format: format,
37354
- placeholder: "Select end time",
37366
+ placeholder: labels === null || labels === void 0 ? void 0 : labels.selectEnd,
37355
37367
  disabled: disabled || !selectedRange.from,
37356
37368
  minTime: selectedRange.from ? format === '12' ? convertTo24Hour(selectedRange.from) : selectedRange.from : minTime,
37357
37369
  maxTime: maxTime
@@ -38680,8 +38692,7 @@ function MultiSelect(_ref) {
38680
38692
  _ref$value = _ref.value,
38681
38693
  value = _ref$value === void 0 ? [] : _ref$value,
38682
38694
  onChange = _ref.onChange,
38683
- _ref$placeholder = _ref.placeholder,
38684
- placeholder = _ref$placeholder === void 0 ? 'Select...' : _ref$placeholder,
38695
+ placeholder = _ref.placeholder,
38685
38696
  label = _ref.label,
38686
38697
  _ref$disabled = _ref.disabled,
38687
38698
  disabled = _ref$disabled === void 0 ? false : _ref$disabled,
@@ -39138,7 +39149,8 @@ function ScheduleGrid(_ref) {
39138
39149
  _ref$presets = _ref.presets,
39139
39150
  presets = _ref$presets === void 0 ? DEFAULT_PRESETS : _ref$presets,
39140
39151
  _ref$showPresets = _ref.showPresets,
39141
- showPresets = _ref$showPresets === void 0 ? true : _ref$showPresets;
39152
+ showPresets = _ref$showPresets === void 0 ? true : _ref$showPresets,
39153
+ labels = _ref.labels;
39142
39154
  var _useState = useState('custom'),
39143
39155
  _useState2 = _slicedToArray(_useState, 2),
39144
39156
  selectedPreset = _useState2[0],
@@ -39261,6 +39273,7 @@ function ScheduleGrid(_ref) {
39261
39273
  onChange(newRules);
39262
39274
  };
39263
39275
  var renderHourGrid = function renderHourGrid(type, selectedHours) {
39276
+ var _a, _b;
39264
39277
  var allSelected = selectedHours.size === 24;
39265
39278
  var label = type === 'DEFAULT' ? 'Default Hours' : type === 'WEEKDAY' ? 'Weekday Hours (Mon-Fri)' : 'Weekend Hours (Sat-Sun)';
39266
39279
  var isExpanded = expandedSection === type.toLowerCase();
@@ -39295,7 +39308,7 @@ function ScheduleGrid(_ref) {
39295
39308
  return handleSelectAll(type);
39296
39309
  },
39297
39310
  className: "text-xs text-mw-primary-500 hover:text-mw-primary-600 font-medium",
39298
- 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'
39299
39312
  })
39300
39313
  }), jsx("div", {
39301
39314
  className: "grid grid-cols-6 gap-1.5",
@@ -42905,6 +42918,221 @@ function AdvancedTable(_ref3) {
42905
42918
  });
42906
42919
  }
42907
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
+
42908
43136
  var emptyStateIcons = {
42909
43137
  noData: jsx(Database, {
42910
43138
  className: "w-12 h-12 text-mw-neutral-400"
@@ -47099,6 +47327,121 @@ function DayView(_ref4) {
47099
47327
  });
47100
47328
  }
47101
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
+
47102
47445
  function cn$8() {
47103
47446
  for (var _len = arguments.length, classes = new Array(_len), _key = 0; _key < _len; _key++) {
47104
47447
  classes[_key] = arguments[_key];
@@ -49742,6 +50085,420 @@ function AgGridTableInner(props) {
49742
50085
  }
49743
50086
  var AgGridTable = AgGridTableInner;
49744
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
+
49745
50502
  function PageHeader(_a) {
49746
50503
  var title = _a.title,
49747
50504
  description = _a.description,
@@ -57583,5 +58340,5 @@ function getShortcutCategory(shortcut) {
57583
58340
  // Version
57584
58341
  var version = '1.0.0';
57585
58342
 
57586
- 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 };
57587
58344
  //# sourceMappingURL=index.esm.js.map