@fea-ui/react 0.0.0-canary.4 → 0.0.0-canary.5

package/dist/index.cjs

@@ -1752,12 +1752,19 @@ const SelectContext = (0, react.createContext)(null);
 //#endregion
 //#region src/components/select/select.variants.ts
 const selectVariants = (0, tailwind_variants.tv)({ slots: {
-	control: "select__control",
-	description: "select__description",
-	error: "select__error",
-	label: "select__label",
-	option: "select__option",
-	root: "select"
+	group: "select__group",
+	groupLabel: "select__group-label",
+	icon: "select__icon",
+	item: "select__item",
+	itemIndicator: "select__item-indicator",
+	popup: "select__popup",
+	positioner: "select__positioner",
+	root: "select",
+	scrollDownArrow: "select__scroll-down-arrow",
+	scrollUpArrow: "select__scroll-up-arrow",
+	separator: "select__separator",
+	trigger: "select__trigger",
+	value: "select__value"
 } });
 
 //#endregion
@@ -1770,65 +1777,109 @@ const useSelect = () => {
 
 //#endregion
 //#region src/components/select/select.tsx
-const Select = ({ className, ...props }) => {
+const Select = ({ ...props }) => {
 	const slots = (0, react.useMemo)(() => selectVariants(), []);
-	const generatedId = (0, react.useId)();
-	const inputId = props.id || generatedId;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectContext.Provider, {
-		value: {
-			id: inputId,
-			slots
-		},
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: (0, tailwind_variants.cn)(className, slots.root()),
-			...props
-		})
+		value: { slots },
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Select.Root, { ...props })
 	});
 };
-const SelectLabel = ({ className, ...props }) => {
-	const { slots, id } = useSelect();
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
-		className: (0, tailwind_variants.cn)(className, slots.label()),
-		htmlFor: id,
+const SelectTrigger = ({ className, children, ...props }) => {
+	const { slots } = useSelect();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_base_ui_react.Select.Trigger, {
+		className: (0, tailwind_variants.cn)(slots.trigger(), className),
+		...props,
+		children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Select.Icon, {
+			className: slots.icon(),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDown, {})
+		})]
+	});
+};
+const SelectValue = ({ className, ...props }) => {
+	const { slots } = useSelect();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Select.Value, {
+		className: (0, tailwind_variants.cn)(slots.value(), className),
 		...props
 	});
 };
-const SelectControl = ({ className, ...props }) => {
-	const { slots, id } = useSelect();
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("select", {
-		className: (0, tailwind_variants.cn)(className, slots.control()),
-		id,
+const SelectPortal = ({ ...props }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Select.Portal, { ...props });
+};
+const SelectPositioner = ({ className, ...props }) => {
+	const { slots } = useSelect();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Select.Positioner, {
+		className: (0, tailwind_variants.cn)(slots.positioner(), className),
 		...props
 	});
 };
-const SelectOption = ({ className, ...props }) => {
+const SelectPopup = ({ className, ...props }) => {
 	const { slots } = useSelect();
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
-		className: (0, tailwind_variants.cn)(className, slots.option()),
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Select.Popup, {
+		className: (0, tailwind_variants.cn)(slots.popup(), className),
 		...props
 	});
 };
-const SelectDescription = ({ className, ...props }) => {
+const SelectItem = ({ className, children, ...props }) => {
 	const { slots } = useSelect();
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-		className: (0, tailwind_variants.cn)(className, slots.description()),
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_base_ui_react.Select.Item, {
+		className: (0, tailwind_variants.cn)(slots.item(), className),
+		...props,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Select.ItemIndicator, {
+			className: slots.itemIndicator(),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, { className: "h-4 w-4" })
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Select.ItemText, { children })]
+	});
+};
+const SelectGroup = ({ className, ...props }) => {
+	const { slots } = useSelect();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Select.Group, {
+		className: (0, tailwind_variants.cn)(slots.group(), className),
 		...props
 	});
 };
-const SelectError = ({ className, ...props }) => {
+const SelectGroupLabel = ({ className, ...props }) => {
 	const { slots } = useSelect();
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-		className: (0, tailwind_variants.cn)(className, slots.error()),
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Select.GroupLabel, {
+		className: (0, tailwind_variants.cn)(slots.groupLabel(), className),
+		...props
+	});
+};
+const SelectSeparator = ({ className, ...props }) => {
+	const { slots } = useSelect();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Select.Separator, {
+		className: (0, tailwind_variants.cn)(slots.separator(), className),
 		...props
 	});
 };
