@krizaka/ui 3.29.0 → 3.31.0
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 +4 -8
- package/dist/action-bar.js +3 -3
- package/dist/action-bar.js.map +1 -1
- package/dist/argument-card.d.ts +1 -1
- package/dist/argument-card.js +2 -2
- package/dist/argument-card.js.map +1 -1
- package/dist/blocks.css +19 -60
- package/dist/{button-BmCrLCq7.d.ts → button-Cm9pFH3P.d.ts} +10 -9
- package/dist/button.d.ts +11 -10
- package/dist/button.js +1 -1
- package/dist/captcha.js +1 -1
- package/dist/card-grid.d.ts +5 -12
- package/dist/card-grid.js +4 -12
- package/dist/card-grid.js.map +1 -1
- package/dist/card.d.ts +7 -7
- package/dist/card.js +2 -2
- package/dist/card.js.map +1 -1
- package/dist/{chunk-OUWPBSSL.js → chunk-2AJ4NJUF.js} +8 -9
- package/dist/chunk-2AJ4NJUF.js.map +1 -0
- package/dist/{chunk-MQPC3P4T.js → chunk-2DGLWTPS.js} +3 -3
- package/dist/chunk-2DGLWTPS.js.map +1 -0
- package/dist/{chunk-DZU6RMYD.js → chunk-3DHNN5V7.js} +15 -9
- package/dist/chunk-3DHNN5V7.js.map +1 -0
- package/dist/{chunk-TFJDIOFK.js → chunk-4E5IUZHR.js} +3 -3
- package/dist/chunk-4E5IUZHR.js.map +1 -0
- package/dist/{chunk-HAQWKORZ.js → chunk-4JO5GSSD.js} +1 -37
- package/dist/chunk-4JO5GSSD.js.map +1 -0
- package/dist/{chunk-APNIVNIX.js → chunk-IBDTAMPF.js} +3 -4
- package/dist/chunk-IBDTAMPF.js.map +1 -0
- package/dist/{chunk-LYOPPBMC.js → chunk-KIBICUZK.js} +2 -2
- package/dist/{chunk-HBZPJ3EP.js → chunk-NJFCSVPT.js} +2 -2
- package/dist/{chunk-KM6VAKIE.js → chunk-RE5WJ4QP.js} +2 -2
- package/dist/chunk-RE5WJ4QP.js.map +1 -0
- package/dist/{chunk-CHOJUCVE.js → chunk-SJS6RJIT.js} +15 -9
- package/dist/chunk-SJS6RJIT.js.map +1 -0
- package/dist/{chunk-6ZYRUOTA.js → chunk-UV4HBVH7.js} +15 -9
- package/dist/chunk-UV4HBVH7.js.map +1 -0
- package/dist/command.js +2 -2
- package/dist/confirm-button.d.ts +1 -1
- package/dist/confirm-button.js +1 -1
- package/dist/continue-prompt.js +14 -8
- package/dist/continue-prompt.js.map +1 -1
- package/dist/data-table.js +2 -2
- package/dist/dialog.js +2 -2
- package/dist/engine-flow.d.ts +25 -2
- package/dist/engine-flow.js +27 -6
- package/dist/engine-flow.js.map +1 -1
- package/dist/force-update-screen.js +2 -2
- package/dist/force-update-screen.js.map +1 -1
- package/dist/genui.js +3 -3
- package/dist/glow-card.d.ts +5 -4
- package/dist/glow-card.js +2 -8
- package/dist/glow-card.js.map +1 -1
- package/dist/image-cropper.js +1 -1
- package/dist/index.js +4 -4
- package/dist/index.js.map +1 -1
- package/dist/iso.d.ts +1 -1
- package/dist/iso.js.map +1 -1
- package/dist/landscape.js +4 -4
- package/dist/landscape.js.map +1 -1
- package/dist/link-card.d.ts +3 -6
- package/dist/link-card.js +1 -1
- package/dist/maintenance-screen.js +1 -1
- package/dist/map.d.ts +50 -5
- package/dist/map.js +202 -66
- package/dist/map.js.map +1 -1
- package/dist/match-dialog.js +1 -1
- package/dist/media-gallery.js +1 -1
- package/dist/media-gallery.js.map +1 -1
- package/dist/media-grid.js +2 -2
- package/dist/motion.css +52 -122
- package/dist/motion.d.ts +2 -2
- package/dist/motion.js +1 -1
- package/dist/native/map.js +64 -64
- package/dist/native/map.js.map +1 -1
- package/dist/native.js +30 -30
- package/dist/native.js.map +1 -1
- package/dist/nav-bar.d.ts +12 -3
- package/dist/nav-bar.js +19 -12
- package/dist/nav-bar.js.map +1 -1
- package/dist/pointer-light.d.ts +6 -9
- package/dist/pointer-light.js +9 -5
- package/dist/pointer-light.js.map +1 -1
- package/dist/radio-group.js +2 -2
- package/dist/radio-group.js.map +1 -1
- package/dist/service-card.js +1 -1
- package/dist/service-card.js.map +1 -1
- package/dist/site-footer.d.ts +1 -1
- package/dist/site-footer.js +2 -2
- package/dist/{sites-CHp_vELn.d.ts → sites-B4prB793.d.ts} +2 -2
- package/dist/sites.d.ts +2 -2
- package/dist/sites.js +6 -7
- package/dist/sites.js.map +1 -1
- package/dist/slider.js +1 -1
- package/dist/slider.js.map +1 -1
- package/dist/story.css +5 -12
- package/dist/theme.d.ts +1 -1
- package/dist/theme.js +1 -1
- package/dist/update-prompt.js +2 -2
- package/dist/update-prompt.js.map +1 -1
- package/dist/vertical-video.js +1 -1
- package/dist/video-player.js +2 -2
- package/dist/video-player.js.map +1 -1
- package/package.json +5 -5
- package/registry/action-bar.json +1 -1
- package/registry/app-shell.json +4 -4
- package/registry/argument-card.json +7 -16
- package/registry/auth-layout.json +4 -4
- package/registry/button.json +20 -20
- package/registry/card-grid.json +21 -24
- package/registry/card.json +7 -7
- package/registry/component-page.json +2 -2
- package/registry/confirm-button.json +6 -6
- package/registry/contact-page.json +2 -2
- package/registry/cover-hero.json +3 -3
- package/registry/dashboard-layout.json +2 -2
- package/registry/detail-layout.json +4 -4
- package/registry/docs-hub-page.json +2 -2
- package/registry/empty-state.json +1 -1
- package/registry/engine-flow.json +74 -3
- package/registry/examples/app-shell/admin-console.js +1 -1
- package/registry/examples/app-shell/admin-console.tsx +1 -1
- package/registry/examples/app-shell/basic.js +1 -1
- package/registry/examples/app-shell/basic.tsx +1 -1
- package/registry/examples/app-shell/desktop.js +1 -1
- package/registry/examples/app-shell/desktop.tsx +1 -1
- package/registry/examples/app-shell/orochia-studio.js +1 -1
- package/registry/examples/app-shell/orochia-studio.tsx +1 -1
- package/registry/examples/argument-card/hover-quiet.js +1 -1
- package/registry/examples/argument-card/hover-quiet.tsx +1 -1
- package/registry/examples/auth-layout/onboarding.js +2 -2
- package/registry/examples/auth-layout/onboarding.tsx +2 -2
- package/registry/examples/auth-layout/sign-in.js +2 -2
- package/registry/examples/auth-layout/sign-in.tsx +2 -2
- package/registry/examples/auth-layout/verify.js +1 -1
- package/registry/examples/auth-layout/verify.tsx +1 -1
- package/registry/examples/avatar/native/presence.dark.png +0 -0
- package/registry/examples/avatar/native/presence.light.png +0 -0
- package/registry/examples/badge/native/tones.dark.png +0 -0
- package/registry/examples/badge/native/tones.light.png +0 -0
- package/registry/examples/button/native/disabled.dark.png +0 -0
- package/registry/examples/button/native/disabled.light.png +0 -0
- package/registry/examples/button/native/gradient.dark.png +0 -0
- package/registry/examples/button/native/gradient.light.png +0 -0
- package/registry/examples/button/native/icon-only.dark.png +0 -0
- package/registry/examples/button/native/icon-only.light.png +0 -0
- package/registry/examples/button/native/icon.dark.png +0 -0
- package/registry/examples/button/native/icon.light.png +0 -0
- package/registry/examples/button/native/loading.dark.png +0 -0
- package/registry/examples/button/native/loading.light.png +0 -0
- package/registry/examples/button/native/primary.dark.png +0 -0
- package/registry/examples/button/native/primary.light.png +0 -0
- package/registry/examples/button/native/sizes.dark.png +0 -0
- package/registry/examples/button/native/sizes.light.png +0 -0
- package/registry/examples/button/signature.js +2 -2
- package/registry/examples/button/signature.tsx +4 -4
- package/registry/examples/card/interactive-link.tsx +1 -1
- package/registry/examples/card/native/body.dark.png +0 -0
- package/registry/examples/card/native/body.light.png +0 -0
- package/registry/examples/card/native/default.dark.png +0 -0
- package/registry/examples/card/native/default.light.png +0 -0
- package/registry/examples/card/native/elevated.dark.png +0 -0
- package/registry/examples/card/native/elevated.light.png +0 -0
- package/registry/examples/card-grid/hover-quiet.js +1 -1
- package/registry/examples/card-grid/hover-quiet.tsx +1 -1
- package/registry/examples/chat/native/assistant.dark.png +0 -0
- package/registry/examples/chat/native/assistant.light.png +0 -0
- package/registry/examples/chat/native/conversation.dark.png +0 -0
- package/registry/examples/chat/native/conversation.light.png +0 -0
- package/registry/examples/chat/native/inbox.dark.png +0 -0
- package/registry/examples/chat/native/inbox.light.png +0 -0
- package/registry/examples/checkbox/native/terms.dark.png +0 -0
- package/registry/examples/checkbox/native/terms.light.png +0 -0
- package/registry/examples/chip/native/multiple.dark.png +0 -0
- package/registry/examples/chip/native/multiple.light.png +0 -0
- package/registry/examples/chip/native/single.dark.png +0 -0
- package/registry/examples/chip/native/single.light.png +0 -0
- package/registry/examples/chip/native/toggle.dark.png +0 -0
- package/registry/examples/chip/native/toggle.light.png +0 -0
- package/registry/examples/component-page/button.js +2 -2
- package/registry/examples/component-page/button.tsx +2 -2
- package/registry/examples/contact-page/team.js +1 -1
- package/registry/examples/contact-page/team.tsx +1 -1
- package/registry/examples/cover-hero/plain.js +1 -1
- package/registry/examples/cover-hero/plain.tsx +1 -1
- package/registry/examples/cover-hero/shop.js +1 -1
- package/registry/examples/cover-hero/shop.tsx +1 -1
- package/registry/examples/dashboard-layout/orazaka-eric.js +2 -2
- package/registry/examples/dashboard-layout/orazaka-eric.tsx +2 -2
- package/registry/examples/date-picker/native/calendar.dark.png +0 -0
- package/registry/examples/date-picker/native/calendar.light.png +0 -0
- package/registry/examples/date-picker/native/day-strip.dark.png +0 -0
- package/registry/examples/date-picker/native/day-strip.light.png +0 -0
- package/registry/examples/date-picker/native/month-year.dark.png +0 -0
- package/registry/examples/date-picker/native/month-year.light.png +0 -0
- package/registry/examples/date-picker/native/time-slots.dark.png +0 -0
- package/registry/examples/date-picker/native/time-slots.light.png +0 -0
- package/registry/examples/description-list/native/job-details.dark.png +0 -0
- package/registry/examples/description-list/native/job-details.light.png +0 -0
- package/registry/examples/detail-layout/checkout.js +1 -1
- package/registry/examples/detail-layout/checkout.tsx +1 -1
- package/registry/examples/detail-layout/job.js +1 -1
- package/registry/examples/detail-layout/job.tsx +1 -1
- package/registry/examples/detail-layout/video.js +2 -2
- package/registry/examples/detail-layout/video.tsx +2 -2
- package/registry/examples/dialog/native/sheet.dark.png +0 -0
- package/registry/examples/dialog/native/sheet.light.png +0 -0
- package/registry/examples/docs-hub-page/krizaka.js +1 -1
- package/registry/examples/docs-hub-page/krizaka.tsx +1 -1
- package/registry/examples/empty-state/library.js +1 -1
- package/registry/examples/empty-state/library.tsx +1 -1
- package/registry/examples/empty-state/native/default.dark.png +0 -0
- package/registry/examples/empty-state/native/default.light.png +0 -0
- package/registry/examples/fab/native/extended.dark.png +0 -0
- package/registry/examples/fab/native/extended.light.png +0 -0
- package/registry/examples/force-update-screen/native/default.dark.png +0 -0
- package/registry/examples/force-update-screen/native/default.light.png +0 -0
- package/registry/examples/form/native/amount.dark.png +0 -0
- package/registry/examples/form/native/amount.light.png +0 -0
- package/registry/examples/form/native/audience.dark.png +0 -0
- package/registry/examples/form/native/audience.light.png +0 -0
- package/registry/examples/form/native/profile.dark.png +0 -0
- package/registry/examples/form/native/profile.light.png +0 -0
- package/registry/examples/form/native/settings.dark.png +0 -0
- package/registry/examples/form/native/settings.light.png +0 -0
- package/registry/examples/form/native/sign-up.dark.png +0 -0
- package/registry/examples/form/native/sign-up.light.png +0 -0
- package/registry/examples/form/native/upload.dark.png +0 -0
- package/registry/examples/form/native/upload.light.png +0 -0
- package/registry/examples/glow-card/spotlight.tsx +1 -1
- package/registry/examples/goal-gauge/native/default.dark.png +0 -0
- package/registry/examples/goal-gauge/native/default.light.png +0 -0
- package/registry/examples/landing-page/krizaka.js +3 -3
- package/registry/examples/landing-page/krizaka.tsx +3 -3
- package/registry/examples/link-card/hover-quiet.js +1 -1
- package/registry/examples/link-card/hover-quiet.tsx +1 -1
- package/registry/examples/loader/native/block.dark.png +0 -0
- package/registry/examples/loader/native/block.light.png +0 -0
- package/registry/examples/map/native/location-picker.dark.png +0 -0
- package/registry/examples/map/native/location-picker.light.png +0 -0
- package/registry/examples/map/route.js +36 -0
- package/registry/examples/map/route.tsx +35 -0
- package/registry/examples/marketing-layout/pricing.js +1 -1
- package/registry/examples/marketing-layout/pricing.tsx +1 -1
- package/registry/examples/marketing-layout/product-page.js +1 -1
- package/registry/examples/marketing-layout/product-page.tsx +2 -2
- package/registry/examples/mascot-state/native/default.dark.png +0 -0
- package/registry/examples/mascot-state/native/default.light.png +0 -0
- package/registry/examples/mascots/native/crane.dark.png +0 -0
- package/registry/examples/mascots/native/crane.light.png +0 -0
- package/registry/examples/mascots/native/default.dark.png +0 -0
- package/registry/examples/mascots/native/default.light.png +0 -0
- package/registry/examples/mascots/native/lovebird.dark.png +0 -0
- package/registry/examples/mascots/native/lovebird.light.png +0 -0
- package/registry/examples/mascots/native/phoenix.dark.png +0 -0
- package/registry/examples/mascots/native/phoenix.light.png +0 -0
- package/registry/examples/match-dialog/native/its-a-match.dark.png +0 -0
- package/registry/examples/match-dialog/native/its-a-match.light.png +0 -0
- package/registry/examples/media-capture/native/photo.dark.png +0 -0
- package/registry/examples/media-capture/native/photo.light.png +0 -0
- package/registry/examples/meta-row/native/video.dark.png +0 -0
- package/registry/examples/meta-row/native/video.light.png +0 -0
- package/registry/examples/meter/native/credits.dark.png +0 -0
- package/registry/examples/meter/native/credits.light.png +0 -0
- package/registry/examples/meter/native/split-ring.dark.png +0 -0
- package/registry/examples/meter/native/split-ring.light.png +0 -0
- package/registry/examples/nav-bar/family-product.js +1 -1
- package/registry/examples/nav-bar/family-product.tsx +1 -1
- package/registry/examples/onboarding/native/first-launch.dark.png +0 -0
- package/registry/examples/onboarding/native/first-launch.light.png +0 -0
- package/registry/examples/permission-prompt/native/blocked.dark.png +0 -0
- package/registry/examples/permission-prompt/native/blocked.light.png +0 -0
- package/registry/examples/permission-prompt/native/camera.dark.png +0 -0
- package/registry/examples/permission-prompt/native/camera.light.png +0 -0
- package/registry/examples/photo-grid/native/profile-photos.dark.png +0 -0
- package/registry/examples/photo-grid/native/profile-photos.light.png +0 -0
- package/registry/examples/pricing-page/credits.js +3 -3
- package/registry/examples/pricing-page/credits.tsx +3 -3
- package/registry/examples/product-page/orazaka.js +2 -2
- package/registry/examples/product-page/orazaka.tsx +2 -2
- package/registry/examples/profile-card/native/default.dark.png +0 -0
- package/registry/examples/profile-card/native/default.light.png +0 -0
- package/registry/examples/progress/native/bar.dark.png +0 -0
- package/registry/examples/progress/native/bar.light.png +0 -0
- package/registry/examples/progress/native/indeterminate.dark.png +0 -0
- package/registry/examples/progress/native/indeterminate.light.png +0 -0
- package/registry/examples/progress/native/ring.dark.png +0 -0
- package/registry/examples/progress/native/ring.light.png +0 -0
- package/registry/examples/radio-group/native/buttons.dark.png +0 -0
- package/registry/examples/radio-group/native/buttons.light.png +0 -0
- package/registry/examples/radio-group/native/cards.dark.png +0 -0
- package/registry/examples/radio-group/native/cards.light.png +0 -0
- package/registry/examples/radio-group/native/list.dark.png +0 -0
- package/registry/examples/radio-group/native/list.light.png +0 -0
- package/registry/examples/screen/native/auth.dark.png +0 -0
- package/registry/examples/screen/native/auth.light.png +0 -0
- package/registry/examples/screen/native/chat.dark.png +0 -0
- package/registry/examples/screen/native/chat.light.png +0 -0
- package/registry/examples/screen/native/profile.dark.png +0 -0
- package/registry/examples/screen/native/profile.light.png +0 -0
- package/registry/examples/screen/native/settings.dark.png +0 -0
- package/registry/examples/screen/native/settings.light.png +0 -0
- package/registry/examples/search-field/native/cancel.dark.png +0 -0
- package/registry/examples/search-field/native/cancel.light.png +0 -0
- package/registry/examples/settings-layout/account.js +1 -1
- package/registry/examples/settings-layout/account.tsx +1 -1
- package/registry/examples/settings-layout/native/account.dark.png +0 -0
- package/registry/examples/settings-layout/native/account.light.png +0 -0
- package/registry/examples/settings-layout/sections.js +1 -1
- package/registry/examples/settings-layout/sections.tsx +1 -1
- package/registry/examples/showcase/native/slides.dark.png +0 -0
- package/registry/examples/showcase/native/slides.light.png +0 -0
- package/registry/examples/slider/native/default.dark.png +0 -0
- package/registry/examples/slider/native/default.light.png +0 -0
- package/registry/examples/slider/native/range.dark.png +0 -0
- package/registry/examples/slider/native/range.light.png +0 -0
- package/registry/examples/slider/native/stepped.dark.png +0 -0
- package/registry/examples/slider/native/stepped.light.png +0 -0
- package/registry/examples/slider/native/vertical.dark.png +0 -0
- package/registry/examples/slider/native/vertical.light.png +0 -0
- package/registry/examples/spinner/native/sizes.dark.png +0 -0
- package/registry/examples/spinner/native/sizes.light.png +0 -0
- package/registry/examples/split-view/messages.js +1 -1
- package/registry/examples/split-view/messages.tsx +1 -1
- package/registry/examples/status-page/building.js +1 -1
- package/registry/examples/status-page/building.tsx +1 -1
- package/registry/examples/step-progress/native/sign-up.dark.png +0 -0
- package/registry/examples/step-progress/native/sign-up.light.png +0 -0
- package/registry/examples/stepper/native/run.dark.png +0 -0
- package/registry/examples/stepper/native/run.light.png +0 -0
- package/registry/examples/sticky-action/phone.js +1 -1
- package/registry/examples/sticky-action/phone.tsx +1 -1
- package/registry/examples/switch/native/default.dark.png +0 -0
- package/registry/examples/switch/native/default.light.png +0 -0
- package/registry/examples/switch/native/settings.dark.png +0 -0
- package/registry/examples/switch/native/settings.light.png +0 -0
- package/registry/examples/tab-bar/native/main-sections.dark.png +0 -0
- package/registry/examples/tab-bar/native/main-sections.light.png +0 -0
- package/registry/examples/tabs/native/sections.dark.png +0 -0
- package/registry/examples/tabs/native/sections.light.png +0 -0
- package/registry/examples/tag-selector/native/interests.dark.png +0 -0
- package/registry/examples/tag-selector/native/interests.light.png +0 -0
- package/registry/examples/toast/native/snackbar.dark.png +0 -0
- package/registry/examples/toast/native/snackbar.light.png +0 -0
- package/registry/examples/toast/native/tones.dark.png +0 -0
- package/registry/examples/toast/native/tones.light.png +0 -0
- package/registry/examples/txt/native/tones.dark.png +0 -0
- package/registry/examples/txt/native/tones.light.png +0 -0
- package/registry/examples/update-prompt/native/default.dark.png +0 -0
- package/registry/examples/update-prompt/native/default.light.png +0 -0
- package/registry/examples/verified-badge/native/verified.dark.png +0 -0
- package/registry/examples/verified-badge/native/verified.light.png +0 -0
- package/registry/examples/vertical-video/native/rail.dark.png +0 -0
- package/registry/examples/vertical-video/native/rail.light.png +0 -0
- package/registry/examples/waveform/native/card.dark.png +0 -0
- package/registry/examples/waveform/native/card.light.png +0 -0
- package/registry/force-update-screen.json +1 -1
- package/registry/form.json +6 -6
- package/registry/glow-card.json +19 -19
- package/registry/index.json +20 -21
- package/registry/iso.json +7 -7
- package/registry/landing-page.json +2 -2
- package/registry/landscape.json +1 -1
- package/registry/link-card.json +15 -24
- package/registry/map.json +235 -6
- package/registry/marketing-layout.json +3 -3
- package/registry/media-gallery.json +1 -1
- package/registry/nav-bar.json +32 -4
- package/registry/pointer-light.json +17 -22
- package/registry/pricing-page.json +2 -2
- package/registry/product-page.json +2 -2
- package/registry/progress.json +2 -2
- package/registry/radio-group.json +1 -1
- package/registry/rail-nav.json +2 -2
- package/registry/service-card.json +1 -1
- package/registry/settings-layout.json +3 -3
- package/registry/site-footer.json +2 -2
- package/registry/sites.json +1 -1
- package/registry/slider.json +1 -1
- package/registry/split-view.json +2 -2
- package/registry/status-page.json +1 -1
- package/registry/sticky-action.json +2 -2
- package/registry/update-prompt.json +1 -1
- package/registry/video-player.json +1 -1
- package/dist/chunk-6ZYRUOTA.js.map +0 -1
- package/dist/chunk-AB5D3KBG.js +0 -37
- package/dist/chunk-AB5D3KBG.js.map +0 -1
- package/dist/chunk-APNIVNIX.js.map +0 -1
- package/dist/chunk-CHOJUCVE.js.map +0 -1
- package/dist/chunk-DZU6RMYD.js.map +0 -1
- package/dist/chunk-HAQWKORZ.js.map +0 -1
- package/dist/chunk-KM6VAKIE.js.map +0 -1
- package/dist/chunk-MQPC3P4T.js.map +0 -1
- package/dist/chunk-OUWPBSSL.js.map +0 -1
- package/dist/chunk-TFJDIOFK.js.map +0 -1
- package/registry/examples/argument-card/hover-light.js +0 -17
- package/registry/examples/argument-card/hover-light.tsx +0 -19
- package/registry/examples/link-card/hover-light.d.ts +0 -4
- package/registry/examples/link-card/hover-light.js +0 -18
- package/registry/examples/link-card/hover-light.tsx +0 -20
- /package/dist/{chunk-LYOPPBMC.js.map → chunk-KIBICUZK.js.map} +0 -0
- /package/dist/{chunk-HBZPJ3EP.js.map → chunk-NJFCSVPT.js.map} +0 -0
- /package/registry/examples/{argument-card/hover-light.d.ts → map/route.d.ts} +0 -0
package/README.md
CHANGED
|
@@ -200,8 +200,8 @@ light or a product's — is a set of tokens.
|
|
|
200
200
|
| `@krizaka/ui/document-viewer` | `DocumentViewer` (a PDF drawn by pdf.js — `loadPdfjs={() => import("pdfjs-dist")}`, an optional peer — with `highlights` lit where their quotes sit, `activeId` / `onActiveChange`, `onLocate`; page + quote when the text layer cannot place one), `locateQuote` | client |
|
|
201
201
|
| `@krizaka/ui/page` | the page frame: `Page` (`size` narrow·default·wide·full, `as`), `Section` (`id`, `eyebrow`, `title`, `lead`, `actions`, `divider`, `spacing` sm·md·lg, `backdrop`, `size`, `reveal`), `SectionHeading`, `Facts` (`items`: `label`, `tone` ok·wip·neutral, `href`), `Ticks` (backticks read as code) — see [Page blocks](#page-blocks) | server |
|
|
202
202
|
| `@krizaka/ui/page-hero` | `PageHero` (`title` → the h1, `eyebrow`, `lead`, `back`, `aside`, `backdrop` grid·plain·none, `align`, `size`, `linkAs`; facts or actions as children) | server |
|
|
203
|
-
| `@krizaka/ui/card-grid` | `CardGrid` (`min`, `fit` fill·fit, `align`, `reveal` staggered by `columns`, `
|
|
204
|
-
| `@krizaka/ui/pointer-light` |
|
|
203
|
+
| `@krizaka/ui/card-grid` | `CardGrid` (`min`, `fit` fill·fit, `align`, `reveal` staggered by `columns`, `as` div·ul·ol; `light` and `hover` deprecated no-ops) | client |
|
|
204
|
+
| `@krizaka/ui/pointer-light` | Deprecated since 3.31 (krizaka-ui#393): `PointerLight`, `usePointerLight` do nothing — the cards have one quiet hover | client |
|
|
205
205
|
| `@krizaka/ui/link-card` | `LinkCard` (the whole card one link: `href`, `icon`, `meta`, `title`, `titleAs`, `description`, `extra`, `cta`, `layout` row·stack, `linkAs`) | server |
|
|
206
206
|
| `@krizaka/ui/argument-card` | `ArgumentCard` (compact: `icon`, `title`, `meta`, `facts`, `hook` — the trap in one line —, `more`, `actions`; in a panel: `points`, `rule`, `details`, `panelLabel`) | server |
|
|
207
207
|
| `@krizaka/ui/mascot-quote` | `MascotQuote` (`bird`, `mood`, `label`, the sentence as children, `variant` inline·callout, `animated`) | client |
|
|
@@ -295,8 +295,8 @@ import { LinkCard } from "@krizaka/ui/link-card";
|
|
|
295
295
|
- **A subject's colour.** Blocks read `--kz-hue` (rails, tiles, lights), `--kz-hue-2` and `--kz-hue-text` (small text,
|
|
296
296
|
≥ 4.5:1), falling back to the brand's accent: set them on a card or a wrapper; `.brand-<id>` sets the accent.
|
|
297
297
|
- **Links.** Blocks that link take `linkAs` (Next's `Link`) for internal addresses; an absolute URL opens in a new tab.
|
|
298
|
-
- **Motion.** `reveal` uses `[data-reveal]` (MotionObserver): never on the first screen.
|
|
299
|
-
|
|
298
|
+
- **Motion.** `reveal` uses `[data-reveal]` (MotionObserver): never on the first screen. A hover changes a colour, never
|
|
299
|
+
a position (krizaka-ui#393): no lift, no light under the pointer. The hops stop under `prefers-reduced-motion`; nothing loops.
|
|
300
300
|
|
|
301
301
|
## Page templates
|
|
302
302
|
|
|
@@ -483,7 +483,6 @@ import { MotionObserver, RotatingWord } from "@krizaka/ui";
|
|
|
483
483
|
|
|
484
484
|
<h1>Creators you <RotatingWord words={["love", "follow", "support"]} /></h1>
|
|
485
485
|
<section data-reveal style={{ "--kz-delay": "120ms" }}>…</section>
|
|
486
|
-
<a className="kz-sheen">Get started</a>
|
|
487
486
|
```
|
|
488
487
|
|
|
489
488
|
| Class / attribute | What it does |
|
|
@@ -492,9 +491,6 @@ import { MotionObserver, RotatingWord } from "@krizaka/ui";
|
|
|
492
491
|
| `kz-page` | A page entering (put it on a route wrapper) |
|
|
493
492
|
| `data-reveal` (+ `--kz-delay`) | Rises into place when it enters the viewport (`MotionObserver`) |
|
|
494
493
|
| `RotatingWord` / `kz-word` | A word that rolls through alternatives |
|
|
495
|
-
| `kz-sheen` | A light sweeping across a primary action on hover |
|
|
496
|
-
| `kz-spotlight` | A soft bloom following the pointer across a card |
|
|
497
|
-
| `kz-lift` | A card rising under the pointer |
|
|
498
494
|
| `kz-gradient-text`, `kz-marquee` | Drifting gradient text, endless bands |
|
|
499
495
|
| `kz-flow` | EngineFlow's conduits and photons: paused off screen, held while settling, still under reduced motion |
|
|
500
496
|
| `kz-overlay`, `kz-dialog`, `kz-pop`, `kz-fade` | Backdrops, dialogs (from the bottom on phones), menus, views swapped in place |
|
package/dist/action-bar.js
CHANGED
|
@@ -7,7 +7,7 @@ import {
|
|
|
7
7
|
} from "./chunk-XCBVFMNV.js";
|
|
8
8
|
import {
|
|
9
9
|
buttonVariants
|
|
10
|
-
} from "./chunk-
|
|
10
|
+
} from "./chunk-UV4HBVH7.js";
|
|
11
11
|
import "./chunk-43PTCDTL.js";
|
|
12
12
|
import "./chunk-2VNYHG4E.js";
|
|
13
13
|
import {
|
|
@@ -28,7 +28,7 @@ function ActionBar({ actions, variant = "buttons", primaryFirst = false, size =
|
|
|
28
28
|
external,
|
|
29
29
|
"aria-label": a.label,
|
|
30
30
|
"data-tip": a.label,
|
|
31
|
-
className: buttonVariants({ variant: "ghost", size: "icon",
|
|
31
|
+
className: buttonVariants({ variant: "ghost", size: "icon", className: size === "sm" ? "h-9 w-9" : void 0 }),
|
|
32
32
|
children: a.icon
|
|
33
33
|
}
|
|
34
34
|
) : /* @__PURE__ */ jsxs(
|
|
@@ -37,7 +37,7 @@ function ActionBar({ actions, variant = "buttons", primaryFirst = false, size =
|
|
|
37
37
|
href: a.href,
|
|
38
38
|
linkAs,
|
|
39
39
|
external,
|
|
40
|
-
className: buttonVariants({ variant: primaryFirst && i === 0 ? "primary" : "secondary", size,
|
|
40
|
+
className: buttonVariants({ variant: primaryFirst && i === 0 ? "primary" : "secondary", size, className: "gap-2" }),
|
|
41
41
|
children: [
|
|
42
42
|
a.icon,
|
|
43
43
|
a.label,
|
package/dist/action-bar.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/action-bar/action-bar.tsx"],"sourcesContent":["// Server-safe. A row of actions that leave or move on (blocks.css): discuss · propose · report, read the docs, see the\n// code. `buttons`: buttons with their words — the end of a page or a section. `icons`: icon buttons whose words are the\n// accessible name and a tooltip on hover and focus (CSS only: no script, no portal) — the foot of a card.\nimport type * as React from \"react\";\n\nimport { BlockLink, isExternal, type LinkComponent } from \"../block-link\";\nimport { buttonVariants } from \"../button/button\";\nimport { cn } from \"../cn\";\nimport { ExternalGlyph } from \"../glyphs\";\n\nexport interface Action {\n /** Where it leads. An absolute URL opens in a new tab, with the external mark. */\n href: string;\n /** Its words (the accessible name, and the tooltip of an icon action). */\n label: string;\n /** Its icon (a signature icon): decorative. Required by `variant=\"icons\"`. */\n icon?: React.ReactNode;\n}\n\nexport type ActionBarProps = React.HTMLAttributes<HTMLUListElement> & {\n /** The actions, in order of importance. */\n actions: readonly Action[];\n /**\n * `buttons` (with their words) or `icons` (icon buttons, the words in a tooltip).\n * @default \"buttons\"\n */\n variant?: \"buttons\" | \"icons\";\n /**\n * The first action as the primary button (the one action a block is about); the others stay secondary.\n * @default false\n */\n primaryFirst?: boolean;\n /**\n * The buttons' size: `sm` in a card, `md` in a section, `lg` on a hero or a closing call.\n * @default \"md\"\n */\n size?: \"sm\" | \"md\" | \"lg\";\n /** What the actions are about (`Talk about Krizaka Java`): the list's accessible name. */\n label?: string;\n /** The app's link component for internal addresses (Next's `Link`); an `<a>` otherwise. */\n linkAs?: LinkComponent;\n};\n\n/** A row of link actions: buttons with their words, or icon buttons with a tooltip. */\nexport function ActionBar({ actions, variant = \"buttons\", primaryFirst = false, size = \"md\", label, linkAs, className, ...props }: ActionBarProps) {\n const icons = variant === \"icons\";\n return (\n <ul className={cn(\"kz-actions\", className)} data-variant={icons ? \"icons\" : undefined} aria-label={label} {...props}>\n {actions.map((a, i) => {\n const external = isExternal(a.href);\n return (\n <li key={a.href}>\n {icons ? (\n <BlockLink\n href={a.href}\n linkAs={linkAs}\n external={external}\n aria-label={a.label}\n data-tip={a.label}\n className={buttonVariants({ variant: \"ghost\", size: \"icon\",
|
|
1
|
+
{"version":3,"sources":["../src/action-bar/action-bar.tsx"],"sourcesContent":["// Server-safe. A row of actions that leave or move on (blocks.css): discuss · propose · report, read the docs, see the\n// code. `buttons`: buttons with their words — the end of a page or a section. `icons`: icon buttons whose words are the\n// accessible name and a tooltip on hover and focus (CSS only: no script, no portal) — the foot of a card.\nimport type * as React from \"react\";\n\nimport { BlockLink, isExternal, type LinkComponent } from \"../block-link\";\nimport { buttonVariants } from \"../button/button\";\nimport { cn } from \"../cn\";\nimport { ExternalGlyph } from \"../glyphs\";\n\nexport interface Action {\n /** Where it leads. An absolute URL opens in a new tab, with the external mark. */\n href: string;\n /** Its words (the accessible name, and the tooltip of an icon action). */\n label: string;\n /** Its icon (a signature icon): decorative. Required by `variant=\"icons\"`. */\n icon?: React.ReactNode;\n}\n\nexport type ActionBarProps = React.HTMLAttributes<HTMLUListElement> & {\n /** The actions, in order of importance. */\n actions: readonly Action[];\n /**\n * `buttons` (with their words) or `icons` (icon buttons, the words in a tooltip).\n * @default \"buttons\"\n */\n variant?: \"buttons\" | \"icons\";\n /**\n * The first action as the primary button (the one action a block is about); the others stay secondary.\n * @default false\n */\n primaryFirst?: boolean;\n /**\n * The buttons' size: `sm` in a card, `md` in a section, `lg` on a hero or a closing call.\n * @default \"md\"\n */\n size?: \"sm\" | \"md\" | \"lg\";\n /** What the actions are about (`Talk about Krizaka Java`): the list's accessible name. */\n label?: string;\n /** The app's link component for internal addresses (Next's `Link`); an `<a>` otherwise. */\n linkAs?: LinkComponent;\n};\n\n/** A row of link actions: buttons with their words, or icon buttons with a tooltip. */\nexport function ActionBar({ actions, variant = \"buttons\", primaryFirst = false, size = \"md\", label, linkAs, className, ...props }: ActionBarProps) {\n const icons = variant === \"icons\";\n return (\n <ul className={cn(\"kz-actions\", className)} data-variant={icons ? \"icons\" : undefined} aria-label={label} {...props}>\n {actions.map((a, i) => {\n const external = isExternal(a.href);\n return (\n <li key={a.href}>\n {icons ? (\n <BlockLink\n href={a.href}\n linkAs={linkAs}\n external={external}\n aria-label={a.label}\n data-tip={a.label}\n className={buttonVariants({ variant: \"ghost\", size: \"icon\", className: size === \"sm\" ? \"h-9 w-9\" : undefined })}\n >\n {a.icon}\n </BlockLink>\n ) : (\n <BlockLink\n href={a.href}\n linkAs={linkAs}\n external={external}\n className={buttonVariants({ variant: primaryFirst && i === 0 ? \"primary\" : \"secondary\", size, className: \"gap-2\" })}\n >\n {a.icon}\n {a.label}\n {external && <ExternalGlyph className=\"h-3 w-3 opacity-70\" />}\n </BlockLink>\n )}\n </li>\n );\n })}\n </ul>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAqDc,cAWA,YAXA;AATP,SAAS,UAAU,EAAE,SAAS,UAAU,WAAW,eAAe,OAAO,OAAO,MAAM,OAAO,QAAQ,WAAW,GAAG,MAAM,GAAmB;AACjJ,QAAM,QAAQ,YAAY;AAC1B,SACE,oBAAC,QAAG,WAAW,GAAG,cAAc,SAAS,GAAG,gBAAc,QAAQ,UAAU,QAAW,cAAY,OAAQ,GAAG,OAC3G,kBAAQ,IAAI,CAAC,GAAG,MAAM;AACrB,UAAM,WAAW,WAAW,EAAE,IAAI;AAClC,WACE,oBAAC,QACE,kBACC;AAAA,MAAC;AAAA;AAAA,QACC,MAAM,EAAE;AAAA,QACR;AAAA,QACA;AAAA,QACA,cAAY,EAAE;AAAA,QACd,YAAU,EAAE;AAAA,QACZ,WAAW,eAAe,EAAE,SAAS,SAAS,MAAM,QAAQ,WAAW,SAAS,OAAO,YAAY,OAAU,CAAC;AAAA,QAE7G,YAAE;AAAA;AAAA,IACL,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,MAAM,EAAE;AAAA,QACR;AAAA,QACA;AAAA,QACA,WAAW,eAAe,EAAE,SAAS,gBAAgB,MAAM,IAAI,YAAY,aAAa,MAAM,WAAW,QAAQ,CAAC;AAAA,QAEjH;AAAA,YAAE;AAAA,UACF,EAAE;AAAA,UACF,YAAY,oBAAC,iBAAc,WAAU,sBAAqB;AAAA;AAAA;AAAA,IAC7D,KAtBK,EAAE,IAwBX;AAAA,EAEJ,CAAC,GACH;AAEJ;","names":[]}
|
package/dist/argument-card.d.ts
CHANGED
|
@@ -57,7 +57,7 @@ type ArgumentCardProps = Omit<React.HTMLAttributes<HTMLElement>, "title"> & {
|
|
|
57
57
|
level?: 2 | 3 | 4;
|
|
58
58
|
/** The app's link component for internal addresses (Next's `Link`); an `<a>` otherwise. */
|
|
59
59
|
linkAs?: LinkComponent;
|
|
60
|
-
/**
|
|
60
|
+
/** @deprecated Since 3.31 (krizaka-ui#393): does nothing — every card has the one quiet hover. Removed in 4.0. */
|
|
61
61
|
hover?: CardHover;
|
|
62
62
|
};
|
|
63
63
|
/**
|
package/dist/argument-card.js
CHANGED
|
@@ -3,7 +3,7 @@ import {
|
|
|
3
3
|
} from "./chunk-LZNZLCOE.js";
|
|
4
4
|
import {
|
|
5
5
|
cardHoverClass
|
|
6
|
-
} from "./chunk-
|
|
6
|
+
} from "./chunk-IBDTAMPF.js";
|
|
7
7
|
import {
|
|
8
8
|
BlockLink
|
|
9
9
|
} from "./chunk-2AGSO3WH.js";
|
|
@@ -21,7 +21,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
21
21
|
function ArgumentCard({ id, title, icon, meta, mark, facts, hook, points, rule, details, panelLabel, more, actions, level = 3, linkAs, hover, className, ...props }) {
|
|
22
22
|
const H = `h${level}`;
|
|
23
23
|
const fold = !more && panelLabel && (points || rule || details && details.length > 0);
|
|
24
|
-
return /* @__PURE__ */ jsxs("article", { className: cn("kz-block-card kz-arg", cardHoverClass(hover), className), "
|
|
24
|
+
return /* @__PURE__ */ jsxs("article", { className: cn("kz-block-card kz-arg", cardHoverClass(hover), className), "aria-labelledby": id, ...props, children: [
|
|
25
25
|
/* @__PURE__ */ jsxs("div", { className: "kz-arg-head", children: [
|
|
26
26
|
icon && /* @__PURE__ */ jsx("span", { className: "kz-block-icon", "aria-hidden": true, children: icon }),
|
|
27
27
|
/* @__PURE__ */ jsxs("div", { className: "kz-arg-id", children: [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/argument-card/argument-card.tsx"],"sourcesContent":["// Server-safe. A card that argues (blocks.css), compact: who (icon, name, facts) → the trap in one line → the way in.\n// The long version — what it does, the rule a bird stands for, the reasons — waits in a panel the reader opens (a\n// native <details>: keyboard, screen readers, no script). Cards of a row share their height; the panel and the foot\n// sit at the bottom, at the same place on every card.\nimport type * as React from \"react\";\n\nimport { BlockLink, type LinkComponent } from \"../block-link\";\nimport { cn } from \"../cn\";\nimport { ArrowGlyph, ChevronGlyph } from \"../glyphs\";\nimport { type CardHover, cardHoverClass } from \"../link-card/link-card\";\nimport { type Fact, Facts } from \"../page/page\";\n\nexport type ArgumentCardProps = Omit<React.HTMLAttributes<HTMLElement>, \"title\"> & {\n /** The id of the title: the card's accessible name. */\n id: string;\n /** The title: the subject (a building block, a feature, a plan). */\n title: React.ReactNode;\n /** The icon tile (a signature icon): decorative. */\n icon?: React.ReactNode;\n /** A mono line under the title (a repository, a package). */\n meta?: React.ReactNode;\n /** Small, in the top corner: the bird whose rule it is (a `Mascot` of 40 px, still). Decorative. */\n mark?: React.ReactNode;\n /** Compact facts under the line: registry and version, a status said honestly. */\n facts?: readonly Fact[];\n /**\n * The problem in ONE line (≤ 90 characters): what a reader keeps if they read nothing else. `label` (`The trap`) is\n * read by assistive technology before it, not shown.\n */\n hook: { label: React.ReactNode; text: React.ReactNode };\n /** Unfolded only: what it does, as a few short points, with their label (`What it does`). */\n points?: { label: React.ReactNode; items: readonly React.ReactNode[] };\n /** Unfolded only: the rule told by a bird (a `MascotQuote`, `variant=\"inline\"`). */\n rule?: React.ReactNode;\n /** Unfolded only: the long version, as labelled paragraphs. */\n details?: readonly { label: React.ReactNode; text: React.ReactNode }[];\n /**\n * Without a detail page: the words that unfold the card in place (`Details`) — a native `<details>` holding the\n * points, the rule and the long version. Ignored with `more`: the detail page holds them.\n */\n panelLabel?: React.ReactNode;\n /** The way in: a detail page — one short action at the foot (`Details`). With it, the card is only its face. */\n more?: { href: string; label: React.ReactNode };\n /** Discreet secondary actions at the foot, on the right (an `ActionBar` with `variant=\"icons\"`). */\n actions?: React.ReactNode;\n /**\n * The title's level.\n * @default 3\n */\n level?: 2 | 3 | 4;\n /** The app's link component for internal addresses (Next's `Link`); an `<a>` otherwise. */\n linkAs?: LinkComponent;\n /**
|
|
1
|
+
{"version":3,"sources":["../src/argument-card/argument-card.tsx"],"sourcesContent":["// Server-safe. A card that argues (blocks.css), compact: who (icon, name, facts) → the trap in one line → the way in.\n// The long version — what it does, the rule a bird stands for, the reasons — waits in a panel the reader opens (a\n// native <details>: keyboard, screen readers, no script). Cards of a row share their height; the panel and the foot\n// sit at the bottom, at the same place on every card.\nimport type * as React from \"react\";\n\nimport { BlockLink, type LinkComponent } from \"../block-link\";\nimport { cn } from \"../cn\";\nimport { ArrowGlyph, ChevronGlyph } from \"../glyphs\";\nimport { type CardHover, cardHoverClass } from \"../link-card/link-card\";\nimport { type Fact, Facts } from \"../page/page\";\n\nexport type ArgumentCardProps = Omit<React.HTMLAttributes<HTMLElement>, \"title\"> & {\n /** The id of the title: the card's accessible name. */\n id: string;\n /** The title: the subject (a building block, a feature, a plan). */\n title: React.ReactNode;\n /** The icon tile (a signature icon): decorative. */\n icon?: React.ReactNode;\n /** A mono line under the title (a repository, a package). */\n meta?: React.ReactNode;\n /** Small, in the top corner: the bird whose rule it is (a `Mascot` of 40 px, still). Decorative. */\n mark?: React.ReactNode;\n /** Compact facts under the line: registry and version, a status said honestly. */\n facts?: readonly Fact[];\n /**\n * The problem in ONE line (≤ 90 characters): what a reader keeps if they read nothing else. `label` (`The trap`) is\n * read by assistive technology before it, not shown.\n */\n hook: { label: React.ReactNode; text: React.ReactNode };\n /** Unfolded only: what it does, as a few short points, with their label (`What it does`). */\n points?: { label: React.ReactNode; items: readonly React.ReactNode[] };\n /** Unfolded only: the rule told by a bird (a `MascotQuote`, `variant=\"inline\"`). */\n rule?: React.ReactNode;\n /** Unfolded only: the long version, as labelled paragraphs. */\n details?: readonly { label: React.ReactNode; text: React.ReactNode }[];\n /**\n * Without a detail page: the words that unfold the card in place (`Details`) — a native `<details>` holding the\n * points, the rule and the long version. Ignored with `more`: the detail page holds them.\n */\n panelLabel?: React.ReactNode;\n /** The way in: a detail page — one short action at the foot (`Details`). With it, the card is only its face. */\n more?: { href: string; label: React.ReactNode };\n /** Discreet secondary actions at the foot, on the right (an `ActionBar` with `variant=\"icons\"`). */\n actions?: React.ReactNode;\n /**\n * The title's level.\n * @default 3\n */\n level?: 2 | 3 | 4;\n /** The app's link component for internal addresses (Next's `Link`); an `<a>` otherwise. */\n linkAs?: LinkComponent;\n /** @deprecated Since 3.31 (krizaka-ui#393): does nothing — every card has the one quiet hover. Removed in 4.0. */\n hover?: CardHover;\n};\n\n/**\n * A card that argues, compact (about a third of a full card): who (icon, name, meta; the bird small in the corner) →\n * the problem in one line → compact facts → one short action. What it does, the bird's rule and the long version are\n * never on the face: they live on the detail page (`more`) or in the card unfolded in place (`panelLabel`).\n */\nexport function ArgumentCard({ id, title, icon, meta, mark, facts, hook, points, rule, details, panelLabel, more, actions, level = 3, linkAs, hover, className, ...props }: ArgumentCardProps) {\n const H = `h${level}` as \"h2\" | \"h3\" | \"h4\";\n const fold = !more && panelLabel && (points || rule || (details && details.length > 0));\n return (\n <article className={cn(\"kz-block-card kz-arg\", cardHoverClass(hover), className)} aria-labelledby={id} {...props}>\n <div className=\"kz-arg-head\">\n {icon && (\n <span className=\"kz-block-icon\" aria-hidden>\n {icon}\n </span>\n )}\n <div className=\"kz-arg-id\">\n <H id={id} className=\"kz-arg-title\">\n {title}\n </H>\n {meta && <p className=\"kz-arg-meta\">{meta}</p>}\n </div>\n {mark && (\n <span className=\"kz-arg-mark\" aria-hidden>\n {mark}\n </span>\n )}\n </div>\n <p className=\"kz-arg-line\">\n <span className=\"kz-sr-only\">{hook.label} — </span>\n {hook.text}\n </p>\n {facts && facts.length > 0 && <Facts items={facts} />}\n {fold && (\n <details className=\"kz-arg-panel\">\n <summary>\n {panelLabel} <ChevronGlyph className=\"h-3.5 w-3.5\" />\n </summary>\n <div className=\"kz-arg-panel-body\">\n {points && (\n <div>\n <p className=\"kz-label\">{points.label}</p>\n <ul className=\"kz-list\">\n {points.items.map((item, i) => (\n <li key={i}>{item}</li>\n ))}\n </ul>\n </div>\n )}\n {details && details.length > 0 && (\n <dl>\n {details.map((d, i) => (\n <div key={i}>\n <dt className=\"kz-label\">{d.label}</dt>\n <dd>{d.text}</dd>\n </div>\n ))}\n </dl>\n )}\n {rule}\n </div>\n </details>\n )}\n {(more || actions) && (\n <div className=\"kz-arg-foot\">\n {more ? (\n <BlockLink href={more.href} linkAs={linkAs} className=\"kz-arg-more\" aria-describedby={id}>\n {more.label} <ArrowGlyph className=\"h-3.5 w-3.5\" />\n </BlockLink>\n ) : (\n <span />\n )}\n {actions}\n </div>\n )}\n </article>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAoEU,cAIF,YAJE;AAPH,SAAS,aAAa,EAAE,IAAI,OAAO,MAAM,MAAM,MAAM,OAAO,MAAM,QAAQ,MAAM,SAAS,YAAY,MAAM,SAAS,QAAQ,GAAG,QAAQ,OAAO,WAAW,GAAG,MAAM,GAAsB;AAC7L,QAAM,IAAI,IAAI,KAAK;AACnB,QAAM,OAAO,CAAC,QAAQ,eAAe,UAAU,QAAS,WAAW,QAAQ,SAAS;AACpF,SACE,qBAAC,aAAQ,WAAW,GAAG,wBAAwB,eAAe,KAAK,GAAG,SAAS,GAAG,mBAAiB,IAAK,GAAG,OACzG;AAAA,yBAAC,SAAI,WAAU,eACZ;AAAA,cACC,oBAAC,UAAK,WAAU,iBAAgB,eAAW,MACxC,gBACH;AAAA,MAEF,qBAAC,SAAI,WAAU,aACb;AAAA,4BAAC,KAAE,IAAQ,WAAU,gBAClB,iBACH;AAAA,QACC,QAAQ,oBAAC,OAAE,WAAU,eAAe,gBAAK;AAAA,SAC5C;AAAA,MACC,QACC,oBAAC,UAAK,WAAU,eAAc,eAAW,MACtC,gBACH;AAAA,OAEJ;AAAA,IACA,qBAAC,OAAE,WAAU,eACX;AAAA,2BAAC,UAAK,WAAU,cAAc;AAAA,aAAK;AAAA,QAAM;AAAA,SAAG;AAAA,MAC3C,KAAK;AAAA,OACR;AAAA,IACC,SAAS,MAAM,SAAS,KAAK,oBAAC,SAAM,OAAO,OAAO;AAAA,IAClD,QACC,qBAAC,aAAQ,WAAU,gBACjB;AAAA,2BAAC,aACE;AAAA;AAAA,QAAW;AAAA,QAAC,oBAAC,gBAAa,WAAU,eAAc;AAAA,SACrD;AAAA,MACA,qBAAC,SAAI,WAAU,qBACZ;AAAA,kBACC,qBAAC,SACC;AAAA,8BAAC,OAAE,WAAU,YAAY,iBAAO,OAAM;AAAA,UACtC,oBAAC,QAAG,WAAU,WACX,iBAAO,MAAM,IAAI,CAAC,MAAM,MACvB,oBAAC,QAAY,kBAAJ,CAAS,CACnB,GACH;AAAA,WACF;AAAA,QAED,WAAW,QAAQ,SAAS,KAC3B,oBAAC,QACE,kBAAQ,IAAI,CAAC,GAAG,MACf,qBAAC,SACC;AAAA,8BAAC,QAAG,WAAU,YAAY,YAAE,OAAM;AAAA,UAClC,oBAAC,QAAI,YAAE,MAAK;AAAA,aAFJ,CAGV,CACD,GACH;AAAA,QAED;AAAA,SACH;AAAA,OACF;AAAA,KAEA,QAAQ,YACR,qBAAC,SAAI,WAAU,eACZ;AAAA,aACC,qBAAC,aAAU,MAAM,KAAK,MAAM,QAAgB,WAAU,eAAc,oBAAkB,IACnF;AAAA,aAAK;AAAA,QAAM;AAAA,QAAC,oBAAC,cAAW,WAAU,eAAc;AAAA,SACnD,IAEA,oBAAC,UAAK;AAAA,MAEP;AAAA,OACH;AAAA,KAEJ;AAEJ;","names":[]}
|
package/dist/blocks.css
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/* @krizaka/ui — the page blocks (Page, Section, PageHero, CardGrid, LinkCard, ArgumentCard, MascotQuote, DecisionList,
|
|
2
|
-
CodeBlock, ActionBar, CtaPanel, Toc
|
|
2
|
+
CodeBlock, ActionBar, CtaPanel, Toc). The app imports it once, from its root layout or its global
|
|
3
3
|
stylesheet by package path: `import "@krizaka/ui/blocks.css"` — never through a relative @import of another file. Plain CSS on the --kz-* tokens: dark and light alike, every brand (`.brand-<id>`)
|
|
4
|
-
through --kz-accent. Nothing here loops
|
|
4
|
+
through --kz-accent. Nothing here loops and nothing moves under the pointer (krizaka-ui#393): a hover changes a colour; under reduced motion everything is still.
|
|
5
5
|
|
|
6
6
|
Two contracts a page can set on any ancestor:
|
|
7
7
|
- the frame: --kz-page-max (the width of the content, 72rem) and --kz-page-gutter (the side margin, 16 → 32 px);
|
|
@@ -188,8 +188,9 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
|
|
|
188
188
|
.kz-foundation[data-position="end"] .kz-foundation-base::after { top: auto; bottom: 100%; }
|
|
189
189
|
@media (max-width: 640px) { .kz-foundation-group { padding: 20px 8px 8px; border-radius: 20px; } }
|
|
190
190
|
|
|
191
|
-
/* The shared surface of the cards: a rail of the hue along the top,
|
|
192
|
-
|
|
191
|
+
/* The shared surface of the cards: a rail of the hue along the top, and one quiet hover (krizaka-ui#393) — the surface
|
|
192
|
+
goes one step up and the hairline strengthens, in a short colour transition. Nothing moves, nothing follows the
|
|
193
|
+
pointer, nothing glows; the keyboard focus is a ring around the whole card. */
|
|
193
194
|
.kz-block-card {
|
|
194
195
|
position: relative;
|
|
195
196
|
isolation: isolate;
|
|
@@ -197,7 +198,7 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
|
|
|
197
198
|
border-radius: 18px;
|
|
198
199
|
background: var(--kz-surface-1);
|
|
199
200
|
border: 1px solid var(--kz-border-default);
|
|
200
|
-
transition:
|
|
201
|
+
transition: background-color 150ms var(--kz-ease, ease), border-color 150ms var(--kz-ease, ease);
|
|
201
202
|
}
|
|
202
203
|
.kz-block-card::before {
|
|
203
204
|
content: "";
|
|
@@ -208,27 +209,18 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
|
|
|
208
209
|
background: linear-gradient(90deg, var(--kz-hue, var(--kz-accent)), var(--kz-hue-2, var(--kz-accent-2, var(--kz-accent))) 45%, transparent);
|
|
209
210
|
opacity: 0.85;
|
|
210
211
|
}
|
|
211
|
-
.kz-block-card::after {
|
|
212
|
-
content: "";
|
|
213
|
-
position: absolute;
|
|
214
|
-
inset: 0;
|
|
215
|
-
z-index: -1;
|
|
216
|
-
pointer-events: none;
|
|
217
|
-
opacity: 0;
|
|
218
|
-
background: radial-gradient(360px circle at var(--kz-pointer-x, 18%) var(--kz-pointer-y, 0%), color-mix(in srgb, var(--kz-hue, var(--kz-accent)) 13%, transparent), transparent 62%);
|
|
219
|
-
transition: opacity 0.3s var(--kz-ease, ease);
|
|
220
|
-
}
|
|
221
|
-
.kz-block-card:focus-within,
|
|
222
|
-
.kz-block-card:focus-visible { border-color: color-mix(in srgb, var(--kz-hue, var(--kz-accent)) 50%, var(--kz-border-default)); }
|
|
223
|
-
.kz-block-card:is(:hover, :focus-within, :focus-visible)::after { opacity: 1; }
|
|
224
212
|
@media (hover: hover) {
|
|
225
213
|
.kz-block-card:hover {
|
|
226
|
-
|
|
227
|
-
border-color:
|
|
228
|
-
box-shadow: 0 24px 48px -30px color-mix(in srgb, var(--kz-hue, var(--kz-accent)) 70%, transparent);
|
|
214
|
+
background-color: var(--kz-surface-2);
|
|
215
|
+
border-color: var(--kz-border-strong);
|
|
229
216
|
}
|
|
230
217
|
}
|
|
231
|
-
|
|
218
|
+
.kz-block-card:focus-within { border-color: var(--kz-border-strong); }
|
|
219
|
+
.kz-block-card:is(:focus-visible, :has(:focus-visible)) {
|
|
220
|
+
outline: 2px solid var(--kz-ring, var(--kz-accent));
|
|
221
|
+
outline-offset: 2px;
|
|
222
|
+
}
|
|
223
|
+
/* The icon tile of a card: the hue around it, still. */
|
|
232
224
|
.kz-block-icon {
|
|
233
225
|
display: inline-flex;
|
|
234
226
|
align-items: center;
|
|
@@ -240,39 +232,8 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
|
|
|
240
232
|
color: var(--kz-text-primary);
|
|
241
233
|
background: color-mix(in srgb, var(--kz-hue, var(--kz-accent)) 14%, var(--kz-surface-1));
|
|
242
234
|
border: 1px solid color-mix(in srgb, var(--kz-hue, var(--kz-accent)) 30%, transparent);
|
|
243
|
-
transition: transform 0.3s var(--kz-ease, ease), box-shadow 0.3s var(--kz-ease, ease);
|
|
244
|
-
}
|
|
245
|
-
.kz-block-card :is(.kz-block-icon) svg [data-node] { transition: transform 0.3s var(--kz-ease, ease), filter 0.3s; transform-box: fill-box; transform-origin: center; }
|
|
246
|
-
.kz-block-card:is(:hover, :focus-within, :focus-visible) .kz-block-icon svg [data-node] { transform: scale(1.5); filter: drop-shadow(0 0 3px var(--kz-hue, var(--kz-accent))); }
|
|
247
|
-
@media (hover: hover) {
|
|
248
|
-
.kz-block-card:hover .kz-block-icon { transform: translateY(-2px) rotate(-3deg); box-shadow: 0 10px 22px -12px var(--kz-hue, var(--kz-accent)); }
|
|
249
235
|
}
|
|
250
236
|
|
|
251
|
-
/* The quiet hover (`hover="quiet"` on a card, or on CardGrid for the whole grid; a card's own `hover="light"` wins over
|
|
252
|
-
its grid): no glow, no halo, no accent border or title. The card lifts 2 px, its surface and hairline go one step up,
|
|
253
|
-
the title leans towards the accent text, and the focus is a ring on the whole card. Reduced motion: no lift. */
|
|
254
|
-
:is(.kz-block-card.kz-hover-quiet, .kz-cards.kz-hover-quiet .kz-block-card:not(.kz-hover-light))::after { display: none; }
|
|
255
|
-
:is(.kz-block-card.kz-hover-quiet, .kz-cards.kz-hover-quiet .kz-block-card:not(.kz-hover-light)) {
|
|
256
|
-
transition: transform 0.3s var(--kz-ease, ease), background-color 0.3s var(--kz-ease, ease), border-color 0.3s var(--kz-ease, ease);
|
|
257
|
-
}
|
|
258
|
-
:is(.kz-block-card.kz-hover-quiet, .kz-cards.kz-hover-quiet .kz-block-card:not(.kz-hover-light)):is(:hover, :focus-within, :focus-visible) .kz-block-icon svg [data-node] { transform: none; filter: none; }
|
|
259
|
-
@media (hover: hover) {
|
|
260
|
-
:is(.kz-block-card.kz-hover-quiet, .kz-cards.kz-hover-quiet .kz-block-card:not(.kz-hover-light)):hover {
|
|
261
|
-
transform: translateY(-2px);
|
|
262
|
-
background: var(--kz-surface-2);
|
|
263
|
-
border-color: var(--kz-border-strong);
|
|
264
|
-
box-shadow: none;
|
|
265
|
-
}
|
|
266
|
-
:is(.kz-block-card.kz-hover-quiet, .kz-cards.kz-hover-quiet .kz-block-card:not(.kz-hover-light)):hover .kz-block-icon { transform: none; box-shadow: none; }
|
|
267
|
-
:is(.kz-block-card.kz-hover-quiet, .kz-cards.kz-hover-quiet .kz-block-card:not(.kz-hover-light)):hover :is(.kz-link-card-title, .kz-arg-title) { color: color-mix(in srgb, var(--kz-text-primary) 72%, var(--kz-hue-text, var(--kz-accent-text))); }
|
|
268
|
-
}
|
|
269
|
-
:is(.kz-block-card.kz-hover-quiet, .kz-cards.kz-hover-quiet .kz-block-card:not(.kz-hover-light)):is(:focus-within, :focus-visible) :is(.kz-link-card-title, .kz-arg-title) { color: color-mix(in srgb, var(--kz-text-primary) 72%, var(--kz-hue-text, var(--kz-accent-text))); }
|
|
270
|
-
:is(.kz-block-card.kz-hover-quiet, .kz-cards.kz-hover-quiet .kz-block-card:not(.kz-hover-light)):is(:focus-visible, :has(:focus-visible)) {
|
|
271
|
-
outline: 2px solid var(--kz-ring, var(--kz-accent));
|
|
272
|
-
outline-offset: 2px;
|
|
273
|
-
}
|
|
274
|
-
:is(.kz-block-card.kz-hover-quiet, .kz-cards.kz-hover-quiet .kz-block-card:not(.kz-hover-light)):is(:focus-within, :focus-visible) { border-color: var(--kz-border-strong); }
|
|
275
|
-
|
|
276
237
|
/* ─── LinkCard: the whole card is the link — icon, title, one sentence, the way in ─── */
|
|
277
238
|
.kz-link-card {
|
|
278
239
|
display: grid;
|
|
@@ -358,8 +319,7 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
|
|
|
358
319
|
gap: 8px;
|
|
359
320
|
min-height: 32px;
|
|
360
321
|
padding: 4px 12px;
|
|
361
|
-
border-radius:
|
|
362
|
-
corner-shape: bevel; /* the Krizaka chamfer, like Button shape="cut" */
|
|
322
|
+
border-radius: 8px;
|
|
363
323
|
font-size: 13px;
|
|
364
324
|
font-weight: 650;
|
|
365
325
|
line-height: 1.25;
|
|
@@ -618,9 +578,8 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
|
|
|
618
578
|
}
|
|
619
579
|
|
|
620
580
|
@media (prefers-reduced-motion: reduce) {
|
|
621
|
-
.kz-block-card, .kz-
|
|
622
|
-
.kz-
|
|
623
|
-
:is(.kz-block-card.kz-hover-quiet, .kz-cards.kz-hover-quiet .kz-block-card:not(.kz-hover-light)):hover { transform: none !important; }
|
|
581
|
+
.kz-block-card, .kz-link-card-cta svg, .kz-arg-more svg, .kz-arg-panel > summary svg, .kz-actions [data-tip]::after { transition: none !important; }
|
|
582
|
+
.kz-link-card:hover .kz-link-card-cta svg, .kz-arg-more:hover svg { transform: none !important; }
|
|
624
583
|
.kz-quote-bird { animation: none !important; }
|
|
625
584
|
}
|
|
626
585
|
|
|
@@ -713,8 +672,8 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
|
|
|
713
672
|
.kz-tpl-collection ul a:hover { border-color: var(--kz-accent); }
|
|
714
673
|
.kz-tpl-collection ul a:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); outline-offset: 2px; }
|
|
715
674
|
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
|
|
716
|
-
.kz-tpl-collection { transition:
|
|
717
|
-
.kz-tpl-collection:hover {
|
|
675
|
+
.kz-tpl-collection { transition: border-color 150ms var(--kz-ease, ease); }
|
|
676
|
+
.kz-tpl-collection:hover { border-color: var(--kz-border-strong); }
|
|
718
677
|
}
|
|
719
678
|
.kz-tpl-two { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 28px; }
|
|
720
679
|
@media (max-width: 900px) { .kz-tpl-two { grid-template-columns: minmax(0, 1fr); } }
|
|
@@ -18,9 +18,9 @@ declare const buttonVariants: tailwind_variants.TVReturnType<{
|
|
|
18
18
|
readonly icon: "h-10 w-10";
|
|
19
19
|
};
|
|
20
20
|
readonly shape: {
|
|
21
|
-
readonly rounded: "rounded-
|
|
21
|
+
readonly rounded: "rounded-sm";
|
|
22
22
|
readonly pill: "rounded-full";
|
|
23
|
-
readonly cut: "rounded-
|
|
23
|
+
readonly cut: "rounded-sm";
|
|
24
24
|
};
|
|
25
25
|
}, undefined, string, {
|
|
26
26
|
readonly variant: {
|
|
@@ -38,9 +38,9 @@ declare const buttonVariants: tailwind_variants.TVReturnType<{
|
|
|
38
38
|
readonly icon: "h-10 w-10";
|
|
39
39
|
};
|
|
40
40
|
readonly shape: {
|
|
41
|
-
readonly rounded: "rounded-
|
|
41
|
+
readonly rounded: "rounded-sm";
|
|
42
42
|
readonly pill: "rounded-full";
|
|
43
|
-
readonly cut: "rounded-
|
|
43
|
+
readonly cut: "rounded-sm";
|
|
44
44
|
};
|
|
45
45
|
}, undefined, tailwind_variants.TVReturnTypeLike<{
|
|
46
46
|
readonly variant: {
|
|
@@ -58,9 +58,9 @@ declare const buttonVariants: tailwind_variants.TVReturnType<{
|
|
|
58
58
|
readonly icon: "h-10 w-10";
|
|
59
59
|
};
|
|
60
60
|
readonly shape: {
|
|
61
|
-
readonly rounded: "rounded-
|
|
61
|
+
readonly rounded: "rounded-sm";
|
|
62
62
|
readonly pill: "rounded-full";
|
|
63
|
-
readonly cut: "rounded-
|
|
63
|
+
readonly cut: "rounded-sm";
|
|
64
64
|
};
|
|
65
65
|
}, undefined>>;
|
|
66
66
|
type ButtonVariants = VariantProps<typeof buttonVariants>;
|
|
@@ -77,7 +77,8 @@ type ButtonProps = React.ComponentProps<"button"> & ButtonVariants & {
|
|
|
77
77
|
*/
|
|
78
78
|
size?: ButtonVariants["size"];
|
|
79
79
|
/**
|
|
80
|
-
* rounded · pill
|
|
80
|
+
* `rounded` (an 8 px radius, the radius of a field) · `pill`. `cut` is deprecated (krizaka-ui#393: the chamfer is
|
|
81
|
+
* retired) — it draws `rounded` and warns in development; it will be removed in 4.0.
|
|
81
82
|
* @default "rounded"
|
|
82
83
|
*/
|
|
83
84
|
shape?: ButtonVariants["shape"];
|
|
@@ -105,9 +106,9 @@ type ButtonProps = React.ComponentProps<"button"> & ButtonVariants & {
|
|
|
105
106
|
* @default true
|
|
106
107
|
*/
|
|
107
108
|
indicator?: boolean;
|
|
108
|
-
/**
|
|
109
|
+
/** @deprecated Since 3.31 (krizaka-ui#393): does nothing — the hover is quiet. Removed in 4.0. */
|
|
109
110
|
shimmer?: boolean;
|
|
110
|
-
/**
|
|
111
|
+
/** @deprecated Since 3.31 (krizaka-ui#393): does nothing — a button never moves under the pointer. Removed in 4.0. */
|
|
111
112
|
magnetic?: boolean;
|
|
112
113
|
};
|
|
113
114
|
|
package/dist/button.d.ts
CHANGED
|
@@ -18,9 +18,9 @@ declare const buttonVariants: tailwind_variants.TVReturnType<{
|
|
|
18
18
|
readonly icon: "h-10 w-10";
|
|
19
19
|
};
|
|
20
20
|
readonly shape: {
|
|
21
|
-
readonly rounded: "rounded-
|
|
21
|
+
readonly rounded: "rounded-sm";
|
|
22
22
|
readonly pill: "rounded-full";
|
|
23
|
-
readonly cut: "rounded-
|
|
23
|
+
readonly cut: "rounded-sm";
|
|
24
24
|
};
|
|
25
25
|
}, undefined, string, {
|
|
26
26
|
readonly variant: {
|
|
@@ -38,9 +38,9 @@ declare const buttonVariants: tailwind_variants.TVReturnType<{
|
|
|
38
38
|
readonly icon: "h-10 w-10";
|
|
39
39
|
};
|
|
40
40
|
readonly shape: {
|
|
41
|
-
readonly rounded: "rounded-
|
|
41
|
+
readonly rounded: "rounded-sm";
|
|
42
42
|
readonly pill: "rounded-full";
|
|
43
|
-
readonly cut: "rounded-
|
|
43
|
+
readonly cut: "rounded-sm";
|
|
44
44
|
};
|
|
45
45
|
}, undefined, tailwind_variants.TVReturnTypeLike<{
|
|
46
46
|
readonly variant: {
|
|
@@ -58,9 +58,9 @@ declare const buttonVariants: tailwind_variants.TVReturnType<{
|
|
|
58
58
|
readonly icon: "h-10 w-10";
|
|
59
59
|
};
|
|
60
60
|
readonly shape: {
|
|
61
|
-
readonly rounded: "rounded-
|
|
61
|
+
readonly rounded: "rounded-sm";
|
|
62
62
|
readonly pill: "rounded-full";
|
|
63
|
-
readonly cut: "rounded-
|
|
63
|
+
readonly cut: "rounded-sm";
|
|
64
64
|
};
|
|
65
65
|
}, undefined>>;
|
|
66
66
|
type ButtonVariants = VariantProps<typeof buttonVariants>;
|
|
@@ -77,7 +77,8 @@ type ButtonProps = React.ComponentProps<"button"> & ButtonVariants & {
|
|
|
77
77
|
*/
|
|
78
78
|
size?: ButtonVariants["size"];
|
|
79
79
|
/**
|
|
80
|
-
* rounded · pill
|
|
80
|
+
* `rounded` (an 8 px radius, the radius of a field) · `pill`. `cut` is deprecated (krizaka-ui#393: the chamfer is
|
|
81
|
+
* retired) — it draws `rounded` and warns in development; it will be removed in 4.0.
|
|
81
82
|
* @default "rounded"
|
|
82
83
|
*/
|
|
83
84
|
shape?: ButtonVariants["shape"];
|
|
@@ -105,12 +106,12 @@ type ButtonProps = React.ComponentProps<"button"> & ButtonVariants & {
|
|
|
105
106
|
* @default true
|
|
106
107
|
*/
|
|
107
108
|
indicator?: boolean;
|
|
108
|
-
/**
|
|
109
|
+
/** @deprecated Since 3.31 (krizaka-ui#393): does nothing — the hover is quiet. Removed in 4.0. */
|
|
109
110
|
shimmer?: boolean;
|
|
110
|
-
/**
|
|
111
|
+
/** @deprecated Since 3.31 (krizaka-ui#393): does nothing — a button never moves under the pointer. Removed in 4.0. */
|
|
111
112
|
magnetic?: boolean;
|
|
112
113
|
};
|
|
113
|
-
declare function Button({ asChild, loading, progress, status, announce, indicator, shimmer, magnetic, variant, size, shape, className, disabled, children, ...props }: ButtonProps): React.JSX.Element;
|
|
114
|
+
declare function Button({ asChild, loading, progress, status, announce, indicator, shimmer: _shimmer, magnetic: _magnetic, variant, size, shape, className, disabled, children, ...props }: ButtonProps): React.JSX.Element;
|
|
114
115
|
type IconButtonProps = Omit<ButtonProps, "size"> & {
|
|
115
116
|
/** The accessible name (and tooltip) of the button — required, passed translated. */
|
|
116
117
|
label: string;
|
package/dist/button.js
CHANGED
package/dist/captcha.js
CHANGED
package/dist/card-grid.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
|
|
3
|
-
/**
|
|
3
|
+
/** @deprecated Since 3.31 (krizaka-ui#393): a card has one quiet hover; the values are accepted and ignored. */
|
|
4
4
|
type CardHover = "light" | "quiet";
|
|
5
5
|
|
|
6
6
|
type CardGridProps = Omit<React.HTMLAttributes<HTMLElement>, "children"> & {
|
|
@@ -31,10 +31,7 @@ type CardGridProps = Omit<React.HTMLAttributes<HTMLElement>, "children"> & {
|
|
|
31
31
|
* @default 3
|
|
32
32
|
*/
|
|
33
33
|
columns?: number;
|
|
34
|
-
/**
|
|
35
|
-
* The light that follows the pointer over the cards (`[data-kz-light]`).
|
|
36
|
-
* @default true
|
|
37
|
-
*/
|
|
34
|
+
/** @deprecated Since 3.31 (krizaka-ui#393): does nothing — no light follows the pointer. Removed in 4.0. */
|
|
38
35
|
light?: boolean;
|
|
39
36
|
/** `ul` when the cards are a list (each cell an `li`). */
|
|
40
37
|
as?: "div" | "ul" | "ol";
|
|
@@ -51,14 +48,10 @@ type CardGridProps = Omit<React.HTMLAttributes<HTMLElement>, "children"> & {
|
|
|
51
48
|
foundationPosition?: "start" | "end";
|
|
52
49
|
/** A short mono label on the frame's edge, naming the relation (`Powered by Orazaka`). Only with `foundation`. */
|
|
53
50
|
foundationLabel?: React.ReactNode;
|
|
54
|
-
/**
|
|
55
|
-
* The hover of every card of the grid: `light` (the pointer's light, the default) or `quiet` (no glow, a 2 px lift, a
|
|
56
|
-
* ring on focus). A card that sets its own `hover` keeps it.
|
|
57
|
-
* @default "light"
|
|
58
|
-
*/
|
|
51
|
+
/** @deprecated Since 3.31 (krizaka-ui#393): does nothing — every card has the one quiet hover. Removed in 4.0. */
|
|
59
52
|
hover?: CardHover;
|
|
60
53
|
};
|
|
61
|
-
/** A responsive grid of cards: equal rows, a staggered reveal
|
|
62
|
-
declare function CardGrid({ children, min, fit, align, reveal, columns, light, as: Tag, foundation, foundationPosition, foundationLabel, hover, className, style, ...props }: CardGridProps): React.JSX.Element;
|
|
54
|
+
/** A responsive grid of cards: equal rows, a staggered reveal. */
|
|
55
|
+
declare function CardGrid({ children, min, fit, align, reveal, columns, light: _light, as: Tag, foundation, foundationPosition, foundationLabel, hover: _hover, className, style, ...props }: CardGridProps): React.JSX.Element;
|
|
63
56
|
|
|
64
57
|
export { CardGrid, type CardGridProps };
|
package/dist/card-grid.js
CHANGED
|
@@ -1,8 +1,4 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import {
|
|
3
|
-
POINTER_LIGHT_TARGET,
|
|
4
|
-
usePointerLight
|
|
5
|
-
} from "./chunk-AB5D3KBG.js";
|
|
6
2
|
import {
|
|
7
3
|
cn
|
|
8
4
|
} from "./chunk-WU4VLSEA.js";
|
|
@@ -18,24 +14,21 @@ function CardGrid({
|
|
|
18
14
|
align = "stretch",
|
|
19
15
|
reveal = true,
|
|
20
16
|
columns = 3,
|
|
21
|
-
light
|
|
17
|
+
light: _light,
|
|
22
18
|
as: Tag = "div",
|
|
23
19
|
foundation,
|
|
24
20
|
foundationPosition = "start",
|
|
25
21
|
foundationLabel,
|
|
26
|
-
hover
|
|
22
|
+
hover: _hover,
|
|
27
23
|
className,
|
|
28
24
|
style,
|
|
29
25
|
...props
|
|
30
26
|
}) {
|
|
31
|
-
const ref = React.useRef(null);
|
|
32
|
-
usePointerLight(light ? ref : NO_REF, POINTER_LIGHT_TARGET);
|
|
33
27
|
const Cell = Tag === "div" ? "div" : "li";
|
|
34
28
|
const grid = /* @__PURE__ */ jsx(
|
|
35
29
|
Tag,
|
|
36
30
|
{
|
|
37
|
-
|
|
38
|
-
className: cn("kz-cards", hover === "quiet" && "kz-hover-quiet", !foundation && className),
|
|
31
|
+
className: cn("kz-cards", !foundation && className),
|
|
39
32
|
"data-fit": fit === "fit" ? "" : void 0,
|
|
40
33
|
"data-align": align === "start" ? "start" : void 0,
|
|
41
34
|
style: { "--kz-cards-min": `${min}px`, ...foundation ? null : style },
|
|
@@ -56,7 +49,7 @@ function CardGrid({
|
|
|
56
49
|
}
|
|
57
50
|
);
|
|
58
51
|
if (!foundation) return grid;
|
|
59
|
-
return /* @__PURE__ */ jsxs("div", {
|
|
52
|
+
return /* @__PURE__ */ jsxs("div", { className: cn("kz-foundation", className), "data-position": foundationPosition, style, children: [
|
|
60
53
|
/* @__PURE__ */ jsx("div", { className: "kz-foundation-base", "data-reveal": reveal ? "" : void 0, children: foundation }),
|
|
61
54
|
/* @__PURE__ */ jsxs("div", { className: "kz-foundation-group", children: [
|
|
62
55
|
foundationLabel && /* @__PURE__ */ jsx("span", { className: "kz-foundation-label", children: foundationLabel }),
|
|
@@ -64,7 +57,6 @@ function CardGrid({
|
|
|
64
57
|
] })
|
|
65
58
|
] });
|
|
66
59
|
}
|
|
67
|
-
var NO_REF = { current: null };
|
|
68
60
|
export {
|
|
69
61
|
CardGrid
|
|
70
62
|
};
|
package/dist/card-grid.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/card-grid/card-grid.tsx"],"sourcesContent":["//
|
|
1
|
+
{"version":3,"sources":["../src/card-grid/card-grid.tsx"],"sourcesContent":["// A responsive grid of cards (blocks.css): one column on a phone, the cells of a row share their height, each card rises\n// once as it enters the viewport — staggered by column. The hover is the cards' own quiet one (krizaka-ui#393).\nimport * as React from \"react\";\n\nimport { cn } from \"../cn\";\nimport type { CardHover } from \"../link-card/link-card\";\n\nconst STEP_MS = 70;\n\nexport type CardGridProps = Omit<React.HTMLAttributes<HTMLElement>, \"children\"> & {\n /** The cards: one cell each. */\n children: React.ReactNode;\n /**\n * The narrowest a column may be, in pixels: the grid fits as many columns as the width allows.\n * @default 300\n */\n min?: number;\n /**\n * `fill` keeps empty tracks (a lone card keeps its width); `fit` stretches the cards of a short row across the width.\n * @default \"fill\"\n */\n fit?: \"fill\" | \"fit\";\n /**\n * `stretch` gives the cells of a row one height; `start` lets each card keep its own (cards that open a panel).\n * @default \"stretch\"\n */\n align?: \"stretch\" | \"start\";\n /**\n * The cards rise once into place (`[data-reveal]`, MotionObserver), staggered by column. `false` on the first screen.\n * @default true\n */\n reveal?: boolean;\n /**\n * The columns the stagger counts (the delay restarts on every row).\n * @default 3\n */\n columns?: number;\n /** @deprecated Since 3.31 (krizaka-ui#393): does nothing — no light follows the pointer. Removed in 4.0. */\n light?: boolean;\n /** `ul` when the cards are a list (each cell an `li`). */\n as?: \"div\" | \"ul\" | \"ol\";\n /**\n * A foundation: one wide card that the cards of the grid stand on (an engine, a platform, a shared service). It spans\n * the full width beside the grid, and a hairline joins it to a frame around the cards — \"everything inside runs on it\".\n * The frame takes the hue of `className` (a `data-hue` or a brand class on the grid sets it for the whole block).\n */\n foundation?: React.ReactNode;\n /**\n * Where the foundation sits: above the cards, or under them.\n * @default \"start\"\n */\n foundationPosition?: \"start\" | \"end\";\n /** A short mono label on the frame's edge, naming the relation (`Powered by Orazaka`). Only with `foundation`. */\n foundationLabel?: React.ReactNode;\n /** @deprecated Since 3.31 (krizaka-ui#393): does nothing — every card has the one quiet hover. Removed in 4.0. */\n hover?: CardHover;\n};\n\n/** A responsive grid of cards: equal rows, a staggered reveal. */\nexport function CardGrid({\n children,\n min = 300,\n fit = \"fill\",\n align = \"stretch\",\n reveal = true,\n columns = 3,\n light: _light,\n as: Tag = \"div\",\n foundation,\n foundationPosition = \"start\",\n foundationLabel,\n hover: _hover,\n className,\n style,\n ...props\n}: CardGridProps) {\n const Cell = Tag === \"div\" ? \"div\" : \"li\";\n const grid = (\n <Tag\n className={cn(\"kz-cards\", !foundation && className)}\n data-fit={fit === \"fit\" ? \"\" : undefined}\n data-align={align === \"start\" ? \"start\" : undefined}\n style={{ \"--kz-cards-min\": `${min}px`, ...(foundation ? null : style) } as React.CSSProperties}\n {...props}\n >\n {React.Children.toArray(children).map((child, i) => {\n const step = Math.min(i % Math.max(columns, 1), 5);\n return (\n <Cell\n key={React.isValidElement(child) && child.key != null ? child.key : i}\n className=\"kz-cards-cell\"\n data-reveal={reveal ? \"\" : undefined}\n style={reveal && step ? ({ \"--kz-delay\": `${step * STEP_MS}ms` } as React.CSSProperties) : undefined}\n >\n {child}\n </Cell>\n );\n })}\n </Tag>\n );\n if (!foundation) return grid;\n return (\n <div className={cn(\"kz-foundation\", className)} data-position={foundationPosition} style={style}>\n <div className=\"kz-foundation-base\" data-reveal={reveal ? \"\" : undefined}>\n {foundation}\n </div>\n <div className=\"kz-foundation-group\">\n {foundationLabel && <span className=\"kz-foundation-label\">{foundationLabel}</span>}\n {grid}\n </div>\n </div>\n );\n}\n\n"],"mappings":";;;;;;AAEA,YAAY,WAAW;AAsFb,cAkBJ,YAlBI;AAjFV,IAAM,UAAU;AAoDT,SAAS,SAAS;AAAA,EACvB;AAAA,EACA,MAAM;AAAA,EACN,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,UAAU;AAAA,EACV,OAAO;AAAA,EACP,IAAI,MAAM;AAAA,EACV;AAAA,EACA,qBAAqB;AAAA,EACrB;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAkB;AAChB,QAAM,OAAO,QAAQ,QAAQ,QAAQ;AACrC,QAAM,OACJ;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,YAAY,CAAC,cAAc,SAAS;AAAA,MAClD,YAAU,QAAQ,QAAQ,KAAK;AAAA,MAC/B,cAAY,UAAU,UAAU,UAAU;AAAA,MAC1C,OAAO,EAAE,kBAAkB,GAAG,GAAG,MAAM,GAAI,aAAa,OAAO,MAAO;AAAA,MACrE,GAAG;AAAA,MAEH,UAAM,eAAS,QAAQ,QAAQ,EAAE,IAAI,CAAC,OAAO,MAAM;AAClD,cAAM,OAAO,KAAK,IAAI,IAAI,KAAK,IAAI,SAAS,CAAC,GAAG,CAAC;AACjD,eACE;AAAA,UAAC;AAAA;AAAA,YAEC,WAAU;AAAA,YACV,eAAa,SAAS,KAAK;AAAA,YAC3B,OAAO,UAAU,OAAQ,EAAE,cAAc,GAAG,OAAO,OAAO,KAAK,IAA4B;AAAA,YAE1F;AAAA;AAAA,UALU,qBAAe,KAAK,KAAK,MAAM,OAAO,OAAO,MAAM,MAAM;AAAA,QAMtE;AAAA,MAEJ,CAAC;AAAA;AAAA,EACH;AAEF,MAAI,CAAC,WAAY,QAAO;AACxB,SACE,qBAAC,SAAI,WAAW,GAAG,iBAAiB,SAAS,GAAG,iBAAe,oBAAoB,OACjF;AAAA,wBAAC,SAAI,WAAU,sBAAqB,eAAa,SAAS,KAAK,QAC5D,sBACH;AAAA,IACA,qBAAC,SAAI,WAAU,uBACZ;AAAA,yBAAmB,oBAAC,UAAK,WAAU,uBAAuB,2BAAgB;AAAA,MAC1E;AAAA,OACH;AAAA,KACF;AAEJ;","names":[]}
|