@moduix/react 1.1.0

package/dist/components/lightbox/Lightbox.css

@@ -0,0 +1,242 @@
+@layer ui.components {
+  .Jmwb8W_trigger {
+    cursor: zoom-in;
+
+    &:focus-visible {
+      outline: var(--lightbox-trigger-focus-ring-width, var(--border-width-md)) solid
+        var(--lightbox-trigger-focus-ring-color, var(--color-ring));
+      outline-offset: var(--lightbox-trigger-focus-ring-offset, 2px);
+    }
+  }
+
+  .Jmwb8W_backdrop {
+    z-index: calc(var(--z-backdrop) + var(--layer-index, 0));
+    background-color: var(--lightbox-backdrop-bg, var(--backdrop-bg, var(--color-overlay)));
+    min-height: 100dvh;
+    backdrop-filter: var(--backdrop-filter, blur(var(--lightbox-backdrop-blur, 4px)));
+    position: fixed;
+    inset: 0;
+
+    &[data-state="open"] {
+      animation: Jmwb8W_lightbox-backdrop-in var(--lightbox-backdrop-transition, var(--transition-default));
+    }
+
+    &[data-state="closed"] {
+      animation: Jmwb8W_lightbox-backdrop-out
+        var(--lightbox-backdrop-transition, var(--transition-default));
+    }
+  }
+
+  .Jmwb8W_positioner {
+    box-sizing: border-box;
+    z-index: calc(var(--z-modal) + var(--layer-index, 0));
+    overscroll-behavior: contain;
+    padding: var(--lightbox-positioner-padding, var(--spacing-4));
+    place-items: center;
+    display: grid;
+    position: fixed;
+    inset: 0;
+    overflow: hidden;
+  }
+
+  .Jmwb8W_content {
+    box-sizing: border-box;
+    gap: var(--lightbox-content-gap, var(--spacing-3));
+    width: fit-content;
+    max-width: min(var(--lightbox-content-max-width, 80vw), calc(100vw - var(--spacing-8)));
+    max-height: min(var(--lightbox-content-max-height, 80dvh), calc(100dvh - var(--spacing-8)));
+    background: none;
+    border: 0;
+    outline: 0;
+    display: grid;
+    position: relative;
+
+    &[data-state="open"] {
+      animation: Jmwb8W_lightbox-content-in var(--lightbox-transition, .22s ease);
+    }
+
+    &[data-state="closed"] {
+      animation: Jmwb8W_lightbox-content-out var(--lightbox-transition, .22s ease);
+    }
+  }
+
+  .Jmwb8W_title {
+    color: var(--lightbox-title-color, var(--color-foreground));
+    font-size: var(--lightbox-title-font-size, var(--text-md));
+    font-weight: var(--lightbox-title-font-weight, var(--weight-semibold));
+    line-height: var(--lightbox-title-line-height, var(--line-height-text-md));
+    margin: 0;
+  }
+
+  .Jmwb8W_description {
+    color: var(--lightbox-description-color, var(--color-muted-foreground));
+    font-size: var(--lightbox-description-font-size, var(--text-sm));
+    line-height: var(--lightbox-description-line-height, var(--line-height-text-sm));
+    margin: 0;
+  }
+
+  .Jmwb8W_header {
+    gap: var(--lightbox-header-gap, var(--spacing-1));
+    display: grid;
+  }
+
+  .Jmwb8W_body {
+    gap: var(--lightbox-body-gap, var(--spacing-3));
+    display: grid;
+  }
+
+  .Jmwb8W_footer {
+    align-items: center;
+    justify-content: var(--lightbox-footer-justify, flex-end);
+    gap: var(--lightbox-footer-gap, var(--spacing-2));
+    color: var(--lightbox-footer-color, var(--color-muted-foreground));
+    font-size: var(--lightbox-footer-font-size, var(--text-sm));
+    line-height: var(--lightbox-footer-line-height, var(--line-height-text-sm));
+    display: flex;
+  }
+
+  .Jmwb8W_image {
+    max-width: min(var(--lightbox-media-max-width, 80vw), 100%);
+    max-height: min(var(--lightbox-media-max-height, 80dvh), 100%);
+    object-fit: contain;
+    border-radius: var(--lightbox-media-radius, var(--radius-md));
+    box-shadow: var(--lightbox-media-shadow, var(--shadow-lg));
+    user-select: none;
+    display: block;
+
+    &[data-close-on-click] {
+      cursor: zoom-out;
+    }
+  }
+
+  .Jmwb8W_gallery {
+    --carousel-gap: var(--lightbox-gallery-gap, var(--spacing-4));
+    width: auto;
+    max-width: min(var(--lightbox-gallery-max-width, 72rem),
+      calc(100vw - var(--lightbox-positioner-padding, var(--spacing-4)) * 2));
+    justify-self: center;
+
+    & [data-slot="carousel-control"] {
+      align-items: center;
+    }
+
+    & [data-slot="carousel-item-group"] {
+      aspect-ratio: var(--lightbox-gallery-aspect-ratio, 16 / 10);
+      max-height: min(var(--lightbox-gallery-track-max-height, 68dvh),
+        var(--lightbox-media-max-height, 80dvh));
+      background: var(--lightbox-gallery-track-bg, color-mix(in oklab, black 88%, var(--color-background) 12%));
+    }
+
+    & [data-slot="carousel-item"] {
+      place-items: center;
+      height: 100%;
+      display: grid;
+
+      & img, & video {
+        object-fit: contain;
+        border-radius: var(--lightbox-media-radius, var(--radius-md));
+        user-select: none;
+        width: 100%;
+        height: 100%;
+        display: block;
+      }
+    }
+
+    & [data-slot="carousel-indicator-group"] {
+      flex-wrap: wrap;
+      width: fit-content;
+      max-width: 100%;
+      margin-inline: auto;
+    }
+
+    & [data-slot="carousel-indicator"]:has(img) {
+      width: var(--lightbox-gallery-thumbnail-width, 5rem);
+      height: var(--lightbox-gallery-thumbnail-height, 3rem);
+      border: var(--border-width-sm) solid transparent;
+      border-radius: var(--lightbox-gallery-thumbnail-radius, var(--radius-md));
+      opacity: var(--lightbox-gallery-thumbnail-opacity, .65);
+      transition: border-color var(--transition-fast),
+        opacity var(--transition-fast),
+        transform var(--transition-fast);
+      background: none;
+      overflow: hidden;
+
+      &:hover {
+        opacity: var(--lightbox-gallery-thumbnail-opacity-hover, .9);
+      }
+
+      &[data-current] {
+        width: var(--lightbox-gallery-thumbnail-width, 5rem);
+        border-color: var(--lightbox-gallery-thumbnail-border-color, var(--color-primary));
+        opacity: 1;
+        background: none;
+        transform: translateY(-1px);
+      }
+
+      & img {
+        object-fit: cover;
+        width: 100%;
+        height: 100%;
+        display: block;
+      }
+    }
+  }
+
+  .Jmwb8W_closeIcon {
+    --close-button-size: var(--lightbox-close-icon-size, 2rem);
+    --close-button-radius: var(--lightbox-close-icon-radius, var(--radius-sm));
+    --close-button-icon-size: var(--lightbox-close-icon-glyph-size, .875rem);
+    --close-button-color: var(--lightbox-close-icon-color, var(--color-foreground));
+    --close-button-color-hover: var(--lightbox-close-icon-color-hover, var(--color-foreground));
+    --close-button-bg: var(--lightbox-close-icon-bg, var(--color-background));
+    --close-button-bg-hover: var(--lightbox-close-icon-bg-hover, var(--color-muted));
+    --close-button-focus-ring-color: var(--lightbox-close-icon-focus-ring-color, var(--color-ring));
+    z-index: calc(var(--z-modal) + var(--layer-index, 0) + 1);
+    opacity: 0;
+    pointer-events: none;
+    visibility: hidden;
+    border: 0;
+    padding: 0;
+    position: fixed;
+    inset-block-start: var(--lightbox-close-icon-inset-block-start, var(--spacing-4));
+    inset-inline-end: var(--lightbox-close-icon-inset-inline-end, var(--spacing-4));
+
+    &[data-state="open"] {
+      opacity: 1;
+      pointer-events: auto;
+      visibility: visible;
+    }
+  }
+
+  @keyframes Jmwb8W_lightbox-backdrop-in {
+    from {
+      opacity: var(--lightbox-backdrop-starting-opacity, 0);
+      backdrop-filter: var(--lightbox-backdrop-starting-blur, none);
+    }
+  }
+
+  @keyframes Jmwb8W_lightbox-backdrop-out {
+    to {
+      opacity: var(--lightbox-backdrop-ending-opacity, 0);
+      backdrop-filter: var(--lightbox-backdrop-ending-blur, none);
+    }
+  }
+
+  @keyframes Jmwb8W_lightbox-content-in {
+    from {
+      opacity: var(--lightbox-content-starting-opacity, 0);
+      translate: var(--lightbox-content-starting-translate-x, 0)
+        var(--lightbox-content-starting-translate-y, 0);
+      scale: var(--lightbox-content-starting-scale, .82);
+    }
+  }
+
+  @keyframes Jmwb8W_lightbox-content-out {
+    to {
+      opacity: var(--lightbox-content-ending-opacity, 0);
+      translate: var(--lightbox-content-ending-translate-x, 0)
+        var(--lightbox-content-ending-translate-y, 0);
+      scale: var(--lightbox-content-ending-scale, .82);
+    }
+  }
+}

