@yugnex/nexui 2.0.0

package/src/tokens/motion.ts

@@ -0,0 +1,97 @@
+// @yugnex/nexui — Motion Tokens
+// Easing curves + durations. Matches native platform conventions.
+
+export const NEXUI_EASING = {
+  // Standard — element moves between two screen states
+  standard:        "cubic-bezier(0.2, 0, 0, 1)",
+  // Decelerate — element enters the screen (decelerates to rest)
+  decelerate:      "cubic-bezier(0, 0, 0.2, 1)",
+  // Accelerate — element leaves the screen (accelerates to exit)
+  accelerate:      "cubic-bezier(0.3, 0, 1, 1)",
+  // Linear — progress bars, loaders
+  linear:          "linear",
+  // Spring — interactive, snap, bouncy (for emphasis)
+  spring:          "cubic-bezier(0.34, 1.56, 0.64, 1)",
+  // Sharp — micro-interactions (toggles, chips)
+  sharp:           "cubic-bezier(0.4, 0, 0.6, 1)",
+} as const;
+
+export const NEXUI_DURATION = {
+  // Micro — icon state change, badge pulse
+  50:   "50ms",
+  // Fast — tooltip show/hide, focus ring
+  100:  "100ms",
+  // Quick — button feedback, checkbox
+  150:  "150ms",
+  // Standard — panel collapse, menu open
+  200:  "200ms",
+  // Smooth — drawer, modal, tab transitions
+  300:  "300ms",
+  // Deliberate — page-level transitions
+  400:  "400ms",
+  // Slow — complex choreography
+  500:  "500ms",
+  // Elaborate — data visualization entry
+  700:  "700ms",
+  // Cinematic — splash, hero
+  1000: "1000ms",
+} as const;
+
+// Semantic transition presets — use these in components
+export const NEXUI_TRANSITION = {
+  "instant":    `all ${NEXUI_DURATION[50]}  ${NEXUI_EASING.sharp}`,
+  "fast":       `all ${NEXUI_DURATION[100]} ${NEXUI_EASING.standard}`,
+  "base":       `all ${NEXUI_DURATION[200]} ${NEXUI_EASING.standard}`,
+  "smooth":     `all ${NEXUI_DURATION[300]} ${NEXUI_EASING.decelerate}`,
+  "slow":       `all ${NEXUI_DURATION[500]} ${NEXUI_EASING.decelerate}`,
+  "none":       "none",
+
+  // Specific property transitions (better performance than `all`)
+  "colors":     `color ${NEXUI_DURATION[150]} ${NEXUI_EASING.standard}, background-color ${NEXUI_DURATION[150]} ${NEXUI_EASING.standard}, border-color ${NEXUI_DURATION[150]} ${NEXUI_EASING.standard}, fill ${NEXUI_DURATION[150]} ${NEXUI_EASING.standard}, stroke ${NEXUI_DURATION[150]} ${NEXUI_EASING.standard}`,
+  "opacity":    `opacity ${NEXUI_DURATION[200]} ${NEXUI_EASING.standard}`,
+  "transform":  `transform ${NEXUI_DURATION[200]} ${NEXUI_EASING.standard}`,
+  "ring":       `box-shadow ${NEXUI_DURATION[150]} ${NEXUI_EASING.standard}`,
+  "slide-in":   `transform ${NEXUI_DURATION[300]} ${NEXUI_EASING.decelerate}, opacity ${NEXUI_DURATION[300]} ${NEXUI_EASING.decelerate}`,
+  "slide-out":  `transform ${NEXUI_DURATION[200]} ${NEXUI_EASING.accelerate}, opacity ${NEXUI_DURATION[200]} ${NEXUI_EASING.accelerate}`,
+  "scale":      `transform ${NEXUI_DURATION[200]} ${NEXUI_EASING.spring}`,
+  "ring-score": `stroke-dashoffset ${NEXUI_DURATION[700]} ${NEXUI_EASING.decelerate}`,
+} as const;
+
+// Keyframe definitions — inject once per page via NexuiTypographySheet or initializeNexuiEngine
+export const NEXUI_KEYFRAMES = `
+@keyframes nx-fade-in {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+@keyframes nx-fade-out {
+  from { opacity: 1; }
+  to   { opacity: 0; }
+}
+@keyframes nx-slide-up {
+  from { opacity: 0; transform: translateY(8px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+@keyframes nx-slide-down {
+  from { opacity: 0; transform: translateY(-8px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+@keyframes nx-scale-in {
+  from { opacity: 0; transform: scale(0.95); }
+  to   { opacity: 1; transform: scale(1); }
+}
+@keyframes nx-spin {
+  to { transform: rotate(360deg); }
+}
+@keyframes nx-pulse-ring {
+  0%, 100% { opacity: 1; }
+  50%       { opacity: 0.4; }
+}
+@keyframes nx-shimmer {
+  0%   { background-position: -200% 0; }
+  100% { background-position:  200% 0; }
+}
+@keyframes nx-blink {
+  0%, 100% { opacity: 1; }
+  50%       { opacity: 0; }
+}
+`;

