@passui/react 0.1.47 → 0.2.0

package/dist/questionnaire.d.ts

@@ -0,0 +1,46 @@
+export interface QuestionOption {
+  value: string;
+  label: string;
+  description?: string;
+}
+interface QuestionBase {
+  id: string;
+  title: string;
+  description?: string;
+  /** Lets the person move on without answering. @default false */
+  optional?: boolean;
+}
+export type Question = (QuestionBase & {
+  type: "single";
+  options: QuestionOption[];
+}) | (QuestionBase & {
+  type: "multiple";
+  options: QuestionOption[];
+}) | (QuestionBase & {
+  type: "text";
+  placeholder?: string;
+});
+/** A single choice is a string, many choices an array, freeform text a string. */
+export type Answers = Record<string, string | string[]>;
+export interface QuestionnaireProps {
+  questions: Question[];
+  /** Called with every answer after the last step. */
+  onComplete: (answers: Answers) => void;
+  /** Every string the questionnaire shows, so apps translate them. */
+  labels: {
+    next: string;
+    back: string;
+    skip: string;
+    finish: string;
+    /** Names the step, for example "Question 2 of 5". */
+    step: (current: number, total: number) => string;
+  };
+  className?: string;
+}
+/**
+ * A multi-step questionnaire: one question at a time, with single choice,
+ * multiple choice, freeform and skippable questions, a way back, and a
+ * progress bar. Answers are plain values, collected on the last step.
+ */
+export declare function Questionnaire({ questions, onComplete, labels, className }: QuestionnaireProps): import("react").JSX.Element | null;
+export {};

package/dist/questionnaire.js

