@multiplatform.one/components 5.0.27 → 6.0.0

package/dist/cjs/Carousel/index.native.js

@@ -0,0 +1,227 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var Carousel_exports = {};
+__export(Carousel_exports, {
+  Carousel: () => Carousel
+});
+module.exports = __toCommonJS(Carousel_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_react2 = require("@phosphor-icons/react");
+var import_theme = require("@multiplatform.one/theme");
+var import_tamagui = require("tamagui");
+var import_DotIndicator = require("../DotIndicator/index.native.js");
+var CarouselContainer = (0, import_tamagui.styled)(import_tamagui.View, {
+  name: "Carousel",
+  position: "relative",
+  width: "100%",
+  overflow: "hidden"
+});
+var CarouselSlide = (0, import_tamagui.styled)(import_tamagui.View, {
+  name: "CarouselSlide",
+  flexShrink: 0
+});
+var ArrowButton = (0, import_tamagui.styled)(import_tamagui.View, {
+  name: "CarouselArrow",
+  position: "absolute",
+  top: "50%",
+  transform: [{
+    translateY: "-50%"
+  }],
+  zIndex: 10,
+  width: 40,
+  height: 40,
+  borderRadius: 1e3,
+  backgroundColor: "$background",
+  alignItems: "center",
+  justifyContent: "center",
+  cursor: "pointer",
+  opacity: 0.9,
+  shadowColor: "$shadowColor",
+  shadowRadius: 8,
+  shadowOpacity: 0.15,
+  hoverStyle: {
+    opacity: 1,
+    scale: 1.05
+  },
+  pressStyle: {
+    scale: 0.95
+  },
+  variants: {
+    side: {
+      left: {
+        left: 8
+      },
+      right: {
+        right: 8
+      }
+    },
+    disabled: {
+      true: {
+        opacity: 0.3,
+        cursor: "not-allowed"
+      }
+    }
+  }
+});
+var DotsWrapper = (0, import_tamagui.styled)(import_tamagui.View, {
+  name: "CarouselDotsWrapper",
+  paddingVertical: "$3",
+  alignItems: "center"
+});
+function Carousel(param) {
+  var {
+    children,
+    showArrows = true,
+    showDots = true,
+    autoPlay = 0,
+    loop = false,
+    gap = "$3",
+    onSlideChange,
+    initialSlide = 0
+  } = param;
+  var {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  var [activeIndex, setActiveIndex] = (0, import_react.useState)(initialSlide);
+  var trackRef = (0, import_react.useRef)(null);
+  var slideCount = import_react.Children.count(children);
+  var slideWidthRef = (0, import_react.useRef)(0);
+  var autoPlayRef = (0, import_react.useRef)(null);
+  var scrollToSlide = (0, import_react.useCallback)(function (index) {
+    if (!trackRef.current) return;
+    if (index < 0 || index >= slideCount) return;
+    var offset = index * slideWidthRef.current;
+    trackRef.current.scrollTo({
+      x: offset,
+      animated: true
+    });
+  }, [slideCount]);
+  var goToSlide = (0, import_react.useCallback)(function (index) {
+    var targetIndex = index;
+    if (loop) {
+      if (index < 0) targetIndex = slideCount - 1;
+      if (index >= slideCount) targetIndex = 0;
+    } else {
+      targetIndex = Math.max(0, Math.min(index, slideCount - 1));
+    }
+    setActiveIndex(targetIndex);
+    scrollToSlide(targetIndex);
+    onSlideChange === null || onSlideChange === void 0 ? void 0 : onSlideChange(targetIndex);
+  }, [slideCount, loop, scrollToSlide, onSlideChange]);
+  var goNext = (0, import_react.useCallback)(function () {
+    return goToSlide(activeIndex + 1);
+  }, [activeIndex, goToSlide]);
+  var goPrev = (0, import_react.useCallback)(function () {
+    return goToSlide(activeIndex - 1);
+  }, [activeIndex, goToSlide]);
+  var handleScroll = (0, import_react.useCallback)(function (event) {
+    var scrollX = event.nativeEvent.contentOffset.x;
+    var width = slideWidthRef.current;
+    if (!width) return;
+    var newIndex = Math.round(scrollX / width);
+    if (newIndex !== activeIndex && newIndex >= 0 && newIndex < slideCount) {
+      setActiveIndex(newIndex);
+      onSlideChange === null || onSlideChange === void 0 ? void 0 : onSlideChange(newIndex);
+    }
+  }, [activeIndex, slideCount, onSlideChange]);
+  (0, import_react.useEffect)(function () {
+    if (autoPlay > 0) {
+      autoPlayRef.current = setInterval(function () {
+        goNext();
+      }, autoPlay);
+      return function () {
+        if (autoPlayRef.current) {
+          clearInterval(autoPlayRef.current);
+        }
+      };
+    }
+  }, [autoPlay, goNext]);
+  (0, import_react.useEffect)(function () {
+    if (initialSlide > 0) {
+      scrollToSlide(initialSlide);
+    }
+  }, [initialSlide, scrollToSlide]);
+  var canGoPrev = loop || activeIndex > 0;
+  var canGoNext = loop || activeIndex < slideCount - 1;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(CarouselContainer, {
+      ...knobProps.borderRadius,
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ScrollView, {
+        ref: trackRef,
+        horizontal: true,
+        showsHorizontalScrollIndicator: false,
+        style: {
+          scrollSnapType: "x mandatory"
+        },
+        onScroll: handleScroll,
+        scrollEventThrottle: 16,
+        onLayout: function onLayout(e) {
+          slideWidthRef.current = e.nativeEvent.layout.width;
+        },
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+          gap,
+          children: import_react.Children.map(children, function (child, index) {
+            return /* @__PURE__ */(0, import_jsx_runtime.jsx)(CarouselSlide, {
+              width: "100%",
+              style: {
+                scrollSnapAlign: "start"
+              },
+              children: child
+            }, index);
+          })
+        })
+      }), showArrows && slideCount > 1 && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(ArrowButton, {
+          side: "left",
+          disabled: !canGoPrev,
+          onPress: canGoPrev ? goPrev : void 0,
+          accessibilityRole: "button",
+          accessibilityLabel: "Previous slide",
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.CaretLeftIcon, {
+            size: 20
+          })
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(ArrowButton, {
+          side: "right",
+          disabled: !canGoNext,
+          onPress: canGoNext ? goNext : void 0,
+          accessibilityRole: "button",
+          accessibilityLabel: "Next slide",
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.CaretRightIcon, {
+            size: 20
+          })
+        })]
+      })]
+    }), showDots && slideCount > 1 && /* @__PURE__ */(0, import_jsx_runtime.jsx)(DotsWrapper, {
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_DotIndicator.DotIndicator, {
+        total: slideCount,
+        activeIndex,
+        onChange: goToSlide
+      })
+    })]
+  });
+}
+Carousel.Slide = CarouselSlide;
+//# sourceMappingURL=index.native.js.map

