@botiverse/raft-ui 0.51.0 → 0.52.1

package/dist/components/panel/panel.recipe.mjs

@@ -0,0 +1,24 @@
+import { tv } from "../../lib/tv.mjs";
+//#region src/components/panel/panel.recipe.ts
+const panel = tv({
+	slots: {
+		root: ["[--panel-footer-clearance:10rem]", "bg-layer-canvas text-foreground"],
+		header: ["[@media(max-height:600px)]:h-12"],
+		body: ["relative min-h-0 flex-1 overflow-hidden"],
+		scrollViewport: ["h-full min-h-0 overflow-y-auto overscroll-contain", "[overflow-anchor:auto] [-webkit-overflow-scrolling:touch]"],
+		scrollContent: ["min-h-full"],
+		section: ["border-t px-5 py-4", "border-line-hairline"],
+		footer: [
+			"relative flex shrink-0 items-center pt-3",
+			"bg-layer-canvas",
+			"px-(--column-margin)",
+			"pb-[calc(env(safe-area-inset-bottom)+1rem)] max-md:pb-[calc(env(safe-area-inset-bottom)+0.5rem)]"
+		]
+	},
+	variants: { edge: {
+		inset: { root: "group/panel-frame" },
+		attached: { root: ["group/panel-frame", "border-l border-line-seam max-md:border-l-0"] }
+	} }
+});
+//#endregion
+export { panel };

package/dist/components/picker-trigger-button/index.d.mts

@@ -0,0 +1,2 @@
+import { PickerTriggerButton, PickerTriggerButtonProps } from "./picker-trigger-button.mjs";
+export { PickerTriggerButton, type PickerTriggerButtonProps };

package/dist/components/picker-trigger-button/picker-trigger-button.d.mts

@@ -0,0 +1,7 @@
+import { StyledProps } from "../../lib/styled-props.mjs";
+import { DataAttributes } from "../../lib/data-attributes.mjs";
+import { Button } from "@base-ui/react/button";
+//#region src/components/picker-trigger-button/picker-trigger-button.d.ts
+export type PickerTriggerButtonProps = StyledProps<Button.Props> & DataAttributes;
+export declare function PickerTriggerButton({ className, render, nativeButton, ...props }: PickerTriggerButtonProps): import("react").JSX.Element;
+//#endregion

package/dist/components/picker-trigger-button/picker-trigger-button.mjs

@@ -0,0 +1,36 @@
+import { tv } from "../../lib/tv.mjs";
+import { defaultNativeButton } from "../../lib/default-native-button.mjs";
+import { jsx } from "react/jsx-runtime";
+import { Button } from "@base-ui/react/button";
+//#region src/components/picker-trigger-button/picker-trigger-button.tsx
+const pickerTriggerButton = tv({ base: [
+	"relative inline-flex h-8 shrink-0 items-center justify-center",
+	"whitespace-nowrap select-none",
+	"outline-[1px] outline-offset-2 outline-transparent transition-colors duration-100 focus-visible:outline-transparent",
+	"disabled:pointer-events-none disabled:transform-none",
+	"has-data-[icon=inline-start]:pl-2.5 has-data-[icon=inline-end]:pr-2.5",
+	"[&_svg]:pointer-events-none [&_svg]:shrink-0 **:data-icon:size-[1em]",
+	"gap-1.5 rounded-control border-0 bg-transparent px-2.5 py-0",
+	"font-sans text-control font-semibold text-foreground-muted",
+	"inset-ring inset-ring-line-seam",
+	"hover:bg-fill-medium active:bg-fill-medium",
+	"data-has-value:bg-info-soft data-has-value:text-foreground data-has-value:inset-ring-0",
+	"data-has-value:hover:bg-info-soft data-has-value:hover:overlay-medium data-has-value:active:overlay-medium",
+	"data-invalid:inset-ring data-invalid:inset-ring-danger-strong",
+	"focus-visible:shadow-focus",
+	"disabled:bg-fill-muted disabled:text-foreground-disabled disabled:opacity-100 disabled:inset-ring-0",
+	"[&_svg:not([class*='size-'])]:size-3.5 [&_svg:not([class*='stroke-'])]:stroke-2",
+	"**:data-picker-trigger-indicator:text-foreground-hint **:data-picker-trigger-indicator:opacity-100",
+	"[&_[data-picker-trigger-indicator]>svg]:size-3.5 [&_[data-picker-trigger-indicator]>svg]:stroke-2 [&_[data-picker-trigger-indicator]>svg_*]:stroke-2"
+] });
+function PickerTriggerButton({ className, render, nativeButton, ...props }) {
+	return /* @__PURE__ */ jsx(Button, {
+		...props,
+		render,
+		nativeButton: nativeButton ?? defaultNativeButton(render),
+		"data-slot": "picker-trigger-button",
+		className: pickerTriggerButton({ className })
+	});
+}
+//#endregion
+export { PickerTriggerButton };

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

