@tamagui/radio-group 1.0.1

package/src/RadioGroup.tsx

@@ -0,0 +1,125 @@
+import { getVariableValue, styled } from '@tamagui/core'
+import { getSize } from '@tamagui/get-token'
+import { YStack } from '@tamagui/stacks'
+
+const RADIO_GROUP_ITEM_NAME = 'RadioGroupItem'
+
+export const RadioGroupItemFrame = styled(YStack, {
+  name: RADIO_GROUP_ITEM_NAME,
+  render: 'button',
+
+  variants: {
+    unstyled: {
+      false: {
+        size: '$true',
+        borderRadius: 1000,
+        backgroundColor: '$background',
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderWidth: 1,
+        borderColor: '$borderColor',
+        padding: 0,
+
+        hoverStyle: {
+          borderColor: '$borderColorHover',
+          backgroundColor: '$backgroundHover',
+        },
+
+        focusStyle: {
+          borderColor: '$borderColorHover',
+          backgroundColor: '$backgroundHover',
+        },
+
+        focusVisibleStyle: {
+          outlineStyle: 'solid',
+          outlineWidth: 2,
+          outlineColor: '$outlineColor',
+        },
+
+        pressStyle: {
+          borderColor: '$borderColorFocus',
+          backgroundColor: '$backgroundFocus',
+        },
+      },
+    },
+
+    disabled: {
+      true: {
+        pointerEvents: 'none',
+        userSelect: 'none',
+        cursor: 'not-allowed',
+
+        hoverStyle: {
+          borderColor: '$borderColor',
+          backgroundColor: '$background',
+        },
+
+        pressStyle: {
+          borderColor: '$borderColor',
+          backgroundColor: '$background',
+        },
+
+        focusVisibleStyle: {
+          outlineWidth: 0,
+        },
+      },
+    },
+
+    size: {
+      '...size': (value, { props }) => {
+        const size = Math.floor(
+          getVariableValue(getSize(value)) * (props['scaleSize'] ?? 0.5)
+        )
+        return {
+          width: size,
+          height: size,
+        }
+      },
+    },
+  } as const,
+
+  defaultVariants: {
+    unstyled: process.env.TAMAGUI_HEADLESS === '1',
+  },
+})
+
+const RADIO_GROUP_INDICATOR_NAME = 'RadioGroupIndicator'
+
+export const RadioGroupIndicatorFrame = styled(YStack, {
+  name: RADIO_GROUP_INDICATOR_NAME,
+
+  variants: {
+    unstyled: {
+      false: {
+        width: '33%',
+        height: '33%',
+        borderRadius: 1000,
+        backgroundColor: '$color',
+        pressTheme: true,
+      },
+    },
+  } as const,
+
+  defaultVariants: {
+    unstyled: process.env.TAMAGUI_HEADLESS === '1',
+  },
+})
+
+const RADIO_GROUP_NAME = 'RadioGroup'
+
+export const RadioGroupFrame = styled(YStack, {
+  name: RADIO_GROUP_NAME,
+
+  variants: {
+    orientation: {
+      horizontal: {
+        flexDirection: 'row',
+        spaceDirection: 'horizontal',
+      },
+      vertical: {
+        flexDirection: 'column',
+        spaceDirection: 'vertical',
+      },
+    },
+  } as const,
+})

package/src/RadioGroupStyledContext.tsx

@@ -0,0 +1,10 @@
+import type { SizeTokens } from '@tamagui/core'
+import { createStyledContext } from '@tamagui/core'
+
+export const RadioGroupStyledContext = createStyledContext(
+  {
+    size: '$true' as SizeTokens,
+    scaleIcon: 1,
+  },
+  'RadioGroup'
+)

package/src/createRadioGroup.tsx

