@botiverse/raft-ui 0.51.0 → 0.52.0

package/dist/components/legacy-task-panel/legacy-task-panel.mjs

@@ -0,0 +1,234 @@
+import { ThreadPanelActions, ThreadPanelBody, ThreadPanelContent, ThreadPanelHeader, ThreadPanelRoot, ThreadPanelTitle, ThreadPanelTitleMeta } from "../thread-panel/thread-panel.mjs";
+import { legacyTaskPanel } from "./legacy-task-panel.recipe.mjs";
+import { FileText } from "lucide-react";
+import { jsx } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/legacy-task-panel/legacy-task-panel.tsx
+/** @deprecated No consumer uses it; compose read-only task details from Dialog and DescriptionList. Removed in raft-ui 1.0. */
+function LegacyTaskPanelRoot({ className, framed = false, render, children, ...props }) {
+	if (!framed) return /* @__PURE__ */ jsx(ThreadPanelRoot, {
+		"data-slot": "legacy-task-panel-root",
+		className,
+		render,
+		...props,
+		children
+	});
+	return /* @__PURE__ */ jsx(LegacyTaskPanelFrame, {
+		className,
+		render,
+		...props,
+		children
+	});
+}
+function LegacyTaskPanelFrame({ className, render, children, ...props }) {
+	const { frame } = legacyTaskPanel({ framed: true });
+	const defaultProps = {
+		"data-slot": "legacy-task-panel-frame",
+		className: frame({ className }),
+		children: /* @__PURE__ */ jsx(ThreadPanelRoot, {
+			"data-slot": "legacy-task-panel-root",
+			children
+		})
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+/** @deprecated No consumer uses it; compose read-only task details from Dialog and DescriptionList. Removed in raft-ui 1.0. */
+function LegacyTaskPanelHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx(ThreadPanelHeader, {
+		"data-slot": "legacy-task-panel-header",
+		className,
+		...props
+	});
+}
+/** @deprecated No consumer uses it; compose read-only task details from Dialog and DescriptionList. Removed in raft-ui 1.0. */
+function LegacyTaskPanelIcon({ className, render, children, ...props }) {
+	const { icon } = legacyTaskPanel();
+	const defaultProps = {
+		"data-slot": "legacy-task-panel-icon",
+		className: icon({ className }),
+		children: children ?? /* @__PURE__ */ jsx(FileText, {
+			"aria-hidden": true,
+			size: 18
+		})
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+/** @deprecated No consumer uses it; compose read-only task details from Dialog and DescriptionList. Removed in raft-ui 1.0. */
+function LegacyTaskPanelTitle({ className, ...props }) {
+	const { title } = legacyTaskPanel();
+	return /* @__PURE__ */ jsx(ThreadPanelTitle, {
+		"data-slot": "legacy-task-panel-title",
+		className: title({ className }),
+		...props
+	});
+}
+/** @deprecated No consumer uses it; compose read-only task details from Dialog and DescriptionList. Removed in raft-ui 1.0. */
+function LegacyTaskPanelTitleMeta({ className, ...props }) {
+	return /* @__PURE__ */ jsx(ThreadPanelTitleMeta, {
+		"data-slot": "legacy-task-panel-title-meta",
+		className,
+		...props
+	});
+}
+/** @deprecated No consumer uses it; compose read-only task details from Dialog and DescriptionList. Removed in raft-ui 1.0. */
+function LegacyTaskPanelActions({ className, ...props }) {
+	return /* @__PURE__ */ jsx(ThreadPanelActions, {
+		"data-slot": "legacy-task-panel-actions",
+		className,
+		...props
+	});
+}
+/** @deprecated No consumer uses it; compose read-only task details from Dialog and DescriptionList. Removed in raft-ui 1.0. */
+function LegacyTaskPanelBody({ className, children, ...props }) {
+	const { body } = legacyTaskPanel();
+	return /* @__PURE__ */ jsx(ThreadPanelContent, {
+		"data-slot": "legacy-task-panel-content",
+		...props,
+		children: /* @__PURE__ */ jsx(ThreadPanelBody, {
+			"data-slot": "legacy-task-panel-body",
+			className: body({ className }),
+			children
+		})
+	});
+}
+/** @deprecated No consumer uses it; compose read-only task details from Dialog and DescriptionList. Removed in raft-ui 1.0. */
+function LegacyTaskPanelStatus({ className, render, ...props }) {
+	const { status } = legacyTaskPanel();
+	const defaultProps = {
+		"data-slot": "legacy-task-panel-status",
+		className: status({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+/** @deprecated No consumer uses it; compose read-only task details from Dialog and DescriptionList. Removed in raft-ui 1.0. */
+function LegacyTaskPanelSection({ className, render, ...props }) {
+	const { section } = legacyTaskPanel();
+	const defaultProps = {
+		"data-slot": "legacy-task-panel-section",
+		className: section({ className })
+	};
+	return useRender({
+		defaultTagName: "section",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+/** @deprecated No consumer uses it; compose read-only task details from Dialog and DescriptionList. Removed in raft-ui 1.0. */
+function LegacyTaskPanelField({ className, render, ...props }) {
+	const { field } = legacyTaskPanel();
+	const defaultProps = {
+		"data-slot": "legacy-task-panel-field",
+		className: field({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+/** @deprecated No consumer uses it; compose read-only task details from Dialog and DescriptionList. Removed in raft-ui 1.0. */
+function LegacyTaskPanelFieldLabel({ className, render, ...props }) {
+	const { fieldLabel } = legacyTaskPanel();
+	const defaultProps = {
+		"data-slot": "legacy-task-panel-field-label",
+		className: fieldLabel({ className })
+	};
+	return useRender({
+		defaultTagName: "p",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+/** @deprecated No consumer uses it; compose read-only task details from Dialog and DescriptionList. Removed in raft-ui 1.0. */
+function LegacyTaskPanelFieldTitle({ className, render, ...props }) {
+	const { fieldTitle } = legacyTaskPanel();
+	const defaultProps = {
+		"data-slot": "legacy-task-panel-field-title",
+		className: fieldTitle({ className })
+	};
+	return useRender({
+		defaultTagName: "h3",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+/** @deprecated No consumer uses it; compose read-only task details from Dialog and DescriptionList. Removed in raft-ui 1.0. */
+function LegacyTaskPanelFieldText({ className, render, ...props }) {
+	const { fieldText } = legacyTaskPanel();
+	const defaultProps = {
+		"data-slot": "legacy-task-panel-field-text",
+		className: fieldText({ className })
+	};
+	return useRender({
+		defaultTagName: "p",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+/** @deprecated No consumer uses it; compose read-only task details from Dialog and DescriptionList. Removed in raft-ui 1.0. */
+function LegacyTaskPanelMeta({ className, render, ...props }) {
+	const { meta } = legacyTaskPanel();
+	const defaultProps = {
+		"data-slot": "legacy-task-panel-meta",
+		className: meta({ className })
+	};
+	return useRender({
+		defaultTagName: "section",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+/** @deprecated No consumer uses it; compose read-only task details from Dialog and DescriptionList. Removed in raft-ui 1.0. */
+function LegacyTaskPanelMetaRow({ className, render, ...props }) {
+	const { metaRow } = legacyTaskPanel();
+	const defaultProps = {
+		"data-slot": "legacy-task-panel-meta-row",
+		className: metaRow({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+/** @deprecated No consumer uses it; compose read-only task details from Dialog and DescriptionList. Removed in raft-ui 1.0. */
+function LegacyTaskPanelMetaLabel({ className, render, ...props }) {
+	const { metaLabel } = legacyTaskPanel();
+	const defaultProps = {
+		"data-slot": "legacy-task-panel-meta-label",
+		className: metaLabel({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+/** @deprecated No consumer uses it; compose read-only task details from Dialog and DescriptionList. Removed in raft-ui 1.0. */
+function LegacyTaskPanelMetaValue({ className, render, ...props }) {
+	const { metaValue } = legacyTaskPanel();
+	const defaultProps = {
+		"data-slot": "legacy-task-panel-meta-value",
+		className: metaValue({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+//#endregion
+export { LegacyTaskPanelActions, LegacyTaskPanelBody, LegacyTaskPanelField, LegacyTaskPanelFieldLabel, LegacyTaskPanelFieldText, LegacyTaskPanelFieldTitle, LegacyTaskPanelHeader, LegacyTaskPanelIcon, LegacyTaskPanelMeta, LegacyTaskPanelMetaLabel, LegacyTaskPanelMetaRow, LegacyTaskPanelMetaValue, LegacyTaskPanelRoot, LegacyTaskPanelSection, LegacyTaskPanelStatus, LegacyTaskPanelTitle, LegacyTaskPanelTitleMeta };

package/dist/components/legacy-task-panel/legacy-task-panel.recipe.mjs

@@ -0,0 +1,30 @@
+import { tv } from "../../lib/tv.mjs";
+//#region src/components/legacy-task-panel/legacy-task-panel.recipe.ts
+const legacyTaskPanel = tv({
+	slots: {
+		frame: ["size-full min-h-[512px]  max-w-md overflow-hidden", "rounded-container border border-line-seam bg-layer-canvas shadow-none"],
+		icon: [
+			"flex shrink-0 items-center justify-center",
+			"size-[27px] rounded-sticker bg-fill-muted text-foreground-muted",
+			"[&_svg]:size-3.5"
+		],
+		title: ["flex flex-col items-start gap-0.5 overflow-visible whitespace-normal"],
+		body: ["stack-y-4 overflow-y-auto px-5 py-4"],
+		status: ["flex flex-wrap items-center gap-2"],
+		section: ["p-4", "stack-y-3 rounded-container border border-line-hairline bg-layer-card shadow-none"],
+		field: [],
+		fieldLabel: ["mb-0.5 font-sans text-footnote font-medium text-foreground-hint"],
+		fieldTitle: ["m-0 wrap-break-word", "text-body font-semibold text-foreground"],
+		fieldText: ["m-0 whitespace-pre-wrap wrap-break-word", "text-subhead text-foreground-muted"],
+		meta: ["p-4 text-sm", "rounded-container border border-line-hairline bg-layer-card px-4 py-2 shadow-none"],
+		metaRow: ["flex justify-between gap-3", "min-h-8 items-center"],
+		metaLabel: ["font-sans text-footnote font-medium text-foreground-hint"],
+		metaValue: ["text-right", "text-callout text-foreground"]
+	},
+	variants: { framed: {
+		true: {},
+		false: {}
+	} }
+});
+//#endregion
+export { legacyTaskPanel };

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

@@ -0,0 +1,2 @@
+import { Lightbox, LightboxActions, LightboxActionsProps, LightboxClose, LightboxCloseProps, LightboxContent, LightboxContentProps, LightboxHeader, LightboxHeaderLabel, LightboxHeaderLabelProps, LightboxHeaderMeta, LightboxHeaderMetaProps, LightboxHeaderProps, LightboxInfoActions, LightboxInfoActionsProps, LightboxInfoBar, LightboxInfoBarProps, LightboxInfoDock, LightboxInfoDockProps, LightboxInfoTitle, LightboxInfoTitleProps, LightboxMedia, LightboxMediaProps, LightboxNavigationButton, LightboxNavigationButtonProps, LightboxPortal, LightboxPortalProps, LightboxProps, LightboxStage, LightboxStageProps, LightboxThumbnail, LightboxThumbnailProps, LightboxThumbnailStrip, LightboxThumbnailStripProps, LightboxTitle, LightboxTitleProps, LightboxToolbar, LightboxToolbarProps, LightboxTrigger, LightboxTriggerProps } from "./lightbox.mjs";
+export { Lightbox, LightboxActions, type LightboxActionsProps, LightboxClose, type LightboxCloseProps, LightboxContent, type LightboxContentProps, LightboxHeader, LightboxHeaderLabel, type LightboxHeaderLabelProps, LightboxHeaderMeta, type LightboxHeaderMetaProps, type LightboxHeaderProps, LightboxInfoActions, type LightboxInfoActionsProps, LightboxInfoBar, type LightboxInfoBarProps, LightboxInfoDock, type LightboxInfoDockProps, LightboxInfoTitle, type LightboxInfoTitleProps, LightboxMedia, type LightboxMediaProps, LightboxNavigationButton, type LightboxNavigationButtonProps, LightboxPortal, type LightboxPortalProps, type LightboxProps, LightboxStage, type LightboxStageProps, LightboxThumbnail, type LightboxThumbnailProps, LightboxThumbnailStrip, type LightboxThumbnailStripProps, LightboxTitle, type LightboxTitleProps, LightboxToolbar, type LightboxToolbarProps, LightboxTrigger, type LightboxTriggerProps };

package/dist/components/lightbox/lightbox.d.mts

@@ -0,0 +1,55 @@
+import { StyledProps } from "../../lib/styled-props.mjs";
+import { ButtonProps } from "../button/button.mjs";
+import { Dialog } from "@base-ui/react/dialog";
+import { ReactNode } from "react";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/lightbox/lightbox.d.ts
+export type LightboxProps<Payload = unknown> = Omit<Dialog.Root.Props<Payload>, "actionsRef" | "children" | "handle"> & {
+  children?: ReactNode;
+  closeOnModW?: boolean;
+};
+export declare function Lightbox<Payload = unknown>({ closeOnModW, defaultOpen, modal, onOpenChange, open, children, ...props }: LightboxProps<Payload>): import("react").JSX.Element;
+export type LightboxTriggerProps = Dialog.Trigger.Props;
+export declare function LightboxTrigger(props: LightboxTriggerProps): import("react").JSX.Element;
+export type LightboxPortalProps = Dialog.Portal.Props;
+export declare function LightboxPortal(props: LightboxPortalProps): import("react").JSX.Element;
+export type LightboxContentProps = StyledProps<Dialog.Popup.Props>;
+export declare function LightboxContent({ className, initialFocus, finalFocus, ...props }: LightboxContentProps): import("react").JSX.Element;
+export type LightboxHeaderProps = useRender.ComponentProps<"div">;
+export declare function LightboxHeader({ render, className, ...props }: LightboxHeaderProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type LightboxToolbarProps = useRender.ComponentProps<"div">;
+export declare function LightboxToolbar({ render, className, ...props }: LightboxToolbarProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type LightboxHeaderMetaProps = useRender.ComponentProps<"div">;
+export declare function LightboxHeaderMeta({ render, className, ...props }: LightboxHeaderMetaProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type LightboxHeaderLabelProps = useRender.ComponentProps<"span">;
+export declare function LightboxHeaderLabel({ render, className, ...props }: LightboxHeaderLabelProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type LightboxTitleProps = useRender.ComponentProps<"div">;
+export declare function LightboxTitle({ render, className, ...props }: LightboxTitleProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type LightboxActionsProps = useRender.ComponentProps<"div">;
+export declare function LightboxActions({ render, className, ...props }: LightboxActionsProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type LightboxStageProps = useRender.ComponentProps<"div">;
+export declare function LightboxStage({ render, className, ...props }: LightboxStageProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type LightboxMediaProps = useRender.ComponentProps<"div">;
+export declare function LightboxMedia({ render, className, ...props }: LightboxMediaProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type LightboxNavigationButtonProps = Omit<ButtonProps, "disabled" | "loading" | "size" | "variant"> & {
+  direction: "next" | "previous";
+  disabled?: boolean;
+};
+export declare function LightboxNavigationButton({ className, direction, disabled, onClick, type, ...props }: LightboxNavigationButtonProps): import("react").JSX.Element;
+export type LightboxInfoDockProps = useRender.ComponentProps<"div">;
+export declare function LightboxInfoDock({ render, className, ...props }: LightboxInfoDockProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type LightboxInfoBarProps = useRender.ComponentProps<"div">;
+export declare function LightboxInfoBar({ render, className, ...props }: LightboxInfoBarProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type LightboxInfoTitleProps = useRender.ComponentProps<"div">;
+export declare function LightboxInfoTitle({ render, className, ...props }: LightboxInfoTitleProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type LightboxInfoActionsProps = useRender.ComponentProps<"div">;
+export declare function LightboxInfoActions({ render, className, ...props }: LightboxInfoActionsProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type LightboxThumbnailStripProps = useRender.ComponentProps<"div">;
+export declare function LightboxThumbnailStrip({ render, className, ...props }: LightboxThumbnailStripProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type LightboxThumbnailProps = useRender.ComponentProps<"button"> & {
+  active?: boolean;
+};
+export declare function LightboxThumbnail({ active, className, render, type, children, ...props }: LightboxThumbnailProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type LightboxCloseProps = StyledProps<Dialog.Close.Props>;
+export declare function LightboxClose({ className, render, ...props }: LightboxCloseProps): import("react").JSX.Element;
+//#endregion

package/dist/components/lightbox/lightbox.mjs

@@ -0,0 +1,336 @@
+import { cn } from "../../cn.mjs";
+import { headEdgePull } from "../../lib/head-edges.mjs";
+import { tv } from "../../lib/tv.mjs";
+import { useThemeScopeProps } from "../../lib/theme/theme-scope.mjs";
+import { Button } from "../button/button.mjs";
+import { Dialog } from "@base-ui/react/dialog";
+import { useCallback, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { useHotkey } from "@tanstack/react-hotkeys";
+//#region src/components/lightbox/lightbox.tsx
+const lightbox = tv({ slots: {
+	backdrop: ["fixed inset-0 z-70 bg-layer-backdrop data-closed:hidden"],
+	content: [
+		"pointer-events-none fixed inset-0 z-71 flex flex-col data-closed:hidden",
+		"*:data-lightbox-close:pointer-events-auto *:data-lightbox-close:absolute *:data-lightbox-close:z-20",
+		"*:data-lightbox-close:top-[calc(16px+env(safe-area-inset-top,0px))] *:data-lightbox-close:right-[calc(16px+env(safe-area-inset-right,0px))]"
+	],
+	header: [
+		"pointer-events-auto shrink-0",
+		"flex items-center gap-3 pb-3",
+		"pt-[calc(env(safe-area-inset-top,0px)+--spacing(3))]",
+		"pl-[calc(env(safe-area-inset-left,0px)+--spacing(4))]",
+		"pr-[calc(env(safe-area-inset-right,0px)+--spacing(4))]",
+		"bg-transparent shadow-none",
+		headEdgePull
+	],
+	toolbar: [
+		"pointer-events-auto shrink-0 flex items-center gap-3",
+		"h-[calc(56px+env(safe-area-inset-top,0px))] pt-[env(safe-area-inset-top,0px)]",
+		"pl-[calc(16px+env(safe-area-inset-left,0px))] pr-[calc(16px+env(safe-area-inset-right,0px))]",
+		"**:data-lightbox-close:static **:data-lightbox-close:inset-auto",
+		"**:data-lightbox-close:top-auto **:data-lightbox-close:right-auto",
+		"border-b border-line-seam bg-layer-canvas shadow-none",
+		headEdgePull
+	],
+	headerMeta: ["flex min-w-0 flex-1 items-center gap-1.5"],
+	headerLabel: [
+		"inline-flex shrink-0 items-center px-1.5",
+		"h-[22px] rounded-chip bg-fill-muted py-0",
+		"font-sans text-caption font-semibold normal-case tracking-normal text-foreground-muted"
+	],
+	title: ["min-w-0 flex-1 truncate", "py-0 font-sans text-headline font-bold text-foreground"],
+	actions: [
+		"flex shrink-0 items-center",
+		"gap-1",
+		"[&>[data-icon-inset]:last-child]:-mr-icon-inset"
+	],
+	stage: ["pointer-events-none relative flex min-h-0 flex-1 items-center justify-center overflow-hidden"],
+	media: ["pointer-events-auto max-h-[80vh] max-w-[86vw] border-0 bg-transparent shadow-none"],
+	navigationButton: [
+		"pointer-events-auto absolute z-10 inline-flex items-center justify-center",
+		"transition-[background-color,color,opacity,box-shadow,transform] duration-150",
+		"outline-[1px] outline-offset-2 outline-transparent",
+		"data-[disabled=true]:cursor-default",
+		"[&_svg]:pointer-events-none [&_svg]:shrink-0",
+		"size-11 rounded-control border-[1.5px] border-line-strong bg-layer-card text-foreground shadow-none",
+		"hover:overlay-medium active:overlay-medium",
+		"focus-visible:outline-transparent focus-visible:shadow-focus",
+		"[&_svg]:size-5.5"
+	],
+	infoDock: ["pointer-events-none absolute right-6 bottom-20 left-6 z-10 flex justify-center"],
+	infoBar: [
+		"pointer-events-auto flex items-center",
+		"w-[clamp(144px,20vw,224px)] max-w-[calc(100vw-48px)] min-w-36",
+		"gap-2 rounded-container py-1 pr-1 pl-2.5",
+		"bg-layer-popover text-foreground shadow-float ring-1 ring-line-seam"
+	],
+	infoTitle: ["min-w-0 flex-1 truncate", "font-sans text-footnote font-semibold text-foreground"],
+	infoActions: [
+		"flex shrink-0 items-center",
+		"gap-1",
+		"*:data-[slot=button]:h-7 *:data-[slot=button]:w-auto *:data-[slot=button]:min-w-7",
+		"*:data-[slot=button]:rounded-chip",
+		"*:data-[slot=button]:after:inset-x-[-3px] *:data-[slot=button]:first:after:left-[-9.5px] *:data-[slot=button]:last:after:right-[-9.5px]",
+		"pointer-coarse:*:data-[slot=button]:after:inset-y-[-9.5px]"
+	],
+	thumbnailStrip: ["pointer-events-none absolute right-0 bottom-4 left-0 z-10", "flex items-center justify-center gap-1.5"],
+	thumbnail: [
+		"group/lightbox-thumb pointer-events-auto relative size-12 overflow-hidden",
+		"transition-[border-color,opacity,box-shadow] duration-150",
+		"[&_img]:pointer-events-none [&_img]:size-full [&_img]:object-cover",
+		"rounded-control border-[1.5px] opacity-100 shadow-none",
+		"border-sticker-paper/40 hover:border-sticker-paper/80",
+		"data-active:border-sticker-paper"
+	],
+	thumbnailOverlay: [
+		"pointer-events-none absolute inset-0 block transition-colors duration-150",
+		"bg-layer-backdrop-nested group-hover/lightbox-thumb:bg-layer-backdrop-nested/70",
+		"group-data-active/lightbox-thumb:bg-transparent"
+	],
+	close: ["pointer-events-auto"]
+} });
+function Lightbox({ closeOnModW = true, defaultOpen = false, modal = true, onOpenChange, open, children, ...props }) {
+	const dialogRef = useRef(null);
+	const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+	const effectiveOpen = open ?? uncontrolledOpen;
+	const handleOpenChange = useCallback((nextOpen, eventDetails) => {
+		if (open === void 0) setUncontrolledOpen(nextOpen);
+		onOpenChange?.(nextOpen, eventDetails);
+	}, [onOpenChange, open]);
+	const modWClose = closeOnModW && effectiveOpen ? /* @__PURE__ */ jsx(LightboxModWClose, { dialogRef }) : null;
+	return /* @__PURE__ */ jsxs(Dialog.Root, {
+		actionsRef: dialogRef,
+		defaultOpen,
+		modal,
+		onOpenChange: handleOpenChange,
+		open,
+		...props,
+		children: [modWClose, children]
+	});
+}
+function LightboxModWClose({ dialogRef }) {
+	useHotkey("Mod+W", (event) => {
+		event.preventDefault();
+		event.stopPropagation();
+		dialogRef.current?.close();
+	}, { meta: {
+		name: "Close lightbox",
+		description: "Close the active lightbox before the browser closes the tab."
+	} });
+	return null;
+}
+function LightboxTrigger(props) {
+	return /* @__PURE__ */ jsx(Dialog.Trigger, {
+		"data-slot": "lightbox-trigger",
+		...props
+	});
+}
+function LightboxPortal(props) {
+	return /* @__PURE__ */ jsx(Dialog.Portal, {
+		"data-slot": "lightbox-portal",
+		...useThemeScopeProps(props)
+	});
+}
+function LightboxContent({ className, initialFocus = false, finalFocus = false, ...props }) {
+	const { backdrop, content } = lightbox();
+	return /* @__PURE__ */ jsxs(LightboxPortal, { children: [/* @__PURE__ */ jsx(Dialog.Backdrop, {
+		"data-slot": "lightbox-backdrop",
+		className: backdrop()
+	}), /* @__PURE__ */ jsx(Dialog.Popup, {
+		"data-slot": "lightbox-content",
+		initialFocus,
+		finalFocus,
+		className: content({ className }),
+		...props
+	})] });
+}
+function LightboxHeader({ render, className, ...props }) {
+	const { header } = lightbox();
+	const defaultProps = { className: header({ className }) };
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "lightbox-header" }
+	});
+}
+function LightboxToolbar({ render, className, ...props }) {
+	const { toolbar } = lightbox();
+	const defaultProps = { className: toolbar({ className }) };
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "lightbox-toolbar" }
+	});
+}
+function LightboxHeaderMeta({ render, className, ...props }) {
+	const { headerMeta } = lightbox();
+	const defaultProps = { className: headerMeta({ className }) };
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "lightbox-header-meta" }
+	});
+}
+function LightboxHeaderLabel({ render, className, ...props }) {
+	const { headerLabel } = lightbox();
+	const defaultProps = { className: headerLabel({ className }) };
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "lightbox-header-label" }
+	});
+}
+function LightboxTitle({ render, className, ...props }) {
+	const { title } = lightbox();
+	const defaultProps = { className: title({ className }) };
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "lightbox-title" }
+	});
+}
+function LightboxActions({ render, className, ...props }) {
+	const { actions } = lightbox();
+	const defaultProps = { className: actions({ className }) };
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "lightbox-actions" }
+	});
+}
+function LightboxStage({ render, className, ...props }) {
+	const { stage } = lightbox();
+	const defaultProps = { className: stage({ className }) };
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "lightbox-stage" }
+	});
+}
+function LightboxMedia({ render, className, ...props }) {
+	const { media } = lightbox();
+	const defaultProps = { className: media({ className }) };
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "lightbox-media" }
+	});
+}
+function LightboxNavigationButton({ className, direction, disabled, onClick, type = "button", ...props }) {
+	const { navigationButton } = lightbox();
+	const handleClick = useCallback((event) => {
+		if (disabled) {
+			event.preventDefault();
+			return;
+		}
+		onClick?.(event);
+	}, [disabled, onClick]);
+	return /* @__PURE__ */ jsx(Button, {
+		"aria-disabled": disabled,
+		className: navigationButton({ className: cn(direction === "previous" ? "left-8" : "right-8", className) }),
+		"data-disabled": disabled ? "true" : void 0,
+		"data-slot": "lightbox-navigation-button",
+		"data-direction": direction,
+		onClick: handleClick,
+		size: "icon-lg",
+		type,
+		variant: "outline",
+		...props
+	});
+}
+function LightboxInfoDock({ render, className, ...props }) {
+	const { infoDock } = lightbox();
+	const defaultProps = { className: infoDock({ className }) };
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "lightbox-info-dock" }
+	});
+}
+function LightboxInfoBar({ render, className, ...props }) {
+	const { infoBar } = lightbox();
+	const defaultProps = { className: infoBar({ className }) };
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "lightbox-info-bar" }
+	});
+}
+function LightboxInfoTitle({ render, className, ...props }) {
+	const { infoTitle } = lightbox();
+	const defaultProps = { className: infoTitle({ className }) };
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "lightbox-info-title" }
+	});
+}
+function LightboxInfoActions({ render, className, ...props }) {
+	const { infoActions } = lightbox();
+	const defaultProps = { className: infoActions({ className }) };
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "lightbox-info-actions" }
+	});
+}
+function LightboxThumbnailStrip({ render, className, ...props }) {
+	const { thumbnailStrip } = lightbox();
+	const defaultProps = { className: thumbnailStrip({ className }) };
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "lightbox-thumbnail-strip" }
+	});
+}
+function LightboxThumbnail({ active = false, className, render, type = "button", children, ...props }) {
+	const { thumbnail, thumbnailOverlay } = lightbox();
+	const defaultProps = {
+		type,
+		"data-slot": "lightbox-thumbnail",
+		"data-active": active ? "true" : void 0,
+		className: thumbnail({ className }),
+		children: /* @__PURE__ */ jsxs(Fragment$1, { children: [children, /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			"data-slot": "lightbox-thumbnail-overlay",
+			className: thumbnailOverlay()
+		})] })
+	};
+	return useRender({
+		defaultTagName: "button",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function LightboxClose({ className, render, ...props }) {
+	const { close } = lightbox();
+	return /* @__PURE__ */ jsx(Dialog.Close, {
+		"data-lightbox-close": "",
+		"data-slot": "lightbox-close",
+		className: close({ className }),
+		render: render ?? /* @__PURE__ */ jsx(Button, {
+			type: "button",
+			variant: "outline",
+			size: "icon-lg"
+		}),
+		...props
+	});
+}
+//#endregion
+export { Lightbox, LightboxActions, LightboxClose, LightboxContent, LightboxHeader, LightboxHeaderLabel, LightboxHeaderMeta, LightboxInfoActions, LightboxInfoBar, LightboxInfoDock, LightboxInfoTitle, LightboxMedia, LightboxNavigationButton, LightboxPortal, LightboxStage, LightboxThumbnail, LightboxThumbnailStrip, LightboxTitle, LightboxToolbar, LightboxTrigger };

package/dist/components/list-row/index.d.mts

@@ -0,0 +1,2 @@
+import { ListRow, ListRowBody, ListRowBodyProps, ListRowBottom, ListRowBottomProps, ListRowChevron, ListRowChevronProps, ListRowDescription, ListRowDescriptionProps, ListRowGroup, ListRowGroupProps, ListRowIcon, ListRowIconProps, ListRowMeta, ListRowMetaProps, ListRowProps, ListRowTitle, ListRowTitleProps, ListRowTop, ListRowTopProps, ListRowValue, ListRowValueProps } from "./list-row.mjs";
+export { ListRow, ListRowBody, type ListRowBodyProps, ListRowBottom, type ListRowBottomProps, ListRowChevron, type ListRowChevronProps, ListRowDescription, type ListRowDescriptionProps, ListRowGroup, type ListRowGroupProps, ListRowIcon, type ListRowIconProps, ListRowMeta, type ListRowMetaProps, type ListRowProps, ListRowTitle, type ListRowTitleProps, ListRowTop, type ListRowTopProps, ListRowValue, type ListRowValueProps };