@getufy/flint-ui-react 0.2.2 → 0.4.0

package/dist/components/FlintLink.d.ts

@@ -1,4 +1,30 @@
 import React from 'react';
 import { FlintLink as FlintLinkElement } from '@getufy/flint-ui/link/flint-link';
-export declare const FlintLink: import("@lit/react").ReactWebComponent<FlintLinkElement, {}>;
-export type FlintLinkProps = React.ComponentProps<typeof FlintLink>;
+/**
+ * The Link component allows you to easily customize anchor elements
+with theme colors and typography styles.
+ *
+ * @slot - Link text or content.
+Native click events propagate from the shadow DOM anchor element.
+ */
+export interface FlintLinkProps extends Omit<React.HTMLAttributes<FlintLinkElement>, 'color'> {
+    /** The URL of the link. */
+    href?: string;
+    /** Where to open the link. */
+    target?: '_self' | '_blank' | '_parent' | '_top';
+    /** Specifies the relationship of the target object. */
+    rel?: string;
+    /** The color of the link. */
+    color?: FlintLinkElement['color'];
+    /** Controls the underline behavior. */
+    underline?: 'none' | 'hover' | 'always';
+    /** Applies typography variant styles. */
+    variant?: FlintLinkElement['variant'];
+    /** If true, the link is disabled. */
+    disabled?: boolean;
+    /** The download attribute. */
+    download?: string;
+    /** The ARIA label. */
+    label?: string;
+}
+export declare const FlintLink: React.ForwardRefExoticComponent<FlintLinkProps & React.RefAttributes<FlintLinkElement>>;

package/dist/components/FlintLink.js

@@ -0,0 +1,12 @@
+// src/components/FlintLink.tsx
+import React from "react";
+import { createComponent } from "@lit/react";
+import { FlintLink as FlintLinkElement } from "@getufy/flint-ui/link/flint-link";
+var FlintLink = createComponent({
+  tagName: "flint-link",
+  elementClass: FlintLinkElement,
+  react: React
+});
+export {
+  FlintLink
+};

package/dist/components/FlintList.d.ts

@@ -1,4 +1,12 @@
 import React from 'react';
 import { FlintList as FlintListElement } from '@getufy/flint-ui/list/flint-list';
-export declare const FlintList: import("@lit/react").ReactWebComponent<FlintListElement, {}>;
-export type FlintListProps = React.ComponentProps<typeof FlintList>;
+/**
+ * flint-list: A wrapper for list items.
+ */
+export interface FlintListProps extends React.HTMLAttributes<FlintListElement> {
+    /** Whether to disable the default padding on the list. */
+    disablePadding?: boolean;
+    /** Whether to use compact spacing for list items. */
+    dense?: boolean;
+}
+export declare const FlintList: React.ForwardRefExoticComponent<FlintListProps & React.RefAttributes<FlintListElement>>;

package/dist/components/FlintList.js

@@ -0,0 +1,12 @@
+// src/components/FlintList.tsx
+import React from "react";
+import { createComponent } from "@lit/react";
+import { FlintList as FlintListElement } from "@getufy/flint-ui/list/flint-list";
+var FlintList = createComponent({
+  tagName: "flint-list",
+  elementClass: FlintListElement,
+  react: React
+});
+export {
+  FlintList
+};

package/dist/components/FlintListItem.d.ts

@@ -1,4 +1,8 @@
 import React from 'react';
 import { FlintListItem as FlintListItemElement } from '@getufy/flint-ui/list/flint-list';
-export declare const FlintListItem: import("@lit/react").ReactWebComponent<FlintListItemElement, {}>;
-export type FlintListItemProps = React.ComponentProps<typeof FlintListItem>;
+/**
+ * flint-list-item: A common list item.
+ */
+export interface FlintListItemProps extends React.HTMLAttributes<FlintListItemElement> {
+}
+export declare const FlintListItem: React.ForwardRefExoticComponent<FlintListItemProps & React.RefAttributes<FlintListItemElement>>;

package/dist/components/FlintListItem.js

@@ -0,0 +1,12 @@
+// src/components/FlintListItem.tsx
+import React from "react";
+import { createComponent } from "@lit/react";
+import { FlintListItem as FlintListItemElement } from "@getufy/flint-ui/list/flint-list";
+var FlintListItem = createComponent({
+  tagName: "flint-list-item",
+  elementClass: FlintListItemElement,
+  react: React
+});
+export {
+  FlintListItem
+};