@@ -0,0 +1,2 @@
+import { Popover, PopoverArrow, PopoverArrowProps, PopoverBackdrop, PopoverBackdropProps, PopoverClose, PopoverCloseProps, PopoverContent, PopoverContentProps, PopoverDescription, PopoverDescriptionProps, PopoverHeader, PopoverHeaderProps, PopoverPopup, PopoverPopupProps, PopoverPortal, PopoverPortalProps, PopoverProps, PopoverSeparator, PopoverSeparatorProps, PopoverTitle, PopoverTitleProps, PopoverTrigger, PopoverTriggerProps, PopoverViewport, PopoverViewportProps } from "./popover.mjs";
+export { Popover, PopoverArrow, type PopoverArrowProps, PopoverBackdrop, type PopoverBackdropProps, PopoverClose, type PopoverCloseProps, PopoverContent, type PopoverContentProps, PopoverDescription, type PopoverDescriptionProps, PopoverHeader, type PopoverHeaderProps, PopoverPopup, type PopoverPopupProps, PopoverPortal, type PopoverPortalProps, type PopoverProps, PopoverSeparator, type PopoverSeparatorProps, PopoverTitle, type PopoverTitleProps, PopoverTrigger, type PopoverTriggerProps, PopoverViewport, type PopoverViewportProps };

package/dist/components/popover/popover.d.mts

@@ -0,0 +1,41 @@
+import { StyledProps } from "../../lib/styled-props.mjs";
+import { ComponentPropsWithRef } from "react";
+import { Popover } from "@base-ui/react/popover";
+//#region src/components/popover/popover.d.ts
+export type PopoverProps = Popover.Root.Props;
+declare function Popover$1(props: PopoverProps): import("react").JSX.Element;
+export type PopoverTriggerProps = StyledProps<Popover.Trigger.Props>;
+export declare function PopoverTrigger({ className, ...props }: PopoverTriggerProps): import("react").JSX.Element;
+export type PopoverPortalProps = Popover.Portal.Props;
+export declare function PopoverPortal(props: PopoverPortalProps): import("react").JSX.Element;
+export type PopoverPopupProps = ComponentPropsWithRef<"div">;
+export declare function PopoverPopup({ className, ...props }: PopoverPopupProps): import("react").JSX.Element;
+export type PopoverContentProps = StyledProps<Popover.Popup.Props> & Pick<Popover.Positioner.Props, "align" | "alignOffset" | "anchor" | "arrowPadding" | "collisionAvoidance" | "collisionBoundary" | "collisionPadding" | "disableAnchorTracking" | "positionMethod" | "side" | "sideOffset" | "sticky"> & {
+  container?: PopoverPortalProps["container"];
+  portalProps?: PopoverPortalProps;
+};
+export declare function PopoverContent({ align, alignOffset, anchor, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding, disableAnchorTracking, positionMethod, side, sideOffset, sticky, container, portalProps, className, ...props }: PopoverContentProps): import("react").JSX.Element;
+export type PopoverViewportProps = StyledProps<Popover.Viewport.Props>;
+export declare function PopoverViewport({ className, ...props }: PopoverViewportProps): import("react").JSX.Element;
+export type PopoverHeaderProps = ComponentPropsWithRef<"div">;
+export declare function PopoverHeader({ className, ...props }: PopoverHeaderProps): import("react").JSX.Element;
+export type PopoverSeparatorProps = StyledProps<ComponentPropsWithRef<"div">>;
+export declare function PopoverSeparator({ className, ...props }: PopoverSeparatorProps): import("react").JSX.Element;
+export type PopoverTitleProps = StyledProps<Popover.Title.Props>;
+export declare function PopoverTitle({ className, ...props }: PopoverTitleProps): import("react").JSX.Element;
+export type PopoverDescriptionProps = StyledProps<Popover.Description.Props>;
+export declare function PopoverDescription({ className, ...props }: PopoverDescriptionProps): import("react").JSX.Element;
+export type PopoverCloseProps = StyledProps<Popover.Close.Props>;
+export declare function PopoverClose({ className, ...props }: PopoverCloseProps): import("react").JSX.Element;
+export type PopoverArrowProps = StyledProps<Popover.Arrow.Props>;
+export declare function PopoverArrow({ className, ...props }: PopoverArrowProps): import("react").JSX.Element;
+export type PopoverBackdropProps = StyledProps<Popover.Backdrop.Props>;
+export declare function PopoverBackdrop({ className, ...props }: PopoverBackdropProps): import("react").JSX.Element;
+export type PopoverBodyProps = ComponentPropsWithRef<"div">;
+/** The panel's text: a `PopoverTitle` and a `PopoverDescription`, 16px in from its edges. */
+export declare function PopoverBody({ className, ...props }: PopoverBodyProps): import("react").JSX.Element;
+export type PopoverActionsProps = ComponentPropsWithRef<"div">;
+/** The panel's buttons, at its end, under `PopoverBody`: the way out first, then the confirm button. */
+export declare function PopoverActions({ className, ...props }: PopoverActionsProps): import("react").JSX.Element;
+//#endregion
+export { Popover$1 as Popover };

