@getufy/flint-ui-react 0.2.2 → 0.4.0

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

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

package/dist/components/FlintChip.d.ts

@@ -1,8 +1,32 @@
 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>, '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;
+    /** Fired when a clickable chip is clicked. */
+    onFlintChipClick?: (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/FlintChip.js

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,15 @@
+// src/components/FlintCommand.tsx
+import React from "react";
+import { createComponent } from "@lit/react";
+import { FlintCommand as FlintCommandElement } from "@getufy/flint-ui/command/flint-command";
+var FlintCommand = createComponent({
+  tagName: "flint-command",
+  elementClass: FlintCommandElement,
+  react: React,
+  events: {
+    onFlintCommandItemSelect: "flint-command-item-select"
+  }
+});
+export {
+  FlintCommand
+};

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

@@ -0,0 +1,15 @@
+// src/components/FlintCommandDialog.tsx
+import React from "react";
+import { createComponent } from "@lit/react";
+import { FlintCommandDialog as FlintCommandDialogElement } from "@getufy/flint-ui/command/flint-command";
+var FlintCommandDialog = createComponent({
+  tagName: "flint-command-dialog",
+  elementClass: FlintCommandDialogElement,
+  react: React,
+  events: {
+    onFlintCommandDialogClose: "flint-command-dialog-close"
+  }
+});
+export {
+  FlintCommandDialog
+};

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

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

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

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

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

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

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

@@ -0,0 +1,15 @@
+// src/components/FlintCommandItem.tsx
+import React from "react";
+import { createComponent } from "@lit/react";
+import { FlintCommandItem as FlintCommandItemElement } from "@getufy/flint-ui/command/flint-command";
+var FlintCommandItem = createComponent({
+  tagName: "flint-command-item",
+  elementClass: FlintCommandItemElement,
+  react: React,
+  events: {
+    onFlintCommandItemSelect: "flint-command-item-select"
+  }
+});
+export {
+  FlintCommandItem
+};

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

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

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

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

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

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

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

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

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