{ "v": 0, "components": { "components-actionlistitem": { "id": "components-actionlistitem", "name": "ActionListItem", "path": "../../packages/design-system-react-native/src/components/ActionListItem/ActionListItem.stories.tsx", "jsDocTags": {}, "reactDocgen": { "description": "", "methods": [], "displayName": "ActionListItem", "definedInFile": "/home/runner/work/metamask-design-system/metamask-design-system/packages/design-system-react-native/src/components/ActionListItem/ActionListItem.tsx", "actualName": "ActionListItem", "exportName": "ActionListItem", "props": { "label": { "required": true, "tsType": { "name": "union", "raw": "string | ReactNode", "elements": [ { "name": "string" }, { "name": "ReactNode" } ] }, "description": "Label for the list item — can be a string or React node.\nWhen a string, it is wrapped in a Text component with default styling.\nWhen a ReactNode, it is rendered as-is and `labelTextProps` is ignored." }, "description": { "required": false, "tsType": { "name": "union", "raw": "string | ReactNode", "elements": [ { "name": "string" }, { "name": "ReactNode" } ] }, "description": "Optional description for the list item — can be a string or React node.\nWhen a string, it is wrapped in a Text component with default styling.\nWhen a ReactNode, it is rendered as-is and `descriptionTextProps` is ignored." }, "startAccessory": { "required": false, "tsType": { "name": "ReactNode" }, "description": "Optional start accessory (left side) — React node.\nTakes priority over `iconName` when both are provided." }, "endAccessory": { "required": false, "tsType": { "name": "ReactNode" }, "description": "Optional end accessory (right side) — React node." }, "iconName": { "required": false, "tsType": { "name": "IconName" }, "description": "Optional icon name from the design system icon library.\nRenders an icon with `IconSize.Md`. Ignored when `startAccessory` is provided." }, "labelTextProps": { "required": false, "tsType": { "name": "Partial", "elements": [ { "name": "intersection", "raw": "TextPropsShared &\nRNTextProps & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "elements": [ { "name": "TextPropsShared" }, { "name": "RNTextProps" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } } ] } ], "raw": "Partial" }, "description": "Optional props spread to the label Text component (only when label is a string)." }, "descriptionTextProps": { "required": false, "tsType": { "name": "Partial", "elements": [ { "name": "intersection", "raw": "TextPropsShared &\nRNTextProps & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "elements": [ { "name": "TextPropsShared" }, { "name": "RNTextProps" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } } ] } ], "raw": "Partial" }, "description": "Optional props spread to the description Text component (only when description is a string)." }, "iconProps": { "required": false, "tsType": { "name": "Partial", "elements": [ { "name": "intersection", "raw": "IconPropsShared & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n} & Omit", "elements": [ { "name": "IconPropsShared" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } }, { "name": "Omit", "elements": [ { "name": "SvgProps" }, { "name": "union", "raw": "'color' | 'name'", "elements": [ { "name": "literal", "value": "'color'" }, { "name": "literal", "value": "'name'" } ] } ], "raw": "Omit" } ] } ], "raw": "Partial" }, "description": "Optional props spread to the Icon component (only when iconName is provided)." }, "isDisabled": { "required": false, "tsType": { "name": "boolean" }, "description": "Whether the list item is disabled.\nWhen true, applies 50% opacity and disables interactions.\n\n@default false", "defaultValue": { "value": "false", "computed": false } }, "onPress": { "required": false, "tsType": { "name": "PressableProps['onPress']", "raw": "PressableProps['onPress']" }, "description": "Optional callback when the list item is pressed." }, "pressableProps": { "required": false, "tsType": { "name": "Omit", "elements": [ { "name": "PressableProps" }, { "name": "union", "raw": "'onPress' | 'disabled' | 'style'", "elements": [ { "name": "literal", "value": "'onPress'" }, { "name": "literal", "value": "'disabled'" }, { "name": "literal", "value": "'style'" } ] } ], "raw": "Omit" }, "description": "Optional props to pass to the underlying Pressable.\nUse this for Pressable-specific props such as testID for the interactive element." }, "twClassName": { "required": false, "tsType": { "name": "string" }, "description": "Optional prop to add twrnc overriding classNames." } } }, "stories": [ { "id": "components-actionlistitem--default", "name": "Default", "snippet": "const Default = () => ;" }, { "id": "components-actionlistitem--icon-name-story", "name": "IconName", "snippet": "const IconNameStory = () => ;" }, { "id": "components-actionlistitem--start-accessory", "name": "Start Accessory", "snippet": "const StartAccessory = () => } />;" }, { "id": "components-actionlistitem--end-accessory", "name": "End Accessory", "snippet": "const EndAccessory = () => } />;" }, { "id": "components-actionlistitem--is-disabled", "name": "Is Disabled", "snippet": "const IsDisabled = () => ;" }, { "id": "components-actionlistitem--label", "name": "Label", "snippet": "const Label = () => ;" }, { "id": "components-actionlistitem--description", "name": "Description", "snippet": "const Description = () => } />;" }, { "id": "components-actionlistitem--tw-class-name", "name": "Tw Class Name", "snippet": "const TwClassName = () => ;" }, { "id": "components-actionlistitem--backgrounds", "name": "Backgrounds", "snippet": "const Backgrounds = (args) => (\n \n {BACKGROUND_EXAMPLES.map(({ label, backgroundColor }) => (\n \n {label}\n \n \n ))}\n \n);" } ], "import": "import { ActionListItem, Box, Icon, Text } from '@metamask/design-system-react-native';\nimport { IconName, Icon } from '../Icon';" }, "components-avataraccount": { "id": "components-avataraccount", "name": "AvatarAccount", "path": "../../packages/design-system-react-native/src/components/AvatarAccount/AvatarAccount.stories.tsx", "jsDocTags": {}, "reactDocgen": { "description": "", "methods": [], "displayName": "AvatarAccount", "definedInFile": "/home/runner/work/metamask-design-system/metamask-design-system/packages/design-system-react-native/src/components/AvatarAccount/AvatarAccount.tsx", "actualName": "AvatarAccount", "exportName": "AvatarAccount", "props": { "blockiesProps": { "required": false, "tsType": { "name": "Partial", "elements": [ { "name": "intersection", "raw": "{\n /**\n * Required address used as a unique identifier to generate the Blockies.\n */\n address: string;\n /**\n * Optional prop to control the size of the Blockies.\n */\n size?: number;\n} & Omit", "elements": [ { "name": "signature", "type": "object", "raw": "{\n /**\n * Required address used as a unique identifier to generate the Blockies.\n */\n address: string;\n /**\n * Optional prop to control the size of the Blockies.\n */\n size?: number;\n}", "signature": { "properties": [ { "key": "address", "value": { "name": "string", "required": true }, "description": "Required address used as a unique identifier to generate the Blockies." }, { "key": "size", "value": { "name": "number", "required": false }, "description": "Optional prop to control the size of the Blockies." } ] } }, { "name": "Omit", "elements": [ { "name": "ImageProps" }, { "name": "union", "raw": "'source' | 'width' | 'height'", "elements": [ { "name": "literal", "value": "'source'" }, { "name": "literal", "value": "'width'" }, { "name": "literal", "value": "'height'" } ] } ], "raw": "Omit" } ] } ], "raw": "Partial" }, "description": "Optional props to be passed to the Blockies component" }, "jazziconProps": { "required": false, "tsType": { "name": "Partial", "elements": [ { "name": "intersection", "raw": "{\n /**\n * Optional prop used to locate this view in end-to-end tests.\n */\n testID?: string | undefined;\n} & IJazziconProps", "elements": [ { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop used to locate this view in end-to-end tests.\n */\n testID?: string | undefined;\n}", "signature": { "properties": [ { "key": "testID", "value": { "name": "union", "raw": "string | undefined", "elements": [ { "name": "string" }, { "name": "undefined" } ], "required": false }, "description": "Optional prop used to locate this view in end-to-end tests." } ] } }, { "name": "IJazziconProps" } ] } ], "raw": "Partial" }, "description": "Optional props to be passed to the Jazzicon component" }, "maskiconProps": { "required": false, "tsType": { "name": "Partial", "elements": [ { "name": "intersection", "raw": "{\n /**\n * Required address used as a unique identifier to generate the Maskicon.\n */\n address: string;\n /**\n * Optional prop to control the size of the Maskicon.\n */\n size?: number;\n} & Omit", "elements": [ { "name": "signature", "type": "object", "raw": "{\n /**\n * Required address used as a unique identifier to generate the Maskicon.\n */\n address: string;\n /**\n * Optional prop to control the size of the Maskicon.\n */\n size?: number;\n}", "signature": { "properties": [ { "key": "address", "value": { "name": "string", "required": true }, "description": "Required address used as a unique identifier to generate the Maskicon." }, { "key": "size", "value": { "name": "number", "required": false }, "description": "Optional prop to control the size of the Maskicon." } ] } }, { "name": "Omit", "elements": [ { "name": "SvgProps" }, { "name": "union", "raw": "'width' | 'height'", "elements": [ { "name": "literal", "value": "'width'" }, { "name": "literal", "value": "'height'" } ] } ], "raw": "Omit" } ] } ], "raw": "Partial" }, "description": "Optional props to be passed to the Maskicon component" }, "variant": { "defaultValue": { "value": "'jazzicon'", "computed": false }, "required": false }, "size": { "defaultValue": { "value": "'md'", "computed": false }, "required": false } } }, "stories": [ { "id": "components-avataraccount--default", "name": "Default", "snippet": "const Default = () => {\n return (\n \n );\n};" }, { "id": "components-avataraccount--sizes", "name": "Sizes", "snippet": "const Sizes = () => (\n \n {Object.keys(AvatarAccountSize).map((sizeKey) => (\n \n \n \n \n \n ))}\n \n);" }, { "id": "components-avataraccount--variants", "name": "Variants", "snippet": "const Variants = () => (\n \n {Object.keys(AvatarAccountVariant).map((variantKey) => (\n \n ))}\n \n);" }, { "id": "components-avataraccount--sample-addresses", "name": "Sample Addresses", "snippet": "const SampleAddresses = () => (\n \n {SAMPLE_AVATARACCOUNT_ADDRESSES.map((address) => (\n \n \n \n \n \n ))}\n \n);" } ], "import": "import { AvatarAccount } from '@metamask/design-system-react-native';\nimport { View } from 'react-native';\nimport { AvatarAccountSize, AvatarAccountVariant } from '.';" }, "components-avatarbase": { "id": "components-avatarbase", "name": "AvatarBase", "path": "../../packages/design-system-react-native/src/components/AvatarBase/AvatarBase.stories.tsx", "jsDocTags": {}, "reactDocgen": { "description": "", "methods": [], "displayName": "AvatarBase", "definedInFile": "/home/runner/work/metamask-design-system/metamask-design-system/packages/design-system-react-native/src/components/AvatarBase/AvatarBase.tsx", "actualName": "AvatarBase", "exportName": "AvatarBase", "props": { "fallbackTextProps": { "required": false, "tsType": { "name": "Omit", "elements": [ { "name": "intersection", "raw": "TextPropsShared &\nRNTextProps & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "elements": [ { "name": "TextPropsShared" }, { "name": "RNTextProps" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } } ] }, { "name": "literal", "value": "'children'" } ], "raw": "Omit" }, "description": "Optional props to be passed to the fallbackText when the content\nfails to render" }, "twClassName": { "required": false, "tsType": { "name": "string" }, "description": "Optional prop to add twrnc overriding classNames." }, "style": { "required": false, "tsType": { "name": "StyleProp", "elements": [ { "name": "ViewStyle" } ], "raw": "StyleProp" }, "description": "Optional prop to control the style." }, "size": { "defaultValue": { "value": "'md'", "computed": false }, "required": false }, "shape": { "defaultValue": { "value": "'circle'", "computed": false }, "required": false }, "hasBorder": { "defaultValue": { "value": "false", "computed": false }, "required": false } } }, "stories": [ { "id": "components-avatarbase--default", "name": "Default", "snippet": "const Default = () => \n {\n \n }\n;" }, { "id": "components-avatarbase--size", "name": "Size", "snippet": "const Size = () => (\n \n {Object.keys(AvatarBaseSize).map((sizeKey) => (\n \n \n \n \n ))}\n \n);" }, { "id": "components-avatarbase--shape", "name": "Shape", "snippet": "const Shape = () => (\n \n {Object.keys(AvatarBaseShape).map((shapeKey) => (\n \n \n {\n \n }\n \n \n {\n \n }\n \n \n {\n \n }\n \n \n {\n \n }\n \n \n {\n \n }\n \n \n ))}\n \n);" }, { "id": "components-avatarbase--fallback-text", "name": "Fallback Text", "snippet": "const FallbackText = () => (\n \n \n \n \n);" }, { "id": "components-avatarbase--children", "name": "Children", "snippet": "const Children = () => (\n \n \n \n {\n \n }\n \n \n {\n \n }\n \n \n {\n \n }\n \n \n \n \n \n);" } ], "import": "import { AvatarBase, Icon, ImageOrSvg } from '@metamask/design-system-react-native';\nimport { View } from 'react-native';\nimport { AvatarBaseSize, AvatarBaseShape } from '.';" }, "components-avatarfavicon": { "id": "components-avatarfavicon", "name": "AvatarFavicon", "path": "../../packages/design-system-react-native/src/components/AvatarFavicon/AvatarFavicon.stories.tsx", "jsDocTags": {}, "reactDocgen": { "description": "", "methods": [], "displayName": "AvatarFavicon", "definedInFile": "/home/runner/work/metamask-design-system/metamask-design-system/packages/design-system-react-native/src/components/AvatarFavicon/AvatarFavicon.tsx", "actualName": "AvatarFavicon", "exportName": "AvatarFavicon", "props": { "src": { "required": false, "tsType": { "name": "union", "raw": "| number // For local imported image\n| React.ComponentType // For local imported svg\n| { uri?: string }", "elements": [ { "name": "number" }, { "name": "ReactComponentType", "raw": "React.ComponentType", "elements": [ { "name": "SvgProps" } ] }, { "name": "signature", "type": "object", "raw": "{ uri?: string }", "signature": { "properties": [ { "key": "uri", "value": { "name": "string", "required": false } } ] } } ] }, "description": "Optional prop for the source of the image or SVG" }, "imageOrSvgProps": { "required": false, "tsType": { "name": "Partial", "elements": [ { "name": "intersection", "raw": "ImageOrSvgBaseProps & {\n /**\n * Required prop for the source of the image or SVG.\n * This prop determines whether a local image, a local SVG component,\n * or a remote image/SVG (via URI) is rendered.\n */\n src: ImageOrSvgSrc;\n}", "elements": [ { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to set the width of the image/SVG.\n * Accepts numbers (pixels) or string values (like percentages).\n */\n width?: number | string;\n /**\n * Optional prop to set the height of the image/SVG.\n * Accepts numbers (pixels) or string values (like percentages).\n */\n height?: number | string;\n /**\n * Optional prop to set callback triggered when the image has loaded successfully.\n */\n onImageLoad?: (event: ImageLoadEventData) => void;\n /**\n * Optional prop to set callback triggered when there is an error rendering the image.\n */\n onImageError?: (errorEvent: ImageErrorEventData) => void;\n /**\n * Optional prop to set callback triggered when there is an error rendering the SVG.\n */\n onSvgError?: (error: Error) => void;\n /**\n * Optional prop for style overrides for the image/SVG container.\n */\n style?: StyleProp;\n /**\n * Additional props to pass to the Image component, excluding\n * the 'source' prop (which is handled separately).\n */\n imageProps?: Omit;\n /**\n * Additional props to pass to the Svg component, excluding\n * the 'uri' prop (which is handled separately).\n */\n svgProps?: Omit;\n}", "signature": { "properties": [ { "key": "width", "value": { "name": "union", "raw": "number | string", "elements": [ { "name": "number" }, { "name": "string" } ], "required": false }, "description": "Optional prop to set the width of the image/SVG.\nAccepts numbers (pixels) or string values (like percentages)." }, { "key": "height", "value": { "name": "union", "raw": "number | string", "elements": [ { "name": "number" }, { "name": "string" } ], "required": false }, "description": "Optional prop to set the height of the image/SVG.\nAccepts numbers (pixels) or string values (like percentages)." }, { "key": "onImageLoad", "value": { "name": "signature", "type": "function", "raw": "(event: ImageLoadEventData) => void", "signature": { "arguments": [ { "type": { "name": "signature", "type": "object", "raw": "{\n cacheType: 'none' | 'disk' | 'memory';\n source: {\n url: string;\n width: number;\n height: number;\n mediaType: string | null;\n isAnimated?: boolean;\n };\n}", "signature": { "properties": [ { "key": "cacheType", "value": { "name": "union", "raw": "'none' | 'disk' | 'memory'", "elements": [ { "name": "literal", "value": "'none'" }, { "name": "literal", "value": "'disk'" }, { "name": "literal", "value": "'memory'" } ], "required": true } }, { "key": "source", "value": { "name": "signature", "type": "object", "raw": "{\n url: string;\n width: number;\n height: number;\n mediaType: string | null;\n isAnimated?: boolean;\n}", "signature": { "properties": [ { "key": "url", "value": { "name": "string", "required": true } }, { "key": "width", "value": { "name": "number", "required": true } }, { "key": "height", "value": { "name": "number", "required": true } }, { "key": "mediaType", "value": { "name": "union", "raw": "string | null", "elements": [ { "name": "string" }, { "name": "null" } ], "required": true } }, { "key": "isAnimated", "value": { "name": "boolean", "required": false } } ] }, "required": true } } ] } }, "name": "event" } ], "return": { "name": "void" } }, "required": false }, "description": "Optional prop to set callback triggered when the image has loaded successfully." }, { "key": "onImageError", "value": { "name": "signature", "type": "function", "raw": "(errorEvent: ImageErrorEventData) => void", "signature": { "arguments": [ { "type": { "name": "signature", "type": "object", "raw": "{\n error: string;\n}", "signature": { "properties": [ { "key": "error", "value": { "name": "string", "required": true } } ] } }, "name": "errorEvent" } ], "return": { "name": "void" } }, "required": false }, "description": "Optional prop to set callback triggered when there is an error rendering the image." }, { "key": "onSvgError", "value": { "name": "signature", "type": "function", "raw": "(error: Error) => void", "signature": { "arguments": [ { "type": { "name": "Error" }, "name": "error" } ], "return": { "name": "void" } }, "required": false }, "description": "Optional prop to set callback triggered when there is an error rendering the SVG." }, { "key": "style", "value": { "name": "StyleProp", "elements": [ { "name": "ImageStyle" } ], "raw": "StyleProp", "required": false }, "description": "Optional prop for style overrides for the image/SVG container." }, { "key": "imageProps", "value": { "name": "Omit", "elements": [ { "name": "ImageProps" }, { "name": "literal", "value": "'source'" } ], "raw": "Omit", "required": false }, "description": "Additional props to pass to the Image component, excluding\nthe 'source' prop (which is handled separately)." }, { "key": "svgProps", "value": { "name": "Omit", "elements": [ { "name": "SvgProps" }, { "name": "literal", "value": "'uri'" } ], "raw": "Omit", "required": false }, "description": "Additional props to pass to the Svg component, excluding\nthe 'uri' prop (which is handled separately)." } ] } }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Required prop for the source of the image or SVG.\n * This prop determines whether a local image, a local SVG component,\n * or a remote image/SVG (via URI) is rendered.\n */\n src: ImageOrSvgSrc;\n}", "signature": { "properties": [ { "key": "src", "value": { "name": "union", "raw": "| number // For local imported image\n| React.ComponentType // For local imported svg\n| { uri?: string }", "elements": [ { "name": "number" }, { "name": "ReactComponentType", "raw": "React.ComponentType", "elements": [ { "name": "SvgProps" } ] }, { "name": "signature", "type": "object", "raw": "{ uri?: string }", "signature": { "properties": [ { "key": "uri", "value": { "name": "string", "required": false } } ] } } ], "required": true }, "description": "Required prop for the source of the image or SVG.\nThis prop determines whether a local image, a local SVG component,\nor a remote image/SVG (via URI) is rendered." } ] } } ] } ], "raw": "Partial" }, "description": "Optional prop to pass to the underlying ImageOrSvg element\nUseful for overriding the default alt text which is the dapp name" }, "size": { "defaultValue": { "value": "'md'", "computed": false }, "required": false } } }, "stories": [ { "id": "components-avatarfavicon--default", "name": "Default", "snippet": "const Default = () => ;" }, { "id": "components-avatarfavicon--sizes", "name": "Sizes", "snippet": "const Sizes = () => (\n \n {Object.keys(AvatarFaviconSize).map((sizeKey) => (\n \n ))}\n \n);" }, { "id": "components-avatarfavicon--sample-favicons", "name": "Sample Favicons", "snippet": "const SampleFavicons = () => (\n \n {SAMPLE_AVATARFAVICON_URIS.map((faviconSrc, index) => (\n \n ))}\n \n);" }, { "id": "components-avatarfavicon--fallback", "name": "Fallback", "snippet": "const Fallback = () => (\n \n \n \n \n \n);" } ], "import": "import { AvatarFavicon } from '@metamask/design-system-react-native';\nimport { View } from 'react-native';\nimport { AvatarFaviconSize } from '@metamask/design-system-shared';" }, "components-avatargroup": { "id": "components-avatargroup", "name": "AvatarGroup", "path": "../../packages/design-system-react-native/src/components/AvatarGroup/AvatarGroup.stories.tsx", "jsDocTags": {}, "reactDocgen": { "description": "", "methods": [], "displayName": "AvatarGroup", "definedInFile": "/home/runner/work/metamask-design-system/metamask-design-system/packages/design-system-react-native/src/components/AvatarGroup/AvatarGroup.tsx", "actualName": "AvatarGroup", "exportName": "AvatarGroup", "props": { "overflowTextProps": { "required": false, "tsType": { "name": "intersection", "raw": "AvatarBasePropsShared &\nOmit & {\n /**\n * Optional props to be passed to the fallbackText when the content\n * fails to render\n */\n fallbackTextProps?: Omit;\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n /**\n * Optional prop to control the style.\n */\n style?: StyleProp;\n}", "elements": [ { "name": "AvatarBasePropsShared" }, { "name": "Omit", "elements": [ { "name": "ViewProps" }, { "name": "literal", "value": "'children'" } ], "raw": "Omit" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional props to be passed to the fallbackText when the content\n * fails to render\n */\n fallbackTextProps?: Omit;\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n /**\n * Optional prop to control the style.\n */\n style?: StyleProp;\n}", "signature": { "properties": [ { "key": "fallbackTextProps", "value": { "name": "Omit", "elements": [ { "name": "intersection", "raw": "TextPropsShared &\nRNTextProps & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "elements": [ { "name": "TextPropsShared" }, { "name": "RNTextProps" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } } ] }, { "name": "literal", "value": "'children'" } ], "raw": "Omit", "required": false }, "description": "Optional props to be passed to the fallbackText when the content\nfails to render" }, { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." }, { "key": "style", "value": { "name": "StyleProp", "elements": [ { "name": "ViewStyle" } ], "raw": "StyleProp", "required": false }, "description": "Optional prop to control the style." } ] } } ] }, "description": "Optional prop to pass additional AvatarBase props to the overflow Text element." }, "twClassName": { "required": false, "tsType": { "name": "string" }, "description": "Optional prop to add twrnc overriding classNames." }, "size": { "defaultValue": { "value": "'md'", "computed": false }, "required": false }, "max": { "defaultValue": { "value": "4", "computed": false }, "required": false }, "isReverse": { "defaultValue": { "value": "false", "computed": false }, "required": false } } }, "stories": [ { "id": "components-avatargroup--default", "name": "Default", "snippet": "const Default = () => ;" }, { "id": "components-avatargroup--variants", "name": "Variants", "snippet": "const Variants = () => (\n \n {Object.keys(AvatarGroupVariant).map((variantKey) => (\n \n ))}\n \n);" }, { "id": "components-avatargroup--sizes", "name": "Sizes", "snippet": "const Sizes = () => (\n \n {Object.keys(AvatarGroupSize).map((sizeKey) => (\n \n \n \n \n \n \n ))}\n \n);" }, { "id": "components-avatargroup--is-reverse", "name": "Is Reverse", "snippet": "const IsReverse = () => (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n);" } ], "import": "import { AvatarGroup } from '@metamask/design-system-react-native';\nimport { ScrollView, View } from 'react-native';\nimport { AvatarGroupVariant, AvatarGroupSize } from '@metamask/design-system-shared';" }, "components-avataricon": { "id": "components-avataricon", "name": "AvatarIcon", "path": "../../packages/design-system-react-native/src/components/AvatarIcon/AvatarIcon.stories.tsx", "jsDocTags": {}, "reactDocgen": { "description": "", "methods": [], "displayName": "AvatarIcon", "definedInFile": "/home/runner/work/metamask-design-system/metamask-design-system/packages/design-system-react-native/src/components/AvatarIcon/AvatarIcon.tsx", "actualName": "AvatarIcon", "exportName": "AvatarIcon", "props": { "iconProps": { "required": false, "tsType": { "name": "Omit", "elements": [ { "name": "intersection", "raw": "IconPropsShared & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n} & Omit", "elements": [ { "name": "IconPropsShared" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } }, { "name": "Omit", "elements": [ { "name": "SvgProps" }, { "name": "union", "raw": "'color' | 'name'", "elements": [ { "name": "literal", "value": "'color'" }, { "name": "literal", "value": "'name'" } ] } ], "raw": "Omit" } ] }, { "name": "literal", "value": "'name'" } ], "raw": "Omit" }, "description": "Optional prop to pass additional properties to the icon" }, "size": { "defaultValue": { "value": "'md'", "computed": false }, "required": false }, "shape": { "defaultValue": { "value": "'circle'", "computed": false }, "required": false }, "severity": { "defaultValue": { "value": "'neutral'", "computed": false }, "required": false } } }, "stories": [ { "id": "components-avataricon--default", "name": "Default", "snippet": "const Default = () => ;" }, { "id": "components-avataricon--sizes", "name": "Sizes", "snippet": "const Sizes = () => (\n \n {Object.keys(AvatarIconSize).map((sizeKey) => (\n \n ))}\n \n);" }, { "id": "components-avataricon--severities", "name": "Severities", "snippet": "const Severities = () => (\n \n {Object.keys(AvatarIconSeverity).map((severityKey) => (\n \n ))}\n \n);" } ], "import": "import { AvatarIcon } from '@metamask/design-system-react-native';\nimport { View } from 'react-native';\nimport { AvatarIconSize, AvatarIconSeverity, IconName } from '@metamask/design-system-shared';" }, "components-avatarnetwork": { "id": "components-avatarnetwork", "name": "AvatarNetwork", "path": "../../packages/design-system-react-native/src/components/AvatarNetwork/AvatarNetwork.stories.tsx", "jsDocTags": {}, "reactDocgen": { "description": "", "methods": [], "displayName": "AvatarNetwork", "definedInFile": "/home/runner/work/metamask-design-system/metamask-design-system/packages/design-system-react-native/src/components/AvatarNetwork/AvatarNetwork.tsx", "actualName": "AvatarNetwork", "exportName": "AvatarNetwork", "props": { "src": { "required": false, "tsType": { "name": "union", "raw": "| number // For local imported image\n| React.ComponentType // For local imported svg\n| { uri?: string }", "elements": [ { "name": "number" }, { "name": "ReactComponentType", "raw": "React.ComponentType", "elements": [ { "name": "SvgProps" } ] }, { "name": "signature", "type": "object", "raw": "{ uri?: string }", "signature": { "properties": [ { "key": "uri", "value": { "name": "string", "required": false } } ] } } ] }, "description": "Optional prop for the source of the image or SVG." }, "imageOrSvgProps": { "required": false, "tsType": { "name": "Partial", "elements": [ { "name": "intersection", "raw": "ImageOrSvgBaseProps & {\n /**\n * Required prop for the source of the image or SVG.\n * This prop determines whether a local image, a local SVG component,\n * or a remote image/SVG (via URI) is rendered.\n */\n src: ImageOrSvgSrc;\n}", "elements": [ { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to set the width of the image/SVG.\n * Accepts numbers (pixels) or string values (like percentages).\n */\n width?: number | string;\n /**\n * Optional prop to set the height of the image/SVG.\n * Accepts numbers (pixels) or string values (like percentages).\n */\n height?: number | string;\n /**\n * Optional prop to set callback triggered when the image has loaded successfully.\n */\n onImageLoad?: (event: ImageLoadEventData) => void;\n /**\n * Optional prop to set callback triggered when there is an error rendering the image.\n */\n onImageError?: (errorEvent: ImageErrorEventData) => void;\n /**\n * Optional prop to set callback triggered when there is an error rendering the SVG.\n */\n onSvgError?: (error: Error) => void;\n /**\n * Optional prop for style overrides for the image/SVG container.\n */\n style?: StyleProp;\n /**\n * Additional props to pass to the Image component, excluding\n * the 'source' prop (which is handled separately).\n */\n imageProps?: Omit;\n /**\n * Additional props to pass to the Svg component, excluding\n * the 'uri' prop (which is handled separately).\n */\n svgProps?: Omit;\n}", "signature": { "properties": [ { "key": "width", "value": { "name": "union", "raw": "number | string", "elements": [ { "name": "number" }, { "name": "string" } ], "required": false }, "description": "Optional prop to set the width of the image/SVG.\nAccepts numbers (pixels) or string values (like percentages)." }, { "key": "height", "value": { "name": "union", "raw": "number | string", "elements": [ { "name": "number" }, { "name": "string" } ], "required": false }, "description": "Optional prop to set the height of the image/SVG.\nAccepts numbers (pixels) or string values (like percentages)." }, { "key": "onImageLoad", "value": { "name": "signature", "type": "function", "raw": "(event: ImageLoadEventData) => void", "signature": { "arguments": [ { "type": { "name": "signature", "type": "object", "raw": "{\n cacheType: 'none' | 'disk' | 'memory';\n source: {\n url: string;\n width: number;\n height: number;\n mediaType: string | null;\n isAnimated?: boolean;\n };\n}", "signature": { "properties": [ { "key": "cacheType", "value": { "name": "union", "raw": "'none' | 'disk' | 'memory'", "elements": [ { "name": "literal", "value": "'none'" }, { "name": "literal", "value": "'disk'" }, { "name": "literal", "value": "'memory'" } ], "required": true } }, { "key": "source", "value": { "name": "signature", "type": "object", "raw": "{\n url: string;\n width: number;\n height: number;\n mediaType: string | null;\n isAnimated?: boolean;\n}", "signature": { "properties": [ { "key": "url", "value": { "name": "string", "required": true } }, { "key": "width", "value": { "name": "number", "required": true } }, { "key": "height", "value": { "name": "number", "required": true } }, { "key": "mediaType", "value": { "name": "union", "raw": "string | null", "elements": [ { "name": "string" }, { "name": "null" } ], "required": true } }, { "key": "isAnimated", "value": { "name": "boolean", "required": false } } ] }, "required": true } } ] } }, "name": "event" } ], "return": { "name": "void" } }, "required": false }, "description": "Optional prop to set callback triggered when the image has loaded successfully." }, { "key": "onImageError", "value": { "name": "signature", "type": "function", "raw": "(errorEvent: ImageErrorEventData) => void", "signature": { "arguments": [ { "type": { "name": "signature", "type": "object", "raw": "{\n error: string;\n}", "signature": { "properties": [ { "key": "error", "value": { "name": "string", "required": true } } ] } }, "name": "errorEvent" } ], "return": { "name": "void" } }, "required": false }, "description": "Optional prop to set callback triggered when there is an error rendering the image." }, { "key": "onSvgError", "value": { "name": "signature", "type": "function", "raw": "(error: Error) => void", "signature": { "arguments": [ { "type": { "name": "Error" }, "name": "error" } ], "return": { "name": "void" } }, "required": false }, "description": "Optional prop to set callback triggered when there is an error rendering the SVG." }, { "key": "style", "value": { "name": "StyleProp", "elements": [ { "name": "ImageStyle" } ], "raw": "StyleProp", "required": false }, "description": "Optional prop for style overrides for the image/SVG container." }, { "key": "imageProps", "value": { "name": "Omit", "elements": [ { "name": "ImageProps" }, { "name": "literal", "value": "'source'" } ], "raw": "Omit", "required": false }, "description": "Additional props to pass to the Image component, excluding\nthe 'source' prop (which is handled separately)." }, { "key": "svgProps", "value": { "name": "Omit", "elements": [ { "name": "SvgProps" }, { "name": "literal", "value": "'uri'" } ], "raw": "Omit", "required": false }, "description": "Additional props to pass to the Svg component, excluding\nthe 'uri' prop (which is handled separately)." } ] } }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Required prop for the source of the image or SVG.\n * This prop determines whether a local image, a local SVG component,\n * or a remote image/SVG (via URI) is rendered.\n */\n src: ImageOrSvgSrc;\n}", "signature": { "properties": [ { "key": "src", "value": { "name": "union", "raw": "| number // For local imported image\n| React.ComponentType // For local imported svg\n| { uri?: string }", "elements": [ { "name": "number" }, { "name": "ReactComponentType", "raw": "React.ComponentType", "elements": [ { "name": "SvgProps" } ] }, { "name": "signature", "type": "object", "raw": "{ uri?: string }", "signature": { "properties": [ { "key": "uri", "value": { "name": "string", "required": false } } ] } } ], "required": true }, "description": "Required prop for the source of the image or SVG.\nThis prop determines whether a local image, a local SVG component,\nor a remote image/SVG (via URI) is rendered." } ] } } ] } ], "raw": "Partial" }, "description": "Optional prop to pass to the underlying ImageOrSvg element.\nUseful for overriding the default alt text which is the network name." }, "size": { "defaultValue": { "value": "'md'", "computed": false }, "required": false } } }, "stories": [ { "id": "components-avatarnetwork--default", "name": "Default", "snippet": "const Default = () => ;" }, { "id": "components-avatarnetwork--sizes", "name": "Sizes", "snippet": "const Sizes = () => (\n \n {Object.keys(AvatarNetworkSize).map((sizeKey) => (\n \n ))}\n \n);" }, { "id": "components-avatarnetwork--sample-networks", "name": "Sample Networks", "snippet": "const SampleNetworks = () => (\n \n {SAMPLE_AVATARNETWORK_URIS.map((networkSrc, index) => (\n \n ))}\n \n);" }, { "id": "components-avatarnetwork--fallback", "name": "Fallback", "snippet": "const Fallback = () => (\n \n \n \n \n \n);" } ], "import": "import { AvatarNetwork } from '@metamask/design-system-react-native';\nimport { View } from 'react-native';\nimport { AvatarNetworkSize } from '@metamask/design-system-shared';" }, "components-avatartoken": { "id": "components-avatartoken", "name": "AvatarToken", "path": "../../packages/design-system-react-native/src/components/AvatarToken/AvatarToken.stories.tsx", "jsDocTags": {}, "reactDocgen": { "description": "", "methods": [], "displayName": "AvatarToken", "definedInFile": "/home/runner/work/metamask-design-system/metamask-design-system/packages/design-system-react-native/src/components/AvatarToken/AvatarToken.tsx", "actualName": "AvatarToken", "exportName": "AvatarToken", "props": { "src": { "required": false, "tsType": { "name": "union", "raw": "| number // For local imported image\n| React.ComponentType // For local imported svg\n| { uri?: string }", "elements": [ { "name": "number" }, { "name": "ReactComponentType", "raw": "React.ComponentType", "elements": [ { "name": "SvgProps" } ] }, { "name": "signature", "type": "object", "raw": "{ uri?: string }", "signature": { "properties": [ { "key": "uri", "value": { "name": "string", "required": false } } ] } } ] }, "description": "Optional prop for the source of the image or SVG." }, "imageOrSvgProps": { "required": false, "tsType": { "name": "Partial", "elements": [ { "name": "intersection", "raw": "ImageOrSvgBaseProps & {\n /**\n * Required prop for the source of the image or SVG.\n * This prop determines whether a local image, a local SVG component,\n * or a remote image/SVG (via URI) is rendered.\n */\n src: ImageOrSvgSrc;\n}", "elements": [ { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to set the width of the image/SVG.\n * Accepts numbers (pixels) or string values (like percentages).\n */\n width?: number | string;\n /**\n * Optional prop to set the height of the image/SVG.\n * Accepts numbers (pixels) or string values (like percentages).\n */\n height?: number | string;\n /**\n * Optional prop to set callback triggered when the image has loaded successfully.\n */\n onImageLoad?: (event: ImageLoadEventData) => void;\n /**\n * Optional prop to set callback triggered when there is an error rendering the image.\n */\n onImageError?: (errorEvent: ImageErrorEventData) => void;\n /**\n * Optional prop to set callback triggered when there is an error rendering the SVG.\n */\n onSvgError?: (error: Error) => void;\n /**\n * Optional prop for style overrides for the image/SVG container.\n */\n style?: StyleProp;\n /**\n * Additional props to pass to the Image component, excluding\n * the 'source' prop (which is handled separately).\n */\n imageProps?: Omit;\n /**\n * Additional props to pass to the Svg component, excluding\n * the 'uri' prop (which is handled separately).\n */\n svgProps?: Omit;\n}", "signature": { "properties": [ { "key": "width", "value": { "name": "union", "raw": "number | string", "elements": [ { "name": "number" }, { "name": "string" } ], "required": false }, "description": "Optional prop to set the width of the image/SVG.\nAccepts numbers (pixels) or string values (like percentages)." }, { "key": "height", "value": { "name": "union", "raw": "number | string", "elements": [ { "name": "number" }, { "name": "string" } ], "required": false }, "description": "Optional prop to set the height of the image/SVG.\nAccepts numbers (pixels) or string values (like percentages)." }, { "key": "onImageLoad", "value": { "name": "signature", "type": "function", "raw": "(event: ImageLoadEventData) => void", "signature": { "arguments": [ { "type": { "name": "signature", "type": "object", "raw": "{\n cacheType: 'none' | 'disk' | 'memory';\n source: {\n url: string;\n width: number;\n height: number;\n mediaType: string | null;\n isAnimated?: boolean;\n };\n}", "signature": { "properties": [ { "key": "cacheType", "value": { "name": "union", "raw": "'none' | 'disk' | 'memory'", "elements": [ { "name": "literal", "value": "'none'" }, { "name": "literal", "value": "'disk'" }, { "name": "literal", "value": "'memory'" } ], "required": true } }, { "key": "source", "value": { "name": "signature", "type": "object", "raw": "{\n url: string;\n width: number;\n height: number;\n mediaType: string | null;\n isAnimated?: boolean;\n}", "signature": { "properties": [ { "key": "url", "value": { "name": "string", "required": true } }, { "key": "width", "value": { "name": "number", "required": true } }, { "key": "height", "value": { "name": "number", "required": true } }, { "key": "mediaType", "value": { "name": "union", "raw": "string | null", "elements": [ { "name": "string" }, { "name": "null" } ], "required": true } }, { "key": "isAnimated", "value": { "name": "boolean", "required": false } } ] }, "required": true } } ] } }, "name": "event" } ], "return": { "name": "void" } }, "required": false }, "description": "Optional prop to set callback triggered when the image has loaded successfully." }, { "key": "onImageError", "value": { "name": "signature", "type": "function", "raw": "(errorEvent: ImageErrorEventData) => void", "signature": { "arguments": [ { "type": { "name": "signature", "type": "object", "raw": "{\n error: string;\n}", "signature": { "properties": [ { "key": "error", "value": { "name": "string", "required": true } } ] } }, "name": "errorEvent" } ], "return": { "name": "void" } }, "required": false }, "description": "Optional prop to set callback triggered when there is an error rendering the image." }, { "key": "onSvgError", "value": { "name": "signature", "type": "function", "raw": "(error: Error) => void", "signature": { "arguments": [ { "type": { "name": "Error" }, "name": "error" } ], "return": { "name": "void" } }, "required": false }, "description": "Optional prop to set callback triggered when there is an error rendering the SVG." }, { "key": "style", "value": { "name": "StyleProp", "elements": [ { "name": "ImageStyle" } ], "raw": "StyleProp", "required": false }, "description": "Optional prop for style overrides for the image/SVG container." }, { "key": "imageProps", "value": { "name": "Omit", "elements": [ { "name": "ImageProps" }, { "name": "literal", "value": "'source'" } ], "raw": "Omit", "required": false }, "description": "Additional props to pass to the Image component, excluding\nthe 'source' prop (which is handled separately)." }, { "key": "svgProps", "value": { "name": "Omit", "elements": [ { "name": "SvgProps" }, { "name": "literal", "value": "'uri'" } ], "raw": "Omit", "required": false }, "description": "Additional props to pass to the Svg component, excluding\nthe 'uri' prop (which is handled separately)." } ] } }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Required prop for the source of the image or SVG.\n * This prop determines whether a local image, a local SVG component,\n * or a remote image/SVG (via URI) is rendered.\n */\n src: ImageOrSvgSrc;\n}", "signature": { "properties": [ { "key": "src", "value": { "name": "union", "raw": "| number // For local imported image\n| React.ComponentType // For local imported svg\n| { uri?: string }", "elements": [ { "name": "number" }, { "name": "ReactComponentType", "raw": "React.ComponentType", "elements": [ { "name": "SvgProps" } ] }, { "name": "signature", "type": "object", "raw": "{ uri?: string }", "signature": { "properties": [ { "key": "uri", "value": { "name": "string", "required": false } } ] } } ], "required": true }, "description": "Required prop for the source of the image or SVG.\nThis prop determines whether a local image, a local SVG component,\nor a remote image/SVG (via URI) is rendered." } ] } } ] } ], "raw": "Partial" }, "description": "Optional prop to pass to the underlying ImageOrSvg element\nUseful for overriding the default alt text which is the dapp name" }, "size": { "defaultValue": { "value": "'md'", "computed": false }, "required": false } } }, "stories": [ { "id": "components-avatartoken--default", "name": "Default", "snippet": "const Default = () => ;" }, { "id": "components-avatartoken--src", "name": "Src", "snippet": "const Src = () => (\n \n \n \n \n);" }, { "id": "components-avatartoken--sizes", "name": "Sizes", "snippet": "const Sizes = () => (\n \n {Object.keys(AvatarTokenSize).map((sizeKey) => (\n \n ))}\n \n);" }, { "id": "components-avatartoken--sample-tokens", "name": "Sample Tokens", "snippet": "const SampleTokens = () => (\n \n {SAMPLE_AVATARTOKEN_URIS.map((tokenSrc, index) => (\n \n ))}\n \n);" }, { "id": "components-avatartoken--fallback", "name": "Fallback", "snippet": "const Fallback = () => (\n \n \n \n \n \n \n);" } ], "import": "import { AvatarToken } from '@metamask/design-system-react-native';\nimport { View } from 'react-native';\nimport { AvatarTokenSize } from '.';" }, "components-badgecount": { "id": "components-badgecount", "name": "BadgeCount", "path": "../../packages/design-system-react-native/src/components/BadgeCount/BadgeCount.stories.tsx", "jsDocTags": {}, "reactDocgen": { "description": "", "methods": [], "displayName": "BadgeCount", "definedInFile": "/home/runner/work/metamask-design-system/metamask-design-system/packages/design-system-react-native/src/components/BadgeCount/BadgeCount.tsx", "actualName": "BadgeCount", "exportName": "BadgeCount", "props": { "textProps": { "required": false, "tsType": { "name": "Partial", "elements": [ { "name": "intersection", "raw": "TextPropsShared &\nRNTextProps & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "elements": [ { "name": "TextPropsShared" }, { "name": "RNTextProps" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } } ] } ], "raw": "Partial" }, "description": "Optional props to be passed to the Text component used by count" }, "twClassName": { "required": false, "tsType": { "name": "string" }, "description": "Optional prop to add twrnc overriding classNames." }, "style": { "required": false, "tsType": { "name": "StyleProp", "elements": [ { "name": "ViewStyle" } ], "raw": "StyleProp" }, "description": "Optional prop to control the style." }, "size": { "defaultValue": { "value": "'md'", "computed": false }, "required": false }, "max": { "defaultValue": { "value": "99", "computed": false }, "required": false } } }, "stories": [ { "id": "components-badgecount--default", "name": "Default", "snippet": "const Default = () => ;" }, { "id": "components-badgecount--size", "name": "Size", "snippet": "const Size = () => (\n \n \n \n \n);" }, { "id": "components-badgecount--max", "name": "Max", "snippet": "const Max = () => (\n \n \n \n \n);" } ], "import": "import { BadgeCount, Box } from '@metamask/design-system-react-native';\nimport { BadgeCountSize } from '@metamask/design-system-shared';" }, "components-badgeicon": { "id": "components-badgeicon", "name": "BadgeIcon", "path": "../../packages/design-system-react-native/src/components/BadgeIcon/BadgeIcon.stories.tsx", "jsDocTags": {}, "reactDocgen": { "description": "", "methods": [], "displayName": "BadgeIcon", "definedInFile": "/home/runner/work/metamask-design-system/metamask-design-system/packages/design-system-react-native/src/components/BadgeIcon/BadgeIcon.tsx", "actualName": "BadgeIcon", "exportName": "BadgeIcon", "props": { "iconProps": { "required": false, "tsType": { "name": "Omit", "elements": [ { "name": "intersection", "raw": "IconPropsShared & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n} & Omit", "elements": [ { "name": "IconPropsShared" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } }, { "name": "Omit", "elements": [ { "name": "SvgProps" }, { "name": "union", "raw": "'color' | 'name'", "elements": [ { "name": "literal", "value": "'color'" }, { "name": "literal", "value": "'name'" } ] } ], "raw": "Omit" } ] }, { "name": "literal", "value": "'name'" } ], "raw": "Omit" }, "description": "Optional prop to pass additional properties to the icon" }, "twClassName": { "required": false, "tsType": { "name": "string" }, "description": "Optional prop to add twrnc overriding classNames." } } }, "stories": [ { "id": "components-badgeicon--default", "name": "Default", "snippet": "const Default = () => ;" } ], "import": "import { BadgeIcon } from '@metamask/design-system-react-native';\nimport { IconName } from '@metamask/design-system-shared';" }, "components-badgenetwork": { "id": "components-badgenetwork", "name": "BadgeNetwork", "path": "../../packages/design-system-react-native/src/components/BadgeNetwork/BadgeNetwork.stories.tsx", "jsDocTags": {}, "reactDocgen": { "description": "", "methods": [], "displayName": "BadgeNetwork", "definedInFile": "/home/runner/work/metamask-design-system/metamask-design-system/packages/design-system-react-native/src/components/BadgeNetwork/BadgeNetwork.tsx", "actualName": "BadgeNetwork", "exportName": "BadgeNetwork" }, "stories": [ { "id": "components-badgenetwork--default", "name": "Default", "snippet": "const Default = () => ;" }, { "id": "components-badgenetwork--sample-networks", "name": "Sample Networks", "snippet": "const SampleNetworks = () => (\n \n {SAMPLE_AVATARNETWORK_URIS.map((networkSrc, index) => (\n \n ))}\n \n);" } ], "import": "import { BadgeNetwork } from '@metamask/design-system-react-native';\nimport { View } from 'react-native';" }, "components-badgestatus": { "id": "components-badgestatus", "name": "BadgeStatus", "path": "../../packages/design-system-react-native/src/components/BadgeStatus/BadgeStatus.stories.tsx", "jsDocTags": {}, "reactDocgen": { "description": "", "methods": [], "displayName": "BadgeStatus", "definedInFile": "/home/runner/work/metamask-design-system/metamask-design-system/packages/design-system-react-native/src/components/BadgeStatus/BadgeStatus.tsx", "actualName": "BadgeStatus", "exportName": "BadgeStatus", "props": { "twClassName": { "required": false, "tsType": { "name": "string" }, "description": "Optional prop to add twrnc overriding classNames." }, "size": { "defaultValue": { "value": "'md'", "computed": false }, "required": false }, "hasBorder": { "defaultValue": { "value": "true", "computed": false }, "required": false } } }, "stories": [ { "id": "components-badgestatus--default", "name": "Default", "snippet": "const Default = () => \n \n;" }, { "id": "components-badgestatus--sizes", "name": "Sizes", "snippet": "const Sizes = () => (\n \n {Object.keys(BadgeStatusSize).map((sizeKey) => (\n \n ))}\n \n);" }, { "id": "components-badgestatus--statuses", "name": "Statuses", "snippet": "const Statuses = () => (\n \n {Object.keys(BadgeStatusStatus).map((statusKey) => (\n \n ))}\n \n);" }, { "id": "components-badgestatus--has-border", "name": "Has Border", "snippet": "const HasBorder = () => (\n \n {Object.keys(BadgeStatusStatus).map((statusKey) => (\n \n \n \n \n ))}\n \n);" } ], "import": "import { BadgeStatus } from '@metamask/design-system-react-native';\nimport { View } from 'react-native';\nimport { BadgeStatusSize, BadgeStatusStatus } from '@metamask/design-system-shared';" }, "components-badgewrapper": { "id": "components-badgewrapper", "name": "BadgeWrapper", "path": "../../packages/design-system-react-native/src/components/BadgeWrapper/BadgeWrapper.stories.tsx", "jsDocTags": {}, "reactDocgen": { "description": "", "methods": [], "displayName": "BadgeWrapper", "definedInFile": "/home/runner/work/metamask-design-system/metamask-design-system/packages/design-system-react-native/src/components/BadgeWrapper/BadgeWrapper.tsx", "actualName": "BadgeWrapper", "exportName": "BadgeWrapper", "props": { "childrenContainerProps": { "required": false, "tsType": { "name": "ViewProps" }, "description": "Optional prop to pass additional props to the children container" }, "badgeContainerProps": { "required": false, "tsType": { "name": "ViewProps" }, "description": "Optional prop to pass additional props to the badge container" }, "twClassName": { "required": false, "tsType": { "name": "string" }, "description": "Optional prop to add twrnc overriding classNames." }, "style": { "required": false, "tsType": { "name": "StyleProp", "elements": [ { "name": "ViewStyle" } ], "raw": "StyleProp" }, "description": "Optional prop to control the style." }, "position": { "defaultValue": { "value": "'bottom-right'", "computed": false }, "required": false }, "positionAnchorShape": { "defaultValue": { "value": "'circular'", "computed": false }, "required": false }, "positionXOffset": { "defaultValue": { "value": "0", "computed": false }, "required": false }, "positionYOffset": { "defaultValue": { "value": "0", "computed": false }, "required": false } } }, "stories": [ { "id": "components-badgewrapper--default", "name": "Default", "snippet": "const Default = () => \n \n }>\n \n \n;" }, { "id": "components-badgewrapper--position", "name": "Position", "snippet": "const Position = () => (\n \n {Object.keys(BadgeWrapperPosition).map((positionKey) => (\n \n {/* Position example with circular anchor shape */}\n \n }\n >\n \n \n {/* Position example with rectangular anchor shape */}\n \n }\n >\n \n \n \n ))}\n \n);" }, { "id": "components-badgewrapper--position-anchor-shape", "name": "Position Anchor Shape", "snippet": "const PositionAnchorShape = () => (\n \n \n {/* PositionAnchorShape example with circular anchor shape */}\n \n }\n >\n \n \n {/* PositionAnchorShape example with rectangular anchor shape */}\n \n }\n positionAnchorShape={BadgeWrapperPositionAnchorShape.Rectangular}\n >\n \n \n \n \n);" }, { "id": "components-badgewrapper--position-x-offset", "name": "Position X Offset", "snippet": "const PositionXOffset = () => (\n \n {/* No offset */}\n \n }\n >\n \n \n {/* With Offset */}\n \n }\n positionXOffset={5}\n >\n \n \n \n);" }, { "id": "components-badgewrapper--position-y-offset", "name": "Position Y Offset", "snippet": "const PositionYOffset = () => (\n \n {/* No offset */}\n \n }\n >\n \n \n {/* With offset */}\n \n }\n positionYOffset={5}\n >\n \n \n \n);" }, { "id": "components-badgewrapper--custom-position", "name": "Custom Position", "snippet": "const CustomPosition = () => (\n \n {/* No CustomPosition */}\n \n }\n >\n \n \n {/* With CustomPosition */}\n \n }\n customPosition={{\n top: 5,\n right: 10,\n }}\n >\n \n \n \n);" }, { "id": "components-badgewrapper--badge", "name": "Badge", "snippet": "const Badge = () => (\n \n {/* Token examples. */}\n \n {Object.values(AvatarTokenSize).map((size) => (\n \n }\n >\n \n \n ))}\n \n {/* Account examples. */}\n \n {Object.values(AvatarAccountSize).map((size) => (\n \n }\n >\n \n \n ))}\n \n {/* Notification badge examples. */}\n \n {Object.values(ButtonIconSize).map((size) => (\n }\n >\n \n \n ))}\n \n {/* Status indicator examples. */}\n \n {Object.values(ButtonIconSize).map((size) => (\n }\n >\n \n \n ))}\n \n \n);" } ], "import": "import {\n AvatarAccount,\n AvatarNetwork,\n AvatarToken,\n BadgeCount,\n BadgeNetwork,\n BadgeStatus,\n BadgeWrapper,\n ButtonIcon,\n} from '@metamask/design-system-react-native';\nimport { View } from 'react-native';\nimport { BadgeWrapperPosition, BadgeWrapperPositionAnchorShape } from '@metamask/design-system-shared';" }, "components-banneralert": { "id": "components-banneralert", "name": "BannerAlert", "path": "../../packages/design-system-react-native/src/components/BannerAlert/BannerAlert.stories.tsx", "jsDocTags": {}, "reactDocgen": { "description": "", "methods": [], "displayName": "BannerAlert", "definedInFile": "/home/runner/work/metamask-design-system/metamask-design-system/packages/design-system-react-native/src/components/BannerAlert/BannerAlert.tsx", "actualName": "BannerAlert", "exportName": "BannerAlert", "props": { "titleProps": { "required": false, "tsType": { "name": "Omit", "elements": [ { "name": "Partial", "elements": [ { "name": "intersection", "raw": "TextPropsShared &\nRNTextProps & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "elements": [ { "name": "TextPropsShared" }, { "name": "RNTextProps" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } } ] } ], "raw": "Partial" }, { "name": "literal", "value": "'children'" } ], "raw": "Omit, 'children'>" }, "description": "Optional props for the title `Text` when title is a string." }, "descriptionProps": { "required": false, "tsType": { "name": "Omit", "elements": [ { "name": "Partial", "elements": [ { "name": "intersection", "raw": "TextPropsShared &\nRNTextProps & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "elements": [ { "name": "TextPropsShared" }, { "name": "RNTextProps" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } } ] } ], "raw": "Partial" }, { "name": "literal", "value": "'children'" } ], "raw": "Omit, 'children'>" }, "description": "Optional props for the description `Text` when description is a string." }, "childrenWrapperProps": { "required": false, "tsType": { "name": "Omit", "elements": [ { "name": "Partial", "elements": [ { "name": "intersection", "raw": "TextPropsShared &\nRNTextProps & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "elements": [ { "name": "TextPropsShared" }, { "name": "RNTextProps" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } } ] } ], "raw": "Partial" }, { "name": "literal", "value": "'children'" } ], "raw": "Omit, 'children'>" }, "description": "Optional props for the children wrapper `Text` when children is a string." }, "onClose": { "required": false, "tsType": { "name": "signature", "type": "function", "raw": "() => void", "signature": { "arguments": [], "return": { "name": "void" } } }, "description": "Optional callback for the close button.\nIf provided, a close button is shown." }, "closeButtonProps": { "required": false, "tsType": { "name": "Omit", "elements": [ { "name": "Partial", "elements": [ { "name": "intersection", "raw": "ButtonIconPropsShared & {\n /**\n * Optional prop to pass additional properties to the icon\n */\n iconProps?: Partial;\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n /**\n * Optional prop to control the style.\n */\n style?: StyleProp;\n} & Omit", "elements": [ { "name": "ButtonIconPropsShared" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to pass additional properties to the icon\n */\n iconProps?: Partial;\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n /**\n * Optional prop to control the style.\n */\n style?: StyleProp;\n}", "signature": { "properties": [ { "key": "iconProps", "value": { "name": "Partial", "elements": [ { "name": "intersection", "raw": "IconPropsShared & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n} & Omit", "elements": [ { "name": "IconPropsShared" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } }, { "name": "Omit", "elements": [ { "name": "SvgProps" }, { "name": "union", "raw": "'color' | 'name'", "elements": [ { "name": "literal", "value": "'color'" }, { "name": "literal", "value": "'name'" } ] } ], "raw": "Omit" } ] } ], "raw": "Partial", "required": false }, "description": "Optional prop to pass additional properties to the icon" }, { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." }, { "key": "style", "value": { "name": "StyleProp", "elements": [ { "name": "ViewStyle" } ], "raw": "StyleProp", "required": false }, "description": "Optional prop to control the style." } ] } }, { "name": "Omit", "elements": [ { "name": "PressableProps" }, { "name": "literal", "value": "'children'" } ], "raw": "Omit" } ] } ], "raw": "Partial" }, { "name": "union", "raw": "'iconName' | 'onPress'", "elements": [ { "name": "literal", "value": "'iconName'" }, { "name": "literal", "value": "'onPress'" } ] } ], "raw": "Omit<\n Partial,\n 'iconName' | 'onPress'\n>" }, "description": "Optional props for the close `ButtonIcon`.\nOnly used when `onClose` is provided." }, "iconProps": { "required": false, "tsType": { "name": "Omit", "elements": [ { "name": "intersection", "raw": "IconPropsShared & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n} & Omit", "elements": [ { "name": "IconPropsShared" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } }, { "name": "Omit", "elements": [ { "name": "SvgProps" }, { "name": "union", "raw": "'color' | 'name'", "elements": [ { "name": "literal", "value": "'color'" }, { "name": "literal", "value": "'name'" } ] } ], "raw": "Omit" } ] }, { "name": "union", "raw": "'name' | 'size' | 'color'", "elements": [ { "name": "literal", "value": "'name'" }, { "name": "literal", "value": "'size'" }, { "name": "literal", "value": "'color'" } ] } ], "raw": "Omit" }, "description": "" }, "severity": { "defaultValue": { "value": "'info'", "computed": false }, "required": false } } }, "stories": [ { "id": "components-banneralert--default", "name": "Default", "snippet": "const Default = () => undefined}\n onClose={() => undefined} />;" }, { "id": "components-banneralert--severity", "name": "Severity", "snippet": "const Severity = () => \n This is a neutral banner.\n \n This is an info banner.\n \n This is a success banner.\n \n This is a warning banner.\n \n This is a danger banner.\n \n;" }, { "id": "components-banneralert--title", "name": "Title", "snippet": "const Title = () => ;" }, { "id": "components-banneralert--description", "name": "Description", "snippet": "const Description = () => ;" }, { "id": "components-banneralert--children", "name": "Children", "snippet": "const Children = () => \n Children can include richer content and can be any React node.\n \n;" }, { "id": "components-banneralert--action-button-on-press", "name": "Action Button On Press", "snippet": "const ActionButtonOnPress = () => undefined}\n actionButtonProps={{\n endIconName: IconName.Arrow2Right,\n }}>Use actionButtonLabel for the text and actionButtonOnPress for interaction.;" }, { "id": "components-banneralert--action-button-layout", "name": "Action Button Layout", "snippet": "const ActionButtonLayout = () => \n undefined}\n onClose={() => undefined}\n title=\"End\"\n description=\"One-line description for short copy.\"\n actionButtonLayout={BannerBaseActionButtonLayout.End} />\n undefined}\n onClose={() => undefined}\n title=\"Below\"\n description=\"Use Below when the body is longer or wraps across multiple lines so the action stays under the content.\"\n actionButtonLayout={BannerBaseActionButtonLayout.Below} />\n;" }, { "id": "components-banneralert--on-close", "name": "On Close", "snippet": "const OnClose = () => undefined}\n actionButtonLabel={undefined}\n actionButtonOnPress={undefined}>Use the close icon to trigger onClose.;" } ], "import": "import { BannerAlert, Text } from '@metamask/design-system-react-native';\nimport { View } from 'react-native';\nimport { BannerAlertSeverity } from '.';\nimport { IconName } from '../Icon';" }, "components-bannerbase": { "id": "components-bannerbase", "name": "BannerBase", "path": "../../packages/design-system-react-native/src/components/BannerBase/BannerBase.stories.tsx", "jsDocTags": {}, "reactDocgen": { "description": "", "methods": [], "displayName": "BannerBase", "definedInFile": "/home/runner/work/metamask-design-system/metamask-design-system/packages/design-system-react-native/src/components/BannerBase/BannerBase.tsx", "actualName": "BannerBase", "exportName": "BannerBase", "props": { "titleProps": { "required": false, "tsType": { "name": "Omit", "elements": [ { "name": "Partial", "elements": [ { "name": "intersection", "raw": "TextPropsShared &\nRNTextProps & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "elements": [ { "name": "TextPropsShared" }, { "name": "RNTextProps" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } } ] } ], "raw": "Partial" }, { "name": "literal", "value": "'children'" } ], "raw": "Omit, 'children'>" }, "description": "Optional props for the title `Text` when title is a string." }, "descriptionProps": { "required": false, "tsType": { "name": "Omit", "elements": [ { "name": "Partial", "elements": [ { "name": "intersection", "raw": "TextPropsShared &\nRNTextProps & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "elements": [ { "name": "TextPropsShared" }, { "name": "RNTextProps" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } } ] } ], "raw": "Partial" }, { "name": "literal", "value": "'children'" } ], "raw": "Omit, 'children'>" }, "description": "Optional props for the description `Text` when description is a string." }, "childrenWrapperProps": { "required": false, "tsType": { "name": "Omit", "elements": [ { "name": "Partial", "elements": [ { "name": "intersection", "raw": "TextPropsShared &\nRNTextProps & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "elements": [ { "name": "TextPropsShared" }, { "name": "RNTextProps" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } } ] } ], "raw": "Partial" }, { "name": "literal", "value": "'children'" } ], "raw": "Omit, 'children'>" }, "description": "Optional props for the children wrapper `Text` when children is a string." }, "onClose": { "required": false, "tsType": { "name": "signature", "type": "function", "raw": "() => void", "signature": { "arguments": [], "return": { "name": "void" } } }, "description": "Optional callback for the close button.\nIf provided, a close button is shown." }, "closeButtonProps": { "required": false, "tsType": { "name": "Omit", "elements": [ { "name": "Partial", "elements": [ { "name": "intersection", "raw": "ButtonIconPropsShared & {\n /**\n * Optional prop to pass additional properties to the icon\n */\n iconProps?: Partial;\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n /**\n * Optional prop to control the style.\n */\n style?: StyleProp;\n} & Omit", "elements": [ { "name": "ButtonIconPropsShared" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to pass additional properties to the icon\n */\n iconProps?: Partial;\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n /**\n * Optional prop to control the style.\n */\n style?: StyleProp;\n}", "signature": { "properties": [ { "key": "iconProps", "value": { "name": "Partial", "elements": [ { "name": "intersection", "raw": "IconPropsShared & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n} & Omit", "elements": [ { "name": "IconPropsShared" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } }, { "name": "Omit", "elements": [ { "name": "SvgProps" }, { "name": "union", "raw": "'color' | 'name'", "elements": [ { "name": "literal", "value": "'color'" }, { "name": "literal", "value": "'name'" } ] } ], "raw": "Omit" } ] } ], "raw": "Partial", "required": false }, "description": "Optional prop to pass additional properties to the icon" }, { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." }, { "key": "style", "value": { "name": "StyleProp", "elements": [ { "name": "ViewStyle" } ], "raw": "StyleProp", "required": false }, "description": "Optional prop to control the style." } ] } }, { "name": "Omit", "elements": [ { "name": "PressableProps" }, { "name": "literal", "value": "'children'" } ], "raw": "Omit" } ] } ], "raw": "Partial" }, { "name": "union", "raw": "'iconName' | 'onPress'", "elements": [ { "name": "literal", "value": "'iconName'" }, { "name": "literal", "value": "'onPress'" } ] } ], "raw": "Omit<\n Partial,\n 'iconName' | 'onPress'\n>" }, "description": "Optional props for the close `ButtonIcon`.\nOnly used when `onClose` is provided." }, "actionButtonLayout": { "defaultValue": { "value": "'below'", "computed": false }, "required": false }, "backgroundColor": { "defaultValue": { "value": "'bg-default'", "computed": false }, "required": false } } }, "stories": [ { "id": "components-bannerbase--default", "name": "Default", "snippet": "const Default = () => undefined}\n onClose={() => undefined}\n closeButtonProps={{\n testID: 'banner-base-close-button',\n }}\n startAccessory={} />;" }, { "id": "components-bannerbase--title", "name": "Title", "snippet": "const Title = () => ;" }, { "id": "components-bannerbase--description", "name": "Description", "snippet": "const Description = () => ;" }, { "id": "components-bannerbase--children", "name": "Children", "snippet": "const Children = () => \n Children can include richer content and can be any React node.\n \n;" }, { "id": "components-bannerbase--action-button-on-press", "name": "Action Button On Press", "snippet": "const ActionButtonOnPress = () => undefined}\n actionButtonProps={{\n endIconName: IconName.Arrow2Right,\n }}>Use actionButtonLabel for the text and the action handler prop for interaction.;" }, { "id": "components-bannerbase--action-button-layout", "name": "Action Button Layout", "snippet": "const ActionButtonLayout = () => \n undefined}\n onClose={() => undefined}\n closeButtonProps={{\n testID: 'banner-base-close-button',\n }}\n title=\"End\"\n description=\"One-line description for short copy.\"\n actionButtonLayout={BannerBaseActionButtonLayout.End}\n startAccessory={} />\n undefined}\n onClose={() => undefined}\n closeButtonProps={{\n testID: 'banner-base-close-button',\n }}\n title=\"Below\"\n description=\"Use Below when the body is longer or wraps across multiple lines so the action stays under the content.\"\n actionButtonLayout={BannerBaseActionButtonLayout.Below}\n startAccessory={} />\n;" }, { "id": "components-bannerbase--on-close", "name": "On Close", "snippet": "const OnClose = () => undefined}\n closeButtonProps={{\n testID: 'banner-base-close-button',\n }}\n actionButtonLabel={undefined}\n actionButtonOnPress={undefined}>Use the close icon to trigger onClose.;" }, { "id": "components-bannerbase--start-accessory", "name": "Start Accessory", "snippet": "const StartAccessory = () => }>Pass any React node through startAccessory.;" } ], "import": "import { BannerBase, Icon, Text } from '@metamask/design-system-react-native';\nimport { View } from 'react-native';\nimport { IconName } from '../Icon';" }, "components-bottomsheet": { "id": "components-bottomsheet", "name": "BottomSheet", "path": "../../packages/design-system-react-native/src/components/BottomSheet/BottomSheet.stories.tsx", "jsDocTags": {}, "reactDocgen": { "description": "", "methods": [ { "name": "onCloseBottomSheet", "docblock": null, "modifiers": [], "params": [ { "name": "callback", "optional": false, "type": null } ], "returns": null }, { "name": "onOpenBottomSheet", "docblock": null, "modifiers": [], "params": [ { "name": "callback", "optional": false, "type": null } ], "returns": null } ], "displayName": "BottomSheet", "definedInFile": "/home/runner/work/metamask-design-system/metamask-design-system/packages/design-system-react-native/src/components/BottomSheet/BottomSheet.tsx", "actualName": "BottomSheet", "exportName": "BottomSheet", "props": { "goBack": { "required": false, "tsType": { "name": "signature", "type": "function", "raw": "() => void", "signature": { "arguments": [], "return": { "name": "void" } } }, "description": "Optional callback. Will be **always** invoked when provided.\nThis callback serves as a replacement for `shouldNavigateBack` prop." }, "keyboardAvoidingViewEnabled": { "required": false, "tsType": { "name": "boolean" }, "description": "Optional boolean that indicates if the KeyboardAvoidingView is enabled.\n\n@default true", "defaultValue": { "value": "true", "computed": false } }, "children": { "required": false, "tsType": { "name": "ReactReactNode", "raw": "React.ReactNode" }, "description": "Optional content to display inside the dialog." }, "isFullscreen": { "required": false, "tsType": { "name": "boolean" }, "description": "Optional prop to toggle full screen state of BottomSheetDialog.\n\n@default false", "defaultValue": { "value": "false", "computed": false } }, "isInteractable": { "required": false, "tsType": { "name": "boolean" }, "description": "Optional boolean that indicates if the sheet is swippable.\nThis affects whether or not tapping on the overlay will dismiss\nthe sheet as well, and whether the drag handle indicator is visible.\nWhen false, the drag handle is not visible.\n\n@default true", "defaultValue": { "value": "true", "computed": false } }, "onClose": { "required": false, "tsType": { "name": "signature", "type": "function", "raw": "(hasPendingAction?: boolean) => void", "signature": { "arguments": [ { "type": { "name": "boolean" }, "name": "hasPendingAction" } ], "return": { "name": "void" } } }, "description": "Optional callback that gets triggered when the sheet is closed." }, "onOpen": { "required": false, "tsType": { "name": "signature", "type": "function", "raw": "(hasPendingAction?: boolean) => void", "signature": { "arguments": [ { "type": { "name": "boolean" }, "name": "hasPendingAction" } ], "return": { "name": "void" } } }, "description": "Optional callback that gets triggered when the sheet is opened." }, "twClassName": { "required": false, "tsType": { "name": "string" }, "description": "Tailwind CSS classes for the dialog container." } } }, "stories": [ { "id": "components-bottomsheet--default", "name": "Default", "snippet": "const Default = () => ;" }, { "id": "components-bottomsheet--is-interactable", "name": "Is Interactable", "snippet": "const IsInteractable = () => ;" }, { "id": "components-bottomsheet--is-fullscreen", "name": "Is Fullscreen", "snippet": "const IsFullscreen = () => ;" }, { "id": "components-bottomsheet--imperative-control", "name": "Imperative Control", "snippet": "const ImperativeControl = () => ;" }, { "id": "components-bottomsheet--scrollable-list", "name": "Scrollable List", "snippet": "const ScrollableList = () => ;" } ], "import": "import { BottomSheet, BottomSheetFooter, BottomSheetHeader, Box, Button, Text } from '@metamask/design-system-react-native';\nimport { Pressable, View } from 'react-native';\nimport { ScrollView } from 'react-native-gesture-handler';" }, "components-bottomsheetdialog": { "id": "components-bottomsheetdialog", "name": "BottomSheetDialog", "path": "../../packages/design-system-react-native/src/components/BottomSheetDialog/BottomSheetDialog.stories.tsx", "jsDocTags": {}, "reactDocgen": { "description": "", "methods": [ { "name": "onOpenDialog", "docblock": null, "modifiers": [], "params": [ { "name": "callback", "optional": true, "type": { "name": "signature", "type": "function", "raw": "() => void", "signature": { "arguments": [], "return": { "name": "void" } } } } ], "returns": null } ], "displayName": "BottomSheetDialog", "definedInFile": "/home/runner/work/metamask-design-system/metamask-design-system/packages/design-system-react-native/src/components/BottomSheetDialog/BottomSheetDialog.tsx", "actualName": "BottomSheetDialog", "exportName": "BottomSheetDialog", "props": { "children": { "required": false, "tsType": { "name": "ReactReactNode", "raw": "React.ReactNode" }, "description": "Optional content to display inside the dialog." }, "isFullscreen": { "required": false, "tsType": { "name": "boolean" }, "description": "Optional prop to toggle full screen state of BottomSheetDialog.\n\n@default false", "defaultValue": { "value": "false", "computed": false } }, "isInteractable": { "required": false, "tsType": { "name": "boolean" }, "description": "Optional boolean that indicates if the sheet is swippable.\nThis affects whether or not tapping on the overlay will dismiss\nthe sheet as well, and whether the drag handle indicator is visible.\nWhen false, the drag handle is not visible.\n\n@default true", "defaultValue": { "value": "true", "computed": false } }, "keyboardAvoidingViewEnabled": { "required": false, "tsType": { "name": "boolean" }, "description": "Optional boolean that indicates if the KeyboardAvoidingView is enabled.\n\n@default true", "defaultValue": { "value": "true", "computed": false } }, "onClose": { "required": false, "tsType": { "name": "signature", "type": "function", "raw": "(hasPendingAction?: boolean) => void", "signature": { "arguments": [ { "type": { "name": "boolean" }, "name": "hasPendingAction" } ], "return": { "name": "void" } } }, "description": "Optional callback that gets triggered when the sheet is closed." }, "onOpen": { "required": false, "tsType": { "name": "signature", "type": "function", "raw": "(hasPendingAction?: boolean) => void", "signature": { "arguments": [ { "type": { "name": "boolean" }, "name": "hasPendingAction" } ], "return": { "name": "void" } } }, "description": "Optional callback that gets triggered when the sheet is opened." }, "twClassName": { "required": false, "tsType": { "name": "string" }, "description": "Tailwind CSS classes for the dialog container." } } }, "stories": [ { "id": "components-bottomsheetdialog--default", "name": "Default", "snippet": "const Default = () => (\n BottomSheetDialog content\n );" }, { "id": "components-bottomsheetdialog--is-fullscreen", "name": "Is Fullscreen", "snippet": "const IsFullscreen = () => (\n Fullscreen BottomSheetDialog content\n );" }, { "id": "components-bottomsheetdialog--is-interactable", "name": "Is Interactable", "snippet": "const IsInteractable = () => (\n \n Non-interactable dialog (no drag handle, no swipe to dismiss)\n \n );" }, { "id": "components-bottomsheetdialog--imperative-control", "name": "Imperative Control", "snippet": "const ImperativeControl = () => ;" } ], "import": "import { BottomSheetDialog, Box, Text } from '@metamask/design-system-react-native';\nimport { Pressable, View } from 'react-native';\nimport { Box } from '../Box';\nimport { Text } from '../Text';" }, "components-bottomsheetfooter": { "id": "components-bottomsheetfooter", "name": "BottomSheetFooter", "path": "../../packages/design-system-react-native/src/components/BottomSheetFooter/BottomSheetFooter.stories.tsx", "jsDocTags": {}, "reactDocgen": { "description": "", "methods": [], "displayName": "BottomSheetFooter", "definedInFile": "/home/runner/work/metamask-design-system/metamask-design-system/packages/design-system-react-native/src/components/BottomSheetFooter/BottomSheetFooter.tsx", "actualName": "BottomSheetFooter", "exportName": "BottomSheetFooter", "props": { "buttonsAlignment": { "required": false, "tsType": { "name": "ButtonsAlignment" }, "description": "Optional prop to control the alignment of the buttons.\n\n@default ButtonsAlignment.Horizontal", "defaultValue": { "value": "ButtonsAlignment.Horizontal", "computed": true } }, "primaryButtonProps": { "required": false, "tsType": { "name": "Omit", "elements": [ { "name": "intersection", "raw": "ButtonPropsShared &\n(ButtonTertiaryProps | ButtonPrimaryProps | ButtonSecondaryProps)", "elements": [ { "name": "ButtonPropsShared" }, { "name": "unknown" } ] }, { "name": "literal", "value": "'variant'" } ], "raw": "Omit" }, "description": "Optional props for the primary action button.\nRenders with ButtonVariant.Primary automatically.\nAppears second (rightmost in horizontal layout, bottom in vertical layout)." }, "secondaryButtonProps": { "required": false, "tsType": { "name": "Omit", "elements": [ { "name": "intersection", "raw": "ButtonPropsShared &\n(ButtonTertiaryProps | ButtonPrimaryProps | ButtonSecondaryProps)", "elements": [ { "name": "ButtonPropsShared" }, { "name": "unknown" } ] }, { "name": "literal", "value": "'variant'" } ], "raw": "Omit" }, "description": "Optional props for the secondary action button.\nRenders with ButtonVariant.Secondary automatically.\nAppears first (leftmost in horizontal layout, top in vertical layout)." }, "twClassName": { "required": false, "tsType": { "name": "string" }, "description": "Tailwind CSS classes for the footer container." } } }, "stories": [ { "id": "components-bottomsheetfooter--default", "name": "Default", "snippet": "const Default = () => console.log('Cancel pressed'),\n }}\n primaryButtonProps={{\n children: 'Submit',\n onPress: () => console.log('Submit pressed'),\n }} />;" }, { "id": "components-bottomsheetfooter--primary-only", "name": "Primary Only", "snippet": "const PrimaryOnly = () => console.log('Confirm pressed'),\n }} />;" }, { "id": "components-bottomsheetfooter--secondary-only", "name": "Secondary Only", "snippet": "const SecondaryOnly = () => console.log('Cancel pressed'),\n }} />;" }, { "id": "components-bottomsheetfooter--horizontal", "name": "Horizontal", "snippet": "const Horizontal = () => console.log('Cancel pressed'),\n }}\n primaryButtonProps={{\n children: 'Submit',\n onPress: () => console.log('Submit pressed'),\n }} />;" } ], "import": "import { BottomSheetFooter, Box, Text } from '@metamask/design-system-react-native';\nimport { ButtonsAlignment } from './BottomSheetFooter.types';" }, "components-bottomsheetheader": { "id": "components-bottomsheetheader", "name": "BottomSheetHeader", "path": "../../packages/design-system-react-native/src/components/BottomSheetHeader/BottomSheetHeader.stories.tsx", "jsDocTags": {}, "reactDocgen": { "description": "", "methods": [], "displayName": "BottomSheetHeader", "definedInFile": "/home/runner/work/metamask-design-system/metamask-design-system/packages/design-system-react-native/src/components/BottomSheetHeader/BottomSheetHeader.tsx", "actualName": "BottomSheetHeader", "exportName": "BottomSheetHeader", "props": { "onBack": { "required": false, "tsType": { "name": "signature", "type": "function", "raw": "() => void", "signature": { "arguments": [], "return": { "name": "void" } } }, "description": "Callback function triggered when the back button is pressed.\nWhen provided, a back arrow ButtonIcon is rendered as the start accessory." }, "backButtonProps": { "required": false, "tsType": { "name": "Partial", "elements": [ { "name": "Omit", "elements": [ { "name": "intersection", "raw": "ButtonIconPropsShared & {\n /**\n * Optional prop to pass additional properties to the icon\n */\n iconProps?: Partial;\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n /**\n * Optional prop to control the style.\n */\n style?: StyleProp;\n} & Omit", "elements": [ { "name": "ButtonIconPropsShared" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to pass additional properties to the icon\n */\n iconProps?: Partial;\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n /**\n * Optional prop to control the style.\n */\n style?: StyleProp;\n}", "signature": { "properties": [ { "key": "iconProps", "value": { "name": "Partial", "elements": [ { "name": "intersection", "raw": "IconPropsShared & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n} & Omit", "elements": [ { "name": "IconPropsShared" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } }, { "name": "Omit", "elements": [ { "name": "SvgProps" }, { "name": "union", "raw": "'color' | 'name'", "elements": [ { "name": "literal", "value": "'color'" }, { "name": "literal", "value": "'name'" } ] } ], "raw": "Omit" } ] } ], "raw": "Partial", "required": false }, "description": "Optional prop to pass additional properties to the icon" }, { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." }, { "key": "style", "value": { "name": "StyleProp", "elements": [ { "name": "ViewStyle" } ], "raw": "StyleProp", "required": false }, "description": "Optional prop to control the style." } ] } }, { "name": "Omit", "elements": [ { "name": "PressableProps" }, { "name": "literal", "value": "'children'" } ], "raw": "Omit" } ] }, { "name": "union", "raw": "'iconName' | 'onPress'", "elements": [ { "name": "literal", "value": "'iconName'" }, { "name": "literal", "value": "'onPress'" } ] } ], "raw": "Omit" } ], "raw": "Partial>" }, "description": "Props spread to the back ButtonIcon component for additional properties\nlike `testID` or `accessibilityLabel`. Use this for testing or accessibility purposes.\nNote: `iconName` and `onPress` are managed internally and excluded." }, "onClose": { "required": false, "tsType": { "name": "signature", "type": "function", "raw": "() => void", "signature": { "arguments": [], "return": { "name": "void" } } }, "description": "Callback function triggered when the close button is pressed.\nWhen provided, a close ButtonIcon is rendered as the end accessory." }, "closeButtonProps": { "required": false, "tsType": { "name": "Partial", "elements": [ { "name": "Omit", "elements": [ { "name": "intersection", "raw": "ButtonIconPropsShared & {\n /**\n * Optional prop to pass additional properties to the icon\n */\n iconProps?: Partial;\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n /**\n * Optional prop to control the style.\n */\n style?: StyleProp;\n} & Omit", "elements": [ { "name": "ButtonIconPropsShared" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to pass additional properties to the icon\n */\n iconProps?: Partial;\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n /**\n * Optional prop to control the style.\n */\n style?: StyleProp;\n}", "signature": { "properties": [ { "key": "iconProps", "value": { "name": "Partial", "elements": [ { "name": "intersection", "raw": "IconPropsShared & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n} & Omit", "elements": [ { "name": "IconPropsShared" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } }, { "name": "Omit", "elements": [ { "name": "SvgProps" }, { "name": "union", "raw": "'color' | 'name'", "elements": [ { "name": "literal", "value": "'color'" }, { "name": "literal", "value": "'name'" } ] } ], "raw": "Omit" } ] } ], "raw": "Partial", "required": false }, "description": "Optional prop to pass additional properties to the icon" }, { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." }, { "key": "style", "value": { "name": "StyleProp", "elements": [ { "name": "ViewStyle" } ], "raw": "StyleProp", "required": false }, "description": "Optional prop to control the style." } ] } }, { "name": "Omit", "elements": [ { "name": "PressableProps" }, { "name": "literal", "value": "'children'" } ], "raw": "Omit" } ] }, { "name": "union", "raw": "'iconName' | 'onPress'", "elements": [ { "name": "literal", "value": "'iconName'" }, { "name": "literal", "value": "'onPress'" } ] } ], "raw": "Omit" } ], "raw": "Partial>" }, "description": "Props spread to the close ButtonIcon component for additional properties\nlike `testID` or `accessibilityLabel`. Use this for testing or accessibility purposes.\nNote: `iconName` and `onPress` are managed internally and excluded." } } }, "stories": [ { "id": "components-bottomsheetheader--default", "name": "Default", "snippet": "const Default = () => Sheet title;" }, { "id": "components-bottomsheetheader--with-title", "name": "With Title", "snippet": "const WithTitle = () => (\n Centered bottom sheet title\n);" }, { "id": "components-bottomsheetheader--on-back", "name": "On Back", "snippet": "const OnBack = () => (\n null}>With back button\n);" }, { "id": "components-bottomsheetheader--on-close", "name": "On Close", "snippet": "const OnClose = () => (\n null}>\n With close button\n \n);" }, { "id": "components-bottomsheetheader--on-back-and-on-close", "name": "On Back And On Close", "snippet": "const OnBackAndOnClose = () => (\n null} onClose={() => null}>\n Both buttons\n \n);" } ], "import": "import { BottomSheetHeader, Box, Text } from '@metamask/design-system-react-native';" }, "components-bottomsheetoverlay": { "id": "components-bottomsheetoverlay", "name": "BottomSheetOverlay", "path": "../../packages/design-system-react-native/src/components/BottomSheetOverlay/BottomSheetOverlay.stories.tsx", "jsDocTags": {}, "reactDocgen": { "description": "", "methods": [], "displayName": "BottomSheetOverlay", "definedInFile": "/home/runner/work/metamask-design-system/metamask-design-system/packages/design-system-react-native/src/components/BottomSheetOverlay/BottomSheetOverlay.tsx", "actualName": "BottomSheetOverlay", "exportName": "BottomSheetOverlay", "props": { "twClassName": { "required": false, "tsType": { "name": "string" }, "description": "Tailwind CSS classes for the overlay container." }, "onPress": { "required": false, "tsType": { "name": "signature", "type": "function", "raw": "() => void", "signature": { "arguments": [], "return": { "name": "void" } } }, "description": "Callback function triggered when the overlay is pressed." }, "touchableOpacityProps": { "required": false, "tsType": { "name": "Omit", "elements": [ { "name": "TouchableOpacityProps" }, { "name": "union", "raw": "'onPress' | 'style'", "elements": [ { "name": "literal", "value": "'onPress'" }, { "name": "literal", "value": "'style'" } ] } ], "raw": "Omit" }, "description": "Props spread to the TouchableOpacity component (e.g., testID for the button).\nNote: onPress should be passed as a top-level prop, not through this object." } } }, "stories": [ { "id": "components-bottomsheetoverlay--default", "name": "Default", "snippet": "const Default = () => ;" } ], "import": "import { BottomSheetOverlay, Box, Text } from '@metamask/design-system-react-native';" }, "components-box": { "id": "components-box", "name": "Box", "path": "../../packages/design-system-react-native/src/components/Box/Box.stories.tsx", "jsDocTags": {}, "reactDocgen": { "description": "", "methods": [], "displayName": "Box", "definedInFile": "/home/runner/work/metamask-design-system/metamask-design-system/packages/design-system-react-native/src/components/Box/Box.tsx", "actualName": "Box", "exportName": "Box", "props": { "twClassName": { "required": false, "tsType": { "name": "string" }, "description": "Optional prop to add twrnc overriding classNames." } } }, "stories": [ { "id": "components-box--default", "name": "Default", "snippet": "const Default = () => \n Item 1\n Item 2\n Item 3\n;" }, { "id": "components-box--flex-direction", "name": "Flex Direction", "snippet": "const FlexDirection = () => \n \n Row\n Layout\n Items\n \n \n Row\n Reverse\n Items\n \n \n Column\n Layout\n Items\n \n \n Column\n Reverse\n Items\n \n;" }, { "id": "components-box--align-items", "name": "Align Items", "snippet": "const AlignItems = () => \n \n Start\n Aligned\n Items\n \n \n Center\n Aligned\n Items\n \n \n End\n Aligned\n Items\n \n \n Stretch\n Aligned\n Items\n \n \n Baseline\n Aligned\n Items\n \n;" }, { "id": "components-box--justify-content", "name": "Justify Content", "snippet": "const JustifyContent = () => \n \n Start\n Items\n \n \n Center\n Items\n \n \n End\n Items\n \n \n Between\n Items\n \n \n Around\n Items\n \n \n Evenly\n Items\n \n;" }, { "id": "components-box--flex-wrap", "name": "Flex Wrap", "snippet": "const FlexWrap = () => \n \n NoWrap\n Items\n Stay\n In\n Line\n \n \n Wrap\n Items\n To\n New\n Line\n \n \n WrapReverse\n Items\n Reverse\n Order\n Wrap\n \n;" }, { "id": "components-box--gap", "name": "Gap", "snippet": "const Gap = () => \n \n Gap 0\n No\n Gap\n \n \n Gap 1\n Small\n Gap\n \n \n Gap 2\n Small\n Gap\n \n \n Gap 3\n Medium\n Gap\n \n \n Gap 4\n Medium\n Gap\n \n \n Gap 5\n Large\n Gap\n \n \n Gap 6\n Large\n Gap\n \n \n Gap 7\n XL\n Gap\n \n \n Gap 8\n XL\n Gap\n \n \n Gap 9\n XXL\n Gap\n \n \n Gap 10\n XXL\n Gap\n \n \n Gap 11\n XXXL\n Gap\n \n \n Gap 12\n XXXL\n Gap\n \n;" }, { "id": "components-box--padding", "name": "Padding", "snippet": "const Padding = () => \n \n Padding 0\n \n \n Padding 1\n \n \n Padding 2\n \n \n Padding 3\n \n \n Padding 4\n \n \n Padding 5\n \n \n Padding 6\n \n \n Padding 7\n \n \n Padding 8\n \n \n Padding 9\n \n \n Padding 10\n \n \n Padding 11\n \n \n Padding 12\n \n;" }, { "id": "components-box--margin", "name": "Margin", "snippet": "const Margin = () => \n \n Container with margin examples:\n \n Margin 0\n \n \n Margin 1\n \n \n Margin 2\n \n \n Margin 3\n \n \n Margin 4\n \n \n Margin 5\n \n \n Margin 6\n \n \n Margin 7\n \n \n Margin 8\n \n \n Margin 9\n \n \n Margin 10\n \n \n Margin 11\n \n \n Margin 12\n \n \n;" }, { "id": "components-box--border-width", "name": "Border Width", "snippet": "const BorderWidth = () => \n \n Border width 0\n \n \n Border width 1\n \n \n Border width 2\n \n \n Border width 4\n \n \n Border width 8\n \n;" }, { "id": "components-box--border-color", "name": "Border Color", "snippet": "const BorderColor = () => \n \n {/* Basic Colors */}\n \n Default\n \n \n Muted\n \n {/* Primary Colors */}\n \n PrimaryDefault\n \n \n PrimaryAlternative\n \n \n PrimaryMuted\n \n \n PrimaryInverse\n \n {/* Error Colors */}\n \n ErrorDefault\n \n \n ErrorAlternative\n \n \n ErrorMuted\n \n \n ErrorInverse\n \n {/* Warning Colors */}\n \n WarningDefault\n \n \n WarningMuted\n \n \n WarningInverse\n \n {/* Success Colors */}\n \n SuccessDefault\n \n \n SuccessMuted\n \n \n SuccessInverse\n \n {/* Info Colors */}\n \n InfoDefault\n \n \n InfoMuted\n \n \n InfoInverse\n \n {/* Special Colors */}\n \n FlaskDefault\n \n \n FlaskInverse\n \n {/* Overlay Colors */}\n \n OverlayDefault\n \n \n OverlayAlternative\n \n \n OverlayInverse\n \n {/* Utility Colors */}\n \n Transparent\n \n \n;" }, { "id": "components-box--background-color", "name": "Background Color", "snippet": "const BackgroundColor = () => \n \n {/* Basic Colors */}\n \n BackgroundDefault\n \n \n BackgroundAlternative\n \n \n BackgroundMuted\n \n \n BackgroundSection\n \n \n BackgroundSubsection\n \n {/* Primary Colors */}\n \n PrimaryDefault\n \n \n PrimaryAlternative\n \n \n PrimaryMuted\n \n \n PrimaryInverse\n \n \n PrimaryDefaultPressed\n \n {/* Error Colors */}\n \n ErrorDefault\n \n \n ErrorAlternative\n \n \n ErrorMuted\n \n \n ErrorInverse\n \n {/* Warning Colors */}\n \n WarningDefault\n \n \n WarningMuted\n \n \n WarningInverse\n \n {/* Success Colors */}\n \n SuccessDefault\n \n \n SuccessMuted\n \n \n SuccessInverse\n \n {/* Info Colors */}\n \n InfoDefault\n \n \n InfoMuted\n \n \n InfoInverse\n \n {/* Special Colors */}\n \n FlaskDefault\n \n \n FlaskInverse\n \n {/* Overlay Colors */}\n \n OverlayDefault\n \n \n OverlayAlternative\n \n \n OverlayInverse\n \n {/* Utility Colors */}\n \n Inverse\n \n \n Transparent\n \n \n;" } ], "import": "import { Box, Text } from '@metamask/design-system-react-native';\nimport { ScrollView } from 'react-native';\nimport { BoxFlexDirection } from '@metamask/design-system-shared';" }, "components-boxcolumn": { "id": "components-boxcolumn", "name": "BoxColumn", "path": "../../packages/design-system-react-native/src/components/BoxColumn/BoxColumn.stories.tsx", "jsDocTags": {}, "reactDocgen": { "description": "", "methods": [], "displayName": "BoxColumn", "definedInFile": "/home/runner/work/metamask-design-system/metamask-design-system/packages/design-system-react-native/src/components/BoxColumn/BoxColumn.tsx", "actualName": "BoxColumn", "exportName": "BoxColumn", "props": { "textProps": { "required": false, "tsType": { "name": "Omit", "elements": [ { "name": "Partial", "elements": [ { "name": "intersection", "raw": "TextPropsShared &\nRNTextProps & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "elements": [ { "name": "TextPropsShared" }, { "name": "RNTextProps" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } } ] } ], "raw": "Partial" }, { "name": "literal", "value": "'children'" } ], "raw": "Omit, 'children'>" }, "description": "Optional props passed to `Text` when `children` is a string." } } }, "stories": [ { "id": "components-boxcolumn--default", "name": "Default", "snippet": "const Default = () => {\n const tw = useTailwind();\n\n return (\n \n Label with optional accessories\n \n );\n};" }, { "id": "components-boxcolumn--top-accessory", "name": "Top Accessory", "snippet": "const TopAccessory = () => {\n const tw = useTailwind();\n\n return (\n \n \n }>\n Label with optional accessories\n \n \n );\n};" }, { "id": "components-boxcolumn--bottom-accessory", "name": "Bottom Accessory", "snippet": "const BottomAccessory = () => {\n const tw = useTailwind();\n\n return (\n \n }>\n Label with optional accessories\n \n \n );\n};" }, { "id": "components-boxcolumn--top-and-bottom-accessories", "name": "Top And Bottom Accessories", "snippet": "const TopAndBottomAccessories = () => {\n const tw = useTailwind();\n\n return (\n \n }\n bottomAccessory={}>\n Label with optional accessories\n \n \n );\n};" } ], "import": "import { Box, BoxColumn, ButtonIcon } from '@metamask/design-system-react-native';\nimport { View } from 'react-native';\nimport { TextVariant, TextColor } from '../Text';" }, "components-boxrow": { "id": "components-boxrow", "name": "BoxRow", "path": "../../packages/design-system-react-native/src/components/BoxRow/BoxRow.stories.tsx", "jsDocTags": {}, "reactDocgen": { "description": "", "methods": [], "displayName": "BoxRow", "definedInFile": "/home/runner/work/metamask-design-system/metamask-design-system/packages/design-system-react-native/src/components/BoxRow/BoxRow.tsx", "actualName": "BoxRow", "exportName": "BoxRow", "props": { "textProps": { "required": false, "tsType": { "name": "Partial", "elements": [ { "name": "Omit", "elements": [ { "name": "intersection", "raw": "SensitiveTextPropsShared & TextProps", "elements": [ { "name": "SensitiveTextPropsShared" }, { "name": "intersection", "raw": "TextPropsShared &\nRNTextProps & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "elements": [ { "name": "TextPropsShared" }, { "name": "RNTextProps" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } } ] } ] }, { "name": "literal", "value": "'children'" } ], "raw": "Omit" } ], "raw": "Partial>" }, "description": "Optional props passed to `SensitiveText` when `children` is a string.\nSupports Text props plus `isHidden` / `length`." } } }, "stories": [ { "id": "components-boxrow--default", "name": "Default", "snippet": "const Default = () => {\n const tw = useTailwind();\n\n return (\n \n Label with optional accessories\n \n );\n};" }, { "id": "components-boxrow--start-accessory", "name": "Start Accessory", "snippet": "const StartAccessory = () => {\n const tw = useTailwind();\n\n return (\n \n \n }>\n Label with optional accessories\n \n \n );\n};" }, { "id": "components-boxrow--end-accessory", "name": "End Accessory", "snippet": "const EndAccessory = () => {\n const tw = useTailwind();\n\n return (\n \n }>\n Label with optional accessories\n \n \n );\n};" }, { "id": "components-boxrow--start-and-end-accessories", "name": "Start And End Accessories", "snippet": "const StartAndEndAccessories = () => {\n const tw = useTailwind();\n\n return (\n \n }\n endAccessory={}>\n Label with optional accessories\n \n \n );\n};" } ], "import": "import { Box, BoxRow, ButtonIcon } from '@metamask/design-system-react-native';\nimport { View } from 'react-native';\nimport { TextVariant, TextColor } from '../Text';" }, "components-button": { "id": "components-button", "name": "Button", "path": "../../packages/design-system-react-native/src/components/Button/Button.stories.tsx", "jsDocTags": {}, "reactDocgen": { "description": "", "methods": [], "displayName": "Button", "definedInFile": "/home/runner/work/metamask-design-system/metamask-design-system/packages/design-system-react-native/src/components/Button/Button.tsx", "actualName": "Button", "exportName": "Button" }, "stories": [ { "id": "components-button--default", "name": "Default", "snippet": "const Default = () => Sample button text;" }, { "id": "components-button--variants", "name": "Variants", "snippet": "const Variants = () => (\n \n {Object.keys(ButtonVariant).map((variantKey) => (\n \n {variantKey}\n \n ))}\n \n);" }, { "id": "components-button--sizes", "name": "Sizes", "snippet": "const Sizes = () => (\n \n {Object.keys(ButtonSize).map((sizeKey) => (\n \n {Object.keys(ButtonVariant).map((variantKey) => (\n \n {`${variantKey} ${sizeKey}`}\n \n ))}\n \n ))}\n \n);" }, { "id": "components-button--is-loading", "name": "Is Loading", "snippet": "const IsLoading = () => (\n \n \n {Object.keys(ButtonVariant).map((variantKey) => (\n \n \n {variantKey}\n \n \n {variantKey}\n \n \n ))}\n \n \n);" }, { "id": "components-button--with-start-accessory", "name": "With Start Accessory", "snippet": "const WithStartAccessory = () => (\n \n {Object.keys(ButtonVariant).map((variantKey) => (\n \n With start accessory\n \n ))}\n \n);" }, { "id": "components-button--with-end-accessory", "name": "With End Accessory", "snippet": "const WithEndAccessory = () => (\n \n {Object.keys(ButtonVariant).map((variantKey) => (\n \n With end accessory\n \n ))}\n \n);" }, { "id": "components-button--with-start-and-end-accessory", "name": "With Start And End Accessory", "snippet": "const WithStartAndEndAccessory = () => (\n \n {Object.keys(ButtonVariant).map((variantKey) => (\n \n With Start and end accessory\n \n ))}\n \n);" }, { "id": "components-button--is-disabled", "name": "Is Disabled", "snippet": "const IsDisabled = () => (\n \n {Object.keys(ButtonVariant).map((variantKey) => (\n \n isDisabled\n \n ))}\n \n);" }, { "id": "components-button--is-full-width", "name": "Is Full Width", "snippet": "const IsFullWidth = () => (\n \n {Object.keys(ButtonVariant).map((variantKey) => (\n \n isFullWidth\n \n ))}\n \n);" }, { "id": "components-button--is-danger", "name": "Is Danger", "snippet": "const IsDanger = () => (\n \n \n {Object.keys(ButtonVariant).map((variantKey) => (\n \n \n {`${variantKey}-isDanger`}\n \n \n {`${variantKey}-isDanger-isInverse`}\n \n \n ))}\n \n \n);" }, { "id": "components-button--is-inverse", "name": "Is Inverse", "snippet": "const IsInverse = () => (\n \n \n {Object.keys(ButtonVariant).map((variantKey) => (\n \n \n {`${variantKey}-isInverse`}\n \n \n {`${variantKey}-isInverse-isDanger`}\n \n \n ))}\n \n \n);" }, { "id": "components-button--with-long-text", "name": "With Long Text", "snippet": "const WithLongText = () => (\n \n {Object.keys(ButtonVariant).map((variantKey) => (\n \n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad\n minim veniam, quis nostrud exercitation ullamco laboris nisi ut\n aliquip ex ea commodo consequat. Duis aute irure dolor in\n reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n pariatur. Excepteur sint occaecat cupidatat non proident, sunt in\n culpa qui officia deserunt mollit anim id est laborum.\n \n ))}\n \n);" } ], "import": "import { Button } from '@metamask/design-system-react-native';\nimport React from 'react';\nimport { View } from 'react-native';\nimport { ButtonVariant, ButtonSize, IconName } from '@metamask/design-system-shared';" }, "components-button-variants-buttonprimary": { "id": "components-button-variants-buttonprimary", "name": "ButtonPrimary", "path": "../../packages/design-system-react-native/src/components/Button/variants/ButtonPrimary/ButtonPrimary.stories.tsx", "jsDocTags": {}, "reactDocgen": { "description": "", "methods": [], "displayName": "ButtonPrimary", "definedInFile": "/home/runner/work/metamask-design-system/metamask-design-system/packages/design-system-react-native/src/components/Button/variants/ButtonPrimary/ButtonPrimary.tsx", "actualName": "ButtonPrimary", "exportName": "ButtonPrimary", "props": { "isDanger": { "required": false, "tsType": { "name": "boolean" }, "description": "Optional prop to show the danger state of the button.\n\n@default false", "defaultValue": { "value": "false", "computed": false } }, "isInverse": { "required": false, "tsType": { "name": "boolean" }, "description": "Optional prop to show the inverse state of the button, which is reserved for buttons on colored backgrounds.\n\n@default false", "defaultValue": { "value": "false", "computed": false } }, "children": { "required": true, "tsType": { "name": "union", "raw": "React.ReactNode | string", "elements": [ { "name": "ReactReactNode", "raw": "React.ReactNode" }, { "name": "string" } ] }, "description": "Required prop for the content to be rendered within the ButtonBase" }, "textProps": { "required": false, "tsType": { "name": "Omit", "elements": [ { "name": "Partial", "elements": [ { "name": "intersection", "raw": "TextPropsShared &\nRNTextProps & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "elements": [ { "name": "TextPropsShared" }, { "name": "RNTextProps" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } } ] } ], "raw": "Partial" }, { "name": "literal", "value": "'children'" } ], "raw": "Omit, 'children'>" }, "description": "Optional props to be passed to the Text component when children is a string" }, "spinnerProps": { "required": false, "tsType": { "name": "Partial", "elements": [ { "name": "intersection", "raw": "{\n /**\n * Optional prop that sets the color of the spinner icon using predefined theme colors\n *\n * @default IconColor.IconDefault\n */\n color?: IconColor;\n /**\n * Optional props to be passed to the loadingText element\n */\n spinnerIconProps?: Partial;\n /**\n * Optional text to display on the right of the spinner, providing additional context or information about the loading state.\n */\n loadingText?: string;\n /**\n * Optional props to be passed to the loadingText element\n */\n loadingTextProps?: Omit, 'children'>;\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n} & ViewProps", "elements": [ { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop that sets the color of the spinner icon using predefined theme colors\n *\n * @default IconColor.IconDefault\n */\n color?: IconColor;\n /**\n * Optional props to be passed to the loadingText element\n */\n spinnerIconProps?: Partial;\n /**\n * Optional text to display on the right of the spinner, providing additional context or information about the loading state.\n */\n loadingText?: string;\n /**\n * Optional props to be passed to the loadingText element\n */\n loadingTextProps?: Omit, 'children'>;\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "color", "value": { "name": "IconColor", "required": false }, "description": "Optional prop that sets the color of the spinner icon using predefined theme colors\n\n@default IconColor.IconDefault" }, { "key": "spinnerIconProps", "value": { "name": "Partial", "elements": [ { "name": "intersection", "raw": "IconPropsShared & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n} & Omit", "elements": [ { "name": "IconPropsShared" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } }, { "name": "Omit", "elements": [ { "name": "SvgProps" }, { "name": "union", "raw": "'color' | 'name'", "elements": [ { "name": "literal", "value": "'color'" }, { "name": "literal", "value": "'name'" } ] } ], "raw": "Omit" } ] } ], "raw": "Partial", "required": false }, "description": "Optional props to be passed to the loadingText element" }, { "key": "loadingText", "value": { "name": "string", "required": false }, "description": "Optional text to display on the right of the spinner, providing additional context or information about the loading state." }, { "key": "loadingTextProps", "value": { "name": "Omit", "elements": [ { "name": "Partial", "elements": [ { "name": "intersection", "raw": "TextPropsShared &\nRNTextProps & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "elements": [ { "name": "TextPropsShared" }, { "name": "RNTextProps" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } } ] } ], "raw": "Partial" }, { "name": "literal", "value": "'children'" } ], "raw": "Omit, 'children'>", "required": false }, "description": "Optional props to be passed to the loadingText element" }, { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } }, { "name": "ViewProps" } ] } ], "raw": "Partial" }, "description": "Optional prop to pass additional properties to the end icon" }, "loadingWrapperProps": { "required": false, "tsType": { "name": "Omit", "elements": [ { "name": "Partial", "elements": [ { "name": "intersection", "raw": "BoxPropsShared &\nViewProps & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "elements": [ { "name": "BoxPropsShared" }, { "name": "ViewProps" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } } ] } ], "raw": "Partial" }, { "name": "literal", "value": "'children'" } ], "raw": "Omit, 'children'>" }, "description": "Props passed to the loading overlay wrapper (`Box` around the spinner).\nDefaults include `twClassName` for full-area centered layout; merge your own `twClassName` to extend.\nPass `testID` here for tests — there is no default test id on this wrapper." }, "contentWrapperProps": { "required": false, "tsType": { "name": "Omit", "elements": [ { "name": "Partial", "elements": [ { "name": "intersection", "raw": "BoxRowPropsShared &\nOmit & {\n /**\n * Optional props passed to `SensitiveText` when `children` is a string.\n * Supports Text props plus `isHidden` / `length`.\n */\n textProps?: Partial>;\n}", "elements": [ { "name": "BoxRowPropsShared" }, { "name": "Omit", "elements": [ { "name": "intersection", "raw": "BoxPropsShared &\nViewProps & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "elements": [ { "name": "BoxPropsShared" }, { "name": "ViewProps" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } } ] }, { "name": "union", "raw": "'children' | 'flexDirection'", "elements": [ { "name": "literal", "value": "'children'" }, { "name": "literal", "value": "'flexDirection'" } ] } ], "raw": "Omit" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional props passed to `SensitiveText` when `children` is a string.\n * Supports Text props plus `isHidden` / `length`.\n */\n textProps?: Partial>;\n}", "signature": { "properties": [ { "key": "textProps", "value": { "name": "Partial", "elements": [ { "name": "Omit", "elements": [ { "name": "intersection", "raw": "SensitiveTextPropsShared & TextProps", "elements": [ { "name": "SensitiveTextPropsShared" }, { "name": "intersection", "raw": "TextPropsShared &\nRNTextProps & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "elements": [ { "name": "TextPropsShared" }, { "name": "RNTextProps" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } } ] } ] }, { "name": "literal", "value": "'children'" } ], "raw": "Omit" } ], "raw": "Partial>", "required": false }, "description": "Optional props passed to `SensitiveText` when `children` is a string.\nSupports Text props plus `isHidden` / `length`." } ] } } ] } ], "raw": "Partial" }, { "name": "union", "raw": "'children' | 'textProps'", "elements": [ { "name": "literal", "value": "'children'" }, { "name": "literal", "value": "'textProps'" } ] } ], "raw": "Omit, 'children' | 'textProps'>" }, "description": "Props passed to the label row (`BoxRow`). Label typography remains controlled via `textProps` on ButtonBase." }, "startIconName": { "required": false, "tsType": { "name": "IconName" }, "description": "Optional prop to specify an icon to show at the start of the button" }, "startIconProps": { "required": false, "tsType": { "name": "Partial", "elements": [ { "name": "intersection", "raw": "IconPropsShared & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n} & Omit", "elements": [ { "name": "IconPropsShared" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } }, { "name": "Omit", "elements": [ { "name": "SvgProps" }, { "name": "union", "raw": "'color' | 'name'", "elements": [ { "name": "literal", "value": "'color'" }, { "name": "literal", "value": "'name'" } ] } ], "raw": "Omit" } ] } ], "raw": "Partial" }, "description": "Optional prop to pass additional properties to the start icon" }, "startAccessory": { "required": false, "tsType": { "name": "ReactReactNode", "raw": "React.ReactNode" }, "description": "Optional prop for a custom element to show at the start of the button" }, "endIconName": { "required": false, "tsType": { "name": "IconName" }, "description": "Optional prop to specify an icon to show at the end of the button" }, "endIconProps": { "required": false, "tsType": { "name": "Partial", "elements": [ { "name": "intersection", "raw": "IconPropsShared & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n} & Omit", "elements": [ { "name": "IconPropsShared" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } }, { "name": "Omit", "elements": [ { "name": "SvgProps" }, { "name": "union", "raw": "'color' | 'name'", "elements": [ { "name": "literal", "value": "'color'" }, { "name": "literal", "value": "'name'" } ] } ], "raw": "Omit" } ] } ], "raw": "Partial" }, "description": "Optional prop to pass additional properties to the end icon" }, "endAccessory": { "required": false, "tsType": { "name": "ReactReactNode", "raw": "React.ReactNode" }, "description": "Optional prop for a custom element to show at the end of the button" }, "twClassName": { "required": false, "tsType": { "name": "union", "raw": "string | ((pressed: boolean) => string)", "elements": [ { "name": "string" }, { "name": "unknown" } ] }, "description": "Optional prop to add twrnc overriding classNames.\nCan be a string or a function that receives pressed state and returns a string.", "defaultValue": { "value": "''", "computed": false } }, "textClassName": { "required": false, "tsType": { "name": "signature", "type": "function", "raw": "(pressed: boolean) => string", "signature": { "arguments": [ { "type": { "name": "boolean" }, "name": "pressed" } ], "return": { "name": "string" } } }, "description": "Optional prop to control text className based on pressed state." }, "iconClassName": { "required": false, "tsType": { "name": "signature", "type": "function", "raw": "(pressed: boolean) => string", "signature": { "arguments": [ { "type": { "name": "boolean" }, "name": "pressed" } ], "return": { "name": "string" } } }, "description": "Optional prop to control icon className based on pressed state." }, "style": { "required": false, "tsType": { "name": "StyleProp", "elements": [ { "name": "ViewStyle" } ], "raw": "StyleProp" }, "description": "Optional prop to control the style." }, "accessibilityLabel": { "required": false, "tsType": { "name": "string" }, "description": "Optional accessibility label to describe the button for screen readers.\nIf not provided, the button content will be used as the label." }, "accessibilityHint": { "required": false, "tsType": { "name": "string" }, "description": "Optional accessibility hint to provide additional context about the button's action.\nShould describe what happens when the button is pressed." }, "accessibilityRole": { "required": false, "tsType": { "name": "union", "raw": "'button' | 'link' | 'menuitem' | 'tab' | 'none'", "elements": [ { "name": "literal", "value": "'button'" }, { "name": "literal", "value": "'link'" }, { "name": "literal", "value": "'menuitem'" }, { "name": "literal", "value": "'tab'" }, { "name": "literal", "value": "'none'" } ] }, "description": "Optional accessibility role. Defaults to 'button'.\nCan be overridden for specific use cases." }, "accessibilityActions": { "required": false, "tsType": { "name": "Array", "elements": [ { "name": "signature", "type": "object", "raw": "{\n name: string;\n label?: string;\n}", "signature": { "properties": [ { "key": "name", "value": { "name": "string", "required": true } }, { "key": "label", "value": { "name": "string", "required": false } } ] } } ], "raw": "{\n name: string;\n label?: string;\n}[]" }, "description": "Optional accessibility actions for custom interactions.\nUse sparingly and only when default button behavior is insufficient." }, "onAccessibilityAction": { "required": false, "tsType": { "name": "signature", "type": "function", "raw": "(event: {\n nativeEvent: { actionName: string };\n}) => void", "signature": { "arguments": [ { "type": { "name": "signature", "type": "object", "raw": "{\n nativeEvent: { actionName: string };\n}", "signature": { "properties": [ { "key": "nativeEvent", "value": { "name": "signature", "type": "object", "raw": "{ actionName: string }", "signature": { "properties": [ { "key": "actionName", "value": { "name": "string", "required": true } } ] }, "required": true } } ] } }, "name": "event" } ], "return": { "name": "void" } } }, "description": "Optional callback for handling accessibility action events." }, "isLoading": { "defaultValue": { "value": "false", "computed": false }, "required": false } } }, "stories": [ { "id": "components-button-variants-buttonprimary--default", "name": "Default", "snippet": "const Default = () => Sample ButtonPrimary text;" }, { "id": "components-button-variants-buttonprimary--sizes", "name": "Sizes", "snippet": "const Sizes = () => (\n \n ButtonSize Sm\n ButtonSize Md\n \n ButtonSize Lg (Default)\n \n \n);" }, { "id": "components-button-variants-buttonprimary--is-loading", "name": "Is Loading", "snippet": "const IsLoading = () => (\n \n ButtonPrimary\n \n ButtonPrimary\n \n \n);" }, { "id": "components-button-variants-buttonprimary--with-start-accessory", "name": "With Start Accessory", "snippet": "const WithStartAccessory = () => Start accessory;" }, { "id": "components-button-variants-buttonprimary--with-end-accessory", "name": "With End Accessory", "snippet": "const WithEndAccessory = () => End accessory;" }, { "id": "components-button-variants-buttonprimary--with-start-and-end-accessory", "name": "With Start And End Accessory", "snippet": "const WithStartAndEndAccessory = () => Start and end accessory;" }, { "id": "components-button-variants-buttonprimary--is-disabled", "name": "Is Disabled", "snippet": "const IsDisabled = () => isDisabled;" }, { "id": "components-button-variants-buttonprimary--is-full-width", "name": "Is Full Width", "snippet": "const IsFullWidth = () => (\n \n ButtonPrimary\n ButtonPrimary\n \n);" }, { "id": "components-button-variants-buttonprimary--is-danger", "name": "Is Danger", "snippet": "const IsDanger = () => (\n \n ButtonPrimary\n \n ButtonPrimary\n \n \n);" }, { "id": "components-button-variants-buttonprimary--is-inverse", "name": "Is Inverse", "snippet": "const IsInverse = () => (\n \n ButtonPrimary\n \n ButtonPrimary\n \n \n);" }, { "id": "components-button-variants-buttonprimary--with-long-text", "name": "With Long Text", "snippet": "const WithLongText = () => (\n \n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod\n tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim\n veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea\n commodo consequat. Duis aute irure dolor in reprehenderit in voluptate\n velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat\n cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id\n est laborum.\n \n);" } ], "import": "import { ButtonPrimary } from '@metamask/design-system-react-native';\nimport { View } from 'react-native';\nimport { ButtonSize, IconName } from '@metamask/design-system-shared';" }, "components-button-variants-buttonsecondary": { "id": "components-button-variants-buttonsecondary", "name": "ButtonSecondary", "path": "../../packages/design-system-react-native/src/components/Button/variants/ButtonSecondary/ButtonSecondary.stories.tsx", "jsDocTags": {}, "reactDocgen": { "description": "", "methods": [], "displayName": "ButtonSecondary", "definedInFile": "/home/runner/work/metamask-design-system/metamask-design-system/packages/design-system-react-native/src/components/Button/variants/ButtonSecondary/ButtonSecondary.tsx", "actualName": "ButtonSecondary", "exportName": "ButtonSecondary", "props": { "isDanger": { "required": false, "tsType": { "name": "boolean" }, "description": "Optional prop to show the danger state of the button.\n\n@default false", "defaultValue": { "value": "false", "computed": false } }, "isInverse": { "required": false, "tsType": { "name": "boolean" }, "description": "Optional prop to show the inverse state of the button, which is reserved for buttons on colored backgrounds.\n\n@default false", "defaultValue": { "value": "false", "computed": false } }, "children": { "required": true, "tsType": { "name": "union", "raw": "React.ReactNode | string", "elements": [ { "name": "ReactReactNode", "raw": "React.ReactNode" }, { "name": "string" } ] }, "description": "Required prop for the content to be rendered within the ButtonBase" }, "textProps": { "required": false, "tsType": { "name": "Omit", "elements": [ { "name": "Partial", "elements": [ { "name": "intersection", "raw": "TextPropsShared &\nRNTextProps & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "elements": [ { "name": "TextPropsShared" }, { "name": "RNTextProps" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } } ] } ], "raw": "Partial" }, { "name": "literal", "value": "'children'" } ], "raw": "Omit, 'children'>" }, "description": "Optional props to be passed to the Text component when children is a string" }, "spinnerProps": { "required": false, "tsType": { "name": "Partial", "elements": [ { "name": "intersection", "raw": "{\n /**\n * Optional prop that sets the color of the spinner icon using predefined theme colors\n *\n * @default IconColor.IconDefault\n */\n color?: IconColor;\n /**\n * Optional props to be passed to the loadingText element\n */\n spinnerIconProps?: Partial;\n /**\n * Optional text to display on the right of the spinner, providing additional context or information about the loading state.\n */\n loadingText?: string;\n /**\n * Optional props to be passed to the loadingText element\n */\n loadingTextProps?: Omit, 'children'>;\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n} & ViewProps", "elements": [ { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop that sets the color of the spinner icon using predefined theme colors\n *\n * @default IconColor.IconDefault\n */\n color?: IconColor;\n /**\n * Optional props to be passed to the loadingText element\n */\n spinnerIconProps?: Partial;\n /**\n * Optional text to display on the right of the spinner, providing additional context or information about the loading state.\n */\n loadingText?: string;\n /**\n * Optional props to be passed to the loadingText element\n */\n loadingTextProps?: Omit, 'children'>;\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "color", "value": { "name": "IconColor", "required": false }, "description": "Optional prop that sets the color of the spinner icon using predefined theme colors\n\n@default IconColor.IconDefault" }, { "key": "spinnerIconProps", "value": { "name": "Partial", "elements": [ { "name": "intersection", "raw": "IconPropsShared & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n} & Omit", "elements": [ { "name": "IconPropsShared" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } }, { "name": "Omit", "elements": [ { "name": "SvgProps" }, { "name": "union", "raw": "'color' | 'name'", "elements": [ { "name": "literal", "value": "'color'" }, { "name": "literal", "value": "'name'" } ] } ], "raw": "Omit" } ] } ], "raw": "Partial", "required": false }, "description": "Optional props to be passed to the loadingText element" }, { "key": "loadingText", "value": { "name": "string", "required": false }, "description": "Optional text to display on the right of the spinner, providing additional context or information about the loading state." }, { "key": "loadingTextProps", "value": { "name": "Omit", "elements": [ { "name": "Partial", "elements": [ { "name": "intersection", "raw": "TextPropsShared &\nRNTextProps & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "elements": [ { "name": "TextPropsShared" }, { "name": "RNTextProps" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } } ] } ], "raw": "Partial" }, { "name": "literal", "value": "'children'" } ], "raw": "Omit, 'children'>", "required": false }, "description": "Optional props to be passed to the loadingText element" }, { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } }, { "name": "ViewProps" } ] } ], "raw": "Partial" }, "description": "Optional prop to pass additional properties to the end icon" }, "loadingWrapperProps": { "required": false, "tsType": { "name": "Omit", "elements": [ { "name": "Partial", "elements": [ { "name": "intersection", "raw": "BoxPropsShared &\nViewProps & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "elements": [ { "name": "BoxPropsShared" }, { "name": "ViewProps" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } } ] } ], "raw": "Partial" }, { "name": "literal", "value": "'children'" } ], "raw": "Omit, 'children'>" }, "description": "Props passed to the loading overlay wrapper (`Box` around the spinner).\nDefaults include `twClassName` for full-area centered layout; merge your own `twClassName` to extend.\nPass `testID` here for tests — there is no default test id on this wrapper." }, "contentWrapperProps": { "required": false, "tsType": { "name": "Omit", "elements": [ { "name": "Partial", "elements": [ { "name": "intersection", "raw": "BoxRowPropsShared &\nOmit & {\n /**\n * Optional props passed to `SensitiveText` when `children` is a string.\n * Supports Text props plus `isHidden` / `length`.\n */\n textProps?: Partial>;\n}", "elements": [ { "name": "BoxRowPropsShared" }, { "name": "Omit", "elements": [ { "name": "intersection", "raw": "BoxPropsShared &\nViewProps & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "elements": [ { "name": "BoxPropsShared" }, { "name": "ViewProps" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } } ] }, { "name": "union", "raw": "'children' | 'flexDirection'", "elements": [ { "name": "literal", "value": "'children'" }, { "name": "literal", "value": "'flexDirection'" } ] } ], "raw": "Omit" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional props passed to `SensitiveText` when `children` is a string.\n * Supports Text props plus `isHidden` / `length`.\n */\n textProps?: Partial>;\n}", "signature": { "properties": [ { "key": "textProps", "value": { "name": "Partial", "elements": [ { "name": "Omit", "elements": [ { "name": "intersection", "raw": "SensitiveTextPropsShared & TextProps", "elements": [ { "name": "SensitiveTextPropsShared" }, { "name": "intersection", "raw": "TextPropsShared &\nRNTextProps & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "elements": [ { "name": "TextPropsShared" }, { "name": "RNTextProps" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } } ] } ] }, { "name": "literal", "value": "'children'" } ], "raw": "Omit" } ], "raw": "Partial>", "required": false }, "description": "Optional props passed to `SensitiveText` when `children` is a string.\nSupports Text props plus `isHidden` / `length`." } ] } } ] } ], "raw": "Partial" }, { "name": "union", "raw": "'children' | 'textProps'", "elements": [ { "name": "literal", "value": "'children'" }, { "name": "literal", "value": "'textProps'" } ] } ], "raw": "Omit, 'children' | 'textProps'>" }, "description": "Props passed to the label row (`BoxRow`). Label typography remains controlled via `textProps` on ButtonBase." }, "startIconName": { "required": false, "tsType": { "name": "IconName" }, "description": "Optional prop to specify an icon to show at the start of the button" }, "startIconProps": { "required": false, "tsType": { "name": "Partial", "elements": [ { "name": "intersection", "raw": "IconPropsShared & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n} & Omit", "elements": [ { "name": "IconPropsShared" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } }, { "name": "Omit", "elements": [ { "name": "SvgProps" }, { "name": "union", "raw": "'color' | 'name'", "elements": [ { "name": "literal", "value": "'color'" }, { "name": "literal", "value": "'name'" } ] } ], "raw": "Omit" } ] } ], "raw": "Partial" }, "description": "Optional prop to pass additional properties to the start icon" }, "startAccessory": { "required": false, "tsType": { "name": "ReactReactNode", "raw": "React.ReactNode" }, "description": "Optional prop for a custom element to show at the start of the button" }, "endIconName": { "required": false, "tsType": { "name": "IconName" }, "description": "Optional prop to specify an icon to show at the end of the button" }, "endIconProps": { "required": false, "tsType": { "name": "Partial", "elements": [ { "name": "intersection", "raw": "IconPropsShared & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n} & Omit", "elements": [ { "name": "IconPropsShared" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } }, { "name": "Omit", "elements": [ { "name": "SvgProps" }, { "name": "union", "raw": "'color' | 'name'", "elements": [ { "name": "literal", "value": "'color'" }, { "name": "literal", "value": "'name'" } ] } ], "raw": "Omit" } ] } ], "raw": "Partial" }, "description": "Optional prop to pass additional properties to the end icon" }, "endAccessory": { "required": false, "tsType": { "name": "ReactReactNode", "raw": "React.ReactNode" }, "description": "Optional prop for a custom element to show at the end of the button" }, "twClassName": { "required": false, "tsType": { "name": "union", "raw": "string | ((pressed: boolean) => string)", "elements": [ { "name": "string" }, { "name": "unknown" } ] }, "description": "Optional prop to add twrnc overriding classNames.\nCan be a string or a function that receives pressed state and returns a string.", "defaultValue": { "value": "''", "computed": false } }, "textClassName": { "required": false, "tsType": { "name": "signature", "type": "function", "raw": "(pressed: boolean) => string", "signature": { "arguments": [ { "type": { "name": "boolean" }, "name": "pressed" } ], "return": { "name": "string" } } }, "description": "Optional prop to control text className based on pressed state." }, "iconClassName": { "required": false, "tsType": { "name": "signature", "type": "function", "raw": "(pressed: boolean) => string", "signature": { "arguments": [ { "type": { "name": "boolean" }, "name": "pressed" } ], "return": { "name": "string" } } }, "description": "Optional prop to control icon className based on pressed state." }, "style": { "required": false, "tsType": { "name": "StyleProp", "elements": [ { "name": "ViewStyle" } ], "raw": "StyleProp" }, "description": "Optional prop to control the style." }, "accessibilityLabel": { "required": false, "tsType": { "name": "string" }, "description": "Optional accessibility label to describe the button for screen readers.\nIf not provided, the button content will be used as the label." }, "accessibilityHint": { "required": false, "tsType": { "name": "string" }, "description": "Optional accessibility hint to provide additional context about the button's action.\nShould describe what happens when the button is pressed." }, "accessibilityRole": { "required": false, "tsType": { "name": "union", "raw": "'button' | 'link' | 'menuitem' | 'tab' | 'none'", "elements": [ { "name": "literal", "value": "'button'" }, { "name": "literal", "value": "'link'" }, { "name": "literal", "value": "'menuitem'" }, { "name": "literal", "value": "'tab'" }, { "name": "literal", "value": "'none'" } ] }, "description": "Optional accessibility role. Defaults to 'button'.\nCan be overridden for specific use cases." }, "accessibilityActions": { "required": false, "tsType": { "name": "Array", "elements": [ { "name": "signature", "type": "object", "raw": "{\n name: string;\n label?: string;\n}", "signature": { "properties": [ { "key": "name", "value": { "name": "string", "required": true } }, { "key": "label", "value": { "name": "string", "required": false } } ] } } ], "raw": "{\n name: string;\n label?: string;\n}[]" }, "description": "Optional accessibility actions for custom interactions.\nUse sparingly and only when default button behavior is insufficient." }, "onAccessibilityAction": { "required": false, "tsType": { "name": "signature", "type": "function", "raw": "(event: {\n nativeEvent: { actionName: string };\n}) => void", "signature": { "arguments": [ { "type": { "name": "signature", "type": "object", "raw": "{\n nativeEvent: { actionName: string };\n}", "signature": { "properties": [ { "key": "nativeEvent", "value": { "name": "signature", "type": "object", "raw": "{ actionName: string }", "signature": { "properties": [ { "key": "actionName", "value": { "name": "string", "required": true } } ] }, "required": true } } ] } }, "name": "event" } ], "return": { "name": "void" } } }, "description": "Optional callback for handling accessibility action events." }, "isLoading": { "defaultValue": { "value": "false", "computed": false }, "required": false } } }, "stories": [ { "id": "components-button-variants-buttonsecondary--default", "name": "Default", "snippet": "const Default = () => Sample ButtonSecondary text;" }, { "id": "components-button-variants-buttonsecondary--sizes", "name": "Sizes", "snippet": "const Sizes = () => (\n \n ButtonSize Sm\n ButtonSize Md\n \n ButtonSize Lg (Default)\n \n \n);" }, { "id": "components-button-variants-buttonsecondary--is-loading", "name": "Is Loading", "snippet": "const IsLoading = () => (\n \n ButtonSecondary\n \n ButtonSecondary\n \n \n);" }, { "id": "components-button-variants-buttonsecondary--with-start-accessory", "name": "With Start Accessory", "snippet": "const WithStartAccessory = () => Start accessory;" }, { "id": "components-button-variants-buttonsecondary--with-end-accessory", "name": "With End Accessory", "snippet": "const WithEndAccessory = () => End accessory;" }, { "id": "components-button-variants-buttonsecondary--with-start-and-end-accessory", "name": "With Start And End Accessory", "snippet": "const WithStartAndEndAccessory = () => Start and end accessory;" }, { "id": "components-button-variants-buttonsecondary--is-disabled", "name": "Is Disabled", "snippet": "const IsDisabled = () => isDisabled;" }, { "id": "components-button-variants-buttonsecondary--is-full-width", "name": "Is Full Width", "snippet": "const IsFullWidth = () => (\n \n ButtonSecondary\n ButtonSecondary\n \n);" }, { "id": "components-button-variants-buttonsecondary--is-danger", "name": "Is Danger", "snippet": "const IsDanger = () => (\n \n ButtonSecondary\n \n ButtonSecondary\n \n \n);" }, { "id": "components-button-variants-buttonsecondary--is-inverse", "name": "Is Inverse", "snippet": "const IsInverse = () => (\n \n ButtonSecondary\n \n ButtonSecondary\n \n \n);" }, { "id": "components-button-variants-buttonsecondary--with-long-text", "name": "With Long Text", "snippet": "const WithLongText = () => (\n \n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod\n tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim\n veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea\n commodo consequat. Duis aute irure dolor in reprehenderit in voluptate\n velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat\n cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id\n est laborum.\n \n);" } ], "import": "import { ButtonSecondary } from '@metamask/design-system-react-native';\nimport { View } from 'react-native';\nimport { ButtonSize, IconName } from '@metamask/design-system-shared';" }, "components-button-variants-buttontertiary": { "id": "components-button-variants-buttontertiary", "name": "ButtonTertiary", "path": "../../packages/design-system-react-native/src/components/Button/variants/ButtonTertiary/ButtonTertiary.stories.tsx", "jsDocTags": {}, "reactDocgen": { "description": "", "methods": [], "displayName": "ButtonTertiary", "definedInFile": "/home/runner/work/metamask-design-system/metamask-design-system/packages/design-system-react-native/src/components/Button/variants/ButtonTertiary/ButtonTertiary.tsx", "actualName": "ButtonTertiary", "exportName": "ButtonTertiary", "props": { "isDanger": { "required": false, "tsType": { "name": "boolean" }, "description": "Optional prop to show the danger state of the button.\n\n@default false", "defaultValue": { "value": "false", "computed": false } }, "isInverse": { "required": false, "tsType": { "name": "boolean" }, "description": "Optional prop to show the inverse state of the button, which is reserved for buttons on colored backgrounds.\n\n@default false", "defaultValue": { "value": "false", "computed": false } }, "children": { "required": true, "tsType": { "name": "union", "raw": "React.ReactNode | string", "elements": [ { "name": "ReactReactNode", "raw": "React.ReactNode" }, { "name": "string" } ] }, "description": "Required prop for the content to be rendered within the ButtonBase" }, "textProps": { "required": false, "tsType": { "name": "Omit", "elements": [ { "name": "Partial", "elements": [ { "name": "intersection", "raw": "TextPropsShared &\nRNTextProps & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "elements": [ { "name": "TextPropsShared" }, { "name": "RNTextProps" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } } ] } ], "raw": "Partial" }, { "name": "literal", "value": "'children'" } ], "raw": "Omit, 'children'>" }, "description": "Optional props to be passed to the Text component when children is a string" }, "spinnerProps": { "required": false, "tsType": { "name": "Partial", "elements": [ { "name": "intersection", "raw": "{\n /**\n * Optional prop that sets the color of the spinner icon using predefined theme colors\n *\n * @default IconColor.IconDefault\n */\n color?: IconColor;\n /**\n * Optional props to be passed to the loadingText element\n */\n spinnerIconProps?: Partial;\n /**\n * Optional text to display on the right of the spinner, providing additional context or information about the loading state.\n */\n loadingText?: string;\n /**\n * Optional props to be passed to the loadingText element\n */\n loadingTextProps?: Omit, 'children'>;\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n} & ViewProps", "elements": [ { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop that sets the color of the spinner icon using predefined theme colors\n *\n * @default IconColor.IconDefault\n */\n color?: IconColor;\n /**\n * Optional props to be passed to the loadingText element\n */\n spinnerIconProps?: Partial;\n /**\n * Optional text to display on the right of the spinner, providing additional context or information about the loading state.\n */\n loadingText?: string;\n /**\n * Optional props to be passed to the loadingText element\n */\n loadingTextProps?: Omit, 'children'>;\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "color", "value": { "name": "IconColor", "required": false }, "description": "Optional prop that sets the color of the spinner icon using predefined theme colors\n\n@default IconColor.IconDefault" }, { "key": "spinnerIconProps", "value": { "name": "Partial", "elements": [ { "name": "intersection", "raw": "IconPropsShared & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n} & Omit", "elements": [ { "name": "IconPropsShared" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } }, { "name": "Omit", "elements": [ { "name": "SvgProps" }, { "name": "union", "raw": "'color' | 'name'", "elements": [ { "name": "literal", "value": "'color'" }, { "name": "literal", "value": "'name'" } ] } ], "raw": "Omit" } ] } ], "raw": "Partial", "required": false }, "description": "Optional props to be passed to the loadingText element" }, { "key": "loadingText", "value": { "name": "string", "required": false }, "description": "Optional text to display on the right of the spinner, providing additional context or information about the loading state." }, { "key": "loadingTextProps", "value": { "name": "Omit", "elements": [ { "name": "Partial", "elements": [ { "name": "intersection", "raw": "TextPropsShared &\nRNTextProps & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "elements": [ { "name": "TextPropsShared" }, { "name": "RNTextProps" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } } ] } ], "raw": "Partial" }, { "name": "literal", "value": "'children'" } ], "raw": "Omit, 'children'>", "required": false }, "description": "Optional props to be passed to the loadingText element" }, { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } }, { "name": "ViewProps" } ] } ], "raw": "Partial" }, "description": "Optional prop to pass additional properties to the end icon" }, "loadingWrapperProps": { "required": false, "tsType": { "name": "Omit", "elements": [ { "name": "Partial", "elements": [ { "name": "intersection", "raw": "BoxPropsShared &\nViewProps & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "elements": [ { "name": "BoxPropsShared" }, { "name": "ViewProps" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } } ] } ], "raw": "Partial" }, { "name": "literal", "value": "'children'" } ], "raw": "Omit, 'children'>" }, "description": "Props passed to the loading overlay wrapper (`Box` around the spinner).\nDefaults include `twClassName` for full-area centered layout; merge your own `twClassName` to extend.\nPass `testID` here for tests — there is no default test id on this wrapper." }, "contentWrapperProps": { "required": false, "tsType": { "name": "Omit", "elements": [ { "name": "Partial", "elements": [ { "name": "intersection", "raw": "BoxRowPropsShared &\nOmit & {\n /**\n * Optional props passed to `SensitiveText` when `children` is a string.\n * Supports Text props plus `isHidden` / `length`.\n */\n textProps?: Partial>;\n}", "elements": [ { "name": "BoxRowPropsShared" }, { "name": "Omit", "elements": [ { "name": "intersection", "raw": "BoxPropsShared &\nViewProps & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "elements": [ { "name": "BoxPropsShared" }, { "name": "ViewProps" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } } ] }, { "name": "union", "raw": "'children' | 'flexDirection'", "elements": [ { "name": "literal", "value": "'children'" }, { "name": "literal", "value": "'flexDirection'" } ] } ], "raw": "Omit" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional props passed to `SensitiveText` when `children` is a string.\n * Supports Text props plus `isHidden` / `length`.\n */\n textProps?: Partial>;\n}", "signature": { "properties": [ { "key": "textProps", "value": { "name": "Partial", "elements": [ { "name": "Omit", "elements": [ { "name": "intersection", "raw": "SensitiveTextPropsShared & TextProps", "elements": [ { "name": "SensitiveTextPropsShared" }, { "name": "intersection", "raw": "TextPropsShared &\nRNTextProps & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "elements": [ { "name": "TextPropsShared" }, { "name": "RNTextProps" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } } ] } ] }, { "name": "literal", "value": "'children'" } ], "raw": "Omit" } ], "raw": "Partial>", "required": false }, "description": "Optional props passed to `SensitiveText` when `children` is a string.\nSupports Text props plus `isHidden` / `length`." } ] } } ] } ], "raw": "Partial" }, { "name": "union", "raw": "'children' | 'textProps'", "elements": [ { "name": "literal", "value": "'children'" }, { "name": "literal", "value": "'textProps'" } ] } ], "raw": "Omit, 'children' | 'textProps'>" }, "description": "Props passed to the label row (`BoxRow`). Label typography remains controlled via `textProps` on ButtonBase." }, "startIconName": { "required": false, "tsType": { "name": "IconName" }, "description": "Optional prop to specify an icon to show at the start of the button" }, "startIconProps": { "required": false, "tsType": { "name": "Partial", "elements": [ { "name": "intersection", "raw": "IconPropsShared & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n} & Omit", "elements": [ { "name": "IconPropsShared" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } }, { "name": "Omit", "elements": [ { "name": "SvgProps" }, { "name": "union", "raw": "'color' | 'name'", "elements": [ { "name": "literal", "value": "'color'" }, { "name": "literal", "value": "'name'" } ] } ], "raw": "Omit" } ] } ], "raw": "Partial" }, "description": "Optional prop to pass additional properties to the start icon" }, "startAccessory": { "required": false, "tsType": { "name": "ReactReactNode", "raw": "React.ReactNode" }, "description": "Optional prop for a custom element to show at the start of the button" }, "endIconName": { "required": false, "tsType": { "name": "IconName" }, "description": "Optional prop to specify an icon to show at the end of the button" }, "endIconProps": { "required": false, "tsType": { "name": "Partial", "elements": [ { "name": "intersection", "raw": "IconPropsShared & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n} & Omit", "elements": [ { "name": "IconPropsShared" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } }, { "name": "Omit", "elements": [ { "name": "SvgProps" }, { "name": "union", "raw": "'color' | 'name'", "elements": [ { "name": "literal", "value": "'color'" }, { "name": "literal", "value": "'name'" } ] } ], "raw": "Omit" } ] } ], "raw": "Partial" }, "description": "Optional prop to pass additional properties to the end icon" }, "endAccessory": { "required": false, "tsType": { "name": "ReactReactNode", "raw": "React.ReactNode" }, "description": "Optional prop for a custom element to show at the end of the button" }, "twClassName": { "required": false, "tsType": { "name": "union", "raw": "string | ((pressed: boolean) => string)", "elements": [ { "name": "string" }, { "name": "unknown" } ] }, "description": "Optional prop to add twrnc overriding classNames.\nCan be a string or a function that receives pressed state and returns a string.", "defaultValue": { "value": "''", "computed": false } }, "textClassName": { "required": false, "tsType": { "name": "signature", "type": "function", "raw": "(pressed: boolean) => string", "signature": { "arguments": [ { "type": { "name": "boolean" }, "name": "pressed" } ], "return": { "name": "string" } } }, "description": "Optional prop to control text className based on pressed state." }, "iconClassName": { "required": false, "tsType": { "name": "signature", "type": "function", "raw": "(pressed: boolean) => string", "signature": { "arguments": [ { "type": { "name": "boolean" }, "name": "pressed" } ], "return": { "name": "string" } } }, "description": "Optional prop to control icon className based on pressed state." }, "style": { "required": false, "tsType": { "name": "StyleProp", "elements": [ { "name": "ViewStyle" } ], "raw": "StyleProp" }, "description": "Optional prop to control the style." }, "accessibilityLabel": { "required": false, "tsType": { "name": "string" }, "description": "Optional accessibility label to describe the button for screen readers.\nIf not provided, the button content will be used as the label." }, "accessibilityHint": { "required": false, "tsType": { "name": "string" }, "description": "Optional accessibility hint to provide additional context about the button's action.\nShould describe what happens when the button is pressed." }, "accessibilityRole": { "required": false, "tsType": { "name": "union", "raw": "'button' | 'link' | 'menuitem' | 'tab' | 'none'", "elements": [ { "name": "literal", "value": "'button'" }, { "name": "literal", "value": "'link'" }, { "name": "literal", "value": "'menuitem'" }, { "name": "literal", "value": "'tab'" }, { "name": "literal", "value": "'none'" } ] }, "description": "Optional accessibility role. Defaults to 'button'.\nCan be overridden for specific use cases." }, "accessibilityActions": { "required": false, "tsType": { "name": "Array", "elements": [ { "name": "signature", "type": "object", "raw": "{\n name: string;\n label?: string;\n}", "signature": { "properties": [ { "key": "name", "value": { "name": "string", "required": true } }, { "key": "label", "value": { "name": "string", "required": false } } ] } } ], "raw": "{\n name: string;\n label?: string;\n}[]" }, "description": "Optional accessibility actions for custom interactions.\nUse sparingly and only when default button behavior is insufficient." }, "onAccessibilityAction": { "required": false, "tsType": { "name": "signature", "type": "function", "raw": "(event: {\n nativeEvent: { actionName: string };\n}) => void", "signature": { "arguments": [ { "type": { "name": "signature", "type": "object", "raw": "{\n nativeEvent: { actionName: string };\n}", "signature": { "properties": [ { "key": "nativeEvent", "value": { "name": "signature", "type": "object", "raw": "{ actionName: string }", "signature": { "properties": [ { "key": "actionName", "value": { "name": "string", "required": true } } ] }, "required": true } } ] } }, "name": "event" } ], "return": { "name": "void" } } }, "description": "Optional callback for handling accessibility action events." }, "isLoading": { "defaultValue": { "value": "false", "computed": false }, "required": false } } }, "stories": [ { "id": "components-button-variants-buttontertiary--default", "name": "Default", "snippet": "const Default = () => Sample ButtonTertiary text;" }, { "id": "components-button-variants-buttontertiary--sizes", "name": "Sizes", "snippet": "const Sizes = () => (\n \n ButtonSize Sm\n ButtonSize Md\n \n ButtonSize Lg (Default)\n \n \n);" }, { "id": "components-button-variants-buttontertiary--is-loading", "name": "Is Loading", "snippet": "const IsLoading = () => (\n \n ButtonTertiary\n \n ButtonTertiary\n \n \n);" }, { "id": "components-button-variants-buttontertiary--with-start-accessory", "name": "With Start Accessory", "snippet": "const WithStartAccessory = () => Start accessory;" }, { "id": "components-button-variants-buttontertiary--with-end-accessory", "name": "With End Accessory", "snippet": "const WithEndAccessory = () => End accessory;" }, { "id": "components-button-variants-buttontertiary--with-start-and-end-accessory", "name": "With Start And End Accessory", "snippet": "const WithStartAndEndAccessory = () => Start and end accessory;" }, { "id": "components-button-variants-buttontertiary--is-disabled", "name": "Is Disabled", "snippet": "const IsDisabled = () => isDisabled;" }, { "id": "components-button-variants-buttontertiary--is-full-width", "name": "Is Full Width", "snippet": "const IsFullWidth = () => (\n \n ButtonTertiary\n ButtonTertiary\n \n);" }, { "id": "components-button-variants-buttontertiary--is-danger", "name": "Is Danger", "snippet": "const IsDanger = () => (\n \n ButtonTertiary\n \n ButtonTertiary\n \n \n);" }, { "id": "components-button-variants-buttontertiary--is-inverse", "name": "Is Inverse", "snippet": "const IsInverse = () => (\n \n ButtonTertiary\n \n ButtonTertiary\n \n \n);" }, { "id": "components-button-variants-buttontertiary--with-long-text", "name": "With Long Text", "snippet": "const WithLongText = () => (\n \n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod\n tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim\n veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea\n commodo consequat. Duis aute irure dolor in reprehenderit in voluptate\n velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat\n cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id\n est laborum.\n \n);" } ], "import": "import { ButtonTertiary } from '@metamask/design-system-react-native';\nimport { View } from 'react-native';\nimport { ButtonSize, IconName } from '@metamask/design-system-shared';" }, "components-buttonbase": { "id": "components-buttonbase", "name": "ButtonBase", "path": "../../packages/design-system-react-native/src/components/ButtonBase/ButtonBase.stories.tsx", "jsDocTags": {}, "reactDocgen": { "description": "", "methods": [], "displayName": "ButtonBase", "definedInFile": "/home/runner/work/metamask-design-system/metamask-design-system/packages/design-system-react-native/src/components/ButtonBase/ButtonBase.tsx", "actualName": "ButtonBase", "exportName": "ButtonBase", "props": { "children": { "required": true, "tsType": { "name": "union", "raw": "React.ReactNode | string", "elements": [ { "name": "ReactReactNode", "raw": "React.ReactNode" }, { "name": "string" } ] }, "description": "Required prop for the content to be rendered within the ButtonBase" }, "textProps": { "required": false, "tsType": { "name": "Omit", "elements": [ { "name": "Partial", "elements": [ { "name": "intersection", "raw": "TextPropsShared &\nRNTextProps & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "elements": [ { "name": "TextPropsShared" }, { "name": "RNTextProps" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } } ] } ], "raw": "Partial" }, { "name": "literal", "value": "'children'" } ], "raw": "Omit, 'children'>" }, "description": "Optional props to be passed to the Text component when children is a string" }, "spinnerProps": { "required": false, "tsType": { "name": "Partial", "elements": [ { "name": "intersection", "raw": "{\n /**\n * Optional prop that sets the color of the spinner icon using predefined theme colors\n *\n * @default IconColor.IconDefault\n */\n color?: IconColor;\n /**\n * Optional props to be passed to the loadingText element\n */\n spinnerIconProps?: Partial;\n /**\n * Optional text to display on the right of the spinner, providing additional context or information about the loading state.\n */\n loadingText?: string;\n /**\n * Optional props to be passed to the loadingText element\n */\n loadingTextProps?: Omit, 'children'>;\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n} & ViewProps", "elements": [ { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop that sets the color of the spinner icon using predefined theme colors\n *\n * @default IconColor.IconDefault\n */\n color?: IconColor;\n /**\n * Optional props to be passed to the loadingText element\n */\n spinnerIconProps?: Partial;\n /**\n * Optional text to display on the right of the spinner, providing additional context or information about the loading state.\n */\n loadingText?: string;\n /**\n * Optional props to be passed to the loadingText element\n */\n loadingTextProps?: Omit, 'children'>;\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "color", "value": { "name": "IconColor", "required": false }, "description": "Optional prop that sets the color of the spinner icon using predefined theme colors\n\n@default IconColor.IconDefault" }, { "key": "spinnerIconProps", "value": { "name": "Partial", "elements": [ { "name": "intersection", "raw": "IconPropsShared & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n} & Omit", "elements": [ { "name": "IconPropsShared" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } }, { "name": "Omit", "elements": [ { "name": "SvgProps" }, { "name": "union", "raw": "'color' | 'name'", "elements": [ { "name": "literal", "value": "'color'" }, { "name": "literal", "value": "'name'" } ] } ], "raw": "Omit" } ] } ], "raw": "Partial", "required": false }, "description": "Optional props to be passed to the loadingText element" }, { "key": "loadingText", "value": { "name": "string", "required": false }, "description": "Optional text to display on the right of the spinner, providing additional context or information about the loading state." }, { "key": "loadingTextProps", "value": { "name": "Omit", "elements": [ { "name": "Partial", "elements": [ { "name": "intersection", "raw": "TextPropsShared &\nRNTextProps & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "elements": [ { "name": "TextPropsShared" }, { "name": "RNTextProps" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } } ] } ], "raw": "Partial" }, { "name": "literal", "value": "'children'" } ], "raw": "Omit, 'children'>", "required": false }, "description": "Optional props to be passed to the loadingText element" }, { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } }, { "name": "ViewProps" } ] } ], "raw": "Partial" }, "description": "Optional prop to pass additional properties to the end icon" }, "loadingWrapperProps": { "required": false, "tsType": { "name": "Omit", "elements": [ { "name": "Partial", "elements": [ { "name": "intersection", "raw": "BoxPropsShared &\nViewProps & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "elements": [ { "name": "BoxPropsShared" }, { "name": "ViewProps" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } } ] } ], "raw": "Partial" }, { "name": "literal", "value": "'children'" } ], "raw": "Omit, 'children'>" }, "description": "Props passed to the loading overlay wrapper (`Box` around the spinner).\nDefaults include `twClassName` for full-area centered layout; merge your own `twClassName` to extend.\nPass `testID` here for tests — there is no default test id on this wrapper." }, "contentWrapperProps": { "required": false, "tsType": { "name": "Omit", "elements": [ { "name": "Partial", "elements": [ { "name": "intersection", "raw": "BoxRowPropsShared &\nOmit & {\n /**\n * Optional props passed to `SensitiveText` when `children` is a string.\n * Supports Text props plus `isHidden` / `length`.\n */\n textProps?: Partial>;\n}", "elements": [ { "name": "BoxRowPropsShared" }, { "name": "Omit", "elements": [ { "name": "intersection", "raw": "BoxPropsShared &\nViewProps & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "elements": [ { "name": "BoxPropsShared" }, { "name": "ViewProps" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } } ] }, { "name": "union", "raw": "'children' | 'flexDirection'", "elements": [ { "name": "literal", "value": "'children'" }, { "name": "literal", "value": "'flexDirection'" } ] } ], "raw": "Omit" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional props passed to `SensitiveText` when `children` is a string.\n * Supports Text props plus `isHidden` / `length`.\n */\n textProps?: Partial>;\n}", "signature": { "properties": [ { "key": "textProps", "value": { "name": "Partial", "elements": [ { "name": "Omit", "elements": [ { "name": "intersection", "raw": "SensitiveTextPropsShared & TextProps", "elements": [ { "name": "SensitiveTextPropsShared" }, { "name": "intersection", "raw": "TextPropsShared &\nRNTextProps & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "elements": [ { "name": "TextPropsShared" }, { "name": "RNTextProps" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } } ] } ] }, { "name": "literal", "value": "'children'" } ], "raw": "Omit" } ], "raw": "Partial>", "required": false }, "description": "Optional props passed to `SensitiveText` when `children` is a string.\nSupports Text props plus `isHidden` / `length`." } ] } } ] } ], "raw": "Partial" }, { "name": "union", "raw": "'children' | 'textProps'", "elements": [ { "name": "literal", "value": "'children'" }, { "name": "literal", "value": "'textProps'" } ] } ], "raw": "Omit, 'children' | 'textProps'>" }, "description": "Props passed to the label row (`BoxRow`). Label typography remains controlled via `textProps` on ButtonBase." }, "startIconName": { "required": false, "tsType": { "name": "IconName" }, "description": "Optional prop to specify an icon to show at the start of the button" }, "startIconProps": { "required": false, "tsType": { "name": "Partial", "elements": [ { "name": "intersection", "raw": "IconPropsShared & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n} & Omit", "elements": [ { "name": "IconPropsShared" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } }, { "name": "Omit", "elements": [ { "name": "SvgProps" }, { "name": "union", "raw": "'color' | 'name'", "elements": [ { "name": "literal", "value": "'color'" }, { "name": "literal", "value": "'name'" } ] } ], "raw": "Omit" } ] } ], "raw": "Partial" }, "description": "Optional prop to pass additional properties to the start icon" }, "startAccessory": { "required": false, "tsType": { "name": "ReactReactNode", "raw": "React.ReactNode" }, "description": "Optional prop for a custom element to show at the start of the button" }, "endIconName": { "required": false, "tsType": { "name": "IconName" }, "description": "Optional prop to specify an icon to show at the end of the button" }, "endIconProps": { "required": false, "tsType": { "name": "Partial", "elements": [ { "name": "intersection", "raw": "IconPropsShared & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n} & Omit", "elements": [ { "name": "IconPropsShared" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } }, { "name": "Omit", "elements": [ { "name": "SvgProps" }, { "name": "union", "raw": "'color' | 'name'", "elements": [ { "name": "literal", "value": "'color'" }, { "name": "literal", "value": "'name'" } ] } ], "raw": "Omit" } ] } ], "raw": "Partial" }, "description": "Optional prop to pass additional properties to the end icon" }, "endAccessory": { "required": false, "tsType": { "name": "ReactReactNode", "raw": "React.ReactNode" }, "description": "Optional prop for a custom element to show at the end of the button" }, "twClassName": { "required": false, "tsType": { "name": "union", "raw": "string | ((pressed: boolean) => string)", "elements": [ { "name": "string" }, { "name": "unknown" } ] }, "description": "Optional prop to add twrnc overriding classNames.\nCan be a string or a function that receives pressed state and returns a string." }, "textClassName": { "required": false, "tsType": { "name": "signature", "type": "function", "raw": "(pressed: boolean) => string", "signature": { "arguments": [ { "type": { "name": "boolean" }, "name": "pressed" } ], "return": { "name": "string" } } }, "description": "Optional prop to control text className based on pressed state." }, "iconClassName": { "required": false, "tsType": { "name": "signature", "type": "function", "raw": "(pressed: boolean) => string", "signature": { "arguments": [ { "type": { "name": "boolean" }, "name": "pressed" } ], "return": { "name": "string" } } }, "description": "Optional prop to control icon className based on pressed state." }, "style": { "required": false, "tsType": { "name": "StyleProp", "elements": [ { "name": "ViewStyle" } ], "raw": "StyleProp" }, "description": "Optional prop to control the style." }, "accessibilityLabel": { "required": false, "tsType": { "name": "string" }, "description": "Optional accessibility label to describe the button for screen readers.\nIf not provided, the button content will be used as the label." }, "accessibilityHint": { "required": false, "tsType": { "name": "string" }, "description": "Optional accessibility hint to provide additional context about the button's action.\nShould describe what happens when the button is pressed." }, "accessibilityRole": { "required": false, "tsType": { "name": "union", "raw": "'button' | 'link' | 'menuitem' | 'tab' | 'none'", "elements": [ { "name": "literal", "value": "'button'" }, { "name": "literal", "value": "'link'" }, { "name": "literal", "value": "'menuitem'" }, { "name": "literal", "value": "'tab'" }, { "name": "literal", "value": "'none'" } ] }, "description": "Optional accessibility role. Defaults to 'button'.\nCan be overridden for specific use cases.", "defaultValue": { "value": "'button'", "computed": false } }, "accessibilityActions": { "required": false, "tsType": { "name": "Array", "elements": [ { "name": "signature", "type": "object", "raw": "{\n name: string;\n label?: string;\n}", "signature": { "properties": [ { "key": "name", "value": { "name": "string", "required": true } }, { "key": "label", "value": { "name": "string", "required": false } } ] } } ], "raw": "{\n name: string;\n label?: string;\n}[]" }, "description": "Optional accessibility actions for custom interactions.\nUse sparingly and only when default button behavior is insufficient." }, "onAccessibilityAction": { "required": false, "tsType": { "name": "signature", "type": "function", "raw": "(event: {\n nativeEvent: { actionName: string };\n}) => void", "signature": { "arguments": [ { "type": { "name": "signature", "type": "object", "raw": "{\n nativeEvent: { actionName: string };\n}", "signature": { "properties": [ { "key": "nativeEvent", "value": { "name": "signature", "type": "object", "raw": "{ actionName: string }", "signature": { "properties": [ { "key": "actionName", "value": { "name": "string", "required": true } } ] }, "required": true } } ] } }, "name": "event" } ], "return": { "name": "void" } } }, "description": "Optional callback for handling accessibility action events." }, "size": { "defaultValue": { "value": "'lg'", "computed": false }, "required": false } } }, "stories": [ { "id": "components-buttonbase--default", "name": "Default", "snippet": "const Default = () => ButtonBase;" }, { "id": "components-buttonbase--size", "name": "Size", "snippet": "const Size = () => \n ButtonBaseSize Sm\n \n ButtonBaseSize Md\n \n ButtonBaseSize Lg (Default)\n \n;" }, { "id": "components-buttonbase--spacing", "name": "Spacing", "snippet": "const Spacing = () => \n \n Label only\n Every size uses the same 16px horizontal padding when no icons are\n shown.\n \n \n Small\n \n Medium\n \n Large\n \n \n \n \n Start icon\n Leading inset fits the icon; 4px gap before the label. Large buttons\n use a medium icon; medium and small use a small icon.\n \n \n Small\n \n Medium\n \n Large\n \n \n \n \n End icon\n \n Small\n \n Medium\n \n Large\n \n \n \n \n Start and end icons\n \n Small\n \n Medium\n \n Large\n \n \n \n \n Start and end accessories\n Custom nodes use the same padding and gap as named icons.\n \n \n \n →\n \n }\n endAccessory={\n \n ←\n \n }>Small\n \n \n →\n \n }\n endAccessory={\n \n ←\n \n }>Medium\n \n \n →\n \n }\n endAccessory={\n \n ←\n \n }>Large\n \n \n \n;" }, { "id": "components-buttonbase--is-loading", "name": "Is Loading", "snippet": "const IsLoading = () => \n ButtonBase\n \n ButtonBase\n \n;" }, { "id": "components-buttonbase--start-icon-name", "name": "Start Icon Name", "snippet": "const StartIconName = () => ButtonBase\n ;" }, { "id": "components-buttonbase--end-icon-name", "name": "End Icon Name", "snippet": "const EndIconName = () => ButtonBase\n ;" }, { "id": "components-buttonbase--is-disabled", "name": "Is Disabled", "snippet": "const IsDisabled = () => ButtonBase\n ;" }, { "id": "components-buttonbase--is-full-width", "name": "Is Full Width", "snippet": "const IsFullWidth = () => \n ButtonBase\n ButtonBase\n \n;" }, { "id": "components-buttonbase--long-text", "name": "Long Text", "snippet": "const LongText = () => \n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod\n tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim\n veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea\n commodo consequat. Duis aute irure dolor in reprehenderit in voluptate\n velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n occaecat cupidatat non proident, sunt in culpa qui officia deserunt\n mollit anim id est laborum.\n \n;" }, { "id": "components-buttonbase--flex-layout", "name": "Flex Layout", "snippet": "const FlexLayout = () => \n Lorem ipsum\n \n Lorem ipsum\n \n;" } ], "import": "import { Box, ButtonBase, Text } from '@metamask/design-system-react-native';\nimport { ButtonBaseSize } from '@metamask/design-system-shared';" }, "components-buttonfilter": { "id": "components-buttonfilter", "name": "ButtonFilter", "path": "../../packages/design-system-react-native/src/components/ButtonFilter/ButtonFilter.stories.tsx", "jsDocTags": { "deprecated": [ "Use `FilterButton` instead. This component will be removed in a future major version of the design system." ], "param": [ "props - Component props.", "props.isActive - Whether the filter is in the active state.", "props.twClassName - Tailwind override classes for the container.", "props.textProps - Props forwarded to the internal text element.", "props.style - Style overrides applied to the container." ], "returns": [ "The rendered filter button element." ] }, "description": "", "reactDocgen": { "description": "@deprecated Use `FilterButton` instead. This component will be removed\nin a future major version of the design system.\n\n@param props - Component props.\n@param props.isActive - Whether the filter is in the active state.\n@param props.twClassName - Tailwind override classes for the container.\n@param props.textProps - Props forwarded to the internal text element.\n@param props.style - Style overrides applied to the container.\n@returns The rendered filter button element.", "methods": [], "displayName": "ButtonFilter", "definedInFile": "/home/runner/work/metamask-design-system/metamask-design-system/packages/design-system-react-native/src/components/ButtonFilter/ButtonFilter.tsx", "actualName": "ButtonFilter", "exportName": "ButtonFilter", "props": { "twClassName": { "required": false, "tsType": { "name": "string" }, "description": "Optional prop to add twrnc overriding classNames." } } }, "stories": [ { "id": "components-buttonfilter--default", "name": "Default", "snippet": "const Default = () => Filter;" }, { "id": "components-buttonfilter--is-active", "name": "Is Active", "snippet": "const IsActive = () => Filter;" }, { "id": "components-buttonfilter--button-filter-group", "name": "Button Filter Group", "snippet": "const ButtonFilterGroup = () => Filter;" } ], "import": "import { Box, ButtonFilter, Text } from '@metamask/design-system-react-native';" }, "components-buttonhero": { "id": "components-buttonhero", "name": "ButtonHero", "path": "../../packages/design-system-react-native/src/components/ButtonHero/ButtonHero.stories.tsx", "jsDocTags": { "deprecated": [ "Use `Button` with `variant={ButtonVariant.Primary}` instead. This component will be removed in a future major version of the design system." ], "param": [ "props - ButtonHero props extending ButtonBaseProps" ], "returns": [ "ButtonHero component wrapped in light ThemeProvider" ] }, "description": "ButtonHero component - Hero button with locked light theme\n\nUsed for primary marketing and call-to-action use cases.\nThe button is locked to light theme colors regardless of the app's theme setting.", "reactDocgen": { "description": "ButtonHero component - Hero button with locked light theme\n\nUsed for primary marketing and call-to-action use cases.\nThe button is locked to light theme colors regardless of the app's theme setting.\n\n@deprecated Use `Button` with `variant={ButtonVariant.Primary}` instead.\nThis component will be removed in a future major version of the design system.\n\n@param props - ButtonHero props extending ButtonBaseProps\n@returns ButtonHero component wrapped in light ThemeProvider", "methods": [], "displayName": "ButtonHero", "definedInFile": "/home/runner/work/metamask-design-system/metamask-design-system/packages/design-system-react-native/src/components/ButtonHero/ButtonHero.tsx", "actualName": "ButtonHero", "exportName": "ButtonHero", "props": { "children": { "required": true, "tsType": { "name": "union", "raw": "React.ReactNode | string", "elements": [ { "name": "ReactReactNode", "raw": "React.ReactNode" }, { "name": "string" } ] }, "description": "Required prop for the content to be rendered within the ButtonBase" }, "textProps": { "required": false, "tsType": { "name": "Omit", "elements": [ { "name": "Partial", "elements": [ { "name": "intersection", "raw": "TextPropsShared &\nRNTextProps & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "elements": [ { "name": "TextPropsShared" }, { "name": "RNTextProps" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } } ] } ], "raw": "Partial" }, { "name": "literal", "value": "'children'" } ], "raw": "Omit, 'children'>" }, "description": "Optional props to be passed to the Text component when children is a string" }, "spinnerProps": { "required": false, "tsType": { "name": "Partial", "elements": [ { "name": "intersection", "raw": "{\n /**\n * Optional prop that sets the color of the spinner icon using predefined theme colors\n *\n * @default IconColor.IconDefault\n */\n color?: IconColor;\n /**\n * Optional props to be passed to the loadingText element\n */\n spinnerIconProps?: Partial;\n /**\n * Optional text to display on the right of the spinner, providing additional context or information about the loading state.\n */\n loadingText?: string;\n /**\n * Optional props to be passed to the loadingText element\n */\n loadingTextProps?: Omit, 'children'>;\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n} & ViewProps", "elements": [ { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop that sets the color of the spinner icon using predefined theme colors\n *\n * @default IconColor.IconDefault\n */\n color?: IconColor;\n /**\n * Optional props to be passed to the loadingText element\n */\n spinnerIconProps?: Partial;\n /**\n * Optional text to display on the right of the spinner, providing additional context or information about the loading state.\n */\n loadingText?: string;\n /**\n * Optional props to be passed to the loadingText element\n */\n loadingTextProps?: Omit, 'children'>;\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "color", "value": { "name": "IconColor", "required": false }, "description": "Optional prop that sets the color of the spinner icon using predefined theme colors\n\n@default IconColor.IconDefault" }, { "key": "spinnerIconProps", "value": { "name": "Partial", "elements": [ { "name": "intersection", "raw": "IconPropsShared & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n} & Omit", "elements": [ { "name": "IconPropsShared" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } }, { "name": "Omit", "elements": [ { "name": "SvgProps" }, { "name": "union", "raw": "'color' | 'name'", "elements": [ { "name": "literal", "value": "'color'" }, { "name": "literal", "value": "'name'" } ] } ], "raw": "Omit" } ] } ], "raw": "Partial", "required": false }, "description": "Optional props to be passed to the loadingText element" }, { "key": "loadingText", "value": { "name": "string", "required": false }, "description": "Optional text to display on the right of the spinner, providing additional context or information about the loading state." }, { "key": "loadingTextProps", "value": { "name": "Omit", "elements": [ { "name": "Partial", "elements": [ { "name": "intersection", "raw": "TextPropsShared &\nRNTextProps & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "elements": [ { "name": "TextPropsShared" }, { "name": "RNTextProps" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } } ] } ], "raw": "Partial" }, { "name": "literal", "value": "'children'" } ], "raw": "Omit, 'children'>", "required": false }, "description": "Optional props to be passed to the loadingText element" }, { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } }, { "name": "ViewProps" } ] } ], "raw": "Partial" }, "description": "Optional prop to pass additional properties to the end icon" }, "loadingWrapperProps": { "required": false, "tsType": { "name": "Omit", "elements": [ { "name": "Partial", "elements": [ { "name": "intersection", "raw": "BoxPropsShared &\nViewProps & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "elements": [ { "name": "BoxPropsShared" }, { "name": "ViewProps" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } } ] } ], "raw": "Partial" }, { "name": "literal", "value": "'children'" } ], "raw": "Omit, 'children'>" }, "description": "Props passed to the loading overlay wrapper (`Box` around the spinner).\nDefaults include `twClassName` for full-area centered layout; merge your own `twClassName` to extend.\nPass `testID` here for tests — there is no default test id on this wrapper." }, "contentWrapperProps": { "required": false, "tsType": { "name": "Omit", "elements": [ { "name": "Partial", "elements": [ { "name": "intersection", "raw": "BoxRowPropsShared &\nOmit & {\n /**\n * Optional props passed to `SensitiveText` when `children` is a string.\n * Supports Text props plus `isHidden` / `length`.\n */\n textProps?: Partial>;\n}", "elements": [ { "name": "BoxRowPropsShared" }, { "name": "Omit", "elements": [ { "name": "intersection", "raw": "BoxPropsShared &\nViewProps & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "elements": [ { "name": "BoxPropsShared" }, { "name": "ViewProps" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } } ] }, { "name": "union", "raw": "'children' | 'flexDirection'", "elements": [ { "name": "literal", "value": "'children'" }, { "name": "literal", "value": "'flexDirection'" } ] } ], "raw": "Omit" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional props passed to `SensitiveText` when `children` is a string.\n * Supports Text props plus `isHidden` / `length`.\n */\n textProps?: Partial>;\n}", "signature": { "properties": [ { "key": "textProps", "value": { "name": "Partial", "elements": [ { "name": "Omit", "elements": [ { "name": "intersection", "raw": "SensitiveTextPropsShared & TextProps", "elements": [ { "name": "SensitiveTextPropsShared" }, { "name": "intersection", "raw": "TextPropsShared &\nRNTextProps & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "elements": [ { "name": "TextPropsShared" }, { "name": "RNTextProps" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } } ] } ] }, { "name": "literal", "value": "'children'" } ], "raw": "Omit" } ], "raw": "Partial>", "required": false }, "description": "Optional props passed to `SensitiveText` when `children` is a string.\nSupports Text props plus `isHidden` / `length`." } ] } } ] } ], "raw": "Partial" }, { "name": "union", "raw": "'children' | 'textProps'", "elements": [ { "name": "literal", "value": "'children'" }, { "name": "literal", "value": "'textProps'" } ] } ], "raw": "Omit, 'children' | 'textProps'>" }, "description": "Props passed to the label row (`BoxRow`). Label typography remains controlled via `textProps` on ButtonBase." }, "startIconName": { "required": false, "tsType": { "name": "IconName" }, "description": "Optional prop to specify an icon to show at the start of the button" }, "startIconProps": { "required": false, "tsType": { "name": "Partial", "elements": [ { "name": "intersection", "raw": "IconPropsShared & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n} & Omit", "elements": [ { "name": "IconPropsShared" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } }, { "name": "Omit", "elements": [ { "name": "SvgProps" }, { "name": "union", "raw": "'color' | 'name'", "elements": [ { "name": "literal", "value": "'color'" }, { "name": "literal", "value": "'name'" } ] } ], "raw": "Omit" } ] } ], "raw": "Partial" }, "description": "Optional prop to pass additional properties to the start icon" }, "startAccessory": { "required": false, "tsType": { "name": "ReactReactNode", "raw": "React.ReactNode" }, "description": "Optional prop for a custom element to show at the start of the button" }, "endIconName": { "required": false, "tsType": { "name": "IconName" }, "description": "Optional prop to specify an icon to show at the end of the button" }, "endIconProps": { "required": false, "tsType": { "name": "Partial", "elements": [ { "name": "intersection", "raw": "IconPropsShared & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n} & Omit", "elements": [ { "name": "IconPropsShared" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } }, { "name": "Omit", "elements": [ { "name": "SvgProps" }, { "name": "union", "raw": "'color' | 'name'", "elements": [ { "name": "literal", "value": "'color'" }, { "name": "literal", "value": "'name'" } ] } ], "raw": "Omit" } ] } ], "raw": "Partial" }, "description": "Optional prop to pass additional properties to the end icon" }, "endAccessory": { "required": false, "tsType": { "name": "ReactReactNode", "raw": "React.ReactNode" }, "description": "Optional prop for a custom element to show at the end of the button" }, "twClassName": { "required": false, "tsType": { "name": "union", "raw": "string | ((pressed: boolean) => string)", "elements": [ { "name": "string" }, { "name": "unknown" } ] }, "description": "Optional prop to add twrnc overriding classNames.\nCan be a string or a function that receives pressed state and returns a string." }, "textClassName": { "required": false, "tsType": { "name": "signature", "type": "function", "raw": "(pressed: boolean) => string", "signature": { "arguments": [ { "type": { "name": "boolean" }, "name": "pressed" } ], "return": { "name": "string" } } }, "description": "Optional prop to control text className based on pressed state." }, "iconClassName": { "required": false, "tsType": { "name": "signature", "type": "function", "raw": "(pressed: boolean) => string", "signature": { "arguments": [ { "type": { "name": "boolean" }, "name": "pressed" } ], "return": { "name": "string" } } }, "description": "Optional prop to control icon className based on pressed state." }, "style": { "required": false, "tsType": { "name": "StyleProp", "elements": [ { "name": "ViewStyle" } ], "raw": "StyleProp" }, "description": "Optional prop to control the style." }, "accessibilityLabel": { "required": false, "tsType": { "name": "string" }, "description": "Optional accessibility label to describe the button for screen readers.\nIf not provided, the button content will be used as the label." }, "accessibilityHint": { "required": false, "tsType": { "name": "string" }, "description": "Optional accessibility hint to provide additional context about the button's action.\nShould describe what happens when the button is pressed." }, "accessibilityRole": { "required": false, "tsType": { "name": "union", "raw": "'button' | 'link' | 'menuitem' | 'tab' | 'none'", "elements": [ { "name": "literal", "value": "'button'" }, { "name": "literal", "value": "'link'" }, { "name": "literal", "value": "'menuitem'" }, { "name": "literal", "value": "'tab'" }, { "name": "literal", "value": "'none'" } ] }, "description": "Optional accessibility role. Defaults to 'button'.\nCan be overridden for specific use cases." }, "accessibilityActions": { "required": false, "tsType": { "name": "Array", "elements": [ { "name": "signature", "type": "object", "raw": "{\n name: string;\n label?: string;\n}", "signature": { "properties": [ { "key": "name", "value": { "name": "string", "required": true } }, { "key": "label", "value": { "name": "string", "required": false } } ] } } ], "raw": "{\n name: string;\n label?: string;\n}[]" }, "description": "Optional accessibility actions for custom interactions.\nUse sparingly and only when default button behavior is insufficient." }, "onAccessibilityAction": { "required": false, "tsType": { "name": "signature", "type": "function", "raw": "(event: {\n nativeEvent: { actionName: string };\n}) => void", "signature": { "arguments": [ { "type": { "name": "signature", "type": "object", "raw": "{\n nativeEvent: { actionName: string };\n}", "signature": { "properties": [ { "key": "nativeEvent", "value": { "name": "signature", "type": "object", "raw": "{ actionName: string }", "signature": { "properties": [ { "key": "actionName", "value": { "name": "string", "required": true } } ] }, "required": true } } ] } }, "name": "event" } ], "return": { "name": "void" } } }, "description": "Optional callback for handling accessibility action events." } } }, "stories": [ { "id": "components-buttonhero--default", "name": "Default", "snippet": "const Default = () => Primary action;" }, { "id": "components-buttonhero--size", "name": "Size", "snippet": "const Size = () => \n Small\n \n Medium\n \n Large\n \n;" }, { "id": "components-buttonhero--is-full-width", "name": "Is Full Width", "snippet": "const IsFullWidth = () => Full width;" }, { "id": "components-buttonhero--start-icon-name", "name": "Start Icon Name", "snippet": "const StartIconName = () => Start icon;" }, { "id": "components-buttonhero--end-icon-name", "name": "End Icon Name", "snippet": "const EndIconName = () => End icon;" }, { "id": "components-buttonhero--is-disabled", "name": "Is Disabled", "snippet": "const IsDisabled = () => Disabled button;" }, { "id": "components-buttonhero--is-loading", "name": "Is Loading", "snippet": "const IsLoading = () => Submit this form;" } ], "import": "import { ButtonHero } from '@metamask/design-system-react-native';\nimport { View } from 'react-native';\nimport { IconName } from '@metamask/design-system-shared';" }, "components-button-icon": { "id": "components-button-icon", "name": "ButtonIcon", "path": "../../packages/design-system-react-native/src/components/ButtonIcon/ButtonIcon.stories.tsx", "jsDocTags": {}, "reactDocgen": { "description": "", "methods": [], "displayName": "ButtonIcon", "definedInFile": "/home/runner/work/metamask-design-system/metamask-design-system/packages/design-system-react-native/src/components/ButtonIcon/ButtonIcon.tsx", "actualName": "ButtonIcon", "exportName": "ButtonIcon", "props": { "iconProps": { "required": false, "tsType": { "name": "Partial", "elements": [ { "name": "intersection", "raw": "IconPropsShared & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n} & Omit", "elements": [ { "name": "IconPropsShared" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } }, { "name": "Omit", "elements": [ { "name": "SvgProps" }, { "name": "union", "raw": "'color' | 'name'", "elements": [ { "name": "literal", "value": "'color'" }, { "name": "literal", "value": "'name'" } ] } ], "raw": "Omit" } ] } ], "raw": "Partial" }, "description": "Optional prop to pass additional properties to the icon" }, "twClassName": { "required": false, "tsType": { "name": "string" }, "description": "Optional prop to add twrnc overriding classNames." }, "style": { "required": false, "tsType": { "name": "StyleProp", "elements": [ { "name": "ViewStyle" } ], "raw": "StyleProp" }, "description": "Optional prop to control the style." }, "size": { "defaultValue": { "value": "'md'", "computed": false }, "required": false }, "isDisabled": { "defaultValue": { "value": "false", "computed": false }, "required": false }, "variant": { "defaultValue": { "value": "'default'", "computed": false }, "required": false } } }, "stories": [ { "id": "components-button-icon--default", "name": "Default", "snippet": "const Default = () => ;" }, { "id": "components-button-icon--size", "name": "Size", "snippet": "const Size = () => (\n \n {Object.values(ButtonIconSize).map((size) => (\n \n \n \n ))}\n \n);" }, { "id": "components-button-icon--is-disabled", "name": "Is Disabled", "snippet": "const IsDisabled = () => ;" }, { "id": "components-button-icon--floating", "name": "Floating", "snippet": "const Floating = () => (\n \n);" }, { "id": "components-button-icon--filled", "name": "Filled", "snippet": "const Filled = () => (\n \n);" } ], "import": "import { ButtonIcon } from '@metamask/design-system-react-native';\nimport { View } from 'react-native';\nimport { ButtonIconSize, IconName, ButtonIconVariant } from '@metamask/design-system-shared';" }, "components-buttonsemantic": { "id": "components-buttonsemantic", "name": "ButtonSemantic", "path": "../../packages/design-system-react-native/src/components/ButtonSemantic/ButtonSemantic.stories.tsx", "jsDocTags": {}, "reactDocgen": { "description": "", "methods": [], "displayName": "ButtonSemantic", "definedInFile": "/home/runner/work/metamask-design-system/metamask-design-system/packages/design-system-react-native/src/components/ButtonSemantic/ButtonSemantic.tsx", "actualName": "ButtonSemantic", "exportName": "ButtonSemantic", "props": { "severity": { "required": true, "tsType": { "name": "ButtonSemanticSeverity" }, "description": "Required prop to control the severity/color scheme of the button.\n- ButtonSemanticSeverity.Success: Green color scheme for positive actions\n- ButtonSemanticSeverity.Danger: Red color scheme for destructive actions" }, "children": { "required": true, "tsType": { "name": "union", "raw": "React.ReactNode | string", "elements": [ { "name": "ReactReactNode", "raw": "React.ReactNode" }, { "name": "string" } ] }, "description": "Required prop for the content to be rendered within the ButtonBase" }, "textProps": { "required": false, "tsType": { "name": "Omit", "elements": [ { "name": "Partial", "elements": [ { "name": "intersection", "raw": "TextPropsShared &\nRNTextProps & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "elements": [ { "name": "TextPropsShared" }, { "name": "RNTextProps" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } } ] } ], "raw": "Partial" }, { "name": "literal", "value": "'children'" } ], "raw": "Omit, 'children'>" }, "description": "Optional props to be passed to the Text component when children is a string" }, "spinnerProps": { "required": false, "tsType": { "name": "Partial", "elements": [ { "name": "intersection", "raw": "{\n /**\n * Optional prop that sets the color of the spinner icon using predefined theme colors\n *\n * @default IconColor.IconDefault\n */\n color?: IconColor;\n /**\n * Optional props to be passed to the loadingText element\n */\n spinnerIconProps?: Partial;\n /**\n * Optional text to display on the right of the spinner, providing additional context or information about the loading state.\n */\n loadingText?: string;\n /**\n * Optional props to be passed to the loadingText element\n */\n loadingTextProps?: Omit, 'children'>;\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n} & ViewProps", "elements": [ { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop that sets the color of the spinner icon using predefined theme colors\n *\n * @default IconColor.IconDefault\n */\n color?: IconColor;\n /**\n * Optional props to be passed to the loadingText element\n */\n spinnerIconProps?: Partial;\n /**\n * Optional text to display on the right of the spinner, providing additional context or information about the loading state.\n */\n loadingText?: string;\n /**\n * Optional props to be passed to the loadingText element\n */\n loadingTextProps?: Omit, 'children'>;\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "color", "value": { "name": "IconColor", "required": false }, "description": "Optional prop that sets the color of the spinner icon using predefined theme colors\n\n@default IconColor.IconDefault" }, { "key": "spinnerIconProps", "value": { "name": "Partial", "elements": [ { "name": "intersection", "raw": "IconPropsShared & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n} & Omit", "elements": [ { "name": "IconPropsShared" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } }, { "name": "Omit", "elements": [ { "name": "SvgProps" }, { "name": "union", "raw": "'color' | 'name'", "elements": [ { "name": "literal", "value": "'color'" }, { "name": "literal", "value": "'name'" } ] } ], "raw": "Omit" } ] } ], "raw": "Partial", "required": false }, "description": "Optional props to be passed to the loadingText element" }, { "key": "loadingText", "value": { "name": "string", "required": false }, "description": "Optional text to display on the right of the spinner, providing additional context or information about the loading state." }, { "key": "loadingTextProps", "value": { "name": "Omit", "elements": [ { "name": "Partial", "elements": [ { "name": "intersection", "raw": "TextPropsShared &\nRNTextProps & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "elements": [ { "name": "TextPropsShared" }, { "name": "RNTextProps" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } } ] } ], "raw": "Partial" }, { "name": "literal", "value": "'children'" } ], "raw": "Omit, 'children'>", "required": false }, "description": "Optional props to be passed to the loadingText element" }, { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } }, { "name": "ViewProps" } ] } ], "raw": "Partial" }, "description": "Optional prop to pass additional properties to the end icon" }, "loadingWrapperProps": { "required": false, "tsType": { "name": "Omit", "elements": [ { "name": "Partial", "elements": [ { "name": "intersection", "raw": "BoxPropsShared &\nViewProps & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "elements": [ { "name": "BoxPropsShared" }, { "name": "ViewProps" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } } ] } ], "raw": "Partial" }, { "name": "literal", "value": "'children'" } ], "raw": "Omit, 'children'>" }, "description": "Props passed to the loading overlay wrapper (`Box` around the spinner).\nDefaults include `twClassName` for full-area centered layout; merge your own `twClassName` to extend.\nPass `testID` here for tests — there is no default test id on this wrapper." }, "contentWrapperProps": { "required": false, "tsType": { "name": "Omit", "elements": [ { "name": "Partial", "elements": [ { "name": "intersection", "raw": "BoxRowPropsShared &\nOmit & {\n /**\n * Optional props passed to `SensitiveText` when `children` is a string.\n * Supports Text props plus `isHidden` / `length`.\n */\n textProps?: Partial>;\n}", "elements": [ { "name": "BoxRowPropsShared" }, { "name": "Omit", "elements": [ { "name": "intersection", "raw": "BoxPropsShared &\nViewProps & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "elements": [ { "name": "BoxPropsShared" }, { "name": "ViewProps" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } } ] }, { "name": "union", "raw": "'children' | 'flexDirection'", "elements": [ { "name": "literal", "value": "'children'" }, { "name": "literal", "value": "'flexDirection'" } ] } ], "raw": "Omit" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional props passed to `SensitiveText` when `children` is a string.\n * Supports Text props plus `isHidden` / `length`.\n */\n textProps?: Partial>;\n}", "signature": { "properties": [ { "key": "textProps", "value": { "name": "Partial", "elements": [ { "name": "Omit", "elements": [ { "name": "intersection", "raw": "SensitiveTextPropsShared & TextProps", "elements": [ { "name": "SensitiveTextPropsShared" }, { "name": "intersection", "raw": "TextPropsShared &\nRNTextProps & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "elements": [ { "name": "TextPropsShared" }, { "name": "RNTextProps" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } } ] } ] }, { "name": "literal", "value": "'children'" } ], "raw": "Omit" } ], "raw": "Partial>", "required": false }, "description": "Optional props passed to `SensitiveText` when `children` is a string.\nSupports Text props plus `isHidden` / `length`." } ] } } ] } ], "raw": "Partial" }, { "name": "union", "raw": "'children' | 'textProps'", "elements": [ { "name": "literal", "value": "'children'" }, { "name": "literal", "value": "'textProps'" } ] } ], "raw": "Omit, 'children' | 'textProps'>" }, "description": "Props passed to the label row (`BoxRow`). Label typography remains controlled via `textProps` on ButtonBase." }, "startIconName": { "required": false, "tsType": { "name": "IconName" }, "description": "Optional prop to specify an icon to show at the start of the button" }, "startIconProps": { "required": false, "tsType": { "name": "Partial", "elements": [ { "name": "intersection", "raw": "IconPropsShared & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n} & Omit", "elements": [ { "name": "IconPropsShared" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } }, { "name": "Omit", "elements": [ { "name": "SvgProps" }, { "name": "union", "raw": "'color' | 'name'", "elements": [ { "name": "literal", "value": "'color'" }, { "name": "literal", "value": "'name'" } ] } ], "raw": "Omit" } ] } ], "raw": "Partial" }, "description": "Optional prop to pass additional properties to the start icon" }, "startAccessory": { "required": false, "tsType": { "name": "ReactReactNode", "raw": "React.ReactNode" }, "description": "Optional prop for a custom element to show at the start of the button" }, "endIconName": { "required": false, "tsType": { "name": "IconName" }, "description": "Optional prop to specify an icon to show at the end of the button" }, "endIconProps": { "required": false, "tsType": { "name": "Partial", "elements": [ { "name": "intersection", "raw": "IconPropsShared & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n} & Omit", "elements": [ { "name": "IconPropsShared" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } }, { "name": "Omit", "elements": [ { "name": "SvgProps" }, { "name": "union", "raw": "'color' | 'name'", "elements": [ { "name": "literal", "value": "'color'" }, { "name": "literal", "value": "'name'" } ] } ], "raw": "Omit" } ] } ], "raw": "Partial" }, "description": "Optional prop to pass additional properties to the end icon" }, "endAccessory": { "required": false, "tsType": { "name": "ReactReactNode", "raw": "React.ReactNode" }, "description": "Optional prop for a custom element to show at the end of the button" }, "twClassName": { "required": false, "tsType": { "name": "union", "raw": "string | ((pressed: boolean) => string)", "elements": [ { "name": "string" }, { "name": "unknown" } ] }, "description": "Optional prop to add twrnc overriding classNames.\nCan be a string or a function that receives pressed state and returns a string.", "defaultValue": { "value": "''", "computed": false } }, "textClassName": { "required": false, "tsType": { "name": "signature", "type": "function", "raw": "(pressed: boolean) => string", "signature": { "arguments": [ { "type": { "name": "boolean" }, "name": "pressed" } ], "return": { "name": "string" } } }, "description": "Optional prop to control text className based on pressed state." }, "iconClassName": { "required": false, "tsType": { "name": "signature", "type": "function", "raw": "(pressed: boolean) => string", "signature": { "arguments": [ { "type": { "name": "boolean" }, "name": "pressed" } ], "return": { "name": "string" } } }, "description": "Optional prop to control icon className based on pressed state." }, "style": { "required": false, "tsType": { "name": "StyleProp", "elements": [ { "name": "ViewStyle" } ], "raw": "StyleProp" }, "description": "Optional prop to control the style." }, "accessibilityLabel": { "required": false, "tsType": { "name": "string" }, "description": "Optional accessibility label to describe the button for screen readers.\nIf not provided, the button content will be used as the label." }, "accessibilityHint": { "required": false, "tsType": { "name": "string" }, "description": "Optional accessibility hint to provide additional context about the button's action.\nShould describe what happens when the button is pressed." }, "accessibilityRole": { "required": false, "tsType": { "name": "union", "raw": "'button' | 'link' | 'menuitem' | 'tab' | 'none'", "elements": [ { "name": "literal", "value": "'button'" }, { "name": "literal", "value": "'link'" }, { "name": "literal", "value": "'menuitem'" }, { "name": "literal", "value": "'tab'" }, { "name": "literal", "value": "'none'" } ] }, "description": "Optional accessibility role. Defaults to 'button'.\nCan be overridden for specific use cases." }, "accessibilityActions": { "required": false, "tsType": { "name": "Array", "elements": [ { "name": "signature", "type": "object", "raw": "{\n name: string;\n label?: string;\n}", "signature": { "properties": [ { "key": "name", "value": { "name": "string", "required": true } }, { "key": "label", "value": { "name": "string", "required": false } } ] } } ], "raw": "{\n name: string;\n label?: string;\n}[]" }, "description": "Optional accessibility actions for custom interactions.\nUse sparingly and only when default button behavior is insufficient." }, "onAccessibilityAction": { "required": false, "tsType": { "name": "signature", "type": "function", "raw": "(event: {\n nativeEvent: { actionName: string };\n}) => void", "signature": { "arguments": [ { "type": { "name": "signature", "type": "object", "raw": "{\n nativeEvent: { actionName: string };\n}", "signature": { "properties": [ { "key": "nativeEvent", "value": { "name": "signature", "type": "object", "raw": "{ actionName: string }", "signature": { "properties": [ { "key": "actionName", "value": { "name": "string", "required": true } } ] }, "required": true } } ] } }, "name": "event" } ], "return": { "name": "void" } } }, "description": "Optional callback for handling accessibility action events." }, "isLoading": { "defaultValue": { "value": "false", "computed": false }, "required": false } } }, "stories": [ { "id": "components-buttonsemantic--default", "name": "Default", "snippet": "const Default = () => console.log('Button pressed!')}\n size={ButtonSemanticSize.Lg}\n isDisabled={false}\n isLoading={false}\n isFullWidth={false}>Action;" }, { "id": "components-buttonsemantic--severity", "name": "Severity", "snippet": "const Severity = () => \n console.log('Button pressed!')}\n severity={ButtonSemanticSeverity.Success}>Success button\n \n console.log('Button pressed!')}\n severity={ButtonSemanticSeverity.Danger}>Danger button\n \n;" }, { "id": "components-buttonsemantic--size", "name": "Size", "snippet": "const Size = (args) => (\n \n {Object.keys(ButtonSemanticSize).map((sizeKey) => (\n \n {sizeKey}\n \n ))}\n \n);" }, { "id": "components-buttonsemantic--is-disabled", "name": "Is Disabled", "snippet": "const IsDisabled = () => console.log('Button pressed!')}\n isDisabled>Action;" }, { "id": "components-buttonsemantic--is-loading", "name": "Is Loading", "snippet": "const IsLoading = () => \n console.log('Button pressed!')}\n isLoading>Action\n console.log('Button pressed!')}\n isLoading\n loadingText=\"Loading...\">Action\n \n;" } ], "import": "import { Box, ButtonSemantic, Text } from '@metamask/design-system-react-native';\nimport { View } from 'react-native';\nimport { ButtonSemanticSeverity } from './ButtonSemantic.types';\nimport { ButtonSemanticSize } from '@metamask/design-system-shared';" }, "components-card": { "id": "components-card", "name": "Card", "path": "../../packages/design-system-react-native/src/components/Card/Card.stories.tsx", "jsDocTags": {}, "reactDocgen": { "description": "", "methods": [], "displayName": "Card", "definedInFile": "/home/runner/work/metamask-design-system/metamask-design-system/packages/design-system-react-native/src/components/Card/Card.tsx", "actualName": "Card", "exportName": "Card", "props": { "isInteractive": { "defaultValue": { "value": "false", "computed": false }, "required": false } } }, "stories": [ { "id": "components-card--default", "name": "Default", "snippet": "const Default = () => \n Card content\n;" }, { "id": "components-card--is-interactive", "name": "Is Interactive", "snippet": "const IsInteractive = () => console.log('pressed')}>\n Pressable card\n;" } ], "import": "import { Box, Card, Text } from '@metamask/design-system-react-native';" }, "components-checkbox": { "id": "components-checkbox", "name": "Checkbox", "path": "../../packages/design-system-react-native/src/components/Checkbox/Checkbox.stories.tsx", "jsDocTags": {}, "reactDocgen": { "description": "", "methods": [ { "name": "toggle", "docblock": null, "modifiers": [], "params": [], "returns": null } ], "displayName": "Checkbox", "definedInFile": "/home/runner/work/metamask-design-system/metamask-design-system/packages/design-system-react-native/src/components/Checkbox/Checkbox.tsx", "actualName": "Checkbox", "exportName": "Checkbox", "props": { "labelProps": { "required": false, "tsType": { "name": "Omit", "elements": [ { "name": "Partial", "elements": [ { "name": "intersection", "raw": "TextPropsShared &\nRNTextProps & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "elements": [ { "name": "TextPropsShared" }, { "name": "RNTextProps" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } } ] } ], "raw": "Partial" }, { "name": "literal", "value": "'children'" } ], "raw": "Omit, 'children'>" }, "description": "Optional props to be passed to the label's Text component." }, "checkboxContainerProps": { "required": false, "tsType": { "name": "Omit", "elements": [ { "name": "Partial", "elements": [ { "name": "ViewProps" } ], "raw": "Partial" }, { "name": "literal", "value": "'children'" } ], "raw": "Omit, 'children'>" }, "description": "Optional props passed to the container view wrapping the checkbox icon." }, "checkedIconProps": { "required": false, "tsType": { "name": "Partial", "elements": [ { "name": "intersection", "raw": "IconPropsShared & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n} & Omit", "elements": [ { "name": "IconPropsShared" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } }, { "name": "Omit", "elements": [ { "name": "SvgProps" }, { "name": "union", "raw": "'color' | 'name'", "elements": [ { "name": "literal", "value": "'color'" }, { "name": "literal", "value": "'name'" } ] } ], "raw": "Omit" } ] } ], "raw": "Partial" }, "description": "Optional props to be passed to the check Icon component." }, "twClassName": { "required": false, "tsType": { "name": "string" }, "description": "Optional prop to add twrnc overriding classNames." }, "style": { "required": false, "tsType": { "name": "PressableProps['style']", "raw": "PressableProps['style']" }, "description": "Optional prop to control the style." }, "isDisabled": { "defaultValue": { "value": "false", "computed": false }, "required": false }, "isInvalid": { "defaultValue": { "value": "false", "computed": false }, "required": false }, "label": { "defaultValue": { "value": "''", "computed": false }, "required": false } } }, "stories": [ { "id": "components-checkbox--default", "name": "Default", "snippet": "const Default = () => ;" }, { "id": "components-checkbox--is-selected", "name": "Is Selected", "snippet": "const IsSelected = () => (\n \n \n \n \n);" }, { "id": "components-checkbox--is-disabled", "name": "Is Disabled", "snippet": "const IsDisabled = () => (\n \n \n \n \n);" }, { "id": "components-checkbox--is-invalid", "name": "Is Invalid", "snippet": "const IsInvalid = () => (\n \n \n \n \n);" }, { "id": "components-checkbox--label", "name": "Label", "snippet": "const Label = () => (\n \n \n \n \n);" }, { "id": "components-checkbox--ref", "name": "Ref", "snippet": "const Ref = () => {\n const [isSelected, setIsSelected] = useState(false);\n const checkboxRef = useRef<{ toggle: () => void }>(null);\n\n return (\n \n setIsSelected(!isSelected)}\n label=\"Toggle me via ref\"\n />\n checkboxRef.current?.toggle()}\n >\n Toggle checkbox\n \n \n );\n};" } ], "import": "import { Button, Checkbox } from '@metamask/design-system-react-native';\nimport { View } from 'react-native';" }, "components-content": { "id": "components-content", "name": "Content", "path": "../../packages/design-system-react-native/src/components/Content/Content.stories.tsx", "jsDocTags": {}, "reactDocgen": { "description": "", "methods": [], "displayName": "Content", "definedInFile": "/home/runner/work/metamask-design-system/metamask-design-system/packages/design-system-react-native/src/components/Content/Content.tsx", "actualName": "Content", "exportName": "Content", "props": { "titleProps": { "required": false, "tsType": { "name": "Partial", "elements": [ { "name": "Omit", "elements": [ { "name": "intersection", "raw": "TextPropsShared &\nRNTextProps & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "elements": [ { "name": "TextPropsShared" }, { "name": "RNTextProps" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } } ] }, { "name": "literal", "value": "'children'" } ], "raw": "Omit" } ], "raw": "Partial>" }, "description": "Optional props for the title Text when `title` is a string.\nDefault: TextVariant.BodyMd, FontWeight.Medium, TextColor.TextDefault." }, "descriptionProps": { "required": false, "tsType": { "name": "Partial", "elements": [ { "name": "Omit", "elements": [ { "name": "intersection", "raw": "SensitiveTextPropsShared & TextProps", "elements": [ { "name": "SensitiveTextPropsShared" }, { "name": "intersection", "raw": "TextPropsShared &\nRNTextProps & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "elements": [ { "name": "TextPropsShared" }, { "name": "RNTextProps" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } } ] } ] }, { "name": "literal", "value": "'children'" } ], "raw": "Omit" } ], "raw": "Partial>" }, "description": "Optional props for the description SensitiveText when `description` is a string.\nSupports Text props plus `isHidden` / `length`.\nDefault: TextVariant.BodySm, FontWeight.Medium, TextColor.TextAlternative." }, "valueProps": { "required": false, "tsType": { "name": "Partial", "elements": [ { "name": "Omit", "elements": [ { "name": "intersection", "raw": "SensitiveTextPropsShared & TextProps", "elements": [ { "name": "SensitiveTextPropsShared" }, { "name": "intersection", "raw": "TextPropsShared &\nRNTextProps & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "elements": [ { "name": "TextPropsShared" }, { "name": "RNTextProps" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } } ] } ] }, { "name": "literal", "value": "'children'" } ], "raw": "Omit" } ], "raw": "Partial>" }, "description": "Optional props for the value SensitiveText when `value` is a string.\nSupports Text props plus `isHidden` / `length`.\nDefault: TextVariant.BodyMd, FontWeight.Medium, TextColor.TextDefault." }, "subvalueProps": { "required": false, "tsType": { "name": "Partial", "elements": [ { "name": "Omit", "elements": [ { "name": "intersection", "raw": "SensitiveTextPropsShared & TextProps", "elements": [ { "name": "SensitiveTextPropsShared" }, { "name": "intersection", "raw": "TextPropsShared &\nRNTextProps & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "elements": [ { "name": "TextPropsShared" }, { "name": "RNTextProps" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } } ] } ] }, { "name": "literal", "value": "'children'" } ], "raw": "Omit" } ], "raw": "Partial>" }, "description": "Optional props for the subvalue SensitiveText when `subvalue` is a string.\nSupports Text props plus `isHidden` / `length`.\nDefault: TextVariant.BodySm, FontWeight.Medium, TextColor.TextAlternative." }, "variant": { "defaultValue": { "value": "'two-lines'", "computed": false }, "required": false } } }, "stories": [ { "id": "components-content--default", "name": "Default", "snippet": "const Default = () => \n \n;" }, { "id": "components-content--title", "name": "Title", "snippet": "const Title = () => \n \n;" }, { "id": "components-content--description", "name": "Description", "snippet": "const Description = () => \n \n;" }, { "id": "components-content--value", "name": "Value", "snippet": "const Value = () => \n \n;" }, { "id": "components-content--subvalue", "name": "Subvalue", "snippet": "const Subvalue = () => \n \n \n \n \n }\n subvalue={\n undefined}\n >\n 3% bonus\n \n } />\n;" }, { "id": "components-content--description-props", "name": "Description Props", "snippet": "const DescriptionProps = () => \n \n;" }, { "id": "components-content--value-props", "name": "Value Props", "snippet": "const ValueProps = () => \n \n;" }, { "id": "components-content--subvalue-props", "name": "Subvalue Props", "snippet": "const SubvalueProps = () => \n \n;" }, { "id": "components-content--variant", "name": "Variant", "snippet": "const Variant = () => \n \n \n \n Secondary line\n Third line\n \n }\n value=\"Value\"\n subvalue=\"Subvalue\" />\n;" }, { "id": "components-content--avatar", "name": "Avatar", "snippet": "const Avatar = () => \n }\n title=\"With avatar\"\n value=\"Value\"\n description={undefined} />\n;" }, { "id": "components-content--title-start-accessory", "name": "Title Start Accessory", "snippet": "const TitleStartAccessory = () => \n }\n title=\"Title with start accessory\"\n value=\"Value\"\n description={undefined} />\n;" }, { "id": "components-content--title-end-accessory", "name": "Title End Accessory", "snippet": "const TitleEndAccessory = () => \n }\n title=\"Title with end accessory\"\n value=\"Value\"\n description={undefined} />\n;" }, { "id": "components-content--description-start-accessory", "name": "Description Start Accessory", "snippet": "const DescriptionStartAccessory = () => \n }\n value=\"1.234 ETH\" />\n;" }, { "id": "components-content--description-end-accessory", "name": "Description End Accessory", "snippet": "const DescriptionEndAccessory = () => \n }\n value=\"1.234 ETH\" />\n;" }, { "id": "components-content--value-start-accessory", "name": "Value Start Accessory", "snippet": "const ValueStartAccessory = () => \n }\n value=\"100\"\n description={undefined} />\n;" }, { "id": "components-content--value-end-accessory", "name": "Value End Accessory", "snippet": "const ValueEndAccessory = () => \n }\n description={undefined} />\n;" }, { "id": "components-content--subvalue-start-accessory", "name": "Subvalue Start Accessory", "snippet": "const SubvalueStartAccessory = () => \n }\n description={undefined} />\n;" }, { "id": "components-content--subvalue-end-accessory", "name": "Subvalue End Accessory", "snippet": "const SubvalueEndAccessory = () => \n }\n description={undefined} />\n;" } ], "import": "import { Box, Button, Content, Icon, Text } from '@metamask/design-system-react-native';\nimport { View } from 'react-native';\nimport { ContentVariant } from '@metamask/design-system-shared';" }, "components-filterbutton": { "id": "components-filterbutton", "name": "FilterButton", "path": "../../packages/design-system-react-native/src/components/FilterButton/FilterButton.stories.tsx", "jsDocTags": {}, "reactDocgen": { "description": "", "methods": [], "displayName": "FilterButton", "definedInFile": "/home/runner/work/metamask-design-system/metamask-design-system/packages/design-system-react-native/src/components/FilterButton/FilterButton.tsx", "actualName": "FilterButton", "exportName": "FilterButton", "props": { "onPress": { "required": false, "tsType": { "name": "intersection['onPress']", "raw": "ButtonBaseProps['onPress']" }, "description": "" }, "isSelected": { "defaultValue": { "value": "false", "computed": false }, "required": false }, "isLoading": { "defaultValue": { "value": "false", "computed": false }, "required": false }, "twClassName": { "defaultValue": { "value": "''", "computed": false }, "required": false } } }, "stories": [ { "id": "components-filterbutton--default", "name": "Default", "snippet": "const Default = () => \n undefined}>Filter\n;" }, { "id": "components-filterbutton--variant", "name": "Variant", "snippet": "const Variant = () => (\n \n \n \n \n \n \n);" }, { "id": "components-filterbutton--size", "name": "Size", "snippet": "const Size = () => (\n \n {Object.keys(FilterButtonSize).map((sizeKey) => (\n \n {sizeKey}\n \n ))}\n \n);" }, { "id": "components-filterbutton--is-selected", "name": "Is Selected", "snippet": "const IsSelected = () => (\n \n \n \n \n);" }, { "id": "components-filterbutton--is-disabled", "name": "Is Disabled", "snippet": "const IsDisabled = () => (\n \n \n \n \n);" }, { "id": "components-filterbutton--start-accessory", "name": "Start Accessory", "snippet": "const StartAccessory = () => (\n \n \n }\n children=\"Custom start\"\n onPress={noopPress}\n />\n \n);" } ], "import": "import { Box, FilterButton, Icon } from '@metamask/design-system-react-native';\nimport { View } from 'react-native';\nimport { FilterButtonVariant } from '@metamask/design-system-shared';" }, "components-filterbuttongroup": { "id": "components-filterbuttongroup", "name": "FilterButtonGroup", "path": "../../packages/design-system-react-native/src/components/FilterButtonGroup/FilterButtonGroup.stories.tsx", "jsDocTags": {}, "reactDocgen": { "description": "", "methods": [], "displayName": "FilterButtonGroup", "definedInFile": "/home/runner/work/metamask-design-system/metamask-design-system/packages/design-system-react-native/src/components/FilterButtonGroup/FilterButtonGroup.tsx", "actualName": "FilterButtonGroup", "exportName": "FilterButtonGroup", "props": { "twClassName": { "required": false, "tsType": { "name": "string" }, "description": "Optional twrnc classes merged into `contentContainerStyle` after the default row layout." } } }, "stories": [ { "id": "components-filterbuttongroup--default", "name": "Default", "snippet": "const Default = () => ;" }, { "id": "components-filterbuttongroup--variant", "name": "Variant", "snippet": "const Variant = () => {\n const [filterValue, setFilterValue] = useState('all');\n const [chartValue, setChartValue] = useState('1d');\n\n return (\n \n \n \n All\n \n \n Tokens\n \n \n NFTs\n \n \n \n \n \n 1D\n \n \n 1W\n \n \n 1M\n \n \n \n \n );\n};" } ], "import": "import { FilterButton, FilterButtonGroup, SelectButton } from '@metamask/design-system-react-native';\nimport { View } from 'react-native';" }, "components-headerbase": { "id": "components-headerbase", "name": "HeaderBase", "path": "../../packages/design-system-react-native/src/components/HeaderBase/HeaderBase.stories.tsx", "jsDocTags": {}, "reactDocgen": { "description": "", "methods": [], "displayName": "HeaderBase", "definedInFile": "/home/runner/work/metamask-design-system/metamask-design-system/packages/design-system-react-native/src/components/HeaderBase/HeaderBase.tsx", "actualName": "HeaderBase", "exportName": "HeaderBase", "props": { "children": { "required": false, "tsType": { "name": "union", "raw": "ReactNode | string", "elements": [ { "name": "ReactNode" }, { "name": "string" } ] }, "description": "Title of the HeaderBase. Pass a string for automatic Text rendering,\nor a ReactNode for custom content." }, "style": { "required": false, "tsType": { "name": "StyleProp", "elements": [ { "name": "ViewStyle" } ], "raw": "StyleProp" }, "description": "Optional style for the header container." }, "startAccessory": { "required": false, "tsType": { "name": "ReactNode" }, "description": "Optional prop to include content to be displayed before the title.\nTakes priority over startButtonIconProps if both are provided." }, "endAccessory": { "required": false, "tsType": { "name": "ReactNode" }, "description": "Optional prop to include content to be displayed after the title.\nTakes priority over endButtonIconProps if both are provided." }, "startButtonIconProps": { "required": false, "tsType": { "name": "intersection", "raw": "ButtonIconPropsShared & {\n /**\n * Optional prop to pass additional properties to the icon\n */\n iconProps?: Partial;\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n /**\n * Optional prop to control the style.\n */\n style?: StyleProp;\n} & Omit", "elements": [ { "name": "ButtonIconPropsShared" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to pass additional properties to the icon\n */\n iconProps?: Partial;\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n /**\n * Optional prop to control the style.\n */\n style?: StyleProp;\n}", "signature": { "properties": [ { "key": "iconProps", "value": { "name": "Partial", "elements": [ { "name": "intersection", "raw": "IconPropsShared & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n} & Omit", "elements": [ { "name": "IconPropsShared" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } }, { "name": "Omit", "elements": [ { "name": "SvgProps" }, { "name": "union", "raw": "'color' | 'name'", "elements": [ { "name": "literal", "value": "'color'" }, { "name": "literal", "value": "'name'" } ] } ], "raw": "Omit" } ] } ], "raw": "Partial", "required": false }, "description": "Optional prop to pass additional properties to the icon" }, { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." }, { "key": "style", "value": { "name": "StyleProp", "elements": [ { "name": "ViewStyle" } ], "raw": "StyleProp", "required": false }, "description": "Optional prop to control the style." } ] } }, { "name": "Omit", "elements": [ { "name": "PressableProps" }, { "name": "literal", "value": "'children'" } ], "raw": "Omit" } ] }, "description": "Optional ButtonIcon props to render a ButtonIcon as the start accessory.\nOnly used if startAccessory is not provided.\nFor multiple start-side actions, compose them explicitly with `startAccessory`.\n\n@default size: ButtonIconSize.Md" }, "endButtonIconProps": { "required": false, "tsType": { "name": "Array", "elements": [ { "name": "intersection", "raw": "ButtonIconPropsShared & {\n /**\n * Optional prop to pass additional properties to the icon\n */\n iconProps?: Partial;\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n /**\n * Optional prop to control the style.\n */\n style?: StyleProp;\n} & Omit", "elements": [ { "name": "ButtonIconPropsShared" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to pass additional properties to the icon\n */\n iconProps?: Partial;\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n /**\n * Optional prop to control the style.\n */\n style?: StyleProp;\n}", "signature": { "properties": [ { "key": "iconProps", "value": { "name": "Partial", "elements": [ { "name": "intersection", "raw": "IconPropsShared & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n} & Omit", "elements": [ { "name": "IconPropsShared" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } }, { "name": "Omit", "elements": [ { "name": "SvgProps" }, { "name": "union", "raw": "'color' | 'name'", "elements": [ { "name": "literal", "value": "'color'" }, { "name": "literal", "value": "'name'" } ] } ], "raw": "Omit" } ] } ], "raw": "Partial", "required": false }, "description": "Optional prop to pass additional properties to the icon" }, { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." }, { "key": "style", "value": { "name": "StyleProp", "elements": [ { "name": "ViewStyle" } ], "raw": "StyleProp", "required": false }, "description": "Optional prop to control the style." } ] } }, { "name": "Omit", "elements": [ { "name": "PressableProps" }, { "name": "literal", "value": "'children'" } ], "raw": "Omit" } ] } ], "raw": "ButtonIconProps[]" }, "description": "Optional array of ButtonIcon props to render multiple ButtonIcons as end accessories.\nRendered in reverse order (first item appears rightmost).\nOnly used if endAccessory is not provided.\nThis is the built-in multiple-action path for HeaderBase; for custom layouts,\nuse `endAccessory`.\n\n@default size: ButtonIconSize.Md for each" }, "includesTopInset": { "required": false, "tsType": { "name": "boolean" }, "description": "Optional prop to include the top inset to make sure the header is visible\nbelow device's notch.\n\n@default false", "defaultValue": { "value": "false", "computed": false } }, "startAccessoryWrapperProps": { "required": false, "tsType": { "name": "ViewProps" }, "description": "Optional props to pass to the start accessory wrapper View." }, "endAccessoryWrapperProps": { "required": false, "tsType": { "name": "ViewProps" }, "description": "Optional props to pass to the end accessory wrapper View." }, "childrenWrapperProps": { "required": false, "tsType": { "name": "ViewProps" }, "description": "Optional props to pass to the title wrapper View." }, "textProps": { "required": false, "tsType": { "name": "Omit", "elements": [ { "name": "Partial", "elements": [ { "name": "intersection", "raw": "TextPropsShared &\nRNTextProps & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "elements": [ { "name": "TextPropsShared" }, { "name": "RNTextProps" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } } ] } ], "raw": "Partial" }, { "name": "literal", "value": "'children'" } ], "raw": "Omit, 'children'>" }, "description": "Optional props passed to the Text component when children is a string.\nProps are spread onto TextOrChildren `textProps` and can override default values." }, "twClassName": { "required": false, "tsType": { "name": "string" }, "description": "Optional Tailwind class names for the header container.\nMerged with default styles using tw.style()." } } }, "stories": [ { "id": "components-headerbase--default", "name": "Default", "snippet": "const Default = () => Header title;" }, { "id": "components-headerbase--tw-class-name", "name": "Tw Class Name", "snippet": "const TwClassName = () => (\n \n Header with custom styles\n \n);" }, { "id": "components-headerbase--start-button-icon-props", "name": "Start Button Icon Props", "snippet": "const StartButtonIconProps = () => (\n console.log('Back pressed'),\n }}\n >\n With start button\n \n);" }, { "id": "components-headerbase--end-button-icon-props", "name": "End Button Icon Props", "snippet": "const EndButtonIconProps = () => (\n console.log('Close pressed'),\n },\n ]}\n >\n With end button\n \n);" }, { "id": "components-headerbase--multiple-end-button-icon-props", "name": "Multiple End Button Icon Props", "snippet": "const MultipleEndButtonIconProps = () => (\n console.log('Close pressed'),\n },\n {\n iconName: IconName.Search,\n onPress: () => console.log('Search pressed'),\n },\n {\n iconName: IconName.Setting,\n onPress: () => console.log('Settings pressed'),\n },\n ]}\n >\n Multiple end buttons\n \n);" }, { "id": "components-headerbase--start-accessory", "name": "Start Accessory", "snippet": "const StartAccessory = () => (\n console.log('Back pressed')}\n />\n }\n >\n With start accessory\n \n);" }, { "id": "components-headerbase--end-accessory", "name": "End Accessory", "snippet": "const EndAccessory = () => (\n console.log('Close pressed')}\n />\n }\n >\n With end accessory\n \n);" }, { "id": "components-headerbase--both-accessories", "name": "Both Accessories", "snippet": "const BothAccessories = () => (\n console.log('Back pressed')}\n />\n }\n endAccessory={\n console.log('Close pressed')}\n />\n }\n >\n Both accessories\n \n);" }, { "id": "components-headerbase--children", "name": "Children", "snippet": "const Children = () => (\n console.log('Back pressed'),\n }}\n >\n \n Custom title\n Subtitle text\n \n \n);" } ], "import": "import { Box, ButtonIcon, HeaderBase, Text } from '@metamask/design-system-react-native';\nimport { View } from 'react-native';" }, "components-headerroot": { "id": "components-headerroot", "name": "HeaderRoot", "path": "../../packages/design-system-react-native/src/components/HeaderRoot/HeaderRoot.stories.tsx", "jsDocTags": {}, "reactDocgen": { "description": "", "methods": [], "displayName": "HeaderRoot", "definedInFile": "/home/runner/work/metamask-design-system/metamask-design-system/packages/design-system-react-native/src/components/HeaderRoot/HeaderRoot.tsx", "actualName": "HeaderRoot", "exportName": "HeaderRoot", "props": { "children": { "required": false, "tsType": { "name": "ReactNode" }, "description": "Optional custom content for the left section.\nWhen provided, title/titleAccessory are not rendered (mutually exclusive)." }, "titleAccessory": { "required": false, "tsType": { "name": "ReactNode" }, "description": "Optional content displayed after the title in the title row.\nOnly used when children is not provided and title or titleAccessory is set." }, "title": { "required": false, "tsType": { "name": "ReactNode" }, "description": "Optional main title. Can be a string or a React node.\nOnly used when children is not provided.\nWhen string: rendered via TextOrChildren with TextVariant.HeadingLg; titleProps apply.\nWhen node: rendered via TextOrChildren as-is; titleProps are not applied to the node." }, "titleProps": { "required": false, "tsType": { "name": "Partial", "elements": [ { "name": "intersection", "raw": "TextPropsShared &\nRNTextProps & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "elements": [ { "name": "TextPropsShared" }, { "name": "RNTextProps" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } } ] } ], "raw": "Partial" }, "description": "Optional props passed to the Text component when title is a string (TextOrChildren textProps)." }, "endAccessory": { "required": false, "tsType": { "name": "ReactNode" }, "description": "Optional content to be displayed in the end section.\nTakes priority over endButtonIconProps if both are provided." }, "endButtonIconProps": { "required": false, "tsType": { "name": "Array", "elements": [ { "name": "intersection", "raw": "ButtonIconPropsShared & {\n /**\n * Optional prop to pass additional properties to the icon\n */\n iconProps?: Partial;\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n /**\n * Optional prop to control the style.\n */\n style?: StyleProp;\n} & Omit", "elements": [ { "name": "ButtonIconPropsShared" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to pass additional properties to the icon\n */\n iconProps?: Partial;\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n /**\n * Optional prop to control the style.\n */\n style?: StyleProp;\n}", "signature": { "properties": [ { "key": "iconProps", "value": { "name": "Partial", "elements": [ { "name": "intersection", "raw": "IconPropsShared & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n} & Omit", "elements": [ { "name": "IconPropsShared" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } }, { "name": "Omit", "elements": [ { "name": "SvgProps" }, { "name": "union", "raw": "'color' | 'name'", "elements": [ { "name": "literal", "value": "'color'" }, { "name": "literal", "value": "'name'" } ] } ], "raw": "Omit" } ] } ], "raw": "Partial", "required": false }, "description": "Optional prop to pass additional properties to the icon" }, { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." }, { "key": "style", "value": { "name": "StyleProp", "elements": [ { "name": "ViewStyle" } ], "raw": "StyleProp", "required": false }, "description": "Optional prop to control the style." } ] } }, { "name": "Omit", "elements": [ { "name": "PressableProps" }, { "name": "literal", "value": "'children'" } ], "raw": "Omit" } ] } ], "raw": "ButtonIconProps[]" }, "description": "Optional array of ButtonIcon props to render multiple ButtonIcons as end accessories.\nRendered in reverse order (first item appears rightmost).\nOnly used if endAccessory is not provided." }, "includesTopInset": { "required": false, "tsType": { "name": "boolean" }, "description": "Optional prop to include the top inset so the header is visible below the device safe area.", "defaultValue": { "value": "false", "computed": false } }, "style": { "required": false, "tsType": { "name": "StyleProp", "elements": [ { "name": "ViewStyle" } ], "raw": "StyleProp" }, "description": "Optional style for the header container." }, "testID": { "required": false, "tsType": { "name": "string" }, "description": "Optional test ID for the header container." }, "twClassName": { "required": false, "tsType": { "name": "string" }, "description": "Optional Tailwind class names for the header container." } } }, "stories": [ { "id": "components-headerroot--default", "name": "Default", "snippet": "const Default = () => ;" }, { "id": "components-headerroot--title", "name": "Title", "snippet": "const Title = () => (\n \n Custom node title\n \n }\n />\n);" }, { "id": "components-headerroot--title-accessory", "name": "Title Accessory", "snippet": "const TitleAccessory = () => (\n \n }\n />\n);" }, { "id": "components-headerroot--children", "name": "Children", "snippet": "const Children = () => (\n console.log('Menu pressed'),\n },\n {\n iconName: IconName.Card,\n onPress: () => console.log('Card pressed'),\n },\n {\n iconName: IconName.Copy,\n onPress: () => console.log('Copy pressed'),\n },\n ]}\n >\n \n \n Imported Account 1 with a really long name\n \n \n \n \n);" }, { "id": "components-headerroot--end-accessory", "name": "End Accessory", "snippet": "const EndAccessory = () => (\n Custom end}\n />\n);" }, { "id": "components-headerroot--end-button-icon-props", "name": "End Button Icon Props", "snippet": "const EndButtonIconProps = () => (\n console.log('Settings pressed'),\n },\n ]}\n />\n);" }, { "id": "components-headerroot--end-button-icon-props-multiple", "name": "End Button Icon Props Multiple", "snippet": "const EndButtonIconPropsMultiple = () => (\n console.log('Search pressed'),\n },\n {\n iconName: IconName.Close,\n onPress: () => console.log('Close pressed'),\n },\n ]}\n />\n);" } ], "import": "import { Box, HeaderRoot, Icon, Text } from '@metamask/design-system-react-native';" }, "components-headersearch": { "id": "components-headersearch", "name": "HeaderSearch", "path": "../../packages/design-system-react-native/src/components/HeaderSearch/HeaderSearch.stories.tsx", "jsDocTags": { "example": [ "// Screen variant with back button setSearchText(''), placeholder: 'Search...', }} />", "// Inline variant with cancel button setSearchText(''), placeholder: 'Search...', }} />" ], "param": [ "props - Header row props (discriminated by `variant`)." ], "returns": [ "The header search UI for the active variant." ] }, "description": "HeaderSearch is a header component that combines a search field\nwith either a back button (screen variant) or cancel button (inline variant).", "reactDocgen": { "description": "HeaderSearch is a header component that combines a search field\nwith either a back button (screen variant) or cancel button (inline variant).\n\n@example\n// Screen variant with back button\n setSearchText(''),\n placeholder: 'Search...',\n }}\n/>\n\n@example\n// Inline variant with cancel button\n setSearchText(''),\n placeholder: 'Search...',\n }}\n/>\n\n@param props - Header row props (discriminated by `variant`).\n@returns The header search UI for the active variant.", "methods": [], "displayName": "HeaderSearch", "definedInFile": "/home/runner/work/metamask-design-system/metamask-design-system/packages/design-system-react-native/src/components/HeaderSearch/HeaderSearch.tsx", "actualName": "HeaderSearch", "exportName": "HeaderSearch" }, "stories": [ { "id": "components-headersearch--default", "name": "Default", "snippet": "const Default = (args) => {\n const [value, setValue] = useState('');\n const textFieldSearchProps = {\n inputAccessibilityLabel: 'Search',\n value,\n onChangeText: setValue,\n onPressClearButton: () => setValue(''),\n placeholder: 'Search...',\n };\n\n if (args.variant === HeaderSearchVariant.Screen) {\n return (\n \n );\n }\n\n return (\n \n );\n};" }, { "id": "components-headersearch--variant", "name": "Variant", "snippet": "const Variant = () => {\n const [screenValue, setScreenValue] = useState('');\n const [inlineValue, setInlineValue] = useState('');\n\n return (\n \n \n HeaderSearchVariant.Screen\n \n setScreenValue(''),\n placeholder: 'Search tokens, sites, URLs',\n }}\n />\n \n HeaderSearchVariant.Inline\n \n setInlineValue(''),\n placeholder: 'Search tokens, sites, URLs',\n }}\n />\n \n );\n};" }, { "id": "components-headersearch--back-button-props", "name": "Back Button Props", "snippet": "const BackButtonProps = () => {\n const [value, setValue] = useState('');\n\n return (\n setValue(''),\n placeholder: 'Search tokens, sites, URLs',\n }}\n />\n );\n};" }, { "id": "components-headersearch--cancel-button-props", "name": "Cancel Button Props", "snippet": "const CancelButtonProps = () => {\n const [value, setValue] = useState('');\n\n return (\n setValue(''),\n placeholder: 'Search tokens, sites, URLs',\n }}\n />\n );\n};" } ], "import": "import { Box, HeaderSearch, Text } from '@metamask/design-system-react-native';\nimport { HeaderSearchVariant } from '.';" }, "components-headerstandard": { "id": "components-headerstandard", "name": "HeaderStandard", "path": "../../packages/design-system-react-native/src/components/HeaderStandard/HeaderStandard.stories.tsx", "jsDocTags": {}, "reactDocgen": { "description": "", "methods": [], "displayName": "HeaderStandard", "definedInFile": "/home/runner/work/metamask-design-system/metamask-design-system/packages/design-system-react-native/src/components/HeaderStandard/HeaderStandard.tsx", "actualName": "HeaderStandard", "exportName": "HeaderStandard", "props": { "children": { "required": false, "tsType": { "name": "union", "raw": "ReactNode | string", "elements": [ { "name": "ReactNode" }, { "name": "string" } ] }, "description": "Title of the HeaderBase. Pass a string for automatic Text rendering,\nor a ReactNode for custom content." }, "style": { "required": false, "tsType": { "name": "StyleProp", "elements": [ { "name": "ViewStyle" } ], "raw": "StyleProp" }, "description": "Optional style for the header container." }, "startAccessory": { "required": false, "tsType": { "name": "ReactNode" }, "description": "Optional prop to include content to be displayed before the title.\nTakes priority over startButtonIconProps if both are provided." }, "endAccessory": { "required": false, "tsType": { "name": "ReactNode" }, "description": "Optional prop to include content to be displayed after the title.\nTakes priority over endButtonIconProps if both are provided." }, "startButtonIconProps": { "required": false, "tsType": { "name": "intersection", "raw": "ButtonIconPropsShared & {\n /**\n * Optional prop to pass additional properties to the icon\n */\n iconProps?: Partial;\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n /**\n * Optional prop to control the style.\n */\n style?: StyleProp;\n} & Omit", "elements": [ { "name": "ButtonIconPropsShared" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to pass additional properties to the icon\n */\n iconProps?: Partial;\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n /**\n * Optional prop to control the style.\n */\n style?: StyleProp;\n}", "signature": { "properties": [ { "key": "iconProps", "value": { "name": "Partial", "elements": [ { "name": "intersection", "raw": "IconPropsShared & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n} & Omit", "elements": [ { "name": "IconPropsShared" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } }, { "name": "Omit", "elements": [ { "name": "SvgProps" }, { "name": "union", "raw": "'color' | 'name'", "elements": [ { "name": "literal", "value": "'color'" }, { "name": "literal", "value": "'name'" } ] } ], "raw": "Omit" } ] } ], "raw": "Partial", "required": false }, "description": "Optional prop to pass additional properties to the icon" }, { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." }, { "key": "style", "value": { "name": "StyleProp", "elements": [ { "name": "ViewStyle" } ], "raw": "StyleProp", "required": false }, "description": "Optional prop to control the style." } ] } }, { "name": "Omit", "elements": [ { "name": "PressableProps" }, { "name": "literal", "value": "'children'" } ], "raw": "Omit" } ] }, "description": "Optional ButtonIcon props to render a ButtonIcon as the start accessory.\nOnly used if startAccessory is not provided.\nFor multiple start-side actions, compose them explicitly with `startAccessory`.\n\n@default size: ButtonIconSize.Md" }, "endButtonIconProps": { "required": false, "tsType": { "name": "Array", "elements": [ { "name": "intersection", "raw": "ButtonIconPropsShared & {\n /**\n * Optional prop to pass additional properties to the icon\n */\n iconProps?: Partial;\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n /**\n * Optional prop to control the style.\n */\n style?: StyleProp;\n} & Omit", "elements": [ { "name": "ButtonIconPropsShared" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to pass additional properties to the icon\n */\n iconProps?: Partial;\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n /**\n * Optional prop to control the style.\n */\n style?: StyleProp;\n}", "signature": { "properties": [ { "key": "iconProps", "value": { "name": "Partial", "elements": [ { "name": "intersection", "raw": "IconPropsShared & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n} & Omit", "elements": [ { "name": "IconPropsShared" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } }, { "name": "Omit", "elements": [ { "name": "SvgProps" }, { "name": "union", "raw": "'color' | 'name'", "elements": [ { "name": "literal", "value": "'color'" }, { "name": "literal", "value": "'name'" } ] } ], "raw": "Omit" } ] } ], "raw": "Partial", "required": false }, "description": "Optional prop to pass additional properties to the icon" }, { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." }, { "key": "style", "value": { "name": "StyleProp", "elements": [ { "name": "ViewStyle" } ], "raw": "StyleProp", "required": false }, "description": "Optional prop to control the style." } ] } }, { "name": "Omit", "elements": [ { "name": "PressableProps" }, { "name": "literal", "value": "'children'" } ], "raw": "Omit" } ] } ], "raw": "ButtonIconProps[]" }, "description": "Optional array of ButtonIcon props to render multiple ButtonIcons as end accessories.\nRendered in reverse order (first item appears rightmost).\nOnly used if endAccessory is not provided.\nThis is the built-in multiple-action path for HeaderBase; for custom layouts,\nuse `endAccessory`.\n\n@default size: ButtonIconSize.Md for each" }, "includesTopInset": { "required": false, "tsType": { "name": "boolean" }, "description": "Optional prop to include the top inset to make sure the header is visible\nbelow device's notch.\n\n@default false" }, "startAccessoryWrapperProps": { "required": false, "tsType": { "name": "ViewProps" }, "description": "Optional props to pass to the start accessory wrapper View." }, "endAccessoryWrapperProps": { "required": false, "tsType": { "name": "ViewProps" }, "description": "Optional props to pass to the end accessory wrapper View." }, "childrenWrapperProps": { "required": false, "tsType": { "name": "ViewProps" }, "description": "Optional props to pass to the title wrapper View." }, "textProps": { "required": false, "tsType": { "name": "Omit", "elements": [ { "name": "Partial", "elements": [ { "name": "intersection", "raw": "TextPropsShared &\nRNTextProps & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "elements": [ { "name": "TextPropsShared" }, { "name": "RNTextProps" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } } ] } ], "raw": "Partial" }, { "name": "literal", "value": "'children'" } ], "raw": "Omit, 'children'>" }, "description": "Optional props passed to the Text component when children is a string.\nProps are spread onto TextOrChildren `textProps` and can override default values." }, "twClassName": { "required": false, "tsType": { "name": "string" }, "description": "Optional Tailwind class names for the header container.\nMerged with default styles using tw.style().", "defaultValue": { "value": "''", "computed": false } }, "title": { "required": false, "tsType": { "name": "union", "raw": "string | React.ReactNode", "elements": [ { "name": "string" }, { "name": "ReactReactNode", "raw": "React.ReactNode" } ] }, "description": "Title to display in the header. Can be a string or a React node.\nUsed as children if children prop is not provided.\nWhen string: rendered with TextVariant.BodyMd and FontWeight.Bold by default; titleProps apply.\nWhen node: rendered as-is; titleProps are not applied." }, "titleProps": { "required": false, "tsType": { "name": "Partial", "elements": [ { "name": "intersection", "raw": "TextPropsShared &\nRNTextProps & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "elements": [ { "name": "TextPropsShared" }, { "name": "RNTextProps" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } } ] } ], "raw": "Partial" }, "description": "Additional props to pass to the title Text component.\nProps are spread to the Text component and can override default values.\nOnly applied when title is a string." }, "subtitle": { "required": false, "tsType": { "name": "union", "raw": "string | React.ReactNode", "elements": [ { "name": "string" }, { "name": "ReactReactNode", "raw": "React.ReactNode" } ] }, "description": "Subtitle to display below the title. Can be a string or a React node.\nWhen string: rendered with TextVariant.BodySm and TextColor.TextAlternative by default; subtitleProps apply.\nWhen node: rendered as-is; subtitleProps are not applied (add spacing on your root if needed, e.g. twClassName)." }, "subtitleProps": { "required": false, "tsType": { "name": "Partial", "elements": [ { "name": "intersection", "raw": "TextPropsShared &\nRNTextProps & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "elements": [ { "name": "TextPropsShared" }, { "name": "RNTextProps" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } } ] } ], "raw": "Partial" }, "description": "Additional props to pass to the subtitle Text component.\nProps are spread to the Text component and can override default values.\nOnly applied when subtitle is a string." }, "onBack": { "required": false, "tsType": { "name": "signature", "type": "function", "raw": "() => void", "signature": { "arguments": [], "return": { "name": "void" } } }, "description": "Callback when the back button is pressed.\nIf provided, a back button will be rendered as startButtonIconProps." }, "backButtonProps": { "required": false, "tsType": { "name": "Omit", "elements": [ { "name": "intersection", "raw": "ButtonIconPropsShared & {\n /**\n * Optional prop to pass additional properties to the icon\n */\n iconProps?: Partial;\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n /**\n * Optional prop to control the style.\n */\n style?: StyleProp;\n} & Omit", "elements": [ { "name": "ButtonIconPropsShared" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to pass additional properties to the icon\n */\n iconProps?: Partial;\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n /**\n * Optional prop to control the style.\n */\n style?: StyleProp;\n}", "signature": { "properties": [ { "key": "iconProps", "value": { "name": "Partial", "elements": [ { "name": "intersection", "raw": "IconPropsShared & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n} & Omit", "elements": [ { "name": "IconPropsShared" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } }, { "name": "Omit", "elements": [ { "name": "SvgProps" }, { "name": "union", "raw": "'color' | 'name'", "elements": [ { "name": "literal", "value": "'color'" }, { "name": "literal", "value": "'name'" } ] } ], "raw": "Omit" } ] } ], "raw": "Partial", "required": false }, "description": "Optional prop to pass additional properties to the icon" }, { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." }, { "key": "style", "value": { "name": "StyleProp", "elements": [ { "name": "ViewStyle" } ], "raw": "StyleProp", "required": false }, "description": "Optional prop to control the style." } ] } }, { "name": "Omit", "elements": [ { "name": "PressableProps" }, { "name": "literal", "value": "'children'" } ], "raw": "Omit" } ] }, { "name": "literal", "value": "'iconName'" } ], "raw": "Omit" }, "description": "Additional props to pass to the back ButtonIcon.\nIf provided, a back button will be rendered as startButtonIconProps with these props spread." }, "onClose": { "required": false, "tsType": { "name": "signature", "type": "function", "raw": "() => void", "signature": { "arguments": [], "return": { "name": "void" } } }, "description": "Callback when the close button is pressed.\nIf provided, a close button will be added to endButtonIconProps." }, "closeButtonProps": { "required": false, "tsType": { "name": "Omit", "elements": [ { "name": "intersection", "raw": "ButtonIconPropsShared & {\n /**\n * Optional prop to pass additional properties to the icon\n */\n iconProps?: Partial;\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n /**\n * Optional prop to control the style.\n */\n style?: StyleProp;\n} & Omit", "elements": [ { "name": "ButtonIconPropsShared" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to pass additional properties to the icon\n */\n iconProps?: Partial;\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n /**\n * Optional prop to control the style.\n */\n style?: StyleProp;\n}", "signature": { "properties": [ { "key": "iconProps", "value": { "name": "Partial", "elements": [ { "name": "intersection", "raw": "IconPropsShared & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n} & Omit", "elements": [ { "name": "IconPropsShared" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } }, { "name": "Omit", "elements": [ { "name": "SvgProps" }, { "name": "union", "raw": "'color' | 'name'", "elements": [ { "name": "literal", "value": "'color'" }, { "name": "literal", "value": "'name'" } ] } ], "raw": "Omit" } ] } ], "raw": "Partial", "required": false }, "description": "Optional prop to pass additional properties to the icon" }, { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." }, { "key": "style", "value": { "name": "StyleProp", "elements": [ { "name": "ViewStyle" } ], "raw": "StyleProp", "required": false }, "description": "Optional prop to control the style." } ] } }, { "name": "Omit", "elements": [ { "name": "PressableProps" }, { "name": "literal", "value": "'children'" } ], "raw": "Omit" } ] }, { "name": "literal", "value": "'iconName'" } ], "raw": "Omit" }, "description": "Additional props to pass to the close ButtonIcon.\nIf provided, a close button will be added to endButtonIconProps with these props spread." } } }, "stories": [ { "id": "components-headerstandard--default", "name": "Default", "snippet": "const Default = () => ;" }, { "id": "components-headerstandard--subtitle", "name": "Subtitle", "snippet": "const Subtitle = () => null} />;" }, { "id": "components-headerstandard--on-back", "name": "On Back", "snippet": "const OnBack = () => null} />;" }, { "id": "components-headerstandard--on-close", "name": "On Close", "snippet": "const OnClose = () => null} />;" }, { "id": "components-headerstandard--back-and-close", "name": "Back And Close", "snippet": "const BackAndClose = () => null} onClose={() => null} />;" }, { "id": "components-headerstandard--end-button-icon-props", "name": "End Button Icon Props", "snippet": "const EndButtonIconProps = () => null}\n onClose={() => null}\n endButtonIconProps={[\n {\n iconName: IconName.Search,\n onPress: () => null,\n },\n ]} />;" }, { "id": "components-headerstandard--children", "name": "Children", "snippet": "const Children = () => (\n null}>\n \n Custom title\n Subtitle text\n \n \n);" } ], "import": "import { Box, HeaderStandard, Text } from '@metamask/design-system-react-native';\nimport { IconName } from '../Icon';" }, "components-headerstandardanimated": { "id": "components-headerstandardanimated", "name": "HeaderStandardAnimated as unknown as ComponentType", "path": "../../packages/design-system-react-native/src/components/HeaderStandardAnimated/HeaderStandardAnimated.stories.tsx", "jsDocTags": {}, "error": { "name": "No component import found", "message": "No component file found for the \"HeaderStandardAnimated as unknown as ComponentType\" component.\n 18 | >;\n 19 |\n> 20 | const meta: Meta = {\n | ^\n 21 | title: 'Components/HeaderStandardAnimated',\n 22 | component:\n 23 | HeaderStandardAnimated as unknown as ComponentType,\n\n../../packages/design-system-react-native/src/components/HeaderStandardAnimated/HeaderStandardAnimated.stories.tsx:\nimport type { Meta, StoryObj } from '@storybook/react-native';\nimport type { ComponentType } from 'react';\nimport React from 'react';\nimport Animated from 'react-native-reanimated';\n\nimport { Box } from '../Box';\nimport { IconName } from '../Icon';\nimport { Text, TextColor, TextVariant } from '../Text';\nimport { TitleStandard } from '../TitleStandard';\n\nimport { HeaderStandardAnimated } from './HeaderStandardAnimated';\nimport type { HeaderStandardAnimatedProps } from './HeaderStandardAnimated.types';\nimport { useHeaderStandardAnimated } from './useHeaderStandardAnimated';\n\ntype ScrollStoryArgs = Omit<\n HeaderStandardAnimatedProps,\n 'scrollY' | 'titleSectionHeight' | 'children'\n>;\n\nconst meta: Meta = {\n title: 'Components/HeaderStandardAnimated',\n component:\n HeaderStandardAnimated as unknown as ComponentType,\n parameters: {\n docs: {\n description: {\n component:\n 'Scroll-linked header: the center title animates with scroll position. Use `useHeaderStandardAnimated` for `scrollY`, `titleSectionHeight`, and `onScroll`, and attach `onScroll` to `Animated.ScrollView`. Use `HeaderStandard` when you do not need this behavior.',\n },\n },\n },\n argTypes: {\n title: { control: 'text' },\n subtitle: { control: 'text' },\n },\n decorators: [\n (Story) => (\n \n \n \n ),\n ],\n};\n\nexport default meta;\n\ntype Story = StoryObj;\n\nconst SampleContent = ({ itemCount = 20 }: { itemCount?: number }) => (\n <>\n {Array.from({ length: itemCount }).map((_, index) => (\n \n Item {index + 1}\n \n This is sample content to demonstrate scrolling behavior.\n \n \n ))}\n \n);\n\nfunction ScrollDemo(args: ScrollStoryArgs) {\n const { scrollY, onScroll, setTitleSectionHeight, titleSectionHeightSv } =\n useHeaderStandardAnimated();\n\n return (\n \n \n \n setTitleSectionHeight(e.nativeEvent.layout.height)}\n >\n \n Perps\n \n }\n title=\"ETH-PERP\"\n twClassName=\"px-4 pt-1 pb-3\"\n />\n \n \n \n \n );\n}\n\nexport const Default: Story = {\n args: {\n title: 'Market',\n },\n render: (args) => ,\n};\n\nexport const Subtitle: Story = {\n args: {\n title: 'Market',\n subtitle: 'Perpetual futures',\n onBack: () => undefined,\n },\n render: (args) => ,\n};\n\nexport const OnBack: Story = {\n args: {\n title: 'Settings',\n onBack: () => undefined,\n },\n render: (args) => ,\n};\n\nexport const OnClose: Story = {\n args: {\n title: 'Modal title',\n onClose: () => undefined,\n },\n render: (args) => ,\n};\n\nexport const BackAndClose: Story = {\n args: {\n title: 'Settings',\n onBack: () => undefined,\n onClose: () => undefined,\n },\n render: (args) => ,\n};\n\nexport const EndButtonIconProps: Story = {\n args: {\n title: 'Search',\n onBack: () => undefined,\n onClose: () => undefined,\n endButtonIconProps: [\n {\n iconName: IconName.Search,\n onPress: () => undefined,\n },\n ],\n },\n render: (args) => ,\n};\n" }, "stories": [ { "id": "components-headerstandardanimated--default", "name": "Default", "snippet": "const Default = () => ;" }, { "id": "components-headerstandardanimated--subtitle", "name": "Subtitle", "snippet": "const Subtitle = () => undefined} />;" }, { "id": "components-headerstandardanimated--on-back", "name": "On Back", "snippet": "const OnBack = () => undefined} />;" }, { "id": "components-headerstandardanimated--on-close", "name": "On Close", "snippet": "const OnClose = () => undefined} />;" }, { "id": "components-headerstandardanimated--back-and-close", "name": "Back And Close", "snippet": "const BackAndClose = () => undefined} onClose={() => undefined} />;" }, { "id": "components-headerstandardanimated--end-button-icon-props", "name": "End Button Icon Props", "snippet": "const EndButtonIconProps = () => undefined}\n onClose={() => undefined}\n endButtonIconProps={[\n {\n iconName: IconName.Search,\n onPress: () => undefined,\n },\n ]} />;" } ], "import": "import Animated from 'react-native-reanimated';\nimport { Box, HeaderStandardAnimated, Text, TitleStandard } from '@metamask/design-system-react-native';\nimport { IconName } from '../Icon';" }, "components-headersubpage": { "id": "components-headersubpage", "name": "HeaderSubpage", "path": "../../packages/design-system-react-native/src/components/HeaderSubpage/HeaderSubpage.stories.tsx", "jsDocTags": {}, "reactDocgen": { "description": "", "methods": [], "displayName": "HeaderSubpage", "definedInFile": "/home/runner/work/metamask-design-system/metamask-design-system/packages/design-system-react-native/src/components/HeaderSubpage/HeaderSubpage.tsx", "actualName": "HeaderSubpage", "exportName": "HeaderSubpage", "props": { "backButtonProps": { "required": false, "tsType": { "name": "Omit", "elements": [ { "name": "intersection", "raw": "ButtonIconPropsShared & {\n /**\n * Optional prop to pass additional properties to the icon\n */\n iconProps?: Partial;\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n /**\n * Optional prop to control the style.\n */\n style?: StyleProp;\n} & Omit", "elements": [ { "name": "ButtonIconPropsShared" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to pass additional properties to the icon\n */\n iconProps?: Partial;\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n /**\n * Optional prop to control the style.\n */\n style?: StyleProp;\n}", "signature": { "properties": [ { "key": "iconProps", "value": { "name": "Partial", "elements": [ { "name": "intersection", "raw": "IconPropsShared & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n} & Omit", "elements": [ { "name": "IconPropsShared" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } }, { "name": "Omit", "elements": [ { "name": "SvgProps" }, { "name": "union", "raw": "'color' | 'name'", "elements": [ { "name": "literal", "value": "'color'" }, { "name": "literal", "value": "'name'" } ] } ], "raw": "Omit" } ] } ], "raw": "Partial", "required": false }, "description": "Optional prop to pass additional properties to the icon" }, { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." }, { "key": "style", "value": { "name": "StyleProp", "elements": [ { "name": "ViewStyle" } ], "raw": "StyleProp", "required": false }, "description": "Optional prop to control the style." } ] } }, { "name": "Omit", "elements": [ { "name": "PressableProps" }, { "name": "literal", "value": "'children'" } ], "raw": "Omit" } ] }, { "name": "literal", "value": "'iconName'" } ], "raw": "Omit" }, "description": "Additional props to pass to the back ButtonIcon.\nIf provided, a back button will be rendered with these props spread." }, "closeButtonProps": { "required": false, "tsType": { "name": "Omit", "elements": [ { "name": "intersection", "raw": "ButtonIconPropsShared & {\n /**\n * Optional prop to pass additional properties to the icon\n */\n iconProps?: Partial;\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n /**\n * Optional prop to control the style.\n */\n style?: StyleProp;\n} & Omit", "elements": [ { "name": "ButtonIconPropsShared" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to pass additional properties to the icon\n */\n iconProps?: Partial;\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n /**\n * Optional prop to control the style.\n */\n style?: StyleProp;\n}", "signature": { "properties": [ { "key": "iconProps", "value": { "name": "Partial", "elements": [ { "name": "intersection", "raw": "IconPropsShared & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n} & Omit", "elements": [ { "name": "IconPropsShared" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } }, { "name": "Omit", "elements": [ { "name": "SvgProps" }, { "name": "union", "raw": "'color' | 'name'", "elements": [ { "name": "literal", "value": "'color'" }, { "name": "literal", "value": "'name'" } ] } ], "raw": "Omit" } ] } ], "raw": "Partial", "required": false }, "description": "Optional prop to pass additional properties to the icon" }, { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." }, { "key": "style", "value": { "name": "StyleProp", "elements": [ { "name": "ViewStyle" } ], "raw": "StyleProp", "required": false }, "description": "Optional prop to control the style." } ] } }, { "name": "Omit", "elements": [ { "name": "PressableProps" }, { "name": "literal", "value": "'children'" } ], "raw": "Omit" } ] }, { "name": "literal", "value": "'iconName'" } ], "raw": "Omit" }, "description": "Additional props to pass to the close ButtonIcon.\nIf provided, a close button will be added with these props spread." }, "startButtonIconProps": { "required": false, "tsType": { "name": "intersection", "raw": "ButtonIconPropsShared & {\n /**\n * Optional prop to pass additional properties to the icon\n */\n iconProps?: Partial;\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n /**\n * Optional prop to control the style.\n */\n style?: StyleProp;\n} & Omit", "elements": [ { "name": "ButtonIconPropsShared" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to pass additional properties to the icon\n */\n iconProps?: Partial;\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n /**\n * Optional prop to control the style.\n */\n style?: StyleProp;\n}", "signature": { "properties": [ { "key": "iconProps", "value": { "name": "Partial", "elements": [ { "name": "intersection", "raw": "IconPropsShared & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n} & Omit", "elements": [ { "name": "IconPropsShared" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } }, { "name": "Omit", "elements": [ { "name": "SvgProps" }, { "name": "union", "raw": "'color' | 'name'", "elements": [ { "name": "literal", "value": "'color'" }, { "name": "literal", "value": "'name'" } ] } ], "raw": "Omit" } ] } ], "raw": "Partial", "required": false }, "description": "Optional prop to pass additional properties to the icon" }, { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." }, { "key": "style", "value": { "name": "StyleProp", "elements": [ { "name": "ViewStyle" } ], "raw": "StyleProp", "required": false }, "description": "Optional prop to control the style." } ] } }, { "name": "Omit", "elements": [ { "name": "PressableProps" }, { "name": "literal", "value": "'children'" } ], "raw": "Omit" } ] }, "description": "Optional ButtonIcon props to render as the start accessory.\nOnly used if `startAccessory` is not provided." }, "endButtonIconProps": { "required": false, "tsType": { "name": "Array", "elements": [ { "name": "intersection", "raw": "ButtonIconPropsShared & {\n /**\n * Optional prop to pass additional properties to the icon\n */\n iconProps?: Partial;\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n /**\n * Optional prop to control the style.\n */\n style?: StyleProp;\n} & Omit", "elements": [ { "name": "ButtonIconPropsShared" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to pass additional properties to the icon\n */\n iconProps?: Partial;\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n /**\n * Optional prop to control the style.\n */\n style?: StyleProp;\n}", "signature": { "properties": [ { "key": "iconProps", "value": { "name": "Partial", "elements": [ { "name": "intersection", "raw": "IconPropsShared & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n} & Omit", "elements": [ { "name": "IconPropsShared" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } }, { "name": "Omit", "elements": [ { "name": "SvgProps" }, { "name": "union", "raw": "'color' | 'name'", "elements": [ { "name": "literal", "value": "'color'" }, { "name": "literal", "value": "'name'" } ] } ], "raw": "Omit" } ] } ], "raw": "Partial", "required": false }, "description": "Optional prop to pass additional properties to the icon" }, { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." }, { "key": "style", "value": { "name": "StyleProp", "elements": [ { "name": "ViewStyle" } ], "raw": "StyleProp", "required": false }, "description": "Optional prop to control the style." } ] } }, { "name": "Omit", "elements": [ { "name": "PressableProps" }, { "name": "literal", "value": "'children'" } ], "raw": "Omit" } ] } ], "raw": "ButtonIconProps[]" }, "description": "Optional array of ButtonIcon props to render as additional end accessories.\nRendered in reverse order (first item appears rightmost).\nOnly used if `endAccessory` is not provided." }, "includesTopInset": { "required": false, "tsType": { "name": "boolean" }, "description": "When true, applies top safe-area inset as `marginTop` on the root ListItem.\n\n@default false", "defaultValue": { "value": "false", "computed": false } }, "twClassName": { "defaultValue": { "value": "''", "computed": false }, "required": false }, "accessoryGap": { "defaultValue": { "value": "2", "computed": false }, "required": false } } }, "stories": [ { "id": "components-headersubpage--default", "name": "Default", "snippet": "const Default = () => }\n title=\"Ethereum\"\n description=\"ETH\"\n titleEndAccessory={()}\n onBack={() => null} />;", "warning": "Incomplete snippet: `StoryHeaderAvatar` could not be resolved statically." }, { "id": "components-headersubpage--description", "name": "Description", "snippet": "const Description = () => } title=\"Ethereum\" description=\"ETH\" />;", "warning": "Incomplete snippet: `StoryHeaderAvatar` could not be resolved statically." }, { "id": "components-headersubpage--on-back", "name": "On Back", "snippet": "const OnBack = () => }\n title=\"Ethereum\"\n description=\"ETH\"\n onBack={() => null} />;", "warning": "Incomplete snippet: `StoryHeaderAvatar` could not be resolved statically." }, { "id": "components-headersubpage--on-close", "name": "On Close", "snippet": "const OnClose = () => }\n title=\"Ethereum\"\n description=\"ETH\"\n onClose={() => null} />;", "warning": "Incomplete snippet: `StoryHeaderAvatar` could not be resolved statically." }, { "id": "components-headersubpage--back-and-close", "name": "Back And Close", "snippet": "const BackAndClose = () => }\n title=\"Ethereum\"\n description=\"ETH\"\n onBack={() => null}\n onClose={() => null} />;", "warning": "Incomplete snippet: `StoryHeaderAvatar` could not be resolved statically." }, { "id": "components-headersubpage--end-button-icon-props", "name": "End Button Icon Props", "snippet": "const EndButtonIconProps = () => }\n title=\"Ethereum\"\n description=\"ETH\"\n onBack={() => null}\n onClose={() => null}\n endButtonIconProps={[\n {\n iconName: IconName.Search,\n onPress: () => null,\n },\n ]} />;", "warning": "Incomplete snippet: `StoryHeaderAvatar` could not be resolved statically." } ], "import": "import { AvatarToken, Box, HeaderSubpage, Icon } from '@metamask/design-system-react-native';\nimport { Icon, IconName, IconColor } from '../Icon';" }, "components-helptext": { "id": "components-helptext", "name": "HelpText", "path": "../../packages/design-system-react-native/src/components/HelpText/HelpText.stories.tsx", "jsDocTags": {}, "reactDocgen": { "description": "", "methods": [], "displayName": "HelpText", "definedInFile": "/home/runner/work/metamask-design-system/metamask-design-system/packages/design-system-react-native/src/components/HelpText/HelpText.tsx", "actualName": "HelpText", "exportName": "HelpText", "props": { "showIcon": { "defaultValue": { "value": "false", "computed": false }, "required": false }, "color": { "defaultValue": { "value": "'text-default'", "computed": false }, "required": false } } }, "stories": [ { "id": "components-helptext--default", "name": "Default", "snippet": "const Default = () => Helper message;" }, { "id": "components-helptext--severity", "name": "Severity", "snippet": "const Severity = () => (\n \n {Object.values(HelpTextSeverity).map((severity) => (\n \n {severity} severity message\n \n ))}\n \n);" }, { "id": "components-helptext--show-icon", "name": "Show Icon", "snippet": "const ShowIcon = () => (\n \n {Object.values(HelpTextSeverity).map((severity) => (\n \n {severity} severity message\n \n ))}\n \n);" }, { "id": "components-helptext--color", "name": "Color", "snippet": "const Color = () => (\n \n Default text color\n \n Alternative text color\n \n Primary text color\n \n);" } ], "import": "import { Box, HelpText } from '@metamask/design-system-react-native';" }, "components-icon": { "id": "components-icon", "name": "Icon", "path": "../../packages/design-system-react-native/src/components/Icon/Icon.stories.tsx", "jsDocTags": {}, "reactDocgen": { "description": "", "methods": [], "displayName": "Icon", "definedInFile": "/home/runner/work/metamask-design-system/metamask-design-system/packages/design-system-react-native/src/components/Icon/Icon.tsx", "actualName": "Icon", "exportName": "Icon", "props": { "twClassName": { "required": false, "tsType": { "name": "string" }, "description": "Optional prop to add twrnc overriding classNames." }, "size": { "defaultValue": { "value": "'md'", "computed": false }, "required": false }, "color": { "defaultValue": { "value": "'text-icon-default'", "computed": false }, "required": false } } }, "stories": [ { "id": "components-icon--default", "name": "Default", "snippet": "const Default = () => ;" }, { "id": "components-icon--sizes", "name": "Sizes", "snippet": "const Sizes = () => (\n \n {Object.values(IconSize).map((size) => (\n \n \n \n ))}\n \n);" }, { "id": "components-icon--colors", "name": "Colors", "snippet": "const Colors = () => (\n \n {Object.values(IconColor).map((color) => (\n \n \n \n ))}\n \n);" }, { "id": "components-icon--all-icons", "name": "All Icons", "snippet": "const AllIcons = () => (\n \n \n {Object.values(IconName).map((iconName) => (\n \n \n \n ))}\n \n \n);" } ], "import": "import { Icon } from '@metamask/design-system-react-native';\nimport { ScrollView, View } from 'react-native';\nimport { IconName, IconSize, IconColor } from '@metamask/design-system-shared';" }, "components-iconalert": { "id": "components-iconalert", "name": "IconAlert", "path": "../../packages/design-system-react-native/src/components/IconAlert/IconAlert.stories.tsx", "jsDocTags": {}, "reactDocgen": { "description": "", "methods": [], "displayName": "IconAlert", "definedInFile": "/home/runner/work/metamask-design-system/metamask-design-system/packages/design-system-react-native/src/components/IconAlert/IconAlert.tsx", "actualName": "IconAlert", "exportName": "IconAlert" }, "stories": [ { "id": "components-iconalert--default", "name": "Default", "snippet": "const Default = () => \n \n;" }, { "id": "components-iconalert--severity", "name": "Severity", "snippet": "const Severity = () => (\n \n {Object.values(IconAlertSeverity).map((severity) => (\n \n \n \n ))}\n \n);" }, { "id": "components-iconalert--size", "name": "Size", "snippet": "const Size = () => (\n \n {Object.values(IconSize).map((size) => (\n \n ))}\n \n);" } ], "import": "import { Box, IconAlert } from '@metamask/design-system-react-native';\nimport { IconAlertSeverity } from '@metamask/design-system-shared';" }, "components-input": { "id": "components-input", "name": "Input", "path": "../../packages/design-system-react-native/src/components/Input/Input.stories.tsx", "jsDocTags": {}, "reactDocgen": { "description": "", "methods": [], "displayName": "Input", "definedInFile": "/home/runner/work/metamask-design-system/metamask-design-system/packages/design-system-react-native/src/components/Input/Input.tsx", "actualName": "Input", "exportName": "Input", "props": { "twClassName": { "required": false, "tsType": { "name": "string" }, "description": "Optional prop to add twrnc overriding classNames." }, "textVariant": { "defaultValue": { "value": "'body-md'", "computed": false }, "required": false }, "isDisabled": { "defaultValue": { "value": "false", "computed": false }, "required": false }, "isReadOnly": { "defaultValue": { "value": "false", "computed": false }, "required": false }, "autoFocus": { "defaultValue": { "value": "false", "computed": false }, "required": false } } }, "stories": [ { "id": "components-input--default", "name": "Default", "snippet": "const Default = () => ;" }, { "id": "components-input--variant", "name": "Variant", "snippet": "const Variant = () => (\n \n \n \n \n \n);" }, { "id": "components-input--is-disabled", "name": "Is Disabled", "snippet": "const IsDisabled = () => (\n \n \n \n \n);" }, { "id": "components-input--is-read-only", "name": "Is Read Only", "snippet": "const IsReadOnly = () => (\n \n \n \n \n);" }, { "id": "components-input--is-state-styles-disabled", "name": "Is State Styles Disabled", "snippet": "const IsStateStylesDisabled = () => (\n \n \n \n \n);" } ], "import": "import { Input } from '@metamask/design-system-react-native';\nimport { View } from 'react-native';" }, "components-keyvaluecolumn": { "id": "components-keyvaluecolumn", "name": "KeyValueColumn", "path": "../../packages/design-system-react-native/src/components/KeyValueColumn/KeyValueColumn.stories.tsx", "jsDocTags": {}, "reactDocgen": { "description": "", "methods": [], "displayName": "KeyValueColumn", "definedInFile": "/home/runner/work/metamask-design-system/metamask-design-system/packages/design-system-react-native/src/components/KeyValueColumn/KeyValueColumn.tsx", "actualName": "KeyValueColumn", "exportName": "KeyValueColumn", "props": { "keyTextProps": { "required": false, "tsType": { "name": "Partial", "elements": [ { "name": "Omit", "elements": [ { "name": "intersection", "raw": "TextPropsShared &\nRNTextProps & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "elements": [ { "name": "TextPropsShared" }, { "name": "RNTextProps" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } } ] }, { "name": "literal", "value": "'children'" } ], "raw": "Omit" } ], "raw": "Partial>" }, "description": "Optional props for the key Text when key is a string." }, "valueTextProps": { "required": false, "tsType": { "name": "Partial", "elements": [ { "name": "Omit", "elements": [ { "name": "intersection", "raw": "TextPropsShared &\nRNTextProps & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "elements": [ { "name": "TextPropsShared" }, { "name": "RNTextProps" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } } ] }, { "name": "literal", "value": "'children'" } ], "raw": "Omit" } ], "raw": "Partial>" }, "description": "Optional props for the value Text when value is a string." }, "twClassName": { "required": false, "tsType": { "name": "string" }, "description": "Optional Tailwind class names applied to the outer BoxVertical. Merged with base styles." }, "keyEndButtonIconProps": { "required": false, "tsType": { "name": "Partial", "elements": [ { "name": "intersection", "raw": "ButtonIconPropsShared & {\n /**\n * Optional prop to pass additional properties to the icon\n */\n iconProps?: Partial;\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n /**\n * Optional prop to control the style.\n */\n style?: StyleProp;\n} & Omit", "elements": [ { "name": "ButtonIconPropsShared" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to pass additional properties to the icon\n */\n iconProps?: Partial;\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n /**\n * Optional prop to control the style.\n */\n style?: StyleProp;\n}", "signature": { "properties": [ { "key": "iconProps", "value": { "name": "Partial", "elements": [ { "name": "intersection", "raw": "IconPropsShared & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n} & Omit", "elements": [ { "name": "IconPropsShared" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } }, { "name": "Omit", "elements": [ { "name": "SvgProps" }, { "name": "union", "raw": "'color' | 'name'", "elements": [ { "name": "literal", "value": "'color'" }, { "name": "literal", "value": "'name'" } ] } ], "raw": "Omit" } ] } ], "raw": "Partial", "required": false }, "description": "Optional prop to pass additional properties to the icon" }, { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." }, { "key": "style", "value": { "name": "StyleProp", "elements": [ { "name": "ViewStyle" } ], "raw": "StyleProp", "required": false }, "description": "Optional prop to control the style." } ] } }, { "name": "Omit", "elements": [ { "name": "PressableProps" }, { "name": "literal", "value": "'children'" } ], "raw": "Omit" } ] } ], "raw": "Partial" }, "description": "When set, renders a ButtonIcon as the key endAccessory (takes precedence over keyEndAccessory)." }, "valueEndButtonIconProps": { "required": false, "tsType": { "name": "Partial", "elements": [ { "name": "intersection", "raw": "ButtonIconPropsShared & {\n /**\n * Optional prop to pass additional properties to the icon\n */\n iconProps?: Partial;\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n /**\n * Optional prop to control the style.\n */\n style?: StyleProp;\n} & Omit", "elements": [ { "name": "ButtonIconPropsShared" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to pass additional properties to the icon\n */\n iconProps?: Partial;\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n /**\n * Optional prop to control the style.\n */\n style?: StyleProp;\n}", "signature": { "properties": [ { "key": "iconProps", "value": { "name": "Partial", "elements": [ { "name": "intersection", "raw": "IconPropsShared & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n} & Omit", "elements": [ { "name": "IconPropsShared" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } }, { "name": "Omit", "elements": [ { "name": "SvgProps" }, { "name": "union", "raw": "'color' | 'name'", "elements": [ { "name": "literal", "value": "'color'" }, { "name": "literal", "value": "'name'" } ] } ], "raw": "Omit" } ] } ], "raw": "Partial", "required": false }, "description": "Optional prop to pass additional properties to the icon" }, { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." }, { "key": "style", "value": { "name": "StyleProp", "elements": [ { "name": "ViewStyle" } ], "raw": "StyleProp", "required": false }, "description": "Optional prop to control the style." } ] } }, { "name": "Omit", "elements": [ { "name": "PressableProps" }, { "name": "literal", "value": "'children'" } ], "raw": "Omit" } ] } ], "raw": "Partial" }, "description": "When set, renders a ButtonIcon as the value endAccessory (takes precedence over valueEndAccessory)." } } }, "stories": [ { "id": "components-keyvaluecolumn--default", "name": "Default", "snippet": "const Default = () => \n \n;" }, { "id": "components-keyvaluecolumn--key-start-accessory", "name": "Key Start Accessory", "snippet": "const KeyStartAccessory = () => (\n \n }\n />\n \n);" }, { "id": "components-keyvaluecolumn--key-end-accessory", "name": "Key End Accessory", "snippet": "const KeyEndAccessory = () => (\n \n }\n />\n \n);" }, { "id": "components-keyvaluecolumn--value-start-accessory", "name": "Value Start Accessory", "snippet": "const ValueStartAccessory = () => (\n \n }\n />\n \n);" }, { "id": "components-keyvaluecolumn--value-end-accessory", "name": "Value End Accessory", "snippet": "const ValueEndAccessory = () => (\n \n }\n />\n \n);" }, { "id": "components-keyvaluecolumn--key-end-button-icon-props", "name": "Key End Button Icon Props", "snippet": "const KeyEndButtonIconProps = () => (\n \n undefined,\n }}\n />\n \n);" }, { "id": "components-keyvaluecolumn--value-end-button-icon-props", "name": "Value End Button Icon Props", "snippet": "const ValueEndButtonIconProps = () => (\n \n undefined,\n }}\n />\n \n);" }, { "id": "components-keyvaluecolumn--key-text-props", "name": "Key Text Props", "snippet": "const KeyTextProps = () => (\n \n \n \n);" }, { "id": "components-keyvaluecolumn--value-text-props", "name": "Value Text Props", "snippet": "const ValueTextProps = () => (\n \n \n \n);" }, { "id": "components-keyvaluecolumn--single-column-stack", "name": "Single Column Stack", "snippet": "const SingleColumnStack = () => (\n \n \n \n }\n />\n \n }\n />\n undefined,\n }}\n />\n \n \n \n \n);", "description": "Single column of pairs (e.g. receipt lines). For token/stats summaries, prefer TwoColumnGrid." }, { "id": "components-keyvaluecolumn--two-column-grid", "name": "Two Column Grid", "snippet": "const TwoColumnGrid = () => (\n \n \n \n \n \n \n \n \n \n \n undefined,\n }}\n />\n \n \n \n);", "description": "Recommended stats layout: exactly two columns (left + right), each a vertical stack—no third column." }, { "id": "components-keyvaluecolumn--overflow", "name": "Overflow", "snippet": "const Overflow = () => (\n \n \n \n \n \n \n \n \n \n \n);", "description": "Long values in a two-column row; each half gets single-line tail ellipsis." } ], "import": "import { AvatarAccount, AvatarToken, Box, Icon, KeyValueColumn } from '@metamask/design-system-react-native';" }, "components-keyvaluerow": { "id": "components-keyvaluerow", "name": "KeyValueRow", "path": "../../packages/design-system-react-native/src/components/KeyValueRow/KeyValueRow.stories.tsx", "jsDocTags": {}, "reactDocgen": { "description": "", "methods": [], "displayName": "KeyValueRow", "definedInFile": "/home/runner/work/metamask-design-system/metamask-design-system/packages/design-system-react-native/src/components/KeyValueRow/KeyValueRow.tsx", "actualName": "KeyValueRow", "exportName": "KeyValueRow", "props": { "keyTextProps": { "required": false, "tsType": { "name": "Partial", "elements": [ { "name": "Omit", "elements": [ { "name": "intersection", "raw": "TextPropsShared &\nRNTextProps & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "elements": [ { "name": "TextPropsShared" }, { "name": "RNTextProps" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } } ] }, { "name": "literal", "value": "'children'" } ], "raw": "Omit" } ], "raw": "Partial>" }, "description": "Optional props for the key Text when key is a string." }, "valueTextProps": { "required": false, "tsType": { "name": "Partial", "elements": [ { "name": "Omit", "elements": [ { "name": "intersection", "raw": "SensitiveTextPropsShared & TextProps", "elements": [ { "name": "SensitiveTextPropsShared" }, { "name": "intersection", "raw": "TextPropsShared &\nRNTextProps & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "elements": [ { "name": "TextPropsShared" }, { "name": "RNTextProps" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } } ] } ] }, { "name": "literal", "value": "'children'" } ], "raw": "Omit" } ], "raw": "Partial>" }, "description": "Optional props for the value SensitiveText when value is a string.\nSupports Text props plus `isHidden` / `length`." }, "twClassName": { "required": false, "tsType": { "name": "string" }, "description": "Optional Tailwind class names applied to the outer BoxHorizontal. Merged with base styles." }, "keyEndButtonIconProps": { "required": false, "tsType": { "name": "Partial", "elements": [ { "name": "intersection", "raw": "ButtonIconPropsShared & {\n /**\n * Optional prop to pass additional properties to the icon\n */\n iconProps?: Partial;\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n /**\n * Optional prop to control the style.\n */\n style?: StyleProp;\n} & Omit", "elements": [ { "name": "ButtonIconPropsShared" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to pass additional properties to the icon\n */\n iconProps?: Partial;\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n /**\n * Optional prop to control the style.\n */\n style?: StyleProp;\n}", "signature": { "properties": [ { "key": "iconProps", "value": { "name": "Partial", "elements": [ { "name": "intersection", "raw": "IconPropsShared & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n} & Omit", "elements": [ { "name": "IconPropsShared" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } }, { "name": "Omit", "elements": [ { "name": "SvgProps" }, { "name": "union", "raw": "'color' | 'name'", "elements": [ { "name": "literal", "value": "'color'" }, { "name": "literal", "value": "'name'" } ] } ], "raw": "Omit" } ] } ], "raw": "Partial", "required": false }, "description": "Optional prop to pass additional properties to the icon" }, { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." }, { "key": "style", "value": { "name": "StyleProp", "elements": [ { "name": "ViewStyle" } ], "raw": "StyleProp", "required": false }, "description": "Optional prop to control the style." } ] } }, { "name": "Omit", "elements": [ { "name": "PressableProps" }, { "name": "literal", "value": "'children'" } ], "raw": "Omit" } ] } ], "raw": "Partial" }, "description": "When set, renders a ButtonIcon as the key endAccessory (takes precedence over keyEndAccessory)." }, "valueEndButtonIconProps": { "required": false, "tsType": { "name": "Partial", "elements": [ { "name": "intersection", "raw": "ButtonIconPropsShared & {\n /**\n * Optional prop to pass additional properties to the icon\n */\n iconProps?: Partial;\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n /**\n * Optional prop to control the style.\n */\n style?: StyleProp;\n} & Omit", "elements": [ { "name": "ButtonIconPropsShared" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to pass additional properties to the icon\n */\n iconProps?: Partial;\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n /**\n * Optional prop to control the style.\n */\n style?: StyleProp;\n}", "signature": { "properties": [ { "key": "iconProps", "value": { "name": "Partial", "elements": [ { "name": "intersection", "raw": "IconPropsShared & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n} & Omit", "elements": [ { "name": "IconPropsShared" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } }, { "name": "Omit", "elements": [ { "name": "SvgProps" }, { "name": "union", "raw": "'color' | 'name'", "elements": [ { "name": "literal", "value": "'color'" }, { "name": "literal", "value": "'name'" } ] } ], "raw": "Omit" } ] } ], "raw": "Partial", "required": false }, "description": "Optional prop to pass additional properties to the icon" }, { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." }, { "key": "style", "value": { "name": "StyleProp", "elements": [ { "name": "ViewStyle" } ], "raw": "StyleProp", "required": false }, "description": "Optional prop to control the style." } ] } }, { "name": "Omit", "elements": [ { "name": "PressableProps" }, { "name": "literal", "value": "'children'" } ], "raw": "Omit" } ] } ], "raw": "Partial" }, "description": "When set, renders a ButtonIcon as the value endAccessory (takes precedence over valueEndAccessory)." }, "variant": { "defaultValue": { "value": "'summary'", "computed": false }, "required": false } } }, "stories": [ { "id": "components-keyvaluerow--default", "name": "Default", "snippet": "const Default = () => ;" }, { "id": "components-keyvaluerow--variant", "name": "Variant", "snippet": "const Variant = () => (\n \n {(\n Object.entries(KeyValueRowVariant) as [\n keyof typeof KeyValueRowVariant,\n (typeof KeyValueRowVariant)[keyof typeof KeyValueRowVariant],\n ][]\n ).map(([key, rowVariant]) => (\n \n ))}\n \n);" }, { "id": "components-keyvaluerow--key-start-accessory", "name": "Key Start Accessory", "snippet": "const KeyStartAccessory = () => (\n }\n />\n);" }, { "id": "components-keyvaluerow--key-end-accessory", "name": "Key End Accessory", "snippet": "const KeyEndAccessory = () => (\n }\n />\n);" }, { "id": "components-keyvaluerow--value-start-accessory", "name": "Value Start Accessory", "snippet": "const ValueStartAccessory = () => (\n }\n />\n);" }, { "id": "components-keyvaluerow--value-end-accessory", "name": "Value End Accessory", "snippet": "const ValueEndAccessory = () => (\n }\n />\n);" }, { "id": "components-keyvaluerow--key-end-button-icon-props", "name": "Key End Button Icon Props", "snippet": "const KeyEndButtonIconProps = () => (\n undefined,\n }}\n />\n);" }, { "id": "components-keyvaluerow--value-end-button-icon-props", "name": "Value End Button Icon Props", "snippet": "const ValueEndButtonIconProps = () => (\n undefined,\n }}\n />\n);" }, { "id": "components-keyvaluerow--key-text-props", "name": "Key Text Props", "snippet": "const KeyTextProps = () => (\n \n);" }, { "id": "components-keyvaluerow--value-text-props", "name": "Value Text Props", "snippet": "const ValueTextProps = () => (\n \n \n \n \n);" }, { "id": "components-keyvaluerow--single-column-stack", "name": "Single Column Stack", "snippet": "const SingleColumnStack = () => (\n \n \n }\n />\n \n }\n />\n undefined,\n }}\n />\n \n \n \n);" }, { "id": "components-keyvaluerow--overflow", "name": "Overflow", "snippet": "const Overflow = () => (\n \n);" } ], "import": "import { AvatarAccount, AvatarToken, Box, Icon, KeyValueRow } from '@metamask/design-system-react-native';" }, "components-keyvalueselect": { "id": "components-keyvalueselect", "name": "KeyValueSelect", "path": "../../packages/design-system-react-native/src/components/KeyValueSelect/KeyValueSelect.stories.tsx", "jsDocTags": {}, "reactDocgen": { "description": "", "methods": [], "displayName": "KeyValueSelect", "definedInFile": "/home/runner/work/metamask-design-system/metamask-design-system/packages/design-system-react-native/src/components/KeyValueSelect/KeyValueSelect.tsx", "actualName": "KeyValueSelect", "exportName": "KeyValueSelect", "props": { "keyTextProps": { "required": false, "tsType": { "name": "Partial", "elements": [ { "name": "Omit", "elements": [ { "name": "intersection", "raw": "TextPropsShared &\nRNTextProps & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "elements": [ { "name": "TextPropsShared" }, { "name": "RNTextProps" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } } ] }, { "name": "literal", "value": "'children'" } ], "raw": "Omit" } ], "raw": "Partial>" }, "description": "Optional props for the key Text when key is a string." }, "keyEndButtonIconProps": { "required": false, "tsType": { "name": "Partial", "elements": [ { "name": "intersection", "raw": "ButtonIconPropsShared & {\n /**\n * Optional prop to pass additional properties to the icon\n */\n iconProps?: Partial;\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n /**\n * Optional prop to control the style.\n */\n style?: StyleProp;\n} & Omit", "elements": [ { "name": "ButtonIconPropsShared" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to pass additional properties to the icon\n */\n iconProps?: Partial;\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n /**\n * Optional prop to control the style.\n */\n style?: StyleProp;\n}", "signature": { "properties": [ { "key": "iconProps", "value": { "name": "Partial", "elements": [ { "name": "intersection", "raw": "IconPropsShared & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n} & Omit", "elements": [ { "name": "IconPropsShared" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } }, { "name": "Omit", "elements": [ { "name": "SvgProps" }, { "name": "union", "raw": "'color' | 'name'", "elements": [ { "name": "literal", "value": "'color'" }, { "name": "literal", "value": "'name'" } ] } ], "raw": "Omit" } ] } ], "raw": "Partial", "required": false }, "description": "Optional prop to pass additional properties to the icon" }, { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." }, { "key": "style", "value": { "name": "StyleProp", "elements": [ { "name": "ViewStyle" } ], "raw": "StyleProp", "required": false }, "description": "Optional prop to control the style." } ] } }, { "name": "Omit", "elements": [ { "name": "PressableProps" }, { "name": "literal", "value": "'children'" } ], "raw": "Omit" } ] } ], "raw": "Partial" }, "description": "When set, renders a ButtonIcon as the key endAccessory (takes precedence over keyEndAccessory)." }, "valueTextProps": { "required": false, "tsType": { "name": "Partial", "elements": [ { "name": "Omit", "elements": [ { "name": "intersection", "raw": "TextPropsShared &\nRNTextProps & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "elements": [ { "name": "TextPropsShared" }, { "name": "RNTextProps" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } } ] }, { "name": "literal", "value": "'children'" } ], "raw": "Omit" } ], "raw": "Partial>" }, "description": "Optional props for the SelectButton label Text. Mapped from KeyValueRow `valueTextProps`." }, "selectButtonProps": { "required": true, "tsType": { "name": "intersection", "raw": "KeyValueSelectSelectButtonPropsShared & {\n /**\n * Optional props passed to the SelectButton trailing arrow Icon when a trailing\n * arrow is shown (excluding `name`, which is derived from the resolved direction).\n */\n endArrowDirectionIconProps?: Partial>;\n}", "elements": [ { "name": "KeyValueSelectSelectButtonPropsShared" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional props passed to the SelectButton trailing arrow Icon when a trailing\n * arrow is shown (excluding `name`, which is derived from the resolved direction).\n */\n endArrowDirectionIconProps?: Partial>;\n}", "signature": { "properties": [ { "key": "endArrowDirectionIconProps", "value": { "name": "Partial", "elements": [ { "name": "Omit", "elements": [ { "name": "intersection", "raw": "IconPropsShared & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n} & Omit", "elements": [ { "name": "IconPropsShared" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } }, { "name": "Omit", "elements": [ { "name": "SvgProps" }, { "name": "union", "raw": "'color' | 'name'", "elements": [ { "name": "literal", "value": "'color'" }, { "name": "literal", "value": "'name'" } ] } ], "raw": "Omit" } ] }, { "name": "literal", "value": "'name'" } ], "raw": "Omit" } ], "raw": "Partial>", "required": false }, "description": "Optional props passed to the SelectButton trailing arrow Icon when a trailing\narrow is shown (excluding `name`, which is derived from the resolved direction)." } ] } } ] }, "description": "SelectButton-only props (placeholder and caret controls)." }, "keyValueRowProps": { "required": false, "tsType": { "name": "Omit", "elements": [ { "name": "intersection", "raw": "KeyValueRowPropsShared &\nOmit & {\n /** Optional props for the key Text when key is a string. */\n keyTextProps?: Partial>;\n /**\n * Optional props for the value SensitiveText when value is a string.\n * Supports Text props plus `isHidden` / `length`.\n */\n valueTextProps?: Partial>;\n /** Optional Tailwind class names applied to the outer BoxHorizontal. Merged with base styles. */\n twClassName?: string;\n /** When set, renders a ButtonIcon as the key endAccessory (takes precedence over keyEndAccessory). */\n keyEndButtonIconProps?: Partial;\n /** When set, renders a ButtonIcon as the value endAccessory (takes precedence over valueEndAccessory). */\n valueEndButtonIconProps?: Partial;\n}", "elements": [ { "name": "KeyValueRowPropsShared" }, { "name": "Omit", "elements": [ { "name": "ViewProps" }, { "name": "literal", "value": "'children'" } ], "raw": "Omit" }, { "name": "signature", "type": "object", "raw": "{\n /** Optional props for the key Text when key is a string. */\n keyTextProps?: Partial>;\n /**\n * Optional props for the value SensitiveText when value is a string.\n * Supports Text props plus `isHidden` / `length`.\n */\n valueTextProps?: Partial>;\n /** Optional Tailwind class names applied to the outer BoxHorizontal. Merged with base styles. */\n twClassName?: string;\n /** When set, renders a ButtonIcon as the key endAccessory (takes precedence over keyEndAccessory). */\n keyEndButtonIconProps?: Partial;\n /** When set, renders a ButtonIcon as the value endAccessory (takes precedence over valueEndAccessory). */\n valueEndButtonIconProps?: Partial;\n}", "signature": { "properties": [ { "key": "keyTextProps", "value": { "name": "Partial", "elements": [ { "name": "Omit", "elements": [ { "name": "intersection", "raw": "TextPropsShared &\nRNTextProps & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "elements": [ { "name": "TextPropsShared" }, { "name": "RNTextProps" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } } ] }, { "name": "literal", "value": "'children'" } ], "raw": "Omit" } ], "raw": "Partial>", "required": false }, "description": "Optional props for the key Text when key is a string." }, { "key": "valueTextProps", "value": { "name": "Partial", "elements": [ { "name": "Omit", "elements": [ { "name": "intersection", "raw": "SensitiveTextPropsShared & TextProps", "elements": [ { "name": "SensitiveTextPropsShared" }, { "name": "intersection", "raw": "TextPropsShared &\nRNTextProps & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "elements": [ { "name": "TextPropsShared" }, { "name": "RNTextProps" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } } ] } ] }, { "name": "literal", "value": "'children'" } ], "raw": "Omit" } ], "raw": "Partial>", "required": false }, "description": "Optional props for the value SensitiveText when value is a string.\nSupports Text props plus `isHidden` / `length`." }, { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional Tailwind class names applied to the outer BoxHorizontal. Merged with base styles." }, { "key": "keyEndButtonIconProps", "value": { "name": "Partial", "elements": [ { "name": "intersection", "raw": "ButtonIconPropsShared & {\n /**\n * Optional prop to pass additional properties to the icon\n */\n iconProps?: Partial;\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n /**\n * Optional prop to control the style.\n */\n style?: StyleProp;\n} & Omit", "elements": [ { "name": "ButtonIconPropsShared" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to pass additional properties to the icon\n */\n iconProps?: Partial;\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n /**\n * Optional prop to control the style.\n */\n style?: StyleProp;\n}", "signature": { "properties": [ { "key": "iconProps", "value": { "name": "Partial", "elements": [ { "name": "intersection", "raw": "IconPropsShared & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n} & Omit", "elements": [ { "name": "IconPropsShared" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } }, { "name": "Omit", "elements": [ { "name": "SvgProps" }, { "name": "union", "raw": "'color' | 'name'", "elements": [ { "name": "literal", "value": "'color'" }, { "name": "literal", "value": "'name'" } ] } ], "raw": "Omit" } ] } ], "raw": "Partial", "required": false }, "description": "Optional prop to pass additional properties to the icon" }, { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." }, { "key": "style", "value": { "name": "StyleProp", "elements": [ { "name": "ViewStyle" } ], "raw": "StyleProp", "required": false }, "description": "Optional prop to control the style." } ] } }, { "name": "Omit", "elements": [ { "name": "PressableProps" }, { "name": "literal", "value": "'children'" } ], "raw": "Omit" } ] } ], "raw": "Partial", "required": false }, "description": "When set, renders a ButtonIcon as the key endAccessory (takes precedence over keyEndAccessory)." }, { "key": "valueEndButtonIconProps", "value": { "name": "Partial", "elements": [ { "name": "intersection", "raw": "ButtonIconPropsShared & {\n /**\n * Optional prop to pass additional properties to the icon\n */\n iconProps?: Partial;\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n /**\n * Optional prop to control the style.\n */\n style?: StyleProp;\n} & Omit", "elements": [ { "name": "ButtonIconPropsShared" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to pass additional properties to the icon\n */\n iconProps?: Partial;\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n /**\n * Optional prop to control the style.\n */\n style?: StyleProp;\n}", "signature": { "properties": [ { "key": "iconProps", "value": { "name": "Partial", "elements": [ { "name": "intersection", "raw": "IconPropsShared & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n} & Omit", "elements": [ { "name": "IconPropsShared" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } }, { "name": "Omit", "elements": [ { "name": "SvgProps" }, { "name": "union", "raw": "'color' | 'name'", "elements": [ { "name": "literal", "value": "'color'" }, { "name": "literal", "value": "'name'" } ] } ], "raw": "Omit" } ] } ], "raw": "Partial", "required": false }, "description": "Optional prop to pass additional properties to the icon" }, { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." }, { "key": "style", "value": { "name": "StyleProp", "elements": [ { "name": "ViewStyle" } ], "raw": "StyleProp", "required": false }, "description": "Optional prop to control the style." } ] } }, { "name": "Omit", "elements": [ { "name": "PressableProps" }, { "name": "literal", "value": "'children'" } ], "raw": "Omit" } ] } ], "raw": "Partial", "required": false }, "description": "When set, renders a ButtonIcon as the value endAccessory (takes precedence over valueEndAccessory)." } ] } } ] }, { "name": "union", "raw": "| 'keyLabel'\n| 'keyStartAccessory'\n| 'keyEndAccessory'\n| 'keyTextProps'\n| 'keyEndButtonIconProps'\n| 'value'\n| 'valueStartAccessory'\n| 'valueEndAccessory'\n| 'valueTextProps'\n| 'valueEndButtonIconProps'\n| 'variant'", "elements": [ { "name": "literal", "value": "'keyLabel'" }, { "name": "literal", "value": "'keyStartAccessory'" }, { "name": "literal", "value": "'keyEndAccessory'" }, { "name": "literal", "value": "'keyTextProps'" }, { "name": "literal", "value": "'keyEndButtonIconProps'" }, { "name": "literal", "value": "'value'" }, { "name": "literal", "value": "'valueStartAccessory'" }, { "name": "literal", "value": "'valueEndAccessory'" }, { "name": "literal", "value": "'valueTextProps'" }, { "name": "literal", "value": "'valueEndButtonIconProps'" }, { "name": "literal", "value": "'variant'" } ] } ], "raw": "Omit<\n KeyValueRowProps,\n | 'keyLabel'\n | 'keyStartAccessory'\n | 'keyEndAccessory'\n | 'keyTextProps'\n | 'keyEndButtonIconProps'\n | 'value'\n | 'valueStartAccessory'\n | 'valueEndAccessory'\n | 'valueTextProps'\n | 'valueEndButtonIconProps'\n | 'variant'\n>" }, "description": "Optional props forwarded to the inner KeyValueRow (e.g. `testID`, `twClassName`, `style`,\naccessibility props). Owned content props are set by KeyValueSelect and are not available here." }, "twClassName": { "required": false, "tsType": { "name": "string" }, "description": "Optional Tailwind class names applied to the outer Pressable." }, "isDisabled": { "defaultValue": { "value": "false", "computed": false }, "required": false } } }, "stories": [ { "id": "components-keyvalueselect--default", "name": "Default", "snippet": "const Default = () => undefined} />;" }, { "id": "components-keyvalueselect--variant", "name": "Variant", "snippet": "const Variant = () => (\n \n {(\n Object.entries(KeyValueSelectVariant) as [\n keyof typeof KeyValueSelectVariant,\n (typeof KeyValueSelectVariant)[keyof typeof KeyValueSelectVariant],\n ][]\n ).map(([key, rowVariant]) => (\n \n ))}\n \n);" }, { "id": "components-keyvalueselect--value-start-accessory", "name": "Value Start Accessory", "snippet": "const ValueStartAccessory = () => (\n \n }\n selectButtonProps={{ placeholder: 'Select asset' }}\n onPress={noopPress}\n />\n);" }, { "id": "components-keyvalueselect--value-end-accessory", "name": "Value End Accessory", "snippet": "const ValueEndAccessory = () => (\n }\n selectButtonProps={{\n placeholder: 'Select',\n hideEndArrow: true,\n }}\n onPress={noopPress}\n />\n);" }, { "id": "components-keyvalueselect--value-text-props", "name": "Value Text Props", "snippet": "const ValueTextProps = () => (\n \n);" }, { "id": "components-keyvalueselect--select-button-props", "name": "Select Button Props", "snippet": "const SelectButtonProps = () => (\n \n {(\n Object.entries(SelectButtonEndArrow) as [\n keyof typeof SelectButtonEndArrow,\n (typeof SelectButtonEndArrow)[keyof typeof SelectButtonEndArrow],\n ][]\n ).map(([key, endArrowDirection]) => (\n \n ))}\n \n \n);" }, { "id": "components-keyvalueselect--key-start-accessory", "name": "Key Start Accessory", "snippet": "const KeyStartAccessory = () => (\n }\n selectButtonProps={{ placeholder: 'Select' }}\n onPress={noopPress}\n />\n);" }, { "id": "components-keyvalueselect--key-end-accessory", "name": "Key End Accessory", "snippet": "const KeyEndAccessory = () => (\n }\n selectButtonProps={{ placeholder: 'Select' }}\n onPress={noopPress}\n />\n);" }, { "id": "components-keyvalueselect--key-end-button-icon-props", "name": "Key End Button Icon Props", "snippet": "const KeyEndButtonIconProps = () => (\n \n);" }, { "id": "components-keyvalueselect--key-text-props", "name": "Key Text Props", "snippet": "const KeyTextProps = () => (\n \n);" }, { "id": "components-keyvalueselect--key-value-row-props", "name": "Key Value Row Props", "snippet": "const KeyValueRowProps = () => (\n \n);" }, { "id": "components-keyvalueselect--is-disabled", "name": "Is Disabled", "snippet": "const IsDisabled = () => (\n \n \n \n \n);" } ], "import": "import { AvatarToken, Box, Icon, KeyValueSelect } from '@metamask/design-system-react-native';" }, "components-label": { "id": "components-label", "name": "Label", "path": "../../packages/design-system-react-native/src/components/Label/Label.stories.tsx", "jsDocTags": {}, "reactDocgen": { "description": "", "methods": [], "displayName": "Label", "definedInFile": "/home/runner/work/metamask-design-system/metamask-design-system/packages/design-system-react-native/src/components/Label/Label.tsx", "actualName": "Label", "exportName": "Label", "props": { "twClassName": { "required": false, "tsType": { "name": "string" }, "description": "Optional prop to add twrnc overriding classNames." } } }, "stories": [ { "id": "components-label--default", "name": "Default", "snippet": "const Default = () => ;" } ], "import": "import { Box, Label } from '@metamask/design-system-react-native';" }, "components-listitem": { "id": "components-listitem", "name": "ListItem", "path": "../../packages/design-system-react-native/src/components/ListItem/ListItem.stories.tsx", "jsDocTags": {}, "reactDocgen": { "description": "", "methods": [], "displayName": "ListItem", "definedInFile": "/home/runner/work/metamask-design-system/metamask-design-system/packages/design-system-react-native/src/components/ListItem/ListItem.tsx", "actualName": "ListItem", "exportName": "ListItem", "props": { "isInteractive": { "defaultValue": { "value": "false", "computed": false }, "required": false }, "accessoryGap": { "defaultValue": { "value": "0", "computed": false }, "required": false }, "variant": { "defaultValue": { "value": "'two-lines'", "computed": false }, "required": false } } }, "stories": [ { "id": "components-listitem--default", "name": "Default", "snippet": "const Default = () => ;" }, { "id": "components-listitem--is-interactive", "name": "Is Interactive", "snippet": "const IsInteractive = () => ;" }, { "id": "components-listitem--children", "name": "Children", "snippet": "const Children = () => \n \n \n \n;" }, { "id": "components-listitem--start-accessory", "name": "Start Accessory", "snippet": "const StartAccessory = () => }\n accessoryGap={4}\n title=\"With start accessory\"\n description={undefined}\n value={undefined} />;" }, { "id": "components-listitem--end-accessory", "name": "End Accessory", "snippet": "const EndAccessory = () => }\n accessoryGap={4}\n title=\"With end accessory\"\n description={undefined}\n value={undefined} />;" }, { "id": "components-listitem--accessory-gap", "name": "Accessory Gap", "snippet": "const AccessoryGap = () => <>\n }\n accessoryGap={0}\n title=\"accessoryGap={0}\"\n description={undefined}\n value={undefined} />\n }\n accessoryGap={4}\n title=\"accessoryGap={4}\"\n description={undefined}\n value={undefined} />\n;" }, { "id": "components-listitem--avatar", "name": "Avatar", "snippet": "const Avatar = () => ;" }, { "id": "components-listitem--variant", "name": "Variant", "snippet": "const Variant = (args: ListItemProps) => (\n <>\n {Object.values(ContentVariant).map((variant) => {\n const { title, description } = variantExamples[variant];\n\n return (\n \n {description}\n Third line\n \n ) : (\n description\n )\n }\n value=\"Value\"\n subvalue={\n variant === ContentVariant.OneLine ? 'Omitted' : 'Subvalue'\n }\n />\n );\n })}\n \n);" } ], "import": "import { AvatarToken, Box, Icon, ListItem, Text } from '@metamask/design-system-react-native';\nimport { ContentVariant } from '@metamask/design-system-shared';" }, "components-listitemmultiselect": { "id": "components-listitemmultiselect", "name": "ListItemMultiSelect", "path": "../../packages/design-system-react-native/src/components/ListItemMultiSelect/ListItemMultiSelect.stories.tsx", "jsDocTags": {}, "reactDocgen": { "description": "", "methods": [], "displayName": "ListItemMultiSelect", "definedInFile": "/home/runner/work/metamask-design-system/metamask-design-system/packages/design-system-react-native/src/components/ListItemMultiSelect/ListItemMultiSelect.tsx", "actualName": "ListItemMultiSelect", "exportName": "ListItemMultiSelect", "props": { "accessoryGap": { "defaultValue": { "value": "3", "computed": false }, "required": false } } }, "stories": [ { "id": "components-listitemmultiselect--default", "name": "Default", "snippet": "const Default = () => ;" }, { "id": "components-listitemmultiselect--is-selected", "name": "Is Selected", "snippet": "const IsSelected = () => \n \n \n;" }, { "id": "components-listitemmultiselect--avatar", "name": "Avatar", "snippet": "const Avatar = () => ;" }, { "id": "components-listitemmultiselect--start-accessory", "name": "Start Accessory", "snippet": "const StartAccessory = () => }\n title=\"With start accessory\"\n description=\"Description\"\n value=\"Value\" />;" }, { "id": "components-listitemmultiselect--variant", "name": "Variant", "snippet": "const Variant = (args: ListItemMultiSelectProps) => (\n \n {Object.values(ContentVariant).map((variant) => {\n const { title, description } = variantExamples[variant];\n\n return (\n \n {description}\n Third line\n \n ) : (\n description\n )\n }\n value=\"Value\"\n subvalue={\n variant === ContentVariant.OneLine ? 'Omitted' : 'Subvalue'\n }\n />\n );\n })}\n \n);" } ], "import": "import { AvatarToken, Icon, ListItemMultiSelect, Text } from '@metamask/design-system-react-native';\nimport { View } from 'react-native';\nimport { ContentVariant } from '@metamask/design-system-shared';" }, "components-listitemselect": { "id": "components-listitemselect", "name": "ListItemSelect", "path": "../../packages/design-system-react-native/src/components/ListItemSelect/ListItemSelect.stories.tsx", "jsDocTags": {}, "reactDocgen": { "description": "", "methods": [], "displayName": "ListItemSelect", "definedInFile": "/home/runner/work/metamask-design-system/metamask-design-system/packages/design-system-react-native/src/components/ListItemSelect/ListItemSelect.tsx", "actualName": "ListItemSelect", "exportName": "ListItemSelect", "props": { "endAccessory": { "required": false, "tsType": { "name": "ReactNode" }, "description": "Used when the check icon is not shown (see `showSelectedIcon`)." }, "showSelectedIcon": { "defaultValue": { "value": "false", "computed": false }, "required": false }, "accessoryGap": { "defaultValue": { "value": "3", "computed": false }, "required": false } } }, "stories": [ { "id": "components-listitemselect--default", "name": "Default", "snippet": "const Default = () => ;" }, { "id": "components-listitemselect--is-selected", "name": "Is Selected", "snippet": "const IsSelected = () => \n \n \n;" }, { "id": "components-listitemselect--show-selected-icon", "name": "Show Selected Icon", "snippet": "const ShowSelectedIcon = () => \n \n \n;" }, { "id": "components-listitemselect--end-accessory", "name": "End Accessory", "snippet": "const EndAccessory = () => }\n onPress={noopPress} />;" }, { "id": "components-listitemselect--avatar", "name": "Avatar", "snippet": "const Avatar = () => ;" }, { "id": "components-listitemselect--start-accessory", "name": "Start Accessory", "snippet": "const StartAccessory = () => }\n title=\"With start accessory\"\n description={undefined}\n value=\"Value\" />;" }, { "id": "components-listitemselect--variant", "name": "Variant", "snippet": "const Variant = (args: ListItemSelectProps) => (\n \n {Object.values(ContentVariant).map((variant) => {\n const { title, description } = variantExamples[variant];\n\n return (\n \n {description}\n Third line\n \n ) : (\n description\n )\n }\n value=\"Value\"\n subvalue={\n variant === ContentVariant.OneLine ? 'Omitted' : 'Subvalue'\n }\n />\n );\n })}\n \n);" } ], "import": "import { AvatarToken, Icon, ListItemSelect, Text } from '@metamask/design-system-react-native';\nimport { View } from 'react-native';\nimport { ContentVariant } from '@metamask/design-system-shared';" }, "components-mainactionbutton": { "id": "components-mainactionbutton", "name": "MainActionButton", "path": "../../packages/design-system-react-native/src/components/MainActionButton/MainActionButton.stories.tsx", "jsDocTags": {}, "reactDocgen": { "description": "", "methods": [], "displayName": "MainActionButton", "definedInFile": "/home/runner/work/metamask-design-system/metamask-design-system/packages/design-system-react-native/src/components/MainActionButton/MainActionButton.tsx", "actualName": "MainActionButton", "exportName": "MainActionButton", "props": { "iconName": { "required": true, "tsType": { "name": "IconName" }, "description": "Icon name rendered above the label." }, "label": { "required": true, "tsType": { "name": "string" }, "description": "Label text rendered below the icon." }, "iconProps": { "required": false, "tsType": { "name": "Omit", "elements": [ { "name": "Partial", "elements": [ { "name": "intersection", "raw": "IconPropsShared & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n} & Omit", "elements": [ { "name": "IconPropsShared" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } }, { "name": "Omit", "elements": [ { "name": "SvgProps" }, { "name": "union", "raw": "'color' | 'name'", "elements": [ { "name": "literal", "value": "'color'" }, { "name": "literal", "value": "'name'" } ] } ], "raw": "Omit" } ] } ], "raw": "Partial" }, { "name": "union", "raw": "'name' | 'size' | 'color'", "elements": [ { "name": "literal", "value": "'name'" }, { "name": "literal", "value": "'size'" }, { "name": "literal", "value": "'color'" } ] } ], "raw": "Omit, 'name' | 'size' | 'color'>" }, "description": "Optional props forwarded to the internal Icon component.\nUseful for test IDs and accessibility metadata." }, "labelProps": { "required": false, "tsType": { "name": "Omit", "elements": [ { "name": "Partial", "elements": [ { "name": "intersection", "raw": "TextPropsShared &\nRNTextProps & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "elements": [ { "name": "TextPropsShared" }, { "name": "RNTextProps" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } } ] } ], "raw": "Partial" }, { "name": "union", "raw": "'children' | 'variant' | 'fontWeight' | 'color' | 'twClassName'", "elements": [ { "name": "literal", "value": "'children'" }, { "name": "literal", "value": "'variant'" }, { "name": "literal", "value": "'fontWeight'" }, { "name": "literal", "value": "'color'" }, { "name": "literal", "value": "'twClassName'" } ] } ], "raw": "Omit<\n Partial,\n 'children' | 'variant' | 'fontWeight' | 'color' | 'twClassName'\n>" }, "description": "Optional props forwarded to the internal Text component.\nUseful for test IDs and accessibility metadata." }, "isDisabled": { "required": false, "tsType": { "name": "boolean" }, "description": "Disables the button interaction and applies disabled styling.\n\n@default false", "defaultValue": { "value": "false", "computed": false } }, "twClassName": { "required": false, "tsType": { "name": "string" }, "description": "Optional Tailwind classes to extend or override container styles.", "defaultValue": { "value": "''", "computed": false } }, "style": { "required": false, "tsType": { "name": "union", "raw": "| StyleProp\n| ((state: PressableStateCallbackType) => StyleProp)", "elements": [ { "name": "StyleProp", "elements": [ { "name": "ViewStyle" } ], "raw": "StyleProp" }, { "name": "unknown" } ] }, "description": "Optional React Native style for the button container." } } }, "stories": [ { "id": "components-mainactionbutton--default", "name": "Default", "snippet": "const Default = () => \n \n;" }, { "id": "components-mainactionbutton--is-disabled", "name": "Is Disabled", "snippet": "const IsDisabled = () => \n \n;" }, { "id": "components-mainactionbutton--icon-name-and-label", "name": "Icon Name And Label", "snippet": "const IconNameAndLabel = () => (\n \n \n \n \n \n \n);" } ], "import": "import { Box, MainActionButton } from '@metamask/design-system-react-native';\nimport { IconName } from '../Icon';" }, "components-radiobutton": { "id": "components-radiobutton", "name": "RadioButton", "path": "../../packages/design-system-react-native/src/components/RadioButton/RadioButton.stories.tsx", "jsDocTags": {}, "reactDocgen": { "description": "", "methods": [], "displayName": "RadioButton", "definedInFile": "/home/runner/work/metamask-design-system/metamask-design-system/packages/design-system-react-native/src/components/RadioButton/RadioButton.tsx", "actualName": "RadioButton", "exportName": "RadioButton", "props": { "onPress": { "required": false, "tsType": { "name": "signature", "type": "function", "raw": "() => void", "signature": { "arguments": [], "return": { "name": "void" } } }, "description": "Optional callback triggered when the radio button is pressed." }, "label": { "required": false, "tsType": { "name": "union", "raw": "string | React.ReactNode", "elements": [ { "name": "string" }, { "name": "ReactReactNode", "raw": "React.ReactNode" } ] }, "description": "Optional label displayed beside the radio button." }, "labelProps": { "required": false, "tsType": { "name": "Omit", "elements": [ { "name": "Partial", "elements": [ { "name": "intersection", "raw": "TextPropsShared &\nRNTextProps & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "elements": [ { "name": "TextPropsShared" }, { "name": "RNTextProps" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } } ] } ], "raw": "Partial" }, { "name": "literal", "value": "'children'" } ], "raw": "Omit, 'children'>" }, "description": "Optional props passed to the label's Text component." }, "isChecked": { "required": false, "tsType": { "name": "boolean" }, "description": "Optional prop to configure the checked state.\n\n@default false", "defaultValue": { "value": "false", "computed": false } }, "isDisabled": { "required": false, "tsType": { "name": "boolean" }, "description": "Optional prop to configure the disabled state.\n\n@default false", "defaultValue": { "value": "false", "computed": false } }, "isReadOnly": { "required": false, "tsType": { "name": "boolean" }, "description": "Optional prop to configure the read-only state.\n\n@default false", "defaultValue": { "value": "false", "computed": false } }, "isDanger": { "required": false, "tsType": { "name": "boolean" }, "description": "Optional prop to configure the danger state.\n\n@default false", "defaultValue": { "value": "false", "computed": false } }, "touchableOpacityProps": { "required": false, "tsType": { "name": "Omit", "elements": [ { "name": "Partial", "elements": [ { "name": "TouchableOpacityProps" } ], "raw": "Partial" }, { "name": "union", "raw": "'children' | 'onPress' | 'disabled'", "elements": [ { "name": "literal", "value": "'children'" }, { "name": "literal", "value": "'onPress'" }, { "name": "literal", "value": "'disabled'" } ] } ], "raw": "Omit<\n Partial,\n 'children' | 'onPress' | 'disabled'\n>" }, "description": "Optional props passed to the inner TouchableOpacity.\nUse this for TouchableOpacity-specific props such as `testID`." }, "radioButtonContainerProps": { "required": false, "tsType": { "name": "Omit", "elements": [ { "name": "Partial", "elements": [ { "name": "ViewProps" } ], "raw": "Partial" }, { "name": "literal", "value": "'children'" } ], "raw": "Omit, 'children'>" }, "description": "Optional props passed to the radio button circle container." }, "twClassName": { "required": false, "tsType": { "name": "string" }, "description": "Optional Tailwind CSS classes for the root container." }, "style": { "required": false, "tsType": { "name": "ViewProps['style']", "raw": "ViewProps['style']" }, "description": "Optional custom styles for the root container." } } }, "stories": [ { "id": "components-radiobutton--default", "name": "Default", "snippet": "const Default = () => ;" }, { "id": "components-radiobutton--is-checked", "name": "Is Checked", "snippet": "const IsChecked = () => (\n \n \n \n \n);" }, { "id": "components-radiobutton--is-disabled", "name": "Is Disabled", "snippet": "const IsDisabled = () => (\n \n \n \n \n);" }, { "id": "components-radiobutton--is-read-only", "name": "Is Read Only", "snippet": "const IsReadOnly = () => (\n \n \n \n \n);" }, { "id": "components-radiobutton--is-danger", "name": "Is Danger", "snippet": "const IsDanger = () => (\n \n \n \n \n);" }, { "id": "components-radiobutton--label", "name": "Label", "snippet": "const Label = () => (\n \n \n \n \n);" } ], "import": "import { Box, RadioButton } from '@metamask/design-system-react-native';\nimport { View } from 'react-native';" }, "components-sectiondivider": { "id": "components-sectiondivider", "name": "SectionDivider", "path": "../../packages/design-system-react-native/src/components/SectionDivider/SectionDivider.stories.tsx", "jsDocTags": {}, "reactDocgen": { "description": "", "methods": [], "displayName": "SectionDivider", "definedInFile": "/home/runner/work/metamask-design-system/metamask-design-system/packages/design-system-react-native/src/components/SectionDivider/SectionDivider.tsx", "actualName": "SectionDivider", "exportName": "SectionDivider", "props": { "twClassName": { "required": false, "tsType": { "name": "string" }, "description": "Optional prop to add twrnc overriding classNames." } } }, "stories": [ { "id": "components-sectiondivider--default", "name": "Default", "snippet": "function Default() {\n return (\n \n Above\n \n Below\n \n );\n}" } ], "import": "import { Box, SectionDivider, Text } from '@metamask/design-system-react-native';" }, "components-sectionheader": { "id": "components-sectionheader", "name": "SectionHeader", "path": "../../packages/design-system-react-native/src/components/SectionHeader/SectionHeader.stories.tsx", "jsDocTags": { "param": [ "sectionHeaderProps - Component props", "sectionHeaderProps.title - Title content for the inner row (required)", "sectionHeaderProps.titleAccessory - Optional inline metadata beside `title` in the inner row (not for trailing chevrons; use `endIconName` / `endIconProps`)", "sectionHeaderProps.children - Optional full-width content below the header row", "sectionHeaderProps.titleProps - Optional props merged into inner row `Text` when `title` is a string", "sectionHeaderProps.titleWrapperProps - Optional props spread onto the inner `BoxRow`", "sectionHeaderProps.startAccessory - Optional custom node before the title row on the outer row; used when no start icon is resolved", "sectionHeaderProps.startIconName - Optional start icon; takes precedence over `startAccessory` when set", "sectionHeaderProps.startIconProps - Props merged into the start `Icon` (defaults include medium size and default icon color)", "sectionHeaderProps.endAccessory - Optional custom node after the title row on the outer row; used when no end icon is resolved", "sectionHeaderProps.endIconName - Optional end icon on the outer header row (trailing chevrons, disclosure arrows); takes precedence over `endAccessory` when set. Defaults to `IconName.ArrowRight` when `isInteractive` is `true` and no end icon or `endAccessory` is provided", "sectionHeaderProps.endIconProps - Props merged into the end `Icon`", "sectionHeaderProps.isInteractive - When `true`, wraps the header in a `Pressable` with reduced opacity on press", "sectionHeaderProps.style - Optional style on the outer wrapper (`View` or `Pressable` style, including function form when interactive)", "sectionHeaderProps.twClassName - Optional Tailwind classes on the outer row" ], "returns": [ "The rendered SectionHeader layout." ] }, "description": "Horizontal section header: optional start/end icons or accessories, and a title row with optional inline accessory.\nWhen `isInteractive` is `true`, the header is wrapped in a `Pressable` and remaining `PressableProps` are forwarded to it.\nOtherwise, remaining `View` props are forwarded to the outer {@link BoxRow}.", "reactDocgen": { "description": "Horizontal section header: optional start/end icons or accessories, and a title row with optional inline accessory.\nWhen `isInteractive` is `true`, the header is wrapped in a `Pressable` and remaining `PressableProps` are forwarded to it.\nOtherwise, remaining `View` props are forwarded to the outer {@link BoxRow}.\n\n@param sectionHeaderProps - Component props\n@param sectionHeaderProps.title - Title content for the inner row (required)\n@param sectionHeaderProps.titleAccessory - Optional inline metadata beside `title` in the inner row (not for trailing chevrons; use `endIconName` / `endIconProps`)\n@param sectionHeaderProps.children - Optional full-width content below the header row\n@param sectionHeaderProps.titleProps - Optional props merged into inner row `Text` when `title` is a string\n@param sectionHeaderProps.titleWrapperProps - Optional props spread onto the inner `BoxRow`\n@param sectionHeaderProps.startAccessory - Optional custom node before the title row on the outer row; used when no start icon is resolved\n@param sectionHeaderProps.startIconName - Optional start icon; takes precedence over `startAccessory` when set\n@param sectionHeaderProps.startIconProps - Props merged into the start `Icon` (defaults include medium size and default icon color)\n@param sectionHeaderProps.endAccessory - Optional custom node after the title row on the outer row; used when no end icon is resolved\n@param sectionHeaderProps.endIconName - Optional end icon on the outer header row (trailing chevrons, disclosure arrows); takes precedence over `endAccessory` when set. Defaults to `IconName.ArrowRight` when `isInteractive` is `true` and no end icon or `endAccessory` is provided\n@param sectionHeaderProps.endIconProps - Props merged into the end `Icon`\n@param sectionHeaderProps.isInteractive - When `true`, wraps the header in a `Pressable` with reduced opacity on press\n@param sectionHeaderProps.style - Optional style on the outer wrapper (`View` or `Pressable` style, including function form when interactive)\n@param sectionHeaderProps.twClassName - Optional Tailwind classes on the outer row\n\n@returns The rendered SectionHeader layout.", "methods": [], "displayName": "SectionHeader", "definedInFile": "/home/runner/work/metamask-design-system/metamask-design-system/packages/design-system-react-native/src/components/SectionHeader/SectionHeader.tsx", "actualName": "SectionHeader", "exportName": "SectionHeader" }, "stories": [ { "id": "components-sectionheader--default", "name": "Default", "snippet": "const Default = (args: SectionHeaderProps) => ;" }, { "id": "components-sectionheader--start-icon-name", "name": "Start Icon Name", "snippet": "const StartIconName = () => ;" }, { "id": "components-sectionheader--end-icon-name", "name": "End Icon Name", "snippet": "const EndIconName = () => (\n \n);" }, { "id": "components-sectionheader--start-accessory", "name": "Start Accessory", "snippet": "const StartAccessory = () => (\n \n }\n />\n);" }, { "id": "components-sectionheader--end-accessory", "name": "End Accessory", "snippet": "const EndAccessory = () => (\n \n }\n />\n);" }, { "id": "components-sectionheader--title-accessory", "name": "Title Accessory", "snippet": "const TitleAccessory = () => (\n \n }\n />\n);" }, { "id": "components-sectionheader--children", "name": "Children", "snippet": "const Children = () => (\n \n \n \n Add mUSD and earn up to{' '}\n \n 4% APY\n {' '}\n (variable). Your balance is dollar-backed and ready to spend, trade,\n or send anytime.\n \n \n \n);" }, { "id": "components-sectionheader--interactive", "name": "Interactive", "snippet": "const Interactive = () => (\n \n);" } ], "import": "import { Box, Icon, SectionHeader, Text } from '@metamask/design-system-react-native';" }, "components-segmentedcontrol": { "id": "components-segmentedcontrol", "name": "SegmentedControl", "path": "../../packages/design-system-react-native/src/components/SegmentedControl/SegmentedControl.stories.tsx", "jsDocTags": {}, "reactDocgen": { "description": "", "methods": [], "displayName": "SegmentedControl", "definedInFile": "/home/runner/work/metamask-design-system/metamask-design-system/packages/design-system-react-native/src/components/SegmentedControl/SegmentedControl.tsx", "actualName": "SegmentedControl", "exportName": "SegmentedControl", "props": { "twClassName": { "required": false, "tsType": { "name": "string" }, "description": "Optional twrnc classes merged into the root container after defaults." }, "size": { "defaultValue": { "value": "'sm'", "computed": false }, "required": false }, "isFullWidth": { "defaultValue": { "value": "false", "computed": false }, "required": false } } }, "stories": [ { "id": "components-segmentedcontrol--default", "name": "Default", "snippet": "const Default = () => ;" }, { "id": "components-segmentedcontrol--size", "name": "Size", "snippet": "const Size = () => {\n const [smValue, setSmValue] = useState('reaches');\n const [mdValue, setMdValue] = useState('reaches');\n const [lgValue, setLgValue] = useState('reaches');\n\n return (\n \n \n \n Small\n \n \n Segment\n \n \n \n \n Medium\n \n \n Segment\n \n \n \n \n Large\n \n \n Segment\n \n \n \n );\n};" }, { "id": "components-segmentedcontrol--is-full-width", "name": "Is Full Width", "snippet": "const IsFullWidth = () => ;" } ], "import": "import { Box, FilterButton, SegmentedControl } from '@metamask/design-system-react-native';\nimport { View } from 'react-native';\nimport { SegmentedControlSize } from '@metamask/design-system-shared';" }, "components-selectbutton": { "id": "components-selectbutton", "name": "SelectButton", "path": "../../packages/design-system-react-native/src/components/SelectButton/SelectButton.stories.tsx", "jsDocTags": {}, "reactDocgen": { "description": "", "methods": [], "displayName": "SelectButton", "definedInFile": "/home/runner/work/metamask-design-system/metamask-design-system/packages/design-system-react-native/src/components/SelectButton/SelectButton.tsx", "actualName": "SelectButton", "exportName": "SelectButton", "props": { "endArrowDirectionIconProps": { "required": false, "tsType": { "name": "Partial", "elements": [ { "name": "Omit", "elements": [ { "name": "intersection", "raw": "IconPropsShared & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n} & Omit", "elements": [ { "name": "IconPropsShared" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } }, { "name": "Omit", "elements": [ { "name": "SvgProps" }, { "name": "union", "raw": "'color' | 'name'", "elements": [ { "name": "literal", "value": "'color'" }, { "name": "literal", "value": "'name'" } ] } ], "raw": "Omit" } ] }, { "name": "literal", "value": "'name'" } ], "raw": "Omit" } ], "raw": "Partial>" }, "description": "Optional props passed to the trailing arrow `Icon` when a trailing arrow is shown (excluding `name`, which is derived from the resolved direction)." }, "hideEndArrow": { "defaultValue": { "value": "false", "computed": false }, "required": false }, "isDisabled": { "defaultValue": { "value": "false", "computed": false }, "required": false }, "isFullWidth": { "defaultValue": { "value": "false", "computed": false }, "required": false }, "variant": { "defaultValue": { "value": "'primary'", "computed": false }, "required": false }, "isLoading": { "defaultValue": { "value": "false", "computed": false }, "required": false }, "size": { "defaultValue": { "value": "'sm'", "computed": false }, "required": false }, "twClassName": { "defaultValue": { "value": "''", "computed": false }, "required": false } } }, "stories": [ { "id": "components-selectbutton--default", "name": "Default", "snippet": "const Default = () => \n undefined} />\n;" }, { "id": "components-selectbutton--variant", "name": "Variant", "snippet": "const Variant = () => (\n \n \n \n \n \n);" }, { "id": "components-selectbutton--size", "name": "Size", "snippet": "const Size = () => (\n \n {(\n Object.entries(SelectButtonSize) as [\n keyof typeof SelectButtonSize,\n (typeof SelectButtonSize)[keyof typeof SelectButtonSize],\n ][]\n ).map(([key, value]) => (\n \n ))}\n \n);" }, { "id": "components-selectbutton--is-full-width", "name": "Is Full Width", "snippet": "const IsFullWidth = () => (\n \n {Object.values(SelectButtonVariant).map((variant) => (\n }\n placeholder={`${variant} full width`}\n />\n ))}\n \n);" }, { "id": "components-selectbutton--is-disabled", "name": "Is Disabled", "snippet": "const IsDisabled = () => (\n \n \n \n \n);" }, { "id": "components-selectbutton--start-accessory", "name": "Start Accessory", "snippet": "const StartAccessory = () => (\n \n }\n />\n \n);" }, { "id": "components-selectbutton--end-accessory", "name": "End Accessory", "snippet": "const EndAccessory = () => (\n \n }\n />\n \n);" }, { "id": "components-selectbutton--end-arrow-direction", "name": "End Arrow Direction", "snippet": "const EndArrowDirection = () => (\n \n {(\n Object.entries(SelectButtonEndArrow) as [\n keyof typeof SelectButtonEndArrow,\n (typeof SelectButtonEndArrow)[keyof typeof SelectButtonEndArrow],\n ][]\n ).map(([key, value]) => (\n \n ))}\n \n);" }, { "id": "components-selectbutton--text-props", "name": "Text Props", "snippet": "const TextProps = () => (\n \n \n \n);" }, { "id": "components-selectbutton--end-arrow-direction-icon-props", "name": "End Arrow Direction Icon Props", "snippet": "const EndArrowDirectionIconProps = () => (\n \n \n \n \n);" } ], "import": "import { Box, Icon, SelectButton } from '@metamask/design-system-react-native';\nimport { SelectButtonVariant, SelectButtonEndArrow } from '@metamask/design-system-shared';" }, "components-sensitivetext": { "id": "components-sensitivetext", "name": "SensitiveText", "path": "../../packages/design-system-react-native/src/components/SensitiveText/SensitiveText.stories.tsx", "jsDocTags": {}, "reactDocgen": { "description": "", "methods": [], "displayName": "SensitiveText", "definedInFile": "/home/runner/work/metamask-design-system/metamask-design-system/packages/design-system-react-native/src/components/SensitiveText/SensitiveText.tsx", "actualName": "SensitiveText", "exportName": "SensitiveText", "props": { "twClassName": { "required": false, "tsType": { "name": "string" }, "description": "Optional prop to add twrnc overriding classNames." }, "isHidden": { "defaultValue": { "value": "false", "computed": false }, "required": false }, "length": { "defaultValue": { "value": "'6'", "computed": false }, "required": false } } }, "stories": [ { "id": "components-sensitivetext--default", "name": "Default", "snippet": "const Default = () => Sensitive information;" }, { "id": "components-sensitivetext--is-hidden", "name": "Is Hidden", "snippet": "const IsHidden = () => (\n <>\n \n Visible: Sensitive information\n \n \n Hidden: Sensitive information\n \n \n);" }, { "id": "components-sensitivetext--length", "name": "Length", "snippet": "const Length = () => (\n <>\n {Object.entries(SensitiveTextLength).map(([key, value]) => (\n \n {`Hidden (${key})`}\n \n ))}\n \n Hidden (Custom: 15)\n \n \n);" } ], "import": "import { SensitiveText } from '@metamask/design-system-react-native';\nimport { SensitiveTextLength } from '@metamask/design-system-shared';\nimport { TextVariant, TextColor } from '../Text';" }, "components-skeleton": { "id": "components-skeleton", "name": "Skeleton", "path": "../../packages/design-system-react-native/src/components/Skeleton/Skeleton.stories.tsx", "jsDocTags": {}, "reactDocgen": { "description": "", "methods": [], "displayName": "Skeleton", "definedInFile": "/home/runner/work/metamask-design-system/metamask-design-system/packages/design-system-react-native/src/components/Skeleton/Skeleton.tsx", "actualName": "Skeleton", "exportName": "Skeleton", "props": { "height": { "required": false, "tsType": { "name": "union", "raw": "number | string", "elements": [ { "name": "number" }, { "name": "string" } ] }, "description": "Optional prop to set the height of the Skeleton." }, "width": { "required": false, "tsType": { "name": "union", "raw": "number | string", "elements": [ { "name": "number" }, { "name": "string" } ] }, "description": "Optional prop to set the width of the Skeleton." }, "children": { "required": false, "tsType": { "name": "ReactNode" }, "description": "Optional content to display within the skeleton.\nWhen provided without `hideChildren`, children are rendered directly.\nWhen provided with `hideChildren`, children are rendered invisibly\nto preserve layout dimensions." }, "hideChildren": { "required": false, "tsType": { "name": "boolean" }, "description": "When true, children are rendered invisibly while the skeleton\nanimation plays, preserving layout dimensions.\n\n@default false", "defaultValue": { "value": "false", "computed": false } }, "childrenWrapperProps": { "required": false, "tsType": { "name": "ViewProps" }, "description": "Props spread to the children wrapper View (e.g., testID, accessibilityLabel)." }, "animatedViewProps": { "required": false, "tsType": { "name": "ViewProps" }, "description": "Props spread to the animated background View (e.g., testID, accessibilityLabel)." }, "twClassName": { "required": false, "tsType": { "name": "string" }, "description": "Tailwind CSS classes for the skeleton container." }, "autoPlay": { "required": false, "tsType": { "name": "boolean" }, "description": "Whether to automatically start the shimmer animation.\n\n@default true", "defaultValue": { "value": "true", "computed": false } } } }, "stories": [ { "id": "components-skeleton--default", "name": "Default", "snippet": "const Default = () => ;" }, { "id": "components-skeleton--width-height", "name": "Width Height", "snippet": "const WidthHeight = () => (\n \n \n \n \n \n);" }, { "id": "components-skeleton--hide-children", "name": "Hide Children", "snippet": "const HideChildren = () => {\n const [isLoaded, setIsLoaded] = useState(false);\n\n return (\n \n setIsLoaded(!isLoaded)}\n style={{ marginBottom: 16 }}\n >\n Toggle Loading\n \n {isLoaded ? (\n Content to load\n ) : (\n \n Content to load\n \n )}\n \n );\n};" }, { "id": "components-skeleton--tw-class-name", "name": "Tw Class Name", "snippet": "const TwClassName = () => ;" }, { "id": "components-skeleton--auto-play-disabled", "name": "Auto Play Disabled", "snippet": "const AutoPlayDisabled = () => ;" } ], "import": "import { Box, Button, Skeleton, Text } from '@metamask/design-system-react-native';\nimport { View } from 'react-native';" }, "components-slider": { "id": "components-slider", "name": "Slider", "path": "../../packages/design-system-react-native/src/components/Slider/Slider.stories.tsx", "jsDocTags": {}, "reactDocgen": { "description": "", "methods": [], "displayName": "Slider", "definedInFile": "/home/runner/work/metamask-design-system/metamask-design-system/packages/design-system-react-native/src/components/Slider/Slider.tsx", "actualName": "Slider", "exportName": "Slider", "props": { "trackInset": { "required": false, "tsType": { "name": "number" }, "description": "Horizontal inset on the root container so the thumb can overhang the track\nat min/max without clipping. Defaults to {@link SLIDER_TRACK_INSET} (16);\noverride when the parent already provides edge padding.\n\n@default 16", "defaultValue": { "value": "Math.abs(THUMB_LEFT_OFFSET)", "computed": true } }, "twClassName": { "required": false, "tsType": { "name": "string" }, "description": "Optional twrnc classes merged into the root container after component defaults.\nUse for layout spacing the Box API does not cover (e.g. `mt-4`)." }, "minimumValue": { "defaultValue": { "value": "0", "computed": false }, "required": false }, "maximumValue": { "defaultValue": { "value": "100", "computed": false }, "required": false }, "step": { "defaultValue": { "value": "1", "computed": false }, "required": false }, "isDisabled": { "defaultValue": { "value": "false", "computed": false }, "required": false }, "marks": { "defaultValue": { "value": "[\n { step: 0, label: '0%', haptic: false },\n { step: 25, label: '25%', haptic: true },\n { step: 50, label: '50%', haptic: true },\n { step: 75, label: '75%', haptic: true },\n { step: 100, label: '100%', haptic: false },\n]", "computed": false }, "required": false }, "showRangeLabels": { "defaultValue": { "value": "false", "computed": false }, "required": false }, "showRangeDots": { "defaultValue": { "value": "false", "computed": false }, "required": false } } }, "stories": [ { "id": "components-slider--default", "name": "Default", "snippet": "const Default = () => ;" }, { "id": "components-slider--show-range-labels", "name": "Show Range Labels", "snippet": "const ShowRangeLabels = () => (\n \n \n \n \n);" }, { "id": "components-slider--show-range-dots", "name": "Show Range Dots", "snippet": "const ShowRangeDots = () => (\n \n \n \n \n);" }, { "id": "components-slider--custom-marks", "name": "Custom Marks", "snippet": "const CustomMarks = () => (\n \n);" }, { "id": "components-slider--step", "name": "Step", "snippet": "const Step = () => (\n \n \n \n \n);" }, { "id": "components-slider--is-disabled", "name": "Is Disabled", "snippet": "const IsDisabled = () => (\n \n \n \n \n);" }, { "id": "components-slider--non-linear-scale", "name": "Non Linear Scale", "snippet": "const NonLinearScale = () => (\n \n);" }, { "id": "components-slider--themed-marks", "name": "Themed Marks", "snippet": "const ThemedMarks = () => (\n \n);" } ], "import": "import { Box, Slider } from '@metamask/design-system-react-native';" }, "components-switch": { "id": "components-switch", "name": "Switch", "path": "../../packages/design-system-react-native/src/components/Switch/Switch.stories.tsx", "jsDocTags": {}, "reactDocgen": { "description": "", "methods": [], "displayName": "Switch", "definedInFile": "/home/runner/work/metamask-design-system/metamask-design-system/packages/design-system-react-native/src/components/Switch/Switch.tsx", "actualName": "Switch", "exportName": "Switch", "props": { "onValueChange": { "required": true, "tsType": { "name": "signature", "type": "function", "raw": "(value: boolean) => void", "signature": { "arguments": [ { "type": { "name": "boolean" }, "name": "value" } ], "return": { "name": "void" } } }, "description": "Required callback for when the switch value changes.\nUse this to update your state." }, "isDisabled": { "defaultValue": { "value": "false", "computed": false }, "required": false } } }, "stories": [ { "id": "components-switch--default", "name": "Default", "snippet": "const Default = () => ;" }, { "id": "components-switch--is-on", "name": "Is On", "snippet": "const IsOn = () => (\n \n \n \n \n);" }, { "id": "components-switch--is-disabled", "name": "Is Disabled", "snippet": "const IsDisabled = () => (\n \n \n \n \n \n \n);" }, { "id": "components-switch--label", "name": "Label", "snippet": "const Label = () => (\n \n \n \n \n);" } ], "import": "import { Switch } from '@metamask/design-system-react-native';\nimport { View } from 'react-native';" }, "components-tabemptystate": { "id": "components-tabemptystate", "name": "TabEmptyState", "path": "../../packages/design-system-react-native/src/components/TabEmptyState/TabEmptyState.stories.tsx", "jsDocTags": {}, "reactDocgen": { "description": "", "methods": [], "displayName": "TabEmptyState", "definedInFile": "/home/runner/work/metamask-design-system/metamask-design-system/packages/design-system-react-native/src/components/TabEmptyState/TabEmptyState.tsx", "actualName": "TabEmptyState", "exportName": "TabEmptyState", "props": { "icon": { "required": false, "tsType": { "name": "ReactNode" }, "description": "Optional icon to display in the empty state.\nIf using a PNG/JPG image, use `useAssetFromTheme` to handle light/dark themes." }, "description": { "required": false, "tsType": { "name": "string" }, "description": "Optional description text to display in the empty state." }, "descriptionProps": { "required": false, "tsType": { "name": "Partial", "elements": [ { "name": "intersection", "raw": "TextPropsShared &\nRNTextProps & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "elements": [ { "name": "TextPropsShared" }, { "name": "RNTextProps" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } } ] } ], "raw": "Partial" }, "description": "Optional props to pass to the description Text component." }, "actionButtonText": { "required": false, "tsType": { "name": "string" }, "description": "Optional label for the action button.\nThe button is only rendered when both `actionButtonText` and `onAction` are provided." }, "actionButtonProps": { "required": false, "tsType": { "name": "Partial", "elements": [ { "name": "intersection", "raw": "ButtonPropsShared &\n(ButtonTertiaryProps | ButtonPrimaryProps | ButtonSecondaryProps)", "elements": [ { "name": "ButtonPropsShared" }, { "name": "unknown" } ] } ], "raw": "Partial" }, "description": "Optional props to pass to the action Button component." }, "onAction": { "required": false, "tsType": { "name": "signature", "type": "function", "raw": "() => void", "signature": { "arguments": [], "return": { "name": "void" } } }, "description": "Optional callback when the action button is pressed.\nThe button is only rendered when both `actionButtonText` and `onAction` are provided." }, "children": { "required": false, "tsType": { "name": "ReactNode" }, "description": "Optional additional content to display below the action button." }, "twClassName": { "required": false, "tsType": { "name": "string" }, "description": "Optional prop to add twrnc overriding classNames.", "defaultValue": { "value": "''", "computed": false } } } }, "stories": [ { "id": "components-tabemptystate--default", "name": "Default", "snippet": "const Default = () => }\n description=\"No perpetual positions found\"\n actionButtonText=\"Start trading\" />;" }, { "id": "components-tabemptystate--description", "name": "Description", "snippet": "const Description = () => ;" }, { "id": "components-tabemptystate--icon-story", "name": "Icon", "snippet": "const IconStory = () => }\n description=\"No items found\" />;" }, { "id": "components-tabemptystate--on-action", "name": "On Action", "snippet": "const OnAction = () => {\n console.log('Action pressed');\n }} />;" }, { "id": "components-tabemptystate--children", "name": "Children", "snippet": "const Children = () => \n Additional custom content\n;" } ], "import": "import { Box, Icon, TabEmptyState, Text } from '@metamask/design-system-react-native';\nimport { Icon, IconName, IconSize } from '../Icon';" }, "components-tag": { "id": "components-tag", "name": "Tag", "path": "../../packages/design-system-react-native/src/components/Tag/Tag.stories.tsx", "jsDocTags": {}, "reactDocgen": { "description": "", "methods": [], "displayName": "Tag", "definedInFile": "/home/runner/work/metamask-design-system/metamask-design-system/packages/design-system-react-native/src/components/Tag/Tag.tsx", "actualName": "Tag", "exportName": "Tag", "props": { "startIconName": { "required": false, "tsType": { "name": "IconName" }, "description": "Optional prop to specify an icon to show at the start of the tag (`IconSize.Xs` unless overridden in `startIconProps`)." }, "startIconProps": { "required": false, "tsType": { "name": "Partial", "elements": [ { "name": "intersection", "raw": "IconPropsShared & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n} & Omit", "elements": [ { "name": "IconPropsShared" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } }, { "name": "Omit", "elements": [ { "name": "SvgProps" }, { "name": "union", "raw": "'color' | 'name'", "elements": [ { "name": "literal", "value": "'color'" }, { "name": "literal", "value": "'name'" } ] } ], "raw": "Omit" } ] } ], "raw": "Partial" }, "description": "Optional prop to pass additional properties to the start icon. You may set `name` here instead of `startIconName`." }, "endIconName": { "required": false, "tsType": { "name": "IconName" }, "description": "Optional prop to specify an icon to show at the end of the tag (`IconSize.Xs` unless overridden in `endIconProps`)." }, "endIconProps": { "required": false, "tsType": { "name": "Partial", "elements": [ { "name": "intersection", "raw": "IconPropsShared & {\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n} & Omit", "elements": [ { "name": "IconPropsShared" }, { "name": "signature", "type": "object", "raw": "{\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n}", "signature": { "properties": [ { "key": "twClassName", "value": { "name": "string", "required": false }, "description": "Optional prop to add twrnc overriding classNames." } ] } }, { "name": "Omit", "elements": [ { "name": "SvgProps" }, { "name": "union", "raw": "'color' | 'name'", "elements": [ { "name": "literal", "value": "'color'" }, { "name": "literal", "value": "'name'" } ] } ], "raw": "Omit" } ] } ], "raw": "Partial" }, "description": "Optional prop to pass additional properties to the end icon. You may set `name` here instead of `endIconName`." }, "twClassName": { "required": false, "tsType": { "name": "string" }, "description": "Additional Tailwind classes to be applied to the Tag container." }, "testID": { "required": false, "tsType": { "name": "string" }, "description": "Test identifier for selecting the component in tests." }, "style": { "required": false, "tsType": { "name": "StyleProp", "elements": [ { "name": "ViewStyle" } ], "raw": "StyleProp" }, "description": "Optional container styles." }, "severity": { "defaultValue": { "value": "'neutral'", "computed": false }, "required": false } } }, "stories": [ { "id": "components-tag--default", "name": "Default", "snippet": "const Default = () => Tag;" }, { "id": "components-tag--severity", "name": "Severity", "snippet": "const Severity = () => (\n \n Neutral\n Success\n Danger\n Warning\n Info\n \n);" }, { "id": "components-tag--start-icon-name", "name": "Start Icon Name", "snippet": "const StartIconName = () => Tag;" }, { "id": "components-tag--end-icon-name", "name": "End Icon Name", "snippet": "const EndIconName = () => Tag;" }, { "id": "components-tag--start-accessory", "name": "Start Accessory", "snippet": "const StartAccessory = () => (\n \n }\n >\n Tag\n \n);" }, { "id": "components-tag--end-accessory", "name": "End Accessory", "snippet": "const EndAccessory = () => (\n \n }\n >\n Tag\n \n);" }, { "id": "components-tag--start-and-end-icon-names", "name": "Start And End Icon Names", "snippet": "const StartAndEndIconNames = () => (\n \n Tag\n \n);" } ], "import": "import { Box, Icon, Tag } from '@metamask/design-system-react-native';\nimport { TagSeverity } from '@metamask/design-system-shared';" }, "components-text": { "id": "components-text", "name": "Text", "path": "../../packages/design-system-react-native/src/components/Text/Text.stories.tsx", "jsDocTags": {}, "reactDocgen": { "description": "", "methods": [], "displayName": "Text", "definedInFile": "/home/runner/work/metamask-design-system/metamask-design-system/packages/design-system-react-native/src/components/Text/Text.tsx", "actualName": "Text", "exportName": "Text", "props": { "twClassName": { "required": false, "tsType": { "name": "string" }, "description": "Optional prop to add twrnc overriding classNames." }, "variant": { "defaultValue": { "value": "'body-md'", "computed": false }, "required": false }, "color": { "defaultValue": { "value": "'text-default'", "computed": false }, "required": false }, "fontFamily": { "defaultValue": { "value": "'default'", "computed": false }, "required": false }, "fontStyle": { "defaultValue": { "value": "'normal'", "computed": false }, "required": false } } }, "stories": [ { "id": "components-text--default", "name": "Default", "snippet": "const Default = () => The quick orange fox jumped over the lazy dog.;" }, { "id": "components-text--variant", "name": "Variant", "snippet": "const Variant = (args) => (\n \n {Object.keys(TextVariant).map((variantKey) => (\n \n {variantKey}\n \n ))}\n \n);" }, { "id": "components-text--color", "name": "Color", "snippet": "const Color = (args) => (\n \n {Object.keys(TextColor).map((colorKey) => (\n \n {colorKey}\n \n ))}\n \n);" }, { "id": "components-text--font-weight-story", "name": "Font Weight", "snippet": "const FontWeightStory = () => \n Regular (400)\n \n Medium (500)\n \n Bold (600)\n \n;" }, { "id": "components-text--font-family-story", "name": "Font Family", "snippet": "const FontFamilyStory = () => \n Default (Inter)\n \n Hero (Grotzec Cond)\n \n;" }, { "id": "components-text--font-style-story", "name": "Font Style", "snippet": "const FontStyleStory = () => \n Normal\n \n Italic\n \n;" } ], "import": "import { ScrollView, View } from 'react-native';\nimport { Text } from '@metamask/design-system-react-native';\nimport { TextVariant, TextColor, FontWeight, FontFamily, FontStyle } from '@metamask/design-system-shared';" }, "components-textarea": { "id": "components-textarea", "name": "TextArea", "path": "../../packages/design-system-react-native/src/components/TextArea/TextArea.stories.tsx", "jsDocTags": {}, "reactDocgen": { "description": "", "methods": [], "displayName": "TextArea", "definedInFile": "/home/runner/work/metamask-design-system/metamask-design-system/packages/design-system-react-native/src/components/TextArea/TextArea.tsx", "actualName": "TextArea", "exportName": "TextArea", "props": { "onChangeText": { "required": false, "tsType": { "name": "intersection['onChangeText']", "raw": "InputProps['onChangeText']" }, "description": "Called when the `TextInput` value changes (React Native naming)." }, "onFocus": { "required": false, "tsType": { "name": "intersection['onFocus']", "raw": "InputProps['onFocus']" }, "description": "Called when the `TextInput` receives focus (composed with TextArea border state)." }, "onBlur": { "required": false, "tsType": { "name": "intersection['onBlur']", "raw": "InputProps['onBlur']" }, "description": "Called when the `TextInput` loses focus (composed with TextArea border state)." }, "autoFocus": { "defaultValue": { "value": "false", "computed": false }, "required": false }, "isDisabled": { "defaultValue": { "value": "false", "computed": false }, "required": false }, "isError": { "defaultValue": { "value": "false", "computed": false }, "required": false } } }, "stories": [ { "id": "components-textarea--default", "name": "Default", "snippet": "const Default = () => ;" }, { "id": "components-textarea--is-error", "name": "Is Error", "snippet": "const IsError = () => (\n \n \n \n \n);" }, { "id": "components-textarea--is-disabled", "name": "Is Disabled", "snippet": "const IsDisabled = () => (\n \n \n