@tamagui/group 1.7.0

package/dist/jsx/Group.mjs

@@ -0,0 +1,220 @@
+import {
+  getConfig,
+  getExpandedShorthands,
+  getTokens,
+  getVariableValue,
+  isTamaguiElement,
+  mergeProps,
+  spacedChildren,
+  styled,
+  useMediaPropsActive,
+  withStaticProperties
+} from "@tamagui/core";
+import { createContextScope } from "@tamagui/create-context";
+import { ThemeableStack } from "@tamagui/stacks";
+import { useControllableState } from "@tamagui/use-controllable-state";
+import React, { Children, forwardRef, isValidElement } from "react";
+import { ScrollView } from "react-native";
+import { useIndex, useIndexedChildren } from "reforest";
+const GROUP_NAME = "Group";
+const [createGroupContext, createGroupScope] = createContextScope(GROUP_NAME);
+const [GroupProvider, useGroupContext] = createGroupContext(GROUP_NAME);
+const GroupFrame = styled(ThemeableStack, {
+  name: "GroupFrame",
+  variants: {
+    unstyled: {
+      false: {
+        size: "$true",
+        y: 0,
+        backgroundColor: "$background"
+      }
+    },
+    size: (val, { tokens }) => {
+      const borderRadius = tokens.radius[val] ?? val ?? tokens.radius["$true"];
+      return {
+        borderRadius
+      };
+    }
+  },
+  defaultVariants: {
+    unstyled: false
+  }
+});
+function createGroup(verticalDefault) {
+  return withStaticProperties(
+    forwardRef((props, ref) => {
+      const activeProps = useMediaPropsActive(props);
+      const {
+        __scopeGroup,
+        children: childrenProp,
+        space,
+        size = "$true",
+        spaceDirection,
+        separator,
+        scrollable,
+        axis = verticalDefault ? "vertical" : "horizontal",
+        disabled: disabledProp,
+        disablePassBorderRadius: disablePassBorderRadiusProp,
+        borderRadius,
+        forceUseItem,
+        ...restProps
+      } = getExpandedShorthands(activeProps);
+      const vertical = axis === "vertical";
+      const [itemChildrenCount, setItemChildrenCount] = useControllableState({
+        defaultProp: forceUseItem ? 1 : 0
+      });
+      const isUsingItems = true;
+      const radius = borderRadius ?? (size ? getVariableValue(getTokens().radius[size]) - 1 : void 0);
+      const hasRadius = radius !== void 0;
+      const disablePassBorderRadius = disablePassBorderRadiusProp ?? !hasRadius;
+      if (!isUsingItems)
+        console.log("screw up!");
+      const childrenArray = Children.toArray(childrenProp);
+      const children = isUsingItems ? childrenProp : childrenArray.map((child, i) => {
+        if (!isValidElement(child)) {
+          return child;
+        }
+        const disabled = child.props.disabled ?? disabledProp;
+        const isFirst = i === 0;
+        const isLast = i === childrenArray.length - 1;
+        const radiusStyles = disablePassBorderRadius === true ? null : getBorderRadius({
+          isFirst,
+          isLast,
+          radius,
+          vertical,
+          disable: disablePassBorderRadius
+        });
+        const props2 = {
+          disabled,
+          ...isTamaguiElement(child) ? radiusStyles : { style: radiusStyles }
+        };
+        return cloneElementWithPropOrder(child, props2);
+      });
+      const indexedChildren = useIndexedChildren(
+        spacedChildren({
+          direction: spaceDirection,
+          separator,
+          space,
+          children
+        })
+      );
+      const onItemMount = React.useCallback(
+        () => setItemChildrenCount((prev) => prev + 1),
+        []
+      );
+      const onItemUnmount = React.useCallback(
+        () => setItemChildrenCount((prev) => prev - 1),
+        []
+      );
+      return <GroupProvider
+        disablePassBorderRadius={disablePassBorderRadius}
+        vertical={axis === "vertical"}
+        radius={radius}
+        disabled={disabledProp}
+        onItemMount={onItemMount}
+        onItemUnmount={onItemUnmount}
+        scope={__scopeGroup}
+      ><GroupFrame
+        ref={ref}
+        size={size}
+        flexDirection={axis === "horizontal" ? "row" : "column"}
+        borderRadius={borderRadius}
+        {...restProps}
+      >{wrapScroll({ ...activeProps, axis }, indexedChildren)}</GroupFrame></GroupProvider>;
+    }),
+    {
+      Item: GroupItem
+    }
+  );
+}
+const GroupItem = (props) => {
+  const { __scopeGroup, children } = props;
+  const groupItemProps = useGroupItem(
+    { disabled: isValidElement(children) ? children.props.disabled : void 0 },
+    __scopeGroup
+  );
+  if (!isValidElement(children)) {
+    return children;
+  }
+  if (isTamaguiElement(children)) {
+    return React.cloneElement(children, groupItemProps);
+  }
+  return React.cloneElement(children, {
+    style: {
+      ...children.props?.["style"],
+      ...groupItemProps
+    }
+  });
+};
+const useGroupItem = (childrenProps, __scopeGroup) => {
+  const treeIndex = useIndex();
+  const context = useGroupContext("GroupItem", __scopeGroup);
+  React.useEffect(() => {
+    context.onItemMount();
+    return () => {
+      context.onItemUnmount();
+    };
+  }, []);
+  if (!treeIndex) {
+    throw Error("<Group.Item/> should only be used within a <Group/>");
+  }
+  const isFirst = treeIndex.index === 0;
+  const isLast = treeIndex.index === treeIndex.maxIndex;
+  const disabled = childrenProps.disabled ?? context.disabled;
+  let propsToPass = {
+    disabled
+  };
+  if (context.disablePassBorderRadius !== true) {
+    const borderRadius = getBorderRadius({
+      radius: context.radius,
+      isFirst,
+      isLast,
+      vertical: context.vertical,
+      disable: context.disablePassBorderRadius
+    });
+    return { ...propsToPass, ...borderRadius };
+  }
+  return propsToPass;
+};
+const Group = createGroup(true);
+const YGroup = Group;
+const XGroup = createGroup(false);
+const wrapScroll = ({ scrollable, axis, showScrollIndicator = false }, children) => {
+  if (scrollable)
+    return <ScrollView
+      {...axis === "vertical" && {
+        showsVerticalScrollIndicator: showScrollIndicator
+      }}
+      {...axis === "horizontal" && {
+        horizontal: true,
+        showsHorizontalScrollIndicator: showScrollIndicator
+      }}
+    >{children}</ScrollView>;
+  return children;
+};
+const getBorderRadius = ({
+  isFirst,
+  isLast,
+  radius,
+  vertical,
+  disable
+}) => {
+  return {
+    borderTopLeftRadius: isFirst && disable !== "top" && disable !== "start" ? radius : 0,
+    borderTopRightRadius: disable !== "top" && disable !== "end" && (vertical && isFirst || !vertical && isLast) ? radius : 0,
+    borderBottomLeftRadius: disable !== "bottom" && disable !== "start" && (vertical && isLast || !vertical && isFirst) ? radius : 0,
+    borderBottomRightRadius: isLast && disable !== "bottom" && disable !== "end" ? radius : 0
+  };
+};
+const cloneElementWithPropOrder = (child, props) => {
+  const next = mergeProps(child.props, props, false, getConfig().shorthands)[0];
+  return React.cloneElement({ ...child, props: null }, next);
+};
+export {
+  Group,
+  GroupFrame,
+  XGroup,
+  YGroup,
+  useGroupItem
+};
+//# sourceMappingURL=Group.mjs.map

