@retray-dev/ui-kit 6.2.0 → 9.0.0

package/dist/chunk-EH745HE5.mjs

@@ -0,0 +1,127 @@
+import { useColorTransition } from './chunk-26BCI223.mjs';
+import { TIMINGS } from './chunk-DVK4G2GT.mjs';
+import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
+import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { vs, ms, s } from './chunk-2CE3TQVY.mjs';
+import React, { useState } from 'react';
+import { Platform, StyleSheet, View, Text, TextInput } from 'react-native';
+import Animated, { useAnimatedStyle, interpolate, interpolateColor } from 'react-native-reanimated';
+
+var webInputResetStyle = Platform.OS === "web" ? { outlineStyle: "none", outlineWidth: 0, outlineColor: "transparent", boxShadow: "none" } : {};
+function Textarea({
+  label,
+  error,
+  hint,
+  rows = 4,
+  prefixIcon,
+  prefixIconNode,
+  prefixIconColor,
+  containerStyle,
+  style,
+  onFocus,
+  onBlur,
+  accessibilityLabel,
+  ...props
+}) {
+  const { colors } = useTheme();
+  const [focused, setFocused] = useState(false);
+  const focusProgress = useColorTransition(focused, {
+    duration: focused ? TIMINGS.focusIn.duration : TIMINGS.focusOut.duration
+  });
+  const resolvedPrefixIcon = prefixIcon ? renderIcon(prefixIcon, ms(16), prefixIconColor ?? colors.foregroundMuted) : prefixIconNode;
+  const borderAnimStyle = useAnimatedStyle(() => ({
+    borderColor: error ? colors.destructive : interpolateColor(focusProgress.value, [0, 1], [colors.border, colors.primary]),
+    borderWidth: error ? 2 : interpolate(focusProgress.value, [0, 1], [1, 2])
+  }));
+  return /* @__PURE__ */ React.createElement(View, { style: [styles.container, containerStyle] }, label ? /* @__PURE__ */ React.createElement(Text, { style: [styles.label, { color: colors.foreground }], allowFontScaling: true }, label) : null, /* @__PURE__ */ React.createElement(
+    Animated.View,
+    {
+      style: [
+        styles.inputWrapper,
+        { backgroundColor: colors.background }
+      ]
+    },
+    /* @__PURE__ */ React.createElement(Animated.View, { style: [styles.borderOverlay, borderAnimStyle], pointerEvents: "none" }),
+    resolvedPrefixIcon ? /* @__PURE__ */ React.createElement(View, { style: styles.prefixIcon }, resolvedPrefixIcon) : null,
+    /* @__PURE__ */ React.createElement(
+      TextInput,
+      {
+        multiline: true,
+        numberOfLines: rows,
+        textAlignVertical: "top",
+        style: [
+          styles.input,
+          {
+            color: colors.foreground,
+            minHeight: rows * vs(30)
+          },
+          webInputResetStyle,
+          style
+        ],
+        onFocus: (e) => {
+          setFocused(true);
+          onFocus?.(e);
+        },
+        onBlur: (e) => {
+          setFocused(false);
+          onBlur?.(e);
+        },
+        placeholderTextColor: colors.foregroundMuted,
+        allowFontScaling: true,
+        accessibilityLabel: accessibilityLabel ?? label,
+        ...props
+      }
+    )
+  ), error ? /* @__PURE__ */ React.createElement(
+    Text,
+    {
+      style: [styles.helperText, { color: colors.destructive }],
+      allowFontScaling: true,
+      accessibilityLiveRegion: "polite"
+    },
+    error
+  ) : null, !error && hint ? /* @__PURE__ */ React.createElement(Text, { style: [styles.helperText, { color: colors.foregroundMuted }], allowFontScaling: true }, hint) : null);
+}
+var styles = StyleSheet.create({
+  container: {
+    gap: vs(4)
+  },
+  label: {
+    fontFamily: "Sohne-Medium",
+    fontSize: ms(13),
+    lineHeight: vs(18),
+    marginBottom: vs(2)
+  },
+  inputWrapper: {
+    // Border lives on borderOverlay (absolute); wrapper carries none so the
+    // focus weight change never reflows content.
+    borderRadius: 8,
+    paddingHorizontal: s(14),
+    paddingVertical: vs(11),
+    gap: s(8)
+  },
+  borderOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    borderRadius: 8
+  },
+  prefixIcon: {
+    alignItems: "flex-start",
+    justifyContent: "flex-start",
+    paddingTop: vs(2)
+  },
+  input: {
+    fontFamily: "Sohne-Regular",
+    fontSize: ms(14),
+    lineHeight: vs(22),
+    padding: 0,
+    margin: 0
+  },
+  helperText: {
+    fontFamily: "Sohne-Regular",
+    fontSize: ms(12),
+    lineHeight: vs(16),
+    marginTop: vs(4)
+  }
+});
+
+export { Textarea };

