@butternutbox/pawprint-native 0.0.1

package/src/components/molecules/Slider/Slider.tsx

@@ -0,0 +1,303 @@
+import React, { useCallback, useRef } from "react"
+import { View, ViewProps, PanResponder, LayoutChangeEvent } from "react-native"
+import styled from "@emotion/native"
+import { useTheme } from "@emotion/react"
+import * as SliderPrimitive from "@rn-primitives/slider"
+import { Typography } from "../../atoms/Typography"
+
+type SliderOwnProps = {
+  value?: number
+  defaultValue?: number
+  onValueChange?: (value: number) => void
+  onValueCommitted?: (value: number) => void
+  min?: number
+  max?: number
+  step?: number
+  disabled?: boolean
+  leadingLabel?: string
+  trailingLabel?: string
+  leadingIcon?: React.ReactNode
+  trailingIcon?: React.ReactNode
+  description?: string
+}
+
+export type SliderProps = SliderOwnProps & Omit<ViewProps, keyof SliderOwnProps>
+
+const parseTokenValue = (value: string): number => parseFloat(value)
+
+const clamp = (val: number, min: number, max: number): number =>
+  Math.min(Math.max(val, min), max)
+
+const snap = (val: number, step: number, min: number): number => {
+  const steps = Math.round((val - min) / step)
+  return min + steps * step
+}
+
+const StyledSliderRoot = styled(SliderPrimitive.Root)<{
+  sliderGap: number
+  sliderMinWidth: number
+  sliderOpacity: number
+}>(({ sliderGap, sliderMinWidth, sliderOpacity }) => ({
+  gap: sliderGap,
+  minWidth: sliderMinWidth,
+  opacity: sliderOpacity
+}))
+
+const StyledLabelRow = styled(View)<{
+  labelRowGap: number
+}>(({ labelRowGap }) => ({
+  flexDirection: "row",
+  alignItems: "center",
+  gap: labelRowGap
+}))
+
+const StyledLabelSlot = styled(View)<{
+  labelSlotGap: number
+}>(({ labelSlotGap }) => ({
+  flexDirection: "row",
+  alignItems: "center",
+  gap: labelSlotGap,
+  flexShrink: 0
+}))
+
+const StyledTrackArea = styled(View)<{
+  trackAreaHeight: number
+}>(({ trackAreaHeight }) => ({
+  flex: 1,
+  height: trackAreaHeight,
+  justifyContent: "center"
+}))
+
+const StyledTrack = styled(SliderPrimitive.Track)<{
+  trackHeight: number
+  trackBorderRadius: number
+  trackBgColor: string
+  trackBorderWidth: number
+  trackBorderColor: string
+}>(
+  ({
+    trackHeight,
+    trackBorderRadius,
+    trackBgColor,
+    trackBorderWidth,
+    trackBorderColor
+  }) => ({
+    height: trackHeight,
+    borderRadius: trackBorderRadius,
+    backgroundColor: trackBgColor,
+    borderWidth: trackBorderWidth,
+    borderColor: trackBorderColor,
+    overflow: "hidden"
+  })
+)
+
+const StyledRange = styled(SliderPrimitive.Range)<{
+  rangeBgColor: string
+  rangeBorderRadius: number
+}>(({ rangeBgColor, rangeBorderRadius }) => ({
+  height: "100%",
+  backgroundColor: rangeBgColor,
+  borderRadius: rangeBorderRadius
+}))
+
+const StyledThumb = styled(SliderPrimitive.Thumb)<{
+  thumbSize: number
+  thumbBorderRadius: number
+  thumbBgColor: string
+}>(({ thumbSize, thumbBorderRadius, thumbBgColor }) => ({
+  position: "absolute",
+  width: thumbSize,
+  height: thumbSize,
+  borderRadius: thumbBorderRadius,
+  backgroundColor: thumbBgColor,
+  alignItems: "center",
+  justifyContent: "center"
+}))
+
+/**
+ * Slider component for selecting a numeric value within a min/max range.
+ *
+ * @param {number} [value] - Controlled value.
+ * @param {number} [defaultValue] - Uncontrolled initial value.
+ * @param {(value: number) => void} [onValueChange] - Callback fired on every value change.
+ * @param {(value: number) => void} [onValueCommitted] - Callback fired when the user finishes dragging.
+ * @param {number} [min=0] - Minimum value.
+ * @param {number} [max=100] - Maximum value.
+ * @param {number} [step=1] - Step increment.
+ * @param {boolean} [disabled=false] - Prevents interaction.
+ * @param {string} [leadingLabel] - Label to the left of the track.
+ * @param {string} [trailingLabel] - Label to the right of the track.
+ * @param {React.ReactNode} [leadingIcon] - Icon before the leading label.
+ * @param {React.ReactNode} [trailingIcon] - Icon after the trailing label.
+ * @param {string} [description] - Descriptive text below the control.
+ *
+ * @example
+ * <Slider defaultValue={25} leadingLabel="0kg" trailingLabel="50kg+" />
+ */
+export const Slider = React.forwardRef<View, SliderProps>(
+  (
+    {
+      value: controlledValue,
+      defaultValue = 0,
+      onValueChange,
+      onValueCommitted,
+      min = 0,
+      max = 100,
+      step = 1,
+      disabled = false,
+      leadingLabel,
+      trailingLabel,
+      leadingIcon,
+      trailingIcon,
+      description,
+      ...rest
+    },
+    ref
+  ) => {
+    const theme = useTheme()
+    const { slider, buttons } = theme.tokens.components
+    const { dimensions } = theme.tokens.semantics
+
+    const isControlled = controlledValue !== undefined
+    const [internalValue, setInternalValue] = React.useState(defaultValue)
+    const currentValue = isControlled ? controlledValue : internalValue
+
+    const trackWidth = useRef(0)
+    const thumbSize = parseTokenValue(buttons.size.md.height)
+    const trackHeight = parseTokenValue(slider.sizing.track.height)
+
+    const fraction = max > min ? (currentValue - min) / (max - min) : 0
+
+    const handleLayout = (e: LayoutChangeEvent) => {
+      trackWidth.current = e.nativeEvent.layout.width
+    }
+
+    const updateValue = useCallback(
+      (locationX: number) => {
+        if (disabled || trackWidth.current === 0) return
+        const ratio = clamp(locationX / trackWidth.current, 0, 1)
+        const raw = min + ratio * (max - min)
+        const snapped = snap(clamp(raw, min, max), step, min)
+        if (!isControlled) {
+          setInternalValue(snapped)
+        }
+        onValueChange?.(snapped)
+      },
+      [disabled, min, max, step, isControlled, onValueChange]
+    )
+
+    const panResponder = useRef(
+      PanResponder.create({
+        onStartShouldSetPanResponder: () => !disabled,
+        onMoveShouldSetPanResponder: () => !disabled,
+        onPanResponderGrant: (e) => {
+          updateValue(e.nativeEvent.locationX)
+        },
+        onPanResponderMove: (e) => {
+          updateValue(e.nativeEvent.locationX)
+        },
+        onPanResponderRelease: () => {
+          onValueCommitted?.(currentValue)
+        }
+      })
+    ).current
+
+    const hasLeading = leadingIcon !== undefined || leadingLabel !== undefined
+    const hasTrailing =
+      trailingIcon !== undefined || trailingLabel !== undefined
+
+    const labelGap = parseTokenValue(slider.sliderField.spacing.label.gap)
+    const roundBorderRadius = parseTokenValue(dimensions.borderRadius.round)
+
+    return (
+      <StyledSliderRoot
+        ref={ref}
+        value={currentValue}
+        min={min}
+        max={max}
+        disabled={disabled}
+        sliderGap={parseTokenValue(slider.sliderField.spacing.gap)}
+        sliderMinWidth={parseTokenValue(slider.sizing.minWidth)}
+        sliderOpacity={disabled ? parseFloat(buttons.opacity.disabled) : 1}
+        {...rest}
+      >
+        <StyledLabelRow labelRowGap={labelGap}>
+          {hasLeading && (
+            <StyledLabelSlot labelSlotGap={labelGap}>
+              {leadingIcon}
+              {leadingLabel && (
+                <Typography
+                  token={slider.sliderField.typography.label}
+                  color={slider.sliderField.colour.text.label}
+                >
+                  {leadingLabel}
+                </Typography>
+              )}
+            </StyledLabelSlot>
+          )}
+
+          <StyledTrackArea
+            trackAreaHeight={thumbSize}
+            onLayout={handleLayout}
+            {...panResponder.panHandlers}
+          >
+            <StyledTrack
+              trackHeight={trackHeight}
+              trackBorderRadius={roundBorderRadius}
+              trackBgColor={slider.colour.track.background.default}
+              trackBorderWidth={parseTokenValue(dimensions.borderWidth.sm)}
+              trackBorderColor={slider.colour.track.border.default}
+            >
+              <StyledRange
+                rangeBgColor={slider.colour.indicator.background.default}
+                rangeBorderRadius={roundBorderRadius}
+                style={{ width: `${fraction * 100}%` }}
+              />
+            </StyledTrack>
+            <StyledThumb
+              thumbSize={thumbSize}
+              style={{
+                left: `${fraction * 100}%`,
+                marginLeft: -thumbSize / 2
+              }}
+              thumbBorderRadius={parseTokenValue(buttons.borderRadius.default)}
+              thumbBgColor={
+                buttons.iconButton.filledButton.colour.background.primary
+                  .default
+              }
+            >
+              <Typography size="xs" color="alt">
+                ⟨⟩
+              </Typography>
+            </StyledThumb>
+          </StyledTrackArea>
+
+          {hasTrailing && (
+            <StyledLabelSlot labelSlotGap={labelGap}>
+              {trailingLabel && (
+                <Typography
+                  token={slider.sliderField.typography.label}
+                  color={slider.sliderField.colour.text.label}
+                >
+                  {trailingLabel}
+                </Typography>
+              )}
+              {trailingIcon}
+            </StyledLabelSlot>
+          )}
+        </StyledLabelRow>
+
+        {description && (
+          <Typography
+            token={slider.sliderField.typography.description}
+            color={slider.sliderField.colour.text.description}
+          >
+            {description}
+          </Typography>
+        )}
+      </StyledSliderRoot>
+    )
+  }
+)
+
+Slider.displayName = "Slider"

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

