@krizaka/ui 3.37.0 → 3.38.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/dist/blocks.css +30 -30
- package/dist/landing-page.js +1 -6
- package/dist/landing-page.js.map +1 -1
- package/dist/motion.css +2 -2
- package/dist/product-page.js +1 -6
- package/dist/product-page.js.map +1 -1
- package/package.json +4 -4
- package/registry/index.json +5 -5
- package/registry/landing-page.json +1 -1
- package/registry/map.json +1 -1
- package/registry/nav-bar.json +1 -1
- package/registry/product-page.json +1 -1
- package/registry/rail-nav.json +1 -1
- package/registry/site-footer.json +1 -1
package/dist/blocks.css
CHANGED
|
@@ -228,12 +228,12 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
|
|
|
228
228
|
.kz-foundation { --kz-rail: color-mix(in srgb, var(--kz-hue, var(--kz-accent)) 50%, var(--kz-border-default)); display: grid; }
|
|
229
229
|
.kz-foundation-base { position: relative; display: grid; min-width: 0; }
|
|
230
230
|
.kz-foundation-base::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 28px; background: var(--kz-rail); }
|
|
231
|
-
.kz-foundation-group { position: relative; margin-top: 28px; padding: 22px 14px 14px; border: 1px solid var(--kz-rail); border-radius:
|
|
231
|
+
.kz-foundation-group { position: relative; margin-top: 28px; padding: 22px 14px 14px; border: 1px solid var(--kz-rail); border-radius: 0; }
|
|
232
232
|
.kz-foundation-label { position: absolute; top: -9px; left: 22px; padding: 0 8px; font: 500 11px/18px var(--kz-font-mono, ui-monospace, monospace); letter-spacing: 0; text-transform: none; color: var(--kz-hue-text, var(--kz-accent-text)); background: var(--kz-surface-0); }
|
|
233
233
|
.kz-foundation[data-position="end"] .kz-foundation-base { order: 2; }
|
|
234
234
|
.kz-foundation[data-position="end"] .kz-foundation-group { order: 1; margin-top: 0; margin-bottom: 28px; }
|
|
235
235
|
.kz-foundation[data-position="end"] .kz-foundation-base::after { top: auto; bottom: 100%; }
|
|
236
|
-
@media (max-width: 640px) { .kz-foundation-group { padding: 20px 8px 8px; border-radius:
|
|
236
|
+
@media (max-width: 640px) { .kz-foundation-group { padding: 20px 8px 8px; border-radius: 0; } }
|
|
237
237
|
|
|
238
238
|
/* The shared surface of the cards: a rail of the hue along the top, and one quiet hover (krizaka-ui#393) — the surface
|
|
239
239
|
goes one step up and the hairline strengthens, in a short colour transition. Nothing moves, nothing follows the
|
|
@@ -242,7 +242,7 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
|
|
|
242
242
|
position: relative;
|
|
243
243
|
isolation: isolate;
|
|
244
244
|
overflow: hidden;
|
|
245
|
-
border-radius:
|
|
245
|
+
border-radius: 0;
|
|
246
246
|
background: var(--kz-surface-1);
|
|
247
247
|
border: 1px solid var(--kz-border-default);
|
|
248
248
|
transition: background-color 150ms var(--kz-ease, ease), border-color 150ms var(--kz-ease, ease);
|
|
@@ -275,7 +275,7 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
|
|
|
275
275
|
flex-shrink: 0;
|
|
276
276
|
width: 42px;
|
|
277
277
|
height: 42px;
|
|
278
|
-
border-radius:
|
|
278
|
+
border-radius: 0;
|
|
279
279
|
color: var(--kz-text-primary);
|
|
280
280
|
background: color-mix(in srgb, var(--kz-hue, var(--kz-accent)) 14%, var(--kz-surface-1));
|
|
281
281
|
border: 1px solid color-mix(in srgb, var(--kz-hue, var(--kz-accent)) 30%, transparent);
|
|
@@ -388,7 +388,7 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
|
|
|
388
388
|
position: relative;
|
|
389
389
|
margin: 0;
|
|
390
390
|
padding: 14px 16px 14px 44px;
|
|
391
|
-
border-radius:
|
|
391
|
+
border-radius: 0 16px 16px 6px;
|
|
392
392
|
background: color-mix(in srgb, var(--kz-hue, var(--kz-accent)) 9%, var(--kz-surface-0));
|
|
393
393
|
border: 1px solid color-mix(in srgb, var(--kz-hue, var(--kz-accent)) 30%, transparent);
|
|
394
394
|
}
|
|
@@ -428,7 +428,7 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
|
|
|
428
428
|
color: var(--kz-hue-text, var(--kz-accent-text));
|
|
429
429
|
}
|
|
430
430
|
.kz-quote-bird { flex-shrink: 0; --kz-accent: var(--kz-hue, var(--kz-accent)); }
|
|
431
|
-
.kz-quote[data-variant="callout"] blockquote { padding: 24px 26px 24px 68px; border-radius:
|
|
431
|
+
.kz-quote[data-variant="callout"] blockquote { padding: 24px 26px 24px 68px; border-radius: 0 22px 22px 8px; }
|
|
432
432
|
.kz-quote[data-variant="callout"] blockquote::before { left: 18px; top: 12px; font-size: 72px; }
|
|
433
433
|
.kz-quote[data-variant="callout"] blockquote::after { left: 36px; bottom: -8px; width: 14px; height: 14px; }
|
|
434
434
|
.kz-quote[data-variant="callout"] blockquote p { font-family: var(--kz-font-display); font-size: clamp(16px, 2vw, 19px); font-weight: 400; line-height: 1.55; letter-spacing: -0.01em; }
|
|
@@ -445,14 +445,14 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
|
|
|
445
445
|
|
|
446
446
|
/* ─── DecisionList: one card per decision — what was chosen, large; refused · because · what it costs, side by side ─── */
|
|
447
447
|
.kz-decisions { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
|
|
448
|
-
.kz-decision { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; padding: 20px 22px; border-radius:
|
|
448
|
+
.kz-decision { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; padding: 20px 22px; border-radius: 0; background: var(--kz-surface-1); border: 1px solid var(--kz-border-default); }
|
|
449
449
|
.kz-decision-n { font-family: var(--kz-font-display); font-size: 28px; font-weight: 400; line-height: 1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--kz-hue-text, var(--kz-accent-text)); }
|
|
450
450
|
.kz-decision-body { display: grid; gap: 14px; min-width: 0; }
|
|
451
451
|
.kz-decision-part p:not(.kz-label) { margin: 6px 0 0; font-size: 14px; line-height: 1.6; color: var(--kz-text-secondary); }
|
|
452
452
|
.kz-decision-part[data-part="chose"] .kz-label { color: var(--kz-success-text); }
|
|
453
453
|
.kz-decision-part[data-part="chose"] p:not(.kz-label) { font-size: 16px; font-weight: 600; line-height: 1.5; color: var(--kz-text-primary); }
|
|
454
454
|
.kz-decision-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
|
|
455
|
-
.kz-decision-grid > .kz-decision-part { min-width: 0; padding: 12px 14px; border-radius:
|
|
455
|
+
.kz-decision-grid > .kz-decision-part { min-width: 0; padding: 12px 14px; border-radius: 0; background: var(--kz-surface-0); border: 1px solid var(--kz-border-subtle); border-top: 2px solid var(--kz-border-strong); }
|
|
456
456
|
.kz-decision-part[data-part="refused"] { border-top-color: var(--kz-danger); }
|
|
457
457
|
.kz-decision-part[data-part="refused"] .kz-label { color: var(--kz-danger-text); }
|
|
458
458
|
.kz-decision-part[data-part="because"] { border-top-color: var(--kz-hue, var(--kz-accent)); }
|
|
@@ -463,7 +463,7 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
|
|
|
463
463
|
@media (max-width: 560px) { .kz-decision { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 18px; } .kz-decision-n { font-size: 22px; } }
|
|
464
464
|
|
|
465
465
|
/* ─── CodeBlock · CodeTabs: a file name, code that scrolls sideways (never shrinks), a copy button ─── */
|
|
466
|
-
.kz-code { margin: 0; min-width: 0; overflow: hidden; border-radius:
|
|
466
|
+
.kz-code { margin: 0; min-width: 0; overflow: hidden; border-radius: 0; background: var(--kz-surface-1); border: 1px solid var(--kz-border-default); box-shadow: inset 3px 0 0 var(--kz-hue, var(--kz-accent)); }
|
|
467
467
|
.kz-code-bar {
|
|
468
468
|
display: flex;
|
|
469
469
|
align-items: center;
|
|
@@ -523,7 +523,7 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
|
|
|
523
523
|
.kz-md blockquote { padding-inline-start: 1em; color: var(--kz-text-secondary); border-inline-start: 3px solid var(--kz-hue, var(--kz-accent)); }
|
|
524
524
|
.kz-md :not(pre) > code { padding: 0.12em 0.4em; border-radius: 6px; font-family: var(--kz-font-mono); font-size: 0.88em; background: var(--kz-surface-3); }
|
|
525
525
|
.kz-md hr { border: 0; border-top: 1px solid var(--kz-border-default); }
|
|
526
|
-
.kz-md img { max-width: 100%; height: auto; border-radius:
|
|
526
|
+
.kz-md img { max-width: 100%; height: auto; border-radius: 0; }
|
|
527
527
|
.kz-md-table { overflow-x: auto; }
|
|
528
528
|
.kz-md-table table { width: 100%; border-collapse: collapse; font-size: 0.93em; }
|
|
529
529
|
.kz-md-table :is(th, td) { padding: 0.55em 0.8em; text-align: start; border-bottom: 1px solid var(--kz-border-subtle); }
|
|
@@ -594,7 +594,7 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
|
|
|
594
594
|
justify-content: space-between;
|
|
595
595
|
gap: 20px;
|
|
596
596
|
padding: 24px 26px;
|
|
597
|
-
border-radius:
|
|
597
|
+
border-radius: 0;
|
|
598
598
|
background: color-mix(in srgb, var(--kz-hue, var(--kz-accent)) 8%, var(--kz-surface-1));
|
|
599
599
|
border: 1px solid color-mix(in srgb, var(--kz-hue, var(--kz-accent)) 30%, var(--kz-border-default));
|
|
600
600
|
}
|
|
@@ -636,13 +636,13 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
|
|
|
636
636
|
.kz-tpl-split[data-reverse] > :first-child { order: 2; }
|
|
637
637
|
@media (max-width: 900px) { .kz-tpl-split { grid-template-columns: minmax(0, 1fr); } .kz-tpl-split[data-reverse] > :first-child { order: 0; } }
|
|
638
638
|
.kz-tpl-stage {
|
|
639
|
-
position: relative; min-width: 0; overflow: hidden; border-radius:
|
|
640
|
-
box-shadow:
|
|
639
|
+
position: relative; min-width: 0; overflow: hidden; border-radius: 0; border: 1px solid var(--kz-border-default); background: var(--kz-surface-1);
|
|
640
|
+
box-shadow: var(--kz-shadow-md);
|
|
641
641
|
}
|
|
642
642
|
.kz-tpl-stage-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 1px solid var(--kz-border-subtle); background: var(--kz-surface-2);
|
|
643
643
|
font-family: var(--kz-font-mono); font-size: 11px; color: var(--kz-text-secondary); }
|
|
644
|
-
.kz-tpl-stage-bar i {
|
|
645
|
-
.kz-tpl-stage-bar span { margin-left:
|
|
644
|
+
.kz-tpl-stage-bar i { display: none; } /* Cahier: no fake window controls — the bar is the plate's caption */
|
|
645
|
+
.kz-tpl-stage-bar span { margin-left: 0; }
|
|
646
646
|
.kz-tpl-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
|
|
647
647
|
|
|
648
648
|
/* A band of proofs: figures or facts across the frame, divided by hairlines. */
|
|
@@ -655,7 +655,7 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
|
|
|
655
655
|
|
|
656
656
|
/* A bento: features of different weights on a six-column grid (one column on a phone). */
|
|
657
657
|
.kz-tpl-bento { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
|
|
658
|
-
.kz-tpl-bento > li { grid-column: span 2; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 22px; border-radius:
|
|
658
|
+
.kz-tpl-bento > li { grid-column: span 2; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 22px; border-radius: 0;
|
|
659
659
|
background: var(--kz-surface-1); border: 1px solid var(--kz-border-default); }
|
|
660
660
|
.kz-tpl-bento > li[data-size="lg"] { grid-column: span 4; grid-row: span 2; background: color-mix(in srgb, var(--kz-hue, var(--kz-accent)) 7%, var(--kz-surface-1)); }
|
|
661
661
|
.kz-tpl-bento > li[data-size="md"] { grid-column: span 3; }
|
|
@@ -670,7 +670,7 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
|
|
|
670
670
|
.kz-tpl-timeline::before { content: ""; position: absolute; left: 21px; top: 8px; bottom: 8px; width: 2px;
|
|
671
671
|
background: linear-gradient(var(--kz-hue, var(--kz-accent)), color-mix(in srgb, var(--kz-hue, var(--kz-accent)) 10%, transparent)); }
|
|
672
672
|
.kz-tpl-step { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1fr); gap: 20px 28px; align-items: start; }
|
|
673
|
-
.kz-tpl-step-n { grid-column: 1; grid-row: 1; position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius:
|
|
673
|
+
.kz-tpl-step-n { grid-column: 1; grid-row: 1; position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 0;
|
|
674
674
|
font-family: var(--kz-font-display); font-size: 16px; font-weight: 400; color: var(--kz-text-primary); background: var(--kz-surface-1);
|
|
675
675
|
border: 2px solid var(--kz-hue, var(--kz-accent)); box-shadow: 0 0 0 6px var(--kz-surface-0); }
|
|
676
676
|
.kz-tpl-step :is(h2, h3) { margin: 6px 0 8px; font-family: var(--kz-font-display); font-size: clamp(1.15rem, 2.2vw, 1.4rem); font-weight: 400; color: var(--kz-text-primary); }
|
|
@@ -687,7 +687,7 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
|
|
|
687
687
|
/* A gallery: media in columns of different heights, the featured one wide. */
|
|
688
688
|
.kz-tpl-gallery { margin: 0; padding: 0; list-style: none; columns: 3 280px; column-gap: 14px; }
|
|
689
689
|
.kz-tpl-gallery > li { break-inside: avoid; margin-bottom: 14px; }
|
|
690
|
-
.kz-tpl-figure { margin: 0; overflow: hidden; border-radius:
|
|
690
|
+
.kz-tpl-figure { margin: 0; overflow: hidden; border-radius: 0; border: 1px solid var(--kz-border-default); background: var(--kz-surface-1); }
|
|
691
691
|
.kz-tpl-figure-media { overflow: hidden; background: var(--kz-media); }
|
|
692
692
|
.kz-tpl-figure-media > :is(img, video) { display: block; width: 100%; height: auto; }
|
|
693
693
|
.kz-tpl-figure figcaption { display: grid; gap: 4px; padding: 12px 14px; }
|
|
@@ -700,7 +700,7 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
|
|
|
700
700
|
.kz-tpl-hub-search > * { width: 100%; }
|
|
701
701
|
.kz-tpl-hub-hints { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; font-size: 13px; color: var(--kz-text-secondary); }
|
|
702
702
|
.kz-tpl-collections { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px; }
|
|
703
|
-
.kz-tpl-collection { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 12px; height: 100%; padding: 20px; border-radius:
|
|
703
|
+
.kz-tpl-collection { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 12px; height: 100%; padding: 20px; border-radius: 0;
|
|
704
704
|
background: linear-gradient(160deg, color-mix(in srgb, var(--kz-accent) 14%, var(--kz-surface-1)), var(--kz-surface-1) 55%);
|
|
705
705
|
border: 1px solid color-mix(in srgb, var(--kz-accent) 28%, var(--kz-border-default)); }
|
|
706
706
|
.kz-tpl-collection-head { display: flex; align-items: center; gap: 10px; }
|
|
@@ -743,7 +743,7 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
|
|
|
743
743
|
.kz-tpl-prose { max-width: 46rem; font-size: 16px; line-height: 1.75; color: var(--kz-text-secondary); }
|
|
744
744
|
.kz-tpl-prose :is(h2, h3) { color: var(--kz-text-primary); font-family: var(--kz-font-display); scroll-margin-top: var(--kz-anchor-offset, 96px); }
|
|
745
745
|
.kz-tpl-pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 40px; }
|
|
746
|
-
.kz-tpl-pager a { display: grid; gap: 4px; padding: 14px 16px; border-radius:
|
|
746
|
+
.kz-tpl-pager a { display: grid; gap: 4px; padding: 14px 16px; border-radius: 0; border: 1px solid var(--kz-border-default); background: var(--kz-surface-1);
|
|
747
747
|
text-decoration: none; color: var(--kz-text-primary); }
|
|
748
748
|
.kz-tpl-pager a:hover { border-color: var(--kz-accent); }
|
|
749
749
|
.kz-tpl-pager a:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); outline-offset: 2px; }
|
|
@@ -758,7 +758,7 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
|
|
|
758
758
|
.kz-tpl-count { margin: 0; font-family: var(--kz-font-mono); font-size: 12px; color: var(--kz-text-secondary); }
|
|
759
759
|
@media (max-width: 900px) {
|
|
760
760
|
.kz-tpl-catalogue { grid-template-columns: minmax(0, 1fr); gap: 16px; }
|
|
761
|
-
.kz-tpl-catalogue-filters { position: static; border-radius:
|
|
761
|
+
.kz-tpl-catalogue-filters { position: static; border-radius: 0; border: 1px solid var(--kz-border-default); background: var(--kz-surface-1); }
|
|
762
762
|
.kz-tpl-catalogue-filters > summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 14px; cursor: pointer; list-style: none;
|
|
763
763
|
font-size: 14px; font-weight: 650; color: var(--kz-text-primary); }
|
|
764
764
|
.kz-tpl-catalogue-filters > summary::-webkit-details-marker { display: none; }
|
|
@@ -766,7 +766,7 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
|
|
|
766
766
|
}
|
|
767
767
|
@media (max-width: 1279px) {
|
|
768
768
|
.kz-tpl-catalogue[data-rail="wide"] { grid-template-columns: minmax(0, 1fr); gap: 16px; }
|
|
769
|
-
.kz-tpl-catalogue[data-rail="wide"] .kz-tpl-catalogue-filters { position: static; border-radius:
|
|
769
|
+
.kz-tpl-catalogue[data-rail="wide"] .kz-tpl-catalogue-filters { position: static; border-radius: 0; border: 1px solid var(--kz-border-default); background: var(--kz-surface-1); }
|
|
770
770
|
.kz-tpl-catalogue[data-rail="wide"] .kz-tpl-catalogue-filters > summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 14px; cursor: pointer; list-style: none;
|
|
771
771
|
font-size: 14px; font-weight: 650; color: var(--kz-text-primary); }
|
|
772
772
|
.kz-tpl-catalogue[data-rail="wide"] .kz-tpl-catalogue-filters > summary::-webkit-details-marker { display: none; }
|
|
@@ -816,7 +816,7 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
|
|
|
816
816
|
/* Contact: the ways to reach us beside the form; what happens next under it. */
|
|
817
817
|
.kz-tpl-contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
|
|
818
818
|
@media (max-width: 900px) { .kz-tpl-contact { grid-template-columns: minmax(0, 1fr); } }
|
|
819
|
-
.kz-tpl-form { padding: clamp(18px, 3vw, 28px); border-radius:
|
|
819
|
+
.kz-tpl-form { padding: clamp(18px, 3vw, 28px); border-radius: 0; background: var(--kz-surface-1); border: 1px solid var(--kz-border-default); }
|
|
820
820
|
.kz-tpl-next { margin: 0; padding: 0; list-style: none; counter-reset: next; display: grid; gap: 12px; }
|
|
821
821
|
.kz-tpl-next li { counter-increment: next; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; font-size: 14px; line-height: 1.6; color: var(--kz-text-secondary); }
|
|
822
822
|
.kz-tpl-next li::before { content: counter(next); display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%;
|
|
@@ -824,7 +824,7 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
|
|
|
824
824
|
.kz-tpl-next strong { display: block; color: var(--kz-text-primary); }
|
|
825
825
|
|
|
826
826
|
/* Status: one line per service, its state in words and a dot; an incident log under it. */
|
|
827
|
-
.kz-tpl-state { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; padding: 18px 20px; border-radius:
|
|
827
|
+
.kz-tpl-state { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; padding: 18px 20px; border-radius: 0; border: 1px solid var(--kz-border-default);
|
|
828
828
|
background: var(--kz-surface-1); }
|
|
829
829
|
.kz-tpl-state[data-state="operational"] { border-color: color-mix(in srgb, var(--kz-success) 40%, var(--kz-border-default)); background: color-mix(in srgb, var(--kz-success) 7%, var(--kz-surface-1)); }
|
|
830
830
|
.kz-tpl-state[data-state="degraded"] { border-color: color-mix(in srgb, var(--kz-warning) 40%, var(--kz-border-default)); background: color-mix(in srgb, var(--kz-warning) 7%, var(--kz-surface-1)); }
|
|
@@ -835,7 +835,7 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
|
|
|
835
835
|
[data-state="degraded"] > .kz-tpl-dot, .kz-tpl-dot[data-state="degraded"] { background: var(--kz-warning); }
|
|
836
836
|
[data-state="outage"] > .kz-tpl-dot, .kz-tpl-dot[data-state="outage"] { background: var(--kz-danger); }
|
|
837
837
|
[data-state="building"] > .kz-tpl-dot, .kz-tpl-dot[data-state="building"] { background: var(--kz-info); }
|
|
838
|
-
.kz-tpl-services { margin: 16px 0 0; padding: 0; list-style: none; border-radius:
|
|
838
|
+
.kz-tpl-services { margin: 16px 0 0; padding: 0; list-style: none; border-radius: 0; border: 1px solid var(--kz-border-default); overflow: hidden; }
|
|
839
839
|
.kz-tpl-services li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-top: 1px solid var(--kz-border-subtle);
|
|
840
840
|
font-size: 14.5px; color: var(--kz-text-primary); background: var(--kz-surface-1); }
|
|
841
841
|
.kz-tpl-services li:first-child { border-top: 0; }
|
|
@@ -851,10 +851,10 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
|
|
|
851
851
|
|
|
852
852
|
/* Pricing: plans side by side, the featured one lifted; a comparison under them. */
|
|
853
853
|
.kz-tpl-plans { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 14px; align-items: stretch; }
|
|
854
|
-
.kz-tpl-plan { position: relative; display: flex; flex-direction: column; gap: 14px; height: 100%; padding: 24px; border-radius:
|
|
854
|
+
.kz-tpl-plan { position: relative; display: flex; flex-direction: column; gap: 14px; height: 100%; padding: 24px; border-radius: 0; background: var(--kz-surface-1);
|
|
855
855
|
border: 1px solid var(--kz-border-default); }
|
|
856
856
|
.kz-tpl-plan[data-featured] { border-color: var(--kz-accent); background: linear-gradient(170deg, color-mix(in srgb, var(--kz-accent) 12%, var(--kz-surface-1)), var(--kz-surface-1) 60%);
|
|
857
|
-
box-shadow:
|
|
857
|
+
box-shadow: var(--kz-shadow-md); }
|
|
858
858
|
.kz-tpl-plan :is(h2, h3) { margin: 0; font-family: var(--kz-font-display); font-size: 18px; font-weight: 400; color: var(--kz-text-primary); }
|
|
859
859
|
.kz-tpl-price { margin: 0; font-family: var(--kz-font-display); font-size: 2.6rem; font-weight: 400; letter-spacing: -0.01em; line-height: 1; color: var(--kz-text-primary); }
|
|
860
860
|
.kz-tpl-price small { display: block; margin-top: 6px; font-family: var(--kz-font-text, inherit); font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--kz-text-secondary); }
|
|
@@ -866,12 +866,12 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
|
|
|
866
866
|
.kz-tpl-compare th, .kz-tpl-compare td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--kz-border-subtle); color: var(--kz-text-secondary); }
|
|
867
867
|
.kz-tpl-compare thead th { font-family: var(--kz-font-mono); font-size: 11px; letter-spacing: 0; text-transform: none; }
|
|
868
868
|
.kz-tpl-compare tbody th { color: var(--kz-text-primary); font-weight: 600; }
|
|
869
|
-
.kz-tpl-scroll { overflow-x: auto; border-radius:
|
|
869
|
+
.kz-tpl-scroll { overflow-x: auto; border-radius: 0; border: 1px solid var(--kz-border-default); background: var(--kz-surface-1); }
|
|
870
870
|
.kz-tpl-faq { display: grid; gap: 8px; }
|
|
871
|
-
.kz-tpl-faq details { border-radius:
|
|
871
|
+
.kz-tpl-faq details { border-radius: 0; border: 1px solid var(--kz-border-default); background: var(--kz-surface-1); }
|
|
872
872
|
.kz-tpl-faq summary { display: flex; align-items: center; min-height: 48px; padding: 0 16px; cursor: pointer; list-style: none; font-size: 15px; font-weight: 650; color: var(--kz-text-primary); }
|
|
873
873
|
.kz-tpl-faq summary::-webkit-details-marker { display: none; }
|
|
874
|
-
.kz-tpl-faq summary:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); outline-offset: 2px; border-radius:
|
|
874
|
+
.kz-tpl-faq summary:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); outline-offset: 2px; border-radius: 0; }
|
|
875
875
|
.kz-tpl-faq details > div { padding: 0 16px 16px; font-size: 14.5px; line-height: 1.65; color: var(--kz-text-secondary); }
|
|
876
876
|
|
|
877
877
|
@media (prefers-reduced-motion: reduce) { .kz-tpl-collection { transition: none !important; transform: none !important; } }
|
package/dist/landing-page.js
CHANGED
|
@@ -13,12 +13,7 @@ function LandingPage({ eyebrow, title, lead, actions, visual, visualLabel, proof
|
|
|
13
13
|
actions && /* @__PURE__ */ jsx("div", { className: "kz-tpl-actions kz-hero-extra", children: actions })
|
|
14
14
|
] }),
|
|
15
15
|
/* @__PURE__ */ jsxs("figure", { className: "kz-tpl-stage", children: [
|
|
16
|
-
/* @__PURE__ */
|
|
17
|
-
/* @__PURE__ */ jsx("i", {}),
|
|
18
|
-
/* @__PURE__ */ jsx("i", {}),
|
|
19
|
-
/* @__PURE__ */ jsx("i", {}),
|
|
20
|
-
visualLabel && /* @__PURE__ */ jsx("span", { children: visualLabel })
|
|
21
|
-
] }),
|
|
16
|
+
/* @__PURE__ */ jsx("div", { className: "kz-tpl-stage-bar", "aria-hidden": true, children: visualLabel && /* @__PURE__ */ jsx("span", { children: visualLabel }) }),
|
|
22
17
|
visual
|
|
23
18
|
] })
|
|
24
19
|
] }) }) }),
|
package/dist/landing-page.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/landing-page/landing-page.tsx"],"sourcesContent":["// Server-safe. A landing page (blocks.css `.kz-tpl-*`): a split hero — the promise and its actions beside the product\n// alive (a recording, a demo) — a band of proofs, the features as a bento where the main one takes the room, then the\n// closing call. The blocks come through their package entries, so their client parts keep their boundary.\nimport { CtaPanel } from \"@krizaka/ui/cta-panel\";\nimport { Page, Section } from \"@krizaka/ui/page\";\nimport { SectionBackdrop } from \"@krizaka/ui/section-backdrop\";\nimport type * as React from \"react\";\n\nexport interface LandingFeature {\n /** A stable key. */\n id: string;\n /** Its name. */\n title: React.ReactNode;\n /** One or two sentences. */\n text: React.ReactNode;\n /** A signature icon above the title. */\n icon?: React.ReactNode;\n /** A visual at the bottom of the tile (a chart, a screenshot, a code line). */\n visual?: React.ReactNode;\n /**\n * Its weight in the bento: `lg` (four columns, two rows — the main one), `md` (three), `sm` (two).\n * @default \"sm\"\n */\n size?: \"lg\" | \"md\" | \"sm\";\n}\n\nexport type LandingPageProps = Omit<React.HTMLAttributes<HTMLElement>, \"title\"> & {\n /** A mono line above the title. */\n eyebrow?: React.ReactNode;\n /** The promise: the page's `h1`. */\n title: React.ReactNode;\n /** One or two sentences under it. */\n lead?: React.ReactNode;\n /** The hero's actions (the main one cut, with shimmer). */\n actions?: React.ReactNode;\n /** The product, alive, beside the words: a recording, a live demo (framed as a window). */\n visual: React.ReactNode;\n /** The window's caption (`orochia.app — studio`). */\n visualLabel?: React.ReactNode;\n /** Figures or facts in a band under the hero: `{ value, label }`. */\n proofs?: readonly { value: React.ReactNode; label: React.ReactNode }[];\n /** The features' section: its eyebrow, title and lead. */\n featuresHeading?: { eyebrow?: React.ReactNode; title: React.ReactNode; lead?: React.ReactNode };\n /** The features, as a bento. */\n features: readonly LandingFeature[];\n /** Between the features and the closing call: a story, a quote, testimonials. */\n children?: React.ReactNode;\n /** The closing call: its title, body and actions. */\n closing?: { title: React.ReactNode; body?: React.ReactNode; actions: React.ReactNode };\n};\n\n/** A landing page: split hero with the product alive, proofs, a bento of features, the closing call. */\nexport function LandingPage({ eyebrow, title, lead, actions, visual, visualLabel, proofs, featuresHeading, features, closing, children, ...props }: LandingPageProps) {\n return (\n <div {...props}>\n <SectionBackdrop as=\"header\" grid className=\"kz-hero\">\n <Page className=\"kz-tpl-hero-frame\">\n <div className=\"kz-tpl-split\">\n <div className=\"kz-hero-text\">\n {eyebrow && <p className=\"kz-eyebrow\">{eyebrow}</p>}\n <h1 className=\"kz-hero-title\">{title}</h1>\n {lead && <p className=\"kz-hero-lead\">{lead}</p>}\n {actions && <div className=\"kz-tpl-actions kz-hero-extra\">{actions}</div>}\n </div>\n <figure className=\"kz-tpl-stage\">\n <div className=\"kz-tpl-stage-bar\" aria-hidden>\n
|
|
1
|
+
{"version":3,"sources":["../src/landing-page/landing-page.tsx"],"sourcesContent":["// Server-safe. A landing page (blocks.css `.kz-tpl-*`): a split hero — the promise and its actions beside the product\n// alive (a recording, a demo) — a band of proofs, the features as a bento where the main one takes the room, then the\n// closing call. The blocks come through their package entries, so their client parts keep their boundary.\nimport { CtaPanel } from \"@krizaka/ui/cta-panel\";\nimport { Page, Section } from \"@krizaka/ui/page\";\nimport { SectionBackdrop } from \"@krizaka/ui/section-backdrop\";\nimport type * as React from \"react\";\n\nexport interface LandingFeature {\n /** A stable key. */\n id: string;\n /** Its name. */\n title: React.ReactNode;\n /** One or two sentences. */\n text: React.ReactNode;\n /** A signature icon above the title. */\n icon?: React.ReactNode;\n /** A visual at the bottom of the tile (a chart, a screenshot, a code line). */\n visual?: React.ReactNode;\n /**\n * Its weight in the bento: `lg` (four columns, two rows — the main one), `md` (three), `sm` (two).\n * @default \"sm\"\n */\n size?: \"lg\" | \"md\" | \"sm\";\n}\n\nexport type LandingPageProps = Omit<React.HTMLAttributes<HTMLElement>, \"title\"> & {\n /** A mono line above the title. */\n eyebrow?: React.ReactNode;\n /** The promise: the page's `h1`. */\n title: React.ReactNode;\n /** One or two sentences under it. */\n lead?: React.ReactNode;\n /** The hero's actions (the main one cut, with shimmer). */\n actions?: React.ReactNode;\n /** The product, alive, beside the words: a recording, a live demo (framed as a window). */\n visual: React.ReactNode;\n /** The window's caption (`orochia.app — studio`). */\n visualLabel?: React.ReactNode;\n /** Figures or facts in a band under the hero: `{ value, label }`. */\n proofs?: readonly { value: React.ReactNode; label: React.ReactNode }[];\n /** The features' section: its eyebrow, title and lead. */\n featuresHeading?: { eyebrow?: React.ReactNode; title: React.ReactNode; lead?: React.ReactNode };\n /** The features, as a bento. */\n features: readonly LandingFeature[];\n /** Between the features and the closing call: a story, a quote, testimonials. */\n children?: React.ReactNode;\n /** The closing call: its title, body and actions. */\n closing?: { title: React.ReactNode; body?: React.ReactNode; actions: React.ReactNode };\n};\n\n/** A landing page: split hero with the product alive, proofs, a bento of features, the closing call. */\nexport function LandingPage({ eyebrow, title, lead, actions, visual, visualLabel, proofs, featuresHeading, features, closing, children, ...props }: LandingPageProps) {\n return (\n <div {...props}>\n <SectionBackdrop as=\"header\" grid className=\"kz-hero\">\n <Page className=\"kz-tpl-hero-frame\">\n <div className=\"kz-tpl-split\">\n <div className=\"kz-hero-text\">\n {eyebrow && <p className=\"kz-eyebrow\">{eyebrow}</p>}\n <h1 className=\"kz-hero-title\">{title}</h1>\n {lead && <p className=\"kz-hero-lead\">{lead}</p>}\n {actions && <div className=\"kz-tpl-actions kz-hero-extra\">{actions}</div>}\n </div>\n <figure className=\"kz-tpl-stage\">\n <div className=\"kz-tpl-stage-bar\" aria-hidden>\n {visualLabel && <span>{visualLabel}</span>}\n </div>\n {visual}\n </figure>\n </div>\n </Page>\n </SectionBackdrop>\n {proofs && proofs.length > 0 && (\n <Page>\n <dl className=\"kz-tpl-band\">\n {proofs.map((p, i) => (\n <div key={i}>\n <dt>{p.value}</dt>\n <dd>{p.label}</dd>\n </div>\n ))}\n </dl>\n </Page>\n )}\n <Section id=\"features\" eyebrow={featuresHeading?.eyebrow} title={featuresHeading?.title} lead={featuresHeading?.lead} reveal aria-label={featuresHeading ? undefined : \"Features\"}>\n <ul className=\"kz-tpl-bento\">\n {features.map((f) => (\n <li key={f.id} data-size={f.size === \"sm\" ? undefined : f.size} data-reveal=\"\">\n {f.icon && <span className=\"kz-block-icon\" aria-hidden>{f.icon}</span>}\n <h3>{f.title}</h3>\n <p>{f.text}</p>\n {f.visual && <div className=\"kz-tpl-bento-visual\">{f.visual}</div>}\n </li>\n ))}\n </ul>\n </Section>\n {children}\n {closing && (\n <Section spacing=\"sm\" aria-labelledby=\"landing-closing\">\n <CtaPanel id=\"landing-closing\" title={closing.title} body={closing.body} reveal>\n {closing.actions}\n </CtaPanel>\n </Section>\n )}\n </div>\n );\n}\n"],"mappings":";AAGA,SAAS,gBAAgB;AACzB,SAAS,MAAM,eAAe;AAC9B,SAAS,uBAAuB;AAqDpB,SACc,KADd;AANL,SAAS,YAAY,EAAE,SAAS,OAAO,MAAM,SAAS,QAAQ,aAAa,QAAQ,iBAAiB,UAAU,SAAS,UAAU,GAAG,MAAM,GAAqB;AACpK,SACE,qBAAC,SAAK,GAAG,OACP;AAAA,wBAAC,mBAAgB,IAAG,UAAS,MAAI,MAAC,WAAU,WAC1C,8BAAC,QAAK,WAAU,qBACd,+BAAC,SAAI,WAAU,gBACb;AAAA,2BAAC,SAAI,WAAU,gBACZ;AAAA,mBAAW,oBAAC,OAAE,WAAU,cAAc,mBAAQ;AAAA,QAC/C,oBAAC,QAAG,WAAU,iBAAiB,iBAAM;AAAA,QACpC,QAAQ,oBAAC,OAAE,WAAU,gBAAgB,gBAAK;AAAA,QAC1C,WAAW,oBAAC,SAAI,WAAU,gCAAgC,mBAAQ;AAAA,SACrE;AAAA,MACA,qBAAC,YAAO,WAAU,gBAChB;AAAA,4BAAC,SAAI,WAAU,oBAAmB,eAAW,MAC1C,yBAAe,oBAAC,UAAM,uBAAY,GACrC;AAAA,QACC;AAAA,SACH;AAAA,OACF,GACF,GACF;AAAA,IACC,UAAU,OAAO,SAAS,KACzB,oBAAC,QACC,8BAAC,QAAG,WAAU,eACX,iBAAO,IAAI,CAAC,GAAG,MACd,qBAAC,SACC;AAAA,0BAAC,QAAI,YAAE,OAAM;AAAA,MACb,oBAAC,QAAI,YAAE,OAAM;AAAA,SAFL,CAGV,CACD,GACH,GACF;AAAA,IAEF,oBAAC,WAAQ,IAAG,YAAW,SAAS,iBAAiB,SAAS,OAAO,iBAAiB,OAAO,MAAM,iBAAiB,MAAM,QAAM,MAAC,cAAY,kBAAkB,SAAY,YACrK,8BAAC,QAAG,WAAU,gBACX,mBAAS,IAAI,CAAC,MACb,qBAAC,QAAc,aAAW,EAAE,SAAS,OAAO,SAAY,EAAE,MAAM,eAAY,IACzE;AAAA,QAAE,QAAQ,oBAAC,UAAK,WAAU,iBAAgB,eAAW,MAAE,YAAE,MAAK;AAAA,MAC/D,oBAAC,QAAI,YAAE,OAAM;AAAA,MACb,oBAAC,OAAG,YAAE,MAAK;AAAA,MACV,EAAE,UAAU,oBAAC,SAAI,WAAU,uBAAuB,YAAE,QAAO;AAAA,SAJrD,EAAE,EAKX,CACD,GACH,GACF;AAAA,IACC;AAAA,IACA,WACC,oBAAC,WAAQ,SAAQ,MAAK,mBAAgB,mBACpC,8BAAC,YAAS,IAAG,mBAAkB,OAAO,QAAQ,OAAO,MAAM,QAAQ,MAAM,QAAM,MAC5E,kBAAQ,SACX,GACF;AAAA,KAEJ;AAEJ;","names":[]}
|
package/dist/motion.css
CHANGED
|
@@ -162,7 +162,7 @@
|
|
|
162
162
|
.maplibregl-canvas-container.maplibregl-interactive { cursor: grab; }
|
|
163
163
|
.maplibregl-canvas-container.maplibregl-interactive:active { cursor: grabbing; }
|
|
164
164
|
.maplibregl-marker { position: absolute; top: 0; left: 0; will-change: transform; }
|
|
165
|
-
.kz-map-user { position: relative; width: 16px; height: 16px; border-radius: 9999px; background: var(--kz-accent); border: 3px solid var(--kz-surface-1); box-shadow:
|
|
165
|
+
.kz-map-user { position: relative; width: 16px; height: 16px; border-radius: 9999px; background: var(--kz-accent); border: 3px solid var(--kz-surface-1); box-shadow: var(--kz-shadow-md); }
|
|
166
166
|
.kz-map-user::after { content: ""; position: absolute; inset: -3px; border-radius: inherit; background: var(--kz-accent); opacity: 0.35; animation: kz-map-pulse 2s var(--kz-ease) infinite; }
|
|
167
167
|
/* A pin dropped onto its place (`Marker drop={delay}`): falls from above, settles with a small bounce; once. */
|
|
168
168
|
[data-kz-marker] > [data-drop] { animation: kz-map-drop 620ms cubic-bezier(0.34, 1.4, 0.64, 1) backwards; animation-delay: var(--kz-map-drop-delay, 0ms); }
|
|
@@ -174,7 +174,7 @@
|
|
|
174
174
|
.kz-map-pulse[data-tone="soft"]::before, .kz-map-pulse[data-tone="soft"]::after { border-width: 1px; background: color-mix(in oklab, var(--kz-accent) 10%, transparent); }
|
|
175
175
|
@keyframes kz-map-heat { from { transform: scale(0.15); opacity: 0.9; } to { transform: scale(1); opacity: 0; } }
|
|
176
176
|
/* The courier of a `Route`: an accent dot with a ring, moved along the line by the component. */
|
|
177
|
-
.kz-map-courier { width: 14px; height: 14px; border-radius: 9999px; background: var(--kz-accent); border: 3px solid var(--kz-surface-1); box-shadow: 0 0 0 4px color-mix(in oklab, var(--kz-accent) 30%, transparent)
|
|
177
|
+
.kz-map-courier { width: 14px; height: 14px; border-radius: 9999px; background: var(--kz-accent); border: 3px solid var(--kz-surface-1); box-shadow: 0 0 0 4px color-mix(in oklab, var(--kz-accent) 30%, transparent); }
|
|
178
178
|
@keyframes kz-map-pulse { from { transform: scale(1); opacity: 0.4; } to { transform: scale(3.2); opacity: 0; } }
|
|
179
179
|
|
|
180
180
|
/* Section backdrop (SectionBackdrop): the brand's section gradient (--kz-brand-gradient-*), sections that glide from
|
package/dist/product-page.js
CHANGED
|
@@ -24,12 +24,7 @@ function ProductPage({ brand, mark, title, lead, facts, actions, visual, visualL
|
|
|
24
24
|
] })
|
|
25
25
|
] }),
|
|
26
26
|
visual && /* @__PURE__ */ jsxs("figure", { className: "kz-tpl-stage", children: [
|
|
27
|
-
/* @__PURE__ */
|
|
28
|
-
/* @__PURE__ */ jsx("i", {}),
|
|
29
|
-
/* @__PURE__ */ jsx("i", {}),
|
|
30
|
-
/* @__PURE__ */ jsx("i", {}),
|
|
31
|
-
visualLabel && /* @__PURE__ */ jsx("span", { children: visualLabel })
|
|
32
|
-
] }),
|
|
27
|
+
/* @__PURE__ */ jsx("div", { className: "kz-tpl-stage-bar", "aria-hidden": true, children: visualLabel && /* @__PURE__ */ jsx("span", { children: visualLabel }) }),
|
|
33
28
|
visual
|
|
34
29
|
] })
|
|
35
30
|
] }) }) }),
|
package/dist/product-page.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/product-page/product-page.tsx"],"sourcesContent":["// Server-safe. A product's overview: the hero with the product's mark, its promise, facts and main action beside a live\n// window of the product; the traps it removes as compact argument cards; its decisions with their cost; the promise a\n// bird keeps; the closing call. Under the product's brand (`brand` → `.brand-<id>`).\nimport { ArgumentCard } from \"@krizaka/ui/argument-card\";\nimport { CardGrid } from \"@krizaka/ui/card-grid\";\nimport { CtaPanel } from \"@krizaka/ui/cta-panel\";\nimport { type Decision, DecisionList } from \"@krizaka/ui/decision-list\";\nimport { MascotQuote } from \"@krizaka/ui/mascot-quote\";\nimport type { MascotBird } from \"@krizaka/ui/mascots\";\nimport { type Fact, Facts, Page, Section } from \"@krizaka/ui/page\";\nimport type { LinkComponent } from \"@krizaka/ui/page-hero\";\nimport { SectionBackdrop } from \"@krizaka/ui/section-backdrop\";\nimport type * as React from \"react\";\n\nimport { cn } from \"../cn\";\n\nexport interface ProductReason {\n /** A stable key (the card's anchor). */\n id: string;\n /** Its name. */\n title: React.ReactNode;\n /** The trap elsewhere, in one line. */\n trap: React.ReactNode;\n /** The signature icon. */\n icon?: React.ReactNode;\n /** The bird in the corner (whose rule it is). */\n mark?: React.ReactNode;\n /** Where the long version lives (a page) — or nothing, and the card stays its face. */\n href?: string;\n}\n\nexport type ProductPageProps = Omit<React.HTMLAttributes<HTMLElement>, \"title\"> & {\n /** The product's brand (`orazaka`, `orochia`…): the page wears `.brand-<id>`. */\n brand?: string;\n /** The product's mark and name, above the title. */\n mark?: React.ReactNode;\n /** The promise: the page's `h1`. */\n title: React.ReactNode;\n /** One or two sentences under it. */\n lead?: React.ReactNode;\n /** Facts under the lead (open source, a law it keeps). */\n facts?: readonly Fact[];\n /** The hero's actions. */\n actions?: React.ReactNode;\n /** The product alive, in a window beside the words. */\n visual?: React.ReactNode;\n /** The window's caption. */\n visualLabel?: React.ReactNode;\n /** The reasons' section heading. */\n reasonsHeading: { eyebrow?: React.ReactNode; title: React.ReactNode; lead?: React.ReactNode };\n /** The words of the cards: the trap's label (read, not shown) and the way in. */\n reasonLabels: { trap: string; more: React.ReactNode };\n /** The traps it removes. */\n reasons: readonly ProductReason[];\n /** The decisions' section: heading, decisions and their four labels. */\n decisions?: { eyebrow?: React.ReactNode; title: React.ReactNode; items: readonly Decision[]; labels: { chose: React.ReactNode; refused: React.ReactNode; because: React.ReactNode; cost: React.ReactNode } };\n /** The promise a bird keeps, under the decisions. */\n promise?: { bird: MascotBird; label: React.ReactNode; text: React.ReactNode };\n /** More sections between the decisions and the closing call (the tour, the platform, a comparison). */\n children?: React.ReactNode;\n /** The closing call. */\n closing?: { title: React.ReactNode; body?: React.ReactNode; actions: React.ReactNode };\n /** The app's link component (Next's `Link`). */\n linkAs?: LinkComponent;\n};\n\n/** A product's overview: split hero, traps as compact cards, decisions with their cost, the bird's promise, closing call. */\nexport function ProductPage({ brand, mark, title, lead, facts, actions, visual, visualLabel, reasonsHeading, reasonLabels, reasons, decisions, promise, closing, linkAs, className, children, ...props }: ProductPageProps) {\n return (\n <div className={cn(brand && \"brand-\" + brand, className)} {...props}>\n <SectionBackdrop as=\"header\" grid className=\"kz-hero\">\n <Page>\n <div className={visual ? \"kz-tpl-split\" : undefined}>\n <div className=\"kz-hero-text\">\n {mark && <p className=\"kz-eyebrow\">{mark}</p>}\n <h1 className=\"kz-hero-title\">{title}</h1>\n {lead && <p className=\"kz-hero-lead\">{lead}</p>}\n {(facts || actions) && (\n <div className=\"kz-hero-extra\">\n {facts && <Facts items={facts} />}\n {actions && <div className=\"kz-tpl-actions\">{actions}</div>}\n </div>\n )}\n </div>\n {visual && (\n <figure className=\"kz-tpl-stage\">\n <div className=\"kz-tpl-stage-bar\" aria-hidden>\n
|
|
1
|
+
{"version":3,"sources":["../src/product-page/product-page.tsx"],"sourcesContent":["// Server-safe. A product's overview: the hero with the product's mark, its promise, facts and main action beside a live\n// window of the product; the traps it removes as compact argument cards; its decisions with their cost; the promise a\n// bird keeps; the closing call. Under the product's brand (`brand` → `.brand-<id>`).\nimport { ArgumentCard } from \"@krizaka/ui/argument-card\";\nimport { CardGrid } from \"@krizaka/ui/card-grid\";\nimport { CtaPanel } from \"@krizaka/ui/cta-panel\";\nimport { type Decision, DecisionList } from \"@krizaka/ui/decision-list\";\nimport { MascotQuote } from \"@krizaka/ui/mascot-quote\";\nimport type { MascotBird } from \"@krizaka/ui/mascots\";\nimport { type Fact, Facts, Page, Section } from \"@krizaka/ui/page\";\nimport type { LinkComponent } from \"@krizaka/ui/page-hero\";\nimport { SectionBackdrop } from \"@krizaka/ui/section-backdrop\";\nimport type * as React from \"react\";\n\nimport { cn } from \"../cn\";\n\nexport interface ProductReason {\n /** A stable key (the card's anchor). */\n id: string;\n /** Its name. */\n title: React.ReactNode;\n /** The trap elsewhere, in one line. */\n trap: React.ReactNode;\n /** The signature icon. */\n icon?: React.ReactNode;\n /** The bird in the corner (whose rule it is). */\n mark?: React.ReactNode;\n /** Where the long version lives (a page) — or nothing, and the card stays its face. */\n href?: string;\n}\n\nexport type ProductPageProps = Omit<React.HTMLAttributes<HTMLElement>, \"title\"> & {\n /** The product's brand (`orazaka`, `orochia`…): the page wears `.brand-<id>`. */\n brand?: string;\n /** The product's mark and name, above the title. */\n mark?: React.ReactNode;\n /** The promise: the page's `h1`. */\n title: React.ReactNode;\n /** One or two sentences under it. */\n lead?: React.ReactNode;\n /** Facts under the lead (open source, a law it keeps). */\n facts?: readonly Fact[];\n /** The hero's actions. */\n actions?: React.ReactNode;\n /** The product alive, in a window beside the words. */\n visual?: React.ReactNode;\n /** The window's caption. */\n visualLabel?: React.ReactNode;\n /** The reasons' section heading. */\n reasonsHeading: { eyebrow?: React.ReactNode; title: React.ReactNode; lead?: React.ReactNode };\n /** The words of the cards: the trap's label (read, not shown) and the way in. */\n reasonLabels: { trap: string; more: React.ReactNode };\n /** The traps it removes. */\n reasons: readonly ProductReason[];\n /** The decisions' section: heading, decisions and their four labels. */\n decisions?: { eyebrow?: React.ReactNode; title: React.ReactNode; items: readonly Decision[]; labels: { chose: React.ReactNode; refused: React.ReactNode; because: React.ReactNode; cost: React.ReactNode } };\n /** The promise a bird keeps, under the decisions. */\n promise?: { bird: MascotBird; label: React.ReactNode; text: React.ReactNode };\n /** More sections between the decisions and the closing call (the tour, the platform, a comparison). */\n children?: React.ReactNode;\n /** The closing call. */\n closing?: { title: React.ReactNode; body?: React.ReactNode; actions: React.ReactNode };\n /** The app's link component (Next's `Link`). */\n linkAs?: LinkComponent;\n};\n\n/** A product's overview: split hero, traps as compact cards, decisions with their cost, the bird's promise, closing call. */\nexport function ProductPage({ brand, mark, title, lead, facts, actions, visual, visualLabel, reasonsHeading, reasonLabels, reasons, decisions, promise, closing, linkAs, className, children, ...props }: ProductPageProps) {\n return (\n <div className={cn(brand && \"brand-\" + brand, className)} {...props}>\n <SectionBackdrop as=\"header\" grid className=\"kz-hero\">\n <Page>\n <div className={visual ? \"kz-tpl-split\" : undefined}>\n <div className=\"kz-hero-text\">\n {mark && <p className=\"kz-eyebrow\">{mark}</p>}\n <h1 className=\"kz-hero-title\">{title}</h1>\n {lead && <p className=\"kz-hero-lead\">{lead}</p>}\n {(facts || actions) && (\n <div className=\"kz-hero-extra\">\n {facts && <Facts items={facts} />}\n {actions && <div className=\"kz-tpl-actions\">{actions}</div>}\n </div>\n )}\n </div>\n {visual && (\n <figure className=\"kz-tpl-stage\">\n <div className=\"kz-tpl-stage-bar\" aria-hidden>\n {visualLabel && <span>{visualLabel}</span>}\n </div>\n {visual}\n </figure>\n )}\n </div>\n </Page>\n </SectionBackdrop>\n <Section id=\"why\" eyebrow={reasonsHeading.eyebrow} title={reasonsHeading.title} lead={reasonsHeading.lead} reveal>\n <CardGrid min={260} fit=\"fit\">\n {reasons.map((r) => (\n <ArgumentCard\n key={r.id}\n id={`why-${r.id}`}\n icon={r.icon}\n title={r.title}\n mark={r.mark}\n hook={{ label: reasonLabels.trap, text: r.trap }}\n more={r.href ? { href: r.href, label: reasonLabels.more } : undefined}\n linkAs={linkAs}\n />\n ))}\n </CardGrid>\n </Section>\n {decisions && (\n <Section id=\"decisions\" eyebrow={decisions.eyebrow} title={decisions.title} divider reveal>\n <DecisionList decisions={decisions.items} labels={decisions.labels} />\n {promise && (\n <div className=\"kz-tpl-promise\">\n <MascotQuote variant=\"callout\" bird={promise.bird} mood=\"welcome\" label={promise.label}>\n {promise.text}\n </MascotQuote>\n </div>\n )}\n </Section>\n )}\n {children}\n {closing && (\n <Section spacing=\"sm\" aria-labelledby=\"product-closing\">\n <CtaPanel id=\"product-closing\" title={closing.title} body={closing.body} reveal>\n {closing.actions}\n </CtaPanel>\n </Section>\n )}\n </div>\n );\n}\n"],"mappings":";;;;;AAGA,SAAS,oBAAoB;AAC7B,SAAS,gBAAgB;AACzB,SAAS,gBAAgB;AACzB,SAAwB,oBAAoB;AAC5C,SAAS,mBAAmB;AAE5B,SAAoB,OAAO,MAAM,eAAe;AAEhD,SAAS,uBAAuB;AA+DT,cAIP,YAJO;AAPhB,SAAS,YAAY,EAAE,OAAO,MAAM,OAAO,MAAM,OAAO,SAAS,QAAQ,aAAa,gBAAgB,cAAc,SAAS,WAAW,SAAS,SAAS,QAAQ,WAAW,UAAU,GAAG,MAAM,GAAqB;AAC1N,SACE,qBAAC,SAAI,WAAW,GAAG,SAAS,WAAW,OAAO,SAAS,GAAI,GAAG,OAC5D;AAAA,wBAAC,mBAAgB,IAAG,UAAS,MAAI,MAAC,WAAU,WAC1C,8BAAC,QACC,+BAAC,SAAI,WAAW,SAAS,iBAAiB,QACxC;AAAA,2BAAC,SAAI,WAAU,gBACZ;AAAA,gBAAQ,oBAAC,OAAE,WAAU,cAAc,gBAAK;AAAA,QACzC,oBAAC,QAAG,WAAU,iBAAiB,iBAAM;AAAA,QACpC,QAAQ,oBAAC,OAAE,WAAU,gBAAgB,gBAAK;AAAA,SACzC,SAAS,YACT,qBAAC,SAAI,WAAU,iBACZ;AAAA,mBAAS,oBAAC,SAAM,OAAO,OAAO;AAAA,UAC9B,WAAW,oBAAC,SAAI,WAAU,kBAAkB,mBAAQ;AAAA,WACvD;AAAA,SAEJ;AAAA,MACC,UACC,qBAAC,YAAO,WAAU,gBAChB;AAAA,4BAAC,SAAI,WAAU,oBAAmB,eAAW,MAC1C,yBAAe,oBAAC,UAAM,uBAAY,GACrC;AAAA,QACC;AAAA,SACH;AAAA,OAEJ,GACF,GACF;AAAA,IACA,oBAAC,WAAQ,IAAG,OAAM,SAAS,eAAe,SAAS,OAAO,eAAe,OAAO,MAAM,eAAe,MAAM,QAAM,MAC/G,8BAAC,YAAS,KAAK,KAAK,KAAI,OACrB,kBAAQ,IAAI,CAAC,MACZ;AAAA,MAAC;AAAA;AAAA,QAEC,IAAI,OAAO,EAAE,EAAE;AAAA,QACf,MAAM,EAAE;AAAA,QACR,OAAO,EAAE;AAAA,QACT,MAAM,EAAE;AAAA,QACR,MAAM,EAAE,OAAO,aAAa,MAAM,MAAM,EAAE,KAAK;AAAA,QAC/C,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,aAAa,KAAK,IAAI;AAAA,QAC5D;AAAA;AAAA,MAPK,EAAE;AAAA,IAQT,CACD,GACH,GACF;AAAA,IACC,aACC,qBAAC,WAAQ,IAAG,aAAY,SAAS,UAAU,SAAS,OAAO,UAAU,OAAO,SAAO,MAAC,QAAM,MACxF;AAAA,0BAAC,gBAAa,WAAW,UAAU,OAAO,QAAQ,UAAU,QAAQ;AAAA,MACnE,WACC,oBAAC,SAAI,WAAU,kBACb,8BAAC,eAAY,SAAQ,WAAU,MAAM,QAAQ,MAAM,MAAK,WAAU,OAAO,QAAQ,OAC9E,kBAAQ,MACX,GACF;AAAA,OAEJ;AAAA,IAED;AAAA,IACA,WACC,oBAAC,WAAQ,SAAQ,MAAK,mBAAgB,mBACpC,8BAAC,YAAS,IAAG,mBAAkB,OAAO,QAAQ,OAAO,MAAM,QAAQ,MAAM,QAAM,MAC5E,kBAAQ,SACX,GACF;AAAA,KAEJ;AAEJ;","names":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@krizaka/ui",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.38.0",
|
|
4
4
|
"description": "The Krizaka front-end platform's components: the primitives (button, card, dialog, toast, menu, field, tabs, chip, switch, slider, command palette, theme, countdown…) on the semantic --kz-* tokens, the animated marks (Krizaka, Orazaka, Orochia, Yasakia, Yororis) and the motion signature — web and /native.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"krizaka",
|
|
@@ -741,7 +741,7 @@
|
|
|
741
741
|
],
|
|
742
742
|
"peerDependencies": {
|
|
743
743
|
"@krizaka/query": ">=0.2.1",
|
|
744
|
-
"@krizaka/tailwind": ">=3.
|
|
744
|
+
"@krizaka/tailwind": ">=3.38.0",
|
|
745
745
|
"@maplibre/maplibre-react-native": ">=11",
|
|
746
746
|
"@shopify/flash-list": ">=2",
|
|
747
747
|
"expo-camera": ">=16",
|
|
@@ -2535,8 +2535,8 @@
|
|
|
2535
2535
|
"sonner": "^2.0.8",
|
|
2536
2536
|
"tailwind-variants": "^3.3.1",
|
|
2537
2537
|
"@krizaka/intl": "^0.2.1",
|
|
2538
|
-
"@krizaka/
|
|
2539
|
-
"@krizaka/
|
|
2538
|
+
"@krizaka/tokens": "^3.38.0",
|
|
2539
|
+
"@krizaka/pacer": "^0.1.0"
|
|
2540
2540
|
},
|
|
2541
2541
|
"scripts": {
|
|
2542
2542
|
"build": "node -e \"const fs=require('node:fs');fs.rmSync('dist',{recursive:true,force:true});for(const f of fs.readdirSync('registry/examples',{recursive:true}))if(/\\.(js|d\\.ts)$/.test(f))fs.rmSync('registry/examples/'+f)\" && tsup && node -e \"require('node:fs').copyFileSync('src/motion.css','dist/motion.css');require('node:fs').copyFileSync('src/blocks.css','dist/blocks.css');require('node:fs').copyFileSync('src/story.css','dist/story.css')\" && node scripts/build-registry.mjs",
|
package/registry/index.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@krizaka/ui",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.38.0",
|
|
4
4
|
"templatePurposes": {
|
|
5
5
|
"convince": {
|
|
6
6
|
"title": "Convince",
|
|
@@ -3110,7 +3110,7 @@
|
|
|
3110
3110
|
"native": 2
|
|
3111
3111
|
},
|
|
3112
3112
|
"dependencies": [
|
|
3113
|
-
"@krizaka/tokens@^3.
|
|
3113
|
+
"@krizaka/tokens@^3.38.0",
|
|
3114
3114
|
"@protomaps/basemaps@5.7.2",
|
|
3115
3115
|
"tailwind-variants@^3.3.1"
|
|
3116
3116
|
],
|
|
@@ -3549,7 +3549,7 @@
|
|
|
3549
3549
|
"native": 0
|
|
3550
3550
|
},
|
|
3551
3551
|
"dependencies": [
|
|
3552
|
-
"@krizaka/tokens@^3.
|
|
3552
|
+
"@krizaka/tokens@^3.38.0",
|
|
3553
3553
|
"radix-ui@^1.7.0",
|
|
3554
3554
|
"tailwind-variants@^3.3.1"
|
|
3555
3555
|
],
|
|
@@ -4212,7 +4212,7 @@
|
|
|
4212
4212
|
"native": 0
|
|
4213
4213
|
},
|
|
4214
4214
|
"dependencies": [
|
|
4215
|
-
"@krizaka/tokens@^3.
|
|
4215
|
+
"@krizaka/tokens@^3.38.0",
|
|
4216
4216
|
"radix-ui@^1.7.0",
|
|
4217
4217
|
"tailwind-variants@^3.3.1"
|
|
4218
4218
|
],
|
|
@@ -4555,7 +4555,7 @@
|
|
|
4555
4555
|
"native": 0
|
|
4556
4556
|
},
|
|
4557
4557
|
"dependencies": [
|
|
4558
|
-
"@krizaka/tokens@^3.
|
|
4558
|
+
"@krizaka/tokens@^3.38.0",
|
|
4559
4559
|
"radix-ui@^1.7.0",
|
|
4560
4560
|
"tailwind-variants@^3.3.1"
|
|
4561
4561
|
],
|
|
@@ -156,7 +156,7 @@
|
|
|
156
156
|
},
|
|
157
157
|
{
|
|
158
158
|
"path": "landing-page/landing-page.tsx",
|
|
159
|
-
"content": "// Server-safe. A landing page (blocks.css `.kz-tpl-*`): a split hero — the promise and its actions beside the product\n// alive (a recording, a demo) — a band of proofs, the features as a bento where the main one takes the room, then the\n// closing call. The blocks come through their package entries, so their client parts keep their boundary.\nimport { CtaPanel } from \"@krizaka/ui/cta-panel\";\nimport { Page, Section } from \"@krizaka/ui/page\";\nimport { SectionBackdrop } from \"@krizaka/ui/section-backdrop\";\nimport type * as React from \"react\";\n\nexport interface LandingFeature {\n /** A stable key. */\n id: string;\n /** Its name. */\n title: React.ReactNode;\n /** One or two sentences. */\n text: React.ReactNode;\n /** A signature icon above the title. */\n icon?: React.ReactNode;\n /** A visual at the bottom of the tile (a chart, a screenshot, a code line). */\n visual?: React.ReactNode;\n /**\n * Its weight in the bento: `lg` (four columns, two rows — the main one), `md` (three), `sm` (two).\n * @default \"sm\"\n */\n size?: \"lg\" | \"md\" | \"sm\";\n}\n\nexport type LandingPageProps = Omit<React.HTMLAttributes<HTMLElement>, \"title\"> & {\n /** A mono line above the title. */\n eyebrow?: React.ReactNode;\n /** The promise: the page's `h1`. */\n title: React.ReactNode;\n /** One or two sentences under it. */\n lead?: React.ReactNode;\n /** The hero's actions (the main one cut, with shimmer). */\n actions?: React.ReactNode;\n /** The product, alive, beside the words: a recording, a live demo (framed as a window). */\n visual: React.ReactNode;\n /** The window's caption (`orochia.app — studio`). */\n visualLabel?: React.ReactNode;\n /** Figures or facts in a band under the hero: `{ value, label }`. */\n proofs?: readonly { value: React.ReactNode; label: React.ReactNode }[];\n /** The features' section: its eyebrow, title and lead. */\n featuresHeading?: { eyebrow?: React.ReactNode; title: React.ReactNode; lead?: React.ReactNode };\n /** The features, as a bento. */\n features: readonly LandingFeature[];\n /** Between the features and the closing call: a story, a quote, testimonials. */\n children?: React.ReactNode;\n /** The closing call: its title, body and actions. */\n closing?: { title: React.ReactNode; body?: React.ReactNode; actions: React.ReactNode };\n};\n\n/** A landing page: split hero with the product alive, proofs, a bento of features, the closing call. */\nexport function LandingPage({ eyebrow, title, lead, actions, visual, visualLabel, proofs, featuresHeading, features, closing, children, ...props }: LandingPageProps) {\n return (\n <div {...props}>\n <SectionBackdrop as=\"header\" grid className=\"kz-hero\">\n <Page className=\"kz-tpl-hero-frame\">\n <div className=\"kz-tpl-split\">\n <div className=\"kz-hero-text\">\n {eyebrow && <p className=\"kz-eyebrow\">{eyebrow}</p>}\n <h1 className=\"kz-hero-title\">{title}</h1>\n {lead && <p className=\"kz-hero-lead\">{lead}</p>}\n {actions && <div className=\"kz-tpl-actions kz-hero-extra\">{actions}</div>}\n </div>\n <figure className=\"kz-tpl-stage\">\n <div className=\"kz-tpl-stage-bar\" aria-hidden>\n
|
|
159
|
+
"content": "// Server-safe. A landing page (blocks.css `.kz-tpl-*`): a split hero — the promise and its actions beside the product\n// alive (a recording, a demo) — a band of proofs, the features as a bento where the main one takes the room, then the\n// closing call. The blocks come through their package entries, so their client parts keep their boundary.\nimport { CtaPanel } from \"@krizaka/ui/cta-panel\";\nimport { Page, Section } from \"@krizaka/ui/page\";\nimport { SectionBackdrop } from \"@krizaka/ui/section-backdrop\";\nimport type * as React from \"react\";\n\nexport interface LandingFeature {\n /** A stable key. */\n id: string;\n /** Its name. */\n title: React.ReactNode;\n /** One or two sentences. */\n text: React.ReactNode;\n /** A signature icon above the title. */\n icon?: React.ReactNode;\n /** A visual at the bottom of the tile (a chart, a screenshot, a code line). */\n visual?: React.ReactNode;\n /**\n * Its weight in the bento: `lg` (four columns, two rows — the main one), `md` (three), `sm` (two).\n * @default \"sm\"\n */\n size?: \"lg\" | \"md\" | \"sm\";\n}\n\nexport type LandingPageProps = Omit<React.HTMLAttributes<HTMLElement>, \"title\"> & {\n /** A mono line above the title. */\n eyebrow?: React.ReactNode;\n /** The promise: the page's `h1`. */\n title: React.ReactNode;\n /** One or two sentences under it. */\n lead?: React.ReactNode;\n /** The hero's actions (the main one cut, with shimmer). */\n actions?: React.ReactNode;\n /** The product, alive, beside the words: a recording, a live demo (framed as a window). */\n visual: React.ReactNode;\n /** The window's caption (`orochia.app — studio`). */\n visualLabel?: React.ReactNode;\n /** Figures or facts in a band under the hero: `{ value, label }`. */\n proofs?: readonly { value: React.ReactNode; label: React.ReactNode }[];\n /** The features' section: its eyebrow, title and lead. */\n featuresHeading?: { eyebrow?: React.ReactNode; title: React.ReactNode; lead?: React.ReactNode };\n /** The features, as a bento. */\n features: readonly LandingFeature[];\n /** Between the features and the closing call: a story, a quote, testimonials. */\n children?: React.ReactNode;\n /** The closing call: its title, body and actions. */\n closing?: { title: React.ReactNode; body?: React.ReactNode; actions: React.ReactNode };\n};\n\n/** A landing page: split hero with the product alive, proofs, a bento of features, the closing call. */\nexport function LandingPage({ eyebrow, title, lead, actions, visual, visualLabel, proofs, featuresHeading, features, closing, children, ...props }: LandingPageProps) {\n return (\n <div {...props}>\n <SectionBackdrop as=\"header\" grid className=\"kz-hero\">\n <Page className=\"kz-tpl-hero-frame\">\n <div className=\"kz-tpl-split\">\n <div className=\"kz-hero-text\">\n {eyebrow && <p className=\"kz-eyebrow\">{eyebrow}</p>}\n <h1 className=\"kz-hero-title\">{title}</h1>\n {lead && <p className=\"kz-hero-lead\">{lead}</p>}\n {actions && <div className=\"kz-tpl-actions kz-hero-extra\">{actions}</div>}\n </div>\n <figure className=\"kz-tpl-stage\">\n <div className=\"kz-tpl-stage-bar\" aria-hidden>\n {visualLabel && <span>{visualLabel}</span>}\n </div>\n {visual}\n </figure>\n </div>\n </Page>\n </SectionBackdrop>\n {proofs && proofs.length > 0 && (\n <Page>\n <dl className=\"kz-tpl-band\">\n {proofs.map((p, i) => (\n <div key={i}>\n <dt>{p.value}</dt>\n <dd>{p.label}</dd>\n </div>\n ))}\n </dl>\n </Page>\n )}\n <Section id=\"features\" eyebrow={featuresHeading?.eyebrow} title={featuresHeading?.title} lead={featuresHeading?.lead} reveal aria-label={featuresHeading ? undefined : \"Features\"}>\n <ul className=\"kz-tpl-bento\">\n {features.map((f) => (\n <li key={f.id} data-size={f.size === \"sm\" ? undefined : f.size} data-reveal=\"\">\n {f.icon && <span className=\"kz-block-icon\" aria-hidden>{f.icon}</span>}\n <h3>{f.title}</h3>\n <p>{f.text}</p>\n {f.visual && <div className=\"kz-tpl-bento-visual\">{f.visual}</div>}\n </li>\n ))}\n </ul>\n </Section>\n {children}\n {closing && (\n <Section spacing=\"sm\" aria-labelledby=\"landing-closing\">\n <CtaPanel id=\"landing-closing\" title={closing.title} body={closing.body} reveal>\n {closing.actions}\n </CtaPanel>\n </Section>\n )}\n </div>\n );\n}\n"
|
|
160
160
|
},
|
|
161
161
|
{
|
|
162
162
|
"path": "landing-page/meta.ts",
|
package/registry/map.json
CHANGED
package/registry/nav-bar.json
CHANGED
|
@@ -199,7 +199,7 @@
|
|
|
199
199
|
},
|
|
200
200
|
{
|
|
201
201
|
"path": "product-page/product-page.tsx",
|
|
202
|
-
"content": "// Server-safe. A product's overview: the hero with the product's mark, its promise, facts and main action beside a live\n// window of the product; the traps it removes as compact argument cards; its decisions with their cost; the promise a\n// bird keeps; the closing call. Under the product's brand (`brand` → `.brand-<id>`).\nimport { ArgumentCard } from \"@krizaka/ui/argument-card\";\nimport { CardGrid } from \"@krizaka/ui/card-grid\";\nimport { CtaPanel } from \"@krizaka/ui/cta-panel\";\nimport { type Decision, DecisionList } from \"@krizaka/ui/decision-list\";\nimport { MascotQuote } from \"@krizaka/ui/mascot-quote\";\nimport type { MascotBird } from \"@krizaka/ui/mascots\";\nimport { type Fact, Facts, Page, Section } from \"@krizaka/ui/page\";\nimport type { LinkComponent } from \"@krizaka/ui/page-hero\";\nimport { SectionBackdrop } from \"@krizaka/ui/section-backdrop\";\nimport type * as React from \"react\";\n\nimport { cn } from \"../cn\";\n\nexport interface ProductReason {\n /** A stable key (the card's anchor). */\n id: string;\n /** Its name. */\n title: React.ReactNode;\n /** The trap elsewhere, in one line. */\n trap: React.ReactNode;\n /** The signature icon. */\n icon?: React.ReactNode;\n /** The bird in the corner (whose rule it is). */\n mark?: React.ReactNode;\n /** Where the long version lives (a page) — or nothing, and the card stays its face. */\n href?: string;\n}\n\nexport type ProductPageProps = Omit<React.HTMLAttributes<HTMLElement>, \"title\"> & {\n /** The product's brand (`orazaka`, `orochia`…): the page wears `.brand-<id>`. */\n brand?: string;\n /** The product's mark and name, above the title. */\n mark?: React.ReactNode;\n /** The promise: the page's `h1`. */\n title: React.ReactNode;\n /** One or two sentences under it. */\n lead?: React.ReactNode;\n /** Facts under the lead (open source, a law it keeps). */\n facts?: readonly Fact[];\n /** The hero's actions. */\n actions?: React.ReactNode;\n /** The product alive, in a window beside the words. */\n visual?: React.ReactNode;\n /** The window's caption. */\n visualLabel?: React.ReactNode;\n /** The reasons' section heading. */\n reasonsHeading: { eyebrow?: React.ReactNode; title: React.ReactNode; lead?: React.ReactNode };\n /** The words of the cards: the trap's label (read, not shown) and the way in. */\n reasonLabels: { trap: string; more: React.ReactNode };\n /** The traps it removes. */\n reasons: readonly ProductReason[];\n /** The decisions' section: heading, decisions and their four labels. */\n decisions?: { eyebrow?: React.ReactNode; title: React.ReactNode; items: readonly Decision[]; labels: { chose: React.ReactNode; refused: React.ReactNode; because: React.ReactNode; cost: React.ReactNode } };\n /** The promise a bird keeps, under the decisions. */\n promise?: { bird: MascotBird; label: React.ReactNode; text: React.ReactNode };\n /** More sections between the decisions and the closing call (the tour, the platform, a comparison). */\n children?: React.ReactNode;\n /** The closing call. */\n closing?: { title: React.ReactNode; body?: React.ReactNode; actions: React.ReactNode };\n /** The app's link component (Next's `Link`). */\n linkAs?: LinkComponent;\n};\n\n/** A product's overview: split hero, traps as compact cards, decisions with their cost, the bird's promise, closing call. */\nexport function ProductPage({ brand, mark, title, lead, facts, actions, visual, visualLabel, reasonsHeading, reasonLabels, reasons, decisions, promise, closing, linkAs, className, children, ...props }: ProductPageProps) {\n return (\n <div className={cn(brand && \"brand-\" + brand, className)} {...props}>\n <SectionBackdrop as=\"header\" grid className=\"kz-hero\">\n <Page>\n <div className={visual ? \"kz-tpl-split\" : undefined}>\n <div className=\"kz-hero-text\">\n {mark && <p className=\"kz-eyebrow\">{mark}</p>}\n <h1 className=\"kz-hero-title\">{title}</h1>\n {lead && <p className=\"kz-hero-lead\">{lead}</p>}\n {(facts || actions) && (\n <div className=\"kz-hero-extra\">\n {facts && <Facts items={facts} />}\n {actions && <div className=\"kz-tpl-actions\">{actions}</div>}\n </div>\n )}\n </div>\n {visual && (\n <figure className=\"kz-tpl-stage\">\n <div className=\"kz-tpl-stage-bar\" aria-hidden>\n
|
|
202
|
+
"content": "// Server-safe. A product's overview: the hero with the product's mark, its promise, facts and main action beside a live\n// window of the product; the traps it removes as compact argument cards; its decisions with their cost; the promise a\n// bird keeps; the closing call. Under the product's brand (`brand` → `.brand-<id>`).\nimport { ArgumentCard } from \"@krizaka/ui/argument-card\";\nimport { CardGrid } from \"@krizaka/ui/card-grid\";\nimport { CtaPanel } from \"@krizaka/ui/cta-panel\";\nimport { type Decision, DecisionList } from \"@krizaka/ui/decision-list\";\nimport { MascotQuote } from \"@krizaka/ui/mascot-quote\";\nimport type { MascotBird } from \"@krizaka/ui/mascots\";\nimport { type Fact, Facts, Page, Section } from \"@krizaka/ui/page\";\nimport type { LinkComponent } from \"@krizaka/ui/page-hero\";\nimport { SectionBackdrop } from \"@krizaka/ui/section-backdrop\";\nimport type * as React from \"react\";\n\nimport { cn } from \"../cn\";\n\nexport interface ProductReason {\n /** A stable key (the card's anchor). */\n id: string;\n /** Its name. */\n title: React.ReactNode;\n /** The trap elsewhere, in one line. */\n trap: React.ReactNode;\n /** The signature icon. */\n icon?: React.ReactNode;\n /** The bird in the corner (whose rule it is). */\n mark?: React.ReactNode;\n /** Where the long version lives (a page) — or nothing, and the card stays its face. */\n href?: string;\n}\n\nexport type ProductPageProps = Omit<React.HTMLAttributes<HTMLElement>, \"title\"> & {\n /** The product's brand (`orazaka`, `orochia`…): the page wears `.brand-<id>`. */\n brand?: string;\n /** The product's mark and name, above the title. */\n mark?: React.ReactNode;\n /** The promise: the page's `h1`. */\n title: React.ReactNode;\n /** One or two sentences under it. */\n lead?: React.ReactNode;\n /** Facts under the lead (open source, a law it keeps). */\n facts?: readonly Fact[];\n /** The hero's actions. */\n actions?: React.ReactNode;\n /** The product alive, in a window beside the words. */\n visual?: React.ReactNode;\n /** The window's caption. */\n visualLabel?: React.ReactNode;\n /** The reasons' section heading. */\n reasonsHeading: { eyebrow?: React.ReactNode; title: React.ReactNode; lead?: React.ReactNode };\n /** The words of the cards: the trap's label (read, not shown) and the way in. */\n reasonLabels: { trap: string; more: React.ReactNode };\n /** The traps it removes. */\n reasons: readonly ProductReason[];\n /** The decisions' section: heading, decisions and their four labels. */\n decisions?: { eyebrow?: React.ReactNode; title: React.ReactNode; items: readonly Decision[]; labels: { chose: React.ReactNode; refused: React.ReactNode; because: React.ReactNode; cost: React.ReactNode } };\n /** The promise a bird keeps, under the decisions. */\n promise?: { bird: MascotBird; label: React.ReactNode; text: React.ReactNode };\n /** More sections between the decisions and the closing call (the tour, the platform, a comparison). */\n children?: React.ReactNode;\n /** The closing call. */\n closing?: { title: React.ReactNode; body?: React.ReactNode; actions: React.ReactNode };\n /** The app's link component (Next's `Link`). */\n linkAs?: LinkComponent;\n};\n\n/** A product's overview: split hero, traps as compact cards, decisions with their cost, the bird's promise, closing call. */\nexport function ProductPage({ brand, mark, title, lead, facts, actions, visual, visualLabel, reasonsHeading, reasonLabels, reasons, decisions, promise, closing, linkAs, className, children, ...props }: ProductPageProps) {\n return (\n <div className={cn(brand && \"brand-\" + brand, className)} {...props}>\n <SectionBackdrop as=\"header\" grid className=\"kz-hero\">\n <Page>\n <div className={visual ? \"kz-tpl-split\" : undefined}>\n <div className=\"kz-hero-text\">\n {mark && <p className=\"kz-eyebrow\">{mark}</p>}\n <h1 className=\"kz-hero-title\">{title}</h1>\n {lead && <p className=\"kz-hero-lead\">{lead}</p>}\n {(facts || actions) && (\n <div className=\"kz-hero-extra\">\n {facts && <Facts items={facts} />}\n {actions && <div className=\"kz-tpl-actions\">{actions}</div>}\n </div>\n )}\n </div>\n {visual && (\n <figure className=\"kz-tpl-stage\">\n <div className=\"kz-tpl-stage-bar\" aria-hidden>\n {visualLabel && <span>{visualLabel}</span>}\n </div>\n {visual}\n </figure>\n )}\n </div>\n </Page>\n </SectionBackdrop>\n <Section id=\"why\" eyebrow={reasonsHeading.eyebrow} title={reasonsHeading.title} lead={reasonsHeading.lead} reveal>\n <CardGrid min={260} fit=\"fit\">\n {reasons.map((r) => (\n <ArgumentCard\n key={r.id}\n id={`why-${r.id}`}\n icon={r.icon}\n title={r.title}\n mark={r.mark}\n hook={{ label: reasonLabels.trap, text: r.trap }}\n more={r.href ? { href: r.href, label: reasonLabels.more } : undefined}\n linkAs={linkAs}\n />\n ))}\n </CardGrid>\n </Section>\n {decisions && (\n <Section id=\"decisions\" eyebrow={decisions.eyebrow} title={decisions.title} divider reveal>\n <DecisionList decisions={decisions.items} labels={decisions.labels} />\n {promise && (\n <div className=\"kz-tpl-promise\">\n <MascotQuote variant=\"callout\" bird={promise.bird} mood=\"welcome\" label={promise.label}>\n {promise.text}\n </MascotQuote>\n </div>\n )}\n </Section>\n )}\n {children}\n {closing && (\n <Section spacing=\"sm\" aria-labelledby=\"product-closing\">\n <CtaPanel id=\"product-closing\" title={closing.title} body={closing.body} reveal>\n {closing.actions}\n </CtaPanel>\n </Section>\n )}\n </div>\n );\n}\n"
|
|
203
203
|
}
|
|
204
204
|
],
|
|
205
205
|
"dependencies": [],
|
package/registry/rail-nav.json
CHANGED