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

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

@@ -0,0 +1,124 @@
+import React from 'react';
+import * as S from './TextArea.styled';
+type TextAreaOwnProps = {
+    /**
+     * Value to be sent. Typically the content of the text area.
+     */
+    value?: string;
+    /**
+     * Default value/text to be displayed in the text area by default.
+     */
+    defaultValue?: string;
+    /**
+     * Name of the text area (used when sending form data)
+     */
+    name?: string;
+    /**
+     * Label text for the text area. If the text area is empty (no input and no placeholder)
+     * and isn't in focus, the label text will be displayed grayed out in the text area itself.
+     * Otherwise, the label text will be displayed in the top left corner.
+     */
+    label?: string;
+    /**
+     * Field Label text for the text area field. I
+     */
+    fieldLabel?: string;
+    /**
+     * Placeholder text to be displayed if the text area is empty (no input)
+     */
+    placeholder?: string;
+    /**
+     * Whether the user is required to fill in the text area
+     */
+    required?: boolean;
+    /**
+     * Whether the text area is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether the component is hidden or visible.
+     */
+    hidden?: boolean;
+    /**
+     * Whether the text area is read-only
+     */
+    readOnly?: boolean;
+    /**
+     * Displays a grey background to show that value is editable
+     */
+    edit?: boolean;
+    /**
+     * ?
+     */
+    autoComplete?: string;
+    /**
+     * Descriptive text displayed below the text area
+     */
+    description?: string;
+    /**
+     * Optional icon to be displayed left of the text inside the text area
+     */
+    icon?: React.ReactElement<any>;
+    /**
+     * How many rows/lines of text to be displayed by default
+     */
+    rows?: number | string;
+    /**
+     * Add custom class names to the HTML element
+     */
+    className?: string;
+    /**
+     * Add custom CSS styling
+     */
+    style?: any;
+    /**
+     * Add padding (small-medium-large)
+     *
+     * `''` is not from this component's propTypes; `Instructions` forwards its own
+     * `'' | 'small' | 'medium' | 'large'` straight in at `Instructions.tsx:354`. Kept in
+     * sync with `TextAreaPadding` in `TextArea.styled.ts`, which has the full rationale.
+     */
+    padding?: '' | 'small' | 'medium' | 'large';
+    /**
+     * Optional callback function for the `onChange` event
+     */
+    onChange?: (...args: any[]) => any;
+    /**
+     * Optional callback function for the `onBlur` event
+     */
+    onBlur?: (...args: any[]) => any;
+    noBorder?: boolean;
+    /**
+     * Define the type based on error,error-border , warning, loading and success.
+     */
+    type?: '' | 'error' | 'error-border' | 'warning-border' | 'warning' | 'loading' | 'success' | 'instructions-warning';
+    /**
+     * 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;
+    /**
+     * Border Radius for rounded borders.
+     */
+    borderRadius?: number;
+};
+/**
+ * Text areas let users enter and edit text in the UI. They typically appear in forms and dialogs.
+ *
+ * ### Import
+ *
+ * ``` js
+ * import { TextArea } from '@ntbjs/react-components/inputs'
+ * // or
+ * import TextArea from '@ntbjs/react-components/inputs/TextArea'
+ * ```
+ */
+declare const TextArea: React.ForwardRefExoticComponent<Omit<Omit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>>, S.TextInputFieldStyleProps>, never>, "ref">, keyof TextAreaOwnProps> & TextAreaOwnProps & React.RefAttributes<any>>;
+export default TextArea;

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

