@giddaa-housing/ui 2.0.0 → 3.0.0

package/dist/button.js

@@ -7,9 +7,10 @@ import { useRender } from "@base-ui/react/use-render";
 import { cva } from "class-variance-authority";
 import { Button as Button$1 } from "@base-ui/react/button";
 //#region src/button.tsx
-const buttonVariants = cva("group/button inline-flex shrink-0 items-center justify-center rounded-full bg-clip-padding whitespace-nowrap font-bold transition-[background-color,color,border-color,box-shadow,transform] outline-none select-none focus-visible:border-line-focus focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-invalid:border-line-danger aria-invalid:ring-3 aria-invalid:ring-line-danger/20 aria-invalid:focus-visible:border-line-danger aria-invalid:focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-danger)] [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+const buttonVariants = cva("group/button inline-flex shrink-0 items-center justify-center rounded-full bg-clip-padding whitespace-nowrap font-bold transition-[background-color,color,border-color,box-shadow,scale,translate] duration-(--duration-motion-press) ease-gdt-out outline-none select-none focus-visible:border-line-focus focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] active:not-aria-[haspopup]:translate-y-px motion-reduce:active:not-aria-[haspopup]:translate-y-0 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-invalid:border-line-danger aria-invalid:ring-3 aria-invalid:ring-line-danger/20 aria-invalid:focus-visible:border-line-danger aria-invalid:focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-danger)] [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
 	variants: {
 		variant: {
+			back: "border border-line bg-canvas text-fg-primary hover:border-line-strong hover:bg-surface active:border-line-strong active:bg-surface-raised data-focused:border-line-strong data-focused:bg-surface data-pressed:border-line-strong data-pressed:bg-surface-raised disabled:border-line-subtle disabled:text-fg-caption-placeholder disabled:opacity-100 aria-disabled:border-line-subtle aria-disabled:text-fg-caption-placeholder aria-disabled:opacity-100",
 			primary: "bg-action-primary text-fg-on-brand hover:bg-action-primary-hover active:bg-action-primary-pressed",
 			"primary-outline": "border-2 border-action-primary bg-transparent text-fg-brand hover:bg-surface-brand-subtle active:bg-surface-brand-subtle data-focused:bg-surface-brand-subtle data-pressed:bg-surface-brand-subtle",
 			secondary: "bg-surface-brand-subtle text-fg-brand hover:bg-action-primary-hover hover:text-fg-on-brand active:bg-action-primary-pressed active:text-fg-on-brand data-focused:bg-action-primary-hover data-pressed:bg-action-primary-pressed data-focused:text-fg-on-brand data-pressed:text-fg-on-brand",
@@ -19,7 +20,7 @@ const buttonVariants = cva("group/button inline-flex shrink-0 items-center justi
 			ghost: "bg-transparent text-fg-primary hover:bg-surface active:bg-surface-raised data-focused:bg-surface data-pressed:bg-surface-raised",
 			danger: "bg-action-danger text-fg-on-brand hover:bg-action-danger-hover active:bg-action-danger-pressed data-focused:bg-action-danger-hover data-pressed:bg-action-danger-pressed",
 			whatsapp: "bg-whatsapp-button text-black [&_svg]:text-white hover:brightness-95 active:brightness-90 data-focused:brightness-95 data-pressed:brightness-90",
-			"glass-overlay": "bg-surface-glass-overlay-button text-fg-on-brand shadow-2 backdrop-blur-sm hover:scale-105 active:scale-95",
+			"glass-overlay": "bg-surface-glass-overlay-button text-fg-on-brand shadow-2 backdrop-blur-sm active:scale-[0.97] motion-reduce:active:scale-100",
 			"link-brand": "border-transparent bg-transparent px-0 text-fg-brand hover:underline active:underline active:opacity-70",
 			"link-neutral": "border-transparent bg-transparent px-0 text-fg-secondary hover:underline active:underline active:opacity-70"
 		},
@@ -54,7 +55,7 @@ function Button({ className, variant = "primary", size, isLoading = false, child
 		disabled: _disabled,
 		...props,
 		children: [
-			isLoading && /* @__PURE__ */ jsx(Loader, { className: "size-4 animate-spin" }),
+			isLoading && /* @__PURE__ */ jsx(Loader, { className: "size-4 animate-spin motion-reduce:animate-none" }),
 			" ",
 			children
 		]

package/dist/call-card.d.ts

@@ -0,0 +1,131 @@
+import { Avatar } from "./avatar.js";
+import * as React from "react";
+//#region src/call-card.d.ts
+/**
+ * Docked vs full-window presentation. Purely structural: `full` is the centered
+ * call window that floats over an overlay; `minimized` is the horizontal docked
+ * bar. Everything below the card shell — direction, spacing, type ramp — keys
+ * off this one axis.
+ */
+type CallCardSize = "full" | "minimized";
+/**
+ * The five visual states from the design's two branches.
+ * OUTBOUND (a call we place): `calling` → `ringing` → `in-call` → `call-ended`,
+ * whose actions are Mute + End Call. INBOUND: `incoming`, whose actions are
+ * Ignore + Accept. `state` is the sole driver of the status-dot colour and of
+ * whether the End Call button retires to a neutral tone.
+ */
+type CallCardState = "ringing" | "calling" | "in-call" | "call-ended" | "incoming";
+type CallCardOverlayProps = React.ComponentProps<"div">;
+/**
+ * The scrim behind a `size="full"` card. An overlay must not share a surface
+ * with the thread behind it, so the card floats on `bg-surface-overlay` above
+ * this dimmed, blurred layer. Centres its child; give it the card as children.
+ *
+ * Only for the full state — a minimized bar docks inline and needs no scrim.
+ */
+declare function CallCardOverlay({ className, ...props }: CallCardOverlayProps): React.JSX.Element;
+/** The card shell — surface, border, elevation, and the per-size layout. */
+declare const callCardVariants: (props?: ({
+  size?: "full" | "minimized" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface CallCardProps extends React.ComponentProps<"section"> {
+  /** Docked bar vs full window — see {@link CallCardSize}. @default "full" */
+  size?: CallCardSize;
+  /**
+   * Which point of the call this is — see {@link CallCardState}. Required: it
+   * drives the status-dot colour and the End Call button's tone, so there is no
+   * safe default.
+   */
+  state: CallCardState;
+}
+/**
+ * The reusable call overlay — the in-product surface shown while a voice call is
+ * ringing, connecting, connected, or just ended. A presentational primitive:
+ * it owns shape, elevation and per-size layout, and exposes state through
+ * context so its parts size and colour themselves. Wiring (mute, hang up,
+ * accept) is the consumer's — pass handlers to the action parts.
+ *
+ * Compose it like a Dialog: a shell with slotted parts. For the full state,
+ * wrap it in {@link CallCardOverlay}; the minimized bar docks on its own.
+ */
+declare function CallCard({ size, state, className, children, ...props }: CallCardProps): React.JSX.Element;
+interface CallCardAvatarProps extends Omit<React.ComponentProps<typeof Avatar>, "size"> {
+  /** Contact photo. When absent, the fallback glyph shows. */
+  src?: string;
+  /** Alt text for the photo. */
+  alt?: string;
+  /** Fallback shown with no photo — initials or a glyph. @default person glyph */
+  fallback?: React.ReactNode;
+}
+/**
+ * The contact avatar. Wraps the giddaa `Avatar` so it inherits the brand-subtle
+ * wash and brand glyph tokens — 112px in the full window (the design's largest
+ * element), 40px on the docked bar. Pass `src` for a photo; the glyph is only a
+ * fallback.
+ */
+declare function CallCardAvatar({ src, alt, fallback, className, ...props }: CallCardAvatarProps): React.JSX.Element;
+type CallCardIdentityProps = React.ComponentProps<"div">;
+/** Stacks the name over the status line; centred in full, start-aligned when docked. */
+declare function CallCardIdentity({ className, ...props }: CallCardIdentityProps): React.JSX.Element;
+type CallCardNameProps = React.ComponentProps<"p">;
+/** The contact name. Full uses the heading ramp; the docked bar truncates. */
+declare function CallCardName({ className, ...props }: CallCardNameProps): React.JSX.Element;
+type CallCardStatusProps = React.ComponentProps<"div">;
+/**
+ * The status line: a state-coloured dot followed by its copy — the number, the
+ * running timer, or the end notice. The dot's colour comes from the card's
+ * `state`; the copy is the caller's (never bake the number or timer in).
+ */
+declare function CallCardStatus({ className, children, ...props }: CallCardStatusProps): React.JSX.Element;
+type CallCardActionsProps = React.ComponentProps<"div">;
+/**
+ * The action row. Holds the call actions, led by the window control. Turning an
+ * action off simply drops it — the row re-centres, no dead slot. Never leave it
+ * empty: an overlay with no controls traps the user in a live call.
+ */
+declare function CallCardActions({ className, ...props }: CallCardActionsProps): React.JSX.Element;
+type CallCardActionTone = "tertiary" | "danger" | "primary";
+interface CallCardActionProps extends React.ComponentProps<"button"> {
+  /**
+   * Surface emphasis. `tertiary` = reversible/neutral (Mute), `danger` =
+   * destructive (End Call, Ignore), `primary` = the call to answer (Accept).
+   * @default "tertiary"
+   */
+  tone?: CallCardActionTone;
+}
+/**
+ * The circular icon-button primitive every call action is built from. Sizes
+ * itself off the card, colours itself off `tone`. Pass a single icon as its
+ * child; it's auto-sized. Use the presets below for the standard actions.
+ */
+declare function CallCardAction({ tone, type, className, ...props }: CallCardActionProps): React.JSX.Element;
+interface CallCardMuteButtonProps extends Omit<CallCardActionProps, "tone" | "children"> {
+  /** Whether the mic is currently muted — swaps the glyph and the label. */
+  muted?: boolean;
+}
+/** Mute toggle. Reversible, so it stays neutral and never competes with End Call. */
+declare function CallCardMuteButton({ muted, "aria-label": ariaLabel, ...props }: CallCardMuteButtonProps): React.JSX.Element;
+type CallCardEndCallButtonProps = Omit<CallCardActionProps, "tone" | "children">;
+/**
+ * End Call. Destructive, so it's `danger` — except in `call-ended`, where the
+ * call is already over and it retires to a neutral tone. The rotated handset is
+ * a placeholder for the exact SVG.
+ */
+declare function CallCardEndCallButton({ className, "aria-label": ariaLabel, ...props }: CallCardEndCallButtonProps): React.JSX.Element;
+type CallCardAcceptButtonProps = Omit<CallCardActionProps, "tone" | "children">;
+/** Accept an incoming call. The brand primary — the button the thumb finds first. */
+declare function CallCardAcceptButton({ "aria-label": ariaLabel, ...props }: CallCardAcceptButtonProps): React.JSX.Element;
+type CallCardIgnoreButtonProps = Omit<CallCardActionProps, "tone" | "children">;
+/** Dismiss an incoming call. Same clay and rotated handset as End Call. */
+declare function CallCardIgnoreButton({ "aria-label": ariaLabel, ...props }: CallCardIgnoreButtonProps): React.JSX.Element;
+type CallCardWindowControlProps = React.ComponentProps<"button">;
+/**
+ * The window chrome — Minimize in the full window (pinned top-right), Expand on
+ * the docked bar (leads the action row). Neutral and quiet by design: a window
+ * control is never destructive and must not pull the eye from End Call. Place it
+ * as the first child of {@link CallCardActions}; it self-positions per size.
+ */
+declare function CallCardWindowControl({ className, "aria-label": ariaLabel, type, ...props }: CallCardWindowControlProps): React.JSX.Element;
+//#endregion
+export { CallCard, CallCardAcceptButton, type CallCardAcceptButtonProps, CallCardAction, type CallCardActionProps, type CallCardActionTone, CallCardActions, CallCardAvatar, type CallCardAvatarProps, CallCardEndCallButton, type CallCardEndCallButtonProps, CallCardIdentity, type CallCardIdentityProps, CallCardIgnoreButton, type CallCardIgnoreButtonProps, CallCardMuteButton, type CallCardMuteButtonProps, CallCardName, type CallCardNameProps, CallCardOverlay, type CallCardOverlayProps, type CallCardProps, type CallCardSize, type CallCardState, CallCardStatus, type CallCardStatusProps, CallCardWindowControl, type CallCardWindowControlProps, callCardVariants };

package/dist/call-card.js

@@ -0,0 +1,300 @@
+"use client";
+import { t as cn } from "./cn-BI_4DMBf.js";
+import { Avatar, AvatarFallback, AvatarImage } from "./avatar.js";
+import { Maximize2, Mic, MicOff, Minimize2, Phone, User } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import * as React from "react";
+//#region src/call-card.tsx
+const CallCardContext = React.createContext(null);
+function useCallCardContext() {
+	const context = React.useContext(CallCardContext);
+	if (!context) throw new Error("CallCard parts must be rendered inside <CallCard>.");
+	return context;
+}
+/**
+* Status-dot fill per state. The dot is the fastest read on the card, so it
+* carries the state on its own — warning while the call is in flight, success
+* once connected, danger once ended, info for an arriving call.
+*/
+const STATUS_DOT_TONE = {
+	ringing: "bg-status-warning",
+	calling: "bg-status-warning",
+	"in-call": "bg-status-success",
+	"call-ended": "bg-status-danger",
+	incoming: "bg-status-info"
+};
+/**
+* The scrim behind a `size="full"` card. An overlay must not share a surface
+* with the thread behind it, so the card floats on `bg-surface-overlay` above
+* this dimmed, blurred layer. Centres its child; give it the card as children.
+*
+* Only for the full state — a minimized bar docks inline and needs no scrim.
+*/
+function CallCardOverlay({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "call-card-overlay",
+		className: cn("fixed inset-0 isolate z-50 grid place-items-center p-4", "bg-black/10 supports-[backdrop-filter]:backdrop-blur-xl", "animate-in fade-in-0 duration-100", className),
+		...props
+	});
+}
+/** The card shell — surface, border, elevation, and the per-size layout. */
+const callCardVariants = cva("relative flex border border-line-subtle bg-surface-overlay shadow-2", {
+	variants: { size: {
+		full: "w-full max-w-[390px] flex-col items-center justify-center gap-7 rounded-2xl px-gdt-xl pt-14 pb-gdt-4xl md:max-w-[640px] md:gap-gdt-2xl md:px-gdt-4xl md:pt-gdt-4xl",
+		minimized: "h-14 w-full max-w-[358px] items-center gap-2.5 rounded-[14px] p-2.5 md:h-16 md:max-w-[360px] md:gap-gdt-md md:rounded-xl md:p-gdt-md"
+	} },
+	defaultVariants: { size: "full" }
+});
+/**
+* The reusable call overlay — the in-product surface shown while a voice call is
+* ringing, connecting, connected, or just ended. A presentational primitive:
+* it owns shape, elevation and per-size layout, and exposes state through
+* context so its parts size and colour themselves. Wiring (mute, hang up,
+* accept) is the consumer's — pass handlers to the action parts.
+*
+* Compose it like a Dialog: a shell with slotted parts. For the full state,
+* wrap it in {@link CallCardOverlay}; the minimized bar docks on its own.
+*/
+function CallCard({ size = "full", state, className, children, ...props }) {
+	const context = React.useMemo(() => ({
+		size,
+		state
+	}), [size, state]);
+	return /* @__PURE__ */ jsx(CallCardContext.Provider, {
+		value: context,
+		children: /* @__PURE__ */ jsx("section", {
+			"data-slot": "call-card",
+			"data-size": size,
+			"data-state": state,
+			role: state === "incoming" ? "alert" : "status",
+			"aria-live": state === "incoming" ? "assertive" : "polite",
+			className: cn("group/call-card", callCardVariants({ size }), className),
+			...props,
+			children
+		})
+	});
+}
+/**
+* The contact avatar. Wraps the giddaa `Avatar` so it inherits the brand-subtle
+* wash and brand glyph tokens — 112px in the full window (the design's largest
+* element), 40px on the docked bar. Pass `src` for a photo; the glyph is only a
+* fallback.
+*/
+function CallCardAvatar({ src, alt, fallback, className, ...props }) {
+	const { size } = useCallCardContext();
+	const isFull = size === "full";
+	return /* @__PURE__ */ jsxs(Avatar, {
+		"data-slot": "call-card-avatar",
+		size: isFull ? "lg" : "md",
+		className: cn(isFull ? "size-24 md:size-28" : "size-9 md:size-10", className),
+		...props,
+		children: [src ? /* @__PURE__ */ jsx(AvatarImage, {
+			src,
+			alt
+		}) : null, /* @__PURE__ */ jsx(AvatarFallback, { children: fallback ?? /* @__PURE__ */ jsx(User, {
+			className: isFull ? "size-[38px] md:size-11" : "size-4 md:size-[18px]",
+			"aria-hidden": true
+		}) })]
+	});
+}
+const identityVariants = cva("flex min-w-0 flex-col justify-center", {
+	variants: { size: {
+		full: "items-center gap-1.5 text-center",
+		minimized: "flex-1 items-start gap-px md:gap-0.5"
+	} },
+	defaultVariants: { size: "full" }
+});
+/** Stacks the name over the status line; centred in full, start-aligned when docked. */
+function CallCardIdentity({ className, ...props }) {
+	const { size } = useCallCardContext();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "call-card-identity",
+		className: cn(identityVariants({ size }), className),
+		...props
+	});
+}
+const nameVariants = cva("min-w-0 text-fg-primary", {
+	variants: { size: {
+		full: "text-gdt-h4 md:text-gdt-h3",
+		minimized: "w-full truncate text-gdt-sm font-semibold"
+	} },
+	defaultVariants: { size: "full" }
+});
+/** The contact name. Full uses the heading ramp; the docked bar truncates. */
+function CallCardName({ className, ...props }) {
+	const { size } = useCallCardContext();
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "call-card-name",
+		className: cn(nameVariants({ size }), className),
+		...props
+	});
+}
+const statusVariants = cva("flex min-w-0 items-center text-fg-secondary", {
+	variants: { size: {
+		full: "justify-center gap-gdt-sm text-gdt-sm",
+		minimized: "gap-1.5 text-gdt-xs"
+	} },
+	defaultVariants: { size: "full" }
+});
+const statusDotVariants = cva("shrink-0 rounded-full", {
+	variants: { size: {
+		full: "size-2",
+		minimized: "size-1.5"
+	} },
+	defaultVariants: { size: "full" }
+});
+/**
+* The status line: a state-coloured dot followed by its copy — the number, the
+* running timer, or the end notice. The dot's colour comes from the card's
+* `state`; the copy is the caller's (never bake the number or timer in).
+*/
+function CallCardStatus({ className, children, ...props }) {
+	const { size, state } = useCallCardContext();
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "call-card-status",
+		className: cn(statusVariants({ size }), className),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			"data-slot": "call-card-status-dot",
+			className: cn(statusDotVariants({ size }), STATUS_DOT_TONE[state]),
+			"aria-hidden": true
+		}), /* @__PURE__ */ jsx("span", {
+			className: "min-w-0 truncate",
+			children
+		})]
+	});
+}
+const actionsVariants = cva("flex shrink-0 items-center justify-center", {
+	variants: { size: {
+		full: "gap-gdt-lg md:gap-5",
+		minimized: "gap-gdt-sm"
+	} },
+	defaultVariants: { size: "full" }
+});
+/**
+* The action row. Holds the call actions, led by the window control. Turning an
+* action off simply drops it — the row re-centres, no dead slot. Never leave it
+* empty: an overlay with no controls traps the user in a live call.
+*/
+function CallCardActions({ className, ...props }) {
+	const { size } = useCallCardContext();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "call-card-actions",
+		className: cn(actionsVariants({ size }), className),
+		...props
+	});
+}
+const actionVariants = cva([
+	"grid shrink-0 place-items-center rounded-full outline-none transition-colors",
+	"focus-visible:ring-2 focus-visible:ring-line-focus focus-visible:ring-offset-2 focus-visible:ring-offset-surface-overlay",
+	"disabled:pointer-events-none disabled:opacity-50"
+], {
+	variants: {
+		size: {
+			full: "size-14 [&_svg]:size-6 md:size-16 md:[&_svg]:size-[26px]",
+			minimized: "size-[34px] [&_svg]:size-[15px] md:size-9 md:[&_svg]:size-4"
+		},
+		tone: {
+			tertiary: "bg-action-tertiary text-fg-primary hover:bg-action-tertiary-hover",
+			danger: "bg-action-danger text-fg-on-brand hover:bg-action-danger-hover",
+			primary: "bg-action-primary text-fg-on-brand hover:bg-action-primary-hover"
+		}
+	},
+	defaultVariants: {
+		size: "full",
+		tone: "tertiary"
+	}
+});
+/**
+* The circular icon-button primitive every call action is built from. Sizes
+* itself off the card, colours itself off `tone`. Pass a single icon as its
+* child; it's auto-sized. Use the presets below for the standard actions.
+*/
+function CallCardAction({ tone = "tertiary", type = "button", className, ...props }) {
+	const { size } = useCallCardContext();
+	return /* @__PURE__ */ jsx("button", {
+		"data-slot": "call-card-action",
+		type,
+		className: cn(actionVariants({
+			size,
+			tone
+		}), className),
+		...props
+	});
+}
+/** Mute toggle. Reversible, so it stays neutral and never competes with End Call. */
+function CallCardMuteButton({ muted = false, "aria-label": ariaLabel, ...props }) {
+	return /* @__PURE__ */ jsx(CallCardAction, {
+		tone: "tertiary",
+		"aria-pressed": muted,
+		"aria-label": ariaLabel ?? (muted ? "Unmute" : "Mute"),
+		...props,
+		children: muted ? /* @__PURE__ */ jsx(MicOff, {}) : /* @__PURE__ */ jsx(Mic, {})
+	});
+}
+/**
+* End Call. Destructive, so it's `danger` — except in `call-ended`, where the
+* call is already over and it retires to a neutral tone. The rotated handset is
+* a placeholder for the exact SVG.
+*/
+function CallCardEndCallButton({ className, "aria-label": ariaLabel, ...props }) {
+	const { state } = useCallCardContext();
+	const ended = state === "call-ended";
+	return /* @__PURE__ */ jsx(CallCardAction, {
+		tone: ended ? "tertiary" : "danger",
+		"aria-label": ariaLabel ?? "End call",
+		className: cn(ended && "text-fg-primary", className),
+		...props,
+		children: /* @__PURE__ */ jsx(Phone, { className: "rotate-[135deg]" })
+	});
+}
+/** Accept an incoming call. The brand primary — the button the thumb finds first. */
+function CallCardAcceptButton({ "aria-label": ariaLabel, ...props }) {
+	return /* @__PURE__ */ jsx(CallCardAction, {
+		tone: "primary",
+		"aria-label": ariaLabel ?? "Accept",
+		...props,
+		children: /* @__PURE__ */ jsx(Phone, {})
+	});
+}
+/** Dismiss an incoming call. Same clay and rotated handset as End Call. */
+function CallCardIgnoreButton({ "aria-label": ariaLabel, ...props }) {
+	return /* @__PURE__ */ jsx(CallCardAction, {
+		tone: "danger",
+		"aria-label": ariaLabel ?? "Ignore",
+		...props,
+		children: /* @__PURE__ */ jsx(Phone, { className: "rotate-[135deg]" })
+	});
+}
+const windowControlVariants = cva([
+	"grid shrink-0 place-items-center rounded-full outline-none transition-colors",
+	"bg-action-tertiary text-fg-secondary hover:bg-action-tertiary-hover",
+	"focus-visible:ring-2 focus-visible:ring-line-focus focus-visible:ring-offset-2 focus-visible:ring-offset-surface-overlay"
+], {
+	variants: { size: {
+		full: "absolute top-[15px] right-[15px] size-9 [&_svg]:size-4 md:top-[19px] md:right-[19px] md:size-10 md:[&_svg]:size-[18px]",
+		minimized: "size-[34px] [&_svg]:size-3.5 md:size-9 md:[&_svg]:size-[15px]"
+	} },
+	defaultVariants: { size: "full" }
+});
+/**
+* The window chrome — Minimize in the full window (pinned top-right), Expand on
+* the docked bar (leads the action row). Neutral and quiet by design: a window
+* control is never destructive and must not pull the eye from End Call. Place it
+* as the first child of {@link CallCardActions}; it self-positions per size.
+*/
+function CallCardWindowControl({ className, "aria-label": ariaLabel, type = "button", ...props }) {
+	const { size } = useCallCardContext();
+	const minimized = size === "minimized";
+	return /* @__PURE__ */ jsx("button", {
+		"data-slot": "call-card-window-control",
+		type,
+		"aria-label": ariaLabel ?? (minimized ? "Expand" : "Minimize"),
+		className: cn(windowControlVariants({ size }), className),
+		...props,
+		children: minimized ? /* @__PURE__ */ jsx(Maximize2, {}) : /* @__PURE__ */ jsx(Minimize2, {})
+	});
+}
+//#endregion
+export { CallCard, CallCardAcceptButton, CallCardAction, CallCardActions, CallCardAvatar, CallCardEndCallButton, CallCardIdentity, CallCardIgnoreButton, CallCardMuteButton, CallCardName, CallCardOverlay, CallCardStatus, CallCardWindowControl, callCardVariants };

