@instruments/materia-ui 0.4.0 → 0.4.1

package/dist/components/command/command-dialog.d.ts

@@ -10,7 +10,11 @@ export type CommandDialogProps<Item> = Omit<React.ComponentProps<typeof Dialog>,
     description?: string;
     /** Extra class names applied to the `DialogContent` wrapper. */
     className?: string;
-    /** Whether to show the dialog close button. */
+    /**
+     * Whether to show the dialog close button. Off by default: the button sits
+     * over the search field, and Escape or a click outside closes the palette.
+     * @default false
+     */
     showCloseButton?: boolean;
     /** Extra props applied to the rendered dialog content element. */
     contentProps?: Omit<React.ComponentProps<typeof DialogContent>, "children"> & React.HTMLAttributes<HTMLDivElement> & {

package/dist/components/command/command-dialog.js

@@ -14,7 +14,7 @@ import { Command } from "../command/command-root.js";
  * @bestPractice Pass `filter={null}` to list the entries unfiltered, for example when the application filters them itself.
  */
 export const CommandDialog = (props) => {
-    const { title = "Command Palette", description = "Search for a command to run…", children, className, showCloseButton = true, contentProps, filter, groups: _groups, items: _items, limit, mode, ...dialogProps } = props;
+    const { title = "Command Palette", description = "Search for a command to run…", children, className, showCloseButton = false, contentProps, filter, groups: _groups, items: _items, limit, mode, ...dialogProps } = props;
     // Narrow on `props` so the palette receives exactly one of items or groups.
     const source = props.groups === undefined
         ? { items: props.items }

package/dist/components/command/command-input.js

@@ -1,7 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Autocomplete as AutocompletePrimitive } from "@base-ui/react/autocomplete";
-import { focusRing } from "@instruments/materia-ui/tokens/focus-ring";
 import { cn } from "@instruments/materia-ui/utils/cn";
 import { Search } from "lucide-react";
 import { Icon } from "../icon.js";
@@ -9,4 +8,8 @@ import { Icon } from "../icon.js";
  * CommandInput renders the search field for a Command; typing filters the list.
  * Import from "@instruments/materia-ui/components/command".
  */
-export const CommandInput = ({ className, ...props }) => (_jsxs(AutocompletePrimitive.InputGroup, { className: "flex h-9 items-center gap-2 border-b px-3", "data-component": "command-input-wrapper", "data-slot": "command-input-wrapper", children: [_jsx(Icon, { className: "shrink-0 opacity-50", icon: Search, size: "xs" }), _jsx(AutocompletePrimitive.Input, { className: cn(focusRing(), "placeholder:text-muted-foreground text-paragraph-sm flex h-10 w-full rounded-lg bg-transparent py-3 disabled:cursor-not-allowed disabled:opacity-50", "focus-visible:ring-inset", className), "data-component": "command-input", "data-slot": "command-input", ...props })] }));
+export const CommandInput = ({ className, ...props }) => (_jsxs(AutocompletePrimitive.InputGroup, { className: "flex h-9 items-center gap-2 border-b px-3", "data-component": "command-input-wrapper", "data-slot": "command-input-wrapper", children: [_jsx(Icon, { className: "shrink-0 opacity-50", icon: Search, size: "xs" }), _jsx(AutocompletePrimitive.Input, { className: cn(
+            // No ring: the field is the palette's only input and always holds
+            // focus, so the caret marks it; a ring would collide with the
+            // dialog's rounded top edge.
+            "placeholder:text-muted-foreground text-paragraph-sm flex h-full w-full bg-transparent outline-none disabled:cursor-not-allowed disabled:opacity-50", className), "data-component": "command-input", "data-slot": "command-input", ...props })] }));

package/dist/components/segmented-control/segmented-control-root.js

@@ -6,7 +6,7 @@ import { ScrollFade } from "@instruments/materia-ui/components/scroll-fade";
 import { cn } from "@instruments/materia-ui/utils/cn";
 import { useEffect, useId, useMemo, useRef, useState } from "react";
 import { getResponsiveSizeOverrides, resolveResponsiveBase, } from "../../tokens/responsive.js";
-import { SEGMENTED_GAP, SEGMENTED_SHELL_BASE, SEGMENTED_SHELL_PADDING, } from "../../tokens/segmented.js";
+import { SEGMENTED_GAP, SEGMENTED_SHELL_BASE, SEGMENTED_SHELL_PADDING_X, SEGMENTED_SHELL_PADDING_Y, } from "../../tokens/segmented.js";
 import { Flex } from "../flex.js";
 import { SegmentedControlContext } from "./segmented-control-context.js";
 import { useSingleSelection } from "./use-single-selection.js";
@@ -65,10 +65,13 @@ const SegmentedControl = ({ className, size = "sm", fullWidth = false, value, de
             viewport?.removeEventListener("scroll", checkScroll);
         };
     }, []);
