reshaped 3.8.0-canary.1 → 3.8.0-canary.10

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

@@ -6,6 +6,7 @@ import View from "../../View/index.js";
 import Text from "../../Text/index.js";
 import Button from "../../Button/index.js";
 import Badge from "../../Badge/index.js";
+import { expect, fn, userEvent } from "storybook/test";
 export default {
     title: "Components/TextField",
     component: TextField,
@@ -15,143 +16,216 @@ export default {
         },
     },
 };
-export const value = () => (<Example>
-		<Example.Item title="no value, placeholder">
-			<TextField name="Name" placeholder="Enter your name" icon={IconZap} endIcon={<div>EndIconHere</div>}/>
-		</Example.Item>
+export const variant = {
+    name: "variant",
+    render: () => (<Example>
+			<Example.Item title="variant: faded">
+				<TextField variant="faded" name="Name" placeholder="Enter your name"/>
+			</Example.Item>
 
-		<Example.Item title="value, uncontrolled">
-			<TextField name="Name" defaultValue="Reshaped" placeholder="Enter your name"/>
-		</Example.Item>
-
-		<Example.Item title="value, controlled">
-			<TextField name="Name" value="Reshaped" placeholder="Enter your name"/>
-		</Example.Item>
-	</Example>);
-export const variants = () => (<Example>
-		<Example.Item title="variant: faded">
-			<TextField variant="faded" name="Name" placeholder="Enter your name"/>
-		</Example.Item>
-
-		<Example.Item title="variant: headless">
-			<TextField variant="headless" name="Name" placeholder="Enter your name"/>
-		</Example.Item>
-	</Example>);
-export const rounded = () => (<Example>
-		<Example.Item title="rounded">
-			<TextField rounded name="Name" placeholder="Enter your name" icon={IconZap} prefix="+31" endSlot={<Button rounded size="small" icon={IconZap}/>}/>
-		</Example.Item>
-
-		<Example.Item title="rounded, variant: faded">
-			<View direction="row" gap={2}>
-				<View.Item grow>
-					<TextField rounded variant="faded" name="Name" placeholder="Enter your name" startSlot={<Badge rounded size="small">
-								Hello
-							</Badge>}/>
-				</View.Item>
-				<Button rounded>Submit</Button>
-			</View>
-		</Example.Item>
-	</Example>);
-export const disabled = () => (<Example>
-		<Example.Item title="disabled, no value">
-			<TextField name="Name" placeholder="Enter your name" disabled/>
-		</Example.Item>
-		<Example.Item title="disabled, value">
-			<TextField name="Name" placeholder="Enter your name" disabled value="Reshaped"/>
-		</Example.Item>
-	</Example>);
-export const error = () => (<Example>
-		<Example.Item title="error">
-			<TextField name="Name" placeholder="Enter your name" hasError/>
-		</Example.Item>
-	</Example>);
-export const attachments = () => (<Example>
-		<Example.Item title="icon">
-			<TextField name="Name" placeholder="Enter your name" value="Reshaped" icon={IconZap}/>
-		</Example.Item>
-		<Example.Item title="endIcon">
-			<TextField name="Name" placeholder="Enter your name" value="Reshaped" endIcon={IconZap}/>
-		</Example.Item>
+			<Example.Item title="variant: headless">
+				<TextField variant="headless" name="Name" placeholder="Enter your name"/>
+			</Example.Item>
+		</Example>),
+};
+export const rounded = {
+    name: "rounded",
+    render: () => (<Example>
+			<Example.Item title="rounded">
+				<TextField rounded name="Name" placeholder="Enter your name" icon={IconZap} prefix="+31" endSlot={<Button rounded size="small" icon={IconZap}/>}/>
+			</Example.Item>
 
-		<Example.Item title="width affixes">
-			<TextField name="Name" placeholder="Enter your name" value="Reshaped" endIcon={IconZap} icon={IconZap} prefix="Estimated value" suffix="m2"/>
-		</Example.Item>
+			<Example.Item title="rounded, variant: faded">
+				<View direction="row" gap={2}>
+					<View.Item grow>
+						<TextField rounded variant="faded" name="Name" placeholder="Enter your name" startSlot={<Badge rounded size="small">
+									Hello
+								</Badge>}/>
+					</View.Item>
+					<Button rounded>Submit</Button>
+				</View>
+			</Example.Item>
+		</Example>),
+};
+export const error = {
+    name: "hasError",
+    render: () => (<Example>
+			<Example.Item title="error">
+				<TextField name="Name" placeholder="Enter your name" hasError/>
+			</Example.Item>
+		</Example>),
+};
+export const attachments = {
+    name: "icon, endIcon, suffix, prefix, startSlot, endSlot",
+    render: () => (<Example>
+			<Example.Item title="icon">
+				<TextField name="Name" placeholder="Enter your name" value="Reshaped" icon={IconZap}/>
+			</Example.Item>
+			<Example.Item title="endIcon">
+				<TextField name="Name" placeholder="Enter your name" value="Reshaped" endIcon={IconZap}/>
+			</Example.Item>
 
-		<Example.Item title="multine">
-			<TextField name="Name" placeholder="Enter your name" value="Reshaped" endIcon={IconZap} icon={IconZap} prefix="Estimated value" suffix="m2" multiline/>
-		</Example.Item>
-	</Example>);
-export const size = () => (<Example>
-		<Example.Item title="size: small">
-			<TextField name="Name" placeholder="Enter your name" size="small" icon={IconZap}/>
-		</Example.Item>
+			<Example.Item title="width affixes">
+				<TextField name="Name" placeholder="Enter your name" value="Reshaped" endIcon={IconZap} icon={IconZap} prefix="Estimated value" suffix="m2"/>
+			</Example.Item>
 
-		<Example.Item title="size: medium">
-			<TextField name="Name" placeholder="Enter your name" size="medium" icon={IconZap}/>
-		</Example.Item>
+			<Example.Item title={["startSlot", "vertical and horizontal padding aligned"]}>
+				<TextField name="Name" placeholder="Enter your name" value="Reshaped" startSlot={<Placeholder h={20}/>}/>
+			</Example.Item>
+			<Example.Item title={["endSlot", "vertical and horizontal padding aligned"]}>
+				<TextField name="Name" placeholder="Enter your name" value="Reshaped" endSlot={<Button icon={IconZap} size="small" onClick={() => { }} attributes={{ "aria-label": "Action" }}/>}/>
+			</Example.Item>
+			<Example.Item title="multiline wrap">
+				<TextField name="Name" placeholder="Enter your name" value="Reshaped" startSlot={[...Array(10).keys()].map((i) => (<Badge size="small" key={i}>
+							Item {i + 1}
+						</Badge>))} multiline/>
+			</Example.Item>
+		</Example>),
+};
+export const size = {
+    name: "size",
+    render: () => (<Example>
+			<Example.Item title="size: small">
+				<TextField name="Name" placeholder="Enter your name" size="small" icon={IconZap}/>
+			</Example.Item>
 
-		<Example.Item title="size: large">
-			<TextField name="Name" placeholder="Enter your name" size="large" icon={IconZap}/>
-		</Example.Item>
+			<Example.Item title="size: medium">
+				<TextField name="Name" placeholder="Enter your name" size="medium" icon={IconZap}/>
+			</Example.Item>
 
-		<Example.Item title="size: xlarge">
-			<TextField name="Name" placeholder="Enter your name" size="xlarge" icon={IconZap}/>
-		</Example.Item>
+			<Example.Item title="size: large">
+				<TextField name="Name" placeholder="Enter your name" size="large" icon={IconZap}/>
+			</Example.Item>
 
-		<Example.Item title={["responsive size", "[s] xlarge", "[m+] medium"]}>
-			<TextField name="Name" placeholder="Enter your name" size={{ s: "xlarge", m: "medium" }} icon={IconZap}/>
-		</Example.Item>
-	</Example>);
-export const affixes = () => (<Example>
-		<Example.Item title="prefix">
-			<TextField name="phone" placeholder="Enter your phone number" value="Reshaped" prefix="+31"/>
-		</Example.Item>
+			<Example.Item title="size: xlarge">
+				<TextField name="Name" placeholder="Enter your name" size="xlarge" icon={IconZap}/>
+			</Example.Item>
 
-		<Example.Item title="suffix">
-			<TextField name="area" placeholder="Enter your room ara" value="25" suffix="m2"/>
-		</Example.Item>
-	</Example>);
-export const slots = () => (<Example>
-		<Example.Item title={["startSlot", "vertical and horizontal padding aligned"]}>
-			<TextField name="Name" placeholder="Enter your name" value="Reshaped" startSlot={<Placeholder h={20}/>}/>
-		</Example.Item>
-		<Example.Item title={["endSlot", "vertical and horizontal padding aligned"]}>
-			<TextField name="Name" placeholder="Enter your name" value="Reshaped" endSlot={<Button icon={IconZap} size="small" onClick={() => { }} attributes={{ "aria-label": "Action" }}/>}/>
-		</Example.Item>
-		<Example.Item title="multiline wrap">
-			<TextField name="Name" placeholder="Enter your name" value="Reshaped" startSlot={[...Array(10).keys()].map((i) => (<Badge size="small" key={i}>
-						Item {i + 1}
-					</Badge>))} multiline/>
-		</Example.Item>
-	</Example>);
-export const formControl = () => (<Example>
-		<Example.Item title="with helper">
-			<FormControl>
-				<FormControl.Label>Name</FormControl.Label>
-				<TextField name="name" placeholder="Enter your name"/>
-				<FormControl.Helper>Helper</FormControl.Helper>
-				<FormControl.Error>This field is required</FormControl.Error>
-			</FormControl>
-		</Example.Item>
-		<Example.Item title="with error">
-			<FormControl hasError>
-				<FormControl.Label>Name</FormControl.Label>
-				<TextField name="name" placeholder="Enter your name"/>
-				<FormControl.Error>This field is required</FormControl.Error>
-			</FormControl>
-		</Example.Item>
-	</Example>);
-export const aligner = () => (<Example>
-		<Example.Item title="aligner">
-			<View gap={2}>
-				<Text variant="featured-2">What problem are you trying to solve?</Text>
-				<TextField.Aligner>
-					<TextField variant="headless" placeholder="Try something like 'I have a job'" name="description"/>
-				</TextField.Aligner>
-				<View.Item>
-					<Button>Next</Button>
-				</View.Item>
-			</View>
-		</Example.Item>
-	</Example>);
+			<Example.Item title={["responsive size", "[s] xlarge", "[m+] medium"]}>
+				<TextField name="Name" placeholder="Enter your name" size={{ s: "xlarge", m: "medium" }} icon={IconZap}/>
+			</Example.Item>
+		</Example>),
+};
+export const aligner = {
+    name: "aligner",
+    render: () => (<Example>
+			<Example.Item title="aligner">
+				<View gap={2}>
+					<Text variant="featured-2">What problem are you trying to solve?</Text>
+					<TextField.Aligner>
+						<TextField variant="headless" placeholder="Try something like 'I have a job'" name="description"/>
+					</TextField.Aligner>
+					<View.Item>
+						<Button>Next</Button>
+					</View.Item>
+				</View>
+			</Example.Item>
+		</Example>),
+};
+export const render = {
+    name: "base",
+    render: () => <TextField name="test-name" inputAttributes={{ "aria-label": "Label" }}/>,
+    play: async ({ canvas }) => {
+        const input = canvas.getByRole("textbox");
+        expect(input).toHaveAttribute("name", "test-name");
+        expect(input).toHaveAccessibleName("Label");
+    },
+};
+export const placeholder = {
+    name: "placeholder",
+    render: () => (<TextField name="test-name" placeholder="Placeholder" inputAttributes={{ "aria-label": "Label" }}/>),
+    play: async ({ canvas }) => {
+        const input = canvas.getByRole("textbox");
+        expect(input).toHaveValue("");
+        expect(input).toHaveAttribute("placeholder", "Placeholder");
+    },
+};
+export const id = {
+    name: "id",
+    render: () => (<TextField name="test-name" id="test-id" inputAttributes={{ "aria-label": "Label" }}/>),
+    play: async ({ canvas }) => {
+        const input = canvas.getByRole("textbox");
+        expect(input).toHaveAttribute("id", "test-id");
+    },
+};
+export const disabled = {
+    name: "disabled",
+    render: () => <TextField name="test-name" disabled inputAttributes={{ "aria-label": "Label" }}/>,
+    play: async ({ canvas }) => {
+        const input = canvas.getByRole("textbox");
+        expect(input).toBeDisabled();
+    },
+};
+export const defaultValue = {
+    name: "defaultValue, uncontrolled",
+    args: {
+        handleChange: fn(),
+    },
+    render: (args) => (<TextField name="test-name" defaultValue="value" onChange={args.handleChange} inputAttributes={{ "aria-label": "Label" }}/>),
+    play: async ({ canvas, args }) => {
+        const input = canvas.getByRole("textbox");
+        expect(input).toHaveValue("value");
+        input.focus();
+        await userEvent.keyboard("2");
+        expect(args.handleChange).toBeCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({
+            name: "test-name",
+            value: "value2",
+            event: expect.objectContaining({ target: input }),
+        });
+        expect(input).toHaveValue("value2");
+    },
+};
+export const value = {
+    name: "value, controlled",
+    args: {
+        handleChange: fn(),
+    },
+    render: (args) => (<TextField name="test-name" value="value" onChange={args.handleChange} inputAttributes={{ "aria-label": "Label" }}/>),
+    play: async ({ canvas, args }) => {
+        const input = canvas.getByRole("textbox");
+        expect(input).toHaveValue("value");
+        input.focus();
+        await userEvent.keyboard("2");
+        expect(args.handleChange).toBeCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({
+            name: "test-name",
+            value: "value2",
+            event: expect.objectContaining({ target: input }),
+        });
+        expect(input).toHaveValue("value");
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<TextField className="test-classname" attributes={{ id: "test-id" }} name="name" inputAttributes={{ id: "test-input-id", "aria-label": "Label" }}/>
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        const input = canvas.getByRole("textbox");
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+        expect(input).toHaveAttribute("id", "test-input-id");
+    },
+};
+export const formControl = {
+    name: "test: form control",
+    render: () => (<Example>
+			<Example.Item title="with helper">
+				<FormControl>
+					<FormControl.Label>Name</FormControl.Label>
+					<TextField name="name" placeholder="Enter your name"/>
+					<FormControl.Helper>Helper</FormControl.Helper>
+					<FormControl.Error>This field is required</FormControl.Error>
+				</FormControl>
+			</Example.Item>
+			<Example.Item title="with error">
+				<FormControl hasError>
+					<FormControl.Label>Name</FormControl.Label>
+					<TextField name="name" placeholder="Enter your name"/>
+					<FormControl.Error>This field is required</FormControl.Error>
+				</FormControl>
+			</Example.Item>
+		</Example>),
+};

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

