@fea-ui/react 0.0.1-canary.0 → 0.0.1

package/dist/index.cjs

@@ -318,6 +318,195 @@ var alert_dialog_default = Object.assign(AlertDialog, {
 	Viewport: AlertDialogViewport
 });
 
+//#endregion
+//#region src/components/autocomplete/autocomplete.context.ts
+const AutocompleteContext = (0, react.createContext)(null);
+
+//#endregion
+//#region src/components/autocomplete/autocomplete.variants.ts
+/** biome-ignore-all assist/source/useSortedKeys: <> */
+const autocompleteVariants = (0, tailwind_variants.tv)({ slots: {
+	root: "autcomplete",
+	input: "autocomplete__input",
+	trigger: "autocomplete__trigger",
+	icon: "autocomplete__icon",
+	clear: "autocomplete__clear",
+	value: "autocomplete__value",
+	portal: "autocomplete__portal",
+	backdrop: "autocomplete__backdrop",
+	positioner: "autocomplete__positioner",
+	popup: "autocomplete__popup",
+	arrow: "autocomplete__arrow",
+	status: "autocomplete__status",
+	empty: "autocomplete__empty",
+	list: "autocomplete__list",
+	row: "autocomplete__row",
+	item: "autocomplete__item",
+	separator: "autocomplete__separator",
+	group: "autocomplete__group",
+	groupLabel: "autocomplete__group-label"
+} });
+
+//#endregion
+//#region src/components/autocomplete/use-autocomplete.ts
+const useAutocomplete = () => {
+	const context = (0, react.useContext)(AutocompleteContext);
+	if (!context) throw new Error("useAutocomplete must be used within a AutocompleteProvider");
+	return context;
+};
+
+//#endregion
+//#region src/components/autocomplete/autocomplete.tsx
+const Autocomplete = ({ ...props }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AutocompleteContext, {
+		value: { slots: (0, react.useMemo)(() => autocompleteVariants(), []) },
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Autocomplete.Root, { ...props })
+	});
+};
+const AutocompleteTrigger = ({ className, ...props }) => {
+	const { slots } = useAutocomplete();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Autocomplete.Trigger, {
+		className: (0, tailwind_variants.cn)(slots.trigger(), className),
+		...props
+	});
+};
+const AutocompleteInput = ({ className, ...props }) => {
+	const { slots } = useAutocomplete();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Autocomplete.Input, {
+		className: (0, tailwind_variants.cn)(slots.input(), className),
+		...props
+	});
+};
+const AutocompleteIcon = ({ className, ...props }) => {
+	const { slots } = useAutocomplete();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Autocomplete.Icon, {
+		className: (0, tailwind_variants.cn)(slots.icon(), className),
+		...props
+	});
+};
+const AutocompleteClear = ({ className, ...props }) => {
+	const { slots } = useAutocomplete();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Autocomplete.Clear, {
+		className: (0, tailwind_variants.cn)(slots.clear(), className),
+		...props
+	});
+};
+const AutocompleteValue = ({ ...props }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Autocomplete.Value, { ...props });
+};
+const AutocompletePortal = ({ className, ...props }) => {
+	const { slots } = useAutocomplete();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Autocomplete.Portal, {
+		className: (0, tailwind_variants.cn)(slots.portal(), className),
+		...props
+	});
+};
+const AutocompleteBackdrop = ({ className, ...props }) => {
+	const { slots } = useAutocomplete();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Autocomplete.Backdrop, {
+		className: (0, tailwind_variants.cn)(slots.backdrop(), className),
+		...props
+	});
+};
+const AutocompletePositioner = ({ className, ...props }) => {
+	const { slots } = useAutocomplete();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Autocomplete.Positioner, {
+		className: (0, tailwind_variants.cn)(slots.positioner(), className),
+		...props
+	});
+};
+const AutocompletePopup = ({ className, ...props }) => {
+	const { slots } = useAutocomplete();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Autocomplete.Popup, {
+		className: (0, tailwind_variants.cn)(slots.popup(), className),
+		...props
+	});
+};
+const AutocompleteArrow = ({ className, ...props }) => {
+	const { slots } = useAutocomplete();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Autocomplete.Arrow, {
+		className: (0, tailwind_variants.cn)(slots.arrow(), className),
+		...props
+	});
+};
+const AutocompleteStatus = ({ className, ...props }) => {
+	const { slots } = useAutocomplete();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Autocomplete.Status, {
+		className: (0, tailwind_variants.cn)(slots.status(), className),
+		...props
+	});
+};
+const AutocompleteEmpty = ({ className, ...props }) => {
+	const { slots } = useAutocomplete();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Autocomplete.Empty, {
+		className: (0, tailwind_variants.cn)(slots.empty(), className),
+		...props
+	});
+};
+const AutocompleteList = ({ className, ...props }) => {
+	const { slots } = useAutocomplete();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Autocomplete.List, {
+		className: (0, tailwind_variants.cn)(slots.list(), className),
+		...props
+	});
+};
+const AutocompleteRow = ({ className, ...props }) => {
+	const { slots } = useAutocomplete();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Autocomplete.Row, {
+		className: (0, tailwind_variants.cn)(slots.row(), className),
+		...props
+	});
+};
+const AutocompleteItem = ({ className, ...props }) => {
+	const { slots } = useAutocomplete();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Autocomplete.Item, {
+		className: (0, tailwind_variants.cn)(slots.item(), className),
+		...props
+	});
+};
+const AutocompleteSeparator = ({ className, ...props }) => {
+	const { slots } = useAutocomplete();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Autocomplete.Separator, {
+		className: (0, tailwind_variants.cn)(slots.separator(), className),
+		...props
+	});
+};
+const AutocompleteGroup = ({ className, ...props }) => {
+	const { slots } = useAutocomplete();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Autocomplete.Group, {
+		className: (0, tailwind_variants.cn)(slots.group(), className),
+		...props
+	});
+};
+const AutocompleteGroupLabel = ({ className, ...props }) => {
+	const { slots } = useAutocomplete();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Autocomplete.GroupLabel, {
+		className: (0, tailwind_variants.cn)(slots.groupLabel(), className),
+		...props
+	});
+};
+var autocomplete_default = Object.assign(Autocomplete, {
+	Arrow: AutocompleteArrow,
+	Backdrop: AutocompleteBackdrop,
+	Clear: AutocompleteClear,
+	Empty: AutocompleteEmpty,
+	Group: AutocompleteGroup,
+	GroupLabel: AutocompleteGroupLabel,
+	Icon: AutocompleteIcon,
+	Input: AutocompleteInput,
+	Item: AutocompleteItem,
+	List: AutocompleteList,
+	Popup: AutocompletePopup,
+	Portal: AutocompletePortal,
+	Positioner: AutocompletePositioner,
+	Root: Autocomplete,
+	Row: AutocompleteRow,
+	Separator: AutocompleteSeparator,
+	Status: AutocompleteStatus,
+	Trigger: AutocompleteTrigger,
+	Value: AutocompleteValue
+});
+
 //#endregion
 //#region src/components/avatar/avatar.context.ts
 const AvatarContext = (0, react.createContext)(null);