-    return (_jsx(ToggleGroup, { className: cn(SEGMENTED_SHELL_BASE, "group/segmented-control inline-flex h-auto max-w-full items-center overflow-hidden", SEGMENTED_SHELL_PADDING[resolvedSize], getResponsiveSizeOverrides(size, SEGMENTED_SHELL_PADDING), fullWidth && "flex w-full", className), "data-component": "segmented-control", "data-size": resolvedSize, "data-slot": "segmented-control", onValueChange: (groupValue) => {
+    return (_jsx(ToggleGroup, { className: cn(SEGMENTED_SHELL_BASE, "group/segmented-control inline-flex h-auto max-w-full items-center overflow-hidden", SEGMENTED_SHELL_PADDING_X[resolvedSize], getResponsiveSizeOverrides(size, SEGMENTED_SHELL_PADDING_X), fullWidth && "flex w-full", className), "data-component": "segmented-control", "data-size": resolvedSize, "data-slot": "segmented-control", onValueChange: (groupValue) => {
             // Single-select group: Base UI sends `[]` when the active item is
             // re-clicked; the selection hook swallows that deselect.
             selection.onValueChange(groupValue[0] ?? "");
-        }, value: [selection.value], ...props, children: _jsx(SegmentedControlContext.Provider, { value: contextValue, children: _jsxs("div", { className: "relative min-w-0 flex-1", ref: containerRef, children: [_jsx(ScrollArea, { hideScrollbar: true, orientation: "horizontal", children: _jsx(Flex, { align: "center", className: cn(SEGMENTED_GAP[resolvedSize], getResponsiveSizeOverrides(size, SEGMENTED_GAP), fullWidth && "w-full"), inline: true, children: children }) }), showEndFade && (_jsx(ScrollFade, { className: "rounded-r-full", orientation: "horizontal", position: "end", size: "sm", theme: "gray" }))] }) }) }));
+        }, value: [selection.value], ...props, children: _jsx(SegmentedControlContext.Provider, { value: contextValue, children: _jsxs("div", { className: "relative min-w-0 flex-1", ref: containerRef, children: [_jsx(ScrollArea, { hideScrollbar: true, orientation: "horizontal", children: _jsx(Flex, { align: "center", className: cn(
+                            // Vertical padding sits inside the scroll area, which clips,
+                            // so each item's hit area reaches the shell's full height.
+                            SEGMENTED_SHELL_PADDING_Y[resolvedSize], getResponsiveSizeOverrides(size, SEGMENTED_SHELL_PADDING_Y), SEGMENTED_GAP[resolvedSize], getResponsiveSizeOverrides(size, SEGMENTED_GAP), fullWidth && "w-full"), inline: true, children: children }) }), showEndFade && (_jsx(ScrollFade, { className: "rounded-r-full", orientation: "horizontal", position: "end", size: "sm", theme: "gray" }))] }) }) }));
 };
 export { SegmentedControl };

package/dist/components/segmented-control/segmented-control-variants.js

@@ -20,7 +20,10 @@ const triggerPaddingCompoundVariants = typedEntries(SEGMENTED_TRIGGER_PADDING).m
  * Structure mirrors `tabsTriggerVariants` (pill): the `size` variant only sets
  * text size; ALL padding is applied through size-keyed compound variants.
  */
