@butternutbox/pawprint-native 0.0.1

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

@@ -0,0 +1,7 @@
+export { IconButton } from "./IconButton"
+export type {
+  IconButtonProps,
+  IconButtonVariant,
+  IconButtonSize,
+  IconButtonColour
+} from "./IconButton"

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

@@ -0,0 +1,167 @@
+import React from "react"
+import { View, StyleSheet, Text } from "react-native"
+import { Illustration } from "./Illustration"
+import type {
+  IllustrationProps,
+  PawprintIllustration,
+  IllustrationSize
+} from "./Illustration"
+import * as poses from "@butternutbox/pawprint-illustrations/poses"
+import * as usps from "@butternutbox/pawprint-illustrations/usps"
+import * as breeds from "@butternutbox/pawprint-illustrations/breeds"
+import * as breedSizes from "@butternutbox/pawprint-illustrations/breed-sizes"
+
+function isComponent(value: unknown): value is PawprintIllustration {
+  if (typeof value === "function") return true
+  if (value && typeof value === "object" && "$$typeof" in value) return true
+  return false
+}
+
+const categorised: Record<string, Record<string, unknown>> = {
+  poses,
+  usps,
+  breeds,
+  "breed-sizes": breedSizes
+}
+
+const illustrationMap: Record<string, PawprintIllustration> = {}
+for (const [category, mod] of Object.entries(categorised)) {
+  for (const [name, value] of Object.entries(mod)) {
+    if (isComponent(value)) {
+      illustrationMap[`${category}/${name}`] = value
+    }
+  }
+}
+
+const illustrationNames = Object.keys(illustrationMap)
+const defaultIllustration = illustrationNames[0]!
+
+export default {
+  title: "Atoms/Illustration",
+  component: Illustration,
+  argTypes: {
+    size: {
+      control: { type: "select" },
+      options: ["sm", "lg"] as IllustrationSize[],
+      description: "Size variant (controls height)"
+    },
+    illustration: {
+      control: { type: "select" },
+      options: illustrationNames,
+      mapping: illustrationMap,
+      description: "Illustration component from pawprint-illustrations"
+    }
+  }
+}
+
+export const Default = (
+  args: Omit<IllustrationProps, "illustration"> & { illustration?: string }
+) => (
+  <Illustration
+    illustration={
+      (illustrationMap[args.illustration ?? defaultIllustration] ??
+        illustrationMap[defaultIllustration]) as PawprintIllustration
+    }
+    size={args.size}
+    aria-label="Illustration"
+  />
+)
+Default.args = {
+  illustration: defaultIllustration,
+  size: "sm"
+}
+
+const allSizes: IllustrationSize[] = ["sm", "lg"]
+
+export const AllSizes = () => {
+  const sample = illustrationMap[defaultIllustration] as PawprintIllustration
+  return (
+    <View style={styles.row}>
+      {allSizes.map((size) => (
+        <View key={size} style={styles.cell}>
+          <Illustration illustration={sample} size={size} />
+          <Text style={styles.sizeLabel}>{size}</Text>
+        </View>
+      ))}
+    </View>
+  )
+}
+
+export const AllIllustrations = () => (
+  <View style={styles.column}>
+    {Object.entries(categorised).map(([category, mod]) => (
+      <View key={category} style={styles.section}>
+        <Text style={styles.label}>{category}</Text>
+        <View style={styles.grid}>
+          {Object.entries(mod)
+            .filter(([, value]) => isComponent(value))
+            .map(([name, Component]) => (
+              <View key={name} style={styles.cell}>
+                <Illustration
+                  illustration={Component as PawprintIllustration}
+                  size="sm"
+                  aria-label={name}
+                />
+                <Text style={styles.sizeLabel} numberOfLines={1}>
+                  {name}
+                </Text>
+              </View>
+            ))}
+        </View>
+      </View>
+    ))}
+  </View>
+)
+
+export const Playground = (
+  args: Omit<IllustrationProps, "illustration"> & { illustration?: string }
+) => (
+  <Illustration
+    illustration={
+      (illustrationMap[args.illustration ?? defaultIllustration] ??
+        illustrationMap[defaultIllustration]) as PawprintIllustration
+    }
+    size={args.size}
+    aria-label="Playground illustration"
+  />
+)
+Playground.args = {
+  illustration: defaultIllustration,
+  size: "sm"
+}
+
+const styles = StyleSheet.create({
+  column: {
+    flexDirection: "column",
+    gap: 24
+  },
+  section: {
+    flexDirection: "column",
+    gap: 8
+  },
+  row: {
+    flexDirection: "row",
+    gap: 16,
+    alignItems: "center"
+  },
+  grid: {
+    flexDirection: "row",
+    gap: 12,
+    flexWrap: "wrap"
+  },
+  cell: {
+    alignItems: "center",
+    gap: 4,
+    minWidth: 64
+  },
+  label: {
+    fontSize: 13,
+    fontWeight: "600",
+    color: "#666"
+  },
+  sizeLabel: {
+    fontSize: 10,
+    color: "#999",
+    textAlign: "center"
+  }
+})