package/dist/components/FlintListItemAvatar.d.ts

@@ -1,4 +1,8 @@
 import React from 'react';
 import { FlintListItemAvatar as FlintListItemAvatarElement } from '@getufy/flint-ui/list/flint-list';
-export declare const FlintListItemAvatar: import("@lit/react").ReactWebComponent<FlintListItemAvatarElement, {}>;
-export type FlintListItemAvatarProps = React.ComponentProps<typeof FlintListItemAvatar>;
+/**
+ * flint-list-item-avatar: An avatar wrapper inside a list item.
+ */
+export interface FlintListItemAvatarProps extends React.HTMLAttributes<FlintListItemAvatarElement> {
+}
+export declare const FlintListItemAvatar: React.ForwardRefExoticComponent<FlintListItemAvatarProps & React.RefAttributes<FlintListItemAvatarElement>>;

package/dist/components/FlintListItemAvatar.js

@@ -0,0 +1,12 @@
+// src/components/FlintListItemAvatar.tsx
+import React from "react";
+import { createComponent } from "@lit/react";
+import { FlintListItemAvatar as FlintListItemAvatarElement } from "@getufy/flint-ui/list/flint-list";
+var FlintListItemAvatar = createComponent({
+  tagName: "flint-list-item-avatar",
+  elementClass: FlintListItemAvatarElement,
+  react: React
+});
+export {
+  FlintListItemAvatar
+};

package/dist/components/FlintListItemButton.d.ts

@@ -1,4 +1,12 @@
 import React from 'react';
 import { FlintListItemButton as FlintListItemButtonElement } from '@getufy/flint-ui/list/flint-list';
-export declare const FlintListItemButton: import("@lit/react").ReactWebComponent<FlintListItemButtonElement, {}>;
-export type FlintListItemButtonProps = React.ComponentProps<typeof FlintListItemButton>;
+/**
+ * flint-list-item-button: An action element inside a list item.
+ */
+export interface FlintListItemButtonProps extends React.HTMLAttributes<FlintListItemButtonElement> {
+    /** Whether the list item button is disabled. */
+    disabled?: boolean;
+    /** Whether the list item button is selected. */
+    selected?: boolean;
+}
+export declare const FlintListItemButton: React.ForwardRefExoticComponent<FlintListItemButtonProps & React.RefAttributes<FlintListItemButtonElement>>;

package/dist/components/FlintListItemButton.js

@@ -0,0 +1,12 @@
+// src/components/FlintListItemButton.tsx
+import React from "react";
+import { createComponent } from "@lit/react";
+import { FlintListItemButton as FlintListItemButtonElement } from "@getufy/flint-ui/list/flint-list";
+var FlintListItemButton = createComponent({
+  tagName: "flint-list-item-button",
+  elementClass: FlintListItemButtonElement,
+  react: React
+});
+export {
+  FlintListItemButton
+};

package/dist/components/FlintListItemIcon.d.ts

@@ -1,4 +1,8 @@
 import React from 'react';
 import { FlintListItemIcon as FlintListItemIconElement } from '@getufy/flint-ui/list/flint-list';
-export declare const FlintListItemIcon: import("@lit/react").ReactWebComponent<FlintListItemIconElement, {}>;
-export type FlintListItemIconProps = React.ComponentProps<typeof FlintListItemIcon>;
+/**
+ * flint-list-item-icon: An icon wrapper inside a list item.
+ */
+export interface FlintListItemIconProps extends React.HTMLAttributes<FlintListItemIconElement> {
+}
+export declare const FlintListItemIcon: React.ForwardRefExoticComponent<FlintListItemIconProps & React.RefAttributes<FlintListItemIconElement>>;

package/dist/components/FlintListItemIcon.js

@@ -0,0 +1,12 @@
+// src/components/FlintListItemIcon.tsx
+import React from "react";
+import { createComponent } from "@lit/react";
+import { FlintListItemIcon as FlintListItemIconElement } from "@getufy/flint-ui/list/flint-list";
+var FlintListItemIcon = createComponent({
+  tagName: "flint-list-item-icon",
+  elementClass: FlintListItemIconElement,
+  react: React
+});
+export {
+  FlintListItemIcon
+};

package/dist/components/FlintListItemText.d.ts

