@deepnoid/ui 1.0.11 → 1.0.13

package/README.md

@@ -1,8 +1,8 @@
 # @deepnoid-ui
 
-`@deepnoid-ui`는 본부 내 프로젝트에서 공통으로 사용하는 **TailwindCSS 기반 UI 컴포넌트 라이브러리**입니다.  
+본부 내 프로젝트에서 공통으로 사용하는 TailwindCSS 기반 UI 컴포넌트 라이브러리입니다.  
  
-모노레포 구조로 구성되어 있으며, **Storybook**을 통해 컴포넌트 문서화 및 테스트를 수행합니다.
+모노레포 구조로 구성되어 있으며, Storybook을 통해 컴포넌트 문서화 및 테스트를 수행합니다.
 
 - Storybook 앱 위치: [`./apps/docs`](../../apps/docs)
 
@@ -14,7 +14,7 @@
   공통 ESLint 규칙 정의
 
 - [`./packages/tailwind-config`](../../packages/tailwind-config)  
-  Tailwind 플러그인에서 사용되는 디자인 토큰 정의
+  Tailwind CSS v4 마이그레이션 적용 (CSS-First 기반 디자인 토큰 및 모듈화된 프리셋 제공)
 
 - [`./packages/typescript-config`](../../packages/typescript-config)  
   공통 TypeScript 설정 정의
@@ -29,24 +29,53 @@
 yarn add @deepnoid/ui
 ```
 
-## Tailwind 설정
+## Tailwind CSS v4 설정
 
-```jsx
-import type { Config } from "tailwindcss";
-import { deepnoidUi } from "@deepnoid/ui";
+`@deepnoid/ui`는 Tailwind CSS v4의 **CSS-First** 아키텍처를 도입하여 플러그인(`plugin.ts`)과 `tailwind.config.ts`를 완전히 제거했습니다.
+설정을 적용하려면 앱의 엔트리 CSS 파일(예: `global.css`)에 다음과 같이 import 해야 합니다.
 
-const config: Config = {
-  content: [
-    "./src/**/*.{js,ts,jsx,tsx}",
-    "./node_modules/@deepnoid/ui/dist/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  darkMode: "selector",
-  plugins: [deepnoidUi()],
-};
+```css
+/* global.css */
+@import "tailwindcss";
+@import "@deepnoid/tailwind-config/src/preset.css";
 
-export default config;
+/* UI 패키지와 앱의 소스 파일 경로를 스캔하도록 추가합니다. */
+@source "../stories/**/*.{ts,tsx}";
+@source "../../packages/ui/src/**/*.{ts,tsx,js,jsx}";
+
+/* 특정 프로젝트 전용 커스텀 색상(테마) 덮어쓰기 */
+:root, .light, [data-theme="light"],
+.dark, [data-theme="dark"] {
+  --color-primary-soft: #EFF8FF;
+  /* 동적 CSS 색상 매핑을 위해 --color- 접두사를 사용합니다. */
+}
+```
+
+## Tailwind CSS v4 아키텍처 및 확장 관리
+
+유지보수와 확장을 쉽게 하기 위해 설정들을 여러 CSS 파일로 분리하여 관리합니다.
+
+```text
+packages/tailwind-config/
+├── scripts/
+│   └── generate-border.ts    # border 유틸리티 자동 생성 스크립트 (build-time)
+├── src/
+│   ├── preset.css            # 모든 CSS를 하나로 묶는 @import 진입점 (최상위 설정)
+│   └── styles/
+│       ├── generated/
+│       │   └── border.css    # 스크립트 실행으로 자동 생성된 파일
+│       ├── tokens/
+│       │   ├── theme.css     # 폰트, Radius, Shadow, Spacing 등
+│       │   └── colors.css    # 원시(Primitive) 기본 색상 및 시맨틱 매핑
+│       ├── utilities/
+│       │   └── scrollbar.css # 브라우저 스크롤바 커스텀 유틸리티 (@utility)
+│       └── animation.css     # 타이밍, Keyframes, 애니메이션 테마 변수
 ```
 
+**참고 사항:**
+- 더 이상 `tailwind.config.ts`에서 하드코딩으로 컴포넌트나 테마를 생성하지 않습니다.
+- 유틸리티 클래스가 반복되는 경우(예: `border-t-sm`, `border-x-md`), JS 플러그인을 다시 부활시키지 않고 `scripts/` 폴더 내에 TS/JS **코드 생성기(Generator)** 를 작성하여 빌드 타임에 정적인 CSS 객체를 뽑아냅니다.
+
 ## 개발 환경
 
 ```bash
@@ -58,7 +87,7 @@ yarn@1.22.22
 ## Storybook
 
 - 개발 환경: http://localhost:6006
-- 테스트 서버: http://172.30.10.148:6006
+- ~~테스트 서버: http://172.30.10.148:6006~~
 
 ```bash
 yarn install

package/dist/{chunk-2HYBU7NH.mjs → chunk-37BZALDV.mjs}

@@ -7,7 +7,7 @@ import {
 } from "./chunk-E3G5QXSH.mjs";
 import {
   tv
-} from "./chunk-DPWUIAVC.mjs";
+} from "./chunk-UP6RPQDX.mjs";
 
 // src/components/checkbox/checkbox.tsx
 import { forwardRef, useMemo } from "react";

