@butternutbox/pawprint-native 0.25.1 → 1.1.0

package/.turbo/turbo-build.log

@@ -7,12 +7,12 @@
 CJS Build start
 ESM Build start
 DTS Build start
-CJS dist/index.cjs     555.31 KB
+CJS dist/index.cjs     553.93 KB
 CJS dist/index.cjs.map 1.08 MB
-CJS ⚡️ Build success in 8617ms
-ESM dist/index.js     524.64 KB
+CJS ⚡️ Build success in 7609ms
+ESM dist/index.js     523.65 KB
 ESM dist/index.js.map 1.08 MB
-ESM ⚡️ Build success in 8621ms
-DTS ⚡️ Build success in 23481ms
-DTS dist/index.d.cts 103.29 KB
-DTS dist/index.d.ts  103.29 KB
+ESM ⚡️ Build success in 7611ms
+DTS ⚡️ Build success in 20912ms
+DTS dist/index.d.cts 104.52 KB
+DTS dist/index.d.ts  104.52 KB

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @butternutbox/pawprint-native
 
+## 1.1.0
+
+### Minor Changes
+
+- 99afbc0: `ProductDisplayCard`: add a new `thumbnailBadge` prop for overlaying a `Badge` on the thumbnail image.
+  - `thumbnailBadge` accepts any `BadgeProps` (`variant`, `size`, `icon`, `children`, …) as an object, so consumers can render any badge content (e.g. `"New"`, `"Popular"`, a quantity number) with any Badge variant/size.
+  - Mutually exclusive with the quantity picker: when `thumbnailBadge` is set, the picker is never rendered.
+  - **Native** — `quantityBadge` (boolean) is now marked `@deprecated`. It still works during the deprecation window and behaves the same as before (renders a hardcoded primary/large Badge containing `quantity`). When both `thumbnailBadge` and `quantityBadge` are set, `thumbnailBadge` wins. Migrate with `thumbnailBadge={{ variant: "primary", size: "large", children: String(quantity) }}`. `quantityBadge` will be removed in a future major release.
+  - **Web** — `thumbnailBadge` is a new prop; there was no equivalent before.
+
+## 1.0.0
+
+### Major Changes
+
+- 8d9c9e7: Adopt `@butternutbox/pawprint-fonts` as the source of brand font assets.
+  - **Native** — `.ttf` files and font helpers no longer ship inside `@butternutbox/pawprint-native`. The package now depends on `@butternutbox/pawprint-fonts` and re-exports `BRAND_FONTS` / `resolveFont` from it, so consumers importing those symbols from `@butternutbox/pawprint-native` continue to work with no code changes. Downstream Expo apps should add `@butternutbox/pawprint-fonts` to their dependencies alongside the bump.
+  - **Web** — Ida Narrow `.woff2` files no longer ship inside `@butternutbox/pawprint-web`. Ida Narrow is imported via `@butternutbox/pawprint-fonts/*.woff2` subpath imports and resolved at consumer build time (Next.js, Vite, and webpack handle `.woff2` imports out of the box). IBM Plex Sans Condensed (from `@fontsource/ibm-plex-sans-condensed`) continues to be inlined into the bundle as before.
+
+  Why: font bytes shipped inside `pawprint-native` are embedded into the native app bundle by `expo-font`, so any change flows into Expo's fingerprint and forces a native rebuild in consuming apps. Font bytes inside `pawprint-web` bloat every published bundle. Moving them into a separately-versioned `pawprint-fonts` package that changes rarely avoids both — JS-only bumps to these packages no longer touch font bytes downstream.
+
 ## 0.25.1
 
 ### Patch Changes

package/dist/index.cjs

@@ -3,12 +3,7 @@
 var react = require('@emotion/react');
 var pawprintTokens = require('@butternutbox/pawprint-tokens');
 var styled51 = require('@emotion/native');
-var idaNarrow500 = require('./ida-narrow-500-normal.ttf');
-var idaNarrow700 = require('./ida-narrow-700-normal.ttf');
-var ibmPlexSansCondensed400 = require('./ibm-plex-sans-condensed-400-normal.ttf');
-var ibmPlexSansCondensed500 = require('./ibm-plex-sans-condensed-500-normal.ttf');
-var ibmPlexSansCondensed600 = require('./ibm-plex-sans-condensed-600-normal.ttf');
-var ibmPlexSansCondensed700 = require('./ibm-plex-sans-condensed-700-normal.ttf');
+var pawprintFonts = require('@butternutbox/pawprint-fonts');
 var React66 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var AvatarPrimitive = require('@rn-primitives/avatar');
@@ -48,12 +43,6 @@ function _interopNamespace(e) {
 }
 
 var styled51__default = /*#__PURE__*/_interopDefault(styled51);
