@jbpark/ui-kit 3.8.0 → 4.1.0

package/dist/index.d.mts

@@ -2,10 +2,15 @@ import Button from "./Button.mjs";
 import Tag from "./Tag.mjs";
 import Typography from "./Typography.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 { Menu, Props as Props$14 } from "./components/molecules/menu/menu.mjs";
+import { Props as Props$18 } from "./components/molecules/reveals/reveals.mjs";
 import Reveals from "./Reveals.mjs";
-import Space, { Props as Props$8 } from "./Space.mjs";
+import Space, { Props as Props$21 } from "./Space.mjs";
+import { Props as Props$5 } from "./components/templates/layout/content.mjs";
+import { Props as Props$9 } from "./components/templates/layout/footer.mjs";
+import { Props as Props$10 } from "./components/templates/layout/header.mjs";
+import { Props as Props$11 } from "./components/templates/layout/layout.mjs";
+import { Props as Props$20 } from "./components/templates/layout/sider.mjs";
 import Layout from "./Layout.mjs";
 import { Checkbox } from "./components/atoms/checkbox/index.mjs";
 import { ColorPicker } from "./components/atoms/color-picker.mjs";
@@ -20,23 +25,31 @@ 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, 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 { Collapse, Props as Props$2 } from "./components/molecules/collapse.mjs";
+import { Dropdown, Props as Props$7 } from "./components/molecules/dropdown.mjs";
+import { Props as Props$13 } 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 { Props as Props$22 } from "./components/molecules/splitter/splitter.mjs";
 import { Splitter } from "./components/molecules/splitter/index.mjs";
-import { Props as Props$10, Upload, UploadFile } from "./components/molecules/upload.mjs";
+import { Props as Props$24, Upload, UploadFile } from "./components/molecules/upload.mjs";
 import "./components/molecules/index.mjs";
-import { Drawer, Props as Props$3 } from "./components/organisms/drawer.mjs";
+import { Drawer, Props as Props$6 } from "./components/organisms/drawer.mjs";
+import { Props as Props$12 } from "./components/organisms/list/list.mjs";
 import { List } from "./components/organisms/list/index.mjs";
-import { Modal } from "./components/organisms/modal.mjs";
+import { Modal, Props as Props$15 } from "./components/organisms/modal.mjs";
+import { Props as Props$23 } from "./components/organisms/swiper/swiper.mjs";
 import { Swiper } from "./components/organisms/swiper/index.mjs";
 import { StaticProps, Toast } from "./components/organisms/toast.mjs";
 import "./components/organisms/index.mjs";
+import { Container, Props as Props$4 } from "./components/templates/container.mjs";
+import { Empty, Props as Props$8 } from "./components/templates/empty.mjs";
+import { Props as Props$17, Result } from "./components/templates/result.mjs";
+import { PageHeader, Props as Props$16 } from "./components/templates/page-header.mjs";
+import { Props as Props$19, Row } from "./components/templates/grid/row.mjs";
+import { Col, Props as Props$1 } from "./components/templates/grid/col.mjs";
 import "./components/templates/index.mjs";
-import { ThemeConfig, ThemeToken } from "./providers/Config/types.mjs";
-import { useConfig } from "./providers/Config/context.mjs";
-import { Config, Props as Props$2 } from "./providers/Config/index.mjs";
-import "./providers/index.mjs";
-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 };
+import { Locale, ThemeConfig, ThemeToken } from "./providers/config/types.mjs";
+import { DEFAULT_LOCALE, useConfig } from "./providers/config/context.mjs";
+import { Config, Props as Props$3 } from "./providers/config/config.mjs";
+import "./providers.mjs";
+export { Button, Card, Props as CardProps, Checkbox, Col, Props$1 as ColProps, Collapse, Props$2 as CollapseProps, ColorPicker, Config, Props$3 as ConfigProps, Container, Props$4 as ContainerProps, Props$5 as ContentProps, DEFAULT_LOCALE, DatePicker, Drawer, Props$6 as DrawerProps, Dropdown, Props$7 as DropdownProps, Empty, Props$8 as EmptyProps, FloatButton, Props$9 as FooterProps, Props$10 as HeaderProps, Input, Layout, Props$11 as LayoutProps, List, Props$12 as ListProps, Locale, Marquees, Props$13 as MarqueesProps, Menu, Props$14 as MenuProps, Modal, Props$15 as ModalProps, PageHeader, Props$16 as PageHeaderProps, Popover, Progress, Radio, Result, Props$17 as ResultProps, Reveals, Props$18 as RevealsProps, Row, Props$19 as RowProps, Select, Props$20 as SiderProps, Skeleton, Space, Props$21 as SpaceProps, Spin, Splitter, Props$22 as SplitterProps, Swiper, Props$23 as SwiperProps, Switch, Tag, ThemeConfig, ThemeToken, Toast, StaticProps as ToastOptions, Typography, Upload, UploadFile, Props$24 as UploadProps, useConfig };