@@ -0,0 +1,2 @@
+export { Slider } from "./Slider"
+export type { SliderProps } from "./Slider"

package/src/components/molecules/index.ts

@@ -0,0 +1,6 @@
+export * from "./ButtonDock"
+export * from "./ButtonGroup"
+export * from "./Checkbox"
+export * from "./Radio"
+export * from "./SegmentedControl"
+export * from "./Slider"

package/src/fonts/index.ts

@@ -0,0 +1,49 @@
+import { Brand, BrandName } from "@butternutbox/pawprint-tokens"
+import type { FontSource } from "expo-font"
+
+import idaNarrow500 from "./ida-narrow-500-normal.woff2"
+import idaNarrow700 from "./ida-narrow-700-normal.woff2"
+import ibmPlexSansCondensed400 from "./ibm-plex-sans-condensed-400-normal.woff2"
+import ibmPlexSansCondensed500 from "./ibm-plex-sans-condensed-500-normal.woff2"
+import ibmPlexSansCondensed600 from "./ibm-plex-sans-condensed-600-normal.woff2"
+import ibmPlexSansCondensed700 from "./ibm-plex-sans-condensed-700-normal.woff2"
+
+// Keys passed to useFonts — each key becomes the exact @font-face family name
+// that expo-font registers on web, and the postscript font name on iOS/Android.
+export const BRAND_FONTS: Partial<
+  Record<BrandName, Record<string, FontSource>>
+> = {
+  [Brand.Butternutbox]: {
+    "IdaNarrow-Medium": idaNarrow500 as FontSource,
+    "IdaNarrow-Bold": idaNarrow700 as FontSource,
+    "IBMPlexSansCondensed-Regular": ibmPlexSansCondensed400 as FontSource,
+    "IBMPlexSansCondensed-Medium": ibmPlexSansCondensed500 as FontSource,
+    "IBMPlexSansCondensed-SemiBold": ibmPlexSansCondensed600 as FontSource,
+    "IBMPlexSansCondensed-Bold": ibmPlexSansCondensed700 as FontSource
+  }
+}
+
+// Maps token fontFamily + fontWeight → the expo-font registered key.
+// The key is used as fontFamily on both web and native — useFonts registers
+// it as the @font-face family name on web so it matches Text styles directly.
+// fontWeight is dropped because the weight is already encoded in the key name.
+const FONT_MAP: Record<string, Record<string, string>> = {
+  "IBM Plex Sans Condensed": {
+    "400": "IBMPlexSansCondensed-Regular",
+    "500": "IBMPlexSansCondensed-Medium",
+    "600": "IBMPlexSansCondensed-SemiBold",
+    "700": "IBMPlexSansCondensed-Bold"
+  },
+  "Ida Narrow": {
+    "500": "IdaNarrow-Medium",
+    "700": "IdaNarrow-Bold"
+  }
+}
+
+export const resolveFont = (
+  fontFamily: string,
+  fontWeight: string
+): { fontFamily: string } => {
+  const resolved = FONT_MAP[fontFamily]?.[fontWeight]
+  return { fontFamily: resolved ?? fontFamily }
+}

