@fluid-app/ui-primitives 0.1.10 → 0.1.12

package/dist/index.cjs

@@ -234,7 +234,7 @@ function AlertDialogPortal({ ...props }) {
 function AlertDialogOverlay({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.AlertDialog.Overlay, {
 		"data-slot": "alert-dialog-overlay",
-		className: cn("data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50", className),
+		className: cn("data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-[#030712]/70", className),
 		...props
 	});
 }
@@ -740,7 +740,7 @@ function DialogClose({ ...props }) {
 function DialogOverlay({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dialog.Overlay, {
 		"data-slot": "dialog-overlay",
-		className: cn("data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-gray-900/70 backdrop-blur-sm", className),
+		className: cn("data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-[#030712]/70 backdrop-blur-sm", className),
 		...props
 	});
 }
@@ -1166,6 +1166,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, {
@@ -1283,7 +1313,7 @@ function SheetPortal(props) {
 	});
 }
 const SheetOverlay = react.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dialog.Overlay, {
-	className: cn("data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0 fixed inset-0 z-[1040] bg-black/80", className),
+	className: cn("data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0 fixed inset-0 z-[1040] bg-[#030712]/70", className),
 	...props,
 	ref
 }));
@@ -1707,6 +1737,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;