highsoft-ui 1.0.173 → 1.0.174

package/dist/lib/components/Figure/ImagePair.d.ts

@@ -0,0 +1,20 @@
+import { ImgHTMLAttributes } from 'react';
+export interface ImagePairProps {
+    src: string;
+    /** Dark-theme variant; renders a second `<img>` the theme CSS swaps in. */
+    srcDark?: string;
+    alt: string;
+    width?: number;
+    height?: number;
+    loading?: ImgHTMLAttributes<HTMLImageElement>['loading'];
+    srcSet?: string;
+    sizes?: string;
+    className?: string;
+}
+/**
+ * The figure's image, or its light/dark pair. One `<img>` without `srcDark`;
+ * with it, two with the same `alt`, of which `[data-theme]` on the page (or
+ * the OS preference) displays exactly one, so layout and assistive technology
+ * meet a single image.
+ */
+export declare function ImagePair({ src, srcDark, alt, width, height, loading, srcSet, sizes, className }: ImagePairProps): import("react").JSX.Element;

package/dist/lib/components/Figure/ZoomImage.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+import { ImagePairProps } from './ImagePair';
+export interface ZoomImageProps extends ImagePairProps {
+    /** The figure's caption, repeated under the enlarged image. */
+    caption?: ReactNode;
+    /** Accessible name of the trigger (default "Enlarge image"). */
+    zoomLabel?: string;
+    /** Accessible name of the close control (default "Close"). */
+    closeLabel?: string;
+}
+/**
+ * The figure's image as a button that opens it enlarged in a native
+ * `<dialog>`: the browser owns the top layer, the focus trap, Escape, and
+ * returning focus to the trigger on close. The only script is showModal(),
+ * close() and the backdrop click; the transitions are CSS on the animation
+ * tokens, off under reduced motion.
+ */
+export declare function ZoomImage({ caption, zoomLabel, closeLabel, className, ...image }: ZoomImageProps): import("react").JSX.Element;

package/dist/lib/components/Figure/index.d.ts

