@multiplatform.one/components 5.0.27 → 6.0.0

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

@@ -0,0 +1 @@
+{"version":3,"names":["jsx","_jsx","Dashboard","widgets","id","type","kpiConfig","label","value","trend","trendValue","colSpan","chartConfig","title","data"],"sources":["../../../src/views/Dashboard.stories.tsx"],"sourcesContent":[null],"mappings":"AACA,SAASA,GAAA,IAAAC,IAAA,QAAuC;AA8ChC,SAAAC,SAAA;AA5ChB,IAAAC,OAAM,IACJ;EACEC,EAAA,EAAI;EACJC,IAAA,EAAM;EACNC,SAAA,EAAW;IACbC,KAAA;IACAC,KAAA;IACEC,KAAI;IACJC,UAAM;EACN;AACF,GACA;EACEN,EAAA,EAAI;EACJC,IAAA,EAAM;EACNC,SAAA,EAAW;IACbC,KAAA;IACAC,KAAA;IACEC,KAAI;IACJC,UAAM;EACN;AAAS,GACI;EACJN,EACP,SAAM;EAAAC,IACN,OAAM;EAAAC,SACF;IAA0BC,KAC1B,mBAAc;IAAYC,KAC1B,QAAO;IAAmBC,KAC1B,QAAO;IACXC,UAAA;EACF;AACF,GACF;EAEAN,EAAM,WAAa;EACjBC,IAAA,EAAO;EACPM,OAAA,GAAY;EACVC,WAAU;IACZC,KAAA;IACFR,IAAA;IAEOS,IAAA,GAEM;MACLP,KAAA;MACEC,KAAA,EAAM;IAChB,G","ignoreList":[]}

package/dist/esm/views/ImageGrid.mjs

