@nanisoft/prism-ui 0.13.0 → 0.15.0

package/dist/blocks/careers-01/careers.d.ts

@@ -0,0 +1,186 @@
+import type { ReactNode } from 'react';
+import { type HeadingLevel } from '../../components/ui/section.js';
+/**
+ * The link arm and the no-link arm of one role, as a union.
+ *
+ * The same agreement `CaseStudies01` makes, for the same reason: a row whose only
+ * link is the job title reads as a title, and the sentence that says what
+ * following it does is a claim about the page a reader is about to land on and
+ * therefore about whoever wrote that page. So `hrefLabel` is required in the link
+ * arm rather than defaulted here.
+ */
+export type CareersRoleLink = {
+    /** Where the role goes. Present makes the row carry a link. */
+    href: string;
+    /** The words on the link, and what following it does. */
+    hrefLabel: string;
+    /** Opens the destination in a new browsing context, with the matching `rel`. */
+    newTab?: boolean;
+} | {
+    href?: never;
+    hrefLabel?: never;
+    newTab?: never;
+};
+/**
+ * One open role: what it is, which team it is in, where it is, how it is worked,
+ * and where it is applied for.
+ *
+ * `title`, `team` and `location` are required, and the reason is the one the
+ * whole section turns on. A role list exists so a reader can decide whether a
+ * job is worth reading about, and the three fields are the three questions every
+ * reader asks before that: what is it, who would I be working with, and where
+ * would I be. A row missing any of them is not a role, it is a title with a link,
+ * and a page of those is a page a reader has to open every row to evaluate, which
+ * is the cost the list was supposed to remove.
+ *
+ * `pattern` is the working pattern and it is optional, because a company that
+ * works in one place everywhere has nothing to add on that axis and a blank would
+ * be a lie in the other direction. `postedAt` is a string for the reason
+ * `Story01`'s `at` is: a Block ships no formatting, and the honest way to render a
+ * date in a caller's own locale and script is `RelativeTime` or the platform's
+ * own `Intl`, both of which the caller composes.
+ *
+ * `closed` is a state and not a removal, and the JSDoc on the Block says why at
+ * length. It is the one field here that exists to make the Block say less.
+ */
+export type CareersRole = {
+    /** A stable key for the role. */
+    id: string;
+    /** The role's own title, as it is written in the posting. */
+    title: string;
+    /** The team the role sits in. */
+    team: string;
+    /** Where the role is. */
+    location: string;
+    /** The working pattern, for a company that has more than one. */
+    pattern?: string;
+    /** A sentence or two about the work, for a page that has room for it. */
+    summary?: ReactNode;
+    /** When it was posted, already written the way the reader should see it. */
+    postedAt?: string;
+    /**
+     * Marks the role as no longer open, which dims the row and states the caller's
+     * `closedLabel` on it. See the Block's JSDoc for why a closed role is rendered
+     * rather than filtered out.
+     */
+    closed?: boolean;
+} & CareersRoleLink;
+/**
+ * The props a Careers01 takes.
+ *
+ * Every string and every summary is a prop, and the Block ships none: no role, no
+ * team, no location and no default "no open roles" sentence. A list that
+ * hardcoded its rows would hand every consumer a set of jobs that are not theirs.
+ */
+export type Careers01Props = {
+    /** Optional label above the section title. See the No-Default-Eyebrow Rule. */
+    eyebrow?: string;
+    /**
+     * The section title. Required, because a page that lists roles without saying
+     * why it exists reads as a job board and not as a company telling a reader
+     * what it is working on.
+     */
+    title: ReactNode;
+    /** One or two sentences under the title. */
+    description?: string;
+    /**
+     * The roles, in the order a reader should meet them. Order is the caller's
+     * because it is a claim about which role leads.
+     */
+    roles: CareersRole[];
+    /**
+     * The caller's own team and location controls, rendered above the list.
+     *
+     * A slot and not a `teams` prop, and the reason is that a filter is a control
+     * and this Block ships no behaviour. Narrowing a list to one team means reading
+     * which roles are in it and rendering fewer of them, so a `teams` prop here
+     * would either filter a copy the Block then no longer owns or need the state
+     * that a Block is not allowed to hold. A slot lets the caller compose its own
+     * `TagGroup`, its own `Combobox` or a set of `Button`s wired to a query it
+     * fetches itself, and the list below it stays a list.
+     */
+    filters?: ReactNode;
+    /**
+     * What a reader sees when the caller's own filter has narrowed the list to
+     * nothing. Omit it and an empty list is an empty list.
+     */
+    empty?: ReactNode;
+    /**
+     * The words for a role that is no longer open. Required when any role is
+     * closed, because a dimmed row with no explanation is a row a reader cannot
+     * tell from a rendering fault.
+     */
+    closedLabel?: string;
+    /**
+     * Whether the roles are rows in a list or cards in a grid.
+     *
+     * `list` is the default because a role list is read by scanning its left edge:
+     * a reader is looking for a title they recognise and the location beside it, and
+     * a card per role puts a box between them. `cards` is for a page that has
+     * narrowed to a handful of roles, where a card gives the summary and the apply
+     * link room a row does not have.
+     */
+    variant?: 'list' | 'cards';
+    /** Heading level for the section title. See `HeadingLevel`. */
+    headingLevel?: HeadingLevel;
+    /**
+     * Layout only, exactly as on every Block. Changing a Prism-owned visual
+     * property from here is prohibited.
+     */
+    className?: string;
+};
+/**
+ * Open roles: a list where each row carries the role, the team, the location, the
+ * working pattern and a link to apply, with a slot for the caller's own filters.
+ *
+ * **A closed role is rendered dimmed rather than filtered out, and the reason is
+ * what a reader learns from each.** A reader who was told a role existed and finds
+ * it gone learns nothing at all: the absence is indistinguishable from a mistake,
+ * from a pagination bug, or from a company that removes a posting the moment
+ * somebody applies. Worse, a list that silently shrinks is a list a reader stops
+ * trusting, because a list that can lose a row without saying so is a list whose
+ * rows cannot be relied on to be there when a reader comes back. So the row stays,
+ * it is dimmed, and the caller's `closedLabel` says what happened. The Block
+ * throws when a closed role arrives with no `closedLabel`, because a dimmed row
+ * with no words on it is exactly the defect this is fixing: a reader looking at a
+ * faded line and given nothing to read about it.
+ *
+ * **The framing is a recruiting pattern translated, and the claim in this JSDoc is
+ * about the pattern rather than about NaniSoft's headcount.** A pipeline that
+ * runs needs people watching it, and the pattern every one of these marketing
+ * sites wants is the same: here is the work, here is who does it, here is where
+ * they sit, and here is the sentence that says what applying does. That is a
+ * recruiting page wearing a product's clothes, and a Block that shipped the words
+ * would put NaniSoft's own headcount into every consumer's careers page. So the
+ * roles, the teams, the locations and the closed label are all props, and the
+ * framing is written here and in the Demo where it belongs.
+ *
+ * **The three required fields are the three questions a reader asks, and requiring
+ * them is what makes the list scannable.** What is the job, who would I be working
+ * with, and where would I be. A row missing any one of them is a title with a
+ * link, and a page of those is a page a reader has to open every row to evaluate,
+ * which is the exact cost a list of roles exists to remove. `pattern` and
+ * `summary` are optional and additive, so a company with one location and a page
+ * with no room for a summary passes neither and the row renders what it has.
+ *
+ * **`filters` is a slot rather than a `teams` prop, and the reason is that a
+ * filter is a control.** Narrowing a list to one team means deciding which roles
+ * are in it and rendering fewer of them, so a `teams` prop would either filter a
+ * copy the Block then no longer owns, or need the state a Block is not allowed to
+ * hold. A `ReactNode` lets the caller compose its own control, wire it to a query
+ * it fetches itself, and hand the narrowed list back through `roles`. The cost is
+ * that the Block cannot say what happens when the list is empty, which is why
+ * `empty` is a prop and not a sentence: the honest empty state for a filtered list
+ * is the caller's, because only the caller knows whether the filter or the data is
+ * the reason.
+ *
+ * A role's title is a heading one step below the section, derived rather than
+ * written. A summary that runs past three sentences belongs in the posting rather
+ * than in a row, because a reader scanning a list is reading titles and locations
+ * and a sentence in the middle of that scan is a sentence they skip.
+ *
+ * It is a server Component: no hook, no state and no client code.
+ */
+export declare function Careers01({ eyebrow, title, description, roles, filters, empty, closedLabel, variant, headingLevel, className, }: Careers01Props): import("react").JSX.Element;
+export default Careers01;
+//# sourceMappingURL=careers.d.ts.map

