@vtx-ui/react 0.0.1-beta.1

package/dist/types/index.d.ts

@@ -0,0 +1,55 @@
+export { Button } from './components/Button';
+export type { ButtonProps } from './components/Button';
+export { Checkbox } from './components/Checkbox';
+export type { CheckboxProps } from './components/Checkbox';
+export { CheckboxGroup } from './components/CheckboxGroup';
+export type { CheckboxGroupProps } from './components/CheckboxGroup';
+export { Input } from './components/Input';
+export type { InputProps } from './components/Input';
+export { MultiSelect } from './components/MultiSelect';
+export type { MultiSelectOption, MultiSelectProps } from './components/MultiSelect';
+export { Radio } from './components/Radio';
+export type { RadioProps } from './components/Radio';
+export { RadioGroup } from './components/RadioGroup';
+export type { RadioGroupProps } from './components/RadioGroup';
+export { Select } from './components/Select';
+export type { SelectOption, SelectProps } from './components/Select';
+export { Accordion, AccordionItem } from './components/Accordion';
+export type { AccordionItemProps, AccordionProps } from './components/Accordion/types';
+export { Alert } from './components/Alert';
+export type { AlertProps } from './components/Alert';
+export { Chip } from './components/Chip';
+export type { ChipProps } from './components/Chip';
+export { Menu, MenuItem } from './components/Menu';
+export type { MenuItemProps, MenuProps } from './components/Menu';
+export { Modal } from './components/Modal';
+export type { ModalProps } from './components/Modal';
+export { Toast, toast, ToastContainer, useToast } from './components/Toast';
+export type { ToastContainerProps, ToastOptions, ToastProps } from './components/Toast/types';
+export { Tooltip } from './components/Tooltip';
+export type { TooltipProps } from './components/Tooltip';
+export { Avatar } from './components/Avatar';
+export type { AvatarProps } from './components/Avatar';
+export { Badge } from './components/Badge';
+export type { BadgeProps } from './components/Badge';
+export { Card } from './components/Card';
+export type { CardProps } from './components/Card';
+export { Divider } from './components/Divider';
+export type { DividerProps } from './components/Divider';
+export { Header } from './components/Header';
+export type { HeaderProps, NotificationItem } from './components/Header';
+export { SideMenu, SideMenuItem } from './components/SideMenu';
+export type { SideMenuItemProps, SideMenuProps } from './components/SideMenu';
+export { Table } from './components/Table';
+export type { TableColumn, TableProps } from './components/Table';
+export { Text } from './components/Text';
+export type { TextProps } from './components/Text';
+export { Flex } from './components/Flex';
+export type { FlexProps } from './components/Flex';
+export { Grid } from './components/Grid';
+export type { GridProps } from './components/Grid';
+export { ThemeProvider, useThemeContext } from './theme';
+export type { Theme, ThemeProviderProps } from './theme';
+export { tokens, generateCSSVariables, injectCSSVariables } from './theme';
+export type { Tokens, ColorScale, ColorShade } from './theme';
+export { useBodyScrollLock, useClickOutside, useDebounce, useEscapeKey, useFocusTrap, useId, } from './hooks';

package/dist/types/theme/ThemeProvider.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Tokens } from './tokens';
+export type Size = 'sm' | 'md' | 'lg';
+export interface Theme {
+    tokens: Tokens;
+    mode: 'light' | 'dark';
+    defaultSize: Size;
+}
+export interface ThemeContextValue {
+    theme: Theme;
+    setMode: (mode: 'light' | 'dark') => void;
+    setDefaultSize: (size: Size) => void;
+}
+export interface ThemeProviderProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Child components that will have access to the theme */
+    children?: React.ReactNode;
+    /** Initial theme mode, defaults to 'light' */
+    initialMode?: 'light' | 'dark';
+    /** Custom theme tokens to override defaults */
+    customTokens?: Partial<Tokens>;
+    /** Global default size for components (e.g., 'md', 'sm', 'lg') */
+    defaultSize?: Size;
+}
+declare const ThemeProvider: React.ForwardRefExoticComponent<ThemeProviderProps & React.RefAttributes<HTMLDivElement>>;
+export { ThemeProvider };
+declare const _default: React.FC<ThemeProviderProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;
+/**
+ * Hook to access the current theme and theme utilities
+ *
+ * @throws {Error} If used outside of ThemeProvider
+ *
+ * @example
+ * function MyComponent() {
+ *   const { theme, setMode } = useThemeContext();
+ *   return <div style={{ color: theme.tokens.colors.primary[500] }}>Hello</div>;
+ * }
+ */
+export declare const useThemeContext: () => ThemeContextValue;

package/dist/types/theme/cssVariables.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Generates CSS variables from design tokens
+ * @returns CSS variable declarations as a string
+ */
+export declare function generateCSSVariables(): string;
+/**
+ * Injects CSS variables into the document
+ */
+export declare function injectCSSVariables(): void;

package/dist/types/theme/index.d.ts