package/dist/components/popover/popover.mjs

@@ -0,0 +1,184 @@
+import { tv } from "../../lib/tv.mjs";
+import { useThemeScopeProps } from "../../lib/theme/theme-scope.mjs";
+import { usePopupCollisionPadding } from "../../lib/frame-insets.mjs";
+import { jsx } from "react/jsx-runtime";
+import { Popover } from "@base-ui/react/popover";
+//#region src/components/popover/popover.tsx
+const popover = tv({ slots: {
+	trigger: ["select-none"],
+	positioner: ["isolate z-50 outline-none"],
+	content: [
+		"max-h-(--available-height) min-w-[220px] overflow-hidden",
+		"outline-none",
+		"rounded-container bg-layer-popover text-foreground",
+		"shadow-float ring-1 ring-line-seam"
+	],
+	header: ["flex items-center justify-between px-3", "min-h-11 gap-2 py-1.5 pr-1.5 pl-4"],
+	body: ["flex min-w-0 flex-col gap-1.5", "px-4 pt-4 pb-3 last:pb-4"],
+	actions: ["flex flex-wrap items-center justify-end gap-2", "px-4 pb-3 last:pb-4"],
+	separator: ["border-t", "border-line-hairline"],
+	title: ["m-0", "font-sans text-headline font-bold text-foreground"],
+	description: ["m-0", "font-sans text-footnote text-foreground-muted"],
+	close: [
+		"inline-flex items-center justify-center",
+		"outline-none transition-colors",
+		"h-8 min-w-8 rounded-chip px-1.5",
+		"font-sans text-footnote font-bold text-foreground",
+		"hover:bg-fill-medium active:bg-fill-medium",
+		"focus-visible:shadow-focus",
+		"[&_svg]:size-4.5"
+	],
+	arrow: ["size-2 rotate-45", "border-l border-t border-line-seam bg-layer-popover"],
+	backdrop: ["fixed inset-0", "bg-transparent"],
+	viewport: ["block"]
+} });
+function Popover$1(props) {
+	return /* @__PURE__ */ jsx(Popover.Root, {
+		"data-slot": "popover",
+		...props
+	});
+}
+function PopoverTrigger({ className, ...props }) {
+	const { trigger } = popover();
+	return /* @__PURE__ */ jsx(Popover.Trigger, {
+		"data-slot": "popover-trigger",
+		className: trigger({ className }),
+		...props
+	});
+}
+function PopoverPortal(props) {
+	return /* @__PURE__ */ jsx(Popover.Portal, {
+		"data-slot": "popover-portal",
+		...useThemeScopeProps(props)
+	});
+}
+function PopoverPopup({ className, ...props }) {
+	const { content } = popover();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "popover-content",
+		className: content({ className }),
+		...props
+	});
+}
+function PopoverFramePositioner({ collisionPadding, container, ...props }) {
+	const padding = usePopupCollisionPadding(collisionPadding, 5, container);
+	return /* @__PURE__ */ jsx(Popover.Positioner, {
+		collisionPadding: padding,
+		...props
+	});
+}
+function PopoverContent({ align = "start", alignOffset = 0, anchor, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding, disableAnchorTracking, positionMethod = "fixed", side = "bottom", sideOffset = 4, sticky, container, portalProps, className, ...props }) {
+	const { positioner, content } = popover();
+	const portalContainer = container !== void 0 ? container : portalProps?.container;
+	return /* @__PURE__ */ jsx(PopoverPortal, {
+		...portalProps,
+		container: portalContainer,
+		children: /* @__PURE__ */ jsx(PopoverFramePositioner, {
+			align,
+			alignOffset,
+			anchor,
+			arrowPadding,
+			collisionAvoidance,
+			collisionBoundary,
+			collisionPadding,
+			container: portalContainer,
+			disableAnchorTracking,
+			positionMethod,
+			side,
+			sideOffset,
+			sticky,
+			className: positioner(),
+			children: /* @__PURE__ */ jsx(Popover.Popup, {
+				"data-slot": "popover-content",
+				className: content({ className }),
+				...props
+			})
+		})
+	});
+}
+function PopoverViewport({ className, ...props }) {
+	const { viewport } = popover();
+	return /* @__PURE__ */ jsx(Popover.Viewport, {
+		"data-slot": "popover-viewport",
+		className: viewport({ className }),
+		...props
+	});
+}
+function PopoverHeader({ className, ...props }) {
+	const { header } = popover();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "popover-header",
+		className: header({ className }),
+		...props
+	});
+}
+function PopoverSeparator({ className, ...props }) {
+	const { separator } = popover();
+	return /* @__PURE__ */ jsx("div", {
+		role: "separator",
+		"aria-orientation": "horizontal",
+		"data-slot": "popover-separator",
+		className: separator({ className }),
+		...props
+	});
+}
+function PopoverTitle({ className, ...props }) {
+	const { title } = popover();
+	return /* @__PURE__ */ jsx(Popover.Title, {
+		"data-slot": "popover-title",
+		className: title({ className }),
+		...props
+	});
+}
+function PopoverDescription({ className, ...props }) {
+	const { description } = popover();
+	return /* @__PURE__ */ jsx(Popover.Description, {
+		"data-slot": "popover-description",
+		className: description({ className }),
+		...props
+	});
+}
+function PopoverClose({ className, ...props }) {
+	const { close } = popover();
+	return /* @__PURE__ */ jsx(Popover.Close, {
+		"data-slot": "popover-close",
+		className: close({ className }),
+		...props
+	});
+}
+function PopoverArrow({ className, ...props }) {
+	const { arrow } = popover();
+	return /* @__PURE__ */ jsx(Popover.Arrow, {
+		"data-slot": "popover-arrow",
+		className: arrow({ className }),
+		...props
+	});
+}
+function PopoverBackdrop({ className, ...props }) {
+	const { backdrop } = popover();
+	return /* @__PURE__ */ jsx(Popover.Backdrop, {
+		"data-slot": "popover-backdrop",
+		className: backdrop({ className }),
+		...props
+	});
+}
+/** The panel's text: a `PopoverTitle` and a `PopoverDescription`, 16px in from its edges. */
+function PopoverBody({ className, ...props }) {
+	const { body } = popover();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "popover-body",
+		className: body({ className }),
+		...props
+	});
+}
+/** The panel's buttons, at its end, under `PopoverBody`: the way out first, then the confirm button. */
+function PopoverActions({ className, ...props }) {
+	const { actions } = popover();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "popover-actions",
+		className: actions({ className }),
+		...props
+	});
+}
+//#endregion
+export { Popover$1 as Popover, PopoverActions, PopoverArrow, PopoverBackdrop, PopoverBody, PopoverClose, PopoverContent, PopoverDescription, PopoverHeader, PopoverPopup, PopoverPortal, PopoverSeparator, PopoverTitle, PopoverTrigger, PopoverViewport };

