@fea-ui/react 0.1.0-alpha.1 → 0.1.0-alpha.3

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.
package/dist/index.mjs CHANGED
@@ -1,6 +1,6 @@
1
1
  import { cn, cn as cn$1, tv } from "tailwind-variants";
2
- import { Accordion, Avatar, Button, Checkbox, CheckboxGroup, Dialog, Field, Input, Menu, Meter, Separator, Switch, Tabs, Toggle } from "@base-ui/react";
3
- import { LucideCheck, LucideMenu, LucidePlus, LucideX } from "lucide-react";
2
+ import { Accordion, AlertDialog, Avatar, Button, Checkbox, CheckboxGroup, Dialog, Field, Input, Menu, Meter, Progress, Separator, Slider, Switch, Tabs, Toggle } from "@base-ui/react";
3
+ import { LucideCheck, LucideChevronDown, LucideMenu, LucideX } from "lucide-react";
4
4
  import React, { createContext, useCallback, useContext, useMemo, useState } from "react";
5
5
  import { jsx } from "react/jsx-runtime";
6
6
 
@@ -62,7 +62,7 @@ const AccordionTrigger = ({ className, ...props }) => {
62
62
  };
63
63
  const AccordionTriggerIcon = ({ className, ...props }) => {
64
64
  const { slots } = useAccordion();
65
- return /* @__PURE__ */ jsx(LucidePlus, {
65
+ return /* @__PURE__ */ jsx(LucideChevronDown, {
66
66
  className: cn$1(className, slots.triggerIcon()),
67
67
  ...props
68
68
  });
@@ -90,6 +90,108 @@ Accordion$1.Trigger = AccordionTrigger;
90
90
  Accordion$1.TriggerIcon = AccordionTriggerIcon;
91
91
  var accordion_default = Accordion$1;
92
92
 
93
+ //#endregion
94
+ //#region src/components/alert-dialog/alert-dialog.context.ts
95
+ const AlertDialogContext = createContext(null);
96
+
97
+ //#endregion
98
+ //#region src/components/alert-dialog/alert-dialog.variants.ts
99
+ const alertDialogVariants = tv({ slots: {
100
+ backdrop: "alert-dialog__backdrop",
101
+ close: "alert-dialog__close",
102
+ description: "alert-dialog__description",
103
+ popup: "alert-dialog__popup",
104
+ portal: "alert-dialog__portal",
105
+ root: "alert-dialog",
106
+ title: "alert-dialog__title",
107
+ trigger: "alert-dialog__trigger",
108
+ viewport: "alert-dialog__viewport"
109
+ } });
110
+
111
+ //#endregion
112
+ //#region src/components/alert-dialog/use-alert-dialog.ts
113
+ const useAlertDialog = () => {
114
+ const context = useContext(AlertDialogContext);
115
+ if (!context) throw new Error("useAlertDialog must be used within a AlertDialogProvider");
116
+ return context;
117
+ };
118
+
119
+ //#endregion
120
+ //#region src/components/alert-dialog/alert-dialog.tsx
121
+ const AlertDialog$1 = ({ ...props }) => {
122
+ return /* @__PURE__ */ jsx(AlertDialogContext, {
123
+ value: { slots: useMemo(() => alertDialogVariants(), []) },
124
+ children: /* @__PURE__ */ jsx(AlertDialog.Root, { ...props })
125
+ });
126
+ };
127
+ const AlertDialogTrigger = ({ className, ...props }) => {
128
+ const { slots } = useAlertDialog();
129
+ return /* @__PURE__ */ jsx(AlertDialog.Trigger, {
130
+ className: cn$1(slots.trigger(), className),
131
+ ...props
132
+ });
133
+ };
134
+ const AlertDialogPortal = ({ className, ...props }) => {
135
+ const { slots } = useAlertDialog();
136
+ return /* @__PURE__ */ jsx(AlertDialog.Portal, {
137
+ className: cn$1(slots.portal(), className),
138
+ ...props
139
+ });
140
+ };
141
+ const AlertDialogBackdrop = ({ className, ...props }) => {
142
+ const { slots } = useAlertDialog();
143
+ return /* @__PURE__ */ jsx(AlertDialog.Backdrop, {
144
+ className: cn$1(slots.backdrop(), className),
145
+ ...props
146
+ });
147
+ };
148
+ const AlertDialogViewport = ({ className, ...props }) => {
149
+ const { slots } = useAlertDialog();
150
+ return /* @__PURE__ */ jsx(AlertDialog.Viewport, {
151
+ className: cn$1(slots.viewport(), className),
152
+ ...props
153
+ });
154
+ };
155
+ const AlertDialogPopup = ({ className, ...props }) => {
156
+ const { slots } = useAlertDialog();
157
+ return /* @__PURE__ */ jsx(AlertDialog.Popup, {
158
+ className: cn$1(slots.popup(), className),
159
+ ...props
160
+ });
161
+ };
162
+ const AlertDialogTitle = ({ className, ...props }) => {
163
+ const { slots } = useAlertDialog();
164
+ return /* @__PURE__ */ jsx(AlertDialog.Title, {
165
+ className: cn$1(slots.title(), className),
166
+ ...props
167
+ });
168
+ };
169
+ const AlertDialogDescription = ({ className, ...props }) => {
170
+ const { slots } = useAlertDialog();
171
+ return /* @__PURE__ */ jsx(AlertDialog.Description, {
172
+ className: cn$1(slots.description(), className),
173
+ ...props
174
+ });
175
+ };
176
+ const AlertDialogClose = ({ className, children, ...props }) => {
177
+ const { slots } = useAlertDialog();
178
+ return /* @__PURE__ */ jsx(AlertDialog.Close, {
179
+ className: cn$1(slots.close(), className),
180
+ ...props,
181
+ children: children ?? /* @__PURE__ */ jsx(LucideX, {})
182
+ });
183
+ };
184
+ AlertDialog$1.Root = AlertDialog$1;
185
+ AlertDialog$1.Trigger = AlertDialogTrigger;
186
+ AlertDialog$1.Portal = AlertDialogPortal;
187
+ AlertDialog$1.Backdrop = AlertDialogBackdrop;
188
+ AlertDialog$1.Viewport = AlertDialogViewport;
189
+ AlertDialog$1.Popup = AlertDialogPopup;
190
+ AlertDialog$1.Title = AlertDialogTitle;
191
+ AlertDialog$1.Description = AlertDialogDescription;
192
+ AlertDialog$1.Close = AlertDialogClose;
193
+ var alert_dialog_default = AlertDialog$1;
194
+
93
195
  //#endregion
94
196
  //#region src/components/avatar/avatar.context.ts
95
197
  const AvatarContext = createContext(null);
@@ -1050,6 +1152,75 @@ Navbar.Menu = NavbarMenu;
1050
1152
  Navbar.MenuItem = NavbarMenuItem;
1051
1153
  var navbar_default = Navbar;
1052
1154
 
1155
+ //#endregion
1156
+ //#region src/components/progress/progress.context.ts
1157
+ const ProgressContext = createContext(null);
1158
+
1159
+ //#endregion
1160
+ //#region src/components/progress/progress.variants.ts
1161
+ const progressVariants = tv({ slots: {
1162
+ indicator: "progress__indicator",
1163
+ label: "progress__label",
1164
+ root: "progress",
1165
+ track: "progress__track",
1166
+ value: "progress__value"
1167
+ } });
1168
+
1169
+ //#endregion
1170
+ //#region src/components/progress/use-progress.ts
1171
+ const useProgress = () => {
1172
+ const context = useContext(ProgressContext);
1173
+ if (!context) throw new Error("useProgress must be used within a ProgressProvider");
1174
+ return context;
1175
+ };
1176
+
1177
+ //#endregion
1178
+ //#region src/components/progress/progress.tsx
1179
+ const Progress$1 = ({ className, ...props }) => {
1180
+ const slots = useMemo(() => progressVariants(), []);
1181
+ return /* @__PURE__ */ jsx(ProgressContext, {
1182
+ value: { slots },
1183
+ children: /* @__PURE__ */ jsx(Progress.Root, {
1184
+ className: cn$1(className, slots.root()),
1185
+ ...props
1186
+ })
1187
+ });
1188
+ };
1189
+ const ProgressLabel = ({ className, ...props }) => {
1190
+ const { slots } = useProgress();
1191
+ return /* @__PURE__ */ jsx(Progress.Label, {
1192
+ className: cn$1(className, slots.label()),
1193
+ ...props
1194
+ });
1195
+ };
1196
+ const ProgressValue = ({ className, ...props }) => {
1197
+ const { slots } = useProgress();
1198
+ return /* @__PURE__ */ jsx(Progress.Value, {
1199
+ className: cn$1(className, slots.value()),
1200
+ ...props
1201
+ });
1202
+ };
1203
+ const ProgressTrack = ({ className, ...props }) => {
1204
+ const { slots } = useProgress();
1205
+ return /* @__PURE__ */ jsx(Progress.Track, {
1206
+ className: cn$1(className, slots.track()),
1207
+ ...props
1208
+ });
1209
+ };
1210
+ const ProgressIndicator = ({ className, ...props }) => {
1211
+ const { slots } = useProgress();
1212
+ return /* @__PURE__ */ jsx(Progress.Indicator, {
1213
+ className: cn$1(className, slots.indicator()),
1214
+ ...props
1215
+ });
1216
+ };
1217
+ Progress$1.Label = ProgressLabel;
1218
+ Progress$1.Value = ProgressValue;
1219
+ Progress$1.Track = ProgressTrack;
1220
+ Progress$1.Indicator = ProgressIndicator;
1221
+ Progress$1.Root = Progress$1;
1222
+ var progress_default = Progress$1;
1223
+
1053
1224
  //#endregion
1054
1225
  //#region src/components/separator/separator.variants.ts
1055
1226
  const separatorVariants = tv({
@@ -1071,6 +1242,84 @@ const Separator$1 = ({ className, orientation, ...props }) => {
1071
1242
  };
1072
1243
  var separator_default = Separator$1;
1073
1244
 
1245
+ //#endregion
1246
+ //#region src/components/slider/slider.context.ts
1247
+ const SliderContext = createContext(null);
1248
+
1249
+ //#endregion
1250
+ //#region src/components/slider/slider.variants.ts
1251
+ const sliderVariants = tv({ slots: {
1252
+ control: "slider__control",
1253
+ indicator: "slider__indicator",
1254
+ root: "slider",
1255
+ thumb: "slider__thumb",
1256
+ track: "slider__track",
1257
+ value: "slider__value"
1258
+ } });
1259
+
1260
+ //#endregion
1261
+ //#region src/components/slider/use-slider.tsx
1262
+ const useSlider = () => {
1263
+ const context = useContext(SliderContext);
1264
+ if (!context) throw new Error("useSlider must be used within a SliderProvider");
1265
+ return context;
1266
+ };
1267
+
1268
+ //#endregion
1269
+ //#region src/components/slider/slider.tsx
1270
+ const Slider$1 = ({ className, ...props }) => {
1271
+ const slots = useMemo(() => sliderVariants(), []);
1272
+ return /* @__PURE__ */ jsx(SliderContext, {
1273
+ value: { slots },
1274
+ children: /* @__PURE__ */ jsx(Slider.Root, {
1275
+ className: cn$1(className, slots.root()),
1276
+ ...props
1277
+ })
1278
+ });
1279
+ };
1280
+ const SliderValue = ({ className, ...props }) => {
1281
+ const { slots } = useSlider();
1282
+ return /* @__PURE__ */ jsx(Slider.Value, {
1283
+ className: cn$1(className, slots.value()),
1284
+ ...props
1285
+ });
1286
+ };
1287
+ const SliderControl = ({ className, ...props }) => {
1288
+ const { slots } = useSlider();
1289
+ return /* @__PURE__ */ jsx(Slider.Control, {
1290
+ className: cn$1(className, slots.control()),
1291
+ ...props
1292
+ });
1293
+ };
1294
+ const SliderTrack = ({ className, ...props }) => {
1295
+ const { slots } = useSlider();
1296
+ return /* @__PURE__ */ jsx(Slider.Track, {
1297
+ className: cn$1(className, slots.track()),
1298
+ ...props
1299
+ });
1300
+ };
1301
+ const SliderIndicator = ({ className, ...props }) => {
1302
+ const { slots } = useSlider();
1303
+ return /* @__PURE__ */ jsx(Slider.Indicator, {
1304
+ className: cn$1(className, slots.indicator()),
1305
+ ...props
1306
+ });
1307
+ };
1308
+ const SliderThumb = ({ className, ...props }) => {
1309
+ const { slots } = useSlider();
1310
+ return /* @__PURE__ */ jsx(Slider.Thumb, {
1311
+ className: cn$1(className, slots.thumb()),
1312
+ ...props
1313
+ });
1314
+ };
1315
+ Slider$1.Value = SliderValue;
1316
+ Slider$1.Control = SliderControl;
1317
+ Slider$1.Track = SliderTrack;
1318
+ Slider$1.Indicator = SliderIndicator;
1319
+ Slider$1.Thumb = SliderThumb;
1320
+ Slider$1.Root = Slider$1;
1321
+ var slider_default = Slider$1;
1322
+
1074
1323
  //#endregion
1075
1324
  //#region src/components/switch/switch.context.ts
1076
1325
  const SwitchContext = createContext(null);
@@ -1121,6 +1370,93 @@ Switch$1.Thumb = SwitchThumb;
1121
1370
  Switch$1.Root = Switch$1;
1122
1371
  var switch_default = Switch$1;
1123
1372
 
1373
+ //#endregion
1374
+ //#region src/components/table/table.context.ts
1375
+ const TableContext = createContext(null);
1376
+
1377
+ //#endregion
1378
+ //#region src/components/table/table.variants.ts
1379
+ const tableVariants = tv({ slots: {
1380
+ root: "table",
1381
+ tbody: "table__tbody",
1382
+ td: "table__td",
1383
+ tfoot: "table__tfoot",
1384
+ th: "table__th",
1385
+ thead: "table__thead",
1386
+ tr: "table__tr"
1387
+ } });
1388
+
1389
+ //#endregion
1390
+ //#region src/components/table/use-table.ts
1391
+ const useTable = () => {
1392
+ const context = useContext(TableContext);
1393
+ if (!context) throw new Error("useTable must be used within a TableProvider");
1394
+ return context;
1395
+ };
1396
+
1397
+ //#endregion
1398
+ //#region src/components/table/table.tsx
1399
+ const Table = ({ className, ...props }) => {
1400
+ const slots = useMemo(() => tableVariants(), []);
1401
+ return /* @__PURE__ */ jsx(TableContext, {
1402
+ value: { slots },
1403
+ children: /* @__PURE__ */ jsx("table", {
1404
+ className: cn$1(className, slots.root()),
1405
+ ...props
1406
+ })
1407
+ });
1408
+ };
1409
+ const TableHead = ({ className, ...props }) => {
1410
+ const { slots } = useTable();
1411
+ return /* @__PURE__ */ jsx("thead", {
1412
+ className: cn$1(className, slots.thead()),
1413
+ ...props
1414
+ });
1415
+ };
1416
+ const TableRow = ({ className, ...props }) => {
1417
+ const { slots } = useTable();
1418
+ return /* @__PURE__ */ jsx("tr", {
1419
+ className: cn$1(className, slots.tr()),
1420
+ ...props
1421
+ });
1422
+ };
1423
+ const TableHeaderCell = ({ className, ...props }) => {
1424
+ const { slots } = useTable();
1425
+ return /* @__PURE__ */ jsx("th", {
1426
+ className: cn$1(className, slots.th()),
1427
+ ...props
1428
+ });
1429
+ };
1430
+ const TableBody = ({ className, ...props }) => {
1431
+ const { slots } = useTable();
1432
+ return /* @__PURE__ */ jsx("tbody", {
1433
+ className: cn$1(className, slots.tbody()),
1434
+ ...props
1435
+ });
1436
+ };
1437
+ const TableDataCell = ({ className, ...props }) => {
1438
+ const { slots } = useTable();
1439
+ return /* @__PURE__ */ jsx("td", {
1440
+ className: cn$1(className, slots.td()),
1441
+ ...props
1442
+ });
1443
+ };
1444
+ const TableFooter = ({ className, ...props }) => {
1445
+ const { slots } = useTable();
1446
+ return /* @__PURE__ */ jsx("tfoot", {
1447
+ className: cn$1(className, slots.tfoot()),
1448
+ ...props
1449
+ });
1450
+ };
1451
+ Table.Root = Table;
1452
+ Table.Head = TableHead;
1453
+ Table.Row = TableRow;
1454
+ Table.HeaderCell = TableHeaderCell;
1455
+ Table.Body = TableBody;
1456
+ Table.DataCell = TableDataCell;
1457
+ Table.Footer = TableFooter;
1458
+ var table_default = Table;
1459
+
1124
1460
  //#endregion
1125
1461
  //#region src/components/tabs/tabs.context.ts
1126
1462
  const TabsContext = createContext(null);
@@ -1243,5 +1579,5 @@ const ToggleButton = ({ className, variant, size, ...props }) => {
1243
1579
  var toggle_button_default = ToggleButton;
1244
1580
 
1245
1581
  //#endregion
1246
- export { accordion_default as Accordion, avatar_default as Avatar, button_default as Button, button_group_default as ButtonGroup, card_default as Card, checkbox_default as Checkbox, checkbox_group_default as CheckboxGroup, chip_default as Chip, container_default as Container, dialog_default as Dialog, field_default as Field, form_default as Form, input_default as Input, label_default as Label, link_default as Link, list_default as List, menu_default as Menu, meter_default as Meter, navbar_default as Navbar, separator_default as Separator, switch_default as Switch, tabs_default as Tabs, text_default as Text, textarea_default as Textarea, toggle_button_default as ToggleButton, accordionVariants, avatarVariants, buttonGroupVariants, buttonVariants, cardVariants, checkboxGroupVariants, checkboxVariants, chipVariants, cn, containerVariants, dialogVariants, fieldVariants, formVariants, inputVariants, labelVariants, linkVariants, listVariants, menuVariants, meterVariants, navbarVariants, separatorVariants, switchVariants, tabsVariants, textVariants, textareaVariants, toggleButtonVariants };
1582
+ export { accordion_default as Accordion, alert_dialog_default as AlertDialog, avatar_default as Avatar, button_default as Button, button_group_default as ButtonGroup, card_default as Card, checkbox_default as Checkbox, checkbox_group_default as CheckboxGroup, chip_default as Chip, container_default as Container, dialog_default as Dialog, field_default as Field, form_default as Form, input_default as Input, label_default as Label, link_default as Link, list_default as List, menu_default as Menu, meter_default as Meter, navbar_default as Navbar, progress_default as Progress, separator_default as Separator, slider_default as Slider, switch_default as Switch, table_default as Table, tabs_default as Tabs, text_default as Text, textarea_default as Textarea, toggle_button_default as ToggleButton, accordionVariants, alertDialogVariants, avatarVariants, buttonGroupVariants, buttonVariants, cardVariants, checkboxGroupVariants, checkboxVariants, chipVariants, cn, containerVariants, dialogVariants, fieldVariants, formVariants, inputVariants, labelVariants, linkVariants, listVariants, menuVariants, meterVariants, navbarVariants, progressVariants, separatorVariants, sliderVariants, switchVariants, tableVariants, tabsVariants, textVariants, textareaVariants, toggleButtonVariants };
1247
1583
  //# sourceMappingURL=index.mjs.map