@@ -0,0 +1,95 @@
+/**
+ * `TextArea.tsx`'s `type` prop, verbatim from its
+ * `PropTypes.oneOf(['', 'error', 'error-border', 'warning-border', 'warning', 'loading', 'success'])`,
+ * carried as `$type` by `TextInputField`, `TextInputFieldIconAlert`, `TextInput` and
+ * `Description`.
+ *
+ * Closed on purpose (§J.6): the templates below branch on this value 26 times, and with a
+ * closed union a mistyped state name is TS2367 instead of a rule that silently never
+ * fires — which is exactly the failure this file already contains three of. `''` is a
+ * member because the component defaults `type = ''` (tsx line 40).
+ */
+type TextAreaType = '' | 'error' | 'error-border' | 'warning-border' | 'warning' | 'loading' | 'success' | 'instructions-warning';
+/**
+ * `TextArea.tsx`'s `padding` prop, from `PropTypes.oneOf(['small', 'medium', 'large'])`.
+ * See `TextInputFieldStyleProps` for why this type has two members in that interface.
+ *
+ * `''` IS HERE FOR THE SAME REASON AS `TextAreaType`'s `'instructions-warning'`:
+ * `Instructions`' `padding` union is `'' | 'small' | 'medium' | 'large'` and it forwards
+ * the value straight through at `Instructions.tsx:354`. Every read of this value below is
+ * an `===` against one of the three real sizes, so an extra member changes no comparison
+ * result — and all three of those reads are dead anyway (the DEFERRED DEFECT below: the
+ * component passes `$padding`, the template reads `padding`).
+ */
+type TextAreaPadding = '' | 'small' | 'medium' | 'large';
+interface DisabledStyleProps {
+    /** `disabled` — dims and blocks the pointer. Also reaches the DOM; see above. */
+    disabled?: boolean;
+}
+export declare const TextAreaContainter: 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>>, DisabledStyleProps>, 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>>, DisabledStyleProps>, never>> & string;
+/**
+ * Props of `TextInputField`, the `<textarea>` itself. Six transient props plus the two
+ * halves of a defect.
+ *
+ * `readOnly` and `disabled` are read by the template (7 times between them) and are
+ * deliberately ABSENT from this interface: both are real `TextareaHTMLAttributes` members,
+ * so those reads already typecheck and declaring them would add nothing. §J.9's first case.
+ */
+export interface TextInputFieldStyleProps {
+    /**
+     * `borderRadius` (`PropTypes.number`, default `0`) — interpolated as
+     * `${props.$borderRadius}px`, so `number` and not `number | string`: a string here would
+     * render `border-radius: 4pxpx`. Same reasoning as `SectionSeparator`'s `$margin`.
+     */
+    $borderRadius?: number;
+    /** `type` — see `TextAreaType`. The template branches on it 26 times. */
+    $type?: TextAreaType;
+    /** `edit` — shows the editable-affordance background and border. */
+    $edit?: boolean;
+    /** `noBorder` — suppresses the border by matching it to the background. */
+    $noBorder?: boolean;
+    /** `Boolean(icon)` — makes room on the left for the icon. */
+    $hasIcon?: boolean;
+    /** READ by the template, NEVER passed. The dead half — see above. */
+    padding?: TextAreaPadding;
+    /** PASSED by `TextArea.tsx:118`, never read. The inert half — see above. */
+    $padding?: TextAreaPadding;
+}
+export declare const TextInputField: 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").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>>, TextInputFieldStyleProps>, never>> & string;
+/**
+ * Props of `TextInputLabel`, the floating label. All three come from `TextArea.tsx:150-155`.
+ */
+interface TextInputLabelStyleProps {
+    /** `inputIsEmpty` state — the label only floats up when the field is NOT empty. */
+    $inputIsEmpty?: boolean;
+    /** `Boolean(placeholder)` — a placeholder also forces the label up. */
+    $hasPlaceholder?: boolean;
+    /** `Boolean(icon)` — shifts the label right to clear the icon. */
+    $hasIcon?: boolean;
+}
+export declare const TextInputLabel: 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>>, TextInputLabelStyleProps>, never>> & string;
+export declare const TextInputFieldIcon: 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 TextInputFieldIconAlert: 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?: TextAreaType;
+}>, never>> & string;
+/**
+ * Props of `TextInput`, the positioning wrapper. `TextArea.tsx:91-98` renders
+ * `<S.TextInput $fieldLabel={…} disabled={disabled} readOnly={readOnly} $type={type} …>`.
+ */
+interface TextInputStyleProps extends DisabledStyleProps {
+    /** `!isEmpty(fieldLabel)` — narrows the wrapper to 66.66% so the field label gets a third. */
+    $fieldLabel?: boolean;
+    /** `type` — only the `error` arm is used here, to recolour the floated label. */
+    $type?: TextAreaType;
+    /** Passed by `TextArea.tsx:94`, read by nothing. Leaks as `readonly=""`; see above. */
+    readOnly?: boolean;
+}
+export declare const TextInput: 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>>, TextInputStyleProps>, never>> & string;
+export declare const Description: 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?: TextAreaType;
+}>, 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 SuccessContainerLabel: 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/TextArea/index.d.ts

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

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

