@getufy/flint-ui-react 0.2.2 → 0.4.0

package/dist/components/FlintEmpty.d.ts

@@ -1,4 +1,12 @@
 import React from 'react';
 import { FlintEmpty as FlintEmptyElement } from '@getufy/flint-ui/empty/flint-empty';
-export declare const FlintEmpty: import("@lit/react").ReactWebComponent<FlintEmptyElement, {}>;
-export type FlintEmptyProps = React.ComponentProps<typeof FlintEmpty>;
+/**
+ * Root container for an empty state. Wraps `flint-empty-header` and
+`flint-empty-content` in a vertically centred flex column.
+ *
+ * @slot - Accepts `flint-empty-header`, `flint-empty-content`, and any extra
+  elements (e.g. a "Learn More" link).
+ */
+export interface FlintEmptyProps extends React.HTMLAttributes<FlintEmptyElement> {
+}
+export declare const FlintEmpty: React.ForwardRefExoticComponent<FlintEmptyProps & React.RefAttributes<FlintEmptyElement>>;

package/dist/components/FlintEmpty.js

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

package/dist/components/FlintEmptyContent.d.ts

@@ -1,4 +1,10 @@
 import React from 'react';
 import { FlintEmptyContent as FlintEmptyContentElement } from '@getufy/flint-ui/empty/flint-empty';
-export declare const FlintEmptyContent: import("@lit/react").ReactWebComponent<FlintEmptyContentElement, {}>;
-export type FlintEmptyContentProps = React.ComponentProps<typeof FlintEmptyContent>;
+/**
+ * Displays action content for an empty state (buttons, inputs, links).
+ *
+ * @slot - Action elements such as buttons or inputs.
+ */
+export interface FlintEmptyContentProps extends React.HTMLAttributes<FlintEmptyContentElement> {
+}
+export declare const FlintEmptyContent: React.ForwardRefExoticComponent<FlintEmptyContentProps & React.RefAttributes<FlintEmptyContentElement>>;

package/dist/components/FlintEmptyContent.js

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

package/dist/components/FlintEmptyDescription.d.ts

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

package/dist/components/FlintEmptyDescription.js

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

package/dist/components/FlintEmptyHeader.d.ts

@@ -1,4 +1,10 @@
 import React from 'react';
 import { FlintEmptyHeader as FlintEmptyHeaderElement } from '@getufy/flint-ui/empty/flint-empty';
-export declare const FlintEmptyHeader: import("@lit/react").ReactWebComponent<FlintEmptyHeaderElement, {}>;
-export type FlintEmptyHeaderProps = React.ComponentProps<typeof FlintEmptyHeader>;
+/**
+ * Groups the media, title, and description of an empty state.
+ *
+ * @slot - Accepts `flint-empty-media`, `flint-empty-title`, `flint-empty-description`.
+ */
+export interface FlintEmptyHeaderProps extends React.HTMLAttributes<FlintEmptyHeaderElement> {
+}
+export declare const FlintEmptyHeader: React.ForwardRefExoticComponent<FlintEmptyHeaderProps & React.RefAttributes<FlintEmptyHeaderElement>>;

package/dist/components/FlintEmptyHeader.js

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

package/dist/components/FlintEmptyMedia.d.ts

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

package/dist/components/FlintEmptyMedia.js

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

package/dist/components/FlintEmptyTitle.d.ts

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

package/dist/components/FlintEmptyTitle.js

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

package/dist/components/FlintFab.d.ts

@@ -1,4 +1,17 @@
 import React from 'react';
 import { FlintFab as FlintFabElement } from '@getufy/flint-ui/fab/flint-fab';
-export declare const FlintFab: import("@lit/react").ReactWebComponent<FlintFabElement, {}>;
-export type FlintFabProps = React.ComponentProps<typeof FlintFab>;
+/**
+ * A floating action button (FAB) represents the primary action of a screen.
+ *
+ * @slot icon - The icon to display inside the FAB.
+ * @slot - Default slot for icon content (icon-only FAB).
+ * @slot label - The label to display in the extended FAB.
+ */
+export interface FlintFabProps extends React.HTMLAttributes<FlintFabElement> {
+    extended?: boolean;
+    disabled?: boolean;
+    /** Accessible label for icon-only (non-extended) FABs. */
+    label?: string;
+    position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left' | 'static';
+}
+export declare const FlintFab: React.ForwardRefExoticComponent<FlintFabProps & React.RefAttributes<FlintFabElement>>;

