@tanishqkancharla/maui 0.0.1

package/README.md

@@ -0,0 +1,6 @@
+Frontend app boilerplate built with esbuild, typescript, vercel.
+
+```
+npm run dev
+npm run build
+```

package/dist/MauiProvider.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+/**
+ * Root provider for consuming Maui. Wraps theme (`data-theme`), purse-styles,
+ * design-system globals, and the focus UI database used by Button/Dialog.
+ *
+ * Pair with {@link themeFoucScript} in `<head>` to avoid a flash of wrong theme.
+ */
+export declare function MauiProvider(props: {
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/MauiProvider.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PurseProvider, useInjectGlobalStyles } from "purse-styles";
+import { ThemeProvider } from "./theme/ThemeContext";
+import { UIDatabaseProvider } from "./UIDatabase/UIDatabase";
+import { backgroundColor } from "./tokens/background";
+import { baseTextStyle } from "./tokens/text";
+function MauiGlobalStyles() {
+    useInjectGlobalStyles("*, *::after, *::before", {
+        boxSizing: "border-box",
+    }, []);
+    useInjectGlobalStyles("html, body", {
+        margin: 0,
+        backgroundColor: backgroundColor.app,
+        ...baseTextStyle,
+    }, []);
+    useInjectGlobalStyles("html", {
+        WebkitTextSizeAdjust: "100%",
+        textSizeAdjust: "100%",
+    }, []);
+    useInjectGlobalStyles("body", {
+        WebkitFontSmoothing: "antialiased",
+        MozOsxFontSmoothing: "grayscale",
+        fontSynthesis: "none",
+        textRendering: "optimizeLegibility",
+    }, []);
+    useInjectGlobalStyles("h1, h2, h3, h4, h5, h6, p, blockquote, figure, pre, dl, dd", {
+        margin: 0,
+    }, []);
+    useInjectGlobalStyles("button, input, select, textarea", {
+        font: "inherit",
+    }, []);
+    useInjectGlobalStyles('button, [role="button"]', {
+        cursor: "default",
+    }, []);
+    return null;
+}
+/**
+ * Root provider for consuming Maui. Wraps theme (`data-theme`), purse-styles,
+ * design-system globals, and the focus UI database used by Button/Dialog.
+ *
+ * Pair with {@link themeFoucScript} in `<head>` to avoid a flash of wrong theme.
+ */
+export function MauiProvider(props) {
+    return (_jsx(ThemeProvider, { children: _jsxs(PurseProvider, { children: [_jsx(MauiGlobalStyles, {}), _jsx(UIDatabaseProvider, { children: props.children })] }) }));
+}

package/dist/UIDatabase/Focus.d.ts

@@ -0,0 +1,52 @@
+import { ReadOnlyUIDatabase } from "./UIDatabase";
+export type FocusScopeProps = {
+    containBehavior: "lock" | "cycle" | "no-contain";
+    autoFocus: boolean;
+};
+type FocusScope = {
+    type: "scope";
+    id: string;
+} & FocusScopeProps;
+type FocusElement = {
+    type: "element";
+    id: string;
+};
+export type FocusTreeKey = ["focusTree", ...string[]];
+export type UIFocusSchema = {
+    key: FocusTreeKey;
+    value: FocusElement | FocusScope;
+} | {
+    key: ["activeFocus"];
+    value: FocusTreeKey | undefined;
+};
+export declare const focusActions: {
+    registerFocusElement: (dbOrTx: import("tuple-database").TupleTransactionApi<UIFocusSchema> | import("tuple-database").TupleDatabaseClientApi<UIFocusSchema>, elementKey: FocusTreeKey) => void;
+    unregisterFocusElement: (dbOrTx: import("tuple-database").TupleTransactionApi<UIFocusSchema> | import("tuple-database").TupleDatabaseClientApi<UIFocusSchema>, elementKey: FocusTreeKey) => void;
+    registerFocusScope: (dbOrTx: import("tuple-database").TupleTransactionApi<UIFocusSchema> | import("tuple-database").TupleDatabaseClientApi<UIFocusSchema>, scopeKey: FocusTreeKey, scopeProps: FocusScopeProps) => void;
+    unregisterFocusScope: (dbOrTx: import("tuple-database").TupleTransactionApi<UIFocusSchema> | import("tuple-database").TupleDatabaseClientApi<UIFocusSchema>, scopeKey: FocusTreeKey) => void;
+    focus: (dbOrTx: import("tuple-database").TupleTransactionApi<UIFocusSchema> | import("tuple-database").TupleDatabaseClientApi<UIFocusSchema>, key: FocusTreeKey) => void;
+    blur: (dbOrTx: import("tuple-database").TupleTransactionApi<UIFocusSchema> | import("tuple-database").TupleDatabaseClientApi<UIFocusSchema>, key: FocusTreeKey) => void;
+    moveToNextFocus: (dbOrTx: import("tuple-database").TupleTransactionApi<UIFocusSchema> | import("tuple-database").TupleDatabaseClientApi<UIFocusSchema>) => void;
+    moveToPreviousFocus: (dbOrTx: import("tuple-database").TupleTransactionApi<UIFocusSchema> | import("tuple-database").TupleDatabaseClientApi<UIFocusSchema>) => void;
+};
+type FocusElementAndKey = {
+    key: ["focusTree", ...string[]];
+    value: FocusElement;
+};
+type FocusScopeAndKey = {
+    key: ["focusTree", ...string[]];
+    value: FocusScope;
+};
+export declare const focusQueries: {
+    getPreviousFocusElement(db: ReadOnlyUIDatabase, elementKey: FocusTreeKey): FocusElementAndKey | undefined;
+    getNextFocusElement(db: ReadOnlyUIDatabase, elementKey: FocusTreeKey): FocusElementAndKey | undefined;
+    getFirstElementInScope(db: ReadOnlyUIDatabase, scopeKey: FocusTreeKey): FocusElementAndKey | undefined;
+    getLastElementInScope(db: ReadOnlyUIDatabase, scopeKey: FocusTreeKey): FocusElementAndKey | undefined;
+    getAllElementsInScope(db: ReadOnlyUIDatabase, scopeKey: FocusTreeKey): FocusElementAndKey[];
+    isElementFirstInScope(db: ReadOnlyUIDatabase, elementKey: FocusTreeKey): boolean;
+    isElementLastInScope(db: ReadOnlyUIDatabase, elementKey: FocusTreeKey): boolean;
+    getParentScope(db: ReadOnlyUIDatabase, elementKey: FocusTreeKey): FocusScopeAndKey;
+    isElementFocused(db: ReadOnlyUIDatabase, elementKey: FocusTreeKey): boolean;
+    getActiveFocus(db: ReadOnlyUIDatabase): FocusTreeKey | undefined;
+};
+export {};

package/dist/UIDatabase/Focus.js

@@ -0,0 +1,173 @@
+import { isEqual } from "lodash";
+import { uiQuery } from "./UIDatabase";
+export const focusActions = {
+    registerFocusElement: uiQuery((tx, elementKey) => {
+        if (tx.get(elementKey)) {
+            throw new Error(`Focusable element with key ${elementKey} already exists`);
+        }
+        const focusElement = {
+            type: "element",
+            id: elementKey.last,
+        };
+        tx.set(elementKey, focusElement);
+    }),
+    unregisterFocusElement: uiQuery((tx, elementKey) => {
+        if (!tx.get(elementKey)) {
+            throw new Error(`Focusable element with key ${elementKey} doesn't exist`);
+        }
+        tx.remove(elementKey);
+    }),
+    registerFocusScope: uiQuery((tx, scopeKey, scopeProps) => {
+        if (tx.get(scopeKey)) {
+            throw new Error(`Focus scope with key ${scopeKey} already exists`);
+        }
+        const scope = {
+            type: "scope",
+            id: scopeKey.last,
+            ...scopeProps,
+        };
+        tx.set(scopeKey, scope);
+        if (scopeProps.autoFocus) {
+            const firstChild = focusQueries.getFirstElementInScope(tx, scopeKey);
+            if (firstChild) {
+                focusActions.focus(tx, firstChild.key);
+            }
+        }
+    }),
+    unregisterFocusScope: uiQuery((tx, scopeKey) => {
+        if (!tx.get(scopeKey)) {
+            throw new Error(`Focus scope with key ${scopeKey} doesn't exist`);
+        }
+        // TODO: respect restoreFocus
+        tx.remove(scopeKey);
+    }),
+    focus: uiQuery((tx, key) => {
+        tx.set(["activeFocus"], key);
+    }),
+    blur: uiQuery((tx, key) => {
+        if (isEqual(tx.get(["activeFocus"]), key)) {
+            tx.set(["activeFocus"], undefined);
+        }
+    }),
+    moveToNextFocus: uiQuery((tx) => {
+        const activeFocus = tx.get(["activeFocus"]);
+        if (!activeFocus) {
+            const firstFocusableElement = focusQueries.getFirstElementInScope(tx, [
+                "focusTree",
+            ]);
+            if (firstFocusableElement)
+                tx.set(["activeFocus"], firstFocusableElement.key);
+            return;
+        }
+        const isLast = focusQueries.isElementLastInScope(tx, activeFocus);
+        if (!isLast) {
+            const nextElement = focusQueries.getNextFocusElement(tx, activeFocus);
+            if (nextElement)
+                tx.set(["activeFocus"], nextElement.key);
+            return;
+        }
+        const { key: scopeKey, value: scope } = focusQueries.getParentScope(tx, activeFocus);
+        if (scope.containBehavior === "no-contain") {
+            const nextElement = focusQueries.getNextFocusElement(tx, activeFocus);
+            if (nextElement)
+                tx.set(["activeFocus"], nextElement.key);
+        }
+        else if (scope.containBehavior === "cycle") {
+            const firstElement = focusQueries.getFirstElementInScope(tx, scopeKey);
+            if (firstElement)
+                tx.set(["activeFocus"], firstElement.key);
+        }
+        else if (scope.containBehavior === "lock") {
+            // Don't change active focus
+            return;
+        }
+    }),
+    moveToPreviousFocus: uiQuery((tx) => {
+        const activeFocus = tx.get(["activeFocus"]);
+        if (!activeFocus) {
+            const firstFocusableElement = focusQueries.getLastElementInScope(tx, [
+                "focusTree",
+            ]);
+            if (firstFocusableElement)
+                tx.set(["activeFocus"], firstFocusableElement.key);
+            return;
+        }
+        const isFirst = focusQueries.isElementFirstInScope(tx, activeFocus);
+        if (!isFirst) {
+            const previousElement = focusQueries.getPreviousFocusElement(tx, activeFocus);
+            if (previousElement)
+                tx.set(["activeFocus"], previousElement.key);
+            return;
+        }
+        const { key: scopeKey, value: scope } = focusQueries.getParentScope(tx, activeFocus);
+        if (scope.containBehavior === "no-contain") {
+            const previousElement = focusQueries.getPreviousFocusElement(tx, activeFocus);
+            if (previousElement)
+                tx.set(["activeFocus"], previousElement.key);
+        }
+        else if (scope.containBehavior === "cycle") {
+            const lastElement = focusQueries.getLastElementInScope(tx, scopeKey);
+            if (lastElement)
+                tx.set(["activeFocus"], lastElement.key);
+        }
+        else if (scope.containBehavior === "lock") {
+            // Don't change active focus
+            return;
+        }
+    }),
+};
+export const focusQueries = {
+    getPreviousFocusElement(db, elementKey) {
+        const previousElements = db.scan({
+            lt: elementKey,
+            reverse: true,
+        });
+        const previous = previousElements.find(({ value }) => value.type === "element");
+        return previous;
+    },
+    getNextFocusElement(db, elementKey) {
+        const nextElements = db.scan({ gt: elementKey });
+        const nextElement = nextElements.find(({ value }) => value.type === "element");
+        return nextElement;
+    },
+    getFirstElementInScope(db, scopeKey) {
+        return focusQueries.getAllElementsInScope(db, scopeKey).first;
+    },
+    getLastElementInScope(db, scopeKey) {
+        return focusQueries.getAllElementsInScope(db, scopeKey).last;
+    },
+    // TODO: Could have a different index just for elements that would make
+    // this more efficient
+    getAllElementsInScope(db, scopeKey) {
+        const elements = db
+            .scan({ prefix: scopeKey })
+            .filter(({ value }) => value.type === "element");
+        return elements;
+    },
+    isElementFirstInScope(db, elementKey) {
+        const parentScopeKey = elementKey.slice(0, -1);
+        const elementsInScope = focusQueries.getAllElementsInScope(db, parentScopeKey);
+        const firstElementInScopeKey = elementsInScope[0].key;
+        return isEqual(firstElementInScopeKey, elementKey);
+    },
+    isElementLastInScope(db, elementKey) {
+        const parentScopeKey = elementKey.slice(0, -1);
+        const elementsInScope = focusQueries.getAllElementsInScope(db, parentScopeKey);
+        const lastElementInScopeKey = elementsInScope[elementsInScope.length - 1].key;
+        return isEqual(lastElementInScopeKey, elementKey);
+    },
+    getParentScope(db, elementKey) {
+        const parentScopeKey = elementKey.slice(0, -1);
+        const parentScope = db.get(parentScopeKey);
+        if (parentScope?.type !== "scope") {
+            throw new Error(`Expected parent scope here`);
+        }
+        return { key: parentScopeKey, value: parentScope };
+    },
+    isElementFocused(db, elementKey) {
+        return isEqual(focusQueries.getActiveFocus(db), elementKey);
+    },
+    getActiveFocus(db) {
+        return db.get(["activeFocus"]);
+    },
+};

package/dist/UIDatabase/UIDatabase.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { ReadOnlyTupleDatabaseClientApi, TupleDatabaseClientApi } from "tuple-database";
+import { UIFocusSchema } from "./Focus";
+export type UIDatabaseSchema = UIFocusSchema;
+export declare const uiQuery: <I extends any[], O>(fn: (tx: import("tuple-database").TupleTransactionApi<UIFocusSchema>, ...args: I) => O) => (dbOrTx: import("tuple-database").TupleTransactionApi<UIFocusSchema> | TupleDatabaseClientApi<UIFocusSchema>, ...args: I) => O;
+export type UIDatabase = TupleDatabaseClientApi<UIDatabaseSchema>;
+export type ReadOnlyUIDatabase = ReadOnlyTupleDatabaseClientApi<UIDatabaseSchema>;
+export declare function UIDatabaseProvider(props: {
+    children: React.ReactNode;
+}): React.JSX.Element;
+export declare function useUIDatabase(): UIDatabase;

package/dist/UIDatabase/UIDatabase.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useContext, useMemo } from "react";
+import { InMemoryTupleStorage, transactionalReadWrite, TupleDatabase, TupleDatabaseClient, } from "tuple-database";
+export const uiQuery = transactionalReadWrite();
+const UIDatabaseContext = React.createContext(undefined);
+export function UIDatabaseProvider(props) {
+    const db = useMemo(() => {
+        return new TupleDatabaseClient(new TupleDatabase(new InMemoryTupleStorage()));
+    }, []);
+    // useEffect(() => {
+    // 	;(window as any).db = db
+    // 	db.subscribe({ prefix: [] }, (writes) => {
+    // 		console.log(writes)
+    // 	})
+    // }, [])
+    return (_jsx(UIDatabaseContext.Provider, { value: db, children: props.children }));
+}
+export function useUIDatabase() {
+    const db = useContext(UIDatabaseContext);
+    if (!db) {
+        throw new Error("UI Database Context not found");
+    }
+    return db;
+}

