@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
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { StyleSheet, View } from 'react-native';
|
|
3
|
-
import { resolveResponsive, useResponsiveRuntime } from '../../../../core/responsive';
|
|
4
|
-
import { useTheme } from '../../../../theme/ThemeContext';
|
|
5
|
-
import { resolveSpacing } from '../../../../utils/resolveSpacing';
|
|
6
|
-
import { Box } from './Box';
|
|
7
|
-
/*** Centers responsive content inside a configurable maximum width. */
|
|
8
|
-
export function Container({ children, maxWidth = { base: Number.MAX_SAFE_INTEGER, lg: 1120 }, px = { base: 16, md: 24, lg: 32 }, ...props }) {
|
|
9
|
-
const { theme } = useTheme();
|
|
10
|
-
const { breakpoint } = useResponsiveRuntime();
|
|
11
|
-
const activeMaxWidth = resolveResponsive(maxWidth, breakpoint);
|
|
12
|
-
const activePx = resolveSpacing(theme, resolveResponsive(px, breakpoint));
|
|
13
|
-
return (<Box {...props} width="100%" style={[styles.fullWidth, props.style]}>
|
|
14
|
-
<View style={resolveContainerStyle(activeMaxWidth, activePx)}>{children}</View>
|
|
15
|
-
</Box>);
|
|
16
|
-
}
|
|
17
|
-
/*** Resolves centered responsive Container dimensions and padding. */
|
|
18
|
-
function resolveContainerStyle(maxWidth, horizontalPadding) {
|
|
19
|
-
return {
|
|
20
|
-
alignSelf: 'center',
|
|
21
|
-
maxWidth,
|
|
22
|
-
paddingLeft: horizontalPadding,
|
|
23
|
-
paddingRight: horizontalPadding,
|
|
24
|
-
width: '100%',
|
|
25
|
-
};
|
|
26
|
-
}
|
|
27
|
-
const styles = StyleSheet.create({ fullWidth: { width: '100%' } });
|
|
28
|
-
//# sourceMappingURL=Container.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Container.js","sourceRoot":"","sources":["../../../../../src/features/layout/adapters/inbound/Container.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,IAAI,EAAkB,MAAM,cAAc,CAAC;AAEhE,OAAO,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACtF,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAE1D,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAClE,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,uEAAuE;AACvE,MAAM,UAAU,SAAS,CAAC,EACxB,QAAQ,EACR,QAAQ,GAAG,EAAE,IAAI,EAAE,MAAM,CAAC,gBAAgB,EAAE,EAAE,EAAE,IAAI,EAAE,EACtD,EAAE,GAAG,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EACjC,GAAG,KAAK,EACO;IACf,MAAM,EAAE,KAAK,EAAE,GAAG,QAAQ,EAAE,CAAC;IAC7B,MAAM,EAAE,UAAU,EAAE,GAAG,oBAAoB,EAAE,CAAC;IAC9C,MAAM,cAAc,GAAG,iBAAiB,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;IAC/D,MAAM,QAAQ,GAAG,cAAc,CAAC,KAAK,EAAE,iBAAiB,CAAC,EAAE,EAAE,UAAU,CAAC,CAAC,CAAC;IAE1E,OAAO,CACL,CAAC,GAAG,CAAC,IAAI,KAAK,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAClE;MAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,qBAAqB,CAAC,cAAc,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,IAAI,CAChF;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC;AAED,sEAAsE;AACtE,SAAS,qBAAqB,CAC5B,QAA4B,EAC5B,iBAAqC;IAErC,OAAO;QACL,SAAS,EAAE,QAAQ;QACnB,QAAQ;QACR,WAAW,EAAE,iBAAiB;QAC9B,YAAY,EAAE,iBAAiB;QAC/B,KAAK,EAAE,MAAM;KACd,CAAC;AACJ,CAAC;AAED,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC,EAAE,SAAS,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,CAAC,CAAC","sourcesContent":["import React from 'react';\nimport { StyleSheet, View, type ViewStyle } from 'react-native';\n\nimport { resolveResponsive, useResponsiveRuntime } from '../../../../core/responsive';\nimport { useTheme } from '../../../../theme/ThemeContext';\nimport type { ContainerProps } from '../../../../types/layout';\nimport { resolveSpacing } from '../../../../utils/resolveSpacing';\nimport { Box } from './Box';\n\n/*** Centers responsive content inside a configurable maximum width. */\nexport function Container({\n children,\n maxWidth = { base: Number.MAX_SAFE_INTEGER, lg: 1120 },\n px = { base: 16, md: 24, lg: 32 },\n ...props\n}: ContainerProps) {\n const { theme } = useTheme();\n const { breakpoint } = useResponsiveRuntime();\n const activeMaxWidth = resolveResponsive(maxWidth, breakpoint);\n const activePx = resolveSpacing(theme, resolveResponsive(px, breakpoint));\n\n return (\n <Box {...props} width=\"100%\" style={[styles.fullWidth, props.style]}>\n <View style={resolveContainerStyle(activeMaxWidth, activePx)}>{children}</View>\n </Box>\n );\n}\n\n/*** Resolves centered responsive Container dimensions and padding. */\nfunction resolveContainerStyle(\n maxWidth: number | undefined,\n horizontalPadding: number | undefined,\n): ViewStyle {\n return {\n alignSelf: 'center',\n maxWidth,\n paddingLeft: horizontalPadding,\n paddingRight: horizontalPadding,\n width: '100%',\n };\n}\n\nconst styles = StyleSheet.create({ fullWidth: { width: '100%' } });\n"]}
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import type React from 'react';
|
|
2
|
-
import type { StackProps } from '../../../../types/layout';
|
|
3
|
-
/*** Stacks authored children directly along a responsive flex direction. */
|
|
4
|
-
export declare function Stack({ children, direction, gap, align, justify, wrap, ...props }: StackProps): React.JSX.Element;
|
|
5
|
-
//# sourceMappingURL=Stack.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Stack.d.ts","sourceRoot":"","sources":["../../../../../src/features/layout/adapters/inbound/Stack.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAI3D,4EAA4E;AAC5E,wBAAgB,KAAK,CAAC,EACpB,QAAQ,EACR,SAAoB,EACpB,GAAO,EACP,KAAK,EACL,OAAO,EACP,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,UAAU,qBA0BZ"}
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
import { resolveResponsive, useResponsiveRuntime } from '../../../../core/responsive';
|
|
2
|
-
import { useTheme } from '../../../../theme/ThemeContext';
|
|
3
|
-
import { resolveSpacing } from '../../../../utils/resolveSpacing';
|
|
4
|
-
import { Box } from './Box';
|
|
5
|
-
/*** Stacks authored children directly along a responsive flex direction. */
|
|
6
|
-
export function Stack({ children, direction = 'column', gap = 0, align, justify, wrap, ...props }) {
|
|
7
|
-
const { theme } = useTheme();
|
|
8
|
-
const { breakpoint } = useResponsiveRuntime();
|
|
9
|
-
const activeDirection = resolveResponsive(direction, breakpoint) ?? 'column';
|
|
10
|
-
const activeGap = resolveSpacing(theme, resolveResponsive(gap, breakpoint)) ?? 0;
|
|
11
|
-
const activeAlign = resolveResponsive(align, breakpoint);
|
|
12
|
-
const activeJustify = resolveResponsive(justify, breakpoint);
|
|
13
|
-
const activeWrap = resolveResponsive(wrap, breakpoint);
|
|
14
|
-
return (<Box {...props} style={[
|
|
15
|
-
{
|
|
16
|
-
flexDirection: activeDirection,
|
|
17
|
-
gap: activeGap,
|
|
18
|
-
alignItems: activeAlign,
|
|
19
|
-
justifyContent: activeJustify,
|
|
20
|
-
flexWrap: activeWrap,
|
|
21
|
-
},
|
|
22
|
-
props.style,
|
|
23
|
-
]}>
|
|
24
|
-
{children}
|
|
25
|
-
</Box>);
|
|
26
|
-
}
|
|
27
|
-
//# sourceMappingURL=Stack.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Stack.js","sourceRoot":"","sources":["../../../../../src/features/layout/adapters/inbound/Stack.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACtF,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAE1D,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAClE,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,4EAA4E;AAC5E,MAAM,UAAU,KAAK,CAAC,EACpB,QAAQ,EACR,SAAS,GAAG,QAAQ,EACpB,GAAG,GAAG,CAAC,EACP,KAAK,EACL,OAAO,EACP,IAAI,EACJ,GAAG,KAAK,EACG;IACX,MAAM,EAAE,KAAK,EAAE,GAAG,QAAQ,EAAE,CAAC;IAC7B,MAAM,EAAE,UAAU,EAAE,GAAG,oBAAoB,EAAE,CAAC;IAC9C,MAAM,eAAe,GAAG,iBAAiB,CAAC,SAAS,EAAE,UAAU,CAAC,IAAI,QAAQ,CAAC;IAC7E,MAAM,SAAS,GAAG,cAAc,CAAC,KAAK,EAAE,iBAAiB,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,IAAI,CAAC,CAAC;IACjF,MAAM,WAAW,GAAG,iBAAiB,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;IACzD,MAAM,aAAa,GAAG,iBAAiB,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC;IAC7D,MAAM,UAAU,GAAG,iBAAiB,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC;IAEvD,OAAO,CACL,CAAC,GAAG,CACF,IAAI,KAAK,CAAC,CACV,KAAK,CAAC,CAAC;YACL;gBACE,aAAa,EAAE,eAAe;gBAC9B,GAAG,EAAE,SAAS;gBACd,UAAU,EAAE,WAAW;gBACvB,cAAc,EAAE,aAAa;gBAC7B,QAAQ,EAAE,UAAU;aACrB;YACD,KAAK,CAAC,KAAK;SACZ,CAAC,CAEF;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC","sourcesContent":["import type React from 'react';\n\nimport { resolveResponsive, useResponsiveRuntime } from '../../../../core/responsive';\nimport { useTheme } from '../../../../theme/ThemeContext';\nimport type { StackProps } from '../../../../types/layout';\nimport { resolveSpacing } from '../../../../utils/resolveSpacing';\nimport { Box } from './Box';\n\n/*** Stacks authored children directly along a responsive flex direction. */\nexport function Stack({\n children,\n direction = 'column',\n gap = 0,\n align,\n justify,\n wrap,\n ...props\n}: StackProps) {\n const { theme } = useTheme();\n const { breakpoint } = useResponsiveRuntime();\n const activeDirection = resolveResponsive(direction, breakpoint) ?? 'column';\n const activeGap = resolveSpacing(theme, resolveResponsive(gap, breakpoint)) ?? 0;\n const activeAlign = resolveResponsive(align, breakpoint);\n const activeJustify = resolveResponsive(justify, breakpoint);\n const activeWrap = resolveResponsive(wrap, breakpoint);\n\n return (\n <Box\n {...props}\n style={[\n {\n flexDirection: activeDirection,\n gap: activeGap,\n alignItems: activeAlign,\n justifyContent: activeJustify,\n flexWrap: activeWrap,\n },\n props.style,\n ]}\n >\n {children}\n </Box>\n );\n}\n"]}
|
package/dist/layout/AppBar.d.ts
DELETED
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { type StyleProp, type ViewStyle } from 'react-native';
|
|
3
|
-
import { type BoxProps } from '../features/layout/public';
|
|
4
|
-
export interface AppBarProps extends Omit<BoxProps, 'children'> {
|
|
5
|
-
leading?: React.ReactNode;
|
|
6
|
-
trailing?: React.ReactNode;
|
|
7
|
-
children?: React.ReactNode;
|
|
8
|
-
safeAreaTop?: boolean;
|
|
9
|
-
divider?: boolean;
|
|
10
|
-
contentStyle?: StyleProp<ViewStyle>;
|
|
11
|
-
}
|
|
12
|
-
export declare function AppBar({ leading, trailing, children, safeAreaTop, divider, contentStyle, bg, style, ...props }: AppBarProps): React.JSX.Element;
|
|
13
|
-
//# sourceMappingURL=AppBar.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"AppBar.d.ts","sourceRoot":"","sources":["../../src/layout/AppBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,SAAS,EAAQ,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAGpE,OAAO,EAAO,KAAK,QAAQ,EAAW,MAAM,2BAA2B,CAAC;AAGxE,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC;IAC7D,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACrC;AAED,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"}
|
package/dist/layout/AppBar.js
DELETED
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { View } from 'react-native';
|
|
3
|
-
import { SafeAreaInsetsContext } from 'react-native-safe-area-context';
|
|
4
|
-
import { Box, Divider } from '../features/layout/public';
|
|
5
|
-
import { useTheme } from '../theme/ThemeContext';
|
|
6
|
-
export function AppBar({ leading, trailing, children, safeAreaTop = true, divider = false, contentStyle, bg, style, ...props }) {
|
|
7
|
-
const { theme } = useTheme();
|
|
8
|
-
const insets = React.use(SafeAreaInsetsContext);
|
|
9
|
-
const topInset = safeAreaTop ? (insets?.top ?? 0) : 0;
|
|
10
|
-
const safeAreaStyle = topInset === 0 ? undefined : { paddingTop: topInset };
|
|
11
|
-
return (<Box {...props} bg={bg ?? theme.semantics.surface.default} style={style}>
|
|
12
|
-
<View style={safeAreaStyle}>
|
|
13
|
-
<View style={[
|
|
14
|
-
{
|
|
15
|
-
minHeight: 56,
|
|
16
|
-
flexDirection: 'row',
|
|
17
|
-
alignItems: 'center',
|
|
18
|
-
paddingHorizontal: theme.spacing.m,
|
|
19
|
-
},
|
|
20
|
-
contentStyle,
|
|
21
|
-
]}>
|
|
22
|
-
{leading ? (<View style={{ marginRight: theme.spacing.s, flexShrink: 0 }}>{leading}</View>) : null}
|
|
23
|
-
<View style={{ flex: 1, minWidth: 0 }}>{children}</View>
|
|
24
|
-
{trailing ? (<View style={{ marginLeft: theme.spacing.s, flexShrink: 0 }}>{trailing}</View>) : null}
|
|
25
|
-
</View>
|
|
26
|
-
{divider ? <Divider color={theme.semantics.neutral.divider} thickness={1}/> : null}
|
|
27
|
-
</View>
|
|
28
|
-
</Box>);
|
|
29
|
-
}
|
|
30
|
-
//# sourceMappingURL=AppBar.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"AppBar.js","sourceRoot":"","sources":["../../src/layout/AppBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAkB,IAAI,EAAkB,MAAM,cAAc,CAAC;AACpE,OAAO,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAEvE,OAAO,EAAE,GAAG,EAAiB,OAAO,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAWjD,MAAM,UAAU,MAAM,CAAC,EACrB,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,WAAW,GAAG,IAAI,EAClB,OAAO,GAAG,KAAK,EACf,YAAY,EACZ,EAAE,EACF,KAAK,EACL,GAAG,KAAK,EACI;IACZ,MAAM,EAAE,KAAK,EAAE,GAAG,QAAQ,EAAE,CAAC;IAC7B,MAAM,MAAM,GAAG,KAAK,CAAC,GAAG,CAAC,qBAAqB,CAAC,CAAC;IAChD,MAAM,QAAQ,GAAG,WAAW,CAAC,CAAC,CAAC,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACtD,MAAM,aAAa,GACjB,QAAQ,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC;IAExD,OAAO,CACL,CAAC,GAAG,CAAC,IAAI,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,IAAI,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CACtE;MAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,aAAa,CAAC,CACzB;QAAA,CAAC,IAAI,CACH,KAAK,CAAC,CAAC;YACL;gBACE,SAAS,EAAE,EAAE;gBACb,aAAa,EAAE,KAAK;gBACpB,UAAU,EAAE,QAAQ;gBACpB,iBAAiB,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;aACnC;YACD,YAAY;SACb,CAAC,CAEF;UAAA,CAAC,OAAO,CAAC,CAAC,CAAC,CACT,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,EAAE,UAAU,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,EAAE,IAAI,CAAC,CAC/E,CAAC,CAAC,CAAC,IAAI,CACR;UAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,IAAI,CACvD;UAAA,CAAC,QAAQ,CAAC,CAAC,CAAC,CACV,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,EAAE,UAAU,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,IAAI,CAAC,CAC/E,CAAC,CAAC,CAAC,IAAI,CACV;QAAA,EAAE,IAAI,CACN;QAAA,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EAAG,CAAC,CAAC,CAAC,IAAI,CACrF;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC","sourcesContent":["import React from 'react';\nimport { type StyleProp, View, type ViewStyle } from 'react-native';\nimport { SafeAreaInsetsContext } from 'react-native-safe-area-context';\n\nimport { Box, type BoxProps, Divider } from '../features/layout/public';\nimport { useTheme } from '../theme/ThemeContext';\n\nexport interface AppBarProps extends Omit<BoxProps, 'children'> {\n leading?: React.ReactNode;\n trailing?: React.ReactNode;\n children?: React.ReactNode;\n safeAreaTop?: boolean;\n divider?: boolean;\n contentStyle?: StyleProp<ViewStyle>;\n}\n\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 <Box {...props} bg={bg ?? theme.semantics.surface.default} style={style}>\n <View style={safeAreaStyle}>\n <View\n style={[\n {\n minHeight: 56,\n flexDirection: 'row',\n alignItems: 'center',\n paddingHorizontal: theme.spacing.m,\n },\n contentStyle,\n ]}\n >\n {leading ? (\n <View style={{ marginRight: theme.spacing.s, flexShrink: 0 }}>{leading}</View>\n ) : null}\n <View style={{ flex: 1, minWidth: 0 }}>{children}</View>\n {trailing ? (\n <View style={{ marginLeft: theme.spacing.s, flexShrink: 0 }}>{trailing}</View>\n ) : null}\n </View>\n {divider ? <Divider color={theme.semantics.neutral.divider} thickness={1} /> : null}\n </View>\n </Box>\n );\n}\n"]}
|
package/dist/layout/Center.d.ts
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { type BoxProps } from '../features/layout/public';
|
|
3
|
-
export interface CenterProps extends BoxProps {
|
|
4
|
-
axis?: 'horizontal' | 'vertical' | 'both';
|
|
5
|
-
}
|
|
6
|
-
export declare function Center({ axis, style, ...props }: CenterProps): React.JSX.Element;
|
|
7
|
-
//# sourceMappingURL=Center.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Center.d.ts","sourceRoot":"","sources":["../../src/layout/Center.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAE/D,MAAM,WAAW,WAAY,SAAQ,QAAQ;IAC3C,IAAI,CAAC,EAAE,YAAY,GAAG,UAAU,GAAG,MAAM,CAAC;CAC3C;AAED,wBAAgB,MAAM,CAAC,EAAE,IAAa,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,qBAarE"}
|
package/dist/layout/Center.js
DELETED
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { Box } from '../features/layout/public';
|
|
3
|
-
export function Center({ axis = 'both', style, ...props }) {
|
|
4
|
-
return (<Box {...props} style={[
|
|
5
|
-
{
|
|
6
|
-
alignItems: axis === 'both' || axis === 'horizontal' ? 'center' : undefined,
|
|
7
|
-
justifyContent: axis === 'both' || axis === 'vertical' ? 'center' : undefined,
|
|
8
|
-
},
|
|
9
|
-
style,
|
|
10
|
-
]}/>);
|
|
11
|
-
}
|
|
12
|
-
//# sourceMappingURL=Center.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Center.js","sourceRoot":"","sources":["../../src/layout/Center.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,GAAG,EAAiB,MAAM,2BAA2B,CAAC;AAM/D,MAAM,UAAU,MAAM,CAAC,EAAE,IAAI,GAAG,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,EAAe;IACpE,OAAO,CACL,CAAC,GAAG,CACF,IAAI,KAAK,CAAC,CACV,KAAK,CAAC,CAAC;YACL;gBACE,UAAU,EAAE,IAAI,KAAK,MAAM,IAAI,IAAI,KAAK,YAAY,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;gBAC3E,cAAc,EAAE,IAAI,KAAK,MAAM,IAAI,IAAI,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;aAC9E;YACD,KAAK;SACN,CAAC,EACF,CACH,CAAC;AACJ,CAAC","sourcesContent":["import React from 'react';\n\nimport { Box, type BoxProps } from '../features/layout/public';\n\nexport interface CenterProps extends BoxProps {\n axis?: 'horizontal' | 'vertical' | 'both';\n}\n\nexport function Center({ axis = 'both', style, ...props }: CenterProps) {\n return (\n <Box\n {...props}\n style={[\n {\n alignItems: axis === 'both' || axis === 'horizontal' ? 'center' : undefined,\n justifyContent: axis === 'both' || axis === 'vertical' ? 'center' : undefined,\n },\n style,\n ]}\n />\n );\n}\n"]}
|
package/dist/layout/Inline.d.ts
DELETED
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { type StackProps } from '../features/layout/public';
|
|
3
|
-
export type InlineProps = Omit<StackProps, 'direction'>;
|
|
4
|
-
export declare function Inline({ wrap, align, ...props }: InlineProps): React.JSX.Element;
|
|
5
|
-
//# sourceMappingURL=Inline.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Inline.d.ts","sourceRoot":"","sources":["../../src/layout/Inline.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAEnE,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,UAAU,EAAE,WAAW,CAAC,CAAC;AAExD,wBAAgB,MAAM,CAAC,EAAE,IAAa,EAAE,KAAgB,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,qBAEhF"}
|
package/dist/layout/Inline.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Inline.js","sourceRoot":"","sources":["../../src/layout/Inline.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,KAAK,EAAmB,MAAM,2BAA2B,CAAC;AAInE,MAAM,UAAU,MAAM,CAAC,EAAE,IAAI,GAAG,MAAM,EAAE,KAAK,GAAG,QAAQ,EAAE,GAAG,KAAK,EAAe;IAC/E,OAAO,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,EAAG,CAAC;AACxE,CAAC","sourcesContent":["import React from 'react';\n\nimport { Stack, type StackProps } from '../features/layout/public';\n\nexport type InlineProps = Omit<StackProps, 'direction'>;\n\nexport function Inline({ wrap = 'wrap', align = 'center', ...props }: InlineProps) {\n return <Stack {...props} align={align} direction=\"row\" wrap={wrap} />;\n}\n"]}
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { type ScrollViewProps as ReactNativeScrollViewProps, type StyleProp, type ViewStyle } from 'react-native';
|
|
3
|
-
import type { BoxStyleProps } from '../types/layout';
|
|
4
|
-
export interface ScrollAreaProps extends BoxStyleProps, Omit<ReactNativeScrollViewProps, 'children' | 'contentContainerStyle' | 'style'> {
|
|
5
|
-
children?: React.ReactNode;
|
|
6
|
-
contentContainerStyle?: StyleProp<ViewStyle>;
|
|
7
|
-
}
|
|
8
|
-
export declare function ScrollArea({ children, contentContainerStyle, p, px, py, pt, pb, pl, pr, m, mx, my, mt, mb, ml, mr, bg, radius, borderWidth, borderColor, width, height, minWidth, maxWidth, minHeight, maxHeight, flex, flexGrow, flexShrink, flexBasis, alignSelf, position, top, bottom, left, right, overflow, zIndex, opacity, style, ...scrollProps }: ScrollAreaProps): React.JSX.Element;
|
|
9
|
-
//# sourceMappingURL=ScrollArea.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ScrollArea.d.ts","sourceRoot":"","sources":["../../src/layout/ScrollArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAEL,KAAK,eAAe,IAAI,0BAA0B,EAClD,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAItB,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAGrD,MAAM,WAAW,eACf,SACE,aAAa,EACb,IAAI,CAAC,0BAA0B,EAAE,UAAU,GAAG,uBAAuB,GAAG,OAAO,CAAC;IAClF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,qBAAqB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9C;AAED,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,qBAAqB,EACrB,CAAC,EACD,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,CAAC,EACD,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,MAAM,EACN,WAAW,EACX,WAAW,EACX,KAAK,EACL,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,UAAU,EACV,SAAS,EACT,SAAS,EACT,QAAQ,EACR,GAAG,EACH,MAAM,EACN,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,MAAM,EACN,OAAO,EACP,KAAK,EACL,GAAG,WAAW,EACf,EAAE,eAAe,qBAoDjB"}
|
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { ScrollView, } from 'react-native';
|
|
3
|
-
import { useResponsiveRuntime } from '../core/responsive';
|
|
4
|
-
import { useTheme } from '../theme/ThemeContext';
|
|
5
|
-
import { resolveBoxStyles } from '../utils/resolveBoxStyles';
|
|
6
|
-
export function ScrollArea({ children, contentContainerStyle, p, px, py, pt, pb, pl, pr, m, mx, my, mt, mb, ml, mr, bg, radius, borderWidth, borderColor, width, height, minWidth, maxWidth, minHeight, maxHeight, flex, flexGrow, flexShrink, flexBasis, alignSelf, position, top, bottom, left, right, overflow, zIndex, opacity, style, ...scrollProps }) {
|
|
7
|
-
const { theme } = useTheme();
|
|
8
|
-
const { breakpoint } = useResponsiveRuntime();
|
|
9
|
-
const resolved = resolveBoxStyles(theme, breakpoint, {
|
|
10
|
-
p,
|
|
11
|
-
px,
|
|
12
|
-
py,
|
|
13
|
-
pt,
|
|
14
|
-
pb,
|
|
15
|
-
pl,
|
|
16
|
-
pr,
|
|
17
|
-
m,
|
|
18
|
-
mx,
|
|
19
|
-
my,
|
|
20
|
-
mt,
|
|
21
|
-
mb,
|
|
22
|
-
ml,
|
|
23
|
-
mr,
|
|
24
|
-
bg,
|
|
25
|
-
radius,
|
|
26
|
-
borderWidth,
|
|
27
|
-
borderColor,
|
|
28
|
-
width,
|
|
29
|
-
height,
|
|
30
|
-
minWidth,
|
|
31
|
-
maxWidth,
|
|
32
|
-
minHeight,
|
|
33
|
-
maxHeight,
|
|
34
|
-
flex,
|
|
35
|
-
flexGrow,
|
|
36
|
-
flexShrink,
|
|
37
|
-
flexBasis,
|
|
38
|
-
alignSelf,
|
|
39
|
-
position,
|
|
40
|
-
top,
|
|
41
|
-
bottom,
|
|
42
|
-
left,
|
|
43
|
-
right,
|
|
44
|
-
overflow,
|
|
45
|
-
zIndex,
|
|
46
|
-
opacity,
|
|
47
|
-
});
|
|
48
|
-
return (<ScrollView {...scrollProps} contentContainerStyle={contentContainerStyle} style={[resolved, style]}>
|
|
49
|
-
{children}
|
|
50
|
-
</ScrollView>);
|
|
51
|
-
}
|
|
52
|
-
//# sourceMappingURL=ScrollArea.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ScrollArea.js","sourceRoot":"","sources":["../../src/layout/ScrollArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACL,UAAU,GAIX,MAAM,cAAc,CAAC;AAEtB,OAAO,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAU7D,MAAM,UAAU,UAAU,CAAC,EACzB,QAAQ,EACR,qBAAqB,EACrB,CAAC,EACD,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,CAAC,EACD,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,MAAM,EACN,WAAW,EACX,WAAW,EACX,KAAK,EACL,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,UAAU,EACV,SAAS,EACT,SAAS,EACT,QAAQ,EACR,GAAG,EACH,MAAM,EACN,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,MAAM,EACN,OAAO,EACP,KAAK,EACL,GAAG,WAAW,EACE;IAChB,MAAM,EAAE,KAAK,EAAE,GAAG,QAAQ,EAAE,CAAC;IAC7B,MAAM,EAAE,UAAU,EAAE,GAAG,oBAAoB,EAAE,CAAC;IAC9C,MAAM,QAAQ,GAAG,gBAAgB,CAAC,KAAK,EAAE,UAAU,EAAE;QACnD,CAAC;QACD,EAAE;QACF,EAAE;QACF,EAAE;QACF,EAAE;QACF,EAAE;QACF,EAAE;QACF,CAAC;QACD,EAAE;QACF,EAAE;QACF,EAAE;QACF,EAAE;QACF,EAAE;QACF,EAAE;QACF,EAAE;QACF,MAAM;QACN,WAAW;QACX,WAAW;QACX,KAAK;QACL,MAAM;QACN,QAAQ;QACR,QAAQ;QACR,SAAS;QACT,SAAS;QACT,IAAI;QACJ,QAAQ;QACR,UAAU;QACV,SAAS;QACT,SAAS;QACT,QAAQ;QACR,GAAG;QACH,MAAM;QACN,IAAI;QACJ,KAAK;QACL,QAAQ;QACR,MAAM;QACN,OAAO;KACR,CAAC,CAAC;IAEH,OAAO,CACL,CAAC,UAAU,CACT,IAAI,WAAW,CAAC,CAChB,qBAAqB,CAAC,CAAC,qBAAqB,CAAC,CAC7C,KAAK,CAAC,CAAC,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC,CAEzB;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,UAAU,CAAC,CACd,CAAC;AACJ,CAAC","sourcesContent":["import React from 'react';\nimport {\n ScrollView,\n type ScrollViewProps as ReactNativeScrollViewProps,\n type StyleProp,\n type ViewStyle,\n} from 'react-native';\n\nimport { useResponsiveRuntime } from '../core/responsive';\nimport { useTheme } from '../theme/ThemeContext';\nimport type { BoxStyleProps } from '../types/layout';\nimport { resolveBoxStyles } from '../utils/resolveBoxStyles';\n\nexport interface ScrollAreaProps\n extends\n BoxStyleProps,\n Omit<ReactNativeScrollViewProps, 'children' | 'contentContainerStyle' | 'style'> {\n children?: React.ReactNode;\n contentContainerStyle?: StyleProp<ViewStyle>;\n}\n\nexport function ScrollArea({\n children,\n contentContainerStyle,\n p,\n px,\n py,\n pt,\n pb,\n pl,\n pr,\n m,\n mx,\n my,\n mt,\n mb,\n ml,\n mr,\n bg,\n radius,\n borderWidth,\n borderColor,\n width,\n height,\n minWidth,\n maxWidth,\n minHeight,\n maxHeight,\n flex,\n flexGrow,\n flexShrink,\n flexBasis,\n alignSelf,\n position,\n top,\n bottom,\n left,\n right,\n overflow,\n zIndex,\n opacity,\n style,\n ...scrollProps\n}: ScrollAreaProps) {\n const { theme } = useTheme();\n const { breakpoint } = useResponsiveRuntime();\n const resolved = resolveBoxStyles(theme, breakpoint, {\n p,\n px,\n py,\n pt,\n pb,\n pl,\n pr,\n m,\n mx,\n my,\n mt,\n mb,\n ml,\n mr,\n bg,\n radius,\n borderWidth,\n borderColor,\n width,\n height,\n minWidth,\n maxWidth,\n minHeight,\n maxHeight,\n flex,\n flexGrow,\n flexShrink,\n flexBasis,\n alignSelf,\n position,\n top,\n bottom,\n left,\n right,\n overflow,\n zIndex,\n opacity,\n });\n\n return (\n <ScrollView\n {...scrollProps}\n contentContainerStyle={contentContainerStyle}\n style={[resolved, style]}\n >\n {children}\n </ScrollView>\n );\n}\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Show.d.ts","sourceRoot":"","sources":["../../src/layout/Show.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAqB,KAAK,UAAU,EAAwB,MAAM,oBAAoB,CAAC;AAE9F,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,wBAAgB,IAAI,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAe,EAAE,EAAE,SAAS,qBAIlE"}
|
package/dist/layout/Show.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Show.js","sourceRoot":"","sources":["../../src/layout/Show.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,iBAAiB,EAAmB,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAQ9F,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, type Responsive, useResponsiveRuntime } from '../core/responsive';\n\nexport interface ShowProps {\n when: Responsive<boolean>;\n children: React.ReactNode;\n fallback?: React.ReactNode;\n}\n\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"]}
|
package/dist/layout/Spacer.d.ts
DELETED
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import type { SpaceValue } from '../types/layout';
|
|
3
|
-
export interface SpacerProps {
|
|
4
|
-
size?: SpaceValue;
|
|
5
|
-
axis?: 'horizontal' | 'vertical' | 'both';
|
|
6
|
-
testID?: string;
|
|
7
|
-
}
|
|
8
|
-
export declare function Spacer({ size, axis, testID }: SpacerProps): React.JSX.Element;
|
|
9
|
-
//# sourceMappingURL=Spacer.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Spacer.d.ts","sourceRoot":"","sources":["../../src/layout/Spacer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,WAAW,WAAW;IAC1B,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,IAAI,CAAC,EAAE,YAAY,GAAG,UAAU,GAAG,MAAM,CAAC;IAC1C,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,MAAM,CAAC,EAAE,IAAU,EAAE,IAAiB,EAAE,MAAM,EAAE,EAAE,WAAW,qBAU5E"}
|
package/dist/layout/Spacer.js
DELETED
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { Box } from '../features/layout/public';
|
|
3
|
-
export function Spacer({ size = 'm', axis = 'vertical', testID }) {
|
|
4
|
-
if (axis === 'horizontal') {
|
|
5
|
-
return <Box testID={testID} width={size}/>;
|
|
6
|
-
}
|
|
7
|
-
if (axis === 'both') {
|
|
8
|
-
return <Box testID={testID} height={size} width={size}/>;
|
|
9
|
-
}
|
|
10
|
-
return <Box testID={testID} height={size}/>;
|
|
11
|
-
}
|
|
12
|
-
//# sourceMappingURL=Spacer.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Spacer.js","sourceRoot":"","sources":["../../src/layout/Spacer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,GAAG,EAAE,MAAM,2BAA2B,CAAC;AAShD,MAAM,UAAU,MAAM,CAAC,EAAE,IAAI,GAAG,GAAG,EAAE,IAAI,GAAG,UAAU,EAAE,MAAM,EAAe;IAC3E,IAAI,IAAI,KAAK,YAAY,EAAE,CAAC;QAC1B,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,EAAG,CAAC;IAC9C,CAAC;IAED,IAAI,IAAI,KAAK,MAAM,EAAE,CAAC;QACpB,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,EAAG,CAAC;IAC5D,CAAC;IAED,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,EAAG,CAAC;AAC/C,CAAC","sourcesContent":["import React from 'react';\n\nimport { Box } from '../features/layout/public';\nimport type { SpaceValue } from '../types/layout';\n\nexport interface SpacerProps {\n size?: SpaceValue;\n axis?: 'horizontal' | 'vertical' | 'both';\n testID?: string;\n}\n\nexport function Spacer({ size = 'm', axis = 'vertical', testID }: SpacerProps) {\n if (axis === 'horizontal') {\n return <Box testID={testID} width={size} />;\n }\n\n if (axis === 'both') {\n return <Box testID={testID} height={size} width={size} />;\n }\n\n return <Box testID={testID} height={size} />;\n}\n"]}
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { type Breakpoint, type Responsive } from '../core/responsive';
|
|
3
|
-
import { type BoxProps } from '../features/layout/public';
|
|
4
|
-
import type { SpaceValue } from '../types/layout';
|
|
5
|
-
type SlotMap = Record<string, React.ReactNode>;
|
|
6
|
-
type TemplateMap = Partial<Record<Breakpoint, string[][]>>;
|
|
7
|
-
type ColumnsMap = Partial<Record<Breakpoint, number[]>>;
|
|
8
|
-
export interface TemplateProps extends Omit<BoxProps, 'children'> {
|
|
9
|
-
slots: SlotMap;
|
|
10
|
-
templates: TemplateMap;
|
|
11
|
-
columns?: ColumnsMap;
|
|
12
|
-
gap?: Responsive<SpaceValue>;
|
|
13
|
-
rowGap?: Responsive<SpaceValue>;
|
|
14
|
-
colGap?: Responsive<SpaceValue>;
|
|
15
|
-
}
|
|
16
|
-
export declare function Template({ slots, templates, columns, gap, rowGap, colGap, ...props }: TemplateProps): React.JSX.Element;
|
|
17
|
-
export {};
|
|
18
|
-
//# sourceMappingURL=Template.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Template.d.ts","sourceRoot":"","sources":["../../src/layout/Template.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EACL,KAAK,UAAU,EAEf,KAAK,UAAU,EAEhB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAE/D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAGlD,KAAK,OAAO,GAAG,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;AAC/C,KAAK,WAAW,GAAG,OAAO,CAAC,MAAM,CAAC,UAAU,EAAE,MAAM,EAAE,EAAE,CAAC,CAAC,CAAC;AAC3D,KAAK,UAAU,GAAG,OAAO,CAAC,MAAM,CAAC,UAAU,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC;AAExD,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC;IAC/D,KAAK,EAAE,OAAO,CAAC;IACf,SAAS,EAAE,WAAW,CAAC;IACvB,OAAO,CAAC,EAAE,UAAU,CAAC;IACrB,GAAG,CAAC,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC;IAChC,MAAM,CAAC,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC;CACjC;AASD,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,SAAS,EACT,OAAO,EACP,GAAO,EACP,MAAM,EACN,MAAM,EACN,GAAG,KAAK,EACT,EAAE,aAAa,qBA2Cf"}
|
package/dist/layout/Template.js
DELETED
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { View } from 'react-native';
|
|
3
|
-
import { resolveResponsive, useResponsiveRuntime, } from '../core/responsive';
|
|
4
|
-
import { Box } from '../features/layout/public';
|
|
5
|
-
import { useTheme } from '../theme/ThemeContext';
|
|
6
|
-
import { resolveSpacing } from '../utils/resolveSpacing';
|
|
7
|
-
function resolveByBreakpointMap(map, breakpoint) {
|
|
8
|
-
return resolveResponsive(map, breakpoint);
|
|
9
|
-
}
|
|
10
|
-
export function Template({ slots, templates, columns, gap = 0, rowGap, colGap, ...props }) {
|
|
11
|
-
const { theme } = useTheme();
|
|
12
|
-
const { breakpoint } = useResponsiveRuntime();
|
|
13
|
-
const resolvedTemplate = resolveByBreakpointMap(templates, breakpoint) ?? [];
|
|
14
|
-
const resolvedColumns = resolveByBreakpointMap(columns, breakpoint);
|
|
15
|
-
const defaultGap = resolveResponsive(gap, breakpoint) ?? 0;
|
|
16
|
-
const rowSpacing = Number(resolveSpacing(theme, resolveResponsive(rowGap, breakpoint) ?? defaultGap) ?? 0);
|
|
17
|
-
const colSpacing = Number(resolveSpacing(theme, resolveResponsive(colGap, breakpoint) ?? defaultGap) ?? 0);
|
|
18
|
-
return (<Box {...props}>
|
|
19
|
-
{resolvedTemplate.map((row, rowIndex) => (<View key={`row-${String(rowIndex)}`} style={{
|
|
20
|
-
flexDirection: 'row',
|
|
21
|
-
marginTop: rowIndex === 0 ? 0 : rowSpacing,
|
|
22
|
-
}}>
|
|
23
|
-
{row.map((slotId, cellIndex) => {
|
|
24
|
-
const weight = resolvedColumns?.[cellIndex] ?? 1;
|
|
25
|
-
const node = slots[slotId];
|
|
26
|
-
return (<View key={`${slotId}-${String(rowIndex)}-${String(cellIndex)}`} style={{
|
|
27
|
-
flex: weight,
|
|
28
|
-
marginLeft: cellIndex === 0 ? 0 : colSpacing,
|
|
29
|
-
}}>
|
|
30
|
-
{node}
|
|
31
|
-
</View>);
|
|
32
|
-
})}
|
|
33
|
-
</View>))}
|
|
34
|
-
</Box>);
|
|
35
|
-
}
|
|
36
|
-
//# sourceMappingURL=Template.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Template.js","sourceRoot":"","sources":["../../src/layout/Template.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,OAAO,EAEL,iBAAiB,EAEjB,oBAAoB,GACrB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,GAAG,EAAiB,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAezD,SAAS,sBAAsB,CAC7B,GAA+C,EAC/C,UAAsB;IAEtB,OAAO,iBAAiB,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC;AAC5C,CAAC;AAED,MAAM,UAAU,QAAQ,CAAC,EACvB,KAAK,EACL,SAAS,EACT,OAAO,EACP,GAAG,GAAG,CAAC,EACP,MAAM,EACN,MAAM,EACN,GAAG,KAAK,EACM;IACd,MAAM,EAAE,KAAK,EAAE,GAAG,QAAQ,EAAE,CAAC;IAC7B,MAAM,EAAE,UAAU,EAAE,GAAG,oBAAoB,EAAE,CAAC;IAE9C,MAAM,gBAAgB,GAAG,sBAAsB,CAAC,SAAS,EAAE,UAAU,CAAC,IAAI,EAAE,CAAC;IAC7E,MAAM,eAAe,GAAG,sBAAsB,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC;IACpE,MAAM,UAAU,GAAG,iBAAiB,CAAC,GAAG,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC;IAC3D,MAAM,UAAU,GAAG,MAAM,CACvB,cAAc,CAAC,KAAK,EAAE,iBAAiB,CAAC,MAAM,EAAE,UAAU,CAAC,IAAI,UAAU,CAAC,IAAI,CAAC,CAChF,CAAC;IACF,MAAM,UAAU,GAAG,MAAM,CACvB,cAAc,CAAC,KAAK,EAAE,iBAAiB,CAAC,MAAM,EAAE,UAAU,CAAC,IAAI,UAAU,CAAC,IAAI,CAAC,CAChF,CAAC;IAEF,OAAO,CACL,CAAC,GAAG,CAAC,IAAI,KAAK,CAAC,CACb;MAAA,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,QAAQ,EAAE,EAAE,CAAC,CACvC,CAAC,IAAI,CACH,GAAG,CAAC,CAAC,OAAO,MAAM,CAAC,QAAQ,CAAC,EAAE,CAAC,CAC/B,KAAK,CAAC,CAAC;gBACL,aAAa,EAAE,KAAK;gBACpB,SAAS,EAAE,QAAQ,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,UAAU;aAC3C,CAAC,CAEF;UAAA,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,SAAS,EAAE,EAAE;gBAC7B,MAAM,MAAM,GAAG,eAAe,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;gBACjD,MAAM,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;gBAC3B,OAAO,CACL,CAAC,IAAI,CACH,GAAG,CAAC,CAAC,GAAG,MAAM,IAAI,MAAM,CAAC,QAAQ,CAAC,IAAI,MAAM,CAAC,SAAS,CAAC,EAAE,CAAC,CAC1D,KAAK,CAAC,CAAC;wBACL,IAAI,EAAE,MAAM;wBACZ,UAAU,EAAE,SAAS,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,UAAU;qBAC7C,CAAC,CAEF;gBAAA,CAAC,IAAI,CACP;cAAA,EAAE,IAAI,CAAC,CACR,CAAC;YACJ,CAAC,CAAC,CACJ;QAAA,EAAE,IAAI,CAAC,CACR,CAAC,CACJ;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC","sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\n\nimport {\n type Breakpoint,\n resolveResponsive,\n type Responsive,\n useResponsiveRuntime,\n} from '../core/responsive';\nimport { Box, type BoxProps } from '../features/layout/public';\nimport { useTheme } from '../theme/ThemeContext';\nimport type { SpaceValue } from '../types/layout';\nimport { resolveSpacing } from '../utils/resolveSpacing';\n\ntype SlotMap = Record<string, React.ReactNode>;\ntype TemplateMap = Partial<Record<Breakpoint, string[][]>>;\ntype ColumnsMap = Partial<Record<Breakpoint, number[]>>;\n\nexport interface TemplateProps extends Omit<BoxProps, 'children'> {\n slots: SlotMap;\n templates: TemplateMap;\n columns?: ColumnsMap;\n gap?: Responsive<SpaceValue>;\n rowGap?: Responsive<SpaceValue>;\n colGap?: Responsive<SpaceValue>;\n}\n\nfunction resolveByBreakpointMap<T>(\n map: Partial<Record<Breakpoint, T>> | undefined,\n breakpoint: Breakpoint,\n): T | undefined {\n return resolveResponsive(map, breakpoint);\n}\n\nexport function Template({\n slots,\n templates,\n columns,\n gap = 0,\n rowGap,\n colGap,\n ...props\n}: TemplateProps) {\n const { theme } = useTheme();\n const { breakpoint } = useResponsiveRuntime();\n\n const resolvedTemplate = resolveByBreakpointMap(templates, breakpoint) ?? [];\n const resolvedColumns = resolveByBreakpointMap(columns, breakpoint);\n const defaultGap = resolveResponsive(gap, breakpoint) ?? 0;\n const rowSpacing = Number(\n resolveSpacing(theme, resolveResponsive(rowGap, breakpoint) ?? defaultGap) ?? 0,\n );\n const colSpacing = Number(\n resolveSpacing(theme, resolveResponsive(colGap, breakpoint) ?? defaultGap) ?? 0,\n );\n\n return (\n <Box {...props}>\n {resolvedTemplate.map((row, rowIndex) => (\n <View\n key={`row-${String(rowIndex)}`}\n style={{\n flexDirection: 'row',\n marginTop: rowIndex === 0 ? 0 : rowSpacing,\n }}\n >\n {row.map((slotId, cellIndex) => {\n const weight = resolvedColumns?.[cellIndex] ?? 1;\n const node = slots[slotId];\n return (\n <View\n key={`${slotId}-${String(rowIndex)}-${String(cellIndex)}`}\n style={{\n flex: weight,\n marginLeft: cellIndex === 0 ? 0 : colSpacing,\n }}\n >\n {node}\n </View>\n );\n })}\n </View>\n ))}\n </Box>\n );\n}\n"]}
|
package/dist/layout/index.d.ts
DELETED
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
export type { AppBarProps } from './AppBar';
|
|
2
|
-
export { AppBar } from './AppBar';
|
|
3
|
-
export type { CenterProps } from './Center';
|
|
4
|
-
export { Center } from './Center';
|
|
5
|
-
export type { InlineProps } from './Inline';
|
|
6
|
-
export { Inline } from './Inline';
|
|
7
|
-
export type { ScrollAreaProps } from './ScrollArea';
|
|
8
|
-
export { ScrollArea } from './ScrollArea';
|
|
9
|
-
export type { ShowProps } from './Show';
|
|
10
|
-
export { Show } from './Show';
|
|
11
|
-
export type { SpacerProps } from './Spacer';
|
|
12
|
-
export { Spacer } from './Spacer';
|
|
13
|
-
export type { TemplateProps } from './Template';
|
|
14
|
-
export { Template } from './Template';
|
|
15
|
-
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/layout/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC"}
|
package/dist/layout/index.js
DELETED
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
export { AppBar } from './AppBar';
|
|
2
|
-
export { Center } from './Center';
|
|
3
|
-
export { Inline } from './Inline';
|
|
4
|
-
export { ScrollArea } from './ScrollArea';
|
|
5
|
-
export { Show } from './Show';
|
|
6
|
-
export { Spacer } from './Spacer';
|
|
7
|
-
export { Template } from './Template';
|
|
8
|
-
//# sourceMappingURL=index.js.map
|
package/dist/layout/index.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/layout/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC","sourcesContent":["export type { AppBarProps } from './AppBar';\nexport { AppBar } from './AppBar';\nexport type { CenterProps } from './Center';\nexport { Center } from './Center';\nexport type { InlineProps } from './Inline';\nexport { Inline } from './Inline';\nexport type { ScrollAreaProps } from './ScrollArea';\nexport { ScrollArea } from './ScrollArea';\nexport type { ShowProps } from './Show';\nexport { Show } from './Show';\nexport type { SpacerProps } from './Spacer';\nexport { Spacer } from './Spacer';\nexport type { TemplateProps } from './Template';\nexport { Template } from './Template';\n"]}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import type { ViewStyle } from 'react-native';
|
|
2
|
-
import type { Breakpoint } from '../core/responsive/types';
|
|
3
|
-
import type { SurfaceTheme } from '../theme/types';
|
|
4
|
-
import type { BoxStyleProps } from '../types/layout';
|
|
5
|
-
/*** Resolves responsive Box style props into one React Native view style. */
|
|
6
|
-
export declare function resolveBoxStyles(theme: SurfaceTheme, breakpoint: Breakpoint, props: BoxStyleProps): ViewStyle;
|
|
7
|
-
//# sourceMappingURL=resolveBoxStyles.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"resolveBoxStyles.d.ts","sourceRoot":"","sources":["../../src/utils/resolveBoxStyles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAG9C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAE3D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,KAAK,EAAE,aAAa,EAAc,MAAM,iBAAiB,CAAC;AAGjE,6EAA6E;AAC7E,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,YAAY,EACnB,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,aAAa,GACnB,SAAS,CAQX"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"resolveBoxStyles.js","sourceRoot":"","sources":["../../src/utils/resolveBoxStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import type { ViewStyle } from 'react-native';\n\nimport { resolveResponsive } from '../core/responsive/resolve';\nimport type { Breakpoint } from '../core/responsive/types';\nimport { resolveToken } from '../theme/resolveToken';\nimport type { SurfaceTheme } from '../theme/types';\nimport type { BoxStyleProps, ColorValue } from '../types/layout';\nimport { resolveSpacing } from './resolveSpacing';\n\n/*** Resolves responsive Box style props into one React Native view style. */\nexport function resolveBoxStyles(\n theme: SurfaceTheme,\n breakpoint: Breakpoint,\n props: BoxStyleProps,\n): ViewStyle {\n return {\n elevation: 0,\n ...resolveSpacingStyles(theme, breakpoint, props),\n ...resolveVisualStyles(theme, breakpoint, props),\n ...resolveDimensionStyles(theme, breakpoint, props),\n ...resolveLayoutStyles(breakpoint, props),\n };\n}\n\n/*** Resolves padding and margin styles from responsive spacing props. */\nfunction resolveSpacingStyles(\n theme: SurfaceTheme,\n breakpoint: Breakpoint,\n props: BoxStyleProps,\n): ViewStyle {\n return {\n padding: resolveSpacing(theme, resolveResponsive(props.p, breakpoint)),\n paddingHorizontal: resolveSpacing(theme, resolveResponsive(props.px, breakpoint)),\n paddingVertical: resolveSpacing(theme, resolveResponsive(props.py, breakpoint)),\n paddingTop: resolveSpacing(theme, resolveResponsive(props.pt, breakpoint)),\n paddingBottom: resolveSpacing(theme, resolveResponsive(props.pb, breakpoint)),\n paddingLeft: resolveSpacing(theme, resolveResponsive(props.pl, breakpoint)),\n paddingRight: resolveSpacing(theme, resolveResponsive(props.pr, breakpoint)),\n margin: resolveSpacing(theme, resolveResponsive(props.m, breakpoint)),\n marginHorizontal: resolveSpacing(theme, resolveResponsive(props.mx, breakpoint)),\n marginVertical: resolveSpacing(theme, resolveResponsive(props.my, breakpoint)),\n marginTop: resolveSpacing(theme, resolveResponsive(props.mt, breakpoint)),\n marginBottom: resolveSpacing(theme, resolveResponsive(props.mb, breakpoint)),\n marginLeft: resolveSpacing(theme, resolveResponsive(props.ml, breakpoint)),\n marginRight: resolveSpacing(theme, resolveResponsive(props.mr, breakpoint)),\n };\n}\n\n/*** Resolves background, radius, and border styles. */\nfunction resolveVisualStyles(\n theme: SurfaceTheme,\n breakpoint: Breakpoint,\n props: BoxStyleProps,\n): ViewStyle {\n return {\n backgroundColor: resolveColor(theme, resolveResponsive(props.bg, breakpoint)),\n borderRadius: resolveRadius(theme, resolveResponsive(props.radius, breakpoint)),\n borderWidth: resolveResponsive(props.borderWidth, breakpoint),\n borderColor: resolveColor(theme, resolveResponsive(props.borderColor, breakpoint)),\n };\n}\n\n/*** Resolves responsive dimension props through spacing tokens. */\nfunction resolveDimensionStyles(\n theme: SurfaceTheme,\n breakpoint: Breakpoint,\n props: BoxStyleProps,\n): ViewStyle {\n return {\n width: resolveDimension(\n theme,\n resolveResponsive(props.width, breakpoint),\n ) as ViewStyle['width'],\n height: resolveDimension(\n theme,\n resolveResponsive(props.height, breakpoint),\n ) as ViewStyle['height'],\n minWidth: resolveDimension(\n theme,\n resolveResponsive(props.minWidth, breakpoint),\n ) as ViewStyle['minWidth'],\n maxWidth: resolveDimension(\n theme,\n resolveResponsive(props.maxWidth, breakpoint),\n ) as ViewStyle['maxWidth'],\n minHeight: resolveDimension(\n theme,\n resolveResponsive(props.minHeight, breakpoint),\n ) as ViewStyle['minHeight'],\n maxHeight: resolveDimension(\n theme,\n resolveResponsive(props.maxHeight, breakpoint),\n ) as ViewStyle['maxHeight'],\n };\n}\n\n/*** Resolves responsive flex, positioning, and visibility styles. */\nfunction resolveLayoutStyles(breakpoint: Breakpoint, props: BoxStyleProps): ViewStyle {\n return {\n flex: resolveResponsive(props.flex, breakpoint),\n flexGrow: resolveResponsive(props.flexGrow, breakpoint),\n flexShrink: resolveResponsive(props.flexShrink, breakpoint),\n flexBasis: resolveResponsive(props.flexBasis, breakpoint) as ViewStyle['flexBasis'],\n alignSelf: resolveResponsive(props.alignSelf, breakpoint),\n position: resolveResponsive(props.position, breakpoint),\n top: resolveResponsive(props.top, breakpoint),\n bottom: resolveResponsive(props.bottom, breakpoint),\n left: resolveResponsive(props.left, breakpoint),\n right: resolveResponsive(props.right, breakpoint),\n overflow: resolveResponsive(props.overflow, breakpoint),\n zIndex: resolveResponsive(props.zIndex, breakpoint),\n opacity: resolveResponsive(props.opacity, breakpoint),\n };\n}\n\n/*** Resolves a Surface radius token or raw number. */\nfunction resolveRadius(\n theme: SurfaceTheme,\n value: number | keyof SurfaceTheme['radii'] | undefined,\n): number | undefined {\n return resolveToken(theme.radii, value);\n}\n\n/*** Resolves a Surface color token while preserving arbitrary color strings. */\nfunction resolveColor(theme: SurfaceTheme, value: ColorValue | undefined): string | undefined {\n return resolveToken(theme.colors, value);\n}\n\n/*** Resolves spacing-token dimensions while preserving raw dimension strings. */\nfunction resolveDimension(\n theme: SurfaceTheme,\n value: number | string | undefined,\n): number | string | undefined {\n return resolveToken(theme.spacing, value);\n}\n"]}
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { StyleSheet, View, type ViewStyle } from 'react-native';
|
|
3
|
-
|
|
4
|
-
import { resolveResponsive, useResponsiveRuntime } from '../../../../core/responsive';
|
|
5
|
-
import { useTheme } from '../../../../theme/ThemeContext';
|
|
6
|
-
import type { ContainerProps } from '../../../../types/layout';
|
|
7
|
-
import { resolveSpacing } from '../../../../utils/resolveSpacing';
|
|
8
|
-
import { Box } from './Box';
|
|
9
|
-
|
|
10
|
-
/*** Centers responsive content inside a configurable maximum width. */
|
|
11
|
-
export function Container({
|
|
12
|
-
children,
|
|
13
|
-
maxWidth = { base: Number.MAX_SAFE_INTEGER, lg: 1120 },
|
|
14
|
-
px = { base: 16, md: 24, lg: 32 },
|
|
15
|
-
...props
|
|
16
|
-
}: ContainerProps) {
|
|
17
|
-
const { theme } = useTheme();
|
|
18
|
-
const { breakpoint } = useResponsiveRuntime();
|
|
19
|
-
const activeMaxWidth = resolveResponsive(maxWidth, breakpoint);
|
|
20
|
-
const activePx = resolveSpacing(theme, resolveResponsive(px, breakpoint));
|
|
21
|
-
|
|
22
|
-
return (
|
|
23
|
-
<Box {...props} width="100%" style={[styles.fullWidth, props.style]}>
|
|
24
|
-
<View style={resolveContainerStyle(activeMaxWidth, activePx)}>{children}</View>
|
|
25
|
-
</Box>
|
|
26
|
-
);
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
/*** Resolves centered responsive Container dimensions and padding. */
|
|
30
|
-
function resolveContainerStyle(
|
|
31
|
-
maxWidth: number | undefined,
|
|
32
|
-
horizontalPadding: number | undefined,
|
|
33
|
-
): ViewStyle {
|
|
34
|
-
return {
|
|
35
|
-
alignSelf: 'center',
|
|
36
|
-
maxWidth,
|
|
37
|
-
paddingLeft: horizontalPadding,
|
|
38
|
-
paddingRight: horizontalPadding,
|
|
39
|
-
width: '100%',
|
|
40
|
-
};
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
const styles = StyleSheet.create({ fullWidth: { width: '100%' } });
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { readFile } from 'node:fs/promises';
|
|
2
|
-
|
|
3
|
-
import { describe, expect, it } from 'bun:test';
|
|
4
|
-
|
|
5
|
-
describe('Stack layout contract', () => {
|
|
6
|
-
it('keeps authored children as direct flex items and applies spacing through gap', async () => {
|
|
7
|
-
const source = await readFile(new URL('./Stack.tsx', import.meta.url), 'utf8');
|
|
8
|
-
expect(source).toContain('gap: activeGap');
|
|
9
|
-
expect(source).toContain('{children}');
|
|
10
|
-
expect(source).not.toContain("from 'react-native'");
|
|
11
|
-
expect(source).not.toContain('React.Children');
|
|
12
|
-
});
|
|
13
|
-
});
|
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
import type React from 'react';
|
|
2
|
-
|
|
3
|
-
import { resolveResponsive, useResponsiveRuntime } from '../../../../core/responsive';
|
|
4
|
-
import { useTheme } from '../../../../theme/ThemeContext';
|
|
5
|
-
import type { StackProps } from '../../../../types/layout';
|
|
6
|
-
import { resolveSpacing } from '../../../../utils/resolveSpacing';
|
|
7
|
-
import { Box } from './Box';
|
|
8
|
-
|
|
9
|
-
/*** Stacks authored children directly along a responsive flex direction. */
|
|
10
|
-
export function Stack({
|
|
11
|
-
children,
|
|
12
|
-
direction = 'column',
|
|
13
|
-
gap = 0,
|
|
14
|
-
align,
|
|
15
|
-
justify,
|
|
16
|
-
wrap,
|
|
17
|
-
...props
|
|
18
|
-
}: StackProps) {
|
|
19
|
-
const { theme } = useTheme();
|
|
20
|
-
const { breakpoint } = useResponsiveRuntime();
|
|
21
|
-
const activeDirection = resolveResponsive(direction, breakpoint) ?? 'column';
|
|
22
|
-
const activeGap = resolveSpacing(theme, resolveResponsive(gap, breakpoint)) ?? 0;
|
|
23
|
-
const activeAlign = resolveResponsive(align, breakpoint);
|
|
24
|
-
const activeJustify = resolveResponsive(justify, breakpoint);
|
|
25
|
-
const activeWrap = resolveResponsive(wrap, breakpoint);
|
|
26
|
-
|
|
27
|
-
return (
|
|
28
|
-
<Box
|
|
29
|
-
{...props}
|
|
30
|
-
style={[
|
|
31
|
-
{
|
|
32
|
-
flexDirection: activeDirection,
|
|
33
|
-
gap: activeGap,
|
|
34
|
-
alignItems: activeAlign,
|
|
35
|
-
justifyContent: activeJustify,
|
|
36
|
-
flexWrap: activeWrap,
|
|
37
|
-
},
|
|
38
|
-
props.style,
|
|
39
|
-
]}
|
|
40
|
-
>
|
|
41
|
-
{children}
|
|
42
|
-
</Box>
|
|
43
|
-
);
|
|
44
|
-
}
|