package/dist/components/lightbox/Lightbox.d.ts

@@ -0,0 +1,71 @@
+import { OverlayPortalProps } from "../../lib/moduix/overlayPortal.js";
+import { ComponentProps, RefObject } from "react";
+import { Dialog } from "@ark-ui/react/dialog";
+
+//#region src/components/lightbox/Lightbox.d.ts
+type LightboxImageSelectDetails = {
+  alt?: string;
+  element: HTMLImageElement;
+  src: string;
+};
+type LightboxImageProps = ComponentProps<'img'> & {
+  closeOnClick?: boolean;
+};
+type LightboxRootProps = ComponentProps<typeof Dialog.Root> & OverlayPortalProps;
+type LightboxRootProviderProps = ComponentProps<typeof Dialog.RootProvider> & OverlayPortalProps;
+type LightboxBindProps = {
+  onImageSelect: (details: LightboxImageSelectDetails) => void;
+  selector?: string;
+  rootRef?: RefObject<HTMLElement | null>;
+  rootSelector?: string;
+};
+declare function LightboxRoot({
+  portalled,
+  portalRef,
+  ...props
+}: LightboxRootProps): import("react").JSX.Element;
+declare function LightboxRootProvider({
+  portalled,
+  portalRef,
+  ...props
+}: LightboxRootProviderProps): import("react").JSX.Element;
+declare const LightboxImage: import("react").ForwardRefExoticComponent<Omit<LightboxImageProps, "ref"> & import("react").RefAttributes<HTMLImageElement>>;
+declare const LightboxGallery: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare function LightboxHeader({
+  className,
+  ...props
+}: ComponentProps<'div'>): import("react").JSX.Element;
+declare function LightboxBody({
+  className,
+  ...props
+}: ComponentProps<'div'>): import("react").JSX.Element;
+declare function LightboxFooter({
+  className,
+  ...props
+}: ComponentProps<'div'>): import("react").JSX.Element;
+declare function LightboxBind({
+  onImageSelect,
+  selector,
+  rootRef,
+  rootSelector
+}: LightboxBindProps): null;
+declare const Lightbox: typeof LightboxRoot & {
+  Root: typeof LightboxRoot;
+  RootProvider: typeof LightboxRootProvider;
+  Trigger: import("react").ForwardRefExoticComponent<Omit<Dialog.TriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+  Backdrop: import("react").ForwardRefExoticComponent<Omit<Dialog.BackdropProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Positioner: import("react").ForwardRefExoticComponent<Omit<Dialog.PositionerProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Content: import("react").ForwardRefExoticComponent<Omit<Dialog.ContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Title: import("react").ForwardRefExoticComponent<Omit<Dialog.TitleProps & import("react").RefAttributes<HTMLHeadingElement>, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
+  Description: import("react").ForwardRefExoticComponent<Omit<Dialog.DescriptionProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  CloseTrigger: import("react").ForwardRefExoticComponent<Omit<Dialog.CloseTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+  CloseIcon: import("react").ForwardRefExoticComponent<Omit<Omit<Dialog.CloseTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "asChild">, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+  Header: typeof LightboxHeader;
+  Body: typeof LightboxBody;
+  Footer: typeof LightboxFooter;
+  Image: import("react").ForwardRefExoticComponent<Omit<LightboxImageProps, "ref"> & import("react").RefAttributes<HTMLImageElement>>;
+  Gallery: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Bind: typeof LightboxBind;
+};
+//#endregion
+export { Lightbox, LightboxBind, type LightboxBindProps, LightboxGallery, LightboxImage, type LightboxImageSelectDetails };

package/dist/components/lightbox/Lightbox.js

@@ -0,0 +1,219 @@
+import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import { CloseButton } from "../close-button/CloseButton.js";
+import { OverlayPortal, OverlayPortalProvider } from "../../lib/moduix/overlayPortal.js";
+import Lightbox_module_default from "./Lightbox.module.js";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { forwardRef, useEffect } from "react";
+import { Dialog, useDialogContext } from "@ark-ui/react/dialog";
+//#region src/components/lightbox/Lightbox.tsx
+const DEFAULT_CLOSE_LABEL = "Close image";
+const preloadedImageSources = /* @__PURE__ */ new Set();
+function preloadImage(src) {
+	if (!src || typeof Image === "undefined" || preloadedImageSources.has(src)) return;
+	preloadedImageSources.add(src);
+	const image = new Image();
+	image.src = src;
+}
+function resolveImage(target, selector, rootNode) {
+	if (!(target instanceof Element)) return null;
+	const matchedNode = target.closest(selector);
+	if (!matchedNode || !rootNode.contains(matchedNode)) return null;
+	const imageNode = matchedNode instanceof HTMLImageElement ? matchedNode : matchedNode.querySelector("img");
+	if (!(imageNode instanceof HTMLImageElement)) return null;
+	const src = imageNode.dataset.lightboxSrc ?? imageNode.currentSrc ?? imageNode.src;
+	if (!src) return null;
+	return {
+		src,
+		alt: imageNode.alt || void 0,
+		element: imageNode
+	};
+}
+function LightboxRoot({ portalled, portalRef, ...props }) {
+	return /* @__PURE__ */ jsx(OverlayPortalProvider, {
+		portalled,
+		portalRef,
+		children: /* @__PURE__ */ jsx(Dialog.Root, { ...props })
+	});
+}
+function LightboxRootProvider({ portalled, portalRef, ...props }) {
+	return /* @__PURE__ */ jsx(OverlayPortalProvider, {
+		portalled,
+		portalRef,
+		children: /* @__PURE__ */ jsx(Dialog.RootProvider, { ...props })
+	});
+}
+const LightboxTrigger = forwardRef(function LightboxTrigger({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Dialog.Trigger, {
+		ref,
+		"data-slot": "lightbox-trigger",
+		className: clsx(Lightbox_module_default.trigger, normalizeClassName(className)),
+		...props
+	});
+});
+const LightboxBackdrop = forwardRef(function LightboxBackdrop({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(OverlayPortal, { children: /* @__PURE__ */ jsx(Dialog.Backdrop, {
+		ref,
+		"data-slot": "lightbox-backdrop",
+		className: clsx(Lightbox_module_default.backdrop, normalizeClassName(className)),
+		...props
+	}) });
+});
+const LightboxPositioner = forwardRef(function LightboxPositioner({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(OverlayPortal, { children: /* @__PURE__ */ jsx(Dialog.Positioner, {
+		ref,
+		"data-slot": "lightbox-positioner",
+		className: clsx(Lightbox_module_default.positioner, normalizeClassName(className)),
+		...props
+	}) });
+});
+const LightboxContent = forwardRef(function LightboxContent({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Dialog.Content, {
+		ref,
+		"data-slot": "lightbox-content",
+		className: clsx(Lightbox_module_default.content, normalizeClassName(className)),
+		...props
+	});
+});
+const LightboxTitle = forwardRef(function LightboxTitle({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Dialog.Title, {
+		ref,
+		"data-slot": "lightbox-title",
+		className: clsx(Lightbox_module_default.title, normalizeClassName(className)),
+		...props
+	});
+});
+const LightboxDescription = forwardRef(function LightboxDescription({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Dialog.Description, {
+		ref,
+		"data-slot": "lightbox-description",
+		className: clsx(Lightbox_module_default.description, normalizeClassName(className)),
+		...props
+	});
+});
+const LightboxCloseTrigger = forwardRef(function LightboxCloseTrigger({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Dialog.CloseTrigger, {
+		ref,
+		"data-slot": "lightbox-close-trigger",
+		className: normalizeClassName(className),
+		...props
+	});
+});
+const LightboxCloseIcon = forwardRef(function LightboxCloseIcon({ className, children, "aria-label": ariaLabel = DEFAULT_CLOSE_LABEL, ...props }, ref) {
+	const dialog = useDialogContext();
+	return /* @__PURE__ */ jsx(Dialog.CloseTrigger, {
+		asChild: true,
+		...props,
+		children: /* @__PURE__ */ jsx(CloseButton.Root, {
+			ref,
+			"data-slot": "lightbox-close-icon",
+			"data-state": dialog.open ? "open" : "closed",
+			"aria-label": ariaLabel,
+			className: clsx(Lightbox_module_default.closeIcon, normalizeClassName(className)),
+			children
+		})
+	});
+});
+const LightboxImage = forwardRef(function LightboxImage({ className, closeOnClick = false, onClick, ...props }, ref) {
+	const dialog = useDialogContext();
+	const handleClick = (event) => {
+		onClick?.(event);
+		if (closeOnClick && !event.defaultPrevented) dialog.setOpen(false);
+	};
+	return /* @__PURE__ */ jsx("img", {
+		ref,
+		"data-slot": "lightbox-image",
+		"data-close-on-click": closeOnClick ? "" : void 0,
+		className: clsx(Lightbox_module_default.image, normalizeClassName(className)),
+		onClick: handleClick,
+		...props
+	});
+});
+const LightboxGallery = forwardRef(function LightboxGallery({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-slot": "lightbox-gallery",
+		className: clsx(Lightbox_module_default.gallery, normalizeClassName(className)),
+		...props
+	});
+});
+function LightboxHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "lightbox-header",
+		className: clsx(Lightbox_module_default.header, className),
+		...props
+	});
+}
+function LightboxBody({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "lightbox-body",
+		className: clsx(Lightbox_module_default.body, className),
+		...props
+	});
+}
+function LightboxFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "lightbox-footer",
+		className: clsx(Lightbox_module_default.footer, className),
+		...props
+	});
+}
+function LightboxBind({ onImageSelect, selector = "img", rootRef, rootSelector }) {
+	const { setOpen } = useDialogContext();
+	useEffect(() => {
+		const rootNode = rootRef?.current ?? (rootSelector ? document.querySelector(rootSelector) : null);
+		if (!rootNode) return;
+		const handleClick = (event) => {
+			const nextImage = resolveImage(event.target, selector, rootNode);
+			if (!nextImage) return;
+			onImageSelect(nextImage);
+			setOpen(true);
+		};
+		const preloadFromTarget = (target) => {
+			const nextImage = resolveImage(target, selector, rootNode);
+			if (!nextImage) return;
+			preloadImage(nextImage.src);
+		};
+		const handlePointerEnter = (event) => {
+			preloadFromTarget(event.target);
+		};
+		const handleFocusIn = (event) => {
+			preloadFromTarget(event.target);
+		};
+		rootNode.addEventListener("click", handleClick);
+		rootNode.addEventListener("pointerenter", handlePointerEnter, true);
+		rootNode.addEventListener("focusin", handleFocusIn);
+		return () => {
+			rootNode.removeEventListener("click", handleClick);
+			rootNode.removeEventListener("pointerenter", handlePointerEnter, true);
+			rootNode.removeEventListener("focusin", handleFocusIn);
+		};
+	}, [
+		onImageSelect,
+		rootRef,
+		rootSelector,
+		selector,
+		setOpen
+	]);
+	return null;
+}
+const Lightbox = Object.assign(LightboxRoot, {
+	Root: LightboxRoot,
+	RootProvider: LightboxRootProvider,
+	Trigger: LightboxTrigger,
+	Backdrop: LightboxBackdrop,
+	Positioner: LightboxPositioner,
+	Content: LightboxContent,
+	Title: LightboxTitle,
+	Description: LightboxDescription,
+	CloseTrigger: LightboxCloseTrigger,
+	CloseIcon: LightboxCloseIcon,
+	Header: LightboxHeader,
+	Body: LightboxBody,
+	Footer: LightboxFooter,
+	Image: LightboxImage,
+	Gallery: LightboxGallery,
+	Bind: LightboxBind
+});
+//#endregion
+export { Lightbox, LightboxBind, LightboxGallery, LightboxImage };

package/dist/components/lightbox/Lightbox.module.js

@@ -0,0 +1,22 @@
+import './Lightbox.css';
+//#region src/components/lightbox/Lightbox.module.css
+var Lightbox_module_default = {
+	"backdrop": "Jmwb8W_backdrop",
+	"body": "Jmwb8W_body",
+	"closeIcon": "Jmwb8W_closeIcon",
+	"content": "Jmwb8W_content",
+	"description": "Jmwb8W_description",
+	"footer": "Jmwb8W_footer",
+	"gallery": "Jmwb8W_gallery",
+	"header": "Jmwb8W_header",
+	"image": "Jmwb8W_image",
+	"lightbox-backdrop-in": "Jmwb8W_lightbox-backdrop-in",
+	"lightbox-backdrop-out": "Jmwb8W_lightbox-backdrop-out",
+	"lightbox-content-in": "Jmwb8W_lightbox-content-in",
+	"lightbox-content-out": "Jmwb8W_lightbox-content-out",
+	"positioner": "Jmwb8W_positioner",
+	"title": "Jmwb8W_title",
+	"trigger": "Jmwb8W_trigger"
+};
+//#endregion
+export { Lightbox_module_default as default };

package/dist/components/lightbox/index.d.ts

@@ -0,0 +1,2 @@
+import { Lightbox, LightboxBind, LightboxBindProps, LightboxGallery, LightboxImage, LightboxImageSelectDetails } from "./Lightbox.js";
+export { Lightbox, LightboxBind, type LightboxBindProps, LightboxGallery, LightboxImage, type LightboxImageSelectDetails };