package/dist/components/Avatar.d.ts

@@ -0,0 +1,8 @@
+import { type TextSize } from "../tokens/text";
+type AvatarProps = {
+    name: string;
+    size?: TextSize;
+    className?: string;
+};
+export declare function Avatar({ name, size, className }: AvatarProps): import("react").JSX.Element;
+export {};

package/dist/components/Avatar.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { style, useStyles } from "purse-styles";
+import { avatar } from "../tokens/avatar";
+import { colors } from "../tokens/colors";
+import { radius } from "../tokens/radius";
+import { text } from "../tokens/text";
+import { memoize } from "../utils/memoize";
+export function Avatar({ name, size = "sm", className }) {
+    const avatarClassName = useStyles(avatarClass(name, size));
+    return (_jsx("span", { className: joinClassNames(avatarClassName, className), "aria-hidden": "true", children: initials(name) }));
+}
+const avatarPalette = [
+    { background: colors.accent[4], color: colors.accent[11] },
+    {
+        background: avatar.green.background,
+        color: avatar.green.foreground,
+    },
+    {
+        background: avatar.orange.background,
+        color: avatar.orange.foreground,
+    },
+    {
+        background: avatar.pink.background,
+        color: avatar.pink.foreground,
+    },
+];
+// Avatar dimensions correspond to the text-size scale, so an avatar sits
+// naturally next to text of the same size. "sm" is the common 18px size.
+const avatarDimensions = {
+    "2xs": "14px",
+    xs: "16px",
+    sm: "18px",
+    md: "20px",
+    lg: "24px",
+    xl: "32px",
+};
+// Initials sit well below the box size so they read as a compact monogram
+// rather than filling the circle.
+const avatarInitialsFontSize = {
+    "2xs": "6px",
+    xs: "7px",
+    sm: "8px",
+    md: "9px",
+    lg: "10px",
+    xl: "13px",
+};
+function initials(name) {
+    return name
+        .split(/\s+/)
+        .slice(0, 2)
+        .map((part) => part[0]?.toUpperCase() ?? "")
+        .join("");
+}
+function avatarColorIndex(seed) {
+    let hash = 0;
+    for (let index = 0; index < seed.length; index += 1) {
+        hash = seed.charCodeAt(index) + ((hash << 5) - hash);
+    }
+    return Math.abs(hash) % avatarPalette.length;
+}
+const avatarClass = memoize((seed, size) => {
+    const palette = avatarPalette[avatarColorIndex(seed)];
+    return style(text("2xs", 600, "highContrast"), radius.circle, {
+        display: "grid",
+        placeItems: "center",
+        flexShrink: 0,
+        width: avatarDimensions[size],
+        height: avatarDimensions[size],
+        fontSize: avatarInitialsFontSize[size],
+        lineHeight: 1,
+        backgroundColor: palette.background,
+        color: palette.color,
+    });
+});
+function joinClassNames(...classNames) {
+    return classNames.filter(Boolean).join(" ");
+}

