@jbpark/ui-kit 7.0.0 → 8.0.0

package/dist/style.css

@@ -2,12 +2,35 @@
 @layer properties;
 @layer theme {
   :root, :host {
-    --font-sans: var(--font-geist-sans);
-    --font-mono: var(--font-geist-mono);
+    --font-sans: var(--ui-font-sans, var(--font-geist-sans));
+    --font-mono: var(--ui-font-mono, var(--font-geist-mono));
     --color-red-400: oklch(70.4% .191 22.216);
+    --color-red-500: oklch(63.7% .237 25.331);
+    --color-orange-500: oklch(70.5% .213 47.604);
+    --color-orange-600: oklch(64.6% .222 41.116);
+    --color-amber-500: oklch(76.9% .188 70.08);
     --color-yellow-400: oklch(85.2% .199 91.936);
+    --color-yellow-500: oklch(79.5% .184 86.047);
+    --color-yellow-600: oklch(68.1% .162 75.834);
+    --color-lime-500: oklch(76.8% .233 130.85);
     --color-green-400: oklch(79.2% .209 151.711);
+    --color-green-500: oklch(72.3% .219 149.579);
+    --color-green-600: oklch(62.7% .194 149.214);
+    --color-cyan-500: oklch(71.5% .143 215.221);
     --color-blue-400: oklch(70.7% .165 254.624);
+    --color-blue-500: oklch(62.3% .214 259.815);
+    --color-blue-600: oklch(54.6% .245 262.881);
+    --color-indigo-500: oklch(58.5% .233 277.117);
+    --color-purple-500: oklch(62.7% .265 303.9);
+    --color-fuchsia-500: oklch(66.7% .295 322.15);
+    --color-pink-500: oklch(65.6% .241 354.308);
+    --color-gray-100: oklch(96.7% .003 264.542);
+    --color-gray-200: oklch(92.8% .006 264.531);
+    --color-gray-300: oklch(87.2% .01 258.338);
+    --color-gray-400: oklch(70.7% .022 261.325);
+    --color-gray-600: oklch(44.6% .03 256.802);
+    --color-gray-800: oklch(27.8% .033 256.848);
+    --color-gray-900: oklch(21% .034 264.665);
     --color-black: #000;
     --color-white: #fff;
     --spacing: .25rem;
@@ -80,7 +103,56 @@
   }
 }
 @layer components {
+  :is([data-slot="button"], [data-slot="badge"])[data-color="blue"] {
+    --preset-color: var(--color-blue-500);
+  }
+  :is([data-slot="button"], [data-slot="badge"])[data-color="purple"] {
+    --preset-color: var(--color-purple-500);
+  }
+  :is([data-slot="button"], [data-slot="badge"])[data-color="cyan"] {
+    --preset-color: var(--color-cyan-500);
+  }
+  :is([data-slot="button"], [data-slot="badge"])[data-color="green"] {
+    --preset-color: var(--color-green-500);
+  }
+  :is([data-slot="button"], [data-slot="badge"])[data-color="fuchsia"] {
+    --preset-color: var(--color-fuchsia-500);
+  }
+  :is([data-slot="button"], [data-slot="badge"])[data-color="pink"] {
+    --preset-color: var(--color-pink-500);
+  }
+  :is([data-slot="button"], [data-slot="badge"])[data-color="red"] {
+    --preset-color: var(--color-red-500);
+  }
+  :is([data-slot="button"], [data-slot="badge"])[data-color="orange"] {
+    --preset-color: var(--color-orange-500);
+  }
+  :is([data-slot="button"], [data-slot="badge"])[data-color="yellow"] {
+    --preset-color: var(--color-yellow-500);
+  }
+  :is([data-slot="button"], [data-slot="badge"])[data-color="indigo"] {
+    --preset-color: var(--color-indigo-500);
+  }
+  :is([data-slot="button"], [data-slot="badge"])[data-color="lime"] {
+    --preset-color: var(--color-lime-500);
+  }
+  :is([data-slot="button"], [data-slot="badge"])[data-color="amber"] {
+    --preset-color: var(--color-amber-500);
+  }
+  :is([data-slot="button"], [data-slot="badge"])[data-color="magenta"] {
+    --preset-color: var(--color-fuchsia-500);
+  }
+  :is([data-slot="button"], [data-slot="badge"])[data-color="geekblue"] {
+    --preset-color: var(--color-indigo-500);
+  }
+  :is([data-slot="button"], [data-slot="badge"])[data-color="gold"] {
+    --preset-color: var(--color-amber-500);
+  }
+  :is([data-slot="button"], [data-slot="badge"])[data-color="volcano"] {
+    --preset-color: var(--color-orange-600);
+  }
   [data-slot="button"][data-color] {
+    --btn-bg: var(--preset-color);
     --btn-fg: white;
     --btn-border: var(--btn-bg);
     --btn-bg-hover: var(--btn-bg);
@@ -92,7 +164,7 @@
       --btn-bg-active: color-mix(in oklch, var(--btn-bg), black 22%);
     }
   }
