@gtcx/ui 0.1.0

package/dist/hooks/use-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-menu.d.ts","sourceRoot":"","sources":["../../src/hooks/use-menu.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,WAAW,QAAQ;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAC;IACtB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,wBAAgB,OAAO,CAAC,QAAQ,EAAE,MAAM;sBACb,MAAM,KAAG,OAAO;gCAMN,QAAQ,EAAE,KAAG,OAAO;yBAQ3B,QAAQ,KAAG,OAAO;4BAOf,QAAQ,EAAE,KAAG,QAAQ,GAAG,SAAS;2BAiBlC,QAAQ,EAAE,KAAG,QAAQ,EAAE;yBAiBzB,QAAQ,EAAE,SAAS,MAAM,KAAG,QAAQ,EAAE,GAAG,IAAI;EA2C1E"}

package/dist/hooks/use-mounted.d.ts

@@ -0,0 +1,8 @@
+/**
+ * useMounted — SSR-safe hydration check.
+ *
+ * Returns `true` after the component has mounted on the client.
+ * Use this to guard client-only code that would cause hydration mismatches.
+ */
+export declare function useMounted(): boolean;
+//# sourceMappingURL=use-mounted.d.ts.map

package/dist/hooks/use-mounted.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-mounted.d.ts","sourceRoot":"","sources":["../../src/hooks/use-mounted.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,wBAAgB,UAAU,IAAI,OAAO,CAQpC"}

package/dist/hooks/use-responsive.d.ts

@@ -0,0 +1,11 @@
+import { type Breakpoint } from './use-breakpoint';
+type ResponsiveValue<T> = Partial<Record<Breakpoint, T>>;
+/**
+ * Resolve a responsive value map to the value matching the current breakpoint.
+ *
+ * Falls back to the nearest defined value at or below the current breakpoint.
+ * Returns `undefined` during SSR or if no matching value is found.
+ */
+export declare function useResponsive<T>(values: ResponsiveValue<T>): T | undefined;
+export {};
+//# sourceMappingURL=use-responsive.d.ts.map

package/dist/hooks/use-responsive.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-responsive.d.ts","sourceRoot":"","sources":["../../src/hooks/use-responsive.ts"],"names":[],"mappings":"AAEA,OAAO,EAAiB,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAElE,KAAK,eAAe,CAAC,CAAC,IAAI,OAAO,CAAC,MAAM,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,CAAC;AAIzD;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,CAAC,EAAE,MAAM,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,SAAS,CAgB1E"}

package/dist/hooks/use-scroll-position.d.ts

@@ -0,0 +1,13 @@
+export interface ScrollPosition {
+    x: number;
+    y: number;
+}
+/**
+ * useScrollPosition — throttled scroll position tracker.
+ *
+ * Mirrors Metronic's useScrollPosition hook.
+ *
+ * @param throttleMs - Throttle interval in ms. @default 100
+ */
+export declare function useScrollPosition(throttleMs?: number): ScrollPosition;
+//# sourceMappingURL=use-scroll-position.d.ts.map

package/dist/hooks/use-scroll-position.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-scroll-position.d.ts","sourceRoot":"","sources":["../../src/hooks/use-scroll-position.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,cAAc;IAC7B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED;;;;;;GAMG;AACH,wBAAgB,iBAAiB,CAAC,UAAU,SAAM,GAAG,cAAc,CAiClE"}

package/dist/hooks/use-slider-input.d.ts

@@ -0,0 +1,24 @@
+export interface UseSliderInputOptions {
+    minValue: number;
+    maxValue: number;
+    initialValue: [number, number];
+}
+/**
+ * Dual-range slider value sync between slider and number inputs.
+ * Ported from Metronic useSliderInput.
+ */
+export declare function useSliderInput({ minValue, maxValue, initialValue }: UseSliderInputOptions): {
+    sliderValues: [number, number];
+    inputValues: [number, number];
+    setSliderValues: import("react").Dispatch<import("react").SetStateAction<[number, number]>>;
+    setInputValues: import("react").Dispatch<import("react").SetStateAction<[number, number]>>;
+    handleSliderChange: (values: [number, number]) => void;
+    handleInputChange: (e: React.ChangeEvent<HTMLInputElement>, index: 0 | 1) => void;
+    validateAndUpdateValue: (value: number, index: 0 | 1) => void;
+};
+/**
+ * Clamp a slider value for the given index.
+ * Exported for unit testing — used internally by validateAndUpdateValue.
+ */
+export declare function clampSliderValue(value: number, index: 0 | 1, currentValues: [number, number], minValue: number, maxValue: number): number;
+//# sourceMappingURL=use-slider-input.d.ts.map

