@getufy/flint-ui-react 0.2.2 → 0.4.0

package/README.md

@@ -8,47 +8,155 @@ React wrappers for [`@getufy/flint-ui`](https://www.npmjs.com/package/@getufy/fl
 ## Installation
 
 ```bash
-npm install @getufy/flint-ui-react @getufy/flint-ui lit
+npm install @getufy/flint-ui @getufy/flint-ui-react
 ```
 
-Import the theme in your app's entry point:
+Peer dependencies: `react ^18 || ^19`, `@getufy/flint-ui ^0.2.2`
 
-```js
+## Setup
+
+Import the theme once in your app entry point:
+
+```ts
 import '@getufy/flint-ui/theme.css';
 ```
 
-## Usage
+## Resources
 
-```tsx
-import { FlintButton, FlintSelect, FlintDialog } from '@getufy/flint-ui-react';
+- **[Full documentation](https://getufy.github.io/flint-ui/)** — component docs, guides, and examples
+- **[React guide](https://getufy.github.io/flint-ui/react)** — React-specific usage and patterns
+- **[Live Storybook](https://getufy.github.io/flint-ui/storybook/)** — interactive component playground
 
-function App() {
-  return (
-    <FlintButton variant="primary" onFlintClick={() => console.log('clicked')}>
-      Click me
-    </FlintButton>
-  );
-}
+## Subpath imports — use these for tree-shaking
+
+**Always import from subpaths, not the barrel.** Each component is its own entry point; your bundler only includes the components you actually import.
+
+```tsx
+// Load only what you need
+import { FlintButton } from '@getufy/flint-ui-react/button';
+import { FlintSelect, FlintOption } from '@getufy/flint-ui-react/select';
+import { FlintTabs, FlintTab, FlintTabPanel } from '@getufy/flint-ui-react/tabs';
 ```
 
-### Per-component imports
+### Why subpath imports matter
 
-For better tree-shaking, import from component sub-paths:
+Lit's `@customElement()` decorator is a **side effect** — it registers the custom element globally as soon as the module is evaluated. The barrel import (`@getufy/flint-ui-react`) causes all 60+ components to register, even ones you never render.
 
 ```tsx
+// Registers ALL 60+ components (~897 KB uncompressed)
+import { FlintButton } from '@getufy/flint-ui-react';
+
+// Registers only the button component
 import { FlintButton } from '@getufy/flint-ui-react/button';
-import { FlintTabs, FlintTab, FlintTabPanel } from '@getufy/flint-ui-react/tabs';
+```
+
+### Available subpaths
+
+| Subpath | Exports include |
+|---|---|
+| `@getufy/flint-ui-react/accordion` | `FlintAccordion`, `FlintAccordionItem` |
+| `@getufy/flint-ui-react/alert` | `FlintAlert` |
+| `@getufy/flint-ui-react/app-bar` | `FlintAppBar` |
+| `@getufy/flint-ui-react/autocomplete` | `FlintAutocomplete` |
+| `@getufy/flint-ui-react/avatar` | `FlintAvatar` |
+| `@getufy/flint-ui-react/backdrop` | `FlintBackdrop` |
+| `@getufy/flint-ui-react/badge` | `FlintBadge` |
+| `@getufy/flint-ui-react/bottom-navigation` | `FlintBottomNavigation`, `FlintBottomNavigationItem` |
+| `@getufy/flint-ui-react/box` | `FlintBox` |
+| `@getufy/flint-ui-react/breadcrumbs` | `FlintBreadcrumbs`, `FlintBreadcrumbItem` |
+| `@getufy/flint-ui-react/button` | `FlintButton` |
+| `@getufy/flint-ui-react/card` | `FlintCard` |
+| `@getufy/flint-ui-react/carousel` | `FlintCarousel`, `FlintCarouselItem` |
+| `@getufy/flint-ui-react/checkbox` | `FlintCheckbox` |
+| `@getufy/flint-ui-react/chip` | `FlintChip` |
+| `@getufy/flint-ui-react/collapsible` | `FlintCollapsible`, `FlintCollapsibleTrigger`, `FlintCollapsibleContent` |
+| `@getufy/flint-ui-react/command` | `FlintCommand`, `FlintCommandInput`, `FlintCommandList`, `FlintCommandItem` |
+| `@getufy/flint-ui-react/container` | `FlintContainer` |
+| `@getufy/flint-ui-react/copy-button` | `FlintCopyButton` |
+| `@getufy/flint-ui-react/date-field` | `FlintDateField` |
+| `@getufy/flint-ui-react/date-picker` | `FlintDatePicker` |
+| `@getufy/flint-ui-react/date-range-picker` | `FlintDateRangePicker` |
+| `@getufy/flint-ui-react/dialog` | `FlintDialog` |
+| `@getufy/flint-ui-react/divider` | `FlintDivider` |
+| `@getufy/flint-ui-react/drawer` | `FlintDrawer` |
+| `@getufy/flint-ui-react/empty` | `FlintEmpty` |
+| `@getufy/flint-ui-react/fab` | `FlintFab` |
+| `@getufy/flint-ui-react/format-date` | `FlintFormatDate` |
+| `@getufy/flint-ui-react/format-number` | `FlintFormatNumber` |
+| `@getufy/flint-ui-react/grid` | `FlintGrid`, `FlintGridItem` |
+| `@getufy/flint-ui-react/hover-card` | `FlintHoverCard`, `FlintHoverCardTrigger`, `FlintHoverCardContent` |
+| `@getufy/flint-ui-react/image-comparer` | `FlintImageComparer` |
+| `@getufy/flint-ui-react/image-list` | `FlintImageList`, `FlintImageListItem` |
+| `@getufy/flint-ui-react/input` | `FlintInput` |
+| `@getufy/flint-ui-react/input-otp` | `FlintInputOtp`, `FlintInputOtpGroup`, `FlintInputOtpSlot` |
+| `@getufy/flint-ui-react/item` | `FlintItem` |
+| `@getufy/flint-ui-react/kbd` | `FlintKbd` |
+| `@getufy/flint-ui-react/link` | `FlintLink` |
+| `@getufy/flint-ui-react/list` | `FlintList`, `FlintListItem` |
+| `@getufy/flint-ui-react/menu` | `FlintMenu`, `FlintMenuItem` |
+| `@getufy/flint-ui-react/menubar` | `FlintMenubar`, `FlintMenubarItem` |
+| `@getufy/flint-ui-react/navigation-menu` | `FlintNavigationMenu`, `FlintNavigationMenuItem` |
+| `@getufy/flint-ui-react/pagination` | `FlintPagination` |
+| `@getufy/flint-ui-react/paper` | `FlintPaper` |
+| `@getufy/flint-ui-react/progress` | `FlintProgress` |
+| `@getufy/flint-ui-react/radio` | `FlintRadio`, `FlintRadioGroup` |
+| `@getufy/flint-ui-react/rating` | `FlintRating` |
+| `@getufy/flint-ui-react/relative-time` | `FlintRelativeTime` |
+| `@getufy/flint-ui-react/resizable` | `FlintResizable`, `FlintResizablePanel`, `FlintResizableHandle` |
+| `@getufy/flint-ui-react/scroll-area` | `FlintScrollArea` |
+| `@getufy/flint-ui-react/select` | `FlintSelect`, `FlintOption` |
+| `@getufy/flint-ui-react/skeleton` | `FlintSkeleton` |
+| `@getufy/flint-ui-react/slider` | `FlintSlider` |
+| `@getufy/flint-ui-react/snackbar` | `FlintSnackbar` |
+| `@getufy/flint-ui-react/sonner` | `FlintSonner` |
+| `@getufy/flint-ui-react/speed-dial` | `FlintSpeedDial`, `FlintSpeedDialAction` |
+| `@getufy/flint-ui-react/split-panel` | `FlintSplitPanel` |
+| `@getufy/flint-ui-react/stack` | `FlintStack` |
+| `@getufy/flint-ui-react/stepper` | `FlintStepper`, `FlintStepperItem` |
+| `@getufy/flint-ui-react/switch` | `FlintSwitch` |
+| `@getufy/flint-ui-react/table` | `FlintTable`, `FlintTableRow`, `FlintTableCell` |
+| `@getufy/flint-ui-react/tabs` | `FlintTabs`, `FlintTab`, `FlintTabPanel` |
+| `@getufy/flint-ui-react/text-field` | `FlintTextField` |
+| `@getufy/flint-ui-react/textarea` | `FlintTextarea` |
+| `@getufy/flint-ui-react/time-picker` | `FlintTimePicker` |
+| `@getufy/flint-ui-react/toggle` | `FlintToggle`, `FlintToggleGroup` |
+| `@getufy/flint-ui-react/tooltip` | `FlintTooltip` |
+| `@getufy/flint-ui-react/transfer-list` | `FlintTransferList` |
+| `@getufy/flint-ui-react/tree-view` | `FlintTreeView`, `FlintTreeItem` |
+| `@getufy/flint-ui-react/typography` | `FlintTypography` |
+| `@getufy/flint-ui-react/visually-hidden` | `FlintVisuallyHidden` |
+
+For exact named exports in any subpath, check the TypeScript declarations in `node_modules/@getufy/flint-ui-react/dist/<name>.d.ts`.
+
+## Basic usage
+
+```tsx
+// main.tsx
+import '@getufy/flint-ui/theme.css';
+import '@getufy/flint-ui/suppress-warnings'; // optional — see below
+
+// MyComponent.tsx
+import { FlintButton } from '@getufy/flint-ui-react/button';
+
+export function MyComponent() {
+  return (
+    <FlintButton variant="filled" onFlintClick={() => console.log('clicked')}>
+      Click me
+    </FlintButton>
+  );
+}
 ```
 
 ### Events
 
-Custom events use `onEventName` props:
+Custom events map to camelCase `on*` props:
 
 | Lit event | React prop |
-|-----------|-----------|
+|---|---|
 | `flint-change` | `onFlintChange` |
+| `flint-click` | `onFlintClick` |
 | `flint-menu-close` | `onFlintMenuClose` |
-| `close` | `onClose` |
+| `flint-dialog-close` | `onFlintDialogClose` |
 
 ```tsx
 <FlintSelect
@@ -57,30 +165,17 @@ Custom events use `onEventName` props:
 />
 ```
 
-### Complex properties
+## Suppressing the Lit dev mode warning
 
-Objects and arrays can be passed directly as JSX props:
+In development, Lit prints a console warning about running in dev mode. To silence it, add this import **before any component imports** in your app entry point:
 
-```tsx
-<FlintSelect
-  label="Fruit"
-  options={[
-    { value: 'apple', label: 'Apple' },
-    { value: 'banana', label: 'Banana' },
-  ]}
-/>
-```
-
-## Peer Dependencies
-
-- `react` ^18.0.0 || ^19.0.0
-- `@getufy/flint-ui` ^0.2.0
-
-## Documentation
+```ts
+// main.tsx — must be first
+import '@getufy/flint-ui/suppress-warnings';
+import '@getufy/flint-ui/theme.css';
 
-- [Full documentation](https://getufy.github.io/flint-ui/)
-- [React guide](https://getufy.github.io/flint-ui/react)
-- [Live Storybook](https://getufy.github.io/flint-ui/storybook/)
+// component imports after...
+```
 
 ## License
 

package/dist/accordion.d.ts

@@ -1,4 +1,4 @@
-export { FlintAccordion, type FlintAccordionProps } from './components/FlintAccordion.js';
+export { FlintAccordion, type FlintAccordionProps, type FlintAccordionChangeDetail } from './components/FlintAccordion.js';
 export { FlintAccordionSummary, type FlintAccordionSummaryProps } from './components/FlintAccordionSummary.js';
 export { FlintAccordionDetails, type FlintAccordionDetailsProps } from './components/FlintAccordionDetails.js';
 export { FlintAccordionActions, type FlintAccordionActionsProps } from './components/FlintAccordionActions.js';

package/dist/alert.d.ts

@@ -1,2 +1,2 @@
-export { FlintAlert, type FlintAlertProps } from './components/FlintAlert.js';
+export { FlintAlert, type FlintAlertProps, type FlintAlertCloseDetail } from './components/FlintAlert.js';
 export { FlintAlertEvents } from './events/flint-alert.js';

package/dist/autocomplete.d.ts

@@ -1,2 +1,2 @@
-export { FlintAutocomplete, type FlintAutocompleteProps } from './components/FlintAutocomplete.js';
+export { FlintAutocomplete, type FlintAutocompleteProps, type FlintAutocompleteChangeDetail } from './components/FlintAutocomplete.js';
 export { FlintAutocompleteEvents } from './events/flint-autocomplete.js';

package/dist/backdrop.d.ts

@@ -1,2 +1,2 @@
-export { FlintBackdrop, type FlintBackdropProps } from './components/FlintBackdrop.js';
+export { FlintBackdrop, type FlintBackdropProps, type FlintBackdropCloseDetail } from './components/FlintBackdrop.js';
 export { FlintBackdropEvents } from './events/flint-backdrop.js';

package/dist/button.d.ts

@@ -1,6 +1,6 @@
 export { FlintButtonGroup, type FlintButtonGroupProps } from './components/FlintButtonGroup.js';
 export { FlintButton, type FlintButtonProps } from './components/FlintButton.js';
-export { FlintToggleButtonGroup, type FlintToggleButtonGroupProps } from './components/FlintToggleButtonGroup.js';
-export { FlintToggleButton, type FlintToggleButtonProps } from './components/FlintToggleButton.js';
+export { FlintToggleButtonGroup, type FlintToggleButtonGroupProps, type FlintToggleButtonGroupChangeDetail } from './components/FlintToggleButtonGroup.js';
+export { FlintToggleButton, type FlintToggleButtonProps, type FlintToggleButtonChangeDetail } from './components/FlintToggleButton.js';
 export { FlintToggleButtonGroupEvents } from './events/flint-toggle-button-group.js';
 export { FlintToggleButtonEvents } from './events/flint-toggle-button.js';

package/dist/carousel.d.ts

@@ -2,5 +2,5 @@ export { FlintCarouselContent, type FlintCarouselContentProps } from './componen
 export { FlintCarouselItem, type FlintCarouselItemProps } from './components/FlintCarouselItem.js';
 export { FlintCarouselPrevious, type FlintCarouselPreviousProps } from './components/FlintCarouselPrevious.js';
 export { FlintCarouselNext, type FlintCarouselNextProps } from './components/FlintCarouselNext.js';
-export { FlintCarousel, type FlintCarouselProps } from './components/FlintCarousel.js';
+export { FlintCarousel, type FlintCarouselProps, type FlintCarouselChangeDetail } from './components/FlintCarousel.js';
 export { FlintCarouselEvents } from './events/flint-carousel.js';

package/dist/checkbox.d.ts

@@ -1,2 +1,2 @@
-export { FlintCheckbox, type FlintCheckboxProps } from './components/FlintCheckbox.js';
+export { FlintCheckbox, type FlintCheckboxProps, type FlintCheckboxChangeDetail } from './components/FlintCheckbox.js';
 export { FlintCheckboxEvents } from './events/flint-checkbox.js';

package/dist/chip.d.ts

@@ -1,2 +1,2 @@
-export { FlintChip, type FlintChipProps } from './components/FlintChip.js';
+export { FlintChip, type FlintChipProps, type FlintChipDeleteDetail } from './components/FlintChip.js';
 export { FlintChipEvents } from './events/flint-chip.js';

package/dist/chip.js

@@ -7,14 +7,14 @@ var FlintChip = createComponent({
   elementClass: FlintChipElement,
   react: React,
   events: {
-    onClick: "click",
+    onFlintChipClick: "flint-chip-click",
     onFlintChipDelete: "flint-chip-delete"
   }
 });
 
 // src/events/flint-chip.ts
 var FlintChipEvents = {
-  CLICK: "click",
+  CLICK: "flint-chip-click",
   DELETE: "flint-chip-delete"
 };
 export {

package/dist/collapsible.d.ts

@@ -1,4 +1,4 @@
 export { FlintCollapsibleTrigger, type FlintCollapsibleTriggerProps } from './components/FlintCollapsibleTrigger.js';
 export { FlintCollapsibleContent, type FlintCollapsibleContentProps } from './components/FlintCollapsibleContent.js';
-export { FlintCollapsible, type FlintCollapsibleProps } from './components/FlintCollapsible.js';
+export { FlintCollapsible, type FlintCollapsibleProps, type FlintCollapsibleChangeDetail } from './components/FlintCollapsible.js';
 export { FlintCollapsibleEvents } from './events/flint-collapsible.js';

package/dist/command.d.ts

@@ -1,12 +1,12 @@
 export { FlintCommandShortcut, type FlintCommandShortcutProps } from './components/FlintCommandShortcut.js';
 export { FlintCommandSeparator, type FlintCommandSeparatorProps } from './components/FlintCommandSeparator.js';
-export { FlintCommandItem, type FlintCommandItemProps } from './components/FlintCommandItem.js';
+export { FlintCommandItem, type FlintCommandItemProps, type FlintCommandItemSelectDetail } from './components/FlintCommandItem.js';
 export { FlintCommandEmpty, type FlintCommandEmptyProps } from './components/FlintCommandEmpty.js';
 export { FlintCommandGroup, type FlintCommandGroupProps } from './components/FlintCommandGroup.js';
 export { FlintCommandList, type FlintCommandListProps } from './components/FlintCommandList.js';
 export { FlintCommandInput, type FlintCommandInputProps } from './components/FlintCommandInput.js';
 export { FlintCommand, type FlintCommandProps } from './components/FlintCommand.js';
-export { FlintCommandDialog, type FlintCommandDialogProps } from './components/FlintCommandDialog.js';
+export { FlintCommandDialog, type FlintCommandDialogProps, type FlintCommandDialogCloseDetail } from './components/FlintCommandDialog.js';
 export { FlintCommandItemEvents } from './events/flint-command-item.js';
 export { FlintCommandEvents } from './events/flint-command.js';
 export { FlintCommandDialogEvents } from './events/flint-command-dialog.js';

package/dist/components/FlintAccordion.d.ts

@@ -1,7 +1,21 @@
 import React from 'react';
-import { type EventName } from '@lit/react';
 import { FlintAccordion as FlintAccordionElement } from '@getufy/flint-ui/accordion/flint-accordion';
-export declare const FlintAccordion: import("@lit/react").ReactWebComponent<FlintAccordionElement, {
-    onFlintAccordionChange: EventName<CustomEvent>;
-}>;
-export type FlintAccordionProps = React.ComponentProps<typeof FlintAccordion>;
+export interface FlintAccordionChangeDetail {
+    expanded: boolean;
+}
+/**
+ * Accordion: the wrapper for grouping related components.
+ *
+ * @slot - FlintAccordionSummary and FlintAccordionDetails.
+ */
+export interface FlintAccordionProps extends React.HTMLAttributes<FlintAccordionElement> {
+    /** If true, expands the accordion by default. */
+    expanded?: boolean;
+    /** Initial expanded state for uncontrolled usage. */
+    defaultExpanded?: boolean;
+    /** If true, the accordion is disabled. */
+    disabled?: boolean;
+    /** Fired when the accordion's expanded state changes. */
+    onFlintAccordionChange?: (event: CustomEvent<FlintAccordionChangeDetail>) => void;
+}
+export declare const FlintAccordion: React.ForwardRefExoticComponent<FlintAccordionProps & React.RefAttributes<FlintAccordionElement>>;

package/dist/components/FlintAccordion.js

@@ -0,0 +1,15 @@
+// src/components/FlintAccordion.tsx
+import React from "react";
+import { createComponent } from "@lit/react";
+import { FlintAccordion as FlintAccordionElement } from "@getufy/flint-ui/accordion/flint-accordion";
+var FlintAccordion = createComponent({
+  tagName: "flint-accordion",
+  elementClass: FlintAccordionElement,
+  react: React,
+  events: {
+    onFlintAccordionChange: "flint-accordion-change"
+  }
+});
+export {
+  FlintAccordion
+};

package/dist/components/FlintAccordionActions.d.ts

@@ -1,4 +1,8 @@
 import React from 'react';
 import { FlintAccordionActions as FlintAccordionActionsElement } from '@getufy/flint-ui/accordion/flint-accordion';
-export declare const FlintAccordionActions: import("@lit/react").ReactWebComponent<FlintAccordionActionsElement, {}>;
-export type FlintAccordionActionsProps = React.ComponentProps<typeof FlintAccordionActions>;
+/**
+ * Accordion Actions: an optional wrapper that groups a set of buttons.
+ */
+export interface FlintAccordionActionsProps extends React.HTMLAttributes<FlintAccordionActionsElement> {
+}
+export declare const FlintAccordionActions: React.ForwardRefExoticComponent<FlintAccordionActionsProps & React.RefAttributes<FlintAccordionActionsElement>>;

package/dist/components/FlintAccordionActions.js

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

package/dist/components/FlintAccordionDetails.d.ts

@@ -1,4 +1,10 @@
 import React from 'react';
 import { FlintAccordionDetails as FlintAccordionDetailsElement } from '@getufy/flint-ui/accordion/flint-accordion';
-export declare const FlintAccordionDetails: import("@lit/react").ReactWebComponent<FlintAccordionDetailsElement, {}>;
-export type FlintAccordionDetailsProps = React.ComponentProps<typeof FlintAccordionDetails>;
+/**
+ * Accordion Details: the wrapper for the Accordion content.
+ *
+ * @slot - Detail content.
+ */
+export interface FlintAccordionDetailsProps extends React.HTMLAttributes<FlintAccordionDetailsElement> {
+}
+export declare const FlintAccordionDetails: React.ForwardRefExoticComponent<FlintAccordionDetailsProps & React.RefAttributes<FlintAccordionDetailsElement>>;

package/dist/components/FlintAccordionDetails.js

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

package/dist/components/FlintAccordionSummary.d.ts

@@ -1,7 +1,13 @@
 import React from 'react';
-import { type EventName } from '@lit/react';
 import { FlintAccordionSummary as FlintAccordionSummaryElement } from '@getufy/flint-ui/accordion/flint-accordion';
-export declare const FlintAccordionSummary: import("@lit/react").ReactWebComponent<FlintAccordionSummaryElement, {
-    onFlintAccordionToggle: EventName<CustomEvent>;
-}>;
-export type FlintAccordionSummaryProps = React.ComponentProps<typeof FlintAccordionSummary>;
+/**
+ * Accordion Summary: the wrapper for the Accordion header.
+ *
+ * @slot expandIcon - Custom expand/collapse icon.
+ * @slot - Summary content.
+ */
+export interface FlintAccordionSummaryProps extends React.HTMLAttributes<FlintAccordionSummaryElement> {
+    /** Fired when the summary is clicked or activated via keyboard. */
+    onFlintAccordionToggle?: (event: CustomEvent) => void;
+}
+export declare const FlintAccordionSummary: React.ForwardRefExoticComponent<FlintAccordionSummaryProps & React.RefAttributes<FlintAccordionSummaryElement>>;

package/dist/components/FlintAccordionSummary.js

@@ -0,0 +1,15 @@
+// src/components/FlintAccordionSummary.tsx
+import React from "react";
+import { createComponent } from "@lit/react";
+import { FlintAccordionSummary as FlintAccordionSummaryElement } from "@getufy/flint-ui/accordion/flint-accordion";
+var FlintAccordionSummary = createComponent({
+  tagName: "flint-accordion-summary",
+  elementClass: FlintAccordionSummaryElement,
+  react: React,
+  events: {
+    onFlintAccordionToggle: "flint-accordion-toggle"
+  }
+});
+export {
+  FlintAccordionSummary
+};

package/dist/components/FlintAlert.d.ts

@@ -1,7 +1,23 @@
 import React from 'react';
-import { type EventName } from '@lit/react';
 import { FlintAlert as FlintAlertElement } from '@getufy/flint-ui/alert/flint-alert';
-export declare const FlintAlert: import("@lit/react").ReactWebComponent<FlintAlertElement, {
-    onFlintAlertClose: EventName<CustomEvent>;
-}>;
-export type FlintAlertProps = React.ComponentProps<typeof FlintAlert>;
+export interface FlintAlertCloseDetail {
+    open: boolean;
+    severity: 'info' | 'success' | 'warning' | 'error';
+}
+/**
+ * Alerts display brief messages for the user without interrupting their use of the app.
+ *
+ * @slot - The message content of the alert.
+ * @slot icon - Optional icon to display instead of the default severity icon.
+ */
+export interface FlintAlertProps extends Omit<React.HTMLAttributes<FlintAlertElement>, 'title'> {
+    /** The severity level of the alert. */
+    severity?: 'info' | 'success' | 'warning' | 'error';
+    /** An optional title for the alert. */
+    title?: string;
+    /** Whether the alert can be dismissed by the user. */
+    dismissible?: boolean;
+    /** Fired when the alert's close button is clicked. detail: `{ open: false, severity: string }` */
+    onFlintAlertClose?: (event: CustomEvent<FlintAlertCloseDetail>) => void;
+}
+export declare const FlintAlert: React.ForwardRefExoticComponent<FlintAlertProps & React.RefAttributes<FlintAlertElement>>;

package/dist/components/FlintAlert.js

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

package/dist/components/FlintAppBar.d.ts

@@ -1,4 +1,18 @@
 import React from 'react';
 import { FlintAppBar as FlintAppBarElement } from '@getufy/flint-ui/app-bar/flint-app-bar';
-export declare const FlintAppBar: import("@lit/react").ReactWebComponent<FlintAppBarElement, {}>;
-export type FlintAppBarProps = React.ComponentProps<typeof FlintAppBar>;
+/**
+ * flint-app-bar: The top App bar provides content and actions related to the current screen.
+ *
+ * @slot navigation - Left section, e.g. menu button.
+ * @slot title - Center section next to the title prop.
+ * @slot actions - Right section, e.g. action buttons.
+ */
+export interface FlintAppBarProps extends Omit<React.HTMLAttributes<FlintAppBarElement>, 'title'> {
+    /** Title text displayed in the center of the app bar. */
+    title?: string;
+    /** CSS positioning behavior of the app bar. */
+    position?: 'static' | 'fixed' | 'absolute' | 'sticky';
+    /** Visual style variant of the app bar. */
+    variant?: 'regular' | 'outlined';
+}
+export declare const FlintAppBar: React.ForwardRefExoticComponent<FlintAppBarProps & React.RefAttributes<FlintAppBarElement>>;

package/dist/components/FlintAppBar.js

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

package/dist/components/FlintAutocomplete.d.ts

@@ -1,7 +1,24 @@
 import React from 'react';
-import { type EventName } from '@lit/react';
 import { FlintAutocomplete as FlintAutocompleteElement } from '@getufy/flint-ui/autocomplete/flint-autocomplete';
-export declare const FlintAutocomplete: import("@lit/react").ReactWebComponent<FlintAutocompleteElement, {
-    onFlintAutocompleteChange: EventName<CustomEvent>;
-}>;
-export type FlintAutocompleteProps = React.ComponentProps<typeof FlintAutocomplete>;
+export interface FlintAutocompleteChangeDetail {
+    value: string;
+    label: string;
+}
+/**
+ * Autocomplete: a text input with a dropdown of selectable suggestions.
+ */
+export interface FlintAutocompleteProps extends React.HTMLAttributes<FlintAutocompleteElement> {
+    /** The list of selectable options. */
+    options?: FlintAutocompleteElement['options'];
+    /** When true, allows arbitrary values that are not in the options list. */
+    freeSolo?: boolean;
+    /** Whether the autocomplete input is disabled. */
+    disabled?: boolean;
+    /** The current selected value. */
+    value?: string;
+    /** Placeholder text shown when the input is empty. */
+    placeholder?: string;
+    /** Fired when the selected value changes. */
+    onFlintAutocompleteChange?: (event: CustomEvent<FlintAutocompleteChangeDetail>) => void;
+}
+export declare const FlintAutocomplete: React.ForwardRefExoticComponent<FlintAutocompleteProps & React.RefAttributes<FlintAutocompleteElement>>;

package/dist/components/FlintAutocomplete.js

@@ -0,0 +1,15 @@
+// src/components/FlintAutocomplete.tsx
+import React from "react";
+import { createComponent } from "@lit/react";
+import { FlintAutocomplete as FlintAutocompleteElement } from "@getufy/flint-ui/autocomplete/flint-autocomplete";
+var FlintAutocomplete = createComponent({
+  tagName: "flint-autocomplete",
+  elementClass: FlintAutocompleteElement,
+  react: React,
+  events: {
+    onFlintAutocompleteChange: "flint-autocomplete-change"
+  }
+});
+export {
+  FlintAutocomplete
+};

package/dist/components/FlintAvatar.d.ts

@@ -1,4 +1,15 @@
 import React from 'react';
 import { FlintAvatar as FlintAvatarElement } from '@getufy/flint-ui/avatar/flint-avatar';
-export declare const FlintAvatar: import("@lit/react").ReactWebComponent<FlintAvatarElement, {}>;
-export type FlintAvatarProps = React.ComponentProps<typeof FlintAvatar>;
+export interface FlintAvatarProps extends React.HTMLAttributes<FlintAvatarElement> {
+    /** Image source URL for the avatar. */
+    src?: string;
+    /** Alt text for the avatar image. */
+    alt?: string;
+    /** Initials to display when no image is provided. */
+    initials?: string;
+    /** Shape variant of the avatar. */
+    variant?: 'circle' | 'square' | 'rounded';
+    /** Size of the avatar. */
+    size?: 'small' | 'medium' | 'large' | 'xlarge';
+}
+export declare const FlintAvatar: React.ForwardRefExoticComponent<FlintAvatarProps & React.RefAttributes<FlintAvatarElement>>;

package/dist/components/FlintAvatar.js

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

package/dist/components/FlintBackdrop.d.ts

@@ -1,7 +1,21 @@
 import React from 'react';
-import { type EventName } from '@lit/react';
 import { FlintBackdrop as FlintBackdropElement } from '@getufy/flint-ui/backdrop/flint-backdrop';
-export declare const FlintBackdrop: import("@lit/react").ReactWebComponent<FlintBackdropElement, {
-    onFlintBackdropClose: EventName<CustomEvent>;
-}>;
-export type FlintBackdropProps = React.ComponentProps<typeof FlintBackdrop>;
+export interface FlintBackdropCloseDetail {
+    open: boolean;
+}
+/**
+ * A backdrop component that narrows the user's focus to a particular element.
+ *
+ * @slot - Content to display in the foreground.
+ */
+export interface FlintBackdropProps extends React.HTMLAttributes<FlintBackdropElement> {
+    /** Whether the backdrop is visible and active. */
+    open?: boolean;
+    /** When true, the backdrop overlay is transparent. */
+    invisible?: boolean;
+    /** When true, the backdrop is scoped to its parent container instead of the viewport. */
+    container?: boolean;
+    /** Dispatched when the backdrop is clicked or Escape is pressed. detail: `{ open: false }` */
+    onFlintBackdropClose?: (event: CustomEvent<FlintBackdropCloseDetail>) => void;
+}
+export declare const FlintBackdrop: React.ForwardRefExoticComponent<FlintBackdropProps & React.RefAttributes<FlintBackdropElement>>;