@hanwenbo/x-taro-ui 0.0.1

package/es/components/mask/tokens.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Mask Component Tokens
+ * Defines how Mask consumes design system tokens
+ */
+/// <reference types="react" />
+import type { MaskOpacity } from './types';
+export interface MaskTokens {
+    opacity: number;
+    zIndex: number;
+}
+/**
+ * Get mask opacity value
+ */
+export declare function useMaskOpacity(opacity?: MaskOpacity): number;
+/**
+ * Get mask colors
+ */
+export declare function useMaskColors(customColor?: string): {
+    background: string;
+};
+/**
+ * Build mask style object
+ */
+export declare function useMaskStyle(opacity: MaskOpacity, opacityValue: number | undefined, zIndex: number, customColor?: string): React.CSSProperties;
+/**
+ * Build mask animation style
+ */
+export declare function useMaskAnimation(mounted: boolean, targetOpacity?: number, enterDuration?: number, exitDuration?: number, enterTimingFunction?: string, exitTimingFunction?: string): React.CSSProperties;
+//# sourceMappingURL=tokens.d.ts.map

package/es/components/mask/tokens.js

@@ -0,0 +1,75 @@
+/**
+ * Mask Component Tokens
+ * Defines how Mask consumes design system tokens
+ */
+
+import { useMemo } from 'react';
+import { useTokens, withOpacity } from "../../theme";
+/**
+ * Get mask opacity value
+ */
+export function useMaskOpacity() {
+  var opacity = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'default';
+  return useMemo(function () {
+    var opacityMap = {
+      thin: 0.35,
+      default: 0.5,
+      thick: 0.75
+    };
+    return opacityMap[opacity];
+  }, [opacity]);
+}
+
+/**
+ * Get mask colors
+ */
+export function useMaskColors(customColor) {
+  var _useTokens = useTokens(),
+    colors = _useTokens.colors;
+  return useMemo(function () {
+    return {
+      background: customColor || "var(--x-overlay-mask, ".concat(withOpacity(colors.foreground, 0.25), ")")
+    };
+  }, [customColor, colors.foreground]);
+}
+
+/**
+ * Build mask style object
+ */
+export function useMaskStyle(opacity, opacityValue, zIndex, customColor) {
+  var defaultOpacity = useMaskOpacity(opacity);
+  var colors = useMaskColors(customColor);
+  var finalOpacity = opacityValue !== undefined ? opacityValue : defaultOpacity;
+  return useMemo(function () {
+    return {
+      position: 'fixed',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      backgroundColor: colors.background,
+      opacity: finalOpacity,
+      zIndex: zIndex,
+      boxSizing: 'border-box'
+    };
+  }, [colors.background, finalOpacity, zIndex]);
+}
+
+/**
+ * Build mask animation style
+ */
+export function useMaskAnimation(mounted) {
+  var targetOpacity = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+  var enterDuration = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 300;
+  var exitDuration = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : enterDuration;
+  var enterTimingFunction = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 'ease-out';
+  var exitTimingFunction = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : enterTimingFunction;
+  return useMemo(function () {
+    return {
+      opacity: mounted ? targetOpacity : 0,
+      pointerEvents: mounted ? 'auto' : 'none',
+      transition: "opacity ".concat(mounted ? enterDuration : exitDuration, "ms ").concat(mounted ? enterTimingFunction : exitTimingFunction),
+      willChange: 'opacity'
+    };
+  }, [enterDuration, enterTimingFunction, exitDuration, exitTimingFunction, mounted, targetOpacity]);
+}

package/es/components/mask/types.d.ts

