@photon-ai/pho-ui 0.7.1 → 1.0.0

package/dist/components/toggle.js

@@ -1,8 +1,8 @@
 "use client";
-import { t } from "../chunks/cn-7uGUzCOM.js";
-import { t as i } from "../chunks/resolve-variant-CcD8iG5l.js";
+import { t as i } from "../chunks/cn-DTiB6ek_.js";
+import { t as r } from "../chunks/resolve-variant-CcD8iG5l.js";
 import "react";
-import { jsx as r } from "react/jsx-runtime";
+import { jsx as t } from "react/jsx-runtime";
 import { Toggle as a } from "@base-ui/react/toggle";
 var l = {
   sm: {
@@ -19,8 +19,8 @@ var l = {
   }
 };
 function n({ className: e, size: s = "md", ...o }) {
-  return /* @__PURE__ */ r(a, {
-    className: t("squircle outline-pho-brand text-pho-tertiary inline-flex cursor-pointer items-center justify-center rounded-lg transition duration-100 ease-linear focus-visible:outline-2 focus-visible:outline-offset-2", "hover:bg-pho-ghost-hover hover:text-pho-tertiary-hover", "data-[pressed]:bg-pho-inverse data-[pressed]:text-pho-inverse", "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50", i(l, s), e),
+  return /* @__PURE__ */ t(a, {
+    className: i("squircle outline-pho-brand text-pho-secondary rounded-base inline-flex cursor-pointer items-center justify-center transition duration-100 ease-linear focus-visible:outline-2 focus-visible:outline-offset-2", "hover:bg-pho-ghost-hover hover:text-pho-secondary-hover", "data-[pressed]:bg-pho-inverse data-[pressed]:text-pho-inverse", "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50", r(l, s), e),
     ...o
   });
 }

package/dist/components/toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggle.js","names":[],"sources":["../../src/components/toggle/toggle.tsx"],"sourcesContent":["import { type ComponentProps } from \"react\";\nimport { Toggle as BaseToggle } from \"@base-ui/react/toggle\";\nimport { cn } from \"../../utils/cn\";\nimport { resolveVariant, type VariantMap } from \"../../utils/resolve-variant\";\n\n/** Size axis — three square icon sizes. `md` is default. */\nexport const TOGGLE_SIZES = {\n  sm: {\n    classes: \"size-8 [&>svg]:size-4\",\n    description: \"Small — dense toolbars\",\n  },\n  md: { classes: \"size-9 [&>svg]:size-5\", description: \"Medium — the default\" },\n  lg: { classes: \"size-10 [&>svg]:size-5\", description: \"Large\" },\n} satisfies VariantMap;\n\nexport type ToggleSize = keyof typeof TOGGLE_SIZES;\n\nexport interface ToggleProps extends Omit<\n  ComponentProps<typeof BaseToggle>,\n  \"className\"\n> {\n  className?: string;\n  /** Size variant. @default \"md\" */\n  size?: ToggleSize;\n}\n\n/**\n * A two-state button (pressed / not pressed) built on Base UI `Toggle` — the\n * canonical Bold/Italic toolbar control. Controlled via `pressed` /\n * `onPressedChange` or uncontrolled via `defaultPressed`. For a set of related\n * toggles, use `ToggleGroup`.\n */\nexport function Toggle({ className, size = \"md\", ...props }: ToggleProps) {\n  return (\n    <BaseToggle\n      className={cn(\n        \"squircle outline-pho-brand text-pho-tertiary inline-flex cursor-pointer items-center justify-center rounded-lg transition duration-100 ease-linear focus-visible:outline-2 focus-visible:outline-offset-2\",\n        // Ghost control at rest — hover is the alpha wash (Button `tertiary`\n        // idiom), not the card-surface hover token.\n        \"hover:bg-pho-ghost-hover hover:text-pho-tertiary-hover\",\n        // Pressed = the site's inverted chip (Tab active): dark chip in light\n        // mode, light chip in dark mode — visible on any surface.\n        \"data-[pressed]:bg-pho-inverse data-[pressed]:text-pho-inverse\",\n        \"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50\",\n        resolveVariant(TOGGLE_SIZES, size),\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nToggle.displayName = \"Toggle\";\n"],"mappings":";;;;;;AAMA,IAAa,IAAe;AAAA,EAC1B,IAAI;AAAA,IACF,SAAS;AAAA,IACT,aAAa;AAAA,EACf;AAAA,EACA,IAAI;AAAA,IAAE,SAAS;AAAA,IAAyB,aAAa;AAAA,EAAuB;AAAA,EAC5E,IAAI;AAAA,IAAE,SAAS;AAAA,IAA0B,aAAa;AAAA,EAAQ;AAChE;AAmBA,SAAgB,EAAO,EAAE,WAAA,GAAW,MAAA,IAAO,MAAM,GAAG,EAAA,GAAsB;AACxE,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,WAAW,EACT,6MAGA,0DAGA,iEACA,iEACA,EAAe,GAAc,CAAI,GACjC,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,EAAO,cAAc"}
+{"version":3,"file":"toggle.js","names":[],"sources":["../../src/components/toggle/toggle.tsx"],"sourcesContent":["import { type ComponentProps } from \"react\";\nimport { Toggle as BaseToggle } from \"@base-ui/react/toggle\";\nimport { cn } from \"../../utils/cn\";\nimport { resolveVariant, type VariantMap } from \"../../utils/resolve-variant\";\n\n/** Size axis — three square icon sizes. `md` is default. */\nexport const TOGGLE_SIZES = {\n  sm: {\n    classes: \"size-8 [&>svg]:size-4\",\n    description: \"Small — dense toolbars\",\n  },\n  md: { classes: \"size-9 [&>svg]:size-5\", description: \"Medium — the default\" },\n  lg: { classes: \"size-10 [&>svg]:size-5\", description: \"Large\" },\n} satisfies VariantMap;\n\nexport type ToggleSize = keyof typeof TOGGLE_SIZES;\n\nexport interface ToggleProps extends Omit<\n  ComponentProps<typeof BaseToggle>,\n  \"className\"\n> {\n  className?: string;\n  /** Size variant. @default \"md\" */\n  size?: ToggleSize;\n}\n\n/**\n * A two-state button (pressed / not pressed) built on Base UI `Toggle` — the\n * canonical Bold/Italic toolbar control. Controlled via `pressed` /\n * `onPressedChange` or uncontrolled via `defaultPressed`. For a set of related\n * toggles, use `ToggleGroup`.\n */\nexport function Toggle({ className, size = \"md\", ...props }: ToggleProps) {\n  return (\n    <BaseToggle\n      className={cn(\n        \"squircle outline-pho-brand text-pho-secondary rounded-base inline-flex cursor-pointer items-center justify-center transition duration-100 ease-linear focus-visible:outline-2 focus-visible:outline-offset-2\",\n        // Ghost control at rest — hover is the alpha wash (Button `tertiary`\n        // idiom), not the card-surface hover token.\n        \"hover:bg-pho-ghost-hover hover:text-pho-secondary-hover\",\n        // Pressed = the site's inverted chip (Tab active): dark chip in light\n        // mode, light chip in dark mode — visible on any surface.\n        \"data-[pressed]:bg-pho-inverse data-[pressed]:text-pho-inverse\",\n        \"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50\",\n        resolveVariant(TOGGLE_SIZES, size),\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nToggle.displayName = \"Toggle\";\n"],"mappings":";;;;;;AAMA,IAAa,IAAe;AAAA,EAC1B,IAAI;AAAA,IACF,SAAS;AAAA,IACT,aAAa;AAAA,EACf;AAAA,EACA,IAAI;AAAA,IAAE,SAAS;AAAA,IAAyB,aAAa;AAAA,EAAuB;AAAA,EAC5E,IAAI;AAAA,IAAE,SAAS;AAAA,IAA0B,aAAa;AAAA,EAAQ;AAChE;AAmBA,SAAgB,EAAO,EAAE,WAAA,GAAW,MAAA,IAAO,MAAM,GAAG,EAAA,GAAsB;AACxE,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,WAAW,EACT,gNAGA,2DAGA,iEACA,iEACA,EAAe,GAAc,CAAI,GACjC,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,EAAO,cAAc"}

package/dist/components/toolbar.js

@@ -1,15 +1,15 @@
 "use client";
-import { t as o } from "../chunks/cn-7uGUzCOM.js";
+import { t as o } from "../chunks/cn-DTiB6ek_.js";
 import "react";
 import { jsx as t } from "react/jsx-runtime";
 import { Toolbar as n } from "@base-ui/react/toolbar";
 function i({ className: e, ...r }) {
   return /* @__PURE__ */ t(n.Root, {
-    className: o("squircle border-pho-secondary bg-pho-primary flex items-center gap-1 rounded-lg border p-1", e),
+    className: o("border-pho-secondary bg-pho-primary rounded-base flex items-center gap-1 border p-1", e),
     ...r
   });
 }
-var a = "inline-flex items-center justify-center gap-1.5 rounded-md px-2 py-1.5 text-sm font-medium text-pho-tertiary outline-pho-brand transition duration-100 ease-linear hover:bg-pho-ghost-hover hover:text-pho-primary focus-visible:outline-2 focus-visible:-outline-offset-1 data-[pressed]:bg-pho-tertiary data-[pressed]:text-pho-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4";
+var a = "inline-flex items-center justify-center gap-1.5 rounded-sm px-2 py-1.5 text-base font-medium text-pho-secondary outline-pho-brand transition duration-100 ease-linear hover:bg-pho-ghost-hover hover:text-pho-primary focus-visible:outline-2 focus-visible:-outline-offset-1 data-[pressed]:bg-pho-secondary data-[pressed]:text-pho-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4";
 function s({ className: e, ...r }) {
   return /* @__PURE__ */ t(n.Button, {
     className: o(a, e),
@@ -28,9 +28,9 @@ function u({ className: e, ...r }) {
     ...r
   });
 }
-function l({ className: e, ...r }) {
+function d({ className: e, ...r }) {
   return /* @__PURE__ */ t(n.Input, {
-    className: o("bg-pho-primary ring-pho-primary text-pho-primary placeholder:text-pho-placeholder focus-visible:ring-pho-brand rounded-md px-2 py-1 text-sm ring-1 outline-none ring-inset focus-visible:ring-2", e),
+    className: o("bg-pho-primary ring-pho-primary text-pho-primary placeholder:text-pho-placeholder focus-visible:ring-pho-brand text-md rounded-sm px-2 py-1 ring-1 outline-none ring-inset focus-visible:ring-2 md:text-base", e),
     ...r
   });
 }
@@ -40,16 +40,16 @@ function c({ className: e, ...r }) {
     ...r
   });
 }
-var b = {
+var f = {
   Root: i,
   Button: s,
   Link: p,
   Group: u,
-  Input: l,
+  Input: d,
   Separator: c
 };
 export {
-  b as Toolbar
+  f as Toolbar
 };
 
 //# sourceMappingURL=toolbar.js.map

package/dist/components/toolbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"toolbar.js","names":[],"sources":["../../src/components/toolbar/toolbar.tsx"],"sourcesContent":["import { type ComponentProps, type ElementType } from \"react\";\nimport { Toolbar as BaseToolbar } from \"@base-ui/react/toolbar\";\nimport { cn } from \"../../utils/cn\";\n\n/** Override Base UI's `string | (state) => string` className with plain string. */\ntype StyledProps<T extends ElementType> = Omit<\n  ComponentProps<T>,\n  \"className\"\n> & {\n  className?: string;\n};\n\nfunction Root({ className, ...props }: StyledProps<typeof BaseToolbar.Root>) {\n  return (\n    <BaseToolbar.Root\n      className={cn(\n        // Flat card treatment — the hairline border carries the edge; shadows\n        // are reserved for floating layers (menus/popovers/dialogs).\n        \"squircle border-pho-secondary bg-pho-primary flex items-center gap-1 rounded-lg border p-1\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n// Ghost-button idiom: quiet Font/5% hover wash; pressed steps up to the\n// tertiary surface so it stays distinct from hover in both modes.\nconst TOOLBAR_BUTTON =\n  \"inline-flex items-center justify-center gap-1.5 rounded-md px-2 py-1.5 text-sm font-medium text-pho-tertiary outline-pho-brand transition duration-100 ease-linear hover:bg-pho-ghost-hover hover:text-pho-primary focus-visible:outline-2 focus-visible:-outline-offset-1 data-[pressed]:bg-pho-tertiary data-[pressed]:text-pho-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4\";\n\nfunction Button({\n  className,\n  ...props\n}: StyledProps<typeof BaseToolbar.Button>) {\n  return (\n    <BaseToolbar.Button className={cn(TOOLBAR_BUTTON, className)} {...props} />\n  );\n}\n\nfunction Link({ className, ...props }: StyledProps<typeof BaseToolbar.Link>) {\n  return (\n    <BaseToolbar.Link className={cn(TOOLBAR_BUTTON, className)} {...props} />\n  );\n}\n\nfunction Group({ className, ...props }: StyledProps<typeof BaseToolbar.Group>) {\n  return (\n    <BaseToolbar.Group\n      className={cn(\"flex items-center gap-1\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction Input({ className, ...props }: StyledProps<typeof BaseToolbar.Input>) {\n  return (\n    <BaseToolbar.Input\n      className={cn(\n        \"bg-pho-primary ring-pho-primary text-pho-primary placeholder:text-pho-placeholder focus-visible:ring-pho-brand rounded-md px-2 py-1 text-sm ring-1 outline-none ring-inset focus-visible:ring-2\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction Separator({\n  className,\n  ...props\n}: StyledProps<typeof BaseToolbar.Separator>) {\n  return (\n    <BaseToolbar.Separator\n      className={cn(\n        \"mx-1 h-5 w-px bg-[var(--border-color-pho-secondary)]\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Toolbar built on Base UI `Toolbar` — a single tab stop grouping related\n * controls with arrow-key navigation between them (formatting bars, editor\n * controls). Holds `Toolbar.Button`, `Link`, `Input`, and `Separator`; for\n * pressable formatting buttons, wrap `Toggle` / `ToggleGroup` with\n * `Toolbar.Button render={…}`.\n */\nexport const Toolbar = { Root, Button, Link, Group, Input, Separator };\n"],"mappings":";;;;;AAYA,SAAS,EAAK,EAAE,WAAA,GAAW,GAAG,EAAA,GAA+C;AAC3E,SACE,gBAAA,EAAC,EAAY,MAAb;AAAA,IACE,WAAW,EAGT,8FACA,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AAIA,IAAM,IACJ;AAEF,SAAS,EAAO,EACd,WAAA,GACA,GAAG,EAAA,GACsC;AACzC,SACE,gBAAA,EAAC,EAAY,QAAb;AAAA,IAAoB,WAAW,EAAG,GAAgB,CAAS;AAAA,IAAG,GAAI;AAAA,EAAQ,CAAA;AAE9E;AAEA,SAAS,EAAK,EAAE,WAAA,GAAW,GAAG,EAAA,GAA+C;AAC3E,SACE,gBAAA,EAAC,EAAY,MAAb;AAAA,IAAkB,WAAW,EAAG,GAAgB,CAAS;AAAA,IAAG,GAAI;AAAA,EAAQ,CAAA;AAE5E;AAEA,SAAS,EAAM,EAAE,WAAA,GAAW,GAAG,EAAA,GAAgD;AAC7E,SACE,gBAAA,EAAC,EAAY,OAAb;AAAA,IACE,WAAW,EAAG,2BAA2B,CAAS;AAAA,IAClD,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAM,EAAE,WAAA,GAAW,GAAG,EAAA,GAAgD;AAC7E,SACE,gBAAA,EAAC,EAAY,OAAb;AAAA,IACE,WAAW,EACT,mMACA,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAU,EACjB,WAAA,GACA,GAAG,EAAA,GACyC;AAC5C,SACE,gBAAA,EAAC,EAAY,WAAb;AAAA,IACE,WAAW,EACT,wDACA,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AASA,IAAa,IAAU;AAAA,EAAE,MAAA;AAAA,EAAM,QAAA;AAAA,EAAQ,MAAA;AAAA,EAAM,OAAA;AAAA,EAAO,OAAA;AAAA,EAAO,WAAA;AAAU"}
+{"version":3,"file":"toolbar.js","names":[],"sources":["../../src/components/toolbar/toolbar.tsx"],"sourcesContent":["import { type ComponentProps, type ElementType } from \"react\";\nimport { Toolbar as BaseToolbar } from \"@base-ui/react/toolbar\";\nimport { cn } from \"../../utils/cn\";\n\n/** Override Base UI's `string | (state) => string` className with plain string. */\ntype StyledProps<T extends ElementType> = Omit<\n  ComponentProps<T>,\n  \"className\"\n> & {\n  className?: string;\n};\n\nfunction Root({ className, ...props }: StyledProps<typeof BaseToolbar.Root>) {\n  return (\n    <BaseToolbar.Root\n      className={cn(\n        // Flat card treatment — the hairline border carries the edge; shadows\n        // are reserved for floating layers (menus/popovers/dialogs).\n        \"border-pho-secondary bg-pho-primary rounded-base flex items-center gap-1 border p-1\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n// Ghost-button idiom: quiet Font/5% hover wash; pressed steps up to the\n// tertiary surface so it stays distinct from hover in both modes.\nconst TOOLBAR_BUTTON =\n  \"inline-flex items-center justify-center gap-1.5 rounded-sm px-2 py-1.5 text-base font-medium text-pho-secondary outline-pho-brand transition duration-100 ease-linear hover:bg-pho-ghost-hover hover:text-pho-primary focus-visible:outline-2 focus-visible:-outline-offset-1 data-[pressed]:bg-pho-secondary data-[pressed]:text-pho-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4\";\n\nfunction Button({\n  className,\n  ...props\n}: StyledProps<typeof BaseToolbar.Button>) {\n  return (\n    <BaseToolbar.Button className={cn(TOOLBAR_BUTTON, className)} {...props} />\n  );\n}\n\nfunction Link({ className, ...props }: StyledProps<typeof BaseToolbar.Link>) {\n  return (\n    <BaseToolbar.Link className={cn(TOOLBAR_BUTTON, className)} {...props} />\n  );\n}\n\nfunction Group({ className, ...props }: StyledProps<typeof BaseToolbar.Group>) {\n  return (\n    <BaseToolbar.Group\n      className={cn(\"flex items-center gap-1\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction Input({ className, ...props }: StyledProps<typeof BaseToolbar.Input>) {\n  return (\n    <BaseToolbar.Input\n      className={cn(\n        // text-md on small viewports — iOS zooms into fields under 16px.\n        \"bg-pho-primary ring-pho-primary text-pho-primary placeholder:text-pho-placeholder focus-visible:ring-pho-brand text-md rounded-sm px-2 py-1 ring-1 outline-none ring-inset focus-visible:ring-2 md:text-base\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction Separator({\n  className,\n  ...props\n}: StyledProps<typeof BaseToolbar.Separator>) {\n  return (\n    <BaseToolbar.Separator\n      className={cn(\n        \"mx-1 h-5 w-px bg-[var(--border-color-pho-secondary)]\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Toolbar built on Base UI `Toolbar` — a single tab stop grouping related\n * controls with arrow-key navigation between them (formatting bars, editor\n * controls). Holds `Toolbar.Button`, `Link`, `Input`, and `Separator`; for\n * pressable formatting buttons, wrap `Toggle` / `ToggleGroup` with\n * `Toolbar.Button render={…}`.\n */\nexport const Toolbar = { Root, Button, Link, Group, Input, Separator };\n"],"mappings":";;;;;AAYA,SAAS,EAAK,EAAE,WAAA,GAAW,GAAG,EAAA,GAA+C;AAC3E,SACE,gBAAA,EAAC,EAAY,MAAb;AAAA,IACE,WAAW,EAGT,uFACA,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AAIA,IAAM,IACJ;AAEF,SAAS,EAAO,EACd,WAAA,GACA,GAAG,EAAA,GACsC;AACzC,SACE,gBAAA,EAAC,EAAY,QAAb;AAAA,IAAoB,WAAW,EAAG,GAAgB,CAAS;AAAA,IAAG,GAAI;AAAA,EAAQ,CAAA;AAE9E;AAEA,SAAS,EAAK,EAAE,WAAA,GAAW,GAAG,EAAA,GAA+C;AAC3E,SACE,gBAAA,EAAC,EAAY,MAAb;AAAA,IAAkB,WAAW,EAAG,GAAgB,CAAS;AAAA,IAAG,GAAI;AAAA,EAAQ,CAAA;AAE5E;AAEA,SAAS,EAAM,EAAE,WAAA,GAAW,GAAG,EAAA,GAAgD;AAC7E,SACE,gBAAA,EAAC,EAAY,OAAb;AAAA,IACE,WAAW,EAAG,2BAA2B,CAAS;AAAA,IAClD,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAM,EAAE,WAAA,GAAW,GAAG,EAAA,GAAgD;AAC7E,SACE,gBAAA,EAAC,EAAY,OAAb;AAAA,IACE,WAAW,EAET,gNACA,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAU,EACjB,WAAA,GACA,GAAG,EAAA,GACyC;AAC5C,SACE,gBAAA,EAAC,EAAY,WAAb;AAAA,IACE,WAAW,EACT,wDACA,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AASA,IAAa,IAAU;AAAA,EAAE,MAAA;AAAA,EAAM,QAAA;AAAA,EAAQ,MAAA;AAAA,EAAM,OAAA;AAAA,EAAO,OAAA;AAAA,EAAO,WAAA;AAAU"}

package/dist/components/tooltip.js

@@ -1,19 +1,19 @@
 "use client";
-import { t as i } from "../chunks/cn-7uGUzCOM.js";
+import { t as a } from "../chunks/cn-DTiB6ek_.js";
 import "react";
-import { jsx as a } from "react/jsx-runtime";
+import { jsx as i } from "react/jsx-runtime";
 import { Tooltip as o } from "@base-ui/react/tooltip";
-var n = o.Provider, s = o.Root, p = o.Trigger, l = o.Portal;
+var n = o.Provider, s = o.Root, p = o.Trigger, d = o.Portal;
 function g({ className: r, sideOffset: t = 6, ...e }) {
-  return /* @__PURE__ */ a(o.Positioner, {
+  return /* @__PURE__ */ i(o.Positioner, {
     sideOffset: t,
-    className: i("z-50", r),
+    className: a("z-50", r),
     ...e
   });
 }
-function d({ className: r, ...t }) {
-  return /* @__PURE__ */ a(o.Popup, {
-    className: i("squircle bg-pho-primary text-pho-secondary shadow-pho-lg ring-pho-secondary origin-[var(--transform-origin)] rounded-lg px-2.5 py-1.5 text-xs font-medium ring-1 transition-[transform,opacity] duration-150 ease-out ring-inset", "data-[starting-style]:scale-95 data-[starting-style]:opacity-0", "data-[ending-style]:scale-95 data-[ending-style]:opacity-0", r),
+function l({ className: r, ...t }) {
+  return /* @__PURE__ */ i(o.Popup, {
+    className: a("bg-pho-primary text-pho-secondary shadow-pho-lg ring-pho-secondary rounded-base origin-[var(--transform-origin)] px-2.5 py-1.5 text-xs font-medium ring-1 transition-[transform,opacity] duration-150 ease-out ring-inset", "data-[starting-style]:scale-95 data-[starting-style]:opacity-0", "data-[ending-style]:scale-95 data-[ending-style]:opacity-0", r),
     ...t
   });
 }
@@ -21,9 +21,9 @@ var f = {
   Provider: n,
   Root: s,
   Trigger: p,
-  Portal: l,
+  Portal: d,
   Positioner: g,
-  Popup: d
+  Popup: l
 };
 export {
   f as Tooltip

package/dist/components/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","names":[],"sources":["../../src/components/tooltip/tooltip.tsx"],"sourcesContent":["import { type ComponentProps, type ElementType } from \"react\";\nimport { Tooltip as BaseTooltip } from \"@base-ui/react/tooltip\";\nimport { cn } from \"../../utils/cn\";\n\n/** Override Base UI's `string | (state) => string` className with plain string. */\ntype StyledProps<T extends ElementType> = Omit<\n  ComponentProps<T>,\n  \"className\"\n> & {\n  className?: string;\n};\n\nconst Provider = BaseTooltip.Provider;\nconst Root = BaseTooltip.Root;\nconst Trigger = BaseTooltip.Trigger;\nconst Portal = BaseTooltip.Portal;\n\nfunction Positioner({\n  className,\n  sideOffset = 6,\n  ...props\n}: StyledProps<typeof BaseTooltip.Positioner>) {\n  return (\n    <BaseTooltip.Positioner\n      sideOffset={sideOffset}\n      className={cn(\"z-50\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction Popup({ className, ...props }: StyledProps<typeof BaseTooltip.Popup>) {\n  return (\n    <BaseTooltip.Popup\n      className={cn(\n        // Floating layer: bg-pho-primary surface, pho-secondary hairline ring, keeps shadow elevation.\n        \"squircle bg-pho-primary text-pho-secondary shadow-pho-lg ring-pho-secondary origin-[var(--transform-origin)] rounded-lg px-2.5 py-1.5 text-xs font-medium ring-1 transition-[transform,opacity] duration-150 ease-out ring-inset\",\n        \"data-[starting-style]:scale-95 data-[starting-style]:opacity-0\",\n        \"data-[ending-style]:scale-95 data-[ending-style]:opacity-0\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Tooltip built on Base UI `Tooltip` — a brief, hover/focus-triggered label for\n * an icon or control. Wrap your app (or a subtree) in `Tooltip.Provider` to\n * share open/close timing. The trigger must be a focusable element. Never put\n * essential or interactive content in a tooltip; use `Popover` for that.\n */\nexport const Tooltip = { Provider, Root, Trigger, Portal, Positioner, Popup };\n"],"mappings":";;;;;AAYA,IAAM,IAAW,EAAY,UACvB,IAAO,EAAY,MACnB,IAAU,EAAY,SACtB,IAAS,EAAY;AAE3B,SAAS,EAAW,EAClB,WAAA,GACA,YAAA,IAAa,GACb,GAAG,EAAA,GAC0C;AAC7C,SACE,gBAAA,EAAC,EAAY,YAAb;AAAA,IACc,YAAA;AAAA,IACZ,WAAW,EAAG,QAAQ,CAAS;AAAA,IAC/B,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAM,EAAE,WAAA,GAAW,GAAG,EAAA,GAAgD;AAC7E,SACE,gBAAA,EAAC,EAAY,OAAb;AAAA,IACE,WAAW,EAET,oOACA,kEACA,8DACA,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AAQA,IAAa,IAAU;AAAA,EAAE,UAAA;AAAA,EAAU,MAAA;AAAA,EAAM,SAAA;AAAA,EAAS,QAAA;AAAA,EAAQ,YAAA;AAAA,EAAY,OAAA;AAAM"}
+{"version":3,"file":"tooltip.js","names":[],"sources":["../../src/components/tooltip/tooltip.tsx"],"sourcesContent":["import { type ComponentProps, type ElementType } from \"react\";\nimport { Tooltip as BaseTooltip } from \"@base-ui/react/tooltip\";\nimport { cn } from \"../../utils/cn\";\n\n/** Override Base UI's `string | (state) => string` className with plain string. */\ntype StyledProps<T extends ElementType> = Omit<\n  ComponentProps<T>,\n  \"className\"\n> & {\n  className?: string;\n};\n\nconst Provider = BaseTooltip.Provider;\nconst Root = BaseTooltip.Root;\nconst Trigger = BaseTooltip.Trigger;\nconst Portal = BaseTooltip.Portal;\n\nfunction Positioner({\n  className,\n  sideOffset = 6,\n  ...props\n}: StyledProps<typeof BaseTooltip.Positioner>) {\n  return (\n    <BaseTooltip.Positioner\n      sideOffset={sideOffset}\n      className={cn(\"z-50\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction Popup({ className, ...props }: StyledProps<typeof BaseTooltip.Popup>) {\n  return (\n    <BaseTooltip.Popup\n      className={cn(\n        // Floating layer: bg-pho-primary surface, pho-secondary hairline ring, keeps shadow elevation.\n        \"bg-pho-primary text-pho-secondary shadow-pho-lg ring-pho-secondary rounded-base origin-[var(--transform-origin)] px-2.5 py-1.5 text-xs font-medium ring-1 transition-[transform,opacity] duration-150 ease-out ring-inset\",\n        \"data-[starting-style]:scale-95 data-[starting-style]:opacity-0\",\n        \"data-[ending-style]:scale-95 data-[ending-style]:opacity-0\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Tooltip built on Base UI `Tooltip` — a brief, hover/focus-triggered label for\n * an icon or control. Wrap your app (or a subtree) in `Tooltip.Provider` to\n * share open/close timing. The trigger must be a focusable element. Never put\n * essential or interactive content in a tooltip; use `Popover` for that.\n */\nexport const Tooltip = { Provider, Root, Trigger, Portal, Positioner, Popup };\n"],"mappings":";;;;;AAYA,IAAM,IAAW,EAAY,UACvB,IAAO,EAAY,MACnB,IAAU,EAAY,SACtB,IAAS,EAAY;AAE3B,SAAS,EAAW,EAClB,WAAA,GACA,YAAA,IAAa,GACb,GAAG,EAAA,GAC0C;AAC7C,SACE,gBAAA,EAAC,EAAY,YAAb;AAAA,IACc,YAAA;AAAA,IACZ,WAAW,EAAG,QAAQ,CAAS;AAAA,IAC/B,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAM,EAAE,WAAA,GAAW,GAAG,EAAA,GAAgD;AAC7E,SACE,gBAAA,EAAC,EAAY,OAAb;AAAA,IACE,WAAW,EAET,6NACA,kEACA,8DACA,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AAQA,IAAa,IAAU;AAAA,EAAE,UAAA;AAAA,EAAU,MAAA;AAAA,EAAM,SAAA;AAAA,EAAS,QAAA;AAAA,EAAQ,YAAA;AAAA,EAAY,OAAA;AAAM"}

package/dist/index.js

@@ -1,35 +1,36 @@
 "use client";
-import { t as a } from "./chunks/cn-7uGUzCOM.js";
-import { n as s, r, t as n } from "./chunks/link-provider-9TFNyDqO.js";
-import { t as m } from "./chunks/resolve-variant-CcD8iG5l.js";
+import { t as a } from "./chunks/cn-DTiB6ek_.js";
+import { n as o, r as n, t as r } from "./chunks/link-provider-9TFNyDqO.js";
+import { t as e } from "./chunks/resolve-variant-CcD8iG5l.js";
 import "./utils.js";
-import { a as T, c as f, i as B, l as I, n as p, o as S, r as u, s as _, t as A, u as c } from "./chunks/button-CQ4cZvkC.js";
-import { a as C, i as N, n as O, r as V, t as l } from "./chunks/sidebar-CivriTLb.js";
-import { t as k } from "./chunks/input-DbJpdu6v.js";
-import { t as U } from "./chunks/close-button-CNhn8z0w.js";
-import { t as b } from "./chunks/dialog-7oOe-eaO.js";
+import { a as E, c as B, d as f, f as I, i as S, l as p, n as u, o as _, r as A, s as O, t as R, u as c } from "./chunks/close-button-8f-oRJXt.js";
+import { a as N, i as l, n as D, r as V, t as L } from "./chunks/sidebar-16Pfn7IC.js";
+import { t as d } from "./chunks/input-BSJGBUbf.js";
+import { n as g, t as M } from "./chunks/dialog-Bgb2Z1_v.js";
 export {
+  u as BUTTON_COLORS,
   A as BUTTON_SHAPES,
-  p as BUTTON_SIZES,
-  u as BUTTON_VARIANTS,
-  B as Button,
-  T as ButtonLink,
-  U as CloseButton,
-  b as Dialog,
-  S as EFFECT_BUTTON_SIZES,
-  _ as EffectButton,
-  f as EffectButtonLink,
-  k as Input,
-  n as LinkProvider,
-  l as SIDEBAR_ITEM,
-  O as SIDEBAR_ITEM_ACTIVE,
+  S as BUTTON_SIZES,
+  E as BUTTON_VARIANTS,
+  _ as Button,
+  O as ButtonLink,
+  R as CloseButton,
+  M as Dialog,
+  B as EFFECT_BUTTON_SIZES,
+  p as EffectButton,
+  c as EffectButtonLink,
+  d as Input,
+  r as LinkProvider,
+  L as SIDEBAR_ITEM,
+  D as SIDEBAR_ITEM_ACTIVE,
   V as SIDEBAR_ITEM_INACTIVE,
-  N as SIDEBAR_ROOT,
-  C as Sidebar,
-  I as buttonVariants,
+  l as SIDEBAR_ROOT,
+  N as Sidebar,
+  f as buttonVariants,
   a as cn,
-  c as effectButtonVariants,
-  r as isReactComponent,
-  m as resolveVariant,
-  s as useLinkComponent
+  I as effectButtonVariants,
+  n as isReactComponent,
+  e as resolveVariant,
+  g as useDialogPending,
+  o as useLinkComponent
 };

package/dist/sections/sidebar.js

@@ -1,5 +1,5 @@
 "use client";
-import { a as E, i as a, n as s, r as A, t as T } from "../chunks/sidebar-CivriTLb.js";
+import { a as E, i as a, n as s, r as A, t as T } from "../chunks/sidebar-16Pfn7IC.js";
 export {
   T as SIDEBAR_ITEM,
   s as SIDEBAR_ITEM_ACTIVE,

package/dist/src/components/avatar/avatar.d.ts

@@ -1,4 +1,4 @@
-import { ComponentProps, ElementType } from 'react';
+import { ButtonHTMLAttributes, ComponentProps, ElementType, MouseEvent as ReactMouseEvent, ReactNode } from 'react';
 import { Avatar as BaseAvatar } from '@base-ui/react/avatar';
 /** Override Base UI's `string | (state) => string` className with plain string. */
 type StyledProps<T extends ElementType> = Omit<ComponentProps<T>, "className"> & {
@@ -31,14 +31,36 @@ interface RootProps extends StyledProps<typeof BaseAvatar.Root> {
 declare function Root({ className, size, ...props }: RootProps): import("react").JSX.Element;
 declare function Image({ className, ...props }: StyledProps<typeof BaseAvatar.Image>): import("react").JSX.Element;
 declare function Fallback({ className, ...props }: StyledProps<typeof BaseAvatar.Fallback>): import("react").JSX.Element;
+export interface EditProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "color" | "onClick"> {
+    /** Accessible label. @default "Edit" */
+    label?: string;
+    /**
+     * Replace the default pencil icon. Pass `IconDots` when this button is a
+     * `Menu.Trigger` (change + remove). Custom icons are sized automatically.
+     */
+    children?: ReactNode;
+    /**
+     * Declarative loading state (same visual as an in-flight promise).
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Action handler. Return a promise to keep the overlay visible with a
+     * spinner until it settles. On rejection the control stays interactive —
+     * surface errors inside the handler.
+     */
+    onClick?: (event: ReactMouseEvent<HTMLButtonElement>) => void | Promise<unknown>;
+}
 /**
  * Avatar built on Base UI `Avatar`. Compose `Avatar.Image` with an
  * `Avatar.Fallback` (initials or icon) that shows while the image loads or if
- * it fails. Set `size` on `Avatar.Root`.
+ * it fails. Set `size` on `Avatar.Root`. Add `Avatar.Edit` when the avatar
+ * itself should open a change-photo action.
  */
 export declare const Avatar: {
     Root: typeof Root;
     Image: typeof Image;
     Fallback: typeof Fallback;
+    Edit: import('react').ForwardRefExoticComponent<EditProps & import('react').RefAttributes<HTMLButtonElement>>;
 };
 export {};

package/dist/src/components/avatar/index.d.ts

@@ -1 +1 @@
-export { Avatar, AVATAR_SIZES, type AvatarSize } from './avatar';
+export { Avatar, AVATAR_SIZES, type AvatarSize, type EditProps as AvatarEditProps, } from './avatar';

package/dist/src/components/button/button.d.ts

@@ -39,21 +39,32 @@ export declare const BUTTON_SHAPES: {
         description: string;
     };
 };
-/** Emphasis axis — a tight, semantic set. `primary` is the default. */
+/** Surface axis — how the control is drawn. `effect` is the default. */
 export declare const BUTTON_VARIANTS: {
-    primary: {
+    effect: {
         classes: string;
         description: string;
     };
-    secondary: {
+    filled: {
         classes: string;
         description: string;
     };
-    tertiary: {
+    outlined: {
         classes: string;
         description: string;
     };
-    error: {
+    ghost: {
+        classes: string;
+        description: string;
+    };
+};
+/** Color axis — semantic ink. `default` is the default. */
+export declare const BUTTON_COLORS: {
+    default: {
+        classes: string;
+        description: string;
+    };
+    destructive: {
         classes: string;
         description: string;
     };
@@ -61,9 +72,11 @@ export declare const BUTTON_VARIANTS: {
 export type ButtonSize = keyof typeof BUTTON_SIZES;
 export type ButtonShape = keyof typeof BUTTON_SHAPES;
 export type ButtonVariant = keyof typeof BUTTON_VARIANTS;
+export type ButtonColor = keyof typeof BUTTON_COLORS;
 /** Compose the full class string for a button — exported for reuse/testing. */
 export declare function buttonVariants(opts?: {
     variant?: ButtonVariant;
+    color?: ButtonColor;
     size?: ButtonSize;
     shape?: ButtonShape;
     className?: string;
@@ -73,8 +86,10 @@ type Slottable = ReactNode | FC<{
     className?: string;
 }>;
 interface ButtonBaseProps {
-    /** Emphasis variant. @default "primary" */
+    /** Surface variant. @default "effect" */
     variant?: ButtonVariant;
+    /** Semantic color. @default "default" */
+    color?: ButtonColor;
     /** Size variant. @default "md" */
     size?: ButtonSize;
     /** Corner shape. @default "rounded" */
@@ -83,6 +98,12 @@ interface ButtonBaseProps {
     prefix?: Slottable;
     /** Slot after the label. */
     suffix?: Slottable;
+    /**
+     * Reveal prefix/suffix icons on hover — collapsed and invisible at rest,
+     * spring in on hover. Independent of `variant` (including `effect`).
+     * Ignored when `svgOnly`. @default false
+     */
+    iconReveal?: boolean;
     /** Render as an icon-only button. Requires an `aria-label`. */
     svgOnly?: boolean;
     /** Show a spinner and block interaction while staying readable. */
@@ -90,10 +111,17 @@ interface ButtonBaseProps {
     children?: ReactNode;
     className?: string;
 }
-export interface ButtonProps extends ButtonBaseProps, Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof ButtonBaseProps> {
+/**
+ * DOM event handlers whose React signatures clash with Motion's gesture
+ * props of the same name (Motion re-types these on `motion.*` elements).
+ * Excluded from the public API — Button renders through Motion when the
+ * sheen or icon reveal is active, so these handlers would be intercepted.
+ */
+type MotionHandlerConflicts = "onAnimationStart" | "onAnimationEnd" | "onAnimationIteration" | "onDrag" | "onDragStart" | "onDragEnd" | "onDragEnter" | "onDragExit" | "onDragLeave" | "onDragOver" | "onDrop";
+export interface ButtonProps extends ButtonBaseProps, Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof ButtonBaseProps | MotionHandlerConflicts> {
     ref?: Ref<HTMLButtonElement>;
 }
-export interface ButtonLinkProps extends ButtonBaseProps, Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof ButtonBaseProps> {
+export interface ButtonLinkProps extends ButtonBaseProps, Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof ButtonBaseProps | MotionHandlerConflicts> {
     /** Navigate to this URL (rendered via the host's `LinkProvider`). */
     href: string;
     /** Visually and semantically disable the link. */
@@ -102,8 +130,12 @@ export interface ButtonLinkProps extends ButtonBaseProps, Omit<AnchorHTMLAttribu
 /**
  * Button — triggers an action that mutates state (submit, save, delete).
  * For navigation that changes the URL, use {@link ButtonLink}.
+ *
+ * Default surface is `effect` (same-hue 1.5px outer rim + inset sheen). Use
+ * `filled` for a solid fill without those layers. `iconReveal` springs
+ * prefix/suffix icons in on hover — independent of variant.
  */
-export declare function Button({ variant, size, shape, prefix, suffix, svgOnly, loading, children, className, ref, ...props }: ButtonProps): import("react").JSX.Element;
+export declare function Button({ variant, color, size, shape, prefix, suffix, iconReveal, svgOnly, loading, children, className, ref, ...props }: ButtonProps): import("react").JSX.Element;
 export declare namespace Button {
     var displayName: string;
 }
@@ -112,15 +144,10 @@ export declare namespace Button {
  * Shares every visual prop with {@link Button}; renders the host router's link
  * via `LinkProvider`.
  */
-export declare function ButtonLink({ variant, size, shape, prefix, suffix, svgOnly, loading, disabled, href, children, className, ...props }: ButtonLinkProps): import("react").JSX.Element;
+export declare function ButtonLink({ variant, color, size, shape, prefix, suffix, iconReveal, svgOnly, loading, disabled, href, children, className, ...props }: ButtonLinkProps): import("react").JSX.Element;
 export declare namespace ButtonLink {
     var displayName: string;
 }
-/**
- * EffectButton shares Button's size axis verbatim — same padding, text size,
- * and svgOnly geometry, so effect pills line up with plain Buttons.
- * Kept as a named export for API compatibility.
- */
 export declare const EFFECT_BUTTON_SIZES: {
     sm: {
         classes: string;
@@ -136,34 +163,33 @@ export declare const EFFECT_BUTTON_SIZES: {
     };
 };
 export type EffectButtonSize = ButtonSize;
-/** Compose the full class string for an effect button — exported for reuse. */
+/** Compose classes for an effect pill — `Button` with `variant="effect"`. */
 export declare function effectButtonVariants(opts?: {
     size?: EffectButtonSize;
     fullWidth?: boolean;
     className?: string;
 }): string;
-type MotionConflicts = "onAnimationStart" | "onAnimationEnd" | "onAnimationIteration" | "onDrag" | "onDragStart" | "onDragEnd" | "onDragEnter" | "onDragExit" | "onDragLeave" | "onDragOver" | "onDrop" | "style";
+/**
+ * Legacy EffectButton also reserved `style` (sheen variables lived there) and
+ * never exposed the HTML `color` attribute — Button's semantic `color` prop
+ * now occupies that name.
+ */
+type MotionConflicts = MotionHandlerConflicts | "style" | "color";
 interface EffectButtonBaseProps {
     /** Size variant — Button's scale (32 / 36 / 44px). @default "md" */
     size?: EffectButtonSize;
     /** Stretch to the container's full width (stacked login / OAuth pills). */
     fullWidth?: boolean;
     /**
-     * Play the Motion treatment. When `true` (the default), hovering springs the
-     * sheen, gap, and icon reveal — at rest the pill reads as a normal button
-     * with the icon hidden. When `false` there is no animation at all: the pill
-     * is a plain static `Button` with the effect styling, and a passed icon is
-     * simply displayed from the start.
-     * @default true
+     * @deprecated Use `iconReveal` on `Button` instead. Mapped to `iconReveal`
+     * when set.
      */
     animated?: boolean;
-    /** Slot before the label — a component (`Plus`) or element (`<Plus />`). */
+    /** @see ButtonBaseProps.iconReveal */
+    iconReveal?: boolean;
     prefix?: Slottable;
-    /** Slot after the label. */
     suffix?: Slottable;
-    /** Render as an icon-only button. Requires an `aria-label`. */
     svgOnly?: boolean;
-    /** Show a spinner and block interaction while staying readable. */
     loading?: boolean;
     children?: ReactNode;
     className?: string;
@@ -172,33 +198,21 @@ export interface EffectButtonProps extends EffectButtonBaseProps, Omit<ButtonHTM
     ref?: Ref<HTMLButtonElement>;
 }
 export interface EffectButtonLinkProps extends EffectButtonBaseProps, Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof EffectButtonBaseProps | MotionConflicts> {
-    /** Navigate to this URL (rendered via the host's `LinkProvider`). */
     href: string;
-    /** Visually and semantically disable the link. */
     disabled?: boolean;
 }
 /**
- * EffectButton — {@link Button} wearing the glossy, springy effect treatment
- * ported frame-for-frame from Photon's Framer "Button - Effect". Shares
- * Button's size scale (`sm`/`md`/`lg` at 32/36/44px) so it pairs with plain
- * Buttons at equal heights. `animated` (default `true`) gates the Motion
- * treatment: off, it's a static effect-styled Button whose icon is always
- * visible. `fullWidth` stretches the pill across its container. There is no
- * variant axis — for a supporting/OAuth pill without the sheen, use
- * `<Button variant="secondary">`. Triggers an action; for navigation use
- * {@link EffectButtonLink}.
+ * @deprecated Prefer `<Button variant="effect">`. Thin alias that forwards to
+ * Button with the sheen surface (no icon reveal).
  */
-export declare function EffectButton({ size, fullWidth, animated, prefix, suffix, svgOnly, loading, children, className, ref, ...props }: EffectButtonProps): import("react").JSX.Element;
+export declare function EffectButton({ size, fullWidth, animated, iconReveal, className, ...props }: EffectButtonProps): import("react").JSX.Element;
 export declare namespace EffectButton {
     var displayName: string;
 }
 /**
- * EffectButtonLink — {@link EffectButton} as a link, for navigation that
- * changes the URL. Composes {@link ButtonLink} (Motion-wrapped when animated),
- * which renders the host router's link via `LinkProvider`, so the pill
- * animates identically to the button.
+ * @deprecated Prefer `<ButtonLink variant="effect">`.
  */
-export declare function EffectButtonLink({ size, fullWidth, animated, prefix, suffix, svgOnly, loading, disabled, href, children, className, ...props }: EffectButtonLinkProps): import("react").JSX.Element;
+export declare function EffectButtonLink({ size, fullWidth, animated, iconReveal, className, ...props }: EffectButtonLinkProps): import("react").JSX.Element;
 export declare namespace EffectButtonLink {
     var displayName: string;
 }

package/dist/src/components/button/index.d.ts

@@ -1,2 +1,2 @@
-export { Button, ButtonLink, buttonVariants, BUTTON_SIZES, BUTTON_SHAPES, BUTTON_VARIANTS, EffectButton, EffectButtonLink, effectButtonVariants, EFFECT_BUTTON_SIZES, type ButtonProps, type ButtonLinkProps, type ButtonSize, type ButtonShape, type ButtonVariant, type EffectButtonProps, type EffectButtonLinkProps, type EffectButtonSize, } from './button';
+export { Button, ButtonLink, buttonVariants, BUTTON_SIZES, BUTTON_SHAPES, BUTTON_VARIANTS, BUTTON_COLORS, EffectButton, EffectButtonLink, effectButtonVariants, EFFECT_BUTTON_SIZES, type ButtonProps, type ButtonLinkProps, type ButtonSize, type ButtonShape, type ButtonVariant, type ButtonColor, type EffectButtonProps, type EffectButtonLinkProps, type EffectButtonSize, } from './button';
 export { CloseButton, type CloseButtonProps } from './close-button';

package/dist/src/components/dialog/dialog.d.ts

@@ -1,9 +1,40 @@
-import { ComponentProps, ElementType, ReactNode } from 'react';
+import { ComponentProps, ElementType, MouseEvent as ReactMouseEvent, ReactNode } from 'react';
 import { Dialog as BaseDialog } from '@base-ui/react/dialog';
+import { ButtonProps } from '../button/button';
 /** Override Base UI's `string | (state) => string` className with plain string. */
 type StyledProps<T extends ElementType> = Omit<ComponentProps<T>, "className"> & {
     className?: string;
 };
+/**
+ * Whether the surrounding dialog has a `Dialog.Action` promise in flight —
+ * use it to disable secondary actions (Cancel etc.) while work is pending.
+ * Returns `false` outside a `Dialog.Root`.
+ */
+export declare function useDialogPending(): boolean;
+type RootProps = ComponentProps<typeof BaseDialog.Root>;
+/**
+ * `Dialog.Root` with async awareness: while a `Dialog.Action` promise is
+ * pending, every close request (outside press, Escape, `Dialog.Close`) is
+ * cancelled so the dialog stays open until the work settles. Props pass
+ * through to Base UI's `Dialog.Root` unchanged.
+ */
+declare function Root({ onOpenChange, actionsRef, ...props }: RootProps): import("react").JSX.Element;
+export interface DialogActionProps extends Omit<ButtonProps, "onClick"> {
+    /**
+     * Confirm handler. Return a promise to keep the dialog open while it runs:
+     * the button shows `loading`, all dismissal is locked, and the dialog
+     * closes when the promise resolves. On rejection the dialog stays open —
+     * surface errors inside the handler. A non-promise return closes
+     * immediately, like `Dialog.Close`.
+     */
+    onClick?: (event: ReactMouseEvent<HTMLButtonElement>) => void | Promise<unknown>;
+}
+/**
+ * The confirm button of an action row, with native promise support — a
+ * `Button` that runs its (possibly async) `onClick` and closes the dialog
+ * when the work settles successfully.
+ */
+declare function Action({ onClick, loading, disabled, ...props }: DialogActionProps): import("react").JSX.Element;
 declare function Backdrop({ className, ...props }: StyledProps<typeof BaseDialog.Backdrop>): import("react").JSX.Element;
 declare function Popup({ className, ...props }: StyledProps<typeof BaseDialog.Popup>): import("react").JSX.Element;
 declare function Title({ className, ...props }: StyledProps<typeof BaseDialog.Title>): import("react").JSX.Element;
@@ -13,22 +44,33 @@ interface ContentProps extends Omit<StyledProps<typeof BaseDialog.Popup>, "title
     title?: ReactNode;
     /** Supporting text under the title. */
     description?: ReactNode;
-    /** Show the top-right close button. @default true */
+    /**
+     * Footer action row (Cancel / Confirm, etc.). Iron rule: when `actions` is
+     * set, the header close button is never shown — dismiss via the actions.
+     */
+    actions?: ReactNode;
+    /**
+     * Header close control. Only applies when `actions` is absent.
+     * @default true
+     */
     showClose?: boolean;
     children?: ReactNode;
 }
 /**
  * Convenience panel: renders the portal, backdrop, and styled popup with an
- * optional header (title/description + close). For full control, compose the
- * parts directly (`Dialog.Portal` / `Dialog.Backdrop` / `Dialog.Popup`).
+ * optional header (title/description + close) and optional action row. For
+ * full control, compose the parts directly (`Dialog.Portal` /
+ * `Dialog.Backdrop` / `Dialog.Popup`).
  */
-declare function Content({ title, description, showClose, children, className, ...props }: ContentProps): import("react").JSX.Element;
+declare function Content({ title, description, actions, showClose, children, className, ...props }: ContentProps): import("react").JSX.Element;
 /**
  * Modal dialog built on Base UI `Dialog`. Controlled or uncontrolled via
- * `Dialog.Root` (`open` / `onOpenChange` / `defaultOpen`).
+ * `Dialog.Root` (`open` / `onOpenChange` / `defaultOpen`). `Dialog.Action`
+ * adds native promise support: an async confirm keeps the dialog open and
+ * undismissable until the work resolves.
  */
 export declare const Dialog: {
-    Root: typeof BaseDialog.Root;
+    Root: typeof Root;
     Trigger: BaseDialog.Trigger;
     Portal: import('react').ForwardRefExoticComponent<Omit<import('@base-ui/react').AlertDialogPortalProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
     Backdrop: typeof Backdrop;
@@ -36,6 +78,7 @@ export declare const Dialog: {
     Title: typeof Title;
     Description: typeof Description;
     Close: import('react').ForwardRefExoticComponent<Omit<import('@base-ui/react').AlertDialogCloseProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
+    Action: typeof Action;
     Content: typeof Content;
 };
 export {};

package/dist/src/components/dialog/index.d.ts

@@ -1 +1 @@
-export { Dialog } from './dialog';
+export { Dialog, useDialogPending, type DialogActionProps } from './dialog';

package/dist/src/components/menu/index.d.ts

@@ -1 +1 @@
-export { Menu, MENU_POPUP, MENU_ITEM } from './menu';
+export { Menu, useMenuPending, MENU_POPUP, MENU_ITEM, MENU_ITEM_COLORS, type MenuItemColor, type MenuItemProps, } from './menu';