@butternutbox/pawprint-native 0.1.0 → 0.2.0

package/dist/index.d.cts

@@ -392,7 +392,7 @@ type IconButtonProps = IconButtonOwnProps & Omit<PressableProps, keyof IconButto
  */
 declare const IconButton: React.ForwardRefExoticComponent<IconButtonOwnProps & Omit<PressableProps, "children" | keyof IconButtonOwnProps> & React.RefAttributes<View>>;
 
-type IllustrationSize = "sm" | "lg";
+type IllustrationSize = "sm" | "lg" | "xl";
 type PawprintIllustration$2 = React.ComponentType<{
     width?: number;
     height?: number;
@@ -415,7 +415,7 @@ type IllustrationProps = IllustrationOwnProps & Omit<ViewProps, keyof Illustrati
  * ```
  *
  * @param illustration - **(required)** Illustration component
- * @param size - *(optional)* Size variant: sm (default), lg
+ * @param size - *(optional)* Size variant: sm (default), lg, xl
  * @param aria-label - *(optional)* Accessible label
  */
 declare const Illustration: React.ForwardRefExoticComponent<IllustrationOwnProps & Omit<ViewProps, keyof IllustrationOwnProps> & React.RefAttributes<View>>;
@@ -1828,7 +1828,6 @@ type PawprintIllustration = React.ComponentType<{
 type PictureSelectorItem = {
     value: string;
     illustration?: PawprintIllustration;
-    icon?: PawprintIcon;
     disabled?: boolean;
     ariaLabel?: string;
     insightTitle?: string;

package/dist/index.d.ts

@@ -392,7 +392,7 @@ type IconButtonProps = IconButtonOwnProps & Omit<PressableProps, keyof IconButto
  */
 declare const IconButton: React.ForwardRefExoticComponent<IconButtonOwnProps & Omit<PressableProps, "children" | keyof IconButtonOwnProps> & React.RefAttributes<View>>;
 
-type IllustrationSize = "sm" | "lg";
+type IllustrationSize = "sm" | "lg" | "xl";
 type PawprintIllustration$2 = React.ComponentType<{
     width?: number;
     height?: number;
@@ -415,7 +415,7 @@ type IllustrationProps = IllustrationOwnProps & Omit<ViewProps, keyof Illustrati
  * ```
  *
  * @param illustration - **(required)** Illustration component
- * @param size - *(optional)* Size variant: sm (default), lg
+ * @param size - *(optional)* Size variant: sm (default), lg, xl
  * @param aria-label - *(optional)* Accessible label
  */
 declare const Illustration: React.ForwardRefExoticComponent<IllustrationOwnProps & Omit<ViewProps, keyof IllustrationOwnProps> & React.RefAttributes<View>>;
@@ -1828,7 +1828,6 @@ type PawprintIllustration = React.ComponentType<{
 type PictureSelectorItem = {
     value: string;
     illustration?: PawprintIllustration;
-    icon?: PawprintIcon;
     disabled?: boolean;
     ariaLabel?: string;
     insightTitle?: string;

package/dist/index.js

@@ -13,7 +13,7 @@ import { Slot } from '@rn-primitives/slot';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import * as CheckboxPrimitive from '@rn-primitives/checkbox';
 import * as ProgressPrimitive from '@rn-primitives/progress';
-import Svg, { Defs, LinearGradient, Stop, Rect } from 'react-native-svg';
+import Svg, { Path, Defs, LinearGradient, Stop, Rect } from 'react-native-svg';
 import * as SelectPrimitive3 from '@rn-primitives/select';
 import * as SliderPrimitive from '@rn-primitives/slider';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
@@ -4424,7 +4424,7 @@ var Illustration = React60.forwardRef(
         accessibilityLabel: ariaLabel,
         accessible: !!ariaLabel
       }, rest), {
-        children: /* @__PURE__ */ jsx(IllustrationComponent, { height: dimension })
+        children: /* @__PURE__ */ jsx(IllustrationComponent, { width: dimension, height: dimension })
       })
     );
   }
