@korsolutions/ui 0.0.80 → 0.0.82

package/dist/typescript/src/components/radio-group/components/radio-group-root.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group-root.d.ts","sourceRoot":"","sources":["../../../../../../src/components/radio-group/components/radio-group-root.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAQ,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAGpF,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAEjD,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IACtE,OAAO,CAAC,EAAE,MAAM,OAAO,kBAAkB,CAAC;IAC1C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAOD,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,qBAyBxD"}

package/dist/typescript/src/components/radio-group/components/radio-group-title.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { type StyleProp, type TextProps, type TextStyle } from "react-native";
+export interface RadioGroupTitleProps extends TextProps {
+    children: React.ReactNode;
+    style?: StyleProp<TextStyle>;
+}
+export declare function RadioGroupTitle(props: RadioGroupTitleProps): React.JSX.Element;
+//# sourceMappingURL=radio-group-title.d.ts.map

package/dist/typescript/src/components/radio-group/components/radio-group-title.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group-title.d.ts","sourceRoot":"","sources":["../../../../../../src/components/radio-group/components/radio-group-title.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAQ,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAIpF,MAAM,WAAW,oBAAqB,SAAQ,SAAS;IACrD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,qBAY1D"}

package/dist/typescript/src/components/radio-group/context.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import type { RadioGroupState, RadioGroupStyles } from "./types";
+export interface RadioGroupContextValue {
+    value?: string;
+    onChange: (value: string) => void;
+    isDisabled?: boolean;
+    state: RadioGroupState;
+    styles?: RadioGroupStyles;
+}
+export declare const RadioGroupContext: React.Context<RadioGroupContextValue | null>;
+export declare const useRadioGroupContext: () => RadioGroupContextValue;
+//# sourceMappingURL=context.d.ts.map

package/dist/typescript/src/components/radio-group/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../../src/components/radio-group/context.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEjE,MAAM,WAAW,sBAAsB;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,EAAE,eAAe,CAAC;IACvB,MAAM,CAAC,EAAE,gBAAgB,CAAC;CAC3B;AAED,eAAO,MAAM,iBAAiB,8CAA2D,CAAC;AAE1F,eAAO,MAAM,oBAAoB,8BAMhC,CAAC"}

package/dist/typescript/src/components/radio-group/index.d.ts

@@ -0,0 +1,22 @@
+import { RadioGroupContent } from "./components/radio-group-content";
+import { RadioGroupDescription } from "./components/radio-group-description";
+import { RadioGroupIndicator } from "./components/radio-group-indicator";
+import { RadioGroupItem } from "./components/radio-group-item";
+import { RadioGroupRoot } from "./components/radio-group-root";
+import { RadioGroupTitle } from "./components/radio-group-title";
+export declare const RadioGroup: {
+    Root: typeof RadioGroupRoot;
+    Item: typeof RadioGroupItem;
+    Indicator: typeof RadioGroupIndicator;
+    Content: typeof RadioGroupContent;
+    Title: typeof RadioGroupTitle;
+    Description: typeof RadioGroupDescription;
+};
+export type { RadioGroupContentProps } from "./components/radio-group-content";
+export type { RadioGroupDescriptionProps } from "./components/radio-group-description";
+export type { RadioGroupIndicatorProps } from "./components/radio-group-indicator";
+export type { RadioGroupItemProps } from "./components/radio-group-item";
+export type { RadioGroupRootProps } from "./components/radio-group-root";
+export type { RadioGroupTitleProps } from "./components/radio-group-title";
+export * from "./types";
+//# sourceMappingURL=index.d.ts.map

package/dist/typescript/src/components/radio-group/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/radio-group/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AACrE,OAAO,EAAE,qBAAqB,EAAE,MAAM,sCAAsC,CAAC;AAC7E,OAAO,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAC;AACzE,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAC/D,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AAEjE,eAAO,MAAM,UAAU;;;;;;;CAOtB,CAAC;AAEF,YAAY,EAAE,sBAAsB,EAAE,MAAM,kCAAkC,CAAC;AAC/E,YAAY,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AACvF,YAAY,EAAE,wBAAwB,EAAE,MAAM,oCAAoC,CAAC;AACnF,YAAY,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAC;AACzE,YAAY,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAC;AACzE,YAAY,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AAC3E,cAAc,SAAS,CAAC"}