package/dist/components/list/List.css

@@ -0,0 +1,118 @@
+@layer ui.components {
+  .tX0ceq_root[data-scope="list"][data-part="root"] {
+    --_list-color: var(--list-color, var(--list-default-color, var(--color-foreground)));
+    --_list-font-size: var(--list-font-size, var(--list-font-size-md, var(--text-md)));
+    --_list-gap: var(--list-gap, var(--list-gap-sm, var(--spacing-2)));
+    --_list-line-height: var(--list-line-height, var(--list-line-height-md, var(--line-height-text-md)));
+    box-sizing: border-box;
+    color: var(--_list-color);
+    font-family: var(--list-font-family, inherit);
+    font-size: var(--_list-font-size);
+    font-weight: var(--list-font-weight, var(--weight-regular));
+    line-height: var(--_list-line-height);
+    letter-spacing: var(--list-letter-spacing, 0);
+    overflow-wrap: break-word;
+    margin: 0;
+    padding: 0;
+    list-style-position: outside;
+
+    &[data-gap="xs"] {
+      --_list-gap: var(--list-gap, var(--list-gap-xs, var(--spacing-1)));
+    }
+
+    &[data-gap="sm"] {
+      --_list-gap: var(--list-gap, var(--list-gap-sm, var(--spacing-2)));
+    }
+
+    &[data-gap="md"] {
+      --_list-gap: var(--list-gap, var(--list-gap-md, var(--spacing-3)));
+    }
+
+    &[data-gap="lg"] {
+      --_list-gap: var(--list-gap, var(--list-gap-lg, var(--spacing-4)));
+    }
+
+    &[data-gap="xl"] {
+      --_list-gap: var(--list-gap, var(--list-gap-xl, var(--spacing-5)));
+    }
+
+    &[data-gap="2xl"] {
+      --_list-gap: var(--list-gap, var(--list-gap-2xl, var(--spacing-6)));
+    }
+
+    & > li + li {
+      margin-block-start: var(--_list-gap);
+    }
+
+    & > li::marker {
+      color: var(--list-marker-color, currentColor);
+      font-weight: var(--list-marker-font-weight, inherit);
+    }
+
+    &[data-marker="none"] {
+      padding-inline-start: 0;
+      list-style: none;
+    }
+
+    &:is(ul, ol)[data-marker="auto"], &[data-marker="disc"], &[data-marker="decimal"] {
+      padding-inline-start: var(--list-padding-x, var(--spacing-5));
+    }
+
+    &:is(ul)[data-marker="auto"], &[data-marker="disc"] {
+      list-style-type: disc;
+    }
+
+    &:is(ol)[data-marker="auto"] {
+      list-style-type: revert;
+    }
+
+    &:is(ul)[data-marker="decimal"], &:is(ol)[data-marker="decimal"] {
+      list-style-type: decimal;
+    }
+
+    &[data-size="xs"] {
+      --_list-font-size: var(--list-font-size, var(--list-font-size-xs, var(--text-xs)));
+      --_list-line-height: var(--list-line-height, var(--list-line-height-xs, var(--line-height-text-xs)));
+    }
+
+    &[data-size="sm"] {
+      --_list-font-size: var(--list-font-size, var(--list-font-size-sm, var(--text-sm)));
+      --_list-line-height: var(--list-line-height, var(--list-line-height-sm, var(--line-height-text-sm)));
+    }
+
+    &[data-size="md"] {
+      --_list-font-size: var(--list-font-size, var(--list-font-size-md, var(--text-md)));
+      --_list-line-height: var(--list-line-height, var(--list-line-height-md, var(--line-height-text-md)));
+    }
+
+    &[data-size="lg"] {
+      --_list-font-size: var(--list-font-size, var(--list-font-size-lg, var(--text-lg)));
+      --_list-line-height: var(--list-line-height, var(--list-line-height-lg, var(--line-height-text-lg)));
+    }
+
+    &[data-size="xl"] {
+      --_list-font-size: var(--list-font-size, var(--list-font-size-xl, var(--text-xl)));
+      --_list-line-height: var(--list-line-height, var(--list-line-height-xl, var(--line-height-text-xl)));
+    }
+
+    &[data-tone="default"] {
+      --_list-color: var(--list-color, var(--list-default-color, var(--color-foreground)));
+    }
+
+    &[data-tone="muted"] {
+      --_list-color: var(--list-color, var(--list-muted-color, var(--color-muted-foreground)));
+    }
+
+    &[data-tone="subtle"] {
+      --_list-color: var(--list-color, var(--list-subtle-color, var(--color-secondary-foreground)));
+    }
+
+    &[data-tone="primary"] {
+      --_list-color: var(--list-color, var(--list-primary-color, var(--color-primary)));
+    }
+
+    &[data-tone="destructive"] {
+      --_list-color: var(--list-color, var(--list-destructive-color, var(--color-destructive)));
+    }
+  }
+}