@passui/react 0.1.46 → 0.2.0

package/dist/textarea.d.ts

@@ -0,0 +1,3 @@
+import { ComponentProps } from "react";
+/** A native multi line input. It grows with its content where the browser supports it. */
+export declare function Textarea({ className, ...props }: ComponentProps<"textarea">): import("react").JSX.Element;

package/dist/textarea.js

@@ -0,0 +1,13 @@
+import { cx } from "./lib/cx.js";
+import { inputStyles } from "./input.js";
+import { jsx } from "react/jsx-runtime";
+// src/components/textarea.tsx
+/** A native multi line input. It grows with its content where the browser supports it. */
+function Textarea({ className, ...props }) {
+	return /* @__PURE__ */ jsx("textarea", {
+		"data-slot": "textarea",
+		className: cx(inputStyles, "field-sizing-content min-h-16 py-2", className),
+		...props
+	});
+}
+export { Textarea };

package/dist/toast.d.ts

@@ -0,0 +1,3 @@
+import { Toast, ToastAction, ToastInput, ToastOptions, ToastSize, ToastTone, toast } from "./components/toast/toast-store.js";
+import { Toaster } from "./components/toast/toaster.js";
+export { type Toast, type ToastAction, type ToastInput, type ToastOptions, type ToastSize, type ToastTone, Toaster, toast };

package/dist/toast.js

@@ -0,0 +1,3 @@
+import { toast } from "./components/toast/toast-store.js";
+import { Toaster } from "./components/toast/toaster.js";
+export { Toaster, toast };

package/dist/toggle-group.d.ts

@@ -0,0 +1,20 @@
+import { ToggleSize, ToggleVariant } from "./toggle.js";
+import { ComponentProps, ReactNode } from "react";
+import * as group from "@zag-js/toggle-group";
+type Style = {
+  variant: ToggleVariant;
+  size: ToggleSize;
+};
+export interface ToggleGroupProps extends Omit<group.Props, "id" | "ids" | "onValueChange">, Partial<Style> {
+  onValueChange?: (value: string[]) => void;
+  children?: ReactNode;
+  className?: string;
+}
+/** A row of toggles. `multiple` allows several on at once; otherwise it behaves like a segmented control. */
+export declare function ToggleGroup({ onValueChange, variant, size, children, className, ...props }: ToggleGroupProps): import("react").JSX.Element;
+export type ToggleGroupItemProps = Omit<ComponentProps<"button">, "value"> & {
+  value: string;
+  disabled?: boolean;
+};
+export declare function ToggleGroupItem({ value, disabled, className, ...props }: ToggleGroupItemProps): import("react").JSX.Element;
+export {};

package/dist/toggle-group.js

