@drdex0101/water-design-system 1.0.1 → 3.0.0

package/dist/components/Icon/Icon.d.ts

@@ -0,0 +1,132 @@
+import { default as React } from 'react';
+
+export interface IconProps {
+    /** Icon size (width and height) */
+    size?: number;
+    /** Icon color */
+    color?: string;
+    /** Custom className */
+    className?: string;
+    /** Custom style */
+    style?: React.CSSProperties;
+}
+/** 活動 (Activity/Event) */
+export declare const ActivityIcon: ({ size, color, style, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
+/** 訂閱交易 (Subscribe/Trade) */
+export declare const SubscribeIcon: ({ size, color, style, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
+/** AI 解決 (AI Solution) */
+export declare const AISolutionIcon: ({ size, color, style, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
+/** 玩人解析 (Player Analysis) */
+export declare const PlayerAnalysisIcon: ({ size, color, style, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
+/** 我的錦標 (My Tournament) */
+export declare const TournamentIcon: ({ size, color, style, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
+/** Daily Training */
+export declare const DailyTrainingIcon: ({ size, color, style, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
+/** 牌譜筆記 (Hand Record Notes) */
+export declare const HandNotesIcon: ({ size, color, style, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
+/** 對手下注 (Opponent Bet) */
+export declare const BetIcon: ({ size, color, style, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
+/** Drop 存取 */
+export declare const DropIcon: ({ size, color, style, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
+/** 錦標賽統 (Tournament Stats) */
+export declare const StatsIcon: ({ size, color, style, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
+/** 報名記錄 (Registration) */
+export declare const RegistrationIcon: ({ size, color, style, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
+/** 記錄牌譜 (Record Hands) */
+export declare const RecordIcon: ({ size, color, style, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
+/** Search */
+export declare const SearchIcon: ({ size, color, style, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
+/** Chevron Down */
+export declare const ChevronDownIcon: ({ size, color, style, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
+/** Chevron Up */
+export declare const ChevronUpIcon: ({ size, color, style, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
+/** Chevron Left */
+export declare const ChevronLeftIcon: ({ size, color, style, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
+/** Chevron Right */
+export declare const ChevronRightIcon: ({ size, color, style, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
+/** Arrow Up */
+export declare const ArrowUpIcon: ({ size, color, style, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
+/** Arrow Down */
+export declare const ArrowDownIcon: ({ size, color, style, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
+/** Arrow Left */
+export declare const ArrowLeftIcon: ({ size, color, style, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
+/** Arrow Right */
+export declare const ArrowRightIcon: ({ size, color, style, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
+/** Plus */
+export declare const PlusIcon: ({ size, color, style, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
+/** Minus */
+export declare const MinusIcon: ({ size, color, style, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
+/** Close / X */
+export declare const CloseIcon: ({ size, color, style, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
+/** Check */
+export declare const CheckIcon: ({ size, color, style, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
+/** Menu (Hamburger) */
+export declare const MenuIcon: ({ size, color, style, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
+/** More Vertical (Dots) */
+export declare const MoreVerticalIcon: ({ size, color, style, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
+/** More Horizontal (Dots) */
+export declare const MoreHorizontalIcon: ({ size, color, style, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
+/** User */
+export declare const UserIcon: ({ size, color, style, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
+/** Share */
+export declare const ShareIcon: ({ size, color, style, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
+/** Edit / Pencil */
+export declare const EditIcon: ({ size, color, style, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
+/** Delete / Trash */
+export declare const DeleteIcon: ({ size, color, style, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
+/** Copy */
+export declare const CopyIcon: ({ size, color, style, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
+/** Settings / Gear */
+export declare const SettingsIcon: ({ size, color, style, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
+/** Light Mode / Sun */
+export declare const LightModeIcon: ({ size, color, style, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
+/** Dark Mode / Moon */
+export declare const DarkModeIcon: ({ size, color, style, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
+/** Loading / Spinner */
+export declare const LoadingIcon: ({ size, color, style, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
+/** Spade */
+export declare const SpadeIcon: ({ size, color, style, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
+/** Heart */
+export declare const HeartIcon: ({ size, color, style, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
+/** Diamond */
+export declare const DiamondIcon: ({ size, color, style, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
+/** Club */
+export declare const ClubIcon: ({ size, color, style, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
+/** Chip / Token */
+export declare const ChipIcon: ({ size, color, style, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
+/** Eye / View */
+export declare const EyeIcon: ({ size, color, style, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
+/** Eye Off / Hide */
+export declare const EyeOffIcon: ({ size, color, style, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
+/** AI */
+export declare const AIIcon: ({ size, color, style, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
+/** Fingerprint */
+export declare const FingerprintIcon: ({ size, color, style, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
+/** Upload Image */
+export declare const UploadImageIcon: ({ size, color, style, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
+/** Upload File */
+export declare const UploadFileIcon: ({ size, color, style, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
+/** Shopping Cart */
+export declare const CartIcon: ({ size, color, style, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
+/** Discord */
+export declare const DiscordIcon: ({ size, color, style, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
+/** Google */
+export declare const GoogleIcon: ({ size, color, style, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
+/** Instagram */
+export declare const InstagramIcon: ({ size, color, style, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
+/** TWD (Taiwan Dollar) */
+export declare const TWDIcon: ({ size, color, style, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
+/** USD (US Dollar) */
+export declare const USDIcon: ({ size, color, style, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
+/** XRP */
+export declare const XRPIcon: ({ size, color, style, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
+/** Firewall / Security */
+export declare const FirewallIcon: ({ size, color, style, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
+/** Home */
+export declare const HomeIcon: ({ size, color, style, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
+/** Event */
+export declare const EventIcon: ({ size, color, style, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
+/** Hand Record */
+export declare const HandRecordIcon: ({ size, color, style, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
+/** More */
+export declare const MoreIcon: ({ size, color, style, className }: IconProps) => import("react/jsx-runtime").JSX.Element;

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

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

package/dist/components/Input/Input.d.ts

@@ -0,0 +1,20 @@
+import { default as React } from 'react';
+
+export type InputState = 'default' | 'focus' | 'error' | 'disabled' | 'typing' | 'typed';
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    /** Label text above the input */
+    label?: string;
+    /** Helper text below the input */
+    helperText?: string;
+    /** Error message (overrides helperText when present) */
+    error?: string;
+    /** Left icon element */
+    leftIcon?: React.ReactNode;
+    /** Right icon element */
+    rightIcon?: React.ReactNode;
+    /** Input shape */
+    shape?: 'rounded' | 'pill';
+    /** Full width input */
+    fullWidth?: boolean;
+}
+export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;

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

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

package/dist/components/Poker/PokerCard.d.ts

@@ -0,0 +1,25 @@
+import { default as React } from 'react';
+
+export type Suit = 'spades' | 'clubs' | 'hearts' | 'diamonds';
+export interface PokerCard {
+    suit: Suit;
+    rank: string;
+}
+export interface RotatedCardsProps {
+    cards: (PokerCard | null)[];
+    style?: React.CSSProperties;
+}
+export declare const SuitIcon: ({ suit }: {
+    suit: Suit;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const PokerCard: ({ card, style }: {
+    card: PokerCard | null;
+    style?: React.CSSProperties;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const SingleCard: ({ card, style }: {
+    card: PokerCard | null;
+    style?: React.CSSProperties;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const RotatedCards: ({ cards, style }: RotatedCardsProps & {
+    style?: React.CSSProperties;
+}) => import("react/jsx-runtime").JSX.Element;

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

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

package/dist/components/Popup/Popup.d.ts

@@ -0,0 +1,62 @@
+import { default as React } from 'react';
+
+export interface PopupProps {
+    /** Whether the popup is open */
+    open: boolean;
+    /** Callback when popup should close */
+    onClose?: () => void;
+    /** Popup title */
+    title?: string;
+    /** Show close button */
+    showCloseButton?: boolean;
+    /** Popup content */
+    children?: React.ReactNode;
+    /** Primary action */
+    primaryAction?: {
+        label: string;
+        onClick: () => void;
+        variant?: 'primary' | 'danger';
+    };
+    /** Secondary action */
+    secondaryAction?: {
+        label: string;
+        onClick: () => void;
+    };
+    /** Close on overlay click */
+    closeOnOverlayClick?: boolean;
+    /** Custom width */
+    width?: number;
+    /** Custom style */
+    style?: React.CSSProperties;
+}
+export declare const Popup: ({ open, onClose, title, showCloseButton, children, primaryAction, secondaryAction, closeOnOverlayClick, width, style, }: PopupProps) => import("react/jsx-runtime").JSX.Element | null;
+export interface PopupAutocloseProps {
+    /** Whether the popup is open */
+    open: boolean;
+    /** Callback when popup closes */
+    onClose?: () => void;
+    /** Icon element */
+    icon?: React.ReactNode;
+    /** Title text */
+    title: string;
+    /** Title color */
+    titleColor?: 'success' | 'error' | 'warning' | 'default';
+    /** Description text */
+    description?: string;
+    /** Auto-close delay in seconds */
+    autoCloseDelay?: number;
+    /** Show auto-close countdown */
+    showCountdown?: boolean;
+    /** Custom style */
+    style?: React.CSSProperties;
+}
+export declare const PopupAutoclose: ({ open, onClose, icon, title, titleColor, description, autoCloseDelay, showCountdown, style, }: PopupAutocloseProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const SuccessIcon: ({ size }: {
+    size?: number;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const ErrorIcon: ({ size }: {
+    size?: number;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const WarningIcon: ({ size }: {
+    size?: number;
+}) => import("react/jsx-runtime").JSX.Element;

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

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

package/dist/components/SideMenu/SideMenu.d.ts

@@ -0,0 +1,43 @@
+import { default as React } from 'react';
+
+export interface SideMenuItem {
+    /** Unique identifier */
+    id: string;
+    /** Item label */
+    label: string;
+    /** Left icon */
+    icon?: React.ReactNode;
+    /** Right icon */
+    rightIcon?: React.ReactNode;
+    /** Whether item is selected */
+    selected?: boolean;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Item type */
+    type?: 'default' | 'rename' | 'selected';
+}
+export interface SideMenuProps {
+    /** Search placeholder */
+    searchPlaceholder?: string;
+    /** Search value */
+    searchValue?: string;
+    /** Search change handler */
+    onSearchChange?: (value: string) => void;
+    /** Primary actions (top menu items) */
+    primaryActions?: SideMenuItem[];
+    /** Conversation records */
+    conversations?: SideMenuItem[];
+    /** Callback when item is clicked */
+    onItemClick?: (id: string) => void;
+    /** Callback when conversation options is clicked */
+    onConversationOptions?: (id: string) => void;
+    /** Custom style */
+    style?: React.CSSProperties;
+}
+export declare const SideMenu: ({ searchPlaceholder, searchValue, onSearchChange, primaryActions, conversations, onItemClick, onConversationOptions, style, }: SideMenuProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SideMenuAddIcon: ({ color }: {
+    color?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const SideMenuShareIcon: ({ color }: {
+    color?: string;
+}) => import("react/jsx-runtime").JSX.Element;

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

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

package/dist/components/Slider/Slider.d.ts

@@ -0,0 +1,23 @@
+import { default as React } from 'react';
+
+export interface SliderProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'onChange'> {
+    /** Minimum value */
+    min?: number;
+    /** Maximum value */
+    max?: number;
+    /** Step increment */
+    step?: number;
+    /** Current value */
+    value?: number;
+    /** Default value for uncontrolled usage */
+    defaultValue?: number;
+    /** Callback when value changes */
+    onChange?: (value: number) => void;
+    /** Show min/max labels */
+    showLabels?: boolean;
+    /** Format function for labels */
+    formatLabel?: (value: number) => string;
+    /** Show value input fields */
+    showInputs?: boolean;
+}
+export declare const Slider: ({ min, max, step, value, defaultValue, onChange, showLabels, formatLabel, showInputs, disabled, style, ...props }: SliderProps) => import("react/jsx-runtime").JSX.Element;

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

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

package/dist/components/Switch/Switch.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+
+export interface SwitchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'onChange' | 'size'> {
+    /** Whether the switch is checked */
+    checked?: boolean;
+    /** Default checked state for uncontrolled usage */
+    defaultChecked?: boolean;
+    /** Callback when switch value changes */
+    onChange?: (checked: boolean) => void;
+    /** Label for the left/off state */
+    leftLabel?: string;
+    /** Label for the right/on state */
+    rightLabel?: string;
+    /** Size of the switch */
+    size?: 'sm' | 'md';
+}
+export declare const Switch: ({ checked, defaultChecked, onChange, leftLabel, rightLabel, size, disabled, style, id, ...props }: SwitchProps) => import("react/jsx-runtime").JSX.Element;

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

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

package/dist/components/Tabs/Tabs.d.ts

@@ -0,0 +1,28 @@
+import { default as React, ReactNode } from 'react';
+
+export type TabsVariant = 'default' | 'class' | 'pill';
+export interface TabItem {
+    /** Unique identifier for the tab */
+    id: string;
+    /** Tab label */
+    label: string;
+    /** Tab icon */
+    icon?: ReactNode;
+    /** Whether the tab is disabled */
+    disabled?: boolean;
+}
+export interface TabsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /** Array of tab items */
+    tabs: TabItem[];
+    /** Currently active tab ID */
+    activeTab?: string;
+    /** Default active tab ID for uncontrolled usage */
+    defaultTab?: string;
+    /** Callback when tab changes */
+    onChange?: (tabId: string) => void;
+    /** Tab style variant */
+    variant?: TabsVariant;
+    /** Additional tool element to display on the right (only for non-pill variants) */
+    tool?: React.ReactNode;
+}
+export declare const Tabs: ({ tabs, activeTab: externalActiveTab, defaultTab, onChange, variant, tool, style, ...props }: TabsProps) => import("react/jsx-runtime").JSX.Element;

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

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

package/dist/components/Toast/Toast.d.ts

@@ -0,0 +1,18 @@
+import { default as React } from 'react';
+
+export type ToastType = 'neutral' | 'info' | 'success' | 'alert';
+export interface ToastProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Toast title */
+    title: string;
+    /** Toast description/message */
+    description?: string;
+    /** Toast type/variant */
+    type?: ToastType;
+    /** Action button label */
+    actionLabel?: string;
+    /** Action button click handler */
+    onAction?: () => void;
+    /** Close handler */
+    onClose?: () => void;
+}
+export declare const Toast: ({ title, description, type, actionLabel, onAction, onClose, style, ...props }: ToastProps) => import("react/jsx-runtime").JSX.Element;

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

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

package/dist/components/Toggle/Toggle.d.ts

@@ -0,0 +1,34 @@
+import { default as React } from 'react';
+
+export interface ToggleProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> {
+    /** Toggle label */
+    label: string;
+    /** Whether the toggle is selected */
+    selected?: boolean;
+    /** Default selected state for uncontrolled usage */
+    defaultSelected?: boolean;
+    /** Callback when toggle state changes */
+    onChange?: (selected: boolean) => void;
+    /** Right icon element */
+    rightIcon?: React.ReactNode;
+}
+export declare const Toggle: ({ label, selected, defaultSelected, onChange, rightIcon, disabled, style, ...props }: ToggleProps) => import("react/jsx-runtime").JSX.Element;
+export interface ToggleGroupItem {
+    id: string;
+    label: string;
+    rightIcon?: React.ReactNode;
+    disabled?: boolean;
+}
+export interface ToggleGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /** Array of toggle items */
+    items: ToggleGroupItem[];
+    /** Currently selected item ID */
+    value?: string;
+    /** Default selected item ID for uncontrolled usage */
+    defaultValue?: string;
+    /** Callback when selection changes */
+    onChange?: (value: string) => void;
+    /** Allow deselecting (toggle off) */
+    allowDeselect?: boolean;
+}
+export declare const ToggleGroup: ({ items, value, defaultValue, onChange, allowDeselect, style, ...props }: ToggleGroupProps) => import("react/jsx-runtime").JSX.Element;

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

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

package/dist/index.d.ts

@@ -1,2 +1,20 @@
+export * from './components/Badge';
 export * from './components/Button';
+export * from './components/Checkbox';
+export * from './components/Divider';
+export * from './components/Input';
+export * from './components/Slider';
+export * from './components/Switch';
+export * from './components/Tabs';
+export * from './components/Toast';
+export * from './components/Toggle';
+export * from './components/Poker';
+export * from './components/Card';
+export * from './components/BottomNav';
+export * from './components/BottomSheet';
+export * from './components/DropdownMenu';
+export * from './components/Popup';
+export * from './components/SideMenu';
+export * from './components/Icon';
+export * from './components/DatePicker';
 export * from './tokens';

package/dist/pages/Showcase.d.ts

@@ -0,0 +1 @@
+export declare const Showcase: () => import("react/jsx-runtime").JSX.Element;

package/dist/pages/SpacingTokens.d.ts

@@ -0,0 +1,2 @@
+export declare const SpacingTokens: () => import("react/jsx-runtime").JSX.Element;
+export default SpacingTokens;