@getufy/flint-ui-react 0.2.2 → 1.0.0

package/dist/components/FlintCardContent.d.ts

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

package/dist/components/FlintCardHeader.d.ts

@@ -1,4 +1,14 @@
 import React from 'react';
 import { FlintCardHeader as FlintCardHeaderElement } from '@getufy/flint-ui/card/flint-card-header';
-export declare const FlintCardHeader: import("@lit/react").ReactWebComponent<FlintCardHeaderElement, {}>;
-export type FlintCardHeaderProps = React.ComponentProps<typeof FlintCardHeader>;
+/**
+ * Card Header: the header section of a card.
+ *
+ * @slot avatar - Avatar or icon element.
+ * @slot action - Action element like an icon button.
+ * @slot - Header text content.
+ */
+export interface FlintCardHeaderProps extends Omit<React.HTMLAttributes<FlintCardHeaderElement>, 'title'> {
+    title?: string;
+    subtitle?: string;
+}
+export declare const FlintCardHeader: React.ForwardRefExoticComponent<FlintCardHeaderProps & React.RefAttributes<FlintCardHeaderElement>>;

package/dist/components/FlintCardMedia.d.ts

@@ -1,4 +1,8 @@
 import React from 'react';
 import { FlintCardMedia as FlintCardMediaElement } from '@getufy/flint-ui/card/flint-card-media';
-export declare const FlintCardMedia: import("@lit/react").ReactWebComponent<FlintCardMediaElement, {}>;
-export type FlintCardMediaProps = React.ComponentProps<typeof FlintCardMedia>;
+export interface FlintCardMediaProps extends React.HTMLAttributes<FlintCardMediaElement> {
+    image?: string;
+    alt?: string;
+    height?: string;
+}
+export declare const FlintCardMedia: React.ForwardRefExoticComponent<FlintCardMediaProps & React.RefAttributes<FlintCardMediaElement>>;

package/dist/components/FlintCarousel.d.ts

@@ -1,7 +1,26 @@
 import React from 'react';
-import { type EventName } from '@lit/react';
 import { FlintCarousel as FlintCarouselElement } from '@getufy/flint-ui/carousel/flint-carousel';
-export declare const FlintCarousel: import("@lit/react").ReactWebComponent<FlintCarouselElement, {
-    onFlintCarouselChange: EventName<CustomEvent>;
-}>;
-export type FlintCarouselProps = React.ComponentProps<typeof FlintCarousel>;
+export interface FlintCarouselChangeDetail {
+    index: number;
+    total: number;
+}
+/**
+ * Carousel: a slideshow component for cycling through content.
+ *
+ * @slot - Carousel content: flint-carousel-content, flint-carousel-previous, flint-carousel-next.
+ */
+export interface FlintCarouselProps extends React.HTMLAttributes<FlintCarouselElement> {
+    /** When true, navigation wraps from last slide back to first and vice versa. */
+    loop?: boolean;
+    /** Slide direction axis. */
+    orientation?: 'horizontal' | 'vertical';
+    /** Auto-advance interval in milliseconds. Set to 0 to disable. */
+    autoplay?: number;
+    /** Number of slides visible simultaneously. */
+    itemsPerView?: number;
+    /** Accessible label for the carousel region. */
+    label?: string;
+    /** Fired when the active slide changes. */
+    onFlintCarouselChange?: (event: CustomEvent<FlintCarouselChangeDetail>) => void;
+}
+export declare const FlintCarousel: React.ForwardRefExoticComponent<FlintCarouselProps & React.RefAttributes<FlintCarouselElement>>;

package/dist/components/FlintCarouselContent.d.ts

@@ -1,4 +1,11 @@
 import React from 'react';
 import { FlintCarouselContent as FlintCarouselContentElement } from '@getufy/flint-ui/carousel/flint-carousel';