package/dist/components/FlintFab.js

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

package/dist/components/FlintFormatDate.d.ts

@@ -1,4 +1,41 @@
 import React from 'react';
 import { FlintFormatDate as FlintFormatDateElement } from '@getufy/flint-ui/format-date/flint-format-date';
-export declare const FlintFormatDate: import("@lit/react").ReactWebComponent<FlintFormatDateElement, {}>;
-export type FlintFormatDateProps = React.ComponentProps<typeof FlintFormatDate>;
+/**
+ * Formats a date/time using the specified locale and options.
+Localization is handled by the browser's `Intl.DateTimeFormat` API — no language packs required.
+ */
+export interface FlintFormatDateProps extends Omit<React.HTMLAttributes<FlintFormatDateElement>, 'lang'> {
+    /** The date/time to format. Accepts a `Date` object or any string accepted by `new Date()`. */
+    date?: FlintFormatDateElement['date'];
+    /** The format for displaying the weekday. */
+    weekday?: 'narrow' | 'short' | 'long' | undefined;
+    /** The format for displaying the era. */
+    era?: 'narrow' | 'short' | 'long' | undefined;
+    /** The format for displaying the year. */
+    year?: 'numeric' | '2-digit' | undefined;
+    /** The format for displaying the month. */
+    month?: 'numeric' | '2-digit' | 'narrow' | 'short' | 'long' | undefined;
+    /** The format for displaying the day. */
+    day?: 'numeric' | '2-digit' | undefined;
+    /** The format for displaying the hour. */
+    hour?: 'numeric' | '2-digit' | undefined;
+    /** The format for displaying the minute. */
+    minute?: 'numeric' | '2-digit' | undefined;
+    /** The format for displaying the second. */
+    second?: 'numeric' | '2-digit' | undefined;
+    /** The format for displaying the time zone name. */
+    timeZoneName?: 'short' | 'long' | 'shortOffset' | 'longOffset' | 'shortGeneric' | 'longGeneric' | undefined;
+    /** The time zone to express the time in (e.g. "UTC", "America/New_York"). */
+    timeZone?: string | undefined;
+    /** Number of fractional second digits to display (1–3). */
+    fractionalSecondDigits?: 1 | 2 | 3 | undefined;
+    /** Shorthand date format style. Cannot be combined with individual date field props */
+    dateStyle?: 'full' | 'long' | 'medium' | 'short' | undefined;
+    /** Shorthand time format style. Cannot be combined with individual time field props */
+    timeStyle?: 'full' | 'long' | 'medium' | 'short' | undefined;
+    /** The hour format to use. `'auto'` uses the browser/locale default. */
+    hourFormat?: 'auto' | '12' | '24';
+    /** BCP 47 language tag for formatting locale (e.g. "en", "fr", "ru"). Inherits from the document when unset. */
+    lang?: string;
+}
+export declare const FlintFormatDate: React.ForwardRefExoticComponent<FlintFormatDateProps & React.RefAttributes<FlintFormatDateElement>>;

package/dist/components/FlintFormatDate.js

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

package/dist/components/FlintFormatNumber.d.ts

@@ -1,4 +1,41 @@
 import React from 'react';
 import { FlintFormatNumber as FlintFormatNumberElement } from '@getufy/flint-ui/format-number/flint-format-number';
