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

package/types/components/widgets/InfoCard/InfoCard.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import * as S from './InfoCard.styled';
+type InfoCardOwnProps = {
+    icon: React.ReactElement<any>;
+    total: number;
+    label: string;
+    linkLabel?: string;
+    onClick?: (...args: any[]) => any;
+    height?: number;
+};
+/**
+ * Info Card
+ *
+ * ### Import
+ *
+ * ``` js
+ * import { InfoCard } from '@ntbjs/react-components/widgets'
+ * // or
+ * import InfoCard from '@ntbjs/react-components/widgets/InfoCard'
+ * ```
+ *
+ * ### Props
+ * ```
+ * Pass `icon={<svg></svg>}` to display an icon.
+ * Pass `total={100}` to display number.
+ * Pass `label={"this is a label"}` to display a label.
+ * Pass `linkLabel={"this is a label"}` to display a link next to the arrow icon.
+ * Pass `height={50}` to adjust the card´s height.
+ * Pass `onClick={function}` to handle click event.
+ * ```
+ */
+declare const InfoCard: 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.InfoCardContainerStyleProps>, never>, "ref">, keyof InfoCardOwnProps> & InfoCardOwnProps & React.RefAttributes<any>>;
+export default InfoCard;

package/types/components/widgets/InfoCard/InfoCard.styled.d.ts

@@ -0,0 +1,28 @@
+/**
+ * `height` as number (px); NO `$` prefix to preserve existing DOM baseline (already in r19-harness).
+ */
+export interface InfoCardContainerStyleProps {
+    height?: number;
+}
+/**
+ * `$isHovered` from useState; not coverable by render gate (always false at baseline).
+ */
+interface InfoCardHoverStyleProps {
+    $isHovered?: boolean;
+}
+export declare const Container: 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>>, InfoCardContainerStyleProps>, never>> & string;
+export declare const MetricsContainer: 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 declare const IconTotalContainer: 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 declare const Total: 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 declare const Label: 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 declare const IconContainer: 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 declare const Link: 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 declare const ButtonLink: 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>>, InfoCardHoverStyleProps>, never>> & string;
+export declare const StyledArrowIcon: 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").SVGProps<SVGSVGElement> & {
+    title?: string;
+}, import("react").SVGProps<SVGSVGElement> & {
+    title?: string;
+}>, InfoCardHoverStyleProps>, never>> & string & Omit<import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+    title?: string;
+}>, keyof import("react").Component<any, {}, any>>;
+export {};

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

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

package/types/components/widgets/InstructionSeverityDisplay/InstructionSeverityDisplay.d.ts

@@ -0,0 +1,46 @@
+import React from 'react';
+import * as S from './InstructionSeverityDisplay.styled';
+type InstructionSeverityDisplayOwnProps = {
+    /** Severity level (1-5). 1=Info, 3=Limited use, 5=Highly restricted. */
+    severity?: 1 | 2 | 3 | 4 | 5;
+    /** The instruction text to display. Component returns null if empty. */
+    instructionText?: string;
+    /** Override the default badge label for the severity level. */
+    severityLabel?: string;
+    /** Map of severity level to translated label string, e.g. { 1: 'Info', 3: 'Begrenset bruk', 5: 'Svært begrenset' }. */
+    labels?: {
+        [key: string]: string;
+    };
+    /** Override the default icon element. */
+    icon?: React.ReactElement<any>;
+    /** Whether to show card styling (border-radius, shadow, border). Defaults to true. */
+    showCard?: boolean;
+    /** Custom card padding, e.g. "8px 6px" or "20px". Defaults to "14px 10px". */
+    padding?: string;
+    /** Custom font size for the badge text, e.g. "10px" or "0.75rem". Defaults to "12px". */
+    badgeFontSize?: string;
+    /** Custom font size for the details/instruction text, e.g. "12px" or "0.875rem". Defaults to "14px". */
+    detailsFontSize?: string;
+    /** Override card background color in light mode, e.g. "#ffffff" or "transparent". */
+    bgLight?: string;
+    /** Override card background color in dark mode, e.g. "#1a1a1a" or "transparent". */
+    bgDark?: string;
+    /** Max number of lines for instruction text before clamping with ellipsis. */
+    maxLines?: number;
+    /** URL of a thumbnail image to display on the left side of the card. Pass null to show a placeholder. Omit to show no thumbnail. */
+    thumbnail?: string;
+};
+/**
+ * InstructionSeverityDisplay communicates the usage restrictions or
+ * severity levels associated with a specific instruction or asset.
+ *
+ * ### Import
+ *
+ * ``` js
+ * import { InstructionSeverityDisplay } from '@ntbjs/react-components/widgets'
+ * // or
+ * import InstructionSeverityDisplay from '@ntbjs/react-components/widgets/InstructionSeverityDisplay'
+ * ```
+ */
+declare const InstructionSeverityDisplay: 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.CardStyleProps>, never>, "ref">, keyof InstructionSeverityDisplayOwnProps> & InstructionSeverityDisplayOwnProps & React.RefAttributes<any>>;
+export default InstructionSeverityDisplay;

