@butternutbox/pawprint-native 0.5.0 → 0.6.0

package/.turbo/turbo-build.log

@@ -15,16 +15,16 @@
 ESM dist/ibm-plex-sans-condensed-700-normal-4PFYFTSO.woff2 18.90 KB
 ESM dist/index.js                                          1.70 MB
 ESM dist/index.js.map                                      2.65 MB
-ESM ⚡️ Build success in 11263ms
+ESM ⚡️ Build success in 11379ms
 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
 CJS dist/ibm-plex-sans-condensed-500-normal-IEQBNVGX.woff2 19.48 KB
 CJS dist/ibm-plex-sans-condensed-600-normal-UX5ZU5T6.woff2 19.35 KB
 CJS dist/ibm-plex-sans-condensed-700-normal-4PFYFTSO.woff2 18.90 KB
-CJS dist/index.cjs                                         1.77 MB
+CJS dist/index.cjs                                         1.78 MB
 CJS dist/index.cjs.map                                     2.65 MB
-CJS ⚡️ Build success in 11267ms
-DTS ⚡️ Build success in 22041ms
-DTS dist/index.d.cts 88.44 KB
-DTS dist/index.d.ts  88.44 KB
+CJS ⚡️ Build success in 11384ms
+DTS ⚡️ Build success in 21658ms
+DTS dist/index.d.cts 88.74 KB
+DTS dist/index.d.ts  88.74 KB

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @butternutbox/pawprint-native
 
+## 0.6.0
+
+### Minor Changes
+
+- 9ea6d92: Add optional `tag` prop to Radio (web + native). Renders a Tag below the label/subtext using the `radio.spacing.content.tag.topPadding` token, and passes through the full Tag API (variant, icon, size). The tag is hidden when the prop is omitted.
+
+### Patch Changes
+
+- 924acde: Apply ButtonDock horizontal padding tokens and fix inline variant alignment to space-between
+- a164330: allow all notification variants to accept link prop
+
+## 0.5.1
+
+### Patch Changes
+
+- 4e3a96a: fix drawer layour for mobile devices'
+
 ## 0.5.0
 
 ### Minor Changes

package/dist/index.cjs

@@ -8789,6 +8789,7 @@ DrawerOverlay.displayName = "Drawer.Overlay";
 var DrawerDragContext = React60__default.default.createContext(null);
 var useDrawerDragContext = () => React60__default.default.useContext(DrawerDragContext);
 var DrawerFooterContext = React60__default.default.createContext(false);
+var useDrawerFooterContext = () => React60__default.default.useContext(DrawerFooterContext);
 var DrawerHeaderContext = React60__default.default.createContext(null);
 var useDrawerHeaderContext = () => React60__default.default.useContext(DrawerHeaderContext);
 var OPEN_DURATION = 320;
@@ -9315,12 +9316,22 @@ var DrawerDescription = React60__default.default.forwardRef(
 );
 DrawerDescription.displayName = "Drawer.Description";
 var parseTokenValue26 = (value) => parseFloat(value);