package/dist/jsx/Group.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/Group.tsx"],
+  "sourcesContent": ["import {\n  GetProps,\n  TamaguiElement,\n  UnionableString,\n  Variable,\n  getConfig,\n  getExpandedShorthands,\n  getTokens,\n  getVariableValue,\n  isTamaguiElement,\n  mergeProps,\n  spacedChildren,\n  styled,\n  useMediaPropsActive,\n  withStaticProperties,\n} from '@tamagui/core'\nimport { Scope, createContextScope } from '@tamagui/create-context'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport React, { Children, forwardRef, isValidElement } from 'react'\nimport { ScrollView } from 'react-native'\nimport { useIndex, useIndexedChildren } from 'reforest'\n\ntype DisablePassBorderRadius = boolean | 'bottom' | 'top' | 'start' | 'end'\n\ninterface GroupContextValue {\n  vertical: boolean\n  disablePassBorderRadius: DisablePassBorderRadius\n  onItemMount: () => void\n  onItemUnmount: () => void\n  radius?: number | UnionableString | Variable<any>\n  disabled?: boolean\n}\n\nconst GROUP_NAME = 'Group'\n\ntype ScopedProps<P> = P & { __scopeGroup?: Scope }\nconst [createGroupContext, createGroupScope] = createContextScope(GROUP_NAME)\nconst [GroupProvider, useGroupContext] = createGroupContext<GroupContextValue>(GROUP_NAME)\n\nexport const GroupFrame = styled(ThemeableStack, {\n  name: 'GroupFrame',\n\n  variants: {\n    unstyled: {\n      false: {\n        size: '$true',\n        y: 0,\n        backgroundColor: '$background',\n      },\n    },\n\n    size: (val, { tokens }) => {\n      const borderRadius = tokens.radius[val] ?? val ?? tokens.radius['$true']\n      return {\n        borderRadius,\n      }\n    },\n  } as const,\n\n  defaultVariants: {\n    unstyled: false,\n  },\n})\n\nexport type GroupProps = GetProps<typeof GroupFrame> & {\n  axis?: 'horizontal' | 'vertical'\n\n  scrollable?: boolean\n  /**\n   * @default false\n   */\n  showScrollIndicator?: boolean\n  disabled?: boolean\n  disablePassBorderRadius?: DisablePassBorderRadius\n  /**\n   * forces the group to use the Group.Item API\n   */\n  forceUseItem?: boolean\n}\n\nfunction createGroup(verticalDefault: boolean) {\n  return withStaticProperties(\n    forwardRef<TamaguiElement, ScopedProps<GroupProps>>((props, ref) => {\n      const activeProps = useMediaPropsActive(props)\n\n      const {\n        __scopeGroup,\n        children: childrenProp,\n        space,\n        size = '$true',\n        spaceDirection,\n        separator,\n        scrollable,\n        axis = verticalDefault ? 'vertical' : 'horizontal',\n        disabled: disabledProp,\n        disablePassBorderRadius: disablePassBorderRadiusProp,\n        borderRadius,\n        forceUseItem,\n        ...restProps\n      } = getExpandedShorthands(activeProps)\n\n      const vertical = axis === 'vertical'\n      const [itemChildrenCount, setItemChildrenCount] = useControllableState({\n        defaultProp: forceUseItem ? 1 : 0,\n      })\n      const isUsingItems = true // itemChildrenCount > 0\n\n      // 1 off given border to adjust for border radius? This should be user controllable\n      const radius =\n        borderRadius ??\n        (size ? getVariableValue(getTokens().radius[size]) - 1 : undefined)\n\n      const hasRadius = radius !== undefined\n      const disablePassBorderRadius = disablePassBorderRadiusProp ?? !hasRadius\n\n      if (!isUsingItems) console.log('screw up!')\n      const childrenArray = Children.toArray(childrenProp)\n      const children = isUsingItems\n        ? childrenProp\n        : childrenArray.map((child, i) => {\n            if (!isValidElement(child)) {\n              return child\n            }\n            const disabled = child.props.disabled ?? disabledProp\n\n            const isFirst = i === 0\n            const isLast = i === childrenArray.length - 1\n\n            const radiusStyles =\n              disablePassBorderRadius === true\n                ? null\n                : getBorderRadius({\n                    isFirst,\n                    isLast,\n                    radius,\n                    vertical,\n                    disable: disablePassBorderRadius,\n                  })\n            const props = {\n              disabled,\n              ...(isTamaguiElement(child) ? radiusStyles : { style: radiusStyles }),\n            }\n\n            return cloneElementWithPropOrder(child, props)\n          })\n\n      const indexedChildren = useIndexedChildren(\n        spacedChildren({\n          direction: spaceDirection,\n          separator,\n          space,\n          children,\n        })\n      )\n\n      const onItemMount = React.useCallback(\n        () => setItemChildrenCount((prev) => prev + 1),\n        []\n      )\n      const onItemUnmount = React.useCallback(\n        () => setItemChildrenCount((prev) => prev - 1),\n        []\n      )\n\n      return (\n        <GroupProvider\n          disablePassBorderRadius={disablePassBorderRadius}\n          vertical={axis === 'vertical'}\n          radius={radius}\n          disabled={disabledProp}\n          onItemMount={onItemMount}\n          onItemUnmount={onItemUnmount}\n          scope={__scopeGroup}\n        >\n          <GroupFrame\n            ref={ref}\n            size={size}\n            flexDirection={axis === 'horizontal' ? 'row' : 'column'}\n            borderRadius={borderRadius}\n            {...restProps}\n          >\n            {wrapScroll({ ...activeProps, axis }, indexedChildren)}\n          </GroupFrame>\n        </GroupProvider>\n      )\n    }),\n    {\n      Item: GroupItem,\n    }\n  )\n}\n\nconst GroupItem = (props: ScopedProps<{ children: React.ReactNode }>) => {\n  const { __scopeGroup, children } = props\n  const groupItemProps = useGroupItem(\n    { disabled: isValidElement(children) ? children.props.disabled : undefined },\n    __scopeGroup\n  )\n\n  if (!isValidElement(children)) {\n    return children as any\n  }\n\n  if (isTamaguiElement(children)) {\n    return React.cloneElement(children, groupItemProps)\n  }\n\n  return React.cloneElement(children, {\n    style: {\n      ...children.props?.['style'],\n      ...groupItemProps,\n    },\n  } as any)\n}\n\nexport const useGroupItem = (\n  childrenProps: { disabled: boolean },\n  __scopeGroup?: Scope\n) => {\n  const treeIndex = useIndex()\n  const context = useGroupContext('GroupItem', __scopeGroup)\n\n  React.useEffect(() => {\n    context.onItemMount()\n    return () => {\n      context.onItemUnmount()\n    }\n  }, [])\n\n  if (!treeIndex) {\n    throw Error('<Group.Item/> should only be used within a <Group/>')\n  }\n\n  const isFirst = treeIndex.index === 0\n  const isLast = treeIndex.index === treeIndex.maxIndex\n\n  const disabled = childrenProps.disabled ?? context.disabled\n\n  let propsToPass: Record<string, any> = {\n    disabled,\n  }\n\n  if (context.disablePassBorderRadius !== true) {\n    const borderRadius = getBorderRadius({\n      radius: context.radius,\n      isFirst,\n      isLast,\n      vertical: context.vertical,\n      disable: context.disablePassBorderRadius,\n    })\n    return { ...propsToPass, ...borderRadius }\n  }\n  return propsToPass\n}\n\nexport const Group = createGroup(true)\nexport const YGroup = Group\nexport const XGroup = createGroup(false)\n\nconst wrapScroll = (\n  { scrollable, axis, showScrollIndicator = false }: GroupProps,\n  children: any\n) => {\n  if (scrollable)\n    return (\n      <ScrollView\n        {...(axis === 'vertical' && {\n          showsVerticalScrollIndicator: showScrollIndicator,\n        })}\n        {...(axis === 'horizontal' && {\n          horizontal: true,\n          showsHorizontalScrollIndicator: showScrollIndicator,\n        })}\n      >\n        {children}\n      </ScrollView>\n    )\n  return children\n}\n\nconst getBorderRadius = ({\n  isFirst,\n  isLast,\n  radius,\n  vertical,\n  disable,\n}: {\n  radius: any\n  vertical: boolean\n  isFirst: boolean\n  isLast: boolean\n  disable: DisablePassBorderRadius\n}) => {\n  // TODO: RTL support would be nice here\n  return {\n    borderTopLeftRadius: isFirst && disable !== 'top' && disable !== 'start' ? radius : 0,\n    borderTopRightRadius:\n      disable !== 'top' &&\n      disable !== 'end' &&\n      ((vertical && isFirst) || (!vertical && isLast))\n        ? radius\n        : 0,\n    borderBottomLeftRadius:\n      disable !== 'bottom' &&\n      disable !== 'start' &&\n      ((vertical && isLast) || (!vertical && isFirst))\n        ? radius\n        : 0,\n    borderBottomRightRadius:\n      isLast && disable !== 'bottom' && disable !== 'end' ? radius : 0,\n  }\n}\n\nconst cloneElementWithPropOrder = (child: any, props: Object) => {\n  const next = mergeProps(child.props, props, false, getConfig().shorthands)[0]\n  return React.cloneElement({ ...child, props: null }, next)\n}\n"],
+  "mappings": "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",
+  "names": ["props"]
+}

