@butternutbox/pawprint-native 0.12.0 → 0.13.1

package/.turbo/turbo-build.log

@@ -7,12 +7,12 @@
 CJS Build start
 ESM Build start
 DTS Build start
-CJS dist/index.cjs     527.12 KB
-CJS dist/index.cjs.map 1.00 MB
-CJS ⚡️ Build success in 7832ms
-ESM dist/index.js     497.76 KB
-ESM dist/index.js.map 1.00 MB
-ESM ⚡️ Build success in 7831ms
-DTS ⚡️ Build success in 23575ms
-DTS dist/index.d.cts 94.46 KB
-DTS dist/index.d.ts  94.46 KB
+ESM dist/index.js     498.99 KB
+ESM dist/index.js.map 1.01 MB
+ESM ⚡️ Build success in 6117ms
+CJS dist/index.cjs     528.39 KB
+CJS dist/index.cjs.map 1.01 MB
+CJS ⚡️ Build success in 6119ms
+DTS ⚡️ Build success in 18337ms
+DTS dist/index.d.cts 94.97 KB
+DTS dist/index.d.ts  94.97 KB

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @butternutbox/pawprint-native
 
+## 0.13.1
+
+### Patch Changes
+
+- e925ae4: Fix `TextArea` rendering entered text in the OS system font instead of the brand font. `StyledTextArea` now resolves `fontFamily`/`fontSize`/`letterSpacing` from the input placeholder typography tokens (matching `Input`'s `StyledInput`), so text areas render in IBM Plex Sans Condensed.
+
+## 0.13.0
+
+### Minor Changes
+
+- 3637663: `CheckboxGroup` with `orientation="horizontal"` now wraps its tiles onto multiple rows and makes them hug their content, so checkbox tiles can sit side by side. Adds a `fitContent` prop to `Checkbox` (tile only) to opt into content-hugging width — the horizontal group sets it automatically. Vertical groups and standalone checkboxes are unchanged.
+
 ## 0.12.0
 
 ### Minor Changes

package/dist/index.cjs

@@ -4728,13 +4728,24 @@ var StyledTextAreaWrapper = styled51__default.default(reactNative.Animated.View)
   };
 });
 var StyledTextArea = styled51__default.default(reactNative.TextInput)(({ theme: theme2 }) => {
-  const { colour } = theme2.tokens.components.inputs;
+  var _a, _b;
+  const { colour, field } = theme2.tokens.components.inputs;
+  const typography = field.placeholder.default;
+  const { fontFamily } = resolveFont(
+    typography.fontFamily,
+    typography.fontWeight
+  );
+  const fontSize = parseTokenValue19(typography.fontSize);
+  const letterSpacing = ((_a = typography.letterSpacing) == null ? void 0 : _a.endsWith("%")) ? parseFloat(typography.letterSpacing) / 100 * fontSize : parseFloat((_b = typography.letterSpacing) != null ? _b : "0");
   return __spreadValues({
     flex: 1,
     minWidth: 0,
     minHeight: 0,
     padding: 0,
     color: colour.field.text.default,
+    fontFamily,
+    fontSize,
+    letterSpacing,
     textAlignVertical: "top"
   }, {
     outlineStyle: "none",
@@ -6367,6 +6378,7 @@ var StyledRootPressable = styled51__default.default(reactNative.Pressable)(
     rootPaddingVertical,
     rootPaddingHorizontal,
     rootMaxWidth,
+    rootFitContent,
     rootBgColor,
     rootBorderWidth,
     rootBorderColor,
@@ -6376,7 +6388,7 @@ var StyledRootPressable = styled51__default.default(reactNative.Pressable)(
     alignItems: rootFlexAlign,
     gap: rootGap,
     opacity: rootOpacity
-  }, rootPaddingVertical !== void 0 ? { paddingVertical: rootPaddingVertical } : {}), rootPaddingHorizontal !== void 0 ? { paddingHorizontal: rootPaddingHorizontal } : {}), rootMaxWidth !== void 0 ? { maxWidth: rootMaxWidth, width: "100%" } : {}), rootBgColor ? { backgroundColor: rootBgColor } : {}), rootBorderWidth !== void 0 ? { borderWidth: rootBorderWidth, borderColor: rootBorderColor } : {}), rootBorderRadius !== void 0 ? { borderRadius: rootBorderRadius } : {})
+  }, rootPaddingVertical !== void 0 ? { paddingVertical: rootPaddingVertical } : {}), rootPaddingHorizontal !== void 0 ? { paddingHorizontal: rootPaddingHorizontal } : {}), rootMaxWidth !== void 0 ? rootFitContent ? { maxWidth: rootMaxWidth, alignSelf: "flex-start" } : { maxWidth: rootMaxWidth, width: "100%" } : {}), rootBgColor ? { backgroundColor: rootBgColor } : {}), rootBorderWidth !== void 0 ? { borderWidth: rootBorderWidth, borderColor: rootBorderColor } : {}), rootBorderRadius !== void 0 ? { borderRadius: rootBorderRadius } : {})
 );
 var StyledControl = styled51__default.default(reactNative.View)(
   ({
@@ -6397,10 +6409,10 @@ var StyledControl = styled51__default.default(reactNative.View)(
     justifyContent: "center"
   })
 );
-var StyledContent2 = styled51__default.default(reactNative.View)(({ contentGap }) => ({
+var StyledContent2 = styled51__default.default(reactNative.View)(({ contentGap, contentFlex }) => ({
   flexDirection: "column",
   gap: contentGap,
-  flex: 1,
+  flex: contentFlex,
   minWidth: 0
 }));
 var StyledIllustration = styled51__default.default(reactNative.View)(({ illustrationSize }) => ({
@@ -6420,6 +6432,7 @@ var Checkbox = React66__default.default.forwardRef(
       defaultChecked = false,
       onCheckedChange,
       disabled = false,
+      fitContent = false,
       style
     } = _b, rest = __objRest(_b, [
       "variant",
@@ -6430,6 +6443,7 @@ var Checkbox = React66__default.default.forwardRef(
       "defaultChecked",
       "onCheckedChange",
       "disabled",
+      "fitContent",
       "style"
     ]);
     const theme2 = react.useTheme();
@@ -6464,6 +6478,7 @@ var Checkbox = React66__default.default.forwardRef(
         rootPaddingVertical: isTile ? parseTokenValue31(checkbox.checkboxTile.spacing.verticalPadding) : void 0,
         rootPaddingHorizontal: isTile ? parseTokenValue31(checkbox.checkboxTile.spacing.horizontalPadding) : void 0,
         rootMaxWidth: isTile ? parseTokenValue31(checkbox.checkboxTile.size.maxWidth) : void 0,
+        rootFitContent: isTile && fitContent,
         rootBgColor: isTile ? isChecked ? checkbox.checkboxTile.colour.background.selected : checkbox.checkboxTile.colour.background.default : void 0,
         rootBorderWidth: isTile ? parseTokenValue31(checkbox.checkboxTile.borderWidth.default) : void 0,
         rootBorderColor: isTile ? isChecked ? checkbox.checkboxTile.colour.border.selected : checkbox.checkboxTile.colour.border.default : void 0,
@@ -6486,6 +6501,7 @@ var Checkbox = React66__default.default.forwardRef(
             StyledContent2,
             {
               contentGap: parseTokenValue31(checkbox.spacing.content.gap),
+              contentFlex: isTile && fitContent ? 0 : 1,
               children: [
                 label && /* @__PURE__ */ jsxRuntime.jsx(
                   Typography,
@@ -6522,23 +6538,35 @@ var Checkbox = React66__default.default.forwardRef(
 );
 Checkbox.displayName = "Checkbox";
 var parseTokenValue32 = (value) => parseFloat(value);
-var StyledGroup = styled51__default.default(reactNative.View)(({ groupDirection, groupGap }) => ({
+var StyledGroup = styled51__default.default(reactNative.View)(({ groupDirection, groupGap, groupWrap }) => ({
   flexDirection: groupDirection,
-  gap: groupGap
+  gap: groupGap,
+  flexWrap: groupWrap ? "wrap" : "nowrap"
 }));
 var CheckboxGroup = React66__default.default.forwardRef(
   (_a, ref) => {
     var _b = _a, { orientation = "vertical", children } = _b, rest = __objRest(_b, ["orientation", "children"]);
     const theme2 = react.useTheme();
     const { checkbox } = theme2.tokens.components;
+    const isHorizontal = orientation === "horizontal";
+    const renderChildren = () => isHorizontal ? React66__default.default.Children.map(children, (child) => {
+      var _a2;
+      if (!React66__default.default.isValidElement(child)) return child;
+      const childProps = child.props;
+      return React66__default.default.cloneElement(
+        child,
+        { fitContent: (_a2 = childProps.fitContent) != null ? _a2 : true }
+      );
+    }) : children;
     return /* @__PURE__ */ jsxRuntime.jsx(
       StyledGroup,
       __spreadProps(__spreadValues({
         ref,
-        groupDirection: orientation === "horizontal" ? "row" : "column",
-        groupGap: parseTokenValue32(checkbox.spacing.gap)
+        groupDirection: isHorizontal ? "row" : "column",
+        groupGap: parseTokenValue32(checkbox.spacing.gap),
+        groupWrap: isHorizontal
       }, rest), {
-        children
+        children: renderChildren()
       })
     );
   }