@getufy/flint-ui-react 0.2.1 → 0.3.0

package/dist/carousel.js

@@ -0,0 +1,65 @@
+// src/components/FlintCarouselContent.tsx
+import React from "react";
+import { createComponent } from "@lit/react";
+import { FlintCarouselContent as FlintCarouselContentElement } from "@getufy/flint-ui/carousel/flint-carousel";
+var FlintCarouselContent = createComponent({
+  tagName: "flint-carousel-content",
+  elementClass: FlintCarouselContentElement,
+  react: React
+});
+
+// src/components/FlintCarouselItem.tsx
+import React2 from "react";
+import { createComponent as createComponent2 } from "@lit/react";
+import { FlintCarouselItem as FlintCarouselItemElement } from "@getufy/flint-ui/carousel/flint-carousel";
+var FlintCarouselItem = createComponent2({
+  tagName: "flint-carousel-item",
+  elementClass: FlintCarouselItemElement,
+  react: React2
+});
+
+// src/components/FlintCarouselPrevious.tsx
+import React3 from "react";
+import { createComponent as createComponent3 } from "@lit/react";
+import { FlintCarouselPrevious as FlintCarouselPreviousElement } from "@getufy/flint-ui/carousel/flint-carousel";
+var FlintCarouselPrevious = createComponent3({
+  tagName: "flint-carousel-previous",
+  elementClass: FlintCarouselPreviousElement,
+  react: React3
+});
+
+// src/components/FlintCarouselNext.tsx
+import React4 from "react";
+import { createComponent as createComponent4 } from "@lit/react";
+import { FlintCarouselNext as FlintCarouselNextElement } from "@getufy/flint-ui/carousel/flint-carousel";
+var FlintCarouselNext = createComponent4({
+  tagName: "flint-carousel-next",
+  elementClass: FlintCarouselNextElement,
+  react: React4
+});
+
+// src/components/FlintCarousel.tsx
+import React5 from "react";
+import { createComponent as createComponent5 } from "@lit/react";
+import { FlintCarousel as FlintCarouselElement } from "@getufy/flint-ui/carousel/flint-carousel";
+var FlintCarousel = createComponent5({
+  tagName: "flint-carousel",
+  elementClass: FlintCarouselElement,
+  react: React5,
+  events: {
+    onFlintCarouselChange: "flint-carousel-change"
+  }
+});
+
+// src/events/flint-carousel.ts
+var FlintCarouselEvents = {
+  CHANGE: "flint-carousel-change"
+};
+export {
+  FlintCarousel,
+  FlintCarouselContent,
+  FlintCarouselEvents,
+  FlintCarouselItem,
+  FlintCarouselNext,
+  FlintCarouselPrevious
+};

package/dist/checkbox.d.ts

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

package/dist/checkbox.js

@@ -0,0 +1,21 @@
+// src/components/FlintCheckbox.tsx
+import React from "react";
+import { createComponent } from "@lit/react";
+import { FlintCheckbox as FlintCheckboxElement } from "@getufy/flint-ui/checkbox/flint-checkbox";
+var FlintCheckbox = createComponent({
+  tagName: "flint-checkbox",
+  elementClass: FlintCheckboxElement,
+  react: React,
+  events: {
+    onFlintCheckboxChange: "flint-checkbox-change"
+  }
+});
+
+// src/events/flint-checkbox.ts
+var FlintCheckboxEvents = {
+  CHANGE: "flint-checkbox-change"
+};
+export {
+  FlintCheckbox,
+  FlintCheckboxEvents
+};

package/dist/chip.d.ts

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

package/dist/chip.js

@@ -0,0 +1,23 @@
+// src/components/FlintChip.tsx
+import React from "react";
+import { createComponent } from "@lit/react";
+import { FlintChip as FlintChipElement } from "@getufy/flint-ui/chip/flint-chip";
+var FlintChip = createComponent({
+  tagName: "flint-chip",
+  elementClass: FlintChipElement,
+  react: React,
+  events: {
+    onClick: "click",
+    onFlintChipDelete: "flint-chip-delete"
+  }
+});
+
+// src/events/flint-chip.ts
+var FlintChipEvents = {
+  CLICK: "click",
+  DELETE: "flint-chip-delete"
+};
+export {
+  FlintChip,
+  FlintChipEvents
+};

package/dist/collapsible.d.ts

@@ -0,0 +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 { FlintCollapsibleEvents } from './events/flint-collapsible.js';

package/dist/collapsible.js

@@ -0,0 +1,43 @@
+// src/components/FlintCollapsibleTrigger.tsx
+import React from "react";
+import { createComponent } from "@lit/react";
+import { FlintCollapsibleTrigger as FlintCollapsibleTriggerElement } from "@getufy/flint-ui/collapsible/flint-collapsible";
+var FlintCollapsibleTrigger = createComponent({
+  tagName: "flint-collapsible-trigger",
+  elementClass: FlintCollapsibleTriggerElement,
+  react: React
+});
+
+// src/components/FlintCollapsibleContent.tsx
+import React2 from "react";
+import { createComponent as createComponent2 } from "@lit/react";
+import { FlintCollapsibleContent as FlintCollapsibleContentElement } from "@getufy/flint-ui/collapsible/flint-collapsible";
+var FlintCollapsibleContent = createComponent2({
+  tagName: "flint-collapsible-content",
+  elementClass: FlintCollapsibleContentElement,
+  react: React2
+});
+
+// src/components/FlintCollapsible.tsx
+import React3 from "react";
+import { createComponent as createComponent3 } from "@lit/react";
+import { FlintCollapsible as FlintCollapsibleElement } from "@getufy/flint-ui/collapsible/flint-collapsible";
+var FlintCollapsible = createComponent3({
+  tagName: "flint-collapsible",
+  elementClass: FlintCollapsibleElement,
+  react: React3,
+  events: {
+    onFlintCollapsibleChange: "flint-collapsible-change"
+  }
+});
+
+// src/events/flint-collapsible.ts
+var FlintCollapsibleEvents = {
+  CHANGE: "flint-collapsible-change"
+};
+export {
+  FlintCollapsible,
+  FlintCollapsibleContent,
+  FlintCollapsibleEvents,
+  FlintCollapsibleTrigger
+};

