@ankhorage/zora 1.0.5 → 1.0.6
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 +101 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/dist/patterns/list/List.d.ts +4 -0
- package/dist/patterns/list/List.d.ts.map +1 -0
- package/dist/patterns/list/List.js +35 -0
- package/dist/patterns/list/List.js.map +1 -0
- package/dist/patterns/list/ListRow.d.ts +4 -0
- package/dist/patterns/list/ListRow.d.ts.map +1 -0
- package/dist/patterns/list/ListRow.js +108 -0
- package/dist/patterns/list/ListRow.js.map +1 -0
- package/dist/patterns/list/ListSection.d.ts +4 -0
- package/dist/patterns/list/ListSection.d.ts.map +1 -0
- package/dist/patterns/list/ListSection.js +14 -0
- package/dist/patterns/list/ListSection.js.map +1 -0
- package/dist/patterns/list/index.d.ts +5 -0
- package/dist/patterns/list/index.d.ts.map +1 -0
- package/dist/patterns/list/index.js +4 -0
- package/dist/patterns/list/index.js.map +1 -0
- package/dist/patterns/list/resolveListSeparator.d.ts +5 -0
- package/dist/patterns/list/resolveListSeparator.d.ts.map +1 -0
- package/dist/patterns/list/resolveListSeparator.js +6 -0
- package/dist/patterns/list/resolveListSeparator.js.map +1 -0
- package/dist/patterns/list/types.d.ts +55 -0
- package/dist/patterns/list/types.d.ts.map +1 -0
- package/dist/patterns/list/types.js +2 -0
- package/dist/patterns/list/types.js.map +1 -0
- package/package.json +1 -1
- package/src/index.ts +9 -0
- package/src/patterns/list/List.tsx +72 -0
- package/src/patterns/list/ListRow.tsx +193 -0
- package/src/patterns/list/ListSection.tsx +36 -0
- package/src/patterns/list/index.ts +11 -0
- package/src/patterns/list/resolveListSeparator.test.ts +18 -0
- package/src/patterns/list/resolveListSeparator.ts +8 -0
- package/src/patterns/list/types.ts +67 -0
- package/src/showcaseCoverage.test.ts +3 -0
- package/src/theme/themeScopeStructure.test.ts +4 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 1.0.6
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 9d9f997: Add common UI primitives: `Avatar`, `AvatarGroup`, `Chip`, `ChipGroup`, `SearchBar`, and `FilterBar`. Add list building blocks: `List`, `ListRow`, and `ListSection`. Also add `InputTrailingAction` / `trailingAction` support to `Input`.
|
|
8
|
+
|
|
3
9
|
## 1.0.5
|
|
4
10
|
|
|
5
11
|
### Patch Changes
|
package/README.md
CHANGED
|
@@ -1273,6 +1273,107 @@ No inherited props. `FilterBarProps` is declared directly by ZORA.
|
|
|
1273
1273
|
|
|
1274
1274
|
</details>
|
|
1275
1275
|
|
|
1276
|
+
### `List`
|
|
1277
|
+
|
|
1278
|
+
List wrapper that renders `ListRow` items with dividers or spacing, or accepts custom children.
|
|
1279
|
+
|
|
1280
|
+
```tsx
|
|
1281
|
+
<List
|
|
1282
|
+
items={[
|
|
1283
|
+
{ title: 'Account', description: 'Profile and security', onPress: () => undefined },
|
|
1284
|
+
{ title: 'Notifications', trailing: <Badge>On</Badge> },
|
|
1285
|
+
]}
|
|
1286
|
+
/>
|
|
1287
|
+
```
|
|
1288
|
+
|
|
1289
|
+
<details>
|
|
1290
|
+
<summary>Props</summary>
|
|
1291
|
+
|
|
1292
|
+
ZORA props:
|
|
1293
|
+
|
|
1294
|
+
| Prop | Type | Default | Notes |
|
|
1295
|
+
| ------------ | ----------------- | ----------- | ----------------------------------------------------- |
|
|
1296
|
+
| `items` | `ListRowProps[]` | - | Items mode. Mutually exclusive with `children`. |
|
|
1297
|
+
| `children` | `React.ReactNode` | - | Custom children mode. |
|
|
1298
|
+
| `rowVariant` | `ListRowVariant` | `'divider'` | Default variant applied when an item omits `variant`. |
|
|
1299
|
+
| `compact` | `boolean` | `false` | Default compact value applied to rows. |
|
|
1300
|
+
| `testID` | `string` | - | Test id. |
|
|
1301
|
+
|
|
1302
|
+
Behavior notes:
|
|
1303
|
+
|
|
1304
|
+
- In items mode, ZORA inserts `Divider` between `variant="divider"` rows and `Spacer` between `variant="card"` rows.
|
|
1305
|
+
|
|
1306
|
+
Inherited props:
|
|
1307
|
+
|
|
1308
|
+
No inherited props. `ListProps` is declared directly by ZORA.
|
|
1309
|
+
|
|
1310
|
+
</details>
|
|
1311
|
+
|
|
1312
|
+
### `ListRow`
|
|
1313
|
+
|
|
1314
|
+
Single list row with leading/trailing slots, optional metadata, and a structured action model.
|
|
1315
|
+
|
|
1316
|
+
```tsx
|
|
1317
|
+
<ListRow title="Profile" description="Update your details" onPress={() => undefined} />
|
|
1318
|
+
```
|
|
1319
|
+
|
|
1320
|
+
<details>
|
|
1321
|
+
<summary>Props</summary>
|
|
1322
|
+
|
|
1323
|
+
ZORA props:
|
|
1324
|
+
|
|
1325
|
+
| Prop | Type | Default | Notes |
|
|
1326
|
+
| ------------- | ----------------- | ----------- | ---------------------------------------------------------------- |
|
|
1327
|
+
| `title` | `React.ReactNode` | - | Required row title. |
|
|
1328
|
+
| `description` | `React.ReactNode` | - | Supporting description. |
|
|
1329
|
+
| `meta` | `React.ReactNode` | - | Small secondary metadata below description. |
|
|
1330
|
+
| `leading` | `React.ReactNode` | - | Leading slot (icon/avatar/media). |
|
|
1331
|
+
| `trailing` | `React.ReactNode` | - | Trailing slot (badges/meta). |
|
|
1332
|
+
| `variant` | `ListRowVariant` | `'divider'` | `divider` or `card`. |
|
|
1333
|
+
| `compact` | `boolean` | `false` | Uses tighter padding and typography spacing. |
|
|
1334
|
+
| `selected` | `boolean` | `false` | Selected styling state. |
|
|
1335
|
+
| `disabled` | `boolean` | `false` | Disables interaction and mutes presentation. |
|
|
1336
|
+
| `onPress` | `() => void` | - | Makes the row pressable. Mutually exclusive with `action`. |
|
|
1337
|
+
| `action` | `React.ReactNode` | - | Trailing interactive content. Mutually exclusive with `onPress`. |
|
|
1338
|
+
| `testID` | `string` | - | Test id. |
|
|
1339
|
+
|
|
1340
|
+
Inherited props:
|
|
1341
|
+
|
|
1342
|
+
No inherited props. `ListRowProps` is declared directly by ZORA.
|
|
1343
|
+
|
|
1344
|
+
</details>
|
|
1345
|
+
|
|
1346
|
+
### `ListSection`
|
|
1347
|
+
|
|
1348
|
+
Section wrapper for list content with an optional `SectionHeader`.
|
|
1349
|
+
|
|
1350
|
+
```tsx
|
|
1351
|
+
<ListSection title="Settings" items={[{ title: 'Account' }]} />
|
|
1352
|
+
```
|
|
1353
|
+
|
|
1354
|
+
<details>
|
|
1355
|
+
<summary>Props</summary>
|
|
1356
|
+
|
|
1357
|
+
ZORA props:
|
|
1358
|
+
|
|
1359
|
+
| Prop | Type | Default | Notes |
|
|
1360
|
+
| ------------- | ----------------- | ----------- | ----------------------------------------------------- |
|
|
1361
|
+
| `title` | `React.ReactNode` | - | Optional section title (renders `SectionHeader`). |
|
|
1362
|
+
| `description` | `React.ReactNode` | - | Optional section description. |
|
|
1363
|
+
| `eyebrow` | `React.ReactNode` | - | Optional eyebrow above the title. |
|
|
1364
|
+
| `actions` | `React.ReactNode` | - | Optional trailing header actions. |
|
|
1365
|
+
| `items` | `ListRowProps[]` | - | Items mode list content. |
|
|
1366
|
+
| `children` | `React.ReactNode` | - | Custom children mode list content. |
|
|
1367
|
+
| `rowVariant` | `ListRowVariant` | `'divider'` | Default variant applied when an item omits `variant`. |
|
|
1368
|
+
| `compact` | `boolean` | `false` | Default compact value applied to rows. |
|
|
1369
|
+
| `testID` | `string` | - | Test id. |
|
|
1370
|
+
|
|
1371
|
+
Inherited props:
|
|
1372
|
+
|
|
1373
|
+
No inherited props. `ListSectionProps` is declared directly by ZORA.
|
|
1374
|
+
|
|
1375
|
+
</details>
|
|
1376
|
+
|
|
1276
1377
|
### `SettingsRow`
|
|
1277
1378
|
|
|
1278
1379
|
Compact settings row with optional metadata, control, and press handling.
|
package/dist/index.d.ts
CHANGED
|
@@ -74,6 +74,8 @@ export type { FilterBarProps } from './patterns/filter-bar';
|
|
|
74
74
|
export { FilterBar } from './patterns/filter-bar';
|
|
75
75
|
export type { InspectorFieldProps } from './patterns/inspector-field';
|
|
76
76
|
export { InspectorField } from './patterns/inspector-field';
|
|
77
|
+
export type { ListChildrenProps, ListItemsProps, ListProps, ListRowProps, ListRowVariant, ListSectionProps, } from './patterns/list';
|
|
78
|
+
export { List, ListRow, ListSection } from './patterns/list';
|
|
77
79
|
export type { NoticeProps } from './patterns/notice';
|
|
78
80
|
export { Notice } from './patterns/notice';
|
|
79
81
|
export type { PanelProps } from './patterns/panel';
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
package/dist/index.js
CHANGED
|
@@ -36,6 +36,7 @@ export { DisclosureSection } from './patterns/disclosure-section';
|
|
|
36
36
|
export { EmptyState } from './patterns/empty-state';
|
|
37
37
|
export { FilterBar } from './patterns/filter-bar';
|
|
38
38
|
export { InspectorField } from './patterns/inspector-field';
|
|
39
|
+
export { List, ListRow, ListSection } from './patterns/list';
|
|
39
40
|
export { Notice } from './patterns/notice';
|
|
40
41
|
export { Panel } from './patterns/panel';
|
|
41
42
|
export { ResponsivePanel } from './patterns/responsive-panel';
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAEpE,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAExD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAE3C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEzC,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAEhE,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEzC,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAEpD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAmB7C,OAAO,EACL,IAAI,EACJ,WAAW,EACX,SAAS,EACT,SAAS,EACT,eAAe,EACf,iBAAiB,EACjB,aAAa,EACb,cAAc,EACd,aAAa,GACd,MAAM,mBAAmB,CAAC;AAS3B,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAE/C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEzC,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAEtD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAE3C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAE3C,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAEvD,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAEpD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEzC,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEzC,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAc9D,OAAO,EACL,GAAG,EACH,MAAM,EACN,SAAS,EACT,OAAO,EACP,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,MAAM,EACN,KAAK,EACL,OAAO,GACR,MAAM,cAAc,CAAC;AAEtB,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAE9C,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAElD,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAErC,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAElD,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAEpD,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAE1D,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAExD,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AActD,OAAO,EAAE,kBAAkB,EAAE,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAKtF,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAEhE,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAElE,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpD,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAElD,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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","sourcesContent":["export type { AvatarProps, AvatarShape, AvatarSize } from './components/avatar';\nexport { Avatar, resolveAvatarInitials } from './components/avatar';\nexport type { AvatarGroupItem, AvatarGroupProps } from './components/avatar-group';\nexport { AvatarGroup } from './components/avatar-group';\nexport type { BadgeProps } from './components/badge';\nexport { Badge } from './components/badge';\nexport type { ButtonProps } from './components/button';\nexport { Button } from './components/button';\nexport type { CardProps } from './components/card';\nexport { Card } from './components/card';\nexport type { CheckboxGroupOption, CheckboxGroupProps, CheckboxProps } from './components/checkbox';\nexport { Checkbox, CheckboxGroup } from './components/checkbox';\nexport type { ChipProps } from './components/chip';\nexport { Chip } from './components/chip';\nexport type { ChipGroupItem, ChipGroupProps } from './components/chip-group';\nexport { ChipGroup } from './components/chip-group';\nexport type { DrawerProps } from './components/drawer';\nexport { Drawer } from './components/drawer';\nexport type {\n FormActionsProps,\n FormErrorProps,\n FormErrors,\n FormFieldConfig,\n FormFieldControlProps,\n FormFieldInputType,\n FormFieldProps,\n FormFieldValue,\n FormFieldWrapperProps,\n FormProps,\n FormValidationErrors,\n FormValidationResult,\n FormValues,\n UseFormControllerOptions,\n UseFormControllerResult,\n ValidationRule,\n} from './components/form';\nexport {\n Form,\n FormActions,\n FormError,\n FormField,\n hasRequiredRule,\n useFormController,\n validateField,\n validateFields,\n validateValue,\n} from './components/form';\nexport type {\n HeadingAlign,\n HeadingLevel,\n HeadingProps,\n HeadingSize,\n HeadingTone,\n HeadingWeight,\n} from './components/heading';\nexport { Heading } from './components/heading';\nexport type { IconProps } from './components/icon';\nexport { Icon } from './components/icon';\nexport type { IconButtonProps } from './components/icon-button';\nexport { IconButton } from './components/icon-button';\nexport type { InputProps, InputTrailingAction } from './components/input';\nexport { Input } from './components/input';\nexport type { ModalProps } from './components/modal';\nexport { Modal } from './components/modal';\nexport type { RadioGroupOption, RadioGroupProps, RadioProps } from './components/radio';\nexport { Radio, RadioGroup } from './components/radio';\nexport type { SearchBarProps } from './components/search-bar';\nexport { SearchBar } from './components/search-bar';\nexport type { SelectOption, SelectProps } from './components/select';\nexport { Select } from './components/select';\nexport type { TabItem, TabsProps } from './components/tabs';\nexport { Tabs } from './components/tabs';\nexport type { TextAlign, TextProps, TextTone, TextVariant, TextWeight } from './components/text';\nexport { Text } from './components/text';\nexport type { TextareaProps } from './components/textarea';\nexport { Textarea } from './components/textarea';\nexport type { ToolbarActionProps, ToolbarProps } from './components/toolbar';\nexport { Toolbar, ToolbarAction } from './components/toolbar';\nexport type {\n BoxProps,\n CenterProps,\n ContainerProps,\n DividerProps,\n GridProps,\n InlineProps,\n ShowProps,\n SpacerProps,\n StackProps,\n SurfaceProps,\n SurfaceVariant,\n} from './foundation';\nexport {\n Box,\n Center,\n Container,\n Divider,\n Grid,\n Inline,\n Show,\n Spacer,\n Stack,\n Surface,\n} from './foundation';\nexport type { AppShellProps } from './layout/app-shell';\nexport { AppShell } from './layout/app-shell';\nexport type { AuthLayoutProps } from './layout/auth-layout';\nexport { AuthLayout } from './layout/auth-layout';\nexport type { PageProps } from './layout/page';\nexport { Page } from './layout/page';\nexport type { PageHeaderProps } from './layout/page-header';\nexport { PageHeader } from './layout/page-header';\nexport type { PageSectionProps } from './layout/page-section';\nexport { PageSection } from './layout/page-section';\nexport type { SettingsLayoutProps } from './layout/settings-layout';\nexport { SettingsLayout } from './layout/settings-layout';\nexport type { SidebarLayoutProps } from './layout/sidebar-layout';\nexport { SidebarLayout } from './layout/sidebar-layout';\nexport type { TopbarLayoutProps } from './layout/topbar-layout';\nexport { TopbarLayout } from './layout/topbar-layout';\nexport type {\n AuthFormBaseProps,\n AuthIdentifierKind,\n ForgotPasswordFormProps,\n ForgotPasswordFormValues,\n OtpFormProps,\n OtpFormValues,\n SignInFormProps,\n SignInFormValues,\n SignUpFormField,\n SignUpFormProps,\n SignUpFormValues,\n} from './patterns/auth';\nexport { ForgotPasswordForm, OtpForm, SignInForm, SignUpForm } from './patterns/auth';\nexport type {\n CollectionEditorProps,\n CollectionEditorRenderItemProps,\n} from './patterns/collection-editor';\nexport { CollectionEditor } from './patterns/collection-editor';\nexport type { ConfirmDialogProps } from './patterns/confirm-dialog';\nexport { ConfirmDialog } from './patterns/confirm-dialog';\nexport type { DisclosureSectionProps } from './patterns/disclosure-section';\nexport { DisclosureSection } from './patterns/disclosure-section';\nexport type { EmptyStateAction, EmptyStateProps } from './patterns/empty-state';\nexport { EmptyState } from './patterns/empty-state';\nexport type { FilterBarProps } from './patterns/filter-bar';\nexport { FilterBar } from './patterns/filter-bar';\nexport type { InspectorFieldProps } from './patterns/inspector-field';\nexport { InspectorField } from './patterns/inspector-field';\nexport type {\n ListChildrenProps,\n ListItemsProps,\n ListProps,\n ListRowProps,\n ListRowVariant,\n ListSectionProps,\n} from './patterns/list';\nexport { List, ListRow, ListSection } from './patterns/list';\nexport type { NoticeProps } from './patterns/notice';\nexport { Notice } from './patterns/notice';\nexport type { PanelProps } from './patterns/panel';\nexport { Panel } from './patterns/panel';\nexport type { ResponsivePanelProps } from './patterns/responsive-panel';\nexport { ResponsivePanel } from './patterns/responsive-panel';\nexport type { SectionHeaderProps } from './patterns/section-header';\nexport { SectionHeader } from './patterns/section-header';\nexport type { SettingsRowProps } from './patterns/settings-row';\nexport { SettingsRow } from './patterns/settings-row';\nexport type { SwitchFieldProps } from './patterns/switch-field';\nexport { SwitchField } from './patterns/switch-field';\nexport type { ThemeComposerProps } from './patterns/theme-composer';\nexport { ThemeComposer } from './patterns/theme-composer';\nexport type { PaletteItemProps, TileGridProps } from './patterns/tile-grid';\nexport { PaletteItem, TileGrid } from './patterns/tile-grid';\nexport type { TreeItemNode, TreeItemRenderProps, TreeViewProps } from './patterns/tree-view';\nexport { TreeItem, TreeView } from './patterns/tree-view';\nexport * from './theme';\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../src/patterns/list/List.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,KAAK,EAAkB,SAAS,EAAgC,MAAM,SAAS,CAAC;AAiEvF,eAAO,MAAM,IAAI,iDAAgC,CAAC"}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Divider, Spacer, Stack } from '../../foundation';
|
|
3
|
+
import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
|
|
4
|
+
import { ListRow } from './ListRow';
|
|
5
|
+
import { resolveListSeparator } from './resolveListSeparator';
|
|
6
|
+
function resolveRowVariant({ item, defaultVariant, }) {
|
|
7
|
+
return item.variant ?? defaultVariant;
|
|
8
|
+
}
|
|
9
|
+
function resolveRowCompact({ item, compact, }) {
|
|
10
|
+
return item.compact ?? compact ?? false;
|
|
11
|
+
}
|
|
12
|
+
function ListItemsInner({ themeId: _themeId, mode: _mode, testID, items, rowVariant = 'divider', compact, }) {
|
|
13
|
+
return (<Stack gap="none" testID={testID}>
|
|
14
|
+
{items.map((item, index) => {
|
|
15
|
+
const effectiveVariant = resolveRowVariant({ item, defaultVariant: rowVariant });
|
|
16
|
+
const separator = resolveListSeparator(effectiveVariant, index);
|
|
17
|
+
return (<React.Fragment key={`${index}`}>
|
|
18
|
+
{separator === 'divider' ? <Divider /> : null}
|
|
19
|
+
{separator === 'spacer' ? <Spacer size="s"/> : null}
|
|
20
|
+
<ListRow {...item} compact={resolveRowCompact({ item, compact })} variant={effectiveVariant}/>
|
|
21
|
+
</React.Fragment>);
|
|
22
|
+
})}
|
|
23
|
+
</Stack>);
|
|
24
|
+
}
|
|
25
|
+
function ListInner(props) {
|
|
26
|
+
if ('items' in props) {
|
|
27
|
+
return <ListItemsInner {...props}/>;
|
|
28
|
+
}
|
|
29
|
+
const { themeId: _themeId, mode: _mode, children, testID } = props;
|
|
30
|
+
return (<Stack gap="none" testID={testID}>
|
|
31
|
+
{children}
|
|
32
|
+
</Stack>);
|
|
33
|
+
}
|
|
34
|
+
export const List = withZoraThemeScope(ListInner);
|
|
35
|
+
//# sourceMappingURL=List.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"List.js","sourceRoot":"","sources":["../../../src/patterns/list/List.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACpE,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAG9D,SAAS,iBAAiB,CAAC,EACzB,IAAI,EACJ,cAAc,GAIf;IACC,OAAO,IAAI,CAAC,OAAO,IAAI,cAAc,CAAC;AACxC,CAAC;AAED,SAAS,iBAAiB,CAAC,EACzB,IAAI,EACJ,OAAO,GAIR;IACC,OAAO,IAAI,CAAC,OAAO,IAAI,OAAO,IAAI,KAAK,CAAC;AAC1C,CAAC;AAED,SAAS,cAAc,CAAC,EACtB,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,MAAM,EACN,KAAK,EACL,UAAU,GAAG,SAAS,EACtB,OAAO,GACQ;IACf,OAAO,CACL,CAAC,KAAK,CAAC,GAAG,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAC/B;MAAA,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YACzB,MAAM,gBAAgB,GAAG,iBAAiB,CAAC,EAAE,IAAI,EAAE,cAAc,EAAE,UAAU,EAAE,CAAC,CAAC;YACjF,MAAM,SAAS,GAAG,oBAAoB,CAAC,gBAAgB,EAAE,KAAK,CAAC,CAAC;YAEhE,OAAO,CACL,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,GAAG,KAAK,EAAE,CAAC,CAC9B;YAAA,CAAC,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,AAAD,EAAG,CAAC,CAAC,CAAC,IAAI,CAC7C;YAAA,CAAC,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,EAAG,CAAC,CAAC,CAAC,IAAI,CACpD;YAAA,CAAC,OAAO,CACN,IAAI,IAAI,CAAC,CACT,OAAO,CAAC,CAAC,iBAAiB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CAAC,CAC9C,OAAO,CAAC,CAAC,gBAAgB,CAAC,EAE9B;UAAA,EAAE,KAAK,CAAC,QAAQ,CAAC,CAClB,CAAC;QACJ,CAAC,CAAC,CACJ;IAAA,EAAE,KAAK,CAAC,CACT,CAAC;AACJ,CAAC;AAED,SAAS,SAAS,CAAC,KAAgB;IACjC,IAAI,OAAO,IAAI,KAAK,EAAE,CAAC;QACrB,OAAO,CAAC,cAAc,CAAC,IAAI,KAAK,CAAC,EAAG,CAAC;IACvC,CAAC;IAED,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IACnE,OAAO,CACL,CAAC,KAAK,CAAC,GAAG,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAC/B;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,KAAK,CAAC,CACT,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,IAAI,GAAG,kBAAkB,CAAC,SAAS,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport { Divider, Spacer, Stack } from '../../foundation';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport { ListRow } from './ListRow';\nimport { resolveListSeparator } from './resolveListSeparator';\nimport type { ListItemsProps, ListProps, ListRowProps, ListRowVariant } from './types';\n\nfunction resolveRowVariant({\n item,\n defaultVariant,\n}: {\n item: ListRowProps;\n defaultVariant: ListRowVariant;\n}): ListRowVariant {\n return item.variant ?? defaultVariant;\n}\n\nfunction resolveRowCompact({\n item,\n compact,\n}: {\n item: ListRowProps;\n compact: boolean | undefined;\n}): boolean {\n return item.compact ?? compact ?? false;\n}\n\nfunction ListItemsInner({\n themeId: _themeId,\n mode: _mode,\n testID,\n items,\n rowVariant = 'divider',\n compact,\n}: ListItemsProps) {\n return (\n <Stack gap=\"none\" testID={testID}>\n {items.map((item, index) => {\n const effectiveVariant = resolveRowVariant({ item, defaultVariant: rowVariant });\n const separator = resolveListSeparator(effectiveVariant, index);\n\n return (\n <React.Fragment key={`${index}`}>\n {separator === 'divider' ? <Divider /> : null}\n {separator === 'spacer' ? <Spacer size=\"s\" /> : null}\n <ListRow\n {...item}\n compact={resolveRowCompact({ item, compact })}\n variant={effectiveVariant}\n />\n </React.Fragment>\n );\n })}\n </Stack>\n );\n}\n\nfunction ListInner(props: ListProps) {\n if ('items' in props) {\n return <ListItemsInner {...props} />;\n }\n\n const { themeId: _themeId, mode: _mode, children, testID } = props;\n return (\n <Stack gap=\"none\" testID={testID}>\n {children}\n </Stack>\n );\n}\n\nexport const List = withZoraThemeScope(ListInner);\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ListRow.d.ts","sourceRoot":"","sources":["../../../src/patterns/list/ListRow.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,KAAK,EAAE,YAAY,EAAkB,MAAM,SAAS,CAAC;AAyL5D,eAAO,MAAM,OAAO,oDAAmC,CAAC"}
|
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
import { ButtonBase } from '@ankhorage/surface';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { Text } from '../../components/text';
|
|
4
|
+
import { Box, Inline, Spacer, Stack } from '../../foundation';
|
|
5
|
+
import { useZoraTheme } from '../../theme/useZoraTheme';
|
|
6
|
+
import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
|
|
7
|
+
function resolvePadding(compact) {
|
|
8
|
+
return compact ? { px: 'm', py: 's' } : { px: 'm', py: 'm' };
|
|
9
|
+
}
|
|
10
|
+
function resolveContainerStyles({ variant, theme, selected, pressed, hovered, disabled, }) {
|
|
11
|
+
const borderColor = selected ? theme.semantics.border.focus : theme.semantics.border.default;
|
|
12
|
+
const dividerBorderColor = selected ? theme.semantics.border.focus : 'transparent';
|
|
13
|
+
if (variant === 'card') {
|
|
14
|
+
return {
|
|
15
|
+
bg: pressed
|
|
16
|
+
? theme.semantics.neutral.surfaceActive
|
|
17
|
+
: hovered
|
|
18
|
+
? theme.semantics.neutral.surfaceHover
|
|
19
|
+
: theme.semantics.surface.raised,
|
|
20
|
+
borderColor,
|
|
21
|
+
borderWidth: 1,
|
|
22
|
+
radius: 'l',
|
|
23
|
+
opacity: disabled ? 0.72 : 1,
|
|
24
|
+
};
|
|
25
|
+
}
|
|
26
|
+
return {
|
|
27
|
+
bg: pressed
|
|
28
|
+
? theme.semantics.neutral.surfaceActive
|
|
29
|
+
: hovered
|
|
30
|
+
? theme.semantics.neutral.surfaceHover
|
|
31
|
+
: selected
|
|
32
|
+
? theme.semantics.neutral.surface
|
|
33
|
+
: 'transparent',
|
|
34
|
+
borderColor: dividerBorderColor,
|
|
35
|
+
borderWidth: selected ? 1 : 0,
|
|
36
|
+
radius: 'm',
|
|
37
|
+
opacity: disabled ? 0.72 : 1,
|
|
38
|
+
};
|
|
39
|
+
}
|
|
40
|
+
function ListRowInner({ themeId: _themeId, mode: _mode, testID, title, description, meta, leading, trailing, action, onPress, selected = false, disabled = false, compact = false, variant = 'divider', }) {
|
|
41
|
+
const { theme } = useZoraTheme();
|
|
42
|
+
const padding = resolvePadding(compact);
|
|
43
|
+
const isInteractive = Boolean(onPress) && !action;
|
|
44
|
+
const content = (<Stack align="center" direction="row" style={{
|
|
45
|
+
flex: 1,
|
|
46
|
+
}}>
|
|
47
|
+
{leading ? (<>
|
|
48
|
+
<Box>{leading}</Box>
|
|
49
|
+
<Spacer axis="horizontal" size="m"/>
|
|
50
|
+
</>) : null}
|
|
51
|
+
|
|
52
|
+
<Box flex={1}>
|
|
53
|
+
<Stack gap="xxs">
|
|
54
|
+
<Text variant="body" weight={selected ? 'semiBold' : 'medium'}>
|
|
55
|
+
{title}
|
|
56
|
+
</Text>
|
|
57
|
+
{description ? (<Text tone="muted" variant="bodySmall">
|
|
58
|
+
{description}
|
|
59
|
+
</Text>) : null}
|
|
60
|
+
{meta ? (<Text tone="subtle" variant="caption">
|
|
61
|
+
{meta}
|
|
62
|
+
</Text>) : null}
|
|
63
|
+
</Stack>
|
|
64
|
+
</Box>
|
|
65
|
+
|
|
66
|
+
{trailing || action ? (<>
|
|
67
|
+
<Spacer axis="horizontal" size="m"/>
|
|
68
|
+
<Inline align="center" gap="s" wrap="nowrap">
|
|
69
|
+
{trailing}
|
|
70
|
+
{action}
|
|
71
|
+
</Inline>
|
|
72
|
+
</>) : null}
|
|
73
|
+
</Stack>);
|
|
74
|
+
if (!isInteractive) {
|
|
75
|
+
const styles = resolveContainerStyles({
|
|
76
|
+
variant,
|
|
77
|
+
theme,
|
|
78
|
+
selected,
|
|
79
|
+
pressed: false,
|
|
80
|
+
hovered: false,
|
|
81
|
+
disabled,
|
|
82
|
+
});
|
|
83
|
+
return (<Box bg={styles.bg} borderColor={styles.borderColor} borderWidth={styles.borderWidth} px={padding.px} py={padding.py} radius={styles.radius} testID={testID} style={{
|
|
84
|
+
opacity: styles.opacity,
|
|
85
|
+
}}>
|
|
86
|
+
{content}
|
|
87
|
+
</Box>);
|
|
88
|
+
}
|
|
89
|
+
return (<ButtonBase accessibilityRole="button" accessibilityState={{ disabled, selected }} disabled={disabled} onPress={onPress} radius={variant === 'card' ? 'l' : 'm'} testID={testID}>
|
|
90
|
+
{(state) => {
|
|
91
|
+
const styles = resolveContainerStyles({
|
|
92
|
+
variant,
|
|
93
|
+
theme,
|
|
94
|
+
selected,
|
|
95
|
+
pressed: state.pressed,
|
|
96
|
+
hovered: state.hovered,
|
|
97
|
+
disabled: state.disabled,
|
|
98
|
+
});
|
|
99
|
+
return (<Box bg={styles.bg} borderColor={styles.borderColor} borderWidth={styles.borderWidth} px={padding.px} py={padding.py} radius={styles.radius} style={{
|
|
100
|
+
opacity: styles.opacity,
|
|
101
|
+
}}>
|
|
102
|
+
{content}
|
|
103
|
+
</Box>);
|
|
104
|
+
}}
|
|
105
|
+
</ButtonBase>);
|
|
106
|
+
}
|
|
107
|
+
export const ListRow = withZoraThemeScope(ListRowInner);
|
|
108
|
+
//# sourceMappingURL=ListRow.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ListRow.js","sourceRoot":"","sources":["../../../src/patterns/list/ListRow.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAGpE,SAAS,cAAc,CAAC,OAAgB;IACtC,OAAO,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,GAAY,EAAE,EAAE,EAAE,GAAY,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,GAAY,EAAE,EAAE,EAAE,GAAY,EAAE,CAAC;AACnG,CAAC;AAED,SAAS,sBAAsB,CAAC,EAC9B,OAAO,EACP,KAAK,EACL,QAAQ,EACR,OAAO,EACP,OAAO,EACP,QAAQ,GAQT;IACC,MAAM,WAAW,GAAG,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,OAAO,CAAC;IAC7F,MAAM,kBAAkB,GAAG,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC;IAEnF,IAAI,OAAO,KAAK,MAAM,EAAE,CAAC;QACvB,OAAO;YACL,EAAE,EAAE,OAAO;gBACT,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,aAAa;gBACvC,CAAC,CAAC,OAAO;oBACP,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,YAAY;oBACtC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,MAAM;YACpC,WAAW;YACX,WAAW,EAAE,CAAC;YACd,MAAM,EAAE,GAAY;YACpB,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;SAC7B,CAAC;IACJ,CAAC;IAED,OAAO;QACL,EAAE,EAAE,OAAO;YACT,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,aAAa;YACvC,CAAC,CAAC,OAAO;gBACP,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,YAAY;gBACtC,CAAC,CAAC,QAAQ;oBACR,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,OAAO;oBACjC,CAAC,CAAC,aAAa;QACrB,WAAW,EAAE,kBAAkB;QAC/B,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAC7B,MAAM,EAAE,GAAY;QACpB,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;KAC7B,CAAC;AACJ,CAAC;AAED,SAAS,YAAY,CAAC,EACpB,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,MAAM,EACN,KAAK,EACL,WAAW,EACX,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,MAAM,EACN,OAAO,EACP,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,KAAK,EACf,OAAO,GAAG,SAAS,GACN;IACb,MAAM,EAAE,KAAK,EAAE,GAAG,YAAY,EAAE,CAAC;IACjC,MAAM,OAAO,GAAG,cAAc,CAAC,OAAO,CAAC,CAAC;IACxC,MAAM,aAAa,GAAG,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC;IAElD,MAAM,OAAO,GAAG,CACd,CAAC,KAAK,CACJ,KAAK,CAAC,QAAQ,CACd,SAAS,CAAC,KAAK,CACf,KAAK,CAAC,CAAC;YACL,IAAI,EAAE,CAAC;SACR,CAAC,CAEF;MAAA,CAAC,OAAO,CAAC,CAAC,CAAC,CACT,EACE;UAAA,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,EAAE,GAAG,CACnB;UAAA,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,GAAG,EACpC;QAAA,GAAG,CACJ,CAAC,CAAC,CAAC,IAAI,CAER;;MAAA,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CACX;QAAA,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,CACd;UAAA,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAC5D;YAAA,CAAC,KAAK,CACR;UAAA,EAAE,IAAI,CACN;UAAA,CAAC,WAAW,CAAC,CAAC,CAAC,CACb,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW,CACpC;cAAA,CAAC,WAAW,CACd;YAAA,EAAE,IAAI,CAAC,CACR,CAAC,CAAC,CAAC,IAAI,CACR;UAAA,CAAC,IAAI,CAAC,CAAC,CAAC,CACN,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,SAAS,CACnC;cAAA,CAAC,IAAI,CACP;YAAA,EAAE,IAAI,CAAC,CACR,CAAC,CAAC,CAAC,IAAI,CACV;QAAA,EAAE,KAAK,CACT;MAAA,EAAE,GAAG,CAEL;;MAAA,CAAC,QAAQ,IAAI,MAAM,CAAC,CAAC,CAAC,CACpB,EACE;UAAA,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,GAAG,EAClC;UAAA,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,CAC1C;YAAA,CAAC,QAAQ,CACT;YAAA,CAAC,MAAM,CACT;UAAA,EAAE,MAAM,CACV;QAAA,GAAG,CACJ,CAAC,CAAC,CAAC,IAAI,CACV;IAAA,EAAE,KAAK,CAAC,CACT,CAAC;IAEF,IAAI,CAAC,aAAa,EAAE,CAAC;QACnB,MAAM,MAAM,GAAG,sBAAsB,CAAC;YACpC,OAAO;YACP,KAAK;YACL,QAAQ;YACR,OAAO,EAAE,KAAK;YACd,OAAO,EAAE,KAAK;YACd,QAAQ;SACT,CAAC,CAAC;QAEH,OAAO,CACL,CAAC,GAAG,CACF,EAAE,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,CACd,WAAW,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,CAChC,WAAW,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,CAChC,EAAE,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,CACf,EAAE,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,CACf,MAAM,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CACtB,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,KAAK,CAAC,CAAC;gBACL,OAAO,EAAE,MAAM,CAAC,OAAO;aACxB,CAAC,CAEF;QAAA,CAAC,OAAO,CACV;MAAA,EAAE,GAAG,CAAC,CACP,CAAC;IACJ,CAAC;IAED,OAAO,CACL,CAAC,UAAU,CACT,iBAAiB,CAAC,QAAQ,CAC1B,kBAAkB,CAAC,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAC3C,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,MAAM,CAAC,CAAC,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CACvC,MAAM,CAAC,CAAC,MAAM,CAAC,CAEf;MAAA,CAAC,CAAC,KAAK,EAAE,EAAE;YACT,MAAM,MAAM,GAAG,sBAAsB,CAAC;gBACpC,OAAO;gBACP,KAAK;gBACL,QAAQ;gBACR,OAAO,EAAE,KAAK,CAAC,OAAO;gBACtB,OAAO,EAAE,KAAK,CAAC,OAAO;gBACtB,QAAQ,EAAE,KAAK,CAAC,QAAQ;aACzB,CAAC,CAAC;YAEH,OAAO,CACL,CAAC,GAAG,CACF,EAAE,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,CACd,WAAW,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,CAChC,WAAW,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,CAChC,EAAE,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,CACf,EAAE,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,CACf,MAAM,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CACtB,KAAK,CAAC,CAAC;oBACL,OAAO,EAAE,MAAM,CAAC,OAAO;iBACxB,CAAC,CAEF;YAAA,CAAC,OAAO,CACV;UAAA,EAAE,GAAG,CAAC,CACP,CAAC;QACJ,CAAC,CACH;IAAA,EAAE,UAAU,CAAC,CACd,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,kBAAkB,CAAC,YAAY,CAAC,CAAC","sourcesContent":["import { ButtonBase } from '@ankhorage/surface';\nimport React from 'react';\n\nimport { Text } from '../../components/text';\nimport { Box, Inline, Spacer, Stack } from '../../foundation';\nimport { useZoraTheme } from '../../theme/useZoraTheme';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport type { ListRowProps, ListRowVariant } from './types';\n\nfunction resolvePadding(compact: boolean) {\n return compact ? { px: 'm' as const, py: 's' as const } : { px: 'm' as const, py: 'm' as const };\n}\n\nfunction resolveContainerStyles({\n variant,\n theme,\n selected,\n pressed,\n hovered,\n disabled,\n}: {\n variant: ListRowVariant;\n theme: ReturnType<typeof useZoraTheme>['theme'];\n selected: boolean;\n pressed: boolean;\n hovered: boolean;\n disabled: boolean;\n}) {\n const borderColor = selected ? theme.semantics.border.focus : theme.semantics.border.default;\n const dividerBorderColor = selected ? theme.semantics.border.focus : 'transparent';\n\n if (variant === 'card') {\n return {\n bg: pressed\n ? theme.semantics.neutral.surfaceActive\n : hovered\n ? theme.semantics.neutral.surfaceHover\n : theme.semantics.surface.raised,\n borderColor,\n borderWidth: 1,\n radius: 'l' as const,\n opacity: disabled ? 0.72 : 1,\n };\n }\n\n return {\n bg: pressed\n ? theme.semantics.neutral.surfaceActive\n : hovered\n ? theme.semantics.neutral.surfaceHover\n : selected\n ? theme.semantics.neutral.surface\n : 'transparent',\n borderColor: dividerBorderColor,\n borderWidth: selected ? 1 : 0,\n radius: 'm' as const,\n opacity: disabled ? 0.72 : 1,\n };\n}\n\nfunction ListRowInner({\n themeId: _themeId,\n mode: _mode,\n testID,\n title,\n description,\n meta,\n leading,\n trailing,\n action,\n onPress,\n selected = false,\n disabled = false,\n compact = false,\n variant = 'divider',\n}: ListRowProps) {\n const { theme } = useZoraTheme();\n const padding = resolvePadding(compact);\n const isInteractive = Boolean(onPress) && !action;\n\n const content = (\n <Stack\n align=\"center\"\n direction=\"row\"\n style={{\n flex: 1,\n }}\n >\n {leading ? (\n <>\n <Box>{leading}</Box>\n <Spacer axis=\"horizontal\" size=\"m\" />\n </>\n ) : null}\n\n <Box flex={1}>\n <Stack gap=\"xxs\">\n <Text variant=\"body\" weight={selected ? 'semiBold' : 'medium'}>\n {title}\n </Text>\n {description ? (\n <Text tone=\"muted\" variant=\"bodySmall\">\n {description}\n </Text>\n ) : null}\n {meta ? (\n <Text tone=\"subtle\" variant=\"caption\">\n {meta}\n </Text>\n ) : null}\n </Stack>\n </Box>\n\n {trailing || action ? (\n <>\n <Spacer axis=\"horizontal\" size=\"m\" />\n <Inline align=\"center\" gap=\"s\" wrap=\"nowrap\">\n {trailing}\n {action}\n </Inline>\n </>\n ) : null}\n </Stack>\n );\n\n if (!isInteractive) {\n const styles = resolveContainerStyles({\n variant,\n theme,\n selected,\n pressed: false,\n hovered: false,\n disabled,\n });\n\n return (\n <Box\n bg={styles.bg}\n borderColor={styles.borderColor}\n borderWidth={styles.borderWidth}\n px={padding.px}\n py={padding.py}\n radius={styles.radius}\n testID={testID}\n style={{\n opacity: styles.opacity,\n }}\n >\n {content}\n </Box>\n );\n }\n\n return (\n <ButtonBase\n accessibilityRole=\"button\"\n accessibilityState={{ disabled, selected }}\n disabled={disabled}\n onPress={onPress}\n radius={variant === 'card' ? 'l' : 'm'}\n testID={testID}\n >\n {(state) => {\n const styles = resolveContainerStyles({\n variant,\n theme,\n selected,\n pressed: state.pressed,\n hovered: state.hovered,\n disabled: state.disabled,\n });\n\n return (\n <Box\n bg={styles.bg}\n borderColor={styles.borderColor}\n borderWidth={styles.borderWidth}\n px={padding.px}\n py={padding.py}\n radius={styles.radius}\n style={{\n opacity: styles.opacity,\n }}\n >\n {content}\n </Box>\n );\n }}\n </ButtonBase>\n );\n}\n\nexport const ListRow = withZoraThemeScope(ListRowInner);\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ListSection.d.ts","sourceRoot":"","sources":["../../../src/patterns/list/ListSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AA6BhD,eAAO,MAAM,WAAW,wDAAuC,CAAC"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Stack } from '../../foundation';
|
|
3
|
+
import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
|
|
4
|
+
import { SectionHeader } from '../section-header';
|
|
5
|
+
import { List } from './List';
|
|
6
|
+
function ListSectionInner({ themeId: _themeId, mode: _mode, testID, title, description, eyebrow, actions, ...props }) {
|
|
7
|
+
const hasHeader = title !== undefined;
|
|
8
|
+
return (<Stack gap="s" testID={testID}>
|
|
9
|
+
{hasHeader ? (<SectionHeader actions={actions} description={description} eyebrow={eyebrow} title={title}/>) : null}
|
|
10
|
+
<List {...props}/>
|
|
11
|
+
</Stack>);
|
|
12
|
+
}
|
|
13
|
+
export const ListSection = withZoraThemeScope(ListSectionInner);
|
|
14
|
+
//# sourceMappingURL=ListSection.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ListSection.js","sourceRoot":"","sources":["../../../src/patterns/list/ListSection.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,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAG9B,SAAS,gBAAgB,CAAC,EACxB,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,MAAM,EACN,KAAK,EACL,WAAW,EACX,OAAO,EACP,OAAO,EACP,GAAG,KAAK,EACS;IACjB,MAAM,SAAS,GAAG,KAAK,KAAK,SAAS,CAAC;IAEtC,OAAO,CACL,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAC5B;MAAA,CAAC,SAAS,CAAC,CAAC,CAAC,CACX,CAAC,aAAa,CACZ,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,KAAK,CAAC,CAAC,KAAK,CAAC,EACb,CACH,CAAC,CAAC,CAAC,IAAI,CACR;MAAA,CAAC,IAAI,CAAC,IAAI,KAAK,CAAC,EAClB;IAAA,EAAE,KAAK,CAAC,CACT,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,kBAAkB,CAAC,gBAAgB,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport { Stack } from '../../foundation';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport { SectionHeader } from '../section-header';\nimport { List } from './List';\nimport type { ListSectionProps } from './types';\n\nfunction ListSectionInner({\n themeId: _themeId,\n mode: _mode,\n testID,\n title,\n description,\n eyebrow,\n actions,\n ...props\n}: ListSectionProps) {\n const hasHeader = title !== undefined;\n\n return (\n <Stack gap=\"s\" testID={testID}>\n {hasHeader ? (\n <SectionHeader\n actions={actions}\n description={description}\n eyebrow={eyebrow}\n title={title}\n />\n ) : null}\n <List {...props} />\n </Stack>\n );\n}\n\nexport const ListSection = withZoraThemeScope(ListSectionInner);\n"]}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
export { List } from './List';
|
|
2
|
+
export { ListRow } from './ListRow';
|
|
3
|
+
export { ListSection } from './ListSection';
|
|
4
|
+
export type { ListChildrenProps, ListItemsProps, ListProps, ListRowProps, ListRowVariant, ListSectionProps, } from './types';
|
|
5
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/patterns/list/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EACV,iBAAiB,EACjB,cAAc,EACd,SAAS,EACT,YAAY,EACZ,cAAc,EACd,gBAAgB,GACjB,MAAM,SAAS,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/patterns/list/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC","sourcesContent":["export { List } from './List';\nexport { ListRow } from './ListRow';\nexport { ListSection } from './ListSection';\nexport type {\n ListChildrenProps,\n ListItemsProps,\n ListProps,\n ListRowProps,\n ListRowVariant,\n ListSectionProps,\n} from './types';\n"]}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import type { ListRowVariant } from './types';
|
|
2
|
+
type ListSeparatorKind = 'none' | 'divider' | 'spacer';
|
|
3
|
+
export declare function resolveListSeparator(variant: ListRowVariant, index: number): ListSeparatorKind;
|
|
4
|
+
export {};
|
|
5
|
+
//# sourceMappingURL=resolveListSeparator.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"resolveListSeparator.d.ts","sourceRoot":"","sources":["../../../src/patterns/list/resolveListSeparator.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C,KAAK,iBAAiB,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAC;AAEvD,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,GAAG,iBAAiB,CAG9F"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"resolveListSeparator.js","sourceRoot":"","sources":["../../../src/patterns/list/resolveListSeparator.ts"],"names":[],"mappings":"AAIA,MAAM,UAAU,oBAAoB,CAAC,OAAuB,EAAE,KAAa;IACzE,IAAI,KAAK,KAAK,CAAC;QAAE,OAAO,MAAM,CAAC;IAC/B,OAAO,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC;AACtD,CAAC","sourcesContent":["import type { ListRowVariant } from './types';\n\ntype ListSeparatorKind = 'none' | 'divider' | 'spacer';\n\nexport function resolveListSeparator(variant: ListRowVariant, index: number): ListSeparatorKind {\n if (index === 0) return 'none';\n return variant === 'divider' ? 'divider' : 'spacer';\n}\n"]}
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import type React from 'react';
|
|
2
|
+
import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
|
|
3
|
+
export type ListRowVariant = 'divider' | 'card';
|
|
4
|
+
interface ListRowBaseProps extends ZoraBaseProps {
|
|
5
|
+
title: React.ReactNode;
|
|
6
|
+
description?: React.ReactNode;
|
|
7
|
+
meta?: React.ReactNode;
|
|
8
|
+
leading?: React.ReactNode;
|
|
9
|
+
trailing?: React.ReactNode;
|
|
10
|
+
selected?: boolean;
|
|
11
|
+
disabled?: boolean;
|
|
12
|
+
compact?: boolean;
|
|
13
|
+
variant?: ListRowVariant;
|
|
14
|
+
}
|
|
15
|
+
interface ListRowPressableProps {
|
|
16
|
+
onPress: () => void;
|
|
17
|
+
action?: never;
|
|
18
|
+
}
|
|
19
|
+
interface ListRowActionProps {
|
|
20
|
+
action: React.ReactNode;
|
|
21
|
+
onPress?: never;
|
|
22
|
+
}
|
|
23
|
+
interface ListRowStaticProps {
|
|
24
|
+
action?: never;
|
|
25
|
+
onPress?: never;
|
|
26
|
+
}
|
|
27
|
+
export type ListRowProps = ListRowBaseProps & (ListRowPressableProps | ListRowActionProps | ListRowStaticProps);
|
|
28
|
+
export interface ListItemsProps extends ZoraBaseProps {
|
|
29
|
+
items: readonly ListRowProps[];
|
|
30
|
+
rowVariant?: ListRowVariant;
|
|
31
|
+
compact?: boolean;
|
|
32
|
+
}
|
|
33
|
+
export interface ListChildrenProps extends ZoraBaseProps {
|
|
34
|
+
children: React.ReactNode;
|
|
35
|
+
}
|
|
36
|
+
export type ListProps = ListItemsProps | ListChildrenProps;
|
|
37
|
+
export interface ListSectionItemsProps extends ZoraBaseProps {
|
|
38
|
+
title?: React.ReactNode;
|
|
39
|
+
description?: React.ReactNode;
|
|
40
|
+
eyebrow?: React.ReactNode;
|
|
41
|
+
actions?: React.ReactNode;
|
|
42
|
+
items: readonly ListRowProps[];
|
|
43
|
+
rowVariant?: ListRowVariant;
|
|
44
|
+
compact?: boolean;
|
|
45
|
+
}
|
|
46
|
+
export interface ListSectionChildrenProps extends ZoraBaseProps {
|
|
47
|
+
title?: React.ReactNode;
|
|
48
|
+
description?: React.ReactNode;
|
|
49
|
+
eyebrow?: React.ReactNode;
|
|
50
|
+
actions?: React.ReactNode;
|
|
51
|
+
children: React.ReactNode;
|
|
52
|
+
}
|
|
53
|
+
export type ListSectionProps = ListSectionItemsProps | ListSectionChildrenProps;
|
|
54
|
+
export {};
|
|
55
|
+
//# sourceMappingURL=types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/patterns/list/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,MAAM,CAAC;AAEhD,UAAU,gBAAiB,SAAQ,aAAa;IAC9C,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,cAAc,CAAC;CAC1B;AAED,UAAU,qBAAqB;IAC7B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,KAAK,CAAC;CAChB;AAED,UAAU,kBAAkB;IAC1B,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB;AAED,UAAU,kBAAkB;IAC1B,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB;AAED,MAAM,MAAM,YAAY,GAAG,gBAAgB,GACzC,CAAC,qBAAqB,GAAG,kBAAkB,GAAG,kBAAkB,CAAC,CAAC;AAEpE,MAAM,WAAW,cAAe,SAAQ,aAAa;IACnD,KAAK,EAAE,SAAS,YAAY,EAAE,CAAC;IAC/B,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,iBAAkB,SAAQ,aAAa;IACtD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,MAAM,MAAM,SAAS,GAAG,cAAc,GAAG,iBAAiB,CAAC;AAE3D,MAAM,WAAW,qBAAsB,SAAQ,aAAa;IAC1D,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,KAAK,EAAE,SAAS,YAAY,EAAE,CAAC;IAC/B,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,wBAAyB,SAAQ,aAAa;IAC7D,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,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,MAAM,MAAM,gBAAgB,GAAG,qBAAqB,GAAG,wBAAwB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/patterns/list/types.ts"],"names":[],"mappings":"","sourcesContent":["import type React from 'react';\n\nimport type { ZoraBaseProps } from '../../theme/ZoraBaseProps';\n\nexport type ListRowVariant = 'divider' | 'card';\n\ninterface ListRowBaseProps extends ZoraBaseProps {\n title: React.ReactNode;\n description?: React.ReactNode;\n meta?: React.ReactNode;\n leading?: React.ReactNode;\n trailing?: React.ReactNode;\n selected?: boolean;\n disabled?: boolean;\n compact?: boolean;\n variant?: ListRowVariant;\n}\n\ninterface ListRowPressableProps {\n onPress: () => void;\n action?: never;\n}\n\ninterface ListRowActionProps {\n action: React.ReactNode;\n onPress?: never;\n}\n\ninterface ListRowStaticProps {\n action?: never;\n onPress?: never;\n}\n\nexport type ListRowProps = ListRowBaseProps &\n (ListRowPressableProps | ListRowActionProps | ListRowStaticProps);\n\nexport interface ListItemsProps extends ZoraBaseProps {\n items: readonly ListRowProps[];\n rowVariant?: ListRowVariant;\n compact?: boolean;\n}\n\nexport interface ListChildrenProps extends ZoraBaseProps {\n children: React.ReactNode;\n}\n\nexport type ListProps = ListItemsProps | ListChildrenProps;\n\nexport interface ListSectionItemsProps extends ZoraBaseProps {\n title?: React.ReactNode;\n description?: React.ReactNode;\n eyebrow?: React.ReactNode;\n actions?: React.ReactNode;\n items: readonly ListRowProps[];\n rowVariant?: ListRowVariant;\n compact?: boolean;\n}\n\nexport interface ListSectionChildrenProps extends ZoraBaseProps {\n title?: React.ReactNode;\n description?: React.ReactNode;\n eyebrow?: React.ReactNode;\n actions?: React.ReactNode;\n children: React.ReactNode;\n}\n\nexport type ListSectionProps = ListSectionItemsProps | ListSectionChildrenProps;\n"]}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ankhorage/zora",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "1.0.
|
|
4
|
+
"version": "1.0.6",
|
|
5
5
|
"description": "Opinionated React Native and React Native Web UI kit built on @ankhorage/surface.",
|
|
6
6
|
"homepage": "https://github.com/ankhorage/zora#readme",
|
|
7
7
|
"bugs": {
|
package/src/index.ts
CHANGED
|
@@ -146,6 +146,15 @@ export type { FilterBarProps } from './patterns/filter-bar';
|
|
|
146
146
|
export { FilterBar } from './patterns/filter-bar';
|
|
147
147
|
export type { InspectorFieldProps } from './patterns/inspector-field';
|
|
148
148
|
export { InspectorField } from './patterns/inspector-field';
|
|
149
|
+
export type {
|
|
150
|
+
ListChildrenProps,
|
|
151
|
+
ListItemsProps,
|
|
152
|
+
ListProps,
|
|
153
|
+
ListRowProps,
|
|
154
|
+
ListRowVariant,
|
|
155
|
+
ListSectionProps,
|
|
156
|
+
} from './patterns/list';
|
|
157
|
+
export { List, ListRow, ListSection } from './patterns/list';
|
|
149
158
|
export type { NoticeProps } from './patterns/notice';
|
|
150
159
|
export { Notice } from './patterns/notice';
|
|
151
160
|
export type { PanelProps } from './patterns/panel';
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
import { Divider, Spacer, Stack } from '../../foundation';
|
|
4
|
+
import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
|
|
5
|
+
import { ListRow } from './ListRow';
|
|
6
|
+
import { resolveListSeparator } from './resolveListSeparator';
|
|
7
|
+
import type { ListItemsProps, ListProps, ListRowProps, ListRowVariant } from './types';
|
|
8
|
+
|
|
9
|
+
function resolveRowVariant({
|
|
10
|
+
item,
|
|
11
|
+
defaultVariant,
|
|
12
|
+
}: {
|
|
13
|
+
item: ListRowProps;
|
|
14
|
+
defaultVariant: ListRowVariant;
|
|
15
|
+
}): ListRowVariant {
|
|
16
|
+
return item.variant ?? defaultVariant;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
function resolveRowCompact({
|
|
20
|
+
item,
|
|
21
|
+
compact,
|
|
22
|
+
}: {
|
|
23
|
+
item: ListRowProps;
|
|
24
|
+
compact: boolean | undefined;
|
|
25
|
+
}): boolean {
|
|
26
|
+
return item.compact ?? compact ?? false;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
function ListItemsInner({
|
|
30
|
+
themeId: _themeId,
|
|
31
|
+
mode: _mode,
|
|
32
|
+
testID,
|
|
33
|
+
items,
|
|
34
|
+
rowVariant = 'divider',
|
|
35
|
+
compact,
|
|
36
|
+
}: ListItemsProps) {
|
|
37
|
+
return (
|
|
38
|
+
<Stack gap="none" testID={testID}>
|
|
39
|
+
{items.map((item, index) => {
|
|
40
|
+
const effectiveVariant = resolveRowVariant({ item, defaultVariant: rowVariant });
|
|
41
|
+
const separator = resolveListSeparator(effectiveVariant, index);
|
|
42
|
+
|
|
43
|
+
return (
|
|
44
|
+
<React.Fragment key={`${index}`}>
|
|
45
|
+
{separator === 'divider' ? <Divider /> : null}
|
|
46
|
+
{separator === 'spacer' ? <Spacer size="s" /> : null}
|
|
47
|
+
<ListRow
|
|
48
|
+
{...item}
|
|
49
|
+
compact={resolveRowCompact({ item, compact })}
|
|
50
|
+
variant={effectiveVariant}
|
|
51
|
+
/>
|
|
52
|
+
</React.Fragment>
|
|
53
|
+
);
|
|
54
|
+
})}
|
|
55
|
+
</Stack>
|
|
56
|
+
);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
function ListInner(props: ListProps) {
|
|
60
|
+
if ('items' in props) {
|
|
61
|
+
return <ListItemsInner {...props} />;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
const { themeId: _themeId, mode: _mode, children, testID } = props;
|
|
65
|
+
return (
|
|
66
|
+
<Stack gap="none" testID={testID}>
|
|
67
|
+
{children}
|
|
68
|
+
</Stack>
|
|
69
|
+
);
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
export const List = withZoraThemeScope(ListInner);
|
|
@@ -0,0 +1,193 @@
|
|
|
1
|
+
import { ButtonBase } from '@ankhorage/surface';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
|
|
4
|
+
import { Text } from '../../components/text';
|
|
5
|
+
import { Box, Inline, Spacer, Stack } from '../../foundation';
|
|
6
|
+
import { useZoraTheme } from '../../theme/useZoraTheme';
|
|
7
|
+
import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
|
|
8
|
+
import type { ListRowProps, ListRowVariant } from './types';
|
|
9
|
+
|
|
10
|
+
function resolvePadding(compact: boolean) {
|
|
11
|
+
return compact ? { px: 'm' as const, py: 's' as const } : { px: 'm' as const, py: 'm' as const };
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
function resolveContainerStyles({
|
|
15
|
+
variant,
|
|
16
|
+
theme,
|
|
17
|
+
selected,
|
|
18
|
+
pressed,
|
|
19
|
+
hovered,
|
|
20
|
+
disabled,
|
|
21
|
+
}: {
|
|
22
|
+
variant: ListRowVariant;
|
|
23
|
+
theme: ReturnType<typeof useZoraTheme>['theme'];
|
|
24
|
+
selected: boolean;
|
|
25
|
+
pressed: boolean;
|
|
26
|
+
hovered: boolean;
|
|
27
|
+
disabled: boolean;
|
|
28
|
+
}) {
|
|
29
|
+
const borderColor = selected ? theme.semantics.border.focus : theme.semantics.border.default;
|
|
30
|
+
const dividerBorderColor = selected ? theme.semantics.border.focus : 'transparent';
|
|
31
|
+
|
|
32
|
+
if (variant === 'card') {
|
|
33
|
+
return {
|
|
34
|
+
bg: pressed
|
|
35
|
+
? theme.semantics.neutral.surfaceActive
|
|
36
|
+
: hovered
|
|
37
|
+
? theme.semantics.neutral.surfaceHover
|
|
38
|
+
: theme.semantics.surface.raised,
|
|
39
|
+
borderColor,
|
|
40
|
+
borderWidth: 1,
|
|
41
|
+
radius: 'l' as const,
|
|
42
|
+
opacity: disabled ? 0.72 : 1,
|
|
43
|
+
};
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
return {
|
|
47
|
+
bg: pressed
|
|
48
|
+
? theme.semantics.neutral.surfaceActive
|
|
49
|
+
: hovered
|
|
50
|
+
? theme.semantics.neutral.surfaceHover
|
|
51
|
+
: selected
|
|
52
|
+
? theme.semantics.neutral.surface
|
|
53
|
+
: 'transparent',
|
|
54
|
+
borderColor: dividerBorderColor,
|
|
55
|
+
borderWidth: selected ? 1 : 0,
|
|
56
|
+
radius: 'm' as const,
|
|
57
|
+
opacity: disabled ? 0.72 : 1,
|
|
58
|
+
};
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
function ListRowInner({
|
|
62
|
+
themeId: _themeId,
|
|
63
|
+
mode: _mode,
|
|
64
|
+
testID,
|
|
65
|
+
title,
|
|
66
|
+
description,
|
|
67
|
+
meta,
|
|
68
|
+
leading,
|
|
69
|
+
trailing,
|
|
70
|
+
action,
|
|
71
|
+
onPress,
|
|
72
|
+
selected = false,
|
|
73
|
+
disabled = false,
|
|
74
|
+
compact = false,
|
|
75
|
+
variant = 'divider',
|
|
76
|
+
}: ListRowProps) {
|
|
77
|
+
const { theme } = useZoraTheme();
|
|
78
|
+
const padding = resolvePadding(compact);
|
|
79
|
+
const isInteractive = Boolean(onPress) && !action;
|
|
80
|
+
|
|
81
|
+
const content = (
|
|
82
|
+
<Stack
|
|
83
|
+
align="center"
|
|
84
|
+
direction="row"
|
|
85
|
+
style={{
|
|
86
|
+
flex: 1,
|
|
87
|
+
}}
|
|
88
|
+
>
|
|
89
|
+
{leading ? (
|
|
90
|
+
<>
|
|
91
|
+
<Box>{leading}</Box>
|
|
92
|
+
<Spacer axis="horizontal" size="m" />
|
|
93
|
+
</>
|
|
94
|
+
) : null}
|
|
95
|
+
|
|
96
|
+
<Box flex={1}>
|
|
97
|
+
<Stack gap="xxs">
|
|
98
|
+
<Text variant="body" weight={selected ? 'semiBold' : 'medium'}>
|
|
99
|
+
{title}
|
|
100
|
+
</Text>
|
|
101
|
+
{description ? (
|
|
102
|
+
<Text tone="muted" variant="bodySmall">
|
|
103
|
+
{description}
|
|
104
|
+
</Text>
|
|
105
|
+
) : null}
|
|
106
|
+
{meta ? (
|
|
107
|
+
<Text tone="subtle" variant="caption">
|
|
108
|
+
{meta}
|
|
109
|
+
</Text>
|
|
110
|
+
) : null}
|
|
111
|
+
</Stack>
|
|
112
|
+
</Box>
|
|
113
|
+
|
|
114
|
+
{trailing || action ? (
|
|
115
|
+
<>
|
|
116
|
+
<Spacer axis="horizontal" size="m" />
|
|
117
|
+
<Inline align="center" gap="s" wrap="nowrap">
|
|
118
|
+
{trailing}
|
|
119
|
+
{action}
|
|
120
|
+
</Inline>
|
|
121
|
+
</>
|
|
122
|
+
) : null}
|
|
123
|
+
</Stack>
|
|
124
|
+
);
|
|
125
|
+
|
|
126
|
+
if (!isInteractive) {
|
|
127
|
+
const styles = resolveContainerStyles({
|
|
128
|
+
variant,
|
|
129
|
+
theme,
|
|
130
|
+
selected,
|
|
131
|
+
pressed: false,
|
|
132
|
+
hovered: false,
|
|
133
|
+
disabled,
|
|
134
|
+
});
|
|
135
|
+
|
|
136
|
+
return (
|
|
137
|
+
<Box
|
|
138
|
+
bg={styles.bg}
|
|
139
|
+
borderColor={styles.borderColor}
|
|
140
|
+
borderWidth={styles.borderWidth}
|
|
141
|
+
px={padding.px}
|
|
142
|
+
py={padding.py}
|
|
143
|
+
radius={styles.radius}
|
|
144
|
+
testID={testID}
|
|
145
|
+
style={{
|
|
146
|
+
opacity: styles.opacity,
|
|
147
|
+
}}
|
|
148
|
+
>
|
|
149
|
+
{content}
|
|
150
|
+
</Box>
|
|
151
|
+
);
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
return (
|
|
155
|
+
<ButtonBase
|
|
156
|
+
accessibilityRole="button"
|
|
157
|
+
accessibilityState={{ disabled, selected }}
|
|
158
|
+
disabled={disabled}
|
|
159
|
+
onPress={onPress}
|
|
160
|
+
radius={variant === 'card' ? 'l' : 'm'}
|
|
161
|
+
testID={testID}
|
|
162
|
+
>
|
|
163
|
+
{(state) => {
|
|
164
|
+
const styles = resolveContainerStyles({
|
|
165
|
+
variant,
|
|
166
|
+
theme,
|
|
167
|
+
selected,
|
|
168
|
+
pressed: state.pressed,
|
|
169
|
+
hovered: state.hovered,
|
|
170
|
+
disabled: state.disabled,
|
|
171
|
+
});
|
|
172
|
+
|
|
173
|
+
return (
|
|
174
|
+
<Box
|
|
175
|
+
bg={styles.bg}
|
|
176
|
+
borderColor={styles.borderColor}
|
|
177
|
+
borderWidth={styles.borderWidth}
|
|
178
|
+
px={padding.px}
|
|
179
|
+
py={padding.py}
|
|
180
|
+
radius={styles.radius}
|
|
181
|
+
style={{
|
|
182
|
+
opacity: styles.opacity,
|
|
183
|
+
}}
|
|
184
|
+
>
|
|
185
|
+
{content}
|
|
186
|
+
</Box>
|
|
187
|
+
);
|
|
188
|
+
}}
|
|
189
|
+
</ButtonBase>
|
|
190
|
+
);
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
export const ListRow = withZoraThemeScope(ListRowInner);
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
import { Stack } from '../../foundation';
|
|
4
|
+
import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
|
|
5
|
+
import { SectionHeader } from '../section-header';
|
|
6
|
+
import { List } from './List';
|
|
7
|
+
import type { ListSectionProps } from './types';
|
|
8
|
+
|
|
9
|
+
function ListSectionInner({
|
|
10
|
+
themeId: _themeId,
|
|
11
|
+
mode: _mode,
|
|
12
|
+
testID,
|
|
13
|
+
title,
|
|
14
|
+
description,
|
|
15
|
+
eyebrow,
|
|
16
|
+
actions,
|
|
17
|
+
...props
|
|
18
|
+
}: ListSectionProps) {
|
|
19
|
+
const hasHeader = title !== undefined;
|
|
20
|
+
|
|
21
|
+
return (
|
|
22
|
+
<Stack gap="s" testID={testID}>
|
|
23
|
+
{hasHeader ? (
|
|
24
|
+
<SectionHeader
|
|
25
|
+
actions={actions}
|
|
26
|
+
description={description}
|
|
27
|
+
eyebrow={eyebrow}
|
|
28
|
+
title={title}
|
|
29
|
+
/>
|
|
30
|
+
) : null}
|
|
31
|
+
<List {...props} />
|
|
32
|
+
</Stack>
|
|
33
|
+
);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
export const ListSection = withZoraThemeScope(ListSectionInner);
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
export { List } from './List';
|
|
2
|
+
export { ListRow } from './ListRow';
|
|
3
|
+
export { ListSection } from './ListSection';
|
|
4
|
+
export type {
|
|
5
|
+
ListChildrenProps,
|
|
6
|
+
ListItemsProps,
|
|
7
|
+
ListProps,
|
|
8
|
+
ListRowProps,
|
|
9
|
+
ListRowVariant,
|
|
10
|
+
ListSectionProps,
|
|
11
|
+
} from './types';
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { describe, expect, it } from 'bun:test';
|
|
2
|
+
|
|
3
|
+
import { resolveListSeparator } from './resolveListSeparator';
|
|
4
|
+
|
|
5
|
+
describe('resolveListSeparator', () => {
|
|
6
|
+
it('returns none for the first item', () => {
|
|
7
|
+
expect(resolveListSeparator('divider', 0)).toBe('none');
|
|
8
|
+
expect(resolveListSeparator('card', 0)).toBe('none');
|
|
9
|
+
});
|
|
10
|
+
|
|
11
|
+
it('returns divider for divider rows', () => {
|
|
12
|
+
expect(resolveListSeparator('divider', 1)).toBe('divider');
|
|
13
|
+
});
|
|
14
|
+
|
|
15
|
+
it('returns spacer for card rows', () => {
|
|
16
|
+
expect(resolveListSeparator('card', 1)).toBe('spacer');
|
|
17
|
+
});
|
|
18
|
+
});
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { ListRowVariant } from './types';
|
|
2
|
+
|
|
3
|
+
type ListSeparatorKind = 'none' | 'divider' | 'spacer';
|
|
4
|
+
|
|
5
|
+
export function resolveListSeparator(variant: ListRowVariant, index: number): ListSeparatorKind {
|
|
6
|
+
if (index === 0) return 'none';
|
|
7
|
+
return variant === 'divider' ? 'divider' : 'spacer';
|
|
8
|
+
}
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
import type React from 'react';
|
|
2
|
+
|
|
3
|
+
import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
|
|
4
|
+
|
|
5
|
+
export type ListRowVariant = 'divider' | 'card';
|
|
6
|
+
|
|
7
|
+
interface ListRowBaseProps extends ZoraBaseProps {
|
|
8
|
+
title: React.ReactNode;
|
|
9
|
+
description?: React.ReactNode;
|
|
10
|
+
meta?: React.ReactNode;
|
|
11
|
+
leading?: React.ReactNode;
|
|
12
|
+
trailing?: React.ReactNode;
|
|
13
|
+
selected?: boolean;
|
|
14
|
+
disabled?: boolean;
|
|
15
|
+
compact?: boolean;
|
|
16
|
+
variant?: ListRowVariant;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
interface ListRowPressableProps {
|
|
20
|
+
onPress: () => void;
|
|
21
|
+
action?: never;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
interface ListRowActionProps {
|
|
25
|
+
action: React.ReactNode;
|
|
26
|
+
onPress?: never;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
interface ListRowStaticProps {
|
|
30
|
+
action?: never;
|
|
31
|
+
onPress?: never;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
export type ListRowProps = ListRowBaseProps &
|
|
35
|
+
(ListRowPressableProps | ListRowActionProps | ListRowStaticProps);
|
|
36
|
+
|
|
37
|
+
export interface ListItemsProps extends ZoraBaseProps {
|
|
38
|
+
items: readonly ListRowProps[];
|
|
39
|
+
rowVariant?: ListRowVariant;
|
|
40
|
+
compact?: boolean;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
export interface ListChildrenProps extends ZoraBaseProps {
|
|
44
|
+
children: React.ReactNode;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
export type ListProps = ListItemsProps | ListChildrenProps;
|
|
48
|
+
|
|
49
|
+
export interface ListSectionItemsProps extends ZoraBaseProps {
|
|
50
|
+
title?: React.ReactNode;
|
|
51
|
+
description?: React.ReactNode;
|
|
52
|
+
eyebrow?: React.ReactNode;
|
|
53
|
+
actions?: React.ReactNode;
|
|
54
|
+
items: readonly ListRowProps[];
|
|
55
|
+
rowVariant?: ListRowVariant;
|
|
56
|
+
compact?: boolean;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
export interface ListSectionChildrenProps extends ZoraBaseProps {
|
|
60
|
+
title?: React.ReactNode;
|
|
61
|
+
description?: React.ReactNode;
|
|
62
|
+
eyebrow?: React.ReactNode;
|
|
63
|
+
actions?: React.ReactNode;
|
|
64
|
+
children: React.ReactNode;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
export type ListSectionProps = ListSectionItemsProps | ListSectionChildrenProps;
|
|
@@ -96,6 +96,9 @@ const scopedComponentFiles = [
|
|
|
96
96
|
join(srcDir, 'patterns', 'empty-state', 'EmptyState.tsx'),
|
|
97
97
|
join(srcDir, 'patterns', 'form-field', 'FormField.tsx'),
|
|
98
98
|
join(srcDir, 'patterns', 'inspector-field', 'InspectorField.tsx'),
|
|
99
|
+
join(srcDir, 'patterns', 'list', 'List.tsx'),
|
|
100
|
+
join(srcDir, 'patterns', 'list', 'ListRow.tsx'),
|
|
101
|
+
join(srcDir, 'patterns', 'list', 'ListSection.tsx'),
|
|
99
102
|
join(srcDir, 'patterns', 'notice', 'Notice.tsx'),
|
|
100
103
|
join(srcDir, 'patterns', 'panel', 'Panel.tsx'),
|
|
101
104
|
join(srcDir, 'patterns', 'responsive-panel', 'ResponsivePanel.tsx'),
|
|
@@ -154,6 +157,7 @@ const scopedPropTypeFiles = [
|
|
|
154
157
|
join(srcDir, 'patterns', 'empty-state', 'types.ts'),
|
|
155
158
|
join(srcDir, 'patterns', 'form-field', 'types.ts'),
|
|
156
159
|
join(srcDir, 'patterns', 'inspector-field', 'types.ts'),
|
|
160
|
+
join(srcDir, 'patterns', 'list', 'types.ts'),
|
|
157
161
|
join(srcDir, 'patterns', 'notice', 'types.ts'),
|
|
158
162
|
join(srcDir, 'patterns', 'panel', 'types.ts'),
|
|
159
163
|
join(srcDir, 'patterns', 'responsive-panel', 'types.ts'),
|