-  [data-slot="button"][data-color="yellow"], [data-slot="button"][data-color="lime"], [data-slot="button"][data-color="gold"] {
+  [data-slot="button"][data-color="yellow"], [data-slot="button"][data-color="lime"], [data-slot="button"][data-color="amber"], [data-slot="button"][data-color="gold"] {
     --btn-fg: black;
   }
   [data-slot="button"][data-color="default"] {
@@ -106,46 +178,8 @@
   [data-slot="button"][data-color="danger"] {
     --btn-bg: var(--destructive);
   }
-  [data-slot="button"][data-color="blue"] {
-    --btn-bg: #3b82f6;
-  }
-  [data-slot="button"][data-color="purple"] {
-    --btn-bg: #a855f7;
-  }
-  [data-slot="button"][data-color="cyan"] {
-    --btn-bg: #06b6d4;
-  }
-  [data-slot="button"][data-color="green"] {
-    --btn-bg: #22c55e;
-  }
-  [data-slot="button"][data-color="magenta"] {
-    --btn-bg: #d946ef;
-  }
-  [data-slot="button"][data-color="pink"] {
-    --btn-bg: #ec4899;
-  }
-  [data-slot="button"][data-color="red"] {
-    --btn-bg: #ef4444;
-  }
-  [data-slot="button"][data-color="orange"] {
-    --btn-bg: #f97316;
-  }
-  [data-slot="button"][data-color="yellow"] {
-    --btn-bg: #eab308;
-  }
-  [data-slot="button"][data-color="volcano"] {
-    --btn-bg: #ea580c;
-  }
-  [data-slot="button"][data-color="geekblue"] {
-    --btn-bg: #6366f1;
-  }
-  [data-slot="button"][data-color="lime"] {
-    --btn-bg: #84cc16;
-  }
-  [data-slot="button"][data-color="gold"] {
-    --btn-bg: #f59e0b;
-  }
   [data-slot="badge"][data-color] {
+    --tag-bg: var(--preset-color);
     --tag-fg: var(--tag-bg);
     --tag-tint: var(--tag-bg);
     @supports (color: color-mix(in lab, red, red)) {
@@ -167,57 +201,18 @@
     --tag-bg: var(--destructive);
   }
   [data-slot="badge"][data-color="success"] {
-    --tag-bg: oklch(72.3% .219 149.579);
-    --tag-fg: oklch(62.7% .194 149.214);
+    --tag-bg: var(--color-green-500);
+    --tag-fg: var(--color-green-600);
   }
   [data-slot="badge"][data-color="warning"] {
-    --tag-bg: oklch(79.5% .184 86.047);
-    --tag-fg: oklch(68.1% .162 75.834);
+    --tag-bg: var(--color-yellow-500);
+    --tag-fg: var(--color-yellow-600);
   }
   :is(.dark, [data-theme="dark"]) [data-slot="badge"][data-color="success"] {
-    --tag-fg: oklch(79.2% .209 151.711);
+    --tag-fg: var(--color-green-400);
   }
   :is(.dark, [data-theme="dark"]) [data-slot="badge"][data-color="warning"] {
-    --tag-fg: oklch(85.2% .199 91.936);
-  }
-  [data-slot="badge"][data-color="blue"] {
-    --tag-bg: #3b82f6;
-  }
-  [data-slot="badge"][data-color="purple"] {
-    --tag-bg: #a855f7;
-  }
-  [data-slot="badge"][data-color="cyan"] {
-    --tag-bg: #06b6d4;
-  }
-  [data-slot="badge"][data-color="green"] {
-    --tag-bg: #22c55e;
-  }
-  [data-slot="badge"][data-color="magenta"] {
-    --tag-bg: #d946ef;
-  }
-  [data-slot="badge"][data-color="pink"] {
-    --tag-bg: #ec4899;
-  }
-  [data-slot="badge"][data-color="red"] {
-    --tag-bg: #ef4444;
-  }
-  [data-slot="badge"][data-color="orange"] {
-    --tag-bg: #f97316;
-  }
-  [data-slot="badge"][data-color="yellow"] {
-    --tag-bg: #eab308;
-  }
-  [data-slot="badge"][data-color="volcano"] {
-    --tag-bg: #ea580c;
-  }
-  [data-slot="badge"][data-color="geekblue"] {
-    --tag-bg: #6366f1;
-  }
-  [data-slot="badge"][data-color="lime"] {
-    --tag-bg: #84cc16;
-  }
-  [data-slot="badge"][data-color="gold"] {
-    --tag-bg: #f59e0b;
+    --tag-fg: var(--color-yellow-400);
   }
   [data-slot="col"] {
     flex-basis: calc(var(--col-span-xs) / 24 * 100%);
@@ -629,6 +624,9 @@
   .min-h-16 {
     min-height: calc(var(--spacing) * 16);
   }
+  .min-h-20 {
+    min-height: calc(var(--spacing) * 20);
+  }
   .min-h-screen {
     min-height: 100vh;
   }
@@ -653,9 +651,15 @@
   .w-15 {
     width: calc(var(--spacing) * 15);
   }
+  .w-20 {
+    width: calc(var(--spacing) * 20);
+  }
   .w-25 {
     width: calc(var(--spacing) * 25);
   }
+  .w-28 {
+    width: calc(var(--spacing) * 28);
+  }
   .w-48 {
     width: calc(var(--spacing) * 48);
   }
@@ -1127,6 +1131,9 @@
   .border-current {
     border-color: currentcolor;
   }
+  .border-gray-200 {
+    border-color: var(--color-gray-200);
+  }
   .border-input {
     border-color: var(--input);
   }
@@ -1172,6 +1179,9 @@
   .bg-card {
     background-color: var(--card);
   }
+  .bg-chart-1 {
+    background-color: var(--chart-1);
+  }
   .bg-destructive {
     background-color: var(--destructive);
   }
@@ -1199,9 +1209,15 @@
   .bg-secondary {
     background-color: var(--secondary);
   }
+  .bg-sidebar {
+    background-color: var(--sidebar);
+  }
   .bg-transparent {
     background-color: transparent;
   }
+  .bg-white {
+    background-color: var(--color-white);
+  }
   .fill-primary {
     fill: var(--primary);
   }
@@ -1323,7 +1339,7 @@
     text-align: start;
   }
   .font-mono {
-    font-family: var(--font-geist-mono);
+    font-family: var(--ui-font-mono, var(--font-geist-mono));
   }
   .text-2xl {
     font-size: var(--text-2xl);
@@ -1431,6 +1447,9 @@
   .text-foreground {
     color: var(--foreground);
   }
+  .text-gray-800 {
+    color: var(--color-gray-800);
+  }
   .text-green-400 {
     color: var(--color-green-400);
   }
@@ -1461,6 +1480,9 @@
   .lowercase {
     text-transform: lowercase;
   }
+  .italic {
+    font-style: italic;
+  }
   .underline {
     text-decoration-line: underline;
   }
@@ -1534,6 +1556,10 @@
     outline-style: var(--tw-outline-style);
     outline-width: 1px;
   }
+  .blur {
+    --tw-blur: blur(8px);
+    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,);
+  }
   .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,);
   }
