@fluid-app/ui-primitives 0.1.11 → 0.1.13

package/dist/index.cjs

@@ -371,6 +371,111 @@ function Badge({ className, variant = "default", asChild = false, ...props }) {
 		...props
 	});
 }
+const badgeColors = {
+	white: {
+		bg: "bg-white",
+		text: "text-gray-600",
+		dot: "fill-transparent"
+	},
+	gray: {
+		bg: "bg-gray-100",
+		text: "text-gray-600",
+		dot: "fill-gray-400"
+	},
+	red: {
+		bg: "bg-red-100",
+		text: "text-red-700",
+		dot: "fill-red-500"
+	},
+	yellow: {
+		bg: "bg-yellow-100",
+		text: "text-yellow-800",
+		dot: "fill-yellow-500"
+	},
+	orange: {
+		bg: "bg-orange-100",
+		text: "text-orange-700",
+		dot: "fill-orange-500"
+	},
+	green: {
+		bg: "bg-green-100",
+		text: "text-green-700",
+		dot: "fill-green-400"
+	},
+	blue: {
+		bg: "bg-blue-100",
+		text: "text-blue-700",
+		dot: "fill-blue-500"
+	},
+	indigo: {
+		bg: "bg-indigo-100",
+		text: "text-indigo-700",
+		dot: "fill-indigo-500"
+	},
+	purple: {
+		bg: "bg-purple-100",
+		text: "text-purple-700",
+		dot: "fill-purple-500"
+	},
+	pink: {
+		bg: "bg-pink-100",
+		text: "text-pink-700",
+		dot: "fill-pink-500"
+	},
+	amber: {
+		bg: "bg-amber-100",
+		text: "text-amber-700",
+		dot: "fill-amber-500"
+	},
+	cyan: {
+		bg: "bg-cyan-100",
+		text: "text-cyan-700",
+		dot: "fill-cyan-500"
+	},
+	teal: {
+		bg: "bg-teal-100",
+		text: "text-teal-700",
+		dot: "fill-teal-500"
+	},
+	emerald: {
+		bg: "bg-emerald-100",
+		text: "text-emerald-700",
+		dot: "fill-emerald-500"
+	}
+};
+const colorBadgeSizes = {
+	xs: "gap-x-1 rounded-lg px-1.5 py-0.5",
+	sm: "h-5 px-3 py-0.5",
+	md: "h-6 px-3 py-0.5",
+	lg: "h-8 px-3 py-0.5"
+};
+function StatusDot({ colorClass, size }) {
+	const d = size === "xs" ? 6 : 8;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+		className: cn("shrink-0", colorClass),
+		viewBox: "0 0 8 8",
+		width: d,
+		height: d,
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+			cx: 4,
+			cy: 4,
+			r: 3
+		})
+	});
+}
+function ColorBadge({ color = "gray", dot = false, size = "md", className, children, ...props }) {
+	const colors = badgeColors[color];
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		"data-slot": "color-badge",
+		className: cn("inline-flex items-center gap-x-1.5 rounded-xl text-xs font-normal whitespace-nowrap", colorBadgeSizes[size], color === "white" && "border border-gray-300", colors.bg, colors.text, className),
+		...props,
+		children: [dot && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatusDot, {
+			colorClass: colors.dot,
+			size
+		}), children]
+	});
+}
 //#endregion
 //#region src/components/Calendar.tsx
 const Calendar = Object.assign(function CalendarComponent({ className, classNames, showOutsideDays = true, ...props }) {
@@ -1069,7 +1174,7 @@ function Input({ className, type, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 		type,
 		"data-slot": "input",
-		className: cn("border-input selection:bg-primary selection:text-primary-foreground file:text-foreground placeholder:text-muted-foreground dark:bg-input/30 h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]", "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40", className),
+		className: cn("border-input selection:bg-primary selection:text-primary-foreground file:text-foreground placeholder:text-muted-foreground dark:bg-input/30 h-9 w-full min-w-0 rounded-md border bg-transparent py-1 pr-3 pl-3 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]", "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40", className),
 		...props
 	});
 }
@@ -1166,6 +1271,36 @@ function RadioGroupItem({ className, ...props }) {
 	});
 }
 //#endregion
+//#region src/components/ScrollArea.tsx
+function ScrollArea({ className, children, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(radix_ui.ScrollArea.Root, {
+		"data-slot": "scroll-area",
+		className: cn("relative", className),
+		...props,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.ScrollArea.Viewport, {
+				"data-slot": "scroll-area-viewport",
+				className: "focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1",
+				children
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ScrollBar, {}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.ScrollArea.Corner, {})
+		]
+	});
+}
+function ScrollBar({ className, orientation = "vertical", ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.ScrollArea.ScrollAreaScrollbar, {
+		"data-slot": "scroll-area-scrollbar",
+		orientation,
+		className: cn("flex touch-none p-px transition-colors select-none", orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent", orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent", className),
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.ScrollArea.ScrollAreaThumb, {
+			"data-slot": "scroll-area-thumb",
+			className: "bg-border relative flex-1 rounded-full"
+		})
+	});
+}
+//#endregion
 //#region src/components/Select.tsx
 function Select({ ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_select.Root, {
@@ -1653,6 +1788,7 @@ exports.ChartTooltipContent = ChartTooltipContent;
 exports.Collapsible = Collapsible;
 exports.CollapsibleContent = CollapsibleContent;
 exports.CollapsibleTrigger = CollapsibleTrigger;
+exports.ColorBadge = ColorBadge;
 exports.DatePicker = DatePicker;
 exports.Dialog = Dialog;
 exports.DialogClose = DialogClose;
@@ -1707,6 +1843,8 @@ exports.PopoverTrigger = PopoverTrigger;
 exports.PortalContainerProvider = PortalContainerProvider;
 exports.RadioGroup = RadioGroup;
 exports.RadioGroupItem = RadioGroupItem;
+exports.ScrollArea = ScrollArea;
+exports.ScrollBar = ScrollBar;
 exports.Select = Select;
 exports.SelectContent = SelectContent;
 exports.SelectGroup = SelectGroup;
@@ -1757,6 +1895,12 @@ exports.TooltipTrigger = TooltipTrigger;
 exports.badgeVariants = badgeVariants;
 exports.buttonVariants = buttonVariants;
 exports.cn = cn;
+Object.defineProperty(exports, "toast", {
+	enumerable: true,
+	get: function() {
+		return sonner.toast;
+	}
+});
 exports.toggleVariants = toggleVariants;
 exports.useFormField = useFormField;
 exports.useZodForm = useZodForm;