@ship-it-ui/shipit 0.0.15 → 0.0.16

package/dist/index.d.cts

@@ -1,4 +1,4 @@
-import { BadgeProps, DataTableProps, DataTableColumn } from '@ship-it-ui/ui';
+import { BadgeProps, HeadingLevel, DataTableProps, DataTableColumn } from '@ship-it-ui/ui';
 export { cn } from '@ship-it-ui/ui';
 import * as react from 'react';
 import { HTMLAttributes, ReactNode, ButtonHTMLAttributes, MouseEventHandler, SVGAttributes, Ref } from 'react';
@@ -567,6 +567,12 @@ declare const PathOverlay: react.ForwardRefExoticComponent<PathOverlayProps & re
  */
 interface CTAStripProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
     title: ReactNode;
+    /**
+     * Heading level for the title. Default `'h2'`. Marketing pages typically
+     * place a CTAStrip between sections, so an `h2` matches the section
+     * hierarchy under the page `h1`.
+     */
+    titleAs?: HeadingLevel;
     description?: ReactNode;
     actions?: ReactNode;
 }
@@ -585,12 +591,23 @@ interface FeatureGridProps extends HTMLAttributes<HTMLDivElement> {
     features: ReadonlyArray<Feature>;
     /** Columns at the largest breakpoint. Default 3. */
     columns?: 2 | 3 | 4;
+    /**
+     * Heading level for each feature's title. Default `'h3'` — features sit
+     * under a section `h2` on most marketing pages.
+     */
+    featureTitleAs?: HeadingLevel;
 }
 declare const FeatureGrid: react.ForwardRefExoticComponent<FeatureGridProps & react.RefAttributes<HTMLDivElement>>;
 
 /**
  * Footer — site footer with brand on the left and grouped link columns on
  * the right, plus a copyright line below a divider.
+ *
+ * Each link column is rendered as a proper `<ul>` of `<li>` link rows so
+ * search engines pick up the footer-nav hierarchy correctly. Pass
+ * `address` for a contact block that renders inside `<address>` (the
+ * semantic element for organization contact info — improves local SEO and
+ * structured-data extraction).
  */
 interface FooterLink {
     label: ReactNode;
@@ -608,12 +625,18 @@ interface FooterProps extends HTMLAttributes<HTMLElement> {
     copyright?: ReactNode;
     /** Right-side closing line (e.g., `made with care · san francisco`). */
     closing?: ReactNode;
+    /**
+     * Optional contact / address block. Rendered inside `<address>` next to the
+     * brand for org contact info (phone, email, mailing address).
+     */
+    address?: ReactNode;
 }
 declare const Footer: react.ForwardRefExoticComponent<FooterProps & react.RefAttributes<HTMLElement>>;
 
 /**
  * Hero — landing-page top section. Optional eyebrow / pill above the headline,
- * a large heading (children of `<h1>`), a body description, and an action row.
+ * a large heading (children of `<h1>` by default), a body description, and an
+ * action row.
  *
  * Designed for marketing surfaces only — do not bring this into the app.
  */
@@ -622,6 +645,12 @@ interface HeroProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
     eyebrow?: ReactNode;
     /** Headline. Pass JSX to highlight a phrase (e.g., `<span className="text-accent">…</span>`). */
     title: ReactNode;
+    /**
+     * Heading level for the title. Default `'h1'` — only override on pages that
+     * already have an `<h1>` elsewhere (e.g., a section hero inside a longer
+     * landing page).
+     */
+    titleAs?: HeadingLevel;
     /** Subheading. */
     description?: ReactNode;
     /** Action buttons row. */
@@ -644,6 +673,12 @@ declare const Hero: react.ForwardRefExoticComponent<HeroProps & react.RefAttribu
  * background for the "recommended" tier. Use `priceUnit` for per-period
  * suffixes (e.g. `/ user / mo`) so the unit lays out next to the price
  * baseline-aligned and wraps cleanly when there isn't room.
+ *
+ * Emits a schema.org `Offer` JSON-LD entity when `priceCurrency` is
+ * provided AND a numeric `priceAmount` (or a parseable `price` string like
+ * `"$29"`) is supplied. Cards where the price isn't machine-readable
+ * (e.g. `"Talk to us"`) skip JSON-LD emission unless the consumer passes
+ * `priceAmount` explicitly. Pass `noStructuredData` to opt out entirely.
  */
 interface PricingCardProps extends HTMLAttributes<HTMLDivElement> {
     /** Tier name — e.g., `Pro`, `Team`. */
@@ -660,12 +695,46 @@ interface PricingCardProps extends HTMLAttributes<HTMLDivElement> {
     action?: ReactNode;
     /** Highlight as the recommended tier. */
     featured?: boolean;
+    /**
+     * Heading level for the tier name. Default `'h3'` — pricing tables live
+     * under a section `h2` on most pricing pages.
+     */
+    tierAs?: HeadingLevel;
+    /**
+     * ISO 4217 currency code (e.g. `'USD'`, `'EUR'`). REQUIRED to emit the
+     * `Offer` JSON-LD — without it the script is suppressed.
+     */
+    priceCurrency?: string;
+    /**
+     * Explicit machine-readable price (number). When omitted, parsed from the
+     * visible `price` string by stripping non-numeric characters. Pass this
+     * directly when `price` is JSX or contains unusual formatting.
+     */
+    priceAmount?: number;
+    /**
+     * schema.org `availability` URL, typically `'https://schema.org/InStock'`.
+     */
+    availability?: string;
+    /** Optional URL of the tier's product/checkout page. */
+    url?: string;
+    /** String version of `tier` for the JSON-LD `name`. Required if `tier` is JSX. */
+    tierName?: string;
+    /** String version of `description` for the JSON-LD `description`. */
+    descriptionText?: string;
+    /** Opt out of emitting the `Offer` JSON-LD script. */
+    noStructuredData?: boolean;
 }
 declare const PricingCard: react.ForwardRefExoticComponent<PricingCardProps & react.RefAttributes<HTMLDivElement>>;
 
 /**
  * Testimonial — pull-quote with author + role. Centered for marketing
  * surfaces.
+ *
+ * Emits a schema.org `Review` JSON-LD entity by default. Pass `rating`
+ * (1–5) for `reviewRating` and `itemReviewedName` (plus optional `url`)
+ * for `itemReviewed` to make the JSON-LD eligible for Google's Review
+ * rich results. Without those it still emits a minimal `Review`. Pass
+ * `noStructuredData` to suppress the JSON-LD script entirely.
  */
 interface TestimonialProps extends Omit<HTMLAttributes<HTMLElement>, 'cite' | 'role'> {
     /** The quoted body. */
@@ -676,6 +745,23 @@ interface TestimonialProps extends Omit<HTMLAttributes<HTMLElement>, 'cite' | 'r
     role?: ReactNode;
     /** Avatar initials or full node. */
     avatar?: ReactNode;
+    /**
+     * String version of `quote` for the JSON-LD `reviewBody` field. Required
+     * when `quote` is JSX — without it the JSON-LD script is suppressed.
+     */
+    quoteText?: string;
+    /** String version of `author` for the JSON-LD `author.name`. */
+    authorName?: string;
+    /** String version of `role` for the JSON-LD `author.jobTitle`. */
+    authorJobTitle?: string;
+    /** Star rating (1–5). When provided, emitted as `reviewRating`. */
+    rating?: number;
+    /** Name of the thing being endorsed (product / service / company). */
+    itemReviewedName?: string;
+    /** Optional URL of the thing being endorsed. */
+    url?: string;
+    /** Opt out of emitting the schema.org `Review` JSON-LD script. */
+    noStructuredData?: boolean;
 }
 declare const Testimonial: react.ForwardRefExoticComponent<TestimonialProps & react.RefAttributes<HTMLElement>>;
 
@@ -687,6 +773,11 @@ declare const Testimonial: react.ForwardRefExoticComponent<TestimonialProps & re
  *
  * When `onClick` is provided the whole card becomes a button; otherwise it
  * renders as a plain `<div>`.
+ *
+ * Emits a schema.org `SoftwareApplication` JSON-LD entity by default with
+ * `name`, `dateModified` (from `lastSyncedAt`), and consumer-supplied
+ * `applicationCategory` / `url` / `softwareVersion`. Skipped when `name` is
+ * JSX without a string fallback. Pass `noStructuredData` to suppress.
  */
 type ConnectorStatus = 'connected' | 'syncing' | 'error' | 'disconnected';
 interface ConnectorCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'onClick'> {
@@ -712,6 +803,16 @@ interface ConnectorCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title
      * `button-name`). Optional otherwise.
      */
     accessibleName?: string;
+    /** String version of `name` for the JSON-LD `name` field. */
+    nameText?: string;
+    /** schema.org `applicationCategory` (e.g. `'CRM'`, `'DataConnector'`). */
+    applicationCategory?: string;
+    /** Connector detail URL — emitted as the entity `url`. */
+    url?: string;
+    /** Optional `softwareVersion` string. */
+    softwareVersion?: string;
+    /** Opt out of emitting the `SoftwareApplication` JSON-LD script. */
+    noStructuredData?: boolean;
 }
 declare const ConnectorCard: react.ForwardRefExoticComponent<ConnectorCardProps & react.RefAttributes<HTMLDivElement>>;
 
@@ -766,6 +867,12 @@ interface NotifRowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
     body?: ReactNode;
     /** Right-aligned relative time string (e.g. `9:32`, `Mon`). */
     time?: ReactNode;
+    /**
+     * Machine-readable ISO 8601 string or `Date` for the notification's
+     * timestamp. When set, the visible `time` is wrapped in
+     * `<time dateTime="…">` so the row is crawlable / AI-readable.
+     */
+    dateTime?: string | Date;
     /** Coloring of the unread dot. */
     tone?: NotifTone;
     /** When true, render the unread dot. */

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { BadgeProps, DataTableProps, DataTableColumn } from '@ship-it-ui/ui';
+import { BadgeProps, HeadingLevel, DataTableProps, DataTableColumn } from '@ship-it-ui/ui';
 export { cn } from '@ship-it-ui/ui';
 import * as react from 'react';
 import { HTMLAttributes, ReactNode, ButtonHTMLAttributes, MouseEventHandler, SVGAttributes, Ref } from 'react';
@@ -567,6 +567,12 @@ declare const PathOverlay: react.ForwardRefExoticComponent<PathOverlayProps & re
  */
 interface CTAStripProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
     title: ReactNode;
+    /**
+     * Heading level for the title. Default `'h2'`. Marketing pages typically
+     * place a CTAStrip between sections, so an `h2` matches the section
+     * hierarchy under the page `h1`.
+     */
+    titleAs?: HeadingLevel;
     description?: ReactNode;
     actions?: ReactNode;
 }