@@ -2644,6 +2670,192 @@
       background-color: color-mix(in oklab, var(--input) 80%, transparent);
     }
   }
+  .\[\&_\.tiptap\]\:outline-none .tiptap {
+    --tw-outline-style: none;
+    outline-style: none;
+  }
+  .\[\&_\.tiptap_a\]\:text-blue-600 .tiptap a {
+    color: var(--color-blue-600);
+  }
+  .\[\&_\.tiptap_a\]\:underline .tiptap a {
+    text-decoration-line: underline;
+  }
+  .\[\&_\.tiptap_a\]\:underline-offset-2 .tiptap a {
+    text-underline-offset: 2px;
+  }
+  .\[\&_\.tiptap_blockquote\]\:my-2 .tiptap blockquote {
+    margin-block: calc(var(--spacing) * 2);
+  }
+  .\[\&_\.tiptap_blockquote\]\:border-l-2 .tiptap blockquote {
+    border-left-style: var(--tw-border-style);
+    border-left-width: 2px;
+  }
+  .\[\&_\.tiptap_blockquote\]\:border-gray-300 .tiptap blockquote {
+    border-color: var(--color-gray-300);
+  }
+  .\[\&_\.tiptap_blockquote\]\:pl-3 .tiptap blockquote {
+    padding-left: calc(var(--spacing) * 3);
+  }
+  .\[\&_\.tiptap_blockquote\]\:text-gray-600 .tiptap blockquote {
+    color: var(--color-gray-600);
+  }
+  .\[\&_\.tiptap_blockquote\]\:italic .tiptap blockquote {
+    font-style: italic;
+  }
+  .\[\&_\.tiptap_code\]\:rounded .tiptap code {
+    border-radius: .25rem;
+  }
+  .\[\&_\.tiptap_code\]\:bg-gray-100 .tiptap code {
+    background-color: var(--color-gray-100);
+  }
+  .\[\&_\.tiptap_code\]\:px-1 .tiptap code {
+    padding-inline: var(--spacing);
+  }
+  .\[\&_\.tiptap_code\]\:py-0\.5 .tiptap code {
+    padding-block: calc(var(--spacing) * 0.5);
+  }
+  .\[\&_\.tiptap_code\]\:font-mono .tiptap code {
+    font-family: var(--ui-font-mono, var(--font-geist-mono));
+  }
+  .\[\&_\.tiptap_code\]\:text-\[0\.85em\] .tiptap code {
+    font-size: 0.85em;
+  }
+  .\[\&_\.tiptap_h1\]\:mt-6 .tiptap h1 {
+    margin-top: calc(var(--spacing) * 6);
+  }
+  .\[\&_\.tiptap_h1\]\:mb-2 .tiptap h1 {
+    margin-bottom: calc(var(--spacing) * 2);
+  }
+  .\[\&_\.tiptap_h1\]\:text-2xl .tiptap h1 {
+    font-size: var(--text-2xl);
+    line-height: var(--tw-leading, var(--text-2xl--line-height));
+  }
+  .\[\&_\.tiptap_h1\]\:font-bold .tiptap h1 {
+    --tw-font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-bold);
+  }
+  .\[\&_\.tiptap_h2\]\:mt-5 .tiptap h2 {
+    margin-top: calc(var(--spacing) * 5);
+  }
+  .\[\&_\.tiptap_h2\]\:mb-2 .tiptap h2 {
+    margin-bottom: calc(var(--spacing) * 2);
+  }
+  .\[\&_\.tiptap_h2\]\:text-xl .tiptap h2 {
+    font-size: var(--text-xl);
+    line-height: var(--tw-leading, var(--text-xl--line-height));
+  }
+  .\[\&_\.tiptap_h2\]\:font-bold .tiptap h2 {
+    --tw-font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-bold);
+  }
+  .\[\&_\.tiptap_h3\]\:mt-4 .tiptap h3 {
+    margin-top: calc(var(--spacing) * 4);
+  }
+  .\[\&_\.tiptap_h3\]\:mb-2 .tiptap h3 {
+    margin-bottom: calc(var(--spacing) * 2);
+  }
+  .\[\&_\.tiptap_h3\]\:text-lg .tiptap h3 {
+    font-size: var(--text-lg);
+    line-height: var(--tw-leading, var(--text-lg--line-height));
+  }
+  .\[\&_\.tiptap_h3\]\:font-semibold .tiptap h3 {
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+  }
+  .\[\&_\.tiptap_h4\]\:mt-3 .tiptap h4 {
+    margin-top: calc(var(--spacing) * 3);
+  }
+  .\[\&_\.tiptap_h4\]\:mb-1 .tiptap h4 {
+    margin-bottom: var(--spacing);
+  }
+  .\[\&_\.tiptap_h4\]\:text-base .tiptap h4 {
+    font-size: var(--text-base);
+    line-height: var(--tw-leading, var(--text-base--line-height));
+  }
+  .\[\&_\.tiptap_h4\]\:font-semibold .tiptap h4 {
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+  }
+  .\[\&_\.tiptap_hr\]\:my-4 .tiptap hr {
+    margin-block: calc(var(--spacing) * 4);
+  }
+  .\[\&_\.tiptap_hr\]\:border-gray-200 .tiptap hr {
+    border-color: var(--color-gray-200);
+  }
+  .\[\&_\.tiptap_li\]\:my-1 .tiptap li {
+    margin-block: var(--spacing);
+  }
+  .\[\&_\.tiptap_ol\]\:my-2 .tiptap ol {
+    margin-block: calc(var(--spacing) * 2);
+  }
+  .\[\&_\.tiptap_ol\]\:list-decimal .tiptap ol {
+    list-style-type: decimal;
+  }
+  .\[\&_\.tiptap_ol\]\:pl-5 .tiptap ol {
+    padding-left: calc(var(--spacing) * 5);
+  }
+  .\[\&_\.tiptap_p\.is-editor-empty\:first-child\:\:before\]\:pointer-events-none .tiptap p.is-editor-empty:first-child::before {
+    pointer-events: none;
+  }
+  .\[\&_\.tiptap_p\.is-editor-empty\:first-child\:\:before\]\:float-left .tiptap p.is-editor-empty:first-child::before {
+    float: left;
+  }
+  .\[\&_\.tiptap_p\.is-editor-empty\:first-child\:\:before\]\:h-0 .tiptap p.is-editor-empty:first-child::before {
+    height: 0px;
+  }
+  .\[\&_\.tiptap_p\.is-editor-empty\:first-child\:\:before\]\:text-gray-400 .tiptap p.is-editor-empty:first-child::before {
+    color: var(--color-gray-400);
+  }
+  .\[\&_\.tiptap_p\.is-editor-empty\:first-child\:\:before\]\:content-\[attr\(data-placeholder\)\] .tiptap p.is-editor-empty:first-child::before {
+    --tw-content: attr(data-placeholder);
+    content: var(--tw-content);
+  }
+  .\[\&_\.tiptap_pre\]\:my-2 .tiptap pre {
+    margin-block: calc(var(--spacing) * 2);
+  }
+  .\[\&_\.tiptap_pre\]\:overflow-x-auto .tiptap pre {
+    overflow-x: auto;
+  }
+  .\[\&_\.tiptap_pre\]\:rounded .tiptap pre {
+    border-radius: .25rem;
+  }
+  .\[\&_\.tiptap_pre\]\:bg-gray-900 .tiptap pre {
+    background-color: var(--color-gray-900);
+  }
+  .\[\&_\.tiptap_pre\]\:p-3 .tiptap pre {
+    padding: calc(var(--spacing) * 3);
+  }
+  .\[\&_\.tiptap_pre\]\:font-mono .tiptap pre {
+    font-family: var(--ui-font-mono, var(--font-geist-mono));
+  }
+  .\[\&_\.tiptap_pre\]\:text-sm .tiptap pre {
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+  }
+  .\[\&_\.tiptap_pre\]\:text-gray-100 .tiptap pre {
+    color: var(--color-gray-100);
+  }
+  .\[\&_\.tiptap_pre_code\]\:bg-transparent .tiptap pre code {
+    background-color: transparent;
+  }
+  .\[\&_\.tiptap_pre_code\]\:p-0 .tiptap pre code {
+    padding: 0px;
+  }
+  .\[\&_\.tiptap_pre_code\]\:text-inherit .tiptap pre code {
+    color: inherit;
+  }
+  .\[\&_\.tiptap_ul\]\:my-2 .tiptap ul {
+    margin-block: calc(var(--spacing) * 2);
+  }
+  .\[\&_\.tiptap_ul\]\:list-disc .tiptap ul {
+    list-style-type: disc;
+  }
+  .\[\&_\.tiptap_ul\]\:pl-5 .tiptap ul {
+    padding-left: calc(var(--spacing) * 5);
+  }
+  .\[\&_\.tiptap\>\*\:first-child\]\:mt-0 .tiptap > :first-child {
+    margin-top: 0px;
+  }
   .\[\&_svg\]\:pointer-events-none svg {
     pointer-events: none;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbpark/ui-kit",
-  "version": "7.0.0",
+  "version": "8.0.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",
@@ -54,6 +54,11 @@
       "import": "./dist/Button.mjs",
       "default": "./dist/Button.mjs"
     },