@@ -0,0 +1,133 @@
+"use client";
+import { cx } from "./lib/cx.js";
+import { Button } from "./button.js";
+import { useId, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/questionnaire.tsx
+const card = "has-[:checked]:bg-accent-soft has-[:checked]:shadow-[inset_0_0_0_1.5px_var(--color-accent)] has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-accent/70 flex cursor-pointer items-start gap-3 rounded-2xl bg-fill/60 p-3 text-footnote transition spring-snappy active:scale-[0.99] motion-reduce:transition-none";
+/**
+* A multi-step questionnaire: one question at a time, with single choice,
+* multiple choice, freeform and skippable questions, a way back, and a
+* progress bar. Answers are plain values, collected on the last step.
+*/
+function Questionnaire({ questions, onComplete, labels, className }) {
+	const [index, setIndex] = useState(0);
+	const [answers, setAnswers] = useState({});
+	const name = useId();
+	const question = questions[index];
+	if (!question) return null;
+	const last = index === questions.length - 1;
+	const value = answers[question.id];
+	const answered = Array.isArray(value) ? value.length > 0 : !!value?.trim();
+	const set = (next) => setAnswers((current) => ({
+		...current,
+		[question.id]: next
+	}));
+	const advance = (final) => {
+		if (last) onComplete(final);
+		else setIndex(index + 1);
+	};
+	const submit = (event) => {
+		event.preventDefault();
+		advance(answers);
+	};
+	const skip = () => {
+		const { [question.id]: _skipped, ...rest } = answers;
+		setAnswers(rest);
+		advance(rest);
+	};
+	return /* @__PURE__ */ jsxs("form", {
+		onSubmit: submit,
+		"data-slot": "questionnaire",
+		className: cx("flex w-full max-w-md flex-col gap-5", className),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-2",
+				children: [/* @__PURE__ */ jsx("div", {
+					role: "progressbar",
+					"aria-label": labels.step(index + 1, questions.length),
+					"aria-valuemin": 1,
+					"aria-valuemax": questions.length,
+					"aria-valuenow": index + 1,
+					className: "bg-fill h-1.5 w-full overflow-hidden rounded-full",
+					children: /* @__PURE__ */ jsx("div", {
+						className: "bg-accent spring-smooth h-full rounded-full transition-[width] motion-reduce:transition-none",
+						style: { width: `${(index + 1) / questions.length * 100}%` }
+					})
+				}), /* @__PURE__ */ jsx("p", {
+					className: "text-caption text-label-tertiary m-0",
+					children: labels.step(index + 1, questions.length)
+				})]
+			}),
+			/* @__PURE__ */ jsxs("fieldset", {
+				className: "m-0 flex min-w-0 animate-[passui-step-in_var(--spring-smooth-duration)_var(--spring-smooth)] flex-col gap-3 border-0 p-0 motion-reduce:animate-none",
+				children: [
+					/* @__PURE__ */ jsx("legend", {
+						className: "text-headline text-label p-0 font-semibold",
+						children: question.title
+					}),
+					question.description ? /* @__PURE__ */ jsx("p", {
+						className: "text-footnote text-label-secondary m-0",
+						children: question.description
+					}) : null,
+					question.type === "text" ? /* @__PURE__ */ jsx("textarea", {
+						"aria-label": question.title,
+						placeholder: question.placeholder,
+						value: typeof value === "string" ? value : "",
+						onChange: (event) => set(event.target.value),
+						className: "control-field text-footnote text-label field-sizing-content min-h-20 w-full resize-none rounded-xl px-3 py-2 outline-none"
+					}) : /* @__PURE__ */ jsx("div", {
+						className: "flex flex-col gap-2",
+						children: question.options.map((option) => {
+							const multiple = question.type === "multiple";
+							const picked = Array.isArray(value) ? value : [];
+							return /* @__PURE__ */ jsxs("label", {
+								className: card,
+								children: [/* @__PURE__ */ jsx("input", {
+									type: multiple ? "checkbox" : "radio",
+									name: `${name}-${question.id}`,
+									value: option.value,
+									checked: multiple ? picked.includes(option.value) : value === option.value,
+									onChange: () => set(multiple ? picked.includes(option.value) ? picked.filter((item) => item !== option.value) : [...picked, option.value] : option.value),
+									className: "accent-accent mt-0.5 size-4 shrink-0"
+								}), /* @__PURE__ */ jsxs("span", {
+									className: "flex min-w-0 flex-col",
+									children: [/* @__PURE__ */ jsx("span", {
+										className: "text-label font-medium",
+										children: option.label
+									}), option.description ? /* @__PURE__ */ jsx("span", {
+										className: "text-caption text-label-secondary",
+										children: option.description
+									}) : null]
+								})]
+							}, option.value);
+						})
+					})
+				]
+			}, question.id),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between gap-2",
+				children: [/* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "ghost",
+					disabled: index === 0,
+					onClick: () => setIndex(index - 1),
+					children: labels.back
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2",
+					children: [question.optional ? /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "ghost",
+						onClick: skip,
+						children: labels.skip
+					}) : null, /* @__PURE__ */ jsx(Button, {
+						type: "submit",
+						disabled: !answered && !question.optional,
+						children: last ? labels.finish : labels.next
+					})]
+				})]
+			})
+		]
+	});
+}
+export { Questionnaire };

package/dist/radio-group.d.ts

@@ -0,0 +1,21 @@
+import { ComponentProps, ReactNode } from "react";
+import * as radio from "@zag-js/radio-group";
+export interface RadioGroupProps extends Omit<radio.Props, "id" | "ids" | "onValueChange"> {
+  onValueChange?: (value: string | null) => void;
+  children?: ReactNode;
+  className?: string;
+  /** Names the group when there is no visible label. */
+  "aria-label"?: string;
+}
+export declare function RadioGroup({ onValueChange, children, className, "aria-label": ariaLabel, ...props }: RadioGroupProps): import("react").JSX.Element;
+export type RadioGroupItemProps = Omit<ComponentProps<"label">, "value"> & {
+  value: string;
+  disabled?: boolean;
+  /**
+   * Draws no radio dot: the children are the whole control, such as a color
+   * swatch. Style them with `group-data-[state=checked]:`.
+   */
+  bare?: boolean;
+};
+/** One choice. Children are its label. */
+export declare function RadioGroupItem({ value, disabled, bare, children, className, ...props }: RadioGroupItemProps): import("react").JSX.Element;