@@ -0,0 +1,160 @@
+import { componentColors } from "../componentColors.mjs";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { useHotkey } from "@tanstack/react-hotkeys";
+import { useCallback, useId, useRef, useState } from "react";
+import { Spinner, Text, View, XStack, YStack } from "tamagui";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ImageGrid({
+  items,
+  renderItem,
+  onItemClick,
+  onLoadMore,
+  hasMore = false,
+  isLoading = false,
+  columns = 4,
+  estimateSize: _estimateSize,
+  overscan: _overscan,
+  height: heightProp,
+  emptyMessage = "No items found",
+  hotkeys: hotkeyOverrides,
+  ...stackProps
+}) {
+  const {
+    knobProps
+  } = useResolvedKnobs();
+  const sz = knobProps.sizeToken;
+  const height = heightProp ?? (sz === "$3" ? 480 : sz === "$5" ? 720 : 600);
+  const gridId = useId();
+  const containerRef = useRef(null);
+  const [focusedIndex, setFocusedIndex] = useState(-1);
+  const scrollToIndex = useCallback(index => {
+    if (index >= 0 && index < items.length) {
+      document.getElementById(`${gridId}-item-${index}`)?.scrollIntoView({
+        block: "nearest"
+      });
+    }
+  }, [gridId, items.length]);
+  const hotkeyOpts = {
+    target: containerRef
+  };
+  useHotkey(hotkeyOverrides?.right ?? "ArrowRight", () => {
+    setFocusedIndex(prev => {
+      if (prev < 0) return 0;
+      const col = prev % columns;
+      if (col < columns - 1 && prev + 1 < items.length) {
+        const next = prev + 1;
+        scrollToIndex(next);
+        return next;
+      }
+      return prev;
+    });
+  }, hotkeyOpts);
+  useHotkey(hotkeyOverrides?.left ?? "ArrowLeft", () => {
+    setFocusedIndex(prev => {
+      if (prev < 0) return 0;
+      const col = prev % columns;
+      if (col > 0) {
+        const next = prev - 1;
+        scrollToIndex(next);
+        return next;
+      }
+      return prev;
+    });
+  }, hotkeyOpts);
+  useHotkey(hotkeyOverrides?.down ?? "ArrowDown", () => {
+    setFocusedIndex(prev => {
+      if (prev < 0) return 0;
+      const next = prev + columns;
+      if (next < items.length) {
+        scrollToIndex(next);
+        return next;
+      }
+      return prev;
+    });
+  }, hotkeyOpts);
+  useHotkey(hotkeyOverrides?.up ?? "ArrowUp", () => {
+    setFocusedIndex(prev => {
+      if (prev < 0) return 0;
+      const next = prev - columns;
+      if (next >= 0) {
+        scrollToIndex(next);
+        return next;
+      }
+      return prev;
+    });
+  }, hotkeyOpts);
+  useHotkey(hotkeyOverrides?.select ?? "Enter", () => {
+    if (focusedIndex >= 0 && focusedIndex < items.length) {
+      onItemClick?.(items[focusedIndex]);
+    }
+  }, hotkeyOpts);
+  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, {
+    ...stackProps,
+    children: /* @__PURE__ */jsxs(View, {
+      ref: containerRef,
+      role: "grid",
+      "aria-label": "Image grid",
+      "aria-activedescendant": effectiveFocused >= 0 ? `${gridId}-item-${effectiveFocused}` : void 0,
+      tabIndex: 0,
+      outlineWidth: 0,
+      style: {
+        height,
+        overflowY: "auto"
+      },
+      children: [/* @__PURE__ */jsx(XStack, {
+        flexWrap: "wrap",
+        onScroll: onLoadMore && hasMore && !isLoading ? () => {
+          const el = containerRef.current;
+          if (el && el.scrollTop + el.clientHeight >= el.scrollHeight - 50) onLoadMore();
+        } : void 0,
+        children: items.map((item, index) => {
+          const isFocused = effectiveFocused === index;
+          return /* @__PURE__ */jsx(View, {
+            id: `${gridId}-item-${index}`,
+            "data-focused": isFocused || void 0,
+            width: `${100 / columns}%`,
+            backgroundColor: isFocused ? "$accentBackground" : void 0,
+            borderRadius: isFocused ? knobProps.borderRadius.borderRadius : void 0,
+            ...knobProps.gap,
+            cursor: onItemClick ? "pointer" : void 0,
+            onPress: onItemClick ? () => {
+              setFocusedIndex(index);
+              onItemClick(item);
+            } : void 0,
+            children: renderItem(item)
+          }, `${gridId}-item-${index}`);
+        })
+      }), isLoading && items.length > 0 && /* @__PURE__ */jsx(YStack, {
+        padding: "$2",
+        alignItems: "center",
+        children: /* @__PURE__ */jsx(Spinner, {
+          size: "small"
+        })
+      })]
+    })
+  });
+}
+export { ImageGrid };
+//# sourceMappingURL=ImageGrid.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["componentColors","useResolvedKnobs","useHotkey","useCallback","useId","useRef","useState","Spinner","Text","View","XStack","YStack","jsx","jsxs","ImageGrid","items","renderItem","onItemClick","onLoadMore","hasMore","isLoading","columns","estimateSize","_estimateSize","overscan","_overscan","height","heightProp","emptyMessage","hotkeys","hotkeyOverrides","stackProps","knobProps","sz","sizeToken","gridId","containerRef","focusedIndex","setFocusedIndex","scrollToIndex","index","length","document","getElementById","scrollIntoView","block","hotkeyOpts","target","right","prev","col","next","left","down","up","select","panelPadding","alignItems","children","size","color","text","muted","effectiveFocused","ref","role","tabIndex","outlineWidth","style","overflowY","flexWrap","onScroll","el","current","scrollTop","clientHeight","scrollHeight","map","item","isFocused","id","width","backgroundColor","borderRadius","gap","cursor","onPress","padding"],"sources":["../../../src/views/ImageGrid.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,163 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { componentColors } from "../componentColors.native.js";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { useHotkey } from "@tanstack/react-hotkeys";
+import React, { useCallback, useId, useRef, useState } from "react";
+import { Spinner, Text, View, XStack, YStack } from "tamagui";
+function ImageGrid(param) {
+  var {
+    items,
+    renderItem,
+    onItemClick,
+    onLoadMore,
+    hasMore = false,
+    isLoading = false,
+    columns = 4,
+    estimateSize: _estimateSize,
+    overscan: _overscan,
+    height: heightProp,
+    emptyMessage = "No items found",
+    hotkeys: hotkeyOverrides,
+    ...stackProps
+  } = param;
+  var _ref, _ref1, _ref2, _ref3, _ref4;
+  var {
+    knobProps
+  } = useResolvedKnobs();
+  var sz = knobProps.sizeToken;
+  var height = heightProp !== null && heightProp !== void 0 ? heightProp : sz === "$3" ? 480 : sz === "$5" ? 720 : 600;
+  var gridId = useId();
+  var containerRef = useRef(null);
+  var [focusedIndex, setFocusedIndex] = useState(-1);
+  var scrollToIndex = useCallback(function (index) {
+    if (index >= 0 && index < items.length) {
+      var _document_getElementById;
+      (_document_getElementById = document.getElementById(`${gridId}-item-${index}`)) === null || _document_getElementById === void 0 ? void 0 : _document_getElementById.scrollIntoView({
+        block: "nearest"
+      });
+    }
+  }, [gridId, items.length]);
+  var hotkeyOpts = {
+    target: containerRef
+  };
+  useHotkey((_ref = hotkeyOverrides === null || hotkeyOverrides === void 0 ? void 0 : hotkeyOverrides.right) !== null && _ref !== void 0 ? _ref : "ArrowRight", function () {
+    setFocusedIndex(function (prev) {
+      if (prev < 0) return 0;
+      var col = prev % columns;
+      if (col < columns - 1 && prev + 1 < items.length) {
+        var next = prev + 1;
+        scrollToIndex(next);
+        return next;
+      }
+      return prev;
+    });
+  }, hotkeyOpts);
+  useHotkey((_ref1 = hotkeyOverrides === null || hotkeyOverrides === void 0 ? void 0 : hotkeyOverrides.left) !== null && _ref1 !== void 0 ? _ref1 : "ArrowLeft", function () {
+    setFocusedIndex(function (prev) {
+      if (prev < 0) return 0;
+      var col = prev % columns;
+      if (col > 0) {
+        var next = prev - 1;
+        scrollToIndex(next);
+        return next;
+      }
+      return prev;
+    });
+  }, hotkeyOpts);
+  useHotkey((_ref2 = hotkeyOverrides === null || hotkeyOverrides === void 0 ? void 0 : hotkeyOverrides.down) !== null && _ref2 !== void 0 ? _ref2 : "ArrowDown", function () {
+    setFocusedIndex(function (prev) {
+      if (prev < 0) return 0;
+      var next = prev + columns;
+      if (next < items.length) {
+        scrollToIndex(next);
+        return next;
+      }
+      return prev;
+    });
+  }, hotkeyOpts);
+  useHotkey((_ref3 = hotkeyOverrides === null || hotkeyOverrides === void 0 ? void 0 : hotkeyOverrides.up) !== null && _ref3 !== void 0 ? _ref3 : "ArrowUp", function () {
+    setFocusedIndex(function (prev) {
+      if (prev < 0) return 0;
+      var next = prev - columns;
+      if (next >= 0) {
+        scrollToIndex(next);
+        return next;
+      }
+      return prev;
+    });
+  }, hotkeyOpts);
+  useHotkey((_ref4 = hotkeyOverrides === null || hotkeyOverrides === void 0 ? void 0 : hotkeyOverrides.select) !== null && _ref4 !== void 0 ? _ref4 : "Enter", function () {
+    if (focusedIndex >= 0 && focusedIndex < items.length) {
+      onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(items[focusedIndex]);
+    }
+  }, hotkeyOpts);
+  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, {
+    ...stackProps,
+    children: /* @__PURE__ */_jsxs(View, {
+      ref: containerRef,
+      role: "grid",
+      "aria-label": "Image grid",
+      "aria-activedescendant": effectiveFocused >= 0 ? `${gridId}-item-${effectiveFocused}` : void 0,
+      tabIndex: 0,
+      outlineWidth: 0,
+      style: {
+        height,
+        overflowY: "auto"
+      },
+      children: [/* @__PURE__ */_jsx(XStack, {
+        flexWrap: "wrap",
+        onScroll: onLoadMore && hasMore && !isLoading ? function () {
+          var el = containerRef.current;
+          if (el && el.scrollTop + el.clientHeight >= el.scrollHeight - 50) onLoadMore();
+        } : void 0,
+        children: items.map(function (item, index) {
+          var isFocused = effectiveFocused === index;
+          return /* @__PURE__ */_jsx(View, {
+            id: `${gridId}-item-${index}`,
+            "data-focused": isFocused || void 0,
+            width: `${100 / columns}%`,
+            backgroundColor: isFocused ? "$accentBackground" : void 0,
+            borderRadius: isFocused ? knobProps.borderRadius.borderRadius : void 0,
+            ...knobProps.gap,
+            cursor: onItemClick ? "pointer" : void 0,
+            onPress: onItemClick ? function () {
+              setFocusedIndex(index);
+              onItemClick(item);
+            } : void 0,
+            children: renderItem(item)
+          }, `${gridId}-item-${index}`);
+        })
+      }), isLoading && items.length > 0 && /* @__PURE__ */_jsx(YStack, {
+        padding: "$2",
+        alignItems: "center",
+        children: /* @__PURE__ */_jsx(Spinner, {
+          size: "small"
+        })
+      })]
+    })
+  });
+}
+export { ImageGrid };
+//# sourceMappingURL=ImageGrid.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","componentColors","useResolvedKnobs","useHotkey","React","useCallback","useId","useRef","useState","Spinner","Text","View","XStack","YStack","ImageGrid","param","items","renderItem","onItemClick","onLoadMore","hasMore","isLoading","columns","estimateSize","_estimateSize","overscan","_overscan","height","heightProp","emptyMessage","hotkeys","hotkeyOverrides","stackProps","_ref","_ref1","_ref2","_ref3","_ref4","knobProps","sz","sizeToken","gridId","containerRef","focusedIndex","setFocusedIndex","scrollToIndex","index","length","_document_getElementById","document","getElementById","scrollIntoView","block","hotkeyOpts","target","right","prev","col","next","left","down","up","select","panelPadding","alignItems","children","size","color","text","muted","effectiveFocused","ref","role","tabIndex","outlineWidth","style","overflowY","flexWrap","onScroll","el","current","scrollTop","clientHeight","scrollHeight","map","item","isFocused","id","width","backgroundColor","borderRadius","gap","cursor","onPress","padding"],"sources":["../../../src/views/ImageGrid.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,42 @@
+import { Text, View } from "tamagui";
+import { ImageGrid } from "./ImageGrid.mjs";
+import { jsx } from "react/jsx-runtime";
+const items = Array.from({
+  length: 12
+}, (_, i) => ({
+  id: `img-${i + 1}`,
+  src: `https://picsum.photos/seed/${i + 1}/200/200`,
+  alt: `Sample image ${i + 1}`
+}));
+const meta = {
+  title: "Components/ImageGrid",
+  parameters: {
+    status: {
+      type: "stable"
+    }
+  }
+};
+var ImageGrid_stories_default = meta;
+const Default = {
+  name: "Main",
+  render: () => /* @__PURE__ */jsx(ImageGrid, {
+    items,
+    columns: 3,
+    getItemKey: item => item.id,
+    renderItem: item => /* @__PURE__ */jsx(View, {
+      width: "100%",
+      aspectRatio: 1,
+      backgroundColor: "$color3",
+      borderRadius: "$3",
+      alignItems: "center",
+      justifyContent: "center",
+      children: /* @__PURE__ */jsx(Text, {
+        fontSize: "$2",
+        children: item.alt
+      })
+    }),
+    height: 400
+  })
+};
+export { Default, ImageGrid_stories_default as default };
+//# sourceMappingURL=ImageGrid.stories.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["Text","View","ImageGrid","jsx","items","Array","from","length","_","i","id","src","alt","meta","title","parameters","status","type","ImageGrid_stories_default","Default","name","render","columns","getItemKey","item","renderItem","width","aspectRatio","backgroundColor","borderRadius","alignItems","justifyContent","children","fontSize","height"],"sources":["../../../src/views/ImageGrid.stories.tsx"],"sourcesContent":[null],"mappings":"AACA,SAASA,IAAA,EAAMC,IAAA,QAAY;AAC3B,SAASC,SAAA,QAAiB;AAuChB,SAAAC,GAAA;AA/BV,MAAMC,KAAA,GAAqBC,KAAA,CAAMC,IAAA,CAAK;EAAEC,MAAA,EAAQ;AAAG,GAAG,CAACC,CAAA,EAAGC,CAAA,MAAO;EAC/DC,EAAA,EAAI,OAAOD,CAAA,GAAI,CAAC;EAChBE,GAAA,EAAK,8BAA8BF,CAAA,GAAI,CAAC;EACxCG,GAAA,EAAK,gBAAgBH,CAAA,GAAI,CAAC;AAC5B,EAAE;AAEF,MAAMI,IAAA,GAAa;EACjBC,KAAA,EAAO;EACPC,UAAA,EAAY;IACVC,MAAA,EAAQ;MAAEC,IAAA,EAAM;IAAS;EAC3B;AACF;AAEA,IAAOC,yBAAA,GAAQL,IAAA;AAER,MAAMM,OAAA,GAAU;EACrBC,IAAA,EAAM;EACNC,MAAA,EAAQA,CAAA,KACN,eAAAlB,GAAA,CAACD,SAAA;IACCE,KAAA;IACAkB,OAAA,EAAS;IACTC,UAAA,EAAaC,IAAA,IAASA,IAAA,CAAKd,EAAA;IAC3Be,UAAA,EAAaD,IAAA,IACX,eAAArB,GAAA,CAACF,IAAA;MACCyB,KAAA,EAAM;MACNC,WAAA,EAAa;MACbC,eAAA,EAAgB;MAChBC,YAAA,EAAa;MACbC,UAAA,EAAW;MACXC,cAAA,EAAe;MAEfC,QAAA,iBAAA7B,GAAA,CAACH,IAAA;QAAKiC,QAAA,EAAS;QAAMD,QAAA,EAAAR,IAAA,CAAKZ;MAAA,CAAI;IAAA,CAChC;IAEFsB,MAAA,EAAQ;EAAA,CACV;AAEJ","ignoreList":[]}

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