package/src/tokens/shadows.ts

@@ -0,0 +1,58 @@
+// @yugnex/nexui — Shadow / Elevation System
+// Two rulesets: void (dark UI shadows use color + opacity) and terminal.
+
+export const NEXUI_SHADOWS_VOID = {
+  // Flat — no elevation
+  "none":   "none",
+
+  // Subtle — cards, inline elements on same surface
+  "xs":     "0 1px 2px rgba(0,0,0,0.40)",
+
+  // Low — floating buttons, popover triggers
+  "sm":     "0 1px 3px rgba(0,0,0,0.50), 0 1px 2px rgba(0,0,0,0.30)",
+
+  // Standard — cards, panels
+  "md":     "0 4px 6px rgba(0,0,0,0.40), 0 2px 4px rgba(0,0,0,0.30)",
+
+  // Elevated — dropdowns, date pickers
+  "lg":     "0 10px 15px rgba(0,0,0,0.50), 0 4px 6px rgba(0,0,0,0.30)",
+
+  // High — modals, dialogs
+  "xl":     "0 20px 25px rgba(0,0,0,0.55), 0 8px 10px rgba(0,0,0,0.30)",
+
+  // Overlay — full-screen drawers, command palette
+  "2xl":    "0 25px 50px rgba(0,0,0,0.65)",
+
+  // Accent glow — focused inputs, highlighted cards
+  "glow-accent":   "0 0 0 3px rgba(232,144,16,0.30), 0 0 16px rgba(232,144,16,0.12)",
+  "glow-live":     "0 0 0 3px rgba(15,212,198,0.25), 0 0 16px rgba(15,212,198,0.10)",
+  "glow-success":  "0 0 0 3px rgba(34,197,94,0.25), 0 0 12px rgba(34,197,94,0.08)",
+  "glow-error":    "0 0 0 3px rgba(239,68,68,0.30), 0 0 12px rgba(239,68,68,0.10)",
+
+  // Focus ring — keyboard nav, ARIA
+  "focus":         "0 0 0 2px #0D1117, 0 0 0 4px rgba(232,144,16,0.60)",
+
+  // Inset — pressed states, sunken containers
+  "inner":         "inset 0 2px 4px rgba(0,0,0,0.40)",
+  "inner-strong":  "inset 0 2px 8px rgba(0,0,0,0.60)",
+} as const;
+
+export const NEXUI_SHADOWS_TERMINAL = {
+  "none":   "none",
+  "xs":     "0 1px 2px rgba(0,0,0,0.70)",
+  "sm":     "0 1px 3px rgba(0,0,0,0.80), 0 1px 2px rgba(0,0,0,0.50)",
+  "md":     "0 4px 6px rgba(0,0,0,0.70), 0 2px 4px rgba(0,0,0,0.50)",
+  "lg":     "0 10px 15px rgba(0,0,0,0.80), 0 4px 6px rgba(0,0,0,0.50)",
+  "xl":     "0 20px 25px rgba(0,0,0,0.85), 0 8px 10px rgba(0,0,0,0.50)",
+  "2xl":    "0 25px 50px rgba(0,0,0,0.90)",
+
+  "glow-accent":   "0 0 0 3px rgba(232,144,16,0.30), 0 0 16px rgba(232,144,16,0.12)",
+  "glow-live":     "0 0 0 3px rgba(16,185,129,0.30), 0 0 16px rgba(16,185,129,0.12)",
+  "glow-success":  "0 0 0 3px rgba(16,185,129,0.30), 0 0 12px rgba(16,185,129,0.10)",
+  "glow-error":    "0 0 0 3px rgba(239,68,68,0.35), 0 0 12px rgba(239,68,68,0.12)",
+  "focus":         "0 0 0 2px #000000, 0 0 0 4px rgba(16,185,129,0.60)",
+  "inner":         "inset 0 2px 4px rgba(0,0,0,0.70)",
+  "inner-strong":  "inset 0 2px 8px rgba(0,0,0,0.90)",
+} as const;
+
+export type ShadowKey = keyof typeof NEXUI_SHADOWS_VOID;

