@usefragments/ui 1.5.3 → 1.6.0

package/dist/measurements/generated.cjs

@@ -0,0 +1,296 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const MEASUREMENT_PROFILES = {
+  density: {
+    compact: {
+      baseUnit: "6px",
+      baseFontSize: "14px",
+      spacingMultipliers: {
+        "1": 1,
+        "2": 2,
+        "3": 3,
+        "4": 4,
+        "5": 5,
+        "6": 6,
+        "8": 8,
+        "10": 10,
+        "12": 12,
+        px: "1px",
+        "0-5": 0.3,
+        "0-75": 0.43
+      },
+      controlHeight: {
+        xs: "32px",
+        sm: "32px",
+        md: "32px",
+        lg: "36px"
+      },
+      touch: {
+        sm: "32px",
+        md: "32px",
+        lg: "40px"
+      },
+      sidebarItemHeight: "32px"
+    },
+    default: {
+      baseUnit: "7px",
+      baseFontSize: "14px",
+      spacingMultipliers: {
+        "1": 1,
+        "2": 2,
+        "3": 3,
+        "4": 4,
+        "5": 5,
+        "6": 6,
+        "8": 8,
+        "10": 10,
+        "12": 12,
+        px: "1px",
+        "0-5": 0.3,
+        "0-75": 0.43
+      },
+      controlHeight: {
+        xs: "32px",
+        sm: "32px",
+        md: "40px",
+        lg: "44px"
+      },
+      touch: {
+        sm: "32px",
+        md: "32px",
+        lg: "44px"
+      },
+      sidebarItemHeight: "32px"
+    },
+    relaxed: {
+      baseUnit: "8px",
+      baseFontSize: "14px",
+      spacingMultipliers: {
+        "1": 1,
+        "2": 2,
+        "3": 3,
+        "4": 4,
+        "5": 5,
+        "6": 6,
+        "8": 8,
+        "10": 10,
+        "12": 12,
+        px: "1px",
+        "0-5": 0.3,
+        "0-75": 0.43
+      },
+      controlHeight: {
+        xs: "32px",
+        sm: "32px",
+        md: "44px",
+        lg: "48px"
+      },
+      touch: {
+        sm: "32px",
+        md: "40px",
+        lg: "48px"
+      },
+      sidebarItemHeight: "36px"
+    }
+  },
+  radius: {
+    sharp: {
+      sm: "0",
+      md: "0",
+      lg: "0",
+      xl: "0"
+    },
+    subtle: {
+      sm: "0.125rem",
+      md: "0.25rem",
+      lg: "0.375rem",
+      xl: "0.5rem"
+    },
+    default: {
+      sm: "0.25rem",
+      md: "0.429rem",
+      lg: "0.571rem",
+      xl: "0.857rem"
+    },
+    rounded: {
+      sm: "0.375rem",
+      md: "0.5rem",
+      lg: "0.75rem",
+      xl: "1rem"
+    },
+    pill: {
+      sm: "0.5rem",
+      md: "0.75rem",
+      lg: "1rem",
+      xl: "1.5rem"
+    }
+  },
+  rawSpace: {
+    "0": "0",
+    "2": "2px",
+    "4": "4px",
+    "6": "6px",
+    "8": "8px",
+    "10": "10px",
+    "12": "12px",
+    "16": "16px",
+    "20": "20px",
+    "24": "24px",
+    "32": "32px",
+    "40": "40px",
+    "48": "48px",
+    "64": "64px"
+  },
+  targets: {
+    controlTrack: {
+      micro: "24px",
+      sm: "28px",
+      md: "32px",
+      lg: "40px"
+    },
+    fieldTrack: {
+      sm: "28px",
+      md: "32px",
+      lg: "40px"
+    },
+    fieldInlineInset: {
+      sm: "10px",
+      md: "12px",
+      lg: "16px"
+    },
+    surfaceInset: {
+      panel: "0",
+      compact: "12px",
+      default: "16px",
+      roomy: "24px"
+    },
+    icon: {
+      xs: "12px",
+      sm: "14px",
+      md: "16px",
+      lg: "20px",
+      xl: "24px",
+      "2xl": "32px"
+    },
+    stroke: {
+      hairline: "1px",
+      default: "2px",
+      strong: "3px"
+    },
+    layoutMeasure: {
+      "field-minimum": "140px",
+      "inline-floor": "56px",
+      "compact-content": "168px",
+      "grid-cell": "224px",
+      "composer-item": "210px",
+      "page-narrow": "800px"
+    }
+  },
+  typography: {
+    caption: {
+      size: "12px",
+      line: "16px",
+      weight: 400,
+      tracking: "0"
+    },
+    "ui-compact": {
+      size: "12px",
+      line: "16px",
+      weight: 500,
+      tracking: "-0.01em"
+    },
+    "ui-standard": {
+      size: "14px",
+      line: "20px",
+      weight: 500,
+      tracking: "-0.01em"
+    },
+    "body-compact": {
+      size: "14px",
+      line: "20px",
+      weight: 400,
+      tracking: "0"
+    },
+    "body-relaxed": {
+      size: "16px",
+      line: "24px",
+      weight: 400,
+      tracking: "0"
+    },
+    "title-sm": {
+      size: "16px",
+      line: "24px",
+      weight: 600,
+      tracking: "-0.01em"
+    },
+    "title-md": {
+      size: "20px",
+      line: "28px",
+      weight: 600,
+      tracking: "-0.02em"
+    },
+    "title-lg": {
+      size: "24px",
+      line: "32px",
+      weight: 600,
+      tracking: "-0.02em"
+    },
+    code: {
+      size: "14px",
+      line: "20px",
+      weight: 400,
+      tracking: "0"
+    }
+  },
+  navigation: {
+    appShellHeaderHeight: "56px",
+    sidebarGutter: "8px",
+    sidebarLeadingBox: "16px",
+    sidebarDot: "6px",
+    sidebarRail: "2px",
+    sidebarLabelOffset: "1px",
+    sidebarCollapsedWidth: "56px"
+  }
+};
+function measurementPx(value, path = "measurement") {
+  const match = /^([0-9]+(?:\.[0-9]+)?)px$/.exec(value);
+  const pixels = match === null ? Number.NaN : Number(match[1]);
+  if (!Number.isFinite(pixels)) {
+    throw new TypeError(
+      path + " must be a finite non-negative px length; received " + JSON.stringify(value)
+    );
+  }
+  return pixels;
+}
+function setRestorableAttribute(element, attribute, value) {
+  const hadAttribute = element.hasAttribute(attribute);
+  const previousValue = element.getAttribute(attribute);
+  element.setAttribute(attribute, value);
+  return () => {
+    if (hadAttribute) {
+      element.setAttribute(attribute, previousValue ?? "");
+    } else {
+      element.removeAttribute(attribute);
+    }
+  };
+}
+function applyMeasurementSelection(element, selection) {
+  const restore = [];
+  if (selection.density !== void 0) {
+    restore.push(setRestorableAttribute(element, "data-fui-density", selection.density));
+  }
+  if (selection.radiusStyle !== void 0) {
+    restore.push(setRestorableAttribute(element, "data-fui-radius-style", selection.radiusStyle));
+  }
+  let cleaned = false;
+  return () => {
+    if (cleaned) return;
+    cleaned = true;
+    for (let index = restore.length - 1; index >= 0; index -= 1) {
+      restore[index]();
+    }
+  };
+}
+exports.MEASUREMENT_PROFILES = MEASUREMENT_PROFILES;
+exports.applyMeasurementSelection = applyMeasurementSelection;
+exports.measurementPx = measurementPx;

