@butternutbox/pawprint-native 0.1.0 → 0.2.0

package/.turbo/turbo-build.log

@@ -15,7 +15,7 @@
 ESM dist/ibm-plex-sans-condensed-700-normal-4PFYFTSO.woff2 18.90 KB
 ESM dist/index.js                                          1.61 MB
 ESM dist/index.js.map                                      2.44 MB
-ESM ⚡️ Build success in 10371ms
+ESM ⚡️ Build success in 11141ms
 CJS dist/ida-narrow-500-normal-C6I2PK4T.woff2              47.41 KB
 CJS dist/ida-narrow-700-normal-UPHPRIN6.woff2              49.90 KB
 CJS dist/ibm-plex-sans-condensed-400-normal-I2XLJNNB.woff2 19.33 KB
@@ -24,7 +24,7 @@
 CJS dist/ibm-plex-sans-condensed-700-normal-4PFYFTSO.woff2 18.90 KB
 CJS dist/index.cjs                                         1.67 MB
 CJS dist/index.cjs.map                                     2.44 MB
-CJS ⚡️ Build success in 10375ms
-DTS ⚡️ Build success in 21699ms
-DTS dist/index.d.cts 76.92 KB
-DTS dist/index.d.ts  76.92 KB
+CJS ⚡️ Build success in 11143ms
+DTS ⚡️ Build success in 21900ms
+DTS dist/index.d.cts 76.91 KB
+DTS dist/index.d.ts  76.91 KB

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @butternutbox/pawprint-native
 
+## 0.2.0
+
+### Minor Changes
+
+- ecc629f: updates to illustraions, icons and tokens
+- b237a0d: Bump versions to all be inline
+
+### Patch Changes
+
+- 30f896c: add rn-primitives/select to dependencies
+- Updated dependencies [ecc629f]
+- Updated dependencies [b237a0d]
+  - @butternutbox/pawprint-tokens@0.2.0
+
 ## 0.1.0
 
 ### Minor Changes

package/dist/index.cjs

@@ -4456,7 +4456,7 @@ var Illustration = React60__default.default.forwardRef(
         accessibilityLabel: ariaLabel,
         accessible: !!ariaLabel
       }, rest), {
-        children: /* @__PURE__ */ jsxRuntime.jsx(IllustrationComponent, { height: dimension })
+        children: /* @__PURE__ */ jsxRuntime.jsx(IllustrationComponent, { width: dimension, height: dimension })
       })
     );
   }
@@ -4522,6 +4522,7 @@ ForwardRef710.category = "core";
 var ArrowForward = (props, ref) => /* @__PURE__ */ jsxRuntime.jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 13h11.17l-4.88 4.88c-.39.39-.39 1.03 0 1.42s1.02.39 1.41 0l6.59-6.59a.996.996 0 0 0 0-1.41l-6.58-6.6a.996.996 0 1 0-1.41 1.41L16.17 11H5c-.55 0-1 .45-1 1s.45 1 1 1" }) }));
 var ForwardRef810 = React60.forwardRef(ArrowForward);
 ForwardRef810.category = "core";
+var ArrowForward_default = ForwardRef810;
 var ArrowLeft = (props, ref) => /* @__PURE__ */ jsxRuntime.jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12.29 8.71 9.7 11.3a.996.996 0 0 0 0 1.41l2.59 2.59c.63.63 1.71.18 1.71-.71V9.41c0-.89-1.08-1.33-1.71-.7" }) }));
 var ForwardRef910 = React60.forwardRef(ArrowLeft);
 ForwardRef910.category = "core";
@@ -5030,11 +5031,11 @@ var Link = React60__default.default.forwardRef(
             }
           ),
           standalone && /* @__PURE__ */ jsxRuntime.jsx(
-            Typography,
+            Icon,
             {
-              token: typography.link[weight][size],
-              color: pressed ? linkColour.hover : linkColour.default,
-              children: " \u2192"
+              icon: ArrowForward_default,
+              size: "xs",
+              customColour: pressed ? linkColour.hover : linkColour.default
             }
           )
         ] })
