@getufy/flint-ui-react 0.2.2 → 0.3.0

package/dist/components/FlintImageComparer.d.ts

@@ -1,7 +1,21 @@
 import React from 'react';
-import { type EventName } from '@lit/react';
 import { FlintImageComparer as FlintImageComparerElement } from '@getufy/flint-ui/image-comparer/flint-image-comparer';
-export declare const FlintImageComparer: import("@lit/react").ReactWebComponent<FlintImageComparerElement, {
-    onFlintImageComparerChange: EventName<CustomEvent>;
-}>;
-export type FlintImageComparerProps = React.ComponentProps<typeof FlintImageComparer>;
+export interface FlintImageComparerChangeDetail {
+    position: number;
+}
+/**
+ * `flint-image-comparer` — Compare two images side-by-side with a draggable slider.
+ *
+ * @slot before - The before image (`<img>` or `<svg>`).
+ * @slot after - The after image (`<img>` or `<svg>`).
+ * @slot handle - Custom handle content (replaces the default arrows icon).
+ */
+export interface FlintImageComparerProps extends React.HTMLAttributes<FlintImageComparerElement> {
+    /** The position of the divider as a percentage (0–100). */
+    position?: number;
+    /** Whether the comparer is disabled. */
+    disabled?: boolean;
+    /** Fired when the position changes. Detail: `{ position: number }`. */
+    onFlintImageComparerChange?: (event: CustomEvent<FlintImageComparerChangeDetail>) => void;
+}
+export declare const FlintImageComparer: React.ForwardRefExoticComponent<FlintImageComparerProps & React.RefAttributes<FlintImageComparerElement>>;

package/dist/components/FlintImageList.d.ts

@@ -1,4 +1,21 @@
 import React from 'react';
 import { FlintImageList as FlintImageListElement } from '@getufy/flint-ui/image-list/flint-image-list';
-export declare const FlintImageList: import("@lit/react").ReactWebComponent<FlintImageListElement, {}>;
-export type FlintImageListProps = React.ComponentProps<typeof FlintImageList>;
+/**
+ * A container that displays images in an organized grid layout.
+Supports standard, quilted, woven, and masonry variants.
+ *
+ * @slot - Place `flint-image-list-item` elements here.
+ */
+export interface FlintImageListProps extends React.HTMLAttributes<FlintImageListElement> {
+    /** Layout variant */
+    variant?: FlintImageListElement['variant'];
+    /** Number of columns */
+    cols?: number;
+    /** Gap between items (in px) */
+    gap?: number;
+    /** Row height for non-masonry variants (in px). Ignored when autoRows=true. */
+    rowHeight?: number;
+    /** When true, row height is automatic (use with bar-position="below") */
+    autoRows?: boolean;
+}
+export declare const FlintImageList: React.ForwardRefExoticComponent<FlintImageListProps & React.RefAttributes<FlintImageListElement>>;

package/dist/components/FlintImageListItem.d.ts

@@ -1,4 +1,23 @@
 import React from 'react';
 import { FlintImageListItem as FlintImageListItemElement } from '@getufy/flint-ui/image-list/flint-image-list-item';
-export declare const FlintImageListItem: import("@lit/react").ReactWebComponent<FlintImageListItemElement, {}>;
-export type FlintImageListItemProps = React.ComponentProps<typeof FlintImageListItem>;
+/**
+ * A single item inside a `flint-image-list`.
+ *
+ * @slot - Place an `<img>` or any content here.
+ * @slot bar - Place a `flint-image-list-item-bar` element here.
+ */
+export interface FlintImageListItemProps extends React.HTMLAttributes<FlintImageListItemElement> {
+    /** How many grid rows this item spans (quilted/woven only) */
+    rows?: number;
+    /** How many grid columns this item spans (quilted/woven only) */
+    cols?: number;
+    /** Position of the title bar: 'overlay' (default) or 'below' */
+    barPosition?: 'overlay' | 'below';
+    /** Woven variant: 'odd' or 'even' identity for alternating height */
+    weave?: 'odd' | 'even';
+    /** CSS aspect-ratio for the cell (e.g. "1/1", "4/3", "3/4", "16/9", "9/16"). */
+    aspectRatio?: string;
+    /** How the image fills the cell: 'cover' (default, crops to fill) */
+    fit?: FlintImageListItemElement['fit'];
+}
+export declare const FlintImageListItem: React.ForwardRefExoticComponent<FlintImageListItemProps & React.RefAttributes<FlintImageListItemElement>>;