@@ -0,0 +1,109 @@
+import React from 'react';
+import * as S from './TextInput.styled';
+type TextInputOwnProps = {
+    /**
+     * Content of the text input field
+     */
+    value?: string;
+    /**
+     * Default content of the text input field
+     */
+    defaultValue?: string;
+    /**
+     * Name of the text input field (used when sending form data)
+     */
+    name?: string;
+    /**
+     * Label text for the text input field. If the text input field is empty (no input and no placeholder)
+     * and isn't in focus, the label text will be displayed grayed out in the field itself.
+     * Otherwise, the label text will be displayed in the top left corner.
+     */
+    label?: string;
+    /**
+     * Placeholder text to be displayed if the text area is empty (no input)
+     */
+    placeholder?: string;
+    /**
+     * Type of input – e.g. `text`, `email`, `password`, etc.
+     */
+    type?: string;
+    /**
+     * Whether the field is required
+     */
+    required?: boolean;
+    /**
+     * Whether the field is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether the field is read-only
+     */
+    readOnly?: boolean;
+    /**
+     * ?
+     */
+    autoComplete?: string;
+    /**
+     * Descriptive text displayed below the text input field
+     */
+    description?: string;
+    /**
+     * Set to `true` to display the text input field with a red border. Set to a string to
+     * aslo display the given string as an error message below the field.
+     */
+    error?: boolean | string;
+    /**
+     * Set to `true` to display the text input field with a yellow/orange border. Set to a string to
+     * aslo display the given string as a warning message below the field.
+     */
+    warning?: boolean | string;
+    /**
+     * Optional icon to be displayed left of the text inside the text area
+     */
+    icon?: React.ReactElement<any>;
+    /**
+     * Text to be displayed before/after the user input. Takes an object with two values:
+     * `prefix` and `suffix`, where prefix will be displayed before and suffix will be
+     * displayed after the user input.
+     */
+    adornments?: {
+        prefix?: string;
+        suffix?: string;
+    };
+    /**
+     * Add custom class names to the HTML element
+     */
+    className?: string;
+    /**
+     * Add custom CSS styling
+     */
+    style?: any;
+    /**
+     * Optional callback function for the `onChange` event
+     */
+    onChange?: (...args: any[]) => any;
+    /**
+     * Optional callback function for the `onBlur` event
+     */
+    onBlur?: (...args: any[]) => any;
+    /**
+     * Whether to display the text input field without borders when it's not in focus
+     */
+    noBorder?: boolean;
+};
+/**
+ * Text inputs let users enter and edit text in the UI. They typically appear in forms and dialogs.
+ *
+ * ### Import
+ *
+ * ``` js
+ * import { TextInput } from '@ntbjs/react-components/inputs'
+ * // or
+ * import TextInput from '@ntbjs/react-components/inputs/TextInput'
+ * ```
+ */
+declare const TextInput: React.ForwardRefExoticComponent<Omit<Omit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>>, S.ValidationStyleProps & {
+    $noBorder?: boolean;
+    $hasIcon?: boolean;
+}>, never>, "ref">, keyof TextInputOwnProps> & TextInputOwnProps & React.RefAttributes<any>>;
+export default TextInput;

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

