@getufy/flint-ui-react 0.2.2 → 0.4.0

package/dist/components/FlintBackdrop.js

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

package/dist/components/FlintBadge.d.ts

@@ -1,4 +1,20 @@
 import React from 'react';
 import { FlintBadge as FlintBadgeElement } from '@getufy/flint-ui/badge/flint-badge';
-export declare const FlintBadge: import("@lit/react").ReactWebComponent<FlintBadgeElement, {}>;
-export type FlintBadgeProps = React.ComponentProps<typeof FlintBadge>;
+/**
+ * A badge component that generates a small badge at the top-right of its children.
+ *
+ * @slot - The content to which the badge is attached.
+ */
+export interface FlintBadgeProps extends React.HTMLAttributes<FlintBadgeElement> {
+    /** Text content displayed inside the badge. */
+    content?: string;
+    /** Whether to display a small dot instead of content. */
+    dot?: boolean;
+    /** Whether the badge is hidden. */
+    invisible?: boolean;
+    /** Color variant of the badge. */
+    variant?: 'primary' | 'secondary' | 'error' | 'success' | 'warning';
+    /** Maximum numeric value before displaying "max+". */
+    max?: number;
+}
+export declare const FlintBadge: React.ForwardRefExoticComponent<FlintBadgeProps & React.RefAttributes<FlintBadgeElement>>;

package/dist/components/FlintBadge.js

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

package/dist/components/FlintBottomNavigation.d.ts

@@ -1,7 +1,18 @@
 import React from 'react';
-import { type EventName } from '@lit/react';
 import { FlintBottomNavigation as FlintBottomNavigationElement } from '@getufy/flint-ui/bottom-navigation/flint-bottom-navigation';
-export declare const FlintBottomNavigation: import("@lit/react").ReactWebComponent<FlintBottomNavigationElement, {
-    onFlintBottomNavigationChange: EventName<CustomEvent>;
-}>;
-export type FlintBottomNavigationProps = React.ComponentProps<typeof FlintBottomNavigation>;
+/**
+ * Bottom Navigation bars allow movement between primary destinations in an app.
+ *
+ * @slot - destinations (flint-bottom-navigation-action).
+ */
+export interface FlintBottomNavigationProps extends Omit<React.HTMLAttributes<FlintBottomNavigationElement>, 'defaultValue'> {
+    /** The value of the currently selected action. */
+    value?: unknown;
+    /** Initial selected value for uncontrolled usage. */
+    defaultValue?: unknown;
+    /** If true, all labels are shown at all times. */
+    showLabels?: boolean;
+    /** Dispatched when the selected value changes. detail: `{ value: number | string }` */
+    onFlintBottomNavigationChange?: (event: CustomEvent) => void;
+}
+export declare const FlintBottomNavigation: React.ForwardRefExoticComponent<FlintBottomNavigationProps & React.RefAttributes<FlintBottomNavigationElement>>;

package/dist/components/FlintBottomNavigation.js

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

package/dist/components/FlintBottomNavigationAction.d.ts

@@ -1,4 +1,19 @@
 import React from 'react';
 import { FlintBottomNavigationAction as FlintBottomNavigationActionElement } from '@getufy/flint-ui/bottom-navigation/flint-bottom-navigation-action';
-export declare const FlintBottomNavigationAction: import("@lit/react").ReactWebComponent<FlintBottomNavigationActionElement, {}>;
-export type FlintBottomNavigationActionProps = React.ComponentProps<typeof FlintBottomNavigationAction>;
+/**
+ * Bottom Navigation Action: Individual navigation item.
+ *
+ * @slot icon - Icon element.
+ * @slot - Label text.
+ */
+export interface FlintBottomNavigationActionProps extends React.HTMLAttributes<FlintBottomNavigationActionElement> {
+    /** Label text for the action. */
+    label?: string;
+    /** Unique value for this action. */
+    value?: unknown;
+    /** If true, this action is currently selected. (Internal property managed by parent) */
+    active?: boolean;
+    /** Controls label visibility. (Internal property managed by parent) */
+    showLabel?: boolean;
+}
+export declare const FlintBottomNavigationAction: React.ForwardRefExoticComponent<FlintBottomNavigationActionProps & React.RefAttributes<FlintBottomNavigationActionElement>>;

package/dist/components/FlintBottomNavigationAction.js

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

package/dist/components/FlintBox.d.ts

@@ -1,7 +1,69 @@
 import React from 'react';
-import { type EventName } from '@lit/react';
 import { FlintBox as FlintBoxElement } from '@getufy/flint-ui/box/flint-box';
