update API again

Author: jesse-winton

packages/frosted-ui/.storybook/stories/components/lightbox.stories.tsx

@@ -28,14 +28,18 @@ export const Default: Story = {
 		<Lightbox.Root>
 			<Flex gap="3">
 				<Lightbox.Triggers>
-					<Lightbox.Trigger
-						src="https://img-v2-prod.whop.com/hBOMqb1G4YIzR0jw7qnF0_IkXBoAOh78ybHZt_mKrT8/rs:fit:1280:720/el:1/dpr:2/aHR0cHM6Ly9hc3NldHMud2hvcC5jb20vdXBsb2Fkcy8yMDI0LTExLTEyL3VzZXJfMjMzNDg3XzAxMmY0ZDBkLWY1M2UtNGJhZS1iOTNhLWI3YTVhODhjMjA1Yy5wbmc"
-						alt="placeholder"
-					/>
-					<Lightbox.Trigger
-						src="https://img-v2-prod.whop.com/7nS_TeQmzSCCznok6NSF4dsz-UivsmFcSIejHh_diFU/rs:fit:1280:720/el:1/dpr:2/aHR0cHM6Ly9hc3NldHMud2hvcC5jb20vdXBsb2Fkcy8yMDI0LTExLTEyL3VzZXJfMjMzNDg3XzM1YmRkZjAwLTgzNDMtNDE4Yy1hYzYzLWZkY2VmYWU2YzBhYS5wbmc"
-						alt="placeholder"
-					/>
+					<Lightbox.Trigger>
+						<img
+							src="https://img-v2-prod.whop.com/hBOMqb1G4YIzR0jw7qnF0_IkXBoAOh78ybHZt_mKrT8/rs:fit:1280:720/el:1/dpr:2/aHR0cHM6Ly9hc3NldHMud2hvcC5jb20vdXBsb2Fkcy8yMDI0LTExLTEyL3VzZXJfMjMzNDg3XzAxMmY0ZDBkLWY1M2UtNGJhZS1iOTNhLWI3YTVhODhjMjA1Yy5wbmc"
+							alt="placeholder"
+						/>
+					</Lightbox.Trigger>
+					<Lightbox.Trigger>
+						<img
+							src="https://img-v2-prod.whop.com/7nS_TeQmzSCCznok6NSF4dsz-UivsmFcSIejHh_diFU/rs:fit:1280:720/el:1/dpr:2/aHR0cHM6Ly9hc3NldHMud2hvcC5jb20vdXBsb2Fkcy8yMDI0LTExLTEyL3VzZXJfMjMzNDg3XzM1YmRkZjAwLTgzNDMtNDE4Yy1hYzYzLWZkY2VmYWU2YzBhYS5wbmc"
+							alt="placeholder"
+						/>
+					</Lightbox.Trigger>
 				</Lightbox.Triggers>
 			</Flex>
 

packages/frosted-ui/src/components/lightbox.tsx

@@ -3,7 +3,7 @@
 import { ChevronLeft24, ChevronRight24, XMark24 } from "@frosted-ui/icons";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import classNames from "classnames";
-import React, { type ComponentPropsWithoutRef } from "react";
+import React, { Children, type ComponentPropsWithoutRef } from "react";
 import { getValidChildren } from "../helpers";
 import { useIsomorphicLayoutEffect } from "../helpers/use-isomorphic-layout-effect";
 import { Theme } from "../theme";
@@ -121,15 +121,16 @@ const LightboxTriggers: React.FC<LightboxTriggersProps> = ({
 
 type LightboxTriggerElement = React.ElementRef<typeof DialogPrimitive.Trigger>;
 
-interface LightboxTriggerProps extends ComponentPropsWithoutRef<"img"> {}
+interface LightboxTriggerProps
+	extends Omit<DialogPrimitive.DialogTriggerProps, "asChild"> {}
 
 const LightboxTrigger: React.FC<LightboxTriggerProps> = React.forwardRef<
 	LightboxTriggerElement,
 	LightboxTriggerProps
->((props, forwardedRef) => {
+>(({ children, ...props }, forwardedRef) => {
 	return (
-		<DialogPrimitive.Trigger ref={forwardedRef} asChild>
-			<img {...props} />
+		<DialogPrimitive.Trigger ref={forwardedRef} asChild {...props}>
+			{children}
 		</DialogPrimitive.Trigger>
 	);
 });