@asdp/ferryui 0.1.1 → 0.1.4

package/dist/index.d.mts

@@ -1,6 +1,7 @@
-import React, { ReactNode } 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 ModalIllustrationButton {
     /**
@@ -69,7 +70,7 @@ interface ModalIllustrationProps {
      */
     secondaryButton?: ModalIllustrationButton;
 }
-declare const ModalIllustration: React.FC<ModalIllustrationProps>;
+declare const ModalIllustration: React$1.FC<ModalIllustrationProps>;
 
 /**
  * Preset configurations for common modal use cases
@@ -178,7 +179,7 @@ interface CarouselWithCustomNavProps {
      */
     cardFocus?: boolean;
 }
-declare const CarouselWithCustomNav: React.FC<CarouselWithCustomNavProps>;
+declare const CarouselWithCustomNav: React$1.FC<CarouselWithCustomNavProps>;
 
 interface CardPromoProps {
     /**
@@ -211,7 +212,7 @@ interface CardPromoProps {
      */
     onClick?: () => void;
 }
-declare const CardPromo: React.FC<CardPromoProps>;
+declare const CardPromo: React$1.FC<CardPromoProps>;
 
 interface CardBannerProps {
     /**
@@ -235,7 +236,7 @@ interface CardBannerProps {
      */
     onClick?: () => void;
 }
-declare const CardBanner: React.FC<CardBannerProps>;
+declare const CardBanner: React$1.FC<CardBannerProps>;
 
 interface CardTicketButton {
     label: string;
@@ -312,26 +313,26 @@ interface CardTicketProps {
      */
     facilityIcon?: JSX.Element;
 }
-declare const CardTicket: React.FC<CardTicketProps>;
+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.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+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.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+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.CSSProperties;
+    customStyle?: React$1.CSSProperties;
 }
 interface CardServiceMenuProps {
     /**
@@ -356,6 +357,200 @@ interface CardServiceMenuProps {
      */
     className?: string;
 }
-declare const CardServiceMenu: React.FC<CardServiceMenuProps>;
+declare const CardServiceMenu: React$1.FC<CardServiceMenuProps>;
 
-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 };
+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
+     */
+    onRemoveLastSearched: (harborId: number) => void;
+    /**
+     * Callback when clearing all last searched
+     */
+    onClearLastSearched: () => void;
+}
+/**
+ * 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 { 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 };

package/dist/index.d.ts

@@ -1,6 +1,7 @@
-import React, { ReactNode } 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 ModalIllustrationButton {
     /**
@@ -69,7 +70,7 @@ interface ModalIllustrationProps {
      */
     secondaryButton?: ModalIllustrationButton;
 }
-declare const ModalIllustration: React.FC<ModalIllustrationProps>;
+declare const ModalIllustration: React$1.FC<ModalIllustrationProps>;
 
 /**
  * Preset configurations for common modal use cases
@@ -178,7 +179,7 @@ interface CarouselWithCustomNavProps {
      */
     cardFocus?: boolean;
 }
-declare const CarouselWithCustomNav: React.FC<CarouselWithCustomNavProps>;
+declare const CarouselWithCustomNav: React$1.FC<CarouselWithCustomNavProps>;
 
 interface CardPromoProps {
     /**
@@ -211,7 +212,7 @@ interface CardPromoProps {
      */
     onClick?: () => void;
 }
-declare const CardPromo: React.FC<CardPromoProps>;
+declare const CardPromo: React$1.FC<CardPromoProps>;
 
 interface CardBannerProps {
     /**
@@ -235,7 +236,7 @@ interface CardBannerProps {
      */
     onClick?: () => void;
 }
-declare const CardBanner: React.FC<CardBannerProps>;
+declare const CardBanner: React$1.FC<CardBannerProps>;
 
 interface CardTicketButton {
     label: string;
@@ -312,26 +313,26 @@ interface CardTicketProps {
      */
     facilityIcon?: JSX.Element;
 }
-declare const CardTicket: React.FC<CardTicketProps>;
+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.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+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.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+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.CSSProperties;
+    customStyle?: React$1.CSSProperties;
 }
 interface CardServiceMenuProps {
     /**
@@ -356,6 +357,200 @@ interface CardServiceMenuProps {
      */
     className?: string;
 }
-declare const CardServiceMenu: React.FC<CardServiceMenuProps>;
+declare const CardServiceMenu: React$1.FC<CardServiceMenuProps>;
 
-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 };
+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
+     */
+    onRemoveLastSearched: (harborId: number) => void;
+    /**
+     * Callback when clearing all last searched
+     */
+    onClearLastSearched: () => void;
+}
+/**
+ * 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 { 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 };