@lmy54321/design-system 1.0.0

package/dist/index.d.mts

@@ -0,0 +1,388 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import React__default from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import { ClassValue } from 'clsx';
+
+type BtnSize = "xsmall" | "small" | "middle" | "large";
+type BtnVariant = "primary" | "secondary" | "outline" | "ghost";
+type BtnProps = {
+    size?: BtnSize;
+    variant?: BtnVariant;
+    label?: string;
+    icon?: React.ReactNode;
+    iconPosition?: "left" | "right";
+    onClick?: () => void;
+    className?: string;
+};
+declare function Btn({ size, // Default to middle if not specified
+variant, label, icon, iconPosition, onClick, className, }: BtnProps): react_jsx_runtime.JSX.Element;
+
+interface SwitchProps {
+    checked: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    className?: string;
+}
+declare function Switch({ checked, onCheckedChange, disabled, className }: SwitchProps): react_jsx_runtime.JSX.Element;
+
+declare function IcPlan({ className }: {
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function IcExpand({ className }: {
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare const tagVariants: (props?: ({
+    variant?: "filled" | "outlined" | null | undefined;
+    size?: "lg" | "md" | "sm" | "xs" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface TagProps extends React__default.HTMLAttributes<HTMLDivElement>, VariantProps<typeof tagVariants> {
+    /** Label text */
+    label: string;
+    /** Custom Left Icon. Pass `null` to hide. Defaults to internal Plan icon if undefined? No, user said "Left icon can be custom... and visible/hidden". I'll make it optional. */
+    icon?: React__default.ReactNode;
+    /** Whether to show the fixed right arrow icon */
+    showArrow?: boolean;
+}
+declare function Tag({ className, variant, size, label, icon, showArrow, onClick, ...props }: TagProps): react_jsx_runtime.JSX.Element;
+
+interface LoadingProps {
+    showClose?: boolean;
+    onClose?: () => void;
+    className?: string;
+}
+declare function Loading({ showClose, onClose, className }: LoadingProps): react_jsx_runtime.JSX.Element;
+
+type SegmentedControlSize = 'large' | 'middle' | 'small';
+interface SegmentedControlProps {
+    value: string;
+    options: string[];
+    onChange: (value: string) => void;
+    size?: SegmentedControlSize;
+    className?: string;
+}
+declare function SegmentedControl({ value, options, onChange, size, className }: SegmentedControlProps): react_jsx_runtime.JSX.Element;
+
+interface StatItem {
+    label: string;
+    value: string;
+    variant?: "primary" | "accent" | "default";
+}
+interface StatGridProps {
+    items: StatItem[];
+    className?: string;
+}
+declare function StatGrid({ items, className }: StatGridProps): react_jsx_runtime.JSX.Element;
+
+type DialogVariant = 'default' | 'warning' | 'image';
+interface DialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    variant?: DialogVariant;
+    title?: string;
+    description?: string;
+    mainActionText?: string;
+    secondaryActionText?: string;
+    imageSrc?: string;
+    onMainAction?: () => void;
+    onSecondaryAction?: () => void;
+    demoMode?: boolean;
+}
+declare function Dialog({ open, onOpenChange, variant, title, description, mainActionText, secondaryActionText, imageSrc, onMainAction, onSecondaryAction, demoMode, }: DialogProps): react_jsx_runtime.JSX.Element | null;
+
+interface ToastProps {
+    /**
+     * The lines of text to display.
+     */
+    lines: string[];
+    /**
+     * Whether to show the icon (checkmark).
+     */
+    showIcon?: boolean;
+    /**
+     * Whether to show the close button.
+     * Ignored if variant is 'action'.
+     */
+    showClose?: boolean;
+    /**
+     * Callback when close button is clicked.
+     */
+    onClose?: () => void;
+    /**
+     * Variant of the toast.
+     * - 'default': Width fits content, centered.
+     * - 'action': Width fills container, used for bottom bar action toasts.
+     */
+    variant?: 'default' | 'action';
+    /**
+     * Text for the action button (only for 'action' variant).
+     */
+    actionText?: string;
+    /**
+     * Callback for the action button.
+     */
+    onAction?: () => void;
+}
+declare function Toast({ lines, showIcon, showClose, onClose, variant, actionText, onAction }: ToastProps): react_jsx_runtime.JSX.Element;
+
+type ActionSheetVariant = 'default' | 'edit' | 'title' | 'selectable';
+interface ActionSheetProps {
+    isOpen?: boolean;
+    onClose?: () => void;
+    demoMode?: boolean;
+    variant?: ActionSheetVariant;
+    className?: string;
+}
+declare function ActionSheet({ isOpen, onClose, demoMode, variant, className }: ActionSheetProps): react_jsx_runtime.JSX.Element | null;
+
+type NotificationVariant = 'success' | 'warning' | 'attention' | 'info';
+interface NotificationAction {
+    label: string;
+    onClick?: () => void;
+    icon?: React__default.ReactNode;
+}
+interface NotificationBarProps {
+    variant?: NotificationVariant;
+    message: string;
+    onClose?: () => void;
+    actions?: NotificationAction[];
+    className?: string;
+}
+declare function NotificationBar({ variant, message, onClose, actions, className }: NotificationBarProps): react_jsx_runtime.JSX.Element;
+
+type BubblePlacement = 'top' | 'bottom' | 'left' | 'right';
+type BubbleAlignment = 'start' | 'center' | 'end';
+interface BubbleTipProps {
+    message?: string;
+    placement?: BubblePlacement;
+    alignment?: BubbleAlignment;
+    showIcon?: boolean;
+    closable?: boolean;
+    onClose?: () => void;
+    className?: string;
+}
+declare function BubbleTip({ message, placement, alignment, showIcon, closable, onClose, className }: BubbleTipProps): react_jsx_runtime.JSX.Element;
+
+interface PushProps {
+    icon?: string;
+    title: string;
+    description: string;
+    actionText?: string;
+    onAction?: () => void;
+    className?: string;
+}
+declare function Push({ icon, title, description, actionText, onAction, className, }: PushProps): react_jsx_runtime.JSX.Element;
+
+type EmptyStateVariant = 'not-logged-in' | 'network-error' | 'generic' | 'no-plan' | 'no-comment' | 'location-related';
+interface EmptyStateProps {
+    variant?: EmptyStateVariant;
+    title?: string;
+    description?: string;
+    className?: string;
+}
+declare function EmptyState({ variant, title, description, className }: EmptyStateProps): react_jsx_runtime.JSX.Element;
+
+type TabId = 'home' | 'explore' | 'plan' | 'me';
+interface BottomNavigationBarProps {
+    activeTab?: TabId;
+    onTabChange?: (id: TabId) => void;
+    className?: string;
+}
+declare function BottomNavigationBar({ activeTab, onTabChange, className }: BottomNavigationBarProps): react_jsx_runtime.JSX.Element;
+
+type ButtonAppearance = 'glass' | 'gray';
+type ToolbarMode = 'left-title' | 'center-title' | 'tabs';
+interface TopToolbarProps {
+    mode?: ToolbarMode;
+    appearance?: ButtonAppearance;
+    title?: string;
+    showTitle?: boolean;
+    showBack?: boolean;
+    onBack?: () => void;
+    rightActionCount?: number;
+    onAction?: (index: number) => void;
+    tabs?: string[];
+    activeTabIndex?: number;
+    onTabChange?: (index: number) => void;
+    className?: string;
+}
+declare function TopToolbar({ mode, appearance, title, showTitle, showBack, rightActionCount, onBack, onAction, tabs, activeTabIndex, onTabChange, className, }: TopToolbarProps): react_jsx_runtime.JSX.Element;
+
+interface BottomSheetProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title?: string;
+    headerDescription?: string;
+    description?: React.ReactNode;
+    mainActionText?: string;
+    secondaryActionText?: string;
+    onMainAction?: () => void;
+    onSecondaryAction?: () => void;
+    children?: React.ReactNode;
+    className?: string;
+    demoMode?: boolean;
+    imageSrc?: string;
+}
+declare function BottomSheet({ open, onOpenChange, title, headerDescription, description, mainActionText, secondaryActionText, onMainAction, onSecondaryAction, children, className, demoMode, imageSrc, }: BottomSheetProps): react_jsx_runtime.JSX.Element;
+interface BottomSheetOptionProps {
+    label: string;
+    selected?: boolean;
+    onClick?: () => void;
+    hasDivider?: boolean;
+}
+declare function BottomSheetOption({ label, selected, onClick, hasDivider }: BottomSheetOptionProps): react_jsx_runtime.JSX.Element;
+type ShareItemType = 'wechat' | 'moments' | 'qq' | 'weibo' | 'qr' | 'tap' | 'add_desk' | 'more';
+interface BottomSheetShareItemProps {
+    type: ShareItemType;
+    label: string;
+    onClick?: () => void;
+}
+declare function BottomSheetShareItem({ type, label, onClick }: BottomSheetShareItemProps): react_jsx_runtime.JSX.Element;
+
+declare const DRAWER_STATES: {
+    SMALL: number;
+    MEDIUM: number;
+    LARGE: number;
+    FULL: number;
+};
+interface DraggablePanelProps {
+    children?: React__default.ReactNode;
+    className?: string;
+    state?: number;
+    onStateChange?: (state: number) => void;
+    fullScreenContent?: React__default.ReactNode;
+    fullScreenTrigger?: (onTrigger: () => void) => React__default.ReactNode;
+    topToolbar?: TopToolbarProps;
+    showTopToolbarInStates?: number[];
+    bottomBar?: React__default.ReactNode;
+}
+declare function DraggablePanel({ children, className, state: controlledState, onStateChange, fullScreenContent, fullScreenTrigger, topToolbar, showTopToolbarInStates, bottomBar }: DraggablePanelProps): react_jsx_runtime.JSX.Element;
+
+type SearchBoxVariant = 'card' | 'map';
+type SearchBoxMode = 'default' | 'scenic' | 'scenic-date';
+interface SearchBoxProps {
+    value?: string;
+    onChange?: (value: string) => void;
+    placeholder?: string;
+    variant?: SearchBoxVariant;
+    mode?: SearchBoxMode;
+    locationLabel?: string;
+    dateRange?: {
+        start: string;
+        end: string;
+    };
+    onBack?: () => void;
+    onSearch?: () => void;
+    onMic?: () => void;
+    onClear?: () => void;
+    className?: string;
+}
+declare function SearchBox({ value, onChange, placeholder, variant, mode, // Default to standard behavior
+locationLabel, dateRange, onBack, onSearch, onMic, onClear, className }: SearchBoxProps): react_jsx_runtime.JSX.Element;
+
+interface POI {
+    id: string;
+    title: string;
+    address: string;
+    tel?: string;
+    category?: string;
+    type?: string;
+    location: {
+        lat: number;
+        lng: number;
+    };
+    _distance?: number;
+    photo?: string;
+}
+interface POIListItemProps {
+    poi: POI;
+    onClick?: () => void;
+    highlighted?: string;
+}
+declare function POIListItem({ poi, onClick, highlighted }: POIListItemProps): react_jsx_runtime.JSX.Element;
+
+interface PoiItemProps {
+    imageUrl: string;
+    title: string;
+    rating: string;
+    distance: string;
+    description: string;
+    className?: string;
+}
+declare function PoiItem({ imageUrl, title, rating, distance, description, className }: PoiItemProps): react_jsx_runtime.JSX.Element;
+
+interface NewsItemProps {
+    title: string;
+    source: string;
+    time: string;
+    category: string;
+    variant?: "primary" | "accent" | "default";
+    className?: string;
+}
+declare function NewsItem({ title, source, time, category, variant, className }: NewsItemProps): react_jsx_runtime.JSX.Element;
+
+type BottomActionMode = 'single' | 'split' | 'weighted';
+type BottomLeftContentType = 'none' | 'search' | 'capsule' | 'capsule-more';
+interface BottomActionButtonsProps {
+    mode: BottomActionMode;
+    leftContent?: BottomLeftContentType;
+    mainText?: string;
+    secondaryText?: string;
+    hasShadow?: boolean;
+    onMainClick?: () => void;
+    onSecondaryClick?: () => void;
+    className?: string;
+}
+declare function BottomActionButtons({ mode, leftContent, mainText, secondaryText, hasShadow, onMainClick, onSecondaryClick, className }: BottomActionButtonsProps): react_jsx_runtime.JSX.Element;
+
+interface BottomToolbarProps {
+    leftMode?: "search" | "capsule" | "capsule-more" | "empty";
+    rightMode?: "dual" | "single";
+    actionSheetVariant?: ActionSheetVariant;
+    rightData?: {
+        primaryLabel?: string;
+        secondaryLabel?: string;
+    };
+    leftData?: {
+        searchText?: string;
+    };
+}
+declare function BottomToolbar({ leftMode, rightMode, actionSheetVariant, rightData, leftData }: BottomToolbarProps): react_jsx_runtime.JSX.Element;
+
+declare global {
+    interface Window {
+        TMap: any;
+    }
+}
+interface TencentMapProps {
+    className?: string;
+    center?: {
+        lat: number;
+        lng: number;
+    };
+    zoom?: number;
+    pitch?: number;
+    rotation?: number;
+    showPois?: boolean;
+    showText?: boolean;
+    roamMode?: 'none' | 'orbit';
+    demoMode?: 'none' | 'route';
+    markers?: Array<{
+        id: string;
+        lat: number;
+        lng: number;
+        name?: string;
+    }>;
+}
+declare function TencentMap({ className, center, zoom, pitch, rotation, showPois, showText, roamMode, demoMode, markers }: TencentMapProps): react_jsx_runtime.JSX.Element;
+
+declare function ImageWithFallback(props: React__default.ImgHTMLAttributes<HTMLImageElement>): react_jsx_runtime.JSX.Element;
+
+declare function TypographyDocs(): react_jsx_runtime.JSX.Element;
+
+declare function GridSystemDocs(): react_jsx_runtime.JSX.Element;
+
+declare function cn(...inputs: ClassValue[]): string;
+
+export { ActionSheet, type ActionSheetVariant, BottomActionButtons, type BottomActionButtonsProps, type BottomActionMode, BottomNavigationBar, BottomSheet, BottomSheetOption, type BottomSheetOptionProps, type BottomSheetProps, BottomSheetShareItem, type BottomSheetShareItemProps, BottomToolbar, type BottomToolbarProps, Btn, type BtnProps, type BtnSize, type BtnVariant, type BubbleAlignment, type BubblePlacement, BubbleTip, DRAWER_STATES, Dialog, type DialogProps, type DialogVariant, DraggablePanel, EmptyState, type EmptyStateProps, type EmptyStateVariant, GridSystemDocs, IcExpand, IcPlan, ImageWithFallback, Loading, type LoadingProps, NewsItem, type NewsItemProps, type NotificationAction, NotificationBar, type NotificationVariant, POIListItem, PoiItem, type PoiItemProps, Push, type PushProps, SearchBox, type SearchBoxMode, type SearchBoxProps, type SearchBoxVariant, SegmentedControl, type SegmentedControlProps, type SegmentedControlSize, type ShareItemType, StatGrid, type StatGridProps, type StatItem, Switch, type SwitchProps, type TabId, Tag, type TagProps, TencentMap, Toast, type ToastProps, type ToolbarMode, TopToolbar, type TopToolbarProps, TypographyDocs, cn };