@@ -1,4 +1,12 @@
 import React from 'react';
 import { FlintListItemText as FlintListItemTextElement } from '@getufy/flint-ui/list/flint-list';
-export declare const FlintListItemText: import("@lit/react").ReactWebComponent<FlintListItemTextElement, {}>;
-export type FlintListItemTextProps = React.ComponentProps<typeof FlintListItemText>;
+/**
+ * flint-list-item-text: A container for text content.
+ */
+export interface FlintListItemTextProps extends React.HTMLAttributes<FlintListItemTextElement> {
+    /** Primary text content of the list item. */
+    primary?: string;
+    /** Secondary text content of the list item. */
+    secondary?: string;
+}
+export declare const FlintListItemText: React.ForwardRefExoticComponent<FlintListItemTextProps & React.RefAttributes<FlintListItemTextElement>>;

package/dist/components/FlintListItemText.js

@@ -0,0 +1,12 @@
+// src/components/FlintListItemText.tsx
+import React from "react";
+import { createComponent } from "@lit/react";
+import { FlintListItemText as FlintListItemTextElement } from "@getufy/flint-ui/list/flint-list";
+var FlintListItemText = createComponent({
+  tagName: "flint-list-item-text",
+  elementClass: FlintListItemTextElement,
+  react: React
+});
+export {
+  FlintListItemText
+};

package/dist/components/FlintListSubheader.d.ts

@@ -1,4 +1,8 @@
 import React from 'react';
 import { FlintListSubheader as FlintListSubheaderElement } from '@getufy/flint-ui/list/flint-list';
-export declare const FlintListSubheader: import("@lit/react").ReactWebComponent<FlintListSubheaderElement, {}>;
-export type FlintListSubheaderProps = React.ComponentProps<typeof FlintListSubheader>;
+/**
+ * flint-list-subheader: A label for a nested list.
+ */
+export interface FlintListSubheaderProps extends React.HTMLAttributes<FlintListSubheaderElement> {
+}
+export declare const FlintListSubheader: React.ForwardRefExoticComponent<FlintListSubheaderProps & React.RefAttributes<FlintListSubheaderElement>>;

package/dist/components/FlintListSubheader.js

@@ -0,0 +1,12 @@
+// src/components/FlintListSubheader.tsx
+import React from "react";
+import { createComponent } from "@lit/react";
+import { FlintListSubheader as FlintListSubheaderElement } from "@getufy/flint-ui/list/flint-list";
+var FlintListSubheader = createComponent({
+  tagName: "flint-list-subheader",
+  elementClass: FlintListSubheaderElement,
+  react: React
+});
+export {
+  FlintListSubheader
+};

package/dist/components/FlintMenu.d.ts

@@ -1,7 +1,26 @@
 import React from 'react';
-import { type EventName } from '@lit/react';
 import { FlintMenu as FlintMenuElement } from '@getufy/flint-ui/menu/flint-menu';
-export declare const FlintMenu: import("@lit/react").ReactWebComponent<FlintMenuElement, {
-    onFlintMenuClose: EventName<CustomEvent>;
-}>;
-export type FlintMenuProps = React.ComponentProps<typeof FlintMenu>;
+export interface FlintMenuCloseDetail {
+    open: boolean;
+}
+/**
+ * A menu displays a list of choices on a temporary surface.
+Place it as a sibling to its anchor element inside a `position:relative` container.
+ *
+ * @slot - Menu content (flint-menu-item elements).
+ */
+export interface FlintMenuProps extends React.HTMLAttributes<FlintMenuElement> {
+    /** Whether the menu is open/visible. */
+    open?: boolean;
+    /** Menu placement relative to its anchor container. */
+    placement?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end' | 'right-start' | 'left-start';
+    /** When true, selecting an item automatically fires flint-menu-close. */
+    closeOnSelect?: boolean;
+    /** When true, constrains height to --flint-menu-max-height (default 300px) and enables scrolling. */
+    scrollable?: boolean;
+    /** Accessible label for the menu surface (aria-label on role="menu"). */
+    label?: string;
+    /** Fired when the menu requests to be closed (backdrop click, Escape, or item select). detail: `{ open: false }` */
+    onFlintMenuClose?: (event: CustomEvent<FlintMenuCloseDetail>) => void;
+}
+export declare const FlintMenu: React.ForwardRefExoticComponent<FlintMenuProps & React.RefAttributes<FlintMenuElement>>;