package/dist/components/FlintImageListItemBar.d.ts

@@ -1,4 +1,14 @@
 import React from 'react';
 import { FlintImageListItemBar as FlintImageListItemBarElement } from '@getufy/flint-ui/image-list/flint-image-list-item-bar';
-export declare const FlintImageListItemBar: import("@lit/react").ReactWebComponent<FlintImageListItemBarElement, {}>;
-export type FlintImageListItemBarProps = React.ComponentProps<typeof FlintImageListItemBar>;
+/**
+ * A title/subtitle bar for `flint-image-list-item`.
+ *
+ * @slot title - Title text.
+ * @slot subtitle - Subtitle text.
+ * @slot - Action content.
+ */
+export interface FlintImageListItemBarProps extends React.HTMLAttributes<FlintImageListItemBarElement> {
+    /** Position hint for styling: 'bottom' (default overlay), 'top' (overlay), or 'below' (solid) */
+    position?: 'bottom' | 'top' | 'below';
+}
+export declare const FlintImageListItemBar: React.ForwardRefExoticComponent<FlintImageListItemBarProps & React.RefAttributes<FlintImageListItemBarElement>>;

package/dist/components/FlintInput.d.ts

@@ -1,8 +1,46 @@
 import React from 'react';
-import { type EventName } from '@lit/react';
 import { FlintInput as FlintInputElement } from '@getufy/flint-ui/input/flint-input';
-export declare const FlintInput: import("@lit/react").ReactWebComponent<FlintInputElement, {
-    onFlintInputInput: EventName<CustomEvent>;
-    onFlintInputChange: EventName<CustomEvent>;
-}>;
-export type FlintInputProps = React.ComponentProps<typeof FlintInput>;
+export interface FlintInputInputDetail {
+    value: string;
+}
+export interface FlintInputChangeDetail {
+    value: string;
+}
+/**
+ * Input: a styled text input with label, help text, and error states.
+ */
+export interface FlintInputProps extends Omit<React.HTMLAttributes<FlintInputElement>, 'defaultValue'> {
+    /** Label text displayed above the input. */
+    label?: string;
+    /** Current input value. */
+    value?: string;
+    /** HTML input type (text, email, password, etc.). */
+    type?: string;
+    /** Placeholder text shown when the input is empty. */
+    placeholder?: string;
+    /** Help text displayed below the input. */
+    helperText?: string;
+    /** Whether the input is in an error state. */
+    error?: boolean;
+    /** Error message displayed below the input. */
+    errorMessage?: string;
+    /** Disables the input and prevents interaction. */
+    disabled?: boolean;
+    /** Marks the input as required for form validation. */
+    required?: boolean;
+    /** Makes the input read-only. */
+    readonly?: boolean;
+    /** Form field name used when submitting form data. */
+    name?: string;
+    /** Browser autocomplete hint. */
+    autocomplete?: string;
+    /** 'sm' | 'default' | 'lg' */
+    size?: 'sm' | 'default' | 'lg';
+    /** Initial value for uncontrolled usage. */
+    defaultValue?: string;
+    /** Fired on each keystroke as the value changes. */
+    onFlintInputInput?: (event: CustomEvent<FlintInputInputDetail>) => void;
+    /** Fired when the input loses focus after the value has changed. */
+    onFlintInputChange?: (event: CustomEvent<FlintInputChangeDetail>) => void;
+}
+export declare const FlintInput: React.ForwardRefExoticComponent<FlintInputProps & React.RefAttributes<FlintInputElement>>;

package/dist/components/FlintInputOtp.d.ts

@@ -1,8 +1,38 @@
 import React from 'react';
-import { type EventName } from '@lit/react';
 import { FlintInputOtp as FlintInputOtpElement } from '@getufy/flint-ui/input-otp/flint-input-otp';
