@tanishqkancharla/maui 0.0.53 → 0.0.55

package/dist/components/Avatar.d.ts

@@ -4,5 +4,13 @@ type AvatarProps = {
     size?: TextSize;
     className?: string;
 };
+/** `root` on the outer `<span>` (circle; colors seeded from `name`, dimensions from `size`, no state); `initials` on the inner `<span>` holding the letters. */
+export declare const avatarStyles: {
+    readonly root: (args_0: {
+        name: string;
+        size?: TextSize;
+    }) => import("purse-styles").StyleElement;
+    readonly initials: import("purse-styles").StyleElement;
+};
 export declare function Avatar({ name, size, className }: AvatarProps): import("react").JSX.Element;
 export {};

package/dist/components/Avatar.js

@@ -5,11 +5,6 @@ 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));
-    const initialsClassName = useStyles(initialsClass);
-    return (_jsx("span", { className: joinClassNames(avatarClassName, className), "aria-hidden": "true", children: _jsx("span", { className: initialsClassName, children: initials(name) }) }));
-}
 const avatarPalette = [
     { background: colors.accent[4], color: colors.accent[11] },
     {
@@ -90,6 +85,16 @@ const initialsClass = style({
     display: "block",
     textBox: "trim-both cap alphabetic",
 });
+/** `root` on the outer `<span>` (circle; colors seeded from `name`, dimensions from `size`, no state); `initials` on the inner `<span>` holding the letters. */
+export const avatarStyles = {
+    root: memoize(({ name, size = "sm" }) => avatarClass(name, size)),
+    initials: initialsClass,
+};
+export function Avatar({ name, size = "sm", className }) {
+    const avatarClassName = useStyles(avatarStyles.root({ name, size }));
+    const initialsClassName = useStyles(avatarStyles.initials);
+    return (_jsx("span", { className: joinClassNames(avatarClassName, className), "aria-hidden": "true", children: _jsx("span", { className: initialsClassName, children: initials(name) }) }));
+}
 function joinClassNames(...classNames) {
     return classNames.filter(Boolean).join(" ");
 }

package/dist/components/Badge.d.ts

@@ -1,4 +1,8 @@
 import type React from "react";
 type BadgeProps = React.HTMLAttributes<HTMLSpanElement>;
+/** `root` is the pill; put it on any inline element (no state). */
+export declare const badgeStyles: {
+    readonly root: import("purse-styles").StyleElement;
+};
 export declare function Badge({ className, children, ...props }: BadgeProps): React.JSX.Element;
 export {};

package/dist/components/Badge.js

@@ -2,10 +2,6 @@ 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",
@@ -22,6 +18,12 @@ const badgeClass = style(radius.pill, {
     lineHeight: "16px",
     whiteSpace: "nowrap",
 });
+/** `root` is the pill; put it on any inline element (no state). */
+export const badgeStyles = { root: badgeClass };
+export function Badge({ className, children, ...props }) {
+    const badgeClassName = useStyles(badgeStyles.root);
+    return (_jsx("span", { ...props, className: joinClassNames(badgeClassName, className), children: children }));
+}
 function joinClassNames(...classNames) {
     return classNames.filter(Boolean).join(" ");
 }

package/dist/components/Button.d.ts

@@ -3,12 +3,12 @@ import { type ButtonProps as RACButtonProps } from "react-aria-components";
 import { type ColorName } from "../tokens/colors";
 export type ButtonVariant = "default" | "quiet" | "primary";
 export type ButtonSize = "default" | "sm";
-/** Internal style primitives for controls that compose Button visuals. */
-export declare const buttonStyles: {
-    readonly base: import("purse-styles").StyleElement;
-    readonly quiet: import("purse-styles").StyleElement;
-    readonly text: import("purse-styles").StyleElement;
-};
+/**
+ * @internal Shared shell under every Button variant (no fill, no hover).
+ * Only for Maui controls that layer their own fill on top (TabBar's selected
+ * tab); use `buttonStyles.root` everywhere else.
+ */
+export declare const buttonBaseStyle: import("purse-styles").StyleElement;
 /** Opaque hex or `rgb()`. Palette names stay ColorName (`"blue"` is Radix, not CSS `blue`). */
 export type ButtonCssColor = `#${string}` | `rgb(${string}`;
 export type ButtonVariantColor = ColorName | ButtonCssColor;
@@ -29,6 +29,11 @@ export declare function useButton(props: Pick<ButtonProps, "onClick" | "onFocus"
     ButtonData,
     Pick<ButtonAttributes, "ref"> & Pick<RACButtonProps, "onClick" | "onFocus">
 ];
+/** `root` goes on the RAC `Button` (native `:hover` / `:focus-visible` / `:disabled`; icons are direct `> svg` children); `label` goes on a `<span>` wrapping each text run. */
+export declare const buttonStyles: {
+    readonly root: (args_0?: Pick<ButtonProps, "size" | "variant" | "variantColor"> | undefined) => import("purse-styles").StyleElement;
+    readonly label: import("purse-styles").StyleElement;
+};
 export declare const Button: React.ForwardRefExoticComponent<Omit<RACButtonProps, "children" | "className"> & {
     children: React.ReactNode;
     className?: string;

package/dist/components/Button.js

@@ -107,12 +107,12 @@ const quietClass = memoize((color, hoverColor, wash) => style(buttonBaseClass, f
     "&:disabled": disabledQuiet,
 }));
 const quietButtonClass = quietClass(colors.gray[11], colors.gray[12], colors.grayAlpha[9]);
-/** Internal style primitives for controls that compose Button visuals. */
-export const buttonStyles = {
-    base: buttonBaseClass,
-    quiet: quietButtonClass,
-    text: buttonTextClass,
-};
+/**
+ * @internal Shared shell under every Button variant (no fill, no hover).
+ * Only for Maui controls that layer their own fill on top (TabBar's selected
+ * tab); use `buttonStyles.root` everywhere else.
+ */
+export const buttonBaseStyle = buttonBaseClass;
 const darkTextOnSolid = new Set([
     "amber",
     "lime",
@@ -197,11 +197,16 @@ export function useButton(props, forwardedRef) {
         { ref, onClick, onFocus },
     ];
 }
+/** `root` goes on the RAC `Button` (native `:hover` / `:focus-visible` / `:disabled`; icons are direct `> svg` children); `label` goes on a `<span>` wrapping each text run. */
+export const buttonStyles = {
+    root: memoize(({ variant = "default", size = "default", variantColor, } = {}) => style(buttonVariantClass(variant, variantColor), size === "sm" && smallButtonClass)),
+    label: buttonTextClass,
+};
 export const Button = React.forwardRef(function Button(props, forwardedRef) {
     const { children, className: classNameProp, onClick, onFocus, type = "button", size = "default", variant = "default", variantColor, isDisabled, ...buttonProps } = props;
     const [, attributes] = useButton({ onClick, onFocus }, forwardedRef);
-    const className = useStyles(buttonVariantClass(variant, variantColor), size === "sm" && smallButtonClass);
-    const textClassName = useStyles(buttonTextClass);
+    const className = useStyles(buttonStyles.root({ variant, size, variantColor }));
+    const textClassName = useStyles(buttonStyles.label);
     const mergedClassName = [className, classNameProp].filter(Boolean).join(" ");
     return (_jsx(RACButton, { ...buttonProps, ref: attributes.ref, type: type, isDisabled: isDisabled, className: mergedClassName, onClick: attributes.onClick, onFocus: attributes.onFocus, children: renderButtonChildren(children, textClassName) }));
 });

package/dist/components/Checkbox.d.ts

@@ -3,5 +3,12 @@ type CheckboxProps = {
     checked: boolean;
     setChecked: (checked: boolean) => void;
 };
+/** Checkbox parts: `root` RAC `Checkbox` (`[data-hovered]`, `[data-selected]`, `[data-focus-visible]`; restyles `box` and `check` by their own classes), `box` the box span, `check` the checkmark svg, `label` the label text span. */
+export declare const checkboxStyles: {
+    readonly root: import("purse-styles").StyleElement;
+    readonly box: import("purse-styles").StyleElement;
+    readonly check: import("purse-styles").StyleElement;
+    readonly label: import("purse-styles").StyleElement;
+};
 export declare function Checkbox(props: CheckboxProps): import("react").JSX.Element;
 export {};

package/dist/components/Checkbox.js

@@ -1,7 +1,5 @@
 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 { Checkbox as RACCheckbox } from "react-aria-components";
 import { defineVars, style, useStyles } from "purse-styles";
 import { LARGE_SCALE } from "../theme/dataScale";
 import { backgroundColor, surfaceMixPercent, surfaceWash, } from "../tokens/background";
@@ -12,39 +10,19 @@ import { motion } from "../tokens/motion";
 import { radius } from "../tokens/radius";
 import { shadow, shadowVars } from "../tokens/shadow";
 import { controlSize } from "../tokens/sizing";
-import { visuallyHidden } from "../tokens/visuallyHidden";
 import { labelText } from "./Typography";
 const checkboxSize = defineVars({
     box: { default: "14px", [LARGE_SCALE]: "20px" },
     checkmark: { default: "10px", [LARGE_SCALE]: "14px" },
 });
-const checkboxClass = style(flex({ alignItems: "center", gap: 3 }), focusRing("& .checkbox-input:focus-visible + .checkbox-toggle", shadowVars.control), {
-    position: "relative",
-    width: "fit-content",
-    minHeight: controlSize.minTarget,
-    minWidth: controlSize.minTarget,
-    "&:hover .checkbox-toggle": {
-        backgroundColor: backgroundColor.elementHover,
-    },
-    "& .checkbox-input:checked + .checkbox-toggle": {
-        backgroundColor: colors.accent[9],
-    },
-    "&:hover .checkbox-input:checked + .checkbox-toggle": {
-        backgroundColor: surfaceWash(colors.gray[12], surfaceMixPercent.hover, colors.accent[9]),
-    },
-    "& .checkbox-input:checked + .checkbox-toggle .checkbox-icon": {
-        opacity: 1,
-        transform: "scale(1)",
-    },
-});
-const checkboxToggleClass = style(flex({ alignItems: "center", justifyContent: "center" }), radius["2xs"], shadow.control, {
+const box = style(flex({ alignItems: "center", justifyContent: "center" }), radius["2xs"], shadow.control, {
     pointerEvents: "none",
     flexShrink: 0,
     width: checkboxSize.box,
     height: checkboxSize.box,
     backgroundColor: backgroundColor.element,
 });
-const checkboxIconClass = style(motion.standard("opacity", "transform"), {
+const check = style(motion.standard("opacity", "transform"), {
     width: checkboxSize.checkmark,
     height: checkboxSize.checkmark,
     paddingTop: "0.5px",
@@ -53,15 +31,32 @@ const checkboxIconClass = style(motion.standard("opacity", "transform"), {
     opacity: 0,
     transform: "scale(0)",
 });
+const root = style(flex({ alignItems: "center", gap: 3 }), focusRing(`&[data-focus-visible] ${box}`, shadowVars.control), {
+    position: "relative",
+    width: "fit-content",
+    minHeight: controlSize.minTarget,
+    minWidth: controlSize.minTarget,
+    [`&[data-hovered] ${box}`]: {
+        backgroundColor: backgroundColor.elementHover,
+    },
+    [`&[data-selected] ${box}`]: {
+        backgroundColor: colors.accent[9],
+    },
+    [`&[data-selected][data-hovered] ${box}`]: {
+        backgroundColor: surfaceWash(colors.gray[12], surfaceMixPercent.hover, colors.accent[9]),
+    },
+    [`&[data-selected] ${check}`]: {
+        opacity: 1,
+        transform: "scale(1)",
+    },
+});
+/** Checkbox parts: `root` RAC `Checkbox` (`[data-hovered]`, `[data-selected]`, `[data-focus-visible]`; restyles `box` and `check` by their own classes), `box` the box span, `check` the checkmark svg, `label` the label text span. */
+export const checkboxStyles = { root, box, check, label: labelText };
 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 })] }));
+    const className = useStyles(checkboxStyles.root);
+    const boxClassName = useStyles(checkboxStyles.box);
+    const checkClassName = useStyles(checkboxStyles.check);
+    const labelClassName = useStyles(checkboxStyles.label);
+    return (_jsxs(RACCheckbox, { className: className, isSelected: checked, onChange: setChecked, children: [_jsx("span", { className: boxClassName, children: _jsx("svg", { focusable: "false", "aria-hidden": "true", className: checkClassName, 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/Code.d.ts

@@ -4,6 +4,16 @@ export type KbdVariant = "default" | "quiet";
 export type KbdProps = CodeProps & {
     variant?: KbdVariant;
 };
+/** `root` on a `<code>` element (inline, no state). */
+export declare const codeStyles: {
+    readonly root: import("purse-styles").StyleElement;
+};
 export declare function Code({ className, children, ...props }: CodeProps): React.JSX.Element;
+/** `root({ variant })` on a `<kbd>` element (inline keycap, no state). */
+export declare const kbdStyles: {
+    readonly root: (args_0?: {
+        variant?: KbdVariant;
+    } | undefined) => import("purse-styles").StyleElement;
+};
 export declare function Kbd({ className, children, variant, ...props }: KbdProps): React.JSX.Element;
 export {};

package/dist/components/Code.js

@@ -4,6 +4,7 @@ import { colors } from "../tokens/colors";
 import { radius } from "../tokens/radius";
 import { spacing } from "../tokens/spacing";
 import { monospace, text } from "../tokens/text";
+import { memoize } from "../utils/memoize";
 const codeClass = style(monospace, radius.sm, spacing.padding({ x: 2, y: 1 }), {
     backgroundColor: colors.gray[3],
     color: colors.gray[12],
@@ -26,12 +27,18 @@ const kbdClass = style(text({ size: "xs", fontWeight: 400, color: "lowContrast"
 const quietKbdClass = style(kbdClass, {
     backgroundColor: "transparent",
 });
+/** `root` on a `<code>` element (inline, no state). */
+export const codeStyles = { root: codeClass };
 export function Code({ className, children, ...props }) {
-    const codeClassName = useStyles(codeClass);
+    const codeClassName = useStyles(codeStyles.root);
     return (_jsx("code", { ...props, className: joinClassNames(codeClassName, className), children: children }));
 }
+/** `root({ variant })` on a `<kbd>` element (inline keycap, no state). */
+export const kbdStyles = {
+    root: memoize(({ variant = "default" } = {}) => variant === "quiet" ? quietKbdClass : kbdClass),
+};
 export function Kbd({ className, children, variant = "default", ...props }) {
-    const kbdClassName = useStyles(variant === "quiet" ? quietKbdClass : kbdClass);
+    const kbdClassName = useStyles(kbdStyles.root({ variant }));
     return (_jsx("kbd", { ...props, className: joinClassNames(kbdClassName, className), children: children }));
 }
 function joinClassNames(...classNames) {

package/dist/components/CodeBlock.d.ts

@@ -1,3 +1,8 @@
+/** `root` on the `<pre>` (or on a wrapper around Shiki's HTML; restyles its `.shiki` descendants, no state); `code` on the `<code>` inside a plain, unhighlighted `<pre>`. */
+export declare const codeBlockStyles: {
+    readonly root: import("purse-styles").StyleElement;
+    readonly code: import("purse-styles").StyleElement;
+};
 export declare function CodeBlock(props: {
     children: string;
     lang: string;

package/dist/components/CodeBlock.js

@@ -33,9 +33,14 @@ const codeBlockClass = style(text({ size: "xs", fontWeight: 400, color: "highCon
 const codeClass = style({
     font: "inherit",
 });
+/** `root` on the `<pre>` (or on a wrapper around Shiki's HTML; restyles its `.shiki` descendants, no state); `code` on the `<code>` inside a plain, unhighlighted `<pre>`. */
+export const codeBlockStyles = {
+    root: codeBlockClass,
+    code: codeClass,
+};
 export function CodeBlock(props) {
-    const className = useStyles(codeBlockClass);
-    const codeClassName = useStyles(codeClass);
+    const className = useStyles(codeBlockStyles.root);
+    const codeClassName = useStyles(codeBlockStyles.code);
     const [html, setHtml] = useState(null);
     const { resolvedTheme } = useTheme();
     useEffect(() => {

package/dist/components/CollectionPopover.d.ts

@@ -1,4 +1,8 @@
 import { type PopoverProps } from "react-aria-components";
+/** `root` goes on RAC `Popover`; sizes from RAC's `--trigger-width` variable. */
+export declare const collectionPopoverStyles: {
+    readonly root: import("purse-styles").StyleElement;
+};
 export interface CollectionPopoverProps extends Omit<PopoverProps, "className"> {
 }
 export declare function CollectionPopover({ placement, offset, ...props }: CollectionPopoverProps): import("react").JSX.Element;

package/dist/components/CollectionPopover.js

@@ -5,13 +5,15 @@ 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 }), {
+const root = style(radius.sm, shadow.strong, spacing.padding({ y: 1 }), {
     minWidth: "var(--trigger-width)",
     maxHeight: "280px",
     overflow: "hidden",
     background: backgroundColor.element,
 });
+/** `root` goes on RAC `Popover`; sizes from RAC's `--trigger-width` variable. */
+export const collectionPopoverStyles = { root };
 export function CollectionPopover({ placement = "bottom start", offset = 6, ...props }) {
-    const className = useStyles(collectionPopoverStyle);
+    const className = useStyles(collectionPopoverStyles.root);
     return (_jsx(Popover, { ...props, className: className, placement: placement, offset: offset }));
 }

package/dist/components/Dialog.d.ts

@@ -15,6 +15,17 @@ export type DialogProps = {
     "aria-labelledby"?: string;
     className?: string;
 };
+/** Dialog parts: `overlay` RAC `ModalOverlay`, `modal({ size })` RAC `Modal`, `dialog` RAC `Dialog`, `title` RAC `Heading slot="title"`, `body` and `actions` plain divs inside the dialog; no state attributes (enter/exit motion is JS, not CSS). */
+export declare const dialogStyles: {
+    readonly overlay: import("purse-styles").StyleElement;
+    readonly modal: (args_0?: {
+        size?: DialogSize;
+    } | undefined) => import("purse-styles").StyleElement;
+    readonly dialog: import("purse-styles").StyleElement;
+    readonly title: import("purse-styles").StyleElement;
+    readonly body: import("purse-styles").StyleElement;
+    readonly actions: import("purse-styles").StyleElement;
+};
 export declare function Dialog({ children, isOpen: isOpenProp, defaultOpen, onOpenChange, isDismissable, isKeyboardDismissDisabled, size, role, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, className, }: DialogProps): import("react").JSX.Element;
 export type DialogTitleProps = Omit<ComponentPropsWithoutRef<typeof Heading>, "slot">;
 export declare function DialogTitle({ className, ...props }: DialogTitleProps): import("react").JSX.Element;

package/dist/components/Dialog.js

@@ -10,6 +10,7 @@ import { radius } from "../tokens/radius";
 import { spacing } from "../tokens/spacing";
 import { text } from "../tokens/text";
 import { cls } from "../utils/cls";
+import { memoize } from "../utils/memoize";
 const MotionModalOverlay = motion.create(ModalOverlay);
 const MotionModal = motion.create(Modal);
 const dialogEnterTransition = {
@@ -29,7 +30,7 @@ const reducedMotionTransition = {
     duration: overlayMotion.reduced.durationMs / 1000,
     ease: "easeInOut",
 };
-const overlayClass = style({
+const overlay = style({
     position: "fixed",
     inset: 0,
     zIndex: 1200,
@@ -42,7 +43,7 @@ const overlayClass = style({
     overflow: "auto",
     overscrollBehavior: "contain",
 });
-const surfaceClass = style(background.element, border([], "outline"), radius.lg, {
+const modalBase = style(background.element, border([], "outline"), radius.lg, {
     width: "min(440px, calc(100vw - 32px))",
     maxWidth: "100%",
     maxHeight: "calc(100dvh - 32px)",
@@ -55,12 +56,12 @@ const surfaceClass = style(background.element, border([], "outline"), radius.lg,
     transformOrigin: "center",
     willChange: "opacity, transform",
 });
-const surfaceSizeClasses = {
+const modalSizes = {
     sm: style({ width: "min(440px, calc(100vw - 32px))" }),
     md: style({ width: "min(640px, calc(100vw - 32px))" }),
     lg: style({ width: "min(960px, calc(100vw - 32px))" }),
 };
-const dialogClass = style({
+const dialog = style({
     minWidth: 0,
     minHeight: 0,
     display: "flex",
@@ -68,29 +69,39 @@ const dialogClass = style({
     gap: spacing.value(8),
     outline: "none",
 });
-const titleClass = style(text({ size: "lg", fontWeight: 600 }), {
+const title = style(text({ size: "lg", fontWeight: 600 }), {
     margin: 0,
 });
-const bodyClass = style({
+const body = style({
     minWidth: 0,
     minHeight: 0,
     overflowY: "auto",
 });
-const actionsClass = style({
+const actions = style({
     display: "flex",
     alignItems: "center",
     justifyContent: "flex-end",
     flexWrap: "wrap",
     gap: spacing.value(4),
 });
+const modal = memoize(({ size = "sm" } = {}) => style(modalBase, modalSizes[size]));
+/** Dialog parts: `overlay` RAC `ModalOverlay`, `modal({ size })` RAC `Modal`, `dialog` RAC `Dialog`, `title` RAC `Heading slot="title"`, `body` and `actions` plain divs inside the dialog; no state attributes (enter/exit motion is JS, not CSS). */
+export const dialogStyles = {
+    overlay,
+    modal,
+    dialog,
+    title,
+    body,
+    actions,
+};
 export function Dialog({ children, isOpen: isOpenProp, defaultOpen = false, onOpenChange, isDismissable = true, isKeyboardDismissDisabled, size = "sm", role = "dialog", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, className, }) {
     const isControlled = isOpenProp !== undefined;
     const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
     const isOpen = isControlled ? isOpenProp : uncontrolledOpen;
     const reduceMotion = Boolean(useReducedMotion());
-    const overlayClassName = useStyles(overlayClass);
-    const surfaceClassName = useStyles(surfaceClass, surfaceSizeClasses[size]);
-    const dialogClassName = useStyles(dialogClass);
+    const overlayClassName = useStyles(dialogStyles.overlay);
+    const surfaceClassName = useStyles(dialogStyles.modal({ size }));
+    const dialogClassName = useStyles(dialogStyles.dialog);
     const setOpen = useCallback((next) => {
         if (!isControlled) {
             setUncontrolledOpen(next);
@@ -107,14 +118,14 @@ export function Dialog({ children, isOpen: isOpenProp, defaultOpen = false, onOp
     return (_jsx(AnimatePresence, { children: isOpen && (_jsx(MotionModalOverlay, { isOpen: true, onOpenChange: setOpen, isDismissable: isDismissable, isKeyboardDismissDisabled: isKeyboardDismissDisabled, className: overlayClassName, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: reduceMotion ? reducedMotionTransition : backdropTransition, children: _jsx(MotionModal, { className: cls(surfaceClassName, className), initial: { opacity: 0, scale }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale, transition: exitTransition }, transition: enterTransition, children: _jsx(AriaDialog, { role: role, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, className: dialogClassName, children: children }) }) })) }));
 }
 export function DialogTitle({ className, ...props }) {
-    const titleClassName = useStyles(titleClass);
+    const titleClassName = useStyles(dialogStyles.title);
     return (_jsx(Heading, { ...props, slot: "title", className: cls(titleClassName, className) }));
 }
 export function DialogBody({ className, ...props }) {
-    const bodyClassName = useStyles(bodyClass);
+    const bodyClassName = useStyles(dialogStyles.body);
     return _jsx("div", { ...props, className: cls(bodyClassName, className) });
 }
 export function DialogActions({ className, ...props }) {
-    const actionsClassName = useStyles(actionsClass);
+    const actionsClassName = useStyles(dialogStyles.actions);
     return _jsx("div", { ...props, className: cls(actionsClassName, className) });
 }

package/dist/components/Drawer.d.ts

@@ -13,4 +13,13 @@ export type DrawerProps = {
     "aria-labelledby"?: string;
     className?: string;
 };
+/** Drawer parts: `overlay` RAC `ModalOverlay` (scrim color is animated inline; add `reducedMotionScrim` with it under reduced motion), `modal` RAC `Modal` (keys off `[data-side='start'|'end']`, which RAC does not set: pass `data-side` yourself), `panel` the sliding element inside the modal (restyles a `nav` that is a direct child of `[role='dialog']`), `dialog` RAC `Dialog`, `title` visually hidden RAC `Heading slot="title"`. */
+export declare const drawerStyles: {
+    readonly overlay: import("purse-styles").StyleElement;
+    readonly reducedMotionScrim: import("purse-styles").StyleElement;
+    readonly modal: import("purse-styles").StyleElement;
+    readonly panel: import("purse-styles").StyleElement;
+    readonly dialog: import("purse-styles").StyleElement;
+    readonly title: import("purse-styles").StyleElement;
+};
 export declare function Drawer({ children, isOpen: isOpenProp, defaultOpen, onOpenChange, side, isDismissable, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, className, }: DrawerProps): import("react").JSX.Element | null;