package/dist/components/Badge.d.ts

@@ -0,0 +1,4 @@
+import type React from "react";
+type BadgeProps = React.HTMLAttributes<HTMLSpanElement>;
+export declare function Badge({ className, children, ...props }: BadgeProps): React.JSX.Element;
+export {};

package/dist/components/Badge.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { style, useStyles } from "purse-styles";
+import { colors } from "../tokens/colors";
+import { radius } from "../tokens/radius";
+export function Badge({ className, children, ...props }) {
+    const badgeClassName = useStyles(badgeClass);
+    return (_jsx("span", { ...props, className: joinClassNames(badgeClassName, className), children: children }));
+}
+const badgeClass = style(radius.pill, {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    minWidth: "20px",
+    height: "18px",
+    paddingInline: "6px",
+    backgroundColor: colors.grayAlpha[3],
+    color: colors.gray[11],
+    fontFamily: '"SF Compact", "SF Compact Text", "SF Pro Text", system-ui, sans-serif',
+    fontSize: "12px",
+    fontWeight: 500,
+    fontVariantNumeric: "tabular-nums",
+    lineHeight: "16px",
+    whiteSpace: "nowrap",
+});
+function joinClassNames(...classNames) {
+    return classNames.filter(Boolean).join(" ");
+}

package/dist/components/Button.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+type ButtonAttributes = React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
+type ButtonData = {
+    id: string;
+    focused: boolean;
+};
+type ButtonProps = Omit<ButtonAttributes, "children" | "ref"> & {
+    children: React.ReactNode;
+    variant?: "default" | "quiet";
+};
+export declare function useButton(props: ButtonProps): [ButtonData, ButtonAttributes];
+export declare function Button(props: ButtonProps): React.JSX.Element;
+export {};