@@ -0,0 +1,191 @@
+import type { GetProps } from '@tamagui/core'
+import { isWeb, withStaticProperties } from '@tamagui/core'
+import type {
+  RadioGroupContextValue,
+  RadioGroupItemContextValue,
+} from '@tamagui/radio-headless'
+import {
+  useRadioGroup,
+  useRadioGroupItem,
+  useRadioGroupItemIndicator,
+} from '@tamagui/radio-headless'
+import { RovingFocusGroup } from '@tamagui/roving-focus'
+import React from 'react'
+import {
+  RadioGroupFrame,
+  RadioGroupIndicatorFrame,
+  RadioGroupItemFrame,
+} from './RadioGroup'
+
+const ensureContext = (x: any) => {
+  if (!x.context) {
+    x.context = RadioGroupContext
+  }
+}
+
+type RadioIndicatorProps = GetProps<typeof RadioGroupIndicatorFrame> & {
+  forceMount?: boolean
+  unstyled?: boolean
+}
+
+const RadioGroupContext = React.createContext<RadioGroupContextValue>({})
+const RadioGroupItemContext = React.createContext<RadioGroupItemContextValue>({
+  checked: false,
+  disabled: false,
+})
+
+export type RadioGroupItemProps = GetProps<typeof RadioGroupItemFrame> & {
+  value: string
+  id?: string
+  labelledBy?: string
+  disabled?: boolean
+}
+
+export type RadioGroupProps = GetProps<typeof RadioGroupFrame> & {
+  value?: string
+  defaultValue?: string
+  onValueChange?: (value: string) => void
+  required?: boolean
+  disabled?: boolean
+  name?: string
+  native?: boolean
+  accentColor?: string
+}
+
+type RadioGroupComponent = (props: RadioGroupProps) => any
+
+type RadioGroupIndicatorComponent = (props: RadioIndicatorProps) => any
+
+type RadioGroupItemComponent = (props: RadioGroupItemProps) => any
+
+export function createRadioGroup<
+  F extends RadioGroupComponent,
+  D extends RadioGroupIndicatorComponent,
+  I extends RadioGroupItemComponent,
+>(createProps: { disableActiveTheme?: boolean; Frame?: F; Indicator?: D; Item?: I }) {
+  const {
+    disableActiveTheme,
+    Frame = RadioGroupFrame,
+    Indicator = RadioGroupIndicatorFrame,
+    Item = RadioGroupItemFrame,
+  } = createProps as any as {
+    disableActiveTheme?: boolean
+    Frame: typeof RadioGroupFrame
+    Indicator: typeof RadioGroupIndicatorFrame
+    Item: typeof RadioGroupItemFrame
+  }
+
+  ensureContext(Frame)
+  ensureContext(Indicator)
+  ensureContext(Item)
+
+  type RadioGroupProps = GetProps<typeof RadioGroupFrame> & {
+    value?: string
+    defaultValue?: string
+    onValueChange?: (value: string) => void
+    required?: boolean
+    disabled?: boolean
+    name?: string
+    native?: boolean
+    accentColor?: string
+  }
+
+  const RadioGroupImp = Frame.styleable<RadioGroupProps>((props, ref) => {
+    const {
+      value,
+      defaultValue,
+      onValueChange,
+      required = false,
+      disabled = false,
+      name,
+      native,
+      accentColor,
+      orientation = 'vertical',
+      ...rest
+    } = props
+
+    const { providerValue, frameAttrs, rovingFocusGroupAttrs } = useRadioGroup({
+      orientation,
+      name,
+      defaultValue,
+      value,
+      onValueChange,
+      required,
+      disabled,
+      native,
+      accentColor,
+    })
+
+    return (
+      <RadioGroupContext.Provider value={providerValue}>
+        <RovingFocusGroup {...rovingFocusGroupAttrs}>
+          <RadioGroupFrame {...frameAttrs} ref={ref} {...rest} />
+        </RovingFocusGroup>
+      </RadioGroupContext.Provider>
+    )
+  })
+
+  const RadioGroupItemImp = Item.styleable<RadioGroupItemProps>((props, ref) => {
+    const { value, labelledBy, onPress, onKeyDown, disabled, id, ...rest } = props
+
+    const {
+      providerValue,
+      bubbleInput,
+      rovingFocusGroupAttrs,
+      frameAttrs,
+      isFormControl,
+      native,
+    } = useRadioGroupItem({
+      radioGroupContext: RadioGroupContext,
+      value,
+      id,
+      labelledBy,
+      disabled,
+      onPress: onPress!,
+      onKeyDown,
+    })
+
+    return (
+      <RadioGroupItemContext.Provider value={providerValue}>
+        {isWeb && native ? (
+          bubbleInput
+        ) : (
+          <>
+            <RovingFocusGroup.Item {...rovingFocusGroupAttrs}>
+              <RadioGroupItemFrame {...frameAttrs} ref={ref} {...rest} />
+            </RovingFocusGroup.Item>
+            {isFormControl && bubbleInput}
+          </>
+        )}
+      </RadioGroupItemContext.Provider>
+    )
+  })
+
+  RadioGroupItemImp.displayName = 'RadioGroupItem'
+
+  const RadioIndicator = Indicator.styleable<RadioIndicatorProps>(
+    (props: RadioIndicatorProps, forwardedRef) => {
+      const { forceMount, disabled, ...indicatorProps } = props
+      const { checked, ...useIndicatorRest } = useRadioGroupItemIndicator({
+        radioGroupItemContext: RadioGroupItemContext,
+        disabled,
+      })
+
+      if (forceMount || checked) {
+        return <Indicator {...useIndicatorRest} ref={forwardedRef} {...indicatorProps} />
+      }
+
+      return null
+    }
+  )
+
+  RadioIndicator.displayName = 'RadioIndicator'
+
+  const RadioGroup = withStaticProperties(RadioGroupImp, {
+    Item: RadioGroupItemImp,
+    Indicator: RadioIndicator,
+  })
+  RadioGroup.displayName = 'RadioGroup'
+
+  return RadioGroup
+}