@@ -847,7 +1036,7 @@ const ComboboxItemIndicator = ({ className, children, ...props }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Combobox.ItemIndicator, {
 		className: (0, tailwind_variants.cn)(slots.itemIndicator(), className),
 		...props,
-		children: children || /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, { className: "h-4 w-4" })
+		children: children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, {})
 	});
 };
 const ComboboxItem = ({ className, children, ...props }) => {
@@ -918,6 +1107,143 @@ const Container = ({ className, ...props }) => {
 };
 var container_default = Container;
 
+//#endregion
+//#region src/components/context-menu/context-menu.context.ts
+const ContextMenuContext = (0, react.createContext)(null);
+
+//#endregion
+//#region src/components/context-menu/context-menu.variants.ts
+/** biome-ignore-all assist/source/useSortedKeys: <> */
+const contextMenuVariants = (0, tailwind_variants.tv)({ slots: {
+	root: "context-menu",
+	trigger: "context-menu__trigger",
+	portal: "context-menu__portal",
+	backdrop: "context-menu__backdrop",
+	positioner: "context-menu__positioner",
+	popup: "context-menu__popup",
+	arrow: "context-menu__arrow",
+	item: "context-menu__item",
+	separator: "context-menu__separator",
+	group: "context-menu__group",
+	groupLabel: "context-menu__group-label",
+	submenu: "context-menu__submenu",
+	submenuTrigger: "context-menu__submenu-trigger"
+} });
+
+//#endregion
+//#region src/components/context-menu/use-context-menu.ts
+const useContextMenu = () => {
+	const context = (0, react.useContext)(ContextMenuContext);
+	if (!context) throw new Error("useContextMenu must be used within a ContextMenuProvider");
+	return context;
+};
+
+//#endregion
+//#region src/components/context-menu/context-menu.tsx
+const ContextMenu = ({ ...props }) => {
+	const slots = (0, react.useMemo)(() => contextMenuVariants(), []);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContextMenuContext.Provider, {
+		value: { slots },
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.ContextMenu.Root, { ...props })
+	});
+};
+const ContextMenuTrigger = ({ className, ...props }) => {
+	const { slots } = useContextMenu();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.ContextMenu.Trigger, {
+		className: (0, tailwind_variants.cn)(slots.trigger(), className),
+		...props
+	});
+};
+const ContextMenuPortal = ({ className, ...props }) => {
+	const { slots } = useContextMenu();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.ContextMenu.Portal, {
+		className: (0, tailwind_variants.cn)(slots.portal(), className),
+		...props
+	});
+};
+const ContextMenuBackdrop = ({ className, ...props }) => {
+	const { slots } = useContextMenu();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.ContextMenu.Backdrop, {
+		className: (0, tailwind_variants.cn)(slots.backdrop(), className),
+		...props
+	});
+};
+const ContextMenuPositioner = ({ className, ...props }) => {
+	const { slots } = useContextMenu();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.ContextMenu.Positioner, {
+		className: (0, tailwind_variants.cn)(slots.positioner(), className),
+		...props
+	});
+};
+const ContextMenuPopup = ({ className, ...props }) => {
+	const { slots } = useContextMenu();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.ContextMenu.Popup, {
+		className: (0, tailwind_variants.cn)(slots.popup(), className),
+		...props
+	});
+};
+const ContextMenuArrow = ({ className, ...props }) => {
+	const { slots } = useContextMenu();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.ContextMenu.Arrow, {
+		className: (0, tailwind_variants.cn)(slots.arrow(), className),
+		...props
+	});
+};
+const ContextMenuItem = ({ className, ...props }) => {
+	const { slots } = useContextMenu();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.ContextMenu.Item, {
+		className: (0, tailwind_variants.cn)(slots.item(), className),
+		...props
+	});
+};
+const ContextMenuSeparator = ({ className, ...props }) => {
+	const { slots } = useContextMenu();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.ContextMenu.Separator, {
+		className: (0, tailwind_variants.cn)(slots.separator(), className),
+		...props
+	});
+};
+const ContextMenuGroup = ({ className, ...props }) => {
+	const { slots } = useContextMenu();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.ContextMenu.Group, {
+		className: (0, tailwind_variants.cn)(slots.group(), className),
+		...props
+	});
+};
+const ContextMenuGroupLabel = ({ className, ...props }) => {
+	const { slots } = useContextMenu();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.ContextMenu.GroupLabel, {
+		className: (0, tailwind_variants.cn)(slots.groupLabel(), className),
+		...props
+	});
+};
+const ContextMenuSubmenu = ({ ...props }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.ContextMenu.SubmenuRoot, { ...props });
+};
+const ContextMenuSubmenuTrigger = ({ className, children, ...props }) => {
+	const { slots } = useContextMenu();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.ContextMenu.SubmenuTrigger, {
+		className: (0, tailwind_variants.cn)(slots.submenuTrigger(), className),
+		...props,
+		children
+	});
+};
+var context_menu_default = Object.assign(ContextMenu, {
+	Arrow: ContextMenuArrow,
+	Backdrop: ContextMenuBackdrop,
+	Group: ContextMenuGroup,
+	GroupLabel: ContextMenuGroupLabel,
+	Item: ContextMenuItem,
+	Popup: ContextMenuPopup,
+	Portal: ContextMenuPortal,
+	Positioner: ContextMenuPositioner,
+	Root: ContextMenu,
+	Separator: ContextMenuSeparator,
+	SubmenuRoot: ContextMenuSubmenu,
+	SubmenuTrigger: ContextMenuSubmenuTrigger,
+	Trigger: ContextMenuTrigger
+});
+
 //#endregion
 //#region src/components/dialog/dialog.context.ts
 const DialogContext = (0, react.createContext)(null);
