@tanishqkancharla/maui 0.0.1

package/dist/components/Dialog.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+type DialogProps = {
+    children?: React.ReactNode;
+    onClickOutside?: () => void;
+};
+export declare function Dialog(props: DialogProps): React.JSX.Element;
+export {};

package/dist/components/Dialog.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { animated, useSpring } from "@react-spring/web";
+import { style, useStyles } from "purse-styles";
+import { FocusScope } from "../hooks/useFocus";
+import { border } from "../tokens/borders";
+import { colors } from "../tokens/colors";
+import { Overlay } from "./Overlay";
+const dialogStyle = style(border([], "border"), {
+    flex: 1,
+    borderRadius: "4px",
+    backgroundColor: colors.gray[2],
+    margin: "15vh 20vw",
+    padding: "32px",
+});
+const springConfigs = {
+    big: {
+        tension: 700,
+        friction: 50,
+        // clamp: true,
+    },
+};
+export function Dialog(props) {
+    const className = useStyles(dialogStyle);
+    const dialogSprings = useSpring({
+        config: springConfigs.big,
+        from: {
+            transform: "scale(0.95)",
+            opacity: 0,
+        },
+        to: { transform: "scale(1)", opacity: 1 },
+    });
+    return (_jsx(Overlay, { onClickOutside: props.onClickOutside, children: _jsx(FocusScope, { containBehavior: "lock", autoFocus: true, children: _jsx(animated.div, { style: {
+                    ...dialogSprings,
+                }, className: className, children: props.children }) }) }));
+}
+function AnimatedComponent(props) { }

package/dist/components/FuzzyString.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import { FuzzyMatch } from "../utils/fuzzyMatch";
+export declare function FuzzyString(props: {
+    match: FuzzyMatch;
+}): React.JSX.Element;

package/dist/components/FuzzyString.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { colors } from "../tokens/colors";
+export function FuzzyString(props) {
+    const { match } = props;
+    return (_jsx(_Fragment, { children: match.map((item, i) => {
+            if ("match" in item) {
+                return (_jsx("span", { style: { color: colors.accent[11] }, children: item.match }, i));
+            }
+            else {
+                return _jsx("span", { children: item.skip }, i);
+            }
+        }) }));
+}

package/dist/components/Icons.d.ts

@@ -0,0 +1,28 @@
+import React from "react";
+declare function Search(props: React.SVGProps<SVGSVGElement>): React.JSX.Element;
+declare function CircleX(props: React.SVGProps<SVGSVGElement>): React.JSX.Element;
+declare function Plus(props: React.SVGProps<SVGSVGElement>): React.JSX.Element;
+declare function Minus(props: React.SVGProps<SVGSVGElement>): React.JSX.Element;
+declare function DotsHorizontal(props: React.SVGProps<SVGSVGElement>): React.JSX.Element;
+declare function ArrowDown(props: React.SVGProps<SVGSVGElement>): React.JSX.Element;
+declare function Star(props: React.SVGProps<SVGSVGElement>): React.JSX.Element;
+declare function Archive(props: React.SVGProps<SVGSVGElement>): React.JSX.Element;
+declare function Trash(props: React.SVGProps<SVGSVGElement>): React.JSX.Element;
+declare function Envelope(props: React.SVGProps<SVGSVGElement>): React.JSX.Element;
+declare function Clock(props: React.SVGProps<SVGSVGElement>): React.JSX.Element;
+declare function Pin(props: React.SVGProps<SVGSVGElement>): React.JSX.Element;
+export declare const Icons: {
+    Search: typeof Search;
+    CircleX: typeof CircleX;
+    Plus: typeof Plus;
+    Minus: typeof Minus;
+    DotsHorizontal: typeof DotsHorizontal;
+    ArrowDown: typeof ArrowDown;
+    Star: typeof Star;
+    Archive: typeof Archive;
+    Trash: typeof Trash;
+    Envelope: typeof Envelope;
+    Clock: typeof Clock;
+    Pin: typeof Pin;
+};
+export {};