package/dist/hooks/use-slider-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-slider-input.d.ts","sourceRoot":"","sources":["../../src/hooks/use-slider-input.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAChC;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,EAAE,qBAAqB;;;;;iCAIxC,CAAC,MAAM,EAAE,MAAM,CAAC;2BAM1D,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,SAAS,CAAC,GAAG,CAAC;oCAY7C,MAAM,SAAS,CAAC,GAAG,CAAC;EAsB/B;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,CAAC,GAAG,CAAC,EACZ,aAAa,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,EAC/B,QAAQ,EAAE,MAAM,EAChB,QAAQ,EAAE,MAAM,GACf,MAAM,CAKR"}

package/dist/hooks/use-viewport.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Returns [height, width] of the viewport. SSR-safe.
+ * Ported from Metronic useViewport.
+ */
+export declare function useViewport(): [number, number];
+//# sourceMappingURL=use-viewport.d.ts.map

package/dist/hooks/use-viewport.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-viewport.d.ts","sourceRoot":"","sources":["../../src/hooks/use-viewport.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,wBAAgB,WAAW,IAAI,CAAC,MAAM,EAAE,MAAM,CAAC,CAe9C"}

package/dist/index.d.mts

@@ -0,0 +1,566 @@
+import React from 'react';
+import { TablePaginationConfig } from 'antd';
+
+/**
+ * GTCX color token system
+ *
+ * Semantic colors supporting light/dark themes with platform-specific variations.
+ */
+declare const colors: {
+    primary: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        950: string;
+    };
+    secondary: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        950: string;
+    };
+    success: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        950: string;
+    };
+    warning: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        950: string;
+    };
+    error: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        950: string;
+    };
+    info: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        950: string;
+    };
+    neutral: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        950: string;
+    };
+    semantic: {
+        profit: string;
+        loss: string;
+        approved: string;
+        pending: string;
+        rejected: string;
+        secure: string;
+        insecure: string;
+    };
+};
+declare const platformColors: {
+    crx: {
+        primary: string;
+        secondary: string;
+        accent: string;
+        gradient: string;
+    };
+    sgx: {
+        primary: string;
+        secondary: string;
+        accent: string;
+        gradient: string;
+    };
+    agx: {
+        primary: string;
+        secondary: string;
+        accent: string;
+        gradient: string;
+    };
+};
+declare const colorTokens: {
+    brand: {
+        primary: string;
+        primaryHover: string;
+        primaryActive: string;
+        secondary: string;
+        secondaryHover: string;
+    };
+    status: {
+        success: string;
+        warning: string;
+        error: string;
+        info: string;
+    };
+    text: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        disabled: string;
+        inverse: string;
+    };
+    background: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        inverse: string;
+    };
+    border: {
+        primary: string;
+        secondary: string;
+        focus: string;
+    };
+};
+declare const darkColors: {
+    text: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+    };
+    background: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+    };
+    border: {
+        primary: string;
+        secondary: string;
+    };
+};
+
+/**
+ * GTCX spacing token system
+ *
+ * 4px base unit for 8px grid system
+ */
+declare const BASE_UNIT = 4;
+declare const spacing: {
+    0: number;
+    1: number;
+    2: number;
+    3: number;
+    4: number;
+    5: number;
+    6: number;
+    8: number;
+    10: number;
+    12: number;
+    16: number;
+    20: number;
+    24: number;
+    32: number;
+};
+declare const spacingTokens: {
+    component: {
+        button: {
+            paddingX: number;
+            paddingY: number;
+            gap: number;
+        };
+        input: {
+            paddingX: number;
+            paddingY: number;
+        };
+        card: {
+            padding: number;
+            gap: number;
+        };
+        form: {
+            fieldGap: number;
+            sectionGap: number;
+            labelGap: number;
+        };
+        modal: {
+            padding: number;
+            gap: number;
+        };
+        table: {
+            cellPadding: number;
+            headerPadding: number;
+        };
+    };
+    layout: {
+        container: {
+            paddingX: number;
+            paddingY: number;
+        };
+        section: {
+            marginY: number;
+            gap: number;
+        };
+        page: {
+            marginY: number;
+            paddingX: number;
+        };
+    };
+};
+declare const platformSpacing: {
+    crx: {
+        density: string;
+        basePadding: number;
+        baseGap: number;
+    };
+    sgx: {
+        density: string;
+        basePadding: number;
+        baseGap: number;
+    };
+    agx: {
+        density: string;
+        basePadding: number;
+        baseGap: number;
+    };
+};
+
+/**
+ * GTCX typography token system
+ */
+declare const fontFamilies: {
+    sans: string;
+    mono: string;
+    serif: string;
+};
+declare const fontWeights: {
+    normal: number;
+    medium: number;
+    semibold: number;
+    bold: number;
+};
+declare const fontSizes: {
+    xs: string;
+    sm: string;
+    base: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+    '3xl': string;
+    '4xl': string;
+    '5xl': string;
+};
+declare const lineHeights: {
+    tight: number;
+    normal: number;
+    relaxed: number;
+};
+declare const letterSpacing: {
+    tight: string;
+    normal: string;
+    wide: string;
+};
+declare const typography: {
+    display: {
+        lg: {
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: number;
+            letterSpacing: string;
+        };
+        md: {
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: number;
+        };
+        sm: {
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: number;
+        };
+    };
+    heading: {
+        h1: {
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: number;
+        };
+        h2: {
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: number;
+        };
+        h3: {
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: number;
+        };
+        h4: {
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: number;
+        };
+    };
+    body: {
+        lg: {
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: number;
+        };
+        md: {
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: number;
+        };
+        sm: {
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: number;
+        };
+    };
+    caption: {
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: number;
+    };
+    button: {
+        lg: {
+            fontSize: string;
+            fontWeight: number;
+        };
+        md: {
+            fontSize: string;
+            fontWeight: number;
+        };
+        sm: {
+            fontSize: string;
+            fontWeight: number;
+        };
+    };
+};
+
+declare const breakpoints: {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    xxl: number;
+};
+declare const radii: {
+    none: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    full: number;
+};
+declare const shadows: {
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+};
+declare const zIndex: {
+    dropdown: number;
+    sticky: number;
+    fixed: number;
+    modal: number;
+    popover: number;
+    tooltip: number;
+};
+declare const transitions: {
+    fast: string;
+    normal: string;
+    slow: string;
+};
+
+type Platform = 'crx' | 'sgx' | 'agx';
+interface Theme {
+    platform: Platform;
+    colors: {
+        primary: string;
+        secondary: string;
+        accent: string;
+        gradient: string;
+    };
+    spacing: {
+        density: string;
+        basePadding: number;
+        baseGap: number;
+    };
+}
+declare const themes: Record<Platform, Theme>;
+declare const getTheme: (platform: Platform) => Theme;
+declare const getAntTheme: (platform: Platform) => {
+    token: {
+        colorPrimary: string;
+        colorInfo: string;
+        colorSuccess: string;
+        colorWarning: string;
+        colorError: string;
+        borderRadius: number;
+        fontFamily: string;
+    };
+    components: {
+        Button: {
+            paddingInline: number;
+        };
+        Card: {
+            paddingLG: number;
+        };
+    };
+};
+
+type Breakpoint = keyof typeof breakpoints;
+declare function useBreakpoint(): {
+    current: "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
+    isMobile: boolean;
+    isTablet: boolean;
+    isDesktop: boolean;
+    isAbove: (bp: Breakpoint) => boolean;
+    isBelow: (bp: Breakpoint) => boolean;
+    breakpoints: {
+        xs: number;
+        sm: number;
+        md: number;
+        lg: number;
+        xl: number;
+        xxl: number;
+    };
+};
+
+type ResponsiveValue<T> = Partial<Record<Breakpoint, T>>;
+declare function useResponsive<T>(values: ResponsiveValue<T>): T | undefined;
+
+type InsightType = "prediction" | "anomaly" | "recommendation" | "alert" | "optimization";
+type ImpactLevel = "low" | "medium" | "high" | "critical";
+interface AIInsightCardProps {
+    type: InsightType;
+    title: string;
+    description: string;
+    confidence: number;
+    impact: ImpactLevel;
+    actions: string[];
+    className?: string;
+    delay?: number;
+}
+declare function AIInsightCard({ type, title, description, confidence, impact, actions, className, delay, }: AIInsightCardProps): React.JSX.Element;
+
+interface AdvancedTableColumn {
+    key: string;
+    title: string;
+    dataIndex: string;
+    width?: number;
+    fixed?: "left" | "right";
+    sorter?: boolean | ((a: any, b: any) => number);
+    filterable?: boolean;
+    filterType?: "text" | "select" | "date" | "number";
+    filterOptions?: Array<{
+        label: string;
+        value: any;
+    }>;
+    render?: (value: any, record: any, index: number) => React.ReactNode;
+    align?: "left" | "center" | "right";
+    ellipsis?: boolean;
+    copyable?: boolean;
+}
+interface AdvancedTableProps {
+    dataSource: any[];
+    columns: AdvancedTableColumn[];
+    loading?: boolean;
+    pagination?: false | TablePaginationConfig;
+    rowSelection?: boolean | object;
+    searchable?: boolean;
+    filterable?: boolean;
+    exportable?: boolean;
+    refreshable?: boolean;
+    sticky?: boolean;
+    className?: string;
+    onRow?: (record: any, index?: number) => any;
+    onSelectionChange?: (selectedRowKeys: React.Key[], selectedRows: any[]) => void;
+    onExport?: (data: any[], format: "csv" | "excel" | "pdf") => void;
+    onRefresh?: () => void;
+    onSearch?: (searchText: string) => void;
+    onFilter?: (filters: Record<string, any>) => void;
+}
+declare function AdvancedTable({ dataSource, columns, loading, pagination, rowSelection, searchable, filterable, exportable, refreshable, sticky, className, onRow, onSelectionChange, onExport, onRefresh, onSearch, onFilter, }: AdvancedTableProps): React.JSX.Element;
+
+interface GlassmorphismCardProps {
+    children: React.ReactNode;
+    className?: string;
+    intensity?: "light" | "medium" | "strong";
+    blur?: "sm" | "md" | "lg";
+    border?: boolean;
+    hover?: boolean;
+    delay?: number;
+}
+declare function GlassmorphismCard({ children, className, intensity, blur, border, hover, delay, }: GlassmorphismCardProps): React.JSX.Element;
+
+interface HeaderMenuItem {
+    key: string;
+    label: string;
+    icon?: React.ReactNode;
+    href?: string;
+}
+interface UserMenu {
+    name: string;
+    email: string;
+    avatar?: string;
+    role?: string;
+}
+interface HeaderProps {
+    platform: Platform;
+    title?: string;
+    subtitle?: string;
+    logo?: React.ReactNode;
+    menuItems?: HeaderMenuItem[];
+    user?: UserMenu;
+    showNotifications?: boolean;
+    notificationCount?: number;
+    onNotificationClick?: () => void;
+    onUserMenuClick?: (key: string) => void;
+    onMenuClick?: (key: string) => void;
+    className?: string;
+    fixed?: boolean;
+}
+declare function Header({ platform, title, subtitle, logo, menuItems, user, showNotifications, notificationCount, onNotificationClick, onUserMenuClick, onMenuClick, className, fixed, }: HeaderProps): React.JSX.Element;
+
+export { AIInsightCard, type AIInsightCardProps, AdvancedTable, type AdvancedTableColumn, type AdvancedTableProps, BASE_UNIT, type Breakpoint, GlassmorphismCard, type GlassmorphismCardProps, Header, type HeaderMenuItem, type HeaderProps, type ImpactLevel, type InsightType, type Platform, type Theme, type UserMenu, breakpoints, colorTokens, colors, darkColors, fontFamilies, fontSizes, fontWeights, getAntTheme, getTheme, letterSpacing, lineHeights, platformColors, platformSpacing, radii, shadows, spacing, spacingTokens, themes, transitions, typography, useBreakpoint, useResponsive, zIndex };

package/dist/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @gtcx/ui - Shared UI components and design system
+ *
+ * Usage:
+ *   import { Header, AIInsightCard, colors } from '@gtcx/ui';
+ *   import { getAntTheme } from '@gtcx/ui/themes';
+ */
+export * from './tokens';
+export * from './themes';
+export * from './hooks';
+export * from './components';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,cAAc,UAAU,CAAC;AAGzB,cAAc,UAAU,CAAC;AAGzB,cAAc,SAAS,CAAC;AAGxB,cAAc,cAAc,CAAC"}