package/dist/{chunk-P4GNXDMO.mjs → chunk-5RJYESLP.mjs}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-27Y6K5NK.mjs";
 import {
   tv
-} from "./chunk-DPWUIAVC.mjs";
+} from "./chunk-UP6RPQDX.mjs";
 
 // src/components/backdrop/backdrop.tsx
 import { useEffect, useState } from "react";

package/dist/{chunk-NJWXYTBQ.mjs → chunk-62M6VPFS.mjs}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-E3G5QXSH.mjs";
 import {
   tv
-} from "./chunk-DPWUIAVC.mjs";
+} from "./chunk-UP6RPQDX.mjs";
 
 // src/components/charts/barChart.tsx
 import { forwardRef, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";

package/dist/{chunk-47FA6TWG.mjs → chunk-6F6HERZF.mjs}

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

package/dist/{chunk-5K5HG64H.mjs → chunk-6ZVFACPA.mjs}

@@ -1,13 +1,13 @@
 "use client";
 import {
   pagination_default
-} from "./chunk-XNDDHEW6.mjs";
+} from "./chunk-AYTOWECM.mjs";
 import {
   checkbox_default
-} from "./chunk-2HYBU7NH.mjs";
+} from "./chunk-37BZALDV.mjs";
 import {
   scrollArea_default
-} from "./chunk-EWS3FESG.mjs";
+} from "./chunk-XS32UZI3.mjs";
 import {
   clsx
 } from "./chunk-27Y6K5NK.mjs";

package/dist/{chunk-HKF5BNPX.mjs → chunk-7CTICAGW.mjs}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-E3G5QXSH.mjs";
 import {
   tv
-} from "./chunk-DPWUIAVC.mjs";
+} from "./chunk-UP6RPQDX.mjs";
 
 // src/components/list/list.tsx
 import { Children, cloneElement, forwardRef, isValidElement, useMemo } from "react";

package/dist/{chunk-MTEVJZPH.mjs → chunk-7MMUS5ER.mjs}

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

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

@@ -10,13 +10,13 @@ import {
 } from "./chunk-A6UUVHC6.mjs";
 import {
   buttonBaseStyle
-} from "./chunk-MYFMT2ZT.mjs";
+} from "./chunk-Q5T3XRA3.mjs";
 import {
   mapPropsVariants
 } from "./chunk-E3G5QXSH.mjs";
 import {
   tv
-} from "./chunk-DPWUIAVC.mjs";
+} from "./chunk-UP6RPQDX.mjs";
 
 // src/components/button/button.tsx
 import {

package/dist/{chunk-FFKXQUER.mjs → chunk-AO6LNH3D.mjs}

@@ -7,7 +7,7 @@ import {
 } from "./chunk-E3G5QXSH.mjs";
 import {
   tv
-} from "./chunk-DPWUIAVC.mjs";
+} from "./chunk-UP6RPQDX.mjs";
 
 // src/components/radio/radio.tsx
 import { forwardRef, useMemo } from "react";