+const SelectScrollUpArrow = ({ className, ...props }) => {
+	const { slots } = useSelect();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Select.ScrollUpArrow, {
+		className: (0, tailwind_variants.cn)(slots.scrollUpArrow(), className),
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronUp, { className: "h-4 w-4" })
+	});
+};
+const SelectScrollDownArrow = ({ className, ...props }) => {
+	const { slots } = useSelect();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Select.ScrollDownArrow, {
+		className: (0, tailwind_variants.cn)(slots.scrollDownArrow(), className),
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDown, { className: "h-4 w-4" })
+	});
+};
 var select_default = Object.assign(Select, {
-	Control: SelectControl,
-	Description: SelectDescription,
-	Error: SelectError,
-	Label: SelectLabel,
-	Option: SelectOption,
-	Root: Select
+	Group: SelectGroup,
+	GroupLabel: SelectGroupLabel,
+	Item: SelectItem,
+	Popup: SelectPopup,
+	Portal: SelectPortal,
+	Positioner: SelectPositioner,
+	Root: Select,
+	ScrollDownArrow: SelectScrollDownArrow,
+	ScrollUpArrow: SelectScrollUpArrow,
+	Separator: SelectSeparator,
+	Trigger: SelectTrigger,
+	Value: SelectValue
 });
 
 //#endregion