package/src/index.ts

@@ -0,0 +1,9 @@
+import "./types/theme"
+
+export { tokens } from "@butternutbox/pawprint-tokens"
+
+export { default as styled } from "@emotion/native"
+
+export * from "./fonts"
+export * from "./theme"
+export * from "./components"

package/src/theme/PawprintProvider.tsx

@@ -0,0 +1,26 @@
+import React from "react"
+import { ThemeProvider } from "./ThemeProvider"
+import {
+  Brand,
+  Theme,
+  BrandName,
+  ThemeName
+} from "@butternutbox/pawprint-tokens"
+
+export interface PawprintProviderProps {
+  brand?: BrandName
+  initialTheme?: ThemeName
+  children: React.ReactNode
+}
+
+export const PawprintProvider: React.FC<PawprintProviderProps> = ({
+  brand = Brand.Butternutbox,
+  initialTheme = Theme.Default,
+  children
+}) => {
+  return (
+    <ThemeProvider brand={brand} initialTheme={initialTheme}>
+      {children}
+    </ThemeProvider>
+  )
+}

package/src/theme/ThemeProvider.tsx

@@ -0,0 +1,63 @@
+import React, { useState, createContext, useContext, useMemo } from "react"
+import { ThemeProvider as EmotionThemeProvider } from "@emotion/react"
+import type { Theme as EmotionTheme } from "@emotion/react"
+import {
+  Brand,
+  Theme,
+  BrandName,
+  ThemeName
+} from "@butternutbox/pawprint-tokens"
+import { createPawprintTheme } from "./utils"
+
+type ThemeContextType = {
+  brand: BrandName
+  theme: ThemeName
+  setTheme: (theme: ThemeName) => void
+  emotionTheme: EmotionTheme
+}
+
+type Props = {
+  brand?: BrandName
+  initialTheme?: ThemeName
+  children: React.ReactNode
+}
+
+const ThemeContext = createContext<ThemeContextType>({
+  brand: Brand.Butternutbox,
+  theme: Theme.Default,
+  setTheme: (_theme: ThemeName) => {},
+  emotionTheme: createPawprintTheme(Brand.Butternutbox, Theme.Default)
+})
+
+export const ThemeProvider = ({
+  children,
+  brand = Brand.Butternutbox,
+  initialTheme = Theme.Default
+}: Props): React.JSX.Element => {
+  const [theme, setTheme] = useState<ThemeName>(initialTheme)
+
+  const emotionTheme = useMemo(
+    () => createPawprintTheme(brand, theme),
+    [brand, theme]
+  )
+
+  const contextValue = useMemo(
+    () => ({
+      brand,
+      theme,
+      setTheme,
+      emotionTheme
+    }),
+    [brand, theme, emotionTheme]
+  )
+
+  return (
+    <ThemeContext.Provider value={contextValue}>
+      <EmotionThemeProvider theme={emotionTheme}>
+        {children}
+      </EmotionThemeProvider>
+    </ThemeContext.Provider>
+  )
+}
+
+export const usePawprint = () => useContext(ThemeContext)

