@butternutbox/pawprint-native 0.13.0 → 0.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@butternutbox/pawprint-native",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "type": "module",
   "description": "ButternutBox Pawprint Design System - React Native Components",
   "main": "./dist/index.cjs",
@@ -22,7 +22,7 @@
     "test": "vitest run"
   },
   "dependencies": {
-    "@butternutbox/pawprint-tokens": "^0.2.0",
+    "@butternutbox/pawprint-tokens": "^0.3.0",
     "@emotion/native": "^11.11.0",
     "@emotion/react": "^11.14.0",
     "@rn-primitives/avatar": "^1.4.0",

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

@@ -3,7 +3,7 @@ import { View, ViewProps } from "react-native"
 import styled from "@emotion/native"
 import { useTheme } from "@emotion/react"
 
-type IllustrationSize = "sm" | "lg" | "xl"
+type IllustrationSize = "sm" | "lg" | "xl" | "xxl" | "xxxl"
 
 type PawprintIllustration = React.ComponentType<{
   width?: number
@@ -42,7 +42,7 @@ const StyledRoot = styled(View)<{
  * ```
  *
  * @param illustration - **(required)** Illustration component
- * @param size - *(optional)* Size variant: sm (default), lg, xl
+ * @param size - *(optional)* Size variant: sm (default), lg, xl, xxl, xxxl
  * @param aria-label - *(optional)* Accessible label
  */
 const Illustration = React.forwardRef<View, IllustrationProps>(

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

@@ -13,6 +13,7 @@ import {
   Error as ErrorIcon,
   CheckCircle as SuccessIcon
 } from "@butternutbox/pawprint-icons/core"
+import { resolveFont } from "../../../fonts"
 import { Icon } from "../Icon"
 import type { InputState } from "../Input/InputField"
 
@@ -50,13 +51,26 @@ const StyledTextAreaWrapper = styled(Animated.View)<{
 })
 
 const StyledTextArea = styled(TextInput)(({ theme }) => {
-  const { colour } = theme.tokens.components.inputs
+  const { colour, field } = theme.tokens.components.inputs
+  const typography = field.placeholder.default
+  const { fontFamily } = resolveFont(
+    typography.fontFamily,
+    typography.fontWeight
+  )
+  const fontSize = parseTokenValue(typography.fontSize)
+  const letterSpacing = typography.letterSpacing?.endsWith("%")
+    ? (parseFloat(typography.letterSpacing) / 100) * fontSize
+    : parseFloat(typography.letterSpacing ?? "0")
+
   return {
     flex: 1,
     minWidth: 0,
     minHeight: 0,
     padding: 0,
     color: colour.field.text.default,
+    fontFamily,
+    fontSize,
+    letterSpacing,
     textAlignVertical: "top",
     // Suppress the browser default focus outline on React Native Web —
     // the focus indicator is rendered on the wrapper instead.