@@ -0,0 +1,68 @@
+"use client";
+import { cx } from "./lib/cx.js";
+import { toggleVariants } from "./toggle.js";
+import { normalizeProps, useMachine } from "@zag-js/react";
+import { createContext, useContext, useId, useLayoutEffect, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as group from "@zag-js/toggle-group";
+// src/components/toggle-group.tsx
+const Context = createContext(null);
+function useGroup() {
+	const ctx = useContext(Context);
+	if (!ctx) throw new Error("ToggleGroupItem must be used inside <ToggleGroup>.");
+	return ctx;
+}
+/** A row of toggles. `multiple` allows several on at once; otherwise it behaves like a segmented control. */
+function ToggleGroup({ onValueChange, variant = "default", size = "default", children, className, ...props }) {
+	const id = useId();
+	const service = useMachine(group.machine, {
+		id,
+		onValueChange: ({ value }) => onValueChange?.(value),
+		...props
+	});
+	const api = group.connect(service, normalizeProps);
+	const root = useRef(null);
+	const single = !props.multiple;
+	useLayoutEffect(() => {
+		const el = root.current;
+		const on = el?.querySelector("[data-state=on]");
+		if (!el) return;
+		if (!on) return void el.style.setProperty("--lens-w", "0px");
+		el.style.setProperty("--lens-x", `${on.offsetLeft}px`);
+		el.style.setProperty("--lens-w", `${on.offsetWidth}px`);
+	}, [api.value]);
+	return /* @__PURE__ */ jsx(Context.Provider, {
+		value: {
+			api,
+			style: {
+				variant,
+				size
+			},
+			single
+		},
+		children: /* @__PURE__ */ jsxs("div", {
+			...api.getRootProps(),
+			ref: root,
+			"data-slot": "toggle-group",
+			className: cx("glass relative inline-flex w-fit items-center gap-1 rounded-full p-1", className),
+			children: [single ? /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				"data-slot": "toggle-group-indicator",
+				className: "glass-lens spring-smooth absolute inset-y-1 left-0 z-0 w-(--lens-w,0px) translate-x-(--lens-x,0px) rounded-full transition-[translate,width] motion-reduce:transition-none"
+			}) : null, children]
+		})
+	});
+}
+function ToggleGroupItem({ value, disabled, className, ...props }) {
+	const { api, style, single } = useGroup();
+	return /* @__PURE__ */ jsx("button", {
+		...api.getItemProps({
+			value,
+			disabled
+		}),
+		"data-slot": "toggle-group-item",
+		className: cx(toggleVariants.base, toggleVariants.variant[style.variant], toggleVariants.size[style.size], "relative z-10 hover:bg-transparent data-[state=on]:text-label text-label-secondary active:scale-[0.96] spring-snappy", single ? "data-[state=on]:bg-transparent" : "data-[state=on]:bg-fill", className),
+		...props
+	});
+}
+export { ToggleGroup, ToggleGroupItem };

package/dist/toggle.d.ts

@@ -0,0 +1,24 @@
+import { ComponentProps } from "react";
+export type ToggleVariant = "default" | "outline";
+export type ToggleSize = "default" | "sm" | "lg";
+export declare const toggleVariants: {
+  base: string;
+  variant: {
+    default: string;
+    outline: string;
+  };
+  size: {
+    default: string;
+    sm: string;
+    lg: string;
+  };
+};
+export type ToggleProps = Omit<ComponentProps<"button">, "onChange"> & {
+  pressed?: boolean;
+  defaultPressed?: boolean;
+  onPressedChange?: (pressed: boolean) => void;
+  variant?: ToggleVariant;
+  size?: ToggleSize;
+};
+/** A two state button with `aria-pressed`. */
+export declare function Toggle({ pressed: controlled, defaultPressed, onPressedChange, variant, size, className, onClick, ...props }: ToggleProps): import("react").JSX.Element;

package/dist/toggle.js

@@ -0,0 +1,37 @@
+"use client";
+import { cx } from "./lib/cx.js";
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+// src/components/toggle.tsx
+const toggleVariants = {
+	base: "inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-full font-semibold outline-none transition spring-snappy active:scale-[0.96] hover:bg-fill/80 focus-visible:ring-2 focus-visible:ring-accent/70 disabled:pointer-events-none disabled:opacity-40 aria-pressed:bg-fill aria-pressed:text-label data-[state=on]:bg-fill motion-reduce:transition-none motion-reduce:active:scale-100 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
+	variant: {
+		default: "",
+		outline: "shadow-[inset_0_0_0_0.5px_var(--color-separator)]"
+	},
+	size: {
+		default: "h-8.5 min-w-8.5 px-3 text-footnote",
+		sm: "h-7.5 min-w-7.5 px-2.5 text-caption",
+		lg: "h-9.5 min-w-9.5 px-4 text-subheadline"
+	}
+};
+/** A two state button with `aria-pressed`. */
+function Toggle({ pressed: controlled, defaultPressed = false, onPressedChange, variant = "default", size = "default", className, onClick, ...props }) {
+	const [inner, setInner] = useState(defaultPressed);
+	const pressed = controlled ?? inner;
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"data-slot": "toggle",
+		"data-state": pressed ? "on" : "off",
+		"aria-pressed": pressed,
+		className: cx(toggleVariants.base, toggleVariants.variant[variant], toggleVariants.size[size], className),
+		onClick: (event) => {
+			onClick?.(event);
+			if (event.defaultPrevented) return;
+			if (controlled === void 0) setInner(!pressed);
+			onPressedChange?.(!pressed);
+		},
+		...props
+	});
+}
+export { Toggle, toggleVariants };

