@jbpark/ui-kit 7.1.0 → 8.1.0

package/dist/providers/config/config.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"config.mjs","names":[],"sources":["../../../src/providers/config/config.tsx"],"sourcesContent":["'use client';\n\nimport {\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n  useSyncExternalStore,\n} from 'react';\n\nimport { DirectionProvider } from '@radix-ui/react-direction';\n\nimport { cn } from '@repo/ui/utils';\n\nimport { Context, DEFAULT_LOCALE, useConfig } from './context';\nimport { registerRootConfig } from './registry';\nimport type {\n  ComponentSize,\n  DefaultProps,\n  Locale,\n  ThemeConfig,\n  ThemeToken,\n} from './types';\n\nconst DARK_MEDIA_QUERY = '(prefers-color-scheme: dark)';\n\nconst subscribeToSystemColorScheme = (callback: () => void) => {\n  if (typeof window === 'undefined') {\n    return () => {};\n  }\n\n  const mql = window.matchMedia(DARK_MEDIA_QUERY);\n  mql.addEventListener('change', callback);\n  return () => mql.removeEventListener('change', callback);\n};\n\nconst getSystemPrefersDark = () =>\n  typeof window !== 'undefined' && window.matchMedia(DARK_MEDIA_QUERY).matches;\n\n// No `window` during SSR, so there's no way to know the visitor's actual\n// preference before hydration — assume light (the conservative default)\n// and let useSyncExternalStore correct it client-side once matchMedia is\n// available, same flash-of-incorrect-guess tradeoff already accepted for\n// Sider's breakpoint prop elsewhere in this library.\nconst getServerSnapshot = () => false;\n\nconst useSystemPrefersDark = () =>\n  useSyncExternalStore(\n    subscribeToSystemColorScheme,\n    getSystemPrefersDark,\n    getServerSnapshot,\n  );\n\nconst tokenToCssVar: Record<keyof ThemeToken, string> = {\n  colorPrimary: '--primary',\n  colorPrimaryForeground: '--primary-foreground',\n  colorBackground: '--background',\n  colorForeground: '--foreground',\n  colorCard: '--card',\n  colorCardForeground: '--card-foreground',\n  colorPopover: '--popover',\n  colorPopoverForeground: '--popover-foreground',\n  colorSecondary: '--secondary',\n  colorSecondaryForeground: '--secondary-foreground',\n  colorMuted: '--muted',\n  colorMutedForeground: '--muted-foreground',\n  colorAccent: '--accent',\n  colorAccentForeground: '--accent-foreground',\n  colorDestructive: '--destructive',\n  colorBorder: '--border',\n  colorInput: '--input',\n  colorRing: '--ring',\n  borderRadius: '--radius',\n\n  btnBackground: '--btn-bg',\n  btnBackgroundHover: '--btn-bg-hover',\n  btnBackgroundActive: '--btn-bg-active',\n  btnBorder: '--btn-border',\n  btnForeground: '--btn-fg',\n\n  sidebar: '--sidebar',\n  sidebarForeground: '--sidebar-foreground',\n  sidebarPrimary: '--sidebar-primary',\n  sidebarPrimaryForeground: '--sidebar-primary-foreground',\n  sidebarAccent: '--sidebar-accent',\n  sidebarAccentForeground: '--sidebar-accent-foreground',\n  sidebarBorder: '--sidebar-border',\n  sidebarRing: '--sidebar-ring',\n\n  chart1: '--chart-1',\n  chart2: '--chart-2',\n  chart3: '--chart-3',\n  chart4: '--chart-4',\n  chart5: '--chart-5',\n\n  fontSans: '--font-sans',\n  fontMono: '--font-mono',\n};\n\nconst buildCssVars = (token?: ThemeToken): React.CSSProperties => {\n  if (!token) {\n    return {};\n  }\n\n  const vars: Record<string, string> = {};\n\n  for (const [key, value] of Object.entries(token)) {\n    if (value === undefined) {\n      continue;\n    }\n    const cssVar = tokenToCssVar[key as keyof ThemeToken];\n    if (cssVar) {\n      vars[cssVar] = value;\n    }\n  }\n\n  return vars as React.CSSProperties;\n};\n\ninterface Props {\n  theme?: ThemeConfig;\n  locale?: Locale;\n  getContainer?: () => HTMLElement;\n  componentSize?: ComponentSize;\n  direction?: 'ltr' | 'rtl';\n  defaultProps?: DefaultProps;\n  className?: string;\n  style?: React.CSSProperties;\n  children: React.ReactNode;\n}\n\nconst Config = ({\n  theme = {},\n  locale = {},\n  getContainer,\n  componentSize,\n  direction,\n  defaultProps,\n  className,\n  style,\n  children,\n}: Props) => {\n  const parent = useConfig();\n  const [wrapperEl, setWrapperEl] = useState<HTMLDivElement | null>(null);\n\n  // Only a Config with no Config ancestor of its own registers for the\n  // imperative stack (Modal.*/Toast.*) to inherit — see registry.tsx.\n  const isRoot = !parent.isConfigured;\n\n  // `theme` is typically a fresh inline object literal at the call site\n  // (and `parent.theme` inherits the same problem from its own Config\n  // ancestor), so depending on them directly meant mergedTheme/contextValue\n  // got a new identity on every render regardless of whether the actual\n  // values changed — every useConfig() consumer in the tree re-rendered on\n  // every render of whatever's above this Config, which for the common\n  // app-root usage is everything. Depend on a serialized key instead so\n  // the memo only invalidates when the content actually changes; these\n  // are small, string/boolean-only objects, so JSON.stringify is cheap.\n  const themeKey = JSON.stringify(theme);\n  const parentThemeKey = JSON.stringify(parent.theme);\n  const localeKey = JSON.stringify(locale);\n  const parentLocaleKey = JSON.stringify(parent.locale);\n\n  const mergedTheme = useMemo<ThemeConfig>(\n    () => ({\n      ...parent.theme,\n      ...theme,\n      token: {\n        ...parent.theme.token,\n        ...theme.token,\n      },\n      darkToken: {\n        ...parent.theme.darkToken,\n        ...theme.darkToken,\n      },\n    }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [parentThemeKey, themeKey],\n  );\n\n  const mergedLocale = useMemo<Locale>(\n    () => ({\n      ...parent.locale,\n      ...locale,\n    }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [parentLocaleKey, localeKey],\n  );\n\n  const systemPrefersDark = useSystemPrefersDark();\n  const isDarkActive =\n    mergedTheme.dark === 'system'\n      ? systemPrefersDark\n      : mergedTheme.dark === 'dark';\n\n  // `darkToken` overrides individual keys of `token` (not a full swap)\n  // only while dark mode is actually active.\n  const cssVars = useMemo(\n    () =>\n      buildCssVars(\n        isDarkActive\n          ? { ...mergedTheme.token, ...mergedTheme.darkToken }\n          : mergedTheme.token,\n      ),\n    [mergedTheme.token, mergedTheme.darkToken, isDarkActive],\n  );\n\n  const hasCssVars = Object.keys(cssVars).length > 0;\n  const hasDarkMode = mergedTheme.dark !== undefined;\n  const needsWrapper =\n    hasCssVars || hasDarkMode || !!className || !!style || !!direction;\n\n  // Resolution order: an explicit `getContainer` prop on this Config wins;\n  // otherwise, if this Config renders its own themed wrapper below, that's\n  // the default (portaled content appended into it still inherits its CSS\n  // custom properties and matches the `.dark` selector — `display:\n  // contents` only removes the element from the layout box tree, not from\n  // the DOM/cascade); otherwise defer to the parent Config's resolution,\n  // so an inner Config that only sets e.g. `locale` doesn't shadow an\n  // outer one's theme container.\n  const resolvedGetContainer = useCallback((): HTMLElement | undefined => {\n    if (getContainer) {\n      return getContainer();\n    }\n    if (needsWrapper && wrapperEl) {\n      return wrapperEl;\n    }\n    return parent.getContainer();\n  }, [getContainer, needsWrapper, wrapperEl, parent]);\n\n  const resolvedComponentSize = componentSize ?? parent.componentSize;\n  const resolvedDirection = direction ?? parent.direction;\n\n  const defaultPropsKey = JSON.stringify(defaultProps);\n  const parentDefaultPropsKey = JSON.stringify(parent.defaultProps);\n\n  const mergedDefaultProps = useMemo<DefaultProps | undefined>(\n    () =>\n      parent.defaultProps || defaultProps\n        ? { ...parent.defaultProps, ...defaultProps }\n        : undefined,\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [parentDefaultPropsKey, defaultPropsKey],\n  );\n\n  const contextValue = useMemo(\n    () => ({\n      theme: mergedTheme,\n      locale: mergedLocale,\n      getContainer: resolvedGetContainer,\n      componentSize: resolvedComponentSize,\n      direction: resolvedDirection,\n      defaultProps: mergedDefaultProps,\n      isConfigured: true,\n    }),\n    [\n      mergedTheme,\n      mergedLocale,\n      resolvedGetContainer,\n      resolvedComponentSize,\n      resolvedDirection,\n      mergedDefaultProps,\n    ],\n  );\n\n  useEffect(() => {\n    if (!isRoot) {\n      return;\n    }\n    return registerRootConfig(contextValue);\n  }, [isRoot, contextValue]);\n\n  const content = (\n    <Context.Provider value={contextValue}>\n      {needsWrapper ? (\n        <div\n          ref={setWrapperEl}\n          dir={direction}\n          className={cn(isDarkActive && 'dark', className)}\n          style={{\n            ...(hasCssVars ? cssVars : undefined),\n            ...style,\n            // Keeps this element out of the layout box tree — so it\n            // doesn't intercept flex/grid child relationships or break\n            // height chains like min-h-screen — while custom properties\n            // and the `dark` class selector still cascade to children\n            // normally (inheritance and box generation are separate\n            // mechanisms in CSS). Note this means className/style\n            // shouldn't be used here for anything that needs a real box\n            // (padding, background, borders); Config's className/style are\n            // meant for theming hooks (the `dark` class, arbitrary\n            // selector hooks, custom properties), not layout — spread\n            // after the caller's `style` so it can't be overridden into\n            // something that reintroduces the layout-breaking wrapper this\n            // was added to fix in the first place.\n            display: 'contents',\n          }}\n        >\n          {children}\n        </div>\n      ) : (\n        children\n      )}\n    </Context.Provider>\n  );\n\n  // DirectionProvider is Radix's own mechanism (@radix-ui/react-direction)\n  // for propagating `dir` to every primitive that calls its useDirection()\n  // internally — Select, Menu (Dropdown/Menu), Accordion (Collapse),\n  // RadioGroup, ScrollArea all pick up RTL automatically this way, no\n  // per-component wiring needed. Only wraps when this Config's own\n  // `direction` prop is set (not the merely-inherited resolved value) —\n  // context already cascades on its own, so re-wrapping at every nested\n  // Config that doesn't override direction would just be redundant.\n  // Components with hardcoded LTR-only layout logic that Radix's Direction\n  // context doesn't reach (Popover placement, Splitter, Sider, Drawer)\n  // aren't covered by this and would need dedicated follow-up work.\n  return direction ? (\n    <DirectionProvider dir={direction}>{content}</DirectionProvider>\n  ) : (\n    content\n  );\n};\n\nexport default Config;\nexport { useConfig, DEFAULT_LOCALE };\nexport type {\n  Props,\n  ComponentSize,\n  DefaultProps,\n  Locale,\n  ThemeConfig,\n  ThemeToken,\n};\n"],"mappings":"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"}
+{"version":3,"file":"config.mjs","names":[],"sources":["../../../src/providers/config/config.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useEffect, useMemo, useState } from 'react';\n\nimport { DirectionProvider } from '@radix-ui/react-direction';\n\nimport { cn } from '@repo/ui/utils';\n\nimport { Context, DEFAULT_LOCALE, useConfig } from './context';\nimport { resolveDark, useSystemPrefersDark } from './dark-mode';\nimport { registerRootConfig } from './registry';\nimport type {\n  ComponentSize,\n  DefaultProps,\n  Locale,\n  ThemeConfig,\n  ThemeToken,\n} from './types';\n\nconst tokenToCssVar: Record<keyof ThemeToken, string> = {\n  colorPrimary: '--primary',\n  colorPrimaryForeground: '--primary-foreground',\n  colorBackground: '--background',\n  colorForeground: '--foreground',\n  colorCard: '--card',\n  colorCardForeground: '--card-foreground',\n  colorPopover: '--popover',\n  colorPopoverForeground: '--popover-foreground',\n  colorSecondary: '--secondary',\n  colorSecondaryForeground: '--secondary-foreground',\n  colorMuted: '--muted',\n  colorMutedForeground: '--muted-foreground',\n  colorAccent: '--accent',\n  colorAccentForeground: '--accent-foreground',\n  colorDestructive: '--destructive',\n  colorBorder: '--border',\n  colorInput: '--input',\n  colorRing: '--ring',\n  borderRadius: '--radius',\n\n  // Not `--font-sans`/`--font-mono`: those are `@theme inline` entries, so\n  // Tailwind substitutes their value into each utility rather than referencing\n  // them, and a wrapper-level override never applied. `globals.css` reads these\n  // hooks ahead of the app's own font variable instead (#343).\n  fontSans: '--ui-font-sans',\n  fontMono: '--ui-font-mono',\n};\n\nconst buildCssVars = (token?: ThemeToken): React.CSSProperties => {\n  if (!token) {\n    return {};\n  }\n\n  const vars: Record<string, string> = {};\n\n  for (const [key, value] of Object.entries(token)) {\n    if (value === undefined) {\n      continue;\n    }\n    const cssVar = tokenToCssVar[key as keyof ThemeToken];\n    if (cssVar) {\n      vars[cssVar] = value;\n    }\n  }\n\n  return vars as React.CSSProperties;\n};\n\ninterface Props {\n  theme?: ThemeConfig;\n  locale?: Locale;\n  getContainer?: () => HTMLElement;\n  componentSize?: ComponentSize;\n  direction?: 'ltr' | 'rtl';\n  defaultProps?: DefaultProps;\n  className?: string;\n  style?: React.CSSProperties;\n  children: React.ReactNode;\n}\n\nconst Config = ({\n  theme = {},\n  locale = {},\n  getContainer,\n  componentSize,\n  direction,\n  defaultProps,\n  className,\n  style,\n  children,\n}: Props) => {\n  const parent = useConfig();\n  const [wrapperEl, setWrapperEl] = useState<HTMLDivElement | null>(null);\n\n  // Only a Config with no Config ancestor of its own registers for the\n  // imperative stack (Modal.*/Toast.*) to inherit — see registry.tsx.\n  const isRoot = !parent.isConfigured;\n\n  // `theme` is typically a fresh inline object literal at the call site\n  // (and `parent.theme` inherits the same problem from its own Config\n  // ancestor), so depending on them directly meant mergedTheme/contextValue\n  // got a new identity on every render regardless of whether the actual\n  // values changed — every useConfig() consumer in the tree re-rendered on\n  // every render of whatever's above this Config, which for the common\n  // app-root usage is everything. Depend on a serialized key instead so\n  // the memo only invalidates when the content actually changes; these\n  // are small, string/boolean-only objects, so JSON.stringify is cheap.\n  const themeKey = JSON.stringify(theme);\n  const parentThemeKey = JSON.stringify(parent.theme);\n  const localeKey = JSON.stringify(locale);\n  const parentLocaleKey = JSON.stringify(parent.locale);\n\n  const mergedTheme = useMemo<ThemeConfig>(\n    () => ({\n      ...parent.theme,\n      ...theme,\n      token: {\n        ...parent.theme.token,\n        ...theme.token,\n      },\n      darkToken: {\n        ...parent.theme.darkToken,\n        ...theme.darkToken,\n      },\n    }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [parentThemeKey, themeKey],\n  );\n\n  const mergedLocale = useMemo<Locale>(\n    () => ({\n      ...parent.locale,\n      ...locale,\n    }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [parentLocaleKey, localeKey],\n  );\n\n  const systemPrefersDark = useSystemPrefersDark();\n  const isDarkActive = resolveDark(mergedTheme.dark, systemPrefersDark);\n\n  // `darkToken` overrides individual keys of `token` (not a full swap)\n  // only while dark mode is actually active.\n  const cssVars = useMemo(\n    () =>\n      buildCssVars(\n        isDarkActive\n          ? { ...mergedTheme.token, ...mergedTheme.darkToken }\n          : mergedTheme.token,\n      ),\n    [mergedTheme.token, mergedTheme.darkToken, isDarkActive],\n  );\n\n  const hasCssVars = Object.keys(cssVars).length > 0;\n  const hasDarkMode = mergedTheme.dark !== undefined;\n  const needsWrapper =\n    hasCssVars || hasDarkMode || !!className || !!style || !!direction;\n\n  // Resolution order: an explicit `getContainer` prop on this Config wins;\n  // otherwise, if this Config renders its own themed wrapper below, that's\n  // the default (portaled content appended into it still inherits its CSS\n  // custom properties and matches the `.dark` selector — `display:\n  // contents` only removes the element from the layout box tree, not from\n  // the DOM/cascade); otherwise defer to the parent Config's resolution,\n  // so an inner Config that only sets e.g. `locale` doesn't shadow an\n  // outer one's theme container.\n  const resolvedGetContainer = useCallback((): HTMLElement | undefined => {\n    if (getContainer) {\n      return getContainer();\n    }\n    if (needsWrapper && wrapperEl) {\n      return wrapperEl;\n    }\n    return parent.getContainer();\n  }, [getContainer, needsWrapper, wrapperEl, parent]);\n\n  const resolvedComponentSize = componentSize ?? parent.componentSize;\n  const resolvedDirection = direction ?? parent.direction;\n\n  const defaultPropsKey = JSON.stringify(defaultProps);\n  const parentDefaultPropsKey = JSON.stringify(parent.defaultProps);\n\n  const mergedDefaultProps = useMemo<DefaultProps | undefined>(\n    () =>\n      parent.defaultProps || defaultProps\n        ? { ...parent.defaultProps, ...defaultProps }\n        : undefined,\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [parentDefaultPropsKey, defaultPropsKey],\n  );\n\n  const contextValue = useMemo(\n    () => ({\n      theme: mergedTheme,\n      locale: mergedLocale,\n      getContainer: resolvedGetContainer,\n      componentSize: resolvedComponentSize,\n      direction: resolvedDirection,\n      defaultProps: mergedDefaultProps,\n      isConfigured: true,\n    }),\n    [\n      mergedTheme,\n      mergedLocale,\n      resolvedGetContainer,\n      resolvedComponentSize,\n      resolvedDirection,\n      mergedDefaultProps,\n    ],\n  );\n\n  useEffect(() => {\n    if (!isRoot) {\n      return;\n    }\n    return registerRootConfig(contextValue);\n  }, [isRoot, contextValue]);\n\n  const content = (\n    <Context.Provider value={contextValue}>\n      {needsWrapper ? (\n        <div\n          ref={setWrapperEl}\n          dir={direction}\n          className={cn(isDarkActive && 'dark', className)}\n          style={{\n            ...(hasCssVars ? cssVars : undefined),\n            ...style,\n            // Keeps this element out of the layout box tree — so it\n            // doesn't intercept flex/grid child relationships or break\n            // height chains like min-h-screen — while custom properties\n            // and the `dark` class selector still cascade to children\n            // normally (inheritance and box generation are separate\n            // mechanisms in CSS). Note this means className/style\n            // shouldn't be used here for anything that needs a real box\n            // (padding, background, borders); Config's className/style are\n            // meant for theming hooks (the `dark` class, arbitrary\n            // selector hooks, custom properties), not layout — spread\n            // after the caller's `style` so it can't be overridden into\n            // something that reintroduces the layout-breaking wrapper this\n            // was added to fix in the first place.\n            display: 'contents',\n          }}\n        >\n          {children}\n        </div>\n      ) : (\n        children\n      )}\n    </Context.Provider>\n  );\n\n  // DirectionProvider is Radix's own mechanism (@radix-ui/react-direction)\n  // for propagating `dir` to every primitive that calls its useDirection()\n  // internally — Select, Menu (Dropdown/Menu), Accordion (Collapse),\n  // RadioGroup, ScrollArea all pick up RTL automatically this way, no\n  // per-component wiring needed. Only wraps when this Config's own\n  // `direction` prop is set (not the merely-inherited resolved value) —\n  // context already cascades on its own, so re-wrapping at every nested\n  // Config that doesn't override direction would just be redundant.\n  // Components with hardcoded LTR-only layout logic that Radix's Direction\n  // context doesn't reach (Popover placement, Splitter, Sider, Drawer)\n  // aren't covered by this and would need dedicated follow-up work.\n  return direction ? (\n    <DirectionProvider dir={direction}>{content}</DirectionProvider>\n  ) : (\n    content\n  );\n};\n\nexport default Config;\nexport { useConfig, DEFAULT_LOCALE };\nexport type {\n  Props,\n  ComponentSize,\n  DefaultProps,\n  Locale,\n  ThemeConfig,\n  ThemeToken,\n};\n"],"mappings":"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"}

