@butternutbox/pawprint-native 0.0.1

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

@@ -0,0 +1,119 @@
+import React from "react"
+import { View, TextInput, TextInputProps } from "react-native"
+import styled from "@emotion/native"
+import { useTheme } from "@emotion/react"
+
+export type InputState = "default" | "error" | "success"
+
+type InputFieldOwnProps = {
+  leadingIcon?: React.ReactNode
+  trailingIcon?: React.ReactNode
+  state?: InputState
+}
+
+export type InputFieldProps = InputFieldOwnProps &
+  Omit<TextInputProps, keyof InputFieldOwnProps>
+
+const parseTokenValue = (value: string): number => parseFloat(value)
+
+const StyledInputWrapper = styled(View)<{
+  wrapperGap: number
+  wrapperMinWidth: number
+  wrapperHeight: number
+  wrapperPaddingVertical: number
+  wrapperPaddingHorizontal: number
+  wrapperBgColor: string
+  wrapperBorderWidth: number
+  wrapperBorderColor: string
+  wrapperBorderRadius: number
+}>(
+  ({
+    wrapperGap,
+    wrapperMinWidth,
+    wrapperHeight,
+    wrapperPaddingVertical,
+    wrapperPaddingHorizontal,
+    wrapperBgColor,
+    wrapperBorderWidth,
+    wrapperBorderColor,
+    wrapperBorderRadius
+  }) => ({
+    flexDirection: "row",
+    alignItems: "center",
+    gap: wrapperGap,
+    minWidth: wrapperMinWidth,
+    width: "100%",
+    height: wrapperHeight,
+    paddingVertical: wrapperPaddingVertical,
+    paddingHorizontal: wrapperPaddingHorizontal,
+    backgroundColor: wrapperBgColor,
+    borderWidth: wrapperBorderWidth,
+    borderColor: wrapperBorderColor,
+    borderRadius: wrapperBorderRadius
+  })
+)
+
+const StyledInput = styled(TextInput)<{
+  inputColor: string
+}>(({ inputColor }) => ({
+  flex: 1,
+  minWidth: 0,
+  minHeight: 0,
+  padding: 0,
+  color: inputColor
+}))
+
+const StyledIconSlot = styled(View)({
+  alignItems: "center",
+  justifyContent: "center",
+  flexShrink: 0
+})
+
+/**
+ * InputField component - The input field wrapper with icons and visual states.
+ *
+ * @param {React.ReactNode} [leadingIcon] - Icon to display before the input
+ * @param {React.ReactNode} [trailingIcon] - Icon to display after the input
+ * @param {InputState} [state] - Visual state of the input (default, error, success)
+ */
+export const InputField = React.forwardRef<TextInput, InputFieldProps>(
+  ({ leadingIcon, trailingIcon, state = "default", style, ...rest }, ref) => {
+    const theme = useTheme()
+    const { spacing, colour, borderWidth, borderRadius, size } =
+      theme.tokens.components.inputs
+
+    const stateBorderColorMap = {
+      error: colour.field.border.error,
+      success: colour.field.border.success,
+      default: colour.field.border.default
+    }
+
+    return (
+      <StyledInputWrapper
+        wrapperGap={parseTokenValue(spacing.field.gap)}
+        wrapperMinWidth={parseTokenValue(size.field.minWidth)}
+        wrapperHeight={parseTokenValue(size.field.height)}
+        wrapperPaddingVertical={parseTokenValue(spacing.field.verticalPadding)}
+        wrapperPaddingHorizontal={parseTokenValue(
+          spacing.field.horizontalPadding
+        )}
+        wrapperBgColor={colour.field.background.default}
+        wrapperBorderWidth={parseTokenValue(borderWidth.field.default)}
+        wrapperBorderColor={stateBorderColorMap[state]}
+        wrapperBorderRadius={parseTokenValue(borderRadius.field.default)}
+      >
+        {leadingIcon && <StyledIconSlot>{leadingIcon}</StyledIconSlot>}
+        <StyledInput
+          ref={ref}
+          inputColor={colour.field.text.default}
+          style={style}
+          placeholderTextColor={colour.field.text.placeholder}
+          {...rest}
+        />
+        {trailingIcon && <StyledIconSlot>{trailingIcon}</StyledIconSlot>}
+      </StyledInputWrapper>
+    )
+  }
+)
+
+InputField.displayName = "Input.Field"

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