@@ -1915,6 +2241,97 @@ var navigation_menu_default = Object.assign(NavigationMenu, {
 	Viewport: NavigationMenuViewport
 });
 
+//#endregion
+//#region src/components/number-field/number-field.context.ts
+const NumberFieldContext = (0, react.createContext)(null);
+
+//#endregion
+//#region src/components/number-field/number-field.variants.ts
+const numberFieldVariants = (0, tailwind_variants.tv)({ slots: {
+	decrement: "number-field__decrement",
+	group: "number-field__group",
+	increment: "number-field__increment",
+	input: "number-field__input",
+	root: "number-field",
+	scrubArea: "number-field__scrub-area",
+	scrubAreaCursor: "number-field__scrub-area-cursor"
+} });
+
+//#endregion
+//#region src/components/number-field/use-number-field.ts
+const useNumberField = () => {
+	const context = (0, react.useContext)(NumberFieldContext);
+	if (!context) throw new Error("useNumberField must be used within a NumberFieldProvider");
+	return context;
+};
+
+//#endregion
+//#region src/components/number-field/number-field.tsx
+const NumberField = ({ className, ...props }) => {
+	const slots = (0, react.useMemo)(() => numberFieldVariants(), []);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NumberFieldContext, {
+		value: { slots },
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.NumberField.Root, {
+			className: (0, tailwind_variants.cn)(className, slots.root()),
+			...props
+		})
+	});
+};
+const NumberFieldScrubArea = ({ className, ...props }) => {
+	const { slots } = useNumberField();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.NumberField.ScrubArea, {
+		className: (0, tailwind_variants.cn)(slots.scrubArea(), className),
+		...props
+	});
+};
+const NumberFieldGroup = ({ className, ...props }) => {
+	const { slots } = useNumberField();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.NumberField.Group, {
+		className: (0, tailwind_variants.cn)(slots.group(), className),
+		...props
+	});
+};
+const NumberFieldScrubAreaCursor = ({ className, children, ...props }) => {
+	const { slots } = useNumberField();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.NumberField.ScrubAreaCursor, {
+		className: (0, tailwind_variants.cn)(slots.scrubAreaCursor(), className),
+		...props,
+		children: children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.LucideChevronsLeftRight, {})
+	});
+};
+const NumberFieldDecrement = ({ className, children, ...props }) => {
+	const { slots } = useNumberField();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.NumberField.Decrement, {
+		className: (0, tailwind_variants.cn)(slots.decrement(), className),
+		...props,
+		children: children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.LucideMinus, {})
+	});
+};
+const NumberFieldInput = ({ className, ...props }) => {
+	const { slots } = useNumberField();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.NumberField.Input, {
+		className: (0, tailwind_variants.cn)(slots.input(), className),
+		...props
+	});
+};
+const NumberFieldIncrement = ({ className, children, ...props }) => {
+	const { slots } = useNumberField();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.NumberField.Increment, {
+		className: (0, tailwind_variants.cn)(slots.increment(), className),
+		...props,
+		children: children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.LucidePlus, {})
+	});
+};
+var number_field_default = Object.assign(NumberField, {
+	Decrement: NumberFieldDecrement,
+	Group: NumberFieldGroup,
+	Increment: NumberFieldIncrement,
+	Input: NumberFieldInput,
+	Root: NumberField,
+	ScrubArea: NumberFieldScrubArea,
+	ScrubAreaCursor: NumberFieldScrubAreaCursor
+});
+
 //#endregion
 //#region src/components/popover/popover.context.ts
 const PopoverContext = (0, react.createContext)(null);