package/src/tokens/spacing.ts

@@ -0,0 +1,79 @@
+// @yugnex/nexui — Spacing Scale
+// 4px base unit. All values are multiples of 4px.
+
+export const NEXUI_SPACE = {
+  0:    "0px",
+  px:   "1px",
+  0.5:  "2px",
+  1:    "4px",
+  1.5:  "6px",
+  2:    "8px",
+  2.5:  "10px",
+  3:    "12px",
+  3.5:  "14px",
+  4:    "16px",
+  5:    "20px",
+  6:    "24px",
+  7:    "28px",
+  8:    "32px",
+  9:    "36px",
+  10:   "40px",
+  11:   "44px",
+  12:   "48px",
+  14:   "56px",
+  16:   "64px",
+  20:   "80px",
+  24:   "96px",
+  28:   "112px",
+  32:   "128px",
+  36:   "144px",
+  40:   "160px",
+  44:   "176px",
+  48:   "192px",
+  52:   "208px",
+  56:   "224px",
+  60:   "240px",
+  64:   "256px",
+  72:   "288px",
+  80:   "320px",
+  96:   "384px",
+} as const;
+
+export type SpaceKey = keyof typeof NEXUI_SPACE;
+
+// Semantic spacing aliases — what components reference
+export const NEXUI_SPACE_SEMANTIC = {
+  "component-xs":  NEXUI_SPACE[1],    // 4px — tight internal padding
+  "component-sm":  NEXUI_SPACE[2],    // 8px — small component padding
+  "component-md":  NEXUI_SPACE[3],    // 12px — standard component padding
+  "component-lg":  NEXUI_SPACE[4],    // 16px — large component padding
+  "component-xl":  NEXUI_SPACE[6],    // 24px — extra-large component padding
+
+  "layout-xs":     NEXUI_SPACE[4],    // 16px — tight section gap
+  "layout-sm":     NEXUI_SPACE[6],    // 24px — small section gap
+  "layout-md":     NEXUI_SPACE[8],    // 32px — standard section gap
+  "layout-lg":     NEXUI_SPACE[12],   // 48px — large section gap
+  "layout-xl":     NEXUI_SPACE[16],   // 64px — page-level gap
+
+  "inline-xs":     NEXUI_SPACE[1],    // 4px — inline element gap
+  "inline-sm":     NEXUI_SPACE[2],    // 8px — small inline gap
+  "inline-md":     NEXUI_SPACE[3],    // 12px — standard inline gap
+  "inline-lg":     NEXUI_SPACE[4],    // 16px — large inline gap
+
+  "icon-sm":       NEXUI_SPACE[4],    // 16px — small icon size
+  "icon-md":       NEXUI_SPACE[5],    // 20px — standard icon size
+  "icon-lg":       NEXUI_SPACE[6],    // 24px — large icon size
+
+  "radius-none":   "0px",
+  "radius-xs":     "2px",
+  "radius-sm":     "4px",
+  "radius-md":     "6px",
+  "radius-lg":     "8px",
+  "radius-xl":     "12px",
+  "radius-2xl":    "16px",
+  "radius-full":   "9999px",
+
+  "border-thin":   "1px",
+  "border-medium": "1.5px",
+  "border-thick":  "2px",
+} as const;

