@butternutbox/pawprint-native 1.1.3 → 1.3.0

package/.turbo/turbo-build.log

@@ -7,12 +7,12 @@
 CJS Build start
 ESM Build start
 DTS Build start
-CJS dist/index.cjs     554.16 KB
-CJS dist/index.cjs.map 1.08 MB
-CJS ⚡️ Build success in 8241ms
-ESM dist/index.js     523.89 KB
-ESM dist/index.js.map 1.08 MB
-ESM ⚡️ Build success in 8243ms
-DTS ⚡️ Build success in 21494ms
-DTS dist/index.d.cts 104.18 KB
-DTS dist/index.d.ts  104.18 KB
+CJS dist/index.cjs     564.54 KB
+CJS dist/index.cjs.map 1.10 MB
+CJS ⚡️ Build success in 6535ms
+ESM dist/index.js     533.47 KB
+ESM dist/index.js.map 1.10 MB
+ESM ⚡️ Build success in 6536ms
+DTS ⚡️ Build success in 17552ms
+DTS dist/index.d.cts 111.87 KB
+DTS dist/index.d.ts  111.87 KB

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @butternutbox/pawprint-native
 
+## 1.3.0
+
+### Minor Changes
+
+- 9449ba4: Refactor Menu component to include anchor to the trigger, improve stylings and API
+
+## 1.2.0
+
+### Minor Changes
+
+- 7c1b5bd: `FloatingActionButton`: add new molecule on web and native. A floating pill with a leading icon (default `Gift`), message copy, a required link (`linkLabel` plus `linkHref` and/or the link handler, to navigate or trigger an action) and a required `md` icon button (`chevronUp`, `chevronRight` or `close`; `filled`, `outlined` or `text` via `iconButtonVariant`, defaulting to `filled` for the chevrons and `text` for `close`). `primary` and `secondary` variants use the `floatingActionButton` component tokens. Optional `animation` prop (off by default): `shine` sweeps a soft highlight across the pill and `nudge` moves the chevron towards its direction; both run 3 times then stop, and respect reduced motion. On web it has a max width of 374px; on native it fills its container. Positioning is left to the consumer.
+
 ## 1.1.3
 
 ### Patch Changes

package/dist/index.cjs

@@ -553,6 +553,7 @@ var Gift = (props, ref) => {
 };
 var ForwardRef29 = React66.forwardRef(Gift);
 ForwardRef29.category = "core";