package/dist/components/preview-card/index.d.mts

@@ -0,0 +1,2 @@
+import { PreviewCard, PreviewCardActions, PreviewCardActionsProps, PreviewCardArrow, PreviewCardArrowProps, PreviewCardBody, PreviewCardBodyProps, PreviewCardContent, PreviewCardContentProps, PreviewCardDescription, PreviewCardDescriptionProps, PreviewCardEyebrow, PreviewCardEyebrowProps, PreviewCardFooter, PreviewCardFooterProps, PreviewCardHeader, PreviewCardHeaderProps, PreviewCardMeta, PreviewCardMetaProps, PreviewCardPopup, PreviewCardPopupProps, PreviewCardPortal, PreviewCardPortalProps, PreviewCardProps, PreviewCardSeparator, PreviewCardSeparatorProps, PreviewCardTitle, PreviewCardTitleProps, PreviewCardTrigger, PreviewCardTriggerProps } from "./preview-card.mjs";
+export { PreviewCard, PreviewCardActions, type PreviewCardActionsProps, PreviewCardArrow, type PreviewCardArrowProps, PreviewCardBody, type PreviewCardBodyProps, PreviewCardContent, type PreviewCardContentProps, PreviewCardDescription, type PreviewCardDescriptionProps, PreviewCardEyebrow, type PreviewCardEyebrowProps, PreviewCardFooter, type PreviewCardFooterProps, PreviewCardHeader, type PreviewCardHeaderProps, PreviewCardMeta, type PreviewCardMetaProps, PreviewCardPopup, type PreviewCardPopupProps, PreviewCardPortal, type PreviewCardPortalProps, type PreviewCardProps, PreviewCardSeparator, type PreviewCardSeparatorProps, PreviewCardTitle, type PreviewCardTitleProps, PreviewCardTrigger, type PreviewCardTriggerProps };

