@butternutbox/pawprint-native 1.1.3 → 1.3.0

package/dist/index.js

@@ -11,7 +11,7 @@ import * as AvatarPrimitive from '@rn-primitives/avatar';
 import { Text, View, Animated, Pressable, TextInput, Easing, StyleSheet, useWindowDimensions, PanResponder, Image, ScrollView, Keyboard, ActionSheetIOS, TouchableOpacity, Platform, Modal, TouchableWithoutFeedback, FlatList, Linking, Clipboard, Alert } from 'react-native';
 import Svg, { Path, Defs, LinearGradient, Stop, Rect, G, ClipPath } from 'react-native-svg';
 import * as SwitchPrimitive from '@rn-primitives/switch';
-import Animated10, { Keyframe, Easing as Easing$1, FadeInLeft, FadeInRight, FadeInUp, FadeInDown, FadeIn, FadeOutLeft, FadeOutRight, FadeOutUp, FadeOutDown, FadeOut, useReducedMotion, useSharedValue, withTiming, useAnimatedStyle, ComplexAnimationBuilder, withSpring } from 'react-native-reanimated';
+import Animated10, { Keyframe, Easing as Easing$1, FadeInLeft, FadeInRight, FadeInUp, FadeInDown, FadeIn, FadeOutLeft, FadeOutRight, FadeOutUp, FadeOutDown, FadeOut, useReducedMotion, useSharedValue, withTiming, useAnimatedStyle, ComplexAnimationBuilder, withSpring, withDelay, withRepeat, withSequence } from 'react-native-reanimated';
 import { Slot } from '@rn-primitives/slot';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import * as ProgressPrimitive from '@rn-primitives/progress';
@@ -522,6 +522,7 @@ var Gift = (props, ref) => {
 };
 var ForwardRef29 = forwardRef(Gift);
 ForwardRef29.category = "core";