package/dist/blocks/careers-01/careers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"careers.d.ts","sourceRoot":"","sources":["../../../src/blocks/careers-01/careers.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItC,OAAO,EAAuC,KAAK,YAAY,EAAE,MAAM,6BAA6B,CAAA;AAGpG;;;;;;;;GAQG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B,+DAA+D;IAC/D,IAAI,EAAE,MAAM,CAAA;IACZ,yDAAyD;IACzD,SAAS,EAAE,MAAM,CAAA;IACjB,gFAAgF;IAChF,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,GAAG;IACF,IAAI,CAAC,EAAE,KAAK,CAAA;IACZ,SAAS,CAAC,EAAE,KAAK,CAAA;IACjB,MAAM,CAAC,EAAE,KAAK,CAAA;CACf,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,MAAM,WAAW,GAAG;IACxB,iCAAiC;IACjC,EAAE,EAAE,MAAM,CAAA;IACV,6DAA6D;IAC7D,KAAK,EAAE,MAAM,CAAA;IACb,iCAAiC;IACjC,IAAI,EAAE,MAAM,CAAA;IACZ,yBAAyB;IACzB,QAAQ,EAAE,MAAM,CAAA;IAChB,iEAAiE;IACjE,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,yEAAyE;IACzE,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,GAAG,eAAe,CAAA;AAEnB;;;;;;GAMG;AACH,MAAM,MAAM,cAAc,GAAG;IAC3B,+EAA+E;IAC/E,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;;;OAIG;IACH,KAAK,EAAE,SAAS,CAAA;IAChB,4CAA4C;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;OAGG;IACH,KAAK,EAAE,WAAW,EAAE,CAAA;IACpB;;;;;;;;;;OAUG;IACH,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC1B,+DAA+D;IAC/D,YAAY,CAAC,EAAE,YAAY,CAAA;IAC3B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmDG;AACH,wBAAgB,SAAS,CAAC,EACxB,OAAO,EACP,KAAK,EACL,WAAW,EACX,KAAK,EACL,OAAO,EACP,KAAK,EACL,WAAW,EACX,OAAgB,EAChB,YAAmB,EACnB,SAAS,GACV,EAAE,cAAc,+BAuHhB;AAED,eAAe,SAAS,CAAA"}

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