+    "./CodeEditor": {
+      "types": "./dist/CodeEditor.d.mts",
+      "import": "./dist/CodeEditor.mjs",
+      "default": "./dist/CodeEditor.mjs"
+    },
     "./Tag": {
       "types": "./dist/Tag.d.mts",
       "import": "./dist/Tag.mjs",
@@ -113,6 +118,8 @@
     "postpublish": "node scripts/restore-package.mjs"
   },
   "devDependencies": {
+    "@codemirror/lang-javascript": "^6.2.5",
+    "@codemirror/merge": "^6.12.2",
     "@repo/eslint-config": "workspace:*",
     "@repo/typescript-config": "workspace:*",
     "@tailwindcss/postcss": "^4.3.3",
@@ -120,6 +127,9 @@
     "@types/node": "^26.2.0",
     "@types/react": "19.2.18",
     "@types/react-dom": "19.2.4",
+    "@uiw/codemirror-theme-vscode": "^4.25.11",
+    "@uiw/react-codemirror": "^4.25.11",
+    "codemirror": "^6.0.0",
     "eslint": "^9.39.5",
     "postcss": "^8.5.26",
     "rollup-plugin-postcss": "^4.0.2",
@@ -143,6 +153,11 @@
     "@radix-ui/react-slider": "^1.4.7",
     "@radix-ui/react-slot": "^1.3.3",
     "@radix-ui/react-switch": "^1.3.7",
+    "@tiptap/core": "^3.30.1",
+    "@tiptap/extension-placeholder": "^3.30.1",
+    "@tiptap/extension-text-style": "^3.30.1",
+    "@tiptap/react": "^3.30.1",
+    "@tiptap/starter-kit": "^3.30.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "date-fns": "^4.4.0",
@@ -157,7 +172,29 @@
     "vaul": "^1.1.2"
   },
   "peerDependencies": {
+    "@codemirror/lang-javascript": "^6.2.5",
+    "@codemirror/merge": "^6.12.2",
+    "@uiw/codemirror-theme-vscode": "^4.25.11",
+    "@uiw/react-codemirror": "^4.25.11",
+    "codemirror": "^6.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@codemirror/lang-javascript": {
+      "optional": true
+    },
+    "@codemirror/merge": {
+      "optional": true
+    },
+    "@uiw/codemirror-theme-vscode": {
+      "optional": true
+    },
+    "@uiw/react-codemirror": {
+      "optional": true
+    },
+    "codemirror": {
+      "optional": true
+    }
   }
 }