package/dist/{chunk-XNDDHEW6.mjs → chunk-AYTOWECM.mjs}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-F3HENRVM.mjs";
 import {
   input_default
-} from "./chunk-HJ2RUGGG.mjs";
+} from "./chunk-Y6EIO72X.mjs";
 import {
   Icon_default
 } from "./chunk-A6UUVHC6.mjs";
@@ -16,7 +16,7 @@ import {
 } from "./chunk-E3G5QXSH.mjs";
 import {
   tv
-} from "./chunk-DPWUIAVC.mjs";
+} from "./chunk-UP6RPQDX.mjs";
 
 // src/components/pagination/pagination.tsx
 import { forwardRef, useMemo, useState } from "react";

package/dist/{chunk-2KKZXS5A.mjs → chunk-AZT7MLD2.mjs}

@@ -1,13 +1,13 @@
 "use client";
 import {
   text_button_default
-} from "./chunk-O3E6E4QS.mjs";
+} from "./chunk-ZDZKGGK3.mjs";
 import {
   Icon_default
 } from "./chunk-A6UUVHC6.mjs";
 import {
   tv
-} from "./chunk-DPWUIAVC.mjs";
+} from "./chunk-UP6RPQDX.mjs";
 
 // src/components/breadcrumb/breadcrumb.tsx
 import { forwardRef, useMemo } from "react";

package/dist/{chunk-3JKORA4G.mjs → chunk-CXVDES22.mjs}

@@ -7,7 +7,7 @@ import {
 } from "./chunk-E3G5QXSH.mjs";
 import {
   tv
-} from "./chunk-DPWUIAVC.mjs";
+} from "./chunk-UP6RPQDX.mjs";
 
 // src/components/drawer/drawer.tsx
 import { forwardRef, useMemo, useEffect, useState } from "react";

package/dist/{chunk-3N442F6I.mjs → chunk-D3DKXTTY.mjs}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-AOU4QX7H.mjs";
 import {
   tv
-} from "./chunk-DPWUIAVC.mjs";
+} from "./chunk-UP6RPQDX.mjs";
 
 // src/components/avatar/avatar.tsx
 import { forwardRef, useMemo } from "react";

package/dist/{chunk-EIVSXVP5.mjs → chunk-D7DDV4UN.mjs}

@@ -7,7 +7,7 @@ import {
 } from "./chunk-E3G5QXSH.mjs";
 import {
   tv
-} from "./chunk-DPWUIAVC.mjs";
+} from "./chunk-UP6RPQDX.mjs";
 
 // src/components/starRating/starRating.tsx
 import { forwardRef, useMemo, useState } from "react";
@@ -85,9 +85,9 @@ var StarRating = forwardRef((originalProps, ref) => {
           /* @__PURE__ */ jsx(
             "div",
             {
-              className: "absolute left-0 top-0 overflow-hidden",
+              className: "absolute top-0 left-0 h-full w-full",
               style: {
-                width: isFull ? "100%" : `${fillPercentage}%`
+                clipPath: isFull ? "none" : `inset(0 ${100 - fillPercentage}% 0 0)`
               },
               children: /* @__PURE__ */ jsx(Icon_default, { name: "star", fill: true, className: filledColor, size })
             }

package/dist/{chunk-ZRYYG7T6.mjs → chunk-FNES52QP.mjs}

@@ -1,13 +1,13 @@
 "use client";
 import {
   progress_default
-} from "./chunk-VUO5J2OK.mjs";
+} from "./chunk-KE26ONWZ.mjs";
 import {
   input_default
-} from "./chunk-HJ2RUGGG.mjs";
+} from "./chunk-Y6EIO72X.mjs";
 import {
   button_default
-} from "./chunk-KXR5SJQT.mjs";
+} from "./chunk-7U7FM6I6.mjs";
 
 // src/components/fileUpload/fileUpload.tsx
 import { useRef, useState, useEffect } from "react";

package/dist/{chunk-3WTJDGIC.mjs → chunk-G45IQ6PX.mjs}

@@ -1,13 +1,13 @@
 "use client";
 import {
   Panel_default
-} from "./chunk-XOR6NQTS.mjs";
+} from "./chunk-ZPMS2CYP.mjs";
 import {
   convert24To12
 } from "./chunk-3IBJXQTJ.mjs";
 import {
   input_default
-} from "./chunk-HJ2RUGGG.mjs";
+} from "./chunk-Y6EIO72X.mjs";
 import {
   Icon_default
 } from "./chunk-A6UUVHC6.mjs";
