@ziyarago/ui 0.6.1 → 0.7.0

package/src/react/index.js

@@ -198,6 +198,12 @@ export const UiPageOrder = C.PageOrder;
 export const UiPageAccount = C.PageAccount;
 export const UiPagePricing = C.PagePricing;
 export const UiPageFaq = C.PageFaq;
+export const UiPageAnalytics = C.PageAnalytics;
+export const UiPageNotifications = C.PageNotifications;
+export const UiPageInbox = C.PageInbox;
+export const UiPageCheckout = C.PageCheckout;
+export const UiPageOnboarding = C.PageOnboarding;
+export const UiPageLanding = C.PageLanding;
 export const UiPageAuth = C.PageAuth;
 export const UiPageStatus = C.PageStatus;
 export const UiTreeSelect = C.TreeSelect;

package/src/vue/index.js

@@ -29,7 +29,7 @@ const wrap = (name, def) => defineComponent({
 });
 for (const [name, def] of Object.entries(components)) C[name] = wrap(name, def);
 
-export const { Button: UiButton, IconButton: UiIconButton, Badge: UiBadge, Avatar: UiAvatar, Switch: UiSwitch, Checkbox: UiCheckbox, SegmentedControl: UiSegmentedControl, Tabs: UiTabs, FilterChips: UiFilterChips, TextField: UiTextField, Select: UiSelect, CodeInput: UiCodeInput, Stepper: UiStepper, Card: UiCard, Modal: UiModal, Drawer: UiDrawer, Toast: UiToast, Breadcrumbs: UiBreadcrumbs, Pagination: UiPagination, Progress: UiProgress, Ring: UiRing, KpiTile: UiKpiTile, DataTable: UiDataTable, KanbanColumn: UiKanbanColumn, KanbanCard: UiKanbanCard, Timeline: UiTimeline, TopNav: UiTopNav, SideNav: UiSideNav, AppShell: UiAppShell, PageHeader: UiPageHeader, AuthLayout: UiAuthLayout, LeadCard: UiLeadCard, HotelCard: UiHotelCard, TourCard: UiTourCard, PrayerTimes: UiPrayerTimes, RamadanTracker: UiRamadanTracker, CallRow: UiCallRow, Alert: UiAlert, Banner: UiBanner, Accordion: UiAccordion, Skeleton: UiSkeleton, Spinner: UiSpinner, Divider: UiDivider, EmptyState: UiEmptyState, ErrorPage: UiErrorPage, DataState: UiDataState, LoadingOverlay: UiLoadingOverlay, ConfirmDialog: UiConfirmDialog, Popconfirm: UiPopconfirm, Carousel: UiCarousel, Gallery: UiGallery, Code: UiCode, PricingCard: UiPricingCard, IntegrationCard: UiIntegrationCard, IncomingCall: UiIncomingCall, CallCard: UiCallCard, Dropdown: UiDropdown, Menu: UiMenu, Tooltip: UiTooltip, HoverCard: UiHoverCard, Popover: UiPopover, CopyButton: UiCopyButton, CommandBar: UiCommandBar, CommandPalette: UiCommandPalette, NotificationBell: UiNotificationBell, ToggleGroup: UiToggleGroup, Fab: UiFab, Textarea: UiTextarea, NumberInput: UiNumberInput, PasswordInput: UiPasswordInput, SearchInput: UiSearchInput, RadioGroup: UiRadioGroup, Slider: UiSlider, Rating: UiRating, ChipInput: UiChipInput, InlineEdit: UiInlineEdit, ColorPicker: UiColorPicker, FileUpload: UiFileUpload, Combobox: UiCombobox, MultiSelect: UiMultiSelect, GroupedSelect: UiGroupedSelect, PhoneInput: UiPhoneInput, Calendar: UiCalendar, DatePicker: UiDatePicker, TimePicker: UiTimePicker, FormField: UiFormField, LoginForm: UiLoginForm, StepForm: UiStepForm, Tag: UiTag, Kbd: UiKbd, StatsCard: UiStatsCard, KpiInline: UiKpiInline, MiniChart: UiMiniChart, Descriptions: UiDescriptions, LazyImage: UiLazyImage, SystemStatus: UiSystemStatus, TreeView: UiTreeView, CalendarView: UiCalendarView, SubNav: UiSubNav, ActionRail: UiActionRail, SplitLayout: UiSplitLayout, SettingsSection: UiSettingsSection, ScrollArea: UiScrollArea, DealCard: UiDealCard, PipelineBoard: UiPipelineBoard, ContactPanel: UiContactPanel, SalesFunnel: UiSalesFunnel, BookingCard: UiBookingCard, GuestCard: UiGuestCard, RoomGrid: UiRoomGrid, RoomCalendar: UiRoomCalendar, OccupancyChart: UiOccupancyChart, Chip: UiChip, IconTile: UiIconTile, StatusIcon: UiStatusIcon, UserCell: UiUserCell, StatRow: UiStatRow, CountryRow: UiCountryRow, StatLine: UiStatLine, StatStrip: UiStatStrip, VersusBar: UiVersusBar, SegBar: UiSegBar, HeroBanner: UiHeroBanner, TabTiles: UiTabTiles, PillTabs: UiPillTabs, PillSelect: UiPillSelect, ChartCard: UiChartCard, ActionCard: UiActionCard, Snackbar: UiSnackbar, TourPopover: UiTourPopover, ProfileHeader: UiProfileHeader, AuthSplit: UiAuthSplit, AuthShowcase: UiAuthShowcase, SocialAuth: UiSocialAuth, StatusPage: UiStatusPage, ValidatedField: UiValidatedField, Footer: UiFooter, DataGroup: UiDataGroup, OptionCard: UiOptionCard, OptionCards: UiOptionCards, RichEditor: UiRichEditor, RangeSlider: UiRangeSlider, RangeCalendar: UiRangeCalendar, StepDialog: UiStepDialog, FullscreenDialog: UiFullscreenDialog, PageDashboard: UiPageDashboard, PagePatterns: UiPagePatterns, PageCrm: UiPageCrm, PageBookings: UiPageBookings, PageCatalog: UiPageCatalog, PageDetail: UiPageDetail, PageSettings: UiPageSettings, PageUserList: UiPageUserList, PageProfile: UiPageProfile, PageForm: UiPageForm, PageOrder: UiPageOrder, PageAccount: UiPageAccount, PagePricing: UiPagePricing, PageFaq: UiPageFaq, PageAuth: UiPageAuth, PageStatus: UiPageStatus, TreeSelect: UiTreeSelect, ContextMenu: UiContextMenu, Sortable: UiSortable, Map: UiMap, ImageUpload: UiImageUpload, Screensaver: UiScreensaver, Tour: UiTour, Heading: UiHeading, Text: UiText, Box: UiBox, Center: UiCenter, HStack: UiHStack, VStack: UiVStack, Grid: UiGrid, Link: UiLink, Pressable: UiPressable, Icon: UiIcon, Portal: UiPortal, LiquidGlass: UiLiquidGlass, BottomSheet: UiBottomSheet, Actionsheet: UiActionsheet, ImageViewer: UiImageViewer, ChatAi: UiChatAi } = C;
+export const { Button: UiButton, IconButton: UiIconButton, Badge: UiBadge, Avatar: UiAvatar, Switch: UiSwitch, Checkbox: UiCheckbox, SegmentedControl: UiSegmentedControl, Tabs: UiTabs, FilterChips: UiFilterChips, TextField: UiTextField, Select: UiSelect, CodeInput: UiCodeInput, Stepper: UiStepper, Card: UiCard, Modal: UiModal, Drawer: UiDrawer, Toast: UiToast, Breadcrumbs: UiBreadcrumbs, Pagination: UiPagination, Progress: UiProgress, Ring: UiRing, KpiTile: UiKpiTile, DataTable: UiDataTable, KanbanColumn: UiKanbanColumn, KanbanCard: UiKanbanCard, Timeline: UiTimeline, TopNav: UiTopNav, SideNav: UiSideNav, AppShell: UiAppShell, PageHeader: UiPageHeader, AuthLayout: UiAuthLayout, LeadCard: UiLeadCard, HotelCard: UiHotelCard, TourCard: UiTourCard, PrayerTimes: UiPrayerTimes, RamadanTracker: UiRamadanTracker, CallRow: UiCallRow, Alert: UiAlert, Banner: UiBanner, Accordion: UiAccordion, Skeleton: UiSkeleton, Spinner: UiSpinner, Divider: UiDivider, EmptyState: UiEmptyState, ErrorPage: UiErrorPage, DataState: UiDataState, LoadingOverlay: UiLoadingOverlay, ConfirmDialog: UiConfirmDialog, Popconfirm: UiPopconfirm, Carousel: UiCarousel, Gallery: UiGallery, Code: UiCode, PricingCard: UiPricingCard, IntegrationCard: UiIntegrationCard, IncomingCall: UiIncomingCall, CallCard: UiCallCard, Dropdown: UiDropdown, Menu: UiMenu, Tooltip: UiTooltip, HoverCard: UiHoverCard, Popover: UiPopover, CopyButton: UiCopyButton, CommandBar: UiCommandBar, CommandPalette: UiCommandPalette, NotificationBell: UiNotificationBell, ToggleGroup: UiToggleGroup, Fab: UiFab, Textarea: UiTextarea, NumberInput: UiNumberInput, PasswordInput: UiPasswordInput, SearchInput: UiSearchInput, RadioGroup: UiRadioGroup, Slider: UiSlider, Rating: UiRating, ChipInput: UiChipInput, InlineEdit: UiInlineEdit, ColorPicker: UiColorPicker, FileUpload: UiFileUpload, Combobox: UiCombobox, MultiSelect: UiMultiSelect, GroupedSelect: UiGroupedSelect, PhoneInput: UiPhoneInput, Calendar: UiCalendar, DatePicker: UiDatePicker, TimePicker: UiTimePicker, FormField: UiFormField, LoginForm: UiLoginForm, StepForm: UiStepForm, Tag: UiTag, Kbd: UiKbd, StatsCard: UiStatsCard, KpiInline: UiKpiInline, MiniChart: UiMiniChart, Descriptions: UiDescriptions, LazyImage: UiLazyImage, SystemStatus: UiSystemStatus, TreeView: UiTreeView, CalendarView: UiCalendarView, SubNav: UiSubNav, ActionRail: UiActionRail, SplitLayout: UiSplitLayout, SettingsSection: UiSettingsSection, ScrollArea: UiScrollArea, DealCard: UiDealCard, PipelineBoard: UiPipelineBoard, ContactPanel: UiContactPanel, SalesFunnel: UiSalesFunnel, BookingCard: UiBookingCard, GuestCard: UiGuestCard, RoomGrid: UiRoomGrid, RoomCalendar: UiRoomCalendar, OccupancyChart: UiOccupancyChart, Chip: UiChip, IconTile: UiIconTile, StatusIcon: UiStatusIcon, UserCell: UiUserCell, StatRow: UiStatRow, CountryRow: UiCountryRow, StatLine: UiStatLine, StatStrip: UiStatStrip, VersusBar: UiVersusBar, SegBar: UiSegBar, HeroBanner: UiHeroBanner, TabTiles: UiTabTiles, PillTabs: UiPillTabs, PillSelect: UiPillSelect, ChartCard: UiChartCard, ActionCard: UiActionCard, Snackbar: UiSnackbar, TourPopover: UiTourPopover, ProfileHeader: UiProfileHeader, AuthSplit: UiAuthSplit, AuthShowcase: UiAuthShowcase, SocialAuth: UiSocialAuth, StatusPage: UiStatusPage, ValidatedField: UiValidatedField, Footer: UiFooter, DataGroup: UiDataGroup, OptionCard: UiOptionCard, OptionCards: UiOptionCards, RichEditor: UiRichEditor, RangeSlider: UiRangeSlider, RangeCalendar: UiRangeCalendar, StepDialog: UiStepDialog, FullscreenDialog: UiFullscreenDialog, PageDashboard: UiPageDashboard, PagePatterns: UiPagePatterns, PageCrm: UiPageCrm, PageBookings: UiPageBookings, PageCatalog: UiPageCatalog, PageDetail: UiPageDetail, PageSettings: UiPageSettings, PageUserList: UiPageUserList, PageProfile: UiPageProfile, PageForm: UiPageForm, PageOrder: UiPageOrder, PageAccount: UiPageAccount, PagePricing: UiPagePricing, PageFaq: UiPageFaq, PageAnalytics: UiPageAnalytics, PageNotifications: UiPageNotifications, PageInbox: UiPageInbox, PageCheckout: UiPageCheckout, PageOnboarding: UiPageOnboarding, PageLanding: UiPageLanding, PageAuth: UiPageAuth, PageStatus: UiPageStatus, TreeSelect: UiTreeSelect, ContextMenu: UiContextMenu, Sortable: UiSortable, Map: UiMap, ImageUpload: UiImageUpload, Screensaver: UiScreensaver, Tour: UiTour, Heading: UiHeading, Text: UiText, Box: UiBox, Center: UiCenter, HStack: UiHStack, VStack: UiVStack, Grid: UiGrid, Link: UiLink, Pressable: UiPressable, Icon: UiIcon, Portal: UiPortal, LiquidGlass: UiLiquidGlass, BottomSheet: UiBottomSheet, Actionsheet: UiActionsheet, ImageViewer: UiImageViewer, ChatAi: UiChatAi } = C;
 export const install = app => { for (const [n, c] of Object.entries(C)) app.component('Ui' + n, c); };
 export { fmt, setIconBase, rules } from '../core/index.js';
 export { useUiTheme } from '../theme.js';

