@ziyarago/ui 0.7.0 → 0.8.0

package/src/react/index.js

@@ -199,6 +199,12 @@ export const UiPageAccount = C.PageAccount;
 export const UiPagePricing = C.PagePricing;
 export const UiPageFaq = C.PageFaq;
 export const UiPageAnalytics = C.PageAnalytics;
+export const UiPageCalendar = C.PageCalendar;
+export const UiPageKanban = C.PageKanban;
+export const UiPageBilling = C.PageBilling;
+export const UiPageTeam = C.PageTeam;
+export const UiPageIntegrations = C.PageIntegrations;
+export const UiPageSearch = C.PageSearch;
 export const UiPageNotifications = C.PageNotifications;
 export const UiPageInbox = C.PageInbox;
 export const UiPageCheckout = C.PageCheckout;

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, 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 { 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, PageCalendar: UiPageCalendar, PageKanban: UiPageKanban, PageBilling: UiPageBilling, PageTeam: UiPageTeam, PageIntegrations: UiPageIntegrations, PageSearch: UiPageSearch, 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

@@ -3240,6 +3240,66 @@ export interface UiPageAuthProps {
 }
 export const UiPageAuth: ComponentType<UiPageAuthProps>;
 
+/**
+ * Billing template: current plan, usage meters, invoices, payment methods and an upgrade card.
+ * Note: Place inside AppShell; fill only the slots you need.
+ * Note: Plan, usage and invoices share the main column; methods and upgrade form the side column.
+ */
+export interface UiPageBillingProps {
+  /**
+   * 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;
+  /**
+   * Current plan; Card with Badge and Buttons.
+   * @slot plan (React: pass as a prop)
+   */
+  plan?: ReactNode;
+  /**
+   * Usage meters; Progress.
+   * @slot usage (React: pass as a prop)
+   */
+  usage?: ReactNode;
+  /**
+   * Invoices; DataTable.
+   * @slot invoices (React: pass as a prop)
+   */
+  invoices?: ReactNode;
+  /**
+   * Saved cards; Card, IconTile, Badge.
+   * @slot methods (React: pass as a prop)
+   */
+  methods?: ReactNode;
+  /**
+   * Upgrade call to action; Card variant="inverse" or PricingCard.
+   * @slot upgrade (React: pass as a prop)
+   */
+  upgrade?: ReactNode;
+  children?: ReactNode;
+}
+export const UiPageBilling: ComponentType<UiPageBillingProps>;
+
 /**
  * Bookings list template: stats, toolbar, bulk-action bar, table and pagination.
  * Note: Place inside AppShell; fill only the slots you need.
@@ -3299,6 +3359,61 @@ export interface UiPageBookingsProps {
 }
 export const UiPageBookings: ComponentType<UiPageBookingsProps>;
 
+/**
+ * Calendar template: view switch, time grid, mini calendar and event details.
+ * Note: Place inside AppShell; fill only the slots you need.
+ * Note: The grid sits beside the mini calendar and details; they stack under 860 px.
+ */
+export interface UiPageCalendarProps {
+  /**
+   * 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;
+  /**
+   * SegmentedControl, Button, IconButton.
+   * @slot toolbar (React: pass as a prop)
+   */
+  toolbar?: ReactNode;
+  /**
+   * Time grid with events; Card with custom grid, or CalendarView for the month.
+   * @slot grid (React: pass as a prop)
+   */
+  grid?: ReactNode;
+  /**
+   * Month picker; Calendar.
+   * @slot mini (React: pass as a prop)
+   */
+  mini?: ReactNode;
+  /**
+   * Selected event; Card, Descriptions, Avatar, Button.
+   * @slot details (React: pass as a prop)
+   */
+  details?: ReactNode;
+  children?: ReactNode;
+}
+export const UiPageCalendar: ComponentType<UiPageCalendarProps>;
+
 /**
  * Catalog template with a filter sidebar and a card grid (hotels, tours).
  * Note: Place inside AppShell; fill only the slots you need.
@@ -3778,6 +3893,111 @@ export interface UiPageInboxProps {
 }
 export const UiPageInbox: ComponentType<UiPageInboxProps>;
 
+/**
+ * Integrations template: connection cards, API keys and webhooks.
+ * Note: Place inside AppShell; fill only the slots you need.
+ * Note: Keys and webhooks share a row and wrap on narrow screens.
+ */
+export interface UiPageIntegrationsProps {
+  /**
+   * 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;
+  /**
+   * SearchInput, FilterChips.
+   * @slot filters (React: pass as a prop)
+   */
+  filters?: ReactNode;
+  /**
+   * IntegrationCard grid.
+   * @slot connections (React: pass as a prop)
+   */
+  connections?: ReactNode;
+  /**
+   * Keys; DataTable with CopyButton and IconButton.
+   * @slot keys (React: pass as a prop)
+   */
+  keys?: ReactNode;
+  /**
+   * Webhooks list; Card, Switch, Chip.
+   * @slot webhooks (React: pass as a prop)
+   */
+  webhooks?: ReactNode;
+  children?: ReactNode;
+}
+export const UiPageIntegrations: ComponentType<UiPageIntegrationsProps>;
+
+/**
+ * Kanban template: filters, task board columns and a card detail panel.
+ * Note: Place inside AppShell; fill only the slots you need.
+ * Note: Board scrolls horizontally inside its area; detail goes below it under 860 px.
+ */
+export interface UiPageKanbanProps {
+  /**
+   * 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;
+  /**
+   * SearchInput, FilterChips, Select.
+   * @slot filters (React: pass as a prop)
+   */
+  filters?: ReactNode;
+  /**
+   * Columns with cards; KanbanColumn, KanbanCard.
+   * @slot board (React: pass as a prop)
+   */
+  board?: ReactNode;
+  /**
+   * Selected card; Card, Descriptions, Checkbox, Timeline.
+   * @slot detail (React: pass as a prop)
+   */
+  detail?: ReactNode;
+  children?: ReactNode;
+}
+export const UiPageKanban: ComponentType<UiPageKanbanProps>;
+
 /**
  * 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.
@@ -4178,6 +4398,61 @@ export interface UiPageProfileProps {
 }
 export const UiPageProfile: ComponentType<UiPageProfileProps>;
 
+/**
+ * Search template: query field, filter sidebar, result groups and an empty state.
+ * Note: Place inside AppShell; fill only the slots you need.
+ * Note: Filters sit left of the results and stack above them under 860 px. Fill empty only when there are no results.
+ */
+export interface UiPageSearchProps {
+  /**
+   * 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;
+  /**
+   * SearchInput, Tabs.
+   * @slot search (React: pass as a prop)
+   */
+  search?: ReactNode;
+  /**
+   * Filters; Card, Checkbox, Select.
+   * @slot filters (React: pass as a prop)
+   */
+  filters?: ReactNode;
+  /**
+   * Result groups; Card, Chip, Divider.
+   * @slot results (React: pass as a prop)
+   */
+  results?: ReactNode;
+  /**
+   * Shown only when there are no results; EmptyState.
+   * @slot empty (React: pass as a prop)
+   */
+  empty?: ReactNode;
+  children?: ReactNode;
+}
+export const UiPageSearch: ComponentType<UiPageSearchProps>;
+
 /**
  * Settings template with a section sub-navigation and stacked settings sections.
  * Note: Place inside AppShell; fill only the slots you need.
@@ -4302,6 +4577,61 @@ export interface UiPageStatusProps {
 }
 export const UiPageStatus: ComponentType<UiPageStatusProps>;
 
+/**
+ * Team template: member stats, members table, roles and permissions matrix, and an invite form.
+ * Note: Place inside AppShell; fill only the slots you need.
+ * Note: Members and roles share the main column; the invite form is the side column.
+ */
+export interface UiPageTeamProps {
+  /**
+   * 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;
+  /**
+   * Counters; KpiTile, StatsCard.
+   * @slot stats (React: pass as a prop)
+   */
+  stats?: ReactNode;
+  /**
+   * Members; DataTable with UserCell, Select, Badge.
+   * @slot members (React: pass as a prop)
+   */
+  members?: ReactNode;
+  /**
+   * Permissions matrix; DataTable with Checkbox cells.
+   * @slot roles (React: pass as a prop)
+   */
+  roles?: ReactNode;
+  /**
+   * Invite form; Card, TextField, Select, Button.
+   * @slot invite (React: pass as a prop)
+   */
+  invite?: ReactNode;
+  children?: ReactNode;
+}
+export const UiPageTeam: ComponentType<UiPageTeamProps>;
+
 /**
  * User or customer list template: stats, filters, toolbar, table and a right-hand add/edit drawer.
  * Note: Place inside AppShell; fill only the slots you need.

package/types/vue-global.d.ts

@@ -104,7 +104,9 @@ declare module 'vue' {
     UiPageAccount: typeof Ui.UiPageAccount;
     UiPageAnalytics: typeof Ui.UiPageAnalytics;
     UiPageAuth: typeof Ui.UiPageAuth;
+    UiPageBilling: typeof Ui.UiPageBilling;
     UiPageBookings: typeof Ui.UiPageBookings;
+    UiPageCalendar: typeof Ui.UiPageCalendar;
     UiPageCatalog: typeof Ui.UiPageCatalog;
     UiPageCheckout: typeof Ui.UiPageCheckout;
     UiPageCrm: typeof Ui.UiPageCrm;
@@ -114,6 +116,8 @@ declare module 'vue' {
     UiPageForm: typeof Ui.UiPageForm;
     UiPageHeader: typeof Ui.UiPageHeader;
     UiPageInbox: typeof Ui.UiPageInbox;
+    UiPageIntegrations: typeof Ui.UiPageIntegrations;
+    UiPageKanban: typeof Ui.UiPageKanban;
     UiPageLanding: typeof Ui.UiPageLanding;
     UiPageNotifications: typeof Ui.UiPageNotifications;
     UiPageOnboarding: typeof Ui.UiPageOnboarding;
@@ -121,8 +125,10 @@ declare module 'vue' {
     UiPagePatterns: typeof Ui.UiPagePatterns;
     UiPagePricing: typeof Ui.UiPagePricing;
     UiPageProfile: typeof Ui.UiPageProfile;
+    UiPageSearch: typeof Ui.UiPageSearch;
     UiPageSettings: typeof Ui.UiPageSettings;
     UiPageStatus: typeof Ui.UiPageStatus;
+    UiPageTeam: typeof Ui.UiPageTeam;
     UiPageUserList: typeof Ui.UiPageUserList;
     UiPagination: typeof Ui.UiPagination;
     UiPasswordInput: typeof Ui.UiPasswordInput;

package/types/vue.d.ts

@@ -3315,6 +3315,46 @@ export interface UiPageAuthSlots {
 }
 export const UiPageAuth: UiVueComponent<UiPageAuthProps, UiPageAuthSlots>;
 
+/**
+ * Billing template: current plan, usage meters, invoices, payment methods and an upgrade card.
+ * Note: Place inside AppShell; fill only the slots you need.
+ * Note: Plan, usage and invoices share the main column; methods and upgrade form the side column.
+ */
+export interface UiPageBillingProps {
+  /**
+   * 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 UiPageBillingSlots {
+  /** 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;
+  /** Current plan; Card with Badge and Buttons. */
+  plan?: () => any;
+  /** Usage meters; Progress. */
+  usage?: () => any;
+  /** Invoices; DataTable. */
+  invoices?: () => any;
+  /** Saved cards; Card, IconTile, Badge. */
+  methods?: () => any;
+  /** Upgrade call to action; Card variant="inverse" or PricingCard. */
+  upgrade?: () => any;
+}
+export const UiPageBilling: UiVueComponent<UiPageBillingProps, UiPageBillingSlots>;
+
 /**
  * Bookings list template: stats, toolbar, bulk-action bar, table and pagination.
  * Note: Place inside AppShell; fill only the slots you need.
@@ -3354,6 +3394,44 @@ export interface UiPageBookingsSlots {
 }
 export const UiPageBookings: UiVueComponent<UiPageBookingsProps, UiPageBookingsSlots>;
 
+/**
+ * Calendar template: view switch, time grid, mini calendar and event details.
+ * Note: Place inside AppShell; fill only the slots you need.
+ * Note: The grid sits beside the mini calendar and details; they stack under 860 px.
+ */
+export interface UiPageCalendarProps {
+  /**
+   * 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 UiPageCalendarSlots {
+  /** 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;
+  /** SegmentedControl, Button, IconButton. */
+  toolbar?: () => any;
+  /** Time grid with events; Card with custom grid, or CalendarView for the month. */
+  grid?: () => any;
+  /** Month picker; Calendar. */
+  mini?: () => any;
+  /** Selected event; Card, Descriptions, Avatar, Button. */
+  details?: () => any;
+}
+export const UiPageCalendar: UiVueComponent<UiPageCalendarProps, UiPageCalendarSlots>;
+
 /**
  * Catalog template with a filter sidebar and a card grid (hotels, tours).
  * Note: Place inside AppShell; fill only the slots you need.
@@ -3683,6 +3761,80 @@ export interface UiPageInboxSlots {
 }
 export const UiPageInbox: UiVueComponent<UiPageInboxProps, UiPageInboxSlots>;
 
+/**
+ * Integrations template: connection cards, API keys and webhooks.
+ * Note: Place inside AppShell; fill only the slots you need.
+ * Note: Keys and webhooks share a row and wrap on narrow screens.
+ */
+export interface UiPageIntegrationsProps {
+  /**
+   * 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 UiPageIntegrationsSlots {
+  /** 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;
+  /** SearchInput, FilterChips. */
+  filters?: () => any;
+  /** IntegrationCard grid. */
+  connections?: () => any;
+  /** Keys; DataTable with CopyButton and IconButton. */
+  keys?: () => any;
+  /** Webhooks list; Card, Switch, Chip. */
+  webhooks?: () => any;
+}
+export const UiPageIntegrations: UiVueComponent<UiPageIntegrationsProps, UiPageIntegrationsSlots>;
+
+/**
+ * Kanban template: filters, task board columns and a card detail panel.
+ * Note: Place inside AppShell; fill only the slots you need.
+ * Note: Board scrolls horizontally inside its area; detail goes below it under 860 px.
+ */
+export interface UiPageKanbanProps {
+  /**
+   * 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 UiPageKanbanSlots {
+  /** 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;
+  /** SearchInput, FilterChips, Select. */
+  filters?: () => any;
+  /** Columns with cards; KanbanColumn, KanbanCard. */
+  board?: () => any;
+  /** Selected card; Card, Descriptions, Checkbox, Timeline. */
+  detail?: () => any;
+}
+export const UiPageKanban: UiVueComponent<UiPageKanbanProps, UiPageKanbanSlots>;
+
 /**
  * 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.
@@ -3944,6 +4096,44 @@ export interface UiPageProfileSlots {
 }
 export const UiPageProfile: UiVueComponent<UiPageProfileProps, UiPageProfileSlots>;
 
+/**
+ * Search template: query field, filter sidebar, result groups and an empty state.
+ * Note: Place inside AppShell; fill only the slots you need.
+ * Note: Filters sit left of the results and stack above them under 860 px. Fill empty only when there are no results.
+ */
+export interface UiPageSearchProps {
+  /**
+   * 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 UiPageSearchSlots {
+  /** 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;
+  /** SearchInput, Tabs. */
+  search?: () => any;
+  /** Filters; Card, Checkbox, Select. */
+  filters?: () => any;
+  /** Result groups; Card, Chip, Divider. */
+  results?: () => any;
+  /** Shown only when there are no results; EmptyState. */
+  empty?: () => any;
+}
+export const UiPageSearch: UiVueComponent<UiPageSearchProps, UiPageSearchSlots>;
+
 /**
  * Settings template with a section sub-navigation and stacked settings sections.
  * Note: Place inside AppShell; fill only the slots you need.
@@ -4040,6 +4230,44 @@ export interface UiPageStatusSlots {
 }
 export const UiPageStatus: UiVueComponent<UiPageStatusProps, UiPageStatusSlots>;
 
+/**
+ * Team template: member stats, members table, roles and permissions matrix, and an invite form.
+ * Note: Place inside AppShell; fill only the slots you need.
+ * Note: Members and roles share the main column; the invite form is the side column.
+ */
+export interface UiPageTeamProps {
+  /**
+   * 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 UiPageTeamSlots {
+  /** 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;
+  /** Counters; KpiTile, StatsCard. */
+  stats?: () => any;
+  /** Members; DataTable with UserCell, Select, Badge. */
+  members?: () => any;
+  /** Permissions matrix; DataTable with Checkbox cells. */
+  roles?: () => any;
+  /** Invite form; Card, TextField, Select, Button. */
+  invite?: () => any;
+}
+export const UiPageTeam: UiVueComponent<UiPageTeamProps, UiPageTeamSlots>;
+
 /**
  * User or customer list template: stats, filters, toolbar, table and a right-hand add/edit drawer.
  * Note: Place inside AppShell; fill only the slots you need.