@nadicodeai/ui 10.0.0 → 10.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +0 -25
- package/dist/index.d.ts +1 -30
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -30
- package/package.json +2 -2
- package/dist/components/action-band.d.ts +0 -12
- package/dist/components/action-band.d.ts.map +0 -1
- package/dist/components/action-band.js +0 -48
- package/dist/components/card-marketing.d.ts +0 -30
- package/dist/components/card-marketing.d.ts.map +0 -1
- package/dist/components/card-marketing.js +0 -48
- package/dist/components/code-editor-mockup.d.ts +0 -25
- package/dist/components/code-editor-mockup.d.ts.map +0 -1
- package/dist/components/code-editor-mockup.js +0 -47
- package/dist/components/contact.d.ts +0 -32
- package/dist/components/contact.d.ts.map +0 -1
- package/dist/components/contact.js +0 -46
- package/dist/components/faq-item.d.ts +0 -25
- package/dist/components/faq-item.d.ts.map +0 -1
- package/dist/components/faq-item.js +0 -25
- package/dist/components/faq.d.ts +0 -20
- package/dist/components/faq.d.ts.map +0 -1
- package/dist/components/faq.js +0 -23
- package/dist/components/feature-grid.d.ts +0 -23
- package/dist/components/feature-grid.d.ts.map +0 -1
- package/dist/components/feature-grid.js +0 -33
- package/dist/components/feature-rows.d.ts +0 -23
- package/dist/components/feature-rows.d.ts.map +0 -1
- package/dist/components/feature-rows.js +0 -27
- package/dist/components/hero-split.d.ts +0 -23
- package/dist/components/hero-split.d.ts.map +0 -1
- package/dist/components/hero-split.js +0 -35
- package/dist/components/hero.d.ts +0 -28
- package/dist/components/hero.d.ts.map +0 -1
- package/dist/components/hero.js +0 -45
- package/dist/components/integration-flow.d.ts +0 -36
- package/dist/components/integration-flow.d.ts.map +0 -1
- package/dist/components/integration-flow.js +0 -36
- package/dist/components/live-demo.d.ts +0 -31
- package/dist/components/live-demo.d.ts.map +0 -1
- package/dist/components/live-demo.js +0 -30
- package/dist/components/logo-band.d.ts +0 -33
- package/dist/components/logo-band.d.ts.map +0 -1
- package/dist/components/logo-band.js +0 -49
- package/dist/components/logo-tile.d.ts +0 -21
- package/dist/components/logo-tile.d.ts.map +0 -1
- package/dist/components/logo-tile.js +0 -28
- package/dist/components/media-mount.d.ts +0 -13
- package/dist/components/media-mount.d.ts.map +0 -1
- package/dist/components/media-mount.js +0 -15
- package/dist/components/newsletter.d.ts +0 -24
- package/dist/components/newsletter.d.ts.map +0 -1
- package/dist/components/newsletter.js +0 -31
- package/dist/components/pricing-card.d.ts +0 -30
- package/dist/components/pricing-card.d.ts.map +0 -1
- package/dist/components/pricing-card.js +0 -44
- package/dist/components/pricing.d.ts +0 -25
- package/dist/components/pricing.d.ts.map +0 -1
- package/dist/components/pricing.js +0 -11
- package/dist/components/proof-slot.d.ts +0 -8
- package/dist/components/proof-slot.d.ts.map +0 -1
- package/dist/components/proof-slot.js +0 -8
- package/dist/components/quote-card.d.ts +0 -31
- package/dist/components/quote-card.d.ts.map +0 -1
- package/dist/components/quote-card.js +0 -48
- package/dist/components/seam-grid.d.ts +0 -30
- package/dist/components/seam-grid.d.ts.map +0 -1
- package/dist/components/seam-grid.js +0 -30
- package/dist/components/section-intro.d.ts +0 -18
- package/dist/components/section-intro.d.ts.map +0 -1
- package/dist/components/section-intro.js +0 -22
- package/dist/components/security-grid.d.ts +0 -25
- package/dist/components/security-grid.d.ts.map +0 -1
- package/dist/components/security-grid.js +0 -28
- package/dist/components/shift-band.d.ts +0 -14
- package/dist/components/shift-band.d.ts.map +0 -1
- package/dist/components/shift-band.js +0 -11
- package/dist/components/statement.d.ts +0 -32
- package/dist/components/statement.d.ts.map +0 -1
- package/dist/components/statement.js +0 -40
- package/dist/components/steps.d.ts +0 -34
- package/dist/components/steps.d.ts.map +0 -1
- package/dist/components/steps.js +0 -40
- package/dist/components/team-grid.d.ts +0 -27
- package/dist/components/team-grid.d.ts.map +0 -1
- package/dist/components/team-grid.js +0 -30
- package/dist/components/testimonials.d.ts +0 -48
- package/dist/components/testimonials.d.ts.map +0 -1
- package/dist/components/testimonials.js +0 -58
- package/dist/components/texture-strip.d.ts +0 -22
- package/dist/components/texture-strip.d.ts.map +0 -1
- package/dist/components/texture-strip.js +0 -32
- package/dist/lib/seam.d.ts +0 -29
- package/dist/lib/seam.d.ts.map +0 -1
- package/dist/lib/seam.js +0 -30
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { cn } from "../lib/utils.js";
|
|
3
|
-
/**
|
|
4
|
-
* contact — the closing contact section (V5 B18).
|
|
5
|
-
*
|
|
6
|
-
* A 5fr / 7fr split: a text column (`ContactIntro` — eyebrow/title/body/location)
|
|
7
|
-
* beside a form column (`ContactForm`) that sits on its own soft, bordered panel.
|
|
8
|
-
* The split is a whitespace gap, never a hairline, so `Contact` owns NO structural
|
|
9
|
-
* seam — the frame/lane/row perimeter is owned by the kept geometry layer this
|
|
10
|
-
* composes inside, and every visible border is a control/panel perimeter.
|
|
11
|
-
*
|
|
12
|
-
* The form is presentational only (no submit wiring): consumers own the action and
|
|
13
|
-
* state. Fields use the package `Input`/`Textarea` primitives; labels use the mono
|
|
14
|
-
* uppercase `ContactLabel`. `ContactFieldRow` is the 2-up Name/Company row.
|
|
15
|
-
* Token-only; no `dark:` styling.
|
|
16
|
-
*/
|
|
17
|
-
function Contact({ className, ...props }) {
|
|
18
|
-
return (_jsx("div", { "data-slot": "contact", className: cn("grid min-w-0 grid-cols-1 items-stretch gap-x-[clamp(32px,5vw,72px)] gap-y-10 lg:grid-cols-[5fr_7fr]", className), ...props }));
|
|
19
|
-
}
|
|
20
|
-
/** ContactIntro — the text column: eyebrow/title/body/location, centered vertically. */
|
|
21
|
-
function ContactIntro({ className, ...props }) {
|
|
22
|
-
return (_jsx("div", { "data-slot": "contact-intro", className: cn("grid min-w-0 content-center gap-4", className), ...props }));
|
|
23
|
-
}
|
|
24
|
-
/** ContactLocation — the mono location line under the intro body. */
|
|
25
|
-
function ContactLocation({ className, ...props }) {
|
|
26
|
-
return (_jsx("p", { "data-slot": "contact-location", className: cn("m-0 font-mono text-xs uppercase tracking-[0.1em] text-muted-foreground", className), ...props }));
|
|
27
|
-
}
|
|
28
|
-
function ContactForm({ className, columns = 1, ...props }) {
|
|
29
|
-
return (_jsx("form", { "data-slot": "contact-form", "data-columns": columns, className: cn("grid min-w-0 gap-4 rounded-md border border-border bg-muted p-[clamp(20px,3vw,32px)] text-left", columns === 2 && "sm:grid-cols-2", className), ...props }));
|
|
30
|
-
}
|
|
31
|
-
/** ContactFieldRow — the 2-up Name/Company row inside a single-column form. */
|
|
32
|
-
function ContactFieldRow({ className, ...props }) {
|
|
33
|
-
return (_jsx("div", { "data-slot": "contact-field-row", className: cn("grid grid-cols-1 gap-4 sm:grid-cols-2", className), ...props }));
|
|
34
|
-
}
|
|
35
|
-
/** ContactField — one label-over-control field cell. */
|
|
36
|
-
function ContactField({ className, ...props }) {
|
|
37
|
-
return (_jsx("div", { "data-slot": "contact-field", className: cn("grid min-w-0 gap-1.5", className), ...props }));
|
|
38
|
-
}
|
|
39
|
-
/** ContactLabel — mono uppercase form label (server-safe plain `<label>`). */
|
|
40
|
-
function ContactLabel({ className, ...props }) {
|
|
41
|
-
return (_jsx("label", { "data-slot": "contact-label", className: cn("font-mono text-[9.5px] font-medium uppercase tracking-[0.12em] text-muted-foreground", className), ...props }));
|
|
42
|
-
}
|
|
43
|
-
function ContactActions({ className, ...props }) {
|
|
44
|
-
return (_jsx("div", { "data-slot": "contact-actions", className: cn("mt-1 grid sm:col-span-2 [&>button]:w-full", className), ...props }));
|
|
45
|
-
}
|
|
46
|
-
export { Contact, ContactIntro, ContactLocation, ContactForm, ContactFieldRow, ContactField, ContactLabel, ContactActions, };
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
/**
|
|
3
|
-
* faq-item — native-<details> accordion entry (replaces the retired `.nc-faq-item`).
|
|
4
|
-
*
|
|
5
|
-
* Uses native `<details>`/`<summary>` semantics: exclusive-open is the browser's
|
|
6
|
-
* native `<details name="…">` group behaviour (no JS toggle), and the disclosure
|
|
7
|
-
* carries its own ARIA — `<summary>` exposes the expanded/collapsed state to AT, so
|
|
8
|
-
* an explicit `aria-expanded` is redundant (and we set it as well off the `open`
|
|
9
|
-
* prop for callers that inspect it). A11y: keyboard-operable by default (Enter /
|
|
10
|
-
* Space on the summary); focus-visible takes the global base-layer outline.
|
|
11
|
-
*
|
|
12
|
-
* Seam ownership: the holding `Faq` grid owns the hairline BETWEEN items
|
|
13
|
-
* (gap-as-seam), so this draws no inter-item border. The only seam the item owns is
|
|
14
|
-
* the internal hairline between its summary and answer (the answer's `border-t`),
|
|
15
|
-
* bounded inside the item and revealed only when open. The native disclosure
|
|
16
|
-
* triangle is hidden; a `+`/`−` bar marker carries the affordance. Token-only;
|
|
17
|
-
* no `dark:` styling.
|
|
18
|
-
*/
|
|
19
|
-
declare function FaqItem({ className, question, name, open, children, ...props }: Omit<React.ComponentProps<"details">, "name"> & {
|
|
20
|
-
question: React.ReactNode;
|
|
21
|
-
/** native exclusive-accordion group name; all items in one Faq share it */
|
|
22
|
-
name?: string;
|
|
23
|
-
}): React.JSX.Element;
|
|
24
|
-
export { FaqItem };
|
|
25
|
-
//# sourceMappingURL=faq-item.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"faq-item.d.ts","sourceRoot":"","sources":["../../src/components/faq-item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;;;;;;;;;;;;;;;GAgBG;AAEH,iBAAS,OAAO,CAAC,EACf,SAAS,EACT,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC,GAAG;IACjD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,2EAA2E;IAC3E,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,qBA6BA;AAED,OAAO,EAAE,OAAO,EAAE,CAAC"}
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { cn } from "../lib/utils.js";
|
|
3
|
-
/**
|
|
4
|
-
* faq-item — native-<details> accordion entry (replaces the retired `.nc-faq-item`).
|
|
5
|
-
*
|
|
6
|
-
* Uses native `<details>`/`<summary>` semantics: exclusive-open is the browser's
|
|
7
|
-
* native `<details name="…">` group behaviour (no JS toggle), and the disclosure
|
|
8
|
-
* carries its own ARIA — `<summary>` exposes the expanded/collapsed state to AT, so
|
|
9
|
-
* an explicit `aria-expanded` is redundant (and we set it as well off the `open`
|
|
10
|
-
* prop for callers that inspect it). A11y: keyboard-operable by default (Enter /
|
|
11
|
-
* Space on the summary); focus-visible takes the global base-layer outline.
|
|
12
|
-
*
|
|
13
|
-
* Seam ownership: the holding `Faq` grid owns the hairline BETWEEN items
|
|
14
|
-
* (gap-as-seam), so this draws no inter-item border. The only seam the item owns is
|
|
15
|
-
* the internal hairline between its summary and answer (the answer's `border-t`),
|
|
16
|
-
* bounded inside the item and revealed only when open. The native disclosure
|
|
17
|
-
* triangle is hidden; a `+`/`−` bar marker carries the affordance. Token-only;
|
|
18
|
-
* no `dark:` styling.
|
|
19
|
-
*/
|
|
20
|
-
function FaqItem({ className, question, name, open, children, ...props }) {
|
|
21
|
-
return (_jsxs("details", { "data-slot": "faq-item", name: name, open: open, className: cn("group bg-muted [&_summary::-webkit-details-marker]:hidden", className), ...props, children: [_jsx("summary", { className: cn("flex min-h-16 cursor-pointer list-none items-center justify-between gap-4 px-5 py-4", "text-base font-medium text-foreground transition-colors hover:text-[var(--nc-link)]",
|
|
22
|
-
// +/- marker: two crossed bars; the vertical bar hides when open (+ -> -)
|
|
23
|
-
"after:size-3 after:flex-none after:bg-[length:12px_1px,1px_12px] after:bg-center after:bg-no-repeat", "after:[background-image:linear-gradient(var(--muted-foreground),var(--muted-foreground)),linear-gradient(var(--muted-foreground),var(--muted-foreground))]", "group-open:after:bg-[length:12px_1px] group-open:after:[background-image:linear-gradient(var(--muted-foreground),var(--muted-foreground))]"), children: question }), _jsx("div", { "data-slot": "faq-item-answer", className: "border-t border-border px-5 pt-4 pb-5 text-sm text-muted-foreground", children: children })] }));
|
|
24
|
-
}
|
|
25
|
-
export { FaqItem };
|
package/dist/components/faq.d.ts
DELETED
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
/**
|
|
3
|
-
* faq — single-column question/answer accordion (replaces the retired
|
|
4
|
-
* `sections/faq.css` + its coupled `faq-item` rows).
|
|
5
|
-
*
|
|
6
|
-
* SINGLE-OWNER SEAM: a single-track gap-as-seam grid (`gap-px bg-border`, owned
|
|
7
|
-
* by `SeamGrid` with no `surface`) owns every divider BETWEEN items. Each
|
|
8
|
-
* `FaqItem` is a borderless fill that repairs no inter-item seam; the only
|
|
9
|
-
* hairline an item owns is its internal summary/answer rule (drawn by `FaqItem`,
|
|
10
|
-
* not here). A faq is one column at every breakpoint — no column count, no dark
|
|
11
|
-
* inversion (matching the retired section's variants:none).
|
|
12
|
-
*
|
|
13
|
-
* READING COLUMN (V5 B16): the faq is centered in a narrow 760px reading column
|
|
14
|
-
* (`max-w-[760px] mx-auto`) rather than spanning the full lane. The soft surface is
|
|
15
|
-
* carried by the `FaqItem` fills (`bg-muted`), so the column reads as a soft stack of
|
|
16
|
-
* hairline-separated questions. Token-only; no `dark:` styling.
|
|
17
|
-
*/
|
|
18
|
-
declare function Faq({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
19
|
-
export { Faq };
|
|
20
|
-
//# sourceMappingURL=faq.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"faq.d.ts","sourceRoot":"","sources":["../../src/components/faq.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B;;;;;;;;;;;;;;;GAeG;AAEH,iBAAS,GAAG,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQhE;AAED,OAAO,EAAE,GAAG,EAAE,CAAC"}
|
package/dist/components/faq.js
DELETED
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { cn } from "../lib/utils.js";
|
|
3
|
-
import { SeamGrid } from "./seam-grid.js";
|
|
4
|
-
/**
|
|
5
|
-
* faq — single-column question/answer accordion (replaces the retired
|
|
6
|
-
* `sections/faq.css` + its coupled `faq-item` rows).
|
|
7
|
-
*
|
|
8
|
-
* SINGLE-OWNER SEAM: a single-track gap-as-seam grid (`gap-px bg-border`, owned
|
|
9
|
-
* by `SeamGrid` with no `surface`) owns every divider BETWEEN items. Each
|
|
10
|
-
* `FaqItem` is a borderless fill that repairs no inter-item seam; the only
|
|
11
|
-
* hairline an item owns is its internal summary/answer rule (drawn by `FaqItem`,
|
|
12
|
-
* not here). A faq is one column at every breakpoint — no column count, no dark
|
|
13
|
-
* inversion (matching the retired section's variants:none).
|
|
14
|
-
*
|
|
15
|
-
* READING COLUMN (V5 B16): the faq is centered in a narrow 760px reading column
|
|
16
|
-
* (`max-w-[760px] mx-auto`) rather than spanning the full lane. The soft surface is
|
|
17
|
-
* carried by the `FaqItem` fills (`bg-muted`), so the column reads as a soft stack of
|
|
18
|
-
* hairline-separated questions. Token-only; no `dark:` styling.
|
|
19
|
-
*/
|
|
20
|
-
function Faq({ className, ...props }) {
|
|
21
|
-
return (_jsx(SeamGrid, { "data-slot": "faq", className: cn("mx-auto h-full max-w-[760px] grid-cols-1", className), ...props }));
|
|
22
|
-
}
|
|
23
|
-
export { Faq };
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
declare function FeatureGrid({ eyebrow, intro, closing, link, columns, children, className, ...props }: React.ComponentProps<"div"> & {
|
|
3
|
-
eyebrow?: React.ReactNode;
|
|
4
|
-
intro?: React.ReactNode;
|
|
5
|
-
closing?: React.ReactNode;
|
|
6
|
-
link?: React.ReactNode;
|
|
7
|
-
columns?: 2 | 3 | 4;
|
|
8
|
-
}): React.JSX.Element;
|
|
9
|
-
/**
|
|
10
|
-
* FeatureCard — one peer card: a verde-accent index chip using the canonical
|
|
11
|
-
* `--nc-link-deep` pair (deep verde on light, bright verde on dark), a title, a body
|
|
12
|
-
* paragraph, and an optional bottom visual slot pinned to the card's foot
|
|
13
|
-
* (`mt-auto`). Every part renders only when its content is present; with no visual
|
|
14
|
-
* the card sizes to its copy over a modest min-height so a peer row stays balanced
|
|
15
|
-
* (no cavernous empty foot).
|
|
16
|
-
*/
|
|
17
|
-
declare function FeatureCard({ index, title, visual, children, className, ...props }: React.ComponentProps<"div"> & {
|
|
18
|
-
index?: React.ReactNode;
|
|
19
|
-
title?: React.ReactNode;
|
|
20
|
-
visual?: React.ReactNode;
|
|
21
|
-
}): React.JSX.Element;
|
|
22
|
-
export { FeatureGrid, FeatureCard };
|
|
23
|
-
//# sourceMappingURL=feature-grid.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"feature-grid.d.ts","sourceRoot":"","sources":["../../src/components/feature-grid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAsB/B,iBAAS,WAAW,CAAC,EACnB,OAAO,EACP,KAAK,EACL,OAAO,EACP,IAAI,EACJ,OAAW,EACX,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;CACrB,qBA+BA;AAED;;;;;;;GAOG;AACH,iBAAS,WAAW,CAAC,EACnB,KAAK,EACL,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B,qBAmCA;AAED,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,CAAC"}
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { cn } from "../lib/utils.js";
|
|
3
|
-
import { SeamGrid } from "./seam-grid.js";
|
|
4
|
-
/**
|
|
5
|
-
* feature-grid — an indexed head row over a wall of seamed peer cards, closed by
|
|
6
|
-
* a line of copy and an arrow-link slot (V5 B06).
|
|
7
|
-
*
|
|
8
|
-
* The head (mono eyebrow + intro paragraph) and the close (a trailing line plus a
|
|
9
|
-
* caller-supplied link) are optional slots; absent, they render nothing. The cards
|
|
10
|
-
* are `FeatureCard` peers laid in a SINGLE-OWNER SEAM grid (`SeamGrid`, `gap-px
|
|
11
|
-
* bg-border`), so every divider is owned once and the cards stay borderless fills.
|
|
12
|
-
* Token-only; no `dark:` styling.
|
|
13
|
-
*/
|
|
14
|
-
const columnClasses = {
|
|
15
|
-
2: "grid-cols-1 md:grid-cols-2",
|
|
16
|
-
3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
|
|
17
|
-
4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4",
|
|
18
|
-
};
|
|
19
|
-
function FeatureGrid({ eyebrow, intro, closing, link, columns = 3, children, className, ...props }) {
|
|
20
|
-
return (_jsxs("div", { "data-slot": "feature-grid", className: cn("grid gap-8", className), ...props, children: [eyebrow != null || intro != null ? (_jsxs("div", { "data-slot": "feature-grid-head", className: "grid gap-3", children: [eyebrow != null ? (_jsx("p", { className: "nc-type-label-mono uppercase text-muted-foreground", children: eyebrow })) : null, intro != null ? (_jsx("p", { className: "nc-type-body-md max-w-[64ch] text-muted-foreground", children: intro })) : null] })) : null, _jsx(SeamGrid, { "data-slot": "feature-grid-cards", className: columnClasses[columns], children: children }), closing != null || link != null ? (_jsxs("div", { "data-slot": "feature-grid-close", className: "flex flex-wrap items-baseline gap-x-3 gap-y-2", children: [closing != null ? (_jsx("span", { className: "nc-type-body-md text-muted-foreground", children: closing })) : null, link] })) : null] }));
|
|
21
|
-
}
|
|
22
|
-
/**
|
|
23
|
-
* FeatureCard — one peer card: a verde-accent index chip using the canonical
|
|
24
|
-
* `--nc-link-deep` pair (deep verde on light, bright verde on dark), a title, a body
|
|
25
|
-
* paragraph, and an optional bottom visual slot pinned to the card's foot
|
|
26
|
-
* (`mt-auto`). Every part renders only when its content is present; with no visual
|
|
27
|
-
* the card sizes to its copy over a modest min-height so a peer row stays balanced
|
|
28
|
-
* (no cavernous empty foot).
|
|
29
|
-
*/
|
|
30
|
-
function FeatureCard({ index, title, visual, children, className, ...props }) {
|
|
31
|
-
return (_jsxs("div", { "data-slot": "feature-card", className: cn("flex min-h-[200px] flex-col gap-4 bg-card p-[clamp(20px,2.4vw,32px)]", className), ...props, children: [index != null ? (_jsx("span", { "data-slot": "feature-card-index", className: "nc-type-label-mono text-[var(--nc-link-deep)]", children: index })) : null, title != null ? (_jsx("h3", { "data-slot": "feature-card-title", className: "nc-type-heading-md text-foreground", children: title })) : null, children != null ? (_jsx("p", { "data-slot": "feature-card-body", className: "nc-type-body-sm text-muted-foreground", children: children })) : null, visual != null ? (_jsx("div", { "data-slot": "feature-card-visual", className: "mt-auto", children: visual })) : null] }));
|
|
32
|
-
}
|
|
33
|
-
export { FeatureGrid, FeatureCard };
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
/**
|
|
3
|
-
* feature-rows — alternating text↔art rows (V5 B07).
|
|
4
|
-
*
|
|
5
|
-
* Each `FeatureRow` is a two-cell split: a copy cell and a dotted-texture art
|
|
6
|
-
* panel. The default row runs text (narrow, 5fr) beside art (wide, 7fr); `flip`
|
|
7
|
-
* swaps the visual order so the art sits on the wide left track and the text on
|
|
8
|
-
* the narrow right — while text always leads in the DOM so it reads first when the
|
|
9
|
-
* row stacks to one column.
|
|
10
|
-
*
|
|
11
|
-
* SINGLE-OWNER SEAM: the split divider is the `SeamGrid` gap-as-seam. The art panel
|
|
12
|
-
* is a container-only slot — the chat/export specimens are caller content, never
|
|
13
|
-
* baked in; an empty panel is just the dotted texture. Token-only; no `dark:`
|
|
14
|
-
* styling.
|
|
15
|
-
*/
|
|
16
|
-
declare function FeatureRows({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
17
|
-
declare function FeatureRow({ flip, text, art, className, ...props }: React.ComponentProps<"div"> & {
|
|
18
|
-
flip?: boolean;
|
|
19
|
-
text?: React.ReactNode;
|
|
20
|
-
art?: React.ReactNode;
|
|
21
|
-
}): React.JSX.Element;
|
|
22
|
-
export { FeatureRows, FeatureRow };
|
|
23
|
-
//# sourceMappingURL=feature-rows.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"feature-rows.d.ts","sourceRoot":"","sources":["../../src/components/feature-rows.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B;;;;;;;;;;;;;GAaG;AAEH,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAExE;AAED,iBAAS,UAAU,CAAC,EAClB,IAAY,EACZ,IAAI,EACJ,GAAG,EACH,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACvB,qBA+BA;AAED,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,CAAC"}
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { cn } from "../lib/utils.js";
|
|
3
|
-
import { SeamGrid } from "./seam-grid.js";
|
|
4
|
-
/**
|
|
5
|
-
* feature-rows — alternating text↔art rows (V5 B07).
|
|
6
|
-
*
|
|
7
|
-
* Each `FeatureRow` is a two-cell split: a copy cell and a dotted-texture art
|
|
8
|
-
* panel. The default row runs text (narrow, 5fr) beside art (wide, 7fr); `flip`
|
|
9
|
-
* swaps the visual order so the art sits on the wide left track and the text on
|
|
10
|
-
* the narrow right — while text always leads in the DOM so it reads first when the
|
|
11
|
-
* row stacks to one column.
|
|
12
|
-
*
|
|
13
|
-
* SINGLE-OWNER SEAM: the split divider is the `SeamGrid` gap-as-seam. The art panel
|
|
14
|
-
* is a container-only slot — the chat/export specimens are caller content, never
|
|
15
|
-
* baked in; an empty panel is just the dotted texture. Token-only; no `dark:`
|
|
16
|
-
* styling.
|
|
17
|
-
*/
|
|
18
|
-
function FeatureRows({ className, ...props }) {
|
|
19
|
-
return _jsx("div", { "data-slot": "feature-rows", className: cn("grid", className), ...props });
|
|
20
|
-
}
|
|
21
|
-
function FeatureRow({ flip = false, text, art, className, ...props }) {
|
|
22
|
-
return (_jsxs(SeamGrid, { "data-slot": "feature-row", "data-flip": flip || undefined, className: cn("min-h-[520px] grid-cols-1", flip ? "lg:grid-cols-[7fr_5fr]" : "lg:grid-cols-[5fr_7fr]", className), ...props, children: [_jsx("div", { "data-slot": "feature-row-text", className: cn("nc-panel-cell bg-card", flip && "lg:order-2"), children: text }), _jsx("div", { "data-slot": "feature-row-art", className: cn(
|
|
23
|
-
// The semantic card fill and the raw `--nc-*` tokens used by
|
|
24
|
-
// `nc-dotted-field` both flip under any `.dark` ancestor.
|
|
25
|
-
"nc-dotted-field grid place-items-center overflow-hidden bg-card p-[clamp(24px,4vw,56px)]", flip && "lg:order-1"), children: art })] }));
|
|
26
|
-
}
|
|
27
|
-
export { FeatureRows, FeatureRow };
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
/**
|
|
3
|
-
* hero-split — the page-opening hero (replaces the retired `sections/hero-split.css`).
|
|
4
|
-
*
|
|
5
|
-
* A two-cell split: a copy cell (kicker, headline, lead, CTA row) beside an
|
|
6
|
-
* image-dominant visual cell. SINGLE-OWNER SEAM: the single divider between the two
|
|
7
|
-
* cells is the cell-grid gap-as-seam — the panel paints the brand `line` behind the
|
|
8
|
-
* cells (`bg-border`) and leaves a 1px guide gap (`gap-px`), so the only visible
|
|
9
|
-
* line at that coordinate is the one the grid draws.
|
|
10
|
-
* The frame/lane/row perimeter is owned by the kept geometry layer; the hero adds no
|
|
11
|
-
* competing border.
|
|
12
|
-
*
|
|
13
|
-
* Image-dominant by intent: on desktop the copy cell takes the narrower track and
|
|
14
|
-
* the visual cell the wider one (`1fr / 1.5fr`). The visual cell is a FLUSH mount —
|
|
15
|
-
* no padding, no inset — so the image (the kept design-system `image`/`.nc-image`
|
|
16
|
-
* CSS atom the caller drops into `HeroSplitVisual`) fills the cell edge to edge and
|
|
17
|
-
* is the hero's surface, not a padded stamp. Token-only; no `dark:` styling.
|
|
18
|
-
*/
|
|
19
|
-
declare function HeroSplit({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
20
|
-
declare function HeroSplitCopy({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
21
|
-
declare function HeroSplitVisual({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
22
|
-
export { HeroSplit, HeroSplitCopy, HeroSplitVisual };
|
|
23
|
-
//# sourceMappingURL=hero-split.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"hero-split.d.ts","sourceRoot":"","sources":["../../src/components/hero-split.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B;;;;;;;;;;;;;;;;GAgBG;AAEH,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAYtE;AAED,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAW1E;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAa5E;AAED,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,eAAe,EAAE,CAAC"}
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { cn } from "../lib/utils.js";
|
|
3
|
-
import { SeamGrid } from "./seam-grid.js";
|
|
4
|
-
/**
|
|
5
|
-
* hero-split — the page-opening hero (replaces the retired `sections/hero-split.css`).
|
|
6
|
-
*
|
|
7
|
-
* A two-cell split: a copy cell (kicker, headline, lead, CTA row) beside an
|
|
8
|
-
* image-dominant visual cell. SINGLE-OWNER SEAM: the single divider between the two
|
|
9
|
-
* cells is the cell-grid gap-as-seam — the panel paints the brand `line` behind the
|
|
10
|
-
* cells (`bg-border`) and leaves a 1px guide gap (`gap-px`), so the only visible
|
|
11
|
-
* line at that coordinate is the one the grid draws.
|
|
12
|
-
* The frame/lane/row perimeter is owned by the kept geometry layer; the hero adds no
|
|
13
|
-
* competing border.
|
|
14
|
-
*
|
|
15
|
-
* Image-dominant by intent: on desktop the copy cell takes the narrower track and
|
|
16
|
-
* the visual cell the wider one (`1fr / 1.5fr`). The visual cell is a FLUSH mount —
|
|
17
|
-
* no padding, no inset — so the image (the kept design-system `image`/`.nc-image`
|
|
18
|
-
* CSS atom the caller drops into `HeroSplitVisual`) fills the cell edge to edge and
|
|
19
|
-
* is the hero's surface, not a padded stamp. Token-only; no `dark:` styling.
|
|
20
|
-
*/
|
|
21
|
-
function HeroSplit({ className, ...props }) {
|
|
22
|
-
return (_jsx(SeamGrid, { "data-slot": "hero-split", className: cn(
|
|
23
|
-
// The panel owns internal seams only; the page/frame/hatch rail owns the perimeter.
|
|
24
|
-
"min-h-[inherit] min-w-0 grid-cols-1 sm:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)]", className), ...props }));
|
|
25
|
-
}
|
|
26
|
-
function HeroSplitCopy({ className, ...props }) {
|
|
27
|
-
return (_jsx("div", { "data-slot": "hero-split-copy", className: cn("grid min-w-0 content-center gap-4 overflow-hidden bg-card p-[clamp(24px,4vw,56px)]", className), ...props }));
|
|
28
|
-
}
|
|
29
|
-
function HeroSplitVisual({ className, ...props }) {
|
|
30
|
-
return (_jsx("div", { "data-slot": "hero-split-visual", className: cn(
|
|
31
|
-
// flush mount: no padding/inset; the image fills the cell. canvas shows only
|
|
32
|
-
// until the image covers it. the kept `.nc-image` atom self-sizes here.
|
|
33
|
-
"grid min-w-0 overflow-hidden bg-card [&_.nc-image]:h-full", className), ...props }));
|
|
34
|
-
}
|
|
35
|
-
export { HeroSplit, HeroSplitCopy, HeroSplitVisual };
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
/**
|
|
3
|
-
* hero — the full-viewport, always-dark page-opening hero (V5 · B02).
|
|
4
|
-
*
|
|
5
|
-
* A left-pinned copy column (kicker with an accent bar, poster headline, lead, and a
|
|
6
|
-
* two-CTA row) over a right-anchored visual slot. The hero is ALWAYS dark, so the
|
|
7
|
-
* root carries its own `dark` ancestor class and resolves every colour from the
|
|
8
|
-
* semantic roles that state each element's purpose (`bg-background`,
|
|
9
|
-
* `text-foreground`, `text-muted-foreground`, `bg-primary`, `border-border`).
|
|
10
|
-
*
|
|
11
|
-
* STUBBED VISUAL: `HeroVisual` is a clean static slot the consumer fills with an
|
|
12
|
-
* image or inline SVG (the founder-approved WebGL Duomo particle field is out of
|
|
13
|
-
* scope for this pass). Absent content, it renders only the dark surface behind the
|
|
14
|
-
* copy — no canvas, no WebGL, no motion.
|
|
15
|
-
*
|
|
16
|
-
* The copy parts are typed presentational wrappers; the consumer supplies the words
|
|
17
|
-
* and drops `Button`s into `HeroActions`. Token-only; the root sets its own `dark`
|
|
18
|
-
* class (an accepted ancestor-class remap), never `dark:` utilities.
|
|
19
|
-
*/
|
|
20
|
-
declare function Hero({ className, ...props }: React.ComponentProps<"section">): React.JSX.Element;
|
|
21
|
-
declare function HeroVisual({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
22
|
-
declare function HeroBody({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
23
|
-
declare function HeroKicker({ className, children, ...props }: React.ComponentProps<"p">): React.JSX.Element;
|
|
24
|
-
declare function HeroTitle({ className, ...props }: React.ComponentProps<"h1">): React.JSX.Element;
|
|
25
|
-
declare function HeroLead({ className, ...props }: React.ComponentProps<"p">): React.JSX.Element;
|
|
26
|
-
declare function HeroActions({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
27
|
-
export { Hero, HeroVisual, HeroBody, HeroKicker, HeroTitle, HeroLead, HeroActions };
|
|
28
|
-
//# sourceMappingURL=hero.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"hero.d.ts","sourceRoot":"","sources":["../../src/components/hero.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;;;;;;;;;;;;;;;;GAiBG;AAEH,iBAAS,IAAI,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,qBAWrE;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAevE;AAED,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAWrE;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,qBAc/E;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,qBAQrE;AAED,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,qBAQnE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQxE;AAED,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,WAAW,EAAE,CAAC"}
|
package/dist/components/hero.js
DELETED
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { cn } from "../lib/utils.js";
|
|
3
|
-
/**
|
|
4
|
-
* hero — the full-viewport, always-dark page-opening hero (V5 · B02).
|
|
5
|
-
*
|
|
6
|
-
* A left-pinned copy column (kicker with an accent bar, poster headline, lead, and a
|
|
7
|
-
* two-CTA row) over a right-anchored visual slot. The hero is ALWAYS dark, so the
|
|
8
|
-
* root carries its own `dark` ancestor class and resolves every colour from the
|
|
9
|
-
* semantic roles that state each element's purpose (`bg-background`,
|
|
10
|
-
* `text-foreground`, `text-muted-foreground`, `bg-primary`, `border-border`).
|
|
11
|
-
*
|
|
12
|
-
* STUBBED VISUAL: `HeroVisual` is a clean static slot the consumer fills with an
|
|
13
|
-
* image or inline SVG (the founder-approved WebGL Duomo particle field is out of
|
|
14
|
-
* scope for this pass). Absent content, it renders only the dark surface behind the
|
|
15
|
-
* copy — no canvas, no WebGL, no motion.
|
|
16
|
-
*
|
|
17
|
-
* The copy parts are typed presentational wrappers; the consumer supplies the words
|
|
18
|
-
* and drops `Button`s into `HeroActions`. Token-only; the root sets its own `dark`
|
|
19
|
-
* class (an accepted ancestor-class remap), never `dark:` utilities.
|
|
20
|
-
*/
|
|
21
|
-
function Hero({ className, ...props }) {
|
|
22
|
-
return (_jsx("section", { "data-slot": "hero", className: cn("dark relative isolate min-h-[max(640px,100svh)] overflow-hidden bg-background text-foreground", className), ...props }));
|
|
23
|
-
}
|
|
24
|
-
function HeroVisual({ className, ...props }) {
|
|
25
|
-
return (_jsx("div", { "data-slot": "hero-visual", "aria-hidden": "true", className: cn(
|
|
26
|
-
// Right-anchored static plate. Flush mount: consumer media fills it; empty,
|
|
27
|
-
// it is just the dark surface. This is the stub slot for the WebGL field.
|
|
28
|
-
"pointer-events-none absolute inset-y-0 right-0 z-0 hidden w-[62%] overflow-hidden border-l border-border/60 sm:block", "[&_img]:size-full [&_img]:object-cover [&_svg]:size-full", className), ...props }));
|
|
29
|
-
}
|
|
30
|
-
function HeroBody({ className, ...props }) {
|
|
31
|
-
return (_jsx("div", { "data-slot": "hero-body", className: cn("relative z-10 mx-auto flex min-h-[inherit] w-full max-w-[1200px] flex-col items-start justify-center gap-6 px-[clamp(24px,5vw,64px)] py-[clamp(96px,12vw,120px)]", className), ...props }));
|
|
32
|
-
}
|
|
33
|
-
function HeroKicker({ className, children, ...props }) {
|
|
34
|
-
return (_jsxs("p", { "data-slot": "hero-kicker", className: cn("nc-type-label-mono flex items-center gap-3 uppercase text-muted-foreground", className), ...props, children: [_jsx("span", { "data-slot": "hero-kicker-bar", "aria-hidden": "true", className: "h-0.5 w-8 bg-primary" }), children] }));
|
|
35
|
-
}
|
|
36
|
-
function HeroTitle({ className, ...props }) {
|
|
37
|
-
return (_jsx("h1", { "data-slot": "hero-title", className: cn("nc-type-display-lg max-w-[16ch] text-balance text-foreground", className), ...props }));
|
|
38
|
-
}
|
|
39
|
-
function HeroLead({ className, ...props }) {
|
|
40
|
-
return (_jsx("p", { "data-slot": "hero-lead", className: cn("nc-type-body-lg max-w-[40ch] text-muted-foreground", className), ...props }));
|
|
41
|
-
}
|
|
42
|
-
function HeroActions({ className, ...props }) {
|
|
43
|
-
return (_jsx("div", { "data-slot": "hero-actions", className: cn("mt-2 flex flex-wrap items-center gap-3", className), ...props }));
|
|
44
|
-
}
|
|
45
|
-
export { Hero, HeroVisual, HeroBody, HeroKicker, HeroTitle, HeroLead, HeroActions };
|
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
/**
|
|
3
|
-
* integration-flow — the "how it runs" flow diagram (V5 B10).
|
|
4
|
-
*
|
|
5
|
-
* A four-node flow: three main-row nodes (source → agent → output) plus one
|
|
6
|
-
* branch node (a named person) below the centre. Wide layouts use one inline
|
|
7
|
-
* SVG connector layer. Compact layouts reflow to source → agent → a two-column
|
|
8
|
-
* output/person fork and use CSS borders in the real gaps, so connectors never
|
|
9
|
-
* disappear behind stacked cards. This pass is STATIC: no `animateMotion`, no
|
|
10
|
-
* draw-on stroke animation.
|
|
11
|
-
*
|
|
12
|
-
* All SVG colours resolve through `var(--nc-*)` / semantic role tokens, never a
|
|
13
|
-
* raw literal. `IntegrationFlowLegend` / `IntegrationFlowLegendPill` render the
|
|
14
|
-
* tint key. Copy is props-driven: only the nodes you pass are rendered.
|
|
15
|
-
*
|
|
16
|
-
* Light-surface composition; inherits the page theme and sets no dark root.
|
|
17
|
-
* Token-only; no `dark:` styling.
|
|
18
|
-
*/
|
|
19
|
-
type FlowTone = "neutral" | "primary" | "warning";
|
|
20
|
-
type FlowNode = {
|
|
21
|
-
label: string;
|
|
22
|
-
sublabel?: string;
|
|
23
|
-
tone?: FlowTone;
|
|
24
|
-
icon?: React.ReactNode;
|
|
25
|
-
};
|
|
26
|
-
declare function IntegrationFlow({ nodes, className, ...props }: React.ComponentProps<"div"> & {
|
|
27
|
-
nodes?: FlowNode[];
|
|
28
|
-
}): React.JSX.Element;
|
|
29
|
-
type LegendTone = "primary" | "warning" | "info";
|
|
30
|
-
declare function IntegrationFlowLegend({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
31
|
-
declare function IntegrationFlowLegendPill({ tone, className, ...props }: React.ComponentProps<"span"> & {
|
|
32
|
-
tone?: LegendTone;
|
|
33
|
-
}): React.JSX.Element;
|
|
34
|
-
export { IntegrationFlow, IntegrationFlowLegend, IntegrationFlowLegendPill };
|
|
35
|
-
export type { FlowNode, FlowTone, LegendTone };
|
|
36
|
-
//# sourceMappingURL=integration-flow.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"integration-flow.d.ts","sourceRoot":"","sources":["../../src/components/integration-flow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;;;;;;;;;;;;;;;GAgBG;AAEH,KAAK,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAC;AAElD,KAAK,QAAQ,GAAG;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB,CAAC;AAyDF,iBAAS,eAAe,CAAC,EACvB,KAAU,EACV,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/B,KAAK,CAAC,EAAE,QAAQ,EAAE,CAAC;CACpB,qBA2HA;AAED,KAAK,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC;AAQjD,iBAAS,qBAAqB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQlF;AAED,iBAAS,yBAAyB,CAAC,EACjC,IAAgB,EAChB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,GAAG;IAAE,IAAI,CAAC,EAAE,UAAU,CAAA;CAAE,qBAatD;AAED,OAAO,EAAE,eAAe,EAAE,qBAAqB,EAAE,yBAAyB,EAAE,CAAC;AAC7E,YAAY,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC"}
|
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { cn } from "../lib/utils.js";
|
|
3
|
-
const NODE_BORDER_CLASS = {
|
|
4
|
-
neutral: "border-border",
|
|
5
|
-
primary: "border-primary",
|
|
6
|
-
warning: "border-warning",
|
|
7
|
-
};
|
|
8
|
-
const NODE_CHIP_CLASS = {
|
|
9
|
-
neutral: "bg-muted",
|
|
10
|
-
primary: "bg-[var(--nc-link-bg-soft)]",
|
|
11
|
-
warning: "bg-[var(--nc-warning-soft)]",
|
|
12
|
-
};
|
|
13
|
-
// Default role tones for the canonical four-node arrangement.
|
|
14
|
-
const DEFAULT_TONES = ["neutral", "primary", "neutral", "warning"];
|
|
15
|
-
function FlowNodeBox({ node, tone }) {
|
|
16
|
-
return (_jsxs("div", { "data-slot": "integration-flow-node", "data-tone": tone, className: cn("relative z-10 flex flex-col gap-2 border bg-card p-4", NODE_BORDER_CLASS[tone]), children: [node.icon ? (_jsx("span", { "data-slot": "integration-flow-node-icon", "aria-hidden": "true", className: cn("grid size-8 place-items-center text-foreground [&_svg]:size-4", NODE_CHIP_CLASS[tone]), children: node.icon })) : null, _jsx("span", { "data-slot": "integration-flow-node-label", className: "font-mono text-[11px] tracking-[0.08em] text-foreground uppercase", children: node.label }), node.sublabel ? (_jsx("span", { "data-slot": "integration-flow-node-sublabel", className: "font-mono text-[10px] text-muted-foreground", children: node.sublabel })) : null] }));
|
|
17
|
-
}
|
|
18
|
-
function IntegrationFlow({ nodes = [], className, ...props }) {
|
|
19
|
-
const main = nodes.slice(0, 3);
|
|
20
|
-
const branch = nodes[3];
|
|
21
|
-
const toneOf = (node, i) => node.tone ?? DEFAULT_TONES[i] ?? "neutral";
|
|
22
|
-
return (_jsxs("div", { "data-slot": "integration-flow", className: cn("nc-dotted-field relative grid gap-y-8 bg-card p-6 sm:p-10", className), ...props, children: [_jsxs("svg", { "data-slot": "integration-flow-connectors", className: "pointer-events-none absolute inset-0 hidden size-full sm:block", viewBox: "0 0 300 200", preserveAspectRatio: "none", "aria-hidden": "true", focusable: "false", children: [main.length > 1 ? (_jsx("line", { "data-slot": "integration-flow-link", x1: "60", y1: "46", x2: "140", y2: "46", stroke: "var(--primary)", strokeWidth: "1.5", vectorEffect: "non-scaling-stroke" })) : null, main.length > 2 ? (_jsx("line", { "data-slot": "integration-flow-link", x1: "160", y1: "46", x2: "240", y2: "46", stroke: "var(--primary)", strokeWidth: "1.5", vectorEffect: "non-scaling-stroke" })) : null, branch ? (_jsx("line", { "data-slot": "integration-flow-branch-link", x1: "150", y1: "62", x2: "150", y2: "150", stroke: "var(--border)", strokeWidth: "1.5", strokeDasharray: "4 4", vectorEffect: "non-scaling-stroke" })) : null] }), _jsxs("div", { "data-slot": "integration-flow-main", className: "grid grid-cols-1 gap-y-6 sm:grid-cols-3 sm:gap-x-6 sm:gap-y-8", children: [main[0] ? _jsx(FlowNodeBox, { node: main[0], tone: toneOf(main[0], 0) }) : null, main[1] ? (_jsxs("div", { className: "relative", children: [_jsx("span", { "data-slot": "integration-flow-mobile-link", className: "pointer-events-none absolute -top-6 left-1/2 h-6 border-l border-primary sm:hidden", "aria-hidden": "true" }), _jsx(FlowNodeBox, { node: main[1], tone: toneOf(main[1], 1) })] })) : null, main[2] ? (_jsxs("div", { className: cn("relative grid pt-6 sm:contents", branch ? "grid-cols-2 gap-4" : "grid-cols-1"), children: [_jsx("span", { "data-slot": "integration-flow-mobile-fork-entry", className: "pointer-events-none absolute -top-6 left-1/2 h-6 border-l border-primary sm:hidden", "aria-hidden": "true" }), _jsxs("span", { "data-slot": "integration-flow-mobile-fork", className: cn("pointer-events-none absolute inset-x-0 top-0 h-6 sm:hidden", branch &&
|
|
23
|
-
"before:absolute before:top-3 before:right-1/4 before:left-1/4 before:border-t before:border-primary after:absolute after:top-0 after:left-1/2 after:h-3 after:border-l after:border-primary"), "aria-hidden": "true", children: [_jsx("span", { className: cn("absolute bottom-0 h-3 border-l border-primary", branch ? "left-1/4" : "left-1/2") }), branch ? (_jsx("span", { className: "absolute right-1/4 bottom-0 h-3 border-l border-dashed border-border" })) : null] }), _jsx("div", { className: "sm:col-start-3 sm:row-start-1", children: _jsx(FlowNodeBox, { node: main[2], tone: toneOf(main[2], 2) }) }), branch ? (_jsx("div", { "data-slot": "integration-flow-branch", className: "sm:col-start-2 sm:row-start-2", children: _jsx(FlowNodeBox, { node: branch, tone: toneOf(branch, 3) }) })) : null] })) : null] })] }));
|
|
24
|
-
}
|
|
25
|
-
const LEGEND_TINT_CLASS = {
|
|
26
|
-
primary: "bg-[var(--nc-link-bg-soft)] text-[var(--nc-link-deep)]",
|
|
27
|
-
warning: "bg-[var(--nc-warning-soft)] text-[var(--nc-warning-deep)]",
|
|
28
|
-
info: "bg-[var(--nc-info-soft)] text-[var(--nc-info-deep)]",
|
|
29
|
-
};
|
|
30
|
-
function IntegrationFlowLegend({ className, ...props }) {
|
|
31
|
-
return (_jsx("div", { "data-slot": "integration-flow-legend", className: cn("flex flex-wrap gap-2", className), ...props }));
|
|
32
|
-
}
|
|
33
|
-
function IntegrationFlowLegendPill({ tone = "primary", className, ...props }) {
|
|
34
|
-
return (_jsx("span", { "data-slot": "integration-flow-legend-pill", "data-tone": tone, className: cn("inline-flex items-center gap-1.5 px-2.5 py-1 font-mono text-[10px] tracking-[0.1em] uppercase", LEGEND_TINT_CLASS[tone], className), ...props }));
|
|
35
|
-
}
|
|
36
|
-
export { IntegrationFlow, IntegrationFlowLegend, IntegrationFlowLegendPill };
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
/**
|
|
3
|
-
* live-demo — the faux application window standing in for the agent-at-work
|
|
4
|
-
* recording (V5 B11).
|
|
5
|
-
*
|
|
6
|
-
* `LiveDemoWindow` is a bordered card with a mono title bar, three NEUTRAL chrome
|
|
7
|
-
* dots (muted brand-token fills — deliberately not the literal macOS traffic
|
|
8
|
-
* colours), an optional "live" chip whose dot pulses (a CSS keyframe gated by
|
|
9
|
-
* `motion-reduce:animate-none` so it holds still under reduced-motion), and a
|
|
10
|
-
* stack of status rows. `LiveDemoRow` renders one status line with a soft tint
|
|
11
|
-
* pill: `done` (success tint) or `waiting` (warning tint).
|
|
12
|
-
*
|
|
13
|
-
* Replay interactivity is out of scope this pass — the rows are static. Copy is
|
|
14
|
-
* props-driven: an absent title, chip, or tag renders nothing.
|
|
15
|
-
*
|
|
16
|
-
* Light-surface composition; inherits the page theme and sets no dark root.
|
|
17
|
-
* Token-only; no `dark:` styling.
|
|
18
|
-
*/
|
|
19
|
-
declare function LiveDemoWindow({ title, live, children, className, ...props }: React.ComponentProps<"div"> & {
|
|
20
|
-
title?: React.ReactNode;
|
|
21
|
-
live?: React.ReactNode;
|
|
22
|
-
}): React.JSX.Element;
|
|
23
|
-
type LiveDemoStatus = "done" | "waiting";
|
|
24
|
-
declare function LiveDemoRow({ status, label, tag, className, children, ...props }: React.ComponentProps<"div"> & {
|
|
25
|
-
status?: LiveDemoStatus;
|
|
26
|
-
label?: React.ReactNode;
|
|
27
|
-
tag?: React.ReactNode;
|
|
28
|
-
}): React.JSX.Element;
|
|
29
|
-
export { LiveDemoWindow, LiveDemoRow };
|
|
30
|
-
export type { LiveDemoStatus };
|
|
31
|
-
//# sourceMappingURL=live-demo.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"live-demo.d.ts","sourceRoot":"","sources":["../../src/components/live-demo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;;;;;;;;;;;;;;;GAgBG;AAEH,iBAAS,cAAc,CAAC,EACtB,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB,qBA+CA;AAED,KAAK,cAAc,GAAG,MAAM,GAAG,SAAS,CAAC;AAOzC,iBAAS,WAAW,CAAC,EACnB,MAAe,EACf,KAAK,EACL,GAAG,EACH,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/B,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACvB,qBA8BA;AAED,OAAO,EAAE,cAAc,EAAE,WAAW,EAAE,CAAC;AACvC,YAAY,EAAE,cAAc,EAAE,CAAC"}
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { cn } from "../lib/utils.js";
|
|
3
|
-
/**
|
|
4
|
-
* live-demo — the faux application window standing in for the agent-at-work
|
|
5
|
-
* recording (V5 B11).
|
|
6
|
-
*
|
|
7
|
-
* `LiveDemoWindow` is a bordered card with a mono title bar, three NEUTRAL chrome
|
|
8
|
-
* dots (muted brand-token fills — deliberately not the literal macOS traffic
|
|
9
|
-
* colours), an optional "live" chip whose dot pulses (a CSS keyframe gated by
|
|
10
|
-
* `motion-reduce:animate-none` so it holds still under reduced-motion), and a
|
|
11
|
-
* stack of status rows. `LiveDemoRow` renders one status line with a soft tint
|
|
12
|
-
* pill: `done` (success tint) or `waiting` (warning tint).
|
|
13
|
-
*
|
|
14
|
-
* Replay interactivity is out of scope this pass — the rows are static. Copy is
|
|
15
|
-
* props-driven: an absent title, chip, or tag renders nothing.
|
|
16
|
-
*
|
|
17
|
-
* Light-surface composition; inherits the page theme and sets no dark root.
|
|
18
|
-
* Token-only; no `dark:` styling.
|
|
19
|
-
*/
|
|
20
|
-
function LiveDemoWindow({ title, live, children, className, ...props }) {
|
|
21
|
-
return (_jsxs("div", { "data-slot": "live-demo-window", className: cn("flex flex-col overflow-hidden rounded-md border border-border bg-card", className), ...props, children: [_jsxs("div", { "data-slot": "live-demo-bar", className: "flex items-center gap-3 border-b border-border px-4 py-2.5", children: [_jsx("span", { "data-slot": "live-demo-chrome", "aria-hidden": "true", className: "flex gap-1.5", children: [0, 1, 2].map((i) => (_jsx("span", { className: "size-2.5 rounded-full bg-muted-foreground/40" }, i))) }), title ? (_jsx("span", { "data-slot": "live-demo-title", className: "font-mono text-[10px] tracking-[0.08em] text-muted-foreground uppercase", children: title })) : null] }), live ? (_jsxs("div", { "data-slot": "live-demo-chip", className: "flex items-center gap-2 border-b border-border px-4 py-2.5 font-mono text-[9.5px] tracking-[0.08em] text-[var(--nc-link-deep)] uppercase", children: [_jsx("span", { "aria-hidden": "true", className: "size-1.5 rounded-full bg-primary motion-safe:animate-pulse" }), live] })) : null, _jsx("div", { "data-slot": "live-demo-rows", className: "flex flex-col", children: children })] }));
|
|
22
|
-
}
|
|
23
|
-
const ROW_TINT_CLASS = {
|
|
24
|
-
done: "bg-[var(--nc-link-bg-soft)] text-[var(--nc-link-deep)]",
|
|
25
|
-
waiting: "bg-[var(--nc-warning-soft)] text-[var(--nc-warning-deep)]",
|
|
26
|
-
};
|
|
27
|
-
function LiveDemoRow({ status = "done", label, tag, className, children, ...props }) {
|
|
28
|
-
return (_jsxs("div", { "data-slot": "live-demo-row", "data-status": status, className: cn("flex items-center justify-between gap-3 border-t border-border px-4 py-3 first:border-t-0", className), ...props, children: [label ? (_jsx("span", { "data-slot": "live-demo-row-label", className: "font-mono text-[11px] text-foreground", children: label })) : null, tag ? (_jsx("span", { "data-slot": "live-demo-row-tag", className: cn("shrink-0 px-2 py-0.5 font-mono text-[10px] tracking-[0.06em] uppercase", ROW_TINT_CLASS[status]), children: tag })) : null, children] }));
|
|
29
|
-
}
|
|
30
|
-
export { LiveDemoWindow, LiveDemoRow };
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
/**
|
|
3
|
-
* logo-band / integrations-grid — wall of monochrome marks (replaces the retired
|
|
4
|
-
* `sections/logo-band.css` + `sections/integrations-grid.css` + their coupled
|
|
5
|
-
* `logo-tile` cells).
|
|
6
|
-
*
|
|
7
|
-
* Identical kernel geometry in both intents (a `LogoTile` wall in the gap-as-seam
|
|
8
|
-
* grid); they differ only in label/density of intent, so one composition backs
|
|
9
|
-
* both and the two names below keep the section vocabulary distinct (matching the
|
|
10
|
-
* retired CSS, which kept two section files over identical primitives).
|
|
11
|
-
*
|
|
12
|
-
* V5 logo-cloud usage: a caller stacks a mono `LogoBandLabel` caption above each
|
|
13
|
-
* auto-fit tile row (`columns="auto"`), e.g. "the tools you already use" over one
|
|
14
|
-
* row and "many models, no lock-in" over the next — the two-row composition is the
|
|
15
|
-
* caller's, this component only owns one labelled tile wall.
|
|
16
|
-
*
|
|
17
|
-
* SINGLE-OWNER SEAM: the grid owns every divider once (`gap-px bg-border`). Each
|
|
18
|
-
* `LogoTile` is borderless and square-cornered. `surface="ink"` flips only the
|
|
19
|
-
* seam colour, never its weight. Token-only; no `dark:` styling.
|
|
20
|
-
*/
|
|
21
|
-
declare function LogoGrid({ className, columns, surface, ...props }: React.ComponentProps<"div"> & {
|
|
22
|
-
columns?: 2 | 3 | 4 | 5 | 6 | "auto";
|
|
23
|
-
surface?: "canvas" | "ink";
|
|
24
|
-
}): React.JSX.Element;
|
|
25
|
-
declare function LogoBand({ ...props }: React.ComponentProps<typeof LogoGrid>): React.JSX.Element;
|
|
26
|
-
declare function IntegrationsGrid({ ...props }: React.ComponentProps<typeof LogoGrid>): React.JSX.Element;
|
|
27
|
-
/**
|
|
28
|
-
* LogoBandLabel — the mono caption row that sits above a tile wall (V5 `.lab`).
|
|
29
|
-
* Small uppercase mono in the muted role; the caller supplies the words.
|
|
30
|
-
*/
|
|
31
|
-
declare function LogoBandLabel({ className, ...props }: React.ComponentProps<"p">): React.JSX.Element;
|
|
32
|
-
export { LogoBand, IntegrationsGrid, LogoBandLabel };
|
|
33
|
-
//# sourceMappingURL=logo-band.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"logo-band.d.ts","sourceRoot":"","sources":["../../src/components/logo-band.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAgB/B;;;;;;;;;;;;;;;;;;GAkBG;AAEH,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,OAAW,EACX,OAAkB,EAClB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/B,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC;IACrC,OAAO,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;CAC5B,qBAYA;AAED,iBAAS,QAAQ,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,qBAEpE;AAED,iBAAS,gBAAgB,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,qBAE5E;AAED;;;GAGG;AACH,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,qBAQxE;AAED,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,aAAa,EAAE,CAAC"}
|