@butternutbox/pawprint-native 0.11.1 → 0.13.0

package/package.json

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

package/src/components/atoms/Divider/Divider.stories.tsx

@@ -0,0 +1,71 @@
+import React from "react"
+import { View, StyleSheet } from "react-native"
+import { Divider } from "./Divider"
+import { Typography } from "../Typography"
+import type { DividerProps } from "./Divider"
+
+export default {
+  title: "Atoms/Divider",
+  component: Divider,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "A horizontal rule used to separate content, group related elements, and establish a clear visual hierarchy. Native counterpart to the web Divider."
+      }
+    }
+  },
+  argTypes: {
+    size: {
+      control: { type: "select" },
+      options: ["small", "medium", "large"],
+      description:
+        "Thickness of the divider (small = 1px, medium = 2px, large = 4px)"
+    },
+    colour: {
+      control: { type: "select" },
+      options: ["light", "dark"],
+      description: "Colour variant of the divider"
+    }
+  }
+}
+
+const sizes = ["small", "medium", "large"] as const
+const colours = ["light", "dark"] as const
+
+export const Default = (args: DividerProps) => (
+  <View style={styles.container}>
+    <Divider {...args} />
+  </View>
+)
+Default.args = {
+  size: "small",
+  colour: "light"
+}
+
+export const AllVariants = () => (
+  <View style={styles.column}>
+    {colours.map((colour) => (
+      <View key={colour} style={styles.section}>
+        <Typography variant="heading" size="sm">
+          {colour}
+        </Typography>
+        {sizes.map((size) => (
+          <View key={size} style={styles.row}>
+            <Typography variant="body" size="sm">
+              {size}
+            </Typography>
+            <Divider size={size} colour={colour} />
+          </View>
+        ))}
+      </View>
+    ))}
+  </View>
+)
+
+const styles = StyleSheet.create({
+  container: { width: 300 },
+  column: { width: 300, gap: 24 },
+  section: { gap: 12 },
+  row: { gap: 4 }
+})

package/src/components/atoms/Divider/Divider.test.tsx

@@ -0,0 +1,25 @@
+import React from "react"
+import { describe, it, expect } from "vitest"
+import { renderWithTheme } from "../../../test-utils"
+import { Divider } from "./Divider"
+
+describe("Divider", () => {
+  it("renders with default size and colour", () => {
+    const { container } = renderWithTheme(<Divider />)
+    expect(container.firstChild).toBeInTheDocument()
+  })
+
+  it("renders size and colour variants", () => {
+    const { container } = renderWithTheme(
+      <Divider size="large" colour="dark" />
+    )
+    expect(container.firstChild).toBeInTheDocument()
+  })
+
+  it("forwards ref to the root element", () => {
+    const ref = React.createRef<any>()
+    renderWithTheme(<Divider ref={ref} />)
+    expect(ref.current).toBeTruthy()
+    expect(ref.current).toBeInTheDocument()
+  })
+})

package/src/components/atoms/Divider/Divider.tsx

@@ -0,0 +1,61 @@
+import React from "react"
+import { View } from "react-native"
+import styled from "@emotion/native"
+
+type DividerSize = "small" | "medium" | "large"
+type DividerColour = "light" | "dark"
+
+type DividerOwnProps = {
+  size?: DividerSize
+  colour?: DividerColour
+}
+
+type DividerProps = DividerOwnProps &
+  Omit<React.ComponentProps<typeof View>, keyof DividerOwnProps>
+
+const parseTokenValue = (value: string): number => parseFloat(value)
+
+const StyledDivider = styled(View)<{
+  dividerSize: DividerSize
+  dividerColour: DividerColour
+}>(({ theme, dividerSize, dividerColour }) => {
+  const { colour, sizing } = theme.tokens.components.dividers
+
+  return {
+    width: "100%",
+    height: parseTokenValue(sizing[dividerSize].height),
+    backgroundColor: colour[dividerColour]
+  }
+})
+
+/**
+ * A horizontal rule used to separate content, group related elements, and
+ * establish a clear visual hierarchy. Native counterpart to the web `Divider`.
+ *
+ * @example
+ * ```tsx
+ * import { Divider } from "@butternutbox/pawprint-native"
+ *
+ * <Divider />
+ * <Divider size="medium" colour="dark" />
+ * ```
+ *
+ * @param {"small" | "medium" | "large"} [size="small"] - Thickness variant
+ *   (small = 1px, medium = 2px, large = 4px).
+ * @param {"light" | "dark"} [colour="light"] - Colour variant.
+ */
+const Divider = React.forwardRef<View, DividerProps>(
+  ({ size = "small", colour = "light", ...rest }, ref) => (
+    <StyledDivider
+      ref={ref}
+      dividerSize={size}
+      dividerColour={colour}
+      {...rest}
+    />
+  )
+)
+
+Divider.displayName = "Divider"
+
+export { Divider }
+export type { DividerProps, DividerSize, DividerColour }

package/src/components/atoms/Divider/index.ts

@@ -0,0 +1,2 @@
+export { Divider } from "./Divider"
+export type { DividerProps, DividerSize, DividerColour } from "./Divider"

package/src/components/atoms/index.ts

@@ -3,6 +3,7 @@ export * from "./CarouselControls"
 export * from "./Typography"
 export * from "./Badge"
 export * from "./Button"
+export * from "./Divider"
 export * from "./Hint"
 export * from "./Icon"
 export * from "./IconButton"

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>
     )
   }