reshaped 3.8.0-canary.0 → 3.8.0-canary.1

package/dist/components/PinField/tests/PinField.stories.js

@@ -1,5 +1,7 @@
+import { expect, fn, userEvent, waitFor } from "storybook/internal/test";
 import { Example } from "../../../utilities/storybook/index.js";
 import PinField from "../index.js";
+import FormControl from "../../FormControl/index.js";
 export default {
     title: "Components/PinField",
     component: PinField,
@@ -9,54 +11,199 @@ export default {
         },
     },
 };
-export const base = () => (<Example>
-		<Example.Item title="no value">
-			<PinField name="pin" inputAttributes={{ "aria-label": "Pin" }}/>
-		</Example.Item>
-
-		<Example.Item title="defaultValue: 1234">
-			<PinField name="pin2" defaultValue="1234" inputAttributes={{ "aria-label": "Pin" }}/>
-		</Example.Item>
-
-		<Example.Item title="value: 12">
-			<PinField name="pin3" value="12" inputAttributes={{ "aria-label": "Pin" }}/>
-		</Example.Item>
-
-		<Example.Item title="defaultValue: 12, valueLength: 6">
-			<PinField name="pin4" defaultValue="12" valueLength={6} inputAttributes={{ "aria-label": "Pin" }}/>
-		</Example.Item>
-
-		<Example.Item title="defaultValue: ab, charPattern: alphabetic">
-			<PinField name="pin5" defaultValue="ab" pattern="alphabetic" inputAttributes={{ "aria-label": "Pin" }}/>
-		</Example.Item>
-
-		<Example.Item title="defaultValue: ab, charPattern: alphanumeric">
-			<PinField name="pin6" defaultValue="ab" pattern="alphanumeric" inputAttributes={{ "aria-label": "Pin" }}/>
-		</Example.Item>
-	</Example>);
-export const variant = () => (<Example>
-		<Example.Item title="variant: faded">
-			<PinField name="pin" variant="faded" inputAttributes={{ "aria-label": "Pin" }}/>
-		</Example.Item>
-	</Example>);
-export const size = () => (<Example>
-		<Example.Item title="size: small">
-			<PinField name="pin" size="small" inputAttributes={{ "aria-label": "Pin" }}/>
-		</Example.Item>
+export const base = {
+    name: "base",
+    render: () => <PinField name="test-name" inputAttributes={{ "aria-label": "Label" }}/>,
+    play: async ({ canvas }) => {
+        const elInput = canvas.getByRole("textbox");
+        expect(elInput).toBeInTheDocument();
+        expect(elInput).toHaveAttribute("name", "test-name");
+        expect(elInput).toHaveAttribute("autocomplete", "one-time-code");
+        expect(elInput).toHaveAttribute("inputmode", "numeric");
+    },
+};
+export const variant = {
+    name: "variant",
+    render: () => (<Example>
+			<Example.Item title="variant: faded">
+				<PinField name="pin" variant="faded" inputAttributes={{ "aria-label": "Pin" }}/>
+			</Example.Item>
+		</Example>),
+};
+export const size = {
+    name: "size",
+    render: () => (<Example>
+			<Example.Item title="size: small">
+				<PinField name="pin" size="small" inputAttributes={{ "aria-label": "Pin" }}/>
+			</Example.Item>
 
-		<Example.Item title="size: medium">
-			<PinField name="pin" size="medium" inputAttributes={{ "aria-label": "Pin" }}/>
-		</Example.Item>
+			<Example.Item title="size: medium">
+				<PinField name="pin" size="medium" inputAttributes={{ "aria-label": "Pin" }}/>
+			</Example.Item>
 
-		<Example.Item title="size: large">
-			<PinField name="pin" size="large" inputAttributes={{ "aria-label": "Pin" }}/>
-		</Example.Item>
+			<Example.Item title="size: large">
+				<PinField name="pin" size="large" inputAttributes={{ "aria-label": "Pin" }}/>
+			</Example.Item>
 
-		<Example.Item title="size: xlarge">
-			<PinField name="pin" size="xlarge" inputAttributes={{ "aria-label": "Pin" }}/>
-		</Example.Item>
+			<Example.Item title="size: xlarge">
+				<PinField name="pin" size="xlarge" inputAttributes={{ "aria-label": "Pin" }}/>
+			</Example.Item>
 
-		<Example.Item title="size: responsive, s: medium, m+: xlarge">
-			<PinField name="pin" size={{ s: "medium", m: "xlarge" }} inputAttributes={{ "aria-label": "Pin" }}/>
-		</Example.Item>
-	</Example>);
+			<Example.Item title="size: responsive, s: medium, m+: xlarge">
+				<PinField name="pin" size={{ s: "medium", m: "xlarge" }} inputAttributes={{ "aria-label": "Pin" }}/>
+			</Example.Item>
+		</Example>),
+};
+export const valueLength = {
+    name: "valueLength",
+    render: () => (<PinField name="test-name" valueLength={6} inputAttributes={{ "aria-label": "Label" }}/>),
+    play: async ({ canvas }) => {
+        const elInput = canvas.getByRole("textbox");
+        expect(elInput).toHaveAttribute("maxlength", "6");
+    },
+};
+export const defaultValue = {
+    name: "defaultValue, uncontrolled",
+    args: {
+        handleChange: fn(),
+    },
+    render: (args) => (<PinField name="test-name" onChange={args.handleChange} defaultValue="12" inputAttributes={{ "aria-label": "Label" }}/>),
+    play: async ({ canvas, args }) => {
+        const elInput = canvas.getByRole("textbox");
+        elInput.focus();
+        await userEvent.keyboard("3");
+        expect(args.handleChange).toHaveBeenCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({
+            value: "123",
+            name: "test-name",
+            event: expect.objectContaining({ target: elInput }),
+        });
+        expect(elInput).toHaveValue("123");
+    },
+};
+export const value = {
+    name: "value, controlled",
+    args: {
+        handleChange: fn(),
+    },
+    render: (args) => (<PinField name="test-name" onChange={args.handleChange} value="12" inputAttributes={{ "aria-label": "Label" }}/>),
+    play: async ({ canvas, args }) => {
+        const elInput = canvas.getByRole("textbox");
+        elInput.focus();
+        await userEvent.keyboard("3");
+        expect(args.handleChange).toHaveBeenCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({
+            value: "123",
+            name: "test-name",
+            event: expect.objectContaining({ target: elInput }),
+        });
+        expect(elInput).toHaveValue("12");
+    },
+};
+export const pattern = {
+    name: "pattern",
+    args: {
+        handleChange: fn(),
+    },
+    render: (args) => (<PinField name="test-name" pattern="alphabetic" defaultValue="ab" onChange={args.handleChange} inputAttributes={{ "aria-label": "Label" }}/>),
+    play: async ({ canvas, args }) => {
+        const elInput = canvas.getByRole("textbox");
+        elInput.focus();
+        await userEvent.keyboard("3");
+        expect(elInput).toHaveValue("ab");
+        expect(args.handleChange).toHaveBeenCalledTimes(0);
+        await userEvent.keyboard("c");
+        expect(elInput).toHaveValue("abc");
+        expect(args.handleChange).toHaveBeenCalledTimes(1);
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<PinField name="test-name" className="test-classname" attributes={{ id: "test-id" }} inputAttributes={{ "aria-label": "Label", id: "test-input-id" }}/>
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        const input = canvas.queryByLabelText("Label");
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+        expect(input).toHaveAttribute("id", "test-input-id");
+    },
+};
+export const formControl = {
+    name: "test: with FormControl",
+    render: () => (<FormControl>
+			<FormControl.Label>Label</FormControl.Label>
+			<PinField name="test-name"/>
+		</FormControl>),
+    play: async ({ canvas }) => {
+        const elInput = canvas.getByRole("textbox");
+        expect(elInput).toHaveAccessibleName("Label");
+    },
+};
+export const keyboard = {
+    name: "test: keyboard navigation",
+    render: () => <PinField name="test-name" inputAttributes={{ "aria-label": "Label" }}/>,
+    play: async ({ canvas }) => {
+        const elInput = canvas.getByRole("textbox");
+        elInput.focus();
+        expect(elInput.selectionStart).toEqual(0);
+        expect(elInput.selectionEnd).toEqual(0);
+        await userEvent.keyboard("1");
+        await waitFor(() => {
+            expect(elInput.selectionStart).toEqual(1);
+            expect(elInput.selectionEnd).toEqual(1);
+        });
+        await userEvent.keyboard("234");
+        await waitFor(() => {
+            expect(elInput.selectionStart).toEqual(3);
+            expect(elInput.selectionEnd).toEqual(4);
+        });
+        // Move back to the first character
+        await userEvent.keyboard("{ArrowLeft/}");
+        await waitFor(() => {
+            expect(elInput.selectionStart).toEqual(2);
+            expect(elInput.selectionEnd).toEqual(3);
+        });
+        await userEvent.keyboard("{ArrowLeft/}");
+        await waitFor(() => {
+            expect(elInput.selectionStart).toEqual(1);
+            expect(elInput.selectionEnd).toEqual(2);
+        });
+        await userEvent.keyboard("{ArrowLeft}");
+        await waitFor(() => {
+            expect(elInput.selectionStart).toEqual(0);
+            expect(elInput.selectionEnd).toEqual(1);
+        });
+        // Move to the third character
+        await userEvent.keyboard("{ArrowRight}");
+        await waitFor(() => {
+            expect(elInput.selectionStart).toEqual(1);
+            expect(elInput.selectionEnd).toEqual(2);
+        });
+        await userEvent.keyboard("{ArrowRight}");
+        await waitFor(() => {
+            expect(elInput.selectionStart).toEqual(2);
+            expect(elInput.selectionEnd).toEqual(3);
+        });
+        expect(elInput).toHaveValue("1234");
+        await userEvent.keyboard("{backspace}");
+        expect(elInput).toHaveValue("124");
+        await waitFor(() => {
+            expect(elInput.selectionStart).toEqual(2);
+            expect(elInput.selectionEnd).toEqual(3);
+        });
+        // Switched to type mode
+        await userEvent.keyboard("{ArrowRight}");
+        await waitFor(() => {
+            expect(elInput.selectionStart).toEqual(3);
+            expect(elInput.selectionStart).toEqual(3);
+        });
+        // Can't move further
+        await userEvent.keyboard("{ArrowRight}");
+        await waitFor(() => {
+            expect(elInput.selectionStart).toEqual(3);
+            expect(elInput.selectionStart).toEqual(3);
+        });
+    },
+};