package/dist/measurements/generated.d.ts

@@ -0,0 +1,261 @@
+export declare const MEASUREMENT_PROFILES: {
+    readonly density: {
+        readonly compact: {
+            readonly baseUnit: "6px";
+            readonly baseFontSize: "14px";
+            readonly spacingMultipliers: {
+                readonly "1": 1;
+                readonly "2": 2;
+                readonly "3": 3;
+                readonly "4": 4;
+                readonly "5": 5;
+                readonly "6": 6;
+                readonly "8": 8;
+                readonly "10": 10;
+                readonly "12": 12;
+                readonly px: "1px";
+                readonly "0-5": 0.3;
+                readonly "0-75": 0.43;
+            };
+            readonly controlHeight: {
+                readonly xs: "32px";
+                readonly sm: "32px";
+                readonly md: "32px";
+                readonly lg: "36px";
+            };
+            readonly touch: {
+                readonly sm: "32px";
+                readonly md: "32px";
+                readonly lg: "40px";
+            };
+            readonly sidebarItemHeight: "32px";
+        };
+        readonly default: {
+            readonly baseUnit: "7px";
+            readonly baseFontSize: "14px";
+            readonly spacingMultipliers: {
+                readonly "1": 1;
+                readonly "2": 2;
+                readonly "3": 3;
+                readonly "4": 4;
+                readonly "5": 5;
+                readonly "6": 6;
+                readonly "8": 8;
+                readonly "10": 10;
+                readonly "12": 12;
+                readonly px: "1px";
+                readonly "0-5": 0.3;
+                readonly "0-75": 0.43;
+            };
+            readonly controlHeight: {
+                readonly xs: "32px";
+                readonly sm: "32px";
+                readonly md: "40px";
+                readonly lg: "44px";
+            };
+            readonly touch: {
+                readonly sm: "32px";
+                readonly md: "32px";
+                readonly lg: "44px";
+            };
+            readonly sidebarItemHeight: "32px";
+        };
+        readonly relaxed: {
+            readonly baseUnit: "8px";
+            readonly baseFontSize: "14px";
+            readonly spacingMultipliers: {
+                readonly "1": 1;
+                readonly "2": 2;
+                readonly "3": 3;
+                readonly "4": 4;
+                readonly "5": 5;
+                readonly "6": 6;
+                readonly "8": 8;
+                readonly "10": 10;
+                readonly "12": 12;
+                readonly px: "1px";
+                readonly "0-5": 0.3;
+                readonly "0-75": 0.43;
+            };
+            readonly controlHeight: {
+                readonly xs: "32px";
+                readonly sm: "32px";
+                readonly md: "44px";
+                readonly lg: "48px";
+            };
+            readonly touch: {
+                readonly sm: "32px";
+                readonly md: "40px";
+                readonly lg: "48px";
+            };
+            readonly sidebarItemHeight: "36px";
+        };
+    };
+    readonly radius: {
+        readonly sharp: {
+            readonly sm: "0";
+            readonly md: "0";
+            readonly lg: "0";
+            readonly xl: "0";
+        };
+        readonly subtle: {
+            readonly sm: "0.125rem";
+            readonly md: "0.25rem";
+            readonly lg: "0.375rem";
+            readonly xl: "0.5rem";
+        };
+        readonly default: {
+            readonly sm: "0.25rem";
+            readonly md: "0.429rem";
+            readonly lg: "0.571rem";
+            readonly xl: "0.857rem";
+        };
+        readonly rounded: {
+            readonly sm: "0.375rem";
+            readonly md: "0.5rem";
+            readonly lg: "0.75rem";
+            readonly xl: "1rem";
+        };
+        readonly pill: {
+            readonly sm: "0.5rem";
+            readonly md: "0.75rem";
+            readonly lg: "1rem";
+            readonly xl: "1.5rem";
+        };
+    };
+    readonly rawSpace: {
+        readonly "0": "0";
+        readonly "2": "2px";
+        readonly "4": "4px";
+        readonly "6": "6px";
+        readonly "8": "8px";
+        readonly "10": "10px";
+        readonly "12": "12px";
+        readonly "16": "16px";
+        readonly "20": "20px";
+        readonly "24": "24px";
+        readonly "32": "32px";
+        readonly "40": "40px";
+        readonly "48": "48px";
+        readonly "64": "64px";
+    };
+    readonly targets: {
+        readonly controlTrack: {
+            readonly micro: "24px";
+            readonly sm: "28px";
+            readonly md: "32px";
+            readonly lg: "40px";
+        };
+        readonly fieldTrack: {
+            readonly sm: "28px";
+            readonly md: "32px";
+            readonly lg: "40px";
+        };
+        readonly fieldInlineInset: {
+            readonly sm: "10px";
+            readonly md: "12px";
+            readonly lg: "16px";
+        };
+        readonly surfaceInset: {
+            readonly panel: "0";
+            readonly compact: "12px";
+            readonly default: "16px";
+            readonly roomy: "24px";
+        };
+        readonly icon: {
+            readonly xs: "12px";
+            readonly sm: "14px";
+            readonly md: "16px";
+            readonly lg: "20px";
+            readonly xl: "24px";
+            readonly "2xl": "32px";
+        };
+        readonly stroke: {
+            readonly hairline: "1px";
+            readonly default: "2px";
+            readonly strong: "3px";
+        };
+        readonly layoutMeasure: {
+            readonly "field-minimum": "140px";
+            readonly "inline-floor": "56px";
+            readonly "compact-content": "168px";
+            readonly "grid-cell": "224px";
+            readonly "composer-item": "210px";
+            readonly "page-narrow": "800px";
+        };
+    };
+    readonly typography: {
+        readonly caption: {
+            readonly size: "12px";
+            readonly line: "16px";
+            readonly weight: 400;
+            readonly tracking: "0";
+        };
+        readonly "ui-compact": {
+            readonly size: "12px";
+            readonly line: "16px";
+            readonly weight: 500;
+            readonly tracking: "-0.01em";
+        };
+        readonly "ui-standard": {
+            readonly size: "14px";
+            readonly line: "20px";
+            readonly weight: 500;
+            readonly tracking: "-0.01em";
+        };
+        readonly "body-compact": {
+            readonly size: "14px";
+            readonly line: "20px";
+            readonly weight: 400;
+            readonly tracking: "0";
+        };
+        readonly "body-relaxed": {
+            readonly size: "16px";
+            readonly line: "24px";
+            readonly weight: 400;
+            readonly tracking: "0";
+        };
+        readonly "title-sm": {
+            readonly size: "16px";
+            readonly line: "24px";
+            readonly weight: 600;
+            readonly tracking: "-0.01em";
+        };
+        readonly "title-md": {
+            readonly size: "20px";
+            readonly line: "28px";
+            readonly weight: 600;
+            readonly tracking: "-0.02em";
+        };
+        readonly "title-lg": {
+            readonly size: "24px";
+            readonly line: "32px";
+            readonly weight: 600;
+            readonly tracking: "-0.02em";
+        };
+        readonly code: {
+            readonly size: "14px";
+            readonly line: "20px";
+            readonly weight: 400;
+            readonly tracking: "0";
+        };
+    };
+    readonly navigation: {
+        readonly appShellHeaderHeight: "56px";
+        readonly sidebarGutter: "8px";
+        readonly sidebarLeadingBox: "16px";
+        readonly sidebarDot: "6px";
+        readonly sidebarRail: "2px";
+        readonly sidebarLabelOffset: "1px";
+        readonly sidebarCollapsedWidth: "56px";
+    };
+};
+export type MeasurementDensity = keyof typeof MEASUREMENT_PROFILES.density;
+export type MeasurementRadiusStyle = keyof typeof MEASUREMENT_PROFILES.radius;
+export type MeasurementSelection = Readonly<{
+    density?: MeasurementDensity;
+    radiusStyle?: MeasurementRadiusStyle;
+}>;
+export declare function measurementPx(value: string, path?: string): number;
+export declare function applyMeasurementSelection(element: HTMLElement, selection: MeasurementSelection): () => void;
+//# sourceMappingURL=generated.d.ts.map

package/dist/measurements/generated.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"generated.d.ts","sourceRoot":"","sources":["../../src/measurements/generated.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2PvB,CAAC;AAEX,MAAM,MAAM,kBAAkB,GAAG,MAAM,OAAO,oBAAoB,CAAC,OAAO,CAAC;AAC3E,MAAM,MAAM,sBAAsB,GAAG,MAAM,OAAO,oBAAoB,CAAC,MAAM,CAAC;AAE9E,MAAM,MAAM,oBAAoB,GAAG,QAAQ,CAAC;IAC1C,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,WAAW,CAAC,EAAE,sBAAsB,CAAC;CACtC,CAAC,CAAC;AAEH,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,SAAgB,GAAG,MAAM,CASzE;AAsBD,wBAAgB,yBAAyB,CACvC,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,oBAAoB,GAC9B,MAAM,IAAI,CAkBZ"}