@butternutbox/pawprint-native 0.11.1 → 0.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@butternutbox/pawprint-native",
-  "version": "0.11.1",
+  "version": "0.12.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"