@ankhorage/zora 0.9.0 → 0.10.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 +59 -34
- package/dist/components/button/Button.d.ts +1 -1
- package/dist/components/button/Button.d.ts.map +1 -1
- package/dist/components/button/Button.js +3 -1
- package/dist/components/button/Button.js.map +1 -1
- package/dist/components/button/types.d.ts +2 -1
- package/dist/components/button/types.d.ts.map +1 -1
- package/dist/components/button/types.js.map +1 -1
- package/dist/components/card/Card.d.ts +1 -1
- package/dist/components/card/Card.d.ts.map +1 -1
- package/dist/components/card/Card.js +3 -1
- package/dist/components/card/Card.js.map +1 -1
- package/dist/components/card/types.d.ts +2 -1
- package/dist/components/card/types.d.ts.map +1 -1
- package/dist/components/card/types.js.map +1 -1
- package/dist/components/heading/Heading.d.ts +1 -1
- package/dist/components/heading/Heading.d.ts.map +1 -1
- package/dist/components/heading/Heading.js +3 -1
- package/dist/components/heading/Heading.js.map +1 -1
- package/dist/components/heading/types.d.ts +2 -2
- package/dist/components/heading/types.d.ts.map +1 -1
- package/dist/components/heading/types.js.map +1 -1
- package/dist/components/icon/Icon.d.ts +4 -2
- package/dist/components/icon/Icon.d.ts.map +1 -1
- package/dist/components/icon/Icon.js +3 -1
- package/dist/components/icon/Icon.js.map +1 -1
- package/dist/components/icon-button/IconButton.d.ts +1 -1
- package/dist/components/icon-button/IconButton.d.ts.map +1 -1
- package/dist/components/icon-button/IconButton.js +3 -1
- package/dist/components/icon-button/IconButton.js.map +1 -1
- package/dist/components/icon-button/types.d.ts +2 -1
- package/dist/components/icon-button/types.d.ts.map +1 -1
- package/dist/components/icon-button/types.js.map +1 -1
- package/dist/components/text/Text.d.ts +1 -1
- package/dist/components/text/Text.d.ts.map +1 -1
- package/dist/components/text/Text.js +3 -1
- package/dist/components/text/Text.js.map +1 -1
- package/dist/components/text/types.d.ts +2 -2
- package/dist/components/text/types.d.ts.map +1 -1
- package/dist/components/text/types.js.map +1 -1
- package/dist/patterns/panel/Panel.d.ts +1 -1
- package/dist/patterns/panel/Panel.d.ts.map +1 -1
- package/dist/patterns/panel/Panel.js +3 -1
- package/dist/patterns/panel/Panel.js.map +1 -1
- package/dist/patterns/panel/types.d.ts +2 -2
- package/dist/patterns/panel/types.d.ts.map +1 -1
- package/dist/patterns/panel/types.js.map +1 -1
- package/dist/theme/ZoraBaseProps.d.ts +18 -0
- package/dist/theme/ZoraBaseProps.d.ts.map +1 -0
- package/dist/theme/ZoraBaseProps.js +2 -0
- package/dist/theme/ZoraBaseProps.js.map +1 -0
- package/dist/theme/ZoraProvider.d.ts.map +1 -1
- package/dist/theme/ZoraProvider.js +8 -4
- package/dist/theme/ZoraProvider.js.map +1 -1
- package/dist/theme/ZoraThemeRuntimeContext.d.ts +9 -0
- package/dist/theme/ZoraThemeRuntimeContext.d.ts.map +1 -0
- package/dist/theme/ZoraThemeRuntimeContext.js +10 -0
- package/dist/theme/ZoraThemeRuntimeContext.js.map +1 -0
- package/dist/theme/ZoraThemeScope.d.ts +9 -0
- package/dist/theme/ZoraThemeScope.d.ts.map +1 -0
- package/dist/theme/ZoraThemeScope.js +41 -0
- package/dist/theme/ZoraThemeScope.js.map +1 -0
- package/dist/theme/index.d.ts +4 -0
- package/dist/theme/index.d.ts.map +1 -1
- package/dist/theme/index.js +2 -0
- package/dist/theme/index.js.map +1 -1
- package/dist/theme/resolveZoraScopedThemeId.d.ts +6 -0
- package/dist/theme/resolveZoraScopedThemeId.d.ts.map +1 -0
- package/dist/theme/resolveZoraScopedThemeId.js +15 -0
- package/dist/theme/resolveZoraScopedThemeId.js.map +1 -0
- package/dist/theme/withZoraThemeScope.d.ts +4 -0
- package/dist/theme/withZoraThemeScope.d.ts.map +1 -0
- package/dist/theme/withZoraThemeScope.js +16 -0
- package/dist/theme/withZoraThemeScope.js.map +1 -0
- package/package.json +1 -1
- package/src/components/button/Button.tsx +11 -1
- package/src/components/button/types.ts +3 -4
- package/src/components/card/Card.tsx +6 -1
- package/src/components/card/types.ts +3 -1
- package/src/components/heading/Heading.tsx +6 -1
- package/src/components/heading/types.ts +3 -2
- package/src/components/icon/Icon.tsx +7 -2
- package/src/components/icon-button/IconButton.tsx +6 -1
- package/src/components/icon-button/types.ts +2 -1
- package/src/components/text/Text.tsx +6 -1
- package/src/components/text/types.ts +3 -2
- package/src/patterns/panel/Panel.tsx +4 -1
- package/src/patterns/panel/types.ts +2 -2
- package/src/theme/ZoraBaseProps.ts +20 -0
- package/src/theme/ZoraProvider.tsx +9 -4
- package/src/theme/ZoraThemeRuntimeContext.tsx +18 -0
- package/src/theme/ZoraThemeScope.tsx +74 -0
- package/src/theme/index.ts +4 -0
- package/src/theme/resolveZoraScopedThemeId.test.ts +47 -0
- package/src/theme/resolveZoraScopedThemeId.ts +25 -0
- package/src/theme/themeScopeStructure.test.ts +99 -0
- package/src/theme/withZoraThemeScope.tsx +25 -0
package/CHANGELOG.md
CHANGED
package/README.md
CHANGED
|
@@ -68,6 +68,31 @@ export function App() {
|
|
|
68
68
|
}
|
|
69
69
|
```
|
|
70
70
|
|
|
71
|
+
## Scoped themes
|
|
72
|
+
|
|
73
|
+
ZORA supports nested theme scopes. A component may set `mode` and, later,
|
|
74
|
+
`themeId`; everything inside inherits the nearest scope.
|
|
75
|
+
|
|
76
|
+
```tsx
|
|
77
|
+
import React from 'react';
|
|
78
|
+
import { Button, Heading, Panel, Text, ZoraProvider, type ZoraTheme } from '@ankhorage/zora';
|
|
79
|
+
|
|
80
|
+
export function App({ appTheme }: { appTheme: ZoraTheme }) {
|
|
81
|
+
return (
|
|
82
|
+
<ZoraProvider theme={appTheme} initialMode="light">
|
|
83
|
+
<Panel mode="dark">
|
|
84
|
+
<Heading>Studio panel</Heading>
|
|
85
|
+
<Text>Text inherits dark mode.</Text>
|
|
86
|
+
<Button>Also scoped.</Button>
|
|
87
|
+
</Panel>
|
|
88
|
+
</ZoraProvider>
|
|
89
|
+
);
|
|
90
|
+
}
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
In Plan 2, `mode` is a declarative render-scope override. Calling `setMode` from
|
|
94
|
+
`useZoraTheme()` still targets the root theme provider.
|
|
95
|
+
|
|
71
96
|
## Foundation primitives
|
|
72
97
|
|
|
73
98
|
ZORA re-exports selected Surface foundation primitives for app-facing layout
|
|
@@ -122,21 +147,21 @@ responsive for mobile and web layouts.
|
|
|
122
147
|
|
|
123
148
|
ZORA props:
|
|
124
149
|
|
|
125
|
-
| Prop | Type | Default | Notes
|
|
126
|
-
| --------------- | ---------------------------------------- | ----------- |
|
|
127
|
-
| `children` | `React.ReactNode` | - | Primary content.
|
|
128
|
-
| `text` | `string` | - | Manifest-friendly content prop.
|
|
129
|
-
| `i18nKey` | `string` | - | Runtime-resolved fallback key when no content prop is provided.
|
|
130
|
-
| `level` | `HeadingLevel` | `2` | Semantic heading level from `1` through `6`.
|
|
131
|
-
| `size` | `Responsive<HeadingSize>` | level size | Visual scale: `display`, `h1` through `h6`.
|
|
132
|
-
| `tone` | `Responsive<HeadingTone>` | `'default'` | Semantic text color.
|
|
133
|
-
| `align` | `Responsive<HeadingAlign>` | - | Text alignment.
|
|
134
|
-
| `weight` | `Responsive<HeadingWeight>` | recipe | Optional structured weight override.
|
|
135
|
-
| `italic` | `boolean` | `false` | Italic style.
|
|
136
|
-
| `numberOfLines` | `number` | - | Native/web truncation line count.
|
|
137
|
-
| `ellipsizeMode` | `'head' \| 'middle' \| 'tail' \| 'clip'` | - | Truncation behavior.
|
|
138
|
-
| `selectable` | `boolean` | - | Allows text selection where supported.
|
|
139
|
-
| `testID` | `string` | - | Test id.
|
|
150
|
+
| Prop | Type | Default | Notes |
|
|
151
|
+
| --------------- | ---------------------------------------- | ----------- | --------------------------------------------------------------- |
|
|
152
|
+
| `children` | `React.ReactNode` | - | Primary content. |
|
|
153
|
+
| `text` | `string` | - | Manifest-friendly content prop. |
|
|
154
|
+
| `i18nKey` | `string` | - | Runtime-resolved fallback key when no content prop is provided. |
|
|
155
|
+
| `level` | `HeadingLevel` | `2` | Semantic heading level from `1` through `6`. |
|
|
156
|
+
| `size` | `Responsive<HeadingSize>` | level size | Visual scale: `display`, `h1` through `h6`. |
|
|
157
|
+
| `tone` | `Responsive<HeadingTone>` | `'default'` | Semantic text color. |
|
|
158
|
+
| `align` | `Responsive<HeadingAlign>` | - | Text alignment. |
|
|
159
|
+
| `weight` | `Responsive<HeadingWeight>` | recipe | Optional structured weight override. |
|
|
160
|
+
| `italic` | `boolean` | `false` | Italic style. |
|
|
161
|
+
| `numberOfLines` | `number` | - | Native/web truncation line count. |
|
|
162
|
+
| `ellipsizeMode` | `'head' \| 'middle' \| 'tail' \| 'clip'` | - | Truncation behavior. |
|
|
163
|
+
| `selectable` | `boolean` | - | Allows text selection where supported. |
|
|
164
|
+
| `testID` | `string` | - | Test id. |
|
|
140
165
|
|
|
141
166
|
No inherited props. `HeadingProps` is declared directly by ZORA to keep heading
|
|
142
167
|
usage structured and template-safe.
|
|
@@ -163,20 +188,20 @@ responsive props.
|
|
|
163
188
|
|
|
164
189
|
ZORA props:
|
|
165
190
|
|
|
166
|
-
| Prop | Type | Default | Notes
|
|
167
|
-
| --------------- | ---------------------------------------- | ----------- |
|
|
168
|
-
| `children` | `React.ReactNode` | - | Primary content.
|
|
169
|
-
| `text` | `string` | - | Manifest-friendly content prop.
|
|
170
|
-
| `i18nKey` | `string` | - | Runtime-resolved fallback key when no content prop is provided.
|
|
171
|
-
| `variant` | `Responsive<TextVariant>` | `'body'` | Typography recipe.
|
|
172
|
-
| `tone` | `Responsive<TextTone>` | `'default'` | Semantic text color.
|
|
173
|
-
| `align` | `Responsive<TextAlign>` | - | Text alignment.
|
|
174
|
-
| `weight` | `Responsive<TextWeight>` | recipe | Optional structured weight override.
|
|
175
|
-
| `italic` | `boolean` | `false` | Italic style.
|
|
176
|
-
| `numberOfLines` | `number` | - | Native/web truncation line count.
|
|
177
|
-
| `ellipsizeMode` | `'head' \| 'middle' \| 'tail' \| 'clip'` | - | Truncation behavior.
|
|
178
|
-
| `selectable` | `boolean` | - | Allows text selection where supported.
|
|
179
|
-
| `testID` | `string` | - | Test id.
|
|
191
|
+
| Prop | Type | Default | Notes |
|
|
192
|
+
| --------------- | ---------------------------------------- | ----------- | --------------------------------------------------------------- |
|
|
193
|
+
| `children` | `React.ReactNode` | - | Primary content. |
|
|
194
|
+
| `text` | `string` | - | Manifest-friendly content prop. |
|
|
195
|
+
| `i18nKey` | `string` | - | Runtime-resolved fallback key when no content prop is provided. |
|
|
196
|
+
| `variant` | `Responsive<TextVariant>` | `'body'` | Typography recipe. |
|
|
197
|
+
| `tone` | `Responsive<TextTone>` | `'default'` | Semantic text color. |
|
|
198
|
+
| `align` | `Responsive<TextAlign>` | - | Text alignment. |
|
|
199
|
+
| `weight` | `Responsive<TextWeight>` | recipe | Optional structured weight override. |
|
|
200
|
+
| `italic` | `boolean` | `false` | Italic style. |
|
|
201
|
+
| `numberOfLines` | `number` | - | Native/web truncation line count. |
|
|
202
|
+
| `ellipsizeMode` | `'head' \| 'middle' \| 'tail' \| 'clip'` | - | Truncation behavior. |
|
|
203
|
+
| `selectable` | `boolean` | - | Allows text selection where supported. |
|
|
204
|
+
| `testID` | `string` | - | Test id. |
|
|
180
205
|
|
|
181
206
|
No inherited props. `TextProps` is declared directly by ZORA to keep text
|
|
182
207
|
structured and template-safe.
|
|
@@ -1332,11 +1357,11 @@ Pass a theme seed to define your app theme:
|
|
|
1332
1357
|
|
|
1333
1358
|
ZORA props:
|
|
1334
1359
|
|
|
1335
|
-
| Prop | Type
|
|
1336
|
-
| ------------- |
|
|
1337
|
-
| `children` | `React.ReactNode`
|
|
1338
|
-
| `theme` | `ZoraTheme`
|
|
1339
|
-
| `initialMode` | `'light' \| 'dark'`
|
|
1360
|
+
| Prop | Type | Default | Notes |
|
|
1361
|
+
| ------------- | ------------------- | ------------------ | ------------------------------------- |
|
|
1362
|
+
| `children` | `React.ReactNode` | - | Required app content. |
|
|
1363
|
+
| `theme` | `ZoraTheme` | `zoraDefaultTheme` | App-facing theme seed for ZORA. |
|
|
1364
|
+
| `initialMode` | `'light' \| 'dark'` | `'light'` | Initial theme mode passed to Surface. |
|
|
1340
1365
|
|
|
1341
1366
|
Inherited props:
|
|
1342
1367
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAiB3C,eAAO,MAAM,MAAM,uBAAkC,CAAC"}
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import { Button as SurfaceButton } from '@ankhorage/surface';
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { resolveButtonRecipe } from '../../internal/recipes';
|
|
4
|
-
|
|
4
|
+
import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
|
|
5
|
+
function ButtonInner({ themeId: _themeId, mode: _mode, tone, emphasis, size, ...props }) {
|
|
5
6
|
const recipe = resolveButtonRecipe({ tone, emphasis, size });
|
|
6
7
|
return (<SurfaceButton {...props} size={recipe.size} tone={recipe.tone} variant={recipe.variant}/>);
|
|
7
8
|
}
|
|
9
|
+
export const Button = withZoraThemeScope(ButtonInner);
|
|
8
10
|
//# sourceMappingURL=Button.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAC7D,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;
|
|
1
|
+
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAC7D,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAGpE,SAAS,WAAW,CAAC,EACnB,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,GAAG,KAAK,EACI;IACZ,MAAM,MAAM,GAAG,mBAAmB,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;IAE7D,OAAO,CACL,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,EAAG,CAC5F,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,MAAM,GAAG,kBAAkB,CAAC,WAAW,CAAC,CAAC","sourcesContent":["import { Button as SurfaceButton } from '@ankhorage/surface';\nimport React from 'react';\n\nimport { resolveButtonRecipe } from '../../internal/recipes';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport type { ButtonProps } from './types';\n\nfunction ButtonInner({\n themeId: _themeId,\n mode: _mode,\n tone,\n emphasis,\n size,\n ...props\n}: ButtonProps) {\n const recipe = resolveButtonRecipe({ tone, emphasis, size });\n\n return (\n <SurfaceButton {...props} size={recipe.size} tone={recipe.tone} variant={recipe.variant} />\n );\n}\n\nexport const Button = withZoraThemeScope(ButtonInner);\n"]}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import type { ButtonIconSpec, ButtonProps as SurfaceButtonProps } from '@ankhorage/surface';
|
|
2
2
|
import type React from 'react';
|
|
3
3
|
import type { ZoraControlSize, ZoraEmphasis, ZoraTone } from '../../internal/recipes';
|
|
4
|
-
|
|
4
|
+
import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
|
|
5
|
+
export interface ButtonProps extends ZoraBaseProps, Omit<SurfaceButtonProps, 'children' | 'size' | 'tone' | 'variant'> {
|
|
5
6
|
children?: React.ReactNode;
|
|
6
7
|
tone?: ZoraTone;
|
|
7
8
|
emphasis?: ZoraEmphasis;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/button/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,IAAI,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAC5F,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,eAAe,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/button/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,IAAI,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAC5F,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,eAAe,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AACtF,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,MAAM,WAAW,WACf,SAAQ,aAAa,EAAE,IAAI,CAAC,kBAAkB,EAAE,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACzF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,WAAW,CAAC,EAAE,cAAc,CAAC;IAC7B,YAAY,CAAC,EAAE,cAAc,CAAC;CAC/B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/button/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ButtonIconSpec, ButtonProps as SurfaceButtonProps } from '@ankhorage/surface';\nimport type React from 'react';\n\nimport type { ZoraControlSize, ZoraEmphasis, ZoraTone } from '../../internal/recipes';\n\nexport interface ButtonProps
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/button/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ButtonIconSpec, ButtonProps as SurfaceButtonProps } from '@ankhorage/surface';\nimport type React from 'react';\n\nimport type { ZoraControlSize, ZoraEmphasis, ZoraTone } from '../../internal/recipes';\nimport type { ZoraBaseProps } from '../../theme/ZoraBaseProps';\n\nexport interface ButtonProps\n extends ZoraBaseProps, Omit<SurfaceButtonProps, 'children' | 'size' | 'tone' | 'variant'> {\n children?: React.ReactNode;\n tone?: ZoraTone;\n emphasis?: ZoraEmphasis;\n size?: ZoraControlSize;\n leadingIcon?: ButtonIconSpec;\n trailingIcon?: ButtonIconSpec;\n}\n"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { CardProps } from './types';
|
|
3
|
-
export declare
|
|
3
|
+
export declare const Card: React.FC<CardProps>;
|
|
4
4
|
//# sourceMappingURL=Card.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/card/Card.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/card/Card.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAgEzC,eAAO,MAAM,IAAI,qBAAgC,CAAC"}
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import { Box, Card as SurfaceCard, Stack } from '@ankhorage/surface';
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { resolveCardVariant } from '../../internal/recipes';
|
|
4
|
+
import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
|
|
4
5
|
import { Heading } from '../heading';
|
|
5
6
|
import { Text } from '../text';
|
|
6
|
-
|
|
7
|
+
function CardInner({ themeId: _themeId, mode: _mode, children, title, description, eyebrow, actions, footer, tone = 'default', compact = false, onPress, ...props }) {
|
|
7
8
|
const hasHeader = [eyebrow, title, description, actions].some((item) => item != null);
|
|
8
9
|
const hasFooter = footer !== undefined;
|
|
9
10
|
const gap = compact ? 's' : 'm';
|
|
@@ -31,4 +32,5 @@ export function Card({ children, title, description, eyebrow, actions, footer, t
|
|
|
31
32
|
</Stack>
|
|
32
33
|
</SurfaceCard>);
|
|
33
34
|
}
|
|
35
|
+
export const Card = withZoraThemeScope(CardInner);
|
|
34
36
|
//# sourceMappingURL=Card.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../src/components/card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,IAAI,WAAW,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AACrE,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAG/B,
|
|
1
|
+
{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../src/components/card/Card.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Box, Card as SurfaceCard, Stack } from '@ankhorage/surface';\nimport React from 'react';\n\nimport { resolveCardVariant } from '../../internal/recipes';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport { Heading } from '../heading';\nimport { Text } from '../text';\nimport type { CardProps } from './types';\n\nfunction CardInner({\n themeId: _themeId,\n mode: _mode,\n children,\n title,\n description,\n eyebrow,\n actions,\n footer,\n tone = 'default',\n compact = false,\n onPress,\n ...props\n}: CardProps) {\n const hasHeader = [eyebrow, title, description, actions].some((item) => item != null);\n const hasFooter = footer !== undefined;\n const gap = compact ? 's' : 'm';\n const isInteractive = Boolean(onPress) && !actions;\n\n return (\n <SurfaceCard\n {...props}\n onPress={isInteractive ? onPress : undefined}\n p={compact ? 'm' : 'l'}\n radius=\"l\"\n variant={resolveCardVariant(tone)}\n >\n <Stack gap={gap}>\n {hasHeader ? (\n <Stack\n align={{ base: 'flex-start', md: 'center' }}\n direction={{ base: 'column', md: 'row' }}\n gap=\"m\"\n justify=\"space-between\"\n >\n <Box flex={1}>\n <Stack gap=\"xs\">\n {eyebrow ? (\n <Text tone=\"muted\" variant=\"caption\" weight=\"semiBold\">\n {eyebrow}\n </Text>\n ) : null}\n {title ? <Heading level={compact ? 4 : 3}>{title}</Heading> : null}\n {description ? (\n <Text tone=\"muted\" variant=\"bodySmall\">\n {description}\n </Text>\n ) : null}\n </Stack>\n </Box>\n {actions ? <Box>{actions}</Box> : null}\n </Stack>\n ) : null}\n\n {children ? <Box>{children}</Box> : null}\n\n {hasFooter ? <Box pt=\"xs\">{footer}</Box> : null}\n </Stack>\n </SurfaceCard>\n );\n}\n\nexport const Card = withZoraThemeScope(CardInner);\n"]}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import type { CardProps as SurfaceCardProps } from '@ankhorage/surface';
|
|
2
2
|
import type React from 'react';
|
|
3
3
|
import type { ZoraCardTone } from '../../internal/recipes';
|
|
4
|
-
|
|
4
|
+
import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
|
|
5
|
+
export interface CardProps extends ZoraBaseProps, Omit<SurfaceCardProps, 'children' | 'p' | 'radius' | 'variant'> {
|
|
5
6
|
children?: React.ReactNode;
|
|
6
7
|
title?: React.ReactNode;
|
|
7
8
|
description?: React.ReactNode;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/card/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACxE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/card/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACxE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,MAAM,WAAW,SACf,SAAQ,aAAa,EAAE,IAAI,CAAC,gBAAgB,EAAE,UAAU,GAAG,GAAG,GAAG,QAAQ,GAAG,SAAS,CAAC;IACtF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/card/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { CardProps as SurfaceCardProps } from '@ankhorage/surface';\nimport type React from 'react';\n\nimport type { ZoraCardTone } from '../../internal/recipes';\n\nexport interface CardProps
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/card/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { CardProps as SurfaceCardProps } from '@ankhorage/surface';\nimport type React from 'react';\n\nimport type { ZoraCardTone } from '../../internal/recipes';\nimport type { ZoraBaseProps } from '../../theme/ZoraBaseProps';\n\nexport interface CardProps\n extends ZoraBaseProps, Omit<SurfaceCardProps, 'children' | 'p' | 'radius' | 'variant'> {\n children?: React.ReactNode;\n title?: React.ReactNode;\n description?: React.ReactNode;\n eyebrow?: React.ReactNode;\n actions?: React.ReactNode;\n footer?: React.ReactNode;\n tone?: ZoraCardTone;\n compact?: boolean;\n}\n"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { HeadingProps } from './types';
|
|
3
|
-
export declare
|
|
3
|
+
export declare const Heading: React.FC<HeadingProps>;
|
|
4
4
|
//# sourceMappingURL=Heading.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Heading.d.ts","sourceRoot":"","sources":["../../../src/components/heading/Heading.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Heading.d.ts","sourceRoot":"","sources":["../../../src/components/heading/Heading.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAmF5C,eAAO,MAAM,OAAO,wBAAmC,CAAC"}
|
|
@@ -2,6 +2,7 @@ import { resolveResponsive, useResponsiveRuntime } from '@ankhorage/surface';
|
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { Text as ReactNativeText } from 'react-native';
|
|
4
4
|
import { useZoraTheme } from '../../theme/useZoraTheme';
|
|
5
|
+
import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
|
|
5
6
|
import { resolveHeadingRecipe, resolveHeadingSizeFromLevel } from './resolveHeadingRecipe';
|
|
6
7
|
function resolveHeadingContent({ children, text, i18nKey, }) {
|
|
7
8
|
if (children !== undefined) {
|
|
@@ -15,7 +16,7 @@ function resolveHeadingContent({ children, text, i18nKey, }) {
|
|
|
15
16
|
}
|
|
16
17
|
return i18nKey;
|
|
17
18
|
}
|
|
18
|
-
|
|
19
|
+
function HeadingInner({ themeId: _themeId, mode: _mode, children, text, i18nKey, level = 2, size, tone = 'default', align, weight, italic = false, numberOfLines, ellipsizeMode, selectable, accessibilityLabel, accessibilityHint, accessibilityRole = 'header', nativeID, testID, }) {
|
|
19
20
|
const { theme } = useZoraTheme();
|
|
20
21
|
const { breakpoint } = useResponsiveRuntime();
|
|
21
22
|
const content = resolveHeadingContent({ children, text, i18nKey });
|
|
@@ -37,4 +38,5 @@ export function Heading({ children, text, i18nKey, level = 2, size, tone = 'defa
|
|
|
37
38
|
{content}
|
|
38
39
|
</ReactNativeText>);
|
|
39
40
|
}
|
|
41
|
+
export const Heading = withZoraThemeScope(HeadingInner);
|
|
40
42
|
//# sourceMappingURL=Heading.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Heading.js","sourceRoot":"","sources":["../../../src/components/heading/Heading.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAC7E,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAEvD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,oBAAoB,EAAE,2BAA2B,EAAE,MAAM,wBAAwB,CAAC;AAG3F,SAAS,qBAAqB,CAAC,EAC7B,QAAQ,EACR,IAAI,EACJ,OAAO,GAKR;IACC,IAAI,QAAQ,KAAK,SAAS,EAAE,CAAC;QAC3B,OAAO,QAAQ,CAAC;IAClB,CAAC;IAED,IAAI,IAAI,KAAK,SAAS,EAAE,CAAC;QACvB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,OAAO,CAAC;AACjB,CAAC;AAED,
|
|
1
|
+
{"version":3,"file":"Heading.js","sourceRoot":"","sources":["../../../src/components/heading/Heading.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAC7E,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAEvD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACpE,OAAO,EAAE,oBAAoB,EAAE,2BAA2B,EAAE,MAAM,wBAAwB,CAAC;AAG3F,SAAS,qBAAqB,CAAC,EAC7B,QAAQ,EACR,IAAI,EACJ,OAAO,GAKR;IACC,IAAI,QAAQ,KAAK,SAAS,EAAE,CAAC;QAC3B,OAAO,QAAQ,CAAC;IAClB,CAAC;IAED,IAAI,IAAI,KAAK,SAAS,EAAE,CAAC;QACvB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,OAAO,CAAC;AACjB,CAAC;AAED,SAAS,YAAY,CAAC,EACpB,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,KAAK,GAAG,CAAC,EACT,IAAI,EACJ,IAAI,GAAG,SAAS,EAChB,KAAK,EACL,MAAM,EACN,MAAM,GAAG,KAAK,EACd,aAAa,EACb,aAAa,EACb,UAAU,EACV,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,GAAG,QAAQ,EAC5B,QAAQ,EACR,MAAM,GACO;IACb,MAAM,EAAE,KAAK,EAAE,GAAG,YAAY,EAAE,CAAC;IACjC,MAAM,EAAE,UAAU,EAAE,GAAG,oBAAoB,EAAE,CAAC;IAC9C,MAAM,OAAO,GAAG,qBAAqB,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CAAC;IACnE,MAAM,YAAY,GAAG,iBAAiB,CAAC,IAAI,EAAE,UAAU,CAAC,IAAI,2BAA2B,CAAC,KAAK,CAAC,CAAC;IAC/F,MAAM,YAAY,GAAG,iBAAiB,CAAC,IAAI,EAAE,UAAU,CAAC,IAAI,SAAS,CAAC;IACtE,MAAM,aAAa,GAAG,iBAAiB,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;IAC3D,MAAM,cAAc,GAAG,iBAAiB,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;IAE7D,IAAI,OAAO,KAAK,IAAI,IAAI,OAAO,KAAK,SAAS,EAAE,CAAC;QAC9C,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,CAAC,eAAe,CACd,iBAAiB,CAAC,CAAC,iBAAiB,CAAC,CACrC,kBAAkB,CAAC,CAAC,kBAAkB,CAAC,CACvC,iBAAiB,CAAC,CAAC,iBAAiB,CAAC,CACrC,aAAa,CAAC,CAAC,aAAa,CAAC,CAC7B,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,aAAa,CAAC,CAAC,aAAa,CAAC,CAC7B,UAAU,CAAC,CAAC,UAAU,CAAC,CACvB,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,KAAK,CAAC,CAAC,oBAAoB,CAAC,KAAK,EAAE;YACjC,KAAK,EAAE,aAAa;YACpB,MAAM;YACN,KAAK;YACL,IAAI,EAAE,YAAY;YAClB,IAAI,EAAE,YAAY;YAClB,MAAM,EAAE,cAAc;SACvB,CAAC,CAAC,CAEH;MAAA,CAAC,OAAO,CACV;IAAA,EAAE,eAAe,CAAC,CACnB,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,kBAAkB,CAAC,YAAY,CAAC,CAAC","sourcesContent":["import { resolveResponsive, useResponsiveRuntime } from '@ankhorage/surface';\nimport React from 'react';\nimport { Text as ReactNativeText } from 'react-native';\n\nimport { useZoraTheme } from '../../theme/useZoraTheme';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport { resolveHeadingRecipe, resolveHeadingSizeFromLevel } from './resolveHeadingRecipe';\nimport type { HeadingProps } from './types';\n\nfunction resolveHeadingContent({\n children,\n text,\n i18nKey,\n}: {\n children: HeadingProps['children'];\n text: HeadingProps['text'];\n i18nKey: HeadingProps['i18nKey'];\n}): React.ReactNode {\n if (children !== undefined) {\n return children;\n }\n\n if (text !== undefined) {\n return text;\n }\n\n if (!i18nKey) {\n return null;\n }\n\n return i18nKey;\n}\n\nfunction HeadingInner({\n themeId: _themeId,\n mode: _mode,\n children,\n text,\n i18nKey,\n level = 2,\n size,\n tone = 'default',\n align,\n weight,\n italic = false,\n numberOfLines,\n ellipsizeMode,\n selectable,\n accessibilityLabel,\n accessibilityHint,\n accessibilityRole = 'header',\n nativeID,\n testID,\n}: HeadingProps) {\n const { theme } = useZoraTheme();\n const { breakpoint } = useResponsiveRuntime();\n const content = resolveHeadingContent({ children, text, i18nKey });\n const resolvedSize = resolveResponsive(size, breakpoint) ?? resolveHeadingSizeFromLevel(level);\n const resolvedTone = resolveResponsive(tone, breakpoint) ?? 'default';\n const resolvedAlign = resolveResponsive(align, breakpoint);\n const resolvedWeight = resolveResponsive(weight, breakpoint);\n\n if (content === null || content === undefined) {\n return null;\n }\n\n return (\n <ReactNativeText\n accessibilityHint={accessibilityHint}\n accessibilityLabel={accessibilityLabel}\n accessibilityRole={accessibilityRole}\n ellipsizeMode={ellipsizeMode}\n nativeID={nativeID}\n numberOfLines={numberOfLines}\n selectable={selectable}\n testID={testID}\n style={resolveHeadingRecipe(theme, {\n align: resolvedAlign,\n italic,\n level,\n size: resolvedSize,\n tone: resolvedTone,\n weight: resolvedWeight,\n })}\n >\n {content}\n </ReactNativeText>\n );\n}\n\nexport const Heading = withZoraThemeScope(HeadingInner);\n"]}
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
import type { Responsive } from '@ankhorage/surface';
|
|
2
2
|
import type React from 'react';
|
|
3
3
|
import type { AccessibilityRole, TextStyle } from 'react-native';
|
|
4
|
+
import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
|
|
4
5
|
export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
|
|
5
6
|
export type HeadingSize = 'display' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
|
|
6
7
|
export type HeadingTone = 'default' | 'muted' | 'subtle' | 'inverse' | 'primary' | 'danger' | 'success' | 'warning';
|
|
7
8
|
export type HeadingAlign = NonNullable<TextStyle['textAlign']>;
|
|
8
9
|
export type HeadingWeight = 'regular' | 'medium' | 'semiBold' | 'bold';
|
|
9
|
-
export interface HeadingProps {
|
|
10
|
+
export interface HeadingProps extends ZoraBaseProps {
|
|
10
11
|
children?: React.ReactNode;
|
|
11
12
|
text?: string;
|
|
12
13
|
i18nKey?: string;
|
|
@@ -23,6 +24,5 @@ export interface HeadingProps {
|
|
|
23
24
|
accessibilityHint?: string;
|
|
24
25
|
accessibilityRole?: AccessibilityRole;
|
|
25
26
|
nativeID?: string;
|
|
26
|
-
testID?: string;
|
|
27
27
|
}
|
|
28
28
|
//# sourceMappingURL=types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/heading/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEjE,MAAM,MAAM,YAAY,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAEjD,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE9E,MAAM,MAAM,WAAW,GACnB,SAAS,GACT,OAAO,GACP,QAAQ,GACR,SAAS,GACT,SAAS,GACT,QAAQ,GACR,SAAS,GACT,SAAS,CAAC;AAEd,MAAM,MAAM,YAAY,GAAG,WAAW,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC,CAAC;AAE/D,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAC;AAEvE,MAAM,WAAW,
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/heading/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEjE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,MAAM,MAAM,YAAY,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAEjD,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE9E,MAAM,MAAM,WAAW,GACnB,SAAS,GACT,OAAO,GACP,QAAQ,GACR,SAAS,GACT,SAAS,GACT,QAAQ,GACR,SAAS,GACT,SAAS,CAAC;AAEd,MAAM,MAAM,YAAY,GAAG,WAAW,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC,CAAC;AAE/D,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAC;AAEvE,MAAM,WAAW,YAAa,SAAQ,aAAa;IACjD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,IAAI,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC,CAAC;IAC/B,IAAI,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC,CAAC;IAC/B,KAAK,CAAC,EAAE,UAAU,CAAC,YAAY,CAAC,CAAC;IACjC,MAAM,CAAC,EAAE,UAAU,CAAC,aAAa,CAAC,CAAC;IACnC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IACpD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/heading/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { Responsive } from '@ankhorage/surface';\nimport type React from 'react';\nimport type { AccessibilityRole, TextStyle } from 'react-native';\n\nexport type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;\n\nexport type HeadingSize = 'display' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n\nexport type HeadingTone =\n | 'default'\n | 'muted'\n | 'subtle'\n | 'inverse'\n | 'primary'\n | 'danger'\n | 'success'\n | 'warning';\n\nexport type HeadingAlign = NonNullable<TextStyle['textAlign']>;\n\nexport type HeadingWeight = 'regular' | 'medium' | 'semiBold' | 'bold';\n\nexport interface HeadingProps {\n children?: React.ReactNode;\n text?: string;\n i18nKey?: string;\n level?: HeadingLevel;\n size?: Responsive<HeadingSize>;\n tone?: Responsive<HeadingTone>;\n align?: Responsive<HeadingAlign>;\n weight?: Responsive<HeadingWeight>;\n italic?: boolean;\n numberOfLines?: number;\n ellipsizeMode?: 'head' | 'middle' | 'tail' | 'clip';\n selectable?: boolean;\n accessibilityLabel?: string;\n accessibilityHint?: string;\n accessibilityRole?: AccessibilityRole;\n nativeID?: string;\n
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/heading/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { Responsive } from '@ankhorage/surface';\nimport type React from 'react';\nimport type { AccessibilityRole, TextStyle } from 'react-native';\n\nimport type { ZoraBaseProps } from '../../theme/ZoraBaseProps';\n\nexport type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;\n\nexport type HeadingSize = 'display' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n\nexport type HeadingTone =\n | 'default'\n | 'muted'\n | 'subtle'\n | 'inverse'\n | 'primary'\n | 'danger'\n | 'success'\n | 'warning';\n\nexport type HeadingAlign = NonNullable<TextStyle['textAlign']>;\n\nexport type HeadingWeight = 'regular' | 'medium' | 'semiBold' | 'bold';\n\nexport interface HeadingProps extends ZoraBaseProps {\n children?: React.ReactNode;\n text?: string;\n i18nKey?: string;\n level?: HeadingLevel;\n size?: Responsive<HeadingSize>;\n tone?: Responsive<HeadingTone>;\n align?: Responsive<HeadingAlign>;\n weight?: Responsive<HeadingWeight>;\n italic?: boolean;\n numberOfLines?: number;\n ellipsizeMode?: 'head' | 'middle' | 'tail' | 'clip';\n selectable?: boolean;\n accessibilityLabel?: string;\n accessibilityHint?: string;\n accessibilityRole?: AccessibilityRole;\n nativeID?: string;\n}\n"]}
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import { type IconProps as SurfaceIconProps } from '@ankhorage/surface';
|
|
2
2
|
import React from 'react';
|
|
3
|
-
|
|
4
|
-
export
|
|
3
|
+
import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
|
|
4
|
+
export interface IconProps extends ZoraBaseProps, SurfaceIconProps {
|
|
5
|
+
}
|
|
6
|
+
export declare const Icon: React.FC<IconProps>;
|
|
5
7
|
//# sourceMappingURL=Icon.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../src/components/icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,KAAK,SAAS,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAC7F,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../src/components/icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,KAAK,SAAS,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAC7F,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,MAAM,WAAW,SAAU,SAAQ,aAAa,EAAE,gBAAgB;CAAG;AAMrE,eAAO,MAAM,IAAI,qBAAgC,CAAC"}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { Icon as SurfaceIcon } from '@ankhorage/surface';
|
|
2
2
|
import React from 'react';
|
|
3
|
-
|
|
3
|
+
import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
|
|
4
|
+
function IconInner({ themeId: _themeId, mode: _mode, ...props }) {
|
|
4
5
|
return <SurfaceIcon {...props}/>;
|
|
5
6
|
}
|
|
7
|
+
export const Icon = withZoraThemeScope(IconInner);
|
|
6
8
|
//# sourceMappingURL=Icon.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../../src/components/icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,IAAI,WAAW,EAAsC,MAAM,oBAAoB,CAAC;AAC7F,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../../src/components/icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,IAAI,WAAW,EAAsC,MAAM,oBAAoB,CAAC;AAC7F,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAKpE,SAAS,SAAS,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,KAAK,EAAa;IACxE,OAAO,CAAC,WAAW,CAAC,IAAI,KAAK,CAAC,EAAG,CAAC;AACpC,CAAC;AAED,MAAM,CAAC,MAAM,IAAI,GAAG,kBAAkB,CAAC,SAAS,CAAC,CAAC","sourcesContent":["import { Icon as SurfaceIcon, type IconProps as SurfaceIconProps } from '@ankhorage/surface';\nimport React from 'react';\n\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport type { ZoraBaseProps } from '../../theme/ZoraBaseProps';\n\nexport interface IconProps extends ZoraBaseProps, SurfaceIconProps {}\n\nfunction IconInner({ themeId: _themeId, mode: _mode, ...props }: IconProps) {\n return <SurfaceIcon {...props} />;\n}\n\nexport const Icon = withZoraThemeScope(IconInner);\n"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { IconButtonProps } from './types';
|
|
3
|
-
export declare
|
|
3
|
+
export declare const IconButton: React.FC<IconButtonProps>;
|
|
4
4
|
//# sourceMappingURL=IconButton.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../src/components/icon-button/IconButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../src/components/icon-button/IconButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AA0B/C,eAAO,MAAM,UAAU,2BAAsC,CAAC"}
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import { IconButton as SurfaceIconButton } from '@ankhorage/surface';
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { resolveButtonRecipe } from '../../internal/recipes';
|
|
4
|
-
|
|
4
|
+
import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
|
|
5
|
+
function IconButtonInner({ themeId: _themeId, mode: _mode, icon, label, emphasis = 'ghost', tone = 'neutral', size = 'm', ...props }) {
|
|
5
6
|
const recipe = resolveButtonRecipe({ emphasis, tone, size });
|
|
6
7
|
return (<SurfaceIconButton {...props} icon={icon} accessibilityLabel={label} size={recipe.size} tone={recipe.tone} variant={recipe.variant}/>);
|
|
7
8
|
}
|
|
9
|
+
export const IconButton = withZoraThemeScope(IconButtonInner);
|
|
8
10
|
//# sourceMappingURL=IconButton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconButton.js","sourceRoot":"","sources":["../../../src/components/icon-button/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,IAAI,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AACrE,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;
|
|
1
|
+
{"version":3,"file":"IconButton.js","sourceRoot":"","sources":["../../../src/components/icon-button/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,IAAI,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AACrE,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAGpE,SAAS,eAAe,CAAC,EACvB,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,IAAI,EACJ,KAAK,EACL,QAAQ,GAAG,OAAO,EAClB,IAAI,GAAG,SAAS,EAChB,IAAI,GAAG,GAAG,EACV,GAAG,KAAK,EACQ;IAChB,MAAM,MAAM,GAAG,mBAAmB,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;IAE7D,OAAO,CACL,CAAC,iBAAiB,CAChB,IAAI,KAAK,CAAC,CACV,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,kBAAkB,CAAC,CAAC,KAAK,CAAC,CAC1B,IAAI,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAClB,IAAI,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAClB,OAAO,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,EACxB,CACH,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,kBAAkB,CAAC,eAAe,CAAC,CAAC","sourcesContent":["import { IconButton as SurfaceIconButton } from '@ankhorage/surface';\nimport React from 'react';\n\nimport { resolveButtonRecipe } from '../../internal/recipes';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport type { IconButtonProps } from './types';\n\nfunction IconButtonInner({\n themeId: _themeId,\n mode: _mode,\n icon,\n label,\n emphasis = 'ghost',\n tone = 'neutral',\n size = 'm',\n ...props\n}: IconButtonProps) {\n const recipe = resolveButtonRecipe({ emphasis, tone, size });\n\n return (\n <SurfaceIconButton\n {...props}\n icon={icon}\n accessibilityLabel={label}\n size={recipe.size}\n tone={recipe.tone}\n variant={recipe.variant}\n />\n );\n}\n\nexport const IconButton = withZoraThemeScope(IconButtonInner);\n"]}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import type { ButtonIconSpec } from '@ankhorage/surface';
|
|
2
2
|
import type { ZoraControlSize, ZoraEmphasis, ZoraTone } from '../../internal/recipes';
|
|
3
|
-
|
|
3
|
+
import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
|
|
4
|
+
export interface IconButtonProps extends ZoraBaseProps {
|
|
4
5
|
icon: ButtonIconSpec;
|
|
5
6
|
label: string;
|
|
6
7
|
emphasis?: ZoraEmphasis;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/icon-button/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEzD,OAAO,KAAK,EAAE,eAAe,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/icon-button/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEzD,OAAO,KAAK,EAAE,eAAe,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AACtF,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,MAAM,WAAW,eAAgB,SAAQ,aAAa;IACpD,IAAI,EAAE,cAAc,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/icon-button/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ButtonIconSpec } from '@ankhorage/surface';\n\nimport type { ZoraControlSize, ZoraEmphasis, ZoraTone } from '../../internal/recipes';\n\nexport interface IconButtonProps {\n icon: ButtonIconSpec;\n label: string;\n emphasis?: ZoraEmphasis;\n tone?: ZoraTone;\n size?: ZoraControlSize;\n disabled?: boolean;\n loading?: boolean;\n onPress?: () => void;\n testID?: string;\n}\n"]}
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/icon-button/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ButtonIconSpec } from '@ankhorage/surface';\n\nimport type { ZoraControlSize, ZoraEmphasis, ZoraTone } from '../../internal/recipes';\nimport type { ZoraBaseProps } from '../../theme/ZoraBaseProps';\n\nexport interface IconButtonProps extends ZoraBaseProps {\n icon: ButtonIconSpec;\n label: string;\n emphasis?: ZoraEmphasis;\n tone?: ZoraTone;\n size?: ZoraControlSize;\n disabled?: boolean;\n loading?: boolean;\n onPress?: () => void;\n testID?: string;\n}\n"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { TextProps } from './types';
|
|
3
|
-
export declare
|
|
3
|
+
export declare const Text: React.FC<TextProps>;
|
|
4
4
|
//# sourceMappingURL=Text.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../src/components/text/Text.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../src/components/text/Text.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAiFzC,eAAO,MAAM,IAAI,qBAAgC,CAAC"}
|
|
@@ -2,6 +2,7 @@ import { resolveResponsive, useResponsiveRuntime } from '@ankhorage/surface';
|
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { Text as ReactNativeText } from 'react-native';
|
|
4
4
|
import { useZoraTheme } from '../../theme/useZoraTheme';
|
|
5
|
+
import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
|
|
5
6
|
import { resolveTextStyle } from './resolveTextRecipe';
|
|
6
7
|
function resolveTextContent({ children, text, i18nKey, }) {
|
|
7
8
|
if (children !== undefined) {
|
|
@@ -15,7 +16,7 @@ function resolveTextContent({ children, text, i18nKey, }) {
|
|
|
15
16
|
}
|
|
16
17
|
return i18nKey;
|
|
17
18
|
}
|
|
18
|
-
|
|
19
|
+
function TextInner({ themeId: _themeId, mode: _mode, children, text, i18nKey, variant = 'body', tone = 'default', align, weight, italic = false, numberOfLines, ellipsizeMode, selectable, accessibilityLabel, accessibilityHint, accessibilityRole, nativeID, testID, }) {
|
|
19
20
|
const { theme } = useZoraTheme();
|
|
20
21
|
const { breakpoint } = useResponsiveRuntime();
|
|
21
22
|
const content = resolveTextContent({ children, text, i18nKey });
|
|
@@ -36,4 +37,5 @@ export function Text({ children, text, i18nKey, variant = 'body', tone = 'defaul
|
|
|
36
37
|
{content}
|
|
37
38
|
</ReactNativeText>);
|
|
38
39
|
}
|
|
40
|
+
export const Text = withZoraThemeScope(TextInner);
|
|
39
41
|
//# sourceMappingURL=Text.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.js","sourceRoot":"","sources":["../../../src/components/text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAC7E,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAEvD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAGvD,SAAS,kBAAkB,CAAC,EAC1B,QAAQ,EACR,IAAI,EACJ,OAAO,GAKR;IACC,IAAI,QAAQ,KAAK,SAAS,EAAE,CAAC;QAC3B,OAAO,QAAQ,CAAC;IAClB,CAAC;IAED,IAAI,IAAI,KAAK,SAAS,EAAE,CAAC;QACvB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,OAAO,CAAC;AACjB,CAAC;AAED,
|
|
1
|
+
{"version":3,"file":"Text.js","sourceRoot":"","sources":["../../../src/components/text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAC7E,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAEvD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAGvD,SAAS,kBAAkB,CAAC,EAC1B,QAAQ,EACR,IAAI,EACJ,OAAO,GAKR;IACC,IAAI,QAAQ,KAAK,SAAS,EAAE,CAAC;QAC3B,OAAO,QAAQ,CAAC;IAClB,CAAC;IAED,IAAI,IAAI,KAAK,SAAS,EAAE,CAAC;QACvB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,OAAO,CAAC;AACjB,CAAC;AAED,SAAS,SAAS,CAAC,EACjB,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,OAAO,GAAG,MAAM,EAChB,IAAI,GAAG,SAAS,EAChB,KAAK,EACL,MAAM,EACN,MAAM,GAAG,KAAK,EACd,aAAa,EACb,aAAa,EACb,UAAU,EACV,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,QAAQ,EACR,MAAM,GACI;IACV,MAAM,EAAE,KAAK,EAAE,GAAG,YAAY,EAAE,CAAC;IACjC,MAAM,EAAE,UAAU,EAAE,GAAG,oBAAoB,EAAE,CAAC;IAC9C,MAAM,OAAO,GAAG,kBAAkB,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CAAC;IAChE,MAAM,eAAe,GAAG,iBAAiB,CAAC,OAAO,EAAE,UAAU,CAAC,IAAI,MAAM,CAAC;IACzE,MAAM,aAAa,GAAG,gBAAgB,CAAC;QACrC,KAAK;QACL,UAAU;QACV,OAAO,EAAE,eAAe;QACxB,IAAI;QACJ,KAAK;QACL,MAAM;QACN,MAAM;KACP,CAAC,CAAC;IAEH,IAAI,OAAO,KAAK,IAAI,IAAI,OAAO,KAAK,SAAS,EAAE,CAAC;QAC9C,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,CAAC,eAAe,CACd,iBAAiB,CAAC,CAAC,iBAAiB,CAAC,CACrC,kBAAkB,CAAC,CAAC,kBAAkB,CAAC,CACvC,iBAAiB,CAAC,CAAC,iBAAiB,CAAC,CACrC,aAAa,CAAC,CAAC,aAAa,CAAC,CAC7B,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,aAAa,CAAC,CAAC,aAAa,CAAC,CAC7B,UAAU,CAAC,CAAC,UAAU,CAAC,CACvB,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,KAAK,CAAC,CAAC,aAAa,CAAC,CAErB;MAAA,CAAC,OAAO,CACV;IAAA,EAAE,eAAe,CAAC,CACnB,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,IAAI,GAAG,kBAAkB,CAAC,SAAS,CAAC,CAAC","sourcesContent":["import { resolveResponsive, useResponsiveRuntime } from '@ankhorage/surface';\nimport React from 'react';\nimport { Text as ReactNativeText } from 'react-native';\n\nimport { useZoraTheme } from '../../theme/useZoraTheme';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport { resolveTextStyle } from './resolveTextRecipe';\nimport type { TextProps } from './types';\n\nfunction resolveTextContent({\n children,\n text,\n i18nKey,\n}: {\n children: TextProps['children'];\n text: TextProps['text'];\n i18nKey: TextProps['i18nKey'];\n}): React.ReactNode {\n if (children !== undefined) {\n return children;\n }\n\n if (text !== undefined) {\n return text;\n }\n\n if (!i18nKey) {\n return null;\n }\n\n return i18nKey;\n}\n\nfunction TextInner({\n themeId: _themeId,\n mode: _mode,\n children,\n text,\n i18nKey,\n variant = 'body',\n tone = 'default',\n align,\n weight,\n italic = false,\n numberOfLines,\n ellipsizeMode,\n selectable,\n accessibilityLabel,\n accessibilityHint,\n accessibilityRole,\n nativeID,\n testID,\n}: TextProps) {\n const { theme } = useZoraTheme();\n const { breakpoint } = useResponsiveRuntime();\n const content = resolveTextContent({ children, text, i18nKey });\n const resolvedVariant = resolveResponsive(variant, breakpoint) ?? 'body';\n const resolvedStyle = resolveTextStyle({\n theme,\n breakpoint,\n variant: resolvedVariant,\n tone,\n align,\n weight,\n italic,\n });\n\n if (content === null || content === undefined) {\n return null;\n }\n\n return (\n <ReactNativeText\n accessibilityHint={accessibilityHint}\n accessibilityLabel={accessibilityLabel}\n accessibilityRole={accessibilityRole}\n ellipsizeMode={ellipsizeMode}\n nativeID={nativeID}\n numberOfLines={numberOfLines}\n selectable={selectable}\n testID={testID}\n style={resolvedStyle}\n >\n {content}\n </ReactNativeText>\n );\n}\n\nexport const Text = withZoraThemeScope(TextInner);\n"]}
|
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import type { Responsive } from '@ankhorage/surface';
|
|
2
2
|
import type React from 'react';
|
|
3
3
|
import type { AccessibilityRole, TextStyle } from 'react-native';
|
|
4
|
+
import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
|
|
4
5
|
export type TextVariant = 'body' | 'lead' | 'bodySmall' | 'caption' | 'label' | 'eyebrow' | 'code';
|
|
5
6
|
export type TextTone = 'default' | 'muted' | 'subtle' | 'inverse' | 'primary' | 'danger' | 'success' | 'warning';
|
|
6
7
|
export type TextWeight = 'regular' | 'medium' | 'semiBold' | 'bold';
|
|
7
8
|
export type TextAlign = NonNullable<TextStyle['textAlign']>;
|
|
8
|
-
export interface TextProps {
|
|
9
|
+
export interface TextProps extends ZoraBaseProps {
|
|
9
10
|
children?: React.ReactNode;
|
|
10
11
|
text?: string;
|
|
11
12
|
i18nKey?: string;
|
|
@@ -21,6 +22,5 @@ export interface TextProps {
|
|
|
21
22
|
accessibilityHint?: string;
|
|
22
23
|
accessibilityRole?: AccessibilityRole;
|
|
23
24
|
nativeID?: string;
|
|
24
|
-
testID?: string;
|
|
25
25
|
}
|
|
26
26
|
//# sourceMappingURL=types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/text/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEjE,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,MAAM,GAAG,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;AAEnG,MAAM,MAAM,QAAQ,GAChB,SAAS,GACT,OAAO,GACP,QAAQ,GACR,SAAS,GACT,SAAS,GACT,QAAQ,GACR,SAAS,GACT,SAAS,CAAC;AAEd,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAC;AAEpE,MAAM,MAAM,SAAS,GAAG,WAAW,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC,CAAC;AAE5D,MAAM,WAAW,
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/text/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEjE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,MAAM,GAAG,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;AAEnG,MAAM,MAAM,QAAQ,GAChB,SAAS,GACT,OAAO,GACP,QAAQ,GACR,SAAS,GACT,SAAS,GACT,QAAQ,GACR,SAAS,GACT,SAAS,CAAC;AAEd,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAC;AAEpE,MAAM,MAAM,SAAS,GAAG,WAAW,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC,CAAC;AAE5D,MAAM,WAAW,SAAU,SAAQ,aAAa;IAC9C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC,CAAC;IAClC,IAAI,CAAC,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC;IAC5B,KAAK,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;IAC9B,MAAM,CAAC,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC;IAChC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IACpD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB"}
|