@adyen/bento-mcp 0.1.3 → 0.2.1

package/CHANGELOG.md

@@ -1,5 +1,54 @@
 # 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.
+
+
 ## 0.1.3 (2026-03-18)
 
 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.docs.mdx

@@ -14,9 +14,9 @@ multiple items at the same time.
 
 Use when you want to enable user to perform single or bulk selection on data grid (or other components)
 
--   Selecting rows on data grid and performing single or bulk actions on selected rows
--   Selecting cards and and performing single or bulk actions on selected cards
--   Any other similar scenarios.
+- Selecting rows on data grid and performing single or bulk actions on selected rows
+- Selecting cards and and performing single or bulk actions on selected cards
+- Any other similar scenarios.
 
 ## Placement
 
@@ -74,6 +74,42 @@ The default variant should be used for any generic case, accepts all props.
 To be used to confirm changes in a page. Only takes the `itemCounter` prop, the `selectionLabel` will always be 'unsaved
 changes' and the `actions` are always 'Save' and 'Cancel'. It also has no close button.
 
+## State
+
+The Action Bar supports 4 states via the `state` prop:
+
+- `start`: default selection/actions view.
+- `loading`: shows a loading indicator and hides state action buttons.
+- `success`: shows success feedback and can optionally show an Undo button.
+- `fail`: shows failure feedback, always shows Cancel, and can optionally show Retry.
+
+### State label
+
+For non-`start` states, the component renders a `stateLabel` slot.
+
+- If the slot is provided, your custom content is rendered.
+- If the slot is not provided, the component falls back to built-in labels:
+    - `loading` → `Applying...`
+    - `success` → `Success!`
+    - `fail` → `Something went wrong`
+
+### State action buttons
+
+- Undo (`undo-action`) is shown in `success` only when `showUndoAction` is `true`.
+- Retry (`retry-action`) is shown in `fail` only when `showRetryAction` is `true`.
+- Cancel (`cancel-action`) is always shown in `fail`.
+
+These buttons only emit events; state transitions are controlled by the user.
+
+### Success state
+
+After showing a `success` message, use a `3s` timeout before deciding the next step.
+
+After the timeout, one of two things should be configured:
+
+- Close the action bar
+- Return to the action bar (`start` state) — this option should be available only for the bulk-actions variant.
+
 ## Modifiers
 
 ### Extra bottom spacing
@@ -100,4 +136,4 @@ the bottom (like sticky pagination) to be visible.
 
 ## Resources
 