@@ -0,0 +1,49 @@
+/**
+ * Mask Component Types
+ *
+ * @description
+ * Design system aligned mask component types
+ */
+/// <reference types="react" />
+import type { ViewProps as TaroViewProps } from '@tarojs/components/types/View';
+declare type NativeMaskViewProps = Omit<TaroViewProps, 'children' | 'className' | 'onClick' | 'ref' | 'style'>;
+export declare type MaskOpacity = 'thin' | 'default' | 'thick';
+export interface MaskProps extends NativeMaskViewProps {
+    /** Keep the mask mounted for a synchronized parent transition. */
+    mounted?: boolean;
+    onMaskClick?: () => void;
+    disableBodyScroll?: boolean;
+    /** H5 portal container; mini-program runtimes keep the node in place. */
+    getContainer?: () => HTMLElement | null;
+    centerContent?: boolean;
+    enterDuration?: number;
+    exitDuration?: number;
+    enterTimingFunction?: string;
+    exitTimingFunction?: string;
+    /** Visible state */
+    visible?: boolean;
+    /** Opacity level */
+    opacity?: MaskOpacity;
+    /** Custom opacity value (0-1), overrides opacity prop */
+    opacityValue?: number;
+    /** Z-index */
+    zIndex?: number;
+    /** Click to close */
+    closable?: boolean;
+    /** Mask color (overrides default) */
+    color?: string;
+    /** Content inside mask (for custom usage) */
+    children?: React.ReactNode;
+    /** Close handler */
+    onClose?: () => void;
+    /** Native Taro click handler. */
+    onClick?: TaroViewProps['onClick'];
+    /** Additional CSS class */
+    className?: string;
+    /** Additional inline styles */
+    style?: React.CSSProperties;
+    /** Stable test selector. */
+    testID?: string;
+}
+export {};
+//# sourceMappingURL=types.d.ts.map

package/es/components/mask/types.js

@@ -0,0 +1 @@
+export {};

package/es/components/masonryList/index.d.ts

@@ -0,0 +1,4 @@
+export * from './types';
+export { default as MasonryList } from './masonryList';
+export { default } from './masonryList';
+//# sourceMappingURL=index.d.ts.map

package/es/components/masonryList/index.js

@@ -0,0 +1,3 @@
+export * from "./types";
+export { default as MasonryList } from "./masonryList";
+export { default } from "./masonryList";

package/es/components/masonryList/masonryList.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { MasonryListProps, MasonryListRef } from './types';
+declare const MasonryList: <T = unknown>(props: MasonryListProps<T> & {
+    ref?: React.Ref<MasonryListRef<T>> | undefined;
+}) => React.ReactElement | null;
+export default MasonryList;
+//# sourceMappingURL=masonryList.d.ts.map

package/es/components/masonryList/masonryList.js