package/dist/typescript/src/components/radio-group/types.d.ts

@@ -0,0 +1,13 @@
+import type { StyleProp, TextStyle, ViewStyle } from "react-native";
+export type RadioGroupState = "default" | "disabled";
+export type RadioItemState = "default" | "selected" | "disabled" | "hovered";
+export interface RadioGroupStyles {
+    root?: Partial<Record<RadioGroupState, StyleProp<ViewStyle>>>;
+    item?: Partial<Record<RadioItemState, StyleProp<ViewStyle>>>;
+    indicator?: Partial<Record<RadioItemState, StyleProp<ViewStyle>>>;
+    dot?: Partial<Record<RadioItemState, StyleProp<ViewStyle>>>;
+    content?: Partial<Record<RadioItemState, StyleProp<ViewStyle>>>;
+    title?: Partial<Record<RadioItemState, StyleProp<TextStyle>>>;
+    description?: Partial<Record<RadioItemState, StyleProp<TextStyle>>>;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/typescript/src/components/radio-group/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/radio-group/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpE,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,UAAU,CAAC;AACrD,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,GAAG,SAAS,CAAC;AAE7E,MAAM,WAAW,gBAAgB;IAC/B,IAAI,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;IAC9D,IAAI,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,cAAc,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;IAC7D,SAAS,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,cAAc,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;IAClE,GAAG,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,cAAc,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;IAC5D,OAAO,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,cAAc,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;IAChE,KAAK,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,cAAc,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;IAC9D,WAAW,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,cAAc,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;CACrE"}

package/dist/typescript/src/components/radio-group/variants/default.d.ts

@@ -0,0 +1,3 @@
+import type { RadioGroupStyles } from "../types";
+export declare const useRadioGroupVariantDefault: () => RadioGroupStyles;
+//# sourceMappingURL=default.d.ts.map

package/dist/typescript/src/components/radio-group/variants/default.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"default.d.ts","sourceRoot":"","sources":["../../../../../../src/components/radio-group/variants/default.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAEjD,eAAO,MAAM,2BAA2B,QAAO,gBA0E9C,CAAC"}

package/dist/typescript/src/components/radio-group/variants/index.d.ts

@@ -0,0 +1,5 @@
+export declare const RadioGroupVariants: {
+    default: () => import("..").RadioGroupStyles;
+    outlined: () => import("..").RadioGroupStyles;
+};
+//# sourceMappingURL=index.d.ts.map

package/dist/typescript/src/components/radio-group/variants/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/radio-group/variants/index.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,kBAAkB;;;CAG9B,CAAC"}

package/dist/typescript/src/components/radio-group/variants/outlined.d.ts

@@ -0,0 +1,3 @@
+import type { RadioGroupStyles } from "../types";
+export declare const useRadioGroupVariantOutlined: () => RadioGroupStyles;
+//# sourceMappingURL=outlined.d.ts.map

package/dist/typescript/src/components/radio-group/variants/outlined.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"outlined.d.ts","sourceRoot":"","sources":["../../../../../../src/components/radio-group/variants/outlined.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAEjD,eAAO,MAAM,4BAA4B,QAAO,gBAsF/C,CAAC"}

package/dist/typescript/src/hooks/use-organized-children.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-organized-children.d.ts","sourceRoot":"","sources":["../../../../src/hooks/use-organized-children.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,EAAQ,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AACpE,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAG1D,wBAAgB,oBAAoB,CAClC,QAAQ,EAAE,KAAK,CAAC,SAAS,EACzB,SAAS,EAAE,SAAS,CAAC,SAAS,CAAC,GAAG,SAAS,EAC3C,SAAS,EAAE,SAAS,GAAG,SAAS,GAAG,IAAI,GACtC,KAAK,CAAC,SAAS,CA2BjB"}
+{"version":3,"file":"use-organized-children.d.ts","sourceRoot":"","sources":["../../../../src/hooks/use-organized-children.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,EAAQ,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AACpE,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAG1D,wBAAgB,oBAAoB,CAClC,QAAQ,EAAE,KAAK,CAAC,SAAS,EACzB,SAAS,EAAE,SAAS,CAAC,SAAS,CAAC,GAAG,SAAS,EAC3C,SAAS,EAAE,SAAS,GAAG,SAAS,GAAG,IAAI,GACtC,KAAK,CAAC,SAAS,CA4BjB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@korsolutions/ui",
-  "version": "0.0.80",
+  "version": "0.0.82",
   "license": "MIT",
   "repository": {
     "type": "git",

package/src/components/index.ts

@@ -19,6 +19,7 @@ export * from "./phone-input";
 export * from "./popover";
 export * from "./portal";
 export * from "./progress";
+export * from "./radio-group";
 export * from "./scroll-bar";
 export * from "./select";
 export * from "./separator";

package/src/components/radio-group/components/radio-group-content.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { View, type StyleProp, type ViewProps, type ViewStyle } from "react-native";
+import { useRadioGroupContext } from "../context";
+import { useRadioGroupItemContext } from "./radio-group-item";
+
+export interface RadioGroupContentProps extends ViewProps {
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function RadioGroupContent(props: RadioGroupContentProps) {
+  const { children, style, ...viewProps } = props;
+  const { styles } = useRadioGroupContext();
+  const { state } = useRadioGroupItemContext();
+
+  const composedStyle = [styles?.content?.default, styles?.content?.[state], style];
+
+  return (
+    <View {...viewProps} style={composedStyle}>
+      {children}
+    </View>
+  );
+}

package/src/components/radio-group/components/radio-group-description.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { Text, type StyleProp, type TextProps, type TextStyle } from "react-native";
+import { useRadioGroupContext } from "../context";
+import { useRadioGroupItemContext } from "./radio-group-item";
+
+export interface RadioGroupDescriptionProps extends TextProps {
+  children: React.ReactNode;
+  style?: StyleProp<TextStyle>;
+}
+
+export function RadioGroupDescription(props: RadioGroupDescriptionProps) {
+  const { children, style, ...textProps } = props;
+  const { styles } = useRadioGroupContext();
+  const { state } = useRadioGroupItemContext();
+
+  const composedStyle = [styles?.description?.default, styles?.description?.[state], style];
+
+  return (
+    <Text {...textProps} style={composedStyle}>
+      {children}
+    </Text>
+  );
+}

package/src/components/radio-group/components/radio-group-indicator.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { View, type StyleProp, type ViewProps, type ViewStyle } from "react-native";
+import { useRadioGroupContext } from "../context";
+import { useRadioGroupItemContext } from "./radio-group-item";
+
+export interface RadioGroupIndicatorProps extends ViewProps {
+  style?: StyleProp<ViewStyle>;
+  dotStyle?: StyleProp<ViewStyle>;
+}
+
+export function RadioGroupIndicator(props: RadioGroupIndicatorProps) {
+  const { style, dotStyle, ...viewProps } = props;
+  const { styles } = useRadioGroupContext();
+  const { state, isSelected } = useRadioGroupItemContext();
+
+  const indicatorStyle = [styles?.indicator?.default, styles?.indicator?.[state], style];
+  const computedDotStyle = [styles?.dot?.default, dotStyle];
+
+  return (
+    <View {...viewProps} style={indicatorStyle}>
+      {isSelected && <View style={computedDotStyle} />}
+    </View>
+  );
+}

package/src/components/radio-group/components/radio-group-item.tsx

@@ -0,0 +1,73 @@
+import React, { useState } from "react";
+import { Pressable, type PressableProps, type StyleProp, type ViewStyle } from "react-native";
+import { useRadioGroupContext } from "../context";
+import type { RadioItemState } from "../types";
+
+export interface RadioGroupItemProps extends Omit<PressableProps, "children"> {
+  children: React.ReactNode;
+  value: string;
+  isDisabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+}
+
+const calculateState = (
+  isSelected: boolean,
+  isDisabled: boolean | undefined,
+  isHovered: boolean,
+): RadioItemState => {
+  if (isDisabled) return "disabled";
+  if (isSelected) return "selected";
+  if (isHovered) return "hovered";
+  return "default";
+};
+
+export function RadioGroupItem(props: RadioGroupItemProps) {
+  const { children, value, isDisabled, style, ...pressableProps } = props;
+  const group = useRadioGroupContext();
+  const [isHovered, setIsHovered] = useState(false);
+
+  const isSelected = group.value === value;
+  const itemDisabled = isDisabled ?? group.isDisabled;
+  const state = calculateState(isSelected, itemDisabled, isHovered);
+
+  const composedStyle = [
+    group.styles?.item?.default,
+    group.styles?.item?.[state],
+    style,
+  ];
+
+  return (
+    <RadioGroupItemContext.Provider value={{ value, state, isSelected }}>
+      <Pressable
+        {...pressableProps}
+        disabled={itemDisabled}
+        onPress={() => {
+          if (!itemDisabled) {
+            group.onChange(value);
+          }
+        }}
+        onHoverIn={() => setIsHovered(true)}
+        onHoverOut={() => setIsHovered(false)}
+        style={composedStyle}
+      >
+        {children}
+      </Pressable>
+    </RadioGroupItemContext.Provider>
+  );
+}
+
+export interface RadioGroupItemContextValue {
+  value: string;
+  state: RadioItemState;
+  isSelected: boolean;
+}
+
+export const RadioGroupItemContext = React.createContext<RadioGroupItemContextValue | null>(null);
+
+export const useRadioGroupItemContext = () => {
+  const context = React.useContext(RadioGroupItemContext);
+  if (!context) {
+    throw new Error("RadioGroup item components must be used within RadioGroup.Item");
+  }
+  return context;
+};

package/src/components/radio-group/components/radio-group-root.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { View, type StyleProp, type ViewProps, type ViewStyle } from "react-native";
+import { RadioGroupContext } from "../context";
+import type { RadioGroupState } from "../types";
+import { RadioGroupVariants } from "../variants";
+
+export interface RadioGroupRootProps extends Omit<ViewProps, "children"> {
+  variant?: keyof typeof RadioGroupVariants;
+  children: React.ReactNode;
+  value?: string;
+  onChange: (value: string) => void;
+  isDisabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+}
+
+const calculateState = (isDisabled: boolean | undefined): RadioGroupState => {
+  if (isDisabled) return "disabled";
+  return "default";
+};
+
+export function RadioGroupRoot(props: RadioGroupRootProps) {
+  const { children, value, onChange, isDisabled, style, variant, ...viewProps } = props;
+  const variantStyles = RadioGroupVariants[variant ?? "default"]();
+
+  const state = calculateState(isDisabled);
+  const composedStyle = [variantStyles.root?.default, variantStyles.root?.[state], style];
+
+  const contextValue = React.useMemo(
+    () => ({
+      value,
+      onChange,
+      isDisabled,
+      state,
+      styles: variantStyles,
+    }),
+    [value, onChange, isDisabled, state, variantStyles],
+  );
+
+  return (
+    <RadioGroupContext.Provider value={contextValue}>
+      <View {...viewProps} style={composedStyle}>
+        {children}
+      </View>
+    </RadioGroupContext.Provider>
+  );
+}

package/src/components/radio-group/components/radio-group-title.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { Text, type StyleProp, type TextProps, type TextStyle } from "react-native";
+import { useRadioGroupContext } from "../context";
+import { useRadioGroupItemContext } from "./radio-group-item";
+
+export interface RadioGroupTitleProps extends TextProps {
+  children: React.ReactNode;
+  style?: StyleProp<TextStyle>;
+}
+
+export function RadioGroupTitle(props: RadioGroupTitleProps) {
+  const { children, style, ...textProps } = props;
+  const { styles } = useRadioGroupContext();
+  const { state } = useRadioGroupItemContext();
+
+  const composedStyle = [styles?.title?.default, styles?.title?.[state], style];
+
+  return (
+    <Text {...textProps} style={composedStyle}>
+      {children}
+    </Text>
+  );
+}

package/src/components/radio-group/context.ts

@@ -0,0 +1,20 @@
+import React from "react";
+import type { RadioGroupState, RadioGroupStyles } from "./types";
+
+export interface RadioGroupContextValue {
+  value?: string;
+  onChange: (value: string) => void;
+  isDisabled?: boolean;
+  state: RadioGroupState;
+  styles?: RadioGroupStyles;
+}
+
+export const RadioGroupContext = React.createContext<RadioGroupContextValue | null>(null);
+
+export const useRadioGroupContext = () => {
+  const context = React.useContext(RadioGroupContext);
+  if (!context) {
+    throw new Error("RadioGroup compound components must be used within RadioGroup.Root");
+  }
+  return context;
+};

package/src/components/radio-group/index.ts

@@ -0,0 +1,23 @@
+import { RadioGroupContent } from "./components/radio-group-content";
+import { RadioGroupDescription } from "./components/radio-group-description";
+import { RadioGroupIndicator } from "./components/radio-group-indicator";
+import { RadioGroupItem } from "./components/radio-group-item";
+import { RadioGroupRoot } from "./components/radio-group-root";
+import { RadioGroupTitle } from "./components/radio-group-title";
+
+export const RadioGroup = {
+  Root: RadioGroupRoot,
+  Item: RadioGroupItem,
+  Indicator: RadioGroupIndicator,
+  Content: RadioGroupContent,
+  Title: RadioGroupTitle,
+  Description: RadioGroupDescription,
+};
+
+export type { RadioGroupContentProps } from "./components/radio-group-content";
+export type { RadioGroupDescriptionProps } from "./components/radio-group-description";
+export type { RadioGroupIndicatorProps } from "./components/radio-group-indicator";
+export type { RadioGroupItemProps } from "./components/radio-group-item";
+export type { RadioGroupRootProps } from "./components/radio-group-root";
+export type { RadioGroupTitleProps } from "./components/radio-group-title";
+export * from "./types";

package/src/components/radio-group/types.ts

@@ -0,0 +1,14 @@
+import type { StyleProp, TextStyle, ViewStyle } from "react-native";
+
+export type RadioGroupState = "default" | "disabled";
+export type RadioItemState = "default" | "selected" | "disabled" | "hovered";
+
+export interface RadioGroupStyles {
+  root?: Partial<Record<RadioGroupState, StyleProp<ViewStyle>>>;
+  item?: Partial<Record<RadioItemState, StyleProp<ViewStyle>>>;
+  indicator?: Partial<Record<RadioItemState, StyleProp<ViewStyle>>>;
+  dot?: Partial<Record<RadioItemState, StyleProp<ViewStyle>>>;
+  content?: Partial<Record<RadioItemState, StyleProp<ViewStyle>>>;
+  title?: Partial<Record<RadioItemState, StyleProp<TextStyle>>>;
+  description?: Partial<Record<RadioItemState, StyleProp<TextStyle>>>;
+}

package/src/components/radio-group/variants/default.tsx

@@ -0,0 +1,78 @@
+import { useThemedStyles } from "../../../utils/use-themed-styles";
+import type { RadioGroupStyles } from "../types";
+
+export const useRadioGroupVariantDefault = (): RadioGroupStyles => {
+  return useThemedStyles(
+    ({ colors, fontFamily, fontSize }): RadioGroupStyles => ({
+      root: {
+        default: {
+          gap: 8,
+        },
+      },
+      item: {
+        default: {
+          flexDirection: "row",
+          alignItems: "flex-start",
+          gap: 12,
+        },
+        disabled: {
+          opacity: 0.5,
+        },
+      },
+      indicator: {
+        default: {
+          width: 20,
+          height: 20,
+          borderRadius: 10,
+          borderWidth: 2,
+          borderColor: colors.border,
+          backgroundColor: colors.background,
+          marginTop: 2,
+          alignItems: "center",
+          justifyContent: "center",
+        },
+        selected: {
+          borderColor: colors.primary,
+        },
+        disabled: {
+          opacity: 0.5,
+        },
+      },
+      dot: {
+        default: {
+          width: 8,
+          height: 8,
+          borderRadius: 4,
+          backgroundColor: colors.primary,
+        },
+      },
+      content: {
+        default: {
+          flex: 1,
+        },
+      },
+      title: {
+        default: {
+          color: colors.foreground,
+          fontSize,
+          fontFamily,
+          fontWeight: "500",
+        },
+        disabled: {
+          color: colors.mutedForeground,
+        },
+      },
+      description: {
+        default: {
+          color: colors.mutedForeground,
+          fontSize: fontSize * 0.875,
+          fontFamily,
+          marginTop: 2,
+        },
+        disabled: {
+          opacity: 0.7,
+        },
+      },
+    }),
+  );
+};

package/src/components/radio-group/variants/index.ts

@@ -0,0 +1,7 @@
+import { useRadioGroupVariantDefault } from "./default";
+import { useRadioGroupVariantOutlined } from "./outlined";
+
+export const RadioGroupVariants = {
+  default: useRadioGroupVariantDefault,
+  outlined: useRadioGroupVariantOutlined,
+};

package/src/components/radio-group/variants/outlined.tsx

@@ -0,0 +1,90 @@
+import { useThemedStyles } from "../../../utils/use-themed-styles";
+import type { RadioGroupStyles } from "../types";
+
+export const useRadioGroupVariantOutlined = (): RadioGroupStyles => {
+  return useThemedStyles(
+    ({ colors, radius, fontFamily, fontSize }): RadioGroupStyles => ({
+      root: {
+        default: {
+          gap: 8,
+        },
+      },
+      item: {
+        default: {
+          flexDirection: "row",
+          alignItems: "flex-start",
+          gap: 12,
+          borderWidth: 1,
+          borderColor: colors.border,
+          borderRadius: radius,
+          padding: 16,
+          backgroundColor: colors.background,
+        },
+        hovered: {
+          backgroundColor: colors.muted,
+          borderColor: colors.primary,
+        },
+        selected: {
+          borderColor: colors.primary,
+        },
+        disabled: {
+          opacity: 0.5,
+        },
+      },
+      indicator: {
+        default: {
+          width: 20,
+          height: 20,
+          borderRadius: 10,
+          borderWidth: 2,
+          borderColor: colors.border,
+          backgroundColor: colors.background,
+          marginTop: 2,
+          alignItems: "center",
+          justifyContent: "center",
+        },
+        selected: {
+          borderColor: colors.primary,
+        },
+        disabled: {
+          opacity: 0.5,
+        },
+      },
+      dot: {
+        default: {
+          width: 8,
+          height: 8,
+          borderRadius: 4,
+          backgroundColor: colors.primary,
+        },
+      },
+      content: {
+        default: {
+          flex: 1,
+        },
+      },
+      title: {
+        default: {
+          color: colors.foreground,
+          fontSize,
+          fontFamily,
+          fontWeight: "500",
+        },
+        disabled: {
+          color: colors.mutedForeground,
+        },
+      },
+      description: {
+        default: {
+          color: colors.mutedForeground,
+          fontSize: fontSize * 0.875,
+          fontFamily,
+          marginTop: 2,
+        },
+        disabled: {
+          opacity: 0.7,
+        },
+      },
+    }),
+  );
+};

package/src/hooks/use-organized-children.tsx

@@ -24,6 +24,7 @@ export function useOrganizedChildren(
           return React.cloneElement(child as React.ReactElement<any>, {
             key: child.key,
             ...iconProps,
+            ...(child.props as object),
             style: [iconProps?.style, getElementProp(child, "style")],
           });
         }