package/dist/components/Icons.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { colors } from "../tokens/colors";
+function Search(props) {
+    return (_jsx("svg", { focusable: "false", "aria-hidden": "true", role: "img", width: 24, height: 24, fill: "none", viewBox: "0 0 24 24", ...props, children: _jsx("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M19.25 19.25L15.5 15.5M4.75 11C4.75 7.54822 7.54822 4.75 11 4.75C14.4518 4.75 17.25 7.54822 17.25 11C17.25 14.4518 14.4518 17.25 11 17.25C7.54822 17.25 4.75 14.4518 4.75 11Z" }) }));
+}
+function CircleX(props) {
+    return (_jsxs("svg", { focusable: "false", "aria-hidden": "true", role: "img", width: 24, height: 24, fill: "none", viewBox: "0 0 24 24", ...props, children: [_jsx("circle", { cx: "12", cy: "12", r: "9", fill: "currentColor" }), _jsx("path", { stroke: colors.gray[3], strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 9L15 15M15 9L9 15" })] }));
+}
+function Plus(props) {
+    return (_jsxs("svg", { focusable: "false", "aria-hidden": "true", role: "img", width: 24, height: 24, fill: "none", viewBox: "0 0 24 24", ...props, children: [_jsx("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M12 5.75V18.25" }), _jsx("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M18.25 12H5.75" })] }));
+}
+function Minus(props) {
+    return (_jsx("svg", { focusable: "false", "aria-hidden": "true", role: "img", width: 24, height: 24, fill: "none", viewBox: "0 0 24 24", ...props, children: _jsx("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M18.25 12.25H5.75" }) }));
+}
+function DotsHorizontal(props) {
+    return (_jsxs("svg", { focusable: "false", "aria-hidden": "true", role: "img", width: 24, height: 24, fill: "none", viewBox: "0 0 24 24", ...props, children: [_jsx("path", { fill: "currentColor", d: "M13 12C13 12.5523 12.5523 13 12 13C11.4477 13 11 12.5523 11 12C11 11.4477 11.4477 11 12 11C12.5523 11 13 11.4477 13 12Z" }), _jsx("path", { fill: "currentColor", d: "M9 12C9 12.5523 8.55228 13 8 13C7.44772 13 7 12.5523 7 12C7 11.4477 7.44772 11 8 11C8.55228 11 9 11.4477 9 12Z" }), _jsx("path", { fill: "currentColor", d: "M17 12C17 12.5523 16.5523 13 16 13C15.4477 13 15 12.5523 15 12C15 11.4477 15.4477 11 16 11C16.5523 11 17 11.4477 17 12Z" })] }));
+}
+function ArrowDown(props) {
+    return (_jsxs("svg", { focusable: "false", "aria-hidden": "true", role: "img", width: 24, height: 24, fill: "none", viewBox: "0 0 24 24", ...props, children: [_jsx("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M17.25 13.75L12 19.25L6.75 13.75" }), _jsx("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M12 18.25V4.75" })] }));
+}
+function Star(props) {
+    return (_jsx("svg", { focusable: "false", "aria-hidden": "true", role: "img", width: 24, height: 24, fill: "none", viewBox: "0 0 24 24", ...props, children: _jsx("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.8, d: "M12 4.75L14.16 9.13L19 9.83L15.5 13.24L16.33 18.06L12 15.78L7.67 18.06L8.5 13.24L5 9.83L9.84 9.13L12 4.75Z" }) }));
+}
+function Archive(props) {
+    return (_jsx("svg", { focusable: "false", "aria-hidden": "true", role: "img", width: 24, height: 24, fill: "none", viewBox: "0 0 24 24", ...props, children: _jsx("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.8, d: "M5.25 8.75H18.75M7.25 8.75V18.25H16.75V8.75M6.25 5.75H17.75V8.75H6.25V5.75ZM9.75 12.25H14.25" }) }));
+}
+function Trash(props) {
+    return (_jsx("svg", { focusable: "false", "aria-hidden": "true", role: "img", width: 24, height: 24, fill: "none", viewBox: "0 0 24 24", ...props, children: _jsx("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.8, d: "M8.75 8.75V18.25M12 8.75V18.25M15.25 8.75V18.25M5.75 6.75H18.25M9.25 6.75L10.25 4.75H13.75L14.75 6.75M7.25 6.75L7.85 19.25H16.15L16.75 6.75" }) }));
+}
+function Envelope(props) {
+    return (_jsx("svg", { focusable: "false", "aria-hidden": "true", role: "img", width: 24, height: 24, fill: "none", viewBox: "0 0 24 24", ...props, children: _jsx("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.8, d: "M5.75 7.25H18.25V16.75H5.75V7.25ZM6.25 7.75L12 12.5L17.75 7.75" }) }));
+}
+function Clock(props) {
+    return (_jsx("svg", { focusable: "false", "aria-hidden": "true", role: "img", width: 24, height: 24, fill: "none", viewBox: "0 0 24 24", ...props, children: _jsx("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.8, d: "M19.25 12C19.25 16.0041 16.0041 19.25 12 19.25C7.99594 19.25 4.75 16.0041 4.75 12C4.75 7.99594 7.99594 4.75 12 4.75C16.0041 4.75 19.25 7.99594 19.25 12ZM12 8.25V12.25L14.75 14" }) }));
+}
+function Pin(props) {
+    return (_jsxs("svg", { focusable: "false", "aria-hidden": "true", role: "img", width: 24, height: 24, fill: "none", viewBox: "0 0 24 24", ...props, children: [_jsx("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.8, d: "M14.83 4.34L19.66 9.17C20.44 9.95 20.44 11.22 19.66 12L17.83 13.83L10.17 6.17L12 4.34C12.78 3.56 14.05 3.56 14.83 4.34Z" }), _jsx("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.8, d: "M13.5 10.5L6 18M9.5 14.5L4.75 19.25" })] }));
+}
+export const Icons = {
+    Search,
+    CircleX,
+    Plus,
+    Minus,
+    DotsHorizontal,
+    ArrowDown,
+    Star,
+    Archive,
+    Trash,
+    Envelope,
+    Clock,
+    Pin,
+};

package/dist/components/Input.d.ts

@@ -0,0 +1,7 @@
+import { AriaNumberFieldProps, AriaSearchFieldProps, AriaTextFieldOptions } from "react-aria";
+type InputProps = AriaTextFieldOptions<"input">;
+export declare function TextField(props: InputProps): import("react").JSX.Element;
+export declare function SearchField(props: AriaSearchFieldProps): import("react").JSX.Element;
+export declare function NumberField(props: AriaNumberFieldProps): import("react").JSX.Element;
+export declare function QuietTextField(props: InputProps): import("react").JSX.Element;
+export {};

package/dist/components/Input.js

@@ -0,0 +1,193 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { useButton, useLocale, useNumberField, useSearchField, useTextField, } from "react-aria";
+import { useNumberFieldState, useSearchFieldState } from "react-stately";
+import { style, useStyles } from "purse-styles";
+import { backgroundColor } from "../tokens/background";
+import { colors } from "../tokens/colors";
+import { focusRing } from "../tokens/focusRing";
+import { motion } from "../tokens/motion";
+import { radius } from "../tokens/radius";
+import { shadow, shadowVars } from "../tokens/shadow";
+import { spacing } from "../tokens/spacing";
+import { text } from "../tokens/text";
+import { Icons } from "./Icons";
+const inputText = text("sm", 400, "highContrast");
+const numberFieldDivider = `color-mix(in oklch, ${colors.gray[12]} 5%, ${backgroundColor.element})`;
+const inputClass = style(inputText, focusRing("&:focus-visible", shadowVars.subtle), motion.standard("background", "border-color"), radius.sm, spacing.padding({ x: 4, y: 2 }), shadow.subtle, {
+    width: "100%",
+    minWidth: 0,
+    color: colors.gray[12],
+    border: "none",
+    background: backgroundColor.element,
+    "&:hover:not(:disabled)": {
+        background: backgroundColor.elementHover,
+    },
+    "&:disabled": {
+        color: colors.gray[8],
+        background: colors.gray[2],
+    },
+    "&[aria-invalid='true']:not(:focus-visible)": {
+        boxShadow: `0 0 0 1px light-dark(#ce2c31, #e5484d), ${shadowVars.subtle}`,
+    },
+    "&::placeholder": {
+        fontStyle: "italic",
+        color: colors.gray[8],
+    },
+});
+export function TextField(props) {
+    const ref = useRef(null);
+    const { inputProps } = useTextField({ ...props }, ref);
+    const className = useStyles(inputClass);
+    return _jsx("input", { className: className, ref: ref, ...inputProps });
+}
+const searchFieldClass = style(focusRing("& button:focus-visible"), {
+    position: "relative",
+    width: "100%",
+    "& input": {
+        paddingRight: "30px",
+        appearance: "none",
+    },
+    "& input::-webkit-search-cancel-button": {
+        appearance: "none",
+    },
+    "& button": {
+        position: "absolute",
+        top: "50%",
+        right: "6px",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: "16px",
+        height: "16px",
+        transform: "translateY(-50%)",
+        zIndex: 2,
+        border: "none",
+        borderRadius: "50%",
+        background: "transparent",
+        color: colors.gray[9],
+        padding: 0,
+    },
+    "& button svg": {
+        width: "16px",
+        height: "16px",
+    },
+    "& button:hover": {
+        color: colors.gray[12],
+    },
+});
+export function SearchField(props) {
+    const ref = useRef(null);
+    const state = useSearchFieldState(props);
+    const { inputProps } = useSearchField(props, state, ref);
+    const inputClassName = useStyles(inputClass);
+    const searchClassName = useStyles(searchFieldClass);
+    return (_jsxs("div", { className: searchClassName, children: [_jsx("input", { className: inputClassName, ref: ref, ...inputProps }), state.value !== "" && (_jsx("button", { "aria-label": "Clear search", type: "button", onMouseDown: (event) => event.preventDefault(), onClick: () => state.setValue(""), children: _jsx(Icons.CircleX, {}) }))] }));
+}
+const numberFieldClass = style(focusRing("&:has(:focus-visible)", shadowVars.subtle), motion.standard("background", "border-color"), radius.sm, shadow.subtle, {
+    display: "flex",
+    alignItems: "center",
+    width: "100%",
+    height: "28px",
+    overflow: "hidden",
+    color: colors.gray[12],
+    background: backgroundColor.element,
+    "&:has(input:disabled)": {
+        color: colors.gray[8],
+        background: colors.gray[2],
+    },
+    "&:has(input[aria-invalid='true']):not(:has(:focus-visible))": {
+        boxShadow: `0 0 0 1px light-dark(#ce2c31, #e5484d), ${shadowVars.subtle}`,
+    },
+    "& .number-stepper": {
+        display: "flex",
+        alignSelf: "stretch",
+    },
+    "& button": {
+        display: "flex",
+        placeItems: "center",
+        justifyContent: "center",
+        width: "24px",
+        border: "none",
+        borderLeft: `1px solid ${numberFieldDivider}`,
+        background: "transparent",
+        color: colors.gray[11],
+        padding: 0,
+    },
+    "& button:first-child": {
+        borderRadius: 0,
+    },
+    "& button:last-child": {
+        borderTopRightRadius: "4px",
+        borderBottomRightRadius: "4px",
+    },
+    "& button svg": {
+        width: "14px",
+        height: "14px",
+    },
+    "& button:hover:not(:disabled)": {
+        background: backgroundColor.elementHover,
+    },
+    "& button:active:not(:disabled)": {
+        background: backgroundColor.elementHover,
+    },
+    "& button:disabled": {
+        color: colors.gray[8],
+    },
+});
+const numberInputClass = style(inputText, spacing.padding({ x: 4, y: 2 }), {
+    flex: "1 1 auto",
+    width: "100%",
+    minWidth: 0,
+    color: "inherit",
+    border: "none",
+    outline: "none",
+    background: "transparent",
+    "&:hover:not(:disabled)": {
+        background: backgroundColor.elementHover,
+    },
+    "&::placeholder": {
+        fontStyle: "italic",
+        color: colors.gray[8],
+    },
+});
+export function NumberField(props) {
+    const ref = useRef(null);
+    const incrementRef = useRef(null);
+    const decrementRef = useRef(null);
+    const { locale } = useLocale();
+    const state = useNumberFieldState({ ...props, locale });
+    const { inputProps, groupProps, incrementButtonProps, decrementButtonProps } = useNumberField(props, state, ref);
+    const { buttonProps: incrementProps } = useButton(incrementButtonProps, incrementRef);
+    const { buttonProps: decrementProps } = useButton(decrementButtonProps, decrementRef);
+    const inputClassName = useStyles(numberInputClass);
+    const numberClassName = useStyles(numberFieldClass);
+    return (_jsxs("div", { className: numberClassName, ...groupProps, children: [_jsx("input", { className: inputClassName, ref: ref, ...inputProps }), _jsxs("div", { className: "number-stepper", children: [_jsx("button", { ...decrementProps, ref: decrementRef, type: "button", children: _jsx(Icons.Minus, {}) }), _jsx("button", { ...incrementProps, ref: incrementRef, type: "button", children: _jsx(Icons.Plus, {}) })] })] }));
+}
+const quietInputClass = style(inputText, focusRing(), motion.standard("background", "border-color"), radius.sm, spacing.padding({ x: 4, y: 2 }), {
+    width: "100%",
+    minWidth: 0,
+    color: colors.gray[12],
+    background: "transparent",
+    border: "none",
+    "&:hover:not(:disabled)": {
+        background: backgroundColor.elementHover,
+    },
+    "&:disabled": {
+        color: colors.gray[8],
+        background: colors.gray[2],
+    },
+    "&[aria-invalid='true']:not(:focus-visible)": {
+        boxShadow: "0 0 0 1px light-dark(#ce2c31, #e5484d)",
+    },
+    "&::placeholder": {
+        fontStyle: "italic",
+        color: colors.gray[8],
+    },
+});
+export function QuietTextField(props) {
+    const ref = useRef(null);
+    const { inputProps } = useTextField({ ...props }, ref);
+    const className = useStyles(quietInputClass);
+    return _jsx("input", { className: className, ...inputProps });
+}

package/dist/components/ListBox.d.ts

@@ -0,0 +1,9 @@
+import { type ListBoxItemProps as AriaListBoxItemProps, type ListBoxProps as AriaListBoxProps } from "react-aria-components";
+export declare const listBoxStyle: import("purse-styles").StyleElement;
+export declare const listBoxItemStyle: import("purse-styles").StyleElement;
+export interface ListBoxProps<T> extends Omit<AriaListBoxProps<T>, "className"> {
+}
+export declare function ListBox<T>(props: ListBoxProps<T>): import("react").JSX.Element;
+export interface ListBoxItemProps<T = object> extends Omit<AriaListBoxItemProps<T>, "className"> {
+}
+export declare function ListBoxItem<T extends object = object>(props: ListBoxItemProps<T>): import("react").JSX.Element;

package/dist/components/ListBox.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ListBox as AriaListBox, ListBoxItem as AriaListBoxItem, } from "react-aria-components";
+import { style, useStyles } from "purse-styles";
+import { background, backgroundColor } from "../tokens/background";
+import { colors } from "../tokens/colors";
+import { spacing } from "../tokens/spacing";
+import { text } from "../tokens/text";
+export const listBoxStyle = style(background.element, {
+    margin: 0,
+    padding: 0,
+    listStyleType: "none",
+    display: "flex",
+    flexDirection: "column",
+    gap: "1px",
+    maxHeight: "inherit",
+    overflowY: "auto",
+    outline: "none",
+});
+export const listBoxItemStyle = style(spacing.padding({ x: 4, y: 2 }), text("sm", 400, "highContrast"), {
+    position: "relative",
+    margin: 0,
+    outline: "none",
+    cursor: "default",
+    userSelect: "none",
+    "&:hover": {
+        background: backgroundColor.elementHover,
+    },
+    "&[data-hovered]": {
+        background: backgroundColor.elementHover,
+    },
+    "&[data-focused]": {
+        background: backgroundColor.elementHover,
+    },
+    "&[data-selected]": {
+        color: colors.accent[9],
+        fontWeight: 500,
+    },
+    "&[data-selected]::after": {
+        content: '"✓"',
+        position: "absolute",
+        right: "8px",
+        color: colors.accent[9],
+        fontWeight: 500,
+    },
+    "&[data-disabled]": {
+        color: colors.gray[8],
+    },
+});
+export function ListBox(props) {
+    const className = useStyles(listBoxStyle);
+    return _jsx(AriaListBox, { ...props, className: className });
+}
+export function ListBoxItem(props) {
+    const className = useStyles(listBoxItemStyle);
+    const textValue = props.textValue ??
+        (typeof props.children === "string" ? props.children : undefined);
+    return _jsx(AriaListBoxItem, { ...props, textValue: textValue, className: className });
+}

package/dist/components/Menu.d.ts

@@ -0,0 +1,13 @@
+import { type ReactElement } from "react";
+import { type MenuItemProps as AriaMenuItemProps, type MenuProps as AriaMenuProps, type MenuTriggerProps as AriaMenuTriggerProps, type PopoverProps } from "react-aria-components";
+export interface MenuTriggerProps extends AriaMenuTriggerProps {
+    children: [ReactElement, ReactElement];
+    placement?: PopoverProps["placement"];
+}
+export declare function MenuTrigger({ children, placement, ...props }: MenuTriggerProps): import("react").JSX.Element;
+export interface MenuProps<T> extends Omit<AriaMenuProps<T>, "className"> {
+}
+export declare function Menu<T>(props: MenuProps<T>): import("react").JSX.Element;
+export interface MenuItemProps<T = object> extends Omit<AriaMenuItemProps<T>, "className"> {
+}
+export declare function MenuItem<T extends object = object>(props: MenuItemProps<T>): import("react").JSX.Element;

package/dist/components/Menu.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children } from "react";
+import { Menu as AriaMenu, MenuItem as AriaMenuItem, MenuTrigger as AriaMenuTrigger, } from "react-aria-components";
+import { style, useStyles } from "purse-styles";
+import { CollectionPopover } from "./CollectionPopover";
+import { listBoxItemStyle, listBoxStyle } from "./ListBox";
+const menuStyle = style(listBoxStyle, {
+    minWidth: "140px",
+});
+const menuItemStyle = style(listBoxItemStyle, {
+    "&[data-has-submenu]": {
+        paddingRight: "28px",
+    },
+});
+export function MenuTrigger({ children, placement = "bottom start", ...props }) {
+    const [trigger, menu] = Children.toArray(children);
+    return (_jsxs(AriaMenuTrigger, { ...props, children: [trigger, _jsx(CollectionPopover, { placement: placement, children: menu })] }));
+}
+export function Menu(props) {
+    const className = useStyles(menuStyle);
+    return _jsx(AriaMenu, { ...props, className: className });
+}
+export function MenuItem(props) {
+    const className = useStyles(menuItemStyle);
+    const textValue = props.textValue ??
+        (typeof props.children === "string" ? props.children : undefined);
+    return _jsx(AriaMenuItem, { ...props, textValue: textValue, className: className });
+}

package/dist/components/Overlay.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+export declare function Overlay(props: {
+    children: React.ReactNode;
+    onClickOutside?: () => void;
+}): React.ReactPortal;

package/dist/components/Overlay.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useMemo } from "react";
+import ReactDOM from "react-dom";
+export function Overlay(props) {
+    const { onClickOutside } = props;
+    const overlayContainer = useMemo(() => document.createElement("div"), []);
+    useEffect(() => {
+        // Use append here so nested overlays show up in the right order
+        document.body.appendChild(overlayContainer);
+        return () => {
+            document.body.removeChild(overlayContainer);
+        };
+    }, [overlayContainer]);
+    return ReactDOM.createPortal(_jsx("div", { style: {
+            position: "fixed",
+            top: "0",
+            bottom: "0",
+            right: "0",
+            left: "0",
+            width: "100vw",
+            height: "100vh",
+            // Make sure this is above other children
+            zIndex: `${document.body.childElementCount}`,
+        }, onMouseDown: (event) => {
+            if (onClickOutside && event.currentTarget === event.target) {
+                onClickOutside();
+            }
+            event.stopPropagation();
+        }, children: props.children }), overlayContainer);
+}

package/dist/components/Panel.d.ts

@@ -0,0 +1,4 @@
+import type React from "react";
+type PanelProps = React.ComponentPropsWithoutRef<"div">;
+export declare function Panel({ className, children, ...props }: PanelProps): React.JSX.Element;
+export {};

package/dist/components/Panel.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { style, useStyles } from "purse-styles";
+import { border } from "../tokens/borders";
+import { colors } from "../tokens/colors";
+import { radius } from "../tokens/radius";
+import { spacing } from "../tokens/spacing";
+const panelClass = style(spacing.padding({ all: 16 }), border([], "outline"), radius.lg, {
+    backgroundColor: colors.gray[1],
+    backgroundImage: `radial-gradient(${colors.grayAlpha[3]} 1px, transparent 1px)`,
+    backgroundSize: "12px 12px",
+});
+export function Panel({ className, children, ...props }) {
+    const panelClassName = useStyles(panelClass);
+    return (_jsx("div", { ...props, className: [panelClassName, className].filter(Boolean).join(" "), children: children }));
+}

package/dist/components/Prose.d.ts

@@ -0,0 +1,24 @@
+import React from "react";
+import { type ProseSize } from "../tokens/prose";
+/**
+ * Returns the current prose size, or `null` when rendered outside a `Prose`
+ * container. Typography components use this to decide between prose and
+ * application type treatments.
+ */
+export declare function useProseSize(): ProseSize | null;
+/**
+ * Vertical rhythm for long-form/docs content (headings, paragraphs, and the
+ * demo panels between them). Typography components carry no margin of their
+ * own, so this is the one place spacing between them is defined - as a
+ * property of this container, not of the elements passing through it.
+ *
+ * `size` selects the prose type scale that descendant typography components
+ * inherit via context.
+ */
+export declare function Prose(props: {
+    children: React.ReactNode;
+    size?: ProseSize;
+    className?: string;
+    style?: React.CSSProperties;
+}): React.JSX.Element;
+export declare const proseMaxWidth = "72ch";

package/dist/components/Prose.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { style, useStyles } from "purse-styles";
+import React from "react";
+import { proseRhythm } from "../tokens/prose";
+/**
+ * Set inside a `Prose` container so typography components can opt into the
+ * prose type scale at the container's size. `null` means "not in prose" -
+ * components fall back to their application (`text`) treatment.
+ */
+const ProseContext = React.createContext(null);
+/**
+ * Returns the current prose size, or `null` when rendered outside a `Prose`
+ * container. Typography components use this to decide between prose and
+ * application type treatments.
+ */
+export function useProseSize() {
+    return React.useContext(ProseContext);
+}
+/**
+ * Vertical rhythm for long-form/docs content (headings, paragraphs, and the
+ * demo panels between them). Typography components carry no margin of their
+ * own, so this is the one place spacing between them is defined - as a
+ * property of this container, not of the elements passing through it.
+ *
+ * `size` selects the prose type scale that descendant typography components
+ * inherit via context.
+ */
+export function Prose(props) {
+    const size = props.size ?? "md";
+    const proseClassName = useStyles(proseContainerClass, proseRhythm(size));
+    const className = props.className
+        ? `${proseClassName} ${props.className}`
+        : proseClassName;
+    return (_jsx(ProseContext.Provider, { value: size, children: _jsx("section", { className: className, style: props.style, children: props.children }) }));
+}
+// Reading measure for long-form content. Set once here on the container
+// rather than on every typography component, so the constraint is a property
+// of the prose column and doesn't follow those components into app UI. The
+// per-size vertical rhythm lives in `proseRhythm` and is composed in above.
+export const proseMaxWidth = "72ch";
+const proseContainerClass = style({
+    maxWidth: proseMaxWidth,
+});

package/dist/components/Radio.d.ts

@@ -0,0 +1,12 @@
+import { AriaRadioGroupProps } from "react-aria";
+type RadioOptionGroupProps = AriaRadioGroupProps & {
+    label: string;
+    children: React.ReactNode;
+};
+export declare function RadioOptionGroup(props: RadioOptionGroupProps): import("react").JSX.Element;
+type RadioOptionProps = {
+    value: string;
+    children: React.ReactNode;
+};
+export declare function RadioOption(props: RadioOptionProps): import("react").JSX.Element;
+export {};