package/src/index.ts

@@ -0,0 +1,16 @@
+import {
+  RadioGroupFrame,
+  RadioGroupIndicatorFrame,
+  RadioGroupItemFrame,
+} from './RadioGroup'
+import { createRadioGroup } from './createRadioGroup'
+
+export * from './createRadioGroup'
+export * from './RadioGroup'
+export * from './RadioGroupStyledContext'
+
+export const RadioGroup = createRadioGroup({
+  Frame: RadioGroupFrame,
+  Indicator: RadioGroupIndicatorFrame,
+  Item: RadioGroupItemFrame,
+})

package/types/RadioGroup.d.ts

@@ -0,0 +1,18 @@
+export declare const RadioGroupItemFrame: import("@tamagui/core").TamaguiComponent<import("@tamagui/core").TamaDefer, import("@tamagui/core").TamaguiElement, import("@tamagui/core").RNTamaguiViewNonStyleProps, import("@tamagui/core").StackStyleBase, {
+    disabled?: boolean | undefined;
+    unstyled?: boolean | undefined;
+    elevation?: number | import("@tamagui/core").SizeTokens | undefined;
+    fullscreen?: boolean | undefined;
+    size?: import("@tamagui/core").SizeTokens | undefined;
+}, import("@tamagui/core").StaticConfigPublic>;
+export declare const RadioGroupIndicatorFrame: import("@tamagui/core").TamaguiComponent<import("@tamagui/core").TamaDefer, import("@tamagui/core").TamaguiElement, import("@tamagui/core").RNTamaguiViewNonStyleProps, import("@tamagui/core").StackStyleBase, {
+    unstyled?: boolean | undefined;
+    elevation?: number | import("@tamagui/core").SizeTokens | undefined;
+    fullscreen?: boolean | undefined;
+}, import("@tamagui/core").StaticConfigPublic>;
+export declare const RadioGroupFrame: import("@tamagui/core").TamaguiComponent<import("@tamagui/core").TamaDefer, import("@tamagui/core").TamaguiElement, import("@tamagui/core").RNTamaguiViewNonStyleProps, import("@tamagui/core").StackStyleBase, {
+    elevation?: number | import("@tamagui/core").SizeTokens | undefined;
+    fullscreen?: boolean | undefined;
+    orientation?: "horizontal" | "vertical" | undefined;
+}, import("@tamagui/core").StaticConfigPublic>;
+//# sourceMappingURL=RadioGroup.d.ts.map

package/types/RadioGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../src/RadioGroup.tsx"],"names":[],"mappings":"AAMA,eAAO,MAAM,mBAAmB;;;;;;8CA6E9B,CAAA;AAIF,eAAO,MAAM,wBAAwB;;;;8CAkBnC,CAAA;AAIF,eAAO,MAAM,eAAe;;;;8CAe1B,CAAA"}

package/types/RadioGroupStyledContext.d.ts

@@ -0,0 +1,6 @@
+import type { SizeTokens } from '@tamagui/core';
+export declare const RadioGroupStyledContext: import("@tamagui/core").StyledContext<{
+    size: SizeTokens;
+    scaleIcon: number;
+}>;
+//# sourceMappingURL=RadioGroupStyledContext.d.ts.map

package/types/RadioGroupStyledContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroupStyledContext.d.ts","sourceRoot":"","sources":["../src/RadioGroupStyledContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAG/C,eAAO,MAAM,uBAAuB;UAEf,UAAU;;EAI9B,CAAA"}