package/src/theme/index.ts

@@ -0,0 +1,5 @@
+export { PawprintProvider } from "./PawprintProvider"
+export { ThemeProvider, usePawprint } from "./ThemeProvider"
+export { createPawprintTheme } from "./utils"
+export { theme } from "./theme"
+export type { PawprintProviderProps } from "./PawprintProvider"

package/src/theme/theme.ts

@@ -0,0 +1,3 @@
+import { tokens } from "@butternutbox/pawprint-tokens"
+
+export const theme = tokens

package/src/theme/utils.ts

@@ -0,0 +1,31 @@
+import {
+  DEFAULT_THEME_OPTIONS,
+  THEME_OPTIONS_MAP,
+  Brand,
+  Theme,
+  BrandName,
+  ThemeName
+} from "@butternutbox/pawprint-tokens"
+import type { Theme as EmotionTheme } from "@emotion/react"
+
+/**
+ * Creates a pawprint theme based on brand and theme name for React Native
+ *
+ * @param brand - The brand to use (butternutbox, marro, etc.)
+ * @param theme - The theme name to use (default, dark, etc.)
+ * @returns A theme object with the selected brand and theme options
+ */
+export const createPawprintTheme = (
+  brand: BrandName = Brand.Butternutbox,
+  theme: ThemeName = Theme.Default
+): EmotionTheme => {
+  const brandThemes = THEME_OPTIONS_MAP[brand]
+
+  // Check if the requested theme exists for this brand, otherwise use default
+  const themeOptions =
+    brandThemes && theme in brandThemes
+      ? brandThemes[theme as keyof typeof brandThemes]
+      : DEFAULT_THEME_OPTIONS
+
+  return themeOptions as EmotionTheme
+}

