@ziyarago/ui 0.9.0 → 0.10.0

package/types/react.d.ts

@@ -2618,6 +2618,11 @@ export interface UiLoginFormProps {
    * @default true
    */
   showForgot?: boolean;
+  /**
+   * Show the "Remember device" checkbox. Hide it when your backend has no such option; the submit payload then keeps remember: true.
+   * @default true
+   */
+  showRemember?: boolean;
   /**
    * Submit button text. Wins over labels.submit.
    * @default Sign in
@@ -3976,6 +3981,71 @@ export interface UiPageFormProps {
 }
 export const UiPageForm: ComponentType<UiPageFormProps>;
 
+/**
+ * Group manager template: trip summary, pilgrims table with document and visa status, bulk actions, rooming and a sticky payments summary.
+ * Note: Place inside AppShell; fill only the slots you need.
+ * Note: The payments card stays visible on the right and goes below the table under 860 px.
+ */
+export interface UiPageGroupManagerProps {
+  /**
+   * 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;
+  /**
+   * Trip header with dates, route and counters; Card, StatStrip, Progress.
+   * @slot trip (React: pass as a prop)
+   */
+  trip?: ReactNode;
+  /**
+   * Search and status filters; SearchInput, FilterChips.
+   * @slot toolbar (React: pass as a prop)
+   */
+  toolbar?: ReactNode;
+  /**
+   * Actions for the selected pilgrims; Button, Badge.
+   * @slot bulk (React: pass as a prop)
+   */
+  bulk?: ReactNode;
+  /**
+   * Pilgrims table with documents and visa; Card, DataTable, Badge.
+   * @slot pilgrims (React: pass as a prop)
+   */
+  pilgrims?: ReactNode;
+  /**
+   * Rooming assignment; Card, RoomGrid.
+   * @slot rooms (React: pass as a prop)
+   */
+  rooms?: ReactNode;
+  /**
+   * Payments summary and manager contact; Card, Progress, ContactPanel.
+   * @slot payments (React: pass as a prop)
+   */
+  payments?: ReactNode;
+  children?: ReactNode;
+}
+export const UiPageGroupManager: ComponentType<UiPageGroupManagerProps>;
+
 /** Page title block with optional breadcrumbs, subtitle and an actions area. */
 export interface UiPageHeaderProps {
   /** Page title (rendered as h1). */
@@ -4168,6 +4238,66 @@ export interface UiPageIntegrationsProps {
 }
 export const UiPageIntegrations: ComponentType<UiPageIntegrationsProps>;
 
+/**
+ * Itinerary template: day tabs, a timeline of stops for the chosen day, transport and hotel blocks and a sticky trip summary card.
+ * Note: Place inside AppShell; fill only the slots you need.
+ * Note: Render only the active day in timeline, transport and hotel. The summary stays visible on the right and goes below the day under 860 px.
+ */
+export interface UiPageItineraryProps {
+  /**
+   * 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;
+  /**
+   * Day switcher; Tabs or PillTabs.
+   * @slot days (React: pass as a prop)
+   */
+  days?: ReactNode;
+  /**
+   * Stops of the active day with times and places; Card, Timeline, StatRow.
+   * @slot timeline (React: pass as a prop)
+   */
+  timeline?: ReactNode;
+  /**
+   * Flights, buses and transfers of the day; Card, StatRow.
+   * @slot transport (React: pass as a prop)
+   */
+  transport?: ReactNode;
+  /**
+   * Where the group stays that night; Card, Badge, IconTile.
+   * @slot hotel (React: pass as a prop)
+   */
+  hotel?: ReactNode;
+  /**
+   * Trip summary; Card, Descriptions, Progress.
+   * @slot summary (React: pass as a prop)
+   */
+  summary?: ReactNode;
+  children?: ReactNode;
+}
+export const UiPageItinerary: ComponentType<UiPageItineraryProps>;
+
 /**
  * Kanban template: filters, task board columns and a card detail panel.
  * Note: Place inside AppShell; fill only the slots you need.
@@ -4615,6 +4745,61 @@ export interface UiPagePatternsProps {
 }
 export const UiPagePatterns: ComponentType<UiPagePatternsProps>;
 
+/**
+ * Prayer times template: a location picker, today's times with the next prayer highlighted, a month table and a sticky Qibla compass.
+ * Note: Place inside AppShell; fill only the slots you need.
+ * Note: The Qibla card stays visible on the right and goes below the times under 860 px.
+ */
+export interface UiPagePrayerProps {
+  /**
+   * 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;
+  /**
+   * City and method pickers; Select, PillSelect, SegmentedControl.
+   * @slot location (React: pass as a prop)
+   */
+  location?: ReactNode;
+  /**
+   * Today's prayers and the countdown to the next one; Card, PrayerTimes.
+   * @slot today (React: pass as a prop)
+   */
+  today?: ReactNode;
+  /**
+   * Prayer times for the whole month; Card, DataTable.
+   * @slot month (React: pass as a prop)
+   */
+  month?: ReactNode;
+  /**
+   * Qibla direction; Card, QiblaCompass.
+   * @slot qibla (React: pass as a prop)
+   */
+  qibla?: ReactNode;
+  children?: ReactNode;
+}
+export const UiPagePrayer: ComponentType<UiPagePrayerProps>;
+
 /**
  * Pricing template: billing-period toggle, plan cards and an FAQ.
  * Note: Place inside AppShell; fill only the slots you need.
@@ -5027,6 +5212,71 @@ export interface UiPageTeamProps {
 }
 export const UiPageTeam: ComponentType<UiPageTeamProps>;
 
+/**
+ * Public tour page: header, gradient gallery area, highlights, itinerary accordion, included and excluded lists, reviews and a sticky price and booking card. Has no shell and follows the theme.
+ * Note: Render the page on its own, without AppShell: it supplies its own width and padding in your layout.
+ * Note: The booking card stays visible on the right and goes below the content under 860 px.
+ */
+export interface UiPageTourPublicProps {
+  /**
+   * 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;
+  /**
+   * Hero area made of gradients or photos; Gallery, Card.
+   * @slot gallery (React: pass as a prop)
+   */
+  gallery?: ReactNode;
+  /**
+   * Key facts and highlights; StatStrip, IconTile.
+   * @slot highlights (React: pass as a prop)
+   */
+  highlights?: ReactNode;
+  /**
+   * Day by day program; Accordion.
+   * @slot itinerary (React: pass as a prop)
+   */
+  itinerary?: ReactNode;
+  /**
+   * What the price includes and excludes; Card, Descriptions.
+   * @slot included (React: pass as a prop)
+   */
+  included?: ReactNode;
+  /**
+   * Pilgrim reviews; Card, Rating, Avatar.
+   * @slot reviews (React: pass as a prop)
+   */
+  reviews?: ReactNode;
+  /**
+   * Price, dates, seats and the booking button; Card, Button.
+   * @slot booking (React: pass as a prop)
+   */
+  booking?: ReactNode;
+  children?: ReactNode;
+}
+export const UiPageTourPublic: ComponentType<UiPageTourPublicProps>;
+
 /**
  * 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.
@@ -5160,6 +5410,21 @@ export interface UiPasswordInputProps {
    * @remarks Forwarded to the inner element.
    */
   error?: string;
+  /**
+   * Adds a red asterisk to the label and the native required attribute.
+   * @default false
+   */
+  required?: boolean;
+  /**
+   * Native name attribute of the input.
+   * @remarks Forwarded to the inner element.
+   */
+  name?: string;
+  /**
+   * Focuses the input on mount.
+   * @remarks Forwarded to the inner element.
+   */
+  autofocus?: boolean;
   /**
    * Native autocomplete token. Use "new-password" on sign-up and password-change forms so managers offer to generate one.
    * @default 'current-password'
@@ -5507,6 +5772,32 @@ export interface UiProgressProps {
 }
 export const UiProgress: ComponentType<UiProgressProps>;
 
+/**
+ * Compass dial with a Kaaba marker pointing to the Qibla and the bearing in degrees below it.
+ * Note: Exposed as role="img" with a label that states the bearing. Compute the bearing and heading yourself (geolocation and DeviceOrientation); the component only draws them.
+ */
+export interface UiQiblaCompassProps {
+  /**
+   * Qibla bearing in degrees clockwise from true north, 0 to 360; other values wrap.
+   * @default 0
+   */
+  bearing: number;
+  /**
+   * Direction the device points to, in degrees. The dial turns against it so the marker follows the real Qibla; 0 keeps north up.
+   * @default 0
+   */
+  heading?: number;
+  /** Optional small caption under the bearing, such as "4 210 km to the Kaaba". */
+  distance?: string;
+  /**
+   * Diameter: xs 120, sm 160, md 200, lg 250, xl 300 px; a number is used as px.
+   * @default 'md'
+   */
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number;
+  children?: ReactNode;
+}
+export const UiQiblaCompass: ComponentType<UiQiblaCompassProps>;
+
 /** Group of radio options with optional hints. Use for a short single-choice list that should stay visible. */
 export interface UiRadioGroupProps {
   /** Value of the selected option. */

package/types/vue-global.d.ts

@@ -117,10 +117,12 @@ declare module 'vue' {
     UiPageDetail: typeof Ui.UiPageDetail;
     UiPageFaq: typeof Ui.UiPageFaq;
     UiPageForm: typeof Ui.UiPageForm;
+    UiPageGroupManager: typeof Ui.UiPageGroupManager;
     UiPageHeader: typeof Ui.UiPageHeader;
     UiPageHelp: typeof Ui.UiPageHelp;
     UiPageInbox: typeof Ui.UiPageInbox;
     UiPageIntegrations: typeof Ui.UiPageIntegrations;
+    UiPageItinerary: typeof Ui.UiPageItinerary;
     UiPageKanban: typeof Ui.UiPageKanban;
     UiPageLanding: typeof Ui.UiPageLanding;
     UiPageLegal: typeof Ui.UiPageLegal;
@@ -129,6 +131,7 @@ declare module 'vue' {
     UiPageOnboarding: typeof Ui.UiPageOnboarding;
     UiPageOrder: typeof Ui.UiPageOrder;
     UiPagePatterns: typeof Ui.UiPagePatterns;
+    UiPagePrayer: typeof Ui.UiPagePrayer;
     UiPagePricing: typeof Ui.UiPagePricing;
     UiPageProfile: typeof Ui.UiPageProfile;
     UiPageSearch: typeof Ui.UiPageSearch;
@@ -136,6 +139,7 @@ declare module 'vue' {
     UiPageStates: typeof Ui.UiPageStates;
     UiPageStatus: typeof Ui.UiPageStatus;
     UiPageTeam: typeof Ui.UiPageTeam;
+    UiPageTourPublic: typeof Ui.UiPageTourPublic;
     UiPageUserList: typeof Ui.UiPageUserList;
     UiPagination: typeof Ui.UiPagination;
     UiPasswordInput: typeof Ui.UiPasswordInput;
@@ -151,6 +155,7 @@ declare module 'vue' {
     UiPricingCard: typeof Ui.UiPricingCard;
     UiProfileHeader: typeof Ui.UiProfileHeader;
     UiProgress: typeof Ui.UiProgress;
+    UiQiblaCompass: typeof Ui.UiQiblaCompass;
     UiRadioGroup: typeof Ui.UiRadioGroup;
     UiRamadanTracker: typeof Ui.UiRamadanTracker;
     UiRangeCalendar: typeof Ui.UiRangeCalendar;

package/types/vue.d.ts

@@ -2728,6 +2728,11 @@ export interface UiLoginFormProps {
    * @default true
    */
   showForgot?: boolean;
+  /**
+   * Show the "Remember device" checkbox. Hide it when your backend has no such option; the submit payload then keeps remember: true.
+   * @default true
+   */
+  showRemember?: boolean;
   /**
    * Submit button text. Wins over labels.submit.
    * @default Sign in
@@ -3815,6 +3820,48 @@ export interface UiPageFormSlots {
 }
 export const UiPageForm: UiVueComponent<UiPageFormProps, UiPageFormSlots>;
 
+/**
+ * Group manager template: trip summary, pilgrims table with document and visa status, bulk actions, rooming and a sticky payments summary.
+ * Note: Place inside AppShell; fill only the slots you need.
+ * Note: The payments card stays visible on the right and goes below the table under 860 px.
+ */
+export interface UiPageGroupManagerProps {
+  /**
+   * 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 UiPageGroupManagerSlots {
+  /** 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;
+  /** Trip header with dates, route and counters; Card, StatStrip, Progress. */
+  trip?: () => any;
+  /** Search and status filters; SearchInput, FilterChips. */
+  toolbar?: () => any;
+  /** Actions for the selected pilgrims; Button, Badge. */
+  bulk?: () => any;
+  /** Pilgrims table with documents and visa; Card, DataTable, Badge. */
+  pilgrims?: () => any;
+  /** Rooming assignment; Card, RoomGrid. */
+  rooms?: () => any;
+  /** Payments summary and manager contact; Card, Progress, ContactPanel. */
+  payments?: () => any;
+}
+export const UiPageGroupManager: UiVueComponent<UiPageGroupManagerProps, UiPageGroupManagerSlots>;
+
 /** Page title block with optional breadcrumbs, subtitle and an actions area. */
 export interface UiPageHeaderProps {
   /** Page title (rendered as h1). */
@@ -3951,6 +3998,46 @@ export interface UiPageIntegrationsSlots {
 }
 export const UiPageIntegrations: UiVueComponent<UiPageIntegrationsProps, UiPageIntegrationsSlots>;
 
+/**
+ * Itinerary template: day tabs, a timeline of stops for the chosen day, transport and hotel blocks and a sticky trip summary card.
+ * Note: Place inside AppShell; fill only the slots you need.
+ * Note: Render only the active day in timeline, transport and hotel. The summary stays visible on the right and goes below the day under 860 px.
+ */
+export interface UiPageItineraryProps {
+  /**
+   * 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 UiPageItinerarySlots {
+  /** 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;
+  /** Day switcher; Tabs or PillTabs. */
+  days?: () => any;
+  /** Stops of the active day with times and places; Card, Timeline, StatRow. */
+  timeline?: () => any;
+  /** Flights, buses and transfers of the day; Card, StatRow. */
+  transport?: () => any;
+  /** Where the group stays that night; Card, Badge, IconTile. */
+  hotel?: () => any;
+  /** Trip summary; Card, Descriptions, Progress. */
+  summary?: () => any;
+}
+export const UiPageItinerary: UiVueComponent<UiPageItineraryProps, UiPageItinerarySlots>;
+
 /**
  * Kanban template: filters, task board columns and a card detail panel.
  * Note: Place inside AppShell; fill only the slots you need.
@@ -4248,6 +4335,44 @@ export interface UiPagePatternsSlots {
 }
 export const UiPagePatterns: UiVueComponent<UiPagePatternsProps, UiPagePatternsSlots>;
 
+/**
+ * Prayer times template: a location picker, today's times with the next prayer highlighted, a month table and a sticky Qibla compass.
+ * Note: Place inside AppShell; fill only the slots you need.
+ * Note: The Qibla card stays visible on the right and goes below the times under 860 px.
+ */
+export interface UiPagePrayerProps {
+  /**
+   * 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 UiPagePrayerSlots {
+  /** 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;
+  /** City and method pickers; Select, PillSelect, SegmentedControl. */
+  location?: () => any;
+  /** Today's prayers and the countdown to the next one; Card, PrayerTimes. */
+  today?: () => any;
+  /** Prayer times for the whole month; Card, DataTable. */
+  month?: () => any;
+  /** Qibla direction; Card, QiblaCompass. */
+  qibla?: () => any;
+}
+export const UiPagePrayer: UiVueComponent<UiPagePrayerProps, UiPagePrayerSlots>;
+
 /**
  * Pricing template: billing-period toggle, plan cards and an FAQ.
  * Note: Place inside AppShell; fill only the slots you need.
@@ -4538,6 +4663,48 @@ export interface UiPageTeamSlots {
 }
 export const UiPageTeam: UiVueComponent<UiPageTeamProps, UiPageTeamSlots>;
 
+/**
+ * Public tour page: header, gradient gallery area, highlights, itinerary accordion, included and excluded lists, reviews and a sticky price and booking card. Has no shell and follows the theme.
+ * Note: Render the page on its own, without AppShell: it supplies its own width and padding in your layout.
+ * Note: The booking card stays visible on the right and goes below the content under 860 px.
+ */
+export interface UiPageTourPublicProps {
+  /**
+   * 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 UiPageTourPublicSlots {
+  /** 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;
+  /** Hero area made of gradients or photos; Gallery, Card. */
+  gallery?: () => any;
+  /** Key facts and highlights; StatStrip, IconTile. */
+  highlights?: () => any;
+  /** Day by day program; Accordion. */
+  itinerary?: () => any;
+  /** What the price includes and excludes; Card, Descriptions. */
+  included?: () => any;
+  /** Pilgrim reviews; Card, Rating, Avatar. */
+  reviews?: () => any;
+  /** Price, dates, seats and the booking button; Card, Button. */
+  booking?: () => any;
+}
+export const UiPageTourPublic: UiVueComponent<UiPageTourPublicProps, UiPageTourPublicSlots>;
+
 /**
  * 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.
@@ -4651,6 +4818,21 @@ export interface UiPasswordInputProps {
    * @remarks Forwarded to the inner element.
    */
   error?: string;
+  /**
+   * Adds a red asterisk to the label and the native required attribute.
+   * @default false
+   */
+  required?: boolean;
+  /**
+   * Native name attribute of the input.
+   * @remarks Forwarded to the inner element.
+   */
+  name?: string;
+  /**
+   * Focuses the input on mount.
+   * @remarks Forwarded to the inner element.
+   */
+  autofocus?: boolean;
   /**
    * Native autocomplete token. Use "new-password" on sign-up and password-change forms so managers offer to generate one.
    * @default 'current-password'
@@ -5016,6 +5198,32 @@ export interface UiProgressProps {
 export interface UiProgressSlots {}
 export const UiProgress: UiVueComponent<UiProgressProps, UiProgressSlots>;
 
+/**
+ * Compass dial with a Kaaba marker pointing to the Qibla and the bearing in degrees below it.
+ * Note: Exposed as role="img" with a label that states the bearing. Compute the bearing and heading yourself (geolocation and DeviceOrientation); the component only draws them.
+ */
+export interface UiQiblaCompassProps {
+  /**
+   * Qibla bearing in degrees clockwise from true north, 0 to 360; other values wrap.
+   * @default 0
+   */
+  bearing: number;
+  /**
+   * Direction the device points to, in degrees. The dial turns against it so the marker follows the real Qibla; 0 keeps north up.
+   * @default 0
+   */
+  heading?: number;
+  /** Optional small caption under the bearing, such as "4 210 km to the Kaaba". */
+  distance?: string;
+  /**
+   * Diameter: xs 120, sm 160, md 200, lg 250, xl 300 px; a number is used as px.
+   * @default 'md'
+   */
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number;
+}
+export interface UiQiblaCompassSlots {}
+export const UiQiblaCompass: UiVueComponent<UiQiblaCompassProps, UiQiblaCompassSlots>;
+
 /** Group of radio options with optional hints. Use for a short single-choice list that should stay visible. */
 export interface UiRadioGroupProps {
   /** Value of the selected option. */