package/dist/chunk-EJ7ZPXOH.mjs

@@ -0,0 +1,163 @@
+import { __require } from './chunk-Y6FXYEAI.mjs';
+import { Platform, NativeModules } from 'react-native';
+
+var _haptics = null;
+var _hapticsLoaded = false;
+async function getHaptics() {
+  if (Platform.OS === "web") return null;
+  if (!_hapticsLoaded) {
+    _hapticsLoaded = true;
+    try {
+      _haptics = await import('expo-haptics');
+    } catch {
+      _haptics = null;
+    }
+  }
+  return _haptics;
+}
+var _pulsar = null;
+var _pulsarChecked = false;
+var _pulsarAvailable = false;
+function isPulsarNativeRegistered() {
+  try {
+    const g = globalThis;
+    if (typeof g.__turboModuleProxy === "function") {
+      return g.__turboModuleProxy("RNPulsar") != null;
+    }
+    return NativeModules?.RNPulsar != null;
+  } catch {
+    return false;
+  }
+}
+function getPulsar() {
+  if (Platform.OS === "web") return null;
+  if (!_pulsarChecked) {
+    _pulsarChecked = true;
+    try {
+      if (isPulsarNativeRegistered()) {
+        _pulsar = __require("react-native-pulsar");
+        _pulsarAvailable = true;
+      }
+    } catch {
+      _pulsar = null;
+      _pulsarAvailable = false;
+    }
+  }
+  return _pulsarAvailable ? _pulsar : null;
+}
+function selectionAsync() {
+  if (Platform.OS === "web") return;
+  getHaptics().then((h) => {
+    if (h) {
+      h.selectionAsync();
+    } else {
+      getPulsar()?.Presets.System.selection();
+    }
+  });
+}
+function impactLight() {
+  if (Platform.OS === "web") return;
+  getHaptics().then((h) => {
+    if (h) {
+      h.impactAsync(h.ImpactFeedbackStyle.Light);
+    } else {
+      getPulsar()?.Presets.System.impactLight();
+    }
+  });
+}
+function impactMedium() {
+  if (Platform.OS === "web") return;
+  getHaptics().then((h) => {
+    if (h) {
+      h.impactAsync(h.ImpactFeedbackStyle.Medium);
+    } else {
+      getPulsar()?.Presets.System.impactMedium();
+    }
+  });
+}
+function impactHeavy() {
+  if (Platform.OS === "web") return;
+  getHaptics().then((h) => {
+    if (h) {
+      h.impactAsync(h.ImpactFeedbackStyle.Heavy);
+    } else {
+      getPulsar()?.Presets.System.impactHeavy();
+    }
+  });
+}
+function notificationSuccess() {
+  if (Platform.OS === "web") return;
+  getHaptics().then((h) => {
+    if (h) {
+      h.notificationAsync(h.NotificationFeedbackType.Success);
+    } else {
+      getPulsar()?.Presets.System.notificationSuccess();
+    }
+  });
+}
+function notificationError() {
+  if (Platform.OS === "web") return;
+  getHaptics().then((h) => {
+    if (h) {
+      h.notificationAsync(h.NotificationFeedbackType.Error);
+    } else {
+      getPulsar()?.Presets.System.notificationError();
+    }
+  });
+}
+function notificationWarning() {
+  if (Platform.OS === "web") return;
+  getHaptics().then((h) => {
+    if (h) {
+      h.notificationAsync(h.NotificationFeedbackType.Warning);
+    } else {
+      getPulsar()?.Presets.System.notificationWarning();
+    }
+  });
+}
+var richHaptics = {
+  /** Hammer strike — strong confirmation feedback. */
+  hammer: () => {
+    if (Platform.OS === "web") return;
+    const p = getPulsar();
+    if (p) p.Presets.hammer();
+    else impactHeavy();
+  },
+  /** Pulse — rhythmic feedback for toggles or state changes. */
+  pulse: () => {
+    if (Platform.OS === "web") return;
+    const p = getPulsar();
+    if (p) p.Presets.pulse();
+    else selectionAsync();
+  },
+  /** Buzz — continuous vibration for attention. */
+  buzz: () => {
+    if (Platform.OS === "web") return;
+    const p = getPulsar();
+    if (p) p.Presets.buzz();
+    else impactMedium();
+  },
+  /** Flick — crisp click feedback. */
+  flick: () => {
+    if (Platform.OS === "web") return;
+    const p = getPulsar();
+    if (p) p.Presets.flick();
+    else selectionAsync();
+  },
+  /** Soft — gentle, subtle feedback. */
+  soft: () => {
+    if (Platform.OS === "web") return;
+    const p = getPulsar();
+    if (p) p.Presets.System.impactSoft();
+    else impactLight();
+  },
+  /** Rigid — firm, solid feedback. */
+  rigid: () => {
+    if (Platform.OS === "web") return;
+    const p = getPulsar();
+    if (p) p.Presets.System.impactRigid();
+    else impactMedium();
+  }
+};
+
+export { impactHeavy, impactLight, impactMedium, notificationError, notificationSuccess, notificationWarning, richHaptics, selectionAsync };

