@jbpark/ui-kit 2.5.0 → 2.8.0

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/{ConfigProvider → Config}/types.d.mts

@@ -1,4 +1,4 @@
-//#region src/providers/ConfigProvider/types.d.ts
+//#region src/providers/Config/types.d.ts
 interface ThemeToken {
   colorPrimary?: string;
   colorPrimaryForeground?: string;
@@ -24,9 +24,9 @@ interface ThemeConfig {
   token?: ThemeToken;
   dark?: boolean;
 }
-interface ConfigContextValue {
+interface ContextValue {
   theme: ThemeConfig;
 }
 //#endregion
-export { ConfigContextValue, ThemeConfig, ThemeToken };
+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

@@ -1,3 +1,3 @@
-import { ThemeConfig, ThemeToken } from "./ConfigProvider/types.mjs";
-import { useConfig } from "./ConfigProvider/ConfigContext.mjs";
-import { ConfigProvider, Props } from "./ConfigProvider/index.mjs";
+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

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

package/dist/style.css

@@ -5,7 +5,11 @@
   :root, :host {
     --color-red-400: oklch(70.4% 0.191 22.216);
     --color-yellow-400: oklch(85.2% 0.199 91.936);
+    --color-yellow-500: oklch(79.5% 0.184 86.047);
+    --color-yellow-600: oklch(68.1% 0.162 75.834);
     --color-green-400: oklch(79.2% 0.209 151.711);
+    --color-green-500: oklch(72.3% 0.219 149.579);
+    --color-green-600: oklch(62.7% 0.194 149.214);
     --color-blue-400: oklch(70.7% 0.165 254.624);
     --color-gray-200: oklch(92.8% 0.006 264.531);
     --color-black: #000;
@@ -239,9 +243,6 @@
   .top-1\/2 {
     top: calc(1/2 * 100%);
   }
-  .top-3 {
-    top: calc(var(--spacing) * 3);
-  }
   .top-4 {
     top: calc(var(--spacing) * 4);
   }
@@ -290,6 +291,9 @@
   .z-0 {
     z-index: 0;
   }
+  .z-10 {
+    z-index: 10;
+  }
   .z-50 {
     z-index: 50;
   }
@@ -420,6 +424,10 @@
     width: calc(var(--spacing) * 2);
     height: calc(var(--spacing) * 2);
   }
+  .size-2\.5 {
+    width: calc(var(--spacing) * 2.5);
+    height: calc(var(--spacing) * 2.5);
+  }
   .size-3\.5 {
     width: calc(var(--spacing) * 3.5);
     height: calc(var(--spacing) * 3.5);
@@ -482,6 +490,9 @@
   .h-12 {
     height: calc(var(--spacing) * 12);
   }
+  .h-16 {
+    height: calc(var(--spacing) * 16);
+  }
   .h-32 {
     height: calc(var(--spacing) * 32);
   }
@@ -503,9 +514,15 @@
   .max-h-\(--radix-select-content-available-height\) {
     max-height: var(--radix-select-content-available-height);
   }
+  .min-h-0 {
+    min-height: calc(var(--spacing) * 0);
+  }
   .min-h-16 {
     min-height: calc(var(--spacing) * 16);
   }
+  .w-3 {
+    width: calc(var(--spacing) * 3);
+  }
   .w-4 {
     width: calc(var(--spacing) * 4);
   }
@@ -527,9 +544,6 @@
   .w-48 {
     width: calc(var(--spacing) * 48);
   }
-  .w-50 {
-    width: calc(var(--spacing) * 50);
-  }
   .w-60 {
     width: calc(var(--spacing) * 60);
   }
@@ -554,6 +568,9 @@
   .w-full {
     width: 100%;
   }
+  .w-px {
+    width: 1px;
+  }
   .max-w-48 {
     max-width: calc(var(--spacing) * 48);
   }
@@ -693,9 +710,6 @@
   .place-content-center {
     place-content: center;
   }
-  .content-start {
-    align-content: flex-start;
-  }
   .items-baseline {
     align-items: baseline;
   }
@@ -861,12 +875,27 @@
       border-color: color-mix(in oklch,var(--btn-border),transparent 50%);
     }
   }
+  .border-border {
+    border-color: var(--border);
+  }
+  .border-border\/60 {
+    border-color: var(--border);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--border) 60%, transparent);
+    }
+  }
   .border-current {
     border-color: currentcolor;
   }
+  .border-destructive {
+    border-color: var(--destructive);
+  }
   .border-gray-200 {
     border-color: var(--color-gray-200);
   }
+  .border-green-500 {
+    border-color: var(--color-green-500);
+  }
   .border-input {
     border-color: var(--input);
   }
@@ -876,6 +905,9 @@
   .border-transparent {
     border-color: transparent;
   }
+  .border-yellow-500 {
+    border-color: var(--color-yellow-500);
+  }
   .bg-\(--btn-bg\) {
     background-color: var(--btn-bg);
   }
