@brijbyte/agentic-ui 0.0.1 → 0.0.3

package/dist/context-menu/parts.js

@@ -0,0 +1,91 @@
+import context_menu_module_default from "./context-menu.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { ContextMenu } from "@base-ui/react/context-menu";
+//#region src/context-menu/parts.tsx
+/**
+* Styled primitives for ContextMenu.
+*
+* @example
+* ```tsx
+* import { ContextMenu as BaseContextMenu } from '@base-ui/react/context-menu';
+* import { ContextMenuPopup, ContextMenuItem, ContextMenuSeparator } from '@brijbyte/agentic-ui/context-menu';
+*
+* <BaseContextMenu.Root>
+*   <BaseContextMenu.Trigger render={<div>Right click me</div>} />
+*   <BaseContextMenu.Portal>
+*     <BaseContextMenu.Positioner>
+*       <ContextMenuPopup>
+*         <ContextMenuItem>Cut</ContextMenuItem>
+*         <ContextMenuItem>Copy</ContextMenuItem>
+*         <ContextMenuSeparator />
+*         <ContextMenuItem>Paste</ContextMenuItem>
+*       </ContextMenuPopup>
+*     </BaseContextMenu.Positioner>
+*   </BaseContextMenu.Portal>
+* </BaseContextMenu.Root>
+* ```
+*/
+const ContextMenuPopup = forwardRef(function ContextMenuPopup({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ContextMenu.Popup, {
+		ref,
+		className: `${context_menu_module_default.popup} ${className ?? ""}`,
+		...props
+	});
+});
+const ContextMenuItem = forwardRef(function ContextMenuItem({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ContextMenu.Item, {
+		ref,
+		className: `${context_menu_module_default.item} ${className ?? ""}`,
+		...props
+	});
+});
+const ContextMenuSeparator = forwardRef(function ContextMenuSeparator({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ContextMenu.Separator, {
+		ref,
+		className: `${context_menu_module_default.separator} ${className ?? ""}`,
+		...props
+	});
+});
+const ContextMenuGroup = forwardRef(function ContextMenuGroup({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ContextMenu.Group, {
+		ref,
+		className,
+		...props
+	});
+});
+const ContextMenuGroupLabel = forwardRef(function ContextMenuGroupLabel({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ContextMenu.GroupLabel, {
+		ref,
+		className: `${context_menu_module_default["group-label"]} ${className ?? ""}`,
+		...props
+	});
+});
+const ContextMenuSubmenuTrigger = forwardRef(function ContextMenuSubmenuTrigger({ className, children, ...props }, ref) {
+	return /* @__PURE__ */ jsxs(ContextMenu.SubmenuTrigger, {
+		ref,
+		className: `${context_menu_module_default["submenu-trigger"]} ${className ?? ""}`,
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			style: { flex: 1 },
+			children
+		}), /* @__PURE__ */ jsx("svg", {
+			width: "10",
+			height: "10",
+			viewBox: "0 0 10 10",
+			fill: "none",
+			className: context_menu_module_default["submenu-icon"],
+			children: /* @__PURE__ */ jsx("path", {
+				d: "M3.5 9L7.5 5L3.5 1",
+				stroke: "currentColor",
+				strokeWidth: "1.5",
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			})
+		})]
+	});
+});
+//#endregion
+export { ContextMenuGroup, ContextMenuGroupLabel, ContextMenuItem, ContextMenuPopup, ContextMenuSeparator, ContextMenuSubmenuTrigger };
+
+//# sourceMappingURL=parts.js.map

