@ntbjs/react-components 2.0.14 → 3.0.0-rc.1

package/types/components/widgets/AssetGallery/asset.types.d.ts

@@ -0,0 +1,446 @@
+import PropTypes from 'prop-types';
+import type { DragEvent, MouseEvent as ReactMouseEvent, ReactElement, ReactNode } from 'react';
+/**
+ * The asset contract — the deepest prop API in this library, and the only one a
+ * consumer builds objects *for* rather than passing props *to*.
+ *
+ * ================= THREE THINGS TO KNOW BEFORE EDITING THIS FILE =============
+ *
+ * 1. THE TYPES ARE THE SOURCE OF TRUTH; THE propTypes AT THE BOTTOM ARE LEGACY.
+ *    Two descriptions of one shape live in one file on purpose, so they cannot
+ *    drift apart in two. The `assetShape` / `assetShapeWithLayout` literals are
+ *    still imported by four components and still evaluated at runtime on
+ *    React 16, so they cannot be deleted yet — see the fenced block at the end
+ *    for when they go and what to do then.
+ *
+ * 2. THIRTEEN MEMBERS HERE WERE NEVER DECLARED BY THE propTypes, AND EVERY ONE
+ *    OF THEM IS READ AT RUNTIME. They are marked `@recovered` with the read
+ *    site. This is why this file was hand-written instead of codemodded: a
+ *    codemod can only reproduce what the propTypes said, and what the propTypes
+ *    said was missing a third of the API. Generated prop types are CLOSED, so an
+ *    omission converts silently from "undocumented" into "compile error at the
+ *    consumer's call site". Before adding a member, grep for `asset.<name>`.
+ *
+ * 3. THE NESTED SHAPES ARE NAMED, EXPORTED INTERFACES, NOT INLINE OBJECT TYPES.
+ *    A consumer keeping its own asset list needs to name the pieces
+ *    (`AssetAction[]`, `AssetSummary`) in order to build them; inlining forces
+ *    it to re-declare them or to reach for `any`. `Asset` is also meant to be
+ *    EXTENDED — the gallery hands each asset object straight back to
+ *    `component(asset, children)` and to every `onClick`, so consumer-only
+ *    fields travel through the library untouched:
+ *
+ *      interface MyAsset extends Asset { credit: string }
+ *
+ *    Note that `AssetAction` (the interface below) and `AssetAction` (the
+ *    component exported from `@ntbjs/react-components/widgets`) are different
+ *    things with the same name. They never meet today, because this module is
+ *    not re-exported from the widgets barrel. If you ever add it there, rename
+ *    one of them.
+ * ============================================================================
+ */
+/**
+ * An asset's identity, and one of its two required members.
+ *
+ * `AssetGalleryBase` drops any asset without one and warns; the value is also
+ * used as a React `key`, which is why the union is `string | number` rather than
+ * `unknown` — `PropTypes.oneOfType([string, number])`, verbatim.
+ */
+export type AssetKey = string | number;
+/**
+ * What kind of file this asset is. Only `'video'` and `'audio'` change what the
+ * cards render (a `<video>`, or a headset glyph); the other three fall through
+ * to the lazily-loaded still image.
+ *
+ * Both cards branch on `asset.fileType?.toLowerCase()`, so a consumer passing
+ * `'VIDEO'` gets the video preview while `renderMediaBadge` — which compares
+ * `=== 'video'` without lowercasing — does not show the play badge. The union is
+ * lowercase because that is what the propTypes always declared; widening it to
+ * `string` would bless that inconsistency instead of exposing it.
+ */
+export type AssetFileType = 'image' | 'video' | 'pdf' | 'file' | 'audio';
+/**
+ * Declared corner for the file-type glyph.
+ *
+ * NOTHING IN THE LIBRARY READS THIS. It is part of the published propTypes and
+ * therefore part of the published API, so it is recorded rather than dropped —
+ * removing it is a deliberate API change and belongs in its own commit.
+ */
+export type AssetFileTypeIconPosition = 'top-left' | 'top-right';
+/**
+ * Usage-restriction level, 1 (info) to 5 (highly restricted). Passed through to
+ * `InstructionSeverityDisplay` and `SummaryCard`, which key their badge label
+ * and colour off it. `PropTypes.oneOf([1, 2, 3, 4, 5])`, verbatim.
+ */
+export type AssetInstructionSeverity = 1 | 2 | 3 | 4 | 5;
+/**
+ * Which of the two things a computed row entry is: a real asset card, or the
+ * group heading `AssetGalleryBase` synthesises above the first asset of a group.
+ */
+export type AssetLayoutType = 'groupLabel' | 'asset';
+/**
+ * How a note is styled on the compact card. `'error'` gets a red circle; every
+ * other value gets the neutral grey one, because
+ * `AssetGalleryCompactCard.styled` only ever tests `type === 'error'`.
+ *
+ * @recovered `AssetGalleryCompactCard.tsx` reads `asset?.note?.type`; the value
+ *   set comes from `AssetGallery.stories.tsx`.
+ */
+export type AssetNoteType = 'error' | 'warning' | 'info';
+/**
+ * A short note about the asset.
+ *
+ * THE propTypes AND THE RUNTIME DISAGREE ABOUT THIS SHAPE, and both halves are
+ * recorded because a consumer can reach both:
+ *
+ * - `title` and `type` are what `AssetGalleryCompactCard` actually reads (a
+ *   warning glyph, coloured by `type`) and what all three note stories pass.
+ * - `icon` and `message` are what the propTypes declared. No component in this
+ *   library reads either one.
+ *
+ * Deleting `icon`/`message` is an API removal and wiring them up is a feature;
+ * both are decisions for the per-component phase, not for a type-only commit.
+ * Until then this interface says what the field can contain.
+ */
+export interface AssetNote {
+    /** @recovered `AssetGalleryCompactCard.tsx` — presence is what gates the glyph. */
+    title?: string;
+    /** @recovered `AssetGalleryCompactCard.tsx` — `'error'` is the only value with its own styling. */
+    type?: AssetNoteType;
+    /** Declared by the propTypes, read by nothing. */
+    icon?: ReactElement<any>;
+    /** Declared by the propTypes, read by nothing. */
+    message?: string;
+}
+/**
+ * One entry in an action's dropdown, rendered as a `ContextMenuItem`.
+ *
+ * NOT THE SAME CALLBACK CONTRACT AS `AssetAction`. `AssetGalleryGridCard` wires
+ * `onClick` straight into `ContextMenuItem`'s `onClickEffect`, which becomes a
+ * DOM `onClick` — so a sub-action's handler receives the CLICK EVENT, while a
+ * top-level action's handler receives the ASSET. The asymmetry is real,
+ * pre-existing, and the reason this is a separate interface rather than
+ * `AssetAction[]`.
+ *
+ * @recovered `AssetGalleryGridCard.tsx` reads `action?.subActions`; the
+ *   propTypes never declared it.
+ */
+export interface AssetSubAction {
+    title: string;
+    icon: ReactElement<any>;
+    /** Receives the click event, NOT the asset. See above. */
+    onClick: (event: ReactMouseEvent<HTMLElement>) => void;
+}
+/**
+ * A button rendered over the asset thumbnail.
+ *
+ * `title`, `icon` and `onClick` are required — `PropTypes.*.isRequired`,
+ * verbatim — and `title` doubles as the tooltip text and as part of the React
+ * key, so two actions sharing a title collide.
+ */
+export interface AssetAction {
+    /** Tooltip text, and part of the action's React key. */
+    title: string;
+    icon: ReactElement<any>;
+    /**
+     * Called with the ASSET, not with the event: `AssetGalleryGridCard` stops the
+     * event itself and then calls `action.onClick(asset)`.
+     */
+    onClick: (asset: Asset) => void;
+    /**
+     * Forwarded to the underlying `ActionButton`'s `className`.
+     *
+     * WAS `PropTypes.shape` — the *uncalled* factory, not `PropTypes.shape({…})`.
+     * The fenced block at the end of this file records what that did.
+     */
+    className?: string;
+    /**
+     * Render the action yourself. Called with NO arguments and must return a valid
+     * element; the card then clones it with the computed props.
+     */
+    component?: () => ReactElement<any>;
+    /**
+     * `[width, height]` in px for the action button.
+     *
+     * @recovered `AssetGalleryGridCard.tsx` forwards `action.actionWidthHeight` to
+     *   `ComputedActionButton`. `AssetAction.tsx` declares it in its own
+     *   propTypes; `assetShape` never did.
+     */
+    actionWidthHeight?: [number, number];
+    /**
+     * Turns the action into a dropdown: a `ContextMenu` of `ContextMenuItem`s in a
+     * `Popover`, toggled by clicking the action.
+     *
+     * @recovered `AssetGalleryGridCard.tsx`.
+     */
+    subActions?: AssetSubAction[];
+}
+/**
+ * The hover-summary content, rendered by `AssetGalleryCompactCard` through
+ * `SummaryCard`, and used by `AssetGalleryGridCard` for its footer row.
+ *
+ * The four corner slots are `ReactNode`, so a fragment, a string or `null` all
+ * work — all three occur in `AssetGallery.stories.tsx`.
+ */
+export interface AssetSummary {
+    title?: string;
+    description?: string;
+    instructions?: string;
+    instructionSeverity?: AssetInstructionSeverity;
+    headerLeft?: ReactNode;
+    headerRight?: ReactNode;
+    /** Read by BOTH cards — the grid card renders it in `CardFooter` directly. */
+    footerLeft?: ReactNode;
+    /** Read by BOTH cards — the grid card renders it in `CardFooter` directly. */
+    footerRight?: ReactNode;
+}
+/**
+ * Where `AssetGalleryBase` decided to put this asset. Computed, never supplied:
+ * the gallery clones every asset with a `layout` before handing it to a card, so
+ * a consumer neither sets this nor sees it — except inside a `component(asset)`
+ * callback, which receives the cloned object.
+ *
+ * `width` / `height` / `translateX` / `translateY` are REQUIRED because that is
+ * what the propTypes said and what every `type: 'asset'` entry carries. The
+ * synthetic `type: 'groupLabel'` entries are built with no `width`, but they are
+ * consumed inside `AssetGalleryBase` itself and never reach a card — and a card
+ * is the only place `AssetWithLayout` is used. Do not make these optional to
+ * accommodate the group labels; give the group labels their own type when
+ * `AssetGalleryBase` is typed.
+ */
+export interface AssetLayout {
+    width: number;
+    height: number;
+    translateX: number;
+    translateY: number;
+    type: AssetLayoutType;
+    /** Whether the source asset declared both a width and a height. Compact view only. */
+    hasHeightAndWidth?: boolean;
+    /**
+     * Scroll-virtualisation flag: `false` unmounts the card.
+     *
+     * @recovered `AssetGalleryBase.tsx` both writes it (`calculateVisibility`) and
+     *   reads it (the render map, and the arrow-key navigation). The propTypes
+     *   never declared it.
+     */
+    show?: boolean;
+}
+/**
+ * One asset in an `AssetGallery`.
+ *
+ * Every member except `key` and `fileType` is optional, which matches the
+ * propTypes exactly. Consumers are expected to EXTEND this rather than to match
+ * it exactly — see point 3 in the file header.
+ */
+export interface Asset {
+    /** Required. Identity, and the React key. */
+    key: AssetKey;
+    /** Required. Selects the preview branch — see {@link AssetFileType}. */
+    fileType: AssetFileType;
+    /** Image, video or audio source for the thumbnail. */
+    previewUrl?: string;
+    /** Rendered as the card title and as the `<img alt>`. */
+    title?: string;
+    /** Intrinsic pixel width; drives the compact view's row aspect ratio. Falls back to 1920. */
+    width?: number;
+    /** Intrinsic pixel height; drives the compact view's row aspect ratio. Falls back to 1080. */
+    height?: number;
+    note?: AssetNote;
+    /** Consecutive assets sharing a `group` get one heading row above the first of them. */
+    group?: string;
+    actions?: AssetAction[];
+    /** Top-right glyph on the thumbnail. When set, it suppresses the note glyph. */
+    statusIcon?: ReactElement<any>;
+    /** Rendered over everything else on the card; the consumer owns its positioning. */
+    overlay?: ReactElement<any>;
+    /** Draws the "completed" veil over the compact card. */
+    completed?: boolean;
+    /** Draws the "error" veil over the compact card. */
+    hasError?: boolean;
+    /** Dims the card. Does NOT stop `onClick` from firing. */
+    disabled?: boolean;
+    /** Declared corner for the file-type glyph. Read by nothing — see the type. */
+    fileTypeIconPosition?: AssetFileTypeIconPosition;
+    /** Severity of `imageRights`, shown as a badge on the card and in the summary. */
+    instructionSeverity?: AssetInstructionSeverity;
+    summary?: AssetSummary;
+    /**
+     * Called with the React click event AND the asset. Not called while the
+     * gallery is in extended-select mode, where a click selects instead.
+     */
+    onClick?: (event: ReactMouseEvent<HTMLElement>, asset: Asset) => void;
+    /**
+     * Called with the React mouse event AND the asset, after the card has started
+     * playing a video preview.
+     */
+    onMouseEnter?: (event: ReactMouseEvent<HTMLElement>, asset: Asset) => void;
+    /**
+     * Called with the NATIVE event, not a React one: both cards attach this with
+     * `addEventListener('contextmenu', …)` on the card element. The card
+     * default-prevents it before calling.
+     */
+    onContextMenu?: (event: MouseEvent) => void;
+    /**
+     * Duration in MILLISECONDS. Rendered as `h:mm:ss` in the media badge by
+     * `convertMsToHMS`, so seconds here are wrong by a factor of 1000.
+     *
+     * @recovered both cards read `asset.duration`.
+     */
+    duration?: number;
+    /**
+     * Body text under the title on the grid card, and in the summary card.
+     *
+     * @recovered both cards read `asset.description`, and both list it in their
+     *   `React.memo` comparator, so it is one of the fields that re-renders them.
+     */
+    description?: string;
+    /**
+     * The usage-restriction text. Its presence is what makes the grid card render
+     * an `InstructionSeverityDisplay` at all.
+     *
+     * @recovered both cards read `asset.imageRights`.
+     */
+    imageRights?: string;
+    /**
+     * Severity level → translated label, e.g. `{ 1: 'Info', 5: 'Svært begrenset' }`.
+     *
+     * `Record<string, string>` rather than a keyed-by-severity mapped type,
+     * because that is `PropTypes.objectOf(PropTypes.string)` on both components
+     * that consume it (`InstructionSeverityDisplay`, `SummaryCard`) and it stays
+     * assignable in both directions once those are typed.
+     *
+     * @recovered both cards forward `asset.instructionLabels`.
+     */
+    instructionLabels?: Record<string, string>;
+    /**
+     * Number of versions, shown in the layers badge.
+     *
+     * @recovered both cards read `asset.versions`.
+     */
+    versions?: number;
+    /**
+     * A pre-rendered verification badge. A NODE, not a status string — the compact
+     * card returns it as-is from `renderVerificationBadge`, so the consumer owns
+     * the markup.
+     *
+     * @recovered `AssetGalleryCompactCard.tsx` reads `asset.verifications` for
+     *   both `displayIcon: 'verifications'` and `displayIcon: 'dynamic'`.
+     */
+    verifications?: ReactNode;
+    /**
+     * Per-asset override of the gallery's `selectable` prop. `AssetGalleryBase`
+     * tests `'selectable' in asset`, so `false` here beats `true` there.
+     *
+     * @recovered `AssetGalleryBase.tsx`.
+     */
+    selectable?: boolean;
+    /**
+     * Sets the DOM `draggable` attribute on the card root.
+     *
+     * @recovered both cards pass `asset.draggable`.
+     */
+    draggable?: boolean;
+    /**
+     * Called with the NATIVE drag event: both cards attach this with
+     * `addEventListener('dragstart', …)`. Pair it with `draggable: true`.
+     *
+     * @recovered both cards read `asset.onDragstart`.
+     */
+    onDragstart?: (event: DragEvent) => void;
+}
+/**
+ * An asset as a CARD receives it — after `AssetGalleryBase` has computed its
+ * position. This is the type of `AssetGalleryGridCard`'s and
+ * `AssetGalleryCompactCard`'s `asset` prop; `Asset` is the type of the `assets`
+ * array a consumer hands to `AssetGallery`.
+ */
+export interface AssetWithLayout extends Asset {
+    layout: AssetLayout;
+}
+export declare const assetShape: {
+    key: PropTypes.Validator<NonNullable<NonNullable<string | number>>>;
+    previewUrl: PropTypes.Requireable<string>;
+    title: PropTypes.Requireable<string>;
+    note: PropTypes.Requireable<PropTypes.InferProps<{
+        icon: PropTypes.Requireable<PropTypes.ReactElementLike>;
+        message: PropTypes.Requireable<string>;
+    }>>;
+    width: PropTypes.Requireable<number>;
+    height: PropTypes.Requireable<number>;
+    fileType: PropTypes.Validator<string>;
+    fileTypeIconPosition: PropTypes.Requireable<string>;
+    group: PropTypes.Requireable<string>;
+    actions: PropTypes.Requireable<PropTypes.InferProps<{
+        title: PropTypes.Validator<string>;
+        icon: PropTypes.Validator<PropTypes.ReactElementLike>;
+        onClick: PropTypes.Validator<(...args: any[]) => any>;
+        className: PropTypes.Requireable<string>;
+        component: PropTypes.Requireable<(...args: any[]) => any>;
+    }>[]>;
+    statusIcon: PropTypes.Requireable<PropTypes.ReactElementLike>;
+    overlay: PropTypes.Requireable<PropTypes.ReactElementLike>;
+    completed: PropTypes.Requireable<boolean>;
+    hasError: PropTypes.Requireable<boolean>;
+    disabled: PropTypes.Requireable<boolean>;
+    onClick: PropTypes.Requireable<(...args: any[]) => any>;
+    onContextMenu: PropTypes.Requireable<(...args: any[]) => any>;
+    onMouseEnter: PropTypes.Requireable<(...args: any[]) => any>;
+    instructionSeverity: PropTypes.Requireable<number>;
+    summary: PropTypes.Requireable<PropTypes.InferProps<{
+        title: PropTypes.Requireable<string>;
+        description: PropTypes.Requireable<string>;
+        instructions: PropTypes.Requireable<string>;
+        instructionSeverity: PropTypes.Requireable<number>;
+        headerLeft: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        headerRight: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        footerLeft: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        footerRight: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    }>>;
+};
+export declare const assetShapeWithLayout: {
+    layout: PropTypes.Validator<NonNullable<PropTypes.InferProps<{
+        width: PropTypes.Validator<number>;
+        height: PropTypes.Validator<number>;
+        translateX: PropTypes.Validator<number>;
+        translateY: PropTypes.Validator<number>;
+        type: PropTypes.Validator<string>;
+        hasHeightAndWidth: PropTypes.Requireable<boolean>;
+    }>>>;
+    key: PropTypes.Validator<NonNullable<NonNullable<string | number>>>;
+    previewUrl: PropTypes.Requireable<string>;
+    title: PropTypes.Requireable<string>;
+    note: PropTypes.Requireable<PropTypes.InferProps<{
+        icon: PropTypes.Requireable<PropTypes.ReactElementLike>;
+        message: PropTypes.Requireable<string>;
+    }>>;
+    width: PropTypes.Requireable<number>;
+    height: PropTypes.Requireable<number>;
+    fileType: PropTypes.Validator<string>;
+    fileTypeIconPosition: PropTypes.Requireable<string>;
+    group: PropTypes.Requireable<string>;
+    actions: PropTypes.Requireable<PropTypes.InferProps<{
+        title: PropTypes.Validator<string>;
+        icon: PropTypes.Validator<PropTypes.ReactElementLike>;
+        onClick: PropTypes.Validator<(...args: any[]) => any>;
+        className: PropTypes.Requireable<string>;
+        component: PropTypes.Requireable<(...args: any[]) => any>;
+    }>[]>;
+    statusIcon: PropTypes.Requireable<PropTypes.ReactElementLike>;
+    overlay: PropTypes.Requireable<PropTypes.ReactElementLike>;
+    completed: PropTypes.Requireable<boolean>;
+    hasError: PropTypes.Requireable<boolean>;
+    disabled: PropTypes.Requireable<boolean>;
+    onClick: PropTypes.Requireable<(...args: any[]) => any>;
+    onContextMenu: PropTypes.Requireable<(...args: any[]) => any>;
+    onMouseEnter: PropTypes.Requireable<(...args: any[]) => any>;
+    instructionSeverity: PropTypes.Requireable<number>;
+    summary: PropTypes.Requireable<PropTypes.InferProps<{
+        title: PropTypes.Requireable<string>;
+        description: PropTypes.Requireable<string>;
+        instructions: PropTypes.Requireable<string>;
+        instructionSeverity: PropTypes.Requireable<number>;
+        headerLeft: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        headerRight: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        footerLeft: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        footerRight: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    }>>;
+};