-export declare const FlintCarouselContent: import("@lit/react").ReactWebComponent<FlintCarouselContentElement, {}>;
-export type FlintCarouselContentProps = React.ComponentProps<typeof FlintCarouselContent>;
+export interface FlintCarouselContentProps extends React.HTMLAttributes<FlintCarouselContentElement> {
+    /** Zero-based index of the first visible slide. */
+    index?: number;
+    /** Number of slides visible at once. */
+    itemsPerView?: number;
+    /** Slide direction axis. */
+    orientation?: 'horizontal' | 'vertical';
+}
+export declare const FlintCarouselContent: React.ForwardRefExoticComponent<FlintCarouselContentProps & React.RefAttributes<FlintCarouselContentElement>>;

package/dist/components/FlintCarouselItem.d.ts

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

package/dist/components/FlintCarouselNext.d.ts

@@ -1,4 +1,14 @@
 import React from 'react';
 import { FlintCarouselNext as FlintCarouselNextElement } from '@getufy/flint-ui/carousel/flint-carousel';
-export declare const FlintCarouselNext: import("@lit/react").ReactWebComponent<FlintCarouselNextElement, {}>;
-export type FlintCarouselNextProps = React.ComponentProps<typeof FlintCarouselNext>;
+/**
+ * Carousel Next: navigation button to go to the next slide.
+ *
+ * @slot - Custom icon content, replaces default chevron.
+ */
+export interface FlintCarouselNextProps extends React.HTMLAttributes<FlintCarouselNextElement> {
+    /** Whether the next button is disabled. */
+    disabled?: boolean;
+    /** Slide direction axis, inherited from the parent carousel. */
+    orientation?: 'horizontal' | 'vertical';
+}
+export declare const FlintCarouselNext: React.ForwardRefExoticComponent<FlintCarouselNextProps & React.RefAttributes<FlintCarouselNextElement>>;

package/dist/components/FlintCarouselPrevious.d.ts

@@ -1,4 +1,14 @@
 import React from 'react';
 import { FlintCarouselPrevious as FlintCarouselPreviousElement } from '@getufy/flint-ui/carousel/flint-carousel';
-export declare const FlintCarouselPrevious: import("@lit/react").ReactWebComponent<FlintCarouselPreviousElement, {}>;
-export type FlintCarouselPreviousProps = React.ComponentProps<typeof FlintCarouselPrevious>;
+/**
+ * Carousel Previous: navigation button to go to the previous slide.
+ *
+ * @slot - Custom icon content, replaces default chevron.
+ */
+export interface FlintCarouselPreviousProps extends React.HTMLAttributes<FlintCarouselPreviousElement> {
+    /** Whether the previous button is disabled. */
+    disabled?: boolean;
+    /** Slide direction axis, inherited from the parent carousel. */
+    orientation?: 'horizontal' | 'vertical';
+}
+export declare const FlintCarouselPrevious: React.ForwardRefExoticComponent<FlintCarouselPreviousProps & React.RefAttributes<FlintCarouselPreviousElement>>;

package/dist/components/FlintCheckbox.d.ts

@@ -1,7 +1,35 @@
 import React from 'react';
-import { type EventName } from '@lit/react';
 import { FlintCheckbox as FlintCheckboxElement } from '@getufy/flint-ui/checkbox/flint-checkbox';
-export declare const FlintCheckbox: import("@lit/react").ReactWebComponent<FlintCheckboxElement, {
-    onFlintCheckboxChange: EventName<CustomEvent>;
-}>;
-export type FlintCheckboxProps = React.ComponentProps<typeof FlintCheckbox>;
+export interface FlintCheckboxChangeDetail {
+    checked: boolean;
+    value: string;
+    indeterminate: boolean;
+}
+/**
+ * Checkbox: a form control for boolean selection.
+ */
+export interface FlintCheckboxProps extends Omit<React.HTMLAttributes<FlintCheckboxElement>, 'defaultChecked'> {
+    /** Whether the checkbox is checked. */
+    checked?: boolean;
+    /** Displays the checkbox in an indeterminate state. */
+    indeterminate?: boolean;
+    /** Disables the checkbox and prevents interaction. */
+    disabled?: boolean;
+    /** Marks the checkbox as required for form validation. */
+    required?: boolean;
+    /** Size of the checkbox control. */
+    size?: 'sm' | 'md' | 'lg';
+    /** Visible label text displayed next to the checkbox. */
+    label?: string;
+    /** Form field name used when submitting form data. */
+    name?: string;
+    /** Value submitted with form data when checked. */
+    value?: string;
+    /** Initial checked state for uncontrolled usage. */
+    defaultChecked?: boolean;
+    /** Accessible label for screen readers when no visible label is provided. */
+    ariaLabel?: string | null;
+    /** Fired when the checked state changes. */
+    onFlintCheckboxChange?: (event: CustomEvent<FlintCheckboxChangeDetail>) => void;
+}
+export declare const FlintCheckbox: React.ForwardRefExoticComponent<FlintCheckboxProps & React.RefAttributes<FlintCheckboxElement>>;

