@jbpark/ui-kit 3.5.0 → 3.7.0

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/core/badge.d.mts

@@ -8,7 +8,7 @@ declare namespace badge_d_exports {
   export { Badge, Props, badgeVariants };
 }
 declare const badgeVariants: (props?: ({
-  variant?: "default" | "destructive" | "outline" | "secondary" | null | undefined;
+  variant?: "default" | "secondary" | "destructive" | "outline" | null | undefined;
 } & class_variance_authority_types0.ClassProp) | undefined) => string;
 type Props = React$1.ComponentProps<'span'> & VariantProps<typeof badgeVariants> & {
   asChild?: boolean;

package/dist/core/button.d.mts

@@ -8,8 +8,8 @@ declare namespace button_d_exports {
   export { Button, Props, buttonVariants };
 }
 declare const buttonVariants: (props?: ({
-  variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
-  size?: "icon" | "default" | "xs" | "sm" | "lg" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+  variant?: "link" | "default" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined;
+  size?: "default" | "icon" | "xs" | "sm" | "lg" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
 } & class_variance_authority_types0.ClassProp) | undefined) => string;
 type Props = React$1.ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {
   asChild?: boolean;

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

@@ -275,15 +275,27 @@
   .right-5 {
     right: calc(var(--spacing) * 5);
   }
+  .right-full {
+    right: 100%;
+  }
+  .bottom-4 {
+    bottom: calc(var(--spacing) * 4);
+  }
   .bottom-5 {
     bottom: calc(var(--spacing) * 5);
   }
+  .bottom-full {
+    bottom: 100%;
+  }
   .left-0 {
     left: calc(var(--spacing) * 0);
   }
   .left-1\/2 {
     left: calc(1/2 * 100%);
   }
+  .left-4 {
+    left: calc(var(--spacing) * 4);
+  }
   .left-\[50\%\] {
     left: 50%;
   }
@@ -299,9 +311,6 @@
   .z-50 {
     z-index: 50;
   }
-  .z-100 {
-    z-index: 100;
-  }
   .z-10000 {
     z-index: 10000;
   }
@@ -404,6 +413,9 @@
   .block {
     display: block;
   }
+  .contents {
+    display: contents;
+  }
   .flex {
     display: flex;
   }
@@ -422,6 +434,9 @@
   .inline-flex {
     display: inline-flex;
   }
+  .table {
+    display: table;
+  }
   .field-sizing-content {
     field-sizing: content;
   }
@@ -717,9 +732,6 @@
   .cursor-pointer {
     cursor: pointer;
   }
-  .resize {
-    resize: both;
-  }
   .scroll-my-1 {
     scroll-margin-block: calc(var(--spacing) * 1);
   }
@@ -885,6 +897,10 @@
     border-top-left-radius: var(--radius);
     border-top-right-radius: var(--radius);
   }
+  .rounded-l-\[30px\]\! {
+    border-top-left-radius: 30px !important;
+    border-bottom-left-radius: 30px !important;
+  }
   .rounded-l-lg {
     border-top-left-radius: var(--radius);
     border-bottom-left-radius: var(--radius);
@@ -897,6 +913,10 @@
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
   }
+  .rounded-r-\[30px\]\! {
+    border-top-right-radius: 30px !important;
+    border-bottom-right-radius: 30px !important;
+  }
   .rounded-r-lg {
     border-top-right-radius: var(--radius);
     border-bottom-right-radius: var(--radius);
@@ -909,6 +929,10 @@
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
   }
+  .rounded-b-\[30px\]\! {
+    border-bottom-right-radius: 30px !important;
+    border-bottom-left-radius: 30px !important;
+  }
   .rounded-b-lg {
     border-bottom-right-radius: var(--radius);
     border-bottom-left-radius: var(--radius);
@@ -1380,6 +1404,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));
@@ -1617,6 +1644,42 @@
       position: absolute;
     }
   }
+  .before\:top-0 {
+    &::before {
+      content: var(--tw-content);
+      top: calc(var(--spacing) * 0);
+    }
+  }
+  .before\:top-1\/2 {
+    &::before {
+      content: var(--tw-content);
+      top: calc(1/2 * 100%);
+    }
+  }
+  .before\:right-0 {
+    &::before {
+      content: var(--tw-content);
+      right: calc(var(--spacing) * 0);
+    }
+  }
+  .before\:bottom-0 {
+    &::before {
+      content: var(--tw-content);
+      bottom: calc(var(--spacing) * 0);
+    }
+  }
+  .before\:left-0 {
+    &::before {
+      content: var(--tw-content);
+      left: calc(var(--spacing) * 0);
+    }
+  }
+  .before\:left-1\/2 {
+    &::before {
+      content: var(--tw-content);
+      left: calc(1/2 * 100%);
+    }
+  }
   .before\:h-0 {
     &::before {
       content: var(--tw-content);
@@ -1629,6 +1692,20 @@
       width: calc(var(--spacing) * 0);
     }
   }
+  .before\:-translate-x-1\/2 {
+    &::before {
+      content: var(--tw-content);
+      --tw-translate-x: calc(calc(1/2 * 100%) * -1);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
+  .before\:-translate-y-1\/2 {
+    &::before {
+      content: var(--tw-content);
+      --tw-translate-y: calc(calc(1/2 * 100%) * -1);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
   .before\:border-t-\[9px\] {
     &::before {
       content: var(--tw-content);
@@ -1723,12 +1800,66 @@
       inset-block: calc(var(--spacing) * 0);
     }
   }
+  .after\:-top-px {
+    &::after {
+      content: var(--tw-content);
+      top: -1px;
+    }
+  }
+  .after\:top-1\/2 {
+    &::after {
+      content: var(--tw-content);
+      top: calc(1/2 * 100%);
+    }
+  }
+  .after\:top-px {
+    &::after {
+      content: var(--tw-content);
+      top: 1px;
+    }
+  }
+  .after\:-right-px {
+    &::after {
+      content: var(--tw-content);
+      right: -1px;
+    }
+  }
+  .after\:right-px {
+    &::after {
+      content: var(--tw-content);
+      right: 1px;
+    }
+  }
+  .after\:-bottom-px {
+    &::after {
+      content: var(--tw-content);
+      bottom: -1px;
+    }
+  }
+  .after\:bottom-px {
+    &::after {
+      content: var(--tw-content);
+      bottom: 1px;
+    }
+  }
+  .after\:-left-px {
+    &::after {
+      content: var(--tw-content);
+      left: -1px;
+    }
+  }
   .after\:left-1\/2 {
     &::after {
       content: var(--tw-content);
       left: calc(1/2 * 100%);
     }
   }
+  .after\:left-px {
+    &::after {
+      content: var(--tw-content);
+      left: 1px;
+    }
+  }
   .after\:h-0 {
     &::after {
       content: var(--tw-content);
@@ -1754,6 +1885,13 @@
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
   }
+  .after\:-translate-y-1\/2 {
+    &::after {
+      content: var(--tw-content);
+      --tw-translate-y: calc(calc(1/2 * 100%) * -1);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
   .after\:border-t-8 {
     &::after {
       content: var(--tw-content);
@@ -3467,6 +3605,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;
@@ -3516,6 +3707,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.5.0",
+  "version": "3.7.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",