@getufy/flint-ui-react 0.2.2 → 0.3.0

package/README.md

@@ -8,45 +8,153 @@ 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` |
 
@@ -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/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/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/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/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/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/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/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/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/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>>;

package/dist/components/FlintBadge.d.ts

@@ -1,4 +1,20 @@
 import React from 'react';
 import { FlintBadge as FlintBadgeElement } from '@getufy/flint-ui/badge/flint-badge';
-export declare const FlintBadge: import("@lit/react").ReactWebComponent<FlintBadgeElement, {}>;
-export type FlintBadgeProps = React.ComponentProps<typeof FlintBadge>;
+/**
+ * A badge component that generates a small badge at the top-right of its children.
+ *
+ * @slot - The content to which the badge is attached.
+ */
+export interface FlintBadgeProps extends React.HTMLAttributes<FlintBadgeElement> {
+    /** Text content displayed inside the badge. */
+    content?: string;
+    /** Whether to display a small dot instead of content. */
+    dot?: boolean;
+    /** Whether the badge is hidden. */
+    invisible?: boolean;
+    /** Color variant of the badge. */
+    variant?: 'primary' | 'secondary' | 'error' | 'success' | 'warning';
+    /** Maximum numeric value before displaying "max+". */
+    max?: number;
+}
+export declare const FlintBadge: React.ForwardRefExoticComponent<FlintBadgeProps & React.RefAttributes<FlintBadgeElement>>;

package/dist/components/FlintBottomNavigation.d.ts

@@ -1,7 +1,18 @@
 import React from 'react';
-import { type EventName } from '@lit/react';
 import { FlintBottomNavigation as FlintBottomNavigationElement } from '@getufy/flint-ui/bottom-navigation/flint-bottom-navigation';
-export declare const FlintBottomNavigation: import("@lit/react").ReactWebComponent<FlintBottomNavigationElement, {
-    onFlintBottomNavigationChange: EventName<CustomEvent>;
-}>;
-export type FlintBottomNavigationProps = React.ComponentProps<typeof FlintBottomNavigation>;
+/**
+ * Bottom Navigation bars allow movement between primary destinations in an app.
+ *
+ * @slot - destinations (flint-bottom-navigation-action).
+ */
+export interface FlintBottomNavigationProps extends Omit<React.HTMLAttributes<FlintBottomNavigationElement>, 'defaultValue'> {
+    /** The value of the currently selected action. */
+    value?: unknown;
+    /** Initial selected value for uncontrolled usage. */
+    defaultValue?: unknown;
+    /** If true, all labels are shown at all times. */
+    showLabels?: boolean;
+    /** Dispatched when the selected value changes. */
+    onFlintBottomNavigationChange?: (event: CustomEvent) => void;
+}
+export declare const FlintBottomNavigation: React.ForwardRefExoticComponent<FlintBottomNavigationProps & React.RefAttributes<FlintBottomNavigationElement>>;

package/dist/components/FlintBottomNavigationAction.d.ts

@@ -1,4 +1,19 @@
 import React from 'react';
 import { FlintBottomNavigationAction as FlintBottomNavigationActionElement } from '@getufy/flint-ui/bottom-navigation/flint-bottom-navigation-action';
-export declare const FlintBottomNavigationAction: import("@lit/react").ReactWebComponent<FlintBottomNavigationActionElement, {}>;
-export type FlintBottomNavigationActionProps = React.ComponentProps<typeof FlintBottomNavigationAction>;
+/**
+ * Bottom Navigation Action: Individual navigation item.
+ *
+ * @slot icon - Icon element.
+ * @slot - Label text.
+ */
+export interface FlintBottomNavigationActionProps extends React.HTMLAttributes<FlintBottomNavigationActionElement> {
+    /** Label text for the action. */
+    label?: string;
+    /** Unique value for this action. */
+    value?: unknown;
+    /** If true, this action is currently selected. (Internal property managed by parent) */
+    active?: boolean;
+    /** Controls label visibility. (Internal property managed by parent) */
+    showLabel?: boolean;
+}
+export declare const FlintBottomNavigationAction: React.ForwardRefExoticComponent<FlintBottomNavigationActionProps & React.RefAttributes<FlintBottomNavigationActionElement>>;

package/dist/components/FlintBox.d.ts

@@ -1,7 +1,69 @@
 import React from 'react';
-import { type EventName } from '@lit/react';
 import { FlintBox as FlintBoxElement } from '@getufy/flint-ui/box/flint-box';
-export declare const FlintBox: import("@lit/react").ReactWebComponent<FlintBoxElement, {
-    onFlintBoxWarning: EventName<CustomEvent>;
-}>;
-export type FlintBoxProps = React.ComponentProps<typeof FlintBox>;
+export interface FlintBoxProps extends Omit<React.HTMLAttributes<FlintBoxElement>, 'color'> {
+    /** The component tag to render */
+    component?: string;
+    /** Margin on all sides. */
+    m?: string;
+    /** Margin top. */
+    mt?: string;
+    /** Margin right. */
+    mr?: string;
+    /** Margin bottom. */
+    mb?: string;
+    /** Margin left. */
+    ml?: string;
+    /** Margin on the horizontal (left and right) axis. */
+    mx?: string;
+    /** Margin on the vertical (top and bottom) axis. */
+    my?: string;
+    /** Padding on all sides. */
+    p?: string;
+    /** Padding top. */
+    pt?: string;
+    /** Padding right. */
+    pr?: string;
+    /** Padding bottom. */
+    pb?: string;
+    /** Padding left. */
+    pl?: string;
+    /** Padding on the horizontal (left and right) axis. */
+    px?: string;
+    /** Padding on the vertical (top and bottom) axis. */
+    py?: string;
+    /** CSS display value. */
+    display?: string;
+    /** CSS flex-direction value. */
+    flexDirection?: string;
+    /** CSS align-items value. */
+    alignItems?: string;
+    /** CSS justify-content value. */
+    justifyContent?: string;
+    /** CSS flex-wrap value. */
+    flexWrap?: string;
+    /** CSS flex-basis value. */
+    flexBasis?: string;
+    /** CSS flex-grow value. */
+    flexGrow?: string;
+    /** CSS flex-shrink value. */
+    flexShrink?: string;
+    /** CSS gap between flex or grid items. */
+    gap?: string;
+    /** Background color. Supports theme tokens 'primary' and 'secondary'. */
+    bgcolor?: string;
+    /** Text color. Supports theme tokens 'primary' and 'secondary'. */
+    color?: string;
+    /** CSS border shorthand value. */
+    border?: string;
+    /** CSS border-radius value. */
+    borderRadius?: string;
+    /** CSS box-shadow value. */
+    boxShadow?: string;
+    /** CSS width value. */
+    width?: string;
+    /** CSS height value. */
+    height?: string;
+    /** Dispatched when an unknown component tag is used and falls back to div. */
+    onFlintBoxWarning?: (event: CustomEvent) => void;
+}
+export declare const FlintBox: React.ForwardRefExoticComponent<FlintBoxProps & React.RefAttributes<FlintBoxElement>>;

package/dist/components/FlintBreadcrumbs.d.ts

@@ -1,4 +1,20 @@
 import React from 'react';
 import { FlintBreadcrumbs as FlintBreadcrumbsElement } from '@getufy/flint-ui/breadcrumbs/flint-breadcrumbs';
-export declare const FlintBreadcrumbs: import("@lit/react").ReactWebComponent<FlintBreadcrumbsElement, {}>;
-export type FlintBreadcrumbsProps = React.ComponentProps<typeof FlintBreadcrumbs>;
+/**
+ * Breadcrumbs provide a navigational aid showing the current page's location
+within a site hierarchy, allowing users to navigate back up the trail.
+ *
+ * @slot - Breadcrumb items (links or text), distributed in order.
+ * @slot separator - Custom separator element rendered between each item.
+ */
+export interface FlintBreadcrumbsProps extends React.HTMLAttributes<FlintBreadcrumbsElement> {
+    /** Max number of items to display before collapsing. */
+    maxItems?: number;
+    /** Number of items to show before the ellipsis. */
+    itemsBefore?: number;
+    /** Number of items to show after the ellipsis. */
+    itemsAfter?: number;
+    /** The character or string used as a separator (fallback when no separator slot is provided). */
+    separator?: string;
+}
+export declare const FlintBreadcrumbs: React.ForwardRefExoticComponent<FlintBreadcrumbsProps & React.RefAttributes<FlintBreadcrumbsElement>>;

package/dist/components/FlintButton.d.ts

@@ -1,4 +1,13 @@
 import React from 'react';
 import { FlintButton as FlintButtonElement } from '@getufy/flint-ui/button/flint-button';
-export declare const FlintButton: import("@lit/react").ReactWebComponent<FlintButtonElement, {}>;
-export type FlintButtonProps = React.ComponentProps<typeof FlintButton>;
+export interface FlintButtonProps extends React.HTMLAttributes<FlintButtonElement> {
+    /** Visual style variant of the button. */
+    variant?: 'primary' | 'secondary' | 'destructive';
+    /** Size of the button. */
+    size?: 'small' | 'medium' | 'large';
+    /** Disables the button and prevents interaction. */
+    disabled?: boolean;
+    /** Whether the button stretches to fill its container width. */
+    fullWidth?: boolean;
+}
+export declare const FlintButton: React.ForwardRefExoticComponent<FlintButtonProps & React.RefAttributes<FlintButtonElement>>;

package/dist/components/FlintButtonGroup.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
 import { FlintButtonGroup as FlintButtonGroupElement } from '@getufy/flint-ui/button/flint-button-group';
-export declare const FlintButtonGroup: import("@lit/react").ReactWebComponent<FlintButtonGroupElement, {}>;
-export type FlintButtonGroupProps = React.ComponentProps<typeof FlintButtonGroup>;
+export interface FlintButtonGroupProps extends React.HTMLAttributes<FlintButtonGroupElement> {
+}
+export declare const FlintButtonGroup: React.ForwardRefExoticComponent<FlintButtonGroupProps & React.RefAttributes<FlintButtonGroupElement>>;

package/dist/components/FlintCard.d.ts

@@ -1,4 +1,7 @@
 import React from 'react';
 import { FlintCard as FlintCardElement } from '@getufy/flint-ui/card/flint-card';
-export declare const FlintCard: import("@lit/react").ReactWebComponent<FlintCardElement, {}>;
-export type FlintCardProps = React.ComponentProps<typeof FlintCard>;
+export interface FlintCardProps extends React.HTMLAttributes<FlintCardElement> {
+    variant?: 'elevated' | 'outlined' | 'flat';
+    interactive?: boolean;
+}
+export declare const FlintCard: React.ForwardRefExoticComponent<FlintCardProps & React.RefAttributes<FlintCardElement>>;

package/dist/components/FlintCardActionArea.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
 import { FlintCardActionArea as FlintCardActionAreaElement } from '@getufy/flint-ui/card/flint-card-action-area';
-export declare const FlintCardActionArea: import("@lit/react").ReactWebComponent<FlintCardActionAreaElement, {}>;
-export type FlintCardActionAreaProps = React.ComponentProps<typeof FlintCardActionArea>;
+export interface FlintCardActionAreaProps extends React.HTMLAttributes<FlintCardActionAreaElement> {
+}
+export declare const FlintCardActionArea: React.ForwardRefExoticComponent<FlintCardActionAreaProps & React.RefAttributes<FlintCardActionAreaElement>>;

package/dist/components/FlintCardActions.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
 import { FlintCardActions as FlintCardActionsElement } from '@getufy/flint-ui/card/flint-card-actions';
-export declare const FlintCardActions: import("@lit/react").ReactWebComponent<FlintCardActionsElement, {}>;
-export type FlintCardActionsProps = React.ComponentProps<typeof FlintCardActions>;
+export interface FlintCardActionsProps extends React.HTMLAttributes<FlintCardActionsElement> {
+}
+export declare const FlintCardActions: React.ForwardRefExoticComponent<FlintCardActionsProps & React.RefAttributes<FlintCardActionsElement>>;