+var Gift_default = ForwardRef29;
 var HelpOutline = (props, ref) => {
   var _a, _b;
   return /* @__PURE__ */ jsxRuntime.jsx(Svg__default.default, __spreadProps2(__spreadValues2(__spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: (_a = props.width) != null ? _a : 24, height: (_b = props.height) != null ? _b : 24 }, { fill: props.color || "currentColor" }), { viewBox: "0 0 24 24", ref }), props), { children: /* @__PURE__ */ jsxRuntime.jsx(Svg.Path, { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8m-1-4h2v2h-2zm1.61-9.96c-2.06-.3-3.88.97-4.43 2.79-.18.58.26 1.17.87 1.17h.2c.41 0 .74-.29.88-.67.32-.89 1.27-1.5 2.3-1.28.95.2 1.65 1.13 1.57 2.1-.1 1.34-1.62 1.63-2.45 2.88 0 .01-.01.01-.01.02-.01.02-.02.03-.03.05-.09.15-.18.32-.25.5-.01.03-.03.05-.04.08-.01.02-.01.04-.02.07-.12.34-.2.75-.2 1.25h2c0-.42.11-.77.28-1.07.02-.03.03-.06.05-.09.08-.14.18-.27.28-.39.01-.01.02-.03.03-.04.1-.12.21-.23.33-.34.96-.91 2.26-1.65 1.99-3.56-.24-1.74-1.61-3.21-3.35-3.47" }) }));
@@ -623,6 +624,7 @@ var KeyboardArrowUp = (props, ref) => {
 };
 var ForwardRef39 = React66.forwardRef(KeyboardArrowUp);
 ForwardRef39.category = "core";
+var KeyboardArrowUp_default = ForwardRef39;
 var KeyboardDoubleArrowDown = (props, ref) => {
   var _a, _b;
   return /* @__PURE__ */ jsxRuntime.jsx(Svg__default.default, __spreadProps2(__spreadValues2(__spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: (_a = props.width) != null ? _a : 24, height: (_b = props.height) != null ? _b : 24 }, { fill: props.color || "currentColor" }), { viewBox: "0 0 24 24", ref }), props), { children: /* @__PURE__ */ jsxRuntime.jsx(Svg.Path, { fillRule: "evenodd", d: "M6.702 12.282a.996.996 0 0 1 1.41 0l3.88 3.88 3.88-3.87a.996.996 0 0 1 1.41 0c.39.39.39 1.02.01 1.4l-4.59 4.59a.996.996 0 0 1-1.41 0l-4.59-4.59a.996.996 0 0 1 0-1.41m-.01-6.59a.995.995 0 0 1 1.41 0l3.89 3.88 3.88-3.87a.996.996 0 0 1 1.41 0c.39.39.39 1.02 0 1.4l-4.59 4.59a.997.997 0 0 1-1.41 0l-4.59-4.59a.995.995 0 0 1 0-1.41", clipRule: "evenodd" }) }));
@@ -10656,46 +10658,37 @@ var Tooltip = React66__default.default.forwardRef(
 );
 Tooltip.displayName = "Tooltip";
 var parseTokenValue53 = (value) => parseFloat(value);
-var Row = styled51__default.default(reactNative.Pressable)(({ theme: theme2, divider }) => {
+var Row = styled51__default.default(reactNative.Pressable)(({ theme: theme2 }) => {
   const { spacing } = theme2.tokens.semantics.dimensions;
-  const { colour } = theme2.tokens.semantics;
   return {
     width: "100%",
-    alignItems: "center",
+    alignItems: "flex-start",
     justifyContent: "center",
     paddingVertical: parseTokenValue53(spacing.md),
-    paddingHorizontal: parseTokenValue53(spacing.md),
-    borderBottomWidth: divider ? 1 : 0,
-    borderBottomColor: colour.border.divider
+    paddingHorizontal: parseTokenValue53(spacing.md)
   };
 });
 var MenuItem = React66__default.default.forwardRef((_a, ref) => {
   var _b = _a, { variant = "action", onPress, children, divider = true } = _b, rest = __objRest(_b, ["variant", "onPress", "children", "divider"]);
   const theme2 = react.useTheme();
   const { colour, typography } = theme2.tokens.semantics;
-  const labelColour = variant === "destructive" ? colour.text.error : colour.text.action.default;
+  const labelColour = variant === "destructive" ? colour.text.error : colour.text.link.default;
   const label = typeof children === "string" || typeof children === "number" ? String(children) : void 0;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Row,
-    __spreadProps(__spreadValues({
-      ref,
-      divider,
-      onPress,
-      accessible: true,
-      accessibilityRole: "menuitem",
-      accessibilityLabel: label
-    }, rest), {
-      children: label !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
-        Typography,
-        {
-          token: typography.body.medium.md,
-          align: "center",
-          color: labelColour,
-          children: label
-        }
-      ) : children
-    })
-  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Row,
+      __spreadProps(__spreadValues({
+        ref,
+        onPress,
+        accessible: true,
+        accessibilityRole: "menuitem",
+        accessibilityLabel: label
+      }, rest), {
+        children: label !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(Typography, { token: typography.body.medium.md, color: labelColour, children: label }) : children
+      })
+    ),
+    divider && /* @__PURE__ */ jsxRuntime.jsx(Divider, {})
+  ] });
 });
 MenuItem.displayName = "Menu.Item";
 var parseTokenValue54 = (value) => parseFloat(value);
@@ -10706,18 +10699,14 @@ var DismissLayer = styled51__default.default(reactNative.Pressable)({
   right: 0,
   bottom: 0
 });
