@dreamtree-org/twreact-ui 2.0.9 → 2.1.0

package/dist/esm/components/core/OptionCard.js

@@ -0,0 +1,340 @@
+'use client';
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, toConsumableArray as _toConsumableArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useMemo, useRef, useState, useId, useCallback, useContext, useLayoutEffect, useEffect, createContext } from 'react';
+import { Check } from 'lucide-react';
+import { cn } from '../../utils/cn.js';
+import { setRefs } from '../../utils/position.js';
+import { useControllableState } from '../../hooks/useControllableState.js';
+import { PRESS_FEEDBACK } from '../../utils/touchTarget.js';
+
+var _excluded = ["value", "defaultValue", "onChange", "multiple", "columns", "label", "name", "disabled", "className", "children"],
+  _excluded2 = ["value", "title", "description", "media", "badge", "selected", "onSelect", "disabled", "className", "children", "onClick", "onKeyDown", "onFocus"];
+// useLayoutEffect warns during SSR; fall back to useEffect on the server.
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+var OptionCardGroupContext = /*#__PURE__*/createContext(null);
+// One column on phones, growing with the breakpoint up to `columns`.
+var COLUMN_CLASSES = {
+  1: "grid-cols-1",
+  2: "grid-cols-1 sm:grid-cols-2",
+  3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
+  4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4"
+};
+var NEXT_KEYS = {
+  ArrowRight: 1,
+  ArrowDown: 1,
+  ArrowLeft: -1,
+  ArrowUp: -1
+};
+function isRtl(el) {
+  var dirEl = el.closest("[dir]");
+  if (dirEl) return dirEl.getAttribute("dir") === "rtl";
+  return typeof window !== "undefined" && window.getComputedStyle(el).direction === "rtl";
+}
+function toArray(value) {
+  if (Array.isArray(value)) return value;
+  return value === undefined || value === null ? [] : [value];
+}
+/**
+ * OptionCardGroup: lays out `OptionCard`s in a responsive grid and gives them
+ * radiogroup semantics (or checkbox-group semantics with `multiple`).
+ */
+var OptionCardGroup = /*#__PURE__*/forwardRef(function OptionCardGroup(_ref, _ref2) {
+  var valueProp = _ref.value,
+    defaultValue = _ref.defaultValue,
+    onChange = _ref.onChange,
+    _ref$multiple = _ref.multiple,
+    multiple = _ref$multiple === void 0 ? false : _ref$multiple,
+    _ref$columns = _ref.columns,
+    columns = _ref$columns === void 0 ? 3 : _ref$columns,
+    label = _ref.label,
+    name = _ref.name,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    className = _ref.className,
+    children = _ref.children,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useControllableState = useControllableState({
+      value: valueProp,
+      defaultValue: defaultValue,
+      onChange: onChange
+    }),
+    _useControllableState2 = _slicedToArray(_useControllableState, 2),
+    value = _useControllableState2[0],
+    setValue = _useControllableState2[1];
+  var selected = useMemo(function () {
+    return multiple ? toArray(value) : value;
+  }, [multiple, value]);
+  var rootRef = useRef(null);
+  // DOM node -> { value, disabled } for every card in this group.
+  var itemsRef = useRef(new Map());
+  var _useState = useState(undefined),
+    _useState2 = _slicedToArray(_useState, 2),
+    activeValue = _useState2[0],
+    setActiveValue = _useState2[1];
+  var _useState3 = useState({
+      ready: false,
+      value: undefined
+    }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    tabStop = _useState4[0],
+    setTabStop = _useState4[1];
+  var labelId = useId();
+  var isSelected = useCallback(function (v) {
+    return multiple ? selected.some(function (s) {
+      return Object.is(s, v);
+    }) : Object.is(selected, v);
+  }, [multiple, selected]);
+  // Cards in DOM order, excluding cards of nested groups.
+  var getItems = useCallback(function () {
+    var root = rootRef.current;
+    if (!root) return [];
+    return Array.from(root.querySelectorAll("[data-option-card]")).filter(function (node) {
+      return node.closest("[data-option-card-group]") === root;
+    }).map(function (node) {
+      return _objectSpread2({
+        node: node
+      }, itemsRef.current.get(node) || {});
+    }).filter(function (item) {
+      return item.node && "value" in item;
+    });
+  }, []);
+  // Roving tabindex: the last focused card, else the first selected card, else
+  // the first enabled card. Recomputed after every render (cards may change).
+  useIsomorphicLayoutEffect(function () {
+    var enabled = getItems().filter(function (item) {
+      return !item.disabled;
+    });
+    var pick = enabled.find(function (item) {
+      return activeValue !== undefined && Object.is(item.value, activeValue);
+    }) || enabled.find(function (item) {
+      return isSelected(item.value);
+    }) || enabled[0];
+    var next = pick ? pick.value : undefined;
+    setTabStop(function (prev) {
+      return prev.ready && Object.is(prev.value, next) ? prev : {
+        ready: true,
+        value: next
+      };
+    });
+  });
+  var toggle = useCallback(function (v) {
+    if (disabled) return;
+    if (multiple) {
+      var next = isSelected(v) ? selected.filter(function (s) {
+        return !Object.is(s, v);
+      }) : [].concat(_toConsumableArray(selected), [v]);
+      setValue(next);
+    } else if (!Object.is(selected, v)) {
+      setValue(v);
+    }
+  }, [disabled, multiple, isSelected, selected, setValue]);
+  var onItemKeyDown = useCallback(function (event, v) {
+    var key = event.key;
+    var items = getItems().filter(function (item) {
+      return !item.disabled;
+    });
+    if (!items.length) return false;
+    var index = items.findIndex(function (item) {
+      return Object.is(item.value, v);
+    });
+    var target = -1;
+    if (key in NEXT_KEYS) {
+      var step = NEXT_KEYS[key];
+      if ((key === "ArrowLeft" || key === "ArrowRight") && isRtl(event.currentTarget)) step = -step;
+      var from = index < 0 ? step > 0 ? -1 : items.length : index;
+      target = ((from + step) % items.length + items.length) % items.length;
+    } else if (key === "Home") {
+      target = 0;
+    } else if (key === "End") {
+      target = items.length - 1;
+    } else {
+      return false;
+    }
+    event.preventDefault();
+    var item = items[target];
+    item.node.focus();
+    setActiveValue(item.value);
+    // Radios: selection follows focus. Checkboxes: arrows only move focus.
+    if (!multiple) toggle(item.value);
+    return true;
+  }, [getItems, multiple, toggle]);
+  var ctx = useMemo(function () {
+    return {
+      multiple: multiple,
+      groupDisabled: disabled,
+      isSelected: isSelected,
+      toggle: toggle,
+      itemsRef: itemsRef,
+      tabStop: tabStop,
+      setActiveValue: setActiveValue,
+      onItemKeyDown: onItemKeyDown
+    };
+  }, [multiple, disabled, isSelected, toggle, tabStop, onItemKeyDown]);
+  var hasLabel = label !== undefined && label !== null && label !== false;
+  var hiddenValues = multiple ? selected : toArray(selected);
+  return jsxs("div", _objectSpread2(_objectSpread2({
+    ref: function ref(node) {
+      return setRefs(node, rootRef, _ref2);
+    },
+    role: multiple ? "group" : "radiogroup",
+    "aria-labelledby": hasLabel && !rest["aria-label"] ? labelId : undefined,
+    "aria-disabled": disabled || undefined,
+    "data-option-card-group": "",
+    className: cn("flex flex-col gap-2", disabled && "cursor-not-allowed opacity-50", className)
+  }, rest), {}, {
+    children: [hasLabel && jsx("div", {
+      id: labelId,
+      className: "text-sm font-medium text-foreground",
+      children: label
+    }), jsx("div", {
+      className: cn("grid gap-3", COLUMN_CLASSES[columns] || COLUMN_CLASSES[3]),
+      children: jsx(OptionCardGroupContext.Provider, {
+        value: ctx,
+        children: children
+      })
+    }), name && hiddenValues.map(function (v) {
+      return jsx("input", {
+        type: "hidden",
+        name: name,
+        value: v !== null && v !== void 0 ? v : ""
+      }, String(v));
+    })]
+  }));
+});
+OptionCardGroup.displayName = "OptionCardGroup";
+/**
+ * OptionCard: a selectable choice tile (title, description, optional media and
+ * badge). Inside an `OptionCardGroup` it is a radio (or a checkbox with
+ * `multiple`); on its own it is a toggle button with `aria-pressed`.
+ */
+var OptionCard = /*#__PURE__*/forwardRef(function OptionCard(_ref3, _ref4) {
+  var value = _ref3.value,
+    title = _ref3.title,
+    description = _ref3.description,
+    media = _ref3.media,
+    badge = _ref3.badge,
+    selectedProp = _ref3.selected,
+    onSelect = _ref3.onSelect,
+    _ref3$disabled = _ref3.disabled,
+    disabledProp = _ref3$disabled === void 0 ? false : _ref3$disabled,
+    className = _ref3.className,
+    children = _ref3.children,
+    onClick = _ref3.onClick,
+    onKeyDown = _ref3.onKeyDown,
+    onFocus = _ref3.onFocus,
+    rest = _objectWithoutProperties(_ref3, _excluded2);
+  var group = useContext(OptionCardGroupContext);
+  var nodeRef = useRef(null);
+  var baseId = useId();
+  var titleId = "".concat(baseId, "-title");
+  var descId = "".concat(baseId, "-desc");
+  var disabled = Boolean(disabledProp) || Boolean(group === null || group === void 0 ? void 0 : group.groupDisabled);
+  var selected = group ? group.isSelected(value) : Boolean(selectedProp);
+  // Register this card with its group so keyboard navigation can map DOM order to values.
+  useIsomorphicLayoutEffect(function () {
+    if (!group) return undefined;
+    var node = nodeRef.current;
+    var items = group.itemsRef.current;
+    if (node) items.set(node, {
+      value: value,
+      disabled: disabled
+    });
+    return function () {
+      if (node) items["delete"](node);
+    };
+  });
+  var role = "button";
+  var tabIndex = disabled ? -1 : 0;
+  if (group) {
+    role = group.multiple ? "checkbox" : "radio";
+    if (disabled) tabIndex = -1;else if (group.tabStop.ready) tabIndex = Object.is(group.tabStop.value, value) ? 0 : -1;
+    // Before the first layout pass (SSR): selected cards are the tab stop.
+    else tabIndex = selected ? 0 : -1;
+  }
+  var activate = function activate(event) {
+    if (disabled) return;
+    if (group) {
+      group.setActiveValue(value);
+      group.toggle(value);
+    }
+    onSelect === null || onSelect === void 0 || onSelect(value, event);
+  };
+  var handleClick = function handleClick(event) {
+    onClick === null || onClick === void 0 || onClick(event);
+    if (event.defaultPrevented) return;
+    activate(event);
+  };
+  var handleKeyDown = function handleKeyDown(event) {
+    onKeyDown === null || onKeyDown === void 0 || onKeyDown(event);
+    if (event.defaultPrevented || event.target !== event.currentTarget || disabled) return;
+    if (event.key === " " || event.key === "Enter") {
+      event.preventDefault();
+      activate(event);
+      return;
+    }
+    if (group) group.onItemKeyDown(event, value);
+  };
+  var handleFocus = function handleFocus(event) {
+    onFocus === null || onFocus === void 0 || onFocus(event);
+    if (group && !disabled && event.target === event.currentTarget) group.setActiveValue(value);
+  };
+  var ariaState = role === "button" ? {
+    "aria-pressed": selected
+  } : {
+    "aria-checked": selected
+  };
+  var isCheckbox = group === null || group === void 0 ? void 0 : group.multiple;
+  return jsxs("div", _objectSpread2(_objectSpread2(_objectSpread2({
+    ref: function ref(node) {
+      return setRefs(node, nodeRef, _ref4);
+    },
+    role: role,
+    tabIndex: tabIndex
+  }, ariaState), {}, {
+    "aria-disabled": disabled || undefined,
+    "aria-labelledby": title ? titleId : undefined,
+    "aria-describedby": description ? descId : undefined,
+    "data-option-card": "",
+    "data-state": selected ? "checked" : "unchecked",
+    "data-disabled": disabled ? "" : undefined,
+    onClick: handleClick,
+    onKeyDown: handleKeyDown,
+    onFocus: handleFocus,
+    className: cn("relative flex min-h-11 w-full flex-col gap-3 rounded-card border bg-surface p-4 text-left outline-none select-none", "focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-background", PRESS_FEEDBACK, "transition-[border-color,box-shadow,background-color,transform] duration-fast ease-standard motion-reduce:transition-none", selected ? "border-primary-600 bg-primary-50 shadow-sm ring-1 ring-primary-600 dark:border-primary-400 dark:bg-primary-900/20 dark:ring-primary-400" : "border-line", disabled ? "cursor-not-allowed opacity-50 active:scale-100" : cn("cursor-pointer hover:shadow-md", !selected && "hover:border-primary-300 dark:hover:border-primary-700"), className)
+  }, rest), {}, {
+    children: [jsx("span", {
+      "aria-hidden": "true",
+      "data-option-card-indicator": "",
+      className: cn("absolute right-3 top-3 inline-flex h-5 w-5 items-center justify-center border", isCheckbox ? "rounded-md" : "rounded-full", "transition-colors duration-fast motion-reduce:transition-none", selected ? "border-primary-600 bg-primary-600 text-white dark:border-primary-500 dark:bg-primary-500" : "border-muted/40 bg-surface"),
+      children: selected && jsx(Check, {
+        className: "h-3.5 w-3.5",
+        strokeWidth: 3
+      })
+    }), media && jsx("div", {
+      className: "overflow-hidden rounded-md",
+      children: media
+    }), jsxs("div", {
+      className: "flex flex-col gap-1 pr-7",
+      children: [jsxs("div", {
+        className: "flex flex-wrap items-center gap-2",
+        children: [title && jsx("span", {
+          id: titleId,
+          className: "text-sm font-semibold text-foreground",
+          children: title
+        }), badge !== undefined && badge !== null && badge !== false && jsx("span", {
+          className: "inline-flex items-center rounded-full bg-primary-50 px-2 py-0.5 text-xs font-medium text-primary-700 dark:bg-primary-900/40 dark:text-primary-300",
+          children: badge
+        })]
+      }), description && jsx("span", {
+        id: descId,
+        className: "text-sm text-muted",
+        children: description
+      })]
+    }), children]
+  }));
+});
+OptionCard.displayName = "OptionCard";
+OptionCard.Group = OptionCardGroup;
+
+export { OptionCardGroup, OptionCard as default };

package/dist/esm/components/core/QuantityStepper.js

@@ -0,0 +1,194 @@
+'use client';
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useId } from 'react';
+import { Minus, Loader2, Plus } from 'lucide-react';
+import { cn } from '../../utils/cn.js';
+import { useControllableState } from '../../hooks/useControllableState.js';
+import { PRESS_FEEDBACK, TOUCH_TARGET } from '../../utils/touchTarget.js';
+
+var _excluded = ["value", "defaultValue", "onChange", "min", "max", "step", "size", "disabled", "loading", "label", "hideLabel", "formatValue", "decrementLabel", "incrementLabel", "name", "className", "aria-label"];
+// Button is square; the value cell is at least as wide as a button.
+var SIZE_CLASSES = {
+  sm: {
+    button: "h-8 w-8",
+    value: "h-8 min-w-8 px-1 text-sm",
+    icon: "h-3.5 w-3.5"
+  },
+  md: {
+    button: "h-10 w-10",
+    value: "h-10 min-w-10 px-2 text-sm",
+    icon: "h-4 w-4"
+  },
+  lg: {
+    button: "h-12 w-12",
+    value: "h-12 min-w-12 px-3 text-base",
+    icon: "h-5 w-5"
+  }
+};
+// PageUp / PageDown move this many steps.
+var PAGE_STEPS = 10;
+// Decimal places of a number, so 0.1 + 0.2 lands on 0.3 instead of 0.30000000000000004.
+function decimals(n) {
+  var s = String(n);
+  var i = s.indexOf(".");
+  return i < 0 ? 0 : s.length - i - 1;
+}
+function clamp(n, min, max) {
+  return Math.min(max, Math.max(min, n));
+}
+/**
+ * QuantityStepper: a − / value / + control for cart lines and buy boxes.
+ * The value is a `role="spinbutton"`; the buttons step it and disable at the bounds.
+ */
+var QuantityStepper = /*#__PURE__*/forwardRef(function QuantityStepper(_ref, ref) {
+  var valueProp = _ref.value,
+    defaultValue = _ref.defaultValue,
+    onChange = _ref.onChange,
+    _ref$min = _ref.min,
+    min = _ref$min === void 0 ? 0 : _ref$min,
+    _ref$max = _ref.max,
+    max = _ref$max === void 0 ? Infinity : _ref$max,
+    _ref$step = _ref.step,
+    step = _ref$step === void 0 ? 1 : _ref$step,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "md" : _ref$size,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$loading = _ref.loading,
+    loading = _ref$loading === void 0 ? false : _ref$loading,
+    label = _ref.label,
+    _ref$hideLabel = _ref.hideLabel,
+    hideLabel = _ref$hideLabel === void 0 ? false : _ref$hideLabel,
+    formatValue = _ref.formatValue,
+    _ref$decrementLabel = _ref.decrementLabel,
+    decrementLabel = _ref$decrementLabel === void 0 ? "Decrease quantity" : _ref$decrementLabel,
+    _ref$incrementLabel = _ref.incrementLabel,
+    incrementLabel = _ref$incrementLabel === void 0 ? "Increase quantity" : _ref$incrementLabel,
+    name = _ref.name,
+    className = _ref.className,
+    ariaLabel = _ref["aria-label"],
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var labelId = "quantity-stepper-label-".concat(useId());
+  var safeStep = step > 0 ? step : 1;
+  var precision = Math.max(decimals(safeStep), decimals(Number.isFinite(min) ? min : 0));
+  var initial = defaultValue !== null && defaultValue !== void 0 ? defaultValue : Number.isFinite(min) ? min : 0;
+  var _useControllableState = useControllableState({
+      value: valueProp,
+      defaultValue: initial,
+      onChange: onChange
+    }),
+    _useControllableState2 = _slicedToArray(_useControllableState, 2),
+    rawValue = _useControllableState2[0],
+    setValue = _useControllableState2[1];
+  var value = clamp(Number(rawValue) || 0, min, max);
+  var inactive = disabled || loading;
+  var atMin = value <= min;
+  var atMax = value >= max;
+  var commit = function commit(next) {
+    if (inactive) return;
+    var rounded = Number(clamp(next, min, max).toFixed(precision));
+    if (rounded !== value) setValue(rounded);
+  };
+  var onKeyDown = function onKeyDown(event) {
+    var next;
+    switch (event.key) {
+      case "ArrowUp":
+        next = value + safeStep;
+        break;
+      case "ArrowDown":
+        next = value - safeStep;
+        break;
+      case "PageUp":
+        next = value + safeStep * PAGE_STEPS;
+        break;
+      case "PageDown":
+        next = value - safeStep * PAGE_STEPS;
+        break;
+      case "Home":
+        if (!Number.isFinite(min)) return;
+        next = min;
+        break;
+      case "End":
+        if (!Number.isFinite(max)) return;
+        next = max;
+        break;
+      default:
+        return;
+    }
+    event.preventDefault();
+    commit(next);
+  };
+  var sizes = SIZE_CLASSES[size] || SIZE_CLASSES.md;
+  var display = formatValue ? formatValue(value) : value;
+  var valueText = formatValue && (typeof display === "string" || typeof display === "number") ? String(display) : undefined;
+  var buttonClass = cn("inline-flex shrink-0 items-center justify-center text-foreground outline-none select-none", "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500", "enabled:hover:bg-line disabled:cursor-not-allowed disabled:text-muted", "motion-reduce:transition-none", TOUCH_TARGET, PRESS_FEEDBACK, sizes.button);
+  return jsxs("div", _objectSpread2(_objectSpread2({
+    ref: ref,
+    className: cn("inline-flex flex-col gap-1", disabled && "opacity-50", className)
+  }, rest), {}, {
+    children: [label && jsx("span", {
+      id: labelId,
+      className: cn("text-sm font-medium text-foreground", hideLabel && "sr-only"),
+      children: label
+    }), jsxs("div", {
+      className: cn("inline-flex items-stretch overflow-hidden rounded-lg border border-line bg-surface", disabled && "cursor-not-allowed"),
+      "aria-busy": loading || undefined,
+      children: [jsx("button", {
+        type: "button",
+        "aria-label": decrementLabel,
+        disabled: inactive || atMin,
+        tabIndex: -1,
+        onClick: function onClick() {
+          return commit(value - safeStep);
+        },
+        className: cn(buttonClass, "rounded-l-lg"),
+        children: jsx(Minus, {
+          "aria-hidden": "true",
+          className: sizes.icon
+        })
+      }), jsxs("div", {
+        role: "spinbutton",
+        tabIndex: disabled ? -1 : 0,
+        "aria-valuenow": value,
+        "aria-valuemin": Number.isFinite(min) ? min : undefined,
+        "aria-valuemax": Number.isFinite(max) ? max : undefined,
+        "aria-valuetext": valueText,
+        "aria-disabled": disabled || undefined,
+        "aria-readonly": loading || undefined,
+        "aria-labelledby": label ? labelId : undefined,
+        "aria-label": label ? undefined : ariaLabel,
+        onKeyDown: onKeyDown,
+        className: cn("relative inline-flex items-center justify-center border-x border-line font-medium tabular-nums text-foreground outline-none", "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500", "[@media(pointer:coarse)]:min-h-11", sizes.value),
+        children: [jsx("span", {
+          className: cn(loading && "invisible"),
+          children: display
+        }), loading && jsx(Loader2, {
+          "aria-hidden": "true",
+          "data-quantity-stepper-spinner": "",
+          className: cn("absolute animate-spin text-muted motion-reduce:animate-none", sizes.icon)
+        })]
+      }), jsx("button", {
+        type: "button",
+        "aria-label": incrementLabel,
+        disabled: inactive || atMax,
+        tabIndex: -1,
+        onClick: function onClick() {
+          return commit(value + safeStep);
+        },
+        className: cn(buttonClass, "rounded-r-lg"),
+        children: jsx(Plus, {
+          "aria-hidden": "true",
+          className: sizes.icon
+        })
+      })]
+    }), name && jsx("input", {
+      type: "hidden",
+      name: name,
+      value: value
+    })]
+  }));
+});
+QuantityStepper.displayName = "QuantityStepper";
+
+export { QuantityStepper as default };

