@nanisoft/prism-ui 0.13.0 → 0.15.0

package/dist/blocks/hero-01/hero.js

@@ -1,6 +1,6 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from 'react';
 import { ArrowRight } from 'lucide-react';
-import { Button } from '../../components/ui/button.js';
 import { CtaLink } from '../../components/ui/cta-link.js';
 import { Section, SectionHeading } from '../../components/ui/section.js';
 import { cn } from '../../lib/utils.js';
@@ -28,12 +28,15 @@ import { cn } from '../../lib/utils.js';
  * figure is on the right at desktop and below the copy when the columns stack,
  * which is the order a reader on a phone wants: what this is, then what it does.
  *
- * **Actions are real links.** An action naming an `href` renders as an anchor
- * with the matching `rel`, because a control that looks like a link and is not
- * one is a dead end. An action with no destination renders as a `Button`, which
- * is inert here by design: a Block ships no behaviour, so the honest form of
- * "this does something" in a composed section is the consumer's own control in
- * the slot.
+ * **Actions are real links, and a control that is not a link is the caller's.**
+ * An action naming an `href` renders as an anchor with the matching `rel`,
+ * because a control that looks like a link and is not one is a dead end. An
+ * action that cannot be a link takes a `slot`, and this Block renders the node it
+ * is given rather than a `Button` it cannot wire to anything. The earlier shape
+ * had a third possibility, a label with no destination, and it rendered a bare
+ * `<button>` on the primary call to action of a marketing hero: focusable,
+ * announced as a button, and activating to nothing. That was the type's defect
+ * rather than the render's, and the arms above are what close it.
  *
  * It composes `Section` and `SectionHeading`, so it inherits the container and
  * the vertical rhythm rather than re-deriving either, and it adds no container