@@ -0,0 +1,6 @@
+export { ThemeProvider, useThemeContext } from './ThemeProvider';
+export { tokens } from './tokens';
+export { generateCSSVariables, injectCSSVariables } from './cssVariables';
+export type { Theme, ThemeProviderProps } from './ThemeProvider';
+export type { Tokens, ColorScale, ColorShade } from './tokens';
+import './base.css';

package/dist/types/theme/tokens.d.ts

@@ -0,0 +1,258 @@
+/**
+ * Design tokens for the VTX UI library
+ * These tokens define the core visual language of the design system
+ */
+export declare const COLOR_KEYS: number[];
+/**
+ * Normalizes a colors object so that any string value (e.g., primary: "#fff")
+ * is expanded to an object with all color keys, while objects are left as-is.
+ * Direct object keys (e.g., primary: { 100: "#fff" }) are preserved.
+ */
+export declare function normalizeColors(colors: Record<string, any>): Record<string, any>;
+export declare const tokens: {
+    readonly colors: {
+        readonly primary: {
+            readonly 50: "#eff6ff";
+            readonly 100: "#dbeafe";
+            readonly 200: "#bfdbfe";
+            readonly 300: "#93c5fd";
+            readonly 400: "#60a5fa";
+            readonly 500: "#3b82f6";
+            readonly 600: "#2563eb";
+            readonly 700: "#1d4ed8";
+            readonly 800: "#1e40af";
+            readonly 900: "#1e3a8a";
+        };
+        readonly secondary: {
+            readonly 50: "#f5f3ff";
+            readonly 100: "#ede9fe";
+            readonly 200: "#ddd6fe";
+            readonly 300: "#c4b5fd";
+            readonly 400: "#a78bfa";
+            readonly 500: "#8b5cf6";
+            readonly 600: "#7c3aed";
+            readonly 700: "#6d28d9";
+            readonly 800: "#5b21b6";
+            readonly 900: "#4c1d95";
+        };
+        readonly neutral: {
+            readonly 50: "#fafafa";
+            readonly 100: "#f5f5f5";
+            readonly 200: "#e5e5e5";
+            readonly 300: "#d4d4d4";
+            readonly 400: "#a3a3a3";
+            readonly 500: "#737373";
+            readonly 600: "#525252";
+            readonly 700: "#404040";
+            readonly 800: "#262626";
+            readonly 900: "#171717";
+        };
+        readonly success: {
+            readonly 50: "#f0fdf4";
+            readonly 500: "#22c55e";
+            readonly 600: "#16a34a";
+            readonly 700: "#15803d";
+        };
+        readonly warning: {
+            readonly 50: "#fffbeb";
+            readonly 500: "#f59e0b";
+            readonly 600: "#d97706";
+            readonly 700: "#b45309";
+        };
+        readonly error: {
+            readonly 50: "#fef2f2";
+            readonly 500: "#ef4444";
+            readonly 600: "#dc2626";
+            readonly 700: "#b91c1c";
+        };
+        readonly info: {
+            readonly 50: "#eff6ff";
+            readonly 500: "#3b82f6";
+            readonly 600: "#2563eb";
+            readonly 700: "#1d4ed8";
+        };
+    };
+    readonly spacing: {
+        readonly 0: "0";
+        readonly 1: "0.25rem";
+        readonly 2: "0.5rem";
+        readonly 3: "0.75rem";
+        readonly 4: "1rem";
+        readonly 5: "1.25rem";
+        readonly 6: "1.5rem";
+        readonly 8: "2rem";
+        readonly 10: "2.5rem";
+        readonly 12: "3rem";
+        readonly 16: "4rem";
+        readonly 20: "5rem";
+        readonly 24: "6rem";
+    };
+    readonly typography: {
+        readonly fontFamily: {
+            readonly sans: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
+            readonly mono: "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace";
+        };
+        readonly fontSize: {
+            readonly xs: "0.75rem";
+            readonly sm: "0.875rem";
+            readonly base: "1rem";
+            readonly lg: "1.125rem";
+            readonly xl: "1.25rem";
+            readonly '2xl': "1.5rem";
+            readonly '3xl': "1.875rem";
+            readonly '4xl': "2.25rem";
+            readonly '5xl': "3rem";
+            readonly '6xl': "3.75rem";
+            readonly '7xl': "4.5rem";
+            readonly '8xl': "6rem";
+            readonly '9xl': "8rem";
+        };
+        readonly fontWeight: {
+            readonly thin: "100";
+            readonly extralight: "200";
+            readonly light: "300";
+            readonly normal: "400";
+            readonly medium: "500";
+            readonly semibold: "600";
+            readonly bold: "700";
+            readonly extrabold: "800";
+            readonly black: "900";
+        };
+        readonly lineHeight: {
+            readonly none: "1";
+            readonly tight: "1.25";
+            readonly snug: "1.375";
+            readonly normal: "1.5";
+            readonly relaxed: "1.625";
+            readonly loose: "2";
+        };
+        readonly letterSpacing: {
+            readonly tighter: "-0.05em";
+            readonly tight: "-0.025em";
+            readonly normal: "0";
+            readonly wide: "0.025em";
+            readonly wider: "0.05em";
+            readonly widest: "0.1em";
+        };
+        readonly textVariants: {
+            readonly h1: {
+                readonly fontSize: "3.75rem";
+                readonly fontWeight: "700";
+                readonly lineHeight: "1.2";
+                readonly letterSpacing: "-0.025em";
+            };
+            readonly h2: {
+                readonly fontSize: "3rem";
+                readonly fontWeight: "700";
+                readonly lineHeight: "1.25";
+                readonly letterSpacing: "-0.025em";
+            };
+            readonly h3: {
+                readonly fontSize: "2.25rem";
+                readonly fontWeight: "600";
+                readonly lineHeight: "1.3";
+                readonly letterSpacing: "-0.025em";
+            };
+            readonly h4: {
+                readonly fontSize: "1.875rem";
+                readonly fontWeight: "600";
+                readonly lineHeight: "1.35";
+                readonly letterSpacing: "0";
+            };
+            readonly h5: {
+                readonly fontSize: "1.5rem";
+                readonly fontWeight: "600";
+                readonly lineHeight: "1.4";
+                readonly letterSpacing: "0";
+            };
+            readonly h6: {
+                readonly fontSize: "1.25rem";
+                readonly fontWeight: "600";
+                readonly lineHeight: "1.5";
+                readonly letterSpacing: "0";
+            };
+            readonly body1: {
+                readonly fontSize: "1rem";
+                readonly fontWeight: "400";
+                readonly lineHeight: "1.5";
+                readonly letterSpacing: "0";
+            };
+            readonly body2: {
+                readonly fontSize: "0.875rem";
+                readonly fontWeight: "400";
+                readonly lineHeight: "1.5";
+                readonly letterSpacing: "0";
+            };
+            readonly subtitle1: {
+                readonly fontSize: "1.125rem";
+                readonly fontWeight: "500";
+                readonly lineHeight: "1.5";
+                readonly letterSpacing: "0";
+            };
+            readonly subtitle2: {
+                readonly fontSize: "1rem";
+                readonly fontWeight: "500";
+                readonly lineHeight: "1.5";
+                readonly letterSpacing: "0";
+            };
+            readonly caption: {
+                readonly fontSize: "0.75rem";
+                readonly fontWeight: "400";
+                readonly lineHeight: "1.5";
+                readonly letterSpacing: "0.025em";
+            };
+            readonly overline: {
+                readonly fontSize: "0.75rem";
+                readonly fontWeight: "600";
+                readonly lineHeight: "1.5";
+                readonly letterSpacing: "0.1em";
+                readonly textTransform: "uppercase";
+            };
+            readonly button: {
+                readonly fontSize: "0.875rem";
+                readonly fontWeight: "600";
+                readonly lineHeight: "1.5";
+                readonly letterSpacing: "0.025em";
+            };
+            readonly label: {
+                readonly fontSize: "0.875rem";
+                readonly fontWeight: "500";
+                readonly lineHeight: "1.5";
+                readonly letterSpacing: "0";
+            };
+        };
+    };
+    readonly borderRadius: {
+        readonly none: "0";
+        readonly sm: "0.125rem";
+        readonly base: "0.25rem";
+        readonly md: "0.375rem";
+        readonly lg: "0.5rem";
+        readonly xl: "0.75rem";
+        readonly '2xl': "1rem";
+        readonly full: "9999px";
+    };
+    readonly shadows: {
+        readonly sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)";
+        readonly base: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)";
+        readonly md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
+        readonly lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)";
+        readonly xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)";
+        readonly none: "none";
+    };
+    readonly transitions: {
+        readonly fast: "150ms cubic-bezier(0.4, 0, 0.2, 1)";
+        readonly base: "200ms cubic-bezier(0.4, 0, 0.2, 1)";
+        readonly slow: "300ms cubic-bezier(0.4, 0, 0.2, 1)";
+    };
+    readonly zIndex: {
+        readonly dropdown: 1000;
+        readonly sticky: 1100;
+        readonly modal: 1200;
+        readonly tooltip: 1300;
+        readonly notification: 1400;
+    };
+};
+export type Tokens = typeof tokens;
+export type ColorScale = keyof typeof tokens.colors;
+export type ColorShade = keyof typeof tokens.colors.primary;

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@vtx-ui/react",
+  "version": "0.0.1-beta.1",
+  "description": "A production-ready React + TypeScript UI library with enterprise-grade components",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "author": "Innostes Solutions Pvt Ltd <contact@innostes.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/vertex-ui/react"
+  },
+  "homepage": "https://innostes.com/",
+  "bugs": {
+    "url": "https://github.com/vertex-ui/react/issues"
+  },
+  "scripts": {
+    "build": "rollup -c",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage"
+  },
+  "peerDependencies": {
+    "react": ">=17",
+    "react-dom": ">=17"
+  },
+  "devDependencies": {
+    
+    "@rollup/plugin-typescript": "^12.3.0",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/jest": "^30.0.0",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^30.2.0",
+    "jest-axe": "^7.0.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "rollup": "^2.79.2",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-terser": "^7.0.2",
+    "ts-jest": "^29.4.6"
+  },
+  "dependencies": {
+    "tslib": "^2.8.1"
+  }
+}