@jbpark/ui-kit 3.6.0 → 3.8.0

package/dist/components/templates/layout/sider-context.mjs

@@ -0,0 +1,20 @@
+import { createContext, useContext, useLayoutEffect, useRef } from "react";
+
+//#region src/components/templates/layout/sider-context.ts
+const SiderRegistryContext = createContext(null);
+const useRegisterSider = () => {
+	const registry = useContext(SiderRegistryContext);
+	const idRef = useRef({});
+	useLayoutEffect(() => {
+		if (!registry) return;
+		const id = idRef.current;
+		registry.registerSider(id);
+		return () => {
+			registry.unregisterSider(id);
+		};
+	}, [registry]);
+};
+
+//#endregion
+export { SiderRegistryContext, useRegisterSider };
+//# sourceMappingURL=sider-context.mjs.map

package/dist/components/templates/layout/sider-context.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"sider-context.mjs","names":[],"sources":["../../../../src/components/templates/layout/sider-context.ts"],"sourcesContent":["import { createContext, useContext, useLayoutEffect, useRef } from 'react';\n\n// `Layout` needs to know whether a `Sider` exists anywhere in its subtree\n// to decide flex-row vs flex-col — but `Children.toArray(children).some(...)`\n// only ever sees direct children, and doesn't flatten Fragments, so a\n// `Sider` wrapped in a Fragment (or a custom wrapper component) went\n// undetected. Registering presence via context instead survives any\n// amount of wrapping, since it's `Sider` itself reporting in, not `Layout`\n// inspecting its children's shape.\nexport interface SiderRegistry {\n  registerSider: (id: object) => void;\n  unregisterSider: (id: object) => void;\n}\n\nexport const SiderRegistryContext = createContext<SiderRegistry | null>(null);\n\nexport const useRegisterSider = () => {\n  const registry = useContext(SiderRegistryContext);\n  const idRef = useRef({});\n\n  // `useLayoutEffect` (not `useEffect`) so the registration — and the\n  // resulting flex-row switch on `Layout` — commits before the browser\n  // paints, avoiding a flash of the flex-col fallback layout on mount.\n  useLayoutEffect(() => {\n    if (!registry) {\n      return;\n    }\n\n    const id = idRef.current;\n    registry.registerSider(id);\n\n    return () => {\n      registry.unregisterSider(id);\n    };\n  }, [registry]);\n};\n"],"mappings":";;;AAcA,MAAa,uBAAuB,cAAoC,KAAK;AAE7E,MAAa,yBAAyB;CACpC,MAAM,WAAW,WAAW,qBAAqB;CACjD,MAAM,QAAQ,OAAO,EAAE,CAAC;AAKxB,uBAAsB;AACpB,MAAI,CAAC,SACH;EAGF,MAAM,KAAK,MAAM;AACjB,WAAS,cAAc,GAAG;AAE1B,eAAa;AACX,YAAS,gBAAgB,GAAG;;IAE7B,CAAC,SAAS,CAAC"}

package/dist/components/templates/layout/sider.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"sider.d.mts","names":[],"sources":["../../../../src/components/templates/layout/sider.tsx"],"mappings":";;;UAQiB,KAAA,SAAc,IAAA,CAC7B,KAAA,CAAM,wBAAA;EAGN,KAAA;EACA,cAAA;EACA,WAAA;EACA,gBAAA;EACA,SAAA;EACA,YAAA;EACA,OAAA,GAAU,KAAA,CAAM,SAAA;EAChB,UAAA;IACE,OAAA;EAAA;EAEF,UAAA,IAAc,SAAA;AAAA;AAAA,cAMV,KAAA;EAAS,QAAA;EAAA,SAAA;EAAA,UAAA;EAAA,KAAA;EAAA,KAAA;EAAA,cAAA;EAAA,WAAA;EAAA,gBAAA;EAAA,SAAA,EAAA,UAAA;EAAA,YAAA;EAAA,OAAA;EAAA,UAAA,EAAA,WAAA;EAAA,GAAA;AAAA,GAcZ,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"sider.d.mts","names":[],"sources":["../../../../src/components/templates/layout/sider.tsx"],"mappings":";;;UAUiB,KAAA,SAAc,IAAA,CAC7B,KAAA,CAAM,wBAAA;EAGN,KAAA;EACA,cAAA;EACA,WAAA;EACA,gBAAA;EACA,SAAA;EACA,YAAA;EACA,OAAA,GAAU,KAAA,CAAM,SAAA;EAChB,UAAA;IACE,OAAA;EAAA;EAEF,UAAA,IAAc,SAAA;AAAA;AAAA,cAMV,KAAA;EAAS,QAAA;EAAA,SAAA;EAAA,UAAA;EAAA,KAAA;EAAA,KAAA;EAAA,cAAA;EAAA,WAAA;EAAA,gBAAA;EAAA,SAAA,EAAA,UAAA;EAAA,YAAA;EAAA,OAAA;EAAA,UAAA,EAAA,WAAA;EAAA,GAAA;AAAA,GAcZ,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/templates/layout/sider.mjs