package/dist/providers/config/dark-mode.mjs

@@ -0,0 +1,39 @@
+"use client";
+import { useConfig } from "./context.mjs";
+import { useSyncExternalStore } from "react";
+//#region src/providers/config/dark-mode.ts
+const DARK_MEDIA_QUERY = "(prefers-color-scheme: dark)";
+const subscribeToSystemColorScheme = (callback) => {
+	if (typeof window === "undefined") return () => {};
+	const mql = window.matchMedia(DARK_MEDIA_QUERY);
+	mql.addEventListener("change", callback);
+	return () => mql.removeEventListener("change", callback);
+};
+const getSystemPrefersDark = () => typeof window !== "undefined" && window.matchMedia(DARK_MEDIA_QUERY).matches;
+const getServerSnapshot = () => false;
+const useSystemPrefersDark = () => useSyncExternalStore(subscribeToSystemColorScheme, getSystemPrefersDark, getServerSnapshot);
+/**
+* Turns the three-valued `theme.dark` setting into the boolean that decides
+* whether dark treatments actually apply. Kept as a pure function so `Config`
+* can resolve the theme it is about to publish (its merged value isn't in
+* context yet) while consumers resolve the one already in context, without the
+* two drifting apart.
+*/
+const resolveDark = (dark, systemPrefersDark) => dark === "system" ? systemPrefersDark : dark === "dark";
+/**
+* Whether dark mode is active for the nearest `Config`, with `'system'`
+* resolved against `prefers-color-scheme`.
+*
+* Internal to the package: components that render *CSS* can just use Tailwind's
+* `dark:` variants against the `.dark` class `Config` puts on its wrapper. This
+* exists for the ones that have to hand a light/dark choice to a third party in
+* JS instead — `CodeEditor` picking a CodeMirror theme extension.
+*/
+const useIsDarkActive = () => {
+	const { theme } = useConfig();
+	return resolveDark(theme.dark, useSystemPrefersDark());
+};
+//#endregion
+export { resolveDark, useIsDarkActive, useSystemPrefersDark };
+
+//# sourceMappingURL=dark-mode.mjs.map