package/dist/tokens.d.ts

@@ -0,0 +1 @@
+export * from "@passui/tokens";

package/dist/tooltip.d.ts

@@ -0,0 +1,21 @@
+import { RenderProp } from "./lib/render.js";
+import { ComponentProps, ReactNode } from "react";
+import * as tooltip from "@zag-js/tooltip";
+export interface TooltipProps extends Omit<tooltip.Props, "id" | "ids" | "positioning"> {
+  /** Where the tip sits against its trigger. Defaults to `top`. */
+  placement?: tooltip.Placement;
+  /** Gap between trigger and tip, in pixels. Defaults to 6. */
+  offset?: number;
+  children?: ReactNode;
+}
+/**
+ * Opens on hover and keyboard focus only, never on touch. After one tip opens,
+ * its neighbours open without the delay (Zag shares that warm-up window).
+ */
+export declare function Tooltip({ children, placement, offset, ...props }: TooltipProps): import("react").JSX.Element;
+export declare function TooltipTrigger({ render, ...props }: ComponentProps<"button"> & {
+  render?: RenderProp;
+}): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare function TooltipContent({ className, render, ...props }: ComponentProps<"div"> & {
+  render?: RenderProp;
+}): import("react").JSX.Element | null;

package/dist/tooltip.js

@@ -0,0 +1,61 @@
+"use client";
+import { cx } from "./lib/cx.js";
+import { Portal } from "./lib/portal.js";
+import { usePresence } from "./lib/presence.js";
+import { mergeProps, renderPart } from "./lib/render.js";
+import { normalizeProps, useMachine } from "@zag-js/react";
+import { createContext, useContext, useId } from "react";
+import { jsx } from "react/jsx-runtime";
+import * as tooltip from "@zag-js/tooltip";
+// src/components/tooltip.tsx
+const Context = createContext(null);
+function useTooltip() {
+	const api = useContext(Context);
+	if (!api) throw new Error("Tooltip parts must be used inside <Tooltip>.");
+	return api;
+}
+/**
+* Opens on hover and keyboard focus only, never on touch. After one tip opens,
+* its neighbours open without the delay (Zag shares that warm-up window).
+*/
+function Tooltip({ children, placement = "top", offset = 6, ...props }) {
+	const id = useId();
+	const service = useMachine(tooltip.machine, {
+		id,
+		positioning: {
+			placement,
+			offset: { mainAxis: offset }
+		},
+		...props
+	});
+	const api = tooltip.connect(service, normalizeProps);
+	return /* @__PURE__ */ jsx(Context.Provider, {
+		value: api,
+		children
+	});
+}
+function TooltipTrigger({ render, ...props }) {
+	const api = useTooltip();
+	return renderPart("button", mergeProps({
+		...api.getTriggerProps(),
+		"data-slot": "tooltip-trigger"
+	}, props), render);
+}
+function TooltipContent({ className, render, ...props }) {
+	const api = useTooltip();
+	const { ref, mounted, attrs } = usePresence(api.open);
+	if (!mounted) return null;
+	return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx("div", {
+		...api.getPositionerProps(),
+		className: "z-[80]",
+		children: renderPart("div", mergeProps({
+			...api.getContentProps(),
+			...attrs,
+			ref,
+			hidden: false,
+			"data-slot": "tooltip-content",
+			className: cx("pointer-events-none max-w-64 liquid-glass-dense squircle [--squircle-radius:0.875rem] px-2.5 py-1.5 text-center text-caption leading-tight font-medium text-label transition spring-smooth origin-(--transform-origin,center) data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:scale-[0.88] data-starting-style:scale-[0.88] motion-reduce:transition-none motion-reduce:data-ending-style:scale-100 motion-reduce:data-starting-style:scale-100", className)
+		}, props), render)
+	}) });
+}
+export { Tooltip, TooltipContent, TooltipTrigger };

