@adyen/bento-mcp 0.1.4 → 0.2.1

package/CHANGELOG.md

@@ -1,5 +1,49 @@
 # Changelog
 
+## 0.2.1 (2026-04-01)
+
+This was a version bump only for mcp to align it with other projects, there were no code changes.
+
+
+## 0.2.0 (2026-04-01)
+
+### Features
+
+- updated `get_components` tool to also add the Types of each component with the payload ([12c4b6c53](https://github.com/Adyen/bento/commit/12c4b6c53))
+
+    Co-authored-by: Gerald Campbell <gerald.campbell@adyen.com>
+- added `get_utility_classes` tool to provide information about deprecated Bento utility classes ([59783fc88](https://github.com/Adyen/bento/commit/59783fc88))
+
+    Co-authored-by: Gerald Campbell <gerald.campbell@adyen.com>
+- added `get_deprecations` tool to provide information about Bento deprecations ([1c74ed2c0](https://github.com/Adyen/bento/commit/1c74ed2c0))
+
+    Co-authored-by: Gerald Campbell <gerald.campbell@adyen.com>
+- added `get_design_tokens` to provide information about Design System tokens ([a9d8ebbf0](https://github.com/Adyen/bento/commit/a9d8ebbf0))
+
+    Co-authored-by: Gerald Campbell <gerald.campbell@adyen.com>
+- added `get_icons` tool to list all the available 16x16 icons ([c8347def7](https://github.com/Adyen/bento/commit/c8347def7))
+
+    Co-authored-by: Gerald Campbell <gerald.campbell@adyen.com>
+- added `get_docs` tool to provide more docs to the LLM ([bac254ffd](https://github.com/Adyen/bento/commit/bac254ffd))
+
+    Co-authored-by: Gerald Campbell <gerald.campbell@adyen.com>
+- updated `get_all_components` tool to return a more accurate list of all available components ([beb2a5ea7](https://github.com/Adyen/bento/commit/beb2a5ea7))
+
+    Co-authored-by: Gerald Campbell <gerald.campbell@adyen.com>
+- added AI SKILL and command to install it through `@adyen/bento-mcp` cli command ([85f8f3c77](https://github.com/Adyen/bento/commit/85f8f3c77))
+
+    Co-authored-by: Gerald Campbell <gerald.campbell@adyen.com>
+
+### Miscellaneous Chores
+
+- updated `@adyen/bento-mcp` deps ([7681bc265](https://github.com/Adyen/bento/commit/7681bc265))
+
+### ❤️ Thank You
+
+- daver
+- Gerald Campbell
+
+
 ## 0.1.4 (2026-03-25)
 
 This was a version bump only for mcp to align it with other projects, there were no code changes.

package/README.md

@@ -6,11 +6,15 @@ models (LLMs) to interact with Bento's codebase, documentation, and components.
 ## Features
 
 - **Component Context**: Provide component definitions and usage guidelines to LLMs.
-- **Changelog Access**: (Planned) Query and retrieve information from the Bento changelog.
-- **Design Tokens**: (Planned) Access design token values and documentation.
+- **Improved Discovery**: Comprehensive component mapping including sub-components.
+- **Documentation Access**: Easy access to Tailwind and Getting Started guides.
+- **Deprecation Registry**: Query deprecated props and their alternatives.
+- **Bento AI Skill**: A strict implementation protocol for AI agents.
 
 ## Usage
 
+### 1. Register the MCP Server
+
 You can use this server as a tool with various AI assistant clients that support the Model Context Protocol.
 
 To configure the MCP server, add the following to your client's settings file:
@@ -38,6 +42,32 @@ can typically use:
 
 Once configured, you can invoke the tool by its name (`bento`).
 
+### 2. Add the Bento AI Skill
+
+The Bento AI Skill provides a "Verify & Interpret" implementation workflow. To add it to your agent:
+
+#### For Gemini CLI
+
+Run the following command in your project root:
+
+```bash
+npx @adyen/bento-mcp add-skill
+```
+
+#### For Other Agents (Claude, Cursor, etc.)
+
+We recommend using [@codemcp/agentskills](https://github.com/codemcp/agentskills):
+
+```bash
+# Install the CLI if you haven't already
+npm install -g @codemcp/agentskills-cli
+
+# Install the skill for your preferred agent
+npx @codemcp/agentskills-cli install --agent claude
+```
+
+---
+
 ## Available Tools
 
 The server exposes the following tools to the language model:
@@ -52,7 +82,22 @@ Retrieves the documentation, stories, and Vue implementation for a list of compo
 
 ### `get_all_components`
 
-Retrieves the main index file that exports all available Bento components. Use this to understand which components are
-available in the library.
+Retrieves the global component type definitions file that lists all available Bento components (including children). Use
+this to understand which components are available in the library.
+
+- **Returns:** The list of components available in Bento
+
+### `get_deprecations`
+
+Retrieves the Bento Deprecations Registry. Use this to find out which components, properties, or features are deprecated
+and what are the recommended alternatives.
+
+- **Returns:** A Markdown formatted string containing the registry of all deprecated features extracted from the source
+  code.
+
+### `get_docs`
+
+Retrieves specific documentation files for Bento.
 
-- **Returns:** The raw content of the `packages/vue2/src/index.ts` file.
+- **Arguments:** `docType` ('tailwind' | 'getting-started'): The type of documentation to retrieve.
+- **Returns:** The content of the requested documentation file.

package/SKILL.md

@@ -0,0 +1,138 @@
+---
+name: writing-bento-components
+description:
+    Strict implementation protocol for using Bento UI components correctly, with mandatory MCP analysis, setup guidance,
+    and explicit prohibition of manual discovery.
+---
+
+# Writing Bento Components (Refined Protocol)
+
+This skill provides a **"Verify & Interpret"** implementation workflow for Adyen's Bento design system. It establishes
+the Bento MCP as the **exclusive** discovery mechanism and strictly forbids manual inspection of `node_modules`.
+
+---
+
+## 🛠️ 1. The Bento MCP Protocol (Mandatory Workflow)
+
+### Step 0: Installation Guidance
+
+If you need to install or configure Bento in a project:
+
+- Execute `get_docs({ docType: 'getting-started' })` for the core Bento installation guide.
+- Execute `get_docs({ docType: 'tailwind' })` if Tailwind integration is required.
+
+### Step 1: Discovery (Check Existence)
+
+If you are unsure if a Bento component exists or what it is called:
+
+- **DO NOT** use `ls`, `grep`, or `read_file` on `node_modules`.
+- **DO** execute `get_all_components()` to retrieve the official registry of components.
+
+### Step 2: Inspection (Fetch Truth)
+
+Once the component name is known:
+
+- Execute `get_component(['component-name'])`.
+- **If tools are missing:** Provide the user with the setup instructions in Section 2.
+
+### Step 3: Constraints First (Read `.docs.mdx`)
+
+- **DO NOT SKIM.** Look specifically for **"Do not use"** and **"Guidelines"** sections.
+- **Rule:** If the docs say "text only," you MUST NOT use custom HTML in that slot.
+- **Rule:** If the docs say "max 2 buttons," you MUST NOT include 3.
+
+### Step 4: Syntax & Logic Validation
+
+- Check `.stories.ts` for correct icon imports from `@adyen/ui-assets-icons-16`.
+- Check `.vue` implementation for event names (e.g., `update:model-value`) and prop types.
+
+---
+
+## 🚫 ANTI-PATTERNS (Forbidden Actions)
+
+To prevent token waste and errors, the following actions are **STRICTLY FORBIDDEN**:
+
+- ❌ **Manual Discovery:** Running `ls -R node_modules/@adyen/bento-*` to find components.
+- ❌ **Type Inspection:** Trying to read `.d.ts` or `.js` files inside `node_modules`.
+- ❌ **Icon Guessing:** Searching the filesystem for icons instead of checking `.stories.ts`.
+- ❌ **Grep-Discovery:** Running `grep` on `node_modules` to find component exports.
+
+---
+
+## ⚙️ 2. Bento MCP Setup
+
+If the Bento MCP tools are not available in your environment, add the following configuration to your client:
+
+### Configuration JSON
+
+```json
+{
+    "mcpServers": {
+        "bento": {
+            "type": "stdio",
+            "command": "npx",
+            "args": ["@adyen/bento-mcp@latest"]
+        }
+    }
+}
+```
+
+### Client Configuration Paths
+
+- **Gemini:** `.gemini/settings.json` (Local) or `~/.gemini/settings.json` (Global)
+- **Windsurf:** `~/.codeium/windsurf/mcp_config.json`
+- **Claude Desktop:** `~/Library/Application Support/Claude/claude_desktop_config.json`
+
+---
+
+## 📚 3. Immutable Documentation (Tailwind & Tokens)
+
+The following rules are NOT available via the MCP and must be followed strictly:
+
+### Tailwind 4 "Golden Standard" Setup
+
+The `global.css` MUST follow this exact `@layer` order:
+
+```css
+@layer theme, base, components, utilities;
+@import 'tailwindcss/theme' layer(theme);
+@import 'tailwindcss/utilities' layer(utilities);
+@import '@adyen/bento-tailwind';
+@import '@adyen/bento-vue3/fonts.css';
+@import '@adyen/bento-vue3/styles/bento';
+@import '@adyen/bento-vue3/styles/utility';
+```
+
+### Design Token Semanticism
+
+- **Alias Tokens:** (e.g., `b-color-label-critical`) **USE THESE.** Accessible via CSS variables (e.g.,
+  `var(--b-color-label-critical)`).
+- **Definition Tokens:** (e.g., `b-color-red-600`) **DO NOT USE.**
+- **Utility Class Pattern:** `b-{cssProp}-{direction}-{spacerAlias}` (e.g., `b-margin-top-050`).
+
+---
+
+## 🎯 4. Tool Prioritization
+
+1.  **Primary Tool:** **Bento MCP** (`get_all_components`, `get_component`).
+2.  **Verification Tool:** **Production Code** (e.g., `wrapper.ts`).
+3.  **Last Resort Tool:** **Netlify Storybook** via Playwright. Use ONLY for complex **Templates** (Dashboard/DataGrid).
+
+---
+
+## 🩺 5. Bento Doctor (Troubleshooting)
+
+| Issue                   | Resolution                                                                                   |
+| :---------------------- | :------------------------------------------------------------------------------------------- |
+| **Missing Tools**       | Follow setup instructions in **Section 2**. **DO NOT** use `ls` or `grep` on `node_modules`. |
+| **Invisible Component** | Check package match (Vue 2 vs 3) and `index.ts` initialization.                              |
+| **Broken Layout**       | Verify `@layer` order and check for custom HTML in strict slots.                             |
+
+---
+
+## ✅ 6. Final Review Checklist
+
+- [ ] **Discovery Check:** Did I use `get_all_components()` instead of `ls node_modules`?
+- [ ] **Constraint Check:** Did I verify the "Do not use" section in the `.docs.mdx`?
+- [ ] **Literal Check:** Are all props using **string literals**?
+- [ ] **Layer Check:** Is my `global.css` using the correct Tailwind 4 `@layer` order?

package/bin/add-skill.js

@@ -0,0 +1,46 @@
+#!/usr/bin/env node
+
+import { copyFileSync, mkdirSync, existsSync } from 'node:fs';
+import { join, dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { execSync } from 'node:child_process';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+// In the installed package, SKILL.md will be in the same directory as the package.json
+// which is usually the parent of 'bin'
+const skillSource = join(__dirname, '../SKILL.md');
+
+if (!existsSync(skillSource)) {
+    console.error(`Error: Could not find skill file at ${skillSource}`);
+    process.exit(1);
+}
+
+console.log('🤖 Bento AI Skill Onboarding');
+console.log('----------------------------');
+
+// 1. Install for Gemini CLI (Local)
+const geminiPath = join(process.cwd(), '.gemini/skills/writing-bento-components/SKILL.md');
+try {
+    mkdirSync(dirname(geminiPath), { recursive: true });
+    copyFileSync(skillSource, geminiPath);
+    console.log(`✅ Gemini CLI: Added to ${geminiPath}`);
+} catch (error) {
+    // Silently continue if Gemini install fails (e.g. not in a project root)
+    console.log(`ℹ️ Gemini CLI: Skipping local installation (ensure you are in your project root)`);
+}
+
+// 2. Support for other agents via @codemcp/agentskills
+console.log('\n🌟 Multi-Agent Support (Claude, Cursor, etc.)');
+try {
+    // Check if agentskills is available
+    execSync('npx @codemcp/agentskills-cli --version', { stdio: 'ignore' });
+    console.log('You can use @codemcp/agentskills-cli to install this skill for other agents.');
+    console.log(`Run: npx @codemcp/agentskills-cli install --agent claude`);
+} catch (error) {
+    console.log('To use this skill with Claude, Cursor, or other agents, we recommend @codemcp/agentskills.');
+    console.log('1. Install: npm install -g @codemcp/agentskills-cli');
+    console.log('2. Configure: agentskills install --agent claude');
+}
+
+console.log('\nFor more information, see: https://github.com/adyen/bento/blob/main/packages/mcp/README.md');

package/dist/assets/components/accordion/accordion.types.ts

@@ -0,0 +1 @@
+export const BentoAccordionTitleSizeOptions = ['default', 'small'] as const; export type BentoAccordionTitleSize = (typeof BentoAccordionTitleSizeOptions)[number]; 

package/dist/assets/components/action-bar/action-bar.types.ts

@@ -0,0 +1 @@
+export const BentoActionBarVariantOptions = ['default', 'confirmation'] as const; export const BentoActionBarStateOptions = ['start', 'loading', 'success', 'fail'] as const; export type BentoActionBarVariant = (typeof BentoActionBarVariantOptions)[number]; export type BentoActionBarState = (typeof BentoActionBarStateOptions)[number]; 

package/dist/assets/components/ai-tag/ai-tag.types.ts

@@ -0,0 +1 @@
+import type { BentoButtonActionObject } from '@/components/button'; export interface BentoAiTagProps { /** * The team-provided headline describing the specific AI action. */ title: string; /** * The team-provided, plain-language explanation of what the AI did, why, or its limitations. */ description: string; /** * AI influenced value shown for context. */ influencedValue?: string; /** * Whether the AI tag popover is open. */ toggled?: boolean; /** * A call-to-action link or button for users to learn more, manage settings, or provide feedback. * The `title` property in the `BentoButtonActionObject` will be used as the button text. */ action?: BentoButtonActionObject; } 

package/dist/assets/components/alert/alert.types.ts

@@ -0,0 +1 @@
+/** * @deprecated for usage with properties since version 2.0. Use the string literal instead. */ export enum BentoAlertVariant { DEFAULT = 'default', TIP = 'tip', } /** * @deprecated for usage with properties since version 2.0. Use the string literal instead. */ export enum BentoAlertTypeOption { WARNING = 'warning', CRITICAL = 'critical', HIGHLIGHT = 'highlight', SUCCESS = 'success', } /** * @deprecated from version 2.0.0. Use "@close-alert" instead. */ export enum BentoAlertEvent { CLOSE_ALERT = 'close-alert', } 

package/dist/assets/components/anchor-scroller/anchor-scroller.types.ts

@@ -0,0 +1 @@
+import { type AnchorScrollerListItem, type AnchorScrollerListProps, } from './components/anchor-scroller-list/anchor-scroller-list.types'; export type BentoAnchorScrollerItem = AnchorScrollerListItem; export interface BentoAnchorScrollerProps { /** * The index of the currently active item. Can be used to programmatically set the * active item. * @default undefined */ activeIndex?: AnchorScrollerListProps['activeIndex']; /** * An array of objects to define the navigation links. Each object must have a * `label` (string), an `elementRef` (Vue ref to an element), and an optional * `disabled` (boolean) property. */ items: AnchorScrollerListProps['items']; } 

package/dist/assets/components/anchor-scroller/components/anchor-scroller-list/anchor-scroller-list.types.ts

@@ -0,0 +1 @@
+import { type VNodeRef } from 'vue/types/vnode'; export interface AnchorScrollerListItem { disabled?: boolean; elementRef: Exclude<VNodeRef, 'string'>; title: string; } export interface AnchorScrollerListProps { activeIndex?: number; items: Array<AnchorScrollerListItem>; scrollOffset?: number; } 

package/dist/assets/components/avatar/components/avatar-image/avatar-image.types.ts

@@ -0,0 +1 @@
+export enum BentoAvatarImageVariant { LARGE = 'large', SMALL = 'small', } export enum BentoAvatarImageColor { BLUE = 'blue', GREEN = 'green', RED = 'red', YELLOW = 'yellow', } 

package/dist/assets/components/button/button.types.ts

@@ -0,0 +1 @@
+/** * @deprecated for usage with properties since version 2.0. Use the string literal instead. */ export enum BentoButtonVariant { PRIMARY = 'primary', SECONDARY = 'secondary', TERTIARY = 'tertiary', TERTIARY_WITH_BACKGROUND = 'tertiary-with-background', } export enum BentoButtonPropClass { CONDENSED = 'condensed', DESTRUCTIVE = 'critical', DISABLED = 'disabled', ICON_ONLY = 'icon-only', INVERSE = 'inverse', } export interface BentoButtonProps { condensed?: boolean; critical?: boolean; disabled?: boolean; inverse?: boolean; variant?: BentoButtonVariant | `${BentoButtonVariant}`; type?: string; link?: object; } 

package/dist/assets/components/button/components/ai-button/ai-button.types.ts

@@ -0,0 +1 @@
+import { type BentoButtonProps } from '../../button.types'; export interface BentoAiButtonProps { /** * Reduces size of the button */ condensed?: BentoButtonProps['condensed']; /** * Disables button functionality */ disabled?: BentoButtonProps['disabled']; /** * Sets color set to inverse */ inverse?: BentoButtonProps['inverse']; /** * Object containing props passed on to the BentoLink component. * * @see BentoLink documentation for which properties you can pass. */ link?: BentoButtonProps['link']; /** * The default behavior of the button. * Possible values are: 'button', 'reset', 'submit' */ type?: BentoButtonProps['type']; } 

package/dist/assets/components/button/components/button-actions/button-actions.types.ts

@@ -0,0 +1 @@
+import type { BentoButtonProps } from '../../button.types'; import type { BentoMenuProps } from '@/components/menu/menu.types'; import type { BentoLoadingButtonState } from '../loading-button/loading-button.types'; import type { VueNodeElement } from '@/types/elements'; import type { OmitStrict } from '@/types/omit-strict'; import type { VNodeRef } from 'vue/types/vnode'; export type BentoButtonActionObject = BentoActionButton; // TODO: Update to Array<BentoButtonActionButton | BentoButtonActionMenuObject> in v2.0.0 export type BentoButtonActionsList = Array<BentoActionButton & BentoActionMenu>; export enum BentoButtonActionsLayoutBasic { BUTTONS_END = 'buttons-end', FILL_CONTAINER = 'fill-container', SPACE_BETWEEN = 'space-between', VERTICAL_STACK = 'vertical-stack', } export enum BentoButtonActionsLayoutExtended { BUTTONS_START = 'buttons-start', } /** * @deprecated for usage with properties since version 2.0. Use the string literal instead. */ export const BentoButtonActionsLayout = { ...BentoButtonActionsLayoutBasic, ...BentoButtonActionsLayoutExtended }; export type BentoButtonActionsLayout = BentoButtonActionsLayoutBasic | BentoButtonActionsLayoutExtended; export interface BentoButtonActionsProps { /** * List of actions that will be used to render the buttons. * First element in the list will be rendered as "primary". * All elements after the first will be rendered as "secondary". * * Each object in the list should have a `title`, an `event` and * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`. * * `title`: Button's text. * * `event`: Event triggered when clicking the Button. * * `icon` (optional): Vue Icon from the library `@adyen/ui-assets-icons-16`. * * @see BentoButton for a list of all the other props supported by each button action. * * ``` * [{ * title: 'Primary', * event: () => { ... }, * icon: FourPeopleIcon, * link: { * variant: 'default', * external: true, * to: 'https://www.adyen.com/' * }, * }, { * title: 'Secondary', * event: () => { ... } * disabled: true, * variant: 'secondary', * critical: true * }] * ``` */ actions: BentoButtonActionsList; /** * Sets the Button Actions to color scheme inverse */ inverse?: boolean; /** * Defines the layout in which the button actions is presented. * It can be one of: * * @values BUTTONS_START * @values BUTTONS_END * @values FILL_CONTAINER * @values SPACE_BETWEEN * @values VERTICAL_STACK */ layout?: string; } /** * Private */ /** * Base interface for the Button and Menu objects */ export interface BentoButtonActionBase { title: string; icon?: VueNodeElement; iconLeft?: VueNodeElement; iconRight?: VueNodeElement; /** * Provides a template ref to the underlying component instance. */ elementRef?: Exclude<VNodeRef, string>; } /** * Type for the Buttons passed as objects to Button Actions */ export interface BentoActionButton extends BentoButtonActionBase, BentoButtonProps { event?: (event: Event) => void; state?: BentoLoadingButtonState | `${BentoLoadingButtonState}`; iconOnly?: boolean; } /** * Type for the Menus passed as objects to Button Actions */ export type BentoActionMenu = BentoButtonActionBase & OmitStrict<BentoMenuProps, 'button' | 'data'> & Partial<Pick<BentoMenuProps, 'data'>>; 

package/dist/assets/components/button/components/loading-button/loading-button.types.ts

@@ -0,0 +1 @@
+export enum BentoLoadingButtonState { START = 'start', LOADING = 'loading', SUCCESS = 'success', FAIL = 'fail', } export type BentoLoadingButtonIconState = Partial<{ [key in BentoLoadingButtonState]: string }>; 

package/dist/assets/components/button/components/toggle-button/toggle.types.ts

@@ -0,0 +1 @@
+export type BentoToggleState = 'default' | 'toggled'; 

package/dist/assets/components/card/card.types.ts

@@ -0,0 +1 @@
+/** * @deprecated for usage with properties since version 2.0. Use the string literal instead. */ export enum BentoCardBackground { PRIMARY = 'primary', SECONDARY = 'secondary', } /** * @deprecated for usage with properties since version 2.0. Use the string literal instead. */ export enum BentoCardTitleSize { DEFAULT = 'default', SMALL = 'small', } 

package/dist/assets/components/checkbox/checkbox.types.ts

@@ -0,0 +1 @@
+import type { BentoTagProps } from '../tag/tag.types'; import { CheckboxInputState as BentoCheckboxState, type CheckboxInputType as BentoCheckboxType, type MultiCheckboxInputType as BentoMultiCheckboxType, } from '@/internal/checkbox-input/checkbox-input.types'; export { BentoCheckboxState, BentoCheckboxType, BentoMultiCheckboxType }; export enum BentoCheckboxEvent { UPDATE = 'update:model-value', INPUT = 'input', } export type BentoCheckboxTag = BentoTagProps; 

package/dist/assets/components/checkbox/components/checkbox-group/checkbox-group.types.ts

@@ -0,0 +1 @@
+import { type FormFieldEmits } from '../../../../types/form-field'; import type { BentoCheckboxTag } from '../../checkbox.types'; /** * @deprecated for usage with properties since version 2.0. Use the string literal instead. */ export enum BentoCheckboxGroupVariant { HORIZONTAL = 'horizontal', VERTICAL = 'vertical', } export interface BentoCheckboxGroupItem { value: string | number; label: string; description?: string; disabled?: boolean; hasError?: boolean; errorMessage?: string; readonly?: boolean; tag?: BentoCheckboxTag; } export type BentoCheckboxGroupItems = Array<BentoCheckboxGroupItem>; export type BentoCheckboxGroupEmits = FormFieldEmits<any>; 

package/dist/assets/components/chip/chip.types.ts

@@ -0,0 +1 @@
+export interface BentoChipProps { /** * The text content displayed within the chip. */ label: string; /** * If true, disables user interaction with the chip. */ disabled?: boolean; /** * If true, makes the chip's content readonly, preventing user modification. */ readonly?: boolean; /** * If true, displays the chip in an error state. */ error?: boolean; /** * If true, reduces the size of the chip. */ condensed?: boolean; /** * Limits the number of characters displayed in the chip. Additional characters will be truncated. */ characterLimit?: number; } 

package/dist/assets/components/code-snippet/code-snippet.types.ts

@@ -0,0 +1 @@
+/** * @deprecated for usage with properties since version 2.0. Use the string literal instead. */ export enum BentoCodeSnippetVariant { INLINE = 'inline', SINGLELINE = 'singleline', MULTILINE = 'multiline', } /** * @deprecated for usage with properties since version 2.0. Use the string literal instead. */ export enum BentoCodeSnippetSupportedLanguage { JSON = 'json', XML = 'xml', JAVA = 'java', JAVASCRIPT = 'javascript', PYTHON = 'python', CSV = 'csv', } export enum BentoCodeSnippetEvent { ACTION = 'action', CHANGE = 'change', } export interface BentoCodeSnippetProps { /** * Displays a button that when clicked will emit an action event * Leaves to the parent component the logic of what to do with it */ actionable?: boolean; /** * Displays a button that when clicked will emit a run event * Leaves to the parent component the logic of what to do with it */ actionableText?: string; /** * The code content */ content?: string; /** * Displays a button that can expand the codeblock into a modal to easily * view large blocks of code. */ expandable?: boolean; /** * Allows editing of the code-snippet content by the user */ editable?: boolean; /** * Language name for syntax highlighting rules */ lang?: BentoCodeSnippetSupportedLanguage | `${BentoCodeSnippetSupportedLanguage}`; /** * Label to show in the action-bar, describing the language */ langLabel?: string; /** * Toggles the loading indicator within the action bar */ loading?: boolean; /** * Defines the variant of code-snippet */ variant?: BentoCodeSnippetVariant | `${BentoCodeSnippetVariant}`; } 

package/dist/assets/components/country/country.types.ts

@@ -0,0 +1 @@
+/** * @deprecated for usage with properties since version 2.0. Use the string literal instead. */ export enum BentoCountryVariant { ISO = 'iso', NAME = 'name', PHONE_CODE = 'phone_code', CAPITAL = 'capital', /** deprecated Use any of the other BentoCountry variants instead OR BentoTypography component for custom text */ CUSTOM = 'custom', } export enum BentoCountryCode { BD = 'BD', BE = 'BE', BF = 'BF', BG = 'BG', BA = 'BA', BB = 'BB', WF = 'WF', BL = 'BL', BM = 'BM', BN = 'BN', BO = 'BO', BH = 'BH', BI = 'BI', BJ = 'BJ', BT = 'BT', JM = 'JM', BV = 'BV', BW = 'BW', WS = 'WS', BQ = 'BQ', BR = 'BR', BS = 'BS', JE = 'JE', BY = 'BY', BZ = 'BZ', RU = 'RU', RW = 'RW', RS = 'RS', TL = 'TL', RE = 'RE', TM = 'TM', TJ = 'TJ', RO = 'RO', TK = 'TK', GW = 'GW', GU = 'GU', GT = 'GT', GS = 'GS', GR = 'GR', GQ = 'GQ', GP = 'GP', JP = 'JP', GY = 'GY', GG = 'GG', GF = 'GF', GE = 'GE', GD = 'GD', GB = 'GB', GA = 'GA', SV = 'SV', GN = 'GN', GM = 'GM', GL = 'GL', GI = 'GI', GH = 'GH', OM = 'OM', TN = 'TN', JO = 'JO', HR = 'HR', HT = 'HT', HU = 'HU', HK = 'HK', HN = 'HN', HM = 'HM', VE = 'VE', PR = 'PR', PS = 'PS', PW = 'PW', PT = 'PT', SJ = 'SJ', PY = 'PY', IQ = 'IQ', PA = 'PA', PF = 'PF', PG = 'PG', PE = 'PE', PK = 'PK', PH = 'PH', PN = 'PN', PL = 'PL', PM = 'PM', ZM = 'ZM', EH = 'EH', EE = 'EE', EG = 'EG', ZA = 'ZA', EC = 'EC', IT = 'IT', VN = 'VN', SB = 'SB', ET = 'ET', SO = 'SO', ZW = 'ZW', SA = 'SA', ES = 'ES', ER = 'ER', ME = 'ME', MD = 'MD', MG = 'MG', MF = 'MF', MA = 'MA', MC = 'MC', UZ = 'UZ', MM = 'MM', ML = 'ML', MO = 'MO', MN = 'MN', MH = 'MH', MK = 'MK', MU = 'MU', MT = 'MT', MW = 'MW', MV = 'MV', MQ = 'MQ', MP = 'MP', MS = 'MS', MR = 'MR', IM = 'IM', UG = 'UG', TZ = 'TZ', MY = 'MY', MX = 'MX', IL = 'IL', FR = 'FR', IO = 'IO', SH = 'SH', FI = 'FI', FJ = 'FJ', FK = 'FK', FM = 'FM', FO = 'FO', NI = 'NI', NL = 'NL', NO = 'NO', NA = 'NA', VU = 'VU', NC = 'NC', NE = 'NE', NF = 'NF', NG = 'NG', NZ = 'NZ', NP = 'NP', NR = 'NR', NU = 'NU', CK = 'CK', XK = 'XK', CI = 'CI', CH = 'CH', CO = 'CO', CN = 'CN', CM = 'CM', CL = 'CL', CC = 'CC', CA = 'CA', CG = 'CG', CF = 'CF', CD = 'CD', CZ = 'CZ', CY = 'CY', CX = 'CX', CR = 'CR', CW = 'CW', CV = 'CV', CU = 'CU', SZ = 'SZ', SY = 'SY', SX = 'SX', KG = 'KG', KE = 'KE', SS = 'SS', SR = 'SR', KI = 'KI', KH = 'KH', KN = 'KN', KM = 'KM', ST = 'ST', SK = 'SK', KR = 'KR', SI = 'SI', KP = 'KP', KW = 'KW', SN = 'SN', SM = 'SM', SL = 'SL', SC = 'SC', KZ = 'KZ', KY = 'KY', SG = 'SG', SE = 'SE', SD = 'SD', DO = 'DO', DM = 'DM', DJ = 'DJ', DK = 'DK', VG = 'VG', DE = 'DE', YE = 'YE', DZ = 'DZ', US = 'US', UY = 'UY', YT = 'YT', UM = 'UM', LB = 'LB', LC = 'LC', LA = 'LA', TV = 'TV', TW = 'TW', TT = 'TT', TR = 'TR', LK = 'LK', LI = 'LI', LV = 'LV', TO = 'TO', LT = 'LT', LU = 'LU', LR = 'LR', LS = 'LS', TH = 'TH', TF = 'TF', TG = 'TG', TD = 'TD', TC = 'TC', LY = 'LY', VA = 'VA', VC = 'VC', AE = 'AE', AD = 'AD', AG = 'AG', AF = 'AF', AI = 'AI', VI = 'VI', IS = 'IS', IR = 'IR', AM = 'AM', AL = 'AL', AO = 'AO', AQ = 'AQ', AS = 'AS', AR = 'AR', AU = 'AU', AT = 'AT', AW = 'AW', IN = 'IN', AX = 'AX', AZ = 'AZ', IE = 'IE', ID = 'ID', UA = 'UA', QA = 'QA', MZ = 'MZ', UNKNOWN = 'ZZ', } export interface BentoCountryProps { /** * Two character country code ([ISO 3166-1 alpha-2 format](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2)). */ code?: BentoCountryCode | `${BentoCountryCode}`; /** * Custom label text. */ label?: string; /** * Which label variant to display. * @values iso, name, phone_code, capital */ variant?: BentoCountryVariant | `${BentoCountryVariant}`; } 

package/dist/assets/components/currency/currency.types.ts

@@ -0,0 +1 @@
+export interface BentoCurrencyProps { /** * Currency code based on the ISO 4217 standard */ currency?: BentoCurrencyISOCode | `${BentoCurrencyISOCode}`; /** * Disable the default typography for the component. Only use this when the component is inside another typography component. */ disableTypography?: boolean; /** * Accepts currency value in major units instead of minor ones */ majorUnits?: boolean; /** * Currency value to be formatted */ value?: number; /** * Determines how the currency symbol and negative values are displayed. * This is only applicable to certain countries such as `en-US`. * * - `'standard'`: Default format (e.g., `-1,234.56 USD`). * - `'accounting'`: Uses accounting conventions, such as wrapping negative numbers in parentheses (e.g., `(1,234.56) USD`). * * @default 'standard' */ currencySign?: Intl.NumberFormatOptions['currencySign']; } export enum BentoCurrencyISOCode { AED = 'AED', AFA = 'AFA', ALL = 'ALL', AMD = 'AMD', ANG = 'ANG', AOA = 'AOA', ARS = 'ARS', AUD = 'AUD', AWG = 'AWG', AZN = 'AZN', BAM = 'BAM', BBD = 'BBD', BDT = 'BDT', BEF = 'BEF', BGN = 'BGN', BHD = 'BHD', BIF = 'BIF', BMD = 'BMD', BND = 'BND', BOB = 'BOB', BRL = 'BRL', BSD = 'BSD', BTC = 'BTC', BTN = 'BTN', BWP = 'BWP', BYR = 'BYR', BZD = 'BZD', CAD = 'CAD', CDF = 'CDF', CHF = 'CHF', CLF = 'CLF', CLP = 'CLP', CNY = 'CNY', COP = 'COP', CRC = 'CRC', CUC = 'CUC', CVE = 'CVE', CZK = 'CZK', DEM = 'DEM', DJF = 'DJF', DKK = 'DKK', DOP = 'DOP', DZD = 'DZD', EEK = 'EEK', EGP = 'EGP', ERN = 'ERN', ETB = 'ETB', EUR = 'EUR', FJD = 'FJD', FKP = 'FKP', GBP = 'GBP', GEL = 'GEL', GHS = 'GHS', GIP = 'GIP', GMD = 'GMD', GNF = 'GNF', GRD = 'GRD', GTQ = 'GTQ', GYD = 'GYD', HKD = 'HKD', HNL = 'HNL', HRK = 'HRK', HTG = 'HTG', HUF = 'HUF', IDR = 'IDR', ILS = 'ILS', INR = 'INR', IQD = 'IQD', IRR = 'IRR', ISK = 'ISK', ITL = 'ITL', JMD = 'JMD', JOD = 'JOD', JPY = 'JPY', KES = 'KES', KGS = 'KGS', KHR = 'KHR', KMF = 'KMF', KPW = 'KPW', KRW = 'KRW', KWD = 'KWD', KYD = 'KYD', KZT = 'KZT', LAK = 'LAK', LBP = 'LBP', LKR = 'LKR', LRD = 'LRD', LSL = 'LSL', LTC = 'LTC', LTL = 'LTL', LVL = 'LVL', LYD = 'LYD', MAD = 'MAD', MDL = 'MDL', MGA = 'MGA', MKD = 'MKD', MMK = 'MMK', MNT = 'MNT', MOP = 'MOP', MRO = 'MRO', MRU = 'MRU', MUR = 'MUR', MVR = 'MVR', MWK = 'MWK', MXN = 'MXN', MYR = 'MYR', MZM = 'MZM', NAD = 'NAD', NGN = 'NGN', NIO = 'NIO', NOK = 'NOK', NPR = 'NPR', NZD = 'NZD', OMR = 'OMR', PAB = 'PAB', PEN = 'PEN', PGK = 'PGK', PHP = 'PHP', PKR = 'PKR', PLN = 'PLN', PYG = 'PYG', QAR = 'QAR', RON = 'RON', RSD = 'RSD', RUB = 'RUB', RWF = 'RWF', SAR = 'SAR', SBD = 'SBD', SCR = 'SCR', SDG = 'SDG', SEK = 'SEK', SGD = 'SGD', SHP = 'SHP', SKK = 'SKK', SLL = 'SLL', SOS = 'SOS', SRD = 'SRD', SSP = 'SSP', STD = 'STD', SVC = 'SVC', SYP = 'SYP', SZL = 'SZL', THB = 'THB', TJS = 'TJS', TMT = 'TMT', TND = 'TND', TOP = 'TOP', TRY = 'TRY', TTD = 'TTD', TWD = 'TWD', TZS = 'TZS', UAH = 'UAH', UGX = 'UGX', USD = 'USD', UYU = 'UYU', UZS = 'UZS', VEF = 'VEF', VND = 'VND', VUV = 'VUV', WST = 'WST', XAF = 'XAF', XCD = 'XCD', XDR = 'XDR', XOF = 'XOF', XPF = 'XPF', YER = 'YER', ZAR = 'ZAR', ZMK = 'ZMK', ZWL = 'ZWL', } 

package/dist/assets/components/dashed-underline/dashed-underline.types.ts

@@ -0,0 +1 @@
+import type { BentoTooltipPosition } from '../internal/tooltip/tooltip.types'; import type { BentoPopoverPositions } from '@/components/popover/popover.types'; import type { BentoTeleportProps } from '../internal/teleport/teleport.types'; export type BentoDashedUnderlineTeleport = BentoTeleportProps; export interface BentoDashedUnderlineProps { /** * Text showed in the popover on hover */ popoverText?: string; /** * Title showed in the popover on hover */ popoverTitle?: string; /** * Position the popover should take if space is available */ popoverPosition?: BentoPopoverPositions | `${BentoPopoverPositions}`; /** * The size of the popover */ popoverSize?: 'default' | 'fit-content' | 'large' | 'small'; /** * Teleports the component outside of the parent container into * the target "to" element */ teleport?: BentoDashedUnderlineTeleport; /** * Attaches a `BentoTooltip` if present. Text showed in the tooltip on hover. */ tooltipText?: string; /** * Position the tooltip should take if space is available. */ tooltipPosition?: BentoTooltipPosition | `${BentoTooltipPosition}`; } 

package/dist/assets/components/data-grid/components/data-grid-cell/data-grid-cell.types.ts

@@ -0,0 +1 @@
+import { type BentoColumn } from '../data-grid-columns/data-grid-columns.types'; export enum DataGridCellPropClass { ACTION_COL_NESTED_CONTENT_AND_SELECTION_ENABLED = 'action-col-nested-content-and-selection-enabled', ACTION_COL_NESTED_CONTENT_ENABLED = 'action-col-nested-content-enabled', ACTION_COL_SELECTION_ENABLED = 'action-col-selection-enabled', COLUMN_HOVERED = 'column-hovered', COLUMN_HOVERED_NO_BORDER_LEFT = 'column-hovered-no-border-left', COLUMN_HOVERED_NO_BORDER_RIGHT = 'column-hovered-no-border-right', CONDENSED = 'condensed', FROZEN = 'frozen', IS_COLUMN_REORDERING = 'is-column-re-ordering', IS_COLUMN_REORDERING_TARGET_LEFT = 'is-column-re-order-target-left', IS_COLUMN_REORDERING_TARGET_RIGHT = 'is-column-re-order-target-right', LAST_FROZEN_COLUMN_CELL = 'last-frozen-column-cell', NESTED_CONTENT_ENABLED = 'nested-content-toggle-enabled', NUMERIC = 'numeric', OVERFLOW_ELLIPSIS = 'overflow-ellipsis', PADDING_LEFT_UNSET = 'padding-left-unset', PADDING_RIGHT_UNSET = 'padding-right-unset', SLASHED_ZERO = 'slashed-zero', } export interface DataGridCellDragEvents { dragenter?: (e: DragEvent) => void; drop?: () => void; dragover?: (e: DragEvent) => void; } export type DataGridCellDragEventsForColumn = (column: BentoColumn) => { dragenter?: (e: DragEvent) => void; drop?: () => void; dragover?: (e: DragEvent) => void; }; export interface DataGridCellColumnSet { columnSet: Array<BentoColumn>; id: string; isFrozenColumns?: boolean; } export interface DataGridCellEvents extends DataGridCellDragEvents { keyup?: (event: KeyboardEvent) => void; keydown?: (event: KeyboardEvent) => void; mouseenter?: () => void; mouseleave?: (e: MouseEvent) => void; focus?: (e: FocusEvent) => void; focusout?: (e: FocusEvent) => void; } export type DataGridCellEventsForColumn = (column: BentoColumn) => DataGridCellEvents; 

package/dist/assets/components/data-grid/components/data-grid-cell-actions/data-grid-cell-actions.types.ts

@@ -0,0 +1 @@
+import type { BentoButtonActionObject } from '@/components/button/components/button-actions/button-actions.types'; import type { BentoMenuItem } from '@/components/menu/components/menu-item/menu-item.types'; import type { BentoDatagridDataItem } from '@/components/data-grid/components/data-grid-row/data-grid-row.types'; import type { OmitStrict } from '@/types/omit-strict'; import { type BentoTooltipPosition } from '@/directives/tooltip/tooltip.types'; export type BentoColumnCellActionVariant = 'copy' | 'edit' | 'open' | 'more'; export type BentoColumnCellActionEvent = (rowDataItem: BentoDatagridDataItem, columnKey: string) => void; export type BentoColumnCellActionMenuItem = { /** * @deprecated This property will be removed in version 2.0, please use `event` instead. */ handler?: BentoMenuItem['handler']; event?: BentoColumnCellActionEvent; } & OmitStrict<BentoMenuItem, 'handler'>; export type BentoColumnCellAction = OmitStrict< BentoButtonActionObject, 'variant' | 'event' | 'title' | 'icon' | 'state' > & { title?: string; event?: BentoColumnCellActionEvent; tooltipText?: string; tooltipPosition?: BentoTooltipPosition | `${BentoTooltipPosition}`; // Variant button properties isShort?: true; variant?: BentoColumnCellActionVariant; // Menu button properties menuData?: Array<BentoColumnCellActionMenuItem>; // Copy button properties getCopyData?: (rowDataItem: BentoDatagridDataItem, columnKey: string) => string; }; export type BentoColumnCellActions = Array<BentoColumnCellAction>; export type BentoColumnCellActionsByCellDataFn = ( rowDataItem: BentoDatagridDataItem, columnKey: string ) => BentoColumnCellActions; export type BentoColumnCellActionsProp = BentoColumnCellActions | BentoColumnCellActionsByCellDataFn; export type BentoDataGridRowActionsFn = (rowDataItem: BentoDatagridDataItem) => BentoColumnCellActions; export type BentoDataGridRowActionsProp = BentoColumnCellActions | BentoDataGridRowActionsFn; 

package/dist/assets/components/data-grid/components/data-grid-columns/data-grid-columns.types.ts

@@ -0,0 +1 @@
+import { type BentoColumnCellActionsProp } from '../data-grid-cell-actions/data-grid-cell-actions.types'; export enum BentoColumnOverflow { WRAP = 'wrap', ELLIPSIS = 'ellipsis', } export interface BentoColumn { field: string; label: string; width?: number; autoWidth?: boolean; minWidth?: number; flex?: number; sortable?: boolean; numeric?: boolean; infoIconTooltip?: string; padding?: { left?: boolean; right?: boolean; }; overflow?: BentoColumnOverflow; visible?: boolean; mandatory?: boolean; frozen?: boolean; cellActions?: BentoColumnCellActionsProp; } /** * All the emit events provided by the DatagridColumns component */ export enum DatagridColumnsEvent { COLUMN_RESIZE = 'column-resize', COLUMN_RESIZING = 'column-resizing', SELECT_ALL_ROWS = 'select-all-rows', SELECT_ALL_ACROSS_PAGES = 'select-all-across-pages', SELECT_ALL_CURRENT_RESULTS = 'select-all-current-results', DESELECT_ALL = 'deselect-all', DESELECT_ALL_CURRENT_RESULTS = 'deselect-all-current-results', COLUMN_MOVE = 'column-move', COLUMN_UPDATE = 'column-update', COLUMN_MENU_OPEN = 'column-menu-open', COLUMN_MENU_CLOSE = 'column-menu-close', COLUMN_HOVER = 'column-hover', // Dragging events COLUMN_DRAG_START = 'column-dragstart', COLUMN_DRAG_ENTER = 'column-dragenter', COLUMN_DRAG_END = 'column-dragend', COLUMN_DROP = 'column-drop', } export interface DatagridColumnsHeaderReferences { [key: string]: HTMLDivElement | null; } /** * The Datagrid column dragging state. * @interface BentoDatagridDraggingColumnState * @field dragging - The column currently being dragged. * @field target - The column being dragged over during dragging another column. */ export interface BentoDatagridDraggingColumnState { dragging?: BentoColumn; dragToLeft?: boolean; target?: BentoColumn; } export type BentoDatagridColumnSelectionState = 'all' | 'page' | 'single' | 'unselected-page' | 'none'; 

package/dist/assets/components/data-grid/components/data-grid-config-settings/data-grid-config-settings.types.ts

@@ -0,0 +1 @@
+/** * All the emit events provided by the DatagridConfigSettings component */ export enum DatagridConfigSettingsEvent { UPDATE_CONDENSED = 'update:condensed', UPDATE_COLUMNS = 'update:columns', UPDATE_ZEBRA_ROWS = 'update:zebra-rows', } 

package/dist/assets/components/data-grid/components/data-grid-row/data-grid-row.types.ts

@@ -0,0 +1 @@
+export type BentoDatagridDataItemId = string | number; export interface BentoDatagridDataItem { id?: BentoDatagridDataItemId; children?: Array<BentoDatagridDataItem>; [fieldName: string]: unknown; } 

package/dist/assets/components/data-grid/components/data-grid-static-icon/data-grid-static-icon.types.ts

@@ -0,0 +1 @@
+export type BentoDataGridStaticIconVariant = 'checkmark' | 'warning' | 'error' | 'no-value' | 'cross'; 

package/dist/assets/components/data-grid/components/data-grid-summary-cell/data-grid-summary-cell.types.ts

@@ -0,0 +1 @@
+import type { BentoDashedUnderlineProps } from '../../../dashed-underline'; export interface BentoDataGridSummaryCellProps { /** * The summary text to display when there are multiple items. * e.g. "2 merchants" */ label: string; /** * An array of strings to display. If there is only one item, it will be displayed as plain text. * If there are multiple items, they will be displayed in a popover. */ items: Array<string>; /** * Props to pass to the underlying `BentoDashedUnderline` component, allowing for customization of the popover. */ dashedUnderline?: BentoDashedUnderlineProps; /** * An optional search term. If provided, any items in the popover that include this term will be highlighted. */ searchTerm?: string; /** * Overrides and displays text in a tooltip when the user hovers over the summary label. */ tooltipText?: string; } 

package/dist/assets/components/data-grid/components/data-grid-tag-with-text-cell/data-grid-tag-with-text-cell.types.ts

@@ -0,0 +1 @@
+import { type BentoTagProps } from '@/components/tag/tag.types'; export interface BentoDataGridTagWithTextCellProps { /** * The tag to display. {@see BentoTagProps} */ tag: BentoTagProps; /** * The text to display next to the tag. */ value: string; } 

package/dist/assets/components/data-grid/components/data-grid-trend-cell/data-grid-trend-cell.types.ts

@@ -0,0 +1 @@
+export type BentoDataGridTrendCellVariant = 'red' | 'green' | 'black'; export type BentoDataGridTrendCellDirection = 'up' | 'down' | 'none'; export interface BentoDataGridTrendCellProps { /** * The direction of the trend icon to display. */ direction?: BentoDataGridTrendCellDirection; /** * The color variant, affecting both the icon and text. */ variant?: BentoDataGridTrendCellVariant; /** * The numeric or string value to display. It will be formatted as a percentage. */ value: number | string; } 

package/dist/assets/components/data-grid/composables/use-calculate-column-width/use-calculate-column-width.types.ts

@@ -0,0 +1 @@
+import { type Ref } from 'vue'; import { type BentoColumn } from '../../data-grid.types'; // Internal types export type FlexColumnLookup = Record< BentoColumn['field'], { flex: number; computedWidth: number; frozen: boolean; } >; export interface CalculateColumnWidthOptions { allowColumnDragAndDrop?: Ref<boolean>; hasColumnPanel?: Ref<boolean>; hasNestedContent?: Ref<boolean>; hasNestedRows?: Ref<boolean>; hasSelectableColumn?: Ref<boolean>; hasSelectableAcrossPages?: Ref<boolean>; isDataGridTemplate?: boolean; } 

package/dist/assets/components/data-grid/composables/use-column-hovering/use-column-hovering.types.ts

@@ -0,0 +1 @@
+import type { ComputedRef } from 'vue'; import type { BentoColumn } from '../../data-grid.types'; export interface DatagridColumnHoveringState { hoveredOverColumnField: string; isSeparatorOffset: boolean; noBorderLeft: boolean; noBorderRight: boolean; } export interface DatagridColumnHoveringUseColumnHoveringReturnType { hoveredOverColumn: BentoColumn; hoveredOverColumnState: ComputedRef<DatagridColumnHoveringState>; } 

package/dist/assets/components/data-grid/composables/use-config-settings/use-config.settings.types.ts

@@ -0,0 +1 @@
+import type { BentoColumn } from '@/components/data-grid/components/data-grid-columns/data-grid-columns.types'; export interface DatagridConfigSettingsColumnSet { columnSet: Array<BentoColumn>; id: string; isFrozenColumns?: boolean; } export type DatagridConfigSettingsColumnSets = Array<DatagridConfigSettingsColumnSet>; 

package/dist/assets/components/data-grid/composables/use-keyboard-navigator/use-keyboard-navigator.types.ts

@@ -0,0 +1 @@
+import { EventKey } from '@/types/utils-events'; export enum BentoDatagridNavigationKey { ARROW_DOWN = EventKey.ARROW_DOWN, ARROW_UP = EventKey.ARROW_UP, ARROW_LEFT = EventKey.ARROW_LEFT, ARROW_RIGHT = EventKey.ARROW_RIGHT, PAGE_UP = EventKey.PAGE_UP, PAGE_DOWN = EventKey.PAGE_DOWN, END = EventKey.END, HOME = EventKey.HOME, } 

package/dist/assets/components/data-grid/data-grid.types.ts

@@ -0,0 +1 @@
+import type { BentoPaginationProps } from '@/components/pagination/pagination.types'; import type { BentoEmptyStateProps } from '@/components/empty-state/empty-state.types'; import type { BentoColumn } from './components/data-grid-columns/data-grid-columns.types'; import type { BentoDatagridDataItem, BentoDatagridDataItemId } from './components/data-grid-row/data-grid-row.types'; export { type BentoColumn, BentoColumnOverflow } from './components/data-grid-columns/data-grid-columns.types'; export type { BentoDatagridDataItem, BentoDatagridDataItemId } from './components/data-grid-row/data-grid-row.types'; export type { BentoDataGridRowActionsProp, BentoDataGridRowActionsFn, BentoColumnCellActionsProp, BentoColumnCellAction, } from './components/data-grid-cell-actions/data-grid-cell-actions.types'; export enum BentoDatagridStyleState { OUTLINE = 'outline', SCROLL = 'scroll', STICKY_FILTERS = 'sticky-filters', OVERFLOW_SHADOW_LEFT = 'overflow-shadow-left', OVERFLOW_SHADOW_RIGHT = 'overflow-shadow-right', NO_SPACING_TOP = 'no-spacing-top', FIT_CONTENT = 'fit-content', ZEBRA_ROWS = 'zebra-rows', } export enum BentoDatagridSortDirection { ASCENDING = 'asc', DESCENDING = 'desc', } export interface BentoDatagridSortByColumn { field: BentoColumn['field']; direction: BentoDatagridSortDirection; } export type BentoDatagridSelection = Array<BentoDatagridDataItemId>; export type BentoDatagridData = Array<BentoDatagridDataItem>; export type BentoDatagridGetDataItemIdFn = (item: BentoDatagridDataItem) => BentoDatagridDataItemId; export type BentoDatagridIsDataItemDisabledFn = (item: BentoDatagridDataItem) => boolean; export type BentoDatagridPaginationProps = BentoPaginationProps; export interface BentoColumnWidthOverridesLookup { [field: string]: { width: BentoColumn['width']; }; } export interface BentoDatagridAllItemsSelectedState { allItemsSelected: boolean; isIndeterminate: boolean; } export interface BentoDataGridVisibleRowsState { filtered: boolean; allRowsVisible: boolean; } export enum BentoDatagridEvent { CELL_FOCUS = 'cell-focus', COLUMNS = 'columns', COLUMN_RESIZE = 'column-resize', ITEMS_PAGE = 'items-page', NAVIGATE = 'navigate', NESTED_CONTENT_TOGGLED = 'nested-content-toggled', FILTER_SEARCH_INPUT = 'filter-search-input', FILTER_SEARCH_CLEAR = 'filter-search-clear', UPDATE_COLUMNS = 'update:columns', UPDATE_CONDENSED = 'update:condensed', UPDATE_FILTERS = 'update:filters', UPDATE_FILTER_VALUES = 'update:filter-values', UPDATE_FILTER_VALUES_OBJECT = 'update:filter-values-object', UPDATE_FILTER_SEARCH_TERM = 'update:filter-search-term', UPDATE_PAGINATION = 'update:pagination', UPDATE_SELECTION = 'update:selection', UPDATE_SHOW_MORE = 'update:show-more', UPDATE_SORT_BY = 'update:sort-by', UPDATE_ZEBRA_ROWS = 'update:zebra-rows', ROW_CLICK = 'row-click', SELECT = 'select', SELECT_ALL_ACROSS_PAGES = 'select-all-across-pages', SELECT_ALL_CURRENT_RESULTS = 'select-all-current-results', DESELECT_ALL_CURRENT_RESULTS = 'deselect-all-current-results', SORT = 'sort', } export enum BentoDatagridAriaSortValue { ASCENDING = 'ascending', DESCENDING = 'descending', NONE = 'none', } export type BentoDatagridEmptyStateProps = BentoEmptyStateProps; export type BentoDatagridShouldShowNestedContentFn = (item: BentoDatagridDataItem) => boolean; export type BentoDatagridShouldShowNestedRowsFn = (item: BentoDatagridDataItem) => boolean; 

package/dist/assets/components/date/date.types.ts

@@ -0,0 +1 @@
+export enum BentoDateFormat { // MONTH SHORT_MONTH = 'LLL', // Jun // DAY DAY_OF_MONTH = 'd', // 1, 2, ..., 31, LONG_WEEKDAY = 'EEEE', // Friday // TIME SHORT_TIME_WITH_PERIOD = `h:mm aa`, // 2:44 PM SHORT_TIME_WITHOUT_PERIOD = 'H:mm', // 14:45 EXACT_TIME_WITH_PERIOD = 'h:mm:ss aa', // 2:05:11 PM EXACT_TIME_WITHOUT_PERIOD = 'H:mm:ss', // 14:05:11 // DATE LONG_DATE = 'LLLL dd, yyyy', // June 30, 2023 SHORT_DATE = 'LLL dd, yyyy', // Jun 30, 2023 FULL_DATE_EXACT_TIME_WITH_PERIOD = `${SHORT_DATE}, h:mm:ss aa`, // June 30, 2023, 2:54:10 PM FULL_DATE_EXACT_TIME_WITHOUT_PERIOD = `${SHORT_DATE}, H:mm:ss`, // June 30, 2023, 14:54:42 FULL_DATE_EXACT_TIME_WITH_TIMEZONE_AND_PERIOD = `${SHORT_DATE}, h:mm:ss aa O`, // June 30, 2023, 2:56:07 PM GMT+2 FULL_DATE_EXACT_TIME_WITH_TIMEZONE_AND_WITHOUT_PERIOD = `${SHORT_DATE}, H:mm:ss O`, // June 30, 2023, 14:56:28 GMT+2 FULL_DATE_TIME_WITH_PERIOD = `${SHORT_DATE}, h:mm aa`, // Jun 30, 2023, 2:48 PM FULL_DATE_TIME_WITH_TIMEZONE_AND_PERIOD = `${SHORT_DATE}, h:mm aa O`, // Jun 30, 2023, 2:44 PM GMT+2 FULL_DATE_TIME_WITHOUT_PERIOD = `${SHORT_DATE}, H:mm`, // Jun 30, 2023, 14:48 FULL_DATE_TIME_WITH_TIMEZONE_AND_WITHOUT_PERIOD = `${SHORT_DATE}, H:mm O`, // Jun 30, 2023, 14:43 GMT+2 } export interface BentoDateProps { /** * The date to format. The data can be supplied as: * - a Date object. * - a number of milliseconds elapsed since the epoch. * - a date string e.g. '2023-07-31T10:55:22+02:00'. */ date?: Date | number | string | null; /** * The string format of the date to be displayed */ format?: BentoDateFormat | `${BentoDateFormat}`; /** * Disable the default typography for the component. Only use this when the component is inside another typography */ disableTypography?: boolean; } 

package/dist/assets/components/date-picker/composables/use-date-picker-single-calendar-text.types.ts

@@ -0,0 +1 @@
+import { type ComputedRef, type Ref } from 'vue'; export interface UseDateDisplayTextProps<T> { datePickerValue: Ref<T>; isDateIncorrect: Ref<boolean>; isMonthVariant?: Ref<boolean>; placeholder?: Ref<string>; } export type UseDateDisplayText<T> = (props: UseDateDisplayTextProps<T>) => { // Values dateDisplayValue: ComputedRef<string>; textInputValue: Ref<string>; // Methods formatTextInputDisplayValue: (dateToFormat?: Date) => void; }; 

package/dist/assets/components/date-picker/date-picker.types.ts

@@ -0,0 +1 @@
+import type { FormField, FormFieldEmits } from '../../types/form-field'; import { CalendarFirstDayOfWeek as BentoDatePickerFirstDayOfWeek, type CalendarIsDateDisabled as BentoDatePickerIsDateDisabled, type CalendarSingleDateValue as BentoDatePickerValue, CalendarVariant as BentoDatePickerVariant, } from '@/internal'; export { BentoDatePickerFirstDayOfWeek, type BentoDatePickerIsDateDisabled, type BentoDatePickerValue, BentoDatePickerVariant, }; /** * @deprecated since version 2.0. This enum is deprecated. Use the event name as a string literal instead. */ export enum BentoDatePickerEvent { INPUT = 'input', } export type BentoDatePickerEmits = FormFieldEmits<BentoDatePickerValue>; export interface BentoDatePickerProps extends FormField { /** * Default start date for the calendar pane. * Expected format: YYYY-MM-DD * @default null */ defaultDisplayMonth?: string | null; /** * Allows you to set the first day of the week. 0 is sunday, 1 is monday, 6 is saturday * @default undefined */ firstDayOfWeek?: BentoDatePickerFirstDayOfWeek; /** * Indicate if a date should be disabled or not */ isDateDisabled?: BentoDatePickerIsDateDisabled; /** * Sets a minimum limit for selectable dates - dates before `min` will not be selectable * @default null */ min?: Date | null; /** * Sets a maximum limit for selectable dates - dates after `max` will not be selectable * @default null */ max?: Date | null; /** * Selected date * * @default null */ modelValue?: BentoDatePickerValue | null; /** * Selected date * * @deprecated for usage with properties since version 2.0. Use `v-model` or `model-value` instead. * * @default null */ value?: BentoDatePickerValue | null; /** * The type of calendar to display. Defaults to showing days. */ variant?: `${BentoDatePickerVariant}`; } 

package/dist/assets/components/date-range-picker/components/date-range-picker-calendar/date-range-picker-calendar.types.ts

@@ -0,0 +1 @@
+import { type CalendarGranularityType } from '@/internal/calendar/calendar.types'; export interface DateRangePickerCalendarFormData { startDate: string; endDate: string; startTime?: string; endTime?: string; granularity?: CalendarGranularityType; } export enum DateRangePickerCalendarEvent { CUSTOM_RANGE = 'custom-range', INPUT = 'input', ERROR = 'error', FORM_DATE = 'form-date', START_DATE_SELECTED = 'start-date-selected', } export interface DateRangePickerCalendarRangeSelectorItem { label: string; value: string; data: { startDate: Date; endDate?: Date; granularity?: CalendarGranularityType; isRelativeToNow?: boolean; timeDifference?: number; }; } export type DateRangePickerCalendarRangeSelectorItems = Array<DateRangePickerCalendarRangeSelectorItem>; 

package/dist/assets/components/date-range-picker/composables/use-date-range-picker-calendar-text.types.ts

@@ -0,0 +1 @@
+import { type ComputedRef, type Ref } from 'vue'; import { type DateRangePickerCalendarFormData, type DateRangePickerCalendarRangeSelectorItems, } from '../components/date-range-picker-calendar/date-range-picker-calendar.types'; export interface UseDateDisplayTextProps<T> { datePickerValue: Ref<T>; isDateIncorrect: Ref<boolean>; quickSelectRanges: Ref<DateRangePickerCalendarRangeSelectorItems>; isMonthVariant?: Ref<boolean>; withTimeInput: ComputedRef<boolean>; placeholder?: Ref<string>; } export type UseDateDisplayText<T> = (props: UseDateDisplayTextProps<T>) => { // Values dateDisplayValue: ComputedRef<string>; textInputDisplayValue: DateRangePickerCalendarFormData; // Methods formatTextInputDisplayValue: () => void; }; 

package/dist/assets/components/date-range-picker/composables/use-granularity-memory.types.ts

@@ -0,0 +1 @@
+import type { CalendarGranularityType } from '../../internal/calendar/calendar.types'; export type UseGranularityMemory = () => { savedRanges: { daily: { startDate: Date; endDate: Date } | null; weekly: { startDate: Date; endDate: Date } | null; monthly: { startDate: Date; endDate: Date } | null; quarterly: { startDate: Date; endDate: Date } | null; }; saveRange: (type: CalendarGranularityType, range: { startDate: Date; endDate: Date }) => void; resetSavedRanges: () => void; }; 

package/dist/assets/components/date-range-picker/date-range-picker.types.ts

@@ -0,0 +1 @@
+import type { FormField, FormFieldEmits } from '../../types/form-field'; import { CalendarFirstDayOfWeek as BentoDateRangePickerFirstDayOfWeek, type CalendarGranularityConfig as BentoDateRangePickerGranularityConfig, type CalendarIsDateDisabled as BentoDateRangePickerIsDateDisabled, type CalendarRangeDateValue as BentoDateRangePickerValue, CalendarVariant as BentoDateRangePickerVariant, } from '@/internal/calendar/calendar.types'; import type { DateRangePickerCalendarRangeSelectorItems as BentoDateRangePickerQuickSelectRanges } from './components/date-range-picker-calendar/date-range-picker-calendar.types'; export { BentoDateRangePickerFirstDayOfWeek, type BentoDateRangePickerIsDateDisabled, type BentoDateRangePickerValue, type BentoDateRangePickerGranularityConfig, type BentoDateRangePickerQuickSelectRanges, BentoDateRangePickerVariant, }; /** * @deprecated for usage with properties since version 2.0. Use the string literal instead. */ export enum BentoDateRangePickerEvent { INPUT = 'input', } export type BentoDateRangePickerEmits = FormFieldEmits<any>; export interface BentoDateRangePickerProps extends FormField { /** * Allows user to enter time values in the form * @default false */ allowTimeInput?: boolean; /** * Allows user to set the first day of the week. 0 is sunday, 1 is monday, 6 is saturday * @default undefined */ firstDayOfWeek?: BentoDateRangePickerFirstDayOfWeek | number; /** * A list of available granularities. * If present, the date picker will display a segmented control to change granularity. */ granularities?: Array<BentoDateRangePickerGranularityConfig>; /** * Indicate if a date should be disabled or not */ isDateDisabled?: BentoDateRangePickerIsDateDisabled; /** * Upon opening date range picker, end date's month will be pre-selected. * @default false */ showEndDateOnOpen?: boolean; /** * Enables the range selector. * If provided, must be an array that sets the custom range dropdown items. */ quickSelectRanges?: BentoDateRangePickerQuickSelectRanges; /** * Set a maximum number of dates to be selectable by the range. */ maxRange?: number; /** * Sets a minimum limit for selectable dates - dates before `min` will not be selectable */ min?: Date; /** * Sets a maximum limit for selectable dates - dates after `max` will not be selectable */ max?: Date; /** * Number of months rendered on pane */ numberOfMonths?: number; /** * Selected date */ modelValue?: BentoDateRangePickerValue | null; /** * Selected date * @deprecated for usage with properties since version 2.0. Use `v-model` or `model-value` instead. */ value?: BentoDateRangePickerValue | null; /** * The type of calendar to display. Defaults to showing days. */ variant?: `${BentoDateRangePickerVariant}`; /** * Enables the date picker selection to persist until it is explicitly applied. * Displays a set of buttons: Apply and Cancel. * @deprecated This will be the default behavior in v2.0.0. * @default false */ hasActions?: boolean; } 

package/dist/assets/components/divider/divider.types.ts

@@ -0,0 +1 @@
+/** * Private types */ export enum BentoDividerVariant { HORIZONTAL = 'horizontal', VERTICAL = 'vertical', } /** * Public types */ export interface BentoDividerProps { /** * Renders the divider in a horizontal or vertical variant */ variant?: `${BentoDividerVariant}`; } 

package/dist/assets/components/draggable-handle/draggable-handle.types.ts

@@ -0,0 +1 @@
+import { type BentoMenuProps } from '../menu/menu.types'; export interface BentoDraggableHandleProps { /** * Reduces the size of the handle * @default false */ condensed?: BentoMenuProps['button']['condensed']; /** * Allows to disable the menus individually * @default {} */ disabledMenus?: { bottom?: boolean; down?: boolean; left?: boolean; right?: boolean; top?: boolean; up?: boolean; }; /** * Title or label used to describe the element being dragged. * Used for accessibility. */ label: string; /** * Determines the set of directional actions available in the handle's context menu. * * - `'all-directions'`: Includes 'Move up', 'Move down', 'Move left', 'Move right', 'Move to top', and 'Move to bottom'. * - `'up-and-down'`: Includes 'Move up', 'Move down', 'Move to top', and 'Move to bottom'. * * @default 'up-and-down' */ variant?: 'all-directions' | 'up-and-down'; } 

package/dist/assets/components/dropdown/components/dropdown-base-textbox/dropdown-base-textbox.types.ts

@@ -0,0 +1 @@
+import { type PropType } from 'vue'; import { type Booleanish } from '@/types/prop-types'; // TODO: Change this to script setup + Typescript interface export const DropdownBaseTextboxProps = { /** * The number of additional items that have been selected in the dropdown. */ additionalItemsSelected: { type: [Number, String] as PropType<number | string>, default: 0 }, /** * Sets the possibility to type into the textbox */ dynamicFiltering: { type: Boolean, default: false, }, /** * Sets the aria-controls attribute on the textbox. This should correspond to the popover's id that the textbox triggers. */ ariaControls: { type: String, required: true, }, /** * Indicates whether the content the textbox triggers is visible or not. Needs to be set accordingly when the textbox is used and changed every time the popover is shown/hidden. */ ariaExpanded: { type: [String, Boolean] as PropType<Booleanish>, required: true, }, /** * Corresponds to the label's id that labels the textbox element. */ ariaLabelledby: { type: String, default: null, }, /** * Disables any textbox functionality */ disabled: { type: Boolean, default: false }, /** * Marks the textbox as invalid, rendering an error state */ isInvalid: { type: Boolean, default: false }, /** * Selected option's label */ displayValue: { type: String, default: null }, /** * Indicates if the dropdown is open so that * the respective event can be emitted */ open: { type: Boolean, default: false }, /** * The input value */ value: { type: String, default: '' }, /** * Custom debounce time. Default: 300 */ debounceTime: { type: Number, default: 300 }, }; export enum DropdownBaseTextboxState { DISABLED = 'disabled', READONLY = 'readonly', HAS_ITEMS = 'has-items', OPENED = 'opened', ERROR = 'error', } export enum DropdownBaseTextboxEvent { OPEN = 'dropdown-base-open', KEYDOWN = 'dropdown-base-keydown', CLOSE = 'dropdown-base-close', INPUT = 'dropdown-base-input', CLEAR = 'dropdown-base-clear', } export default DropdownBaseTextboxProps; 

package/dist/assets/components/dropdown/components/variants/dropdown-avatar/dropdown-avatar.types.ts

@@ -0,0 +1 @@
+import { type BentoListboxOptionItem } from '@/types/listbox'; import { type BentoDropdownProps } from '../../../dropdown.types'; export type BentoAvatarListboxOptionItem = Omit<BentoListboxOptionItem, 'data'> & { src?: string; }; export type BentoAvatarListboxOptions = Array<BentoAvatarListboxOptionItem>; export interface BentoDropdownAvatarProps extends BentoDropdownProps { /** * The option elements to populate the avatar dropdown with. * It must be an array of {@see BentoAvatarListboxOptions } * @property {string} value.label - Text to be displayed in the option. * @property {string | number} value.value - Value of the option. * @property {string} value.src - Image source of the avatar image. */ items?: BentoAvatarListboxOptions; } 

package/dist/assets/components/dropdown/components/variants/dropdown-country/dropdown-country.types.ts

@@ -0,0 +1 @@
+import { type BentoListboxOptionItem } from '@/types/listbox'; import { type OmitStrict } from '@/types/omit-strict'; import { type BentoCountryCode } from '@/components/country'; export type BentoCountryListboxOptionItem = OmitStrict<BentoListboxOptionItem, 'value' | 'label'> & { value: BentoCountryCode | `${BentoCountryCode}`; /** deprecated Use BentoDropdown component for custom labels */ label?: string; }; export type BentoCountryListboxOptions = Array<BentoCountryListboxOptionItem>; 

package/dist/assets/components/dropdown/components/variants/dropdown-currency/dropdown-currency.types.ts

@@ -0,0 +1 @@
+import { type BentoListboxOptionItem } from '@/types/listbox'; import { type OmitStrict } from '@/types/omit-strict'; import { type BentoCurrencyISOCode } from '@/components/currency'; import { type BentoDropdownProps } from '../../../dropdown.types'; export type BentoCurrencyListboxOptionItem = OmitStrict<BentoListboxOptionItem, 'value'> & { value: BentoCurrencyISOCode | `${BentoCurrencyISOCode}`; }; export type BentoCurrencyListboxOptions = Array<BentoCurrencyListboxOptionItem>; export interface BentoDropdownCurrencyProps extends BentoDropdownProps { /** * The option elements to populate the currency dropdown with. * It must be an array of {@see BentoCurrencyListboxOptions } * @property {string} value.label - Text to be displayed in the option * @property {BentoCurrencyISOCode} value.code - Currency ISO code of the option */ items?: BentoCurrencyListboxOptions; } 

package/dist/assets/components/dropdown/components/variants/dropdown-payment-method/dropdown-payment-method.types.ts

@@ -0,0 +1 @@
+import { type BentoListboxOptionItem } from '@/types/listbox'; import { type OmitStrict } from '@/types/omit-strict'; import { type BentoDropdownProps } from '../../../dropdown.types'; export type BentoPaymentMethodListboxOptionItem = OmitStrict<BentoListboxOptionItem, 'value'> & { value: string; }; export type BentoPaymentMethodListboxOptions = Array<BentoPaymentMethodListboxOptionItem>; export interface BentoDropdownPaymentMethodProps extends BentoDropdownProps { /** * The option elements to populate the payment method dropdown with. * It must be an array of {@see BentoPaymentMethodListboxOptions } * @property {string} value.label - Text to be displayed in the option * @property {string} value.value - Payment type code that translates to a payment icon name {@see https://adyen-ui-assets.netlify.app/?path=/story/packages-ui-assets-payment-method-icons--icons} */ items?: BentoPaymentMethodListboxOptions; } 

package/dist/assets/components/dropdown/components/variants/dropdown-tag/dropdown-tag.types.ts

@@ -0,0 +1 @@
+import { type BentoListboxOptionItem } from '@/types/listbox'; import { type OmitStrict } from '@/types/omit-strict'; import { type BentoTagVariant } from '../../../../tag'; import { type BentoDropdownProps } from '../../../dropdown.types'; export type BentoTagListboxOptionItem = OmitStrict<BentoListboxOptionItem, 'data'> & { variant: BentoTagVariant | `${BentoTagVariant}`; }; export type BentoTagListboxOptions = Array<BentoTagListboxOptionItem>; export interface BentoDropdownTagProps extends BentoDropdownProps { /** * The option elements to populate the tag dropdown with. * It must be an array of {@see BentoTagListboxOptions } * @property {string} value.label - Text to be displayed in the option * @property {string | number} value.value - Value of the option * @property {string} value.variant - The BentTag variant shown for the option. */ items?: BentoTagListboxOptions; } 

package/dist/assets/components/dropdown/composables/use-display-value.types.ts

@@ -0,0 +1 @@
+import { type BentoListboxOptions } from '@/types/listbox'; import { type Ref } from 'vue'; export interface UseDisplayValueOptions { items: Ref<BentoListboxOptions>; placeholder: Ref<string>; isMultiSelect: Ref<boolean>; selectedValues: Ref<BentoListboxOptions>; } 

package/dist/assets/components/dropdown/composables/use-keyboard-navigation.types.ts

@@ -0,0 +1 @@
+import { type ComputedRef, type Ref } from 'vue'; export interface UseTextboxKeyboardNavigationOptions { inputContainerRef: Ref; optionsContainerRef: Ref; selectedValueIndex: ComputedRef<number>; isDropdownOpen: Ref<boolean>; isDynamicFltering: Ref<boolean>; items: Ref<Array<HTMLDivElement>>; isMultiple: boolean; } export interface UseListboxKeyboardNavigationOptions { isDropdownOpen: Ref<boolean>; inputContainerRef: Ref; }