@@ -1,6 +1,7 @@
 'use client';
 
 import { cn } from "../../../utils.mjs";
+import { useRegisterSider } from "./sider-context.mjs";
 import { PanelLeftClose, PanelLeftOpen } from "lucide-react";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -8,6 +9,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/templates/layout/sider.tsx
 const toCssSize = (value) => typeof value === "number" ? `${value}px` : value;
 const Sider = ({ children, className, classNames, style, width = 200, collapsedWidth = 80, collapsible = false, defaultCollapsed = false, collapsed: _collapsed, reverseArrow = false, trigger, onCollapse: _onCollapse = () => {}, ...props }) => {
+	useRegisterSider();
 	const [uncontrolledCollapsed, setUncontrolledCollapsed] = useState(defaultCollapsed);
 	const controlled = _collapsed !== void 0;
 	const collapsed = controlled ? _collapsed : uncontrolledCollapsed;
@@ -18,7 +20,7 @@ const Sider = ({ children, className, classNames, style, width = 200, collapsedW
 	};
 	const TriggerIcon = collapsed !== reverseArrow ? PanelLeftOpen : PanelLeftClose;
 	return /* @__PURE__ */ jsxs("aside", {
-		className: cn("z-100 flex h-full shrink-0 flex-col overflow-hidden", "transition-[width] duration-200", className),
+		className: cn("z-10 flex h-full shrink-0 flex-col overflow-hidden", "transition-[width] duration-200", className),
 		style: {
 			width: toCssSize(collapsed ? collapsedWidth : width),
 			...style
@@ -32,7 +34,7 @@ const Sider = ({ children, className, classNames, style, width = 200, collapsedW
 			"aria-label": collapsed ? "펼치기" : "접기",
 			onClick: onCollapse,
 			className: cn("flex w-full shrink-0 items-center justify-center py-2", "cursor-pointer transition-colors hover:bg-black/5", classNames?.trigger),
-			children: trigger ?? /* @__PURE__ */ jsx(TriggerIcon, { className: "size-4" })
+			children: trigger === void 0 ? /* @__PURE__ */ jsx(TriggerIcon, { className: "size-4" }) : trigger
 		})]
 	});
 };

package/dist/components/templates/layout/sider.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"sider.mjs","names":[],"sources":["../../../../src/components/templates/layout/sider.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\n\nimport { PanelLeftClose, PanelLeftOpen } from 'lucide-react';\n\nimport { cn } from '@repo/ui/utils';\n\nexport interface Props extends Omit<\n  React.ComponentPropsWithoutRef<'aside'>,\n  'onCollapse'\n> {\n  width?: number | string;\n  collapsedWidth?: number | string;\n  collapsible?: boolean;\n  defaultCollapsed?: boolean;\n  collapsed?: boolean;\n  reverseArrow?: boolean;\n  trigger?: React.ReactNode;\n  classNames?: {\n    trigger?: string;\n  };\n  onCollapse?: (collapsed: boolean) => void;\n}\n\nconst toCssSize = (value: number | string) =>\n  typeof value === 'number' ? `${value}px` : value;\n\nconst Sider = ({\n  children,\n  className,\n  classNames,\n  style,\n  width = 200,\n  collapsedWidth = 80,\n  collapsible = false,\n  defaultCollapsed = false,\n  collapsed: _collapsed,\n  reverseArrow = false,\n  trigger,\n  onCollapse: _onCollapse = () => {},\n  ...props\n}: Props) => {\n  const [uncontrolledCollapsed, setUncontrolledCollapsed] =\n    useState(defaultCollapsed);\n\n  const controlled = _collapsed !== undefined;\n  const collapsed = controlled ? _collapsed : uncontrolledCollapsed;\n\n  const onCollapse = () => {\n    const next = !collapsed;\n\n    if (!controlled) {\n      setUncontrolledCollapsed(next);\n    }\n    _onCollapse(next);\n  };\n\n  const TriggerIcon =\n    collapsed !== reverseArrow ? PanelLeftOpen : PanelLeftClose;\n\n  return (\n    <aside\n      className={cn(\n        'z-100 flex h-full shrink-0 flex-col overflow-hidden',\n        'transition-[width] duration-200',\n        className,\n        //\n      )}\n      style={{\n        width: toCssSize(collapsed ? collapsedWidth : width),\n        ...style,\n      }}\n      {...props}\n    >\n      <div className=\"min-h-0 flex-1 overflow-auto\">{children}</div>\n      {collapsible && (\n        <button\n          type=\"button\"\n          aria-label={collapsed ? '펼치기' : '접기'}\n          onClick={onCollapse}\n          className={cn(\n            'flex w-full shrink-0 items-center justify-center py-2',\n            'cursor-pointer transition-colors hover:bg-black/5',\n            classNames?.trigger,\n            //\n          )}\n        >\n          {trigger ?? <TriggerIcon className=\"size-4\" />}\n        </button>\n      )}\n    </aside>\n  );\n};\n\nexport default Sider;\n"],"mappings":";;;;;;;;AAyBA,MAAM,aAAa,UACjB,OAAO,UAAU,WAAW,GAAG,MAAM,MAAM;AAE7C,MAAM,SAAS,EACb,UACA,WACA,YACA,OACA,QAAQ,KACR,iBAAiB,IACjB,cAAc,OACd,mBAAmB,OACnB,WAAW,YACX,eAAe,OACf,SACA,YAAY,oBAAoB,IAChC,GAAG,YACQ;CACX,MAAM,CAAC,uBAAuB,4BAC5B,SAAS,iBAAiB;CAE5B,MAAM,aAAa,eAAe;CAClC,MAAM,YAAY,aAAa,aAAa;CAE5C,MAAM,mBAAmB;EACvB,MAAM,OAAO,CAAC;AAEd,MAAI,CAAC,WACH,0BAAyB,KAAK;AAEhC,cAAY,KAAK;;CAGnB,MAAM,cACJ,cAAc,eAAe,gBAAgB;AAE/C,QACE,qBAAC;EACC,WAAW,GACT,uDACA,mCACA,UAED;EACD,OAAO;GACL,OAAO,UAAU,YAAY,iBAAiB,MAAM;GACpD,GAAG;GACJ;EACD,GAAI;aAEJ,oBAAC;GAAI,WAAU;GAAgC;IAAe,EAC7D,eACC,oBAAC;GACC,MAAK;GACL,cAAY,YAAY,QAAQ;GAChC,SAAS;GACT,WAAW,GACT,yDACA,qDACA,YAAY,QAEb;aAEA,WAAW,oBAAC,eAAY,WAAU,WAAW;IACvC;GAEL"}
+{"version":3,"file":"sider.mjs","names":[],"sources":["../../../../src/components/templates/layout/sider.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\n\nimport { PanelLeftClose, PanelLeftOpen } from 'lucide-react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport { useRegisterSider } from './sider-context';\n\nexport interface Props extends Omit<\n  React.ComponentPropsWithoutRef<'aside'>,\n  'onCollapse'\n> {\n  width?: number | string;\n  collapsedWidth?: number | string;\n  collapsible?: boolean;\n  defaultCollapsed?: boolean;\n  collapsed?: boolean;\n  reverseArrow?: boolean;\n  trigger?: React.ReactNode;\n  classNames?: {\n    trigger?: string;\n  };\n  onCollapse?: (collapsed: boolean) => void;\n}\n\nconst toCssSize = (value: number | string) =>\n  typeof value === 'number' ? `${value}px` : value;\n\nconst Sider = ({\n  children,\n  className,\n  classNames,\n  style,\n  width = 200,\n  collapsedWidth = 80,\n  collapsible = false,\n  defaultCollapsed = false,\n  collapsed: _collapsed,\n  reverseArrow = false,\n  trigger,\n  onCollapse: _onCollapse = () => {},\n  ...props\n}: Props) => {\n  useRegisterSider();\n\n  const [uncontrolledCollapsed, setUncontrolledCollapsed] =\n    useState(defaultCollapsed);\n\n  const controlled = _collapsed !== undefined;\n  const collapsed = controlled ? _collapsed : uncontrolledCollapsed;\n\n  const onCollapse = () => {\n    const next = !collapsed;\n\n    if (!controlled) {\n      setUncontrolledCollapsed(next);\n    }\n    _onCollapse(next);\n  };\n\n  const TriggerIcon =\n    collapsed !== reverseArrow ? PanelLeftOpen : PanelLeftClose;\n\n  return (\n    <aside\n      className={cn(\n        // Below Header's z-50 (and every other floating/overlay primitive\n        // in this library, which all use z-50) — Sider is a static layout\n        // column, not floating chrome, and previously outranked Header\n        // with an arbitrary z-100, covering it once Header stuck to the\n        // viewport top on scroll.\n        'z-10 flex h-full shrink-0 flex-col overflow-hidden',\n        'transition-[width] duration-200',\n        className,\n        //\n      )}\n      style={{\n        width: toCssSize(collapsed ? collapsedWidth : width),\n        ...style,\n      }}\n      {...props}\n    >\n      <div className=\"min-h-0 flex-1 overflow-auto\">{children}</div>\n      {collapsible && (\n        <button\n          type=\"button\"\n          aria-label={collapsed ? '펼치기' : '접기'}\n          onClick={onCollapse}\n          className={cn(\n            'flex w-full shrink-0 items-center justify-center py-2',\n            'cursor-pointer transition-colors hover:bg-black/5',\n            classNames?.trigger,\n            //\n          )}\n        >\n          {trigger === undefined ? <TriggerIcon className=\"size-4\" /> : trigger}\n        </button>\n      )}\n    </aside>\n  );\n};\n\nexport default Sider;\n"],"mappings":";;;;;;;;;AA2BA,MAAM,aAAa,UACjB,OAAO,UAAU,WAAW,GAAG,MAAM,MAAM;AAE7C,MAAM,SAAS,EACb,UACA,WACA,YACA,OACA,QAAQ,KACR,iBAAiB,IACjB,cAAc,OACd,mBAAmB,OACnB,WAAW,YACX,eAAe,OACf,SACA,YAAY,oBAAoB,IAChC,GAAG,YACQ;AACX,mBAAkB;CAElB,MAAM,CAAC,uBAAuB,4BAC5B,SAAS,iBAAiB;CAE5B,MAAM,aAAa,eAAe;CAClC,MAAM,YAAY,aAAa,aAAa;CAE5C,MAAM,mBAAmB;EACvB,MAAM,OAAO,CAAC;AAEd,MAAI,CAAC,WACH,0BAAyB,KAAK;AAEhC,cAAY,KAAK;;CAGnB,MAAM,cACJ,cAAc,eAAe,gBAAgB;AAE/C,QACE,qBAAC;EACC,WAAW,GAMT,sDACA,mCACA,UAED;EACD,OAAO;GACL,OAAO,UAAU,YAAY,iBAAiB,MAAM;GACpD,GAAG;GACJ;EACD,GAAI;aAEJ,oBAAC;GAAI,WAAU;GAAgC;IAAe,EAC7D,eACC,oBAAC;GACC,MAAK;GACL,cAAY,YAAY,QAAQ;GAChC,SAAS;GACT,WAAW,GACT,yDACA,qDACA,YAAY,QAEb;aAEA,YAAY,SAAY,oBAAC,eAAY,WAAU,WAAW,GAAG;IACvD;GAEL"}

