@workday/canvas-kit-mcp 16.1.4 → 16.1.5

package/dist/cli.js

@@ -18,7 +18,7 @@ import { z as z2 } from "zod";
 // package.json
 var package_default = {
   name: "@workday/canvas-kit-mcp",
-  version: "16.1.4",
+  version: "16.1.5",
   description: "MCP package for Canvas Kit",
   author: "Workday, Inc. (https://www.workday.com)",
   license: "Apache-2.0",
@@ -1685,6 +1685,13 @@ var stories_config_default = {
       mdxProse: "# Canvas Kit Card\n\nA Card is a preview that serves as an entry point to more detailed information. Card is a\npresentational [compound component](/get-started/for-developers/documentation/compound-components/)\nused as a building block for other components such as [Popup](/components/popups/popup/) and\n[Modal](/components/popups/modal/).\n\n[> Workday Design Reference](https://design.workday.com/components/containers/cards)\n\n## Installation\n\n```sh\nyarn add @workday/canvas-kit-react\n```\n\n## Usage\n\n### Basic Example\n\n`Card` includes a container component and `Card.Body` and `Card.Heading` subcomponents.\n```tsx\nimport React from 'react';\n\nimport {Card} from '@workday/canvas-kit-react/card';\n\nexport const Basic = () => {\n  return (\n    <Card>\n      <Card.Heading>Canvas Supreme</Card.Heading>\n      <Card.Body>\n        Our house special supreme pizza includes pepperoni, sausage, bell peppers, mushrooms,\n        onions, and oregano.\n      </Card.Body>\n    </Card>\n  );\n};\n```\n\n### Alt Example\n\nThe `alt` variant is designed for use on alternative page backgrounds (`system.color.bg.alt.default`). Use this variant to maintain proper visual hierarchy when placing components on colored backgrounds. While the default variant should be used on `system.color.bg.default` backgrounds, the `alt` variant ensures the component remains visually elevated on `system.color.bg.alt.default` backgrounds.\n```tsx\nimport React from 'react';\n\nimport {Card} from '@workday/canvas-kit-react/card';\nimport {createStyles} from '@workday/canvas-kit-styling';\nimport {system} from '@workday/canvas-tokens-web';\n\nconst styles = createStyles({\n  background: system.color.bg.alt.default,\n  padding: system.padding.md,\n});\n\nexport const Alt = () => {\n  return (\n    <div className={styles}>\n      <Card variant=\"alt\">\n        <Card.Heading>Canvas Supreme</Card.Heading>\n        <Card.Body>\n          Our house special supreme pizza includes pepperoni, sausage, bell peppers, mushrooms,\n          onions, and oregano.\n        </Card.Body>\n      </Card>\n    </div>\n  );\n};\n```\n\n### Tonal Example\n\nThe `tonal` variant adds a background color to the Card, creating a more prominent appearance while\nmaintaining the same internal spacing and structure. Use this variant when you need a card with a\ngrayish background to create visual separation from the page background.\n```tsx\nimport {Card} from '@workday/canvas-kit-react/card';\nimport {createStyles} from '@workday/canvas-kit-styling';\nimport {system} from '@workday/canvas-tokens-web';\n\nconst styles = createStyles({\n  background: system.color.bg.default,\n  padding: system.padding.md,\n});\n\nexport const Tonal = () => {\n  return (\n    <div className={styles}>\n      <Card variant=\"tonal\">\n        <Card.Heading>Canvas Supreme</Card.Heading>\n        <Card.Body>\n          Our house special supreme pizza includes pepperoni, sausage, bell peppers, mushrooms,\n          onions, and oregano.\n        </Card.Body>\n      </Card>\n    </div>\n  );\n};\n```\n\n### Custom Styles\n\nCard and its subcomponents support custom styling via the `cs` prop. For more information, check our\n[\"How To Customize Styles\"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).\n\n**Note:** The card uses the `background` css property to style the background color. If you want to override the background, you can use the `[cardStencil.vars.background]` css variable.\n\n## Stencils\n\nYou can also use `Card` stencils to extend styles for your own custom components. This allows you to\ncompose styles without using components directly. In the example below, we're extending `Card`\nstencils to create a custom `MenuCard` component.\n\nHere's an example of a `Card` with a reduced padding of `x3` (`0.75rem` or `12px`).\n\n## Component API\n\n",
       accessibilityProse: ""
     },
+    toolbar: {
+      title: "Components/Buttons/Toolbar",
+      storybookUrl: "https://workday.github.io/canvas-kit/?path=/docs/components-buttons-toolbar--docs",
+      mdxPath: "modules/react/button/stories/Toolbar.mdx",
+      mdxProse: "# Canvas Kit Toolbar\n\nCanvas Kit does not ship a Toolbar component. Build one by composing\n[`ToolbarIconButton`](?path=/docs/components-buttons--docs),\n[Select](?path=/docs/components-inputs-select--docs),\n[Tooltip](?path=/docs/components-popups-tooltip--docs), and\n[Dialog](?path=/docs/components-popups-dialog--docs) inside a group that uses the\n[collection system](?path=/docs/features-collections--docs) for keyboard navigation.\n\nThe example below follows the\n[W3C Toolbar pattern](https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/): one tab stop for the\ngroup, and arrow keys to move between controls.\n\n## Basic Example\n\nThe Text Formatting toolbar is a horizontal group of five controls:\n\n1. **Text Style** \u2014 a `Select` with Normal Text, Heading 1, Heading 2, and Heading 3. Normal Text\n   starts selected.\n2. **Bold, Italic, and Underline** \u2014 `ToolbarIconButton` toggles. `toggled` sets `aria-pressed`. The\n   example adds a brand border while a toggle is on, on top of the button's pressed background.\n3. **Insert Link** \u2014 a `ToolbarIconButton` used as `Dialog.Target`. The dialog is non-modal and\n   contains Link Text and URL fields. Focus moves to Link Text when it opens.\n\nEach control is the single child of a `Tooltip`. The default tooltip type is `label`, so the `title`\nbecomes that control's accessible name. Do not also set `aria-label` on the control.\n\nThe group itself is named with `aria-label=\"Text Formatting\"` on an element with `role=\"toolbar\"`.\n\nKeyboard movement comes from `useListModel` with `orientation=\"horizontal\"` and\n`navigation={navigationManager}`. `navigationManager` stops at the first and last control instead of\nwrapping. Each control registers with `useListItemRovingFocus` and `useListItemRegister`, which\nkeeps a single tab stop and moves it with the arrow keys. Give every control a stable `data-id`.\n\nThe Text Style `Select` has its own arrow-key behavior. Left and Right move through the toolbar only\nwhile its menu is closed. While the menu is open, Left and Right do nothing, and Home and End move\nwithin the menu.\n```tsx\nimport React from 'react';\n\nimport {\n  PrimaryButton,\n  ToolbarIconButton,\n  ToolbarIconButtonProps,\n} from '@workday/canvas-kit-react/button';\nimport {\n  navigationManager,\n  useListItemRegister,\n  useListItemRovingFocus,\n  useListModel,\n} from '@workday/canvas-kit-react/collection';\nimport {\n  composeHooks,\n  createContainer,\n  createSubcomponent,\n  useUniqueId,\n} from '@workday/canvas-kit-react/common';\nimport {Dialog, useDialogModel} from '@workday/canvas-kit-react/dialog';\nimport {FormField} from '@workday/canvas-kit-react/form-field';\nimport {Select, useSelectModel} from '@workday/canvas-kit-react/select';\nimport {TextInput} from '@workday/canvas-kit-react/text-input';\nimport {Tooltip} from '@workday/canvas-kit-react/tooltip';\nimport {CSProps, createStyles, handleCsProp} from '@workday/canvas-kit-styling';\nimport {boldIcon, italicsIcon, linkIcon, underlineIcon} from '@workday/canvas-system-icons-web';\nimport {system} from '@workday/canvas-tokens-web';\n\nconst textStyles = [\n  {id: 'normal', text: 'Normal Text'},\n  {id: 'heading-1', text: 'Heading 1'},\n  {id: 'heading-2', text: 'Heading 2'},\n  {id: 'heading-3', text: 'Heading 3'},\n];\n\nconst toolbarStyles = createStyles({\n  display: 'flex',\n  alignItems: 'center',\n  gap: system.gap.sm,\n  padding: system.padding.sm,\n});\n\nconst toggledToolbarButtonStyles = createStyles({\n  \"&[aria-pressed='true'], &[aria-pressed='true']:hover, &[aria-pressed='true']:active, &[aria-pressed='true']:focus-visible\":\n    {\n      borderColor: system.color.brand.border.primary,\n    },\n});\n\nconst useToolbarItem = composeHooks(useListItemRovingFocus, useListItemRegister);\n\nconst Toolbar = createContainer('div')({\n  displayName: 'TextFormattingToolbar',\n  modelHook: useListModel,\n})<CSProps>((elemProps, Element) => {\n  return (\n    <Element\n      {...handleCsProp(elemProps, toolbarStyles)}\n      role=\"toolbar\"\n      aria-label=\"Text Formatting\"\n    />\n  );\n});\n\nconst ToolbarButton = createSubcomponent(ToolbarIconButton)({\n  displayName: 'TextFormattingToolbar.Button',\n  modelHook: useListModel,\n  elemPropsHook: useToolbarItem,\n})<ToolbarIconButtonProps>((elemProps, Element) => {\n  return <Element {...elemProps} />;\n});\n\nconst TextStyleSelect = ({toolbarModel}: {toolbarModel: ReturnType<typeof useListModel>}) => {\n  const selectModel = useSelectModel({\n    items: textStyles,\n    initialSelectedIds: ['normal'],\n  });\n  const {onKeyDown: onToolbarKeyDown, ...toolbarItemProps} = useToolbarItem(toolbarModel, {\n    'data-id': 'text-style',\n  });\n\n  return (\n    <Select model={selectModel}>\n      <Tooltip title=\"Text Style\">\n        <Select.Input\n          {...toolbarItemProps}\n          onKeyDown={event => {\n            if (selectModel.state.visibility === 'hidden') {\n              onToolbarKeyDown(event);\n            }\n          }}\n        />\n      </Tooltip>\n      <Select.Popper>\n        <Select.Card>\n          <Select.List>{item => <Select.Item>{item.text}</Select.Item>}</Select.List>\n        </Select.Card>\n      </Select.Popper>\n    </Select>\n  );\n};\n\nexport const TextFormattingToolbar = () => {\n  const toolbarModel = useListModel({\n    orientation: 'horizontal',\n    navigation: navigationManager,\n  });\n  const linkButtonId = useUniqueId();\n  const linkTextRef = React.useRef<HTMLInputElement>(null);\n  const dialogModel = useDialogModel({initialFocusRef: linkTextRef});\n  const [formats, setFormats] = React.useState({\n    bold: false,\n    italic: false,\n    underline: false,\n  });\n\n  return (\n    <Toolbar model={toolbarModel}>\n      <TextStyleSelect toolbarModel={toolbarModel} />\n      <Tooltip title=\"Bold\">\n        <ToolbarButton\n          cs={toggledToolbarButtonStyles}\n          data-id=\"bold\"\n          icon={boldIcon}\n          toggled={formats.bold}\n          onClick={() => setFormats(formats => ({...formats, bold: !formats.bold}))}\n        />\n      </Tooltip>\n      <Tooltip title=\"Italic\">\n        <ToolbarButton\n          cs={toggledToolbarButtonStyles}\n          data-id=\"italic\"\n          icon={italicsIcon}\n          toggled={formats.italic}\n          onClick={() => setFormats(formats => ({...formats, italic: !formats.italic}))}\n        />\n      </Tooltip>\n      <Tooltip title=\"Underline\">\n        <ToolbarButton\n          cs={toggledToolbarButtonStyles}\n          data-id=\"underline\"\n          icon={underlineIcon}\n          toggled={formats.underline}\n          onClick={() => setFormats(formats => ({...formats, underline: !formats.underline}))}\n        />\n      </Tooltip>\n      <Dialog model={dialogModel}>\n        <Tooltip title=\"Insert Link\">\n          <Dialog.Target as={ToolbarButton} id={linkButtonId} data-id=\"link\" icon={linkIcon} />\n        </Tooltip>\n        <Dialog.Popper>\n          <Dialog.Card aria-labelledby={linkButtonId}>\n            <Dialog.Body>\n              <FormField>\n                <FormField.Label>Link Text</FormField.Label>\n                <FormField.Input as={TextInput} ref={linkTextRef} />\n              </FormField>\n              <FormField>\n                <FormField.Label>URL</FormField.Label>\n                <FormField.Input as={TextInput} type=\"url\" />\n              </FormField>\n            </Dialog.Body>\n            <Dialog.ButtonGroup>\n              <Dialog.CloseButton>Cancel</Dialog.CloseButton>\n              <Dialog.CloseButton as={PrimaryButton}>Apply</Dialog.CloseButton>\n            </Dialog.ButtonGroup>\n          </Dialog.Card>\n        </Dialog.Popper>\n      </Dialog>\n    </Toolbar>\n  );\n};\n```\n\n## Component API\n\n`ToolbarIconButton` is the icon button used inside the example. The toolbar container, roving tab\nstop, and link dialog are composed in the example. They are not separate exported components.\n\n## Specifications\n\n",
+      accessibilityProse: ""
+    },
     breadcrumbs: {
       title: "Components/Navigation/Breadcrumbs",
       storybookUrl: "https://workday.github.io/canvas-kit/?path=/docs/components-navigation-breadcrumbs--docs",