@jbpark/ui-kit 2.4.0 → 2.7.0

package/dist/index.d.mts

@@ -18,13 +18,18 @@ import { Card } from "./components/molecules/Card/index.mjs";
 import { Collapse } from "./components/molecules/Collapse/index.mjs";
 import { Dropdown } from "./components/molecules/Dropdown/index.mjs";
 import { Marquees } from "./components/molecules/Marquees/index.mjs";
+import { Splitter } from "./components/molecules/Splitter/index.mjs";
 import { Space } from "./components/molecules/Space/index.mjs";
 import "./components/molecules/index.mjs";
-import { Drawer } from "./components/organisms/Drawer/index.mjs";
+import { Drawer, Props as Props$1 } from "./components/organisms/Drawer/index.mjs";
 import { List } from "./components/organisms/List/index.mjs";
 import { Modal } from "./components/organisms/Modal/index.mjs";
 import { Swiper } from "./components/organisms/Swiper/index.mjs";
 import "./components/organisms/index.mjs";
 import { Layout } from "./components/templates/Layout/index.mjs";
 import "./components/templates/index.mjs";
-export { Button, Card, Checkbox, Collapse, ColorPicker, Drawer, Dropdown, FloatButton, Input, Layout, List, Marquees, Menu, Modal, Popover, Progress, Radio, Reveals, Select, Skeleton, Space, Spin, Swiper, Switch, Typography };
+import { ThemeConfig, ThemeToken } from "./providers/Config/types.mjs";
+import { useConfig } from "./providers/Config/context.mjs";
+import { Config, Props } from "./providers/Config/index.mjs";
+import "./providers/index.mjs";
+export { Button, Card, Checkbox, Collapse, ColorPicker, Config, Props as ConfigProps, Drawer, Props$1 as DrawerProps, Dropdown, FloatButton, Input, Layout, List, Marquees, Menu, Modal, Popover, Progress, Radio, Reveals, Select, Skeleton, Space, Spin, Splitter, Swiper, Switch, ThemeConfig, ThemeToken, Typography, useConfig };

package/dist/index.mjs

@@ -19,6 +19,7 @@ import Menu from "./Menu.mjs";
 import Dropdown from "./components/molecules/Dropdown/index.mjs";
 import Marquees from "./components/molecules/Marquees/index.mjs";
 import Reveals from "./Reveals.mjs";
+import Splitter from "./components/molecules/Splitter/index.mjs";
 import Space from "./components/molecules/Space/index.mjs";
 import "./components/molecules/index.mjs";
 import Drawer from "./components/organisms/Drawer/index.mjs";
@@ -28,5 +29,8 @@ import Swiper from "./components/organisms/Swiper/index.mjs";
 import "./components/organisms/index.mjs";
 import Layout from "./components/templates/Layout/index.mjs";
 import "./components/templates/index.mjs";
+import { useConfig } from "./providers/Config/context.mjs";
+import Config from "./providers/Config/index.mjs";
+import "./providers/index.mjs";
 
-export { Button, Card, Checkbox, Collapse, ColorPicker, Drawer, Dropdown, FloatButton, Input, Layout, List, Marquees, Menu, Modal, Popover, Progress, Radio, Reveals, Select, Skeleton, Space, Spin, Swiper, Switch, Typography };
+export { Button, Card, Checkbox, Collapse, ColorPicker, Config, Drawer, Dropdown, FloatButton, Input, Layout, List, Marquees, Menu, Modal, Popover, Progress, Radio, Reveals, Select, Skeleton, Space, Spin, Splitter, Swiper, Switch, Typography, useConfig };

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

@@ -0,0 +1,8 @@
+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

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

package/dist/providers/Config/context.mjs

@@ -0,0 +1,11 @@
+'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

@@ -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 } 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

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

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,67 @@
+'use client';
+
+import { cn } from "../../utils.mjs";
+import { Context, useConfig } from "./context.mjs";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/providers/Config/index.tsx
+const tokenToCssVar = {
+	colorPrimary: "--primary",
+	colorPrimaryForeground: "--primary-foreground",
+	colorBackground: "--background",
+	colorForeground: "--foreground",
+	colorCard: "--card",
+	colorCardForeground: "--card-foreground",
+	colorPopover: "--popover",
+	colorPopoverForeground: "--popover-foreground",
+	colorSecondary: "--secondary",
+	colorSecondaryForeground: "--secondary-foreground",
+	colorMuted: "--muted",
+	colorMutedForeground: "--muted-foreground",
+	colorAccent: "--accent",
+	colorAccentForeground: "--accent-foreground",
+	colorDestructive: "--destructive",
+	colorBorder: "--border",
+	colorInput: "--input",
+	colorRing: "--ring",
+	borderRadius: "--radius"
+};
+const buildCssVars = (token) => {
+	if (!token) return {};
+	const vars = {};
+	for (const [key, value] of Object.entries(token)) {
+		if (value === void 0) continue;
+		const cssVar = tokenToCssVar[key];
+		if (cssVar) vars[cssVar] = value;
+	}
+	return vars;
+};
+const Config = ({ theme = {}, className, children }) => {
+	const parent = useConfig();
+	const mergedTheme = useMemo(() => ({
+		...parent.theme,
+		...theme,
+		token: {
+			...parent.theme.token,
+			...theme.token
+		}
+	}), [parent.theme, theme]);
+	const contextValue = useMemo(() => ({ theme: mergedTheme }), [mergedTheme]);
+	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;
+	return /* @__PURE__ */ jsx(Context.Provider, {
+		value: contextValue,
+		children: needsWrapper ? /* @__PURE__ */ jsx("div", {
+			className: cn(mergedTheme.dark && "dark", className),
+			style: hasCssVars ? cssVars : void 0,
+			children
+		}) : children
+	});
+};
+
+//#endregion
+export { Config as default };
+//# sourceMappingURL=index.mjs.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,32 @@
+//#region src/providers/Config/types.d.ts
+interface ThemeToken {
+  colorPrimary?: string;
+  colorPrimaryForeground?: string;
+  colorBackground?: string;
+  colorForeground?: string;
+  colorCard?: string;
+  colorCardForeground?: string;
+  colorPopover?: string;
+  colorPopoverForeground?: string;
+  colorSecondary?: string;
+  colorSecondaryForeground?: string;
+  colorMuted?: string;
+  colorMutedForeground?: string;
+  colorAccent?: string;
+  colorAccentForeground?: string;
+  colorDestructive?: string;
+  colorBorder?: string;
+  colorInput?: string;
+  colorRing?: string;
+  borderRadius?: string;
+}
+interface ThemeConfig {
+  token?: ThemeToken;
+  dark?: boolean;
+}
+interface ContextValue {
+  theme: ThemeConfig;
+}
+//#endregion
+export { ContextValue, 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,UAGe,YAAA;EACf,KAAA,EAAO,WAAA;AAAA"}

package/dist/providers/index.d.mts

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

package/dist/providers/index.mjs

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