package/dist/trace.d.ts

@@ -0,0 +1,14 @@
+import { ComponentProps, ReactNode } from "react";
+export type TraceStatus = "pending" | "running" | "done" | "error";
+/** A timeline of steps: reasoning, tool calls, sources. Each step can fold open its detail. */
+export declare function Trace({ className, ...props }: ComponentProps<"ol">): import("react").JSX.Element;
+export type TraceItemProps = Omit<ComponentProps<"li">, "title"> & {
+  title: ReactNode;
+  /** The state of this step. @default "done" */
+  status?: TraceStatus;
+  /** A short note beside the title, such as a duration. */
+  meta?: ReactNode;
+  /** Opens the detail by default. @default false */
+  defaultOpen?: boolean;
+};
+export declare function TraceItem({ title, status, meta, defaultOpen, className, children, ...props }: TraceItemProps): import("react").JSX.Element;

package/dist/trace.js

@@ -0,0 +1,54 @@
+import { cx } from "./lib/cx.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/components/trace.tsx
+const dot = {
+	pending: "border-separator bg-transparent",
+	running: "border-accent bg-accent/30 animate-pulse motion-reduce:animate-none",
+	done: "border-success bg-success",
+	error: "border-danger bg-danger"
+};
+/** A timeline of steps: reasoning, tool calls, sources. Each step can fold open its detail. */
+function Trace({ className, ...props }) {
+	return /* @__PURE__ */ jsx("ol", {
+		"data-slot": "trace",
+		className: cx("m-0 flex list-none flex-col p-0", className),
+		...props
+	});
+}
+function TraceItem({ title, status = "done", meta, defaultOpen = false, className, children, ...props }) {
+	const head = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+		className: "text-footnote text-label min-w-0 flex-1 truncate font-medium",
+		children: title
+	}), meta ? /* @__PURE__ */ jsx("span", {
+		className: "text-caption text-label-tertiary shrink-0",
+		children: meta
+	}) : null] });
+	return /* @__PURE__ */ jsxs("li", {
+		"data-slot": "trace-item",
+		"data-status": status,
+		className: cx("relative pb-4 ps-6 last:pb-0 before:absolute before:start-[5px] before:top-4 before:-bottom-0 before:w-px before:bg-separator/60 last:before:hidden", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: cx("absolute start-0 top-1.5 size-[11px] rounded-full border-2", dot[status])
+		}), children ? /* @__PURE__ */ jsxs("details", {
+			open: defaultOpen,
+			className: "group",
+			children: [/* @__PURE__ */ jsxs("summary", {
+				className: "focus-visible:ring-accent/70 flex cursor-pointer list-none items-center gap-2 rounded-md outline-none focus-visible:ring-2 [&::-webkit-details-marker]:hidden",
+				children: [head, /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					className: "text-label-tertiary text-caption transition-transform group-open:rotate-90 motion-reduce:transition-none",
+					children: "›"
+				})]
+			}), /* @__PURE__ */ jsx("div", {
+				className: "text-footnote text-label-secondary mt-1.5",
+				children
+			})]
+		}) : /* @__PURE__ */ jsx("div", {
+			className: "flex items-center gap-2",
+			children: head
+		})]
+	});
+}
+export { Trace, TraceItem };

package/dist/{types/src/hooks/use-dismiss.d.ts → use-dismiss.d.ts}