package/dist/index.d.mts

@@ -1,10 +1,11 @@
 import Button from "./Button.mjs";
 import Tag from "./Tag.mjs";
 import Typography from "./Typography.mjs";
-import Card from "./Card.mjs";
-import { Menu } from "./components/molecules/menu/menu.mjs";
+import Card, { Props } from "./Card.mjs";
+import { Menu, Props as Props$6 } from "./components/molecules/menu/menu.mjs";
+import { Props as Props$7 } from "./components/molecules/reveals/reveals.mjs";
 import Reveals from "./Reveals.mjs";
-import Space from "./Space.mjs";
+import Space, { Props as Props$8 } from "./Space.mjs";
 import Layout from "./Layout.mjs";
 import { Checkbox } from "./components/atoms/checkbox/index.mjs";
 import { ColorPicker } from "./components/atoms/color-picker.mjs";
@@ -19,13 +20,15 @@ import { Skeleton } from "./components/atoms/skeleton/index.mjs";
 import { Spin } from "./components/atoms/spin.mjs";
 import { Switch } from "./components/atoms/switch.mjs";
 import "./components/atoms/index.mjs";
-import { Collapse } from "./components/molecules/collapse.mjs";
-import { Dropdown } from "./components/molecules/dropdown.mjs";
+import { Collapse, Props as Props$1 } from "./components/molecules/collapse.mjs";
+import { Dropdown, Props as Props$4 } from "./components/molecules/dropdown.mjs";
+import { Props as Props$5 } from "./components/molecules/marquees/marquees.mjs";
 import { Marquees } from "./components/molecules/marquees/index.mjs";
