@butternutbox/pawprint-native 0.12.0 → 0.13.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@butternutbox/pawprint-native",
-  "version": "0.12.0",
+  "version": "0.13.1",
   "type": "module",
   "description": "ButternutBox Pawprint Design System - React Native Components",
   "main": "./dist/index.cjs",

package/src/components/atoms/TextArea/TextAreaField.tsx

@@ -13,6 +13,7 @@ import {
   Error as ErrorIcon,
   CheckCircle as SuccessIcon
 } from "@butternutbox/pawprint-icons/core"
+import { resolveFont } from "../../../fonts"
 import { Icon } from "../Icon"
 import type { InputState } from "../Input/InputField"
 
@@ -50,13 +51,26 @@ const StyledTextAreaWrapper = styled(Animated.View)<{
 })
 
 const StyledTextArea = styled(TextInput)(({ theme }) => {
-  const { colour } = theme.tokens.components.inputs
+  const { colour, field } = theme.tokens.components.inputs
+  const typography = field.placeholder.default
+  const { fontFamily } = resolveFont(
+    typography.fontFamily,
+    typography.fontWeight
+  )
+  const fontSize = parseTokenValue(typography.fontSize)
+  const letterSpacing = typography.letterSpacing?.endsWith("%")
+    ? (parseFloat(typography.letterSpacing) / 100) * fontSize
+    : parseFloat(typography.letterSpacing ?? "0")
+
   return {
     flex: 1,
     minWidth: 0,
     minHeight: 0,
     padding: 0,
     color: colour.field.text.default,
+    fontFamily,
+    fontSize,
+    letterSpacing,
     textAlignVertical: "top",
     // Suppress the browser default focus outline on React Native Web —
     // the focus indicator is rendered on the wrapper instead.

package/src/components/molecules/Checkbox/Checkbox.tsx

@@ -19,6 +19,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
 }
 
 export type CheckboxProps = CheckboxOwnProps &
@@ -33,6 +39,7 @@ const StyledRootPressable = styled(Pressable)<{
   rootPaddingVertical?: number
   rootPaddingHorizontal?: number
   rootMaxWidth?: number
+  rootFitContent?: boolean
   rootBgColor?: string
   rootBorderWidth?: number
   rootBorderColor?: string
@@ -45,6 +52,7 @@ const StyledRootPressable = styled(Pressable)<{
     rootPaddingVertical,
     rootPaddingHorizontal,
     rootMaxWidth,
+    rootFitContent,
     rootBgColor,
     rootBorderWidth,
     rootBorderColor,
@@ -60,8 +68,12 @@ const StyledRootPressable = styled(Pressable)<{
     ...(rootPaddingHorizontal !== undefined
       ? { paddingHorizontal: rootPaddingHorizontal }
       : {}),
+    // `fitContent` tiles hug their content (for wrapping rows); otherwise the
+    // tile fills its container width.
     ...(rootMaxWidth !== undefined
-      ? { maxWidth: rootMaxWidth, width: "100%" }
+      ? rootFitContent
+        ? { maxWidth: rootMaxWidth, alignSelf: "flex-start" }
+        : { maxWidth: rootMaxWidth, width: "100%" }
       : {}),
     ...(rootBgColor ? { backgroundColor: rootBgColor } : {}),
     ...(rootBorderWidth !== undefined
@@ -101,10 +113,11 @@ const StyledControl = styled(View)<{
 
 const StyledContent = styled(View)<{
   contentGap: number
-}>(({ contentGap }) => ({
+  contentFlex: number
+}>(({ contentGap, contentFlex }) => ({
   flexDirection: "column",
   gap: contentGap,
-  flex: 1,
+  flex: contentFlex,
   minWidth: 0
 }))
 
@@ -144,6 +157,7 @@ export const Checkbox = React.forwardRef<View, CheckboxProps>(
       defaultChecked = false,
       onCheckedChange,
       disabled = false,
+      fitContent = false,
       style,
       ...rest
     },
@@ -201,6 +215,7 @@ export const Checkbox = React.forwardRef<View, CheckboxProps>(
             ? parseTokenValue(checkbox.checkboxTile.size.maxWidth)
             : undefined
         }
+        rootFitContent={isTile && fitContent}
         rootBgColor={
           isTile
             ? isChecked
@@ -246,6 +261,7 @@ export const Checkbox = React.forwardRef<View, CheckboxProps>(
 
         <StyledContent
           contentGap={parseTokenValue(checkbox.spacing.content.gap)}
+          contentFlex={isTile && fitContent ? 0 : 1}
         >
           {label && (
             <Typography

package/src/components/molecules/Checkbox/CheckboxGroup.tsx

@@ -2,6 +2,7 @@ import React from "react"
 import { View, ViewProps } from "react-native"
 import styled from "@emotion/native"
 import { useTheme } from "@emotion/react"
+import type { CheckboxProps } from "./Checkbox"
 
 type CheckboxGroupOwnProps = {
   children: React.ReactNode
@@ -16,20 +17,26 @@ const parseTokenValue = (value: string): number => parseFloat(value)
 const StyledGroup = styled(View)<{
   groupDirection: "row" | "column"
   groupGap: number
-}>(({ groupDirection, groupGap }) => ({
+  groupWrap: boolean
+}>(({ groupDirection, groupGap, groupWrap }) => ({
   flexDirection: groupDirection,
-  gap: groupGap
+  gap: groupGap,
+  flexWrap: groupWrap ? "wrap" : "nowrap"
 }))
 
 /**
  * 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>
  */
 export const CheckboxGroup = React.forwardRef<View, CheckboxGroupProps>(
@@ -37,14 +44,31 @@ export const CheckboxGroup = React.forwardRef<View, CheckboxGroupProps>(
     const theme = useTheme()
     const { checkbox } = theme.tokens.components
 
+    const isHorizontal = orientation === "horizontal"
+
+    // Horizontal tiles hug their content so they can wrap; let an explicit
+    // per-Checkbox `fitContent` still win.
+    const renderChildren = (): React.ReactNode =>
+      isHorizontal
+        ? React.Children.map(children, (child) => {
+            if (!React.isValidElement(child)) return child
+            const childProps = child.props as CheckboxProps
+            return React.cloneElement(
+              child as React.ReactElement<CheckboxProps>,
+              { fitContent: childProps.fitContent ?? true }
+            )
+          })
+        : children
+
     return (
       <StyledGroup
         ref={ref}
-        groupDirection={orientation === "horizontal" ? "row" : "column"}
+        groupDirection={isHorizontal ? "row" : "column"}
         groupGap={parseTokenValue(checkbox.spacing.gap)}
+        groupWrap={isHorizontal}
         {...rest}
       >
-        {children}
+        {renderChildren()}
       </StyledGroup>
     )
   }