@@ -0,0 +1,61 @@
+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 InputLabelOwnProps = {
+  optionalText?: string
+  state?: InputState
+  children: React.ReactNode
+}
+
+export type InputLabelProps = InputLabelOwnProps &
+  Omit<ViewProps, keyof InputLabelOwnProps>
+
+const parseTokenValue = (value: string): number => parseFloat(value)
+
+const StyledLabelRow = styled(View)<{
+  labelGap: number
+}>(({ labelGap }) => ({
+  flexDirection: "row",
+  alignItems: "center",
+  gap: labelGap
+}))
+
+/**
+ * Label component for Input fields.
+ *
+ * @param optionalText - Optional text to display next to label (e.g., "(optional)")
+ * @param state - Visual state of the input (affects label color for error state)
+ * @param children - Label text content
+ */
+export const InputLabel = React.forwardRef<View, InputLabelProps>(
+  ({ optionalText, state = "default", children, ...rest }, ref) => {
+    const theme = useTheme()
+    const { colour, text, spacing } = theme.tokens.components.inputs
+
+    return (
+      <StyledLabelRow
+        ref={ref}
+        labelGap={parseTokenValue(spacing.label.gap)}
+        {...rest}
+      >
+        <Typography
+          token={text.label}
+          color={state === "error" ? colour.label.error : colour.label.default}
+        >
+          {children}
+        </Typography>
+        {optionalText && (
+          <Typography token={text.optional} color={colour.label.optional}>
+            {optionalText}
+          </Typography>
+        )}
+      </StyledLabelRow>
+    )
+  }
+)
+
+InputLabel.displayName = "Input.Label"

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

@@ -0,0 +1,10 @@
+export { Input } from "./Input"
+export type { InputProps } from "./Input"
+export { InputLabel } from "./InputLabel"
+export type { InputLabelProps } from "./InputLabel"
+export { InputField } from "./InputField"
+export type { InputFieldProps } from "./InputField"
+export { InputDescription } from "./InputDescription"
+export type { InputDescriptionProps } from "./InputDescription"
+export { InputError } from "./InputError"
+export type { InputErrorProps } from "./InputError"

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

