@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.
Files changed (209) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/README.md +1 -1
  3. package/dist/features/button/adapters/inbound/Button.d.ts.map +1 -1
  4. package/dist/features/button/adapters/inbound/Button.js +5 -5
  5. package/dist/features/button/adapters/inbound/Button.js.map +1 -1
  6. package/dist/features/button/adapters/inbound/IconButton.d.ts.map +1 -1
  7. package/dist/features/button/adapters/inbound/IconButton.js +3 -3
  8. package/dist/features/button/adapters/inbound/IconButton.js.map +1 -1
  9. package/dist/features/card/adapters/inbound/Card.d.ts.map +1 -1
  10. package/dist/features/card/adapters/inbound/Card.js +3 -3
  11. package/dist/features/card/adapters/inbound/Card.js.map +1 -1
  12. package/dist/features/form/checkbox/adapters/inbound/Checkbox.d.ts.map +1 -1
  13. package/dist/features/form/checkbox/adapters/inbound/Checkbox.js +3 -3
  14. package/dist/features/form/checkbox/adapters/inbound/Checkbox.js.map +1 -1
  15. package/dist/{components/field → features/form/field/adapters/inbound}/Field.d.ts +2 -2
  16. package/dist/features/form/field/adapters/inbound/Field.d.ts.map +1 -0
  17. package/dist/features/form/field/adapters/inbound/Field.js +40 -0
  18. package/dist/features/form/field/adapters/inbound/Field.js.map +1 -0
  19. package/dist/features/form/field/public.d.ts +3 -0
  20. package/dist/features/form/field/public.d.ts.map +1 -0
  21. package/dist/features/form/field/public.js +2 -0
  22. package/dist/features/form/field/public.js.map +1 -0
  23. package/dist/features/form/radio/adapters/inbound/Radio.d.ts.map +1 -1
  24. package/dist/features/form/radio/adapters/inbound/Radio.js +3 -3
  25. package/dist/features/form/radio/adapters/inbound/Radio.js.map +1 -1
  26. package/dist/{components/switch → features/form/switch/adapters/inbound}/Switch.d.ts +1 -1
  27. package/dist/features/form/switch/adapters/inbound/Switch.d.ts.map +1 -0
  28. package/dist/features/form/switch/adapters/inbound/Switch.js +52 -0
  29. package/dist/features/form/switch/adapters/inbound/Switch.js.map +1 -0
  30. package/dist/features/form/switch/public.d.ts +3 -0
  31. package/dist/features/form/switch/public.d.ts.map +1 -0
  32. package/dist/features/form/switch/public.js +2 -0
  33. package/dist/features/form/switch/public.js.map +1 -0
  34. package/dist/features/form/text-input/adapters/inbound/TextInput.d.ts.map +1 -1
  35. package/dist/features/form/text-input/adapters/inbound/TextInput.js +8 -4
  36. package/dist/features/form/text-input/adapters/inbound/TextInput.js.map +1 -1
  37. package/dist/features/list/adapters/inbound/List.d.ts +5 -0
  38. package/dist/features/list/adapters/inbound/List.d.ts.map +1 -0
  39. package/dist/features/list/adapters/inbound/List.js +7 -0
  40. package/dist/features/list/adapters/inbound/List.js.map +1 -0
  41. package/dist/features/list/adapters/inbound/ListItem.d.ts +5 -0
  42. package/dist/features/list/adapters/inbound/ListItem.d.ts.map +1 -0
  43. package/dist/features/list/adapters/inbound/ListItem.js +59 -0
  44. package/dist/features/list/adapters/inbound/ListItem.js.map +1 -0
  45. package/dist/features/list/public.d.ts +4 -0
  46. package/dist/features/list/public.d.ts.map +1 -0
  47. package/dist/features/list/public.js +3 -0
  48. package/dist/features/list/public.js.map +1 -0
  49. package/dist/features/pressable/adapters/inbound/Pressable.d.ts +5 -0
  50. package/dist/features/pressable/adapters/inbound/Pressable.d.ts.map +1 -0
  51. package/dist/features/pressable/adapters/inbound/Pressable.js +48 -0
  52. package/dist/features/pressable/adapters/inbound/Pressable.js.map +1 -0
  53. package/dist/features/pressable/public.d.ts +3 -0
  54. package/dist/features/pressable/public.d.ts.map +1 -0
  55. package/dist/features/pressable/public.js +2 -0
  56. package/dist/features/pressable/public.js.map +1 -0
  57. package/dist/index.d.ts +8 -14
  58. package/dist/index.d.ts.map +1 -1
  59. package/dist/index.js +4 -7
  60. package/dist/index.js.map +1 -1
  61. package/dist/types/button.d.ts +3 -3
  62. package/dist/types/button.d.ts.map +1 -1
  63. package/dist/types/button.js.map +1 -1
  64. package/dist/types/checkbox.d.ts +2 -2
  65. package/dist/types/checkbox.d.ts.map +1 -1
  66. package/dist/types/checkbox.js.map +1 -1
  67. package/dist/{components/field/types.d.ts → types/field.d.ts} +1 -1
  68. package/dist/types/field.d.ts.map +1 -0
  69. package/dist/types/field.js +2 -0
  70. package/dist/types/field.js.map +1 -0
  71. package/dist/types/list.d.ts +20 -0
  72. package/dist/types/list.d.ts.map +1 -0
  73. package/dist/types/list.js +2 -0
  74. package/dist/types/list.js.map +1 -0
  75. package/dist/{primitives/button-base/types.d.ts → types/pressable.d.ts} +5 -5
  76. package/dist/types/pressable.d.ts.map +1 -0
  77. package/dist/types/pressable.js +2 -0
  78. package/dist/types/pressable.js.map +1 -0
  79. package/dist/types/radio.d.ts +2 -2
  80. package/dist/types/radio.d.ts.map +1 -1
  81. package/dist/types/radio.js.map +1 -1
  82. package/dist/types/switch.d.ts +15 -0
  83. package/dist/types/switch.d.ts.map +1 -0
  84. package/dist/types/switch.js +2 -0
  85. package/dist/types/switch.js.map +1 -0
  86. package/package.json +1 -1
  87. package/src/features/button/adapters/inbound/Button.tsx +6 -6
  88. package/src/features/button/adapters/inbound/IconButton.tsx +3 -3
  89. package/src/features/card/adapters/inbound/Card.tsx +3 -3
  90. package/src/features/form/checkbox/adapters/inbound/Checkbox.tsx +5 -5
  91. package/src/features/form/field/adapters/inbound/Field.tsx +82 -0
  92. package/src/features/form/field/public.ts +2 -0
  93. package/src/features/form/radio/adapters/inbound/Radio.tsx +5 -5
  94. package/src/features/form/switch/adapters/inbound/Switch.tsx +123 -0
  95. package/src/features/form/switch/public.ts +2 -0
  96. package/src/features/form/text-input/adapters/inbound/TextInput.tsx +21 -5
  97. package/src/features/list/adapters/inbound/List.tsx +9 -0
  98. package/src/features/list/adapters/inbound/ListItem.tsx +128 -0
  99. package/src/features/list/public.test.ts +13 -0
  100. package/src/features/list/public.ts +3 -0
  101. package/src/{primitives/button-base/ButtonBase.tsx → features/pressable/adapters/inbound/Pressable.tsx} +45 -31
  102. package/src/features/pressable/public.ts +2 -0
  103. package/src/index.test.ts +17 -11
  104. package/src/index.ts +8 -14
  105. package/src/interactionPolicy.test.ts +4 -4
  106. package/src/types/button.ts +3 -3
  107. package/src/types/checkbox.ts +2 -2
  108. package/src/types/list.ts +22 -0
  109. package/src/{primitives/button-base/types.ts → types/pressable.ts} +4 -4
  110. package/src/types/radio.ts +2 -2
  111. package/src/{components/switch/types.ts → types/switch.ts} +4 -4
  112. package/dist/components/field/Field.d.ts.map +0 -1
  113. package/dist/components/field/Field.js +0 -27
  114. package/dist/components/field/Field.js.map +0 -1
  115. package/dist/components/field/index.d.ts +0 -3
  116. package/dist/components/field/index.d.ts.map +0 -1
  117. package/dist/components/field/index.js +0 -2
  118. package/dist/components/field/index.js.map +0 -1
  119. package/dist/components/field/types.d.ts.map +0 -1
  120. package/dist/components/field/types.js +0 -2
  121. package/dist/components/field/types.js.map +0 -1
  122. package/dist/components/helper-text/HelperText.d.ts +0 -4
  123. package/dist/components/helper-text/HelperText.d.ts.map +0 -1
  124. package/dist/components/helper-text/HelperText.js +0 -8
  125. package/dist/components/helper-text/HelperText.js.map +0 -1
  126. package/dist/components/helper-text/index.d.ts +0 -3
  127. package/dist/components/helper-text/index.d.ts.map +0 -1
  128. package/dist/components/helper-text/index.js +0 -2
  129. package/dist/components/helper-text/index.js.map +0 -1
  130. package/dist/components/helper-text/types.d.ts +0 -9
  131. package/dist/components/helper-text/types.d.ts.map +0 -1
  132. package/dist/components/helper-text/types.js +0 -2
  133. package/dist/components/helper-text/types.js.map +0 -1
  134. package/dist/components/label/Label.d.ts +0 -4
  135. package/dist/components/label/Label.d.ts.map +0 -1
  136. package/dist/components/label/Label.js +0 -11
  137. package/dist/components/label/Label.js.map +0 -1
  138. package/dist/components/label/index.d.ts +0 -3
  139. package/dist/components/label/index.d.ts.map +0 -1
  140. package/dist/components/label/index.js +0 -2
  141. package/dist/components/label/index.js.map +0 -1
  142. package/dist/components/label/types.d.ts +0 -10
  143. package/dist/components/label/types.d.ts.map +0 -1
  144. package/dist/components/label/types.js +0 -2
  145. package/dist/components/label/types.js.map +0 -1
  146. package/dist/components/list-item/ListItem.d.ts +0 -5
  147. package/dist/components/list-item/ListItem.d.ts.map +0 -1
  148. package/dist/components/list-item/ListItem.js +0 -44
  149. package/dist/components/list-item/ListItem.js.map +0 -1
  150. package/dist/components/list-item/index.d.ts +0 -3
  151. package/dist/components/list-item/index.d.ts.map +0 -1
  152. package/dist/components/list-item/index.js +0 -2
  153. package/dist/components/list-item/index.js.map +0 -1
  154. package/dist/components/list-item/types.d.ts +0 -11
  155. package/dist/components/list-item/types.d.ts.map +0 -1
  156. package/dist/components/list-item/types.js +0 -2
  157. package/dist/components/list-item/types.js.map +0 -1
  158. package/dist/components/switch/Switch.d.ts.map +0 -1
  159. package/dist/components/switch/Switch.js +0 -68
  160. package/dist/components/switch/Switch.js.map +0 -1
  161. package/dist/components/switch/index.d.ts +0 -3
  162. package/dist/components/switch/index.d.ts.map +0 -1
  163. package/dist/components/switch/index.js +0 -2
  164. package/dist/components/switch/index.js.map +0 -1
  165. package/dist/components/switch/types.d.ts +0 -15
  166. package/dist/components/switch/types.d.ts.map +0 -1
  167. package/dist/components/switch/types.js +0 -2
  168. package/dist/components/switch/types.js.map +0 -1
  169. package/dist/components/textarea/Textarea.d.ts +0 -4
  170. package/dist/components/textarea/Textarea.d.ts.map +0 -1
  171. package/dist/components/textarea/Textarea.js +0 -6
  172. package/dist/components/textarea/Textarea.js.map +0 -1
  173. package/dist/components/textarea/index.d.ts +0 -3
  174. package/dist/components/textarea/index.d.ts.map +0 -1
  175. package/dist/components/textarea/index.js +0 -2
  176. package/dist/components/textarea/index.js.map +0 -1
  177. package/dist/components/textarea/types.d.ts +0 -5
  178. package/dist/components/textarea/types.d.ts.map +0 -1
  179. package/dist/components/textarea/types.js +0 -2
  180. package/dist/components/textarea/types.js.map +0 -1
  181. package/dist/primitives/button-base/ButtonBase.d.ts +0 -5
  182. package/dist/primitives/button-base/ButtonBase.d.ts.map +0 -1
  183. package/dist/primitives/button-base/ButtonBase.js +0 -42
  184. package/dist/primitives/button-base/ButtonBase.js.map +0 -1
  185. package/dist/primitives/button-base/index.d.ts +0 -3
  186. package/dist/primitives/button-base/index.d.ts.map +0 -1
  187. package/dist/primitives/button-base/index.js +0 -2
  188. package/dist/primitives/button-base/index.js.map +0 -1
  189. package/dist/primitives/button-base/types.d.ts.map +0 -1
  190. package/dist/primitives/button-base/types.js +0 -2
  191. package/dist/primitives/button-base/types.js.map +0 -1
  192. package/src/components/field/Field.tsx +0 -52
  193. package/src/components/field/index.ts +0 -2
  194. package/src/components/helper-text/HelperText.tsx +0 -12
  195. package/src/components/helper-text/index.ts +0 -2
  196. package/src/components/helper-text/types.ts +0 -10
  197. package/src/components/label/Label.tsx +0 -23
  198. package/src/components/label/index.ts +0 -2
  199. package/src/components/label/types.ts +0 -11
  200. package/src/components/list-item/ListItem.tsx +0 -76
  201. package/src/components/list-item/index.ts +0 -2
  202. package/src/components/list-item/types.ts +0 -11
  203. package/src/components/switch/Switch.tsx +0 -113
  204. package/src/components/switch/index.ts +0 -2
  205. package/src/components/textarea/Textarea.tsx +0 -15
  206. package/src/components/textarea/index.ts +0 -2
  207. package/src/components/textarea/types.ts +0 -5
  208. package/src/primitives/button-base/index.ts +0 -2
  209. /package/src/{components/field/types.ts → types/field.ts} +0 -0