package/dist/components/FlintChip.d.ts

@@ -1,8 +1,31 @@
 import React from 'react';
-import { type EventName } from '@lit/react';
 import { FlintChip as FlintChipElement } from '@getufy/flint-ui/chip/flint-chip';
-export declare const FlintChip: import("@lit/react").ReactWebComponent<FlintChipElement, {
-    onClick: EventName<CustomEvent>;
-    onFlintChipDelete: EventName<CustomEvent>;
-}>;
-export type FlintChipProps = React.ComponentProps<typeof FlintChip>;
+export interface FlintChipDeleteDetail {
+    value: string;
+}
+/**
+ * Chip: a compact element representing an input, attribute, or action.
+ *
+ * @slot avatar - Avatar element shown at start.
+ * @slot icon - Icon shown at start when no avatar.
+ */
+export interface FlintChipProps extends Omit<React.HTMLAttributes<FlintChipElement>, 'onClick' | 'color'> {
+    /** Text content displayed inside the chip. */
+    label?: string;
+    /** Visual style variant of the chip. */
+    variant?: 'filled' | 'outlined';
+    /** Color theme applied to the chip. */
+    color?: 'default' | 'primary' | 'secondary';
+    /** Size of the chip. */
+    size?: 'sm' | 'md' | 'lg';
+    /** Whether the chip responds to click interactions. */
+    clickable?: boolean;
+    /** Whether the chip shows a delete icon. */
+    deletable?: boolean;
+    /** Disables the chip and prevents interaction. */
+    disabled?: boolean;
+    onClick?: (event: CustomEvent) => void;
+    /** Fired when the chip's delete icon is clicked. detail: `{ value: string }` */
+    onFlintChipDelete?: (event: CustomEvent<FlintChipDeleteDetail>) => void;
+}
+export declare const FlintChip: React.ForwardRefExoticComponent<FlintChipProps & React.RefAttributes<FlintChipElement>>;

package/dist/components/FlintCircularProgress.d.ts

@@ -1,4 +1,20 @@
 import React from 'react';
 import { FlintCircularProgress as FlintCircularProgressElement } from '@getufy/flint-ui/progress/flint-circular-progress';
-export declare const FlintCircularProgress: import("@lit/react").ReactWebComponent<FlintCircularProgressElement, {}>;
-export type FlintCircularProgressProps = React.ComponentProps<typeof FlintCircularProgress>;
+/**
+ * flint-circular-progress: a circular progress indicator (spinner).
+ */
+export interface FlintCircularProgressProps extends Omit<React.HTMLAttributes<FlintCircularProgressElement>, 'color'> {
+    /** Progress variant: determinate shows a specific value, indeterminate shows an animation. */
+    variant?: 'determinate' | 'indeterminate';
+    /** Current progress percentage (0-100) for determinate mode. */
+    value?: number;
+    /** Diameter of the circular indicator in pixels. */
+    size?: number;
+    /** Stroke width of the circle in pixels. */
+    thickness?: number;
+    /** Color theme of the progress indicator. */
+    color?: 'primary' | 'success' | 'error' | 'warning';
+    /** Accessible label for the progress indicator. */
+    label?: string;
+}
+export declare const FlintCircularProgress: React.ForwardRefExoticComponent<FlintCircularProgressProps & React.RefAttributes<FlintCircularProgressElement>>;

package/dist/components/FlintCollapsible.d.ts

@@ -1,7 +1,24 @@
 import React from 'react';
-import { type EventName } from '@lit/react';
 import { FlintCollapsible as FlintCollapsibleElement } from '@getufy/flint-ui/collapsible/flint-collapsible';
