@enterprise-ui-react/react 1.0.6

package/dist/chunk-EMI46XY6.js

@@ -0,0 +1,669 @@
+// src/tokens/colors.ts
+var colors = {
+  // Light Theme - Neutral Base + Blue Accent (Gold Standard)
+  light: {
+    background: {
+      DEFAULT: "#F8FAFC",
+      surface: "#FFFFFF",
+      elevated: "#FFFFFF",
+      overlay: "rgba(15, 23, 42, 0.5)",
+      hover: "#F1F5F9",
+      active: "#E2E8F0"
+    },
+    border: {
+      DEFAULT: "#E2E8F0",
+      strong: "#CBD5E1",
+      subtle: "#F1F5F9",
+      focus: "#93C5FD"
+    },
+    text: {
+      primary: "#0F172A",
+      secondary: "#475569",
+      tertiary: "#64748B",
+      disabled: "#94A3B8",
+      inverse: "#FFFFFF",
+      link: "#2563EB",
+      linkHover: "#1D4ED8"
+    },
+    primary: {
+      DEFAULT: "#2563EB",
+      hover: "#1D4ED8",
+      active: "#1E40AF",
+      disabled: "#93C5FD",
+      text: "#FFFFFF",
+      light: "#DBEAFE",
+      lighter: "#EFF6FF",
+      dark: "#1E3A8A"
+    },
+    // Semantic colors (desaturated for enterprise)
+    success: {
+      DEFAULT: "#10B981",
+      hover: "#059669",
+      active: "#047857",
+      disabled: "#86EFAC",
+      text: "#FFFFFF",
+      light: "#D1FAE5",
+      lighter: "#ECFDF5",
+      dark: "#065F46"
+    },
+    warning: {
+      DEFAULT: "#F59E0B",
+      hover: "#D97706",
+      active: "#B45309",
+      disabled: "#FCD34D",
+      text: "#FFFFFF",
+      light: "#FEF3C7",
+      lighter: "#FFFBEB",
+      dark: "#92400E"
+    },
+    error: {
+      DEFAULT: "#EF4444",
+      hover: "#DC2626",
+      active: "#B91C1C",
+      disabled: "#FCA5A5",
+      text: "#FFFFFF",
+      light: "#FEE2E2",
+      lighter: "#FEF2F2",
+      dark: "#991B1B"
+    },
+    info: {
+      DEFAULT: "#3B82F6",
+      hover: "#2563EB",
+      active: "#1D4ED8",
+      disabled: "#93C5FD",
+      text: "#FFFFFF",
+      light: "#DBEAFE",
+      lighter: "#EFF6FF",
+      dark: "#1E40AF"
+    }
+  },
+  // Dark Theme - Modern Enterprise
+  dark: {
+    background: {
+      DEFAULT: "#0B1220",
+      surface: "#111827",
+      elevated: "#1F2937",
+      overlay: "rgba(0, 0, 0, 0.7)",
+      hover: "#1F2937",
+      active: "#374151"
+    },
+    border: {
+      DEFAULT: "#374151",
+      strong: "#4B5563",
+      subtle: "#1F2937",
+      focus: "#60A5FA"
+    },
+    text: {
+      primary: "#E5E7EB",
+      secondary: "#9CA3AF",
+      tertiary: "#6B7280",
+      disabled: "#4B5563",
+      inverse: "#0F172A",
+      link: "#60A5FA",
+      linkHover: "#93C5FD"
+    },
+    primary: {
+      DEFAULT: "#3B82F6",
+      hover: "#60A5FA",
+      active: "#93C5FD",
+      disabled: "#1E40AF",
+      text: "#FFFFFF",
+      light: "#1E3A8A",
+      lighter: "#1E40AF",
+      dark: "#DBEAFE"
+    },
+    success: {
+      DEFAULT: "#10B981",
+      hover: "#34D399",
+      active: "#6EE7B7",
+      disabled: "#065F46",
+      text: "#FFFFFF",
+      light: "#064E3B",
+      lighter: "#065F46",
+      dark: "#D1FAE5"
+    },
+    warning: {
+      DEFAULT: "#F59E0B",
+      hover: "#FBBF24",
+      active: "#FCD34D",
+      disabled: "#92400E",
+      text: "#FFFFFF",
+      light: "#78350F",
+      lighter: "#92400E",
+      dark: "#FEF3C7"
+    },
+    error: {
+      DEFAULT: "#EF4444",
+      hover: "#F87171",
+      active: "#FCA5A5",
+      disabled: "#991B1B",
+      text: "#FFFFFF",
+      light: "#7F1D1D",
+      lighter: "#991B1B",
+      dark: "#FEE2E2"
+    },
+    info: {
+      DEFAULT: "#3B82F6",
+      hover: "#60A5FA",
+      active: "#93C5FD",
+      disabled: "#1E40AF",
+      text: "#FFFFFF",
+      light: "#1E3A8A",
+      lighter: "#1E40AF",
+      dark: "#DBEAFE"
+    }
+  },
+  // Alternative: Teal (Professional but Fresh)
+  tealVariant: {
+    primary: {
+      DEFAULT: "#0F766E",
+      hover: "#0D9488",
+      active: "#14B8A6",
+      light: "#CCFBF1",
+      dark: "#134E4A"
+    }
+  }
+};
+
+// src/tokens/typography.ts
+var typography = {
+  fontFamily: {
+    sans: [
+      "Inter",
+      "-apple-system",
+      "BlinkMacSystemFont",
+      "Segoe UI",
+      "Roboto",
+      "Helvetica Neue",
+      "Arial",
+      "sans-serif"
+    ].join(", "),
+    mono: [
+      "JetBrains Mono",
+      "SF Mono",
+      "Monaco",
+      "Inconsolata",
+      "Fira Code",
+      "Consolas",
+      "monospace"
+    ].join(", ")
+  },
+  fontSize: {
+    xs: { size: "0.75rem", lineHeight: "1rem" },
+    // 12px
+    sm: { size: "0.875rem", lineHeight: "1.25rem" },
+    // 14px
+    base: { size: "1rem", lineHeight: "1.5rem" },
+    // 16px
+    lg: { size: "1.125rem", lineHeight: "1.75rem" },
+    // 18px
+    xl: { size: "1.25rem", lineHeight: "1.75rem" },
+    // 20px
+    "2xl": { size: "1.5rem", lineHeight: "2rem" },
+    // 24px
+    "3xl": { size: "1.875rem", lineHeight: "2.25rem" },
+    // 30px
+    "4xl": { size: "2.25rem", lineHeight: "2.5rem" },
+    // 36px
+    "5xl": { size: "3rem", lineHeight: "1.2" },
+    // 48px
+    "6xl": { size: "3.75rem", lineHeight: "1.1" }
+    // 60px
+  },
+  fontWeight: {
+    normal: 400,
+    medium: 500,
+    semibold: 600,
+    bold: 700
+  },
+  letterSpacing: {
+    tight: "-0.025em",
+    normal: "0",
+    wide: "0.025em"
+  },
+  // Predefined text styles for common UI patterns
+  textStyles: {
+    // Headings
+    h1: {
+      fontSize: "3rem",
+      lineHeight: "1.2",
+      fontWeight: 700,
+      letterSpacing: "-0.025em"
+    },
+    h2: {
+      fontSize: "2.25rem",
+      lineHeight: "2.5rem",
+      fontWeight: 700,
+      letterSpacing: "-0.025em"
+    },
+    h3: {
+      fontSize: "1.875rem",
+      lineHeight: "2.25rem",
+      fontWeight: 600,
+      letterSpacing: "-0.025em"
+    },
+    h4: {
+      fontSize: "1.5rem",
+      lineHeight: "2rem",
+      fontWeight: 600
+    },
+    h5: {
+      fontSize: "1.25rem",
+      lineHeight: "1.75rem",
+      fontWeight: 600
+    },
+    h6: {
+      fontSize: "1.125rem",
+      lineHeight: "1.75rem",
+      fontWeight: 600
+    },
+    // Body text
+    bodyLarge: {
+      fontSize: "1.125rem",
+      lineHeight: "1.75rem",
+      fontWeight: 400
+    },
+    body: {
+      fontSize: "1rem",
+      lineHeight: "1.5rem",
+      fontWeight: 400
+    },
+    bodySmall: {
+      fontSize: "0.875rem",
+      lineHeight: "1.25rem",
+      fontWeight: 400
+    },
+    // UI text
+    label: {
+      fontSize: "0.875rem",
+      lineHeight: "1.25rem",
+      fontWeight: 500
+    },
+    caption: {
+      fontSize: "0.75rem",
+      lineHeight: "1rem",
+      fontWeight: 400
+    },
+    overline: {
+      fontSize: "0.75rem",
+      lineHeight: "1rem",
+      fontWeight: 600,
+      letterSpacing: "0.05em",
+      textTransform: "uppercase"
+    },
+    // Code
+    code: {
+      fontSize: "0.875rem",
+      lineHeight: "1.25rem",
+      fontWeight: 400,
+      fontFamily: [
+        "JetBrains Mono",
+        "SF Mono",
+        "Monaco",
+        "monospace"
+      ].join(", ")
+    }
+  }
+};
+
+// src/tokens/spacing.ts
+var spacing = {
+  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
+  11: "2.75rem",
+  // 44px
+  12: "3rem",
+  // 48px
+  14: "3.5rem",
+  // 56px
+  16: "4rem",
+  // 64px
+  20: "5rem",
+  // 80px
+  24: "6rem",
+  // 96px
+  28: "7rem",
+  // 112px
+  32: "8rem",
+  // 128px
+  36: "9rem",
+  // 144px
+  40: "10rem",
+  // 160px
+  44: "11rem",
+  // 176px
+  48: "12rem",
+  // 192px
+  52: "13rem",
+  // 208px
+  56: "14rem",
+  // 224px
+  60: "15rem",
+  // 240px
+  64: "16rem",
+  // 256px
+  72: "18rem",
+  // 288px
+  80: "20rem",
+  // 320px
+  96: "24rem"
+  // 384px
+};
+var semanticSpacing = {
+  // Component padding
+  componentPaddingXs: spacing[2],
+  // 8px
+  componentPaddingSm: spacing[3],
+  // 12px
+  componentPaddingMd: spacing[4],
+  // 16px
+  componentPaddingLg: spacing[6],
+  // 24px
+  componentPaddingXl: spacing[8],
+  // 32px
+  // Component gaps
+  componentGapXs: spacing[1],
+  // 4px
+  componentGapSm: spacing[2],
+  // 8px
+  componentGapMd: spacing[3],
+  // 12px
+  componentGapLg: spacing[4],
+  // 16px
+  componentGapXl: spacing[6],
+  // 24px
+  // Layout spacing
+  layoutGapXs: spacing[4],
+  // 16px
+  layoutGapSm: spacing[6],
+  // 24px
+  layoutGapMd: spacing[8],
+  // 32px
+  layoutGapLg: spacing[12],
+  // 48px
+  layoutGapXl: spacing[16],
+  // 64px
+  // Section spacing
+  sectionGapSm: spacing[8],
+  // 32px
+  sectionGapMd: spacing[12],
+  // 48px
+  sectionGapLg: spacing[16],
+  // 64px
+  sectionGapXl: spacing[24]
+  // 96px
+};
+
+// src/tokens/borders.ts
+var borders = {
+  width: {
+    none: "0",
+    thin: "1px",
+    medium: "2px",
+    thick: "3px",
+    heavy: "4px"
+  },
+  radius: {
+    none: "0",
+    xs: "0.125rem",
+    // 2px
+    sm: "0.25rem",
+    // 4px
+    DEFAULT: "0.375rem",
+    // 6px
+    md: "0.5rem",
+    // 8px
+    lg: "0.75rem",
+    // 12px
+    xl: "1rem",
+    // 16px
+    "2xl": "1.5rem",
+    // 24px
+    "3xl": "2rem",
+    // 32px
+    full: "9999px"
+  },
+  style: {
+    solid: "solid",
+    dashed: "dashed",
+    dotted: "dotted"
+  }
+};
+var semanticBorders = {
+  // Input borders
+  inputDefault: {
+    width: borders.width.thin,
+    style: borders.style.solid,
+    radius: borders.radius.md
+  },
+  inputFocus: {
+    width: borders.width.medium,
+    style: borders.style.solid,
+    radius: borders.radius.md
+  },
+  // Card borders
+  card: {
+    width: borders.width.thin,
+    style: borders.style.solid,
+    radius: borders.radius.lg
+  },
+  // Button borders
+  button: {
+    width: borders.width.thin,
+    style: borders.style.solid,
+    radius: borders.radius.md
+  },
+  // Modal/Dialog borders
+  modal: {
+    width: borders.width.none,
+    style: borders.style.solid,
+    radius: borders.radius.xl
+  }
+};
+
+// src/tokens/shadows.ts
+var shadows = {
+  none: "none",
+  xs: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+  sm: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
+  DEFAULT: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+  md: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
+  lg: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
+  xl: "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
+  "2xl": "0 30px 60px -15px rgba(0, 0, 0, 0.3)",
+  inner: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)"
+};
+var darkShadows = {
+  none: "none",
+  xs: "0 1px 2px 0 rgba(0, 0, 0, 0.3)",
+  sm: "0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.3)",
+  DEFAULT: "0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3)",
+  md: "0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3)",
+  lg: "0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.4)",
+  xl: "0 25px 50px -12px rgba(0, 0, 0, 0.7)",
+  "2xl": "0 30px 60px -15px rgba(0, 0, 0, 0.8)",
+  inner: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.3)"
+};
+var elevation = {
+  flat: shadows.none,
+  raised: shadows.sm,
+  floating: shadows.md,
+  overlay: shadows.lg,
+  modal: shadows.xl,
+  popover: shadows.lg,
+  dropdown: shadows.md,
+  tooltip: shadows.sm
+};
+
+// src/tokens/breakpoints.ts
+var breakpoints = {
+  xs: "320px",
+  // Mobile small
+  sm: "640px",
+  // Mobile
+  md: "768px",
+  // Tablet
+  lg: "1024px",
+  // Desktop
+  xl: "1280px",
+  // Desktop large
+  "2xl": "1536px",
+  // Desktop extra large
+  "3xl": "1920px"
+  // Wide screen
+};
+var breakpointValues = {
+  xs: 320,
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  "2xl": 1536,
+  "3xl": 1920
+};
+var mediaQueries = {
+  xs: `@media (min-width: ${breakpoints.xs})`,
+  sm: `@media (min-width: ${breakpoints.sm})`,
+  md: `@media (min-width: ${breakpoints.md})`,
+  lg: `@media (min-width: ${breakpoints.lg})`,
+  xl: `@media (min-width: ${breakpoints.xl})`,
+  "2xl": `@media (min-width: ${breakpoints["2xl"]})`,
+  "3xl": `@media (min-width: ${breakpoints["3xl"]})`
+};
+
+// src/tokens/motion.ts
+var motion = {
+  duration: {
+    instant: "0ms",
+    fast: "100ms",
+    normal: "200ms",
+    moderate: "300ms",
+    slow: "400ms",
+    slower: "500ms",
+    slowest: "600ms"
+  },
+  easing: {
+    linear: "linear",
+    easeIn: "cubic-bezier(0.4, 0, 1, 1)",
+    easeOut: "cubic-bezier(0, 0, 0.2, 1)",
+    easeInOut: "cubic-bezier(0.4, 0, 0.2, 1)",
+    sharp: "cubic-bezier(0.4, 0, 0.6, 1)",
+    spring: "cubic-bezier(0.34, 1.56, 0.64, 1)"
+  },
+  // Framer Motion variants
+  variants: {
+    fadeIn: {
+      initial: { opacity: 0 },
+      animate: { opacity: 1 },
+      exit: { opacity: 0 },
+      transition: { duration: 0.2 }
+    },
+    fadeOut: {
+      initial: { opacity: 1 },
+      animate: { opacity: 0 },
+      exit: { opacity: 1 },
+      transition: { duration: 0.2 }
+    },
+    slideInRight: {
+      initial: { x: "100%", opacity: 0 },
+      animate: { x: 0, opacity: 1 },
+      exit: { x: "100%", opacity: 0 },
+      transition: { duration: 0.3, ease: [0, 0, 0.2, 1] }
+    },
+    slideInLeft: {
+      initial: { x: "-100%", opacity: 0 },
+      animate: { x: 0, opacity: 1 },
+      exit: { x: "-100%", opacity: 0 },
+      transition: { duration: 0.3, ease: [0, 0, 0.2, 1] }
+    },
+    slideInUp: {
+      initial: { y: "100%", opacity: 0 },
+      animate: { y: 0, opacity: 1 },
+      exit: { y: "100%", opacity: 0 },
+      transition: { duration: 0.3, ease: [0, 0, 0.2, 1] }
+    },
+    slideInDown: {
+      initial: { y: "-100%", opacity: 0 },
+      animate: { y: 0, opacity: 1 },
+      exit: { y: "-100%", opacity: 0 },
+      transition: { duration: 0.3, ease: [0, 0, 0.2, 1] }
+    },
+    scaleIn: {
+      initial: { scale: 0.95, opacity: 0 },
+      animate: { scale: 1, opacity: 1 },
+      exit: { scale: 0.95, opacity: 0 },
+      transition: { duration: 0.2, ease: [0, 0, 0.2, 1] }
+    },
+    scaleOut: {
+      initial: { scale: 1, opacity: 1 },
+      animate: { scale: 0.95, opacity: 0 },
+      exit: { scale: 1, opacity: 1 },
+      transition: { duration: 0.2, ease: [0.4, 0, 1, 1] }
+    }
+  },
+  // Micro-interactions
+  microInteractions: {
+    buttonPress: {
+      scale: 0.98,
+      transition: { duration: 0.1 }
+    },
+    buttonHover: {
+      scale: 1.02,
+      transition: { duration: 0.2 }
+    },
+    cardHover: {
+      y: -4,
+      transition: { duration: 0.2 }
+    },
+    ripple: {
+      scale: [0, 1],
+      opacity: [0.5, 0],
+      transition: { duration: 0.6 }
+    }
+  }
+};
+
+// src/tokens/zIndex.ts
+var zIndex = {
+  base: 0,
+  dropdown: 1e3,
+  sticky: 1100,
+  fixed: 1200,
+  popover: 1300,
+  tooltip: 1400,
+  overlay: 1500,
+  modal: 1600,
+  toast: 1700,
+  commandPalette: 1800,
+  contextMenu: 1900,
+  max: 2147483647
+};
+
+export { borders, breakpointValues, breakpoints, colors, darkShadows, elevation, mediaQueries, motion, semanticBorders, semanticSpacing, shadows, spacing, typography, zIndex };