package/dist/radio-group.js

@@ -0,0 +1,67 @@
+"use client";
+import { cx } from "./lib/cx.js";
+import { normalizeProps, useMachine } from "@zag-js/react";
+import { createContext, useContext, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as radio from "@zag-js/radio-group";
+// src/components/radio-group.tsx
+const Context = createContext(null);
+function useRadio() {
+	const api = useContext(Context);
+	if (!api) throw new Error("RadioGroupItem must be used inside <RadioGroup>.");
+	return api;
+}
+function RadioGroup({ onValueChange, children, className, "aria-label": ariaLabel, ...props }) {
+	const id = useId();
+	const service = useMachine(radio.machine, {
+		id,
+		onValueChange: ({ value }) => onValueChange?.(value),
+		...props
+	});
+	const api = radio.connect(service, normalizeProps);
+	return /* @__PURE__ */ jsx(Context.Provider, {
+		value: api,
+		children: /* @__PURE__ */ jsx("div", {
+			...api.getRootProps(),
+			role: "radiogroup",
+			"aria-label": ariaLabel,
+			"data-slot": "radio-group",
+			className: cx("grid gap-3", className),
+			children
+		})
+	});
+}
+/** One choice. Children are its label. */
+function RadioGroupItem({ value, disabled, bare, children, className, ...props }) {
+	const api = useRadio();
+	const item = {
+		value,
+		disabled
+	};
+	if (bare) return /* @__PURE__ */ jsxs("label", {
+		...api.getItemProps(item),
+		"data-slot": "radio-group-item",
+		className: cx("group cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-40", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("input", { ...api.getItemHiddenInputProps(item) }), children]
+	});
+	return /* @__PURE__ */ jsxs("label", {
+		...api.getItemProps(item),
+		"data-slot": "radio-group-item",
+		className: cx("group inline-flex cursor-pointer items-center gap-2.5 text-footnote data-disabled:cursor-not-allowed data-disabled:opacity-40", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("input", { ...api.getItemHiddenInputProps(item) }),
+			/* @__PURE__ */ jsx("span", {
+				...api.getItemControlProps(item),
+				className: "bg-fill spring-snappy group-focus-within:ring-accent/70 data-[state=checked]:bg-accent inline-flex size-5.5 shrink-0 items-center justify-center rounded-full shadow-[inset_0_0_0_0.5px_var(--color-separator)] transition group-focus-within:ring-2 group-active:scale-90 motion-reduce:transition-none motion-reduce:group-active:scale-100",
+				children: /* @__PURE__ */ jsx("span", { className: "bg-on-accent spring-bouncy size-2 scale-0 rounded-full transition-transform group-data-[state=checked]:scale-100" })
+			}),
+			/* @__PURE__ */ jsx("span", {
+				...api.getItemTextProps(item),
+				children
+			})
+		]
+	});
+}
+export { RadioGroup, RadioGroupItem };

package/dist/search-field.d.ts

@@ -0,0 +1,18 @@
+import { ComponentProps } from "react";
+export type SearchFieldSize = "sm" | "md" | "lg";
+export type SearchFieldProps = Omit<ComponentProps<"input">, "size"> & {
+  /** Height, icon and text, from the shared control scale. @default "md" */
+  size?: SearchFieldSize;
+  /**
+   * Rests as a round search button and opens into the field when focused or
+   * when it holds text. Needs a `width` class on the field to open to.
+   * @default false
+   */
+  collapsible?: boolean;
+};
+/**
+ * A search input in a full pill. Native `type="search"`, so the clear button,
+ * Escape and mobile search keyboards come with it. It can rest as a round
+ * button and open on focus, in CSS only.
+ */
+export declare function SearchField({ size, collapsible, placeholder, className, ...props }: SearchFieldProps): import("react").JSX.Element;

package/dist/search-field.js

@@ -0,0 +1,45 @@
+"use client";
+import { cx } from "./lib/cx.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { SearchIcon } from "@passui/icons/search";
+// src/components/search-field.tsx
+const pill = {
+	sm: "h-7.5 gap-1.5 px-3 text-footnote",
+	md: "h-8.5 gap-2 px-3.5 text-footnote",
+	lg: "h-9.5 gap-2.5 px-4 text-subheadline"
+};
+/** The width a collapsed field keeps: a round button the size of the control. */
+const collapsed = {
+	sm: "w-7.5",
+	md: "w-8.5",
+	lg: "w-9.5"
+};
+const icons = {
+	sm: 13,
+	md: 14,
+	lg: 16
+};
+/**
+* A search input in a full pill. Native `type="search"`, so the clear button,
+* Escape and mobile search keyboards come with it. It can rest as a round
+* button and open on focus, in CSS only.
+*/
+function SearchField({ size = "md", collapsible = false, placeholder = "Search", className, ...props }) {
+	return /* @__PURE__ */ jsxs("label", {
+		"data-slot": "search-field",
+		"data-collapsible": collapsible || void 0,
+		className: cx("control-field group flex max-w-full items-center rounded-full text-label-tertiary focus-within:ring-2 focus-within:ring-accent/70", pill[size], !collapsible && "w-full", collapsible && cx("spring-smooth justify-start overflow-hidden transition-[width] motion-reduce:transition-none", collapsed[size], "focus-within:w-full has-[input:not(:placeholder-shown)]:w-full"), className),
+		children: [/* @__PURE__ */ jsx(SearchIcon, {
+			size: icons[size],
+			"aria-hidden": "true",
+			className: "shrink-0"
+		}), /* @__PURE__ */ jsx("input", {
+			type: "search",
+			placeholder,
+			"aria-label": props["aria-labelledby"] ? void 0 : placeholder,
+			className: cx("min-w-0 grow bg-transparent text-label outline-none placeholder:text-label-tertiary", collapsible && "opacity-0 transition-opacity group-focus-within:opacity-100 group-has-[input:not(:placeholder-shown)]:opacity-100"),
+			...props
+		})]
+	});
+}
+export { SearchField };

package/dist/segmented-control.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from "react";
+export interface SegmentedOption {
+  value: string;
+  label: ReactNode;
+  disabled?: boolean;
+}
+export interface SegmentedControlProps {
+  options: SegmentedOption[];
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  "aria-label"?: string;
+  className?: string;
+}
+/** Mutually exclusive choices in one pill. A single select `ToggleGroup`. */
+export declare function SegmentedControl({ options, value, defaultValue, onValueChange, "aria-label": ariaLabel, className }: SegmentedControlProps): import("react").JSX.Element;

package/dist/segmented-control.js

@@ -0,0 +1,25 @@
+"use client";
+import { cx } from "./lib/cx.js";
+import { ToggleGroup, ToggleGroupItem } from "./toggle-group.js";
+import { jsx } from "react/jsx-runtime";
+// src/components/segmented-control.tsx
+/** Mutually exclusive choices in one pill. A single select `ToggleGroup`. */
+function SegmentedControl({ options, value, defaultValue, onValueChange, "aria-label": ariaLabel, className }) {
+	return /* @__PURE__ */ jsx(ToggleGroup, {
+		"aria-label": ariaLabel,
+		className: cx("w-fit", className),
+		size: "sm",
+		value: value === void 0 ? void 0 : [value],
+		defaultValue: defaultValue === void 0 ? void 0 : [defaultValue],
+		deselectable: false,
+		onValueChange: (next) => {
+			if (next[0]) onValueChange?.(next[0]);
+		},
+		children: options.map((o) => /* @__PURE__ */ jsx(ToggleGroupItem, {
+			value: o.value,
+			disabled: o.disabled,
+			children: o.label
+		}, o.value))
+	});
+}
+export { SegmentedControl };

package/dist/select.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from "react";
+import * as zagSelect from "@zag-js/select";
+export interface SelectItem {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+export interface SelectProps extends Omit<zagSelect.Props<SelectItem>, "id" | "ids" | "collection" | "value" | "defaultValue" | "onValueChange"> {
+  items: SelectItem[];
+  value?: string | null;
+  defaultValue?: string | null;
+  onValueChange?: (value: string | null) => void;
+  placeholder?: ReactNode;
+  /** Shown before the value inside the trigger, such as a globe for a language list. */
+  icon?: ReactNode;
+  "aria-label"?: string;
+  className?: string;
+}
+/**
+ * A single choice from a list. Renders a native hidden `select`, so it submits
+ * with its form, and a listbox that opens over the trigger with the selected
+ * option on the trigger's value.
+ */
+export declare function Select({ items, value, defaultValue, onValueChange, placeholder, icon, "aria-label": ariaLabel, className, ...props }: SelectProps): import("react").JSX.Element;

package/dist/select.js

@@ -0,0 +1,107 @@
+"use client";
+import { cx } from "./lib/cx.js";
+import { Portal } from "./lib/portal.js";
+import { usePresence } from "./lib/presence.js";
+import { alignSelectedOption, positionerSide, useAnchorFollow, useTriggerAnchor, useWaterDrop } from "./lib/water-drop.js";
+import { normalizeProps, useMachine } from "@zag-js/react";
+import { useId, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as zagSelect from "@zag-js/select";
+// src/components/select.tsx
+/**
+* A single choice from a list. Renders a native hidden `select`, so it submits
+* with its form, and a listbox that opens over the trigger with the selected
+* option on the trigger's value.
+*/
+function Select({ items, value, defaultValue, onValueChange, placeholder = "Select", icon, "aria-label": ariaLabel, className, ...props }) {
+	const id = useId();
+	const collection = useMemo(() => zagSelect.collection({
+		items,
+		itemToValue: (i) => i.value,
+		itemToString: (i) => i.label,
+		isItemDisabled: (i) => !!i.disabled
+	}), [items]);
+	const one = (v) => v === void 0 ? void 0 : v ? [v] : [];
+	const anchor = useTriggerAnchor("bottom-start", 6);
+	const service = useMachine(zagSelect.machine, {
+		id,
+		collection,
+		value: one(value),
+		defaultValue: one(defaultValue),
+		onValueChange: ({ value: next }) => onValueChange?.(next[0] ?? null),
+		positioning: {
+			fitViewport: true,
+			placement: "bottom-start",
+			offset: { mainAxis: 6 },
+			getAnchorRect: anchor.getAnchorRect
+		},
+		...props
+	});
+	const api = zagSelect.connect(service, normalizeProps);
+	anchor.state.shift = () => alignSelectedOption(document.getElementById(api.getTriggerProps().id ?? ""), document.getElementById(api.getContentProps().id ?? ""));
+	useAnchorFollow(anchor, api.open, positionerSide(api.getPositionerProps()), api.reposition);
+	const drop = useWaterDrop({
+		sourceId: api.getTriggerProps().id,
+		material: "liquid-glass-dense squircle [--squircle-radius:1.25rem]"
+	});
+	const { ref, mounted, attrs } = usePresence(api.open, drop);
+	const selected = api.selectedItems[0];
+	return /* @__PURE__ */ jsxs("div", {
+		...api.getRootProps(),
+		"data-slot": "select",
+		className: cx("w-full", className),
+		children: [
+			/* @__PURE__ */ jsx("select", { ...api.getHiddenSelectProps() }),
+			/* @__PURE__ */ jsx("div", {
+				...api.getControlProps(),
+				children: /* @__PURE__ */ jsxs("button", {
+					...api.getTriggerProps(),
+					"aria-label": ariaLabel,
+					"data-slot": "select-trigger",
+					className: "group bg-fill/60 text-footnote text-label focus-visible:ring-accent/70 aria-invalid:ring-danger/70 spring-snappy flex h-8.5 w-full items-center justify-between gap-2 rounded-xl px-3 text-left transition outline-none focus-visible:ring-2 active:scale-[0.98] disabled:opacity-40 aria-invalid:ring-2 motion-reduce:transition-none motion-reduce:active:scale-100",
+					children: [/* @__PURE__ */ jsx("span", {
+						...api.getValueTextProps(),
+						className: selected ? "" : "text-label-tertiary",
+						children: selected?.label ?? placeholder
+					}), /* @__PURE__ */ jsx("svg", {
+						viewBox: "0 0 16 16",
+						className: "text-label-secondary size-3.5 shrink-0 transition-transform duration-(--duration-fast) group-data-[state=open]:rotate-180 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" })
+					})]
+				})
+			}),
+			mounted ? /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx("div", {
+				...api.getPositionerProps(),
+				className: "z-[70]",
+				children: /* @__PURE__ */ jsx("div", {
+					...api.getContentProps(),
+					...attrs,
+					ref,
+					hidden: false,
+					"data-slot": "select-content",
+					className: "liquid-glass-dense squircle morph-reset spring-smooth max-h-[min(18rem,var(--available-height,18rem))] w-max max-w-(--available-width,100vw) min-w-(--reference-width) origin-(--transform-origin,center) overflow-y-auto p-1.5 transition outline-none [--squircle-radius:1.25rem] data-ending-style:scale-[0.88] data-ending-style:opacity-0 data-starting-style:scale-[0.88] data-starting-style:opacity-0 motion-reduce:transition-none",
+					children: items.map((item) => /* @__PURE__ */ jsxs("div", {
+						...api.getItemProps({ item }),
+						"data-slot": "select-item",
+						className: "text-footnote text-label data-highlighted:bg-accent/15 flex cursor-pointer items-center justify-between gap-3 rounded-xl px-3 py-2 data-disabled:opacity-40",
+						children: [/* @__PURE__ */ jsx("span", {
+							...api.getItemTextProps({ item }),
+							children: item.label
+						}), /* @__PURE__ */ jsx("span", {
+							...api.getItemIndicatorProps({ item }),
+							className: "text-accent-text",
+							children: "✓"
+						})]
+					}, item.value))
+				})
+			}) }) : null
+		]
+	});
+}
+export { Select };