-export declare const FlintCollapsible: import("@lit/react").ReactWebComponent<FlintCollapsibleElement, {
-    onFlintCollapsibleChange: EventName<CustomEvent>;
-}>;
-export type FlintCollapsibleProps = React.ComponentProps<typeof FlintCollapsible>;
+export interface FlintCollapsibleChangeDetail {
+    open: boolean;
+}
+/**
+ * Root container for a collapsible panel.
+Manages open/closed state and coordinates child trigger and content.
+ *
+ * @slot - Accepts `flint-collapsible-trigger`, `flint-collapsible-content`, and any
+  other elements that should always be visible.
+ */
+export interface FlintCollapsibleProps extends React.HTMLAttributes<FlintCollapsibleElement> {
+    /** Whether the panel is open. Reflects to attribute for CSS targeting. */
+    open?: boolean;
+    /** Initial open state for uncontrolled usage. */
+    defaultOpen?: boolean;
+    /** Disables the trigger, preventing user interaction. */
+    disabled?: boolean;
+    /** Fired when the open state changes.
+`detail: { open: boolean }` */
+    onFlintCollapsibleChange?: (event: CustomEvent<FlintCollapsibleChangeDetail>) => void;
+}
+export declare const FlintCollapsible: React.ForwardRefExoticComponent<FlintCollapsibleProps & React.RefAttributes<FlintCollapsibleElement>>;

package/dist/components/FlintCollapsibleContent.d.ts

@@ -1,4 +1,13 @@
 import React from 'react';
 import { FlintCollapsibleContent as FlintCollapsibleContentElement } from '@getufy/flint-ui/collapsible/flint-collapsible';
-export declare const FlintCollapsibleContent: import("@lit/react").ReactWebComponent<FlintCollapsibleContentElement, {}>;
-export type FlintCollapsibleContentProps = React.ComponentProps<typeof FlintCollapsibleContent>;
+/**
+ * The collapsible panel. Animates open/closed with a CSS grid transition.
+Place inside `flint-collapsible`; its `open` state is managed automatically.
+ *
+ * @slot - Content to reveal when expanded.
+ */
+export interface FlintCollapsibleContentProps extends React.HTMLAttributes<FlintCollapsibleContentElement> {
+    /** Whether the panel is visible. Managed by the parent `flint-collapsible`. */
+    open?: boolean;
+}
+export declare const FlintCollapsibleContent: React.ForwardRefExoticComponent<FlintCollapsibleContentProps & React.RefAttributes<FlintCollapsibleContentElement>>;

package/dist/components/FlintCollapsibleTrigger.d.ts

@@ -1,4 +1,15 @@
 import React from 'react';
 import { FlintCollapsibleTrigger as FlintCollapsibleTriggerElement } from '@getufy/flint-ui/collapsible/flint-collapsible';
-export declare const FlintCollapsibleTrigger: import("@lit/react").ReactWebComponent<FlintCollapsibleTriggerElement, {}>;
-export type FlintCollapsibleTriggerProps = React.ComponentProps<typeof FlintCollapsibleTrigger>;
+/**
+ * Toggle button for a collapsible. Place inside `flint-collapsible`.
+Automatically wires up to the nearest `flint-collapsible` ancestor.
+ *
+ * @slot - Trigger label or any content (icon, text, avatar…).
+ */
+export interface FlintCollapsibleTriggerProps extends React.HTMLAttributes<FlintCollapsibleTriggerElement> {
+    /** Reflects the parent collapsible's open state. Set by `flint-collapsible`. */
+    expanded?: boolean;
+    /** Disables the trigger. Set by `flint-collapsible` or directly. */
+    disabled?: boolean;
+}
+export declare const FlintCollapsibleTrigger: React.ForwardRefExoticComponent<FlintCollapsibleTriggerProps & React.RefAttributes<FlintCollapsibleTriggerElement>>;

package/dist/components/FlintCommand.d.ts

@@ -1,7 +1,13 @@
 import React from 'react';
-import { type EventName } from '@lit/react';
 import { FlintCommand as FlintCommandElement } from '@getufy/flint-ui/command/flint-command';
