@drdex0101/water-design-system 2.0.0 → 3.0.2

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/Tabs/Tabs.d.ts

@@ -1,26 +1,28 @@
-import { default as React } from 'react';
+import { default as React, ReactNode } from 'react';
 
-export type TabsVariant = 'default' | 'text';
+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 */
-    items: TabItem[];
+    tabs: TabItem[];
     /** Currently active tab ID */
     activeTab?: string;
     /** Default active tab ID for uncontrolled usage */
-    defaultActiveTab?: string;
+    defaultTab?: string;
     /** Callback when tab changes */
     onChange?: (tabId: string) => void;
     /** Tab style variant */
     variant?: TabsVariant;
-    /** Additional tool element to display on the right */
+    /** Additional tool element to display on the right (only for non-pill variants) */
     tool?: React.ReactNode;
 }
-export declare const Tabs: ({ items, activeTab, defaultActiveTab, onChange, variant, tool, style, ...props }: TabsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Tabs: ({ tabs, activeTab: externalActiveTab, defaultTab, onChange, variant, tool, style, ...props }: TabsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/index.d.ts

@@ -8,5 +8,14 @@ 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 type { Suit, RotatedCardsProps, PokerCardProps } from './components/Poker';
+export { PokerCard, SuitIcon, PokerCardComponent, SingleCard, RotatedCards } from './components/Poker';
 export * from './tokens';

package/dist/pages/IconTokens.d.ts

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

package/dist/pages/Showcase.d.ts

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

package/dist/tokens/semantic.d.ts

@@ -10,11 +10,12 @@ export declare const background: {
         readonly secondary: "#f7f8f9";
         readonly tertiary: "#eeeff2";
         readonly overlay: "#2a2d3380";
-        readonly disabled: "#cfd1d5";
+        readonly disabled: "#eff0f2";
         readonly success: "#e7f7ed";
         readonly error: "#fdecec";
         readonly warning: "#fef7e6";
         readonly brand: "#2e9dff";
+        readonly brandCompliment: "#73bdff";
         readonly brandSubtle: "#eaf5ff";
         readonly accent: "#01bda7";
         readonly accent2: "#e77300";
@@ -26,11 +27,12 @@ export declare const background: {
         readonly secondary: "#101d30";
         readonly tertiary: "#1a3050";
         readonly overlay: "#2a2d33cc";
-        readonly disabled: "#828894";
+        readonly disabled: "#969ba5";
         readonly success: "#e7f7ed";
         readonly error: "#fdecec";
         readonly warning: "#fef7e6";
         readonly brand: "#2e9dff";
+        readonly brandCompliment: "#216fb5";
         readonly brandSubtle: "#eaf5ff";
         readonly accent: "#01a3af";
         readonly accent2: "#e77300";
@@ -60,7 +62,7 @@ export declare const text: {
         readonly secondary: "#eaecef";
         readonly tertiary: "#d0d2d6";
         readonly disabled: "#5a606e";
-        readonly placeholder: "#cfd1d5";
+        readonly placeholder: "#b7bac1";
         readonly success: "#0bad47";
         readonly error: "#ef4444";
         readonly warning: "#f0b100";
@@ -80,6 +82,7 @@ export declare const border: {
         readonly success: "#0bad47";
         readonly error: "#ef4444";
         readonly warning: "#f0b100";
+        readonly onBrand: "#ffffff";
         readonly brandSubtle: "#bee1ff";
     };
     readonly dark: {
@@ -89,6 +92,7 @@ export declare const border: {
         readonly success: "#0bad47";
         readonly error: "#ef4444";
         readonly warning: "#f0b100";
+        readonly onBrand: "#ffffff";
         readonly brandSubtle: "#2e9dff";
     };
 };
@@ -102,7 +106,7 @@ export declare const components: {
             readonly outlineBg: "#ffffff";
             readonly outlineBorder: "#eaecef";
             readonly outlineLabel: "#464b56";
-            readonly disabledBg: "#cfd1d5";
+            readonly disabledBg: "#eff0f2";
             readonly disabledLabel: "#b7bac1";
             readonly pokerCallBg: "#01bda7";
             readonly pokerCallLabel: "#ffffff";
@@ -121,7 +125,7 @@ export declare const components: {
             readonly outlineBg: "#071427";
             readonly outlineBorder: "#5a606e";
             readonly outlineLabel: "#eaecef";
-            readonly disabledBg: "#828894";
+            readonly disabledBg: "#969ba5";
             readonly disabledLabel: "#5a606e";
             readonly pokerCallBg: "#01a3af";
             readonly pokerCallLabel: "#ffffff";
@@ -134,13 +138,30 @@ export declare const components: {
         };
     };
     readonly pokerCard: {
-        readonly bg: "#ffffff";
-        readonly bgEmpty: "#6eb3dc80";
-        readonly border: "#eaecef";
-        readonly club: "#01bda7";
-        readonly diamond: "#2e9dff";
-        readonly heart: "#ef4444";
-        readonly spade: "#464b56";
+        readonly light: {
+            readonly bg: "#ffffff";
+            readonly bgEmpty: "#6eb3dc80";
+            readonly border: "#eaecef";
+            readonly club: "#01bda7";
+            readonly diamond: "#2e9dff";
+            readonly heart: "#ef4444";
+            readonly spade: "#464b56";
+            readonly playerBg: "#eaf5ff";
+            readonly playerBorder: "#bee1ff";
+            readonly tableBg: "#bee1ff";
+        };
+        readonly dark: {
+            readonly bg: "#ffffff";
+            readonly bgEmpty: "#1a305080";
+            readonly border: "#e6fdfe";
+            readonly club: "#01bda7";
+            readonly diamond: "#2e9dff";
+            readonly heart: "#ef4444";
+            readonly spade: "#464b56";
+            readonly playerBg: "#15263e";
+            readonly playerBorder: "#1a3050";
+            readonly tableBg: "#15263e";
+        };
     };
 };
 export declare const semanticColors: {
@@ -150,11 +171,12 @@ export declare const semanticColors: {
             readonly secondary: "#f7f8f9";
             readonly tertiary: "#eeeff2";
             readonly overlay: "#2a2d3380";
-            readonly disabled: "#cfd1d5";
+            readonly disabled: "#eff0f2";
             readonly success: "#e7f7ed";
             readonly error: "#fdecec";
             readonly warning: "#fef7e6";
             readonly brand: "#2e9dff";
+            readonly brandCompliment: "#73bdff";
             readonly brandSubtle: "#eaf5ff";
             readonly accent: "#01bda7";
             readonly accent2: "#e77300";
@@ -166,11 +188,12 @@ export declare const semanticColors: {
             readonly secondary: "#101d30";
             readonly tertiary: "#1a3050";
             readonly overlay: "#2a2d33cc";
-            readonly disabled: "#828894";
+            readonly disabled: "#969ba5";
             readonly success: "#e7f7ed";
             readonly error: "#fdecec";
             readonly warning: "#fef7e6";
             readonly brand: "#2e9dff";
+            readonly brandCompliment: "#216fb5";
             readonly brandSubtle: "#eaf5ff";
             readonly accent: "#01a3af";
             readonly accent2: "#e77300";
@@ -200,7 +223,7 @@ export declare const semanticColors: {
             readonly secondary: "#eaecef";
             readonly tertiary: "#d0d2d6";
             readonly disabled: "#5a606e";
-            readonly placeholder: "#cfd1d5";
+            readonly placeholder: "#b7bac1";
             readonly success: "#0bad47";
             readonly error: "#ef4444";
             readonly warning: "#f0b100";
@@ -220,6 +243,7 @@ export declare const semanticColors: {
             readonly success: "#0bad47";
             readonly error: "#ef4444";
             readonly warning: "#f0b100";
+            readonly onBrand: "#ffffff";
             readonly brandSubtle: "#bee1ff";
         };
         readonly dark: {
@@ -229,6 +253,7 @@ export declare const semanticColors: {
             readonly success: "#0bad47";
             readonly error: "#ef4444";
             readonly warning: "#f0b100";
+            readonly onBrand: "#ffffff";
             readonly brandSubtle: "#2e9dff";
         };
     };
@@ -242,7 +267,7 @@ export declare const semanticColors: {
                 readonly outlineBg: "#ffffff";
                 readonly outlineBorder: "#eaecef";
                 readonly outlineLabel: "#464b56";
-                readonly disabledBg: "#cfd1d5";
+                readonly disabledBg: "#eff0f2";
                 readonly disabledLabel: "#b7bac1";
                 readonly pokerCallBg: "#01bda7";
                 readonly pokerCallLabel: "#ffffff";
@@ -261,7 +286,7 @@ export declare const semanticColors: {
                 readonly outlineBg: "#071427";
                 readonly outlineBorder: "#5a606e";
                 readonly outlineLabel: "#eaecef";
-                readonly disabledBg: "#828894";
+                readonly disabledBg: "#969ba5";
                 readonly disabledLabel: "#5a606e";
                 readonly pokerCallBg: "#01a3af";
                 readonly pokerCallLabel: "#ffffff";
@@ -274,13 +299,30 @@ export declare const semanticColors: {
             };
         };
         readonly pokerCard: {
-            readonly bg: "#ffffff";
-            readonly bgEmpty: "#6eb3dc80";
-            readonly border: "#eaecef";
-            readonly club: "#01bda7";
-            readonly diamond: "#2e9dff";
-            readonly heart: "#ef4444";
-            readonly spade: "#464b56";
+            readonly light: {
+                readonly bg: "#ffffff";
+                readonly bgEmpty: "#6eb3dc80";
+                readonly border: "#eaecef";
+                readonly club: "#01bda7";
+                readonly diamond: "#2e9dff";
+                readonly heart: "#ef4444";
+                readonly spade: "#464b56";
+                readonly playerBg: "#eaf5ff";
+                readonly playerBorder: "#bee1ff";
+                readonly tableBg: "#bee1ff";
+            };
+            readonly dark: {
+                readonly bg: "#ffffff";
+                readonly bgEmpty: "#1a305080";
+                readonly border: "#e6fdfe";
+                readonly club: "#01bda7";
+                readonly diamond: "#2e9dff";
+                readonly heart: "#ef4444";
+                readonly spade: "#464b56";
+                readonly playerBg: "#15263e";
+                readonly playerBorder: "#1a3050";
+                readonly tableBg: "#15263e";
+            };
         };
     };
 };