@@ -0,0 +1,96 @@
+import { HTMLAttributes, ImgHTMLAttributes, ReactNode } from 'react';
+import { TypographyColor } from '../Typography';
+export type FigureCaptionSize = 75 | 100;
+/**
+ * How an image sits on the page. `hairline` (default): border-100 and 8px
+ * radius. `card`: the same plus the BrowserFrame shadow, for an illustration
+ * that should read as a picture placed on the page. `none`: the bare image.
+ */
+export type FigureFrame = 'none' | 'hairline' | 'card';
+interface FigureBaseProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    /**
+     * The caption, rendered as a `<figcaption>` under the content. Say what the
+     * figure shows and what to notice; this is the text crawlers and AI agents
+     * read as the figure's description, and it names the figure for assistive
+     * technology.
+     */
+    caption?: ReactNode;
+    /** Caption text size — typography size `100` (default) or `75`. */
+    captionSize?: FigureCaptionSize;
+    /** Caption color (default `secondary`). */
+    captionColor?: TypographyColor;
+    /** `start` (default) aligns content and caption to the left edge; `center` centers both. */
+    align?: 'start' | 'center';
+    /**
+     * Frame around an image: `hairline` (default) is border-100 and 8px radius,
+     * `card` adds the BrowserFrame shadow so an illustration reads as a picture
+     * on the page, `none` is the bare image. Ignored when the figure wraps
+     * `children`, which draw their own frame.
+     */
+    frame?: FigureFrame;
+}
+interface FigureImageProps extends FigureBaseProps {
+    /** Image source. With `src`, Figure renders the `<img>` itself. */
+    src: string;
+    /**
+     * Dark-theme variant of the image. Both images render with the same
+     * `alt`; the page's `data-theme` (set by ThemeLoader before first paint)
+     * shows one and hides the other, with the OS preference as the fallback
+     * when no theme attribute is set. Without it the one image serves both
+     * themes: nothing is dimmed or inverted.
+     */
+    srcDark?: string;
+    /**
+     * What the image shows, in one sentence. Required with `src`; pass `""`
+     * for a purely decorative image. Keep the explanation in `caption`.
+     */
+    alt: string;
+    /** Intrinsic image size, so the browser reserves the space before the image loads. */
+    width?: number;
+    height?: number;
+    loading?: ImgHTMLAttributes<HTMLImageElement>['loading'];
+    /** Responsive sources, passed through to the `<img>`. */
+    srcSet?: string;
+    sizes?: string;
+    /**
+     * Click to enlarge (default `false`). The image becomes a button that opens
+     * it in a native `<dialog>` over the page, with the caption under it;
+     * Escape, the close button or a click outside closes it and focus returns
+     * to the image. Opt in for screenshots and diagrams whose detail matters.
+     */
+    zoom?: boolean;
+    /** Accessible name of the enlarge button (default "Enlarge image"). */
+    zoomLabel?: string;
+    /** Accessible name of the dialog's close button (default "Close"). */
+    closeLabel?: string;
+    children?: never;
+}
+interface FigureWrapProps extends FigureBaseProps {
+    src?: undefined;
+    srcDark?: never;
+    alt?: never;
+    width?: never;
+    height?: never;
+    loading?: never;
+    srcSet?: never;
+    sizes?: never;
+    zoom?: never;
+    zoomLabel?: never;
+    closeLabel?: never;
+    /** The content: a `BrowserFrame`, `VideoPlayer`, `CodeBlock`, a chart, a table. */
+    children: ReactNode;
+}
+export type FigureProps = FigureImageProps | FigureWrapProps;
+/**
+ * A `<figure>` with a `<figcaption>`: an image, a live demo, a video or a
+ * code sample together with the sentence or two that explain it. Pass `src`
+ * and `alt` for an image; wrap anything else as `children`. The caption sits
+ * under the content in secondary text; spacing to the surrounding prose is
+ * the page's job.
+ *
+ * The caption is the point. An iframe's contents are not read along with the
+ * page, and an image is only its alt text, so the caption is where a search
+ * engine, an AI agent and a screen-reader user get the explanation.
+ */
+export declare const Figure: import('react').ForwardRefExoticComponent<FigureProps & import('react').RefAttributes<HTMLElement>>;
+export {};

package/dist/lib/main.d.ts

@@ -19,6 +19,8 @@ export type { HeaderProps, HeaderPosition, SubHeaderItem } from './components/He
 export { Box } from './components/Box';
 export { BrowserFrame } from './components/BrowserFrame';
 export type { BrowserFrameProps, BrowserFrameAction } from './components/BrowserFrame';
+export { Figure } from './components/Figure';
+export type { FigureProps, FigureCaptionSize } from './components/Figure';
 export { CopyCode } from './components/CopyCode';
 export type { CopyCodeProps } from './components/CopyCode';
 export { CodeBlock } from './components/CodeBlock';

package/dist/main.js

@@ -1,56 +1,57 @@
 import { c as e, d as t, r as n, s as r, u as i } from "./utils-bAjntFD8.js";
 import { t as a } from "./Box-BZgeSeCV.js";