--   [Figma link](https://www.figma.com/design/uLabwF3243jdMDsNSP7U9I/Bento---Components?node-id=23466-201772&t=fUgRFhiNubQnT2RN-0)
+- [Figma link](https://www.figma.com/design/uLabwF3243jdMDsNSP7U9I/Bento---Components?node-id=23466-201772&t=fUgRFhiNubQnT2RN-0)

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

@@ -1 +1 @@
-import { action } from '@storybook/addon-actions'; import { isVue2, ref } from 'vue-demi'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import BentoActionBar from './action-bar.vue'; import { BentoButton } from '@/components/button'; import type { Meta, StoryObj } from '@storybook/vue'; import BinIcon from '@adyen/ui-assets-icons-16/vue/bin'; import EditIcon from '@adyen/ui-assets-icons-16/vue/edit-1'; const meta: Meta = { title: 'Action bar', component: BentoActionBar, argTypes: { variant: { options: ['default', 'confirmation'], control: { type: 'select', }, }, }, parameters: { layout: 'fullscreen', }, }; export default meta; type Story = StoryObj<typeof BentoActionBar>; const DEFAULT_ACTIONS = [ { title: 'Assign to...', disabled: true, event: () => true, }, { title: 'Snooze', event: () => true, }, { title: 'Edit', icon: EditIcon, event: () => true, }, { title: 'Delete', critical: true, icon: BinIcon, event: () => true, }, { title: 'Extra option', event: () => true, }, ]; const DEFAULT_PROPS = { actions: DEFAULT_ACTIONS, selectionLabel: 'selected', itemCounter: 3 }; const defaultCode = ` <template> <bento-action-bar :actions="[ { title: 'Assign to...', event: () => true, }, { title: 'Snooze', event: () => true, }, { title: 'Edit', icon: EditIcon, event: () => true, }, { title: 'Delete', critical: true, icon: BinIcon, event: () => true, }, { title: 'Extra option', event: () => true, } ]" @close="closeAction" :item-counter="3" /> <script setup> const closeAction = () => { // unselect selected items and reset itemCounter } </script> </template>`; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoActionBar, BentoButton }, props: Object.keys(argTypes), template: ` <div style="height:140px"> <bento-button @click='toggleActionBar = !toggleActionBar'>Toggle action bar</bento-button> <bento-action-bar v-if='toggleActionBar' v-bind="args" @close="closeAction" @cancel="cancelAction" @save="saveAction" /> </div> `, setup(props) { const closeAction = () => action('close')(); const cancelAction = () => action('cancel')(); const saveAction = () => action('save')(); const toggleActionBar = ref(true); return { // Values args: isVue2 ? props : _args, toggleActionBar, // Events closeAction, cancelAction, saveAction, }; }, }), args: { ...DEFAULT_PROPS, }, parameters: storybookDocsParameter(defaultCode), }; 
+import { action } from '@storybook/addon-actions'; import { computed, ref, watch } from 'vue'; import { isVue2 } from 'vue-demi'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import BentoActionBar from './action-bar.vue'; import { BentoButton } from '@/components/button'; import type { Meta, StoryObj } from '@storybook/vue'; import BinIcon from '@adyen/ui-assets-icons-16/vue/bin'; import EditIcon from '@adyen/ui-assets-icons-16/vue/edit-1'; import { BentoActionBarStateOptions, BentoActionBarVariantOptions } from './action-bar.types.ts'; import ActionBarDefault from './__tests__/action-bar-default.vue?raw'; const meta: Meta = { title: 'Action bar', component: BentoActionBar, argTypes: { variant: { options: BentoActionBarVariantOptions, control: { type: 'select', }, }, state: { options: BentoActionBarStateOptions, control: { type: 'select', }, }, // Slots stateLabel: { description: 'Custom text for the action bar state label.', table: { type: { summary: 'VNode[]' }, }, control: { type: 'text' }, }, }, parameters: { layout: 'fullscreen', }, }; export default meta; type Story = StoryObj<typeof BentoActionBar>; const DEFAULT_ACTIONS = [ { title: 'Assign to...', disabled: true, event: () => true, }, { title: 'Snooze', event: () => true, }, { title: 'Edit', icon: EditIcon, event: () => true, }, { title: 'Delete', critical: true, icon: BinIcon, event: () => true, }, { title: 'Extra option', event: () => true, }, ]; const DEFAULT_PROPS = { actions: DEFAULT_ACTIONS, selectionLabel: 'selected', itemCounter: 3, variant: 'default', state: 'start', extraBottomSpacing: false, visibleActions: 4, }; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoActionBar, BentoButton }, props: Object.keys(argTypes), template: ` <div style="height:140px"> <bento-button @click='toggleActionBar = !toggleActionBar'>Toggle action bar</bento-button> <bento-action-bar v-if='toggleActionBar' v-bind="args" :actions="actions" @close="closeAction" @cancel="cancelAction" @save="saveAction" @retry-action="retryAction" @undo-action="undoAction" @cancel-action="cancelStateAction" :state="state" :show-undo-action="showUndoAction" > <template #stateLabel>{{ slotStateLabel }}</template> </bento-action-bar> </div> `, setup(props) { const args = isVue2 ? props : _args; const state = ref<string>(args.state); const operation = ref<'delete' | 'restore'>('delete'); const timeoutRef = ref<ReturnType<typeof setTimeout> | null>(null); const cancelAction = () => action('cancel')(); const saveAction = () => action('save')(); const toggleActionBar = ref(true); const closeAction = () => { action('close')(); toggleActionBar.value = false; }; const clearTimer = () => { if (timeoutRef.value) { clearTimeout(timeoutRef.value); timeoutRef.value = null; } }; const showSuccessAndReset = () => { state.value = 'success'; timeoutRef.value = setTimeout(() => { state.value = 'start'; operation.value = 'delete'; timeoutRef.value = null; }, 3000); }; const setLoading = (nextOperation: 'delete' | 'restore', callback: () => void) => { clearTimer(); state.value = 'loading'; operation.value = nextOperation; timeoutRef.value = setTimeout(() => { timeoutRef.value = null; callback(); }, 1000); }; const deleteAction = () => { setLoading('delete', () => { state.value = 'fail'; }); }; const retryAction = () => { setLoading('delete', showSuccessAndReset); action('retry-action')(); }; const undoAction = () => { setLoading('restore', showSuccessAndReset); action('undo-action')(); }; const cancelStateAction = () => { state.value = 'start'; operation.value = 'delete'; action('cancel-action')(); }; const actions = DEFAULT_ACTIONS.map(a => (a.title === 'Delete' ? { ...a, event: deleteAction } : a)); const showUndoAction = computed(() => args.showUndoAction && operation.value === 'delete'); const stateLabel = computed(() => { switch (state.value) { case 'loading': return operation.value === 'restore' ? 'Restoring...' : 'Deleting...'; case 'fail': return operation.value === 'restore' ? 'Could not restore the item. Please try again.' : 'Could not delete the item. Please try again.'; case 'success': return operation.value === 'restore' ? 'Item was restored' : 'Item was deleted.'; default: return ''; } }); const slotStateLabel = computed(() => args.stateLabel || stateLabel.value); watch( () => args.state, value => { state.value = value; if (value === 'start') { operation.value = 'delete'; } } ); return { // Values args, state, toggleActionBar, slotStateLabel, actions, showUndoAction, // Events closeAction, cancelAction, saveAction, deleteAction, retryAction, undoAction, cancelStateAction, }; }, }), args: { ...DEFAULT_PROPS, showUndoAction: true, showRetryAction: true, }, parameters: storybookDocsParameter(ActionBarDefault), }; 

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/action-bar/action-bar.vue

@@ -1 +1 @@
-<template> <Transition name="b-action-bar__animation" appear> <section class="b-action-bar" :class="conditionalClasses" :aria-label="t('actionBar')"> <div ref="actionBar" class="b-action-bar__container"> <div v-if="!isConfirmationVariant" class="b-action-bar__close-button"> <bento-button variant="tertiary" inverse :aria-label="t('close')" @click="emit('close')"> <template #iconLeft><cross-icon :aria-hidden="true" /></template> </bento-button> </div> <bento-typography el="span" stronger class="b-action-bar__selection"> <template v-if="isConfirmationVariant && noItemCounter"> {{ tc('unsavedChanges', 0) }} </template> <template v-else> {{ n(itemCounter) }} {{ isConfirmationVariant ? tc('unsavedChanges', itemCounter) : label }} </template> </bento-typography> <bento-button-actions v-if="isConfirmationVariant" :actions="confirmationActions" class="b-action-bar__actions" inverse /> <button-actions-with-menu v-else :actions="actionsInternal" class="b-action-bar__actions" :displayed-actions="internalDisplayedActions" menu-position="top-end" disable-responsive-behavior inverse /> </div> </section> </Transition> </template> <script setup lang="ts"> import { computed, nextTick, type PropType, provide, ref, toRefs, watch } from 'vue'; import { BentoButton, BentoButtonActions, type BentoButtonActionsList } from '@/components/button'; import { BentoTypography } from '@/components/typography'; import { type BentoActionBarVariant } from '@/components/action-bar/action-bar.types'; import ButtonActionsWithMenu from '@/components/internal/button-actions-with-menu/button-actions-with-menu.vue'; import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross'; import { useI18n } from '@/utils/ts/i18n'; import { useWindowSize } from '@vueuse/core'; import messages from './messages.json'; import { POPOVER_OFFSET_INJECTION_KEY } from '@/components/popover/popover.keys'; type MessageSchema = (typeof messages)['en-US']; // Constants const AVERAGE_BUTTON_SIZE = 100; const MENU_OFFSET = 7; const RESPONSIVE_BREAKPOINT = 500; const SPACING = 32; const props = defineProps({ /** * List of actions that will be used to render the buttons. * Required and used for the `default` variant. * * Each object in the list should have a `title`, an `event` and, * optionally, an `icon`. * * The component will display 4 actions and the hide the rest inside a menu. * * @see BentoButton for a list of all the other props supported by each button action. */ actions: { type: Array as PropType<BentoButtonActionsList>, default: () => [], }, /** * How many actions should be visible outside the menu, cannot be more than 4 */ visibleActions: { type: Number, default: 4, validator: (value: number) => value > 0 && value <= 4, }, /** * Use when there are sticky elements at the bottom, like sticky pagination */ extraBottomSpacing: { type: Boolean, default: false, }, /** * Show how many items are selected. * When omitted in the `confirmation` variant, a generic "Unsaved changes" label is displayed. */ itemCounter: { type: Number, default: null, }, /** * Label for the selection, e.g. 'selected'/'changed' */ selectionLabel: { type: String, default: null, }, /** * Variant for the action bar * @values default, confirmation */ variant: { type: String as PropType<BentoActionBarVariant>, default: 'default', }, }); const emit = defineEmits<{ /** * Event emitted when the user click the close button */ (e: 'close'): void; (e: 'cancel'): void; (e: 'save'): void; }>(); const { t, tc, n } = useI18n<{ message: MessageSchema }>({ messages }); const label = computed(() => (props.selectionLabel ? props.selectionLabel : t('selected'))); // Refs const actionBar = ref<HTMLDivElement>(null); const { extraBottomSpacing, visibleActions } = toRefs(props); const { width } = useWindowSize(); const internalDisplayedActions = ref(null); const internalVisibleActions = ref(null); const isConfirmationVariant = computed(() => props.variant === 'confirmation'); watch( () => visibleActions.value, value => { internalVisibleActions.value = value <= 4 ? value : 4; internalDisplayedActions.value = internalVisibleActions.value; }, { immediate: true } ); // Styling const conditionalClasses = computed(() => ({ 'b-action-bar--extra-spacing': extraBottomSpacing.value, 'b-action-bar--confirmation': isConfirmationVariant.value, })); // Provide POPOVER_OFFSET_INJECTION_KEY to change the value of the popover offset provide(POPOVER_OFFSET_INJECTION_KEY, MENU_OFFSET); // Manipulate actions array to display as intended const actionsInternal = computed(() => { // All buttons should be of type secondary in the action bar const actions = props.actions.map(action => ({ ...action, variant: 'secondary', })) as BentoButtonActionsList; // Shown actions should display from left to right in action bar, instead of right to left which is the button actions default const shownActions = actions.slice(0, internalDisplayedActions.value).reverse(); const hiddenActions = actions.slice(internalDisplayedActions.value); return [...shownActions, ...hiddenActions]; }); const confirmationActions = computed<BentoButtonActionsList>(() => [ { title: t('save'), event: () => emit('save'), }, { title: t('cancel'), variant: 'secondary', event: () => emit('cancel'), }, ]); const noItemCounter = computed(() => { return props.itemCounter == null || props.itemCounter < 1; }); // Recursive functions to determine how many actions should be visible/hidden based on the screens width const showActions = async () => { await nextTick(); if ( width.value > actionBar.value.clientWidth + SPACING + AVERAGE_BUTTON_SIZE && internalDisplayedActions.value < internalVisibleActions.value ) { internalDisplayedActions.value += 1; showActions(); } }; const hideActions = async () => { await nextTick(); if (width.value < actionBar.value.clientWidth + SPACING && internalDisplayedActions.value > 0) { internalDisplayedActions.value -= 1; hideActions(); } }; // Screen width watcher to toggle hidden/visible actions watch( () => width.value, async (newValue, oldValue) => { await nextTick(); if (!actionBar.value) { return; } const isIncreasing = newValue > oldValue; if (width.value < RESPONSIVE_BREAKPOINT) { internalDisplayedActions.value = 0; } else if (isIncreasing) { showActions(); } else { hideActions(); } }, { immediate: true } ); </script> <script lang="ts"> /** * Action bar is a floating bar that provides users with quick access to key actions that can be applied to one or multiple items. * * @example * import { BentoActionBar } from '@adyen/bento-vue2'; * * export default { * components: { BentoActionBar }, * template: ` * <bento-action-bar * :actions='[ * { * title: 'Delete', * critical: true, * icon: BinIcon, * event: () => true, * }, * { * title: 'Edit', * icon: EditIcon, * event: () => true, * } * ]' * @close="closeAction" * :item-counter="5" * /> * ` * } */ export default { i18n: { messages }, }; </script> <style lang="scss" scoped src="./action-bar.scss" /> 
+<template> <Transition name="b-action-bar__animation" appear> <section class="b-action-bar" :class="conditionalClasses" :aria-label="t('actionBar')" @animationend="onAnimationEnd" > <Transition :name="`b-action-bar__state-animation--${state}`" :mode="stateTransitionMode" @before-leave="onBeforeLeave" @enter="onEnter" @after-enter="onAfterEnter" > <div ref="actionBar" :key="state" class="b-action-bar__container" :class="containerClasses" :style="{ width: containerWidth, maxWidth: containerMaxWidth }" > <div v-if="state === 'start'" class="b-action-bar__container-inner"> <div v-if="!isConfirmationVariant" class="b-action-bar__close-button"> <bento-button variant="tertiary" inverse :aria-label="t('close')" @click="emit('close')"> <template #iconLeft><cross-icon :aria-hidden="true" /></template> </bento-button> </div> <bento-typography el="span" stronger class="b-action-bar__selection"> <template v-if="isConfirmationVariant && noItemCounter"> {{ tc('unsavedChanges', 0) }} </template> <template v-else> {{ n(itemCounter) }} {{ isConfirmationVariant ? tc('unsavedChanges', itemCounter) : label }} </template> </bento-typography> <bento-button-actions v-if="isConfirmationVariant" :actions="confirmationActions" class="b-action-bar__actions" inverse /> <button-actions-with-menu v-else :actions="actionsInternal" class="b-action-bar__actions" :displayed-actions="internalDisplayedActions" menu-position="top-end" disable-responsive-behavior inverse /> </div> <div v-else class="b-action-bar__container-inner"> <div class="b-action-bar__state-icon"> <bento-loading-indicator v-if="state === 'loading'" small inverse /> <checkmark-circle-fill v-if="state === 'success'" :aria-hidden="true" /> <cross-circle-fill v-if="state === 'fail'" :aria-hidden="true" /> </div> <bento-typography stronger> <slot name="stateLabel">{{ defaultStateLabel }}</slot> </bento-typography> <div v-if="!hideStateActions" class="b-action-bar__state-actions"> <bento-button v-if="state === 'success' && showUndoAction" variant="tertiary" inverse @click="emit('undo-action')" >{{ t('undo') }}</bento-button > <bento-button v-if="state === 'fail' && showRetryAction" variant="tertiary" inverse @click="emit('retry-action')" >{{ t('retry') }}</bento-button > <bento-button v-if="state === 'fail'" variant="tertiary" inverse @click="emit('cancel-action')" >{{ t('cancel') }}</bento-button > </div> </div> </div> </Transition> </section> </Transition> </template> <script setup lang="ts"> import { computed, nextTick, type PropType, provide, ref, toRefs, type TransitionProps, watch } from 'vue'; import { BentoButton, BentoButtonActions, type BentoButtonActionsList } from '@/components/button'; import { BentoTypography } from '@/components/typography'; import { BentoLoadingIndicator } from '@/components/loading-indicator'; import { type BentoActionBarState, type BentoActionBarVariant } from '@/components/action-bar/action-bar.types'; import ButtonActionsWithMenu from '@/components/internal/button-actions-with-menu/button-actions-with-menu.vue'; import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross'; import CheckmarkCircleFill from '@adyen/ui-assets-icons-16/vue/checkmark-circle-fill'; import CrossCircleFill from '@adyen/ui-assets-icons-16/vue/cross-circle-fill'; import { useI18n } from '@/utils/ts/i18n'; import { useWindowSize } from '@vueuse/core'; import messages from './messages.json'; import { POPOVER_OFFSET_INJECTION_KEY } from '@/components/popover/popover.keys'; type MessageSchema = (typeof messages)['en-US']; // Constants const AVERAGE_BUTTON_SIZE = 100; const MENU_OFFSET = 7; const RESPONSIVE_BREAKPOINT = 500; const SPACING = 32; const props = defineProps({ /** * List of actions that will be used to render the buttons. * Required and used for the `default` variant. * * Each object in the list should have a `title`, an `event` and, * optionally, an `icon`. * * The component will display 4 actions and the hide the rest inside a menu. * * @see BentoButton for a list of all the other props supported by each button action. */ actions: { type: Array as PropType<BentoButtonActionsList>, default: () => [], }, /** * How many actions should be visible outside the menu, cannot be more than 4 */ visibleActions: { type: Number, default: 4, validator: (value: number) => value > 0 && value <= 4, }, /** * Use when there are sticky elements at the bottom, like sticky pagination */ extraBottomSpacing: { type: Boolean, default: false, }, /** * Show how many items are selected. * When omitted in the `confirmation` variant, a generic "Unsaved changes" label is displayed. */ itemCounter: { type: Number, default: null, }, /** * Label for the selection, e.g. 'selected'/'changed' */ selectionLabel: { type: String, default: null, }, /** * State of the action bar. * @values start, loading, success, fail */ state: { type: String as PropType<BentoActionBarState>, default: 'start', }, /** * Displays the undo action button in `success` state. */ showUndoAction: { type: Boolean, default: false, }, /** * Displays the retry action button in `fail` state. */ showRetryAction: { type: Boolean, default: false, }, /** * Variant for the action bar * @values default, confirmation */ variant: { type: String as PropType<BentoActionBarVariant>, default: 'default', }, }); const emit = defineEmits<{ /** * Event emitted when the user click the close button */ (e: 'close'): void; /** * Event emitted when the user clicks the cancel button in `confirmation` variant. */ (e: 'cancel'): void; /** * Event emitted when the user clicks the save button in `confirmation` variant. */ (e: 'save'): void; /** * Event emitted when the user clicks the undo button in `success` state. */ (e: 'undo-action'): void; /** * Event emitted when the user clicks the retry button in `fail` state. */ (e: 'retry-action'): void; /** * Event emitted when the user clicks the cancel button in `fail` state. */ (e: 'cancel-action'): void; }>(); const { t, tc, n } = useI18n<{ message: MessageSchema }>({ messages }); const label = computed(() => (props.selectionLabel ? props.selectionLabel : t('selected'))); const defaultStateLabel = computed(() => { switch (props.state) { case 'loading': return t('applying'); case 'success': return t('success'); case 'fail': return t('somethingWentWrong'); default: return ''; } }); // Refs const actionBar = ref<HTMLDivElement>(null); const containerMaxWidth = ref<string | null>(null); const containerWidth = ref<string | null>(null); const isShaking = ref(false); const stateTransitionMode = computed( () => (props.state === 'loading' ? 'out-in' : undefined) as TransitionProps['mode'] ); const hideStateActions = computed( () => props.state === 'loading' || (props.state === 'success' && !props.showUndoAction) ); const onBeforeLeave = (el: HTMLElement) => { if (props.state !== 'loading') { return; } containerMaxWidth.value = `${el.offsetWidth}px`; containerWidth.value = '100%'; }; const onEnter = (el: HTMLElement) => { if (props.state !== 'loading') { return; } // Reset styles to get natural width Object.assign(el.style, { width: 'auto', maxWidth: 'none' }); const newWidth = el.offsetWidth; // Reset it back to the original values Object.assign(el.style, { width: '100%', maxWidth: containerMaxWidth.value }); requestAnimationFrame(() => { containerMaxWidth.value = `${newWidth}px`; }); }; const onAfterEnter = () => { containerMaxWidth.value = null; containerWidth.value = null; if (props.state === 'fail') { isShaking.value = true; } }; const onAnimationEnd = (event: AnimationEvent) => { if (event.animationName.startsWith('shake-')) { isShaking.value = false; } }; const { extraBottomSpacing, visibleActions } = toRefs(props); const { width } = useWindowSize(); const internalDisplayedActions = ref(null); const internalVisibleActions = ref(null); const isConfirmationVariant = computed(() => props.variant === 'confirmation'); watch( () => visibleActions.value, value => { internalVisibleActions.value = value <= 4 ? value : 4; internalDisplayedActions.value = internalVisibleActions.value; }, { immediate: true } ); // Styling const conditionalClasses = computed(() => ({ 'b-action-bar--extra-spacing': extraBottomSpacing.value, 'b-action-bar--confirmation': isConfirmationVariant.value, 'b-action-bar__state-animation--shake': isShaking.value, })); const containerClasses = computed(() => ({ [`b-action-bar__container--${props.state}`]: props.state !== 'start', })); // Provide POPOVER_OFFSET_INJECTION_KEY to change the value of the popover offset provide(POPOVER_OFFSET_INJECTION_KEY, MENU_OFFSET); // Manipulate actions array to display as intended const actionsInternal = computed(() => { // All buttons should be of type secondary in the action bar const actions = props.actions.map(action => ({ ...action, variant: 'secondary', })) as BentoButtonActionsList; // Shown actions should display from left to right in action bar, instead of right to left which is the button actions default const shownActions = actions.slice(0, internalDisplayedActions.value).reverse(); const hiddenActions = actions.slice(internalDisplayedActions.value); return [...shownActions, ...hiddenActions]; }); const confirmationActions = computed<BentoButtonActionsList>(() => [ { title: t('save'), event: () => emit('save'), }, { title: t('cancel'), variant: 'secondary', event: () => emit('cancel'), }, ]); const noItemCounter = computed(() => { return props.itemCounter == null || props.itemCounter < 1; }); // Recursive functions to determine how many actions should be visible/hidden based on the screens width const showActions = async () => { await nextTick(); if ( width.value > actionBar.value.clientWidth + SPACING + AVERAGE_BUTTON_SIZE && internalDisplayedActions.value < internalVisibleActions.value ) { internalDisplayedActions.value += 1; showActions(); } }; const hideActions = async () => { await nextTick(); if (width.value < actionBar.value.clientWidth + SPACING && internalDisplayedActions.value > 0) { internalDisplayedActions.value -= 1; hideActions(); } }; // Screen width watcher to toggle hidden/visible actions watch( () => width.value, async (newValue, oldValue) => { await nextTick(); if (!actionBar.value) { return; } const isIncreasing = newValue > oldValue; if (width.value < RESPONSIVE_BREAKPOINT) { internalDisplayedActions.value = 0; } else if (isIncreasing) { showActions(); } else { hideActions(); } }, { immediate: true } ); </script> <script lang="ts"> /** * Action bar is a floating bar that provides users with quick access to key actions that can be applied to one or multiple items. * * @example * import { BentoActionBar } from '@adyen/bento-vue2'; * * export default { * components: { BentoActionBar }, * template: ` * <bento-action-bar * :actions='[ * { * title: 'Delete', * critical: true, * icon: BinIcon, * event: () => true, * }, * { * title: 'Edit', * icon: EditIcon, * event: () => true, * } * ]' * @close="closeAction" * :item-counter="5" * /> * ` * } */ export default { i18n: { messages }, }; </script> <style lang="scss" scoped src="./action-bar.scss" /> 

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; }