package/dist/components/FlintMenu.js

@@ -0,0 +1,15 @@
+// src/components/FlintMenu.tsx
+import React from "react";
+import { createComponent } from "@lit/react";
+import { FlintMenu as FlintMenuElement } from "@getufy/flint-ui/menu/flint-menu";
+var FlintMenu = createComponent({
+  tagName: "flint-menu",
+  elementClass: FlintMenuElement,
+  react: React,
+  events: {
+    onFlintMenuClose: "flint-menu-close"
+  }
+});
+export {
+  FlintMenu
+};

package/dist/components/FlintMenuDivider.d.ts

@@ -1,4 +1,8 @@
 import React from 'react';
 import { FlintMenuDivider as FlintMenuDividerElement } from '@getufy/flint-ui/menu/flint-menu';
-export declare const FlintMenuDivider: import("@lit/react").ReactWebComponent<FlintMenuDividerElement, {}>;
-export type FlintMenuDividerProps = React.ComponentProps<typeof FlintMenuDivider>;
+/**
+ * A hairline separator for grouping items in a menu.
+ */
+export interface FlintMenuDividerProps extends React.HTMLAttributes<FlintMenuDividerElement> {
+}
+export declare const FlintMenuDivider: React.ForwardRefExoticComponent<FlintMenuDividerProps & React.RefAttributes<FlintMenuDividerElement>>;

package/dist/components/FlintMenuDivider.js

@@ -0,0 +1,12 @@
+// src/components/FlintMenuDivider.tsx
+import React from "react";
+import { createComponent } from "@lit/react";
+import { FlintMenuDivider as FlintMenuDividerElement } from "@getufy/flint-ui/menu/flint-menu";
+var FlintMenuDivider = createComponent({
+  tagName: "flint-menu-divider",
+  elementClass: FlintMenuDividerElement,
+  react: React
+});
+export {
+  FlintMenuDivider
+};

package/dist/components/FlintMenuGroup.d.ts

@@ -1,4 +1,13 @@
 import React from 'react';
 import { FlintMenuGroup as FlintMenuGroupElement } from '@getufy/flint-ui/menu/flint-menu';
-export declare const FlintMenuGroup: import("@lit/react").ReactWebComponent<FlintMenuGroupElement, {}>;
-export type FlintMenuGroupProps = React.ComponentProps<typeof FlintMenuGroup>;
+/**
+ * A labelled group of menu items. Wraps items in a `role="group"` for
+screen-reader announcements.
+ *
+ * @slot - Group items (flint-menu-item elements).
+ */
+export interface FlintMenuGroupProps extends React.HTMLAttributes<FlintMenuGroupElement> {
+    /** Visible heading rendered above the group items. */
+    label?: string;
+}
+export declare const FlintMenuGroup: React.ForwardRefExoticComponent<FlintMenuGroupProps & React.RefAttributes<FlintMenuGroupElement>>;

package/dist/components/FlintMenuGroup.js

@@ -0,0 +1,12 @@
+// src/components/FlintMenuGroup.tsx
+import React from "react";
+import { createComponent } from "@lit/react";
+import { FlintMenuGroup as FlintMenuGroupElement } from "@getufy/flint-ui/menu/flint-menu";
+var FlintMenuGroup = createComponent({
+  tagName: "flint-menu-group",
+  elementClass: FlintMenuGroupElement,
+  react: React
+});
+export {
+  FlintMenuGroup
+};

package/dist/components/FlintMenuItem.d.ts

@@ -1,7 +1,25 @@
 import React from 'react';
-import { type EventName } from '@lit/react';
 import { FlintMenuItem as FlintMenuItemElement } from '@getufy/flint-ui/menu/flint-menu';
-export declare const FlintMenuItem: import("@lit/react").ReactWebComponent<FlintMenuItemElement, {
-    onFlintMenuItemSelect: EventName<CustomEvent>;
-}>;
-export type FlintMenuItemProps = React.ComponentProps<typeof FlintMenuItem>;
+/**
+ * A single option inside a `flint-menu`.
+ *
+ * @slot - Item label text.
+ * @slot icon - Leading icon.
+ * @slot end-icon - Trailing icon or shortcut hint.
+ */
+export interface FlintMenuItemProps extends React.HTMLAttributes<FlintMenuItemElement> {
+    /** Marks this item as the currently selected option. */
+    selected?: boolean;
+    /** Disables the item — it becomes non-interactive. */
+    disabled?: boolean;
+    /** Dense padding mode (for desktop-density menus). */
+    dense?: boolean;
+    /** Renders a hairline separator below this item. */
+    divider?: boolean;
+    /** The machine-readable value carried in the `flint-menu-item-select` event detail. */
+    value?: string;
+    /** Fired when the item is activated.
+detail: { value: string | null, label: string } */
+    onFlintMenuItemSelect?: (event: CustomEvent) => void;
+}
+export declare const FlintMenuItem: React.ForwardRefExoticComponent<FlintMenuItemProps & React.RefAttributes<FlintMenuItemElement>>;