@@ -585,12 +591,23 @@ interface FeatureGridProps extends HTMLAttributes<HTMLDivElement> {
     features: ReadonlyArray<Feature>;
     /** Columns at the largest breakpoint. Default 3. */
     columns?: 2 | 3 | 4;
+    /**
+     * Heading level for each feature's title. Default `'h3'` — features sit
+     * under a section `h2` on most marketing pages.
+     */
+    featureTitleAs?: HeadingLevel;
 }
 declare const FeatureGrid: react.ForwardRefExoticComponent<FeatureGridProps & react.RefAttributes<HTMLDivElement>>;
 
 /**
  * Footer — site footer with brand on the left and grouped link columns on
  * the right, plus a copyright line below a divider.
+ *
+ * Each link column is rendered as a proper `<ul>` of `<li>` link rows so
+ * search engines pick up the footer-nav hierarchy correctly. Pass
+ * `address` for a contact block that renders inside `<address>` (the
+ * semantic element for organization contact info — improves local SEO and
+ * structured-data extraction).
  */
 interface FooterLink {
     label: ReactNode;
@@ -608,12 +625,18 @@ interface FooterProps extends HTMLAttributes<HTMLElement> {
     copyright?: ReactNode;
     /** Right-side closing line (e.g., `made with care · san francisco`). */
     closing?: ReactNode;
+    /**
+     * Optional contact / address block. Rendered inside `<address>` next to the
+     * brand for org contact info (phone, email, mailing address).
+     */
+    address?: ReactNode;
 }
 declare const Footer: react.ForwardRefExoticComponent<FooterProps & react.RefAttributes<HTMLElement>>;
 
 /**
  * Hero — landing-page top section. Optional eyebrow / pill above the headline,
- * a large heading (children of `<h1>`), a body description, and an action row.
+ * a large heading (children of `<h1>` by default), a body description, and an
+ * action row.
  *
  * Designed for marketing surfaces only — do not bring this into the app.
  */
@@ -622,6 +645,12 @@ interface HeroProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
     eyebrow?: ReactNode;
     /** Headline. Pass JSX to highlight a phrase (e.g., `<span className="text-accent">…</span>`). */
     title: ReactNode;
+    /**
+     * Heading level for the title. Default `'h1'` — only override on pages that
+     * already have an `<h1>` elsewhere (e.g., a section hero inside a longer
+     * landing page).
+     */
+    titleAs?: HeadingLevel;
     /** Subheading. */
     description?: ReactNode;
     /** Action buttons row. */
@@ -644,6 +673,12 @@ declare const Hero: react.ForwardRefExoticComponent<HeroProps & react.RefAttribu
  * background for the "recommended" tier. Use `priceUnit` for per-period
  * suffixes (e.g. `/ user / mo`) so the unit lays out next to the price
  * baseline-aligned and wraps cleanly when there isn't room.
+ *
+ * Emits a schema.org `Offer` JSON-LD entity when `priceCurrency` is
+ * provided AND a numeric `priceAmount` (or a parseable `price` string like
+ * `"$29"`) is supplied. Cards where the price isn't machine-readable
+ * (e.g. `"Talk to us"`) skip JSON-LD emission unless the consumer passes
+ * `priceAmount` explicitly. Pass `noStructuredData` to opt out entirely.
  */
 interface PricingCardProps extends HTMLAttributes<HTMLDivElement> {
     /** Tier name — e.g., `Pro`, `Team`. */
@@ -660,12 +695,46 @@ interface PricingCardProps extends HTMLAttributes<HTMLDivElement> {
     action?: ReactNode;
     /** Highlight as the recommended tier. */
     featured?: boolean;
+    /**
+     * Heading level for the tier name. Default `'h3'` — pricing tables live
+     * under a section `h2` on most pricing pages.
+     */
+    tierAs?: HeadingLevel;
+    /**
+     * ISO 4217 currency code (e.g. `'USD'`, `'EUR'`). REQUIRED to emit the
+     * `Offer` JSON-LD — without it the script is suppressed.
+     */
+    priceCurrency?: string;
+    /**
+     * Explicit machine-readable price (number). When omitted, parsed from the
+     * visible `price` string by stripping non-numeric characters. Pass this
+     * directly when `price` is JSX or contains unusual formatting.
+     */
+    priceAmount?: number;
+    /**
+     * schema.org `availability` URL, typically `'https://schema.org/InStock'`.
+     */
+    availability?: string;
+    /** Optional URL of the tier's product/checkout page. */
+    url?: string;
+    /** String version of `tier` for the JSON-LD `name`. Required if `tier` is JSX. */
+    tierName?: string;
+    /** String version of `description` for the JSON-LD `description`. */
+    descriptionText?: string;
+    /** Opt out of emitting the `Offer` JSON-LD script. */
+    noStructuredData?: boolean;
 }
 declare const PricingCard: react.ForwardRefExoticComponent<PricingCardProps & react.RefAttributes<HTMLDivElement>>;
 
 /**
  * Testimonial — pull-quote with author + role. Centered for marketing
  * surfaces.
+ *
+ * Emits a schema.org `Review` JSON-LD entity by default. Pass `rating`
+ * (1–5) for `reviewRating` and `itemReviewedName` (plus optional `url`)
+ * for `itemReviewed` to make the JSON-LD eligible for Google's Review
+ * rich results. Without those it still emits a minimal `Review`. Pass
+ * `noStructuredData` to suppress the JSON-LD script entirely.
  */
 interface TestimonialProps extends Omit<HTMLAttributes<HTMLElement>, 'cite' | 'role'> {
     /** The quoted body. */
@@ -676,6 +745,23 @@ interface TestimonialProps extends Omit<HTMLAttributes<HTMLElement>, 'cite' | 'r
     role?: ReactNode;
     /** Avatar initials or full node. */
     avatar?: ReactNode;
+    /**
+     * String version of `quote` for the JSON-LD `reviewBody` field. Required
+     * when `quote` is JSX — without it the JSON-LD script is suppressed.
+     */
+    quoteText?: string;
+    /** String version of `author` for the JSON-LD `author.name`. */
+    authorName?: string;
+    /** String version of `role` for the JSON-LD `author.jobTitle`. */
+    authorJobTitle?: string;
+    /** Star rating (1–5). When provided, emitted as `reviewRating`. */
+    rating?: number;
+    /** Name of the thing being endorsed (product / service / company). */
+    itemReviewedName?: string;
+    /** Optional URL of the thing being endorsed. */
+    url?: string;
+    /** Opt out of emitting the schema.org `Review` JSON-LD script. */
+    noStructuredData?: boolean;
 }
 declare const Testimonial: react.ForwardRefExoticComponent<TestimonialProps & react.RefAttributes<HTMLElement>>;
 
@@ -687,6 +773,11 @@ declare const Testimonial: react.ForwardRefExoticComponent<TestimonialProps & re
  *
  * When `onClick` is provided the whole card becomes a button; otherwise it
  * renders as a plain `<div>`.
+ *
+ * Emits a schema.org `SoftwareApplication` JSON-LD entity by default with
+ * `name`, `dateModified` (from `lastSyncedAt`), and consumer-supplied
+ * `applicationCategory` / `url` / `softwareVersion`. Skipped when `name` is
+ * JSX without a string fallback. Pass `noStructuredData` to suppress.
  */
 type ConnectorStatus = 'connected' | 'syncing' | 'error' | 'disconnected';
 interface ConnectorCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'onClick'> {
@@ -712,6 +803,16 @@ interface ConnectorCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title
      * `button-name`). Optional otherwise.
      */
     accessibleName?: string;
+    /** String version of `name` for the JSON-LD `name` field. */
+    nameText?: string;
+    /** schema.org `applicationCategory` (e.g. `'CRM'`, `'DataConnector'`). */
+    applicationCategory?: string;
+    /** Connector detail URL — emitted as the entity `url`. */
+    url?: string;
+    /** Optional `softwareVersion` string. */
+    softwareVersion?: string;
+    /** Opt out of emitting the `SoftwareApplication` JSON-LD script. */
+    noStructuredData?: boolean;
 }
 declare const ConnectorCard: react.ForwardRefExoticComponent<ConnectorCardProps & react.RefAttributes<HTMLDivElement>>;
 
@@ -766,6 +867,12 @@ interface NotifRowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
     body?: ReactNode;
     /** Right-aligned relative time string (e.g. `9:32`, `Mon`). */
     time?: ReactNode;
+    /**
+     * Machine-readable ISO 8601 string or `Date` for the notification's
+     * timestamp. When set, the visible `time` is wrapped in
+     * `<time dateTime="…">` so the row is crawlable / AI-readable.
+     */
+    dateTime?: string | Date;
     /** Coloring of the unread dot. */
     tone?: NotifTone;
     /** When true, render the unread dot. */