import { createSignal } from "solid-js" import { BasicToolV2 } from "./basic-tool-v2" const docs = `### Overview Compact collapsible tool row showing title, subtitle, args, and diff changes, with an expand/collapse chevron. ### API - \`BasicToolV2\` wraps Kobalte \`Collapsible\`. Pass \`open\`, \`defaultOpen\`, and \`onOpenChange\` for controlled/uncontrolled disclosure. - \`trigger\` accepts either a \`BasicToolV2TriggerTitle\` object (title, subtitle, args, changes) or arbitrary JSX. - When \`status\` is \`"pending"\` or \`"running"\`, subtitle/args/chevron hide and the title shows a shimmer animation. - Pass \`children\` for expandable detail content. ### Theming - Uses \`data-component="basic-tool-v2"\` and slot attributes; colors via \`--bt-*\` CSS variables. ` export default { title: "UI V2/BasicTool", id: "components-basic-tool-v2", component: BasicToolV2, tags: ["autodocs"], parameters: { frameBackground: "#fff", layout: "padded", docs: { description: { component: docs, }, }, }, } export const Default = { render: () => ( File content appears here. ), } export const Expanded = { render: () => ( File content appears here. ), } export const Pending = { render: () => ( ), } export const NoChildren = { render: () => ( ), } export const CustomTrigger = { render: () => ( Custom trigger content } > Expandable detail for custom trigger. ), } export const Controlled = { render: () => { const [open, setOpen] = createSignal(false) return (

Controlled content.

) }, }