@nulogy/components 16.0.1 → 16.0.3

package/dist/src/Navigation/stories/Navigation.story.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from "react";
+import { expect, screen, waitFor } from "storybook/test";
 import { Input } from "../../Input";
 import { Navigation } from "..";
 import { ApplicationFrame, Page, Sidebar } from "../../Layout";
@@ -16,169 +17,177 @@ export default {
         layout: "fullscreen",
     },
 };
-export const BasicUsage = () => (_jsx(ApplicationFrame, { navBar: _jsx(Navigation, { appSwitcher: {
-            apps: {
-                "production-scheduling": {
-                    url: "https://nulogy.com/",
-                },
-                "supplier-collaboration": {
-                    url: "https://nulogy.com/",
-                },
-                "digital-quality-inspection": {
-                    url: "https://nulogy.com/",
-                },
-                "shop-floor": {
-                    url: "https://nulogy.com/",
-                },
-                "smart-factory": {
-                    url: "https://nulogy.com/",
-                },
-                connections: {
-                    url: "https://nulogy.com/",
-                },
-                data: {
-                    url: "https://nulogy.com/",
+export const BasicUsage = {
+    render: () => (_jsx(ApplicationFrame, { navBar: _jsx(Navigation, { appSwitcher: {
+                apps: {
+                    "production-scheduling": {
+                        url: "https://nulogy.com/",
+                    },
+                    "supplier-collaboration": {
+                        url: "https://nulogy.com/",
+                    },
+                    "digital-quality-inspection": {
+                        url: "https://nulogy.com/",
+                    },
+                    "shop-floor": {
+                        url: "https://nulogy.com/",
+                    },
+                    "smart-factory": {
+                        url: "https://nulogy.com/",
+                    },
+                    connections: {
+                        url: "https://nulogy.com/",
+                    },
+                    data: {
+                        url: "https://nulogy.com/",
+                    },
                 },
-            },
-        }, primaryNavigation: [
-            {
-                key: "dashboard",
-                label: "Dashboard",
-                type: "link",
-                props: {
-                    href: "https://nulogy.com/",
+            }, primaryNavigation: [
+                {
+                    key: "dashboard",
+                    label: "Dashboard",
+                    type: "link",
+                    props: {
+                        href: "https://nulogy.com/",
+                    },
                 },
-            },
-            {
-                key: "inspector",
-                label: "Inspector",
-                type: "link",
-                props: {
-                    href: "https://nulogy.com/",
+                {
+                    key: "inspector",
+                    label: "Inspector",
+                    type: "link",
+                    props: {
+                        href: "https://nulogy.com/",
+                    },
                 },
-            },
-            {
-                key: "reports",
-                label: "Reports",
-                type: "link",
-                props: {
-                    href: "https://nulogy.com/",
+                {
+                    key: "reports",
+                    label: "Reports",
+                    type: "link",
+                    props: {
+                        href: "https://nulogy.com/",
+                    },
                 },
-            },
-            {
-                key: "sheets",
-                label: "Sheets",
-                type: "button",
-                props: {
-                    onClick: () => {
-                        alert("You clicked Sheets");
+                {
+                    key: "sheets",
+                    label: "Sheets",
+                    type: "button",
+                    props: {
+                        onClick: () => {
+                            alert("You clicked Sheets");
+                        },
                     },
                 },
-            },
-            {
-                key: "forms",
-                label: "Forms",
-                type: "button",
-                items: [
-                    {
-                        key: "quality-inspection-form",
-                        label: "Quality Inspection Form",
-                        type: "button",
-                        props: {
-                            onClick: () => {
-                                alert("You clicked Quality Inspection Form");
+                {
+                    key: "forms",
+                    label: "Forms",
+                    type: "button",
+                    items: [
+                        {
+                            key: "quality-inspection-form",
+                            label: "Quality Inspection Form",
+                            type: "button",
+                            props: {
+                                onClick: () => {
+                                    alert("You clicked Quality Inspection Form");
+                                },
                             },
                         },
-                    },
-                    {
-                        key: "production-report-form",
-                        label: "Production Report Form",
-                        type: "button",
-                        props: {
-                            onClick: () => {
-                                alert("You clicked Production Report Form");
+                        {
+                            key: "production-report-form",
+                            label: "Production Report Form",
+                            type: "button",
+                            props: {
+                                onClick: () => {
+                                    alert("You clicked Production Report Form");
+                                },
                             },
                         },
-                    },
-                    {
-                        key: "maintenance-request-form",
-                        label: "Maintenance Request Form",
-                        type: "button",
-                        props: {
-                            onClick: () => {
-                                alert("You clicked Maintenance Request Form");
+                        {
+                            key: "maintenance-request-form",
+                            label: "Maintenance Request Form",
+                            type: "button",
+                            props: {
+                                onClick: () => {
+                                    alert("You clicked Maintenance Request Form");
+                                },
                             },
                         },
-                    },
-                    {
-                        key: "inventory-count-form",
-                        label: "Inventory Count Form",
-                        type: "link",
-                    },
-                ],
-            },
-        ], secondaryNavigation: [
-            {
-                key: "search",
-                type: "button",
-                icon: "search",
-                tooltip: "Search",
-                props: {
-                    onClick: () => {
-                        alert("You clicked Search");
-                    },
-                },
-            },
-            {
-                key: "settings",
-                type: "button",
-                icon: "settings",
-                tooltip: "Settings",
-                props: {
-                    onClick: () => {
-                        alert("You clicked Settings");
-                    },
+                        {
+                            key: "inventory-count-form",
+                            label: "Inventory Count Form",
+                            type: "link",
+                        },
+                    ],
                 },
-            },
-        ], secondaryLogo: _jsx(CustomLogo3, { style: { width: "auto", height: 32 } }), userMenu: {
-            triggerText: { title: "haidera@nulogy.com", subtitle2: "Toronto, ON" },
-            header: {
-                title: "Haider Alshamma",
-                subtitle1: "haidera@nulogy.com",
-                subtitle2: "Nulogy",
-            },
-            controls: () => (_jsxs(Flex, { gap: "x2", flexDirection: "column", width: "100%", pt: "x1", children: [_jsx(Select, { labelText: "Company", defaultValue: ["Nulogy Canada"], options: [
-                            { value: "Nulogy Canada", label: "Nulogy - Canada" },
-                            { value: "Nulogy US", label: "Nulogy - US" },
-                            { value: "Nulogy UK", label: "Nulogy - UK" },
-                        ] }), _jsx(Select, { labelText: "User group", defaultValue: ["super-user"], options: [
-                            { value: "super-user", label: "Super User" },
-                            { value: "admin", label: "Admin" },
-                            { value: "user", label: "User" },
-                        ] })] })),
-            menuItems: [
+            ], secondaryNavigation: [
                 {
-                    key: "preferences",
-                    label: "Preferences",
+                    key: "search",
                     type: "button",
+                    icon: "search",
+                    tooltip: "Search",
                     props: {
                         onClick: () => {
-                            console.log("You clicked preferences");
+                            alert("You clicked Search");
                         },
                     },
                 },
                 {
-                    key: "sign-out",
-                    label: "Sign out",
+                    key: "settings",
                     type: "button",
+                    icon: "settings",
+                    tooltip: "Settings",
                     props: {
                         onClick: () => {
-                            console.log("You clicked sign out");
+                            alert("You clicked Settings");
                         },
                     },
                 },
-            ],
-        } }), children: _jsx(Page, { fullHeight: true, children: _jsx(Placeholder, {}) }) }));
+            ], secondaryLogo: _jsx(CustomLogo3, { style: { width: "auto", height: 32 } }), userMenu: {
+                triggerText: { title: "haidera@nulogy.com", subtitle2: "Toronto, ON" },
+                header: {
+                    title: "Haider Alshamma",
+                    subtitle1: "haidera@nulogy.com",
+                    subtitle2: "Nulogy",
+                },
+                controls: () => (_jsxs(Flex, { gap: "x2", flexDirection: "column", width: "100%", pt: "x1", children: [_jsx(Select, { labelText: "Company", defaultValue: ["Nulogy Canada"], options: [
+                                { value: "Nulogy Canada", label: "Nulogy - Canada" },
+                                { value: "Nulogy US", label: "Nulogy - US" },
+                                { value: "Nulogy UK", label: "Nulogy - UK" },
+                            ] }), _jsx(Select, { labelText: "User group", defaultValue: ["super-user"], options: [
+                                { value: "super-user", label: "Super User" },
+                                { value: "admin", label: "Admin" },
+                                { value: "user", label: "User" },
+                            ] })] })),
+                menuItems: [
+                    {
+                        key: "preferences",
+                        label: "Preferences",
+                        type: "button",
+                        props: {
+                            onClick: () => {
+                                console.log("You clicked preferences");
+                            },
+                        },
+                    },
+                    {
+                        key: "sign-out",
+                        label: "Sign out",
+                        type: "button",
+                        props: {
+                            onClick: () => {
+                                console.log("You clicked sign out");
+                            },
+                        },
+                    },
+                ],
+            } }), children: _jsx(Page, { fullHeight: true, children: _jsx(Placeholder, {}) }) })),
+    play: async ({ canvasElement: _canvasElement, step }) => {
+        await step("renders primary navigation items", async () => {
+            await waitFor(() => expect(screen.getByText("Dashboard")).toBeVisible());
+            await expect(screen.getByText("Inspector")).toBeVisible();
+        });
+    },
+};
 export const WithACustomBreakpoint = () => {
     const [breakpoint, setBreakpoint] = useState("1000px");
     return (_jsx(ApplicationFrame, { navBar: _jsx(Navigation, { primaryNavigation: [{ key: "dashboard", label: "Dashboard", type: "link" }], secondaryNavigation: [{ key: "settings", icon: "settings", tooltip: "Settings", type: "button" }], breakpoint: breakpoint }), children: _jsx(Page, { fullHeight: true, children: _jsx(Sidebar, { height: "100%", width: "350px", hideCloseButton: true, isOpen: true, title: "Story information", overlay: "hide", top: "64px", bottom: "0px", children: _jsxs(Flex, { flexDirection: "column", gap: "x2", children: [_jsx(Input, { labelText: "Breakpoint", value: breakpoint, onChange: (e) => setBreakpoint(e.target.value) }), _jsxs(Text, { fontSize: "small", color: "darkGrey", children: ["The navigation will transition to desktop when the viewport is wider than ", _jsx(Code, { children: breakpoint }), "."] }), _jsxs(Text, { fontSize: "small", color: "darkGrey", children: ["You can also use any valid key from the ", _jsx("a", { href: "/?path=/story/tokens--breakpoints", children: "theme breakpoints" }), " ", "as a breakpoint value."] })] }) }) }) }));

package/dist/src/Navigation/stories/Navigation.userMenu.story.d.ts

@@ -5,7 +5,14 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const BasicUsage: () => import("react/jsx-runtime").JSX.Element;
+export declare const BasicUsage: {
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
+    play: ({ canvasElement: _canvasElement, step }: {
+        canvasElement: any;
+        step: any;
+    }) => Promise<void>;
+};
 export declare const WithoutATrigger: () => import("react/jsx-runtime").JSX.Element;
 export declare const Header: () => import("react/jsx-runtime").JSX.Element;
 export declare const Controls: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/Navigation/stories/Navigation.userMenu.story.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
+import { expect, screen, waitFor } from "storybook/test";
 import { BrowserRouter, Link } from "react-router-dom";
 import { Flex } from "../../Flex";
 import { Input } from "../../Input";
@@ -16,7 +17,7 @@ export default {
     },
 };
 const userMenuToggleSelector = 'button[aria-label="Toggle user menu"]';
-export const BasicUsage = () => {
+const BasicUsageComponent = () => {
     useConditionalAutoClick({
         selector: userMenuToggleSelector,
         condition: {
@@ -64,6 +65,26 @@ export const BasicUsage = () => {
             ],
         } }));
 };
+export const BasicUsage = {
+    render: () => _jsx(BasicUsageComponent, {}),
+    name: "Basic Usage",
+    play: async ({ canvasElement: _canvasElement, step }) => {
+        await step("auto-opens the user menu", async () => {
+            await waitFor(() => expect(screen.getByText("Haider Alshamma")).toBeVisible(), { timeout: 3000 });
+        });
+        await step("displays full user information in header", async () => {
+            await expect(screen.getAllByText("haidera@nulogy.com")[0]).toBeVisible();
+        });
+        await step("shows select controls", async () => {
+            await expect(screen.getByText("Company")).toBeVisible();
+            await expect(screen.getByText("User group")).toBeVisible();
+        });
+        await step("shows menu items", async () => {
+            await expect(screen.getByText("Preferences")).toBeVisible();
+            await expect(screen.getByText("Sign out")).toBeVisible();
+        });
+    },
+};
 export const WithoutATrigger = () => {
     const [title, setTitle] = React.useState("haidera@nulogy.com");
     const [subtitle1, setSubtitle1] = React.useState("Nulogy");

package/dist/src/Overlay/Overlay.story.d.ts

@@ -3,9 +3,7 @@ declare const _default: {
 };
 export default _default;
 export declare const LightDefault: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const Dark: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/Overlay/Overlay.story.js

@@ -4,8 +4,8 @@ import { Text, Card } from "../index";
 export default {
     title: "Components/Overlay",
 };
-export const LightDefault = () => (_jsxs(_Fragment, { children: [_jsx(Text, { children: "Background content" }), _jsx(Overlay, { children: "Overlay content" })] }));
-LightDefault.story = {
+export const LightDefault = {
+    render: () => (_jsxs(_Fragment, { children: [_jsx(Text, { children: "Background content" }), _jsx(Overlay, { children: "Overlay content" })] })),
     name: "Light (default)",
 };
 export const Dark = () => (_jsxs(_Fragment, { children: [_jsx(Text, { children: "Background content" }), _jsx(Overlay, { dark: true, children: _jsx(Card, { children: _jsx(Text, { children: "Overlay content" }) }) })] }));

package/dist/src/Pagination/Pagination.story.d.ts

@@ -4,22 +4,23 @@ declare const _default: {
 export default _default;
 export declare const _Pagination: () => import("react/jsx-runtime").JSX.Element;
 export declare const OnTheFirstPage: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const OnTheLastPage: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithLessThan5Pages: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const CustomMaxVisiblePages: () => import("react/jsx-runtime").JSX.Element;
-export declare function ScrollAfterPagination(): import("react/jsx-runtime").JSX.Element;
+export declare const ScrollAfterPagination: {
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
+    play: ({ canvasElement, step }: {
+        canvasElement: any;
+        step: any;
+    }) => Promise<void>;
+};

package/dist/src/Pagination/Pagination.story.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
+import { expect, userEvent, waitFor, within } from "storybook/test";
 import { styled } from "styled-components";
-import { action } from "@storybook/addon-actions";
+import { action } from "storybook/actions";
 import { Switch, Switcher } from "../Switcher";
 import { Flex } from "../Flex";
 import { Heading1, Text } from "../Type";
@@ -11,15 +12,18 @@ export default {
     title: "Components/Pagination",
 };
 export const _Pagination = () => (_jsxs(Flex, { gap: "x2", flexDirection: "column", children: [_jsx(Pagination, { currentPage: 1, totalPages: 7, onNext: action("next"), onPrevious: action("previous"), onSelectPage: action("selected") }), _jsx(Pagination, { currentPage: 2, totalPages: 7 }), _jsx(Pagination, { currentPage: 3, totalPages: 7 }), _jsx(Pagination, { currentPage: 4, totalPages: 7 }), _jsx(Pagination, { currentPage: 5, totalPages: 7 }), _jsx(Pagination, { currentPage: 6, totalPages: 7 }), _jsx(Pagination, { currentPage: 7, totalPages: 7 })] }));
-export const OnTheFirstPage = () => _jsx(Pagination, { currentPage: 1, totalPages: 10 });
-OnTheFirstPage.story = {
+export const OnTheFirstPage = {
+    render: () => _jsx(Pagination, { currentPage: 1, totalPages: 10 }),
     name: "on the first page",
 };
-export const OnTheLastPage = () => _jsx(Pagination, { currentPage: 10, totalPages: 10 });
-OnTheLastPage.story = {
+export const OnTheLastPage = {
+    render: () => _jsx(Pagination, { currentPage: 10, totalPages: 10 }),
     name: "on the last page",
 };
-export const WithLessThan5Pages = () => _jsx(Pagination, { currentPage: 3, totalPages: 4 });
+export const WithLessThan5Pages = {
+    render: () => _jsx(Pagination, { currentPage: 3, totalPages: 4 }),
+    name: "with less than 5 pages",
+};
 const AccentedRange = styled.input.attrs({ type: "range" }) `
   accent-color: ${({ theme }) => theme.colors.darkBlue};
 `;
@@ -34,10 +38,7 @@ export const CustomMaxVisiblePages = () => {
                     setCurrentPage(Number(page));
                 } })] }));
 };
-WithLessThan5Pages.story = {
-    name: "with less than 5 pages",
-};
-export function ScrollAfterPagination() {
+const ScrollAfterPaginationComponent = () => {
     const [currentPage, setCurrentPage] = useState(1);
     const [scrollTarget, setScrollTarget] = useState("none");
     const ref = useRef(null);
@@ -58,4 +59,24 @@ export function ScrollAfterPagination() {
     return (_jsxs(Flex, { gap: "x2", flexDirection: "column", alignItems: "flex-end", children: [_jsxs(Flex, { flexDirection: "column", gap: "x1", alignSelf: "flex-start", mb: "x2", children: [_jsx(Text, { fontSize: "small", fontWeight: "bold", children: "Scroll target after pagination" }), _jsxs(Switcher, { selected: scrollTarget, onChange: setScrollTarget, "aria-label": "scroll target", children: [_jsx(Switch, { value: "none", children: "None" }), _jsx(Switch, { value: "topOfPage", children: "Top of page" }), _jsx(Switch, { value: "topOfSection", children: "Top of section" })] })] }), _jsx(Box, { height: "180px", width: "100%", children: _jsx(Heading1, { "data-testid": "page-heading", children: messages[scrollTarget].page }) }), _jsx(Box, { ref: ref, p: "x4", height: "1400px", width: "100%", bg: "lightBlue", children: _jsx(Heading1, { "data-testid": "section-heading", children: messages[scrollTarget].section }) }), _jsx(Pagination, { scrollToTopAfterPagination: scrollTarget !== "none", scrollTargetRef: scrollTarget === "topOfSection" ? ref : undefined, currentPage: currentPage, totalPages: 7, onNext: () => setCurrentPage((p) => p + 1), onPrevious: () => setCurrentPage((p) => p - 1), onSelectPage: (page) => {
                     setCurrentPage(Number(page));
                 } })] }));
-}
+};
+export const ScrollAfterPagination = {
+    render: () => _jsx(ScrollAfterPaginationComponent, {}),
+    name: "Scroll After Pagination",
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+        await step("renders pagination with scroll target switcher", async () => {
+            await expect(canvas.getByRole("navigation", { name: "Pagination navigation" })).toBeInTheDocument();
+        });
+        await step("can switch scroll target to top of page", async () => {
+            await userEvent.click(canvas.getByText("Top of page"));
+        });
+        await step("can navigate to next page", async () => {
+            await userEvent.click(canvas.getByLabelText("Go to next results"));
+            await waitFor(() => expect(canvas.getByLabelText("Go to previous results")).not.toBeDisabled());
+        });
+        await step("can navigate back to previous page", async () => {
+            await userEvent.click(canvas.getByLabelText("Go to previous results"));
+        });
+    },
+};

package/dist/src/Radio/Radio.story.d.ts

@@ -1,17 +1,12 @@
-import { StoryObj } from "@storybook/react";
+import { StoryObj } from "@storybook/react-vite";
 import React from "react";
 import { Radio } from "../index";
 declare const _default: {
     title: string;
     component: React.ForwardRefExoticComponent<Omit<{
-        children?: React.ReactNode | Record<string, unknown>;
+        children?: React.ReactNode;
         value?: string | readonly string[] | number | undefined;
         ref?: React.Ref<HTMLInputElement>;
-        form?: string | undefined;
-        slot?: string | undefined;
-        style?: React.CSSProperties | undefined;
-        title?: string | undefined;
-        pattern?: string | undefined;
         property?: string | undefined;
         color?: string | undefined;
         content?: string | undefined;
@@ -19,6 +14,11 @@ declare const _default: {
         translate?: "yes" | "no" | undefined;
         width?: number | string | undefined;
         hidden?: boolean | undefined;
+        form?: string | undefined;
+        slot?: string | undefined;
+        style?: React.CSSProperties | undefined;
+        title?: string | undefined;
+        pattern?: string | undefined;
         key?: React.Key | null | undefined;
         defaultChecked?: boolean | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
@@ -28,7 +28,7 @@ declare const _default: {
         autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {});
         autoFocus?: boolean | undefined;
         className?: string | undefined;
-        contentEditable?: (boolean | "true" | "false") | "inherit" | undefined;
+        contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
         contextMenu?: string | undefined;
         dir?: string | undefined;
         draggable?: (boolean | "true" | "false") | undefined;
@@ -36,7 +36,6 @@ declare const _default: {
         id?: string | undefined;
         lang?: string | undefined;
         nonce?: string | undefined;
-        placeholder?: string | undefined;
         spellCheck?: (boolean | "true" | "false") | undefined;
         tabIndex?: number | undefined;
         radioGroup?: string | undefined;
@@ -257,9 +256,7 @@ declare const _default: {
         onPointerCancel?: React.PointerEventHandler<HTMLInputElement>;
         onPointerCancelCapture?: React.PointerEventHandler<HTMLInputElement>;
         onPointerEnter?: React.PointerEventHandler<HTMLInputElement>;
-        onPointerEnterCapture?: React.PointerEventHandler<HTMLInputElement>;
         onPointerLeave?: React.PointerEventHandler<HTMLInputElement>;
-        onPointerLeaveCapture?: React.PointerEventHandler<HTMLInputElement>;
         onPointerOver?: React.PointerEventHandler<HTMLInputElement>;
         onPointerOverCapture?: React.PointerEventHandler<HTMLInputElement>;
         onPointerOut?: React.PointerEventHandler<HTMLInputElement>;
@@ -283,23 +280,24 @@ declare const _default: {
         list?: string | undefined;
         name?: string | undefined;
         type?: React.HTMLInputTypeAttribute | undefined;
+        max?: number | string | undefined;
+        min?: number | string | undefined;
         alt?: string | undefined;
         src?: string | undefined;
         disabled?: boolean | undefined;
-        formAction?: string | undefined;
+        formAction?: string | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS] | undefined;
         formEncType?: string | undefined;
         formMethod?: string | undefined;
         formNoValidate?: boolean | undefined;
         formTarget?: string | undefined;
-        autoComplete?: string | undefined;
+        autoComplete?: React.HTMLInputAutoCompleteAttribute | undefined;
         accept?: string | undefined;
         capture?: boolean | "user" | "environment" | undefined;
         checked?: boolean | undefined;
-        max?: number | string | undefined;
         maxLength?: number | undefined;
-        min?: number | string | undefined;
         minLength?: number | undefined;
         multiple?: boolean | undefined;
+        placeholder?: string | undefined;
         readOnly?: boolean | undefined;
         required?: boolean | undefined;
         step?: number | string | undefined;