@squadbase/vantage 0.6.2 → 0.7.0-dev1.19083f7
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/dist/add-4GHF2TX2.js +6 -0
- package/dist/add-4GHF2TX2.js.map +1 -0
- package/dist/{build-O5TVNH4E.js → build-U7GO26HR.js} +9 -9
- package/dist/{build-O5TVNH4E.js.map → build-U7GO26HR.js.map} +1 -1
- package/dist/{check-WFBEDHDR.js → check-MRVAIHG5.js} +7 -7
- package/dist/{check-WFBEDHDR.js.map → check-MRVAIHG5.js.map} +1 -1
- package/dist/chunk-2IAPIOPS.js +152 -0
- package/dist/chunk-2IAPIOPS.js.map +1 -0
- package/dist/chunk-3RJEOP3J.js +174 -0
- package/dist/chunk-3RJEOP3J.js.map +1 -0
- package/dist/{chunk-QDZA5JSL.js → chunk-AABMKHEU.js} +4 -4
- package/dist/{chunk-QDZA5JSL.js.map → chunk-AABMKHEU.js.map} +1 -1
- package/dist/{chunk-PVTHHV7X.js → chunk-ANZLVSEP.js} +28 -7
- package/dist/chunk-ANZLVSEP.js.map +1 -0
- package/dist/chunk-CKWPK4RO.js +50 -0
- package/dist/chunk-CKWPK4RO.js.map +1 -0
- package/dist/chunk-EG4PX726.js +678 -0
- package/dist/chunk-EG4PX726.js.map +1 -0
- package/dist/{chunk-3G43C6OL.js → chunk-GNXCX4WE.js} +46 -3
- package/dist/chunk-GNXCX4WE.js.map +1 -0
- package/dist/chunk-NYQJ5UY4.js +9028 -0
- package/dist/chunk-NYQJ5UY4.js.map +1 -0
- package/dist/chunk-NZ5QIIG4.js +74 -0
- package/dist/chunk-NZ5QIIG4.js.map +1 -0
- package/dist/{chunk-BCE22JSM.js → chunk-PJ4SPXHS.js} +52 -16
- package/dist/chunk-PJ4SPXHS.js.map +1 -0
- package/dist/{chunk-RPZAALCX.js → chunk-QNOX7WLZ.js} +256 -165
- package/dist/chunk-QNOX7WLZ.js.map +1 -0
- package/dist/{chunk-ZVANIULZ.js → chunk-RNTDBX6S.js} +4 -4
- package/dist/{chunk-ZVANIULZ.js.map → chunk-RNTDBX6S.js.map} +1 -1
- package/dist/{chunk-PXRX5PEC.js → chunk-ROHNXP7J.js} +73 -4
- package/dist/chunk-ROHNXP7J.js.map +1 -0
- package/dist/chunk-S5MDTHH7.js +466 -0
- package/dist/chunk-S5MDTHH7.js.map +1 -0
- package/dist/chunk-SDJTTMLK.js +1877 -0
- package/dist/chunk-SDJTTMLK.js.map +1 -0
- package/dist/{chunk-EP6JHXSR.js → chunk-SHZM3EXB.js} +68 -12
- package/dist/chunk-SHZM3EXB.js.map +1 -0
- package/dist/chunk-TRMHNMMZ.js +61 -0
- package/dist/chunk-TRMHNMMZ.js.map +1 -0
- package/dist/{chunk-A2UUGASH.js → chunk-U736PVHY.js} +2 -2
- package/dist/chunk-U736PVHY.js.map +1 -0
- package/dist/{chunk-JGRMRXXZ.js → chunk-UWSQUHX6.js} +4 -99
- package/dist/chunk-UWSQUHX6.js.map +1 -0
- package/dist/cli.js +15 -11
- package/dist/cli.js.map +1 -1
- package/dist/client/index.d.ts +34 -3
- package/dist/client/index.js +211 -12
- package/dist/client/index.js.map +1 -1
- package/dist/components/index.d.ts +2113 -30
- package/dist/components/index.js +7 -4
- package/dist/delta-text-CbrOaW83.d.ts +17 -0
- package/dist/{dev-NZRLOQCL.js → dev-O42JFQ64.js} +24 -13
- package/dist/dev-O42JFQ64.js.map +1 -0
- package/dist/doc/index.d.ts +215 -2
- package/dist/doc/index.js +423 -5
- package/dist/doc/index.js.map +1 -1
- package/dist/{docs-ZGDJUHJI.js → docs-JVP4RPKT.js} +3 -3
- package/dist/{docs-ZGDJUHJI.js.map → docs-JVP4RPKT.js.map} +1 -1
- package/dist/{doctor-VFKEMR54.js → doctor-YD3XAAOT.js} +8 -8
- package/dist/doctor-YD3XAAOT.js.map +1 -0
- package/dist/format-DihQkL1N.d.ts +249 -0
- package/dist/geo-japan-7BMSOJRX.js +8 -0
- package/dist/geo-japan-7BMSOJRX.js.map +1 -0
- package/dist/geo-us-GVOG7VXH.js +8 -0
- package/dist/geo-us-GVOG7VXH.js.map +1 -0
- package/dist/geo-world-35HL56UU.js +8 -0
- package/dist/geo-world-35HL56UU.js.map +1 -0
- package/dist/markdown/index.js +1 -1
- package/dist/markdown/index.js.map +1 -1
- package/dist/{preview-QDCIVVSR.js → preview-T6CLSQVX.js} +12 -4
- package/dist/preview-T6CLSQVX.js.map +1 -0
- package/dist/query/index.d.ts +0 -11
- package/dist/query/index.js +2 -2
- package/dist/{routes-RHP5FVGD.js → routes-PVKNT777.js} +6 -6
- package/dist/{routes-RHP5FVGD.js.map → routes-PVKNT777.js.map} +1 -1
- package/dist/{search-RFBELGY7.js → search-5LC4XPB5.js} +3 -3
- package/dist/{search-RFBELGY7.js.map → search-5LC4XPB5.js.map} +1 -1
- package/dist/slide/index.d.ts +272 -1
- package/dist/slide/index.js +1086 -19
- package/dist/slide/index.js.map +1 -1
- package/dist/table/index.js +14 -10
- package/dist/table/index.js.map +1 -1
- package/dist/ui/index.d.ts +148 -12
- package/dist/ui/index.js +1340 -88
- package/dist/ui/index.js.map +1 -1
- package/dist/{upgrade-GF2P67M6.js → upgrade-6DT7ADRP.js} +7 -7
- package/dist/{upgrade-GF2P67M6.js.map → upgrade-6DT7ADRP.js.map} +1 -1
- package/dist/vite/index.d.ts +10 -0
- package/dist/vite/index.js +4 -4
- package/docs/en/agent-skills.md +1 -1
- package/docs/en/changelog.md +82 -0
- package/docs/en/cli-reference.md +30 -0
- package/docs/en/components.md +42 -17
- package/docs/en/doc/delta-text.md +40 -0
- package/docs/en/doc/doc-action-items.md +49 -0
- package/docs/en/doc/doc-callout.md +38 -0
- package/docs/en/doc/doc-data-table.md +60 -0
- package/docs/en/doc/doc-executive-summary.md +64 -0
- package/docs/en/doc/doc-figure.md +56 -0
- package/docs/en/doc/doc-key-findings.md +61 -0
- package/docs/en/doc/doc-kpi-scorecard.md +80 -0
- package/docs/en/doc/doc-notes-and-sources.md +43 -0
- package/docs/en/doc/doc-report-header.md +46 -0
- package/docs/en/pages-and-metadata.md +15 -0
- package/docs/en/parts/area-chart.md +99 -0
- package/docs/en/parts/bar-chart.md +91 -0
- package/docs/en/parts/bar-list.md +50 -0
- package/docs/en/parts/category-bar.md +37 -0
- package/docs/en/parts/chart-frame.md +39 -0
- package/docs/en/parts/data-table.md +22 -0
- package/docs/en/parts/delta.md +51 -0
- package/docs/en/parts/donut-chart.md +72 -0
- package/docs/en/parts/format.md +43 -0
- package/docs/en/parts/funnel-steps.md +2 -1
- package/docs/en/parts/heatmap.md +53 -0
- package/docs/en/parts/kpi-card.md +58 -0
- package/docs/en/parts/legend.md +35 -0
- package/docs/en/parts/line-chart.md +94 -0
- package/docs/en/parts/metric-value.md +3 -2
- package/docs/en/parts/page-shell.md +1 -1
- package/docs/en/parts/progress-circle.md +33 -0
- package/docs/en/parts/sample-data.md +39 -0
- package/docs/en/parts/scatter-chart.md +56 -0
- package/docs/en/parts/sparkline.md +1 -1
- package/docs/en/parts/tracker.md +36 -0
- package/docs/en/parts/trend-indicator.md +17 -1
- package/docs/en/parts/updated-at.md +30 -0
- package/docs/en/parts/waterfall-chart.md +56 -0
- package/docs/en/slide/slide-chart-full.md +48 -0
- package/docs/en/slide/slide-chart-insight.md +52 -0
- package/docs/en/slide/slide-columns.md +46 -0
- package/docs/en/slide/slide-comparison.md +68 -0
- package/docs/en/slide/slide-cover.md +39 -0
- package/docs/en/slide/slide-exec-summary.md +47 -0
- package/docs/en/slide/slide-heading.md +38 -0
- package/docs/en/slide/slide-kpi-grid.md +55 -0
- package/docs/en/slide/slide-kpi-hero.md +58 -0
- package/docs/en/slide/slide-next-actions.md +49 -0
- package/docs/en/slide/slide-scorecard-table.md +54 -0
- package/docs/en/slide/slide-section.md +44 -0
- package/docs/en/slide/slide-source-line.md +34 -0
- package/docs/en/ui/alert-dialog.md +42 -0
- package/docs/en/ui/avatar.md +31 -0
- package/docs/en/ui/combobox.md +74 -0
- package/docs/en/ui/drawer.md +41 -0
- package/docs/en/ui/empty.md +1 -1
- package/docs/en/ui/error-state.md +4 -3
- package/docs/en/ui/field.md +42 -0
- package/docs/en/ui/hover-card.md +21 -0
- package/docs/en/ui/kbd.md +17 -0
- package/docs/en/ui/loading.md +1 -1
- package/docs/en/ui/pagination.md +36 -0
- package/docs/en/ui/radio-group.md +21 -0
- package/docs/en/ui/toast.md +44 -0
- package/docs/en/ui/toggle-group.md +4 -3
- package/docs/en/ui-and-theming.md +1 -1
- package/docs/index.json +1184 -114
- package/docs/ja/agent-skills.md +1 -1
- package/docs/ja/changelog.md +84 -0
- package/docs/ja/cli-reference.md +29 -0
- package/docs/ja/components.md +68 -101
- package/docs/ja/doc/delta-text.md +40 -0
- package/docs/ja/doc/doc-action-items.md +49 -0
- package/docs/ja/doc/doc-callout.md +38 -0
- package/docs/ja/doc/doc-data-table.md +60 -0
- package/docs/ja/doc/doc-executive-summary.md +64 -0
- package/docs/ja/doc/doc-figure.md +56 -0
- package/docs/ja/doc/doc-key-findings.md +61 -0
- package/docs/ja/doc/doc-kpi-scorecard.md +80 -0
- package/docs/ja/doc/doc-notes-and-sources.md +43 -0
- package/docs/ja/doc/doc-report-header.md +46 -0
- package/docs/ja/page-types/csv.md +83 -0
- package/docs/ja/page-types/doc.md +83 -0
- package/docs/ja/page-types/excel.md +82 -0
- package/docs/ja/page-types/slide.md +133 -0
- package/docs/ja/page-types.md +47 -0
- package/docs/ja/pages-and-metadata.md +15 -0
- package/docs/ja/parts/area-chart.md +85 -0
- package/docs/ja/parts/bar-chart.md +95 -0
- package/docs/ja/parts/bar-list.md +58 -0
- package/docs/ja/parts/category-bar.md +36 -0
- package/docs/ja/parts/chart-frame.md +36 -0
- package/docs/ja/parts/data-table.md +22 -0
- package/docs/ja/parts/delta.md +51 -0
- package/docs/ja/parts/donut-chart.md +66 -0
- package/docs/ja/parts/echart.md +3 -0
- package/docs/ja/parts/format.md +44 -0
- package/docs/ja/parts/funnel-steps.md +27 -8
- package/docs/ja/parts/heatmap.md +45 -0
- package/docs/ja/parts/kpi-card.md +56 -0
- package/docs/ja/parts/legend.md +36 -0
- package/docs/ja/parts/line-chart.md +84 -0
- package/docs/ja/parts/metric-value.md +3 -2
- package/docs/ja/parts/page-shell.md +1 -1
- package/docs/ja/parts/progress-circle.md +34 -0
- package/docs/ja/parts/sample-data.md +61 -0
- package/docs/ja/parts/scatter-chart.md +69 -0
- package/docs/ja/parts/sparkline.md +2 -2
- package/docs/ja/parts/tracker.md +32 -0
- package/docs/ja/parts/trend-indicator.md +17 -1
- package/docs/ja/parts/updated-at.md +27 -0
- package/docs/ja/parts/waterfall-chart.md +61 -0
- package/docs/ja/routing.md +8 -86
- package/docs/ja/slide/slide-chart-full.md +48 -0
- package/docs/ja/slide/slide-chart-insight.md +52 -0
- package/docs/ja/slide/slide-columns.md +46 -0
- package/docs/ja/slide/slide-comparison.md +68 -0
- package/docs/ja/slide/slide-cover.md +39 -0
- package/docs/ja/slide/slide-exec-summary.md +47 -0
- package/docs/ja/slide/slide-heading.md +38 -0
- package/docs/ja/slide/slide-kpi-grid.md +55 -0
- package/docs/ja/slide/slide-kpi-hero.md +58 -0
- package/docs/ja/slide/slide-next-actions.md +49 -0
- package/docs/ja/slide/slide-scorecard-table.md +54 -0
- package/docs/ja/slide/slide-section.md +44 -0
- package/docs/ja/slide/slide-source-line.md +34 -0
- package/docs/ja/ui/alert-dialog.md +41 -0
- package/docs/ja/ui/avatar.md +31 -0
- package/docs/ja/ui/combobox.md +74 -0
- package/docs/ja/ui/drawer.md +41 -0
- package/docs/ja/ui/empty.md +1 -1
- package/docs/ja/ui/error-state.md +4 -3
- package/docs/ja/ui/field.md +42 -0
- package/docs/ja/ui/hover-card.md +21 -0
- package/docs/ja/ui/kbd.md +16 -0
- package/docs/ja/ui/loading.md +1 -1
- package/docs/ja/ui/pagination.md +36 -0
- package/docs/ja/ui/radio-group.md +21 -0
- package/docs/ja/ui/toast.md +46 -0
- package/docs/ja/ui/toggle-group.md +4 -3
- package/docs/ja/ui-and-theming.md +14 -7
- package/package.json +43 -29
- package/registry/ui/accordion.tsx +76 -0
- package/registry/ui/alert-dialog.tsx +189 -0
- package/registry/ui/alert.tsx +80 -0
- package/registry/ui/app-shell.tsx +424 -0
- package/registry/ui/area-chart.tsx +3960 -0
- package/registry/ui/attention-list.tsx +465 -0
- package/registry/ui/avatar.tsx +110 -0
- package/registry/ui/badge.tsx +56 -0
- package/registry/ui/bar-chart.tsx +3954 -0
- package/registry/ui/bar-list.tsx +3998 -0
- package/registry/ui/box-plot-chart.tsx +4214 -0
- package/registry/ui/breadcrumb.tsx +128 -0
- package/registry/ui/button.tsx +62 -0
- package/registry/ui/calendar.tsx +223 -0
- package/registry/ui/card.tsx +107 -0
- package/registry/ui/category-bar.tsx +1498 -0
- package/registry/ui/chart-frame.tsx +1604 -0
- package/registry/ui/checkbox.tsx +30 -0
- package/registry/ui/collapsible.tsx +23 -0
- package/registry/ui/combo-chart.tsx +1851 -0
- package/registry/ui/combobox.tsx +310 -0
- package/registry/ui/command.tsx +198 -0
- package/registry/ui/dashboard-card.tsx +217 -0
- package/registry/ui/data-table.tsx +896 -157
- package/registry/ui/date-range-picker.tsx +544 -0
- package/registry/ui/delta.tsx +350 -0
- package/registry/ui/dialog.tsx +161 -0
- package/registry/ui/donut-chart.tsx +4006 -0
- package/registry/ui/drawer.tsx +229 -0
- package/registry/ui/dropdown-menu.tsx +274 -0
- package/registry/ui/echart.tsx +1178 -0
- package/registry/ui/field.tsx +240 -0
- package/registry/ui/filter-bar.tsx +551 -0
- package/registry/ui/funnel-steps.tsx +3843 -0
- package/registry/ui/heatmap.tsx +2027 -0
- package/registry/ui/histogram-chart.tsx +4284 -0
- package/registry/ui/hover-card.tsx +52 -0
- package/registry/ui/input-group.tsx +160 -0
- package/registry/ui/input.tsx +24 -0
- package/registry/ui/kbd.tsx +30 -0
- package/registry/ui/kpi-card.tsx +905 -0
- package/registry/ui/label.tsx +22 -0
- package/registry/ui/legend.tsx +3817 -0
- package/registry/ui/line-chart.tsx +3958 -0
- package/registry/ui/metric-value.tsx +62 -0
- package/registry/ui/multi-select.tsx +382 -0
- package/registry/ui/page-shell.tsx +420 -0
- package/registry/ui/pagination.tsx +140 -0
- package/registry/ui/paired-chart.tsx +4086 -0
- package/registry/ui/pivot-table.tsx +1259 -0
- package/registry/ui/placeholder.tsx +36 -0
- package/registry/ui/popover.tsx +92 -0
- package/registry/ui/progress-circle.tsx +1033 -0
- package/registry/ui/progress.tsx +85 -0
- package/registry/ui/radio-group.tsx +39 -0
- package/registry/ui/sample-data.tsx +230 -0
- package/registry/ui/scatter-chart.tsx +4503 -0
- package/registry/ui/scroll-area.tsx +56 -0
- package/registry/ui/searchable-select.tsx +352 -0
- package/registry/ui/section-header.tsx +43 -0
- package/registry/ui/segmented-control.tsx +76 -0
- package/registry/ui/select.tsx +255 -0
- package/registry/ui/separator.tsx +27 -0
- package/registry/ui/sheet.tsx +139 -0
- package/registry/ui/sidebar.tsx +725 -0
- package/registry/ui/skeleton.tsx +17 -0
- package/registry/ui/slider.tsx +56 -0
- package/registry/ui/sparkline.tsx +230 -0
- package/registry/ui/spinner.tsx +14 -0
- package/registry/ui/states.tsx +247 -0
- package/registry/ui/status-badge.tsx +286 -0
- package/registry/ui/switch.tsx +34 -0
- package/registry/ui/table.tsx +118 -0
- package/registry/ui/tabs.tsx +84 -0
- package/registry/ui/textarea.tsx +22 -0
- package/registry/ui/toast.tsx +250 -0
- package/registry/ui/toggle-group.tsx +91 -0
- package/registry/ui/toggle.tsx +47 -0
- package/registry/ui/tooltip.tsx +72 -0
- package/registry/ui/tracker.tsx +1015 -0
- package/registry/ui/treemap.tsx +1916 -0
- package/registry/ui/trend-indicator.tsx +217 -0
- package/registry/ui/updated-at.tsx +276 -0
- package/registry/ui/waterfall-chart.tsx +4561 -0
- package/skills/vantage-add-feature/SKILL.md +14 -7
- package/skills/vantage-design/SKILL.md +62 -52
- package/skills/vantage-design/references/extract.md +26 -27
- package/skills/vantage-design/references/format.md +12 -172
- package/skills/vantage-design/references/presets.md +50 -110
- package/skills/vantage-pitfalls/SKILL.md +10 -1
- package/skills/vantage-slide/SKILL.md +71 -36
- package/templates/AGENTS.md +54 -16
- package/templates/agents/api.md +36 -0
- package/templates/agents/csv.md +2 -1
- package/templates/agents/doc.md +52 -3
- package/templates/agents/page.md +91 -10
- package/templates/agents/slide.md +90 -4
- package/templates/agents/xlsx.md +2 -1
- package/theme.css +247 -132
- package/dist/add-EISGSZAH.js +0 -6
- package/dist/add-EISGSZAH.js.map +0 -1
- package/dist/chunk-3G43C6OL.js.map +0 -1
- package/dist/chunk-5ZOP4SQR.js +0 -47
- package/dist/chunk-5ZOP4SQR.js.map +0 -1
- package/dist/chunk-A2UUGASH.js.map +0 -1
- package/dist/chunk-BCE22JSM.js.map +0 -1
- package/dist/chunk-DTDVSFRY.js +0 -29
- package/dist/chunk-DTDVSFRY.js.map +0 -1
- package/dist/chunk-EP6JHXSR.js.map +0 -1
- package/dist/chunk-JGRMRXXZ.js.map +0 -1
- package/dist/chunk-KLEIVDUV.js +0 -165
- package/dist/chunk-KLEIVDUV.js.map +0 -1
- package/dist/chunk-LSRMRIXA.js +0 -2227
- package/dist/chunk-LSRMRIXA.js.map +0 -1
- package/dist/chunk-PVTHHV7X.js.map +0 -1
- package/dist/chunk-PXRX5PEC.js.map +0 -1
- package/dist/chunk-RPZAALCX.js.map +0 -1
- package/dist/chunk-T3FLAGI6.js +0 -316
- package/dist/chunk-T3FLAGI6.js.map +0 -1
- package/dist/dev-NZRLOQCL.js.map +0 -1
- package/dist/doctor-VFKEMR54.js.map +0 -1
- package/dist/preview-QDCIVVSR.js.map +0 -1
|
@@ -0,0 +1,420 @@
|
|
|
1
|
+
// Copied by `vantage add ui page-shell`. This file is yours to edit.
|
|
2
|
+
// Generated from @squadbase/squadkit registry/components/page-shell.tsx by `pnpm run registry` (in Vantage, edit packages/squadkit, not registry/).
|
|
3
|
+
"use client"
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* PageShell — the standard page frame: a bordered header band (title,
|
|
7
|
+
* description, meta, actions), an optional summary card row, and the content
|
|
8
|
+
* area. Composed from parts so a page can use only what it needs.
|
|
9
|
+
*/
|
|
10
|
+
import { forwardRef, type HTMLAttributes, type ReactNode } from "react"
|
|
11
|
+
import { cva, type VariantProps } from "class-variance-authority"
|
|
12
|
+
|
|
13
|
+
import { formatDateRange, EMPTY_VALUE } from "@squadbase/vantage/components"
|
|
14
|
+
import { cn } from "@squadbase/vantage/ui"
|
|
15
|
+
import { Badge } from "@squadbase/vantage/ui"
|
|
16
|
+
import { UpdatedAt, type UpdatedAtProps } from "@squadbase/vantage/components"
|
|
17
|
+
import { useSyncExternalStore } from "react"
|
|
18
|
+
|
|
19
|
+
/* ---------- inlined from @squadbase/squadkit registry/lib/locale.ts (internal to @squadbase/vantage) ---------- */
|
|
20
|
+
|
|
21
|
+
/**
|
|
22
|
+
* The display language of the parts and the defaults that follow it.
|
|
23
|
+
*
|
|
24
|
+
* The language comes from `<html lang>`: a tag starting with `ja` reads Japanese, anything else English.
|
|
25
|
+
* Without a usable `lang` (missing, invalid, or no `document` — SSR, Node) the locale is `FALLBACK_LOCALE`
|
|
26
|
+
* (`en-US`). A `locale` passed explicitly (a prop, an argument) always wins.
|
|
27
|
+
*
|
|
28
|
+
* Parts read the locale through `useLocale` (`hooks/use-locale`) and pass it down; the pure helpers here
|
|
29
|
+
* and in `format` / `comparison` / `chart-*` take it as an argument and fall back to `documentLocale()`.
|
|
30
|
+
*/
|
|
31
|
+
|
|
32
|
+
/** The language of the built-in wording: Japanese or English. */
|
|
33
|
+
type UiLanguage = "ja" | "en"
|
|
34
|
+
|
|
35
|
+
/** The locale used when `<html lang>` gives none (and on the server). */
|
|
36
|
+
const FALLBACK_LOCALE = "en-US"
|
|
37
|
+
|
|
38
|
+
/** `"ja"` when `locale` starts with `ja` (`ja`, `ja-JP`), else `"en"`. A missing locale is `"en"`. */
|
|
39
|
+
function uiLanguage(locale: string | null | undefined): UiLanguage {
|
|
40
|
+
return typeof locale === "string" && locale.trim().toLowerCase().startsWith("ja") ? "ja" : "en"
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
/** A BCP 47 tag in its canonical form (`en-gb` → `en-GB`), or `FALLBACK_LOCALE` when it is empty or invalid. */
|
|
44
|
+
function normalizeLocale(tag: string | null | undefined): string {
|
|
45
|
+
const value = tag?.trim()
|
|
46
|
+
if (!value) return FALLBACK_LOCALE
|
|
47
|
+
try {
|
|
48
|
+
return Intl.getCanonicalLocales(value)[0] ?? FALLBACK_LOCALE
|
|
49
|
+
} catch {
|
|
50
|
+
return FALLBACK_LOCALE
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
/**
|
|
55
|
+
* The locale of the page: `document.documentElement.lang`, canonicalized. `FALLBACK_LOCALE` when it is empty or
|
|
56
|
+
* invalid, or there is no `document`. Parts read it through `useLocale`, never while rendering.
|
|
57
|
+
*/
|
|
58
|
+
function documentLocale(): string {
|
|
59
|
+
if (typeof document === "undefined") return FALLBACK_LOCALE
|
|
60
|
+
return normalizeLocale(document.documentElement?.getAttribute("lang"))
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
/** `locale` when given, else the page's locale (`documentLocale()`). */
|
|
64
|
+
function resolveLocale(locale?: string | null): string {
|
|
65
|
+
return locale || documentLocale()
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
/** Picks the wording table of the locale's language. */
|
|
69
|
+
function pickLocale<T>(table: { ja: T; en: T }, locale?: string | null): T {
|
|
70
|
+
return table[uiLanguage(resolveLocale(locale))]
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
/** The currency `format="currency"` uses without a `currency`: JPY for Japanese, USD otherwise. */
|
|
74
|
+
function defaultCurrency(locale?: string | null): string {
|
|
75
|
+
return uiLanguage(resolveLocale(locale)) === "ja" ? "JPY" : "USD"
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
/** The month a fiscal year starts in (1–12) when none is given: April for Japanese, January otherwise. */
|
|
79
|
+
function defaultFiscalYearStartMonth(locale?: string | null): number {
|
|
80
|
+
return uiLanguage(resolveLocale(locale)) === "ja" ? 4 : 1
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
/** A day of the week, 0 = Sunday … 6 = Saturday (the `Date#getDay` / date-fns numbering). */
|
|
84
|
+
type WeekDay = 0 | 1 | 2 | 3 | 4 | 5 | 6
|
|
85
|
+
|
|
86
|
+
/** Locales whose week starts on Sunday when the runtime has no week data. */
|
|
87
|
+
const SUNDAY_FIRST = new Set(["en", "en-US", "en-CA"])
|
|
88
|
+
|
|
89
|
+
/**
|
|
90
|
+
* The first day of the week: Monday for Japanese; otherwise the locale's convention from `Intl.Locale`
|
|
91
|
+
* (`en-US` Sunday, `en-GB` Monday). Without week data in the runtime: Sunday for `en` / `en-US` / `en-CA`,
|
|
92
|
+
* Monday for the rest.
|
|
93
|
+
*/
|
|
94
|
+
function weekStartsOn(locale?: string | null): WeekDay {
|
|
95
|
+
const tag = normalizeLocale(resolveLocale(locale))
|
|
96
|
+
if (uiLanguage(tag) === "ja") return 1
|
|
97
|
+
try {
|
|
98
|
+
const info = new Intl.Locale(tag) as Intl.Locale & {
|
|
99
|
+
getWeekInfo?: () => { firstDay: number }
|
|
100
|
+
weekInfo?: { firstDay: number }
|
|
101
|
+
}
|
|
102
|
+
const firstDay = info.getWeekInfo?.().firstDay ?? info.weekInfo?.firstDay
|
|
103
|
+
if (typeof firstDay === "number" && firstDay >= 1 && firstDay <= 7) return (firstDay % 7) as WeekDay
|
|
104
|
+
} catch {
|
|
105
|
+
// Fall through to the table below.
|
|
106
|
+
}
|
|
107
|
+
return SUNDAY_FIRST.has(tag) ? 0 : 1
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
/* ---------- inlined from @squadbase/squadkit registry/hooks/use-locale.ts (internal to @squadbase/vantage) ---------- */
|
|
111
|
+
|
|
112
|
+
const listeners = new Set<() => void>()
|
|
113
|
+
let observer: MutationObserver | null = null
|
|
114
|
+
|
|
115
|
+
/** One observer on `<html lang>` for every subscribed part. */
|
|
116
|
+
function subscribe(onChange: () => void): () => void {
|
|
117
|
+
if (typeof document === "undefined" || typeof MutationObserver === "undefined") return () => {}
|
|
118
|
+
listeners.add(onChange)
|
|
119
|
+
if (!observer) {
|
|
120
|
+
observer = new MutationObserver(() => {
|
|
121
|
+
for (const listener of [...listeners]) listener()
|
|
122
|
+
})
|
|
123
|
+
observer.observe(document.documentElement, { attributes: true, attributeFilter: ["lang"] })
|
|
124
|
+
}
|
|
125
|
+
return () => {
|
|
126
|
+
listeners.delete(onChange)
|
|
127
|
+
if (listeners.size === 0 && observer) {
|
|
128
|
+
observer.disconnect()
|
|
129
|
+
observer = null
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
const serverLocale = () => FALLBACK_LOCALE
|
|
135
|
+
|
|
136
|
+
/**
|
|
137
|
+
* The page's locale (`<html lang>`), following changes made while the page runs. On the server and during
|
|
138
|
+
* hydration it is `FALLBACK_LOCALE` (`en-US`), so the markup matches; it switches right after.
|
|
139
|
+
*/
|
|
140
|
+
function useDocumentLocale(): string {
|
|
141
|
+
return useSyncExternalStore(subscribe, documentLocale, serverLocale)
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
/** The locale a part renders in: its `locale` prop when given, else the page's (`useDocumentLocale`). */
|
|
145
|
+
function useLocale(locale?: string | null): string {
|
|
146
|
+
const page = useDocumentLocale()
|
|
147
|
+
return locale || page
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
/* ---------- end of inlined code ---------- */
|
|
151
|
+
|
|
152
|
+
export interface PageShellProps extends HTMLAttributes<HTMLDivElement> {}
|
|
153
|
+
|
|
154
|
+
export const PageShell = forwardRef<HTMLDivElement, PageShellProps>(
|
|
155
|
+
({ className, ...props }, ref) => (
|
|
156
|
+
<div ref={ref} data-slot="page-shell" className={cn("flex flex-col", className)} {...props} />
|
|
157
|
+
),
|
|
158
|
+
)
|
|
159
|
+
PageShell.displayName = "PageShell"
|
|
160
|
+
|
|
161
|
+
const SOURCE_PREFIX = { ja: "出典:", en: "Source: " }
|
|
162
|
+
|
|
163
|
+
export interface PageShellHeaderProps extends HTMLAttributes<HTMLDivElement> {
|
|
164
|
+
/** When the data was last updated. Drawn by `UpdatedAt` at the right end of the title row. */
|
|
165
|
+
updatedAt?: UpdatedAtProps["at"]
|
|
166
|
+
/** `"relative"` (default) or `"absolute-first"` ("16:41 更新(23 分前)") for pages where "now" matters. */
|
|
167
|
+
updatedAtVariant?: UpdatedAtProps["variant"]
|
|
168
|
+
/** IANA time zone for the absolute time of `updatedAt`. Defaults to the runtime's zone. */
|
|
169
|
+
timeZone?: string
|
|
170
|
+
/** Where the data comes from. Shown as a chip "Source: ○○" (ja: "出典:○○") on the second row. */
|
|
171
|
+
source?: string
|
|
172
|
+
/** The period the data covers. Shown as a chip "2026/9/23〜10/20" on the second row. */
|
|
173
|
+
period?: { start: Date | string | number; end: Date | string | number }
|
|
174
|
+
/** The page's overall state (an alert, a status badge). Shown on the third row; no row when absent. */
|
|
175
|
+
status?: ReactNode
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
/**
|
|
179
|
+
* A wrapping flex row, not a two-column grid: when the heading cannot keep its
|
|
180
|
+
* 20rem basis next to `PageShellHeaderEnd`, the end block drops below it. A
|
|
181
|
+
* `1fr auto` grid would instead hand the heading whatever the end block leaves,
|
|
182
|
+
* and a CJK title — breakable between any two characters — collapses into a
|
|
183
|
+
* one-character column.
|
|
184
|
+
*
|
|
185
|
+
* The meta props (`updatedAt`, `source`, `period`, `status`) fix the order every
|
|
186
|
+
* page head shares: title and update time (right end) → source / period chips →
|
|
187
|
+
* overall status → summary cards. Empty rows are not drawn. Rows are placed with
|
|
188
|
+
* flex `order`, so they land before `PageShellSummary` whatever the child order.
|
|
189
|
+
*/
|
|
190
|
+
export const PageShellHeader = forwardRef<HTMLDivElement, PageShellHeaderProps>(
|
|
191
|
+
({ className, updatedAt, updatedAtVariant, timeZone, source, period, status, children, ...props }, ref) => {
|
|
192
|
+
const locale = useLocale()
|
|
193
|
+
const periodText = period ? formatDateRange(period.start, period.end, { timeZone, locale }) : undefined
|
|
194
|
+
const hasChips = Boolean(source) || (periodText !== undefined && periodText !== EMPTY_VALUE)
|
|
195
|
+
const hasStatus = status !== undefined && status !== null && status !== false && status !== ""
|
|
196
|
+
return (
|
|
197
|
+
<div
|
|
198
|
+
ref={ref}
|
|
199
|
+
data-slot="page-shell-header"
|
|
200
|
+
className={cn("flex flex-wrap items-start gap-x-4 gap-y-4 px-6 pt-8", className)}
|
|
201
|
+
{...props}
|
|
202
|
+
>
|
|
203
|
+
{children}
|
|
204
|
+
{updatedAt !== undefined && updatedAt !== null ? (
|
|
205
|
+
<div data-slot="page-shell-updated-at" className="ml-auto max-w-full shrink-0 text-right">
|
|
206
|
+
<UpdatedAt at={updatedAt} variant={updatedAtVariant} timeZone={timeZone} />
|
|
207
|
+
</div>
|
|
208
|
+
) : null}
|
|
209
|
+
{hasChips ? (
|
|
210
|
+
<div data-slot="page-shell-chips" className="order-1 flex basis-full flex-wrap gap-1.5">
|
|
211
|
+
{source ? (
|
|
212
|
+
<Badge variant="outline" className="h-auto max-w-full whitespace-normal text-muted-foreground">
|
|
213
|
+
{SOURCE_PREFIX[uiLanguage(locale)]}
|
|
214
|
+
{source}
|
|
215
|
+
</Badge>
|
|
216
|
+
) : null}
|
|
217
|
+
{periodText && periodText !== EMPTY_VALUE ? (
|
|
218
|
+
<Badge variant="outline" className="tabular-nums text-muted-foreground">
|
|
219
|
+
{periodText}
|
|
220
|
+
</Badge>
|
|
221
|
+
) : null}
|
|
222
|
+
</div>
|
|
223
|
+
) : null}
|
|
224
|
+
{hasStatus ? (
|
|
225
|
+
<div data-slot="page-shell-status" className="order-2 min-w-0 basis-full">
|
|
226
|
+
{status}
|
|
227
|
+
</div>
|
|
228
|
+
) : null}
|
|
229
|
+
</div>
|
|
230
|
+
)
|
|
231
|
+
},
|
|
232
|
+
)
|
|
233
|
+
PageShellHeader.displayName = "PageShellHeader"
|
|
234
|
+
|
|
235
|
+
export interface PageShellHeadingProps extends HTMLAttributes<HTMLDivElement> {}
|
|
236
|
+
|
|
237
|
+
export const PageShellHeading = forwardRef<HTMLDivElement, PageShellHeadingProps>(
|
|
238
|
+
({ className, ...props }, ref) => (
|
|
239
|
+
<div
|
|
240
|
+
ref={ref}
|
|
241
|
+
data-slot="page-shell-heading"
|
|
242
|
+
className={cn("min-w-0 grow basis-80", className)}
|
|
243
|
+
{...props}
|
|
244
|
+
/>
|
|
245
|
+
),
|
|
246
|
+
)
|
|
247
|
+
PageShellHeading.displayName = "PageShellHeading"
|
|
248
|
+
|
|
249
|
+
export interface PageShellTitleProps extends HTMLAttributes<HTMLHeadingElement> {}
|
|
250
|
+
|
|
251
|
+
export const PageShellTitle = forwardRef<HTMLHeadingElement, PageShellTitleProps>(
|
|
252
|
+
({ className, ...props }, ref) => (
|
|
253
|
+
<h1
|
|
254
|
+
ref={ref}
|
|
255
|
+
data-slot="page-shell-title"
|
|
256
|
+
className={cn("text-2xl font-semibold tracking-tight text-foreground", className)}
|
|
257
|
+
{...props}
|
|
258
|
+
/>
|
|
259
|
+
),
|
|
260
|
+
)
|
|
261
|
+
PageShellTitle.displayName = "PageShellTitle"
|
|
262
|
+
|
|
263
|
+
export interface PageShellDescriptionProps extends HTMLAttributes<HTMLParagraphElement> {}
|
|
264
|
+
|
|
265
|
+
export const PageShellDescription = forwardRef<HTMLParagraphElement, PageShellDescriptionProps>(
|
|
266
|
+
({ className, ...props }, ref) => (
|
|
267
|
+
<p
|
|
268
|
+
ref={ref}
|
|
269
|
+
data-slot="page-shell-description"
|
|
270
|
+
className={cn("mt-1 text-sm text-muted-foreground", className)}
|
|
271
|
+
{...props}
|
|
272
|
+
/>
|
|
273
|
+
),
|
|
274
|
+
)
|
|
275
|
+
PageShellDescription.displayName = "PageShellDescription"
|
|
276
|
+
|
|
277
|
+
export interface PageShellHeaderEndProps extends HTMLAttributes<HTMLDivElement> {}
|
|
278
|
+
|
|
279
|
+
export const PageShellHeaderEnd = forwardRef<HTMLDivElement, PageShellHeaderEndProps>(
|
|
280
|
+
({ className, ...props }, ref) => (
|
|
281
|
+
<div
|
|
282
|
+
ref={ref}
|
|
283
|
+
data-slot="page-shell-header-end"
|
|
284
|
+
className={cn("flex max-w-full shrink-0 flex-col flex-wrap items-end gap-2", className)}
|
|
285
|
+
{...props}
|
|
286
|
+
/>
|
|
287
|
+
),
|
|
288
|
+
)
|
|
289
|
+
PageShellHeaderEnd.displayName = "PageShellHeaderEnd"
|
|
290
|
+
|
|
291
|
+
export interface PageShellMetaProps extends HTMLAttributes<HTMLDivElement> {}
|
|
292
|
+
|
|
293
|
+
export const PageShellMeta = forwardRef<HTMLDivElement, PageShellMetaProps>(
|
|
294
|
+
({ className, ...props }, ref) => (
|
|
295
|
+
<div
|
|
296
|
+
ref={ref}
|
|
297
|
+
data-slot="page-shell-meta"
|
|
298
|
+
className={cn("text-sm text-muted-foreground", className)}
|
|
299
|
+
{...props}
|
|
300
|
+
/>
|
|
301
|
+
),
|
|
302
|
+
)
|
|
303
|
+
PageShellMeta.displayName = "PageShellMeta"
|
|
304
|
+
|
|
305
|
+
export interface PageShellActionsProps extends HTMLAttributes<HTMLDivElement> {}
|
|
306
|
+
|
|
307
|
+
export const PageShellActions = forwardRef<HTMLDivElement, PageShellActionsProps>(
|
|
308
|
+
({ className, ...props }, ref) => (
|
|
309
|
+
<div
|
|
310
|
+
ref={ref}
|
|
311
|
+
data-slot="page-shell-actions"
|
|
312
|
+
className={cn("flex items-center gap-2", className)}
|
|
313
|
+
{...props}
|
|
314
|
+
/>
|
|
315
|
+
),
|
|
316
|
+
)
|
|
317
|
+
PageShellActions.displayName = "PageShellActions"
|
|
318
|
+
|
|
319
|
+
export interface PageShellSummaryProps extends HTMLAttributes<HTMLDivElement> {}
|
|
320
|
+
|
|
321
|
+
export const PageShellSummary = forwardRef<HTMLDivElement, PageShellSummaryProps>(
|
|
322
|
+
({ className, ...props }, ref) => (
|
|
323
|
+
<div
|
|
324
|
+
ref={ref}
|
|
325
|
+
data-slot="page-shell-summary"
|
|
326
|
+
className={cn(
|
|
327
|
+
"order-3 grid basis-full grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4",
|
|
328
|
+
className,
|
|
329
|
+
)}
|
|
330
|
+
{...props}
|
|
331
|
+
/>
|
|
332
|
+
),
|
|
333
|
+
)
|
|
334
|
+
PageShellSummary.displayName = "PageShellSummary"
|
|
335
|
+
|
|
336
|
+
/**
|
|
337
|
+
* Accent tints come from theme tokens, never Tailwind palette colours: the
|
|
338
|
+
* semantic tones (`--positive` / `--negative` / `--warning` / `--info` /
|
|
339
|
+
* `--neutral` and their `*-subtle`) and, for hues with no status meaning,
|
|
340
|
+
* `--chart-4` / `--chart-5`. The colour-named accents are kept for compatibility
|
|
341
|
+
* and map to the nearest tone. Each set is a literal string — Tailwind only
|
|
342
|
+
* emits classes it can see literally in the source.
|
|
343
|
+
*/
|
|
344
|
+
const summaryCardTones = {
|
|
345
|
+
positive: "border-positive/20 dark:border-positive/25 bg-positive-subtle [&>svg]:text-positive",
|
|
346
|
+
negative: "border-negative/20 dark:border-negative/25 bg-negative-subtle [&>svg]:text-negative",
|
|
347
|
+
warning: "border-warning/20 dark:border-warning/25 bg-warning-subtle [&>svg]:text-warning",
|
|
348
|
+
info: "border-info/20 dark:border-info/25 bg-info-subtle [&>svg]:text-info",
|
|
349
|
+
neutral: "border-neutral/20 dark:border-neutral/25 bg-neutral-subtle [&>svg]:text-neutral",
|
|
350
|
+
violet: "border-chart-4/30 bg-chart-4/5 [&>svg]:text-chart-4",
|
|
351
|
+
pink: "border-chart-5/30 bg-chart-5/5 [&>svg]:text-chart-5",
|
|
352
|
+
} as const
|
|
353
|
+
|
|
354
|
+
export const pageShellSummaryCardVariants = cva(
|
|
355
|
+
"relative flex items-start gap-3 rounded-lg border bg-background px-4 py-3 text-sm [&>svg]:mt-0.5 [&>svg]:size-4 [&>svg]:shrink-0",
|
|
356
|
+
{
|
|
357
|
+
variants: {
|
|
358
|
+
accent: {
|
|
359
|
+
default: "text-card-foreground",
|
|
360
|
+
accent:
|
|
361
|
+
"border-[var(--chart-1)]/30 bg-linear-to-r from-[var(--chart-1)]/5 to-[var(--chart-1)]/5 [&>svg]:text-[var(--chart-1)]",
|
|
362
|
+
amber: summaryCardTones.warning,
|
|
363
|
+
blue: summaryCardTones.info,
|
|
364
|
+
emerald: summaryCardTones.positive,
|
|
365
|
+
red: summaryCardTones.negative,
|
|
366
|
+
violet: summaryCardTones.violet,
|
|
367
|
+
orange: summaryCardTones.warning,
|
|
368
|
+
cyan: summaryCardTones.info,
|
|
369
|
+
slate: summaryCardTones.neutral,
|
|
370
|
+
green: summaryCardTones.positive,
|
|
371
|
+
teal: summaryCardTones.positive,
|
|
372
|
+
sky: summaryCardTones.info,
|
|
373
|
+
indigo: summaryCardTones.info,
|
|
374
|
+
purple: summaryCardTones.violet,
|
|
375
|
+
pink: summaryCardTones.pink,
|
|
376
|
+
rose: summaryCardTones.negative,
|
|
377
|
+
yellow: summaryCardTones.warning,
|
|
378
|
+
lime: summaryCardTones.positive,
|
|
379
|
+
gray: summaryCardTones.neutral,
|
|
380
|
+
zinc: summaryCardTones.neutral,
|
|
381
|
+
neutral: summaryCardTones.neutral,
|
|
382
|
+
stone: summaryCardTones.neutral,
|
|
383
|
+
fuchsia: summaryCardTones.violet,
|
|
384
|
+
},
|
|
385
|
+
},
|
|
386
|
+
defaultVariants: {
|
|
387
|
+
accent: "default",
|
|
388
|
+
},
|
|
389
|
+
},
|
|
390
|
+
)
|
|
391
|
+
|
|
392
|
+
export interface PageShellSummaryCardProps
|
|
393
|
+
extends HTMLAttributes<HTMLDivElement>,
|
|
394
|
+
VariantProps<typeof pageShellSummaryCardVariants> {}
|
|
395
|
+
|
|
396
|
+
export const PageShellSummaryCard = forwardRef<HTMLDivElement, PageShellSummaryCardProps>(
|
|
397
|
+
({ className, accent, ...props }, ref) => (
|
|
398
|
+
<div
|
|
399
|
+
ref={ref}
|
|
400
|
+
data-slot="page-shell-summary-card"
|
|
401
|
+
className={cn(pageShellSummaryCardVariants({ accent }), className)}
|
|
402
|
+
{...props}
|
|
403
|
+
/>
|
|
404
|
+
),
|
|
405
|
+
)
|
|
406
|
+
PageShellSummaryCard.displayName = "PageShellSummaryCard"
|
|
407
|
+
|
|
408
|
+
export interface PageShellContentProps extends HTMLAttributes<HTMLDivElement> {}
|
|
409
|
+
|
|
410
|
+
export const PageShellContent = forwardRef<HTMLDivElement, PageShellContentProps>(
|
|
411
|
+
({ className, ...props }, ref) => (
|
|
412
|
+
<div
|
|
413
|
+
ref={ref}
|
|
414
|
+
data-slot="page-shell-content"
|
|
415
|
+
className={cn("flex min-w-0 flex-1 flex-col gap-6 p-6", className)}
|
|
416
|
+
{...props}
|
|
417
|
+
/>
|
|
418
|
+
),
|
|
419
|
+
)
|
|
420
|
+
PageShellContent.displayName = "PageShellContent"
|
|
@@ -0,0 +1,140 @@
|
|
|
1
|
+
// Copied by `vantage add ui pagination`. This file is yours to edit.
|
|
2
|
+
// Generated from @squadbase/squadkit registry/ui/pagination.tsx by `pnpm run registry` (in Vantage, edit packages/squadkit, not registry/).
|
|
3
|
+
"use client"
|
|
4
|
+
|
|
5
|
+
import * as React from "react"
|
|
6
|
+
import { cn } from "@squadbase/vantage/ui"
|
|
7
|
+
|
|
8
|
+
import { Button } from "@squadbase/vantage/ui"
|
|
9
|
+
import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from "lucide-react"
|
|
10
|
+
|
|
11
|
+
function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
|
|
12
|
+
return (
|
|
13
|
+
<nav
|
|
14
|
+
role="navigation"
|
|
15
|
+
aria-label="pagination"
|
|
16
|
+
data-slot="pagination"
|
|
17
|
+
className={cn("mx-auto flex w-full justify-center", className)}
|
|
18
|
+
{...props}
|
|
19
|
+
/>
|
|
20
|
+
)
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
function PaginationContent({
|
|
24
|
+
className,
|
|
25
|
+
...props
|
|
26
|
+
}: React.ComponentProps<"ul">) {
|
|
27
|
+
return (
|
|
28
|
+
<ul
|
|
29
|
+
data-slot="pagination-content"
|
|
30
|
+
className={cn("flex items-center gap-0.5", className)}
|
|
31
|
+
{...props}
|
|
32
|
+
/>
|
|
33
|
+
)
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
function PaginationItem({ ...props }: React.ComponentProps<"li">) {
|
|
37
|
+
return <li data-slot="pagination-item" {...props} />
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
type PaginationLinkProps = {
|
|
41
|
+
isActive?: boolean
|
|
42
|
+
} & Pick<React.ComponentProps<typeof Button>, "size"> &
|
|
43
|
+
React.ComponentProps<"a">
|
|
44
|
+
|
|
45
|
+
function PaginationLink({
|
|
46
|
+
className,
|
|
47
|
+
isActive,
|
|
48
|
+
size = "icon",
|
|
49
|
+
...props
|
|
50
|
+
}: PaginationLinkProps) {
|
|
51
|
+
return (
|
|
52
|
+
<Button
|
|
53
|
+
variant={isActive ? "outline" : "ghost"}
|
|
54
|
+
size={size}
|
|
55
|
+
className={cn(className)}
|
|
56
|
+
nativeButton={false}
|
|
57
|
+
render={
|
|
58
|
+
<a
|
|
59
|
+
aria-current={isActive ? "page" : undefined}
|
|
60
|
+
data-slot="pagination-link"
|
|
61
|
+
data-active={isActive}
|
|
62
|
+
{...props}
|
|
63
|
+
/>
|
|
64
|
+
}
|
|
65
|
+
/>
|
|
66
|
+
)
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
function PaginationPrevious({
|
|
70
|
+
className,
|
|
71
|
+
text = "Previous",
|
|
72
|
+
...props
|
|
73
|
+
}: React.ComponentProps<typeof PaginationLink> & { text?: string }) {
|
|
74
|
+
return (
|
|
75
|
+
<PaginationLink
|
|
76
|
+
aria-label="Go to previous page"
|
|
77
|
+
size="default"
|
|
78
|
+
className={cn("pl-1.5!", className)}
|
|
79
|
+
{...props}
|
|
80
|
+
>
|
|
81
|
+
<ChevronLeftIcon
|
|
82
|
+
data-icon="inline-start"
|
|
83
|
+
className="cn-rtl-flip"
|
|
84
|
+
/>
|
|
85
|
+
<span className="hidden sm:block">{text}</span>
|
|
86
|
+
</PaginationLink>
|
|
87
|
+
)
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
function PaginationNext({
|
|
91
|
+
className,
|
|
92
|
+
text = "Next",
|
|
93
|
+
...props
|
|
94
|
+
}: React.ComponentProps<typeof PaginationLink> & { text?: string }) {
|
|
95
|
+
return (
|
|
96
|
+
<PaginationLink
|
|
97
|
+
aria-label="Go to next page"
|
|
98
|
+
size="default"
|
|
99
|
+
className={cn("pr-1.5!", className)}
|
|
100
|
+
{...props}
|
|
101
|
+
>
|
|
102
|
+
<span className="hidden sm:block">{text}</span>
|
|
103
|
+
<ChevronRightIcon
|
|
104
|
+
data-icon="inline-end"
|
|
105
|
+
className="cn-rtl-flip"
|
|
106
|
+
/>
|
|
107
|
+
</PaginationLink>
|
|
108
|
+
)
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
function PaginationEllipsis({
|
|
112
|
+
className,
|
|
113
|
+
...props
|
|
114
|
+
}: React.ComponentProps<"span">) {
|
|
115
|
+
return (
|
|
116
|
+
<span
|
|
117
|
+
aria-hidden
|
|
118
|
+
data-slot="pagination-ellipsis"
|
|
119
|
+
className={cn(
|
|
120
|
+
"flex size-8 items-center justify-center [&_svg:not([class*='size-'])]:size-4",
|
|
121
|
+
className
|
|
122
|
+
)}
|
|
123
|
+
{...props}
|
|
124
|
+
>
|
|
125
|
+
<MoreHorizontalIcon
|
|
126
|
+
/>
|
|
127
|
+
<span className="sr-only">More pages</span>
|
|
128
|
+
</span>
|
|
129
|
+
)
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
export {
|
|
133
|
+
Pagination,
|
|
134
|
+
PaginationContent,
|
|
135
|
+
PaginationEllipsis,
|
|
136
|
+
PaginationItem,
|
|
137
|
+
PaginationLink,
|
|
138
|
+
PaginationNext,
|
|
139
|
+
PaginationPrevious,
|
|
140
|
+
}
|