-export declare const FlintBox: import("@lit/react").ReactWebComponent<FlintBoxElement, {
-    onFlintBoxWarning: EventName<CustomEvent>;
-}>;
-export type FlintBoxProps = React.ComponentProps<typeof FlintBox>;
+export interface FlintBoxProps extends Omit<React.HTMLAttributes<FlintBoxElement>, 'color'> {
+    /** The component tag to render */
+    component?: string;
+    /** Margin on all sides. */
+    m?: string;
+    /** Margin top. */
+    mt?: string;
+    /** Margin right. */
+    mr?: string;
+    /** Margin bottom. */
+    mb?: string;
+    /** Margin left. */
+    ml?: string;
+    /** Margin on the horizontal (left and right) axis. */
+    mx?: string;
+    /** Margin on the vertical (top and bottom) axis. */
+    my?: string;
+    /** Padding on all sides. */
+    p?: string;
+    /** Padding top. */
+    pt?: string;
+    /** Padding right. */
+    pr?: string;
+    /** Padding bottom. */
+    pb?: string;
+    /** Padding left. */
+    pl?: string;
+    /** Padding on the horizontal (left and right) axis. */
+    px?: string;
+    /** Padding on the vertical (top and bottom) axis. */
+    py?: string;
+    /** CSS display value. */
+    display?: string;
+    /** CSS flex-direction value. */
+    flexDirection?: string;
+    /** CSS align-items value. */
+    alignItems?: string;
+    /** CSS justify-content value. */
+    justifyContent?: string;
+    /** CSS flex-wrap value. */
+    flexWrap?: string;
+    /** CSS flex-basis value. */
+    flexBasis?: string;
+    /** CSS flex-grow value. */
+    flexGrow?: string;
+    /** CSS flex-shrink value. */
+    flexShrink?: string;
+    /** CSS gap between flex or grid items. */
+    gap?: string;
+    /** Background color. Supports theme tokens 'primary' and 'secondary'. */
+    bgcolor?: string;
+    /** Text color. Supports theme tokens 'primary' and 'secondary'. */
+    color?: string;
+    /** CSS border shorthand value. */
+    border?: string;
+    /** CSS border-radius value. */
+    borderRadius?: string;
+    /** CSS box-shadow value. */
+    boxShadow?: string;
+    /** CSS width value. */
+    width?: string;
+    /** CSS height value. */
+    height?: string;
+    /** Dispatched when an unknown component tag is used and falls back to div. */
+    onFlintBoxWarning?: (event: CustomEvent) => void;
+}
+export declare const FlintBox: React.ForwardRefExoticComponent<FlintBoxProps & React.RefAttributes<FlintBoxElement>>;

package/dist/components/FlintBox.js

@@ -0,0 +1,15 @@
+// src/components/FlintBox.tsx
+import React from "react";
+import { createComponent } from "@lit/react";
+import { FlintBox as FlintBoxElement } from "@getufy/flint-ui/box/flint-box";
+var FlintBox = createComponent({
+  tagName: "flint-box",
+  elementClass: FlintBoxElement,
+  react: React,
+  events: {
+    onFlintBoxWarning: "flint-box-warning"
+  }
+});
+export {
+  FlintBox
+};

package/dist/components/FlintBreadcrumbs.d.ts

@@ -1,4 +1,20 @@
 import React from 'react';
 import { FlintBreadcrumbs as FlintBreadcrumbsElement } from '@getufy/flint-ui/breadcrumbs/flint-breadcrumbs';
-export declare const FlintBreadcrumbs: import("@lit/react").ReactWebComponent<FlintBreadcrumbsElement, {}>;
-export type FlintBreadcrumbsProps = React.ComponentProps<typeof FlintBreadcrumbs>;
+/**
+ * Breadcrumbs provide a navigational aid showing the current page's location
+within a site hierarchy, allowing users to navigate back up the trail.
+ *
+ * @slot - Breadcrumb items (links or text), distributed in order.
+ * @slot separator - Custom separator element rendered between each item.
+ */
+export interface FlintBreadcrumbsProps extends React.HTMLAttributes<FlintBreadcrumbsElement> {
+    /** Max number of items to display before collapsing. */
+    maxItems?: number;
+    /** Number of items to show before the ellipsis. */
+    itemsBefore?: number;
+    /** Number of items to show after the ellipsis. */
+    itemsAfter?: number;
+    /** The character or string used as a separator (fallback when no separator slot is provided). */
+    separator?: string;
+}
+export declare const FlintBreadcrumbs: React.ForwardRefExoticComponent<FlintBreadcrumbsProps & React.RefAttributes<FlintBreadcrumbsElement>>;

package/dist/components/FlintBreadcrumbs.js

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

package/dist/components/FlintButton.d.ts

@@ -1,4 +1,13 @@
 import React from 'react';
 import { FlintButton as FlintButtonElement } from '@getufy/flint-ui/button/flint-button';
-export declare const FlintButton: import("@lit/react").ReactWebComponent<FlintButtonElement, {}>;
-export type FlintButtonProps = React.ComponentProps<typeof FlintButton>;
+export interface FlintButtonProps extends React.HTMLAttributes<FlintButtonElement> {
+    /** Visual style variant of the button. */
+    variant?: 'primary' | 'secondary' | 'destructive';
+    /** Size of the button. */
+    size?: 'small' | 'medium' | 'large';
+    /** Disables the button and prevents interaction. */
+    disabled?: boolean;
+    /** Whether the button stretches to fill its container width. */
+    fullWidth?: boolean;
+}
+export declare const FlintButton: React.ForwardRefExoticComponent<FlintButtonProps & React.RefAttributes<FlintButtonElement>>;

package/dist/components/FlintButton.js

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

package/dist/components/FlintButtonGroup.d.ts

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

package/dist/components/FlintButtonGroup.js

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

package/dist/components/FlintCard.d.ts

@@ -1,4 +1,7 @@
 import React from 'react';
 import { FlintCard as FlintCardElement } from '@getufy/flint-ui/card/flint-card';
-export declare const FlintCard: import("@lit/react").ReactWebComponent<FlintCardElement, {}>;
-export type FlintCardProps = React.ComponentProps<typeof FlintCard>;
+export interface FlintCardProps extends React.HTMLAttributes<FlintCardElement> {
+    variant?: 'elevated' | 'outlined' | 'flat';
+    interactive?: boolean;
+}
+export declare const FlintCard: React.ForwardRefExoticComponent<FlintCardProps & React.RefAttributes<FlintCardElement>>;

package/dist/components/FlintCard.js

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

package/dist/components/FlintCardActionArea.d.ts

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

package/dist/components/FlintCardActionArea.js

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

package/dist/components/FlintCardActions.d.ts

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

package/dist/components/FlintCardActions.js

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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