package/dist/chunk-GD6KXMG5.mjs

@@ -0,0 +1,106 @@
+import { selectionAsync } from './chunk-EJ7ZPXOH.mjs';
+import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { s, mvs, ms } from './chunk-2CE3TQVY.mjs';
+import React from 'react';
+import { StyleSheet, View, TouchableOpacity, Text } from 'react-native';
+import { Entypo } from '@expo/vector-icons';
+
+var MONTH_NAMES = {
+  en: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
+  es: ["enero", "febrero", "marzo", "abril", "mayo", "junio", "julio", "agosto", "septiembre", "octubre", "noviembre", "diciembre"],
+  pt: ["janeiro", "fevereiro", "mar\xE7o", "abril", "maio", "junho", "julho", "agosto", "setembro", "outubro", "novembro", "dezembro"],
+  fr: ["janvier", "f\xE9vrier", "mars", "avril", "mai", "juin", "juillet", "ao\xFBt", "septembre", "octobre", "novembre", "d\xE9cembre"]
+};
+function dateToMonthPickerValue(date) {
+  return { month: date.getMonth() + 1, year: date.getFullYear() };
+}
+function monthPickerValueToDate(value) {
+  return new Date(value.year, value.month - 1, 1);
+}
+var toIndex = (v) => v.year * 12 + (v.month - 1);
+var fromIndex = (i) => ({ year: Math.floor(i / 12), month: i % 12 + 1 });
+function MonthPicker({ value, onChange, minValue, maxValue, locale = "en", formatLabel, style }) {
+  const { colors } = useTheme();
+  const index = toIndex(value);
+  const minIndex = minValue ? toIndex(minValue) : -Infinity;
+  const maxIndex = maxValue ? toIndex(maxValue) : Infinity;
+  const prevDisabled = index - 1 < minIndex;
+  const nextDisabled = index + 1 > maxIndex;
+  const getLabel = () => {
+    if (formatLabel) return formatLabel(value);
+    const names = MONTH_NAMES[locale] ?? MONTH_NAMES.en;
+    return `${names[value.month - 1]} ${value.year}`;
+  };
+  const handlePrev = () => {
+    if (prevDisabled) return;
+    selectionAsync();
+    onChange(fromIndex(index - 1));
+  };
+  const handleNext = () => {
+    if (nextDisabled) return;
+    selectionAsync();
+    onChange(fromIndex(index + 1));
+  };
+  return /* @__PURE__ */ React.createElement(View, { style: [styles.container, style], accessibilityRole: "adjustable", accessibilityLabel: getLabel() }, /* @__PURE__ */ React.createElement(
+    TouchableOpacity,
+    {
+      style: [styles.arrow, prevDisabled && styles.arrowDisabled],
+      onPress: handlePrev,
+      disabled: prevDisabled,
+      activeOpacity: 0.6,
+      touchSoundDisabled: true,
+      accessibilityRole: "button",
+      accessibilityLabel: "Previous month",
+      accessibilityState: { disabled: prevDisabled },
+      hitSlop: { top: 8, bottom: 8, left: 8, right: 8 }
+    },
+    /* @__PURE__ */ React.createElement(Entypo, { name: "chevron-left", size: 22, color: colors.foreground })
+  ), /* @__PURE__ */ React.createElement(
+    Text,
+    {
+      style: [styles.label, { color: colors.foreground }],
+      allowFontScaling: true,
+      accessibilityLiveRegion: "polite"
+    },
+    getLabel()
+  ), /* @__PURE__ */ React.createElement(
+    TouchableOpacity,
+    {
+      style: [styles.arrow, nextDisabled && styles.arrowDisabled],
+      onPress: handleNext,
+      disabled: nextDisabled,
+      activeOpacity: 0.6,
+      touchSoundDisabled: true,
+      accessibilityRole: "button",
+      accessibilityLabel: "Next month",
+      accessibilityState: { disabled: nextDisabled },
+      hitSlop: { top: 8, bottom: 8, left: 8, right: 8 }
+    },
+    /* @__PURE__ */ React.createElement(Entypo, { name: "chevron-right", size: 22, color: colors.foreground })
+  ));
+}
+var styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between"
+  },
+  arrow: {
+    width: s(44),
+    height: s(44),
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  arrowDisabled: {
+    opacity: 0.3
+  },
+  label: {
+    fontFamily: "Sohne-Medium",
+    fontSize: ms(17),
+    lineHeight: mvs(24),
+    textAlign: "center",
+    minWidth: s(160)
+  }
+});
+
+export { MonthPicker, dateToMonthPickerValue, monthPickerValueToDate };