package/dist/separator.d.ts

@@ -0,0 +1,9 @@
+import { ComponentProps } from "react";
+export type SeparatorProps = ComponentProps<"div"> & {
+  /** @default "horizontal" */
+  orientation?: "horizontal" | "vertical";
+  /** Purely visual separators are hidden from assistive technology. @default true */
+  decorative?: boolean;
+};
+/** A hairline rule between groups. */
+export declare function Separator({ orientation, decorative, className, ...props }: SeparatorProps): import("react").JSX.Element;

package/dist/separator.js

@@ -0,0 +1,17 @@
+import { cx } from "./lib/cx.js";
+import { jsx } from "react/jsx-runtime";
+// src/components/separator.tsx
+/** A hairline rule between groups. */
+function Separator({ orientation = "horizontal", decorative = true, className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "separator",
+		"data-orientation": orientation,
+		...decorative ? { role: "none" } : {
+			role: "separator",
+			"aria-orientation": orientation
+		},
+		className: cx("shrink-0 bg-separator data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px", className),
+		...props
+	});
+}
+export { Separator };

package/dist/{types/src/lib/shapes.d.ts → shapes.d.ts}

@@ -1,5 +1,5 @@
 /** Material 3 expressive outlines: a circle and the scalloped "cookie", "clover", and "sunny" shapes. */