@@ -16,7 +16,7 @@ import {
 } from "./chunk-E3G5QXSH.mjs";
 import {
   tv
-} from "./chunk-DPWUIAVC.mjs";
+} from "./chunk-UP6RPQDX.mjs";
 
 // src/components/picker/timePicker/index.tsx
 import { forwardRef, useCallback, useMemo, useState, useRef, useEffect } from "react";

package/dist/{chunk-DI7QXTYZ.mjs → chunk-G6SZN3EK.mjs}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-E3G5QXSH.mjs";
 import {
   tv
-} from "./chunk-DPWUIAVC.mjs";
+} from "./chunk-UP6RPQDX.mjs";
 
 // src/components/picker/day.tsx
 import { forwardRef, useMemo } from "react";
@@ -39,7 +39,7 @@ var dayStyle = tv({
       selected: { base: ["bg-primary-main", "text-common-white"] },
       disabled: { base: ["pointer-events-none", "bg-common-transparent", "text-neutral-light"] },
       period: { base: ["bg-primary-soft", "rounded-none"] },
-      today: { base: ["shadow-[inset_0_0_0_2px_var(--dn-primary-light)]", "hover:bg-trans-soft"] },
+      today: { base: ["shadow-[inset_0_0_0_2px_var(--color-primary-light)]", "hover:bg-trans-soft"] },
       text: { base: ["text-md"] }
     }
   },

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

@@ -1,10 +1,10 @@
 "use client";
-import {
-  toast_default
-} from "./chunk-JUKILR6X.mjs";
 import {
   getToastPosition
 } from "./chunk-ZOTHPHXA.mjs";
+import {
+  toast_default
+} from "./chunk-ZCJPPLYH.mjs";
 
 // src/components/toast/use-toast.tsx
 import { createContext, useContext, useState, useCallback, useEffect, useRef, useMemo } from "react";

package/dist/{chunk-4V5D237Z.mjs → chunk-HXBZB7CW.mjs}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-27Y6K5NK.mjs";
 import {
   tv
-} from "./chunk-DPWUIAVC.mjs";
+} from "./chunk-UP6RPQDX.mjs";
 
 // src/components/table/definition-table.tsx
 import { forwardRef, useMemo } from "react";

package/dist/{chunk-VUO5J2OK.mjs → chunk-KE26ONWZ.mjs}

@@ -7,7 +7,7 @@ import {
 } from "./chunk-E3G5QXSH.mjs";
 import {
   tv
-} from "./chunk-DPWUIAVC.mjs";
+} from "./chunk-UP6RPQDX.mjs";
 
 // src/components/progress/progress.tsx
 import { useMemo } from "react";

package/dist/{chunk-OK34FKBQ.mjs → chunk-LCEFG5IY.mjs}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-E3G5QXSH.mjs";
 import {
   tv
-} from "./chunk-DPWUIAVC.mjs";
+} from "./chunk-UP6RPQDX.mjs";
 
 // src/components/slider/slider.tsx
 import { forwardRef, useCallback, useRef, useState, useMemo } from "react";