package/dist/context-menu/parts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"parts.js","names":["BaseContextMenu","styles"],"sources":["../../src/context-menu/parts.tsx"],"sourcesContent":["/**\n * Styled primitives for ContextMenu.\n *\n * @example\n * ```tsx\n * import { ContextMenu as BaseContextMenu } from '@base-ui/react/context-menu';\n * import { ContextMenuPopup, ContextMenuItem, ContextMenuSeparator } from '@brijbyte/agentic-ui/context-menu';\n *\n * <BaseContextMenu.Root>\n *   <BaseContextMenu.Trigger render={<div>Right click me</div>} />\n *   <BaseContextMenu.Portal>\n *     <BaseContextMenu.Positioner>\n *       <ContextMenuPopup>\n *         <ContextMenuItem>Cut</ContextMenuItem>\n *         <ContextMenuItem>Copy</ContextMenuItem>\n *         <ContextMenuSeparator />\n *         <ContextMenuItem>Paste</ContextMenuItem>\n *       </ContextMenuPopup>\n *     </BaseContextMenu.Positioner>\n *   </BaseContextMenu.Portal>\n * </BaseContextMenu.Root>\n * ```\n */\nimport { forwardRef } from \"react\";\nimport type { ComponentRef, ComponentPropsWithoutRef } from \"react\";\nimport { ContextMenu as BaseContextMenu } from \"@base-ui/react/context-menu\";\nimport styles from \"./context-menu.module.css\";\n\ntype BasePopupProps = ComponentPropsWithoutRef<typeof BaseContextMenu.Popup>;\ntype BaseItemProps = ComponentPropsWithoutRef<typeof BaseContextMenu.Item>;\ntype BaseSeparatorProps = ComponentPropsWithoutRef<typeof BaseContextMenu.Separator>;\ntype BaseGroupProps = ComponentPropsWithoutRef<typeof BaseContextMenu.Group>;\ntype BaseGroupLabelProps = ComponentPropsWithoutRef<typeof BaseContextMenu.GroupLabel>;\ntype BaseSubmenuTriggerProps = ComponentPropsWithoutRef<typeof BaseContextMenu.SubmenuTrigger>;\n\nexport interface ContextMenuPopupProps extends Omit<BasePopupProps, \"className\"> {\n  className?: string;\n}\nexport interface ContextMenuItemProps extends Omit<BaseItemProps, \"className\"> {\n  className?: string;\n}\nexport interface ContextMenuSeparatorProps extends Omit<BaseSeparatorProps, \"className\"> {\n  className?: string;\n}\nexport interface ContextMenuGroupProps extends Omit<BaseGroupProps, \"className\"> {\n  className?: string;\n}\nexport interface ContextMenuGroupLabelProps extends Omit<BaseGroupLabelProps, \"className\"> {\n  className?: string;\n}\nexport interface ContextMenuSubmenuTriggerProps extends Omit<BaseSubmenuTriggerProps, \"className\"> {\n  className?: string;\n}\n\nexport const ContextMenuPopup = forwardRef<ComponentRef<typeof BaseContextMenu.Popup>, ContextMenuPopupProps>(function ContextMenuPopup(\n  { className, ...props },\n  ref,\n) {\n  return <BaseContextMenu.Popup ref={ref} className={`${styles.popup} ${className ?? \"\"}`} {...props} />;\n});\n\nexport const ContextMenuItem = forwardRef<ComponentRef<typeof BaseContextMenu.Item>, ContextMenuItemProps>(function ContextMenuItem(\n  { className, ...props },\n  ref,\n) {\n  return <BaseContextMenu.Item ref={ref} className={`${styles.item} ${className ?? \"\"}`} {...props} />;\n});\n\nexport const ContextMenuSeparator = forwardRef<ComponentRef<typeof BaseContextMenu.Separator>, ContextMenuSeparatorProps>(\n  function ContextMenuSeparator({ className, ...props }, ref) {\n    return <BaseContextMenu.Separator ref={ref} className={`${styles.separator} ${className ?? \"\"}`} {...props} />;\n  },\n);\n\nexport const ContextMenuGroup = forwardRef<ComponentRef<typeof BaseContextMenu.Group>, ContextMenuGroupProps>(function ContextMenuGroup(\n  { className, ...props },\n  ref,\n) {\n  return <BaseContextMenu.Group ref={ref} className={className} {...props} />;\n});\n\nexport const ContextMenuGroupLabel = forwardRef<ComponentRef<typeof BaseContextMenu.GroupLabel>, ContextMenuGroupLabelProps>(\n  function ContextMenuGroupLabel({ className, ...props }, ref) {\n    return <BaseContextMenu.GroupLabel ref={ref} className={`${styles[\"group-label\"]} ${className ?? \"\"}`} {...props} />;\n  },\n);\n\nexport const ContextMenuSubmenuTrigger = forwardRef<ComponentRef<typeof BaseContextMenu.SubmenuTrigger>, ContextMenuSubmenuTriggerProps>(\n  function ContextMenuSubmenuTrigger({ className, children, ...props }, ref) {\n    return (\n      <BaseContextMenu.SubmenuTrigger ref={ref} className={`${styles[\"submenu-trigger\"]} ${className ?? \"\"}`} {...props}>\n        <span style={{ flex: 1 }}>{children}</span>\n        <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" className={styles[\"submenu-icon\"]}>\n          <path d=\"M3.5 9L7.5 5L3.5 1\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n        </svg>\n      </BaseContextMenu.SubmenuTrigger>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsDA,MAAa,mBAAmB,WAA8E,SAAS,iBACrH,EAAE,WAAW,GAAG,SAChB,KACA;AACA,QAAO,oBAACA,YAAgB,OAAjB;EAA4B;EAAK,WAAW,GAAGC,4BAAO,MAAM,GAAG,aAAa;EAAM,GAAI;EAAS,CAAA;EACtG;AAEF,MAAa,kBAAkB,WAA4E,SAAS,gBAClH,EAAE,WAAW,GAAG,SAChB,KACA;AACA,QAAO,oBAACD,YAAgB,MAAjB;EAA2B;EAAK,WAAW,GAAGC,4BAAO,KAAK,GAAG,aAAa;EAAM,GAAI;EAAS,CAAA;EACpG;AAEF,MAAa,uBAAuB,WAClC,SAAS,qBAAqB,EAAE,WAAW,GAAG,SAAS,KAAK;AAC1D,QAAO,oBAACD,YAAgB,WAAjB;EAAgC;EAAK,WAAW,GAAGC,4BAAO,UAAU,GAAG,aAAa;EAAM,GAAI;EAAS,CAAA;EAEjH;AAED,MAAa,mBAAmB,WAA8E,SAAS,iBACrH,EAAE,WAAW,GAAG,SAChB,KACA;AACA,QAAO,oBAACD,YAAgB,OAAjB;EAA4B;EAAgB;EAAW,GAAI;EAAS,CAAA;EAC3E;AAEF,MAAa,wBAAwB,WACnC,SAAS,sBAAsB,EAAE,WAAW,GAAG,SAAS,KAAK;AAC3D,QAAO,oBAACA,YAAgB,YAAjB;EAAiC;EAAK,WAAW,GAAGC,4BAAO,eAAe,GAAG,aAAa;EAAM,GAAI;EAAS,CAAA;EAEvH;AAED,MAAa,4BAA4B,WACvC,SAAS,0BAA0B,EAAE,WAAW,UAAU,GAAG,SAAS,KAAK;AACzE,QACE,qBAACD,YAAgB,gBAAjB;EAAqC;EAAK,WAAW,GAAGC,4BAAO,mBAAmB,GAAG,aAAa;EAAM,GAAI;YAA5G,CACE,oBAAC,QAAD;GAAM,OAAO,EAAE,MAAM,GAAG;GAAG;GAAgB,CAAA,EAC3C,oBAAC,OAAD;GAAK,OAAM;GAAK,QAAO;GAAK,SAAQ;GAAY,MAAK;GAAO,WAAWA,4BAAO;aAC5E,oBAAC,QAAD;IAAM,GAAE;IAAqB,QAAO;IAAe,aAAY;IAAM,eAAc;IAAQ,gBAAe;IAAU,CAAA;GAChH,CAAA,CACyB;;EAGtC"}

package/dist/dialog/dialog.css

@@ -1,5 +1,3 @@
-@layer theme, base;
-
 @layer components {
   .backdrop_VsZA5W {
     z-index: var(--z-overlay);
@@ -15,14 +13,14 @@
 
   .popup_VsZA5W {
     z-index: var(--z-modal);
-    background-color: var(--color-bg-elevated);
-    border: var(--border-width-base) solid var(--color-border-base);
+    background-color: var(--color-elevated);
+    border: var(--border-width-base) solid var(--color-line);
     border-radius: var(--radius-2xl);
     box-shadow: var(--shadow-xl);
-    padding: var(--space-6);
-    width: min(480px, calc(100vw - var(--space-8)));
+    padding: var(--space-5) var(--space-6) var(--space-5);
+    width: min(440px, calc(100vw - var(--space-8)));
     max-height: min(640px, calc(100vh - var(--space-8)));
-    gap: var(--space-4);
+    gap: var(--space-3);
     transition: opacity .2s var(--easing-ease-out),
       transform .2s var(--easing-spring);
     outline: none;
@@ -48,25 +46,25 @@
   }
 
   .header_VsZA5W {
-    gap: var(--space-1);
+    gap: var(--space-2);
+    text-align: center;
     flex-direction: column;
     display: flex;
   }
 
   .title_VsZA5W {
-    font-family: var(--font-mono);
+    font-family: var(--font-sans);
     font-size: var(--font-size-lg);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-weight: var(--font-weight-bold);
+    color: var(--color-primary);
     line-height: var(--line-height-tight);
     letter-spacing: var(--letter-spacing-tight);
-    padding-right: var(--space-6);
   }
 
   .description_VsZA5W {
-    font-family: var(--font-mono);
-    font-size: var(--font-size-sm);
-    color: var(--color-text-secondary);
+    font-family: var(--font-sans);
+    font-size: var(--font-size-md);
+    color: var(--color-secondary);
     line-height: var(--line-height-relaxed);
   }
 
@@ -76,7 +74,7 @@
     border-radius: var(--radius-sm);
     width: 24px;
     height: 24px;
-    color: var(--color-text-tertiary);
+    color: var(--color-tertiary);
     cursor: pointer;
     transition: background-color var(--duration-fast) var(--easing-standard),
       color var(--duration-fast) var(--easing-standard);
@@ -90,8 +88,8 @@
   }
 
   .close_VsZA5W:hover {
-    background-color: var(--color-surface-hover);
-    color: var(--color-text-primary);
+    background-color: var(--color-hover);
+    color: var(--color-primary);
   }
 
   .close_VsZA5W:focus-visible {
@@ -101,7 +99,7 @@
   .body_VsZA5W {
     font-family: var(--font-mono);
     font-size: var(--font-size-sm);
-    color: var(--color-text-secondary);
+    color: var(--color-secondary);
     line-height: var(--line-height-relaxed);
     flex: 1;
     overflow-y: auto;
@@ -112,9 +110,16 @@
     align-items: center;
     gap: var(--space-2);
     padding-top: var(--space-2);
-    border-top: var(--border-width-base) solid var(--color-border-subtle);
     display: flex;
   }
-}
 
-@layer utilities;
+  .footer-split_VsZA5W {
+    justify-content: space-between;
+  }
+
+  .footer-end_VsZA5W {
+    align-items: center;
+    gap: var(--space-2);
+    display: flex;
+  }
+}

package/dist/dialog/dialog.d.ts

@@ -1,5 +1,5 @@
-import { ReactElement, ReactNode } from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { ReactElement, ReactNode } from "react";
 import styles from "./dialog.module.css";
 
 //#region src/dialog/dialog.d.ts
@@ -12,7 +12,14 @@ interface DialogProps {
   title?: ReactNode;
   description?: ReactNode;
   children?: ReactNode;
+  /** Buttons aligned to the right (cancel, confirm). */
   footer?: ReactNode;
+  /**
+   * Content anchored to the left of the footer — intended for a destructive
+   * action (e.g. Delete). When present the footer switches to space-between
+   * layout, matching the macOS dialog pattern.
+   */
+  footerStart?: ReactNode;
   className?: string;
   dismissible?: boolean;
 }
@@ -22,6 +29,7 @@ declare function Dialog({
   description,
   children,
   footer,
+  footerStart,
   className,
   dismissible,
   onOpenChange,

package/dist/dialog/dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.d.ts","names":[],"sources":["../../src/dialog/dialog.tsx"],"mappings":";;;;;UAIiB,WAAA;EACf,IAAA;EACA,WAAA;EAFe;EAIf,YAAA,IAAgB,IAAA,WAAe,YAAA;EAC/B,OAAA,GAAU,YAAA;EACV,KAAA,GAAQ,SAAA;EACR,WAAA,GAAc,SAAA;EACd,QAAA,GAAW,SAAA;EACX,MAAA,GAAS,SAAA;EACT,SAAA;EACA,WAAA;AAAA;AAAA,iBAWc,MAAA,CAAA;EACd,OAAA;EACA,KAAA;EACA,WAAA;EACA,QAAA;EACA,MAAA;EACA,SAAA;EACA,WAAA;EACA,YAAA;EAAA,GACG;AAAA,GACF,WAAA,GAAW,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"dialog.d.ts","names":[],"sources":["../../src/dialog/dialog.tsx"],"mappings":";;;;;UAIiB,WAAA;EACf,IAAA;EACA,WAAA;EAFe;EAIf,YAAA,IAAgB,IAAA,WAAe,YAAA;EAC/B,OAAA,GAAU,YAAA;EACV,KAAA,GAAQ,SAAA;EACR,WAAA,GAAc,SAAA;EACd,QAAA,GAAW,SAAA;EAAA;EAEX,MAAA,GAAS,SAAA;EAMK;;;;;EAAd,WAAA,GAAc,SAAA;EACd,SAAA;EACA,WAAA;AAAA;AAAA,iBAWc,MAAA,CAAA;EACd,OAAA;EACA,KAAA;EACA,WAAA;EACA,QAAA;EACA,MAAA;EACA,WAAA;EACA,SAAA;EACA,WAAA;EACA,YAAA;EAAA,GACG;AAAA,GACF,WAAA,GAAW,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/dialog/dialog.js

@@ -16,7 +16,7 @@ function XIcon() {
 		})
 	});
 }