package/dist/components/preview-card/preview-card.d.mts

@@ -0,0 +1,43 @@
+import { StyledProps } from "../../lib/styled-props.mjs";
+import { ComponentPropsWithRef } from "react";
+import { PreviewCard } from "@base-ui/react/preview-card";
+//#region src/components/preview-card/preview-card.d.ts
+export type PreviewCardProps = PreviewCard.Root.Props;
+declare function PreviewCard$1(props: PreviewCardProps): import("react").JSX.Element;
+export type PreviewCardTriggerProps = StyledProps<PreviewCard.Trigger.Props>;
+export declare function PreviewCardTrigger({ delay, closeDelay, className, ...props }: PreviewCardTriggerProps): import("react").JSX.Element;
+export type PreviewCardPortalProps = PreviewCard.Portal.Props;
+export declare function PreviewCardPortal(props: PreviewCardPortalProps): import("react").JSX.Element;
+export type PreviewCardPopupProps = ComponentPropsWithRef<"div">;
+export declare function PreviewCardPopup({ className, ...props }: PreviewCardPopupProps): import("react").JSX.Element;
+export type PreviewCardContentProps = StyledProps<PreviewCard.Popup.Props> & Pick<PreviewCard.Positioner.Props, "align" | "alignOffset" | "anchor" | "arrowPadding" | "collisionAvoidance" | "collisionBoundary" | "collisionPadding" | "disableAnchorTracking" | "positionMethod" | "side" | "sideOffset" | "sticky"> & {
+  portalProps?: PreviewCardPortalProps;
+};
+export declare function PreviewCardContent({ align, alignOffset, anchor, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding, disableAnchorTracking, positionMethod, side, sideOffset, sticky, portalProps, className, ...props }: PreviewCardContentProps): import("react").JSX.Element;
+export type PreviewCardHeaderProps = ComponentPropsWithRef<"div">;
+export declare function PreviewCardHeader({ className, ...props }: PreviewCardHeaderProps): import("react").JSX.Element;
+export type PreviewCardSeparatorProps = StyledProps<ComponentPropsWithRef<"div">>;
+export declare function PreviewCardSeparator({ className, ...props }: PreviewCardSeparatorProps): import("react").JSX.Element;
+export type PreviewCardTitleProps = ComponentPropsWithRef<"p">;
+export declare function PreviewCardTitle({ className, ...props }: PreviewCardTitleProps): import("react").JSX.Element;
+export type PreviewCardDescriptionProps = ComponentPropsWithRef<"p">;
+export declare function PreviewCardDescription({ className, ...props }: PreviewCardDescriptionProps): import("react").JSX.Element;
+export type PreviewCardArrowProps = StyledProps<PreviewCard.Arrow.Props>;
+export declare function PreviewCardArrow({ className, ...props }: PreviewCardArrowProps): import("react").JSX.Element;
+export type PreviewCardBodyProps = ComponentPropsWithRef<"div">;
+/** The item card's block: the id line, the title and the details row, in that order. */
+export declare function PreviewCardBody({ className, ...props }: PreviewCardBodyProps): import("react").JSX.Element;
+export type PreviewCardEyebrowProps = ComponentPropsWithRef<"p">;
+/** The muted line above the title that identifies the item, such as its id. One line, truncated. */
+export declare function PreviewCardEyebrow({ className, ...props }: PreviewCardEyebrowProps): import("react").JSX.Element;
+export type PreviewCardMetaProps = ComponentPropsWithRef<"div">;
+/** The row under the title: one state chip, then muted details. Wraps when it runs out of room. */
+export declare function PreviewCardMeta({ className, ...props }: PreviewCardMetaProps): import("react").JSX.Element;
+export type PreviewCardActionsProps = ComponentPropsWithRef<"div">;
+/** The row of at most two buttons. */
+export declare function PreviewCardActions({ className, ...props }: PreviewCardActionsProps): import("react").JSX.Element;
+export type PreviewCardFooterProps = ComponentPropsWithRef<"p">;
+/** The caption under a hairline at the bottom of the card: where the item comes from. */
+export declare function PreviewCardFooter({ className, ...props }: PreviewCardFooterProps): import("react").JSX.Element;
+//#endregion
+export { PreviewCard$1 as PreviewCard };