@@ -0,0 +1,43 @@
+/**
+ * The validation pair that five of this file's seven styled components carry.
+ *
+ * `boolean` for both, and NOT the `bool | string` that `error`'s and `warning`'s own
+ * propTypes allow: `TextInput.tsx` derives `hasError` / `hasWarning`
+ * (`isBoolean(x) ? x : !isEmpty(x)`) and passes those, keeping the message text for
+ * `Description`'s children. §J.6, rule 2 — the JSX site says which value arrives.
+ */
+export interface ValidationStyleProps {
+    /** `hasError` — red border / red message. */
+    $error?: boolean;
+    /** `hasWarning` — orange border / orange message. */
+    $warning?: boolean;
+}
+export declare const Adornment: 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>>, ValidationStyleProps & {
+    /**
+     * `true` on the prefix adornment and `false` on the suffix one — the JSX passes
+     * both literals explicitly, so this is `boolean` and the `else` arm is live.
+     */
+    $isPrefix?: boolean;
+}>, never>> & string;
+export declare const TextInputWrapper: 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>>, ValidationStyleProps>, never>> & string;
+export declare const TextInputField: 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>>, ValidationStyleProps & {
+    /** `noBorder` — `PropTypes.bool`, component default `false`. */
+    $noBorder?: boolean;
+    /** `Boolean(icon)` — derived, so `boolean` and not `icon`'s element type. */
+    $hasIcon?: boolean;
+}>, never>> & string;
+export declare const TextInputLabel: 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>>, {
+    /** `Boolean(placeholder)` — floats the label out of the field. */
+    $hasPlaceholder?: boolean;
+    /** `Boolean(prefix || suffix)` — same effect, for the adornment case. */
+    $hasAdornments?: boolean;
+    /** `Boolean(icon)` — shifts the label right of the icon. */
+    $hasIcon?: boolean;
+}>, never>> & string;
+export declare const TextInputFieldIcon: 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 TextInput: 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>>, ValidationStyleProps & {
+    /** `disabled` — `PropTypes.bool`. Leaks to the DOM; see above. */
+    disabled?: boolean;
+}>, never>> & string;
+export declare const Description: 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>>, ValidationStyleProps>, never>> & string;

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

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

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

@@ -0,0 +1,13 @@
+export { default as ActionButton } from './ActionButton';
+export { default as Button } from './Button';
+export { default as Checkbox } from './Checkbox';
+export { default as CompactAutocompleteSelect } from './CompactAutocompleteSelect';
+export { default as CompactStarRating } from './CompactStarRating';
+export { default as CompactTextInput } from './CompactTextInput';
+export { default as MultiSelect } from './MultiSelect';
+export { default as Radio } from './Radio';
+export { default as TextArea } from './TextArea';
+export { default as TextInput } from './TextInput';
+export { default as Switch } from './Switch';
+export { default as MultiLevelCheckbox } from './MultiLevelCheckbox';
+export { default as MultiLevelCheckboxSelect } from './MultiLevelCheckboxSelect';

package/types/components/layout/InputGroup/InputGroup.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+type InputGroupOwnProps = {
+    /**
+     * An array of inputs – e.g. `<CompactTextInput>`
+     */
+    children?: React.ReactNode;
+};
+/**
+ * Wrapper component to visually group related inputs by adding space above/below the group.
+ *
+ * ### Import
+ *
+ * ``` js
+ * import { InputGroup } from '@ntbjs/react-components/layout'
+ * // or
+ * import InputGroup from '@ntbjs/react-components/layout/InputGroup'
+ * ```
+ *
+ * ### Usage example
+ * Pass an array of input elements to the `InputGroup` as its children:
+ *
+ * ``` js
+const item1 = <CompactTextInput label="Size" type="text" value="4369 x 2913 px" />;
+const item2 = <CompactTextInput label="Resolution" type="text" value="300 dpi 37.0 x 24.7 cm px" />;
+const item3 = <CompactTextInput label="File size" type="text" value="7.22 MB" />;
+
+const inputGroup = <InputGroup>{[item1, item2, item3, item4]}</InputGroup>;
+ * ```
+ */
+declare const InputGroup: 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">, "children"> & InputGroupOwnProps & React.RefAttributes<any>>;
+export default InputGroup;

package/types/components/layout/InputGroup/InputGroup.styled.d.ts

@@ -0,0 +1 @@
+export declare const InputGroup: 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;

package/types/components/layout/InputGroup/index.d.ts

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