package/dist/cjs/Carousel/index.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","Carousel_exports","__export","Carousel","module","exports","import_jsx_runtime","require","import_react","import_react2","import_theme","import_tamagui","import_DotIndicator","CarouselContainer","styled","View","name","position","width","overflow","CarouselSlide","flexShrink","ArrowButton","top","transform","translateY","zIndex","height","borderRadius","backgroundColor","alignItems","justifyContent","cursor","opacity","shadowColor","shadowRadius","shadowOpacity","hoverStyle","scale","pressStyle","variants","side","left","right","disabled","true","DotsWrapper","paddingVertical","param","children","showArrows","showDots","autoPlay","loop","gap","onSlideChange","initialSlide","knobProps","useResolvedKnobs","activeIndex","setActiveIndex","useState","trackRef","useRef","slideCount","Children","count","slideWidthRef","autoPlayRef","scrollToSlide","useCallback","index","current","offset","scrollTo","x","animated","goToSlide","targetIndex","Math","max","min","goNext","goPrev","handleScroll","event","scrollX","nativeEvent","contentOffset","newIndex","round","useEffect","setInterval","clearInterval","canGoPrev","canGoNext","jsxs","jsx","ScrollView","ref","horizontal","showsHorizontalScrollIndicator","style","scrollSnapType","onScroll","scrollEventThrottle","onLayout","e","layout","XStack","map","child","scrollSnapAlign"],"sources":["../../../src/Carousel/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/cjs/Chip/Chip.stories.cjs