@@ -2061,12 +2112,12 @@ const spinnerVariants = (0, tailwind_variants.tv)({
 
 //#endregion
 //#region src/components/spinner/spinner.tsx
-const Spinner = ({ className, children, size, variant, ...props }) => {
+const Spinner = ({ className, size, variant, asChild, ...props }) => {
 	const styles = spinnerVariants({
 		size,
 		variant
 	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.LucideLoaderCircle, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.LucideLoader, {
 		"aria-label": "Loading",
 		className: (0, tailwind_variants.cn)(className, styles),
 		role: "status",
@@ -2240,8 +2291,37 @@ const useTabs = () => {
 //#region src/components/tabs/tabs.tsx
 const Tabs = ({ className, ...props }) => {
 	const slots = (0, react.useMemo)(() => tabsVariants(), []);
+	const [listRef, setListRef] = react.default.useState(null);
+	react.default.useEffect(() => {
+		if (!listRef) return;
+		const updateIndicator = () => {
+			const activeTab = listRef.querySelector("[data-state=\"active\"]");
+			if (activeTab) {
+				const listRect = listRef.getBoundingClientRect();
+				const tabRect = activeTab.getBoundingClientRect();
+				listRef.style.setProperty("--active-tab-width", `${tabRect.width}px`);
+				listRef.style.setProperty("--active-tab-left", `${tabRect.left - listRect.left + tabRect.width / 2}px`);
+			}
+		};
+		updateIndicator();
+		const observer = new MutationObserver(updateIndicator);
+		observer.observe(listRef, {
+			attributeFilter: ["data-state"],
+			attributes: true,
+			subtree: true
+		});
+		window.addEventListener("resize", updateIndicator);
+		return () => {
+			observer.disconnect();
+			window.removeEventListener("resize", updateIndicator);
+		};
+	}, [listRef]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TabsContext.Provider, {
-		value: { slots },
+		value: {
+			listRef,
+			setListRef,
+			slots
+		},
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Tabs.Root, {
 			className: (0, tailwind_variants.cn)(className, slots.root()),
 			...props
@@ -2249,9 +2329,10 @@ const Tabs = ({ className, ...props }) => {
 	});
 };
 const TabsList = ({ className, ...props }) => {
-	const { slots } = useTabs();
+	const { slots, setListRef } = useTabs();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Tabs.List, {
 		className: (0, tailwind_variants.cn)(slots.list(), className),
+		ref: setListRef,
 		...props
 	});
 };
@@ -2304,6 +2385,249 @@ const ToggleButton = ({ className, variant, size, ...props }) => {
 };
 var toggle_button_default = ToggleButton;
 
+//#endregion
+//#region src/components/tooltip/tooltip.context.ts
+const TooltipContext = (0, react.createContext)(null);
+
+//#endregion
+//#region src/components/tooltip/tooltip.variants.ts
+const tooltipVariants = (0, tailwind_variants.tv)({ slots: {
+	arrow: "tooltip__arrow",
+	popup: "tooltip__popup",
+	portal: "tooltip__portal",
+	positioner: "tooltip__positioner",
+	root: "tooltip",
+	trigger: "tooltip__trigger"
+} });
+
+//#endregion
+//#region src/components/tooltip/use-tooltip.ts
+const useTooltip = () => {
+	const context = (0, react.useContext)(TooltipContext);
+	if (!context) throw new Error("useTooltip must be used within a TooltipProvider");
+	return context;
+};
+
+//#endregion
+//#region src/components/tooltip/tooltip.tsx
+const Tooltip = ({ ...props }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipContext, {
+		value: { slots: (0, react.useMemo)(() => tooltipVariants({}), []) },
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Tooltip.Root, { ...props })
+	});
+};
+const TooltipTrigger = ({ className, ...props }) => {
+	const { slots } = useTooltip();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Tooltip.Trigger, {
+		className: (0, tailwind_variants.cn)(className, slots.trigger()),
+		...props
+	});
+};
+const TooltipPortal = ({ className, ...props }) => {
+	const { slots } = useTooltip();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Tooltip.Portal, {
+		className: (0, tailwind_variants.cn)(className, slots.portal()),
+		...props
+	});
+};
+const TooltipPositioner = ({ className, ...props }) => {
+	const { slots } = useTooltip();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Tooltip.Positioner, {
+		className: (0, tailwind_variants.cn)(className, slots.positioner()),
+		...props
+	});
+};
+const TooltipPopup = ({ className, ...props }) => {
+	const { slots } = useTooltip();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Tooltip.Popup, {
+		className: (0, tailwind_variants.cn)(className, slots.popup()),
+		...props
+	});
+};
+const TooltipArrow = ({ className, ...props }) => {
+	const { slots } = useTooltip();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Tooltip.Arrow, {
+		className: (0, tailwind_variants.cn)(className, slots.arrow()),
+		...props
+	});
+};
+var tooltip_default = Object.assign(Tooltip, {
+	Arrow: TooltipArrow,
+	Popup: TooltipPopup,
+	Portal: TooltipPortal,
+	Positioner: TooltipPositioner,
+	Provider: _base_ui_react.Tooltip.Provider,
+	Root: Tooltip,
+	Trigger: TooltipTrigger
+});
+
+//#endregion
+//#region src/components/toast/toast.context.ts
+const ToastContext = (0, react.createContext)(null);
+
+//#endregion
+//#region src/components/toast/toast.variants.ts
+const toastVariants = (0, tailwind_variants.tv)({
+	slots: {
+		action: "toast__action",
+		close: "toast__close",
+		description: "toast__description",
+		root: "toast group",
+		title: "toast__title",
+		viewport: "toast__viewport"
+	},
+	variants: { variant: {
+		default: { root: "bg-background text-foreground" },
+		destructive: { root: "destructive group border-danger bg-danger text-danger-foreground" }
+	} },
+	defaultVariants: { variant: "default" }
+});
+
+//#endregion
+//#region src/components/toast/use-toast.ts
+const useToast$1 = () => {
+	const context = (0, react.useContext)(ToastContext);
+	if (!context) throw new Error("useToast must be used within a ToastProvider");
+	return context;
+};
+
+//#endregion
+//#region src/components/toast/toast.tsx
+const Toast = ({ className, variant, ...props }) => {
+	const slots = (0, react.useMemo)(() => toastVariants({ variant }), [variant]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToastContext, {
+		value: { slots },
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Toast.Root, {
+			className: (0, tailwind_variants.cn)(className, slots.root()),
+			...props
+		})
+	});
+};
+const ToastTitle = ({ className, ...props }) => {
+	const { slots } = useToast$1();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Toast.Title, {
+		className: (0, tailwind_variants.cn)(className, slots.title()),
+		...props
+	});
+};
+const ToastDescription = ({ className, ...props }) => {
+	const { slots } = useToast$1();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Toast.Description, {
+		className: (0, tailwind_variants.cn)(className, slots.description()),
+		...props
+	});
+};
+const ToastAction = ({ className, ...props }) => {
+	const { slots } = useToast$1();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Toast.Action, {
+		className: (0, tailwind_variants.cn)(className, slots.action()),
+		...props
+	});
+};
+const ToastClose = ({ className, children, ...props }) => {
+	const { slots } = useToast$1();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Toast.Close, {
+		className: (0, tailwind_variants.cn)(className, slots.close()),
+		...props,
+		children: children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.LucideX, { className: "size-4" })
+	});
+};
+const ToastProvider = _base_ui_react.Toast.Provider;
+const ToastPortal = _base_ui_react.Toast.Portal;
+const ToastViewport = ({ className, ...props }) => {
+	const { viewport } = toastVariants();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Toast.Viewport, {
+		className: (0, tailwind_variants.cn)(className, viewport()),
+		...props
+	});
+};
+var toast_default = Object.assign(Toast, {
+	Action: ToastAction,
+	Close: ToastClose,
+	Description: ToastDescription,
+	Provider: ToastProvider,
+	Portal: ToastPortal,
+	Root: Toast,
+	Title: ToastTitle,
+	Viewport: ToastViewport
+});
+
+//#endregion
+//#region src/components/toast/index.ts
+const useToast = _base_ui_react.Toast.useToastManager;
+
+//#endregion
+//#region src/components/collapsible/collapsible.context.ts
+const CollapsibleContext = (0, react.createContext)(null);
+
+//#endregion
+//#region src/components/collapsible/collapsible.variants.ts
+const collapsibleVariants = (0, tailwind_variants.tv)({ slots: {
+	content: "collapsible__content",
+	panel: "collapsible__panel",
+	root: "collapsible",
+	trigger: "collapsible__trigger",
+	triggerIcon: "collapsible__trigger-icon"
+} });
+
+//#endregion
+//#region src/components/collapsible/use-collapsible.ts
+const useCollapsible = () => {
+	const context = (0, react.useContext)(CollapsibleContext);
+	if (!context) throw new Error("useCollapsible must be used within a CollapsibleProvider");
+	return context;
+};
+
+//#endregion
+//#region src/components/collapsible/collapsible.tsx
+const Collapsible = ({ className, ...props }) => {
+	const slots = (0, react.useMemo)(() => collapsibleVariants({}), []);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CollapsibleContext, {
+		value: { slots },
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Collapsible.Root, {
+			className: (0, tailwind_variants.cn)(className, slots.root()),
+			...props
+		})
+	});
+};
+const CollapsibleTrigger = ({ className, children, ...props }) => {
+	const { slots } = useCollapsible();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Collapsible.Trigger, {
+		className: (0, tailwind_variants.cn)(className, slots.trigger()),
+		...props,
+		children
+	});
+};
+const CollapsibleTriggerIcon = ({ className, ...props }) => {
+	const { slots } = useCollapsible();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.LucideChevronDown, {
+		className: (0, tailwind_variants.cn)(className, slots.triggerIcon()),
+		...props
+	});
+};
+const CollapsiblePanel = ({ className, children, ...props }) => {
+	const { slots } = useCollapsible();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Collapsible.Panel, {
+		className: (0, tailwind_variants.cn)(className, slots.panel()),
+		...props,
+		children
+	});
+};
+const CollapsibleContent = ({ className, ...props }) => {
+	const { slots } = useCollapsible();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, tailwind_variants.cn)(className, slots.content()),
+		...props
+	});
+};
+var collapsible_default = Object.assign(Collapsible, {
+	Content: CollapsibleContent,
+	Panel: CollapsiblePanel,
+	Root: Collapsible,
+	Trigger: CollapsibleTrigger,
+	TriggerIcon: CollapsibleTriggerIcon
+});
+
 //#endregion
 exports.Accordion = accordion_default;
 exports.Alert = alert_default;
@@ -2315,6 +2639,7 @@ exports.Card = card_default;
 exports.Checkbox = checkbox_default;
 exports.CheckboxGroup = checkbox_group_default;
 exports.Chip = chip_default;
+exports.Collapsible = collapsible_default;
 exports.Container = container_default;
 exports.Dialog = dialog_default;
 exports.Drawer = drawer_default;
@@ -2341,7 +2666,9 @@ exports.Spinner = spinner_default;
 exports.Switch = switch_default;
 exports.Table = table_default;
 exports.Tabs = tabs_default;
+exports.Toast = toast_default;
 exports.ToggleButton = toggle_button_default;
+exports.Tooltip = tooltip_default;
 exports.accordionVariants = accordionVariants;
 exports.alertDialogVariants = alertDialogVariants;
 exports.alertVariants = alertVariants;
@@ -2385,4 +2712,5 @@ exports.switchVariants = switchVariants;
 exports.tableVariants = tableVariants;
 exports.tabsVariants = tabsVariants;
 exports.toggleButtonVariants = toggleButtonVariants;
+exports.useToast = useToast;
 //# sourceMappingURL=index.cjs.map