package/types/components/widgets/InstructionSeverityDisplay/InstructionSeverityDisplay.styled.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Card's props — what `InstructionSeverityDisplay.tsx` passes to `S.Card`; all optional.
+ */
+export interface CardStyleProps {
+    /** Severity level 1-5; closed to allow === 5 comparison without TS2367. */
+    $severity?: 1 | 2 | 3 | 4 | 5;
+    /** Show card styling; optional here even though component defaults to true. */
+    $showCard?: boolean;
+    /** CSS padding shorthand as string, e.g. `'8px 6px'`; fallback `'14px 10px'`. */
+    $padding?: string;
+    /** CSS colour under `body.light-theme`. */
+    $bgLight?: string;
+    /** CSS colour under `body.dark-theme`. */
+    $bgDark?: string;
+    /** Derived as `thumbnail !== undefined`; boolean not string. */
+    $hasThumbnail?: boolean;
+}
+/** InstructionText's props. */
+interface InstructionTextStyleProps {
+    /** Font-size as string with unit, e.g. `'12px'`, `'0.875rem'`; interpolated raw. */
+    $fontSize?: string;
+    /** Line-clamp count for `-webkit-line-clamp`; used only behind `props.$maxLines &&`. */
+    $maxLines?: number;
+}
+export declare const Card: 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>>, CardStyleProps>, never>> & string;
+export declare const ThumbnailWrapper: 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 declare const ThumbnailImage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, never>> & string;
+export declare const ContentWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const InstructionText: 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<HTMLParagraphElement>, HTMLParagraphElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>>, InstructionTextStyleProps>, never>> & string;
+export {};

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

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

package/types/components/widgets/Instructions/Instructions.d.ts

