@openwarelabs/blocks 0.7.0 → 0.8.0

package/dist/headers/Header01/Header01.types.d.cts

@@ -0,0 +1,18 @@
+import type { HTMLAttributes } from "react";
+import type { BlockAction, BlockBrand, HeaderLink } from "../../shared/shared.types.cjs";
+export interface Header01Labels {
+    /** The phone menu button's name, and the menu's. @default "Menu" */
+    menu?: string;
+}
+export interface Header01Props extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /** The logo and name on the left, linking home. */
+    brand: BlockBrand;
+    /** The site's main links, in the middle. Under 760px wide they move into a menu behind a button. */
+    links: HeaderLink[];
+    /** The one call to action on the right, as a small primary pill: "Start for free". */
+    primaryAction: BlockAction;
+    /** A text link before it, such as "Sign in". On phones it moves into the menu. */
+    secondaryLink?: HeaderLink;
+    /** Words that aren't content (names for screen readers, a menu's name), in English unless you pass your own. */
+    labels?: Header01Labels;
+}

package/dist/headers/Header01/Header01.types.d.ts

@@ -0,0 +1,18 @@
+import type { HTMLAttributes } from "react";
+import type { BlockAction, BlockBrand, HeaderLink } from "../../shared/shared.types.js";
+export interface Header01Labels {
+    /** The phone menu button's name, and the menu's. @default "Menu" */
+    menu?: string;
+}
+export interface Header01Props extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /** The logo and name on the left, linking home. */
+    brand: BlockBrand;
+    /** The site's main links, in the middle. Under 760px wide they move into a menu behind a button. */
+    links: HeaderLink[];
+    /** The one call to action on the right, as a small primary pill: "Start for free". */
+    primaryAction: BlockAction;
+    /** A text link before it, such as "Sign in". On phones it moves into the menu. */
+    secondaryLink?: HeaderLink;
+    /** Words that aren't content (names for screen readers, a menu's name), in English unless you pass your own. */
+    labels?: Header01Labels;
+}

package/dist/headers/Header02/Header02.d.cts

@@ -0,0 +1,6 @@
+import type { Header02Props } from "./Header02.types.cjs";
+/**
+ * A bar across the top with a big menu (a grid of features and a highlight), dropdowns of links and plain links,
+ * then one call to action. On phones everything folds into a panel under the bar.
+ */
+export declare function Header02({ brand, panel, menus, links, primaryAction, secondaryLink, onNavigate, defaultPanelOpen, labels, className, ...props }: Header02Props): import("react").JSX.Element;

package/dist/headers/Header02/Header02.d.ts

@@ -0,0 +1,6 @@
+import type { Header02Props } from "./Header02.types.js";
+/**
+ * A bar across the top with a big menu (a grid of features and a highlight), dropdowns of links and plain links,
+ * then one call to action. On phones everything folds into a panel under the bar.
+ */
+export declare function Header02({ brand, panel, menus, links, primaryAction, secondaryLink, onNavigate, defaultPanelOpen, labels, className, ...props }: Header02Props): import("react").JSX.Element;

package/dist/headers/Header02/Header02.types.d.cts

