@moontra/moonui 2.0.8 → 2.0.9

package/src/index.tsx

@@ -0,0 +1,39 @@
+// Import CSS - Must be first
+import "./styles/index.css"
+
+// FREE UI Components Export - Source of Truth
+export * from "./components/ui/accordion"
+export * from "./components/ui/alert"
+export * from "./components/ui/aspect-ratio"
+export * from "./components/ui/avatar"
+export * from "./components/ui/badge"
+export * from "./components/ui/breadcrumb"
+export * from "./components/ui/button"
+export * from "./components/ui/calendar"
+export * from "./components/ui/card"
+export * from "./components/ui/checkbox"
+export * from "./components/ui/collapsible"
+export * from "./components/ui/command"
+export * from "./components/ui/date-picker"
+export * from "./components/ui/dialog"
+export * from "./components/ui/dropdown-menu"
+export * from "./components/ui/input"
+export * from "./components/ui/label"
+export * from "./components/ui/pagination"
+export * from "./components/ui/popover"
+export * from "./components/ui/progress"
+export * from "./components/ui/radio-group"
+export * from "./components/ui/select"
+export * from "./components/ui/separator"
+export * from "./components/ui/skeleton"
+export * from "./components/ui/slider"
+export * from "./components/ui/switch"
+export * from "./components/ui/table"
+export * from "./components/ui/tabs"
+export * from "./components/ui/textarea"
+export * from "./components/ui/toast"
+export * from "./components/ui/toggle"
+export * from "./components/ui/tooltip"
+
+// Utility exports
+export * from "./lib/utils"

package/src/lib/micro-interactions.ts