-var Anchor = styled51__default.default(reactNative.View)(({ theme: theme2, align }) => {
-  const inset = parseTokenValue54(theme2.tokens.semantics.dimensions.spacing.md);
-  return __spreadValues({
-    position: "absolute"
-  }, align === "right" ? { right: inset } : { left: inset });
+var Anchor = styled51__default.default(reactNative.View)({
+  position: "absolute"
 });
 var Card = styled51__default.default(reactNative.Pressable)(({ theme: theme2, width }) => {
   const { borderRadius } = theme2.tokens.semantics.dimensions;
   const { shadow, background } = theme2.tokens.semantics.colour;
   return {
     width,
-    maxWidth: "90%",
     borderRadius: parseTokenValue54(borderRadius.md),
     overflow: "hidden",
     backgroundColor: background.surface.default,
@@ -10735,12 +10724,25 @@ var Card = styled51__default.default(reactNative.Pressable)(({ theme: theme2, wi
 var MenuRoot = ({
   open,
   onClose,
+  anchor,
   anchorOffset = 0,
   align = "right",
-  width = 360,
+  width = 280,
   closeAccessibilityLabel = "Close menu",
   children
 }) => {
+  const theme2 = react.useTheme();
+  const { width: windowWidth } = reactNative.useWindowDimensions();
+  const { spacing } = theme2.tokens.semantics.dimensions;
+  const [lastAnchor, setLastAnchor] = React66.useState(anchor);
+  if (anchor && anchor !== lastAnchor) setLastAnchor(anchor);
+  const shownAnchor = anchor != null ? anchor : lastAnchor;
+  const position = shownAnchor ? __spreadValues({
+    top: shownAnchor.y + shownAnchor.height + parseTokenValue54(spacing.xs)
+  }, align === "right" ? { right: windowWidth - (shownAnchor.x + shownAnchor.width) } : { left: shownAnchor.x }) : {
+    top: anchorOffset,
+    [align]: parseTokenValue54(spacing.md)
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     reactNative.Modal,
     {
@@ -10758,10 +10760,10 @@ var MenuRoot = ({
             accessibilityLabel: closeAccessibilityLabel
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(Anchor, { align, style: { top: anchorOffset }, children: /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx(Anchor, { style: position, children: /* @__PURE__ */ jsxRuntime.jsx(
           Card,
           {
-            width,
+            width: Math.min(width, windowWidth * 0.9),
             onPress: () => {
             },
             accessible: false,
@@ -10777,6 +10779,25 @@ MenuRoot.displayName = "Menu";
 var Menu2 = Object.assign(MenuRoot, {
   Item: MenuItem
 });
+var useMenuTrigger = () => {
+  const triggerRef = React66.useRef(null);
+  const [anchor, setAnchor] = React66.useState();
+  const open = React66.useCallback(() => {
+    var _a;
+    (_a = triggerRef.current) == null ? void 0 : _a.measureInWindow(
+      (x, y, width, height) => setAnchor({ x, y, width, height })
+    );
+  }, []);
+  const close = React66.useCallback(() => setAnchor(void 0), []);
+  const isOpen = anchor !== void 0;
+  return {
+    triggerRef,
+    isOpen,
+    open,
+    close,
+    menuProps: { open: isOpen, onClose: close, anchor }
+  };
+};
 var parseTokenValue55 = (value) => parseFloat(value);
 var StyledInsightRoot = styled51__default.default(reactNative.View)(
   ({
@@ -12565,6 +12586,272 @@ var TabNavigation = Object.assign(TabNavigationRoot, {
   Tab: TabNavigationTab,
   Panel: TabNavigationPanel
 });
+var parseTokenValue62 = (value) => parseFloat(value);
+var ICON_BUTTON_CONFIG = {
+  chevronUp: { icon: KeyboardArrowUp_default, defaultVariant: "filled" },
+  chevronRight: { icon: KeyboardArrowRight_default, defaultVariant: "filled" },
+  close: { icon: Close_default, defaultVariant: "text" }
+};
+var ANIMATION_DELAY = 1500;
+var ANIMATION_ITERATIONS = 3;
+var SHINE_SWEEP = 1100;
+var SHINE_REST = 4900;
+var SHINE_BAND_RATIO = 0.4;
+var SHINE_OPACITY = 0.55;
+var NUDGE_STEP = 200;
+var NUDGE_REST = 3200;
+var NUDGE_DISTANCE = 3;
+var ShineOverlay = ({
+  radius,
+  highlight
+}) => {
+  const reducedMotion = Animated10.useReducedMotion();
+  const [width, setWidth] = React66__default.default.useState(0);
+  const progress = Animated10.useSharedValue(0);
+  const bandWidth = width * SHINE_BAND_RATIO;
+  React66__default.default.useEffect(() => {
+    if (reducedMotion || !width) return;
+    progress.value = Animated10.withDelay(
+      ANIMATION_DELAY,
+      Animated10.withRepeat(
+        Animated10.withSequence(
+          Animated10.withTiming(1, {
+            duration: SHINE_SWEEP,
+            easing: Animated10.Easing.inOut(Animated10.Easing.ease)
+          }),
+          Animated10.withDelay(SHINE_REST, Animated10.withTiming(0, { duration: 0 }))
+        ),
+        ANIMATION_ITERATIONS
+      )
+    );
+  }, [progress, reducedMotion, width]);
+  const bandStyle = Animated10.useAnimatedStyle(() => ({
+    transform: [
+      {
+        translateX: -bandWidth * 1.5 + progress.value * (width + bandWidth * 2.5)
+      },
+      { skewX: "-20deg" }
+    ]
+  }));
+  if (reducedMotion) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.View,
+    {
+      pointerEvents: "none",
+      accessible: false,
+      importantForAccessibility: "no-hide-descendants",
+      onLayout: (e) => setWidth(e.nativeEvent.layout.width),
+      style: [
+        reactNative.StyleSheet.absoluteFill,
+        { borderRadius: radius, overflow: "hidden" }
+      ],
+      children: width > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+        Animated10__default.default.View,
+        {
+          style: [
+            { position: "absolute", top: 0, bottom: 0, width: bandWidth },
+            bandStyle
+          ],
+          children: /* @__PURE__ */ jsxRuntime.jsxs(Svg__default.default, { width: "100%", height: "100%", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Svg.Defs, { children: /* @__PURE__ */ jsxRuntime.jsxs(Svg.LinearGradient, { id: "fabShine", x1: "0", y1: "0", x2: "1", y2: "0", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Svg.Stop, { offset: "0", stopColor: highlight, stopOpacity: 0 }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Svg.Stop,
+                {
+                  offset: "0.5",
+                  stopColor: highlight,
+                  stopOpacity: SHINE_OPACITY
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(Svg.Stop, { offset: "1", stopColor: highlight, stopOpacity: 0 })
+            ] }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(Svg.Rect, { width: "100%", height: "100%", fill: "url(#fabShine)" })
+          ] })
+        }
+      )
+    }
+  );
+};
+var createNudgingIcon = (IconComponent, axis, direction) => {
+  var _a;
+  const NudgingIcon = (props) => {
+    const reducedMotion = Animated10.useReducedMotion();
+    const offset = Animated10.useSharedValue(0);
+    React66__default.default.useEffect(() => {
+      if (reducedMotion) return;
+      const step = (to) => Animated10.withTiming(to, {
+        duration: NUDGE_STEP,
+        easing: Animated10.Easing.inOut(Animated10.Easing.ease)
+      });
+      const distance = NUDGE_DISTANCE * direction;
+      offset.value = Animated10.withDelay(
+        ANIMATION_DELAY,
+        Animated10.withRepeat(
+          Animated10.withSequence(
+            step(distance),
+            step(0),
+            step(distance),
+            step(0),
+            Animated10.withDelay(NUDGE_REST, Animated10.withTiming(0, { duration: 0 }))
+          ),
+          ANIMATION_ITERATIONS
+        )
+      );
+    }, [offset, reducedMotion]);
+    const nudgeStyle = Animated10.useAnimatedStyle(
+      () => axis === "translateX" ? { transform: [{ translateX: offset.value }] } : { transform: [{ translateY: offset.value }] }
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(Animated10__default.default.View, { style: nudgeStyle, children: /* @__PURE__ */ jsxRuntime.jsx(IconComponent, __spreadValues({}, props)) });
+  };
+  NudgingIcon.displayName = `Nudging(${(_a = IconComponent.displayName) != null ? _a : "Icon"})`;
+  return NudgingIcon;
+};
+var NUDGE_ICONS = {
+  chevronUp: createNudgingIcon(KeyboardArrowUp_default, "translateY", -1),
+  chevronRight: createNudgingIcon(KeyboardArrowRight_default, "translateX", 1)
+};
+var StyledRoot18 = styled51__default.default(reactNative.View)(
+  ({
+    rootGap,
+    rootPaddingH,
+    rootPaddingV,
+    rootBgColor,
+    rootBorderWidth,
+    rootBorderColor,
+    rootBorderRadius,
+    rootBoxShadow
+  }) => ({
+    flexDirection: "row",
+    alignItems: "center",
+    width: "100%",
+    gap: rootGap,
+    paddingHorizontal: rootPaddingH,
+    paddingVertical: rootPaddingV,
+    backgroundColor: rootBgColor,
+    borderWidth: rootBorderWidth,
+    borderColor: rootBorderColor,
+    borderRadius: rootBorderRadius,
+    boxShadow: rootBoxShadow
+  })
+);
+var StyledIconContainer = styled51__default.default(reactNative.View)(({ containerSize, containerRadius, containerBgColor }) => ({
+  alignItems: "center",
+  justifyContent: "center",
+  flexShrink: 0,
+  width: containerSize,
+  height: containerSize,
+  borderRadius: containerRadius,
+  backgroundColor: containerBgColor
+}));
+var StyledContent3 = styled51__default.default(reactNative.View)({
+  flex: 1,
+  minWidth: 0,
+  alignItems: "flex-start",
+  justifyContent: "center"
+});
+var FloatingActionButton = React66__default.default.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      variant = "primary",
+      icon = Gift_default,
+      children,
+      linkLabel,
+      linkHref,
+      onLinkPress,
+      animation,
+      iconButtonIcon,
+      iconButtonLabel,
+      iconButtonVariant,
+      onIconButtonPress
+    } = _b, rest = __objRest(_b, [
+      "variant",
+      "icon",
+      "children",
+      "linkLabel",
+      "linkHref",
+      "onLinkPress",
+      "animation",
+      "iconButtonIcon",
+      "iconButtonLabel",
+      "iconButtonVariant",
+      "onIconButtonPress"
+    ]);
+    const theme2 = react.useTheme();
+    const { floatingActionButton } = theme2.tokens.components;
+    const { colour, dimensions: dimensions3 } = theme2.tokens.semantics;
+    const { shadow } = colour;
+    const iconButton = ICON_BUTTON_CONFIG[iconButtonIcon];
+    const iconButtonElement = /* @__PURE__ */ jsxRuntime.jsx(
+      IconButton,
+      {
+        icon: animation === "nudge" && iconButtonIcon !== "close" ? NUDGE_ICONS[iconButtonIcon] : iconButton.icon,
+        variant: iconButtonVariant != null ? iconButtonVariant : iconButton.defaultVariant,
+        size: "md",
+        "aria-label": iconButtonLabel,
+        onPress: onIconButtonPress
+      }
+    );
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      StyledRoot18,
+      __spreadProps(__spreadValues({
+        ref,
+        rootGap: parseTokenValue62(floatingActionButton.spacing.gap),
+        rootPaddingH: parseTokenValue62(
+          floatingActionButton.spacing.horizontalPadding
+        ),
+        rootPaddingV: parseTokenValue62(
+          floatingActionButton.spacing.verticalPadding
+        ),
+        rootBgColor: floatingActionButton.colour.background[variant],
+        rootBorderWidth: parseTokenValue62(
+          floatingActionButton.borderWidth.default
+        ),
+        rootBorderColor: floatingActionButton.colour.border[variant],
+        rootBorderRadius: parseTokenValue62(
+          floatingActionButton.borderRadius.default
+        ),
+        rootBoxShadow: `${shadow.md.offsetX} ${shadow.md.offsetY} ${shadow.md.blur} ${shadow.md.spread} ${shadow.md.color}`
+      }, rest), {
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            StyledIconContainer,
+            {
+              containerSize: parseTokenValue62(
+                theme2.tokens.primitives.dimension.sizing["44"]
+              ),
+              containerRadius: parseTokenValue62(dimensions3.borderRadius.round),
+              containerBgColor: variant === "secondary" ? colour.background.container.secondary : colour.background.container.default,
+              children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon, size: "xl", colour: "primary" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(StyledContent3, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", size: "lg", weight: "medium", children }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Link,
+              __spreadProps(__spreadValues({
+                href: linkHref,
+                onPress: onLinkPress,
+                size: "md",
+                weight: "medium"
+              }, !linkHref && { accessibilityRole: "button" }), {
+                children: linkLabel
+              })
+            )
+          ] }),
+          iconButtonElement,
+          animation === "shine" && /* @__PURE__ */ jsxRuntime.jsx(
+            ShineOverlay,
+            {
+              radius: parseTokenValue62(floatingActionButton.borderRadius.default),
+              highlight: theme2.tokens.primitives.colour.system.neutral["1"]
+            }
+          )
+        ]
+      })
+    );
+  }
+);
+FloatingActionButton.displayName = "FloatingActionButton";
 
 Object.defineProperty(exports, "tokens", {
   enumerable: true,
@@ -12591,6 +12878,7 @@ exports.DatePicker = DatePicker;
 exports.Divider = Divider;
 exports.Drawer = Drawer;
 exports.FilterTab = FilterTab;
+exports.FloatingActionButton = FloatingActionButton;
 exports.Hint = Hint;
 exports.Icon = Icon;
 exports.IconButton = IconButton;
@@ -12657,6 +12945,7 @@ exports.slideOutAnimation = slideOutAnimation;
 exports.theme = theme;
 exports.useCopyField = useCopyField;
 exports.useDrawerKeyboardAvoidance = useDrawerKeyboardAvoidance;
+exports.useMenuTrigger = useMenuTrigger;
 exports.usePasswordField = usePasswordField;
 exports.usePawprint = usePawprint;
 exports.useSearchField = useSearchField;