@deepnoid/ui 1.0.19 → 1.0.21

package/README.md

@@ -134,6 +134,19 @@ release 브랜치에 머지했을 때 배포 파이프라인 실행되도록 스
 
 - [./.gitlab-ci.yml](./.gitlab-ci.yml) 파일 참고
 
+## Claude Code 스킬
+
+`@deepnoid/ui` 컴포넌트를 AI 에이전트(Claude Code, Cursor 등)와 함께 사용할 때, 스킬을 설치하면 컴포넌트 사용법/규칙/토큰을 자동으로 안내받을 수 있습니다.
+
+```bash
+# 소비 프로젝트 루트에서
+cp -r node_modules/@deepnoid/ui/skills/deepnoid-ui .claude/skills/
+```
+
+설치 후 `@deepnoid/ui` 관련 질문 시 자동으로 가이드가 활성화됩니다.
+
+> 스킬 업데이트: `yarn upgrade @deepnoid/ui` 후 위 `cp` 명령을 다시 실행
+
 ## 기타
 
 [turborepo](https://turbo.build/)를 활용하여 프로젝트를 구성했으니 내용 참고해주시기 바랍니다.

package/dist/{chunk-ZUNOPH7C.mjs → chunk-2J4MNIMS.mjs}

@@ -36,7 +36,7 @@ function WheelColumn({ list, value, onChange }) {
   }, [idx]);
   return /* @__PURE__ */ jsxs("div", { className: "relative h-[94px] w-[40px]", children: [
     /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute top-[30px] left-1/2 h-[34px] w-[40px] -translate-x-1/2 rounded-[10px] shadow-[inset_0_0_0_1.5px_var(--color-primary-light)]" }),
-    /* @__PURE__ */ jsxs("div", { ref, className: "scrollbar-none relative h-full overflow-y-scroll py-[0] select-none", children: [
+    /* @__PURE__ */ jsxs("div", { ref, className: "scrollbar-none relative h-full overflow-hidden py-[0] select-none", children: [
       /* @__PURE__ */ jsx("div", { style: { height: ITEM_HEIGHT } }),
       list.map((v, i) => {
         const highlight = i === idx;

package/dist/{chunk-Q5T3XRA3.mjs → chunk-2WAQRWST.mjs}

@@ -26,7 +26,7 @@ var buttonBaseStyle = tv({
     variant: {
       solid: {},
       soft: {},
-      outline: { base: ["bg-transparent"] },
+      outline: { base: ["bg-body-background"] },
       ghost: {}
     },
     color: {
@@ -38,6 +38,12 @@ var buttonBaseStyle = tv({
       warning: {},
       danger: {}
     },
+    size: {
+      sm: {},
+      md: {},
+      lg: {},
+      xl: {}
+    },
     disabled: {
       true: {
         base: ["!bg-neutral-soft", "!border-neutral-soft", "!text-neutral-light", "pointer-events-none"]
@@ -45,7 +51,7 @@ var buttonBaseStyle = tv({
     },
     isInGroup: {
       true: {
-        base: ["!rounded-none", "[&:not(:first-child)]:border-l-0"]
+        base: ["!rounded-none"]
       }
     }
   },
@@ -139,85 +145,49 @@ var buttonBaseStyle = tv({
       variant: "soft",
       color: "primary",
       class: {
-        base: [
-          "text-primary-main",
-          "bg-primary-soft",
-          "border-primary-soft",
-          "hover:border-primary-light",
-          "active:bg-primary-light"
-        ]
+        base: ["text-primary-main", "bg-primary-soft", "hover:border-primary-light", "active:bg-primary-light"]
       }
     },
     {
       variant: "soft",
       color: "secondary",
       class: {
-        base: [
-          "text-secondary-main",
-          "bg-secondary-soft",
-          "border-secondary-soft",
-          "hover:border-secondary-light",
-          "active:bg-secondary-light"
-        ]
+        base: ["text-secondary-main", "bg-secondary-soft", "hover:border-secondary-light", "active:bg-secondary-light"]
       }
     },
     {
       variant: "soft",
       color: "neutral",
       class: {
-        base: [
-          "text-neutral-main",
-          "bg-neutral-soft",
-          "border-neutral-soft",
-          "hover:border-neutral-light",
-          "active:bg-neutral-light"
-        ]
+        base: ["text-neutral-main", "bg-neutral-soft", "hover:border-neutral-light", "active:bg-neutral-light"]
       }
     },
     {
       variant: "soft",
       color: "info",
       class: {
-        base: ["text-info-main", "bg-info-soft", "border-info-soft", "hover:border-info-light", "active:bg-info-light"]
+        base: ["text-info-main", "bg-info-soft", "hover:border-info-light", "active:bg-info-light"]
       }
     },
     {
       variant: "soft",
       color: "success",
       class: {
-        base: [
-          "text-success-main",
-          "bg-success-soft",
-          "border-success-soft",
-          "hover:border-success-light",
-          "active:bg-success-light"
-        ]
+        base: ["text-success-main", "bg-success-soft", "hover:border-success-light", "active:bg-success-light"]
       }
     },
     {
       variant: "soft",
       color: "warning",
       class: {
-        base: [
-          "text-warning-main",
-          "bg-warning-soft",
-          "border-warning-soft",
-          "hover:border-warning-light",
-          "active:bg-warning-light"
-        ]
+        base: ["text-warning-main", "bg-warning-soft", "hover:border-warning-light", "active:bg-warning-light"]
       }
     },
     {
       variant: "soft",
       color: "danger",
       class: {
-        base: [
-          "text-danger-main",
-          "bg-danger-soft",
-          "border-danger-soft",
-          "hover:border-danger-light",
-          "active:bg-danger-light"
-        ]
+        base: ["text-danger-main", "bg-danger-soft", "hover:border-danger-light", "active:bg-danger-light"]
       }
     },
     // outline & color
@@ -405,6 +375,21 @@ var buttonBaseStyle = tv({
       class: {
         base: ["!border-neutral-light"]
       }
+    },
+    // variant && isInGroup
+    {
+      variant: ["outline"],
+      isInGroup: true,
+      class: {
+        base: ["[&:not(:first-child)]:!border-l-0"]
+      }
+    },
+    {
+      variant: ["soft"],
+      isInGroup: true,
+      class: {
+        base: ["hover:!z-10", "active:!z-20", "focus:!z-20", "border-l-none"]
+      }
     }
   ]
 });

package/dist/{chunk-O3WY55XG.mjs → chunk-3K4OTUIB.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   text_button_default
-} from "./chunk-NUV2RUDP.mjs";
+} from "./chunk-KIINY2GS.mjs";
 import {
   Icon_default
 } from "./chunk-A6UUVHC6.mjs";

package/dist/{chunk-ZJ7JCOXA.mjs → chunk-7OP3JEMA.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   GlobalModalContext
-} from "./chunk-53G2LGJU.mjs";
+} from "./chunk-JGF5TY7M.mjs";
 
 // src/components/modal/useGlobalModal.tsx
 import { useContext } from "react";

package/dist/{chunk-ARVWCWGT.mjs → chunk-FNFQCMB4.mjs}

@@ -1,13 +1,13 @@
 "use client";
 import {
   Panel_default
-} from "./chunk-CA4ZDPGA.mjs";
+} from "./chunk-SXSVNBRO.mjs";
 import {
   convert24To12
 } from "./chunk-3IBJXQTJ.mjs";
 import {
   input_default
-} from "./chunk-CAXTJ64M.mjs";
+} from "./chunk-BJWYF2WY.mjs";
 import {
   Icon_default
 } from "./chunk-A6UUVHC6.mjs";
@@ -172,7 +172,7 @@ var timePickerStyle = tv({
       "rounded-[10px]",
       "bg-body-background",
       "shadow-drop-md",
-      "overflow-auto",
+      "overflow-hidden",
       "p-[10px]",
       "w-[165px]",
       "h-[137px]",

package/dist/{chunk-N63HDBJJ.mjs → chunk-H7D5EBLL.mjs}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-ZOTHPHXA.mjs";
 import {
   toast_default
-} from "./chunk-JMD66FOF.mjs";
+} from "./chunk-ZCJPPLYH.mjs";
 
 // src/components/toast/use-toast.tsx
 import { createContext, useContext, useState, useCallback, useEffect, useRef, useMemo } from "react";

package/dist/{chunk-PRLKKUBY.mjs → chunk-IOJMTN6X.mjs}

@@ -10,7 +10,7 @@ import {
 } from "./chunk-A6UUVHC6.mjs";
 import {
   buttonBaseStyle
-} from "./chunk-Q5T3XRA3.mjs";
+} from "./chunk-2WAQRWST.mjs";
 import {
   mapPropsVariants
 } from "./chunk-E3G5QXSH.mjs";

package/dist/{chunk-53G2LGJU.mjs → chunk-JGF5TY7M.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   modal_default
-} from "./chunk-MX4IEMVV.mjs";
+} from "./chunk-N4KPGD2N.mjs";
 
 // src/components/modal/GlobalModalProvider.tsx
 import { createContext, useState, useCallback, useMemo } from "react";

package/dist/{chunk-NPLC2OM6.mjs → chunk-KAB3AB67.mjs}

@@ -1,19 +1,19 @@
 "use client";
 import {
   pagination_default
-} from "./chunk-YZOXNWOC.mjs";
+} from "./chunk-WS4SOWDZ.mjs";
 import {
   checkbox_default
-} from "./chunk-SI3IR5X5.mjs";
+} from "./chunk-37BZALDV.mjs";
 import {
   scrollArea_default
 } from "./chunk-XS32UZI3.mjs";
-import {
-  mapPropsVariants
-} from "./chunk-E3G5QXSH.mjs";
 import {
   clsx
 } from "./chunk-27Y6K5NK.mjs";
+import {
+  mapPropsVariants
+} from "./chunk-E3G5QXSH.mjs";
 
 // src/components/table/table-head.tsx
 import { useLayoutEffect as useLayoutEffect2, useRef as useRef3, useState as useState3 } from "react";

package/dist/{chunk-NUV2RUDP.mjs → chunk-KIINY2GS.mjs}

@@ -1,16 +1,16 @@
 "use client";
 import {
   buttonBaseStyle
-} from "./chunk-Q5T3XRA3.mjs";
+} from "./chunk-2WAQRWST.mjs";
+import {
+  clsx
+} from "./chunk-27Y6K5NK.mjs";
 import {
   mapPropsVariants
 } from "./chunk-E3G5QXSH.mjs";
 import {
   tv
 } from "./chunk-UP6RPQDX.mjs";
-import {
-  clsx
-} from "./chunk-27Y6K5NK.mjs";
 
 // src/components/button/text-button.tsx
 import {

package/dist/{chunk-MX4IEMVV.mjs → chunk-N4KPGD2N.mjs}

@@ -1,10 +1,10 @@
 "use client";
 import {
   backdrop_default
-} from "./chunk-5HYZLISC.mjs";
+} from "./chunk-5RJYESLP.mjs";
 import {
   button_default
-} from "./chunk-7U7FM6I6.mjs";
+} from "./chunk-O5VW7CHY.mjs";
 import {
   Icon_default
 } from "./chunk-A6UUVHC6.mjs";

package/dist/{chunk-7U7FM6I6.mjs → chunk-O5VW7CHY.mjs}

@@ -10,7 +10,7 @@ import {
 } from "./chunk-A6UUVHC6.mjs";
 import {
   buttonBaseStyle
-} from "./chunk-Q5T3XRA3.mjs";
+} from "./chunk-2WAQRWST.mjs";
 import {
   mapPropsVariants
 } from "./chunk-E3G5QXSH.mjs";

package/dist/{chunk-KZ4VD7OZ.mjs → chunk-SR76DO4M.mjs}

@@ -4,10 +4,10 @@ import {
 } from "./chunk-KE26ONWZ.mjs";
 import {
   input_default
-} from "./chunk-CAXTJ64M.mjs";
+} from "./chunk-BJWYF2WY.mjs";
 import {
   button_default
-} from "./chunk-7U7FM6I6.mjs";
+} from "./chunk-O5VW7CHY.mjs";
 
 // src/components/fileUpload/fileUpload.tsx
 import { useRef, useState, useEffect } from "react";

package/dist/{chunk-CA4ZDPGA.mjs → chunk-SXSVNBRO.mjs}

@@ -1,14 +1,14 @@
 "use client";
 import {
   WheelColumn
-} from "./chunk-ZUNOPH7C.mjs";
+} from "./chunk-2J4MNIMS.mjs";
 import {
   convert24To12,
   getCurrent12Hour
 } from "./chunk-3IBJXQTJ.mjs";
 import {
   text_button_default
-} from "./chunk-NUV2RUDP.mjs";
+} from "./chunk-KIINY2GS.mjs";
 
 // src/components/picker/timePicker/Panel.tsx
 import { forwardRef, useEffect, useState } from "react";

package/dist/{chunk-KUGPZB4O.mjs → chunk-VZPVEICG.mjs}

@@ -1,19 +1,19 @@
 "use client";
 import {
   icon_button_default
-} from "./chunk-PRLKKUBY.mjs";
+} from "./chunk-IOJMTN6X.mjs";
 import {
   Icon_default
 } from "./chunk-A6UUVHC6.mjs";
+import {
+  clsx
+} from "./chunk-27Y6K5NK.mjs";
 import {
   mapPropsVariants
 } from "./chunk-E3G5QXSH.mjs";
 import {
   tv
 } from "./chunk-UP6RPQDX.mjs";
-import {
-  clsx
-} from "./chunk-27Y6K5NK.mjs";
 
 // src/components/select/select.tsx
 import { forwardRef, useMemo, useState, useRef, useEffect } from "react";

package/dist/{chunk-EL6G4AHQ.mjs → chunk-WQG4OYM6.mjs}

@@ -8,16 +8,16 @@ import {
 } from "./chunk-3IBJXQTJ.mjs";
 import {
   input_default
-} from "./chunk-CAXTJ64M.mjs";
+} from "./chunk-BJWYF2WY.mjs";
 import {
   icon_button_default
-} from "./chunk-PRLKKUBY.mjs";
+} from "./chunk-IOJMTN6X.mjs";
 import {
   text_button_default
-} from "./chunk-NUV2RUDP.mjs";
+} from "./chunk-KIINY2GS.mjs";
 import {
   button_default
-} from "./chunk-7U7FM6I6.mjs";
+} from "./chunk-O5VW7CHY.mjs";
 import {
   Icon_default
 } from "./chunk-A6UUVHC6.mjs";

