jaci-ui 0.2.0 → 0.3.0

package/dist/theme/theme-provider.d.ts

@@ -0,0 +1,66 @@
+import { ComponentPropsWithoutRef, ElementType, ReactNode } from "react";
+//#region src/theme/theme-provider.d.ts
+type ThemeMode = "light" | "dark" | "system";
+/** A leaf value accepted by the theme variable mapper. */
+type JaciThemeTokenValue = string | number;
+/**
+ * Semantic theme values. The groups intentionally accept additional keys so
+ * applications can extend the token vocabulary without waiting for a package
+ * release. Known semantic groups are documented in the public README.
+ */
+type JaciThemeTokenGroup = {
+  readonly [key: string]: JaciThemeTokenValue | JaciThemeTokenGroup | undefined;
+};
+interface JaciThemeColorTokens extends JaciThemeTokenGroup {
+  surface?: JaciThemeTokenGroup;
+  fg?: JaciThemeTokenGroup;
+  border?: JaciThemeTokenGroup;
+  accent?: JaciThemeTokenGroup;
+  success?: JaciThemeTokenValue;
+  warning?: JaciThemeTokenValue;
+  danger?: JaciThemeTokenValue;
+  info?: JaciThemeTokenValue;
+  link?: JaciThemeTokenGroup;
+  focus?: JaciThemeTokenValue;
+  disabled?: JaciThemeTokenValue;
+  selected?: JaciThemeTokenValue;
+}
+interface JaciThemeTokens {
+  colors?: JaciThemeColorTokens;
+  radii?: JaciThemeTokenGroup;
+  shadows?: JaciThemeTokenGroup;
+  durations?: JaciThemeTokenGroup;
+  easings?: JaciThemeTokenGroup;
+  transitions?: JaciThemeTokenGroup;
+  spacing?: JaciThemeTokenGroup;
+  fontSizes?: JaciThemeTokenGroup;
+  lineHeights?: JaciThemeTokenGroup;
+  typography?: JaciThemeTokenGroup;
+  textStyles?: JaciThemeTokenGroup;
+  fonts?: JaciThemeTokenGroup;
+}
+interface ThemeProviderProps extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
+  /** The controlled color mode. */
+  theme?: ThemeMode;
+  /** The initial color mode for an uncontrolled provider. */
+  defaultTheme?: ThemeMode;
+  /** The deterministic mode used for `system` while rendering on the server. */
+  ssrTheme?: "light" | "dark";
+  /** Scoped semantic token overrides. */
+  tokens?: JaciThemeTokens;
+  /** Called when a controlled provider requests a mode change. */
+  onThemeChange?: (theme: ThemeMode) => void;
+  /** The element that owns the theme scope. */
+  as?: ElementType;
+  children?: ReactNode;
+}
+interface ThemeContextValue {
+  theme: ThemeMode;
+  resolvedTheme: "light" | "dark";
+  setTheme: (theme: ThemeMode) => void;
+}
+declare const ThemeProvider: import("react").ForwardRefExoticComponent<ThemeProviderProps & import("react").RefAttributes<HTMLElement>>;
+declare function useTheme(): ThemeContextValue;
+//#endregion
+export { JaciThemeColorTokens, JaciThemeTokenGroup, JaciThemeTokenValue, JaciThemeTokens, ThemeContextValue, ThemeMode, ThemeProvider, ThemeProviderProps, useTheme };
+//# sourceMappingURL=theme-provider.d.ts.map

package/dist/theme/theme-provider.js