@@ -0,0 +1,50 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text, View } from "tamagui";
+import { ImageGrid } from "./ImageGrid.native.js";
+var items = Array.from({
+  length: 12
+}, function (_, i) {
+  return {
+    id: `img-${i + 1}`,
+    src: `https://picsum.photos/seed/${i + 1}/200/200`,
+    alt: `Sample image ${i + 1}`
+  };
+});
+var meta = {
+  title: "Components/ImageGrid",
+  parameters: {
+    status: {
+      type: "stable"
+    }
+  }
+};
+var ImageGrid_stories_default = meta;
+var Default = {
+  name: "Main",
+  render: function render() {
+    return /* @__PURE__ */_jsx(ImageGrid, {
+      items,
+      columns: 3,
+      getItemKey: function getItemKey(item) {
+        return item.id;
+      },
+      renderItem: function renderItem(item) {
+        return /* @__PURE__ */_jsx(View, {
+          width: "100%",
+          aspectRatio: 1,
+          backgroundColor: "$color3",
+          borderRadius: "$3",
+          alignItems: "center",
+          justifyContent: "center",
+          children: /* @__PURE__ */_jsx(Text, {
+            fontSize: "$2",
+            children: item.alt
+          })
+        });
+      },
+      height: 400
+    });
+  }
+};
+export { Default, ImageGrid_stories_default as default };
+//# sourceMappingURL=ImageGrid.stories.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["jsx","_jsx","Text","View","ImageGrid","items","Array","from","length","_","i","id","src","alt","meta","title","parameters","status","type","ImageGrid_stories_default","Default","name","render","columns","getItemKey","item","renderItem","width","aspectRatio","backgroundColor","borderRadius","alignItems","justifyContent","children"],"sources":["../../../src/views/ImageGrid.stories.tsx"],"sourcesContent":[null],"mappings":"AACA,SAASA,GAAA,IAAMC,IAAA,QAAY;AAC3B,SAASC,IAAA,EAAAC,IAAA,QAAiB;AAuChB,SAAAC,SAAA;AA/BV,IAAAC,KAAM,GAAAC,KAAqB,CAAAC,IAAM;EAC/BC,MAAI;AAAY,GAChB,UAAKC,CAAA,EAAAC,CAAA;EACL,OAAK;IACLC,EAAA,SAAAD,CAAA;IAEFE,GAAM,gCAAaF,CAAA;IACjBG,GAAA,EAAO,gBAAAH,CAAA;EACP;AAAY;AACe,IAC3BI,IAAA;EACFC,KAAA;EAEAC,UAAO;IAEAC,MAAM;MACXC,IAAM;IACN;EACE;AAAC;AAAA,IAAAC,yBACC,GAAAL,IAAA;AAAA,IAAAM,OACA;EAASC,IACT;EAA2BC,MAC3B,WAAaA,OAAA,EACX;IAAA,OAAC,eAAArB,IAAA,CAAAG,SAAA;MAAAC,KAAA;MAAAkB,OACC;MAAMC,UACN,WAAaA,WAAAC,IAAA;QAAA,OACbA,IAAA,CAAAd,EAAA;MAAgB;MACHe,UACb,WAAWA,WAAAD,IAAA;QAAA,OACX,eAAexB,IAAA,CAAAE,IAAA;UAEfwB,KAAA;UAA8BC,WAAA;UAChCC,eAAA;UAEFC,YAAQ;UAAAC,UAAA;UACVC,cAAA;UAEJC,QAAA,iBAAAhC,IAAA,CAAAC,IAAA","ignoreList":[]}