@butternutbox/pawprint-native 0.0.1

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

@@ -0,0 +1,91 @@
+import React, { useEffect, useRef } from "react"
+import { Animated, Easing, View, ViewProps } from "react-native"
+import styled from "@emotion/native"
+import { useTheme } from "@emotion/react"
+
+type SpinnerSize = "sm" | "md" | "lg"
+type SpinnerVariant = "dark" | "light"
+
+type SpinnerOwnProps = {
+  size?: SpinnerSize
+  variant?: SpinnerVariant
+}
+
+type SpinnerProps = SpinnerOwnProps & Omit<ViewProps, keyof SpinnerOwnProps>
+
+const parseTokenValue = (value: string): number => parseFloat(value)
+
+const StyledSpinner = styled(View)({})
+
+/**
+ * A spinner component for indicating indeterminate loading states.
+ *
+ * @example
+ * ```tsx
+ * import { Spinner } from "@butternutbox/pawprint-native"
+ *
+ * <Spinner />
+ * <Spinner size="lg" variant="light" />
+ * ```
+ *
+ * @param size - *(optional)* Size variant: sm, md (default), lg
+ * @param variant - *(optional)* Colour variant: dark (default), light
+ */
+const Spinner = React.forwardRef<View, SpinnerProps>(
+  ({ size = "md", variant = "dark", style, ...rest }, ref) => {
+    const theme = useTheme()
+    const spinAnim = useRef(new Animated.Value(0)).current
+
+    const { size: sizeTokens, colour } = theme.tokens.components.spinner
+    const borderWidth = parseTokenValue(
+      theme.tokens.semantics.dimensions.borderWidth.md
+    )
+    const baseColor = colour.background.base[variant]
+    const progressColor = colour.background.progress[variant]
+    const dimension = parseTokenValue(sizeTokens[size])
+
+    useEffect(() => {
+      const animation = Animated.loop(
+        Animated.timing(spinAnim, {
+          toValue: 1,
+          duration: 600,
+          easing: Easing.linear,
+          useNativeDriver: true
+        })
+      )
+      animation.start()
+      return () => animation.stop()
+    }, [spinAnim])
+
+    const spin = spinAnim.interpolate({
+      inputRange: [0, 1],
+      outputRange: ["0deg", "360deg"]
+    })
+
+    return (
+      <StyledSpinner ref={ref} {...rest}>
+        <Animated.View
+          accessibilityRole="progressbar"
+          accessibilityLabel="Loading"
+          style={[
+            {
+              width: dimension,
+              height: dimension,
+              borderRadius: dimension / 2,
+              borderWidth,
+              borderColor: baseColor,
+              borderTopColor: progressColor,
+              transform: [{ rotate: spin }]
+            },
+            style
+          ]}
+        />
+      </StyledSpinner>
+    )
+  }
+)
+
+Spinner.displayName = "Spinner"
+
+export { Spinner }
+export type { SpinnerProps, SpinnerSize, SpinnerVariant }

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

@@ -0,0 +1,2 @@
+export { Spinner } from "./Spinner"
+export type { SpinnerProps, SpinnerSize, SpinnerVariant } from "./Spinner"

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

