@butternutbox/pawprint-native 1.1.3 → 1.2.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     563.58 KB
+CJS dist/index.cjs.map 1.10 MB
+CJS ⚡️ Build success in 6123ms
+ESM dist/index.js     532.63 KB
+ESM dist/index.js.map 1.10 MB
+ESM ⚡️ Build success in 6123ms
+DTS ⚡️ Build success in 15381ms
+DTS dist/index.d.cts 108.40 KB
+DTS dist/index.d.ts  108.40 KB

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @butternutbox/pawprint-native
 
+## 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" }) }));
@@ -12565,6 +12567,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 +12859,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;