@butternutbox/pawprint-native 1.1.1 → 1.1.2

package/package.json

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

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}