package/dist/components/FlintMenuItem.js

@@ -0,0 +1,15 @@
+// src/components/FlintMenuItem.tsx
+import React from "react";
+import { createComponent } from "@lit/react";
+import { FlintMenuItem as FlintMenuItemElement } from "@getufy/flint-ui/menu/flint-menu";
+var FlintMenuItem = createComponent({
+  tagName: "flint-menu-item",
+  elementClass: FlintMenuItemElement,
+  react: React,
+  events: {
+    onFlintMenuItemSelect: "flint-menu-item-select"
+  }
+});
+export {
+  FlintMenuItem
+};

package/dist/components/FlintMenubar.d.ts

@@ -1,4 +1,19 @@
 import React from 'react';
 import { FlintMenubar as FlintMenubarElement } from '@getufy/flint-ui/menubar/flint-menubar';
-export declare const FlintMenubar: import("@lit/react").ReactWebComponent<FlintMenubarElement, {}>;
-export type FlintMenubarProps = React.ComponentProps<typeof FlintMenubar>;
+/**
+ * A visually persistent horizontal menu bar, common in desktop applications.
+Hosts one or more `<flint-menubar-menu>` children.
+ *
+ * @slot - One or more `<flint-menubar-menu>` elements.
+ */
+export interface FlintMenubarProps extends React.HTMLAttributes<FlintMenubarElement> {
+    /** Accessible label for the menubar region. Defaults to "Menu bar". */
+    label?: string;
+    /** Bubbles from items. */
+    onFlintMenubarItemSelect?: (event: CustomEvent) => void;
+    /** Bubbles from checkbox items. */
+    onFlintMenubarCheckboxChange?: (event: CustomEvent) => void;
+    /** Bubbles from radio groups. */
+    onFlintMenubarRadioChange?: (event: CustomEvent) => void;
+}
+export declare const FlintMenubar: React.ForwardRefExoticComponent<FlintMenubarProps & React.RefAttributes<FlintMenubarElement>>;

package/dist/components/FlintMenubar.js

@@ -0,0 +1,17 @@
+// src/components/FlintMenubar.tsx
+import React from "react";
+import { createComponent } from "@lit/react";
+import { FlintMenubar as FlintMenubarElement } from "@getufy/flint-ui/menubar/flint-menubar";
+var FlintMenubar = createComponent({
+  tagName: "flint-menubar",
+  elementClass: FlintMenubarElement,
+  react: React,
+  events: {
+    onFlintMenubarItemSelect: "flint-menubar-item-select",
+    onFlintMenubarCheckboxChange: "flint-menubar-checkbox-change",
+    onFlintMenubarRadioChange: "flint-menubar-radio-change"
+  }
+});
+export {
+  FlintMenubar
+};

package/dist/components/FlintMenubarCheckboxItem.d.ts

@@ -1,7 +1,22 @@
 import React from 'react';
-import { type EventName } from '@lit/react';
 import { FlintMenubarCheckboxItem as FlintMenubarCheckboxItemElement } from '@getufy/flint-ui/menubar/flint-menubar';