@@ -0,0 +1,69 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockAction, BlockBrand, HeaderLink } from "../../shared/shared.types.cjs";
+/** One of the cards in the panel: an icon, a title and a line about it. */
+export interface Header02Feature {
+    /** The feature's name. */
+    title: ReactNode;
+    /** A line about it. */
+    description: ReactNode;
+    /** Where it goes. */
+    href: string;
+    /** A 16px icon, usually from lucide-react. */
+    icon?: ReactNode;
+}
+/** The big menu: a grid of features, and a highlighted link beside them. */
+export interface Header02Panel {
+    /** Its button in the bar: "Product". */
+    label: string;
+    /** The cards in the grid. */
+    features: Header02Feature[];
+    /** A card beside the features, for news: a badge, a line and a link. */
+    highlight?: {
+        badge?: ReactNode;
+        title: ReactNode;
+        linkLabel: ReactNode;
+        href: string;
+    };
+}
+export interface Header02MenuItem {
+    /** The item's words. */
+    label: string;
+    /** Where it goes. */
+    href: string;
+    /** A 15px icon, usually from lucide-react. */
+    icon?: ReactNode;
+}
+/** A dropdown of links, in groups with a line between them. */
+export interface Header02Menu {
+    /** Its button in the bar: "Resources". */
+    label: string;
+    /** The items, in groups with a line between them. */
+    groups: Header02MenuItem[][];
+}
+export interface Header02Labels {
+    /** The phone menu button's name. @default "Menu" */
+    menu?: string;
+}
+export interface Header02Props extends Omit<HTMLAttributes<HTMLElement>, "children"> {
+    /** The logo and name on the left, linking home. */
+    brand: BlockBrand;
+    /** The big menu, first in the bar. */
+    panel?: Header02Panel;
+    /** Dropdowns of links after it. */
+    menus?: Header02Menu[];
+    /** Plain links after those. */
+    links?: HeaderLink[];
+    /** The one call to action on the right, as a small primary pill. */
+    primaryAction: BlockAction;
+    /** A link before it, such as "Sign in". On phones it's the panel's last button. */
+    secondaryLink?: HeaderLink;
+    /**
+     * Where a dropdown item goes. Menu items are buttons, so they navigate here.
+     * @default (href) => window.location.assign(href)
+     */
+    onNavigate?(href: string): void;
+    /** Opens the big menu at first, as the docs' preview does. */
+    defaultPanelOpen?: boolean;
+    /** Words that aren't content (names for screen readers, a menu's name), in English unless you pass your own. */
+    labels?: Header02Labels;
+}

package/dist/headers/Header02/Header02.types.d.ts

@@ -0,0 +1,69 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockAction, BlockBrand, HeaderLink } from "../../shared/shared.types.js";
+/** One of the cards in the panel: an icon, a title and a line about it. */
+export interface Header02Feature {
+    /** The feature's name. */
+    title: ReactNode;
+    /** A line about it. */
+    description: ReactNode;
+    /** Where it goes. */
+    href: string;
+    /** A 16px icon, usually from lucide-react. */
+    icon?: ReactNode;
+}
+/** The big menu: a grid of features, and a highlighted link beside them. */
+export interface Header02Panel {
+    /** Its button in the bar: "Product". */
+    label: string;
+    /** The cards in the grid. */
+    features: Header02Feature[];
+    /** A card beside the features, for news: a badge, a line and a link. */
+    highlight?: {
+        badge?: ReactNode;
+        title: ReactNode;
+        linkLabel: ReactNode;
+        href: string;
+    };
+}
+export interface Header02MenuItem {
+    /** The item's words. */
+    label: string;
+    /** Where it goes. */
+    href: string;
+    /** A 15px icon, usually from lucide-react. */
+    icon?: ReactNode;
+}
+/** A dropdown of links, in groups with a line between them. */
+export interface Header02Menu {
+    /** Its button in the bar: "Resources". */
+    label: string;
+    /** The items, in groups with a line between them. */
+    groups: Header02MenuItem[][];
+}
+export interface Header02Labels {
+    /** The phone menu button's name. @default "Menu" */
+    menu?: string;
+}
+export interface Header02Props extends Omit<HTMLAttributes<HTMLElement>, "children"> {
+    /** The logo and name on the left, linking home. */
+    brand: BlockBrand;
+    /** The big menu, first in the bar. */
+    panel?: Header02Panel;
+    /** Dropdowns of links after it. */
+    menus?: Header02Menu[];
+    /** Plain links after those. */
+    links?: HeaderLink[];
+    /** The one call to action on the right, as a small primary pill. */
+    primaryAction: BlockAction;
+    /** A link before it, such as "Sign in". On phones it's the panel's last button. */
+    secondaryLink?: HeaderLink;
+    /**
+     * Where a dropdown item goes. Menu items are buttons, so they navigate here.
+     * @default (href) => window.location.assign(href)
+     */
+    onNavigate?(href: string): void;
+    /** Opens the big menu at first, as the docs' preview does. */
+    defaultPanelOpen?: boolean;
+    /** Words that aren't content (names for screen readers, a menu's name), in English unless you pass your own. */
+    labels?: Header02Labels;
+}