-export declare const FlintCommand: import("@lit/react").ReactWebComponent<FlintCommandElement, {
-    onFlintCommandItemSelect: EventName<CustomEvent>;
-}>;
-export type FlintCommandProps = React.ComponentProps<typeof FlintCommand>;
+/**
+ * Root command menu component. Manages search filtering and keyboard navigation.
+ *
+ * @slot - Command menu content.
+ */
+export interface FlintCommandProps extends React.HTMLAttributes<FlintCommandElement> {
+    /** Bubbles up from activated items.
+detail: `{ value: string }` */
+    onFlintCommandItemSelect?: (event: CustomEvent) => void;
+}
+export declare const FlintCommand: React.ForwardRefExoticComponent<FlintCommandProps & React.RefAttributes<FlintCommandElement>>;

package/dist/components/FlintCommandDialog.d.ts

@@ -1,7 +1,19 @@
 import React from 'react';
-import { type EventName } from '@lit/react';
 import { FlintCommandDialog as FlintCommandDialogElement } from '@getufy/flint-ui/command/flint-command';
-export declare const FlintCommandDialog: import("@lit/react").ReactWebComponent<FlintCommandDialogElement, {
-    onFlintCommandDialogClose: EventName<CustomEvent>;
-}>;
-export type FlintCommandDialogProps = React.ComponentProps<typeof FlintCommandDialog>;
+export interface FlintCommandDialogCloseDetail {
+    open: boolean;
+}
+/**
+ * Modal dialog wrapper for a command menu. Opens with a smooth backdrop + scale
+animation. Pressing `Escape` or clicking the backdrop fires `flint-command-dialog-close`.
+ *
+ * @slot - Place a `flint-command` element here.
+ */
+export interface FlintCommandDialogProps extends React.HTMLAttributes<FlintCommandDialogElement> {
+    /** Controls the open/closed state of the dialog. */
+    open?: boolean;
+    /** Fired when the dialog should close. detail: `{ open: false }`
+The host is responsible for setting `open = false` in response. */
+    onFlintCommandDialogClose?: (event: CustomEvent<FlintCommandDialogCloseDetail>) => void;
+}
+export declare const FlintCommandDialog: React.ForwardRefExoticComponent<FlintCommandDialogProps & React.RefAttributes<FlintCommandDialogElement>>;

package/dist/components/FlintCommandEmpty.d.ts

@@ -1,4 +1,11 @@
 import React from 'react';
 import { FlintCommandEmpty as FlintCommandEmptyElement } from '@getufy/flint-ui/command/flint-command';
-export declare const FlintCommandEmpty: import("@lit/react").ReactWebComponent<FlintCommandEmptyElement, {}>;
-export type FlintCommandEmptyProps = React.ComponentProps<typeof FlintCommandEmpty>;
+/**
+ * Empty state message shown when no command items match the current query.
+Managed automatically by the parent `flint-command` element.
+ *
+ * @slot - Message text, e.g. "No results found."
+ */
+export interface FlintCommandEmptyProps extends React.HTMLAttributes<FlintCommandEmptyElement> {
+}
+export declare const FlintCommandEmpty: React.ForwardRefExoticComponent<FlintCommandEmptyProps & React.RefAttributes<FlintCommandEmptyElement>>;

package/dist/components/FlintCommandGroup.d.ts

@@ -1,4 +1,13 @@
 import React from 'react';
 import { FlintCommandGroup as FlintCommandGroupElement } from '@getufy/flint-ui/command/flint-command';
-export declare const FlintCommandGroup: import("@lit/react").ReactWebComponent<FlintCommandGroupElement, {}>;
-export type FlintCommandGroupProps = React.ComponentProps<typeof FlintCommandGroup>;
+/**
+ * A labeled group of command items. The parent `flint-command` automatically
+hides the whole group when all its items are filtered out.
+ *
+ * @slot - `flint-command-item` elements.
+ */
+export interface FlintCommandGroupProps extends React.HTMLAttributes<FlintCommandGroupElement> {
+    /** Label rendered above the group items. */
+    heading?: string;
+}
+export declare const FlintCommandGroup: React.ForwardRefExoticComponent<FlintCommandGroupProps & React.RefAttributes<FlintCommandGroupElement>>;

