@getufy/flint-ui-react 0.2.1 → 0.3.0

package/README.md

@@ -3,35 +3,179 @@
 [![npm](https://img.shields.io/npm/v/@getufy/flint-ui-react)](https://www.npmjs.com/package/@getufy/flint-ui-react)
 [![license](https://img.shields.io/npm/l/@getufy/flint-ui-react)](https://github.com/getufy/flint-ui/blob/main/LICENSE)
 
-React wrappers for [`@getufy/flint-ui`](https://www.npmjs.com/package/@getufy/flint-ui) web components, built with [`@lit/react`](https://www.npmjs.com/package/@lit/react).
+React wrappers for [`@getufy/flint-ui`](https://www.npmjs.com/package/@getufy/flint-ui) web components, auto-generated with [`@lit/react`](https://lit.dev/docs/frameworks/react/).
 
 ## Installation
 
 ```bash
-npm install @getufy/flint-ui-react @getufy/flint-ui lit react
+npm install @getufy/flint-ui @getufy/flint-ui-react
 ```
 
-## Usage
+Peer dependencies: `react ^18 || ^19`, `@getufy/flint-ui ^0.2.2`
 
-```jsx
-import { FlintButton, FlintTabs, FlintDialog } from '@getufy/flint-ui-react';
+## Setup
 
-function App() {
+Import the theme once in your app entry point:
+
+```ts
+import '@getufy/flint-ui/theme.css';
+```
+
+## Resources
+
+- **[Full documentation](https://getufy.github.io/flint-ui/)** — component docs, guides, and examples
+- **[React guide](https://getufy.github.io/flint-ui/react)** — React-specific usage and patterns
+- **[Live Storybook](https://getufy.github.io/flint-ui/storybook/)** — interactive component playground
+
+## Subpath imports — use these for tree-shaking
+
+**Always import from subpaths, not the barrel.** Each component is its own entry point; your bundler only includes the components you actually import.
+
+```tsx
+// Load only what you need
+import { FlintButton } from '@getufy/flint-ui-react/button';
+import { FlintSelect, FlintOption } from '@getufy/flint-ui-react/select';
+import { FlintTabs, FlintTab, FlintTabPanel } from '@getufy/flint-ui-react/tabs';
+```
+
+### Why subpath imports matter
+
+Lit's `@customElement()` decorator is a **side effect** — it registers the custom element globally as soon as the module is evaluated. The barrel import (`@getufy/flint-ui-react`) causes all 60+ components to register, even ones you never render.
+
+```tsx
+// Registers ALL 60+ components (~897 KB uncompressed)
+import { FlintButton } from '@getufy/flint-ui-react';
+
+// Registers only the button component
+import { FlintButton } from '@getufy/flint-ui-react/button';
+```
+
+### Available subpaths
+
+| Subpath | Exports include |
+|---|---|
+| `@getufy/flint-ui-react/accordion` | `FlintAccordion`, `FlintAccordionItem` |
+| `@getufy/flint-ui-react/alert` | `FlintAlert` |
+| `@getufy/flint-ui-react/app-bar` | `FlintAppBar` |
+| `@getufy/flint-ui-react/autocomplete` | `FlintAutocomplete` |
+| `@getufy/flint-ui-react/avatar` | `FlintAvatar` |
+| `@getufy/flint-ui-react/backdrop` | `FlintBackdrop` |
+| `@getufy/flint-ui-react/badge` | `FlintBadge` |
+| `@getufy/flint-ui-react/bottom-navigation` | `FlintBottomNavigation`, `FlintBottomNavigationItem` |
+| `@getufy/flint-ui-react/box` | `FlintBox` |
+| `@getufy/flint-ui-react/breadcrumbs` | `FlintBreadcrumbs`, `FlintBreadcrumbItem` |
+| `@getufy/flint-ui-react/button` | `FlintButton` |
+| `@getufy/flint-ui-react/card` | `FlintCard` |
+| `@getufy/flint-ui-react/carousel` | `FlintCarousel`, `FlintCarouselItem` |
+| `@getufy/flint-ui-react/checkbox` | `FlintCheckbox` |
+| `@getufy/flint-ui-react/chip` | `FlintChip` |
+| `@getufy/flint-ui-react/collapsible` | `FlintCollapsible`, `FlintCollapsibleTrigger`, `FlintCollapsibleContent` |
+| `@getufy/flint-ui-react/command` | `FlintCommand`, `FlintCommandInput`, `FlintCommandList`, `FlintCommandItem` |
+| `@getufy/flint-ui-react/container` | `FlintContainer` |
+| `@getufy/flint-ui-react/copy-button` | `FlintCopyButton` |
+| `@getufy/flint-ui-react/date-field` | `FlintDateField` |
+| `@getufy/flint-ui-react/date-picker` | `FlintDatePicker` |
+| `@getufy/flint-ui-react/date-range-picker` | `FlintDateRangePicker` |
+| `@getufy/flint-ui-react/dialog` | `FlintDialog` |
+| `@getufy/flint-ui-react/divider` | `FlintDivider` |
+| `@getufy/flint-ui-react/drawer` | `FlintDrawer` |
+| `@getufy/flint-ui-react/empty` | `FlintEmpty` |
+| `@getufy/flint-ui-react/fab` | `FlintFab` |
+| `@getufy/flint-ui-react/format-date` | `FlintFormatDate` |
+| `@getufy/flint-ui-react/format-number` | `FlintFormatNumber` |
+| `@getufy/flint-ui-react/grid` | `FlintGrid`, `FlintGridItem` |
+| `@getufy/flint-ui-react/hover-card` | `FlintHoverCard`, `FlintHoverCardTrigger`, `FlintHoverCardContent` |
+| `@getufy/flint-ui-react/image-comparer` | `FlintImageComparer` |
+| `@getufy/flint-ui-react/image-list` | `FlintImageList`, `FlintImageListItem` |
+| `@getufy/flint-ui-react/input` | `FlintInput` |
+| `@getufy/flint-ui-react/input-otp` | `FlintInputOtp`, `FlintInputOtpGroup`, `FlintInputOtpSlot` |
+| `@getufy/flint-ui-react/item` | `FlintItem` |
+| `@getufy/flint-ui-react/kbd` | `FlintKbd` |
+| `@getufy/flint-ui-react/link` | `FlintLink` |
+| `@getufy/flint-ui-react/list` | `FlintList`, `FlintListItem` |
+| `@getufy/flint-ui-react/menu` | `FlintMenu`, `FlintMenuItem` |
+| `@getufy/flint-ui-react/menubar` | `FlintMenubar`, `FlintMenubarItem` |
+| `@getufy/flint-ui-react/navigation-menu` | `FlintNavigationMenu`, `FlintNavigationMenuItem` |
+| `@getufy/flint-ui-react/pagination` | `FlintPagination` |
+| `@getufy/flint-ui-react/paper` | `FlintPaper` |
+| `@getufy/flint-ui-react/progress` | `FlintProgress` |
+| `@getufy/flint-ui-react/radio` | `FlintRadio`, `FlintRadioGroup` |
+| `@getufy/flint-ui-react/rating` | `FlintRating` |
+| `@getufy/flint-ui-react/relative-time` | `FlintRelativeTime` |
+| `@getufy/flint-ui-react/resizable` | `FlintResizable`, `FlintResizablePanel`, `FlintResizableHandle` |
+| `@getufy/flint-ui-react/scroll-area` | `FlintScrollArea` |
+| `@getufy/flint-ui-react/select` | `FlintSelect`, `FlintOption` |
+| `@getufy/flint-ui-react/skeleton` | `FlintSkeleton` |
+| `@getufy/flint-ui-react/slider` | `FlintSlider` |
+| `@getufy/flint-ui-react/snackbar` | `FlintSnackbar` |
+| `@getufy/flint-ui-react/sonner` | `FlintSonner` |
+| `@getufy/flint-ui-react/speed-dial` | `FlintSpeedDial`, `FlintSpeedDialAction` |
+| `@getufy/flint-ui-react/split-panel` | `FlintSplitPanel` |
+| `@getufy/flint-ui-react/stack` | `FlintStack` |
+| `@getufy/flint-ui-react/stepper` | `FlintStepper`, `FlintStepperItem` |
+| `@getufy/flint-ui-react/switch` | `FlintSwitch` |
+| `@getufy/flint-ui-react/table` | `FlintTable`, `FlintTableRow`, `FlintTableCell` |
+| `@getufy/flint-ui-react/tabs` | `FlintTabs`, `FlintTab`, `FlintTabPanel` |
+| `@getufy/flint-ui-react/text-field` | `FlintTextField` |
+| `@getufy/flint-ui-react/textarea` | `FlintTextarea` |
+| `@getufy/flint-ui-react/time-picker` | `FlintTimePicker` |
+| `@getufy/flint-ui-react/toggle` | `FlintToggle`, `FlintToggleGroup` |
+| `@getufy/flint-ui-react/tooltip` | `FlintTooltip` |
+| `@getufy/flint-ui-react/transfer-list` | `FlintTransferList` |
+| `@getufy/flint-ui-react/tree-view` | `FlintTreeView`, `FlintTreeItem` |
+| `@getufy/flint-ui-react/typography` | `FlintTypography` |
+| `@getufy/flint-ui-react/visually-hidden` | `FlintVisuallyHidden` |
+
+For exact named exports in any subpath, check the TypeScript declarations in `node_modules/@getufy/flint-ui-react/dist/<name>.d.ts`.
+
+## Basic usage
+
+```tsx
+// main.tsx
+import '@getufy/flint-ui/theme.css';
+import '@getufy/flint-ui/suppress-warnings'; // optional — see below
+
+// MyComponent.tsx
+import { FlintButton } from '@getufy/flint-ui-react/button';
+
+export function MyComponent() {
   return (
-    <FlintButton variant="contained" color="primary" onClick={() => console.log('clicked')}>
+    <FlintButton variant="filled" onFlintClick={() => console.log('clicked')}>
       Click me
     </FlintButton>
   );
 }
 ```
 
-All components from `@getufy/flint-ui` are available as React components with proper event handling and type definitions.
+### Events
+
+Custom events map to camelCase `on*` props:
 
-## Peer Dependencies
+| Lit event | React prop |
+|---|---|
+| `flint-change` | `onFlintChange` |
+| `flint-click` | `onFlintClick` |
+| `flint-menu-close` | `onFlintMenuClose` |
+| `close` | `onClose` |
 
-- `react` ^18.0.0 || ^19.0.0
-- `@getufy/flint-ui` ^0.1.0
-- `lit` ^3.0.0
+```tsx
+<FlintSelect
+  label="Fruit"
+  onFlintChange={(e) => console.log(e.detail.value)}
+/>
+```
+
+## Suppressing the Lit dev mode warning
+
+In development, Lit prints a console warning about running in dev mode. To silence it, add this import **before any component imports** in your app entry point:
+
+```ts
+// main.tsx — must be first
+import '@getufy/flint-ui/suppress-warnings';
+import '@getufy/flint-ui/theme.css';
+
+// component imports after...
+```
 
 ## License
 

package/dist/accordion.d.ts

@@ -0,0 +1,6 @@
+export { FlintAccordion, type FlintAccordionProps } from './components/FlintAccordion.js';
+export { FlintAccordionSummary, type FlintAccordionSummaryProps } from './components/FlintAccordionSummary.js';
+export { FlintAccordionDetails, type FlintAccordionDetailsProps } from './components/FlintAccordionDetails.js';
+export { FlintAccordionActions, type FlintAccordionActionsProps } from './components/FlintAccordionActions.js';
+export { FlintAccordionEvents } from './events/flint-accordion.js';
+export { FlintAccordionSummaryEvents } from './events/flint-accordion-summary.js';

package/dist/accordion.js

@@ -0,0 +1,63 @@
+// src/components/FlintAccordion.tsx
+import React from "react";
+import { createComponent } from "@lit/react";
+import { FlintAccordion as FlintAccordionElement } from "@getufy/flint-ui/accordion/flint-accordion";
+var FlintAccordion = createComponent({
+  tagName: "flint-accordion",
+  elementClass: FlintAccordionElement,
+  react: React,
+  events: {
+    onFlintAccordionChange: "flint-accordion-change"
+  }
+});
+
+// src/components/FlintAccordionSummary.tsx
+import React2 from "react";
+import { createComponent as createComponent2 } from "@lit/react";
+import { FlintAccordionSummary as FlintAccordionSummaryElement } from "@getufy/flint-ui/accordion/flint-accordion";
+var FlintAccordionSummary = createComponent2({
+  tagName: "flint-accordion-summary",
+  elementClass: FlintAccordionSummaryElement,
+  react: React2,
+  events: {
+    onFlintAccordionToggle: "flint-accordion-toggle"
+  }
+});
+
+// src/components/FlintAccordionDetails.tsx
+import React3 from "react";
+import { createComponent as createComponent3 } from "@lit/react";
+import { FlintAccordionDetails as FlintAccordionDetailsElement } from "@getufy/flint-ui/accordion/flint-accordion";
+var FlintAccordionDetails = createComponent3({
+  tagName: "flint-accordion-details",
+  elementClass: FlintAccordionDetailsElement,
+  react: React3
+});
+
+// src/components/FlintAccordionActions.tsx
+import React4 from "react";
+import { createComponent as createComponent4 } from "@lit/react";
+import { FlintAccordionActions as FlintAccordionActionsElement } from "@getufy/flint-ui/accordion/flint-accordion";
+var FlintAccordionActions = createComponent4({
+  tagName: "flint-accordion-actions",
+  elementClass: FlintAccordionActionsElement,
+  react: React4
+});
+
+// src/events/flint-accordion.ts
+var FlintAccordionEvents = {
+  CHANGE: "flint-accordion-change"
+};
+
+// src/events/flint-accordion-summary.ts
+var FlintAccordionSummaryEvents = {
+  ACCORDION_TOGGLE: "flint-accordion-toggle"
+};
+export {
+  FlintAccordion,
+  FlintAccordionActions,
+  FlintAccordionDetails,
+  FlintAccordionEvents,
+  FlintAccordionSummary,
+  FlintAccordionSummaryEvents
+};

package/dist/alert.d.ts

@@ -0,0 +1,2 @@
+export { FlintAlert, type FlintAlertProps } from './components/FlintAlert.js';
+export { FlintAlertEvents } from './events/flint-alert.js';

package/dist/alert.js

@@ -0,0 +1,21 @@
+// src/components/FlintAlert.tsx
+import React from "react";
+import { createComponent } from "@lit/react";
+import { FlintAlert as FlintAlertElement } from "@getufy/flint-ui/alert/flint-alert";
+var FlintAlert = createComponent({
+  tagName: "flint-alert",
+  elementClass: FlintAlertElement,
+  react: React,
+  events: {
+    onFlintAlertClose: "flint-alert-close"
+  }
+});
+
+// src/events/flint-alert.ts
+var FlintAlertEvents = {
+  CLOSE: "flint-alert-close"
+};
+export {
+  FlintAlert,
+  FlintAlertEvents
+};

package/dist/app-bar.d.ts

@@ -0,0 +1 @@
+export { FlintAppBar, type FlintAppBarProps } from './components/FlintAppBar.js';

package/dist/app-bar.js

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

package/dist/autocomplete.d.ts

@@ -0,0 +1,2 @@
+export { FlintAutocomplete, type FlintAutocompleteProps } from './components/FlintAutocomplete.js';
+export { FlintAutocompleteEvents } from './events/flint-autocomplete.js';

package/dist/autocomplete.js

@@ -0,0 +1,21 @@
+// src/components/FlintAutocomplete.tsx
+import React from "react";
+import { createComponent } from "@lit/react";
+import { FlintAutocomplete as FlintAutocompleteElement } from "@getufy/flint-ui/autocomplete/flint-autocomplete";
+var FlintAutocomplete = createComponent({
+  tagName: "flint-autocomplete",
+  elementClass: FlintAutocompleteElement,
+  react: React,
+  events: {
+    onFlintAutocompleteChange: "flint-autocomplete-change"
+  }
+});
+
+// src/events/flint-autocomplete.ts
+var FlintAutocompleteEvents = {
+  CHANGE: "flint-autocomplete-change"
+};
+export {
+  FlintAutocomplete,
+  FlintAutocompleteEvents
+};

package/dist/avatar.d.ts

@@ -0,0 +1 @@
+export { FlintAvatar, type FlintAvatarProps } from './components/FlintAvatar.js';

package/dist/avatar.js

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

package/dist/backdrop.d.ts

@@ -0,0 +1,2 @@
+export { FlintBackdrop, type FlintBackdropProps } from './components/FlintBackdrop.js';
+export { FlintBackdropEvents } from './events/flint-backdrop.js';

package/dist/backdrop.js

@@ -0,0 +1,21 @@
+// 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"
+  }
+});
+
+// src/events/flint-backdrop.ts
+var FlintBackdropEvents = {
+  CLOSE: "flint-backdrop-close"
+};
+export {
+  FlintBackdrop,
+  FlintBackdropEvents
+};

package/dist/badge.d.ts

@@ -0,0 +1 @@
+export { FlintBadge, type FlintBadgeProps } from './components/FlintBadge.js';

package/dist/badge.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/bottom-navigation.d.ts

@@ -0,0 +1,3 @@
+export { FlintBottomNavigationAction, type FlintBottomNavigationActionProps } from './components/FlintBottomNavigationAction.js';
+export { FlintBottomNavigation, type FlintBottomNavigationProps } from './components/FlintBottomNavigation.js';
+export { FlintBottomNavigationEvents } from './events/flint-bottom-navigation.js';

package/dist/bottom-navigation.js

@@ -0,0 +1,32 @@
+// 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
+});
+
+// src/components/FlintBottomNavigation.tsx
+import React2 from "react";
+import { createComponent as createComponent2 } from "@lit/react";
+import { FlintBottomNavigation as FlintBottomNavigationElement } from "@getufy/flint-ui/bottom-navigation/flint-bottom-navigation";
+var FlintBottomNavigation = createComponent2({
+  tagName: "flint-bottom-navigation",
+  elementClass: FlintBottomNavigationElement,
+  react: React2,
+  events: {
+    onFlintBottomNavigationChange: "flint-bottom-navigation-change"
+  }
+});
+
+// src/events/flint-bottom-navigation.ts
+var FlintBottomNavigationEvents = {
+  CHANGE: "flint-bottom-navigation-change"
+};
+export {
+  FlintBottomNavigation,
+  FlintBottomNavigationAction,
+  FlintBottomNavigationEvents
+};

package/dist/box.d.ts

@@ -0,0 +1,2 @@
+export { FlintBox, type FlintBoxProps } from './components/FlintBox.js';
+export { FlintBoxEvents } from './events/flint-box.js';

package/dist/box.js

@@ -0,0 +1,21 @@
+// 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"
+  }
+});
+
+// src/events/flint-box.ts
+var FlintBoxEvents = {
+  WARNING: "flint-box-warning"
+};
+export {
+  FlintBox,
+  FlintBoxEvents
+};

package/dist/breadcrumbs.d.ts

@@ -0,0 +1 @@
+export { FlintBreadcrumbs, type FlintBreadcrumbsProps } from './components/FlintBreadcrumbs.js';

package/dist/breadcrumbs.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/button.d.ts

@@ -0,0 +1,6 @@
+export { FlintButtonGroup, type FlintButtonGroupProps } from './components/FlintButtonGroup.js';
+export { FlintButton, type FlintButtonProps } from './components/FlintButton.js';
+export { FlintToggleButtonGroup, type FlintToggleButtonGroupProps } from './components/FlintToggleButtonGroup.js';
+export { FlintToggleButton, type FlintToggleButtonProps } from './components/FlintToggleButton.js';
+export { FlintToggleButtonGroupEvents } from './events/flint-toggle-button-group.js';
+export { FlintToggleButtonEvents } from './events/flint-toggle-button.js';

package/dist/button.js

@@ -0,0 +1,63 @@
+// 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
+});
+
+// src/components/FlintButton.tsx
+import React2 from "react";
+import { createComponent as createComponent2 } from "@lit/react";
+import { FlintButton as FlintButtonElement } from "@getufy/flint-ui/button/flint-button";
+var FlintButton = createComponent2({
+  tagName: "flint-button",
+  elementClass: FlintButtonElement,
+  react: React2
+});
+
+// src/components/FlintToggleButtonGroup.tsx
+import React3 from "react";
+import { createComponent as createComponent3 } from "@lit/react";
+import { FlintToggleButtonGroup as FlintToggleButtonGroupElement } from "@getufy/flint-ui/button/flint-toggle-button-group";
+var FlintToggleButtonGroup = createComponent3({
+  tagName: "flint-toggle-button-group",
+  elementClass: FlintToggleButtonGroupElement,
+  react: React3,
+  events: {
+    onFlintToggleButtonGroupChange: "flint-toggle-button-group-change"
+  }
+});
+
+// src/components/FlintToggleButton.tsx
+import React4 from "react";
+import { createComponent as createComponent4 } from "@lit/react";
+import { FlintToggleButton as FlintToggleButtonElement } from "@getufy/flint-ui/button/flint-toggle-button";
+var FlintToggleButton = createComponent4({
+  tagName: "flint-toggle-button",
+  elementClass: FlintToggleButtonElement,
+  react: React4,
+  events: {
+    onFlintToggleButtonChange: "flint-toggle-button-change"
+  }
+});
+
+// src/events/flint-toggle-button-group.ts
+var FlintToggleButtonGroupEvents = {
+  CHANGE: "flint-toggle-button-group-change"
+};
+
+// src/events/flint-toggle-button.ts
+var FlintToggleButtonEvents = {
+  CHANGE: "flint-toggle-button-change"
+};
+export {
+  FlintButton,
+  FlintButtonGroup,
+  FlintToggleButton,
+  FlintToggleButtonEvents,
+  FlintToggleButtonGroup,
+  FlintToggleButtonGroupEvents
+};

package/dist/card.d.ts

@@ -0,0 +1,6 @@
+export { FlintCardActionArea, type FlintCardActionAreaProps } from './components/FlintCardActionArea.js';
+export { FlintCardActions, type FlintCardActionsProps } from './components/FlintCardActions.js';
+export { FlintCardContent, type FlintCardContentProps } from './components/FlintCardContent.js';
+export { FlintCardHeader, type FlintCardHeaderProps } from './components/FlintCardHeader.js';
+export { FlintCardMedia, type FlintCardMediaProps } from './components/FlintCardMedia.js';
+export { FlintCard, type FlintCardProps } from './components/FlintCard.js';

package/dist/card.js

@@ -0,0 +1,67 @@
+// 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
+});
+
+// src/components/FlintCardActions.tsx
+import React2 from "react";
+import { createComponent as createComponent2 } from "@lit/react";
+import { FlintCardActions as FlintCardActionsElement } from "@getufy/flint-ui/card/flint-card-actions";
+var FlintCardActions = createComponent2({
+  tagName: "flint-card-actions",
+  elementClass: FlintCardActionsElement,
+  react: React2
+});
+
+// src/components/FlintCardContent.tsx
+import React3 from "react";
+import { createComponent as createComponent3 } from "@lit/react";
+import { FlintCardContent as FlintCardContentElement } from "@getufy/flint-ui/card/flint-card-content";
+var FlintCardContent = createComponent3({
+  tagName: "flint-card-content",
+  elementClass: FlintCardContentElement,
+  react: React3
+});
+
+// src/components/FlintCardHeader.tsx
+import React4 from "react";
+import { createComponent as createComponent4 } from "@lit/react";
+import { FlintCardHeader as FlintCardHeaderElement } from "@getufy/flint-ui/card/flint-card-header";
+var FlintCardHeader = createComponent4({
+  tagName: "flint-card-header",
+  elementClass: FlintCardHeaderElement,
+  react: React4
+});
+
+// src/components/FlintCardMedia.tsx
+import React5 from "react";
+import { createComponent as createComponent5 } from "@lit/react";
+import { FlintCardMedia as FlintCardMediaElement } from "@getufy/flint-ui/card/flint-card-media";
+var FlintCardMedia = createComponent5({
+  tagName: "flint-card-media",
+  elementClass: FlintCardMediaElement,
+  react: React5
+});
+
+// src/components/FlintCard.tsx
+import React6 from "react";
+import { createComponent as createComponent6 } from "@lit/react";
+import { FlintCard as FlintCardElement } from "@getufy/flint-ui/card/flint-card";
+var FlintCard = createComponent6({
+  tagName: "flint-card",
+  elementClass: FlintCardElement,
+  react: React6
+});
+export {
+  FlintCard,
+  FlintCardActionArea,
+  FlintCardActions,
+  FlintCardContent,
+  FlintCardHeader,
+  FlintCardMedia
+};

package/dist/carousel.d.ts

@@ -0,0 +1,6 @@
+export { FlintCarouselContent, type FlintCarouselContentProps } from './components/FlintCarouselContent.js';
+export { FlintCarouselItem, type FlintCarouselItemProps } from './components/FlintCarouselItem.js';
+export { FlintCarouselPrevious, type FlintCarouselPreviousProps } from './components/FlintCarouselPrevious.js';
+export { FlintCarouselNext, type FlintCarouselNextProps } from './components/FlintCarouselNext.js';
+export { FlintCarousel, type FlintCarouselProps } from './components/FlintCarousel.js';
+export { FlintCarouselEvents } from './events/flint-carousel.js';