@passui/react 0.1.47 → 0.2.0

package/README.md

@@ -40,26 +40,28 @@ export function SaveButton() {
 }
 ```
 
-### Numeric controls and separators
+Names follow shadcn (`Dialog`, `DialogContent`, `Card`, `CardHeader`), and
+SwiftUI only where shadcn has none (`Stepper`, `SegmentedControl`). Each
+component has its own subpath, such as `@passui/react/dialog` or
+`@passui/react/stepper`, so a bundler keeps only what you import.
 
-`Slider`, `Stepper`, `ProgressView`, and `Divider` provide native foundations
-for settings, quantity adjustments, task progress, and layout separation.
-They have individual subpath exports and named TypeScript props.
+### Controls with a value
+
+`Stepper`, `SloshSlider` and `WakeSlider` take their value from
+`value` and `onChange`. `Stepper` supports fractional steps, disables its actions at the
+bounds and rolls its digits unless Reduce Motion is on.
 
 ```tsx
 import { useState } from "react";
-import { Slider } from "@passui/react/slider";
 import { Stepper } from "@passui/react/stepper";
-import { ProgressView } from "@passui/react/progress-view";
-import { Divider } from "@passui/react/divider";
+import { WakeSlider } from "@passui/react/wake-slider";
 
-export function DownloadSettings() {
-	const [volume, setVolume] = useState(50);
+export function PrintSettings() {
 	const [copies, setCopies] = useState(1);
+	const [volume, setVolume] = useState(50);
 
 	return (
 		<section className="flex flex-col gap-4">
-			<Slider label="Volume" value={volume} onChange={setVolume} />
 			<Stepper
 				label="Copies"
 				labels={{ decrement: "Fewer copies", increment: "More copies" }}
@@ -68,87 +70,43 @@ export function DownloadSettings() {
 				min={1}
 				max={10}
 			/>
-			<Divider />
-			<ProgressView label="Downloading" value={42} max={100} />
+			<WakeSlider label="Volume" value={volume} onChange={setVolume} />
 		</section>
 	);
 }
 ```
 
-Both numeric controls are controlled: the parent owns their value. Stepper
-supports fractional steps and disables actions at its bounds. Slider keeps
-native pointer and keyboard input. ProgressView omits `value` for indeterminate
-progress and honors reduced motion. Divider is decorative by default; pass
-`decorative={false}` to expose a semantic separator.
-
-### Menus and disclosure groups
+### Code, conversation and clipboard
 
-`Menu` turns the existing `ContextMenuHost` into a declarative button. Mount
-the host once at the app root, then supply menu items wherever an action
-button belongs. Its placement and keyboard behavior are shared with context
-menus. `DisclosureGroup` provides a controlled, accessible expansion row on
-top of `InlineDisclosure`.
+`CodeBlock` takes plain source and, optionally, a highlighter's rendered
+element, so no syntax engine enters Passui's dependency graph. `Conversation`
+provides `Conversation.Messages` and `Conversation.Composer` for a message
+thread. Every string, such as button names, comes from your app.
 
-```tsx
-import { useState } from "react";
-import { Menu } from "@passui/react/menu";
-import { DisclosureGroup } from "@passui/react/disclosure-group";
-
-export function Preferences() {
-	const [advanced, setAdvanced] = useState(false);
-	return (
-		<section>
-			<Menu
-				label="More options"
-				items={[{ label: "Refresh", onSelect: () => {} }]}
-			>
-				More
-			</Menu>
-			<DisclosureGroup
-				label="Advanced"
-				open={advanced}
-				onOpenChange={setAdvanced}
-			>
-				<p>Additional preferences</p>
-			</DisclosureGroup>
-		</section>
-	);
-}
-```
+`copyText` from `@passui/react/clipboard` returns `true` only after a
+successful write and `false` if unavailable or denied. Call it from a user
+action and show success only when it returns `true`; offer manual copying
+otherwise. It adds no sound or haptic feedback.
 
 ### Icons and prop types
 
-On this development branch, React icons have a dedicated entry point:
+Icons live in `@passui/icons`, one entry point per icon:
 
 ```tsx
-import { IconButton, type IconButtonProps } from "@passui/react/icon-button";
-import { SettingsIcon } from "@passui/react/icons";
-
-const settingsAction: IconButtonProps = {
-	label: "Settings",
-	variant: "ghost",
-	size: "icon-sm",
-};
+import { Button } from "@passui/react/button";
+import { SettingsIcon } from "@passui/icons/settings";
 
 export function SettingsButton() {
 	return (
-		<IconButton {...settingsAction}>
+		<Button variant="ghost" size="icon-sm" aria-label="Settings">
 			<SettingsIcon />
-		</IconButton>
+		</Button>
 	);
 }
 ```
 
-Hover a prop for its choices and defaults. Named props types are exported
-beside their controls. For a fixed set of picker values, keep your state
-as that literal union (for example, `useState<"personal" | "team">("personal")`)
-so selection callbacks retain the same choices. Existing root icon imports
-continue to work. These additions have not been published yet.
-
-Clipboard actions can use `copyText` from `@passui/react/clipboard`. It
-returns `true` only after a successful write and `false` if unavailable or
-denied. Call it from a user action and show success only when it returns
-`true`; offer manual copying otherwise. It adds no sound or haptic feedback.
+Props with fixed choices, such as `variant` and `size`, are string literal
+unions exported beside their component, so editors suggest valid values.
 
 See [Installation](https://passui.pherus.org/docs/installation) for the
 root setup, and [Skills](https://passui.pherus.org/docs/skills) to give AI
@@ -194,41 +152,3 @@ your user npm configuration.
 ## License
 
 [MIT](./LICENSE)
-
-### Documentation and loading primitives
-
-Import `Accordion`, `ComboBox`, `RadioGroup`, `Breadcrumb`, `Skeleton`,
-`ContentUnavailableView`, `CodeBlock` and `KeyboardShortcut` from their kebab case
-subpaths, such as `@passui/react/combo-box`. Each has a named props type and
-interactive documentation. CodeBlock accepts plain source and optionally a
-highlighter element, keeping syntax engines out of the library dependency graph.
-Shared component styles come from the stylesheet import above.
-
-Stepper places the spoken and rolling value beside its two action segments.
-Its digit columns preserve carries and stop animating under Reduce Motion.
-Compact desktop rows retain larger targets for coarse pointers. Import only
-needed controls and icons through public entries; CSS is preserved while unused
-JavaScript exports can be removed by the bundler.
-
-### Search, selection and motion
-
-`ComboBox` is a searchable `Picker` with optional `onCreate` and a localized
-`createLabel`. `Command` composes grouped search actions; `CommandDialog` adds
-modal focus handling. Shortcut hints are display only; your application owns the
-actual keyboard bindings. Picker, compact calendar and time panels share one
-glass surface that expands from its trigger and restores it after dismissal.
-
-`TextField` and `SecureField` accept `labelPlacement="floating"`. SearchField
-supports `collapsible` for a single pill that expands around its search icon.
-`OneTimeCode` draws cells around one native input, preserving paste and code
-autofill. Your application owns verification and supplies status feedback.
-
-`SloshSlider` and `WakeSlider` take `label`, optional `value` or `defaultValue`,
-and `onChange`. Values run from 0 to 100. Their React-only motion stops at rest
-and respects Reduce Motion. Slosh has `viscosity`, `momentum` and `tilt`; Wake
-has `bars` and `wake`. Their source attribution and MIT notice are included in
-[THIRD_PARTY_NOTICES.md](THIRD_PARTY_NOTICES.md). ProgressView remains read only
-and shares the liquid fill without acquiring slider behavior.
-
-`AspectRatio` clips images and videos to `ratio` without distorting them. The
-documentation demonstrates equal-area crops in a stable stage.

package/THIRD_PARTY_NOTICES.md

@@ -23,3 +23,32 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
+
+# Vaul constants
+
+Drawer and Sheet use the release curve (`cubic-bezier(0.32, 0.72, 0, 1)`) and the
+page scale values (26 px top offset, 8 px radius) read from
+[Vaul](https://github.com/emilkowalski/vaul) 1.1.2, provided under the MIT licence.
+Passui does not bundle Vaul; the gesture engine is `@zag-js/drawer`.
+
+## MIT License — Vaul
+
+Copyright (c) 2023 Emil Kowalski
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/accordion.d.ts

@@ -0,0 +1,15 @@
+import * as zagAccordion from "@zag-js/accordion";
+import { ComponentProps, ReactNode } from "react";
+export interface AccordionProps extends Omit<zagAccordion.Props, "id" | "ids" | "onValueChange"> {
+  onValueChange?: (value: string[]) => void;
+  children?: ReactNode;
+  className?: string;
+}
+/** Stacked disclosures. Single by default, `multiple` lets several stay open. */
+export declare function Accordion({ onValueChange, children, className, collapsible, ...props }: AccordionProps): import("react").JSX.Element;
+export declare function AccordionItem({ value, disabled, className, ...props }: Omit<ComponentProps<"div">, "value"> & {
+  value: string;
+  disabled?: boolean;
+}): import("react").JSX.Element;
+export declare function AccordionTrigger({ className, children, ...props }: ComponentProps<"button">): import("react").JSX.Element;
+export declare function AccordionContent({ className, children, ...props }: ComponentProps<"div">): import("react").JSX.Element;

package/dist/accordion.js

@@ -0,0 +1,93 @@
+"use client";
+import { cx } from "./lib/cx.js";
+import * as zagAccordion from "@zag-js/accordion";
+import { normalizeProps, useMachine } from "@zag-js/react";
+import { createContext, useContext, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/accordion.tsx
+const Context = createContext(null);
+const ItemContext = createContext(null);
+function useAccordion() {
+	const api = useContext(Context);
+	const item = useContext(ItemContext);
+	if (!api) throw new Error("Accordion parts must be used inside <Accordion>.");
+	return {
+		api,
+		item
+	};
+}
+/** Stacked disclosures. Single by default, `multiple` lets several stay open. */
+function Accordion({ onValueChange, children, className, collapsible = true, ...props }) {
+	const id = useId();
+	const service = useMachine(zagAccordion.machine, {
+		id,
+		collapsible,
+		onValueChange: ({ value }) => onValueChange?.(value),
+		...props
+	});
+	const api = zagAccordion.connect(service, normalizeProps);
+	return /* @__PURE__ */ jsx(Context.Provider, {
+		value: api,
+		children: /* @__PURE__ */ jsx("div", {
+			...api.getRootProps(),
+			"data-slot": "accordion",
+			className: cx("w-full", className),
+			children
+		})
+	});
+}
+function AccordionItem({ value, disabled, className, ...props }) {
+	const { api } = useAccordion();
+	const item = {
+		value,
+		disabled
+	};
+	return /* @__PURE__ */ jsx(ItemContext.Provider, {
+		value: item,
+		children: /* @__PURE__ */ jsx("div", {
+			...api.getItemProps(item),
+			"data-slot": "accordion-item",
+			className: cx("border-b border-separator last:border-b-0", className),
+			...props
+		})
+	});
+}
+function AccordionTrigger({ className, children, ...props }) {
+	const { api, item } = useAccordion();
+	if (!item) throw new Error("AccordionTrigger must be inside <AccordionItem>.");
+	return /* @__PURE__ */ jsx("h3", {
+		className: "m-0 flex",
+		children: /* @__PURE__ */ jsxs("button", {
+			...api.getItemTriggerProps(item),
+			"data-slot": "accordion-trigger",
+			className: cx("flex flex-1 items-center justify-between gap-4 rounded-xl py-4 text-left text-subheadline font-semibold outline-none transition-colors hover:text-label-secondary focus-visible:ring-2 focus-visible:ring-accent/70 disabled:opacity-40 [&[data-state=open]>svg]:rotate-180", className),
+			...props,
+			children: [children, /* @__PURE__ */ jsx("svg", {
+				viewBox: "0 0 16 16",
+				className: "text-label-secondary spring-snappy size-4 shrink-0 transition-transform motion-reduce:transition-none",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: "2",
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ jsx("path", { d: "m4 6 4 4 4-4" })
+			})]
+		})
+	});
+}
+function AccordionContent({ className, children, ...props }) {
+	const { api, item } = useAccordion();
+	if (!item) throw new Error("AccordionContent must be inside <AccordionItem>.");
+	return /* @__PURE__ */ jsx("div", {
+		...api.getItemContentProps(item),
+		"data-slot": "accordion-content",
+		className: "text-footnote text-label-secondary collapse-motion",
+		...props,
+		children: /* @__PURE__ */ jsx("div", {
+			className: cx("pb-4", className),
+			children
+		})
+	});
+}
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

package/dist/alert-dialog.d.ts

@@ -0,0 +1,26 @@
+import { RenderProp } from "./lib/render.js";
+import { ComponentProps, ReactNode } from "react";
+import * as dialog from "@zag-js/dialog";
+export interface AlertDialogProps extends Omit<dialog.Props, "id" | "ids" | "role" | "modal" | "closeOnInteractOutside" | "initialFocusEl"> {
+  children?: ReactNode;
+}
+/**
+ * A dialog that waits for an answer. An outside press does nothing, Escape
+ * presses Cancel, and Cancel receives focus first.
+ */
+export declare function AlertDialog({ children, ...props }: AlertDialogProps): import("react").JSX.Element;
+type PartProps<T extends "button" | "div" | "h2" | "p"> = ComponentProps<T> & {
+  /** Render your own element instead of the default one. */
+  render?: RenderProp;
+};
+export declare function AlertDialogTrigger({ render, ...props }: PartProps<"button">): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+/** Confirms the question and closes. Style it with `className` or `render`. */
+export declare function AlertDialogAction({ render, ...props }: PartProps<"button">): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+/** Dismisses the question and closes. It receives focus when the dialog opens. */
+export declare function AlertDialogCancel({ render, ...props }: PartProps<"button">): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare function AlertDialogContent({ className, render, ...props }: PartProps<"div">): import("react").JSX.Element | null;
+export declare function AlertDialogHeader({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+export declare function AlertDialogFooter({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+export declare function AlertDialogTitle({ className, ...props }: ComponentProps<"h2">): import("react").JSX.Element;
+export declare function AlertDialogDescription({ className, ...props }: ComponentProps<"p">): import("react").JSX.Element;
+export {};

package/dist/alert-dialog.js

@@ -0,0 +1,142 @@
+"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 { useWaterDrop } from "./lib/water-drop.js";
+import { normalizeProps, useMachine } from "@zag-js/react";
+import { createContext, useContext, useId, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as dialog from "@zag-js/dialog";
+// src/components/alert-dialog.tsx
+const Context = createContext(null);
+function useAlertDialog() {
+	const value = useContext(Context);
+	if (!value) throw new Error("AlertDialog parts must be used inside <AlertDialog>.");
+	return value;
+}
+/**
+* A dialog that waits for an answer. An outside press does nothing, Escape
+* presses Cancel, and Cancel receives focus first.
+*/
+function AlertDialog({ children, ...props }) {
+	const id = useId();
+	const cancel = useRef(null);
+	const apiRef = useRef(null);
+	const service = useMachine(dialog.machine, {
+		id,
+		...props,
+		role: "alertdialog",
+		modal: true,
+		closeOnInteractOutside: false,
+		initialFocusEl: () => cancel.current,
+		onEscapeKeyDown(event) {
+			event.preventDefault();
+			props.onEscapeKeyDown?.(event);
+			if (cancel.current) cancel.current.click();
+			else apiRef.current?.setOpen(false);
+		}
+	});
+	const api = dialog.connect(service, normalizeProps);
+	apiRef.current = api;
+	return /* @__PURE__ */ jsx(Context.Provider, {
+		value: {
+			api,
+			cancel
+		},
+		children
+	});
+}
+/** Full bleed hairline action cells, as in iOS alerts. */
+const actionStyles = "h-9.5 px-3 text-footnote outline-none transition spring-snappy hover:bg-fill/50 active:bg-fill/80 focus-visible:bg-fill/60";
+function AlertDialogTrigger({ render, ...props }) {
+	const { api } = useAlertDialog();
+	return renderPart("button", mergeProps({
+		...api.getTriggerProps(),
+		"data-slot": "alert-dialog-trigger"
+	}, props), render);
+}
+/** Confirms the question and closes. Style it with `className` or `render`. */
+function AlertDialogAction({ render, ...props }) {
+	const { api } = useAlertDialog();
+	const { id: _id, ...closeProps } = api.getCloseTriggerProps();
+	return renderPart("button", mergeProps({
+		...closeProps,
+		"data-slot": "alert-dialog-action",
+		className: actionStyles + " font-semibold text-accent-text"
+	}, props), render);
+}
+/** Dismisses the question and closes. It receives focus when the dialog opens. */
+function AlertDialogCancel({ render, ...props }) {
+	const { api, cancel } = useAlertDialog();
+	return renderPart("button", mergeProps({
+		...api.getCloseTriggerProps(),
+		ref: cancel,
+		"data-slot": "alert-dialog-cancel",
+		className: actionStyles
+	}, props), render);
+}
+function AlertDialogContent({ className, render, ...props }) {
+	const { api } = useAlertDialog();
+	const drop = useWaterDrop({
+		sourceId: api.getTriggerProps().id,
+		material: "glass-menu squircle [--squircle-radius:1.5rem]"
+	});
+	const { ref, mounted, attrs } = usePresence(api.open, drop);
+	if (!mounted) return null;
+	const state = {
+		...attrs,
+		"data-open": api.open ? "" : void 0
+	};
+	return /* @__PURE__ */ jsxs(Portal, { children: [/* @__PURE__ */ jsx("div", {
+		...api.getBackdropProps(),
+		...state,
+		hidden: false,
+		"data-slot": "alert-dialog-overlay",
+		className: "ease-standard fixed inset-0 z-[60] bg-black/30 backdrop-blur-sm transition-opacity duration-(--duration-normal) data-ending-style:opacity-0 data-starting-style:opacity-0 motion-reduce:transition-none"
+	}), /* @__PURE__ */ jsx("div", {
+		...api.getPositionerProps(),
+		className: "fixed inset-0 z-[60] flex items-center justify-center p-4",
+		children: renderPart("div", mergeProps({
+			...api.getContentProps(),
+			...state,
+			ref,
+			hidden: false,
+			"data-slot": "alert-dialog-content",
+			className: cx("relative grid w-[17.5rem] max-w-[calc(100vw-3rem)] gap-0 overflow-hidden glass-menu squircle morph-reset [--squircle-radius:1.5rem] text-center text-label outline-none transition spring-smooth data-ending-style:scale-[0.88] data-starting-style:scale-[0.88] data-ending-style:opacity-0 data-starting-style:opacity-0 motion-reduce:transition-none motion-reduce:data-ending-style:scale-100 motion-reduce:data-starting-style:scale-100", className)
+		}, props), render)
+	})] });
+}
+function AlertDialogHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "alert-dialog-header",
+		className: cx("flex flex-col items-center gap-1 px-4 pt-5 pb-4", className),
+		...props
+	});
+}
+function AlertDialogFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "alert-dialog-footer",
+		className: cx("flex divide-x divide-separator border-t border-separator [&>*]:min-w-0 [&>*]:flex-1", className),
+		...props
+	});
+}
+function AlertDialogTitle({ className, ...props }) {
+	const { api } = useAlertDialog();
+	return /* @__PURE__ */ jsx("h2", {
+		...api.getTitleProps(),
+		"data-slot": "alert-dialog-title",
+		className: cx("text-headline font-semibold text-label", className),
+		...props
+	});
+}
+function AlertDialogDescription({ className, ...props }) {
+	const { api } = useAlertDialog();
+	return /* @__PURE__ */ jsx("p", {
+		...api.getDescriptionProps(),
+		"data-slot": "alert-dialog-description",
+		className: cx("text-footnote text-label-secondary", className),
+		...props
+	});
+}
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger };

package/dist/alert.d.ts

@@ -0,0 +1,10 @@
+import { ComponentProps } from "react";
+export type AlertVariant = "default" | "destructive";
+export type AlertProps = ComponentProps<"div"> & {
+  /** @default "default" */
+  variant?: AlertVariant;
+};
+/** An inline message. Put an icon first and it takes its own column. */
+export declare function Alert({ variant, className, ...props }: AlertProps): import("react").JSX.Element;
+export declare function AlertTitle({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+export declare function AlertDescription({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;

package/dist/alert.js

@@ -0,0 +1,28 @@
+import { cx } from "./lib/cx.js";
+import { jsx } from "react/jsx-runtime";
+// src/components/alert.tsx
+/** An inline message. Put an icon first and it takes its own column. */
+function Alert({ variant = "default", className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		role: "alert",
+		"data-slot": "alert",
+		"data-variant": variant,
+		className: cx("relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-2xl bg-fill/60 px-4 py-3 text-footnote has-[>svg]:grid-cols-[1rem_1fr] has-[>svg]:gap-x-3 [&>svg]:mt-0.5 [&>svg]:size-4", variant === "destructive" ? "bg-danger/10 text-danger [&>svg]:text-current" : "text-label [&>svg]:text-label-secondary", className),
+		...props
+	});
+}
+function AlertTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "alert-title",
+		className: cx("col-start-2 font-semibold", className),
+		...props
+	});
+}
+function AlertDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "alert-description",
+		className: cx("col-start-2 text-footnote opacity-80", className),
+		...props
+	});
+}
+export { Alert, AlertDescription, AlertTitle };

package/dist/{types/src/components/ambient/ambient.d.ts → ambient.d.ts}

@@ -1,7 +1,7 @@
-import type { ComponentPropsWithoutRef } from "react";
+import { ComponentPropsWithoutRef } from "react";
 type AmbientProps = ComponentPropsWithoutRef<"section"> & {
-    /** The image whose colors glow behind the content. */
-    src?: string | null;
+  /** The image whose colors glow behind the content. */
+  src?: string | null;
 };
 /**
  * Content with its image's colors glowing softly behind it, no card or
@@ -9,4 +9,4 @@ type AmbientProps = ComponentPropsWithoutRef<"section"> & {
  * fades into the page, the way Apple lets a photo light its surroundings.
  */
 export declare function Ambient({ src, className, children, ...props }: AmbientProps): import("react").JSX.Element;
-export {};
+export {};

package/dist/ambient.js

@@ -0,0 +1,22 @@
+import { cx } from "./lib/cx.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/ambient.tsx
+/**
+* Content with its image's colors glowing softly behind it, no card or
+* edge: a blown-up, blurred copy of the image masked into a circle that
+* fades into the page, the way Apple lets a photo light its surroundings.
+*/
+function Ambient({ src, className, children, ...props }) {
+	return /* @__PURE__ */ jsxs("section", {
+		"data-slot": "ambient",
+		className: cx("relative isolate", className),
+		...props,
+		children: [src && /* @__PURE__ */ jsx("img", {
+			"aria-hidden": true,
+			src,
+			alt: "",
+			className: cx("pointer-events-none absolute top-[38%] left-1/2 -z-10 size-[min(32rem,100vw)] -translate-x-1/2 -translate-y-1/2", "rounded-full object-cover opacity-20 blur-3xl", "dark:size-[min(20rem,80vw)] dark:opacity-15 dark:blur-2xl", "mask-[radial-gradient(closest-side,black_35%,transparent)]", "animate-in fade-in-0 zoom-in-90 duration-1000")
+		}), children]
+	});
+}
+export { Ambient };

package/dist/{types/src/appearance → appearance}/platform.d.ts

@@ -1,9 +1,9 @@
-import { type PropsWithChildren } from "react";
+import { PropsWithChildren } from "react";
 export type PlatformOS = "ios" | "android" | "macos" | "windows" | "linux" | "unknown";
 export declare function detectPlatform(userAgent: string, platform: string, maxTouchPoints: number): PlatformOS;
 export declare function resolvePlatform(override: string | null, userAgent: string, platform: string, maxTouchPoints: number): PlatformOS;
 export declare function PlatformScript({ nonce }: {
-    nonce?: string;
+  nonce?: string;
 }): import("react").JSX.Element;
 export declare function PlatformProvider({ children }: PropsWithChildren): import("react").JSX.Element;
-export declare function usePlatform(): PlatformOS;
+export declare function usePlatform(): PlatformOS;

package/dist/appearance/platform.js

@@ -0,0 +1,43 @@
+import { createContext, useContext, useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+// src/appearance/platform.tsx
+const PlatformContext = createContext("unknown");
+function detectPlatform(userAgent, platform, maxTouchPoints) {
+	return resolvePlatform(null, userAgent, platform, maxTouchPoints);
+}
+function resolvePlatform(override, userAgent, platform, maxTouchPoints) {
+	if (override === "ios" || override === "android" || override === "macos" || override === "windows" || override === "linux" || override === "unknown") return override;
+	if (/android/i.test(userAgent)) return "android";
+	if (/iPhone|iPad|iPod/i.test(userAgent)) return "ios";
+	if (platform === "MacIntel" && maxTouchPoints > 1) return "ios";
+	if (/Mac/i.test(platform)) return "macos";
+	if (/Win/i.test(platform)) return "windows";
+	if (/Linux/i.test(platform)) return "linux";
+	return "unknown";
+}
+function initializePlatform(resolve, root, userAgent, platform, maxTouchPoints) {
+	root.setAttribute("data-os", resolve(root.getAttribute("data-os"), userAgent, platform, maxTouchPoints));
+}
+function PlatformScript({ nonce }) {
+	return /* @__PURE__ */ jsx("script", {
+		dangerouslySetInnerHTML: { __html: `(${initializePlatform.toString()})(${resolvePlatform.toString()}, document.documentElement, navigator.userAgent, navigator.platform, navigator.maxTouchPoints)` },
+		nonce,
+		suppressHydrationWarning: true
+	});
+}
+function PlatformProvider({ children }) {
+	const [platform, setPlatform] = useState("unknown");
+	useEffect(() => {
+		const resolved = resolvePlatform(document.documentElement.getAttribute("data-os"), navigator.userAgent, navigator.platform, navigator.maxTouchPoints);
+		document.documentElement.setAttribute("data-os", resolved);
+		setPlatform(resolved);
+	}, []);
+	return /* @__PURE__ */ jsx(PlatformContext.Provider, {
+		value: platform,
+		children
+	});
+}
+function usePlatform() {
+	return useContext(PlatformContext);
+}
+export { PlatformProvider, PlatformScript, detectPlatform, resolvePlatform, usePlatform };