package/dist/components/Popover/Popover.types.d.ts

@@ -1,7 +1,7 @@
 import type React from "react";
 import type { FlyoutProps, FlyoutInstance } from "../Flyout";
 export type Instance = FlyoutInstance;
-export type Props = Pick<FlyoutProps, "id" | "position" | "forcePosition" | "fallbackPositions" | "onOpen" | "onClose" | "width" | "trapFocusMode" | "active" | "defaultActive" | "contentGap" | "contentShift" | "instanceRef" | "triggerType" | "disableHideAnimation" | "disableContentHover" | "disableCloseOnOutsideClick" | "autoFocus" | "containerRef" | "initialFocusRef" | "originCoordinates"> & {
+export type Props = Pick<FlyoutProps, "id" | "position" | "forcePosition" | "fallbackPositions" | "fallbackAdjustLayout" | "onOpen" | "onClose" | "width" | "trapFocusMode" | "active" | "defaultActive" | "contentGap" | "contentShift" | "instanceRef" | "triggerType" | "disableHideAnimation" | "disableContentHover" | "disableCloseOnOutsideClick" | "autoFocus" | "containerRef" | "initialFocusRef" | "originCoordinates"> & {
     /** Node for inserting children */
     children?: React.ReactNode;
     /** Content element padding, unit token multiplier */

package/dist/components/Reshaped/Reshaped.css

@@ -1 +1 @@
-@layer rs.reset{[data-rs-theme]{--rs-radius-circular:9999px;--rs-shadow-border-faded:0px 0px 0px 1px var(--rs-color-border-neutral-faded)}[data-rs-theme] blockquote,[data-rs-theme] body,[data-rs-theme] dd,[data-rs-theme] dl,[data-rs-theme] figcaption,[data-rs-theme] figure,[data-rs-theme] h1,[data-rs-theme] h2,[data-rs-theme] h3,[data-rs-theme] h4,[data-rs-theme] h5,[data-rs-theme] h6,[data-rs-theme] li,[data-rs-theme] ol,[data-rs-theme] p,[data-rs-theme] ul{margin:0;padding:0}[data-rs-theme] ol[class],[data-rs-theme] ul[class]{list-style:none}[data-rs-theme] textarea{resize:vertical}[data-rs-theme] table{border-collapse:collapse;border-spacing:0}[data-rs-theme] fieldset{border:0;margin:0;padding:0}[data-rs-theme] img{display:block;max-width:100%}[data-rs-theme] button,[data-rs-theme] input,[data-rs-theme] select,[data-rs-theme] textarea{font:inherit}[data-rs-theme] option{background:var(--rs-color-background-elevation-base)}[data-rs-theme] label{cursor:pointer}[data-rs-theme] input::placeholder,[data-rs-theme] textarea::placeholder{color:var(--rs-color-foreground-disabled)}html[data-rs-theme]{-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;font-size:100%;text-rendering:optimizelegibility;touch-action:manipulation}[data-rs-theme] *{box-sizing:border-box}[data-rs-theme] body,html[data-rs-theme]{background:var(--rs-color-background-page);color:var(--rs-color-foreground-neutral);height:100%;scroll-behavior:smooth}}[data-rs-theme] body,[data-rs-theme]:not(html){font-family:var(--rs-font-family-body);font-size:var(--rs-font-size-body-3);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}[data-rs-color-mode=light]{color-scheme:light}[data-rs-color-mode=dark]{color-scheme:dark}@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}[data-rs-no-transition] *,[data-rs-no-transition] :after,[data-rs-no-transition] :before{transition:none!important}
+@layer rs.reset{[data-rs-theme]{--rs-radius-circular:9999px;--rs-shadow-border-faded:0px 0px 0px 1px var(--rs-color-border-neutral-faded)}[data-rs-theme] blockquote,[data-rs-theme] body,[data-rs-theme] dd,[data-rs-theme] dl,[data-rs-theme] figcaption,[data-rs-theme] figure,[data-rs-theme] h1,[data-rs-theme] h2,[data-rs-theme] h3,[data-rs-theme] h4,[data-rs-theme] h5,[data-rs-theme] h6,[data-rs-theme] li,[data-rs-theme] ol,[data-rs-theme] p,[data-rs-theme] ul{margin:0;padding:0}[data-rs-theme] ol[class],[data-rs-theme] ul[class]{list-style:none}[data-rs-theme] textarea{resize:vertical}[data-rs-theme] table{border-collapse:collapse;border-spacing:0}[data-rs-theme] fieldset{border:0;margin:0;padding:0}[data-rs-theme] img{display:block;max-width:100%}[data-rs-theme] button,[data-rs-theme] input,[data-rs-theme] select,[data-rs-theme] textarea{font:inherit}[data-rs-theme] option{background:var(--rs-color-background-elevation-base)}[data-rs-theme] label{cursor:pointer}[data-rs-theme] input::placeholder,[data-rs-theme] textarea::placeholder{color:var(--rs-color-foreground-disabled)}html[data-rs-theme]{-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;font-size:100%;text-rendering:optimizelegibility;touch-action:manipulation}[data-rs-theme] *{box-sizing:border-box}[data-rs-theme] body,html[data-rs-theme]{background:var(--rs-color-background-page);color:var(--rs-color-foreground-neutral);min-height:100vh;scroll-behavior:smooth}}[data-rs-theme] body,[data-rs-theme]:not(html){font-family:var(--rs-font-family-body);font-size:var(--rs-font-size-body-3);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}[data-rs-color-mode=light]{color-scheme:light}[data-rs-color-mode=dark]{color-scheme:dark}@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}[data-rs-no-transition] *,[data-rs-no-transition] :after,[data-rs-no-transition] :before{transition:none!important}

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "reshaped",
 	"description": "Professionally crafted design system in React & Figma for building products of any scale and complexity",
