@opencosmos/ui 1.3.1

package/src/index.ts

@@ -0,0 +1,168 @@
+// ============================================================================
+// MAIN BARREL EXPORTS - Backward Compatible
+// ============================================================================
+// All components remain importable from '@thesage/ui' root
+// Example: import { Button, Card, Dialog } from '@thesage/ui'
+
+// Actions
+export * from './components/actions/Button';
+export * from './components/actions/Link';
+export * from './components/actions/Toggle';
+export * from './components/actions/ToggleGroup';
+export * from './components/actions/Magnetic';
+
+// Forms
+export * from './components/forms/Checkbox';
+export * from './components/forms/ColorPicker';
+export * from './components/forms/Combobox';
+export * from './components/forms/DragDrop';
+export * from './components/forms/FilterButton';
+export * from './components/forms/Form';
+export * from './components/forms/Input';
+export * from './components/forms/InputOTP';
+export * from './components/forms/Label';
+export * from './components/forms/RadioGroup';
+export * from './components/forms/SearchBar';
+export * from './components/forms/Select';
+export * from './components/forms/Slider';
+export * from './components/forms/Switch';
+export * from './components/forms/TextField';
+export * from './components/forms/Textarea';
+export * from './components/forms/ThemeSwitcher';
+export * from './components/forms/ThemeToggle';
+export * from './components/forms/FileUpload';
+
+// Navigation
+export * from './components/navigation/Breadcrumb';
+export * from './components/navigation/Breadcrumbs';
+export * from './components/navigation/Command';
+export * from './components/navigation/Menubar';
+export * from './components/navigation/NavLink';
+export * from './components/navigation/NavigationMenu';
+export * from './components/navigation/Pagination';
+export * from './components/navigation/SecondaryNav';
+export * from './components/navigation/Tabs';
+export * from './components/navigation/TertiaryNav';
+
+// Overlays
+export * from './components/overlays/AlertDialog';
+export * from './components/overlays/ContextMenu';
+export * from './components/overlays/Dialog';
+export * from './components/overlays/Drawer';
+export * from './components/overlays/Dropdown';
+export * from './components/overlays/DropdownMenu';
+export * from './components/overlays/HoverCard';
+export * from './components/overlays/Modal';
+export * from './components/overlays/Popover';
+export * from './components/overlays/Sheet';
+export * from './components/overlays/Tooltip';
+export * from './components/overlays/NotificationCenter';
+
+// Feedback
+export * from './components/feedback/Alert';
+export * from './components/feedback/Progress';
+export * from './components/feedback/ProgressBar';
+export * from './components/feedback/Skeleton';
+export * from './components/feedback/Sonner';
+export * from './components/feedback/Spinner';
+export * from './components/feedback/Toast';
+export * from './components/feedback/EmptyState';
+export * from './components/feedback/Stepper';
+
+// Data Display
+export * from './components/data-display/AspectImage';
+export * from './components/data-display/Avatar';
+export * from './components/data-display/Badge';
+export * from './components/data-display/Brand';
+export * from './components/data-display/Calendar';
+export * from './components/data-display/Card';
+export * from './components/data-display/Code';
+export * from './components/data-display/CollapsibleCodeBlock';
+export * from './components/data-display/DataTable';
+export * from './components/data-display/DescriptionList';
+export * from './components/data-display/GitHubIcon';
+export * from './components/data-display/Heading';
+export * from './components/data-display/Table';
+export * from './components/data-display/Text';
+export * from './components/data-display/VariableWeightText';
+export * from './components/data-display/Typewriter';
+export * from './components/data-display/StatCard';
+export * from './components/data-display/Timeline';
+export * from './components/data-display/TreeView';
+export * from './components/blocks/social/OpenGraphCard';
+
+// Layout
+export * from './components/layout/Accordion';
+export * from './components/layout/AspectRatio';
+export * from './components/layout/Carousel';
+export * from './components/layout/Collapsible';
+export * from './components/layout/Container';
+export * from './components/layout/CustomizerPanel';
+export * from './components/layout/DatePicker';
+export * from './components/layout/Footer';
+export * from './components/layout/Grid';
+export * from './components/layout/Header';
+export * from './components/layout/PageLayout';
+export * from './components/layout/PageTemplate';
+export * from './components/layout/Resizable';
+export * from './components/layout/ScrollArea';
+export * from './components/layout/Separator';
+export * from './components/layout/Sidebar';
+export * from './components/layout/Stack';
+export * from './components/layout/GlassSurface';
+
+// Backgrounds
+export * from './components/backgrounds/WarpBackground';
+export * from './components/backgrounds/FaultyTerminal';
+
+// Motion
+export * from "./components/motion/AnimatedBeam";
+export * from "./components/backgrounds/OrbBackground";
+export * from "./components/blocks/Hero";
+export * from './components/cursor/SplashCursor';
+export * from './components/cursor/TargetCursor';
+
+// Providers
+export * from './providers/ThemeProvider';
+
+// Hooks
+export * from './hooks/useTheme';
+export * from './hooks/useMotionPreference';
+export * from './hooks/useForm';
+
+// Stores
+export * from './lib/store';
+
+// Utilities
+export * from './lib/animations';
+export * from './lib/breadcrumbs';
+export * from './lib/colors';
+export * from './lib/utils';
+export * from './lib/validation';
+export * from './lib/syntax-parser';
+
+// Tokens (selective re-exports)
+export { typographySystem } from '@thesage/tokens';
+
+// Component Registry (metadata)
+export * from './component-registry';
+
+// ============================================================================
+// OPTIONAL CATEGORY-BASED EXPORTS (Future Use)
+// ============================================================================
+// These allow category-specific imports for better code organization
+// Example: import { Button } from '@thesage/ui/actions'
+// Note: These require package.json exports configuration
+
+// Re-export categories for convenience
+export * as Actions from './components/actions';
+export * as Forms from './components/forms';
+export * as Navigation from './components/navigation';
+export * as Overlays from './components/overlays';
+export * as Feedback from './components/feedback';
+export * as DataDisplay from './components/data-display';
+export * as Layout from './components/layout';
+export * as Backgrounds from './components/backgrounds';
+export * as Motion from './components/cursor';
+export * as Providers from './providers';
+export * as Hooks from './hooks';