-import { t as o } from "./Button-CdrrwvXk.js";
-import { t as s } from "./BrowserFrame-CisPLoTR.js";
-import { t as c } from "./CopyCode-72gVieQO.js";
-import { t as l } from "./FrameworkIcon-B8GmMx0r.js";
-import { t as u } from "./CodeBlock-CGBo8nwy.js";
-import { n as d, t as f } from "./ClientLogo-Dj7K48YL.js";
-import { t as p } from "./LogoCarousel-TbyB0ot0.js";
-import { t as m } from "./Icon-DJTgdvsG.js";
-import { t as h } from "./Link-CYR92_U0.js";
-import { t as g } from "./ProductIcon-C5yvnjHr.js";
-import { t as _ } from "./ButtonGroup-JtJaVLlu.js";
-import { t as v } from "./InputSolo-CbnsJlJu.js";
-import { t as y } from "./SearchDropdown-Ow5_Hu21.js";
-import { i as b, n as x, r as S, t as C } from "./InputGrouped-DLghbzO7.js";
-import { t as w } from "./Container-BDssaLig.js";
-import { t as T } from "./DiscordInvite-DfPVlJ5G.js";
-import { t as E } from "./Heading-DNDHqYWO.js";
-import { n as D } from "./Typography-DI1AkqiO.js";
-import { n as O, t as k } from "./List-B1zRI6pm.js";
-import { n as A, t as j } from "./Features-BS-_cksu.js";
-import { t as M } from "./Logo-Bz0G2G-k.js";
-import { t as N } from "./NewsletterSignup-BPLup66s.js";
-import { n as P, r as F, t as I } from "./Dropdown-DLRtYhFa.js";
-import { t as L } from "./PrefPanel-6oTpfC5q.js";
-import { n as R, t as z } from "./Label-B-Xt6XQQ.js";
-import { t as B } from "./VideoCover-25FfvhPg.js";
-import { t as V } from "./VideoPlayer-CB2lOh95.js";
-import { t as H } from "./VideoPlayerModal-CVJbPd6n.js";
-import { t as U } from "./Footer-CqtCkr_g.js";
-import { n as W } from "./GPTInput-g460kfc6.js";
-import { t as G } from "./Notification-DtqcW5FH.js";
-import { n as K, t as q } from "./Header-CQKgp8xy.js";
-import { t as J } from "./Tabs-TRXBM5Zr.js";
-import { n as Y, t as X } from "./RadioBox-C7bDjItJ.js";
-import { n as Z, t as Q } from "./Checkbox-DU_KGp-P.js";
-import { t as $ } from "./Toggle-BHjptO7-.js";
-import { t as ee } from "./ToggleCard-kMpxzTnh.js";
-import { t as te } from "./ToggleList-Dh7wb2-W.js";
-import { Modal as ne } from "./components/Modal/index.js";
-import { t as re } from "./RoadmapDetails-CLQzIxv7.js";
-import { ModalContactFooter as ie } from "./components/Modal/ModalContactFooter.js";
-import { useOptionalSidebarLayout as ae, useSidebarLayout as oe } from "./components/Sidebar/context.js";
-import { SidebarLayout as se, SidebarMain as ce } from "./components/Sidebar/SidebarLayout.js";
-import { SidebarResizer as le } from "./components/Sidebar/SidebarResizer.js";
-import { Sidebar as ue, SidebarBody as de, SidebarHeader as fe, SidebarSection as pe } from "./components/Sidebar/Sidebar.js";
-import { SidebarSwitcher as me } from "./components/Sidebar/SidebarSwitcher.js";
-import { NavItem as he } from "./components/Sidebar/NavItem.js";
-import { NavGroup as ge } from "./components/Sidebar/NavGroup.js";
-import { NavDisclosure as _e } from "./components/Sidebar/NavDisclosure.js";
+import { t as o } from "./Button-DFcjZsF4.js";
+import { t as s } from "./BrowserFrame-_qNod9an.js";
+import { n as c } from "./Typography-DI1AkqiO.js";
+import { t as l } from "./Icon-DJTgdvsG.js";
+import { Figure as u } from "./components/Figure/index.js";
+import { t as d } from "./CopyCode-DS2T69as.js";
+import { t as f } from "./FrameworkIcon-B8GmMx0r.js";
+import { t as p } from "./CodeBlock-rPC0sIvR.js";
+import { n as m, t as h } from "./ClientLogo-Dj7K48YL.js";
+import { t as g } from "./LogoCarousel-BsmxIlzx.js";
+import { t as _ } from "./Link-CYR92_U0.js";
+import { t as v } from "./ProductIcon-C5yvnjHr.js";
+import { t as y } from "./ButtonGroup-dTeFICBP.js";
+import { t as b } from "./InputSolo-CbnsJlJu.js";
+import { t as x } from "./SearchDropdown-g3g30peB.js";
+import { i as S, n as C, r as w, t as T } from "./InputGrouped-DNiMvxxa.js";
+import { t as E } from "./Container-BDssaLig.js";
+import { t as D } from "./DiscordInvite-DfPVlJ5G.js";
+import { t as O } from "./Heading-DNDHqYWO.js";
+import { n as k, t as A } from "./List-CdwPhveO.js";
+import { n as j, t as M } from "./Features-BQ5o3wcc.js";
+import { t as N } from "./Logo-Bz0G2G-k.js";
+import { t as P } from "./NewsletterSignup-CTbjNSnk.js";
+import { n as F, r as I, t as L } from "./Dropdown-Ck7IASlc.js";
+import { t as R } from "./PrefPanel-CwrWfi3R.js";
+import { n as z, t as B } from "./Label-DTIv_3zs.js";
+import { t as V } from "./VideoCover-DdN1nXfu.js";
+import { t as H } from "./VideoPlayer-C0pHiwYx.js";
+import { t as U } from "./VideoPlayerModal-Bh2u5h8g.js";
+import { t as W } from "./Footer-C2tXo3oR.js";
+import { n as G } from "./GPTInput-g460kfc6.js";
+import { t as K } from "./Notification-CTSGBhJk.js";
+import { n as q, t as J } from "./Header-DqE0a41T.js";
+import { t as Y } from "./Tabs-TRXBM5Zr.js";
+import { n as X, t as Z } from "./RadioBox-C7bDjItJ.js";
+import { n as Q, t as $ } from "./Checkbox-X7FrR_6F.js";
+import { t as ee } from "./Toggle-BHjptO7-.js";
+import { t as te } from "./ToggleCard-kMpxzTnh.js";
+import { t as ne } from "./ToggleList-Dh7wb2-W.js";
+import { Modal as re } from "./components/Modal/index.js";
+import { t as ie } from "./RoadmapDetails-B-2pgXHz.js";
+import { ModalContactFooter as ae } from "./components/Modal/ModalContactFooter.js";
+import { useOptionalSidebarLayout as oe, useSidebarLayout as se } from "./components/Sidebar/context.js";
+import { SidebarLayout as ce, SidebarMain as le } from "./components/Sidebar/SidebarLayout.js";
+import { SidebarResizer as ue } from "./components/Sidebar/SidebarResizer.js";
+import { Sidebar as de, SidebarBody as fe, SidebarHeader as pe, SidebarSection as me } from "./components/Sidebar/Sidebar.js";
+import { SidebarSwitcher as he } from "./components/Sidebar/SidebarSwitcher.js";
+import { NavItem as ge } from "./components/Sidebar/NavItem.js";
+import { NavGroup as _e } from "./components/Sidebar/NavGroup.js";
+import { NavDisclosure as ve } from "./components/Sidebar/NavDisclosure.js";
 import "./components/Sidebar/index.js";