-var StyledScrollView = styled60__default.default(reactNative.ScrollView)(({ bodyPaddingHorizontal, bodyPaddingRight, bodyGap }) => ({
-  flex: 1,
-  paddingLeft: bodyPaddingHorizontal,
-  paddingRight: bodyPaddingRight,
-  gap: bodyGap
-}));
+var StyledScrollView = styled60__default.default(reactNative.ScrollView)(
+  ({
+    bodyPaddingHorizontal,
+    bodyPaddingRight,
+    bodyGap,
+    bodyMaxHeight,
+    bodyPaddingBottom
+  }) => ({
+    flex: 1,
+    paddingLeft: bodyPaddingHorizontal,
+    paddingRight: bodyPaddingRight,
+    gap: bodyGap,
+    maxHeight: bodyMaxHeight,
+    paddingBottom: bodyPaddingBottom
+  })
+);
 var DrawerBody = React60__default.default.forwardRef(
   (_a, ref) => {
     var _b = _a, { children, contentContainerStyle } = _b, props = __objRest(_b, ["children", "contentContainerStyle"]);
@@ -9329,10 +9340,14 @@ var DrawerBody = React60__default.default.forwardRef(
     const { buttons } = theme2.tokens.components;
     const { content } = spacing;
     const headerContext = useDrawerHeaderContext();
+    const footerContext = useDrawerFooterContext();
+    const { height: windowHeight } = reactNative.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__ */ jsxRuntime.jsx(
       StyledScrollView,
       __spreadProps(__spreadValues({
@@ -9340,6 +9355,8 @@ var DrawerBody = React60__default.default.forwardRef(
         bodyPaddingHorizontal: horizontalPadding,
         bodyPaddingRight: paddingRight,
         bodyGap: gap,
+        bodyMaxHeight,
+        bodyPaddingBottom,
         contentContainerStyle: [
           {
             gap,
@@ -9473,7 +9490,8 @@ var StyledDockRoot = styled60__default.default(reactNative.View)(
     dockBgColor,
     dockBorderTopWidth,
     dockBorderTopColor,
-    dockPaddingVertical
+    dockPaddingVertical,
+    dockPaddingHorizontal
   }) => ({
     alignItems: "center",
     justifyContent: "center",
@@ -9481,7 +9499,8 @@ var StyledDockRoot = styled60__default.default(reactNative.View)(
     backgroundColor: dockBgColor,
     borderTopWidth: dockBorderTopWidth,
     borderTopColor: dockBorderTopColor,
-    paddingVertical: dockPaddingVertical
+    paddingVertical: dockPaddingVertical,
+    paddingHorizontal: dockPaddingHorizontal
   })
 );
 var StyledStackedInner = styled60__default.default(reactNative.View)(
@@ -9518,6 +9537,9 @@ var ButtonDock = React60__default.default.forwardRef(
         dockBorderTopColor: buttonDock.colour.border,
         dockPaddingVertical: parseTokenValue28(
           buttonDock.spacing[variant].mobile.topPadding
+        ),
+        dockPaddingHorizontal: parseTokenValue28(
+          buttonDock.spacing[variant].mobile.horizontalPadding
         )
       }, rest), {
         children: isStacked ? /* @__PURE__ */ jsxRuntime.jsxs(
@@ -9552,7 +9574,7 @@ var ButtonDock = React60__default.default.forwardRef(
           {
             groupDirection: "row",
             groupAlign: "center",
-            groupJustify: "space-around",
+            groupJustify: "space-between",
             groupGap,
             children
           }
@@ -10888,6 +10910,12 @@ var StyledTextContent = styled60__default.default(reactNative.View)(({ textConte
 var StyledAssetWrapper = styled60__default.default(reactNative.View)({
   alignSelf: "center"
 });
+var StyledTagWrapper = styled60__default.default(reactNative.View)(
+  ({ tagTopPadding }) => ({
+    alignItems: "flex-start",
+    paddingTop: tagTopPadding
+  })
+);
 var Radio = React60__default.default.forwardRef(
   (_a, ref) => {
     var _b = _a, {
@@ -10895,6 +10923,7 @@ var Radio = React60__default.default.forwardRef(
       label,
       subText,
       asset,
+      tag,
       disabled = false,
       value,
       selected = false,
@@ -10905,6 +10934,7 @@ var Radio = React60__default.default.forwardRef(
       "label",
       "subText",
       "asset",
+      "tag",
       "disabled",
       "value",
       "selected",
@@ -10959,7 +10989,7 @@ var Radio = React60__default.default.forwardRef(
               )
             }
           ),
-          (label || subText) && /* @__PURE__ */ jsxRuntime.jsxs(
+          (label || subText || tag) && /* @__PURE__ */ jsxRuntime.jsxs(
             StyledTextContent,
             {
               textContentGap: parseTokenValue40(spacing.content.gap),
@@ -10972,6 +11002,13 @@ var Radio = React60__default.default.forwardRef(
                     color: colour.text.subtext,
                     children: subText
                   }
+                ),
+                tag && /* @__PURE__ */ jsxRuntime.jsx(
+                  StyledTagWrapper,
+                  {
+                    tagTopPadding: parseTokenValue40(spacing.content.tag.topPadding),
+                    children: /* @__PURE__ */ jsxRuntime.jsx(Tag, __spreadValues({}, tag))
+                  }
                 )
               ]
             }
@@ -12422,14 +12459,26 @@ var Notification = React60__default.default.forwardRef(
                 "aria-label": type
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              Typography,
-              {
-                token: systemNotifications.notifications.typography.default,
-                color: systemNotifications.notification.colour.text.default,
-                children
-              }
-            )
+            /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: { flexDirection: "column", gap: 8, flex: 1 }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Typography,
+                {
+                  token: systemNotifications.notifications.typography.default,
+                  color: systemNotifications.notification.colour.text.default,
+                  children
+                }
+              ),
+              link && /* @__PURE__ */ jsxRuntime.jsx(
+                Link,
+                {
+                  href: link.href,
+                  onPress: link.onPress,
+                  weight: "semiBold",
+                  size: "md",
+                  children: link.label
+                }
+              )
+            ] })
           ]
         })
       );
@@ -12523,41 +12572,59 @@ var Notification = React60__default.default.forwardRef(
         rootBgColor: bgMap[type]
       }, rest), {
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(StyledContents, { contentsGap: parseTokenValue49(content.spacing.gap), children: /* @__PURE__ */ jsxRuntime.jsxs(StyledCopyRow, { copyGap: parseTokenValue49(content.spacing.gap), children: [
-            showIcon && /* @__PURE__ */ jsxRuntime.jsx(
-              Icon,
-              {
-                icon: IconComponent,
-                size: "md",
-                colour: type,
-                "aria-label": type
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsxs(
-              StyledInlineCopy,
+          /* @__PURE__ */ jsxRuntime.jsxs(StyledContents, { contentsGap: parseTokenValue49(content.spacing.gap), children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(StyledCopyRow, { copyGap: parseTokenValue49(content.spacing.gap), children: [
+              showIcon && /* @__PURE__ */ jsxRuntime.jsx(
+                Icon,
+                {
+                  icon: IconComponent,
+                  size: "md",
+                  colour: type,
+                  "aria-label": type
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                StyledInlineCopy,
+                {
+                  copyGap: parseTokenValue49(content.copy.spacing.gap),
+                  children: [
+                    title && /* @__PURE__ */ jsxRuntime.jsx(
+                      Typography,
+                      {
+                        token: notifications.typography.title,
+                        color: colour.text.title,
+                        children: title
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      Typography,
+                      {
+                        token: notifications.typography.body,
+                        color: colour.text.body,
+                        children
+                      }
+                    )
+                  ]
+                }
+              )
+            ] }),
+            link && /* @__PURE__ */ jsxRuntime.jsx(
+              StyledLinkWrapper,
               {
-                copyGap: parseTokenValue49(content.copy.spacing.gap),
-                children: [
-                  title && /* @__PURE__ */ jsxRuntime.jsx(
-                    Typography,
-                    {
-                      token: notifications.typography.title,
-                      color: colour.text.title,
-                      children: title
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    Typography,
-                    {
-                      token: notifications.typography.body,
-                      color: colour.text.body,
-                      children
-                    }
-                  )
-                ]
+                linkPaddingLeft: parseTokenValue49(content.copy.spacing.gap),
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  Link,
+                  {
+                    href: link.href,
+                    onPress: link.onPress,
+                    weight: "semiBold",
+                    size: "md",
+                    children: link.label
+                  }
+                )
               }
             )
-          ] }) }),
+          ] }),
           onClose && /* @__PURE__ */ jsxRuntime.jsx(
             StyledCloseButton,
             {