-export declare const FlintFormatNumber: import("@lit/react").ReactWebComponent<FlintFormatNumberElement, {}>;
-export type FlintFormatNumberProps = React.ComponentProps<typeof FlintFormatNumber>;
+/**
+ * Formats a number using the specified locale and options.
+Localization is handled by the browser's `Intl.NumberFormat` API — no language packs required.
+ */
+export interface FlintFormatNumberProps extends Omit<React.HTMLAttributes<FlintFormatNumberElement>, 'lang'> {
+    /** The number to format. */
+    value?: number;
+    /** The formatting style to use. */
+    type?: 'currency' | 'decimal' | 'percent' | 'unit';
+    /** Turns off grouping separators (e.g. thousands separator). */
+    noGrouping?: boolean;
+    /** The ISO 4217 currency code to use when formatting (e.g. 'USD', 'EUR', 'GBP'). */
+    currency?: string;
+    /** How to display the currency. */
+    currencyDisplay?: 'symbol' | 'narrowSymbol' | 'code' | 'name';
+    /** Number notation style. 'compact' renders e.g. "1.2K" or "3.4M". */
+    notation?: 'standard' | 'scientific' | 'engineering' | 'compact';
+    /** How to display compact notation — 'short' (1K) or 'long' (1 thousand). */
+    compactDisplay?: 'short' | 'long';
+    /** When to show the sign. */
+    signDisplay?: 'auto' | 'never' | 'always' | 'exceptZero';
+    /** ECMA-402 unit identifier (e.g. 'kilometer', 'kilogram', 'celsius'). Required when type='unit'. */
+    unit?: string;
+    /** How to display the unit when type='unit'. */
+    unitDisplay?: 'short' | 'long' | 'narrow';
+    /** The minimum number of integer digits (1–21). */
+    minimumIntegerDigits?: number | undefined;
+    /** The minimum number of fraction digits (0–20). */
+    minimumFractionDigits?: number | undefined;
+    /** The maximum number of fraction digits (0–20). */
+    maximumFractionDigits?: number | undefined;
+    /** The minimum number of significant digits (1–21). */
+    minimumSignificantDigits?: number | undefined;
+    /** The maximum number of significant digits (1–21). */
+    maximumSignificantDigits?: number | undefined;
+    /** BCP 47 language tag for formatting locale. Inherits from the document when unset. */
+    lang?: string;
+}
+export declare const FlintFormatNumber: React.ForwardRefExoticComponent<FlintFormatNumberProps & React.RefAttributes<FlintFormatNumberElement>>;

package/dist/components/FlintFormatNumber.js

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

package/dist/components/FlintGrid.d.ts

@@ -1,4 +1,37 @@
 import React from 'react';
 import { FlintGrid as FlintGridElement } from '@getufy/flint-ui/grid/flint-grid';
-export declare const FlintGrid: import("@lit/react").ReactWebComponent<FlintGridElement, {}>;
-export type FlintGridProps = React.ComponentProps<typeof FlintGrid>;
+export interface FlintGridProps extends React.HTMLAttributes<FlintGridElement> {
+    /** Whether this element acts as a grid container. */
+    container?: boolean;
+    /** Flex direction of the grid container. */
+    direction?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
+    /** Flex wrap behavior of the grid container. */
+    wrap?: 'nowrap' | 'wrap' | 'wrap-reverse';
+    /** Cross-axis alignment of grid items. */
+    alignItems?: 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline';
+    /** Main-axis alignment of grid items. */
+    justifyContent?: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';
+    /** Total number of columns. Default is 12. */
+    columns?: number;
+    /** Spacing between items. 1 unit = 8px. */
+    spacing?: FlintGridElement['spacing'];
+    /** Row spacing override; takes precedence over `spacing` for the row axis. */
+    rowSpacing?: FlintGridElement['rowSpacing'];
+    /** Column spacing override; takes precedence over `spacing` for the column axis. */
+    columnSpacing?: FlintGridElement['columnSpacing'];
+    /** Number of columns to span at the xs breakpoint. */
+    xs?: FlintGridElement['xs'];
+    /** Number of columns to span at the sm breakpoint. */
+    sm?: FlintGridElement['sm'];
+    /** Number of columns to span at the md breakpoint. */
+    md?: FlintGridElement['md'];
+    /** Number of columns to span at the lg breakpoint. */
+    lg?: FlintGridElement['lg'];
+    /** Number of columns to span at the xl breakpoint. */
+    xl?: FlintGridElement['xl'];
+    /** Offset per breakpoint, expressed in column units or 'auto'. */
+    offset?: FlintGridElement['offset'];
+    /** Flex order. Supports responsive values so items can be reordered at */
+    order?: FlintGridElement['order'];
+}
+export declare const FlintGrid: React.ForwardRefExoticComponent<FlintGridProps & React.RefAttributes<FlintGridElement>>;

package/dist/components/FlintGrid.js

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

package/dist/components/FlintHoverCard.d.ts

@@ -1,4 +1,25 @@
 import React from 'react';
 import { FlintHoverCard as FlintHoverCardElement } from '@getufy/flint-ui/hover-card/flint-hover-card';
