import { ButtonV2 } from "./button-v2" const docs = `### Overview Button v2 with three visual variants and two sizes. ### API - \`variant\`: "neutral" | "contrast" | "ghost". - \`size\`: "normal" | "large". - \`icon\`: Optional icon name. - 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/Button", id: "components-button-v2", component: ButtonV2, tags: ["autodocs"], parameters: { frameHeight: "240px", frameBackground: "#fff", docs: { description: { component: docs, }, }, }, args: { children: "Button", variant: "neutral", size: "normal", }, argTypes: { icon: { control: "text", }, variant: { control: "select", options: ["neutral", "contrast", "ghost"], }, size: { control: "select", options: ["normal", "large"], }, }, } export const Playground = {} export const Variants = { render: () => (

Neutral Contrast Ghost

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

Small Normal Large

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

Normal Large

), } export const AllStates = { render: () => { const variants = ["neutral", "contrast", "ghost"] as const const states = ["default", "hover", "pressed", "focus", "disabled"] as const const toTitleCase = (value: string) => value.charAt(0).toUpperCase() + value.slice(1) return (

{variants.map((variant) => (

{variant}

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

))}

) }, }