@work-rjkashyap/unified-ui 0.1.0

package/dist/chunk-2RGLRX6K.cjs

@@ -0,0 +1,279 @@
+'use strict';
+
+var chunkKHON2AEM_cjs = require('./chunk-KHON2AEM.cjs');
+var chunkECIGDEAH_cjs = require('./chunk-ECIGDEAH.cjs');
+var chunkXCKK6P46_cjs = require('./chunk-XCKK6P46.cjs');
+var react = require('react');
+var jsxRuntime = require('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, chunkKHON2AEM_cjs.semanticLight),
+    ...mapRecord(radiusVarNames, chunkKHON2AEM_cjs.radius),
+    ...mapRecord(shadowVarNames, chunkKHON2AEM_cjs.shadow),
+    ...mapRecord(zIndexVarNames, chunkKHON2AEM_cjs.zIndex),
+    ...mapRecord(durationVarNames, chunkXCKK6P46_cjs.durationCSS),
+    ...mapRecord(easingVarNames, chunkXCKK6P46_cjs.easingCSS),
+    ...mapRecord(fontFamilyVarNames, chunkECIGDEAH_cjs.fontFamily)
+  };
+}
+function buildDarkThemeVars() {
+  return {
+    ...mapRecord(colorVarNames, chunkKHON2AEM_cjs.semanticDark),
+    ...mapRecord(radiusVarNames, chunkKHON2AEM_cjs.radius),
+    ...mapRecord(shadowVarNames, chunkKHON2AEM_cjs.shadowDark),
+    ...mapRecord(zIndexVarNames, chunkKHON2AEM_cjs.zIndex),
+    ...mapRecord(durationVarNames, chunkXCKK6P46_cjs.durationCSS),
+    ...mapRecord(easingVarNames, chunkXCKK6P46_cjs.easingCSS),
+    ...mapRecord(fontFamilyVarNames, chunkECIGDEAH_cjs.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 = react.createContext(null);
+function useDSTheme() {
+  const ctx = react.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] = react.useState(
+    () => defaultTheme ?? getStoredTheme()
+  );
+  const [systemPreference, setSystemPreference] = react.useState("light");
+  react.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 = react.useMemo(
+    () => theme === "system" ? systemPreference : theme,
+    [theme, systemPreference]
+  );
+  react.useEffect(() => {
+    if (!manageHtmlClass) return;
+    const root = document.documentElement;
+    if (resolvedTheme === "dark") {
+      root.classList.add("dark");
+    } else {
+      root.classList.remove("dark");
+    }
+  }, [resolvedTheme, manageHtmlClass]);
+  const setTheme = react.useCallback((newTheme) => {
+    setThemeState(newTheme);
+    storeTheme(newTheme);
+  }, []);
+  const toggleTheme = react.useCallback(() => {
+    setThemeState((current) => {
+      const resolved = resolveTheme(current);
+      const next = resolved === "dark" ? "light" : "dark";
+      storeTheme(next);
+      return next;
+    });
+  }, []);
+  const value = react.useMemo(
+    () => ({
+      theme,
+      resolvedTheme,
+      setTheme,
+      toggleTheme
+    }),
+    [theme, resolvedTheme, setTheme, toggleTheme]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(DSThemeContext.Provider, { value, children });
+}
+
+exports.DSThemeProvider = DSThemeProvider;
+exports.buildDarkThemeVars = buildDarkThemeVars;
+exports.buildLightThemeVars = buildLightThemeVars;
+exports.buildThemeCSS = buildThemeCSS;
+exports.contract = contract;
+exports.cssVar = cssVar;
+exports.useDSTheme = useDSTheme;