-export const segmentedControlItemVariants = cva(cn(focusRing(), "text-muted-foreground relative inline-flex shrink-0 cursor-pointer items-center justify-center rounded-full font-medium whitespace-nowrap", `transition-color-shadow-border ${DISABLED}`, "data-pressed:text-foreground dark:text-gray-500 dark:data-pressed:text-gray-100", "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"), {
+export const segmentedControlItemVariants = cva(cn(focusRing(), "text-muted-foreground relative inline-flex shrink-0 cursor-pointer items-center justify-center rounded-full font-medium whitespace-nowrap", 
+// An invisible hit area overhanging the segment; the root's scroll area
+// trims it to the track, so a tap anywhere in the track's height lands.
+"after:absolute after:inset-x-0 after:-inset-y-3", `transition-color-shadow-border ${DISABLED}`, "data-pressed:text-foreground dark:text-gray-500 dark:data-pressed:text-gray-100", "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"), {
     compoundVariants: triggerPaddingCompoundVariants,
     defaultVariants: {
         size: "sm",

package/dist/components/swatch-selector/swatch-selector-item.js

@@ -24,7 +24,10 @@ export const SwatchSelectorItem = ({ value, color, children, size: sizeOverride,
     const isSelected = selectedValue === value;
     const button = (_jsx(TogglePrimitive, { "aria-label": props["aria-label"] ?? `Select ${value}`, className: cn(
         // Focus styles only - visual handled by Swatch
-        "inline-flex shrink-0 cursor-pointer items-center justify-center rounded-full", focusRing(), "disabled:cursor-not-allowed disabled:opacity-50", className), "data-component": "swatch-selector-item", "data-slot": "swatch-selector-item", onClick: (event) => {
+        "relative inline-flex shrink-0 cursor-pointer items-center justify-center rounded-full", 
+        // An invisible hit area at least 44px tall and 5px wider each side, so
+        // a small swatch fills its slot in a 10px-gapped row.
+        "after:absolute after:-inset-x-[5px] after:top-1/2 after:h-full after:min-h-11 after:-translate-y-1/2", focusRing(), "disabled:cursor-not-allowed disabled:opacity-50", className), "data-component": "swatch-selector-item", "data-slot": "swatch-selector-item", onClick: (event) => {
             event.stopPropagation();
         }, value: value, ...props, children: _jsx(Swatch, { ...(color === undefined ? {} : { color }), selected: isSelected, size: resolvedSize, unavailable: unavailable, children: children }) }));
     if (unavailable) {

package/dist/data/docs-manifest.js

@@ -2638,7 +2638,8 @@ export const docsManifest = {
                             name: "showCloseButton",
                             type: "boolean",
                             required: false,
-                            description: "Whether to show the dialog close button.",
+                            defaultValue: "false",
+                            description: "Whether to show the dialog close button. Off by default: the button sits\nover the search field, and Escape or a click outside closes the palette.",
                         },
                         {
                             name: "contentProps",

package/dist/tokens/segmented.d.ts

@@ -20,6 +20,14 @@ import type { ComponentSize } from "./size.js";
 export declare const SEGMENTED_SHELL_BASE = "rounded-full bg-surface-inset text-muted-foreground";
 /** Shared shell padding scale by size. */
 export declare const SEGMENTED_SHELL_PADDING: Record<ComponentSize, string>;
+/**
+ * The horizontal half of `SEGMENTED_SHELL_PADDING`. SegmentedControl puts this
+ * on the shell and the vertical half inside its scroll area, so each item's
+ * hit area can fill the shell's full height.
+ */
+export declare const SEGMENTED_SHELL_PADDING_X: Record<ComponentSize, string>;
+/** The vertical half of `SEGMENTED_SHELL_PADDING`. */
+export declare const SEGMENTED_SHELL_PADDING_Y: Record<ComponentSize, string>;
 /**
  * Shared trigger/item text-size scale by size. `SegmentedControl` items,
  * `TabsTrigger` and `TabNavigationLink` all read it, so they render identical

package/dist/tokens/segmented.js

@@ -28,6 +28,32 @@ export const SEGMENTED_SHELL_PADDING = {
     xl: "p-1",
     xs: "p-0.5",
 };
+/**
+ * The horizontal half of `SEGMENTED_SHELL_PADDING`. SegmentedControl puts this
+ * on the shell and the vertical half inside its scroll area, so each item's
+ * hit area can fill the shell's full height.
+ */
+export const SEGMENTED_SHELL_PADDING_X = {
+    "2xl": "px-1.5",
+    "2xs": "px-0.5",
+    "3xl": "px-1.5",
+    base: "px-0.5",
+    lg: "px-1",
+    sm: "px-0.5",
+    xl: "px-1",
+    xs: "px-0.5",
+};
+/** The vertical half of `SEGMENTED_SHELL_PADDING`. */
+export const SEGMENTED_SHELL_PADDING_Y = {
+    "2xl": "py-1.5",
+    "2xs": "py-0.5",
+    "3xl": "py-1.5",
+    base: "py-0.5",
+    lg: "py-1",
+    sm: "py-0.5",
+    xl: "py-1",
+    xs: "py-0.5",
+};
 /**
  * Shared trigger/item text-size scale by size. `SegmentedControl` items,
  * `TabsTrigger` and `TabNavigationLink` all read it, so they render identical

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instruments/materia-ui",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "Materia design system: React components, tokens and Tailwind v4 styles.",
   "license": "SEE LICENSE IN LICENSE",
   "repository": {