@vela-ui/react/dist/components/provider/index.js

Vela UI React components

"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/components/provider/index.tsx
var provider_exports = {};
__export(provider_exports, {
  ProviderContext: () => ProviderContext,
  ThemeProvider: () => ThemeProvider,
  ThemeProviderContext: () => ThemeProviderContext,
  VelaUIProvider: () => VelaUIProvider,
  useProviderContext: () => useProviderContext,
  useTheme: () => useTheme
});
module.exports = __toCommonJS(provider_exports);

// src/components/provider/provider.tsx
var import_react = require("react");
var import_react_aria_components = require("react-aria-components");

// src/lib/context.ts
var React = __toESM(require("react"));
function createContext2(options = {}) {
  const {
    strict = true,
    errorMessage = "useContext: `context` is undefined. Seems you forgot to wrap component within the Provider",
    name
  } = options;
  const Context = React.createContext(void 0);
  Context.displayName = name;
  function useContext3() {
    var _a;
    const context = React.useContext(Context);
    if (!context && strict) {
      const error = new Error(errorMessage);
      error.name = "ContextError";
      (_a = Error.captureStackTrace) == null ? void 0 : _a.call(Error, error, useContext3);
      throw error;
    }
    return context;
  }
  return [Context.Provider, useContext3, Context];
}

// src/components/provider/provider.tsx
var import_jsx_runtime = require("react/jsx-runtime");
var [ProviderContext, useProviderContext] = createContext2({
  name: "ProviderContext",
  strict: false
});
var VelaUIProvider = ({
  children,
  locale = "en-US",
  navigate,
  useHref,
  prefix
}) => {
  let contents = children;
  if (navigate) {
    contents = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_aria_components.RouterProvider, { navigate, useHref, children: contents });
  }
  const context = (0, import_react.useMemo)(() => ({ prefix }), [prefix]);
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ProviderContext, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_aria_components.I18nProvider, { locale, children: contents }) });
};

// src/components/provider/theme-provider.tsx
var import_react2 = require("react");
var import_jsx_runtime2 = require("react/jsx-runtime");
var initialState = {
  theme: "system",
  setTheme: () => null
};
var ThemeProviderContext = (0, import_react2.createContext)(initialState);
function ThemeProvider({
  children,
  defaultTheme = "system",
  storageKey = "vela-ui-theme",
  ...props
}) {
  const [theme, setTheme] = (0, import_react2.useState)(
    () => localStorage.getItem(storageKey) || defaultTheme
  );
  (0, import_react2.useEffect)(() => {
    const root = window.document.documentElement;
    root.classList.remove("light", "dark");
    if (theme === "system") {
      const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
      root.classList.add(systemTheme);
      return;
    }
    root.classList.add(theme);
  }, [theme]);
  const value = {
    theme,
    setTheme: (theme2) => {
      localStorage.setItem(storageKey, theme2);
      setTheme(theme2);
    }
  };
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ThemeProviderContext.Provider, { ...props, value, children });
}
var useTheme = () => {
  const context = (0, import_react2.useContext)(ThemeProviderContext);
  if (context === void 0) throw new Error("useTheme must be used within a ThemeProvider");
  return context;
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  ProviderContext,
  ThemeProvider,
  ThemeProviderContext,
  VelaUIProvider,
  useProviderContext,
  useTheme
});