@getufy/flint-ui-react 0.2.1 → 0.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (146) hide show
  1. package/README.md +57 -8
  2. package/dist/accordion.d.ts +6 -0
  3. package/dist/accordion.js +63 -0
  4. package/dist/alert.d.ts +2 -0
  5. package/dist/alert.js +21 -0
  6. package/dist/app-bar.d.ts +1 -0
  7. package/dist/app-bar.js +12 -0
  8. package/dist/autocomplete.d.ts +2 -0
  9. package/dist/autocomplete.js +21 -0
  10. package/dist/avatar.d.ts +1 -0
  11. package/dist/avatar.js +12 -0
  12. package/dist/backdrop.d.ts +2 -0
  13. package/dist/backdrop.js +21 -0
  14. package/dist/badge.d.ts +1 -0
  15. package/dist/badge.js +12 -0
  16. package/dist/bottom-navigation.d.ts +3 -0
  17. package/dist/bottom-navigation.js +32 -0
  18. package/dist/box.d.ts +2 -0
  19. package/dist/box.js +21 -0
  20. package/dist/breadcrumbs.d.ts +1 -0
  21. package/dist/breadcrumbs.js +12 -0
  22. package/dist/button.d.ts +6 -0
  23. package/dist/button.js +63 -0
  24. package/dist/card.d.ts +6 -0
  25. package/dist/card.js +67 -0
  26. package/dist/carousel.d.ts +6 -0
  27. package/dist/carousel.js +65 -0
  28. package/dist/checkbox.d.ts +2 -0
  29. package/dist/checkbox.js +21 -0
  30. package/dist/chip.d.ts +2 -0
  31. package/dist/chip.js +23 -0
  32. package/dist/collapsible.d.ts +4 -0
  33. package/dist/collapsible.js +43 -0
  34. package/dist/command.d.ts +12 -0
  35. package/dist/command.js +127 -0
  36. package/dist/container.d.ts +1 -0
  37. package/dist/container.js +12 -0
  38. package/dist/copy-button.d.ts +2 -0
  39. package/dist/copy-button.js +23 -0
  40. package/dist/date-field.d.ts +2 -0
  41. package/dist/date-field.js +23 -0
  42. package/dist/date-picker.d.ts +4 -0
  43. package/dist/date-picker.js +41 -0
  44. package/dist/date-range-picker.d.ts +6 -0
  45. package/dist/date-range-picker.js +63 -0
  46. package/dist/dialog.d.ts +6 -0
  47. package/dist/dialog.js +65 -0
  48. package/dist/divider.d.ts +1 -0
  49. package/dist/divider.js +12 -0
  50. package/dist/drawer.d.ts +2 -0
  51. package/dist/drawer.js +21 -0
  52. package/dist/empty.d.ts +6 -0
  53. package/dist/empty.js +67 -0
  54. package/dist/fab.d.ts +1 -0
  55. package/dist/fab.js +12 -0
  56. package/dist/flint-range-slider.d.ts +2 -0
  57. package/dist/flint-range-slider.js +21 -0
  58. package/dist/format-date.d.ts +1 -0
  59. package/dist/format-date.js +12 -0
  60. package/dist/format-number.d.ts +1 -0
  61. package/dist/format-number.js +12 -0
  62. package/dist/grid.d.ts +1 -0
  63. package/dist/grid.js +12 -0
  64. package/dist/hover-card.d.ts +3 -0
  65. package/dist/hover-card.js +34 -0
  66. package/dist/image-comparer.d.ts +2 -0
  67. package/dist/image-comparer.js +21 -0
  68. package/dist/image-list.d.ts +3 -0
  69. package/dist/image-list.js +34 -0
  70. package/dist/input-otp.d.ts +5 -0
  71. package/dist/input-otp.js +56 -0
  72. package/dist/input.d.ts +2 -0
  73. package/dist/input.js +23 -0
  74. package/dist/item.d.ts +10 -0
  75. package/dist/item.js +111 -0
  76. package/dist/kbd.d.ts +2 -0
  77. package/dist/kbd.js +23 -0
  78. package/dist/link.d.ts +1 -0
  79. package/dist/link.js +12 -0
  80. package/dist/list.d.ts +7 -0
  81. package/dist/list.js +78 -0
  82. package/dist/menu.d.ts +6 -0
  83. package/dist/menu.js +63 -0
  84. package/dist/menubar.d.ts +19 -0
  85. package/dist/menubar.js +200 -0
  86. package/dist/navigation-menu.d.ts +9 -0
  87. package/dist/navigation-menu.js +96 -0
  88. package/dist/pagination.d.ts +2 -0
  89. package/dist/pagination.js +21 -0
  90. package/dist/paper.d.ts +1 -0
  91. package/dist/paper.js +12 -0
  92. package/dist/progress.d.ts +2 -0
  93. package/dist/progress.js +23 -0
  94. package/dist/radio.d.ts +4 -0
  95. package/dist/radio.js +41 -0
  96. package/dist/rating.d.ts +2 -0
  97. package/dist/rating.js +21 -0
  98. package/dist/relative-time.d.ts +1 -0
  99. package/dist/relative-time.js +12 -0
  100. package/dist/resizable.d.ts +4 -0
  101. package/dist/resizable.js +47 -0
  102. package/dist/scroll-area.d.ts +2 -0
  103. package/dist/scroll-area.js +23 -0
  104. package/dist/select.d.ts +2 -0
  105. package/dist/select.js +21 -0
  106. package/dist/skeleton.d.ts +1 -0
  107. package/dist/skeleton.js +12 -0
  108. package/dist/slider.d.ts +2 -0
  109. package/dist/slider.js +21 -0
  110. package/dist/snackbar.d.ts +2 -0
  111. package/dist/snackbar.js +23 -0
  112. package/dist/sonner.d.ts +1 -0
  113. package/dist/sonner.js +12 -0
  114. package/dist/speed-dial.d.ts +3 -0
  115. package/dist/speed-dial.js +32 -0
  116. package/dist/split-panel.d.ts +2 -0
  117. package/dist/split-panel.js +21 -0
  118. package/dist/stack.d.ts +1 -0
  119. package/dist/stack.js +12 -0
  120. package/dist/stepper.d.ts +8 -0
  121. package/dist/stepper.js +85 -0
  122. package/dist/switch.d.ts +2 -0
  123. package/dist/switch.js +21 -0
  124. package/dist/table.d.ts +10 -0
  125. package/dist/table.js +111 -0
  126. package/dist/tabs.d.ts +7 -0
  127. package/dist/tabs.js +72 -0
  128. package/dist/text-field.d.ts +2 -0
  129. package/dist/text-field.js +23 -0
  130. package/dist/textarea.d.ts +2 -0
  131. package/dist/textarea.js +23 -0
  132. package/dist/time-picker.d.ts +16 -0
  133. package/dist/time-picker.js +165 -0
  134. package/dist/toggle.d.ts +2 -0
  135. package/dist/toggle.js +21 -0
  136. package/dist/tooltip.d.ts +1 -0
  137. package/dist/tooltip.js +12 -0
  138. package/dist/transfer-list.d.ts +2 -0
  139. package/dist/transfer-list.js +21 -0
  140. package/dist/tree-view.d.ts +6 -0
  141. package/dist/tree-view.js +71 -0
  142. package/dist/typography.d.ts +1 -0
  143. package/dist/typography.js +12 -0
  144. package/dist/visually-hidden.d.ts +1 -0
  145. package/dist/visually-hidden.js +12 -0
  146. package/package.json +156 -148
