@loja-integrada/admin-components 1.0.1 → 1.0.2

package/dist/navigation/Stepper/index.d.ts

@@ -1 +1,31 @@
-export * from './Stepper';
+import React__default from 'react';
+
+declare const Stepper: React__default.FC<StepperProps>;
+type StepType = {
+    step: number;
+    text?: string;
+    handleClick?: () => void;
+    customClassName?: string;
+};
+interface StepperProps {
+    /**
+     * Custom class name
+     * */
+    className?: string;
+    /**
+     * Current page step
+     * */
+    currentStep: number;
+    /**
+     * Array of steps containing the step number (1, 2, 3, ..., n),
+     * text with step's title (optional) and a handler for the
+     * step's click (optional) and a custom className for that given step
+     * */
+    steps: StepType[];
+    /**
+     * Shows step text instead of linking lines
+     * */
+    showText?: boolean;
+}
+
+export { Stepper, type StepperProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loja-integrada/admin-components",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "author": "Loja Integrada",
   "license": "MIT",
   "repository": {
@@ -21,17 +21,19 @@
     "@types/react-modal": "^3.16.3",
     "@types/react-text-mask": "^5.4.14",
     "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.19",
     "cypress": "^13.9.0",
     "cypress-vite": "^1.5.0",
     "esbuild-sass-plugin": "^3.3.0",
     "eslint": "^8.57.0",
     "eslint-plugin-storybook": "^0.8.0",
+    "postcss": "^8.4.38",
     "tsup": "^8.1.0",
     "typescript": "^5.3.3",
     "vite": "^5.1.4",
     "@loja-integrada/eslint-config": "0.0.1",
-    "@loja-integrada/tailwindcss-config": "2.0.0",
-    "@loja-integrada/typescript-config": "0.0.2"
+    "@loja-integrada/typescript-config": "0.0.2",
+    "@loja-integrada/tailwindcss-config": "2.0.0"
   },
   "dependencies": {
     "@tanstack/react-table": "^8.17.3",
@@ -51,105 +53,106 @@
   ],
   "exports": {
     ".": {
-      "import": "./dist/index.js",
-      "types": "./dist/index.d.ts"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
     },
+    "./style.css": "./dist/index.css",
     "./package.json": "./package.json",
     "./Button": {
-      "import": "./dist/components/Button/index.js",
-      "types": "./dist/components/Button/Button.d.ts"
+      "types": "./dist/components/Button/Button.d.ts",
+      "import": "./dist/components/Button/index.js"
     },
     "./DataTable": {
-      "import": "./dist/components/DataTable/index.js",
-      "types": "./dist/components/DataTable/DataTable.d.ts"
+      "types": "./dist/components/DataTable/DataTable.d.ts",
+      "import": "./dist/components/DataTable/index.js"
     },
     "./Icon": {
-      "import": "./dist/components/Icon/index.js",
-      "types": "./dist/components/Icon/Icon.d.ts"
+      "types": "./dist/components/Icon/Icon.d.ts",
+      "import": "./dist/components/Icon/index.js"
     },
     "./IconCircular": {
-      "import": "./dist/components/IconCircular/index.js",
-      "types": "./dist/components/IconCircular/IconCircular.d.ts"
+      "types": "./dist/components/IconCircular/IconCircular.d.ts",
+      "import": "./dist/components/IconCircular/index.js"
     },
     "./LoadingPlaceholder": {
-      "import": "./dist/components/LoadingPlaceholder/index.js",
-      "types": "./dist/components/LoadingPlaceholder/LoadingPlaceholder.d.ts"
+      "types": "./dist/components/LoadingPlaceholder/LoadingPlaceholder.d.ts",
+      "import": "./dist/components/LoadingPlaceholder/index.js"
     },
     "./Modal": {
-      "import": "./dist/components/Modal/index.js",
-      "types": "./dist/components/Modal/Modal.d.ts"
+      "types": "./dist/components/Modal/Modal.d.ts",
+      "import": "./dist/components/Modal/index.js"
     },
     "./SidebarFixed": {
-      "import": "./dist/components/SidebarFixed/index.js",
-      "types": "./dist/components/SidebarFixed/SidebarFixed.d.ts"
+      "types": "./dist/components/SidebarFixed/SidebarFixed.d.ts",
+      "import": "./dist/components/SidebarFixed/index.js"
     },
     "./Table": {
-      "import": "./dist/components/Table/index.js",
-      "types": "./dist/components/Table/Table.d.ts"
+      "types": "./dist/components/Table/Table.d.ts",
+      "import": "./dist/components/Table/index.js"
     },
     "./Tabs": {
-      "import": "./dist/components/Tabs/index.js",
-      "types": "./dist/components/Tabs/Tabs.d.ts"
+      "types": "./dist/components/Tabs/Tabs.d.ts",
+      "import": "./dist/components/Tabs/index.js"
     },
     "./Checkbox": {
-      "import": "./dist/forms/Checkbox/index.js",
-      "types": "./dist/forms/Checkbox/Checkbox.d.ts"
+      "types": "./dist/forms/Checkbox/Checkbox.d.ts",
+      "import": "./dist/forms/Checkbox/index.js"
     },
     "./Input": {
-      "import": "./dist/forms/Input/index.js",
-      "types": "./dist/forms/Input/Input.d.ts"
+      "types": "./dist/forms/Input/Input.d.ts",
+      "import": "./dist/forms/Input/index.js"
     },
     "./InputHelpText": {
-      "import": "./dist/forms/InputHelpText/index.js",
-      "types": "./dist/forms/InputHelpText/InputHelpText.d.ts"
+      "types": "./dist/forms/InputHelpText/InputHelpText.d.ts",
+      "import": "./dist/forms/InputHelpText/index.js"
     },
     "./InputLabel": {
-      "import": "./dist/forms/InputLabel/index.js",
-      "types": "./dist/forms/InputLabel/InputLabel.d.ts"
+      "types": "./dist/forms/InputLabel/InputLabel.d.ts",
+      "import": "./dist/forms/InputLabel/index.js"
     },
     "./InputMask": {
-      "import": "./dist/forms/InputMask/index.js",
-      "types": "./dist/forms/InputMask/InputMask.d.ts"
+      "types": "./dist/forms/InputMask/InputMask.d.ts",
+      "import": "./dist/forms/InputMask/index.js"
     },
     "./Alert": {
-      "import": "./dist/indicators/Alert/index.js",
-      "types": "./dist/indicators/Alert/Alert.d.ts"
+      "types": "./dist/indicators/Alert/Alert.d.ts",
+      "import": "./dist/indicators/Alert/index.js"
     },
     "./Badge": {
-      "import": "./dist/indicators/Badge/index.js",
-      "types": "./dist/indicators/Badge/Badge.d.ts"
+      "types": "./dist/indicators/Badge/Badge.d.ts",
+      "import": "./dist/indicators/Badge/index.js"
     },
     "./Tag": {
-      "import": "./dist/indicators/Tag/index.js",
-      "types": "./dist/indicators/Tag/Tag.d.ts"
+      "types": "./dist/indicators/Tag/Tag.d.ts",
+      "import": "./dist/indicators/Tag/index.js"
     },
     "./Tooltip": {
-      "import": "./dist/indicators/Tooltip/index.js",
-      "types": "./dist/indicators/Tooltip/Tooltip.d.ts"
+      "types": "./dist/indicators/Tooltip/Tooltip.d.ts",
+      "import": "./dist/indicators/Tooltip/index.js"
     },
     "./ActionBar": {
-      "import": "./dist/layout/ActionBar/index.js",
-      "types": "./dist/layout/ActionBar/ActionBar.d.ts"
+      "types": "./dist/layout/ActionBar/ActionBar.d.ts",
+      "import": "./dist/layout/ActionBar/index.js"
     },
     "./Box": {
-      "import": "./dist/layout/Box/index.js",
-      "types": "./dist/layout/Box/Box.d.ts"
+      "types": "./dist/layout/Box/Box.d.ts",
+      "import": "./dist/layout/Box/index.js"
     },
     "./Container": {
-      "import": "./dist/layout/Container/index.js",
-      "types": "./dist/layout/Container/Container.d.ts"
+      "types": "./dist/layout/Container/Container.d.ts",
+      "import": "./dist/layout/Container/index.js"
     },
     "./Breadcrumb": {
-      "import": "./dist/navigation/Breadcrumb/index.js",
-      "types": "./dist/navigation/Breadcrumb/Breadcrumb.d.ts"
+      "types": "./dist/navigation/Breadcrumb/Breadcrumb.d.ts",
+      "import": "./dist/navigation/Breadcrumb/index.js"
     },
     "./HelpLink": {
-      "import": "./dist/navigation/HelpLink/index.js",
-      "types": "./dist/navigation/HelpLink/HelpLink.d.ts"
+      "types": "./dist/navigation/HelpLink/HelpLink.d.ts",
+      "import": "./dist/navigation/HelpLink/index.js"
     },
     "./Stepper": {
-      "import": "./dist/navigation/Stepper/index.js",
-      "types": "./dist/navigation/Stepper/Stepper.d.ts"
+      "types": "./dist/navigation/Stepper/Stepper.d.ts",
+      "import": "./dist/navigation/Stepper/index.js"
     }
   },
   "scripts": {

package/dist/chunk-GWT7XT76.js

@@ -1,7 +0,0 @@
-import x from '@tippyjs/react';
-import { memo } from 'react';
-import { jsx, Fragment } from 'react/jsx-runtime';
-
-var T=({isVisible:o=!0,appendTo:i=document.body,hideOnClick:e=!1,trigger:r="mouseenter",hideInMobile:a=!1,duration:l=150,interactive:n=!1,allowHTML:y=!0,maxWidth:d=250,touch:b=["hold",400],placement:c="top",content:m,children:p,...s})=>o?jsx(x,{...s,appendTo:i,hideOnClick:e,trigger:r,touch:a?["hold",999999]:b,duration:l,interactive:n,allowHTML:y,maxWidth:d,placement:c,content:jsx("div",{className:"break-words text-center",children:m}),children:p}):jsx(Fragment,{children:p}),h=memo(T);h.displayName="Tooltip";
-
-export { h as a };

package/dist/components/Button/Button.d.ts

@@ -1,48 +0,0 @@
-import { VariantProps } from 'class-variance-authority';
-import React from 'react';
-import { IconProps } from '@/components/Icon';
-declare const buttonVariants: (props?: ({
-    variant?: "primary" | "secondary" | "tertiary" | "warning" | "danger" | "outline" | "outlineSecondary" | "onlyText" | null | undefined;
-    size?: "small" | "default" | "large" | null | undefined;
-    disabled?: boolean | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
-declare const Button: React.MemoExoticComponent<React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonAnchorElement>>>;
-type ButtonAnchorProps = React.ButtonHTMLAttributes<HTMLButtonElement> & React.AnchorHTMLAttributes<HTMLAnchorElement>;
-type HTMLButtonAnchorElement = HTMLButtonElement & HTMLAnchorElement;
-type ButtonVariantsType = VariantProps<typeof buttonVariants>;
-interface ButtonProps extends ButtonAnchorProps, ButtonVariantsType {
-    /** Type of component to use
-     * @default button
-     * */
-    as?: 'a' | 'button';
-    /**
-     * Custom class
-     */
-    className?: string;
-    /** Button variant
-     * @default primary
-     * */
-    variant?: 'primary' | 'secondary' | 'outlineSecondary' | 'tertiary' | 'warning' | 'danger' | 'outline' | 'onlyText';
-    /** Size of the button
-     * @default default
-     * */
-    size?: 'small' | 'default' | 'large';
-    /**
-     * Button is loading
-     * */
-    loading?: boolean;
-    /**
-     * Button is disabled
-     * */
-    disabled?: boolean;
-    /**
-     * Icon of the button
-     */
-    icon?: IconProps['icon'];
-    /**
-     * Icon of the button
-     * @default 'right'
-     */
-    iconPosition?: 'left' | 'right';
-}
-export { Button, type ButtonProps };

package/dist/components/DataTable/DataTable.d.ts

@@ -1,74 +0,0 @@
-import { ColumnDef } from '@tanstack/react-table';
-declare const DataTable: <TData>({ columns: columnsProps, data, isLoading, error, selectable, showSelectAll, showCountSelected, onChange, selectedIds, disabledIds, id, emptyText, errorText }: DataTableProps<TData>) => import("react/jsx-runtime").JSX.Element;
-type DataTableColumn<TData> = ColumnDef<TData> & {
-    className?: {
-        header?: string;
-        cell?: string;
-    };
-};
-interface DataTableProps<TData> {
-    /**
-     * Array of columns to be displayed in the table
-     */
-    columns: DataTableColumn<TData>[];
-    /**
-     * Array of data to be displayed in the table
-     */
-    data?: TData[];
-    /**
-     * Table is loading
-     * @default false
-     */
-    isLoading?: boolean;
-    /**
-     * Table has an error
-     * @default false
-     */
-    error?: boolean;
-    /**
-     * Makes rows selectable.
-     * @default false
-     */
-    selectable?: boolean;
-    /**
-     * Show select all checkbox in the header,
-     * when the table is selectable.
-     * @default true
-     */
-    showSelectAll?: boolean;
-    /**
-     * Show count of selected rows in the header
-     * @default true
-     */
-    showCountSelected?: boolean;
-    /**
-     * Content to show when table is empty
-     * @default 'Nenhum registro encontrado'
-     */
-    emptyText?: string | React.ReactNode;
-    /**
-     * Content to show when an error occurs
-     * @default 'Ocorreu um erro ao carregar os itens.'
-     */
-    errorText?: string | React.ReactNode;
-    /**
-     * Fired when the row is selectable and the Checkbox of the header/row is clicked
-     */
-    onChange?: (selectedRows: string[]) => void;
-    /**
-     * Array containing the id of selected rows.
-     * @default undefined
-     */
-    selectedIds?: string[];
-    /**
-     * Array containing the id of disabled rows.
-     * @default []
-     */
-    disabledIds?: string[];
-    /**
-     * Id of the table.
-     * @default undefined
-     */
-    id?: string;
-}
-export { DataTable, type DataTableColumn, type DataTableProps };

package/dist/components/Icon/Icon.d.ts

@@ -1,30 +0,0 @@
-import { FunctionComponent } from 'react';
-import { icons } from '@/icons-path';
-declare const iconSizes: {
-    1: string;
-    2: string;
-    3: string;
-    4: string;
-    5: string;
-    6: string;
-    7: string;
-    8: string;
-    9: string;
-    10: string;
-};
-declare const Icon: FunctionComponent<IconProps>;
-interface IconProps {
-    /**
-     * Icon variation
-     */
-    icon: keyof typeof icons;
-    /** Icon size, number between 1 and 10
-     * @default 5
-     */
-    size?: keyof typeof iconSizes;
-    /**
-     * Additional classes for icon
-     */
-    className?: string;
-}
-export { Icon, type IconProps };

package/dist/components/IconCircular/IconCircular.d.ts

@@ -1,19 +0,0 @@
-import { FunctionComponent } from 'react';
-import { IconProps } from '@/components/Icon';
-type variantType = 'success' | 'warning' | 'danger';
-export declare const IconCircular: FunctionComponent<IconCircularProps>;
-export interface IconCircularProps {
-    /** Icon circular variant
-     * @default success
-     * */
-    variant?: variantType;
-    /**
-     * Icon variation
-     */
-    icon?: IconProps['icon'];
-    /**
-     * Custom class for background
-     */
-    bgClass?: string;
-}
-export {};

package/dist/components/LoadingPlaceholder/LoadingPlaceholder.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-declare const LoadingPlaceholder: React.MemoExoticComponent<({ className }: LoadingPlaceholderProps) => import("react/jsx-runtime").JSX.Element>;
-interface LoadingPlaceholderProps {
-    /**
-     * Custom class name
-     */
-    className?: string;
-}
-export { LoadingPlaceholder, type LoadingPlaceholderProps };

package/dist/components/Modal/Modal.d.ts

@@ -1,54 +0,0 @@
-import './style.scss';
-import React from 'react';
-declare const Modal: React.MemoExoticComponent<({ className, isOpen, preventClose, size, headerStep, headerTitle, headerClose, footerActions, onClose, closeTimeout, parentSelector, children }: ModalProps) => import("react/jsx-runtime").JSX.Element>;
-interface ModalProps {
-    /**
-     * Custom class name
-     * */
-    className?: string;
-    /** Modal is open
-     * @default false
-     */
-    isOpen?: boolean;
-    /** Prevent modal close
-     * @default false
-     */
-    preventClose?: boolean;
-    /** Modal width
-     * @default 'default'
-     * */
-    size?: 'default' | 'large' | 'small';
-    /**
-     * Modal step, above the title
-     * */
-    headerStep?: string | React.ReactNode;
-    /**
-     * Modal title
-     * */
-    headerTitle?: string | React.ReactNode;
-    /** Close text at header
-     * @default ''
-     * */
-    headerClose?: string | false;
-    /**
-     * Call when modal is closed
-     * */
-    onClose?: () => void;
-    /**
-     * Number indicating the milliseconds to wait before closing the modal
-     * */
-    closeTimeout?: number;
-    /**
-     * React children
-     */
-    children?: React.ReactNode;
-    /**
-     * React children
-     */
-    footerActions?: React.ReactNode;
-    /** The parent element that the modal will be attached to
-     * @default 'document.body'
-     */
-    parentSelector?: HTMLElement | null;
-}
-export { Modal, type ModalProps };

package/dist/components/SidebarFixed/SidebarFixed.d.ts

@@ -1,34 +0,0 @@
-import React from 'react';
-export declare const SidebarFixedComponent: React.FC<SidebarFixedProps>;
-declare const SidebarFixed: React.NamedExoticComponent<SidebarFixedProps>;
-interface SidebarFixedProps {
-    /**
-     * React children
-     */
-    children?: React.ReactNode;
-    /**
-     * Bottom actions
-     */
-    footerActions?: React.ReactNode;
-    /** Sidebar is open
-     * @default false
-     */
-    isOpen?: boolean;
-    /**
-     * Call when sidebar is closed
-     * */
-    onClose?: () => void;
-    /**
-     * Title displayed in header
-     */
-    title?: string;
-    /**
-     * Help external link
-     */
-    helpLink?: string;
-    /** The parent element that the sidebar will be attached to
-     * @default 'document.body'
-     */
-    parentSelector?: HTMLElement | null;
-}
-export { SidebarFixed, type SidebarFixedProps };

package/dist/components/Table/Table.d.ts

@@ -1,10 +0,0 @@
-import * as React from 'react';
-declare const Table: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableElement> & React.RefAttributes<HTMLTableElement>>;
-declare const TableHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
-declare const TableHead: React.ForwardRefExoticComponent<React.ThHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
-declare const TableBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
-declare const TableFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
-declare const TableRow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableRowElement> & React.RefAttributes<HTMLTableRowElement>>;
-declare const TableCell: React.ForwardRefExoticComponent<React.TdHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
-declare const TableCaption: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableCaptionElement> & React.RefAttributes<HTMLTableCaptionElement>>;
-export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };

package/dist/components/Tabs/Tabs.d.ts

@@ -1,21 +0,0 @@
-import { TabsItemInterface } from './TabsItem';
-declare const Tabs: import("react").MemoExoticComponent<({ className, items, activeItem, onChange }: TabsProps) => import("react/jsx-runtime").JSX.Element | null>;
-interface TabsProps {
-    /**
-     * Custom class name
-     * */
-    className?: string;
-    /**
-     * ID of the active item
-     */
-    activeItem?: string;
-    /**
-     * Tab item
-     */
-    items?: TabsItemInterface[];
-    /**
-     * Callback handle when selected item change
-     * */
-    onChange?: (activeTabId: string) => void;
-}
-export { Tabs, type TabsProps };

package/dist/components/Tabs/TabsItem.d.ts

@@ -1,34 +0,0 @@
-interface TabsItemProps extends TabsItemInterface {
-    /**
-     * Item is active
-     */
-    active?: boolean;
-    /**
-     * Call on tab change
-     */
-    onChange: (arg0: string) => void;
-}
-declare const TabsItem: import("react").MemoExoticComponent<({ id, title, titleComplement, active, disabled, onChange, className }: TabsItemProps) => import("react/jsx-runtime").JSX.Element>;
-interface TabsItemInterface {
-    /**
-     * Custom class name
-     */
-    className?: string;
-    /**
-     * Item identification
-     */
-    id: string;
-    /**
-     * Item visible title
-     */
-    title: string;
-    /**
-     * Complement to title
-     * */
-    titleComplement?: string | React.ReactNode | ((isActive: boolean) => React.ReactNode);
-    /**
-     * Disabled a specific tab
-     */
-    disabled?: boolean;
-}
-export { TabsItem, type TabsItemInterface };

package/dist/components/index.d.ts

@@ -1,9 +0,0 @@
-export * from './Button';
-export * from './DataTable';
-export * from './Icon';
-export * from './IconCircular';
-export * from './LoadingPlaceholder';
-export * from './Modal';
-export * from './SidebarFixed';
-export * from './Table';
-export * from './Tabs';

package/dist/forms/Checkbox/Checkbox.d.ts

@@ -1,28 +0,0 @@
-import React from 'react';
-import { InputHelpTextProps } from '@/forms/InputHelpText';
-declare const Checkbox: React.MemoExoticComponent<React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>>;
-interface CheckboxProps extends InputHelpTextProps, React.InputHTMLAttributes<HTMLInputElement> {
-    /**
-     * Custom class name
-     * */
-    className?: string;
-    /**
-     * Text label of the checkbox
-     * */
-    label?: string | React.ReactNode;
-    /**
-     * Checkbox box isn't selected nwither unselected
-     * @default false
-     * */
-    indeterminate?: boolean;
-    /**
-     * Item align
-     * @default 'baseline'
-     * */
-    boxAlign?: 'start' | 'end' | 'center' | 'baseline' | 'stretch';
-    /**
-     * Error message to display
-     * */
-    errorMessage?: string;
-}
-export { Checkbox, type CheckboxProps };

package/dist/forms/Input/Input.d.ts

@@ -1,41 +0,0 @@
-import React from 'react';
-import { InputHelpTextProps } from '../InputHelpText';
-import { InputLabelProps } from '../InputLabel';
-declare const Input: React.MemoExoticComponent<React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>>;
-interface InputProps extends InputLabelProps, InputHelpTextProps, Omit<React.InputHTMLAttributes<HTMLInputElement>, 'prefix'> {
-    /**
-     * Input custom class name
-     * */
-    className?: string;
-    /**
-     * Form group custom class name
-     * */
-    formGroupClassName?: string;
-    /** Input size
-     * @default default
-     * */
-    variant?: 'default' | 'small' | 'large' | 'xlarge';
-    /**
-     * Error message to display
-     * */
-    errorMessage?: string;
-    /**
-     * Custom element to append at the start of input
-     * */
-    prefix?: React.ReactNode | string | null;
-    /**
-     * Custom element to append at the end of input
-     * */
-    sufix?: React.ReactNode | string | null;
-    /**
-     * Set visibility of input prefix border
-     * @default true
-     * */
-    prefixBorder?: boolean;
-    /**
-     * Set visibility of input sufix border
-     * @default true
-     * */
-    sufixBorder?: boolean;
-}
-export { Input, type InputProps };