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

package/types/components/inputs/CompactAutocompleteSelect/CompactAutocompleteSelect.styled.d.ts

@@ -0,0 +1,157 @@
+import type React from 'react';
+import Select from 'react-select';
+import { AsyncPaginate } from 'react-select-async-paginate';
+import CreatableSelect from 'react-select/creatable';
+import type { PartialNtbTheme } from '../../../utils/defaultTheme';
+/**
+ * `CompactAutocompleteSelect.tsx`'s `type` prop, verbatim from its
+ * `PropTypes.oneOf(['', 'error', 'warning', 'instructions-warning', 'loading', 'success'])`,
+ * carried WITHOUT a `$` to `Control`, `ValueContainer` and `Placeholder` — see
+ * `ControlStyleProps` for why that is not a DOM leak here.
+ *
+ * Closed on purpose (§J.6): the templates below compare against this value 14 times, so a
+ * mistyped state name is TS2367 rather than a branch that silently never fires. `''` is a
+ * member because the component defaults `type = ''` (tsx line 172).
+ */
+type CompactAutocompleteSelectType = '' | 'error' | 'warning' | 'instructions-warning' | 'loading' | 'success';
+/**
+ * The `theme` prop of every `styled(<react-select component>)` in this file — 14 of them.
+ *
+ * `theme` is the one prop name that both styled-components and react-select claim.
+ * react-select types it `ThemeConfig = Theme | ((t: Theme) => Theme)` and its `Theme`
+ * REQUIRES `borderRadius`, which `NtbTheme` does not have, so `.attrs(applyDefaultTheme)`
+ * — return type `{ theme: NtbTheme }` — was unassignable at all 14 sites, each reporting
+ * the same last line:
+ *
+ *   TS2345 … Types of property 'theme' are incompatible.
+ *     Property 'borderRadius' is missing in type 'NtbTheme' but required in type 'Theme'.
+ *
+ * Declaring `theme` in the `.attrs<P>()` generic fixes it because the generic is applied
+ * as `Substitute<OuterProps, P> = FastOmit<OuterProps, keyof P> & P`, i.e. it REPLACES
+ * react-select's declaration rather than intersecting with it. That is the truth about
+ * this boundary: react-select's `getTheme()` is `{ ...its defaultTheme, ...props.theme }`,
+ * so our `colors`/`spacing` win — which is why `ThemeColors`/`ThemeSpacing` in
+ * `utils/defaultTheme.ts` carry react-select's member names — and `borderRadius` falls
+ * through to react-select's own `4`. `NtbTheme` is deliberately a PARTIAL override of
+ * react-select's theme. Do NOT add `borderRadius` to `NtbTheme` to "fix" this: that hands
+ * react-select a border radius it does not get today, which is a render change.
+ *
+ * `MultiSelect.styled.ts` carries the same interface for the same reason.
+ */
+interface SelectThemeProp {
+    /** A partial override merged over `defaultTheme` by `applyDefaultTheme`. */
+    theme?: PartialNtbTheme;
+}
+declare const AsyncCreatableSelectPaginate: import("react-select-async-paginate").WithAsyncPaginateType;
+/**
+ * The WRITTEN type of the four `styled(<react-select component>)` exports below. Same
+ * mechanism, same wording and the same audit as `SelectWrapper` in
+ * `src/components/inputs/MultiSelect/MultiSelect.styled.ts` — read that one; it is the
+ * canonical note. §G.4.
+ *
+ * Short version: the INFERRED type is correct and unprintable. Under `--declaration` its
+ * printed form expands to react-select's `PublicBaseSelectProps` and
+ * `StateManagerAdditionalProps`, which `react-select`'s `exports` map does not serve, so
+ * tsc reported 8 x TS2883 here and — because `noEmitOnError` is false — silently declined
+ * to write this file's `.d.ts` at all. That in turn erased the props of the PUBLISHED
+ * `CompactAutocompleteSelect` declaration down to
+ * `ForwardRefExoticComponent<RefAttributes<unknown>>`, a closed props type with zero
+ * members: the exact §G.4 poison, arriving from react-select rather than from `allowJs`.
+ *
+ * tsc prints a generic alias APPLICATION by reference, so `SelectWrapper<typeof Select>`
+ * is writeable where the expansion is not. `Omit<ComponentProps<C>, keyof P> & P` is
+ * styled-components' own `Substitute<OuterProps, P>`, so no prop is widened or narrowed.
+ */
+type SelectWrapper<C extends React.ComponentType<any>> = React.ComponentType<Omit<React.ComponentProps<C>, keyof SelectWrapperStyleProps> & SelectWrapperStyleProps>;
+type AsyncCreatablePaginateWrapper = SelectWrapper<typeof AsyncCreatableSelectPaginate>;
+/**
+ * The four select wrappers share this: `$hasLabel` for `sharedStyle`'s sake, `theme` for
+ * react-select's sake, and `disabled` — which is a deferred defect, see below.
+ */
+export interface SelectWrapperStyleProps extends SelectThemeProp {
+    /** `!isEmpty(label)` — narrows the control to 66.66% so the label gets the other third. */
+    $hasLabel?: boolean;
+    disabled?: boolean;
+}
+interface DisabledStyleProps {
+    /** `disabled` — dims and blocks the pointer. Also reaches the DOM; see above. */
+    disabled?: boolean;
+}
+export declare const CompactAutocompleteSelect: import("styled-components/dist/types").IStyledComponentBase<"web", 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>>, DisabledStyleProps>, never>> & string;
+export declare const Label: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>>, DisabledStyleProps>, never>> & string;
+export declare const InputContainer: import("styled-components/dist/types").IStyledComponentBase<"web", 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>> & string;
+export declare const SuccessContainer: import("styled-components/dist/types").IStyledComponentBase<"web", 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>> & string;
+export declare const AsyncCreatableAutocompleteSelect: AsyncCreatablePaginateWrapper;
+export declare const AsyncAutocompleteSelect: SelectWrapper<typeof AsyncPaginate>;
+export declare const AutocompletSelect: SelectWrapper<typeof Select>;
+export declare const AutocompletCreatableSelect: SelectWrapper<typeof CreatableSelect>;
+/**
+ * Props of `Control`, the react-select control wrapper.
+ *
+ * `edit` and `type` HAVE NO `$` AND STILL DO NOT LEAK TO THE DOM, which makes this the one
+ * benign member of §E.4's non-`$` list in this file and worth stating so nobody "fixes" it
+ * blind. There is no `withConfig`/`shouldForwardProp` on a `styled(<component>)` — there is
+ * no DOM element to filter for — and react-select's `Control` renders only its
+ * `innerProps` onto the `<div>`, ignoring props it does not know. So
+ * `<S.Control edit={edit} type={type} …>` (tsx line 193) reaches the template and stops
+ * there. Prefixing them would be tidier but is not a bug fix, and it still touches two
+ * files for no type benefit.
+ *
+ * `isFocused` is deliberately ABSENT: it is a real `ControlProps` member, so the template's
+ * seven reads of it already typecheck. §J.9's first case.
+ *
+ * ================== DEFERRED DEFECT in this component's template =====================
+ * `!props.type === 'instructions-warning'` (the `isFocused` border-color rule, ~40 lines
+ * down; the note has to live here because backticks cannot appear inside the styled
+ * template) NEGATES FIRST AND THEN COMPARES A BOOLEAN TO A STRING. It is always false, so
+ * that whole `border-color` rule is dead — a FOCUSED control has never received the
+ * gray-600 border.
+ *
+ * That is the 5th and last remaining error in this file, TS2367 "This comparison appears
+ * to be unintentional because the types 'boolean' and 'string' have no overlap", and NO
+ * ANNOTATION CAN REMOVE IT: `!props.type` is `boolean` whatever `type` is declared as,
+ * `any` included. It is a defect in the expression, and §E.1 rule 3 says fix the code, not
+ * the type. The fix is `props.type !== 'instructions-warning'`, which ACTIVATES a rule that
+ * has never fired on the most visible state of the component — C9 for the fix, C10 for the
+ * re-record, not this commit. §J.8.
+ * ====================================================================================
+ */
+interface ControlStyleProps extends SelectThemeProp {
+    /** `edit` (`PropTypes.bool`) — grey "this is editable" background. */
+    edit?: boolean;
+    /** `type` — see `CompactAutocompleteSelectType`. Branched on 11 times below. */
+    type?: CompactAutocompleteSelectType;
+}
+export declare const Control: 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-select").ControlProps<unknown, boolean, import("react-select").GroupBase<unknown>>, import("react-select").ControlProps<unknown, boolean, import("react-select").GroupBase<unknown>>>, ControlStyleProps>, never>> & string & Omit<(<Option_1, IsMulti_1 extends boolean, Group_1 extends import("react-select").GroupBase<Option_1>>(props: import("react-select").ControlProps<Option_1, IsMulti_1, Group_1>) => import("@emotion/react").jsx.JSX.Element), keyof React.Component<any, {}, any>>;
+export declare const Option: 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-select").OptionProps<unknown, boolean, import("react-select").GroupBase<unknown>>, import("react-select").OptionProps<unknown, boolean, import("react-select").GroupBase<unknown>>>, SelectThemeProp>, never>> & string & Omit<(<Option_16, IsMulti_16 extends boolean, Group_16 extends import("react-select").GroupBase<Option_16>>(props: import("react-select").OptionProps<Option_16, IsMulti_16, Group_16>) => import("@emotion/react").jsx.JSX.Element), keyof React.Component<any, {}, any>>;
+/**
+ * `CompactAutocompleteSelect.tsx` passes `<S.Placeholder className="select-placeholder"
+ * type={type} …>` (tsx line 225). Same non-`$`-but-not-leaking situation as `Control`.
+ */
+interface PlaceholderStyleProps extends SelectThemeProp {
+    /** `type` — dims the placeholder for the `error` and `warning` states only. */
+    type?: CompactAutocompleteSelectType;
+}
+export declare const Placeholder: 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-select").PlaceholderProps<unknown, boolean, import("react-select").GroupBase<unknown>>, import("react-select").PlaceholderProps<unknown, boolean, import("react-select").GroupBase<unknown>>>, PlaceholderStyleProps>, never>> & string & Omit<(<Option_17, IsMulti_17 extends boolean, Group_17 extends import("react-select").GroupBase<Option_17>>(props: import("react-select").PlaceholderProps<Option_17, IsMulti_17, Group_17>) => import("@emotion/react").jsx.JSX.Element), keyof React.Component<any, {}, any>>;
+export declare const SingleValue: 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-select").SingleValueProps<unknown, boolean, import("react-select").GroupBase<unknown>>, import("react-select").SingleValueProps<unknown, boolean, import("react-select").GroupBase<unknown>>>, SelectThemeProp>, never>> & string & Omit<(<Option_19, IsMulti_19 extends boolean, Group_19 extends import("react-select").GroupBase<Option_19>>(props: import("react-select").SingleValueProps<Option_19, IsMulti_19, Group_19>) => import("@emotion/react").jsx.JSX.Element), keyof React.Component<any, {}, any>>;
+export declare const Input: 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-select").InputProps<unknown, boolean, import("react-select").GroupBase<unknown>>, import("react-select").InputProps<unknown, boolean, import("react-select").GroupBase<unknown>>>, SelectThemeProp>, never>> & string & Omit<(<Option_7, IsMulti_7 extends boolean, Group_7 extends import("react-select").GroupBase<Option_7>>(props: import("react-select").InputProps<Option_7, IsMulti_7, Group_7>) => import("@emotion/react").jsx.JSX.Element), keyof React.Component<any, {}, any>>;
+export declare const Menu: 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-select").MenuProps<unknown, boolean, import("react-select").GroupBase<unknown>>, import("react-select").MenuProps<unknown, boolean, import("react-select").GroupBase<unknown>>>, SelectThemeProp>, never>> & string & Omit<(<Option_9, IsMulti_9 extends boolean, Group_9 extends import("react-select").GroupBase<Option_9>>(props: import("react-select").MenuProps<Option_9, IsMulti_9, Group_9>) => import("@emotion/react").jsx.JSX.Element), keyof React.Component<any, {}, any>>;
+export declare const ValueContainer: 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-select").ValueContainerProps<unknown, boolean, import("react-select").GroupBase<unknown>>, import("react-select").ValueContainerProps<unknown, boolean, import("react-select").GroupBase<unknown>>>, SelectThemeProp>, never>> & string & Omit<(<Option_20, IsMulti_20 extends boolean, Group_20 extends import("react-select").GroupBase<Option_20>>(props: import("react-select").ValueContainerProps<Option_20, IsMulti_20, Group_20>) => import("@emotion/react").jsx.JSX.Element), keyof React.Component<any, {}, any>>;
+export declare const ClearIndicator: 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-select").ClearIndicatorProps<unknown, boolean, import("react-select").GroupBase<unknown>>, import("react-select").ClearIndicatorProps<unknown, boolean, import("react-select").GroupBase<unknown>>>, SelectThemeProp>, never>> & string & Omit<(<Option, IsMulti extends boolean, Group extends import("react-select").GroupBase<Option>>(props: import("react-select").ClearIndicatorProps<Option, IsMulti, Group>) => import("@emotion/react").jsx.JSX.Element), keyof React.Component<any, {}, any>>;
+export declare const DropdownIndicator: 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-select").DropdownIndicatorProps<unknown, boolean, import("react-select").GroupBase<unknown>>, import("react-select").DropdownIndicatorProps<unknown, boolean, import("react-select").GroupBase<unknown>>>, SelectThemeProp>, never>> & string & Omit<(<Option_2, IsMulti_2 extends boolean, Group_2 extends import("react-select").GroupBase<Option_2>>(props: import("react-select").DropdownIndicatorProps<Option_2, IsMulti_2, Group_2>) => import("@emotion/react").jsx.JSX.Element), keyof React.Component<any, {}, any>>;
+export declare const DropdownIndicatorIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<React.SVGProps<SVGSVGElement> & {
+    title?: string;
+}, React.SVGProps<SVGSVGElement> & {
+    title?: string;
+}>, never>, never>> & string & Omit<React.FunctionComponent<React.SVGProps<SVGSVGElement> & {
+    title?: string;
+}>, keyof React.Component<any, {}, any>>;
+export declare const ClearIndicatorIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<React.SVGProps<SVGSVGElement> & {
+    title?: string;
+}, React.SVGProps<SVGSVGElement> & {
+    title?: string;
+}>, never>, never>> & string & Omit<React.FunctionComponent<React.SVGProps<SVGSVGElement> & {
+    title?: string;
+}>, keyof React.Component<any, {}, any>>;
+export declare const IndicatorSeparator: 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-select").IndicatorSeparatorProps<unknown, boolean, import("react-select").GroupBase<unknown>>, import("react-select").IndicatorSeparatorProps<unknown, boolean, import("react-select").GroupBase<unknown>>>, SelectThemeProp>, never>> & string & Omit<(<Option_6, IsMulti_6 extends boolean, Group_6 extends import("react-select").GroupBase<Option_6>>(props: import("react-select").IndicatorSeparatorProps<Option_6, IsMulti_6, Group_6>) => import("@emotion/react").jsx.JSX.Element), keyof React.Component<any, {}, any>>;
+export {};