package/dist/{chunk-YZOXNWOC.mjs → chunk-WS4SOWDZ.mjs}

@@ -4,19 +4,19 @@ import {
 } from "./chunk-F3HENRVM.mjs";
 import {
   input_default
-} from "./chunk-CAXTJ64M.mjs";
+} from "./chunk-BJWYF2WY.mjs";
 import {
   Icon_default
 } from "./chunk-A6UUVHC6.mjs";
+import {
+  clsx
+} from "./chunk-27Y6K5NK.mjs";
 import {
   mapPropsVariants
 } from "./chunk-E3G5QXSH.mjs";
 import {
   tv
 } from "./chunk-UP6RPQDX.mjs";
-import {
-  clsx
-} from "./chunk-27Y6K5NK.mjs";
 
 // src/components/pagination/pagination.tsx
 import { forwardRef, useMemo, useState } from "react";

package/dist/components/backdrop/backdrop.mjs

@@ -1,9 +1,9 @@
 "use client";
 import {
   backdrop_default
-} from "../../chunk-5HYZLISC.mjs";
-import "../../chunk-UP6RPQDX.mjs";
+} from "../../chunk-5RJYESLP.mjs";
 import "../../chunk-27Y6K5NK.mjs";
+import "../../chunk-UP6RPQDX.mjs";
 export {
   backdrop_default as default
 };