@@ -0,0 +1,120 @@
+import React, { useState } from "react"
+import { View, StyleSheet } from "react-native"
+import { Switch } from "./Switch"
+import type { SwitchProps } from "./Switch"
+import { Typography } from "../Typography"
+
+export default {
+  title: "Atoms/Switch",
+  component: Switch,
+  argTypes: {
+    label: {
+      control: { type: "text" },
+      description: "Main label text"
+    },
+    subText: {
+      control: { type: "text" },
+      description: "Optional descriptive subtext"
+    },
+    disabled: {
+      control: { type: "boolean" },
+      description: "Prevents interaction"
+    },
+    defaultChecked: {
+      control: { type: "boolean" },
+      description: "Initial checked state (uncontrolled)"
+    }
+  }
+}
+
+export const Playground = (args: SwitchProps) => <Switch {...args} />
+Playground.args = {
+  label: "Notifications",
+  subText: "Receive push notifications",
+  disabled: false,
+  defaultChecked: false
+}
+
+export const ContentVariants = () => (
+  <View style={styles.column}>
+    <View style={styles.section}>
+      <Typography size="sm" weight="semiBold" color="tertiary">
+        No label
+      </Typography>
+      <Switch />
+    </View>
+    <View style={styles.section}>
+      <Typography size="sm" weight="semiBold" color="tertiary">
+        Label only
+      </Typography>
+      <Switch label="SMS Delivery Notifications" />
+    </View>
+    <View style={styles.section}>
+      <Typography size="sm" weight="semiBold" color="tertiary">
+        Label + subtext
+      </Typography>
+      <Switch
+        label="SMS Delivery Notifications"
+        subText="I want to receive SMS notifications about my deliveries"
+      />
+    </View>
+  </View>
+)
+
+export const States = () => (
+  <View style={styles.column}>
+    <View style={styles.section}>
+      <Typography size="sm" weight="semiBold" color="tertiary">
+        Enabled (off)
+      </Typography>
+      <Switch label="Enabled switch" />
+    </View>
+    <View style={styles.section}>
+      <Typography size="sm" weight="semiBold" color="tertiary">
+        Enabled (on)
+      </Typography>
+      <Switch label="Enabled switch" defaultChecked />
+    </View>
+    <View style={styles.section}>
+      <Typography size="sm" weight="semiBold" color="tertiary">
+        Disabled (off)
+      </Typography>
+      <Switch label="Disabled switch" disabled />
+    </View>
+    <View style={styles.section}>
+      <Typography size="sm" weight="semiBold" color="tertiary">
+        Disabled (on)
+      </Typography>
+      <Switch label="Disabled switch" disabled defaultChecked />
+    </View>
+  </View>
+)
+
+export const Controlled = () => {
+  const [checked, setChecked] = useState(false)
+
+  return (
+    <View style={styles.column}>
+      <Typography size="sm" weight="semiBold" color="tertiary">
+        Controlled: {checked ? "ON" : "OFF"}
+      </Typography>
+      <Switch
+        label="Controlled switch"
+        subText="Toggle me to see state change"
+        checked={checked}
+        onCheckedChange={setChecked}
+      />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  column: {
+    flexDirection: "column",
+    gap: 24
+  },
+  section: {
+    flexDirection: "column",
+    gap: 8
+  }
+})

package/src/components/atoms/Switch/Switch.tsx

