@gv-tech/design-system 2.3.0 → 2.5.0

package/packages/design-tokens/src/shadows.ts

@@ -0,0 +1,16 @@
+// Shadow / elevation tokens for the GV Tech design system.
+// Web values use CSS box-shadow syntax.
+// Native consumers should map these to platform-specific elevation or shadow props.
+
+export const shadows = {
+  none: 'none',
+  sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
+  default: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
+  md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
+  lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
+  xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
+  '2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)',
+  inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
+} as const;
+
+export type ShadowTokens = typeof shadows;

package/packages/design-tokens/src/spacing.ts

@@ -0,0 +1,33 @@
+// Spacing scale for the GV Tech design system.
+// Based on a 4px baseline grid. Values are in rem (assuming 16px root font size).
+
+export const spacing = {
+  px: '1px',
+  0: '0',
+  0.5: '0.125rem', // 2px
+  1: '0.25rem', // 4px
+  1.5: '0.375rem', // 6px
+  2: '0.5rem', // 8px
+  2.5: '0.625rem', // 10px
+  3: '0.75rem', // 12px
+  3.5: '0.875rem', // 14px
+  4: '1rem', // 16px
+  5: '1.25rem', // 20px
+  6: '1.5rem', // 24px
+  7: '1.75rem', // 28px
+  8: '2rem', // 32px
+  9: '2.25rem', // 36px
+  10: '2.5rem', // 40px
+  12: '3rem', // 48px
+  14: '3.5rem', // 56px
+  16: '4rem', // 64px
+  20: '5rem', // 80px
+  24: '6rem', // 96px
+  32: '8rem', // 128px
+  40: '10rem', // 160px
+  48: '12rem', // 192px
+  56: '14rem', // 224px
+  64: '16rem', // 256px
+} as const;
+
+export type SpacingTokens = typeof spacing;

package/packages/design-tokens/src/theme.ts

@@ -0,0 +1,54 @@
+// Semantic theme tokens for the GV Tech design system.
+// These map primitive palette values to semantic roles (background, foreground, etc.)
+// for both light and dark modes. Components should reference these tokens, not palette directly.
+
+import { palette } from './palette';
+
+export const theme = {
+  light: {
+    background: palette.neutral.gray50,
+    foreground: palette.neutral.gray600,
+    card: palette.neutral.white,
+    cardForeground: palette.neutral.gray600,
+    popover: palette.neutral.white,
+    popoverForeground: palette.neutral.gray600,
+    primary: palette.brand.blue,
+    primaryForeground: palette.neutral.white,
+    secondary: palette.semantic.success,
+    secondaryForeground: palette.neutral.white,
+    muted: palette.neutral.gray100,
+    mutedForeground: palette.neutral.gray500,
+    accent: palette.neutral.gray300,
+    accentForeground: palette.neutral.gray600,
+    destructive: palette.semantic.destructive,
+    destructiveForeground: palette.neutral.white,
+    border: palette.neutral.gray200,
+    input: palette.neutral.gray200,
+    ring: palette.neutral.gray600,
+    radius: '0.5rem',
+  },
+  dark: {
+    background: palette.neutral.gray975,
+    foreground: palette.neutral.white,
+    card: palette.neutral.gray900,
+    cardForeground: palette.neutral.white,
+    popover: palette.neutral.gray950,
+    popoverForeground: palette.neutral.white,
+    primary: 'hsl(227 96% 71%)', // Keeping as specific HSL to match original
+    primaryForeground: palette.neutral.gray975,
+    secondary: palette.semantic.successDark,
+    secondaryForeground: palette.neutral.gray975,
+    muted: palette.neutral.gray990,
+    mutedForeground: palette.neutral.gray400,
+    accent: palette.neutral.gray800,
+    accentForeground: palette.neutral.white,
+    destructive: palette.semantic.destructiveDark,
+    destructiveForeground: palette.neutral.white,
+    border: palette.neutral.gray700,
+    input: palette.neutral.gray700,
+    ring: 'hsl(0 0% 90%)', // Platinum
+    radius: '0.5rem',
+  },
+} as const;
+
+export type ThemeTokens = typeof theme.light;

package/packages/design-tokens/src/typography.ts