package/dist/components/FlintCommandInput.d.ts

@@ -1,4 +1,13 @@
 import React from 'react';
 import { FlintCommandInput as FlintCommandInputElement } from '@getufy/flint-ui/command/flint-command';
-export declare const FlintCommandInput: import("@lit/react").ReactWebComponent<FlintCommandInputElement, {}>;
-export type FlintCommandInputProps = React.ComponentProps<typeof FlintCommandInput>;
+/**
+ * Search input for the command menu. Dispatches `_cmd-filter` events that
+the parent `flint-command` intercepts to apply filtering.
+ */
+export interface FlintCommandInputProps extends React.HTMLAttributes<FlintCommandInputElement> {
+    /** Placeholder text shown when input is empty. */
+    placeholder?: string;
+    /** Current input value. */
+    value?: string;
+}
+export declare const FlintCommandInput: React.ForwardRefExoticComponent<FlintCommandInputProps & React.RefAttributes<FlintCommandInputElement>>;

package/dist/components/FlintCommandItem.d.ts

@@ -1,7 +1,24 @@
 import React from 'react';
-import { type EventName } from '@lit/react';
 import { FlintCommandItem as FlintCommandItemElement } from '@getufy/flint-ui/command/flint-command';
-export declare const FlintCommandItem: import("@lit/react").ReactWebComponent<FlintCommandItemElement, {
-    onFlintCommandItemSelect: EventName<CustomEvent>;
-}>;
-export type FlintCommandItemProps = React.ComponentProps<typeof FlintCommandItem>;
+export interface FlintCommandItemSelectDetail {
+    value: string;
+}
+/**
+ * A single interactive option inside a command menu.
+ *
+ * @slot - Item label text.
+ * @slot icon - Leading icon (16×16).
+ * @slot shortcut - Trailing shortcut hint; prefer `<flint-command-shortcut>`.
+ */
+export interface FlintCommandItemProps extends React.HTMLAttributes<FlintCommandItemElement> {
+    /** Machine-readable value used for filter matching. Falls back to textContent. */
+    value?: string;
+    /** Disables the item — non-interactive and skipped in keyboard nav. */
+    disabled?: boolean;
+    /** Set by parent `flint-command` to indicate keyboard focus. */
+    highlighted?: boolean;
+    /** Fired when the item is activated.
+detail: `{ value: string }` */
+    onFlintCommandItemSelect?: (event: CustomEvent<FlintCommandItemSelectDetail>) => void;
+}
+export declare const FlintCommandItem: React.ForwardRefExoticComponent<FlintCommandItemProps & React.RefAttributes<FlintCommandItemElement>>;

package/dist/components/FlintCommandList.d.ts

@@ -1,4 +1,10 @@
 import React from 'react';
 import { FlintCommandList as FlintCommandListElement } from '@getufy/flint-ui/command/flint-command';
-export declare const FlintCommandList: import("@lit/react").ReactWebComponent<FlintCommandListElement, {}>;
-export type FlintCommandListProps = React.ComponentProps<typeof FlintCommandList>;
+/**
+ * Scrollable list container for command items and groups.
+ *
+ * @slot - `flint-command-group`, `flint-command-item`, `flint-command-empty`, `flint-command-separator`.
+ */
+export interface FlintCommandListProps extends React.HTMLAttributes<FlintCommandListElement> {
+}
+export declare const FlintCommandList: React.ForwardRefExoticComponent<FlintCommandListProps & React.RefAttributes<FlintCommandListElement>>;

package/dist/components/FlintCommandSeparator.d.ts

@@ -1,4 +1,8 @@
 import React from 'react';
 import { FlintCommandSeparator as FlintCommandSeparatorElement } from '@getufy/flint-ui/command/flint-command';
-export declare const FlintCommandSeparator: import("@lit/react").ReactWebComponent<FlintCommandSeparatorElement, {}>;
-export type FlintCommandSeparatorProps = React.ComponentProps<typeof FlintCommandSeparator>;
+/**
+ * A hairline separator between command groups.
+ */
+export interface FlintCommandSeparatorProps extends React.HTMLAttributes<FlintCommandSeparatorElement> {
+}
+export declare const FlintCommandSeparator: React.ForwardRefExoticComponent<FlintCommandSeparatorProps & React.RefAttributes<FlintCommandSeparatorElement>>;