package/dist/components/backdrop/index.mjs

@@ -2,9 +2,9 @@
 import "../../chunk-SE5TU755.mjs";
 import {
   backdrop_default
-} from "../../chunk-5HYZLISC.mjs";
-import "../../chunk-UP6RPQDX.mjs";
+} from "../../chunk-5RJYESLP.mjs";
 import "../../chunk-27Y6K5NK.mjs";
+import "../../chunk-UP6RPQDX.mjs";
 export {
   backdrop_default as Backdrop
 };

package/dist/components/breadcrumb/breadcrumb.js

@@ -5029,7 +5029,7 @@ var buttonBaseStyle = tv({
     variant: {
       solid: {},
       soft: {},
-      outline: { base: ["bg-transparent"] },
+      outline: { base: ["bg-body-background"] },
       ghost: {}
     },
     color: {
@@ -5041,6 +5041,12 @@ var buttonBaseStyle = tv({
       warning: {},
       danger: {}
     },
+    size: {
+      sm: {},
+      md: {},
+      lg: {},
+      xl: {}
+    },
     disabled: {
       true: {
         base: ["!bg-neutral-soft", "!border-neutral-soft", "!text-neutral-light", "pointer-events-none"]
@@ -5048,7 +5054,7 @@ var buttonBaseStyle = tv({
     },
     isInGroup: {
       true: {
-        base: ["!rounded-none", "[&:not(:first-child)]:border-l-0"]
+        base: ["!rounded-none"]
       }
     }
   },
@@ -5142,85 +5148,49 @@ var buttonBaseStyle = tv({
       variant: "soft",
       color: "primary",
       class: {
-        base: [
-          "text-primary-main",
-          "bg-primary-soft",
-          "border-primary-soft",
-          "hover:border-primary-light",
-          "active:bg-primary-light"
-        ]
+        base: ["text-primary-main", "bg-primary-soft", "hover:border-primary-light", "active:bg-primary-light"]
       }
     },
     {
       variant: "soft",
       color: "secondary",
       class: {
-        base: [
-          "text-secondary-main",
-          "bg-secondary-soft",
-          "border-secondary-soft",
-          "hover:border-secondary-light",
-          "active:bg-secondary-light"
-        ]
+        base: ["text-secondary-main", "bg-secondary-soft", "hover:border-secondary-light", "active:bg-secondary-light"]
       }
     },
     {
       variant: "soft",
       color: "neutral",
       class: {
-        base: [
-          "text-neutral-main",
-          "bg-neutral-soft",
-          "border-neutral-soft",
-          "hover:border-neutral-light",
-          "active:bg-neutral-light"
-        ]
+        base: ["text-neutral-main", "bg-neutral-soft", "hover:border-neutral-light", "active:bg-neutral-light"]
       }
     },
     {
       variant: "soft",
       color: "info",
       class: {
-        base: ["text-info-main", "bg-info-soft", "border-info-soft", "hover:border-info-light", "active:bg-info-light"]
+        base: ["text-info-main", "bg-info-soft", "hover:border-info-light", "active:bg-info-light"]
       }
     },
     {
       variant: "soft",
       color: "success",
       class: {
-        base: [
-          "text-success-main",
-          "bg-success-soft",
-          "border-success-soft",
-          "hover:border-success-light",
-          "active:bg-success-light"
-        ]
+        base: ["text-success-main", "bg-success-soft", "hover:border-success-light", "active:bg-success-light"]
       }
     },
     {
       variant: "soft",
       color: "warning",
       class: {
-        base: [
-          "text-warning-main",
-          "bg-warning-soft",
-          "border-warning-soft",
-          "hover:border-warning-light",
-          "active:bg-warning-light"
-        ]
+        base: ["text-warning-main", "bg-warning-soft", "hover:border-warning-light", "active:bg-warning-light"]
       }
     },
     {
       variant: "soft",
       color: "danger",
       class: {
-        base: [
-          "text-danger-main",
-          "bg-danger-soft",
-          "border-danger-soft",
-          "hover:border-danger-light",
-          "active:bg-danger-light"
-        ]
+        base: ["text-danger-main", "bg-danger-soft", "hover:border-danger-light", "active:bg-danger-light"]
       }
     },
     // outline & color
@@ -5408,6 +5378,21 @@ var buttonBaseStyle = tv({
       class: {
         base: ["!border-neutral-light"]
       }
+    },
+    // variant && isInGroup
+    {
+      variant: ["outline"],
+      isInGroup: true,
+      class: {
+        base: ["[&:not(:first-child)]:!border-l-0"]
+      }
+    },
+    {
+      variant: ["soft"],
+      isInGroup: true,
+      class: {
+        base: ["hover:!z-10", "active:!z-20", "focus:!z-20", "border-l-none"]
+      }
     }
   ]
 });

package/dist/components/breadcrumb/breadcrumb.mjs

@@ -1,22 +1,22 @@
 "use client";
 import {
   breadcrumb_default
-} from "../../chunk-O3WY55XG.mjs";
+} from "../../chunk-3K4OTUIB.mjs";
 import "../../chunk-MY5U63QO.mjs";
-import "../../chunk-PRLKKUBY.mjs";
-import "../../chunk-NUV2RUDP.mjs";
-import "../../chunk-APKF7DHK.mjs";
-import "../../chunk-7U7FM6I6.mjs";
+import "../../chunk-IOJMTN6X.mjs";
+import "../../chunk-KIINY2GS.mjs";
+import "../../chunk-LHWHM4LQ.mjs";
+import "../../chunk-O5VW7CHY.mjs";
 import "../../chunk-6WSACUIB.mjs";
 import "../../chunk-LXHUO6VM.mjs";
 import "../../chunk-SZL743JC.mjs";
 import "../../chunk-ZYIIXWVY.mjs";
 import "../../chunk-A6UUVHC6.mjs";
-import "../../chunk-Q5T3XRA3.mjs";
-import "../../chunk-E3G5QXSH.mjs";
+import "../../chunk-2WAQRWST.mjs";
 import "../../chunk-AOU4QX7H.mjs";
-import "../../chunk-UP6RPQDX.mjs";
 import "../../chunk-27Y6K5NK.mjs";
+import "../../chunk-E3G5QXSH.mjs";
+import "../../chunk-UP6RPQDX.mjs";
 export {
   breadcrumb_default as default
 };