@ankhorage/surface 1.2.0 → 1.3.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 +8 -0
- package/dist/internal/overlay/useOverlayStack.d.ts +0 -1
- package/dist/internal/overlay/useOverlayStack.d.ts.map +1 -1
- package/dist/internal/overlay/useOverlayStack.js +0 -3
- package/dist/internal/overlay/useOverlayStack.js.map +1 -1
- package/dist/internal/resolvers/resolveFieldState.d.ts +2 -1
- package/dist/internal/resolvers/resolveFieldState.d.ts.map +1 -1
- package/dist/internal/resolvers/resolveFieldState.js.map +1 -1
- package/dist/layout/AppBar.d.ts +13 -0
- package/dist/layout/AppBar.d.ts.map +1 -0
- package/dist/layout/AppBar.js +31 -0
- package/dist/layout/AppBar.js.map +1 -0
- package/dist/layout/helpers.d.ts +1 -4
- package/dist/layout/helpers.d.ts.map +1 -1
- package/dist/layout/helpers.js +3 -3
- package/dist/layout/helpers.js.map +1 -1
- package/dist/layout/index.d.ts +2 -0
- package/dist/layout/index.d.ts.map +1 -1
- package/dist/layout/index.js +1 -0
- package/dist/layout/index.js.map +1 -1
- package/package.json +10 -7
- package/src/internal/overlay/useOverlayStack.ts +0 -4
- package/src/internal/resolvers/resolveFieldState.ts +1 -1
- package/src/layout/AppBar.tsx +61 -0
- package/src/layout/helpers.ts +4 -10
- package/src/layout/index.ts +2 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
# @ankhorage/surface
|
|
2
2
|
|
|
3
|
+
## 1.3.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- 4e168c9: Add a low-level `AppBar` layout primitive with leading, center, and trailing slots.
|
|
8
|
+
|
|
9
|
+
The new primitive is navigator-agnostic, supports optional safe-area top padding via `react-native-safe-area-context`, and keeps visual styling minimal with an optional divider. It is intended as the Surface foundation for future product-facing AppBar components in ZORA.
|
|
10
|
+
|
|
3
11
|
## 1.2.0
|
|
4
12
|
|
|
5
13
|
### Minor Changes
|
|
@@ -21,7 +21,6 @@ export interface OverlayStackRuntime extends OverlayStackActions {
|
|
|
21
21
|
export declare function sortOverlayEntries(entries: OverlayEntry[]): OverlayEntry[];
|
|
22
22
|
export declare const OverlayStackContext: React.Context<OverlayStackRuntime | null>;
|
|
23
23
|
export declare const OverlayStackActionsContext: React.Context<OverlayStackActions | null>;
|
|
24
|
-
export declare function useOverlayStack(): OverlayStackRuntime | null;
|
|
25
24
|
export declare function useOverlayStackActions(): OverlayStackActions | null;
|
|
26
25
|
export declare function createOverlayEntry(id: string, order: number, descriptor: OverlayDescriptor): OverlayEntry;
|
|
27
26
|
//# sourceMappingURL=useOverlayStack.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useOverlayStack.d.ts","sourceRoot":"","sources":["../../../src/internal/overlay/useOverlayStack.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,KAAK,YAAY,EAAwB,MAAM,mCAAmC,CAAC;AAE5F,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,YAAY,CAAC;IACpB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,YAAY,CAAC;IACpB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;CACvB;AAED,MAAM,WAAW,mBAAmB;IAClC,UAAU,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC7D,aAAa,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC;AAED,MAAM,WAAW,mBAAoB,SAAQ,mBAAmB;IAC9D,QAAQ,EAAE,YAAY,EAAE,CAAC;CAC1B;AAED,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,YAAY,EAAE,GAAG,YAAY,EAAE,CAiB1E;AAED,eAAO,MAAM,mBAAmB,2CAAwD,CAAC;AAEzF,eAAO,MAAM,0BAA0B,2CAAwD,CAAC;AAEhG,wBAAgB,
|
|
1
|
+
{"version":3,"file":"useOverlayStack.d.ts","sourceRoot":"","sources":["../../../src/internal/overlay/useOverlayStack.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,KAAK,YAAY,EAAwB,MAAM,mCAAmC,CAAC;AAE5F,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,YAAY,CAAC;IACpB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,YAAY,CAAC;IACpB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;CACvB;AAED,MAAM,WAAW,mBAAmB;IAClC,UAAU,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC7D,aAAa,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC;AAED,MAAM,WAAW,mBAAoB,SAAQ,mBAAmB;IAC9D,QAAQ,EAAE,YAAY,EAAE,CAAC;CAC1B;AAED,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,YAAY,EAAE,GAAG,YAAY,EAAE,CAiB1E;AAED,eAAO,MAAM,mBAAmB,2CAAwD,CAAC;AAEzF,eAAO,MAAM,0BAA0B,2CAAwD,CAAC;AAEhG,wBAAgB,sBAAsB,IAAI,mBAAmB,GAAG,IAAI,CAEnE;AAED,wBAAgB,kBAAkB,CAChC,EAAE,EAAE,MAAM,EACV,KAAK,EAAE,MAAM,EACb,UAAU,EAAE,iBAAiB,GAC5B,YAAY,CAQd"}
|
|
@@ -16,9 +16,6 @@ export function sortOverlayEntries(entries) {
|
|
|
16
16
|
}
|
|
17
17
|
export const OverlayStackContext = React.createContext(null);
|
|
18
18
|
export const OverlayStackActionsContext = React.createContext(null);
|
|
19
|
-
export function useOverlayStack() {
|
|
20
|
-
return React.useContext(OverlayStackContext);
|
|
21
|
-
}
|
|
22
19
|
export function useOverlayStackActions() {
|
|
23
20
|
return React.useContext(OverlayStackActionsContext);
|
|
24
21
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useOverlayStack.js","sourceRoot":"","sources":["../../../src/internal/overlay/useOverlayStack.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAqB,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AAwB5F,MAAM,UAAU,kBAAkB,CAAC,OAAuB;IACxD,MAAM,cAAc,GAA0C,EAAE,CAAC;IACjE,MAAM,iBAAiB,GAAG,CAAC,GAAG,OAAO,CAAC;SACnC,IAAI,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;SAC/C,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;QACb,MAAM,UAAU,GAAG,cAAc,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;QACpD,cAAc,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,UAAU,GAAG,CAAC,CAAC;QAE7C,OAAO;YACL,GAAG,KAAK;YACR,MAAM,EAAE,oBAAoB,CAAC,KAAK,CAAC,KAAK,EAAE,UAAU,CAAC;SACtD,CAAC;IACJ,CAAC,CAAC,CAAC;IAEL,OAAO,iBAAiB,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAC5C,IAAI,CAAC,MAAM,KAAK,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,MAAM,CACrF,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,mBAAmB,GAAG,KAAK,CAAC,aAAa,CAA6B,IAAI,CAAC,CAAC;AAEzF,MAAM,CAAC,MAAM,0BAA0B,GAAG,KAAK,CAAC,aAAa,CAA6B,IAAI,CAAC,CAAC;AAEhG,MAAM,UAAU,
|
|
1
|
+
{"version":3,"file":"useOverlayStack.js","sourceRoot":"","sources":["../../../src/internal/overlay/useOverlayStack.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAqB,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AAwB5F,MAAM,UAAU,kBAAkB,CAAC,OAAuB;IACxD,MAAM,cAAc,GAA0C,EAAE,CAAC;IACjE,MAAM,iBAAiB,GAAG,CAAC,GAAG,OAAO,CAAC;SACnC,IAAI,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;SAC/C,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;QACb,MAAM,UAAU,GAAG,cAAc,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;QACpD,cAAc,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,UAAU,GAAG,CAAC,CAAC;QAE7C,OAAO;YACL,GAAG,KAAK;YACR,MAAM,EAAE,oBAAoB,CAAC,KAAK,CAAC,KAAK,EAAE,UAAU,CAAC;SACtD,CAAC;IACJ,CAAC,CAAC,CAAC;IAEL,OAAO,iBAAiB,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAC5C,IAAI,CAAC,MAAM,KAAK,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,MAAM,CACrF,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,mBAAmB,GAAG,KAAK,CAAC,aAAa,CAA6B,IAAI,CAAC,CAAC;AAEzF,MAAM,CAAC,MAAM,0BAA0B,GAAG,KAAK,CAAC,aAAa,CAA6B,IAAI,CAAC,CAAC;AAEhG,MAAM,UAAU,sBAAsB;IACpC,OAAO,KAAK,CAAC,UAAU,CAAC,0BAA0B,CAAC,CAAC;AACtD,CAAC;AAED,MAAM,UAAU,kBAAkB,CAChC,EAAU,EACV,KAAa,EACb,UAA6B;IAE7B,OAAO;QACL,EAAE;QACF,KAAK,EAAE,UAAU,CAAC,KAAK;QACvB,IAAI,EAAE,UAAU,CAAC,IAAI;QACrB,KAAK;QACL,MAAM,EAAE,oBAAoB,CAAC,UAAU,CAAC,KAAK,EAAE,CAAC,CAAC;KAClD,CAAC;AACJ,CAAC","sourcesContent":["import React from 'react';\n\nimport { type OverlayLayer, resolveOverlayZIndex } from '../resolvers/resolveOverlayZIndex';\n\nexport interface OverlayEntry {\n id: string;\n layer: OverlayLayer;\n node: React.ReactNode;\n order: number;\n zIndex: number;\n}\n\nexport interface OverlayDescriptor {\n layer: OverlayLayer;\n node: React.ReactNode;\n}\n\nexport interface OverlayStackActions {\n setOverlay: (id: string, overlay: OverlayDescriptor) => void;\n removeOverlay: (id: string) => void;\n}\n\nexport interface OverlayStackRuntime extends OverlayStackActions {\n overlays: OverlayEntry[];\n}\n\nexport function sortOverlayEntries(entries: OverlayEntry[]): OverlayEntry[] {\n const perLayerCounts: Partial<Record<OverlayLayer, number>> = {};\n const normalizedEntries = [...entries]\n .sort((left, right) => left.order - right.order)\n .map((entry) => {\n const stackIndex = perLayerCounts[entry.layer] ?? 0;\n perLayerCounts[entry.layer] = stackIndex + 1;\n\n return {\n ...entry,\n zIndex: resolveOverlayZIndex(entry.layer, stackIndex),\n };\n });\n\n return normalizedEntries.sort((left, right) =>\n left.zIndex === right.zIndex ? left.order - right.order : left.zIndex - right.zIndex,\n );\n}\n\nexport const OverlayStackContext = React.createContext<OverlayStackRuntime | null>(null);\n\nexport const OverlayStackActionsContext = React.createContext<OverlayStackActions | null>(null);\n\nexport function useOverlayStackActions(): OverlayStackActions | null {\n return React.useContext(OverlayStackActionsContext);\n}\n\nexport function createOverlayEntry(\n id: string,\n order: number,\n descriptor: OverlayDescriptor,\n): OverlayEntry {\n return {\n id,\n layer: descriptor.layer,\n node: descriptor.node,\n order,\n zIndex: resolveOverlayZIndex(descriptor.layer, 0),\n };\n}\n"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
type FieldStateName = 'default' | 'focused' | 'disabled' | 'invalid' | 'readOnly';
|
|
2
2
|
export interface FieldState {
|
|
3
3
|
name: FieldStateName;
|
|
4
4
|
focused: boolean;
|
|
@@ -7,4 +7,5 @@ export interface FieldState {
|
|
|
7
7
|
readOnly: boolean;
|
|
8
8
|
}
|
|
9
9
|
export declare function resolveFieldState({ focused, disabled, invalid, readOnly, }: Partial<Omit<FieldState, 'name'>>): FieldState;
|
|
10
|
+
export {};
|
|
10
11
|
//# sourceMappingURL=resolveFieldState.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"resolveFieldState.d.ts","sourceRoot":"","sources":["../../../src/internal/resolvers/resolveFieldState.ts"],"names":[],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"file":"resolveFieldState.d.ts","sourceRoot":"","sources":["../../../src/internal/resolvers/resolveFieldState.ts"],"names":[],"mappings":"AAAA,KAAK,cAAc,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,UAAU,CAAC;AAElF,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,cAAc,CAAC;IACrB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,wBAAgB,iBAAiB,CAAC,EAChC,OAAe,EACf,QAAgB,EAChB,OAAe,EACf,QAAgB,GACjB,EAAE,OAAO,CAAC,IAAI,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC,GAAG,UAAU,CAoBhD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"resolveFieldState.js","sourceRoot":"","sources":["../../../src/internal/resolvers/resolveFieldState.ts"],"names":[],"mappings":"AAUA,MAAM,UAAU,iBAAiB,CAAC,EAChC,OAAO,GAAG,KAAK,EACf,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,KAAK,EACf,QAAQ,GAAG,KAAK,GACkB;IAClC,IAAI,IAAI,GAAmB,SAAS,CAAC;IAErC,IAAI,QAAQ,EAAE,CAAC;QACb,IAAI,GAAG,UAAU,CAAC;IACpB,CAAC;SAAM,IAAI,OAAO,EAAE,CAAC;QACnB,IAAI,GAAG,SAAS,CAAC;IACnB,CAAC;SAAM,IAAI,OAAO,EAAE,CAAC;QACnB,IAAI,GAAG,SAAS,CAAC;IACnB,CAAC;SAAM,IAAI,QAAQ,EAAE,CAAC;QACpB,IAAI,GAAG,UAAU,CAAC;IACpB,CAAC;IAED,OAAO;QACL,IAAI;QACJ,OAAO;QACP,QAAQ;QACR,OAAO;QACP,QAAQ;KACT,CAAC;AACJ,CAAC","sourcesContent":["
|
|
1
|
+
{"version":3,"file":"resolveFieldState.js","sourceRoot":"","sources":["../../../src/internal/resolvers/resolveFieldState.ts"],"names":[],"mappings":"AAUA,MAAM,UAAU,iBAAiB,CAAC,EAChC,OAAO,GAAG,KAAK,EACf,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,KAAK,EACf,QAAQ,GAAG,KAAK,GACkB;IAClC,IAAI,IAAI,GAAmB,SAAS,CAAC;IAErC,IAAI,QAAQ,EAAE,CAAC;QACb,IAAI,GAAG,UAAU,CAAC;IACpB,CAAC;SAAM,IAAI,OAAO,EAAE,CAAC;QACnB,IAAI,GAAG,SAAS,CAAC;IACnB,CAAC;SAAM,IAAI,OAAO,EAAE,CAAC;QACnB,IAAI,GAAG,SAAS,CAAC;IACnB,CAAC;SAAM,IAAI,QAAQ,EAAE,CAAC;QACpB,IAAI,GAAG,UAAU,CAAC;IACpB,CAAC;IAED,OAAO;QACL,IAAI;QACJ,OAAO;QACP,QAAQ;QACR,OAAO;QACP,QAAQ;KACT,CAAC;AACJ,CAAC","sourcesContent":["type FieldStateName = 'default' | 'focused' | 'disabled' | 'invalid' | 'readOnly';\n\nexport interface FieldState {\n name: FieldStateName;\n focused: boolean;\n disabled: boolean;\n invalid: boolean;\n readOnly: boolean;\n}\n\nexport function resolveFieldState({\n focused = false,\n disabled = false,\n invalid = false,\n readOnly = false,\n}: Partial<Omit<FieldState, 'name'>>): FieldState {\n let name: FieldStateName = 'default';\n\n if (disabled) {\n name = 'disabled';\n } else if (invalid) {\n name = 'invalid';\n } else if (focused) {\n name = 'focused';\n } else if (readOnly) {\n name = 'readOnly';\n }\n\n return {\n name,\n focused,\n disabled,\n invalid,\n readOnly,\n };\n}\n"]}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { type StyleProp, type ViewStyle } from 'react-native';
|
|
3
|
+
import { type BoxProps } from './Box';
|
|
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
|
|
@@ -0,0 +1 @@
|
|
|
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;AAIpE,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,OAAO,CAAC;AAG3C,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"}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { View } from 'react-native';
|
|
3
|
+
import { SafeAreaInsetsContext } from 'react-native-safe-area-context';
|
|
4
|
+
import { useTheme } from '../theme/ThemeContext';
|
|
5
|
+
import { Box } from './Box';
|
|
6
|
+
import { Divider } from './Divider';
|
|
7
|
+
export function AppBar({ leading, trailing, children, safeAreaTop = true, divider = false, contentStyle, bg, style, ...props }) {
|
|
8
|
+
const { theme } = useTheme();
|
|
9
|
+
const insets = React.useContext(SafeAreaInsetsContext);
|
|
10
|
+
const topInset = safeAreaTop ? (insets?.top ?? 0) : 0;
|
|
11
|
+
const safeAreaStyle = topInset === 0 ? undefined : { paddingTop: topInset };
|
|
12
|
+
return (<Box {...props} bg={bg ?? theme.semantics.surface.default} style={[style]}>
|
|
13
|
+
<View style={safeAreaStyle}>
|
|
14
|
+
<View style={[
|
|
15
|
+
{
|
|
16
|
+
minHeight: 56,
|
|
17
|
+
flexDirection: 'row',
|
|
18
|
+
alignItems: 'center',
|
|
19
|
+
paddingHorizontal: theme.spacing.m,
|
|
20
|
+
},
|
|
21
|
+
contentStyle,
|
|
22
|
+
]}>
|
|
23
|
+
{leading ? (<View style={{ marginRight: theme.spacing.s, flexShrink: 0 }}>{leading}</View>) : null}
|
|
24
|
+
<View style={{ flex: 1, minWidth: 0 }}>{children}</View>
|
|
25
|
+
{trailing ? (<View style={{ marginLeft: theme.spacing.s, flexShrink: 0 }}>{trailing}</View>) : null}
|
|
26
|
+
</View>
|
|
27
|
+
{divider ? <Divider color={theme.semantics.neutral.divider} thickness={1}/> : null}
|
|
28
|
+
</View>
|
|
29
|
+
</Box>);
|
|
30
|
+
}
|
|
31
|
+
//# sourceMappingURL=AppBar.js.map
|
|
@@ -0,0 +1 @@
|
|
|
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,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,GAAG,EAAiB,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAWpC,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,UAAU,CAAC,qBAAqB,CAAC,CAAC;IACvD,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,CAAC,KAAK,CAAC,CAAC,CACxE;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 { useTheme } from '../theme/ThemeContext';\nimport { Box, type BoxProps } from './Box';\nimport { Divider } from './Divider';\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.useContext(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/helpers.d.ts
CHANGED
|
@@ -4,8 +4,8 @@ import type { SurfaceTheme } from '../theme/types';
|
|
|
4
4
|
type SpaceToken = keyof SurfaceTheme['spacing'];
|
|
5
5
|
type RadiusToken = keyof SurfaceTheme['radii'];
|
|
6
6
|
type ColorToken = keyof SurfaceTheme['colors'];
|
|
7
|
+
type RadiusValue = number | RadiusToken;
|
|
7
8
|
export type SpaceValue = number | SpaceToken;
|
|
8
|
-
export type RadiusValue = number | RadiusToken;
|
|
9
9
|
export type ColorValue = string | ColorToken;
|
|
10
10
|
export interface BoxStyleProps {
|
|
11
11
|
p?: Responsive<SpaceValue>;
|
|
@@ -48,9 +48,6 @@ export interface BoxStyleProps {
|
|
|
48
48
|
style?: StyleProp<ViewStyle>;
|
|
49
49
|
}
|
|
50
50
|
export declare function resolveSpacing(theme: SurfaceTheme, value: SpaceValue | undefined): number | undefined;
|
|
51
|
-
export declare function resolveRadius(theme: SurfaceTheme, value: RadiusValue | undefined): number | undefined;
|
|
52
|
-
export declare function resolveColor(theme: SurfaceTheme, value: ColorValue | undefined): string | undefined;
|
|
53
|
-
export declare function resolveDimension(theme: SurfaceTheme, value: number | string | undefined): number | string | undefined;
|
|
54
51
|
export declare function resolveBoxStyles(theme: SurfaceTheme, breakpoint: Breakpoint, props: BoxStyleProps): ViewStyle;
|
|
55
52
|
export {};
|
|
56
53
|
//# sourceMappingURL=helpers.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../src/layout/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAGzD,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAEvE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAEnD,KAAK,UAAU,GAAG,MAAM,YAAY,CAAC,SAAS,CAAC,CAAC;AAChD,KAAK,WAAW,GAAG,MAAM,YAAY,CAAC,OAAO,CAAC,CAAC;AAC/C,KAAK,UAAU,GAAG,MAAM,YAAY,CAAC,QAAQ,CAAC,CAAC;AAE/C,
|
|
1
|
+
{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../src/layout/helpers.ts"],"names":[],"mappings":"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"}
|
package/dist/layout/helpers.js
CHANGED
|
@@ -7,14 +7,14 @@ export function resolveSpacing(theme, value) {
|
|
|
7
7
|
return value;
|
|
8
8
|
return theme.spacing[value];
|
|
9
9
|
}
|
|
10
|
-
|
|
10
|
+
function resolveRadius(theme, value) {
|
|
11
11
|
if (value === undefined)
|
|
12
12
|
return undefined;
|
|
13
13
|
if (typeof value === 'number')
|
|
14
14
|
return value;
|
|
15
15
|
return theme.radii[value];
|
|
16
16
|
}
|
|
17
|
-
|
|
17
|
+
function resolveColor(theme, value) {
|
|
18
18
|
if (value === undefined)
|
|
19
19
|
return undefined;
|
|
20
20
|
if (Object.prototype.hasOwnProperty.call(theme.colors, value)) {
|
|
@@ -22,7 +22,7 @@ export function resolveColor(theme, value) {
|
|
|
22
22
|
}
|
|
23
23
|
return value;
|
|
24
24
|
}
|
|
25
|
-
|
|
25
|
+
function resolveDimension(theme, value) {
|
|
26
26
|
if (value === undefined || typeof value === 'number')
|
|
27
27
|
return value;
|
|
28
28
|
return resolveToken(theme.spacing, value);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../src/layout/helpers.ts"],"names":[],"mappings":"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","sourcesContent":["import type { StyleProp, ViewStyle } from 'react-native';\n\nimport { resolveResponsive } from '../core/responsive/resolve';\nimport type { Breakpoint, Responsive } from '../core/responsive/types';\nimport { resolveToken } from '../theme/resolveToken';\nimport type { SurfaceTheme } from '../theme/types';\n\ntype SpaceToken = keyof SurfaceTheme['spacing'];\ntype RadiusToken = keyof SurfaceTheme['radii'];\ntype ColorToken = keyof SurfaceTheme['colors'];\n\nexport type SpaceValue = number | SpaceToken;\nexport type RadiusValue = number | RadiusToken;\nexport type ColorValue = string | ColorToken;\n\nexport interface BoxStyleProps {\n p?: Responsive<SpaceValue>;\n px?: Responsive<SpaceValue>;\n py?: Responsive<SpaceValue>;\n pt?: Responsive<SpaceValue>;\n pb?: Responsive<SpaceValue>;\n pl?: Responsive<SpaceValue>;\n pr?: Responsive<SpaceValue>;\n m?: Responsive<SpaceValue>;\n mx?: Responsive<SpaceValue>;\n my?: Responsive<SpaceValue>;\n mt?: Responsive<SpaceValue>;\n mb?: Responsive<SpaceValue>;\n ml?: Responsive<SpaceValue>;\n mr?: Responsive<SpaceValue>;\n bg?: Responsive<ColorValue>;\n radius?: Responsive<RadiusValue>;\n borderWidth?: Responsive<number>;\n borderColor?: Responsive<ColorValue>;\n width?: Responsive<number | string>;\n height?: Responsive<number | string>;\n minWidth?: Responsive<number | string>;\n maxWidth?: Responsive<number | string>;\n minHeight?: Responsive<number | string>;\n maxHeight?: Responsive<number | string>;\n flex?: Responsive<number>;\n flexGrow?: Responsive<number>;\n flexShrink?: Responsive<number>;\n flexBasis?: Responsive<number | string>;\n alignSelf?: Responsive<ViewStyle['alignSelf']>;\n position?: Responsive<ViewStyle['position']>;\n top?: Responsive<number>;\n bottom?: Responsive<number>;\n left?: Responsive<number>;\n right?: Responsive<number>;\n overflow?: Responsive<ViewStyle['overflow']>;\n zIndex?: Responsive<number>;\n opacity?: Responsive<number>;\n style?: StyleProp<ViewStyle>;\n}\n\nexport function resolveSpacing(\n theme: SurfaceTheme,\n value: SpaceValue | undefined,\n): number | undefined {\n if (value === undefined) return undefined;\n if (typeof value === 'number') return value;\n return theme.spacing[value as SpaceToken];\n}\n\nexport function resolveRadius(\n theme: SurfaceTheme,\n value: RadiusValue | undefined,\n): number | undefined {\n if (value === undefined) return undefined;\n if (typeof value === 'number') return value;\n return theme.radii[value];\n}\n\nexport function resolveColor(\n theme: SurfaceTheme,\n value: ColorValue | undefined,\n): string | undefined {\n if (value === undefined) return undefined;\n if (Object.prototype.hasOwnProperty.call(theme.colors, value)) {\n return theme.colors[value];\n }\n return value as string;\n}\n\nexport function resolveDimension(\n theme: SurfaceTheme,\n value: number | string | undefined,\n): number | string | undefined {\n if (value === undefined || typeof value === 'number') return value;\n return resolveToken(theme.spacing, value);\n}\n\nfunction assignIfDefined<T, K extends keyof T>(target: T, key: K, value: T[K] | undefined) {\n if (value !== undefined) target[key] = value;\n}\n\nexport function resolveBoxStyles(\n theme: SurfaceTheme,\n breakpoint: Breakpoint,\n props: BoxStyleProps,\n): ViewStyle {\n const styles: ViewStyle = {\n elevation: 0,\n };\n\n const p = resolveSpacing(theme, resolveResponsive(props.p, breakpoint));\n const px = resolveSpacing(theme, resolveResponsive(props.px, breakpoint));\n const py = resolveSpacing(theme, resolveResponsive(props.py, breakpoint));\n const pt = resolveSpacing(theme, resolveResponsive(props.pt, breakpoint));\n const pb = resolveSpacing(theme, resolveResponsive(props.pb, breakpoint));\n const pl = resolveSpacing(theme, resolveResponsive(props.pl, breakpoint));\n const pr = resolveSpacing(theme, resolveResponsive(props.pr, breakpoint));\n const m = resolveSpacing(theme, resolveResponsive(props.m, breakpoint));\n const mx = resolveSpacing(theme, resolveResponsive(props.mx, breakpoint));\n const my = resolveSpacing(theme, resolveResponsive(props.my, breakpoint));\n const mt = resolveSpacing(theme, resolveResponsive(props.mt, breakpoint));\n const mb = resolveSpacing(theme, resolveResponsive(props.mb, breakpoint));\n const ml = resolveSpacing(theme, resolveResponsive(props.ml, breakpoint));\n const mr = resolveSpacing(theme, resolveResponsive(props.mr, breakpoint));\n\n assignIfDefined(styles, 'padding', p as ViewStyle['padding']);\n assignIfDefined(styles, 'paddingHorizontal', px as ViewStyle['paddingHorizontal']);\n assignIfDefined(styles, 'paddingVertical', py as ViewStyle['paddingVertical']);\n assignIfDefined(styles, 'paddingTop', pt as ViewStyle['paddingTop']);\n assignIfDefined(styles, 'paddingBottom', pb as ViewStyle['paddingBottom']);\n assignIfDefined(styles, 'paddingLeft', pl as ViewStyle['paddingLeft']);\n assignIfDefined(styles, 'paddingRight', pr as ViewStyle['paddingRight']);\n assignIfDefined(styles, 'margin', m as ViewStyle['margin']);\n assignIfDefined(styles, 'marginHorizontal', mx as ViewStyle['marginHorizontal']);\n assignIfDefined(styles, 'marginVertical', my as ViewStyle['marginVertical']);\n assignIfDefined(styles, 'marginTop', mt as ViewStyle['marginTop']);\n assignIfDefined(styles, 'marginBottom', mb as ViewStyle['marginBottom']);\n assignIfDefined(styles, 'marginLeft', ml as ViewStyle['marginLeft']);\n assignIfDefined(styles, 'marginRight', mr as ViewStyle['marginRight']);\n\n assignIfDefined(\n styles,\n 'backgroundColor',\n resolveColor(theme, resolveResponsive(props.bg, breakpoint)),\n );\n assignIfDefined(\n styles,\n 'borderRadius',\n resolveRadius(theme, resolveResponsive(props.radius, breakpoint)) as ViewStyle['borderRadius'],\n );\n assignIfDefined(styles, 'borderWidth', resolveResponsive(props.borderWidth, breakpoint));\n assignIfDefined(\n styles,\n 'borderColor',\n resolveColor(theme, resolveResponsive(props.borderColor, breakpoint)),\n );\n\n assignIfDefined(\n styles,\n 'width',\n resolveDimension(theme, resolveResponsive(props.width, breakpoint)) as ViewStyle['width'],\n );\n assignIfDefined(\n styles,\n 'height',\n resolveDimension(theme, resolveResponsive(props.height, breakpoint)) as ViewStyle['height'],\n );\n assignIfDefined(\n styles,\n 'minWidth',\n resolveDimension(theme, resolveResponsive(props.minWidth, breakpoint)) as ViewStyle['minWidth'],\n );\n assignIfDefined(\n styles,\n 'maxWidth',\n resolveDimension(theme, resolveResponsive(props.maxWidth, breakpoint)) as ViewStyle['maxWidth'],\n );\n assignIfDefined(\n styles,\n 'minHeight',\n resolveDimension(\n theme,\n resolveResponsive(props.minHeight, breakpoint),\n ) as ViewStyle['minHeight'],\n );\n assignIfDefined(\n styles,\n 'maxHeight',\n resolveDimension(\n theme,\n resolveResponsive(props.maxHeight, breakpoint),\n ) as ViewStyle['maxHeight'],\n );\n\n assignIfDefined(styles, 'flex', resolveResponsive(props.flex, breakpoint));\n assignIfDefined(styles, 'flexGrow', resolveResponsive(props.flexGrow, breakpoint));\n assignIfDefined(styles, 'flexShrink', resolveResponsive(props.flexShrink, breakpoint));\n assignIfDefined(\n styles,\n 'flexBasis',\n resolveResponsive(props.flexBasis, breakpoint) as ViewStyle['flexBasis'],\n );\n assignIfDefined(styles, 'alignSelf', resolveResponsive(props.alignSelf, breakpoint));\n\n assignIfDefined(styles, 'position', resolveResponsive(props.position, breakpoint));\n assignIfDefined(styles, 'top', resolveResponsive(props.top, breakpoint));\n assignIfDefined(styles, 'bottom', resolveResponsive(props.bottom, breakpoint));\n assignIfDefined(styles, 'left', resolveResponsive(props.left, breakpoint));\n assignIfDefined(styles, 'right', resolveResponsive(props.right, breakpoint));\n assignIfDefined(styles, 'overflow', resolveResponsive(props.overflow, breakpoint));\n assignIfDefined(styles, 'zIndex', resolveResponsive(props.zIndex, breakpoint));\n assignIfDefined(styles, 'opacity', resolveResponsive(props.opacity, breakpoint));\n\n return styles;\n}\n"]}
|
|
1
|
+
{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../src/layout/helpers.ts"],"names":[],"mappings":"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","sourcesContent":["import type { StyleProp, ViewStyle } from 'react-native';\n\nimport { resolveResponsive } from '../core/responsive/resolve';\nimport type { Breakpoint, Responsive } from '../core/responsive/types';\nimport { resolveToken } from '../theme/resolveToken';\nimport type { SurfaceTheme } from '../theme/types';\n\ntype SpaceToken = keyof SurfaceTheme['spacing'];\ntype RadiusToken = keyof SurfaceTheme['radii'];\ntype ColorToken = keyof SurfaceTheme['colors'];\n\ntype RadiusValue = number | RadiusToken;\nexport type SpaceValue = number | SpaceToken;\nexport type ColorValue = string | ColorToken;\n\nexport interface BoxStyleProps {\n p?: Responsive<SpaceValue>;\n px?: Responsive<SpaceValue>;\n py?: Responsive<SpaceValue>;\n pt?: Responsive<SpaceValue>;\n pb?: Responsive<SpaceValue>;\n pl?: Responsive<SpaceValue>;\n pr?: Responsive<SpaceValue>;\n m?: Responsive<SpaceValue>;\n mx?: Responsive<SpaceValue>;\n my?: Responsive<SpaceValue>;\n mt?: Responsive<SpaceValue>;\n mb?: Responsive<SpaceValue>;\n ml?: Responsive<SpaceValue>;\n mr?: Responsive<SpaceValue>;\n bg?: Responsive<ColorValue>;\n radius?: Responsive<RadiusValue>;\n borderWidth?: Responsive<number>;\n borderColor?: Responsive<ColorValue>;\n width?: Responsive<number | string>;\n height?: Responsive<number | string>;\n minWidth?: Responsive<number | string>;\n maxWidth?: Responsive<number | string>;\n minHeight?: Responsive<number | string>;\n maxHeight?: Responsive<number | string>;\n flex?: Responsive<number>;\n flexGrow?: Responsive<number>;\n flexShrink?: Responsive<number>;\n flexBasis?: Responsive<number | string>;\n alignSelf?: Responsive<ViewStyle['alignSelf']>;\n position?: Responsive<ViewStyle['position']>;\n top?: Responsive<number>;\n bottom?: Responsive<number>;\n left?: Responsive<number>;\n right?: Responsive<number>;\n overflow?: Responsive<ViewStyle['overflow']>;\n zIndex?: Responsive<number>;\n opacity?: Responsive<number>;\n style?: StyleProp<ViewStyle>;\n}\n\nexport function resolveSpacing(\n theme: SurfaceTheme,\n value: SpaceValue | undefined,\n): number | undefined {\n if (value === undefined) return undefined;\n if (typeof value === 'number') return value;\n return theme.spacing[value as SpaceToken];\n}\n\nfunction resolveRadius(theme: SurfaceTheme, value: RadiusValue | undefined): number | undefined {\n if (value === undefined) return undefined;\n if (typeof value === 'number') return value;\n return theme.radii[value];\n}\n\nfunction resolveColor(theme: SurfaceTheme, value: ColorValue | undefined): string | undefined {\n if (value === undefined) return undefined;\n if (Object.prototype.hasOwnProperty.call(theme.colors, value)) {\n return theme.colors[value];\n }\n return value as string;\n}\n\nfunction resolveDimension(\n theme: SurfaceTheme,\n value: number | string | undefined,\n): number | string | undefined {\n if (value === undefined || typeof value === 'number') return value;\n return resolveToken(theme.spacing, value);\n}\n\nfunction assignIfDefined<T, K extends keyof T>(target: T, key: K, value: T[K] | undefined) {\n if (value !== undefined) target[key] = value;\n}\n\nexport function resolveBoxStyles(\n theme: SurfaceTheme,\n breakpoint: Breakpoint,\n props: BoxStyleProps,\n): ViewStyle {\n const styles: ViewStyle = {\n elevation: 0,\n };\n\n const p = resolveSpacing(theme, resolveResponsive(props.p, breakpoint));\n const px = resolveSpacing(theme, resolveResponsive(props.px, breakpoint));\n const py = resolveSpacing(theme, resolveResponsive(props.py, breakpoint));\n const pt = resolveSpacing(theme, resolveResponsive(props.pt, breakpoint));\n const pb = resolveSpacing(theme, resolveResponsive(props.pb, breakpoint));\n const pl = resolveSpacing(theme, resolveResponsive(props.pl, breakpoint));\n const pr = resolveSpacing(theme, resolveResponsive(props.pr, breakpoint));\n const m = resolveSpacing(theme, resolveResponsive(props.m, breakpoint));\n const mx = resolveSpacing(theme, resolveResponsive(props.mx, breakpoint));\n const my = resolveSpacing(theme, resolveResponsive(props.my, breakpoint));\n const mt = resolveSpacing(theme, resolveResponsive(props.mt, breakpoint));\n const mb = resolveSpacing(theme, resolveResponsive(props.mb, breakpoint));\n const ml = resolveSpacing(theme, resolveResponsive(props.ml, breakpoint));\n const mr = resolveSpacing(theme, resolveResponsive(props.mr, breakpoint));\n\n assignIfDefined(styles, 'padding', p as ViewStyle['padding']);\n assignIfDefined(styles, 'paddingHorizontal', px as ViewStyle['paddingHorizontal']);\n assignIfDefined(styles, 'paddingVertical', py as ViewStyle['paddingVertical']);\n assignIfDefined(styles, 'paddingTop', pt as ViewStyle['paddingTop']);\n assignIfDefined(styles, 'paddingBottom', pb as ViewStyle['paddingBottom']);\n assignIfDefined(styles, 'paddingLeft', pl as ViewStyle['paddingLeft']);\n assignIfDefined(styles, 'paddingRight', pr as ViewStyle['paddingRight']);\n assignIfDefined(styles, 'margin', m as ViewStyle['margin']);\n assignIfDefined(styles, 'marginHorizontal', mx as ViewStyle['marginHorizontal']);\n assignIfDefined(styles, 'marginVertical', my as ViewStyle['marginVertical']);\n assignIfDefined(styles, 'marginTop', mt as ViewStyle['marginTop']);\n assignIfDefined(styles, 'marginBottom', mb as ViewStyle['marginBottom']);\n assignIfDefined(styles, 'marginLeft', ml as ViewStyle['marginLeft']);\n assignIfDefined(styles, 'marginRight', mr as ViewStyle['marginRight']);\n\n assignIfDefined(\n styles,\n 'backgroundColor',\n resolveColor(theme, resolveResponsive(props.bg, breakpoint)),\n );\n assignIfDefined(\n styles,\n 'borderRadius',\n resolveRadius(theme, resolveResponsive(props.radius, breakpoint)) as ViewStyle['borderRadius'],\n );\n assignIfDefined(styles, 'borderWidth', resolveResponsive(props.borderWidth, breakpoint));\n assignIfDefined(\n styles,\n 'borderColor',\n resolveColor(theme, resolveResponsive(props.borderColor, breakpoint)),\n );\n\n assignIfDefined(\n styles,\n 'width',\n resolveDimension(theme, resolveResponsive(props.width, breakpoint)) as ViewStyle['width'],\n );\n assignIfDefined(\n styles,\n 'height',\n resolveDimension(theme, resolveResponsive(props.height, breakpoint)) as ViewStyle['height'],\n );\n assignIfDefined(\n styles,\n 'minWidth',\n resolveDimension(theme, resolveResponsive(props.minWidth, breakpoint)) as ViewStyle['minWidth'],\n );\n assignIfDefined(\n styles,\n 'maxWidth',\n resolveDimension(theme, resolveResponsive(props.maxWidth, breakpoint)) as ViewStyle['maxWidth'],\n );\n assignIfDefined(\n styles,\n 'minHeight',\n resolveDimension(\n theme,\n resolveResponsive(props.minHeight, breakpoint),\n ) as ViewStyle['minHeight'],\n );\n assignIfDefined(\n styles,\n 'maxHeight',\n resolveDimension(\n theme,\n resolveResponsive(props.maxHeight, breakpoint),\n ) as ViewStyle['maxHeight'],\n );\n\n assignIfDefined(styles, 'flex', resolveResponsive(props.flex, breakpoint));\n assignIfDefined(styles, 'flexGrow', resolveResponsive(props.flexGrow, breakpoint));\n assignIfDefined(styles, 'flexShrink', resolveResponsive(props.flexShrink, breakpoint));\n assignIfDefined(\n styles,\n 'flexBasis',\n resolveResponsive(props.flexBasis, breakpoint) as ViewStyle['flexBasis'],\n );\n assignIfDefined(styles, 'alignSelf', resolveResponsive(props.alignSelf, breakpoint));\n\n assignIfDefined(styles, 'position', resolveResponsive(props.position, breakpoint));\n assignIfDefined(styles, 'top', resolveResponsive(props.top, breakpoint));\n assignIfDefined(styles, 'bottom', resolveResponsive(props.bottom, breakpoint));\n assignIfDefined(styles, 'left', resolveResponsive(props.left, breakpoint));\n assignIfDefined(styles, 'right', resolveResponsive(props.right, breakpoint));\n assignIfDefined(styles, 'overflow', resolveResponsive(props.overflow, breakpoint));\n assignIfDefined(styles, 'zIndex', resolveResponsive(props.zIndex, breakpoint));\n assignIfDefined(styles, 'opacity', resolveResponsive(props.opacity, breakpoint));\n\n return styles;\n}\n"]}
|
package/dist/layout/index.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/layout/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,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,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,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAC9D,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC"}
|
|
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,QAAQ,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,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,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,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAC9D,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC"}
|
package/dist/layout/index.js
CHANGED
package/dist/layout/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/layout/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEhC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC","sourcesContent":["export type { BoxProps } from './Box';\nexport { Box } from './Box';\nexport type { CenterProps } from './Center';\nexport { Center } from './Center';\nexport type { ContainerProps } from './Container';\nexport { Container } from './Container';\nexport type { DividerProps } from './Divider';\nexport { Divider } from './Divider';\nexport type { GridProps } from './Grid';\nexport { Grid } from './Grid';\nexport type { InlineProps } from './Inline';\nexport { Inline } from './Inline';\nexport type { ShowProps } from './Show';\nexport { Show } from './Show';\nexport type { SpacerProps } from './Spacer';\nexport { Spacer } from './Spacer';\nexport type { StackProps } from './Stack';\nexport { Stack } from './Stack';\nexport type { SurfaceProps, SurfaceVariant } from './Surface';\nexport { Surface } from './Surface';\nexport type { TemplateProps } from './Template';\nexport { Template } from './Template';\n"]}
|
|
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,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEhC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC","sourcesContent":["export type { AppBarProps } from './AppBar';\nexport { AppBar } from './AppBar';\nexport type { BoxProps } from './Box';\nexport { Box } from './Box';\nexport type { CenterProps } from './Center';\nexport { Center } from './Center';\nexport type { ContainerProps } from './Container';\nexport { Container } from './Container';\nexport type { DividerProps } from './Divider';\nexport { Divider } from './Divider';\nexport type { GridProps } from './Grid';\nexport { Grid } from './Grid';\nexport type { InlineProps } from './Inline';\nexport { Inline } from './Inline';\nexport type { ShowProps } from './Show';\nexport { Show } from './Show';\nexport type { SpacerProps } from './Spacer';\nexport { Spacer } from './Spacer';\nexport type { StackProps } from './Stack';\nexport { Stack } from './Stack';\nexport type { SurfaceProps, SurfaceVariant } from './Surface';\nexport { Surface } from './Surface';\nexport type { TemplateProps } from './Template';\nexport { Template } from './Template';\n"]}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ankhorage/surface",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "1.
|
|
4
|
+
"version": "1.3.0",
|
|
5
5
|
"description": "Stable UI foundation for React Native and React Native Web.",
|
|
6
6
|
"homepage": "https://github.com/ankhorage/surface#readme",
|
|
7
7
|
"bugs": {
|
|
@@ -30,7 +30,8 @@
|
|
|
30
30
|
"@expo/vector-icons": ">=14.0.0",
|
|
31
31
|
"expo-font": "^55.0.6",
|
|
32
32
|
"react": ">=18.2.0",
|
|
33
|
-
"react-native": ">=0.72.0"
|
|
33
|
+
"react-native": ">=0.72.0",
|
|
34
|
+
"react-native-safe-area-context": "^5.0.0"
|
|
34
35
|
},
|
|
35
36
|
"peerDependenciesMeta": {
|
|
36
37
|
"@expo/vector-icons": {
|
|
@@ -68,16 +69,17 @@
|
|
|
68
69
|
"build": "rm -rf dist tsconfig.tsbuildinfo && bun x tsc -p tsconfig.json",
|
|
69
70
|
"changeset": "changeset",
|
|
70
71
|
"changeset:status": "changeset status --since=origin/main",
|
|
71
|
-
"
|
|
72
|
-
"lint
|
|
73
|
-
"
|
|
74
|
-
"format
|
|
72
|
+
"knip": "ankhorage-knip",
|
|
73
|
+
"lint": "ankhorage-eslint . --max-warnings=0",
|
|
74
|
+
"lint:fix": "ankhorage-eslint . --fix --max-warnings=0",
|
|
75
|
+
"format": "ankhorage-prettier --write .",
|
|
76
|
+
"format:check": "ankhorage-prettier --check .",
|
|
75
77
|
"prepack": "bun run build",
|
|
76
78
|
"test": "bun test src",
|
|
77
79
|
"version-packages": "changeset version"
|
|
78
80
|
},
|
|
79
81
|
"devDependencies": {
|
|
80
|
-
"@ankhorage/devtools": "^1.0.
|
|
82
|
+
"@ankhorage/devtools": "^1.0.5",
|
|
81
83
|
"@changesets/cli": "^2.31.0",
|
|
82
84
|
"@expo/vector-icons": "^15.1.1",
|
|
83
85
|
"@types/bun": "^1.3.13",
|
|
@@ -85,6 +87,7 @@
|
|
|
85
87
|
"@types/react": "^19.2.14",
|
|
86
88
|
"react": "19.1.0",
|
|
87
89
|
"react-native": "0.81.5",
|
|
90
|
+
"react-native-safe-area-context": "^5.0.0",
|
|
88
91
|
"typescript": "^5.9.3"
|
|
89
92
|
},
|
|
90
93
|
"packageManager": "bun@1.3.13"
|
|
@@ -47,10 +47,6 @@ export const OverlayStackContext = React.createContext<OverlayStackRuntime | nul
|
|
|
47
47
|
|
|
48
48
|
export const OverlayStackActionsContext = React.createContext<OverlayStackActions | null>(null);
|
|
49
49
|
|
|
50
|
-
export function useOverlayStack(): OverlayStackRuntime | null {
|
|
51
|
-
return React.useContext(OverlayStackContext);
|
|
52
|
-
}
|
|
53
|
-
|
|
54
50
|
export function useOverlayStackActions(): OverlayStackActions | null {
|
|
55
51
|
return React.useContext(OverlayStackActionsContext);
|
|
56
52
|
}
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { type StyleProp, View, type ViewStyle } from 'react-native';
|
|
3
|
+
import { SafeAreaInsetsContext } from 'react-native-safe-area-context';
|
|
4
|
+
|
|
5
|
+
import { useTheme } from '../theme/ThemeContext';
|
|
6
|
+
import { Box, type BoxProps } from './Box';
|
|
7
|
+
import { Divider } from './Divider';
|
|
8
|
+
|
|
9
|
+
export interface AppBarProps extends Omit<BoxProps, 'children'> {
|
|
10
|
+
leading?: React.ReactNode;
|
|
11
|
+
trailing?: React.ReactNode;
|
|
12
|
+
children?: React.ReactNode;
|
|
13
|
+
safeAreaTop?: boolean;
|
|
14
|
+
divider?: boolean;
|
|
15
|
+
contentStyle?: StyleProp<ViewStyle>;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
export function AppBar({
|
|
19
|
+
leading,
|
|
20
|
+
trailing,
|
|
21
|
+
children,
|
|
22
|
+
safeAreaTop = true,
|
|
23
|
+
divider = false,
|
|
24
|
+
contentStyle,
|
|
25
|
+
bg,
|
|
26
|
+
style,
|
|
27
|
+
...props
|
|
28
|
+
}: AppBarProps) {
|
|
29
|
+
const { theme } = useTheme();
|
|
30
|
+
const insets = React.useContext(SafeAreaInsetsContext);
|
|
31
|
+
const topInset = safeAreaTop ? (insets?.top ?? 0) : 0;
|
|
32
|
+
const safeAreaStyle: ViewStyle | undefined =
|
|
33
|
+
topInset === 0 ? undefined : { paddingTop: topInset };
|
|
34
|
+
|
|
35
|
+
return (
|
|
36
|
+
<Box {...props} bg={bg ?? theme.semantics.surface.default} style={[style]}>
|
|
37
|
+
<View style={safeAreaStyle}>
|
|
38
|
+
<View
|
|
39
|
+
style={[
|
|
40
|
+
{
|
|
41
|
+
minHeight: 56,
|
|
42
|
+
flexDirection: 'row',
|
|
43
|
+
alignItems: 'center',
|
|
44
|
+
paddingHorizontal: theme.spacing.m,
|
|
45
|
+
},
|
|
46
|
+
contentStyle,
|
|
47
|
+
]}
|
|
48
|
+
>
|
|
49
|
+
{leading ? (
|
|
50
|
+
<View style={{ marginRight: theme.spacing.s, flexShrink: 0 }}>{leading}</View>
|
|
51
|
+
) : null}
|
|
52
|
+
<View style={{ flex: 1, minWidth: 0 }}>{children}</View>
|
|
53
|
+
{trailing ? (
|
|
54
|
+
<View style={{ marginLeft: theme.spacing.s, flexShrink: 0 }}>{trailing}</View>
|
|
55
|
+
) : null}
|
|
56
|
+
</View>
|
|
57
|
+
{divider ? <Divider color={theme.semantics.neutral.divider} thickness={1} /> : null}
|
|
58
|
+
</View>
|
|
59
|
+
</Box>
|
|
60
|
+
);
|
|
61
|
+
}
|
package/src/layout/helpers.ts
CHANGED
|
@@ -9,8 +9,8 @@ type SpaceToken = keyof SurfaceTheme['spacing'];
|
|
|
9
9
|
type RadiusToken = keyof SurfaceTheme['radii'];
|
|
10
10
|
type ColorToken = keyof SurfaceTheme['colors'];
|
|
11
11
|
|
|
12
|
+
type RadiusValue = number | RadiusToken;
|
|
12
13
|
export type SpaceValue = number | SpaceToken;
|
|
13
|
-
export type RadiusValue = number | RadiusToken;
|
|
14
14
|
export type ColorValue = string | ColorToken;
|
|
15
15
|
|
|
16
16
|
export interface BoxStyleProps {
|
|
@@ -63,19 +63,13 @@ export function resolveSpacing(
|
|
|
63
63
|
return theme.spacing[value as SpaceToken];
|
|
64
64
|
}
|
|
65
65
|
|
|
66
|
-
|
|
67
|
-
theme: SurfaceTheme,
|
|
68
|
-
value: RadiusValue | undefined,
|
|
69
|
-
): number | undefined {
|
|
66
|
+
function resolveRadius(theme: SurfaceTheme, value: RadiusValue | undefined): number | undefined {
|
|
70
67
|
if (value === undefined) return undefined;
|
|
71
68
|
if (typeof value === 'number') return value;
|
|
72
69
|
return theme.radii[value];
|
|
73
70
|
}
|
|
74
71
|
|
|
75
|
-
|
|
76
|
-
theme: SurfaceTheme,
|
|
77
|
-
value: ColorValue | undefined,
|
|
78
|
-
): string | undefined {
|
|
72
|
+
function resolveColor(theme: SurfaceTheme, value: ColorValue | undefined): string | undefined {
|
|
79
73
|
if (value === undefined) return undefined;
|
|
80
74
|
if (Object.prototype.hasOwnProperty.call(theme.colors, value)) {
|
|
81
75
|
return theme.colors[value];
|
|
@@ -83,7 +77,7 @@ export function resolveColor(
|
|
|
83
77
|
return value as string;
|
|
84
78
|
}
|
|
85
79
|
|
|
86
|
-
|
|
80
|
+
function resolveDimension(
|
|
87
81
|
theme: SurfaceTheme,
|
|
88
82
|
value: number | string | undefined,
|
|
89
83
|
): number | string | undefined {
|