@ankhorage/surface 6.0.0 → 8.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 -1
- package/dist/features/button/adapters/inbound/Button.d.ts.map +1 -1
- package/dist/features/button/adapters/inbound/Button.js +5 -5
- package/dist/features/button/adapters/inbound/Button.js.map +1 -1
- package/dist/features/button/adapters/inbound/IconButton.d.ts.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/card/adapters/inbound/Card.d.ts.map +1 -1
- package/dist/features/card/adapters/inbound/Card.js +3 -3
- package/dist/features/card/adapters/inbound/Card.js.map +1 -1
- package/dist/features/form/checkbox/adapters/inbound/Checkbox.d.ts.map +1 -1
- package/dist/features/form/checkbox/adapters/inbound/Checkbox.js +3 -3
- 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 -2
- 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.d.ts.map +1 -1
- package/dist/features/form/radio/adapters/inbound/Radio.js +3 -3
- package/dist/features/form/radio/adapters/inbound/Radio.js.map +1 -1
- package/dist/{components/switch → features/form/switch/adapters/inbound}/Switch.d.ts +1 -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/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/pressable/adapters/inbound/Pressable.d.ts +5 -0
- package/dist/features/pressable/adapters/inbound/Pressable.d.ts.map +1 -0
- package/dist/features/pressable/adapters/inbound/Pressable.js +48 -0
- package/dist/features/pressable/adapters/inbound/Pressable.js.map +1 -0
- package/dist/features/pressable/public.d.ts +3 -0
- package/dist/features/pressable/public.d.ts.map +1 -0
- package/dist/features/pressable/public.js +2 -0
- package/dist/features/pressable/public.js.map +1 -0
- package/dist/index.d.ts +8 -14
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +4 -7
- package/dist/index.js.map +1 -1
- package/dist/types/button.d.ts +3 -3
- package/dist/types/button.d.ts.map +1 -1
- package/dist/types/button.js.map +1 -1
- package/dist/types/checkbox.d.ts +2 -2
- package/dist/types/checkbox.d.ts.map +1 -1
- package/dist/types/checkbox.js.map +1 -1
- 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/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/{primitives/button-base/types.d.ts → types/pressable.d.ts} +5 -5
- package/dist/types/pressable.d.ts.map +1 -0
- package/dist/types/pressable.js +2 -0
- package/dist/types/pressable.js.map +1 -0
- package/dist/types/radio.d.ts +2 -2
- package/dist/types/radio.d.ts.map +1 -1
- package/dist/types/radio.js.map +1 -1
- package/dist/types/switch.d.ts +15 -0
- 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/package.json +1 -1
- package/src/features/button/adapters/inbound/Button.tsx +6 -6
- package/src/features/button/adapters/inbound/IconButton.tsx +3 -3
- package/src/features/card/adapters/inbound/Card.tsx +3 -3
- package/src/features/form/checkbox/adapters/inbound/Checkbox.tsx +5 -5
- 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 +5 -5
- 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/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/{primitives/button-base/ButtonBase.tsx → features/pressable/adapters/inbound/Pressable.tsx} +45 -31
- package/src/features/pressable/public.ts +2 -0
- package/src/index.test.ts +17 -11
- package/src/index.ts +8 -14
- package/src/interactionPolicy.test.ts +4 -4
- package/src/types/button.ts +3 -3
- package/src/types/checkbox.ts +2 -2
- package/src/types/list.ts +22 -0
- package/src/{primitives/button-base/types.ts → types/pressable.ts} +4 -4
- package/src/types/radio.ts +2 -2
- package/src/{components/switch/types.ts → types/switch.ts} +4 -4
- package/dist/components/field/Field.d.ts.map +0 -1
- package/dist/components/field/Field.js +0 -27
- 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 -5
- package/dist/components/list-item/ListItem.d.ts.map +0 -1
- package/dist/components/list-item/ListItem.js +0 -44
- 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 -68
- 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 +0 -15
- 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/primitives/button-base/ButtonBase.d.ts +0 -5
- package/dist/primitives/button-base/ButtonBase.d.ts.map +0 -1
- package/dist/primitives/button-base/ButtonBase.js +0 -42
- package/dist/primitives/button-base/ButtonBase.js.map +0 -1
- package/dist/primitives/button-base/index.d.ts +0 -3
- package/dist/primitives/button-base/index.d.ts.map +0 -1
- package/dist/primitives/button-base/index.js +0 -2
- package/dist/primitives/button-base/index.js.map +0 -1
- package/dist/primitives/button-base/types.d.ts.map +0 -1
- package/dist/primitives/button-base/types.js +0 -2
- package/dist/primitives/button-base/types.js.map +0 -1
- package/src/components/field/Field.tsx +0 -52
- 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 -76
- 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 -113
- 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/primitives/button-base/index.ts +0 -2
- /package/src/{components/field/types.ts → types/field.ts} +0 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# @ankhorage/surface
|
|
2
2
|
|
|
3
|
+
## 8.0.0
|
|
4
|
+
|
|
5
|
+
### Major Changes
|
|
6
|
+
|
|
7
|
+
- 337bcec: Replace the public `ButtonBase` foundation primitive with the native-aligned `Pressable` feature. Import `Pressable` and `PressableProps` from `@ankhorage/surface`; the legacy `src/primitives` path and `ButtonBase` API are removed.
|
|
8
|
+
|
|
9
|
+
## 7.0.0
|
|
10
|
+
|
|
11
|
+
### Major Changes
|
|
12
|
+
|
|
13
|
+
- 2977e37: Move the remaining legacy component APIs into canonical feature ownership. `Field` and `Switch` now live under the form capability, `List` and `ListItem` share the new list capability, and `Textarea`, `Label`, and `HelperText` are removed in favor of `TextInput multiline` and field-owned presentation.
|
|
14
|
+
|
|
3
15
|
## 6.0.0
|
|
4
16
|
|
|
5
17
|
### Major Changes
|
package/README.md
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
|
|
4
4
|
# @ankhorage/surface
|
|
5
5
|
|
|
6
|
-
         
