@butternutbox/pawprint-native 1.1.0 → 1.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@butternutbox/pawprint-native",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "type": "module",
   "description": "ButternutBox Pawprint Design System - React Native Components",
   "main": "./dist/index.cjs",

package/src/components/molecules/ProductDisplayCard/ProductDisplayCard.test.tsx

@@ -222,7 +222,7 @@ describe("ProductDisplayCard (Native)", () => {
     expect(screen.queryByText("6")).toBeFalsy()
   })
 
-  it("suppresses the quantity picker when quantityBadge is set (mutually exclusive)", () => {
+  it("renders the quantity picker alongside a quantityBadge", () => {
     renderWithTheme(
       <ProductDisplayCard
         title="Test Product"
@@ -239,8 +239,8 @@ describe("ProductDisplayCard (Native)", () => {
 
     // The badge shows the quantity...
     expect(screen.getByText("3")).toBeTruthy()
-    // ...and the picker input is not rendered.
-    expect(screen.queryByDisplayValue("3")).toBeFalsy()
+    // ...and the picker is rendered independently of it.
+    expect(screen.getByDisplayValue("3")).toBeTruthy()
   })
 
   it("renders a thumbnailBadge from BadgeProps", () => {
@@ -259,7 +259,7 @@ describe("ProductDisplayCard (Native)", () => {
     expect(screen.getByText("New")).toBeTruthy()
   })
 
-  it("suppresses the quantity picker when thumbnailBadge is set", () => {
+  it("renders the quantity picker alongside a thumbnailBadge", () => {
     renderWithTheme(
       <ProductDisplayCard
         title="Test Product"
@@ -275,7 +275,7 @@ describe("ProductDisplayCard (Native)", () => {
     )
 
     expect(screen.getByText("New")).toBeTruthy()
-    expect(screen.queryByDisplayValue("2")).toBeFalsy()
+    expect(screen.getByDisplayValue("2")).toBeTruthy()
   })
 
   it("prefers thumbnailBadge over the deprecated quantityBadge when both are set", () => {

package/src/components/molecules/ProductDisplayCard/ProductDisplayCard.tsx

@@ -20,16 +20,14 @@ export type ProductDisplayCardProps = ViewProps & {
    * wins. This prop will be removed in a future major release.
    *
    * Show a quantity badge overlaid on the top-right of the image (rendering the
-   * current `quantity`) instead of the quantity picker. Defaults to `false`.
-   * The badge and the quantity picker are mutually exclusive — only one shows
-   * at a time; when `quantityBadge` is true the picker is never rendered.
+   * current `quantity`). Defaults to `false`. Independent of the quantity
+   * picker — use `showQuantityPicker` to control that separately.
    */
   quantityBadge?: boolean
   /**
    * Render a `Badge` overlaid on the top-right of the image. Accepts any
    * `BadgeProps` (variant, size, icon, children, etc.) — pass them as an object.
-   * Mutually exclusive with the quantity picker: when set, the picker is never
-   * rendered.
+   * Independent of the quantity picker: both can be shown at the same time.
    *
    * @example
    * thumbnailBadge={{ variant: "primary", size: "large", children: "New" }}
@@ -312,7 +310,7 @@ export const ProductDisplayCard = React.forwardRef<
             )}
           </StyledTextContainer>
 
-          {showQuantityPicker && !resolvedBadgeProps && (
+          {showQuantityPicker && (
             <View style={{ marginLeft: "auto" }}>
               <NumberField
                 size="sm"

package/src/components/molecules/SegmentedControl/SegmentedControl.tsx

@@ -87,9 +87,11 @@ const StyledSegmentItem = styled(Pressable)<{
 const StyledIntrinsicClip = styled(View)<{
   clipBorderRadius: number
   clipBgColor: string
+  clipHeight: number
   clipWidth?: number
-}>(({ clipBorderRadius, clipBgColor, clipWidth }) => ({
+}>(({ clipBorderRadius, clipBgColor, clipHeight, clipWidth }) => ({
   overflow: "hidden",
+  height: clipHeight,
   borderRadius: clipBorderRadius,
   backgroundColor: clipBgColor,
   alignSelf: "flex-start",
@@ -282,12 +284,14 @@ type IntrinsicTrackProps = ViewProps & {
     scrollIndicatorPaddingOuter: number
     scrollIndicatorPaddingInner: number
   }
+  trackHeight: number
   renderItems: () => React.ReactNode
   forwardedRef: React.Ref<View>
 }
 
 const IntrinsicTrack = ({
   containerProps,
+  trackHeight,
   renderItems,
   forwardedRef,
   ...rest
@@ -325,6 +329,7 @@ const IntrinsicTrack = ({
       <StyledIntrinsicClip
         clipBorderRadius={containerProps.containerBorderRadius}
         clipBgColor={containerProps.containerBgColor}
+        clipHeight={trackHeight}
         clipWidth={
           containerWidth > 0 && contentWidth > 0
             ? Math.min(contentWidth, containerWidth)
@@ -426,7 +431,7 @@ const SegmentedControlRoot = React.forwardRef<View, SegmentedControlProps>(
     ref
   ) => {
     const theme = useTheme()
-    const { spacing, borderRadius, colour } =
+    const { spacing, borderRadius, colour, controlItem } =
       theme.tokens.components.segmentedControl
     const { dimensions } = theme.tokens.semantics
 
@@ -505,10 +510,15 @@ const SegmentedControlRoot = React.forwardRef<View, SegmentedControlProps>(
       scrollIndicatorPaddingInner: parseTokenValue(dimensions.spacing.sm)
     }
 
+    const trackHeight =
+      parseTokenValue(controlItem.size.small.height) +
+      parseTokenValue(spacing.verticalPadding) * 2
+
     if (layout === "intrinsic") {
       return (
         <IntrinsicTrack
           containerProps={containerProps}
+          trackHeight={trackHeight}
           renderItems={renderItems}
           forwardedRef={ref}
           {...rest}