package/dist/components/FlintCommandShortcut.d.ts

@@ -1,4 +1,11 @@
 import React from 'react';
 import { FlintCommandShortcut as FlintCommandShortcutElement } from '@getufy/flint-ui/command/flint-command';
-export declare const FlintCommandShortcut: import("@lit/react").ReactWebComponent<FlintCommandShortcutElement, {}>;
-export type FlintCommandShortcutProps = React.ComponentProps<typeof FlintCommandShortcut>;
+/**
+ * Displays a keyboard shortcut hint inside a command item.
+Slot the shortcut string (e.g. `⌘P`) as default slot content.
+ *
+ * @slot - Shortcut text, e.g. `⌘P` or `Ctrl+K`.
+ */
+export interface FlintCommandShortcutProps extends React.HTMLAttributes<FlintCommandShortcutElement> {
+}
+export declare const FlintCommandShortcut: React.ForwardRefExoticComponent<FlintCommandShortcutProps & React.RefAttributes<FlintCommandShortcutElement>>;

package/dist/components/FlintContainer.d.ts

@@ -1,4 +1,11 @@
 import React from 'react';
 import { FlintContainer as FlintContainerElement } from '@getufy/flint-ui/container/flint-container';
-export declare const FlintContainer: import("@lit/react").ReactWebComponent<FlintContainerElement, {}>;
-export type FlintContainerProps = React.ComponentProps<typeof FlintContainer>;
+export interface FlintContainerProps extends React.HTMLAttributes<FlintContainerElement> {
+    /** Determine the max-width of the container. */
+    maxWidth?: FlintContainerElement['maxWidth'];
+    /** If `true`, the left and right padding is removed. */
+    disableGutters?: boolean;
+    /** Set the max-width to match the min-width of the current breakpoint. */
+    fixed?: boolean;
+}
+export declare const FlintContainer: React.ForwardRefExoticComponent<FlintContainerProps & React.RefAttributes<FlintContainerElement>>;

package/dist/components/FlintCopyButton.d.ts

@@ -1,8 +1,34 @@
 import React from 'react';
-import { type EventName } from '@lit/react';
 import { FlintCopyButton as FlintCopyButtonElement } from '@getufy/flint-ui/copy-button/flint-copy-button';
-export declare const FlintCopyButton: import("@lit/react").ReactWebComponent<FlintCopyButtonElement, {
-    onFlintCopyError: EventName<CustomEvent>;
-    onFlintCopy: EventName<CustomEvent>;
-}>;
-export type FlintCopyButtonProps = React.ComponentProps<typeof FlintCopyButton>;
+export interface FlintCopyErrorDetail {
+    reason: string;
+}
+export interface FlintCopyDetail {
+    value: string;
+}
+/**
+ * Copy Button: copies text to the clipboard with visual feedback.
+ */
+export interface FlintCopyButtonProps extends React.HTMLAttributes<FlintCopyButtonElement> {
+    /** The text value to copy. */
+    value?: string;
+    /** An id referencing another element to copy from. */
+    from?: string;
+    /** Disables the copy button. */
+    disabled?: boolean;
+    /** Label shown in the tooltip (idle state). */
+    copyLabel?: string;
+    /** Label shown in the tooltip after successful copy. */
+    successLabel?: string;
+    /** Label shown in the tooltip on copy error. */
+    errorLabel?: string;
+    /** Duration (ms) to show feedback before returning to idle. */
+    feedbackDuration?: number;
+    /** Tooltip placement. */
+    tooltipPlacement?: 'top' | 'right' | 'bottom' | 'left';
+    /** Fired when the copy operation fails. */
+    onFlintCopyError?: (event: CustomEvent<FlintCopyErrorDetail>) => void;
+    /** Fired after a successful copy operation. */
+    onFlintCopy?: (event: CustomEvent<FlintCopyDetail>) => void;
+}
+export declare const FlintCopyButton: React.ForwardRefExoticComponent<FlintCopyButtonProps & React.RefAttributes<FlintCopyButtonElement>>;