@@ -2037,6 +2454,91 @@ var popover_default = Object.assign(Popover, {
 	Viewport: PopoverViewport
 });
 
+//#endregion
+//#region src/components/preview-card/preview-card.context.ts
+const PreviewCardContext = (0, react.createContext)(null);
+
+//#endregion
+//#region src/components/preview-card/preview-card.variants.ts
+/** biome-ignore-all assist/source/useSortedKeys: <> */
+const previewCardVariants = (0, tailwind_variants.tv)({ slots: {
+	root: "preview-card",
+	trigger: "preview-card__trigger",
+	portal: "preview-card__portal",
+	backdrop: "preview-card__backdrop",
+	positioner: "preview-card__positioner",
+	popup: "preview-card__popup",
+	arrow: "preview-card__arrow"
+} });
+
+//#endregion
+//#region src/components/preview-card/use-preview-card.ts
+const usePreviewCard = () => {
+	const context = (0, react.useContext)(PreviewCardContext);
+	if (!context) throw new Error("usePreviewCard must be used within a PreviewCardProvider");
+	return context;
+};
+
+//#endregion
+//#region src/components/preview-card/preview-card.tsx
+const PreviewCard = ({ ...props }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PreviewCardContext, {
+		value: { slots: (0, react.useMemo)(() => previewCardVariants(), []) },
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.PreviewCard.Root, { ...props })
+	});
+};
+const PreviewCardTrigger = ({ className, ...props }) => {
+	const { slots } = usePreviewCard();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.PreviewCard.Trigger, {
+		className: (0, tailwind_variants.cn)(slots.trigger(), className),
+		...props
+	});
+};
+const PreviewCardPortal = ({ className, ...props }) => {
+	const { slots } = usePreviewCard();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.PreviewCard.Portal, {
+		className: (0, tailwind_variants.cn)(slots.portal(), className),
+		...props
+	});
+};
+const PreviewCardBackdrop = ({ className, ...props }) => {
+	const { slots } = usePreviewCard();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.PreviewCard.Backdrop, {
+		className: (0, tailwind_variants.cn)(slots.backdrop(), className),
+		...props
+	});
+};
+const PreviewCardPositioner = ({ className, ...props }) => {
+	const { slots } = usePreviewCard();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.PreviewCard.Positioner, {
+		className: (0, tailwind_variants.cn)(slots.positioner(), className),
+		...props
+	});
+};
+const PreviewCardPopup = ({ className, ...props }) => {
+	const { slots } = usePreviewCard();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.PreviewCard.Popup, {
+		className: (0, tailwind_variants.cn)(slots.popup(), className),
+		...props
+	});
+};
+const PreviewCardArrow = ({ className, ...props }) => {
+	const { slots } = usePreviewCard();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.PreviewCard.Arrow, {
+		className: (0, tailwind_variants.cn)(slots.arrow(), className),
+		...props
+	});
+};
+var preview_card_default = Object.assign(PreviewCard, {
+	Arrow: PreviewCardArrow,
+	Backdrop: PreviewCardBackdrop,
+	Popup: PreviewCardPopup,
+	Portal: PreviewCardPortal,
+	Positioner: PreviewCardPositioner,
+	Root: PreviewCard,
+	Trigger: PreviewCardTrigger
+});
+
 //#endregion
 //#region src/components/progress/progress.context.ts
 const ProgressContext = (0, react.createContext)(null);