package/dist/chunk-GQYFLP3D.mjs

@@ -0,0 +1,187 @@
+import { PressableTab } from './chunk-3DKJ2GIC.mjs';
+import { selectionAsync } from './chunk-EJ7ZPXOH.mjs';
+import { SPRINGS } from './chunk-DVK4G2GT.mjs';
+import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { ms, s, vs } from './chunk-2CE3TQVY.mjs';
+import React, { useState, useRef, useCallback, useEffect } from 'react';
+import { StyleSheet, View, Text } from 'react-native';
+import Animated, { useSharedValue, withSpring, useAnimatedStyle } from 'react-native-reanimated';
+
+function TabTrigger({
+  tab,
+  isActive,
+  onPress,
+  onLayout,
+  variant
+}) {
+  const { colors } = useTheme();
+  const isUnderline = variant === "underline";
+  return /* @__PURE__ */ React.createElement(View, { onLayout, style: styles.triggerWrap }, /* @__PURE__ */ React.createElement(
+    PressableTab,
+    {
+      style: [
+        styles.trigger,
+        isUnderline && styles.triggerUnderline,
+        isUnderline && isActive && { borderBottomColor: colors.primary }
+      ],
+      onPress,
+      rippleColor: "transparent",
+      touchSoundDisabled: true,
+      accessibilityRole: "tab",
+      accessibilityState: { selected: isActive },
+      accessibilityLabel: tab.label
+    },
+    /* @__PURE__ */ React.createElement(View, { style: styles.triggerInner }, tab.icon ? typeof tab.icon === "function" ? tab.icon(isActive) : tab.icon : null, /* @__PURE__ */ React.createElement(
+      Text,
+      {
+        style: [
+          styles.triggerLabel,
+          // AUDIT FIX: active state now only changes color, never font metrics.
+          // Previously: inactive=Regular, active=Medium (pill) or SemiBold+fontSize14 (underline)
+          // The weight/size change caused measurable layout reflow every tab switch.
+          // Solution: all labels render at SemiBold always; active = foreground, inactive = foregroundMuted.
+          { color: isActive ? colors.foreground : colors.foregroundMuted }
+        ],
+        allowFontScaling: true
+      },
+      tab.label
+    ))
+  ));
+}
+function Tabs({ tabs, variant = "pill", value, onValueChange, children, style }) {
+  const [internal, setInternal] = useState(tabs[0]?.value ?? "");
+  const { colors } = useTheme();
+  const active = value ?? internal;
+  const tabLayouts = useRef({});
+  const pillX = useSharedValue(0);
+  const pillWidth = useSharedValue(0);
+  const initialised = useRef(false);
+  const animatePill = useCallback((tabValue, animate) => {
+    const layout = tabLayouts.current[tabValue];
+    if (!layout) return;
+    if (animate) {
+      pillX.value = withSpring(layout.x, SPRINGS.glide);
+      pillWidth.value = withSpring(layout.width, SPRINGS.glide);
+    } else {
+      pillX.value = layout.x;
+      pillWidth.value = layout.width;
+    }
+  }, [pillX, pillWidth]);
+  useEffect(() => {
+    if (initialised.current) animatePill(active, true);
+  }, [active, animatePill]);
+  const handlePress = (v) => {
+    selectionAsync();
+    if (!value) setInternal(v);
+    onValueChange?.(v);
+  };
+  const pillAnimatedStyle = useAnimatedStyle(() => ({
+    transform: [{ translateX: pillX.value }],
+    width: pillWidth.value
+  }));
+  return /* @__PURE__ */ React.createElement(View, { style }, /* @__PURE__ */ React.createElement(
+    View,
+    {
+      style: [
+        variant === "pill" ? [styles.list, { backgroundColor: colors.surface }] : styles.listUnderline
+      ],
+      accessibilityRole: "tablist"
+    },
+    variant === "pill" && /* @__PURE__ */ React.createElement(
+      Animated.View,
+      {
+        style: [
+          styles.pill,
+          {
+            backgroundColor: colors.background,
+            position: "absolute",
+            top: 4,
+            bottom: 4,
+            left: 0,
+            borderRadius: 8,
+            shadowColor: "#000",
+            shadowOffset: { width: 0, height: 1 },
+            shadowOpacity: 0.08,
+            shadowRadius: 2,
+            elevation: 2
+          },
+          pillAnimatedStyle
+        ]
+      }
+    ),
+    tabs.map((tab) => /* @__PURE__ */ React.createElement(
+      TabTrigger,
+      {
+        key: tab.value,
+        tab,
+        isActive: tab.value === active,
+        onPress: () => handlePress(tab.value),
+        variant,
+        onLayout: (e) => {
+          const { x, width } = e.nativeEvent.layout;
+          tabLayouts.current[tab.value] = { x, width };
+          if (tab.value === active) {
+            animatePill(tab.value, false);
+            initialised.current = true;
+          }
+        }
+      }
+    ))
+  ), children);
+}
+function TabsContent({ value, activeValue, children, style }) {
+  if (value !== activeValue) return null;
+  return /* @__PURE__ */ React.createElement(View, { style, accessibilityRole: "none" }, children);
+}
+var styles = StyleSheet.create({
+  list: {
+    flexDirection: "row",
+    borderRadius: 12,
+    padding: s(4),
+    gap: s(4)
+  },
+  listUnderline: {
+    flexDirection: "row",
+    // AUDIT FIX: was missing borderBottomColor — the 1px hairline would render
+    // as transparent on some platforms. Explicit token reference ensures visibility.
+    borderBottomWidth: 1
+  },
+  pill: {},
+  triggerWrap: {
+    flex: 1
+  },
+  trigger: {
+    flex: 1,
+    paddingVertical: vs(7),
+    paddingHorizontal: s(10),
+    borderRadius: 8,
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: 1
+  },
+  triggerUnderline: {
+    flex: 1,
+    paddingVertical: vs(12),
+    paddingHorizontal: s(16),
+    borderRadius: 0,
+    borderBottomWidth: 2,
+    borderBottomColor: "transparent"
+  },
+  triggerInner: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: s(4)
+  },
+  // AUDIT FIX: was Sohne-Regular at rest, Sohne-Medium/SemiBold when active.
+  // Font-weight changes at runtime cause advance-width shifts → the tab bar would
+  // visibly jump/reflow on every selection. Now always SemiBold; active state
+  // is communicated by color alone (foreground vs foregroundMuted). The pill
+  // indicator provides additional active signal without text layout side-effects.
+  triggerLabel: {
+    fontFamily: "Sohne-SemiBold",
+    fontSize: ms(13)
+  }
+});
+
+export { Tabs, TabsContent };