package/types/components/inputs/CompactAutocompleteSelect/index.d.ts

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

package/types/components/inputs/CompactStarRating/CompactStarRating.d.ts

@@ -0,0 +1,96 @@
+import React from 'react';
+type CompactStarRatingOwnProps = {
+    /**
+     * Whether the star rating is read-only
+     */
+    readOnly?: boolean;
+    /**
+     * Whether the star rating is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Displays a grey background to show that the star rating is editable
+     */
+    edit?: boolean;
+    /**
+     * Rating value (0-5)
+     */
+    value?: number;
+    /**
+     * Define the type based on error, warning, loading and success.
+     */
+    type?: '' | 'error' | 'warning' | 'loading' | 'success';
+    /**
+     * Default rating value
+     */
+    defaultValue?: number;
+    /**
+     * Compact star rating label
+     */
+    label?: string;
+    /**
+     * Name of the text area (used when sending form data)
+     */
+    name?: string;
+    /**
+     * Icon element – E.g: `icon={<StarIcon />}`
+     */
+    icon?: React.ReactElement<any>;
+    /**
+     * Filled icon element – E.g: `icon={<StarIcon />}`
+     */
+    iconFill?: React.ReactElement<any>;
+    /**
+     * Max number of stars: 5
+     */
+    max?: number;
+    /**
+     * View Compact Star Rating component when no values have been assigned
+     */
+    viewEmpty?: boolean;
+    /**
+     * Optional callback function for `onChange`
+     */
+    onChange?: (...args: any[]) => any;
+    /**
+     * Optional callback function for `onBlur`
+     */
+    onBlur?: (...args: any[]) => any;
+    /**
+     * Whether the component is hidden or visible.
+     */
+    hidden?: boolean;
+    /**
+     * Icon element – E.g: `icon={<Spinner />}`
+     */
+    loadingIcon?: React.ReactElement<any>;
+    /**
+     * Icon element – E.g: `icon={<Check />}`
+     */
+    successIcon?: React.ReactElement<any>;
+    /**
+     * Description ToolTip text.
+     */
+    descriptionToolTip?: string;
+};
+/**
+ * A compact star rating.
+ *
+ * To remove a rating (i.e. show 0 stars), click the first star to give a 1-star rating, and then click the first star again.
+ *
+ * ### Import
+ *
+ * ``` js
+ * import { CompactStarRating } from '@ntbjs/react-components/inputs'
+ * // or
+ * import CompactStarRating from '@ntbjs/react-components/inputs/CompactStarRating'
+ * ```
+ * ### Values
+ * Pass default value as a prop (`defaultValue`) into the component: 0 or state value.
+ *   ```
+ */
+declare const CompactStarRating: 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>>, {
+    readOnly?: boolean;
+    disabled?: boolean;
+}>, never>, "ref">, keyof CompactStarRatingOwnProps> & CompactStarRatingOwnProps & React.RefAttributes<any>>;
+export default CompactStarRating;