@@ -0,0 +1,85 @@
+"use client";
+import { createContext, createElement, forwardRef, useCallback, useContext, useEffect, useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/theme/theme-provider.tsx
+const ThemeContext = createContext({
+	theme: "light",
+	resolvedTheme: "light",
+	setTheme: () => void 0
+});
+function kebabCase(value) {
+	return value.replace(/([a-z0-9])([A-Z])/g, "$1-$2").replace(/[\s_]+/g, "-").toLowerCase();
+}
+function flattenTokens(group, path, output) {
+	if (!group) return;
+	for (const [key, value] of Object.entries(group)) {
+		if (value === void 0) continue;
+		const nextPath = [...path, kebabCase(key)];
+		if (typeof value === "object") flattenTokens(value, nextPath, output);
+		else output[`--jaci-${nextPath.join("-")}`] = String(value);
+	}
+}
+function tokenStyles(tokens) {
+	if (!tokens) return {};
+	const variables = {};
+	for (const [group, values] of Object.entries(tokens)) flattenTokens(values, [kebabCase(group)], variables);
+	return variables;
+}
+function initialSystemTheme(ssrTheme) {
+	return ssrTheme ?? "light";
+}
+const ThemeProvider = forwardRef(function ThemeProvider({ as = "div", children, defaultTheme = "light", onThemeChange, ssrTheme, style, theme, tokens, ...props }, ref) {
+	const [uncontrolledTheme, setUncontrolledTheme] = useState(defaultTheme);
+	const [systemTheme, setSystemTheme] = useState(() => initialSystemTheme(ssrTheme));
+	const currentTheme = theme ?? uncontrolledTheme;
+	useEffect(() => {
+		if (currentTheme !== "system") return;
+		if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
+		const media = window.matchMedia("(prefers-color-scheme: dark)");
+		const update = () => setSystemTheme(media.matches ? "dark" : "light");
+		update();
+		if (typeof media.addEventListener === "function") media.addEventListener("change", update);
+		else media.addListener?.(update);
+		return () => {
+			if (typeof media.removeEventListener === "function") media.removeEventListener("change", update);
+			else media.removeListener?.(update);
+		};
+	}, [currentTheme]);
+	const resolvedTheme = currentTheme === "system" ? systemTheme : currentTheme;
+	const setTheme = useCallback((nextTheme) => {
+		if (theme === void 0) setUncontrolledTheme(nextTheme);
+		onThemeChange?.(nextTheme);
+	}, [onThemeChange, theme]);
+	const contextValue = useMemo(() => ({
+		theme: currentTheme,
+		resolvedTheme,
+		setTheme
+	}), [
+		currentTheme,
+		resolvedTheme,
+		setTheme
+	]);
+	const mergedStyle = useMemo(() => ({
+		...style,
+		...tokenStyles(tokens)
+	}), [style, tokens]);
+	const Root = as;
+	return /* @__PURE__ */ jsx(ThemeContext.Provider, {
+		value: contextValue,
+		children: createElement(Root, {
+			...props,
+			"data-jaci-theme": resolvedTheme,
+			"data-jaci-component": "theme-provider",
+			"data-slot": "theme-provider",
+			ref,
+			style: mergedStyle
+		}, children)
+	});
+});
+function useTheme() {
+	return useContext(ThemeContext);
+}
+//#endregion
+export { ThemeProvider, useTheme };
+
+//# sourceMappingURL=theme-provider.js.map

package/dist/theme/theme-provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-provider.js","names":[],"sources":["../../src/theme/theme-provider.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  createContext,\n  createElement,\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useState,\n} from \"react\";\nimport type { ComponentPropsWithoutRef, CSSProperties, ElementType, ReactNode, Ref } from \"react\";\n\nexport type ThemeMode = \"light\" | \"dark\" | \"system\";\n\n/** A leaf value accepted by the theme variable mapper. */\nexport type JaciThemeTokenValue = string | number;\n\n/**\n * Semantic theme values. The groups intentionally accept additional keys so\n * applications can extend the token vocabulary without waiting for a package\n * release. Known semantic groups are documented in the public README.\n */\nexport type JaciThemeTokenGroup = {\n  readonly [key: string]: JaciThemeTokenValue | JaciThemeTokenGroup | undefined;\n};\n\nexport interface JaciThemeColorTokens extends JaciThemeTokenGroup {\n  surface?: JaciThemeTokenGroup;\n  fg?: JaciThemeTokenGroup;\n  border?: JaciThemeTokenGroup;\n  accent?: JaciThemeTokenGroup;\n  success?: JaciThemeTokenValue;\n  warning?: JaciThemeTokenValue;\n  danger?: JaciThemeTokenValue;\n  info?: JaciThemeTokenValue;\n  link?: JaciThemeTokenGroup;\n  focus?: JaciThemeTokenValue;\n  disabled?: JaciThemeTokenValue;\n  selected?: JaciThemeTokenValue;\n}\n\nexport interface JaciThemeTokens {\n  colors?: JaciThemeColorTokens;\n  radii?: JaciThemeTokenGroup;\n  shadows?: JaciThemeTokenGroup;\n  durations?: JaciThemeTokenGroup;\n  easings?: JaciThemeTokenGroup;\n  transitions?: JaciThemeTokenGroup;\n  spacing?: JaciThemeTokenGroup;\n  fontSizes?: JaciThemeTokenGroup;\n  lineHeights?: JaciThemeTokenGroup;\n  typography?: JaciThemeTokenGroup;\n  textStyles?: JaciThemeTokenGroup;\n  fonts?: JaciThemeTokenGroup;\n}\n\nexport interface ThemeProviderProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> {\n  /** The controlled color mode. */\n  theme?: ThemeMode;\n  /** The initial color mode for an uncontrolled provider. */\n  defaultTheme?: ThemeMode;\n  /** The deterministic mode used for `system` while rendering on the server. */\n  ssrTheme?: \"light\" | \"dark\";\n  /** Scoped semantic token overrides. */\n  tokens?: JaciThemeTokens;\n  /** Called when a controlled provider requests a mode change. */\n  onThemeChange?: (theme: ThemeMode) => void;\n  /** The element that owns the theme scope. */\n  as?: ElementType;\n  children?: ReactNode;\n}\n\nexport interface ThemeContextValue {\n  theme: ThemeMode;\n  resolvedTheme: \"light\" | \"dark\";\n  setTheme: (theme: ThemeMode) => void;\n}\n\nconst defaultThemeContext: ThemeContextValue = {\n  theme: \"light\",\n  resolvedTheme: \"light\",\n  setTheme: () => undefined,\n};\n\nconst ThemeContext = createContext<ThemeContextValue>(defaultThemeContext);\n\nfunction kebabCase(value: string) {\n  return value\n    .replace(/([a-z0-9])([A-Z])/g, \"$1-$2\")\n    .replace(/[\\s_]+/g, \"-\")\n    .toLowerCase();\n}\n\nfunction flattenTokens(\n  group: JaciThemeTokenGroup | undefined,\n  path: string[],\n  output: Record<string, string>,\n) {\n  if (!group) return;\n\n  for (const [key, value] of Object.entries(group)) {\n    if (value === undefined) continue;\n    const nextPath = [...path, kebabCase(key)];\n\n    if (typeof value === \"object\") {\n      flattenTokens(value, nextPath, output);\n    } else {\n      output[`--jaci-${nextPath.join(\"-\")}`] = String(value);\n    }\n  }\n}\n\nfunction tokenStyles(tokens: JaciThemeTokens | undefined): CSSProperties {\n  if (!tokens) return {};\n\n  const variables: Record<string, string> = {};\n  for (const [group, values] of Object.entries(tokens)) {\n    flattenTokens(values, [kebabCase(group)], variables);\n  }\n\n  return variables as CSSProperties;\n}\n\nfunction initialSystemTheme(ssrTheme: \"light\" | \"dark\" | undefined) {\n  return ssrTheme ?? \"light\";\n}\n\nexport const ThemeProvider = forwardRef<HTMLElement, ThemeProviderProps>(function ThemeProvider(\n  {\n    as = \"div\",\n    children,\n    defaultTheme = \"light\",\n    onThemeChange,\n    ssrTheme,\n    style,\n    theme,\n    tokens,\n    ...props\n  },\n  ref,\n) {\n  const [uncontrolledTheme, setUncontrolledTheme] = useState<ThemeMode>(defaultTheme);\n  const [systemTheme, setSystemTheme] = useState<\"light\" | \"dark\">(() =>\n    initialSystemTheme(ssrTheme),\n  );\n  const currentTheme = theme ?? uncontrolledTheme;\n\n  useEffect(() => {\n    if (currentTheme !== \"system\") return;\n\n    if (typeof window === \"undefined\" || typeof window.matchMedia !== \"function\") return;\n\n    const media = window.matchMedia(\"(prefers-color-scheme: dark)\");\n    const update = () => setSystemTheme(media.matches ? \"dark\" : \"light\");\n    update();\n    if (typeof media.addEventListener === \"function\") media.addEventListener(\"change\", update);\n    else media.addListener?.(update);\n\n    return () => {\n      if (typeof media.removeEventListener === \"function\")\n        media.removeEventListener(\"change\", update);\n      else media.removeListener?.(update);\n    };\n  }, [currentTheme]);\n\n  const resolvedTheme = currentTheme === \"system\" ? systemTheme : currentTheme;\n  const setTheme = useCallback(\n    (nextTheme: ThemeMode) => {\n      if (theme === undefined) setUncontrolledTheme(nextTheme);\n      onThemeChange?.(nextTheme);\n    },\n    [onThemeChange, theme],\n  );\n  const contextValue = useMemo(\n    () => ({ theme: currentTheme, resolvedTheme, setTheme }),\n    [currentTheme, resolvedTheme, setTheme],\n  );\n  const mergedStyle = useMemo(() => ({ ...style, ...tokenStyles(tokens) }), [style, tokens]);\n  const Root = as;\n\n  return (\n    <ThemeContext.Provider value={contextValue}>\n      {createElement(\n        Root,\n        {\n          ...props,\n          \"data-jaci-theme\": resolvedTheme,\n          \"data-jaci-component\": \"theme-provider\",\n          \"data-slot\": \"theme-provider\",\n          ref: ref as Ref<HTMLElement>,\n          style: mergedStyle,\n        },\n        children,\n      )}\n    </ThemeContext.Provider>\n  );\n});\n\nexport function useTheme() {\n  return useContext(ThemeContext);\n}\n"],"mappings":";;;;AAsFA,MAAM,eAAe,cAAiC;CALpD,OAAO;CACP,eAAe;CACf,gBAAgB,KAAA;AAGsD,CAAC;AAEzE,SAAS,UAAU,OAAe;CAChC,OAAO,MACJ,QAAQ,sBAAsB,OAAO,CAAC,CACtC,QAAQ,WAAW,GAAG,CAAC,CACvB,YAAY;AACjB;AAEA,SAAS,cACP,OACA,MACA,QACA;CACA,IAAI,CAAC,OAAO;CAEZ,KAAK,MAAM,CAAC,KAAK,UAAU,OAAO,QAAQ,KAAK,GAAG;EAChD,IAAI,UAAU,KAAA,GAAW;EACzB,MAAM,WAAW,CAAC,GAAG,MAAM,UAAU,GAAG,CAAC;EAEzC,IAAI,OAAO,UAAU,UACnB,cAAc,OAAO,UAAU,MAAM;OAErC,OAAO,UAAU,SAAS,KAAK,GAAG,OAAO,OAAO,KAAK;CAEzD;AACF;AAEA,SAAS,YAAY,QAAoD;CACvE,IAAI,CAAC,QAAQ,OAAO,CAAC;CAErB,MAAM,YAAoC,CAAC;CAC3C,KAAK,MAAM,CAAC,OAAO,WAAW,OAAO,QAAQ,MAAM,GACjD,cAAc,QAAQ,CAAC,UAAU,KAAK,CAAC,GAAG,SAAS;CAGrD,OAAO;AACT;AAEA,SAAS,mBAAmB,UAAwC;CAClE,OAAO,YAAY;AACrB;AAEA,MAAa,gBAAgB,WAA4C,SAAS,cAChF,EACE,KAAK,OACL,UACA,eAAe,SACf,eACA,UACA,OACA,OACA,QACA,GAAG,SAEL,KACA;CACA,MAAM,CAAC,mBAAmB,wBAAwB,SAAoB,YAAY;CAClF,MAAM,CAAC,aAAa,kBAAkB,eACpC,mBAAmB,QAAQ,CAC7B;CACA,MAAM,eAAe,SAAS;CAE9B,gBAAgB;EACd,IAAI,iBAAiB,UAAU;EAE/B,IAAI,OAAO,WAAW,eAAe,OAAO,OAAO,eAAe,YAAY;EAE9E,MAAM,QAAQ,OAAO,WAAW,8BAA8B;EAC9D,MAAM,eAAe,eAAe,MAAM,UAAU,SAAS,OAAO;EACpE,OAAO;EACP,IAAI,OAAO,MAAM,qBAAqB,YAAY,MAAM,iBAAiB,UAAU,MAAM;OACpF,MAAM,cAAc,MAAM;EAE/B,aAAa;GACX,IAAI,OAAO,MAAM,wBAAwB,YACvC,MAAM,oBAAoB,UAAU,MAAM;QACvC,MAAM,iBAAiB,MAAM;EACpC;CACF,GAAG,CAAC,YAAY,CAAC;CAEjB,MAAM,gBAAgB,iBAAiB,WAAW,cAAc;CAChE,MAAM,WAAW,aACd,cAAyB;EACxB,IAAI,UAAU,KAAA,GAAW,qBAAqB,SAAS;EACvD,gBAAgB,SAAS;CAC3B,GACA,CAAC,eAAe,KAAK,CACvB;CACA,MAAM,eAAe,eACZ;EAAE,OAAO;EAAc;EAAe;CAAS,IACtD;EAAC;EAAc;EAAe;CAAQ,CACxC;CACA,MAAM,cAAc,eAAe;EAAE,GAAG;EAAO,GAAG,YAAY,MAAM;CAAE,IAAI,CAAC,OAAO,MAAM,CAAC;CACzF,MAAM,OAAO;CAEb,OACE,oBAAC,aAAa,UAAd;EAAuB,OAAO;YAC3B,cACC,MACA;GACE,GAAG;GACH,mBAAmB;GACnB,uBAAuB;GACvB,aAAa;GACR;GACL,OAAO;EACT,GACA,QACF;CACqB,CAAA;AAE3B,CAAC;AAED,SAAgB,WAAW;CACzB,OAAO,WAAW,YAAY;AAChC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jaci-ui",
   "description": "Accessible, themeable React components by Jaci UI",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "license": "MIT",
   "author": {
     "name": "Richard Borges",