@@ -0,0 +1,119 @@
+import React from "react"
+import { View, StyleSheet } from "react-native"
+import { Link } from "./Link"
+import type { LinkProps } from "./Link"
+import { Typography } from "../Typography"
+
+export default {
+  title: "Atoms/Link",
+  component: Link,
+  argTypes: {
+    size: {
+      control: { type: "select" },
+      options: ["sm", "md", "lg"],
+      description: "Size variant (standalone only)"
+    },
+    weight: {
+      control: { type: "select" },
+      options: ["medium", "semiBold", "bold"],
+      description: "Font weight"
+    },
+    standalone: {
+      control: { type: "boolean" },
+      description: "Shows trailing arrow indicator"
+    },
+    disabled: {
+      control: { type: "boolean" },
+      description: "Prevents interaction"
+    },
+    href: {
+      control: { type: "text" },
+      description: "URL to open when pressed"
+    },
+    children: {
+      control: { type: "text" },
+      description: "Link text"
+    }
+  }
+}
+
+export const Playground = (args: LinkProps) => <Link {...args} />
+Playground.args = {
+  children: "Find out more",
+  size: "md",
+  weight: "semiBold",
+  standalone: true,
+  disabled: false,
+  href: "https://example.com"
+}
+
+export const StandaloneAllSizes = () => (
+  <View style={styles.column}>
+    {(["sm", "md", "lg"] as const).map((size) => (
+      <View key={size} style={styles.section}>
+        <Typography size="sm" weight="semiBold" color="tertiary">
+          {size}
+        </Typography>
+        <Link size={size} standalone href="https://example.com">
+          Find out more
+        </Link>
+      </View>
+    ))}
+  </View>
+)
+
+export const AllStates = () => (
+  <View style={styles.column}>
+    <View style={styles.section}>
+      <Typography size="sm" weight="semiBold" color="tertiary">
+        Standalone enabled
+      </Typography>
+      <Link standalone href="https://example.com">
+        Find out more
+      </Link>
+    </View>
+    <View style={styles.section}>
+      <Typography size="sm" weight="semiBold" color="tertiary">
+        Standalone disabled
+      </Typography>
+      <Link standalone disabled href="https://example.com">
+        Find out more
+      </Link>
+    </View>
+    <View style={styles.section}>
+      <Typography size="sm" weight="semiBold" color="tertiary">
+        Inline enabled
+      </Typography>
+      <View style={styles.row}>
+        <Typography size="md">Read our </Typography>
+        <Link href="https://example.com">terms and conditions</Link>
+      </View>
+    </View>
+    <View style={styles.section}>
+      <Typography size="sm" weight="semiBold" color="tertiary">
+        Inline disabled
+      </Typography>
+      <View style={styles.row}>
+        <Typography size="md">Read our </Typography>
+        <Link disabled href="https://example.com">
+          terms and conditions
+        </Link>
+      </View>
+    </View>
+  </View>
+)
+
+const styles = StyleSheet.create({
+  column: {
+    flexDirection: "column",
+    gap: 24
+  },
+  section: {
+    flexDirection: "column",
+    gap: 8
+  },
+  row: {
+    flexDirection: "row",
+    alignItems: "center"
+  }
+})

package/src/components/atoms/Link/Link.tsx

@@ -0,0 +1,118 @@
+import React from "react"
+import {
+  Pressable,
+  View,
+  PressableProps,
+  Linking,
+  ViewStyle
+} from "react-native"
+import { useTheme } from "@emotion/react"
+import { Typography } from "../Typography"
+
+export type LinkSize = "sm" | "md" | "lg"
+export type LinkWeight = "medium" | "semiBold" | "bold"
+
+type LinkOwnProps = {
+  weight?: LinkWeight
+  standalone?: boolean
+  size?: LinkSize
+  disabled?: boolean
+  href?: string
+  children?: React.ReactNode
+}
+
+export type LinkProps = LinkOwnProps &
+  Omit<PressableProps, keyof LinkOwnProps | "children">
+
+/**
+ * Link component for navigational elements.
+ *
+ * - Inline (default) — underlined, inherits font size from surrounding context.
+ * - Standalone — includes a trailing arrow indicator.
+ *
+ * @param {"sm" | "md" | "lg"} [size="md"] - Size of standalone link text.
+ * @param {"medium" | "semiBold" | "bold"} [weight="semiBold"] - Font weight.
+ * @param {boolean} [standalone=false] - Renders with a trailing arrow.
+ * @param {boolean} [disabled=false] - Disables the link.
+ * @param {string} [href] - URL to open when pressed.
+ *
+ * @example
+ * <Link href="https://example.com" standalone>Find out more</Link>
+ */
+export const Link = React.forwardRef<View, LinkProps>(
+  (
+    {
+      size = "md",
+      weight = "semiBold",
+      standalone = false,
+      disabled = false,
+      href,
+      children,
+      onPress,
+      style,
+      ...rest
+    },
+    ref
+  ) => {
+    const theme = useTheme()
+    const { typography, colour } = theme.tokens.semantics
+    const linkColour = colour.text.link
+
+    const handlePress = (
+      e: Parameters<NonNullable<PressableProps["onPress"]>>[0]
+    ) => {
+      if (onPress) {
+        onPress(e)
+      } else if (href) {
+        Linking.openURL(href)
+      }
+    }
+
+    return (
+      <Pressable
+        ref={ref}
+        disabled={disabled}
+        onPress={handlePress}
+        accessibilityRole="link"
+        accessibilityState={{ disabled }}
+        style={({ pressed }) => {
+          const baseStyle: ViewStyle = {
+            ...(standalone && {
+              flexDirection: "row",
+              alignItems: "center",
+              gap: 4
+            }),
+            opacity: disabled ? 0.5 : 1
+          }
+          return [
+            baseStyle,
+            typeof style === "function" ? style({ pressed }) : style
+          ]
+        }}
+        {...rest}
+      >
+        {({ pressed }) => (
+          <>
+            <Typography
+              token={typography.link[weight][size]}
+              color={pressed ? linkColour.hover : linkColour.default}
+              textDecoration={standalone ? "none" : "underline"}
+            >
+              {children}
+            </Typography>
+            {standalone && (
+              <Typography
+                token={typography.link[weight][size]}
+                color={pressed ? linkColour.hover : linkColour.default}
+              >
+                {" →"}
+              </Typography>
+            )}
+          </>
+        )}
+      </Pressable>
+    )
+  }
+)
+
+Link.displayName = "Link"

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

