@work-rjkashyap/unified-ui 0.1.0

package/dist/chunk-I74E52C5.mjs

@@ -0,0 +1,271 @@
+import { zIndex, shadow, radius, semanticLight, shadowDark, semanticDark } from './chunk-IWJ5VMZ7.mjs';
+import { fontFamily } from './chunk-ITBG42M5.mjs';
+import { easingCSS, durationCSS } from './chunk-EZ2L3XPS.mjs';
+import { createContext, useContext, useState, useEffect, useMemo, useCallback } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+// src/theme/contract.ts
+var PREFIX = "--ds";
+var colorVarNames = {
+  background: `${PREFIX}-color-background`,
+  foreground: `${PREFIX}-color-foreground`,
+  surface: `${PREFIX}-color-surface`,
+  surfaceRaised: `${PREFIX}-color-surface-raised`,
+  surfaceOverlay: `${PREFIX}-color-surface-overlay`,
+  muted: `${PREFIX}-color-muted`,
+  mutedForeground: `${PREFIX}-color-muted-foreground`,
+  primary: `${PREFIX}-color-primary`,
+  primaryForeground: `${PREFIX}-color-primary-foreground`,
+  primaryHover: `${PREFIX}-color-primary-hover`,
+  primaryActive: `${PREFIX}-color-primary-active`,
+  primaryMuted: `${PREFIX}-color-primary-muted`,
+  primaryMutedForeground: `${PREFIX}-color-primary-muted-foreground`,
+  secondary: `${PREFIX}-color-secondary`,
+  secondaryForeground: `${PREFIX}-color-secondary-foreground`,
+  secondaryHover: `${PREFIX}-color-secondary-hover`,
+  secondaryActive: `${PREFIX}-color-secondary-active`,
+  success: `${PREFIX}-color-success`,
+  successForeground: `${PREFIX}-color-success-foreground`,
+  successMuted: `${PREFIX}-color-success-muted`,
+  successMutedForeground: `${PREFIX}-color-success-muted-foreground`,
+  warning: `${PREFIX}-color-warning`,
+  warningForeground: `${PREFIX}-color-warning-foreground`,
+  warningMuted: `${PREFIX}-color-warning-muted`,
+  warningMutedForeground: `${PREFIX}-color-warning-muted-foreground`,
+  danger: `${PREFIX}-color-danger`,
+  dangerForeground: `${PREFIX}-color-danger-foreground`,
+  dangerHover: `${PREFIX}-color-danger-hover`,
+  dangerActive: `${PREFIX}-color-danger-active`,
+  dangerMuted: `${PREFIX}-color-danger-muted`,
+  dangerMutedForeground: `${PREFIX}-color-danger-muted-foreground`,
+  info: `${PREFIX}-color-info`,
+  infoForeground: `${PREFIX}-color-info-foreground`,
+  infoMuted: `${PREFIX}-color-info-muted`,
+  infoMutedForeground: `${PREFIX}-color-info-muted-foreground`,
+  border: `${PREFIX}-color-border`,
+  borderMuted: `${PREFIX}-color-border-muted`,
+  borderStrong: `${PREFIX}-color-border-strong`,
+  focusRing: `${PREFIX}-color-focus-ring`,
+  input: `${PREFIX}-color-input`,
+  inputForeground: `${PREFIX}-color-input-foreground`,
+  inputPlaceholder: `${PREFIX}-color-input-placeholder`,
+  disabled: `${PREFIX}-color-disabled`,
+  disabledForeground: `${PREFIX}-color-disabled-foreground`
+};
+var radiusVarNames = {
+  none: `${PREFIX}-radius-none`,
+  sm: `${PREFIX}-radius-sm`,
+  md: `${PREFIX}-radius-md`,
+  lg: `${PREFIX}-radius-lg`,
+  xl: `${PREFIX}-radius-xl`,
+  full: `${PREFIX}-radius-full`
+};
+var shadowVarNames = {
+  none: `${PREFIX}-shadow-none`,
+  xs: `${PREFIX}-shadow-xs`,
+  sm: `${PREFIX}-shadow-sm`,
+  md: `${PREFIX}-shadow-md`,
+  lg: `${PREFIX}-shadow-lg`,
+  xl: `${PREFIX}-shadow-xl`,
+  "2xl": `${PREFIX}-shadow-2xl`,
+  focusRing: `${PREFIX}-shadow-focus-ring`
+};
+var zIndexVarNames = {
+  base: `${PREFIX}-z-base`,
+  dropdown: `${PREFIX}-z-dropdown`,
+  sticky: `${PREFIX}-z-sticky`,
+  overlay: `${PREFIX}-z-overlay`,
+  modal: `${PREFIX}-z-modal`,
+  popover: `${PREFIX}-z-popover`,
+  toast: `${PREFIX}-z-toast`,
+  tooltip: `${PREFIX}-z-tooltip`,
+  max: `${PREFIX}-z-max`
+};
+var durationVarNames = {
+  instant: `${PREFIX}-duration-instant`,
+  fast: `${PREFIX}-duration-fast`,
+  moderate: `${PREFIX}-duration-moderate`,
+  normal: `${PREFIX}-duration-normal`,
+  slow: `${PREFIX}-duration-slow`,
+  slower: `${PREFIX}-duration-slower`,
+  slowest: `${PREFIX}-duration-slowest`
+};
+var easingVarNames = {
+  standard: `${PREFIX}-easing-standard`,
+  decelerate: `${PREFIX}-easing-decelerate`,
+  accelerate: `${PREFIX}-easing-accelerate`,
+  emphasize: `${PREFIX}-easing-emphasize`,
+  linear: `${PREFIX}-easing-linear`,
+  snap: `${PREFIX}-easing-snap`
+};
+var fontFamilyVarNames = {
+  display: `${PREFIX}-font-display`,
+  sans: `${PREFIX}-font-sans`,
+  serif: `${PREFIX}-font-serif`,
+  mono: `${PREFIX}-font-mono`,
+  inherit: `${PREFIX}-font-inherit`
+};
+function mapRecord(varNames, values) {
+  const result = {};
+  for (const key of Object.keys(varNames)) {
+    result[varNames[key]] = values[key];
+  }
+  return result;
+}
+function buildLightThemeVars() {
+  return {
+    ...mapRecord(colorVarNames, semanticLight),
+    ...mapRecord(radiusVarNames, radius),
+    ...mapRecord(shadowVarNames, shadow),
+    ...mapRecord(zIndexVarNames, zIndex),
+    ...mapRecord(durationVarNames, durationCSS),
+    ...mapRecord(easingVarNames, easingCSS),
+    ...mapRecord(fontFamilyVarNames, fontFamily)
+  };
+}
+function buildDarkThemeVars() {
+  return {
+    ...mapRecord(colorVarNames, semanticDark),
+    ...mapRecord(radiusVarNames, radius),
+    ...mapRecord(shadowVarNames, shadowDark),
+    ...mapRecord(zIndexVarNames, zIndex),
+    ...mapRecord(durationVarNames, durationCSS),
+    ...mapRecord(easingVarNames, easingCSS),
+    ...mapRecord(fontFamilyVarNames, fontFamily)
+  };
+}
+function varsToCSS(vars) {
+  return Object.entries(vars).map(([prop, value]) => `  ${prop}: ${value};`).join("\n");
+}
+function buildThemeCSS() {
+  const lightVars = buildLightThemeVars();
+  const darkVars = buildDarkThemeVars();
+  return `:root {
+${varsToCSS(lightVars)}
+}
+
+.dark {
+${varsToCSS(darkVars)}
+}`;
+}
+var contract = {
+  color: colorVarNames,
+  radius: radiusVarNames,
+  shadow: shadowVarNames,
+  zIndex: zIndexVarNames,
+  duration: durationVarNames,
+  easing: easingVarNames,
+  fontFamily: fontFamilyVarNames
+};
+var cssVar = {
+  /** Returns `rgb(var(--ds-color-<key>))` for use in style props */
+  color: (key) => `rgb(var(${colorVarNames[key]}))`,
+  /** Returns `rgb(var(--ds-color-<key>) / <alpha>)` for colors with opacity */
+  colorAlpha: (key, alpha) => `rgb(var(${colorVarNames[key]}) / ${alpha})`,
+  /** Returns `var(--ds-radius-<key>)` */
+  radius: (key) => `var(${radiusVarNames[key]})`,
+  /** Returns `var(--ds-shadow-<key>)` */
+  shadow: (key) => `var(${shadowVarNames[key]})`,
+  /** Returns `var(--ds-z-<key>)` */
+  zIndex: (key) => `var(${zIndexVarNames[key]})`,
+  /** Returns `var(--ds-duration-<key>)` */
+  duration: (key) => `var(${durationVarNames[key]})`,
+  /** Returns `var(--ds-easing-<key>)` */
+  easing: (key) => `var(${easingVarNames[key]})`,
+  /** Returns `var(--ds-font-<key>)` */
+  fontFamily: (key) => `var(${fontFamilyVarNames[key]})`,
+  /** Returns the raw `var(--ds-color-<key>)` channels without rgb() wrapping */
+  colorChannels: (key) => `var(${colorVarNames[key]})`
+};
+var DSThemeContext = createContext(null);
+function useDSTheme() {
+  const ctx = useContext(DSThemeContext);
+  if (!ctx) {
+    throw new Error(
+      "useDSTheme must be used within a <DSThemeProvider>. Wrap your application (or layout) with <DSThemeProvider>."
+    );
+  }
+  return ctx;
+}
+function getSystemPreference() {
+  if (typeof window === "undefined") return "light";
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function resolveTheme(theme) {
+  if (theme === "system") return getSystemPreference();
+  return theme;
+}
+var STORAGE_KEY = "ds-theme-preference";
+function getStoredTheme() {
+  if (typeof window === "undefined") return "system";
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (stored === "light" || stored === "dark" || stored === "system") {
+      return stored;
+    }
+  } catch {
+  }
+  return "system";
+}
+function storeTheme(theme) {
+  try {
+    localStorage.setItem(STORAGE_KEY, theme);
+  } catch {
+  }
+}
+function DSThemeProvider({
+  children,
+  defaultTheme,
+  manageHtmlClass = false
+}) {
+  const [theme, setThemeState] = useState(
+    () => defaultTheme ?? getStoredTheme()
+  );
+  const [systemPreference, setSystemPreference] = useState("light");
+  useEffect(() => {
+    setSystemPreference(getSystemPreference());
+    const mql = window.matchMedia("(prefers-color-scheme: dark)");
+    const handler = (e) => {
+      setSystemPreference(e.matches ? "dark" : "light");
+    };
+    mql.addEventListener("change", handler);
+    return () => mql.removeEventListener("change", handler);
+  }, []);
+  const resolvedTheme = useMemo(
+    () => theme === "system" ? systemPreference : theme,
+    [theme, systemPreference]
+  );
+  useEffect(() => {
+    if (!manageHtmlClass) return;
+    const root = document.documentElement;
+    if (resolvedTheme === "dark") {
+      root.classList.add("dark");
+    } else {
+      root.classList.remove("dark");
+    }
+  }, [resolvedTheme, manageHtmlClass]);
+  const setTheme = useCallback((newTheme) => {
+    setThemeState(newTheme);
+    storeTheme(newTheme);
+  }, []);
+  const toggleTheme = useCallback(() => {
+    setThemeState((current) => {
+      const resolved = resolveTheme(current);
+      const next = resolved === "dark" ? "light" : "dark";
+      storeTheme(next);
+      return next;
+    });
+  }, []);
+  const value = useMemo(
+    () => ({
+      theme,
+      resolvedTheme,
+      setTheme,
+      toggleTheme
+    }),
+    [theme, resolvedTheme, setTheme, toggleTheme]
+  );
+  return /* @__PURE__ */ jsx(DSThemeContext.Provider, { value, children });
+}
+
+export { DSThemeProvider, buildDarkThemeVars, buildLightThemeVars, buildThemeCSS, contract, cssVar, useDSTheme };