@@ -1,23 +0,0 @@
1
- import React from 'react';
2
-
3
- import { Text } from '../../features/typography/public';
4
- import type { LabelProps } from './types';
5
-
6
- export function Label({
7
- children,
8
- required = false,
9
- emphasis = 'default',
10
- color,
11
- testID,
12
- }: LabelProps) {
13
- return (
14
- <Text color={color} emphasis={emphasis} testID={testID} variant="label" weight="medium">
15
- {children}
16
- {required ? (
17
- <Text color="error" variant="label" weight="medium">
18
- {' *'}
19
- </Text>
20
- ) : null}
21
- </Text>
22
- );
23
- }
@@ -1,2 +0,0 @@
1
- export { Label } from './Label';
2
- export type { LabelProps } from './types';
@@ -1,11 +0,0 @@
1
- import type React from 'react';
2
-
3
- import type { SurfaceColor, SurfaceEmphasis } from '../../surfaceColor';
4
-
5
- export interface LabelProps {
6
- children?: React.ReactNode;
7
- required?: boolean;
8
- emphasis?: Extract<SurfaceEmphasis, 'default' | 'muted'>;
9
- color?: Extract<SurfaceColor, 'error'>;
10
- testID?: string;
11
- }
@@ -1,76 +0,0 @@
1
- import React from 'react';
2
- import { View as ReactNativeView } from 'react-native';
3
-
4
- import { View } from '../../features/layout/public';
5
- import { Text } from '../../features/typography/public';
6
- import { ButtonBase } from '../../primitives/button-base';
7
- import { useTheme } from '../../theme/ThemeContext';
8
- import type { ListItemProps } from './types';
9
-
10
- /*** Renders the content row shared by static and interactive ListItem variants. */
11
- function ListItemContent({
12
- title,
13
- description,
14
- leading,
15
- trailing,
16
- testID,
17
- }: Omit<ListItemProps, 'disabled' | 'onPress'>) {
18
- const { theme } = useTheme();
19
-
20
- return (
21
- <View
22
- px="m"
23
- py="m"
24
- testID={testID}
25
- style={{
26
- flexDirection: 'row',
27
- alignItems: 'center',
28
- }}
29
- >
30
- {leading ? (
31
- <ReactNativeView style={{ marginRight: theme.spacing.m }}>{leading}</ReactNativeView>
32
- ) : null}
33
- <View flex={1}>
34
- {title ? (
35
- <Text numberOfLines={1} variant="body" weight="medium">
36
- {title}
37
- </Text>
38
- ) : null}
39
- {description ? (
40
- <Text emphasis="muted" numberOfLines={2} variant="bodySmall">
41
- {description}
42
- </Text>
43
- ) : null}
44
- </View>
45
- {trailing ? (
46
- <ReactNativeView style={{ marginLeft: theme.spacing.m }}>{trailing}</ReactNativeView>
47
- ) : null}
48
- </View>
49
- );
50
- }
51
-
52
- /*** Renders a static or pressable list item. */
53
- export function ListItem({ onPress, disabled = false, testID, ...content }: ListItemProps) {
54
- const { theme } = useTheme();
55
-
56
- if (!onPress) return <ListItemContent {...content} testID={testID} />;
57
-
58
- return (
59
- <ButtonBase accessibilityRole="button" disabled={disabled} onPress={onPress} testID={testID}>
60
- {(state) => (
61
- <View
62
- style={{
63
- backgroundColor: state.pressed
64
- ? theme.semantics.neutral.surfaceActive
65
- : state.hovered
66
- ? theme.semantics.neutral.surfaceHover
67
- : 'transparent',
68
- opacity: state.disabled ? 0.72 : 1,
69
- }}
70
- >
71
- <ListItemContent {...content} />
72
- </View>
73
- )}
74
- </ButtonBase>
75
- );
76
- }
@@ -1,2 +0,0 @@
1
- export { ListItem } from './ListItem';
2
- export type { ListItemProps } from './types';
@@ -1,11 +0,0 @@
1
- import type React from 'react';
2
-
3
- export interface ListItemProps {
4
- title?: React.ReactNode;
5
- description?: React.ReactNode;
6
- leading?: React.ReactNode;
7
- trailing?: React.ReactNode;
8
- onPress?: (() => void) | undefined;
9
- disabled?: boolean;
10
- testID?: string;
11
- }
@@ -1,113 +0,0 @@
1
- import React from 'react';
2
-
3
- import { View } from '../../features/layout/public';
4
- import { Text } from '../../features/typography/public';
5
- import {
6
- resolveFieldState,
7
- resolveIndicatorSize,
8
- resolveSelectionControlColors,
9
- resolveSelectionControlNextChecked,
10
- } from '../../internal/resolvers';
11
- import { useControllableState } from '../../internal/useControllableState';
12
- import { ButtonBase } from '../../primitives/button-base';
13
- import { useTheme } from '../../theme/ThemeContext';
14
- import type { SwitchProps } from './types';
15
-
16
- /*** Renders a controlled or uncontrolled accessible switch. */
17
- export function Switch({
18
- children,
19
- checked,
20
- defaultChecked = false,
21
- onCheckedChange,
22
- color = 'primary',
23
- size = 'm',
24
- disabled = false,
25
- invalid = false,
26
- readOnly = false,
27
- accessibilityLabel,
28
- testID,
29
- ...props
30
- }: SwitchProps) {
31
- const { theme } = useTheme();
32
- const [isChecked, setChecked] = useControllableState<boolean>({
33
- value: checked,
34
- defaultValue: defaultChecked,
35
- onChange: onCheckedChange,
36
- });
37
- const indicatorSize = resolveIndicatorSize(size);
38
- const nextChecked = resolveSelectionControlNextChecked({
39
- checked: isChecked,
40
- disabled,
41
- kind: 'switch',
42
- readOnly,
43
- });
44
-
45
- return (
46
- <ButtonBase
47
- {...props}
48
- accessibilityLabel={accessibilityLabel}
49
- accessibilityRole="switch"
50
- accessibilityState={{ checked: isChecked }}
51
- disabled={disabled}
52
- onPress={nextChecked === null ? undefined : () => setChecked(nextChecked)}
53
- testID={testID}
54
- >
55
- {(interactionState) => {
56
- const fieldState = resolveFieldState({
57
- disabled,
58
- focused: interactionState.focused,
59
- invalid,
60
- readOnly,
61
- });
62
- const colors = resolveSelectionControlColors(theme, {
63
- checked: isChecked,
64
- fieldState,
65
- hovered: interactionState.hovered,
66
- pressed: interactionState.pressed,
67
- color,
68
- });
69
- const labelEmphasis =
70
- colors.labelColor === theme.semantics.content.muted ? 'muted' : 'default';
71
-
72
- return (
73
- <View
74
- style={{
75
- alignItems: 'center',
76
- flexDirection: 'row',
77
- opacity: colors.opacity,
78
- }}
79
- >
80
- <View
81
- radius="full"
82
- style={{
83
- backgroundColor: colors.trackColor,
84
- borderColor: colors.borderColor,
85
- borderWidth: 1,
86
- justifyContent: 'center',
87
- minWidth: indicatorSize.switchWidth,
88
- paddingHorizontal: 2,
89
- width: indicatorSize.switchWidth,
90
- height: indicatorSize.switchHeight,
91
- }}
92
- >
93
- <View
94
- radius="full"
95
- style={{
96
- alignSelf: isChecked ? 'flex-end' : 'flex-start',
97
- backgroundColor: colors.thumbColor,
98
- height: indicatorSize.switchThumb,
99
- width: indicatorSize.switchThumb,
100
- }}
101
- />
102
- </View>
103
- {children ? (
104
- <View ml="s">
105
- <Text emphasis={labelEmphasis}>{children}</Text>
106
- </View>
107
- ) : null}
108
- </View>
109
- );
110
- }}
111
- </ButtonBase>
112
- );
113
- }
@@ -1,2 +0,0 @@
1
- export { Switch } from './Switch';
2
- export type { SwitchProps } from './types';
@@ -1,15 +0,0 @@
1
- import React from 'react';
2
-
3
- import { TextInput } from '../../features/form/text-input/public';
4
- import type { TextareaProps } from './types';
5
-
6
- export function Textarea({ rows = 4, numberOfLines, style, ...props }: TextareaProps) {
7
- return (
8
- <TextInput
9
- {...props}
10
- multiline
11
- numberOfLines={numberOfLines ?? rows}
12
- style={[{ textAlignVertical: 'top' }, style]}
13
- />
14
- );
15
- }
@@ -1,2 +0,0 @@
1
- export { Textarea } from './Textarea';
2
- export type { TextareaProps } from './types';
@@ -1,5 +0,0 @@
1
- import type { TextInputProps } from '../../types/text-input';
2
-
3
- export interface TextareaProps extends Omit<TextInputProps, 'multiline'> {
4
- rows?: number;
5
- }
@@ -1,2 +0,0 @@
1
- export { ButtonBase } from './ButtonBase';
2
- export type { ButtonBaseProps } from './types';