aibos-design-system 1.0.0 → 1.1.0

package/types/aibos-classes.ts

@@ -0,0 +1,70 @@
+/**
+ * AIBOS Design System - TypeScript Types for CSS Classes
+ * 
+ * Provides type-safe class names for AIBOS design system
+ * Based on NEXTJS_DESIGN_SYSTEM_IMPROVEMENTS.md requirements
+ */
+
+/**
+ * Status variant classes
+ * Uses space-separated modifier classes (e.g., "na-status ok")
+ */
+export type AIBOSStatusVariant = 'ok' | 'bad' | 'warn' | 'pending';
+
+/**
+ * Typography classes
+ */
+export type AIBOSTypographyClass = 
+  | 'na-h1' 
+  | 'na-h2' 
+  | 'na-h4' 
+  | 'na-data' 
+  | 'na-data-large' 
+  | 'na-metadata';
+
+/**
+ * Component classes
+ */
+export type AIBOSComponentClass =
+  | 'na-card'
+  | 'na-btn'
+  | 'na-btn-primary'
+  | 'na-status'
+  | 'na-container';
+
+/**
+ * Status class builder
+ * Returns space-separated classes as per AIBOS guidelines
+ */
+export type StatusClass = `na-status ${AIBOSStatusVariant}`;
+
+/**
+ * All AIBOS classes
+ */
+export type AIBOSClass = 
+  | AIBOSTypographyClass 
+  | AIBOSComponentClass 
+  | StatusClass
+  | `na-status ${AIBOSStatusVariant}`;
+
+/**
+ * Helper type for building status classes
+ */
+export function getStatusClass(variant: AIBOSStatusVariant): StatusClass {
+  return `na-status ${variant}` as StatusClass;
+}
+
+/**
+ * Type guard for status variants
+ */
+export function isStatusVariant(value: string): value is AIBOSStatusVariant {
+  return ['ok', 'bad', 'warn', 'pending'].includes(value);
+}
+
+/**
+ * Type guard for typography classes
+ */
+export function isTypographyClass(value: string): value is AIBOSTypographyClass {
+  return ['na-h1', 'na-h2', 'na-h4', 'na-data', 'na-data-large', 'na-metadata'].includes(value);
+}
+

package/types/design-tokens.ts

@@ -0,0 +1,83 @@
+/**
+ * AIBOS Design System - Enhanced Design Tokens
+ * 
+ * Type-safe design tokens for use in TypeScript/React applications
+ * Based on NEXTJS_DESIGN_SYSTEM_IMPROVEMENTS.md requirements
+ */
+
+/**
+ * Color tokens
+ */
+export const colors = {
+  success: 'var(--color-success)',
+  error: 'var(--color-error)',
+  warning: 'var(--color-warning)',
+  info: 'var(--color-info)',
+  primary: 'var(--color-primary)',
+  secondary: 'var(--color-secondary)',
+  foreground: 'var(--color-foreground)',
+  background: 'var(--color-background)',
+  muted: 'var(--color-muted)',
+  border: 'var(--color-border)',
+} as const;
+
+/**
+ * Spacing tokens
+ */
+export const spacing = {
+  xs: 'var(--spacing-1)',
+  sm: 'var(--spacing-2)',
+  md: 'var(--spacing-4)',
+  lg: 'var(--spacing-6)',
+  xl: 'var(--spacing-8)',
+  '2xl': 'var(--spacing-12)',
+} as const;
+
+/**
+ * Typography tokens
+ */
+export const typography = {
+  h1: { 
+    size: '32px', 
+    weight: 'semibold',
+    class: 'na-h1' as const,
+  },
+  h2: { 
+    size: '24px', 
+    weight: 'semibold',
+    class: 'na-h2' as const,
+  },
+  h4: { 
+    size: '18px', 
+    weight: 'semibold',
+    class: 'na-h4' as const,
+  },
+  data: { 
+    size: '14px', 
+    family: 'monospace',
+    class: 'na-data' as const,
+  },
+  dataLarge: {
+    size: '30px',
+    family: 'serif',
+    class: 'na-data-large' as const,
+  },
+  metadata: {
+    size: '11px',
+    weight: '500',
+    transform: 'uppercase',
+    class: 'na-metadata' as const,
+  },
+} as const;
+
+/**
+ * Design tokens object
+ */
+export const designTokens = {
+  colors,
+  spacing,
+  typography,
+} as const;
+
+export type DesignTokens = typeof designTokens;
+

package/types/index.ts

@@ -0,0 +1,9 @@
+/**
+ * AIBOS Design System - TypeScript Types
+ * 
+ * Central export for all TypeScript types
+ */
+
+export * from './aibos-classes';
+export * from './design-tokens';
+