@@ -906,9 +938,24 @@
   .bg-border {
     background-color: var(--border);
   }
+  .bg-card {
+    background-color: var(--card);
+  }
   .bg-destructive {
     background-color: var(--destructive);
   }
+  .bg-destructive\/10 {
+    background-color: var(--destructive);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--destructive) 10%, transparent);
+    }
+  }
+  .bg-green-500\/10 {
+    background-color: color-mix(in srgb, oklch(72.3% 0.219 149.579) 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-green-500) 10%, transparent);
+    }
+  }
   .bg-inherit {
     background-color: inherit;
   }
@@ -921,6 +968,12 @@
   .bg-primary {
     background-color: var(--primary);
   }
+  .bg-primary\/10 {
+    background-color: var(--primary);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--primary) 10%, transparent);
+    }
+  }
   .bg-primary\/20 {
     background-color: var(--primary);
     @supports (color: color-mix(in lab, red, red)) {
@@ -936,6 +989,12 @@
   .bg-white {
     background-color: var(--color-white);
   }
+  .bg-yellow-500\/10 {
+    background-color: color-mix(in srgb, oklch(79.5% 0.184 86.047) 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-yellow-500) 10%, transparent);
+    }
+  }
   .fill-primary {
     fill: var(--primary);
   }
@@ -966,6 +1025,9 @@
   .px-2 {
     padding-inline: calc(var(--spacing) * 2);
   }
+  .px-2\.5 {
+    padding-inline: calc(var(--spacing) * 2.5);
+  }
   .px-3 {
     padding-inline: calc(var(--spacing) * 3);
   }
@@ -1125,6 +1187,9 @@
   .text-blue-400 {
     color: var(--color-blue-400);
   }
+  .text-card-foreground {
+    color: var(--card-foreground);
+  }
   .text-current {
     color: currentcolor;
   }
@@ -1137,6 +1202,9 @@
   .text-green-400 {
     color: var(--color-green-400);
   }
+  .text-green-600 {
+    color: var(--color-green-600);
+  }
   .text-muted-foreground {
     color: var(--muted-foreground);
   }
@@ -1161,6 +1229,9 @@
   .text-yellow-400 {
     color: var(--color-yellow-400);
   }
+  .text-yellow-600 {
+    color: var(--color-yellow-600);
+  }
   .underline {
     text-decoration-line: underline;
   }
@@ -1248,11 +1319,21 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-\[width\] {
+    transition-property: width;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .transition-all {
     transition-property: all;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-colors {
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .transition-opacity {
     transition-property: opacity;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -1573,6 +1654,12 @@
       position: absolute;
     }
   }
+  .after\:inset-y-0 {
+    &::after {
+      content: var(--tw-content);
+      inset-block: calc(var(--spacing) * 0);
+    }
+  }
   .after\:-top-px {
     &::after {
       content: var(--tw-content);
@@ -1645,6 +1732,12 @@
       width: calc(var(--spacing) * 0);
     }
   }
+  .after\:w-1 {
+    &::after {
+      content: var(--tw-content);
+      width: calc(var(--spacing) * 1);
+    }
+  }
   .after\:-translate-x-1\/2 {
     &::after {
       content: var(--tw-content);
@@ -1773,6 +1866,26 @@
       }
     }
   }
+  .hover\:bg-black\/5 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, #000 5%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-black) 5%, transparent);
+        }
+      }
+    }
+  }
+  .hover\:bg-border\/80 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--border);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--border) 80%, transparent);
+        }
+      }
+    }
+  }
   .hover\:bg-destructive\/90 {
     &:hover {
       @media (hover: hover) {
@@ -1907,6 +2020,12 @@
       border-color: var(--ring);
     }
   }
+  .focus-visible\:ring-1 {
+    &:focus-visible {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
   .focus-visible\:ring-\[3px\] {
     &:focus-visible {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
@@ -1921,6 +2040,11 @@
       }
     }
   }
+  .focus-visible\:ring-ring {
+    &:focus-visible {
+      --tw-ring-color: var(--ring);
+    }
+  }
   .focus-visible\:ring-ring\/50 {
     &:focus-visible {
       --tw-ring-color: var(--ring);
@@ -1929,6 +2053,22 @@
       }
     }
   }
+  .focus-visible\:ring-offset-1 {
+    &:focus-visible {
+      --tw-ring-offset-width: 1px;
+      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+    }
+  }
+  .focus-visible\:outline-hidden {
+    &:focus-visible {
+      --tw-outline-style: none;
+      outline-style: none;
+      @media (forced-colors: active) {
+        outline: 2px solid transparent;
+        outline-offset: 2px;
+      }
+    }
+  }
   .active\:bg-\(--btn-bg-active\) {
     &:active {
       background-color: var(--btn-bg-active);
@@ -2031,6 +2171,68 @@
       }
     }
   }
