@ankhorage/zora 2.5.2 → 2.5.3
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 +3089 -137
- package/dist/components/action-sheet/ActionSheet.d.ts +5 -0
- package/dist/components/action-sheet/ActionSheet.d.ts.map +1 -1
- package/dist/components/action-sheet/ActionSheet.js +5 -0
- package/dist/components/action-sheet/ActionSheet.js.map +1 -1
- package/dist/components/action-sheet/ActionSheetItem.d.ts +5 -0
- package/dist/components/action-sheet/ActionSheetItem.d.ts.map +1 -1
- package/dist/components/action-sheet/ActionSheetItem.js +5 -0
- package/dist/components/action-sheet/ActionSheetItem.js.map +1 -1
- package/dist/components/app-bar/AppBar.d.ts +5 -0
- package/dist/components/app-bar/AppBar.d.ts.map +1 -1
- package/dist/components/app-bar/AppBar.js +5 -0
- package/dist/components/app-bar/AppBar.js.map +1 -1
- package/dist/components/avatar/Avatar.d.ts +5 -0
- package/dist/components/avatar/Avatar.d.ts.map +1 -1
- package/dist/components/avatar/Avatar.js +5 -0
- package/dist/components/avatar/Avatar.js.map +1 -1
- package/dist/components/avatar-group/AvatarGroup.d.ts +5 -0
- package/dist/components/avatar-group/AvatarGroup.d.ts.map +1 -1
- package/dist/components/avatar-group/AvatarGroup.js +5 -0
- package/dist/components/avatar-group/AvatarGroup.js.map +1 -1
- package/dist/components/badge/Badge.d.ts +5 -0
- package/dist/components/badge/Badge.d.ts.map +1 -1
- package/dist/components/badge/Badge.js +5 -0
- package/dist/components/badge/Badge.js.map +1 -1
- package/dist/components/breadcrumbs/Breadcrumbs.d.ts +5 -0
- package/dist/components/breadcrumbs/Breadcrumbs.d.ts.map +1 -1
- package/dist/components/breadcrumbs/Breadcrumbs.js +5 -0
- package/dist/components/breadcrumbs/Breadcrumbs.js.map +1 -1
- package/dist/components/button-group/ButtonGroup.d.ts +5 -0
- package/dist/components/button-group/ButtonGroup.d.ts.map +1 -1
- package/dist/components/button-group/ButtonGroup.js +5 -0
- package/dist/components/button-group/ButtonGroup.js.map +1 -1
- package/dist/components/checkbox/Checkbox.d.ts +5 -0
- package/dist/components/checkbox/Checkbox.d.ts.map +1 -1
- package/dist/components/checkbox/Checkbox.js +5 -0
- package/dist/components/checkbox/Checkbox.js.map +1 -1
- package/dist/components/checkbox/CheckboxGroup.d.ts +5 -0
- package/dist/components/checkbox/CheckboxGroup.d.ts.map +1 -1
- package/dist/components/checkbox/CheckboxGroup.js +5 -0
- package/dist/components/checkbox/CheckboxGroup.js.map +1 -1
- package/dist/components/chip/Chip.d.ts +5 -0
- package/dist/components/chip/Chip.d.ts.map +1 -1
- package/dist/components/chip/Chip.js +5 -0
- package/dist/components/chip/Chip.js.map +1 -1
- package/dist/components/chip-group/ChipGroup.d.ts +5 -0
- package/dist/components/chip-group/ChipGroup.d.ts.map +1 -1
- package/dist/components/chip-group/ChipGroup.js +5 -0
- package/dist/components/chip-group/ChipGroup.js.map +1 -1
- package/dist/components/data-table/DataTable.d.ts +5 -0
- package/dist/components/data-table/DataTable.d.ts.map +1 -1
- package/dist/components/data-table/DataTable.js +5 -0
- package/dist/components/data-table/DataTable.js.map +1 -1
- package/dist/components/date-picker/DatePicker.d.ts +5 -0
- package/dist/components/date-picker/DatePicker.d.ts.map +1 -1
- package/dist/components/date-picker/DatePicker.js +5 -0
- package/dist/components/date-picker/DatePicker.js.map +1 -1
- package/dist/components/drawer/Drawer.d.ts +5 -0
- package/dist/components/drawer/Drawer.d.ts.map +1 -1
- package/dist/components/drawer/Drawer.js +5 -0
- package/dist/components/drawer/Drawer.js.map +1 -1
- package/dist/components/form/Form.d.ts +5 -0
- package/dist/components/form/Form.d.ts.map +1 -1
- package/dist/components/form/Form.js +5 -0
- package/dist/components/form/Form.js.map +1 -1
- package/dist/components/form/FormActions.d.ts +5 -0
- package/dist/components/form/FormActions.d.ts.map +1 -1
- package/dist/components/form/FormActions.js +5 -0
- package/dist/components/form/FormActions.js.map +1 -1
- package/dist/components/form/FormError.d.ts +5 -0
- package/dist/components/form/FormError.d.ts.map +1 -1
- package/dist/components/form/FormError.js +5 -0
- package/dist/components/form/FormError.js.map +1 -1
- package/dist/components/form/FormField.d.ts +5 -0
- package/dist/components/form/FormField.d.ts.map +1 -1
- package/dist/components/form/FormField.js +5 -0
- package/dist/components/form/FormField.js.map +1 -1
- package/dist/components/form/index.d.ts +1 -1
- package/dist/components/form/index.d.ts.map +1 -1
- package/dist/components/form/index.js.map +1 -1
- package/dist/components/form/useFormController.d.ts.map +1 -1
- package/dist/components/form/useFormController.js.map +1 -1
- package/dist/components/icon/Icon.d.ts +5 -0
- package/dist/components/icon/Icon.d.ts.map +1 -1
- package/dist/components/icon/Icon.js +5 -0
- package/dist/components/icon/Icon.js.map +1 -1
- package/dist/components/icon-button/IconButton.d.ts +5 -0
- package/dist/components/icon-button/IconButton.d.ts.map +1 -1
- package/dist/components/icon-button/IconButton.js +5 -0
- package/dist/components/icon-button/IconButton.js.map +1 -1
- package/dist/components/image/Image.d.ts +5 -0
- package/dist/components/image/Image.d.ts.map +1 -1
- package/dist/components/image/Image.js +5 -0
- package/dist/components/image/Image.js.map +1 -1
- package/dist/components/media-card/MediaCard.d.ts +5 -0
- package/dist/components/media-card/MediaCard.d.ts.map +1 -1
- package/dist/components/media-card/MediaCard.js +5 -0
- package/dist/components/media-card/MediaCard.js.map +1 -1
- package/dist/components/menu/DropdownMenu.d.ts +5 -0
- package/dist/components/menu/DropdownMenu.d.ts.map +1 -1
- package/dist/components/menu/DropdownMenu.js +5 -0
- package/dist/components/menu/DropdownMenu.js.map +1 -1
- package/dist/components/menu/Menu.d.ts +5 -0
- package/dist/components/menu/Menu.d.ts.map +1 -1
- package/dist/components/menu/Menu.js +5 -0
- package/dist/components/menu/Menu.js.map +1 -1
- package/dist/components/metric-card/MetricCard.d.ts +5 -0
- package/dist/components/metric-card/MetricCard.d.ts.map +1 -1
- package/dist/components/metric-card/MetricCard.js +5 -0
- package/dist/components/metric-card/MetricCard.js.map +1 -1
- package/dist/components/modal/Modal.d.ts +5 -0
- package/dist/components/modal/Modal.d.ts.map +1 -1
- package/dist/components/modal/Modal.js +5 -0
- package/dist/components/modal/Modal.js.map +1 -1
- package/dist/components/navigation-item/NavigationItem.d.ts +5 -0
- package/dist/components/navigation-item/NavigationItem.d.ts.map +1 -1
- package/dist/components/navigation-item/NavigationItem.js +5 -0
- package/dist/components/navigation-item/NavigationItem.js.map +1 -1
- package/dist/components/navigation-list/NavigationList.d.ts +5 -0
- package/dist/components/navigation-list/NavigationList.d.ts.map +1 -1
- package/dist/components/navigation-list/NavigationList.js +5 -0
- package/dist/components/navigation-list/NavigationList.js.map +1 -1
- package/dist/components/pagination/Pagination.d.ts +5 -0
- package/dist/components/pagination/Pagination.d.ts.map +1 -1
- package/dist/components/pagination/Pagination.js +5 -0
- package/dist/components/pagination/Pagination.js.map +1 -1
- package/dist/components/progress/Progress.d.ts +5 -0
- package/dist/components/progress/Progress.d.ts.map +1 -1
- package/dist/components/progress/Progress.js +5 -0
- package/dist/components/progress/Progress.js.map +1 -1
- package/dist/components/radio/Radio.d.ts +5 -0
- package/dist/components/radio/Radio.d.ts.map +1 -1
- package/dist/components/radio/Radio.js +5 -0
- package/dist/components/radio/Radio.js.map +1 -1
- package/dist/components/radio/RadioGroup.d.ts +5 -0
- package/dist/components/radio/RadioGroup.d.ts.map +1 -1
- package/dist/components/radio/RadioGroup.js +5 -0
- package/dist/components/radio/RadioGroup.js.map +1 -1
- package/dist/components/rating/Rating.d.ts +5 -0
- package/dist/components/rating/Rating.d.ts.map +1 -1
- package/dist/components/rating/Rating.js +5 -0
- package/dist/components/rating/Rating.js.map +1 -1
- package/dist/components/search-bar/SearchBar.d.ts +5 -0
- package/dist/components/search-bar/SearchBar.d.ts.map +1 -1
- package/dist/components/search-bar/SearchBar.js +5 -0
- package/dist/components/search-bar/SearchBar.js.map +1 -1
- package/dist/components/select/Select.d.ts +5 -0
- package/dist/components/select/Select.d.ts.map +1 -1
- package/dist/components/select/Select.js +5 -0
- package/dist/components/select/Select.js.map +1 -1
- package/dist/components/skeleton/Skeleton.d.ts +5 -0
- package/dist/components/skeleton/Skeleton.d.ts.map +1 -1
- package/dist/components/skeleton/Skeleton.js +5 -0
- package/dist/components/skeleton/Skeleton.js.map +1 -1
- package/dist/components/skeleton/SkeletonCard.d.ts +5 -0
- package/dist/components/skeleton/SkeletonCard.d.ts.map +1 -1
- package/dist/components/skeleton/SkeletonCard.js +5 -0
- package/dist/components/skeleton/SkeletonCard.js.map +1 -1
- package/dist/components/skeleton/SkeletonList.d.ts +5 -0
- package/dist/components/skeleton/SkeletonList.d.ts.map +1 -1
- package/dist/components/skeleton/SkeletonList.js +5 -0
- package/dist/components/skeleton/SkeletonList.js.map +1 -1
- package/dist/components/skeleton/SkeletonText.d.ts +5 -0
- package/dist/components/skeleton/SkeletonText.d.ts.map +1 -1
- package/dist/components/skeleton/SkeletonText.js +5 -0
- package/dist/components/skeleton/SkeletonText.js.map +1 -1
- package/dist/components/tabs/Tabs.d.ts +5 -0
- package/dist/components/tabs/Tabs.d.ts.map +1 -1
- package/dist/components/tabs/Tabs.js +5 -0
- package/dist/components/tabs/Tabs.js.map +1 -1
- package/dist/components/textarea/Textarea.d.ts +5 -0
- package/dist/components/textarea/Textarea.d.ts.map +1 -1
- package/dist/components/textarea/Textarea.js +5 -0
- package/dist/components/textarea/Textarea.js.map +1 -1
- package/dist/components/time-picker/TimePicker.d.ts +5 -0
- package/dist/components/time-picker/TimePicker.d.ts.map +1 -1
- package/dist/components/time-picker/TimePicker.js +5 -0
- package/dist/components/time-picker/TimePicker.js.map +1 -1
- package/dist/components/toast/Toast.d.ts +5 -0
- package/dist/components/toast/Toast.d.ts.map +1 -1
- package/dist/components/toast/Toast.js +5 -0
- package/dist/components/toast/Toast.js.map +1 -1
- package/dist/components/toast/ToastProvider.d.ts +5 -0
- package/dist/components/toast/ToastProvider.d.ts.map +1 -1
- package/dist/components/toast/ToastProvider.js +5 -0
- package/dist/components/toast/ToastProvider.js.map +1 -1
- package/dist/components/toolbar/Toolbar.d.ts +5 -0
- package/dist/components/toolbar/Toolbar.d.ts.map +1 -1
- package/dist/components/toolbar/Toolbar.js +5 -0
- package/dist/components/toolbar/Toolbar.js.map +1 -1
- package/dist/components/toolbar/ToolbarAction.d.ts +5 -0
- package/dist/components/toolbar/ToolbarAction.d.ts.map +1 -1
- package/dist/components/toolbar/ToolbarAction.js +5 -0
- package/dist/components/toolbar/ToolbarAction.js.map +1 -1
- package/dist/foundation/Box.d.ts +5 -0
- package/dist/foundation/Box.d.ts.map +1 -1
- package/dist/foundation/Box.js +5 -0
- package/dist/foundation/Box.js.map +1 -1
- package/dist/foundation/Center.d.ts +5 -0
- package/dist/foundation/Center.d.ts.map +1 -1
- package/dist/foundation/Center.js +5 -0
- package/dist/foundation/Center.js.map +1 -1
- package/dist/foundation/Container.d.ts +5 -0
- package/dist/foundation/Container.d.ts.map +1 -1
- package/dist/foundation/Container.js +5 -0
- package/dist/foundation/Container.js.map +1 -1
- package/dist/foundation/Divider.d.ts +5 -0
- package/dist/foundation/Divider.d.ts.map +1 -1
- package/dist/foundation/Divider.js +5 -0
- package/dist/foundation/Divider.js.map +1 -1
- package/dist/foundation/Grid.d.ts +5 -0
- package/dist/foundation/Grid.d.ts.map +1 -1
- package/dist/foundation/Grid.js +5 -0
- package/dist/foundation/Grid.js.map +1 -1
- package/dist/foundation/Inline.d.ts +5 -0
- package/dist/foundation/Inline.d.ts.map +1 -1
- package/dist/foundation/Inline.js +5 -0
- package/dist/foundation/Inline.js.map +1 -1
- package/dist/foundation/Show.d.ts +5 -0
- package/dist/foundation/Show.d.ts.map +1 -1
- package/dist/foundation/Show.js +5 -0
- package/dist/foundation/Show.js.map +1 -1
- package/dist/foundation/Spacer.d.ts +5 -0
- package/dist/foundation/Spacer.d.ts.map +1 -1
- package/dist/foundation/Spacer.js +5 -0
- package/dist/foundation/Spacer.js.map +1 -1
- package/dist/foundation/Stack.d.ts +5 -0
- package/dist/foundation/Stack.d.ts.map +1 -1
- package/dist/foundation/Stack.js +5 -0
- package/dist/foundation/Stack.js.map +1 -1
- package/dist/foundation/Surface.d.ts +5 -0
- package/dist/foundation/Surface.d.ts.map +1 -1
- package/dist/foundation/Surface.js +5 -0
- package/dist/foundation/Surface.js.map +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js.map +1 -1
- package/dist/layout/screen/Screen.d.ts +5 -0
- package/dist/layout/screen/Screen.d.ts.map +1 -1
- package/dist/layout/screen/Screen.js +5 -0
- package/dist/layout/screen/Screen.js.map +1 -1
- package/dist/layout/screen-section/ScreenSection.d.ts +5 -0
- package/dist/layout/screen-section/ScreenSection.d.ts.map +1 -1
- package/dist/layout/screen-section/ScreenSection.js +5 -0
- package/dist/layout/screen-section/ScreenSection.js.map +1 -1
- package/dist/layout/settings-layout/SettingsLayout.d.ts +5 -0
- package/dist/layout/settings-layout/SettingsLayout.d.ts.map +1 -1
- package/dist/layout/settings-layout/SettingsLayout.js +5 -0
- package/dist/layout/settings-layout/SettingsLayout.js.map +1 -1
- package/dist/layout/sidebar-layout/SidebarLayout.d.ts +5 -0
- package/dist/layout/sidebar-layout/SidebarLayout.d.ts.map +1 -1
- package/dist/layout/sidebar-layout/SidebarLayout.js +5 -0
- package/dist/layout/sidebar-layout/SidebarLayout.js.map +1 -1
- package/dist/layout/topbar-layout/TopbarLayout.d.ts +5 -0
- package/dist/layout/topbar-layout/TopbarLayout.d.ts.map +1 -1
- package/dist/layout/topbar-layout/TopbarLayout.js +5 -0
- package/dist/layout/topbar-layout/TopbarLayout.js.map +1 -1
- package/dist/patterns/auth/ForgotPasswordForm.d.ts +5 -0
- package/dist/patterns/auth/ForgotPasswordForm.d.ts.map +1 -1
- package/dist/patterns/auth/ForgotPasswordForm.js +5 -0
- package/dist/patterns/auth/ForgotPasswordForm.js.map +1 -1
- package/dist/patterns/auth/OtpForm.d.ts +5 -0
- package/dist/patterns/auth/OtpForm.d.ts.map +1 -1
- package/dist/patterns/auth/OtpForm.js +5 -0
- package/dist/patterns/auth/OtpForm.js.map +1 -1
- package/dist/patterns/auth/SignInForm.d.ts +5 -0
- package/dist/patterns/auth/SignInForm.d.ts.map +1 -1
- package/dist/patterns/auth/SignInForm.js +5 -0
- package/dist/patterns/auth/SignInForm.js.map +1 -1
- package/dist/patterns/auth/SignUpForm.d.ts +5 -0
- package/dist/patterns/auth/SignUpForm.d.ts.map +1 -1
- package/dist/patterns/auth/SignUpForm.js +5 -0
- package/dist/patterns/auth/SignUpForm.js.map +1 -1
- package/dist/patterns/chat-list-item/ChatListItem.d.ts +5 -0
- package/dist/patterns/chat-list-item/ChatListItem.d.ts.map +1 -1
- package/dist/patterns/chat-list-item/ChatListItem.js +5 -0
- package/dist/patterns/chat-list-item/ChatListItem.js.map +1 -1
- package/dist/patterns/collection-editor/CollectionEditor.d.ts +5 -0
- package/dist/patterns/collection-editor/CollectionEditor.d.ts.map +1 -1
- package/dist/patterns/collection-editor/CollectionEditor.js +5 -0
- package/dist/patterns/collection-editor/CollectionEditor.js.map +1 -1
- package/dist/patterns/confirm-dialog/ConfirmDialog.d.ts +5 -0
- package/dist/patterns/confirm-dialog/ConfirmDialog.d.ts.map +1 -1
- package/dist/patterns/confirm-dialog/ConfirmDialog.js +5 -0
- package/dist/patterns/confirm-dialog/ConfirmDialog.js.map +1 -1
- package/dist/patterns/disclosure-section/DisclosureSection.d.ts +5 -0
- package/dist/patterns/disclosure-section/DisclosureSection.d.ts.map +1 -1
- package/dist/patterns/disclosure-section/DisclosureSection.js +5 -0
- package/dist/patterns/disclosure-section/DisclosureSection.js.map +1 -1
- package/dist/patterns/filter-bar/FilterBar.d.ts +5 -0
- package/dist/patterns/filter-bar/FilterBar.d.ts.map +1 -1
- package/dist/patterns/filter-bar/FilterBar.js +5 -0
- package/dist/patterns/filter-bar/FilterBar.js.map +1 -1
- package/dist/patterns/hero/Hero.d.ts +5 -0
- package/dist/patterns/hero/Hero.d.ts.map +1 -1
- package/dist/patterns/hero/Hero.js +5 -0
- package/dist/patterns/hero/Hero.js.map +1 -1
- package/dist/patterns/image-preview/ImagePreview.d.ts +5 -0
- package/dist/patterns/image-preview/ImagePreview.d.ts.map +1 -1
- package/dist/patterns/image-preview/ImagePreview.js +5 -0
- package/dist/patterns/image-preview/ImagePreview.js.map +1 -1
- package/dist/patterns/image-upload-field/ImageUploadField.d.ts +5 -0
- package/dist/patterns/image-upload-field/ImageUploadField.d.ts.map +1 -1
- package/dist/patterns/image-upload-field/ImageUploadField.js +5 -0
- package/dist/patterns/image-upload-field/ImageUploadField.js.map +1 -1
- package/dist/patterns/inspector-field/InspectorField.d.ts +5 -0
- package/dist/patterns/inspector-field/InspectorField.d.ts.map +1 -1
- package/dist/patterns/inspector-field/InspectorField.js +5 -0
- package/dist/patterns/inspector-field/InspectorField.js.map +1 -1
- package/dist/patterns/list/List.d.ts +5 -0
- package/dist/patterns/list/List.d.ts.map +1 -1
- package/dist/patterns/list/List.js +5 -0
- package/dist/patterns/list/List.js.map +1 -1
- package/dist/patterns/list/ListRow.d.ts +5 -0
- package/dist/patterns/list/ListRow.d.ts.map +1 -1
- package/dist/patterns/list/ListRow.js +5 -0
- package/dist/patterns/list/ListRow.js.map +1 -1
- package/dist/patterns/list/ListSection.d.ts +5 -0
- package/dist/patterns/list/ListSection.d.ts.map +1 -1
- package/dist/patterns/list/ListSection.js +5 -0
- package/dist/patterns/list/ListSection.js.map +1 -1
- package/dist/patterns/message-bubble/MessageBubble.d.ts +5 -0
- package/dist/patterns/message-bubble/MessageBubble.d.ts.map +1 -1
- package/dist/patterns/message-bubble/MessageBubble.js +5 -0
- package/dist/patterns/message-bubble/MessageBubble.js.map +1 -1
- package/dist/patterns/notice/Notice.d.ts +5 -0
- package/dist/patterns/notice/Notice.d.ts.map +1 -1
- package/dist/patterns/notice/Notice.js +5 -0
- package/dist/patterns/notice/Notice.js.map +1 -1
- package/dist/patterns/panel/Panel.d.ts +5 -0
- package/dist/patterns/panel/Panel.d.ts.map +1 -1
- package/dist/patterns/panel/Panel.js +5 -0
- package/dist/patterns/panel/Panel.js.map +1 -1
- package/dist/patterns/post-card/PostCard.d.ts +5 -0
- package/dist/patterns/post-card/PostCard.d.ts.map +1 -1
- package/dist/patterns/post-card/PostCard.js +5 -0
- package/dist/patterns/post-card/PostCard.js.map +1 -1
- package/dist/patterns/section-header/SectionHeader.d.ts +5 -0
- package/dist/patterns/section-header/SectionHeader.d.ts.map +1 -1
- package/dist/patterns/section-header/SectionHeader.js +5 -0
- package/dist/patterns/section-header/SectionHeader.js.map +1 -1
- package/dist/patterns/selection/SelectableItem.d.ts +5 -0
- package/dist/patterns/selection/SelectableItem.d.ts.map +1 -1
- package/dist/patterns/selection/SelectableItem.js +5 -0
- package/dist/patterns/selection/SelectableItem.js.map +1 -1
- package/dist/patterns/selection/SelectionProvider.d.ts +10 -0
- package/dist/patterns/selection/SelectionProvider.d.ts.map +1 -1
- package/dist/patterns/selection/SelectionProvider.js +10 -0
- package/dist/patterns/selection/SelectionProvider.js.map +1 -1
- package/dist/patterns/settings-row/SettingsRow.d.ts +5 -0
- package/dist/patterns/settings-row/SettingsRow.d.ts.map +1 -1
- package/dist/patterns/settings-row/SettingsRow.js +5 -0
- package/dist/patterns/settings-row/SettingsRow.js.map +1 -1
- package/dist/patterns/switch-field/SwitchField.d.ts +5 -0
- package/dist/patterns/switch-field/SwitchField.d.ts.map +1 -1
- package/dist/patterns/switch-field/SwitchField.js +5 -0
- package/dist/patterns/switch-field/SwitchField.js.map +1 -1
- package/dist/patterns/theme-composer/ThemeComposer.d.ts +5 -0
- package/dist/patterns/theme-composer/ThemeComposer.d.ts.map +1 -1
- package/dist/patterns/theme-composer/ThemeComposer.js +5 -0
- package/dist/patterns/theme-composer/ThemeComposer.js.map +1 -1
- package/dist/patterns/tile-grid/PaletteItem.d.ts +5 -0
- package/dist/patterns/tile-grid/PaletteItem.d.ts.map +1 -1
- package/dist/patterns/tile-grid/PaletteItem.js +5 -0
- package/dist/patterns/tile-grid/PaletteItem.js.map +1 -1
- package/dist/patterns/tile-grid/TileGrid.d.ts +5 -0
- package/dist/patterns/tile-grid/TileGrid.d.ts.map +1 -1
- package/dist/patterns/tile-grid/TileGrid.js +5 -0
- package/dist/patterns/tile-grid/TileGrid.js.map +1 -1
- package/dist/patterns/timeline/Timeline.d.ts +5 -0
- package/dist/patterns/timeline/Timeline.d.ts.map +1 -1
- package/dist/patterns/timeline/Timeline.js +5 -0
- package/dist/patterns/timeline/Timeline.js.map +1 -1
- package/dist/patterns/tree-view/TreeItem.d.ts +5 -0
- package/dist/patterns/tree-view/TreeItem.d.ts.map +1 -1
- package/dist/patterns/tree-view/TreeItem.js +5 -0
- package/dist/patterns/tree-view/TreeItem.js.map +1 -1
- package/dist/patterns/tree-view/TreeView.d.ts +5 -0
- package/dist/patterns/tree-view/TreeView.d.ts.map +1 -1
- package/dist/patterns/tree-view/TreeView.js +5 -0
- package/dist/patterns/tree-view/TreeView.js.map +1 -1
- package/dist/patterns/zora-drawer-content/ZoraDrawerContent.d.ts +5 -0
- package/dist/patterns/zora-drawer-content/ZoraDrawerContent.d.ts.map +1 -1
- package/dist/patterns/zora-drawer-content/ZoraDrawerContent.js +5 -0
- package/dist/patterns/zora-drawer-content/ZoraDrawerContent.js.map +1 -1
- package/dist/patterns/zora-tab-bar/ZoraTabBar.d.ts +5 -0
- package/dist/patterns/zora-tab-bar/ZoraTabBar.d.ts.map +1 -1
- package/dist/patterns/zora-tab-bar/ZoraTabBar.js +5 -0
- package/dist/patterns/zora-tab-bar/ZoraTabBar.js.map +1 -1
- package/package.json +1 -1
- package/src/components/action-sheet/ActionSheet.tsx +5 -0
- package/src/components/action-sheet/ActionSheetItem.tsx +5 -0
- package/src/components/app-bar/AppBar.tsx +5 -0
- package/src/components/avatar/Avatar.tsx +5 -0
- package/src/components/avatar-group/AvatarGroup.tsx +5 -0
- package/src/components/badge/Badge.tsx +5 -0
- package/src/components/breadcrumbs/Breadcrumbs.tsx +5 -0
- package/src/components/button-group/ButtonGroup.tsx +5 -0
- package/src/components/checkbox/Checkbox.tsx +5 -0
- package/src/components/checkbox/CheckboxGroup.tsx +5 -0
- package/src/components/chip/Chip.tsx +5 -0
- package/src/components/chip-group/ChipGroup.tsx +5 -0
- package/src/components/data-table/DataTable.tsx +5 -0
- package/src/components/date-picker/DatePicker.tsx +5 -0
- package/src/components/drawer/Drawer.tsx +5 -0
- package/src/components/form/Form.tsx +5 -0
- package/src/components/form/FormActions.tsx +5 -0
- package/src/components/form/FormError.tsx +5 -0
- package/src/components/form/FormField.tsx +5 -0
- package/src/components/form/index.ts +0 -1
- package/src/components/form/useFormController.ts +3 -2
- package/src/components/icon/Icon.tsx +5 -0
- package/src/components/icon-button/IconButton.tsx +5 -0
- package/src/components/image/Image.tsx +5 -0
- package/src/components/media-card/MediaCard.tsx +5 -0
- package/src/components/menu/DropdownMenu.tsx +5 -0
- package/src/components/menu/Menu.tsx +5 -0
- package/src/components/metric-card/MetricCard.tsx +5 -0
- package/src/components/modal/Modal.tsx +5 -0
- package/src/components/navigation-item/NavigationItem.tsx +5 -0
- package/src/components/navigation-list/NavigationList.tsx +5 -0
- package/src/components/pagination/Pagination.tsx +5 -0
- package/src/components/progress/Progress.tsx +5 -0
- package/src/components/radio/Radio.tsx +5 -0
- package/src/components/radio/RadioGroup.tsx +5 -0
- package/src/components/rating/Rating.tsx +5 -0
- package/src/components/search-bar/SearchBar.tsx +5 -0
- package/src/components/select/Select.tsx +5 -0
- package/src/components/skeleton/Skeleton.tsx +5 -0
- package/src/components/skeleton/SkeletonCard.tsx +5 -0
- package/src/components/skeleton/SkeletonList.tsx +5 -0
- package/src/components/skeleton/SkeletonText.tsx +5 -0
- package/src/components/tabs/Tabs.tsx +5 -0
- package/src/components/textarea/Textarea.tsx +5 -0
- package/src/components/time-picker/TimePicker.tsx +5 -0
- package/src/components/toast/Toast.tsx +5 -0
- package/src/components/toast/ToastProvider.tsx +5 -0
- package/src/components/toolbar/Toolbar.tsx +5 -0
- package/src/components/toolbar/ToolbarAction.tsx +5 -0
- package/src/foundation/Box.tsx +5 -0
- package/src/foundation/Center.tsx +5 -0
- package/src/foundation/Container.tsx +5 -0
- package/src/foundation/Divider.tsx +5 -0
- package/src/foundation/Grid.tsx +5 -0
- package/src/foundation/Inline.tsx +5 -0
- package/src/foundation/Show.tsx +5 -0
- package/src/foundation/Spacer.tsx +5 -0
- package/src/foundation/Stack.tsx +5 -0
- package/src/foundation/Surface.tsx +5 -0
- package/src/index.ts +0 -1
- package/src/layout/screen/Screen.tsx +5 -0
- package/src/layout/screen-section/ScreenSection.tsx +5 -0
- package/src/layout/settings-layout/SettingsLayout.tsx +5 -0
- package/src/layout/sidebar-layout/SidebarLayout.tsx +5 -0
- package/src/layout/topbar-layout/TopbarLayout.tsx +5 -0
- package/src/patterns/auth/ForgotPasswordForm.tsx +5 -0
- package/src/patterns/auth/OtpForm.tsx +5 -0
- package/src/patterns/auth/SignInForm.tsx +5 -0
- package/src/patterns/auth/SignUpForm.tsx +5 -0
- package/src/patterns/chat-list-item/ChatListItem.tsx +5 -0
- package/src/patterns/collection-editor/CollectionEditor.tsx +5 -0
- package/src/patterns/confirm-dialog/ConfirmDialog.tsx +5 -0
- package/src/patterns/disclosure-section/DisclosureSection.tsx +5 -0
- package/src/patterns/filter-bar/FilterBar.tsx +5 -0
- package/src/patterns/hero/Hero.tsx +5 -0
- package/src/patterns/image-preview/ImagePreview.tsx +5 -0
- package/src/patterns/image-upload-field/ImageUploadField.tsx +5 -0
- package/src/patterns/inspector-field/InspectorField.tsx +5 -0
- package/src/patterns/list/List.tsx +5 -0
- package/src/patterns/list/ListRow.tsx +5 -0
- package/src/patterns/list/ListSection.tsx +5 -0
- package/src/patterns/message-bubble/MessageBubble.tsx +5 -0
- package/src/patterns/notice/Notice.tsx +5 -0
- package/src/patterns/panel/Panel.tsx +5 -0
- package/src/patterns/post-card/PostCard.tsx +5 -0
- package/src/patterns/section-header/SectionHeader.tsx +5 -0
- package/src/patterns/selection/SelectableItem.tsx +5 -0
- package/src/patterns/selection/SelectionProvider.tsx +10 -0
- package/src/patterns/settings-row/SettingsRow.tsx +5 -0
- package/src/patterns/switch-field/SwitchField.tsx +5 -0
- package/src/patterns/theme-composer/ThemeComposer.tsx +5 -0
- package/src/patterns/tile-grid/PaletteItem.tsx +5 -0
- package/src/patterns/tile-grid/TileGrid.tsx +5 -0
- package/src/patterns/timeline/Timeline.tsx +5 -0
- package/src/patterns/tree-view/TreeItem.tsx +5 -0
- package/src/patterns/tree-view/TreeView.tsx +5 -0
- package/src/patterns/zora-drawer-content/ZoraDrawerContent.tsx +5 -0
- package/src/patterns/zora-tab-bar/ZoraTabBar.tsx +5 -0
|
@@ -1,4 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { SignUpFormProps } from './types';
|
|
3
|
+
/***
|
|
4
|
+
* Sign-up form pattern with structured fields and validation.
|
|
5
|
+
*
|
|
6
|
+
* @readme
|
|
7
|
+
*/
|
|
3
8
|
export declare const SignUpForm: (props: SignUpFormProps) => React.ReactElement | null;
|
|
4
9
|
//# sourceMappingURL=SignUpForm.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SignUpForm.d.ts","sourceRoot":"","sources":["../../../src/patterns/auth/SignUpForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AA0E/C,eAAO,MAAM,UAAU,uDAAsC,CAAC"}
|
|
1
|
+
{"version":3,"file":"SignUpForm.d.ts","sourceRoot":"","sources":["../../../src/patterns/auth/SignUpForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AA0E/C;;;;GAIG;AACH,eAAO,MAAM,UAAU,uDAAsC,CAAC"}
|
|
@@ -35,5 +35,10 @@ function SignUpFormInner({ themeId: _themeId, mode: _mode, fields = defaultSignU
|
|
|
35
35
|
</Button>
|
|
36
36
|
</Stack>) : undefined} disabled={disabled} error={error} fields={fields} loading={loading} onChange={setValues} onSubmit={onSubmit} submitLabel={submitLabel} testID={testID} values={values}/>);
|
|
37
37
|
}
|
|
38
|
+
/***
|
|
39
|
+
* Sign-up form pattern with structured fields and validation.
|
|
40
|
+
*
|
|
41
|
+
* @readme
|
|
42
|
+
*/
|
|
38
43
|
export const SignUpForm = withZoraThemeScope(SignUpFormInner);
|
|
39
44
|
//# sourceMappingURL=SignUpForm.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SignUpForm.js","sourceRoot":"","sources":["../../../src/patterns/auth/SignUpForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,IAAI,EAAyC,MAAM,uBAAuB,CAAC;AACpF,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAGpE,MAAM,mBAAmB,GAAG;IAC1B;QACE,IAAI,EAAE,OAAO;QACb,KAAK,EAAE,OAAO;QACd,IAAI,EAAE,OAAO;QACb,cAAc,EAAE,MAAM;QACtB,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;KACjD;IACD;QACE,IAAI,EAAE,UAAU;QAChB,KAAK,EAAE,UAAU;QACjB,IAAI,EAAE,UAAU;QAChB,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC;KAC/D;CAC4C,CAAC;AAEhD,SAAS,YAAY,CAAC,MAAkC;IACtD,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAyB,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE;QACzE,UAAU,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC;QAC5B,OAAO,UAAU,CAAC;IACpB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,MAAM,CAAC;AAChB,CAAC;AAED,SAAS,eAAe,CAAC,EACvB,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,MAAM,GAAG,mBAAmB,EAC5B,WAAW,GAAG,SAAS,EACvB,OAAO,GAAG,KAAK,EACf,QAAQ,GAAG,KAAK,EAChB,KAAK,EACL,WAAW,GAAG,SAAS,EACvB,QAAQ,EACR,QAAQ,EACR,MAAM,GACU;IAChB,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAa,GAAG,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC;IAEnF,OAAO,CACL,CAAC,IAAI,CACH,OAAO,CAAC,CACN,QAAQ,CAAC,CAAC,CAAC,CACT,CAAC,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,CACxC;YAAA,CAAC,MAAM,CACL,QAAQ,CAAC,CAAC,QAAQ,IAAI,OAAO,CAAC,CAC9B,OAAO,CAAC,OAAO,CACf,OAAO,CAAC,CAAC,GAAG,EAAE;gBACZ,KAAK,QAAQ,EAAE,CAAC;YAClB,CAAC,CAAC,CACF,IAAI,CAAC,GAAG,CACR,KAAK,CAAC,SAAS,CAEf;cAAA,CAAC,WAAW,CACd;YAAA,EAAE,MAAM,CACV;UAAA,EAAE,KAAK,CAAC,CACT,CAAC,CAAC,CAAC,SACN,CAAC,CACD,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,QAAQ,CAAC,CAAC,SAAS,CAAC,CACpB,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,MAAM,CAAC,CAAC,MAAM,CAAC,EACf,CACH,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,kBAAkB,CAAC,eAAe,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport { Button } from '../../components/button';\nimport { Form, type FormFieldConfig, type FormValues } from '../../components/form';\nimport { Stack } from '../../foundation';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport type { SignUpFormProps } from './types';\n\nconst defaultSignUpFields = [\n {\n name: 'email',\n label: 'Email',\n type: 'email',\n autoCapitalize: 'none',\n rules: [{ kind: 'required' }, { kind: 'email' }],\n },\n {\n name: 'password',\n label: 'Password',\n type: 'password',\n rules: [{ kind: 'required' }, { kind: 'minLength', value: 8 }],\n },\n] as const satisfies readonly FormFieldConfig[];\n\nfunction createValues(fields: readonly FormFieldConfig[]): FormValues {\n const values = fields.reduce<Record<string, string>>((nextValues, field) => {\n nextValues[field.name] = '';\n return nextValues;\n }, {});\n\n return values;\n}\n\nfunction SignUpFormInner({\n themeId: _themeId,\n mode: _mode,\n fields = defaultSignUpFields,\n signInLabel = 'Sign in',\n loading = false,\n disabled = false,\n error,\n submitLabel = 'Sign up',\n onSubmit,\n onSignIn,\n testID,\n}: SignUpFormProps) {\n const [values, setValues] = React.useState<FormValues>(() => createValues(fields));\n\n return (\n <Form\n actions={\n onSignIn ? (\n <Stack direction=\"row\" gap=\"s\" wrap=\"wrap\">\n <Button\n disabled={disabled || loading}\n variant=\"ghost\"\n onPress={() => {\n void onSignIn();\n }}\n size=\"s\"\n color=\"neutral\"\n >\n {signInLabel}\n </Button>\n </Stack>\n ) : undefined\n }\n disabled={disabled}\n error={error}\n fields={fields}\n loading={loading}\n onChange={setValues}\n onSubmit={onSubmit}\n submitLabel={submitLabel}\n testID={testID}\n values={values}\n />\n );\n}\n\nexport const SignUpForm = withZoraThemeScope(SignUpFormInner);\n"]}
|
|
1
|
+
{"version":3,"file":"SignUpForm.js","sourceRoot":"","sources":["../../../src/patterns/auth/SignUpForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,IAAI,EAAyC,MAAM,uBAAuB,CAAC;AACpF,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAGpE,MAAM,mBAAmB,GAAG;IAC1B;QACE,IAAI,EAAE,OAAO;QACb,KAAK,EAAE,OAAO;QACd,IAAI,EAAE,OAAO;QACb,cAAc,EAAE,MAAM;QACtB,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;KACjD;IACD;QACE,IAAI,EAAE,UAAU;QAChB,KAAK,EAAE,UAAU;QACjB,IAAI,EAAE,UAAU;QAChB,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC;KAC/D;CAC4C,CAAC;AAEhD,SAAS,YAAY,CAAC,MAAkC;IACtD,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAyB,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE;QACzE,UAAU,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC;QAC5B,OAAO,UAAU,CAAC;IACpB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,MAAM,CAAC;AAChB,CAAC;AAED,SAAS,eAAe,CAAC,EACvB,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,MAAM,GAAG,mBAAmB,EAC5B,WAAW,GAAG,SAAS,EACvB,OAAO,GAAG,KAAK,EACf,QAAQ,GAAG,KAAK,EAChB,KAAK,EACL,WAAW,GAAG,SAAS,EACvB,QAAQ,EACR,QAAQ,EACR,MAAM,GACU;IAChB,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAa,GAAG,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC;IAEnF,OAAO,CACL,CAAC,IAAI,CACH,OAAO,CAAC,CACN,QAAQ,CAAC,CAAC,CAAC,CACT,CAAC,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,CACxC;YAAA,CAAC,MAAM,CACL,QAAQ,CAAC,CAAC,QAAQ,IAAI,OAAO,CAAC,CAC9B,OAAO,CAAC,OAAO,CACf,OAAO,CAAC,CAAC,GAAG,EAAE;gBACZ,KAAK,QAAQ,EAAE,CAAC;YAClB,CAAC,CAAC,CACF,IAAI,CAAC,GAAG,CACR,KAAK,CAAC,SAAS,CAEf;cAAA,CAAC,WAAW,CACd;YAAA,EAAE,MAAM,CACV;UAAA,EAAE,KAAK,CAAC,CACT,CAAC,CAAC,CAAC,SACN,CAAC,CACD,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,QAAQ,CAAC,CAAC,SAAS,CAAC,CACpB,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,MAAM,CAAC,CAAC,MAAM,CAAC,EACf,CACH,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,kBAAkB,CAAC,eAAe,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport { Button } from '../../components/button';\nimport { Form, type FormFieldConfig, type FormValues } from '../../components/form';\nimport { Stack } from '../../foundation';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport type { SignUpFormProps } from './types';\n\nconst defaultSignUpFields = [\n {\n name: 'email',\n label: 'Email',\n type: 'email',\n autoCapitalize: 'none',\n rules: [{ kind: 'required' }, { kind: 'email' }],\n },\n {\n name: 'password',\n label: 'Password',\n type: 'password',\n rules: [{ kind: 'required' }, { kind: 'minLength', value: 8 }],\n },\n] as const satisfies readonly FormFieldConfig[];\n\nfunction createValues(fields: readonly FormFieldConfig[]): FormValues {\n const values = fields.reduce<Record<string, string>>((nextValues, field) => {\n nextValues[field.name] = '';\n return nextValues;\n }, {});\n\n return values;\n}\n\nfunction SignUpFormInner({\n themeId: _themeId,\n mode: _mode,\n fields = defaultSignUpFields,\n signInLabel = 'Sign in',\n loading = false,\n disabled = false,\n error,\n submitLabel = 'Sign up',\n onSubmit,\n onSignIn,\n testID,\n}: SignUpFormProps) {\n const [values, setValues] = React.useState<FormValues>(() => createValues(fields));\n\n return (\n <Form\n actions={\n onSignIn ? (\n <Stack direction=\"row\" gap=\"s\" wrap=\"wrap\">\n <Button\n disabled={disabled || loading}\n variant=\"ghost\"\n onPress={() => {\n void onSignIn();\n }}\n size=\"s\"\n color=\"neutral\"\n >\n {signInLabel}\n </Button>\n </Stack>\n ) : undefined\n }\n disabled={disabled}\n error={error}\n fields={fields}\n loading={loading}\n onChange={setValues}\n onSubmit={onSubmit}\n submitLabel={submitLabel}\n testID={testID}\n values={values}\n />\n );\n}\n\n/***\n * Sign-up form pattern with structured fields and validation.\n *\n * @readme\n */\nexport const SignUpForm = withZoraThemeScope(SignUpFormInner);\n"]}
|
|
@@ -1,4 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { ChatListItemProps } from './types';
|
|
3
|
+
/***
|
|
4
|
+
* Chat-style list row with avatar, title, preview text, and unread indicators.
|
|
5
|
+
*
|
|
6
|
+
* @readme
|
|
7
|
+
*/
|
|
3
8
|
export declare const ChatListItem: (props: ChatListItemProps) => React.ReactElement | null;
|
|
4
9
|
//# sourceMappingURL=ChatListItem.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChatListItem.d.ts","sourceRoot":"","sources":["../../../src/patterns/chat-list-item/ChatListItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,KAAK,EAAkB,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAkNjE,eAAO,MAAM,YAAY,yDAAwC,CAAC"}
|
|
1
|
+
{"version":3,"file":"ChatListItem.d.ts","sourceRoot":"","sources":["../../../src/patterns/chat-list-item/ChatListItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,KAAK,EAAkB,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAkNjE;;;;GAIG;AACH,eAAO,MAAM,YAAY,yDAAwC,CAAC"}
|
|
@@ -106,5 +106,10 @@ function ChatListItemInner({ themeId: _themeId, mode: _mode, testID, title, prev
|
|
|
106
106
|
})}
|
|
107
107
|
</ButtonBase>);
|
|
108
108
|
}
|
|
109
|
+
/***
|
|
110
|
+
* Chat-style list row with avatar, title, preview text, and unread indicators.
|
|
111
|
+
*
|
|
112
|
+
* @readme
|
|
113
|
+
*/
|
|
109
114
|
export const ChatListItem = withZoraThemeScope(ChatListItemInner);
|
|
110
115
|
//# sourceMappingURL=ChatListItem.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChatListItem.js","sourceRoot":"","sources":["../../../src/patterns/chat-list-item/ChatListItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ButtonBase } from '@ankhorage/surface';\nimport React from 'react';\n\nimport { Avatar } from '../../components/avatar';\nimport { Badge } from '../../components/badge';\nimport { Text } from '../../components/text';\nimport { Box, Inline, Stack } from '../../foundation';\nimport { useZoraTheme } from '../../theme/useZoraTheme';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport type { ChatListAvatar, ChatListItemProps } from './types';\n\nfunction resolveAvatarName({\n avatar,\n title,\n}: {\n avatar: ChatListAvatar | undefined;\n title: React.ReactNode;\n}): string | undefined {\n if (avatar?.name) {\n return avatar.name;\n }\n\n return typeof title === 'string' ? title : undefined;\n}\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 theme,\n selected,\n pressed,\n hovered,\n disabled,\n}: {\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 : 'transparent';\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,\n borderWidth: selected ? 1 : 0,\n opacity: disabled ? 0.72 : 1,\n };\n}\n\nfunction renderUnreadCount(unreadCount: React.ReactNode) {\n if (unreadCount == null) {\n return null;\n }\n\n return (\n <Badge size=\"s\" color=\"primary\">\n {unreadCount}\n </Badge>\n );\n}\n\nfunction ChatListItemInner({\n themeId: _themeId,\n mode: _mode,\n testID,\n title,\n preview,\n meta,\n timestamp,\n avatar,\n leading,\n trailing,\n unread = false,\n unreadCount,\n selected = false,\n disabled = false,\n compact = false,\n accessibilityLabel,\n onPress,\n}: ChatListItemProps) {\n const { theme } = useZoraTheme();\n const padding = resolvePadding(compact);\n const avatarName = resolveAvatarName({ avatar, title });\n const isInteractive = Boolean(onPress);\n const hasTimestamp = timestamp != null;\n const hasPreview = preview != null;\n const hasMeta = meta != null;\n const hasTrailing = trailing != null;\n const hasUnreadCount = unreadCount != null;\n const hasSecondaryRow = hasPreview || hasMeta || hasUnreadCount || hasTrailing;\n\n const content = ({ pressed, hovered }: { pressed: boolean; hovered: boolean }) => {\n const styles = resolveContainerStyles({\n theme,\n selected,\n pressed,\n hovered,\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=\"m\"\n style={{ opacity: styles.opacity }}\n >\n <Inline align=\"center\" gap=\"m\" wrap=\"nowrap\">\n {leading ?? (\n <Avatar\n initials={avatar?.initials}\n label={avatar?.label ?? avatarName}\n name={avatarName}\n shape={avatar?.shape}\n size={avatar?.size ?? (compact ? 's' : 'm')}\n source={avatar?.source}\n color={avatar?.color}\n />\n )}\n\n <Box flex={1}>\n <Stack gap=\"xxs\">\n <Inline align=\"center\" gap=\"s\" justify=\"space-between\" wrap=\"nowrap\">\n <Box flex={1}>\n <Text\n numberOfLines={1}\n emphasis={disabled ? 'muted' : 'default'}\n variant=\"bodySmall\"\n weight={unread || selected ? 'semiBold' : 'medium'}\n >\n {title}\n </Text>\n </Box>\n {hasTimestamp ? (\n <Text\n numberOfLines={1}\n color={unread ? 'primary' : undefined}\n emphasis={unread ? 'default' : 'subtle'}\n variant=\"caption\"\n weight={unread ? 'semiBold' : 'regular'}\n >\n {timestamp}\n </Text>\n ) : null}\n </Inline>\n\n {hasSecondaryRow ? (\n <Inline align=\"center\" gap=\"s\" justify=\"space-between\" wrap=\"nowrap\">\n <Box flex={1}>\n <Stack gap=\"xxs\">\n {hasPreview ? (\n <Text\n numberOfLines={1}\n emphasis={unread ? 'default' : 'muted'}\n variant=\"bodySmall\"\n weight={unread ? 'medium' : 'regular'}\n >\n {preview}\n </Text>\n ) : null}\n {hasMeta ? (\n <Text numberOfLines={1} emphasis=\"subtle\" variant=\"caption\">\n {meta}\n </Text>\n ) : null}\n </Stack>\n </Box>\n\n {hasUnreadCount || hasTrailing ? (\n <Inline align=\"center\" gap=\"s\" wrap=\"nowrap\">\n {renderUnreadCount(unreadCount)}\n {trailing}\n </Inline>\n ) : null}\n </Inline>\n ) : null}\n </Stack>\n </Box>\n </Inline>\n </Box>\n );\n };\n\n if (!isInteractive) {\n return <Box testID={testID}>{content({ pressed: false, hovered: false })}</Box>;\n }\n\n return (\n <ButtonBase\n accessibilityLabel={accessibilityLabel}\n accessibilityRole=\"button\"\n accessibilityState={{ disabled, selected }}\n disabled={disabled}\n onPress={onPress}\n radius=\"m\"\n testID={testID}\n >\n {(state) =>\n content({\n pressed: state.pressed,\n hovered: state.hovered,\n })\n }\n </ButtonBase>\n );\n}\n\nexport const ChatListItem = withZoraThemeScope(ChatListItemInner);\n"]}
|
|
1
|
+
{"version":3,"file":"ChatListItem.js","sourceRoot":"","sources":["../../../src/patterns/chat-list-item/ChatListItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ButtonBase } from '@ankhorage/surface';\nimport React from 'react';\n\nimport { Avatar } from '../../components/avatar';\nimport { Badge } from '../../components/badge';\nimport { Text } from '../../components/text';\nimport { Box, Inline, Stack } from '../../foundation';\nimport { useZoraTheme } from '../../theme/useZoraTheme';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport type { ChatListAvatar, ChatListItemProps } from './types';\n\nfunction resolveAvatarName({\n avatar,\n title,\n}: {\n avatar: ChatListAvatar | undefined;\n title: React.ReactNode;\n}): string | undefined {\n if (avatar?.name) {\n return avatar.name;\n }\n\n return typeof title === 'string' ? title : undefined;\n}\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 theme,\n selected,\n pressed,\n hovered,\n disabled,\n}: {\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 : 'transparent';\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,\n borderWidth: selected ? 1 : 0,\n opacity: disabled ? 0.72 : 1,\n };\n}\n\nfunction renderUnreadCount(unreadCount: React.ReactNode) {\n if (unreadCount == null) {\n return null;\n }\n\n return (\n <Badge size=\"s\" color=\"primary\">\n {unreadCount}\n </Badge>\n );\n}\n\nfunction ChatListItemInner({\n themeId: _themeId,\n mode: _mode,\n testID,\n title,\n preview,\n meta,\n timestamp,\n avatar,\n leading,\n trailing,\n unread = false,\n unreadCount,\n selected = false,\n disabled = false,\n compact = false,\n accessibilityLabel,\n onPress,\n}: ChatListItemProps) {\n const { theme } = useZoraTheme();\n const padding = resolvePadding(compact);\n const avatarName = resolveAvatarName({ avatar, title });\n const isInteractive = Boolean(onPress);\n const hasTimestamp = timestamp != null;\n const hasPreview = preview != null;\n const hasMeta = meta != null;\n const hasTrailing = trailing != null;\n const hasUnreadCount = unreadCount != null;\n const hasSecondaryRow = hasPreview || hasMeta || hasUnreadCount || hasTrailing;\n\n const content = ({ pressed, hovered }: { pressed: boolean; hovered: boolean }) => {\n const styles = resolveContainerStyles({\n theme,\n selected,\n pressed,\n hovered,\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=\"m\"\n style={{ opacity: styles.opacity }}\n >\n <Inline align=\"center\" gap=\"m\" wrap=\"nowrap\">\n {leading ?? (\n <Avatar\n initials={avatar?.initials}\n label={avatar?.label ?? avatarName}\n name={avatarName}\n shape={avatar?.shape}\n size={avatar?.size ?? (compact ? 's' : 'm')}\n source={avatar?.source}\n color={avatar?.color}\n />\n )}\n\n <Box flex={1}>\n <Stack gap=\"xxs\">\n <Inline align=\"center\" gap=\"s\" justify=\"space-between\" wrap=\"nowrap\">\n <Box flex={1}>\n <Text\n numberOfLines={1}\n emphasis={disabled ? 'muted' : 'default'}\n variant=\"bodySmall\"\n weight={unread || selected ? 'semiBold' : 'medium'}\n >\n {title}\n </Text>\n </Box>\n {hasTimestamp ? (\n <Text\n numberOfLines={1}\n color={unread ? 'primary' : undefined}\n emphasis={unread ? 'default' : 'subtle'}\n variant=\"caption\"\n weight={unread ? 'semiBold' : 'regular'}\n >\n {timestamp}\n </Text>\n ) : null}\n </Inline>\n\n {hasSecondaryRow ? (\n <Inline align=\"center\" gap=\"s\" justify=\"space-between\" wrap=\"nowrap\">\n <Box flex={1}>\n <Stack gap=\"xxs\">\n {hasPreview ? (\n <Text\n numberOfLines={1}\n emphasis={unread ? 'default' : 'muted'}\n variant=\"bodySmall\"\n weight={unread ? 'medium' : 'regular'}\n >\n {preview}\n </Text>\n ) : null}\n {hasMeta ? (\n <Text numberOfLines={1} emphasis=\"subtle\" variant=\"caption\">\n {meta}\n </Text>\n ) : null}\n </Stack>\n </Box>\n\n {hasUnreadCount || hasTrailing ? (\n <Inline align=\"center\" gap=\"s\" wrap=\"nowrap\">\n {renderUnreadCount(unreadCount)}\n {trailing}\n </Inline>\n ) : null}\n </Inline>\n ) : null}\n </Stack>\n </Box>\n </Inline>\n </Box>\n );\n };\n\n if (!isInteractive) {\n return <Box testID={testID}>{content({ pressed: false, hovered: false })}</Box>;\n }\n\n return (\n <ButtonBase\n accessibilityLabel={accessibilityLabel}\n accessibilityRole=\"button\"\n accessibilityState={{ disabled, selected }}\n disabled={disabled}\n onPress={onPress}\n radius=\"m\"\n testID={testID}\n >\n {(state) =>\n content({\n pressed: state.pressed,\n hovered: state.hovered,\n })\n }\n </ButtonBase>\n );\n}\n\n/***\n * Chat-style list row with avatar, title, preview text, and unread indicators.\n *\n * @readme\n */\nexport const ChatListItem = withZoraThemeScope(ChatListItemInner);\n"]}
|
|
@@ -1,4 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { CollectionEditorProps } from './types';
|
|
3
|
+
/***
|
|
4
|
+
* Editor pattern for adding, removing, and reordering a collection of items.
|
|
5
|
+
*
|
|
6
|
+
* @readme
|
|
7
|
+
*/
|
|
3
8
|
export declare const CollectionEditor: <TItem>(props: CollectionEditorProps<TItem>) => React.ReactElement | null;
|
|
4
9
|
//# sourceMappingURL=CollectionEditor.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CollectionEditor.d.ts","sourceRoot":"","sources":["../../../src/patterns/collection-editor/CollectionEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAiGrD,eAAO,MAAM,gBAAgB,
|
|
1
|
+
{"version":3,"file":"CollectionEditor.d.ts","sourceRoot":"","sources":["../../../src/patterns/collection-editor/CollectionEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAiGrD;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,GApGE,KAAK,mEAoGqC,CAAC"}
|
|
@@ -40,5 +40,10 @@ function CollectionEditorInner({ themeId: _themeId, mode: _mode, title, descript
|
|
|
40
40
|
</Stack>
|
|
41
41
|
</Panel>);
|
|
42
42
|
}
|
|
43
|
+
/***
|
|
44
|
+
* Editor pattern for adding, removing, and reordering a collection of items.
|
|
45
|
+
*
|
|
46
|
+
* @readme
|
|
47
|
+
*/
|
|
43
48
|
export const CollectionEditor = withZoraThemeScope(CollectionEditorInner);
|
|
44
49
|
//# sourceMappingURL=CollectionEditor.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CollectionEditor.js","sourceRoot":"","sources":["../../../src/patterns/collection-editor/CollectionEditor.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { Button } from '../../components/button';\nimport { IconButton } from '../../components/icon-button';\nimport { Text } from '../../components/text';\nimport { Box, Stack } from '../../foundation';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport { Panel } from '../panel';\nimport type { CollectionEditorProps } from './types';\n\nfunction CollectionEditorInner<TItem>({\n themeId: _themeId,\n mode: _mode,\n title,\n description,\n items,\n renderItem,\n onAdd,\n onRemove,\n onMove,\n addLabel = 'Add Item',\n emptyLabel = 'No items yet.',\n disabled,\n testID,\n}: CollectionEditorProps<TItem>) {\n const isEmpty = items.length === 0;\n\n return (\n <Panel\n compact\n description={description}\n testID={testID}\n title={title}\n actions={\n onAdd ? (\n <Button variant=\"soft\" size=\"s\" disabled={disabled} onPress={onAdd}>\n {addLabel}\n </Button>\n ) : null\n }\n >\n <Stack gap=\"s\">\n {isEmpty ? (\n <Box py=\"m\">\n <Text align=\"center\" emphasis=\"muted\">\n {emptyLabel}\n </Text>\n </Box>\n ) : (\n items.map((item, index) => (\n <Box key={index} bg=\"subtle\" p=\"s\" radius=\"m\" borderColor=\"border\" borderWidth={1}>\n <Stack direction=\"row\" gap=\"m\" align=\"center\">\n <Box flex={1}>\n {renderItem({\n item,\n index,\n remove: () => onRemove?.(index),\n moveUp: () => onMove?.(index, index - 1),\n moveDown: () => onMove?.(index, index + 1),\n canMoveUp: index > 0,\n canMoveDown: index < items.length - 1,\n })}\n </Box>\n <Stack direction=\"row\" gap=\"xs\">\n {onMove ? (\n <>\n <IconButton\n icon={{ name: 'arrow-up-outline' }}\n label=\"Move Up\"\n disabled={disabled ?? index === 0}\n onPress={() => onMove(index, index - 1)}\n size=\"s\"\n variant=\"ghost\"\n />\n <IconButton\n icon={{ name: 'arrow-down-outline' }}\n label=\"Move Down\"\n disabled={disabled ?? index === items.length - 1}\n onPress={() => onMove(index, index + 1)}\n size=\"s\"\n variant=\"ghost\"\n />\n </>\n ) : null}\n {onRemove ? (\n <IconButton\n icon={{ name: 'trash-outline' }}\n label=\"Remove\"\n color=\"danger\"\n disabled={disabled}\n onPress={() => onRemove(index)}\n size=\"s\"\n variant=\"ghost\"\n />\n ) : null}\n </Stack>\n </Stack>\n </Box>\n ))\n )}\n </Stack>\n </Panel>\n );\n}\n\nexport const CollectionEditor = withZoraThemeScope(CollectionEditorInner);\n"]}
|
|
1
|
+
{"version":3,"file":"CollectionEditor.js","sourceRoot":"","sources":["../../../src/patterns/collection-editor/CollectionEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAC1D,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACpE,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAGjC,SAAS,qBAAqB,CAAQ,EACpC,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,KAAK,EACL,WAAW,EACX,KAAK,EACL,UAAU,EACV,KAAK,EACL,QAAQ,EACR,MAAM,EACN,QAAQ,GAAG,UAAU,EACrB,UAAU,GAAG,eAAe,EAC5B,QAAQ,EACR,MAAM,GACuB;IAC7B,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,KAAK,CAAC,CAAC;IAEnC,OAAO,CACL,CAAC,KAAK,CACJ,OAAO,CACP,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,OAAO,CAAC,CACN,KAAK,CAAC,CAAC,CAAC,CACN,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC,CACjE;YAAA,CAAC,QAAQ,CACX;UAAA,EAAE,MAAM,CAAC,CACV,CAAC,CAAC,CAAC,IACN,CAAC,CAED;MAAA,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CACZ;QAAA,CAAC,OAAO,CAAC,CAAC,CAAC,CACT,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CACT;YAAA,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,OAAO,CACnC;cAAA,CAAC,UAAU,CACb;YAAA,EAAE,IAAI,CACR;UAAA,EAAE,GAAG,CAAC,CACP,CAAC,CAAC,CAAC,CACF,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CACzB,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,WAAW,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAChF;cAAA,CAAC,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC,QAAQ,CAC3C;gBAAA,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CACX;kBAAA,CAAC,UAAU,CAAC;gBACV,IAAI;gBACJ,KAAK;gBACL,MAAM,EAAE,GAAG,EAAE,CAAC,QAAQ,EAAE,CAAC,KAAK,CAAC;gBAC/B,MAAM,EAAE,GAAG,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,EAAE,KAAK,GAAG,CAAC,CAAC;gBACxC,QAAQ,EAAE,GAAG,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,EAAE,KAAK,GAAG,CAAC,CAAC;gBAC1C,SAAS,EAAE,KAAK,GAAG,CAAC;gBACpB,WAAW,EAAE,KAAK,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC;aACtC,CAAC,CACJ;gBAAA,EAAE,GAAG,CACL;gBAAA,CAAC,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAC7B;kBAAA,CAAC,MAAM,CAAC,CAAC,CAAC,CACR,EACE;sBAAA,CAAC,UAAU,CACT,IAAI,CAAC,CAAC,EAAE,IAAI,EAAE,kBAAkB,EAAE,CAAC,CACnC,KAAK,CAAC,SAAS,CACf,QAAQ,CAAC,CAAC,QAAQ,IAAI,KAAK,KAAK,CAAC,CAAC,CAClC,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC,CACxC,IAAI,CAAC,GAAG,CACR,OAAO,CAAC,OAAO,EAEjB;sBAAA,CAAC,UAAU,CACT,IAAI,CAAC,CAAC,EAAE,IAAI,EAAE,oBAAoB,EAAE,CAAC,CACrC,KAAK,CAAC,WAAW,CACjB,QAAQ,CAAC,CAAC,QAAQ,IAAI,KAAK,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CACjD,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC,CACxC,IAAI,CAAC,GAAG,CACR,OAAO,CAAC,OAAO,EAEnB;oBAAA,GAAG,CACJ,CAAC,CAAC,CAAC,IAAI,CACR;kBAAA,CAAC,QAAQ,CAAC,CAAC,CAAC,CACV,CAAC,UAAU,CACT,IAAI,CAAC,CAAC,EAAE,IAAI,EAAE,eAAe,EAAE,CAAC,CAChC,KAAK,CAAC,QAAQ,CACd,KAAK,CAAC,QAAQ,CACd,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAC/B,IAAI,CAAC,GAAG,CACR,OAAO,CAAC,OAAO,EACf,CACH,CAAC,CAAC,CAAC,IAAI,CACV;gBAAA,EAAE,KAAK,CACT;cAAA,EAAE,KAAK,CACT;YAAA,EAAE,GAAG,CAAC,CACP,CAAC,CACH,CACH;MAAA,EAAE,KAAK,CACT;IAAA,EAAE,KAAK,CAAC,CACT,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,kBAAkB,CAAC,qBAAqB,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport { Button } from '../../components/button';\nimport { IconButton } from '../../components/icon-button';\nimport { Text } from '../../components/text';\nimport { Box, Stack } from '../../foundation';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport { Panel } from '../panel';\nimport type { CollectionEditorProps } from './types';\n\nfunction CollectionEditorInner<TItem>({\n themeId: _themeId,\n mode: _mode,\n title,\n description,\n items,\n renderItem,\n onAdd,\n onRemove,\n onMove,\n addLabel = 'Add Item',\n emptyLabel = 'No items yet.',\n disabled,\n testID,\n}: CollectionEditorProps<TItem>) {\n const isEmpty = items.length === 0;\n\n return (\n <Panel\n compact\n description={description}\n testID={testID}\n title={title}\n actions={\n onAdd ? (\n <Button variant=\"soft\" size=\"s\" disabled={disabled} onPress={onAdd}>\n {addLabel}\n </Button>\n ) : null\n }\n >\n <Stack gap=\"s\">\n {isEmpty ? (\n <Box py=\"m\">\n <Text align=\"center\" emphasis=\"muted\">\n {emptyLabel}\n </Text>\n </Box>\n ) : (\n items.map((item, index) => (\n <Box key={index} bg=\"subtle\" p=\"s\" radius=\"m\" borderColor=\"border\" borderWidth={1}>\n <Stack direction=\"row\" gap=\"m\" align=\"center\">\n <Box flex={1}>\n {renderItem({\n item,\n index,\n remove: () => onRemove?.(index),\n moveUp: () => onMove?.(index, index - 1),\n moveDown: () => onMove?.(index, index + 1),\n canMoveUp: index > 0,\n canMoveDown: index < items.length - 1,\n })}\n </Box>\n <Stack direction=\"row\" gap=\"xs\">\n {onMove ? (\n <>\n <IconButton\n icon={{ name: 'arrow-up-outline' }}\n label=\"Move Up\"\n disabled={disabled ?? index === 0}\n onPress={() => onMove(index, index - 1)}\n size=\"s\"\n variant=\"ghost\"\n />\n <IconButton\n icon={{ name: 'arrow-down-outline' }}\n label=\"Move Down\"\n disabled={disabled ?? index === items.length - 1}\n onPress={() => onMove(index, index + 1)}\n size=\"s\"\n variant=\"ghost\"\n />\n </>\n ) : null}\n {onRemove ? (\n <IconButton\n icon={{ name: 'trash-outline' }}\n label=\"Remove\"\n color=\"danger\"\n disabled={disabled}\n onPress={() => onRemove(index)}\n size=\"s\"\n variant=\"ghost\"\n />\n ) : null}\n </Stack>\n </Stack>\n </Box>\n ))\n )}\n </Stack>\n </Panel>\n );\n}\n\n/***\n * Editor pattern for adding, removing, and reordering a collection of items.\n *\n * @readme\n */\nexport const CollectionEditor = withZoraThemeScope(CollectionEditorInner);\n"]}
|
|
@@ -1,4 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { ConfirmDialogProps } from './types';
|
|
3
|
+
/***
|
|
4
|
+
* Confirmation dialog pattern with cancel/confirm actions.
|
|
5
|
+
*
|
|
6
|
+
* @readme
|
|
7
|
+
*/
|
|
3
8
|
export declare const ConfirmDialog: (props: ConfirmDialogProps) => React.ReactElement | null;
|
|
4
9
|
//# sourceMappingURL=ConfirmDialog.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ConfirmDialog.d.ts","sourceRoot":"","sources":["../../../src/patterns/confirm-dialog/ConfirmDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AA4ClD,eAAO,MAAM,aAAa,0DAAyC,CAAC"}
|
|
1
|
+
{"version":3,"file":"ConfirmDialog.d.ts","sourceRoot":"","sources":["../../../src/patterns/confirm-dialog/ConfirmDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AA4ClD;;;;GAIG;AACH,eAAO,MAAM,aAAa,0DAAyC,CAAC"}
|
|
@@ -15,5 +15,10 @@ function ConfirmDialogInner({ themeId: _themeId, mode: _mode, visible, title, de
|
|
|
15
15
|
{children}
|
|
16
16
|
</Modal>);
|
|
17
17
|
}
|
|
18
|
+
/***
|
|
19
|
+
* Confirmation dialog pattern with cancel/confirm actions.
|
|
20
|
+
*
|
|
21
|
+
* @readme
|
|
22
|
+
*/
|
|
18
23
|
export const ConfirmDialog = withZoraThemeScope(ConfirmDialogInner);
|
|
19
24
|
//# sourceMappingURL=ConfirmDialog.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ConfirmDialog.js","sourceRoot":"","sources":["../../../src/patterns/confirm-dialog/ConfirmDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAGpE,SAAS,kBAAkB,CAAC,EAC1B,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,OAAO,EACP,KAAK,EACL,WAAW,EACX,QAAQ,EACR,YAAY,GAAG,SAAS,EACxB,WAAW,GAAG,QAAQ,EACtB,YAAY,GAAG,QAAQ,EACvB,cAAc,GAAG,OAAO,EACxB,IAAI,GAAG,KAAK,EACZ,eAAe,GAAG,IAAI,EACtB,SAAS,EACT,QAAQ,EACR,MAAM,GACa;IACnB,OAAO,CACL,CAAC,KAAK,CACJ,eAAe,CAAC,CAAC,eAAe,CAAC,CACjC,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,MAAM,CAAC,CACL,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,OAAO,CAAC,UAAU,CACzE;UAAA,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC,CAAC,KAAK,CAAC,SAAS,CACvD;YAAA,CAAC,WAAW,CACd;UAAA,EAAE,MAAM,CACR;UAAA,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,cAAc,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC,CAAC,KAAK,CAAC,CAAC,YAAY,CAAC,CACtF;YAAA,CAAC,YAAY,CACf;UAAA,EAAE,MAAM,CACV;QAAA,EAAE,KAAK,CACT,CAAC,CACD,SAAS,CAAC,CAAC,QAAQ,CAAC,CACpB,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,KAAK,CAAC,QAAQ,CAEd;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,KAAK,CAAC,CACT,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,aAAa,GAAG,kBAAkB,CAAC,kBAAkB,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport { Button } from '../../components/button';\nimport { Modal } from '../../components/modal';\nimport { Stack } from '../../foundation';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport type { ConfirmDialogProps } from './types';\n\nfunction ConfirmDialogInner({\n themeId: _themeId,\n mode: _mode,\n visible,\n title,\n description,\n children,\n confirmLabel = 'Confirm',\n cancelLabel = 'Cancel',\n confirmColor = 'danger',\n confirmVariant = 'solid',\n busy = false,\n closeOnBackdrop = true,\n onConfirm,\n onCancel,\n testID,\n}: ConfirmDialogProps) {\n return (\n <Modal\n closeOnBackdrop={closeOnBackdrop}\n description={description}\n footer={\n <Stack direction={{ base: 'column', md: 'row' }} gap=\"s\" justify=\"flex-end\">\n <Button variant=\"soft\" onPress={onCancel} color=\"neutral\">\n {cancelLabel}\n </Button>\n <Button variant={confirmVariant} loading={busy} onPress={onConfirm} color={confirmColor}>\n {confirmLabel}\n </Button>\n </Stack>\n }\n onDismiss={onCancel}\n testID={testID}\n title={title}\n visible={visible}\n width=\"narrow\"\n >\n {children}\n </Modal>\n );\n}\n\nexport const ConfirmDialog = withZoraThemeScope(ConfirmDialogInner);\n"]}
|
|
1
|
+
{"version":3,"file":"ConfirmDialog.js","sourceRoot":"","sources":["../../../src/patterns/confirm-dialog/ConfirmDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAGpE,SAAS,kBAAkB,CAAC,EAC1B,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,OAAO,EACP,KAAK,EACL,WAAW,EACX,QAAQ,EACR,YAAY,GAAG,SAAS,EACxB,WAAW,GAAG,QAAQ,EACtB,YAAY,GAAG,QAAQ,EACvB,cAAc,GAAG,OAAO,EACxB,IAAI,GAAG,KAAK,EACZ,eAAe,GAAG,IAAI,EACtB,SAAS,EACT,QAAQ,EACR,MAAM,GACa;IACnB,OAAO,CACL,CAAC,KAAK,CACJ,eAAe,CAAC,CAAC,eAAe,CAAC,CACjC,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,MAAM,CAAC,CACL,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,OAAO,CAAC,UAAU,CACzE;UAAA,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC,CAAC,KAAK,CAAC,SAAS,CACvD;YAAA,CAAC,WAAW,CACd;UAAA,EAAE,MAAM,CACR;UAAA,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,cAAc,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC,CAAC,KAAK,CAAC,CAAC,YAAY,CAAC,CACtF;YAAA,CAAC,YAAY,CACf;UAAA,EAAE,MAAM,CACV;QAAA,EAAE,KAAK,CACT,CAAC,CACD,SAAS,CAAC,CAAC,QAAQ,CAAC,CACpB,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,KAAK,CAAC,QAAQ,CAEd;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,KAAK,CAAC,CACT,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,kBAAkB,CAAC,kBAAkB,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport { Button } from '../../components/button';\nimport { Modal } from '../../components/modal';\nimport { Stack } from '../../foundation';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport type { ConfirmDialogProps } from './types';\n\nfunction ConfirmDialogInner({\n themeId: _themeId,\n mode: _mode,\n visible,\n title,\n description,\n children,\n confirmLabel = 'Confirm',\n cancelLabel = 'Cancel',\n confirmColor = 'danger',\n confirmVariant = 'solid',\n busy = false,\n closeOnBackdrop = true,\n onConfirm,\n onCancel,\n testID,\n}: ConfirmDialogProps) {\n return (\n <Modal\n closeOnBackdrop={closeOnBackdrop}\n description={description}\n footer={\n <Stack direction={{ base: 'column', md: 'row' }} gap=\"s\" justify=\"flex-end\">\n <Button variant=\"soft\" onPress={onCancel} color=\"neutral\">\n {cancelLabel}\n </Button>\n <Button variant={confirmVariant} loading={busy} onPress={onConfirm} color={confirmColor}>\n {confirmLabel}\n </Button>\n </Stack>\n }\n onDismiss={onCancel}\n testID={testID}\n title={title}\n visible={visible}\n width=\"narrow\"\n >\n {children}\n </Modal>\n );\n}\n\n/***\n * Confirmation dialog pattern with cancel/confirm actions.\n *\n * @readme\n */\nexport const ConfirmDialog = withZoraThemeScope(ConfirmDialogInner);\n"]}
|
|
@@ -1,4 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { DisclosureSectionProps } from './types';
|
|
3
|
+
/***
|
|
4
|
+
* Expandable section pattern with a summary header and collapsible content.
|
|
5
|
+
*
|
|
6
|
+
* @readme
|
|
7
|
+
*/
|
|
3
8
|
export declare const DisclosureSection: (props: DisclosureSectionProps) => React.ReactElement | null;
|
|
4
9
|
//# sourceMappingURL=DisclosureSection.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DisclosureSection.d.ts","sourceRoot":"","sources":["../../../src/patterns/disclosure-section/DisclosureSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AA2DtD,eAAO,MAAM,iBAAiB,8DAA6C,CAAC"}
|
|
1
|
+
{"version":3,"file":"DisclosureSection.d.ts","sourceRoot":"","sources":["../../../src/patterns/disclosure-section/DisclosureSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AA2DtD;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,8DAA6C,CAAC"}
|
|
@@ -25,5 +25,10 @@ function DisclosureSectionInner({ themeId: _themeId, mode: _mode, title, descrip
|
|
|
25
25
|
{isOpen ? <Box pt="m">{children}</Box> : null}
|
|
26
26
|
</Panel>);
|
|
27
27
|
}
|
|
28
|
+
/***
|
|
29
|
+
* Expandable section pattern with a summary header and collapsible content.
|
|
30
|
+
*
|
|
31
|
+
* @readme
|
|
32
|
+
*/
|
|
28
33
|
export const DisclosureSection = withZoraThemeScope(DisclosureSectionInner);
|
|
29
34
|
//# sourceMappingURL=DisclosureSection.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DisclosureSection.js","sourceRoot":"","sources":["../../../src/patterns/disclosure-section/DisclosureSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAC1D,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACpE,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAGjC,SAAS,sBAAsB,CAAC,EAC9B,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,KAAK,EACL,WAAW,EACX,IAAI,EACJ,WAAW,GAAG,IAAI,EAClB,IAAI,EAAE,cAAc,EACpB,YAAY,EACZ,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,MAAM,GACiB;IACvB,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;IAEpE,MAAM,YAAY,GAAG,cAAc,KAAK,SAAS,CAAC;IAClD,MAAM,MAAM,GAAG,YAAY,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,YAAY,CAAC;IAE5D,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,IAAI,QAAQ;YAAE,OAAO;QAErB,IAAI,YAAY,EAAE,CAAC;YACjB,YAAY,EAAE,CAAC,CAAC,cAAc,CAAC,CAAC;QAClC,CAAC;aAAM,CAAC;YACN,eAAe,CAAC,CAAC,YAAY,CAAC,CAAC;YAC/B,YAAY,EAAE,CAAC,CAAC,YAAY,CAAC,CAAC;QAChC,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,CAAC,KAAK,CACJ,OAAO,CACP,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,qCAAqC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAClF,OAAO,CAAC,CACN,CAAC,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAC5C;UAAA,CAAC,OAAO,CACR;UAAA,CAAC,UAAU,CACT,IAAI,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,sBAAsB,EAAE,CAAC,CACvE,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CACtC,OAAO,CAAC,OAAO,CACf,KAAK,CAAC,SAAS,CACf,IAAI,CAAC,GAAG,CACR,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,OAAO,CAAC,CAAC,UAAU,CAAC,EAExB;QAAA,EAAE,KAAK,CACT,CAAC,CAED;MAAA,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,QAAQ,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAC/C;IAAA,EAAE,KAAK,CAAC,CACT,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,iBAAiB,GAAG,kBAAkB,CAAC,sBAAsB,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport { IconButton } from '../../components/icon-button';\nimport { Box, Stack } from '../../foundation';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport { Panel } from '../panel';\nimport type { DisclosureSectionProps } from './types';\n\nfunction DisclosureSectionInner({\n themeId: _themeId,\n mode: _mode,\n title,\n description,\n icon,\n defaultOpen = true,\n open: controlledOpen,\n onOpenChange,\n actions,\n children,\n disabled,\n testID,\n}: DisclosureSectionProps) {\n const [internalOpen, setInternalOpen] = React.useState(defaultOpen);\n\n const isControlled = controlledOpen !== undefined;\n const isOpen = isControlled ? controlledOpen : internalOpen;\n\n const toggleOpen = () => {\n if (disabled) return;\n\n if (isControlled) {\n onOpenChange?.(!controlledOpen);\n } else {\n setInternalOpen(!internalOpen);\n onOpenChange?.(!internalOpen);\n }\n };\n\n return (\n <Panel\n compact\n description={description}\n testID={testID}\n title={title}\n eyebrow={icon ? <Box pb=\"xs\">{/* Surface icon spec would go here */}</Box> : null}\n actions={\n <Stack direction=\"row\" gap=\"xs\" align=\"center\">\n {actions}\n <IconButton\n icon={{ name: isOpen ? 'chevron-up-outline' : 'chevron-down-outline' }}\n label={isOpen ? 'Collapse' : 'Expand'}\n variant=\"ghost\"\n color=\"neutral\"\n size=\"s\"\n disabled={disabled}\n onPress={toggleOpen}\n />\n </Stack>\n }\n >\n {isOpen ? <Box pt=\"m\">{children}</Box> : null}\n </Panel>\n );\n}\n\nexport const DisclosureSection = withZoraThemeScope(DisclosureSectionInner);\n"]}
|
|
1
|
+
{"version":3,"file":"DisclosureSection.js","sourceRoot":"","sources":["../../../src/patterns/disclosure-section/DisclosureSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAC1D,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACpE,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAGjC,SAAS,sBAAsB,CAAC,EAC9B,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,KAAK,EACL,WAAW,EACX,IAAI,EACJ,WAAW,GAAG,IAAI,EAClB,IAAI,EAAE,cAAc,EACpB,YAAY,EACZ,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,MAAM,GACiB;IACvB,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;IAEpE,MAAM,YAAY,GAAG,cAAc,KAAK,SAAS,CAAC;IAClD,MAAM,MAAM,GAAG,YAAY,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,YAAY,CAAC;IAE5D,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,IAAI,QAAQ;YAAE,OAAO;QAErB,IAAI,YAAY,EAAE,CAAC;YACjB,YAAY,EAAE,CAAC,CAAC,cAAc,CAAC,CAAC;QAClC,CAAC;aAAM,CAAC;YACN,eAAe,CAAC,CAAC,YAAY,CAAC,CAAC;YAC/B,YAAY,EAAE,CAAC,CAAC,YAAY,CAAC,CAAC;QAChC,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,CAAC,KAAK,CACJ,OAAO,CACP,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,qCAAqC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAClF,OAAO,CAAC,CACN,CAAC,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAC5C;UAAA,CAAC,OAAO,CACR;UAAA,CAAC,UAAU,CACT,IAAI,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,sBAAsB,EAAE,CAAC,CACvE,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CACtC,OAAO,CAAC,OAAO,CACf,KAAK,CAAC,SAAS,CACf,IAAI,CAAC,GAAG,CACR,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,OAAO,CAAC,CAAC,UAAU,CAAC,EAExB;QAAA,EAAE,KAAK,CACT,CAAC,CAED;MAAA,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,QAAQ,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAC/C;IAAA,EAAE,KAAK,CAAC,CACT,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,kBAAkB,CAAC,sBAAsB,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport { IconButton } from '../../components/icon-button';\nimport { Box, Stack } from '../../foundation';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport { Panel } from '../panel';\nimport type { DisclosureSectionProps } from './types';\n\nfunction DisclosureSectionInner({\n themeId: _themeId,\n mode: _mode,\n title,\n description,\n icon,\n defaultOpen = true,\n open: controlledOpen,\n onOpenChange,\n actions,\n children,\n disabled,\n testID,\n}: DisclosureSectionProps) {\n const [internalOpen, setInternalOpen] = React.useState(defaultOpen);\n\n const isControlled = controlledOpen !== undefined;\n const isOpen = isControlled ? controlledOpen : internalOpen;\n\n const toggleOpen = () => {\n if (disabled) return;\n\n if (isControlled) {\n onOpenChange?.(!controlledOpen);\n } else {\n setInternalOpen(!internalOpen);\n onOpenChange?.(!internalOpen);\n }\n };\n\n return (\n <Panel\n compact\n description={description}\n testID={testID}\n title={title}\n eyebrow={icon ? <Box pb=\"xs\">{/* Surface icon spec would go here */}</Box> : null}\n actions={\n <Stack direction=\"row\" gap=\"xs\" align=\"center\">\n {actions}\n <IconButton\n icon={{ name: isOpen ? 'chevron-up-outline' : 'chevron-down-outline' }}\n label={isOpen ? 'Collapse' : 'Expand'}\n variant=\"ghost\"\n color=\"neutral\"\n size=\"s\"\n disabled={disabled}\n onPress={toggleOpen}\n />\n </Stack>\n }\n >\n {isOpen ? <Box pt=\"m\">{children}</Box> : null}\n </Panel>\n );\n}\n\n/***\n * Expandable section pattern with a summary header and collapsible content.\n *\n * @readme\n */\nexport const DisclosureSection = withZoraThemeScope(DisclosureSectionInner);\n"]}
|
|
@@ -1,4 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { FilterBarProps } from './types';
|
|
3
|
+
/***
|
|
4
|
+
* Horizontal filter/action bar layout with leading/trailing slots.
|
|
5
|
+
*
|
|
6
|
+
* @readme
|
|
7
|
+
*/
|
|
3
8
|
export declare const FilterBar: (props: FilterBarProps) => React.ReactElement | null;
|
|
4
9
|
//# sourceMappingURL=FilterBar.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FilterBar.d.ts","sourceRoot":"","sources":["../../../src/patterns/filter-bar/FilterBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAoB9C,eAAO,MAAM,SAAS,sDAAqC,CAAC"}
|
|
1
|
+
{"version":3,"file":"FilterBar.d.ts","sourceRoot":"","sources":["../../../src/patterns/filter-bar/FilterBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAoB9C;;;;GAIG;AACH,eAAO,MAAM,SAAS,sDAAqC,CAAC"}
|
|
@@ -8,5 +8,10 @@ function FilterBarInner({ themeId: _themeId, mode: _mode, testID, leading, trail
|
|
|
8
8
|
{trailing ? <Box>{trailing}</Box> : null}
|
|
9
9
|
</Inline>);
|
|
10
10
|
}
|
|
11
|
+
/***
|
|
12
|
+
* Horizontal filter/action bar layout with leading/trailing slots.
|
|
13
|
+
*
|
|
14
|
+
* @readme
|
|
15
|
+
*/
|
|
11
16
|
export const FilterBar = withZoraThemeScope(FilterBarInner);
|
|
12
17
|
//# sourceMappingURL=FilterBar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FilterBar.js","sourceRoot":"","sources":["../../../src/patterns/filter-bar/FilterBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAGpE,SAAS,cAAc,CAAC,EACtB,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,MAAM,EACN,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,IAAI,GAAG,IAAI,GACI;IACf,OAAO,CACL,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAC5E;MAAA,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CACtC;MAAA,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,GAAG,CAC7B;MAAA,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,QAAQ,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAC1C;IAAA,EAAE,MAAM,CAAC,CACV,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,kBAAkB,CAAC,cAAc,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport { Box, Inline } from '../../foundation';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport type { FilterBarProps } from './types';\n\nfunction FilterBarInner({\n themeId: _themeId,\n mode: _mode,\n testID,\n leading,\n trailing,\n children,\n wrap = true,\n}: FilterBarProps) {\n return (\n <Inline align=\"center\" gap=\"s\" testID={testID} wrap={wrap ? 'wrap' : 'nowrap'}>\n {leading ? <Box>{leading}</Box> : null}\n <Box flex={1}>{children}</Box>\n {trailing ? <Box>{trailing}</Box> : null}\n </Inline>\n );\n}\n\nexport const FilterBar = withZoraThemeScope(FilterBarInner);\n"]}
|
|
1
|
+
{"version":3,"file":"FilterBar.js","sourceRoot":"","sources":["../../../src/patterns/filter-bar/FilterBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAGpE,SAAS,cAAc,CAAC,EACtB,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,MAAM,EACN,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,IAAI,GAAG,IAAI,GACI;IACf,OAAO,CACL,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAC5E;MAAA,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CACtC;MAAA,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,GAAG,CAC7B;MAAA,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,QAAQ,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAC1C;IAAA,EAAE,MAAM,CAAC,CACV,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,kBAAkB,CAAC,cAAc,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport { Box, Inline } from '../../foundation';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport type { FilterBarProps } from './types';\n\nfunction FilterBarInner({\n themeId: _themeId,\n mode: _mode,\n testID,\n leading,\n trailing,\n children,\n wrap = true,\n}: FilterBarProps) {\n return (\n <Inline align=\"center\" gap=\"s\" testID={testID} wrap={wrap ? 'wrap' : 'nowrap'}>\n {leading ? <Box>{leading}</Box> : null}\n <Box flex={1}>{children}</Box>\n {trailing ? <Box>{trailing}</Box> : null}\n </Inline>\n );\n}\n\n/***\n * Horizontal filter/action bar layout with leading/trailing slots.\n *\n * @readme\n */\nexport const FilterBar = withZoraThemeScope(FilterBarInner);\n"]}
|
|
@@ -1,4 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { HeroProps } from './types';
|
|
3
|
+
/***
|
|
4
|
+
* Hero section pattern for prominent page introductions with actions.
|
|
5
|
+
*
|
|
6
|
+
* @readme
|
|
7
|
+
*/
|
|
3
8
|
export declare const Hero: (props: HeroProps) => React.ReactElement | null;
|
|
4
9
|
//# sourceMappingURL=Hero.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Hero.d.ts","sourceRoot":"","sources":["../../../src/patterns/hero/Hero.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,KAAK,EAAyB,SAAS,EAAE,MAAM,SAAS,CAAC;AA2GhE,eAAO,MAAM,IAAI,iDAAgC,CAAC"}
|
|
1
|
+
{"version":3,"file":"Hero.d.ts","sourceRoot":"","sources":["../../../src/patterns/hero/Hero.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,KAAK,EAAyB,SAAS,EAAE,MAAM,SAAS,CAAC;AA2GhE;;;;GAIG;AACH,eAAO,MAAM,IAAI,iDAAgC,CAAC"}
|
|
@@ -53,5 +53,10 @@ function renderAction(action, role) {
|
|
|
53
53
|
function resolveContentAlign(align) {
|
|
54
54
|
return align === 'center' ? 'center' : 'flex-start';
|
|
55
55
|
}
|
|
56
|
+
/***
|
|
57
|
+
* Hero section pattern for prominent page introductions with actions.
|
|
58
|
+
*
|
|
59
|
+
* @readme
|
|
60
|
+
*/
|
|
56
61
|
export const Hero = withZoraThemeScope(HeroInner);
|
|
57
62
|
//# sourceMappingURL=Hero.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Hero.js","sourceRoot":"","sources":["../../../src/patterns/hero/Hero.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { Button } from '../../components/button';\nimport { Card } from '../../components/card';\nimport { Heading } from '../../components/heading';\nimport { Text } from '../../components/text';\nimport { Box, Grid, Stack } from '../../foundation';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport type { HeroAction, HeroAlign, HeroProps } from './types';\n\nfunction HeroInner({\n themeId: _themeId,\n mode: _mode,\n title,\n description,\n eyebrow,\n primaryAction,\n secondaryAction,\n media,\n footer,\n align = 'start',\n layout = 'split',\n tone = 'subtle',\n compact = false,\n testID,\n}: HeroProps) {\n const hasActions = primaryAction !== undefined || secondaryAction !== undefined;\n const hasMedia = media !== undefined;\n const contentAlign = resolveContentAlign(align);\n const textAlign = align === 'center' ? 'center' : undefined;\n const mediaFirst = layout === 'mediaFirst';\n\n const content = (\n <Box width=\"100%\">\n <Stack align={contentAlign} gap={compact ? 's' : 'm'}>\n <Stack align={contentAlign} gap=\"xs\">\n {eyebrow !== undefined ? (\n <Text align={textAlign} color=\"primary\" variant=\"eyebrow\">\n {eyebrow}\n </Text>\n ) : null}\n <Heading\n align={textAlign}\n level={1}\n size={{ base: 'h2', md: compact ? 'h2' : 'display' }}\n >\n {title}\n </Heading>\n {description !== undefined ? (\n <Text\n align={textAlign}\n emphasis=\"muted\"\n variant={{ base: 'body', md: compact ? 'body' : 'lead' }}\n >\n {description}\n </Text>\n ) : null}\n </Stack>\n\n {hasActions ? (\n <Stack\n align={contentAlign}\n direction={{ base: 'column', md: 'row' }}\n gap=\"s\"\n justify={align === 'center' ? 'center' : 'flex-start'}\n >\n {primaryAction !== undefined ? renderAction(primaryAction, 'primary') : null}\n {secondaryAction !== undefined ? renderAction(secondaryAction, 'secondary') : null}\n </Stack>\n ) : null}\n\n {footer}\n </Stack>\n </Box>\n );\n\n const mediaSlot = hasMedia ? <Box width=\"100%\">{media}</Box> : null;\n\n const body =\n hasMedia && layout !== 'stack' ? (\n <Grid cols={{ base: 1, md: 2 }} gap={compact ? 'm' : 'l'}>\n {mediaFirst ? mediaSlot : content}\n {mediaFirst ? content : mediaSlot}\n </Grid>\n ) : (\n <Stack align=\"center\" direction=\"column\" gap={compact ? 'm' : 'l'}>\n {mediaFirst ? mediaSlot : content}\n {mediaFirst ? content : mediaSlot}\n </Stack>\n );\n\n return (\n <Card compact={compact} testID={testID} tone={tone}>\n {body}\n </Card>\n );\n}\n\nfunction renderAction(action: HeroAction, role: 'primary' | 'secondary') {\n return (\n <Button\n disabled={action.disabled}\n variant={action.variant ?? (role === 'primary' ? 'solid' : 'soft')}\n onPress={action.onPress}\n color={action.color ?? (role === 'primary' ? 'primary' : 'neutral')}\n >\n {action.label}\n </Button>\n );\n}\n\nfunction resolveContentAlign(align: HeroAlign) {\n return align === 'center' ? 'center' : 'flex-start';\n}\n\nexport const Hero = withZoraThemeScope(HeroInner);\n"]}
|
|
1
|
+
{"version":3,"file":"Hero.js","sourceRoot":"","sources":["../../../src/patterns/hero/Hero.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { Button } from '../../components/button';\nimport { Card } from '../../components/card';\nimport { Heading } from '../../components/heading';\nimport { Text } from '../../components/text';\nimport { Box, Grid, Stack } from '../../foundation';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport type { HeroAction, HeroAlign, HeroProps } from './types';\n\nfunction HeroInner({\n themeId: _themeId,\n mode: _mode,\n title,\n description,\n eyebrow,\n primaryAction,\n secondaryAction,\n media,\n footer,\n align = 'start',\n layout = 'split',\n tone = 'subtle',\n compact = false,\n testID,\n}: HeroProps) {\n const hasActions = primaryAction !== undefined || secondaryAction !== undefined;\n const hasMedia = media !== undefined;\n const contentAlign = resolveContentAlign(align);\n const textAlign = align === 'center' ? 'center' : undefined;\n const mediaFirst = layout === 'mediaFirst';\n\n const content = (\n <Box width=\"100%\">\n <Stack align={contentAlign} gap={compact ? 's' : 'm'}>\n <Stack align={contentAlign} gap=\"xs\">\n {eyebrow !== undefined ? (\n <Text align={textAlign} color=\"primary\" variant=\"eyebrow\">\n {eyebrow}\n </Text>\n ) : null}\n <Heading\n align={textAlign}\n level={1}\n size={{ base: 'h2', md: compact ? 'h2' : 'display' }}\n >\n {title}\n </Heading>\n {description !== undefined ? (\n <Text\n align={textAlign}\n emphasis=\"muted\"\n variant={{ base: 'body', md: compact ? 'body' : 'lead' }}\n >\n {description}\n </Text>\n ) : null}\n </Stack>\n\n {hasActions ? (\n <Stack\n align={contentAlign}\n direction={{ base: 'column', md: 'row' }}\n gap=\"s\"\n justify={align === 'center' ? 'center' : 'flex-start'}\n >\n {primaryAction !== undefined ? renderAction(primaryAction, 'primary') : null}\n {secondaryAction !== undefined ? renderAction(secondaryAction, 'secondary') : null}\n </Stack>\n ) : null}\n\n {footer}\n </Stack>\n </Box>\n );\n\n const mediaSlot = hasMedia ? <Box width=\"100%\">{media}</Box> : null;\n\n const body =\n hasMedia && layout !== 'stack' ? (\n <Grid cols={{ base: 1, md: 2 }} gap={compact ? 'm' : 'l'}>\n {mediaFirst ? mediaSlot : content}\n {mediaFirst ? content : mediaSlot}\n </Grid>\n ) : (\n <Stack align=\"center\" direction=\"column\" gap={compact ? 'm' : 'l'}>\n {mediaFirst ? mediaSlot : content}\n {mediaFirst ? content : mediaSlot}\n </Stack>\n );\n\n return (\n <Card compact={compact} testID={testID} tone={tone}>\n {body}\n </Card>\n );\n}\n\nfunction renderAction(action: HeroAction, role: 'primary' | 'secondary') {\n return (\n <Button\n disabled={action.disabled}\n variant={action.variant ?? (role === 'primary' ? 'solid' : 'soft')}\n onPress={action.onPress}\n color={action.color ?? (role === 'primary' ? 'primary' : 'neutral')}\n >\n {action.label}\n </Button>\n );\n}\n\nfunction resolveContentAlign(align: HeroAlign) {\n return align === 'center' ? 'center' : 'flex-start';\n}\n\n/***\n * Hero section pattern for prominent page introductions with actions.\n *\n * @readme\n */\nexport const Hero = withZoraThemeScope(HeroInner);\n"]}
|
|
@@ -1,4 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { ImagePreviewProps } from './types';
|
|
3
|
+
/***
|
|
4
|
+
* Preview pattern for showing an image with optional metadata and actions.
|
|
5
|
+
*
|
|
6
|
+
* @readme
|
|
7
|
+
*/
|
|
3
8
|
export declare const ImagePreview: (props: ImagePreviewProps) => React.ReactElement | null;
|
|
4
9
|
//# sourceMappingURL=ImagePreview.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImagePreview.d.ts","sourceRoot":"","sources":["../../../src/patterns/image-preview/ImagePreview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,KAAK,EAAE,iBAAiB,EAAkB,MAAM,SAAS,CAAC;AAoEjE,eAAO,MAAM,YAAY,yDAAwC,CAAC"}
|
|
1
|
+
{"version":3,"file":"ImagePreview.d.ts","sourceRoot":"","sources":["../../../src/patterns/image-preview/ImagePreview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,KAAK,EAAE,iBAAiB,EAAkB,MAAM,SAAS,CAAC;AAoEjE;;;;GAIG;AACH,eAAO,MAAM,YAAY,yDAAwC,CAAC"}
|
|
@@ -37,5 +37,10 @@ function ImagePreviewInner({ themeId: _themeId, mode: _mode, testID, asset, aspe
|
|
|
37
37
|
</Box>)}
|
|
38
38
|
</Box>);
|
|
39
39
|
}
|
|
40
|
+
/***
|
|
41
|
+
* Preview pattern for showing an image with optional metadata and actions.
|
|
42
|
+
*
|
|
43
|
+
* @readme
|
|
44
|
+
*/
|
|
40
45
|
export const ImagePreview = withZoraThemeScope(ImagePreviewInner);
|
|
41
46
|
//# sourceMappingURL=ImagePreview.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImagePreview.js","sourceRoot":"","sources":["../../../src/patterns/image-preview/ImagePreview.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { Image } from '../../components/image';\nimport { Text } from '../../components/text';\nimport { Box, Stack } from '../../foundation';\nimport { useZoraTheme } from '../../theme/useZoraTheme';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport type { ImagePreviewProps, ZoraImageAsset } from './types';\n\nfunction resolveRenderableUrl(asset: ZoraImageAsset | null | undefined): string | null {\n if (!asset) return null;\n\n if (asset.kind === 'url') {\n return asset.url;\n }\n\n return asset.publicUrl ?? null;\n}\n\nfunction resolveSafeAspectRatio(value: number | undefined): number {\n if (!value || !Number.isFinite(value) || value <= 0) {\n return 1;\n }\n\n return value;\n}\n\nfunction ImagePreviewInner({\n themeId: _themeId,\n mode: _mode,\n testID,\n asset,\n aspectRatio,\n fit = 'cover',\n emptyTitle = 'No image',\n emptyDescription = 'Select an image to preview it here.',\n}: ImagePreviewProps) {\n const { theme } = useZoraTheme();\n const renderableUrl = resolveRenderableUrl(asset);\n const resolvedAspectRatio = resolveSafeAspectRatio(aspectRatio);\n\n return (\n <Box\n bg={theme.semantics.neutral.surface}\n borderColor={theme.semantics.neutral.divider}\n borderWidth={1}\n radius=\"l\"\n testID={testID}\n style={{ overflow: 'hidden' }}\n >\n {renderableUrl ? (\n <Box style={{ aspectRatio: resolvedAspectRatio, width: '100%' }}>\n <Image\n alt={asset?.alt}\n fit={fit}\n source={renderableUrl}\n style={{ height: '100%', width: '100%' }}\n />\n </Box>\n ) : (\n <Box p=\"l\">\n <Stack gap=\"xs\">\n <Text variant=\"label\" weight=\"semiBold\">\n {emptyTitle}\n </Text>\n <Text emphasis=\"muted\" variant=\"bodySmall\">\n {emptyDescription}\n </Text>\n </Stack>\n </Box>\n )}\n </Box>\n );\n}\n\nexport const ImagePreview = withZoraThemeScope(ImagePreviewInner);\n"]}
|
|
1
|
+
{"version":3,"file":"ImagePreview.js","sourceRoot":"","sources":["../../../src/patterns/image-preview/ImagePreview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAC/C,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAGpE,SAAS,oBAAoB,CAAC,KAAwC;IACpE,IAAI,CAAC,KAAK;QAAE,OAAO,IAAI,CAAC;IAExB,IAAI,KAAK,CAAC,IAAI,KAAK,KAAK,EAAE,CAAC;QACzB,OAAO,KAAK,CAAC,GAAG,CAAC;IACnB,CAAC;IAED,OAAO,KAAK,CAAC,SAAS,IAAI,IAAI,CAAC;AACjC,CAAC;AAED,SAAS,sBAAsB,CAAC,KAAyB;IACvD,IAAI,CAAC,KAAK,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,KAAK,IAAI,CAAC,EAAE,CAAC;QACpD,OAAO,CAAC,CAAC;IACX,CAAC;IAED,OAAO,KAAK,CAAC;AACf,CAAC;AAED,SAAS,iBAAiB,CAAC,EACzB,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,MAAM,EACN,KAAK,EACL,WAAW,EACX,GAAG,GAAG,OAAO,EACb,UAAU,GAAG,UAAU,EACvB,gBAAgB,GAAG,qCAAqC,GACtC;IAClB,MAAM,EAAE,KAAK,EAAE,GAAG,YAAY,EAAE,CAAC;IACjC,MAAM,aAAa,GAAG,oBAAoB,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,mBAAmB,GAAG,sBAAsB,CAAC,WAAW,CAAC,CAAC;IAEhE,OAAO,CACL,CAAC,GAAG,CACF,EAAE,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,OAAO,CAAC,CACpC,WAAW,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,OAAO,CAAC,CAC7C,WAAW,CAAC,CAAC,CAAC,CAAC,CACf,MAAM,CAAC,GAAG,CACV,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,KAAK,CAAC,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAE9B;MAAA,CAAC,aAAa,CAAC,CAAC,CAAC,CACf,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,WAAW,EAAE,mBAAmB,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAC9D;UAAA,CAAC,KAAK,CACJ,GAAG,CAAC,CAAC,KAAK,EAAE,GAAG,CAAC,CAChB,GAAG,CAAC,CAAC,GAAG,CAAC,CACT,MAAM,CAAC,CAAC,aAAa,CAAC,CACtB,KAAK,CAAC,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAE7C;QAAA,EAAE,GAAG,CAAC,CACP,CAAC,CAAC,CAAC,CACF,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CACR;UAAA,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CACb;YAAA,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,UAAU,CACrC;cAAA,CAAC,UAAU,CACb;YAAA,EAAE,IAAI,CACN;YAAA,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW,CACxC;cAAA,CAAC,gBAAgB,CACnB;YAAA,EAAE,IAAI,CACR;UAAA,EAAE,KAAK,CACT;QAAA,EAAE,GAAG,CAAC,CACP,CACH;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,kBAAkB,CAAC,iBAAiB,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport { Image } from '../../components/image';\nimport { Text } from '../../components/text';\nimport { Box, Stack } from '../../foundation';\nimport { useZoraTheme } from '../../theme/useZoraTheme';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport type { ImagePreviewProps, ZoraImageAsset } from './types';\n\nfunction resolveRenderableUrl(asset: ZoraImageAsset | null | undefined): string | null {\n if (!asset) return null;\n\n if (asset.kind === 'url') {\n return asset.url;\n }\n\n return asset.publicUrl ?? null;\n}\n\nfunction resolveSafeAspectRatio(value: number | undefined): number {\n if (!value || !Number.isFinite(value) || value <= 0) {\n return 1;\n }\n\n return value;\n}\n\nfunction ImagePreviewInner({\n themeId: _themeId,\n mode: _mode,\n testID,\n asset,\n aspectRatio,\n fit = 'cover',\n emptyTitle = 'No image',\n emptyDescription = 'Select an image to preview it here.',\n}: ImagePreviewProps) {\n const { theme } = useZoraTheme();\n const renderableUrl = resolveRenderableUrl(asset);\n const resolvedAspectRatio = resolveSafeAspectRatio(aspectRatio);\n\n return (\n <Box\n bg={theme.semantics.neutral.surface}\n borderColor={theme.semantics.neutral.divider}\n borderWidth={1}\n radius=\"l\"\n testID={testID}\n style={{ overflow: 'hidden' }}\n >\n {renderableUrl ? (\n <Box style={{ aspectRatio: resolvedAspectRatio, width: '100%' }}>\n <Image\n alt={asset?.alt}\n fit={fit}\n source={renderableUrl}\n style={{ height: '100%', width: '100%' }}\n />\n </Box>\n ) : (\n <Box p=\"l\">\n <Stack gap=\"xs\">\n <Text variant=\"label\" weight=\"semiBold\">\n {emptyTitle}\n </Text>\n <Text emphasis=\"muted\" variant=\"bodySmall\">\n {emptyDescription}\n </Text>\n </Stack>\n </Box>\n )}\n </Box>\n );\n}\n\n/***\n * Preview pattern for showing an image with optional metadata and actions.\n *\n * @readme\n */\nexport const ImagePreview = withZoraThemeScope(ImagePreviewInner);\n"]}
|
|
@@ -1,4 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { ImageUploadFieldProps } from './types';
|
|
3
|
+
/***
|
|
4
|
+
* Form field pattern for picking, previewing, and uploading an image.
|
|
5
|
+
*
|
|
6
|
+
* @readme
|
|
7
|
+
*/
|
|
3
8
|
export declare const ImageUploadField: (props: ImageUploadFieldProps) => React.ReactElement | null;
|
|
4
9
|
//# sourceMappingURL=ImageUploadField.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImageUploadField.d.ts","sourceRoot":"","sources":["../../../src/patterns/image-upload-field/ImageUploadField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AA0RrD,eAAO,MAAM,gBAAgB,6DAA4C,CAAC"}
|
|
1
|
+
{"version":3,"file":"ImageUploadField.d.ts","sourceRoot":"","sources":["../../../src/patterns/image-upload-field/ImageUploadField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AA0RrD;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,6DAA4C,CAAC"}
|
|
@@ -207,5 +207,10 @@ function ImageUploadFieldInner({ themeId: _themeId, mode: _mode, testID, value,
|
|
|
207
207
|
</Modal>) : null}
|
|
208
208
|
</>);
|
|
209
209
|
}
|
|
210
|
+
/***
|
|
211
|
+
* Form field pattern for picking, previewing, and uploading an image.
|
|
212
|
+
*
|
|
213
|
+
* @readme
|
|
214
|
+
*/
|
|
210
215
|
export const ImageUploadField = withZoraThemeScope(ImageUploadFieldInner);
|
|
211
216
|
//# sourceMappingURL=ImageUploadField.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImageUploadField.js","sourceRoot":"","sources":["../../../src/patterns/image-upload-field/ImageUploadField.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { Button } from '../../components/button';\nimport { Modal } from '../../components/modal';\nimport { Progress } from '../../components/progress';\nimport { Text } from '../../components/text';\nimport { Box, Stack } from '../../foundation';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport { FormField } from '../form-field';\nimport { ImagePreview } from '../image-preview';\nimport type { ImageUploadFieldProps } from './types';\nimport {\n createOptimisticAssetFromPicked,\n formatAcceptHint,\n formatMaxSizeHint,\n resolveRenderableUrl,\n validatePickedImage,\n} from './uploadFlow';\n\nfunction clampProgress(value: number | null): number | null {\n if (value === null) return null;\n if (!Number.isFinite(value)) return null;\n return Math.max(0, Math.min(1, value));\n}\n\nfunction formatUnknownError(error: unknown): string {\n if (error instanceof Error && error.message) return error.message;\n if (typeof error === 'string' && error.trim().length > 0) return error;\n return 'Something went wrong.';\n}\n\nfunction ImageUploadFieldInner({\n themeId: _themeId,\n mode: _mode,\n testID,\n value,\n onChange,\n label,\n description,\n helperText,\n errorText,\n required,\n disabled = false,\n readOnly = false,\n accept,\n maxSizeBytes,\n validatePicked,\n onPick,\n onUpload,\n onRemove,\n aspectRatio = 1,\n previewTitle = 'Image preview',\n previewDescription,\n}: ImageUploadFieldProps) {\n const [internalError, setInternalError] = React.useState<string | undefined>(undefined);\n const [uploading, setUploading] = React.useState(false);\n const [removing, setRemoving] = React.useState(false);\n const [progress, setProgress] = React.useState<number | null>(null);\n const [previewOpen, setPreviewOpen] = React.useState(false);\n const isMountedRef = React.useRef(true);\n\n React.useEffect(() => {\n return () => {\n isMountedRef.current = false;\n };\n }, []);\n\n const renderableUrl = resolveRenderableUrl(value);\n const isRenderable = renderableUrl !== null;\n const actionsDisabled = disabled || readOnly;\n\n const effectiveError = errorText ?? internalError;\n const invalid = Boolean(effectiveError);\n\n const acceptHint = formatAcceptHint(accept);\n const maxSizeHint = formatMaxSizeHint(maxSizeBytes);\n\n const setProgressSafe = React.useCallback((next: number | null) => {\n if (!isMountedRef.current) return;\n setProgress(clampProgress(next));\n }, []);\n\n const clearTransientState = React.useCallback(() => {\n if (!isMountedRef.current) return;\n setUploading(false);\n setRemoving(false);\n setProgress(null);\n }, []);\n\n const handleReplace = React.useCallback(async () => {\n if (actionsDisabled || uploading || removing) return;\n\n setInternalError(undefined);\n let picked;\n try {\n picked = await onPick();\n } catch (error) {\n if (!isMountedRef.current) return;\n setInternalError(formatUnknownError(error));\n return;\n }\n if (!picked) return;\n\n const validationError = validatePickedImage({\n picked,\n accept,\n maxSizeBytes,\n validatePicked,\n });\n\n if (validationError) {\n setInternalError(validationError);\n return;\n }\n\n if (!onUpload) {\n onChange(createOptimisticAssetFromPicked(picked));\n return;\n }\n\n const optimisticAsset = createOptimisticAssetFromPicked(picked);\n onChange(optimisticAsset);\n setUploading(true);\n setProgressSafe(0);\n\n try {\n const uploaded = await onUpload(picked, { setProgress: setProgressSafe });\n if (!isMountedRef.current) return;\n onChange(uploaded);\n setInternalError(undefined);\n clearTransientState();\n } catch (error) {\n if (!isMountedRef.current) return;\n setInternalError(formatUnknownError(error));\n setUploading(false);\n setProgress(null);\n }\n }, [\n accept,\n actionsDisabled,\n clearTransientState,\n maxSizeBytes,\n onChange,\n onPick,\n onUpload,\n removing,\n setProgressSafe,\n uploading,\n validatePicked,\n ]);\n\n const handleRemove = React.useCallback(async () => {\n if (actionsDisabled || uploading || removing) return;\n if (!value) {\n onChange(null);\n return;\n }\n\n setInternalError(undefined);\n\n if (!onRemove) {\n onChange(null);\n return;\n }\n\n setRemoving(true);\n try {\n await onRemove(value);\n if (!isMountedRef.current) return;\n onChange(null);\n setRemoving(false);\n } catch (error) {\n if (!isMountedRef.current) return;\n setInternalError(formatUnknownError(error));\n setRemoving(false);\n }\n }, [actionsDisabled, onChange, onRemove, removing, uploading, value]);\n\n const handlePreview = React.useCallback(() => {\n if (!isRenderable) return;\n setPreviewOpen(true);\n }, [isRenderable]);\n\n const closePreview = React.useCallback(() => setPreviewOpen(false), []);\n\n return (\n <>\n <FormField\n description={description}\n disabled={disabled}\n errorText={effectiveError}\n helperText={helperText}\n invalid={invalid}\n label={label}\n readOnly={readOnly}\n required={required}\n testID={testID}\n >\n <Stack gap=\"m\">\n <ImagePreview\n aspectRatio={aspectRatio}\n asset={value}\n emptyDescription={actionsDisabled ? 'No image available.' : undefined}\n />\n\n {acceptHint || maxSizeHint ? (\n <Stack gap=\"xs\">\n {acceptHint ? (\n <Text emphasis=\"muted\" variant=\"caption\">\n {acceptHint}\n </Text>\n ) : null}\n {maxSizeHint ? (\n <Text emphasis=\"muted\" variant=\"caption\">\n {maxSizeHint}\n </Text>\n ) : null}\n </Stack>\n ) : null}\n\n {uploading ? (\n <Stack gap=\"xs\">\n <Text emphasis=\"muted\" variant=\"caption\">\n Uploading…\n </Text>\n {progress !== null ? <Progress max={1} value={progress} /> : null}\n </Stack>\n ) : null}\n\n <Stack direction={{ base: 'column', md: 'row' }} gap=\"s\">\n <Button\n disabled={actionsDisabled || uploading || removing}\n onPress={() => {\n void handleReplace();\n }}\n >\n {value ? 'Replace image' : 'Select image'}\n </Button>\n\n {value ? (\n <Button\n disabled={actionsDisabled || uploading || removing}\n variant=\"outline\"\n loading={removing}\n color=\"danger\"\n onPress={() => {\n void handleRemove();\n }}\n >\n Remove\n </Button>\n ) : null}\n\n {isRenderable ? (\n <Button disabled={false} variant=\"soft\" color=\"neutral\" onPress={handlePreview}>\n Preview\n </Button>\n ) : null}\n </Stack>\n\n {!isRenderable && value?.kind === 'storage' && value.publicUrl === undefined ? (\n <Box>\n <Text emphasis=\"muted\" variant=\"caption\">\n This image is stored, but no preview URL is available yet.\n </Text>\n </Box>\n ) : null}\n </Stack>\n </FormField>\n\n {isRenderable ? (\n <Modal\n closeOnBackdrop\n description={previewDescription}\n title={previewTitle}\n visible={previewOpen}\n onDismiss={closePreview}\n >\n <Stack gap=\"m\">\n <ImagePreview asset={value} aspectRatio={aspectRatio} />\n <Stack direction=\"row\" justify=\"flex-end\">\n <Button variant=\"soft\" color=\"neutral\" onPress={closePreview}>\n Close\n </Button>\n </Stack>\n </Stack>\n </Modal>\n ) : null}\n </>\n );\n}\n\nexport const ImageUploadField = withZoraThemeScope(ImageUploadFieldInner);\n"]}
|
|
1
|
+
{"version":3,"file":"ImageUploadField.js","sourceRoot":"","sources":["../../../src/patterns/image-upload-field/ImageUploadField.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { Button } from '../../components/button';\nimport { Modal } from '../../components/modal';\nimport { Progress } from '../../components/progress';\nimport { Text } from '../../components/text';\nimport { Box, Stack } from '../../foundation';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport { FormField } from '../form-field';\nimport { ImagePreview } from '../image-preview';\nimport type { ImageUploadFieldProps } from './types';\nimport {\n createOptimisticAssetFromPicked,\n formatAcceptHint,\n formatMaxSizeHint,\n resolveRenderableUrl,\n validatePickedImage,\n} from './uploadFlow';\n\nfunction clampProgress(value: number | null): number | null {\n if (value === null) return null;\n if (!Number.isFinite(value)) return null;\n return Math.max(0, Math.min(1, value));\n}\n\nfunction formatUnknownError(error: unknown): string {\n if (error instanceof Error && error.message) return error.message;\n if (typeof error === 'string' && error.trim().length > 0) return error;\n return 'Something went wrong.';\n}\n\nfunction ImageUploadFieldInner({\n themeId: _themeId,\n mode: _mode,\n testID,\n value,\n onChange,\n label,\n description,\n helperText,\n errorText,\n required,\n disabled = false,\n readOnly = false,\n accept,\n maxSizeBytes,\n validatePicked,\n onPick,\n onUpload,\n onRemove,\n aspectRatio = 1,\n previewTitle = 'Image preview',\n previewDescription,\n}: ImageUploadFieldProps) {\n const [internalError, setInternalError] = React.useState<string | undefined>(undefined);\n const [uploading, setUploading] = React.useState(false);\n const [removing, setRemoving] = React.useState(false);\n const [progress, setProgress] = React.useState<number | null>(null);\n const [previewOpen, setPreviewOpen] = React.useState(false);\n const isMountedRef = React.useRef(true);\n\n React.useEffect(() => {\n return () => {\n isMountedRef.current = false;\n };\n }, []);\n\n const renderableUrl = resolveRenderableUrl(value);\n const isRenderable = renderableUrl !== null;\n const actionsDisabled = disabled || readOnly;\n\n const effectiveError = errorText ?? internalError;\n const invalid = Boolean(effectiveError);\n\n const acceptHint = formatAcceptHint(accept);\n const maxSizeHint = formatMaxSizeHint(maxSizeBytes);\n\n const setProgressSafe = React.useCallback((next: number | null) => {\n if (!isMountedRef.current) return;\n setProgress(clampProgress(next));\n }, []);\n\n const clearTransientState = React.useCallback(() => {\n if (!isMountedRef.current) return;\n setUploading(false);\n setRemoving(false);\n setProgress(null);\n }, []);\n\n const handleReplace = React.useCallback(async () => {\n if (actionsDisabled || uploading || removing) return;\n\n setInternalError(undefined);\n let picked;\n try {\n picked = await onPick();\n } catch (error) {\n if (!isMountedRef.current) return;\n setInternalError(formatUnknownError(error));\n return;\n }\n if (!picked) return;\n\n const validationError = validatePickedImage({\n picked,\n accept,\n maxSizeBytes,\n validatePicked,\n });\n\n if (validationError) {\n setInternalError(validationError);\n return;\n }\n\n if (!onUpload) {\n onChange(createOptimisticAssetFromPicked(picked));\n return;\n }\n\n const optimisticAsset = createOptimisticAssetFromPicked(picked);\n onChange(optimisticAsset);\n setUploading(true);\n setProgressSafe(0);\n\n try {\n const uploaded = await onUpload(picked, { setProgress: setProgressSafe });\n if (!isMountedRef.current) return;\n onChange(uploaded);\n setInternalError(undefined);\n clearTransientState();\n } catch (error) {\n if (!isMountedRef.current) return;\n setInternalError(formatUnknownError(error));\n setUploading(false);\n setProgress(null);\n }\n }, [\n accept,\n actionsDisabled,\n clearTransientState,\n maxSizeBytes,\n onChange,\n onPick,\n onUpload,\n removing,\n setProgressSafe,\n uploading,\n validatePicked,\n ]);\n\n const handleRemove = React.useCallback(async () => {\n if (actionsDisabled || uploading || removing) return;\n if (!value) {\n onChange(null);\n return;\n }\n\n setInternalError(undefined);\n\n if (!onRemove) {\n onChange(null);\n return;\n }\n\n setRemoving(true);\n try {\n await onRemove(value);\n if (!isMountedRef.current) return;\n onChange(null);\n setRemoving(false);\n } catch (error) {\n if (!isMountedRef.current) return;\n setInternalError(formatUnknownError(error));\n setRemoving(false);\n }\n }, [actionsDisabled, onChange, onRemove, removing, uploading, value]);\n\n const handlePreview = React.useCallback(() => {\n if (!isRenderable) return;\n setPreviewOpen(true);\n }, [isRenderable]);\n\n const closePreview = React.useCallback(() => setPreviewOpen(false), []);\n\n return (\n <>\n <FormField\n description={description}\n disabled={disabled}\n errorText={effectiveError}\n helperText={helperText}\n invalid={invalid}\n label={label}\n readOnly={readOnly}\n required={required}\n testID={testID}\n >\n <Stack gap=\"m\">\n <ImagePreview\n aspectRatio={aspectRatio}\n asset={value}\n emptyDescription={actionsDisabled ? 'No image available.' : undefined}\n />\n\n {acceptHint || maxSizeHint ? (\n <Stack gap=\"xs\">\n {acceptHint ? (\n <Text emphasis=\"muted\" variant=\"caption\">\n {acceptHint}\n </Text>\n ) : null}\n {maxSizeHint ? (\n <Text emphasis=\"muted\" variant=\"caption\">\n {maxSizeHint}\n </Text>\n ) : null}\n </Stack>\n ) : null}\n\n {uploading ? (\n <Stack gap=\"xs\">\n <Text emphasis=\"muted\" variant=\"caption\">\n Uploading…\n </Text>\n {progress !== null ? <Progress max={1} value={progress} /> : null}\n </Stack>\n ) : null}\n\n <Stack direction={{ base: 'column', md: 'row' }} gap=\"s\">\n <Button\n disabled={actionsDisabled || uploading || removing}\n onPress={() => {\n void handleReplace();\n }}\n >\n {value ? 'Replace image' : 'Select image'}\n </Button>\n\n {value ? (\n <Button\n disabled={actionsDisabled || uploading || removing}\n variant=\"outline\"\n loading={removing}\n color=\"danger\"\n onPress={() => {\n void handleRemove();\n }}\n >\n Remove\n </Button>\n ) : null}\n\n {isRenderable ? (\n <Button disabled={false} variant=\"soft\" color=\"neutral\" onPress={handlePreview}>\n Preview\n </Button>\n ) : null}\n </Stack>\n\n {!isRenderable && value?.kind === 'storage' && value.publicUrl === undefined ? (\n <Box>\n <Text emphasis=\"muted\" variant=\"caption\">\n This image is stored, but no preview URL is available yet.\n </Text>\n </Box>\n ) : null}\n </Stack>\n </FormField>\n\n {isRenderable ? (\n <Modal\n closeOnBackdrop\n description={previewDescription}\n title={previewTitle}\n visible={previewOpen}\n onDismiss={closePreview}\n >\n <Stack gap=\"m\">\n <ImagePreview asset={value} aspectRatio={aspectRatio} />\n <Stack direction=\"row\" justify=\"flex-end\">\n <Button variant=\"soft\" color=\"neutral\" onPress={closePreview}>\n Close\n </Button>\n </Stack>\n </Stack>\n </Modal>\n ) : null}\n </>\n );\n}\n\n/***\n * Form field pattern for picking, previewing, and uploading an image.\n *\n * @readme\n */\nexport const ImageUploadField = withZoraThemeScope(ImageUploadFieldInner);\n"]}
|