@@ -2186,6 +2688,78 @@ const RadioGroup = ({ className, ...props }) => {
 };
 var radio_group_default = RadioGroup;
 
+//#endregion
+//#region src/components/scroll-area/scroll-area.context.ts
+const ScrollAreaContext = (0, react.createContext)(null);
+
+//#endregion
+//#region src/components/scroll-area/scroll-area.variants.ts
+/** biome-ignore-all assist/source/useSortedKeys: <> */
+const scrollAreaVariants = (0, tailwind_variants.tv)({ slots: {
+	root: "scroll-area",
+	viewport: "scroll-area__viewport",
+	content: "scroll-area__content",
+	scrollbar: "scroll-area__scrollbar",
+	thumb: "scroll-area__thumb",
+	corner: "scroll-area__corner"
+} });
+
+//#endregion
+//#region src/components/scroll-area/use-scroll-area.ts
+const useScrollArea = () => {
+	const context = (0, react.useContext)(ScrollAreaContext);
+	if (!context) throw new Error("useScrollArea must be used within a ScrollAreaProvider");
+	return context;
+};
+
+//#endregion
+//#region src/components/scroll-area/scroll-area.tsx
+const ScrollArea = ({ className, ...props }) => {
+	const slots = (0, react.useMemo)(() => scrollAreaVariants(), []);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ScrollAreaContext.Provider, {
+		value: { slots },
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.ScrollArea.Root, {
+			className: (0, tailwind_variants.cn)(className, slots.root()),
+			...props
+		})
+	});
+};
+const ScrollAreaViewport = ({ className, ...props }) => {
+	const { slots } = useScrollArea();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.ScrollArea.Viewport, {
+		className: (0, tailwind_variants.cn)(slots.viewport(), className),
+		...props
+	});
+};
+const ScrollAreaContent = ({ className, ...props }) => {
+	const { slots } = useScrollArea();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.ScrollArea.Content, {
+		className: (0, tailwind_variants.cn)(slots.content(), className),
+		...props
+	});
+};
+const ScrollAreaScrollbar = ({ className, ...props }) => {
+	const { slots } = useScrollArea();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.ScrollArea.Scrollbar, {
+		className: (0, tailwind_variants.cn)(slots.scrollbar(), className),
+		...props
+	});
+};
+const ScrollAreaThumb = ({ className, ...props }) => {
+	const { slots } = useScrollArea();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.ScrollArea.Thumb, {
+		className: (0, tailwind_variants.cn)(slots.thumb(), className),
+		...props
+	});
+};
+var scroll_area_default = Object.assign(ScrollArea, {
+	Content: ScrollAreaContent,
+	Root: ScrollArea,
+	Scrollbar: ScrollAreaScrollbar,
+	Thumb: ScrollAreaThumb,
+	Viewport: ScrollAreaViewport
+});
+
 //#endregion
 //#region src/components/select/select.context.ts
 const SelectContext = (0, react.createContext)(null);
