@butternutbox/pawprint-native 0.0.1

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

@@ -0,0 +1,279 @@
+import React from "react"
+import { View, PressableProps } from "react-native"
+import styled from "@emotion/native"
+import { useTheme } from "@emotion/react"
+import * as CheckboxPrimitive from "@rn-primitives/checkbox"
+import { Check } from "@butternutbox/pawprint-icons/core"
+import { Icon } from "../../atoms/Icon"
+import { Typography } from "../../atoms/Typography"
+
+export type CheckboxVariant = "standalone" | "tile"
+
+type CheckboxOwnProps = {
+  variant?: CheckboxVariant
+  label: string
+  subText?: string
+  illustration?: React.ReactNode
+  checked?: boolean
+  defaultChecked?: boolean
+  onCheckedChange?: (checked: boolean) => void
+  disabled?: boolean
+  name?: string
+  value?: string
+}
+
+export type CheckboxProps = CheckboxOwnProps &
+  Omit<PressableProps, keyof CheckboxOwnProps | "children">
+
+const parseTokenValue = (value: string): number => parseFloat(value)
+
+const StyledRoot = styled(CheckboxPrimitive.Root)<{
+  rootFlexAlign: string
+  rootGap: number
+  rootOpacity: number
+  rootPaddingVertical?: number
+  rootPaddingHorizontal?: number
+  rootMaxWidth?: number
+  rootBgColor?: string
+  rootBorderWidth?: number
+  rootBorderColor?: string
+  rootBorderRadius?: number
+}>(
+  ({
+    rootFlexAlign,
+    rootGap,
+    rootOpacity,
+    rootPaddingVertical,
+    rootPaddingHorizontal,
+    rootMaxWidth,
+    rootBgColor,
+    rootBorderWidth,
+    rootBorderColor,
+    rootBorderRadius
+  }) => ({
+    flexDirection: "row",
+    alignItems: rootFlexAlign as "center" | "flex-start",
+    gap: rootGap,
+    opacity: rootOpacity,
+    ...(rootPaddingVertical !== undefined
+      ? { paddingVertical: rootPaddingVertical }
+      : {}),
+    ...(rootPaddingHorizontal !== undefined
+      ? { paddingHorizontal: rootPaddingHorizontal }
+      : {}),
+    ...(rootMaxWidth !== undefined
+      ? { maxWidth: rootMaxWidth, width: "100%" }
+      : {}),
+    ...(rootBgColor ? { backgroundColor: rootBgColor } : {}),
+    ...(rootBorderWidth !== undefined
+      ? { borderWidth: rootBorderWidth, borderColor: rootBorderColor }
+      : {}),
+    ...(rootBorderRadius !== undefined
+      ? { borderRadius: rootBorderRadius }
+      : {})
+  })
+)
+
+const StyledControl = styled(View)<{
+  controlSize: number
+  controlBorderWidth: number
+  controlBorderColor: string
+  controlBorderRadius: number
+  controlBgColor: string
+}>(
+  ({
+    controlSize,
+    controlBorderWidth,
+    controlBorderColor,
+    controlBorderRadius,
+    controlBgColor
+  }) => ({
+    flexShrink: 0,
+    width: controlSize,
+    height: controlSize,
+    borderWidth: controlBorderWidth,
+    borderColor: controlBorderColor,
+    borderRadius: controlBorderRadius,
+    backgroundColor: controlBgColor,
+    alignItems: "center",
+    justifyContent: "center"
+  })
+)
+
+const StyledContent = styled(View)<{
+  contentGap: number
+}>(({ contentGap }) => ({
+  flexDirection: "column",
+  gap: contentGap,
+  flex: 1,
+  minWidth: 0
+}))
+
+const StyledIllustration = styled(View)<{
+  illustrationSize: number
+}>(({ illustrationSize }) => ({
+  flexShrink: 0,
+  width: illustrationSize,
+  height: illustrationSize,
+  overflow: "hidden"
+}))
+
+/**
+ * Checkbox component for binary selection, supporting standalone and tile layouts.
+ *
+ * @param {"standalone" | "tile"} [variant="standalone"] - Visual layout variant.
+ * @param {string} label - Visible label text.
+ * @param {string} [subText] - Optional secondary descriptive text.
+ * @param {React.ReactNode} [illustration] - Optional decorative slot (tile variant only).
+ * @param {boolean} [checked] - Controlled checked state.
+ * @param {boolean} [defaultChecked] - Uncontrolled initial checked state.
+ * @param {(checked: boolean) => void} [onCheckedChange] - Callback when state changes.
+ * @param {boolean} [disabled=false] - Prevents interaction.
+ *
+ * @example
+ * <Checkbox label="Accept terms" subText="Required to proceed" />
+ * <Checkbox variant="tile" label="Newsletters" subText="Stay up to date" />
+ */
+export const Checkbox = React.forwardRef<View, CheckboxProps>(
+  (
+    {
+      variant = "standalone",
+      label,
+      subText,
+      illustration,
+      checked: controlledChecked,
+      defaultChecked = false,
+      onCheckedChange,
+      disabled = false,
+      style,
+      ...rest
+    },
+    ref
+  ) => {
+    const theme = useTheme()
+    const { checkbox } = theme.tokens.components
+    const { dimensions } = theme.tokens.semantics
+
+    const isControlled = controlledChecked !== undefined
+    const [internalChecked, setInternalChecked] = React.useState(defaultChecked)
+    const isChecked = isControlled ? controlledChecked : internalChecked
+
+    const handleCheckedChange = (checked: boolean) => {
+      if (!isControlled) {
+        setInternalChecked(checked)
+      }
+      onCheckedChange?.(checked)
+    }
+
+    const isTile = variant === "tile"
+    const controlSize = parseTokenValue(checkbox.size.control.default)
+
+    return (
+      <StyledRoot
+        ref={ref}
+        checked={isChecked}
+        onCheckedChange={handleCheckedChange}
+        disabled={disabled}
+        rootFlexAlign={isTile ? "center" : "flex-start"}
+        rootGap={parseTokenValue(
+          isTile ? checkbox.checkboxTile.spacing.gap : checkbox.spacing.gap
+        )}
+        rootOpacity={
+          disabled ? parseFloat(theme.tokens.primitives.opacity["40"]) : 1
+        }
+        rootPaddingVertical={
+          isTile
+            ? parseTokenValue(checkbox.checkboxTile.spacing.verticalPadding)
+            : undefined
+        }
+        rootPaddingHorizontal={
+          isTile
+            ? parseTokenValue(checkbox.checkboxTile.spacing.horizontalPadding)
+            : undefined
+        }
+        rootMaxWidth={
+          isTile
+            ? parseTokenValue(checkbox.checkboxTile.size.maxWidth)
+            : undefined
+        }
+        rootBgColor={
+          isTile
+            ? isChecked
+              ? checkbox.checkboxTile.colour.background.selected
+              : checkbox.checkboxTile.colour.background.default
+            : undefined
+        }
+        rootBorderWidth={
+          isTile
+            ? parseTokenValue(checkbox.checkboxTile.borderWidth.default)
+            : undefined
+        }
+        rootBorderColor={
+          isTile
+            ? isChecked
+              ? checkbox.checkboxTile.colour.border.selected
+              : checkbox.checkboxTile.colour.border.default
+            : undefined
+        }
+        rootBorderRadius={
+          isTile
+            ? parseTokenValue(checkbox.checkboxTile.borderRadius.default)
+            : undefined
+        }
+        style={typeof style === "function" ? undefined : style}
+        {...rest}
+      >
+        <StyledControl
+          controlSize={controlSize}
+          controlBorderWidth={parseTokenValue(checkbox.control.border.default)}
+          controlBorderColor={
+            isChecked
+              ? checkbox.colour.background.selected
+              : checkbox.colour.border.default
+          }
+          controlBorderRadius={parseTokenValue(dimensions.borderRadius.xs)}
+          controlBgColor={
+            isChecked ? checkbox.colour.background.selected : "transparent"
+          }
+        >
+          <CheckboxPrimitive.Indicator>
+            <Icon icon={Check} size="xs" colour="alt" />
+          </CheckboxPrimitive.Indicator>
+        </StyledControl>
+
+        <StyledContent
+          contentGap={parseTokenValue(checkbox.spacing.content.gap)}
+        >
+          {label && (
+            <Typography
+              token={checkbox.typography.label}
+              color={checkbox.colour.text.title}
+            >
+              {label}
+            </Typography>
+          )}
+          {subText && (
+            <Typography
+              token={checkbox.typography.subText}
+              color={checkbox.colour.text.subtext}
+            >
+              {subText}
+            </Typography>
+          )}
+        </StyledContent>
+
+        {isTile && illustration && (
+          <StyledIllustration
+            illustrationSize={parseTokenValue(
+              checkbox.checkboxTile.size.illustration.default
+            )}
+          >
+            {illustration}
+          </StyledIllustration>
+        )}
+      </StyledRoot>
+    )
+  }
+)
+
+Checkbox.displayName = "Checkbox"

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