package/dist/esm/components/utility/ImageGallery.js

@@ -0,0 +1,150 @@
+'use client';
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React from 'react';
+import { cn } from '../../utils/cn.js';
+import { useControllableState } from '../../hooks/useControllableState.js';
+import Dialog from '../feedback/Dialog.js';
+import { PlaceholderBox, ratioClass, Viewer, Mosaic, Thumbnails } from './imageGalleryParts.js';
+
+var _excluded = ["images", "layout", "ratio", "index", "defaultIndex", "onIndexChange", "zoom", "lightbox", "placeholder", "showCounter", "className", "aria-label"];
+var clampIndex = function clampIndex(i, count) {
+  return Math.min(Math.max(Number(i) || 0, 0), Math.max(count - 1, 0));
+};
+var ImageGallery = /*#__PURE__*/React.forwardRef(function ImageGallery(props, ref) {
+  var _props$images = props.images,
+    images = _props$images === void 0 ? [] : _props$images,
+    _props$layout = props.layout,
+    layout = _props$layout === void 0 ? "thumbs-below" : _props$layout,
+    _props$ratio = props.ratio,
+    ratio = _props$ratio === void 0 ? "4:3" : _props$ratio,
+    indexProp = props.index,
+    _props$defaultIndex = props.defaultIndex,
+    defaultIndex = _props$defaultIndex === void 0 ? 0 : _props$defaultIndex,
+    onIndexChange = props.onIndexChange,
+    _props$zoom = props.zoom,
+    zoom = _props$zoom === void 0 ? false : _props$zoom,
+    _props$lightbox = props.lightbox,
+    lightbox = _props$lightbox === void 0 ? false : _props$lightbox,
+    placeholder = props.placeholder,
+    _props$showCounter = props.showCounter,
+    showCounter = _props$showCounter === void 0 ? true : _props$showCounter,
+    className = props.className,
+    _props$ariaLabel = props["aria-label"],
+    ariaLabel = _props$ariaLabel === void 0 ? "Image gallery" : _props$ariaLabel,
+    rest = _objectWithoutProperties(props, _excluded);
+  var list = Array.isArray(images) ? images : [];
+  var count = list.length;
+  var _useControllableState = useControllableState({
+      value: indexProp,
+      defaultValue: defaultIndex,
+      onChange: onIndexChange
+    }),
+    _useControllableState2 = _slicedToArray(_useControllableState, 2),
+    rawIndex = _useControllableState2[0],
+    setIndex = _useControllableState2[1];
+  var index = clampIndex(rawIndex, count);
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    open = _React$useState2[0],
+    setOpen = _React$useState2[1];
+  // Wraps around at both ends; a no-op when the target is already current.
+  var select = React.useCallback(function (next) {
+    if (count === 0) return;
+    var target = (next % count + count) % count;
+    if (target !== index) setIndex(target);
+  }, [count, index, setIndex]);
+  if (count === 0) {
+    return jsx("div", _objectSpread2(_objectSpread2({
+      ref: ref,
+      className: cn("w-full", className),
+      "data-layout": layout
+    }, rest), {}, {
+      children: jsx("div", {
+        role: "img",
+        "aria-label": "No images",
+        className: cn("overflow-hidden rounded-xl border border-line", ratioClass(ratio)),
+        children: jsx(PlaceholderBox, {
+          children: placeholder
+        })
+      })
+    }));
+  }
+  var shared = {
+    images: list,
+    index: index,
+    onSelect: select,
+    placeholder: placeholder
+  };
+  var viewer = jsx(Viewer, _objectSpread2(_objectSpread2({}, shared), {}, {
+    ratio: ratio,
+    zoom: zoom,
+    showCounter: showCounter,
+    label: ariaLabel,
+    onExpand: lightbox ? function () {
+      return setOpen(true);
+    } : undefined
+  }));
+  var body;
+  if (layout === "mosaic") {
+    var activate = function activate(i) {
+      select(i);
+      if (lightbox) setOpen(true);
+    };
+    body = jsx(Mosaic, {
+      images: list,
+      index: index,
+      onActivate: activate,
+      ratio: ratio,
+      placeholder: placeholder
+    });
+  } else if (layout === "thumbs-side") {
+    // Thumbnails sit left of the photo from `sm` up and below it on phones.
+    body = jsxs("div", {
+      className: "flex flex-col gap-3 sm:flex-row",
+      children: [jsx("div", {
+        className: "min-w-0 sm:flex-1",
+        children: viewer
+      }), count > 1 && jsx("div", {
+        className: "relative shrink-0 sm:order-first sm:w-20",
+        children: jsx(Thumbnails, _objectSpread2(_objectSpread2({}, shared), {}, {
+          side: true
+        }))
+      })]
+    });
+  } else {
+    body = jsxs("div", {
+      className: "flex flex-col gap-3",
+      children: [viewer, count > 1 && jsx(Thumbnails, _objectSpread2({}, shared))]
+    });
+  }
+  return jsxs("div", _objectSpread2(_objectSpread2({
+    ref: ref,
+    className: cn("w-full", className),
+    "data-layout": layout,
+    "aria-label": layout === "mosaic" ? ariaLabel : undefined,
+    role: layout === "mosaic" ? "region" : undefined
+  }, rest), {}, {
+    children: [body, lightbox && jsx(Dialog, {
+      isOpen: open,
+      onClose: function onClose() {
+        return setOpen(false);
+      },
+      size: "full",
+      presentation: "popover",
+      title: "Image ".concat(index + 1, " of ").concat(count),
+      className: "max-w-5xl",
+      "data-gallery-lightbox": "",
+      children: jsx(Viewer, _objectSpread2(_objectSpread2({}, shared), {}, {
+        ratio: ratio,
+        zoom: zoom,
+        showCounter: showCounter,
+        label: "".concat(ariaLabel, ", full-screen"),
+        fit: "contain"
+      }))
+    })]
+  }));
+});
+ImageGallery.displayName = "ImageGallery";
+
+export { ImageGallery, ImageGallery as default };