package/src/lib/animations.ts

@@ -0,0 +1,356 @@
+/**
+ * Animation Presets
+ *
+ * Reusable animation configurations for consistent motion throughout the design system.
+ * Works with Framer Motion and respects user motion preferences.
+ */
+
+// Type definitions (compatible with Framer Motion)
+export type Variant = {
+  [key: string]: any;
+};
+
+export type Variants = {
+  [key: string]: Variant;
+};
+
+export type Transition = {
+  duration?: number;
+  ease?: readonly number[] | number[] | string;
+  type?: 'spring' | 'tween' | 'inertia';
+  damping?: number;
+  stiffness?: number;
+  [key: string]: any;
+};
+
+/**
+ * Animation Duration Presets
+ * Based on Material Design motion guidelines
+ */
+export const durations = {
+  instant: 0,
+  fast: 0.15,
+  normal: 0.3,
+  slow: 0.5,
+  slower: 0.7,
+} as const;
+
+/**
+ * Easing Presets
+ * Common easing curves for smooth animations
+ */
+export const easings = {
+  // Standard easing - default for most transitions
+  standard: [0.4, 0.0, 0.2, 1],
+
+  // Deceleration - use when objects enter screen
+  decelerate: [0.0, 0.0, 0.2, 1],
+
+  // Acceleration - use when objects exit screen
+  accelerate: [0.4, 0.0, 1, 1],
+
+  // Sharp - use for very quick transitions
+  sharp: [0.4, 0.0, 0.6, 1],
+
+  // Bounce - playful animation
+  bounce: [0.68, -0.55, 0.265, 1.55],
+} as const;
+
+/**
+ * Common transition presets
+ */
+export const transitions = {
+  default: {
+    duration: durations.normal,
+    ease: easings.standard,
+  } as Transition,
+
+  fast: {
+    duration: durations.fast,
+    ease: easings.standard,
+  } as Transition,
+
+  slow: {
+    duration: durations.slow,
+    ease: easings.standard,
+  } as Transition,
+
+  bounce: {
+    duration: durations.normal,
+    ease: easings.bounce,
+  } as Transition,
+
+  spring: {
+    type: 'spring' as const,
+    damping: 20,
+    stiffness: 300,
+  } as Transition,
+
+  springBouncy: {
+    type: 'spring' as const,
+    damping: 10,
+    stiffness: 100,
+  } as Transition,
+} as const;
+
+/**
+ * Fade Animation Variants
+ */
+export const fadeVariants: Variants = {
+  hidden: { opacity: 0 },
+  visible: { opacity: 1 },
+  exit: { opacity: 0 },
+};
+
+/**
+ * Slide Animation Variants
+ */
+export const slideVariants = {
+  fromLeft: {
+    hidden: { x: -20, opacity: 0 },
+    visible: { x: 0, opacity: 1 },
+    exit: { x: -20, opacity: 0 },
+  },
+  fromRight: {
+    hidden: { x: 20, opacity: 0 },
+    visible: { x: 0, opacity: 1 },
+    exit: { x: 20, opacity: 0 },
+  },
+  fromTop: {
+    hidden: { y: -20, opacity: 0 },
+    visible: { y: 0, opacity: 1 },
+    exit: { y: -20, opacity: 0 },
+  },
+  fromBottom: {
+    hidden: { y: 20, opacity: 0 },
+    visible: { y: 0, opacity: 1 },
+    exit: { y: 20, opacity: 0 },
+  },
+} as const;
+
+/**
+ * Scale Animation Variants
+ */
+export const scaleVariants = {
+  default: {
+    hidden: { scale: 0.95, opacity: 0 },
+    visible: { scale: 1, opacity: 1 },
+    exit: { scale: 0.95, opacity: 0 },
+  },
+  grow: {
+    hidden: { scale: 0.8, opacity: 0 },
+    visible: { scale: 1, opacity: 1 },
+    exit: { scale: 0.8, opacity: 0 },
+  },
+  pop: {
+    hidden: { scale: 0 },
+    visible: { scale: 1 },
+    exit: { scale: 0 },
+  },
+} as const;
+
+/**
+ * Rotate Animation Variants
+ */
+export const rotateVariants = {
+  default: {
+    hidden: { rotate: -10, opacity: 0 },
+    visible: { rotate: 0, opacity: 1 },
+    exit: { rotate: 10, opacity: 0 },
+  },
+  flip: {
+    hidden: { rotateX: 90, opacity: 0 },
+    visible: { rotateX: 0, opacity: 1 },
+    exit: { rotateX: -90, opacity: 0 },
+  },
+} as const;
+
+/**
+ * List/Stagger Animation Variants
+ */
+export const listVariants = {
+  container: {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.1,
+      },
+    },
+  },
+  item: {
+    hidden: { y: 20, opacity: 0 },
+    visible: {
+      y: 0,
+      opacity: 1,
+    },
+  },
+} as const;
+
+/**
+ * Modal/Overlay Animation Variants
+ */
+export const modalVariants = {
+  overlay: {
+    hidden: { opacity: 0 },
+    visible: { opacity: 1 },
+    exit: { opacity: 0 },
+  },
+  content: {
+    hidden: { scale: 0.95, opacity: 0, y: 20 },
+    visible: { scale: 1, opacity: 1, y: 0 },
+    exit: { scale: 0.95, opacity: 0, y: 20 },
+  },
+} as const;
+
+/**
+ * Drawer/Sheet Animation Variants
+ */
+export const drawerVariants = {
+  fromLeft: {
+    hidden: { x: '-100%' },
+    visible: { x: 0 },
+    exit: { x: '-100%' },
+  },
+  fromRight: {
+    hidden: { x: '100%' },
+    visible: { x: 0 },
+    exit: { x: '100%' },
+  },
+  fromTop: {
+    hidden: { y: '-100%' },
+    visible: { y: 0 },
+    exit: { y: '-100%' },
+  },
+  fromBottom: {
+    hidden: { y: '100%' },
+    visible: { y: 0 },
+    exit: { y: '100%' },
+  },
+} as const;
+
+/**
+ * Collapse/Expand Animation Variants
+ */
+export const collapseVariants = {
+  collapsed: {
+    height: 0,
+    opacity: 0,
+    transition: { duration: durations.fast },
+  },
+  expanded: {
+    height: 'auto',
+    opacity: 1,
+    transition: { duration: durations.normal },
+  },
+} as const;
+
+/**
+ * Preset Animations
+ * Complete animation configurations ready to use
+ */
+export const presets = {
+  /**
+   * Fade in/out animation
+   */
+  fade: {
+    initial: 'hidden',
+    animate: 'visible',
+    exit: 'exit',
+    variants: fadeVariants,
+    transition: transitions.default,
+  },
+
+  /**
+   * Slide from bottom animation
+   */
+  slideUp: {
+    initial: 'hidden',
+    animate: 'visible',
+    exit: 'exit',
+    variants: slideVariants.fromBottom,
+    transition: transitions.default,
+  },
+
+  /**
+   * Scale animation
+   */
+  scale: {
+    initial: 'hidden',
+    animate: 'visible',
+    exit: 'exit',
+    variants: scaleVariants.default,
+    transition: transitions.default,
+  },
+
+  /**
+   * Modal animation (overlay + content)
+   */
+  modal: {
+    overlay: {
+      initial: 'hidden',
+      animate: 'visible',
+      exit: 'exit',
+      variants: modalVariants.overlay,
+      transition: transitions.fast,
+    },
+    content: {
+      initial: 'hidden',
+      animate: 'visible',
+      exit: 'exit',
+      variants: modalVariants.content,
+      transition: transitions.default,
+    },
+  },
+
+  /**
+   * List stagger animation
+   */
+  list: {
+    container: {
+      initial: 'hidden',
+      animate: 'visible',
+      variants: listVariants.container,
+    },
+    item: {
+      variants: listVariants.item,
+    },
+  },
+} as const;
+
+/**
+ * Helper to create a custom animation preset
+ *
+ * @example
+ * ```tsx
+ * const customFade = createAnimation({
+ *   hidden: { opacity: 0, scale: 0.8 },
+ *   visible: { opacity: 1, scale: 1 },
+ * }, transitions.bounce);
+ * ```
+ */
+export function createAnimation(
+  variants: Variants,
+  transition: Transition = transitions.default
+) {
+  return {
+    initial: 'hidden',
+    animate: 'visible',
+    exit: 'exit',
+    variants,
+    transition,
+  };
+}
+
+/**
+ * Helper to scale transition duration based on motion preference
+ *
+ * @example
+ * ```tsx
+ * const { scale } = useMotionPreference();
+ * const duration = scaleDuration(durations.normal, scale);
+ * ```
+ */
+export function scaleDuration(duration: number, scale: number): number {
+  return duration * (scale / 10);
+}

