@ankhorage/zora 2.4.0 → 2.4.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (72) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/README.md +189 -7
  3. package/dist/components/skeleton/Skeleton.d.ts +4 -0
  4. package/dist/components/skeleton/Skeleton.d.ts.map +1 -0
  5. package/dist/components/skeleton/Skeleton.js +10 -0
  6. package/dist/components/skeleton/Skeleton.js.map +1 -0
  7. package/dist/components/skeleton/SkeletonCard.d.ts +4 -0
  8. package/dist/components/skeleton/SkeletonCard.d.ts.map +1 -0
  9. package/dist/components/skeleton/SkeletonCard.js +24 -0
  10. package/dist/components/skeleton/SkeletonCard.js.map +1 -0
  11. package/dist/components/skeleton/SkeletonList.d.ts +4 -0
  12. package/dist/components/skeleton/SkeletonList.d.ts.map +1 -0
  13. package/dist/components/skeleton/SkeletonList.js +33 -0
  14. package/dist/components/skeleton/SkeletonList.js.map +1 -0
  15. package/dist/components/skeleton/SkeletonText.d.ts +4 -0
  16. package/dist/components/skeleton/SkeletonText.d.ts.map +1 -0
  17. package/dist/components/skeleton/SkeletonText.js +21 -0
  18. package/dist/components/skeleton/SkeletonText.js.map +1 -0
  19. package/dist/components/skeleton/index.d.ts +6 -0
  20. package/dist/components/skeleton/index.d.ts.map +1 -0
  21. package/dist/components/skeleton/index.js +5 -0
  22. package/dist/components/skeleton/index.js.map +1 -0
  23. package/dist/components/skeleton/meta.d.ts +33 -0
  24. package/dist/components/skeleton/meta.d.ts.map +1 -0
  25. package/dist/components/skeleton/meta.js +33 -0
  26. package/dist/components/skeleton/meta.js.map +1 -0
  27. package/dist/components/skeleton/types.d.ts +32 -0
  28. package/dist/components/skeleton/types.d.ts.map +1 -0
  29. package/dist/components/skeleton/types.js +2 -0
  30. package/dist/components/skeleton/types.js.map +1 -0
  31. package/dist/components/toast/Toast.d.ts +4 -0
  32. package/dist/components/toast/Toast.d.ts.map +1 -0
  33. package/dist/components/toast/Toast.js +8 -0
  34. package/dist/components/toast/Toast.js.map +1 -0
  35. package/dist/components/toast/ToastProvider.d.ts +4 -0
  36. package/dist/components/toast/ToastProvider.d.ts.map +1 -0
  37. package/dist/components/toast/ToastProvider.js +9 -0
  38. package/dist/components/toast/ToastProvider.js.map +1 -0
  39. package/dist/components/toast/index.d.ts +5 -0
  40. package/dist/components/toast/index.d.ts.map +1 -0
  41. package/dist/components/toast/index.js +4 -0
  42. package/dist/components/toast/index.js.map +1 -0
  43. package/dist/components/toast/meta.d.ts +17 -0
  44. package/dist/components/toast/meta.d.ts.map +1 -0
  45. package/dist/components/toast/meta.js +17 -0
  46. package/dist/components/toast/meta.js.map +1 -0
  47. package/dist/components/toast/types.d.ts +12 -0
  48. package/dist/components/toast/types.d.ts.map +1 -0
  49. package/dist/components/toast/types.js +2 -0
  50. package/dist/components/toast/types.js.map +1 -0
  51. package/dist/index.d.ts +4 -0
  52. package/dist/index.d.ts.map +1 -1
  53. package/dist/index.js +2 -0
  54. package/dist/index.js.map +1 -1
  55. package/dist/metadata/componentMeta.d.ts.map +1 -1
  56. package/dist/metadata/componentMeta.js +8 -0
  57. package/dist/metadata/componentMeta.js.map +1 -1
  58. package/package.json +1 -1
  59. package/src/components/skeleton/Skeleton.tsx +32 -0
  60. package/src/components/skeleton/SkeletonCard.tsx +39 -0
  61. package/src/components/skeleton/SkeletonList.tsx +52 -0
  62. package/src/components/skeleton/SkeletonText.tsx +45 -0
  63. package/src/components/skeleton/index.ts +13 -0
  64. package/src/components/skeleton/meta.ts +37 -0
  65. package/src/components/skeleton/types.ts +36 -0
  66. package/src/components/toast/Toast.tsx +11 -0
  67. package/src/components/toast/ToastProvider.tsx +12 -0
  68. package/src/components/toast/index.ts +4 -0
  69. package/src/components/toast/meta.ts +19 -0
  70. package/src/components/toast/types.ts +18 -0
  71. package/src/index.ts +12 -0
  72. package/src/metadata/componentMeta.ts +13 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # Changelog
2
2
 
3
+ ## 2.4.2
4
+
5
+ ### Patch Changes
6
+
7
+ - a1934d8: Add Skeleton loading primitives for placeholder card, list, and text states.
8
+
9
+ ## 2.4.1
10
+
11
+ ### Patch Changes
12
+
13
+ - 2fdb077: Expose a ZORA Toast API backed by the existing Surface Toast implementation.
14
+
3
15
  ## 2.4.0
4
16
 
5
17
  ### Minor Changes
package/README.md CHANGED
@@ -320,9 +320,14 @@ Metadata model overview:
320
320
  - `Rating`
321
321
  - `SearchBar`
322
322
  - `Select`
323
+ - `Skeleton`
324
+ - `SkeletonCard`
325
+ - `SkeletonList`
326
+ - `SkeletonText`
323
327
  - `Tabs`
324
328
  - `Text`
325
329
  - `Textarea`
330
+ - `Toast`
326
331
  - `Toolbar`
327
332
  - `ToolbarAction`
328
333
 
@@ -1182,6 +1187,93 @@ ZORA props:
1182
1187
 
1183
1188
  </details>
1184
1189
 