-export declare const FlintInputOtp: import("@lit/react").ReactWebComponent<FlintInputOtpElement, {
-    onFlintOtpChange: EventName<CustomEvent>;
-    onFlintOtpComplete: EventName<CustomEvent>;
-}>;
-export type FlintInputOtpProps = React.ComponentProps<typeof FlintInputOtp>;
+export interface FlintOtpChangeDetail {
+    value: string;
+}
+export interface FlintOtpCompleteDetail {
+    value: string;
+}
+/**
+ * Accessible one-time password input with copy/paste support.
+Manages a hidden native `<input>` and syncs each `flint-input-otp-slot`
+with the appropriate character and active-cursor state.
+ *
+ * @slot - Accepts `flint-input-otp-group`, `flint-input-otp-separator`, and
+  `flint-input-otp-slot` elements.
+ */
+export interface FlintInputOtpProps extends Omit<React.HTMLAttributes<FlintInputOtpElement>, 'defaultValue'> {
+    /** Current OTP value. Reflects to attribute for external observation. */
+    value?: string;
+    /** Initial uncontrolled value. Has no effect after the first render. */
+    defaultValue?: string;
+    /** Total number of character slots. */
+    maxLength?: number;
+    /** Per-character regex pattern string. Characters failing the test are */
+    pattern?: string;
+    /** Disables the OTP input. */
+    disabled?: boolean;
+    /** Accessible label for the hidden input (used as aria-label). */
+    label?: string;
+    /** Optional description text for the hidden input (used as aria-describedby). */
+    description?: string;
+    /** Fired on every value change. `detail: { value: string }`. */
+    onFlintOtpChange?: (event: CustomEvent<FlintOtpChangeDetail>) => void;
+    /** Fired when `maxLength` chars have been entered.
+                  `detail: { value: string }`. */
+    onFlintOtpComplete?: (event: CustomEvent<FlintOtpCompleteDetail>) => void;
+}
+export declare const FlintInputOtp: React.ForwardRefExoticComponent<FlintInputOtpProps & React.RefAttributes<FlintInputOtpElement>>;

package/dist/components/FlintInputOtpGroup.d.ts

@@ -1,4 +1,11 @@
 import React from 'react';
 import { FlintInputOtpGroup as FlintInputOtpGroupElement } from '@getufy/flint-ui/input-otp/flint-input-otp';
-export declare const FlintInputOtpGroup: import("@lit/react").ReactWebComponent<FlintInputOtpGroupElement, {}>;
-export type FlintInputOtpGroupProps = React.ComponentProps<typeof FlintInputOtpGroup>;
+/**
+ * Visual grouping wrapper for `flint-input-otp-slot` elements.
+Renders slots inline with shared borders.
+ *
+ * @slot - Accepts `flint-input-otp-slot` elements.
+ */
+export interface FlintInputOtpGroupProps extends React.HTMLAttributes<FlintInputOtpGroupElement> {
+}
+export declare const FlintInputOtpGroup: React.ForwardRefExoticComponent<FlintInputOtpGroupProps & React.RefAttributes<FlintInputOtpGroupElement>>;

package/dist/components/FlintInputOtpSeparator.d.ts

@@ -1,4 +1,9 @@
 import React from 'react';
 import { FlintInputOtpSeparator as FlintInputOtpSeparatorElement } from '@getufy/flint-ui/input-otp/flint-input-otp';
-export declare const FlintInputOtpSeparator: import("@lit/react").ReactWebComponent<FlintInputOtpSeparatorElement, {}>;
-export type FlintInputOtpSeparatorProps = React.ComponentProps<typeof FlintInputOtpSeparator>;
+/**
+ * Visual separator between `flint-input-otp-group` elements.
+Renders a short horizontal bar.
+ */
+export interface FlintInputOtpSeparatorProps extends React.HTMLAttributes<FlintInputOtpSeparatorElement> {
+}
+export declare const FlintInputOtpSeparator: React.ForwardRefExoticComponent<FlintInputOtpSeparatorProps & React.RefAttributes<FlintInputOtpSeparatorElement>>;

package/dist/components/FlintInputOtpSlot.d.ts

@@ -1,4 +1,17 @@
 import React from 'react';
 import { FlintInputOtpSlot as FlintInputOtpSlotElement } from '@getufy/flint-ui/input-otp/flint-input-otp';
-export declare const FlintInputOtpSlot: import("@lit/react").ReactWebComponent<FlintInputOtpSlotElement, {}>;
-export type FlintInputOtpSlotProps = React.ComponentProps<typeof FlintInputOtpSlot>;
+/**
+ * A single character cell in an OTP input.
+Place inside `flint-input-otp-group`. State is managed by `flint-input-otp`.
+ */
+export interface FlintInputOtpSlotProps extends React.HTMLAttributes<FlintInputOtpSlotElement> {
+    /** Zero-based position index of this slot. */
+    index?: number;
+    /** Character displayed. Set by the parent `flint-input-otp`. */
+    char?: string;
+    /** Whether the cursor is at this position. Set by the parent `flint-input-otp`. */
+    active?: boolean;
+    /** Error / invalid state. */
+    invalid?: boolean;
+}
+export declare const FlintInputOtpSlot: React.ForwardRefExoticComponent<FlintInputOtpSlotProps & React.RefAttributes<FlintInputOtpSlotElement>>;