-import { t as ve } from "./PrevNextNav-XaxS2FTm.js";
-import { t as ye } from "./TableOfContents-d26S7KYx.js";
-import { ThemeLoader as be, themeLoaderScript as xe } from "./components/ThemeLoader/index.js";
-export { a as Box, s as BrowserFrame, o as Button, _ as ButtonGroup, Q as Checkbox, Z as CheckboxGroup, f as ClientLogo, u as CodeBlock, w as Container, c as CopyCode, T as DiscordInvite, I as Dropdown, P as DropdownItem, F as DropdownSeparator, j as FeatureItem, A as Features, U as Footer, C as FormGroup, x as FormRow, l as FrameworkIcon, W as GPTInput, q as Header, E as Heading, m as Icon, S as InputGrouped, v as InputSolo, z as Label, h as Link, k as List, O as ListItem, M as Logo, p as LogoCarousel, ne as Modal, ie as ModalContactFooter, _e as NavDisclosure, ge as NavGroup, he as NavItem, R as NewTag, N as NewsletterSignup, G as Notification, L as PrefPanel, ve as PrevNextNav, g as ProductIcon, X as RadioBox, Y as RadioBoxGroup, re as RoadmapDetails, y as SearchDropdown, b as SelectGrouped, ue as Sidebar, de as SidebarBody, fe as SidebarHeader, se as SidebarLayout, ce as SidebarMain, le as SidebarResizer, pe as SidebarSection, me as SidebarSwitcher, K as SubHeader, ye as TableOfContents, J as Tabs, be as ThemeLoader, i as ThemeProvider, $ as Toggle, ee as ToggleCard, te as ToggleList, D as Typography, B as VideoCover, V as VideoPlayer, H as VideoPlayerModal, d as clientLogoLabels, xe as themeLoaderScript, n as useClipboard, t as useNextTheme, ae as useOptionalSidebarLayout, oe as useSidebarLayout, r as useSuccessFlash, e as useTheme };
+import { t as ye } from "./PrevNextNav-BwP-lRaG.js";
+import { t as be } from "./TableOfContents-d26S7KYx.js";
+import { ThemeLoader as xe, themeLoaderScript as Se } from "./components/ThemeLoader/index.js";
+export { a as Box, s as BrowserFrame, o as Button, y as ButtonGroup, $ as Checkbox, Q as CheckboxGroup, h as ClientLogo, p as CodeBlock, E as Container, d as CopyCode, D as DiscordInvite, L as Dropdown, F as DropdownItem, I as DropdownSeparator, M as FeatureItem, j as Features, u as Figure, W as Footer, T as FormGroup, C as FormRow, f as FrameworkIcon, G as GPTInput, J as Header, O as Heading, l as Icon, w as InputGrouped, b as InputSolo, B as Label, _ as Link, A as List, k as ListItem, N as Logo, g as LogoCarousel, re as Modal, ae as ModalContactFooter, ve as NavDisclosure, _e as NavGroup, ge as NavItem, z as NewTag, P as NewsletterSignup, K as Notification, R as PrefPanel, ye as PrevNextNav, v as ProductIcon, Z as RadioBox, X as RadioBoxGroup, ie as RoadmapDetails, x as SearchDropdown, S as SelectGrouped, de as Sidebar, fe as SidebarBody, pe as SidebarHeader, ce as SidebarLayout, le as SidebarMain, ue as SidebarResizer, me as SidebarSection, he as SidebarSwitcher, q as SubHeader, be as TableOfContents, Y as Tabs, xe as ThemeLoader, i as ThemeProvider, ee as Toggle, te as ToggleCard, ne as ToggleList, c as Typography, V as VideoCover, H as VideoPlayer, U as VideoPlayerModal, m as clientLogoLabels, Se as themeLoaderScript, n as useClipboard, t as useNextTheme, oe as useOptionalSidebarLayout, se as useSidebarLayout, r as useSuccessFlash, e as useTheme };

package/dist/{prism-light-oph9ikSp.js → prism-light-D9OePufj.js}

@@ -1,5 +1,5 @@
 import { r as e } from "./chunk-jwUa06l-.js";
-import { r as t, t as n } from "./create-element-DvDqDt-f.js";
+import { r as t, t as n } from "./create-element-DHbI55TT.js";
 import r from "react";
 //#region node_modules/@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js
 function i(e, t) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "highsoft-ui",
-  "version": "1.0.173",
+  "version": "1.0.174",
   "description": "Highsoft UI",
   "type": "module",
   "repository": {