package/src/components/atoms/Illustration/Illustration.tsx

@@ -0,0 +1,81 @@
+import React from "react"
+import { View, ViewProps } from "react-native"
+import styled from "@emotion/native"
+import { useTheme } from "@emotion/react"
+
+type IllustrationSize = "sm" | "lg"
+
+type PawprintIllustration = React.ComponentType<{
+  width?: number
+  height?: number
+}>
+
+type IllustrationOwnProps = {
+  illustration: PawprintIllustration
+  size?: IllustrationSize
+  "aria-label"?: string
+}
+
+type IllustrationProps = IllustrationOwnProps &
+  Omit<ViewProps, keyof IllustrationOwnProps>
+
+const parseTokenValue = (value: string): number => parseFloat(value)
+
+const StyledRoot = styled(View)<{
+  illustrationHeight: number
+}>(({ illustrationHeight }) => ({
+  alignItems: "center",
+  justifyContent: "center",
+  flexShrink: 0,
+  height: illustrationHeight
+}))
+
+/**
+ * Renders a multi-colour SVG illustration with token-based sizing.
+ *
+ * @example
+ * ```tsx
+ * import { Illustration } from "@butternutbox/pawprint-native"
+ * import { DogSittingFilled } from "@butternutbox/pawprint-illustrations/poses"
+ *
+ * <Illustration illustration={DogSittingFilled} size="sm" aria-label="Dog sitting" />
+ * ```
+ *
+ * @param illustration - **(required)** Illustration component
+ * @param size - *(optional)* Size variant: sm (default), lg
+ * @param aria-label - *(optional)* Accessible label
+ */
+const Illustration = React.forwardRef<View, IllustrationProps>(
+  (
+    {
+      illustration: IllustrationComponent,
+      size = "sm",
+      "aria-label": ariaLabel,
+      ...rest
+    },
+    ref
+  ) => {
+    const theme = useTheme()
+    const dimension = parseTokenValue(
+      theme.tokens.components.illustrations.sizing.illustrations[size]
+    )
+
+    return (
+      <StyledRoot
+        ref={ref}
+        illustrationHeight={dimension}
+        accessibilityRole={ariaLabel ? "image" : undefined}
+        accessibilityLabel={ariaLabel}
+        accessible={!!ariaLabel}
+        {...rest}
+      >
+        <IllustrationComponent height={dimension} />
+      </StyledRoot>
+    )
+  }
+)
+
+Illustration.displayName = "Illustration"
+
+export { Illustration }
+export type { IllustrationProps, PawprintIllustration, IllustrationSize }

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

@@ -0,0 +1,6 @@
+export { Illustration } from "./Illustration"
+export type {
+  IllustrationProps,
+  PawprintIllustration,
+  IllustrationSize
+} from "./Illustration"

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