+  .aria-\[orientation\=horizontal\]\:h-px {
+    &[aria-orientation="horizontal"] {
+      height: 1px;
+    }
+  }
+  .aria-\[orientation\=horizontal\]\:w-full {
+    &[aria-orientation="horizontal"] {
+      width: 100%;
+    }
+  }
+  .aria-\[orientation\=horizontal\]\:after\:left-0 {
+    &[aria-orientation="horizontal"] {
+      &::after {
+        content: var(--tw-content);
+        left: calc(var(--spacing) * 0);
+      }
+    }
+  }
+  .aria-\[orientation\=horizontal\]\:after\:h-1 {
+    &[aria-orientation="horizontal"] {
+      &::after {
+        content: var(--tw-content);
+        height: calc(var(--spacing) * 1);
+      }
+    }
+  }
+  .aria-\[orientation\=horizontal\]\:after\:w-full {
+    &[aria-orientation="horizontal"] {
+      &::after {
+        content: var(--tw-content);
+        width: 100%;
+      }
+    }
+  }
+  .aria-\[orientation\=horizontal\]\:after\:translate-x-0 {
+    &[aria-orientation="horizontal"] {
+      &::after {
+        content: var(--tw-content);
+        --tw-translate-x: calc(var(--spacing) * 0);
+        translate: var(--tw-translate-x) var(--tw-translate-y);
+      }
+    }
+  }
+  .aria-\[orientation\=horizontal\]\:after\:-translate-y-1\/2 {
+    &[aria-orientation="horizontal"] {
+      &::after {
+        content: var(--tw-content);
+        --tw-translate-y: calc(calc(1/2 * 100%) * -1);
+        translate: var(--tw-translate-x) var(--tw-translate-y);
+      }
+    }
+  }
+  .aria-\[orientation\=vertical\]\:flex-col {
+    &[aria-orientation="vertical"] {
+      flex-direction: column;
+    }
+  }
+  .data-separator-active\:bg-border {
+    &[data-separator-active] {
+      background-color: var(--border);
+    }
+  }
   .data-\[disabled\]\:pointer-events-none {
     &[data-disabled] {
       pointer-events: none;
@@ -2434,6 +2636,16 @@
       }
     }
   }
+  .dark\:text-green-400 {
+    &:is(.dark *) {
+      color: var(--color-green-400);
+    }
+  }
+  .dark\:text-yellow-400 {
+    &:is(.dark *) {
+      color: var(--color-yellow-400);
+    }
+  }
   .dark\:hover\:bg-accent\/50 {
     &:is(.dark *) {
       &:hover {
@@ -2661,6 +2873,11 @@
       color: var(--primary);
     }
   }
+  .\[\&\[aria-orientation\=horizontal\]\>div\]\:rotate-90 {
+    &[aria-orientation=horizontal]>div {
+      rotate: 90deg;
+    }
+  }
   .\[\&\[data-state\=open\]\>svg\]\:rotate-180 {
     &[data-state=open]>svg {
       rotate: 180deg;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbpark/ui-kit",
-  "version": "2.5.0",
+  "version": "2.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",
@@ -76,7 +76,17 @@
       "default": "./dist/style.css"
     }
   },
+  "scripts": {
+    "build": "tsdown",
+    "lint": "eslint .",
+    "generate:component": "turbo gen react-component",
+    "check-types": "tsc -b",
+    "prepublishOnly": "node scripts/prepare-publish.mjs",
+    "postpublish": "node scripts/restore-package.mjs"
+  },
   "devDependencies": {
+    "@repo/eslint-config": "workspace:*",
+    "@repo/typescript-config": "workspace:*",
     "@tailwindcss/postcss": "^4.1.18",
     "@types/node": "^22.15.3",
     "@types/react": "19.1.0",
@@ -84,9 +94,7 @@
     "eslint": "^9.34.0",
     "rollup-plugin-postcss": "^4.0.2",
     "tsdown": "^0.20.3",
-    "typescript": "5.9.2",
-    "@repo/eslint-config": "0.0.0",
-    "@repo/typescript-config": "0.0.0"
+    "typescript": "5.9.2"
   },
   "dependencies": {
     "@gsap/react": "^2.1.2",
@@ -102,11 +110,13 @@
     "@uidotdev/usehooks": "^2.4.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "gsap": "^3.15.0",
     "lucide-react": "^0.542.0",
     "motion": "^12.23.12",
     "postcss": "^8.4.31",
     "radix-ui": "^1.4.3",
     "react-colorful": "^5.6.1",
+    "react-resizable-panels": "^4.10.0",
     "react-use": "^17.6.0",
     "swiper": "^11.2.10",
     "tailwind-merge": "^3.3.1",
@@ -117,11 +127,5 @@
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
-  },
-  "scripts": {
-    "build": "tsdown",
-    "lint": "eslint .",
-    "generate:component": "turbo gen react-component",
-    "check-types": "tsc -b"
   }
-}
+}