@@ -1,9 +1,9 @@
-import { type RefObject } from "react";
-/** Marks a floating layer (a pop-up list, a menu) whose clicks belong to what opened it. */
-export { FLOATING_LAYER } from "../lib/floating-layers";
+import { FLOATING_LAYER } from "./lib/floating-layers.js";
+import { RefObject } from "react";
 /**
  * Calls `onDismiss` when the user presses Escape or clicks outside `ref`
  * while `active`, for menus, popovers and sheets. Clicks in a floating
  * layer opened from inside, such as a pop-up button's list, don't count.
  */
 export declare function useDismiss(ref: RefObject<HTMLElement | null>, active: boolean, onDismiss: () => void): void;
+export { FLOATING_LAYER };

package/dist/use-dismiss.js

@@ -0,0 +1,38 @@
+import { FLOATING_LAYER, belongsToFloatingSurface, ownsFloatingLayer } from "./lib/floating-layers.js";
+import { useEffect } from "react";
+// src/hooks/use-dismiss.ts
+/**
+* Calls `onDismiss` when the user presses Escape or clicks outside `ref`
+* while `active`, for menus, popovers and sheets. Clicks in a floating
+* layer opened from inside, such as a pop-up button's list, don't count.
+*/
+function useDismiss(ref, active, onDismiss) {
+	useEffect(() => {
+		if (!active) return;
+		const onPointerDown = (event) => {
+			const target = event.target;
+			const surface = ref.current;
+			if (surface && belongsToFloatingSurface(surface, target)) return;
+			onDismiss();
+		};
+		const onKeyDown = (event) => {
+			if (event.defaultPrevented) return;
+			if (ref.current && ownsFloatingLayer(ref.current, document.activeElement)) return;
+			if (event.key === "Escape") {
+				event.preventDefault();
+				onDismiss();
+			}
+		};
+		document.addEventListener("pointerdown", onPointerDown);
+		window.addEventListener("keydown", onKeyDown);
+		return () => {
+			document.removeEventListener("pointerdown", onPointerDown);
+			window.removeEventListener("keydown", onKeyDown);
+		};
+	}, [
+		ref,
+		active,
+		onDismiss
+	]);
+}
+export { FLOATING_LAYER, useDismiss };

package/dist/{types/src/hooks/use-media-query.d.ts → use-media-query.d.ts}

@@ -1,21 +1,21 @@
 declare const BREAKPOINTS: {
-    readonly "2xl": 1536;
-    readonly "3xl": 1600;
-    readonly "4xl": 2000;
-    readonly lg: 1024;
-    readonly md: 800;
-    readonly sm: 640;
-    readonly xl: 1280;
+  readonly "2xl": 1536;
+  readonly "3xl": 1600;
+  readonly "4xl": 2000;
+  readonly lg: 1024;
+  readonly md: 800;
+  readonly sm: 640;
+  readonly xl: 1280;
 };
 export type Breakpoint = keyof typeof BREAKPOINTS;
 export type BreakpointQuery = Breakpoint | `max-${Breakpoint}` | `${Breakpoint}:max-${Breakpoint}`;
 export type MediaQueryInput = {
-    min?: Breakpoint | number;
-    max?: Breakpoint | number;
-    /** Touch-like input (finger). Use "fine" for mouse/trackpad. */
-    pointer?: PointerPrecision;
+  min?: Breakpoint | number;
+  max?: Breakpoint | number;
+  /** Touch-like input (finger). Use "fine" for mouse/trackpad. */
+  pointer?: PointerPrecision;
 };
 export type PointerPrecision = "coarse" | "fine";
 export declare function useMediaQuery(query: BreakpointQuery | MediaQueryInput | (string & {})): boolean;
 export declare function useIsMobile(): boolean;
-export {};
+export {};

package/dist/use-media-query.js

