@jbpark/ui-kit 10.0.0 → 10.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.ko.md +33 -25
- package/README.md +33 -25
- package/dist/components/atoms/skeleton/node.mjs +1 -1
- package/dist/components/atoms/skeleton/node.mjs.map +1 -1
- package/dist/components/atoms/skeleton/skeleton.mjs +2 -2
- package/dist/components/atoms/skeleton/skeleton.mjs.map +1 -1
- package/dist/components/molecules/reveals/reveals.mjs +1 -1
- package/dist/components/molecules/reveals/reveals.mjs.map +1 -1
- package/dist/core/badge.d.mts +1 -1
- package/dist/core/button.d.mts +2 -2
- package/package.json +1 -1
package/README.ko.md
CHANGED
|
@@ -9,8 +9,8 @@ TypeScript와 Tailwind CSS를 기반으로 구축된 현대적이고 재사용
|
|
|
9
9
|
- **패키지명**: `@jbpark/ui-kit`
|
|
10
10
|
- **라이선스**: MIT
|
|
11
11
|
- **패키지 매니저**: pnpm
|
|
12
|
-
- **Node.js 요구사항**: >=
|
|
13
|
-
- **React 요구사항**: ^
|
|
12
|
+
- **Node.js 요구사항**: >= 20
|
|
13
|
+
- **React 요구사항**: ^19.0.0
|
|
14
14
|
|
|
15
15
|
## 🏗 아키텍처
|
|
16
16
|
|
|
@@ -27,8 +27,10 @@ src/
|
|
|
27
27
|
│ └── templates/ # 📄 템플릿 - 페이지 레이아웃
|
|
28
28
|
├── core/ # ⚙️ 핵심 UI 로직 (Base UI 기반)
|
|
29
29
|
├── lib/
|
|
30
|
-
│ ├──
|
|
31
|
-
│
|
|
30
|
+
│ ├── utils/ # 🛠 유틸리티 함수
|
|
31
|
+
│ ├── colors.ts # 🎨 색상 토큰 해석
|
|
32
|
+
│ └── z-layers.ts # 🪟 포털 공용 z-index 스케일
|
|
33
|
+
├── providers/ # 🧩 Config 프로바이더 및 테마
|
|
32
34
|
├── globals.css # 🎨 전역 스타일
|
|
33
35
|
└── index.ts # 📥 패키지 진입점
|
|
34
36
|
```
|
|
@@ -103,7 +105,7 @@ Base UI 기반의 접근성 우선 핵심 컴포넌트들:
|
|
|
103
105
|
### 유틸리티
|
|
104
106
|
|
|
105
107
|
- **`cn()`** - 클래스명 병합 유틸리티 (clsx + tailwind-merge)
|
|
106
|
-
- **`
|
|
108
|
+
- **`renderConditional()`** - 조건부 렌더 헬퍼
|
|
107
109
|
|
|
108
110
|
## 🚀 설치 및 사용법
|
|
109
111
|
|
|
@@ -171,13 +173,12 @@ import Typography from '@jbpark/ui-kit/Typography';
|
|
|
171
173
|
> 이펙트로 불러오기 때문에 Node/SSR 빌드(예: Astro static build)에서 순수
|
|
172
174
|
> `.css` import를 처리 못 해 빌드가 깨질 수 있습니다.
|
|
173
175
|
|
|
174
|
-
### 유틸리티 및
|
|
176
|
+
### 유틸리티 및 프로바이더 import
|
|
175
177
|
|
|
176
178
|
```tsx
|
|
177
179
|
// 유틸리티 함수
|
|
178
|
-
|
|
179
|
-
import {
|
|
180
|
-
import { cn } from '@jbpark/ui-kit/utils';
|
|
180
|
+
import { Config } from '@jbpark/ui-kit/providers';
|
|
181
|
+
import { cn, renderConditional } from '@jbpark/ui-kit/utils';
|
|
181
182
|
```
|
|
182
183
|
|
|
183
184
|
### 스타일 import
|
|
@@ -210,28 +211,29 @@ import '@jbpark/ui-kit/style.css';
|
|
|
210
211
|
|
|
211
212
|
### 핵심 라이브러리
|
|
212
213
|
|
|
213
|
-
- **React 19.
|
|
214
|
-
- **TypeScript
|
|
215
|
-
- **Tailwind CSS 4.
|
|
214
|
+
- **React 19.2** - UI 라이브러리
|
|
215
|
+
- **TypeScript 6.0** - 정적 타입 체크
|
|
216
|
+
- **Tailwind CSS 4.3** - 유틸리티 CSS 프레임워크
|
|
216
217
|
|
|
217
218
|
### UI 라이브러리
|
|
218
219
|
|
|
219
|
-
- **Base UI** - 접근성 우선 헤드리스 UI
|
|
220
|
-
- **Lucide React
|
|
221
|
-
- **Motion
|
|
222
|
-
- **Swiper
|
|
223
|
-
- **
|
|
220
|
+
- **Base UI 1.8** - 접근성 우선 헤드리스 UI 프리미티브
|
|
221
|
+
- **Lucide React 1.45** - 아이콘 라이브러리
|
|
222
|
+
- **Motion 13.1** - 애니메이션 라이브러리
|
|
223
|
+
- **Swiper 14.1** - 터치 슬라이더
|
|
224
|
+
- **TipTap 3.30** - RichTextEditor 엔진
|
|
225
|
+
- **react-day-picker 10.0** - DatePicker 캘린더
|
|
226
|
+
- **react-resizable-panels 4.12** - Splitter 패널
|
|
224
227
|
|
|
225
228
|
### 유틸리티
|
|
226
229
|
|
|
227
230
|
- **class-variance-authority 0.7.1** - 컴포넌트 variants 관리
|
|
228
231
|
- **clsx 2.1.1** - 조건부 클래스명
|
|
229
|
-
- **tailwind-merge 3.
|
|
230
|
-
-
|
|
231
|
-
-
|
|
232
|
-
- **
|
|
233
|
-
-
|
|
234
|
-
- **tw-animate-css 1.3.7** - Tailwind 애니메이션
|
|
232
|
+
- **tailwind-merge 3.6** - Tailwind 클래스 병합
|
|
233
|
+
- **@jbpark/use-hooks 4.0** - React 훅 모음
|
|
234
|
+
- **date-fns 4.4** - 날짜 포매팅/파싱
|
|
235
|
+
- **react-colorful 5.8** - ColorPicker 입력
|
|
236
|
+
- **GSAP 3.15 / @gsap/react 2.1** - GSAP 애니메이션
|
|
235
237
|
|
|
236
238
|
## 🔧 개발
|
|
237
239
|
|
|
@@ -267,10 +269,16 @@ pnpm run generate:component
|
|
|
267
269
|
|
|
268
270
|
- `@jbpark/ui-kit` - 메인 패키지 (모든 컴포넌트)
|
|
269
271
|
- `@jbpark/ui-kit/Typography` - Typography 컴포넌트
|
|
272
|
+
- `@jbpark/ui-kit/Button` - Button 컴포넌트
|
|
273
|
+
- `@jbpark/ui-kit/Tag` - Tag 컴포넌트
|
|
274
|
+
- `@jbpark/ui-kit/Card` - Card 컴포넌트
|
|
275
|
+
- `@jbpark/ui-kit/Space` - Space 컴포넌트
|
|
270
276
|
- `@jbpark/ui-kit/Menu` - Menu 컴포넌트
|
|
271
277
|
- `@jbpark/ui-kit/Reveals` - Reveals 컴포넌트
|
|
272
|
-
- `@jbpark/ui-kit/
|
|
273
|
-
- `@jbpark/ui-kit/
|
|
278
|
+
- `@jbpark/ui-kit/CodeEditor` - CodeEditor 컴포넌트
|
|
279
|
+
- `@jbpark/ui-kit/Layout` - Layout 템플릿
|
|
280
|
+
- `@jbpark/ui-kit/utils` - 유틸리티 함수 (`cn`, `renderConditional`)
|
|
281
|
+
- `@jbpark/ui-kit/providers` - Config 프로바이더 및 테마
|
|
274
282
|
- `@jbpark/ui-kit/style.css` - 전역 스타일 (필수)
|
|
275
283
|
|
|
276
284
|
## 🤝 기여하기
|
package/README.md
CHANGED
|
@@ -9,8 +9,8 @@ A modern and reusable React UI component library built with TypeScript and Tailw
|
|
|
9
9
|
- **Package Name**: `@jbpark/ui-kit`
|
|
10
10
|
- **License**: MIT
|
|
11
11
|
- **Package Manager**: pnpm
|
|
12
|
-
- **Node.js Requirement**: >=
|
|
13
|
-
- **React Requirement**: ^
|
|
12
|
+
- **Node.js Requirement**: >= 20
|
|
13
|
+
- **React Requirement**: ^19.0.0
|
|
14
14
|
|
|
15
15
|
## 🏗 Architecture
|
|
16
16
|
|
|
@@ -27,8 +27,10 @@ src/
|
|
|
27
27
|
│ └── templates/ # 📄 Templates - Page layouts
|
|
28
28
|
├── core/ # ⚙️ Core UI logic (Base UI based)
|
|
29
29
|
├── lib/
|
|
30
|
-
│ ├──
|
|
31
|
-
│
|
|
30
|
+
│ ├── utils/ # 🛠 Utility functions
|
|
31
|
+
│ ├── colors.ts # 🎨 Colour token resolution
|
|
32
|
+
│ └── z-layers.ts # 🪟 Shared portal z-index scale
|
|
33
|
+
├── providers/ # 🧩 Config provider and theming
|
|
32
34
|
├── globals.css # 🎨 Global styles
|
|
33
35
|
└── index.ts # 📥 Package entry point
|
|
34
36
|
```
|
|
@@ -103,7 +105,7 @@ Accessibility-first core components based on Base UI:
|
|
|
103
105
|
### Utilities
|
|
104
106
|
|
|
105
107
|
- **`cn()`** - Class name merging utility (clsx + tailwind-merge)
|
|
106
|
-
- **`
|
|
108
|
+
- **`renderConditional()`** - Conditional render helper
|
|
107
109
|
|
|
108
110
|
## 🚀 Installation & Usage
|
|
109
111
|
|
|
@@ -171,13 +173,12 @@ import Typography from '@jbpark/ui-kit/Typography';
|
|
|
171
173
|
> `swiper`'s CSS as a side effect and can break Node/SSR builds (e.g. an
|
|
172
174
|
> Astro static build) that don't expect a bare `.css` import.
|
|
173
175
|
|
|
174
|
-
### Import Utilities and
|
|
176
|
+
### Import Utilities and Providers
|
|
175
177
|
|
|
176
178
|
```tsx
|
|
177
179
|
// Utility functions
|
|
178
|
-
|
|
179
|
-
import {
|
|
180
|
-
import { cn } from '@jbpark/ui-kit/utils';
|
|
180
|
+
import { Config } from '@jbpark/ui-kit/providers';
|
|
181
|
+
import { cn, renderConditional } from '@jbpark/ui-kit/utils';
|
|
181
182
|
```
|
|
182
183
|
|
|
183
184
|
### Import Styles
|
|
@@ -210,28 +211,29 @@ import '@jbpark/ui-kit/style.css';
|
|
|
210
211
|
|
|
211
212
|
### Core Libraries
|
|
212
213
|
|
|
213
|
-
- **React 19.
|
|
214
|
-
- **TypeScript
|
|
215
|
-
- **Tailwind CSS 4.
|
|
214
|
+
- **React 19.2** - UI library
|
|
215
|
+
- **TypeScript 6.0** - Static type checking
|
|
216
|
+
- **Tailwind CSS 4.3** - Utility-first CSS framework
|
|
216
217
|
|
|
217
218
|
### UI Libraries
|
|
218
219
|
|
|
219
|
-
- **Base UI** - Accessible headless UI
|
|
220
|
-
- **Lucide React
|
|
221
|
-
- **Motion
|
|
222
|
-
- **Swiper
|
|
223
|
-
- **
|
|
220
|
+
- **Base UI 1.8** - Accessible headless UI primitives
|
|
221
|
+
- **Lucide React 1.45** - Icon library
|
|
222
|
+
- **Motion 13.1** - Animation library
|
|
223
|
+
- **Swiper 14.1** - Touch slider
|
|
224
|
+
- **TipTap 3.30** - RichTextEditor engine
|
|
225
|
+
- **react-day-picker 10.0** - DatePicker calendar
|
|
226
|
+
- **react-resizable-panels 4.12** - Splitter panels
|
|
224
227
|
|
|
225
228
|
### Utilities
|
|
226
229
|
|
|
227
230
|
- **class-variance-authority 0.7.1** - Component variants management
|
|
228
231
|
- **clsx 2.1.1** - Conditional class names
|
|
229
|
-
- **tailwind-merge 3.
|
|
230
|
-
-
|
|
231
|
-
-
|
|
232
|
-
- **
|
|
233
|
-
-
|
|
234
|
-
- **tw-animate-css 1.3.7** - Tailwind animations
|
|
232
|
+
- **tailwind-merge 3.6** - Tailwind class merging
|
|
233
|
+
- **@jbpark/use-hooks 4.0** - React hooks collection
|
|
234
|
+
- **date-fns 4.4** - Date formatting and parsing
|
|
235
|
+
- **react-colorful 5.8** - ColorPicker input
|
|
236
|
+
- **GSAP 3.15 / @gsap/react 2.1** - GSAP animation
|
|
235
237
|
|
|
236
238
|
## 🔧 Development
|
|
237
239
|
|
|
@@ -267,10 +269,16 @@ This package exports the following modules:
|
|
|
267
269
|
|
|
268
270
|
- `@jbpark/ui-kit` - Main package (all components)
|
|
269
271
|
- `@jbpark/ui-kit/Typography` - Typography component
|
|
272
|
+
- `@jbpark/ui-kit/Button` - Button component
|
|
273
|
+
- `@jbpark/ui-kit/Tag` - Tag component
|
|
274
|
+
- `@jbpark/ui-kit/Card` - Card component
|
|
275
|
+
- `@jbpark/ui-kit/Space` - Space component
|
|
270
276
|
- `@jbpark/ui-kit/Menu` - Menu component
|
|
271
277
|
- `@jbpark/ui-kit/Reveals` - Reveals component
|
|
272
|
-
- `@jbpark/ui-kit/
|
|
273
|
-
- `@jbpark/ui-kit/
|
|
278
|
+
- `@jbpark/ui-kit/CodeEditor` - CodeEditor component
|
|
279
|
+
- `@jbpark/ui-kit/Layout` - Layout template
|
|
280
|
+
- `@jbpark/ui-kit/utils` - Utility functions (`cn`, `renderConditional`)
|
|
281
|
+
- `@jbpark/ui-kit/providers` - Config provider and theming
|
|
274
282
|
- `@jbpark/ui-kit/style.css` - Global styles (required)
|
|
275
283
|
|
|
276
284
|
## 🤝 Contributing
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"node.mjs","names":[],"sources":["../../../../src/components/atoms/skeleton/node.tsx"],"sourcesContent":["import { cn } from '@repo/ui/utils';\n\nimport Skeleton, { type Props as SkeletonProps } from './skeleton';\n\nconst Node = ({ classNames, ...props }: SkeletonProps) => {\n return (\n <Skeleton\n {...props}\n avatar={false}\n classNames={{\n ...classNames,\n item: cn(\n 'h-50 w-full
|
|
1
|
+
{"version":3,"file":"node.mjs","names":[],"sources":["../../../../src/components/atoms/skeleton/node.tsx"],"sourcesContent":["import { cn } from '@repo/ui/utils';\n\nimport Skeleton, { type Props as SkeletonProps } from './skeleton';\n\nconst Node = ({ classNames, ...props }: SkeletonProps) => {\n return (\n <Skeleton\n {...props}\n avatar={false}\n classNames={{\n ...classNames,\n item: cn(\n 'h-50 w-full',\n 'rounded-3xl',\n classNames?.item,\n //\n ),\n }}\n />\n );\n};\nexport default Node;\n"],"mappings":";;;;AAIA,MAAM,QAAQ,EAAE,YAAY,GAAG,YAA2B;CACxD,OACE,oBAAC,UAAD;EACE,GAAI;EACJ,QAAQ;EACR,YAAY;GACV,GAAG;GACH,MAAM,GACJ,eACA,eACA,YAAY,IAEd;EACF;CACD,CAAA;AAEL"}
|
|
@@ -23,13 +23,13 @@ const Skeleton = ({ active = true, loading = true, avatar, size = "default", dir
|
|
|
23
23
|
style,
|
|
24
24
|
...props,
|
|
25
25
|
children: [avatar && /* @__PURE__ */ jsx(Core, { className: cn("h-12 w-12", "rounded-xl", !active && "animate-none", classNames.avatar) }), /* @__PURE__ */ jsx("div", {
|
|
26
|
-
className: cn("flex grow", direction === "vertical" && "flex-col", classNames.wrapper),
|
|
26
|
+
className: cn("flex min-w-0 grow", direction === "vertical" && "flex-col", classNames.wrapper),
|
|
27
27
|
style: { gap },
|
|
28
28
|
children: Array.from({ length: count }).map((_, index) => {
|
|
29
29
|
const itemWidth = getValueAtIndex(width, index);
|
|
30
30
|
const itemHeight = getValueAtIndex(height, index);
|
|
31
31
|
return /* @__PURE__ */ jsx(Core, {
|
|
32
|
-
className: cn("rounded-md", !active && "animate-none", SIZES[size], classNames.item),
|
|
32
|
+
className: cn("rounded-md", !active && "animate-none", SIZES[size], "max-w-full", classNames.item),
|
|
33
33
|
style: {
|
|
34
34
|
width: itemWidth,
|
|
35
35
|
height: itemHeight
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"skeleton.mjs","names":["skeleton"],"sources":["../../../../src/components/atoms/skeleton/skeleton.tsx"],"sourcesContent":["'use client';\n\nimport { DEFAULT_LOCALE, useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nimport { skeleton } from '../../../core';\n\nconst { Skeleton: Core } = skeleton;\n\nconst getValueAtIndex = <T,>(value: T | T[], index: number) => {\n return Array.isArray(value) ? (value[index] ?? value[0]) : value;\n};\n\nexport interface Props extends React.ComponentPropsWithoutRef<'div'> {\n active?: boolean;\n loading?: boolean;\n avatar?: boolean;\n size?: 'default' | 'small' | 'large';\n count?: number;\n gap?: number;\n direction?: 'horizontal' | 'vertical';\n width?: string | number | (string | number)[];\n height?: string | number | (string | number)[];\n classNames?: {\n wrapper?: string;\n avatar?: string;\n item?: string;\n };\n}\n\nconst SIZES = {\n small: 'w-48 h-4',\n default: 'w-60 h-6',\n large: 'w-72 h-8',\n};\n\nconst Skeleton = ({\n active = true,\n loading = true,\n avatar,\n size = 'default',\n direction = 'vertical',\n count = 1,\n gap = 6,\n className,\n classNames = {},\n style,\n width,\n height,\n children,\n ...props\n}: Props) => {\n const { locale } = useConfig();\n\n // Not wrapping `children` here (unlike Spin's overlay mode) — Skeleton\n // is meant to swap in arbitrary real content once loading finishes,\n // which can include elements with strict parent requirements (e.g. a\n // `<tr>`), so adding a wrapper div could produce invalid markup.\n // `className`/`style`/rest props only ever describe the skeleton's own\n // placeholder markup, so there's nothing for them to apply to here.\n if (!loading) {\n return children ?? null;\n }\n\n return (\n <div\n role=\"status\"\n aria-label={locale.loading ?? DEFAULT_LOCALE.loading}\n className={cn('flex items-center gap-3', className)}\n style={style}\n {...props}\n >\n {avatar && (\n <Core\n className={cn(\n 'h-12 w-12',\n 'rounded-xl',\n !active && 'animate-none',\n classNames.avatar,\n )}\n />\n )}\n <div\n className={cn(\n 'flex grow',\n direction === 'vertical' && 'flex-col',\n classNames.wrapper,\n )}\n style={{\n gap,\n }}\n >\n {Array.from({ length: count }).map((_, index) => {\n const itemWidth = getValueAtIndex(width, index);\n const itemHeight = getValueAtIndex(height, index);\n\n return (\n <Core\n key={index}\n className={cn(\n 'rounded-md',\n !active && 'animate-none',\n SIZES[size],\n classNames.item,\n //\n )}\n style={{\n width: itemWidth,\n height: itemHeight,\n }}\n />\n );\n })}\n </div>\n </div>\n );\n};\n\nexport default Skeleton;\n"],"mappings":";;;;;;AAOA,MAAM,EAAE,UAAU,SAASA;AAE3B,MAAM,mBAAuB,OAAgB,UAAkB;CAC7D,OAAO,MAAM,QAAQ,KAAK,IAAK,MAAM,UAAU,MAAM,KAAM;AAC7D;AAmBA,MAAM,QAAQ;CACZ,OAAO;CACP,SAAS;CACT,OAAO;AACT;AAEA,MAAM,YAAY,EAChB,SAAS,MACT,UAAU,MACV,QACA,OAAO,WACP,YAAY,YACZ,QAAQ,GACR,MAAM,GACN,WACA,aAAa,CAAC,GACd,OACA,OACA,QACA,UACA,GAAG,YACQ;CACX,MAAM,EAAE,WAAW,UAAU;CAQ7B,IAAI,CAAC,SACH,OAAO,YAAY;CAGrB,OACE,qBAAC,OAAD;EACE,MAAK;EACL,cAAY,OAAO,WAAW,eAAe;EAC7C,WAAW,GAAG,2BAA2B,SAAS;EAC3C;EACP,GAAI;EALN,UAAA,CAOG,UACC,oBAAC,MAAD,EACE,WAAW,GACT,aACA,cACA,CAAC,UAAU,gBACX,WAAW,MACb,EACD,CAAA,GAEH,oBAAC,OAAD;GACE,WAAW,GACT,
|
|
1
|
+
{"version":3,"file":"skeleton.mjs","names":["skeleton"],"sources":["../../../../src/components/atoms/skeleton/skeleton.tsx"],"sourcesContent":["'use client';\n\nimport { DEFAULT_LOCALE, useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nimport { skeleton } from '../../../core';\n\nconst { Skeleton: Core } = skeleton;\n\nconst getValueAtIndex = <T,>(value: T | T[], index: number) => {\n return Array.isArray(value) ? (value[index] ?? value[0]) : value;\n};\n\nexport interface Props extends React.ComponentPropsWithoutRef<'div'> {\n active?: boolean;\n loading?: boolean;\n avatar?: boolean;\n size?: 'default' | 'small' | 'large';\n count?: number;\n gap?: number;\n direction?: 'horizontal' | 'vertical';\n width?: string | number | (string | number)[];\n height?: string | number | (string | number)[];\n classNames?: {\n wrapper?: string;\n avatar?: string;\n item?: string;\n };\n}\n\nconst SIZES = {\n small: 'w-48 h-4',\n default: 'w-60 h-6',\n large: 'w-72 h-8',\n};\n\nconst Skeleton = ({\n active = true,\n loading = true,\n avatar,\n size = 'default',\n direction = 'vertical',\n count = 1,\n gap = 6,\n className,\n classNames = {},\n style,\n width,\n height,\n children,\n ...props\n}: Props) => {\n const { locale } = useConfig();\n\n // Not wrapping `children` here (unlike Spin's overlay mode) — Skeleton\n // is meant to swap in arbitrary real content once loading finishes,\n // which can include elements with strict parent requirements (e.g. a\n // `<tr>`), so adding a wrapper div could produce invalid markup.\n // `className`/`style`/rest props only ever describe the skeleton's own\n // placeholder markup, so there's nothing for them to apply to here.\n if (!loading) {\n return children ?? null;\n }\n\n return (\n <div\n role=\"status\"\n aria-label={locale.loading ?? DEFAULT_LOCALE.loading}\n className={cn('flex items-center gap-3', className)}\n style={style}\n {...props}\n >\n {avatar && (\n <Core\n className={cn(\n 'h-12 w-12',\n 'rounded-xl',\n !active && 'animate-none',\n classNames.avatar,\n )}\n />\n )}\n <div\n className={cn(\n 'flex min-w-0 grow',\n direction === 'vertical' && 'flex-col',\n classNames.wrapper,\n )}\n style={{\n gap,\n }}\n >\n {Array.from({ length: count }).map((_, index) => {\n const itemWidth = getValueAtIndex(width, index);\n const itemHeight = getValueAtIndex(height, index);\n\n return (\n <Core\n key={index}\n className={cn(\n 'rounded-md',\n !active && 'animate-none',\n // SIZES are fixed widths; cap them so a narrow container\n // shrinks the placeholder instead of being overflowed.\n SIZES[size],\n 'max-w-full',\n classNames.item,\n //\n )}\n style={{\n width: itemWidth,\n height: itemHeight,\n }}\n />\n );\n })}\n </div>\n </div>\n );\n};\n\nexport default Skeleton;\n"],"mappings":";;;;;;AAOA,MAAM,EAAE,UAAU,SAASA;AAE3B,MAAM,mBAAuB,OAAgB,UAAkB;CAC7D,OAAO,MAAM,QAAQ,KAAK,IAAK,MAAM,UAAU,MAAM,KAAM;AAC7D;AAmBA,MAAM,QAAQ;CACZ,OAAO;CACP,SAAS;CACT,OAAO;AACT;AAEA,MAAM,YAAY,EAChB,SAAS,MACT,UAAU,MACV,QACA,OAAO,WACP,YAAY,YACZ,QAAQ,GACR,MAAM,GACN,WACA,aAAa,CAAC,GACd,OACA,OACA,QACA,UACA,GAAG,YACQ;CACX,MAAM,EAAE,WAAW,UAAU;CAQ7B,IAAI,CAAC,SACH,OAAO,YAAY;CAGrB,OACE,qBAAC,OAAD;EACE,MAAK;EACL,cAAY,OAAO,WAAW,eAAe;EAC7C,WAAW,GAAG,2BAA2B,SAAS;EAC3C;EACP,GAAI;EALN,UAAA,CAOG,UACC,oBAAC,MAAD,EACE,WAAW,GACT,aACA,cACA,CAAC,UAAU,gBACX,WAAW,MACb,EACD,CAAA,GAEH,oBAAC,OAAD;GACE,WAAW,GACT,qBACA,cAAc,cAAc,YAC5B,WAAW,OACb;GACA,OAAO,EACL,IACF;GAEC,UAAA,MAAM,KAAK,EAAE,QAAQ,MAAM,CAAC,CAAC,CAAC,KAAK,GAAG,UAAU;IAC/C,MAAM,YAAY,gBAAgB,OAAO,KAAK;IAC9C,MAAM,aAAa,gBAAgB,QAAQ,KAAK;IAEhD,OACE,oBAAC,MAAD;KAEE,WAAW,GACT,cACA,CAAC,UAAU,gBAGX,MAAM,OACN,cACA,WAAW,IAEb;KACA,OAAO;MACL,OAAO;MACP,QAAQ;KACV;IACD,GAfM,KAeN;GAEL,CAAC;EACE,CAAA,CACF;;AAET"}
|
|
@@ -20,7 +20,7 @@ const Reveals = ({ children, className, classNames, items = [], cascade = CASCAD
|
|
|
20
20
|
children: item.children
|
|
21
21
|
}, index));
|
|
22
22
|
return /* @__PURE__ */ jsx("div", {
|
|
23
|
-
className: cn("flex gap-5", className, classNames?.root),
|
|
23
|
+
className: cn("flex flex-wrap gap-5", className, classNames?.root),
|
|
24
24
|
...props,
|
|
25
25
|
children: renderItems(children ? Children.toArray(children).map((child) => ({ children: child })) : items)
|
|
26
26
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"reveals.mjs","names":[],"sources":["../../../../src/components/molecules/reveals/reveals.tsx"],"sourcesContent":["import { Children } from 'react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport Item, { type ItemProps } from './item';\n\nexport interface Props\n extends React.ComponentPropsWithoutRef<'div'>, ItemProps {\n cascade?: number;\n classNames?: {\n root?: string;\n item?: string;\n };\n once?: boolean;\n items?: ItemProps[];\n}\n\nexport const DURATION = 0.6;\nexport const DELAY = 0;\nexport const CASCADE = 0.1;\n\nconst Reveals = ({\n children,\n className,\n classNames,\n items = [],\n cascade = CASCADE,\n duration = DURATION,\n delay = DELAY,\n effect,\n once,\n viewport,\n variants,\n transition,\n ...props\n}: Props) => {\n const renderItems = (items: ItemProps[]) =>\n items.map((item, index) => (\n <Item\n key={index}\n effect={effect}\n duration={duration}\n delay={delay + cascade * index}\n once={once}\n viewport={viewport}\n variants={variants}\n transition={transition}\n {...item}\n className={cn(\n item.className,\n classNames?.item,\n //\n )}\n >\n {item.children}\n </Item>\n ));\n\n return (\n <div\n className={cn(\n 'flex gap-5',\n className,\n classNames?.root,\n //\n )}\n {...props}\n >\n {renderItems(\n children\n ? Children.toArray(children).map(child => ({\n children: child,\n }))\n : items,\n )}\n </div>\n );\n};\n\nexport default Reveals;\n"],"mappings":";;;;;AAiBA,MAAa,WAAW;AACxB,MAAa,QAAQ;AACrB,MAAa,UAAU;AAEvB,MAAM,WAAW,EACf,UACA,WACA,YACA,QAAQ,CAAC,GACT,UAAU,SACV,WAAW,UACX,QAAA,GACA,QACA,MACA,UACA,UACA,YACA,GAAG,YACQ;CACX,MAAM,eAAe,UACnB,MAAM,KAAK,MAAM,UACf,oBAAC,MAAD;EAEU;EACE;EACV,OAAO,QAAQ,UAAU;EACnB;EACI;EACA;EACE;EACZ,GAAI;EACJ,WAAW,GACT,KAAK,WACL,YAAY,IAEd;EAEC,UAAA,KAAK;CACF,GAhBC,KAgBD,CACP;CAEH,OACE,oBAAC,OAAD;EACE,WAAW,GACT,
|
|
1
|
+
{"version":3,"file":"reveals.mjs","names":[],"sources":["../../../../src/components/molecules/reveals/reveals.tsx"],"sourcesContent":["import { Children } from 'react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport Item, { type ItemProps } from './item';\n\nexport interface Props\n extends React.ComponentPropsWithoutRef<'div'>, ItemProps {\n cascade?: number;\n classNames?: {\n root?: string;\n item?: string;\n };\n once?: boolean;\n items?: ItemProps[];\n}\n\nexport const DURATION = 0.6;\nexport const DELAY = 0;\nexport const CASCADE = 0.1;\n\nconst Reveals = ({\n children,\n className,\n classNames,\n items = [],\n cascade = CASCADE,\n duration = DURATION,\n delay = DELAY,\n effect,\n once,\n viewport,\n variants,\n transition,\n ...props\n}: Props) => {\n const renderItems = (items: ItemProps[]) =>\n items.map((item, index) => (\n <Item\n key={index}\n effect={effect}\n duration={duration}\n delay={delay + cascade * index}\n once={once}\n viewport={viewport}\n variants={variants}\n transition={transition}\n {...item}\n className={cn(\n item.className,\n classNames?.item,\n //\n )}\n >\n {item.children}\n </Item>\n ));\n\n return (\n <div\n className={cn(\n 'flex flex-wrap gap-5',\n className,\n classNames?.root,\n //\n )}\n {...props}\n >\n {renderItems(\n children\n ? Children.toArray(children).map(child => ({\n children: child,\n }))\n : items,\n )}\n </div>\n );\n};\n\nexport default Reveals;\n"],"mappings":";;;;;AAiBA,MAAa,WAAW;AACxB,MAAa,QAAQ;AACrB,MAAa,UAAU;AAEvB,MAAM,WAAW,EACf,UACA,WACA,YACA,QAAQ,CAAC,GACT,UAAU,SACV,WAAW,UACX,QAAA,GACA,QACA,MACA,UACA,UACA,YACA,GAAG,YACQ;CACX,MAAM,eAAe,UACnB,MAAM,KAAK,MAAM,UACf,oBAAC,MAAD;EAEU;EACE;EACV,OAAO,QAAQ,UAAU;EACnB;EACI;EACA;EACE;EACZ,GAAI;EACJ,WAAW,GACT,KAAK,WACL,YAAY,IAEd;EAEC,UAAA,KAAK;CACF,GAhBC,KAgBD,CACP;CAEH,OACE,oBAAC,OAAD;EACE,WAAW,GACT,wBACA,WACA,YAAY,IAEd;EACA,GAAI;EAEH,UAAA,YACC,WACI,SAAS,QAAQ,QAAQ,CAAC,CAAC,KAAI,WAAU,EACvC,UAAU,MACZ,EAAE,IACF,KACN;CACG,CAAA;AAET"}
|
package/dist/core/badge.d.mts
CHANGED
|
@@ -2,7 +2,7 @@ import { useRender } from "@base-ui/react/use-render";
|
|
|
2
2
|
import { VariantProps } from "class-variance-authority";
|
|
3
3
|
//#region src/core/badge.d.ts
|
|
4
4
|
declare const badgeVariants: (props?: ({
|
|
5
|
-
variant?: "link" | "
|
|
5
|
+
variant?: "link" | "outline" | "default" | "secondary" | "destructive" | "ghost" | null | undefined;
|
|
6
6
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
7
7
|
type Props = Omit<useRender.ComponentProps<'span'>, 'className'> & VariantProps<typeof badgeVariants> & {
|
|
8
8
|
className?: string;
|
package/dist/core/button.d.mts
CHANGED
|
@@ -3,8 +3,8 @@ import { VariantProps } from "class-variance-authority";
|
|
|
3
3
|
import { Button } from "@base-ui/react/button";
|
|
4
4
|
//#region src/core/button.d.ts
|
|
5
5
|
declare const buttonVariants: (props?: ({
|
|
6
|
-
variant?: "link" | "
|
|
7
|
-
size?: "
|
|
6
|
+
variant?: "link" | "outline" | "default" | "secondary" | "destructive" | "ghost" | null | undefined;
|
|
7
|
+
size?: "default" | "icon" | "xs" | "sm" | "lg" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
|
|
8
8
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
9
9
|
type Props = Omit<React$1.ComponentProps<typeof Button>, 'className'> & VariantProps<typeof buttonVariants> & {
|
|
10
10
|
className?: string;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jbpark/ui-kit",
|
|
3
|
-
"version": "10.0.
|
|
3
|
+
"version": "10.0.2",
|
|
4
4
|
"description": "Modern React UI component library built with TypeScript, Tailwind CSS, and Base UI. Featuring atoms, molecules, organisms and layout templates for building beautiful interfaces.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|