package/dist/components/FlintItem.d.ts

@@ -1,4 +1,17 @@
 import React from 'react';
 import { FlintItem as FlintItemElement } from '@getufy/flint-ui/item/flint-item';
-export declare const FlintItem: import("@lit/react").ReactWebComponent<FlintItemElement, {}>;
-export type FlintItemProps = React.ComponentProps<typeof FlintItem>;
+/**
+ * Root container for displaying content with media, title,
+description, and actions. A versatile flex row that adapts to
+icons, avatars, images, and action buttons.
+ *
+ * @slot - Accepts `flint-item-header`, `flint-item-media`, `flint-item-content`,
+  `flint-item-actions`, `flint-item-footer`, and any other elements.
+ */
+export interface FlintItemProps extends React.HTMLAttributes<FlintItemElement> {
+    /** Visual style of the item. */
+    variant?: 'default' | 'outline' | 'muted';
+    /** Size preset controlling padding and gap. */
+    size?: 'default' | 'sm' | 'xs';
+}
+export declare const FlintItem: React.ForwardRefExoticComponent<FlintItemProps & React.RefAttributes<FlintItemElement>>;

package/dist/components/FlintItemActions.d.ts

@@ -1,4 +1,11 @@
 import React from 'react';
 import { FlintItemActions as FlintItemActionsElement } from '@getufy/flint-ui/item/flint-item';
-export declare const FlintItemActions: import("@lit/react").ReactWebComponent<FlintItemActionsElement, {}>;
-export type FlintItemActionsProps = React.ComponentProps<typeof FlintItemActions>;
+/**
+ * Container for action buttons or other interactive elements.
+Aligns itself to the trailing edge of the item row.
+ *
+ * @slot - Buttons, icons, or any interactive elements.
+ */
+export interface FlintItemActionsProps extends React.HTMLAttributes<FlintItemActionsElement> {
+}
+export declare const FlintItemActions: React.ForwardRefExoticComponent<FlintItemActionsProps & React.RefAttributes<FlintItemActionsElement>>;

package/dist/components/FlintItemContent.d.ts

@@ -1,4 +1,10 @@
 import React from 'react';
 import { FlintItemContent as FlintItemContentElement } from '@getufy/flint-ui/item/flint-item';
-export declare const FlintItemContent: import("@lit/react").ReactWebComponent<FlintItemContentElement, {}>;
-export type FlintItemContentProps = React.ComponentProps<typeof FlintItemContent>;
+/**
+ * Flex-column wrapper for an item's title and description.
+ *
+ * @slot - Accepts `flint-item-title`, `flint-item-description`, or any content.
+ */
+export interface FlintItemContentProps extends React.HTMLAttributes<FlintItemContentElement> {
+}
+export declare const FlintItemContent: React.ForwardRefExoticComponent<FlintItemContentProps & React.RefAttributes<FlintItemContentElement>>;

package/dist/components/FlintItemDescription.d.ts

@@ -1,4 +1,10 @@
 import React from 'react';
 import { FlintItemDescription as FlintItemDescriptionElement } from '@getufy/flint-ui/item/flint-item';
-export declare const FlintItemDescription: import("@lit/react").ReactWebComponent<FlintItemDescriptionElement, {}>;
-export type FlintItemDescriptionProps = React.ComponentProps<typeof FlintItemDescription>;
+/**
+ * Displays the description of an item.
+ *
+ * @slot - Description text.
+ */
+export interface FlintItemDescriptionProps extends React.HTMLAttributes<FlintItemDescriptionElement> {
+}
+export declare const FlintItemDescription: React.ForwardRefExoticComponent<FlintItemDescriptionProps & React.RefAttributes<FlintItemDescriptionElement>>;

package/dist/components/FlintItemFooter.d.ts

@@ -1,4 +1,12 @@
 import React from 'react';
 import { FlintItemFooter as FlintItemFooterElement } from '@getufy/flint-ui/item/flint-item';