package/types/components/widgets/AssetGallery/index.d.ts

@@ -0,0 +1 @@
+export { default } from './AssetGallery';

package/types/components/widgets/AssetPreview/AssetPreviewTopBar/AssetPreviewTopBar.d.ts

@@ -0,0 +1,60 @@
+import React from 'react';
+import * as S from './AssetPreviewTopBar.styled';
+type AssetPreviewTopBarOwnProps = {
+    /**
+     * On-click function for the back button
+     */
+    onBackButtonClick: (...args: any[]) => any;
+    /**
+     * Translatable text for the back button
+     */
+    backButtonText: string;
+    /**
+     * Disable the back button
+     */
+    disabled?: boolean;
+    /**
+     * Display the back button as an X instead of an arrow
+     */
+    backButtonAsClose?: boolean;
+    /**
+     * Text to be displayed grayed out after the "Back" text – e.g. "Asset selected" in gallery
+     */
+    leftText?: string;
+    /**
+     * Add a shadow on the bottom border of the top bar – e.g. in gallery view
+     */
+    shadow?: boolean;
+    /**
+     * Add a border on the bottom of the top bar
+     */
+    border?: boolean;
+    /**
+     * `Array` of buttons to be placed on the right side of the top bar
+     */
+    buttons?: React.ReactNode[];
+};
+/**
+ * Top bar for asset preview.
+ *
+ * ### Import
+ *
+ * ``` js
+ * import { AssetPreviewTopBar } from '@ntbjs/react-components/widgets'
+ * // or
+ * import AssetPreviewTopBar from '@ntbjs/react-components/AssetPreview/AssetPreviewTopBar'
+ * ```
+ *
+ * ### Usage example
+ *
+ * ``` js
+const button1 = <ActionButton key="btn1"icon={<IconAddCircle />} />;
+const button2 = <Button key="btn2" secondary={true}>Edit</Button>;
+const button3 = <Button key="btn3" secondary={true}>Share</Button>;
+const button4 = <Button key="btn4">Download</Button>;
+
+const topBar = <AssetPreviewTopBar backButtonText={t{"Back"}} onBackButtonClick={() => {}} buttons={[button1, button2, button3, button4]} />;
+ * ```
+ */
+declare const AssetPreviewTopBar: React.ForwardRefExoticComponent<Omit<Omit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, S.AssetPreviewTopBarStyleProps>, never>, "ref">, keyof AssetPreviewTopBarOwnProps> & AssetPreviewTopBarOwnProps & React.RefAttributes<any>>;
+export default AssetPreviewTopBar;