package/dist/components/Button.js

@@ -0,0 +1,112 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useCallback, useRef } from "react";
+import { useId } from "react-aria";
+import { style, useStyles } from "purse-styles";
+import { useFocus } from "../hooks/useFocus";
+import { useRefCurrent } from "../hooks/useRefCurrent";
+import { backgroundColor } from "../tokens/background";
+import { colors } from "../tokens/colors";
+import { focusRing } from "../tokens/focusRing";
+import { motion } from "../tokens/motion";
+import { shadow, shadowVars } from "../tokens/shadow";
+import { spacing } from "../tokens/spacing";
+import { text } from "../tokens/text";
+const buttonBaseClass = style(text("xs", 400, "highContrast"), focusRing("&:focus-visible", shadowVars.subtle), motion.standard("box-shadow", "background-color", "color"), shadow.subtle, spacing.padding({ x: 6, y: 4 }), {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: spacing.value(3),
+    borderRadius: "4px",
+    width: "fit-content",
+    border: "none",
+    textOverflow: "ellipsis",
+    overflow: "hidden",
+    whiteSpace: "nowrap",
+    "& > svg": {
+        width: "16px",
+        height: "16px",
+        flexShrink: 0,
+    },
+    "&:has(> svg)": {
+        paddingBlock: spacing.value(3),
+    },
+    "&:has(> svg:first-child:not(:only-child))": {
+        paddingInlineStart: spacing.value(4),
+    },
+    "&:has(> svg:last-child:not(:only-child))": {
+        paddingInlineEnd: spacing.value(4),
+    },
+    "&:has(> svg:only-child)": {
+        paddingInline: spacing.value(3),
+    },
+});
+const buttonTextClass = style({
+    display: "block",
+    minWidth: 0,
+    textBox: "trim-both cap alphabetic",
+});
+const buttonClass = style(buttonBaseClass, {
+    backgroundColor: backgroundColor.element,
+    "&:hover": {
+        backgroundColor: backgroundColor.elementHover,
+    },
+    "&:active": {
+        backgroundColor: backgroundColor.elementActive,
+    },
+});
+const quietButtonClass = style(buttonBaseClass, focusRing("&:focus-visible"), {
+    color: colors.gray[11],
+    backgroundColor: "transparent",
+    boxShadow: "none",
+    "&:hover": {
+        color: colors.gray[12],
+        backgroundColor: backgroundColor.elementHover,
+    },
+});
+export function useButton(props) {
+    const ref = useRef(null);
+    const id = useId();
+    const [focused, focusProps] = useFocus(id, ref);
+    const onClickRef = useRefCurrent(props.onClick);
+    const onFocusRef = useRefCurrent(props.onFocus);
+    const onClick = useCallback((event) => {
+        focusProps.onFocus(event);
+        onClickRef.current?.(event);
+    }, []);
+    const onFocus = useCallback((event) => {
+        focusProps.onFocus(event);
+        onFocusRef.current?.(event);
+    }, []);
+    return [
+        { focused, id },
+        { ref, onClick, onFocus },
+    ];
+}
+export function Button(props) {
+    const { children, className: classNameProp, onClick, onFocus, type = "button", variant = "default", ...buttonProps } = props;
+    const [data, attributes] = useButton({ children, onClick, onFocus });
+    const className = useStyles(variant === "quiet" ? quietButtonClass : buttonClass);
+    const textClassName = useStyles(buttonTextClass);
+    const mergedClassName = [className, classNameProp].filter(Boolean).join(" ");
+    return (_jsx("button", { ...buttonProps, ...attributes, type: type, className: mergedClassName, children: renderButtonChildren(children, textClassName) }));
+}
+function renderButtonChildren(children, className) {
+    const rendered = [];
+    let textRun = [];
+    const flushTextRun = () => {
+        if (textRun.length === 0)
+            return;
+        rendered.push(_jsx("span", { className: className, children: textRun }, `text-${rendered.length}`));
+        textRun = [];
+    };
+    for (const child of React.Children.toArray(children)) {
+        if (typeof child === "string" || typeof child === "number") {
+            textRun.push(child);
+            continue;
+        }
+        flushTextRun();
+        rendered.push(child);
+    }
+    flushTextRun();
+    return rendered;
+}