-export declare const shapes: readonly ["circle", "cookie4", "cookie6", "cookie9", "clover", "sunny", 
+export declare const shapes: readonly ["circle", "cookie4", "cookie6", "cookie9", "clover", "sunny",
 /** Reserved for the Pherus mark itself, so it never matches a project's icon. */
 "cookie12"];
 export type Shape = (typeof shapes)[number];
@@ -14,4 +14,4 @@ export declare function shapePath(shape: Shape, cx: number, cy: number, r: numbe
  * The app wide `dualTone` rule dims every svg path for two tone icons; a
  * drawn shape or illustration opts out with this so its colors stay true.
  */
-export declare const plainSvg = "cursor-[inherit] [&_path]:opacity-100 [&_path]:transform-none";
+export declare const plainSvg = "cursor-[inherit] [&_path]:opacity-100 [&_path]:transform-none";

package/dist/shapes.js

@@ -0,0 +1,65 @@
+// src/lib/shapes.ts
+/** Material 3 expressive outlines: a circle and the scalloped "cookie", "clover", and "sunny" shapes. */
+const shapes = [
+	"circle",
+	"cookie4",
+	"cookie6",
+	"cookie9",
+	"clover",
+	"sunny",
+	"cookie12"
+];
+/** Lobe count and wave depth (as a fraction of the radius) for each wavy shape. */
+const waves = {
+	cookie4: {
+		lobes: 4,
+		depth: .08
+	},
+	cookie6: {
+		lobes: 6,
+		depth: .07
+	},
+	cookie9: {
+		lobes: 9,
+		depth: .055
+	},
+	clover: {
+		lobes: 4,
+		depth: .16
+	},
+	sunny: {
+		lobes: 8,
+		depth: .045
+	},
+	cookie12: {
+		lobes: 12,
+		depth: .04
+	}
+};
+const STEPS = 144;
+/**
+* An SVG path for a Material 3 expressive shape centred on (cx, cy): a circle
+* whose radius rides a cosine wave, which gives the soft scalloped "cookie",
+* "clover", and "sunny" outlines. The wave is normalised so every shape fills
+* the same `r`, keeping icons optically the same size.
+*/
+function shapePath(shape, cx, cy, r) {
+	if (shape === "circle") return `M ${cx - r} ${cy} a ${r} ${r} 0 1 0 ${r * 2} 0 a ${r} ${r} 0 1 0 ${-r * 2} 0 Z`;
+	const { lobes, depth } = waves[shape];
+	const base = r / (1 + depth);
+	const points = [];
+	for (let i = 0; i < STEPS; i++) {
+		const theta = i / STEPS * Math.PI * 2 - Math.PI / 2;
+		const radius = base * (1 + depth * Math.cos(lobes * (theta + Math.PI / 2)));
+		const x = cx + radius * Math.cos(theta);
+		const y = cy + radius * Math.sin(theta);
+		points.push(`${i === 0 ? "M" : "L"} ${x.toFixed(2)} ${y.toFixed(2)}`);
+	}
+	return `${points.join(" ")} Z`;
+}
+/**
+* The app wide `dualTone` rule dims every svg path for two tone icons; a
+* drawn shape or illustration opts out with this so its colors stay true.
+*/
+const plainSvg = "cursor-[inherit] [&_path]:opacity-100 [&_path]:transform-none";
+export { plainSvg, shapePath, shapes };

package/dist/sheet.d.ts

@@ -0,0 +1,24 @@
+import { RenderProp } from "./lib/render.js";
+import { ComponentProps, ReactNode } from "react";
+import * as drawer from "@zag-js/drawer";
+export type SheetSide = "top" | "right" | "bottom" | "left";
+export interface SheetProps extends Omit<drawer.Props, "id" | "ids" | "role" | "stack" | "swipeDirection" | "snapPoint" | "snapPoints" | "defaultSnapPoint"> {
+  /** Which edge the sheet slides from. */
+  side?: SheetSide;
+  children?: ReactNode;
+}
+/** A panel that slides in from any edge and swipes away. Renders no element of its own. */
+export declare function Sheet({ children, side, ...props }: SheetProps): 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 SheetTrigger({ render, ...props }: PartProps<"button">): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare function SheetClose({ render, ...props }: PartProps<"button">): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+/** Backdrop, panel and focus trap. Mounts only while open or leaving. */
+export declare function SheetContent({ className, render, ...props }: PartProps<"div">): import("react").JSX.Element | null;
+export declare function SheetHeader({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+export declare function SheetFooter({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+export declare function SheetTitle({ className, ...props }: ComponentProps<"h2">): import("react").JSX.Element;
+export declare function SheetDescription({ className, ...props }: ComponentProps<"p">): import("react").JSX.Element;
+export {};