@vitavision/ui 0.10.0 → 0.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitavision/ui",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "The vitavision instrument design system: Tailwind v4 tokens, theme, and React primitives.",
   "license": "MIT OR Apache-2.0",
   "repository": {

package/src/components/ui/Button.tsx

@@ -12,7 +12,10 @@ import { cn, focusRing } from "./cn";
  */
 export 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.
+ */
 export type ButtonSize = "sm" | "md";
 
 const VARIANT_CLASSES: Record<ButtonVariant, string> = {

package/src/components/ui/SegmentedControl.tsx

@@ -17,9 +17,21 @@
 
 import { useId } from "react";
 
+import type { ButtonSize } from "./Button";
 import { useFieldDescription } from "./Field";
 import { cn } from "./cn";
 
+/**
+ * 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: Record<ButtonSize, string> = {
+  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).
@@ -28,6 +40,9 @@ import { cn } from "./cn";
  * 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 function SegmentedControl({
   value,
@@ -36,6 +51,7 @@ export function SegmentedControl({
   onValueChange,
   disabled = false,
   "aria-label": ariaLabel,
+  size = "sm",
   className,
 }: {
   /** `""` when the field is untouched. */
@@ -50,6 +66,13 @@ export function SegmentedControl({
   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;
 }) {
@@ -68,6 +91,7 @@ export function SegmentedControl({
         // its default `1 1 auto` gives up width first, and the segment labels are what pay for
         // it. Let the row scroll instead of squeezing the choice.
         "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,
       )}
@@ -82,7 +106,9 @@ export function SegmentedControl({
               // `whitespace-nowrap` or a two-word label's min-content width is its longest
               // *word*, and "Side by side" is free to stack onto three lines inside a
               // fixed-height strip that then clips it.
-              "relative cursor-pointer whitespace-nowrap rounded-[0.3rem] px-2.5 py-1 text-xs font-medium transition-colors",
+              "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"

package/src/components/ui/ToggleChip.tsx

@@ -14,13 +14,32 @@
 
 import type { ReactNode } from "react";
 
+import type { ButtonSize } from "./Button";
 import { cn, focusRing } from "./cn";
 
+/**
+ * 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: Record<ButtonSize, string> = {
+  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: Record<ButtonSize, string> = {
+  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.
  */
 export function ToggleChip({
   checked,
@@ -29,6 +48,7 @@ export function ToggleChip({
   swatch,
   disabled = false,
   title,
+  size = "sm",
   className,
 }: {
   /** Whether the layer is shown. */
@@ -43,6 +63,14 @@ export function ToggleChip({
   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;
 }) {
@@ -56,7 +84,9 @@ export function ToggleChip({
       title={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",
+        "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",
@@ -69,7 +99,8 @@ export function ToggleChip({
         <span
           aria-hidden
           className={cn(
-            "size-2 shrink-0 rounded-full border transition-opacity",
+            SWATCH_SIZE_CLASSES[size],
+            "shrink-0 rounded-full border transition-opacity",
             checked ? "opacity-100" : "opacity-30",
           )}
           style={{ backgroundColor: swatch, borderColor: swatch }}