@@ -4490,6 +4490,7 @@ ForwardRef710.category = "core";
 var ArrowForward = (props, ref) => /* @__PURE__ */ 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__ */ 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 = forwardRef(ArrowForward);
 ForwardRef810.category = "core";
+var ArrowForward_default = ForwardRef810;
 var ArrowLeft = (props, ref) => /* @__PURE__ */ 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__ */ 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 = forwardRef(ArrowLeft);
 ForwardRef910.category = "core";
@@ -4998,11 +4999,11 @@ var Link = React60.forwardRef(
             }
           ),
           standalone && /* @__PURE__ */ 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
             }
           )
         ] })
@@ -7678,9 +7679,13 @@ var StyledControlTrack = styled52(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"
   })
 );
@@ -7720,9 +7725,9 @@ var Switch = React60.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 = useRef(new Animated.Value(isChecked ? 1 : 0)).current;
     useEffect(() => {
       Animated.timing(animValue, {
@@ -7733,7 +7738,7 @@ var Switch = React60.forwardRef(
     }, [isChecked, animValue]);
     const thumbTranslateX = animValue.interpolate({
       inputRange: [0, 1],
-      outputRange: [inset, inset + translateX + 3]
+      outputRange: [offTranslateX, onTranslateX]
     });
     const handleCheckedChange = (checked) => {
       if (!isControlled) {
@@ -9306,12 +9311,14 @@ var StyledDockRoot = styled52(View)(
     paddingVertical: dockPaddingVertical
   })
 );
-var StyledStackedInner = styled52(View)({
-  alignItems: "center",
-  gap: 16,
-  width: "100%",
-  maxWidth: 520
-});
+var StyledStackedInner = styled52(View)(
+  ({ innerGap }) => ({
+    alignItems: "center",
+    gap: innerGap,
+    width: "100%",
+    maxWidth: 520
+  })
+);
 var StyledButtonGroup = styled52(View)(({ groupDirection, groupAlign, groupJustify, groupGap }) => __spreadValues({
   flexDirection: groupDirection,
   alignItems: groupAlign,
@@ -9324,7 +9331,7 @@ var ButtonDock = React60.forwardRef(
     var _b = _a, { variant = "stacked", leadingContent, description, children } = _b, rest = __objRest(_b, ["variant", "leadingContent", "description", "children"]);
     const theme2 = 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
@@ -9337,32 +9344,37 @@ var ButtonDock = React60.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__ */ jsxs(StyledStackedInner, { children: [
-          leadingContent,
-          /* @__PURE__ */ jsx(
-            StyledButtonGroup,
-            {
-              groupDirection: "column",
-              groupAlign: "stretch",
-              groupJustify: "center",
-              groupGap,
-              children
-            }
-          ),
-          description && /* @__PURE__ */ jsx(
-            Typography,
-            {
-              variant: "body",
-              size: "md",
-              weight: "medium",
-              align: "center",
-              children: typeof description === "string" ? description : description
-            }
-          )
-        ] }) : /* @__PURE__ */ jsx(
+        children: isStacked ? /* @__PURE__ */ jsxs(
+          StyledStackedInner,
+          {
+            innerGap: parseTokenValue28(buttonGroup.spacing.gap),
+            children: [
+              leadingContent,
+              /* @__PURE__ */ jsx(
+                StyledButtonGroup,
+                {
+                  groupDirection: "column",
+                  groupAlign: "stretch",
+                  groupJustify: "center",
+                  groupGap,
+                  children
+                }
+              ),
+              description && /* @__PURE__ */ jsx(
+                Typography,
+                {
+                  token: typography.body.medium.md,
+                  color: buttonGroup.colour.text,
+                  align: "center",
+                  children: description
+                }
+              )
+            ]
+          }
+        ) : /* @__PURE__ */ jsx(
           StyledButtonGroup,
           {
             groupDirection: "row",
@@ -9814,7 +9826,6 @@ var StyledItem2 = styled52(Pressable)(
     itemHeight,
     itemMinWidth,
     itemPaddingH,
-    itemPaddingV,
     itemBorderRadius,
     itemBgColor,
     itemOpacity,
@@ -9826,7 +9837,10 @@ var StyledItem2 = styled52(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,
@@ -9879,7 +9893,6 @@ var FilterTabItem = React60.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,
@@ -10350,20 +10363,21 @@ var StyledErrorRow2 = styled52(View)(({ gap }) => ({
 var PasswordFieldError = React60.forwardRef((_a, ref) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
   const theme2 = useTheme();
-  const { colour, description, spacing } = theme2.tokens.components.inputs;
+  const { listItem } = theme2.tokens.components.validationList;
+  const { typography } = theme2.tokens.semantics;
   return /* @__PURE__ */ jsxs(
     StyledErrorRow2,
     __spreadProps(__spreadValues({
       ref,
-      gap: parseTokenValue36(spacing.description.leftPadding)
+      gap: parseTokenValue36(listItem.spacing.gap)
     }, rest), {
       children: [
-        /* @__PURE__ */ jsx(Icon, { icon: Cancel_default, size: "sm", colour: "error" }),
+        /* @__PURE__ */ jsx(Icon, { icon: Cancel_default, size: "xs", customColour: listItem.colour.icon.error }),
         /* @__PURE__ */ jsx(
           Typography,
           {
-            token: description.text.default,
-            color: colour.description.error,
+            token: typography.body.medium.md,
+            color: listItem.colour.text.default,
             children
           }
         )
@@ -10388,7 +10402,8 @@ var StyledRequirementItem = styled52(View)(
 var PasswordFieldRequirements = React60.forwardRef((_a, ref) => {
   var _b = _a, { requirements } = _b, rest = __objRest(_b, ["requirements"]);
   const theme2 = 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;
   }
@@ -10399,28 +10414,28 @@ var PasswordFieldRequirements = React60.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__ */ jsxs(
           StyledRequirementItem,
           {
-            itemGap: parseTokenValue37(spacing.description.leftPadding),
+            itemGap: parseTokenValue37(listItem.spacing.gap),
             children: [
               /* @__PURE__ */ jsx(
                 Icon,
                 {
                   icon: requirement.satisfied ? CheckCircle_default : Cancel_default,
-                  size: "sm",
-                  colour: iconColour
+                  size: "xs",
+                  customColour: iconColour
                 }
               ),
               /* @__PURE__ */ jsx(
                 Typography,
                 {
-                  token: description.text.default,
-                  color: colour.label.default,
+                  token: typography.body.medium.md,
+                  color: listItem.colour.text.default,
                   children: requirement.text
                 }
               )
@@ -13285,8 +13300,35 @@ var DatePicker = React60.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(View)(({ rootGap }) => ({
   flexDirection: "column",
@@ -13333,27 +13375,13 @@ var StyledPictureButton = styled52(Pressable)(
     overflow: "hidden"
   })
 );
-var StyledPointerTriangle = styled52(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(Svg)(
+  ({ pointerVisible }) => ({
+    width: POINTER_WIDTH,
+    height: POINTER_HEIGHT,
+    opacity: pointerVisible ? 1 : 0
+  })
+);
 var PictureSelector = React60.forwardRef(
   (_a, ref) => {
     var _b = _a, {
@@ -13402,6 +13430,9 @@ var PictureSelector = React60.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__ */ jsxs(
@@ -13425,7 +13456,6 @@ var PictureSelector = React60.forwardRef(
           /* @__PURE__ */ 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,
@@ -13454,14 +13484,23 @@ var PictureSelector = React60.forwardRef(
                     if (!item.disabled) handleSelect(item.value);
                   }
                 }, buttonProps), {
-                  children: Visual ? /* @__PURE__ */ jsx(Illustration, { illustration: Visual, size: "sm" }) : IconComp ? /* @__PURE__ */ jsx(Icon, { icon: IconComp, size: "2xl" }) : null
+                  children: Visual ? /* @__PURE__ */ jsx(Illustration, { illustration: Visual, size: "xl" }) : null
                 })
               ),
               /* @__PURE__ */ 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__ */ jsx(
+                    Path,
+                    {
+                      d: pointerPath,
+                      fill: pictureButton.colour.pointer.default
+                    }
+                  )
                 }
               )
             ] }, item.value);