@drdex0101/water-design-system 1.0.1 → 3.0.0

package/README.md

@@ -12,13 +12,13 @@ A modern React component library built with TypeScript and Vite.
 ## Installation
 
 ```bash
-npm install @jacky-water/water-design-system
+npm install @drdex0101/water-design-system
 ```
 
 ## Usage
 
 ```tsx
-import { Button } from '@jacky-water/water-design-system';
+import { Button } from '@drdex0101/water-design-system';
 
 const App = () => (
   <Button label="Click Me" onClick={() => console.log('Hello!')} />
@@ -44,8 +44,8 @@ To publish a new version:
 1. Update the version in `package.json`.
 2. Push a new tag:
    ```bash
-   git tag v1.0.0
-   git push origin v1.0.0
+   git tag v1.0.1
+   git push origin v1.0.1
    ```
 3. GitHub Actions will automatically build and publish to npm.
 

package/dist/components/Badge/Badge.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+
+export type BadgeType = 'default' | 'positive' | 'warning' | 'error' | 'neutral' | 'outline';
+export interface BadgeProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'> {
+    /** Badge text content */
+    label: string;
+    /** Badge type/variant */
+    type?: BadgeType;
+    /** Show icon on the left side */
+    leftIcon?: React.ReactNode;
+    /** Show icon on the right side */
+    rightIcon?: React.ReactNode;
+    /** Callback when close icon is clicked (shows X icon on right) */
+    onClose?: () => void;
+}
+export declare const Badge: ({ label, type, leftIcon, rightIcon, onClose, style, ...props }: BadgeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Badge/index.d.ts

@@ -0,0 +1 @@
+export * from './Badge';

package/dist/components/BottomNav/BottomNav.d.ts

@@ -0,0 +1,66 @@
+import { default as React } from 'react';
+
+export interface NavItem {
+    /** Unique identifier */
+    id: string;
+    /** Item label */
+    label: string;
+    /** Icon element */
+    icon: React.ReactNode;
+    /** Active icon element (optional, uses icon if not provided) */
+    activeIcon?: React.ReactNode;
+    /** Show notification badge */
+    showBadge?: boolean;
+}
+export interface BottomNavProps {
+    /** Navigation items */
+    items: NavItem[];
+    /** Currently active item ID */
+    activeId?: string;
+    /** Callback when item is selected */
+    onChange?: (id: string) => void;
+    /** Custom style */
+    style?: React.CSSProperties;
+}
+export declare const BottomNav: ({ items, activeId, onChange, style, }: BottomNavProps) => import("react/jsx-runtime").JSX.Element;
+export interface NavMenuItemProps {
+    /** Item label */
+    label: string;
+    /** Icon element */
+    icon: React.ReactNode;
+    /** Whether item is selected */
+    selected?: boolean;
+    /** Show notification badge */
+    showBadge?: boolean;
+    /** Click handler */
+    onClick?: () => void;
+    /** Custom style */
+    style?: React.CSSProperties;
+}
+export declare const NavMenuItem: ({ label, icon, selected, showBadge, onClick, style, }: NavMenuItemProps) => import("react/jsx-runtime").JSX.Element;
+export interface ToolMenuProps {
+    /** Icon element */
+    icon: React.ReactNode;
+    /** Label */
+    label: string;
+    /** Click handler */
+    onClick?: () => void;
+    /** Custom style */
+    style?: React.CSSProperties;
+}
+export declare const ToolMenu: ({ icon, label, onClick, style, }: ToolMenuProps) => import("react/jsx-runtime").JSX.Element;
+export declare const NavHomeIcon: ({ color }: {
+    color?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const NavAIIcon: ({ color }: {
+    color?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const NavEventIcon: ({ color }: {
+    color?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const NavHandRecordIcon: ({ color }: {
+    color?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const NavMoreIcon: ({ color }: {
+    color?: string;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/BottomNav/index.d.ts

@@ -0,0 +1 @@
+export * from './BottomNav';

package/dist/components/BottomSheet/BottomSheet.d.ts

@@ -0,0 +1,47 @@
+import { default as React } from 'react';
+
+export interface BottomSheetProps {
+    /** Whether the sheet is open */
+    open: boolean;
+    /** Callback when sheet should close */
+    onClose?: () => void;
+    /** Sheet title */
+    title?: React.ReactNode;
+    /** Snap points as percentages (e.g., [0.5, 0.9] for 50% and 90% height) */
+    snapPoints?: number[];
+    /** Initial snap point percentage */
+    initialSnapPoint?: number;
+    /** Sheet content */
+    children?: React.ReactNode;
+    /** Custom style */
+    style?: React.CSSProperties;
+}
+export declare const BottomSheet: ({ open, onClose, title, snapPoints, initialSnapPoint, children, style, }: BottomSheetProps) => import("react/jsx-runtime").JSX.Element | null;
+export interface OverlayProps {
+    /** Whether the overlay is visible */
+    visible: boolean;
+    /** Callback when overlay is clicked */
+    onClick?: () => void;
+    /** Children */
+    children?: React.ReactNode;
+    /** Custom style */
+    style?: React.CSSProperties;
+}
+export declare const Overlay: ({ visible, onClick, children, style, }: OverlayProps) => import("react/jsx-runtime").JSX.Element | null;
+export interface SheetTitleProps {
+    /** Title type */
+    type?: 'main' | 'detail' | 'subtitle';
+    /** Title text */
+    children: React.ReactNode;
+    /** Show back button (for detail type) */
+    showBackButton?: boolean;
+    /** Back button click handler */
+    onBack?: () => void;
+    /** Right icon/tool */
+    rightIcon?: React.ReactNode;
+    /** Right text */
+    rightText?: string;
+    /** Custom style */
+    style?: React.CSSProperties;
+}
+export declare const SheetTitle: ({ type, children, showBackButton, onBack, rightIcon, rightText, style, }: SheetTitleProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/BottomSheet/index.d.ts

@@ -0,0 +1 @@
+export * from './BottomSheet';

package/dist/components/Button/Button.d.ts

@@ -1,6 +1,24 @@
 import { default as React } from 'react';
 
+export type ButtonType = 'primary' | 'secondary' | 'outline' | 'warning' | 'call' | 'raise' | 'disabled';
+export type ButtonSize = 'L' | 'M' | 'S';
+export type ButtonShape = 'rounded' | 'full-rounded';
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    label: string;
+    /** Button text content */
+    label?: string;
+    /** Button variant type */
+    variant?: ButtonType;
+    /** Button size */
+    size?: ButtonSize;
+    /** Button shape */
+    shape?: ButtonShape;
+    /** Loading state */
+    loading?: boolean;
+    /** Icon to display on the left */
+    leftIcon?: React.ReactNode;
+    /** Icon to display on the right */
+    rightIcon?: React.ReactNode;
+    /** Children content (alternative to label) */
+    children?: React.ReactNode;
 }
-export declare const Button: ({ label, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Button: ({ label, variant, size, shape, loading, leftIcon, rightIcon, children, disabled, style, onMouseEnter, onMouseLeave, onMouseDown, onMouseUp, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Card/Card.d.ts

@@ -0,0 +1,149 @@
+import { default as React } from 'react';
+
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Card variant */
+    variant?: 'default' | 'outlined' | 'elevated';
+    /** Padding size */
+    padding?: 'none' | 'sm' | 'md' | 'lg';
+    /** Border radius */
+    rounded?: 'sm' | 'md' | 'lg' | 'xl';
+    /** Children */
+    children?: React.ReactNode;
+}
+export declare const Card: ({ variant, padding, rounded, children, style, ...props }: CardProps) => import("react/jsx-runtime").JSX.Element;
+export interface TournamentCardProps {
+    /** Card image URL */
+    imageUrl?: string;
+    /** Badge text */
+    badge?: string;
+    /** Tournament title */
+    title: string;
+    /** Location */
+    location?: string;
+    /** Date range */
+    dateRange?: string;
+    /** Click handler */
+    onClick?: () => void;
+    /** Custom style */
+    style?: React.CSSProperties;
+}
+export declare const TournamentCard: ({ imageUrl, badge, title, location, dateRange, onClick, style, }: TournamentCardProps) => import("react/jsx-runtime").JSX.Element;
+export interface ListItemCardProps {
+    /** Left icon */
+    leftIcon?: React.ReactNode;
+    /** Title */
+    title: string;
+    /** Description */
+    description?: string;
+    /** Right element */
+    rightElement?: React.ReactNode;
+    /** Badge text */
+    badge?: string;
+    /** Badge variant */
+    badgeVariant?: 'default' | 'success' | 'warning' | 'error';
+    /** Credit info */
+    creditInfo?: string;
+    /** Amount info */
+    amount?: string;
+    /** Amount variant */
+    amountVariant?: 'default' | 'positive' | 'negative';
+    /** Additional info (e.g., Buy-in, Cash-out) */
+    additionalInfo?: {
+        label: string;
+        value: string;
+    }[];
+    /** Click handler */
+    onClick?: () => void;
+    /** Selected state */
+    selected?: boolean;
+    /** Custom style */
+    style?: React.CSSProperties;
+}
+export declare const ListItemCard: ({ leftIcon, title, description, rightElement, badge, badgeVariant, creditInfo, amount, amountVariant, additionalInfo, onClick, selected, style, }: ListItemCardProps) => import("react/jsx-runtime").JSX.Element;
+export interface EventCardProps {
+    /** Event ID */
+    id?: number;
+    /** Banner image URL */
+    banner_url?: string | null;
+    /** Event name */
+    event_name: string;
+    /** Event code */
+    event_code: string;
+    /** Start date */
+    date_from?: string;
+    /** End date */
+    date_to?: string;
+    /** Custom date text */
+    dateText?: string;
+    /** Click handler */
+    onClick?: () => void;
+    /** Custom style */
+    style?: React.CSSProperties;
+    /** Custom class name */
+    className?: string;
+}
+export declare const EventCard: ({ banner_url, event_name, event_code, date_from, date_to, dateText, onClick, style, className, }: EventCardProps) => import("react/jsx-runtime").JSX.Element;
+export interface HandRecordCardProps {
+    /** Poker cards */
+    cards?: Array<{
+        suit: 'heart' | 'spade' | 'diamond' | 'club';
+        value: string;
+    }>;
+    /** Title */
+    title: string;
+    /** Subtitle */
+    subtitle?: string;
+    /** Date */
+    date?: string;
+    /** Badge text */
+    badge?: string;
+    /** Badge color */
+    badgeColor?: 'blue' | 'green' | 'red';
+    /** Click handler */
+    onClick?: () => void;
+    /** Custom style */
+    style?: React.CSSProperties;
+}
+export declare const HandRecordCard: ({ cards, title, subtitle, date, badge, badgeColor, onClick, style, }: HandRecordCardProps) => import("react/jsx-runtime").JSX.Element;
+export declare const LocationIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const CalendarIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const FavoriteIcon: ({ filled }: {
+    filled?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+export interface SubEventCardProps {
+    /** Event date (YYYY-MM-DD format) */
+    eventDate: string;
+    /** Start time (HH:mm:ss format) */
+    startTime: string;
+    /** Late registration time (HH:mm:ss format) */
+    lateRegTime?: string;
+    /** Event name */
+    eventName: string;
+    /** Guaranteed prize pool */
+    guaranteedPrizePool?: number;
+    /** Buy-in amount in TWD */
+    buyInTwd?: number | null;
+    /** Blind level time in minutes */
+    blindLevelTime?: number;
+    /** Starting stack */
+    stack?: number;
+    /** Banner image URL */
+    bannerUrl?: string | null;
+    /** Festival name */
+    festivalName?: string;
+    /** Festival ID */
+    festivalId?: number;
+    /** Event sequence number */
+    eventSeq?: number;
+    /** Click handler */
+    onClick?: () => void;
+    /** Whether the event is favorited */
+    isFavorite?: boolean;
+    /** Alias for isFavorite */
+    initialIsFavorite?: boolean;
+    /** Callback when favorite is toggled */
+    onFavoriteToggle?: () => void;
+    /** Custom style */
+    style?: React.CSSProperties;
+}
+export declare const SubEventCard: ({ eventDate, startTime, lateRegTime, eventName, buyInTwd, blindLevelTime, stack, bannerUrl, festivalName, festivalId, eventSeq, onClick, isFavorite, initialIsFavorite, onFavoriteToggle, style, }: SubEventCardProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Card/index.d.ts

@@ -0,0 +1 @@
+export * from './Card';

package/dist/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+
+export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
+    /** Checkbox label text */
+    label?: string;
+    /** Controlled checked state */
+    checked?: boolean;
+    /** Default checked state for uncontrolled usage */
+    defaultChecked?: boolean;
+    /** Callback when checkbox value changes */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+export declare const Checkbox: ({ label, checked, defaultChecked, disabled, onChange, id, style, ...props }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Checkbox/index.d.ts

@@ -0,0 +1 @@
+export * from './Checkbox';

package/dist/components/DatePicker/Calendar.d.ts

@@ -0,0 +1,21 @@
+import { default as React } from 'react';
+
+export interface CalendarProps {
+    /** The currently viewed date (determines the month/year shown) */
+    viewDate: Date;
+    /** Callback when the viewed month/year changes */
+    onViewDateChange: (date: Date) => void;
+    /** The currently selected day (1-31) */
+    selectedDay: number | null;
+    /** Callback when a day is clicked */
+    onDaySelect: (day: number) => void;
+    /** Set of days (1-31) in the current month that have events (to show indicators) */
+    datesWithEvents?: Set<number>;
+    /** Custom style for the container */
+    style?: React.CSSProperties;
+}
+/**
+ * A standalone Calendar component extracted from the MyEventListMobile view.
+ * Displays a monthly calendar grid with navigation and optional event indicators.
+ */
+export declare const Calendar: ({ viewDate, onViewDateChange, selectedDay, onDaySelect, datesWithEvents, style, }: CalendarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/DatePicker/DatePicker.d.ts

@@ -0,0 +1,44 @@
+import { default as React } from 'react';
+
+export interface DatePickerProps {
+    /** Selected start date */
+    selectedStartDate?: Date;
+    /** Selected end date (for range mode) */
+    selectedEndDate?: Date;
+    /** Start time (for details mode) */
+    startTime?: string;
+    /** End time (for details mode) */
+    endTime?: string;
+    /** Callback when date range changes */
+    onDateRangeChange?: (startDate: Date | null, endDate: Date | null) => void;
+    /** Callback when single date is selected (for single mode) */
+    onSingleDateChange?: (date: Date | null) => void;
+    /** Callback when time changes (for details mode) */
+    onTimeChange?: (startTime: string, endTime: string) => void;
+    /** Callback when apply button is clicked */
+    onApply?: () => void;
+    /** Whether the picker is open */
+    isOpen?: boolean;
+    /** Callback when picker should close */
+    onClose?: () => void;
+    /** Picker mode: 'normal' (range), 'single', or 'details' (range + time) */
+    mode?: 'normal' | 'single' | 'details';
+    /** Custom style */
+    style?: React.CSSProperties;
+}
+export declare const DatePicker: ({ selectedStartDate, selectedEndDate, startTime, endTime, onDateRangeChange, onSingleDateChange, onTimeChange, onApply, isOpen, onClose, mode, style, }: DatePickerProps) => import("react/jsx-runtime").JSX.Element | null;
+export interface DatePickerInputProps {
+    /** Selected date or date range text (overrides startDate/endDate display) */
+    value?: string;
+    /** Start date for range selection */
+    startDate?: Date;
+    /** End date for range selection */
+    endDate?: Date;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Click handler */
+    onClick?: () => void;
+    /** Custom style */
+    style?: React.CSSProperties;
+}
+export declare const DatePickerInput: ({ value, startDate, endDate, placeholder, onClick, style, }: DatePickerInputProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/DatePicker/index.d.ts

@@ -0,0 +1,2 @@
+export * from './DatePicker';
+export * from './Calendar';

package/dist/components/Divider/Divider.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+
+export interface DividerProps extends React.HTMLAttributes<HTMLHRElement> {
+    /** Orientation of the divider */
+    orientation?: 'horizontal' | 'vertical';
+    /** Custom color for the divider */
+    color?: string;
+}
+export declare const Divider: ({ orientation, color, style, ...props }: DividerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Divider/index.d.ts

@@ -0,0 +1 @@
+export * from './Divider';

package/dist/components/DropdownMenu/DropdownMenu.d.ts

@@ -0,0 +1,78 @@
+import { default as React } from 'react';
+
+export interface DropdownMenuItem {
+    /** Unique identifier */
+    id: string;
+    /** Item label */
+    label: string;
+    /** Left icon */
+    icon?: React.ReactNode;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Danger/destructive item */
+    danger?: boolean;
+    /** Divider after this item */
+    dividerAfter?: boolean;
+}
+export interface DropdownMenuProps {
+    /** Menu items */
+    items: DropdownMenuItem[];
+    /** Callback when item is selected */
+    onSelect?: (id: string) => void;
+    /** Currently selected item ID */
+    selectedId?: string;
+    /** Custom style */
+    style?: React.CSSProperties;
+}
+export declare const DropdownMenu: ({ items, onSelect, selectedId, style, }: DropdownMenuProps) => import("react/jsx-runtime").JSX.Element;
+export interface DropdownTriggerProps {
+    /** Trigger content */
+    children: React.ReactNode;
+    /** Whether dropdown is open */
+    open?: boolean;
+    /** Toggle handler */
+    onClick?: () => void;
+    /** Custom style */
+    style?: React.CSSProperties;
+}
+export declare const DropdownTrigger: ({ children, open, onClick, style, }: DropdownTriggerProps) => import("react/jsx-runtime").JSX.Element;
+export interface DropdownProps {
+    /** Trigger element */
+    trigger: React.ReactNode;
+    /** Menu items */
+    items: DropdownMenuItem[];
+    /** Callback when item is selected */
+    onSelect?: (id: string) => void;
+    /** Selected item ID */
+    selectedId?: string;
+    /** Controlled open state */
+    open?: boolean;
+    /** Controlled open change handler */
+    onOpenChange?: (open: boolean) => void;
+    /** Placement */
+    placement?: 'bottom-start' | 'bottom-end' | 'bottom';
+    /** Custom style */
+    style?: React.CSSProperties;
+}
+export declare const Dropdown: ({ trigger, items, onSelect, selectedId, open: controlledOpen, onOpenChange, placement, style, }: DropdownProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DropdownDefaultIcon: ({ color }: {
+    color?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export interface SelectProps {
+    /** List of options to select from */
+    options: string[];
+    /** Currently selected value */
+    value: string;
+    /** Callback when value changes */
+    onChange: (value: string) => void;
+    /** Left icon (optional) */
+    icon?: React.ReactNode;
+    /** Placeholder text when no value selected */
+    placeholder?: string;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Custom style */
+    style?: React.CSSProperties;
+}
+export declare const Select: ({ options, value, onChange, icon, placeholder, disabled, style, }: SelectProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectDefaultIcon: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/DropdownMenu/index.d.ts

@@ -0,0 +1 @@
+export * from './DropdownMenu';