@@ -1,5 +1,3 @@
-import { StoryObj } from "@storybook/react-vite";
-import { fn } from "storybook/test";
 declare const _default: {
     title: string;
     component: import("react").FC<import("./..").TextFieldProps> & {
@@ -15,14 +13,3 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const render: StoryObj;
-export declare const placeholder: StoryObj;
-export declare const id: StoryObj;
-export declare const disabled: StoryObj;
-export declare const defaultValue: StoryObj<{
-    handleChange: ReturnType<typeof fn>;
-}>;
-export declare const value: StoryObj<{
-    handleChange: ReturnType<typeof fn>;
-}>;
-export declare const className: StoryObj;

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

@@ -1,4 +1,3 @@
-import { expect, fn, userEvent } from "storybook/test";
 import TextField from "../index.js";
 export default {
     title: "Components/TextField/tests",
@@ -10,90 +9,3 @@ export default {
         chromatic: { disableSnapshot: true },
     },
 };
-export const render = {
-    name: "base",
-    render: () => <TextField name="test-name" inputAttributes={{ "aria-label": "Label" }}/>,
-    play: async ({ canvas }) => {
-        const input = canvas.getByRole("textbox");
-        expect(input).toHaveAttribute("name", "test-name");
-        expect(input).toHaveAccessibleName("Label");
-    },
-};
-export const placeholder = {
-    name: "placeholder",
-    render: () => (<TextField name="test-name" placeholder="Placeholder" inputAttributes={{ "aria-label": "Label" }}/>),
-    play: async ({ canvas }) => {
-        const input = canvas.getByRole("textbox");
-        expect(input).toHaveValue("");
-        expect(input).toHaveAttribute("placeholder", "Placeholder");
-    },
-};
-export const id = {
-    name: "id",
-    render: () => (<TextField name="test-name" id="test-id" inputAttributes={{ "aria-label": "Label" }}/>),
-    play: async ({ canvas }) => {
-        const input = canvas.getByRole("textbox");
-        expect(input).toHaveAttribute("id", "test-id");
-    },
-};
-export const disabled = {
-    name: "disabled",
-    render: () => <TextField name="test-name" disabled inputAttributes={{ "aria-label": "Label" }}/>,
-    play: async ({ canvas }) => {
-        const input = canvas.getByRole("textbox");
-        expect(input).toBeDisabled();
-    },
-};
-export const defaultValue = {
-    name: "defaultValue, uncontrolled",
-    args: {
-        handleChange: fn(),
-    },
-    render: (args) => (<TextField name="test-name" defaultValue="value" onChange={args.handleChange} inputAttributes={{ "aria-label": "Label" }}/>),
-    play: async ({ canvas, args }) => {
-        const input = canvas.getByRole("textbox");
-        expect(input).toHaveValue("value");
-        input.focus();
-        await userEvent.keyboard("2");
-        expect(args.handleChange).toBeCalledTimes(1);
-        expect(args.handleChange).toHaveBeenCalledWith({
-            name: "test-name",
-            value: "value2",
-            event: expect.objectContaining({ target: input }),
-        });
-        expect(input).toHaveValue("value2");
-    },
-};
-export const value = {
-    name: "value, controlled",
-    args: {
-        handleChange: fn(),
-    },
-    render: (args) => (<TextField name="test-name" value="value" onChange={args.handleChange} inputAttributes={{ "aria-label": "Label" }}/>),
-    play: async ({ canvas, args }) => {
-        const input = canvas.getByRole("textbox");
-        expect(input).toHaveValue("value");
-        input.focus();
-        await userEvent.keyboard("2");
-        expect(args.handleChange).toBeCalledTimes(1);
-        expect(args.handleChange).toHaveBeenCalledWith({
-            name: "test-name",
-            value: "value2",
-            event: expect.objectContaining({ target: input }),
-        });
-        expect(input).toHaveValue("value");
-    },
-};
-export const className = {
-    name: "className, attributes",
-    render: () => (<div data-testid="root">
-			<TextField className="test-classname" attributes={{ id: "test-id" }} name="name" inputAttributes={{ id: "test-input-id", "aria-label": "Label" }}/>
-		</div>),
-    play: async ({ canvas }) => {
-        const root = canvas.getByTestId("root").firstChild;
-        const input = canvas.getByRole("textbox");
-        expect(root).toHaveClass("test-classname");
-        expect(root).toHaveAttribute("id", "test-id");
-        expect(input).toHaveAttribute("id", "test-input-id");
-    },
-};

package/dist/components/Theme/Theme.module.css

@@ -1 +1 @@
-.root{--rs-focus-shadow:0 0 0 2px var(--rs-color-background-elevation-base),0 0 0 4px var(--rs-color-border-primary);--rs-focus-inset-shadow:inset 0 0 0 2px var(--rs-color-border-primary),inset 0 0 0 4px var(--rs-color-background-elevation-base);color:var(--rs-color-foreground-neutral);display:contents}
+.root{--rs-radius-circular:9999px;--rs-shadow-focus:0 0 0 2px var(--rs-color-background-elevation-base),0 0 0 4px var(--rs-color-border-primary);--rs-shadow-focus-inset:inset 0 0 0 2px var(--rs-color-border-primary),inset 0 0 0 4px var(--rs-color-background-elevation-base);color:var(--rs-color-foreground-neutral);display:contents}

package/dist/components/Timeline/Timeline.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
+import React, { isValidElement } from "react";
 import { classNames } from "../../utilities/props.js";
 import View from "../View/index.js";
 import s from "./Timeline.module.css";
@@ -13,7 +13,7 @@ const Timeline = (props) => {
     const { children, className, attributes } = props;
     const rootClassNames = classNames(className);
     return (_jsx("ul", { ...attributes, className: rootClassNames, children: React.Children.map(children, (child, index) => {
-            return React.isValidElement(child) && child.type === TimelineItem ? (child) : (_jsx(TimelineItem, { children: child }, index));
+            return isValidElement(child) && child.type === TimelineItem ? (child) : (_jsx(TimelineItem, { children: child }, index));
         }) }));
 };
 Timeline.Item = TimelineItem;

package/dist/components/Timeline/tests/Timeline.stories.d.ts

@@ -1,3 +1,4 @@
+import { StoryObj } from "@storybook/react-vite";
 declare const _default: {
     title: string;
     component: import("react").FC<import("./..").TimelineProps> & {
@@ -10,5 +11,12 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const base: () => import("react").JSX.Element;
-export declare const marker: () => import("react").JSX.Element;
+export declare const base: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const marker: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const className: StoryObj;

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

@@ -1,5 +1,6 @@
 import { Example, Placeholder } from "../../../utilities/storybook/index.js";
 import Timeline from "../index.js";
+import { expect } from "storybook/test";
 export default {
     title: "Components/Timeline",
     component: Timeline,
@@ -9,54 +10,77 @@ export default {
         },
     },
 };
-export const base = () => (<Example>
-		<Example.Item title="children passed directly">
-			<Timeline>
-				<Placeholder />
-				<Placeholder />
-				<Placeholder />
-			</Timeline>
-		</Example.Item>
-		<Example.Item title="children wrapped with Timeline.Item">
-			<Timeline>
-				<Timeline.Item>
-					<Placeholder />
-				</Timeline.Item>
-				<Timeline.Item>
+export const base = {
+    name: "base",
+    render: () => (<Example>
+			<Example.Item title="children passed directly">
+				<Timeline>
 					<Placeholder />
-				</Timeline.Item>
-				<Timeline.Item>
 					<Placeholder />
-				</Timeline.Item>
-			</Timeline>
-		</Example.Item>
-	</Example>);
-export const marker = () => (<Example>
-		<Example.Item title="slot">
-			<Timeline>
-				<Timeline.Item markerSlot={<Placeholder h="20px" w="20px"/>}>
 					<Placeholder />
-				</Timeline.Item>
-				<Timeline.Item markerSlot={<Placeholder h="20px" w="20px"/>}>
-					<Placeholder />
-				</Timeline.Item>
-				<Timeline.Item markerSlot={<Placeholder h="20px" w="20px"/>}>
-					<Placeholder />
-				</Timeline.Item>
-			</Timeline>
-		</Example.Item>
+				</Timeline>
+			</Example.Item>
+			<Example.Item title="children wrapped with Timeline.Item">
+				<Timeline>
+					<Timeline.Item>
+						<Placeholder />
+					</Timeline.Item>
+					<Timeline.Item>
+						<Placeholder />
+					</Timeline.Item>
+					<Timeline.Item>
+						<Placeholder />
+					</Timeline.Item>
+				</Timeline>
+			</Example.Item>
+		</Example>),
+};
+export const marker = {
+    name: "markerSlot",
+    render: () => (<Example>
+			<Example.Item title="slot">
+				<Timeline>
+					<Timeline.Item markerSlot={<Placeholder h="20px" w="20px"/>}>
+						<Placeholder />
+					</Timeline.Item>
+					<Timeline.Item markerSlot={<Placeholder h="20px" w="20px"/>}>
+						<Placeholder />
+					</Timeline.Item>
+					<Timeline.Item markerSlot={<Placeholder h="20px" w="20px"/>}>
+						<Placeholder />
+					</Timeline.Item>
+				</Timeline>
+			</Example.Item>
 
-		<Example.Item title="null marker">
-			<Timeline>
-				<Timeline.Item markerSlot={null}>
-					<Placeholder />
-				</Timeline.Item>
-				<Timeline.Item markerSlot={null}>
-					<Placeholder />
-				</Timeline.Item>
-				<Timeline.Item>
-					<Placeholder />
+			<Example.Item title="null marker">
+				<Timeline>
+					<Timeline.Item markerSlot={null}>
+						<Placeholder />
+					</Timeline.Item>
+					<Timeline.Item markerSlot={null}>
+						<Placeholder />
+					</Timeline.Item>
+				</Timeline>
+			</Example.Item>
+		</Example>),
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<Timeline className="test-classname" attributes={{ id: "test-id" }}>
+				<Timeline.Item className="test-item-classname" attributes={{ id: "test-item-id" }}>
+					Content
 				</Timeline.Item>
+				<Timeline.Item>Content</Timeline.Item>
 			</Timeline>
-		</Example.Item>
-	</Example>);
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        const items = canvas.getAllByRole("listitem");
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+        expect(items).toHaveLength(2);
+        expect(items[0]).toHaveClass("test-item-classname");
+        expect(items[0]).toHaveAttribute("id", "test-item-id");
+    },
+};

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

@@ -1,4 +1,3 @@
-import { StoryObj } from "@storybook/react-vite";
 declare const _default: {
     title: string;
     component: import("react").FC<import("./..").TimelineProps> & {
@@ -14,4 +13,3 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const className: StoryObj;