@@ -0,0 +1,36 @@
+// Typography tokens for the GV Tech design system.
+// Defines font families, sizes, weights, and line heights.
+
+export const typography = {
+  fontFamily: {
+    sans: 'Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+    mono: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace',
+  },
+  fontSize: {
+    xs: '0.75rem', // 12px
+    sm: '0.875rem', // 14px
+    base: '1rem', // 16px
+    lg: '1.125rem', // 18px
+    xl: '1.25rem', // 20px
+    '2xl': '1.5rem', // 24px
+    '3xl': '1.875rem', // 30px
+    '4xl': '2.25rem', // 36px
+    '5xl': '3rem', // 48px
+  },
+  fontWeight: {
+    normal: '400',
+    medium: '500',
+    semibold: '600',
+    bold: '700',
+  },
+  lineHeight: {
+    none: '1',
+    tight: '1.25',
+    snug: '1.375',
+    normal: '1.5',
+    relaxed: '1.625',
+    loose: '2',
+  },
+} as const;
+
+export type TypographyTokens = typeof typography;

package/packages/design-tokens/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "outDir": "dist",
+    "rootDir": "src"
+  },
+  "include": ["src"]
+}

package/packages/ui-core/CHANGELOG.md

@@ -0,0 +1,8 @@
+# Changelog
+
+## [0.1.0](https://github.com/Garcia-Ventures/gvtech-design/compare/ui-core-v0.0.1...ui-core-v0.1.0) (2026-02-20)
+
+
+### Features
+
+* **universal:** pivot to monorepo architecture and stabilize react native support ([#63](https://github.com/Garcia-Ventures/gvtech-design/issues/63)) ([3458938](https://github.com/Garcia-Ventures/gvtech-design/commit/3458938c17bdfc7a7f5eea0053b7bf1786a571fa))

package/packages/ui-core/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@gv-tech/ui-core",
+  "version": "0.1.0",
+  "description": "Shared component contracts (props, variants, sizes) for the GV Tech design system",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Garcia-Ventures/gvtech-design.git",
+    "directory": "packages/ui-core"
+  },
+  "license": "MIT",
+  "author": "Eric N. Garcia <eng618@garciaericn.com>",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
+    },
+    "./contracts/*": {
+      "types": "./src/contracts/*.ts",
+      "default": "./src/contracts/*.ts"
+    }
+  },
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "scripts": {
+    "build": "echo 'No build step — consumed as TS source by sibling packages'",
+    "lint": "echo 'Linted from workspace root'",
+    "test": "echo 'No tests yet'",
+    "typecheck": "yarn tsc --noEmit"
+  },
+  "dependencies": {
+    "class-variance-authority": "^0.7.1"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  }
+}

