@ankhorage/surface 5.0.1 → 6.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 +6 -0
- package/README.md +1 -2
- package/dist/components/field/Field.d.ts +1 -0
- package/dist/components/field/Field.d.ts.map +1 -1
- package/dist/components/field/Field.js +5 -4
- package/dist/components/field/Field.js.map +1 -1
- package/dist/components/list-item/ListItem.d.ts +1 -0
- package/dist/components/list-item/ListItem.d.ts.map +1 -1
- package/dist/components/list-item/ListItem.js +13 -12
- package/dist/components/list-item/ListItem.js.map +1 -1
- package/dist/components/switch/Switch.d.ts +1 -0
- package/dist/components/switch/Switch.d.ts.map +1 -1
- package/dist/components/switch/Switch.js +10 -13
- package/dist/components/switch/Switch.js.map +1 -1
- package/dist/{layout → core/responsive}/Show.d.ts +2 -1
- package/dist/core/responsive/Show.d.ts.map +1 -0
- package/dist/{layout → core/responsive}/Show.js +3 -1
- package/dist/core/responsive/Show.js.map +1 -0
- package/dist/core/responsive/index.d.ts +1 -0
- package/dist/core/responsive/index.d.ts.map +1 -1
- package/dist/core/responsive/index.js +1 -0
- package/dist/core/responsive/index.js.map +1 -1
- package/dist/features/app-bar/adapters/inbound/AppBar.d.ts +5 -0
- package/dist/features/app-bar/adapters/inbound/AppBar.d.ts.map +1 -0
- package/dist/features/app-bar/adapters/inbound/AppBar.js +40 -0
- package/dist/features/app-bar/adapters/inbound/AppBar.js.map +1 -0
- package/dist/features/app-bar/public.d.ts +3 -0
- package/dist/features/app-bar/public.d.ts.map +1 -0
- package/dist/features/app-bar/public.js +2 -0
- package/dist/features/app-bar/public.js.map +1 -0
- package/dist/features/badge/adapters/inbound/Badge.js +3 -3
- package/dist/features/badge/adapters/inbound/Badge.js.map +1 -1
- package/dist/features/button/adapters/inbound/Button.js +8 -8
- package/dist/features/button/adapters/inbound/Button.js.map +1 -1
- package/dist/features/button/adapters/inbound/IconButton.js +3 -3
- package/dist/features/button/adapters/inbound/IconButton.js.map +1 -1
- package/dist/features/form/checkbox/adapters/inbound/Checkbox.js +7 -7
- package/dist/features/form/checkbox/adapters/inbound/Checkbox.js.map +1 -1
- package/dist/features/form/radio/adapters/inbound/Radio.js +8 -8
- package/dist/features/form/radio/adapters/inbound/Radio.js.map +1 -1
- package/dist/features/layout/adapters/inbound/Divider.js +2 -2
- package/dist/features/layout/adapters/inbound/Divider.js.map +1 -1
- package/dist/features/layout/adapters/inbound/Grid.d.ts.map +1 -1
- package/dist/features/layout/adapters/inbound/Grid.js +7 -9
- package/dist/features/layout/adapters/inbound/Grid.js.map +1 -1
- package/dist/features/layout/adapters/inbound/ScrollView.d.ts +5 -0
- package/dist/features/layout/adapters/inbound/ScrollView.d.ts.map +1 -0
- package/dist/features/layout/adapters/inbound/ScrollView.js +69 -0
- package/dist/features/layout/adapters/inbound/ScrollView.js.map +1 -0
- package/dist/features/layout/adapters/inbound/View.d.ts +5 -0
- package/dist/features/layout/adapters/inbound/View.d.ts.map +1 -0
- package/dist/features/layout/adapters/inbound/View.js +17 -0
- package/dist/features/layout/adapters/inbound/View.js.map +1 -0
- package/dist/features/layout/public.d.ts +3 -4
- package/dist/features/layout/public.d.ts.map +1 -1
- package/dist/features/layout/public.js +2 -3
- package/dist/features/layout/public.js.map +1 -1
- package/dist/features/modal/adapters/inbound/Modal.d.ts.map +1 -1
- package/dist/features/modal/adapters/inbound/Modal.js +8 -8
- package/dist/features/modal/adapters/inbound/Modal.js.map +1 -1
- package/dist/features/popover-menu/adapters/inbound/PopoverMenu.d.ts.map +1 -1
- package/dist/features/popover-menu/adapters/inbound/PopoverMenu.js +11 -12
- package/dist/features/popover-menu/adapters/inbound/PopoverMenu.js.map +1 -1
- package/dist/features/surface/adapters/inbound/Surface.d.ts +1 -1
- package/dist/features/surface/adapters/inbound/Surface.d.ts.map +1 -1
- package/dist/features/surface/adapters/inbound/Surface.js +3 -3
- package/dist/features/surface/adapters/inbound/Surface.js.map +1 -1
- package/dist/features/tabs/adapters/inbound/Tab.js +3 -3
- package/dist/features/tabs/adapters/inbound/Tab.js.map +1 -1
- package/dist/features/tabs/adapters/inbound/TabList.d.ts.map +1 -1
- package/dist/features/tabs/adapters/inbound/TabList.js +3 -5
- package/dist/features/tabs/adapters/inbound/TabList.js.map +1 -1
- package/dist/features/tabs/adapters/inbound/Tabs.js +2 -2
- package/dist/features/tabs/adapters/inbound/Tabs.js.map +1 -1
- package/dist/features/toast/adapters/inbound/Toast.js +5 -5
- package/dist/features/toast/adapters/inbound/Toast.js.map +1 -1
- package/dist/features/toast/adapters/inbound/ToastProvider.js +3 -3
- package/dist/features/toast/adapters/inbound/ToastProvider.js.map +1 -1
- package/dist/index.d.ts +4 -3
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +2 -2
- package/dist/index.js.map +1 -1
- package/dist/primitives/button-base/ButtonBase.d.ts +1 -0
- package/dist/primitives/button-base/ButtonBase.d.ts.map +1 -1
- package/dist/primitives/button-base/ButtonBase.js +6 -5
- package/dist/primitives/button-base/ButtonBase.js.map +1 -1
- package/dist/primitives/button-base/types.d.ts +2 -2
- package/dist/primitives/button-base/types.d.ts.map +1 -1
- package/dist/primitives/button-base/types.js.map +1 -1
- package/dist/types/app-bar.d.ts +12 -0
- package/dist/types/app-bar.d.ts.map +1 -0
- package/dist/types/app-bar.js +2 -0
- package/dist/types/app-bar.js.map +1 -0
- package/dist/types/layout.d.ts +15 -17
- package/dist/types/layout.d.ts.map +1 -1
- package/dist/types/layout.js.map +1 -1
- package/dist/types/surface.d.ts +2 -2
- package/dist/types/surface.d.ts.map +1 -1
- package/dist/types/surface.js.map +1 -1
- package/dist/utils/resolveViewStyles.d.ts +7 -0
- package/dist/utils/resolveViewStyles.d.ts.map +1 -0
- package/dist/utils/{resolveBoxStyles.js → resolveViewStyles.js} +11 -4
- package/dist/utils/resolveViewStyles.js.map +1 -0
- package/package.json +1 -1
- package/src/components/field/Field.tsx +5 -4
- package/src/components/list-item/ListItem.tsx +17 -13
- package/src/components/switch/Switch.tsx +10 -15
- package/src/{layout → core/responsive}/Show.tsx +4 -1
- package/src/core/responsive/index.ts +1 -0
- package/src/features/app-bar/adapters/inbound/AppBar.tsx +69 -0
- package/src/features/app-bar/public.ts +2 -0
- package/src/features/badge/adapters/inbound/Badge.tsx +3 -3
- package/src/features/button/adapters/inbound/Button.tsx +8 -8
- package/src/features/button/adapters/inbound/IconButton.tsx +3 -3
- package/src/features/form/checkbox/adapters/inbound/Checkbox.tsx +7 -7
- package/src/features/form/radio/adapters/inbound/Radio.tsx +8 -8
- package/src/features/layout/adapters/inbound/Divider.tsx +2 -2
- package/src/features/layout/adapters/inbound/Grid.tsx +12 -14
- package/src/features/layout/adapters/inbound/ScrollView.tsx +102 -0
- package/src/features/layout/adapters/inbound/{Box.tsx → View.tsx} +9 -9
- package/src/features/layout/public.ts +3 -10
- package/src/features/modal/adapters/inbound/Modal.tsx +11 -8
- package/src/features/popover-menu/adapters/inbound/PopoverMenu.tsx +11 -14
- package/src/features/surface/adapters/inbound/Surface.tsx +3 -3
- package/src/features/tabs/adapters/inbound/Tab.tsx +3 -3
- package/src/features/tabs/adapters/inbound/TabList.tsx +3 -6
- package/src/features/tabs/adapters/inbound/Tabs.tsx +2 -2
- package/src/features/toast/adapters/inbound/Toast.tsx +5 -5
- package/src/features/toast/adapters/inbound/ToastProvider.tsx +3 -3
- package/src/index.test.ts +12 -38
- package/src/index.ts +4 -9
- package/src/primitives/button-base/ButtonBase.tsx +6 -8
- package/src/primitives/button-base/types.ts +2 -2
- package/src/types/app-bar.ts +13 -0
- package/src/types/layout.ts +25 -20
- package/src/types/surface.ts +2 -2
- package/src/utils/resolveViewStyles.test.ts +71 -0
- package/src/utils/{resolveBoxStyles.ts → resolveViewStyles.ts} +16 -9
- package/src/webAcceptance.test.tsx +8 -9
- package/dist/features/layout/adapters/inbound/Box.d.ts +0 -5
- package/dist/features/layout/adapters/inbound/Box.d.ts.map +0 -1
- package/dist/features/layout/adapters/inbound/Box.js +0 -17
- package/dist/features/layout/adapters/inbound/Box.js.map +0 -1
- package/dist/features/layout/adapters/inbound/Container.d.ts +0 -5
- package/dist/features/layout/adapters/inbound/Container.d.ts.map +0 -1
- package/dist/features/layout/adapters/inbound/Container.js +0 -28
- package/dist/features/layout/adapters/inbound/Container.js.map +0 -1
- package/dist/features/layout/adapters/inbound/Stack.d.ts +0 -5
- package/dist/features/layout/adapters/inbound/Stack.d.ts.map +0 -1
- package/dist/features/layout/adapters/inbound/Stack.js +0 -27
- package/dist/features/layout/adapters/inbound/Stack.js.map +0 -1
- package/dist/layout/AppBar.d.ts +0 -13
- package/dist/layout/AppBar.d.ts.map +0 -1
- package/dist/layout/AppBar.js +0 -30
- package/dist/layout/AppBar.js.map +0 -1
- package/dist/layout/Center.d.ts +0 -7
- package/dist/layout/Center.d.ts.map +0 -1
- package/dist/layout/Center.js +0 -12
- package/dist/layout/Center.js.map +0 -1
- package/dist/layout/Inline.d.ts +0 -5
- package/dist/layout/Inline.d.ts.map +0 -1
- package/dist/layout/Inline.js +0 -6
- package/dist/layout/Inline.js.map +0 -1
- package/dist/layout/ScrollArea.d.ts +0 -9
- package/dist/layout/ScrollArea.d.ts.map +0 -1
- package/dist/layout/ScrollArea.js +0 -52
- package/dist/layout/ScrollArea.js.map +0 -1
- package/dist/layout/Show.d.ts.map +0 -1
- package/dist/layout/Show.js.map +0 -1
- package/dist/layout/Spacer.d.ts +0 -9
- package/dist/layout/Spacer.d.ts.map +0 -1
- package/dist/layout/Spacer.js +0 -12
- package/dist/layout/Spacer.js.map +0 -1
- package/dist/layout/Template.d.ts +0 -18
- package/dist/layout/Template.d.ts.map +0 -1
- package/dist/layout/Template.js +0 -36
- package/dist/layout/Template.js.map +0 -1
- package/dist/layout/index.d.ts +0 -15
- package/dist/layout/index.d.ts.map +0 -1
- package/dist/layout/index.js +0 -8
- package/dist/layout/index.js.map +0 -1
- package/dist/utils/resolveBoxStyles.d.ts +0 -7
- package/dist/utils/resolveBoxStyles.d.ts.map +0 -1
- package/dist/utils/resolveBoxStyles.js.map +0 -1
- package/src/features/layout/adapters/inbound/Container.tsx +0 -43
- package/src/features/layout/adapters/inbound/Stack.test.ts +0 -13
- package/src/features/layout/adapters/inbound/Stack.tsx +0 -44
- package/src/layout/AppBar.tsx +0 -60
- package/src/layout/Center.tsx +0 -22
- package/src/layout/Inline.tsx +0 -9
- package/src/layout/ScrollArea.tsx +0 -116
- package/src/layout/Spacer.tsx +0 -22
- package/src/layout/Template.tsx +0 -86
- package/src/layout/index.ts +0 -14
- package/src/utils/resolveBoxStyles.test.ts +0 -54
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
# @ankhorage/surface
|
|
2
2
|
|
|
3
|
+
## 6.0.0
|
|
4
|
+
|
|
5
|
+
### Major Changes
|
|
6
|
+
|
|
7
|
+
- 574a34b: Replace legacy layout aliases with canonical React Native-named `View` and `ScrollView` primitives, remove redundant layout presets, and move AppBar and responsive Show to their owning boundaries.
|
|
8
|
+
|
|
3
9
|
## 5.0.1
|
|
4
10
|
|
|
5
11
|
### Patch 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
|
|
|
@@ -34,7 +34,6 @@ Cross-platform UI foundation for React Native and React Native Web. Provides the
|
|
|
34
34
|
- [resolveResponsive sequence](././paradox/diagrams/sequences/resolve-responsive.mmd)
|
|
35
35
|
- [ResponsiveProvider sequence](././paradox/diagrams/sequences/responsive-provider.mmd)
|
|
36
36
|
- [Show sequence](././paradox/diagrams/sequences/show.mmd)
|
|
37
|
-
- [Stack sequence](././paradox/diagrams/sequences/stack.mmd)
|
|
38
37
|
- [Surface sequence](././paradox/diagrams/sequences/surface.mmd)
|
|
39
38
|
- [Switch sequence](././paradox/diagrams/sequences/switch.mmd)
|
|
40
39
|
- [TabList sequence](././paradox/diagrams/sequences/tab-list.mmd)
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { FieldProps } from './types';
|
|
3
|
+
/*** Composes a label, control, and helper or error message into one field. */
|
|
3
4
|
export declare function Field({ children, label, helperText, errorText, required, disabled, invalid, readOnly, testID, }: FieldProps): React.JSX.Element;
|
|
4
5
|
//# sourceMappingURL=Field.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../../src/components/field/Field.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C,wBAAgB,KAAK,CAAC,EACpB,QAAQ,EACR,KAAK,EACL,UAAU,EACV,SAAS,EACT,QAAgB,EAChB,QAAgB,EAChB,OAAe,EACf,QAAgB,EAChB,MAAM,GACP,EAAE,UAAU,qBAgCZ"}
|
|
1
|
+
{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../../src/components/field/Field.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C,8EAA8E;AAC9E,wBAAgB,KAAK,CAAC,EACpB,QAAQ,EACR,KAAK,EACL,UAAU,EACV,SAAS,EACT,QAAgB,EAChB,QAAgB,EAChB,OAAe,EACf,QAAgB,EAChB,MAAM,GACP,EAAE,UAAU,qBAgCZ"}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { View } from '../../features/layout/public';
|
|
3
3
|
import { resolveFieldPresentation, resolveFieldState } from '../../internal/resolvers';
|
|
4
4
|
import { HelperText } from '../helper-text';
|
|
5
5
|
import { Label } from '../label';
|
|
6
|
+
/*** Composes a label, control, and helper or error message into one field. */
|
|
6
7
|
export function Field({ children, label, helperText, errorText, required = false, disabled = false, invalid = false, readOnly = false, testID, }) {
|
|
7
8
|
const hasErrorText = Boolean(errorText);
|
|
8
9
|
const fieldState = resolveFieldState({
|
|
@@ -11,16 +12,16 @@ export function Field({ children, label, helperText, errorText, required = false
|
|
|
11
12
|
readOnly,
|
|
12
13
|
});
|
|
13
14
|
const presentation = resolveFieldPresentation(fieldState);
|
|
14
|
-
return (<
|
|
15
|
+
return (<View gap="xs" testID={testID}>
|
|
15
16
|
{label ? (<Label color={presentation.labelColor} emphasis={presentation.labelEmphasis} required={required}>
|
|
16
17
|
{label}
|
|
17
18
|
</Label>) : null}
|
|
18
|
-
<
|
|
19
|
+
<View>{children}</View>
|
|
19
20
|
{hasErrorText ? (<HelperText color={presentation.helperColor} emphasis={presentation.helperEmphasis}>
|
|
20
21
|
{errorText}
|
|
21
22
|
</HelperText>) : helperText ? (<HelperText color={presentation.helperColor} emphasis={presentation.helperEmphasis}>
|
|
22
23
|
{helperText}
|
|
23
24
|
</HelperText>) : null}
|
|
24
|
-
</
|
|
25
|
+
</View>);
|
|
25
26
|
}
|
|
26
27
|
//# sourceMappingURL=Field.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Field.js","sourceRoot":"","sources":["../../../src/components/field/Field.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"Field.js","sourceRoot":"","sources":["../../../src/components/field/Field.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,IAAI,EAAE,MAAM,8BAA8B,CAAC;AACpD,OAAO,EAAE,wBAAwB,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AACvF,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAGjC,8EAA8E;AAC9E,MAAM,UAAU,KAAK,CAAC,EACpB,QAAQ,EACR,KAAK,EACL,UAAU,EACV,SAAS,EACT,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,KAAK,EACf,QAAQ,GAAG,KAAK,EAChB,MAAM,GACK;IACX,MAAM,YAAY,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC;IACxC,MAAM,UAAU,GAAG,iBAAiB,CAAC;QACnC,QAAQ;QACR,OAAO,EAAE,OAAO,IAAI,YAAY;QAChC,QAAQ;KACT,CAAC,CAAC;IACH,MAAM,YAAY,GAAG,wBAAwB,CAAC,UAAU,CAAC,CAAC;IAE1D,OAAO,CACL,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAC5B;MAAA,CAAC,KAAK,CAAC,CAAC,CAAC,CACP,CAAC,KAAK,CACJ,KAAK,CAAC,CAAC,YAAY,CAAC,UAAU,CAAC,CAC/B,QAAQ,CAAC,CAAC,YAAY,CAAC,aAAa,CAAC,CACrC,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAEnB;UAAA,CAAC,KAAK,CACR;QAAA,EAAE,KAAK,CAAC,CACT,CAAC,CAAC,CAAC,IAAI,CACR;MAAA,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,EAAE,IAAI,CACtB;MAAA,CAAC,YAAY,CAAC,CAAC,CAAC,CACd,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC,QAAQ,CAAC,CAAC,YAAY,CAAC,cAAc,CAAC,CACjF;UAAA,CAAC,SAAS,CACZ;QAAA,EAAE,UAAU,CAAC,CACd,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CACf,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC,QAAQ,CAAC,CAAC,YAAY,CAAC,cAAc,CAAC,CACjF;UAAA,CAAC,UAAU,CACb;QAAA,EAAE,UAAU,CAAC,CACd,CAAC,CAAC,CAAC,IAAI,CACV;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC","sourcesContent":["import React from 'react';\n\nimport { View } from '../../features/layout/public';\nimport { resolveFieldPresentation, resolveFieldState } from '../../internal/resolvers';\nimport { HelperText } from '../helper-text';\nimport { Label } from '../label';\nimport type { FieldProps } from './types';\n\n/*** Composes a label, control, and helper or error message into one field. */\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 fieldState = resolveFieldState({\n disabled,\n invalid: invalid || hasErrorText,\n readOnly,\n });\n const presentation = resolveFieldPresentation(fieldState);\n\n return (\n <View gap=\"xs\" testID={testID}>\n {label ? (\n <Label\n color={presentation.labelColor}\n emphasis={presentation.labelEmphasis}\n required={required}\n >\n {label}\n </Label>\n ) : null}\n <View>{children}</View>\n {hasErrorText ? (\n <HelperText color={presentation.helperColor} emphasis={presentation.helperEmphasis}>\n {errorText}\n </HelperText>\n ) : helperText ? (\n <HelperText color={presentation.helperColor} emphasis={presentation.helperEmphasis}>\n {helperText}\n </HelperText>\n ) : null}\n </View>\n );\n}\n"]}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { ListItemProps } from './types';
|
|
3
|
+
/*** Renders a static or pressable list item. */
|
|
3
4
|
export declare function ListItem({ onPress, disabled, testID, ...content }: ListItemProps): React.JSX.Element;
|
|
4
5
|
//# sourceMappingURL=ListItem.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../src/components/list-item/ListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../src/components/list-item/ListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AA4C7C,gDAAgD;AAChD,wBAAgB,QAAQ,CAAC,EAAE,OAAO,EAAE,QAAgB,EAAE,MAAM,EAAE,GAAG,OAAO,EAAE,EAAE,aAAa,qBAuBxF"}
|
|
@@ -1,34 +1,35 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { View } from 'react-native';
|
|
3
|
-
import {
|
|
2
|
+
import { View as ReactNativeView } from 'react-native';
|
|
3
|
+
import { View } from '../../features/layout/public';
|
|
4
4
|
import { Text } from '../../features/typography/public';
|
|
5
5
|
import { ButtonBase } from '../../primitives/button-base';
|
|
6
6
|
import { useTheme } from '../../theme/ThemeContext';
|
|
7
|
+
/*** Renders the content row shared by static and interactive ListItem variants. */
|
|
7
8
|
function ListItemContent({ title, description, leading, trailing, testID, }) {
|
|
8
9
|
const { theme } = useTheme();
|
|
9
|
-
return (<
|
|
10
|
+
return (<View px="m" py="m" testID={testID} style={{
|
|
10
11
|
flexDirection: 'row',
|
|
11
12
|
alignItems: 'center',
|
|
12
13
|
}}>
|
|
13
|
-
{leading ? <
|
|
14
|
-
<
|
|
14
|
+
{leading ? (<ReactNativeView style={{ marginRight: theme.spacing.m }}>{leading}</ReactNativeView>) : null}
|
|
15
|
+
<View flex={1}>
|
|
15
16
|
{title ? (<Text numberOfLines={1} variant="body" weight="medium">
|
|
16
17
|
{title}
|
|
17
18
|
</Text>) : null}
|
|
18
19
|
{description ? (<Text emphasis="muted" numberOfLines={2} variant="bodySmall">
|
|
19
20
|
{description}
|
|
20
21
|
</Text>) : null}
|
|
21
|
-
</
|
|
22
|
-
{trailing ? <
|
|
23
|
-
</
|
|
22
|
+
</View>
|
|
23
|
+
{trailing ? (<ReactNativeView style={{ marginLeft: theme.spacing.m }}>{trailing}</ReactNativeView>) : null}
|
|
24
|
+
</View>);
|
|
24
25
|
}
|
|
26
|
+
/*** Renders a static or pressable list item. */
|
|
25
27
|
export function ListItem({ onPress, disabled = false, testID, ...content }) {
|
|
26
28
|
const { theme } = useTheme();
|
|
27
|
-
if (!onPress)
|
|
29
|
+
if (!onPress)
|
|
28
30
|
return <ListItemContent {...content} testID={testID}/>;
|
|
29
|
-
}
|
|
30
31
|
return (<ButtonBase accessibilityRole="button" disabled={disabled} onPress={onPress} testID={testID}>
|
|
31
|
-
{(state) => (<
|
|
32
|
+
{(state) => (<View style={{
|
|
32
33
|
backgroundColor: state.pressed
|
|
33
34
|
? theme.semantics.neutral.surfaceActive
|
|
34
35
|
: state.hovered
|
|
@@ -37,7 +38,7 @@ export function ListItem({ onPress, disabled = false, testID, ...content }) {
|
|
|
37
38
|
opacity: state.disabled ? 0.72 : 1,
|
|
38
39
|
}}>
|
|
39
40
|
<ListItemContent {...content}/>
|
|
40
|
-
</
|
|
41
|
+
</View>)}
|
|
41
42
|
</ButtonBase>);
|
|
42
43
|
}
|
|
43
44
|
//# sourceMappingURL=ListItem.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItem.js","sourceRoot":"","sources":["../../../src/components/list-item/ListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"ListItem.js","sourceRoot":"","sources":["../../../src/components/list-item/ListItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { View as ReactNativeView } from 'react-native';\n\nimport { View } from '../../features/layout/public';\nimport { Text } from '../../features/typography/public';\nimport { ButtonBase } from '../../primitives/button-base';\nimport { useTheme } from '../../theme/ThemeContext';\nimport type { ListItemProps } from './types';\n\n/*** Renders the content row shared by static and interactive ListItem variants. */\nfunction ListItemContent({\n title,\n description,\n leading,\n trailing,\n testID,\n}: Omit<ListItemProps, 'disabled' | 'onPress'>) {\n const { theme } = useTheme();\n\n return (\n <View\n px=\"m\"\n py=\"m\"\n testID={testID}\n style={{\n flexDirection: 'row',\n alignItems: 'center',\n }}\n >\n {leading ? (\n <ReactNativeView style={{ marginRight: theme.spacing.m }}>{leading}</ReactNativeView>\n ) : null}\n <View flex={1}>\n {title ? (\n <Text numberOfLines={1} variant=\"body\" weight=\"medium\">\n {title}\n </Text>\n ) : null}\n {description ? (\n <Text emphasis=\"muted\" numberOfLines={2} variant=\"bodySmall\">\n {description}\n </Text>\n ) : null}\n </View>\n {trailing ? (\n <ReactNativeView style={{ marginLeft: theme.spacing.m }}>{trailing}</ReactNativeView>\n ) : null}\n </View>\n );\n}\n\n/*** Renders a static or pressable list item. */\nexport function ListItem({ onPress, disabled = false, testID, ...content }: ListItemProps) {\n const { theme } = useTheme();\n\n if (!onPress) return <ListItemContent {...content} testID={testID} />;\n\n return (\n <ButtonBase accessibilityRole=\"button\" disabled={disabled} onPress={onPress} testID={testID}>\n {(state) => (\n <View\n style={{\n backgroundColor: state.pressed\n ? theme.semantics.neutral.surfaceActive\n : state.hovered\n ? theme.semantics.neutral.surfaceHover\n : 'transparent',\n opacity: state.disabled ? 0.72 : 1,\n }}\n >\n <ListItemContent {...content} />\n </View>\n )}\n </ButtonBase>\n );\n}\n"]}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { SwitchProps } from './types';
|
|
3
|
+
/*** Renders a controlled or uncontrolled accessible switch. */
|
|
3
4
|
export declare function Switch({ children, checked, defaultChecked, onCheckedChange, color, size, disabled, invalid, readOnly, accessibilityLabel, testID, ...props }: SwitchProps): React.JSX.Element;
|
|
4
5
|
//# sourceMappingURL=Switch.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../src/components/switch/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,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,
|
|
1
|
+
{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../src/components/switch/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,+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,qBAmFb"}
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { View } from '../../features/layout/public';
|
|
3
3
|
import { Text } from '../../features/typography/public';
|
|
4
4
|
import { resolveFieldState, resolveIndicatorSize, resolveSelectionControlColors, resolveSelectionControlNextChecked, } from '../../internal/resolvers';
|
|
5
5
|
import { useControllableState } from '../../internal/useControllableState';
|
|
6
6
|
import { ButtonBase } from '../../primitives/button-base';
|
|
7
7
|
import { useTheme } from '../../theme/ThemeContext';
|
|
8
|
+
/*** Renders a controlled or uncontrolled accessible switch. */
|
|
8
9
|
export function Switch({ children, checked, defaultChecked = false, onCheckedChange, color = 'primary', size = 'm', disabled = false, invalid = false, readOnly = false, accessibilityLabel, testID, ...props }) {
|
|
9
10
|
const { theme } = useTheme();
|
|
10
11
|
const [isChecked, setChecked] = useControllableState({
|
|
@@ -19,11 +20,7 @@ export function Switch({ children, checked, defaultChecked = false, onCheckedCha
|
|
|
19
20
|
kind: 'switch',
|
|
20
21
|
readOnly,
|
|
21
22
|
});
|
|
22
|
-
return (<ButtonBase {...props} accessibilityLabel={accessibilityLabel} accessibilityRole="switch" accessibilityState={{ checked: isChecked }} disabled={disabled} onPress={nextChecked === null
|
|
23
|
-
? undefined
|
|
24
|
-
: () => {
|
|
25
|
-
setChecked(nextChecked);
|
|
26
|
-
}} testID={testID}>
|
|
23
|
+
return (<ButtonBase {...props} accessibilityLabel={accessibilityLabel} accessibilityRole="switch" accessibilityState={{ checked: isChecked }} disabled={disabled} onPress={nextChecked === null ? undefined : () => setChecked(nextChecked)} testID={testID}>
|
|
27
24
|
{(interactionState) => {
|
|
28
25
|
const fieldState = resolveFieldState({
|
|
29
26
|
disabled,
|
|
@@ -39,12 +36,12 @@ export function Switch({ children, checked, defaultChecked = false, onCheckedCha
|
|
|
39
36
|
color,
|
|
40
37
|
});
|
|
41
38
|
const labelEmphasis = colors.labelColor === theme.semantics.content.muted ? 'muted' : 'default';
|
|
42
|
-
return (<
|
|
39
|
+
return (<View style={{
|
|
43
40
|
alignItems: 'center',
|
|
44
41
|
flexDirection: 'row',
|
|
45
42
|
opacity: colors.opacity,
|
|
46
43
|
}}>
|
|
47
|
-
<
|
|
44
|
+
<View radius="full" style={{
|
|
48
45
|
backgroundColor: colors.trackColor,
|
|
49
46
|
borderColor: colors.borderColor,
|
|
50
47
|
borderWidth: 1,
|
|
@@ -54,17 +51,17 @@ export function Switch({ children, checked, defaultChecked = false, onCheckedCha
|
|
|
54
51
|
width: indicatorSize.switchWidth,
|
|
55
52
|
height: indicatorSize.switchHeight,
|
|
56
53
|
}}>
|
|
57
|
-
<
|
|
54
|
+
<View radius="full" style={{
|
|
58
55
|
alignSelf: isChecked ? 'flex-end' : 'flex-start',
|
|
59
56
|
backgroundColor: colors.thumbColor,
|
|
60
57
|
height: indicatorSize.switchThumb,
|
|
61
58
|
width: indicatorSize.switchThumb,
|
|
62
59
|
}}/>
|
|
63
|
-
</
|
|
64
|
-
{children ? (<
|
|
60
|
+
</View>
|
|
61
|
+
{children ? (<View ml="s">
|
|
65
62
|
<Text emphasis={labelEmphasis}>{children}</Text>
|
|
66
|
-
</
|
|
67
|
-
</
|
|
63
|
+
</View>) : null}
|
|
64
|
+
</View>);
|
|
68
65
|
}}
|
|
69
66
|
</ButtonBase>);
|
|
70
67
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../../src/components/switch/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../../src/components/switch/Switch.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { View } from '../../features/layout/public';\nimport { Text } from '../../features/typography/public';\nimport {\n resolveFieldState,\n resolveIndicatorSize,\n resolveSelectionControlColors,\n resolveSelectionControlNextChecked,\n} from '../../internal/resolvers';\nimport { useControllableState } from '../../internal/useControllableState';\nimport { ButtonBase } from '../../primitives/button-base';\nimport { useTheme } from '../../theme/ThemeContext';\nimport type { SwitchProps } from './types';\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 indicatorSize = resolveIndicatorSize(size);\n const nextChecked = resolveSelectionControlNextChecked({\n checked: isChecked,\n disabled,\n kind: 'switch',\n readOnly,\n });\n\n return (\n <ButtonBase\n {...props}\n accessibilityLabel={accessibilityLabel}\n accessibilityRole=\"switch\"\n accessibilityState={{ checked: isChecked }}\n disabled={disabled}\n onPress={nextChecked === null ? undefined : () => setChecked(nextChecked)}\n testID={testID}\n >\n {(interactionState) => {\n const fieldState = resolveFieldState({\n disabled,\n focused: interactionState.focused,\n invalid,\n readOnly,\n });\n const colors = resolveSelectionControlColors(theme, {\n checked: isChecked,\n fieldState,\n hovered: interactionState.hovered,\n pressed: interactionState.pressed,\n color,\n });\n const labelEmphasis =\n colors.labelColor === theme.semantics.content.muted ? 'muted' : 'default';\n\n return (\n <View\n style={{\n alignItems: 'center',\n flexDirection: 'row',\n opacity: colors.opacity,\n }}\n >\n <View\n radius=\"full\"\n style={{\n backgroundColor: colors.trackColor,\n borderColor: colors.borderColor,\n borderWidth: 1,\n justifyContent: 'center',\n minWidth: indicatorSize.switchWidth,\n paddingHorizontal: 2,\n width: indicatorSize.switchWidth,\n height: indicatorSize.switchHeight,\n }}\n >\n <View\n radius=\"full\"\n style={{\n alignSelf: isChecked ? 'flex-end' : 'flex-start',\n backgroundColor: colors.thumbColor,\n height: indicatorSize.switchThumb,\n width: indicatorSize.switchThumb,\n }}\n />\n </View>\n {children ? (\n <View ml=\"s\">\n <Text emphasis={labelEmphasis}>{children}</Text>\n </View>\n ) : null}\n </View>\n );\n }}\n </ButtonBase>\n );\n}\n"]}
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import type { Responsive } from './types';
|
|
3
3
|
export interface ShowProps {
|
|
4
4
|
when: Responsive<boolean>;
|
|
5
5
|
children: React.ReactNode;
|
|
6
6
|
fallback?: React.ReactNode;
|
|
7
7
|
}
|
|
8
|
+
/*** Conditionally renders one responsive subtree or its fallback. */
|
|
8
9
|
export declare function Show({ when, children, fallback }: ShowProps): React.JSX.Element;
|
|
9
10
|
//# sourceMappingURL=Show.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Show.d.ts","sourceRoot":"","sources":["../../../src/core/responsive/Show.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,qEAAqE;AACrE,wBAAgB,IAAI,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAe,EAAE,EAAE,SAAS,qBAIlE"}
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { resolveResponsive
|
|
2
|
+
import { resolveResponsive } from './resolve';
|
|
3
|
+
import { useResponsiveRuntime } from './ResponsiveProvider';
|
|
4
|
+
/*** Conditionally renders one responsive subtree or its fallback. */
|
|
3
5
|
export function Show({ when, children, fallback = null }) {
|
|
4
6
|
const { breakpoint } = useResponsiveRuntime();
|
|
5
7
|
const visible = resolveResponsive(when, breakpoint) ?? false;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Show.js","sourceRoot":"","sources":["../../../src/core/responsive/Show.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAC9C,OAAO,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAS5D,qEAAqE;AACrE,MAAM,UAAU,IAAI,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,GAAG,IAAI,EAAa;IACjE,MAAM,EAAE,UAAU,EAAE,GAAG,oBAAoB,EAAE,CAAC;IAC9C,MAAM,OAAO,GAAG,iBAAiB,CAAC,IAAI,EAAE,UAAU,CAAC,IAAI,KAAK,CAAC;IAC7D,OAAO,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC;AAC9C,CAAC","sourcesContent":["import React from 'react';\n\nimport { resolveResponsive } from './resolve';\nimport { useResponsiveRuntime } from './ResponsiveProvider';\nimport type { Responsive } from './types';\n\nexport interface ShowProps {\n when: Responsive<boolean>;\n children: React.ReactNode;\n fallback?: React.ReactNode;\n}\n\n/*** Conditionally renders one responsive subtree or its fallback. */\nexport function Show({ when, children, fallback = null }: ShowProps) {\n const { breakpoint } = useResponsiveRuntime();\n const visible = resolveResponsive(when, breakpoint) ?? false;\n return <>{visible ? children : fallback}</>;\n}\n"]}
|
|
@@ -2,6 +2,7 @@ export { BREAKPOINT_ORDER, BREAKPOINTS } from './breakpoints';
|
|
|
2
2
|
export { getBreakpointFromWidth } from './getBreakpointFromWidth';
|
|
3
3
|
export { resolveResponsive } from './resolve';
|
|
4
4
|
export { ResponsiveProvider, useResponsiveRuntime } from './ResponsiveProvider';
|
|
5
|
+
export { Show, type ShowProps } from './Show';
|
|
5
6
|
export type { Breakpoint, Responsive, ResponsiveRuntime } from './types';
|
|
6
7
|
export { useBreakpoint } from './useBreakpoint';
|
|
7
8
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/core/responsive/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC9D,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAChF,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AACzE,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/core/responsive/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC9D,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAChF,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAC9C,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AACzE,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC"}
|
|
@@ -2,5 +2,6 @@ export { BREAKPOINT_ORDER, BREAKPOINTS } from './breakpoints';
|
|
|
2
2
|
export { getBreakpointFromWidth } from './getBreakpointFromWidth';
|
|
3
3
|
export { resolveResponsive } from './resolve';
|
|
4
4
|
export { ResponsiveProvider, useResponsiveRuntime } from './ResponsiveProvider';
|
|
5
|
+
export { Show } from './Show';
|
|
5
6
|
export { useBreakpoint } from './useBreakpoint';
|
|
6
7
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/core/responsive/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC9D,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/core/responsive/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC9D,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAChF,OAAO,EAAE,IAAI,EAAkB,MAAM,QAAQ,CAAC;AAE9C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC","sourcesContent":["export { BREAKPOINT_ORDER, BREAKPOINTS } from './breakpoints';\nexport { getBreakpointFromWidth } from './getBreakpointFromWidth';\nexport { resolveResponsive } from './resolve';\nexport { ResponsiveProvider, useResponsiveRuntime } from './ResponsiveProvider';\nexport { Show, type ShowProps } from './Show';\nexport type { Breakpoint, Responsive, ResponsiveRuntime } from './types';\nexport { useBreakpoint } from './useBreakpoint';\n"]}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { AppBarProps } from '../../../../types/app-bar';
|
|
3
|
+
/*** Renders application chrome with optional safe-area padding and leading/trailing slots. */
|
|
4
|
+
export declare function AppBar({ leading, trailing, children, safeAreaTop, divider, contentStyle, bg, style, ...props }: AppBarProps): React.JSX.Element;
|
|
5
|
+
//# sourceMappingURL=AppBar.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AppBar.d.ts","sourceRoot":"","sources":["../../../../../src/features/app-bar/adapters/inbound/AppBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAG7D,8FAA8F;AAC9F,wBAAgB,MAAM,CAAC,EACrB,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,WAAkB,EAClB,OAAe,EACf,YAAY,EACZ,EAAE,EACF,KAAK,EACL,GAAG,KAAK,EACT,EAAE,WAAW,qBAiCb"}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { StyleSheet, View as ReactNativeView } from 'react-native';
|
|
3
|
+
import { SafeAreaInsetsContext } from 'react-native-safe-area-context';
|
|
4
|
+
import { useTheme } from '../../../../theme/ThemeContext';
|
|
5
|
+
import { Divider, View } from '../../../layout/public';
|
|
6
|
+
/*** Renders application chrome with optional safe-area padding and leading/trailing slots. */
|
|
7
|
+
export function AppBar({ leading, trailing, children, safeAreaTop = true, divider = false, contentStyle, bg, style, ...props }) {
|
|
8
|
+
const { theme } = useTheme();
|
|
9
|
+
const insets = React.use(SafeAreaInsetsContext);
|
|
10
|
+
const topInset = safeAreaTop ? (insets?.top ?? 0) : 0;
|
|
11
|
+
const safeAreaStyle = topInset === 0 ? undefined : { paddingTop: topInset };
|
|
12
|
+
return (<View {...props} bg={bg ?? theme.semantics.surface.default} style={style}>
|
|
13
|
+
<ReactNativeView style={safeAreaStyle}>
|
|
14
|
+
<ReactNativeView style={[styles.content, resolveHorizontalPadding(theme.spacing.m), contentStyle]}>
|
|
15
|
+
{leading ? (<ReactNativeView style={[styles.accessory, resolveAccessoryMargin(theme.spacing.s, 'leading')]}>
|
|
16
|
+
{leading}
|
|
17
|
+
</ReactNativeView>) : null}
|
|
18
|
+
<ReactNativeView style={styles.center}>{children}</ReactNativeView>
|
|
19
|
+
{trailing ? (<ReactNativeView style={[styles.accessory, resolveAccessoryMargin(theme.spacing.s, 'trailing')]}>
|
|
20
|
+
{trailing}
|
|
21
|
+
</ReactNativeView>) : null}
|
|
22
|
+
</ReactNativeView>
|
|
23
|
+
{divider ? <Divider color={theme.semantics.neutral.divider} thickness={1}/> : null}
|
|
24
|
+
</ReactNativeView>
|
|
25
|
+
</View>);
|
|
26
|
+
}
|
|
27
|
+
/*** Resolves dynamic horizontal padding for the AppBar content row. */
|
|
28
|
+
function resolveHorizontalPadding(paddingHorizontal) {
|
|
29
|
+
return { paddingHorizontal };
|
|
30
|
+
}
|
|
31
|
+
/*** Resolves directional spacing for one AppBar accessory. */
|
|
32
|
+
function resolveAccessoryMargin(spacing, position) {
|
|
33
|
+
return position === 'leading' ? { marginRight: spacing } : { marginLeft: spacing };
|
|
34
|
+
}
|
|
35
|
+
const styles = StyleSheet.create({
|
|
36
|
+
accessory: { flexShrink: 0 },
|
|
37
|
+
center: { flex: 1, minWidth: 0 },
|
|
38
|
+
content: { alignItems: 'center', flexDirection: 'row', minHeight: 56 },
|
|
39
|
+
});
|
|
40
|
+
//# sourceMappingURL=AppBar.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AppBar.js","sourceRoot":"","sources":["../../../../../src/features/app-bar/adapters/inbound/AppBar.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { StyleSheet, View as ReactNativeView, type ViewStyle } from 'react-native';\nimport { SafeAreaInsetsContext } from 'react-native-safe-area-context';\n\nimport { useTheme } from '../../../../theme/ThemeContext';\nimport type { AppBarProps } from '../../../../types/app-bar';\nimport { Divider, View } from '../../../layout/public';\n\n/*** Renders application chrome with optional safe-area padding and leading/trailing slots. */\nexport function AppBar({\n leading,\n trailing,\n children,\n safeAreaTop = true,\n divider = false,\n contentStyle,\n bg,\n style,\n ...props\n}: AppBarProps) {\n const { theme } = useTheme();\n const insets = React.use(SafeAreaInsetsContext);\n const topInset = safeAreaTop ? (insets?.top ?? 0) : 0;\n const safeAreaStyle: ViewStyle | undefined =\n topInset === 0 ? undefined : { paddingTop: topInset };\n\n return (\n <View {...props} bg={bg ?? theme.semantics.surface.default} style={style}>\n <ReactNativeView style={safeAreaStyle}>\n <ReactNativeView\n style={[styles.content, resolveHorizontalPadding(theme.spacing.m), contentStyle]}\n >\n {leading ? (\n <ReactNativeView\n style={[styles.accessory, resolveAccessoryMargin(theme.spacing.s, 'leading')]}\n >\n {leading}\n </ReactNativeView>\n ) : null}\n <ReactNativeView style={styles.center}>{children}</ReactNativeView>\n {trailing ? (\n <ReactNativeView\n style={[styles.accessory, resolveAccessoryMargin(theme.spacing.s, 'trailing')]}\n >\n {trailing}\n </ReactNativeView>\n ) : null}\n </ReactNativeView>\n {divider ? <Divider color={theme.semantics.neutral.divider} thickness={1} /> : null}\n </ReactNativeView>\n </View>\n );\n}\n\n/*** Resolves dynamic horizontal padding for the AppBar content row. */\nfunction resolveHorizontalPadding(paddingHorizontal: number): ViewStyle {\n return { paddingHorizontal };\n}\n\n/*** Resolves directional spacing for one AppBar accessory. */\nfunction resolveAccessoryMargin(spacing: number, position: 'leading' | 'trailing'): ViewStyle {\n return position === 'leading' ? { marginRight: spacing } : { marginLeft: spacing };\n}\n\nconst styles = StyleSheet.create({\n accessory: { flexShrink: 0 },\n center: { flex: 1, minWidth: 0 },\n content: { alignItems: 'center', flexDirection: 'row', minHeight: 56 },\n});\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../../src/features/app-bar/public.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"public.js","sourceRoot":"","sources":["../../../src/features/app-bar/public.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC","sourcesContent":["export type { AppBarProps } from '../../types/app-bar';\nexport { AppBar } from './adapters/inbound/AppBar';\n"]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { resolveButtonColors, resolveControlSize } from '../../../../internal/resolvers';
|
|
3
3
|
import { useTheme } from '../../../../theme/ThemeContext';
|
|
4
|
-
import {
|
|
4
|
+
import { View } from '../../../layout/public';
|
|
5
5
|
import { Text } from '../../../typography/public';
|
|
6
6
|
/*** Renders compact semantic status or metadata content. */
|
|
7
7
|
export function Badge({ content, variant = 'soft', color = 'primary', size = 's', testID, }) {
|
|
@@ -12,11 +12,11 @@ export function Badge({ content, variant = 'soft', color = 'primary', size = 's'
|
|
|
12
12
|
color,
|
|
13
13
|
state: { disabled: false, focused: false, hovered: false, pressed: false },
|
|
14
14
|
});
|
|
15
|
-
return (<
|
|
15
|
+
return (<View px={Math.max(theme.spacing.xs, controlSize.paddingHorizontal - 4)} py={Math.max(4, controlSize.paddingVertical - 2)} radius={controlSize.borderRadius} style={resolveBadgeStyle(colors.backgroundColor, colors.borderColor, variant)} testID={testID}>
|
|
16
16
|
<Text color={color} emphasis={variant === 'solid' ? 'inverse' : 'default'} variant="bodySmall" weight="medium">
|
|
17
17
|
{content}
|
|
18
18
|
</Text>
|
|
19
|
-
</
|
|
19
|
+
</View>);
|
|
20
20
|
}
|
|
21
21
|
/*** Resolves the visual container style for one badge variant. */
|
|
22
22
|
function resolveBadgeStyle(backgroundColor, borderColor, variant) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../../../src/features/badge/adapters/inbound/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACzF,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAE1D,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../../../src/features/badge/adapters/inbound/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACzF,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAE1D,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC9C,OAAO,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAC;AAElD,4DAA4D;AAC5D,MAAM,UAAU,KAAK,CAAC,EACpB,OAAO,EACP,OAAO,GAAG,MAAM,EAChB,KAAK,GAAG,SAAS,EACjB,IAAI,GAAG,GAAG,EACV,MAAM,GACK;IACX,MAAM,EAAE,KAAK,EAAE,GAAG,QAAQ,EAAE,CAAC;IAC7B,MAAM,WAAW,GAAG,kBAAkB,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;IACpD,MAAM,MAAM,GAAG,mBAAmB,CAAC,KAAK,EAAE;QACxC,OAAO;QACP,KAAK;QACL,KAAK,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE;KAC3E,CAAC,CAAC;IAEH,OAAO,CACL,CAAC,IAAI,CACH,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,EAAE,WAAW,CAAC,iBAAiB,GAAG,CAAC,CAAC,CAAC,CAClE,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,WAAW,CAAC,eAAe,GAAG,CAAC,CAAC,CAAC,CACjD,MAAM,CAAC,CAAC,WAAW,CAAC,YAAY,CAAC,CACjC,KAAK,CAAC,CAAC,iBAAiB,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,WAAW,EAAE,OAAO,CAAC,CAAC,CAC9E,MAAM,CAAC,CAAC,MAAM,CAAC,CAEf;MAAA,CAAC,IAAI,CACH,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,QAAQ,CAAC,CAAC,OAAO,KAAK,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CACtD,OAAO,CAAC,WAAW,CACnB,MAAM,CAAC,QAAQ,CAEf;QAAA,CAAC,OAAO,CACV;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC;AAED,kEAAkE;AAClE,SAAS,iBAAiB,CACxB,eAAuB,EACvB,WAAmB,EACnB,OAA2C;IAE3C,OAAO;QACL,SAAS,EAAE,YAAY;QACvB,eAAe;QACf,WAAW;QACX,WAAW,EAAE,OAAO,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;KACzC,CAAC;AACJ,CAAC","sourcesContent":["import React from 'react';\nimport type { ViewStyle } from 'react-native';\n\nimport { resolveButtonColors, resolveControlSize } from '../../../../internal/resolvers';\nimport { useTheme } from '../../../../theme/ThemeContext';\nimport type { BadgeProps } from '../../../../types/badge';\nimport { View } from '../../../layout/public';\nimport { Text } from '../../../typography/public';\n\n/*** Renders compact semantic status or metadata content. */\nexport function Badge({\n content,\n variant = 'soft',\n color = 'primary',\n size = 's',\n testID,\n}: BadgeProps) {\n const { theme } = useTheme();\n const controlSize = resolveControlSize(theme, size);\n const colors = resolveButtonColors(theme, {\n variant,\n color,\n state: { disabled: false, focused: false, hovered: false, pressed: false },\n });\n\n return (\n <View\n px={Math.max(theme.spacing.xs, controlSize.paddingHorizontal - 4)}\n py={Math.max(4, controlSize.paddingVertical - 2)}\n radius={controlSize.borderRadius}\n style={resolveBadgeStyle(colors.backgroundColor, colors.borderColor, variant)}\n testID={testID}\n >\n <Text\n color={color}\n emphasis={variant === 'solid' ? 'inverse' : 'default'}\n variant=\"bodySmall\"\n weight=\"medium\"\n >\n {content}\n </Text>\n </View>\n );\n}\n\n/*** Resolves the visual container style for one badge variant. */\nfunction resolveBadgeStyle(\n backgroundColor: string,\n borderColor: string,\n variant: NonNullable<BadgeProps['variant']>,\n): ViewStyle {\n return {\n alignSelf: 'flex-start',\n backgroundColor,\n borderColor,\n borderWidth: variant === 'solid' ? 0 : 1,\n };\n}\n"]}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { ActivityIndicator, View } from 'react-native';
|
|
2
|
+
import { ActivityIndicator, View as ReactNativeView } from 'react-native';
|
|
3
3
|
import { resolveButtonColors, resolveControlSize, resolveIconSize, } from '../../../../internal/resolvers';
|
|
4
4
|
import { ButtonBase } from '../../../../primitives/button-base';
|
|
5
5
|
import { useTheme } from '../../../../theme/ThemeContext';
|
|
6
6
|
import { Icon } from '../../../icon/public';
|
|
7
|
-
import {
|
|
7
|
+
import { View } from '../../../layout/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 }) {
|
|
@@ -21,19 +21,19 @@ function ButtonContent({ children, color, controlSize, fullWidth, leadingIcon, l
|
|
|
21
21
|
const colors = resolveButtonColors(theme, { variant, color, state });
|
|
22
22
|
const muted = colors.contentColor === theme.semantics.content.muted;
|
|
23
23
|
const iconSize = resolveIconSize(theme, size);
|
|
24
|
-
return (<
|
|
24
|
+
return (<View px={controlSize.paddingHorizontal} py={controlSize.paddingVertical} radius={controlSize.borderRadius} style={resolveButtonContentStyle(controlSize, colors, fullWidth, variant)}>
|
|
25
25
|
{loading ? (<ActivityIndicator color={colors.contentColor} size="small"/>) : (<>
|
|
26
|
-
{leadingIcon ? (<
|
|
26
|
+
{leadingIcon ? (<ReactNativeView style={resolveAccessoryStyle(theme.spacing.s, 'leading')}>
|
|
27
27
|
<Icon {...leadingIcon} color={colors.contentColor} size={iconSize}/>
|
|
28
|
-
</
|
|
28
|
+
</ReactNativeView>) : null}
|
|
29
29
|
<Text color={muted ? undefined : color} emphasis={muted ? 'muted' : variant === 'solid' ? 'inverse' : 'default'} variant={controlSize.textVariant} weight="semiBold">
|
|
30
30
|
{children}
|
|
31
31
|
</Text>
|
|
32
|
-
{trailingIcon ? (<
|
|
32
|
+
{trailingIcon ? (<ReactNativeView style={resolveAccessoryStyle(theme.spacing.s, 'trailing')}>
|
|
33
33
|
<Icon {...trailingIcon} color={colors.contentColor} size={iconSize}/>
|
|
34
|
-
</
|
|
34
|
+
</ReactNativeView>) : null}
|
|
35
35
|
</>)}
|
|
36
|
-
</
|
|
36
|
+
</View>);
|
|
37
37
|
}
|
|
38
38
|
/*** Resolves the outer ButtonBase layout style. */
|
|
39
39
|
function resolveButtonBaseStyle(fullWidth) {
|
|
@@ -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,EAAkB,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../../src/features/button/adapters/inbound/Button.tsx"],"names":[],"mappings":"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","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 { ButtonBase } from '../../../../primitives/button-base';\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 { 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 <ButtonBase\n {...props}\n disabled={disabled || loading}\n onPress={onPress}\n style={resolveButtonBaseStyle(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 </ButtonBase>\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 ButtonBase layout style. */\nfunction resolveButtonBaseStyle(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"]}
|