+import { Props as Props$9 } from "./components/molecules/splitter/splitter.mjs";
 import { Splitter } from "./components/molecules/splitter/index.mjs";
-import { Upload, UploadFile } from "./components/molecules/upload.mjs";
+import { Props as Props$10, Upload, UploadFile } from "./components/molecules/upload.mjs";
 import "./components/molecules/index.mjs";
-import { Drawer, Props as Props$1 } from "./components/organisms/drawer.mjs";
+import { Drawer, Props as Props$3 } from "./components/organisms/drawer.mjs";
 import { List } from "./components/organisms/list/index.mjs";
 import { Modal } from "./components/organisms/modal.mjs";
 import { Swiper } from "./components/organisms/swiper/index.mjs";
@@ -34,6 +37,6 @@ import "./components/organisms/index.mjs";
 import "./components/templates/index.mjs";
 import { ThemeConfig, ThemeToken } from "./providers/Config/types.mjs";
 import { useConfig } from "./providers/Config/context.mjs";
-import { Config, Props } from "./providers/Config/index.mjs";
+import { Config, Props as Props$2 } from "./providers/Config/index.mjs";
 import "./providers/index.mjs";
-export { Button, Card, Checkbox, Collapse, ColorPicker, Config, Props as ConfigProps, DatePicker, Drawer, Props$1 as DrawerProps, Dropdown, FloatButton, Input, Layout, List, Marquees, Menu, Modal, Popover, Progress, Radio, Reveals, Select, Skeleton, Space, Spin, Splitter, Swiper, Switch, Tag, ThemeConfig, ThemeToken, Toast, StaticProps as ToastOptions, Typography, Upload, UploadFile, useConfig };
+export { Button, Card, Props as CardProps, Checkbox, Collapse, Props$1 as CollapseProps, ColorPicker, Config, Props$2 as ConfigProps, DatePicker, Drawer, Props$3 as DrawerProps, Dropdown, Props$4 as DropdownProps, FloatButton, Input, Layout, List, Marquees, Props$5 as MarqueesProps, Menu, Props$6 as MenuProps, Modal, Popover, Progress, Radio, Reveals, Props$7 as RevealsProps, Select, Skeleton, Space, Props$8 as SpaceProps, Spin, Splitter, Props$9 as SplitterProps, Swiper, Switch, Tag, ThemeConfig, ThemeToken, Toast, StaticProps as ToastOptions, Typography, Upload, UploadFile, Props$10 as UploadProps, useConfig };