@@ -0,0 +1,196 @@
+import React, { useEffect, useRef } from "react"
+import { View, Animated, ViewProps } from "react-native"
+import styled from "@emotion/native"
+import { useTheme } from "@emotion/react"
+import * as SwitchPrimitive from "@rn-primitives/switch"
+import { Typography } from "../Typography"
+
+type SwitchOwnProps = {
+  label?: React.ReactNode
+  subText?: React.ReactNode
+  disabled?: boolean
+  checked?: boolean
+  defaultChecked?: boolean
+  onCheckedChange?: (checked: boolean) => void
+}
+
+export type SwitchProps = SwitchOwnProps & Omit<ViewProps, keyof SwitchOwnProps>
+
+const parseTokenValue = (value: string): number => parseFloat(value)
+
+const StyledContainer = styled(View)<{
+  switchGap: number
+  switchOpacity: number
+}>(({ switchGap, switchOpacity }) => ({
+  flexDirection: "row",
+  alignItems: "flex-start",
+  gap: switchGap,
+  opacity: switchOpacity
+}))
+
+const StyledControl = styled(SwitchPrimitive.Root)<{
+  switchChecked: boolean
+  controlWidth: number
+  controlHeight: number
+  controlBorderWidth: number
+  controlBorderColor: string
+  controlBgChecked: string
+  controlBgDefault: string
+}>(
+  ({
+    switchChecked,
+    controlWidth,
+    controlHeight,
+    controlBorderWidth,
+    controlBorderColor,
+    controlBgChecked,
+    controlBgDefault
+  }) => ({
+    position: "relative",
+    width: controlWidth,
+    height: controlHeight,
+    minWidth: controlWidth,
+    minHeight: controlHeight,
+    borderRadius: controlHeight,
+    borderWidth: switchChecked ? 0 : controlBorderWidth,
+    borderColor: switchChecked ? "transparent" : controlBorderColor,
+    backgroundColor: switchChecked ? controlBgChecked : controlBgDefault,
+    justifyContent: "center"
+  })
+)
+
+const StyledThumb = styled(Animated.View)<{
+  thumbSize: number
+  thumbBgColor: string
+}>(({ thumbSize, thumbBgColor }) => ({
+  width: thumbSize,
+  height: thumbSize,
+  borderRadius: thumbSize / 2,
+  backgroundColor: thumbBgColor,
+  position: "absolute"
+}))
+
+const StyledContent = styled(View)<{
+  contentGap: number
+}>(({ contentGap }) => ({
+  gap: contentGap
+}))
+
+/**
+ * Switch component for toggling between two states, on and off.
+ *
+ * @param {React.ReactNode} [label] - Main label text or content.
+ * @param {React.ReactNode} [subText] - Optional descriptive subtext.
+ * @param {boolean} [disabled=false] - Whether the switch is disabled.
+ * @param {boolean} [checked] - Controlled checked state.
+ * @param {(checked: boolean) => void} [onCheckedChange] - Controlled change handler.
+ *
+ * @example
+ * <Switch label="SMS Delivery Notifications" subText="I want to receive SMS notifications" />
+ */
+export const Switch = React.forwardRef<View, SwitchProps>(
+  (
+    {
+      label,
+      subText,
+      disabled = false,
+      checked: controlledChecked,
+      defaultChecked = false,
+      onCheckedChange,
+      ...rest
+    },
+    ref
+  ) => {
+    const theme = useTheme()
+    const { size, colour, opacity, borderWidth, spacing, typography } =
+      theme.tokens.components.switch
+
+    const isControlled = controlledChecked !== undefined
+    const [internalChecked, setInternalChecked] = React.useState(defaultChecked)
+    const isChecked = isControlled ? controlledChecked : internalChecked
+
+    const controlWidth = parseTokenValue(size.control.width)
+    const controlHeight = parseTokenValue(size.control.height)
+    const thumbSize = parseTokenValue(size.thumb.default)
+    const borderWidthValue = parseTokenValue(borderWidth.control.default)
+    const outerInset = 5
+    const inset = outerInset - borderWidthValue
+    const translateX = controlWidth - thumbSize - outerInset * 2
+
+    const animValue = useRef(new Animated.Value(isChecked ? 1 : 0)).current
+
+    useEffect(() => {
+      Animated.timing(animValue, {
+        toValue: isChecked ? 1 : 0,
+        duration: 200,
+        useNativeDriver: true
+      }).start()
+    }, [isChecked, animValue])
+
+    const thumbTranslateX = animValue.interpolate({
+      inputRange: [0, 1],
+      outputRange: [inset, inset + translateX]
+    })
+
+    const handleCheckedChange = (checked: boolean) => {
+      if (!isControlled) {
+        setInternalChecked(checked)
+      }
+      onCheckedChange?.(checked)
+    }
+
+    return (
+      <StyledContainer
+        ref={ref}
+        switchGap={parseTokenValue(spacing.gap)}
+        switchOpacity={disabled ? parseFloat(opacity.disabled) : 1}
+        {...rest}
+      >
+        <StyledControl
+          checked={isChecked}
+          onCheckedChange={handleCheckedChange}
+          disabled={disabled}
+          switchChecked={isChecked}
+          controlWidth={controlWidth}
+          controlHeight={controlHeight}
+          controlBorderWidth={borderWidthValue}
+          controlBorderColor={colour.control.border.default}
+          controlBgChecked={colour.control.background.selected}
+          controlBgDefault={colour.control.background.default}
+        >
+          <SwitchPrimitive.Thumb asChild>
+            <StyledThumb
+              thumbSize={thumbSize}
+              thumbBgColor={
+                isChecked
+                  ? colour.thumb.background.selected
+                  : colour.thumb.background.default
+              }
+              style={{ transform: [{ translateX: thumbTranslateX }] }}
+            />
+          </SwitchPrimitive.Thumb>
+        </StyledControl>
+
+        {(label || subText) && (
+          <StyledContent contentGap={parseTokenValue(spacing.content.gap)}>
+            {label && (
+              <Typography token={typography.label} color={colour.text.title}>
+                {label}
+              </Typography>
+            )}
+            {subText && (
+              <Typography
+                token={typography.subText}
+                color={colour.text.subtext}
+              >
+                {subText}
+              </Typography>
+            )}
+          </StyledContent>
+        )}
+      </StyledContainer>
+    )
+  }
+)
+
+Switch.displayName = "Switch"

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

@@ -0,0 +1,2 @@
+export { Switch } from "./Switch"
+export type { SwitchProps } from "./Switch"

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

@@ -0,0 +1,89 @@
+import React from "react"
+import { View, StyleSheet, Text } from "react-native"
+import { Tag } from "./Tag"
+import type { TagProps } from "./Tag"
+
+export default {
+  title: "Atoms/Tag",
+  component: Tag,
+  argTypes: {
+    variant: {
+      control: { type: "select" },
+      options: [
+        "primary",
+        "secondary",
+        "tertiary",
+        "promo",
+        "success",
+        "warning",
+        "error"
+      ],
+      description: "Visual style variant"
+    },
+    size: {
+      control: { type: "select" },
+      options: ["small", "medium", "large"],
+      description: "Size of the tag"
+    },
+    children: {
+      control: { type: "text" },
+      description: "Tag label text"
+    }
+  }
+}
+
+export const Playground = (args: TagProps) => <Tag {...args} />
+Playground.args = {
+  children: "Tag",
+  variant: "primary",
+  size: "medium"
+}
+
+const tagVariants = [
+  "primary",
+  "secondary",
+  "tertiary",
+  "promo",
+  "success",
+  "warning",
+  "error"
+] as const
+const tagSizes = ["small", "medium", "large"] as const
+
+export const AllVariants = () => (
+  <View style={styles.column}>
+    {tagVariants.map((variant) => (
+      <View key={variant} style={styles.section}>
+        <Text style={styles.label}>{variant}</Text>
+        <View style={styles.row}>
+          {tagSizes.map((size) => (
+            <Tag key={size} variant={variant} size={size}>
+              {size}
+            </Tag>
+          ))}
+        </View>
+      </View>
+    ))}
+  </View>
+)
+
+const styles = StyleSheet.create({
+  column: {
+    flexDirection: "column",
+    gap: 24
+  },
+  section: {
+    flexDirection: "column",
+    gap: 8
+  },
+  row: {
+    flexDirection: "row",
+    gap: 12,
+    alignItems: "center"
+  },
+  label: {
+    fontSize: 13,
+    fontWeight: "600",
+    color: "#666"
+  }
+})