|
|
7
7
|
|
|
8
8
|
Cross-platform UI foundation for React Native and React Native Web. Provides theming, layout primitives, and core building blocks for modern apps.
|
|
9
9
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../../src/features/button/adapters/inbound/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../../src/features/button/adapters/inbound/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAM5D,+EAA+E;AAC/E,wBAAgB,MAAM,CAAC,EACrB,QAAQ,EACR,OAAiB,EACjB,KAAiB,EACjB,IAAU,EACV,QAAgB,EAChB,OAAe,EACf,WAAW,EACX,YAAY,EACZ,SAAiB,EACjB,OAAO,EACP,MAAM,EACN,GAAG,KAAK,EACT,EAAE,WAAW,qBA8Bb"}
|
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { ActivityIndicator, View as ReactNativeView } from 'react-native';
|
|
3
3
|
import { resolveButtonColors, resolveControlSize, resolveIconSize, } from '../../../../internal/resolvers';
|
|
4
|
-
import { ButtonBase } from '../../../../primitives/button-base';
|
|
5
4
|
import { useTheme } from '../../../../theme/ThemeContext';
|
|
6
5
|
import { Icon } from '../../../icon/public';
|
|
7
6
|
import { View } from '../../../layout/public';
|
|
7
|
+
import { Pressable } from '../../../pressable/public';
|
|
8
8
|
import { Text } from '../../../typography/public';
|
|
9
9
|
/*** Renders the primary Surface action control with semantic visual states. */
|
|
10
10
|
export function Button({ children, variant = 'solid', color = 'primary', size = 'm', disabled = false, loading = false, leadingIcon, trailingIcon, fullWidth = false, onPress, testID, ...props }) {
|
|
11
11
|
const { theme } = useTheme();
|
|
12
12
|
const controlSize = resolveControlSize(theme, size);
|
|
13
|
-
return (<
|
|
13
|
+
return (<Pressable {...props} disabled={disabled || loading} onPress={onPress} style={resolvePressableStyle(fullWidth)} testID={testID}>
|
|
14
14
|
{(state) => (<ButtonContent color={color} controlSize={controlSize} fullWidth={fullWidth} leadingIcon={leadingIcon} loading={loading} size={size} state={state} theme={theme} trailingIcon={trailingIcon} variant={variant}>
|
|
15
15
|
{children}
|
|
16
16
|
</ButtonContent>)}
|
|
17
|
-
</
|
|
17
|
+
</Pressable>);
|
|
18
18
|
}
|
|
19
19
|
/*** Renders Button content after interaction colors have been resolved. */
|
|
20
20
|
function ButtonContent({ children, color, controlSize, fullWidth, leadingIcon, loading, size, state, theme, trailingIcon, variant, }) {
|
|
@@ -35,8 +35,8 @@ function ButtonContent({ children, color, controlSize, fullWidth, leadingIcon, l
|
|
|
35
35
|
</>)}
|
|
36
36
|
</View>);
|
|
37
37
|
}
|
|
38
|
-
/*** Resolves the outer
|
|
39
|
-
function
|
|
38
|
+
/*** Resolves the outer Pressable layout style. */
|
|
39
|
+
function resolvePressableStyle(fullWidth) {
|
|
40
40
|
return { alignSelf: fullWidth ? 'stretch' : 'flex-start' };
|
|
41
41
|
}
|
|
42
42
|
/*** Resolves the themed Button content container style. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../../src/features/button/adapters/inbound/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,iBAAiB,EAAE,IAAI,IAAI,eAAe,EAAkB,MAAM,cAAc,CAAC;AAE1F,OAAO,EAEL,mBAAmB,EACnB,kBAAkB,EAClB,eAAe,GAChB,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../../src/features/button/adapters/inbound/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,iBAAiB,EAAE,IAAI,IAAI,eAAe,EAAkB,MAAM,cAAc,CAAC;AAE1F,OAAO,EAEL,mBAAmB,EACnB,kBAAkB,EAClB,eAAe,GAChB,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAG1D,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAC;AAElD,+EAA+E;AAC/E,MAAM,UAAU,MAAM,CAAC,EACrB,QAAQ,EACR,OAAO,GAAG,OAAO,EACjB,KAAK,GAAG,SAAS,EACjB,IAAI,GAAG,GAAG,EACV,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,KAAK,EACf,WAAW,EACX,YAAY,EACZ,SAAS,GAAG,KAAK,EACjB,OAAO,EACP,MAAM,EACN,GAAG,KAAK,EACI;IACZ,MAAM,EAAE,KAAK,EAAE,GAAG,QAAQ,EAAE,CAAC;IAC7B,MAAM,WAAW,GAAG,kBAAkB,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;IAEpD,OAAO,CACL,CAAC,SAAS,CACR,IAAI,KAAK,CAAC,CACV,QAAQ,CAAC,CAAC,QAAQ,IAAI,OAAO,CAAC,CAC9B,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,KAAK,CAAC,CAAC,qBAAqB,CAAC,SAAS,CAAC,CAAC,CACxC,MAAM,CAAC,CAAC,MAAM,CAAC,CAEf;MAAA,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CACV,CAAC,aAAa,CACZ,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,SAAS,CAAC,CAAC,SAAS,CAAC,CACrB,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,YAAY,CAAC,CAAC,YAAY,CAAC,CAC3B,OAAO,CAAC,CAAC,OAAO,CAAC,CAEjB;UAAA,CAAC,QAAQ,CACX;QAAA,EAAE,aAAa,CAAC,CACjB,CACH;IAAA,EAAE,SAAS,CAAC,CACb,CAAC;AACJ,CAAC;AAED,2EAA2E;AAC3E,SAAS,aAAa,CAAC,EACrB,QAAQ,EACR,KAAK,EACL,WAAW,EACX,SAAS,EACT,WAAW,EACX,OAAO,EACP,IAAI,EACJ,KAAK,EACL,KAAK,EACL,YAAY,EACZ,OAAO,GACY;IACnB,MAAM,MAAM,GAAG,mBAAmB,CAAC,KAAK,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC;IACrE,MAAM,KAAK,GAAG,MAAM,CAAC,YAAY,KAAK,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC;IACpE,MAAM,QAAQ,GAAG,eAAe,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;IAE9C,OAAO,CACL,CAAC,IAAI,CACH,EAAE,CAAC,CAAC,WAAW,CAAC,iBAAiB,CAAC,CAClC,EAAE,CAAC,CAAC,WAAW,CAAC,eAAe,CAAC,CAChC,MAAM,CAAC,CAAC,WAAW,CAAC,YAAY,CAAC,CACjC,KAAK,CAAC,CAAC,yBAAyB,CAAC,WAAW,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,CAAC,CAAC,CAE1E;MAAA,CAAC,OAAO,CAAC,CAAC,CAAC,CACT,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,OAAO,EAAG,CAC/D,CAAC,CAAC,CAAC,CACF,EACE;UAAA,CAAC,WAAW,CAAC,CAAC,CAAC,CACb,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC,qBAAqB,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC,CACxE;cAAA,CAAC,IAAI,CAAC,IAAI,WAAW,CAAC,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,EACpE;YAAA,EAAE,eAAe,CAAC,CACnB,CAAC,CAAC,CAAC,IAAI,CACR;UAAA,CAAC,IAAI,CACH,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CACjC,QAAQ,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,KAAK,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CACxE,OAAO,CAAC,CAAC,WAAW,CAAC,WAAW,CAAC,CACjC,MAAM,CAAC,UAAU,CAEjB;YAAA,CAAC,QAAQ,CACX;UAAA,EAAE,IAAI,CACN;UAAA,CAAC,YAAY,CAAC,CAAC,CAAC,CACd,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC,qBAAqB,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC,CACzE;cAAA,CAAC,IAAI,CAAC,IAAI,YAAY,CAAC,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,EACrE;YAAA,EAAE,eAAe,CAAC,CACnB,CAAC,CAAC,CAAC,IAAI,CACV;QAAA,GAAG,CACJ,CACH;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC;AAED,kDAAkD;AAClD,SAAS,qBAAqB,CAAC,SAAkB;IAC/C,OAAO,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,YAAY,EAAE,CAAC;AAC7D,CAAC;AAED,2DAA2D;AAC3D,SAAS,yBAAyB,CAChC,WAAkD,EAClD,MAA8C,EAC9C,SAAkB,EAClB,OAA4C;IAE5C,OAAO;QACL,UAAU,EAAE,QAAQ;QACpB,eAAe,EAAE,MAAM,CAAC,eAAe;QACvC,WAAW,EAAE,MAAM,CAAC,WAAW;QAC/B,WAAW,EAAE,OAAO,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QACxC,aAAa,EAAE,KAAK;QACpB,cAAc,EAAE,QAAQ;QACxB,SAAS,EAAE,WAAW,CAAC,SAAS;QAChC,OAAO,EAAE,MAAM,CAAC,OAAO;QACvB,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;KACtC,CAAC;AACJ,CAAC;AAED,kEAAkE;AAClE,SAAS,qBAAqB,CAAC,OAAe,EAAE,QAAgC;IAC9E,OAAO,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,WAAW,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,OAAO,EAAE,CAAC;AACrF,CAAC","sourcesContent":["import React from 'react';\nimport { ActivityIndicator, View as ReactNativeView, type ViewStyle } from 'react-native';\n\nimport {\n type InteractionState,\n resolveButtonColors,\n resolveControlSize,\n resolveIconSize,\n} from '../../../../internal/resolvers';\nimport { useTheme } from '../../../../theme/ThemeContext';\nimport type { SurfaceTheme } from '../../../../theme/types';\nimport type { ButtonProps } from '../../../../types/button';\nimport { Icon } from '../../../icon/public';\nimport { View } from '../../../layout/public';\nimport { Pressable } from '../../../pressable/public';\nimport { Text } from '../../../typography/public';\n\n/*** Renders the primary Surface action control with semantic visual states. */\nexport function Button({\n children,\n variant = 'solid',\n color = 'primary',\n size = 'm',\n disabled = false,\n loading = false,\n leadingIcon,\n trailingIcon,\n fullWidth = false,\n onPress,\n testID,\n ...props\n}: ButtonProps) {\n const { theme } = useTheme();\n const controlSize = resolveControlSize(theme, size);\n\n return (\n <Pressable\n {...props}\n disabled={disabled || loading}\n onPress={onPress}\n style={resolvePressableStyle(fullWidth)}\n testID={testID}\n >\n {(state) => (\n <ButtonContent\n color={color}\n controlSize={controlSize}\n fullWidth={fullWidth}\n leadingIcon={leadingIcon}\n loading={loading}\n size={size}\n state={state}\n theme={theme}\n trailingIcon={trailingIcon}\n variant={variant}\n >\n {children}\n </ButtonContent>\n )}\n </Pressable>\n );\n}\n\n/*** Renders Button content after interaction colors have been resolved. */\nfunction ButtonContent({\n children,\n color,\n controlSize,\n fullWidth,\n leadingIcon,\n loading,\n size,\n state,\n theme,\n trailingIcon,\n variant,\n}: ButtonContentProps) {\n const colors = resolveButtonColors(theme, { variant, color, state });\n const muted = colors.contentColor === theme.semantics.content.muted;\n const iconSize = resolveIconSize(theme, size);\n\n return (\n <View\n px={controlSize.paddingHorizontal}\n py={controlSize.paddingVertical}\n radius={controlSize.borderRadius}\n style={resolveButtonContentStyle(controlSize, colors, fullWidth, variant)}\n >\n {loading ? (\n <ActivityIndicator color={colors.contentColor} size=\"small\" />\n ) : (\n <>\n {leadingIcon ? (\n <ReactNativeView style={resolveAccessoryStyle(theme.spacing.s, 'leading')}>\n <Icon {...leadingIcon} color={colors.contentColor} size={iconSize} />\n </ReactNativeView>\n ) : null}\n <Text\n color={muted ? undefined : color}\n emphasis={muted ? 'muted' : variant === 'solid' ? 'inverse' : 'default'}\n variant={controlSize.textVariant}\n weight=\"semiBold\"\n >\n {children}\n </Text>\n {trailingIcon ? (\n <ReactNativeView style={resolveAccessoryStyle(theme.spacing.s, 'trailing')}>\n <Icon {...trailingIcon} color={colors.contentColor} size={iconSize} />\n </ReactNativeView>\n ) : null}\n </>\n )}\n </View>\n );\n}\n\n/*** Resolves the outer Pressable layout style. */\nfunction resolvePressableStyle(fullWidth: boolean): ViewStyle {\n return { alignSelf: fullWidth ? 'stretch' : 'flex-start' };\n}\n\n/*** Resolves the themed Button content container style. */\nfunction resolveButtonContentStyle(\n controlSize: ReturnType<typeof resolveControlSize>,\n colors: ReturnType<typeof resolveButtonColors>,\n fullWidth: boolean,\n variant: NonNullable<ButtonProps['variant']>,\n): ViewStyle {\n return {\n alignItems: 'center',\n backgroundColor: colors.backgroundColor,\n borderColor: colors.borderColor,\n borderWidth: variant === 'solid' ? 0 : 1,\n flexDirection: 'row',\n justifyContent: 'center',\n minHeight: controlSize.minHeight,\n opacity: colors.opacity,\n width: fullWidth ? '100%' : undefined,\n };\n}\n\n/*** Resolves spacing around a leading or trailing Button icon. */\nfunction resolveAccessoryStyle(spacing: number, position: 'leading' | 'trailing'): ViewStyle {\n return position === 'leading' ? { marginRight: spacing } : { marginLeft: spacing };\n}\n\ninterface ButtonContentProps {\n children: ButtonProps['children'];\n color: NonNullable<ButtonProps['color']>;\n controlSize: ReturnType<typeof resolveControlSize>;\n fullWidth: boolean;\n leadingIcon: ButtonProps['leadingIcon'];\n loading: boolean;\n size: NonNullable<ButtonProps['size']>;\n state: InteractionState;\n theme: SurfaceTheme;\n trailingIcon: ButtonProps['trailingIcon'];\n variant: NonNullable<ButtonProps['variant']>;\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../../../src/features/button/adapters/inbound/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../../../src/features/button/adapters/inbound/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAKhE,8DAA8D;AAC9D,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,kBAAkB,EAClB,OAAiB,EACjB,KAAiB,EACjB,IAAU,EACV,QAAgB,EAChB,OAAO,EACP,MAAM,EACN,GAAG,KAAK,EACT,EAAE,eAAe,qBAyBjB"}
|
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { resolveButtonColors, resolveControlSize, resolveIconSize, } from '../../../../internal/resolvers';
|
|
3
|
-
import { ButtonBase } from '../../../../primitives/button-base';
|
|
4
3
|
import { useTheme } from '../../../../theme/ThemeContext';
|
|
5
4
|
import { Icon } from '../../../icon/public';
|
|
6
5
|
import { View } from '../../../layout/public';
|
|
6
|
+
import { Pressable } from '../../../pressable/public';
|
|
7
7
|
/*** Renders a compact accessible icon-only action control. */
|
|
8
8
|
export function IconButton({ icon, accessibilityLabel, variant = 'ghost', color = 'primary', size = 'm', disabled = false, onPress, testID, ...props }) {
|
|
9
9
|
const { theme } = useTheme();
|
|
10
10
|
const controlSize = resolveControlSize(theme, size);
|
|
11
|
-
return (<
|
|
11
|
+
return (<Pressable {...props} accessibilityLabel={accessibilityLabel} disabled={disabled} onPress={onPress} testID={testID}>
|
|
12
12
|
{(state) => {
|
|
13
13
|
const colors = resolveButtonColors(theme, { color, state, variant });
|
|
14
14
|
return (<View radius={controlSize.borderRadius} style={resolveIconButtonStyle(controlSize, colors, variant)}>
|
|
15
15
|
<Icon {...icon} color={colors.contentColor} size={resolveIconSize(theme, size)}/>
|
|
16
16
|
</View>);
|
|
17
17
|
}}
|
|
18
|
-
</
|
|
18
|
+
</Pressable>);
|
|
19
19
|
}
|
|
20
20
|
/*** Resolves the visual container style for an IconButton interaction state. */
|
|
21
21
|
function resolveIconButtonStyle(controlSize, colors, variant) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconButton.js","sourceRoot":"","sources":["../../../../../src/features/button/adapters/inbound/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EACL,mBAAmB,EACnB,kBAAkB,EAClB,eAAe,GAChB,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"IconButton.js","sourceRoot":"","sources":["../../../../../src/features/button/adapters/inbound/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EACL,mBAAmB,EACnB,kBAAkB,EAClB,eAAe,GAChB,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAE1D,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAEtD,8DAA8D;AAC9D,MAAM,UAAU,UAAU,CAAC,EACzB,IAAI,EACJ,kBAAkB,EAClB,OAAO,GAAG,OAAO,EACjB,KAAK,GAAG,SAAS,EACjB,IAAI,GAAG,GAAG,EACV,QAAQ,GAAG,KAAK,EAChB,OAAO,EACP,MAAM,EACN,GAAG,KAAK,EACQ;IAChB,MAAM,EAAE,KAAK,EAAE,GAAG,QAAQ,EAAE,CAAC;IAC7B,MAAM,WAAW,GAAG,kBAAkB,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;IAEpD,OAAO,CACL,CAAC,SAAS,CACR,IAAI,KAAK,CAAC,CACV,kBAAkB,CAAC,CAAC,kBAAkB,CAAC,CACvC,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,MAAM,CAAC,CAAC,MAAM,CAAC,CAEf;MAAA,CAAC,CAAC,KAAK,EAAE,EAAE;YACT,MAAM,MAAM,GAAG,mBAAmB,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,CAAC;YACrE,OAAO,CACL,CAAC,IAAI,CACH,MAAM,CAAC,CAAC,WAAW,CAAC,YAAY,CAAC,CACjC,KAAK,CAAC,CAAC,sBAAsB,CAAC,WAAW,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC,CAE5D;YAAA,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,CAAC,eAAe,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,EACjF;UAAA,EAAE,IAAI,CAAC,CACR,CAAC;QACJ,CAAC,CACH;IAAA,EAAE,SAAS,CAAC,CACb,CAAC;AACJ,CAAC;AAED,gFAAgF;AAChF,SAAS,sBAAsB,CAC7B,WAAkD,EAClD,MAA8C,EAC9C,OAAgD;IAEhD,OAAO;QACL,UAAU,EAAE,QAAQ;QACpB,eAAe,EAAE,MAAM,CAAC,eAAe;QACvC,WAAW,EAAE,MAAM,CAAC,WAAW;QAC/B,WAAW,EAAE,OAAO,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QACxC,cAAc,EAAE,QAAQ;QACxB,SAAS,EAAE,WAAW,CAAC,SAAS;QAChC,QAAQ,EAAE,WAAW,CAAC,SAAS;QAC/B,OAAO,EAAE,MAAM,CAAC,OAAO;KACxB,CAAC;AACJ,CAAC","sourcesContent":["import React from 'react';\nimport type { ViewStyle } from 'react-native';\n\nimport {\n resolveButtonColors,\n resolveControlSize,\n resolveIconSize,\n} from '../../../../internal/resolvers';\nimport { useTheme } from '../../../../theme/ThemeContext';\nimport type { IconButtonProps } from '../../../../types/button';\nimport { Icon } from '../../../icon/public';\nimport { View } from '../../../layout/public';\nimport { Pressable } from '../../../pressable/public';\n\n/*** Renders a compact accessible icon-only action control. */\nexport function IconButton({\n icon,\n accessibilityLabel,\n variant = 'ghost',\n color = 'primary',\n size = 'm',\n disabled = false,\n onPress,\n testID,\n ...props\n}: IconButtonProps) {\n const { theme } = useTheme();\n const controlSize = resolveControlSize(theme, size);\n\n return (\n <Pressable\n {...props}\n accessibilityLabel={accessibilityLabel}\n disabled={disabled}\n onPress={onPress}\n testID={testID}\n >\n {(state) => {\n const colors = resolveButtonColors(theme, { color, state, variant });\n return (\n <View\n radius={controlSize.borderRadius}\n style={resolveIconButtonStyle(controlSize, colors, variant)}\n >\n <Icon {...icon} color={colors.contentColor} size={resolveIconSize(theme, size)} />\n </View>\n );\n }}\n </Pressable>\n );\n}\n\n/*** Resolves the visual container style for an IconButton interaction state. */\nfunction resolveIconButtonStyle(\n controlSize: ReturnType<typeof resolveControlSize>,\n colors: ReturnType<typeof resolveButtonColors>,\n variant: NonNullable<IconButtonProps['variant']>,\n): ViewStyle {\n return {\n alignItems: 'center',\n backgroundColor: colors.backgroundColor,\n borderColor: colors.borderColor,\n borderWidth: variant === 'solid' ? 0 : 1,\n justifyContent: 'center',\n minHeight: controlSize.minHeight,\n minWidth: controlSize.minHeight,\n opacity: colors.opacity,\n };\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../../../src/features/card/adapters/inbound/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../../../src/features/card/adapters/inbound/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAKxD,6EAA6E;AAC7E,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,OAAmB,EACnB,OAAO,EACP,QAAgB,EAChB,MAAM,EACN,KAAK,EACL,GAAG,KAAK,EACT,EAAE,SAAS,qBAgCX"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { ButtonBase } from '../../../../primitives/button-base';
|
|
3
2
|
import { useTheme } from '../../../../theme/ThemeContext';
|
|
3
|
+
import { Pressable } from '../../../pressable/public';
|
|
4
4
|
import { Surface } from '../../../surface/public';
|
|
5
5
|
/*** Renders a themed content card with optional interactive press states. */
|
|
6
6
|
export function Card({ children, variant = 'default', onPress, disabled = false, testID, style, ...props }) {
|
|
@@ -10,7 +10,7 @@ export function Card({ children, variant = 'default', onPress, disabled = false,
|
|
|
10
10
|
{children}
|
|
11
11
|
</Surface>);
|
|
12
12
|
}
|
|
13
|
-
return (<
|
|
13
|
+
return (<Pressable accessibilityRole="button" disabled={disabled} onPress={onPress} testID={testID}>
|
|
14
14
|
{(state) => (<Surface {...props} style={[
|
|
15
15
|
resolveInteractiveCardStyle(variant, state.pressed, state.hovered, state.disabled, {
|
|
16
16
|
active: theme.semantics.neutral.surfaceActive,
|
|
@@ -22,7 +22,7 @@ export function Card({ children, variant = 'default', onPress, disabled = false,
|
|
|
22
22
|
]} variant={variant}>
|
|
23
23
|
{children}
|
|
24
24
|
</Surface>)}
|
|
25
|
-
</
|
|
25
|
+
</Pressable>);
|
|
26
26
|
}
|
|
27
27
|
/*** Resolves the complete interactive style for one Card state. */
|
|
28
28
|
function resolveInteractiveCardStyle(variant, pressed, hovered, disabled, backgrounds) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../../../src/features/card/adapters/inbound/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../../../src/features/card/adapters/inbound/Card.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport type { ViewStyle } from 'react-native';\n\nimport { useTheme } from '../../../../theme/ThemeContext';\nimport type { CardProps } from '../../../../types/card';\nimport type { SurfaceVariant } from '../../../../types/surface';\nimport { Pressable } from '../../../pressable/public';\nimport { Surface } from '../../../surface/public';\n\n/*** Renders a themed content card with optional interactive press states. */\nexport function Card({\n children,\n variant = 'default',\n onPress,\n disabled = false,\n testID,\n style,\n ...props\n}: CardProps) {\n const { theme } = useTheme();\n\n if (!onPress) {\n return (\n <Surface {...props} style={style} testID={testID} variant={variant}>\n {children}\n </Surface>\n );\n }\n\n return (\n <Pressable accessibilityRole=\"button\" disabled={disabled} onPress={onPress} testID={testID}>\n {(state) => (\n <Surface\n {...props}\n style={[\n resolveInteractiveCardStyle(variant, state.pressed, state.hovered, state.disabled, {\n active: theme.semantics.neutral.surfaceActive,\n base: theme.semantics.surface.default,\n hover: theme.semantics.neutral.surfaceHover,\n subtle: theme.semantics.surface.subtle,\n }),\n style,\n ]}\n variant={variant}\n >\n {children}\n </Surface>\n )}\n </Pressable>\n );\n}\n\n/*** Resolves the complete interactive style for one Card state. */\nfunction resolveInteractiveCardStyle(\n variant: SurfaceVariant,\n pressed: boolean,\n hovered: boolean,\n disabled: boolean,\n backgrounds: CardBackgrounds,\n): ViewStyle {\n return {\n backgroundColor: resolveCardStateBackground(variant, pressed, hovered, backgrounds),\n opacity: disabled ? 0.72 : 1,\n };\n}\n\n/*** Resolves the interactive background for one Card variant and state. */\nfunction resolveCardStateBackground(\n variant: SurfaceVariant,\n pressed: boolean,\n hovered: boolean,\n backgrounds: CardBackgrounds,\n) {\n if (variant === 'outline') {\n return pressed ? backgrounds.active : hovered ? backgrounds.hover : 'transparent';\n }\n if (variant === 'subtle') {\n return pressed ? backgrounds.active : hovered ? backgrounds.hover : backgrounds.subtle;\n }\n return pressed ? backgrounds.active : hovered ? backgrounds.hover : backgrounds.base;\n}\n\ninterface CardBackgrounds {\n active: string;\n base: string;\n hover: string;\n subtle: string;\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../../../src/features/form/checkbox/adapters/inbound/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../../../src/features/form/checkbox/adapters/inbound/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAMnE,iEAAiE;AACjE,wBAAgB,QAAQ,CAAC,EACvB,kBAAkB,EAClB,OAAO,EACP,QAAQ,EACR,KAAiB,EACjB,cAAsB,EACtB,QAAgB,EAChB,OAAe,EACf,eAAe,EACf,QAAgB,EAChB,IAAU,EACV,MAAM,EACN,GAAG,WAAW,EACf,EAAE,aAAa,qBAyBf"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { resolveFieldState, resolveIndicatorSize, resolveSelectionControlColors, resolveSelectionControlNextChecked, } from '../../../../../internal/resolvers';
|
|
3
3
|
import { useControllableState } from '../../../../../internal/useControllableState';
|
|
4
|
-
import { ButtonBase } from '../../../../../primitives/button-base';
|
|
5
4
|
import { useTheme } from '../../../../../theme/ThemeContext';
|
|
6
5
|
import { View } from '../../../../layout/public';
|
|
6
|
+
import { Pressable } from '../../../../pressable/public';
|
|
7
7
|
import { Text } from '../../../../typography/public';
|
|
8
8
|
/*** Renders a controlled or uncontrolled accessible checkbox. */
|
|
9
9
|
export function Checkbox({ accessibilityLabel, checked, children, color = 'primary', defaultChecked = false, disabled = false, invalid = false, onCheckedChange, readOnly = false, size = 'm', testID, ...buttonProps }) {
|
|
@@ -25,7 +25,7 @@ function CheckboxControl({ accessibilityLabel, buttonProps, children, color, dis
|
|
|
25
25
|
kind: 'checkbox',
|
|
26
26
|
readOnly,
|
|
27
27
|
});
|
|
28
|
-
return (<
|
|
28
|
+
return (<Pressable {...buttonProps} accessibilityLabel={accessibilityLabel} accessibilityRole="checkbox" accessibilityState={{ checked: isChecked }} disabled={disabled} onPress={nextChecked === null ? undefined : () => setChecked(nextChecked)} testID={testID}>
|
|
29
29
|
{(interactionState) => renderCheckboxContent({
|
|
30
30
|
children,
|
|
31
31
|
color,
|
|
@@ -37,7 +37,7 @@ function CheckboxControl({ accessibilityLabel, buttonProps, children, color, dis
|
|
|
37
37
|
size,
|
|
38
38
|
theme,
|
|
39
39
|
})}
|
|
40
|
-
</
|
|
40
|
+
</Pressable>);
|
|
41
41
|
}
|
|
42
42
|
/*** Renders the checkbox indicator and optional label for one interaction state. */
|
|
43
43
|
function renderCheckboxContent(input) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../../../../src/features/form/checkbox/adapters/inbound/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAEL,iBAAiB,EACjB,oBAAoB,EACpB,6BAA6B,EAC7B,kCAAkC,GACnC,MAAM,mCAAmC,CAAC;AAC3C,OAAO,EAAE,oBAAoB,EAAE,MAAM,8CAA8C,CAAC;AACpF,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../../../../src/features/form/checkbox/adapters/inbound/Checkbox.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 { useTheme } from '../../../../../theme/ThemeContext';\nimport type { SurfaceTheme } from '../../../../../theme/types';\nimport type { CheckboxProps } from '../../../../../types/checkbox';\nimport { View } from '../../../../layout/public';\nimport type { PressableProps } from '../../../../pressable/public';\nimport { Pressable } from '../../../../pressable/public';\nimport { Text } from '../../../../typography/public';\n\n/*** Renders a controlled or uncontrolled accessible checkbox. */\nexport function Checkbox({\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}: CheckboxProps) {\n const { theme } = useTheme();\n const [isChecked, setChecked] = useControllableState<boolean>({\n value: checked,\n defaultValue: defaultChecked,\n onChange: onCheckedChange,\n });\n\n return (\n <CheckboxControl\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 </CheckboxControl>\n );\n}\n\n/*** Owns the checkbox interaction boundary around resolved selection content. */\nfunction CheckboxControl({\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}: CheckboxControlProps) {\n const nextChecked = resolveSelectionControlNextChecked({\n checked: isChecked,\n disabled,\n kind: 'checkbox',\n readOnly,\n });\n\n return (\n <Pressable\n {...buttonProps}\n accessibilityLabel={accessibilityLabel}\n accessibilityRole=\"checkbox\"\n accessibilityState={{ checked: isChecked }}\n disabled={disabled}\n onPress={nextChecked === null ? undefined : () => setChecked(nextChecked)}\n testID={testID}\n >\n {(interactionState) =>\n renderCheckboxContent({\n children,\n color,\n disabled,\n interactionState,\n invalid,\n isChecked,\n readOnly,\n size,\n theme,\n })\n }\n </Pressable>\n );\n}\n\n/*** Renders the checkbox indicator and optional label for one interaction state. */\nfunction renderCheckboxContent(input: CheckboxContentInput) {\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 indicatorColor = fieldState.invalid ? 'error' : input.color;\n\n return (\n <View style={resolveSelectionRowStyle(colors.opacity)}>\n <View\n radius=\"s\"\n style={resolveCheckboxIndicatorStyle(\n colors.backgroundColor,\n colors.borderColor,\n indicatorSize.checkbox,\n )}\n >\n {input.isChecked ? (\n <Text\n color={input.disabled ? undefined : indicatorColor}\n emphasis={input.disabled ? 'muted' : 'inverse'}\n variant=\"caption\"\n weight=\"bold\"\n >\n ✓\n </Text>\n ) : null}\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\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 checkbox indicator dimensions and interaction colors. */\nfunction resolveCheckboxIndicatorStyle(\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\ninterface CheckboxControlProps {\n accessibilityLabel: CheckboxProps['accessibilityLabel'];\n buttonProps: PressableProps;\n children: CheckboxProps['children'];\n color: NonNullable<CheckboxProps['color']>;\n disabled: boolean;\n invalid: boolean;\n isChecked: boolean;\n readOnly: boolean;\n setChecked: (checked: boolean) => void;\n size: NonNullable<CheckboxProps['size']>;\n testID: CheckboxProps['testID'];\n theme: SurfaceTheme;\n}\n\ninterface CheckboxContentInput {\n children: CheckboxProps['children'];\n color: NonNullable<CheckboxProps['color']>;\n disabled: boolean;\n interactionState: InteractionState;\n invalid: boolean;\n isChecked: boolean;\n readOnly: boolean;\n size: NonNullable<CheckboxProps['size']>;\n theme: SurfaceTheme;\n}\n"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import type { FieldProps } from '
|
|
3
|
-
/*** Composes a label
|
|
2
|
+
import type { FieldProps } from '../../../../../types/field';
|
|
3
|
+
/*** Composes a control with its label and helper or error message. */
|
|
4
4
|
export declare function Field({ children, label, helperText, errorText, required, disabled, invalid, readOnly, testID, }: FieldProps): React.JSX.Element;
|
|
5
5
|
//# sourceMappingURL=Field.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../../../../../src/features/form/field/adapters/inbound/Field.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAI7D,sEAAsE;AACtE,wBAAgB,KAAK,CAAC,EACpB,QAAQ,EACR,KAAK,EACL,UAAU,EACV,SAAS,EACT,QAAgB,EAChB,QAAgB,EAChB,OAAe,EACf,QAAgB,EAChB,MAAM,GACP,EAAE,UAAU,qBAcZ"}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { resolveFieldPresentation, resolveFieldState, } from '../../../../../internal/resolvers';
|
|
3
|
+
import { View } from '../../../../layout/public';
|
|
4
|
+
import { Text } from '../../../../typography/public';
|
|
5
|
+
/*** Composes a control with its label and helper or error message. */
|
|
6
|
+
export function Field({ children, label, helperText, errorText, required = false, disabled = false, invalid = false, readOnly = false, testID, }) {
|
|
7
|
+
const hasErrorText = Boolean(errorText);
|
|
8
|
+
const presentation = resolveFieldPresentation(resolveFieldState({ disabled, invalid: invalid || hasErrorText, readOnly }));
|
|
9
|
+
const message = hasErrorText ? errorText : helperText;
|
|
10
|
+
return (<View gap="xs" testID={testID}>
|
|
11
|
+
{renderFieldLabel(label, required, presentation)}
|
|
12
|
+
<View>{children}</View>
|
|
13
|
+
{renderFieldMessage(message, presentation)}
|
|
14
|
+
</View>);
|
|
15
|
+
}
|
|
16
|
+
/*** Renders an optional field label and required indicator. */
|
|
17
|
+
function renderFieldLabel(label, required, presentation) {
|
|
18
|
+
if (label === undefined || label === null)
|
|
19
|
+
return null;
|
|
20
|
+
const labelContent = typeof label === 'string' || typeof label === 'number' ? (<Text color={presentation.labelColor} emphasis={presentation.labelEmphasis} variant="label" weight="medium">
|
|
21
|
+
{label}
|
|
22
|
+
</Text>) : (label);
|
|
23
|
+
return (<View align="center" direction="row" gap="xs">
|
|
24
|
+
<View flex={1}>{labelContent}</View>
|
|
25
|
+
{required ? (<Text color="error" variant="label" weight="medium">
|
|
26
|
+
*
|
|
27
|
+
</Text>) : null}
|
|
28
|
+
</View>);
|
|
29
|
+
}
|
|
30
|
+
/*** Renders an optional helper or error message using field presentation semantics. */
|
|
31
|
+
function renderFieldMessage(message, presentation) {
|
|
32
|
+
if (message === undefined || message === null || message === '')
|
|
33
|
+
return null;
|
|
34
|
+
if (typeof message !== 'string' && typeof message !== 'number')
|
|
35
|
+
return message;
|
|
36
|
+
return (<Text color={presentation.helperColor} emphasis={presentation.helperEmphasis} variant="caption">
|
|
37
|
+
{message}
|
|
38
|
+
</Text>);
|
|
39
|
+
}
|
|
40
|
+
//# sourceMappingURL=Field.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Field.js","sourceRoot":"","sources":["../../../../../../src/features/form/field/adapters/inbound/Field.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport {\n type ResolvedFieldPresentation,\n resolveFieldPresentation,\n resolveFieldState,\n} from '../../../../../internal/resolvers';\nimport type { FieldProps } from '../../../../../types/field';\nimport { View } from '../../../../layout/public';\nimport { Text } from '../../../../typography/public';\n\n/*** Composes a control with its label and helper or error message. */\nexport function Field({\n children,\n label,\n helperText,\n errorText,\n required = false,\n disabled = false,\n invalid = false,\n readOnly = false,\n testID,\n}: FieldProps) {\n const hasErrorText = Boolean(errorText);\n const presentation = resolveFieldPresentation(\n resolveFieldState({ disabled, invalid: invalid || hasErrorText, readOnly }),\n );\n const message = hasErrorText ? errorText : helperText;\n\n return (\n <View gap=\"xs\" testID={testID}>\n {renderFieldLabel(label, required, presentation)}\n <View>{children}</View>\n {renderFieldMessage(message, presentation)}\n </View>\n );\n}\n\n/*** Renders an optional field label and required indicator. */\nfunction renderFieldLabel(\n label: React.ReactNode,\n required: boolean,\n presentation: ResolvedFieldPresentation,\n) {\n if (label === undefined || label === null) return null;\n const labelContent =\n typeof label === 'string' || typeof label === 'number' ? (\n <Text\n color={presentation.labelColor}\n emphasis={presentation.labelEmphasis}\n variant=\"label\"\n weight=\"medium\"\n >\n {label}\n </Text>\n ) : (\n label\n );\n\n return (\n <View align=\"center\" direction=\"row\" gap=\"xs\">\n <View flex={1}>{labelContent}</View>\n {required ? (\n <Text color=\"error\" variant=\"label\" weight=\"medium\">\n *\n </Text>\n ) : null}\n </View>\n );\n}\n\n/*** Renders an optional helper or error message using field presentation semantics. */\nfunction renderFieldMessage(message: React.ReactNode, presentation: ResolvedFieldPresentation) {\n if (message === undefined || message === null || message === '') return null;\n if (typeof message !== 'string' && typeof message !== 'number') return message;\n\n return (\n <Text color={presentation.helperColor} emphasis={presentation.helperEmphasis} variant=\"caption\">\n {message}\n </Text>\n );\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../../../src/features/form/field/public.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"public.js","sourceRoot":"","sources":["../../../../src/features/form/field/public.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC","sourcesContent":["export type { FieldProps } from '../../../types/field';\nexport { Field } from './adapters/inbound/Field';\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../../../../src/features/form/radio/adapters/inbound/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../../../../src/features/form/radio/adapters/inbound/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAO7D,mFAAmF;AACnF,wBAAgB,KAAK,CAAC,EACpB,kBAAkB,EAClB,OAAO,EACP,QAAQ,EACR,KAAiB,EACjB,cAAsB,EACtB,QAAgB,EAChB,OAAe,EACf,eAAe,EACf,QAAgB,EAChB,IAAU,EACV,MAAM,EACN,GAAG,WAAW,EACf,EAAE,UAAU,qBAyBZ"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { resolveFieldState, resolveIndicatorSize, resolveSelectionControlColors, resolveSelectionControlNextChecked, } from '../../../../../internal/resolvers';
|
|
3
3
|
import { useControllableState } from '../../../../../internal/useControllableState';
|
|
4
|
-
import { ButtonBase } from '../../../../../primitives/button-base';
|
|
5
4
|
import { useTheme } from '../../../../../theme/ThemeContext';
|
|
6
5
|
import { View } from '../../../../layout/public';
|
|
6
|
+
import { Pressable } from '../../../../pressable/public';
|
|
7
7
|
import { Text } from '../../../../typography/public';
|
|
8
8
|
import { isRadioTextContent } from '../../utils/isRadioTextContent';
|
|
9
9
|
/*** Renders one accessible radio control with text or structured label content. */
|
|
@@ -26,7 +26,7 @@ function RadioControl({ accessibilityLabel, buttonProps, children, color, disabl
|
|
|
26
26
|
kind: 'radio',
|
|
27
27
|
readOnly,
|
|
28
28
|
});
|
|
29
|
-
return (<
|
|
29
|
+
return (<Pressable {...buttonProps} accessibilityLabel={accessibilityLabel} accessibilityRole="radio" accessibilityState={{ checked: isChecked }} disabled={disabled} onPress={nextChecked === null ? undefined : () => setChecked(nextChecked)} testID={testID}>
|
|
30
30
|
{(interactionState) => renderRadioContent({
|
|
31
31
|
children,
|
|
32
32
|
color,
|
|
@@ -38,7 +38,7 @@ function RadioControl({ accessibilityLabel, buttonProps, children, color, disabl
|
|
|
38
38
|
size,
|
|
39
39
|
theme,
|
|
40
40
|
})}
|
|
41
|
-
</
|
|
41
|
+
</Pressable>);
|
|
42
42
|
}
|
|
43
43
|
/*** Renders the radio indicator and optional content for one interaction state. */
|
|
44
44
|
function renderRadioContent(input) {
|
|
@@ -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 { 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
|
+
{"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 { useTheme } from '../../../../../theme/ThemeContext';\nimport type { SurfaceTheme } from '../../../../../theme/types';\nimport type { RadioProps } from '../../../../../types/radio';\nimport { View } from '../../../../layout/public';\nimport type { PressableProps } from '../../../../pressable/public';\nimport { Pressable } from '../../../../pressable/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 <Pressable\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 </Pressable>\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: PressableProps;\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,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import type { SwitchProps } from '
|
|
2
|
+
import type { SwitchProps } from '../../../../../types/switch';
|
|
3
3
|
/*** Renders a controlled or uncontrolled accessible switch. */
|
|
4
4
|
export declare function Switch({ children, checked, defaultChecked, onCheckedChange, color, size, disabled, invalid, readOnly, accessibilityLabel, testID, ...props }: SwitchProps): React.JSX.Element;
|
|
5
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;AAW1B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAK/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 { useTheme } from '../../../../../theme/ThemeContext';
|
|
5
|
+
import { View } from '../../../../layout/public';
|
|
6
|
+
import { Pressable } from '../../../../pressable/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 (<Pressable {...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
|
+
</Pressable>);
|
|
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":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAEL,iBAAiB,EACjB,oBAAoB,EACpB,6BAA6B,EAC7B,kCAAkC,GACnC,MAAM,mCAAmC,CAAC;AAC3C,OAAO,EAAE,oBAAoB,EAAE,MAAM,8CAA8C,CAAC;AACpF,OAAO,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAE7D,OAAO,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAC;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,IAAI,EAAE,MAAM,+BAA+B,CAAC;AAErD,+DAA+D;AAC/D,MAAM,UAAU,MAAM,CAAC,EACrB,QAAQ,EACR,OAAO,EACP,cAAc,GAAG,KAAK,EACtB,eAAe,EACf,KAAK,GAAG,SAAS,EACjB,IAAI,GAAG,GAAG,EACV,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,KAAK,EACf,QAAQ,GAAG,KAAK,EAChB,kBAAkB,EAClB,MAAM,EACN,GAAG,KAAK,EACI;IACZ,MAAM,EAAE,KAAK,EAAE,GAAG,QAAQ,EAAE,CAAC;IAC7B,MAAM,CAAC,SAAS,EAAE,UAAU,CAAC,GAAG,oBAAoB,CAAU;QAC5D,KAAK,EAAE,OAAO;QACd,YAAY,EAAE,cAAc;QAC5B,QAAQ,EAAE,eAAe;KAC1B,CAAC,CAAC;IACH,MAAM,WAAW,GAAG,kCAAkC,CAAC;QACrD,OAAO,EAAE,SAAS;QAClB,QAAQ;QACR,IAAI,EAAE,QAAQ;QACd,QAAQ;KACT,CAAC,CAAC;IAEH,OAAO,CACL,CAAC,SAAS,CACR,IAAI,KAAK,CAAC,CACV,kBAAkB,CAAC,CAAC,kBAAkB,CAAC,CACvC,iBAAiB,CAAC,QAAQ,CAC1B,kBAAkB,CAAC,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,CAC3C,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,OAAO,CAAC,CAAC,WAAW,KAAK,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,CAC1E,MAAM,CAAC,CAAC,MAAM,CAAC,CAEf;MAAA,CAAC,CAAC,gBAAgB,EAAE,EAAE,CACpB,mBAAmB,CACjB,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,EACxE,gBAAgB,CAEpB,CACF;IAAA,EAAE,SAAS,CAAC,CACb,CAAC;AACJ,CAAC;AAaD,8FAA8F;AAC9F,SAAS,mBAAmB,CAAC,KAAyB,EAAE,gBAAkC;IACxF,MAAM,UAAU,GAAG,iBAAiB,CAAC;QACnC,QAAQ,EAAE,KAAK,CAAC,QAAQ;QACxB,OAAO,EAAE,gBAAgB,CAAC,OAAO;QACjC,OAAO,EAAE,KAAK,CAAC,OAAO;QACtB,QAAQ,EAAE,KAAK,CAAC,QAAQ;KACzB,CAAC,CAAC;IACH,MAAM,MAAM,GAAG,6BAA6B,CAAC,KAAK,CAAC,KAAK,EAAE;QACxD,OAAO,EAAE,KAAK,CAAC,SAAS;QACxB,UAAU;QACV,OAAO,EAAE,gBAAgB,CAAC,OAAO;QACjC,OAAO,EAAE,gBAAgB,CAAC,OAAO;QACjC,KAAK,EAAE,KAAK,CAAC,KAAK;KACnB,CAAC,CAAC;IACH,MAAM,aAAa,GAAG,oBAAoB,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IACvD,MAAM,aAAa,GACjB,MAAM,CAAC,UAAU,KAAK,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC;IAElF,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,SAAS,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAC3D;MAAA,CAAC,IAAI,CACH,EAAE,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CACtB,WAAW,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,CAChC,WAAW,CAAC,CAAC,CAAC,CAAC,CACf,MAAM,CAAC,CAAC,aAAa,CAAC,YAAY,CAAC,CACnC,OAAO,CAAC,QAAQ,CAChB,QAAQ,CAAC,CAAC,aAAa,CAAC,WAAW,CAAC,CACpC,EAAE,CAAC,CAAC,CAAC,CAAC,CACN,MAAM,CAAC,MAAM,CACb,KAAK,CAAC,CAAC,aAAa,CAAC,WAAW,CAAC,CAEjC;QAAA,CAAC,IAAI,CACH,SAAS,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CACvD,EAAE,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CACtB,MAAM,CAAC,CAAC,aAAa,CAAC,WAAW,CAAC,CAClC,MAAM,CAAC,MAAM,CACb,KAAK,CAAC,CAAC,aAAa,CAAC,WAAW,CAAC,EAErC;MAAA,EAAE,IAAI,CACN;MAAA,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAChB,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,CACV;UAAA,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE,IAAI,CACvD;QAAA,EAAE,IAAI,CAAC,CACR,CAAC,CAAC,CAAC,IAAI,CACV;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC","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 { useTheme } from '../../../../../theme/ThemeContext';\nimport type { SwitchProps } from '../../../../../types/switch';\nimport { View } from '../../../../layout/public';\nimport { Pressable } from '../../../../pressable/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 <Pressable\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 </Pressable>\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"]}
|