@@ -42,17 +45,22 @@ import { cn } from '../../lib/utils.js';
 export function Hero01({ eyebrow, title, description, actions = [], align = 'center', instrument, split, headingLevel = 'h2', className, }) {
     const twoColumn = split ?? instrument !== undefined;
     const copy = (_jsxs("div", { "data-slot": "hero-01-copy", className: cn('flex flex-col gap-10', twoColumn ? 'items-start text-left' : align === 'center' ? 'items-center text-center' : 'items-start text-left'), children: [eyebrow ? (_jsx("span", { className: "bg-muted text-muted-foreground rounded-full px-3 py-1 text-xs font-medium", children: eyebrow })) : null, _jsx(SectionHeading, { as: headingLevel, align: twoColumn ? 'left' : align, title: title, description: description }), actions.length ? (_jsx("div", { className: "flex flex-col gap-3 sm:flex-row", children: actions.map((action, index) => {
+                    // A slot is the caller's own control, placed where it asked to be and
+                    // otherwise untouched. Keyed positionally for the reason the other
+                    // keyed lists in this package state: two actions may share a label, and
+                    // a row keyed on a localised label remounts when the reader changes
+                    // language.
+                    if ('slot' in action) {
+                        return _jsx(Fragment, { children: action.slot }, index);
+                    }
                     const variant = action.variant ?? (index === 0 ? 'default' : 'outline');
                     // The arrow is a link affordance, so it follows the element and not the
                     // position. It was `index === 0`, which put a "goes forward" arrow on an
                     // inert button: the one control in the row that cannot be followed wore
-                    // the mark that says it can. A first action that is genuinely a button
-                    // gets no arrow, and a second action that is a link still gets none,
-                    // because the arrow marks the row's primary destination and only one
-                    // thing is that.
-                    const isLink = action.href !== undefined;
-                    const content = (_jsxs(_Fragment, { children: [action.label, index === 0 && isLink ? (_jsx(ArrowRight, { className: "motion-safe:transition-transform size-4 group-hover:translate-x-0.5" })) : null] }));
-                    return isLink ? (_jsx(CtaLink, { href: action.href, newTab: action.newTab, size: "lg", variant: variant, className: "group", children: content }, index)) : (_jsx(Button, { size: "lg", variant: variant, className: "group", children: content }, index));
+                    // the mark that says it can. Every action Prism renders is now a link,
+                    // so the position is the whole of the test, and a slot at the front wears
+                    // no arrow because the control it carries owns its own marks.
+                    return (_jsxs(CtaLink, { href: action.href, newTab: action.newTab, size: "lg", variant: variant, className: "group", children: [action.label, index === 0 ? _jsx(ArrowRight, { className: "transition-transform size-4 group-hover:translate-x-0.5" }) : null] }, index));
                 }) })) : null] }));
     return (_jsxs(Section, { className: cn('relative overflow-hidden', className), children: [_jsx("div", { "aria-hidden": true, className: "from-primary/5 pointer-events-none absolute inset-0 -z-10 bg-gradient-to-b to-transparent" }), _jsxs("div", { "data-slot": "hero-01-band", className: cn(twoColumn
                     ? 'grid items-center gap-10 lg:grid-cols-[5fr_6fr] lg:gap-14'

package/dist/blocks/hero-01/index.d.ts

@@ -1,3 +1,3 @@
 export { Hero01, default } from './hero.js';
-export type { HeroAction, Hero01Props } from './hero.js';
+export type { HeroAction, HeroLinkAction, HeroSlotAction, Hero01Props } from './hero.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/blocks/hero-01/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/blocks/hero-01/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAIxC,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/blocks/hero-01/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAMxC,YAAY,EAAE,UAAU,EAAE,cAAc,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAA"}

package/dist/blocks/hero-02/hero-02.d.ts

@@ -0,0 +1,244 @@
+import { type ReactNode } from 'react';
+import { type HeadingLevel } from '../../components/ui/section.js';
+/**
+ * One action in a hero's action row that names a destination.
+ *
+ * One of the two arms of `Hero02Action`, named for the reason `Hero01` names its
+ * own: a consumer assembling a row from its own data can say which arm it is
+ * building, and `FeatureGrid01` names its two arms the same way.
+ *
+ * `href` is required and that is the whole of the arm. A control drawn as a call
+ * to action and with nowhere to go is a dead end, and this Block cannot repair
+ * one: a Block ships no behaviour, so there is no handler to attach and no
+ * destination to invent.
+ */
+export type Hero02LinkAction = {
+    /** The words on the control. Every string a hero renders is the caller's. */
+    label: string;
+    /**
+     * Where the action goes. Required rather than optional, so that "a link whose
+     * address is sometimes undefined" is a compile error rather than a control that
+     * navigates on the renders where the address happens to be there.
+     */
+    href: string;
+    /** Opens the destination in a new tab, with the matching `rel`. */
+    newTab?: boolean;
+    /**
+     * Which weight this action draws at, when the caller does not say. Defaults to
+     * `default` for the first action in the row and `outline` for the rest, which is
+     * a decision about the row's shape rather than about the element. A slot carries
+     * its own weight, so it does not take one from here.
+     */
+    variant?: 'default' | 'outline' | 'secondary' | 'ghost';
+    /**
+     * Forbidden, so that an action cannot be both a destination and a caller's own
+     * control. The two are rendered by different code on different elements and a
+     * value carrying both would have to pick one silently.
+     */
+    slot?: never;
+};
+/**
+ * One action in a hero's action row that is the caller's own control.
+ *
+ * **This is the arm that replaced a rendered button, and the reason it is a slot
+ * rather than an `onClick` is that a Block cannot receive one.** This is a server
+ * Component, so a handler is not a prop it can be given, and the arm it replaced
+ * rendered a bare `<button>`: focusable, announced as a button, and activating to
+ * nothing, in the position a reader looks first. The defect was in the **type**,
+ * not in the render, so the fix is a type: the honest form of the escape hatch is
+ * a node the caller renders itself, which this Block can place but cannot make
+ * inert.
+ *
+ * What belongs here is anything Prism cannot make work: a router's own `Link`, a
+ * submit button in the caller's form, a menu trigger. What does not belong here is
+ * a plain anchor; that is the other arm, one property away rather than one
+ * component away.
+ */
+export type Hero02SlotAction = {
+    /**
+     * The caller's own control, placed in the row where this action sits.
+     *
+     * The whole control, including its own label, its own weight and any icon. The
+     * Block draws no frame around it and adds no class to it, because a class it
+     * adds is a style the caller cannot see and cannot remove, and this package has
+     * no override path.
+     */
+    slot: ReactNode;
+    /**
+     * Forbidden on this arm, and for a reason rather than by tidiness: the Block
+     * renders `slot` and nothing else, so a `label` beside it would be a word no
+     * reader ever sees and a caller would reasonably believe had been rendered.
+     */
+    label?: never;
+    /** Forbidden: an anchor belongs on the other arm, where Prism renders it. */
+    href?: never;
+    /** Forbidden with `href`, for the same reason. */
+    newTab?: never;
+    /**
+     * Forbidden, because the Block cannot style a node it does not render. A weight
+     * accepted here and dropped would be the one prop in this Block that a reader
+     * of the type could believe was in effect when it is not.
+     */
+    variant?: never;
+};
+/**
+ * One action in a hero's action row, as a union of the two things an action in
+ * this position can honestly be.
+ *
+ * The same two arms `Hero01` declares, spelled again here rather than imported,
+ * and the reason is worth stating because a reader will ask: a shared type would
+ * mean `@nanisoft/prism-ui/blocks/hero-01` is a dependency of
+ * `@nanisoft/prism-ui/blocks/hero-02`, and a consumer installing the second form
+ * to get a bigger figure would be made to resolve the first. The union is a
+ * handful of lines of typescript, it is checked in both places, and two Blocks
+ * that each answer "is this action a link or the caller's own control" correctly
+ * is not a fact that drifts.
+ *
+ * A single shape with an optional `href` made both of these mistakes silent, and
+ * each was a legal value that rendered a control activating to nothing on the one a
+ * reader looks first: `{ label: 'Start free' }`, which was the likely mistake
+ * because a hero's first action is almost always a link and it looked correct on
+ * the page, and `{ label, href: maybeUrl }`, which navigated on the renders where
+ * the address happened to be there and rendered a button on the others. So the link
+ * arm requires `href`, and the arm that is not a link carries the caller's own
+ * control rather than a `Button` this Block cannot wire to anything. Both of those
+ * values are compile errors now, and `hero-action.types.ts` holds that.
+ */
+export type Hero02Action = Hero02LinkAction | Hero02SlotAction;
+/**
+ * The props a Hero02 takes.
+ *
+ * Every string is a prop and the Block ships none. There is no default eyebrow,
+ * no default headline, no default action row and no default figure: this is the
+ * third block in the hero family and all three of them hold that line, because a
+ * hero with copy in it hands every consumer a claim about somebody else's
+ * product at the exact position on the page where a claim is hardest to argue
+ * with.
+ */
+export type Hero02Props = {
+    /**
+     * Optional label above the headline. It has no default, and the honest state is
+     * no eyebrow: an earlier version of the family shipped a hardcoded open beta
+     * pill, which meant every consumer who installed the Block inherited a status
+     * badge making a claim about their own product.
+     */
+    eyebrow?: string;
+    /** The headline. A node, because a caller may set the emphasised word in its own mark. */
+    title: ReactNode;
+    /** The supporting line under the headline. A node for the same reason. */
+    description?: ReactNode;
+    /** Up to two actions. See `Hero02Action`. */
+    actions?: Hero02Action[];
+    /**
+     * The figure: the whole second half of the band.
+     *
+     * Required, and required rather than optional because the proportion is the
+     * Block. This is the form for a claim the reader has to see, so a Block that
+     * can render without a figure would be a narrower claim than the one its
+     * layout is built to carry.
+     *
+     * **What may go in it, and the test is falsifiable.** Something that would
+     * still be true with every animation stopped: a `PulseSeries` of the queue
+     * depth, a `PulseGraph` of the stages a run passes through, a `Chart` of what
+     * a week of captures looked like. That is the same claim DESIGN.md's Motion
+     * section makes about a demonstration, and this is where a Block has to hold
+     * it: stop the animation and the figure is either still true, or it was a
+     * video with extra steps and the component it was built with is the wrong one.
+     * A slot that only reads while it moves is a decoration with a slot.
+     */
+    figure: ReactNode;
+    /**
+     * The accessible name of the figure region, published on the `<figure>` this
+     * Block draws around the slot and as no visible text.
+     *
+     * Required, and required for the reason `LogoStrip01` requires its `label`: a
+     * Block that ships no copy ships no reader-facing copy either, so the phrase
+     * that says which figure a reader has landed on is the caller's. Two heroes on
+     * one page are two figures a reader navigating by figure cannot tell apart.
+     * Prism will not compose it, because "the pipeline, live", "the estate, now"
+     * and "this week in captures" are three different claims about three different
+     * systems and none of them is this Block's to choose.
+     */
+    figureLabel: string;
+    /**
+     * Heading level for the title. Defaults to `h2` because a Block is composed,
+     * not a page: it installs into a consumer's layout and renders inside catalogue
+     * previews, so the surrounding document already owns the `h1`. A page that uses
+     * this Block as its top-level heading opts in with `headingLevel="h1"`. See
+     * `HeadingLevel`.
+     */
+    headingLevel?: HeadingLevel;
+    /**
+     * Layout only, exactly as on every Component. Changing a Prism-owned visual
+     * property from here is prohibited.
+     */
+    className?: string;
+};
+/**
+ * A marketing hero whose figure is the second half of the band, run to the edge
+ * of the container.
+ *
+ * **What earns this form over `Hero01`'s, and the answer is proportion rather
+ * than importance.** The three heroes in the family are not three tastes about
+ * what matters on a page. They are three answers to how much room a claim needs.
+ * `Hero01` splits its two-column band `5fr / 6fr`, and that ratio is a decision
+ * its own JSDoc states: the copy needs the measure and the figure needs the
+ * width, and at five to six neither is given enough. That is the right answer
+ * when the figure is a supporting object, because then the sentence is the claim
+ * and the drawing is evidence for it. It is the wrong answer when the figure is
+ * the claim, for a reason that is arithmetic rather than aesthetic: at `5fr` of a
+ * 72rem container a graph whose nodes are a readable size is a thumbnail, and a
+ * node label at that width is four characters across, while the copy column at
+ * six shares is already at the end of a comfortable reading measure. There is
+ * nothing left to give. So this Block narrows the copy to four shares, drops the
+ * gap between the columns to nothing, and spends what that saves on the figure.
+ * The copy loses about a fifth of its measure and does not feel it, because a
+ * hero's headline is short and a description of one sentence has room to be
+ * narrow. The figure gains everything.
+ *
+ * **The figure bleeds, and it is not in a card.** The band runs to the container's
+ * edge rather than stopping short of it, so the figure's own boundary is the
+ * page's boundary and there is no rounded rectangle around it saying *object on a
+ * surface*. The cost is honest: a full bleed figure has no frame of its own, so
+ * Prism draws none here and the slot takes whatever the consumer composed, and a
+ * consumer who wants the instrument treatment composes `InstrumentPanel01` into
+ * the slot and gets a panel with its own margin inside a bleed. Both are
+ * arrangements this system allows and neither is decided here.
+ *
+ * **The copy is first in the DOM and stays first at every width.** This is the
+ * rule `Hero01` states and it is not restated because it is optional. A reader
+ * who never sees the figure still reads the headline and the destination, a
+ * screen reader reaches the thesis before the drawing, and the visual order at
+ * desktop is produced by the grid rather than by the markup. The figure moves to
+ * the first position in the visual order only below the breakpoint, where the
+ * columns stack, and the order a reader on a phone wants is what this is, then
+ * what it does.
+ *
+ * **The heading is aligned left because there is content beside it, not under
+ * it.** That is the exception `SectionHeading`'s own rule states, and `Hero01`
+ * is the same exception: a band that is only a heading is the case `center`
+ * exists for, and this band is a heading and a figure side by side. A centred
+ * headline in a column two fifths of the container wide would be a centred
+ * headline in a narrow measure, which is worse than either arrangement it could
+ * have chosen.
+ *
+ * **Actions are real links, and the arrow follows the element.** An action naming
+ * an `href` renders as an anchor with the matching `rel`. An action that cannot be
+ * a link takes a `slot`, and this Block renders the node it is given rather than a
+ * `Button` it cannot wire to anything. The forward arrow marks the row's one
+ * primary destination and only appears when that destination is a link that can
+ * be followed, which is the rule `Hero01` states: every action this Block renders
+ * is now a link, and a slot at the front wears no arrow because the control it
+ * carries owns its own marks. Its movement is a hover on a control the reader
+ * caused, so it is motion the system prices rather than motion it withholds: a
+ * reader who has asked for reduced motion gets the arrow at its resting place.
+ *
+ * It composes `Section` and `SectionHeading`, so it inherits the container and
+ * the vertical rhythm rather than re-deriving either, and it adds no container
+ * width and no section padding of its own.
+ *
+ * It is a server Component: no hook, no state and no client code.
+ */
+export declare function Hero02({ eyebrow, title, description, actions, figure, figureLabel, headingLevel, className, }: Hero02Props): import("react").JSX.Element;
+export default Hero02;
+//# sourceMappingURL=hero-02.d.ts.map

package/dist/blocks/hero-02/hero-02.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hero-02.d.ts","sourceRoot":"","sources":["../../../src/blocks/hero-02/hero-02.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAKhD,OAAO,EAA2B,KAAK,YAAY,EAAE,MAAM,6BAA6B,CAAA;AAGxF;;;;;;;;;;;GAWG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B,6EAA6E;IAC7E,KAAK,EAAE,MAAM,CAAA;IACb;;;;OAIG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ,mEAAmE;IACnE,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,CAAA;IACvD;;;;OAIG;IACH,IAAI,CAAC,EAAE,KAAK,CAAA;CACb,CAAA;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;;;;;;OAOG;IACH,IAAI,EAAE,SAAS,CAAA;IACf;;;;OAIG;IACH,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,6EAA6E;IAC7E,IAAI,CAAC,EAAE,KAAK,CAAA;IACZ,kDAAkD;IAClD,MAAM,CAAC,EAAE,KAAK,CAAA;IACd;;;;OAIG;IACH,OAAO,CAAC,EAAE,KAAK,CAAA;CAChB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,MAAM,YAAY,GAAG,gBAAgB,GAAG,gBAAgB,CAAA;AAE9D;;;;;;;;;GASG;AACH,MAAM,MAAM,WAAW,GAAG;IACxB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,0FAA0F;IAC1F,KAAK,EAAE,SAAS,CAAA;IAChB,0EAA0E;IAC1E,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,6CAA6C;IAC7C,OAAO,CAAC,EAAE,YAAY,EAAE,CAAA;IACxB;;;;;;;;;;;;;;;;OAgBG;IACH,MAAM,EAAE,SAAS,CAAA;IACjB;;;;;;;;;;;OAWG;IACH,WAAW,EAAE,MAAM,CAAA;IACnB;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,YAAY,CAAA;IAC3B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgEG;AACH,wBAAgB,MAAM,CAAC,EACrB,OAAO,EACP,KAAK,EACL,WAAW,EACX,OAAY,EACZ,MAAM,EACN,WAAW,EACX,YAAmB,EACnB,SAAS,GACV,EAAE,WAAW,+BAgFb;AAED,eAAe,MAAM,CAAA"}

package/dist/blocks/hero-02/hero-02.js

@@ -0,0 +1,87 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import { ArrowRight } from 'lucide-react';
+import { CtaLink } from '../../components/ui/cta-link.js';
+import { Section, SectionHeading } from '../../components/ui/section.js';
+import { cn } from '../../lib/utils.js';
+/**
+ * A marketing hero whose figure is the second half of the band, run to the edge
+ * of the container.
+ *
+ * **What earns this form over `Hero01`'s, and the answer is proportion rather
+ * than importance.** The three heroes in the family are not three tastes about
+ * what matters on a page. They are three answers to how much room a claim needs.
+ * `Hero01` splits its two-column band `5fr / 6fr`, and that ratio is a decision
+ * its own JSDoc states: the copy needs the measure and the figure needs the
+ * width, and at five to six neither is given enough. That is the right answer
+ * when the figure is a supporting object, because then the sentence is the claim
+ * and the drawing is evidence for it. It is the wrong answer when the figure is
+ * the claim, for a reason that is arithmetic rather than aesthetic: at `5fr` of a
+ * 72rem container a graph whose nodes are a readable size is a thumbnail, and a
+ * node label at that width is four characters across, while the copy column at
+ * six shares is already at the end of a comfortable reading measure. There is
+ * nothing left to give. So this Block narrows the copy to four shares, drops the
+ * gap between the columns to nothing, and spends what that saves on the figure.
+ * The copy loses about a fifth of its measure and does not feel it, because a
+ * hero's headline is short and a description of one sentence has room to be
+ * narrow. The figure gains everything.
+ *
+ * **The figure bleeds, and it is not in a card.** The band runs to the container's
+ * edge rather than stopping short of it, so the figure's own boundary is the
+ * page's boundary and there is no rounded rectangle around it saying *object on a
+ * surface*. The cost is honest: a full bleed figure has no frame of its own, so
+ * Prism draws none here and the slot takes whatever the consumer composed, and a
+ * consumer who wants the instrument treatment composes `InstrumentPanel01` into
+ * the slot and gets a panel with its own margin inside a bleed. Both are
+ * arrangements this system allows and neither is decided here.
+ *
+ * **The copy is first in the DOM and stays first at every width.** This is the
+ * rule `Hero01` states and it is not restated because it is optional. A reader
+ * who never sees the figure still reads the headline and the destination, a
+ * screen reader reaches the thesis before the drawing, and the visual order at
+ * desktop is produced by the grid rather than by the markup. The figure moves to
+ * the first position in the visual order only below the breakpoint, where the
+ * columns stack, and the order a reader on a phone wants is what this is, then
+ * what it does.
+ *
+ * **The heading is aligned left because there is content beside it, not under
+ * it.** That is the exception `SectionHeading`'s own rule states, and `Hero01`
+ * is the same exception: a band that is only a heading is the case `center`
+ * exists for, and this band is a heading and a figure side by side. A centred
+ * headline in a column two fifths of the container wide would be a centred
+ * headline in a narrow measure, which is worse than either arrangement it could
+ * have chosen.
+ *
+ * **Actions are real links, and the arrow follows the element.** An action naming
+ * an `href` renders as an anchor with the matching `rel`. An action that cannot be
+ * a link takes a `slot`, and this Block renders the node it is given rather than a
+ * `Button` it cannot wire to anything. The forward arrow marks the row's one
+ * primary destination and only appears when that destination is a link that can
+ * be followed, which is the rule `Hero01` states: every action this Block renders
+ * is now a link, and a slot at the front wears no arrow because the control it
+ * carries owns its own marks. Its movement is a hover on a control the reader
+ * caused, so it is motion the system prices rather than motion it withholds: a
+ * reader who has asked for reduced motion gets the arrow at its resting place.
+ *
+ * It composes `Section` and `SectionHeading`, so it inherits the container and
+ * the vertical rhythm rather than re-deriving either, and it adds no container
+ * width and no section padding of its own.
+ *
+ * It is a server Component: no hook, no state and no client code.
+ */
+export function Hero02({ eyebrow, title, description, actions = [], figure, figureLabel, headingLevel = 'h2', className, }) {
+    return (_jsxs(Section, { "data-slot": "hero-02", className: cn('relative overflow-hidden', className), children: [_jsx("div", { "aria-hidden": true, className: "from-primary/5 pointer-events-none absolute inset-0 -z-10 bg-gradient-to-b to-transparent" }), _jsxs("div", { "data-slot": "hero-02-band", className: "grid items-center gap-10 lg:grid-cols-[4fr_8fr] lg:gap-0", children: [_jsxs("div", { "data-slot": "hero-02-copy", className: "flex flex-col items-start gap-10 text-left lg:pe-14", children: [eyebrow ? (_jsx("span", { className: "bg-muted text-muted-foreground rounded-full px-3 py-1 text-xs font-medium", children: eyebrow })) : null, _jsx(SectionHeading, { as: headingLevel, align: "left", title: title, description: description }), actions.length ? (_jsx("div", { "data-slot": "hero-02-actions", className: "flex flex-col gap-3 sm:flex-row", children: actions.map((action, index) => {
+                                    // A slot is the caller's own control, placed where it asked to be and
+                                    // otherwise untouched. Keyed positionally for the reason `Hero01`
+                                    // states.
+                                    if ('slot' in action) {
+                                        return _jsx(Fragment, { children: action.slot }, index);
+                                    }
+                                    const variant = action.variant ?? (index === 0 ? 'default' : 'outline');
+                                    // The arrow follows the element rather than the position, so the
+                                    // rule is the one `Hero01` states: the row's primary destination
+                                    // gets the mark, and every action this Block renders is one.
+                                    return (_jsxs(CtaLink, { href: action.href, newTab: action.newTab, size: "lg", variant: variant, className: "group", children: [action.label, index === 0 ? (_jsx(ArrowRight, { className: "transition-transform size-4 group-hover:translate-x-0.5" })) : null] }, index));
+                                }) })) : null] }), _jsx("figure", { "data-slot": "hero-02-figure", "aria-label": figureLabel, className: "min-w-0 lg:-me-8", children: figure })] })] }));
+}
+export default Hero02;

package/dist/blocks/hero-02/index.d.ts

@@ -0,0 +1,3 @@
+export { Hero02, default } from './hero-02.js';
+export type { Hero02Action, Hero02LinkAction, Hero02SlotAction, Hero02Props } from './hero-02.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/blocks/hero-02/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/blocks/hero-02/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AAM3C,YAAY,EAAE,YAAY,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA"}

package/dist/blocks/hero-02/index.js

@@ -0,0 +1 @@
+export { Hero02, default } from './hero-02.js';