package/types/react.d.ts

@@ -3090,6 +3090,66 @@ export interface UiPageAccountProps {
 }
 export const UiPageAccount: ComponentType<UiPageAccountProps>;
 
+/**
+ * Analytics template: period picker, KPI strip, trend charts, a breakdown block and a table. Put Export in actions.
+ * Note: Place inside AppShell; fill only the slots you need.
+ * Note: Trend and breakdown share a row and wrap on narrow screens. Put Export in the actions slot.
+ */
+export interface UiPageAnalyticsProps {
+  /**
+   * Page heading. The built-in header renders only when title is set and the header slot is empty.
+   * @remarks Forwarded to the inner element.
+   */
+  title?: string;
+  /**
+   * Caption under the heading.
+   * @remarks Forwarded to the inner element.
+   */
+  subtitle?: string;
+  /**
+   * Breadcrumb trail above the title.
+   * @remarks Forwarded to the inner element.
+   */
+  crumbs?: { label: string; href?: string }[];
+  /**
+   * Custom page header; replaces the built-in title/subtitle/crumbs header.
+   * @slot header (React: pass as a prop)
+   */
+  header?: ReactNode;
+  /**
+   * Buttons on the right of the built-in header. With a title they sit beside it; without a title they render alone, right-aligned (unless the header slot is filled).
+   * @slot actions (React: pass as a prop)
+   */
+  actions?: ReactNode;
+  /**
+   * Period presets and compare toggle; SegmentedControl, Select, Switch.
+   * @slot period (React: pass as a prop)
+   */
+  period?: ReactNode;
+  /**
+   * Headline numbers with deltas; KpiTile, StatLine.
+   * @slot kpis (React: pass as a prop)
+   */
+  kpis?: ReactNode;
+  /**
+   * Main time series; ChartCard with MiniChart.
+   * @slot trend (React: pass as a prop)
+   */
+  trend?: ReactNode;
+  /**
+   * Split by channel or country; ChartCard with SegBar and CountryRow.
+   * @slot breakdown (React: pass as a prop)
+   */
+  breakdown?: ReactNode;
+  /**
+   * Rows behind the numbers; DataTable.
+   * @slot table (React: pass as a prop)
+   */
+  table?: ReactNode;
+  children?: ReactNode;
+}
+export const UiPageAnalytics: ComponentType<UiPageAnalyticsProps>;
+
 /**
  * Sign-in page template without the app shell, as a centered card or a split layout.
  * Note: Designed for the dark theme and used without AppShell.
@@ -3294,6 +3354,66 @@ export interface UiPageCatalogProps {
 }
 export const UiPageCatalog: ComponentType<UiPageCatalogProps>;
 
+/**
+ * Checkout template: step indicator, cart items, delivery address, payment and an order summary column.
+ * Note: Place inside AppShell; fill only the slots you need.
+ * Note: Summary sits in the side column and drops below the form on narrow screens.
+ */
+export interface UiPageCheckoutProps {
+  /**
+   * Page heading. The built-in header renders only when title is set and the header slot is empty.
+   * @remarks Forwarded to the inner element.
+   */
+  title?: string;
+  /**
+   * Caption under the heading.
+   * @remarks Forwarded to the inner element.
+   */
+  subtitle?: string;
+  /**
+   * Breadcrumb trail above the title.
+   * @remarks Forwarded to the inner element.
+   */
+  crumbs?: { label: string; href?: string }[];
+  /**
+   * Custom page header; replaces the built-in title/subtitle/crumbs header.
+   * @slot header (React: pass as a prop)
+   */
+  header?: ReactNode;
+  /**
+   * Buttons on the right of the built-in header. With a title they sit beside it; without a title they render alone, right-aligned (unless the header slot is filled).
+   * @slot actions (React: pass as a prop)
+   */
+  actions?: ReactNode;
+  /**
+   * Checkout steps above the content; Stepper.
+   * @slot steps (React: pass as a prop)
+   */
+  steps?: ReactNode;
+  /**
+   * Cart lines with quantity and price; Card with NumberInput.
+   * @slot items (React: pass as a prop)
+   */
+  items?: ReactNode;
+  /**
+   * Contact and delivery fields; Card with TextField and Select.
+   * @slot address (React: pass as a prop)
+   */
+  address?: ReactNode;
+  /**
+   * Payment method and card fields; OptionCards, TextField.
+   * @slot payment (React: pass as a prop)
+   */
+  payment?: ReactNode;
+  /**
+   * Totals, promo code and the pay button; Card, Descriptions, Button.
+   * @slot summary (React: pass as a prop)
+   */
+  summary?: ReactNode;
+  children?: ReactNode;
+}
+export const UiPageCheckout: ComponentType<UiPageCheckoutProps>;
+
 /**
  * CRM template: summary tiles, filters, pipeline board and call queue.
  * Note: Place inside AppShell; fill only the slots you need.
@@ -3598,6 +3718,215 @@ export interface UiPageHeaderProps {
 }
 export const UiPageHeader: ComponentType<UiPageHeaderProps>;
 
+/**
+ * Inbox template: filters and conversation list, the open thread with a composer, and a customer panel.
+ * Note: Place inside AppShell; fill only the slots you need.
+ * Note: List, thread and customer panel sit side by side and stack in that order at 860px and below. Keep the selected conversation in your own state.
+ */
+export interface UiPageInboxProps {
+  /**
+   * Page heading. The built-in header renders only when title is set and the header slot is empty.
+   * @remarks Forwarded to the inner element.
+   */
+  title?: string;
+  /**
+   * Caption under the heading.
+   * @remarks Forwarded to the inner element.
+   */
+  subtitle?: string;
+  /**
+   * Breadcrumb trail above the title.
+   * @remarks Forwarded to the inner element.
+   */
+  crumbs?: { label: string; href?: string }[];
+  /**
+   * Custom page header; replaces the built-in title/subtitle/crumbs header.
+   * @slot header (React: pass as a prop)
+   */
+  header?: ReactNode;
+  /**
+   * Buttons on the right of the built-in header. With a title they sit beside it; without a title they render alone, right-aligned (unless the header slot is filled).
+   * @slot actions (React: pass as a prop)
+   */
+  actions?: ReactNode;
+  /**
+   * Search and folder chips above the list; SearchInput, FilterChips.
+   * @slot filters (React: pass as a prop)
+   */
+  filters?: ReactNode;
+  /**
+   * Conversation rows with unread marks; Card, Avatar, Badge.
+   * @slot list (React: pass as a prop)
+   */
+  list?: ReactNode;
+  /**
+   * Messages of the open conversation; Card, Avatar.
+   * @slot thread (React: pass as a prop)
+   */
+  thread?: ReactNode;
+  /**
+   * Reply field and send button; Textarea, Button.
+   * @slot composer (React: pass as a prop)
+   */
+  composer?: ReactNode;
+  /**
+   * Customer details; ContactPanel, Descriptions, Tag.
+   * @slot customer (React: pass as a prop)
+   */
+  customer?: ReactNode;
+  children?: ReactNode;
+}
+export const UiPageInbox: ComponentType<UiPageInboxProps>;
+
+/**
+ * Landing template: hero, logo strip, features, social proof, pricing teaser, call to action and footer. Used without the app shell.
+ * Note: Landing does not use the app shell: render it on its own page. Blocks stack in one column; each block may use its own grid and wraps on narrow screens.
+ */
+export interface UiPageLandingProps {
+  /**
+   * Hero block; HeroBanner, Card, Button.
+   * @slot hero (React: pass as a prop)
+   */
+  hero?: ReactNode;
+  /**
+   * Partner row; Chip or Text.
+   * @slot logos (React: pass as a prop)
+   */
+  logos?: ReactNode;
+  /**
+   * Feature cards; Card, IconTile.
+   * @slot features (React: pass as a prop)
+   */
+  features?: ReactNode;
+  /**
+   * Numbers and quotes; StatStrip, Card, Avatar.
+   * @slot proof (React: pass as a prop)
+   */
+  proof?: ReactNode;
+  /**
+   * Plan cards; PricingCard.
+   * @slot pricing (React: pass as a prop)
+   */
+  pricing?: ReactNode;
+  /**
+   * Closing block; Card variant="gradient", Button.
+   * @slot cta (React: pass as a prop)
+   */
+  cta?: ReactNode;
+  /**
+   * Page footer; Footer.
+   * @slot footer (React: pass as a prop)
+   */
+  footer?: ReactNode;
+  children?: ReactNode;
+}
+export const UiPageLanding: ComponentType<UiPageLandingProps>;
+
+/**
+ * Notifications template: filters, a feed grouped by day and an empty state. Put Mark all read in actions.
+ * Note: Place inside AppShell; fill only the slots you need.
+ * Note: Fill empty only when the feed has no rows. Mark all read goes in the actions slot.
+ */
+export interface UiPageNotificationsProps {
+  /**
+   * Page heading. The built-in header renders only when title is set and the header slot is empty.
+   * @remarks Forwarded to the inner element.
+   */
+  title?: string;
+  /**
+   * Caption under the heading.
+   * @remarks Forwarded to the inner element.
+   */
+  subtitle?: string;
+  /**
+   * Breadcrumb trail above the title.
+   * @remarks Forwarded to the inner element.
+   */
+  crumbs?: { label: string; href?: string }[];
+  /**
+   * Custom page header; replaces the built-in title/subtitle/crumbs header.
+   * @slot header (React: pass as a prop)
+   */
+  header?: ReactNode;
+  /**
+   * Buttons on the right of the built-in header. With a title they sit beside it; without a title they render alone, right-aligned (unless the header slot is filled).
+   * @slot actions (React: pass as a prop)
+   */
+  actions?: ReactNode;
+  /**
+   * Filter chips such as all, unread and mentions; FilterChips.
+   * @slot filters (React: pass as a prop)
+   */
+  filters?: ReactNode;
+  /**
+   * Notification rows grouped by day; Card, IconTile, Badge, Divider.
+   * @slot feed (React: pass as a prop)
+   */
+  feed?: ReactNode;
+  /**
+   * Shown instead of the feed when nothing matches; EmptyState.
+   * @slot empty (React: pass as a prop)
+   */
+  empty?: ReactNode;
+  children?: ReactNode;
+}
+export const UiPageNotifications: ComponentType<UiPageNotificationsProps>;
+
+/**
+ * Onboarding template: progress block, active step content, setup checklist and a column of tips.
+ * Note: Place inside AppShell; fill only the slots you need.
+ * Note: Keep the active step in your own state; the template does not switch steps. Steps and checklist share the main column, tips go to the side and stack below it on narrow screens.
+ */
+export interface UiPageOnboardingProps {
+  /**
+   * Page heading. The built-in header renders only when title is set and the header slot is empty.
+   * @remarks Forwarded to the inner element.
+   */
+  title?: string;
+  /**
+   * Caption under the heading.
+   * @remarks Forwarded to the inner element.
+   */
+  subtitle?: string;
+  /**
+   * Breadcrumb trail above the title.
+   * @remarks Forwarded to the inner element.
+   */
+  crumbs?: { label: string; href?: string }[];
+  /**
+   * Custom page header; replaces the built-in title/subtitle/crumbs header.
+   * @slot header (React: pass as a prop)
+   */
+  header?: ReactNode;
+  /**
+   * Buttons on the right of the built-in header. With a title they sit beside it; without a title they render alone, right-aligned (unless the header slot is filled).
+   * @slot actions (React: pass as a prop)
+   */
+  actions?: ReactNode;
+  /**
+   * Stepper and a completion bar above the content; Stepper, Progress.
+   * @slot progress (React: pass as a prop)
+   */
+  progress?: ReactNode;
+  /**
+   * Content of the active step; Card with form fields.
+   * @slot steps (React: pass as a prop)
+   */
+  steps?: ReactNode;
+  /**
+   * Remaining setup tasks; Card with Checkbox rows.
+   * @slot checklist (React: pass as a prop)
+   */
+  checklist?: ReactNode;
+  /**
+   * Side column with help cards; Card, IconTile, Button.
+   * @slot tips (React: pass as a prop)
+   */
+  tips?: ReactNode;
+  children?: ReactNode;
+}
+export const UiPageOnboarding: ComponentType<UiPageOnboardingProps>;
+
 /**
  * Order/booking details template: status chips, items table, timeline and side info cards.
  * Note: Place inside AppShell; fill only the slots you need.

package/types/vue-global.d.ts

@@ -102,15 +102,21 @@ declare module 'vue' {
     UiOptionCard: typeof Ui.UiOptionCard;
     UiOptionCards: typeof Ui.UiOptionCards;
     UiPageAccount: typeof Ui.UiPageAccount;
+    UiPageAnalytics: typeof Ui.UiPageAnalytics;
     UiPageAuth: typeof Ui.UiPageAuth;
     UiPageBookings: typeof Ui.UiPageBookings;
     UiPageCatalog: typeof Ui.UiPageCatalog;
+    UiPageCheckout: typeof Ui.UiPageCheckout;
     UiPageCrm: typeof Ui.UiPageCrm;
     UiPageDashboard: typeof Ui.UiPageDashboard;
     UiPageDetail: typeof Ui.UiPageDetail;
     UiPageFaq: typeof Ui.UiPageFaq;
     UiPageForm: typeof Ui.UiPageForm;
     UiPageHeader: typeof Ui.UiPageHeader;
+    UiPageInbox: typeof Ui.UiPageInbox;
+    UiPageLanding: typeof Ui.UiPageLanding;
+    UiPageNotifications: typeof Ui.UiPageNotifications;
+    UiPageOnboarding: typeof Ui.UiPageOnboarding;
     UiPageOrder: typeof Ui.UiPageOrder;
     UiPagePatterns: typeof Ui.UiPagePatterns;
     UiPagePricing: typeof Ui.UiPagePricing;

package/types/vue.d.ts

@@ -3199,6 +3199,46 @@ export interface UiPageAccountSlots {
 }
 export const UiPageAccount: UiVueComponent<UiPageAccountProps, UiPageAccountSlots>;
 
+/**
+ * Analytics template: period picker, KPI strip, trend charts, a breakdown block and a table. Put Export in actions.
+ * Note: Place inside AppShell; fill only the slots you need.
+ * Note: Trend and breakdown share a row and wrap on narrow screens. Put Export in the actions slot.
+ */
+export interface UiPageAnalyticsProps {
+  /**
+   * Page heading. The built-in header renders only when title is set and the header slot is empty.
+   * @remarks Forwarded to the inner element.
+   */
+  title?: string;
+  /**
+   * Caption under the heading.
+   * @remarks Forwarded to the inner element.
+   */
+  subtitle?: string;
+  /**
+   * Breadcrumb trail above the title.
+   * @remarks Forwarded to the inner element.
+   */
+  crumbs?: { label: string; href?: string }[];
+}
+export interface UiPageAnalyticsSlots {
+  /** Custom page header; replaces the built-in title/subtitle/crumbs header. */
+  header?: () => any;
+  /** Buttons on the right of the built-in header. With a title they sit beside it; without a title they render alone, right-aligned (unless the header slot is filled). */
+  actions?: () => any;
+  /** Period presets and compare toggle; SegmentedControl, Select, Switch. */
+  period?: () => any;
+  /** Headline numbers with deltas; KpiTile, StatLine. */
+  kpis?: () => any;
+  /** Main time series; ChartCard with MiniChart. */
+  trend?: () => any;
+  /** Split by channel or country; ChartCard with SegBar and CountryRow. */
+  breakdown?: () => any;
+  /** Rows behind the numbers; DataTable. */
+  table?: () => any;
+}
+export const UiPageAnalytics: UiVueComponent<UiPageAnalyticsProps, UiPageAnalyticsSlots>;
+
 /**
  * Sign-in page template without the app shell, as a centered card or a split layout.
  * Note: Designed for the dark theme and used without AppShell.
@@ -3352,6 +3392,46 @@ export interface UiPageCatalogSlots {
 }
 export const UiPageCatalog: UiVueComponent<UiPageCatalogProps, UiPageCatalogSlots>;
 
+/**
+ * Checkout template: step indicator, cart items, delivery address, payment and an order summary column.
+ * Note: Place inside AppShell; fill only the slots you need.
+ * Note: Summary sits in the side column and drops below the form on narrow screens.
+ */
+export interface UiPageCheckoutProps {
+  /**
+   * Page heading. The built-in header renders only when title is set and the header slot is empty.
+   * @remarks Forwarded to the inner element.
+   */
+  title?: string;
+  /**
+   * Caption under the heading.
+   * @remarks Forwarded to the inner element.
+   */
+  subtitle?: string;
+  /**
+   * Breadcrumb trail above the title.
+   * @remarks Forwarded to the inner element.
+   */
+  crumbs?: { label: string; href?: string }[];
+}
+export interface UiPageCheckoutSlots {
+  /** Custom page header; replaces the built-in title/subtitle/crumbs header. */
+  header?: () => any;
+  /** Buttons on the right of the built-in header. With a title they sit beside it; without a title they render alone, right-aligned (unless the header slot is filled). */
+  actions?: () => any;
+  /** Checkout steps above the content; Stepper. */
+  steps?: () => any;
+  /** Cart lines with quantity and price; Card with NumberInput. */
+  items?: () => any;
+  /** Contact and delivery fields; Card with TextField and Select. */
+  address?: () => any;
+  /** Payment method and card fields; OptionCards, TextField. */
+  payment?: () => any;
+  /** Totals, promo code and the pay button; Card, Descriptions, Button. */
+  summary?: () => any;
+}
+export const UiPageCheckout: UiVueComponent<UiPageCheckoutProps, UiPageCheckoutSlots>;
+
 /**
  * CRM template: summary tiles, filters, pipeline board and call queue.
  * Note: Place inside AppShell; fill only the slots you need.
@@ -3563,6 +3643,145 @@ export interface UiPageHeaderSlots {
 }
 export const UiPageHeader: UiVueComponent<UiPageHeaderProps, UiPageHeaderSlots>;
 
+/**
+ * Inbox template: filters and conversation list, the open thread with a composer, and a customer panel.
+ * Note: Place inside AppShell; fill only the slots you need.
+ * Note: List, thread and customer panel sit side by side and stack in that order at 860px and below. Keep the selected conversation in your own state.
+ */
+export interface UiPageInboxProps {
+  /**
+   * Page heading. The built-in header renders only when title is set and the header slot is empty.
+   * @remarks Forwarded to the inner element.
+   */
+  title?: string;
+  /**
+   * Caption under the heading.
+   * @remarks Forwarded to the inner element.
+   */
+  subtitle?: string;
+  /**
+   * Breadcrumb trail above the title.
+   * @remarks Forwarded to the inner element.
+   */
+  crumbs?: { label: string; href?: string }[];
+}
+export interface UiPageInboxSlots {
+  /** Custom page header; replaces the built-in title/subtitle/crumbs header. */
+  header?: () => any;
+  /** Buttons on the right of the built-in header. With a title they sit beside it; without a title they render alone, right-aligned (unless the header slot is filled). */
+  actions?: () => any;
+  /** Search and folder chips above the list; SearchInput, FilterChips. */
+  filters?: () => any;
+  /** Conversation rows with unread marks; Card, Avatar, Badge. */
+  list?: () => any;
+  /** Messages of the open conversation; Card, Avatar. */
+  thread?: () => any;
+  /** Reply field and send button; Textarea, Button. */
+  composer?: () => any;
+  /** Customer details; ContactPanel, Descriptions, Tag. */
+  customer?: () => any;
+}
+export const UiPageInbox: UiVueComponent<UiPageInboxProps, UiPageInboxSlots>;
+
+/**
+ * Landing template: hero, logo strip, features, social proof, pricing teaser, call to action and footer. Used without the app shell.
+ * Note: Landing does not use the app shell: render it on its own page. Blocks stack in one column; each block may use its own grid and wraps on narrow screens.
+ */
+export interface UiPageLandingProps {
+
+}
+export interface UiPageLandingSlots {
+  /** Hero block; HeroBanner, Card, Button. */
+  hero?: () => any;
+  /** Partner row; Chip or Text. */
+  logos?: () => any;
+  /** Feature cards; Card, IconTile. */
+  features?: () => any;
+  /** Numbers and quotes; StatStrip, Card, Avatar. */
+  proof?: () => any;
+  /** Plan cards; PricingCard. */
+  pricing?: () => any;
+  /** Closing block; Card variant="gradient", Button. */
+  cta?: () => any;
+  /** Page footer; Footer. */
+  footer?: () => any;
+}
+export const UiPageLanding: UiVueComponent<UiPageLandingProps, UiPageLandingSlots>;
+
+/**
+ * Notifications template: filters, a feed grouped by day and an empty state. Put Mark all read in actions.
+ * Note: Place inside AppShell; fill only the slots you need.
+ * Note: Fill empty only when the feed has no rows. Mark all read goes in the actions slot.
+ */
+export interface UiPageNotificationsProps {
+  /**
+   * Page heading. The built-in header renders only when title is set and the header slot is empty.
+   * @remarks Forwarded to the inner element.
+   */
+  title?: string;
+  /**
+   * Caption under the heading.
+   * @remarks Forwarded to the inner element.
+   */
+  subtitle?: string;
+  /**
+   * Breadcrumb trail above the title.
+   * @remarks Forwarded to the inner element.
+   */
+  crumbs?: { label: string; href?: string }[];
+}
+export interface UiPageNotificationsSlots {
+  /** Custom page header; replaces the built-in title/subtitle/crumbs header. */
+  header?: () => any;
+  /** Buttons on the right of the built-in header. With a title they sit beside it; without a title they render alone, right-aligned (unless the header slot is filled). */
+  actions?: () => any;
+  /** Filter chips such as all, unread and mentions; FilterChips. */
+  filters?: () => any;
+  /** Notification rows grouped by day; Card, IconTile, Badge, Divider. */
+  feed?: () => any;
+  /** Shown instead of the feed when nothing matches; EmptyState. */
+  empty?: () => any;
+}
+export const UiPageNotifications: UiVueComponent<UiPageNotificationsProps, UiPageNotificationsSlots>;
+
+/**
+ * Onboarding template: progress block, active step content, setup checklist and a column of tips.
+ * Note: Place inside AppShell; fill only the slots you need.
+ * Note: Keep the active step in your own state; the template does not switch steps. Steps and checklist share the main column, tips go to the side and stack below it on narrow screens.
+ */
+export interface UiPageOnboardingProps {
+  /**
+   * Page heading. The built-in header renders only when title is set and the header slot is empty.
+   * @remarks Forwarded to the inner element.
+   */
+  title?: string;
+  /**
+   * Caption under the heading.
+   * @remarks Forwarded to the inner element.
+   */
+  subtitle?: string;
+  /**
+   * Breadcrumb trail above the title.
+   * @remarks Forwarded to the inner element.
+   */
+  crumbs?: { label: string; href?: string }[];
+}
+export interface UiPageOnboardingSlots {
+  /** Custom page header; replaces the built-in title/subtitle/crumbs header. */
+  header?: () => any;
+  /** Buttons on the right of the built-in header. With a title they sit beside it; without a title they render alone, right-aligned (unless the header slot is filled). */
+  actions?: () => any;
+  /** Stepper and a completion bar above the content; Stepper, Progress. */
+  progress?: () => any;
+  /** Content of the active step; Card with form fields. */
+  steps?: () => any;
+  /** Remaining setup tasks; Card with Checkbox rows. */
+  checklist?: () => any;
+  /** Side column with help cards; Card, IconTile, Button. */
+  tips?: () => any;
+}
+export const UiPageOnboarding: UiVueComponent<UiPageOnboardingProps, UiPageOnboardingSlots>;
+
 /**
  * Order/booking details template: status chips, items table, timeline and side info cards.
  * Note: Place inside AppShell; fill only the slots you need.