@@ -0,0 +1,56 @@
+import { useCallback, useSyncExternalStore } from "react";
+// src/hooks/use-media-query.ts
+const BREAKPOINTS = {
+	"2xl": 1536,
+	"3xl": 1600,
+	"4xl": 2e3,
+	lg: 1024,
+	md: 800,
+	sm: 640,
+	xl: 1280
+};
+function resolveMin(value) {
+	return `(min-width: ${typeof value === "number" ? value : BREAKPOINTS[value]}px)`;
+}
+function resolveMax(value) {
+	return `(max-width: ${(typeof value === "number" ? value : BREAKPOINTS[value]) - 1}px)`;
+}
+function parseQuery(query) {
+	if (typeof query !== "string") {
+		const parts = [];
+		if (query.min != null) parts.push(resolveMin(query.min));
+		if (query.max != null) parts.push(resolveMax(query.max));
+		if (query.pointer === "coarse") parts.push("(pointer: coarse)");
+		if (query.pointer === "fine") parts.push("(pointer: fine)");
+		if (parts.length === 0) return "(min-width: 0px)";
+		return parts.join(" and ");
+	}
+	if (query.startsWith("(")) return query;
+	const parts = [];
+	for (const segment of query.split(":")) if (segment.startsWith("max-")) {
+		const bp = segment.slice(4);
+		if (bp in BREAKPOINTS) parts.push(resolveMax(bp));
+	} else if (segment in BREAKPOINTS) parts.push(resolveMin(segment));
+	return parts.length > 0 ? parts.join(" and ") : query;
+}
+function getServerSnapshot() {
+	return false;
+}
+function useMediaQuery(query) {
+	const mediaQuery = parseQuery(query);
+	const subscribe = useCallback((callback) => {
+		if (typeof window === "undefined") return () => {};
+		const mql = window.matchMedia(mediaQuery);
+		mql.addEventListener("change", callback);
+		return () => mql.removeEventListener("change", callback);
+	}, [mediaQuery]);
+	const getSnapshot = useCallback(() => {
+		if (typeof window === "undefined") return false;
+		return window.matchMedia(mediaQuery).matches;
+	}, [mediaQuery]);
+	return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}
+function useIsMobile() {
+	return useMediaQuery("(max-width: 768px)");
+}
+export { useIsMobile, useMediaQuery };

package/dist/use-os.d.ts

@@ -0,0 +1,12 @@
+import { PlatformOS } from "./appearance/platform.js";
+import "./index.js";
+/**
+ * The platform, SSR safe: `"unknown"` on the server and on the first client
+ * render, then the real one, so markup never mismatches. For styling prefer the
+ * `ios:` and `macos:` variants, which read `data-os` before the first paint.
+ */
+export declare function useOS(): {
+  os: PlatformOS;
+  isApple: boolean;
+  isTouch: boolean;
+};

package/dist/use-os.js

@@ -0,0 +1,17 @@
+import { usePlatform } from "./appearance/platform.js";
+// src/hooks/use-os.ts
+const apple = /* @__PURE__ */ new Set(["ios", "macos"]);
+/**
+* The platform, SSR safe: `"unknown"` on the server and on the first client
+* render, then the real one, so markup never mismatches. For styling prefer the
+* `ios:` and `macos:` variants, which read `data-os` before the first paint.
+*/
+function useOS() {
+	const os = usePlatform();
+	return {
+		os,
+		isApple: apple.has(os),
+		isTouch: os === "ios" || os === "android"
+	};
+}
+export { useOS };

package/dist/wake-slider.d.ts

@@ -0,0 +1,15 @@
+export type WakeSliderSize = "sm" | "md" | "lg";
+export interface WakeSliderProps {
+  label: string;
+  value?: number;
+  defaultValue?: number;
+  onChange?: (value: number) => void;
+  bars?: number;
+  wake?: number;
+  disabled?: boolean;
+  className?: string;
+  formatValue?: (value: number) => string;
+  /** Bar height at rest and value text scale. @default "md" */
+  size?: WakeSliderSize;
+}
+export declare function WakeSlider({ label, value: controlledValue, defaultValue, onChange, disabled, className, formatValue, size, bars, wake }: WakeSliderProps): import("react").JSX.Element;