package/types/components/inputs/CompactStarRating/CompactStarRating.styled.d.ts

@@ -0,0 +1,86 @@
+/**
+ * `CompactStarRating.tsx`'s `type` prop, from its
+ * `PropTypes.oneOf(['', 'error', 'warning', 'loading', 'success'])`. The component
+ * defaults it to `''`, so `''` is a member — this is the propTypes verbatim.
+ *
+ * Carried WITHOUT a `$` by `starsWidth`, which is a defect in its own right (see
+ * there). `Star` / `StarFill` / `CheckIconContainer` also branch on a `type`, but
+ * theirs is not this one — see the notes at those three.
+ */
+type CompactStarRatingType = '' | 'error' | 'warning' | 'loading' | 'success';
+export declare const CompactStarRating: 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>>, {
+    /** `readOnly` — `PropTypes.bool`. Leaks to the DOM; see above. */
+    readOnly?: boolean;
+    /** `disabled` — `PropTypes.bool`. Leaks to the DOM; see above. */
+    disabled?: boolean;
+}>, never>> & string;
+export declare const labelWidth: 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>>, {
+    disabled?: boolean;
+}>, never>> & string;
+export declare const SuccessContainer: 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;
+interface StarsWidthStyleProps {
+    /** `edit` — `PropTypes.bool`. Shows the editable-affordance background. */
+    $edit?: boolean;
+    /**
+     * `type` — see `CompactStarRatingType`. HAS NO `$`, AND THAT IS A DEFECT: this is a
+     * `styled.div`, `type` is not a member of `HTMLAttributes<HTMLDivElement>`, and
+     * `shouldForwardProp` forwards it — so `type="error"` / `type="loading"` etc. is on
+     * this `<div>` in the render baseline whenever the prop is non-empty. Fix = rename
+     * `$type`; removes a DOM attribute → C10 with its re-record. §E.4 third case.
+     */
+    type?: CompactStarRatingType;
+    /** `readOnly` — `PropTypes.bool`. Leaks to the DOM the same way. */
+    readOnly?: boolean;
+    /**
+     * `success` IS DECLARED BECAUSE THE NESTED `css<{ success?: boolean }>` BLOCK BELOW
+     * READS IT, NOT BECAUSE ANYTHING PASSES IT. Nothing does — `CompactStarRating.tsx`
+     * renders `<S.starsWidth $edit={edit} type={type} readOnly={readOnly}>` and there is
+     * no other importer — so `props.success` is always `undefined` and that block's
+     * animation is unconditionally `fadeOut`. The success-fade-IN state of this component
+     * is unimplemented. A DIFFERENT DEFECT from the `fadeIn` branch removed from
+     * `SuccessContainer` above, and left alone deliberately: `fadeIn` was a mistyped
+     * identifier that never existed as a prop, whereas `success` WAS a real
+     * `PropTypes.bool` (added by `4ed910a`) that `b5d59e7`/`7e46b9d` deleted from the
+     * component while leaving this read behind. Deciding between restoring the prop and
+     * deleting the block is its own call, on its own commit.
+     *
+     * Without this member the interpolation is TS2345, and the reason is the WEAK-TYPE
+     * RULE (§J.7): `{ success?: boolean }` is all-optional, assignability to a weak type
+     * requires at least one member in common, and the host had none — measured verbatim as
+     * "…has no properties in common with type '{ success?: boolean; }'". Same shape as
+     * `CompactTextInput`'s `StyledLink` / `linkColor`.
+     *
+     * It also has no `$`, but since nothing passes it, it does not currently leak.
+     */
+    success?: boolean;
+}
+export declare const starsWidth: 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>>, StarsWidthStyleProps>, never>> & string;
+/**
+ * The props `Star` and `StarFill` share — they are byte-identical templates apart from
+ * one `type === 'error'` block, and the JSX passes them the same set.
+ *
+ * `disabled` is deliberately ABSENT: on a `styled.button` it is a genuine
+ * `ButtonHTMLAttributes` member, so the read already typechecks and the attribute
+ * belongs on the element (§J.9 first row).
+ *
+ * `type` IS ALSO DELIBERATELY ABSENT, AND THAT IS WHY FOUR TS2367 ERRORS SURVIVE IN
+ * THIS FILE. See the note above `StarFill`.
+ */
+interface StarStyleProps {
+    /** `hover && key + 1 <= tempRating` — derived in the component, so `boolean`. */
+    $hover?: boolean;
+    /**
+     * `readOnly` — `PropTypes.bool`. HAS NO `$`, AND THAT IS A DEFECT: `readOnly` is NOT a
+     * member of `ButtonHTMLAttributes` (unlike `disabled`), and `shouldForwardProp`
+     * forwards it, so `readonly=""` is on every rendered star `<button>` today and is in
+     * the recorded render baseline. Fix = rename `$readOnly`; removes a DOM attribute →
+     * C10 with its re-record. §E.4 third case.
+     */
+    readOnly?: boolean;
+}
+export declare const Star: 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").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>>, StarStyleProps>, never>> & string;
+export declare const StarFill: 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").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>>, StarStyleProps>, never>> & string;
+export declare const CheckIconContainer: 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>>, {
+    type?: CompactStarRatingType;
+}>, never>> & string;
+export {};