package/dist/jsx/index.js

@@ -0,0 +1,2 @@
+export * from "./Group";
+//# sourceMappingURL=index.js.map

package/dist/jsx/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/index.ts"],
+  "sourcesContent": ["export * from './Group'\n"],
+  "mappings": "AAAA,cAAc;",
+  "names": []
+}

package/dist/jsx/index.mjs

@@ -0,0 +1,2 @@
+export * from "./Group";
+//# sourceMappingURL=index.mjs.map

package/dist/jsx/index.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/index.ts"],
+  "sourcesContent": ["export * from './Group'\n"],
+  "mappings": "AAAA,cAAc;",
+  "names": []
+}

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@tamagui/group",
+  "version": "1.7.0",
+  "sideEffects": [
+    "*.css"
+  ],
+  "source": "src/index.ts",
+  "types": "./types/index.d.ts",
+  "main": "dist/cjs",
+  "module": "dist/esm",
+  "module:jsx": "dist/jsx",
+  "files": [
+    "src",
+    "types",
+    "dist"
+  ],
+  "scripts": {
+    "build": "tamagui-build",
+    "watch": "tamagui-build --watch",
+    "lint": "../../node_modules/.bin/rome check src",
+    "lint:fix": "../../node_modules/.bin/rome check --apply-suggested src",
+    "clean": "tamagui-build clean",
+    "clean:build": "tamagui-build clean:build"
+  },
+  "dependencies": {
+    "@tamagui/core": "1.7.0",
+    "@tamagui/create-context": "1.7.0",
+    "@tamagui/stacks": "1.7.0",
+    "@tamagui/use-controllable-state": "1.7.0",
+    "reforest": "^0.12.1"
+  },
+  "peerDependencies": {
+    "react": "*"
+  },
+  "devDependencies": {
+    "@tamagui/build": "1.7.0",
+    "react": "^18.2.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "a49cc7ea6b93ba384e77a4880ae48ac4a5635c14"
+}