@@ -3027,6 +3601,7 @@ var tooltip_default = Object.assign(Tooltip, {
 exports.Accordion = accordion_default;
 exports.Alert = alert_default;
 exports.AlertDialog = alert_dialog_default;
+exports.Autocomplete = autocomplete_default;
 exports.Avatar = avatar_default;
 exports.Button = button_default;
 exports.ButtonGroup = button_group_default;
@@ -3037,6 +3612,7 @@ exports.Chip = chip_default;
 exports.Collapsible = collapsible_default;
 exports.Combobox = combobox_default;
 exports.Container = container_default;
+exports.ContextMenu = context_menu_default;
 exports.Dialog = dialog_default;
 exports.Drawer = drawer_default;
 exports.Field = field_default;
@@ -3051,10 +3627,13 @@ exports.Menu = menu_default;
 exports.Meter = meter_default;
 exports.Navbar = navbar_default;
 exports.NavigationMenu = navigation_menu_default;
+exports.NumberField = number_field_default;
 exports.Popover = popover_default;
+exports.PreviewCard = preview_card_default;
 exports.Progress = progress_default;
 exports.Radio = radio_default;
 exports.RadioGroup = radio_group_default;
+exports.ScrollArea = scroll_area_default;
 exports.Select = select_default;
 exports.Separator = separator_default;
 exports.Sidebar = sidebar_default;
@@ -3069,6 +3648,7 @@ exports.Tooltip = tooltip_default;
 exports.accordionVariants = accordionVariants;
 exports.alertDialogVariants = alertDialogVariants;
 exports.alertVariants = alertVariants;
+exports.autocompleteVariants = autocompleteVariants;
 exports.avatarVariants = avatarVariants;
 exports.buttonGroupVariants = buttonGroupVariants;
 exports.buttonVariants = buttonVariants;
@@ -3084,6 +3664,7 @@ Object.defineProperty(exports, 'cn', {
 });
 exports.comboboxVariants = comboboxVariants;
 exports.containerVariants = containerVariants;
+exports.contextMenuVariants = contextMenuVariants;
 exports.dialogVariants = dialogVariants;
 exports.drawerVariants = drawerVariants;
 exports.fieldVariants = fieldVariants;
@@ -3098,10 +3679,13 @@ exports.menuVariants = menuVariants;
 exports.meterVariants = meterVariants;
 exports.navbarVariants = navbarVariants;
 exports.navigationMenuVariants = navigationMenuVariants;
+exports.numberFieldVariants = numberFieldVariants;
 exports.popoverVariants = popoverVariants;
+exports.previewCardVariants = previewCardVariants;
 exports.progressVariants = progressVariants;
 exports.radioGroupVariants = radioGroupVariants;
 exports.radioVariants = radioVariants;
+exports.scrollAreaVariants = scrollAreaVariants;
 exports.selectVariants = selectVariants;
 exports.separatorVariants = separatorVariants;
 exports.sidebarVariants = sidebarVariants;