@vitavision/ui 0.10.0 → 0.11.0

package/dist/index.d.ts

@@ -161,7 +161,10 @@ export declare function CountRun({ counts, className }: {
  * destroys something.
  */
 type ButtonVariant = "primary" | "secondary" | "ghost" | "danger";
-/** A button's height and padding. `md` is the comfortable density's size, `sm` the compact one's. */
+/**
+ * A control's height and padding, shared by `Button`, `SegmentedControl` and `ToggleChip`. For a
+ * button, `md` is the comfortable density's size and `sm` the compact one's.
+ */
 type ButtonSize = "sm" | "md";
 /**
  * The classes that make a control look like a button, for the one element that has to be
@@ -890,8 +893,11 @@ export declare function PoseInput({ value, onValueChange, rotationView, translat
  * or `defaultValue` while `value` is `""` — and choosing the segment that matches
  * `defaultValue` reports `""`, so the default stays defined in one place. Each segment
  * carries `data-state="checked"` or `"unchecked"`; the group carries `data-disabled`.
+ *
+ * Toolbar-sized by default. In a row with a comfortable-density `Input`, `Select` or
+ * `Button`, pass `size="md"` and the strip's outer height matches theirs.
  */
-export declare function SegmentedControl({ value, defaultValue, options, onValueChange, disabled, "aria-label": ariaLabel, className }: {
+export declare function SegmentedControl({ value, defaultValue, options, onValueChange, disabled, "aria-label": ariaLabel, size, className }: {
   /** `""` when the field is untouched. */
   value: string;
   /** What applies when nothing is sent. Highlighted while `value` is `""`. */
@@ -907,6 +913,13 @@ export declare function SegmentedControl({ value, defaultValue, options, onValue
   disabled?: boolean | undefined;
   /** Names the radio group. */
   "aria-label"?: string | undefined;
+  /**
+   * The strip's height: `sm` (the default) is the toolbar size, about 30px with `text-xs`
+   * labels; `md` is exactly 32px (`h-8`) outside, border included, with `text-sm` labels, the
+   * height of a comfortable-density `Input` or `Button`. Not derived from the density in
+   * force, so a consumer that never passes it renders as it always did.
+   */
+  size?: ButtonSize | undefined;
   /** Merged with the strip's own classes through `cn`. */
   className?: string | undefined;
 }): import("react").JSX.Element;
@@ -1091,8 +1104,11 @@ export declare function Checkbox({ checked, onCheckedChange, onClick, label, des
  * colour: a toolbar-sized `Switch` (`role="switch"`, `aria-checked`).
  *
  * Controlled. State is exposed as `data-state` (`checked`/`unchecked`).
+ *
+ * Toolbar-sized by default. In a row with a comfortable-density `Input`, `Select` or
+ * `Button`, pass `size="md"` and the chip's outer height matches theirs.
  */
-export declare function ToggleChip({ checked, onCheckedChange, children, swatch, disabled, title, className }: {
+export declare function ToggleChip({ checked, onCheckedChange, children, swatch, disabled, title, size, className }: {
   /** Whether the layer is shown. */
   checked: boolean;
   /** Called with the new state. */
@@ -1105,6 +1121,14 @@ export declare function ToggleChip({ checked, onCheckedChange, children, swatch,
   disabled?: boolean | undefined;
   /** Why the control is disabled, or what the layer is. Never the only explanation. */
   title?: string | undefined;
+  /**
+   * The chip's height: `sm` (the default) is the toolbar size, about 26px with `text-xs`
+   * text; `md` is exactly 32px (`h-8`) outside, border included, with `text-sm` text and a
+   * slightly larger swatch, the height of a comfortable-density `Input` or `Button`. Not
+   * derived from the density in force, so a consumer that never passes it renders as it
+   * always did.
+   */
+  size?: ButtonSize | undefined;
   /** Merged with the chip's own classes through `cn`. */
   className?: string | undefined;
 }): import("react").JSX.Element;

package/dist/index.js

@@ -353,7 +353,7 @@ const VARIANT_CLASSES = {
 	ghost: "text-fg-muted hover:bg-raised hover:text-fg",
 	danger: "bg-defect/10 text-defect ring-1 ring-inset ring-defect/30 hover:bg-defect/15"
 };
-const SIZE_CLASSES = {
+const SIZE_CLASSES$1 = {
 	sm: "h-7 gap-1.5 px-2.5 text-xs",
 	md: "h-8 gap-2 px-3 text-sm"
 };
@@ -367,7 +367,7 @@ const SIZE_CLASSES = {
 * @returns The class string.
 */
 function buttonClasses({ variant = "secondary", size = "md", className } = {}) {
-	return cn("inline-flex shrink-0 items-center justify-center rounded-control font-medium transition-colors", "disabled:cursor-not-allowed disabled:opacity-45", SIZE_CLASSES[size], VARIANT_CLASSES[variant], focusRing, className);
+	return cn("inline-flex shrink-0 items-center justify-center rounded-control font-medium transition-colors", "disabled:cursor-not-allowed disabled:opacity-45", SIZE_CLASSES$1[size], VARIANT_CLASSES[variant], focusRing, className);
 }
 function ButtonIcon({ icon }) {
 	return /* @__PURE__ */ jsx("span", {
@@ -1621,6 +1621,16 @@ function PoseInput({ value, onValueChange, rotationView, translationUnit = "m",
 //#endregion
 //#region src/components/ui/SegmentedControl.tsx
 /**
+* The segment's own box, by size. `sm` is the toolbar size and the default. `md` sets the
+* height explicitly rather than leaving it to padding plus line-height: the strip around it
+* is `h-8` with a 1px border and `p-0.5`, which leaves 26px of content box, and `h-full`
+* fills exactly that whatever the font's line height turns out to be.
+*/
+const SEGMENT_SIZE_CLASSES = {
+	sm: "px-2.5 py-1 text-xs",
+	md: "flex h-full items-center px-3.5 text-sm"
+};
+/**
 * A choice among two or three, shown as a strip of segments (native radios in one group, so
 * arrow keys move between them).
 *
@@ -1628,8 +1638,11 @@ function PoseInput({ value, onValueChange, rotationView, translationUnit = "m",
 * or `defaultValue` while `value` is `""` — and choosing the segment that matches
 * `defaultValue` reports `""`, so the default stays defined in one place. Each segment
 * carries `data-state="checked"` or `"unchecked"`; the group carries `data-disabled`.
+*
+* Toolbar-sized by default. In a row with a comfortable-density `Input`, `Select` or
+* `Button`, pass `size="md"` and the strip's outer height matches theirs.
 */
-function SegmentedControl({ value, defaultValue, options, onValueChange, disabled = false, "aria-label": ariaLabel, className }) {
+function SegmentedControl({ value, defaultValue, options, onValueChange, disabled = false, "aria-label": ariaLabel, size = "sm", className }) {
 	const nameId = useId();
 	const described = useFieldDescription();
 	const effective = value === "" ? defaultValue : value;
@@ -1638,12 +1651,12 @@ function SegmentedControl({ value, defaultValue, options, onValueChange, disable
 		"aria-label": ariaLabel,
 		"aria-describedby": described["aria-describedby"],
 		"data-disabled": disabled ? "" : void 0,
-		className: cn("inline-flex w-fit max-w-full shrink-0 items-center gap-0.5 rounded-control border border-line-strong bg-raised p-0.5", disabled && "opacity-50", className),
+		className: cn("inline-flex w-fit max-w-full shrink-0 items-center gap-0.5 rounded-control border border-line-strong bg-raised p-0.5", size === "md" && "h-8", disabled && "opacity-50", className),
 		children: options.map((option) => {
 			const checked = option.value === effective;
 			return /* @__PURE__ */ jsxs("label", {
 				"data-state": checked ? "checked" : "unchecked",
-				className: cn("relative cursor-pointer whitespace-nowrap rounded-[0.3rem] px-2.5 py-1 text-xs font-medium transition-colors", "has-focus-visible:outline-2 has-focus-visible:outline-offset-1 has-focus-visible:outline-signal", checked ? "bg-surface text-fg shadow-sm" : "text-fg-muted hover:text-fg", disabled && "cursor-not-allowed"),
+				className: cn("relative cursor-pointer whitespace-nowrap rounded-[0.3rem]", SEGMENT_SIZE_CLASSES[size], "font-medium transition-colors", "has-focus-visible:outline-2 has-focus-visible:outline-offset-1 has-focus-visible:outline-signal", checked ? "bg-surface text-fg shadow-sm" : "text-fg-muted hover:text-fg", disabled && "cursor-not-allowed"),
 				children: [/* @__PURE__ */ jsx("input", {
 					type: "radio",
 					name: nameId,
@@ -1901,12 +1914,28 @@ function Checkbox({ checked, onCheckedChange, onClick, label, description, disab
 //#endregion
 //#region src/components/ui/ToggleChip.tsx
 /**
+* The chip's box, by size. `sm` is the toolbar size and the default. `md` sets the height
+* explicitly (`h-8`, border included) rather than leaving it to padding plus line-height.
+*/
+const SIZE_CLASSES = {
+	sm: "px-2 py-1 text-xs",
+	md: "h-8 px-3 text-sm"
+};
+/** The swatch dot, by size: a little larger beside `text-sm` so it keeps its weight against the label. */
+const SWATCH_SIZE_CLASSES = {
+	sm: "size-2",
+	md: "size-2.5"
+};
+/**
 * A dense on/off chip for a layer drawn on screen, with an optional swatch in the layer's
 * colour: a toolbar-sized `Switch` (`role="switch"`, `aria-checked`).
 *
 * Controlled. State is exposed as `data-state` (`checked`/`unchecked`).
+*
+* Toolbar-sized by default. In a row with a comfortable-density `Input`, `Select` or
+* `Button`, pass `size="md"` and the chip's outer height matches theirs.
 */
-function ToggleChip({ checked, onCheckedChange, children, swatch, disabled = false, title, className }) {
+function ToggleChip({ checked, onCheckedChange, children, swatch, disabled = false, title, size = "sm", className }) {
 	return /* @__PURE__ */ jsxs("button", {
 		type: "button",
 		role: "switch",
@@ -1915,10 +1944,10 @@ function ToggleChip({ checked, onCheckedChange, children, swatch, disabled = fal
 		disabled,
 		title,
 		onClick: () => onCheckedChange(!checked),
-		className: cn("inline-flex items-center gap-1.5 rounded-control border px-2 py-1 text-xs whitespace-nowrap transition-colors", checked ? "border-line-strong bg-raised text-fg" : "border-line bg-transparent text-fg-muted hover:text-fg", "disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:text-fg-muted", focusRing, className),
+		className: cn("inline-flex items-center gap-1.5 rounded-control border", SIZE_CLASSES[size], "whitespace-nowrap transition-colors", checked ? "border-line-strong bg-raised text-fg" : "border-line bg-transparent text-fg-muted hover:text-fg", "disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:text-fg-muted", focusRing, className),
 		children: [swatch !== void 0 && /* @__PURE__ */ jsx("span", {
 			"aria-hidden": true,
-			className: cn("size-2 shrink-0 rounded-full border transition-opacity", checked ? "opacity-100" : "opacity-30"),
+			className: cn(SWATCH_SIZE_CLASSES[size], "shrink-0 rounded-full border transition-opacity", checked ? "opacity-100" : "opacity-30"),
 			style: {
 				backgroundColor: swatch,
 				borderColor: swatch