@endsoul/react-ui 0.1.1 → 0.2.1
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.md +249 -28
- package/dist/index.cjs +1 -7
- package/dist/index.d.ts +11 -0
- package/dist/index.js +51 -2412
- package/dist/style.css +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
npm install @endsoul/react-ui
|
|
12
12
|
```
|
|
13
13
|
|
|
14
|
-
`react`, `react-dom`은 peerDependency
|
|
14
|
+
`react`, `react-dom`은 `^19.0.0` peerDependency입니다. 사용하는 프로젝트에 호환되는 React 19 버전이 설치되어 있어야 합니다.
|
|
15
15
|
|
|
16
16
|
## 사용법
|
|
17
17
|
|
|
@@ -26,7 +26,7 @@ import { Button } from '@endsoul/react-ui'
|
|
|
26
26
|
|
|
27
27
|
function App() {
|
|
28
28
|
return (
|
|
29
|
-
<Button
|
|
29
|
+
<Button type="button" onClick={() => console.log('clicked')}>
|
|
30
30
|
Click me
|
|
31
31
|
</Button>
|
|
32
32
|
)
|
|
@@ -37,30 +37,96 @@ function App() {
|
|
|
37
37
|
|
|
38
38
|
### Button
|
|
39
39
|
|
|
40
|
-
|
|
41
|
-
| ---------- | ---------------------------------------- | --------- | ------------------------ |
|
|
42
|
-
| `variant` | `'primary' \| 'secondary' \| 'outline'` | `primary` | 버튼 스타일 |
|
|
43
|
-
| `size` | `'sm' \| 'md' \| 'lg'` | `md` | 버튼 크기 |
|
|
44
|
-
| `disabled` | `boolean` | `false` | 비활성화 여부 |
|
|
40
|
+
Base UI Button을 감싼 버튼입니다. 현재 제공하는 스타일과 크기는 다음과 같습니다.
|
|
45
41
|
|
|
46
|
-
|
|
42
|
+
| Prop | Type | Default | 설명 |
|
|
43
|
+
| ----------- | ---------------------- | --------- | ------------------------------ |
|
|
44
|
+
| `variant` | `'default' \| 'ghost'` | `default` | 기본 테두리 버튼 / 테두리 없음 |
|
|
45
|
+
| `size` | `'default'` | `default` | 높이 36px의 기본 크기 |
|
|
46
|
+
| `disabled` | `boolean` | `false` | 비활성화 여부 |
|
|
47
|
+
| `className` | `string` | — | 추가 CSS 클래스 |
|
|
47
48
|
|
|
48
|
-
|
|
49
|
+
그 외 표준 `<button>` HTML 속성을 모두 그대로 지원합니다 (`onClick`, `type`, `form` 등).
|
|
49
50
|
|
|
50
|
-
|
|
51
|
+
```tsx
|
|
52
|
+
import { Button } from '@endsoul/react-ui'
|
|
51
53
|
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
54
|
+
export function ButtonExample() {
|
|
55
|
+
return (
|
|
56
|
+
<>
|
|
57
|
+
<Button type="button">저장</Button>
|
|
58
|
+
<Button type="button" variant="ghost">
|
|
59
|
+
취소
|
|
60
|
+
</Button>
|
|
61
|
+
<Button type="button" disabled>
|
|
62
|
+
저장 중
|
|
63
|
+
</Button>
|
|
64
|
+
</>
|
|
65
|
+
)
|
|
56
66
|
}
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
### Tabs
|
|
70
|
+
|
|
71
|
+
Base UI Tabs를 감싼 컴포넌트입니다. 현재 기본 디자인은 가로 탭이며, 활성 탭의 위·좌·우 테두리가 콘텐츠 영역과 연결됩니다.
|
|
57
72
|
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
73
|
+
| 컴포넌트 | 역할 | 주요 props |
|
|
74
|
+
| --------------- | ----------------------------------- | -------------------------------------------- |
|
|
75
|
+
| `Tabs` | 전체 탭의 선택 상태 관리 | `defaultValue`, `value`, `onValueChange` |
|
|
76
|
+
| `TabsList` | 탭 버튼 그룹 | `aria-label`, `activateOnFocus`, `loopFocus` |
|
|
77
|
+
| `TabsTab` | 선택 가능한 탭 버튼 | `value`(필수), `disabled` |
|
|
78
|
+
| `TabsIndicator` | 활성 탭을 따라 움직이는 배경·테두리 | `className`, `style` |
|
|
79
|
+
| `TabsPanel` | 선택된 탭에 대응하는 콘텐츠 | `value`(필수), `keepMounted` |
|
|
80
|
+
|
|
81
|
+
```tsx
|
|
82
|
+
import {
|
|
83
|
+
Tabs,
|
|
84
|
+
TabsIndicator,
|
|
85
|
+
TabsList,
|
|
86
|
+
TabsPanel,
|
|
87
|
+
TabsTab,
|
|
88
|
+
} from '@endsoul/react-ui'
|
|
89
|
+
|
|
90
|
+
export function TabsExample() {
|
|
91
|
+
return (
|
|
92
|
+
<Tabs defaultValue="overview">
|
|
93
|
+
<TabsList aria-label="프로젝트 정보">
|
|
94
|
+
<TabsTab value="overview">개요</TabsTab>
|
|
95
|
+
<TabsTab value="projects">프로젝트</TabsTab>
|
|
96
|
+
<TabsTab value="settings" disabled>
|
|
97
|
+
설정
|
|
98
|
+
</TabsTab>
|
|
99
|
+
<TabsIndicator />
|
|
100
|
+
</TabsList>
|
|
101
|
+
|
|
102
|
+
<div style={{ border: '1px solid black', backgroundColor: 'white' }}>
|
|
103
|
+
<TabsPanel value="overview">작업 공간의 통계와 활동입니다.</TabsPanel>
|
|
104
|
+
<TabsPanel value="projects">프로젝트 진행 상황입니다.</TabsPanel>
|
|
105
|
+
<TabsPanel value="settings">프로젝트 설정입니다.</TabsPanel>
|
|
106
|
+
</div>
|
|
107
|
+
</Tabs>
|
|
108
|
+
)
|
|
61
109
|
}
|
|
62
110
|
```
|
|
63
111
|
|
|
112
|
+
사용 시 다음 규칙을 지켜주세요.
|
|
113
|
+
|
|
114
|
+
- `TabsTab`과 `TabsPanel`의 `value`를 일치시키고, 각 탭의 값은 서로 다르게 지정합니다.
|
|
115
|
+
- 초기 선택은 활성화 가능한 탭의 값으로 `defaultValue`에 지정합니다. 외부에서 제어하려면 `value`와 `onValueChange`를 함께 사용합니다.
|
|
116
|
+
- `TabsIndicator`는 `TabsList` 안에 한 개 넣습니다. 생략해도 탭 전환은 동작하지만 현재 스타일의 선택 테두리는 표시되지 않습니다.
|
|
117
|
+
- 콘텐츠 외곽선은 예제의 `div`가 그립니다. `TabsPanel` 자체에는 외곽선이 없습니다.
|
|
118
|
+
- 현재 Indicator 배경은 흰색입니다. 배경을 바꾸면 콘텐츠와 Indicator를 같은 불투명 색으로 맞춰야 활성 탭 아래의 선이 가려집니다. `TabsList`의 `-mb-px`도 유지합니다.
|
|
119
|
+
- 방향키로 탭 사이의 포커스를 이동하고 Enter/Space로 선택합니다. 방향키 이동과 동시에 선택하려면 `TabsList`에 `activateOnFocus`를 지정합니다.
|
|
120
|
+
- 비활성 패널의 DOM과 내부 상태를 유지하려면 해당 `TabsPanel`에 `keepMounted`를 지정합니다(기본값 `false`).
|
|
121
|
+
|
|
122
|
+
현재 래퍼의 기본 스타일은 가로·밝은 배경용입니다. `orientation="vertical"`만 설정한다고 세로 스타일이 완성되지는 않습니다. 세로 배치와 Indicator의 위치·크기 스타일도 추가해야 합니다. 또한 현재 래퍼에서는 `className`을 문자열로 사용하세요. Base UI의 상태 함수형 `className`을 병합하는 처리는 구현되어 있지 않습니다.
|
|
123
|
+
|
|
124
|
+
## 스타일 적용
|
|
125
|
+
|
|
126
|
+
Button과 Tabs의 기본 스타일은 `@endsoul/react-ui/style.css`를 import하면 적용됩니다. 예제의 콘텐츠 테두리는 Tailwind가 없는 소비 프로젝트에서도 적용되도록 인라인 스타일로 지정했습니다. 소비 프로젝트에서 추가하는 Tailwind 클래스는 해당 프로젝트의 Tailwind 빌드 설정이 필요합니다.
|
|
127
|
+
|
|
128
|
+
현재 제공하는 Button·Tabs 사용에 별도의 portal 설정은 필요하지 않습니다. Dialog·Popover 등 portal 컴포넌트를 추가하면 해당 컴포넌트에 필요한 설정을 별도로 안내합니다.
|
|
129
|
+
|
|
64
130
|
## 로컬 개발
|
|
65
131
|
|
|
66
132
|
```bash
|
|
@@ -70,24 +136,179 @@ npm run storybook
|
|
|
70
136
|
|
|
71
137
|
컴포넌트를 브라우저에서 확인하며 개발할 수 있습니다 (`http://localhost:6006`).
|
|
72
138
|
|
|
73
|
-
| 스크립트
|
|
74
|
-
|
|
|
75
|
-
| `npm run storybook`
|
|
76
|
-
| `npm run build`
|
|
77
|
-
| `npm run test`
|
|
78
|
-
| `npm run lint`
|
|
79
|
-
| `npm run format`
|
|
139
|
+
| 스크립트 | 설명 |
|
|
140
|
+
| ------------------- | --------------------------- |
|
|
141
|
+
| `npm run storybook` | Storybook 개발 서버 실행 |
|
|
142
|
+
| `npm run build` | 라이브러리 빌드 (`dist/`) |
|
|
143
|
+
| `npm run test` | 유닛/브라우저 테스트 실행 |
|
|
144
|
+
| `npm run lint` | ESLint 검사 |
|
|
145
|
+
| `npm run format` | Prettier + ESLint 자동 수정 |
|
|
80
146
|
|
|
81
147
|
## 릴리즈
|
|
82
148
|
|
|
83
|
-
이 프로젝트는 [Changesets](https://
|
|
149
|
+
이 프로젝트는 [Changesets](https://changesets.dev/guide/cli)로 `@endsoul/react-ui` 패키지 전체의 버전을 관리합니다. 아래는 로컬 터미널에서 직접 npm에 게시하는 절차입니다. 모든 명령은 저장소 루트에서 실행하고, 오류가 발생하면 다음 단계로 넘어가지 마세요.
|
|
150
|
+
|
|
151
|
+
### 명령별 자동 처리 범위
|
|
152
|
+
|
|
153
|
+
| 명령 | 직접 준비하거나 입력할 것 | 자동으로 처리하는 것 |
|
|
154
|
+
| -------------------------- | --------------------------------------------------------- | ------------------------------------------------------------------------------ |
|
|
155
|
+
| `npm run changeset` | 대상 패키지, patch/minor/major, 사용자에게 알릴 변경 설명 | `.changeset/`에 변경 기록 파일 생성 |
|
|
156
|
+
| `npm run version-packages` | 변경 기록을 검토하고 커밋 | `package.json` 버전 변경, `CHANGELOG.md` 생성·갱신, 사용한 변경 기록 파일 제거 |
|
|
157
|
+
| `npm run release` | 검증 완료, 릴리즈 커밋, npm 게시 권한과 인증 | 빌드 후 npm 게시, Git 태그 생성 |
|
|
158
|
+
|
|
159
|
+
`package.json`의 버전과 `CHANGELOG.md`는 직접 먼저 수정하지 않습니다. README의 사용법·props 설명은 직접 관리해야 합니다. Changesets는 소스를 분석해 변경 설명을 작성하지 않으며, changeset에 입력한 내용을 CHANGELOG에 반영합니다. 현재 `.changeset/config.json`의 `commit`은 `false`이므로 커밋과 push도 직접 해야 합니다.
|
|
160
|
+
|
|
161
|
+
### 버전 선택
|
|
162
|
+
|
|
163
|
+
Button과 Tabs는 별도 npm 패키지가 아니므로 각각의 버전을 갖지 않습니다. **Tabs를 처음 추가했다고 패키지를 `1.0.0`으로 올릴 필요는 없습니다.**
|
|
164
|
+
|
|
165
|
+
| 선택 | 기준 | `0.1.1` 기준 예시 |
|
|
166
|
+
| ------- | ----------------------------------------------------- | ----------------- |
|
|
167
|
+
| `patch` | 기존 API와 호환되는 버그·스타일 수정 | `0.1.2` |
|
|
168
|
+
| `minor` | 기존 API와 호환되는 기능·컴포넌트 추가 | `0.2.0` |
|
|
169
|
+
| `major` | 안정 버전의 호환성을 깨는 변경 또는 첫 안정 버전 선언 | `1.0.0` |
|
|
170
|
+
|
|
171
|
+
기존 API를 유지하면서 Tabs를 추가하는 이번 릴리즈는 `minor`가 적절합니다. `1.0.0`은 패키지 전체의 공개 API를 안정화하고, 이후 호환성 규칙을 지키기로 결정할 때 선택합니다. `0.x`는 초기 개발 단계이므로 호환성을 깨는 변경이 있다면 변경 내용과 마이그레이션 방법을 명시하고 릴리즈 수준을 별도로 판단하세요. 위 숫자는 예시이며, 매번 현재 버전을 기준으로 계산됩니다. [Semantic Versioning](https://semver.org/spec/v2.0.0.html)
|
|
172
|
+
|
|
173
|
+
### 1. 소스·문서·인증 준비
|
|
174
|
+
|
|
175
|
+
- 릴리즈할 코드를 `main`에 반영하고, 릴리즈와 관계없는 미커밋 변경이 없는지 확인합니다. 진행 중인 변경이 있다면 먼저 커밋하거나 정리한 뒤 브랜치를 바꿉니다.
|
|
176
|
+
- 새 컴포넌트가 `src/index.ts`에서 export되는지 확인합니다. 현재 Button과 Tabs는 모두 export되어 있습니다.
|
|
177
|
+
- README 예제와 props가 실제 구현과 맞는지 확인합니다. 런타임에 사용하는 외부 패키지는 `dependencies` 또는 `peerDependencies`에 있어야 합니다.
|
|
178
|
+
- 프로젝트 의존성의 Node.js 요구 버전에 맞는 환경을 사용합니다. 현재 도구 구성에서는 Node.js 22.12 이상인 22.x와 npm 10.9 이상을 사용할 수 있습니다. `node --version`, `npm --version`으로 확인하고, 의존성을 업데이트하면 요구 버전도 다시 확인합니다.
|
|
179
|
+
|
|
180
|
+
```bash
|
|
181
|
+
git status --short
|
|
182
|
+
git switch main
|
|
183
|
+
git pull --ff-only
|
|
184
|
+
npm ci
|
|
185
|
+
npm config get registry
|
|
186
|
+
npm whoami
|
|
187
|
+
npm view @endsoul/react-ui version
|
|
188
|
+
```
|
|
189
|
+
|
|
190
|
+
registry는 일반적인 npm 공개 게시 기준 `https://registry.npmjs.org/`여야 합니다. 다른 주소라면 사용자/프로젝트 npm 설정을 확인하세요. `npm whoami`가 인증 오류를 내면 `npm login` 후 재확인합니다. 로그인한 계정에 `@endsoul/react-ui` 게시 권한이 있어야 하며, 실제 게시 때 npm이 요구하는 2FA 또는 게시용 인증을 완료해야 합니다. 로그인 성공만으로 게시 권한까지 확인되는 것은 아닙니다. [npm 게시 인증](https://docs.npmjs.com/requiring-2fa-for-package-publishing-and-settings-modification/)
|
|
191
|
+
|
|
192
|
+
`npm view`의 버전은 npm에 게시된 최신 버전이며 로컬 `package.json`과 비교합니다. 최초 게시 전이라면 404가 날 수 있지만, 기존 패키지라면 registry·이름·접근 권한을 먼저 확인합니다. 이미 로컬 버전만 올라가 있고 게시만 남은 상태라면 3단계를 다시 실행하지 말고 아래의 실패 시 재시도 절차를 확인하세요.
|
|
193
|
+
|
|
194
|
+
`npm ci`가 의존성/lockfile 불일치로 실패하면 의도한 `package.json` 변경을 확인한 뒤 `npm install`로 동기화하고 diff를 검토·커밋합니다. 버전만 다른 경우도 아래 3단계에서 lockfile을 동기화합니다.
|
|
195
|
+
|
|
196
|
+
현재 CHANGELOG 생성기는 `@changesets/changelog-github`이고 대상 저장소는 `kkw855/react-ui`입니다. 커밋·PR 정보를 가져오기 위해 **`version-packages` 실행 전에 GitHub 접근 토큰을 `GITHUB_TOKEN`으로 준비해야 합니다.** npm 로그인과는 별개입니다. [GitHub 토큰 설정](https://github.com/settings/tokens)에서 준비하며, 설치된 생성기가 안내하는 classic 토큰 권한은 `read:user`, `repo:status`입니다. 다른 토큰 종류를 사용하면 저장소 접근 설정과 그에 맞는 권한을 확인하세요.
|
|
197
|
+
|
|
198
|
+
macOS 기본 zsh에서는 다음처럼 토큰을 화면이나 명령 히스토리에 직접 남기지 않고 입력할 수 있습니다.
|
|
199
|
+
|
|
200
|
+
```zsh
|
|
201
|
+
read -rs 'GITHUB_TOKEN?GitHub token: '
|
|
202
|
+
export GITHUB_TOKEN
|
|
203
|
+
```
|
|
204
|
+
|
|
205
|
+
토큰은 README나 추적되는 파일에 작성하지 마세요. 버전 생성이 끝나면 `unset GITHUB_TOKEN`으로 해당 셸에서 제거할 수 있습니다. GitHub 링크가 필요 없다면 별도 설정 변경으로 기본 CHANGELOG 생성기를 선택할 수 있지만, 현재 절차는 GitHub 생성기를 유지하는 기준입니다.
|
|
206
|
+
|
|
207
|
+
### 2. 변경 사항 기록·커밋
|
|
84
208
|
|
|
85
209
|
```bash
|
|
86
|
-
npm run changeset
|
|
87
|
-
npm run version-packages # package.json 버전 업데이트 + CHANGELOG 생성
|
|
88
|
-
npm run release # 빌드 후 npm publish
|
|
210
|
+
npm run changeset
|
|
89
211
|
```
|
|
90
212
|
|
|
213
|
+
대상으로 `@endsoul/react-ui`를 선택하고 버전 수준과 설명을 입력합니다. 예를 들어 호환되는 Tabs 추가라면 `minor`, 설명은 `Tabs 컴포넌트 추가`입니다. 생성된 `.changeset/` 파일에서 대상 패키지와 내용을 확인합니다. 이미 이번 변경에 대한 changeset이 있다면 중복 생성하지 않습니다.
|
|
214
|
+
|
|
215
|
+
```bash
|
|
216
|
+
git status --short
|
|
217
|
+
git add .changeset
|
|
218
|
+
git diff --cached
|
|
219
|
+
git commit -m "chore: add release changeset"
|
|
220
|
+
git push
|
|
221
|
+
npm run changeset -- status
|
|
222
|
+
```
|
|
223
|
+
|
|
224
|
+
소스나 README 변경이 아직 커밋되지 않았다면 해당 파일도 검토 후 함께 커밋합니다. GitHub CHANGELOG 조회를 위해 changeset 커밋을 원격에도 반영합니다. `status`에서 예상 버전과 포함될 변경을 확인한 뒤 진행합니다. 여러 changeset이 있으면 모두 반영되며, 가장 높은 변경 수준이 버전을 결정합니다.
|
|
225
|
+
|
|
226
|
+
### 3. 버전·CHANGELOG 생성 및 lockfile 동기화
|
|
227
|
+
|
|
228
|
+
```bash
|
|
229
|
+
npm run version-packages
|
|
230
|
+
npm install --package-lock-only
|
|
231
|
+
git diff -- package.json package-lock.json CHANGELOG.md .changeset
|
|
232
|
+
git status --short
|
|
233
|
+
```
|
|
234
|
+
|
|
235
|
+
`package.json` 버전, CHANGELOG 내용, `package-lock.json`의 루트 버전, changeset 파일 삭제를 확인합니다. `version-packages`가 lockfile까지 동기화한다고 가정하지 마세요. 원치 않는 의존성 변경이 보이면 원인을 확인한 뒤 진행합니다. 이 단계는 아직 npm에 게시하지 않습니다.
|
|
236
|
+
|
|
237
|
+
### 4. 검사·빌드·배포 파일 확인
|
|
238
|
+
|
|
239
|
+
```bash
|
|
240
|
+
npm run check
|
|
241
|
+
npm run lint
|
|
242
|
+
npx tsc --noEmit
|
|
243
|
+
npm run test:ci
|
|
244
|
+
npm run build
|
|
245
|
+
npm pack --dry-run
|
|
246
|
+
```
|
|
247
|
+
|
|
248
|
+
- 포맷, lint, 타입, 테스트, 빌드를 모두 통과해야 합니다. `release`는 이 중 빌드만 자동 실행합니다.
|
|
249
|
+
- 브라우저 테스트에서 Chromium 실행 파일이 없다고 나오면 `npx playwright install chromium`으로 설치한 후 테스트를 다시 실행합니다.
|
|
250
|
+
- `npm run format`은 파일을 실제 수정합니다. 사용했다면 diff를 확인하고 관련 검사를 다시 통과시킵니다.
|
|
251
|
+
- `npm pack --dry-run`은 게시 없이 배포 파일 목록을 보여줍니다. `dist/index.js`, `dist/index.cjs`, `dist/index.d.ts`, `dist/style.css`와 README·라이선스가 포함되는지 확인합니다. `package.json`의 `exports` 경로와 일치해야 합니다.
|
|
252
|
+
- 새 컴포넌트가 빌드된 JS와 타입 선언에서 export되는지 확인합니다. 현재 `files`는 `dist`만 지정하므로 저장소의 모든 파일이 배포되는 것은 아닙니다. CHANGELOG의 npm 포함 여부도 실제 목록으로 확인하세요.
|
|
253
|
+
|
|
254
|
+
출시 전 소비 환경을 확인하려면 `npm pack`으로 실제 `.tgz`를 만들고, 별도 React 19 테스트 프로젝트에서 그 파일을 설치합니다. Button·Tabs import, CSS import, 렌더링과 탭 전환이 동작하는지 확인합니다. 이 확인도 npm 게시 없이 가능합니다.
|
|
255
|
+
|
|
256
|
+
### 5. 릴리즈 커밋
|
|
257
|
+
|
|
258
|
+
검사 중 수정한 소스·문서가 있으면 먼저 검토하고 커밋합니다. 마지막으로 버전 관련 파일을 커밋하여 게시할 소스와 버전을 Git에 남깁니다.
|
|
259
|
+
|
|
260
|
+
```bash
|
|
261
|
+
git add package.json package-lock.json CHANGELOG.md .changeset
|
|
262
|
+
git diff --cached
|
|
263
|
+
git commit -m "chore: version packages"
|
|
264
|
+
git status --short
|
|
265
|
+
git push
|
|
266
|
+
```
|
|
267
|
+
|
|
268
|
+
`git status --short`에 출력이 없고, 최신 커밋이 릴리즈 버전 커밋인지 확인합니다. 보호된 `main`이면 저장소 정책에 따라 PR로 병합한 뒤 최신 `main`을 받아 게시합니다. 게시 전에 별도의 기능 변경을 끼워 넣지 마세요. 생성되는 Git 태그가 이 릴리즈의 소스를 가리켜야 합니다.
|
|
269
|
+
|
|
270
|
+
### 6. npm 게시
|
|
271
|
+
|
|
272
|
+
```bash
|
|
273
|
+
npm run release
|
|
274
|
+
```
|
|
275
|
+
|
|
276
|
+
실제 스크립트는 `npm run build && changeset publish`입니다. 빌드에 성공하면 아직 npm에 없는 현재 버전을 게시하며, 기본 npm dist-tag는 `latest`입니다. `publishConfig.access`와 Changesets `access`가 모두 `public`이므로 scoped 패키지도 공개 게시됩니다.
|
|
277
|
+
|
|
278
|
+
이 단계는 실제 외부 게시입니다. `npm run release -- --dry-run`을 배포 미리보기 용도로 사용하지 마세요. 파일 목록 확인은 앞 단계의 `npm pack --dry-run`으로 합니다. 게시 중 표시되는 인증 안내를 완료하고 성공 메시지를 확인합니다.
|
|
279
|
+
|
|
280
|
+
### 7. 게시 확인·Git 태그 push
|
|
281
|
+
|
|
282
|
+
```bash
|
|
283
|
+
npm view @endsoul/react-ui version
|
|
284
|
+
npm view @endsoul/react-ui dist-tags --json
|
|
285
|
+
git tag --points-at HEAD
|
|
286
|
+
git push --follow-tags
|
|
287
|
+
```
|
|
288
|
+
|
|
289
|
+
npm의 버전과 `latest`가 이번 릴리즈를 가리키는지 확인합니다. 단일 패키지 저장소의 기본 Git 태그는 `v0.2.0` 같은 형태입니다. Changesets가 태그를 만들어도 원격 push는 직접 해야 합니다. GitHub Releases 페이지의 릴리즈 노트는 이 로컬 스크립트가 자동 생성하지 않습니다.
|
|
290
|
+
|
|
291
|
+
마지막으로 소비 프로젝트에서 게시한 정확한 버전을 설치해 확인합니다. 예를 들어 이번 릴리즈가 `0.2.0`인 경우:
|
|
292
|
+
|
|
293
|
+
```bash
|
|
294
|
+
npm install @endsoul/react-ui@0.2.0
|
|
295
|
+
```
|
|
296
|
+
|
|
297
|
+
이 명령은 라이브러리 저장소가 아니라 **소비 프로젝트**에서 실행합니다. 해당 프로젝트의 lockfile 변경도 확인하세요. 특히 `^0.1.1` 범위는 `0.2.0`을 포함하지 않으므로 minor 릴리즈 후에는 소비 프로젝트의 의존성 버전을 명시적으로 올려야 합니다.
|
|
298
|
+
|
|
299
|
+
### 실패했을 때 재시도
|
|
300
|
+
|
|
301
|
+
| 상황 | 다음 행동 |
|
|
302
|
+
| -------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
303
|
+
| `version-packages`에서 GitHub 인증/조회 오류 | `GITHUB_TOKEN`, 저장소 설정, changeset 커밋 push 여부 확인. 파일 diff와 남은 changeset을 확인한 뒤 미완료 단계를 재시도 |
|
|
304
|
+
| `No unreleased changesets found` | changeset을 아직 만들지 않았는지, 이미 버전 생성에 사용했는지 확인. 이미 버전이 올라갔다면 게시 단계로 진행 |
|
|
305
|
+
| 버전 생성 후 검사·빌드 실패 | 오류 수정 후 검사·빌드를 다시 실행하고 변경을 커밋. 같은 릴리즈를 위해 changeset과 버전을 다시 만들지 않음 |
|
|
306
|
+
| 게시 인증/네트워크 오류 | 먼저 `npm view @endsoul/react-ui versions --json`으로 목표 버전의 게시 여부 확인. 미게시 상태면 인증 등을 해결하고 같은 버전으로 `npm run release` 재시도 |
|
|
307
|
+
| 목표 버전이 이미 npm에 존재 | 같은 버전은 덮어쓸 수 없음. 이번 게시가 성공한 것이라면 태그/push/검증만 마무리. 코드 수정이 추가로 필요하면 새 changeset으로 다음 버전 출시 |
|
|
308
|
+
| npm 게시 성공, 태그 생성 또는 push 실패 | npm 게시를 되돌리거나 버전을 올릴 필요 없음. 정확한 릴리즈 커밋에서 태그 상태 확인. 태그가 없다면 `npm run changeset -- git-tag`, 이후 `git push --follow-tags` |
|
|
309
|
+
|
|
310
|
+
오류 후 세 명령을 무조건 처음부터 반복하지 마세요. npm 게시 여부와 로컬 버전·CHANGELOG·changeset 상태를 기준으로 이어서 진행합니다. [Changesets 릴리즈 절차](https://changesets.dev/guide/versioning-and-publishing)
|
|
311
|
+
|
|
91
312
|
## 라이선스
|
|
92
313
|
|
|
93
314
|
[MIT](./LICENSE)
|
package/dist/index.cjs
CHANGED
|
@@ -1,7 +1 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});
|
|
2
|
-
`));return l.cloneElement(i,e)}if(e&&typeof e==`string`)return Oe(e,n);throw Error(process.env.NODE_ENV===`production`?I(8):`Base UI: Render element or function are not defined.`)}function De(e){let t=e.name;t.length!==0&&we.test(t)&&Te.test(t)&&ge(`The \`render\` prop received a function named \`${t}\` that starts with an uppercase letter.`,"This usually means a React component was passed directly as `render={Component}`.","Base UI calls `render` as a plain function, which can break the Rules of Hooks during reconciliation.",`If this is an intentional render callback, rename it to start with a lowercase letter.`,"Use `render={<Component />}` or `render={(props) => <Component {...props} />}` instead.",`https://base-ui.com/r/invalid-render-prop`)}function Oe(e,t){return e===`button`?(0,l.createElement)(`button`,{type:`button`,...t,key:t.key}):e===`img`?(0,l.createElement)(`img`,{alt:``,...t,key:t.key}):l.createElement(e,t)}var ke=l.forwardRef(function(e,t){let{render:n,className:r,disabled:i=!1,focusableWhenDisabled:a=!1,nativeButton:o=!0,style:s,...c}=e,{getButtonProps:l,buttonRef:u}=se({disabled:i,focusableWhenDisabled:a,native:o});return be(`button`,e,{state:{disabled:i},ref:[t,u],props:[c,l]})});process.env.NODE_ENV!==`production`&&(ke.displayName=`Button`);function Ae(e){var t,n,r=``;if(typeof e==`string`||typeof e==`number`)r+=e;else if(typeof e==`object`){if(Array.isArray(e)){var i=e.length;for(t=0;t<i;t++)e[t]&&(n=Ae(e[t]))&&(r&&(r+=` `),r+=n)}else for(n in e)e[n]&&(r&&(r+=` `),r+=n)}return r}function je(){for(var e,t,n=0,r=``,i=arguments.length;n<i;n++)(e=arguments[n])&&(t=Ae(e))&&(r&&(r+=` `),r+=t);return r}var Me=e=>typeof e==`boolean`?`${e}`:e===0?`0`:e,Ne=je,Pe=(e,t)=>n=>{if(t?.variants==null)return Ne(e,n?.class,n?.className);let{variants:r,defaultVariants:i}=t,a=Object.keys(r).map(e=>{let t=n?.[e],a=i?.[e];if(t===null)return null;let o=Me(t)||Me(a);return r[e][o]}),o=n&&Object.entries(n).reduce((e,t)=>{let[n,r]=t;return r===void 0||(e[n]=r),e},{});return Ne(e,a,t?.compoundVariants?.reduce((e,t)=>{let{class:n,className:r,...a}=t;return Object.entries(a).every(e=>{let[t,n]=e;return Array.isArray(n)?n.includes({...i,...o}[t]):{...i,...o}[t]===n})?[...e,n,r]:e},[]),n?.class,n?.className)},Fe=(e,t)=>{let n=Array(e.length+t.length);for(let t=0;t<e.length;t++)n[t]=e[t];for(let r=0;r<t.length;r++)n[e.length+r]=t[r];return n},Ie=(e,t)=>({classGroupId:e,validator:t}),Le=(e=new Map,t=null,n)=>({nextPart:e,validators:t,classGroupId:n}),Re=`-`,ze=[],Be=`arbitrary..`,Ve=e=>{let t=We(e),{conflictingClassGroups:n,conflictingClassGroupModifiers:r}=e;return{getClassGroupId:e=>{if(e.startsWith(`[`)&&e.endsWith(`]`))return Ue(e);let n=e.split(Re);return He(n,+(n[0]===``&&n.length>1),t)},getConflictingClassGroupIds:(e,t)=>{if(t){let t=r[e],i=n[e];return t?i?Fe(i,t):t:i||ze}return n[e]||ze}}},He=(e,t,n)=>{if(e.length-t===0)return n.classGroupId;let r=e[t],i=n.nextPart.get(r);if(i){let n=He(e,t+1,i);if(n)return n}let a=n.validators;if(a===null)return;let o=t===0?e.join(Re):e.slice(t).join(Re),s=a.length;for(let e=0;e<s;e++){let t=a[e];if(t.validator(o))return t.classGroupId}},Ue=e=>e.slice(1,-1).indexOf(`:`)===-1?void 0:(()=>{let t=e.slice(1,-1),n=t.indexOf(`:`),r=t.slice(0,n);return r?Be+r:void 0})(),We=e=>{let{theme:t,classGroups:n}=e;return Ge(n,t)},Ge=(e,t)=>{let n=Le();for(let r in e){let i=e[r];Ke(i,n,r,t)}return n},Ke=(e,t,n,r)=>{let i=e.length;for(let a=0;a<i;a++){let i=e[a];qe(i,t,n,r)}},qe=(e,t,n,r)=>{if(typeof e==`string`){Je(e,t,n);return}if(typeof e==`function`){Ye(e,t,n,r);return}Xe(e,t,n,r)},Je=(e,t,n)=>{let r=e===``?t:Ze(t,e);r.classGroupId=n},Ye=(e,t,n,r)=>{if(Qe(e)){Ke(e(r),t,n,r);return}t.validators===null&&(t.validators=[]),t.validators.push(Ie(n,e))},Xe=(e,t,n,r)=>{let i=Object.entries(e),a=i.length;for(let e=0;e<a;e++){let[a,o]=i[e];Ke(o,Ze(t,a),n,r)}},Ze=(e,t)=>{let n=e,r=t.split(Re),i=r.length;for(let e=0;e<i;e++){let t=r[e],i=n.nextPart.get(t);i||(i=Le(),n.nextPart.set(t,i)),n=i}return n},Qe=e=>`isThemeGetter`in e&&e.isThemeGetter===!0,$e=e=>{if(e<1)return{get:()=>void 0,set:()=>{}};let t=0,n=Object.create(null),r=Object.create(null),i=(i,a)=>{n[i]=a,t++,t>e&&(t=0,r=n,n=Object.create(null))};return{get(e){let t=n[e];if(t!==void 0)return t;if((t=r[e])!==void 0)return i(e,t),t},set(e,t){e in n?n[e]=t:i(e,t)}}},et=`!`,tt=`:`,nt=[],rt=(e,t,n,r,i)=>({modifiers:e,hasImportantModifier:t,baseClassName:n,maybePostfixModifierPosition:r,isExternal:i}),it=e=>{let{prefix:t,experimentalParseClassName:n}=e,r=e=>{let t=[],n=0,r=0,i=0,a,o=e.length;for(let s=0;s<o;s++){let o=e[s];if(n===0&&r===0){if(o===tt){t.push(e.slice(i,s)),i=s+1;continue}if(o===`/`){a=s;continue}}o===`[`?n++:o===`]`?n--:o===`(`?r++:o===`)`&&r--}let s=t.length===0?e:e.slice(i),c=s,l=!1;s.endsWith(et)?(c=s.slice(0,-1),l=!0):s.startsWith(et)&&(c=s.slice(1),l=!0);let u=a&&a>i?a-i:void 0;return rt(t,l,c,u)};if(t){let e=t+tt,n=r;r=t=>t.startsWith(e)?n(t.slice(e.length)):rt(nt,!1,t,void 0,!0)}if(n){let e=r;r=t=>n({className:t,parseClassName:e})}return r},at=e=>{let t=new Map;return e.orderSensitiveModifiers.forEach((e,n)=>{t.set(e,1e6+n)}),e=>{let n=[],r=[];for(let i=0;i<e.length;i++){let a=e[i],o=a[0]===`[`,s=t.has(a);o||s?(r.length>0&&(r.sort(),n.push(...r),r=[]),n.push(a)):r.push(a)}return r.length>0&&(r.sort(),n.push(...r)),n}},ot=e=>({cache:$e(e.cacheSize),parseClassName:it(e),sortModifiers:at(e),postfixLookupClassGroupIds:st(e),...Ve(e)}),st=e=>{let t=Object.create(null),n=e.postfixLookupClassGroups;if(n)for(let e=0;e<n.length;e++)t[n[e]]=!0;return t},ct=/\s+/,lt=(e,t)=>{let{parseClassName:n,getClassGroupId:r,getConflictingClassGroupIds:i,sortModifiers:a,postfixLookupClassGroupIds:o}=t,s=[],c=e.trim().split(ct),l=``;for(let e=c.length-1;e>=0;--e){let t=c[e],{isExternal:u,modifiers:d,hasImportantModifier:f,baseClassName:p,maybePostfixModifierPosition:m}=n(t);if(u){l=t+(l.length>0?` `+l:l);continue}let h=!!m,g;if(h){g=r(p.substring(0,m));let e=g&&o[g]?r(p):void 0;e&&e!==g&&(g=e,h=!1)}else g=r(p);if(!g){if(!h){l=t+(l.length>0?` `+l:l);continue}if(g=r(p),!g){l=t+(l.length>0?` `+l:l);continue}h=!1}let _=d.length===0?``:d.length===1?d[0]:a(d).join(`:`),ee=f?_+et:_,v=ee+g;if(s.indexOf(v)>-1)continue;s.push(v);let y=i(g,h);for(let e=0;e<y.length;++e){let t=y[e];s.push(ee+t)}l=t+(l.length>0?` `+l:l)}return l},ut=(...e)=>{let t=0,n,r,i=``;for(;t<e.length;)(n=e[t++])&&(r=dt(n))&&(i&&(i+=` `),i+=r);return i},dt=e=>{if(typeof e==`string`)return e;let t,n=``;for(let r=0;r<e.length;r++)e[r]&&(t=dt(e[r]))&&(n&&(n+=` `),n+=t);return n},ft=(e,...t)=>{let n,r,i,a,o=o=>(n=ot(t.reduce((e,t)=>t(e),e())),r=n.cache.get,i=n.cache.set,a=s,s(o)),s=e=>{let t=r(e);if(t)return t;let a=lt(e,n);return i(e,a),a};return a=o,(...e)=>a(ut(...e))},pt=[],W=e=>{let t=t=>t[e]||pt;return t.isThemeGetter=!0,t},mt=/^\[(?:(\w[\w-]*):)?(.+)\]$/i,ht=/^\((?:(\w[\w-]*):)?(.+)\)$/i,gt=/^\d+(?:\.\d+)?\/\d+(?:\.\d+)?$/,_t=/^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/,vt=/\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))|\b(calc|min|max|clamp)\(.+\)|^0$/,yt=/^(rgba?|hsla?|hwb|(ok)?(lab|lch)|color-mix)\(.+\)$/,bt=/^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/,xt=/^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/,G=e=>gt.test(e),K=e=>!!e&&!Number.isNaN(Number(e)),q=e=>!!e&&Number.isInteger(Number(e)),St=e=>e.endsWith(`%`)&&K(e.slice(0,-1)),J=e=>_t.test(e),Ct=()=>!0,wt=e=>vt.test(e)&&!yt.test(e),Tt=()=>!1,Et=e=>bt.test(e),Dt=e=>xt.test(e),Ot=e=>!Y(e)&&!Z(e),kt=e=>e.startsWith(`@container`)&&(e[10]===`/`&&e[11]!==void 0||e[11]===`s`&&e[16]!==void 0&&e.startsWith(`-size/`,10)||e[11]===`n`&&e[18]!==void 0&&e.startsWith(`-normal/`,10)),At=e=>Q(e,Kt,Tt),Y=e=>mt.test(e),X=e=>Q(e,qt,wt),jt=e=>Q(e,Jt,K),Mt=e=>Q(e,Xt,Ct),Nt=e=>Q(e,Yt,Tt),Pt=e=>Q(e,Wt,Tt),Ft=e=>Q(e,Gt,Dt),It=e=>Q(e,Zt,Et),Z=e=>ht.test(e),Lt=e=>$(e,qt),Rt=e=>$(e,Yt),zt=e=>$(e,Wt),Bt=e=>$(e,Kt),Vt=e=>$(e,Gt),Ht=e=>$(e,Zt,!0),Ut=e=>$(e,Xt,!0),Q=(e,t,n)=>{let r=mt.exec(e);return r?r[1]?t(r[1]):n(r[2]):!1},$=(e,t,n=!1)=>{let r=ht.exec(e);return r?r[1]?t(r[1]):n:!1},Wt=e=>e===`position`||e===`percentage`,Gt=e=>e===`image`||e===`url`,Kt=e=>e===`length`||e===`size`||e===`bg-size`,qt=e=>e===`length`,Jt=e=>e===`number`,Yt=e=>e===`family-name`,Xt=e=>e===`number`||e===`weight`,Zt=e=>e===`shadow`,Qt=ft(()=>{let e=W(`color`),t=W(`font`),n=W(`text`),r=W(`font-weight`),i=W(`tracking`),a=W(`leading`),o=W(`breakpoint`),s=W(`container`),c=W(`spacing`),l=W(`radius`),u=W(`shadow`),d=W(`inset-shadow`),f=W(`text-shadow`),p=W(`drop-shadow`),m=W(`blur`),h=W(`perspective`),g=W(`aspect`),_=W(`ease`),ee=W(`animate`),v=()=>[`auto`,`avoid`,`all`,`avoid-page`,`page`,`left`,`right`,`column`],y=()=>[`center`,`top`,`bottom`,`left`,`right`,`top-left`,`left-top`,`top-right`,`right-top`,`bottom-right`,`right-bottom`,`bottom-left`,`left-bottom`],b=()=>[...y(),Z,Y],x=()=>[`auto`,`hidden`,`clip`,`visible`,`scroll`],S=()=>[`auto`,`contain`,`none`],C=()=>[Z,Y,c],w=()=>[G,`full`,`auto`,...C()],T=()=>[q,`none`,`subgrid`,Z,Y],te=()=>[`auto`,{span:[`full`,q,Z,Y]},q,Z,Y],E=()=>[q,`auto`,Z,Y],D=()=>[`auto`,`min`,`max`,`fr`,Z,Y],O=()=>[`start`,`end`,`center`,`between`,`around`,`evenly`,`stretch`,`baseline`,`center-safe`,`end-safe`],k=()=>[`start`,`end`,`center`,`stretch`,`center-safe`,`end-safe`],A=()=>[`auto`,...C()],j=()=>[G,`auto`,`full`,`dvw`,`dvh`,`lvw`,`lvh`,`svw`,`svh`,`min`,`max`,`fit`,...C()],M=()=>[G,`screen`,`full`,`dvw`,`lvw`,`svw`,`min`,`max`,`fit`,...C()],N=()=>[G,`screen`,`full`,`lh`,`dvh`,`lvh`,`svh`,`min`,`max`,`fit`,...C()],P=()=>[e,Z,Y],F=()=>[...y(),zt,Pt,{position:[Z,Y]}],ne=()=>[`no-repeat`,{repeat:[``,`x`,`y`,`space`,`round`]}],re=()=>[`auto`,`cover`,`contain`,Bt,At,{size:[Z,Y]}],ie=()=>[St,Lt,X],I=()=>[``,`none`,`full`,l,Z,Y],L=()=>[``,K,Lt,X],ae=()=>[`solid`,`dashed`,`dotted`,`double`],oe=()=>[`normal`,`multiply`,`screen`,`overlay`,`darken`,`lighten`,`color-dodge`,`color-burn`,`hard-light`,`soft-light`,`difference`,`exclusion`,`hue`,`saturation`,`color`,`luminosity`],R=()=>[K,St,zt,Pt],se=()=>[``,`none`,m,Z,Y],z=()=>[`none`,K,Z,Y],B=()=>[`none`,K,Z,Y],V=()=>[K,Z,Y],H=()=>[G,`full`,...C()];return{cacheSize:500,theme:{animate:[`spin`,`ping`,`pulse`,`bounce`],aspect:[`video`],blur:[J],breakpoint:[J],color:[Ct],container:[J],"drop-shadow":[J],ease:[`in`,`out`,`in-out`],font:[Ot],"font-weight":[`thin`,`extralight`,`light`,`normal`,`medium`,`semibold`,`bold`,`extrabold`,`black`],"inset-shadow":[J],leading:[`none`,`tight`,`snug`,`normal`,`relaxed`,`loose`],perspective:[`dramatic`,`near`,`normal`,`midrange`,`distant`,`none`],radius:[J],shadow:[J],spacing:[`px`,K],text:[J],"text-shadow":[J],tracking:[`tighter`,`tight`,`normal`,`wide`,`wider`,`widest`]},classGroups:{aspect:[{aspect:[`auto`,`square`,G,Y,Z,g]}],container:[`container`],"container-type":[{"@container":[``,`normal`,`size`,Z,Y]}],"container-named":[kt],columns:[{columns:[K,Y,Z,s]}],"break-after":[{"break-after":v()}],"break-before":[{"break-before":v()}],"break-inside":[{"break-inside":[`auto`,`avoid`,`avoid-page`,`avoid-column`]}],"box-decoration":[{"box-decoration":[`slice`,`clone`]}],box:[{box:[`border`,`content`]}],display:[`block`,`inline-block`,`inline`,`flex`,`inline-flex`,`table`,`inline-table`,`table-caption`,`table-cell`,`table-column`,`table-column-group`,`table-footer-group`,`table-header-group`,`table-row-group`,`table-row`,`flow-root`,`grid`,`inline-grid`,`contents`,`list-item`,`hidden`],sr:[`sr-only`,`not-sr-only`],float:[{float:[`right`,`left`,`none`,`start`,`end`]}],clear:[{clear:[`left`,`right`,`both`,`none`,`start`,`end`]}],isolation:[`isolate`,`isolation-auto`],"object-fit":[{object:[`contain`,`cover`,`fill`,`none`,`scale-down`]}],"object-position":[{object:b()}],overflow:[{overflow:x()}],"overflow-x":[{"overflow-x":x()}],"overflow-y":[{"overflow-y":x()}],overscroll:[{overscroll:S()}],"overscroll-x":[{"overscroll-x":S()}],"overscroll-y":[{"overscroll-y":S()}],position:[`static`,`fixed`,`absolute`,`relative`,`sticky`],inset:[{inset:w()}],"inset-x":[{"inset-x":w()}],"inset-y":[{"inset-y":w()}],start:[{"inset-s":w(),start:w()}],end:[{"inset-e":w(),end:w()}],"inset-bs":[{"inset-bs":w()}],"inset-be":[{"inset-be":w()}],top:[{top:w()}],right:[{right:w()}],bottom:[{bottom:w()}],left:[{left:w()}],visibility:[`visible`,`invisible`,`collapse`],z:[{z:[q,`auto`,Z,Y]}],basis:[{basis:[G,`full`,`auto`,s,...C()]}],"flex-direction":[{flex:[`row`,`row-reverse`,`col`,`col-reverse`]}],"flex-wrap":[{flex:[`nowrap`,`wrap`,`wrap-reverse`]}],flex:[{flex:[K,G,`auto`,`initial`,`none`,Y]}],grow:[{grow:[``,K,Z,Y]}],shrink:[{shrink:[``,K,Z,Y]}],order:[{order:[q,`first`,`last`,`none`,Z,Y]}],"grid-cols":[{"grid-cols":T()}],"col-start-end":[{col:te()}],"col-start":[{"col-start":E()}],"col-end":[{"col-end":E()}],"grid-rows":[{"grid-rows":T()}],"row-start-end":[{row:te()}],"row-start":[{"row-start":E()}],"row-end":[{"row-end":E()}],"grid-flow":[{"grid-flow":[`row`,`col`,`dense`,`row-dense`,`col-dense`]}],"auto-cols":[{"auto-cols":D()}],"auto-rows":[{"auto-rows":D()}],gap:[{gap:C()}],"gap-x":[{"gap-x":C()}],"gap-y":[{"gap-y":C()}],"justify-content":[{justify:[...O(),`normal`]}],"justify-items":[{"justify-items":[...k(),`normal`]}],"justify-self":[{"justify-self":[`auto`,...k()]}],"align-content":[{content:[`normal`,...O()]}],"align-items":[{items:[...k(),{baseline:[``,`last`]}]}],"align-self":[{self:[`auto`,...k(),{baseline:[``,`last`]}]}],"place-content":[{"place-content":O()}],"place-items":[{"place-items":[...k(),`baseline`]}],"place-self":[{"place-self":[`auto`,...k()]}],p:[{p:C()}],px:[{px:C()}],py:[{py:C()}],ps:[{ps:C()}],pe:[{pe:C()}],pbs:[{pbs:C()}],pbe:[{pbe:C()}],pt:[{pt:C()}],pr:[{pr:C()}],pb:[{pb:C()}],pl:[{pl:C()}],m:[{m:A()}],mx:[{mx:A()}],my:[{my:A()}],ms:[{ms:A()}],me:[{me:A()}],mbs:[{mbs:A()}],mbe:[{mbe:A()}],mt:[{mt:A()}],mr:[{mr:A()}],mb:[{mb:A()}],ml:[{ml:A()}],"space-x":[{"space-x":C()}],"space-x-reverse":[`space-x-reverse`],"space-y":[{"space-y":C()}],"space-y-reverse":[`space-y-reverse`],size:[{size:j()}],"inline-size":[{inline:[`auto`,...M()]}],"min-inline-size":[{"min-inline":[`auto`,...M()]}],"max-inline-size":[{"max-inline":[`none`,...M()]}],"block-size":[{block:[`auto`,...N()]}],"min-block-size":[{"min-block":[`auto`,...N()]}],"max-block-size":[{"max-block":[`none`,...N()]}],w:[{w:[s,`screen`,...j()]}],"min-w":[{"min-w":[s,`screen`,`none`,...j()]}],"max-w":[{"max-w":[s,`screen`,`none`,`prose`,{screen:[o]},...j()]}],h:[{h:[`screen`,`lh`,...j()]}],"min-h":[{"min-h":[`screen`,`lh`,`none`,...j()]}],"max-h":[{"max-h":[`screen`,`lh`,...j()]}],"font-size":[{text:[`base`,n,Lt,X]}],"font-smoothing":[`antialiased`,`subpixel-antialiased`],"font-style":[`italic`,`not-italic`],"font-weight":[{font:[r,Ut,Mt]}],"font-stretch":[{"font-stretch":[`ultra-condensed`,`extra-condensed`,`condensed`,`semi-condensed`,`normal`,`semi-expanded`,`expanded`,`extra-expanded`,`ultra-expanded`,St,Y]}],"font-family":[{font:[Rt,Nt,t]}],"font-features":[{"font-features":[Y]}],"fvn-normal":[`normal-nums`],"fvn-ordinal":[`ordinal`],"fvn-slashed-zero":[`slashed-zero`],"fvn-figure":[`lining-nums`,`oldstyle-nums`],"fvn-spacing":[`proportional-nums`,`tabular-nums`],"fvn-fraction":[`diagonal-fractions`,`stacked-fractions`],tracking:[{tracking:[i,Z,Y]}],"line-clamp":[{"line-clamp":[K,`none`,Z,jt]}],leading:[{leading:[a,...C()]}],"list-image":[{"list-image":[`none`,Z,Y]}],"list-style-position":[{list:[`inside`,`outside`]}],"list-style-type":[{list:[`disc`,`decimal`,`none`,Z,Y]}],"text-alignment":[{text:[`left`,`center`,`right`,`justify`,`start`,`end`]}],"placeholder-color":[{placeholder:P()}],"text-color":[{text:P()}],"text-decoration":[`underline`,`overline`,`line-through`,`no-underline`],"text-decoration-style":[{decoration:[...ae(),`wavy`]}],"text-decoration-thickness":[{decoration:[K,`from-font`,`auto`,Z,X]}],"text-decoration-color":[{decoration:P()}],"underline-offset":[{"underline-offset":[K,`auto`,Z,Y]}],"text-transform":[`uppercase`,`lowercase`,`capitalize`,`normal-case`],"text-overflow":[`truncate`,`text-ellipsis`,`text-clip`],"text-wrap":[{text:[`wrap`,`nowrap`,`balance`,`pretty`]}],indent:[{indent:C()}],"tab-size":[{tab:[q,Z,Y]}],"vertical-align":[{align:[`baseline`,`top`,`middle`,`bottom`,`text-top`,`text-bottom`,`sub`,`super`,Z,Y]}],whitespace:[{whitespace:[`normal`,`nowrap`,`pre`,`pre-line`,`pre-wrap`,`break-spaces`]}],break:[{break:[`normal`,`words`,`all`,`keep`]}],wrap:[{wrap:[`break-word`,`anywhere`,`normal`]}],hyphens:[{hyphens:[`none`,`manual`,`auto`]}],content:[{content:[`none`,Z,Y]}],"bg-attachment":[{bg:[`fixed`,`local`,`scroll`]}],"bg-clip":[{"bg-clip":[`border`,`padding`,`content`,`text`]}],"bg-origin":[{"bg-origin":[`border`,`padding`,`content`]}],"bg-position":[{bg:F()}],"bg-repeat":[{bg:ne()}],"bg-size":[{bg:re()}],"bg-image":[{bg:[`none`,{linear:[{to:[`t`,`tr`,`r`,`br`,`b`,`bl`,`l`,`tl`]},q,Z,Y],radial:[``,Z,Y],conic:[q,Z,Y]},Vt,Ft]}],"bg-color":[{bg:P()}],"gradient-from-pos":[{from:ie()}],"gradient-via-pos":[{via:ie()}],"gradient-to-pos":[{to:ie()}],"gradient-from":[{from:P()}],"gradient-via":[{via:P()}],"gradient-to":[{to:P()}],rounded:[{rounded:I()}],"rounded-s":[{"rounded-s":I()}],"rounded-e":[{"rounded-e":I()}],"rounded-t":[{"rounded-t":I()}],"rounded-r":[{"rounded-r":I()}],"rounded-b":[{"rounded-b":I()}],"rounded-l":[{"rounded-l":I()}],"rounded-ss":[{"rounded-ss":I()}],"rounded-se":[{"rounded-se":I()}],"rounded-ee":[{"rounded-ee":I()}],"rounded-es":[{"rounded-es":I()}],"rounded-tl":[{"rounded-tl":I()}],"rounded-tr":[{"rounded-tr":I()}],"rounded-br":[{"rounded-br":I()}],"rounded-bl":[{"rounded-bl":I()}],"border-w":[{border:L()}],"border-w-x":[{"border-x":L()}],"border-w-y":[{"border-y":L()}],"border-w-s":[{"border-s":L()}],"border-w-e":[{"border-e":L()}],"border-w-bs":[{"border-bs":L()}],"border-w-be":[{"border-be":L()}],"border-w-t":[{"border-t":L()}],"border-w-r":[{"border-r":L()}],"border-w-b":[{"border-b":L()}],"border-w-l":[{"border-l":L()}],"divide-x":[{"divide-x":L()}],"divide-x-reverse":[`divide-x-reverse`],"divide-y":[{"divide-y":L()}],"divide-y-reverse":[`divide-y-reverse`],"border-style":[{border:[...ae(),`hidden`,`none`]}],"divide-style":[{divide:[...ae(),`hidden`,`none`]}],"border-color":[{border:P()}],"border-color-x":[{"border-x":P()}],"border-color-y":[{"border-y":P()}],"border-color-s":[{"border-s":P()}],"border-color-e":[{"border-e":P()}],"border-color-bs":[{"border-bs":P()}],"border-color-be":[{"border-be":P()}],"border-color-t":[{"border-t":P()}],"border-color-r":[{"border-r":P()}],"border-color-b":[{"border-b":P()}],"border-color-l":[{"border-l":P()}],"divide-color":[{divide:P()}],"outline-style":[{outline:[...ae(),`none`,`hidden`]}],"outline-offset":[{"outline-offset":[K,Z,Y]}],"outline-w":[{outline:[``,K,Lt,X]}],"outline-color":[{outline:P()}],shadow:[{shadow:[``,`none`,u,Ht,It]}],"shadow-color":[{shadow:P()}],"inset-shadow":[{"inset-shadow":[`none`,d,Ht,It]}],"inset-shadow-color":[{"inset-shadow":P()}],"ring-w":[{ring:L()}],"ring-w-inset":[`ring-inset`],"ring-color":[{ring:P()}],"ring-offset-w":[{"ring-offset":[K,X]}],"ring-offset-color":[{"ring-offset":P()}],"inset-ring-w":[{"inset-ring":L()}],"inset-ring-color":[{"inset-ring":P()}],"text-shadow":[{"text-shadow":[`none`,f,Ht,It]}],"text-shadow-color":[{"text-shadow":P()}],opacity:[{opacity:[K,Z,Y]}],"mix-blend":[{"mix-blend":[...oe(),`plus-darker`,`plus-lighter`]}],"bg-blend":[{"bg-blend":oe()}],"mask-clip":[{"mask-clip":[`border`,`padding`,`content`,`fill`,`stroke`,`view`]},`mask-no-clip`],"mask-composite":[{mask:[`add`,`subtract`,`intersect`,`exclude`]}],"mask-image-linear-pos":[{"mask-linear":[K]}],"mask-image-linear-from-pos":[{"mask-linear-from":R()}],"mask-image-linear-to-pos":[{"mask-linear-to":R()}],"mask-image-linear-from-color":[{"mask-linear-from":P()}],"mask-image-linear-to-color":[{"mask-linear-to":P()}],"mask-image-t-from-pos":[{"mask-t-from":R()}],"mask-image-t-to-pos":[{"mask-t-to":R()}],"mask-image-t-from-color":[{"mask-t-from":P()}],"mask-image-t-to-color":[{"mask-t-to":P()}],"mask-image-r-from-pos":[{"mask-r-from":R()}],"mask-image-r-to-pos":[{"mask-r-to":R()}],"mask-image-r-from-color":[{"mask-r-from":P()}],"mask-image-r-to-color":[{"mask-r-to":P()}],"mask-image-b-from-pos":[{"mask-b-from":R()}],"mask-image-b-to-pos":[{"mask-b-to":R()}],"mask-image-b-from-color":[{"mask-b-from":P()}],"mask-image-b-to-color":[{"mask-b-to":P()}],"mask-image-l-from-pos":[{"mask-l-from":R()}],"mask-image-l-to-pos":[{"mask-l-to":R()}],"mask-image-l-from-color":[{"mask-l-from":P()}],"mask-image-l-to-color":[{"mask-l-to":P()}],"mask-image-x-from-pos":[{"mask-x-from":R()}],"mask-image-x-to-pos":[{"mask-x-to":R()}],"mask-image-x-from-color":[{"mask-x-from":P()}],"mask-image-x-to-color":[{"mask-x-to":P()}],"mask-image-y-from-pos":[{"mask-y-from":R()}],"mask-image-y-to-pos":[{"mask-y-to":R()}],"mask-image-y-from-color":[{"mask-y-from":P()}],"mask-image-y-to-color":[{"mask-y-to":P()}],"mask-image-radial":[{"mask-radial":[Z,Y]}],"mask-image-radial-from-pos":[{"mask-radial-from":R()}],"mask-image-radial-to-pos":[{"mask-radial-to":R()}],"mask-image-radial-from-color":[{"mask-radial-from":P()}],"mask-image-radial-to-color":[{"mask-radial-to":P()}],"mask-image-radial-shape":[{"mask-radial":[`circle`,`ellipse`]}],"mask-image-radial-size":[{"mask-radial":[{closest:[`side`,`corner`],farthest:[`side`,`corner`]}]}],"mask-image-radial-pos":[{"mask-radial-at":y()}],"mask-image-conic-pos":[{"mask-conic":[K]}],"mask-image-conic-from-pos":[{"mask-conic-from":R()}],"mask-image-conic-to-pos":[{"mask-conic-to":R()}],"mask-image-conic-from-color":[{"mask-conic-from":P()}],"mask-image-conic-to-color":[{"mask-conic-to":P()}],"mask-mode":[{mask:[`alpha`,`luminance`,`match`]}],"mask-origin":[{"mask-origin":[`border`,`padding`,`content`,`fill`,`stroke`,`view`]}],"mask-position":[{mask:F()}],"mask-repeat":[{mask:ne()}],"mask-size":[{mask:re()}],"mask-type":[{"mask-type":[`alpha`,`luminance`]}],"mask-image":[{mask:[`none`,Z,Y]}],filter:[{filter:[``,`none`,Z,Y]}],blur:[{blur:se()}],brightness:[{brightness:[K,Z,Y]}],contrast:[{contrast:[K,Z,Y]}],"drop-shadow":[{"drop-shadow":[``,`none`,p,Ht,It]}],"drop-shadow-color":[{"drop-shadow":P()}],grayscale:[{grayscale:[``,K,Z,Y]}],"hue-rotate":[{"hue-rotate":[K,Z,Y]}],invert:[{invert:[``,K,Z,Y]}],saturate:[{saturate:[K,Z,Y]}],sepia:[{sepia:[``,K,Z,Y]}],"backdrop-filter":[{"backdrop-filter":[``,`none`,Z,Y]}],"backdrop-blur":[{"backdrop-blur":se()}],"backdrop-brightness":[{"backdrop-brightness":[K,Z,Y]}],"backdrop-contrast":[{"backdrop-contrast":[K,Z,Y]}],"backdrop-grayscale":[{"backdrop-grayscale":[``,K,Z,Y]}],"backdrop-hue-rotate":[{"backdrop-hue-rotate":[K,Z,Y]}],"backdrop-invert":[{"backdrop-invert":[``,K,Z,Y]}],"backdrop-opacity":[{"backdrop-opacity":[K,Z,Y]}],"backdrop-saturate":[{"backdrop-saturate":[K,Z,Y]}],"backdrop-sepia":[{"backdrop-sepia":[``,K,Z,Y]}],"border-collapse":[{border:[`collapse`,`separate`]}],"border-spacing":[{"border-spacing":C()}],"border-spacing-x":[{"border-spacing-x":C()}],"border-spacing-y":[{"border-spacing-y":C()}],"table-layout":[{table:[`auto`,`fixed`]}],caption:[{caption:[`top`,`bottom`]}],transition:[{transition:[``,`all`,`colors`,`opacity`,`shadow`,`transform`,`none`,Z,Y]}],"transition-behavior":[{transition:[`normal`,`discrete`]}],duration:[{duration:[K,`initial`,Z,Y]}],ease:[{ease:[`linear`,`initial`,_,Z,Y]}],delay:[{delay:[K,Z,Y]}],animate:[{animate:[`none`,ee,Z,Y]}],backface:[{backface:[`hidden`,`visible`]}],perspective:[{perspective:[h,Z,Y]}],"perspective-origin":[{"perspective-origin":b()}],rotate:[{rotate:z()}],"rotate-x":[{"rotate-x":z()}],"rotate-y":[{"rotate-y":z()}],"rotate-z":[{"rotate-z":z()}],scale:[{scale:B()}],"scale-x":[{"scale-x":B()}],"scale-y":[{"scale-y":B()}],"scale-z":[{"scale-z":B()}],"scale-3d":[`scale-3d`],skew:[{skew:V()}],"skew-x":[{"skew-x":V()}],"skew-y":[{"skew-y":V()}],transform:[{transform:[Z,Y,``,`none`,`gpu`,`cpu`]}],"transform-origin":[{origin:b()}],"transform-style":[{transform:[`3d`,`flat`]}],translate:[{translate:H()}],"translate-x":[{"translate-x":H()}],"translate-y":[{"translate-y":H()}],"translate-z":[{"translate-z":H()}],"translate-none":[`translate-none`],zoom:[{zoom:[q,Z,Y]}],accent:[{accent:P()}],appearance:[{appearance:[`none`,`auto`]}],"caret-color":[{caret:P()}],"color-scheme":[{scheme:[`normal`,`dark`,`light`,`light-dark`,`only-dark`,`only-light`]}],cursor:[{cursor:[`auto`,`default`,`pointer`,`wait`,`text`,`move`,`help`,`not-allowed`,`none`,`context-menu`,`progress`,`cell`,`crosshair`,`vertical-text`,`alias`,`copy`,`no-drop`,`grab`,`grabbing`,`all-scroll`,`col-resize`,`row-resize`,`n-resize`,`e-resize`,`s-resize`,`w-resize`,`ne-resize`,`nw-resize`,`se-resize`,`sw-resize`,`ew-resize`,`ns-resize`,`nesw-resize`,`nwse-resize`,`zoom-in`,`zoom-out`,Z,Y]}],"field-sizing":[{"field-sizing":[`fixed`,`content`]}],"pointer-events":[{"pointer-events":[`auto`,`none`]}],resize:[{resize:[`none`,``,`y`,`x`]}],"scroll-behavior":[{scroll:[`auto`,`smooth`]}],"scrollbar-thumb-color":[{"scrollbar-thumb":P()}],"scrollbar-track-color":[{"scrollbar-track":P()}],"scrollbar-gutter":[{"scrollbar-gutter":[`auto`,`stable`,`both`]}],"scrollbar-w":[{scrollbar:[`auto`,`thin`,`none`]}],"scroll-m":[{"scroll-m":C()}],"scroll-mx":[{"scroll-mx":C()}],"scroll-my":[{"scroll-my":C()}],"scroll-ms":[{"scroll-ms":C()}],"scroll-me":[{"scroll-me":C()}],"scroll-mbs":[{"scroll-mbs":C()}],"scroll-mbe":[{"scroll-mbe":C()}],"scroll-mt":[{"scroll-mt":C()}],"scroll-mr":[{"scroll-mr":C()}],"scroll-mb":[{"scroll-mb":C()}],"scroll-ml":[{"scroll-ml":C()}],"scroll-p":[{"scroll-p":C()}],"scroll-px":[{"scroll-px":C()}],"scroll-py":[{"scroll-py":C()}],"scroll-ps":[{"scroll-ps":C()}],"scroll-pe":[{"scroll-pe":C()}],"scroll-pbs":[{"scroll-pbs":C()}],"scroll-pbe":[{"scroll-pbe":C()}],"scroll-pt":[{"scroll-pt":C()}],"scroll-pr":[{"scroll-pr":C()}],"scroll-pb":[{"scroll-pb":C()}],"scroll-pl":[{"scroll-pl":C()}],"snap-align":[{snap:[`start`,`end`,`center`,`align-none`]}],"snap-stop":[{snap:[`normal`,`always`]}],"snap-type":[{snap:[`none`,`x`,`y`,`both`]}],"snap-strictness":[{snap:[`mandatory`,`proximity`]}],touch:[{touch:[`auto`,`none`,`manipulation`]}],"touch-x":[{"touch-pan":[`x`,`left`,`right`]}],"touch-y":[{"touch-pan":[`y`,`up`,`down`]}],"touch-pz":[`touch-pinch-zoom`],select:[{select:[`none`,`text`,`all`,`auto`]}],"will-change":[{"will-change":[`auto`,`scroll`,`contents`,`transform`,Z,Y]}],fill:[{fill:[`none`,...P()]}],"stroke-w":[{stroke:[K,Lt,X,jt]}],stroke:[{stroke:[`none`,...P()]}],"forced-color-adjust":[{"forced-color-adjust":[`auto`,`none`]}]},conflictingClassGroups:{"container-named":[`container-type`],overflow:[`overflow-x`,`overflow-y`],overscroll:[`overscroll-x`,`overscroll-y`],inset:[`inset-x`,`inset-y`,`inset-bs`,`inset-be`,`start`,`end`,`top`,`right`,`bottom`,`left`],"inset-x":[`right`,`left`],"inset-y":[`top`,`bottom`],flex:[`basis`,`grow`,`shrink`],gap:[`gap-x`,`gap-y`],p:[`px`,`py`,`ps`,`pe`,`pbs`,`pbe`,`pt`,`pr`,`pb`,`pl`],px:[`pr`,`pl`],py:[`pt`,`pb`],m:[`mx`,`my`,`ms`,`me`,`mbs`,`mbe`,`mt`,`mr`,`mb`,`ml`],mx:[`mr`,`ml`],my:[`mt`,`mb`],size:[`w`,`h`],"font-size":[`leading`],"fvn-normal":[`fvn-ordinal`,`fvn-slashed-zero`,`fvn-figure`,`fvn-spacing`,`fvn-fraction`],"fvn-ordinal":[`fvn-normal`],"fvn-slashed-zero":[`fvn-normal`],"fvn-figure":[`fvn-normal`],"fvn-spacing":[`fvn-normal`],"fvn-fraction":[`fvn-normal`],"line-clamp":[`display`,`overflow`],rounded:[`rounded-s`,`rounded-e`,`rounded-t`,`rounded-r`,`rounded-b`,`rounded-l`,`rounded-ss`,`rounded-se`,`rounded-ee`,`rounded-es`,`rounded-tl`,`rounded-tr`,`rounded-br`,`rounded-bl`],"rounded-s":[`rounded-ss`,`rounded-es`],"rounded-e":[`rounded-se`,`rounded-ee`],"rounded-t":[`rounded-tl`,`rounded-tr`],"rounded-r":[`rounded-tr`,`rounded-br`],"rounded-b":[`rounded-br`,`rounded-bl`],"rounded-l":[`rounded-tl`,`rounded-bl`],"border-spacing":[`border-spacing-x`,`border-spacing-y`],"border-w":[`border-w-x`,`border-w-y`,`border-w-s`,`border-w-e`,`border-w-bs`,`border-w-be`,`border-w-t`,`border-w-r`,`border-w-b`,`border-w-l`],"border-w-x":[`border-w-r`,`border-w-l`],"border-w-y":[`border-w-t`,`border-w-b`],"border-color":[`border-color-x`,`border-color-y`,`border-color-s`,`border-color-e`,`border-color-bs`,`border-color-be`,`border-color-t`,`border-color-r`,`border-color-b`,`border-color-l`],"border-color-x":[`border-color-r`,`border-color-l`],"border-color-y":[`border-color-t`,`border-color-b`],translate:[`translate-x`,`translate-y`,`translate-none`],"translate-none":[`translate`,`translate-x`,`translate-y`,`translate-z`],"scroll-m":[`scroll-mx`,`scroll-my`,`scroll-ms`,`scroll-me`,`scroll-mbs`,`scroll-mbe`,`scroll-mt`,`scroll-mr`,`scroll-mb`,`scroll-ml`],"scroll-mx":[`scroll-mr`,`scroll-ml`],"scroll-my":[`scroll-mt`,`scroll-mb`],"scroll-p":[`scroll-px`,`scroll-py`,`scroll-ps`,`scroll-pe`,`scroll-pbs`,`scroll-pbe`,`scroll-pt`,`scroll-pr`,`scroll-pb`,`scroll-pl`],"scroll-px":[`scroll-pr`,`scroll-pl`],"scroll-py":[`scroll-pt`,`scroll-pb`],touch:[`touch-x`,`touch-y`,`touch-pz`],"touch-x":[`touch`],"touch-y":[`touch`],"touch-pz":[`touch`]},conflictingClassGroupModifiers:{"font-size":[`leading`]},postfixLookupClassGroups:[`container-type`],orderSensitiveModifiers:[`*`,`**`,`after`,`backdrop`,`before`,`details-content`,`file`,`first-letter`,`first-line`,`marker`,`placeholder`,`selection`]}});function $t(...e){return Qt(je(e))}var en=o((e=>{var t=Symbol.for(`react.transitional.element`),n=Symbol.for(`react.fragment`);function r(e,n,r){var i=null;if(r!==void 0&&(i=``+r),n.key!==void 0&&(i=``+n.key),`key`in n)for(var a in r={},n)a!==`key`&&(r[a]=n[a]);else r=n;return n=r.ref,{$$typeof:t,type:e,key:i,ref:n===void 0?null:n,props:r}}e.Fragment=n,e.jsx=r,e.jsxs=r})),tn=o((e=>{process.env.NODE_ENV!==`production`&&(function(){function t(e){if(e==null)return null;if(typeof e==`function`)return e.$$typeof===E?null:e.displayName||e.name||null;if(typeof e==`string`)return e;switch(e){case _:return`Fragment`;case v:return`Profiler`;case ee:return`StrictMode`;case S:return`Suspense`;case C:return`SuspenseList`;case te:return`Activity`}if(typeof e==`object`)switch(typeof e.tag==`number`&&console.error(`Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue.`),e.$$typeof){case g:return`Portal`;case b:return e.displayName||`Context`;case y:return(e._context.displayName||`Context`)+`.Consumer`;case x:var n=e.render;return e=e.displayName,e||=(e=n.displayName||n.name||``,e===``?`ForwardRef`:`ForwardRef(`+e+`)`),e;case w:return n=e.displayName||null,n===null?t(e.type)||`Memo`:n;case T:n=e._payload,e=e._init;try{return t(e(n))}catch{}}return null}function n(e){return``+e}function r(e){try{n(e);var t=!1}catch{t=!0}if(t){t=console;var r=t.error,i=typeof Symbol==`function`&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||`Object`;return r.call(t,`The provided key is an unsupported type %s. This value must be coerced to a string before using it here.`,i),n(e)}}function i(e){if(e===_)return`<>`;if(typeof e==`object`&&e&&e.$$typeof===T)return`<...>`;try{var n=t(e);return n?`<`+n+`>`:`<...>`}catch{return`<...>`}}function a(){var e=D.A;return e===null?null:e.getOwner()}function o(){return Error(`react-stack-top-frame`)}function s(e){if(O.call(e,`key`)){var t=Object.getOwnPropertyDescriptor(e,`key`).get;if(t&&t.isReactWarning)return!1}return e.key!==void 0}function c(e,t){function n(){j||(j=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",t))}n.isReactWarning=!0,Object.defineProperty(e,"key",{get:n,configurable:!0})}function l(){var e=t(this.type);return M[e]||(M[e]=!0,console.error(`Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.`)),e=this.props.ref,e===void 0?null:e}function u(e,t,n,r,i,a){var o=n.ref;return e={$$typeof:h,type:e,key:t,props:n,_owner:r},(o===void 0?null:o)===null?Object.defineProperty(e,"ref",{enumerable:!1,value:null}):Object.defineProperty(e,"ref",{enumerable:!1,get:l}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:i}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:a}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function d(e,n,i,o,l,d){var p=n.children;if(p!==void 0){if(o){if(k(p)){for(o=0;o<p.length;o++)f(p[o]);Object.freeze&&Object.freeze(p)}else console.error(`React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.`)}else f(p)}if(O.call(n,`key`)){p=t(e);var m=Object.keys(n).filter(function(e){return e!==`key`});o=0<m.length?`{key: someKey, `+m.join(`: ..., `)+`: ...}`:`{key: someKey}`,F[p+o]||(m=0<m.length?`{`+m.join(`: ..., `)+`: ...}`:`{}`,console.error(`A props object containing a "key" prop is being spread into JSX:
|
|
3
|
-
let props = %s;
|
|
4
|
-
<%s {...props} />
|
|
5
|
-
React keys must be passed directly to JSX without using spread:
|
|
6
|
-
let props = %s;
|
|
7
|
-
<%s key={someKey} {...props} />`,o,p,m,p),F[p+o]=!0)}if(p=null,i!==void 0&&(r(i),p=``+i),s(n)&&(r(n.key),p=``+n.key),`key`in n)for(var h in i={},n)h!==`key`&&(i[h]=n[h]);else i=n;return p&&c(i,typeof e==`function`?e.displayName||e.name||`Unknown`:e),u(e,p,i,a(),l,d)}function f(e){p(e)?e._store&&(e._store.validated=1):typeof e==`object`&&e&&e.$$typeof===T&&(e._payload.status===`fulfilled`?p(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function p(e){return typeof e==`object`&&!!e&&e.$$typeof===h}var m=require("react"),h=Symbol.for(`react.transitional.element`),g=Symbol.for(`react.portal`),_=Symbol.for(`react.fragment`),ee=Symbol.for(`react.strict_mode`),v=Symbol.for(`react.profiler`),y=Symbol.for(`react.consumer`),b=Symbol.for(`react.context`),x=Symbol.for(`react.forward_ref`),S=Symbol.for(`react.suspense`),C=Symbol.for(`react.suspense_list`),w=Symbol.for(`react.memo`),T=Symbol.for(`react.lazy`),te=Symbol.for(`react.activity`),E=Symbol.for(`react.client.reference`),D=m.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,O=Object.prototype.hasOwnProperty,k=Array.isArray,A=console.createTask?console.createTask:function(){return null};m={react_stack_bottom_frame:function(e){return e()}};var j,M={},N=m.react_stack_bottom_frame.bind(m,o)(),P=A(i(o)),F={};e.Fragment=_,e.jsx=function(e,t,n){var r=1e4>D.recentlyCreatedOwnerStacks++;return d(e,t,n,!1,r?Error(`react-stack-top-frame`):N,r?A(i(e)):P)},e.jsxs=function(e,t,n){var r=1e4>D.recentlyCreatedOwnerStacks++;return d(e,t,n,!0,r?Error(`react-stack-top-frame`):N,r?A(i(e)):P)}})()})),nn=o(((e,t)=>{t.exports=process.env.NODE_ENV===`production`?en():tn()}))(),rn=Pe(`inline-flex items-center justify-center gap-2 rounded-md border text-sm transition-all hover:brightness-90 disabled:pointer-events-none disabled:opacity-50`,{variants:{variant:{default:``,ghost:`border-none`},size:{default:`h-9 px-4 py-2`}},defaultVariants:{variant:`default`,size:`default`}});function an({className:e,variant:t=`default`,size:n=`default`,...r}){return(0,nn.jsx)(ke,{className:$t(rn({variant:t,size:n,className:e})),...r})}exports.Button=an,exports.cn=$t;
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("@base-ui/react/button"),t=require("class-variance-authority"),n=require("clsx"),r=require("tailwind-merge"),i=require("react/jsx-runtime"),a=require("@base-ui/react/tabs");function o(...e){return(0,r.twMerge)((0,n.clsx)(e))}var s=(0,t.cva)(`inline-flex items-center justify-center gap-2 rounded-md border text-sm transition-all hover:brightness-90 disabled:pointer-events-none disabled:opacity-50`,{variants:{variant:{default:``,ghost:`border-none`},size:{default:`h-9 px-4 py-2`}},defaultVariants:{variant:`default`,size:`default`}});function c({className:t,variant:n=`default`,size:r=`default`,...a}){return(0,i.jsx)(e.Button,{className:o(s({variant:n,size:r,className:t})),...a})}function l({className:e,...t}){return(0,i.jsx)(a.Tabs.Root,{className:o(`w-fit`,e),...t})}function u({className:e,...t}){return(0,i.jsx)(a.Tabs.List,{className:o(`relative z-1 -mb-px inline-flex gap-4 text-black`,e),...t})}var d=(0,t.cva)(`h-9 cursor-pointer px-3 text-sm`);function f({className:e,...t}){return(0,i.jsx)(a.Tabs.Tab,{className:o(d(),e),...t})}function p({className:e,...t}){return(0,i.jsx)(a.Tabs.Indicator,{className:o(`absolute top-0 left-0 -z-1 h-full w-(--active-tab-width) translate-x-(--active-tab-left) border-x border-t border-black bg-white transition-[translate,width]`,e),...t})}function m({className:e,...t}){return(0,i.jsx)(a.Tabs.Panel,{className:o(`p-4`,e),...t})}exports.Button=c,exports.Tabs=l,exports.TabsIndicator=p,exports.TabsList=u,exports.TabsPanel=m,exports.TabsTab=f,exports.cn=o;
|
package/dist/index.d.ts
CHANGED
|
@@ -2,6 +2,7 @@ import { ButtonHTMLAttributes } from 'react';
|
|
|
2
2
|
import { ClassProp } from 'class-variance-authority/types';
|
|
3
3
|
import { ClassValue } from 'clsx';
|
|
4
4
|
import { JSX } from 'react';
|
|
5
|
+
import { Tabs as Tabs_2 } from '@base-ui/react/tabs';
|
|
5
6
|
import { VariantProps } from 'class-variance-authority';
|
|
6
7
|
|
|
7
8
|
export declare function Button({ className, variant, size, ...props }: ButtonProps): JSX.Element;
|
|
@@ -16,4 +17,14 @@ declare const buttonVariants: (props?: ({
|
|
|
16
17
|
|
|
17
18
|
export declare function cn(...inputs: ClassValue[]): string;
|
|
18
19
|
|
|
20
|
+
export declare function Tabs({ className, ...props }: Tabs_2.Root.Props): JSX.Element;
|
|
21
|
+
|
|
22
|
+
export declare function TabsIndicator({ className, ...props }: Tabs_2.Indicator.Props): JSX.Element;
|
|
23
|
+
|
|
24
|
+
export declare function TabsList({ className, ...props }: Tabs_2.List.Props): JSX.Element;
|
|
25
|
+
|
|
26
|
+
export declare function TabsPanel({ className, ...props }: Tabs_2.Panel.Props): JSX.Element;
|
|
27
|
+
|
|
28
|
+
export declare function TabsTab({ className, ...props }: Tabs_2.Tab.Props): JSX.Element;
|
|
29
|
+
|
|
19
30
|
export { }
|