package/dist/components/preview-card/preview-card.mjs

@@ -0,0 +1,197 @@
+import { tv } from "../../lib/tv.mjs";
+import { useTheme } from "../../lib/theme/use-theme.mjs";
+import { resolveThemeScopeProps, useThemeScopeProps } from "../../lib/theme/theme-scope.mjs";
+import { usePopupCollisionPadding } from "../../lib/frame-insets.mjs";
+import { jsx } from "react/jsx-runtime";
+import { PreviewCard } from "@base-ui/react/preview-card";
+//#region src/components/preview-card/preview-card.tsx
+const previewCard = tv({ slots: {
+	trigger: [],
+	positioner: ["isolate z-50 outline-none"],
+	popup: [
+		"max-h-(--available-height) min-w-[220px] overflow-hidden",
+		"outline-none",
+		"origin-(--transform-origin) transform-gpu opacity-100 will-change-[transform,opacity]",
+		"transition-[opacity,transform] duration-250 ease-[cubic-bezier(0.22,1,0.36,1)]",
+		"data-starting-style:scale-[0.97] data-starting-style:opacity-0",
+		"data-ending-style:scale-[0.99] data-ending-style:opacity-0 data-ending-style:duration-150",
+		"data-instant:transition-none motion-reduce:transition-none",
+		"w-[300px] rounded-container bg-layer-popover text-foreground",
+		"shadow-float ring-1 ring-line-seam"
+	],
+	header: ["flex items-start gap-3", "px-4 pt-4 pb-3 last:pb-4"],
+	separator: ["border-t", "border-line-hairline"],
+	title: ["m-0 truncate", "font-sans text-headline font-bold text-foreground"],
+	description: ["m-0 truncate", "px-4 py-3 last:pb-4 font-sans text-callout text-foreground-muted"],
+	arrow: ["size-2 rotate-45", "border-l border-t border-line-seam bg-layer-popover"],
+	body: [
+		"flex min-w-0 flex-col gap-1.5",
+		"px-4 pt-4 pb-3 last:pb-4",
+		"*:data-[slot=preview-card-title]:line-clamp-3 *:data-[slot=preview-card-title]:whitespace-normal"
+	],
+	eyebrow: ["m-0 truncate", "font-mono text-mono-meta text-foreground-muted"],
+	meta: ["flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1", "m-0 font-sans text-callout text-foreground-muted"],
+	actions: ["flex flex-wrap items-center gap-2", "px-4 pb-3 last:pb-4"],
+	footer: [
+		"m-0 truncate",
+		"border-t border-line-hairline px-4 py-2",
+		"font-sans text-caption text-foreground-muted"
+	]
+} });
+function PreviewCard$1(props) {
+	return /* @__PURE__ */ jsx(PreviewCard.Root, {
+		"data-slot": "preview-card",
+		...props
+	});
+}
+function PreviewCardTrigger({ delay = 80, closeDelay = 40, className, ...props }) {
+	const { trigger } = previewCard();
+	return /* @__PURE__ */ jsx(PreviewCard.Trigger, {
+		"data-slot": "preview-card-trigger",
+		delay,
+		closeDelay,
+		className: trigger({ className }),
+		...props
+	});
+}
+function PreviewCardPortal(props) {
+	return /* @__PURE__ */ jsx(PreviewCard.Portal, {
+		"data-slot": "preview-card-portal",
+		...useThemeScopeProps(props)
+	});
+}
+function PreviewCardPopup({ className, ...props }) {
+	const themeState = useTheme();
+	const { popup } = previewCard();
+	const scopeProps = resolveThemeScopeProps({
+		...props,
+		className: popup({ className })
+	}, themeState);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "preview-card-content",
+		...scopeProps
+	});
+}
+function PreviewCardFramePositioner({ collisionPadding, container, ...props }) {
+	const padding = usePopupCollisionPadding(collisionPadding, 5, container);
+	return /* @__PURE__ */ jsx(PreviewCard.Positioner, {
+		collisionPadding: padding,
+		...props
+	});
+}
+function PreviewCardContent({ align = "start", alignOffset = 0, anchor, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding, disableAnchorTracking, positionMethod = "fixed", side = "bottom", sideOffset = 6, sticky, portalProps, className, ...props }) {
+	const { positioner, popup } = previewCard();
+	return /* @__PURE__ */ jsx(PreviewCardPortal, {
+		...portalProps,
+		children: /* @__PURE__ */ jsx(PreviewCardFramePositioner, {
+			align,
+			alignOffset,
+			anchor,
+			arrowPadding,
+			collisionAvoidance,
+			collisionBoundary,
+			collisionPadding,
+			container: portalProps?.container,
+			disableAnchorTracking,
+			positionMethod,
+			side,
+			sideOffset,
+			sticky,
+			className: positioner(),
+			children: /* @__PURE__ */ jsx(PreviewCard.Popup, {
+				"data-slot": "preview-card-content",
+				className: popup({ className }),
+				...props
+			})
+		})
+	});
+}
+function PreviewCardHeader({ className, ...props }) {
+	const { header } = previewCard();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "preview-card-header",
+		className: header({ className }),
+		...props
+	});
+}
+function PreviewCardSeparator({ className, ...props }) {
+	const { separator } = previewCard();
+	return /* @__PURE__ */ jsx("div", {
+		role: "separator",
+		"aria-orientation": "horizontal",
+		"data-slot": "preview-card-separator",
+		className: separator({ className }),
+		...props
+	});
+}
+function PreviewCardTitle({ className, ...props }) {
+	const { title } = previewCard();
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "preview-card-title",
+		className: title({ className }),
+		...props
+	});
+}
+function PreviewCardDescription({ className, ...props }) {
+	const { description } = previewCard();
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "preview-card-description",
+		className: description({ className }),
+		...props
+	});
+}
+function PreviewCardArrow({ className, ...props }) {
+	const { arrow } = previewCard();
+	return /* @__PURE__ */ jsx(PreviewCard.Arrow, {
+		"data-slot": "preview-card-arrow",
+		className: arrow({ className }),
+		...props
+	});
+}
+/** The item card's block: the id line, the title and the details row, in that order. */
+function PreviewCardBody({ className, ...props }) {
+	const { body } = previewCard();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "preview-card-body",
+		className: body({ className }),
+		...props
+	});
+}
+/** The muted line above the title that identifies the item, such as its id. One line, truncated. */
+function PreviewCardEyebrow({ className, ...props }) {
+	const { eyebrow } = previewCard();
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "preview-card-eyebrow",
+		className: eyebrow({ className }),
+		...props
+	});
+}
+/** The row under the title: one state chip, then muted details. Wraps when it runs out of room. */
+function PreviewCardMeta({ className, ...props }) {
+	const { meta } = previewCard();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "preview-card-meta",
+		className: meta({ className }),
+		...props
+	});
+}
+/** The row of at most two buttons. */
+function PreviewCardActions({ className, ...props }) {
+	const { actions } = previewCard();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "preview-card-actions",
+		className: actions({ className }),
+		...props
+	});
+}
+/** The caption under a hairline at the bottom of the card: where the item comes from. */
+function PreviewCardFooter({ className, ...props }) {
+	const { footer } = previewCard();
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "preview-card-footer",
+		className: footer({ className }),
+		...props
+	});
+}
+//#endregion
+export { PreviewCard$1 as PreviewCard, PreviewCardActions, PreviewCardArrow, PreviewCardBody, PreviewCardContent, PreviewCardDescription, PreviewCardEyebrow, PreviewCardFooter, PreviewCardHeader, PreviewCardMeta, PreviewCardPopup, PreviewCardPortal, PreviewCardSeparator, PreviewCardTitle, PreviewCardTrigger };