package/src/lib/breadcrumbs.ts

@@ -0,0 +1,94 @@
+import type { BreadcrumbItemLegacy } from '../components/navigation/Breadcrumbs';
+
+export interface RouteConfig {
+  [key: string]: {
+    label: string;
+    children?: RouteConfig;
+  };
+}
+
+/**
+ * Generates breadcrumb items from hash-based routing
+ *
+ * @param hash - Current window.location.hash (e.g., '#atoms/button')
+ * @param routeConfig - Configuration mapping routes to labels
+ * @param baseUrl - Base URL for href generation (default: '#')
+ * @returns Array of breadcrumb items with the last item having no href
+ *
+ * @example
+ * ```ts
+ * const routeConfig = {
+ *   atoms: {
+ *     label: 'Components',
+ *     children: {
+ *       button: { label: 'Button' }
+ *     }
+ *   }
+ * };
+ *
+ * // With hash: '#atoms/button'
+ * const breadcrumbs = generateBreadcrumbs('#atoms/button', routeConfig);
+ * // Returns: [
+ * //   { label: 'Home', href: '#' },
+ * //   { label: 'Components', href: '#atoms' },
+ * //   { label: 'Button' }  // No href for current page
+ * // ]
+ * ```
+ */
+export function generateBreadcrumbs(
+  hash: string,
+  routeConfig: RouteConfig,
+  baseUrl: string = '#'
+): BreadcrumbItemLegacy[] {
+  // Remove '#' prefix and clean up
+  const cleanHash = hash.replace(/^#/, '').trim();
+
+  // If no hash, return just home
+  if (!cleanHash) {
+    return [{ label: 'Home', href: baseUrl }];
+  }
+
+  // Split path into segments
+  const segments = cleanHash.split('/').filter(Boolean);
+  const breadcrumbs: BreadcrumbItemLegacy[] = [{ label: 'Home', href: baseUrl }];
+
+  let currentPath = '';
+  let currentConfig = routeConfig;
+
+  for (let i = 0; i < segments.length; i++) {
+    const segment = segments[i];
+    const isLast = i === segments.length - 1;
+
+    currentPath += (currentPath ? '/' : '') + segment;
+
+    // Look up label in config
+    const config = currentConfig[segment];
+
+    if (!config) {
+      // Fallback: convert kebab-case to Title Case
+      const label = segment
+        .split('-')
+        .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+        .join(' ');
+
+      breadcrumbs.push({
+        label,
+        // No href for the last item (current page)
+        href: isLast ? undefined : `${baseUrl}${currentPath}`,
+      });
+    } else {
+      breadcrumbs.push({
+        label: config.label,
+        // No href for the last item (current page)
+        href: isLast ? undefined : `${baseUrl}${currentPath}`,
+      });
+
+      // Update config for next level of nesting
+      if (config.children) {
+        currentConfig = config.children;
+      }
+    }
+  }
+
+  return breadcrumbs;
+}