-export declare const FlintItemFooter: import("@lit/react").ReactWebComponent<FlintItemFooterElement, {}>;
-export type FlintItemFooterProps = React.ComponentProps<typeof FlintItemFooter>;
+/**
+ * Full-bleed footer that spans the bottom of the item, cancelling the
+item's padding so the footer appears flush with the border.
+Always place as the last child of `flint-item`.
+ *
+ * @slot - Footer content: metadata, links, supplementary actions.
+ */
+export interface FlintItemFooterProps extends React.HTMLAttributes<FlintItemFooterElement> {
+}
+export declare const FlintItemFooter: React.ForwardRefExoticComponent<FlintItemFooterProps & React.RefAttributes<FlintItemFooterElement>>;

package/dist/components/FlintItemGroup.d.ts

@@ -1,4 +1,10 @@
 import React from 'react';
 import { FlintItemGroup as FlintItemGroupElement } from '@getufy/flint-ui/item/flint-item';
-export declare const FlintItemGroup: import("@lit/react").ReactWebComponent<FlintItemGroupElement, {}>;
-export type FlintItemGroupProps = React.ComponentProps<typeof FlintItemGroup>;
+/**
+ * Container for grouping related items together.
+ *
+ * @slot - Accepts `flint-item`, `flint-item-separator`, and any other elements.
+ */
+export interface FlintItemGroupProps extends React.HTMLAttributes<FlintItemGroupElement> {
+}
+export declare const FlintItemGroup: React.ForwardRefExoticComponent<FlintItemGroupProps & React.RefAttributes<FlintItemGroupElement>>;

package/dist/components/FlintItemHeader.d.ts

@@ -1,4 +1,12 @@
 import React from 'react';
 import { FlintItemHeader as FlintItemHeaderElement } from '@getufy/flint-ui/item/flint-item';
-export declare const FlintItemHeader: import("@lit/react").ReactWebComponent<FlintItemHeaderElement, {}>;
-export type FlintItemHeaderProps = React.ComponentProps<typeof FlintItemHeader>;
+/**
+ * Full-bleed header that spans the top of the item, cancelling the
+item's padding so media (images) appear flush with the border.
+Always place as the first child of `flint-item`.
+ *
+ * @slot - Header content, typically an image or decorative element.
+ */
+export interface FlintItemHeaderProps extends React.HTMLAttributes<FlintItemHeaderElement> {
+}
+export declare const FlintItemHeader: React.ForwardRefExoticComponent<FlintItemHeaderProps & React.RefAttributes<FlintItemHeaderElement>>;

package/dist/components/FlintItemMedia.d.ts

@@ -1,4 +1,12 @@
 import React from 'react';
 import { FlintItemMedia as FlintItemMediaElement } from '@getufy/flint-ui/item/flint-item';
-export declare const FlintItemMedia: import("@lit/react").ReactWebComponent<FlintItemMediaElement, {}>;
-export type FlintItemMediaProps = React.ComponentProps<typeof FlintItemMedia>;
+/**
+ * Media container for an item (icon, avatar, or image).
+ *
+ * @slot - Media content: SVG icon, avatar element, or image.
+ */
+export interface FlintItemMediaProps extends React.HTMLAttributes<FlintItemMediaElement> {
+    /** Visual treatment for the media container. */
+    variant?: 'default' | 'icon' | 'image';
+}
+export declare const FlintItemMedia: React.ForwardRefExoticComponent<FlintItemMediaProps & React.RefAttributes<FlintItemMediaElement>>;

package/dist/components/FlintItemSeparator.d.ts

@@ -1,4 +1,8 @@
 import React from 'react';
 import { FlintItemSeparator as FlintItemSeparatorElement } from '@getufy/flint-ui/item/flint-item';
-export declare const FlintItemSeparator: import("@lit/react").ReactWebComponent<FlintItemSeparatorElement, {}>;
-export type FlintItemSeparatorProps = React.ComponentProps<typeof FlintItemSeparator>;
+/**
+ * Visual separator between items in a group.
+ */
+export interface FlintItemSeparatorProps extends React.HTMLAttributes<FlintItemSeparatorElement> {
+}
+export declare const FlintItemSeparator: React.ForwardRefExoticComponent<FlintItemSeparatorProps & React.RefAttributes<FlintItemSeparatorElement>>;

package/dist/components/FlintItemTitle.d.ts

@@ -1,4 +1,10 @@
 import React from 'react';
 import { FlintItemTitle as FlintItemTitleElement } from '@getufy/flint-ui/item/flint-item';
