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

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

@@ -0,0 +1,242 @@
+import React from 'react';
+import * as S from './CompactAutocompleteSelect.styled';
+export type CompactAutocompleteSelectOwnProps = {
+    /**
+     * The label of the input field – leave `undefined` to hide the label
+     */
+    label?: 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;
+    /**
+     * `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[];
+    /**
+     * `Array` of `objects` containing the selected options.
+     */
+    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;
+    /**
+     * Callback function for formatting the message displayed in the dropdown when there
+     * are no matching options, and the user has permission to create new options.
+     * The callback function will be given the current input value as an argument.
+     */
+    createNewOptionMessageFunc?: (...args: any[]) => any;
+    /**
+     * If the list of options is empty, or if the current input value doesn't match
+     * any of the available options and the user doesn't have permission to add options,
+     * this function will be called and passed the current input value as an argument.
+     */
+    noOptionsMessageFunc?: (...args: any[]) => any;
+    /**
+     * Whether the value is read only
+     */
+    readOnly?: boolean;
+    /**
+     * Displays a grey background to show that value is editable
+     */
+    edit?: boolean;
+    /**
+     * Whether the component is hidden or visible.
+     */
+    hidden?: boolean;
+    /**
+     * There is an error present – 'error be prioritized over warnings if both are set to 'true'.
+     */
+    error?: boolean | string;
+    /**
+     * There is a warning present.
+     */
+    warning?: boolean | string;
+    /**
+     * Callback function for sending updates to the backend whenever the selected values are updated.
+     * See [Update handling](#update-handling) for details.
+     */
+    onUpdateCallback?: (...args: any[]) => any;
+    /**
+     * Whether the user have permission to create new options
+     */
+    creatable?: boolean;
+    /**
+     * Whether the multi-select should be disabled.
+     * The user will not be able to trigger the on-click effect of the selected options.
+     */
+    disabled?: boolean;
+    /**
+     * Define the type based on error, warning, loading and success.
+     */
+    type?: '' | 'error' | 'warning' | 'instructions-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>;
+};
+export type CompactAutocompleteSelectProps = Omit<React.ComponentPropsWithoutRef<typeof S.AsyncCreatableAutocompleteSelect>, keyof CompactAutocompleteSelectOwnProps> & CompactAutocompleteSelectOwnProps;
+/**
+ * Select input control with autocomplete, async and creatable support.
+ *
+ * This control allows users to search through a predefined set of options, asynchronously load additional options,
+ * and even create new options on-the-fly. It combines the benefits of autocomplete functionality,
+ * asynchronous data fetching, and creatable option support.
+ *
+ * The component uses [react-select](https://react-select.com/) for the main select functionality,
+ * with [react-select-async-paginate](https://www.npmjs.com/package/react-select-async-paginate) for pagination.
+ *
+ * <br /> ### Import
+ *
+ * ``` js
+ * import { CompactAutocompleteSelect } from '@ntbjs/react-components/inputs'
+ * // or
+ * import CompactAutocompleteSelect from '@ntbjs/react-components/inputs/CompactAutocompleteSelect'
+ * ```
+ *
+ *  <br /> ## Option `object` format
+ * Options are represented by an `Array` of `objects` with the following format:
+ *
+ * ``` js
+ * {
+ *   value: "Example",
+ *   label: "Example"
+ * }
+ * ```
+ * The `label` is what will visible to the end-user. Whether `value` and `label`
+ * should be different will depend on your use-case, but they are not required to.
+ *
+ *  <br /> ## Update handling
+ * Changes from the end-user to the selected/available options can be handled with a callback function
+ * passed through the `onUpdateCallback` prop, which is triggered any time the selected values change.
+ *
+ * The callback function will be passed two arguments:
+ * * `action: string`
+ * * `updatedOption: object`
+ *
+ * <br />#### `action`
+ * A `string` indicating what kind of update was made.
+ *
+ * The possible values of `action` are:
+ * * `create-option`: an option that didn't exist in the original list of available options were added
+ * * `select-option`: an option was selected
+ * * `deselect-option`: an option was de-selected by clicking the X in the dropdown menu
+ * * `remove-value`: an option was de-selected by clicking the X on the option label/box
+ * * `pop-value`: an option was de-selected with backspace
+ * * `clear`: all options were de-selected by clicking the clear indicator (not currently in use)
+ *
+ * <br />#### `updatedOption`
+ * Option `object`of the updated option:
+ *
+ * In addition to the default `value` and `label` keys, an `__isNew__` flag will be present if the option was
+ * not part of the original list of available options, i.e. created by the user in the current "session".
+ * This is the case regardless of whether the list is provided through `availableOptions` or
+ * asynchronously through `loadOptions`.
+ *
+ *
+ * <br />## Asynchronous fetching/filtering with pagination
+ * The list of available options can be fetched and filtered asynchronously with a `Promise`
+ * passed through the `loadOptions` prop.
+ *
+ * It will be passed two arguments:
+ *
+ * * `inputValue: string`: current input value/search
+ * * `prevOptions: Array`: previously loaded options for the current search
+ *
+ * The function is triggered and the first page is fetched when the dropdown menu opens.
+ * Whenever the user scrolls down to the bottom of the list, `loadOptions` will
+ * be triggered again to fetch the next page.
+ *
+ * The `Promise` should return an `object` with the following keys:
+ *
+ * ``` js
+ * {
+ *   options: Array,
+ *   hasMore: boolean
+ * }
+ * ```
+ *
+ * `options` should contain the current page of options. It will be concatenated to the previous
+ * set of options automatically. The `hasMore` flag indicates whether there is another page to be fetched.
+ *
+ * **Example:**
+ *
+ * ``` js
+ *
+ * const availableOptions = [
+ *   { value: "Example 1", label: "Example 1" },
+ *   ...
+ *   { value: "Example N", label: "Example N" }
+ * ];
+ *
+ * const filterOptions = inputValue => {
+ *   return availableOptions.filter(option => {
+ *     return option.label.toLowerCase().includes(inputValue.toLowerCase());
+ *   });
+ * };
+ *
+ * const loadOptionsFunc = (inputValue, prevOptions) => {
+ *   const currentLength = prevOptions.length;
+ *   const pageLength = 10;
+ *
+ *   let filteredOptions;
+ *
+ *   if (inputValue) {
+ *     filteredOptions = filterOptions(inputValue);
+ *   } else {
+ *     filteredOptions = availableOptions;
+ *   }
+ *
+ *   const hasMore = filteredOptions.length > currentLength + pageLength;
+ *   const slicedOptions = filteredOptions.slice(currentLength, currentLength + pageLength);
+ *
+ *   return {
+ *     options: slicedOptions,
+ *     hasMore
+ *    };
+ * };
+ *
+ * const loadOptions = (inputValue, prevOptions) => {
+ *   return new Promise(resolve => {
+ *     resolve(loadOptionsFunc(inputValue, prevOptions));
+ *   });
+ * };
+ * ```
+ *
+ * While waiting for the `Promise` to resolve, the component will be in a loading state.
+ * The loading state is showcased in the "Primary With Fetching Timeout" Story.
+ *
+ * <br />#### Without asynchronous fetching/filtering
+ * If you wish to not use asynchronous fetching/filtering, leave the `loadOptions` prop undefined
+ * and pass the `Array` of all available options to the `availableOptions` prop instead.
+ * The component will use the built-in filtering on `label` from `react-select`, and the options
+ * will not be paginated.
+ *
+ * <br />
+ */
+declare const CompactAutocompleteSelect: React.ForwardRefExoticComponent<CompactAutocompleteSelectProps & React.RefAttributes<any>>;
+export default CompactAutocompleteSelect;

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