-export declare const FlintMenubarCheckboxItem: import("@lit/react").ReactWebComponent<FlintMenubarCheckboxItemElement, {
-    onFlintMenubarCheckboxChange: EventName<CustomEvent>;
-}>;
-export type FlintMenubarCheckboxItemProps = React.ComponentProps<typeof FlintMenubarCheckboxItem>;
+export interface FlintMenubarCheckboxChangeDetail {
+    checked: boolean;
+    value: string;
+}
+/**
+ * A toggleable checkbox menu item.
+ */
+export interface FlintMenubarCheckboxItemProps extends React.HTMLAttributes<FlintMenubarCheckboxItemElement> {
+    /** Whether the checkbox item is currently checked. */
+    checked?: boolean;
+    /** Whether the item is non-interactive. */
+    disabled?: boolean;
+    /** Whether the item is visually highlighted (e.g. via keyboard or hover). */
+    highlighted?: boolean;
+    /** Explicit value for the change event. Falls back to label text (excludes shortcut). */
+    value?: string;
+    /** detail: `{ checked: boolean, value: string }` */
+    onFlintMenubarCheckboxChange?: (event: CustomEvent<FlintMenubarCheckboxChangeDetail>) => void;
+}
+export declare const FlintMenubarCheckboxItem: React.ForwardRefExoticComponent<FlintMenubarCheckboxItemProps & React.RefAttributes<FlintMenubarCheckboxItemElement>>;

package/dist/components/FlintMenubarCheckboxItem.js

@@ -0,0 +1,15 @@
+// src/components/FlintMenubarCheckboxItem.tsx
+import React from "react";
+import { createComponent } from "@lit/react";
+import { FlintMenubarCheckboxItem as FlintMenubarCheckboxItemElement } from "@getufy/flint-ui/menubar/flint-menubar";
+var FlintMenubarCheckboxItem = createComponent({
+  tagName: "flint-menubar-checkbox-item",
+  elementClass: FlintMenubarCheckboxItemElement,
+  react: React,
+  events: {
+    onFlintMenubarCheckboxChange: "flint-menubar-checkbox-change"
+  }
+});
+export {
+  FlintMenubarCheckboxItem
+};

package/dist/components/FlintMenubarContent.d.ts

@@ -1,7 +1,15 @@
 import React from 'react';
-import { type EventName } from '@lit/react';
 import { FlintMenubarContent as FlintMenubarContentElement } from '@getufy/flint-ui/menubar/flint-menubar';
-export declare const FlintMenubarContent: import("@lit/react").ReactWebComponent<FlintMenubarContentElement, {
-    onFlintMenubarRequestClose: EventName<CustomEvent>;
-}>;
-export type FlintMenubarContentProps = React.ComponentProps<typeof FlintMenubarContent>;
+export interface FlintMenubarRequestCloseDetail {
+    open: boolean;
+}
+/**
+ * The dropdown content panel for a menubar menu.
+Positioned absolutely below the trigger.
+ */
+export interface FlintMenubarContentProps extends React.HTMLAttributes<FlintMenubarContentElement> {
+    /** Whether the content dropdown panel is visible. */
+    open?: boolean;
+    onFlintMenubarRequestClose?: (event: CustomEvent<FlintMenubarRequestCloseDetail>) => void;
+}
+export declare const FlintMenubarContent: React.ForwardRefExoticComponent<FlintMenubarContentProps & React.RefAttributes<FlintMenubarContentElement>>;

package/dist/components/FlintMenubarContent.js

@@ -0,0 +1,15 @@
+// src/components/FlintMenubarContent.tsx
+import React from "react";
+import { createComponent } from "@lit/react";
+import { FlintMenubarContent as FlintMenubarContentElement } from "@getufy/flint-ui/menubar/flint-menubar";
+var FlintMenubarContent = createComponent({
+  tagName: "flint-menubar-content",
+  elementClass: FlintMenubarContentElement,
+  react: React,
+  events: {
+    onFlintMenubarRequestClose: "flint-menubar-request-close"
+  }
+});
+export {
+  FlintMenubarContent
+};

package/dist/components/FlintMenubarGroup.d.ts

@@ -1,4 +1,10 @@
 import React from 'react';
 import { FlintMenubarGroup as FlintMenubarGroupElement } from '@getufy/flint-ui/menubar/flint-menubar';
-export declare const FlintMenubarGroup: import("@lit/react").ReactWebComponent<FlintMenubarGroupElement, {}>;
-export type FlintMenubarGroupProps = React.ComponentProps<typeof FlintMenubarGroup>;
+/**
+ * Groups related menu items. Optional `heading` shows a label.
+ */
+export interface FlintMenubarGroupProps extends React.HTMLAttributes<FlintMenubarGroupElement> {
+    /** Label text displayed above the group. */
+    heading?: string;
+}
+export declare const FlintMenubarGroup: React.ForwardRefExoticComponent<FlintMenubarGroupProps & React.RefAttributes<FlintMenubarGroupElement>>;