package/types/components/inputs/CompactStarRating/index.d.ts

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

package/types/components/inputs/CompactTextInput/CompactTextInput.d.ts

@@ -0,0 +1,116 @@
+import React from 'react';
+type CompactTextInputOwnProps = {
+    /**
+     * The label of the input field - leave `undefined` to hide the label
+     */
+    label?: string;
+    /**
+     * Displays a light green background to show that an action was successful.
+     */
+    success?: boolean;
+    /**
+     * The input type - eg. `text`, `number`
+     */
+    inputType?: string;
+    /**
+     * The input name
+     */
+    name?: string;
+    /**
+     * The default value of the input - creates an uncontrolled input
+     */
+    defaultValue?: string;
+    /**
+     * The value of the input - creates a controlled input
+     */
+    value?: string;
+    /**
+     * The placeholder of the input
+     */
+    placeholder?: string;
+    /**
+     * A URL associated with the input value. Creates a clickable link that accepts full or relative URL
+     */
+    link?: string;
+    /**
+     * The target for the link. Only applies when the field is in read-only mode
+     */
+    linkTarget?: '_self' | '_blank' | '_parent' | '_top';
+    /**
+     * Whether the link has a onClick event.
+     */
+    linkHandler?: (...args: any[]) => any;
+    /**
+     * Whether the handler should preceed the link behavior.
+     */
+    activeLinkHandler?: boolean;
+    /**
+     * 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 value is read only
+     */
+    readOnly?: boolean;
+    /**
+     * Whether the value is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Displays a grey background to show that value is editable
+     */
+    edit?: boolean;
+    /**
+     * There is a warning present.
+     */
+    warning?: boolean | string;
+    /**
+     * Whether to bold the input content - Slightly increases the font size and font weight of the input value
+     */
+    bold?: boolean;
+    /**
+     * Whether the component is hidden or visible.
+     */
+    hidden?: boolean;
+    /**
+     * Callback for `onChange`
+     */
+    onChange?: (...args: any[]) => any;
+    /**
+     * Callback for `onFocus`
+     */
+    onFocus?: (...args: any[]) => any;
+    /**
+     * Callback for `onBlur`
+     */
+    onBlur?: (...args: any[]) => any;
+    /**
+     * Define the type based on error, warning, loading and success.
+     */
+    type?: '' | 'error' | 'warning' | 'loading' | 'success';
+    /**
+     * Description ToolTip text.
+     */
+    descriptionToolTip?: string;
+    /**
+     * Icon element – E.g: `icon={<Spinner />}`
+     */
+    loadingIcon?: React.ReactElement<any>;
+    /**
+     * Icon element – E.g: `icon={<Check />}`
+     */
+    successIcon?: React.ReactElement<any>;
+};
+/**
+ * Compact text inputs let users enter and edit text in the UI in a compact way. They typically appear in forms or displays of metadata.
+ *
+ * ### Import
+ *
+ * ``` js
+ * import { CompactTextInput } from '@ntbjs/react-components/inputs'
+ * // or
+ * import CompactTextInput from '@ntbjs/react-components/inputs/CompactTextInput'
+ * ```
+ */
+declare const CompactTextInput: 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 CompactTextInputOwnProps> & CompactTextInputOwnProps & React.RefAttributes<any>>;
+export default CompactTextInput;