@@ -175,11 +175,11 @@ var sliderStyle = tv({
     color: {
       primary: {
         indicator: ["bg-primary-light"],
-        thumb: ["bg-primary-main", "ring-[color-mix(in_srgb,var(--dn-primary-main)_20%,transparent)]"]
+        thumb: ["bg-primary-main", "ring-[color-mix(in_srgb,var(--color-primary-main)_20%,transparent)]"]
       },
       secondary: {
         indicator: ["bg-secondary-light"],
-        thumb: ["bg-secondary-main", "ring-[color-mix(in_srgb,var(--dn-secondary-main)_20%,transparent)]"]
+        thumb: ["bg-secondary-main", "ring-[color-mix(in_srgb,var(--color-secondary-main)_20%,transparent)]"]
       }
     },
     size: {

package/dist/{chunk-67DEFPS6.mjs → chunk-LHWHM4LQ.mjs}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-27Y6K5NK.mjs";
 import {
   tv
-} from "./chunk-DPWUIAVC.mjs";
+} from "./chunk-UP6RPQDX.mjs";
 
 // src/components/button/button-group.tsx
 import React, { forwardRef, isValidElement } from "react";

package/dist/{chunk-LJSGQO4B.mjs → chunk-MC7SI5Q7.mjs}

@@ -11,7 +11,7 @@ import {
 } from "./chunk-E3G5QXSH.mjs";
 import {
   tv
-} from "./chunk-DPWUIAVC.mjs";
+} from "./chunk-UP6RPQDX.mjs";
 
 // src/components/tooltip/tooltip.tsx
 import { forwardRef, useCallback, useMemo, useRef, useState, useEffect } from "react";

package/dist/{chunk-GSOTTSR4.mjs → chunk-MT7AFUKT.mjs}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-E3G5QXSH.mjs";
 import {
   tv
-} from "./chunk-DPWUIAVC.mjs";
+} from "./chunk-UP6RPQDX.mjs";
 
 // src/components/accordion/accordion.tsx
 import { Children, cloneElement, forwardRef, useMemo, useState } from "react";

package/dist/{chunk-M7V5YMM2.mjs → chunk-O2KC4CDE.mjs}

@@ -1,13 +1,13 @@
 "use client";
 import {
   scrollArea_default
-} from "./chunk-EWS3FESG.mjs";
+} from "./chunk-XS32UZI3.mjs";
 import {
   mapPropsVariants
 } from "./chunk-E3G5QXSH.mjs";
 import {
   tv
-} from "./chunk-DPWUIAVC.mjs";
+} from "./chunk-UP6RPQDX.mjs";
 
 // src/components/charts/areaChart.tsx
 import { forwardRef, useMemo, useState, useRef, useEffect, useId } from "react";

package/dist/{chunk-3QZPVRM5.mjs → chunk-PIUOU6LS.mjs}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-E3G5QXSH.mjs";
 import {
   tv
-} from "./chunk-DPWUIAVC.mjs";
+} from "./chunk-UP6RPQDX.mjs";
 
 // src/components/charts/circularProgress.tsx
 import { RadialBarChart, RadialBar, PolarAngleAxis } from "recharts";

package/dist/{chunk-44Z6L7FL.mjs → chunk-PRLKKUBY.mjs}

@@ -10,13 +10,13 @@ import {
 } from "./chunk-A6UUVHC6.mjs";
 import {
   buttonBaseStyle
-} from "./chunk-MYFMT2ZT.mjs";
+} from "./chunk-Q5T3XRA3.mjs";
 import {
   mapPropsVariants
 } from "./chunk-E3G5QXSH.mjs";
 import {
   tv
-} from "./chunk-DPWUIAVC.mjs";
+} from "./chunk-UP6RPQDX.mjs";
 
 // src/components/button/icon-button.tsx
 import { forwardRef, useMemo, useCallback } from "react";

