react-native-molecules 0.5.0-beta.3 → 0.5.0-beta.31

package/components/Radio/types.ts

@@ -0,0 +1,101 @@
+import type { PropsWithoutRef, ReactNode } from 'react';
+import type { TextProps, ViewProps } from 'react-native';
+
+import type { TouchableRippleProps } from '../TouchableRipple';
+
+export type Size = 'sm' | 'md' | 'lg';
+export type States = 'disabled' | 'checked' | 'hovered' | 'checkedAndHovered';
+
+export type RadioGroupProps = ViewProps & {
+    /**
+     * Value of the currently selected radio.
+     */
+    value?: string;
+    /**
+     * Default selected value (uncontrolled).
+     */
+    defaultValue?: string;
+    /**
+     * Called when the selected value changes.
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Disables every radio in the group.
+     */
+    disabled?: boolean;
+    /**
+     * Size applied to every radio in the group.
+     */
+    size?: Size;
+    /**
+     * Radio rows / radios.
+     */
+    children: ReactNode;
+};
+
+export type RadioRowProps = ViewProps & {
+    /**
+     * Value this row represents within the enclosing RadioGroup.
+     */
+    value: string;
+    /**
+     * Disables this row (control + label).
+     */
+    disabled?: boolean;
+    /**
+     * Radio control and Radio.Label, in any order.
+     */
+    children: ReactNode;
+};
+
+/**
+ * The radio control (the circle). Use inside a RadioRow, or standalone under a RadioGroup with `value`.
+ */
+export type RadioProps = Omit<TouchableRippleProps, 'children'> & {
+    /**
+     * Required only when used standalone under a RadioGroup (not inside a RadioRow).
+     */
+    value?: string;
+    /**
+     * Whether the radio is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Size of the radio. Falls back to the row/group size.
+     */
+    size?: Size;
+    /**
+     * Custom color for the checked radio.
+     */
+    color?: string;
+    /**
+     * Custom color for the unchecked radio.
+     */
+    uncheckedColor?: string;
+    /**
+     * Props for the state layer.
+     */
+    stateLayerProps?: PropsWithoutRef<ViewProps>;
+    /**
+     * testID to be used on tests.
+     */
+    testID?: string;
+};
+
+export type RadioLabelProps = TextProps & {
+    children: ReactNode;
+};
+
+/**
+ * Internal props for the platform control (RadioBase).
+ */
+export type RadioBaseProps = Omit<TouchableRippleProps, 'children'> & {
+    checked: boolean;
+    disabled?: boolean;
+    size?: Size;
+    color?: string;
+    uncheckedColor?: string;
+    onPress?: () => void;
+    stateLayerProps?: PropsWithoutRef<ViewProps>;
+    testID?: string;
+};

package/components/Radio/utils.ts

@@ -0,0 +1,115 @@
+import { StyleSheet } from 'react-native-unistyles';
+
+import { getRegisteredComponentStylesWithFallback } from '../../core';
+
+export const ANIMATION_DURATION = 100;
+
+export const iconSizeMap = {
+    sm: 20,
+    md: 24,
+    lg: 28,
+};
+
+const radioStylesDefault = StyleSheet.create(theme => ({
+    root: {},
+
+    container: {
+        borderRadius: theme.shapes.corner.full as unknown as number,
+        alignItems: 'center',
+        justifyContent: 'center',
+
+        variants: {
+            size: {
+                sm: { padding: 4 },
+                md: { padding: 6 },
+                lg: { padding: 8 },
+            },
+        },
+    },
+    radioContainer: {
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    radio: {
+        borderColor: theme.colors.onSurfaceVariant,
+
+        variants: {
+            state: {
+                checked: { borderColor: theme.colors.primary },
+                checkedAndHovered: { borderColor: theme.colors.primary },
+                hovered: {},
+                disabled: { borderColor: theme.colors.onSurfaceDisabled },
+            },
+            size: {
+                sm: { height: 16, width: 16, borderRadius: 8 },
+                md: { height: 20, width: 20, borderRadius: 10 },
+                lg: { height: 24, width: 24, borderRadius: 12 },
+            },
+        },
+    },
+    dot: {
+        backgroundColor: theme.colors.onSurfaceVariant,
+
+        variants: {
+            state: {
+                checked: { backgroundColor: theme.colors.primary },
+                checkedAndHovered: { backgroundColor: theme.colors.primary },
+                hovered: {},
+                disabled: { backgroundColor: theme.colors.onSurfaceDisabled },
+            },
+            size: {
+                sm: { height: 8, width: 8, borderRadius: 4 },
+                md: { height: 10, width: 10, borderRadius: 5 },
+                lg: { height: 12, width: 12, borderRadius: 6 },
+            },
+        },
+    },
+    icon: {
+        backgroundColor: theme.colors.onSurfaceVariant,
+
+        variants: {
+            state: {
+                checked: { backgroundColor: theme.colors.primary },
+                checkedAndHovered: { backgroundColor: theme.colors.primary },
+                hovered: {},
+                disabled: { backgroundColor: theme.colors.onSurfaceDisabled },
+            },
+        },
+    },
+    stateLayer: {
+        variants: {
+            state: {
+                hovered: { backgroundColor: theme.colors.stateLayer.hover.onSurface },
+                checkedAndHovered: { backgroundColor: theme.colors.stateLayer.hover.primary },
+            },
+        },
+    },
+}));
+
+const radioRowStylesDefault = StyleSheet.create(theme => ({
+    row: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    label: {
+        flexShrink: 1,
+        flexGrow: 1,
+        color: theme.colors.onSurface,
+        ...theme.typescale.bodyLarge,
+
+        variants: {
+            state: {
+                checked: {},
+                checkedAndHovered: {},
+                hovered: {},
+                disabled: { color: theme.colors.onSurfaceDisabled },
+            },
+        },
+    },
+}));
+
+export const radioStyles = getRegisteredComponentStylesWithFallback('Radio', radioStylesDefault);
+export const radioRowStyles = getRegisteredComponentStylesWithFallback(
+    'Radio_Row',
+    radioRowStylesDefault,
+);

package/components/Rating/Rating.tsx

@@ -1,7 +1,7 @@
+import { useControlledValue } from '@react-native-molecules/utils/hooks';
 import { forwardRef, memo, useMemo } from 'react';
 import { View, type ViewProps, type ViewStyle } from 'react-native';
 
-import { useControlledValue } from '../../hooks';
 import type { IconProps, IconType } from '../Icon';
 import type { TooltipProps } from '../Tooltip';
 import RatingItem from './RatingItem';