@ankhorage/surface 5.0.1 → 7.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +12 -0
- package/README.md +1 -2
- package/dist/{layout → core/responsive}/Show.d.ts +2 -1
- package/dist/core/responsive/Show.d.ts.map +1 -0
- package/dist/{layout → core/responsive}/Show.js +3 -1
- package/dist/core/responsive/Show.js.map +1 -0
- package/dist/core/responsive/index.d.ts +1 -0
- package/dist/core/responsive/index.d.ts.map +1 -1
- package/dist/core/responsive/index.js +1 -0
- package/dist/core/responsive/index.js.map +1 -1
- package/dist/features/app-bar/adapters/inbound/AppBar.d.ts +5 -0
- package/dist/features/app-bar/adapters/inbound/AppBar.d.ts.map +1 -0
- package/dist/features/app-bar/adapters/inbound/AppBar.js +40 -0
- package/dist/features/app-bar/adapters/inbound/AppBar.js.map +1 -0
- package/dist/features/app-bar/public.d.ts +3 -0
- package/dist/features/app-bar/public.d.ts.map +1 -0
- package/dist/features/app-bar/public.js +2 -0
- package/dist/features/app-bar/public.js.map +1 -0
- package/dist/features/badge/adapters/inbound/Badge.js +3 -3
- package/dist/features/badge/adapters/inbound/Badge.js.map +1 -1
- package/dist/features/button/adapters/inbound/Button.js +8 -8
- package/dist/features/button/adapters/inbound/Button.js.map +1 -1
- package/dist/features/button/adapters/inbound/IconButton.js +3 -3
- package/dist/features/button/adapters/inbound/IconButton.js.map +1 -1
- package/dist/features/form/checkbox/adapters/inbound/Checkbox.js +7 -7
- package/dist/features/form/checkbox/adapters/inbound/Checkbox.js.map +1 -1
- package/dist/{components/field → features/form/field/adapters/inbound}/Field.d.ts +2 -1
- package/dist/features/form/field/adapters/inbound/Field.d.ts.map +1 -0
- package/dist/features/form/field/adapters/inbound/Field.js +40 -0
- package/dist/features/form/field/adapters/inbound/Field.js.map +1 -0
- package/dist/features/form/field/public.d.ts +3 -0
- package/dist/features/form/field/public.d.ts.map +1 -0
- package/dist/features/form/field/public.js +2 -0
- package/dist/features/form/field/public.js.map +1 -0
- package/dist/features/form/radio/adapters/inbound/Radio.js +8 -8
- package/dist/features/form/radio/adapters/inbound/Radio.js.map +1 -1
- package/dist/{components/switch → features/form/switch/adapters/inbound}/Switch.d.ts +2 -1
- package/dist/features/form/switch/adapters/inbound/Switch.d.ts.map +1 -0
- package/dist/features/form/switch/adapters/inbound/Switch.js +52 -0
- package/dist/features/form/switch/adapters/inbound/Switch.js.map +1 -0
- package/dist/features/form/switch/public.d.ts +3 -0
- package/dist/features/form/switch/public.d.ts.map +1 -0
- package/dist/features/form/switch/public.js +2 -0
- package/dist/features/form/switch/public.js.map +1 -0
- package/dist/features/form/text-input/adapters/inbound/TextInput.d.ts.map +1 -1
- package/dist/features/form/text-input/adapters/inbound/TextInput.js +8 -4
- package/dist/features/form/text-input/adapters/inbound/TextInput.js.map +1 -1
- package/dist/features/layout/adapters/inbound/Divider.js +2 -2
- package/dist/features/layout/adapters/inbound/Divider.js.map +1 -1
- package/dist/features/layout/adapters/inbound/Grid.d.ts.map +1 -1
- package/dist/features/layout/adapters/inbound/Grid.js +7 -9
- package/dist/features/layout/adapters/inbound/Grid.js.map +1 -1
- package/dist/features/layout/adapters/inbound/ScrollView.d.ts +5 -0
- package/dist/features/layout/adapters/inbound/ScrollView.d.ts.map +1 -0
- package/dist/features/layout/adapters/inbound/ScrollView.js +69 -0
- package/dist/features/layout/adapters/inbound/ScrollView.js.map +1 -0
- package/dist/features/layout/adapters/inbound/View.d.ts +5 -0
- package/dist/features/layout/adapters/inbound/View.d.ts.map +1 -0
- package/dist/features/layout/adapters/inbound/View.js +17 -0
- package/dist/features/layout/adapters/inbound/View.js.map +1 -0
- package/dist/features/layout/public.d.ts +3 -4
- package/dist/features/layout/public.d.ts.map +1 -1
- package/dist/features/layout/public.js +2 -3
- package/dist/features/layout/public.js.map +1 -1
- package/dist/features/list/adapters/inbound/List.d.ts +5 -0
- package/dist/features/list/adapters/inbound/List.d.ts.map +1 -0
- package/dist/features/list/adapters/inbound/List.js +7 -0
- package/dist/features/list/adapters/inbound/List.js.map +1 -0
- package/dist/features/list/adapters/inbound/ListItem.d.ts +5 -0
- package/dist/features/list/adapters/inbound/ListItem.d.ts.map +1 -0
- package/dist/features/list/adapters/inbound/ListItem.js +59 -0
- package/dist/features/list/adapters/inbound/ListItem.js.map +1 -0
- package/dist/features/list/public.d.ts +4 -0
- package/dist/features/list/public.d.ts.map +1 -0
- package/dist/features/list/public.js +3 -0
- package/dist/features/list/public.js.map +1 -0
- package/dist/features/modal/adapters/inbound/Modal.d.ts.map +1 -1
- package/dist/features/modal/adapters/inbound/Modal.js +8 -8
- package/dist/features/modal/adapters/inbound/Modal.js.map +1 -1
- package/dist/features/popover-menu/adapters/inbound/PopoverMenu.d.ts.map +1 -1
- package/dist/features/popover-menu/adapters/inbound/PopoverMenu.js +11 -12
- package/dist/features/popover-menu/adapters/inbound/PopoverMenu.js.map +1 -1
- package/dist/features/surface/adapters/inbound/Surface.d.ts +1 -1
- package/dist/features/surface/adapters/inbound/Surface.d.ts.map +1 -1
- package/dist/features/surface/adapters/inbound/Surface.js +3 -3
- package/dist/features/surface/adapters/inbound/Surface.js.map +1 -1
- package/dist/features/tabs/adapters/inbound/Tab.js +3 -3
- package/dist/features/tabs/adapters/inbound/Tab.js.map +1 -1
- package/dist/features/tabs/adapters/inbound/TabList.d.ts.map +1 -1
- package/dist/features/tabs/adapters/inbound/TabList.js +3 -5
- package/dist/features/tabs/adapters/inbound/TabList.js.map +1 -1
- package/dist/features/tabs/adapters/inbound/Tabs.js +2 -2
- package/dist/features/tabs/adapters/inbound/Tabs.js.map +1 -1
- package/dist/features/toast/adapters/inbound/Toast.js +5 -5
- package/dist/features/toast/adapters/inbound/Toast.js.map +1 -1
- package/dist/features/toast/adapters/inbound/ToastProvider.js +3 -3
- package/dist/features/toast/adapters/inbound/ToastProvider.js.map +1 -1
- package/dist/index.d.ts +10 -15
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +5 -8
- package/dist/index.js.map +1 -1
- package/dist/primitives/button-base/ButtonBase.d.ts +1 -0
- package/dist/primitives/button-base/ButtonBase.d.ts.map +1 -1
- package/dist/primitives/button-base/ButtonBase.js +6 -5
- package/dist/primitives/button-base/ButtonBase.js.map +1 -1
- package/dist/primitives/button-base/types.d.ts +2 -2
- package/dist/primitives/button-base/types.d.ts.map +1 -1
- package/dist/primitives/button-base/types.js.map +1 -1
- package/dist/types/app-bar.d.ts +12 -0
- package/dist/types/app-bar.d.ts.map +1 -0
- package/dist/types/app-bar.js +2 -0
- package/dist/types/app-bar.js.map +1 -0
- package/dist/{components/field/types.d.ts → types/field.d.ts} +1 -1
- package/dist/types/field.d.ts.map +1 -0
- package/dist/types/field.js +2 -0
- package/dist/types/field.js.map +1 -0
- package/dist/types/layout.d.ts +15 -17
- package/dist/types/layout.d.ts.map +1 -1
- package/dist/types/layout.js.map +1 -1
- package/dist/types/list.d.ts +20 -0
- package/dist/types/list.d.ts.map +1 -0
- package/dist/types/list.js +2 -0
- package/dist/types/list.js.map +1 -0
- package/dist/types/surface.d.ts +2 -2
- package/dist/types/surface.d.ts.map +1 -1
- package/dist/types/surface.js.map +1 -1
- package/dist/{components/switch/types.d.ts → types/switch.d.ts} +4 -4
- package/dist/types/switch.d.ts.map +1 -0
- package/dist/types/switch.js +2 -0
- package/dist/types/switch.js.map +1 -0
- package/dist/utils/resolveViewStyles.d.ts +7 -0
- package/dist/utils/resolveViewStyles.d.ts.map +1 -0
- package/dist/utils/{resolveBoxStyles.js → resolveViewStyles.js} +11 -4
- package/dist/utils/resolveViewStyles.js.map +1 -0
- package/package.json +1 -1
- package/src/{layout → core/responsive}/Show.tsx +4 -1
- package/src/core/responsive/index.ts +1 -0
- package/src/features/app-bar/adapters/inbound/AppBar.tsx +69 -0
- package/src/features/app-bar/public.ts +2 -0
- package/src/features/badge/adapters/inbound/Badge.tsx +3 -3
- package/src/features/button/adapters/inbound/Button.tsx +8 -8
- package/src/features/button/adapters/inbound/IconButton.tsx +3 -3
- package/src/features/form/checkbox/adapters/inbound/Checkbox.tsx +7 -7
- package/src/features/form/field/adapters/inbound/Field.tsx +82 -0
- package/src/features/form/field/public.ts +2 -0
- package/src/features/form/radio/adapters/inbound/Radio.tsx +8 -8
- package/src/features/form/switch/adapters/inbound/Switch.tsx +123 -0
- package/src/features/form/switch/public.ts +2 -0
- package/src/features/form/text-input/adapters/inbound/TextInput.tsx +21 -5
- package/src/features/layout/adapters/inbound/Divider.tsx +2 -2
- package/src/features/layout/adapters/inbound/Grid.tsx +12 -14
- package/src/features/layout/adapters/inbound/ScrollView.tsx +102 -0
- package/src/features/layout/adapters/inbound/{Box.tsx → View.tsx} +9 -9
- package/src/features/layout/public.ts +3 -10
- package/src/features/list/adapters/inbound/List.tsx +9 -0
- package/src/features/list/adapters/inbound/ListItem.tsx +128 -0
- package/src/features/list/public.test.ts +13 -0
- package/src/features/list/public.ts +3 -0
- package/src/features/modal/adapters/inbound/Modal.tsx +11 -8
- package/src/features/popover-menu/adapters/inbound/PopoverMenu.tsx +11 -14
- package/src/features/surface/adapters/inbound/Surface.tsx +3 -3
- package/src/features/tabs/adapters/inbound/Tab.tsx +3 -3
- package/src/features/tabs/adapters/inbound/TabList.tsx +3 -6
- package/src/features/tabs/adapters/inbound/Tabs.tsx +2 -2
- package/src/features/toast/adapters/inbound/Toast.tsx +5 -5
- package/src/features/toast/adapters/inbound/ToastProvider.tsx +3 -3
- package/src/index.test.ts +26 -48
- package/src/index.ts +10 -21
- package/src/primitives/button-base/ButtonBase.tsx +6 -8
- package/src/primitives/button-base/types.ts +2 -2
- package/src/types/app-bar.ts +13 -0
- package/src/types/layout.ts +25 -20
- package/src/types/list.ts +22 -0
- package/src/types/surface.ts +2 -2
- package/src/{components/switch/types.ts → types/switch.ts} +3 -3
- package/src/utils/resolveViewStyles.test.ts +71 -0
- package/src/utils/{resolveBoxStyles.ts → resolveViewStyles.ts} +16 -9
- package/src/webAcceptance.test.tsx +8 -9
- package/dist/components/field/Field.d.ts.map +0 -1
- package/dist/components/field/Field.js +0 -26
- package/dist/components/field/Field.js.map +0 -1
- package/dist/components/field/index.d.ts +0 -3
- package/dist/components/field/index.d.ts.map +0 -1
- package/dist/components/field/index.js +0 -2
- package/dist/components/field/index.js.map +0 -1
- package/dist/components/field/types.d.ts.map +0 -1
- package/dist/components/field/types.js +0 -2
- package/dist/components/field/types.js.map +0 -1
- package/dist/components/helper-text/HelperText.d.ts +0 -4
- package/dist/components/helper-text/HelperText.d.ts.map +0 -1
- package/dist/components/helper-text/HelperText.js +0 -8
- package/dist/components/helper-text/HelperText.js.map +0 -1
- package/dist/components/helper-text/index.d.ts +0 -3
- package/dist/components/helper-text/index.d.ts.map +0 -1
- package/dist/components/helper-text/index.js +0 -2
- package/dist/components/helper-text/index.js.map +0 -1
- package/dist/components/helper-text/types.d.ts +0 -9
- package/dist/components/helper-text/types.d.ts.map +0 -1
- package/dist/components/helper-text/types.js +0 -2
- package/dist/components/helper-text/types.js.map +0 -1
- package/dist/components/label/Label.d.ts +0 -4
- package/dist/components/label/Label.d.ts.map +0 -1
- package/dist/components/label/Label.js +0 -11
- package/dist/components/label/Label.js.map +0 -1
- package/dist/components/label/index.d.ts +0 -3
- package/dist/components/label/index.d.ts.map +0 -1
- package/dist/components/label/index.js +0 -2
- package/dist/components/label/index.js.map +0 -1
- package/dist/components/label/types.d.ts +0 -10
- package/dist/components/label/types.d.ts.map +0 -1
- package/dist/components/label/types.js +0 -2
- package/dist/components/label/types.js.map +0 -1
- package/dist/components/list-item/ListItem.d.ts +0 -4
- package/dist/components/list-item/ListItem.d.ts.map +0 -1
- package/dist/components/list-item/ListItem.js +0 -43
- package/dist/components/list-item/ListItem.js.map +0 -1
- package/dist/components/list-item/index.d.ts +0 -3
- package/dist/components/list-item/index.d.ts.map +0 -1
- package/dist/components/list-item/index.js +0 -2
- package/dist/components/list-item/index.js.map +0 -1
- package/dist/components/list-item/types.d.ts +0 -11
- package/dist/components/list-item/types.d.ts.map +0 -1
- package/dist/components/list-item/types.js +0 -2
- package/dist/components/list-item/types.js.map +0 -1
- package/dist/components/switch/Switch.d.ts.map +0 -1
- package/dist/components/switch/Switch.js +0 -71
- package/dist/components/switch/Switch.js.map +0 -1
- package/dist/components/switch/index.d.ts +0 -3
- package/dist/components/switch/index.d.ts.map +0 -1
- package/dist/components/switch/index.js +0 -2
- package/dist/components/switch/index.js.map +0 -1
- package/dist/components/switch/types.d.ts.map +0 -1
- package/dist/components/switch/types.js +0 -2
- package/dist/components/switch/types.js.map +0 -1
- package/dist/components/textarea/Textarea.d.ts +0 -4
- package/dist/components/textarea/Textarea.d.ts.map +0 -1
- package/dist/components/textarea/Textarea.js +0 -6
- package/dist/components/textarea/Textarea.js.map +0 -1
- package/dist/components/textarea/index.d.ts +0 -3
- package/dist/components/textarea/index.d.ts.map +0 -1
- package/dist/components/textarea/index.js +0 -2
- package/dist/components/textarea/index.js.map +0 -1
- package/dist/components/textarea/types.d.ts +0 -5
- package/dist/components/textarea/types.d.ts.map +0 -1
- package/dist/components/textarea/types.js +0 -2
- package/dist/components/textarea/types.js.map +0 -1
- package/dist/features/layout/adapters/inbound/Box.d.ts +0 -5
- package/dist/features/layout/adapters/inbound/Box.d.ts.map +0 -1
- package/dist/features/layout/adapters/inbound/Box.js +0 -17
- package/dist/features/layout/adapters/inbound/Box.js.map +0 -1
- package/dist/features/layout/adapters/inbound/Container.d.ts +0 -5
- package/dist/features/layout/adapters/inbound/Container.d.ts.map +0 -1
- package/dist/features/layout/adapters/inbound/Container.js +0 -28
- package/dist/features/layout/adapters/inbound/Container.js.map +0 -1
- package/dist/features/layout/adapters/inbound/Stack.d.ts +0 -5
- package/dist/features/layout/adapters/inbound/Stack.d.ts.map +0 -1
- package/dist/features/layout/adapters/inbound/Stack.js +0 -27
- package/dist/features/layout/adapters/inbound/Stack.js.map +0 -1
- package/dist/layout/AppBar.d.ts +0 -13
- package/dist/layout/AppBar.d.ts.map +0 -1
- package/dist/layout/AppBar.js +0 -30
- package/dist/layout/AppBar.js.map +0 -1
- package/dist/layout/Center.d.ts +0 -7
- package/dist/layout/Center.d.ts.map +0 -1
- package/dist/layout/Center.js +0 -12
- package/dist/layout/Center.js.map +0 -1
- package/dist/layout/Inline.d.ts +0 -5
- package/dist/layout/Inline.d.ts.map +0 -1
- package/dist/layout/Inline.js +0 -6
- package/dist/layout/Inline.js.map +0 -1
- package/dist/layout/ScrollArea.d.ts +0 -9
- package/dist/layout/ScrollArea.d.ts.map +0 -1
- package/dist/layout/ScrollArea.js +0 -52
- package/dist/layout/ScrollArea.js.map +0 -1
- package/dist/layout/Show.d.ts.map +0 -1
- package/dist/layout/Show.js.map +0 -1
- package/dist/layout/Spacer.d.ts +0 -9
- package/dist/layout/Spacer.d.ts.map +0 -1
- package/dist/layout/Spacer.js +0 -12
- package/dist/layout/Spacer.js.map +0 -1
- package/dist/layout/Template.d.ts +0 -18
- package/dist/layout/Template.d.ts.map +0 -1
- package/dist/layout/Template.js +0 -36
- package/dist/layout/Template.js.map +0 -1
- package/dist/layout/index.d.ts +0 -15
- package/dist/layout/index.d.ts.map +0 -1
- package/dist/layout/index.js +0 -8
- package/dist/layout/index.js.map +0 -1
- package/dist/utils/resolveBoxStyles.d.ts +0 -7
- package/dist/utils/resolveBoxStyles.d.ts.map +0 -1
- package/dist/utils/resolveBoxStyles.js.map +0 -1
- package/src/components/field/Field.tsx +0 -51
- package/src/components/field/index.ts +0 -2
- package/src/components/helper-text/HelperText.tsx +0 -12
- package/src/components/helper-text/index.ts +0 -2
- package/src/components/helper-text/types.ts +0 -10
- package/src/components/label/Label.tsx +0 -23
- package/src/components/label/index.ts +0 -2
- package/src/components/label/types.ts +0 -11
- package/src/components/list-item/ListItem.tsx +0 -72
- package/src/components/list-item/index.ts +0 -2
- package/src/components/list-item/types.ts +0 -11
- package/src/components/switch/Switch.tsx +0 -118
- package/src/components/switch/index.ts +0 -2
- package/src/components/textarea/Textarea.tsx +0 -15
- package/src/components/textarea/index.ts +0 -2
- package/src/components/textarea/types.ts +0 -5
- package/src/features/layout/adapters/inbound/Container.tsx +0 -43
- package/src/features/layout/adapters/inbound/Stack.test.ts +0 -13
- package/src/features/layout/adapters/inbound/Stack.tsx +0 -44
- package/src/layout/AppBar.tsx +0 -60
- package/src/layout/Center.tsx +0 -22
- package/src/layout/Inline.tsx +0 -9
- package/src/layout/ScrollArea.tsx +0 -116
- package/src/layout/Spacer.tsx +0 -22
- package/src/layout/Template.tsx +0 -86
- package/src/layout/index.ts +0 -14
- package/src/utils/resolveBoxStyles.test.ts +0 -54
- /package/src/{components/field/types.ts → types/field.ts} +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Radio.js","sourceRoot":"","sources":["../../../../../../src/features/form/radio/adapters/inbound/Radio.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport type { ViewStyle } from 'react-native';\n\nimport {\n type InteractionState,\n resolveFieldState,\n resolveIndicatorSize,\n resolveSelectionControlColors,\n resolveSelectionControlNextChecked,\n} from '../../../../../internal/resolvers';\nimport { useControllableState } from '../../../../../internal/useControllableState';\nimport { ButtonBase } from '../../../../../primitives/button-base';\nimport type { ButtonBaseProps } from '../../../../../primitives/button-base/types';\nimport { useTheme } from '../../../../../theme/ThemeContext';\nimport type { SurfaceTheme } from '../../../../../theme/types';\nimport type { RadioProps } from '../../../../../types/radio';\nimport { Box } from '../../../../layout/public';\nimport { Text } from '../../../../typography/public';\nimport { isRadioTextContent } from '../../utils/isRadioTextContent';\n\n/*** Renders one accessible radio control with text or structured label content. */\nexport function Radio({\n accessibilityLabel,\n checked,\n children,\n color = 'primary',\n defaultChecked = false,\n disabled = false,\n invalid = false,\n onCheckedChange,\n readOnly = false,\n size = 'm',\n testID,\n ...buttonProps\n}: RadioProps) {\n const { theme } = useTheme();\n const [isChecked, setChecked] = useControllableState<boolean>({\n value: checked,\n defaultValue: defaultChecked,\n onChange: onCheckedChange,\n });\n\n return (\n <RadioControl\n accessibilityLabel={accessibilityLabel}\n buttonProps={buttonProps}\n color={color}\n disabled={disabled}\n invalid={invalid}\n isChecked={isChecked}\n readOnly={readOnly}\n setChecked={setChecked}\n size={size}\n testID={testID}\n theme={theme}\n >\n {children}\n </RadioControl>\n );\n}\n\n/*** Owns the radio interaction boundary around resolved selection content. */\nfunction RadioControl({\n accessibilityLabel,\n buttonProps,\n children,\n color,\n disabled,\n invalid,\n isChecked,\n readOnly,\n setChecked,\n size,\n testID,\n theme,\n}: RadioControlProps) {\n const nextChecked = resolveSelectionControlNextChecked({\n checked: isChecked,\n disabled,\n kind: 'radio',\n readOnly,\n });\n\n return (\n <ButtonBase\n {...buttonProps}\n accessibilityLabel={accessibilityLabel}\n accessibilityRole=\"radio\"\n accessibilityState={{ checked: isChecked }}\n disabled={disabled}\n onPress={nextChecked === null ? undefined : () => setChecked(nextChecked)}\n testID={testID}\n >\n {(interactionState) =>\n renderRadioContent({\n children,\n color,\n disabled,\n interactionState,\n invalid,\n isChecked,\n readOnly,\n size,\n theme,\n })\n }\n </ButtonBase>\n );\n}\n\n/*** Renders the radio indicator and optional content for one interaction state. */\nfunction renderRadioContent(input: RadioContentInput) {\n const { interactionState, theme } = input;\n const fieldState = resolveFieldState({\n disabled: input.disabled,\n focused: interactionState.focused,\n invalid: input.invalid,\n readOnly: input.readOnly,\n });\n const colors = resolveSelectionControlColors(theme, {\n checked: input.isChecked,\n fieldState,\n hovered: interactionState.hovered,\n pressed: interactionState.pressed,\n color: input.color,\n });\n const indicatorSize = resolveIndicatorSize(input.size);\n const labelEmphasis = colors.labelColor === theme.semantics.content.muted ? 'muted' : 'default';\n const hasContent =\n input.children !== undefined && input.children !== null && input.children !== false;\n\n return (\n <Box style={resolveSelectionRowStyle(colors.opacity)}>\n <Box\n radius=\"full\"\n style={resolveRadioIndicatorStyle(\n colors.backgroundColor,\n colors.borderColor,\n indicatorSize.radio,\n )}\n >\n {input.isChecked ? (\n <Box\n radius=\"full\"\n style={resolveRadioDotStyle(colors.indicatorColor, indicatorSize.radioDot)}\n />\n ) : null}\n </Box>\n {hasContent ? (\n <Box flex={1} ml=\"s\">\n {isRadioTextContent(input.children) ? (\n <Text emphasis={labelEmphasis}>{input.children}</Text>\n ) : (\n input.children\n )}\n </Box>\n ) : null}\n </Box>\n );\n}\n\n/*** Resolves the horizontal selection-control row style. */\nfunction resolveSelectionRowStyle(opacity: number | undefined): ViewStyle {\n return { alignItems: 'center', flexDirection: 'row', opacity };\n}\n\n/*** Resolves radio indicator dimensions and interaction colors. */\nfunction resolveRadioIndicatorStyle(\n backgroundColor: string,\n borderColor: string,\n size: number,\n): ViewStyle {\n return {\n alignItems: 'center',\n backgroundColor,\n borderColor,\n borderWidth: 1.5,\n height: size,\n justifyContent: 'center',\n width: size,\n };\n}\n\n/*** Resolves the checked radio dot style. */\nfunction resolveRadioDotStyle(backgroundColor: string, size: number): ViewStyle {\n return { backgroundColor, height: size, width: size };\n}\n\ninterface RadioControlProps {\n accessibilityLabel: RadioProps['accessibilityLabel'];\n buttonProps: ButtonBaseProps;\n children: RadioProps['children'];\n color: NonNullable<RadioProps['color']>;\n disabled: boolean;\n invalid: boolean;\n isChecked: boolean;\n readOnly: boolean;\n setChecked: (checked: boolean) => void;\n size: NonNullable<RadioProps['size']>;\n testID: RadioProps['testID'];\n theme: SurfaceTheme;\n}\n\ninterface RadioContentInput {\n children: RadioProps['children'];\n color: NonNullable<RadioProps['color']>;\n disabled: boolean;\n interactionState: InteractionState;\n invalid: boolean;\n isChecked: boolean;\n readOnly: boolean;\n size: NonNullable<RadioProps['size']>;\n theme: SurfaceTheme;\n}\n"]}
|
|
1
|
+
{"version":3,"file":"Radio.js","sourceRoot":"","sources":["../../../../../../src/features/form/radio/adapters/inbound/Radio.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport type { ViewStyle } from 'react-native';\n\nimport {\n type InteractionState,\n resolveFieldState,\n resolveIndicatorSize,\n resolveSelectionControlColors,\n resolveSelectionControlNextChecked,\n} from '../../../../../internal/resolvers';\nimport { useControllableState } from '../../../../../internal/useControllableState';\nimport { ButtonBase } from '../../../../../primitives/button-base';\nimport type { ButtonBaseProps } from '../../../../../primitives/button-base/types';\nimport { useTheme } from '../../../../../theme/ThemeContext';\nimport type { SurfaceTheme } from '../../../../../theme/types';\nimport type { RadioProps } from '../../../../../types/radio';\nimport { View } from '../../../../layout/public';\nimport { Text } from '../../../../typography/public';\nimport { isRadioTextContent } from '../../utils/isRadioTextContent';\n\n/*** Renders one accessible radio control with text or structured label content. */\nexport function Radio({\n accessibilityLabel,\n checked,\n children,\n color = 'primary',\n defaultChecked = false,\n disabled = false,\n invalid = false,\n onCheckedChange,\n readOnly = false,\n size = 'm',\n testID,\n ...buttonProps\n}: RadioProps) {\n const { theme } = useTheme();\n const [isChecked, setChecked] = useControllableState<boolean>({\n value: checked,\n defaultValue: defaultChecked,\n onChange: onCheckedChange,\n });\n\n return (\n <RadioControl\n accessibilityLabel={accessibilityLabel}\n buttonProps={buttonProps}\n color={color}\n disabled={disabled}\n invalid={invalid}\n isChecked={isChecked}\n readOnly={readOnly}\n setChecked={setChecked}\n size={size}\n testID={testID}\n theme={theme}\n >\n {children}\n </RadioControl>\n );\n}\n\n/*** Owns the radio interaction boundary around resolved selection content. */\nfunction RadioControl({\n accessibilityLabel,\n buttonProps,\n children,\n color,\n disabled,\n invalid,\n isChecked,\n readOnly,\n setChecked,\n size,\n testID,\n theme,\n}: RadioControlProps) {\n const nextChecked = resolveSelectionControlNextChecked({\n checked: isChecked,\n disabled,\n kind: 'radio',\n readOnly,\n });\n\n return (\n <ButtonBase\n {...buttonProps}\n accessibilityLabel={accessibilityLabel}\n accessibilityRole=\"radio\"\n accessibilityState={{ checked: isChecked }}\n disabled={disabled}\n onPress={nextChecked === null ? undefined : () => setChecked(nextChecked)}\n testID={testID}\n >\n {(interactionState) =>\n renderRadioContent({\n children,\n color,\n disabled,\n interactionState,\n invalid,\n isChecked,\n readOnly,\n size,\n theme,\n })\n }\n </ButtonBase>\n );\n}\n\n/*** Renders the radio indicator and optional content for one interaction state. */\nfunction renderRadioContent(input: RadioContentInput) {\n const { interactionState, theme } = input;\n const fieldState = resolveFieldState({\n disabled: input.disabled,\n focused: interactionState.focused,\n invalid: input.invalid,\n readOnly: input.readOnly,\n });\n const colors = resolveSelectionControlColors(theme, {\n checked: input.isChecked,\n fieldState,\n hovered: interactionState.hovered,\n pressed: interactionState.pressed,\n color: input.color,\n });\n const indicatorSize = resolveIndicatorSize(input.size);\n const labelEmphasis = colors.labelColor === theme.semantics.content.muted ? 'muted' : 'default';\n const hasContent =\n input.children !== undefined && input.children !== null && input.children !== false;\n\n return (\n <View style={resolveSelectionRowStyle(colors.opacity)}>\n <View\n radius=\"full\"\n style={resolveRadioIndicatorStyle(\n colors.backgroundColor,\n colors.borderColor,\n indicatorSize.radio,\n )}\n >\n {input.isChecked ? (\n <View\n radius=\"full\"\n style={resolveRadioDotStyle(colors.indicatorColor, indicatorSize.radioDot)}\n />\n ) : null}\n </View>\n {hasContent ? (\n <View flex={1} ml=\"s\">\n {isRadioTextContent(input.children) ? (\n <Text emphasis={labelEmphasis}>{input.children}</Text>\n ) : (\n input.children\n )}\n </View>\n ) : null}\n </View>\n );\n}\n\n/*** Resolves the horizontal selection-control row style. */\nfunction resolveSelectionRowStyle(opacity: number | undefined): ViewStyle {\n return { alignItems: 'center', flexDirection: 'row', opacity };\n}\n\n/*** Resolves radio indicator dimensions and interaction colors. */\nfunction resolveRadioIndicatorStyle(\n backgroundColor: string,\n borderColor: string,\n size: number,\n): ViewStyle {\n return {\n alignItems: 'center',\n backgroundColor,\n borderColor,\n borderWidth: 1.5,\n height: size,\n justifyContent: 'center',\n width: size,\n };\n}\n\n/*** Resolves the checked radio dot style. */\nfunction resolveRadioDotStyle(backgroundColor: string, size: number): ViewStyle {\n return { backgroundColor, height: size, width: size };\n}\n\ninterface RadioControlProps {\n accessibilityLabel: RadioProps['accessibilityLabel'];\n buttonProps: ButtonBaseProps;\n children: RadioProps['children'];\n color: NonNullable<RadioProps['color']>;\n disabled: boolean;\n invalid: boolean;\n isChecked: boolean;\n readOnly: boolean;\n setChecked: (checked: boolean) => void;\n size: NonNullable<RadioProps['size']>;\n testID: RadioProps['testID'];\n theme: SurfaceTheme;\n}\n\ninterface RadioContentInput {\n children: RadioProps['children'];\n color: NonNullable<RadioProps['color']>;\n disabled: boolean;\n interactionState: InteractionState;\n invalid: boolean;\n isChecked: boolean;\n readOnly: boolean;\n size: NonNullable<RadioProps['size']>;\n theme: SurfaceTheme;\n}\n"]}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import type { SwitchProps } from '
|
|
2
|
+
import type { SwitchProps } from '../../../../../types/switch';
|
|
3
|
+
/*** Renders a controlled or uncontrolled accessible switch. */
|
|
3
4
|
export declare function Switch({ children, checked, defaultChecked, onCheckedChange, color, size, disabled, invalid, readOnly, accessibilityLabel, testID, ...props }: SwitchProps): React.JSX.Element;
|
|
4
5
|
//# sourceMappingURL=Switch.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../../../../src/features/form/switch/adapters/inbound/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAI/D,+DAA+D;AAC/D,wBAAgB,MAAM,CAAC,EACrB,QAAQ,EACR,OAAO,EACP,cAAsB,EACtB,eAAe,EACf,KAAiB,EACjB,IAAU,EACV,QAAgB,EAChB,OAAe,EACf,QAAgB,EAChB,kBAAkB,EAClB,MAAM,EACN,GAAG,KAAK,EACT,EAAE,WAAW,qBAgCb"}
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { resolveFieldState, resolveIndicatorSize, resolveSelectionControlColors, resolveSelectionControlNextChecked, } from '../../../../../internal/resolvers';
|
|
3
|
+
import { useControllableState } from '../../../../../internal/useControllableState';
|
|
4
|
+
import { ButtonBase } from '../../../../../primitives/button-base';
|
|
5
|
+
import { useTheme } from '../../../../../theme/ThemeContext';
|
|
6
|
+
import { View } from '../../../../layout/public';
|
|
7
|
+
import { Text } from '../../../../typography/public';
|
|
8
|
+
/*** Renders a controlled or uncontrolled accessible switch. */
|
|
9
|
+
export function Switch({ children, checked, defaultChecked = false, onCheckedChange, color = 'primary', size = 'm', disabled = false, invalid = false, readOnly = false, accessibilityLabel, testID, ...props }) {
|
|
10
|
+
const { theme } = useTheme();
|
|
11
|
+
const [isChecked, setChecked] = useControllableState({
|
|
12
|
+
value: checked,
|
|
13
|
+
defaultValue: defaultChecked,
|
|
14
|
+
onChange: onCheckedChange,
|
|
15
|
+
});
|
|
16
|
+
const nextChecked = resolveSelectionControlNextChecked({
|
|
17
|
+
checked: isChecked,
|
|
18
|
+
disabled,
|
|
19
|
+
kind: 'switch',
|
|
20
|
+
readOnly,
|
|
21
|
+
});
|
|
22
|
+
return (<ButtonBase {...props} accessibilityLabel={accessibilityLabel} accessibilityRole="switch" accessibilityState={{ checked: isChecked }} disabled={disabled} onPress={nextChecked === null ? undefined : () => setChecked(nextChecked)} testID={testID}>
|
|
23
|
+
{(interactionState) => renderSwitchContent({ children, color, disabled, invalid, isChecked, readOnly, size, theme }, interactionState)}
|
|
24
|
+
</ButtonBase>);
|
|
25
|
+
}
|
|
26
|
+
/*** Resolves switch presentation for one interaction state and renders the visual control. */
|
|
27
|
+
function renderSwitchContent(input, interactionState) {
|
|
28
|
+
const fieldState = resolveFieldState({
|
|
29
|
+
disabled: input.disabled,
|
|
30
|
+
focused: interactionState.focused,
|
|
31
|
+
invalid: input.invalid,
|
|
32
|
+
readOnly: input.readOnly,
|
|
33
|
+
});
|
|
34
|
+
const colors = resolveSelectionControlColors(input.theme, {
|
|
35
|
+
checked: input.isChecked,
|
|
36
|
+
fieldState,
|
|
37
|
+
hovered: interactionState.hovered,
|
|
38
|
+
pressed: interactionState.pressed,
|
|
39
|
+
color: input.color,
|
|
40
|
+
});
|
|
41
|
+
const indicatorSize = resolveIndicatorSize(input.size);
|
|
42
|
+
const labelEmphasis = colors.labelColor === input.theme.semantics.content.muted ? 'muted' : 'default';
|
|
43
|
+
return (<View align="center" direction="row" opacity={colors.opacity}>
|
|
44
|
+
<View bg={colors.trackColor} borderColor={colors.borderColor} borderWidth={1} height={indicatorSize.switchHeight} justify="center" minWidth={indicatorSize.switchWidth} px={2} radius="full" width={indicatorSize.switchWidth}>
|
|
45
|
+
<View alignSelf={input.isChecked ? 'flex-end' : 'flex-start'} bg={colors.thumbColor} height={indicatorSize.switchThumb} radius="full" width={indicatorSize.switchThumb}/>
|
|
46
|
+
</View>
|
|
47
|
+
{input.children ? (<View ml="s">
|
|
48
|
+
<Text emphasis={labelEmphasis}>{input.children}</Text>
|
|
49
|
+
</View>) : null}
|
|
50
|
+
</View>);
|
|
51
|
+
}
|
|
52
|
+
//# sourceMappingURL=Switch.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../../../../../src/features/form/switch/adapters/inbound/Switch.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport {\n type InteractionState,\n resolveFieldState,\n resolveIndicatorSize,\n resolveSelectionControlColors,\n resolveSelectionControlNextChecked,\n} from '../../../../../internal/resolvers';\nimport { useControllableState } from '../../../../../internal/useControllableState';\nimport { ButtonBase } from '../../../../../primitives/button-base';\nimport { useTheme } from '../../../../../theme/ThemeContext';\nimport type { SwitchProps } from '../../../../../types/switch';\nimport { View } from '../../../../layout/public';\nimport { Text } from '../../../../typography/public';\n\n/*** Renders a controlled or uncontrolled accessible switch. */\nexport function Switch({\n children,\n checked,\n defaultChecked = false,\n onCheckedChange,\n color = 'primary',\n size = 'm',\n disabled = false,\n invalid = false,\n readOnly = false,\n accessibilityLabel,\n testID,\n ...props\n}: SwitchProps) {\n const { theme } = useTheme();\n const [isChecked, setChecked] = useControllableState<boolean>({\n value: checked,\n defaultValue: defaultChecked,\n onChange: onCheckedChange,\n });\n const nextChecked = resolveSelectionControlNextChecked({\n checked: isChecked,\n disabled,\n kind: 'switch',\n readOnly,\n });\n\n return (\n <ButtonBase\n {...props}\n accessibilityLabel={accessibilityLabel}\n accessibilityRole=\"switch\"\n accessibilityState={{ checked: isChecked }}\n disabled={disabled}\n onPress={nextChecked === null ? undefined : () => setChecked(nextChecked)}\n testID={testID}\n >\n {(interactionState) =>\n renderSwitchContent(\n { children, color, disabled, invalid, isChecked, readOnly, size, theme },\n interactionState,\n )\n }\n </ButtonBase>\n );\n}\n\ninterface SwitchContentInput {\n children: React.ReactNode;\n color: NonNullable<SwitchProps['color']>;\n disabled: boolean;\n invalid: boolean;\n isChecked: boolean;\n readOnly: boolean;\n size: NonNullable<SwitchProps['size']>;\n theme: ReturnType<typeof useTheme>['theme'];\n}\n\n/*** Resolves switch presentation for one interaction state and renders the visual control. */\nfunction renderSwitchContent(input: SwitchContentInput, interactionState: InteractionState) {\n const fieldState = resolveFieldState({\n disabled: input.disabled,\n focused: interactionState.focused,\n invalid: input.invalid,\n readOnly: input.readOnly,\n });\n const colors = resolveSelectionControlColors(input.theme, {\n checked: input.isChecked,\n fieldState,\n hovered: interactionState.hovered,\n pressed: interactionState.pressed,\n color: input.color,\n });\n const indicatorSize = resolveIndicatorSize(input.size);\n const labelEmphasis =\n colors.labelColor === input.theme.semantics.content.muted ? 'muted' : 'default';\n\n return (\n <View align=\"center\" direction=\"row\" opacity={colors.opacity}>\n <View\n bg={colors.trackColor}\n borderColor={colors.borderColor}\n borderWidth={1}\n height={indicatorSize.switchHeight}\n justify=\"center\"\n minWidth={indicatorSize.switchWidth}\n px={2}\n radius=\"full\"\n width={indicatorSize.switchWidth}\n >\n <View\n alignSelf={input.isChecked ? 'flex-end' : 'flex-start'}\n bg={colors.thumbColor}\n height={indicatorSize.switchThumb}\n radius=\"full\"\n width={indicatorSize.switchThumb}\n />\n </View>\n {input.children ? (\n <View ml=\"s\">\n <Text emphasis={labelEmphasis}>{input.children}</Text>\n </View>\n ) : null}\n </View>\n );\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../../../src/features/form/switch/public.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"public.js","sourceRoot":"","sources":["../../../../src/features/form/switch/public.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC","sourcesContent":["export type { SwitchProps } from '../../../types/switch';\nexport { Switch } from './adapters/inbound/Switch';\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../../../../src/features/form/text-input/adapters/inbound/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../../../../src/features/form/text-input/adapters/inbound/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AAGtE,4EAA4E;AAC5E,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,qBA6C9C"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { Platform, TextInput as ReactNativeTextInput, View } from 'react-native';
|
|
2
|
+
import { Platform, TextInput as ReactNativeTextInput, View, } from 'react-native';
|
|
3
3
|
import { resolveFocusRingStyles } from '../../../../../internal/resolvers';
|
|
4
4
|
import { useTheme } from '../../../../../theme/ThemeContext';
|
|
5
5
|
import { resolveTextInputPresentation } from '../../utils/resolveTextInputPresentation';
|
|
@@ -18,16 +18,20 @@ export function TextInput(props) {
|
|
|
18
18
|
setFocused(false);
|
|
19
19
|
nativeProps.onBlur?.(event);
|
|
20
20
|
}} onChangeText={(nextValue) => {
|
|
21
|
-
if (interactionPolicy !== 'passive')
|
|
21
|
+
if (interactionPolicy !== 'passive')
|
|
22
22
|
nativeProps.onChangeText?.(nextValue);
|
|
23
|
-
}
|
|
24
23
|
}} onFocus={(event) => {
|
|
25
24
|
setFocused(true);
|
|
26
25
|
nativeProps.onFocus?.(event);
|
|
27
|
-
}} placeholderTextColor={presentation.placeholderColor} readOnly={readOnly} style={
|
|
26
|
+
}} placeholderTextColor={presentation.placeholderColor} readOnly={readOnly} style={resolveInputStyle(presentation.inputStyle, nativeProps.multiline, nativeProps.style)}/>
|
|
28
27
|
{renderAccessory(trailingAccessory, presentation.accessorySpacing, 'trailing')}
|
|
29
28
|
</View>);
|
|
30
29
|
}
|
|
30
|
+
const multilineInputStyle = { textAlignVertical: 'top' };
|
|
31
|
+
/*** Resolves TextInput style composition including canonical multiline alignment. */
|
|
32
|
+
function resolveInputStyle(presentationStyle, multiline, style) {
|
|
33
|
+
return [presentationStyle, multiline ? multilineInputStyle : undefined, style];
|
|
34
|
+
}
|
|
31
35
|
/*** Renders one optional TextInput accessory with directional spacing. */
|
|
32
36
|
function renderAccessory(accessory, spacing, position) {
|
|
33
37
|
if (!accessory)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextInput.js","sourceRoot":"","sources":["../../../../../../src/features/form/text-input/adapters/inbound/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,
|
|
1
|
+
{"version":3,"file":"TextInput.js","sourceRoot":"","sources":["../../../../../../src/features/form/text-input/adapters/inbound/TextInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport {\n Platform,\n type StyleProp,\n TextInput as ReactNativeTextInput,\n type TextStyle,\n View,\n type ViewStyle,\n} from 'react-native';\n\nimport { resolveFocusRingStyles } from '../../../../../internal/resolvers';\nimport { useTheme } from '../../../../../theme/ThemeContext';\nimport type { TextInputProps } from '../../../../../types/text-input';\nimport { resolveTextInputPresentation } from '../../utils/resolveTextInputPresentation';\n\n/*** Renders a token-aware text input with controlled interaction policy. */\nexport function TextInput(props: TextInputProps) {\n const { theme } = useTheme();\n const [focused, setFocused] = React.useState(false);\n const {\n disabled: _disabled,\n interactionPolicy = 'enabled',\n invalid: _invalid,\n leadingAccessory,\n readOnly = false,\n size: _size,\n trailingAccessory,\n ...nativeProps\n } = props;\n const presentation = resolveTextInputPresentation(theme, props, focused);\n\n return (\n <View\n style={[\n presentation.containerStyle,\n resolveFocusRingStyles(theme.semantics.border.focus, focused, Platform.OS === 'web'),\n ]}\n >\n {renderAccessory(leadingAccessory, presentation.accessorySpacing, 'leading')}\n <ReactNativeTextInput\n {...nativeProps}\n editable={presentation.editable}\n numberOfLines={presentation.numberOfLines}\n onBlur={(event) => {\n setFocused(false);\n nativeProps.onBlur?.(event);\n }}\n onChangeText={(nextValue) => {\n if (interactionPolicy !== 'passive') nativeProps.onChangeText?.(nextValue);\n }}\n onFocus={(event) => {\n setFocused(true);\n nativeProps.onFocus?.(event);\n }}\n placeholderTextColor={presentation.placeholderColor}\n readOnly={readOnly}\n style={resolveInputStyle(presentation.inputStyle, nativeProps.multiline, nativeProps.style)}\n />\n {renderAccessory(trailingAccessory, presentation.accessorySpacing, 'trailing')}\n </View>\n );\n}\n\nconst multilineInputStyle: TextStyle = { textAlignVertical: 'top' };\n\n/*** Resolves TextInput style composition including canonical multiline alignment. */\nfunction resolveInputStyle(\n presentationStyle: StyleProp<TextStyle>,\n multiline: boolean | undefined,\n style: StyleProp<TextStyle>,\n): StyleProp<TextStyle> {\n return [presentationStyle, multiline ? multilineInputStyle : undefined, style];\n}\n\n/*** Renders one optional TextInput accessory with directional spacing. */\nfunction renderAccessory(\n accessory: React.ReactNode,\n spacing: number,\n position: 'leading' | 'trailing',\n) {\n if (!accessory) return null;\n return <View style={resolveAccessoryStyle(spacing, position)}>{accessory}</View>;\n}\n\n/*** Resolves spacing around a leading or trailing TextInput accessory. */\nfunction resolveAccessoryStyle(spacing: number, position: 'leading' | 'trailing'): ViewStyle {\n return position === 'leading' ? { marginRight: spacing } : { marginLeft: spacing };\n}\n"]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { View } from './View';
|
|
3
3
|
/*** Renders a horizontal or vertical separator using layout tokens. */
|
|
4
4
|
export function Divider({ orientation = 'horizontal', color = 'border', thickness = 1, ...props }) {
|
|
5
|
-
return (<
|
|
5
|
+
return (<View {...props} bg={color} height={orientation === 'horizontal' ? thickness : '100%'} width={orientation === 'vertical' ? thickness : '100%'}/>);
|
|
6
6
|
}
|
|
7
7
|
//# sourceMappingURL=Divider.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Divider.js","sourceRoot":"","sources":["../../../../../src/features/layout/adapters/inbound/Divider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"Divider.js","sourceRoot":"","sources":["../../../../../src/features/layout/adapters/inbound/Divider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,uEAAuE;AACvE,MAAM,UAAU,OAAO,CAAC,EACtB,WAAW,GAAG,YAAY,EAC1B,KAAK,GAAG,QAAQ,EAChB,SAAS,GAAG,CAAC,EACb,GAAG,KAAK,EACK;IACb,OAAO,CACL,CAAC,IAAI,CACH,IAAI,KAAK,CAAC,CACV,EAAE,CAAC,CAAC,KAAK,CAAC,CACV,MAAM,CAAC,CAAC,WAAW,KAAK,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAC1D,KAAK,CAAC,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,EACvD,CACH,CAAC;AACJ,CAAC","sourcesContent":["import React from 'react';\n\nimport type { DividerProps } from '../../../../types/layout';\nimport { View } from './View';\n\n/*** Renders a horizontal or vertical separator using layout tokens. */\nexport function Divider({\n orientation = 'horizontal',\n color = 'border',\n thickness = 1,\n ...props\n}: DividerProps) {\n return (\n <View\n {...props}\n bg={color}\n height={orientation === 'horizontal' ? thickness : '100%'}\n width={orientation === 'vertical' ? thickness : '100%'}\n />\n );\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../../../src/features/layout/adapters/inbound/Grid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAI1D,wDAAwD;AACxD,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,IAAI,EACJ,GAAO,EACP,MAAM,EACN,MAAM,EACN,YAAY,EACZ,GAAG,KAAK,EACT,EAAE,SAAS,
|
|
1
|
+
{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../../../src/features/layout/adapters/inbound/Grid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAI1D,wDAAwD;AACxD,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,IAAI,EACJ,GAAO,EACP,MAAM,EACN,MAAM,EACN,YAAY,EACZ,GAAG,KAAK,EACT,EAAE,SAAS,qBA0BX"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { View } from 'react-native';
|
|
2
|
+
import { View as ReactNativeView } from 'react-native';
|
|
3
3
|
import { resolveResponsive, useResponsiveRuntime } from '../../../../core/responsive';
|
|
4
4
|
import { useTheme } from '../../../../theme/ThemeContext';
|
|
5
5
|
import { resolveSpacing } from '../../../../utils/resolveSpacing';
|
|
6
|
-
import {
|
|
6
|
+
import { View } from './View';
|
|
7
7
|
/*** Lays out children in a responsive wrapping grid. */
|
|
8
8
|
export function Grid({ children, cols, gap = 0, rowGap, colGap, minItemWidth, ...props }) {
|
|
9
9
|
const { theme } = useTheme();
|
|
@@ -14,13 +14,11 @@ export function Grid({ children, cols, gap = 0, rowGap, colGap, minItemWidth, ..
|
|
|
14
14
|
const colSpacing = Number(resolveSpacing(theme, resolveResponsive(colGap, breakpoint) ?? defaultGap) ?? 0);
|
|
15
15
|
const activeMinItemWidth = resolveResponsive(minItemWidth, breakpoint);
|
|
16
16
|
const basisPercent = `${100 / activeCols}%`;
|
|
17
|
-
return (<
|
|
18
|
-
<
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
</View>
|
|
23
|
-
</Box>);
|
|
17
|
+
return (<View {...props} style={[resolveGridStyle(rowSpacing, colSpacing), props.style]}>
|
|
18
|
+
{React.Children.toArray(children).map((node, index) => (<ReactNativeView key={React.isValidElement(node) && node.key !== null ? String(node.key) : String(index)} style={resolveGridItemStyle(activeMinItemWidth, basisPercent, rowSpacing, colSpacing)}>
|
|
19
|
+
{node}
|
|
20
|
+
</ReactNativeView>))}
|
|
21
|
+
</View>);
|
|
24
22
|
}
|
|
25
23
|
/*** Resolves the wrapping Grid container style. */
|
|
26
24
|
function resolveGridStyle(rowSpacing, colSpacing) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Grid.js","sourceRoot":"","sources":["../../../../../src/features/layout/adapters/inbound/Grid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAkB,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"Grid.js","sourceRoot":"","sources":["../../../../../src/features/layout/adapters/inbound/Grid.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { View as ReactNativeView, type ViewStyle } from 'react-native';\n\nimport { resolveResponsive, useResponsiveRuntime } from '../../../../core/responsive';\nimport { useTheme } from '../../../../theme/ThemeContext';\nimport type { GridProps } from '../../../../types/layout';\nimport { resolveSpacing } from '../../../../utils/resolveSpacing';\nimport { View } from './View';\n\n/*** Lays out children in a responsive wrapping grid. */\nexport function Grid({\n children,\n cols,\n gap = 0,\n rowGap,\n colGap,\n minItemWidth,\n ...props\n}: GridProps) {\n const { theme } = useTheme();\n const { breakpoint } = useResponsiveRuntime();\n const activeCols = Math.max(1, Math.floor(resolveResponsive(cols, breakpoint) ?? 1));\n const defaultGap = resolveResponsive(gap, breakpoint) ?? 0;\n const rowSpacing = Number(\n resolveSpacing(theme, resolveResponsive(rowGap, breakpoint) ?? defaultGap) ?? 0,\n );\n const colSpacing = Number(\n resolveSpacing(theme, resolveResponsive(colGap, breakpoint) ?? defaultGap) ?? 0,\n );\n const activeMinItemWidth = resolveResponsive(minItemWidth, breakpoint);\n const basisPercent: `${number}%` = `${100 / activeCols}%`;\n\n return (\n <View {...props} style={[resolveGridStyle(rowSpacing, colSpacing), props.style]}>\n {React.Children.toArray(children).map((node, index) => (\n <ReactNativeView\n key={React.isValidElement(node) && node.key !== null ? String(node.key) : String(index)}\n style={resolveGridItemStyle(activeMinItemWidth, basisPercent, rowSpacing, colSpacing)}\n >\n {node}\n </ReactNativeView>\n ))}\n </View>\n );\n}\n\n/*** Resolves the wrapping Grid container style. */\nfunction resolveGridStyle(rowSpacing: number, colSpacing: number): ViewStyle {\n return {\n flexDirection: 'row',\n flexWrap: 'wrap',\n marginLeft: -colSpacing / 2,\n marginRight: -colSpacing / 2,\n marginTop: -rowSpacing / 2,\n };\n}\n\n/*** Resolves a fixed-column or minimum-width grid item style. */\nfunction resolveGridItemStyle(\n minItemWidth: number | undefined,\n basisPercent: `${number}%`,\n rowSpacing: number,\n colSpacing: number,\n): ViewStyle {\n const sizing =\n minItemWidth === undefined\n ? { width: basisPercent, flexBasis: basisPercent }\n : { minWidth: minItemWidth, flexBasis: minItemWidth, flexGrow: 1 };\n return {\n ...sizing,\n paddingBottom: rowSpacing / 2,\n paddingLeft: colSpacing / 2,\n paddingRight: colSpacing / 2,\n paddingTop: rowSpacing / 2,\n };\n}\n"]}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { ScrollViewProps } from '../../../../types/layout';
|
|
3
|
+
/*** Renders the token-aware responsive Surface adapter for React Native ScrollView. */
|
|
4
|
+
export declare function ScrollView(props: ScrollViewProps): React.JSX.Element;
|
|
5
|
+
//# sourceMappingURL=ScrollView.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ScrollView.d.ts","sourceRoot":"","sources":["../../../../../src/features/layout/adapters/inbound/ScrollView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAGhE,uFAAuF;AACvF,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,qBAwBhD"}
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ScrollView as ReactNativeScrollView } from 'react-native';
|
|
3
|
+
import { useResponsiveRuntime } from '../../../../core/responsive';
|
|
4
|
+
import { useTheme } from '../../../../theme/ThemeContext';
|
|
5
|
+
import { resolveViewStyles } from '../../../../utils/resolveViewStyles';
|
|
6
|
+
/*** Renders the token-aware responsive Surface adapter for React Native ScrollView. */
|
|
7
|
+
export function ScrollView(props) {
|
|
8
|
+
const { theme } = useTheme();
|
|
9
|
+
const { breakpoint } = useResponsiveRuntime();
|
|
10
|
+
const spacing = splitSpacingProps(props);
|
|
11
|
+
const visual = splitVisualProps(spacing.rest);
|
|
12
|
+
const dimensions = splitDimensionProps(visual.rest);
|
|
13
|
+
const layout = splitLayoutProps(dimensions.rest);
|
|
14
|
+
const { children, contentContainerStyle, style, ...scrollProps } = layout.rest;
|
|
15
|
+
const resolved = resolveViewStyles(theme, breakpoint, {
|
|
16
|
+
...spacing.styleProps,
|
|
17
|
+
...visual.styleProps,
|
|
18
|
+
...dimensions.styleProps,
|
|
19
|
+
...layout.styleProps,
|
|
20
|
+
});
|
|
21
|
+
return (<ReactNativeScrollView {...scrollProps} contentContainerStyle={contentContainerStyle} style={[resolved, style]}>
|
|
22
|
+
{children}
|
|
23
|
+
</ReactNativeScrollView>);
|
|
24
|
+
}
|
|
25
|
+
/*** Splits spacing-aware Surface props from native ScrollView props. */
|
|
26
|
+
function splitSpacingProps(props) {
|
|
27
|
+
const { p, px, py, pt, pb, pl, pr, m, mx, my, mt, mb, ml, mr, gap, rowGap, columnGap, ...rest } = props;
|
|
28
|
+
return {
|
|
29
|
+
rest,
|
|
30
|
+
styleProps: { p, px, py, pt, pb, pl, pr, m, mx, my, mt, mb, ml, mr, gap, rowGap, columnGap },
|
|
31
|
+
};
|
|
32
|
+
}
|
|
33
|
+
/*** Splits token-aware visual Surface props from native ScrollView props. */
|
|
34
|
+
function splitVisualProps(props) {
|
|
35
|
+
const { bg, radius, borderWidth, borderColor, ...rest } = props;
|
|
36
|
+
return { rest, styleProps: { bg, radius, borderWidth, borderColor } };
|
|
37
|
+
}
|
|
38
|
+
/*** Splits responsive dimension Surface props from native ScrollView props. */
|
|
39
|
+
function splitDimensionProps(props) {
|
|
40
|
+
const { width, height, minWidth, maxWidth, minHeight, maxHeight, ...rest } = props;
|
|
41
|
+
return { rest, styleProps: { width, height, minWidth, maxWidth, minHeight, maxHeight } };
|
|
42
|
+
}
|
|
43
|
+
/*** Splits responsive flex and positioning Surface props from native ScrollView props. */
|
|
44
|
+
function splitLayoutProps(props) {
|
|
45
|
+
const { flex, flexGrow, flexShrink, flexBasis, direction, align, justify, wrap, alignSelf, position, top, bottom, left, right, overflow, zIndex, opacity, ...rest } = props;
|
|
46
|
+
return {
|
|
47
|
+
rest,
|
|
48
|
+
styleProps: {
|
|
49
|
+
flex,
|
|
50
|
+
flexGrow,
|
|
51
|
+
flexShrink,
|
|
52
|
+
flexBasis,
|
|
53
|
+
direction,
|
|
54
|
+
align,
|
|
55
|
+
justify,
|
|
56
|
+
wrap,
|
|
57
|
+
alignSelf,
|
|
58
|
+
position,
|
|
59
|
+
top,
|
|
60
|
+
bottom,
|
|
61
|
+
left,
|
|
62
|
+
right,
|
|
63
|
+
overflow,
|
|
64
|
+
zIndex,
|
|
65
|
+
opacity,
|
|
66
|
+
},
|
|
67
|
+
};
|
|
68
|
+
}
|
|
69
|
+
//# sourceMappingURL=ScrollView.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ScrollView.js","sourceRoot":"","sources":["../../../../../src/features/layout/adapters/inbound/ScrollView.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { ScrollView as ReactNativeScrollView } from 'react-native';\n\nimport { useResponsiveRuntime } from '../../../../core/responsive';\nimport { useTheme } from '../../../../theme/ThemeContext';\nimport type { ScrollViewProps } from '../../../../types/layout';\nimport { resolveViewStyles } from '../../../../utils/resolveViewStyles';\n\n/*** Renders the token-aware responsive Surface adapter for React Native ScrollView. */\nexport function ScrollView(props: ScrollViewProps) {\n const { theme } = useTheme();\n const { breakpoint } = useResponsiveRuntime();\n const spacing = splitSpacingProps(props);\n const visual = splitVisualProps(spacing.rest);\n const dimensions = splitDimensionProps(visual.rest);\n const layout = splitLayoutProps(dimensions.rest);\n const { children, contentContainerStyle, style, ...scrollProps } = layout.rest;\n const resolved = resolveViewStyles(theme, breakpoint, {\n ...spacing.styleProps,\n ...visual.styleProps,\n ...dimensions.styleProps,\n ...layout.styleProps,\n });\n\n return (\n <ReactNativeScrollView\n {...scrollProps}\n contentContainerStyle={contentContainerStyle}\n style={[resolved, style]}\n >\n {children}\n </ReactNativeScrollView>\n );\n}\n\n/*** Splits spacing-aware Surface props from native ScrollView props. */\nfunction splitSpacingProps(props: ScrollViewProps) {\n const { p, px, py, pt, pb, pl, pr, m, mx, my, mt, mb, ml, mr, gap, rowGap, columnGap, ...rest } =\n props;\n return {\n rest,\n styleProps: { p, px, py, pt, pb, pl, pr, m, mx, my, mt, mb, ml, mr, gap, rowGap, columnGap },\n };\n}\n\n/*** Splits token-aware visual Surface props from native ScrollView props. */\nfunction splitVisualProps(props: ReturnType<typeof splitSpacingProps>['rest']) {\n const { bg, radius, borderWidth, borderColor, ...rest } = props;\n return { rest, styleProps: { bg, radius, borderWidth, borderColor } };\n}\n\n/*** Splits responsive dimension Surface props from native ScrollView props. */\nfunction splitDimensionProps(props: ReturnType<typeof splitVisualProps>['rest']) {\n const { width, height, minWidth, maxWidth, minHeight, maxHeight, ...rest } = props;\n return { rest, styleProps: { width, height, minWidth, maxWidth, minHeight, maxHeight } };\n}\n\n/*** Splits responsive flex and positioning Surface props from native ScrollView props. */\nfunction splitLayoutProps(props: ReturnType<typeof splitDimensionProps>['rest']) {\n const {\n flex,\n flexGrow,\n flexShrink,\n flexBasis,\n direction,\n align,\n justify,\n wrap,\n alignSelf,\n position,\n top,\n bottom,\n left,\n right,\n overflow,\n zIndex,\n opacity,\n ...rest\n } = props;\n return {\n rest,\n styleProps: {\n flex,\n flexGrow,\n flexShrink,\n flexBasis,\n direction,\n align,\n justify,\n wrap,\n alignSelf,\n position,\n top,\n bottom,\n left,\n right,\n overflow,\n zIndex,\n opacity,\n },\n };\n}\n"]}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { ViewProps } from '../../../../types/layout';
|
|
3
|
+
/*** Renders the token-aware responsive Surface adapter for React Native View. */
|
|
4
|
+
export declare function View({ accessible, accessibilityLabel, accessibilityRole, accessibilityState, children, pointerEvents, style, testID, ...props }: ViewProps): React.JSX.Element;
|
|
5
|
+
//# sourceMappingURL=View.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"View.d.ts","sourceRoot":"","sources":["../../../../../src/features/layout/adapters/inbound/View.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAG1D,iFAAiF;AACjF,wBAAgB,IAAI,CAAC,EACnB,UAAU,EACV,kBAAkB,EAClB,iBAAiB,EACjB,kBAAkB,EAClB,QAAQ,EACR,aAAa,EACb,KAAK,EACL,MAAM,EACN,GAAG,KAAK,EACT,EAAE,SAAS,qBAmBX"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { View as ReactNativeView } from 'react-native';
|
|
3
|
+
import { useResponsiveRuntime } from '../../../../core/responsive';
|
|
4
|
+
import { resolvePointerEvents } from '../../../../internal/resolvePointerEvents';
|
|
5
|
+
import { useTheme } from '../../../../theme/ThemeContext';
|
|
6
|
+
import { resolveViewStyles } from '../../../../utils/resolveViewStyles';
|
|
7
|
+
/*** Renders the token-aware responsive Surface adapter for React Native View. */
|
|
8
|
+
export function View({ accessible, accessibilityLabel, accessibilityRole, accessibilityState, children, pointerEvents, style, testID, ...props }) {
|
|
9
|
+
const { theme } = useTheme();
|
|
10
|
+
const { breakpoint } = useResponsiveRuntime();
|
|
11
|
+
const resolved = resolveViewStyles(theme, breakpoint, props);
|
|
12
|
+
const resolvedPointerEvents = pointerEvents ? resolvePointerEvents(pointerEvents) : null;
|
|
13
|
+
return (<ReactNativeView {...resolvedPointerEvents?.props} accessible={accessible} accessibilityLabel={accessibilityLabel} accessibilityRole={accessibilityRole} accessibilityState={accessibilityState} testID={testID} style={[resolved, resolvedPointerEvents?.style, style]}>
|
|
14
|
+
{children}
|
|
15
|
+
</ReactNativeView>);
|
|
16
|
+
}
|
|
17
|
+
//# sourceMappingURL=View.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"View.js","sourceRoot":"","sources":["../../../../../src/features/layout/adapters/inbound/View.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAEvD,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAE,oBAAoB,EAAE,MAAM,2CAA2C,CAAC;AACjF,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAE1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,qCAAqC,CAAC;AAExE,iFAAiF;AACjF,MAAM,UAAU,IAAI,CAAC,EACnB,UAAU,EACV,kBAAkB,EAClB,iBAAiB,EACjB,kBAAkB,EAClB,QAAQ,EACR,aAAa,EACb,KAAK,EACL,MAAM,EACN,GAAG,KAAK,EACE;IACV,MAAM,EAAE,KAAK,EAAE,GAAG,QAAQ,EAAE,CAAC;IAC7B,MAAM,EAAE,UAAU,EAAE,GAAG,oBAAoB,EAAE,CAAC;IAC9C,MAAM,QAAQ,GAAG,iBAAiB,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,CAAC,CAAC;IAC7D,MAAM,qBAAqB,GAAG,aAAa,CAAC,CAAC,CAAC,oBAAoB,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IAEzF,OAAO,CACL,CAAC,eAAe,CACd,IAAI,qBAAqB,EAAE,KAAK,CAAC,CACjC,UAAU,CAAC,CAAC,UAAU,CAAC,CACvB,kBAAkB,CAAC,CAAC,kBAAkB,CAAC,CACvC,iBAAiB,CAAC,CAAC,iBAAiB,CAAC,CACrC,kBAAkB,CAAC,CAAC,kBAAkB,CAAC,CACvC,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,KAAK,CAAC,CAAC,CAAC,QAAQ,EAAE,qBAAqB,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAEvD;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,eAAe,CAAC,CACnB,CAAC;AACJ,CAAC","sourcesContent":["import React from 'react';\nimport { View as ReactNativeView } from 'react-native';\n\nimport { useResponsiveRuntime } from '../../../../core/responsive';\nimport { resolvePointerEvents } from '../../../../internal/resolvePointerEvents';\nimport { useTheme } from '../../../../theme/ThemeContext';\nimport type { ViewProps } from '../../../../types/layout';\nimport { resolveViewStyles } from '../../../../utils/resolveViewStyles';\n\n/*** Renders the token-aware responsive Surface adapter for React Native View. */\nexport function View({\n accessible,\n accessibilityLabel,\n accessibilityRole,\n accessibilityState,\n children,\n pointerEvents,\n style,\n testID,\n ...props\n}: ViewProps) {\n const { theme } = useTheme();\n const { breakpoint } = useResponsiveRuntime();\n const resolved = resolveViewStyles(theme, breakpoint, props);\n const resolvedPointerEvents = pointerEvents ? resolvePointerEvents(pointerEvents) : null;\n\n return (\n <ReactNativeView\n {...resolvedPointerEvents?.props}\n accessible={accessible}\n accessibilityLabel={accessibilityLabel}\n accessibilityRole={accessibilityRole}\n accessibilityState={accessibilityState}\n testID={testID}\n style={[resolved, resolvedPointerEvents?.style, style]}\n >\n {children}\n </ReactNativeView>\n );\n}\n"]}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
export type {
|
|
2
|
-
export { Box } from './adapters/inbound/Box';
|
|
3
|
-
export { Container } from './adapters/inbound/Container';
|
|
1
|
+
export type { DividerProps, GridProps, ScrollViewProps, ViewProps } from '../../types/layout';
|
|
4
2
|
export { Divider } from './adapters/inbound/Divider';
|
|
5
3
|
export { Grid } from './adapters/inbound/Grid';
|
|
6
|
-
export {
|
|
4
|
+
export { ScrollView } from './adapters/inbound/ScrollView';
|
|
5
|
+
export { View } from './adapters/inbound/View';
|
|
7
6
|
//# sourceMappingURL=public.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../../src/features/layout/public.ts"],"names":[],"mappings":"AAAA,YAAY,
|
|
1
|
+
{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../../src/features/layout/public.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,YAAY,EAAE,SAAS,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC9F,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC"}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
export { Box } from './adapters/inbound/Box';
|
|
2
|
-
export { Container } from './adapters/inbound/Container';
|
|
3
1
|
export { Divider } from './adapters/inbound/Divider';
|
|
4
2
|
export { Grid } from './adapters/inbound/Grid';
|
|
5
|
-
export {
|
|
3
|
+
export { ScrollView } from './adapters/inbound/ScrollView';
|
|
4
|
+
export { View } from './adapters/inbound/View';
|
|
6
5
|
//# sourceMappingURL=public.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"public.js","sourceRoot":"","sources":["../../../src/features/layout/public.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"public.js","sourceRoot":"","sources":["../../../src/features/layout/public.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC","sourcesContent":["export type { DividerProps, GridProps, ScrollViewProps, ViewProps } from '../../types/layout';\nexport { Divider } from './adapters/inbound/Divider';\nexport { Grid } from './adapters/inbound/Grid';\nexport { ScrollView } from './adapters/inbound/ScrollView';\nexport { View } from './adapters/inbound/View';\n"]}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { ListProps } from '../../../../types/list';
|
|
3
|
+
/*** Groups list items under one neutral Surface list boundary. */
|
|
4
|
+
export declare function List({ children, testID }: ListProps): React.JSX.Element;
|
|
5
|
+
//# sourceMappingURL=List.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../../../src/features/list/adapters/inbound/List.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAGxD,kEAAkE;AAClE,wBAAgB,IAAI,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,SAAS,qBAEnD"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { View } from '../../../layout/public';
|
|
3
|
+
/*** Groups list items under one neutral Surface list boundary. */
|
|
4
|
+
export function List({ children, testID }) {
|
|
5
|
+
return <View testID={testID}>{children}</View>;
|
|
6
|
+
}
|
|
7
|
+
//# sourceMappingURL=List.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"List.js","sourceRoot":"","sources":["../../../../../src/features/list/adapters/inbound/List.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAE9C,kEAAkE;AAClE,MAAM,UAAU,IAAI,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAa;IAClD,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,IAAI,CAAC,CAAC;AACjD,CAAC","sourcesContent":["import React from 'react';\n\nimport type { ListProps } from '../../../../types/list';\nimport { View } from '../../../layout/public';\n\n/*** Groups list items under one neutral Surface list boundary. */\nexport function List({ children, testID }: ListProps) {\n return <View testID={testID}>{children}</View>;\n}\n"]}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { ListItemProps } from '../../../../types/list';
|
|
3
|
+
/*** Renders a static or interactive list item with shared row geometry and interaction states. */
|
|
4
|
+
export declare function ListItem(props: ListItemProps): React.JSX.Element;
|
|
5
|
+
//# sourceMappingURL=ListItem.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../../../src/features/list/adapters/inbound/ListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAI5D,kGAAkG;AAClG,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,qBAI5C"}
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ButtonBase } from '../../../../primitives/button-base';
|
|
3
|
+
import { useTheme } from '../../../../theme/ThemeContext';
|
|
4
|
+
import { View } from '../../../layout/public';
|
|
5
|
+
import { Text } from '../../../typography/public';
|
|
6
|
+
/*** Renders a static or interactive list item with shared row geometry and interaction states. */
|
|
7
|
+
export function ListItem(props) {
|
|
8
|
+
const { theme } = useTheme();
|
|
9
|
+
if (!props.onPress)
|
|
10
|
+
return renderStaticListItem(props, theme);
|
|
11
|
+
return renderInteractiveListItem({ ...props, onPress: props.onPress }, theme);
|
|
12
|
+
}
|
|
13
|
+
/*** Renders a non-pressable list item. */
|
|
14
|
+
function renderStaticListItem(props, theme) {
|
|
15
|
+
return (<ListItemContent {...props} backgroundColor={props.selected ? theme.semantics.selection.background : 'transparent'}/>);
|
|
16
|
+
}
|
|
17
|
+
/*** Renders a pressable list item with shared interaction-state presentation. */
|
|
18
|
+
function renderInteractiveListItem(props, theme) {
|
|
19
|
+
return (<ButtonBase accessibilityLabel={props.accessibilityLabel} accessibilityRole="button" accessibilityState={{ disabled: props.disabled ?? false, selected: props.selected ?? false }} disabled={props.disabled ?? false} interactionPolicy={props.interactionPolicy} onPress={props.onPress} testID={props.testID}>
|
|
20
|
+
{(state) => (<ListItemContent {...props} backgroundColor={resolveListItemBackground(theme, {
|
|
21
|
+
hovered: state.hovered,
|
|
22
|
+
pressed: state.pressed,
|
|
23
|
+
selected: props.selected ?? false,
|
|
24
|
+
})} disabled={state.disabled} testID={undefined}/>)}
|
|
25
|
+
</ButtonBase>);
|
|
26
|
+
}
|
|
27
|
+
/*** Resolves the neutral list-item background for one interaction state. */
|
|
28
|
+
function resolveListItemBackground(theme, state) {
|
|
29
|
+
if (state.pressed)
|
|
30
|
+
return theme.semantics.neutral.surfaceActive;
|
|
31
|
+
if (state.hovered)
|
|
32
|
+
return theme.semantics.neutral.surfaceHover;
|
|
33
|
+
if (state.selected)
|
|
34
|
+
return theme.semantics.selection.background;
|
|
35
|
+
return 'transparent';
|
|
36
|
+
}
|
|
37
|
+
/*** Renders the shared visual row content for static and interactive list items. */
|
|
38
|
+
function ListItemContent({ backgroundColor, children, compact = false, description, disabled = false, leading, testID, title, trailing, }) {
|
|
39
|
+
const content = children ?? renderDefaultContent(title, description);
|
|
40
|
+
return (<View align="center" bg={backgroundColor} direction="row" gap="m" opacity={disabled ? 0.72 : 1} px="m" py={compact ? 's' : 'm'} testID={testID}>
|
|
41
|
+
{leading !== undefined ? <View>{leading}</View> : null}
|
|
42
|
+
<View flex={1}>{content}</View>
|
|
43
|
+
{trailing !== undefined ? <View>{trailing}</View> : null}
|
|
44
|
+
</View>);
|
|
45
|
+
}
|
|
46
|
+
/*** Renders the default title and description content when custom children are absent. */
|
|
47
|
+
function renderDefaultContent(title, description) {
|
|
48
|
+
if (title === undefined && description === undefined)
|
|
49
|
+
return null;
|
|
50
|
+
return (<View flex={1} gap="xs">
|
|
51
|
+
{title !== undefined ? (<Text numberOfLines={1} variant="body" weight="medium">
|
|
52
|
+
{title}
|
|
53
|
+
</Text>) : null}
|
|
54
|
+
{description !== undefined ? (<Text emphasis="muted" numberOfLines={2} variant="bodySmall">
|
|
55
|
+
{description}
|
|
56
|
+
</Text>) : null}
|
|
57
|
+
</View>);
|
|
58
|
+
}
|
|
59
|
+
//# sourceMappingURL=ListItem.js.map
|