@asdp/ferryui 0.1.0 → 0.1.1

package/dist/index.d.ts

@@ -1,6 +1,23 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
+import { CarouselAnnouncerFunction } from '@fluentui/react-components';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 
-interface ModalRadiusProps {
+interface ModalIllustrationButton {
+    /**
+     * Button text
+     */
+    text: string;
+    /**
+     * Button click handler
+     */
+    onClick: () => void;
+    /**
+     * Button appearance
+     * @default "primary"
+     */
+    appearance?: 'primary' | 'outline' | 'secondary' | 'subtle' | 'transparent';
+}
+interface ModalIllustrationProps {
     /**
      * Whether the modal is open
      */
@@ -11,22 +28,25 @@ interface ModalRadiusProps {
     onClose: () => void;
     /**
      * Modal title
-     * @default "Anda berada di luar area pemesanan"
      */
-    title?: string;
+    title: string;
     /**
      * Modal message content
-     * @default "Pemesanan tiket tidak dapat dilakukan dari lokasi Anda saat ini..."
+     * Can be a string or React node for more complex content
      */
-    message?: string;
+    message: string | ReactNode;
     /**
      * Image source URL
      * @default "/assets/images/illustrations/radius.svg"
+     * @remarks
+     * When using this component in your application, ensure the asset is available at this path
+     * in your public directory, or provide a custom imageSrc prop pointing to your own image.
+     * The asset is included in the published package at `node_modules/@asdp/ferryui/dist/assets/images/illustrations/`
      */
     imageSrc?: string;
     /**
      * Image alt text
-     * @default "Radius Illustration"
+     * @default "Illustration"
      */
     imageAlt?: string;
     /**
@@ -40,15 +60,302 @@ interface ModalRadiusProps {
      */
     imageHeight?: number;
     /**
-     * Button text
-     * @default "Tutup & Coba Lagi"
+     * Primary button configuration
+     */
+    primaryButton: ModalIllustrationButton;
+    /**
+     * Optional secondary button configuration
+     * If provided, buttons will be displayed side by side
+     */
+    secondaryButton?: ModalIllustrationButton;
+}
+declare const ModalIllustration: React.FC<ModalIllustrationProps>;
+
+/**
+ * Preset configurations for common modal use cases
+ */
+declare const MODAL_PRESETS: {
+    /**
+     * Modal for radius/location restriction
+     */
+    readonly RADIUS: {
+        readonly title: "Anda berada di luar area pemesanan";
+        readonly message: "Pemesanan tiket tidak dapat dilakukan dari lokasi Anda saat ini. Fitur pembatasan wilayah sedang aktif untuk mencegah pemesanan tidak sah.";
+        readonly imageSrc: "/assets/images/illustrations/radius.svg";
+        readonly imageAlt: "Radius Limitation Illustration";
+    };
+    /**
+     * Modal for expired session
+     */
+    readonly SESSION_EXPIRED: {
+        readonly title: "Sesi anda telah berakhir";
+        readonly message: "Waktu sesi Anda telah habis untuk alasan keamanan. Silakan klik tombol dibawah untuk masuk kembali.";
+        readonly imageSrc: "/assets/images/illustrations/sessionexp.svg";
+        readonly imageAlt: "Session Expired Illustration";
+    };
+    /**
+     * Modal for purchase period expired
+     */
+    readonly PURCHASE_PERIOD_EXPIRED: {
+        readonly title: "Waktu pembelian telah berakhir";
+        readonly message: "Pemesanan tiket ditutup 1 jam sebelum jadwal keberangkatan. Silakan pilih jadwal keberangkatan lain yang masih tersedia.";
+        readonly imageSrc: "/assets/images/illustrations/pay.svg";
+        readonly imageAlt: "Purchase Period Expired Illustration";
+    };
+    /**
+     * Modal for transaction limit reached
+     */
+    readonly TRANSACTION_LIMIT: {
+        readonly title: "Anda mencapai batas transaksi tertunda";
+        readonly message: "Anda telah mencapai batas transaksi tertunda. Pemesanan dapat dilakukan kembali setelah transaksi sebelumnya diselesaikan.";
+        readonly imageSrc: "/assets/images/illustrations/mobile-pay.svg";
+        readonly imageAlt: "Transaction Limit Illustration";
+    };
+};
+/**
+ * Type for preset keys
+ */
+type ModalPresetKey = keyof typeof MODAL_PRESETS;
+/**
+ * Helper function to get preset configuration
+ */
+declare const getModalPreset: (presetKey: ModalPresetKey) => Partial<ModalIllustrationProps>;
+
+interface CarouselWithCustomNavProps {
+    /**
+     * Carousel items/children
+     */
+    children: ReactNode;
+    /**
+     * Whether carousel should loop (circular)
+     * @default true
+     */
+    circular?: boolean;
+    /**
+     * Whether carousel is draggable
+     * @default true
+     */
+    draggable?: boolean;
+    /**
+     * Alignment of carousel items
+     * @default "start"
+     */
+    align?: 'start' | 'center' | 'end';
+    /**
+     * Whether to remove whitespace between items
+     * @default false
+     */
+    whitespace?: boolean;
+    /**
+     * Announcement function for accessibility
+     */
+    announcement?: CarouselAnnouncerFunction;
+    /**
+     * Active index (controlled)
+     */
+    activeIndex?: number;
+    /**
+     * Callback when active index changes
+     */
+    onActiveIndexChange?: (index: number) => void;
+    /**
+     * ARIA label for the carousel slider
+     * @default "Carousel"
+     */
+    ariaLabel?: string;
+    /**
+     * Whether to use dark background for navigation
+     * @default true
+     */
+    darkNavBackground?: boolean;
+    /**
+     * Additional className for carousel container
+     */
+    className?: string;
+    /**
+     * Whether to enable card focus mode
+     * @default false
+     */
+    cardFocus?: boolean;
+}
+declare const CarouselWithCustomNav: React.FC<CarouselWithCustomNavProps>;
+
+interface CardPromoProps {
+    /**
+     * Image URL for the promo
+     */
+    imageUrl: string;
+    /**
+     * Promo title/heading
+     */
+    title: string;
+    /**
+     * Promo description/subtitle
+     */
+    description: string;
+    /**
+     * Image alt text
+     * @default "Promo image"
+     */
+    imageAlt?: string;
+    /**
+     * Index of the card (for accessibility)
+     */
+    index?: number;
+    /**
+     * Total number of cards (for accessibility)
+     */
+    totalCards?: number;
+    /**
+     * Click handler for the card
+     */
+    onClick?: () => void;
+}
+declare const CardPromo: React.FC<CardPromoProps>;
+
+interface CardBannerProps {
+    /**
+     * Banner image URL
+     */
+    imageUrl: string;
+    /**
+     * Banner alt text
+     */
+    alt: string;
+    /**
+     * Index of the banner (for accessibility)
+     */
+    index?: number;
+    /**
+     * Total number of banners (for accessibility)
+     */
+    totalBanners?: number;
+    /**
+     * Click handler for the banner
+     */
+    onClick?: () => void;
+}
+declare const CardBanner: React.FC<CardBannerProps>;
+
+interface CardTicketButton {
+    label: string;
+    icon?: JSX.Element;
+    onClick?: () => void;
+}
+interface CardTicketProps {
+    /**
+     * Ship type badge configuration
+     */
+    shipType: {
+        label: string;
+        color: 'brand' | 'danger' | 'important' | 'informative' | 'severe' | 'subtle' | 'success' | 'warning';
+        tooltip?: string;
+    };
+    /**
+     * Logo image source
+     * @default "/assets/logo/asdp-default.svg"
+     */
+    logoSrc?: string;
+    /**
+     * Ship name
+     */
+    shipName: string;
+    /**
+     * Available seats configuration
+     */
+    availableSeats: {
+        count: number;
+        threshold?: number;
+    };
+    /**
+     * Departure information
+     */
+    departure: {
+        day: string;
+        time: string;
+        location: string;
+    };
+    /**
+     * Arrival information
+     */
+    arrival: {
+        day: string;
+        time: string;
+        location: string;
+    };
+    /**
+     * Duration text
+     */
+    duration: string;
+    /**
+     * Middle section action buttons (max 2)
+     */
+    actionButtons?: CardTicketButton[];
+    /**
+     * Price display (formatted string)
+     */
+    price: string;
+    /**
+     * Primary button configuration
+     */
+    primaryButton: CardTicketButton;
+    /**
+     * List of facilities
+     */
+    facilities: string[];
+    /**
+     * Custom icon for ship indicator
+     */
+    shipIcon?: JSX.Element;
+    /**
+     * Custom icon for facilities checkmark
+     */
+    facilityIcon?: JSX.Element;
+}
+declare const CardTicket: React.FC<CardTicketProps>;
+
+/**
+ * Horizontal ticket card background with decorative perforated edges
+ * Use this for desktop/landscape layouts
+ */
+declare const BackgroundTicketCard: (props: React.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+
+/**
+ * Vertical ticket card background with decorative perforated edges
+ * Use this for mobile/portrait layouts
+ */
+declare const BackgroundTicketCardVertical: (props: React.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+
+interface ServiceMenuItem {
+    id: string;
+    label: string;
+    logo?: string;
+    description?: string;
+    customStyle?: React.CSSProperties;
+}
+interface CardServiceMenuProps {
+    /**
+     * Array of menu items to display
+     */
+    items: ServiceMenuItem[];
+    /**
+     * Currently active item ID
+     */
+    activeItemId?: string;
+    /**
+     * Callback when an item is clicked
+     */
+    onItemClick?: (itemId: string) => void;
+    /**
+     * Whether to show descriptions on desktop
+     * @default true
      */
-    buttonText?: string;
+    showDescriptions?: boolean;
     /**
-     * Button click handler (if not provided, uses onClose)
+     * Custom className for the card
      */
-    onButtonClick?: () => void;
+    className?: string;
 }
-declare const ModalRadius: React.FC<ModalRadiusProps>;
+declare const CardServiceMenu: React.FC<CardServiceMenuProps>;
 
-export { ModalRadius, ModalRadius as ModalRadiusDefault, type ModalRadiusProps };
+export { BackgroundTicketCard, BackgroundTicketCardVertical, CardBanner, type CardBannerProps, CardPromo, type CardPromoProps, CardServiceMenu, type CardServiceMenuProps, CardTicket, type CardTicketButton, type CardTicketProps, CarouselWithCustomNav, type CarouselWithCustomNavProps, MODAL_PRESETS, ModalIllustration, type ModalIllustrationButton, type ModalIllustrationProps, type ModalPresetKey, type ServiceMenuItem, getModalPreset };