package/dist/index.mjs

@@ -1,4 +1,6 @@
 import "./style.mjs";
+import { DEFAULT_LOCALE, useConfig } from "./providers/config/context.mjs";
+import Config from "./providers/config/config.mjs";
 import Button from "./Button.mjs";
 import Checkbox from "./components/atoms/checkbox/index.mjs";
 import Typography from "./Typography.mjs";
@@ -29,7 +31,11 @@ import Modal from "./components/organisms/modal.mjs";
 import Swiper from "./components/organisms/swiper/index.mjs";
 import Toast from "./components/organisms/toast.mjs";
 import Layout from "./Layout.mjs";
-import { useConfig } from "./providers/Config/context.mjs";
-import Config from "./providers/Config/index.mjs";
+import Container from "./components/templates/container.mjs";
+import Empty from "./components/templates/empty.mjs";
+import Result from "./components/templates/result.mjs";
+import PageHeader from "./components/templates/page-header.mjs";
+import Row from "./components/templates/grid/row.mjs";
+import Col from "./components/templates/grid/col.mjs";
 
-export { Button, Card, Checkbox, Collapse, ColorPicker, Config, DatePicker, Drawer, Dropdown, FloatButton, Input, Layout, List, Marquees, Menu, Modal, Popover, Progress, Radio, Reveals, Select, Skeleton, Space, Spin, Splitter, Swiper, Switch, Tag, Toast, Typography, Upload, useConfig };
+export { Button, Card, Checkbox, Col, Collapse, ColorPicker, Config, Container, DEFAULT_LOCALE, DatePicker, Drawer, Dropdown, Empty, FloatButton, Input, Layout, List, Marquees, Menu, Modal, PageHeader, Popover, Progress, Radio, Result, Reveals, Row, Select, Skeleton, Space, Spin, Splitter, Swiper, Switch, Tag, Toast, Typography, Upload, useConfig };

package/dist/providers/{Config/index.d.mts → config/config.d.mts}

@@ -1,18 +1,22 @@
-import { ThemeConfig, ThemeToken } from "./types.mjs";
-import { useConfig } from "./context.mjs";
+import { Locale, ThemeConfig, ThemeToken } from "./types.mjs";
+import { DEFAULT_LOCALE, useConfig } from "./context.mjs";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 
-//#region src/providers/Config/index.d.ts
+//#region src/providers/config/config.d.ts
 interface Props {
   theme?: ThemeConfig;
+  locale?: Locale;
+  getContainer?: () => HTMLElement;
   className?: string;
   children: React.ReactNode;
 }
 declare const Config: ({
   theme,
+  locale,
+  getContainer,
   className,
   children
 }: Props) => react_jsx_runtime0.JSX.Element;
 //#endregion
 export { Config, type Props };
-//# sourceMappingURL=index.d.mts.map
+//# sourceMappingURL=config.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"config.d.mts","names":[],"sources":["../../../src/providers/config/config.tsx"],"mappings":";;;;;UAmDU,KAAA;EACR,KAAA,GAAQ,WAAA;EACR,MAAA,GAAS,MAAA;EACT,YAAA,SAAqB,WAAA;EACrB,SAAA;EACA,QAAA,EAAU,KAAA,CAAM,SAAA;AAAA;AAAA,cAGZ,MAAA;EAAU,KAAA;EAAA,MAAA;EAAA,YAAA;EAAA,SAAA;EAAA;AAAA,GAMb,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/providers/{Config/index.mjs → config/config.mjs}

@@ -1,11 +1,11 @@
 'use client';
 
 import { cn } from "../../utils.mjs";