@@ -0,0 +1,2 @@
+export { Link } from "./Link"
+export type { LinkProps, LinkSize, LinkWeight } from "./Link"

package/src/components/atoms/Logo/Logo.registry.ts

@@ -0,0 +1,39 @@
+import React from "react"
+import type { LogoBrand, LogoVariant } from "./Logo"
+
+type LogoSvgComponent = React.ComponentType<{
+  width?: number
+  height?: number
+}>
+
+// Logo registry - consumers should register their logo components here
+// or provide them via a registration function
+const LOGOS: Record<
+  LogoBrand,
+  Partial<Record<LogoVariant, LogoSvgComponent>>
+> = {
+  butternut: {},
+  psibufet: {},
+  bcorp: {}
+}
+
+function resolveLogo(
+  brand: LogoBrand,
+  variant: LogoVariant
+): LogoSvgComponent | undefined {
+  return LOGOS[brand]?.[variant]
+}
+
+function registerLogo(
+  brand: LogoBrand,
+  variant: LogoVariant,
+  component: LogoSvgComponent
+): void {
+  if (!LOGOS[brand]) {
+    LOGOS[brand] = {}
+  }
+  LOGOS[brand][variant] = component
+}
+
+export { resolveLogo, registerLogo, LOGOS }
+export type { LogoSvgComponent }

package/src/components/atoms/Logo/Logo.tsx

@@ -0,0 +1,68 @@
+import React from "react"
+import { View, ViewProps } from "react-native"
+import styled from "@emotion/native"
+import { resolveLogo } from "./Logo.registry"
+
+type LogoBrand = "butternut" | "psibufet" | "bcorp"
+type LogoVariant =
+  | "wordmark"
+  | "primary"
+  | "tabbed-top"
+  | "tabbed-bottom"
+  | "favicon"
+
+type LogoOwnProps = {
+  brand: LogoBrand
+  variant?: LogoVariant
+  "aria-label"?: string
+}
+
+type LogoProps = LogoOwnProps & Omit<ViewProps, keyof LogoOwnProps>
+
+const StyledRoot = styled(View)({
+  alignItems: "center",
+  justifyContent: "center",
+  flexShrink: 0
+})
+
+/**
+ * Renders a brand logo SVG.
+ *
+ * @example
+ * ```tsx
+ * import { Logo } from "@butternutbox/pawprint-native"
+ *
+ * <Logo brand="butternut" variant="primary" aria-label="ButternutBox" />
+ * ```
+ *
+ * @param brand - **(required)** Brand: "butternut", "psibufet", or "bcorp"
+ * @param variant - *(optional)* Logo variant (default: "primary"). Ignored for "bcorp".
+ * @param aria-label - *(optional)* Accessible label
+ */
+const Logo = React.forwardRef<View, LogoProps>(
+  ({ brand, variant = "primary", "aria-label": ariaLabel, ...rest }, ref) => {
+    const effectiveVariant = brand === "bcorp" ? "primary" : variant
+    const LogoComponent = resolveLogo(brand, effectiveVariant)
+
+    if (!LogoComponent) {
+      return null
+    }
+
+    return (
+      <StyledRoot
+        ref={ref}
+        accessibilityRole={ariaLabel ? "image" : undefined}
+        accessibilityLabel={ariaLabel}
+        accessible={!!ariaLabel}
+        {...rest}
+      >
+        <LogoComponent />
+      </StyledRoot>
+    )
+  }
+)
+
+Logo.displayName = "Logo"
+
+export { Logo }
+export type { LogoProps, LogoBrand, LogoVariant }

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