package/dist/providers/Config/index.mjs

@@ -39,6 +39,7 @@ const buildCssVars = (token) => {
 };
 const Config = ({ theme = {}, className, children }) => {
 	const parent = useConfig();
+	const themeKey = JSON.stringify(theme);
 	const mergedTheme = useMemo(() => ({
 		...parent.theme,
 		...theme,
@@ -46,7 +47,7 @@ const Config = ({ theme = {}, className, children }) => {
 			...parent.theme.token,
 			...theme.token
 		}
-	}), [parent.theme, theme]);
+	}), [JSON.stringify(parent.theme), themeKey]);
 	const contextValue = useMemo(() => ({ theme: mergedTheme }), [mergedTheme]);
 	const cssVars = useMemo(() => buildCssVars(mergedTheme.token), [mergedTheme.token]);
 	const hasCssVars = Object.keys(cssVars).length > 0;
@@ -56,7 +57,10 @@ const Config = ({ theme = {}, className, children }) => {
 		value: contextValue,
 		children: needsWrapper ? /* @__PURE__ */ jsx("div", {
 			className: cn(mergedTheme.dark && "dark", className),
-			style: hasCssVars ? cssVars : void 0,
+			style: {
+				...hasCssVars ? cssVars : void 0,
+				display: "contents"
+			},
 			children
 		}) : children
 	});