+var Gift_default = ForwardRef29;
 var HelpOutline = (props, ref) => {
   var _a, _b;
   return /* @__PURE__ */ jsx(Svg, __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__ */ jsx(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" }) }));
@@ -592,6 +593,7 @@ var KeyboardArrowUp = (props, ref) => {
 };
 var ForwardRef39 = forwardRef(KeyboardArrowUp);
 ForwardRef39.category = "core";
+var KeyboardArrowUp_default = ForwardRef39;
 var KeyboardDoubleArrowDown = (props, ref) => {
   var _a, _b;
   return /* @__PURE__ */ jsx(Svg, __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__ */ jsx(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" }) }));
@@ -10625,46 +10627,37 @@ var Tooltip = React66.forwardRef(
 );
 Tooltip.displayName = "Tooltip";
 var parseTokenValue53 = (value) => parseFloat(value);
-var Row = styled51(Pressable)(({ theme: theme2, divider }) => {
+var Row = styled51(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.forwardRef((_a, ref) => {
   var _b = _a, { variant = "action", onPress, children, divider = true } = _b, rest = __objRest(_b, ["variant", "onPress", "children", "divider"]);
   const theme2 = 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__ */ jsx(
-    Row,
-    __spreadProps(__spreadValues({
-      ref,
-      divider,
-      onPress,
-      accessible: true,
-      accessibilityRole: "menuitem",
-      accessibilityLabel: label
-    }, rest), {
-      children: label !== void 0 ? /* @__PURE__ */ jsx(
-        Typography,
-        {
-          token: typography.body.medium.md,
-          align: "center",
-          color: labelColour,
-          children: label
-        }
-      ) : children
-    })
-  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Row,
+      __spreadProps(__spreadValues({
+        ref,
+        onPress,
+        accessible: true,
+        accessibilityRole: "menuitem",
+        accessibilityLabel: label
+      }, rest), {
+        children: label !== void 0 ? /* @__PURE__ */ jsx(Typography, { token: typography.body.medium.md, color: labelColour, children: label }) : children
+      })
+    ),
+    divider && /* @__PURE__ */ jsx(Divider, {})
+  ] });
 });
 MenuItem.displayName = "Menu.Item";
 var parseTokenValue54 = (value) => parseFloat(value);
@@ -10675,18 +10668,14 @@ var DismissLayer = styled51(Pressable)({
   right: 0,
   bottom: 0
 });
-var Anchor = styled51(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(View)({
+  position: "absolute"
 });
 var Card = styled51(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,
@@ -10704,12 +10693,25 @@ var Card = styled51(Pressable)(({ theme: theme2, width }) => {
 var MenuRoot = ({
   open,
   onClose,
+  anchor,
   anchorOffset = 0,
   align = "right",
-  width = 360,
+  width = 280,
   closeAccessibilityLabel = "Close menu",
   children
 }) => {
+  const theme2 = useTheme();
+  const { width: windowWidth } = useWindowDimensions();
+  const { spacing } = theme2.tokens.semantics.dimensions;
+  const [lastAnchor, setLastAnchor] = 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__ */ jsxs(
     Modal,
     {
@@ -10727,10 +10729,10 @@ var MenuRoot = ({
             accessibilityLabel: closeAccessibilityLabel
           }
         ),
-        /* @__PURE__ */ jsx(Anchor, { align, style: { top: anchorOffset }, children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(Anchor, { style: position, children: /* @__PURE__ */ jsx(
           Card,
           {
-            width,
+            width: Math.min(width, windowWidth * 0.9),
             onPress: () => {
             },
             accessible: false,
@@ -10746,6 +10748,25 @@ MenuRoot.displayName = "Menu";
 var Menu2 = Object.assign(MenuRoot, {
   Item: MenuItem
 });
+var useMenuTrigger = () => {
+  const triggerRef = useRef(null);
+  const [anchor, setAnchor] = useState();
+  const open = useCallback(() => {
+    var _a;
+    (_a = triggerRef.current) == null ? void 0 : _a.measureInWindow(
+      (x, y, width, height) => setAnchor({ x, y, width, height })
+    );
+  }, []);
+  const close = 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(View)(
   ({
@@ -12534,7 +12555,273 @@ 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 = useReducedMotion();
+  const [width, setWidth] = React66.useState(0);
+  const progress = useSharedValue(0);
+  const bandWidth = width * SHINE_BAND_RATIO;
+  React66.useEffect(() => {
+    if (reducedMotion || !width) return;
+    progress.value = withDelay(
+      ANIMATION_DELAY,
+      withRepeat(
+        withSequence(
+          withTiming(1, {
+            duration: SHINE_SWEEP,
+            easing: Easing$1.inOut(Easing$1.ease)
+          }),
+          withDelay(SHINE_REST, withTiming(0, { duration: 0 }))
+        ),
+        ANIMATION_ITERATIONS
+      )
+    );
+  }, [progress, reducedMotion, width]);
+  const bandStyle = useAnimatedStyle(() => ({
+    transform: [
+      {
+        translateX: -bandWidth * 1.5 + progress.value * (width + bandWidth * 2.5)
+      },
+      { skewX: "-20deg" }
+    ]
+  }));
+  if (reducedMotion) return null;
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      pointerEvents: "none",
+      accessible: false,
+      importantForAccessibility: "no-hide-descendants",
+      onLayout: (e) => setWidth(e.nativeEvent.layout.width),
+      style: [
+        StyleSheet.absoluteFill,
+        { borderRadius: radius, overflow: "hidden" }
+      ],
+      children: width > 0 && /* @__PURE__ */ jsx(
+        Animated10.View,
+        {
+          style: [
+            { position: "absolute", top: 0, bottom: 0, width: bandWidth },
+            bandStyle
+          ],
+          children: /* @__PURE__ */ jsxs(Svg, { width: "100%", height: "100%", children: [
+            /* @__PURE__ */ jsx(Defs, { children: /* @__PURE__ */ jsxs(LinearGradient, { id: "fabShine", x1: "0", y1: "0", x2: "1", y2: "0", children: [
+              /* @__PURE__ */ jsx(Stop, { offset: "0", stopColor: highlight, stopOpacity: 0 }),
+              /* @__PURE__ */ jsx(
+                Stop,
+                {
+                  offset: "0.5",
+                  stopColor: highlight,
+                  stopOpacity: SHINE_OPACITY
+                }
+              ),
+              /* @__PURE__ */ jsx(Stop, { offset: "1", stopColor: highlight, stopOpacity: 0 })
+            ] }) }),
+            /* @__PURE__ */ jsx(Rect, { width: "100%", height: "100%", fill: "url(#fabShine)" })
+          ] })
+        }
+      )
+    }
+  );
+};
+var createNudgingIcon = (IconComponent, axis, direction) => {
+  var _a;
+  const NudgingIcon = (props) => {
+    const reducedMotion = useReducedMotion();
+    const offset = useSharedValue(0);
+    React66.useEffect(() => {
+      if (reducedMotion) return;
+      const step = (to) => withTiming(to, {
+        duration: NUDGE_STEP,
+        easing: Easing$1.inOut(Easing$1.ease)
+      });
+      const distance = NUDGE_DISTANCE * direction;
+      offset.value = withDelay(
+        ANIMATION_DELAY,
+        withRepeat(
+          withSequence(
+            step(distance),
+            step(0),
+            step(distance),
+            step(0),
+            withDelay(NUDGE_REST, withTiming(0, { duration: 0 }))
+          ),
+          ANIMATION_ITERATIONS
+        )
+      );
+    }, [offset, reducedMotion]);
+    const nudgeStyle = useAnimatedStyle(
+      () => axis === "translateX" ? { transform: [{ translateX: offset.value }] } : { transform: [{ translateY: offset.value }] }
+    );
+    return /* @__PURE__ */ jsx(Animated10.View, { style: nudgeStyle, children: /* @__PURE__ */ 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(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(View)(({ containerSize, containerRadius, containerBgColor }) => ({
+  alignItems: "center",
+  justifyContent: "center",
+  flexShrink: 0,
+  width: containerSize,
+  height: containerSize,
+  borderRadius: containerRadius,
+  backgroundColor: containerBgColor
+}));
+var StyledContent3 = styled51(View)({
+  flex: 1,
+  minWidth: 0,
+  alignItems: "flex-start",
+  justifyContent: "center"
+});
+var FloatingActionButton = React66.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 = 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__ */ 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__ */ 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__ */ 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__ */ jsx(Icon, { icon, size: "xl", colour: "primary" })
+            }
+          ),
+          /* @__PURE__ */ jsxs(StyledContent3, { children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "body", size: "lg", weight: "medium", children }),
+            /* @__PURE__ */ jsx(
+              Link,
+              __spreadProps(__spreadValues({
+                href: linkHref,
+                onPress: onLinkPress,
+                size: "md",
+                weight: "medium"
+              }, !linkHref && { accessibilityRole: "button" }), {
+                children: linkLabel
+              })
+            )
+          ] }),
+          iconButtonElement,
+          animation === "shine" && /* @__PURE__ */ jsx(
+            ShineOverlay,
+            {
+              radius: parseTokenValue62(floatingActionButton.borderRadius.default),
+              highlight: theme2.tokens.primitives.colour.system.neutral["1"]
+            }
+          )
+        ]
+      })
+    );
+  }
+);
+FloatingActionButton.displayName = "FloatingActionButton";
 
-export { Accordion, Animated5 as Animated, Avatar, Badge, Button, ButtonDock, ButtonGroup, CarouselControls, Checkbox, CheckboxGroup, CopyField, CopyFieldInput, Countdown, DatePicker, Divider, Drawer, FilterTab, Hint, Icon, IconButton, Illustration, Input, InputDescription, InputError, InputField, InputLabel, InputText, Link, Logo, Menu2 as Menu, MenuItem, MessageCard, MessageCardBanner, MessageCardInsight, NativeSelectPicker, Notification, NumberField, NumberInput, NumberInputField, PROGRESS_ANIMATION, PasswordField, PasswordFieldInput, PasswordFieldRequirements, PawprintProvider, PictureSelector, ProductDisplayCard, ProductListingCardWithBadgeAndGrid as ProductListingCard, Progress, Radio, RadioGroup, RadioTile, SearchField, SearchFieldInput, SegmentedControl, SelectField, SelectFieldContent, SelectFieldItem, SelectFieldTrigger, SelectFieldValue, Slider, Spinner, StackedNotifications, Switch, TabNavigation, Tag, TextArea, TextAreaField, TextAreaLabel, ThemeProvider, Tooltip, Typography, createPawprintTheme, fadeAnimation, fadeDownAnimation, fadeUpAnimation, registerLogo, resolveLogo, scaleAnimation, slideInAnimation, slideOutAnimation, theme, useCopyField, useDrawerKeyboardAvoidance, usePasswordField, usePawprint, useSearchField, useSelectField };
+export { Accordion, Animated5 as Animated, Avatar, Badge, Button, ButtonDock, ButtonGroup, CarouselControls, Checkbox, CheckboxGroup, CopyField, CopyFieldInput, Countdown, DatePicker, Divider, Drawer, FilterTab, FloatingActionButton, Hint, Icon, IconButton, Illustration, Input, InputDescription, InputError, InputField, InputLabel, InputText, Link, Logo, Menu2 as Menu, MenuItem, MessageCard, MessageCardBanner, MessageCardInsight, NativeSelectPicker, Notification, NumberField, NumberInput, NumberInputField, PROGRESS_ANIMATION, PasswordField, PasswordFieldInput, PasswordFieldRequirements, PawprintProvider, PictureSelector, ProductDisplayCard, ProductListingCardWithBadgeAndGrid as ProductListingCard, Progress, Radio, RadioGroup, RadioTile, SearchField, SearchFieldInput, SegmentedControl, SelectField, SelectFieldContent, SelectFieldItem, SelectFieldTrigger, SelectFieldValue, Slider, Spinner, StackedNotifications, Switch, TabNavigation, Tag, TextArea, TextAreaField, TextAreaLabel, ThemeProvider, Tooltip, Typography, createPawprintTheme, fadeAnimation, fadeDownAnimation, fadeUpAnimation, registerLogo, resolveLogo, scaleAnimation, slideInAnimation, slideOutAnimation, theme, useCopyField, useDrawerKeyboardAvoidance, useMenuTrigger, usePasswordField, usePawprint, useSearchField, useSelectField };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map