package/src/components/atoms/Tag/Tag.tsx

@@ -0,0 +1,122 @@
+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 { Icon, type PawprintIcon } from "../Icon"
+
+type TagVariant =
+  | "primary"
+  | "secondary"
+  | "tertiary"
+  | "promo"
+  | "success"
+  | "warning"
+  | "error"
+
+type TagSize = "small" | "medium" | "large"
+
+type TagOwnProps = {
+  children: React.ReactNode
+  variant?: TagVariant
+  size?: TagSize
+  icon?: PawprintIcon
+}
+
+export type TagProps = TagOwnProps & Omit<ViewProps, keyof TagOwnProps>
+
+const parseTokenValue = (value: string): number => parseFloat(value)
+
+const StyledTag = styled(View)<{
+  tagVariant: TagVariant
+  tagSize: TagSize
+}>(({ theme, tagVariant, tagSize }) => {
+  const { sizing, spacing, colour, badge } = theme.tokens.components.tags
+
+  const backgroundColorMap = {
+    primary: colour.primary.background,
+    secondary: colour.primary.secondary,
+    tertiary: colour.primary.tertiery,
+    promo: colour.primary.promo,
+    success: colour.primary.success,
+    warning: colour.primary.warning,
+    error: colour.primary.error
+  } as const
+
+  return {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    height: parseTokenValue(sizing[tagSize].height),
+    minWidth: parseTokenValue(sizing[tagSize].minWidth),
+    paddingHorizontal: parseTokenValue(spacing.horizontalPadding),
+    gap: parseTokenValue(spacing[tagSize].gap),
+    borderRadius: parseTokenValue(badge.borderRadius.default),
+    backgroundColor: backgroundColorMap[tagVariant]
+  }
+})
+
+/**
+ * Tag component for labelling and categorising content.
+ *
+ * @param {React.ReactNode} children - Tag label text.
+ * @param {"primary" | "secondary" | "tertiary" | "promo" | "success" | "warning" | "error"} [variant="primary"] - Visual style variant.
+ * @param {"small" | "medium" | "large"} [size="medium"] - Size of the tag.
+ * @param {PawprintIcon} [icon] - Optional leading icon from @butternutbox/pawprint-icons.
+ *
+ * @example
+ * <Tag>Company news</Tag>
+ * <Tag variant="success" size="large" icon={CheckCircle}>Verified</Tag>
+ */
+export const Tag = React.forwardRef<View, TagProps>(
+  ({ variant = "primary", size = "medium", icon, children, ...rest }, ref) => {
+    const theme = useTheme()
+    const { typography, colour } = theme.tokens.components.tags
+
+    const iconSizeMap = {
+      small: "xs",
+      medium: "xs",
+      large: "sm"
+    } as const
+
+    const iconColourMap = {
+      primary: "primary",
+      secondary: "primary",
+      tertiary: "primary",
+      promo: "promo",
+      success: "success",
+      warning: "warning",
+      error: "error"
+    } as const
+
+    const textColorMap = {
+      primary: colour.text.default,
+      secondary: colour.text.default,
+      tertiary: colour.text.default,
+      promo: colour.text.promo,
+      success: colour.text.success,
+      warning: colour.text.warning,
+      error: colour.text.error
+    }
+
+    return (
+      <StyledTag ref={ref} tagVariant={variant} tagSize={size} {...rest}>
+        {icon && (
+          <Icon
+            icon={icon}
+            size={iconSizeMap[size]}
+            colour={iconColourMap[variant]}
+          />
+        )}
+        <Typography
+          token={typography[size].default}
+          color={textColorMap[variant]}
+        >
+          {children}
+        </Typography>
+      </StyledTag>
+    )
+  }
+)
+
+Tag.displayName = "Tag"

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

@@ -0,0 +1,2 @@
+export { Tag } from "./Tag"
+export type { TagProps } from "./Tag"