@protobase/ui 0.21.6 → 0.21.8

package/dist/primitives/segmented.js

@@ -11,10 +11,15 @@ const sizes = {
 		option: "px-3 text-body"
 	}
 };
+/** A segmented switch's classes, for a row of links that looks like one: the group, and each option, `active` the chosen. */
+const segmentedClass = {
+	group: (size = "sm") => cn("inline-flex", sizes[size].group, "rounded-md bg-muted p-0.5"),
+	option: (active, size = "sm") => cn("inline-flex items-center gap-1.5 rounded", sizes[size].option, "font-medium transition-colors", active ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground")
+};
 const Segmented = ({ value, options, onChange, label, size = "sm", iconOnly = false }) => /* @__PURE__ */ jsx("span", {
 	role: "group",
 	"aria-label": label,
-	className: cn("inline-flex", sizes[size].group, "rounded-md bg-muted p-0.5"),
+	className: segmentedClass.group(size),
 	children: options.map((option) => /* @__PURE__ */ jsxs("button", {
 		type: "button",
 		"aria-pressed": option.value === value,
@@ -23,9 +28,9 @@ const Segmented = ({ value, options, onChange, label, size = "sm", iconOnly = fa
 			title: option.label
 		},
 		onClick: () => onChange(option.value),
-		className: cn("inline-flex items-center gap-1.5 rounded", sizes[size].option, "font-medium transition-colors", option.value === value ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"),
+		className: segmentedClass.option(option.value === value, size),
 		children: [option.icon && /* @__PURE__ */ jsx(option.icon, { className: "size-3.5" }), !iconOnly && option.label]
 	}, option.value))
 });
 //#endregion
-export { Segmented };
+export { Segmented, segmentedClass };

package/dist/primitives/textarea.d.ts

@@ -1,9 +1,10 @@
-import { TextareaHTMLAttributes } from "react";
+import { Ref, TextareaHTMLAttributes } from "react";
 //#region src/primitives/textarea.d.ts
 export type TextareaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'value'> & {
   value: string;
   invalid?: boolean;
+  ref?: Ref<HTMLTextAreaElement>;
 };
-/** A text box of several lines that grows with its text instead of scrolling inside. */
-export declare const Textarea: ({ invalid, className, rows, value, ...rest }: TextareaProps) => import("react").JSX.Element;
+/** A text box of several lines that grows with its text instead of scrolling inside; `ref` reaches the box too. */
+export declare const Textarea: ({ invalid, className, rows, value, ref: given, ...rest }: TextareaProps) => import("react").JSX.Element;
 //#endregion

package/dist/primitives/textarea.js

@@ -1,15 +1,20 @@
 import { cn } from "../lib/cn.js";
 import { useFieldControl } from "./field-control.js";
-import { useEffect, useLayoutEffect, useRef } from "react";
+import { useCallback, useEffect, useLayoutEffect, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/primitives/textarea.tsx
 const fit = (box) => {
 	box.style.height = "auto";
 	box.style.height = `${box.scrollHeight + box.offsetHeight - box.clientHeight}px`;
 };
-/** A text box of several lines that grows with its text instead of scrolling inside. */
-const Textarea = ({ invalid, className, rows = 3, value, ...rest }) => {
+/** A text box of several lines that grows with its text instead of scrolling inside; `ref` reaches the box too. */
+const Textarea = ({ invalid, className, rows = 3, value, ref: given, ...rest }) => {
 	const ref = useRef(null);
+	const setRef = useCallback((box) => {
+		ref.current = box;
+		if (typeof given === "function") given(box);
+		else if (given) given.current = box;
+	}, [given]);
 	const control = useFieldControl();
 	useLayoutEffect(() => {
 		if (ref.current) fit(ref.current);
@@ -27,7 +32,7 @@ const Textarea = ({ invalid, className, rows = 3, value, ...rest }) => {
 		return () => observer.disconnect();
 	}, []);
 	return /* @__PURE__ */ jsx("textarea", {
-		ref,
+		ref: setRef,
 		rows,
 		value,
 		className: cn("block w-full resize-none overflow-hidden rounded-md border bg-background px-2.5 py-1.5 text-body text-foreground shadow-sm outline-none placeholder:text-faint-foreground focus:border-primary focus:ring-2 focus:ring-primary/20", invalid ? "border-danger" : "border-border-strong", className),