package/types/components/inputs/CompactTextInput/CompactTextInput.styled.d.ts

@@ -0,0 +1,70 @@
+/**
+ * `CompactTextInput.tsx`'s `type` prop, from its
+ * `PropTypes.oneOf(['', 'error', 'warning', 'loading', 'success'])`, carried across
+ * the `shouldForwardProp` boundary as `$type` by both `Input` and
+ * `InputIconContainer`.
+ *
+ * Closed on purpose, not widened to `string`. The templates below branch on this
+ * value 20 times; with a closed union a mistyped state name is TS2367 rather than a
+ * branch that silently never fires. `''` is a member because the component defaults
+ * `type = ''` — this union is the propTypes verbatim, not a tidied version of it.
+ */
+type CompactTextInputType = '' | 'error' | 'warning' | 'loading' | 'success';
+export declare const CompactTextInput: 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/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>>, {
+    $disabled?: boolean;
+}>, never>> & string;
+export declare const InputContainer: 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>>, {
+    $hasLabel?: boolean;
+}>, never>> & string;
+export declare const SuccessContainer: 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 InputSuccessContainer: 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 InputIconContainer: 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>>, {
+    $type?: CompactTextInputType;
+}>, never>> & string;
+/**
+ * Props of `Input`.
+ *
+ * Every member is transient, so `shouldForwardProp` filters all of them out of the DOM.
+ * `$haslink` is lower-case by existing convention at both ends; renaming it would be a
+ * two-file change for no type benefit.
+ *
+ * `$inputType` WAS `inputtype`, WITH NO `$`, AND THAT WAS A DOM LEAK — now fixed.
+ * It is a style/behaviour input (the `.attrs()` callback turns it into the real `type`
+ * attribute), but without the `$` prefix `shouldForwardProp` forwarded it verbatim too,
+ * so `inputtype="text"` was on every rendered `<input>` — visible in seven entries of the
+ * recorded render baseline (`inputs/CompactTextInput` and its five variants, plus
+ * `layout/InputGroup`). §E.4's third case, and the fix is the `$` prefix.
+ *
+ * The PUBLIC prop is unaffected: `CompactTextInput.tsx` still takes `inputType` and maps
+ * it to this transient prop internally, so no consumer has to react. (Grepped: neither
+ * `mb-main-client/src` nor `ntb-dam/client/src` mentions `inputtype` or `inputType` at
+ * all, and no stylesheet in `src` selects on `[inputtype]`.)
+ *
+ * `readOnly` and `disabled` are read by the template too and are deliberately ABSENT
+ * from this interface: both are real `InputHTMLAttributes` members, so those reads
+ * already typecheck and declaring them would add nothing. §J.9.
+ */
+interface InputStyleProps {
+    /** `type` — see `CompactTextInputType`. Branched on 20 times below. */
+    $type?: CompactTextInputType;
+    /** `edit` — shows the editable-affordance background. */
+    $edit?: boolean;
+    /** `bold` — larger font-size/weight for the value. */
+    $bold?: boolean;
+    /** `!isEmpty(link)` — the component derives this, so `boolean`, not `link`'s type. */
+    $haslink?: boolean;
+    /**
+     * `inputType` — the real `<input type>`, defaulted to `'text'` in the callback.
+     * `string` because the propTypes say `PropTypes.string` and the value is handed
+     * straight to the `type` attribute the callback produces.
+     */
+    $inputType?: string;
+}
+export declare const Input: 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").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>>, InputStyleProps>, never>> & string;
+export declare const LinkPopoverContainer: 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 StyledLink: 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>>, {
+    disabled?: boolean;
+}>, never>> & string;
+export declare const ReadOnlyLinkContainer: 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/inputs/CompactTextInput/index.d.ts

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

