diff --git a/packages/design-system-react-native/src/components/Checkbox/Checkbox.types.ts b/packages/design-system-react-native/src/components/Checkbox/Checkbox.types.ts index e2bf0c1c5..0d96c67cd 100644 --- a/packages/design-system-react-native/src/components/Checkbox/Checkbox.types.ts +++ b/packages/design-system-react-native/src/components/Checkbox/Checkbox.types.ts @@ -1,49 +1,18 @@ +import type { CheckboxPropsShared } from '@metamask/design-system-shared'; import type { PressableProps, ViewProps } from 'react-native'; import type { IconProps } from '../Icon'; import type { TextProps } from '../Text'; + /** * Checkbox component props. */ - -export type CheckboxProps = { - /** - * Required prop to determine whether the checkbox is currently selected. - * This component is fully controlled, so you must manage this state - * in your parent component. - */ - isSelected: boolean; - - /** - * Optional prop that when true, disables the checkbox. - * - * @default false - */ - isDisabled?: boolean; - - /** - * Optional prop that when true, displays the invalid/error state of the checkbox. - * - * @default false - */ - isInvalid?: boolean; - - /** - * Optional label prop that renders text or a React node as a label beside the checkbox. - */ - label?: React.ReactNode | string; - +export type CheckboxProps = CheckboxPropsShared & { /** * Optional props to be passed to the label's Text component. */ labelProps?: Omit, 'children'>; - /** - * Required callback for when the checked state changes. - * Use this to update your state. - */ - onChange: (isSelected: boolean) => void; - /** * Optional props passed to the container view wrapping the checkbox icon. */ diff --git a/packages/design-system-react/src/components/Checkbox/Checkbox.types.ts b/packages/design-system-react/src/components/Checkbox/Checkbox.types.ts index 056e496d2..e8d59173e 100644 --- a/packages/design-system-react/src/components/Checkbox/Checkbox.types.ts +++ b/packages/design-system-react/src/components/Checkbox/Checkbox.types.ts @@ -1,3 +1,4 @@ +import type { CheckboxPropsShared } from '@metamask/design-system-shared'; import type { ComponentProps } from 'react'; import type { IconProps } from '../Icon'; @@ -6,79 +7,48 @@ import type { TextProps } from '../Text'; export type CheckboxProps = Omit< ComponentProps<'label'>, 'style' | 'className' | 'children' | 'htmlFor' -> & { - /** - * Required unique identifier for the checkbox input element. - * This is used for the input's ID and the label's htmlFor attributes. - */ - id: string; - - /** - * Required prop to determine whether the checkbox is currently selected. - * This component is fully controlled, so you must manage this state - * in your parent component. - */ - isSelected: boolean; - - /** - * Optional prop that when true, disables the checkbox. - * - * @default false - */ - isDisabled?: boolean; - - /** - * Optional prop that when true, displays the invalid/error state of the checkbox. - * - * @default false - */ - isInvalid?: boolean; - - /** - * Optional label prop that renders text or a React node as a label beside the checkbox. - */ - label?: React.ReactNode | string; - - /** - * Optional props to be passed to the label's Text component - */ - labelProps?: Omit, 'children'>; - - /** - * Required callback for when the checked state changes. - * Use this to update your state. - */ - onChange: (isSelected: boolean) => void; - - /** - * Optional props passed to the input element. - */ - inputProps?: Omit< - ComponentProps<'input'>, - 'type' | 'checked' | 'onChange' | 'disabled' - > & { - [key: `data-${string}`]: string; - }; - - /** - * Optional props passed to the container div wrapping the checkbox icon. - */ - checkboxContainerProps?: (Omit, 'children'> & { +> & + CheckboxPropsShared & { + /** + * Required unique identifier for the checkbox input element. + * This is used for the input's ID and the label's htmlFor attributes. + */ + id: string; + + /** + * Optional props to be passed to the label's Text component + */ + labelProps?: Omit, 'children'>; + + /** + * Optional props passed to the input element. + */ + inputProps?: Omit< + ComponentProps<'input'>, + 'type' | 'checked' | 'onChange' | 'disabled' + > & { + [key: `data-${string}`]: string; + }; + + /** + * Optional props passed to the container div wrapping the checkbox icon. + */ + checkboxContainerProps?: (Omit, 'children'> & { + className?: string; + }) & + Record; + + /** + * Optional props to be passed to the check Icon component + */ + checkedIconProps?: Partial; + /** + * Optional prop for additional CSS classes to be applied to the Checkbox component. + * These classes will be merged with the component's default classes using twMerge. + */ className?: string; - }) & - Record; - - /** - * Optional props to be passed to the check Icon component - */ - checkedIconProps?: Partial; - /** - * Optional prop for additional CSS classes to be applied to the Checkbox component. - * These classes will be merged with the component's default classes using twMerge. - */ - className?: string; - /** - * Optional CSS styles for the outer container. - */ - style?: React.CSSProperties; -}; + /** + * Optional CSS styles for the outer container. + */ + style?: React.CSSProperties; + }; diff --git a/packages/design-system-shared/src/index.ts b/packages/design-system-shared/src/index.ts index c16cb2e07..bff678ef4 100644 --- a/packages/design-system-shared/src/index.ts +++ b/packages/design-system-shared/src/index.ts @@ -110,3 +110,6 @@ export { AvatarFaviconSize, type AvatarFaviconPropsShared, } from './types/AvatarFavicon'; + +// Checkbox types (ADR-0004) +export { type CheckboxPropsShared } from './types/Checkbox'; diff --git a/packages/design-system-shared/src/types/Checkbox/Checkbox.types.ts b/packages/design-system-shared/src/types/Checkbox/Checkbox.types.ts new file mode 100644 index 000000000..5de1d6b31 --- /dev/null +++ b/packages/design-system-shared/src/types/Checkbox/Checkbox.types.ts @@ -0,0 +1,35 @@ +import type { ReactNode } from 'react'; + +/** + * Checkbox component shared props (ADR-0004) + * Platform-independent properties shared across React and React Native. + */ +export type CheckboxPropsShared = { + /** + * Required prop to determine whether the checkbox is currently selected. + * This component is fully controlled, so you must manage this state + * in your parent component. + */ + isSelected: boolean; + /** + * Optional prop that when true, disables the checkbox. + * + * @default false + */ + isDisabled?: boolean; + /** + * Optional prop that when true, displays the invalid/error state of the checkbox. + * + * @default false + */ + isInvalid?: boolean; + /** + * Optional label prop that renders text or a React node as a label beside the checkbox. + */ + label?: ReactNode | string; + /** + * Required callback for when the checked state changes. + * Use this to update your state. + */ + onChange: (isSelected: boolean) => void; +}; diff --git a/packages/design-system-shared/src/types/Checkbox/index.ts b/packages/design-system-shared/src/types/Checkbox/index.ts new file mode 100644 index 000000000..8341b29e6 --- /dev/null +++ b/packages/design-system-shared/src/types/Checkbox/index.ts @@ -0,0 +1 @@ +export { type CheckboxPropsShared } from './Checkbox.types';