package/dist/{chunk-MYFMT2ZT.mjs → chunk-Q5T3XRA3.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   tv
-} from "./chunk-DPWUIAVC.mjs";
+} from "./chunk-UP6RPQDX.mjs";
 
 // src/components/button/button.style.ts
 var buttonBaseStyle = tv({
@@ -57,7 +57,7 @@ var buttonBaseStyle = tv({
         base: [
           "text-white",
           "bg-primary-main",
-          "hover:[background:linear-gradient(0deg,var(--dn-trans-light)_0%,var(--dn-trans-light)_100%),var(--dn-primary-main)]",
+          "hover:[background:linear-gradient(0deg,var(--color-trans-light)_0%,var(--color-trans-light)_100%),var(--color-primary-main)]",
           "active:bg-primary-dark"
         ]
       }
@@ -69,7 +69,7 @@ var buttonBaseStyle = tv({
         base: [
           "text-white",
           "bg-secondary-main",
-          "hover:[background:linear-gradient(0deg,var(--dn-trans-light)_0%,var(--dn-trans-light)_100%),var(--dn-secondary-main)]",
+          "hover:[background:linear-gradient(0deg,var(--color-trans-light)_0%,var(--color-trans-light)_100%),var(--color-secondary-main)]",
           "active:bg-secondary-dark"
         ]
       }
@@ -81,7 +81,7 @@ var buttonBaseStyle = tv({
         base: [
           "text-white",
           "bg-neutral-main",
-          "hover:[background:linear-gradient(0deg,var(--dn-trans-light)_0%,var(--dn-trans-light)_100%),var(--dn-neutral-main)]",
+          "hover:[background:linear-gradient(0deg,var(--color-trans-light)_0%,var(--color-trans-light)_100%),var(--color-neutral-main)]",
           "active:bg-neutral-dark"
         ]
       }
@@ -93,7 +93,7 @@ var buttonBaseStyle = tv({
         base: [
           "text-white",
           "bg-info-main",
-          "hover:[background:linear-gradient(0deg,var(--dn-trans-light)_0%,var(--dn-trans-light)_100%),var(--dn-info-main)]",
+          "hover:[background:linear-gradient(0deg,var(--color-trans-light)_0%,var(--color-trans-light)_100%),var(--color-info-main)]",
           "active:bg-info-dark"
         ]
       }
@@ -105,7 +105,7 @@ var buttonBaseStyle = tv({
         base: [
           "text-white",
           "bg-success-main",
-          "hover:[background:linear-gradient(0deg,var(--dn-trans-light)_0%,var(--dn-trans-light)_100%),var(--dn-success-main)]",
+          "hover:[background:linear-gradient(0deg,var(--color-trans-light)_0%,var(--color-trans-light)_100%),var(--color-success-main)]",
           "active:bg-success-dark"
         ]
       }
@@ -117,7 +117,7 @@ var buttonBaseStyle = tv({
         base: [
           "text-white",
           "bg-warning-main",
-          "hover:[background:linear-gradient(0deg,var(--dn-trans-light)_0%,var(--dn-trans-light)_100%),var(--dn-warning-main)]",
+          "hover:[background:linear-gradient(0deg,var(--color-trans-light)_0%,var(--color-trans-light)_100%),var(--color-warning-main)]",
           "active:bg-warning-dark"
         ]
       }
@@ -129,7 +129,7 @@ var buttonBaseStyle = tv({
         base: [
           "text-white",
           "bg-danger-main",
-          "hover:[background:linear-gradient(0deg,var(--dn-trans-light)_0%,var(--dn-trans-light)_100%),var(--dn-danger-main)]",
+          "hover:[background:linear-gradient(0deg,var(--color-trans-light)_0%,var(--color-trans-light)_100%),var(--color-danger-main)]",
           "active:bg-danger-dark"
         ]
       }

package/dist/{chunk-ZXKXTIPE.mjs → chunk-QUWWLVCI.mjs}

@@ -7,7 +7,7 @@ import {
 } from "./chunk-E3G5QXSH.mjs";
 import {
   tv
-} from "./chunk-DPWUIAVC.mjs";
+} from "./chunk-UP6RPQDX.mjs";
 
 // src/components/chip/chip.tsx
 import { forwardRef, useMemo } from "react";

package/dist/{chunk-6CNPC722.mjs → chunk-R32BQ3NV.mjs}

@@ -7,7 +7,7 @@ import {
 } from "./chunk-27Y6K5NK.mjs";
 import {
   tv
-} from "./chunk-DPWUIAVC.mjs";
+} from "./chunk-UP6RPQDX.mjs";
 
 // src/components/tree/tree.tsx
 import { forwardRef, useMemo, useState, useCallback, useEffect, memo, useRef } from "react";

package/dist/{chunk-NKYNCXOU.mjs → chunk-SLKXMIWY.mjs}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-E3G5QXSH.mjs";
 import {
   tv
-} from "./chunk-DPWUIAVC.mjs";
+} from "./chunk-UP6RPQDX.mjs";
 
 // src/components/accordion/accordionItem.tsx
 import {
@@ -101,7 +101,8 @@ var accordionItem = tv({
       "p-[12px]",
       "bg-transparent",
       "cursor-pointer",
-      "select-none"
+      "select-none",
+      "border-neutral-light"
     ],
     header: ["flex", "justify-between", "items-center", "text-foreground", "gap-[8px]"],
     headerTitle: ["w-full", "font-bold", "text-body-foreground"],