package/types/components/inputs/MultiLevelCheckbox/MultiLevelCheckbox.d.ts

@@ -0,0 +1,41 @@
+import React from 'react';
+import type { MultiLevelCheckboxNode } from './types';
+type MultiLevelCheckboxOwnProps = {
+    options?: MultiLevelCheckboxNode[];
+    /**
+     * Array of checked option values
+     */
+    checked: any[];
+    /**
+     * Label text for the MultiLevelCheckbox
+     */
+    label?: string;
+    /**
+     * Optional search string
+     */
+    search?: string;
+    /**
+     * Optional text to display when no results are found while searching.`
+     */
+    noResultsText?: string;
+    /**
+     *  Callback function for the `onChange` event
+     */
+    onChange: (...args: any[]) => any;
+};
+/**
+ * MultiLevelCheckbox allow the user to select one or more items from a nested set.
+ *
+ * This component is controlled which means that the consumer will have to keep track of what options are selected. The selected options should be provided to the `checked`-prop.
+ * On any selection or deselection `onChange` will be called with an updated `checked`-list.
+ *
+ * ### Import
+ *
+ * ```js
+ * import { MultiLevelCheckbox } from '@ntbjs/react-components/inputs'
+ * // or
+ * import MultiLevelCheckbox from '@ntbjs/react-components/inputs/MultiLevelCheckbox'
+ * ```
+ */
+declare const MultiLevelCheckbox: React.ForwardRefExoticComponent<Omit<Omit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, React.DetailedHTMLProps<React.FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>>, never>, never>, "ref">, keyof MultiLevelCheckboxOwnProps> & MultiLevelCheckboxOwnProps & React.RefAttributes<any>>;
+export default MultiLevelCheckbox;