-import { Context, useConfig } from "./context.mjs";
-import { useMemo } from "react";
+import { Context, DEFAULT_LOCALE, useConfig } from "./context.mjs";
+import { useCallback, useMemo, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 
-//#region src/providers/Config/index.tsx
+//#region src/providers/config/config.tsx
 const tokenToCssVar = {
 	colorPrimary: "--primary",
 	colorPrimaryForeground: "--primary-foreground",
@@ -37,9 +37,13 @@ const buildCssVars = (token) => {
 	}
 	return vars;
 };
-const Config = ({ theme = {}, className, children }) => {
+const Config = ({ theme = {}, locale = {}, getContainer, className, children }) => {
 	const parent = useConfig();
+	const [wrapperEl, setWrapperEl] = useState(null);
 	const themeKey = JSON.stringify(theme);
+	const parentThemeKey = JSON.stringify(parent.theme);
+	const localeKey = JSON.stringify(locale);
+	const parentLocaleKey = JSON.stringify(parent.locale);
 	const mergedTheme = useMemo(() => ({
 		...parent.theme,
 		...theme,
@@ -47,15 +51,38 @@ const Config = ({ theme = {}, className, children }) => {
 			...parent.theme.token,
 			...theme.token
 		}
-	}), [JSON.stringify(parent.theme), themeKey]);
-	const contextValue = useMemo(() => ({ theme: mergedTheme }), [mergedTheme]);
+	}), [parentThemeKey, themeKey]);
+	const mergedLocale = useMemo(() => ({
+		...parent.locale,
+		...locale
+	}), [parentLocaleKey, localeKey]);
 	const cssVars = useMemo(() => buildCssVars(mergedTheme.token), [mergedTheme.token]);
 	const hasCssVars = Object.keys(cssVars).length > 0;
 	const hasDarkMode = mergedTheme.dark !== void 0;
 	const needsWrapper = hasCssVars || hasDarkMode || className;