package/src/Group.tsx

@@ -0,0 +1,318 @@
+import {
+  GetProps,
+  TamaguiElement,
+  UnionableString,
+  Variable,
+  getConfig,
+  getExpandedShorthands,
+  getTokens,
+  getVariableValue,
+  isTamaguiElement,
+  mergeProps,
+  spacedChildren,
+  styled,
+  useMediaPropsActive,
+  withStaticProperties,
+} from '@tamagui/core'
+import { Scope, createContextScope } from '@tamagui/create-context'
+import { ThemeableStack } from '@tamagui/stacks'
+import { useControllableState } from '@tamagui/use-controllable-state'
+import React, { Children, forwardRef, isValidElement } from 'react'
+import { ScrollView } from 'react-native'
+import { useIndex, useIndexedChildren } from 'reforest'
+
+type DisablePassBorderRadius = boolean | 'bottom' | 'top' | 'start' | 'end'
+
+interface GroupContextValue {
+  vertical: boolean
+  disablePassBorderRadius: DisablePassBorderRadius
+  onItemMount: () => void
+  onItemUnmount: () => void
+  radius?: number | UnionableString | Variable<any>
+  disabled?: boolean
+}
+
+const GROUP_NAME = 'Group'
+
+type ScopedProps<P> = P & { __scopeGroup?: Scope }
+const [createGroupContext, createGroupScope] = createContextScope(GROUP_NAME)
+const [GroupProvider, useGroupContext] = createGroupContext<GroupContextValue>(GROUP_NAME)
+
+export const GroupFrame = styled(ThemeableStack, {
+  name: 'GroupFrame',
+
+  variants: {
+    unstyled: {
+      false: {
+        size: '$true',
+        y: 0,
+        backgroundColor: '$background',
+      },
+    },
+
+    size: (val, { tokens }) => {
+      const borderRadius = tokens.radius[val] ?? val ?? tokens.radius['$true']
+      return {
+        borderRadius,
+      }
+    },
+  } as const,
+
+  defaultVariants: {
+    unstyled: false,
+  },
+})
+
+export type GroupProps = GetProps<typeof GroupFrame> & {
+  axis?: 'horizontal' | 'vertical'
+
+  scrollable?: boolean
+  /**
+   * @default false
+   */
+  showScrollIndicator?: boolean
+  disabled?: boolean
+  disablePassBorderRadius?: DisablePassBorderRadius
+  /**
+   * forces the group to use the Group.Item API
+   */
+  forceUseItem?: boolean
+}
+
+function createGroup(verticalDefault: boolean) {
+  return withStaticProperties(
+    forwardRef<TamaguiElement, ScopedProps<GroupProps>>((props, ref) => {
+      const activeProps = useMediaPropsActive(props)
+
+      const {
+        __scopeGroup,
+        children: childrenProp,
+        space,
+        size = '$true',
+        spaceDirection,
+        separator,
+        scrollable,
+        axis = verticalDefault ? 'vertical' : 'horizontal',
+        disabled: disabledProp,
+        disablePassBorderRadius: disablePassBorderRadiusProp,
+        borderRadius,
+        forceUseItem,
+        ...restProps
+      } = getExpandedShorthands(activeProps)
+
+      const vertical = axis === 'vertical'
+      const [itemChildrenCount, setItemChildrenCount] = useControllableState({
+        defaultProp: forceUseItem ? 1 : 0,
+      })
+      const isUsingItems = true // itemChildrenCount > 0
+
+      // 1 off given border to adjust for border radius? This should be user controllable
+      const radius =
+        borderRadius ??
+        (size ? getVariableValue(getTokens().radius[size]) - 1 : undefined)
+
+      const hasRadius = radius !== undefined
+      const disablePassBorderRadius = disablePassBorderRadiusProp ?? !hasRadius
+
+      if (!isUsingItems) console.log('screw up!')
+      const childrenArray = Children.toArray(childrenProp)
+      const children = isUsingItems
+        ? childrenProp
+        : childrenArray.map((child, i) => {
+            if (!isValidElement(child)) {
+              return child
+            }
+            const disabled = child.props.disabled ?? disabledProp
+
+            const isFirst = i === 0
+            const isLast = i === childrenArray.length - 1
+
+            const radiusStyles =
+              disablePassBorderRadius === true
+                ? null
+                : getBorderRadius({
+                    isFirst,
+                    isLast,
+                    radius,
+                    vertical,
+                    disable: disablePassBorderRadius,
+                  })
+            const props = {
+              disabled,
+              ...(isTamaguiElement(child) ? radiusStyles : { style: radiusStyles }),
+            }
+
+            return cloneElementWithPropOrder(child, props)
+          })
+
+      const indexedChildren = useIndexedChildren(
+        spacedChildren({
+          direction: spaceDirection,
+          separator,
+          space,
+          children,
+        })
+      )
+
+      const onItemMount = React.useCallback(
+        () => setItemChildrenCount((prev) => prev + 1),
+        []
+      )
+      const onItemUnmount = React.useCallback(
+        () => setItemChildrenCount((prev) => prev - 1),
+        []
+      )
+
+      return (
+        <GroupProvider
+          disablePassBorderRadius={disablePassBorderRadius}
+          vertical={axis === 'vertical'}
+          radius={radius}
+          disabled={disabledProp}
+          onItemMount={onItemMount}
+          onItemUnmount={onItemUnmount}
+          scope={__scopeGroup}
+        >
+          <GroupFrame
+            ref={ref}
+            size={size}
+            flexDirection={axis === 'horizontal' ? 'row' : 'column'}
+            borderRadius={borderRadius}
+            {...restProps}
+          >
+            {wrapScroll({ ...activeProps, axis }, indexedChildren)}
+          </GroupFrame>
+        </GroupProvider>
+      )
+    }),
+    {
+      Item: GroupItem,
+    }
+  )
+}
+
+const GroupItem = (props: ScopedProps<{ children: React.ReactNode }>) => {
+  const { __scopeGroup, children } = props
+  const groupItemProps = useGroupItem(
+    { disabled: isValidElement(children) ? children.props.disabled : undefined },
+    __scopeGroup
+  )
+
+  if (!isValidElement(children)) {
+    return children as any
+  }
+
+  if (isTamaguiElement(children)) {
+    return React.cloneElement(children, groupItemProps)
+  }
+
+  return React.cloneElement(children, {
+    style: {
+      ...children.props?.['style'],
+      ...groupItemProps,
+    },
+  } as any)
+}
+
+export const useGroupItem = (
+  childrenProps: { disabled: boolean },
+  __scopeGroup?: Scope
+) => {
+  const treeIndex = useIndex()
+  const context = useGroupContext('GroupItem', __scopeGroup)
+
+  React.useEffect(() => {
+    context.onItemMount()
+    return () => {
+      context.onItemUnmount()
+    }
+  }, [])
+
+  if (!treeIndex) {
+    throw Error('<Group.Item/> should only be used within a <Group/>')
+  }
+
+  const isFirst = treeIndex.index === 0
+  const isLast = treeIndex.index === treeIndex.maxIndex
+
+  const disabled = childrenProps.disabled ?? context.disabled
+
+  let propsToPass: Record<string, any> = {
+    disabled,
+  }
+
+  if (context.disablePassBorderRadius !== true) {
+    const borderRadius = getBorderRadius({
+      radius: context.radius,
+      isFirst,
+      isLast,
+      vertical: context.vertical,
+      disable: context.disablePassBorderRadius,
+    })
+    return { ...propsToPass, ...borderRadius }
+  }
+  return propsToPass
+}
+
+export const Group = createGroup(true)
+export const YGroup = Group
+export const XGroup = createGroup(false)
+
+const wrapScroll = (
+  { scrollable, axis, showScrollIndicator = false }: GroupProps,
+  children: any
+) => {
+  if (scrollable)
+    return (
+      <ScrollView
+        {...(axis === 'vertical' && {
+          showsVerticalScrollIndicator: showScrollIndicator,
+        })}
+        {...(axis === 'horizontal' && {
+          horizontal: true,
+          showsHorizontalScrollIndicator: showScrollIndicator,
+        })}
+      >
+        {children}
+      </ScrollView>
+    )
+  return children
+}
+
+const getBorderRadius = ({
+  isFirst,
+  isLast,
+  radius,
+  vertical,
+  disable,
+}: {
+  radius: any
+  vertical: boolean
+  isFirst: boolean
+  isLast: boolean
+  disable: DisablePassBorderRadius
+}) => {
+  // TODO: RTL support would be nice here
+  return {
+    borderTopLeftRadius: isFirst && disable !== 'top' && disable !== 'start' ? radius : 0,
+    borderTopRightRadius:
+      disable !== 'top' &&
+      disable !== 'end' &&
+      ((vertical && isFirst) || (!vertical && isLast))
+        ? radius
+        : 0,
+    borderBottomLeftRadius:
+      disable !== 'bottom' &&
+      disable !== 'start' &&
+      ((vertical && isLast) || (!vertical && isFirst))
+        ? radius
+        : 0,
+    borderBottomRightRadius:
+      isLast && disable !== 'bottom' && disable !== 'end' ? radius : 0,
+  }
+}
+
+const cloneElementWithPropOrder = (child: any, props: Object) => {
+  const next = mergeProps(child.props, props, false, getConfig().shorthands)[0]
+  return React.cloneElement({ ...child, props: null }, next)
+}

package/src/index.ts

@@ -0,0 +1 @@
+export * from './Group'