1190
+ ### `Toast` / `ToastProvider`
1191
+
1192
+ Transient app feedback backed by Surface Toast. Use `ToastProvider` once near
1193
+ the app root, then call `useToast()` from child components.
1194
+
1195
+ ```tsx
1196
+ import React from 'react';
1197
+ import { Button, ToastProvider, useToast, ZoraProvider } from '@ankhorage/zora';
1198
+
1199
+ function SaveButton() {
1200
+ const { showToast } = useToast();
1201
+
1202
+ return (
1203
+ <Button
1204
+ onPress={() => {
1205
+ showToast({
1206
+ title: 'Saved',
1207
+ description: 'Your changes were saved.',
1208
+ status: 'success',
1209
+ });
1210
+ }}
1211
+ >
1212
+ Save
1213
+ </Button>
1214
+ );
1215
+ }
1216
+
1217
+ export function App() {
1218
+ return (
1219
+ <ZoraProvider>
1220
+ <ToastProvider>
1221
+ <SaveButton />
1222
+ </ToastProvider>
1223
+ </ZoraProvider>
1224
+ );
1225
+ }
1226
+ ```
1227
+
1228
+ Use `Toast` directly only for explicit inline rendering or component previews.
1229
+ Most app code should use `ToastProvider` and `useToast()` so transient feedback
1230
+ is managed from one provider boundary.
1231
+
1232
+ <details>
1233
+ <summary>Props</summary>
1234
+
1235
+ `Toast` props:
1236
+
1237
+ | Prop | Type | Default | Notes |
1238
+ | ------------- | ----------------- | ----------- | ------------------------- |
1239
+ | `title` | `React.ReactNode` | - | Primary toast message. |
1240
+ | `description` | `React.ReactNode` | - | Supporting toast message. |
1241
+ | `status` | `ToastStatus` | `'default'` | Semantic status color. |
1242
+ | `onDismiss` | `() => void` | - | Dismiss handler. |
1243
+ | `testID` | `string` | - | Test id. |
1244
+
1245
+ `ToastProvider` props:
1246
+
1247
+ | Prop | Type | Default | Notes |
1248
+ | ----------------- | ----------------- | ------- | ------------------------------ |
1249
+ | `children` | `React.ReactNode` | - | App subtree with toast access. |
1250
+ | `defaultDuration` | `number` | `4000` | Default auto-dismiss duration. |
1251
+
1252
+ Hook API:
1253
+
1254
+ | API | Type | Notes |
1255
+ | -------------- | ----------------------------------- | --------------------------------- |
1256
+ | `showToast` | `(options: ToastOptions) => string` | Shows a toast and returns its id. |
1257
+ | `dismissToast` | `(id: string) => void` | Dismisses a toast by id. |
1258
+
1259
+ `ToastOptions`:
1260
+
1261
+ | Prop | Type | Default | Notes |
1262
+ | ------------- | ----------------- | ----------- | ------------------------------------------ |
1263
+ | `id` | `string` | generated | Optional stable id for replacing/tracking. |
1264
+ | `title` | `React.ReactNode` | - | Primary toast message. |
1265
+ | `description` | `React.ReactNode` | - | Supporting toast message. |
1266
+ | `status` | `ToastStatus` | `'default'` | Semantic status color. |
1267
+ | `duration` | `number` | provider | Auto-dismiss duration in milliseconds. |
1268
+ | `testID` | `string` | - | Test id forwarded to the toast. |
1269
+
1270
+ Inherited props:
1271
+
1272
+ ZORA reuses the existing Surface Toast implementation. No separate ZORA toast
1273
+ state machine is introduced.
1274
+
1275
+ </details>
1276
+
1185
1277
  ### `AppBar`
1186
1278
 
1187
1279
  Product-facing top app bar backed by the Surface `AppBar` primitive.
@@ -1233,6 +1325,96 @@ None. ZORA composes Surface internally and exposes a product API.
1233
1325
 
1234
1326
  </details>
1235
1327
 