package/dist/components/FlintDateField.d.ts

@@ -1,8 +1,36 @@
 import React from 'react';
-import { type EventName } from '@lit/react';
 import { FlintDateField as FlintDateFieldElement } from '@getufy/flint-ui/date-field/flint-date-field';
-export declare const FlintDateField: import("@lit/react").ReactWebComponent<FlintDateFieldElement, {
-    onFlintDateFieldClear: EventName<CustomEvent>;
-    onFlintDateFieldChange: EventName<CustomEvent>;
-}>;
-export type FlintDateFieldProps = React.ComponentProps<typeof FlintDateField>;
+export interface FlintDateFieldChangeDetail {
+    value: string;
+}
+/**
+ * A segmented keyboard-driven date input.
+Each section (month, day, year) is independently editable via keyboard.
+ */
+export interface FlintDateFieldProps extends React.HTMLAttributes<FlintDateFieldElement> {
+    /** Controlled date value (ISO YYYY-MM-DD). Set to '' for uncontrolled. */
+    value?: string;
+    /** Field label. */
+    label?: string;
+    /** Form field name. Reflected so the browser picks it up for form data collection. */
+    name?: string;
+    /** Minimum allowed date (ISO). */
+    min?: string;
+    /** Maximum allowed date (ISO). */
+    max?: string;
+    /** Disables the field and prevents interaction. */
+    disabled?: boolean;
+    /** Makes the field read-only (visible but not editable). */
+    readonly?: boolean;
+    /** Displays the field in an error state. */
+    error?: boolean;
+    /** Helper text shown below the field. */
+    helperText?: string;
+    /** Error message displayed below the field when in error state. */
+    errorMessage?: string;
+    /** Fired when all segments are cleared */
+    onFlintDateFieldClear?: (event: CustomEvent) => void;
+    /** { detail: { value: string } } ISO date when all three segments are filled */
+    onFlintDateFieldChange?: (event: CustomEvent<FlintDateFieldChangeDetail>) => void;
+}
+export declare const FlintDateField: React.ForwardRefExoticComponent<FlintDateFieldProps & React.RefAttributes<FlintDateFieldElement>>;

package/dist/components/FlintDatePicker.d.ts

@@ -1,7 +1,37 @@
 import React from 'react';
-import { type EventName } from '@lit/react';
 import { FlintDatePicker as FlintDatePickerElement } from '@getufy/flint-ui/date-picker/flint-date-picker';
-export declare const FlintDatePicker: import("@lit/react").ReactWebComponent<FlintDatePickerElement, {
-    onChange: EventName<CustomEvent>;
-}>;
-export type FlintDatePickerProps = React.ComponentProps<typeof FlintDatePicker>;
+export interface ChangeDetail {
+    value: string;
+}
+/**
+ * A date picker with a text field and a calendar popover/modal.
+ */
+export interface FlintDatePickerProps extends Omit<React.HTMLAttributes<FlintDatePickerElement>, 'onChange'> {
+    /** Selected date as ISO string (YYYY-MM-DD). */
+    value?: string;
+    /** Label shown above the field. */
+    label?: string;
+    /** Placeholder shown in the empty field. */
+    placeholder?: string;
+    /** Form field name attribute. */
+    name?: string;
+    /** Variant: 'desktop' | 'mobile' | 'static' | 'auto'. */
+    variant?: 'desktop' | 'mobile' | 'static' | 'auto';
+    /** Minimum selectable date (ISO). */
+    min?: string;
+    /** Maximum selectable date (ISO). */
+    max?: string;
+    /** Disables the picker. */
+    disabled?: boolean;
+    /** Makes the field read-only (auto-opens a picker when clicked). */
+    readonly?: boolean;
+    /** Shows error styling. */
+    error?: boolean;
+    /** Helper/error text below the field. */
+    helperText?: string;
+    /** Error message displayed below the field when in error state. */
+    errorMessage?: string;
+    /** { detail: { value: string } } when the date changes */
+    onChange?: (event: CustomEvent<ChangeDetail>) => void;
+}
+export declare const FlintDatePicker: React.ForwardRefExoticComponent<FlintDatePickerProps & React.RefAttributes<FlintDatePickerElement>>;