@multiplatform.one/components 5.0.27 → 6.0.0

package/dist/esm/views/List.mjs

@@ -0,0 +1,179 @@
+import { componentColors } from "../componentColors.mjs";
+import { FlashList } from "@shopify/flash-list";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { useHotkey } from "@tanstack/react-hotkeys";
+import { useCallback, useId, useRef, useState } from "react";
+import { ListItem, Spinner, Text, View, YStack } from "tamagui";
+import { jsx } from "react/jsx-runtime";
+function List({
+  items,
+  renderItem,
+  onItemClick,
+  onLoadMore,
+  hasMore = false,
+  isLoading = false,
+  estimateSize: estimateSizeProp,
+  overscan = 5,
+  emptyMessage = "No items found",
+  height: heightProp,
+  "aria-label": ariaLabel,
+  hotkeys: hotkeyOverrides,
+  ...stackProps
+}) {
+  const {
+    knobProps
+  } = useResolvedKnobs();
+  const sz = knobProps.sizeToken;
+  const estimateSize = estimateSizeProp ?? (sz === "$3" ? 44 : sz === "$5" ? 68 : 56);
+  const height = heightProp ?? (sz === "$3" ? 320 : sz === "$5" ? 480 : 400);
+  const listId = useId();
+  const containerRef = useRef(null);
+  const flashListRef = useRef(null);
+  const [focusedIndex, setFocusedIndex] = useState(-1);
+  const scrollToIndex = useCallback(index => {
+    if (index >= 0 && index < items.length) {
+      flashListRef.current?.scrollToIndex({
+        index,
+        animated: true
+      });
+    }
+  }, [items.length]);
+  const hotkeyOpts = {
+    target: containerRef
+  };
+  useHotkey(hotkeyOverrides?.next ?? "ArrowDown", () => {
+    setFocusedIndex(prev => {
+      const next = prev < 0 ? 0 : Math.min(prev + 1, items.length - 1);
+      scrollToIndex(next);
+      return next;
+    });
+  }, hotkeyOpts);
+  useHotkey(hotkeyOverrides?.prev ?? "ArrowUp", () => {
+    setFocusedIndex(prev => {
+      const next = prev < 0 ? items.length - 1 : Math.max(prev - 1, 0);
+      scrollToIndex(next);
+      return next;
+    });
+  }, hotkeyOpts);
+  useHotkey(hotkeyOverrides?.select ?? "Enter", () => {
+    if (focusedIndex >= 0 && focusedIndex < items.length) {
+      onItemClick?.(items[focusedIndex]);
+    }
+  }, hotkeyOpts);
+  useHotkey(hotkeyOverrides?.first ?? "Home", () => {
+    if (items.length > 0) {
+      setFocusedIndex(0);
+      scrollToIndex(0);
+    }
+  }, hotkeyOpts);
+  useHotkey(hotkeyOverrides?.last ?? "End", () => {
+    if (items.length > 0) {
+      const lastIndex = items.length - 1;
+      setFocusedIndex(lastIndex);
+      scrollToIndex(lastIndex);
+    }
+  }, hotkeyOpts);
+  useHotkey(hotkeyOverrides?.pageDown ?? "PageDown", () => {
+    setFocusedIndex(prev => {
+      const next = Math.min((prev < 0 ? 0 : prev) + 10, items.length - 1);
+      scrollToIndex(next);
+      return next;
+    });
+  }, hotkeyOpts);
+  useHotkey(hotkeyOverrides?.pageUp ?? "PageUp", () => {
+    setFocusedIndex(prev => {
+      const next = Math.max((prev < 0 ? 0 : prev) - 10, 0);
+      scrollToIndex(next);
+      return next;
+    });
+  }, hotkeyOpts);
+  const handleEndReached = useCallback(() => {
+    if (onLoadMore && hasMore && !isLoading) {
+      onLoadMore();
+    }
+  }, [onLoadMore, hasMore, isLoading]);
+  if (isLoading && items.length === 0) {
+    return /* @__PURE__ */jsx(YStack, {
+      ...knobProps.panelPadding,
+      alignItems: "center",
+      ...stackProps,
+      children: /* @__PURE__ */jsx(Spinner, {
+        size: "large"
+      })
+    });
+  }
+  if (items.length === 0) {
+    return /* @__PURE__ */jsx(YStack, {
+      ...knobProps.panelPadding,
+      alignItems: "center",
+      ...stackProps,
+      children: /* @__PURE__ */jsx(Text, {
+        color: componentColors.text.muted,
+        children: emptyMessage
+      })
+    });
+  }
+  const effectiveFocused = focusedIndex >= items.length ? -1 : focusedIndex;
+  return /* @__PURE__ */jsx(YStack, {
+    ...knobProps.gap,
+    ...stackProps,
+    children: /* @__PURE__ */jsx(View, {
+      ref: containerRef,
+      role: "list",
+      "aria-label": ariaLabel,
+      "aria-activedescendant": effectiveFocused >= 0 ? `${listId}-item-${effectiveFocused}` : void 0,
+      tabIndex: 0,
+      outlineWidth: 0,
+      style: {
+        height
+      },
+      children: /* @__PURE__ */jsx(FlashList, {
+        ref: flashListRef,
+        data: items,
+        drawDistance: overscan * estimateSize,
+        onEndReached: handleEndReached,
+        onEndReachedThreshold: 0.5,
+        keyExtractor: (_, index) => `${listId}-item-${index}`,
+        renderItem: ({
+          item,
+          index
+        }) => {
+          const isFocused = effectiveFocused === index;
+          return /* @__PURE__ */jsx(ListItem, {
+            id: `${listId}-item-${index}`,
+            size: knobProps.sizeToken,
+            role: "listitem",
+            "aria-selected": isFocused,
+            ...(isFocused ? {
+              "data-focused": true
+            } : {}),
+            backgroundColor: isFocused ? "$accentBackground" : "transparent",
+            hoverStyle: {
+              backgroundColor: componentColors.interactive.background
+            },
+            pressStyle: {
+              backgroundColor: componentColors.interactive.hover
+            },
+            cursor: onItemClick ? "pointer" : "default",
+            borderBottomWidth: 1,
+            borderBottomColor: "$borderColor",
+            onPress: onItemClick ? () => {
+              setFocusedIndex(index);
+              onItemClick(item);
+            } : void 0,
+            children: renderItem(item, index)
+          });
+        },
+        ListFooterComponent: isLoading && items.length > 0 ? /* @__PURE__ */jsx(YStack, {
+          padding: "$2",
+          alignItems: "center",
+          children: /* @__PURE__ */jsx(Spinner, {
+            size: "small"
+          })
+        }) : null
+      })
+    })
+  });
+}
+export { List };
+//# sourceMappingURL=List.mjs.map

