jaci-ui 0.7.0 → 0.8.0

package/dist/styles.css

@@ -5,6 +5,10 @@
     --made-with-panda: '🐼';
 }
 
+  :where([data-slot="bottom-navigation"]),:where([data-slot="sidebar"]) {
+    display: flex;
+}
+
   [data-jaci-theme] {
     background-color: var(--jaci-colors-surface-canvas);
     color: var(--jaci-colors-fg-default);
@@ -5322,26 +5326,21 @@
     .jaci-image__viewport {
       inset: var(--jaci-spacing-0);
       padding: var(--jaci-spacing-4);
-      overflow: auto;
       justify-content: center;
       position: fixed;
       z-index: 60;
 }
 
     .jaci-image__viewport,.jaci-image__popup {
+      overflow: auto;
       align-items: center;
       display: flex;
 }
 
     .jaci-image__popup {
-      padding: var(--jaci-spacing-2);
-      border-color: var(--jaci-colors-border-default);
-      border-radius: var(--jaci-radii-2xl);
-      border-style: solid;
-      border-width: 1px;
-      overflow: hidden;
-      background-color: var(--jaci-colors-surface-canvas);
-      box-shadow: var(--jaci-shadows-xl);
+      gap: var(--jaci-spacing-2);
+      background-color: var(--jaci-colors-transparent);
+      flex-direction: column;
       position: relative;
       --transition-duration: var(--jaci-durations-normal);
       transition-duration: var(--jaci-durations-normal);
@@ -5363,10 +5362,18 @@
       border-radius: var(--jaci-radii-xl);
       display: block;
       object-fit: contain;
-      max-height: calc(100dvh - 4rem);
+      max-height: calc(100dvh - 8rem);
       max-width: calc(100vw - 4rem);
 }
 
+    .jaci-image__closeRow {
+      align-items: center;
+      display: flex;
+      justify-content: flex-end;
+      min-height: 2rem;
+      width: 100%;
+}
+
     .jaci-image__close {
       border-color: var(--jaci-colors-border-default);
       border-radius: var(--jaci-radii-full);
@@ -5379,12 +5386,9 @@
       color: var(--jaci-colors-fg-default);
       cursor: pointer;
       display: inline-flex;
+      flex-shrink: 0;
       justify-content: center;
-      position: absolute;
-      z-index: 1;
       height: var(--jaci-sizes-8);
-      right: var(--jaci-spacing-3);
-      top: var(--jaci-spacing-3);
       width: var(--jaci-sizes-8);
 }
 
@@ -5478,14 +5482,8 @@
 }
 
     .jaci-figure__popup {
-      padding: var(--jaci-spacing-2);
-      border-color: var(--jaci-colors-border-default);
-      border-radius: var(--jaci-radii-2xl);
-      border-style: solid;
-      border-width: 1px;
       gap: var(--jaci-spacing-3);
-      background-color: var(--jaci-colors-surface-canvas);
-      box-shadow: var(--jaci-shadows-xl);
+      background-color: var(--jaci-colors-transparent);
       flex-direction: column;
       position: relative;
       --transition-duration: var(--jaci-durations-normal);
@@ -5513,12 +5511,28 @@
 }
 
     .jaci-figure__lightboxCaption {
+      padding: var(--jaci-spacing-3);
+      border-color: var(--jaci-colors-border-default);
+      border-radius: var(--jaci-radii-lg);
+      border-style: solid;
+      border-width: 1px;
+      background-color: var(--jaci-colors-surface-canvas);
+      box-sizing: border-box;
       color: var(--jaci-colors-fg-default);
       font-size: var(--jaci-font-sizes-sm);
       line-height: 1.5;
       overflow-wrap: anywhere;
       text-align: center;
       max-width: min(48rem, calc(100vw - 4rem));
+      width: 100%;
+}
+
+    .jaci-figure__closeRow {
+      align-items: center;
+      display: flex;
+      justify-content: flex-end;
+      min-height: 2rem;
+      width: 100%;
 }
 
     .jaci-figure__close {
@@ -5533,12 +5547,9 @@
       color: var(--jaci-colors-fg-default);
       cursor: pointer;
       display: inline-flex;
+      flex-shrink: 0;
       justify-content: center;
-      position: absolute;
-      z-index: 1;
       height: var(--jaci-sizes-8);
-      right: var(--jaci-spacing-3);
-      top: var(--jaci-spacing-3);
       width: var(--jaci-sizes-8);
 }
 