@@ -0,0 +1,83 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card, CardContent, CardHeader, CardTitle } from '../../components/ui/card.js';
+import { CtaLink } from '../../components/ui/cta-link.js';
+import { Section, SectionHeading, childLevel } from '../../components/ui/section.js';
+import { cn } from '../../lib/utils.js';
+/**
+ * Open roles: a list where each row carries the role, the team, the location, the
+ * working pattern and a link to apply, with a slot for the caller's own filters.
+ *
+ * **A closed role is rendered dimmed rather than filtered out, and the reason is
+ * what a reader learns from each.** A reader who was told a role existed and finds
+ * it gone learns nothing at all: the absence is indistinguishable from a mistake,
+ * from a pagination bug, or from a company that removes a posting the moment
+ * somebody applies. Worse, a list that silently shrinks is a list a reader stops
+ * trusting, because a list that can lose a row without saying so is a list whose
+ * rows cannot be relied on to be there when a reader comes back. So the row stays,
+ * it is dimmed, and the caller's `closedLabel` says what happened. The Block
+ * throws when a closed role arrives with no `closedLabel`, because a dimmed row
+ * with no words on it is exactly the defect this is fixing: a reader looking at a
+ * faded line and given nothing to read about it.
+ *
+ * **The framing is a recruiting pattern translated, and the claim in this JSDoc is
+ * about the pattern rather than about NaniSoft's headcount.** A pipeline that
+ * runs needs people watching it, and the pattern every one of these marketing
+ * sites wants is the same: here is the work, here is who does it, here is where
+ * they sit, and here is the sentence that says what applying does. That is a
+ * recruiting page wearing a product's clothes, and a Block that shipped the words
+ * would put NaniSoft's own headcount into every consumer's careers page. So the
+ * roles, the teams, the locations and the closed label are all props, and the
+ * framing is written here and in the Demo where it belongs.
+ *
+ * **The three required fields are the three questions a reader asks, and requiring
+ * them is what makes the list scannable.** What is the job, who would I be working
+ * with, and where would I be. A row missing any one of them is a title with a
+ * link, and a page of those is a page a reader has to open every row to evaluate,
+ * which is the exact cost a list of roles exists to remove. `pattern` and
+ * `summary` are optional and additive, so a company with one location and a page
+ * with no room for a summary passes neither and the row renders what it has.
+ *
+ * **`filters` is a slot rather than a `teams` prop, and the reason is that a
+ * filter is a control.** Narrowing a list to one team means deciding which roles
+ * are in it and rendering fewer of them, so a `teams` prop would either filter a
+ * copy the Block then no longer owns, or need the state a Block is not allowed to
+ * hold. A `ReactNode` lets the caller compose its own control, wire it to a query
+ * it fetches itself, and hand the narrowed list back through `roles`. The cost is
+ * that the Block cannot say what happens when the list is empty, which is why
+ * `empty` is a prop and not a sentence: the honest empty state for a filtered list
+ * is the caller's, because only the caller knows whether the filter or the data is
+ * the reason.
+ *
+ * A role's title is a heading one step below the section, derived rather than
+ * written. A summary that runs past three sentences belongs in the posting rather
+ * than in a row, because a reader scanning a list is reading titles and locations
+ * and a sentence in the middle of that scan is a sentence they skip.
+ *
+ * It is a server Component: no hook, no state and no client code.
+ */
+export function Careers01({ eyebrow, title, description, roles, filters, empty, closedLabel, variant = 'list', headingLevel = 'h2', className, }) {
+    // A role's title is a heading one step below the section that introduces the
+    // set, so a reader navigating by heading finds the roles under the section that
+    // introduces them rather than as a run of siblings of it.
+    const Title = childLevel(headingLevel);
+    if (roles.some((role) => role.closed) && !closedLabel) {
+        throw new Error('Careers01: a role was passed with closed set and no closedLabel, so the row would be dimmed with ' +
+            'nothing on it saying why. A reader who was told a role existed and finds a faded row with no words ' +
+            'learns less than a page that never showed the role. Pass the words you mean, or drop the flag.');
+    }
+    const asCards = variant === 'cards';
+    return (_jsxs(Section, { children: [_jsx(SectionHeading, { as: headingLevel, align: "left", eyebrow: eyebrow, title: title, description: description, className: "mb-10" }), filters ? (_jsx("div", { "data-slot": "careers-01-filters", className: "mb-8", children: filters })) : null, roles.length === 0 ? (empty ? (_jsx("div", { "data-slot": "careers-01-empty", children: empty })) : null) : (_jsx("ul", { "data-slot": "careers-01-roles", "data-variant": variant, className: cn(asCards ? 'grid gap-6 sm:grid-cols-2' : 'flex flex-col', className), children: roles.map((role) => {
+                    const isLink = role.href !== undefined;
+                    return (_jsx("li", { "data-slot": "careers-01-role", "data-closed": role.closed ? true : undefined, className: cn(asCards && 'h-full', 
+                        // Dimming is opacity on the whole row rather than a colour on the
+                        // title, because a closed row is still a real row that a reader
+                        // can read: the words are the same words, they are just quieter,
+                        // and a title in a different colour reads as a different kind of
+                        // role rather than as a role that is no longer open.
+                        role.closed && 'opacity-60'), children: _jsxs(Card, { className: cn('h-full gap-4 py-5', 
+                            // A row carries its title and its facts on one line, which is
+                            // what a scan down the left edge needs; a card stacks them.
+                            !asCards && 'md:flex-row md:items-center md:justify-between md:gap-8'), children: [_jsxs(CardHeader, { className: "gap-2", children: [_jsx(CardTitle, { children: _jsx(Title, { children: role.title }) }), role.summary ? (_jsx("p", { className: "text-muted-foreground text-pretty text-sm", children: role.summary })) : null, _jsxs("div", { "data-slot": "careers-01-facts", className: "text-muted-foreground mt-1 flex flex-wrap items-center gap-x-4 gap-y-1 text-sm", children: [_jsx("span", { "data-slot": "careers-01-team", children: role.team }), _jsx("span", { "data-slot": "careers-01-location", children: role.location }), role.pattern ? (_jsx("span", { "data-slot": "careers-01-pattern", children: role.pattern })) : null, role.postedAt ? (_jsx("span", { "data-slot": "careers-01-posted", className: "font-mono text-xs", children: role.postedAt })) : null] }), role.closed ? (_jsx("span", { "data-slot": "careers-01-closed-label", className: "text-muted-foreground text-xs font-medium", children: closedLabel })) : null] }), isLink ? (_jsx(CardContent, { className: "md:shrink-0", children: _jsx(CtaLink, { href: role.href, newTab: role.newTab, variant: "outline", size: "sm", children: role.hrefLabel }) })) : null] }) }, role.id));
+                }) }))] }));
+}
+export default Careers01;

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

