@asdp/ferryui 0.1.0 → 0.1.3

package/dist/index.d.ts

@@ -1,6 +1,24 @@
-import React from 'react';
+import React$1, { ReactNode } from 'react';
+import { CarouselAnnouncerFunction } from '@fluentui/react-components';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { FieldValues, Path, Control } from 'react-hook-form';
 
-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 +29,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 +61,496 @@ 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$1.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$1.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$1.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$1.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$1.FC<CardTicketProps>;
+
+/**
+ * Horizontal ticket card background with decorative perforated edges
+ * Use this for desktop/landscape layouts
+ */
+declare const BackgroundTicketCard: (props: React$1.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$1.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+
+interface ServiceMenuItem {
+    id: string;
+    label: string;
+    logo?: string;
+    description?: string;
+    customStyle?: React$1.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
+     */
+    showDescriptions?: boolean;
+    /**
+     * Custom className for the card
+     */
+    className?: string;
+}
+declare const CardServiceMenu: React$1.FC<CardServiceMenuProps>;
+
+type InputType = 'checkbox' | 'date' | 'datetime-local' | 'email' | 'file' | 'identity' | 'emailOrPhone' | 'number' | 'otp' | 'passport' | 'password' | 'phone' | 'radio' | 'radiobutton' | 'select' | 'switch' | 'tel' | 'text' | 'textarea' | 'time' | 'url';
+interface SelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+interface RadioOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+interface CountryCode {
+    code: string;
+    name: string;
+    dialCode: string;
+    flag?: string;
+    passportRegex?: string;
+}
+interface InputDynamicProps<T extends FieldValues = FieldValues> {
+    name: Path<T>;
+    control: Control<T>;
+    label?: string;
+    type: InputType;
+    placeholder?: string;
+    required?: boolean;
+    disabled?: boolean;
+    options?: SelectOption[] | RadioOption[];
+    multiple?: boolean;
+    accept?: string;
+    rows?: number;
+    min?: number | string;
+    max?: number | string;
+    step?: number | string;
+    isMultiSelect?: boolean;
+    selectScrollbarColor?: string;
+    contentBefore?: React.ReactNode;
+    appearance?: 'outline' | 'underline' | 'filled-darker' | 'filled-lighter' | 'filled-darker-shadow' | 'filled-lighter-shadow';
+    validationRules?: {
+        required?: string | boolean;
+        minLength?: {
+            value: number;
+            message: string;
+        };
+        maxLength?: {
+            value: number;
+            message: string;
+        };
+        pattern?: {
+            value: RegExp;
+            message: string;
+        };
+        min?: {
+            value: number;
+            message: string;
+        };
+        max?: {
+            value: number;
+            message: string;
+        };
+        validate?: (value: any) => string | boolean;
+    };
+    helperText?: string;
+    className?: string;
+    layout?: 'horizontal' | 'vertical';
+    size?: 'small' | 'medium' | 'large';
+    onClick?: () => void;
+    style?: React.CSSProperties;
+    countryCodes?: CountryCode[];
+    defaultCountry?: string;
+    maxLength?: number;
+    autoAdvance?: boolean;
+    otpIndex?: number;
+    hasError?: boolean;
+    autoComplete?: string;
+    onInput?: (e: React.FormEvent<HTMLInputElement>) => void;
+    contentAfter?: React.ReactNode;
+    onChange?: (value: any) => void;
+}
+
+declare function InputDynamic<T extends FieldValues = FieldValues>({ name, control, label, type, placeholder, required, disabled, options, multiple, accept, rows, min, max, step, isMultiSelect, selectScrollbarColor, contentBefore, appearance, validationRules, helperText, className, layout, size, onClick, style, countryCodes, defaultCountry, maxLength, autoAdvance, otpIndex, hasError, autoComplete, onInput, contentAfter, onChange, }: InputDynamicProps<T>): react_jsx_runtime.JSX.Element;
+
+declare const DEFAULT_COUNTRY_CODES: CountryCode[];
+
+/**
+ * Harbor item interface
+ */
+interface HarborItem {
+    /**
+     * Unique identifier for the harbor
+     */
+    id: number;
+    /**
+     * Display name of the harbor
+     */
+    name: string;
+}
+/**
+ * Props for ModalSearchHarbor component
+ */
+interface ModalSearchHarborProps {
+    /**
+     * Whether the modal is open
+     */
+    open: boolean;
+    /**
+     * Callback when modal should close
+     */
+    onClose: () => void;
+    /**
+     * Modal title
+     * @default "Pilih Pelabuhan"
+     */
+    title?: string;
+    /**
+     * Type of modal - origin or destination
+     * @default "origin"
+     */
+    modalType?: 'origin' | 'destination';
+    /**
+     * List of harbors to display
+     */
+    harbors: HarborItem[];
+    /**
+     * List of favorite harbors
+     */
+    favoriteHarbors: HarborItem[];
+    /**
+     * List of last searched harbors
+     */
+    lastSearchedHarbors: HarborItem[];
+    /**
+     * Loading state
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Current search query value
+     */
+    searchQuery: string;
+    /**
+     * Callback when search query changes
+     */
+    onSearchChange: (query: string) => void;
+    /**
+     * Callback when a harbor is selected
+     */
+    onSelectHarbor: (harbor: HarborItem) => void;
+    /**
+     * Callback when favorite is toggled
+     */
+    onToggleFavorite: (harbor: HarborItem) => void;
+    /**
+     * Callback when adding to last searched
+     */
+    onAddLastSearched: (harbor: HarborItem) => void;
+    /**
+     * Callback when removing from last searched
      */
-    buttonText?: string;
+    onRemoveLastSearched: (harborId: number) => void;
     /**
-     * Button click handler (if not provided, uses onClose)
+     * Callback when clearing all last searched
      */
-    onButtonClick?: () => void;
+    onClearLastSearched: () => void;
 }
-declare const ModalRadius: React.FC<ModalRadiusProps>;
+/**
+ * ModalSearchHarbor - A reusable modal component for searching and selecting harbors
+ *
+ * This component provides a searchable modal interface for selecting harbors with features like:
+ * - Search functionality
+ * - Favorite harbors quick access
+ * - Last searched history
+ * - Loading states
+ *
+ * @example
+ * ```tsx
+ * <ModalSearchHarbor
+ *   open={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   title="Pilih Pelabuhan Asal"
+ *   harbors={harborList}
+ *   favoriteHarbors={favorites}
+ *   lastSearchedHarbors={history}
+ *   searchQuery={search}
+ *   onSearchChange={setSearch}
+ *   onSelectHarbor={handleSelect}
+ *   onToggleFavorite={handleToggleFavorite}
+ *   onAddLastSearched={handleAddHistory}
+ *   onRemoveLastSearched={handleRemoveHistory}
+ *   onClearLastSearched={handleClearHistory}
+ * />
+ * ```
+ */
+declare const ModalSearchHarbor: React.FC<ModalSearchHarborProps>;
 
-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, type CountryCode, DEFAULT_COUNTRY_CODES, type HarborItem, InputDynamic, type InputDynamicProps, type InputType, MODAL_PRESETS, ModalIllustration, type ModalIllustrationButton, type ModalIllustrationProps, type ModalPresetKey, ModalSearchHarbor, type ModalSearchHarborProps, type RadioOption, type SelectOption, type ServiceMenuItem, getModalPreset };