@@ -6023,7 +6034,6 @@
       background-color: var(--jaci-colors-surface-overlay);
       box-shadow: var(--jaci-shadows-xl);
       box-sizing: border-box;
-      display: flex;
       position: fixed;
       transform: translateX(-50%);
       -webkit-user-select: none;
@@ -6145,7 +6155,7 @@
       overflow-wrap: anywhere;
       max-width: calc(100vw - 2rem);
       min-width: var(--jaci-sizes-0);
-      width: min(32rem, calc(100vw - 2rem));
+      width: max-content;
 }
 
     .jaci-navigation-menu__link {
@@ -6216,6 +6226,7 @@
       overflow-wrap: anywhere;
       max-width: calc(100vw - 2rem);
       min-width: var(--jaci-sizes-0);
+      width: max-content;
 }
 
     .jaci-navigation-menu__backdrop {
@@ -7276,7 +7287,6 @@
     .jaci-sidebar__root {
       background-color: var(--jaci-colors-surface-canvas);
       color: var(--jaci-colors-fg-default);
-      display: flex;
       flex-direction: column;
       flex-shrink: 0;
       position: relative;
@@ -9288,17 +9298,8 @@
       .jaci-drawer__footer {
         padding: var(--jaci-spacing-6);
 }
-      .jaci-image__viewport {
+      .jaci-image__viewport,.jaci-figure__viewport {
         padding: var(--jaci-spacing-8);
-}
-      .jaci-image__popup {
-        padding: var(--jaci-spacing-3);
-}
-      .jaci-figure__viewport {
-        padding: var(--jaci-spacing-8);
-}
-      .jaci-figure__popup {
-        padding: var(--jaci-spacing-3);
 }
       .jaci-navbar__bar {
         padding: var(--jaci-spacing-4);
@@ -9525,6 +9526,29 @@
     font-size: var(--jaci-font-sizes-lg);
 }
 
+  .jaci-command__root--mode_dropdown {
+    overflow: visible;
+    position: relative;
+}
+
+  .jaci-command__list--mode_dropdown {
+    border-color: var(--jaci-colors-border-default);
+    border-radius: var(--jaci-radii-lg);
+    border-style: solid;
+    border-width: 1px;
+    --backdrop-blur: blur(var(--jaci-blurs-md));
+    backdrop-filter: var(--backdrop-blur, ) var(--backdrop-brightness, ) var(--backdrop-contrast, ) var(--backdrop-grayscale, ) var(--backdrop-hue-rotate, ) var(--backdrop-invert, ) var(--backdrop-opacity, ) var(--backdrop-saturate, ) var(--backdrop-sepia, );
+    -webkit-backdrop-filter: var(--backdrop-blur, ) var(--backdrop-brightness, ) var(--backdrop-contrast, ) var(--backdrop-grayscale, ) var(--backdrop-hue-rotate, ) var(--backdrop-invert, ) var(--backdrop-opacity, ) var(--backdrop-saturate, ) var(--backdrop-sepia, );
+    background-color: var(--jaci-colors-surface-overlay);
+    box-shadow: var(--jaci-shadows-lg);
+    position: absolute;
+    z-index: 50;
+    left: var(--jaci-spacing-0);
+    max-width: calc(100vw - 2rem);
+    top: calc(100% + 0.5rem);
+    width: min(100%, calc(100vw - 2rem));
+}
+
   .jaci-toggleSwitch__root--checked_true {
     background-color: var(--jaci-colors-accent-default);
 }
@@ -10071,27 +10095,23 @@
 }
 
   .jaci-toast__root--tone_info {
-    border-color: var(--jaci-colors-accent-hover);
-    background-color: var(--jaci-colors-accent-default);
-    color: var(--jaci-colors-fg-on-accent);
+    border-color: var(--jaci-colors-info);
+    background-color: color-mix(in srgb, var(--jaci-colors-info) 14%, var(--jaci-colors-surface-raised));
 }
 
   .jaci-toast__root--tone_success {
-    border-color: var(--jaci-colors-green-700);
-    background-color: var(--jaci-colors-success);
-    color: var(--jaci-colors-fg-on-accent);
+    border-color: var(--jaci-colors-success);
+    background-color: color-mix(in srgb, var(--jaci-colors-success) 14%, var(--jaci-colors-surface-raised));
 }
 
   .jaci-toast__root--tone_warning {
-    border-color: var(--jaci-colors-amber-700);
-    background-color: var(--jaci-colors-warning);
-    color: var(--jaci-colors-fg-on-accent);
+    border-color: var(--jaci-colors-warning);
+    background-color: color-mix(in srgb, var(--jaci-colors-warning) 14%, var(--jaci-colors-surface-raised));
 }
 
   .jaci-toast__root--tone_danger {
-    border-color: var(--jaci-colors-red-600);
-    background-color: var(--jaci-colors-danger);
-    color: var(--jaci-colors-fg-on-accent);
+    border-color: var(--jaci-colors-danger);
+    background-color: color-mix(in srgb, var(--jaci-colors-danger) 14%, var(--jaci-colors-surface-raised));
 }
 
   .jaci-toggle-group__item--size_md {

package/dist/theme/theme-provider.cjs

@@ -1,4 +1,5 @@
 "use client";
+const require_theme_scope = require("./theme-scope.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/theme/theme-provider.tsx
@@ -31,6 +32,7 @@ function initialSystemTheme(ssrTheme) {
 const ThemeProvider = (0, react.forwardRef)(function ThemeProvider({ as = "div", children, defaultTheme = "light", onThemeChange, ssrTheme, style, theme, tokens, ...props }, ref) {
 	const [uncontrolledTheme, setUncontrolledTheme] = (0, react.useState)(defaultTheme);
 	const [systemTheme, setSystemTheme] = (0, react.useState)(() => initialSystemTheme(ssrTheme));
+	const [scopeElement, setScopeElement] = (0, react.useState)(null);
 	const currentTheme = theme ?? uncontrolledTheme;
 	(0, react.useEffect)(() => {
 		if (currentTheme !== "system") return;
@@ -64,16 +66,24 @@ const ThemeProvider = (0, react.forwardRef)(function ThemeProvider({ as = "div",
 		...tokenStyles(tokens)
 	}), [style, tokens]);
 	const Root = as;
+	const setRootRef = (0, react.useCallback)((element) => {
+		setScopeElement((current) => current === element ? current : element);
+		if (typeof ref === "function") ref(element);
+		else if (ref) ref.current = element;
+	}, [ref]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ThemeContext.Provider, {
 		value: contextValue,
-		children: (0, react.createElement)(Root, {
-			...props,
-			"data-jaci-theme": resolvedTheme,
-			"data-jaci-component": "theme-provider",
-			"data-slot": "theme-provider",
-			ref,
-			style: mergedStyle
-		}, children)
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_theme_scope.ThemeScopeContext.Provider, {
+			value: { container: scopeElement },
+			children: (0, react.createElement)(Root, {
+				...props,
+				"data-jaci-theme": resolvedTheme,
+				"data-jaci-component": "theme-provider",
+				"data-slot": "theme-provider",
+				ref: setRootRef,
+				style: mergedStyle
+			}, children)
+		})
 	});
 });
 function useTheme() {

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

@@ -1 +1 @@
-{"version":3,"file":"theme-provider.cjs","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,gBAAA,GAAA,MAAA,cAAA,CAAgD;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,iBAAA,GAAA,MAAA,WAAA,CAA4D,SAAS,cAChF,EACE,KAAK,OACL,UACA,eAAe,SACf,eACA,UACA,OACA,OACA,QACA,GAAG,SAEL,KACA;CACA,MAAM,CAAC,mBAAmB,yBAAA,GAAA,MAAA,SAAA,CAA4C,YAAY;CAClF,MAAM,CAAC,aAAa,mBAAA,GAAA,MAAA,SAAA,OAClB,mBAAmB,QAAQ,CAC7B;CACA,MAAM,eAAe,SAAS;CAE9B,CAAA,GAAA,MAAA,UAAA,OAAgB;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,YAAA,GAAA,MAAA,YAAA,EACH,cAAyB;EACxB,IAAI,UAAU,KAAA,GAAW,qBAAqB,SAAS;EACvD,gBAAgB,SAAS;CAC3B,GACA,CAAC,eAAe,KAAK,CACvB;CACA,MAAM,gBAAA,GAAA,MAAA,QAAA,QACG;EAAE,OAAO;EAAc;EAAe;CAAS,IACtD;EAAC;EAAc;EAAe;CAAQ,CACxC;CACA,MAAM,eAAA,GAAA,MAAA,QAAA,QAA6B;EAAE,GAAG;EAAO,GAAG,YAAY,MAAM;CAAE,IAAI,CAAC,OAAO,MAAM,CAAC;CACzF,MAAM,OAAO;CAEb,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,aAAa,UAAd;EAAuB,OAAO;qCAE1B,MACA;GACE,GAAG;GACH,mBAAmB;GACnB,uBAAuB;GACvB,aAAa;GACR;GACL,OAAO;EACT,GACA,QACF;CACqB,CAAA;AAE3B,CAAC;AAED,SAAgB,WAAW;CACzB,QAAA,GAAA,MAAA,WAAA,CAAkB,YAAY;AAChC"}
+{"version":3,"file":"theme-provider.cjs","names":["ThemeScopeContext"],"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\nimport { ThemeScopeContext } from \"./theme-scope\";\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 [scopeElement, setScopeElement] = useState<HTMLElement | null>(null);\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  const setRootRef = useCallback(\n    (element: HTMLElement | null) => {\n      setScopeElement((current) => (current === element ? current : element));\n      if (typeof ref === \"function\") ref(element);\n      else if (ref) (ref as { current: HTMLElement | null }).current = element;\n    },\n    [ref],\n  );\n\n  return (\n    <ThemeContext.Provider value={contextValue}>\n      <ThemeScopeContext.Provider value={{ container: scopeElement }}>\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: setRootRef as Ref<HTMLElement>,\n            style: mergedStyle,\n          },\n          children,\n        )}\n      </ThemeScopeContext.Provider>\n    </ThemeContext.Provider>\n  );\n});\n\nexport function useTheme() {\n  return useContext(ThemeContext);\n}\n"],"mappings":"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"}

package/dist/theme/theme-provider.js

@@ -1,4 +1,5 @@
 "use client";
+import { ThemeScopeContext } from "./theme-scope.js";
 import { createContext, createElement, forwardRef, useCallback, useContext, useEffect, useMemo, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/theme/theme-provider.tsx
@@ -31,6 +32,7 @@ function initialSystemTheme(ssrTheme) {
 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 [scopeElement, setScopeElement] = useState(null);
 	const currentTheme = theme ?? uncontrolledTheme;
 	useEffect(() => {
 		if (currentTheme !== "system") return;
@@ -64,16 +66,24 @@ const ThemeProvider = forwardRef(function ThemeProvider({ as = "div", children,
 		...tokenStyles(tokens)
 	}), [style, tokens]);
 	const Root = as;
+	const setRootRef = useCallback((element) => {
+		setScopeElement((current) => current === element ? current : element);
+		if (typeof ref === "function") ref(element);
+		else if (ref) ref.current = element;
+	}, [ref]);
 	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)
+		children: /* @__PURE__ */ jsx(ThemeScopeContext.Provider, {
+			value: { container: scopeElement },
+			children: createElement(Root, {
+				...props,
+				"data-jaci-theme": resolvedTheme,
+				"data-jaci-component": "theme-provider",
+				"data-slot": "theme-provider",
+				ref: setRootRef,
+				style: mergedStyle
+			}, children)
+		})
 	});
 });
 function useTheme() {

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

@@ -1 +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"}
+{"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\nimport { ThemeScopeContext } from \"./theme-scope\";\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 [scopeElement, setScopeElement] = useState<HTMLElement | null>(null);\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  const setRootRef = useCallback(\n    (element: HTMLElement | null) => {\n      setScopeElement((current) => (current === element ? current : element));\n      if (typeof ref === \"function\") ref(element);\n      else if (ref) (ref as { current: HTMLElement | null }).current = element;\n    },\n    [ref],\n  );\n\n  return (\n    <ThemeContext.Provider value={contextValue}>\n      <ThemeScopeContext.Provider value={{ container: scopeElement }}>\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: setRootRef as Ref<HTMLElement>,\n            style: mergedStyle,\n          },\n          children,\n        )}\n      </ThemeScopeContext.Provider>\n    </ThemeContext.Provider>\n  );\n});\n\nexport function useTheme() {\n  return useContext(ThemeContext);\n}\n"],"mappings":"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"}

package/dist/theme/theme-scope.cjs

@@ -0,0 +1,21 @@
+"use client";
+let react = require("react");
+//#region src/theme/theme-scope.ts
+const ThemeScopeContext = (0, react.createContext)({ container: null });
+function useThemePortalContainer() {
+	return (0, react.useContext)(ThemeScopeContext).container;
+}
+function useThemePortalProps(props) {
+	const scopedContainer = useThemePortalContainer();
+	if (props.container !== void 0 || scopedContainer === null) return props;
+	return {
+		...props,
+		container: scopedContainer
+	};
+}
+//#endregion
+exports.ThemeScopeContext = ThemeScopeContext;
+exports.useThemePortalContainer = useThemePortalContainer;
+exports.useThemePortalProps = useThemePortalProps;
+
+//# sourceMappingURL=theme-scope.cjs.map

package/dist/theme/theme-scope.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-scope.cjs","names":[],"sources":["../../src/theme/theme-scope.ts"],"sourcesContent":["\"use client\";\n\nimport { createContext, useContext } from \"react\";\nimport type { RefObject } from \"react\";\n\nexport type ThemePortalContainer =\n  | HTMLElement\n  | ShadowRoot\n  | null\n  | RefObject<HTMLElement | ShadowRoot | null>;\n\nexport interface ThemeScopeValue {\n  container: HTMLElement | null;\n}\n\nexport const ThemeScopeContext = createContext<ThemeScopeValue>({ container: null });\n\nexport function useThemePortalContainer() {\n  return useContext(ThemeScopeContext).container;\n}\n\nexport function useThemePortalProps<T extends { container?: ThemePortalContainer | undefined }>(\n  props: T,\n): T {\n  const scopedContainer = useThemePortalContainer();\n\n  if (props.container !== undefined || scopedContainer === null) return props;\n\n  return { ...props, container: scopedContainer };\n}\n"],"mappings":";;;AAeA,MAAa,qBAAA,GAAA,MAAA,cAAA,CAAmD,EAAE,WAAW,KAAK,CAAC;AAEnF,SAAgB,0BAA0B;CACxC,QAAA,GAAA,MAAA,WAAA,CAAkB,iBAAiB,CAAC,CAAC;AACvC;AAEA,SAAgB,oBACd,OACG;CACH,MAAM,kBAAkB,wBAAwB;CAEhD,IAAI,MAAM,cAAc,KAAA,KAAa,oBAAoB,MAAM,OAAO;CAEtE,OAAO;EAAE,GAAG;EAAO,WAAW;CAAgB;AAChD"}

package/dist/theme/theme-scope.js

@@ -0,0 +1,19 @@
+"use client";
+import { createContext, useContext } from "react";
+//#region src/theme/theme-scope.ts
+const ThemeScopeContext = createContext({ container: null });
+function useThemePortalContainer() {
+	return useContext(ThemeScopeContext).container;
+}
+function useThemePortalProps(props) {
+	const scopedContainer = useThemePortalContainer();
+	if (props.container !== void 0 || scopedContainer === null) return props;
+	return {
+		...props,
+		container: scopedContainer
+	};
+}
+//#endregion
+export { ThemeScopeContext, useThemePortalContainer, useThemePortalProps };
+
+//# sourceMappingURL=theme-scope.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"theme-scope.js","names":[],"sources":["../../src/theme/theme-scope.ts"],"sourcesContent":["\"use client\";\n\nimport { createContext, useContext } from \"react\";\nimport type { RefObject } from \"react\";\n\nexport type ThemePortalContainer =\n  | HTMLElement\n  | ShadowRoot\n  | null\n  | RefObject<HTMLElement | ShadowRoot | null>;\n\nexport interface ThemeScopeValue {\n  container: HTMLElement | null;\n}\n\nexport const ThemeScopeContext = createContext<ThemeScopeValue>({ container: null });\n\nexport function useThemePortalContainer() {\n  return useContext(ThemeScopeContext).container;\n}\n\nexport function useThemePortalProps<T extends { container?: ThemePortalContainer | undefined }>(\n  props: T,\n): T {\n  const scopedContainer = useThemePortalContainer();\n\n  if (props.container !== undefined || scopedContainer === null) return props;\n\n  return { ...props, container: scopedContainer };\n}\n"],"mappings":";;;AAeA,MAAa,oBAAoB,cAA+B,EAAE,WAAW,KAAK,CAAC;AAEnF,SAAgB,0BAA0B;CACxC,OAAO,WAAW,iBAAiB,CAAC,CAAC;AACvC;AAEA,SAAgB,oBACd,OACG;CACH,MAAM,kBAAkB,wBAAwB;CAEhD,IAAI,MAAM,cAAc,KAAA,KAAa,oBAAoB,MAAM,OAAO;CAEtE,OAAO;EAAE,GAAG;EAAO,WAAW;CAAgB;AAChD"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jaci-ui",
   "description": "Accessible, themeable React components by Jaci UI",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "license": "MIT",
   "author": {
     "name": "Richard Borges",
@@ -97,15 +97,18 @@
     "clean": "rimraf dist src/styled-system",
     "panda:codegen": "panda codegen --clean --config panda.config.ts",
     "panda:css": "panda cssgen --config panda.config.ts --outfile dist/styles.css",
-    "build": "pnpm panda:codegen && tsdown && pnpm panda:css && pnpm verify:client-boundaries",
+    "ensure:sourcemaps": "node scripts/ensure-entry-sourcemaps.mjs",
+    "build": "pnpm panda:codegen && tsdown && pnpm ensure:sourcemaps && pnpm panda:css && pnpm verify:client-boundaries",
     "dev": "pnpm panda:codegen && tsdown --watch",
-    "lint": "biome lint src panda.config.ts tsdown.config.ts",
+    "lint": "biome check --assist-enabled=false src scripts panda.config.ts tsdown.config.ts",
     "format": "biome format --write src panda.config.ts tsdown.config.ts",
     "format:check": "biome format src panda.config.ts tsdown.config.ts",
     "typecheck": "pnpm panda:codegen && tsc --noEmit",
     "test": "pnpm panda:codegen && vitest run",
     "test:watch": "pnpm panda:codegen && vitest",
     "verify:client-boundaries": "node scripts/verify-client-boundaries.mjs",
-    "package:check": "pnpm build && node scripts/package-check.mjs"
+    "package:check": "pnpm build && pnpm performance:check && pnpm package:contract",
+    "package:contract": "node scripts/package-check.mjs",
+    "performance:check": "node scripts/performance-check.mjs"
   }
 }