1328
+ ### `Skeleton` / `SkeletonText` / `SkeletonCard` / `SkeletonList`
1329
+
1330
+ Static loading placeholders for screens, cards, lists, feeds, dashboards, media
1331
+ previews, and form/detail loading states.
1332
+
1333
+ Use `Skeleton` for a single placeholder block, `SkeletonText` for text-line
1334
+ placeholders, `SkeletonCard` for card-shaped loading states, and `SkeletonList`
1335
+ for list/feed loading states.
1336
+
1337
+ ```tsx
1338
+ <Skeleton width="60%" height={16} radius="s" />
1339
+
1340
+ <SkeletonText lines={3} />
1341
+
1342
+ <SkeletonCard media actions />
1343
+
1344
+ <SkeletonList rows={5} avatar />
1345
+ ```
1346
+
1347
+ `Skeleton` components are static and dependency-free in v1. They do not own data
1348
+ fetching, Suspense, shimmer animation, or provider-level loading state.
1349
+
1350
+ <details>
1351
+ <summary>Props</summary>
1352
+
1353
+ `Skeleton` props:
1354
+
1355
+ | Prop | Type | Default | Notes |
1356
+ | --------- | -------------------- | -------- | ------------------------------------ |
1357
+ | `width` | `SkeletonDimension` | `'100%'` | Placeholder width. |
1358
+ | `height` | `BoxProps['height']` | `16` | Placeholder height. |
1359
+ | `radius` | `SkeletonRadius` | `'m'` | Border radius token. |
1360
+ | `testID` | `string` | - | Test id. |
1361
+ | `mode` | `ZoraThemeMode` | - | Optional scoped theme mode override. |
1362
+ | `themeId` | `ZoraThemeId` | - | Optional scoped theme id override. |
1363
+
1364
+ `SkeletonText` props:
1365
+
1366
+ | Prop | Type | Default | Notes |
1367
+ | --------------- | ------------------- | -------- | ------------------------------------------ |
1368
+ | `lines` | `number` | `3` | Number of placeholder text lines. |
1369
+ | `lineHeight` | `number` | `12` | Height of each placeholder line. |
1370
+ | `gap` | `StackProps['gap']` | `'xs'` | Spacing between placeholder lines. |
1371
+ | `width` | `SkeletonDimension` | `'100%'` | Width for normal lines. |
1372
+ | `lastLineWidth` | `SkeletonDimension` | `'70%'` | Width for the final line when `lines > 1`. |
1373
+ | `testID` | `string` | - | Test id. |
1374
+ | `mode` | `ZoraThemeMode` | - | Optional scoped theme mode override. |
1375
+ | `themeId` | `ZoraThemeId` | - | Optional scoped theme id override. |
1376
+
1377
+ `SkeletonCard` props:
1378
+
1379
+ | Prop | Type | Default | Notes |
1380
+ | --------- | --------------- | ------- | -------------------------------------- |
1381
+ | `media` | `boolean` | `false` | Adds a media placeholder area. |
1382
+ | `actions` | `boolean` | `false` | Adds placeholder action buttons. |
1383
+ | `lines` | `number` | `3` | Number of body text placeholder lines. |
1384
+ | `compact` | `boolean` | `false` | Uses tighter card spacing. |
1385
+ | `testID` | `string` | - | Test id. |
1386
+ | `mode` | `ZoraThemeMode` | - | Optional scoped theme mode override. |
1387
+ | `themeId` | `ZoraThemeId` | - | Optional scoped theme id override. |
1388
+
1389
+ `SkeletonList` props:
1390
+
1391
+ | Prop | Type | Default | Notes |
1392
+ | --------- | --------------------- | ----------- | ----------------------------------------- |
1393
+ | `rows` | `number` | `5` | Number of placeholder rows. |
1394
+ | `avatar` | `boolean` | `false` | Adds circular leading placeholders. |
1395
+ | `media` | `boolean` | `false` | Adds rectangular leading placeholders. |
1396
+ | `lines` | `number` | `2` | Number of text lines per row description. |
1397
+ | `variant` | `SkeletonListVariant` | `'divider'` | List row variant: `divider` or `card`. |
1398
+ | `compact` | `boolean` | `false` | Uses tighter row spacing. |
1399
+ | `testID` | `string` | - | Test id. |
1400
+ | `mode` | `ZoraThemeMode` | - | Optional scoped theme mode override. |
1401
+ | `themeId` | `ZoraThemeId` | - | Optional scoped theme id override. |
1402
+
1403
+ Type aliases:
1404
+
1405
+ ```ts
1406
+ type SkeletonListVariant = 'divider' | 'card';
1407
+ type SkeletonDimension = BoxProps['width'];
1408
+ type SkeletonRadius = BoxProps['radius'];
1409
+ ```
1410
+
1411
+ Inherited props:
1412
+
1413
+ No inherited props. Skeleton components are declared directly by ZORA and expose
1414
+ semantic loading-state options instead of raw style props.
1415
+
1416
+ </details>
1417
+
1236
1418
  ### `Toolbar`
1237
1419
 
1238
1420
  Horizontal shell for actions and tools.
@@ -1384,13 +1566,13 @@ Example with overlay (e.g. mobile panel or drawer):
1384
1566
 
1385
1567
  ZORA props:
1386
1568
 
1387
- | Prop | Type | Default | Notes |
1388
- | ----------- | ---------------------- | ------- | ------------------------------------------------------------------------------------ |
1389
- | `children` | `React.ReactNode` | - | Main application content. |
1390
- | `header` | `React.ReactNode` | - | Optional top section (e.g. toolbar or navigation). |
1391
- | `footer` | `React.ReactNode` | - | Optional bottom section (e.g. tab bar or actions). |
1392
- | `overlay` | `React.ReactNode` | - | Optional overlay layer rendered above content (e.g. drawer, modal, floating panels). |
1393
- | `testID` | `string` | - | Forwarded to the root Surface container. |
1569
+ | Prop | Type | Default | Notes |
1570
+ | ---------- | ----------------- | ------- | ------------------------------------------------------------------------------------ |
1571
+ | `children` | `React.ReactNode` | - | Main application content. |
1572
+ | `header` | `React.ReactNode` | - | Optional top section (e.g. toolbar or navigation). |
1573
+ | `footer` | `React.ReactNode` | - | Optional bottom section (e.g. tab bar or actions). |
1574
+ | `overlay` | `React.ReactNode` | - | Optional overlay layer rendered above content (e.g. drawer, modal, floating panels). |
1575
+ | `testID` | `string` | - | Forwarded to the root Surface container. |
1394
1576
 
1395
1577
  Inherited props:
1396
1578
 
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ import type { SkeletonProps } from './types';
3
+ export declare const Skeleton: (props: SkeletonProps) => React.ReactElement | null;
4
+ //# sourceMappingURL=Skeleton.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/Skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AA0B7C,eAAO,MAAM,QAAQ,qDAAoC,CAAC"}
@@ -0,0 +1,10 @@
1
+ import React from 'react';
2
+ import { Box } from '../../foundation';
3
+ import { useZoraTheme } from '../../theme/useZoraTheme';
4
+ import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
5
+ function SkeletonInner({ themeId: _themeId, mode: _mode, testID, width = '100%', height = 16, radius = 'm', }) {
6
+ const { theme } = useZoraTheme();
7
+ return (<Box accessibilityLabel="Loading" accessibilityRole="text" bg={theme.semantics.neutral.surfaceHover} height={height} radius={radius} testID={testID} width={width} style={{ opacity: 0.72 }}/>);
8
+ }
9
+ export const Skeleton = withZoraThemeScope(SkeletonInner);
10
+ //# sourceMappingURL=Skeleton.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Skeleton.js","sourceRoot":"","sources":["../../../src/components/skeleton/Skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAGpE,SAAS,aAAa,CAAC,EACrB,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,MAAM,EACN,KAAK,GAAG,MAAM,EACd,MAAM,GAAG,EAAE,EACX,MAAM,GAAG,GAAG,GACE;IACd,MAAM,EAAE,KAAK,EAAE,GAAG,YAAY,EAAE,CAAC;IAEjC,OAAO,CACL,CAAC,GAAG,CACF,kBAAkB,CAAC,SAAS,CAC5B,iBAAiB,CAAC,MAAM,CACxB,EAAE,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,YAAY,CAAC,CACzC,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,KAAK,CAAC,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EACzB,CACH,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,kBAAkB,CAAC,aAAa,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport { Box } from '../../foundation';\nimport { useZoraTheme } from '../../theme/useZoraTheme';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport type { SkeletonProps } from './types';\n\nfunction SkeletonInner({\n themeId: _themeId,\n mode: _mode,\n testID,\n width = '100%',\n height = 16,\n radius = 'm',\n}: SkeletonProps) {\n const { theme } = useZoraTheme();\n\n return (\n <Box\n accessibilityLabel=\"Loading\"\n accessibilityRole=\"text\"\n bg={theme.semantics.neutral.surfaceHover}\n height={height}\n radius={radius}\n testID={testID}\n width={width}\n style={{ opacity: 0.72 }}\n />\n );\n}\n\nexport const Skeleton = withZoraThemeScope(SkeletonInner);\n"]}
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ import type { SkeletonCardProps } from './types';
3
+ export declare const SkeletonCard: (props: SkeletonCardProps) => React.ReactElement | null;
4
+ //# sourceMappingURL=SkeletonCard.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"SkeletonCard.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/SkeletonCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AA8BjD,eAAO,MAAM,YAAY,yDAAwC,CAAC"}
@@ -0,0 +1,24 @@
1
+ import React from 'react';
2
+ import { Stack } from '../../foundation';
3
+ import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
4
+ import { ButtonGroup } from '../button-group';
5
+ import { Card } from '../card';
6
+ import { Skeleton } from './Skeleton';
7
+ import { SkeletonText } from './SkeletonText';
8
+ function SkeletonCardInner({ themeId: _themeId, mode: _mode, testID, media = false, actions = false, lines = 3, compact = false, }) {
9
+ return (<Card compact={compact} testID={testID} tone="default">
10
+ <Stack gap={compact ? 's' : 'm'}>
11
+ {media ? <Skeleton height={compact ? 120 : 180} radius="m"/> : null}
12
+ <Stack gap="s">
13
+ <Skeleton height={18} radius="full" width="54%"/>
14
+ <SkeletonText lines={lines}/>
15
+ </Stack>
16
+ {actions ? (<ButtonGroup align="end">
17
+ <Skeleton height={36} radius="m" width={88}/>
18
+ <Skeleton height={36} radius="m" width={120}/>
19
+ </ButtonGroup>) : null}
20
+ </Stack>
21
+ </Card>);
22
+ }
23
+ export const SkeletonCard = withZoraThemeScope(SkeletonCardInner);
24
+ //# sourceMappingURL=SkeletonCard.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"SkeletonCard.js","sourceRoot":"","sources":["../../../src/components/skeleton/SkeletonCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACpE,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,SAAS,iBAAiB,CAAC,EACzB,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,MAAM,EACN,KAAK,GAAG,KAAK,EACb,OAAO,GAAG,KAAK,EACf,KAAK,GAAG,CAAC,EACT,OAAO,GAAG,KAAK,GACG;IAClB,OAAO,CACL,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,SAAS,CACpD;MAAA,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAC9B;QAAA,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,GAAG,EAAG,CAAC,CAAC,CAAC,IAAI,CACpE;QAAA,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CACZ;UAAA,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,EAC/C;UAAA,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,EAC7B;QAAA,EAAE,KAAK,CACP;QAAA,CAAC,OAAO,CAAC,CAAC,CAAC,CACT,CAAC,WAAW,CAAC,KAAK,CAAC,KAAK,CACtB;YAAA,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,EAC3C;YAAA,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,EAC9C;UAAA,EAAE,WAAW,CAAC,CACf,CAAC,CAAC,CAAC,IAAI,CACV;MAAA,EAAE,KAAK,CACT;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,YAAY,GAAG,kBAAkB,CAAC,iBAAiB,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport { Stack } from '../../foundation';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport { ButtonGroup } from '../button-group';\nimport { Card } from '../card';\nimport { Skeleton } from './Skeleton';\nimport { SkeletonText } from './SkeletonText';\nimport type { SkeletonCardProps } from './types';\n\nfunction SkeletonCardInner({\n themeId: _themeId,\n mode: _mode,\n testID,\n media = false,\n actions = false,\n lines = 3,\n compact = false,\n}: SkeletonCardProps) {\n return (\n <Card compact={compact} testID={testID} tone=\"default\">\n <Stack gap={compact ? 's' : 'm'}>\n {media ? <Skeleton height={compact ? 120 : 180} radius=\"m\" /> : null}\n <Stack gap=\"s\">\n <Skeleton height={18} radius=\"full\" width=\"54%\" />\n <SkeletonText lines={lines} />\n </Stack>\n {actions ? (\n <ButtonGroup align=\"end\">\n <Skeleton height={36} radius=\"m\" width={88} />\n <Skeleton height={36} radius=\"m\" width={120} />\n </ButtonGroup>\n ) : null}\n </Stack>\n </Card>\n );\n}\n\nexport const SkeletonCard = withZoraThemeScope(SkeletonCardInner);\n"]}
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ import type { SkeletonListProps } from './types';
3
+ export declare const SkeletonList: (props: SkeletonListProps) => React.ReactElement | null;
4
+ //# sourceMappingURL=SkeletonList.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"SkeletonList.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/SkeletonList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AA6CjD,eAAO,MAAM,YAAY,yDAAwC,CAAC"}
@@ -0,0 +1,33 @@
1
+ import React from 'react';
2
+ import { List } from '../../patterns/list';
3
+ import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
4
+ import { Skeleton } from './Skeleton';
5
+ import { SkeletonText } from './SkeletonText';
6
+ function clampRows(rows) {
7
+ if (!Number.isFinite(rows)) {
8
+ return 1;
9
+ }
10
+ return Math.max(1, Math.floor(rows));
11
+ }
12
+ function renderLeading({ avatar, media }) {
13
+ if (media) {
14
+ return <Skeleton height={64} radius="m" width={64}/>;
15
+ }
16
+ if (avatar) {
17
+ return <Skeleton height={40} radius="full" width={40}/>;
18
+ }
19
+ return undefined;
20
+ }
21
+ function SkeletonListInner({ themeId: _themeId, mode: _mode, testID, rows = 5, avatar = false, media = false, lines = 2, variant = 'divider', compact = false, }) {
22
+ const rowCount = clampRows(rows);
23
+ const items = Array.from({ length: rowCount }).map(() => ({
24
+ compact,
25
+ description: <SkeletonText lines={lines}/>,
26
+ leading: renderLeading({ avatar, media }),
27
+ title: <Skeleton height={16} radius="full" width="48%"/>,
28
+ variant,
29
+ }));
30
+ return <List compact={compact} items={items} rowVariant={variant} testID={testID}/>;
31
+ }
32
+ export const SkeletonList = withZoraThemeScope(SkeletonListInner);
33
+ //# sourceMappingURL=SkeletonList.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"SkeletonList.js","sourceRoot":"","sources":["../../../src/components/skeleton/SkeletonList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,IAAI,EAAqB,MAAM,qBAAqB,CAAC;AAC9D,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACpE,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,SAAS,SAAS,CAAC,IAAY;IAC7B,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;QAC3B,OAAO,CAAC,CAAC;IACX,CAAC;IAED,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC;AACvC,CAAC;AAED,SAAS,aAAa,CAAC,EAAE,MAAM,EAAE,KAAK,EAA+C;IACnF,IAAI,KAAK,EAAE,CAAC;QACV,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,EAAG,CAAC;IACxD,CAAC;IAED,IAAI,MAAM,EAAE,CAAC;QACX,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,EAAG,CAAC;IAC3D,CAAC;IAED,OAAO,SAAS,CAAC;AACnB,CAAC;AAED,SAAS,iBAAiB,CAAC,EACzB,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,MAAM,EACN,IAAI,GAAG,CAAC,EACR,MAAM,GAAG,KAAK,EACd,KAAK,GAAG,KAAK,EACb,KAAK,GAAG,CAAC,EACT,OAAO,GAAG,SAAS,EACnB,OAAO,GAAG,KAAK,GACG;IAClB,MAAM,QAAQ,GAAG,SAAS,CAAC,IAAI,CAAC,CAAC;IACjC,MAAM,KAAK,GAAmB,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,CAAC;QACxE,OAAO;QACP,WAAW,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,EAAG;QAC3C,OAAO,EAAE,aAAa,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC;QACzC,KAAK,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,EAAG;QACzD,OAAO;KACR,CAAC,CAAC,CAAC;IAEJ,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,EAAG,CAAC;AACvF,CAAC;AAED,MAAM,CAAC,MAAM,YAAY,GAAG,kBAAkB,CAAC,iBAAiB,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport { List, type ListRowProps } from '../../patterns/list';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport { Skeleton } from './Skeleton';\nimport { SkeletonText } from './SkeletonText';\nimport type { SkeletonListProps } from './types';\n\nfunction clampRows(rows: number): number {\n if (!Number.isFinite(rows)) {\n return 1;\n }\n\n return Math.max(1, Math.floor(rows));\n}\n\nfunction renderLeading({ avatar, media }: Pick<SkeletonListProps, 'avatar' | 'media'>) {\n if (media) {\n return <Skeleton height={64} radius=\"m\" width={64} />;\n }\n\n if (avatar) {\n return <Skeleton height={40} radius=\"full\" width={40} />;\n }\n\n return undefined;\n}\n\nfunction SkeletonListInner({\n themeId: _themeId,\n mode: _mode,\n testID,\n rows = 5,\n avatar = false,\n media = false,\n lines = 2,\n variant = 'divider',\n compact = false,\n}: SkeletonListProps) {\n const rowCount = clampRows(rows);\n const items: ListRowProps[] = Array.from({ length: rowCount }).map(() => ({\n compact,\n description: <SkeletonText lines={lines} />,\n leading: renderLeading({ avatar, media }),\n title: <Skeleton height={16} radius=\"full\" width=\"48%\" />,\n variant,\n }));\n\n return <List compact={compact} items={items} rowVariant={variant} testID={testID} />;\n}\n\nexport const SkeletonList = withZoraThemeScope(SkeletonListInner);\n"]}
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ import type { SkeletonTextProps } from './types';
3
+ export declare const SkeletonText: (props: SkeletonTextProps) => React.ReactElement | null;
4
+ //# sourceMappingURL=SkeletonText.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"SkeletonText.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/SkeletonText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAuCjD,eAAO,MAAM,YAAY,yDAAwC,CAAC"}
@@ -0,0 +1,21 @@
1
+ import React from 'react';
2
+ import { Stack } from '../../foundation';
3
+ import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
4
+ import { Skeleton } from './Skeleton';
5
+ function clampLines(lines) {
6
+ if (!Number.isFinite(lines)) {
7
+ return 1;
8
+ }
9
+ return Math.max(1, Math.floor(lines));
10
+ }
11
+ function SkeletonTextInner({ themeId: _themeId, mode: _mode, testID, lines = 3, lineHeight = 12, gap = 'xs', width = '100%', lastLineWidth = '70%', }) {
12
+ const lineCount = clampLines(lines);
13
+ return (<Stack gap={gap} testID={testID}>
14
+ {Array.from({ length: lineCount }).map((_, index) => {
15
+ const isLastLine = index === lineCount - 1;
16
+ return (<Skeleton height={lineHeight} key={`${index}`} radius="full" width={isLastLine && lineCount > 1 ? lastLineWidth : width}/>);
17
+ })}
18
+ </Stack>);
19
+ }
20
+ export const SkeletonText = withZoraThemeScope(SkeletonTextInner);
21
+ //# sourceMappingURL=SkeletonText.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"SkeletonText.js","sourceRoot":"","sources":["../../../src/components/skeleton/SkeletonText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACpE,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAGtC,SAAS,UAAU,CAAC,KAAa;IAC/B,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC;QAC5B,OAAO,CAAC,CAAC;IACX,CAAC;IAED,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;AACxC,CAAC;AAED,SAAS,iBAAiB,CAAC,EACzB,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,MAAM,EACN,KAAK,GAAG,CAAC,EACT,UAAU,GAAG,EAAE,EACf,GAAG,GAAG,IAAI,EACV,KAAK,GAAG,MAAM,EACd,aAAa,GAAG,KAAK,GACH;IAClB,MAAM,SAAS,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC;IAEpC,OAAO,CACL,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAC9B;MAAA,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE;YAClD,MAAM,UAAU,GAAG,KAAK,KAAK,SAAS,GAAG,CAAC,CAAC;YAC3C,OAAO,CACL,CAAC,QAAQ,CACP,MAAM,CAAC,CAAC,UAAU,CAAC,CACnB,GAAG,CAAC,CAAC,GAAG,KAAK,EAAE,CAAC,CAChB,MAAM,CAAC,MAAM,CACb,KAAK,CAAC,CAAC,UAAU,IAAI,SAAS,GAAG,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,EAC3D,CACH,CAAC;QACJ,CAAC,CAAC,CACJ;IAAA,EAAE,KAAK,CAAC,CACT,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,YAAY,GAAG,kBAAkB,CAAC,iBAAiB,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport { Stack } from '../../foundation';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport { Skeleton } from './Skeleton';\nimport type { SkeletonTextProps } from './types';\n\nfunction clampLines(lines: number): number {\n if (!Number.isFinite(lines)) {\n return 1;\n }\n\n return Math.max(1, Math.floor(lines));\n}\n\nfunction SkeletonTextInner({\n themeId: _themeId,\n mode: _mode,\n testID,\n lines = 3,\n lineHeight = 12,\n gap = 'xs',\n width = '100%',\n lastLineWidth = '70%',\n}: SkeletonTextProps) {\n const lineCount = clampLines(lines);\n\n return (\n <Stack gap={gap} testID={testID}>\n {Array.from({ length: lineCount }).map((_, index) => {\n const isLastLine = index === lineCount - 1;\n return (\n <Skeleton\n height={lineHeight}\n key={`${index}`}\n radius=\"full\"\n width={isLastLine && lineCount > 1 ? lastLineWidth : width}\n />\n );\n })}\n </Stack>\n );\n}\n\nexport const SkeletonText = withZoraThemeScope(SkeletonTextInner);\n"]}
@@ -0,0 +1,6 @@
1
+ export { Skeleton } from './Skeleton';
2
+ export { SkeletonCard } from './SkeletonCard';
3
+ export { SkeletonList } from './SkeletonList';
4
+ export { SkeletonText } from './SkeletonText';
5
+ export type { SkeletonCardProps, SkeletonDimension, SkeletonListProps, SkeletonListVariant, SkeletonProps, SkeletonRadius, SkeletonTextProps, } from './types';
6
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EACV,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,mBAAmB,EACnB,aAAa,EACb,cAAc,EACd,iBAAiB,GAClB,MAAM,SAAS,CAAC"}
@@ -0,0 +1,5 @@
1
+ export { Skeleton } from './Skeleton';
2
+ export { SkeletonCard } from './SkeletonCard';
3
+ export { SkeletonList } from './SkeletonList';
4
+ export { SkeletonText } from './SkeletonText';
5
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/skeleton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC","sourcesContent":["export { Skeleton } from './Skeleton';\nexport { SkeletonCard } from './SkeletonCard';\nexport { SkeletonList } from './SkeletonList';\nexport { SkeletonText } from './SkeletonText';\nexport type {\n SkeletonCardProps,\n SkeletonDimension,\n SkeletonListProps,\n SkeletonListVariant,\n SkeletonProps,\n SkeletonRadius,\n SkeletonTextProps,\n} from './types';\n"]}
@@ -0,0 +1,33 @@
1
+ export declare const skeletonMeta: {
2
+ readonly name: "Skeleton";
3
+ readonly category: "component";
4
+ readonly directManifestNode: false;
5
+ readonly allowedChildren: readonly [];
6
+ readonly note: "Loading placeholder primitive; not represented as a manifest node in v1.";
7
+ readonly props: {};
8
+ };
9
+ export declare const skeletonTextMeta: {
10
+ readonly name: "SkeletonText";
11
+ readonly category: "component";
12
+ readonly directManifestNode: false;
13
+ readonly allowedChildren: readonly [];
14
+ readonly note: "Loading placeholder text composition; not represented as a manifest node in v1.";
15
+ readonly props: {};
16
+ };
17
+ export declare const skeletonCardMeta: {
18
+ readonly name: "SkeletonCard";
19
+ readonly category: "component";
20
+ readonly directManifestNode: false;
21
+ readonly allowedChildren: readonly [];
22
+ readonly note: "Loading placeholder card composition; not represented as a manifest node in v1.";
23
+ readonly props: {};
24
+ };
25
+ export declare const skeletonListMeta: {
26
+ readonly name: "SkeletonList";
27
+ readonly category: "component";
28
+ readonly directManifestNode: false;
29
+ readonly allowedChildren: readonly [];
30
+ readonly note: "Loading placeholder list composition; not represented as a manifest node in v1.";
31
+ readonly props: {};
32
+ };
33
+ //# sourceMappingURL=meta.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/meta.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY;;;;;;;CAOa,CAAC;AAEvC,eAAO,MAAM,gBAAgB;;;;;;;CAOS,CAAC;AAEvC,eAAO,MAAM,gBAAgB;;;;;;;CAOS,CAAC;AAEvC,eAAO,MAAM,gBAAgB;;;;;;;CAOS,CAAC"}
@@ -0,0 +1,33 @@
1
+ export const skeletonMeta = {
2
+ name: 'Skeleton',
3
+ category: 'component',
4
+ directManifestNode: false,
5
+ allowedChildren: [],
6
+ note: 'Loading placeholder primitive; not represented as a manifest node in v1.',
7
+ props: {},
8
+ };
9
+ export const skeletonTextMeta = {
10
+ name: 'SkeletonText',
11
+ category: 'component',
12
+ directManifestNode: false,
13
+ allowedChildren: [],
14
+ note: 'Loading placeholder text composition; not represented as a manifest node in v1.',
15
+ props: {},
16
+ };
17
+ export const skeletonCardMeta = {
18
+ name: 'SkeletonCard',
19
+ category: 'component',
20
+ directManifestNode: false,
21
+ allowedChildren: [],
22
+ note: 'Loading placeholder card composition; not represented as a manifest node in v1.',
23
+ props: {},
24
+ };
25
+ export const skeletonListMeta = {
26
+ name: 'SkeletonList',
27
+ category: 'component',
28
+ directManifestNode: false,
29
+ allowedChildren: [],
30
+ note: 'Loading placeholder list composition; not represented as a manifest node in v1.',
31
+ props: {},
32
+ };
33
+ //# sourceMappingURL=meta.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"meta.js","sourceRoot":"","sources":["../../../src/components/skeleton/meta.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,IAAI,EAAE,UAAU;IAChB,QAAQ,EAAE,WAAW;IACrB,kBAAkB,EAAE,KAAK;IACzB,eAAe,EAAE,EAAE;IACnB,IAAI,EAAE,0EAA0E;IAChF,KAAK,EAAE,EAAE;CAC2B,CAAC;AAEvC,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,IAAI,EAAE,cAAc;IACpB,QAAQ,EAAE,WAAW;IACrB,kBAAkB,EAAE,KAAK;IACzB,eAAe,EAAE,EAAE;IACnB,IAAI,EAAE,iFAAiF;IACvF,KAAK,EAAE,EAAE;CAC2B,CAAC;AAEvC,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,IAAI,EAAE,cAAc;IACpB,QAAQ,EAAE,WAAW;IACrB,kBAAkB,EAAE,KAAK;IACzB,eAAe,EAAE,EAAE;IACnB,IAAI,EAAE,iFAAiF;IACvF,KAAK,EAAE,EAAE;CAC2B,CAAC;AAEvC,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,IAAI,EAAE,cAAc;IACpB,QAAQ,EAAE,WAAW;IACrB,kBAAkB,EAAE,KAAK;IACzB,eAAe,EAAE,EAAE;IACnB,IAAI,EAAE,iFAAiF;IACvF,KAAK,EAAE,EAAE;CAC2B,CAAC","sourcesContent":["import type { ZoraComponentMeta } from '../../metadata';\n\nexport const skeletonMeta = {\n name: 'Skeleton',\n category: 'component',\n directManifestNode: false,\n allowedChildren: [],\n note: 'Loading placeholder primitive; not represented as a manifest node in v1.',\n props: {},\n} as const satisfies ZoraComponentMeta;\n\nexport const skeletonTextMeta = {\n name: 'SkeletonText',\n category: 'component',\n directManifestNode: false,\n allowedChildren: [],\n note: 'Loading placeholder text composition; not represented as a manifest node in v1.',\n props: {},\n} as const satisfies ZoraComponentMeta;\n\nexport const skeletonCardMeta = {\n name: 'SkeletonCard',\n category: 'component',\n directManifestNode: false,\n allowedChildren: [],\n note: 'Loading placeholder card composition; not represented as a manifest node in v1.',\n props: {},\n} as const satisfies ZoraComponentMeta;\n\nexport const skeletonListMeta = {\n name: 'SkeletonList',\n category: 'component',\n directManifestNode: false,\n allowedChildren: [],\n note: 'Loading placeholder list composition; not represented as a manifest node in v1.',\n props: {},\n} as const satisfies ZoraComponentMeta;\n"]}
@@ -0,0 +1,32 @@
1
+ import type { BoxProps, StackProps } from '../../foundation';
2
+ import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
3
+ export type SkeletonRadius = BoxProps['radius'];
4
+ export type SkeletonDimension = BoxProps['width'];
5
+ export type SkeletonListVariant = 'divider' | 'card';
6
+ export interface SkeletonProps extends ZoraBaseProps {
7
+ width?: SkeletonDimension;
8
+ height?: BoxProps['height'];
9
+ radius?: SkeletonRadius;
10
+ }
11
+ export interface SkeletonTextProps extends ZoraBaseProps {
12
+ lines?: number;
13
+ lineHeight?: number;
14
+ gap?: StackProps['gap'];
15
+ width?: SkeletonDimension;
16
+ lastLineWidth?: SkeletonDimension;
17
+ }
18
+ export interface SkeletonCardProps extends ZoraBaseProps {
19
+ media?: boolean;
20
+ actions?: boolean;
21
+ lines?: number;
22
+ compact?: boolean;
23
+ }
24
+ export interface SkeletonListProps extends ZoraBaseProps {
25
+ rows?: number;
26
+ avatar?: boolean;
27
+ media?: boolean;
28
+ lines?: number;
29
+ variant?: SkeletonListVariant;
30
+ compact?: boolean;
31
+ }
32
+ //# sourceMappingURL=types.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,MAAM,MAAM,cAAc,GAAG,QAAQ,CAAC,QAAQ,CAAC,CAAC;AAChD,MAAM,MAAM,iBAAiB,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAC;AAClD,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,MAAM,CAAC;AAErD,MAAM,WAAW,aAAc,SAAQ,aAAa;IAClD,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,MAAM,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAC5B,MAAM,CAAC,EAAE,cAAc,CAAC;CACzB;AAED,MAAM,WAAW,iBAAkB,SAAQ,aAAa;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,GAAG,CAAC,EAAE,UAAU,CAAC,KAAK,CAAC,CAAC;IACxB,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,aAAa,CAAC,EAAE,iBAAiB,CAAC;CACnC;AAED,MAAM,WAAW,iBAAkB,SAAQ,aAAa;IACtD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,iBAAkB,SAAQ,aAAa;IACtD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB"}
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=types.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/skeleton/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { BoxProps, StackProps } from '../../foundation';\nimport type { ZoraBaseProps } from '../../theme/ZoraBaseProps';\n\nexport type SkeletonRadius = BoxProps['radius'];\nexport type SkeletonDimension = BoxProps['width'];\nexport type SkeletonListVariant = 'divider' | 'card';\n\nexport interface SkeletonProps extends ZoraBaseProps {\n width?: SkeletonDimension;\n height?: BoxProps['height'];\n radius?: SkeletonRadius;\n}\n\nexport interface SkeletonTextProps extends ZoraBaseProps {\n lines?: number;\n lineHeight?: number;\n gap?: StackProps['gap'];\n width?: SkeletonDimension;\n lastLineWidth?: SkeletonDimension;\n}\n\nexport interface SkeletonCardProps extends ZoraBaseProps {\n media?: boolean;\n actions?: boolean;\n lines?: number;\n compact?: boolean;\n}\n\nexport interface SkeletonListProps extends ZoraBaseProps {\n rows?: number;\n avatar?: boolean;\n media?: boolean;\n lines?: number;\n variant?: SkeletonListVariant;\n compact?: boolean;\n}\n"]}
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ import type { ToastProps } from './types';
3
+ export declare const Toast: (props: ToastProps) => React.ReactElement | null;
4
+ //# sourceMappingURL=Toast.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../src/components/toast/Toast.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAM1C,eAAO,MAAM,KAAK,kDAAiC,CAAC"}
@@ -0,0 +1,8 @@
1
+ import { Toast as SurfaceToast } from '@ankhorage/surface';
2
+ import React from 'react';
3
+ import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
4
+ function ToastInner({ mode: _mode, themeId: _themeId, ...props }) {
5
+ return <SurfaceToast {...props}/>;
6
+ }
7
+ export const Toast = withZoraThemeScope(ToastInner);
8
+ //# sourceMappingURL=Toast.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Toast.js","sourceRoot":"","sources":["../../../src/components/toast/Toast.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAC3D,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAGpE,SAAS,UAAU,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAc;IAC1E,OAAO,CAAC,YAAY,CAAC,IAAI,KAAK,CAAC,EAAG,CAAC;AACrC,CAAC;AAED,MAAM,CAAC,MAAM,KAAK,GAAG,kBAAkB,CAAC,UAAU,CAAC,CAAC","sourcesContent":["import { Toast as SurfaceToast } from '@ankhorage/surface';\nimport React from 'react';\n\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport type { ToastProps } from './types';\n\nfunction ToastInner({ mode: _mode, themeId: _themeId, ...props }: ToastProps) {\n return <SurfaceToast {...props} />;\n}\n\nexport const Toast = withZoraThemeScope(ToastInner);\n"]}
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ import type { ToastProviderProps } from './types';
3
+ export declare function ToastProvider({ children, defaultDuration }: ToastProviderProps): React.JSX.Element;
4
+ //# sourceMappingURL=ToastProvider.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ToastProvider.d.ts","sourceRoot":"","sources":["../../../src/components/toast/ToastProvider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAElD,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,eAAe,EAAE,EAAE,kBAAkB,qBAM9E"}
@@ -0,0 +1,9 @@
1
+ import { ToastProvider as SurfaceToastProvider } from '@ankhorage/surface';
2
+ import React from 'react';
3
+ export function ToastProvider({ children, defaultDuration }) {
4
+ if (defaultDuration === undefined) {
5
+ return <SurfaceToastProvider>{children}</SurfaceToastProvider>;
6
+ }
7
+ return <SurfaceToastProvider defaultDuration={defaultDuration}>{children}</SurfaceToastProvider>;
8
+ }
9
+ //# sourceMappingURL=ToastProvider.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ToastProvider.js","sourceRoot":"","sources":["../../../src/components/toast/ToastProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,IAAI,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAC3E,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,UAAU,aAAa,CAAC,EAAE,QAAQ,EAAE,eAAe,EAAsB;IAC7E,IAAI,eAAe,KAAK,SAAS,EAAE,CAAC;QAClC,OAAO,CAAC,oBAAoB,CAAC,CAAC,QAAQ,CAAC,EAAE,oBAAoB,CAAC,CAAC;IACjE,CAAC;IAED,OAAO,CAAC,oBAAoB,CAAC,eAAe,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,oBAAoB,CAAC,CAAC;AACnG,CAAC","sourcesContent":["import { ToastProvider as SurfaceToastProvider } from '@ankhorage/surface';\nimport React from 'react';\n\nimport type { ToastProviderProps } from './types';\n\nexport function ToastProvider({ children, defaultDuration }: ToastProviderProps) {\n if (defaultDuration === undefined) {\n return <SurfaceToastProvider>{children}</SurfaceToastProvider>;\n }\n\n return <SurfaceToastProvider defaultDuration={defaultDuration}>{children}</SurfaceToastProvider>;\n}\n"]}
@@ -0,0 +1,5 @@
1
+ export { Toast } from './Toast';
2
+ export { ToastProvider } from './ToastProvider';
3
+ export type { ToastOptions, ToastProps, ToastProviderProps, ToastStatus } from './types';
4
+ export { useToast } from '@ankhorage/surface';
5
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/toast/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,YAAY,EAAE,UAAU,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AACzF,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC"}