package/src/tokens/type.ts

@@ -0,0 +1,224 @@
+// @yugnex/nexui — Typography Tokens
+// Fluid type scale: clamp(minPx, yIntersect + slope*100vw, maxPx)
+// Min viewport: 320px. Max viewport: 1440px.
+
+const MIN_VP = 320;
+const MAX_VP = 1440;
+
+function fluid(minPx: number, maxPx: number): string {
+  const slope = (maxPx - minPx) / (MAX_VP - MIN_VP);
+  const y = minPx - slope * MIN_VP;
+  const yFixed = parseFloat(y.toFixed(4));
+  const slopeFixed = parseFloat((slope * 100).toFixed(4));
+  const sign = yFixed >= 0 ? "+" : "-";
+  return `clamp(${minPx}px, ${Math.abs(yFixed)}px ${sign} ${slopeFixed}vw, ${maxPx}px)`;
+}
+
+// Type scale — based on a modular scale of 1.25 (Major Third)
+export const NEXUI_FONT_SIZE = {
+  "2xs":  fluid(10, 11),   // micro labels, timestamps
+  "xs":   fluid(11, 12),   // captions, helper text
+  "sm":   fluid(12, 13),   // secondary body, badge text
+  "base": fluid(13, 14),   // primary body
+  "md":   fluid(14, 15),   // large body, button labels
+  "lg":   fluid(16, 18),   // subheading
+  "xl":   fluid(18, 20),   // section heading
+  "2xl":  fluid(20, 24),   // page heading
+  "3xl":  fluid(24, 30),   // display sm
+  "4xl":  fluid(30, 36),   // display md
+  "5xl":  fluid(36, 48),   // display lg
+  "6xl":  fluid(48, 60),   // hero
+  "7xl":  fluid(60, 72),   // mega hero
+} as const;
+
+export const NEXUI_LINE_HEIGHT = {
+  "none":    "1",
+  "tight":   "1.15",
+  "snug":    "1.3",
+  "normal":  "1.5",
+  "relaxed": "1.65",
+  "loose":   "1.8",
+  "code":    "1.7",
+} as const;
+
+export const NEXUI_LETTER_SPACING = {
+  "tighter": "-0.04em",
+  "tight":   "-0.02em",
+  "normal":  "0em",
+  "wide":    "0.04em",
+  "wider":   "0.08em",
+  "widest":  "0.16em",
+  "mono":    "0.02em",
+  "caps":    "0.06em",
+} as const;
+
+export const NEXUI_FONT_WEIGHT = {
+  "thin":       "100",
+  "extralight": "200",
+  "light":      "300",
+  "regular":    "400",
+  "medium":     "500",
+  "semibold":   "600",
+  "bold":       "700",
+  "extrabold":  "800",
+  "black":      "900",
+} as const;
+
+// Font family stacks — zero font file dependency (web-safe system stack)
+// When NexuiSans/NexuiMono WOFF2 files are available, prepend them first.
+export const NEXUI_FONT_FAMILY = {
+  "sans": [
+    "NexuiSans",           // reserved — provide via @font-face
+    "Inter",               // common on modern systems
+    "system-ui",
+    "-apple-system",
+    "BlinkMacSystemFont",
+    "Segoe UI",
+    "Roboto",
+    "Helvetica Neue",
+    "Arial",
+    "sans-serif",
+  ].join(", "),
+
+  "mono": [
+    "NexuiMono",           // reserved — provide via @font-face
+    "JetBrains Mono",
+    "Fira Code",
+    "Cascadia Code",
+    "SF Mono",
+    "ui-monospace",
+    "SFMono-Regular",
+    "Menlo",
+    "Monaco",
+    "Consolas",
+    "Liberation Mono",
+    "Courier New",
+    "monospace",
+  ].join(", "),
+
+  "display": [
+    "NexuiDisplay",        // reserved — provide via @font-face
+    "Cal Sans",
+    "DM Sans",
+    "Inter",
+    "system-ui",
+    "sans-serif",
+  ].join(", "),
+} as const;
+
+// Semantic text role presets — map directly to component style objects
+export const NEXUI_TEXT_ROLES = {
+  "display-lg": {
+    fontSize:      NEXUI_FONT_SIZE["5xl"],
+    fontWeight:    NEXUI_FONT_WEIGHT["bold"],
+    lineHeight:    NEXUI_LINE_HEIGHT["tight"],
+    letterSpacing: NEXUI_LETTER_SPACING["tight"],
+    fontFamily:    NEXUI_FONT_FAMILY["display"],
+  },
+  "display-md": {
+    fontSize:      NEXUI_FONT_SIZE["4xl"],
+    fontWeight:    NEXUI_FONT_WEIGHT["bold"],
+    lineHeight:    NEXUI_LINE_HEIGHT["tight"],
+    letterSpacing: NEXUI_LETTER_SPACING["tight"],
+    fontFamily:    NEXUI_FONT_FAMILY["display"],
+  },
+  "heading-xl": {
+    fontSize:      NEXUI_FONT_SIZE["3xl"],
+    fontWeight:    NEXUI_FONT_WEIGHT["semibold"],
+    lineHeight:    NEXUI_LINE_HEIGHT["snug"],
+    letterSpacing: NEXUI_LETTER_SPACING["tight"],
+    fontFamily:    NEXUI_FONT_FAMILY["sans"],
+  },
+  "heading-lg": {
+    fontSize:      NEXUI_FONT_SIZE["2xl"],
+    fontWeight:    NEXUI_FONT_WEIGHT["semibold"],
+    lineHeight:    NEXUI_LINE_HEIGHT["snug"],
+    letterSpacing: NEXUI_LETTER_SPACING["normal"],
+    fontFamily:    NEXUI_FONT_FAMILY["sans"],
+  },
+  "heading-md": {
+    fontSize:      NEXUI_FONT_SIZE["xl"],
+    fontWeight:    NEXUI_FONT_WEIGHT["semibold"],
+    lineHeight:    NEXUI_LINE_HEIGHT["snug"],
+    letterSpacing: NEXUI_LETTER_SPACING["normal"],
+    fontFamily:    NEXUI_FONT_FAMILY["sans"],
+  },
+  "heading-sm": {
+    fontSize:      NEXUI_FONT_SIZE["lg"],
+    fontWeight:    NEXUI_FONT_WEIGHT["medium"],
+    lineHeight:    NEXUI_LINE_HEIGHT["normal"],
+    letterSpacing: NEXUI_LETTER_SPACING["normal"],
+    fontFamily:    NEXUI_FONT_FAMILY["sans"],
+  },
+  "label-lg": {
+    fontSize:      NEXUI_FONT_SIZE["md"],
+    fontWeight:    NEXUI_FONT_WEIGHT["medium"],
+    lineHeight:    NEXUI_LINE_HEIGHT["normal"],
+    letterSpacing: NEXUI_LETTER_SPACING["normal"],
+    fontFamily:    NEXUI_FONT_FAMILY["sans"],
+  },
+  "label-md": {
+    fontSize:      NEXUI_FONT_SIZE["base"],
+    fontWeight:    NEXUI_FONT_WEIGHT["medium"],
+    lineHeight:    NEXUI_LINE_HEIGHT["normal"],
+    letterSpacing: NEXUI_LETTER_SPACING["normal"],
+    fontFamily:    NEXUI_FONT_FAMILY["sans"],
+  },
+  "label-sm": {
+    fontSize:      NEXUI_FONT_SIZE["sm"],
+    fontWeight:    NEXUI_FONT_WEIGHT["medium"],
+    lineHeight:    NEXUI_LINE_HEIGHT["normal"],
+    letterSpacing: NEXUI_LETTER_SPACING["wide"],
+    fontFamily:    NEXUI_FONT_FAMILY["sans"],
+  },
+  "label-caps": {
+    fontSize:      NEXUI_FONT_SIZE["xs"],
+    fontWeight:    NEXUI_FONT_WEIGHT["semibold"],
+    lineHeight:    NEXUI_LINE_HEIGHT["normal"],
+    letterSpacing: NEXUI_LETTER_SPACING["caps"],
+    fontFamily:    NEXUI_FONT_FAMILY["sans"],
+    textTransform: "uppercase" as const,
+  },
+  "body-lg": {
+    fontSize:      NEXUI_FONT_SIZE["md"],
+    fontWeight:    NEXUI_FONT_WEIGHT["regular"],
+    lineHeight:    NEXUI_LINE_HEIGHT["relaxed"],
+    letterSpacing: NEXUI_LETTER_SPACING["normal"],
+    fontFamily:    NEXUI_FONT_FAMILY["sans"],
+  },
+  "body-md": {
+    fontSize:      NEXUI_FONT_SIZE["base"],
+    fontWeight:    NEXUI_FONT_WEIGHT["regular"],
+    lineHeight:    NEXUI_LINE_HEIGHT["relaxed"],
+    letterSpacing: NEXUI_LETTER_SPACING["normal"],
+    fontFamily:    NEXUI_FONT_FAMILY["sans"],
+  },
+  "body-sm": {
+    fontSize:      NEXUI_FONT_SIZE["sm"],
+    fontWeight:    NEXUI_FONT_WEIGHT["regular"],
+    lineHeight:    NEXUI_LINE_HEIGHT["normal"],
+    letterSpacing: NEXUI_LETTER_SPACING["normal"],
+    fontFamily:    NEXUI_FONT_FAMILY["sans"],
+  },
+  "caption": {
+    fontSize:      NEXUI_FONT_SIZE["xs"],
+    fontWeight:    NEXUI_FONT_WEIGHT["regular"],
+    lineHeight:    NEXUI_LINE_HEIGHT["normal"],
+    letterSpacing: NEXUI_LETTER_SPACING["normal"],
+    fontFamily:    NEXUI_FONT_FAMILY["sans"],
+  },
+  "code-base": {
+    fontSize:      NEXUI_FONT_SIZE["sm"],
+    fontWeight:    NEXUI_FONT_WEIGHT["regular"],
+    lineHeight:    NEXUI_LINE_HEIGHT["code"],
+    letterSpacing: NEXUI_LETTER_SPACING["mono"],
+    fontFamily:    NEXUI_FONT_FAMILY["mono"],
+  },
+  "code-sm": {
+    fontSize:      NEXUI_FONT_SIZE["xs"],
+    fontWeight:    NEXUI_FONT_WEIGHT["regular"],
+    lineHeight:    NEXUI_LINE_HEIGHT["code"],
+    letterSpacing: NEXUI_LETTER_SPACING["mono"],
+    fontFamily:    NEXUI_FONT_FAMILY["mono"],
+  },
+} as const;