package/dist/card.d.ts

@@ -4,8 +4,10 @@ import { VariantProps } from "class-variance-authority";
 declare const cardVariants: (props?: ({
   selected?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-type CardProps = useRender.ComponentProps<"article"> & VariantProps<typeof cardVariants>;
-declare function Card({ className, render, selected, ...props }: CardProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+type CardProps = useRender.ComponentProps<"article"> & {
+  removePadding?: boolean;
+} & VariantProps<typeof cardVariants>;
+declare function Card({ className, render, selected, removePadding, ...props }: CardProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare function CardTitle({ className, render, ...props }: useRender.ComponentProps<"h3">): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare function CardHeader({ className, render, ...props }: useRender.ComponentProps<"div">): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare function CardDescription({ className, render, ...props }: useRender.ComponentProps<"p">): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

package/dist/card.js

@@ -3,17 +3,17 @@ import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 import { cva } from "class-variance-authority";
 //#region src/card.tsx
-const cardVariants = cva("group/card relative flex w-full min-w-0 flex-col gap-5 rounded-2xl border border-line-subtle bg-canvas py-gdt-xl text-fg-primary shadow-1 transition-[background-color,border-color,box-shadow,transform] outline-none has-[[data-slot=card-action]:hover]:shadow-2 has-[[data-slot=card-action]:focus-visible]:border-line-focus has-[[data-slot=card-action]:focus-visible]:inset-ring-1 has-[[data-slot=card-action]:focus-visible]:inset-ring-line-focus has-[[data-slot=card-action]:active]:border-line-subtle has-[[data-slot=card-action]:active]:bg-surface has-[[data-slot=card-action]:active]:shadow-none!", {
+const cardVariants = cva("group/card relative flex w-full min-w-0 flex-col gap-5 rounded-2xl border border-line-subtle bg-canvas [--card-padding:1.5rem] py-(--card-padding) text-fg-primary shadow-1 transition-[background-color,border-color,box-shadow,transform] outline-none has-[[data-slot=card-action]:hover]:shadow-2 has-[[data-slot=card-action]:focus-visible]:border-line-focus has-[[data-slot=card-action]:focus-visible]:inset-ring-1 has-[[data-slot=card-action]:focus-visible]:inset-ring-line-focus has-[[data-slot=card-action]:active]:border-line-subtle has-[[data-slot=card-action]:active]:bg-surface has-[[data-slot=card-action]:active]:shadow-none!", {
 	variants: { selected: {
 		true: "border-line-focus bg-surface-brand-subtle inset-ring-1 inset-ring-line-focus has-[[data-slot=card-action]:hover]:border-line-focus has-[[data-slot=card-action]:hover]:bg-surface-brand-subtle has-[[data-slot=card-action]:hover]:inset-ring-1 has-[[data-slot=card-action]:active]:border-line-focus has-[[data-slot=card-action]:active]:bg-surface-brand-subtle has-[[data-slot=card-action]:active]:inset-ring-1 has-[[data-slot=card-action]:active]:inset-ring-line-focus",
 		false: ""
 	} },
 	defaultVariants: { selected: false }
 });
-function Card({ className, render, selected = false, ...props }) {
+function Card({ className, render, selected = false, removePadding = false, ...props }) {
 	return useRender({
 		defaultTagName: "article",
-		props: mergeProps({ className: cn(cardVariants({ selected }), className) }, props),
+		props: mergeProps({ className: cn(cardVariants({ selected }), removePadding ? "py-0" : "", className) }, props),
 		render,
 		state: {
 			selected,
@@ -31,7 +31,7 @@ function CardTitle({ className, render, ...props }) {
 function CardHeader({ className, render, ...props }) {
 	return useRender({
 		defaultTagName: "div",
-		props: mergeProps({ className: cn("flex min-w-0 flex-col gap-gdt-sm px-gdt-xl", className) }, props),
+		props: mergeProps({ className: cn("flex min-w-0 flex-col gap-gdt-sm px-(--card-padding)", className) }, props),
 		render
 	});
 }
@@ -45,14 +45,14 @@ function CardDescription({ className, render, ...props }) {
 function CardContent({ className, render, ...props }) {
 	return useRender({
 		defaultTagName: "div",
-		props: mergeProps({ className: cn("min-w-0 px-gdt-xl text-gdt-sm text-fg-primary", className) }, props),
+		props: mergeProps({ className: cn("min-w-0 px-(--card-padding) text-gdt-sm text-fg-primary", className) }, props),
 		render
 	});
 }
 function CardFooter({ className, render, ...props }) {
 	return useRender({
 		defaultTagName: "div",
-		props: mergeProps({ className: cn("flex min-w-0 px-gdt-xl flex-wrap items-center justify-end gap-gdt-sm", className) }, props),
+		props: mergeProps({ className: cn("flex min-w-0 flex-wrap items-center justify-end gap-gdt-sm px-(--card-padding)", className) }, props),
 		render
 	});
 }
@@ -61,7 +61,7 @@ function CardAction({ className, render, ...props }) {
 		defaultTagName: "button",
 		props: mergeProps({
 			"data-slot": "card-action",
-			className: cn("cursor-pointer focus-visible:outline-none before:absolute before:inset-0 before:content-['']", className)
+			className: cn("absolute inset-0 z-10 cursor-pointer rounded-[inherit] focus-visible:outline-none", className)
 		}, props),
 		render
 	});

package/dist/carousel.js

@@ -1,6 +1,7 @@
 "use client";
 import { t as cn } from "./cn-BI_4DMBf.js";
 import { useComponentSize } from "./size-context.js";
+import { t as useReducedMotion } from "./use-reduced-motion-BDvOK14x.js";
 import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
@@ -31,6 +32,7 @@ function useCarousel() {
 }
 function Carousel({ orientation = "horizontal", opts, setApi, plugins, size, imageSize, className, children, ...props }) {
 	const resolvedSize = useComponentSize(size);
+	const reducedMotion = useReducedMotion();
 	const [carouselRef, api] = useEmblaCarousel({
 		...opts,
 		axis: orientation === "horizontal" ? "x" : "y"
@@ -51,14 +53,14 @@ function Carousel({ orientation = "horizontal", opts, setApi, plugins, size, ima
 		onSelect(api);
 	}, [onSelect]);
 	const scrollPrev = React.useCallback(() => {
-		api?.scrollPrev();
-	}, [api]);
+		api?.scrollPrev(reducedMotion);
+	}, [api, reducedMotion]);
 	const scrollNext = React.useCallback(() => {
-		api?.scrollNext();
-	}, [api]);
+		api?.scrollNext(reducedMotion);
+	}, [api, reducedMotion]);
 	const scrollTo = React.useCallback((index) => {
-		api?.scrollTo(index);
-	}, [api]);
+		api?.scrollTo(index, reducedMotion);
+	}, [api, reducedMotion]);
 	const handleKeyDown = React.useCallback((event) => {
 		const prevKey = orientation === "horizontal" ? "ArrowLeft" : "ArrowUp";
 		const nextKey = orientation === "horizontal" ? "ArrowRight" : "ArrowDown";
@@ -138,7 +140,7 @@ function CarouselItem({ className, ...props }) {
 		...props
 	});
 }
-const arrowVariants = cva(cn("absolute top-1/2 z-10 grid -translate-y-1/2 place-items-center rounded-full text-fg-on-brand/95 shadow-1 transition-[transform,opacity] outline-none", glassChrome, "hover:scale-105 focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] active:scale-95 disabled:pointer-events-none disabled:opacity-40"), {
+const arrowVariants = cva(cn("absolute top-1/2 z-10 grid -translate-y-1/2 place-items-center rounded-full text-fg-on-brand/95 shadow-1 transition-[opacity,scale] duration-[var(--duration-motion-press)] ease-gdt-out outline-none", glassChrome, "focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] active:scale-[0.97] motion-reduce:active:scale-100 disabled:pointer-events-none disabled:opacity-40"), {
 	variants: {
 		size: {
 			sm: "size-8 [&_svg]:size-4",
@@ -287,6 +289,7 @@ const INDICATOR_OFFSET = {
 function CarouselIndicator({ className, count: countProp, selected: selectedProp, size: sizeProp, onSelect, ...props }) {
 	const ctx = React.useContext(CarouselContext);
 	const inheritedSize = useComponentSize(sizeProp);
+	const reducedMotion = useReducedMotion();
 	const size = sizeProp ?? ctx?.size ?? inheritedSize;
 	const count = countProp ?? ctx?.scrollSnaps.length ?? 0;
 	const selected = selectedProp ?? ctx?.selectedIndex ?? 0;
@@ -307,7 +310,7 @@ function CarouselIndicator({ className, count: countProp, selected: selectedProp
 			className: "overflow-hidden",
 			style: { width: viewportWidth },
 			children: /* @__PURE__ */ jsx("div", {
-				className: "flex items-center transition-transform duration-300 ease-out",
+				className: "flex items-center transition-transform duration-300 ease-out motion-reduce:transition-none",
 				style: {
 					gap,
 					transform: `translateX(${-start * step}px)`
@@ -325,7 +328,7 @@ function CarouselIndicator({ className, count: countProp, selected: selectedProp
 							width: dot,
 							height: dot,
 							opacity: faded ? .3 : isActive ? 1 : .55,
-							transform: faded ? "scale(0.6)" : "scale(1)"
+							transform: !reducedMotion && faded ? "scale(0.6)" : "scale(1)"
 						}
 					}, index);
 				})