@estiva-app/ui 0.60.2 → 0.61.0

package/dist/ShowMore.d.ts

@@ -14,6 +14,10 @@ import { type ReactNode } from 'react';
  *
  * Focus arriving inside the cut content opens it: a field or a link there,
  * reached by Tab or a click, is never worked on out of sight.
+ *
+ * `action` is one more small button on the toggle's row, at its right
+ * (Katerina, 8 October: Peek's block card puts "Open in Estiva Ship" level with
+ * Show more). The row is drawn for it whether or not the content is cut.
  */
 export interface ShowMoreProps {
     children: ReactNode;
@@ -21,7 +25,9 @@ export interface ShowMoreProps {
     maxHeight?: number;
     /** What the content sits on, for the fade to end in: a panel's `surface` (default), or an inset card's `inset`. */
     surface?: 'surface' | 'inset';
+    /** A small muted `Button` with a leading icon, at the right of the toggle's row: the way out to where the content lives. Its words end where the content does. */
+    action?: ReactNode;
     className?: string;
 }
-export declare function ShowMore({ children, maxHeight, surface, className }: ShowMoreProps): import("react").JSX.Element;
+export declare function ShowMore({ children, maxHeight, surface, action, className }: ShowMoreProps): import("react").JSX.Element;
 //# sourceMappingURL=ShowMore.d.ts.map

package/dist/ShowMore.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ShowMore.d.ts","sourceRoot":"","sources":["../src/ShowMore.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAIzE;;;;;;;;;;;;;;;GAeG;AACH,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,SAAS,CAAA;IACnB,kFAAkF;IAClF,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,mHAAmH;IACnH,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAA;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAID,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,SAAc,EAAE,OAAmB,EAAE,SAAS,EAAE,EAAE,aAAa,+BA+BnG"}
+{"version":3,"file":"ShowMore.d.ts","sourceRoot":"","sources":["../src/ShowMore.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAKzE;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,SAAS,CAAA;IACnB,kFAAkF;IAClF,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,mHAAmH;IACnH,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAA;IAC7B,kKAAkK;IAClK,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAID,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,SAAc,EAAE,OAAmB,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,aAAa,+BAkC3G"}

package/dist/index.js

@@ -3705,9 +3705,10 @@ function SuggestionMenu({ rect, editorElement, ariaLabel, width, maxHeight, sect
 
 // src/ShowMore.tsx
 import { useLayoutEffect as useLayoutEffect5, useRef as useRef13, useState as useState12 } from "react";
+import { IconChevronDown as IconChevronDown4, IconChevronUp } from "@tabler/icons-react";
 import { jsx as jsx54, jsxs as jsxs38 } from "react/jsx-runtime";
 var FADE_CLASSES = { surface: "from-bg-surface", inset: "from-bg-inset" };
-function ShowMore({ children, maxHeight = 96, surface = "surface", className }) {
+function ShowMore({ children, maxHeight = 96, surface = "surface", action, className }) {
   const box = useRef13(null);
   const [open, setOpen] = useState12(false);
   const [overflows, setOverflows] = useState12(false);
@@ -3727,10 +3728,27 @@ function ShowMore({ children, maxHeight = 96, surface = "surface", className })
       children,
       cut && /* @__PURE__ */ jsx54("div", { "aria-hidden": true, className: cn("pointer-events-none absolute inset-x-0 bottom-0 h-10 bg-gradient-to-t to-transparent", FADE_CLASSES[surface]) })
     ] }),
-    overflows && // `-ml-1.5`: the small button's own 6px inset, so its words start where the content's do.
-    /* @__PURE__ */ jsx54(Button, { variant: "muted", size: "small", className: "-ml-1.5 mt-1", "aria-expanded": open, onClick: () => setOpen((o) => !o), children: open ? "Show less" : "Show more" })
+    action ? /* @__PURE__ */ jsxs38("div", { className: cn("mt-1 flex w-full items-center gap-2", overflows ? "justify-between" : "justify-end"), children: [
+      overflows && /* @__PURE__ */ jsx54(Toggle, { open, onToggle: () => setOpen((o) => !o) }),
+      /* @__PURE__ */ jsx54("div", { className: "-mr-2 flex shrink-0", children: action })
+    ] }) : overflows && /* @__PURE__ */ jsx54(Toggle, { open, onToggle: () => setOpen((o) => !o), className: "mt-1" })
   ] });
 }
+function Toggle({ open, onToggle, className }) {
+  const Icon = open ? IconChevronUp : IconChevronDown4;
+  return /* @__PURE__ */ jsx54(
+    Button,
+    {
+      variant: "outlined",
+      size: "small",
+      leadingIcon: /* @__PURE__ */ jsx54(Icon, { stroke: 1.5, className: "size-3.5" }),
+      className,
+      "aria-expanded": open,
+      onClick: onToggle,
+      children: open ? "Show less" : "Show more"
+    }
+  );
+}
 
 // src/Toolbar.tsx
 import { Toolbar as BaseToolbar } from "@base-ui/react/toolbar";
@@ -3908,13 +3926,13 @@ function Property({ label, layout = "row", children, className }) {
 }
 
 // src/Reaction.tsx
-import { Toggle } from "@base-ui/react/toggle";
+import { Toggle as Toggle2 } from "@base-ui/react/toggle";
 import { jsx as jsx61, jsxs as jsxs42 } from "react/jsx-runtime";
 function Reaction({ emoji, count, pressed = false, className, ...props }) {
   return (
     // @estiva-escape(no-copied-look): W1 (Katerina, 24 September: leave alone): a reaction pill shares four words with a field's box by coincidence
     /* @__PURE__ */ jsxs42(
-      Toggle,
+      Toggle2,
       {
         pressed,
         className: cn(