package/dist/components/profile-panel/index.d.mts

@@ -0,0 +1,2 @@
+import { ProfilePanel, ProfilePanelBody, ProfilePanelBodyProps, ProfilePanelHeader, ProfilePanelHeaderContent, ProfilePanelHeaderContentProps, ProfilePanelHeaderProps, ProfilePanelProps, ProfilePanelSection, ProfilePanelSectionProps } from "./profile-panel.mjs";
+export { ProfilePanel, ProfilePanelBody, type ProfilePanelBodyProps, ProfilePanelHeader, ProfilePanelHeaderContent, type ProfilePanelHeaderContentProps, type ProfilePanelHeaderProps, type ProfilePanelProps, ProfilePanelSection, type ProfilePanelSectionProps };

package/dist/components/profile-panel/profile-panel.d.mts

@@ -0,0 +1,14 @@
+import { PanelBodyProps, PanelProps, PanelSectionProps } from "../panel/panel.mjs";
+import { PanelHeaderContentProps, PanelHeaderProps } from "../panel/panel-header.mjs";
+//#region src/components/profile-panel/profile-panel.d.ts
+export type ProfilePanelProps = PanelProps;
+export declare function ProfilePanel({ className, edge, ...props }: ProfilePanelProps): import("react").JSX.Element;
+export type ProfilePanelHeaderProps = PanelHeaderProps;
+export declare function ProfilePanelHeader({ className, ...props }: ProfilePanelHeaderProps): import("react").JSX.Element;
+export type ProfilePanelHeaderContentProps = PanelHeaderContentProps;
+export declare function ProfilePanelHeaderContent({ className, ...props }: ProfilePanelHeaderContentProps): import("react").JSX.Element;
+export type ProfilePanelBodyProps = PanelBodyProps;
+export declare function ProfilePanelBody({ className, ...props }: ProfilePanelBodyProps): import("react").JSX.Element;
+export type ProfilePanelSectionProps = PanelSectionProps;
+export declare function ProfilePanelSection({ className, ...props }: ProfilePanelSectionProps): import("react").JSX.Element;
+//#endregion