-export declare const FlintHoverCard: import("@lit/react").ReactWebComponent<FlintHoverCardElement, {}>;
-export type FlintHoverCardProps = React.ComponentProps<typeof FlintHoverCard>;
+export interface FlintHoverCardOpenDetail {
+    open: true;
+}
+export interface FlintHoverCardCloseDetail {
+    open: false;
+}
+/**
+ * Root container for a hover card.
+Manages open/closed state with configurable open and close delays.
+ *
+ * @slot - Accepts `flint-hover-card-trigger` and `flint-hover-card-content`.
+ */
+export interface FlintHoverCardProps extends React.HTMLAttributes<FlintHoverCardElement> {
+    /** Delay in milliseconds before the hover card opens. */
+    openDelay?: number;
+    /** Delay in milliseconds before the hover card closes. */
+    closeDelay?: number;
+    /** Fired when the card becomes visible. detail: `{ open: true }` */
+    onFlintHoverCardOpen?: (event: CustomEvent<FlintHoverCardOpenDetail>) => void;
+    /** Fired when the card is dismissed. detail: `{ open: false }` */
+    onFlintHoverCardClose?: (event: CustomEvent<FlintHoverCardCloseDetail>) => void;
+}
+export declare const FlintHoverCard: React.ForwardRefExoticComponent<FlintHoverCardProps & React.RefAttributes<FlintHoverCardElement>>;

package/dist/components/FlintHoverCard.js

@@ -0,0 +1,16 @@
+// src/components/FlintHoverCard.tsx
+import React from "react";
+import { createComponent } from "@lit/react";
+import { FlintHoverCard as FlintHoverCardElement } from "@getufy/flint-ui/hover-card/flint-hover-card";
+var FlintHoverCard = createComponent({
+  tagName: "flint-hover-card",
+  elementClass: FlintHoverCardElement,
+  react: React,
+  events: {
+    onFlintHoverCardOpen: "flint-hover-card-open",
+    onFlintHoverCardClose: "flint-hover-card-close"
+  }
+});
+export {
+  FlintHoverCard
+};

package/dist/components/FlintHoverCardContent.d.ts

@@ -1,4 +1,17 @@
 import React from 'react';
 import { FlintHoverCardContent as FlintHoverCardContentElement } from '@getufy/flint-ui/hover-card/flint-hover-card';
-export declare const FlintHoverCardContent: import("@lit/react").ReactWebComponent<FlintHoverCardContentElement, {}>;
-export type FlintHoverCardContentProps = React.ComponentProps<typeof FlintHoverCardContent>;
+/**
+ * The floating card panel. Position is controlled via `side` and `align`.
+Place inside `flint-hover-card`; its `open` state is managed by the parent.
+ *
+ * @slot - Rich content displayed inside the card.
+ */
+export interface FlintHoverCardContentProps extends React.HTMLAttributes<FlintHoverCardContentElement> {
+    /** Which side of the trigger to display the card on. */
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    /** Alignment of the card along the cross axis relative to the trigger. */
+    align?: 'start' | 'center' | 'end';
+    /** Whether the card is visible. Managed by the parent `flint-hover-card`. */
+    open?: boolean;
+}
+export declare const FlintHoverCardContent: React.ForwardRefExoticComponent<FlintHoverCardContentProps & React.RefAttributes<FlintHoverCardContentElement>>;

package/dist/components/FlintHoverCardContent.js

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

package/dist/components/FlintHoverCardTrigger.d.ts

@@ -1,4 +1,11 @@
 import React from 'react';
 import { FlintHoverCardTrigger as FlintHoverCardTriggerElement } from '@getufy/flint-ui/hover-card/flint-hover-card';
-export declare const FlintHoverCardTrigger: import("@lit/react").ReactWebComponent<FlintHoverCardTriggerElement, {}>;
-export type FlintHoverCardTriggerProps = React.ComponentProps<typeof FlintHoverCardTrigger>;
+/**
+ * Trigger element for a hover card. Place inside `flint-hover-card`.
+Automatically wires up to the nearest `flint-hover-card` ancestor.
+ *
+ * @slot - The element that activates the hover card (link, button, avatar…).
+ */
+export interface FlintHoverCardTriggerProps extends React.HTMLAttributes<FlintHoverCardTriggerElement> {
+}
+export declare const FlintHoverCardTrigger: React.ForwardRefExoticComponent<FlintHoverCardTriggerProps & React.RefAttributes<FlintHoverCardTriggerElement>>;

package/dist/components/FlintHoverCardTrigger.js

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

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/FlintImageComparer.js

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

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/FlintImageList.js

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

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/FlintImageListItem.js

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

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