@@ -0,0 +1,104 @@
+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: 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 = ''`.
+ */
+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;
+type SelectWrapper<C extends React.ComponentType<any>> = React.ComponentType<Omit<React.ComponentProps<C>, keyof SelectWrapperStyleProps> & SelectWrapperStyleProps>;
+type AsyncCreatablePaginateWrapper = SelectWrapper<typeof AsyncCreatableSelectPaginate>;
+export interface SelectWrapperStyleProps extends SelectThemeProp {
+    /** `!isEmpty(label)` — narrows the control to 66.66% so the label gets the other third. */
+    $hasLabel?: boolean;
+    /** `disabled` — unused; fix (repoint to `isDisabled`) changes rendered CSS. */
+    disabled?: boolean;
+}
+interface DisabledStyleProps {
+    /** `disabled` — dims and blocks the pointer. Leaks to DOM. */
+    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>;
+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,34 @@
+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`. Leaks to DOM; defect not fixed. */
+    type?: CompactStarRatingType;
+    /** `readOnly` — `PropTypes.bool`. Leaks to the DOM the same way. */
+    readOnly?: boolean;
+    /** `success` — unused prop, declared for weak-type assignment compatibility. */
+    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;
+interface StarStyleProps {
+    /** `hover && key + 1 <= tempRating` — derived in the component, so `boolean`. */
+    $hover?: boolean;
+    /** `readOnly` — `PropTypes.bool`. Leaks to DOM; defect not fixed. */
+    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;