@zentauri-ui/zentauri-components 2.1.7 → 2.1.9
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 +8 -5
- package/cli/props.json +350 -3
- package/cli/registry.json +11 -0
- package/dist/{chunk-DBNGLT5U.mjs → chunk-3HBC34NF.mjs} +4 -4
- package/dist/{chunk-DBNGLT5U.mjs.map → chunk-3HBC34NF.mjs.map} +1 -1
- package/dist/{chunk-FUCW5GPE.mjs → chunk-3RC5IG6O.mjs} +55 -8
- package/dist/chunk-3RC5IG6O.mjs.map +1 -0
- package/dist/chunk-4SLVTSHM.js +241 -0
- package/dist/chunk-4SLVTSHM.js.map +1 -0
- package/dist/{chunk-TJ2EWPER.js → chunk-4TPE5DEG.js} +63 -7
- package/dist/chunk-4TPE5DEG.js.map +1 -0
- package/dist/{chunk-G7FVHZRB.js → chunk-7CZDJTPD.js} +12 -12
- package/dist/{chunk-G7FVHZRB.js.map → chunk-7CZDJTPD.js.map} +1 -1
- package/dist/{chunk-5ELR6MIN.js → chunk-7DGPRPWM.js} +6 -6
- package/dist/{chunk-5ELR6MIN.js.map → chunk-7DGPRPWM.js.map} +1 -1
- package/dist/chunk-GP3FUS2H.mjs +26 -0
- package/dist/chunk-GP3FUS2H.mjs.map +1 -0
- package/dist/chunk-IHDM7AHY.mjs +233 -0
- package/dist/chunk-IHDM7AHY.mjs.map +1 -0
- package/dist/chunk-MWG7LHAK.js +19 -0
- package/dist/{chunk-5FU57ZVQ.js.map → chunk-MWG7LHAK.js.map} +1 -1
- package/dist/{chunk-7UXPXCKV.mjs → chunk-OLT7P7JO.mjs} +3 -3
- package/dist/{chunk-7UXPXCKV.mjs.map → chunk-OLT7P7JO.mjs.map} +1 -1
- package/dist/chunk-PAISX7YL.js +38 -0
- package/dist/chunk-PAISX7YL.js.map +1 -0
- package/dist/{chunk-KVSRUAXP.mjs → chunk-VN7FE5RR.mjs} +3 -3
- package/dist/{chunk-KVSRUAXP.mjs.map → chunk-VN7FE5RR.mjs.map} +1 -1
- package/dist/design-system/code-diff.d.ts +18 -0
- package/dist/design-system/code-diff.d.ts.map +1 -0
- package/dist/design-system/facade.js +8 -7
- package/dist/design-system/facade.js.map +1 -1
- package/dist/design-system/facade.mjs +7 -6
- package/dist/design-system/facade.mjs.map +1 -1
- package/dist/design-system/index.d.ts +2 -0
- package/dist/design-system/index.d.ts.map +1 -1
- package/dist/design-system/split-button.d.ts +25 -0
- package/dist/design-system/split-button.d.ts.map +1 -0
- package/dist/ui/buttons/animated.js +10 -9
- package/dist/ui/buttons/animated.js.map +1 -1
- package/dist/ui/buttons/animated.mjs +8 -7
- package/dist/ui/buttons/animated.mjs.map +1 -1
- package/dist/ui/buttons.js +11 -10
- package/dist/ui/buttons.mjs +9 -8
- package/dist/ui/code-diff/code-diff-base.d.ts +6 -0
- package/dist/ui/code-diff/code-diff-base.d.ts.map +1 -0
- package/dist/ui/code-diff/code-diff.d.ts +6 -0
- package/dist/ui/code-diff/code-diff.d.ts.map +1 -0
- package/dist/ui/code-diff/index.d.ts +4 -0
- package/dist/ui/code-diff/index.d.ts.map +1 -0
- package/dist/ui/code-diff/types.d.ts +26 -0
- package/dist/ui/code-diff/types.d.ts.map +1 -0
- package/dist/ui/code-diff/variants.d.ts +11 -0
- package/dist/ui/code-diff/variants.d.ts.map +1 -0
- package/dist/ui/code-diff.js +302 -0
- package/dist/ui/code-diff.js.map +1 -0
- package/dist/ui/code-diff.mjs +297 -0
- package/dist/ui/code-diff.mjs.map +1 -0
- package/dist/ui/data-table.js +22 -21
- package/dist/ui/data-table.js.map +1 -1
- package/dist/ui/data-table.mjs +12 -11
- package/dist/ui/data-table.mjs.map +1 -1
- package/dist/ui/dropdown/dropdown.d.ts +1 -1
- package/dist/ui/dropdown/dropdown.d.ts.map +1 -1
- package/dist/ui/dropdown/types.d.ts +2 -2
- package/dist/ui/dropdown/types.d.ts.map +1 -1
- package/dist/ui/dropdown.js +31 -231
- package/dist/ui/dropdown.js.map +1 -1
- package/dist/ui/dropdown.mjs +4 -229
- package/dist/ui/dropdown.mjs.map +1 -1
- package/dist/ui/dynamic-stepper.js +20 -19
- package/dist/ui/dynamic-stepper.js.map +1 -1
- package/dist/ui/dynamic-stepper.mjs +9 -8
- package/dist/ui/dynamic-stepper.mjs.map +1 -1
- package/dist/ui/pagination.js +12 -11
- package/dist/ui/pagination.mjs +9 -8
- package/dist/ui/split-button/index.d.ts +4 -0
- package/dist/ui/split-button/index.d.ts.map +1 -0
- package/dist/ui/split-button/split-button-base.d.ts +6 -0
- package/dist/ui/split-button/split-button-base.d.ts.map +1 -0
- package/dist/ui/split-button/split-button.d.ts +6 -0
- package/dist/ui/split-button/split-button.d.ts.map +1 -0
- package/dist/ui/split-button/types.d.ts +30 -0
- package/dist/ui/split-button/types.d.ts.map +1 -0
- package/dist/ui/split-button/variants.d.ts +16 -0
- package/dist/ui/split-button/variants.d.ts.map +1 -0
- package/dist/ui/split-button.js +288 -0
- package/dist/ui/split-button.js.map +1 -0
- package/dist/ui/split-button.mjs +279 -0
- package/dist/ui/split-button.mjs.map +1 -0
- package/package.json +4 -1
- package/src/design-system/code-diff.ts +37 -0
- package/src/design-system/index.ts +2 -0
- package/src/design-system/split-button.ts +38 -0
- package/src/ui/code-diff/code-diff-base.tsx +284 -0
- package/src/ui/code-diff/code-diff.test.tsx +50 -0
- package/src/ui/code-diff/code-diff.tsx +8 -0
- package/src/ui/code-diff/index.ts +15 -0
- package/src/ui/code-diff/types.ts +31 -0
- package/src/ui/code-diff/variants.ts +49 -0
- package/src/ui/dropdown/dropdown.tsx +7 -3
- package/src/ui/dropdown/types.ts +2 -2
- package/src/ui/split-button/index.ts +19 -0
- package/src/ui/split-button/split-button-base.tsx +232 -0
- package/src/ui/split-button/split-button.test.tsx +208 -0
- package/src/ui/split-button/split-button.tsx +9 -0
- package/src/ui/split-button/types.ts +46 -0
- package/src/ui/split-button/variants.ts +46 -0
- package/dist/chunk-5FU57ZVQ.js +0 -19
- package/dist/chunk-FUCW5GPE.mjs.map +0 -1
- package/dist/chunk-TJ2EWPER.js.map +0 -1
package/README.md
CHANGED
|
@@ -15,7 +15,7 @@ Published artifacts live under `dist/`. Imports use **per-entry subpaths**: `@ze
|
|
|
15
15
|
|
|
16
16
|
| Surface | Count | Import shape |
|
|
17
17
|
| ------------------- | ----: | ----------------------------------------------------- |
|
|
18
|
-
| Static UI entries |
|
|
18
|
+
| Static UI entries | 43 | `@zentauri-ui/zentauri-components/ui/<name>` |
|
|
19
19
|
| Animated UI entries | 27 | `@zentauri-ui/zentauri-components/ui/<name>/animated` |
|
|
20
20
|
| Animation entries | 41 | `@zentauri-ui/zentauri-components/animations/<name>` |
|
|
21
21
|
| Chart entries | 9 | `@zentauri-ui/zentauri-components/charts/<type>` |
|
|
@@ -29,12 +29,12 @@ Generated from the component package Vitest JSON report via `pnpm --filter @zent
|
|
|
29
29
|
|
|
30
30
|
| Metric | Result |
|
|
31
31
|
| ---------- | ---------------- |
|
|
32
|
-
| Test files |
|
|
33
|
-
| Tests |
|
|
32
|
+
| Test files | 99 passed (99) |
|
|
33
|
+
| Tests | 826 passed (826) |
|
|
34
34
|
|
|
35
35
|
| Area | Test files | Tests |
|
|
36
36
|
| ------------------------------ | ---------- | ----- |
|
|
37
|
-
| Components and UI utilities |
|
|
37
|
+
| Components and UI utilities | 50 | 521 |
|
|
38
38
|
| Standalone animations | 1 | 45 |
|
|
39
39
|
| React hooks | 41 | 174 |
|
|
40
40
|
| Design system facade | 1 | 11 |
|
|
@@ -62,6 +62,7 @@ Generated from the component package Vitest JSON report via `pnpm --filter @zent
|
|
|
62
62
|
| `src/ui/alert/alert.test.tsx` | 11 |
|
|
63
63
|
| `src/ui/rating/rating.test.tsx` | 11 |
|
|
64
64
|
| `src/ui/select/select.test.tsx` | 11 |
|
|
65
|
+
| `src/ui/split-button/split-button.test.tsx` | 11 |
|
|
65
66
|
| `src/ui/table/table.test.tsx` | 11 |
|
|
66
67
|
| `src/hooks/usePagination/usePagination.test.ts` | 10 |
|
|
67
68
|
| `src/ui/marquee/marquee.test.tsx` | 10 |
|
|
@@ -85,6 +86,7 @@ Generated from the component package Vitest JSON report via `pnpm --filter @zent
|
|
|
85
86
|
| `src/hooks/useTableSort/useTableSort.test.ts` | 7 |
|
|
86
87
|
| `src/ui/accordion/accordion.test.tsx` | 7 |
|
|
87
88
|
| `src/ui/card/card.test.tsx` | 7 |
|
|
89
|
+
| `src/ui/code-diff/code-diff.test.tsx` | 7 |
|
|
88
90
|
| `src/ui/drawer/drawer.test.tsx` | 7 |
|
|
89
91
|
| `src/ui/kbd/kbd.test.tsx` | 7 |
|
|
90
92
|
| `src/ui/typography/typography.test.tsx` | 7 |
|
|
@@ -245,6 +247,7 @@ Import static primitives from `@zentauri-ui/zentauri-components/ui/<subpath>` wh
|
|
|
245
247
|
| Skeleton | `skeleton` | `skeleton/animated` |
|
|
246
248
|
| Slider | `slider` | — |
|
|
247
249
|
| Spinner | — | `spinner/animated` |
|
|
250
|
+
| Split button | `split-button` | — |
|
|
248
251
|
| Table | `table` | `table/animated` |
|
|
249
252
|
| Tabs | `tabs` | `tabs/animated` |
|
|
250
253
|
| Timeline | `timeline` | `timeline/animated` |
|
|
@@ -852,7 +855,7 @@ From this package directory in the monorepo:
|
|
|
852
855
|
|
|
853
856
|
- `pnpm build` (or `npm run build`) — production bundle via `tsup` (Rollup treeshake + `scripts/prepend-use-client.mjs` via `onSuccess` so each UI entry under `dist/ui/`, animation entry under `dist/animations/`, chart entry under `dist/charts/`, and `dist/ui/<name>/animated.*` starts with `"use client"` where needed)
|
|
854
857
|
- `pnpm dev` — `tsup` watch mode (same `onSuccess` hook after each rebuild)
|
|
855
|
-
- `pnpm test` / `pnpm test:watch` — **Vitest** and **Testing Library** unit tests // currently covered
|
|
858
|
+
- `pnpm test` / `pnpm test:watch` — **Vitest** and **Testing Library** unit tests // currently covered 826 test cases in total
|
|
856
859
|
- `pnpm test:a11y` — focused accessibility coverage for package-level UI primitives and compound components: **axe-core** audits for every interactive component plus **keyboard-interaction** tests (focus order, arrow-key nav, Home/End, Escape/Enter) for the compound components
|
|
857
860
|
- `pnpm check:tokens` — enforce the `--zui-*` token contract across design-system, variant, and local custom-property usage without generating a large checked-in token catalog
|
|
858
861
|
- **`pnpm run generate:registry`** — runs `scripts/generate-registry.mjs`, which reads **`uiComponentNames`**, **`uiAnimatedComponentNames`**, **`animationEntryNames`**, **`chartEntryNames`**, and **`hooksEntryNames`** from `tsup.config.ts`, applies fixed **`nameAliases`**, scans each component/chart source to build **`peerHints`**, and writes **`cli/registry.json`** (`components` + `animations` + `hooks` + `peerHints`). Run this after adding or renaming UI, animation, chart, or hook entries so the CLI stays in sync (the script prints counts).
|
package/cli/props.json
CHANGED
|
@@ -3134,6 +3134,167 @@
|
|
|
3134
3134
|
}
|
|
3135
3135
|
]
|
|
3136
3136
|
},
|
|
3137
|
+
"code-diff": {
|
|
3138
|
+
"slug": "code-diff",
|
|
3139
|
+
"subcomponents": [
|
|
3140
|
+
{
|
|
3141
|
+
"name": "static:CodeDiff",
|
|
3142
|
+
"displayName": "CodeDiff",
|
|
3143
|
+
"propsType": "CodeDiffProps",
|
|
3144
|
+
"source": "static",
|
|
3145
|
+
"props": [
|
|
3146
|
+
{
|
|
3147
|
+
"name": "appearance",
|
|
3148
|
+
"type": "enum",
|
|
3149
|
+
"required": false,
|
|
3150
|
+
"default": "default",
|
|
3151
|
+
"group": "variant",
|
|
3152
|
+
"isVariant": true,
|
|
3153
|
+
"options": [
|
|
3154
|
+
"default"
|
|
3155
|
+
],
|
|
3156
|
+
"variantGroup": "appearance",
|
|
3157
|
+
"deprecated": false
|
|
3158
|
+
},
|
|
3159
|
+
{
|
|
3160
|
+
"name": "size",
|
|
3161
|
+
"type": "enum",
|
|
3162
|
+
"required": false,
|
|
3163
|
+
"default": "md",
|
|
3164
|
+
"group": "variant",
|
|
3165
|
+
"isVariant": true,
|
|
3166
|
+
"options": [
|
|
3167
|
+
"lg",
|
|
3168
|
+
"md",
|
|
3169
|
+
"sm"
|
|
3170
|
+
],
|
|
3171
|
+
"variantGroup": "size",
|
|
3172
|
+
"deprecated": false
|
|
3173
|
+
},
|
|
3174
|
+
{
|
|
3175
|
+
"name": "language",
|
|
3176
|
+
"type": "string | undefined",
|
|
3177
|
+
"required": false,
|
|
3178
|
+
"group": "behavior",
|
|
3179
|
+
"deprecated": false
|
|
3180
|
+
},
|
|
3181
|
+
{
|
|
3182
|
+
"name": "newCode",
|
|
3183
|
+
"type": "string",
|
|
3184
|
+
"required": true,
|
|
3185
|
+
"group": "behavior",
|
|
3186
|
+
"deprecated": false
|
|
3187
|
+
},
|
|
3188
|
+
{
|
|
3189
|
+
"name": "newTitle",
|
|
3190
|
+
"type": "string | undefined",
|
|
3191
|
+
"required": false,
|
|
3192
|
+
"group": "behavior",
|
|
3193
|
+
"deprecated": false
|
|
3194
|
+
},
|
|
3195
|
+
{
|
|
3196
|
+
"name": "oldCode",
|
|
3197
|
+
"type": "string",
|
|
3198
|
+
"required": true,
|
|
3199
|
+
"group": "behavior",
|
|
3200
|
+
"deprecated": false
|
|
3201
|
+
},
|
|
3202
|
+
{
|
|
3203
|
+
"name": "oldTitle",
|
|
3204
|
+
"type": "string | undefined",
|
|
3205
|
+
"required": false,
|
|
3206
|
+
"group": "behavior",
|
|
3207
|
+
"deprecated": false
|
|
3208
|
+
},
|
|
3209
|
+
{
|
|
3210
|
+
"name": "showGutterMarkers",
|
|
3211
|
+
"type": "boolean | undefined",
|
|
3212
|
+
"required": false,
|
|
3213
|
+
"group": "behavior",
|
|
3214
|
+
"deprecated": false
|
|
3215
|
+
},
|
|
3216
|
+
{
|
|
3217
|
+
"name": "showLineNumbers",
|
|
3218
|
+
"type": "boolean | undefined",
|
|
3219
|
+
"required": false,
|
|
3220
|
+
"group": "behavior",
|
|
3221
|
+
"deprecated": false
|
|
3222
|
+
},
|
|
3223
|
+
{
|
|
3224
|
+
"name": "viewType",
|
|
3225
|
+
"type": "CodeDiffViewType | undefined",
|
|
3226
|
+
"required": false,
|
|
3227
|
+
"group": "behavior",
|
|
3228
|
+
"deprecated": false
|
|
3229
|
+
},
|
|
3230
|
+
{
|
|
3231
|
+
"name": "children",
|
|
3232
|
+
"type": "ReactNode",
|
|
3233
|
+
"required": false,
|
|
3234
|
+
"group": "dom",
|
|
3235
|
+
"deprecated": false
|
|
3236
|
+
},
|
|
3237
|
+
{
|
|
3238
|
+
"name": "className",
|
|
3239
|
+
"type": "string | undefined",
|
|
3240
|
+
"required": false,
|
|
3241
|
+
"group": "dom",
|
|
3242
|
+
"deprecated": false
|
|
3243
|
+
},
|
|
3244
|
+
{
|
|
3245
|
+
"name": "id",
|
|
3246
|
+
"type": "string | undefined",
|
|
3247
|
+
"required": false,
|
|
3248
|
+
"group": "dom",
|
|
3249
|
+
"deprecated": false
|
|
3250
|
+
},
|
|
3251
|
+
{
|
|
3252
|
+
"name": "onClick",
|
|
3253
|
+
"type": "MouseEventHandler<HTMLDivElement> | undefined",
|
|
3254
|
+
"required": false,
|
|
3255
|
+
"group": "dom",
|
|
3256
|
+
"deprecated": false
|
|
3257
|
+
},
|
|
3258
|
+
{
|
|
3259
|
+
"name": "style",
|
|
3260
|
+
"type": "CSSProperties | undefined",
|
|
3261
|
+
"required": false,
|
|
3262
|
+
"group": "dom",
|
|
3263
|
+
"deprecated": false
|
|
3264
|
+
},
|
|
3265
|
+
{
|
|
3266
|
+
"name": "title",
|
|
3267
|
+
"type": "string | undefined",
|
|
3268
|
+
"required": false,
|
|
3269
|
+
"group": "dom",
|
|
3270
|
+
"deprecated": false
|
|
3271
|
+
}
|
|
3272
|
+
]
|
|
3273
|
+
},
|
|
3274
|
+
{
|
|
3275
|
+
"name": "static:CodeDiffVariant",
|
|
3276
|
+
"displayName": "CodeDiffVariant",
|
|
3277
|
+
"propsType": "CodeDiffVariantProps",
|
|
3278
|
+
"source": "static",
|
|
3279
|
+
"props": [
|
|
3280
|
+
{
|
|
3281
|
+
"name": "appearance",
|
|
3282
|
+
"type": "'default' | null | undefined",
|
|
3283
|
+
"required": false,
|
|
3284
|
+
"group": "behavior",
|
|
3285
|
+
"deprecated": false
|
|
3286
|
+
},
|
|
3287
|
+
{
|
|
3288
|
+
"name": "size",
|
|
3289
|
+
"type": "'md' | 'sm' | 'lg' | null | undefined",
|
|
3290
|
+
"required": false,
|
|
3291
|
+
"group": "behavior",
|
|
3292
|
+
"deprecated": false
|
|
3293
|
+
}
|
|
3294
|
+
]
|
|
3295
|
+
}
|
|
3296
|
+
]
|
|
3297
|
+
},
|
|
3137
3298
|
"combobox": {
|
|
3138
3299
|
"slug": "combobox",
|
|
3139
3300
|
"subcomponents": [
|
|
@@ -6252,9 +6413,44 @@
|
|
|
6252
6413
|
{
|
|
6253
6414
|
"name": "children",
|
|
6254
6415
|
"type": "ReactNode",
|
|
6255
|
-
"required":
|
|
6416
|
+
"required": false,
|
|
6256
6417
|
"group": "content",
|
|
6257
6418
|
"deprecated": false
|
|
6419
|
+
},
|
|
6420
|
+
{
|
|
6421
|
+
"name": "className",
|
|
6422
|
+
"type": "string | undefined",
|
|
6423
|
+
"required": false,
|
|
6424
|
+
"group": "dom",
|
|
6425
|
+
"deprecated": false
|
|
6426
|
+
},
|
|
6427
|
+
{
|
|
6428
|
+
"name": "id",
|
|
6429
|
+
"type": "string | undefined",
|
|
6430
|
+
"required": false,
|
|
6431
|
+
"group": "dom",
|
|
6432
|
+
"deprecated": false
|
|
6433
|
+
},
|
|
6434
|
+
{
|
|
6435
|
+
"name": "onClick",
|
|
6436
|
+
"type": "MouseEventHandler<HTMLDivElement> | undefined",
|
|
6437
|
+
"required": false,
|
|
6438
|
+
"group": "dom",
|
|
6439
|
+
"deprecated": false
|
|
6440
|
+
},
|
|
6441
|
+
{
|
|
6442
|
+
"name": "style",
|
|
6443
|
+
"type": "CSSProperties | undefined",
|
|
6444
|
+
"required": false,
|
|
6445
|
+
"group": "dom",
|
|
6446
|
+
"deprecated": false
|
|
6447
|
+
},
|
|
6448
|
+
{
|
|
6449
|
+
"name": "title",
|
|
6450
|
+
"type": "string | undefined",
|
|
6451
|
+
"required": false,
|
|
6452
|
+
"group": "dom",
|
|
6453
|
+
"deprecated": false
|
|
6258
6454
|
}
|
|
6259
6455
|
]
|
|
6260
6456
|
},
|
|
@@ -6337,8 +6533,8 @@
|
|
|
6337
6533
|
"props": [
|
|
6338
6534
|
{
|
|
6339
6535
|
"name": "value",
|
|
6340
|
-
"type": "string",
|
|
6341
|
-
"required":
|
|
6536
|
+
"type": "string | undefined",
|
|
6537
|
+
"required": false,
|
|
6342
6538
|
"group": "controlled",
|
|
6343
6539
|
"deprecated": false
|
|
6344
6540
|
},
|
|
@@ -12728,6 +12924,157 @@
|
|
|
12728
12924
|
}
|
|
12729
12925
|
]
|
|
12730
12926
|
},
|
|
12927
|
+
"split-button": {
|
|
12928
|
+
"slug": "split-button",
|
|
12929
|
+
"subcomponents": [
|
|
12930
|
+
{
|
|
12931
|
+
"name": "static:SplitButton",
|
|
12932
|
+
"displayName": "SplitButton",
|
|
12933
|
+
"propsType": "SplitButtonProps",
|
|
12934
|
+
"source": "static",
|
|
12935
|
+
"props": [
|
|
12936
|
+
{
|
|
12937
|
+
"name": "fullWidth",
|
|
12938
|
+
"type": "enum",
|
|
12939
|
+
"required": false,
|
|
12940
|
+
"group": "variant",
|
|
12941
|
+
"isVariant": true,
|
|
12942
|
+
"options": [
|
|
12943
|
+
"true"
|
|
12944
|
+
],
|
|
12945
|
+
"variantGroup": "fullWidth",
|
|
12946
|
+
"deprecated": false
|
|
12947
|
+
},
|
|
12948
|
+
{
|
|
12949
|
+
"name": "defaultOpen",
|
|
12950
|
+
"type": "boolean | undefined",
|
|
12951
|
+
"required": false,
|
|
12952
|
+
"group": "controlled",
|
|
12953
|
+
"deprecated": false
|
|
12954
|
+
},
|
|
12955
|
+
{
|
|
12956
|
+
"name": "onOpenChange",
|
|
12957
|
+
"type": "((open: boolean) => void) | undefined",
|
|
12958
|
+
"required": false,
|
|
12959
|
+
"group": "controlled",
|
|
12960
|
+
"deprecated": false
|
|
12961
|
+
},
|
|
12962
|
+
{
|
|
12963
|
+
"name": "open",
|
|
12964
|
+
"type": "boolean | undefined",
|
|
12965
|
+
"required": false,
|
|
12966
|
+
"group": "controlled",
|
|
12967
|
+
"deprecated": false
|
|
12968
|
+
},
|
|
12969
|
+
{
|
|
12970
|
+
"name": "appearance",
|
|
12971
|
+
"type": "'default' | 'outline' | 'ghost' | 'blue' | 'cyan' | 'green' | 'lime' | 'mint' | 'ocean' | 'sapphire' | 'lavender' | 'ruby' | 'red' | 'slate' | 'zinc' | 'stone' | 'royal' | 'electric' | 'forest' | 'sunset' | 'magenta' | 'crimson' | 'aqua' | 'plum' | 'sky' | 'rose' | 'purple' | 'pink' | 'orange' | 'yellow' | 'teal' | 'indigo' | 'emerald' | 'gradient-blue' | 'gradient-green' | 'gradient-red' | 'gradient-yellow' | 'gradient-purple' | 'gradient-teal' | 'gradient-indigo' | 'gradient-pink' | 'gradient-orange' | 'link' | 'gray' | 'violet' | 'secondary' | 'destructive' | 'amber' | 'glass' | null | undefined",
|
|
12972
|
+
"required": false,
|
|
12973
|
+
"group": "behavior",
|
|
12974
|
+
"deprecated": false
|
|
12975
|
+
},
|
|
12976
|
+
{
|
|
12977
|
+
"name": "disabled",
|
|
12978
|
+
"type": "boolean | undefined",
|
|
12979
|
+
"required": false,
|
|
12980
|
+
"group": "behavior",
|
|
12981
|
+
"deprecated": false
|
|
12982
|
+
},
|
|
12983
|
+
{
|
|
12984
|
+
"name": "items",
|
|
12985
|
+
"type": "SplitButtonItem[]",
|
|
12986
|
+
"required": true,
|
|
12987
|
+
"group": "behavior",
|
|
12988
|
+
"deprecated": false
|
|
12989
|
+
},
|
|
12990
|
+
{
|
|
12991
|
+
"name": "label",
|
|
12992
|
+
"type": "string",
|
|
12993
|
+
"required": true,
|
|
12994
|
+
"group": "behavior",
|
|
12995
|
+
"deprecated": false
|
|
12996
|
+
},
|
|
12997
|
+
{
|
|
12998
|
+
"name": "loading",
|
|
12999
|
+
"type": "boolean | undefined",
|
|
13000
|
+
"required": false,
|
|
13001
|
+
"group": "behavior",
|
|
13002
|
+
"deprecated": false
|
|
13003
|
+
},
|
|
13004
|
+
{
|
|
13005
|
+
"name": "onClick",
|
|
13006
|
+
"type": "MouseEventHandler<HTMLButtonElement> | undefined",
|
|
13007
|
+
"required": false,
|
|
13008
|
+
"group": "behavior",
|
|
13009
|
+
"deprecated": false
|
|
13010
|
+
},
|
|
13011
|
+
{
|
|
13012
|
+
"name": "size",
|
|
13013
|
+
"type": "SplitButtonSize | undefined",
|
|
13014
|
+
"required": false,
|
|
13015
|
+
"group": "behavior",
|
|
13016
|
+
"deprecated": false
|
|
13017
|
+
},
|
|
13018
|
+
{
|
|
13019
|
+
"name": "startIcon",
|
|
13020
|
+
"type": "ReactNode",
|
|
13021
|
+
"required": false,
|
|
13022
|
+
"group": "behavior",
|
|
13023
|
+
"deprecated": false
|
|
13024
|
+
},
|
|
13025
|
+
{
|
|
13026
|
+
"name": "triggerLabel",
|
|
13027
|
+
"type": "string | undefined",
|
|
13028
|
+
"required": false,
|
|
13029
|
+
"group": "behavior",
|
|
13030
|
+
"deprecated": false
|
|
13031
|
+
},
|
|
13032
|
+
{
|
|
13033
|
+
"name": "triggerOn",
|
|
13034
|
+
"type": "'hover' | 'click' | undefined",
|
|
13035
|
+
"required": false,
|
|
13036
|
+
"group": "behavior",
|
|
13037
|
+
"deprecated": false
|
|
13038
|
+
},
|
|
13039
|
+
{
|
|
13040
|
+
"name": "variant",
|
|
13041
|
+
"type": "SplitButtonVariant | undefined",
|
|
13042
|
+
"required": false,
|
|
13043
|
+
"group": "behavior",
|
|
13044
|
+
"deprecated": false
|
|
13045
|
+
},
|
|
13046
|
+
{
|
|
13047
|
+
"name": "className",
|
|
13048
|
+
"type": "string | undefined",
|
|
13049
|
+
"required": false,
|
|
13050
|
+
"group": "dom",
|
|
13051
|
+
"deprecated": false
|
|
13052
|
+
},
|
|
13053
|
+
{
|
|
13054
|
+
"name": "id",
|
|
13055
|
+
"type": "string | undefined",
|
|
13056
|
+
"required": false,
|
|
13057
|
+
"group": "dom",
|
|
13058
|
+
"deprecated": false
|
|
13059
|
+
},
|
|
13060
|
+
{
|
|
13061
|
+
"name": "style",
|
|
13062
|
+
"type": "CSSProperties | undefined",
|
|
13063
|
+
"required": false,
|
|
13064
|
+
"group": "dom",
|
|
13065
|
+
"deprecated": false
|
|
13066
|
+
},
|
|
13067
|
+
{
|
|
13068
|
+
"name": "title",
|
|
13069
|
+
"type": "string | undefined",
|
|
13070
|
+
"required": false,
|
|
13071
|
+
"group": "dom",
|
|
13072
|
+
"deprecated": false
|
|
13073
|
+
}
|
|
13074
|
+
]
|
|
13075
|
+
}
|
|
13076
|
+
]
|
|
13077
|
+
},
|
|
12731
13078
|
"table": {
|
|
12732
13079
|
"slug": "table",
|
|
12733
13080
|
"subcomponents": [
|
package/cli/registry.json
CHANGED
|
@@ -12,6 +12,7 @@
|
|
|
12
12
|
"buttons",
|
|
13
13
|
"card",
|
|
14
14
|
"checkbox",
|
|
15
|
+
"code-diff",
|
|
15
16
|
"combobox",
|
|
16
17
|
"command",
|
|
17
18
|
"context-menu",
|
|
@@ -38,6 +39,7 @@
|
|
|
38
39
|
"select",
|
|
39
40
|
"skeleton",
|
|
40
41
|
"slider",
|
|
42
|
+
"split-button",
|
|
41
43
|
"table",
|
|
42
44
|
"tabs",
|
|
43
45
|
"timeline",
|
|
@@ -148,6 +150,7 @@
|
|
|
148
150
|
"charts/scatter",
|
|
149
151
|
"charts/stacked-bar",
|
|
150
152
|
"checkbox",
|
|
153
|
+
"code-diff",
|
|
151
154
|
"combobox",
|
|
152
155
|
"command",
|
|
153
156
|
"context-menu",
|
|
@@ -175,6 +178,7 @@
|
|
|
175
178
|
"skeleton",
|
|
176
179
|
"slider",
|
|
177
180
|
"spinner",
|
|
181
|
+
"split-button",
|
|
178
182
|
"table",
|
|
179
183
|
"tabs",
|
|
180
184
|
"timeline",
|
|
@@ -286,6 +290,10 @@
|
|
|
286
290
|
],
|
|
287
291
|
"search": [
|
|
288
292
|
"inputs"
|
|
293
|
+
],
|
|
294
|
+
"split-button": [
|
|
295
|
+
"buttons",
|
|
296
|
+
"dropdown"
|
|
289
297
|
]
|
|
290
298
|
},
|
|
291
299
|
"peerHints": {
|
|
@@ -361,6 +369,9 @@
|
|
|
361
369
|
"skeleton": [
|
|
362
370
|
"framer-motion"
|
|
363
371
|
],
|
|
372
|
+
"split-button": [
|
|
373
|
+
"react-icons"
|
|
374
|
+
],
|
|
364
375
|
"table": [
|
|
365
376
|
"framer-motion"
|
|
366
377
|
],
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { usePagination } from './chunk-YNBJAFI2.mjs';
|
|
2
|
-
import { buttonVariants } from './chunk-
|
|
3
|
-
import { zuiPaginationListBase, zuiPaginationListSizes, zuiPaginationListAppearances, zuiPaginationEllipsisBase, zuiPaginationEllipsisSizes } from './chunk-
|
|
2
|
+
import { buttonVariants } from './chunk-VN7FE5RR.mjs';
|
|
3
|
+
import { zuiPaginationListBase, zuiPaginationListSizes, zuiPaginationListAppearances, zuiPaginationEllipsisBase, zuiPaginationEllipsisSizes } from './chunk-3RC5IG6O.mjs';
|
|
4
4
|
import { cn, clampPage } from './chunk-4D54YOL6.mjs';
|
|
5
5
|
import { useId, useCallback } from 'react';
|
|
6
6
|
import { cva } from 'class-variance-authority';
|
|
@@ -217,5 +217,5 @@ var Pagination = ({
|
|
|
217
217
|
Pagination.displayName = "Pagination";
|
|
218
218
|
|
|
219
219
|
export { Pagination, paginationEllipsisVariants, paginationListVariants };
|
|
220
|
-
//# sourceMappingURL=chunk-
|
|
221
|
-
//# sourceMappingURL=chunk-
|
|
220
|
+
//# sourceMappingURL=chunk-3HBC34NF.mjs.map
|
|
221
|
+
//# sourceMappingURL=chunk-3HBC34NF.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/ui/pagination/variants.ts","../src/ui/pagination/pagination.tsx"],"names":[],"mappings":"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","file":"chunk-DBNGLT5U.mjs","sourcesContent":["import { cva } from \"class-variance-authority\";\n\nimport {\n zuiPaginationEllipsisBase,\n zuiPaginationEllipsisSizes,\n zuiPaginationListAppearances,\n zuiPaginationListBase,\n zuiPaginationListSizes,\n} from \"../../design-system/pagination\";\n\nexport const paginationListVariants = cva(zuiPaginationListBase, {\n variants: {\n appearance: zuiPaginationListAppearances,\n size: zuiPaginationListSizes,\n },\n defaultVariants: {\n appearance: \"default\",\n size: \"md\",\n },\n});\n\nexport const paginationEllipsisVariants = cva(zuiPaginationEllipsisBase, {\n variants: {\n size: zuiPaginationEllipsisSizes,\n },\n defaultVariants: { size: \"md\" },\n});\n","\"use client\";\n\nimport { useCallback, useId, type KeyboardEvent } from \"react\";\n\nimport { cn, clampPage } from \"../../lib/utils\";\nimport { buttonVariants } from \"../buttons/variants\";\n\nimport type { PaginationProps } from \"./types\";\nimport { usePagination } from \"../../hooks/usePagination\";\nimport { paginationEllipsisVariants, paginationListVariants } from \"./variants\";\n\nconst defaultPrevLabel = \"Previous page\";\nconst defaultNextLabel = \"Next page\";\nconst defaultEllipsisLabel = \"More pages\";\n\nexport const Pagination = ({\n className,\n appearance = \"default\",\n size = \"md\",\n pageCount,\n page,\n defaultPage = 1,\n onPageChange,\n siblingCount = 1,\n boundaryCount = 1,\n showPrevNext = true,\n prevLabel = defaultPrevLabel,\n nextLabel = defaultNextLabel,\n ellipsisLabel = defaultEllipsisLabel,\n getPageHref,\n \"aria-label\": ariaLabel = \"Pagination\",\n ref,\n ...rest\n}: PaginationProps) => {\n const id = useId();\n const listId = `${id}-list`;\n\n const { currentPage, items, setPage, goPrev, goNext, canGoPrev, canGoNext } =\n usePagination({\n pageCount,\n page,\n defaultPage,\n siblingCount,\n boundaryCount,\n onPageChange,\n });\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent<HTMLElement>) => {\n if (pageCount <= 0) {\n return;\n }\n if (event.key === \"ArrowRight\" || event.key === \"ArrowDown\") {\n event.preventDefault();\n if (canGoNext) {\n setPage(currentPage + 1);\n }\n } else if (event.key === \"ArrowLeft\" || event.key === \"ArrowUp\") {\n event.preventDefault();\n if (canGoPrev) {\n setPage(currentPage - 1);\n }\n } else if (event.key === \"Home\") {\n event.preventDefault();\n setPage(1);\n } else if (event.key === \"End\") {\n event.preventDefault();\n setPage(pageCount);\n }\n },\n [canGoNext, canGoPrev, currentPage, pageCount, setPage],\n );\n\n if (pageCount <= 0) {\n return null;\n }\n\n const inactiveTriggerClass = cn(\n buttonVariants({ appearance: \"ghost\", size }),\n \"bg-white/[0.04] text-slate-900 dark:text-slate-200 hover:bg-white/10\",\n );\n\n const currentTriggerClass = buttonVariants({ appearance, size });\n\n const triggerFocusRing =\n \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-300 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-950\";\n\n const renderPageControl = (pageNumber: number) => {\n const isCurrent = pageNumber === currentPage;\n const href = getPageHref?.(pageNumber);\n const shared = cn(\n isCurrent ? currentTriggerClass : inactiveTriggerClass,\n \"min-w-[2.25ch] shrink-0\",\n triggerFocusRing,\n );\n\n if (href) {\n return (\n <a\n data-slot=\"pagination-trigger\"\n href={href}\n aria-label={`Page ${pageNumber}`}\n aria-current={isCurrent ? \"page\" : undefined}\n className={shared}\n >\n {pageNumber}\n </a>\n );\n }\n\n return (\n <button\n type=\"button\"\n data-slot=\"pagination-trigger\"\n aria-label={`Page ${pageNumber}`}\n aria-current={isCurrent ? \"page\" : undefined}\n className={shared}\n onClick={() => {\n if (!isCurrent) {\n setPage(pageNumber);\n }\n }}\n >\n {pageNumber}\n </button>\n );\n };\n\n const prevHref = getPageHref?.(clampPage(currentPage - 1, pageCount));\n const nextHref = getPageHref?.(clampPage(currentPage + 1, pageCount));\n\n const navTriggerClass = cn(\n buttonVariants({ appearance: \"outline\", size }),\n \"shrink-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-300 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-950\",\n );\n\n return (\n <nav\n ref={ref}\n data-slot=\"pagination\"\n aria-label={ariaLabel}\n className={cn(\"w-full\", className)}\n onKeyDown={handleKeyDown}\n {...rest}\n >\n <div className=\"flex flex-wrap items-center gap-2\">\n {showPrevNext ? (\n getPageHref && prevHref && canGoPrev ? (\n <a\n data-slot=\"pagination-prev\"\n aria-label={prevLabel}\n href={prevHref}\n className={navTriggerClass}\n >\n Prev\n </a>\n ) : (\n <button\n type=\"button\"\n data-slot=\"pagination-prev\"\n aria-label={prevLabel}\n disabled={!canGoPrev}\n className={navTriggerClass}\n onClick={goPrev}\n >\n Prev\n </button>\n )\n ) : null}\n\n <ul\n id={listId}\n data-slot=\"pagination-list\"\n className={paginationListVariants({ appearance, size })}\n >\n {items.map((item) => (\n <li\n key={item.type === \"page\" ? `page-${item.value}` : item.key}\n data-slot=\"pagination-item\"\n className=\"inline-flex items-center\"\n >\n {item.type === \"ellipsis\" ? (\n <span\n data-slot=\"pagination-ellipsis\"\n className={paginationEllipsisVariants({ size })}\n role=\"img\"\n aria-label={ellipsisLabel}\n >\n …\n </span>\n ) : (\n renderPageControl(item.value)\n )}\n </li>\n ))}\n </ul>\n\n {showPrevNext ? (\n getPageHref && nextHref && canGoNext ? (\n <a\n data-slot=\"pagination-next\"\n aria-label={nextLabel}\n href={nextHref}\n className={navTriggerClass}\n >\n Next\n </a>\n ) : (\n <button\n type=\"button\"\n data-slot=\"pagination-next\"\n aria-label={nextLabel}\n disabled={!canGoNext}\n className={navTriggerClass}\n onClick={goNext}\n >\n Next\n </button>\n )\n ) : null}\n </div>\n </nav>\n );\n};\n\nPagination.displayName = \"Pagination\";\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/ui/pagination/variants.ts","../src/ui/pagination/pagination.tsx"],"names":[],"mappings":"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","file":"chunk-3HBC34NF.mjs","sourcesContent":["import { cva } from \"class-variance-authority\";\n\nimport {\n zuiPaginationEllipsisBase,\n zuiPaginationEllipsisSizes,\n zuiPaginationListAppearances,\n zuiPaginationListBase,\n zuiPaginationListSizes,\n} from \"../../design-system/pagination\";\n\nexport const paginationListVariants = cva(zuiPaginationListBase, {\n variants: {\n appearance: zuiPaginationListAppearances,\n size: zuiPaginationListSizes,\n },\n defaultVariants: {\n appearance: \"default\",\n size: \"md\",\n },\n});\n\nexport const paginationEllipsisVariants = cva(zuiPaginationEllipsisBase, {\n variants: {\n size: zuiPaginationEllipsisSizes,\n },\n defaultVariants: { size: \"md\" },\n});\n","\"use client\";\n\nimport { useCallback, useId, type KeyboardEvent } from \"react\";\n\nimport { cn, clampPage } from \"../../lib/utils\";\nimport { buttonVariants } from \"../buttons/variants\";\n\nimport type { PaginationProps } from \"./types\";\nimport { usePagination } from \"../../hooks/usePagination\";\nimport { paginationEllipsisVariants, paginationListVariants } from \"./variants\";\n\nconst defaultPrevLabel = \"Previous page\";\nconst defaultNextLabel = \"Next page\";\nconst defaultEllipsisLabel = \"More pages\";\n\nexport const Pagination = ({\n className,\n appearance = \"default\",\n size = \"md\",\n pageCount,\n page,\n defaultPage = 1,\n onPageChange,\n siblingCount = 1,\n boundaryCount = 1,\n showPrevNext = true,\n prevLabel = defaultPrevLabel,\n nextLabel = defaultNextLabel,\n ellipsisLabel = defaultEllipsisLabel,\n getPageHref,\n \"aria-label\": ariaLabel = \"Pagination\",\n ref,\n ...rest\n}: PaginationProps) => {\n const id = useId();\n const listId = `${id}-list`;\n\n const { currentPage, items, setPage, goPrev, goNext, canGoPrev, canGoNext } =\n usePagination({\n pageCount,\n page,\n defaultPage,\n siblingCount,\n boundaryCount,\n onPageChange,\n });\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent<HTMLElement>) => {\n if (pageCount <= 0) {\n return;\n }\n if (event.key === \"ArrowRight\" || event.key === \"ArrowDown\") {\n event.preventDefault();\n if (canGoNext) {\n setPage(currentPage + 1);\n }\n } else if (event.key === \"ArrowLeft\" || event.key === \"ArrowUp\") {\n event.preventDefault();\n if (canGoPrev) {\n setPage(currentPage - 1);\n }\n } else if (event.key === \"Home\") {\n event.preventDefault();\n setPage(1);\n } else if (event.key === \"End\") {\n event.preventDefault();\n setPage(pageCount);\n }\n },\n [canGoNext, canGoPrev, currentPage, pageCount, setPage],\n );\n\n if (pageCount <= 0) {\n return null;\n }\n\n const inactiveTriggerClass = cn(\n buttonVariants({ appearance: \"ghost\", size }),\n \"bg-white/[0.04] text-slate-900 dark:text-slate-200 hover:bg-white/10\",\n );\n\n const currentTriggerClass = buttonVariants({ appearance, size });\n\n const triggerFocusRing =\n \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-300 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-950\";\n\n const renderPageControl = (pageNumber: number) => {\n const isCurrent = pageNumber === currentPage;\n const href = getPageHref?.(pageNumber);\n const shared = cn(\n isCurrent ? currentTriggerClass : inactiveTriggerClass,\n \"min-w-[2.25ch] shrink-0\",\n triggerFocusRing,\n );\n\n if (href) {\n return (\n <a\n data-slot=\"pagination-trigger\"\n href={href}\n aria-label={`Page ${pageNumber}`}\n aria-current={isCurrent ? \"page\" : undefined}\n className={shared}\n >\n {pageNumber}\n </a>\n );\n }\n\n return (\n <button\n type=\"button\"\n data-slot=\"pagination-trigger\"\n aria-label={`Page ${pageNumber}`}\n aria-current={isCurrent ? \"page\" : undefined}\n className={shared}\n onClick={() => {\n if (!isCurrent) {\n setPage(pageNumber);\n }\n }}\n >\n {pageNumber}\n </button>\n );\n };\n\n const prevHref = getPageHref?.(clampPage(currentPage - 1, pageCount));\n const nextHref = getPageHref?.(clampPage(currentPage + 1, pageCount));\n\n const navTriggerClass = cn(\n buttonVariants({ appearance: \"outline\", size }),\n \"shrink-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-300 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-950\",\n );\n\n return (\n <nav\n ref={ref}\n data-slot=\"pagination\"\n aria-label={ariaLabel}\n className={cn(\"w-full\", className)}\n onKeyDown={handleKeyDown}\n {...rest}\n >\n <div className=\"flex flex-wrap items-center gap-2\">\n {showPrevNext ? (\n getPageHref && prevHref && canGoPrev ? (\n <a\n data-slot=\"pagination-prev\"\n aria-label={prevLabel}\n href={prevHref}\n className={navTriggerClass}\n >\n Prev\n </a>\n ) : (\n <button\n type=\"button\"\n data-slot=\"pagination-prev\"\n aria-label={prevLabel}\n disabled={!canGoPrev}\n className={navTriggerClass}\n onClick={goPrev}\n >\n Prev\n </button>\n )\n ) : null}\n\n <ul\n id={listId}\n data-slot=\"pagination-list\"\n className={paginationListVariants({ appearance, size })}\n >\n {items.map((item) => (\n <li\n key={item.type === \"page\" ? `page-${item.value}` : item.key}\n data-slot=\"pagination-item\"\n className=\"inline-flex items-center\"\n >\n {item.type === \"ellipsis\" ? (\n <span\n data-slot=\"pagination-ellipsis\"\n className={paginationEllipsisVariants({ size })}\n role=\"img\"\n aria-label={ellipsisLabel}\n >\n …\n </span>\n ) : (\n renderPageControl(item.value)\n )}\n </li>\n ))}\n </ul>\n\n {showPrevNext ? (\n getPageHref && nextHref && canGoNext ? (\n <a\n data-slot=\"pagination-next\"\n aria-label={nextLabel}\n href={nextHref}\n className={navTriggerClass}\n >\n Next\n </a>\n ) : (\n <button\n type=\"button\"\n data-slot=\"pagination-next\"\n aria-label={nextLabel}\n disabled={!canGoNext}\n className={navTriggerClass}\n onClick={goNext}\n >\n Next\n </button>\n )\n ) : null}\n </div>\n </nav>\n );\n};\n\nPagination.displayName = \"Pagination\";\n"]}
|