package/dist/chunk-ID72TK46.mjs

@@ -0,0 +1,111 @@
+import { PressableCard } from './chunk-3DKJ2GIC.mjs';
+import { impactLight } from './chunk-EJ7ZPXOH.mjs';
+import { RADIUS } from './chunk-QY3X2UYR.mjs';
+import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { vs, s, mvs, ms } from './chunk-2CE3TQVY.mjs';
+import React from 'react';
+import { StyleSheet, View, Text } from 'react-native';
+
+function Card({ children, variant = "elevated", onPress, style, accessibilityLabel }) {
+  const { colors } = useTheme();
+  const handlePress = () => {
+    if (!onPress) return;
+    impactLight();
+    onPress();
+  };
+  const variantStyle = {
+    elevated: {
+      backgroundColor: colors.card,
+      // AUDIT FIX: removed borderColor — shadow is the depth signal; a border on
+      // top of a shadow creates redundant double-framing that reads as "heavy"
+      // rather than "elevated". borderWidth: 0 overrides the base style's borderWidth: 1.
+      borderWidth: 0,
+      shadowColor: "#000",
+      shadowOffset: { width: 0, height: 4 },
+      shadowOpacity: 0.09,
+      shadowRadius: 14,
+      elevation: 4
+    },
+    outlined: {
+      backgroundColor: colors.card,
+      borderColor: colors.border,
+      shadowOpacity: 0,
+      elevation: 0
+    },
+    filled: {
+      backgroundColor: colors.surfaceStrong,
+      borderColor: colors.border,
+      shadowOpacity: 0,
+      elevation: 0
+    }
+  }[variant];
+  const cardContent = /* @__PURE__ */ React.createElement(View, { style: [styles.card, variantStyle, style] }, children);
+  if (onPress) {
+    return /* @__PURE__ */ React.createElement(
+      PressableCard,
+      {
+        onPress: handlePress,
+        rippleColor: "transparent",
+        touchSoundDisabled: true,
+        activateOnHover: true,
+        accessibilityRole: "button",
+        accessibilityLabel
+      },
+      cardContent
+    );
+  }
+  return cardContent;
+}
+function CardHeader({ children, style }) {
+  return /* @__PURE__ */ React.createElement(View, { style: [styles.header, style] }, children);
+}
+function CardTitle({ children, style }) {
+  const { colors } = useTheme();
+  return /* @__PURE__ */ React.createElement(Text, { style: [styles.title, { color: colors.foreground }, style], allowFontScaling: true }, children);
+}
+function CardDescription({ children, style }) {
+  const { colors } = useTheme();
+  return /* @__PURE__ */ React.createElement(Text, { style: [styles.description, { color: colors.foregroundSubtle }, style], allowFontScaling: true }, children);
+}
+function CardContent({ children, style }) {
+  return /* @__PURE__ */ React.createElement(View, { style: [styles.content, style] }, children);
+}
+function CardFooter({ children, style }) {
+  return /* @__PURE__ */ React.createElement(View, { style: [styles.footer, style] }, children);
+}
+var styles = StyleSheet.create({
+  card: {
+    borderRadius: RADIUS.md,
+    borderWidth: 1
+  },
+  header: {
+    padding: s(16),
+    paddingBottom: 0,
+    gap: vs(4)
+  },
+  title: {
+    fontFamily: "Sohne-SemiBold",
+    fontSize: ms(16),
+    lineHeight: mvs(22)
+  },
+  // AUDIT FIX: was foregroundMuted (2.2:1 fail) — description text now uses
+  // foregroundSubtle (5.9:1 ✓) which is readable while still visually secondary.
+  description: {
+    fontFamily: "Sohne-Regular",
+    fontSize: ms(13),
+    lineHeight: mvs(18)
+  },
+  content: {
+    padding: s(16),
+    paddingTop: s(12)
+  },
+  footer: {
+    paddingHorizontal: s(16),
+    paddingBottom: vs(14),
+    paddingTop: 0,
+    flexDirection: "row",
+    alignItems: "center"
+  }
+});
+
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };