create lightbox component

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

@@ -0,0 +1,83 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+
+import { Flex, Lightbox } from "../../../src/components";
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta = {
+	title: "Components/Lightbox",
+	component: Lightbox.Content,
+	parameters: {
+		// Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
+		layout: "centered",
+	},
+	args: {
+		title: "Lightbox title",
+		description: "Lightbox description",
+	},
+	// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+	tags: ["autodocs"],
+} satisfies Meta<typeof Lightbox.Content>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Default: Story = {
+	render: ({ children, ...args }) => (
+		<Lightbox.Root>
+			<Flex gap="3">
+				<Lightbox.Triggers>
+					<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>
+
+			<Lightbox.Content {...args}>
+				<Lightbox.Items>
+					<Lightbox.Image
+						src="https://img-v2-prod.whop.com/hBOMqb1G4YIzR0jw7qnF0_IkXBoAOh78ybHZt_mKrT8/rs:fit:1280:720/el:1/dpr:2/aHR0cHM6Ly9hc3NldHMud2hvcC5jb20vdXBsb2Fkcy8yMDI0LTExLTEyL3VzZXJfMjMzNDg3XzAxMmY0ZDBkLWY1M2UtNGJhZS1iOTNhLWI3YTVhODhjMjA1Yy5wbmc"
+						alt="placeholder"
+					/>
+
+					<Lightbox.Image
+						src="https://img-v2-prod.whop.com/7nS_TeQmzSCCznok6NSF4dsz-UivsmFcSIejHh_diFU/rs:fit:1280:720/el:1/dpr:2/aHR0cHM6Ly9hc3NldHMud2hvcC5jb20vdXBsb2Fkcy8yMDI0LTExLTEyL3VzZXJfMjMzNDg3XzM1YmRkZjAwLTgzNDMtNDE4Yy1hYzYzLWZkY2VmYWU2YzBhYS5wbmc"
+						alt="placeholder"
+					/>
+					<Lightbox.Image
+						src="https://img-v2-prod.whop.com/45RrSIKml_7SfjaM5Zpr-MJ7RXHYATXoARw2Y3mi3eo/rs:fit:1280:720/el:1/dpr:2/aHR0cHM6Ly9hc3NldHMud2hvcC5jb20vdXBsb2Fkcy8yMDI0LTExLTEyL3VzZXJfMjMzNDg3X2FjY2I4MTFmLTJhNzgtNDJiZS1iNzQ1LTM0Yjk3MTNhN2Q5NS5wbmc"
+						alt="placeholder"
+					/>
+					<Lightbox.Image
+						src="https://img-v2-prod.whop.com/45RrSIKml_7SfjaM5Zpr-MJ7RXHYATXoARw2Y3mi3eo/rs:fit:1280:720/el:1/dpr:2/aHR0cHM6Ly9hc3NldHMud2hvcC5jb20vdXBsb2Fkcy8yMDI0LTExLTEyL3VzZXJfMjMzNDg3X2FjY2I4MTFmLTJhNzgtNDJiZS1iNzQ1LTM0Yjk3MTNhN2Q5NS5wbmc"
+						alt="placeholder"
+					/>
+					<Lightbox.Image
+						src="https://img-v2-prod.whop.com/k74M-g4J5gH-h3RrhCbNXmDw6JIIO6l2Mn_Sd0HIDvs/rs:fit:1280:720/el:1/dpr:2/aHR0cHM6Ly9hc3NldHMud2hvcC5jb20vdXBsb2Fkcy8yMDI0LTExLTEyL3VzZXJfMjMzNDg3XzFmMTU1NWNhLTRkM2EtNGVlOS04NWU1LTAzOGQxYzE2ZmU2Zi5wbmc"
+						alt="placeholder"
+					/>
+					<Lightbox.Image
+						src="https://img-v2-prod.whop.com/3QrIa6Leu4aOOcM6VwT0Op0ozR4ef-ZGOd7kDx61WfA/rs:fit:1280:720/el:1/dpr:2/aHR0cHM6Ly9hc3NldHMud2hvcC5jb20vdXBsb2Fkcy8yMDI0LTExLTEyL3VzZXJfMjMzNDg3XzliOWI1YWQ4LTcyMjUtNDM3OC1iYTQ1LTI0Y2FhNTE3YTQ4OS5wbmc"
+						alt="placeholder"
+					/>
+					<Lightbox.Video
+						src="https://upload.wikimedia.org/wikipedia/commons/transcoded/c/c0/Big_Buck_Bunny_4K.webm/Big_Buck_Bunny_4K.webm.1080p.vp9.webm"
+						poster="https://placehold.co/1920x1080"
+					/>
+				</Lightbox.Items>
+
+				<Lightbox.Thumbs />
+			</Lightbox.Content>
+		</Lightbox.Root>
+	),
+};

packages/frosted-ui/src/components/index.ts

@@ -78,6 +78,7 @@ export * from './dropdown-menu.props';
 export * as HoverCard from './hover-card';
 export * from './hover-card.props';
 export * as Accordion from './lab/accordion';
+export * as Lightbox from './lightbox';
 export * as Popover from './popover';
 export * from './popover.props';
 export * as Sheet from './sheet';
@@ -142,3 +143,4 @@ export * from './accessible-icon';
 export * from './portal';
 export * from './slot';
 export * from './visually-hidden';
+

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

@@ -0,0 +1,181 @@
+.fui-LightboxOverlay {
+	position: fixed;
+	inset: 0;
+	display: flex;
+
+	align-items: center;
+	overflow: hidden; /* Prevent body scrolling */
+	touch-action: none; /* Disable default touch interactions */
+
+	--color-overlay: rgba(0, 0, 0, 1);
+
+	&::after {
+		content: "";
+		position: absolute;
+		inset: 0;
+		background-color: var(--color-overlay);
+		z-index: 1;
+	}
+}
+
+.fui-LightboxContent {
+	display: flex;
+	flex-direction: column;
+}
+
+.fui-LightboxContainer {
+	position: relative;
+	display: flex;
+	flex: 1;
+	flex-direction: column;
+}
+
+.fui-LightboxItems {
+	z-index: 2;
+	display: flex;
+	align-items: center;
+	gap: 3rem;
+	position: relative;
+	scroll-snap-type: x mandatory;
+	overflow-x: scroll;
+	overflow-y: hidden;
+	overscroll-behavior-x: contain;
+	-webkit-overflow-scrolling: touch;
+	scrollbar-width: none;
+	-ms-overflow-style: none;
+	scroll-behavior: smooth;
+
+	@media screen and (max-width: 768px) {
+		gap: 1rem;
+	}
+
+	&::-webkit-scrollbar {
+		display: none;
+	}
+}
+
+.fui-LightboxItem {
+	position: relative;
+	z-index: 1;
+	flex: 0 0 100%;
+	display: flex;
+	scroll-snap-align: start;
+	max-height: 80vh;
+	height: 100%;
+	justify-content: center;
+
+	& > * {
+		max-width: 100%;
+		height: auto;
+		object-fit: contain;
+	}
+
+	&.fui-LightboxActiveItem {
+		scroll-snap-align: center;
+		scroll-snap-stop: always;
+	}
+}
+
+.fui-LightboxThumbs {
+	display: flex;
+	flex-wrap: nowrap;
+	z-index: 10;
+	flex: 1;
+	gap: 0.5rem;
+	margin: 0 auto;
+	cursor: pointer;
+	position: relative;
+	bottom: 0;
+	width: 100%;
+	padding: 20px 0px;
+	flex: 0 0 100%;
+	max-width: 90%;
+	scroll-snap-type: x mandatory;
+	overflow-x: scroll;
+	overflow-y: auto;
+	scroll-behavior: smooth;
+	overscroll-behavior-x: contain;
+	-webkit-overflow-scrolling: touch;
+	scrollbar-width: none;
+	-ms-overflow-style: none;
+	scrollbar-width: none;
+
+	@media screen and (min-width: 768px) {
+		max-width: 50%;
+	}
+}
+
+.fui-LightboxTrigger {
+	height: auto;
+padding: 0;
+	& > * {
+		object-fit: cover;
+		height: 100%;
+		width: 100%;
+	}
+}
+
+.fui-LightboxThumb {
+	height: auto;
+	flex: 0 0 100px;
+	aspect-ratio: 3 / 2;
+	padding: 0;
+	cursor: pointer;
+	transition: all ease-in-out 200ms;
+	border-radius: 8px;
+	overflow: hidden;
+	outline-color: transparent;
+	will-change: transform;
+
+	&.fui-LightboxActiveThumb {
+		margin: 0 10px;
+		outline: 1px solid var(--color-focus-root);
+		outline-offset: 2px;
+		transform: scale(1.05);
+	}
+
+	& > * {
+		object-fit: cover;
+		height: 100%;
+		width: 100%;
+	}
+}
+
+.fui-LightboxClose {
+	position: absolute;
+	z-index: 10;
+	color: #fff;
+	cursor: pointer;
+	right: 12px;
+	top: 12px;
+}
+
+.fui-LightboxPrevButton {
+	left: 0px;
+}
+
+.fui-LightboxNextButton {
+	right: 0px;
+}
+
+.fui-LightboxNavButton {
+	position: absolute;
+	top: 50%;
+	transform: translateY(-50%);
+	z-index: 100;
+	color: #fff;
+	cursor: pointer;
+}
+
+.fui-LightboxTitle,
+.fui-LightboxDescription {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	white-space: nowrap;
+	border-width: 0;
+}