import { IconButtonV2 } from "./icon-button-v2" const docs = `### Overview Square icon-only button v2 with three visual variants and three sizes. ### API - \`icon\`: Icon name from the icon component. - \`variant\`: "neutral" | "contrast" | "ghost". - \`size\`: "small" | "normal" | "large". - \`iconSize\`: Optional explicit icon size override. - Inherits Kobalte Button props and native button attributes. ### States - default, hover, pressed, focus, disabled. - State selectors are available via pseudo-classes and \`[data-state]\`. ` export default { title: "UI V2/IconButton", id: "components-icon-button-v2", component: IconButtonV2, tags: ["autodocs"], parameters: { frameHeight: "300px", frameBackground: "#fff", docs: { description: { component: docs, }, }, }, args: { icon: "plus", variant: "neutral", size: "normal", }, argTypes: { icon: { control: "text", }, variant: { control: "select", options: ["neutral", "contrast", "ghost"], }, size: { control: "select", options: ["small", "normal", "large"], }, iconSize: { control: "select", options: ["small", "normal", "large"], }, }, } export const Playground = {} export const Variants = { render: () => (

), } export const Sizes = { render: () => (

), } export const AllStates = { render: () => { const variants = ["neutral", "contrast", "ghost"] as const const states = ["default", "hover", "pressed", "focus", "disabled"] as const return (

{variants.map((variant) => (

{variant}

{states.map((state) => ( ))}

))}

) }, }