@butternutbox/pawprint-native 0.15.0 → 0.15.2

package/dist/index.d.cts

@@ -1829,7 +1829,14 @@ declare const StackedNotifications: React.ForwardRefExoticComponent<StackedNotif
 type TooltipAlignment = "left" | "middle" | "right";
 type TooltipPosition = "top" | "bottom";
 type TooltipOwnProps = {
-    text: string;
+    /**
+     * Tooltip body content. Pass a plain string for simple copy, or a
+     * `ReactNode` (e.g. a `<Trans>` / nested `<Text>`) when part of the text
+     * needs its own styling — bold, colour, underline, etc. A node is rendered
+     * inside the tooltip's own `<Typography>`, so it inherits the base font and
+     * only the emphasised spans override it.
+     */
+    text: string | React.ReactNode;
     alignment?: TooltipAlignment;
     position?: TooltipPosition;
     /**

package/dist/index.d.ts

@@ -1829,7 +1829,14 @@ declare const StackedNotifications: React.ForwardRefExoticComponent<StackedNotif
 type TooltipAlignment = "left" | "middle" | "right";
 type TooltipPosition = "top" | "bottom";
 type TooltipOwnProps = {
-    text: string;
+    /**
+     * Tooltip body content. Pass a plain string for simple copy, or a
+     * `ReactNode` (e.g. a `<Trans>` / nested `<Text>`) when part of the text
+     * needs its own styling — bold, colour, underline, etc. A node is rendered
+     * inside the tooltip's own `<Typography>`, so it inherits the base font and
+     * only the emphasised spans override it.
+     */
+    text: string | React.ReactNode;
     alignment?: TooltipAlignment;
     position?: TooltipPosition;
     /**

package/dist/index.js

@@ -188,7 +188,10 @@ var VARIANT_DEFAULTS = {
   heading: { size: "md" },
   display: { size: "lg" }
 };
-var StyledText = styled51(Text)({});
+var StyledText = styled51(Text)({
+  includeFontPadding: false,
+  textAlignVertical: "center"
+});
 var Typography = React66.forwardRef(
   (props, ref) => {
     const theme2 = useTheme();
@@ -8873,6 +8876,16 @@ var { dimensions } = semantics;
 var parseSize = (value) => {
   return parseInt(value.replace("px", ""), 10);
 };
+var resolveTypography = (typography) => {
+  var _a, _b;
+  const { fontFamily } = resolveFont(
+    typography.fontFamily,
+    typography.fontWeight
+  );
+  const fontSize = parseSize(typography.fontSize);
+  const letterSpacing = ((_a = typography.letterSpacing) == null ? void 0 : _a.endsWith("%")) ? parseFloat(typography.letterSpacing) / 100 * fontSize : parseFloat((_b = typography.letterSpacing) != null ? _b : "0");
+  return { fontFamily, fontSize, letterSpacing };
+};
 var Wrapper = styled51(View)({
   borderWidth: parseSize(inputTokens.borderWidth.field.selected),
   borderColor: inputTokens.colour.field.border.selected,
@@ -8890,18 +8903,16 @@ var SelectIcon = styled51(Animated10.View)({
   right: 0,
   marginRight: 0
 });
-var InputText2 = styled51(Text)({
-  color: inputTokens.colour.field.text.default,
-  fontSize: parseSize(inputTokens.field.placeholder.default.fontSize),
-  fontWeight: inputTokens.field.placeholder.default.fontWeight,
+var InputText2 = styled51(Text)(__spreadProps(__spreadValues({
+  color: inputTokens.colour.field.text.default
+}, resolveTypography(inputTokens.field.placeholder.default)), {
   flex: 1
-});
-var PlaceholderText = styled51(Text)({
-  color: inputTokens.colour.field.text.placeholder,
-  fontSize: parseSize(inputTokens.field.placeholder.default.fontSize),
-  fontWeight: inputTokens.field.placeholder.default.fontWeight,
+}));
+var PlaceholderText = styled51(Text)(__spreadProps(__spreadValues({
+  color: inputTokens.colour.field.text.placeholder
+}, resolveTypography(inputTokens.field.placeholder.default)), {
   flex: 1
-});
+}));
 var ModalOverlay = styled51(View)({
   flex: 1,
   backgroundColor: "rgba(0, 0, 0, 0.32)",
@@ -8917,13 +8928,11 @@ var AndroidDialog = styled51(View)({
   paddingBottom: parseSize(dimensions.spacing.xl),
   paddingHorizontal: parseSize(dimensions.spacing.md)
 });
-var DialogTitle = styled51(Text)({
-  fontSize: parseSize(inputTokens.field.placeholder.default.fontSize),
-  fontWeight: inputTokens.text.label.fontWeight,
+var DialogTitle = styled51(Text)(__spreadProps(__spreadValues({}, resolveTypography(inputTokens.text.label)), {
   color: inputTokens.colour.field.text.default,
   marginBottom: parseSize(dimensions.spacing.md),
   marginLeft: parseSize(dimensions.spacing.xs)
-});
+}));
 var AndroidOptionRow = styled51(View)({
   flexDirection: "row",
   alignItems: "center",
@@ -8949,9 +8958,9 @@ var RadioInner = styled51(View)({
   backgroundColor: inputTokens.colour.field.border.selected
 });
 var AndroidOptionText = styled51(Text)(
-  ({ isSelected }) => ({
-    fontSize: parseSize(inputTokens.field.placeholder.default.fontSize),
-    fontWeight: isSelected ? inputTokens.text.label.fontWeight : inputTokens.field.placeholder.default.fontWeight,
+  ({ isSelected }) => __spreadProps(__spreadValues({}, resolveTypography(
+    isSelected ? inputTokens.text.label : inputTokens.field.placeholder.default
+  )), {
     color: inputTokens.colour.field.text.default,
     flex: 1
   })
@@ -10065,7 +10074,7 @@ var Tooltip = React66.forwardRef(
         ref,
         accessible: true,
         accessibilityRole: "none",
-        accessibilityLabel: text,
+        accessibilityLabel: typeof text === "string" ? text : void 0,
         accessibilityLiveRegion: "polite"
       }, props), {
         children: [