@@ -0,0 +1,257 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var Chip_stories_exports = {};
+__export(Chip_stories_exports, {
+  AllStates: () => AllStates,
+  Colors: () => Colors,
+  Default: () => Default,
+  Disabled: () => Disabled,
+  Dismissible: () => Dismissible,
+  Sizes: () => Sizes,
+  Variants: () => Variants,
+  default: () => Chip_stories_default
+});
+module.exports = __toCommonJS(Chip_stories_exports);
+var import_storybook = require("@multiplatform.one/storybook");
+var import_tamagui = require("tamagui");
+var import_index = require("./index.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+const meta = {
+  title: "Components/Chip",
+  component: import_index.Chip,
+  parameters: {
+    status: {
+      type: "stable"
+    },
+    docs: {
+      description: {
+        component: "A pill-shaped tag component for displaying labels, categories, or selected items. Supports multiple variants, colors, and dismissible functionality."
+      }
+    }
+  }
+};
+var Chip_stories_default = meta;
+const Default = {
+  name: "Main",
+  render: () => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Chip, {
+    children: "Default Chip"
+  })
+};
+const Variants = {
+  render: () => {
+    const variants = ["solid", "subtle", "outline"];
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+      gap: "$3",
+      children: variants.map(variant => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+        gap: "$2",
+        alignItems: "center",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+          width: 60,
+          fontSize: "$2",
+          color: "$color10",
+          children: variant
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Chip, {
+          variant,
+          children: "Chip"
+        })]
+      }, variant))
+    });
+  }
+};
+const Colors = {
+  render: () => {
+    const colors = ["gray", "red", "green", "blue", "yellow", "orange", "purple"];
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+      gap: "$4",
+      children: ["subtle", "outline"].map(variant => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+        gap: "$2",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+          fontWeight: "600",
+          fontSize: "$2",
+          children: variant
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+          gap: "$2",
+          flexWrap: "wrap",
+          children: colors.map(color => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Chip, {
+            variant,
+            color,
+            children: color
+          }, color))
+        })]
+      }, variant))
+    });
+  }
+};
+const Sizes = {
+  render: () => {
+    const sizes = ["$2", "$3", "$4", "$5"];
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+      gap: "$2",
+      alignItems: "center",
+      children: sizes.map(size => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_index.Chip, {
+        size,
+        children: ["Size ", size]
+      }, size))
+    });
+  }
+};
+const Dismissible = {
+  render: () => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+    gap: "$2",
+    flexWrap: "wrap",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Chip, {
+      onDismiss: () => (0, import_storybook.action)("onDismiss")("React"),
+      children: "React"
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Chip, {
+      onDismiss: () => (0, import_storybook.action)("onDismiss")("TypeScript"),
+      color: "blue",
+      children: "TypeScript"
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Chip, {
+      onDismiss: () => (0, import_storybook.action)("onDismiss")("Tamagui"),
+      color: "purple",
+      children: "Tamagui"
+    })]
+  })
+};
+const Disabled = {
+  render: () => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+    gap: "$2",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Chip, {
+      disabled: true,
+      children: "Disabled"
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Chip, {
+      disabled: true,
+      onDismiss: () => {},
+      children: "Disabled Dismissible"
+    })]
+  })
+};
+const AllStates = {
+  render: () => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+    gap: "$6",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+      gap: "$2",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+        fontWeight: "600",
+        children: "Variants"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+        gap: "$2",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Chip, {
+          variant: "solid",
+          children: "Solid"
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Chip, {
+          variant: "subtle",
+          children: "Subtle"
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Chip, {
+          variant: "outline",
+          children: "Outline"
+        })]
+      })]
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+      gap: "$2",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+        fontWeight: "600",
+        children: "Colors (subtle)"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+        gap: "$2",
+        flexWrap: "wrap",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Chip, {
+          color: "gray",
+          children: "Gray"
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Chip, {
+          color: "red",
+          children: "Red"
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Chip, {
+          color: "green",
+          children: "Green"
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Chip, {
+          color: "blue",
+          children: "Blue"
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Chip, {
+          color: "yellow",
+          children: "Yellow"
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Chip, {
+          color: "orange",
+          children: "Orange"
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Chip, {
+          color: "purple",
+          children: "Purple"
+        })]
+      })]
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+      gap: "$2",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+        fontWeight: "600",
+        children: "Sizes"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+        gap: "$2",
+        alignItems: "center",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Chip, {
+          size: "$2",
+          children: "$2"
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Chip, {
+          size: "$3",
+          children: "$3"
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Chip, {
+          size: "$4",
+          children: "$4"
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Chip, {
+          size: "$5",
+          children: "$5"
+        })]
+      })]
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+      gap: "$2",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+        fontWeight: "600",
+        children: "Dismissible"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+        gap: "$2",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Chip, {
+          onDismiss: () => (0, import_storybook.action)("dismiss")(),
+          children: "Dismissible"
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Chip, {
+          onDismiss: () => (0, import_storybook.action)("dismiss")(),
+          color: "blue",
+          children: "Blue Dismissible"
+        })]
+      })]
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+      gap: "$2",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+        fontWeight: "600",
+        children: "Disabled"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+        gap: "$2",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Chip, {
+          disabled: true,
+          children: "Disabled"
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Chip, {
+          disabled: true,
+          onDismiss: () => {},
+          children: "Disabled with dismiss"
+        })]
+      })]
+    })]
+  })
+};