package/packages/ui-core/src/contracts/accordion.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+
+export interface AccordionBaseProps {
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export interface AccordionItemBaseProps {
+  value: string;
+  disabled?: boolean;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export interface AccordionTriggerBaseProps {
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export interface AccordionContentBaseProps {
+  className?: string;
+  children?: React.ReactNode;
+}

package/packages/ui-core/src/contracts/alert-dialog.ts

@@ -0,0 +1,48 @@
+import * as React from 'react';
+
+export interface AlertDialogBaseProps {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  children?: React.ReactNode;
+}
+
+export interface AlertDialogContentBaseProps {
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export interface AlertDialogHeaderBaseProps {
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export interface AlertDialogFooterBaseProps {
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export interface AlertDialogTitleBaseProps {
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export interface AlertDialogDescriptionBaseProps {
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export interface AlertDialogActionBaseProps {
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export interface AlertDialogCancelBaseProps {
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export interface AlertDialogTriggerBaseProps {
+  className?: string;
+  children?: React.ReactNode;
+  asChild?: boolean;
+}

package/packages/ui-core/src/contracts/alert.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+
+export interface AlertBaseProps {
+  variant?: 'default' | 'destructive' | 'warning' | 'info';
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export interface AlertTitleBaseProps {
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export interface AlertDescriptionBaseProps {
+  className?: string;
+  children?: React.ReactNode;
+}

package/packages/ui-core/src/contracts/aspect-ratio.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+
+export interface AspectRatioBaseProps {
+  ratio?: number;
+  className?: string;
+  children?: React.ReactNode;
+}

package/packages/ui-core/src/contracts/avatar.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+
+export interface AvatarBaseProps {
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export interface AvatarImageBaseProps {
+  className?: string;
+  src?: string;
+  alt?: string;
+}
+
+export interface AvatarFallbackBaseProps {
+  className?: string;
+  children?: React.ReactNode;
+}

package/packages/ui-core/src/contracts/badge.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+
+export interface BadgeBaseProps {
+  variant?: 'default' | 'secondary' | 'destructive' | 'outline';
+  className?: string;
+  children?: React.ReactNode;
+}

package/packages/ui-core/src/contracts/breadcrumb.ts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+
+export interface BreadcrumbBaseProps {
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export interface BreadcrumbListBaseProps {
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export interface BreadcrumbItemBaseProps {
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export interface BreadcrumbLinkBaseProps {
+  className?: string;
+  children?: React.ReactNode;
+  asChild?: boolean;
+}
+
+export interface BreadcrumbPageBaseProps {
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export interface BreadcrumbSeparatorBaseProps {
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export interface BreadcrumbEllipsisBaseProps {
+  className?: string;
+  children?: React.ReactNode;
+}

package/packages/ui-core/src/contracts/button.ts

@@ -0,0 +1,17 @@
+// Shared Button variant and size contracts.
+// Both ui-web and ui-native implementations must satisfy these types.
+
+export const buttonVariantValues = ['default', 'destructive', 'outline', 'secondary', 'ghost', 'link'] as const;
+export type ButtonVariant = (typeof buttonVariantValues)[number];
+
+export const buttonSizeValues = ['default', 'sm', 'lg', 'icon'] as const;
+export type ButtonSize = (typeof buttonSizeValues)[number];
+
+// Platform-agnostic props shared by every Button implementation.
+// Does NOT include variant/size — those come from platform-specific CVA bindings
+// to avoid type conflicts with VariantProps.
+export interface ButtonBaseProps {
+  disabled?: boolean;
+  className?: string;
+  children?: React.ReactNode;
+}

package/packages/ui-core/src/contracts/calendar.ts

@@ -0,0 +1,4 @@
+export interface CalendarBaseProps {
+  className?: string;
+  showOutsideDays?: boolean;
+}

package/packages/ui-core/src/contracts/card.ts

@@ -0,0 +1,11 @@
+// Shared Card contracts.
+// Both ui-web and ui-native implementations must satisfy these types.
+
+// Platform-agnostic props shared by every Card sub-component.
+export interface CardBaseProps {
+  className?: string;
+  children?: React.ReactNode;
+}
+
+// Card exports the same sub-components on both platforms.
+export type CardSubComponent = 'Card' | 'CardHeader' | 'CardTitle' | 'CardDescription' | 'CardContent' | 'CardFooter';

package/packages/ui-core/src/contracts/carousel.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+
+export interface CarouselBaseProps {
+  className?: string;
+  children?: React.ReactNode;
+  orientation?: 'horizontal' | 'vertical';
+}
+
+export interface CarouselContentBaseProps {
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export interface CarouselItemBaseProps {
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export interface CarouselPreviousBaseProps {
+  className?: string;
+  variant?: string;
+  size?: string;
+}
+
+export interface CarouselNextBaseProps {
+  className?: string;
+  variant?: string;
+  size?: string;
+}

package/packages/ui-core/src/contracts/chart.ts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+
+export type ChartConfig = {
+  [k in string]: {
+    label?: React.ReactNode;
+    icon?: React.ComponentType;
+  } & ({ color?: string; theme?: never } | { color?: never; theme: Record<string, string> });
+};
+
+export interface ChartContainerBaseProps {
+  config: ChartConfig;
+  className?: string;
+  children?: React.ReactNode;
+  id?: string;
+}
+
+export interface ChartTooltipContentBaseProps {
+  hideLabel?: boolean;
+  hideIndicator?: boolean;
+  indicator?: 'line' | 'dot' | 'dashed';
+  nameKey?: string;
+  labelKey?: string;
+  className?: string;
+  labelClassName?: string;
+}
+
+export interface ChartLegendContentBaseProps {
+  hideIcon?: boolean;
+  nameKey?: string;
+  className?: string;
+}

package/packages/ui-core/src/contracts/checkbox.ts

@@ -0,0 +1,11 @@
+// Shared Checkbox contracts.
+// Both ui-web and ui-native implementations must satisfy these types.
+
+// Platform-agnostic props shared by every Checkbox implementation.
+export interface CheckboxBaseProps {
+  checked?: boolean;
+  defaultChecked?: boolean;
+  disabled?: boolean;
+  className?: string;
+  onCheckedChange?: (checked: boolean) => void;
+}

package/packages/ui-core/src/contracts/collapsible.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+
+export interface CollapsibleBaseProps {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  disabled?: boolean;
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export interface CollapsibleTriggerBaseProps {
+  asChild?: boolean;
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export interface CollapsibleContentBaseProps {
+  asChild?: boolean;
+  children?: React.ReactNode;
+  className?: string;
+}

package/packages/ui-core/src/contracts/command.ts

@@ -0,0 +1,43 @@
+import * as React from 'react';
+
+export interface CommandBaseProps {
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export interface CommandInputBaseProps {
+  className?: string;
+  placeholder?: string;
+}
+
+export interface CommandListBaseProps {
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export interface CommandEmptyBaseProps {
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export interface CommandGroupBaseProps {
+  className?: string;
+  children?: React.ReactNode;
+  heading?: React.ReactNode;
+}
+
+export interface CommandItemBaseProps {
+  className?: string;
+  children?: React.ReactNode;
+  onSelect?: (value: string) => void;
+  value?: string;
+}
+
+export interface CommandSeparatorBaseProps {
+  className?: string;
+}
+
+export interface CommandShortcutBaseProps {
+  className?: string;
+  children?: React.ReactNode;
+}

package/packages/ui-core/src/contracts/context-menu.ts

@@ -0,0 +1,78 @@
+import * as React from 'react';
+
+export interface ContextMenuBaseProps {
+  children?: React.ReactNode;
+}
+
+export interface ContextMenuTriggerBaseProps {
+  children: React.ReactNode;
+  disabled?: boolean;
+}
+
+export interface ContextMenuContentBaseProps {
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export interface ContextMenuItemBaseProps {
+  className?: string;
+  children?: React.ReactNode;
+  inset?: boolean;
+  disabled?: boolean;
+  onSelect?: (event: Event) => void;
+}
+
+export interface ContextMenuCheckboxItemBaseProps {
+  className?: string;
+  children?: React.ReactNode;
+  checked?: boolean | 'indeterminate';
+  onCheckedChange?: (checked: boolean) => void;
+  disabled?: boolean;
+}
+
+export interface ContextMenuRadioItemBaseProps {
+  className?: string;
+  children?: React.ReactNode;
+  value: string;
+  disabled?: boolean;
+}
+
+export interface ContextMenuLabelBaseProps {
+  className?: string;
+  children?: React.ReactNode;
+  inset?: boolean;
+}
+
+export interface ContextMenuSeparatorBaseProps {
+  className?: string;
+}
+
+export interface ContextMenuShortcutBaseProps {
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export interface ContextMenuSubBaseProps {
+  children?: React.ReactNode;
+}
+
+export interface ContextMenuSubTriggerBaseProps {
+  className?: string;
+  children?: React.ReactNode;
+  inset?: boolean;
+}
+
+export interface ContextMenuSubContentBaseProps {
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export interface ContextMenuGroupBaseProps {
+  children?: React.ReactNode;
+}
+
+export interface ContextMenuRadioGroupBaseProps {
+  children?: React.ReactNode;
+  value?: string;
+  onValueChange?: (value: string) => void;
+}

package/packages/ui-core/src/contracts/dialog.ts

@@ -0,0 +1,29 @@
+// Shared Dialog / Sheet contracts.
+// Maps to Dialog on web, BottomSheet / Modal on native.
+
+// Platform-agnostic props shared by every Dialog implementation.
+export interface DialogBaseProps {
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  children?: React.ReactNode;
+}
+
+// Platform-agnostic props for Dialog content area.
+export interface DialogContentBaseProps {
+  className?: string;
+  children?: React.ReactNode;
+  title?: string;
+  description?: string;
+}
+
+// Dialog exports the same sub-components on both platforms.
+export type DialogSubComponent =
+  | 'Dialog'
+  | 'DialogTrigger'
+  | 'DialogContent'
+  | 'DialogHeader'
+  | 'DialogTitle'
+  | 'DialogDescription'
+  | 'DialogFooter'
+  | 'DialogClose';