package/dist/providers/Config/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/providers/Config/index.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport { Context, useConfig } from './context';\nimport type { ThemeConfig, ThemeToken } 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\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  className?: string;\n  children: React.ReactNode;\n}\n\nconst Config = ({ theme = {}, className, children }: Props) => {\n  const parent = useConfig();\n\n  const mergedTheme = useMemo<ThemeConfig>(\n    () => ({\n      ...parent.theme,\n      ...theme,\n      token: {\n        ...parent.theme.token,\n        ...theme.token,\n      },\n    }),\n    [parent.theme, theme],\n  );\n\n  const contextValue = useMemo(() => ({ theme: mergedTheme }), [mergedTheme]);\n\n  const cssVars = useMemo(\n    () => buildCssVars(mergedTheme.token),\n    [mergedTheme.token],\n  );\n\n  const hasCssVars = Object.keys(cssVars).length > 0;\n  const hasDarkMode = mergedTheme.dark !== undefined;\n  const needsWrapper = hasCssVars || hasDarkMode || className;\n\n  return (\n    <Context.Provider value={contextValue}>\n      {needsWrapper ? (\n        <div\n          className={cn(mergedTheme.dark && 'dark', className)}\n          style={hasCssVars ? cssVars : undefined}\n        >\n          {children}\n        </div>\n      ) : (\n        children\n      )}\n    </Context.Provider>\n  );\n};\n\nexport default Config;\nexport { useConfig };\nexport type { Props, ThemeConfig, ThemeToken };\n"],"mappings":";;;;;;;;AASA,MAAM,gBAAkD;CACtD,cAAc;CACd,wBAAwB;CACxB,iBAAiB;CACjB,iBAAiB;CACjB,WAAW;CACX,qBAAqB;CACrB,cAAc;CACd,wBAAwB;CACxB,gBAAgB;CAChB,0BAA0B;CAC1B,YAAY;CACZ,sBAAsB;CACtB,aAAa;CACb,uBAAuB;CACvB,kBAAkB;CAClB,aAAa;CACb,YAAY;CACZ,WAAW;CACX,cAAc;CACf;AAED,MAAM,gBAAgB,UAA4C;AAChE,KAAI,CAAC,MACH,QAAO,EAAE;CAGX,MAAM,OAA+B,EAAE;AAEvC,MAAK,MAAM,CAAC,KAAK,UAAU,OAAO,QAAQ,MAAM,EAAE;AAChD,MAAI,UAAU,OACZ;EAEF,MAAM,SAAS,cAAc;AAC7B,MAAI,OACF,MAAK,UAAU;;AAInB,QAAO;;AAST,MAAM,UAAU,EAAE,QAAQ,EAAE,EAAE,WAAW,eAAsB;CAC7D,MAAM,SAAS,WAAW;CAE1B,MAAM,cAAc,eACX;EACL,GAAG,OAAO;EACV,GAAG;EACH,OAAO;GACL,GAAG,OAAO,MAAM;GAChB,GAAG,MAAM;GACV;EACF,GACD,CAAC,OAAO,OAAO,MAAM,CACtB;CAED,MAAM,eAAe,eAAe,EAAE,OAAO,aAAa,GAAG,CAAC,YAAY,CAAC;CAE3E,MAAM,UAAU,cACR,aAAa,YAAY,MAAM,EACrC,CAAC,YAAY,MAAM,CACpB;CAED,MAAM,aAAa,OAAO,KAAK,QAAQ,CAAC,SAAS;CACjD,MAAM,cAAc,YAAY,SAAS;CACzC,MAAM,eAAe,cAAc,eAAe;AAElD,QACE,oBAAC,QAAQ;EAAS,OAAO;YACtB,eACC,oBAAC;GACC,WAAW,GAAG,YAAY,QAAQ,QAAQ,UAAU;GACpD,OAAO,aAAa,UAAU;GAE7B;IACG,GAEN;GAEe"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/providers/Config/index.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport { Context, useConfig } from './context';\nimport type { ThemeConfig, ThemeToken } 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\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  className?: string;\n  children: React.ReactNode;\n}\n\nconst Config = ({ theme = {}, className, children }: Props) => {\n  const parent = useConfig();\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\n  const mergedTheme = useMemo<ThemeConfig>(\n    () => ({\n      ...parent.theme,\n      ...theme,\n      token: {\n        ...parent.theme.token,\n        ...theme.token,\n      },\n    }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [parentThemeKey, themeKey],\n  );\n\n  const contextValue = useMemo(() => ({ theme: mergedTheme }), [mergedTheme]);\n\n  const cssVars = useMemo(\n    () => buildCssVars(mergedTheme.token),\n    [mergedTheme.token],\n  );\n\n  const hasCssVars = Object.keys(cssVars).length > 0;\n  const hasDarkMode = mergedTheme.dark !== undefined;\n  const needsWrapper = hasCssVars || hasDarkMode || className;\n\n  return (\n    <Context.Provider value={contextValue}>\n      {needsWrapper ? (\n        <div\n          className={cn(mergedTheme.dark && 'dark', className)}\n          style={{\n            ...(hasCssVars ? cssVars : undefined),\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 shouldn't be\n            // used here for anything that needs a real box (padding,\n            // background, borders); Config's className is meant for\n            // theming hooks (the `dark` class, arbitrary selector hooks),\n            // not layout.\n            display: 'contents',\n          }}\n        >\n          {children}\n        </div>\n      ) : (\n        children\n      )}\n    </Context.Provider>\n  );\n};\n\nexport default Config;\nexport { useConfig };\nexport type { Props, ThemeConfig, ThemeToken };\n"],"mappings":";;;;;;;;AASA,MAAM,gBAAkD;CACtD,cAAc;CACd,wBAAwB;CACxB,iBAAiB;CACjB,iBAAiB;CACjB,WAAW;CACX,qBAAqB;CACrB,cAAc;CACd,wBAAwB;CACxB,gBAAgB;CAChB,0BAA0B;CAC1B,YAAY;CACZ,sBAAsB;CACtB,aAAa;CACb,uBAAuB;CACvB,kBAAkB;CAClB,aAAa;CACb,YAAY;CACZ,WAAW;CACX,cAAc;CACf;AAED,MAAM,gBAAgB,UAA4C;AAChE,KAAI,CAAC,MACH,QAAO,EAAE;CAGX,MAAM,OAA+B,EAAE;AAEvC,MAAK,MAAM,CAAC,KAAK,UAAU,OAAO,QAAQ,MAAM,EAAE;AAChD,MAAI,UAAU,OACZ;EAEF,MAAM,SAAS,cAAc;AAC7B,MAAI,OACF,MAAK,UAAU;;AAInB,QAAO;;AAST,MAAM,UAAU,EAAE,QAAQ,EAAE,EAAE,WAAW,eAAsB;CAC7D,MAAM,SAAS,WAAW;CAW1B,MAAM,WAAW,KAAK,UAAU,MAAM;CAGtC,MAAM,cAAc,eACX;EACL,GAAG,OAAO;EACV,GAAG;EACH,OAAO;GACL,GAAG,OAAO,MAAM;GAChB,GAAG,MAAM;GACV;EACF,GAED,CAZqB,KAAK,UAAU,OAAO,MAAM,EAYhC,SAAS,CAC3B;CAED,MAAM,eAAe,eAAe,EAAE,OAAO,aAAa,GAAG,CAAC,YAAY,CAAC;CAE3E,MAAM,UAAU,cACR,aAAa,YAAY,MAAM,EACrC,CAAC,YAAY,MAAM,CACpB;CAED,MAAM,aAAa,OAAO,KAAK,QAAQ,CAAC,SAAS;CACjD,MAAM,cAAc,YAAY,SAAS;CACzC,MAAM,eAAe,cAAc,eAAe;AAElD,QACE,oBAAC,QAAQ;EAAS,OAAO;YACtB,eACC,oBAAC;GACC,WAAW,GAAG,YAAY,QAAQ,QAAQ,UAAU;GACpD,OAAO;IACL,GAAI,aAAa,UAAU;IAW3B,SAAS;IACV;GAEA;IACG,GAEN;GAEe"}