package/dist/headers/Header03/Header03.d.cts

@@ -0,0 +1,6 @@
+import type { Header03Props } from "./Header03.types.cjs";
+/**
+ * The logo in the middle with links either side, for a brand-led site. On tablets and phones every link moves to a
+ * line of its own under the bar, scrolling sideways when it runs out of room.
+ */
+export declare function Header03({ brand, start, end, primaryAction, secondaryLink, labels, className, ...props }: Header03Props): import("react").JSX.Element;

package/dist/headers/Header03/Header03.d.ts

@@ -0,0 +1,6 @@
+import type { Header03Props } from "./Header03.types.js";
+/**
+ * The logo in the middle with links either side, for a brand-led site. On tablets and phones every link moves to a
+ * line of its own under the bar, scrolling sideways when it runs out of room.
+ */
+export declare function Header03({ brand, start, end, primaryAction, secondaryLink, labels, className, ...props }: Header03Props): import("react").JSX.Element;

package/dist/headers/Header03/Header03.types.d.cts

@@ -0,0 +1,24 @@
+import type { HTMLAttributes } from "react";
+import type { BlockAction, BlockBrand, HeaderLink } from "../../shared/shared.types.cjs";
+export interface Header03Labels {
+    /** The left-hand links' name for screen readers. @default "Primary" */
+    start?: string;
+    /** The right-hand links'. @default "More" */
+    end?: string;
+    /** All the links on one line, as on tablets and phones. @default "Main" */
+    all?: string;
+}
+export interface Header03Props extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /** The logo and name in the middle, linking home. */
+    brand: BlockBrand;
+    /** The links on the left of the logo. */
+    start: HeaderLink[];
+    /** The links on the right, before the actions. */
+    end?: HeaderLink[];
+    /** The one call to action on the far right, as a small primary pill. */
+    primaryAction: BlockAction;
+    /** A text link before it, such as "Sign in". On narrow screens it moves left of the logo. */
+    secondaryLink?: HeaderLink;
+    /** Words that aren't content (names for screen readers, a menu's name), in English unless you pass your own. */
+    labels?: Header03Labels;
+}

package/dist/headers/Header03/Header03.types.d.ts

@@ -0,0 +1,24 @@
+import type { HTMLAttributes } from "react";
+import type { BlockAction, BlockBrand, HeaderLink } from "../../shared/shared.types.js";
+export interface Header03Labels {
+    /** The left-hand links' name for screen readers. @default "Primary" */
+    start?: string;
+    /** The right-hand links'. @default "More" */
+    end?: string;
+    /** All the links on one line, as on tablets and phones. @default "Main" */
+    all?: string;
+}
+export interface Header03Props extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /** The logo and name in the middle, linking home. */
+    brand: BlockBrand;
+    /** The links on the left of the logo. */
+    start: HeaderLink[];
+    /** The links on the right, before the actions. */
+    end?: HeaderLink[];
+    /** The one call to action on the far right, as a small primary pill. */
+    primaryAction: BlockAction;
+    /** A text link before it, such as "Sign in". On narrow screens it moves left of the logo. */
+    secondaryLink?: HeaderLink;
+    /** Words that aren't content (names for screen readers, a menu's name), in English unless you pass your own. */
+    labels?: Header03Labels;
+}

package/dist/headers/Header04/Header04.d.cts

@@ -0,0 +1,3 @@
+import type { Header04Props } from "./Header04.types.cjs";
+/** A header with a slim announcement above it: a line of news, a link and a close button that folds it away. */
+export declare function Header04({ announcement, onDismiss, defaultDismissed, brand, links, primaryAction, secondaryLink, onNavigate, labels, className, ...props }: Header04Props): import("react").JSX.Element;