@@ -0,0 +1,4 @@
+export { Logo } from "./Logo"
+export type { LogoProps, LogoBrand, LogoVariant } from "./Logo"
+export { resolveLogo, registerLogo } from "./Logo.registry"
+export type { LogoSvgComponent } from "./Logo.registry"

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

@@ -0,0 +1,98 @@
+import React from "react"
+import { View, StyleSheet, Text } from "react-native"
+import { Spinner } from "./Spinner"
+import type { SpinnerProps } from "./Spinner"
+
+export default {
+  title: "Atoms/Spinner",
+  component: Spinner,
+  argTypes: {
+    size: {
+      control: { type: "select" },
+      options: ["sm", "md", "lg"],
+      description: "Size of the spinner"
+    },
+    variant: {
+      control: { type: "select" },
+      options: ["dark", "light"],
+      description: "Colour variant (dark for light backgrounds, light for dark)"
+    }
+  }
+}
+
+export const Playground = (args: SpinnerProps) => <Spinner {...args} />
+Playground.args = {
+  size: "md",
+  variant: "dark"
+}
+
+const spinnerSizes = ["sm", "md", "lg"] as const
+
+export const AllSizes = () => (
+  <View style={styles.column}>
+    <View style={styles.section}>
+      <Text style={styles.label}>Dark variant</Text>
+      <View style={styles.row}>
+        {spinnerSizes.map((size) => (
+          <View key={size} style={styles.item}>
+            <Spinner size={size} variant="dark" />
+            <Text style={styles.sizeLabel}>{size}</Text>
+          </View>
+        ))}
+      </View>
+    </View>
+
+    <View style={styles.section}>
+      <Text style={[styles.label, styles.lightText]}>Light variant</Text>
+      <View style={styles.row}>
+        {spinnerSizes.map((size) => (
+          <View key={size} style={styles.darkItem}>
+            <Spinner size={size} variant="light" />
+            <Text style={[styles.sizeLabel, styles.lightText]}>{size}</Text>
+          </View>
+        ))}
+      </View>
+    </View>
+  </View>
+)
+
+const styles = StyleSheet.create({
+  column: {
+    flexDirection: "column",
+    gap: 32
+  },
+  section: {
+    flexDirection: "column",
+    gap: 12
+  },
+  row: {
+    flexDirection: "row",
+    gap: 24,
+    alignItems: "center"
+  },
+  item: {
+    flexDirection: "column",
+    alignItems: "center",
+    gap: 8
+  },
+  darkItem: {
+    flexDirection: "column",
+    alignItems: "center",
+    gap: 8,
+    backgroundColor: "#1a1a1a",
+    padding: 16,
+    borderRadius: 8
+  },
+  label: {
+    fontSize: 13,
+    fontWeight: "600",
+    color: "#666"
+  },
+  sizeLabel: {
+    fontSize: 12,
+    color: "#666"
+  },
+  lightText: {
+    color: "#ffffff"
+  }
+})