package/src/types/fonts.d.ts

@@ -0,0 +1,4 @@
+declare module "*.woff2" {
+  const src: string
+  export default src
+}

package/src/types/index.ts

@@ -0,0 +1 @@
+import "./theme"

package/src/types/theme.ts

@@ -0,0 +1,24 @@
+import "@emotion/react"
+
+import type {
+  BrandThemeSemantics,
+  BrandThemeComponents,
+  TokensCorePrimitives
+} from "@butternutbox/pawprint-tokens"
+
+// Augment @emotion/react module with our custom theme properties for React Native
+declare module "@emotion/react" {
+  export interface Theme {
+    tokens: {
+      primitives: TokensCorePrimitives
+      semantics: BrandThemeSemantics
+      components: BrandThemeComponents
+    }
+    fontFaces?: string
+  }
+
+  interface ThemeOptions {
+    tokens: Theme["tokens"]
+    fontFaces?: string
+  }
+}

package/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "@repo/typescript-config/react-library.json",
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"]
+}

package/tsup.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from "tsup"
+
+export default defineConfig({
+  entry: ["src/index.ts"],
+  format: ["cjs", "esm"],
+  dts: true,
+  sourcemap: true,
+  clean: true,
+  external: ["react", "react-native"],
+  treeshake: true
+})