package/types/components/layout/SectionSeparator/SectionSeparator.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import * as S from './SectionSeparator.styled';
+type SectionSeparatorOwnProps = {
+    /**
+     * Whether the section separator should be displayed vertically.
+     */
+    vertical?: boolean;
+    /**
+     * Padding in pixels to apply to the separator.
+     */
+    margin?: number;
+};
+/**
+ * Section separators are used to separate sections in the UI.
+ * It will fill 100% of the width or height of its parent container by default.
+ *
+ *
+ * ### Import
+ *
+ * ``` js
+ * import { SectionSeparator } from '@ntbjs/react-components/layout'
+ * // or
+ * import SectionSeparator from '@ntbjs/react-components/layout/SectionSeparator'
+ * ```
+ *
+ */
+declare const SectionSeparator: 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.SectionSeparatorStyleProps>, never>, "ref">, keyof SectionSeparatorOwnProps> & SectionSeparatorOwnProps & React.RefAttributes<any>>;
+export default SectionSeparator;

package/types/components/layout/SectionSeparator/SectionSeparator.styled.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Props of the styled root, i.e. `SectionSeparator.tsx`'s `vertical` / `margin`
+ * carried across the `shouldForwardProp` boundary.
+ */
+export interface SectionSeparatorStyleProps {
+    /** `vertical` — swaps which axis gets the 1px hairline and which gets 100%. */
+    $vertical?: boolean;
+    /**
+     * `margin` — px, interpolated as `${props.$margin}px`, so `number` and not
+     * `number | string`: a string here would already render `margin-top: 8pxpx`.
+     */
+    $margin?: number;
+}
+export declare const SectionSeparator: 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>>, SectionSeparatorStyleProps>, never>> & string;

package/types/components/layout/SectionSeparator/index.d.ts

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

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

@@ -0,0 +1,2 @@
+export { default as InputGroup } from './InputGroup';
+export { default as SectionSeparator } from './SectionSeparator';

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

@@ -0,0 +1,16 @@
+import React from 'react';
+type AssetActionOwnProps = {
+    action?: {
+        icon?: React.ReactNode;
+        onClick?: (...args: any[]) => any;
+        actionWidthHeight?: number[];
+        title?: string;
+    };
+    asset?: any;
+    itemKey?: string;
+};
+/**
+ * This is a component to help you get started with development.
+ */
+declare const AssetAction: 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 AssetActionOwnProps> & AssetActionOwnProps & React.RefAttributes<any>>;
+export default AssetAction;

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

@@ -0,0 +1,20 @@
+/**
+ * `AssetActionButton`'s props, i.e. what `AssetAction.tsx` passes to it:
+ * `$actionWidthHeight={action.actionWidthHeight}` and nothing else.
+ */
+interface AssetActionButtonStyleProps {
+    /**
+     * `action.actionWidthHeight` — `PropTypes.arrayOf(PropTypes.number)`, read as
+     * `[width, height]`. `number[]` and not `[number, number]`: the propTypes say an
+     * array of numbers of any length, and the template guards on the array's presence
+     * rather than its length. The values are px and are also used arithmetically
+     * (`- 14`), so `number` and not `number | string`.
+     */
+    $actionWidthHeight?: number[];
+}
+export declare const AssetAction: 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 AssetActionButton: 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>>, AssetActionButtonStyleProps>, never>> & string;
+export declare const ActionTitle: 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 declare const Floating: 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/AssetAction/index.d.ts

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

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

@@ -0,0 +1,25 @@
+import React from 'react';
+type AssetActionsBaseOwnProps = {
+    actions?: any[];
+    asset?: any;
+};
+declare const AssetActionsBase: React.ForwardRefExoticComponent<Omit<Omit<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 {
+    action?: {
+        icon?: React.ReactNode;
+        onClick?: (...args: any[]) => any;
+        actionWidthHeight?: number[];
+        title?: string;
+    };
+    asset?: any;
+    itemKey?: string;
+}> & {
+    action?: {
+        icon?: React.ReactNode;
+        onClick?: (...args: any[]) => any;
+        actionWidthHeight?: number[];
+        title?: string;
+    };
+    asset?: any;
+    itemKey?: string;
+} & React.RefAttributes<any>, "ref">, keyof AssetActionsBaseOwnProps> & AssetActionsBaseOwnProps & React.RefAttributes<any>>;
+export default AssetActionsBase;

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

@@ -0,0 +1 @@
+export declare const AssetActions: 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;

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

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