package/dist/command.d.ts

@@ -0,0 +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 { 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 { FlintCommandItemEvents } from './events/flint-command-item.js';
+export { FlintCommandEvents } from './events/flint-command.js';
+export { FlintCommandDialogEvents } from './events/flint-command-dialog.js';

package/dist/command.js

@@ -0,0 +1,127 @@
+// src/components/FlintCommandShortcut.tsx
+import React from "react";
+import { createComponent } from "@lit/react";
+import { FlintCommandShortcut as FlintCommandShortcutElement } from "@getufy/flint-ui/command/flint-command";
+var FlintCommandShortcut = createComponent({
+  tagName: "flint-command-shortcut",
+  elementClass: FlintCommandShortcutElement,
+  react: React
+});
+
+// src/components/FlintCommandSeparator.tsx
+import React2 from "react";
+import { createComponent as createComponent2 } from "@lit/react";
+import { FlintCommandSeparator as FlintCommandSeparatorElement } from "@getufy/flint-ui/command/flint-command";
+var FlintCommandSeparator = createComponent2({
+  tagName: "flint-command-separator",
+  elementClass: FlintCommandSeparatorElement,
+  react: React2
+});
+
+// src/components/FlintCommandItem.tsx
+import React3 from "react";
+import { createComponent as createComponent3 } from "@lit/react";
+import { FlintCommandItem as FlintCommandItemElement } from "@getufy/flint-ui/command/flint-command";
+var FlintCommandItem = createComponent3({
+  tagName: "flint-command-item",
+  elementClass: FlintCommandItemElement,
+  react: React3,
+  events: {
+    onFlintCommandItemSelect: "flint-command-item-select"
+  }
+});
+
+// src/components/FlintCommandEmpty.tsx
+import React4 from "react";
+import { createComponent as createComponent4 } from "@lit/react";
+import { FlintCommandEmpty as FlintCommandEmptyElement } from "@getufy/flint-ui/command/flint-command";
+var FlintCommandEmpty = createComponent4({
+  tagName: "flint-command-empty",
+  elementClass: FlintCommandEmptyElement,
+  react: React4
+});
+
+// src/components/FlintCommandGroup.tsx
+import React5 from "react";
+import { createComponent as createComponent5 } from "@lit/react";
+import { FlintCommandGroup as FlintCommandGroupElement } from "@getufy/flint-ui/command/flint-command";
+var FlintCommandGroup = createComponent5({
+  tagName: "flint-command-group",
+  elementClass: FlintCommandGroupElement,
+  react: React5
+});
+
+// src/components/FlintCommandList.tsx
+import React6 from "react";
+import { createComponent as createComponent6 } from "@lit/react";
+import { FlintCommandList as FlintCommandListElement } from "@getufy/flint-ui/command/flint-command";
+var FlintCommandList = createComponent6({
+  tagName: "flint-command-list",
+  elementClass: FlintCommandListElement,
+  react: React6
+});
+
+// src/components/FlintCommandInput.tsx
+import React7 from "react";
+import { createComponent as createComponent7 } from "@lit/react";
+import { FlintCommandInput as FlintCommandInputElement } from "@getufy/flint-ui/command/flint-command";
+var FlintCommandInput = createComponent7({
+  tagName: "flint-command-input",
+  elementClass: FlintCommandInputElement,
+  react: React7
+});
+
+// src/components/FlintCommand.tsx
+import React8 from "react";
+import { createComponent as createComponent8 } from "@lit/react";
+import { FlintCommand as FlintCommandElement } from "@getufy/flint-ui/command/flint-command";
+var FlintCommand = createComponent8({
+  tagName: "flint-command",
+  elementClass: FlintCommandElement,
+  react: React8,
+  events: {
+    onFlintCommandItemSelect: "flint-command-item-select"
+  }
+});
+
+// src/components/FlintCommandDialog.tsx
+import React9 from "react";
+import { createComponent as createComponent9 } from "@lit/react";
+import { FlintCommandDialog as FlintCommandDialogElement } from "@getufy/flint-ui/command/flint-command";
+var FlintCommandDialog = createComponent9({
+  tagName: "flint-command-dialog",
+  elementClass: FlintCommandDialogElement,
+  react: React9,
+  events: {
+    onFlintCommandDialogClose: "flint-command-dialog-close"
+  }
+});
+
+// src/events/flint-command-item.ts
+var FlintCommandItemEvents = {
+  SELECT: "flint-command-item-select"
+};
+
+// src/events/flint-command.ts
+var FlintCommandEvents = {
+  ITEM_SELECT: "flint-command-item-select"
+};
+
+// src/events/flint-command-dialog.ts
+var FlintCommandDialogEvents = {
+  CLOSE: "flint-command-dialog-close"
+};
+export {
+  FlintCommand,
+  FlintCommandDialog,
+  FlintCommandDialogEvents,
+  FlintCommandEmpty,
+  FlintCommandEvents,
+  FlintCommandGroup,
+  FlintCommandInput,
+  FlintCommandItem,
+  FlintCommandItemEvents,
+  FlintCommandList,
+  FlintCommandSeparator,
+  FlintCommandShortcut
+};

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