@@ -0,0 +1,3 @@
+export { Careers01, default } from './careers.js';
+export type { Careers01Props, CareersRole, CareersRoleLink } from './careers.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/blocks/careers-01/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AAM9C,YAAY,EAAE,cAAc,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,WAAW,CAAA"}

package/dist/blocks/careers-01/index.js

@@ -0,0 +1 @@
+export { Careers01, default } from './careers.js';

package/dist/blocks/case-studies-01/case-studies.d.ts

@@ -0,0 +1,192 @@
+import type { ReactNode } from 'react';
+import { type HeadingLevel } from '../../components/ui/section.js';
+/**
+ * One result a customer got: the name of it and the value.
+ *
+ * The two members are `FactList`'s own `Fact`, and that is not a coincidence to be
+ * tidied away later. A case study's results are terms and their answers, not
+ * figures in a row, and a definition list announces the term before the value
+ * where a set of big numerals does not: a reader who lands on a study with a
+ * number they do not recognise needs to know what it is before they can weigh it.
+ * Composing `FactList` is also the reason these read the same as the facts
+ * elsewhere on a page, which a hand-drawn pair of `dt` and `dd` would not.
+ */
+export type CaseStudyResult = {
+    label: ReactNode;
+    value: ReactNode;
+};
+/**
+ * The link arm and the no-link arm of one study, as a union.
+ *
+ * A study that names a destination has to be given the sentence that says what
+ * following it does, and this is the type that says so. A card whose only link is
+ * the customer name reads as a name: the reader sees a company, assumes it is
+ * the whole of what is there, and the work behind it is one click away and
+ * unmentioned. "Read the case study" is a claim about the page a reader is about
+ * to land on, and it belongs to whoever wrote that page, so `hrefLabel` is
+ * required in the link arm rather than optional beside it.
+ */
+export type CaseStudyLink = {
+    /**
+     * Where the study goes. Present makes the card carry a link.
+     */
+    href: string;
+    /**
+     * The words on the link, and the only way a reader learns what following it
+     * does.
+     */
+    hrefLabel: string;
+    /** Opens the destination in a new browsing context, with the matching `rel`. */
+    newTab?: boolean;
+} | {
+    href?: never;
+    hrefLabel?: never;
+    newTab?: never;
+};
+/**
+ * One case study: who it was for, what sector they are in, what the situation
+ * was, what came of it, and where the full account lives.
+ *
+ * `customer`, `sector` and `summary` are the same fields `CaseStudy01` takes,
+ * spelled identically and with the same meanings, and the reason is the whole of
+ * the relationship between the two Blocks. One study is a full band: a reader who
+ * has decided to read one about a named customer gets the situation, the approach
+ * and the results at length. Many studies are a set of summaries: a reader
+ * scanning a grid is choosing between them, and the grid has to hold the same
+ * facts at a quarter of the length. Because the fields are the same, a consumer
+ * that has a data model for one has it for both, and a study promoted from the
+ * grid into its own band is the same record rather than a second shape of record
+ * to keep in step. That is the kind of agreement a design system should make and
+ * usually does not, and it costs nothing here: the two Blocks draw different
+ * arrangements of the same four fields and neither of them owns a field.
+ *
+ * `id` is a key and not a label, for the reason `Story01` states: a grid of
+ * studies is reordered by a consumer as often as it is read, and a key made of
+ * the words means a rename in the copy is a rename in the key.
+ */
+export type CaseStudy = {
+    id: string;
+    /** The customer's own name, spelled as the customer spells it. */
+    customer: string;
+    /** The sector the customer is in, for a grid that groups or filters by it. */
+    sector?: string;
+    /** The situation and what was done about it, in a few sentences. */
+    summary: ReactNode;
+    /** What came of it, as terms and their answers. Composed onto `FactList`. */
+    results?: CaseStudyResult[];
+    /** A figure of the work, composed by the caller. */
+    media?: ReactNode;
+} & CaseStudyLink;
+/** How many studies a grid puts on one line. The tracks, not the study count. */
+export type CaseStudyColumns = 2 | 3;
+/**
+ * The props a CaseStudies01 takes.
+ *
+ * Every string, every result and every figure is a prop and the Block ships none:
+ * no customer, no sector, no figure and no placeholder result. A grid that
+ * hardcoded its studies would hand every consumer a set of customers that are not
+ * theirs, which is a claim about named companies and the worst of the
+ * hardcoded-copy family.
+ */
+export type CaseStudies01Props = {
+    /** Optional label above the section title. See the No-Default-Eyebrow Rule. */
+    eyebrow?: string;
+    /** The section title. Omit it for a grid composed under its own heading. */
+    title?: string;
+    /** One or two sentences under the title. */
+    description?: string;
+    /**
+     * The studies, in the order a reader should meet them. Order is the caller's
+     * because it is a claim about which one leads.
+     */
+    studies: CaseStudy[];
+    /**
+     * Whether the studies are cards in a grid or rows in a list.
+     *
+     * `grid` is the default because a reader scanning a page chooses between
+     * studies, and choosing is a comparison that wants the peers visible at once.
+     * `list` is for a page that has already narrowed to one sector, where the
+     * studies are read one after another rather than compared, and where a full
+     * width row per study gives the summary and the figure room two cards do not
+     * have.
+     */
+    variant?: 'grid' | 'list';
+    /**
+     * How many studies sit on one line in the `grid` variant. Ignored by `list`,
+     * which has one study per line by definition.
+     *
+     * @defaultValue 2
+     */
+    columns?: CaseStudyColumns;
+    /** Heading level for the section title. See `HeadingLevel`. */
+    headingLevel?: HeadingLevel;
+    /**
+     * Layout only, exactly as on every Block. Changing a Prism-owned visual
+     * property from here is prohibited.
+     */
+    className?: string;
+};
+/**
+ * A set of case studies as a grid of summaries or a list of rows, each holding
+ * the same fields a single-study band holds.
+ *
+ * **One study and many studies are the same record, and that is the decision
+ * worth having made.** The alternative was a `CaseStudy` type declared here that
+ * is a narrowed version of the one a single-study band takes, so the grid could
+ * hold a shorter summary, a smaller result list and a smaller figure. What that
+ * buys is a grid that can be terse; what it costs is a second shape for one
+ * concept, so a study promoted from the grid to its own band is a mapping, and
+ * two mappings in a consumer's content model are two things that will disagree.
+ * So the fields are shared and identical, and the terseness is the caller's
+ * choice of length rather than a type the Block enforces. The cost is real: a
+ * grid of five studies whose summaries are each the length a full band wants is a
+ * grid nobody scans, and the answer is the caller's to give by writing shorter
+ * summaries in the shorter place.
+ *
+ * **The NaniSoft framing is in this JSDoc and in the Demo, and nowhere in the
+ * Block.** What these studies are evidence for is a pipeline that runs, a market
+ * that is captured rather than reconstructed, an estate that is observed rather
+ * than visited, and findings that go to agents that act on them rather than to a
+ * queue of tickets. A study is the only place on a marketing page where a claim
+ * about a running system is checkable, because it is the only place a named
+ * customer and a number sit in the same card. So the customer, the situation and
+ * the results are props, and the Demo is where a claim of that kind is actually
+ * written, because a Block that shipped one would put a named company and a
+ * fabricated reading into every consumer's page.
+ *
+ * **A link needs a label, and the type is what says so.** `href` without
+ * `hrefLabel` would render a card whose only link is the customer name, and a
+ * reader meets that as a name rather than as a link to work: the visible text is
+ * the company, so the reader assumes the company is all there is, and the study
+ * behind it is a click they were never invited to make. The words on the link say
+ * what following it does, which is a claim about the destination and therefore
+ * about whoever wrote the destination, so the label is required rather than
+ * defaulted. The rejected alternative was a label this Block generated, which
+ * would have been the same three words in every consumer's product in English.
+ *
+ * **The results are a `FactList`, and the reason is the reading order.** A
+ * result is a term and its answer, and a definition list announces the term
+ * before the value. A grid of numerals with a caption under each reverses that,
+ * so a reader who lands on a number they do not recognise has to guess its unit
+ * before they can weigh it. Composing `FactList` also means a result reads the
+ * same on this grid as it does in a plan comparison or a document header, which
+ * is a reader learning one thing rather than four.
+ *
+ * **The list variant puts the figure beside the copy rather than above it, and
+ * the order is copy first.** A reader who never sees the figure still reads the
+ * customer, the situation and the results, and a screen reader reaches the
+ * sentence before the drawing. At every width the copy column comes first in the
+ * DOM, so the order is the same on a phone and on a desktop, where a list that
+ * moved its figure above its copy on a narrow screen would read as a gallery.
+ *
+ * The customer name is the card's title, and it is a heading one step below the
+ * section, derived rather than written, so a Block embedded one level deeper
+ * carries its card titles with it. A summary that runs past four sentences stops
+ * being a summary, and the full account belongs in the single-study band rather
+ * than in a longer string here.
+ *
+ * It is a server Component: no hook, no state and no client code.
+ */
+export declare function CaseStudies01({ eyebrow, title, description, studies, variant, columns, headingLevel, className, }: CaseStudies01Props): import("react").JSX.Element;
+export default CaseStudies01;
+//# sourceMappingURL=case-studies.d.ts.map