+	const resolvedGetContainer = useCallback(() => {
+		if (getContainer) return getContainer();
+		if (needsWrapper && wrapperEl) return wrapperEl;
+		return parent.getContainer();
+	}, [
+		getContainer,
+		needsWrapper,
+		wrapperEl,
+		parent
+	]);
+	const contextValue = useMemo(() => ({
+		theme: mergedTheme,
+		locale: mergedLocale,
+		getContainer: resolvedGetContainer
+	}), [
+		mergedTheme,
+		mergedLocale,
+		resolvedGetContainer
+	]);
 	return /* @__PURE__ */ jsx(Context.Provider, {
 		value: contextValue,
 		children: needsWrapper ? /* @__PURE__ */ jsx("div", {
+			ref: setWrapperEl,
 			className: cn(mergedTheme.dark && "dark", className),
 			style: {
 				...hasCssVars ? cssVars : void 0,
@@ -68,4 +95,4 @@ const Config = ({ theme = {}, className, children }) => {
 
 //#endregion
 export { Config as default };
-//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=config.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"config.mjs","names":[],"sources":["../../../src/providers/config/config.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useMemo, useState } from 'react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport { Context, DEFAULT_LOCALE, useConfig } from './context';\nimport type { Locale, 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  locale?: Locale;\n  getContainer?: () => HTMLElement;\n  className?: string;\n  children: React.ReactNode;\n}\n\nconst Config = ({\n  theme = {},\n  locale = {},\n  getContainer,\n  className,\n  children,\n}: Props) => {\n  const parent = useConfig();\n  const [wrapperEl, setWrapperEl] = useState<HTMLDivElement | null>(null);\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    }),\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 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  // 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 contextValue = useMemo(\n    () => ({\n      theme: mergedTheme,\n      locale: mergedLocale,\n      getContainer: resolvedGetContainer,\n    }),\n    [mergedTheme, mergedLocale, resolvedGetContainer],\n  );\n\n  return (\n    <Context.Provider value={contextValue}>\n      {needsWrapper ? (\n        <div\n          ref={setWrapperEl}\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, DEFAULT_LOCALE };\nexport type { Props, Locale, 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;;AAWT,MAAM,UAAU,EACd,QAAQ,EAAE,EACV,SAAS,EAAE,EACX,cACA,WACA,eACW;CACX,MAAM,SAAS,WAAW;CAC1B,MAAM,CAAC,WAAW,gBAAgB,SAAgC,KAAK;CAWvE,MAAM,WAAW,KAAK,UAAU,MAAM;CACtC,MAAM,iBAAiB,KAAK,UAAU,OAAO,MAAM;CACnD,MAAM,YAAY,KAAK,UAAU,OAAO;CACxC,MAAM,kBAAkB,KAAK,UAAU,OAAO,OAAO;CAErD,MAAM,cAAc,eACX;EACL,GAAG,OAAO;EACV,GAAG;EACH,OAAO;GACL,GAAG,OAAO,MAAM;GAChB,GAAG,MAAM;GACV;EACF,GAED,CAAC,gBAAgB,SAAS,CAC3B;CAED,MAAM,eAAe,eACZ;EACL,GAAG,OAAO;EACV,GAAG;EACJ,GAED,CAAC,iBAAiB,UAAU,CAC7B;CAED,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;CAUlD,MAAM,uBAAuB,kBAA2C;AACtE,MAAI,aACF,QAAO,cAAc;AAEvB,MAAI,gBAAgB,UAClB,QAAO;AAET,SAAO,OAAO,cAAc;IAC3B;EAAC;EAAc;EAAc;EAAW;EAAO,CAAC;CAEnD,MAAM,eAAe,eACZ;EACL,OAAO;EACP,QAAQ;EACR,cAAc;EACf,GACD;EAAC;EAAa;EAAc;EAAqB,CAClD;AAED,QACE,oBAAC,QAAQ;EAAS,OAAO;YACtB,eACC,oBAAC;GACC,KAAK;GACL,WAAW,GAAG,YAAY,QAAQ,QAAQ,UAAU;GACpD,OAAO;IACL,GAAI,aAAa,UAAU;IAW3B,SAAS;IACV;GAEA;IACG,GAEN;GAEe"}

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

@@ -0,0 +1,9 @@
+import { ContextValue, Locale } from "./types.mjs";
+import "react";
+
+//#region src/providers/config/context.d.ts
+declare const DEFAULT_LOCALE: Required<Locale>;
+declare const useConfig: () => ContextValue;
+//#endregion
+export { DEFAULT_LOCALE, useConfig };
+//# sourceMappingURL=context.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.mts","names":[],"sources":["../../../src/providers/config/context.ts"],"mappings":";;;;cAMa,cAAA,EAAgB,QAAA,CAAS,MAAA;AAAA,cAezB,SAAA,QAAS,YAAA"}

package/dist/providers/config/context.mjs

@@ -0,0 +1,23 @@
+'use client';
+
+import { createContext, useContext } from "react";
+
+//#region src/providers/config/context.ts
+const DEFAULT_LOCALE = {
+	close: "닫기",
+	clear: "지우기",
+	backToTop: "맨 위로",
+	loading: "로딩 중",
+	expand: "펼치기",
+	collapse: "접기"
+};
+const Context = createContext({
+	theme: {},
+	locale: DEFAULT_LOCALE,
+	getContainer: () => void 0
+});
+const useConfig = () => useContext(Context);
+
+//#endregion
+export { Context, DEFAULT_LOCALE, useConfig };
+//# sourceMappingURL=context.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"context.mjs","names":[],"sources":["../../../src/providers/config/context.ts"],"sourcesContent":["'use client';\n\nimport { createContext, useContext } from 'react';\n\nimport type { ContextValue, Locale } from './types';\n\nexport const DEFAULT_LOCALE: Required<Locale> = {\n  close: '닫기',\n  clear: '지우기',\n  backToTop: '맨 위로',\n  loading: '로딩 중',\n  expand: '펼치기',\n  collapse: '접기',\n};\n\nexport const Context = createContext<ContextValue>({\n  theme: {},\n  locale: DEFAULT_LOCALE,\n  getContainer: () => undefined,\n});\n\nexport const useConfig = () => useContext(Context);\n"],"mappings":";;;;;AAMA,MAAa,iBAAmC;CAC9C,OAAO;CACP,OAAO;CACP,WAAW;CACX,SAAS;CACT,QAAQ;CACR,UAAU;CACX;AAED,MAAa,UAAU,cAA4B;CACjD,OAAO,EAAE;CACT,QAAQ;CACR,oBAAoB;CACrB,CAAC;AAEF,MAAa,kBAAkB,WAAW,QAAQ"}

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

@@ -0,0 +1,3 @@
+import { Locale, ThemeConfig, ThemeToken } from "./types.mjs";
+import { DEFAULT_LOCALE, useConfig } from "./context.mjs";
+import { Config, Props } from "./config.mjs";

package/dist/providers/{Config → config}/types.d.mts

@@ -1,4 +1,4 @@
-//#region src/providers/Config/types.d.ts
+//#region src/providers/config/types.d.ts
 interface ThemeToken {
   colorPrimary?: string;
   colorPrimaryForeground?: string;
@@ -24,9 +24,19 @@ interface ThemeConfig {
   token?: ThemeToken;
   dark?: boolean;
 }
+interface Locale {
+  close?: string;
+  clear?: string;
+  backToTop?: string;
+  loading?: string;
+  expand?: string;
+  collapse?: string;
+}
 interface ContextValue {
   theme: ThemeConfig;
+  locale: Locale;
+  getContainer: () => HTMLElement | undefined;
 }
 //#endregion
-export { ContextValue, ThemeConfig, ThemeToken };
+export { ContextValue, Locale, ThemeConfig, ThemeToken };
 //# sourceMappingURL=types.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.mts","names":[],"sources":["../../../src/providers/config/types.ts"],"mappings":";UAAiB,UAAA;EAEf,YAAA;EACA,sBAAA;EACA,eAAA;EACA,eAAA;EACA,SAAA;EACA,mBAAA;EACA,YAAA;EACA,sBAAA;EACA,cAAA;EACA,wBAAA;EACA,UAAA;EACA,oBAAA;EACA,WAAA;EACA,qBAAA;EACA,gBAAA;EACA,WAAA;EACA,UAAA;EACA,SAAA;EAGA,YAAA;AAAA;AAAA,UAGe,WAAA;EACf,KAAA,GAAQ,UAAA;EACR,IAAA;AAAA;AAAA,UAQe,MAAA;EACf,KAAA;EACA,KAAA;EACA,SAAA;EACA,OAAA;EACA,MAAA;EACA,QAAA;AAAA;AAAA,UAGe,YAAA;EACf,KAAA,EAAO,WAAA;EACP,MAAA,EAAQ,MAAA;EAUR,YAAA,QAAoB,WAAA;AAAA"}

package/dist/providers.d.mts

@@ -0,0 +1,5 @@
+import { Locale, ThemeConfig, ThemeToken } from "./providers/config/types.mjs";
+import { DEFAULT_LOCALE, useConfig } from "./providers/config/context.mjs";
+import { Config, Props } from "./providers/config/config.mjs";
+import "./providers/config/index.mjs";
+export { Config, type Props as ConfigProps, DEFAULT_LOCALE, type Locale, type ThemeConfig, type ThemeToken, useConfig };

package/dist/providers.mjs

@@ -0,0 +1,4 @@
+import { DEFAULT_LOCALE, useConfig } from "./providers/config/context.mjs";
+import Config from "./providers/config/config.mjs";
+
+export { Config, DEFAULT_LOCALE, useConfig };

package/dist/style.css

@@ -14,8 +14,19 @@
     --color-black: #000;
     --color-white: #fff;
     --spacing: 0.25rem;
+    --container-3xs: 16rem;
+    --container-2xs: 18rem;
+    --container-xs: 20rem;
     --container-sm: 24rem;
+    --container-md: 28rem;
     --container-lg: 32rem;
+    --container-xl: 36rem;
+    --container-2xl: 42rem;
+    --container-3xl: 48rem;
+    --container-4xl: 56rem;
+    --container-5xl: 64rem;
+    --container-6xl: 72rem;
+    --container-7xl: 80rem;
     --text-xs: 0.75rem;
     --text-xs--line-height: calc(1 / 0.75);
     --text-sm: 0.875rem;
@@ -210,6 +221,9 @@
   .pointer-events-none {
     pointer-events: none;
   }
+  .collapse {
+    visibility: collapse;
+  }
   .invisible {
     visibility: hidden;
   }
@@ -311,6 +325,9 @@
   .z-10000 {
     z-index: 10000;
   }
+  .order-last {
+    order: 9999;
+  }
   .col-span-2 {
     grid-column: span 2 / span 2;
   }
@@ -356,6 +373,9 @@
   .mt-0\.5 {
     margin-top: calc(var(--spacing) * 0.5);
   }
+  .mt-1 {
+    margin-top: calc(var(--spacing) * 1);
+  }
   .mt-2 {
     margin-top: calc(var(--spacing) * 2);
   }
@@ -383,6 +403,9 @@
   .mr-7 {
     margin-right: calc(var(--spacing) * 7);
   }
+  .mb-2 {
+    margin-bottom: calc(var(--spacing) * 2);
+  }
   .mb-3 {
     margin-bottom: calc(var(--spacing) * 3);
   }
@@ -404,6 +427,9 @@
   .ml-7 {
     margin-left: calc(var(--spacing) * 7);
   }
+  .box-border {
+    box-sizing: border-box;
+  }
   .box-content {
     box-sizing: content-box;
   }
@@ -610,12 +636,57 @@
   .w-px {
     width: 1px;
   }
+  .max-w-2xl {
+    max-width: var(--container-2xl);
+  }
+  .max-w-2xs {
+    max-width: var(--container-2xs);
+  }
+  .max-w-3xl {
+    max-width: var(--container-3xl);
+  }
+  .max-w-3xs {
+    max-width: var(--container-3xs);
+  }
+  .max-w-4xl {
+    max-width: var(--container-4xl);
+  }
+  .max-w-5xl {
+    max-width: var(--container-5xl);
+  }
+  .max-w-6xl {
+    max-width: var(--container-6xl);
+  }
+  .max-w-7xl {
+    max-width: var(--container-7xl);
+  }
   .max-w-48 {
     max-width: calc(var(--spacing) * 48);
   }
   .max-w-\[calc\(100\%-2rem\)\] {
     max-width: calc(100% - 2rem);
   }
+  .max-w-full {
+    max-width: 100%;
+  }
+  .max-w-lg {
+    max-width: var(--container-lg);
+  }
+  .max-w-md {
+    max-width: var(--container-md);
+  }
+  .max-w-none {
+    max-width: none;
+  }
+  .max-w-sm {
+    max-width: var(--container-sm);
+  }
+  .max-w-xl {
+    max-width: var(--container-xl);
+  }
+  .max-w-xs {
+    max-width: var(--container-xs);
+  }
   .min-w-\(--cell-size\) {
     min-width: var(--cell-size);
   }
@@ -652,6 +723,9 @@
   .grow {
     flex-grow: 1;
   }
+  .grow-0 {
+    flex-grow: 0;
+  }
   .basis-auto {
     flex-basis: auto;
   }
@@ -729,6 +803,9 @@
   .cursor-pointer {
     cursor: pointer;
   }
+  .resize {
+    resize: both;
+  }
   .scroll-my-1 {
     scroll-margin-block: calc(var(--spacing) * 1);
   }
@@ -771,6 +848,12 @@
   .items-start {
     align-items: flex-start;
   }
+  .items-stretch {
+    align-items: stretch;
+  }
+  .justify-around {
+    justify-content: space-around;
+  }
   .justify-between {
     justify-content: space-between;
   }
@@ -780,6 +863,9 @@
   .justify-end {
     justify-content: flex-end;
   }
+  .justify-evenly {
+    justify-content: space-evenly;
+  }
   .justify-start {
     justify-content: flex-start;
   }
@@ -1156,6 +1242,12 @@
   .py-4 {
     padding-block: calc(var(--spacing) * 4);
   }
+  .py-12 {
+    padding-block: calc(var(--spacing) * 12);
+  }
+  .py-16 {
+    padding-block: calc(var(--spacing) * 16);
+  }
   .pt-0 {
     padding-top: calc(var(--spacing) * 0);
   }
@@ -2794,6 +2886,11 @@
       justify-content: flex-end;
     }
   }
+  .sm\:px-6 {
+    @media (width >= 40rem) {
+      padding-inline: calc(var(--spacing) * 6);
+    }
+  }
   .sm\:text-left {
     @media (width >= 40rem) {
       text-align: left;
@@ -2870,6 +2967,11 @@
       line-height: var(--tw-leading, var(--text-sm--line-height));
     }
   }
+  .lg\:px-8 {
+    @media (width >= 64rem) {
+      padding-inline: calc(var(--spacing) * 8);
+    }
+  }
   .lg\:text-2xl {
     @media (width >= 64rem) {
       font-size: var(--text-2xl);
@@ -3050,6 +3152,18 @@
       height: calc(var(--spacing) * 5);
     }
   }
+  .\[\&_svg\]\:size-12 {
+    & svg {
+      width: calc(var(--spacing) * 12);
+      height: calc(var(--spacing) * 12);
+    }
+  }
+  .\[\&_svg\]\:size-16 {
+    & svg {
+      width: calc(var(--spacing) * 16);
+      height: calc(var(--spacing) * 16);
+    }
+  }
   .\[\&_svg\]\:shrink-0 {
     & svg {
       flex-shrink: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbpark/ui-kit",
-  "version": "3.8.0",
+  "version": "4.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",
@@ -154,7 +154,7 @@
     "vaul": "^1.1.2"
   },
   "peerDependencies": {
-    "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   }
 }

package/dist/providers/Config/context.d.mts

@@ -1,8 +0,0 @@
-import { ContextValue } from "./types.mjs";
-import "react";
-
-//#region src/providers/Config/context.d.ts
-declare const useConfig: () => ContextValue;
-//#endregion
-export { useConfig };
-//# sourceMappingURL=context.d.mts.map

package/dist/providers/Config/context.d.mts.map

@@ -1 +0,0 @@
-{"version":3,"file":"context.d.mts","names":[],"sources":["../../../src/providers/Config/context.ts"],"mappings":";;;;cAUa,SAAA,QAAS,YAAA"}

package/dist/providers/Config/context.mjs

@@ -1,11 +0,0 @@
-'use client';
-
-import { createContext, useContext } from "react";
-
-//#region src/providers/Config/context.ts
-const Context = createContext({ theme: {} });
-const useConfig = () => useContext(Context);
-
-//#endregion
-export { Context, useConfig };
-//# sourceMappingURL=context.mjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"context.mjs","names":[],"sources":["../../../src/providers/Config/context.ts"],"sourcesContent":["'use client';\n\nimport { createContext, useContext } from 'react';\n\nimport type { ContextValue } from './types';\n\nexport const Context = createContext<ContextValue>({\n  theme: {},\n});\n\nexport const useConfig = () => useContext(Context);\n"],"mappings":";;;;;AAMA,MAAa,UAAU,cAA4B,EACjD,OAAO,EAAE,EACV,CAAC;AAEF,MAAa,kBAAkB,WAAW,QAAQ"}

package/dist/providers/Config/index.d.mts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.mts","names":[],"sources":["../../../src/providers/Config/index.tsx"],"mappings":";;;;;UAmDU,KAAA;EACR,KAAA,GAAQ,WAAA;EACR,SAAA;EACA,QAAA,EAAU,KAAA,CAAM,SAAA;AAAA;AAAA,cAGZ,MAAA;EAAU,KAAA;EAAA,SAAA;EAAA;AAAA,GAAqC,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}

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

@@ -1 +0,0 @@
-{"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/providers/Config/types.d.mts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.mts","names":[],"sources":["../../../src/providers/Config/types.ts"],"mappings":";UAAiB,UAAA;EAEf,YAAA;EACA,sBAAA;EACA,eAAA;EACA,eAAA;EACA,SAAA;EACA,mBAAA;EACA,YAAA;EACA,sBAAA;EACA,cAAA;EACA,wBAAA;EACA,UAAA;EACA,oBAAA;EACA,WAAA;EACA,qBAAA;EACA,gBAAA;EACA,WAAA;EACA,UAAA;EACA,SAAA;EAGA,YAAA;AAAA;AAAA,UAGe,WAAA;EACf,KAAA,GAAQ,UAAA;EACR,IAAA;AAAA;AAAA,UAGe,YAAA;EACf,KAAA,EAAO,WAAA;AAAA"}

package/dist/providers/index.d.mts

@@ -1,3 +0,0 @@
-import { ThemeConfig, ThemeToken } from "./Config/types.mjs";
-import { useConfig } from "./Config/context.mjs";
-import { Config, Props } from "./Config/index.mjs";