package/dist/providers/config/dark-mode.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"dark-mode.mjs","names":[],"sources":["../../../src/providers/config/dark-mode.ts"],"sourcesContent":["'use client';\n\nimport { useSyncExternalStore } from 'react';\n\nimport { useConfig } from './context';\nimport type { ThemeConfig } from './types';\n\nconst DARK_MEDIA_QUERY = '(prefers-color-scheme: dark)';\n\nconst subscribeToSystemColorScheme = (callback: () => void) => {\n  if (typeof window === 'undefined') {\n    return () => {};\n  }\n\n  const mql = window.matchMedia(DARK_MEDIA_QUERY);\n  mql.addEventListener('change', callback);\n  return () => mql.removeEventListener('change', callback);\n};\n\nconst getSystemPrefersDark = () =>\n  typeof window !== 'undefined' && window.matchMedia(DARK_MEDIA_QUERY).matches;\n\n// No `window` during SSR, so there's no way to know the visitor's actual\n// preference before hydration — assume light (the conservative default)\n// and let useSyncExternalStore correct it client-side once matchMedia is\n// available, same flash-of-incorrect-guess tradeoff already accepted for\n// Sider's breakpoint prop elsewhere in this library.\nconst getServerSnapshot = () => false;\n\nexport const useSystemPrefersDark = () =>\n  useSyncExternalStore(\n    subscribeToSystemColorScheme,\n    getSystemPrefersDark,\n    getServerSnapshot,\n  );\n\n/**\n * Turns the three-valued `theme.dark` setting into the boolean that decides\n * whether dark treatments actually apply. Kept as a pure function so `Config`\n * can resolve the theme it is about to publish (its merged value isn't in\n * context yet) while consumers resolve the one already in context, without the\n * two drifting apart.\n */\nexport const resolveDark = (\n  dark: ThemeConfig['dark'],\n  systemPrefersDark: boolean,\n) => (dark === 'system' ? systemPrefersDark : dark === 'dark');\n\n/**\n * Whether dark mode is active for the nearest `Config`, with `'system'`\n * resolved against `prefers-color-scheme`.\n *\n * Internal to the package: components that render *CSS* can just use Tailwind's\n * `dark:` variants against the `.dark` class `Config` puts on its wrapper. This\n * exists for the ones that have to hand a light/dark choice to a third party in\n * JS instead — `CodeEditor` picking a CodeMirror theme extension.\n */\nexport const useIsDarkActive = () => {\n  const { theme } = useConfig();\n\n  return resolveDark(theme.dark, useSystemPrefersDark());\n};\n"],"mappings":";;;;AAOA,MAAM,mBAAmB;AAEzB,MAAM,gCAAgC,aAAyB;CAC7D,IAAI,OAAO,WAAW,aACpB,aAAa,CAAC;CAGhB,MAAM,MAAM,OAAO,WAAW,gBAAgB;CAC9C,IAAI,iBAAiB,UAAU,QAAQ;CACvC,aAAa,IAAI,oBAAoB,UAAU,QAAQ;AACzD;AAEA,MAAM,6BACJ,OAAO,WAAW,eAAe,OAAO,WAAW,gBAAgB,CAAC,CAAC;AAOvE,MAAM,0BAA0B;AAEhC,MAAa,6BACX,qBACE,8BACA,sBACA,iBACF;;;;;;;;AASF,MAAa,eACX,MACA,sBACI,SAAS,WAAW,oBAAoB,SAAS;;;;;;;;;;AAWvD,MAAa,wBAAwB;CACnC,MAAM,EAAE,UAAU,UAAU;CAE5B,OAAO,YAAY,MAAM,MAAM,qBAAqB,CAAC;AACvD"}