package/dist/components/profile-panel/profile-panel.mjs

@@ -0,0 +1,46 @@
+import { Panel, PanelBody, PanelSection } from "../panel/panel.mjs";
+import { conversationPanel } from "../conversation-panel/conversation-panel.recipe.mjs";
+import { PanelHeader, PanelHeaderContent } from "../panel/panel-header.mjs";
+import { profilePanel } from "./profile-panel.recipe.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/profile-panel/profile-panel.tsx
+function ProfilePanel({ className, edge = "inset", ...props }) {
+	const { root } = profilePanel();
+	return /* @__PURE__ */ jsx(Panel, {
+		...props,
+		edge,
+		"data-slot": "profile-panel",
+		className: root({ className })
+	});
+}
+function ProfilePanelHeader({ className, ...props }) {
+	const { header } = profilePanel();
+	return /* @__PURE__ */ jsx(PanelHeader, {
+		...props,
+		className: header({ className })
+	});
+}
+function ProfilePanelHeaderContent({ className, ...props }) {
+	const { headerContent } = profilePanel();
+	return /* @__PURE__ */ jsx(PanelHeaderContent, {
+		...props,
+		className: headerContent({ className })
+	});
+}
+function ProfilePanelBody({ className, ...props }) {
+	const { content } = conversationPanel();
+	return /* @__PURE__ */ jsx(PanelBody, {
+		...props,
+		"data-slot": "profile-panel-body",
+		className: content({ className })
+	});
+}
+function ProfilePanelSection({ className, ...props }) {
+	const { section } = profilePanel();
+	return /* @__PURE__ */ jsx(PanelSection, {
+		...props,
+		className: section({ className })
+	});
+}
+//#endregion
+export { ProfilePanel, ProfilePanelBody, ProfilePanelHeader, ProfilePanelHeaderContent, ProfilePanelSection };

package/dist/components/profile-panel/profile-panel.recipe.mjs

@@ -0,0 +1,14 @@
+import { tv } from "../../lib/tv.mjs";
+//#region src/components/profile-panel/profile-panel.recipe.ts
+const profilePanel = tv({ slots: {
+	root: [
+		"flex h-full min-h-0 min-w-0 flex-1 flex-col",
+		"[--panel-footer-clearance:0rem]",
+		"relative bg-layer-canvas font-sans text-foreground"
+	],
+	header: [],
+	headerContent: ["items-stretch gap-0"],
+	section: ["border-line-hairline px-5 py-4"]
+} });
+//#endregion
+export { profilePanel };

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

@@ -0,0 +1,2 @@
+import { Progress, ProgressHeader, ProgressHeaderProps, ProgressIndicator, ProgressIndicatorProps, ProgressLabel, ProgressLabelProps, ProgressProps, ProgressTrack, ProgressTrackProps, ProgressValue, ProgressValueProps } from "./progress.mjs";
+export { Progress, ProgressHeader, type ProgressHeaderProps, ProgressIndicator, type ProgressIndicatorProps, ProgressLabel, type ProgressLabelProps, type ProgressProps, ProgressTrack, type ProgressTrackProps, ProgressValue, type ProgressValueProps };