package/dist/headers/Header04/Header04.d.ts

@@ -0,0 +1,3 @@
+import type { Header04Props } from "./Header04.types.js";
+/** A header with a slim announcement above it: a line of news, a link and a close button that folds it away. */
+export declare function Header04({ announcement, onDismiss, defaultDismissed, brand, links, primaryAction, secondaryLink, onNavigate, labels, className, ...props }: Header04Props): import("react").JSX.Element;

package/dist/headers/Header04/Header04.types.d.cts

@@ -0,0 +1,47 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockAction, BlockBrand, HeaderLink } from "../../shared/shared.types.cjs";
+/** The line above the header. */
+export interface Header04Announcement {
+    /** The news, in bold: "Acme 3.0 is out." */
+    title: ReactNode;
+    /** A few words after it, hidden on phones. */
+    description?: ReactNode;
+    /** Where to read more. */
+    link?: {
+        label: ReactNode;
+        /** A shorter label for phones: "Read more". */
+        shortLabel?: ReactNode;
+        href: string;
+    };
+}
+export interface Header04Labels {
+    /** The phone menu's name. @default "Menu" */
+    menu?: string;
+    /** The close button's name. @default "Dismiss the announcement" */
+    dismiss?: string;
+    /** The announcement's name for screen readers. @default "Announcement" */
+    announcement?: string;
+}
+export interface Header04Props extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /** A slim line above the header for a launch or an update, with a link and a close button. */
+    announcement: Header04Announcement;
+    /** Runs when the announcement is closed: remember it (in a cookie or localStorage) to keep it closed next time. */
+    onDismiss?(): void;
+    /** Starts with the announcement closed, for someone who already closed it. */
+    defaultDismissed?: boolean;
+    /** The logo and name on the left, linking home. */
+    brand: BlockBrand;
+    /** The links in the middle. On phones they move into a menu. */
+    links: HeaderLink[];
+    /** The one call to action on the right, as a small primary pill. */
+    primaryAction: BlockAction;
+    /** A text link before it, such as "Sign in". On phones it's the menu's last item. */
+    secondaryLink?: HeaderLink;
+    /**
+     * Where a phone menu item goes. Menu items are buttons, so they navigate here.
+     * @default (href) => window.location.assign(href)
+     */
+    onNavigate?(href: string): void;
+    /** Words that aren't content (names for screen readers, a menu's name), in English unless you pass your own. */
+    labels?: Header04Labels;
+}

package/dist/headers/Header04/Header04.types.d.ts

@@ -0,0 +1,47 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockAction, BlockBrand, HeaderLink } from "../../shared/shared.types.js";
+/** The line above the header. */
+export interface Header04Announcement {
+    /** The news, in bold: "Acme 3.0 is out." */
+    title: ReactNode;
+    /** A few words after it, hidden on phones. */
+    description?: ReactNode;
+    /** Where to read more. */
+    link?: {
+        label: ReactNode;
+        /** A shorter label for phones: "Read more". */
+        shortLabel?: ReactNode;
+        href: string;
+    };
+}
+export interface Header04Labels {
+    /** The phone menu's name. @default "Menu" */
+    menu?: string;
+    /** The close button's name. @default "Dismiss the announcement" */
+    dismiss?: string;
+    /** The announcement's name for screen readers. @default "Announcement" */
+    announcement?: string;
+}
+export interface Header04Props extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /** A slim line above the header for a launch or an update, with a link and a close button. */
+    announcement: Header04Announcement;
+    /** Runs when the announcement is closed: remember it (in a cookie or localStorage) to keep it closed next time. */
+    onDismiss?(): void;
+    /** Starts with the announcement closed, for someone who already closed it. */
+    defaultDismissed?: boolean;
+    /** The logo and name on the left, linking home. */
+    brand: BlockBrand;
+    /** The links in the middle. On phones they move into a menu. */
+    links: HeaderLink[];
+    /** The one call to action on the right, as a small primary pill. */
+    primaryAction: BlockAction;
+    /** A text link before it, such as "Sign in". On phones it's the menu's last item. */
+    secondaryLink?: HeaderLink;
+    /**
+     * Where a phone menu item goes. Menu items are buttons, so they navigate here.
+     * @default (href) => window.location.assign(href)
+     */
+    onNavigate?(href: string): void;
+    /** Words that aren't content (names for screen readers, a menu's name), in English unless you pass your own. */
+    labels?: Header04Labels;
+}