@@ -0,0 +1,255 @@
+// MoonUI Micro-interactions System
+// Provides consistent hover, focus, and active states across all components
+
+import { cva, type VariantProps } from "class-variance-authority";
+
+/**
+ * Micro-interaction variants for consistent component behavior
+ */
+export const microInteractionVariants = cva("", {
+  variants: {
+    hover: {
+      lift: [
+        "transition-all duration-200 ease-out",
+        "hover:-translate-y-0.5",
+        "hover:shadow-md",
+      ],
+      glow: [
+        "transition-all duration-300 ease-out",
+        "hover:shadow-lg",
+        "hover:shadow-primary/20",
+      ],
+      scale: [
+        "transition-transform duration-200 ease-out",
+        "hover:scale-105",
+        "active:scale-95",
+      ],
+      brightness: [
+        "transition-all duration-200 ease-out",
+        "hover:brightness-110",
+        "active:brightness-95",
+      ],
+      border: [
+        "transition-all duration-200 ease-out",
+        "hover:border-primary/50",
+      ],
+    },
+    focus: {
+      ring: [
+        "focus:outline-none",
+        "focus-visible:ring-2",
+        "focus-visible:ring-primary/50",
+        "focus-visible:ring-offset-2",
+      ],
+      glow: [
+        "focus:outline-none",
+        "focus-visible:shadow-lg",
+        "focus-visible:shadow-primary/30",
+      ],
+      border: [
+        "focus:outline-none",
+        "focus-visible:border-primary",
+        "focus-visible:border-2",
+      ],
+    },
+    active: {
+      scale: [
+        "active:scale-95",
+        "transition-transform duration-100",
+      ],
+      darken: [
+        "active:brightness-90",
+        "transition-all duration-100",
+      ],
+      depress: [
+        "active:translate-y-0.5",
+        "active:shadow-sm",
+        "transition-all duration-100",
+      ],
+    },
+    cursor: {
+      pointer: "cursor-pointer",
+      grab: "cursor-grab active:cursor-grabbing",
+      text: "cursor-text",
+      wait: "cursor-wait",
+      help: "cursor-help",
+      notAllowed: "cursor-not-allowed",
+    },
+  },
+  defaultVariants: {
+    hover: "lift",
+    focus: "ring",
+    active: "scale",
+    cursor: "pointer",
+  },
+});
+
+/**
+ * Spring animation configurations
+ */
+export const springAnimations = {
+  // Smooth spring for general use
+  smooth: {
+    type: "spring",
+    stiffness: 260,
+    damping: 20,
+  },
+  // Bouncy spring for playful interactions
+  bouncy: {
+    type: "spring",
+    stiffness: 300,
+    damping: 15,
+  },
+  // Stiff spring for quick responses
+  stiff: {
+    type: "spring",
+    stiffness: 400,
+    damping: 25,
+  },
+  // Gentle spring for subtle movements
+  gentle: {
+    type: "spring",
+    stiffness: 150,
+    damping: 15,
+  },
+};
+
+/**
+ * Hover animation presets
+ */
+export const hoverAnimations = {
+  lift: {
+    y: -2,
+    transition: springAnimations.smooth,
+  },
+  scale: {
+    scale: 1.05,
+    transition: springAnimations.smooth,
+  },
+  glow: {
+    boxShadow: "0 0 20px rgba(var(--primary), 0.3)",
+    transition: springAnimations.smooth,
+  },
+  rotate: {
+    rotate: 2,
+    transition: springAnimations.bouncy,
+  },
+};
+
+/**
+ * Tap/Click animation presets
+ */
+export const tapAnimations = {
+  scale: {
+    scale: 0.95,
+    transition: { duration: 0.1 },
+  },
+  depress: {
+    y: 1,
+    transition: { duration: 0.1 },
+  },
+};
+
+/**
+ * Focus animation presets
+ */
+export const focusAnimations = {
+  ring: {
+    boxShadow: "0 0 0 2px var(--background), 0 0 0 4px var(--primary)",
+    transition: springAnimations.smooth,
+  },
+  glow: {
+    boxShadow: "0 0 0 3px rgba(var(--primary), 0.3)",
+    transition: springAnimations.smooth,
+  },
+};
+
+/**
+ * Stagger animation for lists
+ */
+export const staggerAnimation = {
+  container: {
+    hidden: { opacity: 0 },
+    show: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.05,
+      },
+    },
+  },
+  item: {
+    hidden: { opacity: 0, y: 20 },
+    show: { 
+      opacity: 1, 
+      y: 0,
+      transition: springAnimations.smooth,
+    },
+  },
+};
+
+/**
+ * Page transition animations
+ */
+export const pageTransitions = {
+  fadeIn: {
+    initial: { opacity: 0 },
+    animate: { opacity: 1 },
+    exit: { opacity: 0 },
+    transition: { duration: 0.3 },
+  },
+  slideUp: {
+    initial: { opacity: 0, y: 20 },
+    animate: { opacity: 1, y: 0 },
+    exit: { opacity: 0, y: -20 },
+    transition: springAnimations.smooth,
+  },
+  slideRight: {
+    initial: { opacity: 0, x: -20 },
+    animate: { opacity: 1, x: 0 },
+    exit: { opacity: 0, x: 20 },
+    transition: springAnimations.smooth,
+  },
+  scale: {
+    initial: { opacity: 0, scale: 0.95 },
+    animate: { opacity: 1, scale: 1 },
+    exit: { opacity: 0, scale: 1.05 },
+    transition: springAnimations.smooth,
+  },
+};
+
+/**
+ * Skeleton loading animation
+ */
+export const skeletonAnimation = {
+  initial: { opacity: 0.5 },
+  animate: {
+    opacity: [0.5, 0.8, 0.5],
+    transition: {
+      duration: 1.5,
+      repeat: Infinity,
+      ease: "easeInOut" as const,
+    },
+  },
+};
+
+/**
+ * Tooltip animation
+ */
+export const tooltipAnimation = {
+  initial: { opacity: 0, scale: 0.95 },
+  animate: { opacity: 1, scale: 1 },
+  exit: { opacity: 0, scale: 0.95 },
+  transition: { duration: 0.15 },
+};
+
+/**
+ * Notification animation
+ */
+export const notificationAnimation = {
+  initial: { opacity: 0, y: -20, scale: 0.95 },
+  animate: { opacity: 1, y: 0, scale: 1 },
+  exit: { opacity: 0, scale: 0.95, transition: { duration: 0.15 } },
+  transition: springAnimations.bouncy,
+};
+
+export type MicroInteractionProps = VariantProps<typeof microInteractionVariants>;

package/src/lib/theme.tsx