@@ -0,0 +1,53 @@
+import React from "react"
+import { View, ViewProps } from "react-native"
+import styled from "@emotion/native"
+import { useTheme } from "@emotion/react"
+
+type CheckboxGroupOwnProps = {
+  children: React.ReactNode
+  orientation?: "horizontal" | "vertical"
+}
+
+export type CheckboxGroupProps = CheckboxGroupOwnProps &
+  Omit<ViewProps, keyof CheckboxGroupOwnProps>
+
+const parseTokenValue = (value: string): number => parseFloat(value)
+
+const StyledGroup = styled(View)<{
+  groupDirection: "row" | "column"
+  groupGap: number
+}>(({ groupDirection, groupGap }) => ({
+  flexDirection: groupDirection,
+  gap: groupGap
+}))
+
+/**
+ * CheckboxGroup manages layout for a collection of Checkboxes.
+ *
+ * @param {"horizontal" | "vertical"} [orientation="vertical"] - Layout direction.
+ *
+ * @example
+ * <CheckboxGroup>
+ *   <Checkbox label="Chicken" />
+ *   <Checkbox label="Beef" />
+ * </CheckboxGroup>
+ */
+export const CheckboxGroup = React.forwardRef<View, CheckboxGroupProps>(
+  ({ orientation = "vertical", children, ...rest }, ref) => {
+    const theme = useTheme()
+    const { checkbox } = theme.tokens.components
+
+    return (
+      <StyledGroup
+        ref={ref}
+        groupDirection={orientation === "horizontal" ? "row" : "column"}
+        groupGap={parseTokenValue(checkbox.spacing.gap)}
+        {...rest}
+      >
+        {children}
+      </StyledGroup>
+    )
+  }
+)
+
+CheckboxGroup.displayName = "CheckboxGroup"