package/types/components/widgets/AssetPreview/AssetPreviewTopBar/AssetPreviewTopBar.styled.d.ts

@@ -0,0 +1,35 @@
+/**
+ * `disabled` — `PropTypes.bool`, greys out the back button.
+ *
+ * NO `$`, AND THAT IS A DEFECT THAT IS ALREADY IN THE RENDER BASELINE. React recognises
+ * `disabled` and renders it as a bare boolean attribute on any element, so
+ * `widgets/AssetPreviewTopBar#disabled` in `scripts/r19-harness/baseline.json` records
+ * `<div disabled="">` AND `<a disabled="">`. Renaming it `$disabled` removes both
+ * attributes and therefore MOVES the baseline — C10 work, §E.4.
+ *
+ * Note it also has to be DECLARED to be read at all: `disabled` is a member of neither
+ * `HTMLAttributes<HTMLDivElement>` nor `AnchorHTMLAttributes<HTMLAnchorElement>`. That is
+ * the same asymmetry §J.9 records for `CompactTextInput` — there the identical read on an
+ * `<input>` needs no declaration, because `InputHTMLAttributes` really does have it.
+ *
+ * Hosts: `AssetPreviewTopBar` and `BackButtonContainer`.
+ */
+interface AssetPreviewTopBarDisabledStyleProps {
+    disabled?: boolean;
+}
+/** The top bar root, i.e. what `AssetPreviewTopBar.tsx` passes to it. */
+export interface AssetPreviewTopBarStyleProps extends AssetPreviewTopBarDisabledStyleProps {
+    /** `border` — `PropTypes.bool`; swaps `border-bottom` between `1px solid` and `none`. */
+    $border?: boolean;
+    /** `shadow` — `PropTypes.bool`. Read as `props.$shadow && props.theme.themeProp(…)`,
+     *  which evaluates to `false | RuleSet` — a valid `Interpolation`. A BARE
+     *  `${props => props.$shadow}` would not be: `Interpolation` accepts `Falsy` but not
+     *  `true`, so it would be TS2345 even with the prop correctly typed `boolean`. §J.5. */
+    $shadow?: boolean;
+}
+export declare const AssetPreviewTopBar: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, AssetPreviewTopBarStyleProps>, never>> & string;
+export declare const BackButtonContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>>, AssetPreviewTopBarDisabledStyleProps>, never>> & string;
+export declare const BackHoverEffect: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const LeftText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>, never>, never>> & string;
+export declare const ButtonsContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, never>, never>> & string;
+export {};

package/types/components/widgets/AssetPreview/AssetPreviewTopBar/index.d.ts

@@ -0,0 +1 @@
+export { default } from './AssetPreviewTopBar';