@mirror-physics/fractal-ui 0.2.0-next.75 → 0.2.0-next.76

package/README.md

@@ -43,3 +43,11 @@ import { Button, Card, CardContent } from '@mirror-physics/fractal-ui'
 npm run typecheck
 npm run build
 ```
+
+### Shared control sizes
+
+Use `controlSize="xs" | "sm" | "md" | "lg" | "xl"` on Button, Dropdown, Input, NumberInput, TableSearch, PasswordInput, and Label. The default is `md`. Matching sizes share typography and padding; their block size derives from the line box, padding, and borders. Existing `Button.buttonSize` and `Dropdown.size` remain aliases; `controlSize` wins if both are supplied. Native numeric `Input.size` retains its HTML meaning.
+
+Compose a persistent label and control in `className="fractal-field"` to use the shared label gap. For dropdowns, connect `Label.htmlFor` to `Dropdown.triggerId` and provide a meaningful `triggerLabel`. Use matching sizes across a row. Icons add a shared leading slot; centered action labels remain centered.
+
+This changes the rendered geometry of existing size presets, including default controls. Remove product CSS that hardcodes the previous heights. Compact sizes suit pointer interfaces; choose an appropriately large target for touch. Custom multiline dropdown content may grow beyond the single-line minimum.

package/dist/index.cjs

@@ -161,31 +161,19 @@ var colorPalette = {
     700: "var(--green-700)"
   }
 };
-var sizeConfig = {
-  xs: { height: "28px", padding: "4px 8px", iconOnly: "28px", fontSize: "0.75rem" },
-  sm: { height: "32px", padding: "6px 12px", iconOnly: "32px", fontSize: "0.75rem" },
-  md: { height: "40px", padding: "8px 16px", iconOnly: "40px", fontSize: "0.875rem" },
-  lg: { height: "44px", padding: "10px 20px", iconOnly: "44px", fontSize: "1rem" },
-  xl: { height: "56px", padding: "14px 28px", iconOnly: "56px", fontSize: "1rem" }
-};
-function getButtonStyles(buttonType, isHovered, isActive, buttonSize, disabled, color, hasIconOnly) {
+function getButtonStyles(buttonType, isHovered, isActive, disabled, color, hasIconOnly) {
   const palette = colorPalette[color];
-  const size = sizeConfig[buttonSize];
   const base = {
-    height: size.height,
-    padding: hasIconOnly ? "0" : size.padding,
     borderRadius: hasIconOnly ? "var(--radius-lg, 8px)" : "var(--radius-full, 9999px)",
     cursor: disabled ? "not-allowed" : "pointer",
-    fontSize: size.fontSize,
     transition: "background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease"
   };
   if (hasIconOnly) {
-    base.width = size.iconOnly;
     base.justifyContent = "center";
   }
   if (disabled) {
     if (buttonType === "ghost") {
-      return { ...base, backgroundColor: "transparent", border: "none", color: "var(--fg-disabled)" };
+      return { ...base, backgroundColor: "transparent", border: "1px solid transparent", color: "var(--fg-disabled)" };
     }
     return { ...base, backgroundColor: "transparent", border: "1px solid var(--fg-disabled)", color: "var(--fg-disabled)" };
   }
@@ -196,7 +184,7 @@ function getButtonStyles(buttonType, isHovered, isActive, buttonSize, disabled,
         return {
           ...base,
           backgroundColor: isActive ? palette[700] : isHovered ? palette[500] : palette[600],
-          border: "none",
+          border: "1px solid transparent",
           color: "var(--fg-inverse)"
         };
       }
@@ -220,7 +208,7 @@ function getButtonStyles(buttonType, isHovered, isActive, buttonSize, disabled,
       return {
         ...base,
         backgroundColor: isHovered || isActive ? "var(--bg-surface-1)" : "transparent",
-        border: "none",
+        border: "1px solid transparent",
         color: "var(--fg-primary)"
       };
     // Danger: low-intensity destructive action. Text stays steady; hover deepens the light red surface.
@@ -228,7 +216,7 @@ function getButtonStyles(buttonType, isHovered, isActive, buttonSize, disabled,
       return {
         ...base,
         backgroundColor: isHovered || isActive ? "var(--danger-button-surface-hover)" : "var(--danger-button-surface)",
-        border: "none",
+        border: "1px solid transparent",
         color: "var(--danger-button-fg)"
       };
     default:
@@ -236,10 +224,10 @@ function getButtonStyles(buttonType, isHovered, isActive, buttonSize, disabled,
   }
 }
 var Button = React.forwardRef(
-  ({ className, buttonType = "primary", buttonSize = "md", color = "blue", icon, hasIconOnly, iconPosition = "left", style, disabled, children, ...props }, ref) => {
+  ({ className, buttonType = "primary", buttonSize = "md", controlSize, color = "blue", icon, hasIconOnly, iconPosition = "left", style, disabled, children, ...props }, ref) => {
     const [isHovered, setIsHovered] = React.useState(false);
     const [isActive, setIsActive] = React.useState(false);
-    const typeStyles = getButtonStyles(buttonType, isHovered, isActive, buttonSize, !!disabled, color, hasIconOnly);
+    const typeStyles = getButtonStyles(buttonType, isHovered, isActive, !!disabled, color, hasIconOnly);
     const hasIconAndText = icon && children && !hasIconOnly;
     const finalStyles = hasIconAndText ? { ...typeStyles, gap: "var(--space-2, 8px)", ...style } : { ...typeStyles, ...style };
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
@@ -247,7 +235,9 @@ var Button = React.forwardRef(
       {
         ref,
         type: "button",
-        className: cn("fractal-button", `fractal-button--${buttonType}`, className),
+        "data-control-size": controlSize ?? buttonSize,
+        "data-icon-only": hasIconOnly || void 0,
+        className: cn("fractal-control", "fractal-button", `fractal-button--${buttonType}`, className),
         style: finalStyles,
         disabled,
         onMouseEnter: (e) => {
@@ -649,7 +639,7 @@ var React2 = __toESM(require("react"), 1);
 var import_fractal_icons3 = require("@mirror-physics/fractal-icons");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var Card = React2.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ref, className: cn("fractal-card", className), ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ref, "data-fractal-border-surface": "surface-1", className: cn("fractal-card", className), ...props })
 );
 Card.displayName = "Card";
 var CardHeader = React2.forwardRef(
@@ -779,12 +769,13 @@ PromptGrid.displayName = "PromptGrid";
 var React4 = __toESM(require("react"), 1);
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var Input = React4.forwardRef(
-  ({ className, type, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  ({ className, type, controlSize = "md", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "input",
     {
       type,
       ref,
-      className: cn("fractal-input", className),
+      "data-control-size": controlSize,
+      className: cn("fractal-control", "fractal-input", className),
       ...props
     }
   )
@@ -798,6 +789,7 @@ var import_jsx_runtime7 = require("react/jsx-runtime");
 var TableSearch = React5.forwardRef(
   ({
     searchType = "text",
+    controlSize = "md",
     className,
     inputClassName,
     placeholder,
@@ -811,12 +803,14 @@ var TableSearch = React5.forwardRef(
       {
         className: cn("fractal-table-search", className),
         "data-search-type": searchType,
+        "data-control-size": controlSize,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SearchIcon, { className: "fractal-table-search__icon", size: 17, "aria-hidden": "true" }),
           /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             Input,
             {
               ...props,
+              controlSize,
               ref,
               type: "search",
               className: cn("fractal-table-search__input", inputClassName),
@@ -837,6 +831,7 @@ var import_fractal_icons5 = require("@mirror-physics/fractal-icons");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 function NumberInput({
   unit,
+  controlSize = "md",
   className,
   value,
   defaultValue,
@@ -860,11 +855,12 @@ function NumberInput({
     input.dispatchEvent(new Event("input", { bubbles: true }));
     input.focus();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: cn("fractal-number-input", unit && "fractal-number-input--with-unit", className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { "data-control-size": controlSize, className: cn("fractal-number-input", unit && "fractal-number-input--with-unit", className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       Input,
       {
         ref: inputRef,
+        controlSize,
         type: "number",
         value,
         defaultValue,
@@ -879,7 +875,7 @@ function NumberInput({
       "span",
       {
         className: "fractal-number-input-unit",
-        style: { left: `calc(var(--space-3, 12px) + ${characterCount}ch)` },
+        style: { left: `calc(var(--control-padding-inline) + ${characterCount}ch)` },
         "aria-hidden": "true",
         children: unit
       }
@@ -1044,6 +1040,7 @@ var import_jsx_runtime10 = require("react/jsx-runtime");
 var PasswordInput = React7.forwardRef(
   ({
     className,
+    controlSize = "md",
     disabled,
     showPasswordLabel = "Show password",
     hidePasswordLabel = "Hide password",
@@ -1055,12 +1052,14 @@ var PasswordInput = React7.forwardRef(
       "div",
       {
         className: cn("fractal-password-input", className),
+        "data-control-size": controlSize,
         "data-password-visible": passwordVisible ? "" : void 0,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             Input,
             {
               ...props,
+              controlSize,
               ref,
               className: "fractal-password-input-field",
               disabled,
@@ -1091,10 +1090,11 @@ PasswordInput.displayName = "PasswordInput";
 var React8 = __toESM(require("react"), 1);
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var Label = React8.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  ({ className, controlSize = "md", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     "label",
     {
       ref,
+      "data-control-size": controlSize,
       className: cn("fractal-label", className),
       ...props
     }
@@ -1449,7 +1449,9 @@ function Dropdown({
   label,
   iconOnly = false,
   noChevron = false,
-  size = "md",
+  size: sizeAlias = "md",
+  controlSize,
+  triggerId,
   triggerVariant = "outline",
   className,
   triggerClassName,
@@ -1457,6 +1459,7 @@ function Dropdown({
   closeOnSelect = true,
   disabled = false
 }) {
+  const size = controlSize ?? sizeAlias;
   const [open, setOpen] = React12.useState(false);
   const triggerRef = React12.useRef(null);
   const panelRef = React12.useRef(null);
@@ -1531,11 +1534,13 @@ function Dropdown({
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [open]);
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: cn("fractal-dropdown", className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { "data-control-size": size, className: cn("fractal-dropdown", className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
       "button",
       {
         ref: triggerRef,
+        id: triggerId,
+        "data-control-size": size,
         type: "button",
         disabled,
         "aria-haspopup": "listbox",
@@ -1543,6 +1548,7 @@ function Dropdown({
         "aria-label": triggerLabel,
         onClick: () => setOpen((o) => !o),
         className: cn(
+          "fractal-control",
           "fractal-dropdown-trigger",
           `fractal-dropdown-trigger--${size}`,
           `fractal-dropdown-trigger--${triggerVariant}`,
@@ -1632,6 +1638,7 @@ var Chip = React14.forwardRef(
     "span",
     {
       ref,
+      "data-fractal-border-surface": tone === "neutral" ? "surface-2" : void 0,
       className: cn("fractal-chip", `fractal-chip--${tone}`, className),
       ...props
     }
@@ -2311,8 +2318,8 @@ function Ghost({ className, width, height, radius, style, ...props }) {
 function GhostLine({ className, size = "md", width = "100%", ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Ghost, { className: cn("fractal-ghost-line", `fractal-ghost-line--${size}`, className), width, ...props });
 }
-function ButtonGhost({ className, size = "md", iconOnly = false, width, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Ghost, { className: cn("fractal-ghost-button", `fractal-ghost-button--${size}`, iconOnly && "fractal-ghost-button--icon-only", className), width, ...props });
+function ButtonGhost({ className, size = "md", controlSize, iconOnly = false, width, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Ghost, { "data-control-size": controlSize ?? size, className: cn("fractal-ghost-button", `fractal-ghost-button--${size}`, iconOnly && "fractal-ghost-button--icon-only", className), width, ...props });
 }
 function CardGhost({ className, lines = 3, showHeader = true, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { "aria-hidden": "true", className: cn("fractal-ghost-card", className), ...props, children: [
@@ -2345,8 +2352,8 @@ function TextareaGhost({ className, labelWidth = "26%", ...props }) {
 function LabelGhost({ className, width = "26%", ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(GhostLine, { className: cn("fractal-ghost-label", className), size: "sm", width, ...props });
 }
-function FormFieldGhost({ className, labelWidth = "26%", multiline = false, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { "aria-hidden": "true", className: cn("fractal-ghost-field", className), ...props, children: [
+function FormFieldGhost({ className, labelWidth = "26%", multiline = false, controlSize = "md", ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { "aria-hidden": "true", "data-control-size": controlSize, className: cn("fractal-ghost-field", className), ...props, children: [
     /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(LabelGhost, { width: labelWidth }),
     /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Ghost, { className: cn("fractal-ghost-field__control", multiline && "fractal-ghost-field__control--multiline") })
   ] });
@@ -2371,8 +2378,8 @@ function LinkGhost({ className, width = 96, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(GhostLine, { className: cn("fractal-ghost-link", className), size: "sm", width, ...props });
 }
 var TextButtonGhost = LinkGhost;
-function DropdownGhost({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { "aria-hidden": "true", className: cn("fractal-ghost-dropdown", className), ...props, children: [
+function DropdownGhost({ className, controlSize = "md", ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { "aria-hidden": "true", "data-control-size": controlSize, className: cn("fractal-ghost-dropdown", className), ...props, children: [
     /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(GhostLine, { width: "38%" }),
     /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Ghost, { className: "fractal-ghost-dropdown__chevron" })
   ] });