package/src/components/molecules/Checkbox/index.ts

@@ -0,0 +1,4 @@
+export { Checkbox } from "./Checkbox"
+export type { CheckboxProps, CheckboxVariant } from "./Checkbox"
+export { CheckboxGroup } from "./CheckboxGroup"
+export type { CheckboxGroupProps } from "./CheckboxGroup"

package/src/components/molecules/Radio/Radio.stories.tsx

@@ -0,0 +1,182 @@
+import React, { useState } from "react"
+import { View, StyleSheet } from "react-native"
+import { RadioGroup } from "./RadioGroup"
+import type { RadioGroupProps } from "./RadioGroup"
+import { Typography } from "../../atoms/Typography"
+
+export default {
+  title: "Molecules/Radio",
+  component: RadioGroup,
+  argTypes: {
+    orientation: {
+      control: { type: "select" },
+      options: ["vertical", "horizontal"],
+      description: "Layout direction of radio options"
+    },
+    disabled: {
+      control: { type: "boolean" },
+      description: "Disables entire radio group"
+    }
+  }
+}
+
+const basicOptions = [
+  { value: "chicken", label: "Chicken" },
+  { value: "beef", label: "Beef" },
+  { value: "lamb", label: "Lamb" }
+]
+
+const optionsWithSubText = [
+  { value: "chicken", label: "Chicken", subText: "Tender & tasty" },
+  { value: "beef", label: "Beef", subText: "Rich & hearty" },
+  { value: "lamb", label: "Lamb", subText: "Slow cooked" }
+]
+
+export const OptionsAPI = () => (
+  <View style={styles.column}>
+    <View style={styles.section}>
+      <Typography size="sm" weight="semiBold" color="tertiary">
+        Vertical
+      </Typography>
+      <RadioGroup
+        name="vertical"
+        options={basicOptions}
+        orientation="vertical"
+      />
+    </View>
+
+    <View style={styles.section}>
+      <Typography size="sm" weight="semiBold" color="tertiary">
+        Horizontal
+      </Typography>
+      <RadioGroup
+        name="horizontal"
+        options={basicOptions}
+        orientation="horizontal"
+      />
+    </View>
+
+    <View style={styles.section}>
+      <Typography size="sm" weight="semiBold" color="tertiary">
+        With subtext
+      </Typography>
+      <RadioGroup
+        name="subtext"
+        options={optionsWithSubText}
+        orientation="vertical"
+      />
+    </View>
+  </View>
+)
+
+export const TileVariant = () => (
+  <View style={styles.column}>
+    <View style={styles.section}>
+      <Typography size="sm" weight="semiBold" color="tertiary">
+        Vertical tile
+      </Typography>
+      <RadioGroup
+        name="tile-vertical"
+        options={basicOptions.map((o) => ({ ...o, variant: "tile" as const }))}
+        orientation="vertical"
+      />
+    </View>
+
+    <View style={styles.section}>
+      <Typography size="sm" weight="semiBold" color="tertiary">
+        Horizontal tile
+      </Typography>
+      <RadioGroup
+        name="tile-horizontal"
+        options={basicOptions.map((o) => ({ ...o, variant: "tile" as const }))}
+        orientation="horizontal"
+      />
+    </View>
+  </View>
+)
+
+export const States = () => (
+  <View style={styles.column}>
+    <View style={styles.section}>
+      <Typography size="sm" weight="semiBold" color="tertiary">
+        Enabled
+      </Typography>
+      <RadioGroup name="enabled" options={basicOptions} />
+    </View>
+
+    <View style={styles.section}>
+      <Typography size="sm" weight="semiBold" color="tertiary">
+        Disabled (group)
+      </Typography>
+      <RadioGroup name="disabled-group" options={basicOptions} disabled />
+    </View>
+
+    <View style={styles.section}>
+      <Typography size="sm" weight="semiBold" color="tertiary">
+        Disabled (single item)
+      </Typography>
+      <RadioGroup
+        name="disabled-item"
+        options={[
+          { value: "chicken", label: "Chicken" },
+          { value: "beef", label: "Beef", disabled: true },
+          { value: "lamb", label: "Lamb" }
+        ]}
+      />
+    </View>
+  </View>
+)
+
+export const CompoundComponents = () => (
+  <View style={styles.column}>
+    <RadioGroup name="compound" defaultValue="medium">
+      <RadioGroup.Radio value="small" label="Small" subText="For tiny dogs" />
+      <RadioGroup.Radio
+        value="medium"
+        label="Medium"
+        subText="For medium dogs"
+      />
+      <RadioGroup.Radio value="large" label="Large" subText="For big dogs" />
+    </RadioGroup>
+  </View>
+)
+
+export const Controlled = () => {
+  const [value, setValue] = useState("chicken")
+
+  return (
+    <View style={styles.column}>
+      <Typography size="sm" weight="semiBold" color="tertiary">
+        Selected: {value}
+      </Typography>
+      <RadioGroup
+        name="controlled"
+        options={basicOptions}
+        value={value}
+        onValueChange={setValue}
+      />
+    </View>
+  )
+}
+
+export const Playground = {
+  args: {
+    name: "playground",
+    orientation: "vertical",
+    disabled: false
+  },
+  render: (args: RadioGroupProps) => (
+    <RadioGroup {...args} options={basicOptions} />
+  )
+}
+
+const styles = StyleSheet.create({
+  column: {
+    flexDirection: "column",
+    gap: 32
+  },
+  section: {
+    flexDirection: "column",
+    gap: 12
+  }
+})