-export declare const FlintItemTitle: import("@lit/react").ReactWebComponent<FlintItemTitleElement, {}>;
-export type FlintItemTitleProps = React.ComponentProps<typeof FlintItemTitle>;
+/**
+ * Displays the title of an item.
+ *
+ * @slot - Title text.
+ */
+export interface FlintItemTitleProps extends React.HTMLAttributes<FlintItemTitleElement> {
+}
+export declare const FlintItemTitle: React.ForwardRefExoticComponent<FlintItemTitleProps & React.RefAttributes<FlintItemTitleElement>>;

package/dist/components/FlintKbd.d.ts

@@ -1,4 +1,17 @@
 import React from 'react';
 import { FlintKbd as FlintKbdElement } from '@getufy/flint-ui/kbd/flint-kbd';
-export declare const FlintKbd: import("@lit/react").ReactWebComponent<FlintKbdElement, {}>;
-export type FlintKbdProps = React.ComponentProps<typeof FlintKbd>;
+/**
+ * Displays a single keyboard key or modifier symbol.
+Renders a semantic `<kbd>` element for accessibility.
+ *
+ * @slot - Key label: text, symbol (⌘ ⇧ ⌥ ⌃ ⏎), or any inline content.
+ */
+export interface FlintKbdProps extends React.HTMLAttributes<FlintKbdElement> {
+    /** Visual size of the key. */
+    size?: 'sm' | 'default' | 'lg';
+    /** Visual style: `raised` (default, bottom border + shadow) or `flat` (no raised effect). */
+    variant?: 'raised' | 'flat';
+    /** Accessible label forwarded as `aria-label` on the inner `<kbd>` element. Useful for symbol keys like ⌘. */
+    label?: string;
+}
+export declare const FlintKbd: React.ForwardRefExoticComponent<FlintKbdProps & React.RefAttributes<FlintKbdElement>>;

package/dist/components/FlintKbdGroup.d.ts

@@ -1,4 +1,11 @@
 import React from 'react';
 import { FlintKbdGroup as FlintKbdGroupElement } from '@getufy/flint-ui/kbd/flint-kbd';
-export declare const FlintKbdGroup: import("@lit/react").ReactWebComponent<FlintKbdGroupElement, {}>;
-export type FlintKbdGroupProps = React.ComponentProps<typeof FlintKbdGroup>;
+/**
+ * Groups multiple `flint-kbd` elements in a row.
+Provides a flex container with tight spacing for key combos.
+ *
+ * @slot - `flint-kbd` elements, separators (e.g. `<span>+</span>`), or text.
+ */
+export interface FlintKbdGroupProps extends React.HTMLAttributes<FlintKbdGroupElement> {
+}
+export declare const FlintKbdGroup: React.ForwardRefExoticComponent<FlintKbdGroupProps & React.RefAttributes<FlintKbdGroupElement>>;

package/dist/components/FlintLinearProgress.d.ts

@@ -1,4 +1,18 @@
 import React from 'react';
 import { FlintLinearProgress as FlintLinearProgressElement } from '@getufy/flint-ui/progress/flint-linear-progress';
-export declare const FlintLinearProgress: import("@lit/react").ReactWebComponent<FlintLinearProgressElement, {}>;
-export type FlintLinearProgressProps = React.ComponentProps<typeof FlintLinearProgress>;
+/**
+ * flint-linear-progress: a horizontal progress bar.
+ */
+export interface FlintLinearProgressProps extends Omit<React.HTMLAttributes<FlintLinearProgressElement>, 'color'> {
+    /** Progress variant: determinate shows a specific value, indeterminate shows an animation. */
+    variant?: 'determinate' | 'indeterminate';
+    /** Current progress value (0-100). */
+    value?: number;
+    /** Height of the progress bar in pixels. */
+    height?: number;
+    /** Color theme of the progress bar. */
+    color?: 'primary' | 'success' | 'error' | 'warning';
+    /** Accessible label for the progress bar. */
+    label?: string;
+}
+export declare const FlintLinearProgress: React.ForwardRefExoticComponent<FlintLinearProgressProps & React.RefAttributes<FlintLinearProgressElement>>;

package/dist/components/FlintLink.d.ts

@@ -1,4 +1,29 @@
 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.
+ */
+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/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/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/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/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/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/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/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/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?: string;
+    /** 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>>;