@@ -0,0 +1,156 @@
+import React from 'react';
+type InstructionsOwnProps = {
+    /**
+     * Name of the text area (used when sending form data)
+     */
+    name?: string;
+    /**
+     * The placeholder of the input. Text to be displayed on the input element when the component is enabled and not focused – e.g. "Search categories..."
+     */
+    placeholder?: string;
+    /**
+     * How many rows/lines of text to be displayed by default
+     */
+    rows?: number | string;
+    /**
+     * Selected option
+     */
+    selectedOption?: any;
+    /**
+     * Function with a `Promise` returning filtered options.
+     *
+     * See [Asynchronous fetching/filtering with pagination](#asynchronous-fetchingfiltering-with-pagination)
+     * for details.
+     *
+     * **Note:**
+     * <br />This will override the `availableOptions` prop if both props are set.
+     */
+    loadOptions?: (...args: any[]) => any;
+    /**
+     * Function for custom "Loading..." message while waiting for the first page
+     * from `loadOptions` to resolve. Defaults to "Loading..." if no function is provided.
+     */
+    loadingMessageFunc?: (...args: any[]) => any;
+    /**
+      /**
+        * Whether the components displays an initial custom message.
+        */
+    clickToAdd?: boolean;
+    /**
+     * Add initial custom message. i.e: `No instructions (click to add)`.
+     */
+    customAddMessage?: string;
+    /**
+     * Whether to auto select the entire value when the input is focused – does also work when the field is in read-only mode
+     */
+    autoSelect?: boolean;
+    /**
+     * Whether the instruction is read only
+     */
+    readOnly?: boolean;
+    /**
+     * Whether the intruction is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether the component is hidden or visible.
+     */
+    hidden?: boolean;
+    /**
+     * `Array` of `objects` that populate the select menu. This is only needed
+     * when asynchronous option fetching with the `loadOptions` prop is not used.
+     *
+     * **Note:**
+     * <br />This will be overridden by the `loadOptions` prop if both props are set.
+     */
+    availableOptions?: any[];
+    /**
+     * `LightBackground color
+     */
+    lightBackground?: boolean;
+    /**
+     * Displays a light-yellow background to show that instruction value is editable
+     */
+    edit?: boolean;
+    /**
+     * Function with a `Promise` returning filtered options.
+     *
+     * See [Asynchronous fetching/filtering with pagination](#asynchronous-fetchingfiltering-with-pagination)
+     * for details.
+     *
+     * **Note:**
+     * <br /> `options`should be passed as an `array`of `objects`
+     * <br />This will override the `availableOptions` prop if both props are set.
+     */
+    options?: any[];
+    /**
+     * Callback for `onChange`
+     */
+    subscribeCurrentValue?: (...args: any[]) => any;
+    /**
+     * Callback for `onChange`
+     */
+    onChange?: (...args: any[]) => any;
+    /**
+     * Callback for `onFocus`
+     */
+    onFocus?: (...args: any[]) => any;
+    /**
+     * Callback for `onBlur`
+     */
+    onBlur?: (...args: any[]) => any;
+    /**
+     * Callback for `onUpdateCallback`: register to AutocompleteSelect label and value
+     */
+    onUpdateCallback?: (...args: any[]) => any;
+    /**
+     * Define the type based on error,error-border , warning, loading and success.
+     */
+    type?: '' | 'error' | 'error-border' | 'warning' | 'instructions-warning' | 'loading' | 'success';
+    /**
+     * Define the type AutoCompleteSelect based on error,error-border , warning, loading and success.
+     */
+    selectType?: '' | 'error' | 'warning' | 'instructions-warning' | 'loading' | 'success';
+    isExpanded?: (...args: any[]) => any;
+    /**
+     * Icon element – E.g: `icon={<Spinner />}`
+     */
+    loadingIcon?: React.ReactElement<any>;
+    /**
+     * Icon element – E.g: `icon={<Check />}`
+     */
+    successIcon?: React.ReactElement<any>;
+    /**
+     * Add padding (small-medium-large)
+     */
+    padding?: '' | 'small' | 'medium' | 'large';
+};
+/**
+ * Instructions that let you display Terms & Conditions
+ *
+ *
+ * ### Import
+ *
+ * ``` js
+ * import { Instructions } from '@ntbjs/react-components/widgets/Instructions'
+ * // or
+ * import Instructions from '@ntbjs/react-components/widgets/Instructions'
+ * ```
+ *
+ * ### AutocompleteSelect
+ * `AutocompleteSelect` is integrated within Instructions in order to implement the Drop-down Menu (check out the `Autocomplete` component documentation).
+ *
+ *
+ *  <br /> ## Options `object` format
+ * Options are represented by an `Array` of `objects` with the following format:
+ *
+ * ``` js
+ * {
+ *   value: "Example",
+ *   label: "Example"
+ * }
+ * ```
+ *
+ */
+declare const Instructions: React.ForwardRefExoticComponent<Omit<Omit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, never>, never>, "ref">, keyof InstructionsOwnProps> & InstructionsOwnProps & React.RefAttributes<any>>;
+export default Instructions;

package/types/components/widgets/Instructions/Instructions.styled.d.ts

@@ -0,0 +1,14 @@
+/**
+ * TopBarContainer — the only component in this file that reads a prop.
+ */
+interface InstructionsTopBarStyleProps {
+    /**
+     * `$initialHover` is inert: its conditional rule duplicates the unconditional one above it.
+     */
+    $initialHover?: boolean;
+}
+export declare const Instructions: 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 declare const TopBarContainer: 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>>, InstructionsTopBarStyleProps>, never>> & string;
+export declare const SelectContainer: 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 declare const InstructionsArea: 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/Instructions/index.d.ts

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

package/types/components/widgets/ProgressBar/ProgressBar.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import * as S from './ProgressBar.styled';
+type ProgressBarOwnProps = {
+    totalAssets: number;
+    completedAssets: number;
+    percentageText?: string;
+    barColor?: string;
+    height?: number;
+    label?: string;
+    type?: string;
+    linkText?: string;
+    onClick?: (...args: any[]) => any;
+};
+type Props = Omit<React.ComponentPropsWithoutRef<typeof S.Container>, keyof ProgressBarOwnProps> & ProgressBarOwnProps;
+/**
+ * ProgressBar that let you progress through a task.
+ *
+ *
+ * ### Import
+ *
+ * ``` js
+ * import { ProgressBar } from '@ntbjs/react-components/widgets/ProgressBar'
+ * // or
+ * import ProgressBar from '@ntbjs/react-components/widgets/ProgressBar'
+ * ```
+ *
+ *
+ */
+declare const ProgressBar: ({ totalAssets, completedAssets, percentageText, barColor, height, label, type, linkText, onClick, ...props }: Props) => React.JSX.Element;
+export default ProgressBar;

package/types/components/widgets/ProgressBar/ProgressBar.styled.d.ts

