@hackcove/ui-react 0.8.0 → 0.8.1

package/dist/Textarea.d.ts

@@ -1,5 +1,12 @@
-import type { ComponentPropsWithoutRef, ReactElement } from "react";
+import { type ComponentPropsWithoutRef } from "react";
 import { type ControlProps } from "./control.js";
 import type { Unstyled } from "./props.js";
-/** A multi-line text input, styled like `Input`. `rows` defaults to 3. Takes `size` and `width` too. */
-export declare function Textarea({ size, width, ...rest }: ControlProps & Unstyled<Omit<ComponentPropsWithoutRef<"textarea">, "width">>): ReactElement;
+export type TextareaProps = ControlProps & {
+    /** The monospace face, for pasted CSV or statement text, where the columns must line up. Off by default. */
+    mono?: boolean | undefined;
+} & Unstyled<Omit<ComponentPropsWithoutRef<"textarea">, "width">>;
+/** A multi-line text input, styled like `Input`. `rows` defaults to 3. Takes `size`, `width` and `mono` too. The `ref` reaches the `<textarea>`, for focus control. */
+export declare const Textarea: import("react").ForwardRefExoticComponent<ControlProps & {
+    /** The monospace face, for pasted CSV or statement text, where the columns must line up. Off by default. */
+    mono?: boolean | undefined;
+} & Unstyled<Omit<Omit<import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref">, "width">> & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/Textarea.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
 import { CONTROL_PAD, controlClass } from "./control.js";
 import { cx } from "./cx.js";
-/** A multi-line text input, styled like `Input`. `rows` defaults to 3. Takes `size` and `width` too. */
-export function Textarea({ size = "md", width = "full", ...rest }) {
-    return (_jsx("textarea", { rows: 3, ...rest, className: cx(controlClass(size, width), CONTROL_PAD[size].x) }));
-}
+/** A multi-line text input, styled like `Input`. `rows` defaults to 3. Takes `size`, `width` and `mono` too. The `ref` reaches the `<textarea>`, for focus control. */
+export const Textarea = forwardRef(function Textarea({ size = "md", width = "full", mono = false, ...rest }, ref) {
+    return (_jsx("textarea", { rows: 3, ...rest, ref: ref, className: cx(controlClass(size, width), CONTROL_PAD[size].x, mono && "font-mono") }));
+});

package/dist/cx.d.ts

@@ -5,6 +5,8 @@ export declare const focusRing = "focus-visible:outline-2 focus-visible:outline-
 /**
  * On a row or card that holds a stretched link (`link-stretch`): every interactive descendant sits
  * above that link and is clickable on its own. `z-10` needs a position, so each gets `relative`,
- * except one that is already `absolute` and the stretched link itself.
+ * except one that is already `absolute` and the stretched link itself. The row or card is `isolate`,
+ * its own stacking context: its `z-10` descendants rank only inside it, so they cannot tie with or
+ * paint over the page's sticky bars (AppShell's header, a StickyBar).
  */
-export declare const liftInteractive = "[&_:is(a,button,label,select,textarea,input,summary):not(.link-stretch):not(.absolute)]:relative [&_:is(a,button,label,select,textarea,input,summary):not(.link-stretch)]:z-10";
+export declare const liftInteractive = "isolate [&_:is(a,button,label,select,textarea,input,summary):not(.link-stretch):not(.absolute)]:relative [&_:is(a,button,label,select,textarea,input,summary):not(.link-stretch)]:z-10";

package/dist/cx.js

@@ -7,6 +7,8 @@ export const focusRing = "focus-visible:outline-2 focus-visible:outline-offset-2
 /**
  * On a row or card that holds a stretched link (`link-stretch`): every interactive descendant sits
  * above that link and is clickable on its own. `z-10` needs a position, so each gets `relative`,
- * except one that is already `absolute` and the stretched link itself.
+ * except one that is already `absolute` and the stretched link itself. The row or card is `isolate`,
+ * its own stacking context: its `z-10` descendants rank only inside it, so they cannot tie with or
+ * paint over the page's sticky bars (AppShell's header, a StickyBar).
  */
-export const liftInteractive = "[&_:is(a,button,label,select,textarea,input,summary):not(.link-stretch):not(.absolute)]:relative [&_:is(a,button,label,select,textarea,input,summary):not(.link-stretch)]:z-10";
+export const liftInteractive = "isolate [&_:is(a,button,label,select,textarea,input,summary):not(.link-stretch):not(.absolute)]:relative [&_:is(a,button,label,select,textarea,input,summary):not(.link-stretch)]:z-10";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hackcove/ui-react",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "description": "Hack Cove React components: primitives, typography roles and a safe Markdown renderer, written against Tailwind v4 utilities. Pair with a @hackcove/theme-* package.",
   "keywords": [
     "components",