package/dist/esm/views/List.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["componentColors","FlashList","useResolvedKnobs","useHotkey","useCallback","useId","useRef","useState","ListItem","Spinner","Text","View","YStack","jsx","List","items","renderItem","onItemClick","onLoadMore","hasMore","isLoading","estimateSize","estimateSizeProp","overscan","emptyMessage","height","heightProp","ariaLabel","hotkeys","hotkeyOverrides","stackProps","knobProps","sz","sizeToken","listId","containerRef","flashListRef","focusedIndex","setFocusedIndex","scrollToIndex","index","length","current","animated","hotkeyOpts","target","next","prev","Math","min","max","select","first","last","lastIndex","pageDown","pageUp","handleEndReached","panelPadding","alignItems","children","size","color","text","muted","effectiveFocused","gap","ref","role","tabIndex","outlineWidth","style","data","drawDistance","onEndReached","onEndReachedThreshold","keyExtractor","_","item","isFocused","id","backgroundColor","hoverStyle","interactive","background","pressStyle","hover","cursor","borderBottomWidth","borderBottomColor","onPress","ListFooterComponent","padding"],"sources":["../../../src/views/List.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/esm/views/List.native.js

@@ -0,0 +1,185 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { componentColors } from "../componentColors.native.js";
+import { FlashList } from "@shopify/flash-list";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { useHotkey } from "@tanstack/react-hotkeys";
+import React, { useCallback, useId, useRef, useState } from "react";
+import { ListItem, Spinner, Text, View, YStack } from "tamagui";
+function List(param) {
+  var {
+    items,
+    renderItem,
+    onItemClick,
+    onLoadMore,
+    hasMore = false,
+    isLoading = false,
+    estimateSize: estimateSizeProp,
+    overscan = 5,
+    emptyMessage = "No items found",
+    height: heightProp,
+    "aria-label": ariaLabel,
+    hotkeys: hotkeyOverrides,
+    ...stackProps
+  } = param;
+  var _ref, _ref1, _ref2, _ref3, _ref4, _ref5, _ref6;
+  var {
+    knobProps
+  } = useResolvedKnobs();
+  var sz = knobProps.sizeToken;
+  var estimateSize = estimateSizeProp !== null && estimateSizeProp !== void 0 ? estimateSizeProp : sz === "$3" ? 44 : sz === "$5" ? 68 : 56;
+  var height = heightProp !== null && heightProp !== void 0 ? heightProp : sz === "$3" ? 320 : sz === "$5" ? 480 : 400;
+  var listId = useId();
+  var containerRef = useRef(null);
+  var flashListRef = useRef(null);
+  var [focusedIndex, setFocusedIndex] = useState(-1);
+  var scrollToIndex = useCallback(function (index) {
+    if (index >= 0 && index < items.length) {
+      var _flashListRef_current;
+      (_flashListRef_current = flashListRef.current) === null || _flashListRef_current === void 0 ? void 0 : _flashListRef_current.scrollToIndex({
+        index,
+        animated: true
+      });
+    }
+  }, [items.length]);
+  var hotkeyOpts = {
+    target: containerRef
+  };
+  useHotkey((_ref = hotkeyOverrides === null || hotkeyOverrides === void 0 ? void 0 : hotkeyOverrides.next) !== null && _ref !== void 0 ? _ref : "ArrowDown", function () {
+    setFocusedIndex(function (prev) {
+      var next = prev < 0 ? 0 : Math.min(prev + 1, items.length - 1);
+      scrollToIndex(next);
+      return next;
+    });
+  }, hotkeyOpts);
+  useHotkey((_ref1 = hotkeyOverrides === null || hotkeyOverrides === void 0 ? void 0 : hotkeyOverrides.prev) !== null && _ref1 !== void 0 ? _ref1 : "ArrowUp", function () {
+    setFocusedIndex(function (prev) {
+      var next = prev < 0 ? items.length - 1 : Math.max(prev - 1, 0);
+      scrollToIndex(next);
+      return next;
+    });
+  }, hotkeyOpts);
+  useHotkey((_ref2 = hotkeyOverrides === null || hotkeyOverrides === void 0 ? void 0 : hotkeyOverrides.select) !== null && _ref2 !== void 0 ? _ref2 : "Enter", function () {
+    if (focusedIndex >= 0 && focusedIndex < items.length) {
+      onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(items[focusedIndex]);
+    }
+  }, hotkeyOpts);
+  useHotkey((_ref3 = hotkeyOverrides === null || hotkeyOverrides === void 0 ? void 0 : hotkeyOverrides.first) !== null && _ref3 !== void 0 ? _ref3 : "Home", function () {
+    if (items.length > 0) {
+      setFocusedIndex(0);
+      scrollToIndex(0);
+    }
+  }, hotkeyOpts);
+  useHotkey((_ref4 = hotkeyOverrides === null || hotkeyOverrides === void 0 ? void 0 : hotkeyOverrides.last) !== null && _ref4 !== void 0 ? _ref4 : "End", function () {
+    if (items.length > 0) {
+      var lastIndex = items.length - 1;
+      setFocusedIndex(lastIndex);
+      scrollToIndex(lastIndex);
+    }
+  }, hotkeyOpts);
+  useHotkey((_ref5 = hotkeyOverrides === null || hotkeyOverrides === void 0 ? void 0 : hotkeyOverrides.pageDown) !== null && _ref5 !== void 0 ? _ref5 : "PageDown", function () {
+    setFocusedIndex(function (prev) {
+      var next = Math.min((prev < 0 ? 0 : prev) + 10, items.length - 1);
+      scrollToIndex(next);
+      return next;
+    });
+  }, hotkeyOpts);
+  useHotkey((_ref6 = hotkeyOverrides === null || hotkeyOverrides === void 0 ? void 0 : hotkeyOverrides.pageUp) !== null && _ref6 !== void 0 ? _ref6 : "PageUp", function () {
+    setFocusedIndex(function (prev) {
+      var next = Math.max((prev < 0 ? 0 : prev) - 10, 0);
+      scrollToIndex(next);
+      return next;
+    });
+  }, hotkeyOpts);
+  var handleEndReached = useCallback(function () {
+    if (onLoadMore && hasMore && !isLoading) {
+      onLoadMore();
+    }
+  }, [onLoadMore, hasMore, isLoading]);
+  if (isLoading && items.length === 0) {
+    return /* @__PURE__ */_jsx(YStack, {
+      ...knobProps.panelPadding,
+      alignItems: "center",
+      ...stackProps,
+      children: /* @__PURE__ */_jsx(Spinner, {
+        size: "large"
+      })
+    });
+  }
+  if (items.length === 0) {
+    return /* @__PURE__ */_jsx(YStack, {
+      ...knobProps.panelPadding,
+      alignItems: "center",
+      ...stackProps,
+      children: /* @__PURE__ */_jsx(Text, {
+        color: componentColors.text.muted,
+        children: emptyMessage
+      })
+    });
+  }
+  var effectiveFocused = focusedIndex >= items.length ? -1 : focusedIndex;
+  return /* @__PURE__ */_jsx(YStack, {
+    ...knobProps.gap,
+    ...stackProps,
+    children: /* @__PURE__ */_jsx(View, {
+      ref: containerRef,
+      role: "list",
+      "aria-label": ariaLabel,
+      "aria-activedescendant": effectiveFocused >= 0 ? `${listId}-item-${effectiveFocused}` : void 0,
+      tabIndex: 0,
+      outlineWidth: 0,
+      style: {
+        height
+      },
+      children: /* @__PURE__ */_jsx(FlashList, {
+        ref: flashListRef,
+        data: items,
+        drawDistance: overscan * estimateSize,
+        onEndReached: handleEndReached,
+        onEndReachedThreshold: 0.5,
+        keyExtractor: function keyExtractor(_, index) {
+          return `${listId}-item-${index}`;
+        },
+        renderItem: function renderItem1(param2) {
+          var {
+            item,
+            index
+          } = param2;
+          var isFocused = effectiveFocused === index;
+          return /* @__PURE__ */_jsx(ListItem, {
+            id: `${listId}-item-${index}`,
+            size: knobProps.sizeToken,
+            role: "listitem",
+            "aria-selected": isFocused,
+            ...(isFocused ? {
+              "data-focused": true
+            } : {}),
+            backgroundColor: isFocused ? "$accentBackground" : "transparent",
+            hoverStyle: {
+              backgroundColor: componentColors.interactive.background
+            },
+            pressStyle: {
+              backgroundColor: componentColors.interactive.hover
+            },
+            cursor: onItemClick ? "pointer" : "default",
+            borderBottomWidth: 1,
+            borderBottomColor: "$borderColor",
+            onPress: onItemClick ? function () {
+              setFocusedIndex(index);
+              onItemClick(item);
+            } : void 0,
+            children: renderItem(item, index)
+          });
+        },
+        ListFooterComponent: isLoading && items.length > 0 ? /* @__PURE__ */_jsx(YStack, {
+          padding: "$2",
+          alignItems: "center",
+          children: /* @__PURE__ */_jsx(Spinner, {
+            size: "small"
+          })
+        }) : null
+      })
+    })
+  });
+}
+export { List };
+//# sourceMappingURL=List.native.js.map

package/dist/esm/views/List.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["jsx","_jsx","componentColors","FlashList","useResolvedKnobs","useHotkey","React","useCallback","useId","useRef","useState","ListItem","Spinner","Text","View","YStack","List","param","items","renderItem","onItemClick","onLoadMore","hasMore","isLoading","estimateSize","estimateSizeProp","overscan","emptyMessage","height","heightProp","ariaLabel","hotkeys","hotkeyOverrides","stackProps","_ref","_ref1","_ref2","_ref3","_ref4","_ref5","_ref6","knobProps","sz","sizeToken","listId","containerRef","flashListRef","focusedIndex","setFocusedIndex","scrollToIndex","index","length","_flashListRef_current","current","animated","hotkeyOpts","target","next","prev","Math","min","max","select","first","last","lastIndex","pageDown","pageUp","handleEndReached","panelPadding","alignItems","children","size","color","text","muted","effectiveFocused","gap","ref","role","tabIndex","outlineWidth","style","data","drawDistance","onEndReached","onEndReachedThreshold","keyExtractor","_","renderItem1","param2","item","isFocused","id","backgroundColor","hoverStyle","interactive","background","pressStyle","hover","cursor","borderBottomWidth","borderBottomColor","onPress","ListFooterComponent","padding"],"sources":["../../../src/views/List.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,GAAA,IAAAC,IAAA,2BAAuB;AAChC,SAASC,eAAA,QAAoC;AAC7C,SAASC,SAAA,6BAAwB;AACjC,SAASC,gBAAA,QAAiB;AAE1B,SAAgBC,SAAA,QAAa,yBAAe;AAC5C,OAAAC,KAAS,IAAAC,WAAU,EAASC,KAAM,EAAAC,MAAM,EAAAC,QAAA,QAAgC;AA4MhE,SAAAC,QAAA,EAAAC,OAAA,EAAAC,IAAA,EAAAC,IAAA,EAAAC,MAAA;AAlID,SAASC,KAAQC,KAAA;EACtB;IAAAC,KAAA;IAAAC,UAAA;IAAAC,WAAA;IAAAC,UAAA;IAAAC,OAAA;IAAAC,SAAA;IAAAC,YAAA,EAAAC,gBAAA;IAAAC,QAAA;IAAAC,YAAA;IAAAC,MAAA,EAAAC,UAAA;IAAA,cAAAC,SAAA;IAAAC,OAAA,EAAAC,eAAA;IAAA,GAAAC;EAAA,IAAAhB,KAAA;EACA,IAAAiB,IAAA,EAAAC,KAAA,EAAAC,KAAA,EAAAC,KAAA,EAAAC,KAAA,EAAAC,KAAA,EAAAC,KAAA;EACA;IAAAC;EAAA,IAAArC,gBAAA;EACA,IAAAsC,EAAA,GAAAD,SAAA,CAAAE,SAAA;EACA,IAAAnB,YAAU,GAAAC,gBAAA,aAAAA,gBAAA,cAAAA,gBAAA,GAAAiB,EAAA,iBAAAA,EAAA;EACV,IAAAd,MAAA,GAAYC,UAAA,aAAAA,UAAA,cAAAA,UAAA,GAAAa,EAAA,kBAAAA,EAAA;EACZ,IAAAE,MAAA,GAAApC,KAAc;EACd,IAAAqC,YAAW,GAAApC,MAAA;EACX,IAAAqC,YAAe,GAAArC,MAAA;EACf,KAAAsC,YAAQ,EAAAC,eAAA,IAAAtC,QAAA;EACR,IAAAuC,aAAc,GAAA1C,WAAA,WAAA2C,KAAA;IACd,IAAAA,KAAS,SAAAA,KAAA,GAAAhC,KAAA,CAAAiC,MAAA;MACN,IAAAC,qBAAA;MACY,CAAAA,qBAAA,GAAAN,YAAA,CAAAO,OAAA,cAAAD,qBAAA,uBAAAA,qBAAA,CAAAH,aAAA;QACTC,KAAE;QACFI,QAAK;MACX,EAAM;IACN;EACA,IACApC,KAAM,CAAAiC,MAAA,CACN;EACA,IAAAI,UAAO;IAGPC,MAAM,EAAAX;EAAgB;EAElBxC,SAAI,EAAA6B,IAAA,GAASF,eAAa,KAAM,QAAQA,eAAA,uBAAAA,eAAA,CAAAyB,IAAA,cAAAvB,IAAA,cAAAA,IAAA;IACtCc,eAAA,WAAaU,IAAS;MACxB,IAAAD,IAAA,GAAAC,IAAA,WAAAC,IAAA,CAAAC,GAAA,CAAAF,IAAA,MAAAxC,KAAA,CAAAiC,MAAA;MACFF,aAAA,CAAAQ,IAAA;MACC,OAAMA,IAAM;IACf;EAGA,GAAAF,UAAM;EAAalD,SACjB,CAAQ,CAAA8B,KAAA,GAAAH,eAAA,aAAAA,eAAA,uBAAAA,eAAA,CAAA0B,IAAA,cAAAvB,KAAA,cAAAA,KAAA;IACVa,eAAA,WAAAU,IAAA;MAEA,IAAAD,IAAA,GAAAC,IAAA,OAAAxC,KAAA,CAAAiC,MAAA,OAAAQ,IAAA,CAAAE,GAAA,CAAAH,IAAA;MACET,aAAA,CAAAQ,IAAiB;MACjB,OAAMA,IAAA;IACJ;EACE,GAAAF,UAAM;EACNlD,SAAA,EAAA+B,KAAA,GAAAJ,eAAkB,aAAAA,eAAA,uBAAAA,eAAA,CAAA8B,MAAA,cAAA1B,KAAA,cAAAA,KAAA;IAClB,IAAAW,YAAO,SAAAA,YAAA,GAAA7B,KAAA,CAAAiC,MAAA;MACT/B,WAAC,aAAAA,WAAA,uBAAAA,WAAA,CAAAF,KAAA,CAAA6B,YAAA;IACH;EAAA,GACAQ,UAAA;EACFlD,SAAA,EAAAgC,KAAA,GAAAL,eAAA,aAAAA,eAAA,uBAAAA,eAAA,CAAA+B,KAAA,cAAA1B,KAAA,cAAAA,KAAA;IAEA,IAAAnB,KAAA,CAAAiC,MAAA;MACEH,eAAiB;MACjBC,aAAM;IACJ;EACE,GAAAM,UAAM;EACNlD,SAAA,EAAAiC,KAAA,GAAAN,eAAkB,aAAAA,eAAA,uBAAAA,eAAA,CAAAgC,IAAA,cAAA1B,KAAA,cAAAA,KAAA;IAClB,IAAApB,KAAA,CAAAiC,MAAO;MACT,IAACc,SAAA,GAAA/C,KAAA,CAAAiC,MAAA;MACHH,eAAA,CAAAiB,SAAA;MACAhB,aAAA,CAAAgB,SAAA;IACF;EAEA,GAAAV,UAAA;EAAAlD,SACE,EAAAkC,KAAA,GAAiBP,eAAU,aAAAA,eAAA,uBAAAA,eAAA,CAAAkC,QAAA,cAAA3B,KAAA,cAAAA,KAAA;IAC3BS,eAAM,WAAAU,IAAA;MACJ,IAAID,IAAA,GAAAE,IAAA,CAAAC,GAAA,CAAgB,CAAAF,IAAK,WAAAA,IAAe,MAAM,EAAAxC,KAAA,CAAQiC,MAAA;MACpDF,aAAA,CAAAQ,IAAc;MAChB,OAAAA,IAAA;IACF;EAAA,GACAF,UAAA;EACFlD,SAAA,EAAAmC,KAAA,GAAAR,eAAA,aAAAA,eAAA,uBAAAA,eAAA,CAAAmC,MAAA,cAAA3B,KAAA,cAAAA,KAAA;IAEAQ,eAAA,WAAAU,IAAA;MACE,IAAAD,IAAA,GAAAE,IAAiB,CAAAE,GAAA,EAAAH,IAAS,WAAAA,IAAA;MAC1BT,aAAM,CAAAQ,IAAA;MACJ,OAAIA,IAAM;IACR;EACA,GAAAF,UAAA;EAAe,IACjBa,gBAAA,GAAA7D,WAAA;IACF,IAAAc,UAAA,IAAAC,OAAA,KAAAC,SAAA;MACAF,UAAA;IACF;EAEA,IACEA,UAAA,EACAC,OAAM,EACJC,SAAI,CACF;EACA,IAAAA,SAAA,IAAAL,KAAgB,CAAAiC,MAAA,KAAS;IACzB,sBAAclD,IAAS,CAAAc,MAAA;MACzB,GAAA0B,SAAA,CAAA4B,YAAA;MACFC,UAAA;MACA,GAAArC,UAAA;MACFsC,QAAA,iBAAAtE,IAAA,CAAAW,OAAA;QAEA4D,IAAA;MACE;IACA;EACE;EACE,IAAAtD,KAAA,CAAAiC,MAAM,KAAO,GAAK;IAClB,sBAAkBlD,IAAA,CAAAc,MAAA;MAClB,GAAA0B,SAAO,CAAA4B,YAAA;MACTC,UAAC;MACH,GAAArC,UAAA;MACAsC,QAAA,iBAAAtE,IAAA,CAAAY,IAAA;QACF4D,KAAA,EAAAvE,eAAA,CAAAwE,IAAA,CAAAC,KAAA;QAEAJ,QAAA,EAAA5C;MACE;IACA;EACE;EACE,IAAAiD,gBAAa,GAAA7B,YAAU,IAAO7B,KAAQ,CAAAiC,MAAA,GAAQ,EAAI,GAACJ,YAAA;EACnD,sBAAc9C,IAAI,CAAAc,MAAA;IAClB,GAAA0B,SAAO,CAAAoC,GAAA;IAAA,GACR5C,UAAA;IACHsC,QAAA,iBAAAtE,IAAA,CAAAa,IAAA;MACAgE,GAAA,EAAAjC,YAAA;MACFkC,IAAA;MAGA,YAAM,EAAAjD,SAAmB;MACvB,uBAAkB,EAAA8C,gBAAuB,WAAAhC,MAAA,SAAAgC,gBAAA;MACvCI,QAAA,GAAW;MACbC,YAAA;MACEC,KAAA;QAEAtD;MACF;MAKF2C,QAAA,iBAAAtE,IAAA,CAAAE,SAAA;QAEI2E,GAAA,EAAMhC,YAAW;QACnBqC,IACE,EAAAjE,KAAA;QAIJkE,YAAA,EAAA1D,QAAA,GAAAF,YAAA;QAGM6D,YAAA,EAAAjB,gBAAmB;QAEzBkB,qBACG;QACEC,YAAA,WAAAA,aAAAC,CAAA,EAAAtC,KAAA;UAAA,UAAAN,MAAA,SAAAM,KAAA;QACC;QACA/B,UAAK,WAAAsE,YAAAC,MAAA;UACL;YAAAC,IAAY;YAAAzC;UAAA,IAAAwC,MAAA;UACZ,IAAAE,SAAA,GAAAhB,gBACE,KAAA1B,KAAoB;UAEtB,OAAU,eAAAjD,IAAA,CAAAU,QAAA;YACVkF,EAAA,KAAAjD,MAAc,SAAAM,KAAA;YACdsB,IAAO,EAAA/B,SAAA,CAAAE,SAAA;YACLoC,IAAA;YACF,iBAAAa,SAAA;YAEA,IAAAA,SAAA;cAAC;YAAA;YACCE,eAAK,EAAAF,SAAA;YACLG,UAAM;cACND,eAAc,EAAA5F,eAAW,CAAA8F,WAAA,CAAAC;YACzB;YACAC,UAAA;cACAJ,eAAkB,EAAA5F,eAAa,CAAM8F,WAAS,CAAAG;YAC9C;YACEC,MAAM,EAAAhF,WAAY,wBAAqB;YACvCiF,iBACE;YAAAC,iBAAC;YAAAC,OAAA,EAAAnF,WAAA;cAAA4B,eACc,CAAAE,KAAA;cAAc9B,WACrB,CAAAuE,IAAA;YAAU,IAChB,MAAK;YAAApB,QACL,EAAApD,UAAA,CAAewE,IAAA,EAAAzC,KAAA;UAAA;QAC8B;QACMsD,mBACnD,EAAYjF,SAAE,IAAAL,KAAiB,CAAAiC,MAAA,sBAA4BlD,IAAA,CAAAc,MAAW;UAAA0F,OACtE;UAAiEnC,UACjE,UAAQ;UAA0BC,QAClC,iBAAmBtE,IAAA,CAAAW,OAAA;YAAA4D,IACnB;UAAkB;QAIV;MACA;IAAgB;EAElB;AAGiB;AAAA,SACzBxD,IAAA","ignoreList":[]}

package/dist/esm/views/List.stories.mjs

@@ -0,0 +1,48 @@
+import { Text } from "tamagui";
+import { List } from "./List.mjs";
+import { jsx } from "react/jsx-runtime";
+const items = [{
+  id: "1",
+  title: "Setup Project",
+  description: "Initialize the repository and install dependencies"
+}, {
+  id: "2",
+  title: "Design System",
+  description: "Create component library and theme tokens"
+}, {
+  id: "3",
+  title: "Authentication",
+  description: "Implement login and registration flows"
+}, {
+  id: "4",
+  title: "API Layer",
+  description: "Build REST and WebSocket APIs"
+}, {
+  id: "5",
+  title: "Testing",
+  description: "Write unit and integration tests"
+}];
+const meta = {
+  title: "Components/List",
+  parameters: {
+    status: {
+      type: "stable"
+    }
+  }
+};
+var List_stories_default = meta;
+const Default = {
+  name: "Main",
+  render: () => /* @__PURE__ */jsx(List, {
+    items,
+    getItemKey: item => item.id,
+    renderItem: item => /* @__PURE__ */jsx(Text, {
+      fontSize: "$3",
+      children: item.title
+    }),
+    onItemPress: item => console.log("Pressed:", item.id),
+    height: 400
+  })
+};
+export { Default, List_stories_default as default };
+//# sourceMappingURL=List.stories.mjs.map

package/dist/esm/views/List.stories.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["Text","List","jsx","items","id","title","description","meta","parameters","status","type","List_stories_default","Default","name","render","getItemKey","item","renderItem","fontSize","children","onItemPress","console","log","height"],"sources":["../../../src/views/List.stories.tsx"],"sourcesContent":[null],"mappings":"AACA,SAASA,IAAA,QAAY;AACrB,SAASC,IAAA,QAAY;AAmCO,SAAAC,GAAA;AA3B5B,MAAMC,KAAA,GAAwB,CAC5B;EACEC,EAAA,EAAI;EACJC,KAAA,EAAO;EACPC,WAAA,EAAa;AACf,GACA;EAAEF,EAAA,EAAI;EAAKC,KAAA,EAAO;EAAiBC,WAAA,EAAa;AAA4C,GAC5F;EAAEF,EAAA,EAAI;EAAKC,KAAA,EAAO;EAAkBC,WAAA,EAAa;AAAyC,GAC1F;EAAEF,EAAA,EAAI;EAAKC,KAAA,EAAO;EAAaC,WAAA,EAAa;AAAgC,GAC5E;EAAEF,EAAA,EAAI;EAAKC,KAAA,EAAO;EAAWC,WAAA,EAAa;AAAmC,EAC/E;AAEA,MAAMC,IAAA,GAAa;EACjBF,KAAA,EAAO;EACPG,UAAA,EAAY;IACVC,MAAA,EAAQ;MAAEC,IAAA,EAAM;IAAS;EAC3B;AACF;AAEA,IAAOC,oBAAA,GAAQJ,IAAA;AAER,MAAMK,OAAA,GAAU;EACrBC,IAAA,EAAM;EACNC,MAAA,EAAQA,CAAA,KACN,eAAAZ,GAAA,CAACD,IAAA;IACCE,KAAA;IACAY,UAAA,EAAaC,IAAA,IAASA,IAAA,CAAKZ,EAAA;IAC3Ba,UAAA,EAAaD,IAAA,IAAS,eAAAd,GAAA,CAACF,IAAA;MAAKkB,QAAA,EAAS;MAAMC,QAAA,EAAAH,IAAA,CAAKX;IAAA,CAAM;IACtDe,WAAA,EAAcJ,IAAA,IAASK,OAAA,CAAQC,GAAA,CAAI,YAAYN,IAAA,CAAKZ,EAAE;IACtDmB,MAAA,EAAQ;EAAA,CACV;AAEJ","ignoreList":[]}