@@ -7710,9 +7711,13 @@ var StyledControlTrack = styled52__default.default(reactNative.View)(
     minWidth: controlWidth,
     minHeight: controlHeight,
     borderRadius: controlHeight,
-    borderWidth: switchChecked ? 0 : controlBorderWidth,
+    // Keep the border width constant and only toggle the colour. Animating
+    // the width between 0 and 2 was causing a momentary background bleed on
+    // Android when transitioning back to the off state.
+    borderWidth: controlBorderWidth,
     borderColor: switchChecked ? "transparent" : controlBorderColor,
     backgroundColor: switchChecked ? controlBgChecked : controlBgDefault,
+    overflow: "hidden",
     justifyContent: "center"
   })
 );
@@ -7752,9 +7757,9 @@ var Switch = React60__default.default.forwardRef(
     const controlHeight = parseTokenValue16(size.control.height);
     const thumbSize = parseTokenValue16(size.thumb.default);
     const borderWidthValue = parseTokenValue16(borderWidth.control.default);
-    const outerInset = 5;
-    const inset = outerInset - borderWidthValue;
-    const translateX = controlWidth - thumbSize - outerInset * 2;
+    const inset = 2;
+    const offTranslateX = inset;
+    const onTranslateX = controlWidth - borderWidthValue * 2 - thumbSize - inset;
     const animValue = React60.useRef(new reactNative.Animated.Value(isChecked ? 1 : 0)).current;
     React60.useEffect(() => {
       reactNative.Animated.timing(animValue, {
@@ -7765,7 +7770,7 @@ var Switch = React60__default.default.forwardRef(
     }, [isChecked, animValue]);
     const thumbTranslateX = animValue.interpolate({
       inputRange: [0, 1],
-      outputRange: [inset, inset + translateX + 3]
+      outputRange: [offTranslateX, onTranslateX]
     });
     const handleCheckedChange = (checked) => {
       if (!isControlled) {
@@ -9338,12 +9343,14 @@ var StyledDockRoot = styled52__default.default(reactNative.View)(
     paddingVertical: dockPaddingVertical
   })
 );
-var StyledStackedInner = styled52__default.default(reactNative.View)({
-  alignItems: "center",
-  gap: 16,
-  width: "100%",
-  maxWidth: 520
-});
+var StyledStackedInner = styled52__default.default(reactNative.View)(
+  ({ innerGap }) => ({
+    alignItems: "center",
+    gap: innerGap,
+    width: "100%",
+    maxWidth: 520
+  })
+);
 var StyledButtonGroup = styled52__default.default(reactNative.View)(({ groupDirection, groupAlign, groupJustify, groupGap }) => __spreadValues({
   flexDirection: groupDirection,
   alignItems: groupAlign,
@@ -9356,7 +9363,7 @@ var ButtonDock = React60__default.default.forwardRef(
     var _b = _a, { variant = "stacked", leadingContent, description, children } = _b, rest = __objRest(_b, ["variant", "leadingContent", "description", "children"]);
     const theme2 = react.useTheme();
     const { buttonDock, buttonGroup } = theme2.tokens.components;
-    const { dimensions } = theme2.tokens.semantics;
+    const { dimensions, typography } = theme2.tokens.semantics;
     const isStacked = variant === "stacked";
     const groupGap = parseTokenValue28(
       isStacked ? buttonGroup.spacing.stacked.gap : buttonGroup.spacing.sideBySide.gap
@@ -9369,32 +9376,37 @@ var ButtonDock = React60__default.default.forwardRef(
         dockBorderTopWidth: parseTokenValue28(dimensions.borderWidth.sm),
         dockBorderTopColor: buttonDock.colour.border,
         dockPaddingVertical: parseTokenValue28(
-          buttonDock.spacing[variant].desktop.verticalPadding
+          buttonDock.spacing[variant].mobile.topPadding
         )
       }, rest), {
-        children: isStacked ? /* @__PURE__ */ jsxRuntime.jsxs(StyledStackedInner, { children: [
-          leadingContent,
-          /* @__PURE__ */ jsxRuntime.jsx(
-            StyledButtonGroup,
-            {
-              groupDirection: "column",
-              groupAlign: "stretch",
-              groupJustify: "center",
-              groupGap,
-              children
-            }
-          ),
-          description && /* @__PURE__ */ jsxRuntime.jsx(
-            Typography,
-            {
-              variant: "body",
-              size: "md",
-              weight: "medium",
-              align: "center",
-              children: typeof description === "string" ? description : description
-            }
-          )
-        ] }) : /* @__PURE__ */ jsxRuntime.jsx(
+        children: isStacked ? /* @__PURE__ */ jsxRuntime.jsxs(
+          StyledStackedInner,
+          {
+            innerGap: parseTokenValue28(buttonGroup.spacing.gap),
+            children: [
+              leadingContent,
+              /* @__PURE__ */ jsxRuntime.jsx(
+                StyledButtonGroup,
+                {
+                  groupDirection: "column",
+                  groupAlign: "stretch",
+                  groupJustify: "center",
+                  groupGap,
+                  children
+                }
+              ),
+              description && /* @__PURE__ */ jsxRuntime.jsx(
+                Typography,
+                {
+                  token: typography.body.medium.md,
+                  color: buttonGroup.colour.text,
+                  align: "center",
+                  children: description
+                }
+              )
+            ]
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(
           StyledButtonGroup,
           {
             groupDirection: "row",
@@ -9846,7 +9858,6 @@ var StyledItem2 = styled52__default.default(reactNative.Pressable)(
     itemHeight,
     itemMinWidth,
     itemPaddingH,
-    itemPaddingV,
     itemBorderRadius,
     itemBgColor,
     itemOpacity,
@@ -9858,7 +9869,10 @@ var StyledItem2 = styled52__default.default(reactNative.Pressable)(
     height: itemHeight
   }, isIconOnly ? { width: itemHeight, maxWidth: itemHeight } : { minWidth: itemMinWidth }), {
     paddingHorizontal: itemPaddingH,
-    paddingVertical: itemPaddingV,
+    // Vertical padding is intentionally omitted: with a fixed `height` and
+    // flex centering, the label sits in the middle of the box. Applying
+    // `verticalPadding: 12px` on top of the 36px small height would leave a
+    // 12px inner area, clipping the 18px line-height text on Android.
     borderRadius: itemBorderRadius,
     backgroundColor: itemBgColor,
     opacity: itemOpacity,
@@ -9911,7 +9925,6 @@ var FilterTabItem = React60__default.default.forwardRef(
         itemHeight: height,
         itemMinWidth: minWidth,
         itemPaddingH: parseTokenValue33(tabItem.spacing.horizontalPadding),
-        itemPaddingV: parseTokenValue33(tabItem.spacing.verticalPadding),
         itemBorderRadius: parseTokenValue33(tabItem.borderRadius.default),
         itemBgColor: isActive ? tabItem.colour.background.selected : tabItem.colour.background.default,
         itemOpacity: disabled ? parseFloat(tabItem.opacity.disabled.default) : 1,
@@ -10382,20 +10395,21 @@ var StyledErrorRow2 = styled52__default.default(reactNative.View)(({ gap }) => (
 var PasswordFieldError = React60__default.default.forwardRef((_a, ref) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
   const theme2 = react.useTheme();
-  const { colour, description, spacing } = theme2.tokens.components.inputs;
+  const { listItem } = theme2.tokens.components.validationList;
+  const { typography } = theme2.tokens.semantics;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     StyledErrorRow2,
     __spreadProps(__spreadValues({
       ref,
-      gap: parseTokenValue36(spacing.description.leftPadding)
+      gap: parseTokenValue36(listItem.spacing.gap)
     }, rest), {
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: Cancel_default, size: "sm", colour: "error" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: Cancel_default, size: "xs", customColour: listItem.colour.icon.error }),
         /* @__PURE__ */ jsxRuntime.jsx(
           Typography,
           {
-            token: description.text.default,
-            color: colour.description.error,
+            token: typography.body.medium.md,
+            color: listItem.colour.text.default,
             children
           }
         )
@@ -10420,7 +10434,8 @@ var StyledRequirementItem = styled52__default.default(reactNative.View)(
 var PasswordFieldRequirements = React60__default.default.forwardRef((_a, ref) => {
   var _b = _a, { requirements } = _b, rest = __objRest(_b, ["requirements"]);
   const theme2 = react.useTheme();
-  const { colour, description, spacing } = theme2.tokens.components.inputs;
+  const { listItem, list } = theme2.tokens.components.validationList;
+  const { typography } = theme2.tokens.semantics;
   if (!requirements || requirements.length === 0) {
     return null;
   }
@@ -10431,28 +10446,28 @@ var PasswordFieldRequirements = React60__default.default.forwardRef((_a, ref) =>
     StyledRequirementsList,
     __spreadProps(__spreadValues({
       ref,
-      listGap: parseTokenValue37(spacing.description.leftPadding)
+      listGap: parseTokenValue37(list.spacing.gap)
     }, rest), {
       children: normalizedRequirements.map((requirement, index) => {
-        const iconColour = requirement.satisfied ? "success" : "error";
+        const iconColour = requirement.satisfied ? listItem.colour.icon.success : listItem.colour.icon.error;
         return /* @__PURE__ */ jsxRuntime.jsxs(
           StyledRequirementItem,
           {
-            itemGap: parseTokenValue37(spacing.description.leftPadding),
+            itemGap: parseTokenValue37(listItem.spacing.gap),
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(
                 Icon,
                 {
                   icon: requirement.satisfied ? CheckCircle_default : Cancel_default,
-                  size: "sm",
-                  colour: iconColour
+                  size: "xs",
+                  customColour: iconColour
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsx(
                 Typography,
                 {
-                  token: description.text.default,
-                  color: colour.label.default,
+                  token: typography.body.medium.md,
+                  color: listItem.colour.text.default,
                   children: requirement.text
                 }
               )
@@ -13317,8 +13332,35 @@ var DatePicker = React60__default.default.forwardRef(
   }
 );
 DatePicker.displayName = "DatePicker";
-var POINTER_HALF_WIDTH = 12;
+var POINTER_WIDTH = 24;
 var POINTER_HEIGHT = 12;
+var buildPointerPath = (r) => {
+  const w = POINTER_WIDTH;
+  const h = POINTER_HEIGHT;
+  const apexInset = r;
+  const botInset = r * (Math.SQRT2 + 1);
+  const sin45 = Math.SQRT1_2;
+  const apexAxis = apexInset * sin45;
+  const botAxis = botInset * sin45;
+  const apexLeftX = w / 2 - apexAxis;
+  const apexRightX = w / 2 + apexAxis;
+  const apexY = apexAxis;
+  const blEdgeX = botAxis;
+  const blEdgeY = h - botAxis;
+  const blBottomX = botInset;
+  const brBottomX = w - botInset;
+  const brEdgeX = w - botAxis;
+  return [
+    `M ${blEdgeX} ${blEdgeY}`,
+    `L ${apexLeftX} ${apexY}`,
+    `A ${r} ${r} 0 0 1 ${apexRightX} ${apexY}`,
+    `L ${brEdgeX} ${blEdgeY}`,
+    `A ${r} ${r} 0 0 1 ${brBottomX} ${h}`,
+    `L ${blBottomX} ${h}`,
+    `A ${r} ${r} 0 0 1 ${blEdgeX} ${blEdgeY}`,
+    "Z"
+  ].join(" ");
+};
 var parseTokenValue53 = (value) => parseFloat(value);
 var StyledRoot15 = styled52__default.default(reactNative.View)(({ rootGap }) => ({
   flexDirection: "column",
@@ -13365,27 +13407,13 @@ var StyledPictureButton = styled52__default.default(reactNative.Pressable)(
     overflow: "hidden"
   })
 );
-var StyledPointerTriangle = styled52__default.default(reactNative.View)(({ pointerColor, pointerVisible }) => ({
-  // 0×0 is part of the RN triangle-via-borders trick, not a layout
-  // dimension. Borders compose into a down-pointing triangle (apex at
-  // bottom) on RN; the `rotate 180deg` transform flips it to apex-up so
-  // the pointer visually connects the selected button to the insight
-  // card below. Using rotate instead of `borderBottom` because RN's
-  // triangle-via-borders rendering is inconsistent when the coloured
-  // border is on the bottom with transparent left/right on certain
-  // platforms.
-  width: 0,
-  height: 0,
-  borderLeftWidth: POINTER_HALF_WIDTH,
-  borderRightWidth: POINTER_HALF_WIDTH,
-  borderTopWidth: POINTER_HEIGHT,
-  borderLeftColor: "transparent",
-  borderRightColor: "transparent",
-  borderTopColor: pointerColor,
-  borderStyle: "solid",
-  transform: [{ rotate: "180deg" }],
-  opacity: pointerVisible ? 1 : 0
-}));
+var StyledPointer = styled52__default.default(Svg__default.default)(
+  ({ pointerVisible }) => ({
+    width: POINTER_WIDTH,
+    height: POINTER_HEIGHT,
+    opacity: pointerVisible ? 1 : 0
+  })
+);
 var PictureSelector = React60__default.default.forwardRef(
   (_a, ref) => {
     var _b = _a, {
@@ -13434,6 +13462,9 @@ var PictureSelector = React60__default.default.forwardRef(
       pictureButton.borderWidth.default
     );
     const borderWidthActive = parseTokenValue53(pictureButton.borderWidth.active);
+    const pointerPath = buildPointerPath(
+      parseTokenValue53(pictureButton.pointer.borderRadius.default)
+    );
     const resolvedMinWidth = itemMinWidth != null ? itemMinWidth : parseTokenValue53(pictureButton.size.minWidth);
     const resolvedMinHeight = itemMinHeight != null ? itemMinHeight : resolvedMinWidth;
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -13457,7 +13488,6 @@ var PictureSelector = React60__default.default.forwardRef(
           /* @__PURE__ */ jsxRuntime.jsx(StyledRow2, { rowGap, children: items.map((item) => {
             const isSelected = item.value === selectedValue;
             const Visual = item.illustration;
-            const IconComp = item.icon;
             const buttonProps = {
               buttonBorderRadius,
               buttonBorderWidth: isSelected ? borderWidthActive : borderWidthDefault,
@@ -13486,14 +13516,23 @@ var PictureSelector = React60__default.default.forwardRef(
                     if (!item.disabled) handleSelect(item.value);
                   }
                 }, buttonProps), {
-                  children: Visual ? /* @__PURE__ */ jsxRuntime.jsx(Illustration, { illustration: Visual, size: "sm" }) : IconComp ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: IconComp, size: "2xl" }) : null
+                  children: Visual ? /* @__PURE__ */ jsxRuntime.jsx(Illustration, { illustration: Visual, size: "xl" }) : null
                 })
               ),
               /* @__PURE__ */ jsxRuntime.jsx(
-                StyledPointerTriangle,
+                StyledPointer,
                 {
-                  pointerColor: pictureButton.colour.pointer.default,
-                  pointerVisible: isSelected && hasInsight
+                  pointerVisible: isSelected && hasInsight,
+                  width: POINTER_WIDTH,
+                  height: POINTER_HEIGHT,
+                  viewBox: `0 0 ${POINTER_WIDTH} ${POINTER_HEIGHT}`,
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    Svg.Path,
+                    {
+                      d: pointerPath,
+                      fill: pictureButton.colour.pointer.default
+                    }
+                  )
                 }
               )
             ] }, item.value);