@butternutbox/pawprint-native 0.5.0 → 0.6.0

package/dist/index.d.cts

@@ -1346,6 +1346,7 @@ type RadioOwnProps = {
     label?: React.ReactNode;
     subText?: React.ReactNode;
     asset?: IllustrationProps;
+    tag?: TagProps;
     disabled?: boolean;
     selected?: boolean;
     onSelect?: (value: string) => void;
@@ -1359,6 +1360,7 @@ type RadioProps = RadioOwnProps & Omit<PressableProps, keyof RadioOwnProps | "ch
  * @param {React.ReactNode} [label] - Main label text or content.
  * @param {React.ReactNode} [subText] - Optional descriptive subtext.
  * @param {IllustrationProps} [asset] - Optional illustration asset for tile variant.
+ * @param {TagProps} [tag] - Optional tag rendered below the label/subtext. Accepts the full Tag API (variant, icon, size). Hidden when omitted.
  * @param {boolean} [disabled=false] - Whether the radio is disabled.
  * @param {boolean} [selected=false] - Whether the radio is currently selected.
  * @param {(value: string) => void} [onSelect] - Callback when radio is selected.
@@ -1614,7 +1616,11 @@ type InlineVariantProps = BaseProps & {
     title?: string;
     onClose?: () => void;
     size?: never;
-    link?: never;
+    link?: {
+        label: string;
+        href?: string;
+        onPress?: () => void;
+    };
 };
 type ToastVariantProps = BaseProps & {
     variant: "toast";
@@ -1632,7 +1638,11 @@ type SystemVariantProps = BaseProps & {
     size?: NotificationSize;
     title?: never;
     onClose?: never;
-    link?: never;
+    link?: {
+        label: string;
+        href?: string;
+        onPress?: () => void;
+    };
 };
 type NotificationOwnProps = InlineVariantProps | ToastVariantProps | SystemVariantProps;
 type NotificationProps = NotificationOwnProps & Omit<ViewProps, keyof NotificationOwnProps>;
@@ -1641,7 +1651,7 @@ type NotificationProps = NotificationOwnProps & Omit<ViewProps, keyof Notificati
  * variants — inline (within content flow), toast (floating overlay), and
  * system (full-width banner) — each with four severity types.
  *
- * Note: Unlike the web version, toast link uses `onPress` callback instead
+ * Note: Unlike the web version, links use `onPress` callback instead
  * of `href` for navigation. The `href` prop is also available and opens
  * the URL via `Linking`.
  *
@@ -1650,7 +1660,7 @@ type NotificationProps = NotificationOwnProps & Omit<ViewProps, keyof Notificati
  * @param {boolean} [showIcon=true] - Whether to show the status icon.
  * @param {string} [title] - Optional headline (inline variant only).
  * @param {() => void} [onClose] - Close callback (inline and toast variants).
- * @param {{ label: string; href?: string; onPress?: () => void }} [link] - Optional action link (toast variant only).
+ * @param {{ label: string; href?: string; onPress?: () => void }} [link] - Optional action link (all variants).
  * @param {"sm" | "lg"} [size="sm"] - Size variant (system variant only).
  * @param {React.ReactNode} children - The notification body text.
  *

package/dist/index.d.ts

@@ -1346,6 +1346,7 @@ type RadioOwnProps = {
     label?: React.ReactNode;
     subText?: React.ReactNode;
     asset?: IllustrationProps;
+    tag?: TagProps;
     disabled?: boolean;
     selected?: boolean;
     onSelect?: (value: string) => void;
@@ -1359,6 +1360,7 @@ type RadioProps = RadioOwnProps & Omit<PressableProps, keyof RadioOwnProps | "ch
  * @param {React.ReactNode} [label] - Main label text or content.
  * @param {React.ReactNode} [subText] - Optional descriptive subtext.
  * @param {IllustrationProps} [asset] - Optional illustration asset for tile variant.
+ * @param {TagProps} [tag] - Optional tag rendered below the label/subtext. Accepts the full Tag API (variant, icon, size). Hidden when omitted.
  * @param {boolean} [disabled=false] - Whether the radio is disabled.
  * @param {boolean} [selected=false] - Whether the radio is currently selected.
  * @param {(value: string) => void} [onSelect] - Callback when radio is selected.
@@ -1614,7 +1616,11 @@ type InlineVariantProps = BaseProps & {
     title?: string;
     onClose?: () => void;
     size?: never;
-    link?: never;
+    link?: {
+        label: string;
+        href?: string;
+        onPress?: () => void;
+    };
 };
 type ToastVariantProps = BaseProps & {
     variant: "toast";
@@ -1632,7 +1638,11 @@ type SystemVariantProps = BaseProps & {
     size?: NotificationSize;
     title?: never;
     onClose?: never;
-    link?: never;
+    link?: {
+        label: string;
+        href?: string;
+        onPress?: () => void;
+    };
 };
 type NotificationOwnProps = InlineVariantProps | ToastVariantProps | SystemVariantProps;
 type NotificationProps = NotificationOwnProps & Omit<ViewProps, keyof NotificationOwnProps>;
@@ -1641,7 +1651,7 @@ type NotificationProps = NotificationOwnProps & Omit<ViewProps, keyof Notificati
  * variants — inline (within content flow), toast (floating overlay), and
  * system (full-width banner) — each with four severity types.
  *
- * Note: Unlike the web version, toast link uses `onPress` callback instead
+ * Note: Unlike the web version, links use `onPress` callback instead
  * of `href` for navigation. The `href` prop is also available and opens
  * the URL via `Linking`.
  *
@@ -1650,7 +1660,7 @@ type NotificationProps = NotificationOwnProps & Omit<ViewProps, keyof Notificati
  * @param {boolean} [showIcon=true] - Whether to show the status icon.
  * @param {string} [title] - Optional headline (inline variant only).
  * @param {() => void} [onClose] - Close callback (inline and toast variants).
- * @param {{ label: string; href?: string; onPress?: () => void }} [link] - Optional action link (toast variant only).
+ * @param {{ label: string; href?: string; onPress?: () => void }} [link] - Optional action link (all variants).
  * @param {"sm" | "lg"} [size="sm"] - Size variant (system variant only).
  * @param {React.ReactNode} children - The notification body text.
  *

package/dist/index.js

@@ -8756,6 +8756,7 @@ DrawerOverlay.displayName = "Drawer.Overlay";
 var DrawerDragContext = React60.createContext(null);
 var useDrawerDragContext = () => React60.useContext(DrawerDragContext);
 var DrawerFooterContext = React60.createContext(false);
+var useDrawerFooterContext = () => React60.useContext(DrawerFooterContext);
 var DrawerHeaderContext = React60.createContext(null);
 var useDrawerHeaderContext = () => React60.useContext(DrawerHeaderContext);
 var OPEN_DURATION = 320;
@@ -9282,12 +9283,22 @@ var DrawerDescription = React60.forwardRef(
 );
 DrawerDescription.displayName = "Drawer.Description";
 var parseTokenValue26 = (value) => parseFloat(value);
-var StyledScrollView = styled60(ScrollView)(({ bodyPaddingHorizontal, bodyPaddingRight, bodyGap }) => ({
-  flex: 1,
-  paddingLeft: bodyPaddingHorizontal,
-  paddingRight: bodyPaddingRight,
-  gap: bodyGap
-}));
+var StyledScrollView = styled60(ScrollView)(
+  ({
+    bodyPaddingHorizontal,
+    bodyPaddingRight,
+    bodyGap,
+    bodyMaxHeight,
+    bodyPaddingBottom
+  }) => ({
+    flex: 1,
+    paddingLeft: bodyPaddingHorizontal,
+    paddingRight: bodyPaddingRight,
+    gap: bodyGap,
+    maxHeight: bodyMaxHeight,
+    paddingBottom: bodyPaddingBottom
+  })
+);
 var DrawerBody = React60.forwardRef(
   (_a, ref) => {
     var _b = _a, { children, contentContainerStyle } = _b, props = __objRest(_b, ["children", "contentContainerStyle"]);
@@ -9296,10 +9307,14 @@ var DrawerBody = React60.forwardRef(
     const { buttons } = theme2.tokens.components;
     const { content } = spacing;
     const headerContext = useDrawerHeaderContext();
+    const footerContext = useDrawerFooterContext();
+    const { height: windowHeight } = useWindowDimensions();
     const gap = parseTokenValue26(content.slot.gap);
     const horizontalPadding = parseTokenValue26(content.slot.horizontalPadding);
     const topPadding = parseTokenValue26(content.slot.verticalPadding);
+    const bodyMaxHeight = windowHeight - 300;
     const paddingRight = headerContext === null ? parseTokenValue26(spacing.close.right.md) + parseTokenValue26(buttons.size.sm.height) : horizontalPadding;
+    const bodyPaddingBottom = !footerContext ? parseTokenValue26(theme2.tokens.semantics.dimensions.spacing["2xl"]) : 0;
     return /* @__PURE__ */ jsx(
       StyledScrollView,
       __spreadProps(__spreadValues({
@@ -9307,6 +9322,8 @@ var DrawerBody = React60.forwardRef(
         bodyPaddingHorizontal: horizontalPadding,
         bodyPaddingRight: paddingRight,
         bodyGap: gap,
+        bodyMaxHeight,
+        bodyPaddingBottom,
         contentContainerStyle: [
           {
             gap,
@@ -9440,7 +9457,8 @@ var StyledDockRoot = styled60(View)(
     dockBgColor,
     dockBorderTopWidth,
     dockBorderTopColor,
-    dockPaddingVertical
+    dockPaddingVertical,
+    dockPaddingHorizontal
   }) => ({
     alignItems: "center",
     justifyContent: "center",
@@ -9448,7 +9466,8 @@ var StyledDockRoot = styled60(View)(
     backgroundColor: dockBgColor,
     borderTopWidth: dockBorderTopWidth,
     borderTopColor: dockBorderTopColor,
-    paddingVertical: dockPaddingVertical
+    paddingVertical: dockPaddingVertical,
+    paddingHorizontal: dockPaddingHorizontal
   })
 );
 var StyledStackedInner = styled60(View)(
@@ -9485,6 +9504,9 @@ var ButtonDock = React60.forwardRef(
         dockBorderTopColor: buttonDock.colour.border,
         dockPaddingVertical: parseTokenValue28(
           buttonDock.spacing[variant].mobile.topPadding
+        ),
+        dockPaddingHorizontal: parseTokenValue28(
+          buttonDock.spacing[variant].mobile.horizontalPadding
         )
       }, rest), {
         children: isStacked ? /* @__PURE__ */ jsxs(
@@ -9519,7 +9541,7 @@ var ButtonDock = React60.forwardRef(
           {
             groupDirection: "row",
             groupAlign: "center",
-            groupJustify: "space-around",
+            groupJustify: "space-between",
             groupGap,
             children
           }
@@ -10855,6 +10877,12 @@ var StyledTextContent = styled60(View)(({ textContentGap }) => ({
 var StyledAssetWrapper = styled60(View)({
   alignSelf: "center"
 });
+var StyledTagWrapper = styled60(View)(
+  ({ tagTopPadding }) => ({
+    alignItems: "flex-start",
+    paddingTop: tagTopPadding
+  })
+);
 var Radio = React60.forwardRef(
   (_a, ref) => {
     var _b = _a, {
@@ -10862,6 +10890,7 @@ var Radio = React60.forwardRef(
       label,
       subText,
       asset,
+      tag,
       disabled = false,
       value,
       selected = false,
@@ -10872,6 +10901,7 @@ var Radio = React60.forwardRef(
       "label",
       "subText",
       "asset",
+      "tag",
       "disabled",
       "value",
       "selected",
@@ -10926,7 +10956,7 @@ var Radio = React60.forwardRef(
               )
             }
           ),
-          (label || subText) && /* @__PURE__ */ jsxs(
+          (label || subText || tag) && /* @__PURE__ */ jsxs(
             StyledTextContent,
             {
               textContentGap: parseTokenValue40(spacing.content.gap),
@@ -10939,6 +10969,13 @@ var Radio = React60.forwardRef(
                     color: colour.text.subtext,
                     children: subText
                   }
+                ),
+                tag && /* @__PURE__ */ jsx(
+                  StyledTagWrapper,
+                  {
+                    tagTopPadding: parseTokenValue40(spacing.content.tag.topPadding),
+                    children: /* @__PURE__ */ jsx(Tag, __spreadValues({}, tag))
+                  }
                 )
               ]
             }
@@ -12389,14 +12426,26 @@ var Notification = React60.forwardRef(
                 "aria-label": type
               }
             ),
-            /* @__PURE__ */ jsx(
-              Typography,
-              {
-                token: systemNotifications.notifications.typography.default,
-                color: systemNotifications.notification.colour.text.default,
-                children
-              }
-            )
+            /* @__PURE__ */ jsxs(View, { style: { flexDirection: "column", gap: 8, flex: 1 }, children: [
+              /* @__PURE__ */ jsx(
+                Typography,
+                {
+                  token: systemNotifications.notifications.typography.default,
+                  color: systemNotifications.notification.colour.text.default,
+                  children
+                }
+              ),
+              link && /* @__PURE__ */ jsx(
+                Link,
+                {
+                  href: link.href,
+                  onPress: link.onPress,
+                  weight: "semiBold",
+                  size: "md",
+                  children: link.label
+                }
+              )
+            ] })
           ]
         })
       );
@@ -12490,41 +12539,59 @@ var Notification = React60.forwardRef(
         rootBgColor: bgMap[type]
       }, rest), {
         children: [
-          /* @__PURE__ */ jsx(StyledContents, { contentsGap: parseTokenValue49(content.spacing.gap), children: /* @__PURE__ */ jsxs(StyledCopyRow, { copyGap: parseTokenValue49(content.spacing.gap), children: [
-            showIcon && /* @__PURE__ */ jsx(
-              Icon,
-              {
-                icon: IconComponent,
-                size: "md",
-                colour: type,
-                "aria-label": type
-              }
-            ),
-            /* @__PURE__ */ jsxs(
-              StyledInlineCopy,
+          /* @__PURE__ */ jsxs(StyledContents, { contentsGap: parseTokenValue49(content.spacing.gap), children: [
+            /* @__PURE__ */ jsxs(StyledCopyRow, { copyGap: parseTokenValue49(content.spacing.gap), children: [
+              showIcon && /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  icon: IconComponent,
+                  size: "md",
+                  colour: type,
+                  "aria-label": type
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                StyledInlineCopy,
+                {
+                  copyGap: parseTokenValue49(content.copy.spacing.gap),
+                  children: [
+                    title && /* @__PURE__ */ jsx(
+                      Typography,
+                      {
+                        token: notifications.typography.title,
+                        color: colour.text.title,
+                        children: title
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      Typography,
+                      {
+                        token: notifications.typography.body,
+                        color: colour.text.body,
+                        children
+                      }
+                    )
+                  ]
+                }
+              )
+            ] }),
+            link && /* @__PURE__ */ jsx(
+              StyledLinkWrapper,
               {
-                copyGap: parseTokenValue49(content.copy.spacing.gap),
-                children: [
-                  title && /* @__PURE__ */ jsx(
-                    Typography,
-                    {
-                      token: notifications.typography.title,
-                      color: colour.text.title,
-                      children: title
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    Typography,
-                    {
-                      token: notifications.typography.body,
-                      color: colour.text.body,
-                      children
-                    }
-                  )
-                ]
+                linkPaddingLeft: parseTokenValue49(content.copy.spacing.gap),
+                children: /* @__PURE__ */ jsx(
+                  Link,
+                  {
+                    href: link.href,
+                    onPress: link.onPress,
+                    weight: "semiBold",
+                    size: "md",
+                    children: link.label
+                  }
+                )
               }
             )
-          ] }) }),
+          ] }),
           onClose && /* @__PURE__ */ jsx(
             StyledCloseButton,
             {