package/dist/blocks/case-studies-01/case-studies.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"case-studies.d.ts","sourceRoot":"","sources":["../../../src/blocks/case-studies-01/case-studies.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAKtC,OAAO,EAAuC,KAAK,YAAY,EAAE,MAAM,6BAA6B,CAAA;AAGpG;;;;;;;;;;GAUG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,SAAS,CAAA;IAChB,KAAK,EAAE,SAAS,CAAA;CACjB,CAAA;AAED;;;;;;;;;;GAUG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B;;OAEG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ;;;OAGG;IACH,SAAS,EAAE,MAAM,CAAA;IACjB,gFAAgF;IAChF,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,GAAG;IACF,IAAI,CAAC,EAAE,KAAK,CAAA;IACZ,SAAS,CAAC,EAAE,KAAK,CAAA;IACjB,MAAM,CAAC,EAAE,KAAK,CAAA;CACf,CAAA;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,MAAM,SAAS,GAAG;IACtB,EAAE,EAAE,MAAM,CAAA;IACV,kEAAkE;IAClE,QAAQ,EAAE,MAAM,CAAA;IAChB,8EAA8E;IAC9E,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,oEAAoE;IACpE,OAAO,EAAE,SAAS,CAAA;IAClB,6EAA6E;IAC7E,OAAO,CAAC,EAAE,eAAe,EAAE,CAAA;IAC3B,oDAAoD;IACpD,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB,GAAG,aAAa,CAAA;AAEjB,iFAAiF;AACjF,MAAM,MAAM,gBAAgB,GAAG,CAAC,GAAG,CAAC,CAAA;AAepC;;;;;;;;GAQG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAC/B,+EAA+E;IAC/E,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,4EAA4E;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,4CAA4C;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;OAGG;IACH,OAAO,EAAE,SAAS,EAAE,CAAA;IACpB;;;;;;;;;OASG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACzB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAA;IAC1B,+DAA+D;IAC/D,YAAY,CAAC,EAAE,YAAY,CAAA;IAC3B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4DG;AACH,wBAAgB,aAAa,CAAC,EAC5B,OAAO,EACP,KAAK,EACL,WAAW,EACX,OAAO,EACP,OAAgB,EAChB,OAAW,EACX,YAAmB,EACnB,SAAS,GACV,EAAE,kBAAkB,+BA8FpB;AAED,eAAe,aAAa,CAAA"}