package/dist/providers/config/types.d.mts

@@ -1,4 +1,29 @@
 //#region src/providers/config/types.d.ts
+/**
+ * Theme overrides applied as CSS custom properties on `Config`'s wrapper
+ * element, inherited by everything inside it.
+ *
+ * Every token here is verified to actually reach a component. That is worth
+ * stating because it did not use to be true: 19 of the previous 40 tokens were
+ * inert (#343). Three groups were dropped in 8.0 —
+ *
+ * - `btnBackground`/`btnBackgroundHover`/`btnBackgroundActive`/`btnBorder`/
+ *   `btnForeground` — `globals.css` declares `--btn-*` on the button element
+ *   itself (keyed off `data-color`), and an element's own declaration always
+ *   beats an inherited one, so a wrapper value could never win. Re-theming a
+ *   button is done through `colorPrimary`/`colorDestructive` for the semantic
+ *   colours, or by overriding `--preset-color` in CSS for the preset hues.
+ * - `sidebar*` and `chart*` — no component in the library reads them, and the
+ *   matching utilities (`bg-sidebar`, `bg-chart-1`) are never generated into
+ *   the published stylesheet, so nothing consumed them. The underlying
+ *   `--sidebar-*`/`--chart-*` custom properties are still declared in
+ *   `globals.css` and remain overridable in plain CSS; only the inert token
+ *   API is gone. They should come back alongside an actual Sidebar/Chart
+ *   component.
+ *
+ * `fontSans`/`fontMono` were inert for a different reason and were fixed
+ * rather than removed — see below.
+ */
 interface ThemeToken {
   colorPrimary?: string;
   colorPrimaryForeground?: string;
@@ -19,24 +44,6 @@ interface ThemeToken {
   colorInput?: string;
   colorRing?: string;
   borderRadius?: string;
-  btnBackground?: string;
-  btnBackgroundHover?: string;
-  btnBackgroundActive?: string;
-  btnBorder?: string;
-  btnForeground?: string;
-  sidebar?: string;
-  sidebarForeground?: string;
-  sidebarPrimary?: string;
-  sidebarPrimaryForeground?: string;
-  sidebarAccent?: string;
-  sidebarAccentForeground?: string;
-  sidebarBorder?: string;
-  sidebarRing?: string;
-  chart1?: string;
-  chart2?: string;
-  chart3?: string;
-  chart4?: string;
-  chart5?: string;
   fontSans?: string;
   fontMono?: string;
 }

package/dist/providers/config/types.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.mts","names":[],"sources":["../../../src/providers/config/types.ts"],"mappings":";UAAiB;EAEf;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EASA;EAIA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EAGA;EACA;;UAGe;EACf,QAAQ;EAKR,YAAY;EASZ;;UAQe;EACf;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;KAMU;KAYA,eAAe,eAAe;UAEzB;EACf,OAAO;EACP,QAAQ;EACR;EAUA,oBAAoB;EACpB,gBAAgB;EAChB,eAAe;EAKf"}
+{"version":3,"file":"types.d.mts","names":[],"sources":["../../../src/providers/config/types.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;UAyBiB;EAEf;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EASA;EAMA;EACA;;UAGe;EACf,QAAQ;EAKR,YAAY;EASZ;;UAQe;EACf;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;KAMU;KAYA,eAAe,eAAe;UAEzB;EACf,OAAO;EACP,QAAQ;EACR;EAUA,oBAAoB;EACpB,gBAAgB;EAChB,eAAe;EAKf"}

package/dist/style.css

@@ -2,13 +2,28 @@
 @layer properties;
 @layer theme {
   :root, :host {
-    --font-sans: var(--font-geist-sans);
-    --font-mono: var(--font-geist-mono);
+    --font-sans: var(--ui-font-sans, var(--font-geist-sans));
+    --font-mono: var(--ui-font-mono, var(--font-geist-mono));
     --color-red-400: oklch(70.4% .191 22.216);
+    --color-red-500: oklch(63.7% .237 25.331);
+    --color-orange-500: oklch(70.5% .213 47.604);
+    --color-orange-600: oklch(64.6% .222 41.116);
+    --color-amber-500: oklch(76.9% .188 70.08);
     --color-yellow-400: oklch(85.2% .199 91.936);
+    --color-yellow-500: oklch(79.5% .184 86.047);
+    --color-yellow-600: oklch(68.1% .162 75.834);
+    --color-lime-500: oklch(76.8% .233 130.85);
     --color-green-400: oklch(79.2% .209 151.711);
+    --color-green-500: oklch(72.3% .219 149.579);
+    --color-green-600: oklch(62.7% .194 149.214);
+    --color-cyan-500: oklch(71.5% .143 215.221);
     --color-blue-400: oklch(70.7% .165 254.624);
+    --color-blue-500: oklch(62.3% .214 259.815);
     --color-blue-600: oklch(54.6% .245 262.881);
+    --color-indigo-500: oklch(58.5% .233 277.117);
+    --color-purple-500: oklch(62.7% .265 303.9);
+    --color-fuchsia-500: oklch(66.7% .295 322.15);
+    --color-pink-500: oklch(65.6% .241 354.308);
     --color-gray-100: oklch(96.7% .003 264.542);
     --color-gray-200: oklch(92.8% .006 264.531);
     --color-gray-300: oklch(87.2% .01 258.338);
@@ -88,7 +103,56 @@
   }
 }
 @layer components {
+  :is([data-slot="button"], [data-slot="badge"])[data-color="blue"] {
+    --preset-color: var(--color-blue-500);
+  }
+  :is([data-slot="button"], [data-slot="badge"])[data-color="purple"] {
+    --preset-color: var(--color-purple-500);
+  }
+  :is([data-slot="button"], [data-slot="badge"])[data-color="cyan"] {
+    --preset-color: var(--color-cyan-500);
+  }
+  :is([data-slot="button"], [data-slot="badge"])[data-color="green"] {
+    --preset-color: var(--color-green-500);
+  }
+  :is([data-slot="button"], [data-slot="badge"])[data-color="fuchsia"] {
+    --preset-color: var(--color-fuchsia-500);
+  }
+  :is([data-slot="button"], [data-slot="badge"])[data-color="pink"] {
+    --preset-color: var(--color-pink-500);
+  }
+  :is([data-slot="button"], [data-slot="badge"])[data-color="red"] {
+    --preset-color: var(--color-red-500);
+  }
+  :is([data-slot="button"], [data-slot="badge"])[data-color="orange"] {
+    --preset-color: var(--color-orange-500);
+  }
+  :is([data-slot="button"], [data-slot="badge"])[data-color="yellow"] {
+    --preset-color: var(--color-yellow-500);
+  }
+  :is([data-slot="button"], [data-slot="badge"])[data-color="indigo"] {
+    --preset-color: var(--color-indigo-500);
+  }
+  :is([data-slot="button"], [data-slot="badge"])[data-color="lime"] {
+    --preset-color: var(--color-lime-500);
+  }
+  :is([data-slot="button"], [data-slot="badge"])[data-color="amber"] {
+    --preset-color: var(--color-amber-500);
+  }
+  :is([data-slot="button"], [data-slot="badge"])[data-color="magenta"] {
+    --preset-color: var(--color-fuchsia-500);
+  }
+  :is([data-slot="button"], [data-slot="badge"])[data-color="geekblue"] {
+    --preset-color: var(--color-indigo-500);
+  }
+  :is([data-slot="button"], [data-slot="badge"])[data-color="gold"] {
+    --preset-color: var(--color-amber-500);
+  }
+  :is([data-slot="button"], [data-slot="badge"])[data-color="volcano"] {
+    --preset-color: var(--color-orange-600);
+  }
   [data-slot="button"][data-color] {
+    --btn-bg: var(--preset-color);
     --btn-fg: white;
     --btn-border: var(--btn-bg);
     --btn-bg-hover: var(--btn-bg);
@@ -100,7 +164,7 @@
       --btn-bg-active: color-mix(in oklch, var(--btn-bg), black 22%);
     }
   }
-  [data-slot="button"][data-color="yellow"], [data-slot="button"][data-color="lime"], [data-slot="button"][data-color="gold"] {
+  [data-slot="button"][data-color="yellow"], [data-slot="button"][data-color="lime"], [data-slot="button"][data-color="amber"], [data-slot="button"][data-color="gold"] {
     --btn-fg: black;
   }
   [data-slot="button"][data-color="default"] {
@@ -114,46 +178,8 @@
   [data-slot="button"][data-color="danger"] {
     --btn-bg: var(--destructive);
   }
-  [data-slot="button"][data-color="blue"] {
-    --btn-bg: #3b82f6;
-  }
-  [data-slot="button"][data-color="purple"] {
-    --btn-bg: #a855f7;
-  }
-  [data-slot="button"][data-color="cyan"] {
-    --btn-bg: #06b6d4;
-  }
-  [data-slot="button"][data-color="green"] {
-    --btn-bg: #22c55e;
-  }
-  [data-slot="button"][data-color="magenta"] {
-    --btn-bg: #d946ef;
-  }
-  [data-slot="button"][data-color="pink"] {
-    --btn-bg: #ec4899;
-  }
-  [data-slot="button"][data-color="red"] {
-    --btn-bg: #ef4444;
-  }
-  [data-slot="button"][data-color="orange"] {
-    --btn-bg: #f97316;
-  }
-  [data-slot="button"][data-color="yellow"] {
-    --btn-bg: #eab308;
-  }
-  [data-slot="button"][data-color="volcano"] {
-    --btn-bg: #ea580c;
-  }
-  [data-slot="button"][data-color="geekblue"] {
-    --btn-bg: #6366f1;
-  }
-  [data-slot="button"][data-color="lime"] {
-    --btn-bg: #84cc16;
-  }
-  [data-slot="button"][data-color="gold"] {
-    --btn-bg: #f59e0b;
-  }
   [data-slot="badge"][data-color] {
+    --tag-bg: var(--preset-color);
     --tag-fg: var(--tag-bg);
     --tag-tint: var(--tag-bg);
     @supports (color: color-mix(in lab, red, red)) {
@@ -175,57 +201,18 @@
     --tag-bg: var(--destructive);
   }
   [data-slot="badge"][data-color="success"] {
-    --tag-bg: oklch(72.3% .219 149.579);
-    --tag-fg: oklch(62.7% .194 149.214);
+    --tag-bg: var(--color-green-500);
+    --tag-fg: var(--color-green-600);
   }
   [data-slot="badge"][data-color="warning"] {
-    --tag-bg: oklch(79.5% .184 86.047);
-    --tag-fg: oklch(68.1% .162 75.834);
+    --tag-bg: var(--color-yellow-500);
+    --tag-fg: var(--color-yellow-600);
   }
   :is(.dark, [data-theme="dark"]) [data-slot="badge"][data-color="success"] {
-    --tag-fg: oklch(79.2% .209 151.711);
+    --tag-fg: var(--color-green-400);
   }
   :is(.dark, [data-theme="dark"]) [data-slot="badge"][data-color="warning"] {
-    --tag-fg: oklch(85.2% .199 91.936);
-  }
-  [data-slot="badge"][data-color="blue"] {
-    --tag-bg: #3b82f6;
-  }
-  [data-slot="badge"][data-color="purple"] {
-    --tag-bg: #a855f7;
-  }
-  [data-slot="badge"][data-color="cyan"] {
-    --tag-bg: #06b6d4;
-  }
-  [data-slot="badge"][data-color="green"] {
-    --tag-bg: #22c55e;
-  }
-  [data-slot="badge"][data-color="magenta"] {
-    --tag-bg: #d946ef;
-  }
-  [data-slot="badge"][data-color="pink"] {
-    --tag-bg: #ec4899;
-  }
-  [data-slot="badge"][data-color="red"] {
-    --tag-bg: #ef4444;
-  }
-  [data-slot="badge"][data-color="orange"] {
-    --tag-bg: #f97316;
-  }
-  [data-slot="badge"][data-color="yellow"] {
-    --tag-bg: #eab308;
-  }
-  [data-slot="badge"][data-color="volcano"] {
-    --tag-bg: #ea580c;
-  }
-  [data-slot="badge"][data-color="geekblue"] {
-    --tag-bg: #6366f1;
-  }
-  [data-slot="badge"][data-color="lime"] {
-    --tag-bg: #84cc16;
-  }
-  [data-slot="badge"][data-color="gold"] {
-    --tag-bg: #f59e0b;
+    --tag-fg: var(--color-yellow-400);
   }
   [data-slot="col"] {
     flex-basis: calc(var(--col-span-xs) / 24 * 100%);
@@ -380,6 +367,9 @@
   .z-50 {
     z-index: 50;
   }
+  .z-1000 {
+    z-index: 1000;
+  }
   .z-10000 {
     z-index: 10000;
   }
@@ -1192,6 +1182,9 @@
   .bg-card {
     background-color: var(--card);
   }
+  .bg-chart-1 {
+    background-color: var(--chart-1);
+  }
   .bg-destructive {
     background-color: var(--destructive);
   }
@@ -1219,6 +1212,9 @@
   .bg-secondary {
     background-color: var(--secondary);
   }
+  .bg-sidebar {
+    background-color: var(--sidebar);
+  }
   .bg-transparent {
     background-color: transparent;
   }
@@ -1346,7 +1342,7 @@
     text-align: start;
   }
   .font-mono {
-    font-family: var(--font-geist-mono);
+    font-family: var(--ui-font-mono, var(--font-geist-mono));
   }
   .text-2xl {
     font-size: var(--text-2xl);
@@ -1567,6 +1563,10 @@
     --tw-blur: blur(8px);
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
   }
+  .invert {
+    --tw-invert: invert(100%);
+    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+  }
   .filter {
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
   }
@@ -2722,7 +2722,7 @@
     padding-block: calc(var(--spacing) * 0.5);
   }
   .\[\&_\.tiptap_code\]\:font-mono .tiptap code {
-    font-family: var(--font-geist-mono);
+    font-family: var(--ui-font-mono, var(--font-geist-mono));
   }
   .\[\&_\.tiptap_code\]\:text-\[0\.85em\] .tiptap code {
     font-size: 0.85em;
@@ -2833,7 +2833,7 @@
     padding: calc(var(--spacing) * 3);
   }
   .\[\&_\.tiptap_pre\]\:font-mono .tiptap pre {
-    font-family: var(--font-geist-mono);
+    font-family: var(--ui-font-mono, var(--font-geist-mono));
   }
   .\[\&_\.tiptap_pre\]\:text-sm .tiptap pre {
     font-size: var(--text-sm);

package/dist/utils.d.mts

@@ -2,6 +2,18 @@ import * as React$1 from "react";
 import { ClassValue } from "clsx";
 //#region src/lib/utils/index.d.ts
 declare const cn: (...inputs: ClassValue[]) => string;
+/**
+ * Renders a slot value, applying `wrapper` only to values that aren't already
+ * a React element. Passing an element opts out of the wrapper entirely.
+ *
+ * **Only use this for content slots where that opt-out is the point** — a
+ * `title` the caller may want to supply as their own heading, so we don't end
+ * up nesting `<h6><h3>`. Do *not* use it for a wrapper that carries layout the
+ * component owns (padding, `shrink-0`, a footer bar): the common case is an
+ * element, so the wrapper would be skipped exactly when it's needed, and any
+ * `classNames.*` threaded through it would silently do nothing. Write those as
+ * a plain `{value != null && <Wrapper>{value}</Wrapper>}`.
+ */
 declare const renderConditional: <T extends React$1.ReactNode>(value: T, wrapper?: (value: NonNullable<T>) => React$1.ReactNode) => React$1.ReactNode;
 //#endregion
 export { cn, renderConditional };

package/dist/utils.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.mts","names":[],"sources":["../src/lib/utils/index.ts"],"mappings":";;;cAKa,QAAS,QAAQ;cAIjB,oBAAqB,UAAU,QAAM,WAChD,OAAO,GACP,WAAW,OAAO,YAAY,OAAO,QAAM,cAC1C,QAAM"}
+{"version":3,"file":"utils.d.mts","names":[],"sources":["../src/lib/utils/index.ts"],"mappings":";;;cAKa,QAAS,QAAQ;;;;;;;;;;;;;cAgBjB,oBAAqB,UAAU,QAAM,WAChD,OAAO,GACP,WAAW,OAAO,YAAY,OAAO,QAAM,cAC1C,QAAM"}

package/dist/utils.mjs

@@ -5,6 +5,18 @@ import { twMerge } from "tailwind-merge";
 const cn = (...inputs) => {
 	return twMerge(clsx(inputs));
 };
+/**
+* Renders a slot value, applying `wrapper` only to values that aren't already
+* a React element. Passing an element opts out of the wrapper entirely.
+*
+* **Only use this for content slots where that opt-out is the point** — a
+* `title` the caller may want to supply as their own heading, so we don't end
+* up nesting `<h6><h3>`. Do *not* use it for a wrapper that carries layout the
+* component owns (padding, `shrink-0`, a footer bar): the common case is an
+* element, so the wrapper would be skipped exactly when it's needed, and any
+* `classNames.*` threaded through it would silently do nothing. Write those as
+* a plain `{value != null && <Wrapper>{value}</Wrapper>}`.
+*/
 const renderConditional = (value, wrapper) => {
 	if (value === null || value === void 0) return null;
 	if (React$1.isValidElement(value)) return value;

package/dist/utils.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"utils.mjs","names":["React"],"sources":["../src/lib/utils/index.ts"],"sourcesContent":["import * as React from 'react';\n\nimport { type ClassValue, clsx } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport const cn = (...inputs: ClassValue[]) => {\n  return twMerge(clsx(inputs));\n};\n\nexport const renderConditional = <T extends React.ReactNode>(\n  value: T,\n  wrapper?: (value: NonNullable<T>) => React.ReactNode,\n): React.ReactNode => {\n  if (value === null || value === undefined) {\n    return null;\n  }\n\n  if (React.isValidElement(value)) {\n    return value;\n  }\n\n  return wrapper ? wrapper(value as NonNullable<T>) : value;\n};\n"],"mappings":";;;;AAKA,MAAa,MAAM,GAAG,WAAyB;CAC7C,OAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;AAEA,MAAa,qBACX,OACA,YACoB;CACpB,IAAI,UAAU,QAAQ,UAAU,KAAA,GAC9B,OAAO;CAGT,IAAIA,QAAM,eAAe,KAAK,GAC5B,OAAO;CAGT,OAAO,UAAU,QAAQ,KAAuB,IAAI;AACtD"}
+{"version":3,"file":"utils.mjs","names":["React"],"sources":["../src/lib/utils/index.ts"],"sourcesContent":["import * as React from 'react';\n\nimport { type ClassValue, clsx } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport const cn = (...inputs: ClassValue[]) => {\n  return twMerge(clsx(inputs));\n};\n\n/**\n * Renders a slot value, applying `wrapper` only to values that aren't already\n * a React element. Passing an element opts out of the wrapper entirely.\n *\n * **Only use this for content slots where that opt-out is the point** — a\n * `title` the caller may want to supply as their own heading, so we don't end\n * up nesting `<h6><h3>`. Do *not* use it for a wrapper that carries layout the\n * component owns (padding, `shrink-0`, a footer bar): the common case is an\n * element, so the wrapper would be skipped exactly when it's needed, and any\n * `classNames.*` threaded through it would silently do nothing. Write those as\n * a plain `{value != null && <Wrapper>{value}</Wrapper>}`.\n */\nexport const renderConditional = <T extends React.ReactNode>(\n  value: T,\n  wrapper?: (value: NonNullable<T>) => React.ReactNode,\n): React.ReactNode => {\n  if (value === null || value === undefined) {\n    return null;\n  }\n\n  if (React.isValidElement(value)) {\n    return value;\n  }\n\n  return wrapper ? wrapper(value as NonNullable<T>) : value;\n};\n"],"mappings":";;;;AAKA,MAAa,MAAM,GAAG,WAAyB;CAC7C,OAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;;;;;;;;;;;;AAcA,MAAa,qBACX,OACA,YACoB;CACpB,IAAI,UAAU,QAAQ,UAAU,KAAA,GAC9B,OAAO;CAGT,IAAIA,QAAM,eAAe,KAAK,GAC5B,OAAO;CAGT,OAAO,UAAU,QAAQ,KAAuB,IAAI;AACtD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbpark/ui-kit",
-  "version": "7.1.0",
+  "version": "8.1.0",
   "description": "Modern React UI component library built with TypeScript, Tailwind CSS, and Radix UI. Featuring atoms, molecules, organisms and layout templates for building beautiful interfaces.",
   "keywords": [
     "react",
@@ -54,6 +54,11 @@
       "import": "./dist/Button.mjs",
       "default": "./dist/Button.mjs"
     },
+    "./CodeEditor": {
+      "types": "./dist/CodeEditor.d.mts",
+      "import": "./dist/CodeEditor.mjs",
+      "default": "./dist/CodeEditor.mjs"
+    },
     "./Tag": {
       "types": "./dist/Tag.d.mts",
       "import": "./dist/Tag.mjs",
@@ -113,6 +118,8 @@
     "postpublish": "node scripts/restore-package.mjs"
   },
   "devDependencies": {
+    "@codemirror/lang-javascript": "^6.2.5",
+    "@codemirror/merge": "^6.12.2",
     "@repo/eslint-config": "workspace:*",
     "@repo/typescript-config": "workspace:*",
     "@tailwindcss/postcss": "^4.3.3",
@@ -120,6 +127,9 @@
     "@types/node": "^26.2.0",
     "@types/react": "19.2.18",
     "@types/react-dom": "19.2.4",
+    "@uiw/codemirror-theme-vscode": "^4.25.11",
+    "@uiw/react-codemirror": "^4.25.11",
+    "codemirror": "^6.0.0",
     "eslint": "^9.39.5",
     "postcss": "^8.5.26",
     "rollup-plugin-postcss": "^4.0.2",
@@ -162,7 +172,29 @@
     "vaul": "^1.1.2"
   },
   "peerDependencies": {
+    "@codemirror/lang-javascript": "^6.2.5",
+    "@codemirror/merge": "^6.12.2",
+    "@uiw/codemirror-theme-vscode": "^4.25.11",
+    "@uiw/react-codemirror": "^4.25.11",
+    "codemirror": "^6.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@codemirror/lang-javascript": {
+      "optional": true
+    },
+    "@codemirror/merge": {
+      "optional": true
+    },
+    "@uiw/codemirror-theme-vscode": {
+      "optional": true
+    },
+    "@uiw/react-codemirror": {
+      "optional": true
+    },
+    "codemirror": {
+      "optional": true
+    }
   }
 }