@gtcx/ui 0.1.0

package/dist/themes/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Re-export canonical theme utilities from @gtcx/theme.
+ */
+export { createAntdTheme, GtcxConfigProvider, useGtcxTheme } from '@gtcx/theme';
+export type { CreateAntdThemeOptions, TokensOverride, ThemeMode, ThemeDensity, GtcxConfigProviderProps, } from '@gtcx/theme';
+//# sourceMappingURL=index.d.ts.map

package/dist/themes/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/themes/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChF,YAAY,EACV,sBAAsB,EACtB,cAAc,EACd,SAAS,EACT,YAAY,EACZ,uBAAuB,GACxB,MAAM,aAAa,CAAC"}

package/dist/tokens/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Re-export canonical tokens from @gtcx/tokens, aliased to preserve
+ * @gtcx/ui's existing public API names.
+ */
+export { colorPrimitives as colors, darkColors, spacingPrimitives as spacing, fontFamilyPrimitives as fontFamilies, fontWeightPrimitives as fontWeights, fontSizePrimitives as fontSizes, lineHeightPrimitives as lineHeights, letterSpacingPrimitives as letterSpacing, borderRadiusPrimitives as radii, shadowPrimitives as shadows, breakpointPrimitives as breakpoints, zIndexPrimitives as zIndex, transitionPrimitives as transitions, semanticColors as colorTokens, semanticSpacing as spacingTokens, semanticTypography as typography, } from '@gtcx/tokens';
+//# sourceMappingURL=index.d.ts.map

package/dist/tokens/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/tokens/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,EAEL,eAAe,IAAI,MAAM,EACzB,UAAU,EACV,iBAAiB,IAAI,OAAO,EAC5B,oBAAoB,IAAI,YAAY,EACpC,oBAAoB,IAAI,WAAW,EACnC,kBAAkB,IAAI,SAAS,EAC/B,oBAAoB,IAAI,WAAW,EACnC,uBAAuB,IAAI,aAAa,EACxC,sBAAsB,IAAI,KAAK,EAC/B,gBAAgB,IAAI,OAAO,EAC3B,oBAAoB,IAAI,WAAW,EACnC,gBAAgB,IAAI,MAAM,EAC1B,oBAAoB,IAAI,WAAW,EAEnC,cAAc,IAAI,WAAW,EAC7B,eAAe,IAAI,aAAa,EAChC,kBAAkB,IAAI,UAAU,GACjC,MAAM,cAAc,CAAC"}

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@gtcx/ui",
+  "version": "0.1.0",
+  "description": "GTCX shared UI components and design system",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsup && tsc --emitDeclarationOnly --declaration --outDir dist",
+    "dev": "tsup src/index.ts --format esm,cjs --dts --watch",
+    "lint": "eslint src/",
+    "typecheck": "tsc --noEmit",
+    "type-check": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage"
+  },
+  "dependencies": {
+    "@ant-design/icons": "^5.2.0",
+    "@gtcx/theme": "workspace:*",
+    "@gtcx/tokens": "workspace:*",
+    "@gtcx/utils": "workspace:*",
+    "antd": "^5.12.0",
+    "framer-motion": "^10.16.0",
+    "lucide-react": "^0.294.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@testing-library/react": "14",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@vitest/coverage-v8": "^2.1.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0",
+    "vitest": "^2.1.0"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/readme.md

@@ -0,0 +1,143 @@
+# @gtcx/ui
+
+Shared UI components and design system for all GTCX platforms and applications.
+
+## Installation
+
+```bash
+pnpm add @gtcx/ui
+```
+
+## Usage
+
+### Theme provider
+
+```tsx
+import { GtcxConfigProvider } from '@gtcx/theme';
+
+function App() {
+  return (
+    <GtcxConfigProvider>
+      <YourApp />
+    </GtcxConfigProvider>
+  );
+}
+```
+
+### Components
+
+```tsx
+import { Header, Card, CardContent, Button, Badge, AIInsightCard } from '@gtcx/ui';
+
+// Application header
+<Header user={{ name: 'Kwame', email: 'kwame@example.com' }} />
+
+// Card with badge and button
+<Card variant="elevated">
+  <CardContent>
+    <Badge variant="success">Verified</Badge>
+    <Button variant="primary">Submit</Button>
+  </CardContent>
+</Card>
+
+// AI insight card
+<AIInsightCard
+  type="prediction"
+  title="Revenue Forecast"
+  description="Expected 15% increase in Q2"
+  confidence={87}
+  impact="high"
+  actions={['Review forecast', 'Update targets']}
+/>
+```
+
+### Tokens
+
+```tsx
+import { colorPrimitives, semanticSpacing } from '@gtcx/tokens';
+
+const style = {
+  color: colorPrimitives.primary[500],
+  padding: semanticSpacing.md,
+};
+```
+
+### Hooks
+
+```tsx
+import { useBreakpoint, useResponsive } from '@gtcx/ui';
+
+function Component() {
+  const { isMobile, isDesktop } = useBreakpoint();
+  const padding = useResponsive({ xs: 8, md: 16, lg: 24 });
+
+  return <div style={{ padding }}>{isMobile ? 'Mobile' : 'Desktop'}</div>;
+}
+```
+
+## Components (53+)
+
+### Navigation (10)
+
+SideNav, Toolbar, Breadcrumbs, MegaMenu, DropdownMenu, ContextMenu, Menubar, Command, Tabs, NavigationMenu
+
+### Data Display (8)
+
+AdvancedTable, Card, Badge, Avatar, Skeleton, DataVisualization, AvatarGroup, Rating
+
+### Forms (14)
+
+Button, Input, Label, Checkbox, Switch, Select, Textarea, Form, Calendar, DatePicker, Toggle, ToggleGroup, RadioGroup, FileUpload, ImageInput
+
+### Feedback (14)
+
+Alert, Dialog, AlertDialog, Sheet, Tooltip, Popover, HoverCard, toast, Accordion, Collapsible, Progress, ContentLoader, ScreenLoader, Toaster
+
+### Layout (6)
+
+Header, Separator, ScrollArea, ResponsiveGrid, SplitPane, MetronicLayout (8 variants)
+
+### Effects (1)
+
+GlassmorphismCard
+
+### AI (1)
+
+AIInsightCard
+
+### Hooks (9)
+
+useBreakpoint, useResponsive, useBodyClass, useCopyToClipboard, useMounted, useScrollPosition, useMenu, useViewport, useSliderInput
+
+## Structure
+
+```
+src/
+├── tokens/           # Re-exports from @gtcx/tokens
+├── themes/           # Re-exports from @gtcx/theme
+├── hooks/            # Shared hooks
+└── components/
+    ├── ai/           # AI insight components
+    ├── data/         # Tables, cards, badges, avatars, skeletons
+    ├── effects/      # Visual effects (glassmorphism)
+    ├── feedback/     # Dialogs, sheets, alerts, tooltips, popovers
+    ├── forms/        # Buttons, inputs, selects, checkboxes, toggles
+    ├── layout/       # Header, separator, scroll area
+    └── navigation/   # Side nav, toolbar, menus, breadcrumbs, command
+```
+
+## Development
+
+```bash
+# Build
+pnpm build
+
+# Watch mode
+pnpm dev
+
+# Type check
+pnpm type-check
+
+# Test
+pnpm test
+```