package/dist/blocks/case-studies-01/case-studies.js

@@ -0,0 +1,97 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card, CardContent, CardHeader, CardTitle } from '../../components/ui/card.js';
+import { CtaLink } from '../../components/ui/cta-link.js';
+import { FactList } from '../../components/ui/fact-list.js';
+import { Section, SectionHeading, childLevel } from '../../components/ui/section.js';
+import { cn } from '../../lib/utils.js';
+/**
+ * The tracks a grid of studies gets, from the caller's own column count.
+ *
+ * Spelled out per count so a grid has exactly as many tracks as it declared and
+ * not one empty at the end of a row. Two is the default because a case study's
+ * summary is a paragraph rather than a line, and two paragraphs side by side is
+ * the widest arrangement at which both are still read rather than scanned.
+ */
+const TRACKS = {
+    2: 'sm:grid-cols-2',
+    3: 'sm:grid-cols-2 lg:grid-cols-3',
+};
+/**
+ * A set of case studies as a grid of summaries or a list of rows, each holding
+ * the same fields a single-study band holds.
+ *
+ * **One study and many studies are the same record, and that is the decision
+ * worth having made.** The alternative was a `CaseStudy` type declared here that
+ * is a narrowed version of the one a single-study band takes, so the grid could
+ * hold a shorter summary, a smaller result list and a smaller figure. What that
+ * buys is a grid that can be terse; what it costs is a second shape for one
+ * concept, so a study promoted from the grid to its own band is a mapping, and
+ * two mappings in a consumer's content model are two things that will disagree.
+ * So the fields are shared and identical, and the terseness is the caller's
+ * choice of length rather than a type the Block enforces. The cost is real: a
+ * grid of five studies whose summaries are each the length a full band wants is a
+ * grid nobody scans, and the answer is the caller's to give by writing shorter
+ * summaries in the shorter place.
+ *
+ * **The NaniSoft framing is in this JSDoc and in the Demo, and nowhere in the
+ * Block.** What these studies are evidence for is a pipeline that runs, a market
+ * that is captured rather than reconstructed, an estate that is observed rather
+ * than visited, and findings that go to agents that act on them rather than to a
+ * queue of tickets. A study is the only place on a marketing page where a claim
+ * about a running system is checkable, because it is the only place a named
+ * customer and a number sit in the same card. So the customer, the situation and
+ * the results are props, and the Demo is where a claim of that kind is actually
+ * written, because a Block that shipped one would put a named company and a
+ * fabricated reading into every consumer's page.
+ *
+ * **A link needs a label, and the type is what says so.** `href` without
+ * `hrefLabel` would render a card whose only link is the customer name, and a
+ * reader meets that as a name rather than as a link to work: the visible text is
+ * the company, so the reader assumes the company is all there is, and the study
+ * behind it is a click they were never invited to make. The words on the link say
+ * what following it does, which is a claim about the destination and therefore
+ * about whoever wrote the destination, so the label is required rather than
+ * defaulted. The rejected alternative was a label this Block generated, which
+ * would have been the same three words in every consumer's product in English.
+ *
+ * **The results are a `FactList`, and the reason is the reading order.** A
+ * result is a term and its answer, and a definition list announces the term
+ * before the value. A grid of numerals with a caption under each reverses that,
+ * so a reader who lands on a number they do not recognise has to guess its unit
+ * before they can weigh it. Composing `FactList` also means a result reads the
+ * same on this grid as it does in a plan comparison or a document header, which
+ * is a reader learning one thing rather than four.
+ *
+ * **The list variant puts the figure beside the copy rather than above it, and
+ * the order is copy first.** A reader who never sees the figure still reads the
+ * customer, the situation and the results, and a screen reader reaches the
+ * sentence before the drawing. At every width the copy column comes first in the
+ * DOM, so the order is the same on a phone and on a desktop, where a list that
+ * moved its figure above its copy on a narrow screen would read as a gallery.
+ *
+ * The customer name is the card's title, and it is a heading one step below the
+ * section, derived rather than written, so a Block embedded one level deeper
+ * carries its card titles with it. A summary that runs past four sentences stops
+ * being a summary, and the full account belongs in the single-study band rather
+ * than in a longer string here.
+ *
+ * It is a server Component: no hook, no state and no client code.
+ */
+export function CaseStudies01({ eyebrow, title, description, studies, variant = 'grid', columns = 2, headingLevel = 'h2', className, }) {
+    // A study's name is a heading one step below the section that introduces the
+    // set, so four names under one section read as four children of it rather than
+    // as four competing sections.
+    const Title = childLevel(headingLevel);
+    const asGrid = variant === 'grid';
+    return (_jsxs(Section, { children: [title ? (_jsx(SectionHeading, { as: headingLevel, align: "left", eyebrow: eyebrow, title: title, description: description, className: "mb-12" })) : null, _jsx("ul", { "data-slot": "case-studies-01", "data-variant": variant, className: cn(asGrid ? 'grid gap-6' : 'flex flex-col gap-6', asGrid && TRACKS[columns], className), children: studies.map((study) => {
+                    const isLink = study.href !== undefined;
+                    return (_jsx("li", { "data-slot": "case-studies-01-item", className: cn(asGrid && 'h-full'), children: _jsxs(Card, { className: cn('h-full gap-5 py-6', 
+                            // A row in the list variant is one study per line, so the copy
+                            // and the figure share a single row rather than stacking. The
+                            // tracks are a fraction rather than a count because the figure
+                            // is the reader's and its own proportions decide how much room
+                            // it needs; the copy column is capped rather than the figure.
+                            !asGrid && 'md:grid md:grid-cols-[minmax(0,3fr)_minmax(0,2fr)] md:gap-8'), children: [_jsxs(CardHeader, { children: [study.sector ? (_jsx("span", { "data-slot": "case-studies-01-sector", className: "text-muted-foreground font-mono text-xs", children: study.sector })) : null, _jsx(CardTitle, { children: _jsx(Title, { children: study.customer }) }), _jsx("p", { className: "text-muted-foreground text-pretty text-sm", children: study.summary })] }), _jsxs(CardContent, { className: "flex flex-col gap-5", children: [study.results && study.results.length > 0 ? (_jsx(FactList, { facts: study.results })) : null, study.media ? (_jsx("div", { "data-slot": "case-studies-01-media", className: "min-w-0", children: study.media })) : null, isLink ? (_jsx(CtaLink, { href: study.href, newTab: study.newTab, variant: "ghost", size: "sm", className: "self-start", children: study.hrefLabel })) : null] })] }) }, study.id));
+                }) })] }));
+}
+export default CaseStudies01;

package/dist/blocks/case-studies-01/index.d.ts

@@ -0,0 +1,3 @@
+export { CaseStudies01, default } from './case-studies.js';
+export type { CaseStudies01Props, CaseStudy, CaseStudyColumns, CaseStudyLink, CaseStudyResult, } from './case-studies.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/blocks/case-studies-01/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/blocks/case-studies-01/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AAMvD,YAAY,EACV,kBAAkB,EAClB,SAAS,EACT,gBAAgB,EAChB,aAAa,EACb,eAAe,GAChB,MAAM,gBAAgB,CAAA"}

package/dist/blocks/case-studies-01/index.js

@@ -0,0 +1 @@
+export { CaseStudies01, default } from './case-studies.js';