package/dist/headers/Header05/Header05.d.cts

@@ -0,0 +1,3 @@
+import type { Header05Props } from "./Header05.types.cjs";
+/** A header whose links fold into a drawer behind a menu button on tablets and phones, with a second list and both actions. */
+export declare function Header05({ brand, links, more, primaryAction, secondaryLink, defaultOpen, labels, className, ...props }: Header05Props): import("react").JSX.Element;

package/dist/headers/Header05/Header05.d.ts

@@ -0,0 +1,3 @@
+import type { Header05Props } from "./Header05.types.js";
+/** A header whose links fold into a drawer behind a menu button on tablets and phones, with a second list and both actions. */
+export declare function Header05({ brand, links, more, primaryAction, secondaryLink, defaultOpen, labels, className, ...props }: Header05Props): import("react").JSX.Element;

package/dist/headers/Header05/Header05.types.d.cts

@@ -0,0 +1,27 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockAction, BlockBrand, HeaderLink } from "../../shared/shared.types.cjs";
+export interface Header05Labels {
+    /** The menu button's name. @default "Open menu" */
+    open?: string;
+    /** The drawer's title. @default "Menu" */
+    title?: string;
+}
+export interface Header05Props extends Omit<HTMLAttributes<HTMLElement>, "children"> {
+    /** The logo and name on the left, linking home. */
+    brand: BlockBrand;
+    /** The main links. Under 1024px wide they fold into a drawer behind a menu button. */
+    links: HeaderLink[];
+    /** A second, smaller list in the drawer, under a heading. */
+    more?: {
+        title: ReactNode;
+        links: HeaderLink[];
+    };
+    /** The one call to action, as a small primary pill in the bar and a full one at the foot of the drawer. */
+    primaryAction: BlockAction;
+    /** A text link before it, such as "Sign in", and a button beside it in the drawer. */
+    secondaryLink?: HeaderLink;
+    /** Starts with the drawer open, as the docs' phone preview does. */
+    defaultOpen?: boolean;
+    /** Words that aren't content (names for screen readers, a menu's name), in English unless you pass your own. */
+    labels?: Header05Labels;
+}

package/dist/headers/Header05/Header05.types.d.ts

@@ -0,0 +1,27 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockAction, BlockBrand, HeaderLink } from "../../shared/shared.types.js";
+export interface Header05Labels {
+    /** The menu button's name. @default "Open menu" */
+    open?: string;
+    /** The drawer's title. @default "Menu" */
+    title?: string;
+}
+export interface Header05Props extends Omit<HTMLAttributes<HTMLElement>, "children"> {
+    /** The logo and name on the left, linking home. */
+    brand: BlockBrand;
+    /** The main links. Under 1024px wide they fold into a drawer behind a menu button. */
+    links: HeaderLink[];
+    /** A second, smaller list in the drawer, under a heading. */
+    more?: {
+        title: ReactNode;
+        links: HeaderLink[];
+    };
+    /** The one call to action, as a small primary pill in the bar and a full one at the foot of the drawer. */
+    primaryAction: BlockAction;
+    /** A text link before it, such as "Sign in", and a button beside it in the drawer. */
+    secondaryLink?: HeaderLink;
+    /** Starts with the drawer open, as the docs' phone preview does. */
+    defaultOpen?: boolean;
+    /** Words that aren't content (names for screen readers, a menu's name), in English unless you pass your own. */
+    labels?: Header05Labels;
+}