package/types/components/inputs/MultiLevelCheckbox/MultiLevelCheckbox.styled.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Props of the two components that take the expand/collapse state across the
+ * `shouldForwardProp` boundary.
+ *
+ * `MultiLevelCheckbox.tsx` passes `$expanded={expanded || expandedBySearch}` at both
+ * sites (lines 263 and 302) — two `useState<boolean>` values OR'd together, hence
+ * `boolean`. Optional, per §J.5: nothing supplies a default and the templates are
+ * written for its absence (`props.$expanded && css`…``).
+ */
+interface ExpandedStyleProps {
+    /** `expanded || expandedBySearch` — opens the `grid-template-rows` / rotates the caret. */
+    $expanded?: boolean;
+}
+export declare const MultiLevelCheckbox: 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").FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, import("react").DetailedHTMLProps<import("react").FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>>, never>, never>> & string;
+export declare const MultiLevelCheckboxLegend: 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<HTMLLegendElement>, HTMLLegendElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLLegendElement>, HTMLLegendElement>>, never>, never>> & string;
+export declare const MultiLevelCheckboxNoResults: 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 CheckboxTreeChildren: 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>>, ExpandedStyleProps>, never>> & string;
+export declare const CheckboxTree: 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 CheckboxTreeCheckboxContainer: 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 ExpandTreeButton: 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").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>>, ExpandedStyleProps>, never>> & string;
+export {};

package/types/components/inputs/MultiLevelCheckbox/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './MultiLevelCheckbox';
+export { NodeType, findChildValues } from './types';