@g1itest/ui

The canonical, accessible, theme-aware React UI component library for the Ginesys Design System.

Features

• 16 Canonical Primitives: Foundations, Actions, Inputs, Feedback, Overlays, and Layout.
• Strict Visual Fidelity: Exact port of Ginesys Insights design language, preserving established tokens, radii, elevations, and focus rings.
• Theme-Aware: Seamless light and dark mode support powered by @g1itest/tokens.
• Accessible by Default: Built on top of Radix UI primitives with full keyboard navigation, screen-reader labels, and WCAG AA contrast.
• Tree-Shakeable: Clean ESM/CJS exports with granular component subdirectories.
• Framework Agnostic Composition: Powered by asChild (Radix Slot) for seamless routing integration without tight coupling to Next.js or React Router.

Installation

# In your project:
npm install @g1itest/ui @g1itest/tokens

Styling Setup

Import the canonical stylesheet at your application root (e.g., app/layout.tsx or pages/_app.tsx):

import '@g1itest/tokens/styles.css';
import '@g1itest/ui/styles.css';

Usage Example

import * as React from 'react';
import {
  Button,
  Input,
  Checkbox,
  Switch,
  SwitchItem,
  Select,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectItem,
  NativeSelect,
  Label,
  Badge,
  Alert,
  Tooltip,
  Modal,
  AlertDialog,
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
  Avatar,
  Separator,
  FilledShield,
} from '@g1itest/ui';

export function ExamplePage() {
  const [open, setOpen] = React.useState(false);

  return (
    <Card className="max-w-md mx-auto my-8">
      <CardHeader>
        <div className="flex items-center gap-2">
          <Avatar initials="JD" seed="user-123" />
          <div>
            <CardTitle>Workbook Settings</CardTitle>
            <CardDescription>Configure analytical parameters</CardDescription>
          </div>
        </div>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="space-y-1.5">
          <Label htmlFor="wb-name">Workbook Name</Label>
          <Input id="wb-name" placeholder="Quarterly Insights" />
        </div>
        <SwitchItem
          label="Auto-refresh"
          description="Synchronize table metrics every minute"
          checked={true}
          onCheckedChange={() => {}}
        />
      </CardContent>
      <CardFooter className="justify-end gap-2">
        <Button variant="outline">Cancel</Button>
        <Button variant="default" onClick={() => setOpen(true)}>Save Changes</Button>
      </CardFooter>

      <Modal isOpen={open} onClose={() => setOpen(false)} title="Confirm Save">
        <p className="text-sm text-[var(--text-secondary)]">
          Are you sure you want to apply these configuration settings?
        </p>
      </Modal>
    </Card>
  );
}

Components Implemented (v0.1.0)

1. Foundations: Separator, Avatar, Badge, FilledShield
2. Actions: Button (8 variants, 10 sizes, loading, icons)
3. Inputs: Input, Checkbox, Switch / SwitchItem, Select, NativeSelect, Label
4. Feedback: Alert (5 tones), Tooltip / InfoTooltip
5. Overlays: Modal, AlertDialog, Popover
6. Layout: Card (CardHeader, CardTitle, CardDescription, CardContent, CardFooter)