@@ -0,0 +1,142 @@
+import React, { useState } from "react"
+import { View, StyleSheet } from "react-native"
+import { Input } from "./Input"
+import type { InputProps } from "./Input"
+import { Typography } from "../Typography"
+
+export default {
+  title: "Atoms/Input",
+  component: Input,
+  argTypes: {
+    label: {
+      control: { type: "text" },
+      description: "Label text"
+    },
+    placeholder: {
+      control: { type: "text" },
+      description: "Placeholder text"
+    },
+    description: {
+      control: { type: "text" },
+      description: "Help text below input"
+    },
+    error: {
+      control: { type: "text" },
+      description: "Error message"
+    },
+    state: {
+      control: { type: "select" },
+      options: ["default", "error", "success"],
+      description: "Visual state of the input"
+    },
+    optionalText: {
+      control: { type: "text" },
+      description: "Optional indicator next to label"
+    },
+    disabled: {
+      control: { type: "boolean" },
+      description: "Prevents interaction"
+    }
+  }
+}
+
+export const Default = (args: InputProps) => <Input {...args} />
+Default.args = {
+  label: "Email",
+  placeholder: "you@butternutbox.com",
+  description: "We'll never share your email",
+  state: "default"
+}
+
+export const States = () => (
+  <View style={styles.column}>
+    <View style={styles.section}>
+      <Typography size="sm" weight="semiBold" color="tertiary">
+        Default
+      </Typography>
+      <Input
+        label="Email"
+        placeholder="you@butternutbox.com"
+        description="We'll never share your email"
+        state="default"
+      />
+    </View>
+    <View style={styles.section}>
+      <Typography size="sm" weight="semiBold" color="tertiary">
+        Error
+      </Typography>
+      <Input
+        label="Email"
+        placeholder="you@butternutbox.com"
+        error="Please enter a valid email address"
+        state="error"
+      />
+    </View>
+    <View style={styles.section}>
+      <Typography size="sm" weight="semiBold" color="tertiary">
+        Success
+      </Typography>
+      <Input
+        label="Email"
+        placeholder="you@butternutbox.com"
+        description="Email is valid"
+        state="success"
+      />
+    </View>
+    <View style={styles.section}>
+      <Typography size="sm" weight="semiBold" color="tertiary">
+        Disabled
+      </Typography>
+      <Input
+        label="Email"
+        placeholder="you@butternutbox.com"
+        editable={false}
+        state="default"
+      />
+    </View>
+    <View style={styles.section}>
+      <Typography size="sm" weight="semiBold" color="tertiary">
+        With optional text
+      </Typography>
+      <Input
+        label="Phone"
+        placeholder="07123 456789"
+        optionalText="(optional)"
+        state="default"
+      />
+    </View>
+  </View>
+)
+
+export const Controlled = () => {
+  const [value, setValue] = useState("")
+  const hasError = value.length > 0 && !value.includes("@")
+
+  return (
+    <View style={styles.column}>
+      <Typography size="sm" weight="semiBold" color="tertiary">
+        Controlled: {value || "(empty)"}
+      </Typography>
+      <Input
+        label="Email"
+        placeholder="you@butternutbox.com"
+        value={value}
+        onChangeText={setValue}
+        state={hasError ? "error" : "default"}
+        error={hasError ? "Must contain @" : undefined}
+        description="Type to see validation"
+      />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  column: {
+    flexDirection: "column",
+    gap: 24
+  },
+  section: {
+    flexDirection: "column",
+    gap: 8
+  }
+})

package/src/components/atoms/Input/Input.tsx