package/dist/components/FlintMenubarGroup.js

@@ -0,0 +1,12 @@
+// src/components/FlintMenubarGroup.tsx
+import React from "react";
+import { createComponent } from "@lit/react";
+import { FlintMenubarGroup as FlintMenubarGroupElement } from "@getufy/flint-ui/menubar/flint-menubar";
+var FlintMenubarGroup = createComponent({
+  tagName: "flint-menubar-group",
+  elementClass: FlintMenubarGroupElement,
+  react: React
+});
+export {
+  FlintMenubarGroup
+};

package/dist/components/FlintMenubarItem.d.ts

@@ -1,7 +1,23 @@
 import React from 'react';
-import { type EventName } from '@lit/react';
 import { FlintMenubarItem as FlintMenubarItemElement } from '@getufy/flint-ui/menubar/flint-menubar';
-export declare const FlintMenubarItem: import("@lit/react").ReactWebComponent<FlintMenubarItemElement, {
-    onFlintMenubarItemSelect: EventName<CustomEvent>;
-}>;
-export type FlintMenubarItemProps = React.ComponentProps<typeof FlintMenubarItem>;
+export interface FlintMenubarItemSelectDetail {
+    value: string;
+}
+/**
+ * A single interactive option inside a menubar dropdown.
+ *
+ * @slot - Item label text plus optional `<flint-menubar-shortcut>`.
+ */
+export interface FlintMenubarItemProps extends React.HTMLAttributes<FlintMenubarItemElement> {
+    /** Whether the item is non-interactive. */
+    disabled?: boolean;
+    /** Whether the item is visually highlighted (e.g. via keyboard or hover). */
+    highlighted?: boolean;
+    /** Whether the item label is inset to align with checkbox/radio items. */
+    inset?: boolean;
+    /** Explicit value for the select event. Falls back to label text (excludes shortcut). */
+    value?: string;
+    /** Fired on activation. detail: `{ value: string }` */
+    onFlintMenubarItemSelect?: (event: CustomEvent<FlintMenubarItemSelectDetail>) => void;
+}
+export declare const FlintMenubarItem: React.ForwardRefExoticComponent<FlintMenubarItemProps & React.RefAttributes<FlintMenubarItemElement>>;

package/dist/components/FlintMenubarItem.js

@@ -0,0 +1,15 @@
+// src/components/FlintMenubarItem.tsx
+import React from "react";
+import { createComponent } from "@lit/react";
+import { FlintMenubarItem as FlintMenubarItemElement } from "@getufy/flint-ui/menubar/flint-menubar";
+var FlintMenubarItem = createComponent({
+  tagName: "flint-menubar-item",
+  elementClass: FlintMenubarItemElement,
+  react: React,
+  events: {
+    onFlintMenubarItemSelect: "flint-menubar-item-select"
+  }
+});
+export {
+  FlintMenubarItem
+};

package/dist/components/FlintMenubarMenu.d.ts

@@ -1,4 +1,10 @@
 import React from 'react';
 import { FlintMenubarMenu as FlintMenubarMenuElement } from '@getufy/flint-ui/menubar/flint-menubar';
-export declare const FlintMenubarMenu: import("@lit/react").ReactWebComponent<FlintMenubarMenuElement, {}>;
-export type FlintMenubarMenuProps = React.ComponentProps<typeof FlintMenubarMenu>;
+/**
+ * Wraps a trigger and content pair for a single menu in the menubar.
+ */
+export interface FlintMenubarMenuProps extends React.HTMLAttributes<FlintMenubarMenuElement> {
+    /** Disables this menu: the trigger is non-interactive and keyboard nav skips it. */
+    disabled?: boolean;
+}
+export declare const FlintMenubarMenu: React.ForwardRefExoticComponent<FlintMenubarMenuProps & React.RefAttributes<FlintMenubarMenuElement>>;

package/dist/components/FlintMenubarMenu.js

@@ -0,0 +1,12 @@
+// src/components/FlintMenubarMenu.tsx
+import React from "react";
+import { createComponent } from "@lit/react";
+import { FlintMenubarMenu as FlintMenubarMenuElement } from "@getufy/flint-ui/menubar/flint-menubar";
+var FlintMenubarMenu = createComponent({
+  tagName: "flint-menubar-menu",
+  elementClass: FlintMenubarMenuElement,
+  react: React
+});
+export {
+  FlintMenubarMenu
+};