@@ -0,0 +1,501 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React, { useCallback, useEffect, useId, useImperativeHandle, useRef, useState } from 'react';
+import { Text, View } from '@tarojs/components';
+import { useTheme } from "../../theme";
+import { classNames } from "../../utils";
+import { resolveLocaleText } from "../../utils/locale";
+import { useConfigProvider } from "../configProvider";
+import { ScrollView } from "../scrollView";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function MasonryListInner(_ref, ref) {
+  var _ref2, _ref4, _ref5, _ref8;
+  var data = _ref.data,
+    items = _ref.items,
+    renderItem = _ref.renderItem,
+    keyExtractor = _ref.keyExtractor,
+    columns = _ref.columns,
+    _ref$numColumns = _ref.numColumns,
+    numColumns = _ref$numColumns === void 0 ? columns !== null && columns !== void 0 ? columns : 2 : _ref$numColumns,
+    columnGap = _ref.columnGap,
+    itemGap = _ref.itemGap,
+    gap = _ref.gap,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'plain' : _ref$variant,
+    estimatedHeight = _ref.estimatedHeight,
+    _ref$loading = _ref.loading,
+    loading = _ref$loading === void 0 ? false : _ref$loading,
+    loadingText = _ref.loadingText,
+    loadingComponent = _ref.loadingComponent,
+    emptyText = _ref.emptyText,
+    emptyComponent = _ref.emptyComponent,
+    _ref$hasMore = _ref.hasMore,
+    hasMore = _ref$hasMore === void 0 ? true : _ref$hasMore,
+    onEndReached = _ref.onEndReached,
+    _ref$onEndReachedThre = _ref.onEndReachedThreshold,
+    onEndReachedThreshold = _ref$onEndReachedThre === void 0 ? 100 : _ref$onEndReachedThre,
+    _ref$horizontal = _ref.horizontal,
+    horizontal = _ref$horizontal === void 0 ? false : _ref$horizontal,
+    itemHeight = _ref.itemHeight,
+    header = _ref.header,
+    footer = _ref.footer,
+    itemStyle = _ref.itemStyle,
+    getItemStyle = _ref.getItemStyle,
+    onRefresh = _ref.onRefresh,
+    onDataChange = _ref.onDataChange,
+    height = _ref.height,
+    _ref$showScrollbar = _ref.showScrollbar,
+    showScrollbar = _ref$showScrollbar === void 0 ? true : _ref$showScrollbar,
+    contentContainerStyle = _ref.contentContainerStyle,
+    children = _ref.children,
+    className = _ref.className,
+    style = _ref.style,
+    testID = _ref.testID;
+  var _useTheme = useTheme(),
+    theme = _useTheme.theme;
+  var config = useConfigProvider();
+  var reactId = useId();
+  var instanceIdRef = useRef("x-masonry-list-".concat(reactId.replace(/[^a-zA-Z0-9_-]/g, '')));
+  var latestPropItemsRef = useRef((_ref2 = data !== null && data !== void 0 ? data : items) !== null && _ref2 !== void 0 ? _ref2 : []);
+  var _useState = useState(function () {
+      var _ref3;
+      return (_ref3 = data !== null && data !== void 0 ? data : items) !== null && _ref3 !== void 0 ? _ref3 : [];
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    localItems = _useState2[0],
+    setLocalItems = _useState2[1];
+  var localItemsRef = useRef(localItems);
+  var currentPropItems = data !== null && data !== void 0 ? data : items;
+  var propItemsChanged = currentPropItems !== undefined && latestPropItemsRef.current !== currentPropItems;
+  if (propItemsChanged) {
+    latestPropItemsRef.current = currentPropItems;
+    localItemsRef.current = currentPropItems;
+  }
+  var renderedItems = propItemsChanged ? currentPropItems : localItems;
+  var _useState3 = useState({
+      offset: 0,
+      animated: false,
+      sequence: 0,
+      target: null,
+      requested: false
+    }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    scrollRequest = _useState4[0],
+    setScrollRequest = _useState4[1];
+  var nearEndRef = useRef(false);
+  var hasDataProp = data !== undefined || items !== undefined;
+  var childItems = hasDataProp ? [] : React.Children.toArray(children).filter(hasRenderableNode);
+  var resolvedColumns = normalizeColumnCount(numColumns);
+  var resolvedColumnGap = (_ref4 = columnGap !== null && columnGap !== void 0 ? columnGap : gap) !== null && _ref4 !== void 0 ? _ref4 : 10;
+  var resolvedItemGap = (_ref5 = itemGap !== null && itemGap !== void 0 ? itemGap : gap) !== null && _ref5 !== void 0 ? _ref5 : 10;
+  var resolvedEndReachedThreshold = normalizeScrollOffset(onEndReachedThreshold);
+  var scrollTargetId = scrollRequest.target ? "".concat(instanceIdRef.current, "-").concat(scrollRequest.target, "-").concat(scrollRequest.sequence) : undefined;
+  var resolvedLoadingText = loadingText !== null && loadingText !== void 0 ? loadingText : resolveLocaleText(config.locale, 'list.loading', '加载中...');
+  var resolvedEmptyText = emptyText !== null && emptyText !== void 0 ? emptyText : resolveLocaleText(config.locale, 'empty.text', '暂无数据');
+  useEffect(function () {
+    var _ref6;
+    var nextItems = (_ref6 = data !== null && data !== void 0 ? data : items) !== null && _ref6 !== void 0 ? _ref6 : [];
+    latestPropItemsRef.current = nextItems;
+    localItemsRef.current = nextItems;
+    setLocalItems(nextItems);
+  }, [data, items]);
+  useEffect(function () {
+    nearEndRef.current = false;
+  }, [horizontal, renderedItems.length, resolvedEndReachedThreshold]);
+  var commitLocalItems = useCallback(function (updater) {
+    var next = updater(localItemsRef.current);
+    localItemsRef.current = next;
+    setLocalItems(next);
+    onDataChange === null || onDataChange === void 0 || onDataChange(next);
+  }, [onDataChange]);
+  var requestScroll = useCallback(function (offset, animated) {
+    setScrollRequest(function (current) {
+      return {
+        offset: normalizeScrollOffset(offset),
+        animated: animated,
+        sequence: current.sequence + 1,
+        target: null,
+        requested: true
+      };
+    });
+  }, []);
+  var requestTarget = useCallback(function (target, animated) {
+    setScrollRequest(function (current) {
+      return _objectSpread(_objectSpread({}, current), {}, {
+        animated: animated,
+        sequence: current.sequence + 1,
+        target: target,
+        requested: true
+      });
+    });
+  }, []);
+  var emitEndReached = useCallback(function () {
+    if (nearEndRef.current || !hasMore || loading) return;
+    nearEndRef.current = true;
+    onEndReached === null || onEndReached === void 0 || onEndReached();
+  }, [hasMore, loading, onEndReached]);
+  useImperativeHandle(ref, function () {
+    return {
+      refresh: function refresh() {
+        var next = latestPropItemsRef.current;
+        localItemsRef.current = next;
+        setLocalItems(next);
+        nearEndRef.current = false;
+        onRefresh === null || onRefresh === void 0 || onRefresh();
+      },
+      loadMore: function loadMore() {
+        if (hasMore && !loading) onEndReached === null || onEndReached === void 0 || onEndReached();
+      },
+      scrollToOffset: function scrollToOffset(_ref7) {
+        var offset = _ref7.offset,
+          _ref7$animated = _ref7.animated,
+          animated = _ref7$animated === void 0 ? true : _ref7$animated;
+        return requestScroll(offset, animated);
+      },
+      scrollToTop: function scrollToTop() {
+        var animated = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+        return requestTarget('start', animated);
+      },
+      scrollToEnd: function scrollToEnd() {
+        var animated = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+        return requestTarget('end', animated);
+      },
+      getData: function getData() {
+        return localItemsRef.current;
+      },
+      updateItem: function updateItem(updateFn) {
+        return commitLocalItems(updateFn);
+      },
+      removeItem: function removeItem(key) {
+        return commitLocalItems(function (current) {
+          return current.filter(function (item, index) {
+            return resolveItemKey(item, index, keyExtractor) !== key;
+          });
+        });
+      },
+      listLength: function listLength() {
+        return localItemsRef.current.length;
+      }
+    };
+  }, [commitLocalItems, hasMore, keyExtractor, loading, onEndReached, onRefresh, requestScroll, requestTarget]);
+  var handleScroll = function handleScroll(event) {
+    var _host$clientWidth, _host$clientHeight;
+    if (scrollRequest.requested) {
+      setScrollRequest(function (current) {
+        return current.requested && current.sequence === scrollRequest.sequence ? _objectSpread(_objectSpread({}, current), {}, {
+          requested: false
+        }) : current;
+      });
+    }
+    var detail = event.detail;
+    var host = event.currentTarget;
+    var viewport = horizontal ? (_host$clientWidth = host.clientWidth) !== null && _host$clientWidth !== void 0 ? _host$clientWidth : 0 : (_host$clientHeight = host.clientHeight) !== null && _host$clientHeight !== void 0 ? _host$clientHeight : 0;
+    var extent = horizontal ? detail.scrollWidth : detail.scrollHeight;
+    var offset = horizontal ? detail.scrollLeft : detail.scrollTop;
+    var distanceFromEnd = extent - viewport - offset;
+    if (extent > 0 && viewport > 0) {
+      if (distanceFromEnd < resolvedEndReachedThreshold) emitEndReached();else nearEndRef.current = false;
+    }
+  };
+  var sourceItems = renderedItems.map(function (item, index) {
+    var _estimatedHeight;
+    return {
+      key: resolveItemKey(item, index, keyExtractor),
+      node: renderMasonryItem(renderItem, item, index, theme.colors),
+      weight: normalizeWeight((_estimatedHeight = estimatedHeight === null || estimatedHeight === void 0 ? void 0 : estimatedHeight(item, index)) !== null && _estimatedHeight !== void 0 ? _estimatedHeight : inferWeight(item)),
+      style: getItemStyle === null || getItemStyle === void 0 ? void 0 : getItemStyle(item, index),
+      index: index
+    };
+  });
+  var childEntries = childItems.map(function (child, index) {
+    return {
+      key: String(index),
+      node: child,
+      weight: 1,
+      style: undefined,
+      index: index
+    };
+  });
+  var entries = sourceItems.length > 0 ? sourceItems : childEntries;
+  var columnsData = buildColumns(entries, resolvedColumns);
+  var surfaceStyle = variant === 'card' ? {
+    padding: 16,
+    borderRadius: 'var(--x-list-card-radius)',
+    backgroundColor: theme.colors.card,
+    border: "1px solid ".concat(theme.colors.border)
+  } : variant === 'outline' ? {
+    padding: 16,
+    borderRadius: 'var(--x-list-card-radius)',
+    backgroundColor: theme.colors.background,
+    border: "1px solid ".concat(theme.colors.border)
+  } : undefined;
+  var renderEntry = function renderEntry(entry) {
+    return /*#__PURE__*/_jsx(View, {
+      "data-slot": "masonry-list-item",
+      "data-index": entry.index,
+      className: "x-masonry-list__item",
+      style: _objectSpread(_objectSpread(_objectSpread({
+        boxSizing: 'border-box',
+        breakInside: 'avoid',
+        flexShrink: horizontal ? 0 : undefined,
+        height: toLength(itemHeight)
+      }, surfaceStyle), itemStyle), entry.style),
+      children: entry.node
+    }, entry.key);
+  };
+  return /*#__PURE__*/_jsx(View, {
+    "data-slot": "masonry-list-root",
+    "data-columns": horizontal ? undefined : String(resolvedColumns),
+    "data-horizontal": horizontal ? 'true' : undefined,
+    "data-loading": loading ? 'true' : undefined,
+    "data-has-more": hasMore ? 'true' : 'false',
+    "data-scroll-target": scrollTargetId,
+    "data-testid": testID,
+    className: classNames('x-masonry-list', "x-masonry-list--".concat(variant), loading && 'x-masonry-list--loading', entries.length === 0 && 'x-masonry-list--empty', className),
+    style: _objectSpread({
+      boxSizing: 'border-box',
+      width: '100%'
+    }, style),
+    children: /*#__PURE__*/_jsx(ScrollView, {
+      className: "x-masonry-list__scroll",
+      horizontal: horizontal,
+      scrollX: horizontal,
+      scrollY: !horizontal,
+      flex: false,
+      height: (_ref8 = height !== null && height !== void 0 ? height : style === null || style === void 0 ? void 0 : style.height) !== null && _ref8 !== void 0 ? _ref8 : 'auto',
+      showScrollbar: showScrollbar,
+      scrollWithAnimation: scrollRequest.animated,
+      scrollIntoView: scrollTargetId,
+      scrollIntoViewAlignment: "start",
+      scrollTop: horizontal || !scrollRequest.requested || scrollRequest.target ? undefined : scrollRequest.offset + (scrollRequest.sequence % 2 === 0 ? 0 : 0.01),
+      scrollLeft: horizontal && scrollRequest.requested && !scrollRequest.target ? scrollRequest.offset + (scrollRequest.sequence % 2 === 0 ? 0 : 0.01) : undefined,
+      lowerThreshold: resolvedEndReachedThreshold,
+      onScrollToLower: emitEndReached,
+      onScroll: handleScroll,
+      children: /*#__PURE__*/_jsxs(View, {
+        "data-slot": "masonry-list-content",
+        className: "x-masonry-list__content",
+        style: _objectSpread({
+          boxSizing: 'border-box',
+          width: '100%'
+        }, contentContainerStyle),
+        children: [!horizontal ? /*#__PURE__*/_jsx(View, {
+          id: scrollRequest.target === 'start' ? scrollTargetId : "".concat(instanceIdRef.current, "-start"),
+          "aria-hidden": true,
+          "data-slot": "masonry-list-start",
+          style: anchorStyle
+        }) : null, hasRenderableNode(header) ? /*#__PURE__*/_jsx(View, {
+          "data-slot": "masonry-list-header",
+          className: "x-masonry-list__header",
+          children: header
+        }) : null, entries.length === 0 && !loading ? /*#__PURE__*/_jsx(View, {
+          "data-slot": "masonry-list-empty",
+          className: "x-masonry-list__empty",
+          style: stateStyle,
+          children: emptyComponent !== null && emptyComponent !== void 0 ? emptyComponent : renderText(resolvedEmptyText, theme.colors['muted-foreground'])
+        }) : horizontal ? /*#__PURE__*/_jsxs(View, {
+          className: "x-masonry-list__horizontal",
+          style: {
+            display: 'flex',
+            flexDirection: 'row',
+            flexWrap: 'nowrap',
+            alignItems: 'flex-start',
+            minWidth: '100%',
+            gap: toLength(resolvedItemGap)
+          },
+          children: [/*#__PURE__*/_jsx(View, {
+            id: scrollRequest.target === 'start' ? scrollTargetId : "".concat(instanceIdRef.current, "-start"),
+            "aria-hidden": true,
+            "data-slot": "masonry-list-start",
+            style: anchorStyle
+          }), entries.map(renderEntry), /*#__PURE__*/_jsx(View, {
+            id: scrollRequest.target === 'end' ? scrollTargetId : "".concat(instanceIdRef.current, "-end"),
+            "aria-hidden": true,
+            "data-slot": "masonry-list-end",
+            style: anchorStyle
+          })]
+        }) : /*#__PURE__*/_jsx(View, {
+          className: "x-masonry-list__columns",
+          style: {
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'flex-start',
+            gap: toLength(resolvedColumnGap)
+          },
+          children: columnsData.map(function (column, columnIndex) {
+            return /*#__PURE__*/_jsx(View, {
+              "data-slot": "masonry-list-column",
+              "data-column": columnIndex,
+              className: "x-masonry-list__column",
+              style: {
+                display: 'flex',
+                minWidth: 0,
+                flex: 1,
+                flexDirection: 'column',
+                gap: toLength(resolvedItemGap)
+              },
+              children: column.map(renderEntry)
+            }, columnIndex);
+          })
+        }), loading ? /*#__PURE__*/_jsx(View, {
+          "data-slot": "masonry-list-loading",
+          className: "x-masonry-list__loading",
+          style: stateStyle,
+          children: loadingComponent !== null && loadingComponent !== void 0 ? loadingComponent : renderText(resolvedLoadingText, theme.colors['muted-foreground'])
+        }) : null, hasRenderableNode(footer) ? /*#__PURE__*/_jsx(View, {
+          "data-slot": "masonry-list-footer",
+          className: "x-masonry-list__footer",
+          children: footer
+        }) : null, !horizontal ? /*#__PURE__*/_jsx(View, {
+          id: scrollRequest.target === 'end' ? scrollTargetId : "".concat(instanceIdRef.current, "-end"),
+          "aria-hidden": true,
+          "data-slot": "masonry-list-end",
+          style: anchorStyle
+        }) : null]
+      })
+    })
+  });
+}
+var stateStyle = {
+  boxSizing: 'border-box',
+  display: 'flex',
+  width: '100%',
+  alignItems: 'center',
+  justifyContent: 'center',
+  padding: 16
+};
+var anchorStyle = {
+  width: 0,
+  height: 0,
+  minWidth: 0,
+  minHeight: 0,
+  flexShrink: 0,
+  overflow: 'hidden'
+};
+function resolveItemKey(item, index, keyExtractor) {
+  if (keyExtractor) return keyExtractor(item, index);
+  if (item && _typeof(item) === 'object' && 'id' in item) {
+    var id = item.id;
+    if (id !== undefined && id !== null) return String(id);
+  }
+  return "item-".concat(index);
+}
+function renderMasonryItem(renderer, item, index, colors) {
+  if (!renderer) return renderDefaultNode(item, colors);
+  if (renderer.length >= 2) {
+    return renderer(item, index);
+  }
+  return renderer({
+    item: item,
+    index: index
+  });
+}
+function buildColumns(items, columns) {
+  var buckets = Array.from({
+    length: columns
+  }, function () {
+    return [];
+  });
+  var heights = Array.from({
+    length: columns
+  }, function () {
+    return 0;
+  });
+  items.forEach(function (item) {
+    var targetIndex = 0;
+    heights.forEach(function (height, index) {
+      if (height < heights[targetIndex]) targetIndex = index;
+    });
+    buckets[targetIndex].push(item);
+    heights[targetIndex] += item.weight;
+  });
+  return buckets;
+}
+function inferWeight(item) {
+  if (item && _typeof(item) === 'object') {
+    var height = item.height;
+    if (typeof height === 'number' && Number.isFinite(height) && height > 0) return height;
+  }
+  return 1;
+}
+function normalizeColumnCount(value) {
+  return Number.isFinite(value) ? Math.max(1, Math.floor(value) || 1) : 1;
+}
+function normalizeScrollOffset(value) {
+  return Number.isFinite(value) ? Math.max(0, value) : 0;
+}
+function normalizeWeight(value) {
+  return Number.isFinite(value) && value > 0 ? value : 1;
+}
+function hasRenderableNode(node) {
+  return node !== null && node !== undefined && node !== false;
+}
+function renderText(content, color) {
+  return typeof content === 'string' || typeof content === 'number' ? /*#__PURE__*/_jsx(Text, {
+    style: {
+      color: color
+    },
+    children: content
+  }) : content;
+}
+function renderDefaultNode(item, colors) {
+  if ( /*#__PURE__*/React.isValidElement(item)) return item;
+  if (typeof item === 'string' || typeof item === 'number') {
+    return /*#__PURE__*/_jsx(Text, {
+      style: {
+        color: colors.foreground
+      },
+      children: item
+    });
+  }
+  if (item && _typeof(item) === 'object') {
+    var _ref9, _record$title, _record$description, _record$extra;
+    var record = item;
+    var title = (_ref9 = (_record$title = record.title) !== null && _record$title !== void 0 ? _record$title : record.label) !== null && _ref9 !== void 0 ? _ref9 : record.name;
+    var description = (_record$description = record.description) !== null && _record$description !== void 0 ? _record$description : record.subtitle;
+    var extra = (_record$extra = record.extra) !== null && _record$extra !== void 0 ? _record$extra : record.value;
+    return /*#__PURE__*/_jsxs(View, {
+      style: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 8
+      },
+      children: [title !== undefined ? /*#__PURE__*/_jsx(Text, {
+        style: {
+          color: colors.foreground,
+          fontWeight: '600'
+        },
+        children: String(title)
+      }) : null, description !== undefined ? /*#__PURE__*/_jsx(Text, {
+        style: {
+          color: colors['muted-foreground'],
+          fontSize: 13
+        },
+        children: String(description)
+      }) : null, extra !== undefined ? /*#__PURE__*/_jsx(Text, {
+        style: {
+          color: colors.foreground
+        },
+        children: String(extra)
+      }) : null]
+    });
+  }
+  return null;
+}
+function toLength(value) {
+  return typeof value === 'number' ? "".concat(value, "px") : value;
+}
+var MasonryList = /*#__PURE__*/React.forwardRef(MasonryListInner);
+MasonryList.displayName = 'MasonryList';
+export default MasonryList;