@drdex0101/water-design-system 1.0.1 → 2.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/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/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/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/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,28 @@
+import { default as React } from 'react';
+
+export type PokerCardState = 'default' | 'add' | 'back' | 'pending' | 'option';
+export type PokerCardSuit = 'heart' | 'spade' | 'diamond' | 'club' | 'empty' | 'number' | 'both';
+export interface PokerCardProps {
+    /** Card state */
+    state?: PokerCardState;
+    /** Card suit */
+    suit?: PokerCardSuit;
+    /** Card value (for default state) */
+    value?: string;
+    /** Whether the card is selected */
+    selected?: boolean;
+    /** Click handler */
+    onClick?: () => void;
+    /** Custom style */
+    style?: React.CSSProperties;
+}
+export declare const PokerCard: ({ state, suit, value, selected, onClick, style, }: PokerCardProps) => import("react/jsx-runtime").JSX.Element;
+export interface PokerCardGroupProps {
+    /** Array of cards */
+    cards: PokerCardProps[];
+    /** Gap between cards */
+    gap?: number;
+    /** Custom style */
+    style?: React.CSSProperties;
+}
+export declare const PokerCardGroup: ({ cards, gap, style }: PokerCardGroupProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,38 @@
+import { default as React } from 'react';
+
+export type PokerPlayerState = 'start' | 'default' | 'showRange' | 'flip' | 'fold';
+export interface PokerPlayerProps {
+    /** Player state */
+    state?: PokerPlayerState;
+    /** Whether this is the hero (main player) */
+    isHero?: boolean;
+    /** Player name (optional) */
+    playerName?: string;
+    /** Whether the player is selected */
+    selected?: boolean;
+    /** Player position label (e.g., "BTN", "SB", "BB", "UTG") */
+    position?: string;
+    /** Player stack size */
+    stack?: string;
+    /** Cards to show (for flip/showRange states) */
+    cards?: Array<{
+        suit: string;
+        value: string;
+    }>;
+    /** Click handler */
+    onClick?: () => void;
+    /** Custom style */
+    style?: React.CSSProperties;
+}
+export declare const PokerPlayer: ({ state, isHero, playerName, selected, position, stack, cards, onClick, style, }: PokerPlayerProps) => import("react/jsx-runtime").JSX.Element;
+export interface PokerPlayerCircleProps {
+    /** Whether this is the hero */
+    isHero?: boolean;
+    /** Whether selected */
+    selected?: boolean;
+    /** Click handler */
+    onClick?: () => void;
+    /** Custom style */
+    style?: React.CSSProperties;
+}
+export declare const PokerPlayerCircle: ({ isHero, selected, onClick, style, }: PokerPlayerCircleProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,28 @@
+import { default as React } from 'react';
+
+export type PokerActionType = 'bet' | 'raise' | 'call' | 'fold' | 'allin' | 'waiting';
+export interface PokerStatusIndicatorProps {
+    /** Action type */
+    action: PokerActionType;
+    /** Position label (e.g., "SB", "BB", "UTG") */
+    position?: string;
+    /** Bet amount in BB */
+    amount?: string;
+    /** Custom style */
+    style?: React.CSSProperties;
+}
+export declare const PokerStatusIndicator: ({ action, position, amount, style, }: PokerStatusIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+export interface PokerChipProps {
+    /** Amount (e.g., "-30 BB") */
+    amount: string;
+    /** Color - positive or negative */
+    variant?: 'positive' | 'negative';
+    /** Custom style */
+    style?: React.CSSProperties;
+}
+export declare const PokerChip: ({ amount, variant, style }: PokerChipProps) => import("react/jsx-runtime").JSX.Element;
+export interface DealerButtonProps {
+    /** Custom style */
+    style?: React.CSSProperties;
+}
+export declare const DealerButton: ({ style }: DealerButtonProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,39 @@
+import { default as React } from 'react';
+import { PokerCardProps } from './PokerCard';
+import { PokerPlayerProps } from './PokerPlayer';
+
+export type PokerTableOrientation = 'vertical' | 'horizontal';
+export interface PokerTablePlayer extends PokerPlayerProps {
+    /** Player seat position (0-8, clockwise from bottom) */
+    seat: number;
+}
+export interface PokerTableProps {
+    /** Table orientation */
+    orientation?: PokerTableOrientation;
+    /** Players at the table */
+    players?: PokerTablePlayer[];
+    /** Community cards */
+    communityCards?: PokerCardProps[];
+    /** Pot size in BB */
+    pot?: string;
+    /** Blinds info (e.g., "100 / 200 / 100") */
+    blinds?: string;
+    /** Dealer seat position */
+    dealerSeat?: number;
+    /** Click handler for empty seats */
+    onSeatClick?: (seat: number) => void;
+    /** Click handler for cards */
+    onCardClick?: (index: number) => void;
+    /** Custom style */
+    style?: React.CSSProperties;
+}
+export declare const PokerTable: ({ orientation, players, communityCards, pot, blinds, dealerSeat, onSeatClick, onCardClick, style, }: PokerTableProps) => import("react/jsx-runtime").JSX.Element;
+export interface PokerTablePreviewProps {
+    /** Table orientation */
+    orientation?: PokerTableOrientation;
+    /** Scale factor */
+    scale?: number;
+    /** Custom style */
+    style?: React.CSSProperties;
+}
+export declare const PokerTablePreview: ({ orientation, scale, style, }: PokerTablePreviewProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,4 @@
+export * from './PokerCard';
+export * from './PokerPlayer';
+export * from './PokerStatusIndicator';
+export * from './PokerTable';

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,26 @@
+import { default as React } from 'react';
+
+export type TabsVariant = 'default' | 'text';
+export interface TabItem {
+    /** Unique identifier for the tab */
+    id: string;
+    /** Tab label */
+    label: string;
+    /** Whether the tab is disabled */
+    disabled?: boolean;
+}
+export interface TabsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /** Array of tab items */
+    items: TabItem[];
+    /** Currently active tab ID */
+    activeTab?: string;
+    /** Default active tab ID for uncontrolled usage */
+    defaultActiveTab?: string;
+    /** Callback when tab changes */
+    onChange?: (tabId: string) => void;
+    /** Tab style variant */
+    variant?: TabsVariant;
+    /** Additional tool element to display on the right */
+    tool?: React.ReactNode;
+}
+export declare const Tabs: ({ items, activeTab, defaultActiveTab, 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,12 @@
+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 './tokens';

package/dist/pages/SpacingTokens.d.ts

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