-function Dialog$1({ trigger, title, description, children, footer, className, dismissible = true, onOpenChange, ...props }) {
+function Dialog$1({ trigger, title, description, children, footer, footerStart, className, dismissible = true, onOpenChange, ...props }) {
 	return /* @__PURE__ */ jsxs(Dialog.Root, {
 		onOpenChange,
 		...props,
@@ -40,9 +40,12 @@ function Dialog$1({ trigger, title, description, children, footer, className, di
 					className: dialog_module_default.body,
 					children
 				}),
-				footer && /* @__PURE__ */ jsx("div", {
-					className: dialog_module_default.footer,
-					children: footer
+				(footer || footerStart) && /* @__PURE__ */ jsxs("div", {
+					className: `${dialog_module_default.footer} ${footerStart ? dialog_module_default["footer-split"] : ""}`,
+					children: [footerStart && /* @__PURE__ */ jsx("div", { children: footerStart }), footer && /* @__PURE__ */ jsx("div", {
+						className: dialog_module_default["footer-end"],
+						children: footer
+					})]
 				})
 			]
 		}) })] })]

package/dist/dialog/dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.js","names":["Dialog","BaseDialog","styles"],"sources":["../../src/dialog/dialog.tsx"],"sourcesContent":["import type { ReactNode, ReactElement } from \"react\";\nimport { Dialog as BaseDialog } from \"@base-ui/react/dialog\";\nimport styles from \"./dialog.module.css\";\n\nexport interface DialogProps {\n  open?: boolean;\n  defaultOpen?: boolean;\n  /** `eventDetails` is the base-ui event details object. */\n  onOpenChange?: (open: boolean, eventDetails: unknown) => void;\n  trigger?: ReactElement;\n  title?: ReactNode;\n  description?: ReactNode;\n  children?: ReactNode;\n  footer?: ReactNode;\n  className?: string;\n  dismissible?: boolean;\n}\n\nfunction XIcon() {\n  return (\n    <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\n      <path d=\"M2 2L10 10M10 2L2 10\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\n    </svg>\n  );\n}\n\nexport function Dialog({\n  trigger,\n  title,\n  description,\n  children,\n  footer,\n  className,\n  dismissible = true,\n  onOpenChange,\n  ...props\n}: DialogProps) {\n  return (\n    <BaseDialog.Root onOpenChange={onOpenChange as never} {...props}>\n      {trigger && <BaseDialog.Trigger render={trigger} />}\n      <BaseDialog.Portal>\n        <BaseDialog.Backdrop className={styles.backdrop} />\n        <BaseDialog.Viewport>\n          <BaseDialog.Popup className={`${styles.popup} ${className ?? \"\"}`}>\n            {title && <BaseDialog.Title className={styles.title}>{title}</BaseDialog.Title>}\n            {description && <BaseDialog.Description className={styles.description}>{description}</BaseDialog.Description>}\n            {dismissible && (\n              <BaseDialog.Close className={styles.close} aria-label=\"Close dialog\">\n                <XIcon />\n              </BaseDialog.Close>\n            )}\n            {children && <div className={styles.body}>{children}</div>}\n            {footer && <div className={styles.footer}>{footer}</div>}\n          </BaseDialog.Popup>\n        </BaseDialog.Viewport>\n      </BaseDialog.Portal>\n    </BaseDialog.Root>\n  );\n}\nexport { styles as DialogStyles };\n"],"mappings":";;;;AAkBA,SAAS,QAAQ;AACf,QACE,oBAAC,OAAD;EAAK,OAAM;EAAK,QAAO;EAAK,SAAQ;EAAY,MAAK;YACnD,oBAAC,QAAD;GAAM,GAAE;GAAuB,QAAO;GAAe,aAAY;GAAM,eAAc;GAAU,CAAA;EAC3F,CAAA;;AAIV,SAAgBA,SAAO,EACrB,SACA,OACA,aACA,UACA,QACA,WACA,cAAc,MACd,cACA,GAAG,SACW;AACd,QACE,qBAACC,OAAW,MAAZ;EAA+B;EAAuB,GAAI;YAA1D,CACG,WAAW,oBAACA,OAAW,SAAZ,EAAoB,QAAQ,SAAW,CAAA,EACnD,qBAACA,OAAW,QAAZ,EAAA,UAAA,CACE,oBAACA,OAAW,UAAZ,EAAqB,WAAWC,sBAAO,UAAY,CAAA,EACnD,oBAACD,OAAW,UAAZ,EAAA,UACE,qBAACA,OAAW,OAAZ;GAAkB,WAAW,GAAGC,sBAAO,MAAM,GAAG,aAAa;aAA7D;IACG,SAAS,oBAACD,OAAW,OAAZ;KAAkB,WAAWC,sBAAO;eAAQ;KAAyB,CAAA;IAC9E,eAAe,oBAACD,OAAW,aAAZ;KAAwB,WAAWC,sBAAO;eAAc;KAAqC,CAAA;IAC5G,eACC,oBAACD,OAAW,OAAZ;KAAkB,WAAWC,sBAAO;KAAO,cAAW;eACpD,oBAAC,OAAD,EAAS,CAAA;KACQ,CAAA;IAEpB,YAAY,oBAAC,OAAD;KAAK,WAAWA,sBAAO;KAAO;KAAe,CAAA;IACzD,UAAU,oBAAC,OAAD;KAAK,WAAWA,sBAAO;eAAS;KAAa,CAAA;IACvC;MACC,CAAA,CACJ,EAAA,CAAA,CACJ"}
+{"version":3,"file":"dialog.js","names":["Dialog","BaseDialog","styles"],"sources":["../../src/dialog/dialog.tsx"],"sourcesContent":["import type { ReactNode, ReactElement } from \"react\";\nimport { Dialog as BaseDialog } from \"@base-ui/react/dialog\";\nimport styles from \"./dialog.module.css\";\n\nexport interface DialogProps {\n  open?: boolean;\n  defaultOpen?: boolean;\n  /** `eventDetails` is the base-ui event details object. */\n  onOpenChange?: (open: boolean, eventDetails: unknown) => void;\n  trigger?: ReactElement;\n  title?: ReactNode;\n  description?: ReactNode;\n  children?: ReactNode;\n  /** Buttons aligned to the right (cancel, confirm). */\n  footer?: ReactNode;\n  /**\n   * Content anchored to the left of the footer — intended for a destructive\n   * action (e.g. Delete). When present the footer switches to space-between\n   * layout, matching the macOS dialog pattern.\n   */\n  footerStart?: ReactNode;\n  className?: string;\n  dismissible?: boolean;\n}\n\nfunction XIcon() {\n  return (\n    <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\n      <path d=\"M2 2L10 10M10 2L2 10\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\n    </svg>\n  );\n}\n\nexport function Dialog({\n  trigger,\n  title,\n  description,\n  children,\n  footer,\n  footerStart,\n  className,\n  dismissible = true,\n  onOpenChange,\n  ...props\n}: DialogProps) {\n  return (\n    <BaseDialog.Root onOpenChange={onOpenChange as never} {...props}>\n      {trigger && <BaseDialog.Trigger render={trigger} />}\n      <BaseDialog.Portal>\n        <BaseDialog.Backdrop className={styles.backdrop} />\n        <BaseDialog.Viewport>\n          <BaseDialog.Popup className={`${styles.popup} ${className ?? \"\"}`}>\n            {title && <BaseDialog.Title className={styles.title}>{title}</BaseDialog.Title>}\n            {description && <BaseDialog.Description className={styles.description}>{description}</BaseDialog.Description>}\n            {dismissible && (\n              <BaseDialog.Close className={styles.close} aria-label=\"Close dialog\">\n                <XIcon />\n              </BaseDialog.Close>\n            )}\n            {children && <div className={styles.body}>{children}</div>}\n            {(footer || footerStart) && (\n              <div className={`${styles.footer} ${footerStart ? styles[\"footer-split\"] : \"\"}`}>\n                {footerStart && <div>{footerStart}</div>}\n                {footer && <div className={styles[\"footer-end\"]}>{footer}</div>}\n              </div>\n            )}\n          </BaseDialog.Popup>\n        </BaseDialog.Viewport>\n      </BaseDialog.Portal>\n    </BaseDialog.Root>\n  );\n}\nexport { styles as DialogStyles };\n"],"mappings":";;;;AAyBA,SAAS,QAAQ;AACf,QACE,oBAAC,OAAD;EAAK,OAAM;EAAK,QAAO;EAAK,SAAQ;EAAY,MAAK;YACnD,oBAAC,QAAD;GAAM,GAAE;GAAuB,QAAO;GAAe,aAAY;GAAM,eAAc;GAAU,CAAA;EAC3F,CAAA;;AAIV,SAAgBA,SAAO,EACrB,SACA,OACA,aACA,UACA,QACA,aACA,WACA,cAAc,MACd,cACA,GAAG,SACW;AACd,QACE,qBAACC,OAAW,MAAZ;EAA+B;EAAuB,GAAI;YAA1D,CACG,WAAW,oBAACA,OAAW,SAAZ,EAAoB,QAAQ,SAAW,CAAA,EACnD,qBAACA,OAAW,QAAZ,EAAA,UAAA,CACE,oBAACA,OAAW,UAAZ,EAAqB,WAAWC,sBAAO,UAAY,CAAA,EACnD,oBAACD,OAAW,UAAZ,EAAA,UACE,qBAACA,OAAW,OAAZ;GAAkB,WAAW,GAAGC,sBAAO,MAAM,GAAG,aAAa;aAA7D;IACG,SAAS,oBAACD,OAAW,OAAZ;KAAkB,WAAWC,sBAAO;eAAQ;KAAyB,CAAA;IAC9E,eAAe,oBAACD,OAAW,aAAZ;KAAwB,WAAWC,sBAAO;eAAc;KAAqC,CAAA;IAC5G,eACC,oBAACD,OAAW,OAAZ;KAAkB,WAAWC,sBAAO;KAAO,cAAW;eACpD,oBAAC,OAAD,EAAS,CAAA;KACQ,CAAA;IAEpB,YAAY,oBAAC,OAAD;KAAK,WAAWA,sBAAO;KAAO;KAAe,CAAA;KACxD,UAAU,gBACV,qBAAC,OAAD;KAAK,WAAW,GAAGA,sBAAO,OAAO,GAAG,cAAcA,sBAAO,kBAAkB;eAA3E,CACG,eAAe,oBAAC,OAAD,EAAA,UAAM,aAAkB,CAAA,EACvC,UAAU,oBAAC,OAAD;MAAK,WAAWA,sBAAO;gBAAgB;MAAa,CAAA,CAC3D;;IAES;MACC,CAAA,CACJ,EAAA,CAAA,CACJ"}

