@actabldesign/bellhop-react 0.0.5 → 0.0.6

package/llms.txt

@@ -0,0 +1,3551 @@
+This file is a merged representation of a subset of the codebase, containing specifically included files and files not matching ignore patterns, combined into a single document by Repomix.
+The content has been processed where security check has been disabled.
+
+================================================================
+File Summary
+================================================================
+
+Purpose:
+--------
+This file contains a packed representation of a subset of the repository's contents that is considered the most important context.
+It is designed to be easily consumable by AI systems for analysis, code review,
+or other automated processes.
+
+File Format:
+------------
+The content is organized as follows:
+1. This summary section
+2. Repository information
+3. Directory structure
+4. Repository files (if enabled)
+5. Multiple file entries, each consisting of:
+  a. A separator line (================)
+  b. The file path (File: path/to/file)
+  c. Another separator line
+  d. The full contents of the file
+  e. A blank line
+
+Usage Guidelines:
+-----------------
+- This file should be treated as read-only. Any changes should be made to the
+  original repository files, not this packed version.
+- When processing this file, use the file path to distinguish
+  between different files in the repository.
+- Be aware that this file may contain sensitive information. Handle it with
+  the same level of security as you would the original repository.
+
+Notes:
+------
+- Some files may have been excluded based on .gitignore rules and Repomix's configuration
+- Binary files are not included in this packed representation. Please refer to the Repository Structure section for a complete list of file paths, including binary files
+- Only files matching these patterns are included: **/*.ts, **/*.tsx, **/*.js, **/*.jsx, **/*.css, **/*.scss, **/*.json, **/*.md
+- Files matching these patterns are excluded: **/node_modules/**, **/dist/**, **/build/**, **/coverage/**, **/.angular/**, **/.nx/**, **/storybook-static/**, **/*.lock, **/*.log, **/*.svg, **/*.png, **/*.jpg, **/*.jpeg, **/*.gif, **/*.ico, **/*.webp, **/*.woff, **/*.woff2, **/*.ttf, **/*.eot, **/*.otf, **/*.min.js, **/*.min.css, **/*.map, **/package-lock.json, **/yarn.lock, **/pnpm-lock.yaml, **/.DS_Store, **/Thumbs.db, **/llms.txt, **/llms/**
+- Files matching patterns in .gitignore are excluded
+- Files matching default ignore patterns are excluded
+- Security check has been disabled - content may contain sensitive information
+- Files are sorted by Git change count (files with more changes are at the bottom)
+
+
+================================================================
+Directory Structure
+================================================================
+src/
+  components/
+    stencil-generated/
+      components.ts
+      index.ts
+    table/
+      DataTable.tsx
+      index.tsx
+  index.ts
+package.json
+project.json
+README.md
+tsconfig.json
+
+================================================================
+Files
+================================================================
+
+================
+File: src/components/stencil-generated/components.ts
+================
+'use client';
+
+/**
+ * This file was automatically generated by the Stencil React Output Target.
+ * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
+ */
+
+/* eslint-disable */
+
+import { type AutocompleteMenuItem, type BhAppbarCustomEvent, type BhAutocompleteMenuCustomEvent, type BhAvatarAddCustomEvent, type BhBreadcrumbsCustomEvent, type BhButtonCustomEvent, type BhButtonIconCustomEvent, type BhDataGridCustomEvent, type BhDatePickerContentCustomEvent, type BhDatePickerCustomEvent, type BhDateRangePickerContentCustomEvent, type BhDateRangePickerCustomEvent, type BhDropdownCustomEvent, type BhDropdownMenuCustomEvent, type BhInputAutocompleteCustomEvent, type BhLogoBoxCustomEvent, type BhMonthPickerContentCustomEvent, type BhMonthPickerCustomEvent, type BhPaginationCustomEvent, type BhPickerMenuCustomEvent, type BhPopoverCustomEvent, type BhProduct, type BhProductSwitcherCustomEvent, type BhPropertySwitcherCustomEvent, type BhSidebarCustomEvent, type BreadcrumbItem, type DataGridCellChangeEvent, type DataGridCellClickEvent, type DataGridEditCancelEvent, type DataGridEditSaveEvent, type DataGridEditStartEvent, type DataGridExpandChangeEvent, type DataGridFilterChangeEvent, type DataGridGroupToggleEvent, type DataGridPageChangeEvent, type DataGridRowClickEvent, type DataGridSelectionChangeEvent, type DataGridSortChangeEvent, type DataGridValidationErrorEvent, type DropdownMenuItem, type MonthYear, type PaginationChangeEvent, type PopoverItem, type PropertyOption, type SelectedDate, type SelectedDateRange } from "@actabldesign/bellhop-core";
+import { BhAccordionItem as BhAccordionItemElement, defineCustomElement as defineBhAccordionItem } from "@actabldesign/bellhop-core/dist/components/bh-accordion-item.js";
+import { BhAccordion as BhAccordionElement, defineCustomElement as defineBhAccordion } from "@actabldesign/bellhop-core/dist/components/bh-accordion.js";
+import { BhAppbar as BhAppbarElement, defineCustomElement as defineBhAppbar } from "@actabldesign/bellhop-core/dist/components/bh-appbar.js";
+import { BhAutocompleteMenu as BhAutocompleteMenuElement, defineCustomElement as defineBhAutocompleteMenu } from "@actabldesign/bellhop-core/dist/components/bh-autocomplete-menu.js";
+import { BhAvatarAdd as BhAvatarAddElement, defineCustomElement as defineBhAvatarAdd } from "@actabldesign/bellhop-core/dist/components/bh-avatar-add.js";
+import { BhAvatarStacked as BhAvatarStackedElement, defineCustomElement as defineBhAvatarStacked } from "@actabldesign/bellhop-core/dist/components/bh-avatar-stacked.js";
+import { BhAvatar as BhAvatarElement, defineCustomElement as defineBhAvatar } from "@actabldesign/bellhop-core/dist/components/bh-avatar.js";
+import { BhBadgeDot as BhBadgeDotElement, defineCustomElement as defineBhBadgeDot } from "@actabldesign/bellhop-core/dist/components/bh-badge-dot.js";
+import { BhBadge as BhBadgeElement, defineCustomElement as defineBhBadge } from "@actabldesign/bellhop-core/dist/components/bh-badge.js";
+import { BhBarChart as BhBarChartElement, defineCustomElement as defineBhBarChart } from "@actabldesign/bellhop-core/dist/components/bh-bar-chart.js";
+import { BhBreadcrumbs as BhBreadcrumbsElement, defineCustomElement as defineBhBreadcrumbs } from "@actabldesign/bellhop-core/dist/components/bh-breadcrumbs.js";
+import { BhButtonIcon as BhButtonIconElement, defineCustomElement as defineBhButtonIcon } from "@actabldesign/bellhop-core/dist/components/bh-button-icon.js";
+import { BhButton as BhButtonElement, defineCustomElement as defineBhButton } from "@actabldesign/bellhop-core/dist/components/bh-button.js";
+import { BhCardFooter as BhCardFooterElement, defineCustomElement as defineBhCardFooter } from "@actabldesign/bellhop-core/dist/components/bh-card-footer.js";
+import { BhCardHeader as BhCardHeaderElement, defineCustomElement as defineBhCardHeader } from "@actabldesign/bellhop-core/dist/components/bh-card-header.js";
+import { BhCard as BhCardElement, defineCustomElement as defineBhCard } from "@actabldesign/bellhop-core/dist/components/bh-card.js";
+import { BhChartTooltip as BhChartTooltipElement, defineCustomElement as defineBhChartTooltip } from "@actabldesign/bellhop-core/dist/components/bh-chart-tooltip.js";
+import { BhCheckboxGroupItem as BhCheckboxGroupItemElement, defineCustomElement as defineBhCheckboxGroupItem } from "@actabldesign/bellhop-core/dist/components/bh-checkbox-group-item.js";
+import { BhCheckboxGroup as BhCheckboxGroupElement, defineCustomElement as defineBhCheckboxGroup } from "@actabldesign/bellhop-core/dist/components/bh-checkbox-group.js";
+import { BhCheckbox as BhCheckboxElement, defineCustomElement as defineBhCheckbox } from "@actabldesign/bellhop-core/dist/components/bh-checkbox.js";
+import { BhContainerFooter as BhContainerFooterElement, defineCustomElement as defineBhContainerFooter } from "@actabldesign/bellhop-core/dist/components/bh-container-footer.js";
+import { BhContainer as BhContainerElement, defineCustomElement as defineBhContainer } from "@actabldesign/bellhop-core/dist/components/bh-container.js";
+import { BhDataGrid as BhDataGridElement, defineCustomElement as defineBhDataGrid } from "@actabldesign/bellhop-core/dist/components/bh-data-grid.js";
+import { BhDatePickerContent as BhDatePickerContentElement, defineCustomElement as defineBhDatePickerContent } from "@actabldesign/bellhop-core/dist/components/bh-date-picker-content.js";
+import { BhDatePicker as BhDatePickerElement, defineCustomElement as defineBhDatePicker } from "@actabldesign/bellhop-core/dist/components/bh-date-picker.js";
+import { BhDateRangePickerContent as BhDateRangePickerContentElement, defineCustomElement as defineBhDateRangePickerContent } from "@actabldesign/bellhop-core/dist/components/bh-date-range-picker-content.js";
+import { BhDateRangePicker as BhDateRangePickerElement, defineCustomElement as defineBhDateRangePicker } from "@actabldesign/bellhop-core/dist/components/bh-date-range-picker.js";
+import { BhDropdownMenu as BhDropdownMenuElement, defineCustomElement as defineBhDropdownMenu } from "@actabldesign/bellhop-core/dist/components/bh-dropdown-menu.js";
+import { BhDropdown as BhDropdownElement, defineCustomElement as defineBhDropdown } from "@actabldesign/bellhop-core/dist/components/bh-dropdown.js";
+import { BhEmptyState as BhEmptyStateElement, defineCustomElement as defineBhEmptyState } from "@actabldesign/bellhop-core/dist/components/bh-empty-state.js";
+import { BhFeaturedIcon as BhFeaturedIconElement, defineCustomElement as defineBhFeaturedIcon } from "@actabldesign/bellhop-core/dist/components/bh-featured-icon.js";
+import { BhIllustrations as BhIllustrationsElement, defineCustomElement as defineBhIllustrations } from "@actabldesign/bellhop-core/dist/components/bh-illustrations.js";
+import { BhInputAutocomplete as BhInputAutocompleteElement, defineCustomElement as defineBhInputAutocomplete } from "@actabldesign/bellhop-core/dist/components/bh-input-autocomplete.js";
+import { BhInputNumber as BhInputNumberElement, defineCustomElement as defineBhInputNumber } from "@actabldesign/bellhop-core/dist/components/bh-input-number.js";
+import { BhInputPassword as BhInputPasswordElement, defineCustomElement as defineBhInputPassword } from "@actabldesign/bellhop-core/dist/components/bh-input-password.js";
+import { BhInputText as BhInputTextElement, defineCustomElement as defineBhInputText } from "@actabldesign/bellhop-core/dist/components/bh-input-text.js";
+import { BhInputVerification as BhInputVerificationElement, defineCustomElement as defineBhInputVerification } from "@actabldesign/bellhop-core/dist/components/bh-input-verification.js";
+import { BhLabel as BhLabelElement, defineCustomElement as defineBhLabel } from "@actabldesign/bellhop-core/dist/components/bh-label.js";
+import { BhLoaderSpinner as BhLoaderSpinnerElement, defineCustomElement as defineBhLoaderSpinner } from "@actabldesign/bellhop-core/dist/components/bh-loader-spinner.js";
+import { BhLogoBox as BhLogoBoxElement, defineCustomElement as defineBhLogoBox } from "@actabldesign/bellhop-core/dist/components/bh-logo-box.js";
+import { BhModalActions as BhModalActionsElement, defineCustomElement as defineBhModalActions } from "@actabldesign/bellhop-core/dist/components/bh-modal-actions.js";
+import { BhModalHeader as BhModalHeaderElement, defineCustomElement as defineBhModalHeader } from "@actabldesign/bellhop-core/dist/components/bh-modal-header.js";
+import { BhModal as BhModalElement, defineCustomElement as defineBhModal } from "@actabldesign/bellhop-core/dist/components/bh-modal.js";
+import { BhMonthPickerContent as BhMonthPickerContentElement, defineCustomElement as defineBhMonthPickerContent } from "@actabldesign/bellhop-core/dist/components/bh-month-picker-content.js";
+import { BhMonthPicker as BhMonthPickerElement, defineCustomElement as defineBhMonthPicker } from "@actabldesign/bellhop-core/dist/components/bh-month-picker.js";
+import { BhNavItem as BhNavItemElement, defineCustomElement as defineBhNavItem } from "@actabldesign/bellhop-core/dist/components/bh-nav-item.js";
+import { BhNotification as BhNotificationElement, defineCustomElement as defineBhNotification } from "@actabldesign/bellhop-core/dist/components/bh-notification.js";
+import { BhPageNavigationChild as BhPageNavigationChildElement, defineCustomElement as defineBhPageNavigationChild } from "@actabldesign/bellhop-core/dist/components/bh-page-navigation-child.js";
+import { BhPageNavigationMultiLevel as BhPageNavigationMultiLevelElement, defineCustomElement as defineBhPageNavigationMultiLevel } from "@actabldesign/bellhop-core/dist/components/bh-page-navigation-multi-level.js";
+import { BhPageNavigationSingleLevel as BhPageNavigationSingleLevelElement, defineCustomElement as defineBhPageNavigationSingleLevel } from "@actabldesign/bellhop-core/dist/components/bh-page-navigation-single-level.js";
+import { BhPageNavigation as BhPageNavigationElement, defineCustomElement as defineBhPageNavigation } from "@actabldesign/bellhop-core/dist/components/bh-page-navigation.js";
+import { BhPagination as BhPaginationElement, defineCustomElement as defineBhPagination } from "@actabldesign/bellhop-core/dist/components/bh-pagination.js";
+import { BhPickerMenu as BhPickerMenuElement, defineCustomElement as defineBhPickerMenu } from "@actabldesign/bellhop-core/dist/components/bh-picker-menu.js";
+import { BhPieChart as BhPieChartElement, defineCustomElement as defineBhPieChart } from "@actabldesign/bellhop-core/dist/components/bh-pie-chart.js";
+import { BhPopover as BhPopoverElement, defineCustomElement as defineBhPopover } from "@actabldesign/bellhop-core/dist/components/bh-popover.js";
+import { BhProductSwitcher as BhProductSwitcherElement, defineCustomElement as defineBhProductSwitcher } from "@actabldesign/bellhop-core/dist/components/bh-product-switcher.js";
+import { BhPropertySwitcher as BhPropertySwitcherElement, defineCustomElement as defineBhPropertySwitcher } from "@actabldesign/bellhop-core/dist/components/bh-property-switcher.js";
+import { BhRadioButton as BhRadioButtonElement, defineCustomElement as defineBhRadioButton } from "@actabldesign/bellhop-core/dist/components/bh-radio-button.js";
+import { BhSidebar as BhSidebarElement, defineCustomElement as defineBhSidebar } from "@actabldesign/bellhop-core/dist/components/bh-sidebar.js";
+import { BhSkeletonLoader as BhSkeletonLoaderElement, defineCustomElement as defineBhSkeletonLoader } from "@actabldesign/bellhop-core/dist/components/bh-skeleton-loader.js";
+import { BhTabItem as BhTabItemElement, defineCustomElement as defineBhTabItem } from "@actabldesign/bellhop-core/dist/components/bh-tab-item.js";
+import { BhTabs as BhTabsElement, defineCustomElement as defineBhTabs } from "@actabldesign/bellhop-core/dist/components/bh-tabs.js";
+import { BhTag as BhTagElement, defineCustomElement as defineBhTag } from "@actabldesign/bellhop-core/dist/components/bh-tag.js";
+import { BhTextarea as BhTextareaElement, defineCustomElement as defineBhTextarea } from "@actabldesign/bellhop-core/dist/components/bh-textarea.js";
+import { BhToggle as BhToggleElement, defineCustomElement as defineBhToggle } from "@actabldesign/bellhop-core/dist/components/bh-toggle.js";
+import { BhTooltip as BhTooltipElement, defineCustomElement as defineBhTooltip } from "@actabldesign/bellhop-core/dist/components/bh-tooltip.js";
+import { BhTrendChart as BhTrendChartElement, defineCustomElement as defineBhTrendChart } from "@actabldesign/bellhop-core/dist/components/bh-trend-chart.js";
+import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
+import { createComponent } from '@stencil/react-output-target/runtime';
+import React from 'react';
+
+type BhAccordionEvents = { onBhAccordionChange: EventName<CustomEvent<string | string[]>> };
+
+export const BhAccordion: StencilReactComponent<BhAccordionElement, BhAccordionEvents> = /*@__PURE__*/ createComponent<BhAccordionElement, BhAccordionEvents>({
+    tagName: 'bh-accordion',
+    elementClass: BhAccordionElement,
+    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    react: React,
+    events: { onBhAccordionChange: 'bhAccordionChange' } as BhAccordionEvents,
+    defineCustomElement: defineBhAccordion
+});
+
+type BhAccordionItemEvents = {
+    onBhAccordionToggle: EventName<CustomEvent<{ value: string; expanded: boolean }>>,
+    onBhAccordionClick: EventName<CustomEvent<string>>
+};
+
+export const BhAccordionItem: StencilReactComponent<BhAccordionItemElement, BhAccordionItemEvents> = /*@__PURE__*/ createComponent<BhAccordionItemElement, BhAccordionItemEvents>({
+    tagName: 'bh-accordion-item',
+    elementClass: BhAccordionItemElement,
+    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    react: React,
+    events: {
+        onBhAccordionToggle: 'bhAccordionToggle',
+        onBhAccordionClick: 'bhAccordionClick'
+    } as BhAccordionItemEvents,
+    defineCustomElement: defineBhAccordionItem
+});
+
+type BhAppbarEvents = {
+    onBhMenuToggle: EventName<CustomEvent<void>>,
+    onBhBreadcrumbClick: EventName<BhAppbarCustomEvent<BreadcrumbItem>>,
+    onBhNotificationClick: EventName<CustomEvent<void>>,
+    onBhCalendarClick: EventName<CustomEvent<void>>,
+    onBhSettingsClick: EventName<CustomEvent<void>>
+};
+
+export const BhAppbar: StencilReactComponent<BhAppbarElement, BhAppbarEvents> = /*@__PURE__*/ createComponent<BhAppbarElement, BhAppbarEvents>({
+    tagName: 'bh-appbar',
+    elementClass: BhAppbarElement,
+    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    react: React,
+    events: {
+        onBhMenuToggle: 'bhMenuToggle',
+        onBhBreadcrumbClick: 'bhBreadcrumbClick',
+        onBhNotificationClick: 'bhNotificationClick',
+        onBhCalendarClick: 'bhCalendarClick',
+        onBhSettingsClick: 'bhSettingsClick'
+    } as BhAppbarEvents,
+    defineCustomElement: defineBhAppbar
+});
+
+type BhAutocompleteMenuEvents = {
+    onBhItemClick: EventName<BhAutocompleteMenuCustomEvent<AutocompleteMenuItem>>,
+    onBhItemHover: EventName<CustomEvent<number>>
+};
+
+export const BhAutocompleteMenu: StencilReactComponent<BhAutocompleteMenuElement, BhAutocompleteMenuEvents> = /*@__PURE__*/ createComponent<BhAutocompleteMenuElement, BhAutocompleteMenuEvents>({
+    tagName: 'bh-autocomplete-menu',
+    elementClass: BhAutocompleteMenuElement,
+    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    react: React,
+    events: {
+        onBhItemClick: 'bhItemClick',
+        onBhItemHover: 'bhItemHover'
+    } as BhAutocompleteMenuEvents,
+    defineCustomElement: defineBhAutocompleteMenu
+});
+
+type BhAvatarEvents = {
+    onBhMouseEnter: EventName<CustomEvent<void>>,
+    onBhMouseLeave: EventName<CustomEvent<void>>
+};
+
+export const BhAvatar: StencilReactComponent<BhAvatarElement, BhAvatarEvents> = /*@__PURE__*/ createComponent<BhAvatarElement, BhAvatarEvents>({
+    tagName: 'bh-avatar',
+    elementClass: BhAvatarElement,
+    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    react: React,
+    events: {
+        onBhMouseEnter: 'bhMouseEnter',
+        onBhMouseLeave: 'bhMouseLeave'
+    } as BhAvatarEvents,
+    defineCustomElement: defineBhAvatar
+});
+
+type BhAvatarAddEvents = { onBhClick: EventName<BhAvatarAddCustomEvent<MouseEvent>> };
+
+export const BhAvatarAdd: StencilReactComponent<BhAvatarAddElement, BhAvatarAddEvents> = /*@__PURE__*/ createComponent<BhAvatarAddElement, BhAvatarAddEvents>({
+    tagName: 'bh-avatar-add',
+    elementClass: BhAvatarAddElement,
+    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    react: React,
+    events: { onBhClick: 'bhClick' } as BhAvatarAddEvents,
+    defineCustomElement: defineBhAvatarAdd
+});
+
+type BhAvatarStackedEvents = NonNullable<unknown>;
+
+export const BhAvatarStacked: StencilReactComponent<BhAvatarStackedElement, BhAvatarStackedEvents> = /*@__PURE__*/ createComponent<BhAvatarStackedElement, BhAvatarStackedEvents>({
+    tagName: 'bh-avatar-stacked',
+    elementClass: BhAvatarStackedElement,
+    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    react: React,
+    events: {} as BhAvatarStackedEvents,
+    defineCustomElement: defineBhAvatarStacked
+});
+
+type BhBadgeEvents = { onBhDismiss: EventName<CustomEvent<void>> };
+
+export const BhBadge: StencilReactComponent<BhBadgeElement, BhBadgeEvents> = /*@__PURE__*/ createComponent<BhBadgeElement, BhBadgeEvents>({
+    tagName: 'bh-badge',
+    elementClass: BhBadgeElement,
+    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    react: React,
+    events: { onBhDismiss: 'bhDismiss' } as BhBadgeEvents,
+    defineCustomElement: defineBhBadge
+});
+
+type BhBadgeDotEvents = NonNullable<unknown>;
+
+export const BhBadgeDot: StencilReactComponent<BhBadgeDotElement, BhBadgeDotEvents> = /*@__PURE__*/ createComponent<BhBadgeDotElement, BhBadgeDotEvents>({
+    tagName: 'bh-badge-dot',
+    elementClass: BhBadgeDotElement,
+    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    react: React,
+    events: {} as BhBadgeDotEvents,
+    defineCustomElement: defineBhBadgeDot
+});
+
+type BhBarChartEvents = NonNullable<unknown>;
+
+export const BhBarChart: StencilReactComponent<BhBarChartElement, BhBarChartEvents> = /*@__PURE__*/ createComponent<BhBarChartElement, BhBarChartEvents>({
+    tagName: 'bh-bar-chart',
+    elementClass: BhBarChartElement,
+    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    react: React,
+    events: {} as BhBarChartEvents,
+    defineCustomElement: defineBhBarChart
+});
+
+type BhBreadcrumbsEvents = {
+    onBhItemClick: EventName<BhBreadcrumbsCustomEvent<BreadcrumbItem>>,
+    onBhNavigate: EventName<CustomEvent<string>>
+};
+
+export const BhBreadcrumbs: StencilReactComponent<BhBreadcrumbsElement, BhBreadcrumbsEvents> = /*@__PURE__*/ createComponent<BhBreadcrumbsElement, BhBreadcrumbsEvents>({
+    tagName: 'bh-breadcrumbs',
+    elementClass: BhBreadcrumbsElement,
+    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    react: React,
+    events: {
+        onBhItemClick: 'bhItemClick',
+        onBhNavigate: 'bhNavigate'
+    } as BhBreadcrumbsEvents,
+    defineCustomElement: defineBhBreadcrumbs
+});
+
+type BhButtonEvents = { onBhClick: EventName<BhButtonCustomEvent<MouseEvent>> };
+
+export const BhButton: StencilReactComponent<BhButtonElement, BhButtonEvents> = /*@__PURE__*/ createComponent<BhButtonElement, BhButtonEvents>({
+    tagName: 'bh-button',
+    elementClass: BhButtonElement,
+    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    react: React,
+    events: { onBhClick: 'bhClick' } as BhButtonEvents,
+    defineCustomElement: defineBhButton
+});
+
+type BhButtonIconEvents = { onBhClick: EventName<BhButtonIconCustomEvent<MouseEvent>> };
+
+export const BhButtonIcon: StencilReactComponent<BhButtonIconElement, BhButtonIconEvents> = /*@__PURE__*/ createComponent<BhButtonIconElement, BhButtonIconEvents>({
+    tagName: 'bh-button-icon',
+    elementClass: BhButtonIconElement,
+    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    react: React,
+    events: { onBhClick: 'bhClick' } as BhButtonIconEvents,
+    defineCustomElement: defineBhButtonIcon
+});
+
+type BhCardEvents = NonNullable<unknown>;
+
+export const BhCard: StencilReactComponent<BhCardElement, BhCardEvents> = /*@__PURE__*/ createComponent<BhCardElement, BhCardEvents>({
+    tagName: 'bh-card',
+    elementClass: BhCardElement,
+    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    react: React,
+    events: {} as BhCardEvents,
+    defineCustomElement: defineBhCard
+});
+
+type BhCardFooterEvents = NonNullable<unknown>;
+
+export const BhCardFooter: StencilReactComponent<BhCardFooterElement, BhCardFooterEvents> = /*@__PURE__*/ createComponent<BhCardFooterElement, BhCardFooterEvents>({
+    tagName: 'bh-card-footer',
+    elementClass: BhCardFooterElement,
+    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    react: React,
+    events: {} as BhCardFooterEvents,
+    defineCustomElement: defineBhCardFooter
+});
+
+type BhCardHeaderEvents = { onBhDropdownClick: EventName<CustomEvent<void>> };
+
+export const BhCardHeader: StencilReactComponent<BhCardHeaderElement, BhCardHeaderEvents> = /*@__PURE__*/ createComponent<BhCardHeaderElement, BhCardHeaderEvents>({
+    tagName: 'bh-card-header',
+    elementClass: BhCardHeaderElement,
+    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    react: React,
+    events: { onBhDropdownClick: 'bhDropdownClick' } as BhCardHeaderEvents,
+    defineCustomElement: defineBhCardHeader
+});
+
+type BhChartTooltipEvents = NonNullable<unknown>;
+
+export const BhChartTooltip: StencilReactComponent<BhChartTooltipElement, BhChartTooltipEvents> = /*@__PURE__*/ createComponent<BhChartTooltipElement, BhChartTooltipEvents>({
+    tagName: 'bh-chart-tooltip',
+    elementClass: BhChartTooltipElement,
+    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    react: React,
+    events: {} as BhChartTooltipEvents,
+    defineCustomElement: defineBhChartTooltip
+});
+
+type BhCheckboxEvents = { onBhChange: EventName<CustomEvent<boolean>> };
+
+export const BhCheckbox: StencilReactComponent<BhCheckboxElement, BhCheckboxEvents> = /*@__PURE__*/ createComponent<BhCheckboxElement, BhCheckboxEvents>({
+    tagName: 'bh-checkbox',
+    elementClass: BhCheckboxElement,
+    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    react: React,
+    events: { onBhChange: 'bhChange' } as BhCheckboxEvents,
+    defineCustomElement: defineBhCheckbox
+});
+
+type BhCheckboxGroupEvents = { onBhChange: EventName<CustomEvent<string | string[]>> };
+
+export const BhCheckboxGroup: StencilReactComponent<BhCheckboxGroupElement, BhCheckboxGroupEvents> = /*@__PURE__*/ createComponent<BhCheckboxGroupElement, BhCheckboxGroupEvents>({
+    tagName: 'bh-checkbox-group',
+    elementClass: BhCheckboxGroupElement,
+    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    react: React,
+    events: { onBhChange: 'bhChange' } as BhCheckboxGroupEvents,
+    defineCustomElement: defineBhCheckboxGroup
+});
+
+type BhCheckboxGroupItemEvents = { onBhItemChange: EventName<CustomEvent<{ value: string; checked: boolean }>> };
+
+export const BhCheckboxGroupItem: StencilReactComponent<BhCheckboxGroupItemElement, BhCheckboxGroupItemEvents> = /*@__PURE__*/ createComponent<BhCheckboxGroupItemElement, BhCheckboxGroupItemEvents>({
+    tagName: 'bh-checkbox-group-item',
+    elementClass: BhCheckboxGroupItemElement,
+    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    react: React,
+    events: { onBhItemChange: 'bhItemChange' } as BhCheckboxGroupItemEvents,
+    defineCustomElement: defineBhCheckboxGroupItem
+});
+
+type BhContainerEvents = NonNullable<unknown>;
+
+export const BhContainer: StencilReactComponent<BhContainerElement, BhContainerEvents> = /*@__PURE__*/ createComponent<BhContainerElement, BhContainerEvents>({
+    tagName: 'bh-container',
+    elementClass: BhContainerElement,
+    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    react: React,
+    events: {} as BhContainerEvents,
+    defineCustomElement: defineBhContainer
+});
+
+type BhContainerFooterEvents = { onBhButtonClick: EventName<CustomEvent<void>> };
+
+export const BhContainerFooter: StencilReactComponent<BhContainerFooterElement, BhContainerFooterEvents> = /*@__PURE__*/ createComponent<BhContainerFooterElement, BhContainerFooterEvents>({
+    tagName: 'bh-container-footer',
+    elementClass: BhContainerFooterElement,
+    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    react: React,
+    events: { onBhButtonClick: 'bhButtonClick' } as BhContainerFooterEvents,
+    defineCustomElement: defineBhContainerFooter
+});
+
+type BhDataGridEvents = {
+    onBhSortChange: EventName<BhDataGridCustomEvent<DataGridSortChangeEvent>>,
+    onBhFilterChange: EventName<BhDataGridCustomEvent<DataGridFilterChangeEvent>>,
+    onBhSelectionChange: EventName<BhDataGridCustomEvent<DataGridSelectionChangeEvent>>,
+    onBhPageChange: EventName<BhDataGridCustomEvent<DataGridPageChangeEvent>>,
+    onBhRowClick: EventName<BhDataGridCustomEvent<DataGridRowClickEvent>>,
+    onBhCellClick: EventName<BhDataGridCustomEvent<DataGridCellClickEvent>>,
+    onBhExpandChange: EventName<BhDataGridCustomEvent<DataGridExpandChangeEvent>>,
+    onBhGroupToggle: EventName<BhDataGridCustomEvent<DataGridGroupToggleEvent>>,
+    onBhEditStart: EventName<BhDataGridCustomEvent<DataGridEditStartEvent>>,
+    onBhEditCancel: EventName<BhDataGridCustomEvent<DataGridEditCancelEvent>>,
+    onBhEditSave: EventName<BhDataGridCustomEvent<DataGridEditSaveEvent>>,
+    onBhCellChange: EventName<BhDataGridCustomEvent<DataGridCellChangeEvent>>,
+    onBhValidationError: EventName<BhDataGridCustomEvent<DataGridValidationErrorEvent>>
+};
+
+export const BhDataGrid: StencilReactComponent<BhDataGridElement, BhDataGridEvents> = /*@__PURE__*/ createComponent<BhDataGridElement, BhDataGridEvents>({
+    tagName: 'bh-data-grid',
+    elementClass: BhDataGridElement,
+    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    react: React,
+    events: {
+        onBhSortChange: 'bhSortChange',
+        onBhFilterChange: 'bhFilterChange',
+        onBhSelectionChange: 'bhSelectionChange',
+        onBhPageChange: 'bhPageChange',
+        onBhRowClick: 'bhRowClick',
+        onBhCellClick: 'bhCellClick',
+        onBhExpandChange: 'bhExpandChange',
+        onBhGroupToggle: 'bhGroupToggle',
+        onBhEditStart: 'bhEditStart',
+        onBhEditCancel: 'bhEditCancel',
+        onBhEditSave: 'bhEditSave',
+        onBhCellChange: 'bhCellChange',
+        onBhValidationError: 'bhValidationError'
+    } as BhDataGridEvents,
+    defineCustomElement: defineBhDataGrid
+});
+
+type BhDatePickerEvents = {
+    onBhChange: EventName<BhDatePickerCustomEvent<SelectedDate | null>>,
+    onBhDateSelect: EventName<BhDatePickerCustomEvent<SelectedDate | null>>
+};
+
+export const BhDatePicker: StencilReactComponent<BhDatePickerElement, BhDatePickerEvents> = /*@__PURE__*/ createComponent<BhDatePickerElement, BhDatePickerEvents>({
+    tagName: 'bh-date-picker',
+    elementClass: BhDatePickerElement,
+    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    react: React,
+    events: {
+        onBhChange: 'bhChange',
+        onBhDateSelect: 'bhDateSelect'
+    } as BhDatePickerEvents,
+    defineCustomElement: defineBhDatePicker
+});
+
+type BhDatePickerContentEvents = {
+    onBhChange: EventName<BhDatePickerContentCustomEvent<SelectedDate | null>>,
+    onBhDateSelect: EventName<BhDatePickerContentCustomEvent<SelectedDate | null>>,
+    onBhMonthChange: EventName<CustomEvent<{ month: number; year: number }>>,
+    onBhMonthYearChange: EventName<CustomEvent<{ month: number; year: number }>>
+};
+
+export const BhDatePickerContent: StencilReactComponent<BhDatePickerContentElement, BhDatePickerContentEvents> = /*@__PURE__*/ createComponent<BhDatePickerContentElement, BhDatePickerContentEvents>({
+    tagName: 'bh-date-picker-content',
+    elementClass: BhDatePickerContentElement,
+    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    react: React,
+    events: {
+        onBhChange: 'bhChange',
+        onBhDateSelect: 'bhDateSelect',
+        onBhMonthChange: 'bhMonthChange',
+        onBhMonthYearChange: 'bhMonthYearChange'
+    } as BhDatePickerContentEvents,
+    defineCustomElement: defineBhDatePickerContent
+});
+
+type BhDateRangePickerEvents = {
+    onBhChange: EventName<BhDateRangePickerCustomEvent<SelectedDateRange | null>>,
+    onBhDateRangeSelect: EventName<BhDateRangePickerCustomEvent<SelectedDateRange | null>>
+};
+
+export const BhDateRangePicker: StencilReactComponent<BhDateRangePickerElement, BhDateRangePickerEvents> = /*@__PURE__*/ createComponent<BhDateRangePickerElement, BhDateRangePickerEvents>({
+    tagName: 'bh-date-range-picker',
+    elementClass: BhDateRangePickerElement,
+    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    react: React,
+    events: {
+        onBhChange: 'bhChange',
+        onBhDateRangeSelect: 'bhDateRangeSelect'
+    } as BhDateRangePickerEvents,
+    defineCustomElement: defineBhDateRangePicker
+});
+
+type BhDateRangePickerContentEvents = {
+    onBhChange: EventName<BhDateRangePickerContentCustomEvent<SelectedDateRange | null>>,
+    onBhDateRangeSelect: EventName<BhDateRangePickerContentCustomEvent<SelectedDateRange | null>>
+};
+
+export const BhDateRangePickerContent: StencilReactComponent<BhDateRangePickerContentElement, BhDateRangePickerContentEvents> = /*@__PURE__*/ createComponent<BhDateRangePickerContentElement, BhDateRangePickerContentEvents>({
+    tagName: 'bh-date-range-picker-content',
+    elementClass: BhDateRangePickerContentElement,
+    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    react: React,
+    events: {
+        onBhChange: 'bhChange',
+        onBhDateRangeSelect: 'bhDateRangeSelect'
+    } as BhDateRangePickerContentEvents,
+    defineCustomElement: defineBhDateRangePickerContent
+});
+
+type BhDropdownEvents = { onBhItemClick: EventName<BhDropdownCustomEvent<DropdownMenuItem>> };
+
+export const BhDropdown: StencilReactComponent<BhDropdownElement, BhDropdownEvents> = /*@__PURE__*/ createComponent<BhDropdownElement, BhDropdownEvents>({
+    tagName: 'bh-dropdown',
+    elementClass: BhDropdownElement,
+    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    react: React,
+    events: { onBhItemClick: 'bhItemClick' } as BhDropdownEvents,
+    defineCustomElement: defineBhDropdown
+});
+
+type BhDropdownMenuEvents = { onBhItemClick: EventName<BhDropdownMenuCustomEvent<DropdownMenuItem>> };
+
+export const BhDropdownMenu: StencilReactComponent<BhDropdownMenuElement, BhDropdownMenuEvents> = /*@__PURE__*/ createComponent<BhDropdownMenuElement, BhDropdownMenuEvents>({
+    tagName: 'bh-dropdown-menu',
+    elementClass: BhDropdownMenuElement,
+    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    react: React,
+    events: { onBhItemClick: 'bhItemClick' } as BhDropdownMenuEvents,
+    defineCustomElement: defineBhDropdownMenu
+});
+
+type BhEmptyStateEvents = {
+    onBhPrimaryAction: EventName<CustomEvent<void>>,
+    onBhSecondaryAction: EventName<CustomEvent<void>>
+};
+
+export const BhEmptyState: StencilReactComponent<BhEmptyStateElement, BhEmptyStateEvents> = /*@__PURE__*/ createComponent<BhEmptyStateElement, BhEmptyStateEvents>({
+    tagName: 'bh-empty-state',
+    elementClass: BhEmptyStateElement,
+    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    react: React,
+    events: {
+        onBhPrimaryAction: 'bhPrimaryAction',
+        onBhSecondaryAction: 'bhSecondaryAction'
+    } as BhEmptyStateEvents,
+    defineCustomElement: defineBhEmptyState
+});
+
+type BhFeaturedIconEvents = NonNullable<unknown>;
+
+export const BhFeaturedIcon: StencilReactComponent<BhFeaturedIconElement, BhFeaturedIconEvents> = /*@__PURE__*/ createComponent<BhFeaturedIconElement, BhFeaturedIconEvents>({
+    tagName: 'bh-featured-icon',
+    elementClass: BhFeaturedIconElement,
+    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    react: React,
+    events: {} as BhFeaturedIconEvents,
+    defineCustomElement: defineBhFeaturedIcon
+});
+
+type BhIllustrationsEvents = NonNullable<unknown>;
+
+export const BhIllustrations: StencilReactComponent<BhIllustrationsElement, BhIllustrationsEvents> = /*@__PURE__*/ createComponent<BhIllustrationsElement, BhIllustrationsEvents>({
+    tagName: 'bh-illustrations',
+    elementClass: BhIllustrationsElement,
+    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    react: React,
+    events: {} as BhIllustrationsEvents,
+    defineCustomElement: defineBhIllustrations
+});
+
+type BhInputAutocompleteEvents = {
+    onBhChange: EventName<CustomEvent<string>>,
+    onBhSelectedItemsChange: EventName<BhInputAutocompleteCustomEvent<AutocompleteMenuItem[]>>,
+    onBhFocus: EventName<CustomEvent<void>>,
+    onBhBlur: EventName<CustomEvent<void>>,
+    onBhHelpClick: EventName<CustomEvent<void>>,
+    onBhOptionSelect: EventName<BhInputAutocompleteCustomEvent<AutocompleteMenuItem>>
+};
+
+export const BhInputAutocomplete: StencilReactComponent<BhInputAutocompleteElement, BhInputAutocompleteEvents> = /*@__PURE__*/ createComponent<BhInputAutocompleteElement, BhInputAutocompleteEvents>({
+    tagName: 'bh-input-autocomplete',
+    elementClass: BhInputAutocompleteElement,
+    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    react: React,
+    events: {
+        onBhChange: 'bhChange',
+        onBhSelectedItemsChange: 'bhSelectedItemsChange',
+        onBhFocus: 'bhFocus',
+        onBhBlur: 'bhBlur',
+        onBhHelpClick: 'bhHelpClick',
+        onBhOptionSelect: 'bhOptionSelect'
+    } as BhInputAutocompleteEvents,
+    defineCustomElement: defineBhInputAutocomplete
+});
+
+type BhInputNumberEvents = {
+    onBhChange: EventName<CustomEvent<number | null>>,
+    onBhFocus: EventName<CustomEvent<void>>,
+    onBhBlur: EventName<CustomEvent<void>>,
+    onBhHelpClick: EventName<CustomEvent<void>>
+};
+
+export const BhInputNumber: StencilReactComponent<BhInputNumberElement, BhInputNumberEvents> = /*@__PURE__*/ createComponent<BhInputNumberElement, BhInputNumberEvents>({
+    tagName: 'bh-input-number',
+    elementClass: BhInputNumberElement,
+    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    react: React,
+    events: {
+        onBhChange: 'bhChange',
+        onBhFocus: 'bhFocus',
+        onBhBlur: 'bhBlur',
+        onBhHelpClick: 'bhHelpClick'
+    } as BhInputNumberEvents,
+    defineCustomElement: defineBhInputNumber
+});
+
+type BhInputPasswordEvents = {
+    onBhInput: EventName<CustomEvent<string>>,
+    onBhFocus: EventName<CustomEvent<void>>,
+    onBhBlur: EventName<CustomEvent<void>>,
+    onBhHelpClick: EventName<CustomEvent<void>>,
+    onBhVisibilityToggle: EventName<CustomEvent<boolean>>
+};
+
+export const BhInputPassword: StencilReactComponent<BhInputPasswordElement, BhInputPasswordEvents> = /*@__PURE__*/ createComponent<BhInputPasswordElement, BhInputPasswordEvents>({
+    tagName: 'bh-input-password',
+    elementClass: BhInputPasswordElement,
+    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    react: React,
+    events: {
+        onBhInput: 'bhInput',
+        onBhFocus: 'bhFocus',
+        onBhBlur: 'bhBlur',
+        onBhHelpClick: 'bhHelpClick',
+        onBhVisibilityToggle: 'bhVisibilityToggle'
+    } as BhInputPasswordEvents,
+    defineCustomElement: defineBhInputPassword
+});
+
+type BhInputTextEvents = {
+    onBhInput: EventName<CustomEvent<string>>,
+    onBhFocus: EventName<CustomEvent<void>>,
+    onBhBlur: EventName<CustomEvent<void>>,
+    onBhHelpClick: EventName<CustomEvent<void>>
+};
+
+export const BhInputText: StencilReactComponent<BhInputTextElement, BhInputTextEvents> = /*@__PURE__*/ createComponent<BhInputTextElement, BhInputTextEvents>({
+    tagName: 'bh-input-text',
+    elementClass: BhInputTextElement,
+    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    react: React,
+    events: {
+        onBhInput: 'bhInput',
+        onBhFocus: 'bhFocus',
+        onBhBlur: 'bhBlur',
+        onBhHelpClick: 'bhHelpClick'
+    } as BhInputTextEvents,
+    defineCustomElement: defineBhInputText
+});
+
+type BhInputVerificationEvents = {
+    onBhChange: EventName<CustomEvent<string>>,
+    onBhComplete: EventName<CustomEvent<string>>
+};
+
+export const BhInputVerification: StencilReactComponent<BhInputVerificationElement, BhInputVerificationEvents> = /*@__PURE__*/ createComponent<BhInputVerificationElement, BhInputVerificationEvents>({
+    tagName: 'bh-input-verification',
+    elementClass: BhInputVerificationElement,
+    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    react: React,
+    events: {
+        onBhChange: 'bhChange',
+        onBhComplete: 'bhComplete'
+    } as BhInputVerificationEvents,
+    defineCustomElement: defineBhInputVerification
+});
+
+type BhLabelEvents = { onBhHelpClick: EventName<CustomEvent<void>> };
+
+export const BhLabel: StencilReactComponent<BhLabelElement, BhLabelEvents> = /*@__PURE__*/ createComponent<BhLabelElement, BhLabelEvents>({
+    tagName: 'bh-label',
+    elementClass: BhLabelElement,
+    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    react: React,
+    events: { onBhHelpClick: 'bhHelpClick' } as BhLabelEvents,
+    defineCustomElement: defineBhLabel
+});
+
+type BhLoaderSpinnerEvents = NonNullable<unknown>;
+
+export const BhLoaderSpinner: StencilReactComponent<BhLoaderSpinnerElement, BhLoaderSpinnerEvents> = /*@__PURE__*/ createComponent<BhLoaderSpinnerElement, BhLoaderSpinnerEvents>({
+    tagName: 'bh-loader-spinner',
+    elementClass: BhLoaderSpinnerElement,
+    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    react: React,
+    events: {} as BhLoaderSpinnerEvents,
+    defineCustomElement: defineBhLoaderSpinner
+});
+
+type BhLogoBoxEvents = { onBhProductSelect: EventName<BhLogoBoxCustomEvent<BhProduct>> };
+
+export const BhLogoBox: StencilReactComponent<BhLogoBoxElement, BhLogoBoxEvents> = /*@__PURE__*/ createComponent<BhLogoBoxElement, BhLogoBoxEvents>({
+    tagName: 'bh-logo-box',
+    elementClass: BhLogoBoxElement,
+    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    react: React,
+    events: { onBhProductSelect: 'bhProductSelect' } as BhLogoBoxEvents,
+    defineCustomElement: defineBhLogoBox
+});
+
+type BhModalEvents = { onBhClose: EventName<CustomEvent<void>> };
+
+export const BhModal: StencilReactComponent<BhModalElement, BhModalEvents> = /*@__PURE__*/ createComponent<BhModalElement, BhModalEvents>({
+    tagName: 'bh-modal',
+    elementClass: BhModalElement,
+    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    react: React,
+    events: { onBhClose: 'bhClose' } as BhModalEvents,
+    defineCustomElement: defineBhModal
+});
+
+type BhModalActionsEvents = {
+    onBhPrimaryAction: EventName<CustomEvent<void>>,
+    onBhSecondaryAction: EventName<CustomEvent<void>>
+};
+
+export const BhModalActions: StencilReactComponent<BhModalActionsElement, BhModalActionsEvents> = /*@__PURE__*/ createComponent<BhModalActionsElement, BhModalActionsEvents>({
+    tagName: 'bh-modal-actions',
+    elementClass: BhModalActionsElement,
+    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    react: React,
+    events: {
+        onBhPrimaryAction: 'bhPrimaryAction',
+        onBhSecondaryAction: 'bhSecondaryAction'
+    } as BhModalActionsEvents,
+    defineCustomElement: defineBhModalActions
+});
+
+type BhModalHeaderEvents = { onBhClose: EventName<CustomEvent<void>> };
+
+export const BhModalHeader: StencilReactComponent<BhModalHeaderElement, BhModalHeaderEvents> = /*@__PURE__*/ createComponent<BhModalHeaderElement, BhModalHeaderEvents>({
+    tagName: 'bh-modal-header',
+    elementClass: BhModalHeaderElement,
+    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    react: React,
+    events: { onBhClose: 'bhClose' } as BhModalHeaderEvents,
+    defineCustomElement: defineBhModalHeader
+});
+
+type BhMonthPickerEvents = {
+    onBhChange: EventName<BhMonthPickerCustomEvent<MonthYear | null>>,
+    onBhMonthYearSelect: EventName<BhMonthPickerCustomEvent<MonthYear>>
+};
+
+export const BhMonthPicker: StencilReactComponent<BhMonthPickerElement, BhMonthPickerEvents> = /*@__PURE__*/ createComponent<BhMonthPickerElement, BhMonthPickerEvents>({
+    tagName: 'bh-month-picker',
+    elementClass: BhMonthPickerElement,
+    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    react: React,
+    events: {
+        onBhChange: 'bhChange',
+        onBhMonthYearSelect: 'bhMonthYearSelect'
+    } as BhMonthPickerEvents,
+    defineCustomElement: defineBhMonthPicker
+});
+
+type BhMonthPickerContentEvents = {
+    onBhChange: EventName<BhMonthPickerContentCustomEvent<MonthYear>>,
+    onBhMonthYearSelect: EventName<BhMonthPickerContentCustomEvent<MonthYear>>
+};
+
+export const BhMonthPickerContent: StencilReactComponent<BhMonthPickerContentElement, BhMonthPickerContentEvents> = /*@__PURE__*/ createComponent<BhMonthPickerContentElement, BhMonthPickerContentEvents>({
+    tagName: 'bh-month-picker-content',
+    elementClass: BhMonthPickerContentElement,
+    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    react: React,
+    events: {
+        onBhChange: 'bhChange',
+        onBhMonthYearSelect: 'bhMonthYearSelect'
+    } as BhMonthPickerContentEvents,
+    defineCustomElement: defineBhMonthPickerContent
+});
+
+type BhNavItemEvents = { onBhClick: EventName<CustomEvent<void>> };
+
+export const BhNavItem: StencilReactComponent<BhNavItemElement, BhNavItemEvents> = /*@__PURE__*/ createComponent<BhNavItemElement, BhNavItemEvents>({
+    tagName: 'bh-nav-item',
+    elementClass: BhNavItemElement,
+    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    react: React,
+    events: { onBhClick: 'bhClick' } as BhNavItemEvents,
+    defineCustomElement: defineBhNavItem
+});
+
+type BhNotificationEvents = {
+    onBhAction: EventName<CustomEvent<void>>,
+    onBhDismiss: EventName<CustomEvent<void>>,
+    onBhClose: EventName<CustomEvent<void>>
+};
+
+export const BhNotification: StencilReactComponent<BhNotificationElement, BhNotificationEvents> = /*@__PURE__*/ createComponent<BhNotificationElement, BhNotificationEvents>({
+    tagName: 'bh-notification',
+    elementClass: BhNotificationElement,
+    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    react: React,
+    events: {
+        onBhAction: 'bhAction',
+        onBhDismiss: 'bhDismiss',
+        onBhClose: 'bhClose'
+    } as BhNotificationEvents,
+    defineCustomElement: defineBhNotification
+});
+
+type BhPageNavigationEvents = { onBhItemClick: EventName<CustomEvent<{ itemId: string; childIndex?: number }>> };
+
+export const BhPageNavigation: StencilReactComponent<BhPageNavigationElement, BhPageNavigationEvents> = /*@__PURE__*/ createComponent<BhPageNavigationElement, BhPageNavigationEvents>({
+    tagName: 'bh-page-navigation',
+    elementClass: BhPageNavigationElement,
+    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    react: React,
+    events: { onBhItemClick: 'bhItemClick' } as BhPageNavigationEvents,
+    defineCustomElement: defineBhPageNavigation
+});
+
+type BhPageNavigationChildEvents = { onBhItemClick: EventName<CustomEvent<void>> };
+
+export const BhPageNavigationChild: StencilReactComponent<BhPageNavigationChildElement, BhPageNavigationChildEvents> = /*@__PURE__*/ createComponent<BhPageNavigationChildElement, BhPageNavigationChildEvents>({
+    tagName: 'bh-page-navigation-child',
+    elementClass: BhPageNavigationChildElement,
+    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    react: React,
+    events: { onBhItemClick: 'bhItemClick' } as BhPageNavigationChildEvents,
+    defineCustomElement: defineBhPageNavigationChild
+});
+
+type BhPageNavigationMultiLevelEvents = {
+    onBhToggle: EventName<CustomEvent<void>>,
+    onBhChildClick: EventName<CustomEvent<number>>,
+    onBhAddClick: EventName<CustomEvent<void>>
+};
+
+export const BhPageNavigationMultiLevel: StencilReactComponent<BhPageNavigationMultiLevelElement, BhPageNavigationMultiLevelEvents> = /*@__PURE__*/ createComponent<BhPageNavigationMultiLevelElement, BhPageNavigationMultiLevelEvents>({
+    tagName: 'bh-page-navigation-multi-level',
+    elementClass: BhPageNavigationMultiLevelElement,
+    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    react: React,
+    events: {
+        onBhToggle: 'bhToggle',
+        onBhChildClick: 'bhChildClick',
+        onBhAddClick: 'bhAddClick'
+    } as BhPageNavigationMultiLevelEvents,
+    defineCustomElement: defineBhPageNavigationMultiLevel
+});
+
+type BhPageNavigationSingleLevelEvents = { onBhItemClick: EventName<CustomEvent<void>> };
+
+export const BhPageNavigationSingleLevel: StencilReactComponent<BhPageNavigationSingleLevelElement, BhPageNavigationSingleLevelEvents> = /*@__PURE__*/ createComponent<BhPageNavigationSingleLevelElement, BhPageNavigationSingleLevelEvents>({
+    tagName: 'bh-page-navigation-single-level',
+    elementClass: BhPageNavigationSingleLevelElement,
+    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    react: React,
+    events: { onBhItemClick: 'bhItemClick' } as BhPageNavigationSingleLevelEvents,
+    defineCustomElement: defineBhPageNavigationSingleLevel
+});
+
+type BhPaginationEvents = {
+    onBhPageChange: EventName<BhPaginationCustomEvent<PaginationChangeEvent>>,
+    onBhPageSizeChange: EventName<BhPaginationCustomEvent<PaginationChangeEvent>>
+};
+
+export const BhPagination: StencilReactComponent<BhPaginationElement, BhPaginationEvents> = /*@__PURE__*/ createComponent<BhPaginationElement, BhPaginationEvents>({
+    tagName: 'bh-pagination',
+    elementClass: BhPaginationElement,
+    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    react: React,
+    events: {
+        onBhPageChange: 'bhPageChange',
+        onBhPageSizeChange: 'bhPageSizeChange'
+    } as BhPaginationEvents,
+    defineCustomElement: defineBhPagination
+});
+
+type BhPickerMenuEvents = {
+    onBhChange: EventName<BhPickerMenuCustomEvent<MonthYear | null>>,
+    onBhMonthYearSelect: EventName<BhPickerMenuCustomEvent<MonthYear>>,
+    onBhCancel: EventName<CustomEvent<void>>,
+    onBhApply: EventName<CustomEvent<void>>,
+    onBhToday: EventName<CustomEvent<void>>
+};
+
+export const BhPickerMenu: StencilReactComponent<BhPickerMenuElement, BhPickerMenuEvents> = /*@__PURE__*/ createComponent<BhPickerMenuElement, BhPickerMenuEvents>({
+    tagName: 'bh-picker-menu',
+    elementClass: BhPickerMenuElement,
+    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    react: React,
+    events: {
+        onBhChange: 'bhChange',
+        onBhMonthYearSelect: 'bhMonthYearSelect',
+        onBhCancel: 'bhCancel',
+        onBhApply: 'bhApply',
+        onBhToday: 'bhToday'
+    } as BhPickerMenuEvents,
+    defineCustomElement: defineBhPickerMenu
+});
+
+type BhPieChartEvents = NonNullable<unknown>;
+
+export const BhPieChart: StencilReactComponent<BhPieChartElement, BhPieChartEvents> = /*@__PURE__*/ createComponent<BhPieChartElement, BhPieChartEvents>({
+    tagName: 'bh-pie-chart',
+    elementClass: BhPieChartElement,
+    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    react: React,
+    events: {} as BhPieChartEvents,
+    defineCustomElement: defineBhPieChart
+});
+
+type BhPopoverEvents = {
+    onBhItemSelect: EventName<BhPopoverCustomEvent<PopoverItem>>,
+    onBhPortfolioClick: EventName<CustomEvent<void>>,
+    onBhSearchChange: EventName<CustomEvent<string>>
+};
+
+export const BhPopover: StencilReactComponent<BhPopoverElement, BhPopoverEvents> = /*@__PURE__*/ createComponent<BhPopoverElement, BhPopoverEvents>({
+    tagName: 'bh-popover',
+    elementClass: BhPopoverElement,
+    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    react: React,
+    events: {
+        onBhItemSelect: 'bhItemSelect',
+        onBhPortfolioClick: 'bhPortfolioClick',
+        onBhSearchChange: 'bhSearchChange'
+    } as BhPopoverEvents,
+    defineCustomElement: defineBhPopover
+});
+
+type BhProductSwitcherEvents = {
+    onBhClose: EventName<CustomEvent<void>>,
+    onBhProductSelect: EventName<BhProductSwitcherCustomEvent<BhProduct>>
+};
+
+export const BhProductSwitcher: StencilReactComponent<BhProductSwitcherElement, BhProductSwitcherEvents> = /*@__PURE__*/ createComponent<BhProductSwitcherElement, BhProductSwitcherEvents>({
+    tagName: 'bh-product-switcher',
+    elementClass: BhProductSwitcherElement,
+    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    react: React,
+    events: {
+        onBhClose: 'bhClose',
+        onBhProductSelect: 'bhProductSelect'
+    } as BhProductSwitcherEvents,
+    defineCustomElement: defineBhProductSwitcher
+});
+
+type BhPropertySwitcherEvents = { onBhPropertyChange: EventName<BhPropertySwitcherCustomEvent<PropertyOption>> };
+
+export const BhPropertySwitcher: StencilReactComponent<BhPropertySwitcherElement, BhPropertySwitcherEvents> = /*@__PURE__*/ createComponent<BhPropertySwitcherElement, BhPropertySwitcherEvents>({
+    tagName: 'bh-property-switcher',
+    elementClass: BhPropertySwitcherElement,
+    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    react: React,
+    events: { onBhPropertyChange: 'bhPropertyChange' } as BhPropertySwitcherEvents,
+    defineCustomElement: defineBhPropertySwitcher
+});
+
+type BhRadioButtonEvents = { onBhChange: EventName<CustomEvent<string>> };
+
+export const BhRadioButton: StencilReactComponent<BhRadioButtonElement, BhRadioButtonEvents> = /*@__PURE__*/ createComponent<BhRadioButtonElement, BhRadioButtonEvents>({
+    tagName: 'bh-radio-button',
+    elementClass: BhRadioButtonElement,
+    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    react: React,
+    events: { onBhChange: 'bhChange' } as BhRadioButtonEvents,
+    defineCustomElement: defineBhRadioButton
+});
+
+type BhSidebarEvents = {
+    onBhMenuItemClick: EventName<CustomEvent<string>>,
+    onBhSearchClick: EventName<CustomEvent<void>>,
+    onBhAvatarMenuClick: EventName<BhSidebarCustomEvent<DropdownMenuItem>>
+};
+
+export const BhSidebar: StencilReactComponent<BhSidebarElement, BhSidebarEvents> = /*@__PURE__*/ createComponent<BhSidebarElement, BhSidebarEvents>({
+    tagName: 'bh-sidebar',
+    elementClass: BhSidebarElement,
+    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    react: React,
+    events: {
+        onBhMenuItemClick: 'bhMenuItemClick',
+        onBhSearchClick: 'bhSearchClick',
+        onBhAvatarMenuClick: 'bhAvatarMenuClick'
+    } as BhSidebarEvents,
+    defineCustomElement: defineBhSidebar
+});
+
+type BhSkeletonLoaderEvents = NonNullable<unknown>;
+
+export const BhSkeletonLoader: StencilReactComponent<BhSkeletonLoaderElement, BhSkeletonLoaderEvents> = /*@__PURE__*/ createComponent<BhSkeletonLoaderElement, BhSkeletonLoaderEvents>({
+    tagName: 'bh-skeleton-loader',
+    elementClass: BhSkeletonLoaderElement,
+    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    react: React,
+    events: {} as BhSkeletonLoaderEvents,
+    defineCustomElement: defineBhSkeletonLoader
+});
+
+type BhTabItemEvents = { onBhTabItemClick: EventName<CustomEvent<string>> };
+
+export const BhTabItem: StencilReactComponent<BhTabItemElement, BhTabItemEvents> = /*@__PURE__*/ createComponent<BhTabItemElement, BhTabItemEvents>({
+    tagName: 'bh-tab-item',
+    elementClass: BhTabItemElement,
+    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    react: React,
+    events: { onBhTabItemClick: 'bhTabItemClick' } as BhTabItemEvents,
+    defineCustomElement: defineBhTabItem
+});
+
+type BhTabsEvents = { onBhTabChange: EventName<CustomEvent<string>> };
+
+export const BhTabs: StencilReactComponent<BhTabsElement, BhTabsEvents> = /*@__PURE__*/ createComponent<BhTabsElement, BhTabsEvents>({
+    tagName: 'bh-tabs',
+    elementClass: BhTabsElement,
+    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    react: React,
+    events: { onBhTabChange: 'bhTabChange' } as BhTabsEvents,
+    defineCustomElement: defineBhTabs
+});
+
+type BhTagEvents = { onBhDismiss: EventName<CustomEvent<void>> };
+
+export const BhTag: StencilReactComponent<BhTagElement, BhTagEvents> = /*@__PURE__*/ createComponent<BhTagElement, BhTagEvents>({
+    tagName: 'bh-tag',
+    elementClass: BhTagElement,
+    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    react: React,
+    events: { onBhDismiss: 'bhDismiss' } as BhTagEvents,
+    defineCustomElement: defineBhTag
+});
+
+type BhTextareaEvents = {
+    onBhInput: EventName<CustomEvent<string>>,
+    onBhFocus: EventName<CustomEvent<void>>,
+    onBhBlur: EventName<CustomEvent<void>>,
+    onBhHelpClick: EventName<CustomEvent<void>>
+};
+
+export const BhTextarea: StencilReactComponent<BhTextareaElement, BhTextareaEvents> = /*@__PURE__*/ createComponent<BhTextareaElement, BhTextareaEvents>({
+    tagName: 'bh-textarea',
+    elementClass: BhTextareaElement,
+    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    react: React,
+    events: {
+        onBhInput: 'bhInput',
+        onBhFocus: 'bhFocus',
+        onBhBlur: 'bhBlur',
+        onBhHelpClick: 'bhHelpClick'
+    } as BhTextareaEvents,
+    defineCustomElement: defineBhTextarea
+});
+
+type BhToggleEvents = { onBhChange: EventName<CustomEvent<boolean>> };
+
+export const BhToggle: StencilReactComponent<BhToggleElement, BhToggleEvents> = /*@__PURE__*/ createComponent<BhToggleElement, BhToggleEvents>({
+    tagName: 'bh-toggle',
+    elementClass: BhToggleElement,
+    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    react: React,
+    events: { onBhChange: 'bhChange' } as BhToggleEvents,
+    defineCustomElement: defineBhToggle
+});
+
+type BhTooltipEvents = NonNullable<unknown>;
+
+export const BhTooltip: StencilReactComponent<BhTooltipElement, BhTooltipEvents> = /*@__PURE__*/ createComponent<BhTooltipElement, BhTooltipEvents>({
+    tagName: 'bh-tooltip',
+    elementClass: BhTooltipElement,
+    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    react: React,
+    events: {} as BhTooltipEvents,
+    defineCustomElement: defineBhTooltip
+});
+
+type BhTrendChartEvents = NonNullable<unknown>;
+
+export const BhTrendChart: StencilReactComponent<BhTrendChartElement, BhTrendChartEvents> = /*@__PURE__*/ createComponent<BhTrendChartElement, BhTrendChartEvents>({
+    tagName: 'bh-trend-chart',
+    elementClass: BhTrendChartElement,
+    // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
+    react: React,
+    events: {} as BhTrendChartEvents,
+    defineCustomElement: defineBhTrendChart
+});
+
+================
+File: src/components/stencil-generated/index.ts
+================
+/**
+ * Auto-generated React wrapper components
+ *
+ * This file exports all React wrapper components generated by @stencil/react-output-target.
+ */
+
+export * from './components';
+
+================
+File: src/components/table/DataTable.tsx
+================
+/**
+ * BhDataTable - Dynamic Table with TanStack Table
+ *
+ * A composable data table component that combines Bellhop table primitives
+ * with TanStack Table for sorting, filtering, pagination, selection,
+ * expansion, grouping, and editing.
+ * Uses existing Bellhop components where possible.
+ */
+
+import React, {
+  useState,
+  useMemo,
+  useRef,
+  useEffect,
+  useCallback,
+} from 'react';
+import {
+  useReactTable,
+  getCoreRowModel,
+  getSortedRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getExpandedRowModel,
+  getGroupedRowModel,
+  flexRender,
+  ColumnDef,
+  SortingState,
+  ColumnFiltersState,
+  RowSelectionState,
+  ExpandedState,
+  PaginationState,
+  GroupingState,
+  VisibilityState,
+  Row,
+  Column,
+  Cell,
+  Table as TanStackTable,
+} from '@tanstack/react-table';
+
+import {
+  Table,
+  TableWrapper,
+  TableHead,
+  TableBody,
+  TableRow,
+  TableHeaderCell,
+  TableCell,
+  TableEmpty,
+  TableActionBar,
+  TablePagination,
+  TableSize,
+  TableVariant,
+} from './index';
+
+// Import existing Bellhop components
+import { BhButtonIcon, BhInputText } from '../stencil-generated';
+
+// =============================================================================
+// Types
+// =============================================================================
+
+export type EditMode = 'cell' | 'row';
+
+export interface EditState {
+  rowId: string | null;
+  columnId: string | null; // null means entire row in 'row' mode
+}
+
+export interface EditingValues {
+  [columnId: string]: unknown;
+}
+
+export interface RowChanges<TData> {
+  rowId: string;
+  rowIndex: number;
+  originalRow: TData;
+  changes: Record<string, unknown>;
+}
+
+export interface DataTableColumnMeta {
+  editable?: boolean;
+  editType?: 'text' | 'number' | 'date' | 'select';
+  editOptions?: { value: string; label: string }[];
+}
+
+// Extend TanStack Table's ColumnMeta
+declare module '@tanstack/react-table' {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-object-type
+  interface ColumnMeta<TData, TValue> extends DataTableColumnMeta {}
+}
+
+// =============================================================================
+// TableCheckbox - Controlled checkbox for table selection
+// Uses native input with Bellhop styling for full control compatibility
+// =============================================================================
+
+interface TableCheckboxProps {
+  checked: boolean;
+  indeterminate?: boolean;
+  disabled?: boolean;
+  onChange: () => void;
+  'aria-label'?: string;
+}
+
+function TableCheckbox({
+  checked,
+  indeterminate = false,
+  disabled = false,
+  onChange,
+  'aria-label': ariaLabel,
+}: TableCheckboxProps) {
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.indeterminate = indeterminate;
+    }
+  }, [indeterminate]);
+
+  return (
+    <label className="bh-table-checkbox">
+      <input
+        ref={inputRef}
+        type="checkbox"
+        checked={checked}
+        disabled={disabled}
+        onChange={onChange}
+        aria-label={ariaLabel}
+        className="bh-table-checkbox__input"
+      />
+      <span
+        className={`bh-table-checkbox__box ${
+          checked || indeterminate ? 'bh-table-checkbox__box--checked' : ''
+        } ${disabled ? 'bh-table-checkbox__box--disabled' : ''}`}
+      >
+        {checked && !indeterminate && (
+          <span className="material-symbols-outlined bh-table-checkbox__icon">
+            check
+          </span>
+        )}
+        {indeterminate && (
+          <span className="material-symbols-outlined bh-table-checkbox__icon">
+            remove
+          </span>
+        )}
+      </span>
+    </label>
+  );
+}
+
+// =============================================================================
+// DataTableProps Interface
+// =============================================================================
+
+export interface DataTableProps<TData> {
+  /** Table data */
+  data: TData[];
+  /** Column definitions */
+  columns: ColumnDef<TData, unknown>[];
+  /** Table size variant */
+  size?: TableSize;
+  /** Table style variant */
+  variant?: TableVariant;
+  /** Enable row selection */
+  enableRowSelection?: boolean;
+  /** Enable multi-row selection */
+  enableMultiRowSelection?: boolean;
+  /** Enable sorting */
+  enableSorting?: boolean;
+  /** Enable column filters */
+  enableFiltering?: boolean;
+  /** Enable pagination */
+  enablePagination?: boolean;
+  /** Enable row expansion */
+  enableExpanding?: boolean;
+  /** Initial page size */
+  pageSize?: number;
+  /** Page size options */
+  pageSizeOptions?: number[];
+  /** Sticky header */
+  stickyHeader?: boolean;
+  /** Show rounded corners */
+  rounded?: boolean;
+  /** Enable row hover effect */
+  hoverable?: boolean;
+  /** Loading state */
+  loading?: boolean;
+  /** Empty state title */
+  emptyTitle?: string;
+  /** Empty state description */
+  emptyDescription?: string;
+  /** Row key accessor */
+  getRowId?: (row: TData, index: number) => string;
+  /** Sub-rows accessor for expansion */
+  getSubRows?: (row: TData) => TData[] | undefined;
+  /** Render expanded row content */
+  renderExpandedRow?: (row: Row<TData>) => React.ReactNode;
+  /** Callback when selection changes */
+  onSelectionChange?: (selectedRows: TData[]) => void;
+  /** Callback when sorting changes */
+  onSortingChange?: (sorting: SortingState) => void;
+  /** Callback when row is clicked */
+  onRowClick?: (row: TData) => void;
+  /** Action bar left content */
+  actionBarLeft?: React.ReactNode;
+  /** Action bar right content */
+  actionBarRight?: React.ReactNode;
+  /** Bulk actions when rows are selected */
+  bulkActions?: React.ReactNode;
+  /** Maximum height for scrolling */
+  maxHeight?: string | number;
+  /** Class name for the wrapper */
+  className?: string;
+
+  // ==========================================================================
+  // Grouping Props
+  // ==========================================================================
+
+  /** Enable row grouping */
+  enableGrouping?: boolean;
+  /** Column IDs to group by */
+  groupBy?: string[];
+  /** Callback when grouping changes */
+  onGroupingChange?: (grouping: string[]) => void;
+
+  // ==========================================================================
+  // Editing Props
+  // ==========================================================================
+
+  /** Enable cell/row editing */
+  enableEditing?: boolean;
+  /** Edit mode: 'cell' for single cell, 'row' for entire row */
+  editMode?: EditMode;
+  /** Show edit action buttons in row (for row edit mode) */
+  showEditActions?: boolean;
+  /** Callback when edit is saved */
+  onEditSave?: (changes: RowChanges<TData>) => void;
+  /** Callback when edit is cancelled */
+  onEditCancel?: (rowId: string, row: TData) => void;
+  /** Callback when cell value changes during editing (before save) */
+  onCellChange?: (
+    rowId: string,
+    columnId: string,
+    oldValue: unknown,
+    newValue: unknown
+  ) => void;
+}
+
+// =============================================================================
+// Checkbox Column Helper
+// =============================================================================
+
+export function createSelectColumn<TData>(): ColumnDef<TData, unknown> {
+  return {
+    id: 'select',
+    header: ({ table }) => (
+      <TableCheckbox
+        checked={table.getIsAllPageRowsSelected()}
+        indeterminate={table.getIsSomePageRowsSelected()}
+        onChange={() => table.toggleAllPageRowsSelected()}
+        aria-label="Select all rows"
+      />
+    ),
+    cell: ({ row }) => (
+      <TableCheckbox
+        checked={row.getIsSelected()}
+        disabled={!row.getCanSelect()}
+        onChange={() => row.toggleSelected()}
+        aria-label="Select row"
+      />
+    ),
+    size: 40,
+    enableSorting: false,
+    enableColumnFilter: false,
+    enableGrouping: false,
+  };
+}
+
+// =============================================================================
+// Expand Column Helper
+// =============================================================================
+
+export function createExpandColumn<TData>(): ColumnDef<TData, unknown> {
+  return {
+    id: 'expand',
+    header: () => null,
+    cell: ({ row }) =>
+      row.getCanExpand() ? (
+        <BhButtonIcon
+          iconName={row.getIsExpanded() ? 'expand_more' : 'chevron_right'}
+          size="sm"
+          hierarchy="quaternary"
+          onBhClick={() => row.toggleExpanded()}
+          aria-label={row.getIsExpanded() ? 'Collapse row' : 'Expand row'}
+        />
+      ) : null,
+    size: 32,
+    enableSorting: false,
+    enableColumnFilter: false,
+    enableGrouping: false,
+  };
+}
+
+// =============================================================================
+// Edit Actions Column Helper
+// =============================================================================
+
+export function createEditActionsColumn<TData>(
+  onEdit: (rowId: string) => void,
+  onSave: () => void,
+  onCancel: () => void,
+  isEditing: (rowId: string) => boolean
+): ColumnDef<TData, unknown> {
+  return {
+    id: 'edit-actions',
+    header: () => null,
+    cell: ({ row }) => {
+      const rowId = row.id;
+      const editing = isEditing(rowId);
+
+      if (editing) {
+        return (
+          <div className="bh-td--edit-actions">
+            <BhButtonIcon
+              iconName="check"
+              size="sm"
+              hierarchy="quaternary"
+              onBhClick={() => onSave()}
+              aria-label="Save changes"
+            />
+            <BhButtonIcon
+              iconName="close"
+              size="sm"
+              hierarchy="quaternary"
+              onBhClick={() => onCancel()}
+              aria-label="Cancel editing"
+            />
+          </div>
+        );
+      }
+
+      return (
+        <BhButtonIcon
+          iconName="edit"
+          size="sm"
+          hierarchy="quaternary"
+          onBhClick={() => onEdit(rowId)}
+          aria-label="Edit row"
+        />
+      );
+    },
+    size: 80,
+    enableSorting: false,
+    enableColumnFilter: false,
+    enableGrouping: false,
+    meta: {
+      editable: false,
+    },
+  };
+}
+
+// =============================================================================
+// DataTable Component
+// =============================================================================
+
+export function DataTable<TData>({
+  data,
+  columns,
+  size = 'default',
+  variant = 'default',
+  enableRowSelection = false,
+  enableMultiRowSelection = true,
+  enableSorting = true,
+  enableFiltering = false,
+  enablePagination = true,
+  enableExpanding = false,
+  pageSize = 10,
+  pageSizeOptions = [10, 25, 50, 100],
+  stickyHeader = false,
+  rounded = false,
+  hoverable = true,
+  loading = false,
+  emptyTitle = 'No data',
+  emptyDescription = 'There are no records to display.',
+  getRowId,
+  getSubRows,
+  renderExpandedRow,
+  onSelectionChange,
+  onSortingChange,
+  onRowClick,
+  actionBarLeft,
+  actionBarRight,
+  bulkActions,
+  maxHeight,
+  className,
+  // Grouping props
+  enableGrouping = false,
+  groupBy = [],
+  onGroupingChange,
+  // Editing props
+  enableEditing = false,
+  editMode = 'cell',
+  showEditActions = true,
+  onEditSave,
+  onEditCancel,
+  onCellChange,
+}: DataTableProps<TData>) {
+  // ==========================================================================
+  // State
+  // ==========================================================================
+
+  const [sorting, setSorting] = useState<SortingState>([]);
+  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
+  const [expanded, setExpanded] = useState<ExpandedState>({});
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize,
+  });
+  const [globalFilter, setGlobalFilter] = useState('');
+
+  // Grouping state
+  const [grouping, setGrouping] = useState<GroupingState>(groupBy);
+
+  // Editing state
+  const [editState, setEditState] = useState<EditState>({
+    rowId: null,
+    columnId: null,
+  });
+  const [editingValues, setEditingValues] = useState<EditingValues>({});
+
+  // Sync groupBy prop with internal state
+  useEffect(() => {
+    setGrouping(groupBy);
+  }, [groupBy]);
+
+  // Track previous rowSelection to detect changes for onSelectionChange callback
+  const prevRowSelectionRef = useRef<RowSelectionState>(rowSelection);
+
+  // Compute column visibility to hide grouping columns when grouping is enabled
+  const columnVisibility = useMemo<VisibilityState>(() => {
+    if (!enableGrouping || grouping.length === 0) {
+      return {};
+    }
+    // Hide all columns that are being used for grouping
+    const visibility: VisibilityState = {};
+    grouping.forEach((columnId) => {
+      visibility[columnId] = false;
+    });
+    return visibility;
+  }, [enableGrouping, grouping]);
+
+  // ==========================================================================
+  // Editing Handlers
+  // ==========================================================================
+
+  const isEditing = useCallback(
+    (rowId: string, columnId?: string): boolean => {
+      if (editState.rowId !== rowId) return false;
+
+      if (editMode === 'cell') {
+        return columnId ? editState.columnId === columnId : false;
+      }
+
+      return true; // Row mode - entire row is editing
+    },
+    [editState, editMode]
+  );
+
+  const isRowEditing = useCallback(
+    (rowId: string): boolean => {
+      return editState.rowId === rowId;
+    },
+    [editState.rowId]
+  );
+
+  const startEditing = useCallback(
+    (rowId: string, columnId?: string) => {
+      // Initialize editing values from current row
+      const initialValues: EditingValues = {};
+      columns.forEach((col) => {
+        const colId =
+          'accessorKey' in col
+            ? String(col.accessorKey)
+            : 'id' in col
+              ? col.id
+              : '';
+        if (colId && col.meta?.editable !== false) {
+          // Find row data
+          const rowIndex = data.findIndex(
+            (_, i) => (getRowId ? getRowId(data[i], i) : String(i)) === rowId
+          );
+          if (rowIndex !== -1) {
+            const row = data[rowIndex];
+            initialValues[colId] = (row as Record<string, unknown>)[colId];
+          }
+        }
+      });
+
+      setEditingValues(initialValues);
+      setEditState({
+        rowId,
+        columnId: editMode === 'cell' ? columnId || null : null,
+      });
+    },
+    [columns, data, editMode, getRowId]
+  );
+
+  const cancelEditing = useCallback(() => {
+    if (!editState.rowId) return;
+
+    const rowIndex = data.findIndex(
+      (_, i) =>
+        (getRowId ? getRowId(data[i], i) : String(i)) === editState.rowId
+    );
+    if (rowIndex !== -1) {
+      onEditCancel?.(editState.rowId, data[rowIndex]);
+    }
+
+    setEditState({ rowId: null, columnId: null });
+    setEditingValues({});
+  }, [editState.rowId, data, getRowId, onEditCancel]);
+
+  const saveEditing = useCallback(() => {
+    if (!editState.rowId) return;
+
+    const rowIndex = data.findIndex(
+      (_, i) =>
+        (getRowId ? getRowId(data[i], i) : String(i)) === editState.rowId
+    );
+    if (rowIndex === -1) return;
+
+    const originalRow = data[rowIndex];
+    const changes: Record<string, unknown> = {};
+
+    // Determine what changed
+    Object.entries(editingValues).forEach(([columnId, newValue]) => {
+      const originalValue = (originalRow as Record<string, unknown>)[columnId];
+      if (originalValue !== newValue) {
+        changes[columnId] = newValue;
+      }
+    });
+
+    if (Object.keys(changes).length > 0) {
+      onEditSave?.({
+        rowId: editState.rowId,
+        rowIndex,
+        originalRow,
+        changes,
+      });
+    }
+
+    setEditState({ rowId: null, columnId: null });
+    setEditingValues({});
+  }, [editState.rowId, editingValues, data, getRowId, onEditSave]);
+
+  const handleEditValueChange = useCallback(
+    (columnId: string, newValue: unknown) => {
+      const oldValue = editingValues[columnId];
+
+      setEditingValues((prev) => ({
+        ...prev,
+        [columnId]: newValue,
+      }));
+
+      if (editState.rowId) {
+        onCellChange?.(editState.rowId, columnId, oldValue, newValue);
+      }
+    },
+    [editingValues, editState.rowId, onCellChange]
+  );
+
+  const handleEditKeyDown = useCallback(
+    (e: React.KeyboardEvent, columnId: string) => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        saveEditing();
+      } else if (e.key === 'Escape') {
+        e.preventDefault();
+        cancelEditing();
+      } else if (e.key === 'Tab' && editMode === 'cell') {
+        e.preventDefault();
+        // Move to next editable cell
+        const editableColumns = columns.filter(
+          (col) => col.meta?.editable !== false
+        );
+        const currentIndex = editableColumns.findIndex((c) => {
+          const colId =
+            'accessorKey' in c
+              ? String(c.accessorKey)
+              : 'id' in c
+                ? c.id
+                : '';
+          return colId === columnId;
+        });
+
+        if (currentIndex !== -1) {
+          const nextIndex = e.shiftKey ? currentIndex - 1 : currentIndex + 1;
+
+          if (nextIndex >= 0 && nextIndex < editableColumns.length) {
+            const nextCol = editableColumns[nextIndex];
+            const nextColId =
+              'accessorKey' in nextCol
+                ? String(nextCol.accessorKey)
+                : 'id' in nextCol
+                  ? nextCol.id
+                  : '';
+            setEditState((prev) => ({
+              ...prev,
+              columnId: nextColId || null,
+            }));
+          } else {
+            saveEditing();
+          }
+        }
+      }
+    },
+    [editMode, columns, saveEditing, cancelEditing]
+  );
+
+  // ==========================================================================
+  // Build columns with selection/expansion/editing if enabled
+  // ==========================================================================
+
+  const tableColumns = useMemo(() => {
+    const cols: ColumnDef<TData, unknown>[] = [];
+
+    if (enableExpanding && !enableGrouping) {
+      cols.push(createExpandColumn<TData>());
+    }
+
+    if (enableRowSelection) {
+      cols.push(createSelectColumn<TData>());
+    }
+
+    cols.push(...columns);
+
+    if (enableEditing && editMode === 'row' && showEditActions) {
+      cols.push(
+        createEditActionsColumn<TData>(
+          startEditing,
+          saveEditing,
+          cancelEditing,
+          isRowEditing
+        )
+      );
+    }
+
+    return cols;
+  }, [
+    columns,
+    enableRowSelection,
+    enableExpanding,
+    enableGrouping,
+    enableEditing,
+    editMode,
+    showEditActions,
+    startEditing,
+    saveEditing,
+    cancelEditing,
+    isRowEditing,
+  ]);
+
+  // ==========================================================================
+  // Create table instance
+  // ==========================================================================
+
+  const table = useReactTable({
+    data,
+    columns: tableColumns,
+    state: {
+      sorting,
+      columnFilters,
+      rowSelection,
+      expanded,
+      pagination,
+      globalFilter,
+      grouping,
+      columnVisibility,
+    },
+    getRowId,
+    getSubRows,
+    getRowCanExpand:
+      enableExpanding && renderExpandedRow ? () => true : undefined,
+    enableRowSelection: enableRowSelection
+      ? enableMultiRowSelection
+        ? true
+        : (row) => !Object.keys(rowSelection).length || rowSelection[row.id]
+      : false,
+    enableMultiRowSelection,
+    enableSorting,
+    enableFilters: enableFiltering,
+    enableExpanding: enableExpanding || enableGrouping,
+    enableGrouping,
+    // Prevent TanStack Table from auto-resetting expanded state when data/columns change
+    // This fixes the issue where grouped rows collapse when selecting items
+    autoResetExpanded: false,
+    onSortingChange: (updater) => {
+      const newSorting =
+        typeof updater === 'function' ? updater(sorting) : updater;
+      setSorting(newSorting);
+      onSortingChange?.(newSorting);
+    },
+    onColumnFiltersChange: setColumnFilters,
+    onRowSelectionChange: (updater) => {
+      const newSelection =
+        typeof updater === 'function' ? updater(rowSelection) : updater;
+      setRowSelection(newSelection);
+    },
+    onExpandedChange: setExpanded,
+    onPaginationChange: setPagination,
+    onGlobalFilterChange: setGlobalFilter,
+    onGroupingChange: (updater) => {
+      const newGrouping =
+        typeof updater === 'function' ? updater(grouping) : updater;
+      setGrouping(newGrouping);
+      onGroupingChange?.(newGrouping);
+    },
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: enableSorting ? getSortedRowModel() : undefined,
+    getFilteredRowModel: enableFiltering ? getFilteredRowModel() : undefined,
+    // Disable pagination when grouping is enabled
+    getPaginationRowModel:
+      enablePagination && !enableGrouping ? getPaginationRowModel() : undefined,
+    getExpandedRowModel:
+      enableExpanding || enableGrouping ? getExpandedRowModel() : undefined,
+    getGroupedRowModel: enableGrouping ? getGroupedRowModel() : undefined,
+  });
+
+  // Handle selection change callback after table is stable (via useEffect)
+  // This prevents issues with grouped rows collapsing when selecting items
+  // IMPORTANT: We use a ref for the table to avoid the effect re-running when table changes
+  // because table is recreated on every render, which would cause cascading state updates
+  const tableRef = useRef(table);
+  tableRef.current = table;
+
+  useEffect(() => {
+    if (!onSelectionChange) return;
+    if (prevRowSelectionRef.current === rowSelection) return;
+
+    prevRowSelectionRef.current = rowSelection;
+
+    // Use tableRef.current to get the latest table without adding it as a dependency
+    const currentTable = tableRef.current;
+    const selectedRows = Object.keys(rowSelection)
+      .filter((key) => rowSelection[key])
+      .map((key) => {
+        const row = currentTable.getRow(key);
+        return row?.original;
+      })
+      .filter(Boolean) as TData[];
+    onSelectionChange(selectedRows);
+  }, [rowSelection, onSelectionChange]);
+
+  // ==========================================================================
+  // Render Helpers
+  // ==========================================================================
+
+  const renderEditInput = (
+    column: Column<TData, unknown>,
+    cell: Cell<TData, unknown>
+  ) => {
+    const columnId =
+      'accessorKey' in column.columnDef
+        ? String(column.columnDef.accessorKey)
+        : column.id;
+    const currentValue = editingValues[columnId] ?? cell.getValue();
+    const editType = column.columnDef.meta?.editType || 'text';
+    const editOptions = column.columnDef.meta?.editOptions;
+
+    // Select type
+    if (editType === 'select' && editOptions) {
+      return (
+        <select
+          className="bh-edit-select"
+          value={String(currentValue ?? '')}
+          onChange={(e) => handleEditValueChange(columnId, e.target.value)}
+          onKeyDown={(e) => handleEditKeyDown(e, columnId)}
+          autoFocus
+        >
+          {editOptions.map((opt) => (
+            <option key={opt.value} value={opt.value}>
+              {opt.label}
+            </option>
+          ))}
+        </select>
+      );
+    }
+
+    // Text/Number/Date input
+    return (
+      <input
+        type={
+          editType === 'number' ? 'number' : editType === 'date' ? 'date' : 'text'
+        }
+        className="bh-edit-input"
+        value={currentValue != null ? String(currentValue) : ''}
+        onChange={(e) => {
+          const newValue =
+            editType === 'number' ? Number(e.target.value) : e.target.value;
+          handleEditValueChange(columnId, newValue);
+        }}
+        onKeyDown={(e) => handleEditKeyDown(e, columnId)}
+        autoFocus
+      />
+    );
+  };
+
+  const renderGroupRow = (row: Row<TData>) => {
+    const groupingColumnId = row.groupingColumnId!;
+    const groupValue = row.groupingValue;
+    const isExpanded = row.getIsExpanded();
+    const leafRows = row.getLeafRows();
+    const depth = row.depth;
+
+    return (
+      <TableRow
+        key={row.id}
+        className="bh-tr--group"
+        onClick={() => row.toggleExpanded()}
+      >
+        <TableCell colSpan={tableColumns.length} className="bh-td--group-label">
+          <div
+            className="bh-group-content"
+            style={{ paddingLeft: `${depth * 24}px` }}
+          >
+            <BhButtonIcon
+              iconName={isExpanded ? 'expand_more' : 'chevron_right'}
+              size="sm"
+              hierarchy="quaternary"
+              aria-label={isExpanded ? 'Collapse group' : 'Expand group'}
+            />
+            <span className="bh-group-label__text">
+              <span className="bh-group-label__column">{groupingColumnId}: </span>
+              <span className="bh-group-label__value">{String(groupValue)}</span>
+            </span>
+            <span className="bh-group-label__count">
+              ({leafRows.length} {leafRows.length === 1 ? 'item' : 'items'})
+            </span>
+          </div>
+        </TableCell>
+      </TableRow>
+    );
+  };
+
+  const renderDataRow = (row: Row<TData>) => {
+    const rowId = row.id;
+    const rowIsEditing = isRowEditing(rowId);
+
+    return (
+      <React.Fragment key={row.id}>
+        <TableRow
+          selected={row.getIsSelected()}
+          clickable={!!onRowClick && !rowIsEditing}
+          expandable={row.getCanExpand()}
+          expanded={row.getIsExpanded()}
+          className={rowIsEditing ? 'bh-tr--editing' : undefined}
+          onClick={
+            onRowClick && !rowIsEditing
+              ? () => onRowClick(row.original)
+              : undefined
+          }
+        >
+          {row.getVisibleCells().map((cell) => {
+            const column = cell.column;
+            const isCheckbox = column.id === 'select';
+            const isExpand = column.id === 'expand';
+            const isEditActions = column.id === 'edit-actions';
+            const columnId =
+              'accessorKey' in column.columnDef
+                ? String(column.columnDef.accessorKey)
+                : column.id;
+            const canEdit =
+              enableEditing && column.columnDef.meta?.editable !== false;
+            const isCellEditing = isEditing(rowId, columnId);
+
+            // For grouped cells, skip rendering aggregated/placeholder cells
+            if (cell.getIsGrouped()) {
+              return null;
+            }
+            if (cell.getIsAggregated()) {
+              return (
+                <TableCell key={cell.id}>
+                  {flexRender(
+                    column.columnDef.aggregatedCell ?? column.columnDef.cell,
+                    cell.getContext()
+                  )}
+                </TableCell>
+              );
+            }
+            if (cell.getIsPlaceholder()) {
+              return <TableCell key={cell.id} />;
+            }
+
+            return (
+              <TableCell
+                key={cell.id}
+                checkbox={isCheckbox}
+                expandTrigger={isExpand}
+                shrink={isCheckbox || isExpand || isEditActions}
+                className={
+                  canEdit && !isCellEditing && !isCheckbox && !isExpand && !isEditActions
+                    ? 'bh-td--editable'
+                    : isCellEditing
+                      ? 'bh-td--editing'
+                      : undefined
+                }
+                onClick={
+                  isCheckbox || isExpand || isEditActions
+                    ? (e) => e.stopPropagation()
+                    : undefined
+                }
+                onDoubleClick={
+                  canEdit &&
+                  editMode === 'cell' &&
+                  !isCellEditing &&
+                  !isCheckbox &&
+                  !isExpand &&
+                  !isEditActions
+                    ? () => startEditing(rowId, columnId)
+                    : undefined
+                }
+                style={{
+                  width:
+                    cell.column.getSize() !== 150
+                      ? cell.column.getSize()
+                      : undefined,
+                }}
+              >
+                {isCellEditing || (rowIsEditing && canEdit && editMode === 'row') ? (
+                  renderEditInput(column, cell)
+                ) : (
+                  flexRender(column.columnDef.cell, cell.getContext())
+                )}
+              </TableCell>
+            );
+          })}
+        </TableRow>
+
+        {/* Expanded Row Content */}
+        {row.getIsExpanded() && renderExpandedRow && !row.getIsGrouped() && (
+          <TableRow expansion>
+            <TableCell expansion colSpan={tableColumns.length}>
+              {renderExpandedRow(row)}
+            </TableCell>
+          </TableRow>
+        )}
+      </React.Fragment>
+    );
+  };
+
+  // ==========================================================================
+  // Render
+  // ==========================================================================
+
+  const selectedCount = Object.keys(rowSelection).filter(
+    (key) => rowSelection[key]
+  ).length;
+  const showActionBar =
+    actionBarLeft || actionBarRight || (selectedCount > 0 && bulkActions);
+
+  return (
+    <div className={className}>
+      {/* Action Bar */}
+      {showActionBar && (
+        <TableActionBar
+          selectionCount={selectedCount}
+          left={selectedCount > 0 ? bulkActions : actionBarLeft}
+          right={actionBarRight}
+        />
+      )}
+
+      {/* Table */}
+      <TableWrapper maxHeight={maxHeight} scrollY={!!maxHeight}>
+        <Table
+          size={size}
+          variant={variant}
+          rounded={rounded}
+          hoverable={hoverable}
+          loading={loading}
+        >
+          {/* Header */}
+          <TableHead sticky={stickyHeader}>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => {
+                  const isSortable = header.column.getCanSort();
+                  const sortDirection = header.column.getIsSorted();
+                  const isCheckbox = header.id === 'select';
+                  const isExpand = header.id === 'expand';
+                  const isEditActions = header.id === 'edit-actions';
+
+                  return (
+                    <TableHeaderCell
+                      key={header.id}
+                      sortable={isSortable}
+                      sortDirection={sortDirection || null}
+                      onClick={
+                        isSortable
+                          ? header.column.getToggleSortingHandler()
+                          : undefined
+                      }
+                      checkbox={isCheckbox}
+                      shrink={isCheckbox || isExpand || isEditActions}
+                      style={{
+                        width:
+                          header.getSize() !== 150
+                            ? header.getSize()
+                            : undefined,
+                      }}
+                    >
+                      {header.isPlaceholder
+                        ? null
+                        : flexRender(
+                            header.column.columnDef.header,
+                            header.getContext()
+                          )}
+                    </TableHeaderCell>
+                  );
+                })}
+              </TableRow>
+            ))}
+
+            {/* Filter Row */}
+            {enableFiltering && (
+              <TableRow filter>
+                {table.getHeaderGroups()[0]?.headers.map((header) => {
+                  const column = header.column;
+                  const canFilter = column.getCanFilter();
+                  const isCheckbox = header.id === 'select';
+                  const isExpand = header.id === 'expand';
+                  const isEditActions = header.id === 'edit-actions';
+
+                  if (!canFilter || isCheckbox || isExpand || isEditActions) {
+                    return <TableCell key={header.id} filter />;
+                  }
+
+                  return (
+                    <TableCell key={header.id} filter>
+                      <BhInputText
+                        placeholder=""
+                        label=""
+                        value={(column.getFilterValue() as string) ?? ''}
+                        onBhInput={(e: CustomEvent) =>
+                          column.setFilterValue(e.detail)
+                        }
+                      />
+                    </TableCell>
+                  );
+                })}
+              </TableRow>
+            )}
+          </TableHead>
+
+          {/* Body */}
+          <TableBody>
+            {table.getRowModel().rows.length === 0 ? (
+              <TableEmpty
+                title={emptyTitle}
+                description={emptyDescription}
+                colSpan={tableColumns.length}
+                icon={<span className="material-symbols-outlined">inbox</span>}
+              />
+            ) : (
+              table.getRowModel().rows.map((row) => {
+                // Check if this is a group row
+                if (row.getIsGrouped()) {
+                  return renderGroupRow(row);
+                }
+
+                // Regular data row
+                return renderDataRow(row);
+              })
+            )}
+          </TableBody>
+        </Table>
+      </TableWrapper>
+
+      {/* Pagination - hidden when grouping is enabled */}
+      {enablePagination && !enableGrouping && data.length > 0 && (
+        <TablePagination
+          page={table.getState().pagination.pageIndex + 1}
+          totalPages={table.getPageCount()}
+          totalItems={data.length}
+          pageSize={table.getState().pagination.pageSize}
+          pageSizeOptions={pageSizeOptions}
+          onPageChange={(page) => table.setPageIndex(page - 1)}
+          onPageSizeChange={(newSize) => table.setPageSize(newSize)}
+        />
+      )}
+    </div>
+  );
+}
+
+// =============================================================================
+// useDataTable Hook - For more control
+// =============================================================================
+
+export interface UseDataTableOptions<TData> {
+  data: TData[];
+  columns: ColumnDef<TData, unknown>[];
+  enableSorting?: boolean;
+  enableFiltering?: boolean;
+  enablePagination?: boolean;
+  enableRowSelection?: boolean;
+  enableExpanding?: boolean;
+  enableGrouping?: boolean;
+  groupBy?: string[];
+  pageSize?: number;
+  getRowId?: (row: TData, index: number) => string;
+  getSubRows?: (row: TData) => TData[] | undefined;
+}
+
+export function useDataTable<TData>({
+  data,
+  columns,
+  enableSorting = true,
+  enableFiltering = false,
+  enablePagination = true,
+  enableRowSelection = false,
+  enableExpanding = false,
+  enableGrouping = false,
+  groupBy = [],
+  pageSize = 10,
+  getRowId,
+  getSubRows,
+}: UseDataTableOptions<TData>): TanStackTable<TData> {
+  const [sorting, setSorting] = useState<SortingState>([]);
+  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
+  const [expanded, setExpanded] = useState<ExpandedState>({});
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize,
+  });
+  const [grouping, setGrouping] = useState<GroupingState>(groupBy);
+
+  return useReactTable({
+    data,
+    columns,
+    state: {
+      sorting,
+      columnFilters,
+      rowSelection,
+      expanded,
+      pagination,
+      grouping,
+    },
+    getRowId,
+    getSubRows,
+    enableRowSelection,
+    enableSorting,
+    enableFilters: enableFiltering,
+    enableExpanding: enableExpanding || enableGrouping,
+    enableGrouping,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    onRowSelectionChange: setRowSelection,
+    onExpandedChange: setExpanded,
+    onPaginationChange: setPagination,
+    onGroupingChange: setGrouping,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: enableSorting ? getSortedRowModel() : undefined,
+    getFilteredRowModel: enableFiltering ? getFilteredRowModel() : undefined,
+    getPaginationRowModel:
+      enablePagination && !enableGrouping ? getPaginationRowModel() : undefined,
+    getExpandedRowModel:
+      enableExpanding || enableGrouping ? getExpandedRowModel() : undefined,
+    getGroupedRowModel: enableGrouping ? getGroupedRowModel() : undefined,
+  });
+}
+
+// =============================================================================
+// Exports
+// =============================================================================
+
+export { DataTable as BhDataTable };
+export type {
+  ColumnDef,
+  SortingState,
+  ColumnFiltersState,
+  RowSelectionState,
+  GroupingState,
+};
+
+================
+File: src/components/table/index.tsx
+================
+/**
+ * Bellhop Table Primitives
+ *
+ * Composable table components for building static and dynamic tables.
+ * These primitives can be used standalone or combined with TanStack Table
+ * for advanced features like sorting, filtering, and pagination.
+ * Uses existing Bellhop components for consistency.
+ */
+
+import React, { forwardRef, createContext, useContext } from 'react';
+import { BhButtonIcon } from '../stencil-generated';
+
+// =============================================================================
+// Types
+// =============================================================================
+
+export type TableSize = 'compact' | 'default' | 'relaxed';
+export type TableVariant = 'default' | 'bordered' | 'striped';
+export type CellAlign = 'left' | 'center' | 'right';
+
+interface TableContextValue {
+  size: TableSize;
+  variant: TableVariant;
+  hoverable: boolean;
+}
+
+// =============================================================================
+// Context
+// =============================================================================
+
+const TableContext = createContext<TableContextValue>({
+  size: 'default',
+  variant: 'default',
+  hoverable: true,
+});
+
+const useTableContext = () => useContext(TableContext);
+
+// =============================================================================
+// Utility Functions
+// =============================================================================
+
+function clsx(...classes: (string | boolean | undefined | null)[]): string {
+  return classes.filter(Boolean).join(' ');
+}
+
+// =============================================================================
+// TableWrapper
+// =============================================================================
+
+export interface TableWrapperProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  /** Maximum height for vertical scrolling */
+  maxHeight?: string | number;
+  /** Maximum width for horizontal scrolling */
+  maxWidth?: string | number;
+  /** Enable horizontal scrolling */
+  scrollX?: boolean;
+  /** Enable vertical scrolling */
+  scrollY?: boolean;
+}
+
+export const TableWrapper = forwardRef<HTMLDivElement, TableWrapperProps>(
+  (
+    {
+      className,
+      children,
+      maxHeight,
+      maxWidth,
+      scrollX,
+      scrollY,
+      style,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <div
+        ref={ref}
+        className={clsx(
+          'bh-table-wrapper',
+          scrollX && 'bh-table-wrapper--scroll-x',
+          scrollY && 'bh-table-wrapper--scroll-y',
+          className
+        )}
+        style={{
+          maxHeight: maxHeight,
+          maxWidth: maxWidth,
+          ...style,
+        }}
+        tabIndex={0}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+TableWrapper.displayName = 'TableWrapper';
+
+// =============================================================================
+// Table
+// =============================================================================
+
+export interface TableProps
+  extends React.TableHTMLAttributes<HTMLTableElement> {
+  /** Table size variant */
+  size?: TableSize;
+  /** Table style variant */
+  variant?: TableVariant;
+  /** Show rounded corners */
+  rounded?: boolean;
+  /** Enable row hover effect */
+  hoverable?: boolean;
+  /** Enable responsive stacking on mobile */
+  responsive?: boolean;
+  /** Loading state */
+  loading?: boolean;
+}
+
+export const Table = forwardRef<HTMLTableElement, TableProps>(
+  (
+    {
+      className,
+      children,
+      size = 'default',
+      variant = 'default',
+      rounded = false,
+      hoverable = true,
+      responsive = false,
+      loading = false,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <TableContext.Provider value={{ size, variant, hoverable }}>
+        <table
+          ref={ref}
+          className={clsx(
+            'bh-table',
+            `bh-table--${size}`,
+            variant === 'bordered' && 'bh-table--bordered',
+            variant === 'striped' && 'bh-table--striped',
+            rounded && 'bh-table--rounded',
+            responsive && 'bh-table--responsive',
+            loading && 'bh-table--loading',
+            className
+          )}
+          {...props}
+        >
+          {children}
+        </table>
+      </TableContext.Provider>
+    );
+  }
+);
+
+Table.displayName = 'Table';
+
+// =============================================================================
+// TableCaption
+// =============================================================================
+
+export interface TableCaptionProps
+  extends React.HTMLAttributes<HTMLTableCaptionElement> {
+  /** Position of caption */
+  position?: 'top' | 'bottom';
+  /** Screen reader only */
+  srOnly?: boolean;
+}
+
+export const TableCaption = forwardRef<
+  HTMLTableCaptionElement,
+  TableCaptionProps
+>(
+  (
+    { className, children, position = 'top', srOnly = false, ...props },
+    ref
+  ) => {
+    return (
+      <caption
+        ref={ref}
+        className={clsx(
+          'bh-caption',
+          position === 'bottom' && 'bh-caption--bottom',
+          srOnly && 'bh-caption--sr-only',
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </caption>
+    );
+  }
+);
+
+TableCaption.displayName = 'TableCaption';
+
+// =============================================================================
+// TableHead (thead)
+// =============================================================================
+
+export interface TableHeadProps
+  extends React.HTMLAttributes<HTMLTableSectionElement> {
+  /** Make header sticky */
+  sticky?: boolean;
+  /** Use subtle styling */
+  subtle?: boolean;
+}
+
+export const TableHead = forwardRef<HTMLTableSectionElement, TableHeadProps>(
+  ({ className, children, sticky = false, subtle = false, ...props }, ref) => {
+    return (
+      <thead
+        ref={ref}
+        className={clsx(
+          'bh-thead',
+          sticky && 'bh-thead--sticky',
+          subtle && 'bh-thead--subtle',
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </thead>
+    );
+  }
+);
+
+TableHead.displayName = 'TableHead';
+
+// =============================================================================
+// TableBody (tbody)
+// =============================================================================
+
+export interface TableBodyProps
+  extends React.HTMLAttributes<HTMLTableSectionElement> {}
+
+export const TableBody = forwardRef<HTMLTableSectionElement, TableBodyProps>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <tbody ref={ref} className={clsx('bh-tbody', className)} {...props}>
+        {children}
+      </tbody>
+    );
+  }
+);
+
+TableBody.displayName = 'TableBody';
+
+// =============================================================================
+// TableFooter (tfoot)
+// =============================================================================
+
+export interface TableFooterProps
+  extends React.HTMLAttributes<HTMLTableSectionElement> {}
+
+export const TableFooter = forwardRef<
+  HTMLTableSectionElement,
+  TableFooterProps
+>(({ className, children, ...props }, ref) => {
+  return (
+    <tfoot ref={ref} className={clsx('bh-tfoot', className)} {...props}>
+      {children}
+    </tfoot>
+  );
+});
+
+TableFooter.displayName = 'TableFooter';
+
+// =============================================================================
+// TableRow (tr)
+// =============================================================================
+
+export interface TableRowProps
+  extends React.HTMLAttributes<HTMLTableRowElement> {
+  /** Row is selected */
+  selected?: boolean;
+  /** Row is clickable */
+  clickable?: boolean;
+  /** Row is expandable */
+  expandable?: boolean;
+  /** Row is expanded */
+  expanded?: boolean;
+  /** Row is a filter row */
+  filter?: boolean;
+  /** Row is an expansion content row */
+  expansion?: boolean;
+}
+
+export const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(
+  (
+    {
+      className,
+      children,
+      selected = false,
+      clickable = false,
+      expandable = false,
+      expanded = false,
+      filter = false,
+      expansion = false,
+      ...props
+    },
+    ref
+  ) => {
+    const { hoverable } = useTableContext();
+
+    return (
+      <tr
+        ref={ref}
+        className={clsx(
+          'bh-tr',
+          hoverable && 'bh-tr--hoverable',
+          selected && 'bh-tr--selected',
+          clickable && 'bh-tr--clickable',
+          expandable && 'bh-tr--expandable',
+          expanded && 'bh-tr--expanded',
+          filter && 'bh-tr--filter',
+          expansion && 'bh-tr--expansion',
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </tr>
+    );
+  }
+);
+
+TableRow.displayName = 'TableRow';
+
+// =============================================================================
+// TableHeaderCell (th)
+// =============================================================================
+
+export interface TableHeaderCellProps
+  extends React.ThHTMLAttributes<HTMLTableCellElement> {
+  /** Text alignment */
+  align?: CellAlign;
+  /** Column is sortable */
+  sortable?: boolean;
+  /** Current sort direction */
+  sortDirection?: 'asc' | 'desc' | null;
+  /** Shrink column to content width */
+  shrink?: boolean;
+  /** Expand column to fill space */
+  expand?: boolean;
+  /** Checkbox column */
+  checkbox?: boolean;
+  /** Actions column */
+  actions?: boolean;
+  /** Pin column to left */
+  pinnedLeft?: boolean;
+  /** Pin column to right */
+  pinnedRight?: boolean;
+}
+
+export const TableHeaderCell = forwardRef<
+  HTMLTableCellElement,
+  TableHeaderCellProps
+>(
+  (
+    {
+      className,
+      children,
+      align = 'left',
+      sortable = false,
+      sortDirection = null,
+      shrink = false,
+      expand = false,
+      checkbox = false,
+      actions = false,
+      pinnedLeft = false,
+      pinnedRight = false,
+      onClick,
+      ...props
+    },
+    ref
+  ) => {
+    const isSorted = sortDirection !== null;
+
+    return (
+      <th
+        ref={ref}
+        className={clsx(
+          'bh-th',
+          `bh-th--${align}`,
+          sortable && 'bh-th--sortable',
+          isSorted && 'bh-th--sorted',
+          shrink && 'bh-th--shrink',
+          expand && 'bh-th--expand',
+          checkbox && 'bh-th--checkbox',
+          actions && 'bh-th--actions',
+          pinnedLeft && 'bh-th--pinned-left',
+          pinnedRight && 'bh-th--pinned-right',
+          className
+        )}
+        onClick={sortable ? onClick : undefined}
+        aria-sort={
+          sortDirection === 'asc'
+            ? 'ascending'
+            : sortDirection === 'desc'
+            ? 'descending'
+            : undefined
+        }
+        {...props}
+      >
+        <span className="bh-th__content">
+          {children}
+          {sortable && isSorted && (
+            <span className="bh-th__sort-icon material-symbols-outlined">
+              {sortDirection === 'asc' ? 'arrow_upward' : 'arrow_downward'}
+            </span>
+          )}
+        </span>
+      </th>
+    );
+  }
+);
+
+TableHeaderCell.displayName = 'TableHeaderCell';
+
+// =============================================================================
+// TableCell (td)
+// =============================================================================
+
+export interface TableCellProps
+  extends React.TdHTMLAttributes<HTMLTableCellElement> {
+  /** Text alignment */
+  align?: CellAlign;
+  /** Cell contains numeric data */
+  numeric?: boolean;
+  /** Truncate long text */
+  truncate?: boolean;
+  /** Allow text to wrap */
+  wrap?: boolean;
+  /** Shrink cell to content width */
+  shrink?: boolean;
+  /** Expand cell to fill space */
+  expand?: boolean;
+  /** Checkbox cell */
+  checkbox?: boolean;
+  /** Actions cell */
+  actions?: boolean;
+  /** Expand trigger cell */
+  expandTrigger?: boolean;
+  /** Filter cell */
+  filter?: boolean;
+  /** Expansion content cell */
+  expansion?: boolean;
+  /** Pin cell to left */
+  pinnedLeft?: boolean;
+  /** Pin cell to right */
+  pinnedRight?: boolean;
+  /** Data label for responsive mode */
+  dataLabel?: string;
+}
+
+export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
+  (
+    {
+      className,
+      children,
+      align = 'left',
+      numeric = false,
+      truncate = false,
+      wrap = false,
+      shrink = false,
+      expand = false,
+      checkbox = false,
+      actions = false,
+      expandTrigger = false,
+      filter = false,
+      expansion = false,
+      pinnedLeft = false,
+      pinnedRight = false,
+      dataLabel,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <td
+        ref={ref}
+        className={clsx(
+          'bh-td',
+          `bh-td--${align}`,
+          numeric && 'bh-td--numeric',
+          truncate && 'bh-td--truncate',
+          wrap && 'bh-td--wrap',
+          shrink && 'bh-td--shrink',
+          expand && 'bh-td--expand',
+          checkbox && 'bh-td--checkbox',
+          actions && 'bh-td--actions',
+          expandTrigger && 'bh-td--expand-trigger',
+          filter && 'bh-td--filter',
+          expansion && 'bh-td--expansion',
+          pinnedLeft && 'bh-td--pinned-left',
+          pinnedRight && 'bh-td--pinned-right',
+          className
+        )}
+        data-label={dataLabel}
+        {...props}
+      >
+        {children}
+      </td>
+    );
+  }
+);
+
+TableCell.displayName = 'TableCell';
+
+// =============================================================================
+// TableEmpty
+// =============================================================================
+
+export interface TableEmptyProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Icon to display */
+  icon?: React.ReactNode;
+  /** Title text */
+  title?: string;
+  /** Description text */
+  description?: string;
+  /** Number of columns to span */
+  colSpan?: number;
+}
+
+export const TableEmpty = forwardRef<HTMLTableRowElement, TableEmptyProps>(
+  (
+    { className, children, icon, title, description, colSpan = 1, ...props },
+    ref
+  ) => {
+    return (
+      <tr ref={ref}>
+        <td colSpan={colSpan}>
+          <div className={clsx('bh-table-empty', className)} {...props}>
+            {icon && <div className="bh-table-empty__icon">{icon}</div>}
+            {title && <div className="bh-table-empty__title">{title}</div>}
+            {description && (
+              <div className="bh-table-empty__description">{description}</div>
+            )}
+            {children}
+          </div>
+        </td>
+      </tr>
+    );
+  }
+);
+
+TableEmpty.displayName = 'TableEmpty';
+
+// =============================================================================
+// TableActionBar
+// =============================================================================
+
+export interface TableActionBarProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  /** Selection count to display */
+  selectionCount?: number;
+  /** Left side content */
+  left?: React.ReactNode;
+  /** Right side content */
+  right?: React.ReactNode;
+}
+
+export const TableActionBar = forwardRef<HTMLDivElement, TableActionBarProps>(
+  ({ className, children, selectionCount, left, right, ...props }, ref) => {
+    const hasSelection = selectionCount !== undefined && selectionCount > 0;
+
+    return (
+      <div
+        ref={ref}
+        className={clsx(
+          'bh-table-action-bar',
+          hasSelection && 'bh-table-action-bar--selected',
+          className
+        )}
+        {...props}
+      >
+        <div className="bh-table-action-bar__left">
+          {hasSelection && (
+            <span className="bh-table-action-bar__selection-count">
+              {selectionCount} selected
+            </span>
+          )}
+          {left}
+        </div>
+        <div className="bh-table-action-bar__right">{right}</div>
+        {children}
+      </div>
+    );
+  }
+);
+
+TableActionBar.displayName = 'TableActionBar';
+
+// =============================================================================
+// TablePagination
+// =============================================================================
+
+export interface TablePaginationProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  /** Current page (1-indexed) */
+  page: number;
+  /** Total number of pages */
+  totalPages: number;
+  /** Total number of items */
+  totalItems?: number;
+  /** Items per page */
+  pageSize: number;
+  /** Available page sizes */
+  pageSizeOptions?: number[];
+  /** Callback when page changes */
+  onPageChange: (page: number) => void;
+  /** Callback when page size changes */
+  onPageSizeChange?: (pageSize: number) => void;
+}
+
+export const TablePagination = forwardRef<HTMLDivElement, TablePaginationProps>(
+  (
+    {
+      className,
+      page,
+      totalPages,
+      totalItems,
+      pageSize,
+      pageSizeOptions = [10, 25, 50, 100],
+      onPageChange,
+      onPageSizeChange,
+      ...props
+    },
+    ref
+  ) => {
+    const startItem = (page - 1) * pageSize + 1;
+    const endItem = Math.min(page * pageSize, totalItems || page * pageSize);
+
+    return (
+      <div
+        ref={ref}
+        className={clsx('bh-table-pagination', className)}
+        {...props}
+      >
+        <div className="bh-table-pagination__info">
+          {totalItems !== undefined ? (
+            <>
+              Showing {startItem} to {endItem} of {totalItems} results
+            </>
+          ) : (
+            <>
+              Page {page} of {totalPages}
+            </>
+          )}
+        </div>
+        <div className="bh-table-pagination__controls">
+          {onPageSizeChange && (
+            <div className="bh-table-pagination__page-size">
+              <span>Rows per page:</span>
+              <select
+                value={pageSize}
+                onChange={(e) => onPageSizeChange(Number(e.target.value))}
+                className="bh-table-pagination__select"
+              >
+                {pageSizeOptions.map((size) => (
+                  <option key={size} value={size}>
+                    {size}
+                  </option>
+                ))}
+              </select>
+            </div>
+          )}
+          <BhButtonIcon
+            iconName="first_page"
+            size="sm"
+            hierarchy="quaternary"
+            disabled={page <= 1}
+            onBhClick={() => onPageChange(1)}
+            aria-label="First page"
+          />
+          <BhButtonIcon
+            iconName="chevron_left"
+            size="sm"
+            hierarchy="quaternary"
+            disabled={page <= 1}
+            onBhClick={() => onPageChange(page - 1)}
+            aria-label="Previous page"
+          />
+          <BhButtonIcon
+            iconName="chevron_right"
+            size="sm"
+            hierarchy="quaternary"
+            disabled={page >= totalPages}
+            onBhClick={() => onPageChange(page + 1)}
+            aria-label="Next page"
+          />
+          <BhButtonIcon
+            iconName="last_page"
+            size="sm"
+            hierarchy="quaternary"
+            disabled={page >= totalPages}
+            onBhClick={() => onPageChange(totalPages)}
+            aria-label="Last page"
+          />
+        </div>
+      </div>
+    );
+  }
+);
+
+TablePagination.displayName = 'TablePagination';
+
+// =============================================================================
+// ExpandIcon
+// =============================================================================
+
+export interface ExpandIconProps extends React.HTMLAttributes<HTMLSpanElement> {
+  expanded?: boolean;
+}
+
+export const ExpandIcon = forwardRef<HTMLSpanElement, ExpandIconProps>(
+  ({ className, expanded = false, ...props }, ref) => {
+    return (
+      <span ref={ref} className={clsx('bh-expand-icon', className)} {...props}>
+        <span className="material-symbols-outlined">chevron_right</span>
+      </span>
+    );
+  }
+);
+
+ExpandIcon.displayName = 'ExpandIcon';
+
+// =============================================================================
+// Exports
+// =============================================================================
+
+export {
+  Table as BhTable,
+  TableWrapper as BhTableWrapper,
+  TableCaption as BhTableCaption,
+  TableHead as BhThead,
+  TableBody as BhTbody,
+  TableFooter as BhTfoot,
+  TableRow as BhTr,
+  TableHeaderCell as BhTh,
+  TableCell as BhTd,
+  TableEmpty as BhTableEmpty,
+  TableActionBar as BhTableActionBar,
+  TablePagination as BhTablePagination,
+  ExpandIcon as BhExpandIcon,
+};
+
+================
+File: src/index.ts
+================
+/**
+ * Bellhop React Components
+ *
+ * This package provides:
+ * 1. React wrapper components for BellhopOS Stencil web components (auto-generated)
+ * 2. Native React table primitives with TanStack Table integration
+ *
+ * NOTE: For feature-rich data grids, use <BhDataGrid> from the Stencil components.
+ * The table primitives below are for building custom table layouts.
+ */
+
+// Re-export all generated Stencil React components
+export * from './components/stencil-generated';
+
+// Re-export types from the core Stencil package
+export type {
+  ButtonHierarchy,
+  ButtonIconPosition,
+  ButtonSize,
+} from '@actabldesign/bellhop-core';
+
+// =============================================================================
+// Table Primitives (for composable tables)
+// =============================================================================
+
+export {
+  // Table primitives
+  Table,
+  TableWrapper,
+  TableCaption,
+  TableHead,
+  TableBody,
+  TableFooter,
+  TableRow,
+  TableHeaderCell,
+  TableCell,
+  TableEmpty,
+  TableActionBar,
+  TablePagination,
+  ExpandIcon,
+  // Aliased exports (Bh prefix)
+  BhTable,
+  BhTableWrapper,
+  BhTableCaption,
+  BhThead,
+  BhTbody,
+  BhTfoot,
+  BhTr,
+  BhTh,
+  BhTd,
+  BhTableEmpty,
+  BhTableActionBar,
+  BhTablePagination,
+  BhExpandIcon,
+} from './components/table';
+
+export type {
+  TableProps,
+  TableWrapperProps,
+  TableCaptionProps,
+  TableHeadProps,
+  TableBodyProps,
+  TableFooterProps,
+  TableRowProps,
+  TableHeaderCellProps,
+  TableCellProps,
+  TableEmptyProps,
+  TableActionBarProps,
+  TablePaginationProps,
+  ExpandIconProps,
+  TableSize,
+  TableVariant,
+  CellAlign,
+} from './components/table';
+
+// =============================================================================
+// DataTable (TanStack Table integration)
+// =============================================================================
+
+export {
+  DataTable,
+  BhDataTable,
+  useDataTable,
+  createSelectColumn,
+  createExpandColumn,
+  createEditActionsColumn,
+} from './components/table/DataTable';
+
+export type {
+  DataTableProps,
+  UseDataTableOptions,
+  ColumnDef,
+  SortingState,
+  ColumnFiltersState,
+  RowSelectionState,
+  EditMode,
+  EditState,
+  EditingValues,
+  RowChanges,
+  DataTableColumnMeta,
+} from './components/table/DataTable';
+
+================
+File: package.json
+================
+{
+  "name": "@actabldesign/bellhop-react",
+  "version": "0.0.4",
+  "description": "React components for Bellhop - Stencil wrappers and native React table primitives",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/actabldesign/bellhop.git",
+    "directory": "packages/bellhop-react"
+  },
+  "files": [
+    "dist/"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "build:watch": "tsc --watch"
+  },
+  "dependencies": {
+    "@actabldesign/bellhop-core": "file:../bellhop-core",
+    "@stencil/react-output-target": "^0.7.1"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "typescript": "^5.0.0"
+  },
+  "license": "MIT",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  }
+}
+
+================
+File: project.json
+================
+{
+  "name": "bellhop-react",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/bellhop-react/src",
+  "projectType": "library",
+  "tags": ["scope:react", "type:lib"],
+  "targets": {
+    "build": {
+      "executor": "nx:run-commands",
+      "dependsOn": ["^build"],
+      "options": {
+        "command": "npx tsc",
+        "cwd": "packages/bellhop-react"
+      },
+      "outputs": ["{projectRoot}/dist"]
+    }
+  },
+  "implicitDependencies": ["bellhop-core"]
+}
+
+================
+File: README.md
+================
+# @actabldesign/bellhop-react
+
+React component library for the Bellhop design system. Provides React wrappers for Stencil web components and native React table primitives with TanStack Table integration.
+
+## Installation
+
+```bash
+npm install @actabldesign/bellhop-react
+```
+
+### Peer Dependencies
+
+```bash
+npm install react react-dom
+```
+
+For table components with TanStack Table features:
+
+```bash
+npm install @tanstack/react-table
+```
+
+## Usage
+
+### Stencil Component Wrappers
+
+All Bellhop web components are available as React components with full TypeScript support and proper event handling.
+
+```tsx
+import { BhButton, BhInputText, BhCard } from '@actabldesign/bellhop-react';
+
+function MyComponent() {
+  return (
+    <BhCard>
+      <BhInputText
+        label="Email"
+        placeholder="Enter your email"
+        onBhInput={(e) => console.log(e.detail)}
+      />
+      <BhButton hierarchy="primary" onBhClick={() => console.log('Clicked!')}>
+        Submit
+      </BhButton>
+    </BhCard>
+  );
+}
+```
+
+### Available Stencil Components
+
+- **Layout**: `BhCard`, `BhContainer`, `BhModal`, `BhSidebar`, `BhAppbar`
+- **Forms**: `BhInputText`, `BhInputPassword`, `BhInputNumber`, `BhTextarea`, `BhCheckbox`, `BhRadioButton`, `BhToggle`, `BhDropdown`
+- **Buttons**: `BhButton`, `BhButtonIcon`
+- **Data Display**: `BhDataGrid`, `BhBadge`, `BhTag`, `BhAvatar`, `BhTooltip`
+- **Navigation**: `BhTabs`, `BhBreadcrumbs`, `BhPagination`, `BhPageNavigation`
+- **Feedback**: `BhNotification`, `BhLoaderSpinner`, `BhEmptyState`, `BhSkeletonLoader`
+- **Date/Time**: `BhDatePicker`, `BhDateRangePicker`, `BhMonthPicker`
+- **Charts**: `BhBarChart`, `BhPieChart`, `BhTrendChart`
+
+## Table Components
+
+### Table Primitives
+
+Composable table components for building static and dynamic tables.
+
+```tsx
+import {
+  Table,
+  TableWrapper,
+  TableHead,
+  TableBody,
+  TableRow,
+  TableHeaderCell,
+  TableCell,
+  TablePagination,
+} from '@actabldesign/bellhop-react';
+
+function BasicTable() {
+  return (
+    <TableWrapper>
+      <Table size="default" variant="default" hoverable>
+        <TableHead>
+          <TableRow>
+            <TableHeaderCell>Name</TableHeaderCell>
+            <TableHeaderCell>Email</TableHeaderCell>
+            <TableHeaderCell align="right">Actions</TableHeaderCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          <TableRow>
+            <TableCell>John Doe</TableCell>
+            <TableCell>john@example.com</TableCell>
+            <TableCell align="right">Edit</TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    </TableWrapper>
+  );
+}
+```
+
+#### Table Primitive Components
+
+| Component | Description |
+|-----------|-------------|
+| `Table` | Main table element with size, variant, and styling options |
+| `TableWrapper` | Scrollable container for tables |
+| `TableCaption` | Accessible table caption |
+| `TableHead` | Table header section (`<thead>`) |
+| `TableBody` | Table body section (`<tbody>`) |
+| `TableFooter` | Table footer section (`<tfoot>`) |
+| `TableRow` | Table row with selection and expansion states |
+| `TableHeaderCell` | Header cell with sorting support |
+| `TableCell` | Data cell with alignment and truncation options |
+| `TableEmpty` | Empty state display for tables |
+| `TableActionBar` | Toolbar for bulk actions and filters |
+| `TablePagination` | Pagination controls |
+
+### DataTable (TanStack Table Integration)
+
+A feature-rich data table component with built-in sorting, filtering, pagination, selection, expansion, grouping, and inline editing.
+
+```tsx
+import { DataTable, ColumnDef } from '@actabldesign/bellhop-react';
+
+interface User {
+  id: string;
+  name: string;
+  email: string;
+  role: string;
+}
+
+const columns: ColumnDef<User>[] = [
+  { accessorKey: 'name', header: 'Name' },
+  { accessorKey: 'email', header: 'Email' },
+  { accessorKey: 'role', header: 'Role' },
+];
+
+function UsersTable({ users }: { users: User[] }) {
+  return (
+    <DataTable
+      data={users}
+      columns={columns}
+      enableSorting
+      enablePagination
+      enableRowSelection
+      pageSize={10}
+      onSelectionChange={(selected) => console.log(selected)}
+    />
+  );
+}
+```
+
+#### DataTable Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `data` | `TData[]` | required | Table data array |
+| `columns` | `ColumnDef<TData>[]` | required | Column definitions |
+| `size` | `'compact' \| 'default' \| 'relaxed'` | `'default'` | Row height |
+| `variant` | `'default' \| 'bordered' \| 'striped'` | `'default'` | Visual style |
+| `enableSorting` | `boolean` | `true` | Enable column sorting |
+| `enableFiltering` | `boolean` | `false` | Enable column filters |
+| `enablePagination` | `boolean` | `true` | Enable pagination |
+| `enableRowSelection` | `boolean` | `false` | Enable row selection |
+| `enableExpanding` | `boolean` | `false` | Enable row expansion |
+| `enableGrouping` | `boolean` | `false` | Enable row grouping |
+| `enableEditing` | `boolean` | `false` | Enable inline editing |
+| `editMode` | `'cell' \| 'row'` | `'cell'` | Editing mode |
+| `pageSize` | `number` | `10` | Initial page size |
+| `stickyHeader` | `boolean` | `false` | Sticky table header |
+| `hoverable` | `boolean` | `true` | Row hover effect |
+| `loading` | `boolean` | `false` | Loading state |
+| `getRowId` | `(row, index) => string` | - | Custom row ID accessor |
+| `onSelectionChange` | `(rows) => void` | - | Selection change callback |
+| `onSortingChange` | `(sorting) => void` | - | Sort change callback |
+| `onRowClick` | `(row) => void` | - | Row click callback |
+| `onEditSave` | `(changes) => void` | - | Edit save callback |
+
+#### Column Helpers
+
+```tsx
+import {
+  createSelectColumn,
+  createExpandColumn,
+  createEditActionsColumn,
+} from '@actabldesign/bellhop-react';
+
+// Add selection checkbox column
+const selectColumn = createSelectColumn<User>();
+
+// Add expand/collapse column
+const expandColumn = createExpandColumn<User>();
+```
+
+### useDataTable Hook
+
+For more control over the table instance:
+
+```tsx
+import { useDataTable } from '@actabldesign/bellhop-react';
+
+function CustomTable({ data, columns }) {
+  const table = useDataTable({
+    data,
+    columns,
+    enableSorting: true,
+    enablePagination: true,
+    pageSize: 25,
+  });
+
+  // Access table state and methods
+  const { getRowModel, getHeaderGroups } = table;
+
+  // Build custom UI with table instance
+}
+```
+
+## Type Exports
+
+```tsx
+import type {
+  // Button types
+  ButtonHierarchy,
+  ButtonIconPosition,
+  ButtonSize,
+  // Table types
+  TableProps,
+  TableSize,
+  TableVariant,
+  CellAlign,
+  // DataTable types
+  DataTableProps,
+  ColumnDef,
+  SortingState,
+  ColumnFiltersState,
+  RowSelectionState,
+  EditMode,
+  EditState,
+  RowChanges,
+} from '@actabldesign/bellhop-react';
+```
+
+## Styling
+
+Components use CSS classes from `@actabldesign/bellhop-styles`. Import the styles in your application:
+
+```tsx
+import '@actabldesign/bellhop-styles/dist/bellhop.css';
+```
+
+## Related Packages
+
+- `@actabldesign/bellhop-core` - Web Components (StencilJS)
+- `@actabldesign/bellhop-styles` - CSS styles and design tokens
+- `@actabldesign/bellhop-assets` - SVG icons, illustrations, logos
+
+## License
+
+MIT
+
+================
+File: tsconfig.json
+================
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "lib": ["DOM", "ES2020"],
+    "jsx": "react-jsx",
+    "declaration": true,
+    "declarationMap": true,
+    "strict": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "outDir": "dist",
+    "rootDir": "src",
+    "paths": {
+      "@actabldesign/bellhop-core": ["../bellhop-core/dist/types/components.d.ts"],
+      "@actabldesign/bellhop-core/*": ["../bellhop-core/*"]
+    },
+    "baseUrl": ".",
+    "typeRoots": ["./node_modules/@types", "../../node_modules/@types"]
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"]
+}
+
+
+
+
+
+================================================================
+End of Codebase
+================================================================