@thesage/ui 1.1.0 → 1.3.1

package/dist/hooks.mjs

@@ -42,378 +42,6 @@ import { useEffect } from "react";
 import { create as create2 } from "zustand";
 import { persist as persist2 } from "zustand/middleware";
 
-// ../tokens/src/base.ts
-var baseTokens = {
-  /**
-   * Spacing scale (based on 4px grid)
-   */
-  spacing: {
-    "0": "0",
-    "0.5": "0.125rem",
-    // 2px
-    "1": "0.25rem",
-    // 4px
-    "2": "0.5rem",
-    // 8px
-    "3": "0.75rem",
-    // 12px
-    "4": "1rem",
-    // 16px
-    "5": "1.25rem",
-    // 20px
-    "6": "1.5rem",
-    // 24px
-    "8": "2rem",
-    // 32px
-    "10": "2.5rem",
-    // 40px
-    "12": "3rem",
-    // 48px
-    "16": "4rem",
-    // 64px
-    "20": "5rem",
-    // 80px
-    "24": "6rem",
-    // 96px
-    "32": "8rem"
-    // 128px
-  },
-  /**
-   * Typography scales
-   */
-  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
-    "6xl": "3.75rem",
-    // 60px
-    "7xl": "4.5rem",
-    // 72px
-    "8xl": "6rem"
-    // 96px
-  },
-  fontWeight: {
-    light: "300",
-    normal: "400",
-    medium: "500",
-    semibold: "600",
-    bold: "700",
-    extrabold: "800",
-    black: "900"
-  },
-  lineHeight: {
-    none: "1",
-    tight: "1.25",
-    snug: "1.375",
-    normal: "1.5",
-    relaxed: "1.625",
-    loose: "2"
-  },
-  /**
-   * Border radius
-   */
-  borderRadius: {
-    none: "0",
-    sm: "0.125rem",
-    // 2px
-    DEFAULT: "0.25rem",
-    // 4px
-    md: "0.375rem",
-    // 6px
-    lg: "0.5rem",
-    // 8px
-    xl: "0.75rem",
-    // 12px
-    "2xl": "1rem",
-    // 16px
-    "3xl": "1.5rem",
-    // 24px
-    full: "9999px"
-  },
-  /**
-   * Motion durations (base values - themes can override)
-   */
-  duration: {
-    instant: "0ms",
-    fast: "150ms",
-    normal: "300ms",
-    slow: "500ms",
-    slower: "800ms"
-  },
-  /**
-   * Easing curves (base values - themes can override)
-   */
-  ease: {
-    linear: "linear",
-    in: "cubic-bezier(0.4, 0, 1, 1)",
-    out: "cubic-bezier(0, 0, 0.2, 1)",
-    inOut: "cubic-bezier(0.4, 0, 0.2, 1)"
-  },
-  /**
-   * Z-index scale
-   */
-  zIndex: {
-    "auto": "auto",
-    "0": "0",
-    "10": "10",
-    "20": "20",
-    "30": "30",
-    "40": "40",
-    "50": "50",
-    dropdown: "1000",
-    sticky: "1020",
-    fixed: "1030",
-    modalBackdrop: "1040",
-    modal: "1050",
-    popover: "1060",
-    tooltip: "1070"
-  },
-  /**
-   * Focus ring configuration
-   */
-  focus: {
-    width: "2px",
-    offset: "2px",
-    style: "solid"
-  }
-};
-var spacing = {
-  xs: baseTokens.spacing["1"],
-  // 4px  — Tight internal padding
-  sm: baseTokens.spacing["2"],
-  // 8px  — Default gap
-  md: baseTokens.spacing["4"],
-  // 16px — Section padding
-  lg: baseTokens.spacing["6"],
-  // 24px — Card padding
-  xl: baseTokens.spacing["8"],
-  // 32px — Section margins
-  "2xl": baseTokens.spacing["12"],
-  // 48px — Page sections
-  "3xl": baseTokens.spacing["16"]
-  // 64px — Major divisions
-};
-var typography = {
-  fonts: {
-    sans: "var(--font-body)",
-    serif: "var(--font-heading)",
-    mono: "var(--font-mono)"
-  },
-  sizes: {
-    xs: baseTokens.fontSize.xs,
-    // 12px — Fine print
-    sm: baseTokens.fontSize.sm,
-    // 14px — Secondary text
-    base: baseTokens.fontSize.base,
-    // 16px — Body text
-    lg: baseTokens.fontSize.lg,
-    // 18px — Lead paragraphs
-    xl: baseTokens.fontSize.xl,
-    // 20px — Section headers
-    "2xl": baseTokens.fontSize["2xl"],
-    // 24px — Page headers
-    "3xl": baseTokens.fontSize["3xl"]
-    // 30px — Hero text
-  },
-  weights: {
-    normal: baseTokens.fontWeight.normal,
-    // 400
-    medium: baseTokens.fontWeight.medium,
-    // 500
-    semibold: baseTokens.fontWeight.semibold,
-    // 600
-    bold: baseTokens.fontWeight.bold
-    // 700
-  },
-  leading: {
-    tight: baseTokens.lineHeight.tight,
-    // 1.25 — Headings
-    normal: baseTokens.lineHeight.normal,
-    // 1.5  — Body
-    relaxed: baseTokens.lineHeight.relaxed
-    // 1.625 — Spacious reading
-  }
-};
-var motion = {
-  duration: baseTokens.duration,
-  easing: {
-    default: baseTokens.ease.out,
-    // Most transitions
-    spring: "cubic-bezier(0.16, 1, 0.3, 1)",
-    // Playful interactions
-    linear: baseTokens.ease.linear
-    // Progress indicators
-  }
-};
-
-// ../tokens/src/typography.ts
-var fontSizes = {
-  // Body text scale
-  xs: { base: "0.75rem", mobile: "0.75rem" },
-  // 12px
-  sm: { base: "0.875rem", mobile: "0.875rem" },
-  // 14px
-  base: { base: "1rem", mobile: "1rem" },
-  // 16px
-  lg: { base: "1.125rem", mobile: "1rem" },
-  // 18px / 16px mobile
-  xl: { base: "1.25rem", mobile: "1.125rem" },
-  // 20px / 18px mobile
-  "2xl": { base: "1.5rem", mobile: "1.25rem" },
-  // 24px / 20px mobile
-  "3xl": { base: "1.875rem", mobile: "1.5rem" },
-  // 30px / 24px mobile
-  // Heading scale (h6 → h1)
-  "4xl": { base: "2.25rem", mobile: "1.875rem" },
-  // 36px / 30px - h3
-  "5xl": { base: "3rem", mobile: "2.25rem" },
-  // 48px / 36px - h2
-  "6xl": { base: "3.75rem", mobile: "2.5rem" },
-  // 60px / 40px - h1
-  "7xl": { base: "4.5rem", mobile: "3rem" },
-  // 72px / 48px - Display
-  "8xl": { base: "6rem", mobile: "3.75rem" },
-  // 96px / 60px - Hero
-  "9xl": { base: "8rem", mobile: "4.5rem" }
-  // 128px / 72px - Ultra
-};
-var fontWeights = {
-  thin: "100",
-  extralight: "200",
-  light: "300",
-  normal: "400",
-  medium: "500",
-  semibold: "600",
-  bold: "700",
-  extrabold: "800",
-  black: "900"
-};
-var lineHeights = {
-  none: "1",
-  tight: "1.25",
-  snug: "1.375",
-  normal: "1.5",
-  relaxed: "1.625",
-  loose: "1.75",
-  extraloose: "2"
-};
-var letterSpacing = {
-  tighter: "-0.05em",
-  tight: "-0.025em",
-  normal: "0",
-  wide: "0.025em",
-  wider: "0.05em",
-  widest: "0.1em"
-};
-var typePresets = {
-  "display-large": {
-    size: fontSizes["8xl"],
-    weight: fontWeights.bold,
-    lineHeight: lineHeights.none,
-    letterSpacing: letterSpacing.tighter,
-    description: "Large hero text, landing pages"
-  },
-  "display": {
-    size: fontSizes["7xl"],
-    weight: fontWeights.bold,
-    lineHeight: lineHeights.tight,
-    letterSpacing: letterSpacing.tight,
-    description: "Hero sections, major headings"
-  },
-  "heading-1": {
-    size: fontSizes["6xl"],
-    weight: fontWeights.bold,
-    lineHeight: lineHeights.tight,
-    letterSpacing: letterSpacing.tight,
-    description: "Page titles, h1"
-  },
-  "heading-2": {
-    size: fontSizes["5xl"],
-    weight: fontWeights.bold,
-    lineHeight: lineHeights.tight,
-    letterSpacing: letterSpacing.normal,
-    description: "Section titles, h2"
-  },
-  "heading-3": {
-    size: fontSizes["4xl"],
-    weight: fontWeights.semibold,
-    lineHeight: lineHeights.snug,
-    letterSpacing: letterSpacing.normal,
-    description: "Subsection titles, h3"
-  },
-  "heading-4": {
-    size: fontSizes["2xl"],
-    weight: fontWeights.semibold,
-    lineHeight: lineHeights.snug,
-    letterSpacing: letterSpacing.normal,
-    description: "Component titles, h4"
-  },
-  "heading-5": {
-    size: fontSizes.xl,
-    weight: fontWeights.medium,
-    lineHeight: lineHeights.normal,
-    letterSpacing: letterSpacing.normal,
-    description: "Small headings, h5"
-  },
-  "heading-6": {
-    size: fontSizes.lg,
-    weight: fontWeights.medium,
-    lineHeight: lineHeights.normal,
-    letterSpacing: letterSpacing.normal,
-    description: "Tiny headings, h6"
-  },
-  "body-large": {
-    size: fontSizes.lg,
-    weight: fontWeights.normal,
-    lineHeight: lineHeights.relaxed,
-    letterSpacing: letterSpacing.normal,
-    description: "Lead paragraphs, intro text"
-  },
-  "body": {
-    size: fontSizes.base,
-    weight: fontWeights.normal,
-    lineHeight: lineHeights.normal,
-    letterSpacing: letterSpacing.normal,
-    description: "Default body text"
-  },
-  "body-small": {
-    size: fontSizes.sm,
-    weight: fontWeights.normal,
-    lineHeight: lineHeights.normal,
-    letterSpacing: letterSpacing.normal,
-    description: "Small body text, fine print"
-  },
-  "caption": {
-    size: fontSizes.xs,
-    weight: fontWeights.normal,
-    lineHeight: lineHeights.snug,
-    letterSpacing: letterSpacing.wide,
-    description: "Captions, labels, metadata"
-  },
-  "overline": {
-    size: fontSizes.xs,
-    weight: fontWeights.semibold,
-    lineHeight: lineHeights.normal,
-    letterSpacing: letterSpacing.widest,
-    description: "Eyebrows, categories, all-caps labels"
-  }
-};
-
 // ../tokens/src/color-utils.ts
 function hexToRgb(hex) {
   const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
@@ -1146,7 +774,7 @@ var useCustomizer = create2()(
 
 // src/hooks/useMotionPreference.ts
 function useMotionPreference() {
-  const { motion: motion2, prefersReducedMotion, setPrefersReducedMotion } = useCustomizer();
+  const { motion, prefersReducedMotion, setPrefersReducedMotion } = useCustomizer();
   useEffect(() => {
     if (typeof window === "undefined") return;
     const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
@@ -1158,8 +786,8 @@ function useMotionPreference() {
     return () => mediaQuery.removeEventListener("change", handleChange);
   }, [setPrefersReducedMotion]);
   return {
-    scale: motion2,
-    shouldAnimate: motion2 > 0 && !prefersReducedMotion,
+    scale: motion,
+    shouldAnimate: motion > 0 && !prefersReducedMotion,
     prefersReducedMotion
   };
 }