package/dist/chunk-ITBG42M5.mjs

@@ -0,0 +1,133 @@
+// src/tokens/typography.ts
+var fontFamily = {
+  /** Display — used for hero headings, marketing text, landing pages */
+  display: "'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+  /** Sans — primary UI typeface for all interface text */
+  sans: "'Outfit', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
+  /** Serif — long-form reading, editorial content, blog posts */
+  serif: "'Lora', Georgia, 'Times New Roman', serif",
+  /** Mono — code blocks, technical values, tabular data */
+  mono: "'JetBrains Mono', 'Fira Code', 'SF Mono', 'Cascadia Code', Consolas, 'Liberation Mono', Menlo, monospace",
+  /** Inherit — use parent's font (escape hatch for third-party integration) */
+  inherit: "inherit"
+};
+var fontSize = {
+  xs: "12px",
+  sm: "14px",
+  base: "16px",
+  lg: "18px",
+  xl: "20px",
+  "2xl": "24px",
+  "3xl": "30px"
+};
+var lineHeight = {
+  none: "1",
+  tight: "1.25",
+  snug: "1.375",
+  normal: "1.5",
+  relaxed: "1.625",
+  /** Fixed pixel values for precise control */
+  "16": "16px",
+  "20": "20px",
+  "24": "24px",
+  "28": "28px",
+  "32": "32px",
+  "36": "36px"
+};
+var fontWeight = {
+  regular: "400",
+  medium: "500",
+  semibold: "600",
+  bold: "700"
+};
+var letterSpacing = {
+  tighter: "-0.05em",
+  tight: "-0.025em",
+  normal: "0em",
+  wide: "0.025em",
+  wider: "0.05em"
+};
+var typographyVariants = {
+  /** Page titles — 30px bold, tight leading, sans font */
+  heading1: {
+    fontSize: fontSize["3xl"],
+    lineHeight: lineHeight["36"],
+    fontWeight: fontWeight.bold,
+    letterSpacing: letterSpacing.tight,
+    fontFamily: "sans"
+  },
+  /** Section titles — 24px semibold, sans font */
+  heading2: {
+    fontSize: fontSize["2xl"],
+    lineHeight: lineHeight["32"],
+    fontWeight: fontWeight.semibold,
+    letterSpacing: letterSpacing.tight,
+    fontFamily: "sans"
+  },
+  /** Subsection titles — 20px semibold, sans font */
+  heading3: {
+    fontSize: fontSize.xl,
+    lineHeight: lineHeight["28"],
+    fontWeight: fontWeight.semibold,
+    letterSpacing: letterSpacing.normal,
+    fontFamily: "sans"
+  },
+  /** Card titles, sidebar headings — 18px medium, sans font */
+  subheading: {
+    fontSize: fontSize.lg,
+    lineHeight: lineHeight["28"],
+    fontWeight: fontWeight.medium,
+    letterSpacing: letterSpacing.normal,
+    fontFamily: "sans"
+  },
+  /** Default body text — 16px regular, sans font */
+  body: {
+    fontSize: fontSize.base,
+    lineHeight: lineHeight["24"],
+    fontWeight: fontWeight.regular,
+    letterSpacing: letterSpacing.normal,
+    fontFamily: "sans"
+  },
+  /** Compact body text — 14px regular, sans font */
+  bodySm: {
+    fontSize: fontSize.sm,
+    lineHeight: lineHeight["20"],
+    fontWeight: fontWeight.regular,
+    letterSpacing: letterSpacing.normal,
+    fontFamily: "sans"
+  },
+  /** Captions, helper text, timestamps — 12px regular, sans font */
+  caption: {
+    fontSize: fontSize.xs,
+    lineHeight: lineHeight["16"],
+    fontWeight: fontWeight.regular,
+    letterSpacing: letterSpacing.wide,
+    fontFamily: "sans"
+  },
+  /** Form labels, badges — 14px medium, sans font */
+  label: {
+    fontSize: fontSize.sm,
+    lineHeight: lineHeight["20"],
+    fontWeight: fontWeight.medium,
+    letterSpacing: letterSpacing.normal,
+    fontFamily: "sans"
+  },
+  /** Overline / eyebrow text — 12px semibold, uppercased in usage, sans font */
+  overline: {
+    fontSize: fontSize.xs,
+    lineHeight: lineHeight["16"],
+    fontWeight: fontWeight.semibold,
+    letterSpacing: letterSpacing.wider,
+    fontFamily: "sans"
+  },
+  /** Code / monospace inline text — 14px regular, mono font */
+  code: {
+    fontSize: fontSize.sm,
+    lineHeight: lineHeight["20"],
+    fontWeight: fontWeight.regular,
+    letterSpacing: letterSpacing.normal,
+    fontFamily: "mono"
+  }
+};
+
+export { fontFamily, fontSize, fontWeight, letterSpacing, lineHeight, typographyVariants };