@@ -0,0 +1,110 @@
+import React from "react"
+import { View, ViewProps } from "react-native"
+import styled from "@emotion/native"
+import { InputLabel } from "./InputLabel"
+import { InputField, type InputFieldProps, type InputState } from "./InputField"
+import { InputDescription } from "./InputDescription"
+import { InputError } from "./InputError"
+
+type InputOwnProps = {
+  label?: string
+  description?: string
+  error?: string
+  state?: InputState
+  optionalText?: string
+}
+
+export type InputProps = InputOwnProps &
+  Omit<InputFieldProps, keyof InputOwnProps> &
+  Omit<ViewProps, keyof InputOwnProps>
+
+const parseTokenValue = (value: string): number => parseFloat(value)
+
+const StyledRoot = styled(View)(({ theme }) => {
+  const { spacing } = theme.tokens.components.inputs
+
+  return {
+    gap: parseTokenValue(spacing.gap)
+  }
+})
+
+/**
+ * Text input component for collecting user data.
+ * Supports both a simple props API and a flexible compound component API.
+ *
+ * **Simple Props API:**
+ * @example
+ * <Input
+ *   label="Email"
+ *   placeholder="you@butternutbox.com"
+ *   description="We'll never share your email"
+ *   error="Invalid email address"
+ *   state="error"
+ *   optionalText="(optional)"
+ * />
+ *
+ * **Compound Component API:**
+ * @example
+ * <Input.Root>
+ *   <Input.Label optionalText="(optional)">Email</Input.Label>
+ *   <Input.Field placeholder="you@butternutbox.com" />
+ *   <Input.Description>We'll never share your email</Input.Description>
+ *   <Input.Error>Invalid email</Input.Error>
+ * </Input.Root>
+ */
+const InputRoot = React.forwardRef<View, InputProps>(
+  (
+    {
+      label,
+      description,
+      error,
+      state = "default",
+      optionalText,
+      children,
+      // InputField props
+      ...inputFieldProps
+    },
+    ref
+  ) => {
+    // If children are provided, use compound component API
+    if (children) {
+      return <StyledRoot ref={ref}>{children}</StyledRoot>
+    }
+
+    // Otherwise use Props API
+    return (
+      <StyledRoot ref={ref}>
+        {label && (
+          <InputLabel optionalText={optionalText} state={state}>
+            {label}
+          </InputLabel>
+        )}
+        <InputField state={state} {...inputFieldProps} />
+        {description && (
+          <InputDescription state={state}>{description}</InputDescription>
+        )}
+        {error && state === "error" && <InputError>{error}</InputError>}
+      </StyledRoot>
+    )
+  }
+)
+
+InputRoot.displayName = "Input"
+
+type InputComponent = React.ForwardRefExoticComponent<
+  InputProps & React.RefAttributes<View>
+> & {
+  Root: typeof StyledRoot
+  Label: typeof InputLabel
+  Field: typeof InputField
+  Description: typeof InputDescription
+  Error: typeof InputError
+}
+
+export const Input = Object.assign(InputRoot, {
+  Root: StyledRoot,
+  Label: InputLabel,
+  Field: InputField,
+  Description: InputDescription,
+  Error: InputError
+}) as InputComponent

package/src/components/atoms/Input/InputDescription.tsx

@@ -0,0 +1,49 @@
+import React from "react"
+import { View, ViewProps } from "react-native"
+import styled from "@emotion/native"
+import { useTheme } from "@emotion/react"
+import { Typography } from "../Typography"
+import type { InputState } from "./InputField"
+
+type InputDescriptionOwnProps = {
+  state?: InputState
+  children: React.ReactNode
+}
+
+export type InputDescriptionProps = InputDescriptionOwnProps &
+  Omit<ViewProps, keyof InputDescriptionOwnProps>
+
+const StyledDescriptionRow = styled(View)({
+  flexDirection: "row",
+  alignItems: "center"
+})
+
+/**
+ * Description/help text component for Input fields.
+ *
+ * @param state - Visual state of the input (affects description color for error state)
+ * @param children - Description text content
+ */
+export const InputDescription = React.forwardRef<View, InputDescriptionProps>(
+  ({ state = "default", children, ...rest }, ref) => {
+    const theme = useTheme()
+    const { colour, description } = theme.tokens.components.inputs
+
+    return (
+      <StyledDescriptionRow ref={ref} {...rest}>
+        <Typography
+          token={description.text.default}
+          color={
+            state === "error"
+              ? colour.description.error
+              : colour.description.default
+          }
+        >
+          {children}
+        </Typography>
+      </StyledDescriptionRow>
+    )
+  }
+)
+
+InputDescription.displayName = "Input.Description"

package/src/components/atoms/Input/InputError.tsx

@@ -0,0 +1,39 @@
+import React from "react"
+import { View, ViewProps } from "react-native"
+import styled from "@emotion/native"
+import { useTheme } from "@emotion/react"
+import { Typography } from "../Typography"
+
+export type InputErrorProps = {
+  children?: React.ReactNode
+} & ViewProps
+
+const StyledErrorRow = styled(View)({
+  flexDirection: "row",
+  alignItems: "center"
+})
+
+/**
+ * Error message component for Input fields.
+ *
+ * @param children - Error message text
+ */
+export const InputError = React.forwardRef<View, InputErrorProps>(
+  ({ children, ...rest }, ref) => {
+    const theme = useTheme()
+    const { colour, description } = theme.tokens.components.inputs
+
+    return (
+      <StyledErrorRow ref={ref} {...rest}>
+        <Typography
+          token={description.text.default}
+          color={colour.description.error}
+        >
+          {children}
+        </Typography>
+      </StyledErrorRow>
+    )
+  }
+)
+
+InputError.displayName = "Input.Error"