@butternutbox/pawprint-native 0.12.0 → 0.13.0

package/dist/index.d.cts

@@ -1055,6 +1055,12 @@ type CheckboxOwnProps = {
     disabled?: boolean;
     name?: string;
     value?: string;
+    /**
+     * Tile only: hug the content width instead of filling the container, so tiles
+     * can sit side by side and wrap. Set automatically by a horizontal
+     * `CheckboxGroup`; rarely needs setting by hand.
+     */
+    fitContent?: boolean;
 };
 type CheckboxProps = CheckboxOwnProps & Omit<PressableProps, keyof CheckboxOwnProps | "children">;
 /**
@@ -1083,12 +1089,16 @@ type CheckboxGroupProps = CheckboxGroupOwnProps & Omit<ViewProps, keyof Checkbox
 /**
  * CheckboxGroup manages layout for a collection of Checkboxes.
  *
+ * A `horizontal` group lays its tiles out in a wrapping row and makes them hug
+ * their content (via each Checkbox's `fitContent`) so they sit side by side;
+ * a `vertical` group stacks full-width tiles.
+ *
  * @param {"horizontal" | "vertical"} [orientation="vertical"] - Layout direction.
  *
  * @example
- * <CheckboxGroup>
- *   <Checkbox label="Chicken" />
- *   <Checkbox label="Beef" />
+ * <CheckboxGroup orientation="horizontal">
+ *   <Checkbox variant="tile" label="Chicken" />
+ *   <Checkbox variant="tile" label="Beef" />
  * </CheckboxGroup>
  */
 declare const CheckboxGroup: React.ForwardRefExoticComponent<CheckboxGroupOwnProps & Omit<ViewProps, keyof CheckboxGroupOwnProps> & React.RefAttributes<View>>;

package/dist/index.d.ts

@@ -1055,6 +1055,12 @@ type CheckboxOwnProps = {
     disabled?: boolean;
     name?: string;
     value?: string;
+    /**
+     * Tile only: hug the content width instead of filling the container, so tiles
+     * can sit side by side and wrap. Set automatically by a horizontal
+     * `CheckboxGroup`; rarely needs setting by hand.
+     */
+    fitContent?: boolean;
 };
 type CheckboxProps = CheckboxOwnProps & Omit<PressableProps, keyof CheckboxOwnProps | "children">;
 /**
@@ -1083,12 +1089,16 @@ type CheckboxGroupProps = CheckboxGroupOwnProps & Omit<ViewProps, keyof Checkbox
 /**
  * CheckboxGroup manages layout for a collection of Checkboxes.
  *
+ * A `horizontal` group lays its tiles out in a wrapping row and makes them hug
+ * their content (via each Checkbox's `fitContent`) so they sit side by side;
+ * a `vertical` group stacks full-width tiles.
+ *
  * @param {"horizontal" | "vertical"} [orientation="vertical"] - Layout direction.
  *
  * @example
- * <CheckboxGroup>
- *   <Checkbox label="Chicken" />
- *   <Checkbox label="Beef" />
+ * <CheckboxGroup orientation="horizontal">
+ *   <Checkbox variant="tile" label="Chicken" />
+ *   <Checkbox variant="tile" label="Beef" />
  * </CheckboxGroup>
  */
 declare const CheckboxGroup: React.ForwardRefExoticComponent<CheckboxGroupOwnProps & Omit<ViewProps, keyof CheckboxGroupOwnProps> & React.RefAttributes<View>>;

package/dist/index.js

@@ -6329,6 +6329,7 @@ var StyledRootPressable = styled51(Pressable)(
     rootPaddingVertical,
     rootPaddingHorizontal,
     rootMaxWidth,
+    rootFitContent,
     rootBgColor,
     rootBorderWidth,
     rootBorderColor,
@@ -6338,7 +6339,7 @@ var StyledRootPressable = styled51(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(View)(
   ({
@@ -6359,10 +6360,10 @@ var StyledControl = styled51(View)(
     justifyContent: "center"
   })
 );
-var StyledContent2 = styled51(View)(({ contentGap }) => ({
+var StyledContent2 = styled51(View)(({ contentGap, contentFlex }) => ({
   flexDirection: "column",
   gap: contentGap,
-  flex: 1,
+  flex: contentFlex,
   minWidth: 0
 }));
 var StyledIllustration = styled51(View)(({ illustrationSize }) => ({
@@ -6382,6 +6383,7 @@ var Checkbox = React66.forwardRef(
       defaultChecked = false,
       onCheckedChange,
       disabled = false,
+      fitContent = false,
       style
     } = _b, rest = __objRest(_b, [
       "variant",
@@ -6392,6 +6394,7 @@ var Checkbox = React66.forwardRef(
       "defaultChecked",
       "onCheckedChange",
       "disabled",
+      "fitContent",
       "style"
     ]);
     const theme2 = useTheme();
@@ -6426,6 +6429,7 @@ var Checkbox = React66.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,
@@ -6448,6 +6452,7 @@ var Checkbox = React66.forwardRef(
             StyledContent2,
             {
               contentGap: parseTokenValue31(checkbox.spacing.content.gap),
+              contentFlex: isTile && fitContent ? 0 : 1,
               children: [
                 label && /* @__PURE__ */ jsx(
                   Typography,
@@ -6484,23 +6489,35 @@ var Checkbox = React66.forwardRef(
 );
 Checkbox.displayName = "Checkbox";
 var parseTokenValue32 = (value) => parseFloat(value);
-var StyledGroup = styled51(View)(({ groupDirection, groupGap }) => ({
+var StyledGroup = styled51(View)(({ groupDirection, groupGap, groupWrap }) => ({
   flexDirection: groupDirection,
-  gap: groupGap
+  gap: groupGap,
+  flexWrap: groupWrap ? "wrap" : "nowrap"
 }));
 var CheckboxGroup = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, { orientation = "vertical", children } = _b, rest = __objRest(_b, ["orientation", "children"]);
     const theme2 = useTheme();
     const { checkbox } = theme2.tokens.components;
+    const isHorizontal = orientation === "horizontal";
+    const renderChildren = () => isHorizontal ? React66.Children.map(children, (child) => {
+      var _a2;
+      if (!React66.isValidElement(child)) return child;
+      const childProps = child.props;
+      return React66.cloneElement(
+        child,
+        { fitContent: (_a2 = childProps.fitContent) != null ? _a2 : true }
+      );
+    }) : children;
     return /* @__PURE__ */ 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()
       })
     );
   }