package/dist/components/Checkbox.d.ts

@@ -0,0 +1,7 @@
+type CheckboxProps = {
+    label?: string;
+    checked: boolean;
+    setChecked: (checked: boolean) => void;
+};
+export declare function Checkbox(props: CheckboxProps): import("react").JSX.Element;
+export {};

package/dist/components/Checkbox.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { useCheckbox } from "react-aria";
+import { useToggleState } from "react-stately";
+import { style, useStyles } from "purse-styles";
+import { colors } from "../tokens/colors";
+import { focusRing } from "../tokens/focusRing";
+import { flex } from "../tokens/layout";
+import { motion } from "../tokens/motion";
+import { radius } from "../tokens/radius";
+import { shadow, shadowVars } from "../tokens/shadow";
+import { visuallyHidden } from "../tokens/visuallyHidden";
+import { labelText } from "./Typography";
+const checkboxClass = style(flex({ align: "center", gap: 3 }), focusRing("& .checkbox-input:focus-visible + .checkbox-toggle", shadowVars.subtle), {
+    position: "relative",
+    width: "fit-content",
+    "&:hover .checkbox-toggle": {
+        backgroundColor: colors.gray[8],
+    },
+    "& .checkbox-input:checked + .checkbox-toggle": {
+        backgroundColor: colors.accent[9],
+    },
+    "& .checkbox-input:checked + .checkbox-toggle .checkbox-icon": {
+        opacity: 1,
+        transform: "scale(1)",
+    },
+});
+const checkboxToggleClass = style(flex({ align: "center", justify: "center" }), radius["2xs"], motion.standard("background-color"), shadow.subtle, {
+    pointerEvents: "none",
+    width: "14px",
+    height: "14px",
+    backgroundColor: colors.gray[7],
+});
+const checkboxIconClass = style(motion.standard("opacity", "transform"), {
+    width: "10px",
+    height: "10px",
+    paddingTop: "0.5px",
+    paddingLeft: "0.5px",
+    fill: colors.gray[3],
+    opacity: 0,
+    transform: "scale(0)",
+});
+export function Checkbox(props) {
+    const { label, checked, setChecked } = props;
+    const state = useToggleState({ isSelected: checked, onChange: setChecked });
+    const ref = useRef(null);
+    const { inputProps } = useCheckbox({ "aria-label": props.label }, state, ref);
+    const className = useStyles(checkboxClass);
+    const inputClassName = useStyles(visuallyHidden);
+    const toggleClassName = useStyles(checkboxToggleClass);
+    const iconClassName = useStyles(checkboxIconClass);
+    const labelClassName = useStyles(labelText);
+    return (_jsxs("label", { className: className, children: [_jsx("input", { ...inputProps, className: `${inputClassName} checkbox-input`, ref: ref }), _jsx("span", { className: `${toggleClassName} checkbox-toggle`, children: _jsx("svg", { focusable: "false", "aria-hidden": "true", className: `${iconClassName} checkbox-icon`, viewBox: "0 0 11 11", children: _jsx("path", { d: "M3.788 9A.999.999 0 0 1 3 8.615l-2.288-3a1 1 0 1 1 1.576-1.23l1.5 1.991 3.924-4.991a1 1 0 1 1 1.576 1.23l-4.712 6A.999.999 0 0 1 3.788 9z" }) }) }), label && _jsx("span", { className: labelClassName, children: label })] }));
+}

package/dist/components/CollectionPopover.d.ts

@@ -0,0 +1,4 @@
+import { type PopoverProps } from "react-aria-components";
+export interface CollectionPopoverProps extends Omit<PopoverProps, "className"> {
+}
+export declare function CollectionPopover({ placement, offset, ...props }: CollectionPopoverProps): import("react").JSX.Element;

package/dist/components/CollectionPopover.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Popover, } from "react-aria-components";
+import { style, useStyles } from "purse-styles";
+import { backgroundColor } from "../tokens/background";
+import { radius } from "../tokens/radius";
+import { shadow } from "../tokens/shadow";
+import { spacing } from "../tokens/spacing";
+const collectionPopoverStyle = style(radius.sm, shadow.strong, spacing.padding({ y: 1 }), {
+    minWidth: "var(--trigger-width)",
+    maxHeight: "280px",
+    overflow: "hidden",
+    background: backgroundColor.element,
+});
+export function CollectionPopover({ placement = "bottom start", offset = 6, ...props }) {
+    const className = useStyles(collectionPopoverStyle);
+    return (_jsx(Popover, { ...props, className: className, placement: placement, offset: offset }));
+}