-var idaNarrow500__default = /*#__PURE__*/_interopDefault(idaNarrow500);
-var idaNarrow700__default = /*#__PURE__*/_interopDefault(idaNarrow700);
-var ibmPlexSansCondensed400__default = /*#__PURE__*/_interopDefault(ibmPlexSansCondensed400);
-var ibmPlexSansCondensed500__default = /*#__PURE__*/_interopDefault(ibmPlexSansCondensed500);
-var ibmPlexSansCondensed600__default = /*#__PURE__*/_interopDefault(ibmPlexSansCondensed600);
-var ibmPlexSansCondensed700__default = /*#__PURE__*/_interopDefault(ibmPlexSansCondensed700);
 var React66__default = /*#__PURE__*/_interopDefault(React66);
 var AvatarPrimitive__namespace = /*#__PURE__*/_interopNamespace(AvatarPrimitive);
 var Svg__default = /*#__PURE__*/_interopDefault(Svg);
@@ -116,33 +105,6 @@ var __async = (__this, __arguments, generator) => {
     step((generator = generator.apply(__this, __arguments)).next());
   });
 };
-var BRAND_FONTS = {
-  [pawprintTokens.Brand.Butternutbox]: {
-    "IdaWebNarrow-Medium": idaNarrow500__default.default,
-    "IdaWebNarrow-Bold": idaNarrow700__default.default,
-    "IBMPlexSansCond-Regular": ibmPlexSansCondensed400__default.default,
-    "IBMPlexSansCond-Medium": ibmPlexSansCondensed500__default.default,
-    "IBMPlexSansCond-SemiBold": ibmPlexSansCondensed600__default.default,
-    "IBMPlexSansCond-Bold": ibmPlexSansCondensed700__default.default
-  }
-};
-var FONT_MAP = {
-  "IBM Plex Sans Condensed": {
-    "400": "IBMPlexSansCond-Regular",
-    "500": "IBMPlexSansCond-Medium",
-    "600": "IBMPlexSansCond-SemiBold",
-    "700": "IBMPlexSansCond-Bold"
-  },
-  "Ida Narrow": {
-    "500": "IdaWebNarrow-Medium",
-    "700": "IdaWebNarrow-Bold"
-  }
-};
-var resolveFont = (fontFamily, fontWeight) => {
-  var _a;
-  const resolved = (_a = FONT_MAP[fontFamily]) == null ? void 0 : _a[fontWeight];
-  return { fontFamily: resolved != null ? resolved : fontFamily };
-};
 var createPawprintTheme = (brand = pawprintTokens.Brand.Butternutbox, theme2 = pawprintTokens.Theme.Default) => {
   const brandThemes = pawprintTokens.THEME_OPTIONS_MAP[brand];
   const themeOptions = brandThemes && theme2 in brandThemes ? brandThemes[theme2] : pawprintTokens.DEFAULT_THEME_OPTIONS;
@@ -193,7 +155,7 @@ var resolveLetterSpacing = (letterSpacing, fontSize) => {
   return parseFloat(letterSpacing);
 };
 var semanticToStyle = (token) => {
-  const { fontFamily } = resolveFont(token.fontFamily, token.fontWeight);
+  const { fontFamily } = pawprintFonts.resolveFont(token.fontFamily, token.fontWeight);
   const fontSize = parseTokenValue(token.fontSize);
   return __spreadValues({
     fontFamily,
@@ -206,7 +168,7 @@ var semanticToStyle = (token) => {
 var nativeTokenToStyle = (token) => {
   const style = {};
   if (token.fontFamily && token.fontWeight) {
-    const { fontFamily } = resolveFont(token.fontFamily, token.fontWeight);
+    const { fontFamily } = pawprintFonts.resolveFont(token.fontFamily, token.fontWeight);
     style.fontFamily = fontFamily;
   } else if (token.fontFamily) {
     style.fontFamily = token.fontFamily;
@@ -1270,7 +1232,7 @@ var Button = React66__default.default.forwardRef(
     const spacingTokens = buttons.spacing[size];
     const typographyKey = sizeToTypographyKey[size];
     const typography = buttons.text[typographyKey];
-    resolveFont(typography.fontFamily, typography.fontWeight);
+    pawprintFonts.resolveFont(typography.fontFamily, typography.fontWeight);
     const [pressed, setPressed] = React66__default.default.useState(false);
     const getVariantStyles = (isPressed) => {
       if (variant === "filled") {
@@ -1680,7 +1642,7 @@ var StyledInput = styled51__default.default(reactNative.TextInput)(({
   var _a, _b;
   const { colour, field } = theme2.tokens.components.inputs;
   const typography = field.placeholder.default;
-  const { fontFamily } = resolveFont(
+  const { fontFamily } = pawprintFonts.resolveFont(
     typography.fontFamily,
     typography.fontWeight
   );
@@ -5014,7 +4976,7 @@ var StyledTextArea = styled51__default.default(reactNative.TextInput)(({ theme:
   var _a, _b;
   const { colour, field } = theme2.tokens.components.inputs;
   const typography = field.placeholder.default;
-  const { fontFamily } = resolveFont(
+  const { fontFamily } = pawprintFonts.resolveFont(
     typography.fontFamily,
     typography.fontWeight
   );
@@ -7448,7 +7410,7 @@ var NumberFieldInput = React66__default.default.forwardRef(
       [onChangeText]
     );
     const typographyToken = fieldSize === "lg" ? tokens3.typography.field.large : tokens3.typography.field.small;
-    const resolvedInputFontFamily = typographyToken.fontFamily && typographyToken.fontWeight ? resolveFont(typographyToken.fontFamily, typographyToken.fontWeight).fontFamily : typographyToken.fontFamily;
+    const resolvedInputFontFamily = typographyToken.fontFamily && typographyToken.fontWeight ? pawprintFonts.resolveFont(typographyToken.fontFamily, typographyToken.fontWeight).fontFamily : typographyToken.fontFamily;
     return /* @__PURE__ */ jsxRuntime.jsxs(StyledRow, { rowGap: parseTokenValue35(sizeTokens.group.gap), children: [
       showDecrementButton && /* @__PURE__ */ jsxRuntime.jsx(
         IconButton,
@@ -9368,7 +9330,7 @@ var parseSize = (value) => {
 };
 var resolveTypography = (typography) => {
   var _a, _b;
-  const { fontFamily } = resolveFont(
+  const { fontFamily } = pawprintFonts.resolveFont(
     typography.fontFamily,
     typography.fontWeight
   );
@@ -12300,6 +12262,7 @@ var ProductDisplayCard = React66__default.default.forwardRef(
       onQuantityChange,
       showQuantityPicker = false,
       quantityBadge = false,
+      thumbnailBadge,
       disableQuantityButtons = false,
       hideQuantityButtons = false,
       incrementDisabled = false,
@@ -12322,6 +12285,7 @@ var ProductDisplayCard = React66__default.default.forwardRef(
       "onQuantityChange",
       "showQuantityPicker",
       "quantityBadge",
+      "thumbnailBadge",
       "disableQuantityButtons",
       "hideQuantityButtons",
       "incrementDisabled",
@@ -12342,6 +12306,7 @@ var ProductDisplayCard = React66__default.default.forwardRef(
         onQuantityChange == null ? void 0 : onQuantityChange(newQuantity);
       }
     };
+    const resolvedBadgeProps = thumbnailBadge != null ? thumbnailBadge : quantityBadge ? { variant: "primary", size: "large", children: String(quantity) } : void 0;
     const cardContent = /* @__PURE__ */ jsxRuntime.jsxs(
       StyledCardContainer,
       __spreadProps(__spreadValues({
@@ -12363,7 +12328,7 @@ var ProductDisplayCard = React66__default.default.forwardRef(
                     style: { flex: 1, width: "100%" }
                   }
                 ) : image,
-                quantityBadge && /* @__PURE__ */ jsxRuntime.jsx(StyledBadgeOverlay, { pointerEvents: "none", children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "primary", size: "large", children: String(quantity) }) })
+                resolvedBadgeProps && /* @__PURE__ */ jsxRuntime.jsx(StyledBadgeOverlay, { pointerEvents: "none", children: /* @__PURE__ */ jsxRuntime.jsx(Badge, __spreadValues({}, resolvedBadgeProps)) })
               ]
             }
           ) }),
@@ -12372,7 +12337,7 @@ var ProductDisplayCard = React66__default.default.forwardRef(
               /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "heading", size: "2xs", color: "primary", children: title }),
               showSubtext && subtext && /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", size: "sm", color: "secondary", children: subtext })
             ] }),
-            showQuantityPicker && !quantityBadge && /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: { marginLeft: "auto" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+            showQuantityPicker && !resolvedBadgeProps && /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: { marginLeft: "auto" }, children: /* @__PURE__ */ jsxRuntime.jsx(
               NumberField,
               {
                 size: "sm",
@@ -12606,7 +12571,6 @@ Object.defineProperty(exports, "styled", {
 exports.Accordion = Accordion;
 exports.Animated = Animated5;
 exports.Avatar = Avatar;
-exports.BRAND_FONTS = BRAND_FONTS;
 exports.Badge = Badge;
 exports.Button = Button;
 exports.ButtonDock = ButtonDock;
@@ -12680,7 +12644,6 @@ exports.fadeAnimation = fadeAnimation;
 exports.fadeDownAnimation = fadeDownAnimation;
 exports.fadeUpAnimation = fadeUpAnimation;
 exports.registerLogo = registerLogo;
-exports.resolveFont = resolveFont;
 exports.resolveLogo = resolveLogo;
 exports.scaleAnimation = scaleAnimation;
 exports.slideInAnimation = slideInAnimation;
@@ -12692,5 +12655,11 @@ exports.usePasswordField = usePasswordField;
 exports.usePawprint = usePawprint;
 exports.useSearchField = useSearchField;
 exports.useSelectField = useSelectField;
+Object.keys(pawprintFonts).forEach(function (k) {
+  if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+    enumerable: true,
+    get: function () { return pawprintFonts[k]; }
+  });
+});
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map