@butternutbox/pawprint-native 0.25.0 → 1.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@butternutbox/pawprint-native",
-  "version": "0.25.0",
+  "version": "1.0.0",
   "type": "module",
   "description": "ButternutBox Pawprint Design System - React Native Components",
   "main": "./dist/index.cjs",
@@ -22,6 +22,7 @@
     "test": "vitest run"
   },
   "dependencies": {
+    "@butternutbox/pawprint-fonts": "^2.0.0",
     "@butternutbox/pawprint-tokens": "^0.5.0",
     "@emotion/native": "^11.11.0",
     "@emotion/react": "^11.14.0",

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

@@ -5,20 +5,18 @@ import type { ButtonProps } from "./Button"
 import { Typography } from "../Typography"
 import { Icon } from "../Icon"
 import {
-  Check,
+  Facebook,
   IosShare,
   Whatsapp,
-  KeyboardDoubleArrowDown
+  Mail
 } from "@butternutbox/pawprint-icons/core"
 
 const iconElements: Record<string, React.ReactNode> = {
   None: undefined,
-  KeyboardDoubleArrowDown: (
-    <Icon icon={KeyboardDoubleArrowDown} colour="primary" />
-  ),
-  IosShare: <Icon icon={IosShare} colour="primary" />,
-  Whatsapp: <Icon icon={Whatsapp} colour="primary" />,
-  Check: <Icon icon={Check} colour="primary" />
+  Facebook: <Icon icon={Facebook} size="sm" colour="action-default" />,
+  IosShare: <Icon icon={IosShare} size="sm" colour="action-default" />,
+  Whatsapp: <Icon icon={Whatsapp} size="sm" colour="action-default" />,
+  Mail: <Icon icon={Mail} size="sm" colour="action-default" />
 }
 
 const iconArgType = {
@@ -155,28 +153,104 @@ export const WithStartIcon = () => (
         <View style={styles.row}>
           <Button
             size={size}
-            startIcon={<Icon icon={KeyboardDoubleArrowDown} colour="primary" />}
+            startIcon={
+              <Icon icon={Facebook} size="sm" colour="action-default" />
+            }
           >
-            Add
+            Share
           </Button>
           <Button
             size={size}
-            startIcon={<Icon icon={IosShare} colour="success" />}
+            startIcon={
+              <Icon icon={IosShare} size="sm" colour="action-default" />
+            }
           >
-            Search
+            Export
           </Button>
           <Button
             size={size}
-            startIcon={<Icon icon={Whatsapp} colour="warning" />}
+            startIcon={
+              <Icon icon={Whatsapp} size="sm" colour="action-default" />
+            }
           >
-            Settings
+            Message
           </Button>
           <Button
             size={size}
-            startIcon={<Icon icon={Check} colour="error" />}
+            startIcon={<Icon icon={Mail} size="sm" colour="action-default" />}
             colour="secondary"
           >
-            Confirm
+            Send
+          </Button>
+        </View>
+      </View>
+    ))}
+  </View>
+)
+
+export const WithEndIcon = () => (
+  <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>
+        <View style={styles.row}>
+          <Button
+            size={size}
+            endIcon={<Icon icon={Facebook} size="sm" colour="action-default" />}
+          >
+            Connect
+          </Button>
+          <Button
+            size={size}
+            endIcon={<Icon icon={IosShare} size="sm" colour="action-default" />}
+          >
+            Share
+          </Button>
+          <Button
+            size={size}
+            endIcon={<Icon icon={Whatsapp} size="sm" colour="action-default" />}
+          >
+            Chat
+          </Button>
+          <Button
+            size={size}
+            endIcon={<Icon icon={Mail} size="sm" colour="action-default" />}
+            colour="secondary"
+          >
+            Email
+          </Button>
+        </View>
+      </View>
+    ))}
+  </View>
+)
+
+export const WithBothIcons = () => (
+  <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>
+        <View style={styles.row}>
+          <Button
+            size={size}
+            startIcon={
+              <Icon icon={Facebook} size="sm" colour="action-default" />
+            }
+            endIcon={<Icon icon={IosShare} size="sm" colour="action-default" />}
+          >
+            Share
+          </Button>
+          <Button
+            size={size}
+            startIcon={<Icon icon={Mail} size="sm" colour="action-default" />}
+            endIcon={<Icon icon={Whatsapp} size="sm" colour="action-default" />}
+            variant="outlined"
+          >
+            Contact
           </Button>
         </View>
       </View>

package/src/components/atoms/Button/Button.tsx

@@ -4,7 +4,7 @@ import styled from "@emotion/native"
 import { useTheme } from "@emotion/react"
 import { Typography } from "../Typography"
 import { Spinner } from "../Spinner"
-import { resolveFont } from "../../../fonts"
+import { resolveFont } from "@butternutbox/pawprint-fonts"
 
 type ButtonVariant = "filled" | "outlined" | "text"
 type ButtonSize = "sm" | "md" | "lg"
@@ -193,6 +193,17 @@ const Button = React.forwardRef<View, ButtonProps>(
 
     const variantStyles = getVariantStyles(pressed)
 
+    const renderIcon = (icon: React.ReactNode): React.ReactNode => {
+      if (!React.isValidElement(icon)) return icon
+      const iconElement = icon as React.ReactElement<any>
+      if (!pressed) {
+        return icon
+      }
+      return React.cloneElement(iconElement, {
+        customColour: variantStyles.textColor
+      })
+    }
+
     return (
       <StyledButton
         ref={ref}
@@ -220,7 +231,7 @@ const Button = React.forwardRef<View, ButtonProps>(
         buttonFullWidth={fullWidth}
         {...rest}
       >
-        {startIcon && <IconWrapper>{startIcon}</IconWrapper>}
+        {startIcon && <IconWrapper>{renderIcon(startIcon)}</IconWrapper>}
         {/* `Typography` is a DIRECT child of the button row (no wrapping View)
             so its `<Text>` participates in flex shrink and wraps long /
             translated labels to multiple lines under the button's `minHeight`.
@@ -241,7 +252,7 @@ const Button = React.forwardRef<View, ButtonProps>(
         >
           {children}
         </Typography>
-        {endIcon && <IconWrapper>{endIcon}</IconWrapper>}
+        {endIcon && <IconWrapper>{renderIcon(endIcon)}</IconWrapper>}
         {loading && (
           <StyledSpinnerWrapper>
             <Spinner

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

@@ -13,7 +13,7 @@ import {
   Error as ErrorIcon,
   CheckCircle as SuccessIcon
 } from "@butternutbox/pawprint-icons/core"
-import { resolveFont } from "../../../fonts"
+import { resolveFont } from "@butternutbox/pawprint-fonts"
 import { Icon } from "../Icon"
 
 export type InputState = "default" | "error" | "success"

package/src/components/atoms/TextArea/TextAreaField.tsx

@@ -13,7 +13,7 @@ import {
   Error as ErrorIcon,
   CheckCircle as SuccessIcon
 } from "@butternutbox/pawprint-icons/core"
-import { resolveFont } from "../../../fonts"
+import { resolveFont } from "@butternutbox/pawprint-fonts"
 import { Icon } from "../Icon"
 import type { InputState } from "../Input/InputField"
 

package/src/components/atoms/Typography/Typography.tsx

@@ -3,7 +3,7 @@ import { Text, TextStyle, TextProps } from "react-native"
 import { useTheme } from "@emotion/react"
 import styled from "@emotion/native"
 import { type BrandThemeSemanticsColourText } from "@butternutbox/pawprint-tokens"
-import { resolveFont } from "../../../fonts"
+import { resolveFont } from "@butternutbox/pawprint-fonts"
 
 type BodySize = "xs" | "sm" | "md" | "lg"
 type HeadingSize = "2xs" | "xs" | "sm" | "md" | "lg" | "xl"

package/src/components/molecules/NativeSelectPicker/NativeSelectPicker.styled.ts

@@ -3,7 +3,7 @@ import { View, Text } from "react-native"
 import Animated from "react-native-reanimated"
 import { DEFAULT_THEME_OPTIONS } from "@butternutbox/pawprint-tokens"
 
-import { resolveFont } from "../../../fonts"
+import { resolveFont } from "@butternutbox/pawprint-fonts"
 
 type AndroidOptionTextProps = {
   isSelected: boolean

package/src/components/molecules/NumberField/NumberFieldInput.tsx

@@ -4,7 +4,7 @@ import styled from "@emotion/native"
 import { useTheme } from "@emotion/react"
 import { IconButton } from "../../atoms/IconButton"
 import { Add, Remove } from "@butternutbox/pawprint-icons/core"
-import { resolveFont } from "../../../fonts"
+import { resolveFont } from "@butternutbox/pawprint-fonts"
 import { Typography } from "../../atoms/Typography"
 
 type NumberFieldSize = "sm" | "lg"

package/src/index.ts

@@ -4,7 +4,7 @@ export { tokens } from "@butternutbox/pawprint-tokens"
 
 export { default as styled } from "@emotion/native"
 
-export * from "./fonts"
+export * from "@butternutbox/pawprint-fonts"
 export * from "./theme"
 export * from "./components"
 export * from "./hooks"

package/tsup.config.ts

@@ -14,10 +14,9 @@ export default defineConfig({
     "react-native-svg",
     "react-native-worklets",
     /^@rn-primitives\/.*/,
-    /\.ttf$/
+    /^@butternutbox\/pawprint-fonts/
   ],
   treeshake: true,
-  onSuccess: "cp src/fonts/*.ttf dist/",
   esbuildOptions(options) {
     options.conditions = ["react-native", "import", "module", "default"]
     options.loader = {

package/src/fonts/index.ts

@@ -1,48 +0,0 @@
-import { Brand, BrandName } from "@butternutbox/pawprint-tokens"
-import type { FontSource } from "expo-font"
-
-import idaNarrow500 from "./ida-narrow-500-normal.ttf"
-import idaNarrow700 from "./ida-narrow-700-normal.ttf"
-import ibmPlexSansCondensed400 from "./ibm-plex-sans-condensed-400-normal.ttf"
-import ibmPlexSansCondensed500 from "./ibm-plex-sans-condensed-500-normal.ttf"
-import ibmPlexSansCondensed600 from "./ibm-plex-sans-condensed-600-normal.ttf"
-import ibmPlexSansCondensed700 from "./ibm-plex-sans-condensed-700-normal.ttf"
-
-// 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]: {
-    "IdaWebNarrow-Medium": idaNarrow500 as FontSource,
-    "IdaWebNarrow-Bold": idaNarrow700 as FontSource,
-    "IBMPlexSansCond-Regular": ibmPlexSansCondensed400 as FontSource,
-    "IBMPlexSansCond-Medium": ibmPlexSansCondensed500 as FontSource,
-    "IBMPlexSansCond-SemiBold": ibmPlexSansCondensed600 as FontSource,
-    "IBMPlexSansCond-Bold": ibmPlexSansCondensed700 as FontSource
-  }
-}
-
-// Maps token fontFamily + fontWeight → PostScript font name.
-// Keys must match the PostScript name embedded in the font file — iOS registers
-// fonts under their PostScript name regardless of the useFonts key.
-const FONT_MAP: Record<string, Record<string, string>> = {
-  "IBM Plex Sans Condensed": {
-    "400": "IBMPlexSansCond-Regular",
-    "500": "IBMPlexSansCond-Medium",
-    "600": "IBMPlexSansCond-SemiBold",
-    "700": "IBMPlexSansCond-Bold"
-  },
-  "Ida Narrow": {
-    "500": "IdaWebNarrow-Medium",
-    "700": "IdaWebNarrow-Bold"
-  }
-}
-
-export const resolveFont = (
-  fontFamily: string,
-  fontWeight: string
-): { fontFamily: string } => {
-  const resolved = FONT_MAP[fontFamily]?.[fontWeight]
-  return { fontFamily: resolved ?? fontFamily }
-}

package/src/types/fonts.d.ts

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