package/dist/dialog/dialog.module.js

@@ -5,6 +5,8 @@ var dialog_module_default = {
 	"close": "close_VsZA5W",
 	"description": "description_VsZA5W",
 	"footer": "footer_VsZA5W",
+	"footer-end": "footer-end_VsZA5W",
+	"footer-split": "footer-split_VsZA5W",
 	"header": "header_VsZA5W",
 	"popup": "popup_VsZA5W",
 	"title": "title_VsZA5W"

package/dist/dialog/dialog.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.module.js","names":[],"sources":["../../src/dialog/dialog.module.css"],"sourcesContent":["@layer theme, base, components, utilities;\n\n@layer components {\n  .backdrop {\n    position: fixed;\n    inset: 0;\n    background-color: rgba(0, 0, 0, 0.48);\n    z-index: var(--z-overlay);\n    transition: opacity var(--duration-slow) var(--easing-standard);\n  }\n\n  .backdrop[data-starting-style],\n  .backdrop[data-ending-style] {\n    opacity: 0;\n  }\n\n  .popup {\n    position: fixed;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    z-index: var(--z-modal);\n    background-color: var(--color-bg-elevated);\n    border: var(--border-width-base) solid var(--color-border-base);\n    border-radius: var(--radius-2xl);\n    box-shadow: var(--shadow-xl);\n    padding: var(--space-6);\n    width: min(480px, calc(100vw - var(--space-8)));\n    max-height: min(640px, calc(100vh - var(--space-8)));\n    display: flex;\n    flex-direction: column;\n    gap: var(--space-4);\n    outline: none;\n    overflow: hidden;\n\n    transition:\n      opacity 200ms var(--easing-ease-out),\n      transform 200ms var(--easing-spring);\n  }\n\n  .popup[data-starting-style] {\n    opacity: 0;\n    transform: translate(-50%, -48%) scale(0.96);\n  }\n\n  .popup[data-ending-style] {\n    opacity: 0;\n    transform: translate(-50%, -50%) scale(0.98);\n    transition:\n      opacity 150ms var(--easing-ease-in),\n      transform 150ms var(--easing-ease-in);\n  }\n\n  .header {\n    display: flex;\n    flex-direction: column;\n    gap: var(--space-1);\n  }\n\n  .title {\n    font-family: var(--font-mono);\n    font-size: var(--font-size-lg);\n    font-weight: var(--font-weight-semibold);\n    color: var(--color-text-primary);\n    line-height: var(--line-height-tight);\n    letter-spacing: var(--letter-spacing-tight);\n    padding-right: var(--space-6);\n  }\n\n  .description {\n    font-family: var(--font-mono);\n    font-size: var(--font-size-sm);\n    color: var(--color-text-secondary);\n    line-height: var(--line-height-relaxed);\n  }\n\n  .close {\n    position: absolute;\n    top: var(--space-4);\n    right: var(--space-4);\n    width: 24px;\n    height: 24px;\n    border-radius: var(--radius-sm);\n    border: none;\n    background: transparent;\n    color: var(--color-text-tertiary);\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    outline: none;\n    transition:\n      background-color var(--duration-fast) var(--easing-standard),\n      color var(--duration-fast) var(--easing-standard);\n  }\n\n  .close:hover {\n    background-color: var(--color-surface-hover);\n    color: var(--color-text-primary);\n  }\n\n  .close:focus-visible {\n    box-shadow: var(--shadow-focus);\n  }\n\n  .body {\n    flex: 1;\n    overflow-y: auto;\n    font-family: var(--font-mono);\n    font-size: var(--font-size-sm);\n    color: var(--color-text-secondary);\n    line-height: var(--line-height-relaxed);\n  }\n\n  .footer {\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    gap: var(--space-2);\n    padding-top: var(--space-2);\n    border-top: var(--border-width-base) solid var(--color-border-subtle);\n  }\n}\n"],"mappings":";AAgBA,IAAA,wBAAS;CAAA,YAAA;CAAA,QAAA;CAAA,SAAA;CAAA,eAAA;CAAA,UAAA;CAAA,UAAA;CAAA,SAAA;CAAA,SAAA;CAAA"}
+{"version":3,"file":"dialog.module.js","names":[],"sources":["../../src/dialog/dialog.module.css"],"sourcesContent":["@layer components {\n  .backdrop {\n    position: fixed;\n    inset: 0;\n    background-color: rgba(0, 0, 0, 0.48);\n    z-index: var(--z-overlay);\n    transition: opacity var(--duration-slow) var(--easing-standard);\n  }\n  .backdrop[data-starting-style],\n  .backdrop[data-ending-style] {\n    opacity: 0;\n  }\n  .popup {\n    position: fixed;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    z-index: var(--z-modal);\n    background-color: var(--color-elevated);\n    border: var(--border-width-base) solid var(--color-line);\n    border-radius: var(--radius-2xl);\n    box-shadow: var(--shadow-xl);\n    padding: var(--space-5) var(--space-6) var(--space-5);\n    width: min(440px, calc(100vw - var(--space-8)));\n    max-height: min(640px, calc(100vh - var(--space-8)));\n    display: flex;\n    flex-direction: column;\n    gap: var(--space-3);\n    outline: none;\n    overflow: hidden;\n    transition:\n      opacity 200ms var(--easing-ease-out),\n      transform 200ms var(--easing-spring);\n  }\n  .popup[data-starting-style] {\n    opacity: 0;\n    transform: translate(-50%, -48%) scale(0.96);\n  }\n  .popup[data-ending-style] {\n    opacity: 0;\n    transform: translate(-50%, -50%) scale(0.98);\n    transition:\n      opacity 150ms var(--easing-ease-in),\n      transform 150ms var(--easing-ease-in);\n  }\n  .header {\n    display: flex;\n    flex-direction: column;\n    gap: var(--space-2);\n    text-align: center;\n  }\n  .title {\n    font-family: var(--font-sans);\n    font-size: var(--font-size-lg);\n    font-weight: var(--font-weight-bold);\n    color: var(--color-primary);\n    line-height: var(--line-height-tight);\n    letter-spacing: var(--letter-spacing-tight);\n  }\n  .description {\n    font-family: var(--font-sans);\n    font-size: var(--font-size-md);\n    color: var(--color-secondary);\n    line-height: var(--line-height-relaxed);\n  }\n  .close {\n    position: absolute;\n    top: var(--space-4);\n    right: var(--space-4);\n    width: 24px;\n    height: 24px;\n    border-radius: var(--radius-sm);\n    border: none;\n    background: transparent;\n    color: var(--color-tertiary);\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    outline: none;\n    transition:\n      background-color var(--duration-fast) var(--easing-standard),\n      color var(--duration-fast) var(--easing-standard);\n  }\n  .close:hover {\n    background-color: var(--color-hover);\n    color: var(--color-primary);\n  }\n  .close:focus-visible {\n    box-shadow: var(--shadow-focus);\n  }\n  .body {\n    flex: 1;\n    overflow-y: auto;\n    font-family: var(--font-mono);\n    font-size: var(--font-size-sm);\n    color: var(--color-secondary);\n    line-height: var(--line-height-relaxed);\n  }\n  .footer {\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    gap: var(--space-2);\n    padding-top: var(--space-2);\n  }\n  /* When a footerStart slot is present, space-between pushes it left */\n  .footer-split {\n    justify-content: space-between;\n  }\n  .footer-end {\n    display: flex;\n    align-items: center;\n    gap: var(--space-2);\n  }\n}\n"],"mappings":";AAoBA,IAAA,wBAAW;CAAA,YAAc;CAAW,QAAA;CAAA,SAAA;CAAA,eAAA;CAAA,UAAA;CAAA,cAAA;CAAA,gBAAA;CAAA,UAAA;CAAA,SAAA;CAAA,SAAA;CAAA"}

package/dist/dialog/parts.js

@@ -1,6 +1,6 @@
 import dialog_module_default from "./dialog.module.js";
-import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
 import { Dialog } from "@base-ui/react/dialog";
 //#region src/dialog/parts.tsx
 /**

package/dist/drawer/drawer.css

@@ -1,5 +1,3 @@
-@layer theme, base;
-
 @layer components {
   .backdrop_JNKGQq {
     --backdrop-opacity: .48;
@@ -73,8 +71,8 @@
 
   .popup_JNKGQq {
     box-sizing: border-box;
-    background-color: var(--color-bg-elevated);
-    border: var(--border-width-base) solid var(--color-border-base);
+    background-color: var(--color-elevated);
+    border: var(--border-width-base) solid var(--color-line);
     overscroll-behavior: contain;
     touch-action: auto;
     will-change: transform;
@@ -176,7 +174,7 @@
   }
 
   .handle-bar_JNKGQq {
-    background-color: var(--color-border-strong);
+    background-color: var(--color-line-strong);
     width: 2.5rem;
     height: 4px;
     margin: 0 auto var(--space-4);
@@ -200,7 +198,7 @@
     font-family: var(--font-mono);
     font-size: var(--font-size-lg);
     font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    color: var(--color-primary);
     line-height: var(--line-height-tight);
     letter-spacing: var(--letter-spacing-tight);
     padding-right: var(--space-6);
@@ -210,7 +208,7 @@
   .description_JNKGQq {
     font-family: var(--font-mono);
     font-size: var(--font-size-sm);
-    color: var(--color-text-secondary);
+    color: var(--color-secondary);
     line-height: var(--line-height-relaxed);
     margin: 0;
   }
@@ -221,7 +219,7 @@
     border-radius: var(--radius-sm);
     width: 24px;
     height: 24px;
-    color: var(--color-text-tertiary);
+    color: var(--color-tertiary);
     cursor: pointer;
     transition: background-color var(--duration-fast) var(--easing-standard),
       color var(--duration-fast) var(--easing-standard);
@@ -235,8 +233,8 @@
   }
 
   .close_JNKGQq:hover {
-    background-color: var(--color-surface-hover);
-    color: var(--color-text-primary);
+    background-color: var(--color-hover);
+    color: var(--color-primary);
   }
 
   .close_JNKGQq:focus-visible {
@@ -248,10 +246,8 @@
     align-items: center;
     gap: var(--space-2);
     padding-top: var(--space-4);
-    border-top: var(--border-width-base) solid var(--color-border-subtle);
+    border-top: var(--border-width-base) solid var(--color-line-subtle);
     margin-top: auto;
     display: flex;
   }
 }
-
-@layer utilities;

package/dist/drawer/drawer.d.ts

@@ -1,5 +1,5 @@
-import { ReactElement, ReactNode } from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { ReactElement, ReactNode } from "react";
 import styles from "./drawer.module.css";
 
 //#region src/drawer/drawer.d.ts

package/dist/drawer/drawer.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"drawer.module.js","names":[],"sources":["../../src/drawer/drawer.module.css"],"sourcesContent":["@layer theme, base, components, utilities;\n\n@layer components {\n  /* ── Backdrop ──────────────────────────────────────────────────── */\n\n  .backdrop {\n    --backdrop-opacity: 0.48;\n    position: fixed;\n    inset: 0;\n    min-height: 100dvh;\n    background-color: black;\n    opacity: calc(var(--backdrop-opacity) * (1 - var(--drawer-swipe-progress)));\n    z-index: var(--z-overlay);\n\n    transition-property: opacity;\n    transition-duration: 450ms;\n    transition-timing-function: cubic-bezier(0.32, 0.72, 0, 1);\n\n    /* iOS 26+: cover the full visual viewport even when scrolled */\n    @supports (-webkit-touch-callout: none) {\n      position: absolute;\n    }\n  }\n\n  .backdrop[data-starting-style],\n  .backdrop[data-ending-style] {\n    opacity: 0;\n  }\n\n  .backdrop[data-swiping] {\n    transition-duration: 0ms;\n  }\n\n  .backdrop[data-ending-style] {\n    transition-duration: calc(var(--drawer-swipe-strength) * 400ms);\n  }\n\n  /* ── Viewport ──────────────────────────────────────────────────── */\n\n  .viewport {\n    position: fixed;\n    inset: 0;\n    z-index: var(--z-modal);\n    display: flex;\n  }\n\n  /* side drawers sit against their respective edge */\n  .viewport[data-side=\"left\"] {\n    justify-content: flex-start;\n    align-items: stretch;\n  }\n  .viewport[data-side=\"right\"] {\n    justify-content: flex-end;\n    align-items: stretch;\n  }\n  .viewport[data-side=\"bottom\"] {\n    align-items: flex-end;\n    justify-content: center;\n  }\n  .viewport[data-side=\"top\"] {\n    align-items: flex-start;\n    justify-content: center;\n  }\n\n  /* iOS rounded inset padding */\n  @supports (-webkit-touch-callout: none) {\n    .viewport[data-side=\"left\"],\n    .viewport[data-side=\"right\"] {\n      padding: 0.625rem;\n    }\n\n    .viewport[data-side=\"bottom\"] {\n      padding: 0 0.625rem 0.625rem;\n    }\n\n    .viewport[data-side=\"top\"] {\n      padding: 0.625rem 0.625rem 0;\n    }\n  }\n\n  /* ── Popup — shared ────────────────────────────────────────────── */\n\n  .popup {\n    box-sizing: border-box;\n    background-color: var(--color-bg-elevated);\n    border: var(--border-width-base) solid var(--color-border-base);\n    outline: none;\n    overflow-y: auto;\n    overscroll-behavior: contain;\n    touch-action: auto;\n    will-change: transform;\n    transition-timing-function: cubic-bezier(0.32, 0.72, 0, 1);\n    transition-duration: 450ms;\n  }\n\n  .popup[data-swiping] {\n    user-select: none;\n    transition-duration: 0ms;\n  }\n\n  .popup[data-ending-style] {\n    transition-duration: calc(var(--drawer-swipe-strength) * 400ms);\n  }\n\n  /* ── Popup — right side (default) ─────────────────────────────── */\n\n  .popup-right {\n    --bleed: 3rem;\n    height: 100%;\n    width: calc(var(--drawer-width, 20rem) + var(--bleed));\n    max-width: calc(100vw - 3rem + var(--bleed));\n    padding: var(--space-6);\n    padding-right: calc(var(--space-6) + var(--bleed));\n    margin-right: calc(-1 * var(--bleed));\n    transform: translateX(var(--drawer-swipe-movement-x));\n    transition-property: transform;\n\n    @supports (-webkit-touch-callout: none) {\n      --bleed: 0px;\n      margin-right: 0;\n      border-radius: var(--radius-xl);\n    }\n  }\n\n  .popup-right[data-starting-style],\n  .popup-right[data-ending-style] {\n    transform: translateX(calc(100% - var(--bleed) + 2px));\n  }\n\n  /* ── Popup — left side ─────────────────────────────────────────── */\n\n  .popup-left {\n    --bleed: 3rem;\n    height: 100%;\n    width: calc(var(--drawer-width, 20rem) + var(--bleed));\n    max-width: calc(100vw - 3rem + var(--bleed));\n    padding: var(--space-6);\n    padding-left: calc(var(--space-6) + var(--bleed));\n    margin-left: calc(-1 * var(--bleed));\n    transform: translateX(var(--drawer-swipe-movement-x));\n    transition-property: transform;\n\n    @supports (-webkit-touch-callout: none) {\n      --bleed: 0px;\n      margin-left: 0;\n      border-radius: var(--radius-xl);\n    }\n  }\n\n  .popup-left[data-starting-style],\n  .popup-left[data-ending-style] {\n    transform: translateX(calc(-100% + var(--bleed) - 2px));\n  }\n\n  /* ── Popup — bottom ────────────────────────────────────────────── */\n\n  .popup-bottom {\n    width: 100%;\n    max-width: var(--drawer-max-width, 480px);\n    max-height: 90dvh;\n    padding: var(--space-5) var(--space-5) calc(var(--space-5) + env(safe-area-inset-bottom, 0px));\n    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;\n    border-bottom: none;\n    transform: translateY(var(--drawer-swipe-movement-y));\n    transition-property: transform;\n\n    @supports (-webkit-touch-callout: none) {\n      border-radius: var(--radius-2xl);\n    }\n  }\n\n  .popup-bottom[data-starting-style],\n  .popup-bottom[data-ending-style] {\n    transform: translateY(calc(100% + 2px));\n  }\n\n  /* ── Popup — top ───────────────────────────────────────────────── */\n\n  .popup-top {\n    width: 100%;\n    max-width: var(--drawer-max-width, 480px);\n    max-height: 90dvh;\n    padding: calc(var(--space-5) + env(safe-area-inset-top, 0px)) var(--space-5) var(--space-5);\n    border-radius: 0 0 var(--radius-2xl) var(--radius-2xl);\n    border-top: none;\n    transform: translateY(var(--drawer-swipe-movement-y));\n    transition-property: transform;\n\n    @supports (-webkit-touch-callout: none) {\n      border-radius: var(--radius-2xl);\n    }\n  }\n\n  .popup-top[data-starting-style],\n  .popup-top[data-ending-style] {\n    transform: translateY(calc(-100% - 2px));\n  }\n\n  /* ── Handle bar (bottom/top drawers) ───────────────────────────── */\n\n  .handle-bar {\n    width: 2.5rem;\n    height: 4px;\n    border-radius: 9999px;\n    background-color: var(--color-border-strong);\n    margin: 0 auto var(--space-4);\n    flex-shrink: 0;\n  }\n\n  .popup-top .handle-bar {\n    margin: var(--space-4) auto 0;\n    order: 1; /* push to bottom in top drawer */\n  }\n\n  /* ── Content ───────────────────────────────────────────────────── */\n\n  .content {\n    display: flex;\n    flex-direction: column;\n    gap: var(--space-4);\n    height: 100%;\n  }\n\n  /* ── Title ─────────────────────────────────────────────────────── */\n\n  .title {\n    font-family: var(--font-mono);\n    font-size: var(--font-size-lg);\n    font-weight: var(--font-weight-semibold);\n    color: var(--color-text-primary);\n    line-height: var(--line-height-tight);\n    letter-spacing: var(--letter-spacing-tight);\n    margin: 0;\n    padding-right: var(--space-6);\n  }\n\n  /* ── Description ───────────────────────────────────────────────── */\n\n  .description {\n    font-family: var(--font-mono);\n    font-size: var(--font-size-sm);\n    color: var(--color-text-secondary);\n    line-height: var(--line-height-relaxed);\n    margin: 0;\n  }\n\n  /* ── Close button ──────────────────────────────────────────────── */\n\n  .close {\n    position: absolute;\n    top: var(--space-4);\n    right: var(--space-4);\n    width: 24px;\n    height: 24px;\n    border-radius: var(--radius-sm);\n    border: none;\n    background: transparent;\n    color: var(--color-text-tertiary);\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    outline: none;\n    transition:\n      background-color var(--duration-fast) var(--easing-standard),\n      color var(--duration-fast) var(--easing-standard);\n  }\n\n  .close:hover {\n    background-color: var(--color-surface-hover);\n    color: var(--color-text-primary);\n  }\n\n  .close:focus-visible {\n    box-shadow: var(--shadow-focus);\n  }\n\n  /* ── Footer ────────────────────────────────────────────────────── */\n\n  .footer {\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    gap: var(--space-2);\n    padding-top: var(--space-4);\n    margin-top: auto;\n    border-top: var(--border-width-base) solid var(--color-border-subtle);\n  }\n}\n"],"mappings":";AA0BA,IAAA,wBAAc;CAAA,YAAA;CAAA,SAAA;CAAA,WAAA;CAAA,eAAA;CAAA,UAAA;CAAA,cAAA;CAAA,SAAA;CAAA,gBAAA;CAAA,cAAA;CAAA,eAAA;CAAA,aAAA;CAAA,SAAA;CAAA,YAAA;CAAA"}
+{"version":3,"file":"drawer.module.js","names":[],"sources":["../../src/drawer/drawer.module.css"],"sourcesContent":["@layer components {\n  /* ── Backdrop ──────────────────────────────────────────────────── */\n  .backdrop {\n    --backdrop-opacity: 0.48;\n    position: fixed;\n    inset: 0;\n    min-height: 100dvh;\n    background-color: black;\n    opacity: calc(var(--backdrop-opacity) * (1 - var(--drawer-swipe-progress)));\n    z-index: var(--z-overlay);\n    transition-property: opacity;\n    transition-duration: 450ms;\n    transition-timing-function: cubic-bezier(0.32, 0.72, 0, 1);\n    /* iOS 26+: cover the full visual viewport even when scrolled */\n    @supports (-webkit-touch-callout: none) {\n      position: absolute;\n    }\n  }\n  .backdrop[data-starting-style],\n  .backdrop[data-ending-style] {\n    opacity: 0;\n  }\n  .backdrop[data-swiping] {\n    transition-duration: 0ms;\n  }\n  .backdrop[data-ending-style] {\n    transition-duration: calc(var(--drawer-swipe-strength) * 400ms);\n  }\n  /* ── Viewport ──────────────────────────────────────────────────── */\n  .viewport {\n    position: fixed;\n    inset: 0;\n    z-index: var(--z-modal);\n    display: flex;\n  }\n  /* side drawers sit against their respective edge */\n  .viewport[data-side=\"left\"] {\n    justify-content: flex-start;\n    align-items: stretch;\n  }\n  .viewport[data-side=\"right\"] {\n    justify-content: flex-end;\n    align-items: stretch;\n  }\n  .viewport[data-side=\"bottom\"] {\n    align-items: flex-end;\n    justify-content: center;\n  }\n  .viewport[data-side=\"top\"] {\n    align-items: flex-start;\n    justify-content: center;\n  }\n  /* iOS rounded inset padding */\n  @supports (-webkit-touch-callout: none) {\n    .viewport[data-side=\"left\"],\n    .viewport[data-side=\"right\"] {\n      padding: 0.625rem;\n    }\n    .viewport[data-side=\"bottom\"] {\n      padding: 0 0.625rem 0.625rem;\n    }\n    .viewport[data-side=\"top\"] {\n      padding: 0.625rem 0.625rem 0;\n    }\n  }\n  /* ── Popup — shared ────────────────────────────────────────────── */\n  .popup {\n    box-sizing: border-box;\n    background-color: var(--color-elevated);\n    border: var(--border-width-base) solid var(--color-line);\n    outline: none;\n    overflow-y: auto;\n    overscroll-behavior: contain;\n    touch-action: auto;\n    will-change: transform;\n    transition-timing-function: cubic-bezier(0.32, 0.72, 0, 1);\n    transition-duration: 450ms;\n  }\n  .popup[data-swiping] {\n    user-select: none;\n    transition-duration: 0ms;\n  }\n  .popup[data-ending-style] {\n    transition-duration: calc(var(--drawer-swipe-strength) * 400ms);\n  }\n  /* ── Popup — right side (default) ─────────────────────────────── */\n  .popup-right {\n    --bleed: 3rem;\n    height: 100%;\n    width: calc(var(--drawer-width, 20rem) + var(--bleed));\n    max-width: calc(100vw - 3rem + var(--bleed));\n    padding: var(--space-6);\n    padding-right: calc(var(--space-6) + var(--bleed));\n    margin-right: calc(-1 * var(--bleed));\n    transform: translateX(var(--drawer-swipe-movement-x));\n    transition-property: transform;\n    @supports (-webkit-touch-callout: none) {\n      --bleed: 0px;\n      margin-right: 0;\n      border-radius: var(--radius-xl);\n    }\n  }\n  .popup-right[data-starting-style],\n  .popup-right[data-ending-style] {\n    transform: translateX(calc(100% - var(--bleed) + 2px));\n  }\n  /* ── Popup — left side ─────────────────────────────────────────── */\n  .popup-left {\n    --bleed: 3rem;\n    height: 100%;\n    width: calc(var(--drawer-width, 20rem) + var(--bleed));\n    max-width: calc(100vw - 3rem + var(--bleed));\n    padding: var(--space-6);\n    padding-left: calc(var(--space-6) + var(--bleed));\n    margin-left: calc(-1 * var(--bleed));\n    transform: translateX(var(--drawer-swipe-movement-x));\n    transition-property: transform;\n    @supports (-webkit-touch-callout: none) {\n      --bleed: 0px;\n      margin-left: 0;\n      border-radius: var(--radius-xl);\n    }\n  }\n  .popup-left[data-starting-style],\n  .popup-left[data-ending-style] {\n    transform: translateX(calc(-100% + var(--bleed) - 2px));\n  }\n  /* ── Popup — bottom ────────────────────────────────────────────── */\n  .popup-bottom {\n    width: 100%;\n    max-width: var(--drawer-max-width, 480px);\n    max-height: 90dvh;\n    padding: var(--space-5) var(--space-5) calc(var(--space-5) + env(safe-area-inset-bottom, 0px));\n    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;\n    border-bottom: none;\n    transform: translateY(var(--drawer-swipe-movement-y));\n    transition-property: transform;\n    @supports (-webkit-touch-callout: none) {\n      border-radius: var(--radius-2xl);\n    }\n  }\n  .popup-bottom[data-starting-style],\n  .popup-bottom[data-ending-style] {\n    transform: translateY(calc(100% + 2px));\n  }\n  /* ── Popup — top ───────────────────────────────────────────────── */\n  .popup-top {\n    width: 100%;\n    max-width: var(--drawer-max-width, 480px);\n    max-height: 90dvh;\n    padding: calc(var(--space-5) + env(safe-area-inset-top, 0px)) var(--space-5) var(--space-5);\n    border-radius: 0 0 var(--radius-2xl) var(--radius-2xl);\n    border-top: none;\n    transform: translateY(var(--drawer-swipe-movement-y));\n    transition-property: transform;\n    @supports (-webkit-touch-callout: none) {\n      border-radius: var(--radius-2xl);\n    }\n  }\n  .popup-top[data-starting-style],\n  .popup-top[data-ending-style] {\n    transform: translateY(calc(-100% - 2px));\n  }\n  /* ── Handle bar (bottom/top drawers) ───────────────────────────── */\n  .handle-bar {\n    width: 2.5rem;\n    height: 4px;\n    border-radius: 9999px;\n    background-color: var(--color-line-strong);\n    margin: 0 auto var(--space-4);\n    flex-shrink: 0;\n  }\n  .popup-top .handle-bar {\n    margin: var(--space-4) auto 0;\n    order: 1; /* push to bottom in top drawer */\n  }\n  /* ── Content ───────────────────────────────────────────────────── */\n  .content {\n    display: flex;\n    flex-direction: column;\n    gap: var(--space-4);\n    height: 100%;\n  }\n  /* ── Title ─────────────────────────────────────────────────────── */\n  .title {\n    font-family: var(--font-mono);\n    font-size: var(--font-size-lg);\n    font-weight: var(--font-weight-semibold);\n    color: var(--color-primary);\n    line-height: var(--line-height-tight);\n    letter-spacing: var(--letter-spacing-tight);\n    margin: 0;\n    padding-right: var(--space-6);\n  }\n  /* ── Description ───────────────────────────────────────────────── */\n  .description {\n    font-family: var(--font-mono);\n    font-size: var(--font-size-sm);\n    color: var(--color-secondary);\n    line-height: var(--line-height-relaxed);\n    margin: 0;\n  }\n  /* ── Close button ──────────────────────────────────────────────── */\n  .close {\n    position: absolute;\n    top: var(--space-4);\n    right: var(--space-4);\n    width: 24px;\n    height: 24px;\n    border-radius: var(--radius-sm);\n    border: none;\n    background: transparent;\n    color: var(--color-tertiary);\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    outline: none;\n    transition:\n      background-color var(--duration-fast) var(--easing-standard),\n      color var(--duration-fast) var(--easing-standard);\n  }\n  .close:hover {\n    background-color: var(--color-hover);\n    color: var(--color-primary);\n  }\n  .close:focus-visible {\n    box-shadow: var(--shadow-focus);\n  }\n  /* ── Footer ────────────────────────────────────────────────────── */\n  .footer {\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    gap: var(--space-2);\n    padding-top: var(--space-4);\n    margin-top: auto;\n    border-top: var(--border-width-base) solid var(--color-line-subtle);\n  }\n}\n"],"mappings":";AA0BA,IAAA,wBAAe;CAAA,YAAU;CAAkB,SAAM;CAAkB,WAAA;CAAA,eAAA;CAAA,UAAA;CAAA,cAAA;CAAA,SAAA;CAAA,gBAAA;CAAA,cAAA;CAAA,eAAA;CAAA,aAAA;CAAA,SAAA;CAAA,YAAA;CAAA"}

package/dist/drawer/parts.d.ts

@@ -1,7 +1,7 @@
 import { DrawerSide } from "./drawer.js";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 import * as react from "react";
 import { ComponentPropsWithoutRef } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { Drawer } from "@base-ui/react/drawer";
 
 //#region src/drawer/parts.d.ts

package/dist/drawer/parts.js

@@ -1,6 +1,6 @@
 import drawer_module_default from "./drawer.module.js";
-import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
 import { Drawer } from "@base-ui/react/drawer";
 //#region src/drawer/parts.tsx
 /**