// @ts-nocheck import * as mod from "./icon" import { create } from "../storybook/scaffold" const docs = `### Overview Inline icon renderer using the built-in OpenCode icon set. Use with \`Button\`, \`IconButton\`, and menu items. ### API - Required: \`name\` (icon key). - Optional: \`size\` (small | normal | medium | large). - Accepts standard SVG props. ### Variants and states - Size variants only. ### Behavior - Uses an internal SVG path map. ### Accessibility - Icons are aria-hidden by default; wrap with accessible text when needed. ### Theming/tokens - Uses \`data-component="icon"\` with size data attributes. ` const names = [ "align-right", "arrow-up", "arrow-left", "arrow-right", "archive", "bubble-5", "prompt", "brain", "bullet-list", "check-small", "chevron-down", "chevron-left", "chevron-right", "chevron-grabber-vertical", "chevron-double-right", "circle-x", "close", "close-small", "checklist", "console", "expand", "collapse", "code", "code-lines", "circle-ban-sign", "edit-small-2", "eye", "enter", "folder", "file-tree", "file-tree-active", "magnifying-glass", "plus-small", "plus", "new-session", "pencil-line", "mcp", "glasses", "magnifying-glass-menu", "window-cursor", "task", "stop", "layout-left", "layout-left-partial", "layout-left-full", "layout-right", "layout-right-partial", "layout-right-full", "square-arrow-top-right", "open-file", "speech-bubble", "comment", "folder-add-left", "github", "discord", "layout-bottom", "layout-bottom-partial", "layout-bottom-full", "dot-grid", "circle-check", "copy", "check", "photo", "share", "download", "menu", "server", "branch", "edit", "help", "settings-gear", "dash", "cloud-upload", "trash", "sliders", "keyboard", "selector", "arrow-down-to-line", "warning", "link", "providers", "models", ] const story = create({ title: "UI/Icon", mod, args: { name: "check" } }) export default { title: "UI/Icon", id: "components-icon", component: story.meta.component, tags: ["autodocs"], parameters: { docs: { description: { component: docs, }, }, }, argTypes: { name: { control: "select", options: names, }, size: { control: "select", options: ["small", "normal", "medium", "large"], }, }, } export const Basic = story.Basic export const Sizes = { render: () => (

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

{names.map((name) => (

{name}

))}

), }