package/dist/esm/views/List.stories.native.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text } from "tamagui";
+import { List } from "./List.native.js";
+var items = [{
+  id: "1",
+  title: "Setup Project",
+  description: "Initialize the repository and install dependencies"
+}, {
+  id: "2",
+  title: "Design System",
+  description: "Create component library and theme tokens"
+}, {
+  id: "3",
+  title: "Authentication",
+  description: "Implement login and registration flows"
+}, {
+  id: "4",
+  title: "API Layer",
+  description: "Build REST and WebSocket APIs"
+}, {
+  id: "5",
+  title: "Testing",
+  description: "Write unit and integration tests"
+}];
+var meta = {
+  title: "Components/List",
+  parameters: {
+    status: {
+      type: "stable"
+    }
+  }
+};
+var List_stories_default = meta;
+var Default = {
+  name: "Main",
+  render: function render() {
+    return /* @__PURE__ */_jsx(List, {
+      items,
+      getItemKey: function getItemKey(item) {
+        return item.id;
+      },
+      renderItem: function renderItem(item) {
+        return /* @__PURE__ */_jsx(Text, {
+          fontSize: "$3",
+          children: item.title
+        });
+      },
+      onItemPress: function onItemPress(item) {
+        return console.log("Pressed:", item.id);
+      },
+      height: 400
+    });
+  }
+};
+export { Default, List_stories_default as default };
+//# sourceMappingURL=List.stories.native.js.map

package/dist/esm/views/List.stories.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["jsx","_jsx","Text","List","items","id","title","description","meta","parameters","status"],"sources":["../../../src/views/List.stories.tsx"],"sourcesContent":[null],"mappings":"AACA,SAASA,GAAA,IAAAC,IAAA,QAAY;AACrB,SAASC,IAAA,QAAY;AAmCO,SAAAC,IAAA;AA3B5B,IAAAC,KAAM,IACJ;EACEC,EAAA,EAAI;EACJC,KAAA,EAAO;EACPC,WAAA,EAAa;AACf,GACA;EACEF,EAAA,EAAI;EACJC,KAAI,iBAAY;EAChBC,WAAS;AACb,GAEA;EACEF,EAAA,KAAO;EACPC,KAAA,kBAAY;EACVC,WAAU;AACZ,GACF;EAEOF,EAAA;EAEAC,KAAM,aAAU;EACrBC,WAAM;AACN,GACE;EAACF,EAAA;EAAAC,KACC;EAAAC,WACA;AAA2B,EAC2B;AACA,IAAAC,IACtD;EAAQF,KAAA;EACVG,UAAA;IAEJC,MAAA","ignoreList":[]}