-	"version": "3.8.0-canary.0",
+	"version": "3.8.0-canary.1",
 	"license": "MIT",
 	"email": "hello@reshaped.so",
 	"homepage": "https://reshaped.so",
@@ -18,8 +18,17 @@
 		"accessibility",
 		"accessible"
 	],
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/reshaped-ui/reshaped.git"
+	},
 	"bugs": {
-		"url": "https://github.com/formaat-design/reshaped/issues"
+		"url": "https://github.com/reshaped-ui/reshaped/issues"
+	},
+	"author": {
+		"name": "Dmitry Belyaev",
+		"email": "blv.dmitry@gmail.com",
+		"url": "https://reshaped.so"
 	},
 	"sideEffects": [
 		"*.css"
@@ -63,33 +72,33 @@
 	"scripts": {
 		"dev": "storybook dev -p 3001 --disable-telemetry",
 		"clean": "sh ./bin/clean.sh",
-		"build": "yarn clean && yarn build:stories && yarn build:esm && yarn build:css && yarn build:cjs && yarn build:bundle",
+		"build": "pnpm clean && pnpm build:stories && pnpm build:esm && pnpm build:css && pnpm build:cjs && pnpm build:bundle",
 		"build:themes": "node bin/cli.js theming --config dist/cjs/cli/theming/reshaped.config.js --output src/themes",
 		"build:esm": "tsc -p tsconfig.esm.json && resolve-tspaths -p tsconfig.esm.json",
 		"build:cjs": "tsc -p tsconfig.cjs.json && resolve-tspaths -p tsconfig.cjs.json && node ./bin/format-cjs-build.js",
 		"build:css": "postcss \"src/**/*.css\" --dir dist --base src --config tools/build",
 		"build:stories": "tsc -p tsconfig.stories.json && resolve-tspaths -p tsconfig.stories.json",
 		"build:bundle": "vite build && cp dist/index.d.ts dist/bundle.d.ts",
-		"build:size": "yarn clean && yarn build:esm && yarn build:bundle",
+		"build:size": "pnpm clean && pnpm build:esm && pnpm build:bundle",
 		"build:storybook": "storybook build -o dist/app --disable-telemetry",
 		"build:chromatic": "STORYBOOK_ENV=chromatic storybook build",
 		"changelog": "node bin/generate-changelog.js",
-		"version": "yarn changelog && git add CHANGELOG.md",
+		"version": "pnpm changelog && git add CHANGELOG.md",
 		"release": "node bin/release.js",
 		"release:patch": "node bin/release.js patch",
 		"release:minor": "node bin/release.js minor",
 		"release:major": "node bin/release.js major",
-		"release:lib": "yarn build && yarn publish",
-		"release:canary": "yarn build && yarn publish --tag canary",
-		"release:test": "yarn build && yarn pack --filename reshaped-test.tgz",
+		"release:lib": "pnpm build && pnpm publish",
+		"release:canary": "pnpm build && yarn publish --tag canary",
+		"release:test": "pnpm build && pnpm pack --filename reshaped-test.tgz",
 		"release:copy": "sh ./bin/release-copy.sh",
 		"chromatic": "chromatic -b build:chromatic --project-token=$(cat .chromatic)",
-		"test:vrt": "yarn chromatic",
-		"test:vrt:turbo": "yarn chromatic --only-changed",
+		"test:vrt": "pnpm chromatic",
+		"test:vrt:turbo": "pnpm chromatic --only-changed",
 		"test:browser": "vitest run --project=storybook",
 		"test:unit": "vitest run --project=unit",
 		"test:size": "size-limit",
-		"lint": "yarn lint:js && yarn lint:css",
+		"lint": "pnpm lint:js && pnpm lint:css",
 		"lint:js": "eslint './src/**/*.{ts,tsx}' --fix",
 		"lint:css": "stylelint 'src/**/*.css'",
 		"commit": "git-cz"
@@ -101,31 +110,33 @@
 		"@commitlint/cli": "19.8.1",
 		"@commitlint/config-conventional": "19.8.1",
 		"@commitlint/types": "19.8.1",
-		"@eslint/js": "9.34.0",
+		"@eslint/js": "9.35.0",
 		"@size-limit/preset-big-lib": "11.2.0",
-		"@storybook/addon-a11y": "9.1.3",
-		"@storybook/addon-docs": "9.1.3",
-		"@storybook/addon-vitest": "9.1.3",
-		"@storybook/react-vite": "9.1.3",
-		"@types/culori": "4.0.0",
+		"@storybook/addon-a11y": "9.1.5",
+		"@storybook/addon-docs": "9.1.5",
+		"@storybook/addon-vitest": "9.1.5",
+		"@storybook/react": "9.1.5",
+		"@storybook/react-vite": "9.1.5",
+		"@testing-library/user-event": "14.6.1",
+		"@types/culori": "4.0.1",
 		"@types/events": "3.0.3",
-		"@types/node": "24.3.0",
-		"@types/react": "19.1.12",
+		"@types/node": "24.3.3",
+		"@types/react": "19.1.13",
 		"@types/react-dom": "19.1.9",
 		"@vitejs/plugin-react": "4.6.0",
 		"@vitest/browser": "3.2.4",
 		"@vitest/coverage-istanbul": "3.2.4",
 		"@vitest/coverage-v8": "3.2.4",
-		"chromatic": "13.1.3",
+		"chromatic": "13.1.4",
 		"conventional-changelog-cli": "5.0.0",
 		"cz-conventional-changelog": "3.3.0",
-		"eslint": "9.34.0",
+		"eslint": "9.35.0",
 		"eslint-config-prettier": "10.1.8",
 		"eslint-plugin-jsx-a11y": "6.10.2",
 		"eslint-plugin-prettier": "5.5.4",
 		"eslint-plugin-react": "7.37.5",
 		"eslint-plugin-react-hooks": "5.2.0",
-		"lefthook": "1.12.3",
+		"lefthook": "1.13.0",
 		"playwright": "1.55.0",
 		"postcss": "8.5.6",
 		"postcss-cli": "11.0.1",
@@ -137,14 +148,14 @@
 		"react-shadow": "20.6.0",
 		"resolve-tspaths": "0.8.23",
 		"size-limit": "11.2.0",
-		"storybook": "9.1.3",
-		"stylelint": "16.23.1",
+		"storybook": "9.1.5",
+		"stylelint": "16.24.0",
 		"stylelint-config-prettier": "9.0.5",
 		"stylelint-config-standard": "39.0.0",
 		"ts-node": "10.9.2",
 		"typescript": "5.9.2",
-		"typescript-eslint": "8.41.0",
-		"vite": "7.1.3",
+		"typescript-eslint": "8.43.0",
+		"vite": "7.1.5",
 		"vite-tsconfig-paths": "5.1.4",
 		"vitest": "3.2.4",
 		"vitest-browser-react": "1.0.1"
@@ -155,9 +166,9 @@
 		"react-dom": "^18 || ^19"
 	},
 	"dependencies": {
-		"@csstools/postcss-global-data": "3.0.0",
+		"@csstools/postcss-global-data": "3.1.0",
 		"chalk": "4.1.2",
-		"commander": "14.0.0",
+		"commander": "14.0.1",
 		"cssnano": "7.1.1",
 		"csstype": "3.1.3",
 		"culori": "4.0.2",

package/dist/components/PinField/tests/PinField.test.stories.d.ts

@@ -1,29 +0,0 @@
-import { StoryObj } from "@storybook/react-vite";
-import { fn } from "storybook/test";
-declare const _default: {
-    title: string;
-    component: import("react").FC<import("./..").PinFieldProps>;
-    parameters: {
-        iframe: {
-            url: string;
-        };
-        chromatic: {
-            disableSnapshot: boolean;
-        };
-    };
-};
-export default _default;
-export declare const render: StoryObj;
-export declare const valueLength: StoryObj;
-export declare const defaultValue: StoryObj<{
-    handleChange?: ReturnType<typeof fn>;
-}>;
-export declare const value: StoryObj<{
-    handleChange?: ReturnType<typeof fn>;
-}>;
-export declare const pattern: StoryObj<{
-    handleChange?: ReturnType<typeof fn>;
-}>;
-export declare const formControl: StoryObj;
-export declare const keyboard: StoryObj;
-export declare const className: StoryObj;

package/dist/components/PinField/tests/PinField.test.stories.js

@@ -1,177 +0,0 @@
-import { expect, fn, userEvent, waitFor } from "storybook/test";
-import FormControl from "../../FormControl/index.js";
-import PinField from "../index.js";
-export default {
-    title: "Components/PinField/tests",
-    component: PinField,
-    parameters: {
-        iframe: {
-            url: "https://reshaped.so/docs/components/pin-field",
-        },
-        chromatic: { disableSnapshot: true },
-    },
-};
-export const render = {
-    name: "rendering",
-    render: () => <PinField name="test-name" inputAttributes={{ "aria-label": "Label" }}/>,
-    play: async ({ canvas }) => {
-        const elInput = canvas.getByRole("textbox");
-        expect(elInput).toBeInTheDocument();
-        expect(elInput).toHaveAttribute("name", "test-name");
-        expect(elInput).toHaveAttribute("autocomplete", "one-time-code");
-        expect(elInput).toHaveAttribute("inputmode", "numeric");
-    },
-};
-export const valueLength = {
-    name: "valueLength",
-    render: () => (<PinField name="test-name" valueLength={6} inputAttributes={{ "aria-label": "Label" }}/>),
-    play: async ({ canvas }) => {
-        const elInput = canvas.getByRole("textbox");
-        expect(elInput).toHaveAttribute("maxlength", "6");
-    },
-};
-export const defaultValue = {
-    name: "defaultValue, uncontrolled",
-    args: {
-        handleChange: fn(),
-    },
-    render: (args) => (<PinField name="test-name" onChange={args.handleChange} defaultValue="12" inputAttributes={{ "aria-label": "Label" }}/>),
-    play: async ({ canvas, args }) => {
-        const elInput = canvas.getByRole("textbox");
-        elInput.focus();
-        await userEvent.keyboard("3");
-        expect(args.handleChange).toHaveBeenCalledTimes(1);
-        expect(args.handleChange).toHaveBeenCalledWith({
-            value: "123",
-            name: "test-name",
-            event: expect.objectContaining({ target: elInput }),
-        });
-        expect(elInput).toHaveValue("123");
-    },
-};
-export const value = {
-    name: "value, controlled",
-    args: {
-        handleChange: fn(),
-    },
-    render: (args) => (<PinField name="test-name" onChange={args.handleChange} value="12" inputAttributes={{ "aria-label": "Label" }}/>),
-    play: async ({ canvas, args }) => {
-        const elInput = canvas.getByRole("textbox");
-        elInput.focus();
-        await userEvent.keyboard("3");
-        expect(args.handleChange).toHaveBeenCalledTimes(1);
-        expect(args.handleChange).toHaveBeenCalledWith({
-            value: "123",
-            name: "test-name",
-            event: expect.objectContaining({ target: elInput }),
-        });
-        expect(elInput).toHaveValue("12");
-    },
-};
-export const pattern = {
-    name: "pattern",
-    args: {
-        handleChange: fn(),
-    },
-    render: (args) => (<PinField name="test-name" pattern="alphabetic" defaultValue="ab" onChange={args.handleChange} inputAttributes={{ "aria-label": "Label" }}/>),
-    play: async ({ canvas, args }) => {
-        const elInput = canvas.getByRole("textbox");
-        elInput.focus();
-        await userEvent.keyboard("3");
-        expect(elInput).toHaveValue("ab");
-        expect(args.handleChange).toHaveBeenCalledTimes(0);
-        await userEvent.keyboard("c");
-        expect(elInput).toHaveValue("abc");
-        expect(args.handleChange).toHaveBeenCalledTimes(1);
-    },
-};
-export const formControl = {
-    name: "with FormControl",
-    render: () => (<FormControl>
-			<FormControl.Label>Label</FormControl.Label>
-			<PinField name="test-name"/>
-		</FormControl>),
-    play: async ({ canvas }) => {
-        const elInput = canvas.getByRole("textbox");
-        expect(elInput).toHaveAccessibleName("Label");
-    },
-};
-export const keyboard = {
-    name: "keyboard navigation",
-    render: () => <PinField name="test-name" inputAttributes={{ "aria-label": "Label" }}/>,
-    play: async ({ canvas }) => {
-        const elInput = canvas.getByRole("textbox");
-        elInput.focus();
-        expect(elInput.selectionStart).toEqual(0);
-        expect(elInput.selectionEnd).toEqual(0);
-        await userEvent.keyboard("1");
-        await waitFor(() => {
-            expect(elInput.selectionStart).toEqual(1);
-            expect(elInput.selectionEnd).toEqual(1);
-        });
-        await userEvent.keyboard("234");
-        await waitFor(() => {
-            expect(elInput.selectionStart).toEqual(3);
-            expect(elInput.selectionEnd).toEqual(4);
-        });
-        // Move back to the first character
-        await userEvent.keyboard("{ArrowLeft/}");
-        await waitFor(() => {
-            expect(elInput.selectionStart).toEqual(2);
-            expect(elInput.selectionEnd).toEqual(3);
-        });
-        await userEvent.keyboard("{ArrowLeft/}");
-        await waitFor(() => {
-            expect(elInput.selectionStart).toEqual(1);
-            expect(elInput.selectionEnd).toEqual(2);
-        });
-        await userEvent.keyboard("{ArrowLeft}");
-        await waitFor(() => {
-            expect(elInput.selectionStart).toEqual(0);
-            expect(elInput.selectionEnd).toEqual(1);
-        });
-        // Move to the third character
-        await userEvent.keyboard("{ArrowRight}");
-        await waitFor(() => {
-            expect(elInput.selectionStart).toEqual(1);
-            expect(elInput.selectionEnd).toEqual(2);
-        });
-        await userEvent.keyboard("{ArrowRight}");
-        await waitFor(() => {
-            expect(elInput.selectionStart).toEqual(2);
-            expect(elInput.selectionEnd).toEqual(3);
-        });
-        expect(elInput).toHaveValue("1234");
-        await userEvent.keyboard("{backspace}");
-        expect(elInput).toHaveValue("124");
-        await waitFor(() => {
-            expect(elInput.selectionStart).toEqual(2);
-            expect(elInput.selectionEnd).toEqual(3);
-        });
-        // Switched to type mode
-        await userEvent.keyboard("{ArrowRight}");
-        await waitFor(() => {
-            expect(elInput.selectionStart).toEqual(3);
-            expect(elInput.selectionStart).toEqual(3);
-        });
-        // Can't move further
-        await userEvent.keyboard("{ArrowRight}");
-        await waitFor(() => {
-            expect(elInput.selectionStart).toEqual(3);
-            expect(elInput.selectionStart).toEqual(3);
-        });
-    },
-};
-export const className = {
-    name: "className, attributes",
-    render: () => (<div data-testid="root">
-			<PinField name="test-name" className="test-classname" attributes={{ id: "test-id" }} inputAttributes={{ "aria-label": "Label", id: "test-input-id" }}/>
-		</div>),
-    play: async ({ canvas }) => {
-        const root = canvas.getByTestId("root").firstChild;
-        const input = canvas.queryByLabelText("Label");
-        expect(root).toHaveClass("test-classname");
-        expect(root).toHaveAttribute("id", "test-id");
-        expect(input).toHaveAttribute("id", "test-input-id");
-    },
-};