@@ -0,0 +1,398 @@
+import * as React from 'react';
+import { createContext, useContext, useState, useMemo, ReactNode } from 'react';
+
+/**
+ * Tema türleri için temel renk paletini tanımlayan tip
+ */
+export type ThemeColors = {
+  primary: string;
+  secondary: string;
+  success: string;
+  warning: string;
+  error: string;
+  background: string;
+  foreground: string;
+  card: string;
+  cardForeground: string;
+  border: string;
+  muted: string;
+  mutedForeground: string;
+  accent: string;
+  accentForeground: string;
+};
+
+/**
+ * Tema yapılandırma tipi
+ */
+export type ThemeConfig = {
+  colors: ThemeColors;
+  borderRadius: {
+    sm: string;
+    md: string;
+    lg: string;
+    full: string;
+  };
+  fontSizes: {
+    xs: string;
+    sm: string;
+    base: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+    '3xl': string;
+  };
+  spacing: {
+    1: string;
+    2: string;
+    4: string;
+    6: string;
+    8: string;
+  };
+  // Kullanıcıların kendi özel değişkenlerini ekleyebilmesi için
+  extensions?: Record<string, Record<string, string> | string>;
+};
+
+/**
+ * Tema hazır şablonları
+ */
+export type ThemePreset = 'default' | 'modern' | 'rounded' | 'minimal';
+
+/**
+ * Varsayılan açık tema
+ */
+// Modern teması için değerler
+const modernTheme: Partial<ThemeConfig> = {
+  borderRadius: {
+    sm: '0.5rem',
+    md: '0.75rem',
+    lg: '1rem',
+    full: '9999px',
+  },
+  colors: {
+    primary: 'hsl(250, 95%, 64%)',
+    secondary: 'hsl(250, 70%, 80%)',
+    success: 'hsl(142, 71%, 45%)',
+    warning: 'hsl(38, 92%, 50%)',
+    error: 'hsl(0, 84%, 60%)',
+    background: 'hsl(0, 0%, 100%)',
+    foreground: 'hsl(221, 39%, 11%)',
+    card: 'hsl(0, 0%, 100%)',
+    cardForeground: 'hsl(221, 39%, 11%)',
+    border: 'hsl(210, 20%, 90%)',
+    muted: 'hsl(210, 20%, 96%)',
+    mutedForeground: 'hsl(215, 16%, 47%)',
+    accent: 'hsl(328, 85%, 70%)',
+    accentForeground: 'hsl(210, 20%, 98%)',
+  }
+};
+
+// Yuvarlak teması için değerler
+const roundedTheme = {
+  borderRadius: {
+    sm: '1rem',
+    md: '1.25rem',
+    lg: '1.5rem',
+    full: '9999px',
+  }
+};
+
+// Minimal teması için değerler
+const minimalTheme: Partial<ThemeConfig> = {
+  borderRadius: {
+    sm: '0.125rem',
+    md: '0.25rem',
+    lg: '0.375rem',
+    full: '9999px',
+  },
+  colors: {
+    primary: 'hsl(220, 14%, 40%)',
+    secondary: 'hsl(220, 9%, 60%)',
+    success: 'hsl(142, 71%, 45%)',
+    warning: 'hsl(38, 92%, 50%)',
+    error: 'hsl(0, 84%, 60%)',
+    background: 'hsl(0, 0%, 100%)',
+    foreground: 'hsl(221, 39%, 11%)',
+    card: 'hsl(0, 0%, 100%)',
+    cardForeground: 'hsl(221, 39%, 11%)',
+    border: 'hsl(220, 13%, 91%)',
+    muted: 'hsl(220, 14%, 96%)',
+    mutedForeground: 'hsl(215, 16%, 47%)',
+    accent: 'hsl(210, 20%, 96%)',
+    accentForeground: 'hsl(221, 39%, 11%)',
+  }
+};
+
+export const defaultLightTheme: ThemeConfig = {
+  colors: {
+    primary: 'hsl(221, 83%, 53%)',
+    secondary: 'hsl(215, 20%, 65%)',
+    success: 'hsl(142, 71%, 45%)',
+    warning: 'hsl(38, 92%, 50%)',
+    error: 'hsl(0, 84%, 60%)',
+    background: 'hsl(0, 0%, 100%)',
+    foreground: 'hsl(221, 39%, 11%)',
+    card: 'hsl(0, 0%, 100%)',
+    cardForeground: 'hsl(221, 39%, 11%)',
+    border: 'hsl(210, 20%, 90%)',
+    muted: 'hsl(210, 20%, 96%)',
+    mutedForeground: 'hsl(215, 16%, 47%)',
+    accent: 'hsl(210, 20%, 96%)',
+    accentForeground: 'hsl(221, 39%, 11%)',
+  },
+  borderRadius: {
+    sm: '0.25rem',
+    md: '0.375rem',
+    lg: '0.5rem',
+    full: '9999px',
+  },
+  fontSizes: {
+    xs: '0.75rem',
+    sm: '0.875rem',
+    base: '1rem',
+    lg: '1.125rem',
+    xl: '1.25rem',
+    '2xl': '1.5rem',
+    '3xl': '1.875rem',
+  },
+  spacing: {
+    1: '0.25rem',
+    2: '0.5rem',
+    4: '1rem',
+    6: '1.5rem',
+    8: '2rem',
+  },
+};
+
+/**
+ * Varsayılan koyu tema
+ */
+export const defaultDarkTheme: ThemeConfig = {
+  ...defaultLightTheme,
+  colors: {
+    primary: 'hsl(221, 83%, 53%)',
+    secondary: 'hsl(215, 20%, 65%)',
+    success: 'hsl(142, 71%, 45%)',
+    warning: 'hsl(38, 92%, 50%)',
+    error: 'hsl(0, 84%, 60%)',
+    background: 'hsl(221, 39%, 11%)',
+    foreground: 'hsl(210, 20%, 98%)',
+    card: 'hsl(220, 26%, 14%)',
+    cardForeground: 'hsl(210, 20%, 98%)',
+    border: 'hsl(215, 28%, 17%)',
+    muted: 'hsl(215, 27%, 16%)',
+    mutedForeground: 'hsl(215, 16%, 57%)',
+    accent: 'hsl(215, 27%, 16%)',
+    accentForeground: 'hsl(210, 20%, 98%)',
+  },
+};
+
+/**
+ * Tema bağlamı için tip
+ */
+export interface ThemeContextType {
+  theme: ThemeConfig;
+  colorMode: 'light' | 'dark';
+  setColorMode: (mode: 'light' | 'dark') => void;
+  updateTheme: (config: Partial<ThemeConfig>) => void;
+}
+
+// Tema bağlamı
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+// Tema sağlayıcı props
+export interface ThemeProviderProps {
+  children: ReactNode;
+  defaultColorMode?: 'light' | 'dark';
+  preset?: ThemePreset;
+  lightTheme?: Partial<ThemeConfig>;
+  darkTheme?: Partial<ThemeConfig>;
+  extensions?: Record<string, Record<string, string> | string>;
+}
+
+/**
+ * Tema önayarını getir
+ */
+const getPresetTheme = (preset: ThemePreset): Partial<ThemeConfig> => {
+  switch (preset) {
+    case 'modern':
+      return modernTheme;
+    case 'rounded':
+      return roundedTheme;
+    case 'minimal':
+      return minimalTheme;
+    default:
+      return {};
+  }
+};
+
+/**
+ * MoonUI tema sağlayıcısı
+ */
+export const ThemeProvider = ({
+  children,
+  defaultColorMode = 'light',
+  preset = 'default',
+  lightTheme = {},
+  darkTheme = {},
+  extensions = {},
+}: ThemeProviderProps) => {
+  // Renk modu state'i
+  const [colorMode, setColorMode] = useState<'light' | 'dark'>(defaultColorMode);
+  
+  // Preset tema değerlerini al
+  const presetThemeValues = getPresetTheme(preset);
+
+  // Özelleştirilmiş temalar
+  const [customLightTheme, setCustomLightTheme] = useState<ThemeConfig>({
+    ...defaultLightTheme,
+    ...presetThemeValues,
+    ...lightTheme,
+    colors: {
+      ...defaultLightTheme.colors,
+      ...(presetThemeValues.colors || {}),
+      ...(lightTheme.colors || {}),
+    },
+    extensions: extensions,
+  });
+  
+  const [customDarkTheme, setCustomDarkTheme] = useState<ThemeConfig>({
+    ...defaultDarkTheme,
+    ...presetThemeValues,
+    ...darkTheme,
+    colors: {
+      ...defaultDarkTheme.colors,
+      ...(presetThemeValues.colors || {}),
+      ...(darkTheme.colors || {}),
+    },
+    extensions: extensions,
+  });
+
+  // Aktif tema
+  const theme = useMemo(() => {
+    return colorMode === 'light' ? customLightTheme : customDarkTheme;
+  }, [colorMode, customLightTheme, customDarkTheme]);
+
+  // Tema güncelleme fonksiyonu
+  const updateTheme = (config: Partial<ThemeConfig>) => {
+    if (colorMode === 'light') {
+      setCustomLightTheme(prev => ({
+        ...prev,
+        ...config,
+        colors: {
+          ...prev.colors,
+          ...(config.colors || {}),
+        },
+        extensions: {
+          ...(prev.extensions || {}),
+          ...(config.extensions || {}),
+        },
+      }));
+    } else {
+      setCustomDarkTheme(prev => ({
+        ...prev,
+        ...config,
+        colors: {
+          ...prev.colors,
+          ...(config.colors || {}),
+        },
+        extensions: {
+          ...(prev.extensions || {}),
+          ...(config.extensions || {}),
+        },
+      }));
+    }
+  };
+  
+  // Tema değiştirme fonksiyonu
+  const setThemePreset = (preset: ThemePreset) => {
+    const presetValues = getPresetTheme(preset);
+    
+    updateTheme({
+      ...presetValues,
+      colors: presetValues.colors as ThemeColors,
+    });
+  };
+
+  const value = {
+    theme,
+    colorMode,
+    setColorMode,
+    updateTheme,
+    setThemePreset,
+  };
+
+  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
+};
+
+/**
+ * Tema bağlamı için tip
+ */
+export interface ThemeContextType {
+  theme: ThemeConfig;
+  colorMode: 'light' | 'dark';
+  setColorMode: (mode: 'light' | 'dark') => void;
+  updateTheme: (config: Partial<ThemeConfig>) => void;
+  setThemePreset: (preset: ThemePreset) => void;
+}
+
+/**
+ * Tema kullanma kancası
+ */
+export const useTheme = (): ThemeContextType => {
+  const context = useContext(ThemeContext);
+  
+  if (context === undefined) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
+  
+  return context;
+};
+
+/**
+ * CSS değişkenlerini tema konfigürasyonundan oluşturma fonksiyonu
+ */
+export const createCssVariables = (theme: ThemeConfig): Record<string, string> => {
+  const variables: Record<string, string> = {};
+  
+  // Renkleri CSS değişkenlerine dönüştür
+  Object.entries(theme.colors).forEach(([key, value]) => {
+    variables[`--color-${key}`] = value;
+  });
+  
+  // Border radius değerlerini CSS değişkenlerine dönüştür
+  Object.entries(theme.borderRadius).forEach(([key, value]) => {
+    variables[`--radius-${key}`] = value;
+  });
+  
+  // Font boyutlarını CSS değişkenlerine dönüştür
+  Object.entries(theme.fontSizes).forEach(([key, value]) => {
+    variables[`--font-size-${key}`] = value;
+  });
+  
+  // Boşluk değerlerini CSS değişkenlerine dönüştür
+  Object.entries(theme.spacing).forEach(([key, value]) => {
+    variables[`--space-${key}`] = value;
+  });
+  
+  // Özel uzantı değişkenlerini CSS'e dönüştür
+  if (theme.extensions) {
+    Object.entries(theme.extensions).forEach(([categoryKey, categoryValue]) => {
+      if (typeof categoryValue === 'object' && categoryValue !== null) {
+        Object.entries(categoryValue as Record<string, string>).forEach(([key, value]) => {
+          variables[`--${categoryKey}-${key}`] = value;
+        });
+      } else if (typeof categoryValue === 'string') {
+        variables[`--${categoryKey}`] = categoryValue;
+      }
+    });
+  }
+  
+  return variables;
+};
+
+/**
+ * CSS sınıflarını tema değerlerine göre üretme yardımcı fonksiyonu
+ */
+export const getCssClass = (themeKey: keyof ThemeConfig, value: string): string => {
+  return `var(--${themeKey}-${value})`;
+};