@@ -0,0 +1,41 @@
+interface ProgressBarContainerStyleProps {
+    /** `height` — px, so `number`. No `$` but defect in baseline. */
+    height?: number;
+}
+interface ProgressBarMetricsStyleProps {
+    /** `$hasLink` — declared for MetricsContainer only; PercentageIndicator never reads it. */
+    $hasLink?: boolean;
+}
+interface ProgressBarFillStyleProps {
+    /** `type` — left as `string` to match propTypes contract; has `colorMap.default` fallback. */
+    type?: string;
+    /** `barColor` — whole CSS colour that short-circuits `colorMap`. */
+    barColor?: string;
+    /** `(completedAssets / totalAssets) * 100`, interpolated as `%`. */
+    $percentage?: number;
+}
+interface ProgressBarHoverStyleProps {
+    /** `$isHovered` — hover state from `useState`. Hosts: `ButtonLink` and `StyledArrowIcon`. */
+    $isHovered?: boolean;
+}
+export declare const ProgressBar: 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<HTMLParagraphElement>, HTMLParagraphElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>>, never>, never>> & string;
+export declare const Container: 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>>, ProgressBarContainerStyleProps>, never>> & string;
+export declare const InnerContainer: 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 declare const MetricsContainer: 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>>, ProgressBarMetricsStyleProps>, never>> & string;
+export declare const Label: 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 declare const Percentage: 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 declare const ProgressBarTrack: 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 declare const Completed: 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 declare const PercentageIndicator: 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 declare const ExternalPercentageIndicator: 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 declare const ProgressBarFill: 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>>, ProgressBarFillStyleProps>, never>> & string;
+export declare const Link: 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 declare const ButtonLink: 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>>, ProgressBarHoverStyleProps>, never>> & string;
+export declare const StyledArrowIcon: 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").SVGProps<SVGSVGElement> & {
+    title?: string;
+}, import("react").SVGProps<SVGSVGElement> & {
+    title?: string;
+}>, ProgressBarHoverStyleProps>, never>> & string & Omit<import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+    title?: string;
+}>, keyof import("react").Component<any, {}, any>>;
+export {};

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

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

package/types/components/widgets/SummaryCard/SummaryCard.d.ts

@@ -0,0 +1,83 @@
+import React from 'react';
+import * as S from './SummaryCard.styled';
+type AssetSummaryCardOwnProps = {
+    /**
+     * Wether the SummaryCard is active or not.
+     */
+    activeSummaryCard?: boolean;
+    /**
+     * Title of the content
+     */
+    title?: string;
+    /**
+     * Description of the content
+     */
+    description?: string;
+    /**
+     * Special instructions for the content
+     */
+    instructions?: string;
+    /**
+     * Type of instructions
+     */
+    instructionSeverity?: 1 | 2 | 3 | 4 | 5;
+    /**
+     * One or more children to render in the left half of the header
+     */
+    headerLeft?: React.ReactNode;
+    /**
+     * One or more children to render in the right half of the header
+     */
+    headerRight?: React.ReactNode;
+    /**
+     * One or more children to render in the left half of the footer
+     */
+    footerLeft?: React.ReactNode;
+    /**
+     * One or more children to render in the right half of the footer
+     */
+    footerRight?: React.ReactNode;
+    /**
+     * Width of the card
+     */
+    width?: number;
+    /**
+     * Whether or not to use a border around the card
+     */
+    useBorder?: boolean;
+    /**
+     * Whether or not the Summary Card is within the CompactCard view or Grid view
+     */
+    view?: string;
+    /**
+     * Translated labels object for instruction(Info,Limited Use etc)
+     */
+    instructionLabels?: {
+        [key: string]: string;
+    };
+};
+/**
+ * ### Import
+ *
+ * ``` js
+ * import { SummaryCard } from '@ntbjs/react-components/widgets'
+ * // or
+ * import SummaryCard from '@ntbjs/react-components/widgets/SummaryCard'
+ * ```
+ *
+ * ### Props
+ * ```
+ * Pass `title="Title"` to set the title of the card.
+ * Pass `description="Description"` to set the description of the card.
+ * Pass `instructions="Instructions"` to set the instructions of the card.
+ * Pass 1-5 to `instructionSeverity` to reflect the severity of the instructions.
+ * Pass `headerLeft={<div>Left</div>}` to set the left header of the card.
+ * Pass `headerRight={<div>Right</div>}` to set the right header of the card.
+ * Pass `footerLeft={<div>Left</div>}` to set the left footer of the card.
+ * Pass `footerRight={<div>Right</div>}` to set the right footer of the card.
+ * Pass `width={300}` to set the width of the card.
+ * Pass `useBorder={true}` to set the border of the card.
+ * ```
+ */
+declare const SummaryCard: 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.SummaryCardStyleProps>, never>, "ref">, keyof AssetSummaryCardOwnProps> & AssetSummaryCardOwnProps & React.RefAttributes<any>>;
+export default SummaryCard;