package/dist/style.css

@@ -302,18 +302,12 @@
   .left-full {
     left: 100%;
   }
-  .z-0 {
-    z-index: 0;
-  }
   .z-10 {
     z-index: 10;
   }
   .z-50 {
     z-index: 50;
   }
-  .z-100 {
-    z-index: 100;
-  }
   .z-10000 {
     z-index: 10000;
   }
@@ -416,6 +410,9 @@
   .block {
     display: block;
   }
+  .contents {
+    display: contents;
+  }
   .flex {
     display: flex;
   }
@@ -732,9 +729,6 @@
   .cursor-pointer {
     cursor: pointer;
   }
-  .resize {
-    resize: both;
-  }
   .scroll-my-1 {
     scroll-margin-block: calc(var(--spacing) * 1);
   }
@@ -1407,6 +1401,9 @@
     outline-style: var(--tw-outline-style);
     outline-width: 1px;
   }
+  .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,);
+  }
   .transition {
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -3605,6 +3602,59 @@
   inherits: false;
   initial-value: solid;
 }
+@property --tw-blur {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-brightness {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-contrast {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-grayscale {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-hue-rotate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-invert {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-opacity {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-saturate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-sepia {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-drop-shadow-size {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-duration {
   syntax: "*";
   inherits: false;
@@ -3654,6 +3704,19 @@
       --tw-ring-offset-color: #fff;
       --tw-ring-offset-shadow: 0 0 #0000;
       --tw-outline-style: solid;
+      --tw-blur: initial;
+      --tw-brightness: initial;
+      --tw-contrast: initial;
+      --tw-grayscale: initial;
+      --tw-hue-rotate: initial;
+      --tw-invert: initial;
+      --tw-opacity: initial;
+      --tw-saturate: initial;
+      --tw-sepia: initial;
+      --tw-drop-shadow: initial;
+      --tw-drop-shadow-color: initial;
+      --tw-drop-shadow-alpha: 100%;
+      --tw-drop-shadow-size: initial;
       --tw-duration: initial;
       --tw-content: "";
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbpark/ui-kit",
-  "version": "3.6.0",
+  "version": "3.8.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",
@@ -107,6 +107,7 @@
   "scripts": {
     "build": "tsdown",
     "lint": "eslint .",
+    "check-dynamic-classes": "node scripts/check-dynamic-tailwind-classes.mjs",
     "generate:component": "turbo gen react-component",
     "check-types": "tsc -b",
     "prepublishOnly": "node scripts/prepare-publish.mjs",