package/README.md CHANGED
@@ -3,35 +3,84 @@
3
3
  [![npm](https://img.shields.io/npm/v/@getufy/flint-ui-react)](https://www.npmjs.com/package/@getufy/flint-ui-react)
4
4
  [![license](https://img.shields.io/npm/l/@getufy/flint-ui-react)](https://github.com/getufy/flint-ui/blob/main/LICENSE)
5
5
 
6
- 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).
6
+ 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/).
7
7
 
8
8
  ## Installation
9
9
 
10
10
  ```bash
11
- npm install @getufy/flint-ui-react @getufy/flint-ui lit react
11
+ npm install @getufy/flint-ui-react @getufy/flint-ui lit
12
+ ```
13
+
14
+ Import the theme in your app's entry point:
15
+
16
+ ```js
17
+ import '@getufy/flint-ui/theme.css';
12
18
  ```
13
19
 
14
20
  ## Usage
15
21
 
16
- ```jsx
17
- import { FlintButton, FlintTabs, FlintDialog } from '@getufy/flint-ui-react';
22
+ ```tsx
23
+ import { FlintButton, FlintSelect, FlintDialog } from '@getufy/flint-ui-react';
18
24
 
19
25
  function App() {
20
26
  return (
21
- <FlintButton variant="contained" color="primary" onClick={() => console.log('clicked')}>
27
+ <FlintButton variant="primary" onFlintClick={() => console.log('clicked')}>
22
28
  Click me
23
29
  </FlintButton>
24
30
  );
25
31
  }
26
32
  ```
27
33
 
28
- All components from `@getufy/flint-ui` are available as React components with proper event handling and type definitions.
34
+ ### Per-component imports
35
+
36
+ For better tree-shaking, import from component sub-paths:
37
+
38
+ ```tsx
39
+ import { FlintButton } from '@getufy/flint-ui-react/button';
40
+ import { FlintTabs, FlintTab, FlintTabPanel } from '@getufy/flint-ui-react/tabs';
41
+ ```
42
+
43
+ ### Events
44
+
45
+ Custom events use `onEventName` props:
46
+
47
+ | Lit event | React prop |
48
+ |-----------|-----------|
49
+ | `flint-change` | `onFlintChange` |
50
+ | `flint-menu-close` | `onFlintMenuClose` |
51
+ | `close` | `onClose` |
52
+
53
+ ```tsx
54
+ <FlintSelect
55
+ label="Fruit"
56
+ onFlintChange={(e) => console.log(e.detail.value)}
57
+ />
58
+ ```
59
+
60
+ ### Complex properties
61
+
62
+ Objects and arrays can be passed directly as JSX props:
63
+
64
+ ```tsx
65
+ <FlintSelect
66
+ label="Fruit"
67
+ options={[
68
+ { value: 'apple', label: 'Apple' },
69
+ { value: 'banana', label: 'Banana' },
70
+ ]}
71
+ />
72
+ ```
29
73
 
30
74
  ## Peer Dependencies
31
75
 
32
76
  - `react` ^18.0.0 || ^19.0.0
33
- - `@getufy/flint-ui` ^0.1.0
34
- - `lit` ^3.0.0
77
+ - `@getufy/flint-ui` ^0.2.0
78
+
79
+ ## Documentation
80
+
81
+ - [Full documentation](https://getufy.github.io/flint-ui/)
82
+ - [React guide](https://getufy.github.io/flint-ui/react)
83
+ - [Live Storybook](https://getufy.github.io/flint-ui/storybook/)
35
84
 
36
85
  ## License
37
86
 
@@ -0,0 +1,6 @@
1
+ export { FlintAccordion, type FlintAccordionProps } from './components/FlintAccordion.js';
2
+ export { FlintAccordionSummary, type FlintAccordionSummaryProps } from './components/FlintAccordionSummary.js';
3
+ export { FlintAccordionDetails, type FlintAccordionDetailsProps } from './components/FlintAccordionDetails.js';
4
+ export { FlintAccordionActions, type FlintAccordionActionsProps } from './components/FlintAccordionActions.js';
5
+ export { FlintAccordionEvents } from './events/flint-accordion.js';
6
+ export { FlintAccordionSummaryEvents } from './events/flint-accordion-summary.js';
@@ -0,0 +1,63 @@
1
+ // src/components/FlintAccordion.tsx
2
+ import React from "react";
3
+ import { createComponent } from "@lit/react";
4
+ import { FlintAccordion as FlintAccordionElement } from "@getufy/flint-ui/accordion/flint-accordion";
5
+ var FlintAccordion = createComponent({
6
+ tagName: "flint-accordion",
7
+ elementClass: FlintAccordionElement,
8
+ react: React,
9
+ events: {
10
+ onFlintAccordionChange: "flint-accordion-change"
11
+ }
12
+ });
13
+
14
+ // src/components/FlintAccordionSummary.tsx
15
+ import React2 from "react";
16
+ import { createComponent as createComponent2 } from "@lit/react";
17
+ import { FlintAccordionSummary as FlintAccordionSummaryElement } from "@getufy/flint-ui/accordion/flint-accordion";
18
+ var FlintAccordionSummary = createComponent2({
19
+ tagName: "flint-accordion-summary",
20
+ elementClass: FlintAccordionSummaryElement,
21
+ react: React2,
22
+ events: {
23
+ onFlintAccordionToggle: "flint-accordion-toggle"
24
+ }
25
+ });
26
+
27
+ // src/components/FlintAccordionDetails.tsx
28
+ import React3 from "react";
29
+ import { createComponent as createComponent3 } from "@lit/react";
30
+ import { FlintAccordionDetails as FlintAccordionDetailsElement } from "@getufy/flint-ui/accordion/flint-accordion";
31
+ var FlintAccordionDetails = createComponent3({
32
+ tagName: "flint-accordion-details",
33
+ elementClass: FlintAccordionDetailsElement,
34
+ react: React3
35
+ });
36
+
37
+ // src/components/FlintAccordionActions.tsx
38
+ import React4 from "react";
39
+ import { createComponent as createComponent4 } from "@lit/react";
40
+ import { FlintAccordionActions as FlintAccordionActionsElement } from "@getufy/flint-ui/accordion/flint-accordion";
41
+ var FlintAccordionActions = createComponent4({
42
+ tagName: "flint-accordion-actions",
43
+ elementClass: FlintAccordionActionsElement,
44
+ react: React4
45
+ });
46
+
47
+ // src/events/flint-accordion.ts
48
+ var FlintAccordionEvents = {
49
+ CHANGE: "flint-accordion-change"
50
+ };
51
+
52
+ // src/events/flint-accordion-summary.ts
53
+ var FlintAccordionSummaryEvents = {
54
+ ACCORDION_TOGGLE: "flint-accordion-toggle"
55
+ };
56
+ export {
57
+ FlintAccordion,
58
+ FlintAccordionActions,
59
+ FlintAccordionDetails,
60
+ FlintAccordionEvents,
61
+ FlintAccordionSummary,
62
+ FlintAccordionSummaryEvents
63
+ };
@@ -0,0 +1,2 @@
1
+ export { FlintAlert, type FlintAlertProps } from './components/FlintAlert.js';
2
+ export { FlintAlertEvents } from './events/flint-alert.js';
package/dist/alert.js ADDED
@@ -0,0 +1,21 @@
1
+ // src/components/FlintAlert.tsx
2
+ import React from "react";
3
+ import { createComponent } from "@lit/react";
4
+ import { FlintAlert as FlintAlertElement } from "@getufy/flint-ui/alert/flint-alert";
5
+ var FlintAlert = createComponent({
6
+ tagName: "flint-alert",
7
+ elementClass: FlintAlertElement,
8
+ react: React,
9
+ events: {
10
+ onFlintAlertClose: "flint-alert-close"
11
+ }
12
+ });
13
+
14
+ // src/events/flint-alert.ts
15
+ var FlintAlertEvents = {
16
+ CLOSE: "flint-alert-close"
17
+ };
18
+ export {
19
+ FlintAlert,
20
+ FlintAlertEvents
21
+ };
@@ -0,0 +1 @@
1
+ export { FlintAppBar, type FlintAppBarProps } from './components/FlintAppBar.js';
@@ -0,0 +1,12 @@
1
+ // src/components/FlintAppBar.tsx
2
+ import React from "react";
3
+ import { createComponent } from "@lit/react";
4
+ import { FlintAppBar as FlintAppBarElement } from "@getufy/flint-ui/app-bar/flint-app-bar";
5
+ var FlintAppBar = createComponent({
6
+ tagName: "flint-app-bar",
7
+ elementClass: FlintAppBarElement,
8
+ react: React
9
+ });
10
+ export {
11
+ FlintAppBar
12
+ };
@@ -0,0 +1,2 @@
1
+ export { FlintAutocomplete, type FlintAutocompleteProps } from './components/FlintAutocomplete.js';
2
+ export { FlintAutocompleteEvents } from './events/flint-autocomplete.js';
@@ -0,0 +1,21 @@
1
+ // src/components/FlintAutocomplete.tsx
2
+ import React from "react";
3
+ import { createComponent } from "@lit/react";
4
+ import { FlintAutocomplete as FlintAutocompleteElement } from "@getufy/flint-ui/autocomplete/flint-autocomplete";
5
+ var FlintAutocomplete = createComponent({
6
+ tagName: "flint-autocomplete",
7
+ elementClass: FlintAutocompleteElement,
8
+ react: React,
9
+ events: {
10
+ onFlintAutocompleteChange: "flint-autocomplete-change"
11
+ }
12
+ });
13
+
14
+ // src/events/flint-autocomplete.ts
15
+ var FlintAutocompleteEvents = {
16
+ CHANGE: "flint-autocomplete-change"
17
+ };
18
+ export {
19
+ FlintAutocomplete,
20
+ FlintAutocompleteEvents
21
+ };
@@ -0,0 +1 @@
1
+ export { FlintAvatar, type FlintAvatarProps } from './components/FlintAvatar.js';
package/dist/avatar.js ADDED
@@ -0,0 +1,12 @@
1
+ // src/components/FlintAvatar.tsx
2
+ import React from "react";
3
+ import { createComponent } from "@lit/react";
4
+ import { FlintAvatar as FlintAvatarElement } from "@getufy/flint-ui/avatar/flint-avatar";
5
+ var FlintAvatar = createComponent({
6
+ tagName: "flint-avatar",
7
+ elementClass: FlintAvatarElement,
8
+ react: React
9
+ });
10
+ export {
11
+ FlintAvatar
12
+ };
@@ -0,0 +1,2 @@
1
+ export { FlintBackdrop, type FlintBackdropProps } from './components/FlintBackdrop.js';
2
+ export { FlintBackdropEvents } from './events/flint-backdrop.js';
@@ -0,0 +1,21 @@
1
+ // src/components/FlintBackdrop.tsx
2
+ import React from "react";
3
+ import { createComponent } from "@lit/react";
4
+ import { FlintBackdrop as FlintBackdropElement } from "@getufy/flint-ui/backdrop/flint-backdrop";
5
+ var FlintBackdrop = createComponent({
6
+ tagName: "flint-backdrop",
7
+ elementClass: FlintBackdropElement,
8
+ react: React,
9
+ events: {
10
+ onFlintBackdropClose: "flint-backdrop-close"
11
+ }
12
+ });
13
+
14
+ // src/events/flint-backdrop.ts
15
+ var FlintBackdropEvents = {
16
+ CLOSE: "flint-backdrop-close"
17
+ };
18
+ export {
19
+ FlintBackdrop,
20
+ FlintBackdropEvents
21
+ };
@@ -0,0 +1 @@
1
+ export { FlintBadge, type FlintBadgeProps } from './components/FlintBadge.js';
package/dist/badge.js ADDED
@@ -0,0 +1,12 @@
1
+ // src/components/FlintBadge.tsx
2
+ import React from "react";
3
+ import { createComponent } from "@lit/react";
4
+ import { FlintBadge as FlintBadgeElement } from "@getufy/flint-ui/badge/flint-badge";
5
+ var FlintBadge = createComponent({
6
+ tagName: "flint-badge",
7
+ elementClass: FlintBadgeElement,
8
+ react: React
9
+ });
10
+ export {
11
+ FlintBadge
12
+ };
@@ -0,0 +1,3 @@
1
+ export { FlintBottomNavigationAction, type FlintBottomNavigationActionProps } from './components/FlintBottomNavigationAction.js';
2
+ export { FlintBottomNavigation, type FlintBottomNavigationProps } from './components/FlintBottomNavigation.js';
3
+ export { FlintBottomNavigationEvents } from './events/flint-bottom-navigation.js';
@@ -0,0 +1,32 @@
1
+ // src/components/FlintBottomNavigationAction.tsx
2
+ import React from "react";
3
+ import { createComponent } from "@lit/react";
4
+ import { FlintBottomNavigationAction as FlintBottomNavigationActionElement } from "@getufy/flint-ui/bottom-navigation/flint-bottom-navigation-action";
5
+ var FlintBottomNavigationAction = createComponent({
6
+ tagName: "flint-bottom-navigation-action",
7
+ elementClass: FlintBottomNavigationActionElement,
8
+ react: React
9
+ });
10
+
11
+ // src/components/FlintBottomNavigation.tsx
12
+ import React2 from "react";
13
+ import { createComponent as createComponent2 } from "@lit/react";
14
+ import { FlintBottomNavigation as FlintBottomNavigationElement } from "@getufy/flint-ui/bottom-navigation/flint-bottom-navigation";
15
+ var FlintBottomNavigation = createComponent2({
16
+ tagName: "flint-bottom-navigation",
17
+ elementClass: FlintBottomNavigationElement,
18
+ react: React2,
19
+ events: {
20
+ onFlintBottomNavigationChange: "flint-bottom-navigation-change"
21
+ }
22
+ });
23
+
24
+ // src/events/flint-bottom-navigation.ts
25
+ var FlintBottomNavigationEvents = {
26
+ CHANGE: "flint-bottom-navigation-change"
27
+ };
28
+ export {
29
+ FlintBottomNavigation,
30
+ FlintBottomNavigationAction,
31
+ FlintBottomNavigationEvents
32
+ };
package/dist/box.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export { FlintBox, type FlintBoxProps } from './components/FlintBox.js';
2
+ export { FlintBoxEvents } from './events/flint-box.js';
package/dist/box.js ADDED
@@ -0,0 +1,21 @@
1
+ // src/components/FlintBox.tsx
2
+ import React from "react";
3
+ import { createComponent } from "@lit/react";
4
+ import { FlintBox as FlintBoxElement } from "@getufy/flint-ui/box/flint-box";
5
+ var FlintBox = createComponent({
6
+ tagName: "flint-box",
7
+ elementClass: FlintBoxElement,
8
+ react: React,
9
+ events: {
10
+ onFlintBoxWarning: "flint-box-warning"
11
+ }
12
+ });
13
+
14
+ // src/events/flint-box.ts
15
+ var FlintBoxEvents = {
16
+ WARNING: "flint-box-warning"
17
+ };
18
+ export {
19
+ FlintBox,
20
+ FlintBoxEvents
21
+ };
@@ -0,0 +1 @@
1
+ export { FlintBreadcrumbs, type FlintBreadcrumbsProps } from './components/FlintBreadcrumbs.js';
@@ -0,0 +1,12 @@
1
+ // src/components/FlintBreadcrumbs.tsx
2
+ import React from "react";
3
+ import { createComponent } from "@lit/react";
4
+ import { FlintBreadcrumbs as FlintBreadcrumbsElement } from "@getufy/flint-ui/breadcrumbs/flint-breadcrumbs";
5
+ var FlintBreadcrumbs = createComponent({
6
+ tagName: "flint-breadcrumbs",
7
+ elementClass: FlintBreadcrumbsElement,
8
+ react: React
9
+ });
10
+ export {
11
+ FlintBreadcrumbs
12
+ };
@@ -0,0 +1,6 @@
1
+ export { FlintButtonGroup, type FlintButtonGroupProps } from './components/FlintButtonGroup.js';
2
+ export { FlintButton, type FlintButtonProps } from './components/FlintButton.js';
3
+ export { FlintToggleButtonGroup, type FlintToggleButtonGroupProps } from './components/FlintToggleButtonGroup.js';
4
+ export { FlintToggleButton, type FlintToggleButtonProps } from './components/FlintToggleButton.js';
5
+ export { FlintToggleButtonGroupEvents } from './events/flint-toggle-button-group.js';
6
+ export { FlintToggleButtonEvents } from './events/flint-toggle-button.js';
package/dist/button.js ADDED
@@ -0,0 +1,63 @@
1
+ // src/components/FlintButtonGroup.tsx
2
+ import React from "react";
3
+ import { createComponent } from "@lit/react";
4
+ import { FlintButtonGroup as FlintButtonGroupElement } from "@getufy/flint-ui/button/flint-button-group";
5
+ var FlintButtonGroup = createComponent({
6
+ tagName: "flint-button-group",
7
+ elementClass: FlintButtonGroupElement,
8
+ react: React
9
+ });
10
+
11
+ // src/components/FlintButton.tsx
12
+ import React2 from "react";
13
+ import { createComponent as createComponent2 } from "@lit/react";
14
+ import { FlintButton as FlintButtonElement } from "@getufy/flint-ui/button/flint-button";
15
+ var FlintButton = createComponent2({
16
+ tagName: "flint-button",
17
+ elementClass: FlintButtonElement,
18
+ react: React2
19
+ });
20
+
21
+ // src/components/FlintToggleButtonGroup.tsx
22
+ import React3 from "react";
23
+ import { createComponent as createComponent3 } from "@lit/react";
24
+ import { FlintToggleButtonGroup as FlintToggleButtonGroupElement } from "@getufy/flint-ui/button/flint-toggle-button-group";
25
+ var FlintToggleButtonGroup = createComponent3({
26
+ tagName: "flint-toggle-button-group",
27
+ elementClass: FlintToggleButtonGroupElement,
28
+ react: React3,
29
+ events: {
30
+ onFlintToggleButtonGroupChange: "flint-toggle-button-group-change"
31
+ }
32
+ });
33
+
34
+ // src/components/FlintToggleButton.tsx
35
+ import React4 from "react";
36
+ import { createComponent as createComponent4 } from "@lit/react";
37
+ import { FlintToggleButton as FlintToggleButtonElement } from "@getufy/flint-ui/button/flint-toggle-button";
38
+ var FlintToggleButton = createComponent4({
39
+ tagName: "flint-toggle-button",
40
+ elementClass: FlintToggleButtonElement,
41
+ react: React4,
42
+ events: {
43
+ onFlintToggleButtonChange: "flint-toggle-button-change"
44
+ }
45
+ });
46
+
47
+ // src/events/flint-toggle-button-group.ts
48
+ var FlintToggleButtonGroupEvents = {
49
+ CHANGE: "flint-toggle-button-group-change"
50
+ };
51
+
52
+ // src/events/flint-toggle-button.ts
53
+ var FlintToggleButtonEvents = {
54
+ CHANGE: "flint-toggle-button-change"
55
+ };
56
+ export {
57
+ FlintButton,
58
+ FlintButtonGroup,
59
+ FlintToggleButton,
60
+ FlintToggleButtonEvents,
61
+ FlintToggleButtonGroup,
62
+ FlintToggleButtonGroupEvents
63
+ };
package/dist/card.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ export { FlintCardActionArea, type FlintCardActionAreaProps } from './components/FlintCardActionArea.js';
2
+ export { FlintCardActions, type FlintCardActionsProps } from './components/FlintCardActions.js';
3
+ export { FlintCardContent, type FlintCardContentProps } from './components/FlintCardContent.js';
4
+ export { FlintCardHeader, type FlintCardHeaderProps } from './components/FlintCardHeader.js';
5
+ export { FlintCardMedia, type FlintCardMediaProps } from './components/FlintCardMedia.js';
6
+ export { FlintCard, type FlintCardProps } from './components/FlintCard.js';
package/dist/card.js ADDED
@@ -0,0 +1,67 @@
1
+ // src/components/FlintCardActionArea.tsx
2
+ import React from "react";
3
+ import { createComponent } from "@lit/react";
4
+ import { FlintCardActionArea as FlintCardActionAreaElement } from "@getufy/flint-ui/card/flint-card-action-area";
5
+ var FlintCardActionArea = createComponent({
6
+ tagName: "flint-card-action-area",
7
+ elementClass: FlintCardActionAreaElement,
8
+ react: React
9
+ });
10
+
11
+ // src/components/FlintCardActions.tsx
12
+ import React2 from "react";
13
+ import { createComponent as createComponent2 } from "@lit/react";
14
+ import { FlintCardActions as FlintCardActionsElement } from "@getufy/flint-ui/card/flint-card-actions";
15
+ var FlintCardActions = createComponent2({
16
+ tagName: "flint-card-actions",
17
+ elementClass: FlintCardActionsElement,
18
+ react: React2
19
+ });
20
+
21
+ // src/components/FlintCardContent.tsx
22
+ import React3 from "react";
23
+ import { createComponent as createComponent3 } from "@lit/react";
24
+ import { FlintCardContent as FlintCardContentElement } from "@getufy/flint-ui/card/flint-card-content";
25
+ var FlintCardContent = createComponent3({
26
+ tagName: "flint-card-content",
27
+ elementClass: FlintCardContentElement,
28
+ react: React3
29
+ });
30
+
31
+ // src/components/FlintCardHeader.tsx
32
+ import React4 from "react";
33
+ import { createComponent as createComponent4 } from "@lit/react";
34
+ import { FlintCardHeader as FlintCardHeaderElement } from "@getufy/flint-ui/card/flint-card-header";
35
+ var FlintCardHeader = createComponent4({
36
+ tagName: "flint-card-header",
37
+ elementClass: FlintCardHeaderElement,
38
+ react: React4
39
+ });
40
+
41
+ // src/components/FlintCardMedia.tsx
42
+ import React5 from "react";
43
+ import { createComponent as createComponent5 } from "@lit/react";
44
+ import { FlintCardMedia as FlintCardMediaElement } from "@getufy/flint-ui/card/flint-card-media";
45
+ var FlintCardMedia = createComponent5({
46
+ tagName: "flint-card-media",
47
+ elementClass: FlintCardMediaElement,
48
+ react: React5
49
+ });
50
+
51
+ // src/components/FlintCard.tsx
52
+ import React6 from "react";
53
+ import { createComponent as createComponent6 } from "@lit/react";
54
+ import { FlintCard as FlintCardElement } from "@getufy/flint-ui/card/flint-card";
55
+ var FlintCard = createComponent6({
56
+ tagName: "flint-card",
57
+ elementClass: FlintCardElement,
58
+ react: React6
59
+ });
60
+ export {
61
+ FlintCard,
62
+ FlintCardActionArea,
63
+ FlintCardActions,
64
+ FlintCardContent,
65
+ FlintCardHeader,
66
+ FlintCardMedia
67
+ };
@@ -0,0 +1,6 @@
1
+ export { FlintCarouselContent, type FlintCarouselContentProps } from './components/FlintCarouselContent.js';
2
+ export { FlintCarouselItem, type FlintCarouselItemProps } from './components/FlintCarouselItem.js';
3
+ export { FlintCarouselPrevious, type FlintCarouselPreviousProps } from './components/FlintCarouselPrevious.js';
4
+ export { FlintCarouselNext, type FlintCarouselNextProps } from './components/FlintCarouselNext.js';
5
+ export { FlintCarousel, type FlintCarouselProps } from './components/FlintCarousel.js';
6
+ export { FlintCarouselEvents } from './events/flint-carousel.js';
@@ -0,0 +1,65 @@
1
+ // src/components/FlintCarouselContent.tsx
2
+ import React from "react";
3
+ import { createComponent } from "@lit/react";
4
+ import { FlintCarouselContent as FlintCarouselContentElement } from "@getufy/flint-ui/carousel/flint-carousel";
5
+ var FlintCarouselContent = createComponent({
6
+ tagName: "flint-carousel-content",
7
+ elementClass: FlintCarouselContentElement,
8
+ react: React
9
+ });
10
+
11
+ // src/components/FlintCarouselItem.tsx
12
+ import React2 from "react";
13
+ import { createComponent as createComponent2 } from "@lit/react";
14
+ import { FlintCarouselItem as FlintCarouselItemElement } from "@getufy/flint-ui/carousel/flint-carousel";
15
+ var FlintCarouselItem = createComponent2({
16
+ tagName: "flint-carousel-item",
17
+ elementClass: FlintCarouselItemElement,
18
+ react: React2
19
+ });
20
+
21
+ // src/components/FlintCarouselPrevious.tsx
22
+ import React3 from "react";
23
+ import { createComponent as createComponent3 } from "@lit/react";
24
+ import { FlintCarouselPrevious as FlintCarouselPreviousElement } from "@getufy/flint-ui/carousel/flint-carousel";
25
+ var FlintCarouselPrevious = createComponent3({
26
+ tagName: "flint-carousel-previous",
27
+ elementClass: FlintCarouselPreviousElement,
28
+ react: React3
29
+ });
30
+
31
+ // src/components/FlintCarouselNext.tsx
32
+ import React4 from "react";
33
+ import { createComponent as createComponent4 } from "@lit/react";
34
+ import { FlintCarouselNext as FlintCarouselNextElement } from "@getufy/flint-ui/carousel/flint-carousel";
35
+ var FlintCarouselNext = createComponent4({
36
+ tagName: "flint-carousel-next",
37
+ elementClass: FlintCarouselNextElement,
38
+ react: React4
39
+ });
40
+
41
+ // src/components/FlintCarousel.tsx
42
+ import React5 from "react";
43
+ import { createComponent as createComponent5 } from "@lit/react";
44
+ import { FlintCarousel as FlintCarouselElement } from "@getufy/flint-ui/carousel/flint-carousel";
45
+ var FlintCarousel = createComponent5({
46
+ tagName: "flint-carousel",
47
+ elementClass: FlintCarouselElement,
48
+ react: React5,
49
+ events: {
50
+ onFlintCarouselChange: "flint-carousel-change"
51
+ }
52
+ });
53
+
54
+ // src/events/flint-carousel.ts
55
+ var FlintCarouselEvents = {
56
+ CHANGE: "flint-carousel-change"
57
+ };
58
+ export {
59
+ FlintCarousel,
60
+ FlintCarouselContent,
61
+ FlintCarouselEvents,
62
+ FlintCarouselItem,
63
+ FlintCarouselNext,
64
+ FlintCarouselPrevious
65
+ };
@@ -0,0 +1,2 @@
1
+ export { FlintCheckbox, type FlintCheckboxProps } from './components/FlintCheckbox.js';
2
+ export { FlintCheckboxEvents } from './events/flint-checkbox.js';
@@ -0,0 +1,21 @@
1
+ // src/components/FlintCheckbox.tsx
2
+ import React from "react";
3
+ import { createComponent } from "@lit/react";
4
+ import { FlintCheckbox as FlintCheckboxElement } from "@getufy/flint-ui/checkbox/flint-checkbox";
5
+ var FlintCheckbox = createComponent({
6
+ tagName: "flint-checkbox",
7
+ elementClass: FlintCheckboxElement,
8
+ react: React,
9
+ events: {
10
+ onFlintCheckboxChange: "flint-checkbox-change"
11
+ }
12
+ });
13
+
14
+ // src/events/flint-checkbox.ts
15
+ var FlintCheckboxEvents = {
16
+ CHANGE: "flint-checkbox-change"
17
+ };
18
+ export {
19
+ FlintCheckbox,
20
+ FlintCheckboxEvents
21
+ };
package/dist/chip.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export { FlintChip, type FlintChipProps } from './components/FlintChip.js';
2
+ export { FlintChipEvents } from './events/flint-chip.js';
package/dist/chip.js ADDED
@@ -0,0 +1,23 @@
1
+ // src/components/FlintChip.tsx
2
+ import React from "react";
3
+ import { createComponent } from "@lit/react";
4
+ import { FlintChip as FlintChipElement } from "@getufy/flint-ui/chip/flint-chip";
5
+ var FlintChip = createComponent({
6
+ tagName: "flint-chip",
7
+ elementClass: FlintChipElement,
8
+ react: React,
9
+ events: {
10
+ onClick: "click",
11
+ onFlintChipDelete: "flint-chip-delete"
12
+ }
13
+ });
14
+
15
+ // src/events/flint-chip.ts
16
+ var FlintChipEvents = {
17
+ CLICK: "click",
18
+ DELETE: "flint-chip-delete"
19
+ };
20
+ export {
21
+ FlintChip,
22
+ FlintChipEvents
23
+ };
@@ -0,0 +1,4 @@
1
+ export { FlintCollapsibleTrigger, type FlintCollapsibleTriggerProps } from './components/FlintCollapsibleTrigger.js';
2
+ export { FlintCollapsibleContent, type FlintCollapsibleContentProps } from './components/FlintCollapsibleContent.js';
3
+ export { FlintCollapsible, type FlintCollapsibleProps } from './components/FlintCollapsible.js';
4
+ export { FlintCollapsibleEvents } from './events/flint-collapsible.js';