package/types/components/widgets/SummaryCard/SummaryCard.styled.d.ts

@@ -0,0 +1,29 @@
+/** Card root props; what `SummaryCard.tsx` passes to `<S.SummaryCard>`. */
+export interface SummaryCardStyleProps {
+    /** `view` as string (not narrowed to 'compact'|'grid'); NO `$` to preserve existing DOM baseline. */
+    view?: string;
+    /** `width` as number (px); NO `$` to preserve existing DOM baseline. */
+    width?: number;
+    /** `useBorder` — optional here even though component defaults to false. */
+    $useBorder?: boolean;
+}
+/** Gutter spacer component; rendered seven times by `SummaryCard.tsx`. */
+interface SummaryCardGutterStyleProps {
+    /** `$gutter` — always a literal (4, 8, or 16) at the call sites; number. */
+    $gutter?: number;
+    /** `renderAsMargin` — read but never passed; conditional here is dead code. */
+    renderAsMargin?: boolean;
+}
+export declare const SummaryCard: 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>>, SummaryCardStyleProps>, never>> & string;
+export declare const Gutter: 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>>, SummaryCardGutterStyleProps>, never>> & string;
+export declare const Header: 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 declare const HeaderLeft: 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 declare const HeaderRight: 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 declare const Title: 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 Description: 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 Instruction: 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 declare const Footer: 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 declare const FooterLeft: 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 declare const FooterRight: 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 declare const StyledFloatingArrow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<Omit<import("@floating-ui/react").FloatingArrowProps, "ref"> & import("react").RefAttributes<SVGSVGElement>, Omit<import("@floating-ui/react").FloatingArrowProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>, never>, never>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<import("@floating-ui/react").FloatingArrowProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>, keyof import("react").Component<any, {}, any>>;
+export {};

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

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

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

@@ -0,0 +1,11 @@
+export { default as AssetGallery } from './AssetGallery';
+export { default as ContextMenu } from './ContextMenu';
+export { default as ContextMenuItem } from './ContextMenu/ContextMenuItem';
+export { default as ContextMenuItemsGroup } from './ContextMenu/ContextMenuItemsGroup';
+export { default as AssetPreviewTopBar } from './AssetPreview/AssetPreviewTopBar';
+export { default as SummaryCard } from './SummaryCard';
+export { default as AssetActionBase } from './AssetActionsBase';
+export { default as AssetAction } from './AssetAction';
+export { default as ProgressBar } from './ProgressBar';
+export { default as InfoCard } from './InfoCard';
+export { default as InstructionSeverityDisplay } from './InstructionSeverityDisplay';

package/types/hooks/useElementSize.d.ts

@@ -0,0 +1,14 @@
+import type { RefObject } from 'react';
+export interface ElementSize {
+    width: number;
+    height: number;
+}
+/**
+ * Tracks element offsetWidth and offsetHeight across window resizes.
+ *
+ * Ref is required (not nullable) — the body reads ref.current without a guard.
+ *
+ * @param ref                     element to measure
+ * @param delayWindowResizeUpdate debounce window for the resize handler, in ms
+ */
+export declare function useElementSize<T extends HTMLElement = HTMLElement>(ref: RefObject<T | null>, delayWindowResizeUpdate?: number): ElementSize;

package/types/hooks/useEventListner.d.ts

@@ -0,0 +1,14 @@
+import type { RefObject } from 'react';
+export type DomEventMap = WindowEventMap & HTMLElementEventMap & DocumentEventMap;
+export type DomEventName = keyof DomEventMap;
+/**
+ * Subscribes to a DOM event for the component lifetime, always calling the latest handler.
+ * Element and options are optional (fall back to window and no options).
+ *
+ * @param eventName any DOM event name; selects the handler's event type
+ * @param handler   received event; stored in a ref so closures don't rebind the listener
+ * @param element   target ref; omit to listen on `window`
+ * @param options   forwarded to addEventListener and removeEventListener
+ */
+declare function useEventListener<K extends DomEventName, T extends EventTarget = HTMLElement>(eventName: K, handler: (event: DomEventMap[K]) => void, element?: RefObject<T | null> | null, options?: boolean | AddEventListenerOptions): void;
+export { useEventListener };